agenthud 0.9.4 → 0.10.0

package/README.md

@@ -43,8 +43,7 @@ AgentHUD's TUI splits the screen into a project tree and an activity viewer:
 │ [10:23] ~ Edit  src/ui/App.tsx                           │
 │ [10:23] $ Bash  npm test                                 │
 │ [10:23] < Response  Tests passed successfully            │
-│ [10:25] ◆ abc1234  feat: fix auth callback               │
-│ ›                                                        │
+│ [10:25] ⠧ Edit  src/auth/oauth.ts  ← bold + spinner = live │
 └──────────────────────────────────────────────────────────┘
 ```
 
@@ -59,7 +58,7 @@ AgentHUD's TUI splits the screen into a project tree and an activity viewer:
 
 **Activity viewer (bottom pane)**
 - Real-time feed for the selected session: file reads, edits, bash, responses, thinking, git commits. Newest at the bottom, like `tail -f`.
-- A `›` slides left → right along the bottom row while the viewer is in LIVE mode — visible proof the feed is alive. Hidden when paused (scrolled into history) or when the session has no activity yet.
+- The **newest visible row is rendered "alive"** while in LIVE mode: its icon is replaced with a spinning glyph and the text turns bold. When a new activity arrives, the spinner moves to the new bottom row. Hidden when paused or empty.
 - Press `f` to cycle through filter presets (configurable).
 - Press `↵` on any row to open a scrollable detail view; on a commit row this shows `git show --stat --patch`.
 
@@ -106,10 +105,13 @@ Full reference is also available inside the app — press `?`.
 | `Tab` | Switch focus to activity viewer |
 | `PgUp` / `Ctrl+B` | Page up |
 | `PgDn` / `Ctrl+F` | Page down |
+| `t` | Track — auto-follow the newest live sub-agent (any nav key turns it off) |
 | `r` | Refresh now |
 | `?` | Help |
 | `q` | Quit |
 
+When tracking is on, the tree panel's title shows `[LIVE ⠧]` and the status bar replaces `t: track` with `TRK ●`. Any explicit selection-changing key (`↑/k`, `↓/j`, `PgUp/PgDn`, `↵`, `h`, or `t` again) turns tracking off.
+
 #### Activity viewer focus
 
 | Key | Action |

package/dist/index.js

@@ -15,4 +15,4 @@ Error: Node.js ${MIN_NODE_VERSION}+ is required (current: ${process.version})
   process.exit(1);
 }
 if (!process.env.NODE_ENV) process.env.NODE_ENV = "production";
-import("./main-26QL33AJ.js");
+import("./main-HPL3AG6B.js");

package/dist/{main-26QL33AJ.js → main-HPL3AG6B.js}

@@ -685,20 +685,11 @@ function parseGitCommits(projectPath, startDate, endDate) {
 // src/data/sessionHistory.ts
 import { existsSync as existsSync2, readFileSync as readFileSync3 } from "fs";
 
-// src/data/activityParser.ts
+// src/data/toolDetails.ts
 import { basename } from "path";
 function stripAnsi(text) {
   return text.replace(/\x1b\[[0-9;]*m/g, "");
 }
-function parseModelName(modelId) {
-  const opusMatch = modelId.match(/claude-opus-(\d+)-(\d+)/);
-  if (opusMatch) return `opus-${opusMatch[1]}.${opusMatch[2]}`;
-  const sonnetMatch = modelId.match(/claude-sonnet-(\d+)/);
-  if (sonnetMatch) return `sonnet-${sonnetMatch[1]}`;
-  const haikuMatch = modelId.match(/claude-(\d+)-(\d+)-haiku/);
-  if (haikuMatch) return `haiku-${haikuMatch[1]}.${haikuMatch[2]}`;
-  return modelId.replace(/-\d{8}$/, "");
-}
 function getToolDetail(_toolName, input) {
   if (!input) return "";
   if (input.command) return stripAnsi(input.command);
@@ -708,11 +699,128 @@ function getToolDetail(_toolName, input) {
   if (input.description) return stripAnsi(input.description);
   return "";
 }
+function rangeStr(start, lines) {
+  return `L${start}-${start + Math.max(lines, 1) - 1}`;
+}
+function patchSpan(hunks) {
+  if (hunks.length === 0) return null;
+  const start = Math.min(...hunks.map((h) => h.newStart));
+  const end = Math.max(
+    ...hunks.map((h) => h.newStart + Math.max(h.newLines, 1) - 1)
+  );
+  return `L${start}-${end}`;
+}
+function countChanges(hunks) {
+  let add = 0;
+  let del = 0;
+  for (const h of hunks) {
+    for (const line of h.lines ?? []) {
+      if (line.startsWith("+")) add++;
+      else if (line.startsWith("-")) del++;
+    }
+  }
+  const parts = [];
+  if (add > 0) parts.push(`+${add}`);
+  if (del > 0) parts.push(`-${del}`);
+  return parts.join(" ");
+}
+function joinParts(...parts) {
+  return parts.filter((p) => !!p).join(" ");
+}
+function summarizeToolDetail(name, input, result) {
+  const file = input?.file_path ? basename(input.file_path) : "";
+  if (name === "Edit" || name === "Write") {
+    const hunks = result?.structuredPatch;
+    if (hunks && hunks.length > 0) {
+      return joinParts(file, patchSpan(hunks), countChanges(hunks));
+    }
+    if (name === "Write") {
+      const content = result?.content ?? input?.content;
+      if (content) {
+        const n = content.split("\n").length - (content.endsWith("\n") ? 1 : 0);
+        return joinParts(file, rangeStr(1, n), `+${n}`);
+      }
+    }
+    return file;
+  }
+  if (name === "Read") {
+    const f = result?.file;
+    if (typeof f?.startLine === "number" && typeof f?.numLines === "number") {
+      return joinParts(file, rangeStr(f.startLine, f.numLines));
+    }
+    if (typeof input?.offset === "number" && typeof input?.limit === "number") {
+      return joinParts(file, rangeStr(input.offset, input.limit));
+    }
+    return file;
+  }
+  if (name === "TaskUpdate") {
+    const id = input?.taskId ?? result?.taskId;
+    const idStr = id ? `#${id}` : "";
+    const sc = result?.statusChange;
+    if (sc?.from && sc?.to) return joinParts(idStr, `${sc.from}\u2192${sc.to}`);
+    if (result?.updatedFields?.length) {
+      return joinParts(idStr, result.updatedFields.join(", "));
+    }
+    if (input?.status) return joinParts(idStr, input.status);
+    return idStr;
+  }
+  if (name === "TaskCreate") {
+    return input?.subject ?? "";
+  }
+  return getToolDetail(name, input);
+}
+function buildToolDetailBody(name, input, result) {
+  if (name === "Write") {
+    const content = result?.content ?? input?.content;
+    if (content) return { text: content, kind: "code" };
+  }
+  if (name === "Edit" || name === "Write") {
+    const hunks = result?.structuredPatch;
+    if (hunks && hunks.length > 0) {
+      const text = hunks.map(
+        (h) => `@@ -${h.oldStart},${h.oldLines} +${h.newStart},${h.newLines} @@
+${(h.lines ?? []).join("\n")}`
+      ).join("\n");
+      return { text, kind: "diff" };
+    }
+  }
+  return null;
+}
+
+// src/data/activityParser.ts
+function parseModelName(modelId) {
+  const opusMatch = modelId.match(/claude-opus-(\d+)-(\d+)/);
+  if (opusMatch) return `opus-${opusMatch[1]}.${opusMatch[2]}`;
+  const sonnetMatch = modelId.match(/claude-sonnet-(\d+)/);
+  if (sonnetMatch) return `sonnet-${sonnetMatch[1]}`;
+  const haikuMatch = modelId.match(/claude-(\d+)-(\d+)-haiku/);
+  if (haikuMatch) return `haiku-${haikuMatch[1]}.${haikuMatch[2]}`;
+  return modelId.replace(/-\d{8}$/, "");
+}
 function parseActivitiesFromLines(lines) {
   const activities = [];
   let tokenCount = 0;
   let modelName = null;
   let sessionStartTime = null;
+  const resultsById = /* @__PURE__ */ new Map();
+  for (const line of lines) {
+    let entry;
+    try {
+      entry = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    if (entry.type !== "user") continue;
+    const tur = entry.toolUseResult;
+    if (!tur || typeof tur !== "object") continue;
+    const content = entry.message?.content;
+    if (!Array.isArray(content)) continue;
+    for (const b of content) {
+      if (b?.type === "tool_result" && typeof b.tool_use_id === "string") {
+        resultsById.set(b.tool_use_id, tur);
+      }
+    }
+  }
   for (const line of lines) {
     let entry;
     try {
@@ -767,19 +875,26 @@ function parseActivitiesFromLines(lines) {
           } else if (block.type === "tool_use" && block.name) {
             if (block.name === "TodoWrite") continue;
             const icon = ICONS[block.name] ?? ICONS.Default;
-            const detail = getToolDetail(block.name, block.input);
+            const result = block.id ? resultsById.get(block.id) : void 0;
+            const detail = summarizeToolDetail(block.name, block.input, result);
+            const body = buildToolDetailBody(block.name, block.input, result);
             const last = activities[activities.length - 1];
             if (last && last.type === "tool" && last.label === block.name && last.detail === detail) {
               last.count = (last.count ?? 1) + 1;
               last.timestamp = timestamp;
             } else {
-              activities.push({
+              const entry2 = {
                 timestamp,
                 type: "tool",
                 icon,
                 label: block.name,
                 detail
-              });
+              };
+              if (body) {
+                entry2.detailBody = body.text;
+                entry2.detailKind = body.kind;
+              }
+              activities.push(entry2);
             }
           } else if (block.type === "text" && block.text && block.text.length > 10) {
             activities.push({
@@ -1026,6 +1141,33 @@ function getDisplayWidth(s) {
   return w;
 }
 
+// src/data/sessionLiveness.ts
+function detectLiveState(tailLines, mtimeMs, now) {
+  if (now - mtimeMs > THIRTY_MINUTES_MS) return null;
+  for (let i = tailLines.length - 1; i >= 0; i--) {
+    const line = tailLines[i];
+    if (!line || !line.trim()) continue;
+    let entry;
+    try {
+      entry = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    if (entry.type === "assistant") {
+      const content = entry.message?.content;
+      const blocks = Array.isArray(content) ? content : [];
+      const toolUses = blocks.filter((b) => b && b.type === "tool_use");
+      if (toolUses.length === 0) return "waiting";
+      if (toolUses.some((b) => b.name === "AskUserQuestion")) return "waiting";
+      return "working";
+    }
+    if (entry.type === "user") {
+      return "working";
+    }
+  }
+  return null;
+}
+
 // src/data/sessions.ts
 function getProjectsDir() {
   return process.env.CLAUDE_PROJECTS_DIR ?? join4(homedir2(), ".claude", "projects");
@@ -1079,23 +1221,26 @@ function readSubAgentInfo(filePath) {
     return { agentId: null, taskDescription: null };
   }
 }
-function readModelName(filePath) {
-  if (!existsSync3(filePath)) return null;
+function readSessionTail(filePath, mtimeMs, now) {
+  if (!existsSync3(filePath)) return { modelName: null, liveState: null };
   try {
     const content = readFileSync4(filePath, "utf-8");
-    const lines = content.trim().split("\n").filter(Boolean);
-    for (const line of lines.slice(-50).reverse()) {
+    const tail = content.trim().split("\n").filter(Boolean).slice(-50);
+    let modelName = null;
+    for (const line of [...tail].reverse()) {
       try {
         const entry = JSON.parse(line);
         if (entry.type === "assistant" && entry.message?.model) {
-          return parseModelName(entry.message.model);
+          modelName = parseModelName(entry.message.model);
+          break;
         }
       } catch {
       }
     }
+    return { modelName, liveState: detectLiveState(tail, mtimeMs, now) };
   } catch {
+    return { modelName: null, liveState: null };
   }
-  return null;
 }
 var SYSTEM_PREFIXES = [
   "<command-name>",
@@ -1179,6 +1324,11 @@ function buildSubAgents(parentId, projectDir, config, projectName) {
     try {
       const stat = statSync2(filePath);
       const { agentId, taskDescription } = readSubAgentInfo(filePath);
+      const { modelName, liveState } = readSessionTail(
+        filePath,
+        stat.mtimeMs,
+        Date.now()
+      );
       return {
         id,
         hideKey,
@@ -1187,12 +1337,13 @@ function buildSubAgents(parentId, projectDir, config, projectName) {
         projectName: "",
         lastModifiedMs: stat.mtimeMs,
         status: getSessionStatus(stat.mtimeMs),
-        modelName: readModelName(filePath),
+        modelName,
         subAgents: [],
         agentId: agentId ?? void 0,
         taskDescription: taskDescription ?? void 0,
         nonInteractive: false,
-        firstUserPrompt: null
+        firstUserPrompt: null,
+        liveState
       };
     } catch {
       return null;
@@ -1248,6 +1399,12 @@ function discoverSessions(config) {
       try {
         const stat = statSync2(filePath);
         const subAgents = buildSubAgents(id, projectDir, config, projectName);
+        const nonInteractive = readEntrypoint(filePath) === "sdk-cli";
+        const { modelName, liveState } = readSessionTail(
+          filePath,
+          stat.mtimeMs,
+          Date.now()
+        );
         allSessions.push({
           id,
           hideKey,
@@ -1256,10 +1413,11 @@ function discoverSessions(config) {
           projectName,
           lastModifiedMs: stat.mtimeMs,
           status: getSessionStatus(stat.mtimeMs),
-          modelName: readModelName(filePath),
+          modelName,
           subAgents,
-          nonInteractive: readEntrypoint(filePath) === "sdk-cli",
-          firstUserPrompt: readFirstUserPrompt(filePath)
+          nonInteractive,
+          firstUserPrompt: readFirstUserPrompt(filePath),
+          liveState: nonInteractive ? null : liveState
         });
       } catch {
       }
@@ -1806,7 +1964,33 @@ import { useCallback, useEffect as useEffect3, useMemo, useRef, useState as useS
 
 // src/ui/ActivityViewerPanel.tsx
 import { Box, Text } from "ink";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function brighten(color) {
+  switch (color) {
+    case void 0:
+    case "gray":
+      return "white";
+    case "white":
+      return "whiteBright";
+    case "green":
+      return "greenBright";
+    case "yellow":
+      return "yellowBright";
+    case "magenta":
+      return "magentaBright";
+    case "cyan":
+      return "cyanBright";
+    case "red":
+      return "redBright";
+    case "blue":
+      return "blueBright";
+    case "black":
+      return "blackBright";
+    default:
+      return color;
+  }
+}
 function getActivityStyle(activity) {
   if (activity.type === "user") {
     return { color: "white", dimColor: false };
@@ -1855,6 +2039,76 @@ function truncateDetail2(detail, maxWidth) {
   }
   return `${truncated}\u2026`;
 }
+var ActivityRow = memo(function ActivityRow2({
+  activity,
+  timestamp,
+  width,
+  contentWidth,
+  isCursor,
+  isLiveRow,
+  liveSpinnerFrame,
+  liveTick
+}) {
+  const style = getActivityStyle(activity);
+  const timestampWidth = timestamp.length;
+  const icon = isLiveRow && liveSpinnerFrame ? liveSpinnerFrame : activity.icon;
+  const iconWidth = getDisplayWidth(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 prefixWidth = 2 + timestampWidth + iconWidth + 1;
+  const labelPart = detail ? `${label}: ` : label;
+  const labelWidth = labelPart.length;
+  const detailMaxWidth = width - 2 - timestampWidth - iconWidth - 1 - labelWidth - countSuffixWidth - 1;
+  let labelContent;
+  if (detail) {
+    const truncated = truncateDetail2(detail, Math.max(0, detailMaxWidth));
+    labelContent = `${labelPart}${truncated}${countSuffix}`;
+  } else {
+    labelContent = label + countSuffix;
+  }
+  const usedWidth = 1 + 1 + timestampWidth + iconWidth + 1 + getDisplayWidth(labelContent) + 1;
+  const padding = Math.max(0, width - usedWidth);
+  const SWEEP_WIDTH = 10;
+  let labelNode = labelContent;
+  if (isLiveRow && !isCursor && liveTick != null && labelContent.length > 0) {
+    const period = labelContent.length + SWEEP_WIDTH;
+    const offset = liveTick % period - SWEEP_WIDTH;
+    const litStart = Math.max(0, offset);
+    const litEnd = Math.min(labelContent.length, offset + SWEEP_WIDTH);
+    if (litEnd > litStart) {
+      const pre = labelContent.slice(0, litStart);
+      const lit = labelContent.slice(litStart, litEnd);
+      const post = labelContent.slice(litEnd);
+      labelNode = /* @__PURE__ */ jsxs(Fragment, { children: [
+        pre,
+        /* @__PURE__ */ jsx(Text, { color: brighten(style.color), bold: true, children: lit }),
+        post
+      ] });
+    }
+  }
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    BOX.v,
+    " ",
+    /* @__PURE__ */ jsxs(Text, { backgroundColor: isCursor ? "blue" : void 0, children: [
+      /* @__PURE__ */ jsx(Text, { dimColor: !isCursor && !isLiveRow, children: timestamp }),
+      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: isLiveRow, children: icon }),
+      " ",
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          color: isCursor ? void 0 : style.color,
+          dimColor: !isCursor && !isLiveRow && style.dimColor,
+          children: labelNode
+        }
+      ),
+      " ".repeat(padding)
+    ] }),
+    BOX.v
+  ] });
+});
 function ActivityViewerPanel({
   activities,
   sessionName,
@@ -1862,8 +2116,8 @@ function ActivityViewerPanel({
   isLive,
   newCount,
   visibleRows,
-  trailingBlankRows = 0,
-  liveIndicatorPosition = null,
+  liveSpinnerFrame = null,
+  liveTick = null,
   width,
   cursorLine,
   hasFocus,
@@ -1907,57 +2161,28 @@ function ActivityViewerPanel({
   } else {
     const effectiveCursor = Math.min(cursorLine, visibleActivities.length - 1);
     const cursorIndexInSlice = visibleActivities.length - 1 - effectiveCursor;
+    const liveRowIndex = visibleActivities.length - 1;
+    const liveTreatment = isLive && !!liveSpinnerFrame;
     for (let i = 0; i < visibleActivities.length; i++) {
       const activity = visibleActivities[i];
-      const style = getActivityStyle(activity);
       const isCursor = hasFocus && i === cursorIndexInSlice;
-      const time = formatActivityTime(activity.timestamp, now);
-      const timestamp = `[${time}] `;
-      const timestampWidth = timestamp.length;
-      const icon = activity.icon;
-      const iconWidth = getDisplayWidth(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 prefixWidth = 2 + timestampWidth + iconWidth + 1;
-      const labelPart = detail ? `${label}: ` : label;
-      const labelWidth = labelPart.length;
-      const _availableForDetail = contentWidth - prefixWidth - labelWidth - countSuffixWidth + 1;
-      const detailMaxWidth = width - 2 - timestampWidth - iconWidth - 1 - labelWidth - countSuffixWidth - 1;
-      let labelContent;
-      let _displayWidth;
-      if (detail) {
-        const truncated = truncateDetail2(detail, Math.max(0, detailMaxWidth));
-        labelContent = `${labelPart}${truncated}${countSuffix}`;
-        _displayWidth = prefixWidth - 1 + labelWidth + getDisplayWidth(truncated) + countSuffixWidth;
-      } else {
-        labelContent = label + countSuffix;
-        _displayWidth = prefixWidth - 1 + label.length + countSuffixWidth;
-      }
-      const usedWidth = 1 + 1 + timestampWidth + iconWidth + 1 + getDisplayWidth(labelContent) + 1;
-      const padding = Math.max(0, width - usedWidth);
+      const isLiveRow = liveTreatment && i === liveRowIndex;
+      const timestamp = `[${formatActivityTime(activity.timestamp, now)}] `;
       lines.push(
-        /* @__PURE__ */ jsxs(Text, { children: [
-          BOX.v,
-          " ",
-          /* @__PURE__ */ jsxs(Text, { backgroundColor: isCursor ? "blue" : void 0, children: [
-            /* @__PURE__ */ jsx(Text, { dimColor: !isCursor, children: timestamp }),
-            /* @__PURE__ */ jsx(Text, { color: "cyan", children: icon }),
-            " ",
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                color: isCursor ? void 0 : style.color,
-                dimColor: !isCursor && style.dimColor,
-                children: labelContent
-              }
-            ),
-            " ".repeat(padding)
-          ] }),
-          BOX.v
-        ] }, `activity-${i}`)
+        /* @__PURE__ */ jsx(
+          ActivityRow,
+          {
+            activity,
+            timestamp,
+            width,
+            contentWidth,
+            isCursor,
+            isLiveRow,
+            liveSpinnerFrame: isLiveRow ? liveSpinnerFrame ?? void 0 : void 0,
+            liveTick: isLiveRow ? liveTick ?? void 0 : void 0
+          },
+          `activity-${i}`
+        )
       );
     }
   }
@@ -1967,29 +2192,7 @@ function ActivityViewerPanel({
   for (let i = 0; i < padCount; i++) {
     padded.push(/* @__PURE__ */ jsx(Text, { children: emptyRow }, `pad-${i}`));
   }
-  const hasContent = visibleActivities.length > 0;
-  const trailing = [];
-  for (let i = 0; i < trailingBlankRows; i++) {
-    if (i === 0 && isLive && liveIndicatorPosition != null && hasContent) {
-      const pos = Math.max(0, liveIndicatorPosition);
-      const arrow = "\u203A";
-      const safePos = Math.min(pos, Math.max(0, contentWidth - 1));
-      const padAfter = Math.max(0, contentWidth - safePos - 1);
-      trailing.push(
-        /* @__PURE__ */ jsxs(Text, { children: [
-          BOX.v,
-          " ",
-          " ".repeat(safePos),
-          /* @__PURE__ */ jsx(Text, { color: "cyan", dimColor: true, children: arrow }),
-          " ".repeat(padAfter),
-          BOX.v
-        ] }, `trail-${i}`)
-      );
-    } else {
-      trailing.push(/* @__PURE__ */ jsx(Text, { children: emptyRow }, `trail-${i}`));
-    }
-  }
-  const finalLines = [...padded, ...lines, ...trailing];
+  const finalLines = [...padded, ...lines];
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width, children: [
     /* @__PURE__ */ jsx(Text, { color: isLive ? void 0 : "yellow", children: createTitleLine(sessionName, titleSuffix, width) }),
     finalLines,
@@ -2089,8 +2292,9 @@ function DetailViewPanel({
 }) {
   const innerWidth = getInnerWidth(width);
   const contentWidth = innerWidth - 1;
-  const classifier = activity.type === "commit" ? classifyDiffLines : classifyCodeFences;
-  const allLines = wrapClassified(activity.detail, contentWidth, classifier);
+  const body = activity.detailBody ?? activity.detail;
+  const classifier = activity.detailKind === "diff" ? classifyDiffLines : activity.detailKind === "code" ? classifyCodeFences : activity.type === "commit" ? classifyDiffLines : classifyCodeFences;
+  const allLines = wrapClassified(body, contentWidth, classifier);
   const totalLines = allLines.length;
   const clampedOffset = Math.min(
     scrollOffset,
@@ -2155,6 +2359,7 @@ var SECTIONS = [
       ["PgDn / Ctrl+F", "Page down"],
       ["\u21B5", "Expand/collapse project, session, or summary"],
       ["h", "Hide selected (project/session/sub-agent)"],
+      ["t", "Track: auto-follow the newest live sub-agent (any nav key turns it off)"],
       ["Tab", "Switch focus to activity viewer"],
       ["r", "Refresh now"]
     ]
@@ -2296,7 +2501,9 @@ function useHotkeys({
   onHelp,
   onHelpScroll,
   onHelpScrollToTop,
-  filterLabel
+  onToggleTracking,
+  filterLabel,
+  trackingOn = false
 }) {
   const handleInput = (input, key) => {
     if (helpMode) {
@@ -2371,6 +2578,10 @@ function useHotkeys({
       onFilter();
       return;
     }
+    if (input === "t" && !key.ctrl && onToggleTracking) {
+      onToggleTracking();
+      return;
+    }
     if (key.pageUp) {
       onScrollPageUp();
       return;
@@ -2430,7 +2641,9 @@ function useHotkeys({
       }
     }
   };
+  const trackingItems = trackingOn ? ["TRK \u25CF"] : ["t: track"];
   const statusBarItems = helpMode ? ["\u2191\u2193/jk: scroll", "PgDn/Space: page", "\u21B5/Esc/q/?: close"] : detailMode ? ["\u2191\u2193/jk: scroll", "\u21B5/Esc: close", "?: help"] : focus === "tree" ? [
+    ...trackingItems,
     "Tab: viewer",
     "\u2191\u2193/jk: select",
     "PgUp/Dn: page",
@@ -2440,6 +2653,7 @@ function useHotkeys({
     "?: help",
     "q: quit"
   ] : [
+    ...trackingItems,
     "Tab: projects",
     "\u2191\u2193/jk: scroll",
     "PgUp/Dn: page",
@@ -2453,21 +2667,16 @@ function useHotkeys({
   return { handleInput, statusBarItems };
 }
 
-// src/ui/hooks/useSlide.ts
+// src/ui/hooks/useTick.ts
 import { useEffect, useState } from "react";
-function useSlide(active, positions, intervalMs = 180, resetKey) {
-  const [index, setIndex] = useState(0);
-  useEffect(() => {
-    setIndex(0);
-  }, [resetKey]);
+function useTick(active, intervalMs = 100) {
+  const [n, setN] = useState(0);
   useEffect(() => {
     if (!active) return;
-    const timer = setInterval(() => {
-      setIndex((i) => (i + 1) % positions);
-    }, intervalMs);
-    return () => clearInterval(timer);
-  }, [active, positions, intervalMs]);
-  return index;
+    const id = setInterval(() => setN((x) => x + 1), intervalMs);
+    return () => clearInterval(id);
+  }, [active, intervalMs]);
+  return n;
 }
 
 // src/ui/hooks/useSpinner.ts
@@ -2488,7 +2697,7 @@ function useSpinner(active, intervalMs = 100) {
 // src/ui/SessionTreePanel.tsx
 import { homedir as homedir4 } from "os";
 import { Box as Box4, Text as Text4 } from "ink";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function formatElapsed(lastModifiedMs, now = Date.now()) {
   const elapsed = Math.max(0, now - lastModifiedMs);
   const seconds = Math.floor(elapsed / 1e3);
@@ -2519,6 +2728,13 @@ function getStatusColor(status) {
       return "gray";
   }
 }
+function getBadge(session) {
+  if (session.liveState === "working")
+    return { text: "[working]", color: "green" };
+  if (session.liveState === "waiting")
+    return { text: "[waiting]", color: "magenta" };
+  return { text: `[${session.status}]`, color: getStatusColor(session.status) };
+}
 function formatProjectPath(projectPath) {
   const home = homedir4();
   const raw = projectPath.startsWith(home) ? `~${projectPath.slice(home.length)}` : projectPath;
@@ -2532,8 +2748,7 @@ function SessionRow({
   contentWidth
 }) {
   const isParent = prefix === "    ";
-  const statusColor = getStatusColor(session.status);
-  const badge = `[${session.status}]`;
+  const { text: badge, color: badgeColor } = getBadge(session);
   const elapsed = formatElapsed(session.lastModifiedMs);
   const model = session.modelName ?? "";
   const isNonInteractive = session.nonInteractive;
@@ -2582,7 +2797,7 @@ function SessionRow({
           /* @__PURE__ */ jsx4(Text4, { bold: !shouldDim, children: rawName }),
           shortIdDisplay ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: shortIdDisplay }) : null,
           /* @__PURE__ */ jsx4(Text4, { children: " " }),
-          /* @__PURE__ */ jsx4(Text4, { color: statusColor, children: badge }),
+          /* @__PURE__ */ jsx4(Text4, { color: badgeColor, children: badge }),
           middleText ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: middleSection }) : null,
           /* @__PURE__ */ jsx4(Text4, { children: gap }),
           /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: elapsed }),
@@ -2706,7 +2921,7 @@ function ProjectRow({
         dimColor: muted,
         children: [
           nameText,
-          pathText ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          pathText ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
             "  ",
             /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: pathText })
           ] }) : null,
@@ -2781,11 +2996,14 @@ function SessionTreePanel({
   hasFocus,
   width = DEFAULT_PANEL_WIDTH,
   maxRows,
-  expandedIds = /* @__PURE__ */ new Set()
+  expandedIds = /* @__PURE__ */ new Set(),
+  trackingOn = false,
+  spinner = ""
 }) {
   const innerWidth = getInnerWidth(width);
   const contentWidth = innerWidth - 1;
-  const titleLine = createTitleLine("Projects", "", width);
+  const titleSuffix = trackingOn ? `[LIVE ${spinner || "\u25BC"}]` : "";
+  const titleLine = createTitleLine("Projects", titleSuffix, width);
   const bottomLine = createBottomLine(width);
   const totalProjectCount = projects.length + coldProjects.length;
   if (totalProjectCount === 0) {
@@ -2879,7 +3097,7 @@ function SessionTreePanel({
 }
 
 // src/ui/App.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var VIEWER_HEIGHT_FRACTION = 0.55;
 function subSummarySentinel(parentId) {
   return {
@@ -2893,7 +3111,8 @@ function subSummarySentinel(parentId) {
     modelName: null,
     subAgents: [],
     nonInteractive: false,
-    firstUserPrompt: null
+    firstUserPrompt: null,
+    liveState: null
   };
 }
 function appendSubAgentRows(result, session, expandedIds) {
@@ -2932,7 +3151,8 @@ function flattenSessions2(tree, expandedIds) {
       modelName: null,
       subAgents: [],
       nonInteractive: false,
-      firstUserPrompt: null
+      firstUserPrompt: null,
+      liveState: null
     });
     const shouldShowSessions = isCold ? expandedIds.has(`__expanded-${sentinelId}`) : !expandedIds.has(`__collapsed-${sentinelId}`);
     if (shouldShowSessions) {
@@ -2957,7 +3177,8 @@ function flattenSessions2(tree, expandedIds) {
       modelName: null,
       subAgents: [],
       nonInteractive: false,
-      firstUserPrompt: null
+      firstUserPrompt: null,
+      liveState: null
     });
     if (expandedIds.has("__cold__")) {
       for (const project of tree.coldProjects) {
@@ -2980,6 +3201,54 @@ function getSelectedActivity(acts, live, scrollOff, rows, cursorLine) {
   const effectiveCursor = Math.min(cursorLine, visible.length - 1);
   return visible[visible.length - 1 - effectiveCursor] ?? null;
 }
+function pickTrackingTarget(tree, selectedId, seen) {
+  const ids = /* @__PURE__ */ new Set();
+  const liveSubs = [];
+  const liveParents = [];
+  for (const p of tree.projects) {
+    for (const s of p.sessions) {
+      ids.add(s.id);
+      if (s.status === "hot" || s.status === "warm") {
+        liveParents.push({
+          id: s.id,
+          mtime: s.lastModifiedMs,
+          isNew: !seen.has(s.id)
+        });
+      }
+      for (const sa of s.subAgents) {
+        ids.add(sa.id);
+        if (sa.status === "hot" || sa.status === "warm") {
+          liveSubs.push({
+            id: sa.id,
+            mtime: sa.lastModifiedMs,
+            isNew: !seen.has(sa.id)
+          });
+        }
+      }
+    }
+  }
+  const newest = (xs) => xs.length === 0 ? null : xs.reduce((a, b) => a.mtime > b.mtime ? a : b).id;
+  const newSubTarget = newest(liveSubs.filter((s) => s.isNew));
+  if (newSubTarget) return { target: newSubTarget, ids };
+  const newParentTarget = newest(liveParents.filter((p) => p.isNew));
+  if (newParentTarget) return { target: newParentTarget, ids };
+  const currentIsLive = selectedId != null && (liveSubs.some((s) => s.id === selectedId) || liveParents.some((p) => p.id === selectedId));
+  if (currentIsLive) return { target: null, ids };
+  return {
+    target: newest(liveSubs) ?? newest(liveParents),
+    ids
+  };
+}
+function collectAllIds(tree) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const p of tree.projects) {
+    for (const s of p.sessions) {
+      ids.add(s.id);
+      for (const sa of s.subAgents) ids.add(sa.id);
+    }
+  }
+  return ids;
+}
 function App({ mode }) {
   const { exit } = useApp();
   const { stdout } = useStdout();
@@ -3011,6 +3280,8 @@ function App({ mode }) {
   const [helpMode, setHelpMode] = useState3(false);
   const [helpScroll, setHelpScroll] = useState3(0);
   const helpTotalLinesRef = useRef(0);
+  const [tracking, setTracking] = useState3(false);
+  const seenIdsRef = useRef(/* @__PURE__ */ new Set());
   const allFlat = useMemo(
     () => flattenSessions2(sessionTree, expandedIds),
     [sessionTree, expandedIds]
@@ -3095,11 +3366,24 @@ function App({ mode }) {
     const freshConfig = loadGlobalConfig();
     const tree = discoverSessions(freshConfig);
     const updatedFlat = flattenSessions2(tree, expandedIds);
-    const node = updatedFlat.find((s) => s.id === selectedId);
+    let nextSelected = selectedId;
+    if (tracking) {
+      const { target, ids } = pickTrackingTarget(
+        tree,
+        selectedId,
+        seenIdsRef.current
+      );
+      if (target && target !== selectedId) {
+        setSelectedId(target);
+        nextSelected = target;
+      }
+      seenIdsRef.current = ids;
+    }
+    const node = updatedFlat.find((s) => s.id === nextSelected);
     if (!node) {
       const allSessions = tree.projects?.flatMap((p) => p.sessions) ?? [];
       const parentSession = allSessions.find(
-        (s) => s.subAgents.some((sa) => sa.id === selectedId)
+        (s) => s.subAgents.some((sa) => sa.id === nextSelected)
       );
       if (parentSession) setSelectedId(parentSession.id);
     }
@@ -3112,7 +3396,7 @@ function App({ mode }) {
       setScrollOffset((o) => o + delta);
       setNewCount((n) => n + delta);
     }
-  }, [selectedId, isLive, expandedIds]);
+  }, [selectedId, isLive, expandedIds, tracking]);
   const refreshRef = useRef(refresh);
   useEffect3(() => {
     refreshRef.current = refresh;
@@ -3147,6 +3431,11 @@ function App({ mode }) {
       if (debounce) clearTimeout(debounce);
     };
   }, [isWatchMode, config.refreshIntervalMs]);
+  useEffect3(() => {
+    if (!isWatchMode || !tracking) return;
+    const timer = setInterval(() => refreshRef.current(), 1e3);
+    return () => clearInterval(timer);
+  }, [isWatchMode, tracking]);
   const filterPresets = config.filterPresets;
   const activePreset = useMemo(
     () => filterPresets[filterIndex % filterPresets.length] ?? [],
@@ -3171,26 +3460,18 @@ function App({ mode }) {
   const maxTreeRows = Math.floor(height * (1 - VIEWER_HEIGHT_FRACTION));
   const naturalTreeRows = allFlat.length;
   const treeRows = Math.max(1, Math.min(naturalTreeRows, maxTreeRows));
-  const VIEWER_BREATHING_ROWS = 1;
-  const viewerRows = Math.max(
-    5,
-    height - 7 - treeRows - VIEWER_BREATHING_ROWS
-  );
-  const spinner = useSpinner(isWatchMode);
-  const viewerIndicatorWidth = Math.max(1, width - 3);
-  const liveIndicatorPosition = useSlide(
-    isWatchMode,
-    viewerIndicatorWidth,
-    180,
-    // Reset to 0 whenever the viewer's subject changes so each new
-    // session/sub-agent restarts the arrow from the left.
-    selectedId
-  );
+  const viewerRows = Math.max(5, height - 7 - treeRows);
+  const spinner = useSpinner(isWatchMode, 150);
+  const tickActive = isWatchMode && isLive && !helpMode && !detailMode && activities.length > 0;
+  const liveTick = useTick(tickActive, 150);
   const helpViewportRows = Math.max(1, height - 3);
   const helpScrollStep = (delta) => {
     const max = Math.max(0, helpTotalLinesRef.current - helpViewportRows);
     setHelpScroll((s) => Math.max(0, Math.min(max, s + delta)));
   };
+  const stopTracking = () => {
+    if (tracking) setTracking(false);
+  };
   const { handleInput, statusBarItems } = useHotkeys({
     focus,
     detailMode,
@@ -3201,12 +3482,29 @@ function App({ mode }) {
     },
     onHelpScroll: helpScrollStep,
     onHelpScrollToTop: () => setHelpScroll(0),
+    onToggleTracking: () => {
+      setTracking((on) => {
+        const next = !on;
+        if (next) {
+          seenIdsRef.current = collectAllIds(sessionTree);
+          const { target } = pickTrackingTarget(
+            sessionTree,
+            selectedId,
+            seenIdsRef.current
+          );
+          if (target) setSelectedId(target);
+        }
+        return next;
+      });
+    },
+    trackingOn: tracking,
     onSwitchFocus: () => setFocus((f) => f === "tree" ? "viewer" : "tree"),
     // cursorLine = "entries back from the newest" (0 = newest = bottom row).
     // Up arrow moves visually upward = older direction = cursorLine++.
     // Down arrow moves visually downward = newer direction = cursorLine--.
     onScrollUp: () => {
       if (focus === "tree") {
+        stopTracking();
         if (selectedIndex === -1) return;
         const prev = Math.max(0, selectedIndex - 1);
         setSelectedId(allFlat[prev]?.id ?? selectedId);
@@ -3223,6 +3521,7 @@ function App({ mode }) {
     },
     onScrollDown: () => {
       if (focus === "tree") {
+        stopTracking();
         if (selectedIndex === -1) return;
         const next = Math.min(allFlat.length - 1, selectedIndex + 1);
         setSelectedId(allFlat[next]?.id ?? selectedId);
@@ -3246,6 +3545,7 @@ function App({ mode }) {
     // PgDn = visually down = newer direction = scrollOffset--
     onScrollPageUp: () => {
       if (focus === "tree") {
+        stopTracking();
         const prev = Math.max(0, selectedIndex - 5);
         setSelectedId(allFlat[prev]?.id ?? selectedId);
       } else {
@@ -3258,6 +3558,7 @@ function App({ mode }) {
     },
     onScrollPageDown: () => {
       if (focus === "tree") {
+        stopTracking();
         const next = Math.min(allFlat.length - 1, selectedIndex + 5);
         setSelectedId(allFlat[next]?.id ?? selectedId);
       } else {
@@ -3274,6 +3575,7 @@ function App({ mode }) {
     },
     onScrollHalfPageUp: () => {
       if (focus === "tree") {
+        stopTracking();
         const prev = Math.max(0, selectedIndex - Math.ceil(5 / 2));
         setSelectedId(allFlat[prev]?.id ?? selectedId);
       } else {
@@ -3289,6 +3591,7 @@ function App({ mode }) {
     },
     onScrollHalfPageDown: () => {
       if (focus === "tree") {
+        stopTracking();
         const next = Math.min(
           allFlat.length - 1,
           selectedIndex + Math.ceil(5 / 2)
@@ -3349,6 +3652,7 @@ function App({ mode }) {
         return;
       }
       if (focus !== "tree" || !selectedId) return;
+      stopTracking();
       if (selectedId.startsWith("__proj-") && selectedId.endsWith("__")) {
         const projectName = selectedId.slice(7, -2);
         const isCold = sessionTree.coldProjects.some(
@@ -3433,6 +3737,7 @@ function App({ mode }) {
     },
     onHide: () => {
       if (focus !== "tree" || !selectedId) return;
+      stopTracking();
       if (selectedId.startsWith("__proj-") && selectedId.endsWith("__")) {
         const projectName = selectedId.slice(7, -2);
         hideProject(projectName);
@@ -3492,7 +3797,13 @@ function App({ mode }) {
   if (isWatchMode && (width < MIN_WIDTH || height + 1 < MIN_HEIGHT)) {
     return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", width, children: [
       /* @__PURE__ */ jsx5(Text5, { bold: true, children: "AgentHUD needs a larger terminal." }),
-      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: `Minimum: ${MIN_WIDTH} cols \xD7 ${MIN_HEIGHT} rows` }),
+      /* @__PURE__ */ jsx5(
+        Text5,
+        {
+          dimColor: true,
+          children: `Minimum: ${MIN_WIDTH} cols \xD7 ${MIN_HEIGHT} rows`
+        }
+      ),
       /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: `Current: ${width} cols \xD7 ${height + 1} rows` }),
       /* @__PURE__ */ jsx5(Text5, { children: " " }),
       /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Resize the window and AgentHUD will redraw automatically." }),
@@ -3527,7 +3838,7 @@ function App({ mode }) {
           helpTotalLinesRef.current = n;
         }
       }
-    ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    ) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
       migrationWarning && /* @__PURE__ */ jsx5(Box5, { marginBottom: 1, children: /* @__PURE__ */ jsx5(Text5, { color: "yellow", children: "Config moved to ~/.agenthud/config.yaml" }) }),
       /* @__PURE__ */ jsx5(
         SessionTreePanel,
@@ -3538,7 +3849,9 @@ function App({ mode }) {
           hasFocus: focus === "tree",
           width,
           maxRows: treeRows,
-          expandedIds
+          expandedIds,
+          trackingOn: tracking,
+          spinner
         }
       ),
       /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: detailMode && detailActivity ? /* @__PURE__ */ jsx5(
@@ -3559,8 +3872,8 @@ function App({ mode }) {
           isLive,
           newCount,
           visibleRows: viewerRows,
-          trailingBlankRows: VIEWER_BREATHING_ROWS,
-          liveIndicatorPosition,
+          liveSpinnerFrame: spinner,
+          liveTick,
           width,
           cursorLine: viewerCursorLine,
           hasFocus: focus === "viewer",

package/package.json

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