agenthud 0.6.5 → 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,19 +603,19 @@ 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 "";
 }
@@ -2126,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);
@@ -2185,8 +2203,9 @@ 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 = {
@@ -2200,7 +2219,6 @@ function ClaudePanel({
     );
     const padding = Math.max(0, contentWidth - displayWidth);
     const style = getActivityStyle(activity);
-    const clearEOL = "\x1B[K";
     lines.push(
       /* @__PURE__ */ jsxs(Text, { children: [
         BOX.v,
@@ -2210,8 +2228,7 @@ 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) {
@@ -2262,8 +2279,7 @@ function ClaudePanel({
             " ",
             /* @__PURE__ */ jsx(Text, { color: subStyle.color, dimColor: subStyle.dimColor, children: subLabelContent }),
             " ".repeat(subPadding),
-            BOX.v,
-            clearEOL
+            BOX.v
           ] }, `activity-${i}-sub-${j}`)
         );
       }
@@ -3354,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) {
@@ -3413,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, {
@@ -3431,7 +3459,6 @@ function DashboardApp({
     }
     return getTestData();
   }, [config.panels.tests.command]);
-  const [testsDisabled, setTestsDisabled] = useState4(false);
   const [testData, setTestData] = useState4({
     results: null,
     isOutdated: false,
@@ -3442,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) {
@@ -3481,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,
@@ -3665,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.5",
+  "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",