claude-code-watch 0.0.11 → 0.0.14

package/bin/claude-watch.js

@@ -113,9 +113,8 @@ async function runUpdate() {
   console.log(`  Latest version: v${latest}`);
   console.log('  Running npm install -g claude-code-watch@latest...\n');
 
-  const { execSync } = require('child_process');
   try {
-    execSync('npm install -g claude-code-watch@latest', { stdio: 'inherit' });
+    cp.execSync('npm install -g claude-code-watch@latest', { stdio: 'inherit' });
     console.log(`\n  Updated to v${latest}. Restart to use the new version.`);
   } catch {
     console.error('\n  Update failed. Try manually: npm install -g claude-code-watch@latest');
@@ -139,9 +138,16 @@ async function main() {
     openBrowser: true,
   };
 
-  // First pass: collect all option values
+  // Action flags
+  let listSessionsLimit = 0;   // 0 = no list, >0 = limit
+  let listActiveLimit = 0;     // 0 = no list, >0 = limit, -1 = all
+  let showVersion = false;
+  let showHelp = false;
+  let doUpdate = false;
+
   for (let i = 0; i < args.length; i++) {
-    switch (args[i]) {
+    const arg = args[i];
+    switch (arg) {
       case '-s':
         options.sessionID = args[++i] || '';
         break;
@@ -151,7 +157,7 @@ async function main() {
       case '-p':
       case '--port': {
         if (i + 1 >= args.length || args[i + 1].startsWith('-')) {
-          console.error(`Error: ${args[i]} requires a port number`);
+          console.error(`Error: ${arg} requires a port number`);
           process.exit(1);
         }
         const pv = parseInt(args[++i], 10);
@@ -165,7 +171,7 @@ async function main() {
       case '-h':
       case '--host':
         if (i + 1 >= args.length || args[i + 1].startsWith('-')) {
-          console.error(`Error: ${args[i]} requires a host address`);
+          console.error(`Error: ${arg} requires a host address`);
           process.exit(1);
         }
         options.host = args[++i];
@@ -196,75 +202,85 @@ async function main() {
       case '--no-open':
         options.openBrowser = false;
         break;
-      default:
-        break;
-    }
-  }
-
-  // Second pass: execute action flags with fully resolved options
-  for (let i = 0; i < args.length; i++) {
-    switch (args[i]) {
       case '-l': {
-        const v = parseInt(args[i + 1]);
-        const limit = !isNaN(v) ? v : 10;
+        const next = args[i + 1];
+        const v = parseInt(next);
+        listSessionsLimit = !isNaN(v) ? v : 10;
         if (!isNaN(v)) i++;
-        const sessions = await listSessions(limit);
-        if (sessions.length === 0) {
-          console.log('No sessions found.');
-        } else {
-          const now = Date.now();
-          for (const s of sessions) {
-            const age = Math.round((now - new Date(s.modified).getTime()) / 1000);
-            const ageStr = age < 60 ? `${age}s ago` : age < 3600 ? `${Math.floor(age / 60)}m ago` : `${Math.floor(age / 3600)}h ago`;
-            const active = s.isActive ? '●' : '○';
-            const id = s.id.length > 40 ? s.id.slice(0, 37) + '...' : s.id;
-            console.log(`${active} ${id}  ${s.projectPath || '?'}  ${ageStr}`);
-          }
-        }
-        return;
+        break;
       }
       case '-a': {
-        const v = parseInt(args[i + 1]);
-        const limit = !isNaN(v) ? v : 0;
-        if (!isNaN(v)) i++;
-        const sessions = await listActiveSessions(options.activeWindow);
-        const result = limit > 0 ? sessions.slice(0, limit) : sessions;
-        if (result.length === 0) {
-          console.log('No active sessions found.');
-        } else {
-          const now = Date.now();
-          for (const s of result) {
-            const age = Math.round((now - new Date(s.modified).getTime()) / 1000);
-            const ageStr = age < 60 ? `${age}s ago` : age < 3600 ? `${Math.floor(age / 60)}m ago` : `${Math.floor(age / 3600)}h ago`;
-            const id = s.id.length > 40 ? s.id.slice(0, 37) + '...' : s.id;
-            console.log(`● ${id}  ${s.projectPath || '?'}  ${ageStr}`);
-          }
-        }
-        return;
+        const next = args[i + 1];
+        const v = parseInt(next);
+        if (!isNaN(v)) { listActiveLimit = v; i++; }
+        else { listActiveLimit = -1; }
+        break;
       }
       case '-v':
-        console.log(`claude-watch v${VERSION}`);
-        return;
+        showVersion = true;
+        break;
       case '--help':
-        printHelp();
-        return;
+        showHelp = true;
+        break;
       case 'update':
-        await runUpdate();
-        return;
-      // Skip option flags already handled in first pass
-      case '-s': case '-n': case '-p': case '--port':
-      case '-h': case '--host': case '-w': case '-c':
-      case '-m': case '-D': case '--poll': case '--no-open':
+        doUpdate = true;
         break;
       default:
-        if (args[i].startsWith('-')) {
-          console.error(`Unknown option: ${args[i]}`);
+        if (arg.startsWith('-')) {
+          console.error(`Unknown option: ${arg}`);
           printHelp();
           process.exit(1);
         }
     }
   }
 
+  // Execute action flags
+  if (showVersion) {
+    printVersion();
+    return;
+  }
+  if (showHelp) {
+    printHelp();
+    return;
+  }
+  if (doUpdate) {
+    await runUpdate();
+    return;
+  }
+  if (listSessionsLimit > 0) {
+    const sessions = await listSessions(listSessionsLimit);
+    if (sessions.length === 0) {
+      console.log('No sessions found.');
+    } else {
+      const now = Date.now();
+      for (const s of sessions) {
+        const age = Math.round((now - new Date(s.modified).getTime()) / 1000);
+        const ageStr = age < 60 ? `${age}s ago` : age < 3600 ? `${Math.floor(age / 60)}m ago` : `${Math.floor(age / 3600)}h ago`;
+        const active = s.isActive ? '●' : '○';
+        const id = s.id.length > 40 ? s.id.slice(0, 37) + '...' : s.id;
+        console.log(`${active} ${id}  ${s.projectPath || '?'}  ${ageStr}`);
+      }
+    }
+    return;
+  }
+  if (listActiveLimit !== 0) {
+    const limit = listActiveLimit > 0 ? listActiveLimit : 0;
+    const sessions = await listActiveSessions(options.activeWindow);
+    const result = limit > 0 ? sessions.slice(0, limit) : sessions;
+    if (result.length === 0) {
+      console.log('No active sessions found.');
+    } else {
+      const now = Date.now();
+      for (const s of result) {
+        const age = Math.round((now - new Date(s.modified).getTime()) / 1000);
+        const ageStr = age < 60 ? `${age}s ago` : age < 3600 ? `${Math.floor(age / 60)}m ago` : `${Math.floor(age / 3600)}h ago`;
+        const id = s.id.length > 40 ? s.id.slice(0, 37) + '...' : s.id;
+        console.log(`● ${id}  ${s.projectPath || '?'}  ${ageStr}`);
+      }
+    }
+    return;
+  }
+
   checkForUpdate();
   startServer(options);
 }

package/package.json

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

package/public/index.html

@@ -194,9 +194,11 @@ body {
 .stream-line.diag { color: var(--red); }
 .stream-line.debug { color: var(--gray); }
 .stream-line.marker { color: var(--dim); }
-.stream-line.agent-tag { font-weight: bold; }
+.stream-line.agent-tag { font-weight: bold; display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; }
 .stream-line.agent-main { color: var(--blue); }
 .stream-line.agent-sub { color: var(--magenta); }
+.stream-line.agent-tag .tag-label { flex-shrink: 0; }
+.stream-line.agent-tag .timestamp { font-weight: normal; font-size: 0.85em; color: var(--dim); white-space: nowrap; }
 .stream-line.separator { color: var(--dim); }
 
 /* ── Footer ── */
@@ -393,16 +395,19 @@ let needsFullRender = true;
 // ══════════════════════════════════════════════════════════════════════════════
 
 const mdRenderer = new marked.Renderer();
-mdRenderer.code = function (code, lang) {
+mdRenderer.code = function (codeOrObj, langOrEsc) {
+  // marked v4: code(text, lang, escaped) — marked v5+: code({ text, lang })
+  const text = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+  const lang = typeof codeOrObj === 'object' ? codeOrObj.lang : langOrEsc;
   let highlighted;
   if (lang && hljs.getLanguage(lang)) {
     try {
-      highlighted = hljs.highlight(code, { language: lang }).value;
+      highlighted = hljs.highlight(text, { language: lang }).value;
     } catch {
-      highlighted = hljs.highlightAuto(code).value;
+      highlighted = hljs.highlightAuto(text).value;
     }
   } else {
-    highlighted = hljs.highlightAuto(code).value;
+    highlighted = hljs.highlightAuto(text).value;
   }
   const langTag = lang ? `<span class="lang-tag">${esc(lang)}</span>` : '';
   return `<div class="code-block-wrapper">
@@ -891,14 +896,15 @@ function renderItem(item) {
   }
 
   const agentName = item.agentName || 'Main';
+  const tsHtml = item.timestamp ? `<span class="timestamp">${fmtTimestamp(item.timestamp)}</span>` : '';
 
   switch (item.type) {
     case 'thinking':
-      lines.push({ cls: agentTagCls, text: agentName + sep + '🧠 Thinking' });
+      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${esc(agentName + sep + '🧠 Thinking')}</span>${tsHtml}`, html: true });
       for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line thinking', text: l });
       break;
     case 'tool_input':
-      lines.push({ cls: agentTagCls, text: agentName + sep + `🔧 ${item.toolName || ''}` });
+      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${esc(agentName + sep + `🔧 ${item.toolName || ''}`)}</span>${tsHtml}`, html: true });
       for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line tool-input', text: l });
       break;
     case 'tool_output': {
@@ -908,33 +914,33 @@ function renderItem(item) {
       }
       let label = tn ? `📤 ${tn} result` : '📤 Output';
       if (item.durationMs > 0) label += ' ' + fmtDur(item.durationMs);
-      lines.push({ cls: agentTagCls, text: agentName + sep + label });
+      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${esc(agentName + sep + label)}</span>${tsHtml}`, html: true });
       for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line tool-output', text: l });
       break;
     }
     case 'text':
-      lines.push({ cls: agentTagCls, text: agentName + sep + '💬 Response' });
+      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${esc(agentName + sep + '💬 Response')}</span>${tsHtml}`, html: true });
       lines.push({ cls: 'stream-line text md-content', text: mdRender(item.content), html: true });
       break;
     case 'hook_output': {
       let label = '🪝 Hook';
       if (item.toolName) label += ' ' + item.toolName;
       if (item.durationMs > 0) label += ' ' + fmtDur(item.durationMs);
-      lines.push({ cls: agentTagCls, text: agentName + sep + label });
+      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${esc(agentName + sep + label)}</span>${tsHtml}`, html: true });
       for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line hook', text: l });
       break;
     }
     case 'diagnostics': {
       let label = '⚠ Diagnostics';
       if (item.toolName) label += ' ' + item.toolName;
-      lines.push({ cls: agentTagCls, text: agentName + sep + label });
+      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${esc(agentName + sep + label)}</span>${tsHtml}`, html: true });
       for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line diag', text: l });
       break;
     }
     case 'debug': {
       let label = '🔍 Debug';
       if (item.toolName) label += ' ' + item.toolName;
-      lines.push({ cls: agentTagCls, text: agentName + sep + label });
+      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${esc(agentName + sep + label)}</span>${tsHtml}`, html: true });
       for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line debug', text: l });
       break;
     }
@@ -1269,6 +1275,15 @@ function fmtDur(ms) {
   return `(${(ms / 60000).toFixed(1)}m)`;
 }
 
+function fmtTimestamp(ts) {
+  if (!ts) return '';
+  const d = ts instanceof Date ? ts : new Date(ts);
+  if (isNaN(d.getTime())) return '';
+  const pad = (n, len) => String(n).padStart(len, '0');
+  const ms = pad(d.getMilliseconds(), 3);
+  return `${pad(d.getFullYear(),4)}-${pad(d.getMonth()+1,2)}-${pad(d.getDate(),2)} ${pad(d.getHours(),2)}:${pad(d.getMinutes(),2)}:${pad(d.getSeconds(),2)}.${ms}`;
+}
+
 function fmtTok(n) {
   if (!n) return '0';
   if (n < 1000) return String(n);

package/src/server/server.js

@@ -55,6 +55,8 @@ class DashboardServer {
       ctx = { inputTokens: 0, outputTokens: 0, cacheCreation: 0, cacheRead: 0, model: '', contextWindow: 200000, lastActivity: Date.now() };
       this.contextMap.set(key, ctx);
     }
+    // inputTokens: Claude API returns cumulative total per call, not incremental — use Math.max
+    // outputTokens/cache tokens: API returns incremental values — use +=
     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;
@@ -101,7 +103,9 @@ class DashboardServer {
     }
     for (const ws of toRemove) {
       this.clients.delete(ws);
-      try { ws.terminate(); } catch {}
+      try { ws.terminate(); } catch (err) {
+        if (this.debugAll) console.error('[server] terminate error:', err.message);
+      }
     }
   }
 
@@ -224,7 +228,9 @@ class DashboardServer {
       try {
         const cmd = JSON.parse(data.toString('utf-8'));
         this.handleCommand(ws, cmd);
-      } catch {}
+      } catch (err) {
+        if (this.debugAll) console.error('[server] WS message error:', err.message);
+      }
     });
 
     ws.on('close', () => {
@@ -373,7 +379,9 @@ class DashboardServer {
             } else {
               process.kill(parsedPid, 'SIGTERM');
             }
-          } catch {}
+          } catch (err) {
+            console.error(`[server] Failed to SIGTERM pid ${parsedPid}: ${err.message}`);
+          }
         }
       }
 
@@ -383,7 +391,9 @@ class DashboardServer {
         for (const pid of pids) {
           const parsedPid = parseInt(pid, 10);
           if (Number.isInteger(parsedPid) && parsedPid > 1 && parsedPid !== myPid) {
-            try { process.kill(parsedPid, 0); process.kill(parsedPid, 'SIGKILL'); } catch {}
+            try { process.kill(parsedPid, 0); process.kill(parsedPid, 'SIGKILL'); } catch {
+              // Process already gone — nothing to do
+            }
           }
         }
       }

package/src/watcher/watcher.js

@@ -424,15 +424,21 @@ class Watcher extends EventEmitter {
 
     if (p.endsWith('.jsonl')) {
       if (p.includes('/subagents/')) {
-        this._handleNewSubagentFile(p);
+        this._handleNewSubagentFile(p).catch(err => {
+        if (this.debug) console.error('[watcher] _handleNewSubagentFile error:', err.message);
+      });
       } else if (this.watchActive) {
-        this._handleNewSessionFile(p); // fire-and-forget, session will be discovered on next poll
+        this._handleNewSessionFile(p).catch(err => {
+          if (this.debug) console.error('[watcher] _handleNewSessionFile error:', err.message);
+        });
       }
       return;
     }
 
     if (p.endsWith('.txt') && p.includes('/tool-results/')) {
-      this._handleNewToolResultFile(p);
+      this._handleNewToolResultFile(p).catch(err => {
+        if (this.debug) console.error('[watcher] _handleNewToolResultFile error:', err.message);
+      });
     }
   }
 
@@ -448,9 +454,13 @@ class Watcher extends EventEmitter {
         continue;
       }
       if (base === 'subagents' && entry.name.endsWith('.jsonl')) {
-        this._handleNewSubagentFile(fullPath);
+        this._handleNewSubagentFile(fullPath).catch(err => {
+          if (this.debug) console.error('[watcher] _handleNewSubagentFile error:', err.message);
+        });
       } else if (base === 'tool-results' && entry.name.endsWith('.txt')) {
-        this._handleNewToolResultFile(fullPath);
+        this._handleNewToolResultFile(fullPath).catch(err => {
+          if (this.debug) console.error('[watcher] _handleNewToolResultFile error:', err.message);
+        });
       }
     }
   }
@@ -542,7 +552,9 @@ class Watcher extends EventEmitter {
       this.pendingSubagents.delete(session.id);
       for (const sp of pending) {
         const agentID = path.basename(sp).replace(/^agent-/, '').replace(/\.jsonl$/, '');
-        this._registerSubagent(session, session.id, agentID, sp);
+        this._registerSubagent(session, session.id, agentID, sp).catch(err => {
+          if (this.debug) console.error('[watcher] _registerSubagent error (pending):', err.message);
+        });
       }
     }
   }
@@ -561,7 +573,9 @@ class Watcher extends EventEmitter {
       return;
     }
 
-    this._registerSubagent(session, sessionID, agentID, p); // fire-and-forget, event handler context
+    this._registerSubagent(session, sessionID, agentID, p).catch(err => {
+      if (this.debug) console.error('[watcher] _registerSubagent error:', err.message);
+    });
   }
 
   async _registerSubagent(session, sessionID, agentID, p) {