fix: cluster status badge

public/components.js

@@ -1925,4 +1925,55 @@ class FirmwareViewComponent extends Component {
             console.error('Failed to update available nodes:', error);
         }
     }
+} 
+
+// Cluster Status Component for header badge
+class ClusterStatusComponent extends Component {
+    constructor(container, viewModel, eventBus) {
+        super(container, viewModel, eventBus);
+    }
+
+    setupViewModelListeners() {
+        // Subscribe to properties that affect cluster status
+        this.subscribeToProperty('totalNodes', this.render.bind(this));
+        this.subscribeToProperty('clientInitialized', this.render.bind(this));
+        this.subscribeToProperty('error', this.render.bind(this));
+    }
+
+    render() {
+        const totalNodes = this.viewModel.get('totalNodes');
+        const clientInitialized = this.viewModel.get('clientInitialized');
+        const error = this.viewModel.get('error');
+
+        let statusText, statusIcon, statusClass;
+
+        if (error) {
+            statusText = 'Cluster Error';
+            statusIcon = '❌';
+            statusClass = 'cluster-status-error';
+        } else if (totalNodes === 0) {
+            statusText = 'Cluster Offline';
+            statusIcon = '🔴';
+            statusClass = 'cluster-status-offline';
+        } else if (clientInitialized) {
+            statusText = 'Cluster Online';
+            statusIcon = '🟢';
+            statusClass = 'cluster-status-online';
+        } else {
+            statusText = 'Cluster Connecting';
+            statusIcon = '🟡';
+            statusClass = 'cluster-status-connecting';
+        }
+
+        // Update the cluster status badge using the container passed to this component
+        if (this.container) {
+            this.container.innerHTML = `${statusIcon} ${statusText}`;
+            
+            // Remove all existing status classes
+            this.container.classList.remove('cluster-status-online', 'cluster-status-offline', 'cluster-status-connecting', 'cluster-status-error');
+            
+            // Add the appropriate status class
+            this.container.classList.add(statusClass);
+        }
+    }
 }