codedash-app 2.1.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codedash-app",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "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

@@ -539,6 +539,115 @@ function searchFullText(query, sessions) {
 
 // ── Exports ────────────────────────────────────────────────
 
+// ── Session replay data (with timestamps) ─────────────────
+
+function getSessionReplay(sessionId, project) {
+  const found = findSessionFile(sessionId, project);
+  if (!found) return { messages: [], duration: 0 };
+
+  const messages = [];
+  const lines = fs.readFileSync(found.file, 'utf8').split('\n').filter(Boolean);
+
+  for (const line of lines) {
+    try {
+      const entry = JSON.parse(line);
+      let role, content, ts;
+
+      if (found.format === 'claude') {
+        if (entry.type !== 'user' && entry.type !== 'assistant') continue;
+        role = entry.type;
+        content = extractContent((entry.message || {}).content);
+        ts = entry.timestamp || '';
+      } else {
+        if (entry.type !== 'response_item' || !entry.payload) continue;
+        role = entry.payload.role;
+        if (role !== 'user' && role !== 'assistant') continue;
+        content = extractContent(entry.payload.content);
+        ts = entry.timestamp || '';
+      }
+
+      if (!content || isSystemMessage(content)) continue;
+
+      messages.push({
+        role,
+        content: content.slice(0, 3000),
+        timestamp: ts,
+        ms: ts ? new Date(ts).getTime() : 0,
+      });
+    } catch {}
+  }
+
+  // Calculate duration
+  const startMs = messages.length > 0 ? messages[0].ms : 0;
+  const endMs = messages.length > 0 ? messages[messages.length - 1].ms : 0;
+
+  return {
+    messages,
+    startMs,
+    endMs,
+    duration: endMs - startMs,
+  };
+}
+
+// ── Cost analytics ────────────────────────────────────────
+
+function getCostAnalytics(sessions) {
+  const byDay = {};
+  const byProject = {};
+  const byWeek = {};
+  let totalCost = 0;
+  let totalTokens = 0;
+  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;
+    totalCost += cost;
+    totalTokens += tokens;
+
+    // By day
+    const day = s.date || 'unknown';
+    if (!byDay[day]) byDay[day] = { cost: 0, sessions: 0, tokens: 0 };
+    byDay[day].cost += cost;
+    byDay[day].sessions++;
+    byDay[day].tokens += tokens;
+
+    // By week
+    if (s.date) {
+      const d = new Date(s.date);
+      const weekStart = new Date(d);
+      weekStart.setDate(d.getDate() - d.getDay());
+      const weekKey = weekStart.toISOString().slice(0, 10);
+      if (!byWeek[weekKey]) byWeek[weekKey] = { cost: 0, sessions: 0 };
+      byWeek[weekKey].cost += cost;
+      byWeek[weekKey].sessions++;
+    }
+
+    // By project
+    const proj = s.project_short || s.project || 'unknown';
+    if (!byProject[proj]) byProject[proj] = { cost: 0, sessions: 0, tokens: 0 };
+    byProject[proj].cost += cost;
+    byProject[proj].sessions++;
+    byProject[proj].tokens += tokens;
+
+    sessionCosts.push({ id: s.id, cost, project: proj, date: s.date });
+  }
+
+  // Sort top sessions by cost
+  sessionCosts.sort((a, b) => b.cost - a.cost);
+
+  return {
+    totalCost,
+    totalTokens,
+    totalSessions: sessions.length,
+    byDay,
+    byWeek,
+    byProject,
+    topSessions: sessionCosts.slice(0, 10),
+  };
+}
+
 // ── Active sessions detection ─────────────────────────────
 
 function getActiveSessions() {
@@ -635,6 +744,8 @@ module.exports = {
   getSessionPreview,
   searchFullText,
   getActiveSessions,
+  getSessionReplay,
+  getCostAnalytics,
   CLAUDE_DIR,
   CODEX_DIR,
   HISTORY_FILE,

package/src/frontend/app.js

@@ -209,19 +209,46 @@ async function pollActiveSessions() {
         activeSessions[a.sessionId] = a;
       }
     });
-    // Update badges without full re-render
+    // Update badges + animated border wrappers
     document.querySelectorAll('.card').forEach(function(card) {
       var id = card.getAttribute('data-id');
+
+      // Remove old badge
       var existing = card.querySelector('.live-badge');
       if (existing) existing.remove();
+
+      // Remove old wrapper if session no longer active
+      var parent = card.parentElement;
+      if (parent && parent.classList.contains('card-live-wrap') && !activeSessions[id]) {
+        parent.replaceWith(card);
+        card.style.border = '';
+        return;
+      }
+
       if (activeSessions[id]) {
         var a = activeSessions[id];
+
+        // Add badge
         var badge = document.createElement('span');
         badge.className = 'live-badge live-' + a.status;
         badge.textContent = a.status === 'waiting' ? 'WAITING' : 'LIVE';
         badge.title = 'PID ' + a.pid + ' | CPU ' + a.cpu.toFixed(1) + '% | ' + a.memoryMB + 'MB';
         var top = card.querySelector('.card-top');
         if (top) top.insertBefore(badge, top.firstChild);
+
+        // Add animated border wrapper if not already wrapped
+        if (!parent || !parent.classList.contains('card-live-wrap')) {
+          var wrap = document.createElement('div');
+          wrap.className = 'card-live-wrap' + (a.status === 'waiting' ? ' live-waiting' : '');
+          wrap.style.setProperty('--live-color', a.status === 'waiting'
+            ? 'rgba(251, 191, 36, 0.5)'
+            : 'rgba(74, 222, 128, 0.7)');
+          var borderDiv = document.createElement('div');
+          borderDiv.className = 'live-border';
+          card.parentNode.insertBefore(wrap, card);
+          wrap.appendChild(borderDiv);
+          wrap.appendChild(card);
+        }
       }
     });
   } catch {}
@@ -686,6 +713,11 @@ function render() {
     return;
   }
 
+  if (currentView === 'analytics') {
+    renderAnalytics(content);
+    return;
+  }
+
   if (currentView === 'starred') {
     var starredSessions = sessions.filter(function(s) { return stars.indexOf(s.id) >= 0; });
     if (starredSessions.length === 0) {
@@ -1019,9 +1051,15 @@ async function openDetail(s) {
 
   // Action buttons
   infoHtml += '<div class="detail-actions">';
-  infoHtml += '<button class="launch-btn" onclick="launchSession(\'' + s.id + '\',\'' + escHtml(s.tool) + '\',\'' + escHtml(s.project || '') + '\')">Resume in Terminal</button>';
+  // Show Focus button for active sessions
+  if (activeSessions[s.id]) {
+    infoHtml += '<button class="launch-btn" style="background:var(--accent-green);color:#000" onclick="focusSession(\'' + s.id + '\')">Focus Terminal</button>';
+  } else {
+    infoHtml += '<button class="launch-btn" onclick="launchSession(\'' + s.id + '\',\'' + escHtml(s.tool) + '\',\'' + escHtml(s.project || '') + '\')">Resume in Terminal</button>';
+  }
   infoHtml += '<button class="launch-btn btn-secondary" onclick="copyResume(\'' + s.id + '\',\'' + escHtml(s.tool) + '\')">Copy Command</button>';
   if (s.has_detail) {
+    infoHtml += '<button class="launch-btn btn-secondary" onclick="closeDetail();openReplay(\'' + s.id + '\',\'' + escHtml(s.project || '') + '\')">Replay</button>';
     infoHtml += '<button class="launch-btn btn-secondary" onclick="exportMd(\'' + s.id + '\',\'' + escHtml(s.project || '') + '\')">Export MD</button>';
   }
   infoHtml += '<button class="star-btn detail-star' + (isStarred ? ' active' : '') + '" onclick="toggleStar(\'' + s.id + '\')">&#9733; ' + (isStarred ? 'Starred' : 'Star') + '</button>';
@@ -1388,6 +1426,225 @@ document.addEventListener('keydown', function(e) {
   }
 });
 
+// ── Session Replay ────────────────────────────────────────────
+
+async function openReplay(sessionId, project) {
+  var content = document.getElementById('content');
+  content.innerHTML = '<div class="loading">Loading replay...</div>';
+
+  try {
+    var resp = await fetch('/api/replay/' + sessionId + '?project=' + encodeURIComponent(project));
+    var data = await resp.json();
+
+    if (!data.messages || data.messages.length === 0) {
+      content.innerHTML = '<div class="empty-state">No messages to replay.</div>';
+      return;
+    }
+
+    var msgs = data.messages;
+    var html = '<div class="replay-container">';
+    html += '<div class="replay-header">';
+    html += '<button class="launch-btn btn-secondary" onclick="setView(\'sessions\')">Back</button>';
+    html += '<span class="replay-title">Session Replay — ' + sessionId.slice(0, 12) + '</span>';
+    html += '<span class="replay-duration">' + formatDuration(data.duration) + '</span>';
+    html += '</div>';
+
+    // Timeline slider
+    html += '<div class="replay-controls">';
+    html += '<button class="replay-play-btn" id="replayPlayBtn" onclick="toggleReplayPlay()">&#9654;</button>';
+    html += '<input type="range" class="replay-slider" id="replaySlider" min="0" max="' + (msgs.length - 1) + '" value="0" oninput="seekReplay(this.value)">';
+    html += '<span class="replay-counter" id="replayCounter">1 / ' + msgs.length + '</span>';
+    html += '</div>';
+
+    // Messages area
+    html += '<div class="replay-messages" id="replayMessages"></div>';
+    html += '</div>';
+
+    content.innerHTML = html;
+
+    // Store messages for replay
+    window._replayMsgs = msgs;
+    window._replayPos = 0;
+    window._replayPlaying = false;
+    window._replayTimer = null;
+    seekReplay(0);
+  } catch (e) {
+    content.innerHTML = '<div class="empty-state">Failed to load replay.</div>';
+  }
+}
+
+function seekReplay(pos) {
+  pos = parseInt(pos);
+  var msgs = window._replayMsgs;
+  if (!msgs) return;
+  window._replayPos = pos;
+
+  var container = document.getElementById('replayMessages');
+  var slider = document.getElementById('replaySlider');
+  var counter = document.getElementById('replayCounter');
+  if (!container) return;
+
+  var html = '';
+  for (var i = 0; i <= pos && i < msgs.length; i++) {
+    var m = msgs[i];
+    var cls = m.role === 'user' ? 'preview-user' : 'preview-assistant';
+    var label = m.role === 'user' ? 'You' : 'AI';
+    var time = m.timestamp ? new Date(m.timestamp).toLocaleTimeString() : '';
+    var isLatest = i === pos;
+    html += '<div class="replay-msg ' + cls + (isLatest ? ' replay-latest' : '') + '">';
+    html += '<div class="replay-msg-header"><span class="preview-role">' + label + '</span><span class="replay-time">' + time + '</span></div>';
+    html += '<div class="replay-msg-content">' + escHtml(m.content) + '</div>';
+    html += '</div>';
+  }
+  container.innerHTML = html;
+  container.scrollTop = container.scrollHeight;
+
+  if (slider) slider.value = pos;
+  if (counter) counter.textContent = (pos + 1) + ' / ' + msgs.length;
+}
+
+function toggleReplayPlay() {
+  var btn = document.getElementById('replayPlayBtn');
+  if (window._replayPlaying) {
+    window._replayPlaying = false;
+    clearInterval(window._replayTimer);
+    if (btn) btn.innerHTML = '&#9654;';
+  } else {
+    window._replayPlaying = true;
+    if (btn) btn.innerHTML = '&#9646;&#9646;';
+    window._replayTimer = setInterval(function() {
+      var next = window._replayPos + 1;
+      if (next >= window._replayMsgs.length) {
+        toggleReplayPlay();
+        return;
+      }
+      seekReplay(next);
+    }, 1500);
+  }
+}
+
+function formatDuration(ms) {
+  if (!ms) return '';
+  var s = Math.floor(ms / 1000);
+  var m = Math.floor(s / 60);
+  var h = Math.floor(m / 60);
+  if (h > 0) return h + 'h ' + (m % 60) + 'm';
+  if (m > 0) return m + 'm ' + (s % 60) + 's';
+  return s + 's';
+}
+
+// ── Cost Analytics ────────────────────────────────────────────
+
+async function renderAnalytics(container) {
+  container.innerHTML = '<div class="loading">Loading analytics...</div>';
+
+  try {
+    var resp = await fetch('/api/analytics/cost');
+    var data = await resp.json();
+
+    var html = '<div class="analytics-container">';
+    html += '<h2 class="heatmap-title">Cost Analytics</h2>';
+
+    // Summary cards
+    html += '<div class="analytics-summary">';
+    html += '<div class="analytics-card"><span class="analytics-val">~$' + data.totalCost.toFixed(2) + '</span><span class="analytics-label">Total estimated cost</span></div>';
+    html += '<div class="analytics-card"><span class="analytics-val">' + formatTokens(data.totalTokens) + '</span><span class="analytics-label">Total tokens</span></div>';
+    html += '<div class="analytics-card"><span class="analytics-val">' + data.totalSessions + '</span><span class="analytics-label">Sessions</span></div>';
+    html += '<div class="analytics-card"><span class="analytics-val">~$' + (data.totalCost / Math.max(data.totalSessions, 1)).toFixed(2) + '</span><span class="analytics-label">Avg per session</span></div>';
+    html += '</div>';
+
+    // Cost by day chart (bar chart)
+    var days = Object.keys(data.byDay).sort();
+    var last30 = days.slice(-30);
+    if (last30.length > 0) {
+      var maxCost = Math.max.apply(null, last30.map(function(d) { return data.byDay[d].cost; }));
+      html += '<div class="chart-section"><h3>Daily Cost (last 30 days)</h3>';
+      html += '<div class="bar-chart">';
+      last30.forEach(function(d) {
+        var c = data.byDay[d];
+        var pct = maxCost > 0 ? (c.cost / maxCost * 100) : 0;
+        var label = d.slice(5); // MM-DD
+        html += '<div class="bar-col" title="' + d + ': ~$' + c.cost.toFixed(2) + ' (' + c.sessions + ' sessions)">';
+        html += '<div class="bar-fill" style="height:' + pct + '%"></div>';
+        html += '<div class="bar-label">' + label + '</div>';
+        html += '</div>';
+      });
+      html += '</div></div>';
+    }
+
+    // Cost by project (horizontal bars)
+    var projects = Object.entries(data.byProject).sort(function(a, b) { return b[1].cost - a[1].cost; });
+    var topProjects = projects.slice(0, 10);
+    if (topProjects.length > 0) {
+      var maxProjCost = topProjects[0][1].cost;
+      html += '<div class="chart-section"><h3>Cost by Project</h3>';
+      html += '<div class="hbar-chart">';
+      topProjects.forEach(function(entry) {
+        var name = entry[0];
+        var info = entry[1];
+        var pct = maxProjCost > 0 ? (info.cost / maxProjCost * 100) : 0;
+        html += '<div class="hbar-row">';
+        html += '<span class="hbar-name">' + escHtml(name) + '</span>';
+        html += '<div class="hbar-track"><div class="hbar-fill" style="width:' + pct + '%"></div></div>';
+        html += '<span class="hbar-val">~$' + info.cost.toFixed(2) + '</span>';
+        html += '</div>';
+      });
+      html += '</div></div>';
+    }
+
+    // Top expensive sessions
+    if (data.topSessions && data.topSessions.length > 0) {
+      html += '<div class="chart-section"><h3>Most Expensive Sessions</h3>';
+      html += '<div class="top-sessions">';
+      data.topSessions.forEach(function(s) {
+        html += '<div class="top-session-row" onclick="onCardClick(\'' + s.id + '\', event)">';
+        html += '<span class="top-session-cost">~$' + s.cost.toFixed(2) + '</span>';
+        html += '<span class="top-session-project">' + escHtml(s.project) + '</span>';
+        html += '<span class="top-session-date">' + (s.date || '') + '</span>';
+        html += '<span class="top-session-id">' + s.id.slice(0, 8) + '</span>';
+        html += '</div>';
+      });
+      html += '</div></div>';
+    }
+
+    html += '</div>';
+    container.innerHTML = html;
+  } catch (e) {
+    container.innerHTML = '<div class="empty-state">Failed to load analytics.</div>';
+  }
+}
+
+function formatTokens(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(0) + 'K';
+  return String(n);
+}
+
+// ── Focus active session (switch to terminal) ─────────────────
+
+function focusSession(sessionId) {
+  var a = activeSessions[sessionId];
+  if (!a) { showToast('Session not active'); return; }
+
+  // Use osascript via the launch API to focus the terminal window
+  var terminal = localStorage.getItem('codedash-terminal') || '';
+  fetch('/api/launch', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      sessionId: sessionId,
+      tool: a.kind === 'codex' ? 'codex' : 'claude',
+      flags: ['focus'],
+      project: a.cwd || '',
+      terminal: terminal,
+    })
+  }).then(function() {
+    showToast('Focused terminal');
+  }).catch(function() {
+    showToast('Could not focus terminal');
+  });
+}
+
 // ── Export/Import dialog ──────────────────────────────────────
 
 function showExportDialog() {

package/src/frontend/index.html

@@ -30,6 +30,10 @@
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="7" y="7" width="3" height="3"/><rect x="14" y="7" width="3" height="3"/><rect x="7" y="14" width="3" height="3"/><rect x="14" y="14" width="3" height="3"/></svg>
         Activity
     </div>
+    <div class="sidebar-item" data-view="analytics">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
+        Analytics
+    </div>
     <div class="sidebar-item" data-view="starred">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
         Starred

package/src/frontend/styles.css

@@ -1437,50 +1437,41 @@ body {
     50% { opacity: 0.3; transform: scale(0.6); }
 }
 
-/* Animated border for live sessions */
-.card:has(.live-active),
-.card:has(.live-waiting) {
-    border-color: transparent;
+/* Animated border wrapper for live sessions */
+.card-live-wrap {
     position: relative;
-    overflow: hidden;
+    border-radius: 12px;
+    padding: 2px;
 }
 
-.card:has(.live-active)::before,
-.card:has(.live-waiting)::before {
-    content: '';
+.card-live-wrap > .card {
+    border: none;
+    position: relative;
+    z-index: 1;
+}
+
+.card-live-wrap .live-border {
     position: absolute;
-    inset: -2px;
+    inset: 0;
     border-radius: 12px;
-    z-index: -1;
+    z-index: 0;
     background: conic-gradient(
         from var(--border-angle, 0deg),
-        transparent 40%,
-        var(--live-color) 50%,
-        transparent 60%
+        transparent 35%,
+        var(--live-color, rgba(74, 222, 128, 0.6)) 50%,
+        transparent 65%
     );
     animation: border-spin 3s linear infinite;
 }
 
-.card:has(.live-active)::after,
-.card:has(.live-waiting)::after {
-    content: '';
-    position: absolute;
-    inset: 1px;
-    border-radius: 9px;
-    background: var(--bg-card);
-    z-index: -1;
-}
-
-.card:has(.live-active) {
-    --live-color: rgba(74, 222, 128, 0.6);
-}
-
-.card:has(.live-waiting) {
-    --live-color: rgba(251, 191, 36, 0.4);
-}
-
-.card:has(.live-waiting)::before {
+.card-live-wrap.live-waiting .live-border {
     animation: none;
+    background: conic-gradient(
+        from 90deg,
+        transparent 35%,
+        var(--live-color, rgba(251, 191, 36, 0.4)) 50%,
+        transparent 65%
+    );
 }
 
 @keyframes border-spin {
@@ -1493,11 +1484,6 @@ body {
     inherits: false;
 }
 
-[data-theme="light"] .card:has(.live-active)::after,
-[data-theme="light"] .card:has(.live-waiting)::after {
-    background: #ffffff;
-}
-
 /* ── Card expand preview ────────────────────────────────────── */
 
 .card-expand-btn {
@@ -1596,6 +1582,273 @@ body {
     box-shadow: 0 8px 32px rgba(0,0,0,0.12);
 }
 
+/* ── Session Replay ─────────────────────────────────────────── */
+
+.replay-container { padding: 20px; }
+
+.replay-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+.replay-title {
+    font-size: 16px;
+    font-weight: 600;
+    flex: 1;
+}
+
+.replay-duration {
+    color: var(--text-muted);
+    font-size: 13px;
+}
+
+.replay-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+    padding: 12px 16px;
+    background: var(--bg-card);
+    border-radius: 10px;
+    border: 1px solid var(--border);
+}
+
+.replay-play-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: var(--accent-blue);
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.replay-play-btn:hover { opacity: 0.85; }
+
+.replay-slider {
+    flex: 1;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--border);
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
+}
+.replay-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--accent-blue);
+    cursor: pointer;
+}
+
+.replay-counter {
+    font-size: 12px;
+    color: var(--text-muted);
+    white-space: nowrap;
+    min-width: 60px;
+    text-align: right;
+}
+
+.replay-messages {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+}
+
+.replay-msg {
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    border-radius: 10px;
+    animation: fadeIn 0.3s ease;
+}
+
+.replay-latest {
+    box-shadow: 0 0 0 2px var(--accent-blue);
+}
+
+.replay-msg-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 4px;
+}
+
+.replay-time {
+    font-size: 11px;
+    color: var(--text-muted);
+}
+
+.replay-msg-content {
+    font-size: 13px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* ── Cost Analytics ─────────────────────────────────────────── */
+
+.analytics-container { padding: 20px; }
+
+.analytics-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.analytics-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.analytics-val {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--accent-green);
+}
+
+.analytics-label {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.chart-section {
+    margin-bottom: 28px;
+}
+
+.chart-section h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 12px;
+}
+
+/* Bar chart (vertical) */
+.bar-chart {
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+    height: 160px;
+    padding: 0 4px;
+    border-bottom: 1px solid var(--border);
+}
+
+.bar-col {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    justify-content: flex-end;
+    min-width: 0;
+}
+
+.bar-fill {
+    width: 100%;
+    background: linear-gradient(to top, var(--accent-blue), var(--accent-purple));
+    border-radius: 3px 3px 0 0;
+    min-height: 2px;
+    transition: height 0.3s ease;
+}
+
+.bar-label {
+    font-size: 9px;
+    color: var(--text-muted);
+    margin-top: 6px;
+    transform: rotate(-45deg);
+    white-space: nowrap;
+}
+
+/* Horizontal bar chart */
+.hbar-chart {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.hbar-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.hbar-name {
+    width: 140px;
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.hbar-track {
+    flex: 1;
+    height: 24px;
+    background: var(--bg-card);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.hbar-fill {
+    height: 100%;
+    background: linear-gradient(to right, var(--accent-blue), var(--accent-green));
+    border-radius: 6px;
+    transition: width 0.5s ease;
+}
+
+.hbar-val {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--accent-green);
+    min-width: 70px;
+    text-align: right;
+}
+
+/* Top sessions list */
+.top-sessions { display: flex; flex-direction: column; gap: 4px; }
+
+.top-session-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background 0.15s;
+}
+.top-session-row:hover { background: var(--bg-card-hover); }
+
+.top-session-cost {
+    font-weight: 700;
+    color: var(--accent-green);
+    min-width: 70px;
+}
+
+.top-session-project {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.top-session-date { color: var(--text-muted); font-size: 12px; }
+.top-session-id { font-family: monospace; font-size: 11px; color: var(--text-muted); }
+
 /* ── Update banner ──────────────────────────────────────────── */
 
 .update-banner {

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 } = require('./data');
+const { loadSessions, loadSessionDetail, deleteSession, getGitCommits, exportSessionMarkdown, getSessionPreview, searchFullText, getActiveSessions, getSessionReplay, getCostAnalytics } = require('./data');
 const { detectTerminals, openInTerminal } = require('./terminals');
 const { getHTML } = require('./html');
 
@@ -127,6 +127,21 @@ function startServer(port, openBrowser = true) {
       json(res, results);
     }
 
+    // ── Session replay ─────────────────────
+    else if (req.method === 'GET' && pathname.startsWith('/api/replay/')) {
+      const sessionId = pathname.split('/').pop();
+      const project = parsed.searchParams.get('project') || '';
+      const data = getSessionReplay(sessionId, project);
+      json(res, data);
+    }
+
+    // ── Cost analytics ──────────────────────
+    else if (req.method === 'GET' && pathname === '/api/analytics/cost') {
+      const sessions = loadSessions();
+      const data = getCostAnalytics(sessions);
+      json(res, data);
+    }
+
     // ── Version check ────────────────────────
     else if (req.method === 'GET' && pathname === '/api/version') {
       const pkg = require('../package.json');