agenthud 0.5.0 → 0.5.2

package/dist/index.js

@@ -7,13 +7,16 @@ import { existsSync } from "fs";
 
 // src/ui/App.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Box as Box7, Text as Text7, useApp, useInput } from "ink";
+import { Box as Box7, Text as Text7, useApp, useInput, useStdout } from "ink";
 
 // src/ui/GitPanel.tsx
 import { Box, Text } from "ink";
 
 // src/ui/constants.ts
 var DEFAULT_PANEL_WIDTH = 70;
+var MIN_TERMINAL_WIDTH = 50;
+var MAX_TERMINAL_WIDTH = 120;
+var DEFAULT_FALLBACK_WIDTH = 80;
 var CONTENT_WIDTH = DEFAULT_PANEL_WIDTH - 4;
 var INNER_WIDTH = DEFAULT_PANEL_WIDTH - 2;
 function getContentWidth(panelWidth) {
@@ -447,6 +450,21 @@ function ProjectPanel({
 // src/ui/ClaudePanel.tsx
 import { Box as Box4, Text as Text4 } from "ink";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function getActivityStyle(activity) {
+  if (activity.type === "user") {
+    return { color: "white", dimColor: false };
+  }
+  if (activity.type === "response") {
+    return { color: "green", dimColor: false };
+  }
+  if (activity.type === "tool") {
+    if (activity.label === "Bash") {
+      return { color: "gray", dimColor: false };
+    }
+    return { dimColor: true };
+  }
+  return { dimColor: true };
+}
 function formatCountdown3(seconds) {
   if (seconds == null) return "";
   const padded = String(seconds).padStart(2, " ");
@@ -471,19 +489,20 @@ function formatActivityTime(date) {
   const seconds = String(date.getSeconds()).padStart(2, "0");
   return `${hours}:${minutes}:${seconds}`;
 }
-function formatActivityLine(activity, maxWidth) {
+function formatActivityParts(activity, maxWidth) {
   const time = formatActivityTime(activity.timestamp);
   const icon = activity.icon;
   const label = activity.label;
   const detail = activity.detail;
-  const fixedPrefix = `[${time}] `;
-  const fixedPrefixWidth = fixedPrefix.length;
-  const iconWidth = 2;
+  const timestamp = `[${time}] `;
+  const timestampWidth = timestamp.length;
+  const iconWidth = getDisplayWidth(icon);
   const labelWidth = label.length;
   const separatorWidth = detail ? 2 : 0;
-  const prefixDisplayWidth = fixedPrefixWidth + iconWidth + 1 + labelWidth + separatorWidth;
+  const contentPrefixWidth = iconWidth + 1 + labelWidth + separatorWidth;
+  const totalPrefixWidth = timestampWidth + contentPrefixWidth;
   if (detail) {
-    const availableWidth = maxWidth - prefixDisplayWidth;
+    const availableWidth = maxWidth - totalPrefixWidth;
     let truncatedDetail = detail;
     let detailDisplayWidth = getDisplayWidth(detail);
     if (detailDisplayWidth > availableWidth) {
@@ -501,13 +520,13 @@ function formatActivityLine(activity, maxWidth) {
       }
       detailDisplayWidth = currentWidth;
     }
-    const text2 = `${fixedPrefix}${icon} ${label}: ${truncatedDetail}`;
-    const displayWidth2 = prefixDisplayWidth + detailDisplayWidth;
-    return { text: text2, displayWidth: displayWidth2 };
+    const content2 = `${icon} ${label}: ${truncatedDetail}`;
+    const displayWidth2 = totalPrefixWidth + detailDisplayWidth;
+    return { timestamp, content: content2, displayWidth: displayWidth2 };
   }
-  const text = `${fixedPrefix}${icon} ${label}`;
-  const displayWidth = prefixDisplayWidth;
-  return { text, displayWidth };
+  const content = `${icon} ${label}`;
+  const displayWidth = totalPrefixWidth;
+  return { timestamp, content, displayWidth };
 }
 function ClaudePanel({
   data,
@@ -569,13 +588,15 @@ function ClaudePanel({
   const lines = [];
   for (let i = 0; i < state.activities.length; i++) {
     const activity = state.activities[i];
-    const { text: lineText, displayWidth } = formatActivityLine(activity, contentWidth);
+    const { timestamp, content, displayWidth } = formatActivityParts(activity, contentWidth);
     const padding = Math.max(0, contentWidth - displayWidth);
+    const style = getActivityStyle(activity);
     lines.push(
       /* @__PURE__ */ jsxs4(Text4, { children: [
         BOX.v,
         " ",
-        lineText,
+        /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: timestamp }),
+        /* @__PURE__ */ jsx4(Text4, { color: style.color, dimColor: style.dimColor, children: content }),
         " ".repeat(padding),
         BOX.v
       ] }, `activity-${i}`)
@@ -2073,9 +2094,32 @@ function formatRelativeTime2(timestamp) {
 function WelcomeApp() {
   return /* @__PURE__ */ jsx7(WelcomePanel, {});
 }
+function getClampedWidth(columns) {
+  if (!columns || columns <= 0) {
+    return DEFAULT_FALLBACK_WIDTH;
+  }
+  return Math.min(Math.max(columns, MIN_TERMINAL_WIDTH), MAX_TERMINAL_WIDTH);
+}
 function DashboardApp({ mode }) {
   const { exit } = useApp();
+  const { stdout } = useStdout();
   const { config, warnings } = useMemo(() => parseConfig(), []);
+  const [width, setWidth] = useState(() => getClampedWidth(stdout?.columns));
+  useEffect(() => {
+    const newWidth = getClampedWidth(stdout?.columns);
+    if (newWidth !== width) {
+      setWidth(newWidth);
+    }
+  }, [stdout?.columns, width]);
+  useEffect(() => {
+    const handleResize = () => {
+      setWidth(getClampedWidth(stdout?.columns));
+    };
+    stdout?.on("resize", handleResize);
+    return () => {
+      stdout?.off("resize", handleResize);
+    };
+  }, [stdout]);
   const projectIntervalSeconds = config.panels.project.interval ? config.panels.project.interval / 1e3 : null;
   const gitIntervalSeconds = config.panels.git.interval ? config.panels.git.interval / 1e3 : null;
   const claudeIntervalSeconds = config.panels.claude.interval ? config.panels.claude.interval / 1e3 : null;
@@ -2380,7 +2424,7 @@ function DashboardApp({ mode }) {
           {
             data: projectData,
             countdown: mode === "watch" ? countdowns.project : null,
-            width: config.width,
+            width,
             justRefreshed: projectVisual.justRefreshed
           }
         ) }, `panel-project-${index}`);
@@ -2395,7 +2439,7 @@ function DashboardApp({ mode }) {
             stats: gitData.stats,
             uncommitted: gitData.uncommitted,
             countdown: mode === "watch" ? countdowns.git : null,
-            width: config.width,
+            width,
             isRunning: gitVisual.isRunning,
             justRefreshed: gitVisual.justRefreshed
           }
@@ -2410,7 +2454,7 @@ function DashboardApp({ mode }) {
             isOutdated: testData.isOutdated,
             commitsBehind: testData.commitsBehind,
             error: testData.error,
-            width: config.width,
+            width,
             isRunning: testsVisual.isRunning,
             justCompleted: testsVisual.justCompleted
           }
@@ -2423,7 +2467,7 @@ function DashboardApp({ mode }) {
           {
             data: claudeData,
             countdown: mode === "watch" ? countdowns.claude : null,
-            width: config.width,
+            width,
             justRefreshed: claudeVisual.justRefreshed
           }
         ) }, `panel-claude-${index}`);
@@ -2444,7 +2488,7 @@ function DashboardApp({ mode }) {
             countdown,
             relativeTime,
             error: result.error,
-            width: config.width,
+            width,
             isRunning: customVisual.isRunning,
             justRefreshed: customVisual.justRefreshed
           }
@@ -2452,7 +2496,7 @@ function DashboardApp({ mode }) {
       }
       return null;
     }),
-    mode === "watch" && /* @__PURE__ */ jsx7(Box7, { marginTop: 1, width: config.width, children: /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: statusBarItems.map((item, index) => /* @__PURE__ */ jsxs7(React.Fragment, { children: [
+    mode === "watch" && /* @__PURE__ */ jsx7(Box7, { marginTop: 1, width, children: /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: statusBarItems.map((item, index) => /* @__PURE__ */ jsxs7(React.Fragment, { children: [
       index > 0 && " \xB7 ",
       /* @__PURE__ */ jsxs7(Text7, { color: "cyan", children: [
         item.split(":")[0],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenthud",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "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",