agenthud 0.6.4 → 0.7.0

package/dist/index.js

@@ -355,7 +355,9 @@ function getDefaultConfig2() {
       }
     },
     panelOrder: ["project", "git", "tests", "claude", "other_sessions"],
-    width: DEFAULT_WIDTH
+    width: DEFAULT_WIDTH,
+    wideLayoutThreshold: null
+    // disabled by default
   };
 }
 var BUILTIN_PANELS = ["project", "git", "tests", "claude", "other_sessions"];
@@ -410,6 +412,18 @@ function parseConfig() {
       config.width = parsed.width;
     }
   }
+  const MIN_WIDE_THRESHOLD = 140;
+  const wideThresholdValue = parsed.wideLayoutThreshold ?? parsed.wide_layout_threshold;
+  if (typeof wideThresholdValue === "number") {
+    if (wideThresholdValue < MIN_WIDE_THRESHOLD) {
+      warnings.push(
+        `wideLayoutThreshold ${wideThresholdValue} is too small, using minimum of ${MIN_WIDE_THRESHOLD}`
+      );
+      config.wideLayoutThreshold = MIN_WIDE_THRESHOLD;
+    } else {
+      config.wideLayoutThreshold = wideThresholdValue;
+    }
+  }
   const panels = parsed.panels;
   if (!panels || typeof panels !== "object") {
     return { config, warnings };
@@ -550,6 +564,9 @@ var ICONS = {
 };
 
 // src/data/claude.ts
+function stripAnsi(text) {
+  return text.replace(/\x1b\[[0-9;]*m/g, "");
+}
 var MAX_LINES_TO_SCAN = 200;
 var DEFAULT_MAX_ACTIVITIES = 10;
 function getClaudeSessionPath2(projectPath) {
@@ -586,22 +603,84 @@ function findActiveSession(sessionDir, sessionTimeout) {
 function getToolDetail(_toolName, input) {
   if (!input) return "";
   if (input.command) {
-    return input.command.replace(/\n/g, " ");
+    return stripAnsi(input.command.replace(/\n/g, " "));
   }
   if (input.file_path) {
     return basename(input.file_path);
   }
   if (input.pattern) {
-    return input.pattern;
+    return stripAnsi(input.pattern);
   }
   if (input.query) {
-    return input.query;
+    return stripAnsi(input.query);
   }
   if (input.description) {
-    return input.description;
+    return stripAnsi(input.description);
   }
   return "";
 }
+var MAX_SUB_ACTIVITIES = 3;
+function getSubagentFiles(sessionFile) {
+  const subagentsDir = join3(sessionFile.replace(/\.jsonl$/, ""), "subagents");
+  if (!existsSync4(subagentsDir)) {
+    return [];
+  }
+  try {
+    const files = readdirSync(subagentsDir).filter(
+      (f) => f.endsWith(".jsonl")
+    );
+    const fileInfos = files.map((file) => {
+      const filePath = join3(subagentsDir, file);
+      const stat = statSync(filePath);
+      return { filePath, mtimeMs: stat.mtimeMs };
+    });
+    fileInfos.sort((a, b) => b.mtimeMs - a.mtimeMs);
+    return fileInfos;
+  } catch {
+    return [];
+  }
+}
+function parseSubagentFile(filePath) {
+  try {
+    const content = readFileSync5(filePath, "utf-8");
+    const lines = content.trim().split("\n").filter(Boolean);
+    const allActivities = [];
+    for (const line of lines) {
+      try {
+        const entry = JSON.parse(line);
+        if (entry.type === "assistant" && entry.message?.content) {
+          const messageContent = entry.message.content;
+          if (Array.isArray(messageContent)) {
+            for (const block of messageContent) {
+              if (block.type === "tool_use" && block.name) {
+                const toolName = block.name;
+                if (toolName === "TodoWrite") continue;
+                const icon = ICONS[toolName] || ICONS.Default;
+                const detail = getToolDetail(toolName, block.input);
+                const timestamp = entry.timestamp ? new Date(entry.timestamp) : /* @__PURE__ */ new Date();
+                allActivities.push({
+                  timestamp,
+                  type: "tool",
+                  icon,
+                  label: toolName,
+                  detail
+                });
+              }
+            }
+          }
+        }
+      } catch {
+      }
+    }
+    allActivities.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+    return {
+      activities: allActivities.slice(0, MAX_SUB_ACTIVITIES),
+      totalCount: allActivities.length
+    };
+  } catch {
+    return { activities: [], totalCount: 0 };
+  }
+}
 function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES) {
   const defaultState = {
     status: "none",
@@ -699,13 +778,14 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
                 lastActivity.count = (lastActivity.count || 1) + 1;
                 lastActivity.timestamp = lastTimestamp || /* @__PURE__ */ new Date();
               } else {
-                activities.push({
+                const activity = {
                   timestamp: lastTimestamp || /* @__PURE__ */ new Date(),
                   type: "tool",
                   icon,
                   label: toolName,
                   detail
-                });
+                };
+                activities.push(activity);
               }
               lastType = "tool";
             } else if (block.type === "text" && block.text) {
@@ -755,10 +835,10 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
   const subagentsDir = join3(sessionFile.replace(/\.jsonl$/, ""), "subagents");
   if (existsSync4(subagentsDir)) {
     try {
-      const subagentFiles = readdirSync(subagentsDir).filter(
+      const subagentFiles2 = readdirSync(subagentsDir).filter(
         (f) => f.endsWith(".jsonl")
       );
-      for (const file of subagentFiles) {
+      for (const file of subagentFiles2) {
         const filePath = join3(subagentsDir, file);
         try {
           const subContent = readFileSync5(filePath, "utf-8");
@@ -779,9 +859,22 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
     } catch {
     }
   }
+  const finalActivities = activities.slice(-maxActivities).reverse();
+  const subagentFiles = getSubagentFiles(sessionFile);
+  let taskIndex = 0;
+  for (const activity of finalActivities) {
+    if (activity.label === "Task" && taskIndex < subagentFiles.length) {
+      const subagentData = parseSubagentFile(subagentFiles[taskIndex].filePath);
+      if (subagentData.totalCount > 0) {
+        activity.subActivities = subagentData.activities;
+        activity.subActivityCount = subagentData.totalCount;
+      }
+      taskIndex++;
+    }
+  }
   return {
     status,
-    activities: activities.slice(-maxActivities).reverse(),
+    activities: finalActivities,
     tokenCount,
     sessionStartTime,
     todos
@@ -2050,7 +2143,8 @@ function ClaudePanel({
   countdown,
   width = DEFAULT_PANEL_WIDTH,
   isRunning = false,
-  justRefreshed = false
+  justRefreshed = false,
+  maxActivities
 }) {
   const countdownSuffix = isRunning ? "running..." : formatCountdown(countdown);
   const innerWidth = getInnerWidth(width);
@@ -2109,15 +2203,22 @@ function ClaudePanel({
     ] });
   }
   const lines = [];
-  for (let i = 0; i < state.activities.length; i++) {
-    const activity = state.activities[i];
+  const displayActivities = maxActivities !== void 0 ? state.activities.slice(0, maxActivities) : state.activities;
+  for (let i = 0; i < displayActivities.length; i++) {
+    const activity = displayActivities[i];
+    let modifiedActivity = activity;
+    if (activity.label === "Task" && activity.subActivityCount && activity.subActivityCount > 0) {
+      modifiedActivity = {
+        ...activity,
+        detail: activity.detail ? `${activity.detail} (${activity.subActivityCount})` : `(${activity.subActivityCount})`
+      };
+    }
     const { timestamp, icon, labelContent, displayWidth } = formatActivityParts(
-      activity,
+      modifiedActivity,
       contentWidth
     );
     const padding = Math.max(0, contentWidth - displayWidth);
     const style = getActivityStyle(activity);
-    const clearEOL = "\x1B[K";
     lines.push(
       /* @__PURE__ */ jsxs(Text, { children: [
         BOX.v,
@@ -2127,10 +2228,62 @@ function ClaudePanel({
         " ",
         /* @__PURE__ */ jsx(Text, { color: style.color, dimColor: style.dimColor, children: labelContent }),
         " ".repeat(padding),
-        BOX.v,
-        clearEOL
+        BOX.v
       ] }, `activity-${i}`)
     );
+    if (activity.subActivities && activity.subActivities.length > 0) {
+      const subPrefix = "          \u2514 ";
+      const subPrefixWidth = getDisplayWidth(subPrefix);
+      for (let j = 0; j < activity.subActivities.length; j++) {
+        const sub = activity.subActivities[j];
+        const subStyle = getActivityStyle(sub);
+        const subIcon = sub.icon;
+        const subIconWidth = getDisplayWidth(subIcon);
+        const subLabel = sub.label;
+        const subDetail = sub.detail;
+        const subContentPrefixWidth = subPrefixWidth + subIconWidth + 1;
+        const availableWidth = contentWidth - subContentPrefixWidth;
+        let subLabelContent;
+        let subDisplayWidth;
+        if (subDetail) {
+          const labelPart = `${subLabel}: `;
+          const detailAvailable = availableWidth - labelPart.length;
+          let truncatedDetail = subDetail;
+          if (getDisplayWidth(subDetail) > detailAvailable) {
+            truncatedDetail = "";
+            let currentWidth = 0;
+            for (const char of subDetail) {
+              const charWidth = getDisplayWidth(char);
+              if (currentWidth + charWidth > detailAvailable - 3) {
+                truncatedDetail += "...";
+                currentWidth += 3;
+                break;
+              }
+              truncatedDetail += char;
+              currentWidth += charWidth;
+            }
+          }
+          subLabelContent = labelPart + truncatedDetail;
+          subDisplayWidth = subContentPrefixWidth + labelPart.length + getDisplayWidth(truncatedDetail);
+        } else {
+          subLabelContent = subLabel;
+          subDisplayWidth = subContentPrefixWidth + subLabel.length;
+        }
+        const subPadding = Math.max(0, contentWidth - subDisplayWidth);
+        lines.push(
+          /* @__PURE__ */ jsxs(Text, { children: [
+            BOX.v,
+            " ",
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: subPrefix }),
+            /* @__PURE__ */ jsx(Text, { color: "cyan", children: subIcon }),
+            " ",
+            /* @__PURE__ */ jsx(Text, { color: subStyle.color, dimColor: subStyle.dimColor, children: subLabelContent }),
+            " ".repeat(subPadding),
+            BOX.v
+          ] }, `activity-${i}-sub-${j}`)
+        );
+      }
+    }
   }
   const hasTodos = state.todos && state.todos.length > 0;
   const allCompleted = hasTodos && state.todos?.every((t) => t.status === "completed");
@@ -3217,6 +3370,18 @@ function DashboardApp({
     },
     [config.width]
   );
+  const getEffectiveMaxActivities = useCallback4(
+    (terminalRows, todoCount = 0, isWideLayout = false) => {
+      const configMax = config.panels.claude.maxActivities ?? 10;
+      if (!terminalRows || !isWideLayout) {
+        return configMax;
+      }
+      const todoHeight = todoCount > 0 ? 1 + todoCount : 0;
+      const heightBasedMax = Math.max(5, terminalRows - 13 - todoHeight);
+      return Math.max(configMax, heightBasedMax);
+    },
+    [config.panels.claude.maxActivities]
+  );
   const [width, setWidth] = useState4(() => getEffectiveWidth(stdout?.columns));
   useEffect4(() => {
     if (!config.width) {
@@ -3276,12 +3441,12 @@ function DashboardApp({
   const [gitData, setGitData] = useState4(
     () => getGitData(config.panels.git)
   );
+  const fetchMaxActivities = Math.max(
+    config.panels.claude.maxActivities ?? 10,
+    stdout?.rows ?? 50
+  );
   const [claudeData, setClaudeData] = useState4(
-    () => getClaudeData(
-      cwd,
-      config.panels.claude.maxActivities,
-      config.panels.claude.sessionTimeout
-    )
+    () => getClaudeData(cwd, fetchMaxActivities, config.panels.claude.sessionTimeout)
   );
   const [otherSessionsData, setOtherSessionsData] = useState4(
     () => getOtherSessionsData(cwd, {
@@ -3294,7 +3459,6 @@ function DashboardApp({
     }
     return getTestData();
   }, [config.panels.tests.command]);
-  const [testsDisabled, setTestsDisabled] = useState4(false);
   const [testData, setTestData] = useState4({
     results: null,
     isOutdated: false,
@@ -3305,14 +3469,10 @@ function DashboardApp({
     if (testsInitializedRef.current) return;
     testsInitializedRef.current = true;
     const timer = setTimeout(() => {
-      const data = getTestDataFromConfig();
-      setTestData(data);
-      if (data.error && !config.panels.tests.command) {
-        setTestsDisabled(true);
-      }
+      setTestData(getTestDataFromConfig());
     }, 0);
     return () => clearTimeout(timer);
-  }, [getTestDataFromConfig, config.panels.tests.command]);
+  }, [getTestDataFromConfig]);
   const [customPanelData, setCustomPanelData] = useState4(() => {
     const data = {};
     if (config.customPanels) {
@@ -3344,30 +3504,27 @@ function DashboardApp({
     try {
       await new Promise((resolve) => {
         setTimeout(() => {
-          const data = getTestDataFromConfig();
-          if (config.panels.tests.command) {
-            setTestsDisabled(!!data.error);
-          }
-          setTestData(data);
+          setTestData(getTestDataFromConfig());
           resolve();
         }, 0);
       });
     } finally {
       visualFeedback.endAsync("tests", { completed: true });
     }
-  }, [getTestDataFromConfig, config.panels.tests.command, visualFeedback]);
+  }, [getTestDataFromConfig, visualFeedback]);
   const refreshClaude = useCallback4(() => {
+    const maxFetch = Math.max(
+      config.panels.claude.maxActivities ?? 10,
+      stdout?.rows ?? 50
+    );
     setClaudeData(
-      getClaudeData(
-        cwd,
-        config.panels.claude.maxActivities,
-        config.panels.claude.sessionTimeout
-      )
+      getClaudeData(cwd, maxFetch, config.panels.claude.sessionTimeout)
     );
     visualFeedback.setRefreshed("claude");
     resetCountdown("claude");
   }, [
     cwd,
+    stdout?.rows,
     config.panels.claude.maxActivities,
     config.panels.claude.sessionTimeout,
     visualFeedback,
@@ -3528,106 +3685,180 @@ function DashboardApp({
     }
     return () => timers.forEach((t) => clearInterval(t));
   }, [isWatchMode, config]);
+  const terminalWidth = stdout?.columns ?? 0;
+  const terminalHeight = stdout?.rows ?? 0;
+  const columnGap = 2;
+  const effectiveThreshold = config.wideLayoutThreshold ?? MIN_TERMINAL_WIDTH * 2 + columnGap;
+  const useWideLayout = terminalWidth >= effectiveThreshold;
+  const singleColumnWidth = getClampedWidth(terminalWidth);
+  const leftColumnWidth = useWideLayout ? Math.floor((terminalWidth - columnGap) / 2) : singleColumnWidth;
+  const rightColumnWidth = useWideLayout ? terminalWidth - leftColumnWidth - columnGap : singleColumnWidth;
+  const claudeMaxActivities = useMemo3(() => {
+    if (!useWideLayout) return void 0;
+    const todos = claudeData.state.todos;
+    const hasTodos = todos && todos.length > 0;
+    const allCompleted = hasTodos && todos.every((t) => t.status === "completed");
+    const activeTodoCount = hasTodos && !allCompleted ? todos.length : 0;
+    return getEffectiveMaxActivities(terminalHeight, activeTodoCount, true);
+  }, [
+    useWideLayout,
+    claudeData.state.todos,
+    terminalHeight,
+    getEffectiveMaxActivities
+  ]);
+  const renderPanel = (panelName, panelWidth, marginTop) => {
+    if (panelName === "project" && config.panels.project.enabled) {
+      const vs = visualFeedback.getState("project");
+      return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
+        ProjectPanel,
+        {
+          data: projectData,
+          countdown: isWatchMode ? countdowns.project : null,
+          width: panelWidth,
+          justRefreshed: vs.justRefreshed
+        }
+      ) }, `panel-${panelName}`);
+    }
+    if (panelName === "git" && config.panels.git.enabled) {
+      const vs = visualFeedback.getState("git");
+      return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
+        GitPanel,
+        {
+          branch: gitData.branch,
+          commits: gitData.commits,
+          stats: gitData.stats,
+          uncommitted: gitData.uncommitted,
+          countdown: isWatchMode ? countdowns.git : null,
+          width: panelWidth,
+          isRunning: vs.isRunning,
+          justRefreshed: vs.justRefreshed
+        }
+      ) }, `panel-${panelName}`);
+    }
+    if (panelName === "tests" && config.panels.tests.enabled) {
+      const vs = visualFeedback.getState("tests");
+      return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
+        TestPanel,
+        {
+          results: testData.results,
+          isOutdated: testData.isOutdated,
+          commitsBehind: testData.commitsBehind,
+          error: testData.error,
+          width: panelWidth,
+          isRunning: vs.isRunning,
+          justCompleted: vs.justCompleted
+        }
+      ) }, `panel-${panelName}`);
+    }
+    if (panelName === "claude" && config.panels.claude.enabled) {
+      const vs = visualFeedback.getState("claude");
+      return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
+        ClaudePanel,
+        {
+          data: claudeData,
+          countdown: isWatchMode ? countdowns.claude : null,
+          width: panelWidth,
+          justRefreshed: vs.justRefreshed,
+          maxActivities: claudeMaxActivities
+        }
+      ) }, `panel-${panelName}`);
+    }
+    if (panelName === "other_sessions" && config.panels.other_sessions.enabled) {
+      const vs = visualFeedback.getState("other_sessions");
+      return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
+        OtherSessionsPanel,
+        {
+          data: otherSessionsData,
+          countdown: isWatchMode ? countdowns.other_sessions : null,
+          width: panelWidth,
+          isRunning: vs.isRunning,
+          messageMaxLength: config.panels.other_sessions.messageMaxLength
+        }
+      ) }, `panel-${panelName}`);
+    }
+    const customConfig = config.customPanels?.[panelName];
+    if (customConfig?.enabled) {
+      const result = customPanelData[panelName];
+      if (!result) return null;
+      const vs = visualFeedback.getState(panelName);
+      const isManual = customConfig.interval === null;
+      const relativeTime = isManual ? formatRelativeTime3(result.timestamp) : void 0;
+      const countdown = !isManual && isWatchMode ? countdowns[panelName] : null;
+      return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
+        GenericPanel,
+        {
+          data: result.data,
+          renderer: customConfig.renderer,
+          countdown,
+          relativeTime,
+          error: result.error,
+          width: panelWidth,
+          isRunning: vs.isRunning,
+          justRefreshed: vs.justRefreshed
+        }
+      ) }, `panel-${panelName}`);
+    }
+    return null;
+  };
+  if (useWideLayout) {
+    const leftPanels = ["claude", "other_sessions"];
+    const rightPanels = config.panelOrder.filter(
+      (name) => !leftPanels.includes(name)
+    );
+    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
+      warnings.length > 0 && /* @__PURE__ */ jsx8(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsxs8(Text8, { color: "yellow", children: [
+        "\u26A0 ",
+        warnings.join(", ")
+      ] }) }),
+      /* @__PURE__ */ jsxs8(Box8, { flexDirection: "row", children: [
+        /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", width: leftColumnWidth, children: [
+          renderPanel("claude", leftColumnWidth, 0),
+          renderPanel("other_sessions", leftColumnWidth, 1)
+        ] }),
+        /* @__PURE__ */ jsx8(
+          Box8,
+          {
+            flexDirection: "column",
+            width: rightColumnWidth,
+            marginLeft: columnGap,
+            children: rightPanels.map(
+              (panelName, index) => renderPanel(panelName, rightColumnWidth, index === 0 ? 0 : 1)
+            )
+          }
+        )
+      ] }),
+      isWatchMode && /* @__PURE__ */ jsxs8(
+        Box8,
+        {
+          marginTop: 1,
+          width: terminalWidth,
+          justifyContent: "space-between",
+          children: [
+            /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: statusBarItems.map((item, index) => /* @__PURE__ */ jsxs8(React.Fragment, { children: [
+              index > 0 && " \xB7 ",
+              /* @__PURE__ */ jsxs8(Text8, { color: "cyan", children: [
+                item.split(":")[0],
+                ":"
+              ] }),
+              item.split(":").slice(1).join(":")
+            ] }, index)) }),
+            /* @__PURE__ */ jsxs8(Text8, { dimColor: true, children: [
+              "AgentHUD v",
+              getVersion()
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
     warnings.length > 0 && /* @__PURE__ */ jsx8(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsxs8(Text8, { color: "yellow", children: [
       "\u26A0 ",
       warnings.join(", ")
     ] }) }),
-    config.panelOrder.map((panelName, index) => {
-      const isFirst = index === 0;
-      const marginTop = isFirst ? 0 : 1;
-      if (panelName === "project" && config.panels.project.enabled) {
-        const vs = visualFeedback.getState("project");
-        return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
-          ProjectPanel,
-          {
-            data: projectData,
-            countdown: isWatchMode ? countdowns.project : null,
-            width,
-            justRefreshed: vs.justRefreshed
-          }
-        ) }, `panel-${panelName}-${index}`);
-      }
-      if (panelName === "git" && config.panels.git.enabled) {
-        const vs = visualFeedback.getState("git");
-        return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
-          GitPanel,
-          {
-            branch: gitData.branch,
-            commits: gitData.commits,
-            stats: gitData.stats,
-            uncommitted: gitData.uncommitted,
-            countdown: isWatchMode ? countdowns.git : null,
-            width,
-            isRunning: vs.isRunning,
-            justRefreshed: vs.justRefreshed
-          }
-        ) }, `panel-${panelName}-${index}`);
-      }
-      if (panelName === "tests" && config.panels.tests.enabled && !testsDisabled) {
-        const vs = visualFeedback.getState("tests");
-        return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
-          TestPanel,
-          {
-            results: testData.results,
-            isOutdated: testData.isOutdated,
-            commitsBehind: testData.commitsBehind,
-            error: testData.error,
-            width,
-            isRunning: vs.isRunning,
-            justCompleted: vs.justCompleted
-          }
-        ) }, `panel-${panelName}-${index}`);
-      }
-      if (panelName === "claude" && config.panels.claude.enabled) {
-        const vs = visualFeedback.getState("claude");
-        return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
-          ClaudePanel,
-          {
-            data: claudeData,
-            countdown: isWatchMode ? countdowns.claude : null,
-            width,
-            justRefreshed: vs.justRefreshed
-          }
-        ) }, `panel-${panelName}-${index}`);
-      }
-      if (panelName === "other_sessions" && config.panels.other_sessions.enabled) {
-        const vs = visualFeedback.getState("other_sessions");
-        return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
-          OtherSessionsPanel,
-          {
-            data: otherSessionsData,
-            countdown: isWatchMode ? countdowns.other_sessions : null,
-            width,
-            isRunning: vs.isRunning,
-            messageMaxLength: config.panels.other_sessions.messageMaxLength
-          }
-        ) }, `panel-${panelName}-${index}`);
-      }
-      const customConfig = config.customPanels?.[panelName];
-      if (customConfig?.enabled) {
-        const result = customPanelData[panelName];
-        if (!result) return null;
-        const vs = visualFeedback.getState(panelName);
-        const isManual = customConfig.interval === null;
-        const relativeTime = isManual ? formatRelativeTime3(result.timestamp) : void 0;
-        const countdown = !isManual && isWatchMode ? countdowns[panelName] : null;
-        return /* @__PURE__ */ jsx8(Box8, { marginTop, children: /* @__PURE__ */ jsx8(
-          GenericPanel,
-          {
-            data: result.data,
-            renderer: customConfig.renderer,
-            countdown,
-            relativeTime,
-            error: result.error,
-            width,
-            isRunning: vs.isRunning,
-            justRefreshed: vs.justRefreshed
-          }
-        ) }, `panel-${panelName}-${index}`);
-      }
-      return null;
-    }),
+    config.panelOrder.map(
+      (panelName, index) => renderPanel(panelName, width, index === 0 ? 0 : 1)
+    ),
     isWatchMode && /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, width, justifyContent: "space-between", children: [
       /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: statusBarItems.map((item, index) => /* @__PURE__ */ jsxs8(React.Fragment, { children: [
         index > 0 && " \xB7 ",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenthud",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "CLI tool to monitor agent status in real-time. Works with Claude Code, multi-agent workflows, and any AI agent system.",
   "type": "module",
   "main": "dist/index.js",