codedash-app 2.0.0 → 2.1.0

package/package.json

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

@@ -1388,31 +1388,114 @@ body {
 /* ── Live session badges ────────────────────────────────────── */
 
 .live-badge {
-    font-size: 9px;
-    font-weight: 700;
-    letter-spacing: 0.5px;
-    padding: 2px 7px;
-    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.8px;
+    padding: 3px 10px;
+    border-radius: 6px;
     text-transform: uppercase;
-    animation: pulse 2s infinite;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.live-badge::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    animation: dot-pulse 1.5s infinite;
 }
 
 .live-active {
-    background: rgba(74, 222, 128, 0.2);
-    color: var(--accent-green);
-    border: 1px solid rgba(74, 222, 128, 0.3);
+    background: rgba(74, 222, 128, 0.25);
+    color: #22c55e;
+    border: 1px solid rgba(74, 222, 128, 0.5);
+    box-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
+}
+
+.live-active::before {
+    background: #22c55e;
+    box-shadow: 0 0 6px #22c55e;
 }
 
 .live-waiting {
-    background: rgba(251, 191, 36, 0.15);
-    color: #fbbf24;
-    border: 1px solid rgba(251, 191, 36, 0.25);
-    animation: pulse 1.5s infinite;
+    background: rgba(251, 191, 36, 0.2);
+    color: #f59e0b;
+    border: 1px solid rgba(251, 191, 36, 0.4);
+    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
+}
+
+.live-waiting::before {
+    background: #f59e0b;
+    box-shadow: 0 0 6px #f59e0b;
+}
+
+@keyframes dot-pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.3; transform: scale(0.6); }
+}
+
+/* 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) {
+    --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 {
+    animation: none;
+}
+
+@keyframes border-spin {
+    to { --border-angle: 360deg; }
+}
+
+@property --border-angle {
+    syntax: '<angle>';
+    initial-value: 0deg;
+    inherits: false;
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.6; }
+[data-theme="light"] .card:has(.live-active)::after,
+[data-theme="light"] .card:has(.live-waiting)::after {
+    background: #ffffff;
 }
 
 /* ── Card expand preview ────────────────────────────────────── */