agenthud 0.5.2 → 0.5.4

package/README.md

@@ -3,37 +3,25 @@
 Terminal dashboard for AI agent development.
 
 ```
-┌─ Git ────────────────────────────────────────────────────┐
-│ main · +1068 -166 · 12 commits · 23 files                │
-│ • 1d00dc0 refactor: rename project from agent-dashboa... │
-│ • 3529727 fix: Decisions separator line width now mat... │
-│ • d7652c4 fix: use proper box character for Decisions... │
-│ • 1594987 feat: move progress bar to Plan title line     │
-│ • d5a9f4d feat: improve Plan panel and Tests panel di... │
-└──────────────────────────────────────────────────────────┘
-
-┌─ Plan ─────────────────────────────────── 7/10 ███████░░░┐
-│ Build agenthud CLI tool                                  │
-│ ✓ Set up project (npm, TypeScript, Vitest)               │
-│ ✓ Implement git data collection module                   │
-│ ✓ Create GitPanel UI component                           │
-│ ✓ Add CLI entry point with watch mode                    │
-│ ✓ Fix getTodayStats bug                                  │
-│ ○ Add --dir flag for project directory                   │
-│ ○ Add --json flag for JSON output                        │
-│ ✓ Add PlanPanel component                                │
-│ ✓ Add TestPanel component                                │
-│ ○ Publish to npm                                         │
-├─ Decisions ──────────────────────────────────────────────┤
-│ • Use dependency injection for git module testing        │
-│ • Use Ink for terminal UI                                │
-│ • Use git log --numstat for stats instead of git diff... │
-└──────────────────────────────────────────────────────────┘
-
-┌─ Tests ──────────────────────────────────────────────────┐
-│ ⚠ Outdated (1 commit behind)                             │
-│ ✓ 70 passed · 3529727 · 40m ago                          │
-└──────────────────────────────────────────────────────────┘
+┌─ Claude ─────────────────────────────────────────────────────┐
+│ [10:30:00] > User: Show me the project structure             │
+│ [10:30:05] * Glob: src/**/*.ts                               │
+│ [10:30:10] ○ Read: package.json                              │
+│ [10:30:15] < Response: Here's the project structure...       │
+│ [10:30:20] $ Bash: npm run test                              │
+│ [10:30:25] ~ Edit: src/index.ts                              │
+└──────────────────────────────────────────────────────────────┘
+
+┌─ Git ────────────────────────────────────────────────────────┐
+│ main · +1068 -166 · 12 commits · 23 files                    │
+│ • 1d00dc0 refactor: rename project from agent-dashboa...     │
+│ • 3529727 fix: Decisions separator line width now mat...     │
+│ • d7652c4 fix: use proper box character for Decisions...     │
+└──────────────────────────────────────────────────────────────┘
+
+┌─ Tests ──────────────────────────────────────────────────────┐
+│ ✓ 301 passed · 3fd7988                                       │
+└──────────────────────────────────────────────────────────────┘
 ```
 
 ## Install
@@ -43,17 +31,44 @@ npx agenthud
 
 ## Features
 
+- **Claude**: Real-time Claude Code session monitoring
 - **Git**: Branch, commits, line changes
-- **Plan**: Progress, decisions from `.agenthud/plan.json`
 - **Tests**: Results with outdated detection
+- **Project**: Package info, stack detection
+
+## Claude Panel Icons
+
+| Symbol | Type |
+|--------|------|
+| `>` | User input |
+| `<` | Response |
+| `~` | Edit/Write |
+| `○` | Read |
+| `$` | Bash |
+| `*` | Glob/Grep |
+| `@` | Web |
+| `▶` | Task |
+| `?` | Question |
+
+## Configuration
 
-## Setup
+Create `.agenthud.yaml` in your project root:
 
-Add to your `CLAUDE.md`:
-```markdown
-Maintain `.agenthud/` directory:
-- Update `plan.json` when plan changes
-- Update `decisions.json` for key decisions
+```yaml
+panels:
+  git:
+    enabled: true
+    interval: 30s
+  claude:
+    enabled: true
+    interval: 5s
+    max_activities: 20
+  tests:
+    enabled: true
+    interval: manual
+  project:
+    enabled: true
+    interval: 60s
 ```
 
 ## Keyboard

package/dist/index.js

@@ -13,6 +13,7 @@ import { Box as Box7, Text as Text7, useApp, useInput, useStdout } from "ink";
 import { Box, Text } from "ink";
 
 // src/ui/constants.ts
+import stringWidth from "string-width";
 var DEFAULT_PANEL_WIDTH = 70;
 var MIN_TERMINAL_WIDTH = 50;
 var MAX_TERMINAL_WIDTH = 120;
@@ -57,35 +58,7 @@ function truncate(text, maxLength) {
   if (text.length <= maxLength) return text;
   return text.slice(0, maxLength - 3) + "...";
 }
-function getDisplayWidth(str) {
-  let width = 0;
-  for (const char of str) {
-    const code = char.codePointAt(0) || 0;
-    if (code >= 127744 && code <= 129535 || // Misc symbols, emoticons, etc.
-    code >= 9728 && code <= 9983 || // Misc symbols
-    code >= 9984 && code <= 10175 || // Dingbats (includes ✏)
-    code >= 128512 && code <= 128591 || // Emoticons
-    code >= 128640 && code <= 128767) {
-      width += 2;
-    } else if (code === 65039) {
-      continue;
-    } else if (
-      // CJK characters (Korean, Chinese, Japanese) - 2 wide
-      code >= 44032 && code <= 55215 || // Korean Hangul syllables
-      code >= 4352 && code <= 4607 || // Korean Hangul Jamo
-      code >= 12592 && code <= 12687 || // Korean Hangul Compatibility Jamo
-      code >= 19968 && code <= 40959 || // CJK Unified Ideographs
-      code >= 13312 && code <= 19903 || // CJK Extension A
-      code >= 12288 && code <= 12351 || // CJK Symbols
-      code >= 65280 && code <= 65519
-    ) {
-      width += 2;
-    } else {
-      width += 1;
-    }
-  }
-  return width;
-}
+var getDisplayWidth = stringWidth;
 
 // src/ui/GitPanel.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -520,13 +493,13 @@ function formatActivityParts(activity, maxWidth) {
       }
       detailDisplayWidth = currentWidth;
     }
-    const content2 = `${icon} ${label}: ${truncatedDetail}`;
+    const labelContent2 = `${label}: ${truncatedDetail}`;
     const displayWidth2 = totalPrefixWidth + detailDisplayWidth;
-    return { timestamp, content: content2, displayWidth: displayWidth2 };
+    return { timestamp, icon, labelContent: labelContent2, displayWidth: displayWidth2 };
   }
-  const content = `${icon} ${label}`;
+  const labelContent = label;
   const displayWidth = totalPrefixWidth;
-  return { timestamp, content, displayWidth };
+  return { timestamp, icon, labelContent, displayWidth };
 }
 function ClaudePanel({
   data,
@@ -588,17 +561,21 @@ function ClaudePanel({
   const lines = [];
   for (let i = 0; i < state.activities.length; i++) {
     const activity = state.activities[i];
-    const { timestamp, content, displayWidth } = formatActivityParts(activity, contentWidth);
+    const { timestamp, icon, labelContent, displayWidth } = formatActivityParts(activity, contentWidth);
     const padding = Math.max(0, contentWidth - displayWidth);
     const style = getActivityStyle(activity);
+    const clearEOL = "\x1B[K";
     lines.push(
       /* @__PURE__ */ jsxs4(Text4, { children: [
         BOX.v,
         " ",
         /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: timestamp }),
-        /* @__PURE__ */ jsx4(Text4, { color: style.color, dimColor: style.dimColor, children: content }),
+        /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: icon }),
+        " ",
+        /* @__PURE__ */ jsx4(Text4, { color: style.color, dimColor: style.dimColor, children: labelContent }),
         " ".repeat(padding),
-        BOX.v
+        BOX.v,
+        clearEOL
       ] }, `activity-${i}`)
     );
   }
@@ -1331,6 +1308,29 @@ import {
 } from "fs";
 import { homedir } from "os";
 import { join as join2, basename as basename2 } from "path";
+
+// src/types/index.ts
+var ICONS = {
+  // Activity types
+  User: ">",
+  Response: "<",
+  // Tools
+  Edit: "~",
+  Write: "~",
+  Read: "\u25CB",
+  Bash: "$",
+  Glob: "*",
+  Grep: "*",
+  WebFetch: "@",
+  WebSearch: "@",
+  Task: "\u25B6",
+  TodoWrite: "~",
+  AskUserQuestion: "?",
+  // Fallback
+  Default: "$"
+};
+
+// src/data/claude.ts
 var fs = {
   existsSync: nodeExistsSync2,
   readFileSync: (path) => nodeReadFileSync3(path, "utf-8"),
@@ -1341,20 +1341,6 @@ var FIVE_MINUTES_MS = 5 * 60 * 1e3;
 var THIRTY_SECONDS_MS = 30 * 1e3;
 var MAX_LINES_TO_SCAN = 200;
 var DEFAULT_MAX_ACTIVITIES = 10;
-var MAX_DETAIL_LENGTH = 45;
-var TOOL_ICONS = {
-  Edit: "\u{1F4DD}",
-  Write: "\u{1F4DD}",
-  Read: "\u{1F4D6}",
-  Bash: "\u{1F527}",
-  Glob: "\u{1F50D}",
-  Grep: "\u{1F50D}",
-  WebFetch: "\u{1F310}",
-  WebSearch: "\u{1F310}",
-  Task: "\u{1F4CB}",
-  TodoWrite: "\u{1F4DD}",
-  AskUserQuestion: "\u2753"
-};
 function getClaudeSessionPath(projectPath) {
   const encoded = projectPath.replace(/\//g, "-");
   return join2(homedir(), ".claude", "projects", encoded);
@@ -1384,46 +1370,19 @@ function findActiveSession(sessionDir) {
   }
   return null;
 }
-function getDisplayWidth2(str) {
-  let width = 0;
-  for (const char of str) {
-    const code = char.codePointAt(0) || 0;
-    if (code >= 127744 && code <= 129535 || code >= 9728 && code <= 9983 || code >= 9984 && code <= 10175 || code >= 128512 && code <= 128591 || code >= 128640 && code <= 128767 || code >= 44032 && code <= 55215 || code >= 4352 && code <= 4607 || code >= 12592 && code <= 12687 || code >= 19968 && code <= 40959 || code >= 13312 && code <= 19903 || code >= 12288 && code <= 12351 || code >= 65280 && code <= 65519) {
-      width += 2;
-    } else if (code !== 65039) {
-      width += 1;
-    }
-  }
-  return width;
-}
-function truncate2(str, maxDisplayWidth) {
-  const currentWidth = getDisplayWidth2(str);
-  if (currentWidth <= maxDisplayWidth) return str;
-  let result = "";
-  let width = 0;
-  for (const char of str) {
-    const charWidth = getDisplayWidth2(char);
-    if (width + charWidth > maxDisplayWidth - 3) {
-      return result + "...";
-    }
-    result += char;
-    width += charWidth;
-  }
-  return result;
-}
 function getToolDetail(toolName, input) {
   if (!input) return "";
   if (input.command) {
-    return truncate2(input.command, MAX_DETAIL_LENGTH);
+    return input.command.replace(/\n/g, " ");
   }
   if (input.file_path) {
     return basename2(input.file_path);
   }
   if (input.pattern) {
-    return truncate2(input.pattern, MAX_DETAIL_LENGTH);
+    return input.pattern;
   }
   if (input.query) {
-    return truncate2(input.query, MAX_DETAIL_LENGTH);
+    return input.query;
   }
   return "";
 }
@@ -1475,9 +1434,9 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
           activities.push({
             timestamp: lastTimestamp || /* @__PURE__ */ new Date(),
             type: "user",
-            icon: "\u{1F464}",
+            icon: ICONS.User,
             label: "User",
-            detail: truncate2(userText.replace(/\n/g, " "), MAX_DETAIL_LENGTH)
+            detail: userText.replace(/\n/g, " ")
           });
         }
         lastType = "user";
@@ -1492,7 +1451,7 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
           for (const block of messageContent) {
             if (block.type === "tool_use") {
               const toolName = block.name || "Tool";
-              const icon = TOOL_ICONS[toolName] || "\u{1F527}";
+              const icon = ICONS[toolName] || ICONS.Default;
               const detail = getToolDetail(toolName, block.input);
               activities.push({
                 timestamp: lastTimestamp || /* @__PURE__ */ new Date(),
@@ -1507,9 +1466,9 @@ function parseSessionState(sessionFile, maxActivities = DEFAULT_MAX_ACTIVITIES)
                 activities.push({
                   timestamp: lastTimestamp || /* @__PURE__ */ new Date(),
                   type: "response",
-                  icon: "\u{1F916}",
+                  icon: ICONS.Response,
                   label: "Response",
-                  detail: truncate2(block.text.replace(/\n/g, " "), MAX_DETAIL_LENGTH)
+                  detail: block.text.replace(/\n/g, " ")
                 });
                 lastType = "response";
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenthud",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "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",
@@ -52,6 +52,7 @@
   "dependencies": {
     "ink": "^6.6.0",
     "react": "^19.2.3",
+    "string-width": "^8.1.0",
     "yaml": "^2.8.2"
   }
 }