claude-code-watch 0.0.6 → 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.6",
+  "version": "0.0.8",
   "description": "Web-based real-time monitor for Claude Code.",
   "main": "./src/server/server.js",
   "bin": {

package/public/index.html

@@ -30,6 +30,28 @@
   --orange: #fb923c;
 }
 
+:root[data-theme="light"] {
+  --bg: #f8f9fa;
+  --bg2: #e9ecef;
+  --bg3: #ced4da;
+  --border: #adb5bd;
+  --text: #495057;
+  --dim: #868e96;
+  --white: #212529;
+  --purple: #6741d9;
+  --purple2: #5b21b6;
+  --blue: #2563eb;
+  --magenta: #9333ea;
+  --yellow: #d97706;
+  --yellow2: #92400e;
+  --green: #059669;
+  --cyan: #0891b2;
+  --red: #dc2626;
+  --red2: #b91c1c;
+  --gray: #6b7280;
+  --orange: #ea580c;
+}
+
 body {
   background: var(--bg);
   color: var(--text);
@@ -218,6 +240,21 @@ body {
 
 /* Override highlight.js background to match our theme */
 .hljs { background: #0d1117 !important; }
+
+/* Light theme overrides */
+:root[data-theme="light"] .btn.on { background: var(--purple); border-color: var(--purple); color: #fff; }
+:root[data-theme="light"] .btn.on:hover { background: var(--purple2); color: #fff; }
+:root[data-theme="light"] .btn.on:hover::after { background: var(--purple2); color: #fff; }
+:root[data-theme="light"] .hljs { background: #f0f0f0 !important; }
+:root[data-theme="light"] .tree-node:hover { background: rgba(0,0,0,0.06); }
+:root[data-theme="light"] .tree-node.selected { background: rgba(124,58,237,0.2); }
+:root[data-theme="light"] .tree-node .active-dot.off { color: #bbb; }
+:root[data-theme="light"] #tree-resize-handle:hover,
+:root[data-theme="light"] #tree-resize-handle.active { background: var(--purple); }
+:root[data-theme="light"] .stream-line.text { color: var(--text); }
+
+/* Theme toggle button */
+#btn-theme { font-size: 14px; }
 </style>
 </head>
 <body>
@@ -227,12 +264,14 @@ 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>
   <span class="sep">│</span>
   <span id="session-info">Connecting...</span>
   <div class="auto">
+    <button class="btn btn-icon" id="btn-theme" onclick="toggleTheme()" data-tooltip="Toggle theme">🌙</button>
     <button class="btn on" id="btn-autodisco" onclick="toggleAutoDiscovery()" data-tooltip="Auto-discover">🔍 Auto</button>
     <span class="sep">│</span>
     <span id="token-info"></span>
@@ -342,6 +381,7 @@ let showThinking = true;
 let showToolInput = true;
 let showToolOutput = true;
 let showText = true;
+let showHook = true;
 let autoDiscovery = true;
 
 let renderPending = false;
@@ -363,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;
@@ -514,6 +554,7 @@ function handleSnapshot(payload) {
   }
   updateFilters();
   rebuildNodes();
+  needsFullRender = true;
   scheduleRender();
 }
 
@@ -528,6 +569,7 @@ function handleNewSession(payload) {
   });
   updateFilters();
   rebuildNodes();
+  needsFullRender = true;
   scheduleRender();
 }
 
@@ -541,6 +583,7 @@ function handleNewAgent(payload) {
   });
   updateFilters();
   rebuildNodes();
+  needsFullRender = true;
   scheduleRender();
 }
 
@@ -558,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();
 }
 
@@ -627,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;
   }
 }
@@ -783,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
@@ -806,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');
@@ -819,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;
@@ -913,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);
@@ -1066,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();
@@ -1082,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(); }
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -1232,11 +1286,44 @@ function scheduleRender() {
     renderPending = true;
     requestAnimationFrame(() => {
       renderPending = false;
-      renderAll();
+      renderTree();
+      renderStream();
+      refreshButtons();
     });
   }
 }
 
+// ══════════════════════════════════════════════════════════════════════════════
+// Theme toggle
+// ══════════════════════════════════════════════════════════════════════════════
+
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  const btn = document.getElementById('btn-theme');
+  if (btn) {
+    btn.textContent = theme === 'dark' ? '🌙' : '☀️';
+    btn.setAttribute('data-tooltip', theme === 'dark' ? 'Switch to light' : 'Switch to dark');
+  }
+  // Swap highlight.js stylesheet for theme
+  const hlLink = document.querySelector('link[rel="stylesheet"][href*="github"]');
+  if (hlLink) {
+    hlLink.href = theme === 'dark' ? 'vendor/github-dark.min.css' : 'vendor/github-light.min.css';
+  }
+}
+
+function toggleTheme() {
+  const current = document.documentElement.getAttribute('data-theme') || 'dark';
+  const next = current === 'dark' ? 'light' : 'dark';
+  localStorage.setItem('theme', next);
+  applyTheme(next);
+}
+
+// Apply saved theme on load (default dark)
+(function() {
+  const saved = localStorage.getItem('theme');
+  applyTheme(saved || 'dark');
+})();
+
 // ══════════════════════════════════════════════════════════════════════════════
 // Init
 // ══════════════════════════════════════════════════════════════════════════════

package/public/vendor/github-light.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}

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();