claude-code-watch 0.2.1 → 0.2.2

package/package.json

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

package/public/css/app.css

@@ -204,7 +204,7 @@ body {
 .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: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 16px; }
-.tp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 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; }
@@ -224,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; }
@@ -232,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 ── */

package/public/index.html

@@ -75,8 +75,8 @@
     <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-trend-card"></div>
     <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>

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>`;
@@ -344,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;