codedash-app 3.1.1 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codedash-app",
-  "version": "3.1.1",
+  "version": "3.3.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 ─────────────────────────────────────────────────
@@ -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);
@@ -1719,6 +1744,59 @@ function focusSession(sessionId) {
   });
 }
 
+// ── Install agents ────────────────────────────────────────────
+
+var AGENT_INSTALL = {
+  claude: {
+    name: 'Claude Code',
+    cmd: 'curl -fsSL https://claude.ai/install.sh | bash',
+    alt: 'npm i -g @anthropic-ai/claude-code',
+    url: 'https://code.claude.com',
+  },
+  codex: {
+    name: 'Codex CLI',
+    cmd: 'npm i -g @openai/codex',
+    alt: 'brew install --cask codex',
+    url: 'https://github.com/openai/codex',
+  },
+  kiro: {
+    name: 'Kiro CLI',
+    cmd: 'curl -fsSL https://kiro.dev/install.sh | bash',
+    alt: null,
+    url: 'https://kiro.dev/cli/',
+  },
+  opencode: {
+    name: 'OpenCode',
+    cmd: 'curl -fsSL https://opencode.ai/install | bash',
+    alt: 'npm i -g opencode-ai@latest',
+    url: 'https://opencode.ai',
+  },
+};
+
+function installAgent(agent) {
+  var info = AGENT_INSTALL[agent];
+  if (!info) return;
+
+  var overlay = document.getElementById('confirmOverlay');
+  document.getElementById('confirmTitle').textContent = 'Install ' + info.name;
+  var html = '<code style="display:block;margin:8px 0;padding:10px;background:var(--bg-card);border-radius:6px;font-size:13px;cursor:pointer" onclick="navigator.clipboard.writeText(\'' + info.cmd.replace(/'/g, "\\'") + '\');document.querySelector(\'#toast\').textContent=\'Copied!\';document.querySelector(\'#toast\').classList.add(\'show\');setTimeout(function(){document.querySelector(\'#toast\').classList.remove(\'show\')},1500)">' + escHtml(info.cmd) + '</code>';
+  if (info.alt) {
+    html += '<span style="font-size:11px;color:var(--text-muted)">or: <code>' + escHtml(info.alt) + '</code></span><br>';
+  }
+  html += '<br><a href="' + info.url + '" target="_blank" style="color:var(--accent-blue);font-size:12px">' + info.url + '</a>';
+  document.getElementById('confirmText').innerHTML = html;
+  document.getElementById('confirmId').textContent = '';
+  document.getElementById('confirmAction').textContent = 'Copy Install Command';
+  document.getElementById('confirmAction').className = 'launch-btn btn-primary';
+  document.getElementById('confirmAction').onclick = function() {
+    navigator.clipboard.writeText(info.cmd).then(function() {
+      showToast('Copied: ' + info.cmd);
+    });
+    closeConfirm();
+  };
+  if (overlay) overlay.style.display = 'flex';
+}
+
 // ── Export/Import dialog ──────────────────────────────────────
 
 function showExportDialog() {

package/src/frontend/index.html

@@ -53,10 +53,31 @@
         Codex
     </div>
     <div class="sidebar-divider"></div>
+    <div class="sidebar-section">Install Agents</div>
+    <div class="sidebar-item small" onclick="installAgent('claude')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
+        Claude Code
+    </div>
+    <div class="sidebar-item small" onclick="installAgent('codex')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
+        Codex CLI
+    </div>
+    <div class="sidebar-item small" onclick="installAgent('kiro')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
+        Kiro CLI
+    </div>
+    <div class="sidebar-item small" onclick="installAgent('opencode')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
+        OpenCode
+    </div>
+    <div class="sidebar-divider"></div>
     <div class="sidebar-item" onclick="showExportDialog()">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
         Export / Import
     </div>
+    <div class="sidebar-author">
+        <a href="https://t.me/neuraldeep" target="_blank">Valerii Kovalskii</a>
+    </div>
     <div class="sidebar-settings">
         <label>Terminal</label>
         <select id="terminalSelect" onchange="saveTerminalPref(this.value)">

package/src/frontend/styles.css

@@ -135,6 +135,8 @@ body {
 }
 .sidebar-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
 .sidebar-item.active { color: var(--text-primary); background: rgba(255,255,255,0.08); }
+.sidebar-item.small { padding: 6px 20px; font-size: 12px; }
+.sidebar-item.small svg { width: 14px; height: 14px; }
 .sidebar-item svg { width: 18px; height: 18px; opacity: 0.7; }
 
 .sidebar-divider { height: 1px; background: var(--border); margin: 12px 20px; }
@@ -147,8 +149,20 @@ body {
     color: var(--text-muted);
 }
 
-.sidebar-settings {
+.sidebar-author {
     margin-top: auto;
+    padding: 8px 20px 0;
+    font-size: 11px;
+    text-align: center;
+}
+.sidebar-author a {
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: color 0.15s;
+}
+.sidebar-author a:hover { color: var(--accent-blue); }
+
+.sidebar-settings {
     padding: 12px 16px;
     border-top: 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();