claude-code-watch 0.2.0 → 0.2.2

package/package.json

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

package/public/css/app.css

@@ -203,9 +203,8 @@ body {
 #tokens-page { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 20px 24px; gap: 16px; background: var(--bg); }
 .tp-refresh-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-bottom: 4px; }
 .tp-refresh-info { font-size: 11px; color: var(--dim); }
-.tp-top { display: flex; gap: 16px; }
-.tp-left { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
-.tp-right { flex: 1; display: flex; flex-direction: column; gap: 12px; }
+.tp-top { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 16px; }
+.tp-row2 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
 .tp-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
 .tp-total-label { font-size: 11px; color: var(--dim); text-transform: uppercase; margin-bottom: 2px; }
 .tp-total-value { font-size: 22px; font-weight: 700; color: var(--white); font-family: monospace; }
@@ -225,7 +224,7 @@ body {
 .tp-h3 { font-size: 12px; color: var(--dim); font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
 
 /* ── Heatmap ── */
-.tp-heatmap { overflow-x: auto; }
+.tp-heatmap { overflow-x: auto; text-align: center; }
 .tp-heatmap-inner { display: inline-flex; flex-direction: column; gap: 2px; }
 .tp-hm-months { display: flex; gap: 0; font-size: 10px; color: var(--dim); margin-bottom: 2px; padding-left: 28px; }
 .tp-hm-row { display: flex; align-items: center; gap: 2px; }
@@ -233,17 +232,18 @@ body {
 .tp-hm-cell { width: 12px; height: 12px; border-radius: 2px; transition: transform 0.15s; cursor: pointer; position: relative; }
 .tp-hm-cell:hover { transform: scale(1.6); z-index: 10; }
 .tp-hm-cell[title]:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg2); color: var(--white); padding: 2px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; z-index: 100; border: 1px solid var(--border); pointer-events: none; }
-.tp-hm-legend { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--dim); margin-top: 6px; justify-content: flex-end; }
+.tp-hm-legend { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--dim); margin-top: 6px; justify-content: center; }
 .tp-hm-legend-cell { width: 12px; height: 12px; border-radius: 2px; }
 
 /* ── Trend bars ── */
-.tp-trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; position: relative; padding-bottom: 20px; }
-.tp-trend-bar-wrap { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; }
-.tp-trend-bar { position: relative; border-radius: 3px 3px 0 0; transition: all 0.15s; cursor: pointer; min-height: 4px; }
+.tp-trend-bars { display: flex; align-items: stretch; gap: 3px; height: 140px; position: relative; }
+.tp-trend-bar-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.tp-trend-bar-area { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; }
+.tp-trend-bar { position: relative; border-radius: 3px 3px 0 0; transition: all 0.15s; cursor: pointer; min-height: 4px; width: 100%; }
 .tp-trend-bar:hover { filter: brightness(1.3); }
 .tp-trend-bar:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg2); color: var(--white); padding: 2px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; z-index: 100; border: 1px solid var(--border); pointer-events: none; }
-.tp-trend-label { font-size: 9px; color: var(--dim); text-align: center; position: absolute; bottom: 0; width: 100%; white-space: nowrap; overflow: hidden; }
-.tp-trend-grid-lines { position: absolute; inset: 0 0 20px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
+.tp-trend-label { font-size: 11px; color: var(--text); text-align: center; padding-top: 6px; white-space: nowrap; }
+.tp-trend-grid-lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
 .tp-trend-grid-line { width: 100%; border-top: 1px dashed var(--border); opacity: 0.4; }
 
 /* ── Detail table ── */
@@ -267,32 +267,34 @@ body {
 .tp-chart-title { font-size: 12px; color: var(--dim); font-weight: 600; text-transform: uppercase; margin-bottom: 10px; }
 
 /* ── Stacked bar chart (weekly / monthly) ── */
-.tp-stack-bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; position: relative; padding-bottom: 22px; }
-.tp-stack-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 0; height: 100%; }
-.tp-stack-seg { transition: all 0.15s; cursor: pointer; min-height: 1px; }
+.tp-stack-bars { display: flex; align-items: stretch; gap: 4px; height: 240px; position: relative; }
+.tp-stack-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.tp-stack-bar-area { flex: 1; display: flex; align-items: stretch; }
+.tp-stack-seg { transition: all 0.15s; cursor: pointer; min-height: 1px; width: 100%; }
 .tp-stack-seg:hover { filter: brightness(1.3); }
 .tp-stack-bar-group:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg2); color: var(--white); padding: 3px 10px; border-radius: 4px; font-size: 11px; white-space: nowrap; z-index: 100; border: 1px solid var(--border); pointer-events: none; font-family: monospace; }
-.tp-stack-bar-group { display: flex; flex-direction: column; justify-content: flex-end; position: relative; height: 100%; cursor: pointer; }
-.tp-stack-label { font-size: 9px; color: var(--dim); text-align: center; position: absolute; bottom: 0; width: 100%; white-space: nowrap; overflow: hidden; }
+.tp-stack-bar-group { display: flex; flex-direction: column; justify-content: flex-end; position: relative; width: 100%; cursor: pointer; }
+.tp-stack-label { font-size: 11px; color: var(--text); text-align: center; padding-top: 6px; white-space: nowrap; }
 .tp-stack-grid { position: absolute; inset: 0 0 22px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
 .tp-stack-grid-line { width: 100%; border-top: 1px dashed var(--border); opacity: 0.3; }
 
 /* ── Hourly distribution chart ── */
-.tp-hourly-bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; position: relative; padding-bottom: 22px; }
-.tp-hourly-bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 0; height: 100%; }
-.tp-hourly-bar { border-radius: 3px 3px 0 0; transition: all 0.15s; cursor: pointer; min-height: 2px; }
+.tp-hourly-bars { display: flex; align-items: stretch; gap: 2px; height: 200px; position: relative; }
+.tp-hourly-bar-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.tp-hourly-bar-area { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; }
+.tp-hourly-bar { border-radius: 3px 3px 0 0; transition: all 0.15s; cursor: pointer; min-height: 2px; width: 100%; }
 .tp-hourly-bar:hover { filter: brightness(1.3); }
 .tp-hourly-bar:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg2); color: var(--white); padding: 2px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; z-index: 100; border: 1px solid var(--border); pointer-events: none; font-family: monospace; }
-.tp-hourly-label { font-size: 8px; color: var(--dim); text-align: center; position: absolute; bottom: 0; width: 100%; }
+.tp-hourly-label { font-size: 11px; color: var(--text); text-align: center; padding-top: 6px; }
 .tp-hourly-grid { position: absolute; inset: 0 0 22px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
 
 /* ── Model proportion doughnut ── */
 .tp-pie-wrap { display: flex; align-items: center; gap: 16px; }
-.tp-pie-ring { position: relative; width: 180px; height: 180px; border-radius: 50%; flex-shrink: 0; }
-.tp-pie-hole { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; flex-direction: column; }
+.tp-pie-ring { position: relative; width: 220px; height: 220px; border-radius: 50%; flex-shrink: 0; }
+.tp-pie-hole { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; flex-direction: column; }
 .tp-pie-hole-v { font-size: 14px; font-weight: 700; color: var(--white); font-family: monospace; }
 .tp-pie-hole-l { font-size: 9px; color: var(--dim); }
-.tp-pie-legend { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 180px; }
+.tp-pie-legend { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 220px; }
 .tp-pie-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; }
 .tp-pie-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 .tp-pie-name { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -348,6 +350,31 @@ body {
   font-size: 11px; flex-shrink: 0; flex-wrap: wrap;
 }
 #footer .sep { color: var(--dim); margin: 0 2px; }
+.version-update-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  color: var(--green, #3fb950); font-weight: 500;
+  text-decoration: none; padding: 1px 6px;
+  border-radius: 8px; border: 1px solid var(--green, #3fb950);
+  transition: background 0.2s, color 0.2s;
+  animation: version-badge-pulse 2s ease-in-out infinite;
+}
+.version-update-badge:hover {
+  background: var(--green, #3fb950); color: var(--bg, #0d1117);
+}
+.version-update-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--green, #3fb950);
+  display: inline-block;
+  animation: version-dot-blink 1.5s ease-in-out infinite;
+}
+@keyframes version-badge-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+@keyframes version-dot-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
 
 /* ── Scrollbar ── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
@@ -467,8 +494,8 @@ body {
 }
 
 @media (max-width: 768px) {
-  .tp-top { flex-direction: column; }
-  .tp-left { width: 100%; }
+  .tp-top { grid-template-columns: 1fr; }
+  .tp-row2 { grid-template-columns: 1fr; }
   .tp-charts-row { grid-template-columns: 1fr; }
   .tp-pie-wrap { flex-direction: column; align-items: center; }
 }

package/public/index.html

@@ -13,24 +13,24 @@
 <div id="header">
   <button class="btn on" id="tab-stream" onclick="switchTab('stream')">📡 Stream</button>
   <button class="btn" id="tab-tokens" onclick="switchTab('tokens')">📊 Tokens</button>
-  <span class="sep">│</span>
-  <button class="btn on" id="btn-thinking" onclick="toggleThinking()" data-tooltip="Toggle thinking">🧠 Thinking</button>
-  <button class="btn on" id="btn-tool-input" onclick="toggleToolInput()" data-tooltip="Toggle tool input">🔧 Tools</button>
-  <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>
-  <span class="sep">│</span>
-  <span id="session-info">Connecting...</span>
+  <span class="stream-only sep">│</span>
+  <button class="btn on stream-only" id="btn-thinking" onclick="toggleThinking()" data-tooltip="Toggle thinking">🧠 Thinking</button>
+  <button class="btn on stream-only" id="btn-tool-input" onclick="toggleToolInput()" data-tooltip="Toggle tool input">🔧 Tools</button>
+  <button class="btn on stream-only" id="btn-tool-output" onclick="toggleToolOutput()" data-tooltip="Toggle tool output">📤 Output</button>
+  <button class="btn on stream-only" id="btn-text" onclick="toggleText()" data-tooltip="Toggle text responses">💬 Text</button>
+  <button class="btn on stream-only" id="btn-hook" onclick="toggleHook()" data-tooltip="Toggle hook output">🪝 Hook</button>
+  <button class="btn on stream-only" id="btn-user-prompt" onclick="toggleUserPrompt()" data-tooltip="Toggle user prompt">👤 Prompt</button>
+  <span class="stream-only sep">│</span>
+  <button class="btn on stream-only" id="btn-autoscroll" onclick="toggleAutoScroll()" data-tooltip="Auto-scroll">⇣ Auto</button>
+  <button class="btn stream-only" id="btn-tree-toggle" onclick="toggleTree()" data-tooltip="Toggle tree panel">📂 Tree</button>
+  <span class="stream-only sep">│</span>
+  <span class="stream-only" id="session-info">Connecting...</span>
   <div class="auto">
-    <button class="btn btn-icon" id="btn-export" onclick="openExportModal()" data-tooltip="导出 HTML">💾</button>
+    <button class="btn btn-icon stream-only" id="btn-export" onclick="openExportModal()" data-tooltip="导出 HTML">💾</button>
     <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>
+    <button class="btn on stream-only" id="btn-autodisco" onclick="toggleAutoDiscovery()" data-tooltip="Auto-discover">🔍 Auto</button>
+    <span class="stream-only sep">│</span>
+    <span class="stream-only" id="token-info"></span>
   </div>
 </div>
 
@@ -64,15 +64,9 @@
     <button class="btn" id="btn-refresh-tokens" onclick="refreshTokenStats()">🔄 刷新数据</button>
   </div>
   <div class="tp-top">
-    <div class="tp-left">
-      <div class="tp-box" id="tp-total-card"></div>
-      <div class="tp-box" id="tp-stats-grid"></div>
-      <div class="tp-box" id="tp-model-rank"></div>
-    </div>
-    <div class="tp-right">
-      <div class="tp-box" id="tp-trend-card"></div>
-      <div class="tp-box" id="tp-heatmap-card"></div>
-    </div>
+    <div class="tp-box" id="tp-total-card"></div>
+    <div class="tp-box" id="tp-stats-grid"></div>
+    <div class="tp-box" id="tp-model-rank"></div>
   </div>
   <div class="tp-charts-row" id="tp-charts-row">
     <div class="tp-chart-box" id="tp-weekly-chart" role="img" aria-label="Weekly token consumption chart"></div>
@@ -80,6 +74,10 @@
     <div class="tp-chart-box" id="tp-model-pie" role="img" aria-label="Model token proportion chart"></div>
     <div class="tp-chart-box" id="tp-hourly-chart" role="img" aria-label="Active time distribution chart"></div>
   </div>
+  <div class="tp-row2">
+    <div class="tp-box" id="tp-heatmap-card"></div>
+    <div class="tp-box" id="tp-trend-card"></div>
+  </div>
   <div class="tp-box">
     <div class="tp-tabs" id="tp-detail-tabs"></div>
     <div id="tp-tc-daily" class="tp-tc"><div class="tp-st" id="tp-daily-table"></div></div>

package/public/js/app.js

@@ -17,6 +17,7 @@ let lastMsgTime = 0;
 let staleCheckTimer = null;
 let currentTab = 'stream';
 let appVersion = '';
+let latestVersion = '';
 
 // Cache highlight.js CSS for HTML export
 let hljsDarkCSS = '', hljsLightCSS = '';
@@ -93,6 +94,7 @@ function handleMessage(msg) {
     case 'tokenStats': handleTokenStats(msg.payload); break;
     case 'config':
       if (msg.payload.version) appVersion = msg.payload.version;
+      if (msg.payload.latestVersion) { latestVersion = msg.payload.latestVersion; renderFooterVersion(); }
       if (msg.payload.collapseAfter > 0) {
         applyCollapsePolicy(msg.payload.collapseAfter);
       }
@@ -143,7 +145,11 @@ function renderFooterVersion() {
   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>`;
+    const hasUpdate = latestVersion && appVersion && latestVersion !== appVersion;
+    const updateBadge = hasUpdate
+      ? `<a href="https://www.npmjs.com/package/claude-code-watch" target="_blank" rel="noopener" class="version-update-badge" data-tooltip="New version available! Click to view on npm"><span class="version-update-dot"></span>v${latestVersion} ↑</a>`
+      : '';
+    vEl.innerHTML = `${v ? v + ' ' : ''}${updateBadge}${updateBadge ? ' · ' : ''}<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>`;
   }
 }
 
@@ -162,6 +168,10 @@ function switchTab(tab) {
   document.getElementById('tab-stream').classList.toggle('on', tab === 'stream');
   document.getElementById('tab-tokens').classList.toggle('on', tab === 'tokens');
   document.getElementById('footer').style.display = tab === 'stream' ? 'flex' : 'none';
+  // Toggle stream-only header controls
+  document.querySelectorAll('.stream-only').forEach(el => {
+    el.style.display = tab === 'stream' ? '' : 'none';
+  });
   if (tab === 'tokens' && !tokenStatsRendered && tokenStatsData.totals.messages > 0) {
     tokenStatsRendered = true;
     renderTokenPage();

package/public/js/shared.js

@@ -203,7 +203,7 @@ function aggregateWeekly(dailyKeys, daily) {
     const d = new Date(k);
     const wk = getWeekKey(d);
     if (!result[wk]) result[wk] = { messages: 0, input: 0, output: 0, cacheCreation: 0, cacheRead: 0, models: {}, dateRange: k };
-    else result[wk].dateRange += ' ~ ' + k;
+    else result[wk].dateRange = result[wk].dateRange.split(' ~ ')[0] + ' ~ ' + k;
     const day = daily[k];
     result[wk].messages += day.messages;
     result[wk].input += day.input;

package/public/js/token.js

@@ -167,14 +167,14 @@ function buildTrend(daily) {
     const label = k.slice(5);
     const tip = `${k}: ${fmtTS(v)}`;
     const color = pct < 30 ? '#0e6b5a' : pct < 60 ? '#12b886' : pct < 80 ? '#34d399' : '#6ee7b7';
-    barsHTML += `<div class="tp-trend-bar-wrap"><div class="tp-trend-bar" style="height:${Math.max(pct, 3)}%;background:${color}" data-tip="${esc(tip)}"></div><span class="tp-trend-label">${esc(label)}</span></div>`;
+    barsHTML += `<div class="tp-trend-bar-wrap"><div class="tp-trend-bar-area"><div class="tp-trend-bar" style="height:${Math.max(pct, 3)}%;background:${color}" data-tip="${esc(tip)}"></div></div><span class="tp-trend-label">${esc(label)}</span></div>`;
   }
 
   const gridLines = `<div class="tp-trend-grid-lines">
     <span style="font-size:9px;color:var(--dim);align-self:flex-start">${fmtTS(maxVal)}</span>
     <div class="tp-trend-grid-line"></div>
     <div class="tp-trend-grid-line"></div>
-    <span style="font-size:9px;color:var(--dim);align-self:center">${fmtTS(maxVal * 0.5)}</span>
+    <span style="font-size:9px;color:var(--dim);align-self:center">${fmtTS(Math.round(maxVal * 0.5))}</span>
     <div class="tp-trend-grid-line"></div>
     <span style="font-size:9px;color:var(--dim);align-self:flex-end">0</span>
   </div>`;
@@ -206,9 +206,7 @@ function buildModelRank(mt, totalAll) {
   return html;
 }
 
-// ── Stacked bar chart for weekly/monthly token consumption ──
-const STACK_COLORS = { input: '#58a6ff', output: '#f0883e', cacheRead: '#3fb950', cacheCreation: '#a371f7' };
-const STACK_LABELS = { input: '输入 Input', output: '输出 Output', cacheRead: '缓存读取 Cache Read', cacheCreation: '缓存创建 Cache Create' };
+// ── Bar chart for weekly/monthly token consumption ──
 
 function buildStackedChart(dailyKeys, daily, type) {
   const title = type === 'weekly' ? '📊 周 Token 消耗 Weekly Token Consumption' : '📊 月 Token 消耗 Monthly Token Consumption';
@@ -231,25 +229,11 @@ function buildStackedChart(dailyKeys, daily, type) {
   let barsHTML = '';
   for (let i = 0; i < periodKeys.length; i++) {
     const k = periodKeys[i];
-    const p = periods[k];
     const total = totals[i];
-
-    const segs = [
-      { key: 'input', val: p.input },
-      { key: 'output', val: p.output },
-      { key: 'cacheRead', val: p.cacheRead },
-      { key: 'cacheCreation', val: p.cacheCreation },
-    ];
-    let segsHTML = '';
-    for (const s of segs) {
-      const segPct = maxTotal > 0 ? (s.val / maxTotal * 100) : 0;
-      const segH = maxTotal > 0 ? Math.max(segPct, 0.5) : 0;
-      segsHTML += `<div class="tp-stack-seg" style="height:${segH}%;background:${STACK_COLORS[s.key]}"></div>`;
-    }
-
+    const pct = maxTotal > 0 ? (total / maxTotal * 100) : 0;
     const label = type === 'weekly' ? k.slice(5) : k.slice(2);
-    const tip = `${k}: 总计 ${fmtTS(total)} | 输入 ${fmtTS(p.input)} 输出 ${fmtTS(p.output)} 缓存读 ${fmtTS(p.cacheRead)} 缓存写 ${fmtTS(p.cacheCreation)}`;
-    barsHTML += `<div class="tp-stack-wrap"><div class="tp-stack-bar-group" data-tip="${esc(tip)}">${segsHTML}</div><span class="tp-stack-label">${esc(label)}</span></div>`;
+    const tip = `${k}: ${fmtTS(total)} tokens`;
+    barsHTML += `<div class="tp-stack-wrap"><div class="tp-stack-bar-area"><div class="tp-stack-bar-group" data-tip="${esc(tip)}"><div class="tp-stack-seg" style="height:${Math.max(pct, 1)}%;background:#58a6ff"></div></div></div><span class="tp-stack-label">${esc(label)}</span></div>`;
   }
 
   let gridHTML = '<div class="tp-stack-grid">';
@@ -260,13 +244,7 @@ function buildStackedChart(dailyKeys, daily, type) {
   gridHTML += `<span style="font-size:9px;color:var(--dim);align-self:flex-end">0</span>`;
   gridHTML += '</div>';
 
-  let legendHTML = '<div style="display:flex;gap:12px;margin-bottom:6px;font-size:10px;color:var(--dim)">';
-  for (const [key, color] of Object.entries(STACK_COLORS)) {
-    legendHTML += `<span style="display:inline-flex;align-items:center;gap:4px"><span style="width:8px;height:8px;border-radius:2px;background:${color};display:inline-block"></span>${STACK_LABELS[key]}</span>`;
-  }
-  legendHTML += '</div>';
-
-  return `<div class="tp-chart-title">${title}</div>${legendHTML}<div class="tp-stack-bars">${gridHTML}${barsHTML}</div>`;
+  return `<div class="tp-chart-title">${title}</div><div class="tp-stack-bars">${gridHTML}${barsHTML}</div>`;
 }
 
 // ── Model proportion doughnut chart ──
@@ -332,10 +310,10 @@ function buildHourlyChart(hourly) {
   for (let h = 0; h < 24; h++) {
     const calls = hourly[h] || 0;
     const pct = maxCalls > 0 ? (calls / maxCalls * 100) : 0;
-    const color = pct < 30 ? 'rgba(247,120,186,0.25)' : pct < 60 ? 'rgba(247,120,186,0.5)' : pct < 80 ? 'rgba(247,120,186,0.75)' : 'rgba(247,120,186,1)';
-    const borderColor = '#f778ba';
+    const color = pct < 30 ? 'rgba(16,185,129,0.25)' : pct < 60 ? 'rgba(16,185,129,0.5)' : pct < 80 ? 'rgba(16,185,129,0.75)' : 'rgb(16,185,129)';
+    const borderColor = 'rgb(16,185,129)';
     const tip = `${h}:00 · ${calls.toLocaleString()} 次调用 calls`;
-    barsHTML += `<div class="tp-hourly-bar-wrap"><div class="tp-hourly-bar" style="height:${Math.max(pct, 2)}%;background:${color};border:1px solid ${borderColor}" data-tip="${esc(tip)}"></div><span class="tp-hourly-label">${h}</span></div>`;
+    barsHTML += `<div class="tp-hourly-bar-wrap"><div class="tp-hourly-bar-area"><div class="tp-hourly-bar" style="height:${Math.max(pct, 2)}%;background:${color};border:1px solid ${borderColor}" data-tip="${esc(tip)}"></div></div><span class="tp-hourly-label">${h}</span></div>`;
   }
 
   let gridHTML = '<div class="tp-hourly-grid">';
@@ -366,7 +344,7 @@ function renderPeriodTable(keys, data, type) {
     const k = sorted[i];
     const d = data[k];
     const total = d.input + d.output + d.cacheCreation + d.cacheRead;
-    const label = type === 'daily' ? k : k + '<br><small style="color:var(--dim)">' + esc(d.dateRange || '') + '</small>';
+    const label = type === 'daily' ? k : type === 'monthly' ? k : k + '<br><small style="color:var(--dim)">' + esc(d.dateRange || '') + '</small>';
     const modelsHtml = Object.entries(d.models).sort((a, b) => {
       const sA = a[1].input + a[1].output + a[1].cacheCreation + a[1].cacheRead;
       const sB = b[1].input + b[1].output + b[1].cacheCreation + b[1].cacheRead;

package/src/server/server.js

@@ -7,12 +7,35 @@ var os = require('os');
 var cp = require('child_process');
 var readline = require('readline');
 var { WebSocketServer } = require('ws');
+var { compareVersions } = require('../cli-helpers');
 var { Watcher, listSessions, listActiveSessions } = require('../watcher/watcher');
 var { setDebugAll, contextWindowFor } = require('../parser/parser');
 var { fullScanTokenUsage } = require('../scanner/scanner');
 
 var PACKAGE_VERSION = require('../../package.json').version;
 
+function fetchLatestVersion() {
+  return new Promise(function(resolve, reject) {
+    var opts = {
+      hostname: 'registry.npmjs.org',
+      path: '/claude-code-watch/latest',
+      timeout: 5000,
+    };
+    var req = require('https').get(opts, function(res) {
+      if (res.statusCode !== 200) { reject(new Error('HTTP ' + res.statusCode)); return; }
+      var data = '';
+      res.on('data', function(chunk) { data += chunk; });
+      res.on('end', function() {
+        try { resolve(JSON.parse(data).version); }
+        catch (err) { reject(err); }
+      });
+    });
+    req.on('error', reject);
+    req.on('timeout', function() { req.destroy(); reject(new Error('timeout')); });
+    req.end();
+  });
+}
+
 var MIME = {
   '.html': 'text/html; charset=utf-8',
   '.css': 'text/css; charset=utf-8',
@@ -54,6 +77,8 @@ class DashboardServer {
     this.wss = null;
     this._heartbeatTimer = null;
     this._allowedPrefix = null;
+    this.latestVersion = null;
+    this._versionCheckTimer = null;
 
     setDebugAll(options.debugAll || false);
     this.debugAll = options.debugAll || false;
@@ -446,7 +471,17 @@ class DashboardServer {
   }
 
   sendConfig(ws) {
-    this.send(ws, 'config', { collapseAfter: this.collapseAfterMs, version: PACKAGE_VERSION });
+    this.send(ws, 'config', { collapseAfter: this.collapseAfterMs, version: PACKAGE_VERSION, latestVersion: this.latestVersion });
+  }
+
+  _checkLatestVersion() {
+    fetchLatestVersion().then((latest) => {
+      if (compareVersions(latest, PACKAGE_VERSION) > 0) {
+        this.latestVersion = latest;
+        // Notify all connected clients
+        this.broadcast('config', { collapseAfter: this.collapseAfterMs, version: PACKAGE_VERSION, latestVersion: latest });
+      }
+    }).catch(() => { /* network unavailable, skip */ });
   }
 
   setupWatcher(watcherOpts) {
@@ -670,6 +705,10 @@ class DashboardServer {
     this._contextCleanupTimer = setInterval(() => this.cleanupContextMap(), CONTEXT_STALE_MS);
     this._heartbeatTimer = setInterval(() => this.broadcast('heartbeat', null), 30000);
 
+    // Check for latest version on startup and periodically (every hour)
+    this._checkLatestVersion();
+    this._versionCheckTimer = setInterval(() => this._checkLatestVersion(), 60 * 60 * 1000);
+
     // Start listening and wait for server to be ready before opening browser
     await new Promise((resolve) => {
       this.server.listen(this.port, this.host, () => {
@@ -702,6 +741,7 @@ class DashboardServer {
   stop() {
     if (this._contextCleanupTimer) clearInterval(this._contextCleanupTimer);
     if (this._heartbeatTimer) clearInterval(this._heartbeatTimer);
+    if (this._versionCheckTimer) clearInterval(this._versionCheckTimer);
     if (this._flushTimer) {
       clearTimeout(this._flushTimer);
       this._flushTimer = null;