cchubber 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cchubber",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "What you spent. Why you spent it. Is that normal. — Claude Code usage diagnosis with beautiful HTML reports.",
   "type": "module",
   "bin": {

package/src/analyzers/value-tracker.js

@@ -0,0 +1,157 @@
+/**
+ * Value Tracker — measures whether you're getting less for your money over time.
+ *
+ * Two core metrics:
+ * - Output per message: are Claude's responses getting shorter? (model degradation)
+ * - Output per dollar: are you getting less work per dollar? (pricing/caching changes)
+ *
+ * Uses z-score anomaly detection (2 SD) to flag days where value drops significantly.
+ */
+
+export function analyzeValueTrend(dailyFromJSONL, calculatedDailyCosts, inflectionDate) {
+  if (!dailyFromJSONL || dailyFromJSONL.length < 3) {
+    return { available: false };
+  }
+
+  // Build cost lookup from calculated costs (not raw costUSD which is 0 for subscription)
+  const costByDate = {};
+  if (calculatedDailyCosts) {
+    for (const d of calculatedDailyCosts) {
+      costByDate[d.date] = d.cost || 0;
+    }
+  }
+
+  // Calculate per-day metrics
+  const daily = dailyFromJSONL
+    .filter(d => d.outputTokens > 0 && d.messageCount > 0)
+    .map(d => {
+      const cost = costByDate[d.date] || 0;
+      return {
+        date: d.date,
+        outputPerMsg: Math.round(d.outputTokens / d.messageCount),
+        outputPerDollar: cost > 0 ? Math.round(d.outputTokens / cost) : 0,
+        wordsPerMsg: Math.round(d.outputTokens / d.messageCount / 1.3), // ~1.3 tokens per word
+        outputTokens: d.outputTokens,
+        messageCount: d.messageCount,
+        cost,
+      };
+    });
+
+  if (daily.length < 3) return { available: false };
+
+  // Overall averages
+  const avgOutputPerMsg = Math.round(daily.reduce((s, d) => s + d.outputPerMsg, 0) / daily.length);
+  const avgOutputPerDollar = daily.filter(d => d.outputPerDollar > 0).length > 0
+    ? Math.round(daily.filter(d => d.outputPerDollar > 0).reduce((s, d) => s + d.outputPerDollar, 0) / daily.filter(d => d.outputPerDollar > 0).length)
+    : 0;
+
+  // Recent 7 days vs older — is value declining?
+  const sorted = [...daily].sort((a, b) => a.date.localeCompare(b.date));
+  const recent = sorted.slice(-7);
+  // If inflection date exists, use pre-inflection as the "before" baseline
+  // This gives a clean comparison: healthy baseline vs current reality
+  const older = inflectionDate
+    ? sorted.filter(d => d.date < inflectionDate)
+    : sorted.slice(0, -7);
+
+  let trend = 'stable';
+  let trendDetail = '';
+  let comparison = null;
+
+  if (older.length >= 3) {
+    const recentAvgPerMsg = Math.round(recent.reduce((s, d) => s + d.outputPerMsg, 0) / recent.length);
+    const olderAvgPerMsg = Math.round(older.reduce((s, d) => s + d.outputPerMsg, 0) / older.length);
+
+    const recentAvgPerDollar = recent.filter(d => d.outputPerDollar > 0).length > 0
+      ? Math.round(recent.filter(d => d.outputPerDollar > 0).reduce((s, d) => s + d.outputPerDollar, 0) / recent.filter(d => d.outputPerDollar > 0).length)
+      : 0;
+    const olderAvgPerDollar = older.filter(d => d.outputPerDollar > 0).length > 0
+      ? Math.round(older.filter(d => d.outputPerDollar > 0).reduce((s, d) => s + d.outputPerDollar, 0) / older.filter(d => d.outputPerDollar > 0).length)
+      : 0;
+
+    const msgChange = olderAvgPerMsg > 0 ? ((recentAvgPerMsg - olderAvgPerMsg) / olderAvgPerMsg * 100) : 0;
+    const dollarChange = olderAvgPerDollar > 0 ? ((recentAvgPerDollar - olderAvgPerDollar) / olderAvgPerDollar * 100) : 0;
+
+    if (msgChange < -20) {
+      trend = 'declining';
+      trendDetail = `Output per message dropped ${Math.abs(Math.round(msgChange))}% recently (${olderAvgPerMsg} → ${recentAvgPerMsg} tokens/msg)`;
+    } else if (msgChange > 20) {
+      trend = 'improving';
+      trendDetail = `Output per message increased ${Math.round(msgChange)}% recently (${olderAvgPerMsg} → ${recentAvgPerMsg} tokens/msg)`;
+    } else {
+      trendDetail = `Output per message stable (${recentAvgPerMsg} tokens/msg, was ${olderAvgPerMsg})`;
+    }
+
+    // Expose before/after for visual comparison
+    comparison = {
+      olderAvgPerMsg, recentAvgPerMsg, msgChangePct: Math.round(msgChange),
+      olderAvgPerDollar, recentAvgPerDollar, dollarChangePct: Math.round(dollarChange),
+      olderWords: Math.round(olderAvgPerMsg / 1.3),
+      recentWords: Math.round(recentAvgPerMsg / 1.3),
+    };
+  }
+
+  // Z-score anomaly detection — flag days where value drops >2 SD
+  const values = daily.map(d => d.outputPerMsg);
+  const mean = values.reduce((s, v) => s + v, 0) / values.length;
+  const variance = values.reduce((s, v) => s + Math.pow(v - mean, 2), 0) / values.length;
+  const stdDev = Math.sqrt(variance);
+
+  const anomalies = [];
+  if (stdDev > 0) {
+    for (const d of daily) {
+      const z = (d.outputPerMsg - mean) / stdDev;
+      if (z < -2) {
+        anomalies.push({
+          date: d.date,
+          type: 'low_output',
+          outputPerMsg: d.outputPerMsg,
+          expected: avgOutputPerMsg,
+          deviation: Math.abs(Math.round(z * 10) / 10),
+          detail: `${d.outputPerMsg} tokens/msg vs ${avgOutputPerMsg} avg (${Math.abs(Math.round(z * 10) / 10)}σ below)`,
+        });
+      }
+    }
+  }
+
+  // Cost per message anomalies — days where each message cost way more than usual (caching broke)
+  const costPerMsgValues = daily.filter(d => d.cost > 0).map(d => d.cost / d.messageCount);
+  const cpmMean = costPerMsgValues.length > 0 ? costPerMsgValues.reduce((s, v) => s + v, 0) / costPerMsgValues.length : 0;
+  const cpmVariance = costPerMsgValues.length > 0 ? costPerMsgValues.reduce((s, v) => s + Math.pow(v - cpmMean, 2), 0) / costPerMsgValues.length : 0;
+  const cpmStdDev = Math.sqrt(cpmVariance);
+
+  // Use median as baseline — more robust to outliers than mean/z-score
+  const sortedCpm = [...costPerMsgValues].sort((a, b) => a - b);
+  const cpmMedian = sortedCpm.length > 0 ? sortedCpm[Math.floor(sortedCpm.length / 2)] : 0;
+
+  const costAnomalies = [];
+  if (cpmMedian > 0) {
+    for (const d of daily.filter(dd => dd.cost > 0 && dd.messageCount >= 10)) {
+      const cpm = d.cost / d.messageCount;
+      const multiplier = cpm / cpmMedian;
+      if (multiplier >= 1.8) { // 80%+ above median cost per message
+        costAnomalies.push({
+          date: d.date,
+          costPerMsg: Math.round(cpm * 100) / 100,
+          medianCostPerMsg: Math.round(cpmMedian * 100) / 100,
+          multiplier: Math.round(multiplier * 10) / 10,
+        });
+      }
+    }
+  }
+
+  return {
+    available: true,
+    daily: daily.map(d => ({ date: d.date, outputPerMsg: d.outputPerMsg, outputPerDollar: d.outputPerDollar, wordsPerMsg: d.wordsPerMsg })),
+    avgWordsPerMsg: Math.round(daily.reduce((s, d) => s + d.wordsPerMsg, 0) / daily.length),
+    avgOutputPerMsg,
+    avgOutputPerDollar,
+    trend,
+    trendDetail,
+    comparison,
+    anomalies,
+    costAnomalies,
+    avgCostPerMsg: Math.round(cpmMean * 100) / 100,
+    dayCount: daily.length,
+  };
+}

package/src/cli/index.js

@@ -25,6 +25,7 @@ import { generateRecommendations } from '../analyzers/recommendations.js';
 import { detectInflectionPoints } from '../analyzers/inflection-detector.js';
 import { analyzeSessionIntelligence } from '../analyzers/session-intelligence.js';
 import { analyzeModelRouting } from '../analyzers/model-routing.js';
+import { analyzeValueTrend } from '../analyzers/value-tracker.js';
 import { renderHTML } from '../renderers/html-report.js';
 import { renderTerminal } from '../renderers/terminal-summary.js';
 import { shouldSendTelemetry, sendTelemetry } from '../telemetry.js';
@@ -134,6 +135,9 @@ async function main() {
   const inflection = detectInflectionPoints(dailyFromJSONL);
   const sessionIntel = analyzeSessionIntelligence(sessionMeta, jsonlEntries);
   const modelRouting = analyzeModelRouting(costAnalysis, jsonlEntries);
+  const valueTrend = analyzeValueTrend(dailyFromJSONL, costAnalysis.dailyCosts, inflection?.date);
+  if (valueTrend.available) console.log(`  ✓ Value trend: ${valueTrend.avgOutputPerMsg} tokens/msg avg (${valueTrend.trend})`);
+
   const recommendations = generateRecommendations(costAnalysis, cacheHealth, claudeMdStack, anomalies, inflection, sessionIntel, modelRouting, projectBreakdown);
 
   if (inflection) console.log(`  ✓ Inflection: ${inflection.summary}`);
@@ -166,6 +170,7 @@ async function main() {
     claudeMdStack,
     oauthUsage,
     recommendations,
+    valueTrend,
     communityStats,
     history: getHistory(),
   };

package/src/renderers/html-report.js

@@ -18,6 +18,7 @@ export function renderHTML(report) {
 
   const dailyCostsJSON = JSON.stringify(dailyCosts.map(d => ({
     date: d.date, cost: d.cost, cacheOutputRatio: d.cacheOutputRatio || 0, isAnomaly: anomalyDates.has(d.date),
+    out: d.outputTokens || 0, inp: d.inputTokens || 0, cr: d.cacheReadTokens || 0,
   })));
 
   const projectsJSON = JSON.stringify((projectBreakdown || []).map(p => ({
@@ -353,6 +354,7 @@ ${inflection && inflection.multiplier >= 1.5 ? `
     <span class="font-mono text-2xl font-bold block text-[#e3e2e3]">${costAnalysis.sessions?.total || 0}</span>
     <span class="text-[10px] text-[#908fa0] mt-1 block font-mono">${costAnalysis.sessions?.avgDurationMinutes ? Math.round(costAnalysis.sessions.avgDurationMinutes) + ' min avg' : ''}</span>
   </div>`}
+
 </section>
 
 <!-- 4. COST TREND CHART -->
@@ -372,6 +374,62 @@ ${inflection && inflection.multiplier >= 1.5 ? `
   <svg id="cost-chart-svg" viewBox="0 0 900 200" preserveAspectRatio="xMidYMid meet"></svg>
 </section>
 
+${report.valueTrend?.available ? (() => {
+  const vt = report.valueTrend;
+  const comp = vt.comparison;
+  const trendColor = vt.trend === 'declining' ? '#ffb4ab' : vt.trend === 'improving' ? '#10b981' : '#908fa0';
+
+  // Build verdict around output per dollar — the metric people actually care about
+  let verdict, verdictColor, verdictDetail;
+  if (!comp || !comp.olderAvgPerDollar) {
+    verdict = 'Not enough data to compare yet. Run again next week.';
+    verdictColor = '#908fa0';
+    verdictDetail = '';
+  } else if (comp.dollarChangePct < -20) {
+    verdict = 'Yes. ' + Math.abs(comp.dollarChangePct) + '% less output per dollar recently.';
+    verdictColor = '#ffb4ab';
+    var limitImpact = Math.round(100 / (100 - Math.abs(comp.dollarChangePct)) * 100 - 100);
+    verdictDetail = 'Before: ' + comp.olderAvgPerDollar.toLocaleString() + ' tokens/$1. Now: ' + comp.recentAvgPerDollar.toLocaleString() + ' tokens/$1. In practice, your usage limits run out ~' + limitImpact + '% faster than before. This could be caused by cache changes, heavier Opus usage, or longer sessions.';
+  } else if (comp.dollarChangePct > 20) {
+    verdict = 'No. Actually getting ' + comp.dollarChangePct + '% more output per dollar recently.';
+    verdictColor = '#10b981';
+    verdictDetail = 'Before: ' + comp.olderAvgPerDollar.toLocaleString() + ' tokens/$1. Now: ' + comp.recentAvgPerDollar.toLocaleString() + ' tokens/$1.';
+  } else {
+    verdict = 'No. Your output per dollar is stable.';
+    verdictColor = '#10b981';
+    verdictDetail = comp.recentAvgPerDollar.toLocaleString() + ' output tokens per $1 (was ' + comp.olderAvgPerDollar.toLocaleString() + ').';
+  }
+
+  return `
+<!-- VALUE TREND -->
+<section class="bg-[#1b1c1d] p-8 rounded-xl border border-[rgba(70,69,84,0.15)]">
+  <h3 class="text-xl font-bold text-[#e3e2e3] mb-4">Are you getting less for your money?</h3>
+  <p class="text-[15px] font-semibold mb-1" style="color:${verdictColor}">${verdict}</p>
+  ${verdictDetail ? '<p class="text-[12px] text-[#908fa0] mb-2">' + verdictDetail + '</p>' : ''}
+  ${inflection ? '<p class="text-[11px] text-[#908fa0] mb-4">A cache change was detected on ' + esc(inflection.date) + '. Your recent 7 days reflect where you are now.</p>' : ''}
+
+  ${(vt.anomalies?.length > 0 || vt.costAnomalies?.length > 0) ? `
+  <div class="mt-6 space-y-2">
+    ${vt.anomalies?.length > 0 ? `
+    <span class="text-[10px] uppercase tracking-[0.05em] text-[#908fa0] block mb-1">Days with unusually short responses</span>
+    ${vt.anomalies.slice(0, 3).map(a => `
+    <div class="p-3 bg-[#0d0e0f] rounded-lg flex items-center justify-between">
+      <span class="text-[11px] font-mono text-[#908fa0]">${a.date}</span>
+      <span class="text-[11px] text-[#e3e2e3]">~${Math.round(a.outputPerMsg / 1.3)} words/response</span>
+      <span class="text-[10px] font-mono px-2 py-0.5 rounded" style="background:rgba(255,180,171,0.15);color:#ffb4ab">${a.deviation}σ below avg</span>
+    </div>`).join('')}` : ''}
+    ${vt.costAnomalies?.length > 0 ? `
+    <span class="text-[10px] uppercase tracking-[0.05em] text-[#908fa0] block mt-3 mb-1">Days where each message cost more than usual (${vt.costAnomalies.length} days)</span>
+    ${vt.costAnomalies.slice(0, 5).map(a => `
+    <div class="p-3 bg-[#0d0e0f] rounded-lg grid" style="grid-template-columns:100px 1fr auto;gap:12px;align-items:center">
+      <span class="text-[11px] font-mono text-[#908fa0]">${a.date}</span>
+      <span class="text-[11px] text-[#e3e2e3]">$${a.costPerMsg}/msg vs $${a.medianCostPerMsg} median</span>
+      <span class="text-[10px] font-mono px-2 py-0.5 rounded" style="background:rgba(255,180,171,0.15);color:#ffb4ab">${a.multiplier}x</span>
+    </div>`).join('')}` : ''}
+  </div>` : ''}
+</section>`;
+})() : ''}
+
 <!-- 5. SESSION INTELLIGENCE + MODEL DISTRIBUTION -->
 <section class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 
@@ -521,9 +579,9 @@ ${inflection && inflection.multiplier >= 1.5 ? `
           <th class="px-8 py-3 text-[10px] uppercase font-bold tracking-[0.05em] text-[#908fa0] text-left">#</th>
           <th class="px-4 py-3 text-[10px] uppercase font-bold tracking-[0.05em] text-[#908fa0]">Grade</th>
           <th class="px-4 py-3 text-[10px] uppercase font-bold tracking-[0.05em] text-[#908fa0] text-right">Ratio</th>
-          <th class="px-4 py-3 text-[10px] uppercase font-bold tracking-[0.05em] text-[#908fa0]">Cost</th>
+          <th class="px-4 py-3 text-[10px] uppercase font-bold tracking-[0.05em] text-[#908fa0] text-left">Cost</th>
           <th class="px-4 py-3 text-[10px] uppercase font-bold tracking-[0.05em] text-[#908fa0] text-right">Opus %</th>
-          <th class="px-8 py-3 text-[10px] uppercase font-bold tracking-[0.05em] text-[#908fa0]">Country</th>
+          <th class="px-4 py-3 text-[10px] uppercase font-bold tracking-[0.05em] text-[#908fa0] text-left">Country</th>
         </tr>
       </thead>
       <tbody id="leaderboard-body"></tbody>
@@ -784,13 +842,14 @@ ${cacheHealth.totalCacheBreaks > 0 ? `
     // hover targets
     d.forEach(function(x,j){
       var px=PD.l+(d.length===1?cW/2:j*step),py=PD.t+cH-(x.cost/mx)*cH;
-      s+='<circle cx="'+px+'" cy="'+py+'" r="14" fill="transparent" data-d="'+x.date+'" data-c="'+x.cost+'" data-a="'+(x.isAnomaly?1:0)+'" class="hov" style="cursor:crosshair"/>';
+      s+='<circle cx="'+px+'" cy="'+py+'" r="14" fill="transparent" data-d="'+x.date+'" data-c="'+x.cost+'" data-a="'+(x.isAnomaly?1:0)+'" data-o="'+(x.out||0)+'" class="hov" style="cursor:crosshair"/>';
     });
     svg.innerHTML=s;
     svg.querySelectorAll('.hov').forEach(function(el){
       el.addEventListener('mouseenter',function(e){
         ttd.textContent=e.target.dataset.d;
-        ttc.textContent=fc(parseFloat(e.target.dataset.c));
+        var ot=parseInt(e.target.dataset.o||0);
+        ttc.textContent=fc(parseFloat(e.target.dataset.c))+(ot>0?' — '+ft(ot)+' output':'');
         tta.textContent=e.target.dataset.a==='1'?'ANOMALY':'';
         tta.style.display=e.target.dataset.a==='1'?'block':'none';
         tt.classList.add('on');
@@ -805,7 +864,7 @@ ${cacheHealth.totalCacheBreaks > 0 ? `
   function setR(r){
     var f=filt(r);chart(f);
     var ci=document.getElementById('chart-info');
-    if(ci&&f.length){var t=f.reduce(function(s,x){return s+x.cost},0),a=f.filter(function(x){return x.cost>0}).length;ci.textContent=a+' days \u00b7 '+fc(t)}
+    if(ci&&f.length){var t=f.reduce(function(s,x){return s+x.cost},0),a=f.filter(function(x){return x.cost>0}).length,tok=f.reduce(function(s,x){return s+(x.out||0)},0);ci.textContent=a+' days \u00b7 '+fc(t)+' \u00b7 '+ft(tok)+' output'}
     var rl=document.getElementById('range-lbl');if(rl)rl.textContent=RL[r]||'All time';
     CARD.range=RL[r]||'All time';
     var cr=document.getElementById('card-range');if(cr)cr.textContent=CARD.range;
@@ -1164,9 +1223,9 @@ ${cacheHealth.totalCacheBreaks > 0 ? `
         html += '<td class="px-8 py-3 text-sm font-mono '+(isMe?'text-[#c0c1ff] font-bold':'text-[#908fa0]')+'">#'+(idx+1)+(isMe?' ← you':'')+'</td>';
         html += '<td class="px-4 py-3 text-sm font-bold text-center" style="color:'+gradeColors[g]+'">'+g+'</td>';
         html += '<td class="px-4 py-3 text-sm font-mono text-[#c7c4d7] text-right">'+(entry.ratio||'?')+':1</td>';
-        html += '<td class="px-4 py-3 text-sm font-mono text-[#908fa0]">'+(entry.cost||'?')+'</td>';
+        html += '<td class="px-4 py-3 text-sm font-mono text-[#908fa0]">'+(entry.cost?'$'+entry.cost:'?')+'</td>';
         html += '<td class="px-4 py-3 text-sm font-mono text-[#c7c4d7] text-right">'+(entry.opus!=null?entry.opus:'?')+'%</td>';
-        html += '<td class="px-8 py-3 text-sm text-[#908fa0]">'+(isMe?'You':(entry.country||'?'))+'</td>';
+        html += '<td class="px-4 py-3 text-sm text-[#908fa0]">'+(isMe?'You':(entry.country||'?'))+'</td>';
         html += '</tr>';
       }
       tbody.innerHTML = html;