From c0efba8fa346059d02c2f546bb709da1c1db5e7a Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Sun, 18 Jan 2026 22:44:52 +0100
Subject: [PATCH] feat(ui): enhance session status visual indicators

- Add glow effect to status dots (green/yellow/red)
- Add stopped status style for terminated sessions
- Add subtle pulsing glow animation for active session card

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/styles.css | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 67626d40..52b82276 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -605,9 +605,10 @@ body {
   border-radius: 50%;
 }
 
-.session-status-dot.idle { background: var(--green); }
-.session-status-dot.busy { background: var(--yellow); animation: pulse 1.5s infinite; }
-.session-status-dot.error { background: var(--red); }
+.session-status-dot.idle { background: var(--green); box-shadow: 0 0 6px var(--green); }
+.session-status-dot.busy { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); animation: pulse 1.5s infinite; }
+.session-status-dot.error { background: var(--red); box-shadow: 0 0 6px var(--red); }
+.session-status-dot.stopped { background: var(--text-muted); }
 
 @keyframes pulse {
   0%, 100% { opacity: 1; }
@@ -681,6 +682,12 @@ body {
 .session-card.active {
   border-color: var(--accent);
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.15);
+  animation: activeGlow 2s ease-in-out infinite;
+}
+
+@keyframes activeGlow {
+  0%, 100% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.15); }
+  50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), 0 4px 16px rgba(59, 130, 246, 0.25); }
 }
 
 .session-card:hover {