@industry-theme/agent-panels 0.1.8 → 0.2.0

package/dist/panels.bundle.js

@@ -2201,7 +2201,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$o = [
   ["path", { d: "M12 7v14", key: "1akyts" }],
   [
     "path",
@@ -2211,72 +2211,99 @@ const __iconNode$j = [
     }
   ]
 ];
-const BookOpen = createLucideIcon("book-open", __iconNode$j);
+const BookOpen = createLucideIcon("book-open", __iconNode$o);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$i);
+const __iconNode$n = [
+  ["path", { d: "M12 8V4H8", key: "hb8ula" }],
+  ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
+  ["path", { d: "M2 14h2", key: "vft8re" }],
+  ["path", { d: "M20 14h2", key: "4cs60a" }],
+  ["path", { d: "M15 13v2", key: "1xurst" }],
+  ["path", { d: "M9 13v2", key: "rq6x2g" }]
+];
+const Bot = createLucideIcon("bot", __iconNode$n);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$h);
+const __iconNode$m = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$m);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
+const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$k = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$k);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$j = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$f);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$j);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$i = [
+  ["path", { d: "m18 16 4-4-4-4", key: "1inbqp" }],
+  ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
+  ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
+];
+const CodeXml = createLucideIcon("code-xml", __iconNode$i);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$h = [
   ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
   ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
 ];
-const Code = createLucideIcon("code", __iconNode$e);
+const Code = createLucideIcon("code", __iconNode$h);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$g = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$d);
+const Copy = createLucideIcon("copy", __iconNode$g);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$f = [
   ["path", { d: "m15 15 6 6", key: "1s409w" }],
   ["path", { d: "m15 9 6-6", key: "ko1vev" }],
   ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
@@ -2286,14 +2313,14 @@ const __iconNode$c = [
   ["path", { d: "M3 8V3h5", key: "1ln10m" }],
   ["path", { d: "M9 9 3 3", key: "v551iv" }]
 ];
-const Expand = createLucideIcon("expand", __iconNode$c);
+const Expand = createLucideIcon("expand", __iconNode$f);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -2305,14 +2332,14 @@ const __iconNode$b = [
   ["path", { d: "M10 12.5 8 15l2 2.5", key: "1tg20x" }],
   ["path", { d: "m14 12.5 2 2.5-2 2.5", key: "yinavb" }]
 ];
-const FileCode = createLucideIcon("file-code", __iconNode$b);
+const FileCode = createLucideIcon("file-code", __iconNode$e);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -2325,14 +2352,39 @@ const __iconNode$a = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$a);
+const FileText = createLucideIcon("file-text", __iconNode$d);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$c = [
+  [
+    "path",
+    {
+      d: "M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z",
+      key: "hod4my"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z",
+      key: "w4yl2u"
+    }
+  ],
+  ["path", { d: "M3 5a2 2 0 0 0 2 2h3", key: "f2jnh7" }],
+  ["path", { d: "M3 3v13a2 2 0 0 0 2 2h3", key: "k8epm1" }]
+];
+const FolderTree = createLucideIcon("folder-tree", __iconNode$c);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$b = [
   [
     "path",
     {
@@ -2341,14 +2393,14 @@ const __iconNode$9 = [
     }
   ]
 ];
-const Folder = createLucideIcon("folder", __iconNode$9);
+const Folder = createLucideIcon("folder", __iconNode$b);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [
+const __iconNode$a = [
   [
     "path",
     {
@@ -2358,49 +2410,49 @@ const __iconNode$8 = [
   ],
   ["path", { d: "M9 18c-4.51 2-5-2-7-2", key: "9comsn" }]
 ];
-const Github = createLucideIcon("github", __iconNode$8);
+const Github = createLucideIcon("github", __iconNode$a);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$9 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
   ["path", { d: "M2 12h20", key: "9i4pu4" }]
 ];
-const Globe = createLucideIcon("globe", __iconNode$7);
+const Globe = createLucideIcon("globe", __iconNode$9);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$8 = [
   ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
   ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ];
-const Monitor = createLucideIcon("monitor", __iconNode$6);
+const Monitor = createLucideIcon("monitor", __iconNode$8);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$7 = [
   ["path", { d: "M18 8L22 12L18 16", key: "1r0oui" }],
   ["path", { d: "M2 12H22", key: "1m8cig" }]
 ];
-const MoveRight = createLucideIcon("move-right", __iconNode$5);
+const MoveRight = createLucideIcon("move-right", __iconNode$7);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$6 = [
   [
     "path",
     {
@@ -2412,14 +2464,14 @@ const __iconNode$4 = [
   ["polyline", { points: "3.29 7 12 12 20.71 7", key: "ousv84" }],
   ["path", { d: "m7.5 4.27 9 5.15", key: "1c824w" }]
 ];
-const Package = createLucideIcon("package", __iconNode$4);
+const Package = createLucideIcon("package", __iconNode$6);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$3 = [
+const __iconNode$5 = [
   [
     "path",
     {
@@ -2428,42 +2480,74 @@ const __iconNode$3 = [
     }
   ]
 ];
-const Play = createLucideIcon("play", __iconNode$3);
+const Play = createLucideIcon("play", __iconNode$5);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$2 = [
+const __iconNode$4 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$2);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$4);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1 = [
+const __iconNode$3 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$1);
+const Search = createLucideIcon("search", __iconNode$3);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode = [
+const __iconNode$2 = [
+  [
+    "path",
+    {
+      d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
+      key: "1ngwbx"
+    }
+  ]
+];
+const Wrench = createLucideIcon("wrench", __iconNode$2);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-const X = createLucideIcon("x", __iconNode);
+const X = createLucideIcon("x", __iconNode$1);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  [
+    "path",
+    {
+      d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+      key: "1xq2db"
+    }
+  ]
+];
+const Zap = createLucideIcon("zap", __iconNode);
 const determineSkillSource = (path2) => {
   if (path2.includes(".agent/skills/")) {
     return { source: "project-universal", priority: 1 };
@@ -2474,11 +2558,31 @@ const determineSkillSource = (path2) => {
   }
 };
 const findSkillFiles = (fileTree) => {
-  const skillFiles = fileTree.allFiles.filter((file) => file.name === "SKILL.md");
+  const skillFiles = fileTree.allFiles.filter((file) => {
+    const path2 = file.relativePath;
+    const isMarkdown = file.name.endsWith(".md");
+    const isInSkillDir = path2.includes(".agent/skills/") || path2.includes(".claude/skills/");
+    const isMetadata = file.name === ".metadata.json" || file.name.startsWith(".");
+    return isMarkdown && isInSkillDir && !isMetadata;
+  });
   return skillFiles.map((file) => file.relativePath);
 };
 const analyzeSkillStructure = (fileTree, skillPath) => {
   const skillDir = skillPath.substring(0, skillPath.lastIndexOf("/"));
+  const pathParts = skillPath.split("/");
+  const parentDir = pathParts[pathParts.length - 2];
+  const isStandaloneFile = parentDir === "skills";
+  if (isStandaloneFile) {
+    return {
+      skillFolderPath: skillDir,
+      hasScripts: false,
+      hasReferences: false,
+      hasAssets: false,
+      scriptFiles: [],
+      referenceFiles: [],
+      assetFiles: []
+    };
+  }
   const skillFiles = fileTree.allFiles.filter(
     (file) => file.relativePath.startsWith(`${skillDir}/`)
   );
@@ -2497,7 +2601,10 @@ const analyzeSkillStructure = (fileTree, skillPath) => {
 };
 const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter) => {
   const pathParts = path2.split("/");
-  const skillDirName = pathParts[pathParts.length - 2] || "Unknown Skill";
+  const fileName = pathParts[pathParts.length - 1];
+  const parentDir = pathParts[pathParts.length - 2];
+  const isDirectlyInSkillsDir = parentDir === "skills";
+  const skillDirName = isDirectlyInSkillsDir ? fileName.replace(/\.md$/, "") : parentDir;
   let description = "";
   const lines = content2.split("\n");
   let foundHeading = false;
@@ -2548,36 +2655,24 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter) =
 const useSkillsData = ({
   context
 }) => {
+  var _a, _b, _c;
   const [skills, setSkills] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
+  const fileTreeSha = fileTree == null ? void 0 : fileTree.sha;
+  const globalSkillsSlice = context.getSlice("globalSkills");
+  const globalSkills = ((_a = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _a.skills) || [];
+  const repoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
+  const fileSystem = (_c = context.adapters) == null ? void 0 : _c.fileSystem;
   const loadSkills = useCallback(async () => {
-    var _a, _b, _c;
     setIsLoading(true);
     setError(null);
     try {
-      const fileTreeSlice = context.getSlice("fileTree");
-      const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
       let localSkills = [];
-      if (fileTree) {
-        console.log("[useSkillsData] Full context:", context);
-        const fileSystem = (_a = context.adapters) == null ? void 0 : _a.fileSystem;
-        console.log("[useSkillsData] Adapters:", context.adapters);
-        console.log("[useSkillsData] FileSystem adapter:", fileSystem);
-        console.log("[useSkillsData] fileSystem?.readFile:", fileSystem == null ? void 0 : fileSystem.readFile);
-        console.log("[useSkillsData] typeof fileSystem?.readFile:", typeof (fileSystem == null ? void 0 : fileSystem.readFile));
-        console.log("[useSkillsData] Check result (!fileSystem?.readFile):", !(fileSystem == null ? void 0 : fileSystem.readFile));
-        if (!(fileSystem == null ? void 0 : fileSystem.readFile)) {
-          console.error("[useSkillsData] FAILING CHECK - fileSystem:", fileSystem);
-          throw new Error("File system adapter not available");
-        }
-        console.log("[useSkillsData] Check passed! Continuing...");
-        const repoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
-        if (!repoPath) {
-          throw new Error("Repository path not available");
-        }
+      if (fileTree && (fileSystem == null ? void 0 : fileSystem.readFile) && repoPath) {
         console.log("[useSkillsData] fileTree:", fileTree);
-        console.log("[useSkillsData] fileTree.allFiles:", fileTree.allFiles);
         console.log("[useSkillsData] typeof fileTree:", typeof fileTree);
         console.log("[useSkillsData] fileTree keys:", Object.keys(fileTree));
         const skillPaths = findSkillFiles(fileTree);
@@ -2596,8 +2691,6 @@ const useSkillsData = ({
           (skill) => skill !== null
         );
       }
-      const globalSkillsSlice = context.getSlice("globalSkills");
-      const globalSkills = ((_c = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _c.skills) || [];
       console.log("[useSkillsData] Global skills:", globalSkills);
       const allSkills = [...localSkills, ...globalSkills];
       console.log("[useSkillsData] Total skills:", allSkills.length);
@@ -2609,7 +2702,7 @@ const useSkillsData = ({
     } finally {
       setIsLoading(false);
     }
-  }, [context]);
+  }, [fileTree, fileTreeSha, globalSkills, repoPath, fileSystem]);
   const refreshSkills = useCallback(async () => {
     await loadSkills();
   }, [loadSkills]);
@@ -47987,55 +48080,1679 @@ const SkillDetailPanel = ({
     }
   );
 };
-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");
+const determineAgentSource = (path2) => {
+  if (path2 === "AGENTS.md") {
+    return { source: "project-root", priority: 1 };
+  }
+  return { source: "project-nested", priority: 2 };
+};
+const findAgentFiles = (fileTree) => {
+  const agentFiles = fileTree.allFiles.filter((file) => {
+    const fileName = file.name.toUpperCase();
+    return fileName === "AGENTS.MD";
+  });
+  return agentFiles.map((file) => file.relativePath);
+};
+const extractSections = (content2) => {
+  const sections = {};
+  const lines = content2.split("\n");
+  let currentSection = null;
+  let currentContent = [];
+  const sectionPatterns = {
+    setup: /^#+ (setup|installation|getting started)/i,
+    build: /^#+ (build|building|compilation)/i,
+    test: /^#+ (test|testing|tests|qa)/i,
+    style: /^#+ (style|code style|conventions|guidelines)/i
+  };
+  for (const line of lines) {
+    let matchedSection = null;
+    for (const [key, pattern] of Object.entries(sectionPatterns)) {
+      if (pattern.test(line)) {
+        matchedSection = key;
+        break;
+      }
     }
-  },
-  {
-    metadata: {
-      id: "industry-theme.skill-detail",
-      name: "Skill Detail",
-      icon: "📋",
-      version: "0.1.0",
-      author: "Principal ADE",
-      description: "Display detailed information about a selected Agent Skill",
-      slices: ["fileTree", "globalSkills"]
-      // Data slices this panel depends on
-    },
-    component: SkillDetailPanel,
-    // Optional: Called when this specific panel is mounted
-    onMount: async (context) => {
-      var _a;
-      console.log(
-        "Skill Detail Panel mounted",
-        (_a = context.currentScope.repository) == null ? void 0 : _a.path
-      );
-    },
-    // Optional: Called when this specific panel is unmounted
-    onUnmount: async (_context) => {
-      console.log("Skill Detail Panel unmounting");
+    if (matchedSection) {
+      if (currentSection && currentContent.length > 0) {
+        sections[currentSection] = currentContent.join("\n").trim().substring(0, 200);
+      }
+      currentSection = matchedSection;
+      currentContent = [];
+    } else if (currentSection && line.trim()) {
+      currentContent.push(line);
+    }
+  }
+  if (currentSection && currentContent.length > 0) {
+    sections[currentSection] = currentContent.join("\n").trim().substring(0, 200);
+  }
+  return sections;
+};
+const parseAgentContent = (content2, path2) => {
+  const pathParts = path2.split("/");
+  const isRoot = path2 === "AGENTS.md";
+  const name2 = isRoot ? "Project Agents" : pathParts[pathParts.length - 2] || "Agents";
+  const { source: source2, priority } = determineAgentSource(path2);
+  const sections = extractSections(content2);
+  return {
+    id: path2,
+    name: name2,
+    path: path2,
+    content: content2,
+    source: source2,
+    priority,
+    sections
+  };
+};
+const useAgentsData = ({
+  context
+}) => {
+  var _a, _b, _c;
+  const [agents, setAgents] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
+  const fileTreeSha = fileTree == null ? void 0 : fileTree.sha;
+  const globalAgentsSlice = context.getSlice("globalAgents");
+  const globalAgents = ((_a = globalAgentsSlice == null ? void 0 : globalAgentsSlice.data) == null ? void 0 : _a.agents) || [];
+  const repoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
+  const fileSystem = (_c = context.adapters) == null ? void 0 : _c.fileSystem;
+  const loadAgents = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      let localAgents = [];
+      if (fileTree && (fileSystem == null ? void 0 : fileSystem.readFile) && repoPath) {
+        console.log("[useAgentsData] Searching for AGENTS.md files in fileTree");
+        const agentPaths = findAgentFiles(fileTree);
+        console.log("[useAgentsData] Found agent paths:", agentPaths);
+        const agentPromises = agentPaths.map(async (agentPath) => {
+          try {
+            const fullPath = `${repoPath}/${agentPath}`;
+            const content2 = await fileSystem.readFile(fullPath);
+            return parseAgentContent(content2, agentPath);
+          } catch (err) {
+            console.error(`Failed to read agent at ${agentPath}:`, err);
+            return null;
+          }
+        });
+        localAgents = (await Promise.all(agentPromises)).filter(
+          (agent) => agent !== null
+        );
+      }
+      console.log("[useAgentsData] Global agents:", globalAgents);
+      const allAgents = [...localAgents, ...globalAgents];
+      console.log("[useAgentsData] Total agents:", allAgents.length);
+      setAgents(allAgents);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to load agents";
+      setError(errorMessage);
+      console.error("Error loading agents:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fileTree, fileTreeSha, globalAgents, repoPath, fileSystem]);
+  const refreshAgents = useCallback(async () => {
+    await loadAgents();
+  }, [loadAgents]);
+  useEffect(() => {
+    loadAgents();
+  }, [loadAgents]);
+  return {
+    agents,
+    isLoading,
+    error,
+    refreshAgents
+  };
+};
+const determineSubagentSource = (path2) => {
+  if (path2.includes(".claude/agents/")) {
+    return { source: "project-claude", priority: 1 };
+  }
+  return { source: "global-claude", priority: 2 };
+};
+const findSubagentFiles = (fileTree) => {
+  const subagentFiles = fileTree.allFiles.filter((file) => {
+    const path2 = file.relativePath;
+    const isMarkdown = file.name.endsWith(".md");
+    const isInAgentsDir = path2.startsWith(".claude/agents/");
+    return isMarkdown && isInAgentsDir;
+  });
+  return subagentFiles.map((file) => file.relativePath);
+};
+const parseFrontmatter = (content2) => {
+  if (!content2.trim().startsWith("---")) {
+    throw new Error("No frontmatter found - subagent must have YAML frontmatter");
+  }
+  const lines = content2.split("\n");
+  let frontmatterEnd = -1;
+  for (let i = 1; i < lines.length; i++) {
+    if (lines[i].trim() === "---") {
+      frontmatterEnd = i;
+      break;
+    }
+  }
+  if (frontmatterEnd === -1) {
+    throw new Error("Malformed frontmatter - missing closing ---");
+  }
+  const frontmatterLines = lines.slice(1, frontmatterEnd);
+  const body = lines.slice(frontmatterEnd + 1).join("\n").trim();
+  const frontmatter = {};
+  for (const line of frontmatterLines) {
+    const trimmedLine = line.trim();
+    if (!trimmedLine || trimmedLine.startsWith("#")) continue;
+    const colonIndex = trimmedLine.indexOf(":");
+    if (colonIndex === -1) continue;
+    const key = trimmedLine.substring(0, colonIndex).trim();
+    const value = trimmedLine.substring(colonIndex + 1).trim();
+    const cleanValue = value.replace(/^["']|["']$/g, "");
+    frontmatter[key] = cleanValue;
+  }
+  if (!frontmatter.name || !frontmatter.description) {
+    throw new Error('Subagent frontmatter must have "name" and "description" fields');
+  }
+  return {
+    frontmatter,
+    body
+  };
+};
+const parseSubagentContent = (content2, path2) => {
+  try {
+    const { frontmatter, body } = parseFrontmatter(content2);
+    const { source: source2, priority } = determineSubagentSource(path2);
+    return {
+      id: path2,
+      name: frontmatter.name,
+      path: path2,
+      content: content2,
+      prompt: body,
+      frontmatter,
+      source: source2,
+      priority
+    };
+  } catch (err) {
+    console.error(`Failed to parse subagent at ${path2}:`, err);
+    throw err;
+  }
+};
+const useSubagentsData = ({
+  context
+}) => {
+  var _a, _b, _c;
+  const [subagents, setSubagents] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
+  const fileTreeSha = fileTree == null ? void 0 : fileTree.sha;
+  const globalSubagentsSlice = context.getSlice("globalSubagents");
+  const globalSubagents = ((_a = globalSubagentsSlice == null ? void 0 : globalSubagentsSlice.data) == null ? void 0 : _a.subagents) || [];
+  const repoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
+  const fileSystem = (_c = context.adapters) == null ? void 0 : _c.fileSystem;
+  const loadSubagents = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      let localSubagents = [];
+      if (fileTree && (fileSystem == null ? void 0 : fileSystem.readFile) && repoPath) {
+        console.log("[useSubagentsData] Searching for subagent files in .claude/agents/");
+        const subagentPaths = findSubagentFiles(fileTree);
+        console.log("[useSubagentsData] Found subagent paths:", subagentPaths);
+        const subagentPromises = subagentPaths.map(async (subagentPath) => {
+          try {
+            const fullPath = `${repoPath}/${subagentPath}`;
+            const content2 = await fileSystem.readFile(fullPath);
+            return parseSubagentContent(content2, subagentPath);
+          } catch (err) {
+            console.error(`Failed to read subagent at ${subagentPath}:`, err);
+            return null;
+          }
+        });
+        localSubagents = (await Promise.all(subagentPromises)).filter(
+          (subagent) => subagent !== null
+        );
+      }
+      console.log("[useSubagentsData] Global subagents:", globalSubagents);
+      const allSubagents = [...localSubagents, ...globalSubagents];
+      console.log("[useSubagentsData] Total subagents:", allSubagents.length);
+      setSubagents(allSubagents);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to load subagents";
+      setError(errorMessage);
+      console.error("Error loading subagents:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fileTree, fileTreeSha, globalSubagents, repoPath, fileSystem]);
+  const refreshSubagents = useCallback(async () => {
+    await loadSubagents();
+  }, [loadSubagents]);
+  useEffect(() => {
+    loadSubagents();
+  }, [loadSubagents]);
+  return {
+    subagents,
+    isLoading,
+    error,
+    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 preview = ((_a = agent.content.split("\n").find((line) => line.trim() && !line.startsWith("#"))) == null ? void 0 : _a.substring(0, 150)) || "No description available";
+  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;
+          e.currentTarget.style.transform = "translateY(-2px)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!isSelected) {
+          e.currentTarget.style.borderColor = theme2.colors.border;
+          e.currentTarget.style.transform = "translateY(0)";
+        }
+      },
+      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",
+          {
+            style: {
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary,
+              fontFamily: theme2.fonts.monospace,
+              wordBreak: "break-all"
+            },
+            children: 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;
+          e.currentTarget.style.transform = "translateY(-2px)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!isSelected) {
+          e.currentTarget.style.borderColor = theme2.colors.border;
+          e.currentTarget.style.transform = "translateY(0)";
+        }
+      },
+      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,
+    refreshAgents
+  } = useAgentsData({ context });
+  const {
+    subagents,
+    isLoading: subagentsLoading,
+    error: subagentsError,
+    refreshSubagents
+  } = 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 {
+      await Promise.all([refreshAgents(), refreshSubagents()]);
+    } 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(300px, 1fr))",
+                  gap: "16px",
+                  padding: "4px"
+                },
+                children: filteredItems.map((item) => {
+                  if (item.type === "agent") {
+                    return /* @__PURE__ */ jsx(
+                      AgentCard,
+                      {
+                        agent: item.data,
+                        onClick: () => handleItemClick(item),
+                        isSelected: selectedItemId === item.data.id
+                      },
+                      item.data.id
+                    );
+                  } else {
+                    return /* @__PURE__ */ jsx(
+                      SubagentCard,
+                      {
+                        subagent: item.data,
+                        onClick: () => handleItemClick(item),
+                        isSelected: selectedItemId === item.data.id
+                      },
+                      item.data.id
+                    );
+                  }
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+};
+const AgentDetailPanel = ({
+  context,
+  events,
+  actions
+}) => {
+  const { theme: theme2 } = useTheme();
+  const { isLoading: agentsLoading, error: agentsError } = useAgentsData({ context });
+  const { isLoading: subagentsLoading, error: subagentsError } = useSubagentsData({ context });
+  const [selectedItem, setSelectedItem] = useState(null);
+  const panelRef = useRef(null);
+  const isLoading = agentsLoading || subagentsLoading;
+  const error = agentsError || subagentsError;
+  gt("agent-detail", events, () => {
+    var _a;
+    return (_a = panelRef.current) == null ? void 0 : _a.focus();
+  });
+  useEffect(() => {
+    const unsubscribeAgent = events.on("agent:selected", (event) => {
+      const payload = event.payload;
+      if ((payload == null ? void 0 : payload.id) && (payload == null ? void 0 : payload.data)) {
+        setSelectedItem({ type: "agent", data: payload.data });
+      }
+    });
+    const unsubscribeSubagent = events.on("subagent:selected", (event) => {
+      const payload = event.payload;
+      if ((payload == null ? void 0 : payload.id) && (payload == null ? void 0 : payload.data)) {
+        setSelectedItem({ type: "subagent", data: payload.data });
+      }
+    });
+    return () => {
+      unsubscribeAgent();
+      unsubscribeSubagent();
+    };
+  }, [events]);
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          padding: "2rem",
+          backgroundColor: theme2.colors.background,
+          color: theme2.colors.error,
+          fontFamily: theme2.fonts.body
+        },
+        children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+          "Error loading agents: ",
+          error
+        ] })
+      }
+    );
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          backgroundColor: theme2.colors.background,
+          color: theme2.colors.text,
+          fontFamily: theme2.fonts.body
+        },
+        children: "Loading agents..."
+      }
+    );
+  }
+  if (!selectedItem) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          gap: "1rem",
+          backgroundColor: theme2.colors.background,
+          color: theme2.colors.textSecondary,
+          fontFamily: theme2.fonts.body,
+          padding: "2rem"
+        },
+        children: [
+          /* @__PURE__ */ jsx(BookOpen, { size: 48, color: theme2.colors.border }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, textAlign: "center" }, children: "Select an agent or subagent from the list to view details" })
+        ]
+      }
+    );
+  }
+  if (selectedItem.type === "agent") {
+    const agent = selectedItem.data;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        tabIndex: -1,
+        style: {
+          height: "100%",
+          overflow: "auto",
+          backgroundColor: theme2.colors.background,
+          padding: "clamp(16px, 3vw, 24px)",
+          fontFamily: theme2.fonts.body,
+          outline: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                marginBottom: "24px",
+                paddingBottom: "16px",
+                borderBottom: `1px solid ${theme2.colors.border}`
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "8px" }, children: [
+                  /* @__PURE__ */ jsx(BookOpen, { size: 24, color: theme2.colors.primary }),
+                  /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      style: {
+                        margin: 0,
+                        fontSize: theme2.fontSizes[5],
+                        color: theme2.colors.text,
+                        fontWeight: 600
+                      },
+                      children: agent.name
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[1],
+                      color: theme2.colors.textSecondary,
+                      fontFamily: theme2.fonts.monospace
+                    },
+                    children: agent.path
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                color: theme2.colors.text
+              },
+              children: /* @__PURE__ */ jsx(SkillMarkdown, { content: agent.content, theme: theme2 })
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (selectedItem.type === "subagent") {
+    const subagent = selectedItem.data;
+    const fm = subagent.frontmatter;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        tabIndex: -1,
+        style: {
+          height: "100%",
+          overflow: "auto",
+          backgroundColor: theme2.colors.background,
+          padding: "clamp(16px, 3vw, 24px)",
+          fontFamily: theme2.fonts.body,
+          outline: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                marginBottom: "24px",
+                paddingBottom: "16px",
+                borderBottom: `1px solid ${theme2.colors.border}`
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "8px" }, children: [
+                  /* @__PURE__ */ jsx(Bot, { size: 24, color: theme2.colors.primary }),
+                  /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      style: {
+                        margin: 0,
+                        fontSize: theme2.fontSizes[5],
+                        color: theme2.colors.text,
+                        fontWeight: 600
+                      },
+                      children: subagent.name
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[1],
+                      color: theme2.colors.textSecondary,
+                      fontFamily: theme2.fonts.monospace,
+                      marginBottom: "12px"
+                    },
+                    children: subagent.path
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      margin: "12px 0 16px 0",
+                      fontSize: theme2.fontSizes[2],
+                      color: theme2.colors.text,
+                      lineHeight: 1.6
+                    },
+                    children: fm.description
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                      gap: "12px",
+                      marginTop: "16px"
+                    },
+                    children: [
+                      fm.model && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            padding: "12px",
+                            background: theme2.colors.backgroundSecondary,
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2]
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "6px",
+                                  marginBottom: "4px",
+                                  color: theme2.colors.textSecondary,
+                                  fontSize: theme2.fontSizes[0]
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(Zap, { size: 14 }),
+                                  /* @__PURE__ */ jsx("span", { children: "Model" })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  fontSize: theme2.fontSizes[1],
+                                  color: theme2.colors.text,
+                                  fontFamily: theme2.fonts.monospace
+                                },
+                                children: fm.model
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      fm.tools && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            padding: "12px",
+                            background: theme2.colors.backgroundSecondary,
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2]
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "6px",
+                                  marginBottom: "4px",
+                                  color: theme2.colors.textSecondary,
+                                  fontSize: theme2.fontSizes[0]
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(Wrench, { size: 14 }),
+                                  /* @__PURE__ */ jsx("span", { children: "Tools" })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  fontSize: theme2.fontSizes[1],
+                                  color: theme2.colors.text,
+                                  fontFamily: theme2.fonts.monospace
+                                },
+                                children: fm.tools
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      fm.permissionMode && fm.permissionMode !== "default" && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            padding: "12px",
+                            background: theme2.colors.backgroundSecondary,
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2]
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "6px",
+                                  marginBottom: "4px",
+                                  color: theme2.colors.textSecondary,
+                                  fontSize: theme2.fontSizes[0]
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(FileText, { size: 14 }),
+                                  /* @__PURE__ */ jsx("span", { children: "Permission Mode" })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  fontSize: theme2.fontSizes[1],
+                                  color: theme2.colors.text,
+                                  fontFamily: theme2.fonts.monospace
+                                },
+                                children: fm.permissionMode
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      fm.skills && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            padding: "12px",
+                            background: theme2.colors.backgroundSecondary,
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2]
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "6px",
+                                  marginBottom: "4px",
+                                  color: theme2.colors.textSecondary,
+                                  fontSize: theme2.fontSizes[0]
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(CodeXml, { size: 14 }),
+                                  /* @__PURE__ */ jsx("span", { children: "Skills" })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  fontSize: theme2.fontSizes[1],
+                                  color: theme2.colors.text,
+                                  fontFamily: theme2.fonts.monospace
+                                },
+                                children: fm.skills
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { marginTop: "32px" }, children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                style: {
+                  margin: "0 0 16px 0",
+                  fontSize: theme2.fontSizes[3],
+                  color: theme2.colors.text,
+                  fontWeight: 600
+                },
+                children: "Prompt"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "16px",
+                  background: theme2.colors.backgroundSecondary,
+                  border: `1px solid ${theme2.colors.border}`,
+                  borderRadius: theme2.radii[2],
+                  color: theme2.colors.text
+                },
+                children: /* @__PURE__ */ jsx(SkillMarkdown, { content: subagent.prompt, theme: theme2 })
+              }
+            )
+          ] }),
+          fm.disallowedTools && /* @__PURE__ */ jsxs("div", { style: { marginTop: "24px" }, children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                style: {
+                  margin: "0 0 12px 0",
+                  fontSize: theme2.fontSizes[2],
+                  color: theme2.colors.text,
+                  fontWeight: 600
+                },
+                children: "Disallowed Tools"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "12px",
+                  background: `${theme2.colors.error}10`,
+                  border: `1px solid ${theme2.colors.error}40`,
+                  borderRadius: theme2.radii[2],
+                  color: theme2.colors.text,
+                  fontFamily: theme2.fonts.monospace,
+                  fontSize: theme2.fontSizes[1]
+                },
+                children: fm.disallowedTools
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return null;
+};
+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.skill-detail",
+      name: "Skill Detail",
+      icon: "📋",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Display detailed information about a selected Agent Skill",
+      slices: ["fileTree", "globalSkills"]
+      // Data slices this panel depends on
+    },
+    component: SkillDetailPanel,
+    // Optional: Called when this specific panel is mounted
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Skill Detail Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+    },
+    // Optional: Called when this specific panel is unmounted
+    onUnmount: async (_context) => {
+      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",
+      name: "Agent Detail",
+      icon: "📄",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Display detailed information about a selected agent or subagent",
+      slices: ["fileTree", "globalAgents", "globalSubagents"]
+      // Data slices this panel depends on
+    },
+    component: AgentDetailPanel,
+    // Optional: Called when this specific panel is mounted
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Agent Detail Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+    },
+    // Optional: Called when this specific panel is unmounted
+    onUnmount: async (_context) => {
+      console.log("Agent Detail Panel unmounting");
     }
   }
 ];