cchubber 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cchubber",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "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/cache-health.js

@@ -83,7 +83,7 @@ function calculateGrade(allTimeRatio, breaks, days, dailyFromJSONL, cacheHitRate
   // Based on token-optimizer's methodology (multi-signal composite)
   // but adapted for post-hoc analysis with the data CC Hubber has.
 
-  // --- Signal 1: Cache hit rate (25%) ---
+  // --- Signal 1: Cache hit rate (15%) ---
   // What % of input tokens came from cache. Higher = better.
   // Thresholds from token-optimizer: >=80% = 100, >=60% = 80, >=40% = 55
   let hitRateScore;
@@ -93,7 +93,7 @@ function calculateGrade(allTimeRatio, breaks, days, dailyFromJSONL, cacheHitRate
   else if (cacheHitRate >= 40) hitRateScore = 40;
   else hitRateScore = 15;
 
-  // --- Signal 2: Efficiency ratio (30%) ---
+  // --- Signal 2: Efficiency ratio (40%) ---
   // Cache reads per output token. Measures how much redundant data
   // is re-read per unit of work. Lower = more efficient.
   // Calibrated against 33 real users (median ~680).

package/src/cli/index.js

@@ -42,7 +42,8 @@ const flags = {
   })(),
   days: (() => {
     const idx = args.indexOf('--days') !== -1 ? args.indexOf('--days') : args.indexOf('-d');
-    return idx !== -1 && args[idx + 1] ? parseInt(args[idx + 1], 10) : 30;
+    const val = idx !== -1 && args[idx + 1] ? parseInt(args[idx + 1], 10) : 30;
+    return isNaN(val) ? 30 : val;
   })(),
 };
 
@@ -140,19 +141,15 @@ async function main() {
   if (modelRouting.available) console.log(`  ✓ Model routing: ${modelRouting.opusPct}% Opus, ${modelRouting.sonnetPct}% Sonnet`);
   console.log(`  ✓ ${projectBreakdown.length} projects detected`);
 
-  // Fetch community stats for leaderboard (non-blocking, fails silently)
+  // Fetch community stats for leaderboard (non-blocking, 5s timeout, fails silently)
   let communityStats = null;
   try {
-    const res = await fetch('https://cchubber-telemetry.asmirkhan087.workers.dev/stats?key=cchubber_public_readonly');
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5000);
+    const res = await fetch('https://cchubber-telemetry.asmirkhan087.workers.dev/stats-public', { signal: controller.signal });
+    clearTimeout(timeout);
     if (res.ok) communityStats = await res.json();
   } catch {}
-  // Fallback: try the private key if public isn't configured
-  if (!communityStats) {
-    try {
-      const res = await fetch('https://cchubber-telemetry.asmirkhan087.workers.dev/stats?key=cchubber_x9k_private');
-      if (res.ok) communityStats = await res.json();
-    } catch {}
-  }
   if (communityStats) console.log(`  ✓ Community data: ${communityStats.totalReports} users from ${Object.keys(communityStats.countries || {}).length} countries`);
   else console.log('  ○ Community data unavailable (offline)');
 

package/src/renderers/html-report.js

@@ -1,3 +1,8 @@
+function esc(s) {
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+}
+
 export function renderHTML(report) {
   const { costAnalysis, cacheHealth, anomalies, inflection, sessionIntel, modelRouting, projectBreakdown, claudeMdStack, oauthUsage, recommendations, generatedAt } = report;
 
@@ -467,21 +472,20 @@ ${inflection && inflection.multiplier >= 1.5 ? `
     <div class="bg-[#1b1c1d] p-8 rounded-xl border border-[rgba(70,69,84,0.15)]">
       <h3 class="text-xl font-bold text-[#e3e2e3] mb-6">Recommendations</h3>
       <div class="space-y-3">
-        ${recommendations.map(r => {
+        ${recommendations.map((r, idx) => {
           const sev = sevColorMap[r.severity] || sevColorMap.info;
-          const safeTitle = r.title.replace(/'/g, "\\'").replace(/"/g, '&quot;');
-          const safeAction = r.action.replace(/'/g, "\\'").replace(/"/g, '&quot;');
-          const clipboardText = `CC Hubber flagged this about my setup:\\n\\n${r.title}\\n\\n${r.action}\\n\\nBefore making changes:\\n1. Read the relevant files first to understand the current setup\\n2. Do NOT remove or modify anything without asking me — some things are there intentionally\\n3. Show me what each section/setting costs in tokens and let me decide what to keep\\n4. Suggest optimizations (move to skills, use hooks, restructure) rather than deletion\\n5. Do not break existing working functionality`;
+          const clipboardText = `CC Hubber flagged this about my setup:\n\n${r.title}\n\n${r.action}\n\nBefore making changes:\n1. Read the relevant files first to understand the current setup\n2. Do NOT remove or modify anything without asking me — some things are there intentionally\n3. Show me what each section/setting costs in tokens and let me decide what to keep\n4. Suggest optimizations (move to skills, use hooks, restructure) rather than deletion\n5. Do not break existing working functionality`;
+          const b64 = Buffer.from(clipboardText).toString('base64');
           return `<div class="p-4 bg-[#0d0e0f] rounded-r-lg flex items-start gap-4" style="border-left:3px solid ${sev.border}">
             <div class="flex-1 min-w-0">
               <div class="flex items-start justify-between gap-4">
-                <p class="text-[13px] font-semibold text-[#e3e2e3]">${r.title}</p>
+                <p class="text-[13px] font-semibold text-[#e3e2e3]">${esc(r.title)}</p>
                 <div class="flex items-center gap-2 shrink-0">
                   ${r.savings ? `<span class="text-[10px] font-mono px-2 py-0.5 rounded" style="background:${sev.border}18;color:${sev.text}">${r.savings}</span>` : ''}
-                  ${r.severity !== 'positive' ? `<button onclick="navigator.clipboard.writeText('${clipboardText}');this.textContent='Copied!';setTimeout(()=>this.textContent='Fix with Claude',1500)" class="text-[10px] font-mono px-2 py-0.5 rounded border border-[rgba(70,69,84,0.3)] text-[#908fa0] cursor-pointer hover:text-[#e3e2e3] hover:border-[rgba(70,69,84,0.6)] transition-colors">Fix with Claude</button>` : ''}
+                  ${r.severity !== 'positive' ? `<button data-clip="${b64}" onclick="var t=atob(this.dataset.clip);navigator.clipboard.writeText(t);this.textContent='Copied!';var b=this;setTimeout(function(){b.textContent='Fix with Claude'},1500)" class="text-[10px] font-mono px-2 py-0.5 rounded border border-[rgba(70,69,84,0.3)] text-[#908fa0] cursor-pointer hover:text-[#e3e2e3] hover:border-[rgba(70,69,84,0.6)] transition-colors">Fix with Claude</button>` : ''}
                 </div>
               </div>
-              <p class="text-[11px] text-[#908fa0] mt-1 leading-relaxed">${r.action}</p>
+              <p class="text-[11px] text-[#908fa0] mt-1 leading-relaxed">${esc(r.action)}</p>
             </div>
           </div>`;
         }).join('')}
@@ -620,7 +624,7 @@ ${anomalies.hasAnomalies ? `
       </thead>
       <tbody class="divide-y divide-[rgba(70,69,84,0.15)]">
         ${claudeMdStack.globalSections.map(s => `<tr class="tbl-row">
-          <td class="px-8 py-3 text-sm text-[#e3e2e3]">${s.name}</td>
+          <td class="px-8 py-3 text-sm text-[#e3e2e3]">${esc(s.name)}</td>
           <td class="px-8 py-3 font-mono text-sm text-[#c7c4d7] text-right">${s.lines}</td>
           <td class="px-8 py-3 font-mono text-sm text-[#c7c4d7] text-right">${s.tokens.toLocaleString()}</td>
         </tr>`).join('')}
@@ -1067,25 +1071,44 @@ ${cacheHealth.totalCacheBreaks > 0 ? `
       if(!sec || !stats.totalReports) return;
       sec.style.display = '';
 
-      // Count + percentile
-      var total = stats.totalReports || 0;
-      document.getElementById('community-count').textContent = total + ' users worldwide';
+      // Re-grade function — applies current grading logic to stored ratios
+      // so old telemetry entries get accurate grades, not the inflated v0.4 grades
+      function regrade(ratio){
+        // Simplified: ratio signal dominates (40%), assume stable trend (70), good hit rate (85), no breaks (100)
+        var rs;
+        if(ratio<=200)rs=100;else if(ratio<=350)rs=85;else if(ratio<=500)rs=70;
+        else if(ratio<=650)rs=55;else if(ratio<=800)rs=42;else if(ratio<=1000)rs=30;
+        else if(ratio<=1500)rs=18;else if(ratio<=2000)rs=10;else rs=3;
+        var composite=Math.round(85*0.15+rs*0.40+70*0.30+100*0.15);
+        if(rs<=5)composite=Math.min(composite,38);
+        if(composite>=75)return'A';if(composite>=60)return'B';if(composite>=45)return'C';if(composite>=30)return'D';return'F';
+      }
+
+      // Count + geographic spread (don't show raw user count — looks small early on)
+      var countries = stats.countries ? Object.keys(stats.countries) : [];
+      document.getElementById('community-count').textContent = countries.length + ' countries';
 
       // Calculate percentile from recent entries
       var recent = stats.recent || [];
       var ratios = recent.map(function(r){return r.ratio||9999}).sort(function(a,b){return a-b});
       var betterThan = ratios.filter(function(r){return r > MY_RATIO}).length;
-      var pctile = total > 0 ? Math.round(betterThan / ratios.length * 100) : 0;
+      var pctile = ratios.length > 0 ? Math.round(betterThan / ratios.length * 100) : 0;
       document.getElementById('community-percentile').innerHTML =
         'Your cache ratio of <strong style="color:#e3e2e3">' + MY_RATIO + ':1</strong> is better than <strong style="color:#c0c1ff">' + pctile + '%</strong> of CC Hubber users';
 
-      // Grade distribution bar
-      var grades = stats.grades || {};
-      var gTotal = Object.values(grades).reduce(function(s,v){return s+v},0);
+      // Grade distribution — use stored grade for v0.5+ entries, regrade older ones
+      function getGrade(entry){
+        var v = entry.v || entry.version || '0.3.3';
+        var parts = v.split('.'); var isNew = (parseInt(parts[0]||0)>0) || (parseInt(parts[1]||0)>=5);
+        return (isNew && entry.grade) ? entry.grade : (entry.ratio ? regrade(entry.ratio) : (entry.grade || 'C'));
+      }
+      var regraded = {A:0,B:0,C:0,D:0,F:0};
+      recent.forEach(function(r){regraded[getGrade(r)]++});
+      var gTotal = Object.values(regraded).reduce(function(s,v){return s+v},0);
       var bar = document.getElementById('grade-dist-bar');
       var labels = document.getElementById('grade-dist-labels');
       ['A','B','C','D','F'].forEach(function(g){
-        var count = grades[g] || 0;
+        var count = regraded[g] || 0;
         var pct = gTotal > 0 ? (count/gTotal*100) : 0;
         if(pct > 0){
           var seg = document.createElement('div');
@@ -1099,22 +1122,18 @@ ${cacheHealth.totalCacheBreaks > 0 ? `
         }
       });
 
-      // Leaderboard table
+      // Leaderboard table — re-graded
       var tbody = document.getElementById('leaderboard-body');
       var sorted = recent.filter(function(r){return r.ratio}).sort(function(a,b){return (a.ratio||9999)-(b.ratio||9999)});
-      var myRank = -1;
-      sorted.forEach(function(entry, i){
-        if(myRank<0 && (entry.ratio||9999) >= MY_RATIO) myRank = i;
-      });
-      if(myRank<0) myRank = sorted.length;
 
       var html = '';
       sorted.forEach(function(entry, i){
-        var isMe = Math.abs((entry.ratio||0) - MY_RATIO) < 10 && entry.grade === MY_GRADE;
+        var g = getGrade(entry);
+        var isMe = Math.abs((entry.ratio||0) - MY_RATIO) < 50;
         var rowStyle = isMe ? 'background:rgba(192,193,255,0.06);border-left:2px solid #c0c1ff;' : '';
         html += '<tr style="border-bottom:1px solid rgba(70,69,84,0.1);'+rowStyle+'">';
         html += '<td class="px-8 py-3 text-sm font-mono text-[#908fa0]">#'+(i+1)+'</td>';
-        html += '<td class="px-4 py-3 text-sm font-bold text-center" style="color:'+gradeColors[entry.grade||'C']+'">'+entry.grade+'</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-[#c7c4d7] text-right">'+(entry.opus||'?')+'%</td>';