claude-roi 0.7.3 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-roi",
-  "version": "0.7.3",
+  "version": "0.8.1",
   "description": "Correlate Claude Code token usage with git output to measure AI coding agent ROI",
   "type": "module",
   "bin": {

package/src/dashboard.html

@@ -297,7 +297,7 @@
     /* Hero Stats — 3+1 layout */
     .hero-stats {
       display: grid;
-      grid-template-columns: 1fr 220px;
+      grid-template-columns: 1fr 240px;
       gap: 20px;
       align-items: stretch;
     }
@@ -394,24 +394,47 @@
       align-items: center;
       justify-content: center;
       text-align: center;
-      padding: 24px;
+      padding: 16px 16px 14px;
+      gap: 4px;
     }
     .stat-card.grade .value {
       font-family: var(--font-display);
-      font-size: 3.5rem;
+      font-size: 2rem;
       line-height: 1;
       font-weight: 800;
     }
+    .stat-card.grade .label {
+      margin-bottom: 2px;
+    }
+    .stat-card.grade .sub {
+      margin: 0;
+    }
     .grade-circle {
-      width: 120px;
-      height: 120px;
+      width: 80px;
+      height: 80px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-bottom: 12px;
+      margin-bottom: 2px;
       position: relative;
     }
+    .score-tier {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      font-weight: 700;
+    }
+    .score-context {
+      font-size: 0.68rem;
+      color: var(--text-secondary);
+    }
+    .score-tip {
+      font-size: 0.64rem;
+      color: var(--text-muted);
+      font-style: italic;
+      line-height: 1.3;
+    }
     .grade-circle::before {
       content: '';
       position: absolute;
@@ -717,9 +740,20 @@
       width: 100%;
       border-collapse: collapse;
       font-size: 0.85rem;
-    }
+      table-layout: fixed;
+    }
+    /* Column widths: Date | Project | Model | Msgs | Autopilot | Cost | Commits | Lines | Grade */
+    table col:nth-child(1) { width: 13%; }
+    table col:nth-child(2) { width: 14%; }
+    table col:nth-child(3) { width: 18%; }
+    table col:nth-child(4) { width: 7%; }
+    table col:nth-child(5) { width: 10%; }
+    table col:nth-child(6) { width: 8%; }
+    table col:nth-child(7) { width: 9%; }
+    table col:nth-child(8) { width: 13%; }
+    table col:nth-child(9) { width: 8%; }
     thead th {
-      padding: 14px 14px;
+      padding: 14px 12px;
       text-align: left;
       color: var(--text-muted);
       font-family: var(--font-display);
@@ -734,6 +768,8 @@
       transition: color 0.2s;
       position: relative;
     }
+    /* Center-align numeric columns (4-9): Msgs, Autopilot, Cost, Commits, Lines, Grade */
+    thead th:nth-child(n+4), tbody td:nth-child(n+4) { text-align: center; }
     thead th:hover { color: var(--text-primary); }
     thead th.sorted { color: var(--accent-blue); }
     thead th.sorted::after {
@@ -752,9 +788,11 @@
     tbody tr:hover { background: var(--overlay-soft); }
     tbody tr:last-child { border-bottom: none; }
     tbody td {
-      padding: 12px 14px;
+      padding: 12px 12px;
       white-space: nowrap;
       font-size: 0.85rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .grade-badge {
       display: inline-flex;
@@ -1859,6 +1897,13 @@
 <script>
 const GRADE_VAR = { A: 'var(--grade-a)', B: 'var(--grade-b)', C: 'var(--grade-c)', D: 'var(--grade-d)', F: 'var(--grade-f)' };
 const GRADE_BG_VAR = { A: 'var(--grade-a-bg)', B: 'var(--grade-b-bg)', C: 'var(--grade-c-bg)', D: 'var(--grade-d-bg)', F: 'var(--grade-f-bg)' };
+function scoreColor(score) {
+  if (score >= 80) return 'var(--grade-a)';
+  if (score >= 60) return 'var(--grade-b)';
+  if (score >= 40) return 'var(--grade-c)';
+  if (score >= 20) return 'var(--grade-d)';
+  return 'var(--text-muted)';
+}
 const INSIGHT_ICONS = { warning: '!', success: '+', info: 'i', tip: '*' };
 const DAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 let DATA = null;
@@ -2066,11 +2111,11 @@ function render() {
 }
 
 function renderHeroStats(s) {
-  const gradeColor = GRADE_VAR[s.overallGrade] || GRADE_VAR.F;
-  const GRADE_DEG = { A: 324, B: 270, C: 216, D: 144, F: 72 };
-  const gradeDeg = GRADE_DEG[s.overallGrade] || 72;
+  const es = s.efficiencyScore || { score: 0, tier: 'Getting Started', letter: 'F', explanation: '', tip: '' };
+  const sColor = scoreColor(es.score);
+  const scoreDeg = Math.round(es.score * 3.6);
   return `<div class="stats-section">
-    <h2>Performance Overview <i class="info-tip" data-tip="High-level metrics for your AI coding sessions — cost, output, efficiency, and overall grade.">i</i></h2>
+    <h2>Performance Overview <i class="info-tip" data-tip="High-level metrics for your AI coding sessions — cost, output, efficiency, and overall score.">i</i></h2>
     <div class="hero-stats">
       <div class="hero-stats-left">
         <div class="stat-card glow cost-card">
@@ -2104,11 +2149,14 @@ function renderHeroStats(s) {
           </div>
         </div>
       </div>
-      <div class="stat-card grade glow grade-card" style="--grade-color: ${gradeColor}; --grade-deg: ${gradeDeg}deg;">
-        <div class="label">ROI Grade <i class="info-tip" data-tip="Overall efficiency grade from A (great) to F (poor). Based on cost-per-commit and code survival.">i</i></div>
+      <div class="stat-card grade glow grade-card" style="--grade-color: ${sColor}; --grade-deg: ${scoreDeg}deg;">
+        <div class="label">Efficiency Score <i class="info-tip" data-tip="Score from 0–100 based on cost-per-commit and code survival rate. Higher is better.">i</i></div>
         <div class="grade-circle">
-          <div class="value" style="color: ${gradeColor};">${s.overallGrade}</div>
+          <div class="value" style="color: ${sColor};">${es.score}</div>
         </div>
+        <div class="score-tier" style="color: ${sColor};">${es.tier}</div>
+        <div class="score-context">${es.explanation}</div>
+        <div class="score-tip">${es.tip}</div>
         <div class="sub">${s.orphanedSessionRate}% sessions orphaned</div>
       </div>
     </div>
@@ -2116,7 +2164,7 @@ function renderHeroStats(s) {
       <span><span class="dot" style="background: var(--accent-orange);"></span>Cost</span>
       <span><span class="dot" style="background: var(--accent-green);"></span>Output</span>
       <span><span class="dot" style="background: var(--accent-blue);"></span>Efficiency</span>
-      <span><span class="dot" style="background: ${gradeColor};"></span>Grade: ${s.overallGrade}</span>
+      <span><span class="dot" style="background: ${sColor};"></span>Score: ${es.score} · ${es.tier}</span>
     </div>
   </div>`;
 }
@@ -2485,6 +2533,7 @@ function renderSessionsTable(sessions) {
     <h2>Sessions (${sessions.length})</h2>
     <div class="sessions-table-wrap">
       <table>
+        <colgroup><col><col><col><col><col><col><col><col><col></colgroup>
         <thead>
           <tr>
             <th onclick="sortTable('startTime')" class="${sortCol === 'startTime' ? 'sorted' : ''}">Date${thArrow('startTime')}</th>

package/src/metrics.js

@@ -262,6 +262,45 @@ function computeEfficiencyGrade(costPerCommit, survivalRate) {
   return 'F';
 }
 
+function computeEfficiencyScore(costPerCommit, survivalRate, orphanedRate, totalCommits) {
+  if (totalCommits === 0) {
+    return {
+      score: 0, tier: 'Getting Started', letter: 'F',
+      explanation: 'No commits matched to sessions yet — this is normal for exploratory work.',
+      tip: 'Commits are matched by file overlap with Claude-edited files.',
+    };
+  }
+
+  // Score: 50 pts from cost efficiency (log scale) + 50 pts from survival rate
+  let costScore;
+  if (costPerCommit <= 2) costScore = 50;
+  else if (costPerCommit >= 50) costScore = 0;
+  else costScore = Math.max(0, 50 * (1 - Math.log(costPerCommit / 2) / Math.log(25)));
+  const survivalScore = Math.min(survivalRate, 100) / 100 * 50;
+  const score = Math.round(costScore + survivalScore);
+
+  const tier = score >= 80 ? 'Excellent' : score >= 60 ? 'Solid' : score >= 40 ? 'Developing' : score >= 20 ? 'Early' : 'Getting Started';
+  const letter = score >= 80 ? 'A' : score >= 60 ? 'B' : score >= 40 ? 'C' : score >= 20 ? 'D' : 'F';
+
+  // Build explanation from actual metrics
+  const costAdj = costPerCommit <= 2 ? 'excellent' : costPerCommit <= 5 ? 'good' : costPerCommit <= 15 ? 'moderate' : 'high';
+  const explanation = `$${costPerCommit.toFixed(2)}/commit (${costAdj}) · ${Math.round(survivalRate)}% code survival`;
+
+  // Actionable tip based on weakest metric
+  let tip;
+  if (costScore < survivalScore) {
+    tip = 'Try shorter, focused sessions to reduce cost per commit.';
+  } else if (survivalRate < 50) {
+    tip = 'Review AI-generated code before committing to improve survival rate.';
+  } else if (orphanedRate > 40) {
+    tip = `${orphanedRate}% of sessions had no commits — some may be exploratory, which is fine.`;
+  } else {
+    tip = 'Keep it up — your efficiency is on track.';
+  }
+
+  return { score, tier, letter, explanation, tip };
+}
+
 function computeSessionGrade(session) {
   if (session.commitCount === 0) return 'F';
   const costPerCommit = session.cost.totalCost / session.commitCount;
@@ -508,9 +547,11 @@ export function computeMetrics(correlatedSessions, organicCommits, commitsByRepo
   const lineSurvival = computeLineSurvival(commitsByRepo);
 
   const avgCost = totalCommits > 0 ? totalCost / totalCommits : 0;
+  const orphanedSessionRate = totalSessions > 0 ? Math.round((orphanedCount / totalSessions) * 100) : 0;
   const overallGrade = totalCommits > 0
     ? computeEfficiencyGrade(avgCost, lineSurvival.survivalRate)
     : 'F';
+  const efficiencyScore = computeEfficiencyScore(avgCost, lineSurvival.survivalRate, orphanedSessionRate, totalCommits);
 
   // ---- Daily timeline ----
   const dailyMap = new Map();
@@ -679,9 +720,10 @@ export function computeMetrics(correlatedSessions, organicCommits, commitsByRepo
     avgCostPerLine: totalLinesAdded > 0 ? totalCost / totalLinesAdded : null,
     totalInputTokens,
     totalOutputTokens,
-    orphanedSessionRate: totalSessions > 0 ? Math.round((orphanedCount / totalSessions) * 100) : 0,
+    orphanedSessionRate,
     lineSurvivalRate: lineSurvival.survivalRate,
     overallGrade,
+    efficiencyScore,
     totalCommitsOnMain,
     mainBranchPct: totalCommits > 0 ? Math.round((totalCommitsOnMain / totalCommits) * 100) : 0,
     organicCommitCount: organicCommits.length,