claude-code-watch 0.0.12 → 0.0.15

package/package.json

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

package/public/index.html

@@ -147,18 +147,27 @@ body {
 
 /* ── Tree node styles ── */
 .tree-row {
-  display: flex; align-items: center;
+  display: flex; align-items: flex-start;
+}
+.tree-content {
+  flex: 1; min-width: 0;
 }
+.tree-content:hover { background: rgba(255,255,255,0.05); }
+.tree-row.selected > .tree-content { background: rgba(124,58,237,0.3); }
+.tree-content.dim { opacity: 0.4; }
 .tree-node {
-  flex: 1; display: flex; align-items: center;
+  display: flex; align-items: center;
   padding: 3px 2px 3px 0;
   cursor: pointer; white-space: nowrap; gap: 4px;
-  min-width: 0; overflow: hidden;
+  overflow: hidden;
 }
-.tree-node:hover { background: rgba(255,255,255,0.05); }
-.tree-node.selected { background: rgba(124,58,237,0.3); }
-.tree-node.dim { opacity: 0.4; }
 .tree-prefix { color: var(--dim); font-size: 12px; flex-shrink: 0; letter-spacing: 0; font-family: monospace; }
+.tree-activity {
+  font-size: 10px; color: var(--dim); white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis;
+  padding: 0 2px 2px; line-height: 1.2;
+  cursor: pointer;
+}
 .tree-node .ctx-pct { font-size: 10px; margin-left: 4px; flex-shrink: 0; }
 .tree-node .ctx-pct.warn { color: var(--yellow); }
 .tree-node .ctx-pct.danger { color: var(--red); }
@@ -194,9 +203,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 ── */
@@ -247,8 +258,8 @@ body {
 :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-content:hover { background: rgba(0,0,0,0.06); }
+:root[data-theme="light"] .tree-row.selected > .tree-content { 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); }
@@ -286,6 +297,7 @@ body {
       <button class="btn btn-icon" onclick="selectAll()" data-tooltip="Show all sessions/agents">⊞</button>
       <button class="btn btn-icon accent" onclick="soloSelected()" data-tooltip="Solo selected">⊙</button>
       <button class="btn btn-icon danger" onclick="removeSelectedSession()" data-tooltip="Remove session">✕</button>
+      <button class="btn btn-icon on" id="btn-activity" onclick="toggleActivity()" data-tooltip="Toggle activity info">💬</button>
       <span style="flex:1"></span>
       <span id="tree-cursor-info" style="font-size:10px;color:var(--dim)"></span>
     </div>
@@ -355,6 +367,9 @@ class LRUCache {
 }
 const seenToolIDs = new LRUCache(5000);
 const toolNameMap = new LRUCache(2000);
+const agentActivity = new Map();  // "sessionID:agentID" → { toolName, content }
+const taskDescriptions = new Map(); // toolID → description string
+const MAX_DESC_STORE = 200;
 let filters = new Map();
 
 let showThinking = true;
@@ -362,6 +377,7 @@ let showToolInput = true;
 let showToolOutput = true;
 let showText = true;
 let showHook = true;
+let showActivity = true;
 let autoDiscovery = true;
 
 let renderPending = false;
@@ -644,6 +660,20 @@ function pushItem(item) {
     toolNameMap.set(item.toolID, item.toolName);
   }
 
+  if (item.type === 'tool_input') {
+    // Main 代理不追踪工具调用，只显示用户 prompt
+    if (item.agentID) {
+      agentActivity.set(item.sessionID + ':' + item.agentID, { toolName: item.toolName || '', content: (item.content || '').slice(0, MAX_DESC_STORE) });
+    }
+    if (item.toolID) {
+      taskDescriptions.set(item.toolID, (item.content || '').slice(0, MAX_DESC_STORE));
+    }
+  }
+
+  if (item.type === 'user_text') {
+    agentActivity.set(item.sessionID + ':' + (item.agentID || ''), { toolName: '', content: (item.content || '').slice(0, MAX_DESC_STORE) });
+  }
+
   if (item.toolID) {
     const key = `${item.toolID}:${item.type}`;
     if (seenToolIDs.has(key)) return;
@@ -669,6 +699,7 @@ function isItemVisible(item) {
     case 'tool_output': return showToolOutput;
     case 'text': return showText;
     case 'hook_output': return showHook;
+    case 'user_text': return false;
     default: return true;
   }
 }
@@ -692,14 +723,23 @@ function rebuildNodes() {
       );
       const lastTaskIdx = tasks.length - 1;
       const hasTasks = tasks.length > 0;
-      treeNodes.push({ type: a.type, id: a.id, name: a.name, sessionID: s.id, level: 1, isLast: isLastAgent && !hasTasks });
+      const actKey = s.id + ':' + a.id;
+      const act = agentActivity.get(actKey);
+      treeNodes.push({
+        type: a.type, id: a.id, name: a.name, sessionID: s.id,
+        level: 1, isLast: isLastAgent && !hasTasks,
+        activityTool: act ? act.toolName : '',
+        activityDesc: act ? act.content : '',
+      });
       for (let ti = 0; ti < tasks.length; ti++) {
         const t = tasks[ti];
+        const tDesc = taskDescriptions.get(t.id);
         treeNodes.push({
           type: 'task', id: t.id, name: t.toolName,
           sessionID: s.id, parentAgentID: t.parentAgentID,
           outputPath: t.outputPath, isComplete: t.isComplete,
           level: 2, isLast: isLastAgent && ti === lastTaskIdx,
+          description: tDesc || '',
         });
       }
     }
@@ -734,10 +774,12 @@ function getNodeHTML(node, idx) {
     const subInfo = parts.length > 0 ? ` <span style="color:#6b7280;font-size:10px">${parts.join(' · ')}</span>` : '';
     const agentCount = node.agents ? node.agents.filter(a => a.type === 'agent').length : 0;
     return `<div class="tree-row${selClass ? ' selected' : ''}">
-      <div class="tree-node" onclick="treeClick(${idx})" data-idx="${idx}">
-        <span class="tree-prefix">${treePrefix(node)}</span>${activeDot} ${node.collapsed ? '▸' : '▾'} ${esc(displayName)}
-        ${node.collapsed && agentCount > 0 ? `(${esc(String(agentCount))})` : ''}
-        ${subInfo}
+      <div class="tree-content" onclick="treeClick(${idx})" data-idx="${idx}">
+        <div class="tree-node">
+          <span class="tree-prefix">${treePrefix(node)}</span>${activeDot} ${node.collapsed ? '▸' : '▾'} ${esc(displayName)}
+          ${node.collapsed && agentCount > 0 ? `(${esc(String(agentCount))})` : ''}
+          ${subInfo}
+        </div>
       </div>
       <span class="tree-actions">
         <button class="btn btn-icon accent" onclick="event.stopPropagation();selectIndex(${idx});soloSelected()" data-tooltip="Solo">⊙</button>
@@ -758,9 +800,19 @@ function getNodeHTML(node, idx) {
       ctxPct = `<span class="ctx-pct ${cls}">${pct}%</span>`;
     }
     const activeDot = ctx && (Date.now() - ctx.lastActivity < 120000) ? '<span class="active-dot on">🟢</span>' : '<span class="active-dot off">⚪</span>';
+    const actIcon = node.type === 'main' ? '🗣' : '⚡';
+    const actText = showActivity && (node.activityTool || node.activityDesc)
+      ? (node.activityTool && node.activityDesc ? `${node.activityTool}: ${node.activityDesc}` : (node.activityTool || node.activityDesc))
+      : '';
+    const activityHTML = actText
+      ? `<div class="tree-activity">${actIcon} ${esc(actText)}</div>`
+      : '';
     return `<div class="tree-row${selClass ? ' selected' : ''}">
-      <div class="tree-node${enabled ? '' : ' dim'}" onclick="treeClick(${idx})" data-idx="${idx}">
+      <div class="tree-content${enabled ? '' : ' dim'}" onclick="treeClick(${idx})" data-idx="${idx}">
+        <div class="tree-node">
           <span class="tree-prefix">${treePrefix(node)}</span>${activeDot} ${icon} ${esc(node.name || '')}${ctxPct}
+        </div>
+        ${activityHTML}
       </div>
       <span class="tree-actions">
         <button class="btn btn-icon accent" onclick="event.stopPropagation();selectIndex(${idx});soloSelected()" data-tooltip="Solo">⊙</button>
@@ -771,9 +823,15 @@ function getNodeHTML(node, idx) {
 
   if (node.type === 'task') {
     const icon = node.isComplete ? '✓' : '⏳';
+    const descHTML = showActivity && node.description
+      ? `<div class="tree-activity">📋 ${esc(node.description)}</div>`
+      : '';
     return `<div class="tree-row${selClass ? ' selected' : ''}">
-      <div class="tree-node dim" onclick="treeClick(${idx})" data-idx="${idx}">
+      <div class="tree-content dim" onclick="treeClick(${idx})" data-idx="${idx}">
+        <div class="tree-node">
           <span class="tree-prefix">${treePrefix(node)}</span>${icon} ${esc(node.name || 'bg-task')}
+        </div>
+        ${descHTML}
       </div>
       <span class="tree-actions">
         <button class="btn btn-icon" onclick="event.stopPropagation();selectIndex(${idx});loadBgTask(${idx})" data-tooltip="Load output">▶</button>
@@ -797,7 +855,7 @@ function renderTree() {
   treeEl.innerHTML = html;
 
   // Scroll selected into view
-  const sel = treeEl.querySelector('.tree-node.selected');
+  const sel = treeEl.querySelector('.tree-row.selected');
   if (sel) sel.scrollIntoView({ block: 'nearest' });
 
   treeCursorInfo.textContent = `${treeCursor + 1}/${treeNodes.length}`;
@@ -894,14 +952,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': {
@@ -911,33 +970,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;
     }
@@ -962,6 +1021,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-activity').classList.toggle('on', showActivity);
   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);
@@ -1141,6 +1201,7 @@ function toggleText() { showText = !showText; needsFullRender = true;
   visibleDirty = true; renderStream(); refreshButtons(); }
 function toggleHook() { showHook = !showHook; 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); }
 function toggleAutoDiscovery() { sendCmd('toggleAutoDiscovery'); }
@@ -1272,6 +1333,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/parser/parser.js

@@ -9,6 +9,7 @@ var StreamItemType = {
   TOOL_INPUT: 'tool_input',
   TOOL_OUTPUT: 'tool_output',
   TEXT: 'text',
+  USER_TEXT: 'user_text',
   TURN_MARKER: 'turn_marker',
   COMPACT_MARKER: 'compact_marker',
   HOOK_OUTPUT: 'hook_output',
@@ -368,7 +369,7 @@ function parseAssistantMessage(raw, timestamp) {
 
 function parseUserMessage(raw, timestamp) {
   const msg = raw.message;
-  if (!msg || !Array.isArray(msg.content)) return [];
+  if (!msg) return [];
 
   // Parse toolUseResult for duration
   let durationMs = 0;
@@ -379,20 +380,54 @@ function parseUserMessage(raw, timestamp) {
   const items = [];
   const name = agentDisplayName(raw.agentId);
 
-  for (const result of msg.content) {
-    if (result.type === 'tool_result') {
+  // String content — user prompt
+  if (typeof msg.content === 'string' && msg.content) {
+    const text = stripNonUserContent(msg.content);
+    if (text) {
       items.push(makeItem({
-        type: StreamItemType.TOOL_OUTPUT,
+        type: StreamItemType.USER_TEXT,
         agentID: raw.agentId || '',
         agentName: name,
-        content: extractToolResultContent(result.content),
-        toolID: result.tool_use_id || '',
-        durationMs,
+        content: text,
         timestamp,
       }));
     }
   }
 
+  // Array content — mixed text blocks and tool_result blocks
+  if (Array.isArray(msg.content)) {
+    const textParts = [];
+    for (const block of msg.content) {
+      if (block.type === 'text' && block.text) {
+        const text = stripNonUserContent(block.text);
+        if (text) textParts.push(text);
+      }
+    }
+    if (textParts.length > 0) {
+      items.push(makeItem({
+        type: StreamItemType.USER_TEXT,
+        agentID: raw.agentId || '',
+        agentName: name,
+        content: textParts.join('\n'),
+        timestamp,
+      }));
+    }
+
+    for (const result of msg.content) {
+      if (result.type === 'tool_result') {
+        items.push(makeItem({
+          type: StreamItemType.TOOL_OUTPUT,
+          agentID: raw.agentId || '',
+          agentName: name,
+          content: extractToolResultContent(result.content),
+          toolID: result.tool_use_id || '',
+          durationMs,
+          timestamp,
+        }));
+      }
+    }
+  }
+
   return items;
 }
 
@@ -413,6 +448,19 @@ function extractToolResultContent(content) {
   }
 }
 
+function stripNonUserContent(text) {
+  if (!text) return '';
+  // Remove tags that wrap non-user content
+  let s = text;
+  s = s.replace(/<local-command-caveat>[\s\S]*?<\/local-command-caveat>/g, '');
+  s = s.replace(/<command-name>[\s\S]*?<\/command-name>/g, '');
+  s = s.replace(/<command-message>[\s\S]*?<\/command-message>/g, '');
+  s = s.replace(/<command-args>[\s\S]*?<\/command-args>/g, '');
+  s = s.replace(/<local-command-stdout>[\s\S]*?<\/local-command-stdout>/g, '');
+  // Trim and return; empty string means no real user content
+  return s.trim();
+}
+
 // ============================================================================
 // Tool Input Formatting
 // ============================================================================
@@ -497,5 +545,6 @@ module.exports = {
   formatToolInput,
   prettyToolName,
   agentDisplayName,
+  stripNonUserContent,
   MAX_TOOL_INPUT_LENGTH,
 };