claude-roi 0.8.0 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-roi",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "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;
@@ -787,6 +810,19 @@
       transform: scale(1.1);
     }
     tr.orphaned { background: rgba(245, 158, 11, 0.06); }
+    .expand-chevron {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 6px;
+      vertical-align: middle;
+      transition: transform 0.2s ease;
+      color: var(--text-muted);
+      font-size: 0.7rem;
+      flex-shrink: 0;
+    }
+    tr:hover .expand-chevron { color: var(--accent-blue); }
+    tr.expanded .expand-chevron { transform: rotate(90deg); }
     .expand-row {
       display: none;
       background: var(--overlay-subtle);
@@ -1874,6 +1910,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;
@@ -2081,11 +2124,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">
@@ -2119,11 +2162,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>
@@ -2131,7 +2177,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>`;
 }
@@ -2497,7 +2543,7 @@ function renderSessionsTable(sessions) {
   const thArrow = col => col === sortCol ? (sortOrder === 1 ? ' ^' : ' v') : '';
 
   return `<div class="sessions-section">
-    <h2>Sessions (${sessions.length})</h2>
+    <h2>Sessions (${sessions.length}) <span style="font-size:0.75rem;font-weight:400;color:var(--accent-blue);opacity:0.7;margin-left:6px;">&#9654; click a row to view git commits</span></h2>
     <div class="sessions-table-wrap">
       <table>
         <colgroup><col><col><col><col><col><col><col><col><col></colgroup>
@@ -2529,8 +2575,8 @@ function renderSessionsTable(sessions) {
               : primaryName;
             const rowClass = s.isOrphaned ? 'orphaned' : '';
             return `
-              <tr class="${rowClass}" style="cursor:pointer;" onclick="toggleExpand(${idx})">
-                <td>${formatDate(s.startTime)}</td>
+              <tr class="${rowClass}" style="cursor:pointer;" onclick="toggleExpand(${idx}, this)">
+                <td><span class="expand-chevron">&#9654;</span>${formatDate(s.startTime)}</td>
                 <td>${s.projectName || '—'}</td>
                 <td>${modelDisplay}</td>
                 <td>${s.userMessageCount + s.assistantMessageCount}</td>
@@ -2947,9 +2993,10 @@ function bindEvents() {
   }
 }
 
-window.toggleExpand = function(idx) {
+window.toggleExpand = function(idx, clickedRow) {
   const row = document.getElementById(`expand-${idx}`);
   if (row) row.classList.toggle('open');
+  if (clickedRow) clickedRow.classList.toggle('expanded');
 };
 
 window.sortTable = function(col) {

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,