codedash-app 3.1.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codedash-app",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Termius-style browser dashboard for Claude Code sessions. View, search, resume, and delete sessions with a dark-themed UI.",
   "bin": {
     "codedash": "./bin/cli.js"

package/src/data.js

@@ -589,6 +589,86 @@ function getSessionReplay(sessionId, project) {
   };
 }
 
+// ── Pricing per model (per token, April 2026) ─────────────
+
+const MODEL_PRICING = {
+  'claude-opus-4-6':   { input: 5.00 / 1e6, output: 25.00 / 1e6, cache_read: 0.50 / 1e6, cache_create: 6.25 / 1e6 },
+  'claude-opus-4-5':   { input: 5.00 / 1e6, output: 25.00 / 1e6, cache_read: 0.50 / 1e6, cache_create: 6.25 / 1e6 },
+  'claude-sonnet-4-6': { input: 3.00 / 1e6, output: 15.00 / 1e6, cache_read: 0.30 / 1e6, cache_create: 3.75 / 1e6 },
+  'claude-sonnet-4-5': { input: 3.00 / 1e6, output: 15.00 / 1e6, cache_read: 0.30 / 1e6, cache_create: 3.75 / 1e6 },
+  'claude-haiku-4-5':  { input: 1.00 / 1e6, output: 5.00 / 1e6,  cache_read: 0.10 / 1e6, cache_create: 1.25 / 1e6 },
+  'codex-mini-latest': { input: 1.50 / 1e6, output: 6.00 / 1e6,  cache_read: 0.375 / 1e6, cache_create: 1.875 / 1e6 },
+  'gpt-5':             { input: 1.25 / 1e6, output: 10.00 / 1e6, cache_read: 0.625 / 1e6, cache_create: 1.25 / 1e6 },
+};
+
+function getModelPricing(model) {
+  if (!model) return MODEL_PRICING['claude-sonnet-4-6']; // default
+  for (const key in MODEL_PRICING) {
+    if (model.includes(key) || model.startsWith(key)) return MODEL_PRICING[key];
+  }
+  // Fallback: try partial match
+  if (model.includes('opus')) return MODEL_PRICING['claude-opus-4-6'];
+  if (model.includes('haiku')) return MODEL_PRICING['claude-haiku-4-5'];
+  if (model.includes('sonnet')) return MODEL_PRICING['claude-sonnet-4-6'];
+  if (model.includes('codex')) return MODEL_PRICING['codex-mini-latest'];
+  return MODEL_PRICING['claude-sonnet-4-6'];
+}
+
+// ── Compute real cost from session file token usage ────────
+
+function computeSessionCost(sessionId, project) {
+  const found = findSessionFile(sessionId, project);
+  if (!found) return { cost: 0, inputTokens: 0, outputTokens: 0, model: '' };
+
+  let totalCost = 0;
+  let totalInput = 0;
+  let totalOutput = 0;
+  let model = '';
+
+  try {
+    const lines = fs.readFileSync(found.file, 'utf8').split('\n').filter(Boolean);
+    for (const line of lines) {
+      try {
+        const entry = JSON.parse(line);
+        if (found.format === 'claude' && entry.type === 'assistant') {
+          const msg = entry.message || {};
+          if (!model && msg.model) model = msg.model;
+          const u = msg.usage;
+          if (!u) continue;
+
+          const pricing = getModelPricing(msg.model || model);
+          const inp = u.input_tokens || 0;
+          const cacheCreate = u.cache_creation_input_tokens || 0;
+          const cacheRead = u.cache_read_input_tokens || 0;
+          const out = u.output_tokens || 0;
+
+          totalInput += inp + cacheCreate + cacheRead;
+          totalOutput += out;
+          totalCost += inp * pricing.input
+                     + cacheCreate * pricing.cache_create
+                     + cacheRead * pricing.cache_read
+                     + out * pricing.output;
+        }
+        // Codex: estimate from file size (no token usage in session files)
+      } catch {}
+    }
+  } catch {}
+
+  // Fallback for Codex or sessions without usage data
+  if (totalCost === 0 && found.format === 'codex') {
+    try {
+      const size = fs.statSync(found.file).size;
+      const tokens = size / 4;
+      const pricing = MODEL_PRICING['codex-mini-latest'];
+      totalInput = Math.round(tokens * 0.3);
+      totalOutput = Math.round(tokens * 0.7);
+      totalCost = totalInput * pricing.input + totalOutput * pricing.output;
+    } catch {}
+  }
+
+  return { cost: totalCost, inputTokens: totalInput, outputTokens: totalOutput, model };
+}
+
 // ── Cost analytics ────────────────────────────────────────
 
 function getCostAnalytics(sessions) {
@@ -600,9 +680,10 @@ function getCostAnalytics(sessions) {
   const sessionCosts = [];
 
   for (const s of sessions) {
-    if (!s.file_size) continue;
-    const tokens = s.file_size / 4;
-    const cost = tokens * 0.000015 * 0.3 + tokens * 0.000075 * 0.7;
+    const costData = computeSessionCost(s.id, s.project);
+    const cost = costData.cost;
+    const tokens = costData.inputTokens + costData.outputTokens;
+    if (cost === 0 && tokens === 0) continue;
     totalCost += cost;
     totalTokens += tokens;
 
@@ -746,6 +827,8 @@ module.exports = {
   getActiveSessions,
   getSessionReplay,
   getCostAnalytics,
+  computeSessionCost,
+  MODEL_PRICING,
   CLAUDE_DIR,
   CODEX_DIR,
   HISTORY_FILE,

package/src/frontend/app.js

@@ -91,9 +91,16 @@ function formatBytes(bytes) {
 
 function estimateCost(fileSize) {
   if (!fileSize) return 0;
-  const tokens = fileSize / 4;
-  // Rough estimate: 30% input tokens, 70% output tokens
-  return tokens * 0.000015 * 0.3 + tokens * 0.000075 * 0.7;
+  var tokens = fileSize / 4;
+  // Quick card badge estimate (Sonnet 4.6: $3/M in, $15/M out)
+  return tokens * 0.3 * (3.0 / 1e6) + tokens * 0.7 * (15.0 / 1e6);
+}
+
+async function loadRealCost(sessionId, project) {
+  try {
+    var resp = await fetch('/api/cost/' + sessionId + '?project=' + encodeURIComponent(project));
+    return await resp.json();
+  } catch (e) { return null; }
 }
 
 // ── Tag system ─────────────────────────────────────────────────
@@ -726,7 +733,7 @@ function render() {
   }
 
   if (currentView === 'running') {
-    renderRunning(content);
+    renderRunning(content, sessions);
     return;
   }
 
@@ -1050,8 +1057,9 @@ async function openDetail(s) {
   infoHtml += '<div class="detail-row"><span class="detail-label">Messages</span><span>' + (s.detail_messages || s.messages || 0) + '</span></div>';
   infoHtml += '<div class="detail-row"><span class="detail-label">File size</span><span>' + formatBytes(s.file_size) + '</span></div>';
   if (costStr) {
-    infoHtml += '<div class="detail-row"><span class="detail-label">Est. cost</span><span class="cost-badge">' + costStr + '</span></div>';
+    infoHtml += '<div class="detail-row"><span class="detail-label">Est. cost</span><span class="cost-badge" id="detail-cost">' + costStr + '</span></div>';
   }
+  infoHtml += '<div class="detail-row" id="detail-real-cost" style="display:none"><span class="detail-label">Real cost</span><span></span></div>';
   // Tags
   infoHtml += '<div class="detail-row"><span class="detail-label">Tags</span><span class="card-tags">';
   sessionTags.forEach(function(t) {
@@ -1110,6 +1118,23 @@ async function openDetail(s) {
     body.querySelector('.detail-messages').innerHTML = '<div class="empty-state">No detail file available for this session.</div>';
   }
 
+  // Load real cost
+  loadRealCost(s.id, s.project || '').then(function(costData) {
+    if (!costData || !costData.cost) return;
+    var row = document.getElementById('detail-real-cost');
+    if (row) {
+      row.style.display = '';
+      row.querySelector('span:last-child').innerHTML =
+        '<span class="cost-badge" style="background:rgba(74,222,128,0.2);color:var(--accent-green)">$' + costData.cost.toFixed(2) + '</span>' +
+        ' <span style="font-size:11px;color:var(--text-muted)">' +
+        formatTokens(costData.inputTokens) + ' in / ' + formatTokens(costData.outputTokens) + ' out' +
+        (costData.model ? ' (' + costData.model + ')' : '') + '</span>';
+    }
+    // Update estimated badge to show it was estimated
+    var estBadge = document.getElementById('detail-cost');
+    if (estBadge) estBadge.style.opacity = '0.5';
+  });
+
   // Load git commits
   if (s.project) {
     var commits = await loadGitCommits(s.project, s.first_ts, s.last_ts);
@@ -1440,7 +1465,7 @@ document.addEventListener('keydown', function(e) {
 
 // ── Running Sessions View ──────────────────────────────────────
 
-function renderRunning(container) {
+function renderRunning(container, sessions) {
   var activeIds = Object.keys(activeSessions);
 
   if (activeIds.length === 0) {
@@ -1448,8 +1473,10 @@ function renderRunning(container) {
     return;
   }
 
+  // Running cards at top
   var html = '<div class="running-container">';
-  html += '<h2 class="heatmap-title">Running Sessions</h2>';
+  html += '<h2 class="heatmap-title">Running Sessions (' + activeIds.length + ')</h2>';
+  html += '<div class="running-grid">';
 
   activeIds.forEach(function(sid) {
     var a = activeSessions[sid];
@@ -1466,7 +1493,6 @@ function renderRunning(container) {
     html += '<span class="running-tool">' + escHtml(a.entrypoint || a.kind || 'claude') + '</span>';
     html += '</div>';
 
-    // Stats row
     html += '<div class="running-stats">';
     html += '<div class="running-stat"><span class="running-stat-val">' + a.cpu.toFixed(1) + '%</span><span class="running-stat-label">CPU</span></div>';
     html += '<div class="running-stat"><span class="running-stat-val">' + a.memoryMB + 'MB</span><span class="running-stat-label">Memory</span></div>';
@@ -1476,22 +1502,32 @@ function renderRunning(container) {
     }
     html += '</div>';
 
-    // Message preview
     if (s && s.first_message) {
       html += '<div class="running-msg">' + escHtml(s.first_message.slice(0, 150)) + '</div>';
     }
 
-    // Action buttons
     html += '<div class="running-actions">';
-    html += '<button class="launch-btn" style="background:var(--accent-green);color:#000" onclick="focusSession(\'' + sid + '\')">Focus Terminal</button>';
+    html += '<button class="launch-btn" style="background:var(--accent-green);color:#000" onclick="focusSession(\'' + sid + '\')">Focus</button>';
     if (s) {
       html += '<button class="launch-btn btn-secondary" onclick="var ss=allSessions.find(function(x){return x.id===\'' + sid + '\'});if(ss)openDetail(ss);">Details</button>';
+      html += '<button class="launch-btn btn-secondary" onclick="closeDetail();openReplay(\'' + sid + '\',\'' + escHtml((s.project || '').replace(/'/g, "\\'")) + '\')">Replay</button>';
     }
     html += '</div>';
-
     html += '</div>';
   });
 
+  html += '</div>';
+
+  // Also show recent non-active sessions below
+  var recentInactive = sessions.filter(function(s) { return !activeSessions[s.id]; }).slice(0, 6);
+  if (recentInactive.length > 0) {
+    html += '<h3 style="margin:24px 0 12px;font-size:14px;color:var(--text-secondary)">Recently Inactive</h3>';
+    html += '<div class="grid-view">';
+    var idx = 0;
+    recentInactive.forEach(function(s) { html += renderCard(s, idx++); });
+    html += '</div>';
+  }
+
   html += '</div>';
   container.innerHTML = html;
 }

package/src/frontend/styles.css

@@ -1586,6 +1586,12 @@ body {
 
 .running-container { padding: 20px; }
 
+.running-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    gap: 12px;
+}
+
 .running-card {
     background: var(--bg-card);
     border: 1px solid var(--border);

package/src/server.js

@@ -3,7 +3,7 @@ const http = require('http');
 const https = require('https');
 const { URL } = require('url');
 const { exec } = require('child_process');
-const { loadSessions, loadSessionDetail, deleteSession, getGitCommits, exportSessionMarkdown, getSessionPreview, searchFullText, getActiveSessions, getSessionReplay, getCostAnalytics } = require('./data');
+const { loadSessions, loadSessionDetail, deleteSession, getGitCommits, exportSessionMarkdown, getSessionPreview, searchFullText, getActiveSessions, getSessionReplay, getCostAnalytics, computeSessionCost } = require('./data');
 const { detectTerminals, openInTerminal, focusTerminalByPid } = require('./terminals');
 const { getHTML } = require('./html');
 
@@ -140,6 +140,14 @@ function startServer(port, openBrowser = true) {
       json(res, results);
     }
 
+    // ── Session cost ──────────────────────
+    else if (req.method === 'GET' && pathname.startsWith('/api/cost/')) {
+      const sessionId = pathname.split('/').pop();
+      const project = parsed.searchParams.get('project') || '';
+      const data = computeSessionCost(sessionId, project);
+      json(res, data);
+    }
+
     // ── Session replay ─────────────────────
     else if (req.method === 'GET' && pathname.startsWith('/api/replay/')) {
       const sessionId = pathname.split('/').pop();