feat: live updates

public/styles/main.css

@@ -1386,6 +1386,31 @@ p {
     transition: all 0.3s ease;
 }
 
+/* Compact Cluster Status Layout */
+.cluster-status-compact {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.cluster-status-compact .cluster-status-main {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.cluster-status-compact .websocket-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.8rem;
+    opacity: 0.8;
+    padding-left: 0.75rem;
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+}
+
 /* Cluster Status States */
 .cluster-status-online {
     background: linear-gradient(135deg, rgba(0, 255, 0, 0.15) 0%, rgba(0, 255, 0, 0.08) 100%);

public/styles/theme.css

@@ -175,6 +175,42 @@
     box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
 }
 
+/* Cluster Status with WebSocket Indicator */
+.cluster-status {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: flex-start;
+    min-width: fit-content;
+}
+
+.cluster-status-main {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.websocket-status {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    opacity: 0.8;
+}
+
+/* WebSocket connection status classes */
+.ws-connected .websocket-status {
+    color: var(--accent-success);
+}
+
+.ws-disconnected .websocket-status {
+    color: var(--accent-error);
+}
+
+.ws-reconnecting .websocket-status {
+    color: var(--accent-warning);
+}
+
 [data-theme="light"] .cluster-status {
     background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
     backdrop-filter: blur(15px);
@@ -183,6 +219,18 @@
     color: #059669;
 }
 
+[data-theme="light"] .ws-connected .websocket-status {
+    color: #059669;
+}
+
+[data-theme="light"] .ws-disconnected .websocket-status {
+    color: #dc2626;
+}
+
+[data-theme="light"] .ws-reconnecting .websocket-status {
+    color: #d97706;
+}
+
 [data-theme="light"] .theme-switcher {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(20px);
@@ -416,6 +464,31 @@
     border: 1px solid rgba(220, 38, 38, 0.3);
 }
 
+/* Status classes for dark theme (default) */
+.status-online {
+    background: rgba(74, 222, 128, 0.15);
+    color: var(--accent-success);
+    border: 1px solid rgba(74, 222, 128, 0.3);
+}
+
+.status-offline {
+    background: rgba(248, 113, 113, 0.15);
+    color: var(--accent-error);
+    border: 1px solid rgba(248, 113, 113, 0.3);
+}
+
+.status-dead {
+    background: rgba(251, 146, 60, 0.15);
+    color: #fb923c;
+    border: 1px solid rgba(251, 146, 60, 0.3);
+}
+
+[data-theme="light"] .status-dead {
+    background: rgba(139, 69, 19, 0.15);
+    color: #8b4513;
+    border: 1px solid rgba(139, 69, 19, 0.3);
+}
+
 [data-theme="light"] .status-inactive {
     background: rgba(245, 158, 11, 0.15);
     color: #f59e0b;