claude-burn 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-burn",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Monitor Claude Code token usage, burn rate, and session attribution. Zero dependencies.",
   "scripts": {
     "test": "node --test"

package/public/renderChart.js

@@ -5,6 +5,10 @@ export function destroyChart(state) {
     state.chart.destroy();
     state.chart = null;
   }
+  if (state.contextChart) {
+    state.contextChart.destroy();
+    state.contextChart = null;
+  }
 }
 
 export function renderChart(state, session) {
@@ -43,6 +47,7 @@ export function renderChart(state, session) {
     options: {
       responsive: true,
       maintainAspectRatio: false,
+      animation: false,
       plugins: {
         legend: { display: false },
         tooltip: {
@@ -77,4 +82,65 @@ export function renderChart(state, session) {
       },
     },
   });
+
+  // Context size per message chart
+  const contextCanvas = document.getElementById('context-chart');
+  if (!contextCanvas) return;
+
+  const contextData = timeline.map((point) => point.context || 0);
+  const hasContextData = contextData.some((v) => v > 0);
+  if (!hasContextData) return;
+
+  state.contextChart = new globalThis.Chart(contextCanvas, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [{
+        data: contextData,
+        borderColor: '#f59e0b',
+        backgroundColor: 'rgba(245,158,11,0.08)',
+        fill: true,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 1.5,
+      }],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          backgroundColor: '#e4e4e7',
+          titleColor: '#09090b',
+          bodyColor: '#09090b',
+          bodyFont: { family: "'Geist Mono'", size: 11 },
+          titleFont: { family: "'Geist Mono'", size: 10 },
+          padding: 8,
+          cornerRadius: 6,
+          displayColors: false,
+          callbacks: {
+            label: (ctx) => `${fmt(ctx.raw)} context`,
+          },
+        },
+      },
+      scales: {
+        x: {
+          ticks: { color: '#52525b', font: { size: 10, family: "'Geist Mono'" }, maxTicksLimit: 6 },
+          grid: { color: 'rgba(39,39,42,0.5)' },
+          border: { display: false },
+        },
+        y: {
+          ticks: {
+            color: '#52525b',
+            font: { size: 10, family: "'Geist Mono'" },
+            callback: (value) => fmt(value),
+          },
+          grid: { color: 'rgba(39,39,42,0.3)' },
+          border: { display: false },
+        },
+      },
+    },
+  });
 }

package/public/renderDetail.js

@@ -139,6 +139,13 @@ export function renderDetail(state) {
         <canvas id="timeline-chart"></canvas>
       </div>
     </div>
+
+    <div class="detail-section">
+      <h3>Context Size <span class="tip" data-tip="Cache read tokens per API call — shows the actual context size sent each turn. Drops indicate /compact or context compression. Lower is cheaper.">?</span></h3>
+      <div class="chart-container">
+        <canvas id="context-chart"></canvas>
+      </div>
+    </div>
   `;
 
   renderChart(state, session);

package/src/analytics/buildSessionAggregate.js

@@ -42,6 +42,7 @@ function buildCumulativeTimeline(timeline) {
       cumulativeTimeline.push({
         ts: timeline[i].ts,
         cumulative,
+        context: timeline[i].cache_read || 0,
         agent: timeline[i].agent,
       });
     }
@@ -195,7 +196,7 @@ function buildSessionAggregate(sessionPath, options = {}) {
       stats.messages++;
 
       if (ts) {
-        timeline.push({ ts, tokens: totalTokensForMessage, agent: agentName });
+        timeline.push({ ts, tokens: totalTokensForMessage, cache_read: cacheReadTokens, agent: agentName });
       }
     }
   }