claude-code-watch 0.0.7 → 0.0.8

package/README.md

@@ -12,7 +12,7 @@ Claude Code writes detailed JSONL logs under `~/.claude/projects/` as it works
 - **Multi-session** — watch all active Claude Code sessions simultaneously in a tree view
 - **Subagent tracking** — see subagent activity nested under their parent session
 - **Token & cost visibility** — tracks input/output/cache tokens per agent, with context window utilization
-- **Filter controls** — toggle thinking, tool input, tool output, and text visibility independently
+- **Filter controls** — toggle thinking, tool input, tool output, hook output, and text visibility independently
 - **Auto-discovery** — automatically picks up new sessions as they start (toggleable)
 
 ## Quick Start
@@ -51,7 +51,7 @@ OPTIONS:
     -n                   Start from newest (skip history, live only)
     -l [N]               List recent sessions (default 10) and exit
     -a [N]               List active sessions (default all) and exit
-    -w <dur>             Active window duration (default 5m, e.g. 30s, 2m, 10m)
+    -w <dur>             Active window duration (default 30m, e.g. 30s, 2m, 10m)
     -m <N>               Max sessions to show in tree (default 0=unlimited)
     -c <dur>             Auto-collapse sessions inactive for this duration (e.g. 2m)
     -D                   Debug: show raw type:subtype for every JSONL line we'd drop

package/README.zh-CN.md

@@ -22,7 +22,7 @@ Claude Code 在运行时会将详细的 JSONL 日志写入 `~/.claude/projects/`
 - **多会话监视** — 同时查看所有活跃的 Claude Code 会话
 - **子代理追踪** — 在父会话下嵌套显示子代理活动
 - **Token/成本追踪** — 每个代理的输入/输出/缓存 token 及上下文窗口利用率
-- **过滤控制** — 独立切换 thinking、工具输入/输出、文本的可见性
+- **过滤控制** — 独立切换 thinking、工具输入/输出、hook 输出、文本的可见性
 - **自动发现** — 新会话启动时自动纳入监控
 
 ## 致谢

package/bin/claude-watch.js

@@ -150,7 +150,7 @@ async function main() {
     sessionID: '',
     skipHistory: false,
     pollMs: 500,
-    activeWindow: 5 * 60 * 1000,
+    activeWindow: 30 * 60 * 1000,
     maxSessions: 0,
     collapseAfter: 0,
     debugAll: false,
@@ -190,7 +190,7 @@ async function main() {
         break;
       case '-w':
         try {
-          options.activeWindow = parseDuration(args[++i] || '5m');
+          options.activeWindow = parseDuration(args[++i] || '30m');
         } catch {
           options.activeWindow = 5 * 60 * 1000;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-watch",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Web-based real-time monitor for Claude Code.",
   "main": "./src/server/server.js",
   "bin": {

package/public/index.html

@@ -264,6 +264,7 @@ body {
   <button class="btn on" id="btn-tool-input" onclick="toggleToolInput()" data-tooltip="Toggle tool input">🔧 Tools</button>
   <button class="btn on" id="btn-tool-output" onclick="toggleToolOutput()" data-tooltip="Toggle tool output">📤 Output</button>
   <button class="btn on" id="btn-text" onclick="toggleText()" data-tooltip="Toggle text responses">💬 Text</button>
+  <button class="btn on" id="btn-hook" onclick="toggleHook()" data-tooltip="Toggle hook output">🪝 Hook</button>
   <span class="sep">│</span>
   <button class="btn on" id="btn-autoscroll" onclick="toggleAutoScroll()" data-tooltip="Auto-scroll">⇣ Auto</button>
   <button class="btn" id="btn-tree-toggle" onclick="toggleTree()" data-tooltip="Toggle tree panel">📂 Tree</button>
@@ -380,6 +381,7 @@ let showThinking = true;
 let showToolInput = true;
 let showToolOutput = true;
 let showText = true;
+let showHook = true;
 let autoDiscovery = true;
 
 let renderPending = false;
@@ -401,7 +403,7 @@ let collapseAfter = 0;
 let collapseTimer = null;
 let activeRefreshTimer = null;
 
-const MAX_ITEMS = 1000;
+const MAX_ITEMS = 3000;
 const MAX_LINES = 50;
 let renderedItemCount = 0;
 let needsFullRender = true;
@@ -552,6 +554,7 @@ function handleSnapshot(payload) {
   }
   updateFilters();
   rebuildNodes();
+  needsFullRender = true;
   scheduleRender();
 }
 
@@ -566,6 +569,7 @@ function handleNewSession(payload) {
   });
   updateFilters();
   rebuildNodes();
+  needsFullRender = true;
   scheduleRender();
 }
 
@@ -579,6 +583,7 @@ function handleNewAgent(payload) {
   });
   updateFilters();
   rebuildNodes();
+  needsFullRender = true;
   scheduleRender();
 }
 
@@ -596,9 +601,13 @@ function handleNewBgTask(payload) {
 
 function handleSessionRemoved(payload) {
   const idx = sessions.findIndex(s => s.id === payload.sessionID);
-  if (idx >= 0) sessions.splice(idx, 1);
+  if (idx >= 0) {
+    const session = sessions.splice(idx, 1)[0];
+    sessions.push(session);
+  }
   updateFilters();
   rebuildNodes();
+  needsFullRender = true;
   scheduleRender();
 }
 
@@ -665,6 +674,7 @@ function isItemVisible(item) {
     case 'tool_input': return showToolInput;
     case 'tool_output': return showToolOutput;
     case 'text': return showText;
+    case 'hook_output': return showHook;
     default: return true;
   }
 }
@@ -821,6 +831,7 @@ function isSessionActive(session) {
 
 function renderStream() {
   const visible = streamItems.filter(isItemVisible);
+  const wasAutoScroll = autoScroll;
 
   if (needsFullRender || renderedItemCount > visible.length) {
     // Full rebuild: filter changed, items trimmed, or initial render
@@ -844,10 +855,9 @@ function renderStream() {
     streamEl.innerHTML = html;
     renderedItemCount = visible.length;
     needsFullRender = false;
-    if (autoScroll) requestAnimationFrame(() => { streamEl.scrollTop = streamEl.scrollHeight; });
+    if (wasAutoScroll) requestAnimationFrame(() => { streamEl.scrollTop = streamEl.scrollHeight; });
   } else {
     // Incremental append: only add new items since last render
-    const wasAtBottom = streamEl.scrollHeight - streamEl.scrollTop - streamEl.clientHeight < 50;
     for (let i = renderedItemCount; i < visible.length; i++) {
       for (const l of renderItem(visible[i])) {
         const div = document.createElement('div');
@@ -857,7 +867,7 @@ function renderStream() {
       }
     }
     renderedItemCount = visible.length;
-    if (autoScroll && wasAtBottom) requestAnimationFrame(() => { streamEl.scrollTop = streamEl.scrollHeight; });
+    if (autoScroll) requestAnimationFrame(() => { streamEl.scrollTop = streamEl.scrollHeight; });
   }
 
   const maxScroll = streamEl.scrollHeight - streamEl.clientHeight;
@@ -951,6 +961,7 @@ function refreshButtons() {
   document.getElementById('btn-tool-input').classList.toggle('on', showToolInput);
   document.getElementById('btn-tool-output').classList.toggle('on', showToolOutput);
   document.getElementById('btn-text').classList.toggle('on', showText);
+  document.getElementById('btn-hook').classList.toggle('on', showHook);
   document.getElementById('btn-autoscroll').classList.toggle('on', autoScroll);
   document.getElementById('btn-tree-toggle').classList.toggle('on', showTree);
   document.getElementById('btn-autodisco').classList.toggle('on', autoDiscovery);
@@ -1104,8 +1115,12 @@ function removeSelectedSession() {
   if (node.type === 'session') sid = node.id;
   else sid = node.sessionID;
   if (!sid) return;
-  if (!confirm(`Remove session ${sid.slice(0, 12)}...?`)) return;
-  sessions = sessions.filter(s => s.id !== sid);
+  if (!confirm(`Move session ${sid.slice(0, 12)}... to bottom?`)) return;
+  const idx = sessions.findIndex(s => s.id === sid);
+  if (idx >= 0) {
+    const session = sessions.splice(idx, 1)[0];
+    sessions.push(session);
+  }
   sendCmd('removeSession', { sessionID: sid });
   updateFilters();
   rebuildNodes();
@@ -1120,13 +1135,14 @@ function toggleThinking() { showThinking = !showThinking; needsFullRender = true
 function toggleToolInput() { showToolInput = !showToolInput; needsFullRender = true; renderStream(); refreshButtons(); }
 function toggleToolOutput() { showToolOutput = !showToolOutput; needsFullRender = true; renderStream(); refreshButtons(); }
 function toggleText() { showText = !showText; needsFullRender = true; renderStream(); refreshButtons(); }
+function toggleHook() { showHook = !showHook; needsFullRender = true; renderStream(); refreshButtons(); }
 function toggleAutoScroll() { autoScroll = !autoScroll; if (autoScroll) streamEl.scrollTop = streamEl.scrollHeight; renderAll(); }
 function toggleTree() { showTree = !showTree; document.getElementById('tree-panel').classList.toggle('hidden', !showTree); }
 function toggleAutoDiscovery() { sendCmd('toggleAutoDiscovery'); }
 
 function scrollToTop() { streamEl.scrollTop = 0; autoScroll = false; renderAll(); }
 function scrollUp() { streamEl.scrollTop -= 80; autoScroll = false; renderAll(); }
-function scrollDown() { streamEl.scrollTop += 80; renderAll(); }
+function scrollDown() { streamEl.scrollTop += 80; if (autoScroll) autoScroll = false; renderAll(); }
 function scrollToBottom() { streamEl.scrollTop = streamEl.scrollHeight; autoScroll = true; renderAll(); }
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -1270,7 +1286,9 @@ function scheduleRender() {
     renderPending = true;
     requestAnimationFrame(() => {
       renderPending = false;
-      renderAll();
+      renderTree();
+      renderStream();
+      refreshButtons();
     });
   }
 }

package/src/server/server.js

@@ -21,7 +21,7 @@ var MIME = {
 };
 
 var MAX_ITEM_BUFFER = 2000;
-var CONTEXT_STALE_MS = 30 * 60 * 1000; // 30 minutes
+var CONTEXT_STALE_MS = 60 * 60 * 1000; // 60 minutes
 
 class DashboardServer {
   constructor(options = {}) {
@@ -52,7 +52,7 @@ class DashboardServer {
       ctx = { inputTokens: 0, outputTokens: 0, cacheCreation: 0, cacheRead: 0, model: '', contextWindow: 200000, lastActivity: Date.now() };
       this.contextMap.set(key, ctx);
     }
-    if (item.inputTokens) ctx.inputTokens += item.inputTokens;
+    if (item.inputTokens) ctx.inputTokens = Math.max(ctx.inputTokens, item.inputTokens);
     if (item.outputTokens) ctx.outputTokens += item.outputTokens;
     if (item.cacheCreationTokens) ctx.cacheCreation += item.cacheCreationTokens;
     if (item.cacheReadTokens) ctx.cacheRead += item.cacheReadTokens;
@@ -353,7 +353,7 @@ class DashboardServer {
     }
     const skipHistory = options.skipHistory || false;
     const pollMs = options.pollMs || 500;
-    const activeWindow = options.activeWindow || 5 * 60 * 1000;
+    const activeWindow = options.activeWindow || 100 * 60 * 1000;
     const maxSessions = options.maxSessions || 0;
     const openBrowser = options.openBrowser !== false;
 
@@ -400,19 +400,6 @@ class DashboardServer {
       await w.init();
       if (skipHistory) w.setSkipHistory(true);
       await w.start();
-
-      // Open browser AFTER sessions are discovered, so new clients get a full snapshot
-      if (openBrowser) {
-        const url = `http://localhost:${this.port}`;
-        const platform = process.platform;
-        if (platform === 'darwin') {
-          cp.spawn('open', [url]);
-        } else if (platform === 'win32') {
-          cp.spawn('cmd', ['/c', 'start', '', url]);
-        } else {
-          cp.spawn('xdg-open', [url]);
-        }
-      }
     } catch (err) {
       console.error('Watcher init error:', err.message);
       process.exit(1);
@@ -420,15 +407,32 @@ class DashboardServer {
 
     this._contextCleanupTimer = setInterval(() => this.cleanupContextMap(), CONTEXT_STALE_MS);
 
-    this.server.listen(this.port, this.host, () => {
-      const url = `http://localhost:${this.port}`;
-      console.log(`\n  claude-watch web server`);
-      console.log(`  ───────────────────────────`);
-      console.log(`  Local:   ${url}`);
-      console.log(`  Network: http://${this.host}:${this.port}`);
-      console.log(`  Quit:    Ctrl+C\n`);
+    // Start listening and wait for server to be ready before opening browser
+    await new Promise((resolve) => {
+      this.server.listen(this.port, this.host, () => {
+        const url = `http://localhost:${this.port}`;
+        console.log(`\n  claude-watch web server`);
+        console.log(`  ───────────────────────────`);
+        console.log(`  Local:   ${url}`);
+        console.log(`  Network: http://${this.host}:${this.port}`);
+        console.log(`  Quit:    Ctrl+C\n`);
+        resolve();
+      });
     });
 
+    // Open browser AFTER server is confirmed listening and watcher is ready
+    if (openBrowser) {
+      const url = `http://localhost:${this.port}`;
+      const platform = process.platform;
+      if (platform === 'darwin') {
+        cp.spawn('open', [url]);
+      } else if (platform === 'win32') {
+        cp.spawn('cmd', ['/c', 'start', '', url]);
+      } else {
+        cp.spawn('xdg-open', [url]);
+      }
+    }
+
     return { server: this.server, watcher: w };
   }
 

package/src/watcher/watcher.js

@@ -111,7 +111,7 @@ class Watcher extends EventEmitter {
     super();
     this.claudeDir = getClaudeProjectsDir();
     this.pollInterval = pollInterval || 500;
-    this.activeWindow = activeWindow || 5 * 60 * 1000;
+    this.activeWindow = activeWindow || 100 * 60 * 1000;
     this.maxSessions = maxSessions || 0;
     this.sessions = new Map();
     this.filePositions = new Map();