@industry-theme/agent-panels 0.2.44 → 0.2.47

package/dist/panels.bundle.js

@@ -2795,133 +2795,62 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter, i
   };
 };
 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)) {
-    return `github:${skill.metadata.owner}/${skill.metadata.repo}/${skill.metadata.skillPath}`;
-  }
-  const normalizedName = skill.name.toLowerCase().replace(/\s+/g, "-");
-  return `name:${normalizedName}`;
-};
-const comparePriority = (skill1, skill2) => {
-  var _a, _b;
-  if (skill1.priority !== skill2.priority) {
-    return skill1.priority < skill2.priority;
-  }
-  const time1 = ((_a = skill1.metadata) == null ? void 0 : _a.installedAt) ? new Date(skill1.metadata.installedAt).getTime() : 0;
-  const time2 = ((_b = skill2.metadata) == null ? void 0 : _b.installedAt) ? new Date(skill2.metadata.installedAt).getTime() : 0;
-  return time1 > time2;
-};
-const skillToInstallation = (skill) => ({
-  path: skill.path,
-  source: skill.source,
-  priority: skill.priority,
-  skillFolderPath: skill.skillFolderPath,
-  metadata: skill.metadata
-});
-const deduplicateSkills = (skills, isBrowserMode = false) => {
-  if (isBrowserMode) {
-    return skills;
-  }
-  if (skills.length === 0) {
-    return skills;
-  }
-  const skillGroups = /* @__PURE__ */ new Map();
-  for (const skill of skills) {
-    const key = getDeduplicationKey(skill);
-    const group = skillGroups.get(key) || [];
-    group.push(skill);
-    skillGroups.set(key, group);
-  }
-  const deduplicatedSkills = [];
-  for (const group of skillGroups.values()) {
-    if (group.length === 1) {
-      deduplicatedSkills.push({
-        ...group[0],
-        installedLocations: [skillToInstallation(group[0])]
-      });
-      continue;
-    }
-    const sortedByPriority = [...group].sort(
-      (a, b) => comparePriority(a, b) ? -1 : 1
-    );
-    const primary = sortedByPriority[0];
-    const installations = group.map(skillToInstallation);
-    installations.sort((a, b) => a.priority - b.priority);
-    deduplicatedSkills.push({
-      ...primary,
-      installedLocations: installations
-    });
-  }
-  return deduplicatedSkills;
-};
-const useSkillsData = ({
+const useSkillsBrowseData = ({
   context
 }) => {
-  var _a, _b, _c;
+  var _a, _b;
   const [skills, setSkills] = useState(EMPTY_SKILLS_ARRAY$1);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
-  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTreeSlice = context.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$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;
+  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 lastGlobalSkillsCount = useRef(0);
   const loadSkills = useCallback(async () => {
-    if (fileTreeSha === lastLoadedSha.current && globalSkillsCount === lastGlobalSkillsCount.current) {
+    if (fileTreeSha === lastLoadedSha.current) {
       return;
     }
     setIsLoading(true);
     setError(null);
     try {
-      let localSkills = [];
-      let isBrowserMode = false;
+      let repoSkills = [];
       if (fileTree && (fileSystem == null ? void 0 : fileSystem.readFile) && repoPath) {
-        isBrowserMode = !repoPath.startsWith("/");
-        console.log("[useSkillsData] fileTree:", fileTree);
-        console.log("[useSkillsData] typeof fileTree:", typeof fileTree);
-        console.log("[useSkillsData] fileTree keys:", Object.keys(fileTree));
-        console.log("[useSkillsData] Browser mode:", isBrowserMode);
-        const skillPaths = findSkillFiles(fileTree, isBrowserMode);
-        console.log("[useSkillsData] Found skill paths:", skillPaths);
+        const isGithubRepo = !repoPath.startsWith("/");
+        if (!isGithubRepo) {
+          console.warn("[useSkillsBrowseData] Not a GitHub repo, skipping skill load");
+          setSkills(EMPTY_SKILLS_ARRAY$1);
+          lastLoadedSha.current = fileTreeSha;
+          setIsLoading(false);
+          return;
+        }
+        const skillPaths = findSkillFiles(fileTree, true);
         const skillPromises = skillPaths.map(async (skillPath) => {
           try {
-            const fullPath = isBrowserMode ? skillPath : `${repoPath}/${skillPath}`;
-            const content2 = await fileSystem.readFile(fullPath);
-            return parseSkillContent(content2, skillPath, fileTree, fileSystem, isBrowserMode);
+            const content2 = await fileSystem.readFile(skillPath);
+            return parseSkillContent(content2, skillPath, fileTree, fileSystem, true);
           } catch (err) {
-            console.error(`Failed to read skill at ${skillPath}:`, err);
+            console.error(`[useSkillsBrowseData] Failed to read skill at ${skillPath}:`, err);
             return null;
           }
         });
-        localSkills = (await Promise.all(skillPromises)).filter(
+        repoSkills = (await Promise.all(skillPromises)).filter(
           (skill) => skill !== null
         );
       }
-      console.log("[useSkillsData] Global skills:", globalSkills);
-      const allSkills = [...localSkills, ...globalSkills];
-      console.log("[useSkillsData] Total skills before deduplication:", allSkills.length);
-      const deduplicatedSkills = deduplicateSkills(allSkills, isBrowserMode);
-      console.log("[useSkillsData] Total skills after deduplication:", deduplicatedSkills.length);
-      setSkills(deduplicatedSkills);
+      setSkills(repoSkills);
       lastLoadedSha.current = fileTreeSha;
-      lastGlobalSkillsCount.current = globalSkillsCount;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to load skills";
       setError(errorMessage);
-      console.error("Error loading skills:", err);
+      console.error("[useSkillsBrowseData] Error loading skills:", err);
     } finally {
       setIsLoading(false);
     }
-  }, [fileTree, fileTreeSha, globalSkills, globalSkillsCount, repoPath, fileSystem]);
+  }, [fileTree, fileTreeSha, repoPath, fileSystem]);
   const refreshSkills = useCallback(async () => {
     lastLoadedSha.current = void 0;
-    lastGlobalSkillsCount.current = -1;
     await loadSkills();
   }, [loadSkills]);
   useEffect(() => {
@@ -3528,22 +3457,32 @@ ${otherLocations.map((loc) => `${abbreviateSourceName(loc.source)}: ${loc.path}`
     }
   );
 };
-const SkillsListPanel = ({
+const SkillsBrowsePanel = ({
   context,
   events,
-  browseMode = false,
   supportsRefresh = false
 }) => {
+  var _a, _b;
   const { theme: theme2 } = useTheme();
   const panelRef = useRef(null);
   const [selectedSkillId, setSelectedSkillId] = useState(null);
   const [searchQuery, setSearchQuery] = useState("");
-  const [skillFilter, setSkillFilter] = useState("project");
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const { skills, isLoading, error, refreshSkills } = useSkillsData({ context });
-  gt("skills-list", events, () => {
-    var _a;
-    return (_a = panelRef.current) == null ? void 0 : _a.focus();
+  const { skills, isLoading, error, refreshSkills } = useSkillsBrowseData({ context });
+  const fileTreeSlice = context.fileTree;
+  const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
+  const sourceInfo = (_a = fileTree == null ? void 0 : fileTree.metadata) == null ? void 0 : _a.sourceInfo;
+  const owner = sourceInfo == null ? void 0 : sourceInfo.owner;
+  const repo = sourceInfo == null ? void 0 : sourceInfo.repo;
+  const globalSkillsSlice = context.globalSkills;
+  const installedSkillNames = useMemo(() => {
+    var _a2;
+    const globalSkills = ((_a2 = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _a2.skills) || [];
+    return new Set(globalSkills.map((skill) => skill.name));
+  }, [(_b = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _b.skills]);
+  gt("skills-browse", events, () => {
+    var _a2;
+    return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
   });
   useEffect(() => {
     const unsubscribeInstalled = events.on("skill:installed", () => {
@@ -3557,52 +3496,29 @@ const SkillsListPanel = ({
       unsubscribeUninstalled();
     };
   }, [events, refreshSkills]);
-  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;
+        var _a2, _b2;
         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)))
+        if ((_a2 = skill.description) == null ? void 0 : _a2.toLowerCase().includes(query)) return true;
+        if ((_b2 = skill.capabilities) == null ? void 0 : _b2.some((cap2) => cap2.toLowerCase().includes(query)))
           return true;
         if (skill.path.toLowerCase().includes(query)) return true;
         return false;
       });
     }
     return filtered;
-  }, [skills, searchQuery, skillFilter]);
+  }, [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-list-panel",
+        source: "skills-browse-panel",
         timestamp: Date.now(),
         payload: { skillId: skill.id, skill }
       });
@@ -3614,7 +3530,7 @@ const SkillsListPanel = ({
       events.emit({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         type: "skills:refresh",
-        source: "skills-list-panel",
+        source: "skills-browse-panel",
         timestamp: Date.now(),
         payload: {}
       });
@@ -3655,7 +3571,50 @@ const SkillsListPanel = ({
             },
             children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-                /* @__PURE__ */ jsx(
+                owner && repo ? /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: `https://github.com/${owner}/${repo}`,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: {
+                      textDecoration: "none",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "2px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "h2",
+                        {
+                          style: {
+                            margin: 0,
+                            fontSize: theme2.fontSizes[4],
+                            color: theme2.colors.text,
+                            fontFamily: theme2.fonts.monospace,
+                            lineHeight: 1.2
+                          },
+                          onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
+                          onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
+                          children: String(repo || "")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: theme2.fontSizes[1],
+                            color: theme2.colors.textSecondary,
+                            fontFamily: theme2.fonts.monospace
+                          },
+                          onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
+                          onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
+                          children: String(owner || "")
+                        }
+                      )
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx(
                   "h2",
                   {
                     style: {
@@ -3675,7 +3634,7 @@ const SkillsListPanel = ({
                         },
                         onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
                         onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
-                        children: "Agent Skills"
+                        children: "Browse Skills"
                       }
                     )
                   }
@@ -3801,66 +3760,6 @@ const SkillsListPanel = ({
             ]
           }
         ),
-        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: browseMode ? "Git Repo" : "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",
           {
@@ -3901,7 +3800,7 @@ const SkillsListPanel = ({
                   color: theme2.colors.textSecondary,
                   fontSize: theme2.fontSizes[2]
                 },
-                children: "Loading skills..."
+                children: "Loading skills from repository..."
               }
             ) : filteredSkills.length === 0 ? /* @__PURE__ */ jsxs(
               "div",
@@ -3919,8 +3818,8 @@ const SkillsListPanel = ({
                 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("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" })
                   ] })
                 ]
               }
@@ -3939,7 +3838,7 @@ const SkillsListPanel = ({
                     skill,
                     onClick: handleSkillClick,
                     isSelected: selectedSkillId === skill.id,
-                    filterContext: skillFilter
+                    isInstalled: installedSkillNames.has(skill.name)
                   },
                   skill.id
                 ))
@@ -3957,62 +3856,133 @@ const SkillsListPanel = ({
   );
 };
 const EMPTY_SKILLS_ARRAY = [];
-const useSkillsBrowseData = ({
+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)) {
+    return `github:${skill.metadata.owner}/${skill.metadata.repo}/${skill.metadata.skillPath}`;
+  }
+  const normalizedName = skill.name.toLowerCase().replace(/\s+/g, "-");
+  return `name:${normalizedName}`;
+};
+const comparePriority = (skill1, skill2) => {
+  var _a, _b;
+  if (skill1.priority !== skill2.priority) {
+    return skill1.priority < skill2.priority;
+  }
+  const time1 = ((_a = skill1.metadata) == null ? void 0 : _a.installedAt) ? new Date(skill1.metadata.installedAt).getTime() : 0;
+  const time2 = ((_b = skill2.metadata) == null ? void 0 : _b.installedAt) ? new Date(skill2.metadata.installedAt).getTime() : 0;
+  return time1 > time2;
+};
+const skillToInstallation = (skill) => ({
+  path: skill.path,
+  source: skill.source,
+  priority: skill.priority,
+  skillFolderPath: skill.skillFolderPath,
+  metadata: skill.metadata
+});
+const deduplicateSkills = (skills, isBrowserMode = false) => {
+  if (isBrowserMode) {
+    return skills;
+  }
+  if (skills.length === 0) {
+    return skills;
+  }
+  const skillGroups = /* @__PURE__ */ new Map();
+  for (const skill of skills) {
+    const key = getDeduplicationKey(skill);
+    const group = skillGroups.get(key) || [];
+    group.push(skill);
+    skillGroups.set(key, group);
+  }
+  const deduplicatedSkills = [];
+  for (const group of skillGroups.values()) {
+    if (group.length === 1) {
+      deduplicatedSkills.push({
+        ...group[0],
+        installedLocations: [skillToInstallation(group[0])]
+      });
+      continue;
+    }
+    const sortedByPriority = [...group].sort(
+      (a, b) => comparePriority(a, b) ? -1 : 1
+    );
+    const primary = sortedByPriority[0];
+    const installations = group.map(skillToInstallation);
+    installations.sort((a, b) => a.priority - b.priority);
+    deduplicatedSkills.push({
+      ...primary,
+      installedLocations: installations
+    });
+  }
+  return deduplicatedSkills;
+};
+const useSkillsData = ({
   context
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const [skills, setSkills] = useState(EMPTY_SKILLS_ARRAY);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
-  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTreeSlice = context.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 globalSkillsSlice = context.globalSkills;
+  const globalSkills = ((_a = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _a.skills) ?? EMPTY_SKILLS_ARRAY;
+  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;
   const lastLoadedSha = useRef(void 0);
+  const lastGlobalSkillsCount = useRef(0);
   const loadSkills = useCallback(async () => {
-    if (fileTreeSha === lastLoadedSha.current) {
+    if (fileTreeSha === lastLoadedSha.current && globalSkillsCount === lastGlobalSkillsCount.current) {
       return;
     }
     setIsLoading(true);
     setError(null);
     try {
-      let repoSkills = [];
+      let localSkills = [];
+      let isBrowserMode = false;
       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;
-        }
-        const skillPaths = findSkillFiles(fileTree, true);
+        isBrowserMode = !repoPath.startsWith("/");
+        console.log("[useSkillsData] fileTree:", fileTree);
+        console.log("[useSkillsData] typeof fileTree:", typeof fileTree);
+        console.log("[useSkillsData] fileTree keys:", Object.keys(fileTree));
+        console.log("[useSkillsData] Browser mode:", isBrowserMode);
+        const skillPaths = findSkillFiles(fileTree, isBrowserMode);
+        console.log("[useSkillsData] Found skill paths:", skillPaths);
         const skillPromises = skillPaths.map(async (skillPath) => {
           try {
-            const content2 = await fileSystem.readFile(skillPath);
-            return parseSkillContent(content2, skillPath, fileTree, fileSystem, true);
+            const fullPath = isBrowserMode ? skillPath : `${repoPath}/${skillPath}`;
+            const content2 = await fileSystem.readFile(fullPath);
+            return parseSkillContent(content2, skillPath, fileTree, fileSystem, isBrowserMode);
           } catch (err) {
-            console.error(`[useSkillsBrowseData] Failed to read skill at ${skillPath}:`, err);
+            console.error(`Failed to read skill at ${skillPath}:`, err);
             return null;
           }
         });
-        repoSkills = (await Promise.all(skillPromises)).filter(
+        localSkills = (await Promise.all(skillPromises)).filter(
           (skill) => skill !== null
         );
       }
-      setSkills(repoSkills);
+      console.log("[useSkillsData] Global skills:", globalSkills);
+      const allSkills = [...localSkills, ...globalSkills];
+      console.log("[useSkillsData] Total skills before deduplication:", allSkills.length);
+      const deduplicatedSkills = deduplicateSkills(allSkills, isBrowserMode);
+      console.log("[useSkillsData] Total skills after deduplication:", deduplicatedSkills.length);
+      setSkills(deduplicatedSkills);
       lastLoadedSha.current = fileTreeSha;
+      lastGlobalSkillsCount.current = globalSkillsCount;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to load skills";
       setError(errorMessage);
-      console.error("[useSkillsBrowseData] Error loading skills:", err);
+      console.error("Error loading skills:", err);
     } finally {
       setIsLoading(false);
     }
-  }, [fileTree, fileTreeSha, repoPath, fileSystem]);
+  }, [fileTree, fileTreeSha, globalSkills, globalSkillsCount, repoPath, fileSystem]);
   const refreshSkills = useCallback(async () => {
     lastLoadedSha.current = void 0;
+    lastGlobalSkillsCount.current = -1;
     await loadSkills();
   }, [loadSkills]);
   useEffect(() => {
@@ -4025,404 +3995,6 @@ const useSkillsBrowseData = ({
     refreshSkills
   };
 };
-const SkillsBrowsePanel = ({
-  context,
-  events,
-  supportsRefresh = false
-}) => {
-  var _a, _b;
-  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 });
-  const fileTreeSlice = context.getSlice("fileTree");
-  const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
-  const sourceInfo = (_a = fileTree == null ? void 0 : fileTree.metadata) == null ? void 0 : _a.sourceInfo;
-  const owner = sourceInfo == null ? void 0 : sourceInfo.owner;
-  const repo = sourceInfo == null ? void 0 : sourceInfo.repo;
-  const globalSkillsSlice = context.getSlice("globalSkills");
-  const installedSkillNames = useMemo(() => {
-    var _a2;
-    const globalSkills = ((_a2 = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _a2.skills) || [];
-    return new Set(globalSkills.map((skill) => skill.name));
-  }, [(_b = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _b.skills]);
-  gt("skills-browse", events, () => {
-    var _a2;
-    return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
-  });
-  useEffect(() => {
-    const unsubscribeInstalled = events.on("skill:installed", () => {
-      refreshSkills();
-    });
-    const unsubscribeUninstalled = events.on("skill:uninstalled", () => {
-      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 _a2, _b2;
-        if (skill.name.toLowerCase().includes(query)) return true;
-        if ((_a2 = skill.description) == null ? void 0 : _a2.toLowerCase().includes(query)) return true;
-        if ((_b2 = skill.capabilities) == null ? void 0 : _b2.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: [
-                owner && repo ? /* @__PURE__ */ jsxs(
-                  "a",
-                  {
-                    href: `https://github.com/${owner}/${repo}`,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    style: {
-                      textDecoration: "none",
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "2px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "h2",
-                        {
-                          style: {
-                            margin: 0,
-                            fontSize: theme2.fontSizes[4],
-                            color: theme2.colors.text,
-                            fontFamily: theme2.fonts.monospace,
-                            lineHeight: 1.2
-                          },
-                          onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
-                          onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
-                          children: repo
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            fontSize: theme2.fontSizes[1],
-                            color: theme2.colors.textSecondary,
-                            fontFamily: theme2.fonts.monospace
-                          },
-                          onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
-                          onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
-                          children: owner
-                        }
-                      )
-                    ]
-                  }
-                ) : /* @__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",
-              {
-                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,
-                    isInstalled: installedSkillNames.has(skill.name)
-                  },
-                  skill.id
-                ))
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
-          @keyframes spin {
-            to { transform: rotate(360deg); }
-          }
-        ` })
-      ]
-    }
-  );
-};
 const GlobalSkillsPanel = ({
   context,
   events,
@@ -50633,10 +50205,10 @@ const useAgentsData = ({
   const [agents, setAgents] = useState(EMPTY_AGENTS_ARRAY);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
-  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTreeSlice = context.fileTree;
   const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
   const fileTreeSha = fileTree == null ? void 0 : fileTree.sha;
-  const globalAgentsSlice = context.getSlice("globalAgents");
+  const globalAgentsSlice = context.globalAgents;
   const globalAgents = useMemo(
     () => {
       var _a2;
@@ -50778,10 +50350,10 @@ const useSubagentsData = ({
   const [subagents, setSubagents] = useState(EMPTY_SUBAGENTS_ARRAY);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
-  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTreeSlice = context.fileTree;
   const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
   const fileTreeSha = fileTree == null ? void 0 : fileTree.sha;
-  const globalSubagentsSlice = context.getSlice("globalSubagents");
+  const globalSubagentsSlice = context.globalSubagents;
   const globalSubagents = useMemo(
     () => {
       var _a2;
@@ -50845,887 +50417,6 @@ const useSubagentsData = ({
     refreshSubagents
   };
 };
-const getSourceBadge$1 = (source2) => {
-  switch (source2) {
-    case "project-root":
-      return {
-        label: "Root",
-        icon: /* @__PURE__ */ jsx(FileText, { size: 12 }),
-        color: "#10b981",
-        bgColor: "#10b98120"
-      };
-    case "project-nested":
-      return {
-        label: "Nested",
-        icon: /* @__PURE__ */ jsx(FolderTree, { size: 12 }),
-        color: "#3b82f6",
-        bgColor: "#3b82f620"
-      };
-    case "global-universal":
-      return {
-        label: "Global",
-        icon: /* @__PURE__ */ jsx(Folder, { size: 12 }),
-        color: "#8b5cf6",
-        bgColor: "#8b5cf620"
-      };
-  }
-};
-const AgentCard = ({ agent, onClick, isSelected }) => {
-  var _a;
-  const { theme: theme2 } = useTheme();
-  const sourceBadge = getSourceBadge$1(agent.source);
-  const [pathCopied, setPathCopied] = React2__default.useState(false);
-  const preview = ((_a = agent.content.split("\n").find((line) => line.trim() && !line.startsWith("#"))) == null ? void 0 : _a.substring(0, 150)) || "No description available";
-  const handleCopyPath = async (e) => {
-    e.stopPropagation();
-    try {
-      await navigator.clipboard.writeText(agent.path);
-      setPathCopied(true);
-      setTimeout(() => setPathCopied(false), 2e3);
-    } catch (err) {
-      console.error("Failed to copy path:", err);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      onClick: () => onClick(agent),
-      style: {
-        padding: "16px",
-        background: isSelected ? `${theme2.colors.primary}10` : theme2.colors.backgroundSecondary,
-        border: `1px solid ${isSelected ? theme2.colors.primary : theme2.colors.border}`,
-        borderRadius: theme2.radii[2],
-        cursor: "pointer",
-        transition: "all 0.2s ease",
-        display: "flex",
-        flexDirection: "column",
-        gap: "12px"
-      },
-      onMouseEnter: (e) => {
-        if (!isSelected) {
-          e.currentTarget.style.borderColor = theme2.colors.textSecondary;
-        }
-      },
-      onMouseLeave: (e) => {
-        if (!isSelected) {
-          e.currentTarget.style.borderColor = theme2.colors.border;
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "flex-start",
-              justifyContent: "space-between",
-              gap: "8px"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: theme2.fontSizes[2],
-                    color: theme2.colors.text,
-                    fontWeight: 600,
-                    flex: 1
-                  },
-                  children: agent.name
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    padding: "4px 8px",
-                    fontSize: theme2.fontSizes[0],
-                    color: sourceBadge.color,
-                    background: sourceBadge.bgColor,
-                    border: `1px solid ${sourceBadge.color}40`,
-                    borderRadius: theme2.radii[1],
-                    flexShrink: 0
-                  },
-                  children: [
-                    sourceBadge.icon,
-                    /* @__PURE__ */ jsx("span", { children: sourceBadge.label })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: handleCopyPath,
-            style: {
-              fontSize: theme2.fontSizes[0],
-              color: pathCopied ? theme2.colors.success : theme2.colors.textMuted,
-              fontFamily: theme2.fonts.monospace,
-              background: pathCopied ? `${theme2.colors.success}15` : theme2.colors.background,
-              padding: "4px 8px",
-              borderRadius: theme2.radii[1],
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
-              border: `1px solid ${pathCopied ? theme2.colors.success : "transparent"}`
-            },
-            title: pathCopied ? "Copied!" : `Click to copy: ${agent.path}`,
-            onMouseEnter: (e) => {
-              if (!pathCopied) {
-                e.currentTarget.style.background = theme2.colors.backgroundTertiary || theme2.colors.border;
-              }
-            },
-            onMouseLeave: (e) => {
-              if (!pathCopied) {
-                e.currentTarget.style.background = theme2.colors.background;
-              }
-            },
-            children: pathCopied ? "Copied!" : agent.path
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: theme2.fontSizes[1],
-              color: theme2.colors.textSecondary,
-              lineHeight: 1.5,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              display: "-webkit-box",
-              WebkitLineClamp: 3,
-              WebkitBoxOrient: "vertical"
-            },
-            children: preview
-          }
-        ),
-        agent.sections && Object.keys(agent.sections).length > 0 && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexWrap: "wrap",
-              gap: "6px",
-              marginTop: "4px"
-            },
-            children: Object.keys(agent.sections).map((section) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: theme2.fontSizes[0],
-                  padding: "2px 8px",
-                  background: theme2.colors.background,
-                  border: `1px solid ${theme2.colors.border}`,
-                  borderRadius: theme2.radii[1],
-                  color: theme2.colors.textSecondary,
-                  textTransform: "capitalize"
-                },
-                children: section
-              },
-              section
-            ))
-          }
-        )
-      ]
-    }
-  );
-};
-const getSourceBadge = (source2) => {
-  switch (source2) {
-    case "project-claude":
-      return {
-        label: "Project",
-        icon: /* @__PURE__ */ jsx(Folder, { size: 12 }),
-        color: "#06b6d4",
-        bgColor: "#06b6d420"
-      };
-    case "global-claude":
-      return {
-        label: "Global",
-        icon: /* @__PURE__ */ jsx(Globe, { size: 12 }),
-        color: "#8b5cf6",
-        bgColor: "#8b5cf620"
-      };
-  }
-};
-const getModelColor = (model) => {
-  switch (model) {
-    case "opus":
-      return "#f59e0b";
-    case "sonnet":
-      return "#10b981";
-    case "haiku":
-      return "#3b82f6";
-    case "inherit":
-      return "#6b7280";
-    default:
-      return "#10b981";
-  }
-};
-const SubagentCard = ({ subagent, onClick, isSelected }) => {
-  const { theme: theme2 } = useTheme();
-  const sourceBadge = getSourceBadge(subagent.source);
-  const modelColor = getModelColor(subagent.frontmatter.model);
-  const hasTools = subagent.frontmatter.tools;
-  const toolsArray = hasTools ? hasTools.split(",").map((t) => t.trim()) : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      onClick: () => onClick(subagent),
-      style: {
-        padding: "16px",
-        background: isSelected ? `${theme2.colors.primary}10` : theme2.colors.backgroundSecondary,
-        border: `1px solid ${isSelected ? theme2.colors.primary : theme2.colors.border}`,
-        borderRadius: theme2.radii[2],
-        cursor: "pointer",
-        transition: "all 0.2s ease",
-        display: "flex",
-        flexDirection: "column",
-        gap: "12px"
-      },
-      onMouseEnter: (e) => {
-        if (!isSelected) {
-          e.currentTarget.style.borderColor = theme2.colors.textSecondary;
-        }
-      },
-      onMouseLeave: (e) => {
-        if (!isSelected) {
-          e.currentTarget.style.borderColor = theme2.colors.border;
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "flex-start",
-              justifyContent: "space-between",
-              gap: "8px"
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: 1 }, children: [
-                /* @__PURE__ */ jsx(Bot, { size: 18, color: theme2.colors.primary }),
-                /* @__PURE__ */ jsx(
-                  "h3",
-                  {
-                    style: {
-                      margin: 0,
-                      fontSize: theme2.fontSizes[2],
-                      color: theme2.colors.text,
-                      fontWeight: 600
-                    },
-                    children: subagent.name
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    padding: "4px 8px",
-                    fontSize: theme2.fontSizes[0],
-                    color: sourceBadge.color,
-                    background: sourceBadge.bgColor,
-                    border: `1px solid ${sourceBadge.color}40`,
-                    borderRadius: theme2.radii[1],
-                    flexShrink: 0
-                  },
-                  children: [
-                    sourceBadge.icon,
-                    /* @__PURE__ */ jsx("span", { children: sourceBadge.label })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: theme2.fontSizes[1],
-              color: theme2.colors.textSecondary,
-              lineHeight: 1.5
-            },
-            children: subagent.frontmatter.description
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: theme2.fontSizes[0],
-              color: theme2.colors.textSecondary,
-              fontFamily: theme2.fonts.monospace,
-              wordBreak: "break-all",
-              opacity: 0.7
-            },
-            children: subagent.path
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexWrap: "wrap",
-              gap: "6px",
-              marginTop: "4px"
-            },
-            children: [
-              subagent.frontmatter.model && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    fontSize: theme2.fontSizes[0],
-                    padding: "3px 8px",
-                    background: `${modelColor}20`,
-                    border: `1px solid ${modelColor}40`,
-                    borderRadius: theme2.radii[1],
-                    color: modelColor
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Zap, { size: 11 }),
-                    /* @__PURE__ */ jsx("span", { children: subagent.frontmatter.model })
-                  ]
-                }
-              ),
-              toolsArray && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    fontSize: theme2.fontSizes[0],
-                    padding: "3px 8px",
-                    background: theme2.colors.background,
-                    border: `1px solid ${theme2.colors.border}`,
-                    borderRadius: theme2.radii[1],
-                    color: theme2.colors.textSecondary
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Wrench, { size: 11 }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      toolsArray.length,
-                      " ",
-                      toolsArray.length === 1 ? "tool" : "tools"
-                    ] })
-                  ]
-                }
-              ),
-              subagent.frontmatter.permissionMode && subagent.frontmatter.permissionMode !== "default" && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[0],
-                    padding: "3px 8px",
-                    background: theme2.colors.background,
-                    border: `1px solid ${theme2.colors.border}`,
-                    borderRadius: theme2.radii[1],
-                    color: theme2.colors.textSecondary
-                  },
-                  children: subagent.frontmatter.permissionMode
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-const AgentsListPanel = ({
-  context,
-  events
-}) => {
-  const { theme: theme2 } = useTheme();
-  const panelRef = useRef(null);
-  const [selectedItemId, setSelectedItemId] = useState(null);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [agentFilter, setAgentFilter] = useState("all");
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const {
-    agents,
-    isLoading: agentsLoading,
-    error: agentsError
-  } = useAgentsData({ context });
-  const {
-    subagents,
-    isLoading: subagentsLoading,
-    error: subagentsError
-  } = useSubagentsData({ context });
-  const isLoading = agentsLoading || subagentsLoading;
-  const error = agentsError || subagentsError;
-  gt("agents-list", events, () => {
-    var _a;
-    return (_a = panelRef.current) == null ? void 0 : _a.focus();
-  });
-  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 if (agentFilter === "subagents") {
-      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 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: "agents-list-panel",
-        timestamp: Date.now(),
-        payload: {
-          id: itemId,
-          type: item.type,
-          data: item.data
-        }
-      });
-    }
-  };
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    try {
-      if (events) {
-        events.emit({
-          type: "agents:refresh",
-          source: "agents-list-panel",
-          timestamp: Date.now(),
-          payload: {}
-        });
-      }
-      await new Promise((resolve) => setTimeout(resolve, 600));
-    } finally {
-      setIsRefreshing(false);
-    }
-  };
-  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", 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://agents.md/",
-                        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: "Agents"
-                      }
-                    )
-                  }
-                ),
-                !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: [
-                      filteredItems.length,
-                      " ",
-                      filteredItems.length === 1 ? "item" : "items"
-                    ]
-                  }
-                )
-              ] }),
-              /* @__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 agents...",
-                          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 agents",
-                    children: /* @__PURE__ */ jsx(
-                      RefreshCw,
-                      {
-                        size: 16,
-                        color: theme2.colors.textSecondary,
-                        style: {
-                          animation: isRefreshing ? "spin 1s linear infinite" : "none"
-                        }
-                      }
-                    )
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flexShrink: 0,
-              display: "flex",
-              gap: "8px"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => setAgentFilter("all"),
-                  style: {
-                    padding: "8px 16px",
-                    fontSize: theme2.fontSizes[1],
-                    fontFamily: theme2.fonts.body,
-                    border: `1px solid ${agentFilter === "all" ? theme2.colors.primary : theme2.colors.border}`,
-                    borderRadius: theme2.radii[1],
-                    background: agentFilter === "all" ? `${theme2.colors.primary}15` : theme2.colors.backgroundSecondary,
-                    color: agentFilter === "all" ? theme2.colors.primary : theme2.colors.text,
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "6px",
-                    fontWeight: agentFilter === "all" ? 600 : 400,
-                    transition: "all 0.2s ease"
-                  },
-                  children: [
-                    "All (",
-                    agentsCount + subagentsCount,
-                    ")"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => setAgentFilter("documentation"),
-                  style: {
-                    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",
-                    gap: "6px",
-                    fontWeight: agentFilter === "documentation" ? 600 : 400,
-                    transition: "all 0.2s ease"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(BookOpen, { size: 14 }),
-                    "Docs (",
-                    agentsCount,
-                    ")"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => setAgentFilter("subagents"),
-                  style: {
-                    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",
-                    gap: "6px",
-                    fontWeight: agentFilter === "subagents" ? 600 : 400,
-                    transition: "all 0.2s ease"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Bot, { size: 14 }),
-                    "Subagents (",
-                    subagentsCount,
-                    ")"
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        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 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(250px, 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
-                    );
-                  }
-                })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
-          @keyframes spin {
-            to { transform: rotate(360deg); }
-          }
-        ` })
-      ]
-    }
-  );
-};
 const AgentDetailPanel = ({
   context,
   events
@@ -52213,12 +50904,420 @@ const AgentDetailPanel = ({
   }
   return null;
 };
+const getSourceBadge$1 = (source2) => {
+  switch (source2) {
+    case "project-root":
+      return {
+        label: "Root",
+        icon: /* @__PURE__ */ jsx(FileText, { size: 12 }),
+        color: "#10b981",
+        bgColor: "#10b98120"
+      };
+    case "project-nested":
+      return {
+        label: "Nested",
+        icon: /* @__PURE__ */ jsx(FolderTree, { size: 12 }),
+        color: "#3b82f6",
+        bgColor: "#3b82f620"
+      };
+    case "global-universal":
+      return {
+        label: "Global",
+        icon: /* @__PURE__ */ jsx(Folder, { size: 12 }),
+        color: "#8b5cf6",
+        bgColor: "#8b5cf620"
+      };
+  }
+};
+const AgentCard = ({ agent, onClick, isSelected }) => {
+  var _a;
+  const { theme: theme2 } = useTheme();
+  const sourceBadge = getSourceBadge$1(agent.source);
+  const [pathCopied, setPathCopied] = React2__default.useState(false);
+  const preview = ((_a = agent.content.split("\n").find((line) => line.trim() && !line.startsWith("#"))) == null ? void 0 : _a.substring(0, 150)) || "No description available";
+  const handleCopyPath = async (e) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(agent.path);
+      setPathCopied(true);
+      setTimeout(() => setPathCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy path:", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => onClick(agent),
+      style: {
+        padding: "16px",
+        background: isSelected ? `${theme2.colors.primary}10` : theme2.colors.backgroundSecondary,
+        border: `1px solid ${isSelected ? theme2.colors.primary : theme2.colors.border}`,
+        borderRadius: theme2.radii[2],
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px"
+      },
+      onMouseEnter: (e) => {
+        if (!isSelected) {
+          e.currentTarget.style.borderColor = theme2.colors.textSecondary;
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!isSelected) {
+          e.currentTarget.style.borderColor = theme2.colors.border;
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: theme2.fontSizes[2],
+                    color: theme2.colors.text,
+                    fontWeight: 600,
+                    flex: 1
+                  },
+                  children: agent.name
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "4px 8px",
+                    fontSize: theme2.fontSizes[0],
+                    color: sourceBadge.color,
+                    background: sourceBadge.bgColor,
+                    border: `1px solid ${sourceBadge.color}40`,
+                    borderRadius: theme2.radii[1],
+                    flexShrink: 0
+                  },
+                  children: [
+                    sourceBadge.icon,
+                    /* @__PURE__ */ jsx("span", { children: sourceBadge.label })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: handleCopyPath,
+            style: {
+              fontSize: theme2.fontSizes[0],
+              color: pathCopied ? theme2.colors.success : theme2.colors.textMuted,
+              fontFamily: theme2.fonts.monospace,
+              background: pathCopied ? `${theme2.colors.success}15` : theme2.colors.background,
+              padding: "4px 8px",
+              borderRadius: theme2.radii[1],
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              border: `1px solid ${pathCopied ? theme2.colors.success : "transparent"}`
+            },
+            title: pathCopied ? "Copied!" : `Click to copy: ${agent.path}`,
+            onMouseEnter: (e) => {
+              if (!pathCopied) {
+                e.currentTarget.style.background = theme2.colors.backgroundTertiary || theme2.colors.border;
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!pathCopied) {
+                e.currentTarget.style.background = theme2.colors.background;
+              }
+            },
+            children: pathCopied ? "Copied!" : agent.path
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme2.fontSizes[1],
+              color: theme2.colors.textSecondary,
+              lineHeight: 1.5,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              display: "-webkit-box",
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: "vertical"
+            },
+            children: preview
+          }
+        ),
+        agent.sections && Object.keys(agent.sections).length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "6px",
+              marginTop: "4px"
+            },
+            children: Object.keys(agent.sections).map((section) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: theme2.fontSizes[0],
+                  padding: "2px 8px",
+                  background: theme2.colors.background,
+                  border: `1px solid ${theme2.colors.border}`,
+                  borderRadius: theme2.radii[1],
+                  color: theme2.colors.textSecondary,
+                  textTransform: "capitalize"
+                },
+                children: section
+              },
+              section
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+const getSourceBadge = (source2) => {
+  switch (source2) {
+    case "project-claude":
+      return {
+        label: "Project",
+        icon: /* @__PURE__ */ jsx(Folder, { size: 12 }),
+        color: "#06b6d4",
+        bgColor: "#06b6d420"
+      };
+    case "global-claude":
+      return {
+        label: "Global",
+        icon: /* @__PURE__ */ jsx(Globe, { size: 12 }),
+        color: "#8b5cf6",
+        bgColor: "#8b5cf620"
+      };
+  }
+};
+const getModelColor = (model) => {
+  switch (model) {
+    case "opus":
+      return "#f59e0b";
+    case "sonnet":
+      return "#10b981";
+    case "haiku":
+      return "#3b82f6";
+    case "inherit":
+      return "#6b7280";
+    default:
+      return "#10b981";
+  }
+};
+const SubagentCard = ({ subagent, onClick, isSelected }) => {
+  const { theme: theme2 } = useTheme();
+  const sourceBadge = getSourceBadge(subagent.source);
+  const modelColor = getModelColor(subagent.frontmatter.model);
+  const hasTools = subagent.frontmatter.tools;
+  const toolsArray = hasTools ? hasTools.split(",").map((t) => t.trim()) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => onClick(subagent),
+      style: {
+        padding: "16px",
+        background: isSelected ? `${theme2.colors.primary}10` : theme2.colors.backgroundSecondary,
+        border: `1px solid ${isSelected ? theme2.colors.primary : theme2.colors.border}`,
+        borderRadius: theme2.radii[2],
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px"
+      },
+      onMouseEnter: (e) => {
+        if (!isSelected) {
+          e.currentTarget.style.borderColor = theme2.colors.textSecondary;
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!isSelected) {
+          e.currentTarget.style.borderColor = theme2.colors.border;
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: 1 }, children: [
+                /* @__PURE__ */ jsx(Bot, { size: 18, color: theme2.colors.primary }),
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: theme2.fontSizes[2],
+                      color: theme2.colors.text,
+                      fontWeight: 600
+                    },
+                    children: subagent.name
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "4px 8px",
+                    fontSize: theme2.fontSizes[0],
+                    color: sourceBadge.color,
+                    background: sourceBadge.bgColor,
+                    border: `1px solid ${sourceBadge.color}40`,
+                    borderRadius: theme2.radii[1],
+                    flexShrink: 0
+                  },
+                  children: [
+                    sourceBadge.icon,
+                    /* @__PURE__ */ jsx("span", { children: sourceBadge.label })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme2.fontSizes[1],
+              color: theme2.colors.textSecondary,
+              lineHeight: 1.5
+            },
+            children: subagent.frontmatter.description
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary,
+              fontFamily: theme2.fonts.monospace,
+              wordBreak: "break-all",
+              opacity: 0.7
+            },
+            children: subagent.path
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "6px",
+              marginTop: "4px"
+            },
+            children: [
+              subagent.frontmatter.model && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    fontSize: theme2.fontSizes[0],
+                    padding: "3px 8px",
+                    background: `${modelColor}20`,
+                    border: `1px solid ${modelColor}40`,
+                    borderRadius: theme2.radii[1],
+                    color: modelColor
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Zap, { size: 11 }),
+                    /* @__PURE__ */ jsx("span", { children: subagent.frontmatter.model })
+                  ]
+                }
+              ),
+              toolsArray && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    fontSize: theme2.fontSizes[0],
+                    padding: "3px 8px",
+                    background: theme2.colors.background,
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    color: theme2.colors.textSecondary
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Wrench, { size: 11 }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      toolsArray.length,
+                      " ",
+                      toolsArray.length === 1 ? "tool" : "tools"
+                    ] })
+                  ]
+                }
+              ),
+              subagent.frontmatter.permissionMode && subagent.frontmatter.permissionMode !== "default" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[0],
+                    padding: "3px 8px",
+                    background: theme2.colors.background,
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    color: theme2.colors.textSecondary
+                  },
+                  children: subagent.frontmatter.permissionMode
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 const AgenticResourcesPanel = ({
   context,
   events
 }) => {
+  var _a;
   const { theme: theme2 } = useTheme();
   const panelRef = useRef(null);
+  const hasLoadedAgentsRef = useRef(false);
+  const hasLoadedSkillsRef = useRef(false);
   const [mode, setMode] = useState("agents");
   const [selectedItemId, setSelectedItemId] = useState(null);
   const [searchQuery, setSearchQuery] = useState("");
@@ -52241,11 +51340,19 @@ const AgenticResourcesPanel = ({
     error: skillsError,
     refreshSkills
   } = useSkillsData({ context });
-  const isLoading = mode === "agents" ? agentsLoading || subagentsLoading : skillsLoading;
+  if (!agentsLoading && !subagentsLoading && !hasLoadedAgentsRef.current) {
+    hasLoadedAgentsRef.current = true;
+  }
+  if (!skillsLoading && !hasLoadedSkillsRef.current) {
+    hasLoadedSkillsRef.current = true;
+  }
+  const showAgentsLoading = (agentsLoading || subagentsLoading) && !hasLoadedAgentsRef.current;
+  const showSkillsLoading = skillsLoading && !hasLoadedSkillsRef.current;
+  const isLoading = mode === "agents" ? showAgentsLoading : showSkillsLoading;
   const error = mode === "agents" ? agentsError || subagentsError : skillsError;
   gt("agentic-resources", events, () => {
-    var _a;
-    return (_a = panelRef.current) == null ? void 0 : _a.focus();
+    var _a2;
+    return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
   });
   useEffect(() => {
     if (mode !== "skills") return;
@@ -52299,9 +51406,9 @@ const AgenticResourcesPanel = ({
     return filtered;
   }, [allItems, searchQuery, agentFilter]);
   const hasRepository = useMemo(() => {
-    const fileTreeSlice = context.getSlice("fileTree");
-    return !!(fileTreeSlice == null ? void 0 : fileTreeSlice.data);
-  }, [context]);
+    var _a2;
+    return !!((_a2 = context.fileTree) == null ? void 0 : _a2.data);
+  }, [(_a = context.fileTree) == null ? void 0 : _a.data]);
   const filteredSkills = useMemo(() => {
     let filtered = skills;
     if (skillFilter === "project") {
@@ -52326,9 +51433,9 @@ const AgenticResourcesPanel = ({
     if (searchQuery.trim()) {
       const query = searchQuery.toLowerCase().trim();
       filtered = filtered.filter((skill) => {
-        var _a, _b;
+        var _a2, _b;
         if (skill.name.toLowerCase().includes(query)) return true;
-        if ((_a = skill.description) == null ? void 0 : _a.toLowerCase().includes(query)) return true;
+        if ((_a2 = skill.description) == null ? void 0 : _a2.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;
@@ -52870,31 +51977,6 @@ const AgenticResourcesPanel = ({
   );
 };
 const panels = [
-  {
-    metadata: {
-      id: "industry-theme.skills-list",
-      name: "Skills List",
-      icon: "⚡",
-      version: "0.1.0",
-      author: "Principal ADE",
-      description: "Display and manage Agent Skills from SKILL.md files",
-      slices: ["fileTree", "globalSkills"]
-      // Data slices this panel depends on
-    },
-    component: SkillsListPanel,
-    // Optional: Called when this specific panel is mounted
-    onMount: async (context) => {
-      var _a;
-      console.log(
-        "Skills List 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 List Panel unmounting");
-    }
-  },
   {
     metadata: {
       id: "industry-theme.skills-browse",
@@ -52970,31 +52052,6 @@ const panels = [
       console.log("Skill Detail Panel unmounting");
     }
   },
-  {
-    metadata: {
-      id: "industry-theme.agents-list",
-      name: "Agents List",
-      icon: "🤖",
-      version: "0.1.0",
-      author: "Principal ADE",
-      description: "Display AGENTS.md documentation and Claude Code subagents",
-      slices: ["fileTree", "globalAgents", "globalSubagents"]
-      // Data slices this panel depends on
-    },
-    component: AgentsListPanel,
-    // Optional: Called when this specific panel is mounted
-    onMount: async (context) => {
-      var _a;
-      console.log(
-        "Agents List Panel mounted",
-        (_a = context.currentScope.repository) == null ? void 0 : _a.path
-      );
-    },
-    // Optional: Called when this specific panel is unmounted
-    onUnmount: async (_context) => {
-      console.log("Agents List Panel unmounting");
-    }
-  },
   {
     metadata: {
       id: "industry-theme.agent-detail",