codedash-app 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codedash-app",
-  "version": "3.0.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/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 {}

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 {