claude-code-watch 0.0.25 → 0.1.0

package/bin/claude-watch.js

@@ -286,7 +286,7 @@ async function main() {
   }
 
   checkForUpdate();
-  startServer(options);
+  await startServer(options);
 }
 
 main().catch(err => {

package/package.json

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

package/public/index.html

@@ -190,7 +190,20 @@ body {
   background: rgba(255,255,255,0.08);
   padding: 0 3px; border-radius: 3px; flex-shrink: 0; font-family: monospace;
   letter-spacing: 0.5px; vertical-align: middle; font-weight: 600;
+  position: relative; cursor: pointer;
 }
+.session-id-tip {
+  position: fixed; z-index: 10000;
+  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
+  padding: 4px 8px; font-size: 11px; white-space: nowrap; color: var(--text);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 6px;
+}
+.session-id-tip code { font-family: monospace; user-select: all; color: var(--white); }
+.session-id-tip .tip-copy-btn {
+  background: var(--bg3); border: 1px solid var(--border); border-radius: 3px;
+  color: var(--text); font-size: 10px; padding: 1px 5px; cursor: pointer;
+}
+.session-id-tip .tip-copy-btn:hover { background: var(--accent); color: #fff; }
 .tree-actions { display: none; gap: 2px; padding-right: 4px; }
 .tree-row:hover .tree-actions { display: flex; }
 .tree-row.selected>.tree-actions { display: flex; }
@@ -226,6 +239,15 @@ body {
 .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); }
+.stream-line.user-prompt-block {
+  background: rgba(59,130,246,0.08);
+  border-left: 8px solid var(--blue);
+  border-radius: 4px;
+  padding: 6px 10px;
+  margin: 4px 0;
+  color: var(--white);
+  line-height: 1.5;
+}
 
 /* ── Footer ── */
 #footer {
@@ -363,6 +385,7 @@ body {
   <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>
+  <button class="btn on" id="btn-user-prompt" onclick="toggleUserPrompt()" data-tooltip="Toggle user prompt">👤 Prompt</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>
@@ -471,11 +494,13 @@ class LRUCache {
   has(key) { if (!this.map.has(key)) return false; const v = this.map.get(key); this.map.delete(key); this.map.set(key, v); return true; }
   get(key) { if (!this.map.has(key)) return undefined; const v = this.map.get(key); this.map.delete(key); this.map.set(key, v); return v; }
   set(key, val) { if (this.map.has(key)) this.map.delete(key); this.map.set(key, val); if (this.map.size > this.max) { const oldest = this.map.keys().next().value; this.map.delete(oldest); } }
+  delete(key) { return this.map.delete(key); }
+  keys() { return this.map.keys(); }
 }
 const seenToolIDs = new LRUCache(20000);
 const toolNameMap = new LRUCache(2000);
-const agentActivity = new Map();  // "sessionID:agentID" → { toolName, content }
-const taskDescriptions = new Map(); // toolID → description string
+const agentActivity = new LRUCache(500);  // "sessionID:agentID" → { toolName, content }
+const taskDescriptions = new LRUCache(2000); // toolID → description string
 const MAX_DESC_STORE = 200;
 let filters = new Map();
 let visibleFilterCount = 0;
@@ -485,6 +510,7 @@ let showToolInput = true;
 let showToolOutput = true;
 let showText = true;
 let showHook = true;
+let showUserPrompt = true;
 let showActivity = true;
 let autoDiscovery = true;
 let appVersion = '';
@@ -612,7 +638,7 @@ function connect() {
     reconnectTimer = setTimeout(connect, reconnectDelay);
     reconnectDelay = Math.min(reconnectDelay * 2, MaxReconnectDelay);
   };
-  ws.onerror = () => {};
+  ws.onerror = (e) => { console.warn('[ws] connection error', e); };
 
   ws.onmessage = (e) => {
     lastMsgTime = Date.now();
@@ -669,6 +695,14 @@ function sendCmd(action, extra = {}) {
 
 function handleSnapshot(payload) {
   autoDiscovery = payload.autoDiscovery;
+  const incomingIDs = new Set((payload.sessions || []).map(s => s.id));
+  for (let i = sessions.length - 1; i >= 0; i--) {
+    const s = sessions[i];
+    if (!incomingIDs.has(s.id) && !s.pinned) {
+      sessions.splice(i, 1);
+      sessionsMap.delete(s.id);
+    }
+  }
   for (const s of (payload.sessions || [])) {
     if (hiddenSessionIDs.has(s.id)) continue;
     let session = sessionsMap.get(s.id);
@@ -758,10 +792,16 @@ function handleNewBgTask(payload) {
 }
 
 function handleSessionRemoved(payload) {
-  const idx = sessions.findIndex(s => s.id === payload.sessionID);
+  const sid = payload.sessionID;
+  const s = sessionsMap.get(sid);
+  if (s) {
+    for (const a of s.agents) agentActivity.delete(sid + ':' + a.id);
+    for (const t of s.tasks) taskDescriptions.delete(t.id);
+  }
+  const idx = sessions.findIndex(s => s.id === sid);
   if (idx >= 0) {
     sessions.splice(idx, 1);
-    sessionsMap.delete(payload.sessionID);
+    sessionsMap.delete(sid);
   }
   updateFilters();
   rebuildNodes();
@@ -855,7 +895,7 @@ function isItemVisible(item) {
     case 'tool_output': return showToolOutput;
     case 'text': return showText;
     case 'hook_output': return showHook;
-    case 'user_text': return false;
+    case 'user_text': return showUserPrompt;
     default: return true;
   }
 }
@@ -1005,7 +1045,7 @@ function getNodeHTML(node, idx) {
   }
 
   if (node.type === 'session') {
-    const displayName = node.title || folderName(node.projectPath) || node.id.slice(0, 14);
+    const displayName = folderName(node.projectPath) || node.title || node.id.slice(0, 14);
     const parts = [];
     if (node.model) parts.push(`🧠 ${esc(node.model)}`);
     const activeDot = isSessionActive(node) ? '<span class="active-dot on">🟢</span>' : '<span class="active-dot off">⚪</span>';
@@ -1016,7 +1056,7 @@ function getNodeHTML(node, idx) {
     return `<div class="tree-row tree-row-session${selClass ? ' selected' : ''}">
       <div class="tree-content" onclick="treeClick(${idx})" data-idx="${idx}">
         <div class="tree-node">
-          <span class="tree-prefix">${treePrefix(node)}</span>${activeDot} ${node.collapsed ? '▸' : '▾'} <span class="session-prefix" style="color:${idColor(node.colorRank)}">${esc(node.id.split('-')[0].toUpperCase())}</span> ${esc(displayName)}
+          <span class="tree-prefix">${treePrefix(node)}</span>${activeDot} ${node.collapsed ? '▸' : '▾'} <span class="session-prefix" style="color:${idColor(node.colorRank)}" data-sid="${esc(node.id)}" onmouseenter="showSessionIdTip(this)" onmouseleave="hideSessionIdTip(this)">${esc(node.id.split('-')[0].toUpperCase())}</span> ${esc(displayName)}
           ${node.collapsed && agentCount > 0 ? `(${esc(String(agentCount))})` : ''}
           ${subInfo}
           ${timeHtml}
@@ -1308,6 +1348,10 @@ function renderItem(item) {
       for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line debug', text: l, sessionID: sid });
       break;
     }
+    case 'user_text':
+      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}👤 User Prompt</span>${tsHtml}`, html: true, sessionID: sid });
+      lines.push({ cls: 'stream-line user-prompt-block md-content', text: mdRender(item.content), html: true, sessionID: sid });
+      break;
   }
 
   lines.push({ cls: 'stream-line separator', text: '─'.repeat(60), sessionID: sid });
@@ -1329,6 +1373,7 @@ function refreshButtons() {
   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-user-prompt').classList.toggle('on', showUserPrompt);
   document.getElementById('btn-activity').classList.toggle('on', showActivity);
   document.getElementById('btn-autoscroll').classList.toggle('on', autoScroll);
   document.getElementById('btn-tree-toggle').classList.toggle('on', showTree);
@@ -1339,7 +1384,7 @@ function refreshButtons() {
   if (sessions.length === 0) info = 'Waiting...';
   else if (sessions.length === 1) {
     const s = sessions[0];
-    info = (s.title || folderName(s.projectPath) || s.id.slice(0, 14));
+    info = (folderName(s.projectPath) || s.title || s.id.slice(0, 14));
   } else info = sessions.length + ' sessions';
   if (!autoDiscovery) info += ' [paused]';
   sessionInfo.textContent = info;
@@ -1363,6 +1408,50 @@ function refreshButtons() {
   }
 }
 
+// ══════════════════════════════════════════════════════════════════════════════
+// Session ID tooltip
+// ══════════════════════════════════════════════════════════════════════════════
+
+let sessionIdTipTimer = null;
+let sessionIdTipEl = null;
+function showSessionIdTip(el) {
+  hideAllSessionIdTips();
+  const sid = el.getAttribute('data-sid');
+  if (!sid) return;
+  sessionIdTipTimer = setTimeout(() => {
+    const rect = el.getBoundingClientRect();
+    const tip = document.createElement('div');
+    tip.className = 'session-id-tip';
+    tip.style.top = (rect.bottom + 4) + 'px';
+    tip.style.left = rect.left + 'px';
+    tip.innerHTML = `<code>${esc(sid)}</code><button class="tip-copy-btn" onclick="event.stopPropagation();copySessionId(this)">Copy</button>`;
+    tip.onmouseenter = () => clearTimeout(sessionIdTipTimer);
+    tip.onmouseleave = () => { hideAllSessionIdTips(); };
+    document.body.appendChild(tip);
+    sessionIdTipEl = tip;
+    el._tip = tip;
+  }, 300);
+}
+function hideSessionIdTip(el) {
+  sessionIdTipTimer = setTimeout(() => {
+    if (el._tip) { el._tip.remove(); el._tip = null; }
+    sessionIdTipEl = null;
+  }, 200);
+}
+function hideAllSessionIdTips() {
+  clearTimeout(sessionIdTipTimer);
+  document.querySelectorAll('.session-id-tip').forEach(t => t.remove());
+  sessionIdTipEl = null;
+}
+function copySessionId(btn) {
+  const code = btn.parentElement.querySelector('code');
+  if (!code) return;
+  navigator.clipboard.writeText(code.textContent).then(() => {
+    btn.textContent = 'Copied!';
+    setTimeout(() => { btn.closest('.session-id-tip')?.remove(); }, 800);
+  });
+}
+
 // ══════════════════════════════════════════════════════════════════════════════
 // Actions
 // ══════════════════════════════════════════════════════════════════════════════
@@ -1522,6 +1611,8 @@ function toggleText() { showText = !showText; needsFullRender = true;
   visibleDirty = true; renderStream(); refreshButtons(); }
 function toggleHook() { showHook = !showHook; needsFullRender = true;
   visibleDirty = true; renderStream(); refreshButtons(); }
+function toggleUserPrompt() { showUserPrompt = !showUserPrompt; needsFullRender = true;
+  visibleDirty = true; renderStream(); refreshButtons(); }
 function toggleActivity() { showActivity = !showActivity; rebuildNodes(); scheduleRender(); refreshButtons(); }
 function toggleAutoScroll() { autoScroll = !autoScroll; if (autoScroll) streamEl.scrollTop = streamEl.scrollHeight; renderAll(); }
 function toggleTree() { showTree = !showTree; document.getElementById('tree-panel').classList.toggle('hidden', !showTree); }
@@ -1666,7 +1757,7 @@ function folderName(projectPath) {
 }
 
 function esc(s) {
-  return (s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;');
+  return (s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\\/g, '&#x5C;');
 }
 
 function fmtDur(ms) {

package/src/parser/parser.js

@@ -196,11 +196,21 @@ function formatTokenCount(n) {
   return String(n);
 }
 
+const CONTEXT_WINDOWS = {
+  'claude-opus-4-7': 1000000,
+  'claude-opus-4-6': 200000,
+  'claude-sonnet-4-6': 1000000,
+  'claude-sonnet-4-5': 200000,
+  'claude-haiku-4-5': 200000,
+  'claude-haiku-4': 200000,
+};
+
 function contextWindowFor(model) {
   if (!model) return 200000;
-  if (model.startsWith('claude-opus-4-7') || model.startsWith('claude-sonnet-4-6')) return 1000000;
-  if (model.startsWith('claude-haiku-4-5') || model.startsWith('claude-opus-4-6') ||
-      model.startsWith('claude-sonnet-4-5') || model.startsWith('claude-haiku-4')) return 200000;
+  for (const [prefix, win] of Object.entries(CONTEXT_WINDOWS)) {
+    if (model.startsWith(prefix)) return win;
+  }
+  if (/claude-(opus|sonnet)/.test(model)) return 1000000;
   return 200000;
 }
 

package/src/server/server.js

@@ -255,7 +255,9 @@ class DashboardServer {
       this.clients.delete(ws);
     });
 
-    ws.on('error', () => {});
+    ws.on('error', (err) => {
+      if (this.debugAll) console.error('[server] WS client error:', err.message);
+    });
 
     this.sendSnapshot(ws);
     this.sendItemBatch(ws);
@@ -396,7 +398,10 @@ class DashboardServer {
     try {
       const result = cp.execSync(cmd, { encoding: 'utf-8' }).trim();
       if (!result) return false;
-      const pids = result.split('\n').map(s => s.trim()).filter(Boolean);
+      let pids = result.split('\n').map(s => s.trim()).filter(Boolean);
+      if (process.platform === 'win32') {
+        pids = pids.map(line => line.split(/\s+/).pop());
+      }
 
       // Ask user for confirmation before killing
       const confirmed = await askYesNo(`Port ${port} is occupied by process(es) ${pids.join(', ')}. Kill them? [y/N] `);
@@ -539,7 +544,14 @@ class DashboardServer {
   stop() {
     if (this._contextCleanupTimer) clearInterval(this._contextCleanupTimer);
     if (this._heartbeatTimer) clearInterval(this._heartbeatTimer);
-    if (this._flushTimer) clearTimeout(this._flushTimer);
+    if (this._flushTimer) {
+      clearTimeout(this._flushTimer);
+      this._flushTimer = null;
+    }
+    if (this._pendingItems.length > 0) {
+      this.broadcast('itemBatch', this._pendingItems);
+      this._pendingItems = [];
+    }
     if (this.wss) this.wss.close();
     if (this.server) this.server.close();
     if (this.watcher) this.watcher.stop();
@@ -549,6 +561,12 @@ class DashboardServer {
 
 async function startServer(options = {}) {
   const ds = new DashboardServer(options);
+  const shutdown = () => {
+    ds.stop();
+    process.exit(0);
+  };
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
   return ds.start(options);
 }
 

package/src/watcher/watcher.js

@@ -33,9 +33,22 @@ function getClaudeProjectsDir() {
 }
 
 const _projectPathCache = new Map();
+const _PROJECT_PATH_CACHE_MAX = 500;
+
+function _projectPathCacheSet(key, value) {
+  _projectPathCache.set(key, value);
+  if (_projectPathCache.size > _PROJECT_PATH_CACHE_MAX) {
+    _projectPathCache.delete(_projectPathCache.keys().next().value);
+  }
+}
 
 async function resolveProjectPath(encoded) {
-  if (_projectPathCache.has(encoded)) return _projectPathCache.get(encoded);
+  if (_projectPathCache.has(encoded)) {
+    const v = _projectPathCache.get(encoded);
+    _projectPathCache.delete(encoded);
+    _projectPathCacheSet(encoded, v);
+    return v;
+  }
   let s = encoded;
   if (s.startsWith('-')) s = s.slice(1);
   if (!s) return '';
@@ -48,7 +61,7 @@ async function resolveProjectPath(encoded) {
   // Strategy 1: try direct decoded path on disk (handles dots correctly)
   try {
     await fsp.access('/' + directDecoded);
-    _projectPathCache.set(encoded, directDecoded);
+    _projectPathCacheSet(encoded, directDecoded);
     return directDecoded;
   } catch {}
 
@@ -77,7 +90,7 @@ async function resolveProjectPath(encoded) {
     try {
       await fsp.access(testPath);
       const result = `${pathPart}/${dirPart}`;
-      _projectPathCache.set(encoded, result);
+      _projectPathCacheSet(encoded, result);
       return result;
     } catch {
       // Path doesn't exist, try next combination
@@ -85,7 +98,7 @@ async function resolveProjectPath(encoded) {
   }
 
   // Fallback: return direct decoded path (correct even if path no longer exists on disk)
-  _projectPathCache.set(encoded, directDecoded);
+  _projectPathCacheSet(encoded, directDecoded);
   return directDecoded;
 }
 
@@ -609,10 +622,10 @@ class Watcher extends EventEmitter {
       const pending = this.pendingSubagents.get(sessionID) || [];
       if (!pending.includes(p)) pending.push(p);
       this.pendingSubagents.set(sessionID, pending);
-      return;
+      return Promise.resolve();
     }
 
-    this._registerSubagent(session, sessionID, agentID, p).catch(err => {
+    return this._registerSubagent(session, sessionID, agentID, p).catch(err => {
       if (this.debug) console.error('[watcher] _registerSubagent error:', err.message);
     });
   }
@@ -914,7 +927,7 @@ class Watcher extends EventEmitter {
 
   async _initializeSessionReading(sessions) {
     let shouldSkip = this.skipHistory;
-    if (!shouldSkip) {
+    if (!shouldSkip && !this._sessionID) {
       let totalEstimate = 0;
       for (const session of sessions) {
         totalEstimate += await this._estimateFileLines(session.mainFile);
@@ -1007,15 +1020,15 @@ class Watcher extends EventEmitter {
       await prev;
 
       let handle;
-      const pos = this.filePositions.get(filePath) || 0;
+      let pos = this.filePositions.get(filePath) || 0;
       let newPos = pos;
       try {
         handle = await fsp.open(filePath, 'r');
         const stats = await handle.stat();
         if (pos > stats.size) {
-          // File was truncated — reset position to 0 so we re-read from the start
+          // File was truncated — reset position to 0 and re-read from the start
+          pos = 0;
           this.filePositions.set(filePath, 0);
-          await handle.close(); handle = null; return;
         }
         if (pos === stats.size) { await handle.close(); handle = null; return; }
 
@@ -1027,7 +1040,8 @@ class Watcher extends EventEmitter {
         const buf = Buffer.alloc(MaxReadChunk);
 
         while (true) {
-          const readFrom = newPos + carryOverBytes;
+          const prevCarryOverBytes = carryOverBytes;
+          const readFrom = newPos + prevCarryOverBytes;
           if (readFrom >= fileSize) break;
 
           const readLen = Math.min(MaxReadChunk, fileSize - readFrom);
@@ -1055,7 +1069,9 @@ class Watcher extends EventEmitter {
             carryOverBytes = 0;
           }
 
-          let chunkBytes = 0;
+          // Start from prevCarryOverBytes so carryOver bytes from the previous
+          // iteration are counted exactly once toward newPos advancement.
+          let chunkBytes = prevCarryOverBytes;
 
           for (let i = 0; i < rawLines.length; i++) {
             let rawLine = rawLines[i];
@@ -1155,6 +1171,7 @@ class Watcher extends EventEmitter {
       try { await fsp.access(p); } catch {
         this.filePositions.delete(p);
         this.fileContexts.delete(p);
+        this._readLocks.delete(p);
       }
     }
 
@@ -1172,6 +1189,10 @@ class Watcher extends EventEmitter {
         this.emit('broadcast', 'sessionRemoved', { sessionID });
       }
     }
+
+    for (const sid of this.pendingSubagents.keys()) {
+      if (!this.sessions.has(sid)) this.pendingSubagents.delete(sid);
+    }
   }
 
   // =========================================================================
@@ -1190,15 +1211,20 @@ class Watcher extends EventEmitter {
         if (p) {
           this.fileContexts.delete(p);
           this.filePositions.delete(p);
+          this._readLocks.delete(p);
           const timer = this.debounceTimers.get(p);
           if (timer) {
             clearTimeout(timer);
             this.debounceTimers.delete(p);
           }
+          if (this.watcher) {
+            this.watcher.unwatch(p);
+          }
         }
       }
     }
     this.sessions.delete(sessionID);
+    this.pendingSubagents.delete(sessionID);
     if (session) {
       this.emit('sessionRemoved', { sessionID });
     }
@@ -1237,7 +1263,11 @@ function createWalkDir(readdirFn) {
           callback(fullPath, stats);
         }
       }
-    } catch {}
+    } catch (err) {
+      if (err.code !== 'ENOENT' && err.code !== 'EACCES') {
+        console.error(`[watcher] _walkDir error on ${dir}: ${err.message}`);
+      }
+    }
   };
   return walk;
 }