agenthud 0.5.16 → 0.6.0

package/README.md

@@ -67,16 +67,99 @@ panels:
     interval: 10s
 ```
 
+## Panels
+
+### Claude Panel
+
+Shows real-time Claude Code activity:
+
+```
+┌─ Claude ─────────────────────────────────────────────┐
+│ [10:23:45] ○ Read: src/components/Button.tsx         │
+│ [10:23:46] ~ Edit: src/components/Button.tsx         │
+│ [10:23:47] $ Bash: npm test                          │
+│ [10:23:50] < Response: Tests passed successfully...  │
+└──────────────────────────────────────────────────────┘
+```
+
+- **○ Read**: File being read
+- **~ Edit/Write**: File being modified
+- **$ Bash**: Command being executed
+- **< Response**: Claude's text response
+
+### Git Panel
+
+Shows today's git activity and current state:
+
+```
+┌─ Git ────────────────────────────────────────────────┐
+│ feat/add-dashboard · +142 -23 · 3 commits · 5 files  │
+│ • abc1234 Add dashboard component                    │
+│ • def5678 Fix styling issues                         │
+└──────────────────────────────────────────────────────┘
+```
+
+- **Branch name**: Current working branch (green)
+- **Stats**: Lines added/deleted, commits, files changed
+- **dirty**: Shows uncommitted change count (yellow)
+
+### Tests Panel
+
+Shows test results with staleness detection:
+
+```
+┌─ Tests ──────────────────────────────────────────────┐
+│ ✓ 42 passed  ✗ 1 failed  ○ 2 skipped · abc1234       │
+│ ⚠ Outdated (3 commits behind)                        │
+│──────────────────────────────────────────────────────│
+│ ✗ Button.test.tsx                                    │
+│   • should render correctly                          │
+└──────────────────────────────────────────────────────┘
+```
+
+- **✓ passed** (green), **✗ failed** (red), **○ skipped**
+- **⚠ Outdated**: Warning if tests are behind commits
+- **Failures**: Shows failing test file and name
+
+**Auto-detection**: During `agenthud init`, the test framework is automatically detected:
+
+| Framework | Detection |
+|-----------|-----------|
+| vitest | package.json devDependencies |
+| jest | package.json devDependencies |
+| mocha | package.json devDependencies |
+| pytest | pytest.ini, conftest.py, pyproject.toml, requirements.txt |
+
+If the test command fails, the panel is automatically disabled.
+
+### Project Panel
+
+Shows project overview and structure:
+
+```
+┌─ Project ────────────────────────────────────────────┐
+│ agenthud · TypeScript · MIT                          │
+│ Stack: react, ink, vitest                            │
+│ Files: 45 .ts · Lines: 3.2k                          │
+│ Deps: 12 prod · 8 dev                                │
+└──────────────────────────────────────────────────────┘
+```
+
+- **Name/Language/License**: Project basics
+- **Stack**: Detected frameworks and tools
+- **Files/Lines**: Source code stats
+- **Deps**: Dependency counts
+
 ### Other Sessions Panel
 
 Shows activity from your other Claude Code projects:
 
 ```
 ┌─ Other Sessions ─────────────────────────────────────┐
-│ 📁 dotfiles, pain-radar, myapp +4 | ⚡ 1 active     │
+│ 📁 dotfiles, pain-radar, myapp +4 | ⚡ 1 active      │
 │                                                      │
-│ 🔵 dotfiles (2m ago)                                │
-│    "Updated the config file as requested..."        │
+│ 🔵 dotfiles (2m ago)                                 │
+│    "Updated the config file as requested..."         │
 └──────────────────────────────────────────────────────┘
 ```
 

package/dist/index.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 
 // src/index.ts
-import React2 from "react";
+import React3 from "react";
 import { render } from "ink";
 import { existsSync } from "fs";
 
 // src/ui/App.tsx
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React2, { useState as useState2, useEffect as useEffect2, useCallback, useMemo } from "react";
 import { Box as Box8, Text as Text8, useApp, useInput, useStdout } from "ink";
 
 // src/ui/GitPanel.tsx
@@ -48,6 +48,13 @@ function createTitleLine(label, suffix = "", panelWidth = DEFAULT_PANEL_WIDTH) {
 function createBottomLine(panelWidth = DEFAULT_PANEL_WIDTH) {
   return BOX.bl + BOX.h.repeat(getInnerWidth(panelWidth)) + BOX.br;
 }
+function createSeparatorLine(title, panelWidth = DEFAULT_PANEL_WIDTH) {
+  const leftPart = BOX.h + " " + title + " ";
+  const leftWidth = leftPart.length;
+  const dashCount = panelWidth - 1 - leftWidth - 1;
+  const dashes = BOX.h.repeat(Math.max(0, dashCount));
+  return BOX.ml + leftPart + dashes + BOX.mr;
+}
 function padLine(content, panelWidth = DEFAULT_PANEL_WIDTH) {
   const innerWidth = getInnerWidth(panelWidth);
   const padding = innerWidth - content.length;
@@ -421,8 +428,9 @@ function ProjectPanel({
 }
 
 // src/ui/ClaudePanel.tsx
+import { useState, useEffect } from "react";
 import { Box as Box4, Text as Text4 } from "ink";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function getActivityStyle(activity) {
   if (activity.type === "user") {
     return { color: "white", dimColor: false };
@@ -481,15 +489,46 @@ function formatActivityParts(activity, maxWidth) {
   const icon = activity.icon;
   const label = activity.label;
   const detail = activity.detail;
+  const count = activity.count;
+  const countSuffix = count && count > 1 ? ` (\xD7${count})` : "";
+  const countSuffixWidth = countSuffix.length;
+  const skipLabel = label === "User" || label === "Response";
   const timestamp = `[${time}] `;
   const timestampWidth = timestamp.length;
   const iconWidth = getDisplayWidth(icon);
+  if (skipLabel && detail) {
+    const prefixWidth = timestampWidth + iconWidth + 1;
+    const availableWidth = maxWidth - prefixWidth - countSuffixWidth;
+    let truncatedDetail = detail;
+    let detailDisplayWidth = getDisplayWidth(detail);
+    if (detailDisplayWidth > availableWidth) {
+      truncatedDetail = "";
+      let currentWidth = 0;
+      for (const char of detail) {
+        const charWidth = getDisplayWidth(char);
+        if (currentWidth + charWidth > availableWidth - 3) {
+          truncatedDetail += "...";
+          currentWidth += 3;
+          break;
+        }
+        truncatedDetail += char;
+        currentWidth += charWidth;
+      }
+      detailDisplayWidth = currentWidth;
+    }
+    return {
+      timestamp,
+      icon,
+      labelContent: truncatedDetail + countSuffix,
+      displayWidth: prefixWidth + detailDisplayWidth + countSuffixWidth
+    };
+  }
   const labelWidth = label.length;
   const separatorWidth = detail ? 2 : 0;
   const contentPrefixWidth = iconWidth + 1 + labelWidth + separatorWidth;
   const totalPrefixWidth = timestampWidth + contentPrefixWidth;
   if (detail) {
-    const availableWidth = maxWidth - totalPrefixWidth;
+    const availableWidth = maxWidth - totalPrefixWidth - countSuffixWidth;
     let truncatedDetail = detail;
     let detailDisplayWidth = getDisplayWidth(detail);
     if (detailDisplayWidth > availableWidth) {
@@ -507,14 +546,80 @@ function formatActivityParts(activity, maxWidth) {
       }
       detailDisplayWidth = currentWidth;
     }
-    const labelContent2 = `${label}: ${truncatedDetail}`;
-    const displayWidth2 = totalPrefixWidth + detailDisplayWidth;
+    const labelContent2 = `${label}: ${truncatedDetail}${countSuffix}`;
+    const displayWidth2 = totalPrefixWidth + detailDisplayWidth + countSuffixWidth;
     return { timestamp, icon, labelContent: labelContent2, displayWidth: displayWidth2 };
   }
-  const labelContent = label;
-  const displayWidth = totalPrefixWidth;
+  const labelContent = label + countSuffix;
+  const displayWidth = totalPrefixWidth + countSuffixWidth;
   return { timestamp, icon, labelContent, displayWidth };
 }
+var TODO_ICONS = {
+  completed: "\u2713",
+  in_progress_left: "\u25D0",
+  in_progress_right: "\u25D1",
+  pending: "\u25CB"
+};
+function TodoSection({ todos, width }) {
+  const [tick, setTick] = useState(false);
+  const innerWidth = getInnerWidth(width);
+  const contentWidth = innerWidth - 1;
+  useEffect(() => {
+    const timer = setInterval(() => setTick((t) => !t), 500);
+    return () => clearInterval(timer);
+  }, []);
+  const completedCount = todos.filter((t) => t.status === "completed").length;
+  const totalCount = todos.length;
+  const headerTitle = `Todo (${completedCount}/${totalCount})`;
+  const inProgressIcon = tick ? TODO_ICONS.in_progress_left : TODO_ICONS.in_progress_right;
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx4(Text4, { children: createSeparatorLine(headerTitle, width) }),
+    todos.map((todo, i) => {
+      let icon;
+      let iconColor;
+      switch (todo.status) {
+        case "completed":
+          icon = TODO_ICONS.completed;
+          iconColor = "green";
+          break;
+        case "in_progress":
+          icon = inProgressIcon;
+          iconColor = "yellow";
+          break;
+        default:
+          icon = TODO_ICONS.pending;
+          iconColor = void 0;
+      }
+      const text = todo.status === "in_progress" ? todo.activeForm : todo.content;
+      const maxTextWidth = contentWidth - 3;
+      let displayText = text;
+      if (getDisplayWidth(text) > maxTextWidth) {
+        displayText = "";
+        let currentWidth = 0;
+        for (const char of text) {
+          const charWidth = getDisplayWidth(char);
+          if (currentWidth + charWidth > maxTextWidth - 3) {
+            displayText += "...";
+            currentWidth += 3;
+            break;
+          }
+          displayText += char;
+          currentWidth += charWidth;
+        }
+      }
+      const padding = Math.max(0, contentWidth - getDisplayWidth(icon) - 1 - getDisplayWidth(displayText));
+      return /* @__PURE__ */ jsxs4(Text4, { children: [
+        BOX.v,
+        " ",
+        /* @__PURE__ */ jsx4(Text4, { color: iconColor, children: icon }),
+        " ",
+        /* @__PURE__ */ jsx4(Text4, { dimColor: todo.status === "completed", children: displayText }),
+        " ".repeat(padding),
+        BOX.v
+      ] }, `todo-${i}`);
+    })
+  ] });
+}
 function ClaudePanel({
   data,
   countdown,
@@ -607,9 +712,51 @@ function ClaudePanel({
       ] }, "tokens")
     );
   }
+  const hasTodos = state.todos && state.todos.length > 0;
+  const allCompleted = hasTodos && state.todos.every((t) => t.status === "completed");
+  if (hasTodos && allCompleted) {
+    const todos = state.todos;
+    const summaryText = `Todo (${todos.length}/${todos.length} done)`;
+    const summaryIcon = "\u2713";
+    const timestamp = formatActivityTime(/* @__PURE__ */ new Date());
+    const timestampStr = `[${timestamp}] `;
+    const timestampWidth = timestampStr.length;
+    const iconWidth = getDisplayWidth(summaryIcon);
+    const prefixWidth = timestampWidth + iconWidth + 1;
+    const maxTextWidth = contentWidth - prefixWidth;
+    let displaySummary = summaryText;
+    if (getDisplayWidth(summaryText) > maxTextWidth) {
+      displaySummary = "";
+      let currentWidth = 0;
+      for (const char of summaryText) {
+        const charWidth = getDisplayWidth(char);
+        if (currentWidth + charWidth > maxTextWidth - 3) {
+          displaySummary += "...";
+          break;
+        }
+        displaySummary += char;
+        currentWidth += charWidth;
+      }
+    }
+    const summaryPadding = Math.max(0, contentWidth - prefixWidth - getDisplayWidth(displaySummary));
+    lines.push(
+      /* @__PURE__ */ jsxs4(Text4, { children: [
+        BOX.v,
+        " ",
+        /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: timestampStr }),
+        /* @__PURE__ */ jsx4(Text4, { color: "green", children: summaryIcon }),
+        " ",
+        /* @__PURE__ */ jsx4(Text4, { color: "green", children: displaySummary }),
+        " ".repeat(summaryPadding),
+        BOX.v
+      ] }, "todo-summary")
+    );
+  }
+  const showTodoSection = hasTodos && !allCompleted;
   return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", width, children: [
     /* @__PURE__ */ jsx4(Text4, { children: createTitleLine("Claude", titleSuffix, width) }),
     lines,
+    showTodoSection && /* @__PURE__ */ jsx4(TodoSection, { todos: state.todos, width }),
     /* @__PURE__ */ jsx4(Text4, { children: createBottomLine(width) })
   ] });
 }
@@ -768,7 +915,7 @@ function OtherSessionsPanel({
 
 // src/ui/GenericPanel.tsx
 import { Box as Box6, Text as Text6 } from "ink";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var PROGRESS_BAR_WIDTH = 10;
 function createProgressBar(done, total) {
   if (total === 0) return "\u2591".repeat(PROGRESS_BAR_WIDTH);
@@ -804,7 +951,7 @@ function ListRenderer({ data, width }) {
       BOX.v
     ] });
   }
-  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
     data.summary && /* @__PURE__ */ jsxs6(Text6, { children: [
       BOX.v,
       padLine(" " + truncate(data.summary, contentWidth), width),
@@ -821,7 +968,7 @@ function ListRenderer({ data, width }) {
 function ProgressRenderer({ data, width }) {
   const items = data.items || [];
   const contentWidth = getContentWidth(width);
-  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
     data.summary && /* @__PURE__ */ jsxs6(Text6, { children: [
       BOX.v,
       padLine(" " + truncate(data.summary, contentWidth), width),
@@ -856,7 +1003,7 @@ function StatusRenderer({ data, width }) {
     summaryLength += 2 + 2 + String(stats.skipped).length + " skipped".length;
   }
   const summaryPadding = Math.max(0, innerWidth - summaryLength);
-  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
     data.summary && /* @__PURE__ */ jsxs6(Text6, { children: [
       BOX.v,
       padLine(" " + truncate(data.summary, contentWidth), width),
@@ -870,7 +1017,7 @@ function StatusRenderer({ data, width }) {
         stats.passed,
         " passed"
       ] }),
-      stats.failed > 0 && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      stats.failed > 0 && /* @__PURE__ */ jsxs6(Fragment5, { children: [
         "  ",
         /* @__PURE__ */ jsxs6(Text6, { color: "red", children: [
           "\u2717 ",
@@ -878,7 +1025,7 @@ function StatusRenderer({ data, width }) {
           " failed"
         ] })
       ] }),
-      stats.skipped && stats.skipped > 0 && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      stats.skipped && stats.skipped > 0 && /* @__PURE__ */ jsxs6(Fragment5, { children: [
         "  ",
         /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
           "\u25CB ",
@@ -1557,6 +1704,9 @@ function getToolDetail(toolName, input) {
   if (input.query) {
     return input.query;
   }
+  if (input.description) {
+    return input.description;
+  }
   return "";
 }
 function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES) {
@@ -1564,7 +1714,8 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
     status: "none",
     activities: [],
     tokenCount: 0,
-    sessionStartTime: null
+    sessionStartTime: null,
+    todos: null
   };
   if (!fs.existsSync(sessionFile)) {
     return defaultState;
@@ -1594,6 +1745,7 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
   let tokenCount = 0;
   let lastTimestamp = null;
   let lastType = null;
+  let todos = null;
   const recentLines = lines.slice(-MAX_LINES_TO_SCAN);
   for (const line of recentLines) {
     try {
@@ -1624,6 +1776,13 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
             detail: userText.replace(/\n/g, " ")
           });
         }
+        if (userEntry.toolUseResult?.newTodos) {
+          todos = userEntry.toolUseResult.newTodos.map((t) => ({
+            content: t.content,
+            status: t.status,
+            activeForm: t.activeForm
+          }));
+        }
         lastType = "user";
       }
       if (entry.type === "assistant") {
@@ -1636,15 +1795,25 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
           for (const block of messageContent) {
             if (block.type === "tool_use") {
               const toolName = block.name || "Tool";
+              if (toolName === "TodoWrite") {
+                lastType = "tool";
+                continue;
+              }
               const icon = ICONS[toolName] || ICONS.Default;
               const detail = getToolDetail(toolName, block.input);
-              activities.push({
-                timestamp: lastTimestamp || /* @__PURE__ */ new Date(),
-                type: "tool",
-                icon,
-                label: toolName,
-                detail
-              });
+              const lastActivity = activities[activities.length - 1];
+              if (lastActivity && lastActivity.type === "tool" && lastActivity.label === toolName && lastActivity.detail === detail) {
+                lastActivity.count = (lastActivity.count || 1) + 1;
+                lastActivity.timestamp = lastTimestamp || /* @__PURE__ */ new Date();
+              } else {
+                activities.push({
+                  timestamp: lastTimestamp || /* @__PURE__ */ new Date(),
+                  type: "tool",
+                  icon,
+                  label: toolName,
+                  detail
+                });
+              }
               lastType = "tool";
             } else if (block.type === "text" && block.text) {
               if (block.text.length > 10) {
@@ -1695,7 +1864,8 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
     status,
     activities: activities.slice(-maxActivities).reverse(),
     tokenCount,
-    sessionStartTime
+    sessionStartTime,
+    todos
   };
 }
 function getClaudeData(projectPath, maxActivities) {
@@ -1703,7 +1873,8 @@ function getClaudeData(projectPath, maxActivities) {
     status: "none",
     activities: [],
     tokenCount: 0,
-    sessionStartTime: null
+    sessionStartTime: null,
+    todos: null
   };
   try {
     const sessionDir = getClaudeSessionPath(projectPath);
@@ -2522,8 +2693,8 @@ function DashboardApp({ mode }) {
     }
     return getClampedWidth(terminalColumns);
   };
-  const [width, setWidth] = useState(() => getEffectiveWidth(stdout?.columns));
-  useEffect(() => {
+  const [width, setWidth] = useState2(() => getEffectiveWidth(stdout?.columns));
+  useEffect2(() => {
     if (!config.width) {
       const newWidth = getEffectiveWidth(stdout?.columns);
       if (newWidth !== width) {
@@ -2531,7 +2702,7 @@ function DashboardApp({ mode }) {
       }
     }
   }, [stdout?.columns, width, config.width]);
-  useEffect(() => {
+  useEffect2(() => {
     if (config.width) return;
     const handleResize = () => {
       setWidth(getEffectiveWidth(stdout?.columns));
@@ -2546,11 +2717,11 @@ function DashboardApp({ mode }) {
   const claudeIntervalSeconds = config.panels.claude.interval ? config.panels.claude.interval / 1e3 : null;
   const otherSessionsIntervalSeconds = config.panels.other_sessions.interval ? config.panels.other_sessions.interval / 1e3 : null;
   const cwd = process.cwd();
-  const [projectData, setProjectData] = useState(() => getProjectData());
+  const [projectData, setProjectData] = useState2(() => getProjectData());
   const refreshProject = useCallback(() => {
     setProjectData(getProjectData());
   }, []);
-  const [gitData, setGitData] = useState(() => getGitData(config.panels.git));
+  const [gitData, setGitData] = useState2(() => getGitData(config.panels.git));
   const refreshGit = useCallback(() => {
     setGitData(getGitData(config.panels.git));
   }, [config.panels.git]);
@@ -2560,15 +2731,22 @@ function DashboardApp({ mode }) {
     }
     return getTestData();
   }, [config.panels.tests.command]);
-  const [testData, setTestData] = useState(() => getTestDataFromConfig());
+  const initialTestData = useMemo(() => getTestDataFromConfig(), [getTestDataFromConfig]);
+  const initialTestsDisabled = !!(initialTestData.error && config.panels.tests.command);
+  const [testsDisabled, setTestsDisabled] = useState2(initialTestsDisabled);
+  const [testData, setTestData] = useState2(initialTestData);
   const refreshTest = useCallback(() => {
-    setTestData(getTestDataFromConfig());
-  }, [getTestDataFromConfig]);
-  const [claudeData, setClaudeData] = useState(() => getClaudeData(cwd, config.panels.claude.maxActivities));
+    const data = getTestDataFromConfig();
+    if (config.panels.tests.command) {
+      setTestsDisabled(!!data.error);
+    }
+    setTestData(data);
+  }, [getTestDataFromConfig, config.panels.tests.command]);
+  const [claudeData, setClaudeData] = useState2(() => getClaudeData(cwd, config.panels.claude.maxActivities));
   const refreshClaude = useCallback(() => {
     setClaudeData(getClaudeData(cwd, config.panels.claude.maxActivities));
   }, [cwd, config.panels.claude.maxActivities]);
-  const [otherSessionsData, setOtherSessionsData] = useState(
+  const [otherSessionsData, setOtherSessionsData] = useState2(
     () => getOtherSessionsData(cwd, { activeThresholdMs: config.panels.other_sessions.activeThreshold })
   );
   const refreshOtherSessions = useCallback(() => {
@@ -2578,7 +2756,7 @@ function DashboardApp({ mode }) {
     () => Object.keys(config.customPanels || {}),
     [config.customPanels]
   );
-  const [customPanelData, setCustomPanelData] = useState(() => {
+  const [customPanelData, setCustomPanelData] = useState2(() => {
     const data = {};
     if (config.customPanels) {
       for (const [name, panelConfig] of Object.entries(config.customPanels)) {
@@ -2614,7 +2792,7 @@ function DashboardApp({ mode }) {
     }
     return countdowns2;
   }, [projectIntervalSeconds, gitIntervalSeconds, claudeIntervalSeconds, otherSessionsIntervalSeconds, config.customPanels]);
-  const [countdowns, setCountdowns] = useState(initialCountdowns);
+  const [countdowns, setCountdowns] = useState2(initialCountdowns);
   const initialVisualStates = useMemo(() => {
     const states = {
       project: { ...DEFAULT_VISUAL_STATE },
@@ -2628,7 +2806,7 @@ function DashboardApp({ mode }) {
     }
     return states;
   }, [customPanelNames]);
-  const [visualStates, setVisualStates] = useState(initialVisualStates);
+  const [visualStates, setVisualStates] = useState2(initialVisualStates);
   const setVisualState = useCallback((panel, update) => {
     setVisualStates((prev) => ({
       ...prev,
@@ -2678,7 +2856,11 @@ function DashboardApp({ mode }) {
     try {
       await new Promise((resolve) => {
         setTimeout(() => {
-          setTestData(getTestDataFromConfig());
+          const data = getTestDataFromConfig();
+          if (config.panels.tests.command) {
+            setTestsDisabled(!!data.error);
+          }
+          setTestData(data);
           resolve();
         }, 0);
       });
@@ -2686,7 +2868,7 @@ function DashboardApp({ mode }) {
       setVisualState("tests", { isRunning: false, justCompleted: true });
       clearFeedback("tests", "justCompleted");
     }
-  }, [getTestDataFromConfig, setVisualState, clearFeedback]);
+  }, [getTestDataFromConfig, setVisualState, clearFeedback, config.panels.tests.command]);
   const refreshClaudeWithFeedback = useCallback(() => {
     setClaudeData(getClaudeData(cwd, config.panels.claude.maxActivities));
     setVisualState("claude", { justRefreshed: true });
@@ -2755,7 +2937,7 @@ function DashboardApp({ mode }) {
     }),
     [config, refreshTestAsync, customPanelActionsAsync]
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (mode !== "watch") return;
     const timers = [];
     if (config.panels.project.enabled && config.panels.project.interval !== null) {
@@ -2821,7 +3003,7 @@ function DashboardApp({ mode }) {
     claudeIntervalSeconds,
     otherSessionsIntervalSeconds
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     if (mode !== "watch") return;
     const tick = setInterval(() => {
       setCountdowns((prev) => {
@@ -2897,7 +3079,7 @@ function DashboardApp({ mode }) {
           }
         ) }, `panel-git-${index}`);
       }
-      if (panelName === "tests" && config.panels.tests.enabled) {
+      if (panelName === "tests" && config.panels.tests.enabled && !testsDisabled) {
         const testsVisual = visualStates.tests || DEFAULT_VISUAL_STATE;
         return /* @__PURE__ */ jsx8(Box8, { marginTop: isFirst ? 0 : 1, children: /* @__PURE__ */ jsx8(
           TestPanel,
@@ -2961,7 +3143,7 @@ function DashboardApp({ mode }) {
       }
       return null;
     }),
-    mode === "watch" && /* @__PURE__ */ jsx8(Box8, { marginTop: 1, width, children: /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: statusBarItems.map((item, index) => /* @__PURE__ */ jsxs8(React.Fragment, { children: [
+    mode === "watch" && /* @__PURE__ */ jsx8(Box8, { marginTop: 1, width, children: /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: statusBarItems.map((item, index) => /* @__PURE__ */ jsxs8(React2.Fragment, { children: [
       index > 0 && " \xB7 ",
       /* @__PURE__ */ jsxs8(Text8, { color: "cyan", children: [
         item.split(":")[0],
@@ -3025,30 +3207,124 @@ function parseArgs(args) {
 
 // src/commands/init.ts
 import {
-  existsSync as nodeExistsSync5,
+  existsSync as nodeExistsSync6,
   mkdirSync as nodeMkdirSync,
   writeFileSync as nodeWriteFileSync,
-  readFileSync as nodeReadFileSync7,
+  readFileSync as nodeReadFileSync8,
   appendFileSync as nodeAppendFileSync
 } from "fs";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import { dirname as dirname2, join as join5 } from "path";
 import { homedir as homedir3 } from "os";
+
+// src/data/detectTestFramework.ts
+import {
+  existsSync as nodeExistsSync5,
+  readFileSync as nodeReadFileSync7
+} from "fs";
 var fs4 = {
   existsSync: nodeExistsSync5,
+  readFileSync: (path) => nodeReadFileSync7(path, "utf-8")
+};
+var FRAMEWORK_COMMANDS = {
+  vitest: "npx vitest run --reporter=json",
+  jest: "npx jest --json",
+  mocha: "npx mocha --reporter=json",
+  pytest: "pytest --json-report --json-report-file=.agenthud/test-results.json"
+};
+var JS_FRAMEWORKS = ["vitest", "jest", "mocha"];
+function detectTestFramework() {
+  const jsFramework = detectJsFramework();
+  if (jsFramework) {
+    return jsFramework;
+  }
+  const pythonFramework = detectPythonFramework();
+  if (pythonFramework) {
+    return pythonFramework;
+  }
+  return null;
+}
+function detectJsFramework() {
+  if (!fs4.existsSync("package.json")) {
+    return null;
+  }
+  let packageJson;
+  try {
+    const content = fs4.readFileSync("package.json");
+    packageJson = JSON.parse(content);
+  } catch {
+    return null;
+  }
+  const allDeps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  for (const framework of JS_FRAMEWORKS) {
+    if (allDeps[framework]) {
+      return {
+        framework,
+        command: FRAMEWORK_COMMANDS[framework]
+      };
+    }
+  }
+  return null;
+}
+function detectPythonFramework() {
+  const pytestIndicators = ["pytest.ini", "conftest.py"];
+  for (const file of pytestIndicators) {
+    if (fs4.existsSync(file)) {
+      return {
+        framework: "pytest",
+        command: FRAMEWORK_COMMANDS.pytest
+      };
+    }
+  }
+  if (fs4.existsSync("pyproject.toml")) {
+    try {
+      const content = fs4.readFileSync("pyproject.toml");
+      if (content.includes("[tool.pytest") || content.includes("[tool.pytest.ini_options]")) {
+        return {
+          framework: "pytest",
+          command: FRAMEWORK_COMMANDS.pytest
+        };
+      }
+    } catch {
+    }
+  }
+  const requirementsFiles = ["requirements.txt", "requirements-dev.txt"];
+  for (const file of requirementsFiles) {
+    if (fs4.existsSync(file)) {
+      try {
+        const content = fs4.readFileSync(file);
+        if (content.includes("pytest")) {
+          return {
+            framework: "pytest",
+            command: FRAMEWORK_COMMANDS.pytest
+          };
+        }
+      } catch {
+      }
+    }
+  }
+  return null;
+}
+
+// src/commands/init.ts
+var fs5 = {
+  existsSync: nodeExistsSync6,
   mkdirSync: nodeMkdirSync,
   writeFileSync: nodeWriteFileSync,
-  readFileSync: (path) => nodeReadFileSync7(path, "utf-8"),
+  readFileSync: (path) => nodeReadFileSync8(path, "utf-8"),
   appendFileSync: nodeAppendFileSync
 };
 var __filename2 = fileURLToPath2(import.meta.url);
 var __dirname2 = dirname2(__filename2);
 function getDefaultConfig2() {
   let templatePath = join5(__dirname2, "templates", "config.yaml");
-  if (!nodeExistsSync5(templatePath)) {
+  if (!nodeExistsSync6(templatePath)) {
     templatePath = join5(__dirname2, "..", "templates", "config.yaml");
   }
-  return nodeReadFileSync7(templatePath, "utf-8");
+  return nodeReadFileSync8(templatePath, "utf-8");
 }
 function getClaudeSessionPath2(projectPath) {
   const encoded = projectPath.replace(/[/\\]/g, "-");
@@ -3060,41 +3336,57 @@ function runInit(cwd = process.cwd()) {
     skipped: [],
     warnings: []
   };
-  if (!fs4.existsSync(".agenthud")) {
-    fs4.mkdirSync(".agenthud", { recursive: true });
+  if (!fs5.existsSync(".agenthud")) {
+    fs5.mkdirSync(".agenthud", { recursive: true });
     result.created.push(".agenthud/");
   } else {
     result.skipped.push(".agenthud/");
   }
-  if (!fs4.existsSync(".agenthud/tests")) {
-    fs4.mkdirSync(".agenthud/tests", { recursive: true });
+  if (!fs5.existsSync(".agenthud/tests")) {
+    fs5.mkdirSync(".agenthud/tests", { recursive: true });
     result.created.push(".agenthud/tests/");
   } else {
     result.skipped.push(".agenthud/tests/");
   }
-  if (!fs4.existsSync(".agenthud/config.yaml")) {
-    fs4.writeFileSync(".agenthud/config.yaml", getDefaultConfig2());
+  const testFramework = detectTestFramework();
+  if (testFramework) {
+    result.detectedTestFramework = testFramework.framework;
+  }
+  if (!fs5.existsSync(".agenthud/config.yaml")) {
+    let configContent = getDefaultConfig2();
+    if (testFramework) {
+      configContent = configContent.replace(
+        /command: npx vitest run --reporter=json/,
+        `command: ${testFramework.command}`
+      );
+    } else {
+      configContent = configContent.replace(
+        /command: npx vitest run --reporter=json/,
+        "# command: (auto-detect failed - configure manually)"
+      );
+    }
+    fs5.writeFileSync(".agenthud/config.yaml", configContent);
     result.created.push(".agenthud/config.yaml");
   } else {
     result.skipped.push(".agenthud/config.yaml");
   }
-  if (!fs4.existsSync(".gitignore")) {
-    fs4.writeFileSync(".gitignore", ".agenthud/\n");
+  if (!fs5.existsSync(".gitignore")) {
+    fs5.writeFileSync(".gitignore", ".agenthud/\n");
     result.created.push(".gitignore");
   } else {
-    const content = fs4.readFileSync(".gitignore");
+    const content = fs5.readFileSync(".gitignore");
     if (!content.includes(".agenthud/")) {
-      fs4.appendFileSync(".gitignore", "\n.agenthud/\n");
+      fs5.appendFileSync(".gitignore", "\n.agenthud/\n");
       result.created.push(".gitignore");
     } else {
       result.skipped.push(".gitignore");
     }
   }
-  if (!fs4.existsSync(".git")) {
+  if (!fs5.existsSync(".git")) {
     result.warnings.push("Not a git repository - Git panel will show limited info");
   }
   const claudeSessionPath = getClaudeSessionPath2(cwd);
-  if (!fs4.existsSync(claudeSessionPath)) {
+  if (!fs5.existsSync(claudeSessionPath)) {
     result.warnings.push("No Claude session found - start Claude to see activity");
   }
   return result;
@@ -3161,7 +3453,7 @@ if (options.mode === "watch") {
   clearScreen();
 }
 var { waitUntilExit } = render(
-  React2.createElement(App, { mode: options.mode, agentDirExists })
+  React3.createElement(App, { mode: options.mode, agentDirExists })
 );
 if (options.mode === "once") {
   setTimeout(() => process.exit(0), 100);

package/dist/templates/config.yaml

@@ -1,6 +1,6 @@
 # agenthud configuration
 
-width: 80  # 50~120 사이
+width: 100  # between 50~120 
 
 panels:
   claude:
@@ -19,6 +19,7 @@ panels:
   tests:
     enabled: true
     interval: manual
+    # command is auto-detected from: vitest, jest, mocha, pytest
     command: npx vitest run --reporter=json
 
   project:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenthud",
-  "version": "0.5.16",
+  "version": "0.6.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",