agenthud 0.9.2 → 0.9.3

package/README.md

@@ -23,36 +23,39 @@ Run this in a separate terminal while using Claude Code. Press `?` inside the TU
 AgentHUD reads Claude Code's session files from `~/.claude/projects/` and displays them in a split view:
 
 ```
-┌─ Projects ──────────────────────────────────────────────┐
-│ > agenthud  ~/WestbrookAI/agenthud                      │
-│     #864f [hot] Fix the auth bug in login flow          │
-│         ├─ » code-reviewer                              │
-│     (#398c [warm])                                      │
-│   myproject  ~/work/myproject                           │
-│     #def4 [hot] Add OAuth support                       │
-│ ... 12 cold projects                                    │
-└─────────────────────────────────────────────────────────┘
-┌─ Activity · agenthud ───────────────────────────────────┐
-│ [10:23] ○ Read  src/ui/App.tsx                          │
-│ [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              │
-└─────────────────────────────────────────────────────────┘
+┌─ Projects ───────────────────────────────────────────────┐
+│ > agenthud  ~/WestbrookAI/agenthud                   13m │
+│     #864f [hot] Fix the auth bug in login flow           │
+│         ├─ » code-reviewer                               │
+│     (#398c [warm])                                       │
+│   myproject  ~/work/myproject                         2d │
+│     #def4 [hot] Add OAuth support                        │
+│ ... 12 cold projects                                     │
+└──────────────────────────────────────────────────────────┘
+┌─ Activity · agenthud ────────────────────────────────────┐
+│ [10:23] ○ Read  src/ui/App.tsx                           │
+│ [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               │
+│ ›                                                        │
+└──────────────────────────────────────────────────────────┘
 ```
 
 **Project tree (top pane)**
 - Sessions grouped under their project (project name + path at the top).
-- Session rows show short ID + first user prompt (the session's "topic").
+- Session rows show short ID + first user prompt (the session's "topic"). Long titles truncate with a `…` suffix.
+- Right edge of each row shows how long ago it was last touched: `42m`, `17h`, `3d`, `2w`, `1mo`, `1y`. Project rows use the most recent session's mtime.
 - Non-interactive sessions (from `claude -p`, SDK, `agenthud summary`) appear in parens and dimmed.
 - Sub-agents nest one level deeper under their parent session.
 - Cold projects collapse under `... N cold projects` at the bottom (press Enter on the line to expand).
 - Press `h` to hide a project, session, or sub-agent (saved to `~/.agenthud/state.yaml`).
 
 **Activity viewer (bottom pane)**
-- Real-time feed for the selected session: file reads, edits, bash, responses, thinking, git commits.
+- 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.
 - 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`.
+- Press `↵` on any row to open a scrollable detail view; on a commit row this shows `git show --stat --patch`.
 
 ## Session status
 
@@ -110,10 +113,11 @@ Full reference is also available inside the app — press `?`.
 | `PgUp` / `Ctrl+B` | Page up |
 | `PgDn` / `Ctrl+F` | Page down |
 | `Ctrl+U` / `Ctrl+D` | Half page up / down |
-| `g` | Jump to live (newest) |
-| `G` | Jump to oldest |
+| `g` | Jump to top (oldest) |
+| `G` | Jump to live (newest, bottom) |
 | `↵` | Open detail view |
 | `f` | Cycle filter preset |
+| `r` | Refresh now |
 | `Tab` | Switch focus to project tree |
 | `?` | Help |
 | `q` | Quit |
@@ -125,6 +129,17 @@ Full reference is also available inside the app — press `?`.
 | `↑` / `k` / `↓` / `j` | Scroll |
 | `↵` / `Esc` / `q` | Close |
 
+Detail view colors the content based on activity type:
+
+- **Git commit detail** (`git show --stat --patch`): added lines green (`+`), removed lines red (`-`), hunk headers cyan (`@@ ... @@`), `commit/Author/Date/diff` metadata dimmed.
+- **Response / thinking / prompt**: text inside triple-backtick code fences renders in cyan so the boundary between prose and code is obvious. No language-specific syntax highlighting — just code-vs-prose separation.
+
+## Behavior
+
+- **Alternate screen buffer.** Watch mode uses the alt-screen (like `vim`, `htop`, `btop`), so quitting (`q`) restores the pre-launch shell completely. No TUI residue, no "is it still running?" confusion.
+- **Minimum terminal size.** 80 cols × 20 rows. Smaller terminals show a one-line hint and redraw automatically when you resize.
+- **Help overlay scrolls.** Press `?` for an in-app reference. The overlay scrolls (`j/k`, `PgUp/PgDn`, `Ctrl+B/F`, `Space`, `g/G`) so the full content is reachable on shorter terminals.
+
 ## Report
 
 Print activity for a date in Markdown or JSON — suitable for piping to scripts or LLMs:
@@ -155,7 +170,7 @@ Output:
 
 | Flag | Default | Description |
 |------|---------|-------------|
-| `--date` | today | `YYYY-MM-DD` or `today` (local date) |
+| `--date` | today | `YYYY-MM-DD`, `today`, `yesterday`, or `-Nd` (N days ago, local date) |
 | `--include` | `response,bash,edit,thinking` | Comma-separated types or `all` |
 | `--format` | `markdown` | `markdown` or `json` |
 | `--detail-limit` | `120` | Max chars per detail field; `0` = unlimited |
@@ -202,10 +217,11 @@ Each missing daily prompts for confirmation just before generation, so you see c
 refreshInterval: 2s
 
 # Activity filter presets (cycle with 'f' key in viewer)
-# Each list is one preset; [] means "all". First preset is the default.
+# Each list is one preset. Use "all" (or "*") to show everything.
+# Types: response, user, bash, edit, thinking, read, glob, commit
 filterPresets:
-  - []
-  - ["response"]
+  - ["all"]
+  - ["response", "user"]
   - ["commit"]
 ```
 

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-6SGKXL7E.js");
+import("./main-S27FZ2BJ.js");

package/dist/{main-6SGKXL7E.js → main-S27FZ2BJ.js}

@@ -348,6 +348,44 @@ function parseArgs(args) {
   return { mode: "watch" };
 }
 
+// src/utils/altScreen.ts
+var ENTER = "\x1B[?1049h";
+var LEAVE = "\x1B[?1049l";
+var entered = false;
+var left = false;
+function enterAltScreen() {
+  if (entered) return;
+  entered = true;
+  process.stdout.write(ENTER);
+}
+function leaveAltScreen() {
+  if (left || !entered) return;
+  left = true;
+  process.stdout.write(LEAVE);
+}
+var hooksInstalled = false;
+function installAltScreenCleanup() {
+  if (hooksInstalled) return;
+  hooksInstalled = true;
+  process.on("exit", () => {
+    leaveAltScreen();
+  });
+  process.on("SIGINT", () => {
+    leaveAltScreen();
+    process.exit(130);
+  });
+  process.on("SIGTERM", () => {
+    leaveAltScreen();
+    process.exit(143);
+  });
+  process.on("uncaughtException", (err) => {
+    leaveAltScreen();
+    setImmediate(() => {
+      throw err;
+    });
+  });
+}
+
 // src/config/globalConfig.ts
 import { existsSync, mkdirSync, readFileSync as readFileSync2, writeFileSync } from "fs";
 import { homedir } from "os";
@@ -359,9 +397,16 @@ var DEFAULT_GLOBAL_CONFIG = {
   refreshIntervalMs: 2e3,
   hiddenSessions: [],
   hiddenSubAgents: [],
-  filterPresets: [[], ["response"], ["commit"]],
+  // [] means "show all"; conversation preset bundles assistant + user;
+  // commits-only preset filters down to git activity.
+  filterPresets: [[], ["response", "user"], ["commit"]],
   hiddenProjects: []
 };
+var ALL_PRESET_KEYWORDS = /* @__PURE__ */ new Set(["all", "*", "any"]);
+function normalizePreset(tokens) {
+  if (tokens.some((t) => ALL_PRESET_KEYWORDS.has(t.toLowerCase()))) return [];
+  return tokens;
+}
 function parseInterval(value) {
   const match = value.match(/^(\d+)(s|m)$/);
   if (!match) return null;
@@ -381,10 +426,11 @@ function writeDefaultConfig() {
 refreshInterval: 2s
 
 # Activity filter presets (cycle with 'f' key in viewer)
-# Each list is one preset; [] means "all". First preset is the default.
+# Each list is one preset. Use "all" (or "*") to show everything.
+# Types: response, user, bash, edit, thinking, read, glob, commit
 filterPresets:
-  - []
-  - ["response"]
+  - ["all"]
+  - ["response", "user"]
   - ["commit"]
 `;
   try {
@@ -430,9 +476,12 @@ function loadGlobalConfig() {
     if (ms !== null) config.refreshIntervalMs = ms;
   }
   if (Array.isArray(configRaw.filterPresets)) {
-    const presets = configRaw.filterPresets.filter(Array.isArray).map(
-      (p) => p.filter((t) => typeof t === "string")
-    );
+    const presets = configRaw.filterPresets.filter(Array.isArray).map((p) => {
+      const tokens = p.filter(
+        (t) => typeof t === "string"
+      );
+      return normalizePreset(tokens);
+    });
     if (presets.length > 0) config.filterPresets = presets;
   }
   const legacyHidden = {};
@@ -572,7 +621,7 @@ function getCommitDetail(projectPath, hash) {
   if (!projectPath) return null;
   try {
     return execSync(
-      `git --git-dir="${projectPath}/.git" show --stat --no-color ${hash}`,
+      `git --git-dir="${projectPath}/.git" show --stat --patch --no-color ${hash}`,
       { encoding: "utf-8", stdio: ["ignore", "pipe", "ignore"] }
     ).trim();
   } catch {
@@ -931,6 +980,21 @@ function createBottomLine(panelWidth = DEFAULT_PANEL_WIDTH) {
   return BOX.bl + BOX.h.repeat(getInnerWidth(panelWidth)) + BOX.br;
 }
 var SEPARATOR = "\u2500".repeat(CONTENT_WIDTH);
+function truncateByWidth(text, maxWidth) {
+  if (maxWidth <= 0) return "";
+  if (getDisplayWidth(text) <= maxWidth) return text;
+  if (maxWidth === 1) return "\u2026";
+  const ellipsisWidth = 1;
+  let acc = "";
+  let used = 0;
+  for (const ch of text) {
+    const w = getDisplayWidth(ch);
+    if (used + w + ellipsisWidth > maxWidth) break;
+    acc += ch;
+    used += w;
+  }
+  return `${acc}\u2026`;
+}
 var widthCache = /* @__PURE__ */ new Map();
 function getDisplayWidth(s) {
   const cached = widthCache.get(s);
@@ -965,13 +1029,19 @@ function getSessionStatus(mtimeMs) {
   }
   return "cold";
 }
+var MAX_TITLE_LEN = 300;
+function capWithEllipsis(s, max = MAX_TITLE_LEN) {
+  const trimmed = s.trim();
+  if (trimmed.length <= max) return trimmed;
+  return `${trimmed.slice(0, max - 1)}\u2026`;
+}
 function extractTaskDescription(content) {
   const headerMatch = content.match(/##\s*(Task\s+\d+[:\s].+)/m);
-  if (headerMatch) return headerMatch[1].trim().slice(0, 60);
+  if (headerMatch) return capWithEllipsis(headerMatch[1]);
   const thisTaskMatch = content.match(/\*\*This Task[^:]+:\*\*\s*(.+)/);
-  if (thisTaskMatch) return thisTaskMatch[1].trim().slice(0, 60);
+  if (thisTaskMatch) return capWithEllipsis(thisTaskMatch[1]);
   const firstLine = content.split("\n").find((l) => l.trim());
-  return (firstLine ?? "").trim().slice(0, 60);
+  return capWithEllipsis(firstLine ?? "");
 }
 function readSubAgentInfo(filePath) {
   if (!existsSync3(filePath)) return { agentId: null, taskDescription: null };
@@ -1054,8 +1124,7 @@ function readFirstUserPrompt(filePath) {
     if (!text || isSystemNoise(text)) continue;
     const firstLine = text.split("\n").find((l) => l.trim()) ?? "";
     if (!firstLine || isSystemNoise(firstLine)) continue;
-    const trimmed = firstLine.trim();
-    return trimmed.length > 80 ? trimmed.slice(0, 80) : trimmed;
+    return capWithEllipsis(firstLine);
   }
   return null;
 }
@@ -1680,7 +1749,7 @@ agenthud: combining ${dailyMarkdowns.length} daily summaries into range summary.
 // src/ui/App.tsx
 import { existsSync as existsSync5, watch } from "fs";
 import { Box as Box5, Text as Text5, useApp, useInput, useStdout } from "ink";
-import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo, useRef, useState as useState3 } from "react";
 
 // src/ui/ActivityViewerPanel.tsx
 import { Box, Text } from "ink";
@@ -1740,6 +1809,8 @@ function ActivityViewerPanel({
   isLive,
   newCount,
   visibleRows,
+  trailingBlankRows = 0,
+  liveIndicatorPosition = null,
   width,
   cursorLine,
   hasFocus,
@@ -1753,18 +1824,18 @@ function ActivityViewerPanel({
   if (isLive) {
     titleSuffix = `[LIVE ${spinner || "\u25BC"}${filterSuffix}]`;
   } else {
-    const badge = newCount > 0 ? ` +${newCount}\u2191` : "";
-    titleSuffix = `[PAUSED \u2193${scrollOffset}${badge}${filterSuffix}]`;
+    const badge = newCount > 0 ? ` +${newCount}\u2193` : "";
+    titleSuffix = `[PAUSED \u2191${scrollOffset}${badge}${filterSuffix}]`;
   }
   let visibleActivities;
   if (activities.length === 0) {
     visibleActivities = [];
   } else if (isLive) {
-    visibleActivities = activities.slice(-visibleRows).reverse();
+    visibleActivities = activities.slice(-visibleRows);
   } else {
     const end = Math.max(0, activities.length - scrollOffset);
     const start = Math.max(0, end - visibleRows);
-    visibleActivities = activities.slice(start, end).reverse();
+    visibleActivities = activities.slice(start, end);
   }
   const now = /* @__PURE__ */ new Date();
   const lines = [];
@@ -1782,10 +1853,11 @@ function ActivityViewerPanel({
     );
   } else {
     const effectiveCursor = Math.min(cursorLine, visibleActivities.length - 1);
+    const cursorIndexInSlice = visibleActivities.length - 1 - effectiveCursor;
     for (let i = 0; i < visibleActivities.length; i++) {
       const activity = visibleActivities[i];
       const style = getActivityStyle(activity);
-      const isCursor = hasFocus && i === effectiveCursor;
+      const isCursor = hasFocus && i === cursorIndexInSlice;
       const time = formatActivityTime(activity.timestamp, now);
       const timestamp = `[${time}] `;
       const timestampWidth = timestamp.length;
@@ -1837,28 +1909,110 @@ function ActivityViewerPanel({
     }
   }
   const emptyRow = `${BOX.v}${" ".repeat(contentWidth + 1)}${BOX.v}`;
-  while (lines.length < visibleRows) {
-    lines.push(/* @__PURE__ */ jsx(Text, { children: emptyRow }, `pad-${lines.length}`));
+  const padCount = Math.max(0, visibleRows - lines.length);
+  const padded = [];
+  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];
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width, children: [
     /* @__PURE__ */ jsx(Text, { color: isLive ? void 0 : "yellow", children: createTitleLine(sessionName, titleSuffix, width) }),
-    lines,
+    finalLines,
     /* @__PURE__ */ jsx(Text, { children: createBottomLine(width) })
   ] });
 }
 
 // src/ui/DetailViewPanel.tsx
 import { Box as Box2, Text as Text2 } from "ink";
+
+// src/ui/lineColoring.ts
+var DIFF_META_PREFIXES = [
+  "diff --git",
+  "index ",
+  "commit ",
+  "Author:",
+  "Date:",
+  "Merge:"
+];
+function classifyDiffLines(lines) {
+  return lines.map((line) => {
+    if (line.startsWith("+++") || line.startsWith("---")) return "diff-meta";
+    if (DIFF_META_PREFIXES.some((p) => line.startsWith(p))) return "diff-meta";
+    if (line.startsWith("@@")) return "diff-hunk";
+    if (line.startsWith("+")) return "diff-add";
+    if (line.startsWith("-")) return "diff-remove";
+    return "prose";
+  });
+}
+function classifyCodeFences(lines) {
+  const out = [];
+  let inCode = false;
+  for (const line of lines) {
+    if (/^\s*```/.test(line)) {
+      out.push("code-fence");
+      inCode = !inCode;
+    } else {
+      out.push(inCode ? "code" : "prose");
+    }
+  }
+  return out;
+}
+function getLineStyle(category) {
+  switch (category) {
+    case "diff-add":
+      return { color: "green" };
+    case "diff-remove":
+      return { color: "red" };
+    case "diff-hunk":
+      return { color: "cyan" };
+    case "diff-meta":
+      return { dimColor: true };
+    case "code-fence":
+      return { color: "cyan", dimColor: true };
+    case "code":
+      return { color: "cyan" };
+    case "prose":
+      return {};
+  }
+}
+
+// src/ui/DetailViewPanel.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function wrapText(text, maxWidth) {
-  if (!text) return ["(empty)"];
-  const result = [];
-  for (const rawLine of text.split("\n")) {
-    if (!rawLine) {
-      result.push("");
+function wrapClassified(text, maxWidth, classifier) {
+  if (!text) return [{ text: "(empty)", category: "prose" }];
+  const sourceLines = text.split("\n");
+  const categories = classifier(sourceLines);
+  const out = [];
+  for (let i = 0; i < sourceLines.length; i++) {
+    const line = sourceLines[i];
+    const cat = categories[i] ?? "prose";
+    if (!line) {
+      out.push({ text: "", category: cat });
       continue;
     }
-    const words = rawLine.split(" ");
+    const words = line.split(" ");
     let current = "";
     for (const word of words) {
       if (!current) {
@@ -1866,13 +2020,13 @@ function wrapText(text, maxWidth) {
       } else if (getDisplayWidth(`${current} ${word}`) <= maxWidth) {
         current += ` ${word}`;
       } else {
-        result.push(current);
+        out.push({ text: current, category: cat });
         current = word;
       }
     }
-    if (current) result.push(current);
+    if (current) out.push({ text: current, category: cat });
   }
-  return result.length > 0 ? result : ["(empty)"];
+  return out.length > 0 ? out : [{ text: "(empty)", category: "prose" }];
 }
 function DetailViewPanel({
   activity,
@@ -1882,7 +2036,8 @@ function DetailViewPanel({
 }) {
   const innerWidth = getInnerWidth(width);
   const contentWidth = innerWidth - 1;
-  const allLines = wrapText(activity.detail, contentWidth);
+  const classifier = activity.type === "commit" ? classifyDiffLines : classifyCodeFences;
+  const allLines = wrapClassified(activity.detail, contentWidth, classifier);
   const totalLines = allLines.length;
   const clampedOffset = Math.min(
     scrollOffset,
@@ -1906,13 +2061,14 @@ function DetailViewPanel({
   const titleRight = `${dashes}${scrollPart}${BOX.tr}`;
   const contentRows = [];
   for (let i = 0; i < visibleRows; i++) {
-    const line = visibleSlice[i] ?? "";
-    const padding = Math.max(0, contentWidth - getDisplayWidth(line));
+    const entry = visibleSlice[i] ?? { text: "", category: "prose" };
+    const padding = Math.max(0, contentWidth - getDisplayWidth(entry.text));
+    const lineStyle = getLineStyle(entry.category);
     contentRows.push(
       /* @__PURE__ */ jsxs2(Text2, { children: [
         BOX.v,
         " ",
-        line,
+        /* @__PURE__ */ jsx2(Text2, { color: lineStyle.color, dimColor: lineStyle.dimColor, children: entry.text }),
         " ".repeat(padding),
         BOX.v
       ] }, i)
@@ -1956,8 +2112,8 @@ var SECTIONS = [
       ["\u2191 \u2193 / k j", "Scroll one line"],
       ["PgUp/Dn, Ctrl+B/F", "Scroll one page"],
       ["Ctrl+U / Ctrl+D", "Scroll half page"],
-      ["g", "Jump to live (newest)"],
-      ["G", "Jump to oldest"],
+      ["g", "Jump to top (oldest)"],
+      ["G", "Jump to live (newest, bottom)"],
       ["\u21B5", "Open detail view for selected activity"],
       ["f", "Cycle filter preset (set in config.yaml)"],
       ["Tab", "Switch focus to project tree"]
@@ -2234,8 +2390,8 @@ function useHotkeys({
     "Tab: projects",
     "\u2191\u2193/jk: scroll",
     "PgUp/Dn: page",
-    "g: live",
-    "G: oldest",
+    "g: oldest",
+    "G: live",
     "\u21B5: detail",
     `f: ${filterLabel}`,
     "?: help",
@@ -2244,12 +2400,29 @@ function useHotkeys({
   return { handleInput, statusBarItems };
 }
 
-// src/ui/hooks/useSpinner.ts
+// src/ui/hooks/useSlide.ts
 import { useEffect, useState } from "react";
-var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
-function useSpinner(active, intervalMs = 100) {
+function useSlide(active, positions, intervalMs = 180, resetKey) {
   const [index, setIndex] = useState(0);
+  useEffect(() => {
+    setIndex(0);
+  }, [resetKey]);
   useEffect(() => {
+    if (!active) return;
+    const timer = setInterval(() => {
+      setIndex((i) => (i + 1) % positions);
+    }, intervalMs);
+    return () => clearInterval(timer);
+  }, [active, positions, intervalMs]);
+  return index;
+}
+
+// src/ui/hooks/useSpinner.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+function useSpinner(active, intervalMs = 100) {
+  const [index, setIndex] = useState2(0);
+  useEffect2(() => {
     if (!active) return;
     const timer = setInterval(() => {
       setIndex((i) => (i + 1) % FRAMES.length);
@@ -2263,12 +2436,20 @@ function useSpinner(active, intervalMs = 100) {
 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";
-function formatElapsed(lastModifiedMs) {
-  const elapsed = Date.now() - lastModifiedMs;
+function formatElapsed(lastModifiedMs, now = Date.now()) {
+  const elapsed = Math.max(0, now - lastModifiedMs);
   const seconds = Math.floor(elapsed / 1e3);
   const minutes = Math.floor(seconds / 60);
   const hours = Math.floor(minutes / 60);
-  if (hours > 0) return `${hours}h${minutes % 60}m`;
+  const days = Math.floor(hours / 24);
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+  if (years >= 1) return `${years}y`;
+  if (months >= 1) return `${months}mo`;
+  if (weeks >= 1) return `${weeks}w`;
+  if (days >= 1) return `${days}d`;
+  if (hours > 0) return `${hours}h`;
   if (minutes > 0) return `${minutes}m`;
   if (seconds > 0) return `${seconds}s`;
   return "<1s";
@@ -2290,11 +2471,6 @@ function formatProjectPath(projectPath) {
   const raw = projectPath.startsWith(home) ? `~${projectPath.slice(home.length)}` : projectPath;
   return raw;
 }
-function truncatePath(path, maxWidth) {
-  if (getDisplayWidth(path) <= maxWidth) return path;
-  if (maxWidth < 4) return "";
-  return `...${path.slice(-(maxWidth - 3))}`;
-}
 function SessionRow({
   session,
   isSelected,
@@ -2316,36 +2492,40 @@ function SessionRow({
   const leftCoreBase = `${prefix}${rawName}${shortIdDisplay} ${badge}`;
   const leftCoreWidth = getDisplayWidth(leftCoreBase);
   const rightWidth = getDisplayWidth(rightSide);
-  const middleAvailable = contentWidth - leftCoreWidth - 1 - rightWidth - 1;
+  const RIGHT_GAP = 3;
+  const middleAvailable = contentWidth - leftCoreWidth - 1 - rightWidth - RIGHT_GAP;
   let middleText = "";
-  if (middleAvailable > 3) {
+  if (middleAvailable > 1) {
     const raw = isParent ? session.firstUserPrompt ?? "" : session.taskDescription ?? "";
     if (raw) {
-      const truncated = truncatePath(raw, middleAvailable);
+      const flat = raw.replace(/[\r\n\t]+/g, " ").trim();
+      const truncated = truncateByWidth(flat, middleAvailable);
       if (truncated) middleText = truncated;
     }
   }
   const middleSection = middleText ? ` ${middleText}` : "";
   const gapWidth = Math.max(
-    1,
+    RIGHT_GAP,
     contentWidth - leftCoreWidth - getDisplayWidth(middleSection) - rightWidth
   );
   const gap = " ".repeat(gapWidth);
   const fullLine = leftCoreBase + middleSection + gap + rightSide;
   const linePadding = Math.max(0, contentWidth - getDisplayWidth(fullLine));
-  const highlight = isSelected && hasFocus;
-  const shouldDim = isNonInteractive;
+  const focused = isSelected && hasFocus;
+  const muted = isSelected && !hasFocus;
+  const showBg = focused || muted;
+  const shouldDim = isNonInteractive || muted;
   return /* @__PURE__ */ jsxs4(Text4, { children: [
     BOX.v,
     " ",
     /* @__PURE__ */ jsxs4(
       Text4,
       {
-        backgroundColor: highlight ? "blue" : void 0,
-        bold: highlight,
-        dimColor: shouldDim && !highlight,
+        backgroundColor: showBg ? "blue" : void 0,
+        bold: focused,
+        dimColor: shouldDim && !focused,
         children: [
-          /* @__PURE__ */ jsx4(Text4, { dimColor: shouldDim && !highlight, children: prefix }),
+          /* @__PURE__ */ jsx4(Text4, { dimColor: shouldDim && !focused, children: prefix }),
           /* @__PURE__ */ jsx4(Text4, { bold: !shouldDim, children: rawName }),
           shortIdDisplay ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: shortIdDisplay }) : null,
           /* @__PURE__ */ jsx4(Text4, { children: " " }),
@@ -2442,23 +2622,47 @@ function ProjectRow({
 }) {
   const nameText = `> ${project.name}`;
   const pathText = project.projectPath ? formatProjectPath(project.projectPath) : "";
+  const latestMtime = project.sessions.reduce(
+    (acc, s) => Math.max(acc, s.lastModifiedMs),
+    0
+  );
+  const elapsed = latestMtime > 0 ? formatElapsed(latestMtime) : "";
   const nameWidth = getDisplayWidth(nameText);
   const pathWidth = pathText ? getDisplayWidth(pathText) : 0;
-  const gapWidth = pathText ? 2 : 0;
-  const totalWidth = nameWidth + gapWidth + pathWidth;
+  const elapsedWidth = elapsed ? getDisplayWidth(elapsed) : 0;
+  const middleGap = pathText ? 2 : 0;
+  const leftWidth = nameWidth + middleGap + pathWidth;
+  const PROJECT_RIGHT_GAP = 3;
+  const rightGap = Math.max(
+    PROJECT_RIGHT_GAP,
+    contentWidth - leftWidth - elapsedWidth
+  );
+  const totalWidth = leftWidth + rightGap + elapsedWidth;
   const padding = Math.max(0, contentWidth - totalWidth);
-  const highlight = isSelected && hasFocus;
+  const focused = isSelected && hasFocus;
+  const muted = isSelected && !hasFocus;
+  const showBg = focused || muted;
   return /* @__PURE__ */ jsxs4(Text4, { children: [
     BOX.v,
     " ",
-    /* @__PURE__ */ jsxs4(Text4, { backgroundColor: highlight ? "blue" : void 0, bold: !highlight, children: [
-      nameText,
-      pathText ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-        "  ",
-        /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: pathText })
-      ] }) : null,
-      " ".repeat(padding)
-    ] }),
+    /* @__PURE__ */ jsxs4(
+      Text4,
+      {
+        backgroundColor: showBg ? "blue" : void 0,
+        bold: !showBg,
+        dimColor: muted,
+        children: [
+          nameText,
+          pathText ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+            "  ",
+            /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: pathText })
+          ] }) : null,
+          " ".repeat(rightGap),
+          elapsed ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: elapsed }) : null,
+          " ".repeat(padding)
+        ]
+      }
+    ),
     BOX.v
   ] });
 }
@@ -2478,11 +2682,12 @@ function SubagentSummaryRow({
     0,
     contentWidth - getDisplayWidth(text) - getDisplayWidth(hint)
   );
-  const active = isSelected && hasFocus;
+  const focused = isSelected && hasFocus;
+  const muted = isSelected && !hasFocus;
   return /* @__PURE__ */ jsxs4(Text4, { children: [
     BOX.v,
     " ",
-    /* @__PURE__ */ jsxs4(Text4, { dimColor: !active, inverse: active, children: [
+    /* @__PURE__ */ jsxs4(Text4, { dimColor: !focused, inverse: focused || muted, children: [
       text,
       " ".repeat(padding),
       hint
@@ -2504,13 +2709,14 @@ function ColdProjectsSummaryRow({
   const dashCount = Math.max(0, innerWidth - 1 - labelWidth - hintWidth);
   const dashes = BOX.h.repeat(dashCount);
   const line = `${BOX.ml}${BOX.h}${label}${dashes}${hint}${BOX.mr}`;
-  const highlight = isSelected && hasFocus;
+  const focused = isSelected && hasFocus;
+  const muted = isSelected && !hasFocus;
   return /* @__PURE__ */ jsx4(
     Text4,
     {
-      backgroundColor: highlight ? "blue" : void 0,
-      bold: highlight,
-      dimColor: !highlight,
+      backgroundColor: focused || muted ? "blue" : void 0,
+      bold: focused,
+      dimColor: !focused,
       children: line
     }
   );
@@ -2712,14 +2918,14 @@ function getSelectedActivity(acts, live, scrollOff, rows, cursorLine) {
   if (acts.length === 0) return null;
   let visible;
   if (live) {
-    visible = acts.slice(-rows).reverse();
+    visible = acts.slice(-rows);
   } else {
     const end = Math.max(0, acts.length - scrollOff);
     const start = Math.max(0, end - rows);
-    visible = acts.slice(start, end).reverse();
+    visible = acts.slice(start, end);
   }
   const effectiveCursor = Math.min(cursorLine, visible.length - 1);
-  return visible[effectiveCursor] ?? null;
+  return visible[visible.length - 1 - effectiveCursor] ?? null;
 }
 function App({ mode }) {
   const { exit } = useApp();
@@ -2727,47 +2933,47 @@ function App({ mode }) {
   const isWatchMode = mode === "watch";
   const config = useMemo(() => loadGlobalConfig(), []);
   const migrationWarning = useMemo(() => hasProjectLevelConfig(), []);
-  const [sessionTree, setSessionTree] = useState2(
+  const [sessionTree, setSessionTree] = useState3(
     () => discoverSessions(config)
   );
-  const [selectedId, setSelectedId] = useState2(() => {
+  const [selectedId, setSelectedId] = useState3(() => {
     const firstProject = sessionTree.projects[0];
     if (firstProject) return `__proj-${firstProject.name}__`;
     return null;
   });
-  const [focus, setFocus] = useState2("tree");
-  const [scrollOffset, setScrollOffset] = useState2(0);
-  const [isLive, setIsLive] = useState2(true);
-  const [activities, setActivities] = useState2([]);
-  const [gitActivities, setGitActivities] = useState2([]);
-  const [newCount, setNewCount] = useState2(0);
-  const [expandedIds, setExpandedIds] = useState2(/* @__PURE__ */ new Set());
-  const [viewerCursorLine, setViewerCursorLine] = useState2(0);
-  const [detailMode, setDetailMode] = useState2(false);
-  const [detailActivity, setDetailActivity] = useState2(
+  const [focus, setFocus] = useState3("tree");
+  const [scrollOffset, setScrollOffset] = useState3(0);
+  const [isLive, setIsLive] = useState3(true);
+  const [activities, setActivities] = useState3([]);
+  const [gitActivities, setGitActivities] = useState3([]);
+  const [newCount, setNewCount] = useState3(0);
+  const [expandedIds, setExpandedIds] = useState3(/* @__PURE__ */ new Set());
+  const [viewerCursorLine, setViewerCursorLine] = useState3(0);
+  const [detailMode, setDetailMode] = useState3(false);
+  const [detailActivity, setDetailActivity] = useState3(
     null
   );
-  const [detailScrollOffset, setDetailScrollOffset] = useState2(0);
-  const [filterIndex, setFilterIndex] = useState2(0);
-  const [helpMode, setHelpMode] = useState2(false);
-  const [helpScroll, setHelpScroll] = useState2(0);
+  const [detailScrollOffset, setDetailScrollOffset] = useState3(0);
+  const [filterIndex, setFilterIndex] = useState3(0);
+  const [helpMode, setHelpMode] = useState3(false);
+  const [helpScroll, setHelpScroll] = useState3(0);
   const helpTotalLinesRef = useRef(0);
   const allFlat = useMemo(
     () => flattenSessions2(sessionTree, expandedIds),
     [sessionTree, expandedIds]
   );
   const allFlatRef = useRef(allFlat);
-  useEffect2(() => {
+  useEffect3(() => {
     allFlatRef.current = allFlat;
   }, [allFlat]);
   const activitiesLengthRef = useRef(0);
   const activitiesRef = useRef(activities);
-  useEffect2(() => {
+  useEffect3(() => {
     activitiesLengthRef.current = activities.length;
     activitiesRef.current = activities;
   }, [activities]);
   const lastLoadedFileRef = useRef(null);
-  useEffect2(() => {
+  useEffect3(() => {
     let node = allFlatRef.current.find((s) => s.id === selectedId);
     if (node && selectedId?.startsWith("__proj-") && selectedId.endsWith("__")) {
       const projectName = selectedId.slice(7, -2);
@@ -2795,12 +3001,12 @@ function App({ mode }) {
       if (fileChanged) setGitActivities([]);
     }
   }, [selectedId, sessionTree]);
-  useEffect2(() => {
+  useEffect3(() => {
     setScrollOffset(0);
     setIsLive(true);
     setViewerCursorLine(0);
   }, [filterIndex]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isWatchMode) return;
     const node = allFlatRef.current.find((s) => s.id === selectedId);
     if (!node?.projectPath) return;
@@ -2855,10 +3061,10 @@ function App({ mode }) {
     }
   }, [selectedId, isLive, expandedIds]);
   const refreshRef = useRef(refresh);
-  useEffect2(() => {
+  useEffect3(() => {
     refreshRef.current = refresh;
   }, [refresh]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isWatchMode) return;
     const projectsDir = getProjectsDir();
     const usePolling = process.platform === "linux" || !existsSync5(projectsDir);
@@ -2912,8 +3118,21 @@ 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 viewerRows = Math.max(5, height - 7 - treeRows);
+  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 helpViewportRows = Math.max(1, height - 3);
   const helpScrollStep = (delta) => {
     const max = Math.max(0, helpTotalLinesRef.current - helpViewportRows);
@@ -2930,11 +3149,30 @@ function App({ mode }) {
     onHelpScroll: helpScrollStep,
     onHelpScrollToTop: () => setHelpScroll(0),
     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") {
         if (selectedIndex === -1) return;
         const prev = Math.max(0, selectedIndex - 1);
         setSelectedId(allFlat[prev]?.id ?? selectedId);
+      } else {
+        if (viewerCursorLine < viewerRows - 1) {
+          setViewerCursorLine((c) => c + 1);
+        } else {
+          setIsLive(false);
+          setScrollOffset(
+            (o) => Math.min(o + 1, Math.max(0, activities.length - viewerRows))
+          );
+        }
+      }
+    },
+    onScrollDown: () => {
+      if (focus === "tree") {
+        if (selectedIndex === -1) return;
+        const next = Math.min(allFlat.length - 1, selectedIndex + 1);
+        setSelectedId(allFlat[next]?.id ?? selectedId);
       } else {
         if (viewerCursorLine > 0) {
           setViewerCursorLine((c) => c - 1);
@@ -2950,26 +3188,25 @@ function App({ mode }) {
         }
       }
     },
-    onScrollDown: () => {
+    // PgUp/PgDn semantics flip to match the bottom-feed layout:
+    // PgUp = visually up = older direction = scrollOffset++
+    // PgDn = visually down = newer direction = scrollOffset--
+    onScrollPageUp: () => {
       if (focus === "tree") {
-        if (selectedIndex === -1) return;
-        const next = Math.min(allFlat.length - 1, selectedIndex + 1);
-        setSelectedId(allFlat[next]?.id ?? selectedId);
+        const prev = Math.max(0, selectedIndex - 5);
+        setSelectedId(allFlat[prev]?.id ?? selectedId);
       } else {
-        if (viewerCursorLine < viewerRows - 1) {
-          setViewerCursorLine((c) => c + 1);
-        } else {
-          setIsLive(false);
-          setScrollOffset(
-            (o) => Math.min(o + 1, Math.max(0, activities.length - viewerRows))
-          );
-        }
+        setViewerCursorLine(0);
+        setIsLive(false);
+        setScrollOffset(
+          (o) => Math.min(o + viewerRows, Math.max(0, activities.length - viewerRows))
+        );
       }
     },
-    onScrollPageUp: () => {
+    onScrollPageDown: () => {
       if (focus === "tree") {
-        const prev = Math.max(0, selectedIndex - 5);
-        setSelectedId(allFlat[prev]?.id ?? selectedId);
+        const next = Math.min(allFlat.length - 1, selectedIndex + 5);
+        setSelectedId(allFlat[next]?.id ?? selectedId);
       } else {
         setViewerCursorLine(0);
         setScrollOffset((o) => {
@@ -2982,22 +3219,28 @@ function App({ mode }) {
         });
       }
     },
-    onScrollPageDown: () => {
+    onScrollHalfPageUp: () => {
       if (focus === "tree") {
-        const next = Math.min(allFlat.length - 1, selectedIndex + 5);
-        setSelectedId(allFlat[next]?.id ?? selectedId);
+        const prev = Math.max(0, selectedIndex - Math.ceil(5 / 2));
+        setSelectedId(allFlat[prev]?.id ?? selectedId);
       } else {
         setViewerCursorLine(0);
         setIsLive(false);
         setScrollOffset(
-          (o) => Math.min(o + viewerRows, Math.max(0, activities.length - viewerRows))
+          (o) => Math.min(
+            o + Math.floor(viewerRows / 2),
+            Math.max(0, activities.length - viewerRows)
+          )
         );
       }
     },
-    onScrollHalfPageUp: () => {
+    onScrollHalfPageDown: () => {
       if (focus === "tree") {
-        const prev = Math.max(0, selectedIndex - Math.ceil(5 / 2));
-        setSelectedId(allFlat[prev]?.id ?? selectedId);
+        const next = Math.min(
+          allFlat.length - 1,
+          selectedIndex + Math.ceil(5 / 2)
+        );
+        setSelectedId(allFlat[next]?.id ?? selectedId);
       } else {
         setViewerCursorLine(0);
         setScrollOffset((o) => {
@@ -3010,35 +3253,17 @@ function App({ mode }) {
         });
       }
     },
-    onScrollHalfPageDown: () => {
-      if (focus === "tree") {
-        const next = Math.min(
-          allFlat.length - 1,
-          selectedIndex + Math.ceil(5 / 2)
-        );
-        setSelectedId(allFlat[next]?.id ?? selectedId);
-      } else {
-        setViewerCursorLine(0);
-        setIsLive(false);
-        setScrollOffset(
-          (o) => Math.min(
-            o + Math.floor(viewerRows / 2),
-            Math.max(0, activities.length - viewerRows)
-          )
-        );
-      }
-    },
     onScrollTop: () => {
+      setViewerCursorLine(Math.max(0, viewerRows - 1));
+      setIsLive(false);
+      setScrollOffset(Math.max(0, mergedActivities.length - viewerRows));
+    },
+    onScrollBottom: () => {
       setViewerCursorLine(0);
       setIsLive(true);
       setScrollOffset(0);
       setNewCount(0);
     },
-    onScrollBottom: () => {
-      setViewerCursorLine(0);
-      setIsLive(false);
-      setScrollOffset(Math.max(0, mergedActivities.length - viewerRows));
-    },
     onDetailClose: () => {
       setDetailMode(false);
     },
@@ -3130,15 +3355,23 @@ function App({ mode }) {
         const toggleKey = isCold ? `__expanded-session-${selectedId}` : `__collapsed-session-${selectedId}`;
         setExpandedIds((prev) => {
           const next = new Set(prev);
-          if (next.has(toggleKey)) {
-            next.delete(toggleKey);
-            if (!isCold) setSelectedId(selectedId);
-          } else {
-            next.add(toggleKey);
-            if (isCold) {
+          if (isCold) {
+            if (next.has(toggleKey)) {
+              next.delete(toggleKey);
+              next.delete(selectedId);
+            } else {
+              next.add(toggleKey);
               const firstSub = selectedSessionObj.subAgents[0];
               if (firstSub) setSelectedId(firstSub.id);
             }
+          } else {
+            if (next.has(toggleKey)) {
+              next.delete(toggleKey);
+            } else {
+              next.add(toggleKey);
+              next.delete(selectedId);
+              setSelectedId(selectedId);
+            }
           }
           return next;
         });
@@ -3273,6 +3506,8 @@ function App({ mode }) {
           isLive,
           newCount,
           visibleRows: viewerRows,
+          trailingBlankRows: VIEWER_BREATHING_ROWS,
+          liveIndicatorPosition,
           width,
           cursorLine: viewerCursorLine,
           hasFocus: focus === "viewer",
@@ -3369,6 +3604,9 @@ if (options.mode === "summary") {
   process.exit(exitCode);
 }
 if (options.mode === "watch") {
-  clearScreen();
+  installAltScreenCleanup();
+  enterAltScreen();
+} else {
+  if (options.mode === "once") clearScreen();
 }
 render(React.createElement(App, { mode: options.mode }));

package/package.json

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