claude-code-watch 0.0.15 → 0.0.17

package/package.json

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

package/public/index.html

@@ -200,6 +200,7 @@ body {
 .stream-line.tool-output { color: var(--green); }
 .stream-line.text { color: var(--text); }
 .stream-line.hook { color: var(--cyan); }
+.stream-line .hook-label { color: var(--dim); }
 .stream-line.diag { color: var(--red); }
 .stream-line.debug { color: var(--gray); }
 .stream-line.marker { color: var(--dim); }
@@ -319,6 +320,7 @@ body {
   <span class="sep">│</span>
   <span id="item-count">0 items</span>
   <span class="sep">│</span>
+  <span id="footer-version" style="margin-left:auto;font-size:10px;color:var(--dim)"></span>
   </div>
 
 <script src="vendor/highlight.min.js"></script>
@@ -379,6 +381,7 @@ let showText = true;
 let showHook = true;
 let showActivity = true;
 let autoDiscovery = true;
+let appVersion = '';
 
 let renderPending = false;
 
@@ -505,6 +508,7 @@ function handleMessage(msg) {
     case 'autoDiscoveryChanged': autoDiscovery = msg.payload.enabled; scheduleRender(); break;
     case 'context': contextData = msg.payload; scheduleRender(); break;
     case 'config':
+      if (msg.payload.version) appVersion = msg.payload.version;
       if (msg.payload.collapseAfter > 0 && !collapseTimer) {
         applyCollapsePolicy(msg.payload.collapseAfter);
       }
@@ -983,7 +987,11 @@ function renderItem(item) {
       if (item.toolName) label += ' ' + item.toolName;
       if (item.durationMs > 0) label += ' ' + fmtDur(item.durationMs);
       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 });
+      if (item.hookCommand) lines.push({ cls: 'stream-line hook', text: `<span class="hook-label">command:</span> ${esc(item.hookCommand)}`, html: true });
+      if (item.hookContent) {
+        for (const l of truncContent(item.hookContent)) lines.push({ cls: 'stream-line hook', text: `<span class="hook-label">content:</span> ${esc(l)}`, html: true });
+      }
+      for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line hook', text: `<span class="hook-label">stdout:</span> ${esc(l)}`, html: true });
       break;
     }
     case 'diagnostics': {
@@ -1046,6 +1054,13 @@ function refreshButtons() {
     }
   }
   tokenInfo.textContent = tokStr;
+
+  // Footer version
+  const vEl = document.getElementById('footer-version');
+  if (vEl) {
+    const v = appVersion ? `v${appVersion}` : '';
+    vEl.innerHTML = `${v ? v + ' · ' : ''}<a href="https://github.com/shuxuecode/claude-watch" target="_blank" rel="noopener" style="color:var(--dim);display:inline-flex;align-items:center;gap:3px"><svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" style="vertical-align:middle"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>claude-watch</a>`;
+  }
 }
 
 // ══════════════════════════════════════════════════════════════════════════════

package/src/parser/parser.js

@@ -28,6 +28,7 @@ function makeItem(overrides = {}) {
   return {
     type: '', sessionID: '', agentID: '', agentName: '', timestamp: 0,
     content: '', toolName: '', toolID: '', durationMs: 0,
+    hookContent: '', hookCommand: '',
     inputTokens: 0, outputTokens: 0, cacheCreationTokens: 0, cacheReadTokens: 0,
     model: '',
     ...overrides,
@@ -212,14 +213,18 @@ function parseAttachment(raw, timestamp) {
   const name = agentDisplayName(raw.agentId);
   switch (raw.attachment.type) {
     case 'hook_success': {
-      const body = raw.attachment.stdout || '';
+      const stdout = (raw.attachment.stdout || '').replace(/\n$/, '');
+      const stdin = raw.attachment.content || '';
+      const hookContent = stdin && stdin !== stdout ? stdin : '';
       return [makeItem({
         type: StreamItemType.HOOK_OUTPUT,
         sessionID: raw.sessionId,
         agentID: raw.agentId || '',
         agentName: name,
         toolName: raw.attachment.hookName || '',
-        content: body,
+        content: stdout,
+        hookContent: hookContent,
+        hookCommand: raw.attachment.command || '',
         durationMs: raw.attachment.durationMs || 0,
         timestamp,
       })];

package/src/server/server.js

@@ -10,6 +10,8 @@ var { WebSocketServer } = require('ws');
 var { Watcher, listSessions, listActiveSessions } = require('../watcher/watcher');
 var { setDebugAll, contextWindowFor } = require('../parser/parser');
 
+var PACKAGE_VERSION = require('../../package.json').version;
+
 var MIME = {
   '.html': 'text/html; charset=utf-8',
   '.css': 'text/css; charset=utf-8',
@@ -306,7 +308,7 @@ class DashboardServer {
   }
 
   sendConfig(ws) {
-    this.send(ws, 'config', { collapseAfter: this.collapseAfterMs });
+    this.send(ws, 'config', { collapseAfter: this.collapseAfterMs, version: PACKAGE_VERSION });
   }
 
   setupWatcher(watcherOpts) {