claude-code-watch 0.1.1 → 0.1.2

package/package.json

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

package/public/index.html

@@ -407,6 +407,7 @@ body {
       <button class="btn btn-icon accent" onclick="soloSelected()" data-tooltip="独显：只看选中项，再点恢复全显">⊙</button>
       <button class="btn btn-icon danger" onclick="removeSelectedSession()" data-tooltip="移除：隐藏选中会话（24h）">✕</button>
       <button class="btn btn-icon on" id="btn-activity" onclick="toggleActivity()" data-tooltip="活动：显示/隐藏操作摘要">💬</button>
+      <button class="btn btn-icon on" id="btn-token-display" onclick="toggleTokenDisplay()" data-tooltip="上下文：Token数 ↔ 百分比切换">T</button>
       <span style="flex:1"></span>
       <span id="tree-cursor-info" style="font-size:10px;color:var(--dim)"></span>
     </div>
@@ -512,6 +513,7 @@ let showText = true;
 let showHook = true;
 let showUserPrompt = true;
 let showActivity = true;
+let showTokenCount = true;
 let autoDiscovery = true;
 let appVersion = '';
 
@@ -1078,7 +1080,11 @@ function getNodeHTML(node, idx) {
     if (ctx && ctx.contextWindow > 0 && ctx.inputTokens > 0) {
       const pct = Math.round(ctx.inputTokens / ctx.contextWindow * 100);
       const cls = pct > 80 ? 'danger' : pct > 50 ? 'warn' : '';
-      ctxPct = `<span class="ctx-pct ${cls}">${pct}%</span>`;
+      if (showTokenCount) {
+        ctxPct = `<span class="ctx-pct ${cls}">${fmtTok(ctx.inputTokens)}</span>`;
+      } else {
+        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' ? '🗣' : '⚡';
@@ -1375,6 +1381,10 @@ function refreshButtons() {
   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);
+  const btnTokenDisplay = document.getElementById('btn-token-display');
+  btnTokenDisplay.classList.toggle('on', true);
+  btnTokenDisplay.textContent = showTokenCount ? 'T' : '%';
+  btnTokenDisplay.setAttribute('data-tooltip', showTokenCount ? '上下文：Token数 ↔ 百分比切换' : '上下文：百分比 ↔ Token数切换');
   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);
@@ -1614,6 +1624,12 @@ function toggleHook() { showHook = !showHook; needsFullRender = true;
 function toggleUserPrompt() { showUserPrompt = !showUserPrompt; needsFullRender = true;
   visibleDirty = true; renderStream(); refreshButtons(); }
 function toggleActivity() { showActivity = !showActivity; rebuildNodes(); scheduleRender(); refreshButtons(); }
+function toggleTokenDisplay() {
+  showTokenCount = !showTokenCount;
+  treeDirty = true;
+  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'); }
@@ -1786,8 +1802,8 @@ function fmtTimestamp(ts) {
 function fmtTok(n) {
   if (!n) return '0';
   if (n < 1000) return String(n);
-  if (n < 1000000) return (n / 1000).toFixed(1) + 'k';
-  return (n / 1000000).toFixed(1) + 'm';
+  if (n < 1000000) return (n / 1000).toFixed(2) + 'k';
+  return (n / 1000000).toFixed(2) + 'm';
 }
 
 function renderAll() {