@industry-theme/agent-panels 0.2.3 → 0.2.5

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$o = [
+const __iconNode$n = [
   ["path", { d: "M12 7v14", key: "1akyts" }],
   [
     "path",
@@ -2211,14 +2211,14 @@ const __iconNode$o = [
     }
   ]
 ];
-const BookOpen = createLucideIcon("book-open", __iconNode$o);
+const BookOpen = createLucideIcon("book-open", __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$n = [
+const __iconNode$m = [
   ["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" }],
@@ -2226,31 +2226,23 @@ const __iconNode$n = [
   ["path", { d: "M15 13v2", key: "1xurst" }],
   ["path", { d: "M9 13v2", key: "rq6x2g" }]
 ];
-const Bot = createLucideIcon("bot", __iconNode$n);
+const Bot = createLucideIcon("bot", __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$m = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$m);
+const __iconNode$l = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$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$k = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$k);
+const __iconNode$k = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$k);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -2548,6 +2540,7 @@ const __iconNode = [
   ]
 ];
 const Zap = createLucideIcon("zap", __iconNode);
+const EMPTY_SKILLS_ARRAY = [];
 const determineSkillSource = (path2) => {
   if (path2.includes(".agent/skills/")) {
     return { source: "project-universal", priority: 1 };
@@ -2656,17 +2649,25 @@ const useSkillsData = ({
   context
 }) => {
   var _a, _b, _c;
-  const [skills, setSkills] = useState([]);
+  const [skills, setSkills] = useState(EMPTY_SKILLS_ARRAY);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fileTreeSlice = context.getSlice("fileTree");
   const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
   const fileTreeSha = fileTree == null ? void 0 : fileTree.sha;
   const globalSkillsSlice = context.getSlice("globalSkills");
-  const globalSkills = ((_a = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _a.skills) || [];
+  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 && globalSkillsCount === lastGlobalSkillsCount.current) {
+      console.log("[useSkillsData] Skipping reload - data unchanged (SHA:", fileTreeSha, "globalCount:", globalSkillsCount, ")");
+      return;
+    }
+    console.log("[useSkillsData] Loading skills - SHA changed:", fileTreeSha !== lastLoadedSha.current, "globalCount changed:", globalSkillsCount !== lastGlobalSkillsCount.current);
     setIsLoading(true);
     setError(null);
     try {
@@ -2695,6 +2696,8 @@ const useSkillsData = ({
       const allSkills = [...localSkills, ...globalSkills];
       console.log("[useSkillsData] Total skills:", allSkills.length);
       setSkills(allSkills);
+      lastLoadedSha.current = fileTreeSha;
+      lastGlobalSkillsCount.current = globalSkillsCount;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to load skills";
       setError(errorMessage);
@@ -2702,8 +2705,10 @@ const useSkillsData = ({
     } finally {
       setIsLoading(false);
     }
-  }, [fileTree, fileTreeSha, globalSkills, repoPath, fileSystem]);
+  }, [fileTree, fileTreeSha, globalSkills, globalSkillsCount, repoPath, fileSystem]);
   const refreshSkills = useCallback(async () => {
+    lastLoadedSha.current = void 0;
+    lastGlobalSkillsCount.current = -1;
     await loadSkills();
   }, [loadSkills]);
   useEffect(() => {
@@ -2773,6 +2778,17 @@ const SkillCard = ({
   var _a, _b, _c, _d, _e2, _f, _g, _h;
   const { theme: theme2 } = useTheme();
   const sourceConfig = getSourceConfig(skill.source);
+  const [pathCopied, setPathCopied] = React2__default.useState(false);
+  const handleCopyPath = async (e) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(skill.path);
+      setPathCopied(true);
+      setTimeout(() => setPathCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy path:", err);
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2804,105 +2820,147 @@ const SkillCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "12px" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ jsx(
-              "div",
+              "h3",
               {
                 style: {
-                  width: "36px",
-                  height: "36px",
-                  borderRadius: theme2.radii[1],
-                  background: `${theme2.colors.primary}20`,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0
+                  margin: 0,
+                  fontSize: theme2.fontSizes[2],
+                  fontWeight: theme2.fontWeights.semibold,
+                  color: theme2.colors.text,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  textTransform: "capitalize"
                 },
-                children: /* @__PURE__ */ jsx(FileText, { size: 20, color: theme2.colors.primary })
+                children: skill.name
               }
             ),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(
-                "h3",
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", alignItems: "center", flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
                   style: {
-                    margin: 0,
-                    fontSize: theme2.fontSizes[2],
-                    fontWeight: theme2.fontWeights.semibold,
-                    color: theme2.colors.text,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    textTransform: "capitalize"
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "2px 6px",
+                    borderRadius: theme2.radii[1],
+                    backgroundColor: sourceConfig.bgColor,
+                    border: `1px solid ${sourceConfig.borderColor}`,
+                    fontSize: theme2.fontSizes[0],
+                    color: sourceConfig.color,
+                    fontWeight: 500,
+                    width: "fit-content"
                   },
-                  children: skill.name
+                  title: `Source: ${skill.source}`,
+                  children: [
+                    /* @__PURE__ */ jsx(sourceConfig.icon, { size: 10 }),
+                    /* @__PURE__ */ jsx("span", { children: sourceConfig.label })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", alignItems: "center", flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "4px",
-                      padding: "2px 6px",
-                      borderRadius: theme2.radii[1],
-                      backgroundColor: sourceConfig.bgColor,
-                      border: `1px solid ${sourceConfig.borderColor}`,
-                      fontSize: theme2.fontSizes[0],
-                      color: sourceConfig.color,
-                      fontWeight: 500,
-                      width: "fit-content"
-                    },
-                    title: `Source: ${skill.source}`,
-                    children: [
-                      /* @__PURE__ */ jsx(sourceConfig.icon, { size: 10 }),
-                      /* @__PURE__ */ jsx("span", { children: sourceConfig.label })
-                    ]
-                  }
-                ),
-                ((_a = skill.metadata) == null ? void 0 : _a.owner) && ((_b = skill.metadata) == null ? void 0 : _b.repo) && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "4px",
-                      padding: "2px 6px",
-                      borderRadius: theme2.radii[1],
-                      backgroundColor: `${theme2.colors.textSecondary}15`,
-                      border: `1px solid ${theme2.colors.textSecondary}30`,
-                      fontSize: theme2.fontSizes[0],
-                      color: theme2.colors.textSecondary,
-                      fontWeight: 500,
-                      fontFamily: theme2.fonts.monospace,
-                      width: "fit-content"
-                    },
-                    title: `From: ${skill.metadata.installedFrom}
+              ((_a = skill.metadata) == null ? void 0 : _a.owner) && ((_b = skill.metadata) == null ? void 0 : _b.repo) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "2px 6px",
+                    borderRadius: theme2.radii[1],
+                    backgroundColor: `${theme2.colors.textSecondary}15`,
+                    border: `1px solid ${theme2.colors.textSecondary}30`,
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary,
+                    fontWeight: 500,
+                    fontFamily: theme2.fonts.monospace,
+                    width: "fit-content"
+                  },
+                  title: `From: ${skill.metadata.installedFrom}
 Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).toLocaleString() : "Unknown"}`,
-                    children: [
-                      /* @__PURE__ */ jsx(Github, { size: 10 }),
-                      /* @__PURE__ */ jsxs("span", { children: [
-                        skill.metadata.owner,
-                        "/",
-                        skill.metadata.repo
-                      ] })
-                    ]
-                  }
-                )
-              ] })
+                  children: [
+                    /* @__PURE__ */ jsx(Github, { size: 10 }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      skill.metadata.owner,
+                      "/",
+                      skill.metadata.repo
+                    ] })
+                  ]
+                }
+              )
             ] })
           ] }),
-          onClick && /* @__PURE__ */ jsx(
-            ChevronRight,
-            {
-              size: 18,
-              color: theme2.colors.textSecondary,
-              style: { flexShrink: 0 }
-            }
-          )
+          (skill.hasScripts || skill.hasReferences || skill.hasAssets) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", flexShrink: 0 }, children: [
+            skill.hasScripts && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  padding: "2px 8px",
+                  borderRadius: theme2.radii[1],
+                  backgroundColor: `${theme2.colors.primary}15`,
+                  border: `1px solid ${theme2.colors.primary}30`,
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.primary,
+                  fontWeight: 500
+                },
+                title: `Scripts: ${(_c = skill.scriptFiles) == null ? void 0 : _c.join(", ")}`,
+                children: [
+                  /* @__PURE__ */ jsx(Code, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { children: ((_d = skill.scriptFiles) == null ? void 0 : _d.length) || 0 })
+                ]
+              }
+            ),
+            skill.hasReferences && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  padding: "2px 8px",
+                  borderRadius: theme2.radii[1],
+                  backgroundColor: `${theme2.colors.secondary}15`,
+                  border: `1px solid ${theme2.colors.secondary}30`,
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.secondary,
+                  fontWeight: 500
+                },
+                title: `References: ${(_e2 = skill.referenceFiles) == null ? void 0 : _e2.join(", ")}`,
+                children: [
+                  /* @__PURE__ */ jsx(BookOpen, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { children: ((_f = skill.referenceFiles) == null ? void 0 : _f.length) || 0 })
+                ]
+              }
+            ),
+            skill.hasAssets && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  padding: "2px 8px",
+                  borderRadius: theme2.radii[1],
+                  backgroundColor: `${theme2.colors.accent}15`,
+                  border: `1px solid ${theme2.colors.accent}30`,
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.accent,
+                  fontWeight: 500
+                },
+                title: `Assets: ${(_g = skill.assetFiles) == null ? void 0 : _g.join(", ")}`,
+                children: [
+                  /* @__PURE__ */ jsx(Package, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { children: ((_h = skill.assetFiles) == null ? void 0 : _h.length) || 0 })
+                ]
+              }
+            )
+          ] })
         ] }),
         skill.description && /* @__PURE__ */ jsx(
           "p",
@@ -2962,90 +3020,36 @@ Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).t
           },
           index2
         )) }),
-        (skill.hasScripts || skill.hasReferences || skill.hasAssets) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: [
-          skill.hasScripts && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "2px 8px",
-                borderRadius: theme2.radii[1],
-                backgroundColor: `${theme2.colors.primary}15`,
-                border: `1px solid ${theme2.colors.primary}30`,
-                fontSize: theme2.fontSizes[0],
-                color: theme2.colors.primary,
-                fontWeight: 500
-              },
-              title: `Scripts: ${(_c = skill.scriptFiles) == null ? void 0 : _c.join(", ")}`,
-              children: [
-                /* @__PURE__ */ jsx(Code, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_d = skill.scriptFiles) == null ? void 0 : _d.length) || 0 })
-              ]
-            }
-          ),
-          skill.hasReferences && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "2px 8px",
-                borderRadius: theme2.radii[1],
-                backgroundColor: `${theme2.colors.secondary}15`,
-                border: `1px solid ${theme2.colors.secondary}30`,
-                fontSize: theme2.fontSizes[0],
-                color: theme2.colors.secondary,
-                fontWeight: 500
-              },
-              title: `References: ${(_e2 = skill.referenceFiles) == null ? void 0 : _e2.join(", ")}`,
-              children: [
-                /* @__PURE__ */ jsx(BookOpen, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_f = skill.referenceFiles) == null ? void 0 : _f.length) || 0 })
-              ]
-            }
-          ),
-          skill.hasAssets && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "2px 8px",
-                borderRadius: theme2.radii[1],
-                backgroundColor: `${theme2.colors.accent}15`,
-                border: `1px solid ${theme2.colors.accent}30`,
-                fontSize: theme2.fontSizes[0],
-                color: theme2.colors.accent,
-                fontWeight: 500
-              },
-              title: `Assets: ${(_g = skill.assetFiles) == null ? void 0 : _g.join(", ")}`,
-              children: [
-                /* @__PURE__ */ jsx(Package, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_h = skill.assetFiles) == null ? void 0 : _h.length) || 0 })
-              ]
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsx(
           "div",
           {
+            onClick: handleCopyPath,
             style: {
               fontSize: theme2.fontSizes[0],
-              color: theme2.colors.textMuted,
+              color: pathCopied ? theme2.colors.success : theme2.colors.textMuted,
               fontFamily: theme2.fonts.monospace,
-              background: theme2.colors.backgroundSecondary,
+              background: pathCopied ? `${theme2.colors.success}15` : theme2.colors.backgroundSecondary,
               padding: "4px 8px",
               borderRadius: theme2.radii[1],
               overflow: "hidden",
               textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
+              whiteSpace: "nowrap",
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              border: `1px solid ${pathCopied ? theme2.colors.success : "transparent"}`
+            },
+            title: pathCopied ? "Copied!" : "Click to copy path",
+            onMouseEnter: (e) => {
+              if (!pathCopied) {
+                e.currentTarget.style.background = theme2.colors.backgroundTertiary || theme2.colors.border;
+              }
             },
-            title: skill.path,
-            children: skill.path
+            onMouseLeave: (e) => {
+              if (!pathCopied) {
+                e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+              }
+            },
+            children: pathCopied ? "Copied!" : skill.path
           }
         )
       ]
@@ -47528,6 +47532,57 @@ var Ut;
   }
   return Ut || (Ut = createContext(void 0)), Ut;
 })();
+var DocumentView = ({
+  content: content2,
+  onCheckboxChange,
+  maxWidth = "900px",
+  slideIdPrefix = "document",
+  enableHtmlPopout = true,
+  enableKeyboardScrolling = true,
+  autoFocusOnVisible = true,
+  onLinkClick,
+  handleRunBashCommand,
+  handlePromptCopy,
+  repositoryInfo,
+  fontSizeScale,
+  theme: theme2,
+  transparentBackground = false,
+  editable = false
+}) => {
+  const containerRef = useRef(null);
+  const backgroundColor = transparentBackground ? "transparent" : theme2.colors.background;
+  return /* @__PURE__ */ React2__default.createElement("div", {
+    ref: containerRef,
+    style: {
+      height: "100%",
+      overflow: "auto",
+      backgroundColor
+    }
+  }, /* @__PURE__ */ React2__default.createElement("div", {
+    style: {
+      maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+      margin: "0 auto",
+      height: "100%"
+    }
+  }, /* @__PURE__ */ React2__default.createElement(IndustryMarkdownSlide, {
+    content: content2,
+    slideIdPrefix,
+    slideIndex: 0,
+    isVisible: true,
+    theme: theme2,
+    onCheckboxChange,
+    enableHtmlPopout,
+    enableKeyboardScrolling,
+    autoFocusOnVisible,
+    onLinkClick,
+    handleRunBashCommand,
+    fontSizeScale,
+    handlePromptCopy,
+    repositoryInfo,
+    transparentBackground,
+    editable
+  })));
+};
 var formatRelativeTime = (dateString) => {
   try {
     const date = new Date(dateString);
@@ -48079,6 +48134,7 @@ const SkillDetailPanel = ({
     }
   );
 };
+const EMPTY_AGENTS_ARRAY = [];
 const determineAgentSource = (path2) => {
   if (path2 === "AGENTS.md") {
     return { source: "project-root", priority: 1 };
@@ -48146,7 +48202,7 @@ const useAgentsData = ({
   context
 }) => {
   var _a, _b, _c;
-  const [agents, setAgents] = useState([]);
+  const [agents, setAgents] = useState(EMPTY_AGENTS_ARRAY);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fileTreeSlice = context.getSlice("fileTree");
@@ -48156,13 +48212,21 @@ const useAgentsData = ({
   const globalAgents = useMemo(
     () => {
       var _a2;
-      return ((_a2 = globalAgentsSlice == null ? void 0 : globalAgentsSlice.data) == null ? void 0 : _a2.agents) || [];
+      return ((_a2 = globalAgentsSlice == null ? void 0 : globalAgentsSlice.data) == null ? void 0 : _a2.agents) ?? EMPTY_AGENTS_ARRAY;
     },
     [(_a = globalAgentsSlice == null ? void 0 : globalAgentsSlice.data) == null ? void 0 : _a.agents]
   );
+  const globalAgentsCount = globalAgents.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 lastGlobalAgentsCount = useRef(0);
   const loadAgents = useCallback(async () => {
+    if (fileTreeSha === lastLoadedSha.current && globalAgentsCount === lastGlobalAgentsCount.current) {
+      console.log("[useAgentsData] Skipping reload - data unchanged (SHA:", fileTreeSha, "globalCount:", globalAgentsCount, ")");
+      return;
+    }
+    console.log("[useAgentsData] Loading agents - SHA changed:", fileTreeSha !== lastLoadedSha.current, "globalCount changed:", globalAgentsCount !== lastGlobalAgentsCount.current);
     setIsLoading(true);
     setError(null);
     try {
@@ -48189,6 +48253,8 @@ const useAgentsData = ({
       const allAgents = [...localAgents, ...globalAgents];
       console.log("[useAgentsData] Total agents:", allAgents.length);
       setAgents(allAgents);
+      lastLoadedSha.current = fileTreeSha;
+      lastGlobalAgentsCount.current = globalAgentsCount;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to load agents";
       setError(errorMessage);
@@ -48196,8 +48262,10 @@ const useAgentsData = ({
     } finally {
       setIsLoading(false);
     }
-  }, [fileTree, fileTreeSha, globalAgents, repoPath, fileSystem]);
+  }, [fileTree, fileTreeSha, globalAgents, globalAgentsCount, repoPath, fileSystem]);
   const refreshAgents = useCallback(async () => {
+    lastLoadedSha.current = void 0;
+    lastGlobalAgentsCount.current = -1;
     await loadAgents();
   }, [loadAgents]);
   useEffect(() => {
@@ -48210,6 +48278,7 @@ const useAgentsData = ({
     refreshAgents
   };
 };
+const EMPTY_SUBAGENTS_ARRAY = [];
 const determineSubagentSource = (path2) => {
   if (path2.includes(".claude/agents/")) {
     return { source: "project-claude", priority: 1 };
@@ -48284,7 +48353,7 @@ const useSubagentsData = ({
   context
 }) => {
   var _a, _b, _c;
-  const [subagents, setSubagents] = useState([]);
+  const [subagents, setSubagents] = useState(EMPTY_SUBAGENTS_ARRAY);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fileTreeSlice = context.getSlice("fileTree");
@@ -48294,13 +48363,21 @@ const useSubagentsData = ({
   const globalSubagents = useMemo(
     () => {
       var _a2;
-      return ((_a2 = globalSubagentsSlice == null ? void 0 : globalSubagentsSlice.data) == null ? void 0 : _a2.subagents) || [];
+      return ((_a2 = globalSubagentsSlice == null ? void 0 : globalSubagentsSlice.data) == null ? void 0 : _a2.subagents) ?? EMPTY_SUBAGENTS_ARRAY;
     },
     [(_a = globalSubagentsSlice == null ? void 0 : globalSubagentsSlice.data) == null ? void 0 : _a.subagents]
   );
+  const globalSubagentsCount = globalSubagents.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 lastGlobalSubagentsCount = useRef(0);
   const loadSubagents = useCallback(async () => {
+    if (fileTreeSha === lastLoadedSha.current && globalSubagentsCount === lastGlobalSubagentsCount.current) {
+      console.log("[useSubagentsData] Skipping reload - data unchanged (SHA:", fileTreeSha, "globalCount:", globalSubagentsCount, ")");
+      return;
+    }
+    console.log("[useSubagentsData] Loading subagents - SHA changed:", fileTreeSha !== lastLoadedSha.current, "globalCount changed:", globalSubagentsCount !== lastGlobalSubagentsCount.current);
     setIsLoading(true);
     setError(null);
     try {
@@ -48327,6 +48404,8 @@ const useSubagentsData = ({
       const allSubagents = [...localSubagents, ...globalSubagents];
       console.log("[useSubagentsData] Total subagents:", allSubagents.length);
       setSubagents(allSubagents);
+      lastLoadedSha.current = fileTreeSha;
+      lastGlobalSubagentsCount.current = globalSubagentsCount;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to load subagents";
       setError(errorMessage);
@@ -48334,8 +48413,10 @@ const useSubagentsData = ({
     } finally {
       setIsLoading(false);
     }
-  }, [fileTree, fileTreeSha, globalSubagents, repoPath, fileSystem]);
+  }, [fileTree, fileTreeSha, globalSubagents, globalSubagentsCount, repoPath, fileSystem]);
   const refreshSubagents = useCallback(async () => {
+    lastLoadedSha.current = void 0;
+    lastGlobalSubagentsCount.current = -1;
     await loadSubagents();
   }, [loadSubagents]);
   useEffect(() => {
@@ -49300,9 +49381,9 @@ const AgentDetailPanel = ({
         tabIndex: -1,
         style: {
           height: "100%",
-          overflow: "auto",
+          display: "flex",
+          flexDirection: "column",
           backgroundColor: theme2.colors.background,
-          padding: "clamp(16px, 3vw, 24px)",
           fontFamily: theme2.fonts.body,
           outline: "none"
         },
@@ -49311,9 +49392,11 @@ const AgentDetailPanel = ({
             "div",
             {
               style: {
-                marginBottom: "24px",
+                flexShrink: 0,
+                padding: "clamp(16px, 3vw, 24px)",
                 paddingBottom: "16px",
-                borderBottom: `1px solid ${theme2.colors.border}`
+                borderBottom: `1px solid ${theme2.colors.border}`,
+                backgroundColor: theme2.colors.background
               },
               children: [
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "8px" }, children: [
@@ -49349,9 +49432,12 @@ const AgentDetailPanel = ({
             "div",
             {
               style: {
+                flex: 1,
+                overflow: "auto",
+                padding: "clamp(16px, 3vw, 24px)",
                 color: theme2.colors.text
               },
-              children: /* @__PURE__ */ jsx(SkillMarkdown, { content: agent.content, theme: theme2 })
+              children: /* @__PURE__ */ jsx(DocumentView, { content: agent.content, theme: theme2 })
             }
           )
         ]
@@ -49368,9 +49454,9 @@ const AgentDetailPanel = ({
         tabIndex: -1,
         style: {
           height: "100%",
-          overflow: "auto",
+          display: "flex",
+          flexDirection: "column",
           backgroundColor: theme2.colors.background,
-          padding: "clamp(16px, 3vw, 24px)",
           fontFamily: theme2.fonts.body,
           outline: "none"
         },
@@ -49379,9 +49465,11 @@ const AgentDetailPanel = ({
             "div",
             {
               style: {
-                marginBottom: "24px",
+                flexShrink: 0,
+                padding: "clamp(16px, 3vw, 24px)",
                 paddingBottom: "16px",
-                borderBottom: `1px solid ${theme2.colors.border}`
+                borderBottom: `1px solid ${theme2.colors.border}`,
+                backgroundColor: theme2.colors.background
               },
               children: [
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "8px" }, children: [
@@ -49603,62 +49691,74 @@ const AgentDetailPanel = ({
               ]
             }
           ),
-          /* @__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
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                flex: 1,
+                overflow: "auto",
+                padding: "clamp(16px, 3vw, 24px)"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { 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(DocumentView, { 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
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ]
       }
     );