claude-code-watch 0.0.5 → 0.0.7

package/README.md

@@ -18,7 +18,7 @@ Claude Code writes detailed JSONL logs under `~/.claude/projects/` as it works
 ## Quick Start
 
 ```bash
-npx claude-watch
+npx claude-code-watch
 ```
 
 This starts the dashboard at `http://localhost:23000` and opens it in your browser.
@@ -28,19 +28,21 @@ It will auto-discover active Claude Code sessions from `~/.claude/projects/` and
 ## Installation
 
 ```bash
-npm install -g claude-watch
+npm install -g claude-code-watch
 ```
 
 Then run:
 
 ```bash
-claude-watch
+claude-code-watch
 ```
 
 ## Usage
 
 ```
-claude-watch [OPTIONS]
+claude-code-watch [OPTIONS]
+
+Shorter alias: `cc-watch` (equivalent to `claude-code-watch`).
 
 OPTIONS:
     -p, --port <port>    HTTP port (default: 23000)
@@ -62,25 +64,25 @@ OPTIONS:
 
 ```bash
 # List recent sessions
-claude-watch -l
+claude-code-watch -l
 
 # List active sessions from last 10 minutes
-claude-watch -a -w 10m
+claude-code-watch -a -w 10m
 
 # Watch a specific session
-claude-watch -s abc123-def456
+claude-code-watch -s abc123-def456
 
 # Live-only mode (don't replay history)
-claude-watch -n
+claude-code-watch -n
 
 # Custom port and host
-claude-watch -p 8080 -h 0.0.0.0
+claude-code-watch -p 8080 -h 0.0.0.0
 
 # Limit tree to 5 most recent sessions, auto-collapse after 2m of inactivity
-claude-watch -m 5 -c 2m
+claude-code-watch -m 5 -c 2m
 
 # Debug mode: see every unknown JSONL line type
-claude-watch -D
+claude-code-watch -D
 ```
 
 ## How It Works

package/README.zh-CN.md

@@ -1,6 +1,6 @@
 # claude-watch
 
-claude-watch — 一个 Claude Code 的实时 Web 监控仪表盘。
+claude-code-watch — 一个 Claude Code 的实时 Web 监控仪表盘。短命令 `cc-watch`。
 
 ## 核心作用
 

package/bin/claude-watch.js

@@ -2,10 +2,13 @@
 
 'use strict';
 
+const https = require('https');
+const cp = require('child_process');
+
 const { startServer } = require('../src/server/server');
 const { listSessions, listActiveSessions } = require('../src/watcher/watcher');
 
-const VERSION = '0.0.1';
+const { version: VERSION } = require('../package.json');
 
 function printHelp() {
   console.log(`claude-watch v${VERSION}
@@ -15,6 +18,7 @@ to a web browser.
 
 USAGE:
     claude-watch [OPTIONS]
+    claude-watch update       Check for updates and install latest
 
 OPTIONS:
     -p, --port <port>    HTTP port (default: 23000)
@@ -28,6 +32,7 @@ OPTIONS:
     -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
     --poll <ms> Polling interval in milliseconds (default: 500)
+    --no-open  Do not auto-open browser on start
     -v          Show version
     --help      Show this help
 
@@ -36,6 +41,93 @@ ENVIRONMENT:
 `);
 }
 
+function compareVersions(a, b) {
+  const pa = a.split('.').map(Number);
+  const pb = b.split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    if (pa[i] > pb[i]) return 1;
+    if (pa[i] < pb[i]) return -1;
+  }
+  return 0;
+}
+
+function fetchLatestVersion() {
+  return new Promise((resolve, reject) => {
+    const opts = {
+      hostname: 'registry.npmjs.org',
+      path: '/claude-code-watch/latest',
+      timeout: 5000,
+    };
+
+    const req = https.get(opts, (res) => {
+      if (res.statusCode !== 200) { reject(new Error(`HTTP ${res.statusCode}`)); return; }
+      let data = '';
+      res.on('data', (chunk) => { data += chunk; });
+      res.on('end', () => {
+        try {
+          const json = JSON.parse(data);
+          resolve(json.version);
+        } catch (err) {
+          reject(err);
+        }
+      });
+    });
+
+    req.on('error', reject);
+    req.on('timeout', () => { req.destroy(); reject(new Error('timeout')); });
+    req.end();
+  });
+}
+
+function checkForUpdate() {
+  fetchLatestVersion().then((latest) => {
+    if (compareVersions(latest, VERSION) > 0) {
+      console.log(`\n  New version available: v${latest} (current: v${VERSION})`);
+      console.log('  Updating in background...\n');
+      const child = cp.spawn('npm', ['install', '-g', 'claude-code-watch@latest'], {
+        stdio: 'ignore',
+        detached: true,
+      });
+      child.unref();
+      child.on('exit', (code) => {
+        if (code === 0) {
+          console.log(`  Updated to v${latest}. Changes take effect on next start.\n`);
+        }
+      });
+    }
+  }).catch(() => { /* network unavailable, skip */ });
+}
+
+async function runUpdate() {
+  console.log(`  Current version: v${VERSION}`);
+  console.log('  Checking for latest version...\n');
+
+  let latest;
+  try {
+    latest = await fetchLatestVersion();
+  } catch (err) {
+    console.error(`  Failed to check for updates: ${err.message}`);
+    process.exit(1);
+  }
+
+  if (compareVersions(latest, VERSION) <= 0) {
+    console.log(`  Already up to date (v${VERSION}).`);
+    return;
+  }
+
+  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' });
+    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');
+    process.exit(1);
+  }
+}
+
 function parseDuration(s) {
   const match = s.match(/^(\d+)(ms|s|m|h)$/);
   if (!match) throw new Error(`Invalid duration: ${s}`);
@@ -62,6 +154,7 @@ async function main() {
     maxSessions: 0,
     collapseAfter: 0,
     debugAll: false,
+    openBrowser: true,
   };
 
   // First pass: collect all option values
@@ -74,7 +167,7 @@ async function main() {
         options.skipHistory = true;
         break;
       case '-p':
-      case '--port':
+      case '--port': {
         if (i + 1 >= args.length || args[i + 1].startsWith('-')) {
           console.error(`Error: ${args[i]} requires a port number`);
           process.exit(1);
@@ -86,6 +179,7 @@ async function main() {
         }
         options.port = pv;
         break;
+      }
       case '-h':
       case '--host':
         if (i + 1 >= args.length || args[i + 1].startsWith('-')) {
@@ -117,6 +211,9 @@ async function main() {
       case '--poll':
         options.pollMs = parseInt(args[++i], 10) || 500;
         break;
+      case '--no-open':
+        options.openBrowser = false;
+        break;
       default:
         break;
     }
@@ -169,6 +266,14 @@ async function main() {
       case '--help':
         printHelp();
         return;
+      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':
+        break;
       default:
         if (args[i].startsWith('-')) {
           console.error(`Unknown option: ${args[i]}`);
@@ -178,6 +283,7 @@ async function main() {
     }
   }
 
+  checkForUpdate();
   startServer(options);
 }
 

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "claude-code-watch",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Web-based real-time monitor for Claude Code.",
   "main": "./src/server/server.js",
   "bin": {
-    "claude-code-watch": "./bin/claude-watch.js"
+    "claude-code-watch": "bin/claude-watch.js",
+    "cc-watch": "bin/claude-watch.js"
   },
   "scripts": {
     "start": "node bin/claude-watch.js",
-    "dev": "node --watch bin/claude-watch.js",
+    "dev": "node --watch bin/claude-watch.js --no-open",
     "test": "node --test tests/all.test.js tests/watcher.test.js tests/server.test.js"
   },
   "files": [
@@ -26,7 +27,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/shuxuecode/claude-watch"
+    "url": "git+https://github.com/shuxuecode/claude-watch.git"
   },
   "engines": {
     "node": ">=18.0.0"

package/public/index.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>claude-watch</title>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+<link rel="stylesheet" href="vendor/github-dark.min.css">
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -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>
@@ -233,6 +270,7 @@ body {
   <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>
@@ -269,8 +307,9 @@ body {
   <span class="sep">│</span>
   </div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
+<script src="vendor/highlight.min.js"></script>
+<script src="vendor/marked.min.js"></script>
+<script src="vendor/purify.min.js"></script>
 <script>
 // ══════════════════════════════════════════════════════════════════════════════
 // DOM refs
@@ -290,6 +329,8 @@ let ws = null;
 let reconnectTimer = null;
 let reconnectDelay = 1000;
 const MaxReconnectDelay = 30000;
+const MaxReconnectAttempts = 20;
+let reconnectAttempts = 0;
 let showTree = true;
 let autoScroll = true;
 let lastMsgTime = 0;
@@ -299,8 +340,40 @@ let sessions = [];
 let treeNodes = [];
 let treeCursor = 0;
 let streamItems = [];
-let seenToolIDs = new Set();
+const seenToolIDsKeys = [];
+const seenToolIDsSet = new Set();
+const seenToolIDsMax = 5000;
+
+function seenToolIDsHas(key) {
+  return seenToolIDsSet.has(key);
+}
+function seenToolIDsAdd(key) {
+  seenToolIDsSet.add(key);
+  seenToolIDsKeys.push(key);
+  if (seenToolIDsKeys.length > seenToolIDsMax) {
+    const evictCount = seenToolIDsKeys.length >> 1;
+    for (let i = 0; i < evictCount; i++) {
+      seenToolIDsSet.delete(seenToolIDsKeys[i]);
+    }
+    seenToolIDsKeys.splice(0, evictCount);
+  }
+}
+const toolNameMapMax = 2000;
 let toolNameMap = new Map();  // toolID -> toolName
+let toolNameMapKeys = [];
+
+function toolNameMapSet(toolID, toolName) {
+  if (toolNameMap.has(toolID)) return;
+  toolNameMap.set(toolID, toolName);
+  toolNameMapKeys.push(toolID);
+  if (toolNameMapKeys.length > toolNameMapMax) {
+    const evictCount = toolNameMapKeys.length >> 1;
+    for (let i = 0; i < evictCount; i++) {
+      toolNameMap.delete(toolNameMapKeys[i]);
+    }
+    toolNameMapKeys.splice(0, evictCount);
+  }
+}
 let filters = new Map();
 
 let showThinking = true;
@@ -314,6 +387,16 @@ let renderPending = false;
 let totalInput = 0, totalOutput = 0, totalCacheCreate = 0, totalCacheRead = 0;
 let contextData = {};
 
+function computeTokensFromContext() {
+  totalInput = 0; totalOutput = 0; totalCacheCreate = 0; totalCacheRead = 0;
+  for (const ctx of Object.values(contextData)) {
+    totalInput += ctx.inputTokens || 0;
+    totalOutput += ctx.outputTokens || 0;
+    totalCacheCreate += ctx.cacheCreationTokens || 0;
+    totalCacheRead += ctx.cacheReadTokens || 0;
+  }
+}
+
 let collapseAfter = 0;
 let collapseTimer = null;
 let activeRefreshTimer = null;
@@ -349,7 +432,7 @@ marked.setOptions({ renderer: mdRenderer, breaks: true, gfm: true });
 
 function mdRender(text) {
   try {
-    return marked.parse(text);
+    return DOMPurify.sanitize(marked.parse(text));
   } catch {
     return esc(text);
   }
@@ -367,10 +450,16 @@ function connect() {
     sessionInfo.textContent = 'Connected';
     lastMsgTime = Date.now();
     reconnectDelay = 1000;
+    reconnectAttempts = 0;
     startStaleCheck();
     startActiveRefresh();
   };
   ws.onclose = () => {
+    reconnectAttempts++;
+    if (reconnectAttempts >= MaxReconnectAttempts) {
+      sessionInfo.textContent = 'Disconnected. Please refresh to reconnect.';
+      return;
+    }
     sessionInfo.textContent = 'Disconnected, reconnecting...';
     stopStaleCheck();
     if (activeRefreshTimer) { clearInterval(activeRefreshTimer); activeRefreshTimer = null; }
@@ -544,10 +633,8 @@ function handleItemBatch(items) {
 }
 
 function pushItem(item) {
-  if (item.inputTokens > 0) totalInput += item.inputTokens;
-  if (item.outputTokens > 0) totalOutput += item.outputTokens;
-  if (item.cacheCreationTokens > 0) totalCacheCreate += item.cacheCreationTokens;
-  if (item.cacheReadTokens > 0) totalCacheRead += item.cacheReadTokens;
+  // Token counts are sourced exclusively from server context messages
+  // to avoid divergence between frontend accumulation and server tracking
 
   if (item.model) {
     const s = sessions.find(s => s.id === item.sessionID);
@@ -555,14 +642,13 @@ function pushItem(item) {
   }
 
   if (item.type === 'tool_input' && item.toolID && item.toolName) {
-    toolNameMap.set(item.toolID, item.toolName);
+    toolNameMapSet(item.toolID, item.toolName);
   }
 
   if (item.toolID) {
     const key = `${item.toolID}:${item.type}`;
-    if (seenToolIDs.has(key)) return;
-    seenToolIDs.add(key);
-    if (seenToolIDs.size > 5000) seenToolIDs.clear();
+    if (seenToolIDsHas(key)) return;
+    seenToolIDsAdd(key);
   }
 
   streamItems.push(item);
@@ -639,7 +725,6 @@ function getNodeHTML(node, idx) {
   if (node.type === 'session') {
     const displayName = node.title || folderName(node.projectPath) || node.id.slice(0, 14);
     const parts = [];
-    if (node.folder) parts.push(`📂 ${esc(node.folder)}`);
     if (node.model) parts.push(`🧠 ${esc(node.model)}`);
     const activeDot = isSessionActive(node) ? '<span class="active-dot on">🟢</span>' : '<span class="active-dot off">⚪</span>';
     const subInfo = parts.length > 0 ? ` <span style="color:#6b7280;font-size:10px">${parts.join(' · ')}</span>` : '';
@@ -881,6 +966,7 @@ function refreshButtons() {
   sessionInfo.textContent = info;
 
   // Token info
+  computeTokensFromContext();
   let tokStr = '';
   if (totalInput > 0 || totalOutput > 0) {
     tokStr = `${fmtTok(totalInput)} in / ${fmtTok(totalOutput)} out`;
@@ -1155,7 +1241,7 @@ function folderName(projectPath) {
 }
 
 function esc(s) {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  return (s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;');
 }
 
 function fmtDur(ms) {
@@ -1189,6 +1275,37 @@ function scheduleRender() {
   }
 }
 
+// ══════════════════════════════════════════════════════════════════════════════
+// 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-dark.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}

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}