codedash-app 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codedash-app",
-  "version": "2.0.1",
+  "version": "2.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/styles.css

@@ -1437,15 +1437,65 @@ body {
     50% { opacity: 0.3; transform: scale(0.6); }
 }
 
-/* Glow the entire card when live */
+/* Animated border for live sessions */
+.card:has(.live-active),
+.card:has(.live-waiting) {
+    border-color: transparent;
+    position: relative;
+    overflow: hidden;
+}
+
+.card:has(.live-active)::before,
+.card:has(.live-waiting)::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: 12px;
+    z-index: -1;
+    background: conic-gradient(
+        from var(--border-angle, 0deg),
+        transparent 40%,
+        var(--live-color) 50%,
+        transparent 60%
+    );
+    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) {
-    border-color: rgba(74, 222, 128, 0.3);
-    box-shadow: 0 0 20px rgba(74, 222, 128, 0.08);
+    --live-color: rgba(74, 222, 128, 0.6);
 }
 
 .card:has(.live-waiting) {
-    border-color: rgba(251, 191, 36, 0.25);
-    box-shadow: 0 0 20px rgba(251, 191, 36, 0.06);
+    --live-color: rgba(251, 191, 36, 0.4);
+}
+
+.card:has(.live-waiting)::before {
+    animation: none;
+}
+
+@keyframes border-spin {
+    to { --border-angle: 360deg; }
+}
+
+@property --border-angle {
+    syntax: '<angle>';
+    initial-value: 0deg;
+    inherits: false;
+}
+
+[data-theme="light"] .card:has(.live-active)::after,
+[data-theme="light"] .card:has(.live-waiting)::after {
+    background: #ffffff;
 }
 
 /* ── Card expand preview ────────────────────────────────────── */