codedash-app 3.0.2 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codedash-app",
-  "version": "3.0.2",
+  "version": "3.1.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/frontend/app.js

@@ -236,8 +236,15 @@ async function pollActiveSessions() {
         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')) {
+        // Add/update animated border wrapper
+        if (parent && parent.classList.contains('card-live-wrap')) {
+          // Update status class on existing wrapper
+          parent.className = 'card-live-wrap' + (a.status === 'waiting' ? ' live-waiting' : '');
+          parent.style.setProperty('--live-color', a.status === 'waiting'
+            ? 'rgba(251, 191, 36, 0.5)'
+            : 'rgba(74, 222, 128, 0.7)');
+        } else {
+          // Create new wrapper
           var wrap = document.createElement('div');
           wrap.className = 'card-live-wrap' + (a.status === 'waiting' ? ' live-waiting' : '');
           wrap.style.setProperty('--live-color', a.status === 'waiting'
@@ -718,6 +725,11 @@ function render() {
     return;
   }
 
+  if (currentView === 'running') {
+    renderRunning(content);
+    return;
+  }
+
   if (currentView === 'starred') {
     var starredSessions = sessions.filter(function(s) { return stars.indexOf(s.id) >= 0; });
     if (starredSessions.length === 0) {
@@ -1426,6 +1438,64 @@ document.addEventListener('keydown', function(e) {
   }
 });
 
+// ── Running Sessions View ──────────────────────────────────────
+
+function renderRunning(container) {
+  var activeIds = Object.keys(activeSessions);
+
+  if (activeIds.length === 0) {
+    container.innerHTML = '<div class="empty-state">No running sessions detected.<br><span style="font-size:12px;color:var(--text-muted)">Start a Claude Code or Codex session and it will appear here.</span></div>';
+    return;
+  }
+
+  var html = '<div class="running-container">';
+  html += '<h2 class="heatmap-title">Running Sessions</h2>';
+
+  activeIds.forEach(function(sid) {
+    var a = activeSessions[sid];
+    var s = allSessions.find(function(x) { return x.id === sid; });
+    var projName = s ? getProjectName(s.project) : (a.cwd ? a.cwd.split('/').pop() : 'unknown');
+    var projColor = getProjectColor(projName);
+    var statusClass = a.status === 'waiting' ? 'running-waiting' : 'running-active';
+    var uptime = a.startedAt ? formatDuration(Date.now() - a.startedAt) : '';
+
+    html += '<div class="running-card ' + statusClass + '">';
+    html += '<div class="running-card-header">';
+    html += '<span class="live-badge live-' + a.status + '">' + (a.status === 'waiting' ? 'WAITING' : 'LIVE') + '</span>';
+    html += '<span class="running-project" style="color:' + projColor + '">' + escHtml(projName) + '</span>';
+    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>';
+    html += '<div class="running-stat"><span class="running-stat-val">' + a.pid + '</span><span class="running-stat-label">PID</span></div>';
+    if (uptime) {
+      html += '<div class="running-stat"><span class="running-stat-val">' + uptime + '</span><span class="running-stat-label">Uptime</span></div>';
+    }
+    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>';
+    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 += '</div>';
+
+    html += '</div>';
+  });
+
+  html += '</div>';
+  container.innerHTML = html;
+}
+
 // ── Session Replay ────────────────────────────────────────────
 
 async function openReplay(sessionId, project) {

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="running">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
+        Running
+    </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

package/src/frontend/styles.css

@@ -1582,6 +1582,53 @@ body {
     box-shadow: 0 8px 32px rgba(0,0,0,0.12);
 }
 
+/* ── Running Sessions View ──────────────────────────────────── */
+
+.running-container { padding: 20px; }
+
+.running-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 12px;
+}
+
+.running-active { border-left: 3px solid var(--accent-green); }
+.running-waiting { border-left: 3px solid #f59e0b; }
+
+.running-card-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 14px;
+}
+
+.running-project { font-size: 16px; font-weight: 600; }
+.running-tool { font-size: 12px; color: var(--text-muted); margin-left: auto; }
+
+.running-stats {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 12px;
+}
+
+.running-stat { display: flex; flex-direction: column; gap: 2px; }
+.running-stat-val { font-size: 18px; font-weight: 700; color: var(--text-primary); }
+.running-stat-label { font-size: 11px; color: var(--text-muted); }
+
+.running-msg {
+    font-size: 13px;
+    color: var(--text-secondary);
+    padding: 10px;
+    background: rgba(255,255,255,0.03);
+    border-radius: 8px;
+    margin-bottom: 12px;
+    line-height: 1.5;
+}
+
+.running-actions { display: flex; gap: 8px; }
+
 /* ── Session Replay ─────────────────────────────────────────── */
 
 .replay-container { padding: 20px; }