claude-roi 0.8.6 → 0.8.8

package/package.json

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

package/src/dashboard.html

@@ -2245,6 +2245,8 @@ let sortCol = 'startTime';
 let sortOrder = -1;
 let timelineChart = null;
 let timelineLogScale = false;
+let tokenBurnChart = null;
+let tokenBurnPercentMode = false;
 
 document.addEventListener('DOMContentLoaded', async () => {
   initTheme();
@@ -2308,6 +2310,7 @@ function render() {
       <div class="chart-card full-width">
         <div class="chart-header">
           <h3>Token Burn Rate <i class="info-tip" data-tip="Daily token consumption stacked by type (input/output/cache). Dashed orange line shows cumulative total — watch it climb.">i</i></h3>
+          <button class="scale-toggle" onclick="toggleTokenBurnPercent()">Split view</button>
         </div>
         <div class="chart-container"><canvas id="chart-token-burn"></canvas></div>
       </div>
@@ -2327,8 +2330,8 @@ function render() {
         <div class="chart-container"><canvas id="chart-tools"></canvas></div>
       </div>
       <div class="chart-card">
-        <h3>Session Length vs Efficiency <i class="info-tip" data-tip="Sessions grouped by message count (1-50, 51-100, etc). Blue bars = average cost per commit for that group. Purple bars = number of sessions. Find your sweet spot — the group with the lowest blue bar.">i</i></h3>
-        <div class="chart-container"><canvas id="chart-buckets"></canvas></div>
+        <h3>Cost per Commit by Model <i class="info-tip" data-tip="Compare how much each model costs per commit. Lower blue bars = better value. Purple bars show commit volume for confidence. Use this to decide which model to use for different tasks.">i</i></h3>
+        <div class="chart-container"><canvas id="chart-model-efficiency"></canvas></div>
       </div>
       <div class="chart-card">
         <h3>Productivity Heatmap <i class="info-tip" data-tip="Each cell = commits produced during that hour and day of week. Darker green = more commits. Find your peak productivity windows.">i</i></h3>
@@ -2891,7 +2894,7 @@ function initCharts() {
   let cumulative = 0;
   const cumulativeData = dailyTokens.map(d => { cumulative += (d.totalTokens || 0); return cumulative; });
 
-  new Chart(document.getElementById('chart-token-burn'), {
+  tokenBurnChart = new Chart(document.getElementById('chart-token-burn'), {
     type: 'bar',
     data: {
       labels: dailyTokens.map(d => new Date(d.date + 'T12:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric' })),
@@ -3123,25 +3126,29 @@ function initCharts() {
     },
   });
 
-  // Session buckets
-  const buckets = DATA.sessionBuckets;
-  const bucketLabels = Object.keys(buckets);
-  new Chart(document.getElementById('chart-buckets'), {
+  // Cost per Commit by Model
+  const modelEff = DATA.modelBreakdown;
+  const modelEffLabels = Object.keys(modelEff).filter(k => modelEff[k].commits > 0);
+  const modelEffColors = { opus: '#a855f7', sonnet: '#3b82f6', haiku: '#22d3a8', unknown: '#94a3b8' };
+  new Chart(document.getElementById('chart-model-efficiency'), {
     type: 'bar',
     data: {
-      labels: bucketLabels,
+      labels: modelEffLabels.map(m => m.charAt(0).toUpperCase() + m.slice(1) + ' ($' + modelEff[m].cost.toFixed(0) + ' total)'),
       datasets: [
         {
           label: 'Avg $/Commit',
-          data: bucketLabels.map(b => buckets[b].avgCostPerCommit),
-          backgroundColor: '#3b82f6',
+          data: modelEffLabels.map(m => modelEff[m].avgCostPerCommit),
+          backgroundColor: modelEffLabels.map(m => modelEffColors[m] || '#94a3b8'),
           borderRadius: 4,
           yAxisID: 'y',
         },
         {
-          label: 'Sessions',
-          data: bucketLabels.map(b => buckets[b].sessions),
-          backgroundColor: 'rgba(168,85,247,0.4)',
+          label: 'Commits',
+          data: modelEffLabels.map(m => Math.round(modelEff[m].commits)),
+          backgroundColor: modelEffLabels.map(m => {
+            const c = modelEffColors[m] || '#94a3b8';
+            return c + '40';
+          }),
           borderRadius: 4,
           yAxisID: 'y1',
         },
@@ -3150,10 +3157,30 @@ function initCharts() {
     options: {
       responsive: true,
       maintainAspectRatio: false,
-      plugins: { legend: { position: 'top' } },
+      plugins: {
+        legend: { position: 'top' },
+        tooltip: {
+          callbacks: {
+            label: ctx => {
+              if (ctx.datasetIndex === 0) return ` Avg $/Commit: $${ctx.parsed.y.toFixed(2)}`;
+              return ` Commits: ${ctx.parsed.y}`;
+            },
+            afterBody: (items) => {
+              const idx = items[0].dataIndex;
+              const m = modelEffLabels[idx];
+              const d = modelEff[m];
+              const lines = [];
+              lines.push(`Sessions: ${d.sessions}`);
+              lines.push(`Total: $${d.cost.toFixed(2)} | ${formatTokens(d.tokens)} tokens`);
+              if (d.tokensPerCommit) lines.push(`${formatTokens(d.tokensPerCommit)} tokens/commit`);
+              return lines;
+            },
+          },
+        },
+      },
       scales: {
-        y: { type: 'linear', position: 'left', title: { display: true, text: 'Avg $/Commit' } },
-        y1: { type: 'linear', position: 'right', title: { display: true, text: 'Sessions' }, grid: { drawOnChartArea: false } },
+        y: { type: 'linear', position: 'left', title: { display: true, text: 'Avg $/Commit' }, ticks: { callback: v => '$' + v.toFixed(1) } },
+        y1: { type: 'linear', position: 'right', title: { display: true, text: 'Commits' }, grid: { drawOnChartArea: false } },
       },
     },
   });
@@ -3263,10 +3290,93 @@ window.toggleTimelineScale = function() {
   timelineChart.options.scales.y.type = scaleType;
   timelineChart.options.scales.y1.type = scaleType;
   timelineChart.update();
-  const btn = document.querySelector('.scale-toggle');
+  const btn = document.querySelector('#chart-timeline').closest('.chart-card').querySelector('.scale-toggle');
   if (btn) btn.textContent = timelineLogScale ? 'Linear scale' : 'Log scale';
 };
 
+window.toggleTokenBurnPercent = function() {
+  if (!tokenBurnChart) return;
+  tokenBurnPercentMode = !tokenBurnPercentMode;
+  const dailyTokens = DATA.daily;
+  if (tokenBurnPercentMode) {
+    // Switch to split line view — each token type gets its own line
+    tokenBurnChart.data.datasets[0].type = 'line';
+    tokenBurnChart.data.datasets[0].borderColor = 'rgba(59, 130, 246, 1)';
+    tokenBurnChart.data.datasets[0].backgroundColor = 'rgba(59, 130, 246, 0.1)';
+    tokenBurnChart.data.datasets[0].fill = true;
+    tokenBurnChart.data.datasets[0].stack = undefined;
+    tokenBurnChart.data.datasets[0].borderWidth = 2;
+    tokenBurnChart.data.datasets[0].pointRadius = 2;
+    tokenBurnChart.data.datasets[0].tension = 0.3;
+
+    tokenBurnChart.data.datasets[1].type = 'line';
+    tokenBurnChart.data.datasets[1].borderColor = 'rgba(168, 85, 247, 1)';
+    tokenBurnChart.data.datasets[1].backgroundColor = 'rgba(168, 85, 247, 0.1)';
+    tokenBurnChart.data.datasets[1].fill = true;
+    tokenBurnChart.data.datasets[1].stack = undefined;
+    tokenBurnChart.data.datasets[1].borderWidth = 2;
+    tokenBurnChart.data.datasets[1].pointRadius = 2;
+    tokenBurnChart.data.datasets[1].tension = 0.3;
+
+    tokenBurnChart.data.datasets[2].type = 'line';
+    tokenBurnChart.data.datasets[2].borderColor = 'rgba(6, 182, 212, 1)';
+    tokenBurnChart.data.datasets[2].backgroundColor = 'rgba(6, 182, 212, 0.1)';
+    tokenBurnChart.data.datasets[2].fill = true;
+    tokenBurnChart.data.datasets[2].stack = undefined;
+    tokenBurnChart.data.datasets[2].borderWidth = 2;
+    tokenBurnChart.data.datasets[2].pointRadius = 2;
+    tokenBurnChart.data.datasets[2].tension = 0.3;
+
+    tokenBurnChart.data.datasets[3].hidden = true;
+    tokenBurnChart.options.scales.x.stacked = false;
+    tokenBurnChart.options.scales.y.stacked = false;
+    tokenBurnChart.options.scales.y.type = 'logarithmic';
+    tokenBurnChart.options.scales.y.title.text = 'Tokens / Day (log)';
+    tokenBurnChart.options.scales.y1.display = false;
+  } else {
+    // Restore stacked bar view
+    tokenBurnChart.data.datasets[0].type = 'bar';
+    tokenBurnChart.data.datasets[0].backgroundColor = 'rgba(59, 130, 246, 0.8)';
+    tokenBurnChart.data.datasets[0].stack = 'tokens';
+    tokenBurnChart.data.datasets[0].borderRadius = 2;
+    delete tokenBurnChart.data.datasets[0].borderColor;
+    delete tokenBurnChart.data.datasets[0].fill;
+    delete tokenBurnChart.data.datasets[0].borderWidth;
+    delete tokenBurnChart.data.datasets[0].pointRadius;
+    delete tokenBurnChart.data.datasets[0].tension;
+
+    tokenBurnChart.data.datasets[1].type = 'bar';
+    tokenBurnChart.data.datasets[1].backgroundColor = 'rgba(168, 85, 247, 0.8)';
+    tokenBurnChart.data.datasets[1].stack = 'tokens';
+    tokenBurnChart.data.datasets[1].borderRadius = 2;
+    delete tokenBurnChart.data.datasets[1].borderColor;
+    delete tokenBurnChart.data.datasets[1].fill;
+    delete tokenBurnChart.data.datasets[1].borderWidth;
+    delete tokenBurnChart.data.datasets[1].pointRadius;
+    delete tokenBurnChart.data.datasets[1].tension;
+
+    tokenBurnChart.data.datasets[2].type = 'bar';
+    tokenBurnChart.data.datasets[2].backgroundColor = 'rgba(6, 182, 212, 0.6)';
+    tokenBurnChart.data.datasets[2].stack = 'tokens';
+    tokenBurnChart.data.datasets[2].borderRadius = 2;
+    delete tokenBurnChart.data.datasets[2].borderColor;
+    delete tokenBurnChart.data.datasets[2].fill;
+    delete tokenBurnChart.data.datasets[2].borderWidth;
+    delete tokenBurnChart.data.datasets[2].pointRadius;
+    delete tokenBurnChart.data.datasets[2].tension;
+
+    tokenBurnChart.data.datasets[3].hidden = false;
+    tokenBurnChart.options.scales.x.stacked = true;
+    tokenBurnChart.options.scales.y.stacked = true;
+    tokenBurnChart.options.scales.y.type = 'linear';
+    tokenBurnChart.options.scales.y.title.text = 'Tokens / Day';
+    tokenBurnChart.options.scales.y1.display = true;
+  }
+  tokenBurnChart.update();
+  const btn = document.querySelector('#chart-token-burn').closest('.chart-card').querySelector('.scale-toggle');
+  if (btn) btn.textContent = tokenBurnPercentMode ? 'Stacked' : 'Split view';
+};
+
 /* ── Share Report Card ─────────────────────────── */
 
 const GRADE_HEX = { A: '#22d3a8', B: '#3b82f6', C: '#f59e0b', D: '#f0883e', F: '#ef4444' };

package/src/index.js

@@ -15,6 +15,20 @@ const { version: VERSION } = JSON.parse(
   readFileSync(new URL('../package.json', import.meta.url), 'utf8')
 );
 
+// ── pretty CLI output helpers ──
+const c = {
+  reset: '\x1b[0m', bold: '\x1b[1m', dim: '\x1b[2m',
+  green: '\x1b[32m', yellow: '\x1b[33m', cyan: '\x1b[36m', red: '\x1b[31m',
+};
+const icon = {
+  ok: `${c.green}✔${c.reset}`,
+  dot: `${c.cyan}◆${c.reset}`,
+  arrow: `${c.cyan}▸${c.reset}`,
+  warn: `${c.yellow}⚠${c.reset}`,
+  err: `${c.red}✖${c.reset}`,
+};
+const fmt = (ms) => ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`;
+
 async function buildPayload(claudeDir, days, project, forceRefresh = false) {
   // Step 1: Parse sessions (with caching)
   let sessions;
@@ -23,7 +37,7 @@ async function buildPayload(claudeDir, days, project, forceRefresh = false) {
 
   if (forceRefresh) {
     deleteCache();
-    console.log('Cache cleared, performing full parse...');
+    console.log(`  ${icon.arrow} Cache cleared, performing full parse...`);
   }
 
   const cached = forceRefresh ? null : loadCache();
@@ -38,18 +52,18 @@ async function buildPayload(claudeDir, days, project, forceRefresh = false) {
     if (newCount === 0 && modifiedCount === 0 && deletedCount === 0) {
       sessions = cached.sessions;
       fileIndex = cached.fileIndex;
-      console.log(`Parsing sessions... ${cached.sessions.length} cached (${Date.now() - startParse}ms)`);
+      console.log(`  ${icon.ok} Parsing sessions ${c.dim}── ${cached.sessions.length} cached (${fmt(Date.now() - startParse)})${c.reset}`);
     } else {
       const { sessions: freshSessions, fileIndex: freshIndex } = await parseAllProjects(claudeDir, days, project);
       sessions = freshSessions;
       fileIndex = freshIndex;
-      console.log(`Parsing sessions... ${newCount} new, ${modifiedCount} updated, ${Math.max(0, cachedCount)} cached (${Date.now() - startParse}ms)`);
+      console.log(`  ${icon.ok} Parsing sessions ${c.dim}── ${newCount} new, ${modifiedCount} updated, ${Math.max(0, cachedCount)} cached (${fmt(Date.now() - startParse)})${c.reset}`);
     }
   } else {
     const result = await parseAllProjects(claudeDir, days, project);
     sessions = result.sessions;
     fileIndex = result.fileIndex;
-    console.log(`Parsing sessions... ${sessions.length} parsed (${Date.now() - startParse}ms)`);
+    console.log(`  ${icon.ok} Parsing sessions ${c.dim}── ${sessions.length} parsed (${fmt(Date.now() - startParse)})${c.reset}`);
   }
 
   if (sessions.length === 0) {
@@ -63,11 +77,11 @@ async function buildPayload(claudeDir, days, project, forceRefresh = false) {
   for (const repoPath of repoPathsSet) {
     commitsByRepo[repoPath] = analyzeGitRepo(repoPath, days);
   }
-  console.log(`Analyzing ${repoPathsSet.size} git repo(s)... done (${Date.now() - startGit}ms)`);
+  console.log(`  ${icon.ok} Analyzing git repos ${c.dim}── ${repoPathsSet.size} repos (${fmt(Date.now() - startGit)})${c.reset}`);
 
   // Step 3: Correlate sessions with commits
   const { correlatedSessions, organicCommits } = correlateSessions(sessions, commitsByRepo);
-  console.log('Correlating sessions with commits... done');
+  console.log(`  ${icon.ok} Correlating sessions ${c.dim}── done${c.reset}`);
 
   // Step 4: Compute metrics
   const payload = computeMetrics(correlatedSessions, organicCommits, commitsByRepo, days);
@@ -100,11 +114,10 @@ async function main() {
 
   const invokedAs = path.basename(process.argv[1]);
   if (invokedAs.includes('claude-roi')) {
-    console.log(`\x1b[33m⚠  claude-roi has been renamed to codelens-ai\x1b[0m`);
-    console.log(`   Switch to: \x1b[36mnpx codelens-ai\x1b[0m`);
-    console.log('');
+    console.log(`  ${icon.warn} ${c.yellow}claude-roi has been renamed to codelens-ai${c.reset}`);
+    console.log(`    Switch to: ${c.cyan}npx codelens-ai${c.reset}\n`);
   }
-  console.log(`\x1b[36mcodelens-ai\x1b[0m v${VERSION}`);
+  console.log(`${icon.dot} ${c.bold}${c.cyan}codelens-ai${c.reset} v${VERSION}\n`);
 
   const claudeDir = path.join(os.homedir(), '.claude', 'projects');
 
@@ -112,8 +125,8 @@ async function main() {
   if (payload) payload.meta.invokedAs = invokedAs.includes('claude-roi') ? 'claude-roi' : 'codelens-ai';
 
   if (!payload) {
-    console.log('\x1b[33mNo Claude Code sessions found.\x1b[0m');
-    console.log('Make sure you have used Claude Code and session files exist in ~/.claude/projects/');
+    console.log(`  ${icon.warn} ${c.yellow}No Claude Code sessions found.${c.reset}`);
+    console.log(`    Make sure you have used Claude Code and session files exist in ~/.claude/projects/`);
     process.exit(0);
   }
 
@@ -138,7 +151,7 @@ async function main() {
     console.log(`  ${line}`);
     if (am.topVerificationCommands.length > 0) {
       const top3 = am.topVerificationCommands.slice(0, 3)
-        .map(c => `${c.command} (${c.count})`).join(', ');
+        .map(cmd => `${cmd.command} (${cmd.count})`).join(', ');
       console.log(`  Top Tests: ${top3}`);
     }
     console.log('');
@@ -150,7 +163,7 @@ async function main() {
   const app = createServer(payload, rebuild);
   const server = app.listen(port, () => {
     const url = `http://localhost:${port}`;
-    console.log(`\x1b[32mDashboard:\x1b[0m ${url}`);
+    console.log(`\n  ${icon.ok} ${c.green}Dashboard:${c.reset} ${c.bold}${url}${c.reset}`);
 
     if (opts.open !== false) {
       import('open').then(mod => mod.default(url)).catch(() => {
@@ -161,7 +174,7 @@ async function main() {
 
   server.on('error', (err) => {
     if (err.code === 'EADDRINUSE') {
-      console.error(`\x1b[31mPort ${port} is already in use.\x1b[0m Try: codelens-ai --port ${port + 1}`);
+      console.error(`  ${icon.err} ${c.red}Port ${port} is already in use.${c.reset} Try: codelens-ai --port ${port + 1}`);
       process.exit(1);
     }
     throw err;
@@ -169,6 +182,6 @@ async function main() {
 }
 
 main().catch(err => {
-  console.error('\x1b[31mError:\x1b[0m', err.message);
+  console.error(`  ${icon.err} ${c.red}Error:${c.reset}`, err.message);
   process.exit(1);
 });

package/src/server.js

@@ -25,14 +25,14 @@ export function createServer(initialPayload, rebuildFn) {
   app.post('/api/refresh', async (req, res) => {
     if (!rebuildFn) return res.status(501).json({ error: 'Refresh not available' });
     try {
-      console.log('\x1b[36m[refresh]\x1b[0m Re-parsing sessions and recomputing metrics...');
+      console.log('  \x1b[36m▸\x1b[0m \x1b[36m[refresh]\x1b[0m Re-parsing sessions and recomputing metrics...');
       const newPayload = await rebuildFn();
       if (!newPayload) return res.status(404).json({ error: 'No sessions found after refresh' });
       payload = newPayload;
-      console.log('\x1b[32m[refresh]\x1b[0m Done');
+      console.log('  \x1b[32m✔\x1b[0m \x1b[32m[refresh]\x1b[0m Done');
       res.json({ ok: true });
     } catch (err) {
-      console.error('\x1b[31m[refresh]\x1b[0m Error:', err.message);
+      console.error('  \x1b[31m✖\x1b[0m \x1b[31m[refresh]\x1b[0m Error:', err.message);
       res.status(500).json({ error: err.message });
     }
   });