feat: optimize topology member overlay

index.js

@@ -3,6 +3,7 @@ const path = require('path');
 const fs = require('fs');
 const dgram = require('dgram');
 const SporeApiClient = require('./src/client');
+const cors = require('cors');
 
 const app = express();
 const PORT = process.env.PORT || 3001;
@@ -20,6 +21,13 @@ app.use(fileUpload({
   debug: false
 }));
 
+// Add CORS middleware
+app.use(cors({
+  origin: '*', // Or specify your phone's IP range like: ['http://192.168.1.0/24']
+  methods: ['GET', 'POST', 'PUT', 'DELETE'],
+  allowedHeaders: ['Content-Type', 'Authorization']
+}));
+
 // UDP discovery configuration
 const UDP_PORT = 4210;
 const DISCOVERY_MESSAGE = 'CLUSTER_DISCOVERY';
@@ -700,8 +708,9 @@ app.get('/api/health', (req, res) => {
 
 
 // Start the server
-const server = app.listen(PORT, () => {
-  console.log(`Server is running on http://localhost:${PORT}`);
+const server = app.listen(PORT, '0.0.0.0', () => {
+  console.log(`Server is running on http://0.0.0.0:${PORT}`);
+  console.log(`Accessible from: http://YOUR_COMPUTER_IP:${PORT}`);
   console.log(`UDP discovery server listening on port ${UDP_PORT}`);
   console.log('Waiting for CLUSTER_DISCOVERY messages from SPORE nodes...');
 });

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "cors": "^2.8.5",
         "express": "^5.1.0",
         "express-fileupload": "^1.4.3"
       }
@@ -134,6 +135,19 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -529,6 +543,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",

package.json

@@ -17,6 +17,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^5.1.0",
     "express-fileupload": "^1.4.3"
   }

public/api-client.js

@@ -2,7 +2,20 @@
 
 class ApiClient {
     constructor() {
-        this.baseUrl = (typeof window !== 'undefined' && window.API_BASE_URL) || 'http://localhost:3001'; // Backend server URL
+        // Auto-detect server URL based on current location
+        const currentHost = window.location.hostname;
+        const currentPort = window.location.port;
+        
+        // If accessing from localhost, use localhost:3001
+        // If accessing from another device, use the same hostname but port 3001
+        if (currentHost === 'localhost' || currentHost === '127.0.0.1') {
+            this.baseUrl = 'http://localhost:3001';
+        } else {
+            // Use the same hostname but port 3001
+            this.baseUrl = `http://${currentHost}:3001`;
+        }
+        
+        console.log('API Client initialized with base URL:', this.baseUrl);
     }
 
     async request(path, { method = 'GET', headers = {}, body = undefined, query = undefined, isForm = false } = {}) {

public/components.js

@@ -333,11 +333,10 @@ class ClusterMembersComponent extends Component {
         const statusElement = card.querySelector('.member-status');
         if (statusElement) {
             const statusClass = member.status === 'active' ? 'status-online' : 'status-offline';
-            const statusText = member.status === 'active' ? 'Online' : 'Offline';
             const statusIcon = member.status === 'active' ? '🟢' : '🔴';
             
             statusElement.className = `member-status ${statusClass}`;
-            statusElement.innerHTML = `${statusIcon} ${statusText}`;
+            statusElement.innerHTML = `${statusIcon}`;
         }
         
         // Update latency
@@ -347,7 +346,7 @@ class ClusterMembersComponent extends Component {
         }
         
         // Update hostname if changed
-        const hostnameElement = card.querySelector('.member-name');
+        const hostnameElement = card.querySelector('.member-hostname');
         if (hostnameElement && member.hostname !== hostnameElement.textContent) {
             hostnameElement.textContent = member.hostname || 'Unknown Device';
         }
@@ -447,18 +446,24 @@ class ClusterMembersComponent extends Component {
                 <div class="member-card" data-member-ip="${member.ip}">
                     <div class="member-header">
                         <div class="member-info">
-                            <div class="member-name">${member.hostname || 'Unknown Device'}</div>
-                            <div class="member-ip">${member.ip || 'No IP'}</div>
-                            <div class="member-status ${statusClass}">
-                                ${statusIcon} ${statusText}
-                            </div>
-                            <div class="member-latency">
-                                <span class="latency-label">Latency:</span>
-                                <span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
+                            <div class="member-row-1">
+                                <div class="status-hostname-group">
+                                    <div class="member-status ${statusClass}">
+                                        ${statusIcon}
+                                    </div>
+                                    <div class="member-hostname">${member.hostname || 'Unknown Device'}</div>
+                                </div>
+                                <div class="member-ip">${member.ip || 'No IP'}</div>
+                                <div class="member-latency">
+                                    <span class="latency-label">Latency:</span>
+                                    <span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
+                                </div>
                             </div>
                             ${member.labels && Object.keys(member.labels).length ? `
-                            <div class="member-labels">
-                                ${Object.entries(member.labels).map(([key, value]) => `<span class=\"label-chip\">${key}: ${value}</span>`).join('')}
+                            <div class="member-row-2">
+                                <div class="member-labels">
+                                    ${Object.entries(member.labels).map(([key, value]) => `<span class=\"label-chip\">${key}: ${value}</span>`).join('')}
+                                </div>
                             </div>
                             ` : ''}
                         </div>
@@ -1056,8 +1061,27 @@ class NodeDetailsComponent extends Component {
         if (tasks && tasks.length > 0) {
             const summaryHTML = summary ? `
                 <div class="tasks-summary">
-                    <span>Total: ${summary.totalTasks ?? tasks.length}</span>
-                    <span style="margin-left: 0.75rem;">Active: ${summary.activeTasks ?? tasks.filter(t => t.running).length}</span>
+                    <div class="tasks-summary-left">
+                        <div class="summary-icon">📋</div>
+                        <div>
+                            <div class="summary-title">Tasks Overview</div>
+                            <div class="summary-subtitle">System task management and monitoring</div>
+                        </div>
+                    </div>
+                    <div class="tasks-summary-right">
+                        <div class="summary-stat total">
+                            <div class="summary-stat-value">${summary.totalTasks ?? tasks.length}</div>
+                            <div class="summary-stat-label">Total</div>
+                        </div>
+                        <div class="summary-stat active">
+                            <div class="summary-stat-value">${summary.activeTasks ?? tasks.filter(t => t.running).length}</div>
+                            <div class="summary-stat-label">Active</div>
+                        </div>
+                        <div class="summary-stat stopped">
+                            <div class="summary-stat-value">${(summary.totalTasks ?? tasks.length) - (summary.activeTasks ?? tasks.filter(t => t.running).length)}</div>
+                            <div class="summary-stat-label">Stopped</div>
+                        </div>
+                    </div>
                 </div>
             ` : '';
             const tasksHTML = tasks.map(task => `
@@ -1083,6 +1107,29 @@ class NodeDetailsComponent extends Component {
             const total = summary?.totalTasks ?? 0;
             const active = summary?.activeTasks ?? 0;
             return `
+                <div class="tasks-summary">
+                    <div class="tasks-summary-left">
+                        <div class="summary-icon">📋</div>
+                        <div>
+                            <div class="summary-title">Tasks Overview</div>
+                            <div class="summary-subtitle">${total > 0 ? `Total tasks: ${total}, active: ${active}` : 'This node has no running tasks'}</div>
+                        </div>
+                    </div>
+                    <div class="tasks-summary-right">
+                        <div class="summary-stat total">
+                            <div class="summary-stat-value">${total}</div>
+                            <div class="summary-stat-label">Total</div>
+                        </div>
+                        <div class="summary-stat active">
+                            <div class="summary-stat-value">${active}</div>
+                            <div class="summary-stat-label">Active</div>
+                        </div>
+                        <div class="summary-stat stopped">
+                            <div class="summary-stat-value">${total - active}</div>
+                            <div class="summary-stat-label">Stopped</div>
+                        </div>
+                    </div>
+                </div>
                 <div class="no-tasks">
                     <div>📋 No active tasks found</div>
                     <div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">
@@ -2277,11 +2324,44 @@ class TopologyGraphComponent extends Component {
         this.svg = null;
         this.simulation = null;
         this.zoom = null;
-        this.width = 1400;  // Increased from 1000 for more space
-        this.height = 1000;  // Increased from 800 for more space
+        this.width = 0;  // Will be set dynamically based on container size
+        this.height = 0;  // Will be set dynamically based on container size
         this.isInitialized = false;
     }
 
+    updateDimensions(container) {
+        // Get the container's actual dimensions
+        const rect = container.getBoundingClientRect();
+        this.width = rect.width || 1400;  // Fallback to 1400 if width is 0
+        this.height = rect.height || 1000; // Fallback to 1000 if height is 0
+        
+        // Ensure minimum dimensions
+        this.width = Math.max(this.width, 800);
+        this.height = Math.max(this.height, 600);
+        
+        console.log('TopologyGraphComponent: Updated dimensions to', this.width, 'x', this.height);
+    }
+
+    handleResize() {
+        // Debounce resize events to avoid excessive updates
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+        
+        this.resizeTimeout = setTimeout(() => {
+            const container = this.findElement('#topology-graph-container');
+            if (container && this.svg) {
+                this.updateDimensions(container);
+                // Update SVG viewBox and force center
+                this.svg.attr('viewBox', `0 0 ${this.width} ${this.height}`);
+                if (this.simulation) {
+                    this.simulation.force('center', d3.forceCenter(this.width / 2, this.height / 2));
+                    this.simulation.alpha(0.3).restart();
+                }
+            }
+        }, 250); // 250ms debounce
+    }
+
     // Override mount to ensure proper initialization
     mount() {
         if (this.isMounted) return;
@@ -2325,6 +2405,10 @@ class TopologyGraphComponent extends Component {
         console.log('TopologyGraphComponent: Container:', this.container);
         console.log('TopologyGraphComponent: Container ID:', this.container?.id);
         
+        // Add resize listener to update dimensions when window is resized
+        this.resizeHandler = this.handleResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
+        
         // Refresh button removed from HTML, so no need to set up event listeners
         console.log('TopologyGraphComponent: No event listeners needed (refresh button removed)');
     }
@@ -2389,14 +2473,17 @@ class TopologyGraphComponent extends Component {
             return;
         }
 
+        // Calculate dynamic dimensions based on container size
+        this.updateDimensions(container);
+
         // Clear existing content
         container.innerHTML = '';
 
         // Create SVG element
         this.svg = d3.select(container)
             .append('svg')
-            .attr('width', this.width)
-            .attr('height', this.height)
+            .attr('width', '100%')
+            .attr('height', '100%')
             .attr('viewBox', `0 0 ${this.width} ${this.height}`)
             .style('border', '1px solid rgba(255, 255, 255, 0.1)')
             .style('background', 'rgba(0, 0, 0, 0.2)')
@@ -2887,6 +2974,22 @@ class TopologyGraphComponent extends Component {
         }
     }
 
+    unmount() {
+        // Clean up resize listener
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+        
+        // Clear resize timeout
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = null;
+        }
+        
+        // Call parent unmount
+        super.unmount();
+    }
 
 }
 
@@ -2958,8 +3061,23 @@ class MemberCardOverlayComponent extends Component {
         return `
             <div class="member-overlay-content">
                 <div class="member-overlay-header">
-                    <div class="member-overlay-title">
-                        <h3>Member Details</h3>
+                    <div class="member-info">
+                        <div class="member-row-1">
+                            <div class="status-hostname-group">
+                                <div class="member-status ${statusClass}">
+                                    ${statusIcon}
+                                </div>
+                                <div class="member-hostname">${member.hostname || 'Unknown Device'}</div>
+                            </div>
+                            <div class="member-ip">${member.ip || 'No IP'}</div>
+                            <div class="member-latency">
+                                <span class="latency-label">Latency:</span>
+                                <span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
+                            </div>
+                        </div>
+                        <div class="member-labels" style="display: none;">
+                            <!-- Labels will be populated dynamically from node status API -->
+                        </div>
                     </div>
                     <button class="member-overlay-close" aria-label="Close">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -2970,22 +3088,6 @@ class MemberCardOverlayComponent extends Component {
                 
                 <div class="member-overlay-body">
                     <div class="member-card expanded" data-member-ip="${member.ip}">
-                        <div class="member-header">
-                            <div class="member-info">
-                                <div class="member-name">${member.hostname || 'Unknown Device'}</div>
-                                <div class="member-ip">${member.ip || 'No IP'}</div>
-                                <div class="member-status ${statusClass}">
-                                    ${statusIcon} ${statusText}
-                                </div>
-                                <div class="member-latency">
-                                    <span class="latency-label">Latency:</span>
-                                    <span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
-                                </div>
-                                <div class="member-labels" style="display: none;">
-                                    <!-- Labels will be populated dynamically from node status API -->
-                                </div>
-                            </div>
-                        </div>
                         <div class="member-details">
                             <div class="loading-details">Loading detailed information...</div>
                         </div>
@@ -3029,29 +3131,14 @@ class MemberCardOverlayComponent extends Component {
             // Update the labels in the member header with the actual node status data
             const nodeStatus = nodeDetailsVM.get('nodeStatus');
             if (nodeStatus && nodeStatus.labels) {
-                const labelsContainer = card.querySelector('.member-labels');
+                // Find the labels container in the header
+                const labelsContainer = document.querySelector('.member-overlay-header .member-labels');
                 if (labelsContainer) {
                     // Update existing labels container and show it
                     labelsContainer.innerHTML = Object.entries(nodeStatus.labels)
                         .map(([key, value]) => `<span class="label-chip">${key}: ${value}</span>`)
                         .join('');
                     labelsContainer.style.display = 'block';
-                } else {
-                    // Create new labels container if it doesn't exist
-                    const memberInfo = card.querySelector('.member-info');
-                    if (memberInfo) {
-                        const labelsDiv = document.createElement('div');
-                        labelsDiv.className = 'member-labels';
-                        labelsDiv.innerHTML = Object.entries(nodeStatus.labels)
-                            .map(([key, value]) => `<span class="label-chip">${key}: ${value}</span>`)
-                            .join('');
-                        
-                        // Insert after latency
-                        const latencyDiv = memberInfo.querySelector('.member-latency');
-                        if (latencyDiv) {
-                            latencyDiv.parentNode.insertBefore(labelsDiv, latencyDiv.nextSibling);
-                        }
-                    }
                 }
             }
             

public/debug-cluster-load.html

@@ -1,190 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Debug Cluster Load</title>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        .debug-panel { background: #f0f0f0; padding: 15px; margin: 10px 0; border-radius: 5px; }
-        .debug-button { padding: 8px 16px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
-        .debug-button:hover { background: #0056b3; }
-        .log { background: #000; color: #0f0; padding: 10px; margin: 10px 0; border-radius: 3px; font-family: monospace; max-height: 300px; overflow-y: auto; }
-        .cluster-container { border: 1px solid #ccc; padding: 15px; margin: 10px 0; border-radius: 5px; }
-    </style>
-</head>
-<body>
-    <h1>🔍 Debug Cluster Load</h1>
-    
-    <div class="debug-panel">
-        <h3>Debug Controls</h3>
-        <button class="debug-button" onclick="testContainerFind()">🔍 Test Container Find</button>
-        <button class="debug-button" onclick="testViewModel()">📊 Test ViewModel</button>
-        <button class="debug-button" onclick="testComponent()">🧩 Test Component</button>
-        <button class="debug-button" onclick="testAPICall()">📡 Test API Call</button>
-        <button class="debug-button" onclick="clearLog()">🧹 Clear Log</button>
-    </div>
-    
-    <div class="debug-panel">
-        <h3>Container Elements</h3>
-        <div id="cluster-view" class="cluster-container">
-            <div class="primary-node-info">
-                <h4>Primary Node</h4>
-                <div id="primary-node-ip">🔍 Discovering...</div>
-                <button class="primary-node-refresh">🔄 Refresh</button>
-            </div>
-            
-            <div id="cluster-members-container">
-                <h4>Cluster Members</h4>
-                <div class="loading">Loading cluster members...</div>
-            </div>
-        </div>
-    </div>
-    
-    <div class="debug-panel">
-        <h3>Debug Log</h3>
-        <div id="debug-log" class="log"></div>
-    </div>
-
-    <!-- Include SPORE UI framework and components -->
-    <script src="framework.js"></script>
-    <script src="view-models.js"></script>
-    <script src="components.js"></script>
-    <script src="api-client.js"></script>
-    
-    <script>
-        let debugLog = [];
-        
-        function log(message, type = 'info') {
-            const timestamp = new Date().toLocaleTimeString();
-            const logEntry = `[${timestamp}] ${message}`;
-            
-            const logContainer = document.getElementById('debug-log');
-            logContainer.innerHTML += logEntry + '\n';
-            logContainer.scrollTop = logContainer.scrollHeight;
-            
-            debugLog.push({ timestamp, message, type });
-            console.log(logEntry);
-        }
-        
-        function clearLog() {
-            document.getElementById('debug-log').innerHTML = '';
-            debugLog = [];
-        }
-        
-        // Test container finding
-        function testContainerFind() {
-            log('🔍 Testing container finding...');
-            
-            const clusterView = document.getElementById('cluster-view');
-            const primaryNodeInfo = document.querySelector('.primary-node-info');
-            const clusterMembersContainer = document.getElementById('cluster-members-container');
-            
-            log(`Cluster view found: ${!!clusterView} (ID: ${clusterView?.id})`);
-            log(`Primary node info found: ${!!primaryNodeInfo}`);
-            log(`Cluster members container found: ${!!clusterMembersContainer} (ID: ${clusterMembersContainer?.id})`);
-            log(`Cluster members container innerHTML: ${clusterMembersContainer?.innerHTML?.substring(0, 100)}...`);
-        }
-        
-        // Test view model
-        function testViewModel() {
-            log('📊 Testing ViewModel...');
-            
-            try {
-                const viewModel = new ClusterViewModel();
-                log('✅ ClusterViewModel created successfully');
-                
-                log(`Initial members: ${viewModel.get('members')?.length || 0}`);
-                log(`Initial loading: ${viewModel.get('isLoading')}`);
-                log(`Initial error: ${viewModel.get('error')}`);
-                
-                return viewModel;
-            } catch (error) {
-                log(`❌ ViewModel creation failed: ${error.message}`, 'error');
-                return null;
-            }
-        }
-        
-        // Test component
-        function testComponent() {
-            log('🧩 Testing Component...');
-            
-            try {
-                const viewModel = new ClusterViewModel();
-                const eventBus = new EventBus();
-                const container = document.getElementById('cluster-members-container');
-                
-                log('✅ Dependencies created, creating ClusterMembersComponent...');
-                
-                const component = new ClusterMembersComponent(container, viewModel, eventBus);
-                log('✅ ClusterMembersComponent created successfully');
-                
-                log('Mounting component...');
-                component.mount();
-                log('✅ Component mounted');
-                
-                return { component, viewModel, eventBus };
-            } catch (error) {
-                log(`❌ Component test failed: ${error.message}`, 'error');
-                return null;
-            }
-        }
-        
-        // Test API call
-        async function testAPICall() {
-            log('📡 Testing API call...');
-            
-            try {
-                if (!window.apiClient) {
-                    log('❌ API client not available');
-                    return;
-                }
-                
-                log('Calling getClusterMembers...');
-                const response = await window.apiClient.getClusterMembers();
-                log(`✅ API call successful: ${response.members?.length || 0} members`);
-                
-                if (response.members && response.members.length > 0) {
-                    response.members.forEach(member => {
-                        log(`📱 Member: ${member.hostname || member.ip} (${member.status})`);
-                    });
-                }
-                
-            } catch (error) {
-                log(`❌ API call failed: ${error.message}`, 'error');
-            }
-        }
-        
-        // Initialize debug interface
-        document.addEventListener('DOMContentLoaded', function() {
-            log('🚀 Debug interface initialized');
-            log('💡 Use the debug controls above to test different aspects of the cluster loading');
-        });
-        
-        // Mock API client if not available
-        if (!window.apiClient) {
-            log('⚠️ Creating mock API client for testing');
-            window.apiClient = {
-                getClusterMembers: async () => {
-                    log('📡 Mock API: getClusterMembers called');
-                    return {
-                        members: [
-                            { ip: '192.168.1.100', hostname: 'Node-1', status: 'active', latency: 15 },
-                            { ip: '192.168.1.101', hostname: 'Node-2', status: 'active', latency: 22 },
-                            { ip: '192.168.1.102', hostname: 'Node-3', status: 'offline', latency: null }
-                        ]
-                    };
-                },
-                getDiscoveryInfo: async () => {
-                    log('📡 Mock API: getDiscoveryInfo called');
-                    return {
-                        primaryNode: '192.168.1.100',
-                        clientInitialized: true,
-                        totalNodes: 3
-                    };
-                }
-            };
-        }
-    </script>
-</body>
-</html> 

public/debug-cluster.html

@@ -1,208 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Debug Cluster</title>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
-        .debug-section { margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-        .status { padding: 10px; margin: 10px 0; border-radius: 4px; }
-        .status.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
-        .status.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
-        .status.info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
-        button { padding: 10px 20px; margin: 5px; border: none; border-radius: 4px; background: #007bff; color: white; cursor: pointer; }
-        button:hover { background: #0056b3; }
-        .log { background: #f8f9fa; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 12px; max-height: 300px; overflow-y: auto; }
-    </style>
-</head>
-<body>
-    <h1>🐛 Debug Cluster Functionality</h1>
-    
-    <div class="debug-section">
-        <h3>1. API Client Test</h3>
-        <button onclick="testApiClient()">Test API Client</button>
-        <div id="api-client-result"></div>
-    </div>
-    
-    <div class="debug-section">
-        <h3>2. View Model Test</h3>
-        <button onclick="testViewModel()">Test View Model</button>
-        <div id="viewmodel-result"></div>
-    </div>
-    
-    <div class="debug-section">
-        <h3>3. Component Test</h3>
-        <button onclick="testComponents()">Test Components</button>
-        <div id="component-result"></div>
-    </div>
-    
-    <div class="debug-section">
-        <h3>4. Console Log</h3>
-        <div id="console-log" class="log"></div>
-        <button onclick="clearLog()">Clear Log</button>
-    </div>
-
-    <script src="framework.js"></script>
-    <script src="api-client.js"></script>
-    <script src="view-models.js"></script>
-    <script src="components.js"></script>
-    
-    <script>
-        // Capture console logs
-        const originalLog = console.log;
-        const originalError = console.error;
-        const originalWarn = console.warn;
-        
-        function addToLog(level, ...args) {
-            const logDiv = document.getElementById('console-log');
-            const timestamp = new Date().toLocaleTimeString();
-            const message = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)).join(' ');
-            logDiv.innerHTML += `[${timestamp}] ${level}: ${message}\n`;
-            logDiv.scrollTop = logDiv.scrollHeight;
-        }
-        
-        console.log = function(...args) {
-            originalLog.apply(console, args);
-            addToLog('LOG', ...args);
-        };
-        
-        console.error = function(...args) {
-            originalError.apply(console, args);
-            addToLog('ERROR', ...args);
-        };
-        
-        console.warn = function(...args) {
-            originalWarn.apply(console, args);
-            addToLog('WARN', ...args);
-        };
-        
-        function clearLog() {
-            document.getElementById('console-log').innerHTML = '';
-        }
-        
-        async function testApiClient() {
-            const resultDiv = document.getElementById('api-client-result');
-            resultDiv.innerHTML = '<div class="status info">Testing API Client...</div>';
-            
-            try {
-                console.log('Testing API Client...');
-                
-                // Test discovery info
-                const discoveryInfo = await window.apiClient.getDiscoveryInfo();
-                console.log('Discovery Info:', discoveryInfo);
-                
-                // Test cluster members
-                const clusterMembers = await window.apiClient.getClusterMembers();
-                console.log('Cluster Members:', clusterMembers);
-                
-                resultDiv.innerHTML = `
-                    <div class="status success">
-                        <strong>API Client Test Passed!</strong><br>
-                        Discovery: ${discoveryInfo.totalNodes} nodes, Primary: ${discoveryInfo.primaryNode || 'None'}<br>
-                        Members: ${clusterMembers.members ? clusterMembers.members.length : 0} members
-                    </div>
-                `;
-                
-            } catch (error) {
-                console.error('API Client Test Failed:', error);
-                resultDiv.innerHTML = `<div class="status error">API Client Test Failed: ${error.message}</div>`;
-            }
-        }
-        
-        async function testViewModel() {
-            const resultDiv = document.getElementById('viewmodel-result');
-            resultDiv.innerHTML = '<div class="status info">Testing View Model...</div>';
-            
-            try {
-                console.log('Testing View Model...');
-                
-                const clusterViewModel = new ClusterViewModel();
-                console.log('ClusterViewModel created:', clusterViewModel);
-                
-                // Wait for initial data
-                await new Promise(resolve => setTimeout(resolve, 200));
-                
-                const totalNodes = clusterViewModel.get('totalNodes');
-                const primaryNode = clusterViewModel.get('primaryNode');
-                const clientInitialized = clusterViewModel.get('clientInitialized');
-                
-                console.log('ViewModel data:', { totalNodes, primaryNode, clientInitialized });
-                
-                resultDiv.innerHTML = `
-                    <div class="status success">
-                        <strong>View Model Test Passed!</strong><br>
-                        Total Nodes: ${totalNodes}<br>
-                        Primary Node: ${primaryNode || 'None'}<br>
-                        Client Initialized: ${clientInitialized}
-                    </div>
-                `;
-                
-            } catch (error) {
-                console.error('View Model Test Failed:', error);
-                resultDiv.innerHTML = `<div class="status error">View Model Test Failed: ${error.message}</div>`;
-            }
-        }
-        
-        async function testComponents() {
-            const resultDiv = document.getElementById('component-result');
-            resultDiv.innerHTML = '<div class="status info">Testing Components...</div>';
-            
-            try {
-                console.log('Testing Components...');
-                
-                const eventBus = new EventBus();
-                const clusterViewModel = new ClusterViewModel();
-                
-                // Test cluster status component
-                const statusContainer = document.createElement('div');
-                statusContainer.className = 'cluster-status';
-                statusContainer.innerHTML = '🚀 Cluster Online';
-                document.body.appendChild(statusContainer);
-                
-                const clusterStatusComponent = new ClusterStatusComponent(
-                    statusContainer,
-                    clusterViewModel,
-                    eventBus
-                );
-                
-                clusterStatusComponent.initialize();
-                console.log('Cluster Status Component initialized');
-                
-                // Wait for data
-                await new Promise(resolve => setTimeout(resolve, 300));
-                
-                const statusText = statusContainer.innerHTML;
-                const statusClasses = Array.from(statusContainer.classList);
-                
-                console.log('Status Component Result:', { statusText, statusClasses });
-                
-                resultDiv.innerHTML = `
-                    <div class="status success">
-                        <strong>Component Test Passed!</strong><br>
-                        Status Text: ${statusText}<br>
-                        Status Classes: ${statusClasses.join(', ')}
-                    </div>
-                `;
-                
-                // Clean up
-                document.body.removeChild(statusContainer);
-                
-            } catch (error) {
-                console.error('Component Test Failed:', error);
-                resultDiv.innerHTML = `<div class="status error">Component Test Failed: ${error.message}</div>`;
-            }
-        }
-        
-        // Auto-run tests on page load
-        window.addEventListener('load', () => {
-            setTimeout(() => {
-                console.log('Page loaded, starting auto-tests...');
-                testApiClient();
-                setTimeout(testViewModel, 1000);
-                setTimeout(testComponents, 2000);
-            }, 500);
-        });
-    </script>
-</body>
-</html> 

public/debug.html

@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Debug Framework</title>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        .debug-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
-        .log { background: #f5f5f5; padding: 10px; margin: 10px 0; font-family: monospace; }
-    </style>
-</head>
-<body>
-    <h1>Framework Debug</h1>
-    
-    <div class="debug-section">
-        <h2>Console Log</h2>
-        <div id="console-log" class="log"></div>
-        <button onclick="clearLog()">Clear Log</button>
-    </div>
-    
-    <div class="debug-section">
-        <h2>Test Cluster View</h2>
-        <div id="cluster-view">
-            <div class="cluster-section">
-                <div class="cluster-header">
-                    <div class="cluster-header-left">
-                        <div class="primary-node-info">
-                            <span class="primary-node-label">Primary Node:</span>
-                            <span class="primary-node-ip" id="primary-node-ip">Discovering...</span>
-                            <button class="primary-node-refresh" title="🎲 Select random primary node">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
-                                    <path d="M1 4v6h6M23 20v-6h-6"/>
-                                    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                    <button class="refresh-btn">Refresh</button>
-                </div>
-                <div id="cluster-members-container">
-                    <div class="loading">Loading cluster members...</div>
-                </div>
-            </div>
-        </div>
-        <button onclick="testClusterView()">Test Cluster View</button>
-    </div>
-
-    <script src="framework.js"></script>
-    <script src="api-client.js"></script>
-    <script src="view-models.js"></script>
-    <script src="components.js"></script>
-    
-    <script>
-        // Override console.log to capture output
-        const originalLog = console.log;
-        const originalError = console.error;
-        const logElement = document.getElementById('console-log');
-        
-        function addToLog(message, type = 'log') {
-            const timestamp = new Date().toLocaleTimeString();
-            const logEntry = document.createElement('div');
-            logEntry.style.color = type === 'error' ? 'red' : 'black';
-            logEntry.textContent = `[${timestamp}] ${message}`;
-            logElement.appendChild(logEntry);
-            logElement.scrollTop = logElement.scrollHeight;
-        }
-        
-        console.log = function(...args) {
-            originalLog.apply(console, args);
-            addToLog(args.join(' '));
-        };
-        
-        console.error = function(...args) {
-            originalError.apply(console, args);
-            addToLog(args.join(' '), 'error');
-        };
-        
-        function clearLog() {
-            logElement.innerHTML = '';
-        }
-        
-        // Test cluster view
-        function testClusterView() {
-            try {
-                console.log('Testing cluster view...');
-                
-                // Create view model
-                const clusterVM = new ClusterViewModel();
-                console.log('ClusterViewModel created:', clusterVM);
-                
-                // Create component
-                const container = document.getElementById('cluster-view');
-                const clusterComponent = new ClusterViewComponent(container, clusterVM, null);
-                console.log('ClusterViewComponent created:', clusterComponent);
-                
-                // Mount component
-                clusterComponent.mount();
-                console.log('Component mounted');
-                
-                // Test data loading
-                console.log('Testing data loading...');
-                clusterVM.updateClusterMembers();
-                
-            } catch (error) {
-                console.error('Error testing cluster view:', error);
-            }
-        }
-        
-        // Initialize framework
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log('DOM loaded, initializing framework...');
-            
-            if (window.app) {
-                console.log('Framework app found:', window.app);
-                window.app.init();
-                console.log('Framework initialized');
-            } else {
-                console.error('Framework app not found');
-            }
-        });
-    </script>
-</body>
-</html> 

public/demo-topology-data.js

@@ -1,174 +0,0 @@
-// Demo data for testing the Members view without actual cluster data
-window.demoMembersData = {
-    members: [
-        {
-            hostname: "spore-node-1",
-            ip: "192.168.1.100",
-            lastSeen: Date.now(),
-            latency: 3,
-            status: "ACTIVE",
-            resources: {
-                freeHeap: 48748,
-                chipId: 12345678,
-                sdkVersion: "3.1.2",
-                cpuFreqMHz: 80,
-                flashChipSize: 1048576
-            },
-            api: [
-                { uri: "/api/node/status", method: "GET" },
-                { uri: "/api/tasks/status", method: "GET" }
-            ],
-            labels: {
-                environment: "production",
-                region: "us-west",
-                role: "worker",
-                cluster: "spore-main"
-            }
-        },
-        {
-            hostname: "spore-node-2",
-            ip: "192.168.1.101",
-            lastSeen: Date.now() - 5000,
-            latency: 8,
-            status: "ACTIVE",
-            resources: {
-                freeHeap: 52340,
-                chipId: 87654321,
-                sdkVersion: "3.1.2",
-                cpuFreqMHz: 80,
-                flashChipSize: 1048576
-            },
-            api: [
-                { uri: "/api/node/status", method: "GET" },
-                { uri: "/api/tasks/status", method: "GET" }
-            ],
-            labels: {
-                environment: "production",
-                region: "us-west",
-                role: "controller",
-                cluster: "spore-main"
-            }
-        },
-        {
-            hostname: "spore-node-3",
-            ip: "192.168.1.102",
-            lastSeen: Date.now() - 15000,
-            latency: 12,
-            status: "INACTIVE",
-            resources: {
-                freeHeap: 38920,
-                chipId: 11223344,
-                sdkVersion: "3.1.1",
-                cpuFreqMHz: 80,
-                flashChipSize: 1048576
-            },
-            api: [
-                { uri: "/api/node/status", method: "GET" }
-            ],
-            labels: {
-                environment: "staging",
-                region: "us-west",
-                role: "worker",
-                cluster: "spore-main"
-            }
-        },
-        {
-            hostname: "spore-node-4",
-            ip: "192.168.1.103",
-            lastSeen: Date.now() - 30000,
-            latency: 25,
-            status: "ACTIVE",
-            resources: {
-                freeHeap: 45678,
-                chipId: 55667788,
-                sdkVersion: "3.1.2",
-                cpuFreqMHz: 80,
-                flashChipSize: 1048576
-            },
-            api: [
-                { uri: "/api/node/status", method: "GET" },
-                { uri: "/api/tasks/status", method: "GET" },
-                { uri: "/api/capabilities", method: "GET" }
-            ],
-            labels: {
-                environment: "production",
-                region: "us-east",
-                role: "gateway",
-                cluster: "spore-main"
-            }
-        },
-        {
-            hostname: "spore-node-5",
-            ip: "192.168.1.104",
-            lastSeen: Date.now() - 60000,
-            latency: 45,
-            status: "DEAD",
-            resources: {
-                freeHeap: 0,
-                chipId: 99887766,
-                sdkVersion: "3.1.0",
-                cpuFreqMHz: 0,
-                flashChipSize: 1048576
-            },
-            api: [],
-
-        }
-    ]
-};
-
-// Mock API client for demo purposes
-window.demoApiClient = {
-    async getClusterMembers() {
-        // Simulate network delay
-        await new Promise(resolve => setTimeout(resolve, 500));
-        return window.demoMembersData;
-    },
-    
-    async getClusterMembersFromNode(ip) {
-        // Simulate network delay
-        await new Promise(resolve => setTimeout(resolve, 200));
-        
-        // Return a subset of members to simulate different node perspectives
-        const allMembers = window.demoMembersData.members;
-        const nodeIndex = allMembers.findIndex(m => m.ip === ip);
-        
-        if (nodeIndex === -1) {
-            return { members: [] };
-        }
-        
-        // Simulate each node seeing a different subset of the cluster
-        const startIndex = (nodeIndex * 2) % allMembers.length;
-        const members = [
-            allMembers[startIndex],
-            allMembers[(startIndex + 1) % allMembers.length],
-            allMembers[(startIndex + 2) % allMembers.length]
-        ];
-        
-        return { members: members.filter(m => m.ip !== ip) };
-    },
-
-    async getNodeStatus(ip) {
-        // Simulate network delay
-        await new Promise(resolve => setTimeout(resolve, 300));
-        
-        // Find the member by IP
-        const member = window.demoMembersData.members.find(m => m.ip === ip);
-        if (!member) {
-            throw new Error('Node not found');
-        }
-        
-        // Return node status with labels
-        return {
-            ...member.resources,
-            api: member.api,
-            labels: {
-                environment: ip.includes('103') ? 'production' : 'production',
-                region: ip.includes('103') ? 'us-east' : 'us-west',
-                role: ip.includes('101') ? 'controller' : ip.includes('103') ? 'gateway' : 'worker',
-                cluster: 'spore-main',
-                nodeType: ip.includes('102') ? 'staging' : 'production',
-                location: ip.includes('103') ? 'datacenter-2' : 'datacenter-1'
-            }
-        };
-    }
-}; 

public/demo-topology-view.html

@@ -1,641 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Demo Members View - SPORE UI</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <script src="demo-members-data.js"></script>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div class="container">
-        <div class="main-navigation">
-            <div class="nav-left">
-                <button class="nav-tab" onclick="showCluster()">🌐 Cluster</button>
-                <button class="nav-tab active" onclick="showTopology()">🌐 Topology</button>
-                <button class="nav-tab" onclick="showFirmware()">📦 Firmware</button>
-            </div>
-            <div class="nav-right">
-                <div class="cluster-status">🚀 Demo Mode</div>
-            </div>
-        </div>
-
-        <div id="cluster-view" class="view-content">
-            <div class="cluster-section">
-                <h2>🌐 Cluster View (Demo)</h2>
-                <p>This is a demo of the cluster view. Switch to Members to see the network topology visualization.</p>
-            </div>
-        </div>
-
-        <div id="topology-view" class="view-content active">
-            <div class="topology-section">
-                <div class="topology-header">
-                    <h2>🌐 Network Topology (Demo)</h2>
-                    <button class="refresh-btn" onclick="refreshTopologyView()">
-                        <svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M1 4v6h6M23 20v-6h-6"/>
-                            <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
-                        </svg>
-                        Refresh
-                    </button>
-                </div>
-                
-                <div id="topology-graph-container">
-                    <div class="loading">
-                        <div>Loading network topology...</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div id="firmware-view" class="view-content">
-            <div class="firmware-section">
-                <h2>📦 Firmware View (Demo)</h2>
-                <p>This is a demo of the firmware view. Switch to Members to see the network topology visualization.</p>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // Demo Topology View Implementation
-        class DemoTopologyViewModel {
-            constructor() {
-                this.nodes = [];
-                this.links = [];
-                this.isLoading = false;
-                this.error = null;
-                this.selectedNode = null;
-            }
-
-            async updateNetworkTopology() {
-                try {
-                    this.isLoading = true;
-                    this.error = null;
-                    
-                    // Use demo API client
-                    const response = await window.demoApiClient.getClusterMembers();
-                    const members = response.members || [];
-                    
-                    // Build enhanced graph data
-                    const { nodes, links } = await this.buildEnhancedGraphData(members);
-                    
-                    this.nodes = nodes;
-                    this.links = links;
-                    
-                    // Trigger render
-                    if (window.topologyGraphComponent) {
-                        window.topologyGraphComponent.renderGraph();
-                    }
-                    
-                } catch (error) {
-                    console.error('Failed to fetch network topology:', error);
-                    this.error = error.message;
-                } finally {
-                    this.isLoading = false;
-                }
-            }
-
-            async buildEnhancedGraphData(members) {
-                const nodes = [];
-                const links = [];
-                const nodeConnections = new Map();
-                
-                // Create nodes from members
-                members.forEach((member, index) => {
-                    if (member && member.ip) {
-                        nodes.push({
-                            id: member.ip,
-                            hostname: member.hostname || member.ip,
-                            ip: member.ip,
-                            status: member.status || 'UNKNOWN',
-                            latency: member.latency || 0,
-                            resources: member.resources || {},
-                            x: Math.random() * 800 + 100,
-                            y: Math.random() * 600 + 100
-                        });
-                    }
-                });
-                
-                // Try to get cluster members from each node to build actual connections
-                for (const node of nodes) {
-                    try {
-                        const nodeResponse = await window.demoApiClient.getClusterMembersFromNode(node.ip);
-                        if (nodeResponse && nodeResponse.members) {
-                            nodeConnections.set(node.ip, nodeResponse.members);
-                        }
-                    } catch (error) {
-                        console.warn(`Failed to get cluster members from node ${node.ip}:`, error);
-                    }
-                }
-                
-                // Build links based on actual connections
-                for (const [sourceIp, sourceMembers] of nodeConnections) {
-                    for (const targetMember of sourceMembers) {
-                        if (targetMember.ip && targetMember.ip !== sourceIp) {
-                            const existingLink = links.find(link => 
-                                (link.source === sourceIp && link.target === targetMember.ip) ||
-                                (link.source === targetMember.ip && link.target === sourceIp)
-                            );
-                            
-                            if (!existingLink) {
-                                const sourceNode = nodes.find(n => n.id === sourceIp);
-                                const targetNode = nodes.find(n => n.id === targetMember.ip);
-                                
-                                if (sourceNode && targetNode) {
-                                    const latency = targetMember.latency || this.estimateLatency(sourceNode, targetNode);
-                                    
-                                    links.push({
-                                        source: sourceIp,
-                                        target: targetMember.ip,
-                                        latency: latency,
-                                        sourceNode: sourceNode,
-                                        targetNode: targetNode,
-                                        bidirectional: true
-                                    });
-                                }
-                            }
-                        }
-                    }
-                }
-                
-                // If no actual connections found, create a basic mesh
-                if (links.length === 0) {
-                    console.log('No actual connections found, creating basic mesh');
-                    for (let i = 0; i < nodes.length; i++) {
-                        for (let j = i + 1; j < nodes.length; j++) {
-                            const sourceNode = nodes[i];
-                            const targetNode = nodes[j];
-                            
-                            const estimatedLatency = this.estimateLatency(sourceNode, targetNode);
-                            
-                            links.push({
-                                source: sourceNode.id,
-                                target: targetNode.id,
-                                latency: estimatedLatency,
-                                sourceNode: sourceNode,
-                                targetNode: targetNode,
-                                bidirectional: true
-                            });
-                        }
-                    }
-                }
-                
-                return { nodes, links };
-            }
-
-            estimateLatency(sourceNode, targetNode) {
-                const baseLatency = 5;
-                const randomVariation = Math.random() * 10;
-                return Math.round(baseLatency + randomVariation);
-            }
-
-            selectNode(nodeId) {
-                this.selectedNode = nodeId;
-            }
-
-            clearSelection() {
-                this.selectedNode = null;
-            }
-        }
-
-        // Demo Members Graph Component
-        class DemoTopologyGraphComponent {
-            constructor(container, viewModel) {
-                this.container = container;
-                this.viewModel = viewModel;
-                this.svg = null;
-                this.simulation = null;
-                this.zoom = null;
-                this.width = 800;
-                this.height = 600;
-            }
-
-            async initialize() {
-                console.log('DemoTopologyGraphComponent: Initializing...');
-                
-                // Set up the SVG container
-                this.setupSVG();
-                
-                // Initial data load
-                await this.viewModel.updateNetworkTopology();
-            }
-
-            setupSVG() {
-                const container = this.findElement('#members-graph-container');
-                if (!container) {
-                    console.error('Graph container not found');
-                    return;
-                }
-
-                // Clear existing content
-                container.innerHTML = '';
-
-                // Create SVG element
-                this.svg = d3.select(container)
-                    .append('svg')
-                    .attr('width', this.width)
-                    .attr('height', this.height)
-                    .attr('viewBox', `0 0 ${this.width} ${this.height}`)
-                    .style('border', '1px solid #ddd')
-                    .style('background', '#f9f9f9');
-
-                // Add zoom behavior
-                this.zoom = d3.zoom()
-                    .scaleExtent([0.1, 4])
-                    .on('zoom', (event) => {
-                        this.svg.select('g').attr('transform', event.transform);
-                    });
-
-                this.svg.call(this.zoom);
-
-                // Create main group for zoom
-                this.svg.append('g');
-            }
-
-            renderGraph() {
-                const nodes = this.viewModel.nodes;
-                const links = this.viewModel.links;
-
-                if (!nodes || nodes.length === 0) {
-                    this.showNoData();
-                    return;
-                }
-
-                console.log('Rendering graph with', nodes.length, 'nodes and', links.length, 'links');
-
-                const svgGroup = this.svg.select('g');
-
-                // Clear existing elements
-                svgGroup.selectAll('*').remove();
-
-                // Create arrow marker for links
-                svgGroup.append('defs').selectAll('marker')
-                    .data(['end'])
-                    .enter().append('marker')
-                    .attr('id', 'arrowhead')
-                    .attr('viewBox', '0 -5 10 10')
-                    .attr('refX', 20)
-                    .attr('refY', 0)
-                    .attr('markerWidth', 6)
-                    .attr('markerHeight', 6)
-                    .attr('orient', 'auto')
-                    .append('path')
-                    .attr('d', 'M0,-5L10,0L0,5')
-                    .attr('fill', '#999');
-
-                // Create links with better styling
-                const link = svgGroup.append('g')
-                    .selectAll('line')
-                    .data(links)
-                    .enter().append('line')
-                    .attr('stroke', d => this.getLinkColor(d.latency))
-                    .attr('stroke-opacity', 0.7)
-                    .attr('stroke-width', d => Math.max(2, Math.min(8, d.latency / 3)))
-                    .attr('marker-end', 'url(#arrowhead)');
-
-                // Create nodes
-                const node = svgGroup.append('g')
-                    .selectAll('g')
-                    .data(nodes)
-                    .enter().append('g')
-                    .attr('class', 'node')
-                    .call(this.drag(this.simulation));
-
-                // Add circles to nodes with size based on status
-                node.append('circle')
-                    .attr('r', d => this.getNodeRadius(d.status))
-                    .attr('fill', d => this.getNodeColor(d.status))
-                    .attr('stroke', '#fff')
-                    .attr('stroke-width', 2);
-
-                // Add status indicator
-                node.append('circle')
-                    .attr('r', 3)
-                    .attr('fill', d => this.getStatusIndicatorColor(d.status))
-                    .attr('cx', -8)
-                    .attr('cy', -8);
-
-                // Add labels to nodes
-                node.append('text')
-                    .text(d => d.hostname.length > 15 ? d.hostname.substring(0, 15) + '...' : d.hostname)
-                    .attr('x', 15)
-                    .attr('y', 4)
-                    .attr('font-size', '12px')
-                    .attr('fill', '#333')
-                    .attr('font-weight', '500');
-
-                // Add IP address labels
-                node.append('text')
-                    .text(d => d.ip)
-                    .attr('x', 15)
-                    .attr('y', 20)
-                    .attr('font-size', '10px')
-                    .attr('fill', '#666');
-
-                // Add status labels
-                node.append('text')
-                    .text(d => d.status)
-                    .attr('x', 15)
-                    .attr('y', 35)
-                    .attr('font-size', '10px')
-                    .attr('fill', d => this.getNodeColor(d.status))
-                    .attr('font-weight', '600');
-
-                // Add latency labels on links with better positioning
-                const linkLabels = svgGroup.append('g')
-                    .selectAll('text')
-                    .data(links)
-                    .enter().append('text')
-                    .attr('font-size', '11px')
-                    .attr('fill', '#333')
-                    .attr('font-weight', '500')
-                    .attr('text-anchor', 'middle')
-                    .text(d => `${d.latency}ms`);
-
-                // Add background for link labels
-                const linkLabelBackgrounds = svgGroup.append('g')
-                    .selectAll('rect')
-                    .data(links)
-                    .enter().append('rect')
-                    .attr('width', d => `${d.latency}ms`.length * 6 + 4)
-                    .attr('height', 16)
-                    .attr('fill', '#fff')
-                    .attr('opacity', 0.8)
-                    .attr('rx', 3);
-
-                // Set up force simulation with better parameters
-                this.simulation = d3.forceSimulation(nodes)
-                    .force('link', d3.forceLink(links).id(d => d.id).distance(120))
-                    .force('charge', d3.forceManyBody().strength(-400))
-                    .force('center', d3.forceCenter(this.width / 2, this.height / 2))
-                    .force('collision', d3.forceCollide().radius(40));
-
-                // Update positions on simulation tick
-                this.simulation.on('tick', () => {
-                    link
-                        .attr('x1', d => d.source.x)
-                        .attr('y1', d => d.source.y)
-                        .attr('x2', d => d.target.x)
-                        .attr('y2', d => d.target.y);
-
-                    // Update link labels
-                    linkLabels
-                        .attr('x', d => (d.source.x + d.target.x) / 2)
-                        .attr('y', d => (d.source.y + d.target.y) / 2 - 5);
-
-                    // Update link label backgrounds
-                    linkLabelBackgrounds
-                        .attr('x', d => (d.source.x + d.target.x) / 2 - (d.latency.toString().length * 6 + 4) / 2)
-                        .attr('y', d => (d.source.y + d.target.y) / 2 - 12);
-
-                    node
-                        .attr('transform', d => `translate(${d.x},${d.y})`);
-                });
-
-                // Add click handlers for node selection
-                node.on('click', (event, d) => {
-                    this.viewModel.selectNode(d.id);
-                    this.updateSelection(d.id);
-                });
-
-                // Add hover effects
-                node.on('mouseover', (event, d) => {
-                    d3.select(event.currentTarget).select('circle')
-                        .attr('r', d => this.getNodeRadius(d.status) + 4)
-                        .attr('stroke-width', 3);
-                });
-
-                node.on('mouseout', (event, d) => {
-                    d3.select(event.currentTarget).select('circle')
-                        .attr('r', d => this.getNodeRadius(d.status))
-                        .attr('stroke-width', 2);
-                });
-
-                // Add tooltip for links
-                link.on('mouseover', (event, d) => {
-                    d3.select(event.currentTarget)
-                        .attr('stroke-width', d => Math.max(3, Math.min(10, d.latency / 2)))
-                        .attr('stroke-opacity', 1);
-                });
-
-                link.on('mouseout', (event, d) => {
-                    d3.select(event.currentTarget)
-                        .attr('stroke-width', d => Math.max(2, Math.min(8, d.latency / 3)))
-                        .attr('stroke-opacity', 0.7);
-                });
-
-                // Add legend
-                this.addLegend(svgGroup);
-            }
-
-            getNodeRadius(status) {
-                switch (status?.toUpperCase()) {
-                    case 'ACTIVE':
-                        return 10;
-                    case 'INACTIVE':
-                        return 8;
-                    case 'DEAD':
-                        return 6;
-                    default:
-                        return 8;
-                }
-            }
-
-            getStatusIndicatorColor(status) {
-                switch (status?.toUpperCase()) {
-                    case 'ACTIVE':
-                        return '#4CAF50';
-                    case 'INACTIVE':
-                        return '#FF9800';
-                    case 'DEAD':
-                        return '#F44336';
-                    default:
-                        return '#9E9E9E';
-                }
-            }
-
-            getNodeColor(status) {
-                switch (status?.toUpperCase()) {
-                    case 'ACTIVE':
-                        return '#4CAF50';
-                    case 'INACTIVE':
-                        return '#FF9800';
-                    case 'DEAD':
-                        return '#F44336';
-                    default:
-                        return '#9E9E9E';
-                }
-            }
-
-            getLinkColor(latency) {
-                if (latency <= 5) return '#4CAF50';      // Green for low latency
-                if (latency <= 15) return '#FF9800';     // Orange for medium latency
-                if (latency <= 30) return '#FF5722';     // Red-orange for high latency
-                return '#F44336';                        // Red for very high latency
-            }
-
-            drag(simulation) {
-                function dragstarted(event, d) {
-                    if (!event.active) simulation.alphaTarget(0.3).restart();
-                    d.fx = d.x;
-                    d.fy = d.y;
-                }
-
-                function dragged(event, d) {
-                    d.fx = event.x;
-                    d.fy = event.y;
-                }
-
-                function dragended(event, d) {
-                    if (!event.active) simulation.alphaTarget(0);
-                    d.fx = null;
-                    d.fy = null;
-                }
-
-                return d3.drag()
-                    .on('start', dragstarted)
-                    .on('drag', dragged)
-                    .on('end', dragended);
-            }
-
-            updateSelection(selectedNodeId) {
-                // Update visual selection
-                this.svg.selectAll('.node').select('circle')
-                    .attr('stroke-width', d => d.id === selectedNodeId ? 4 : 2)
-                    .attr('stroke', d => d.id === selectedNodeId ? '#2196F3' : '#fff');
-            }
-
-            addLegend(svgGroup) {
-                const legend = svgGroup.append('g')
-                    .attr('class', 'legend')
-                    .attr('transform', `translate(20, 20)`);
-
-                // Node status legend
-                const nodeLegend = legend.append('g');
-                nodeLegend.append('text')
-                    .text('Node Status:')
-                    .attr('x', 0)
-                    .attr('y', 0)
-                    .attr('font-size', '12px')
-                    .attr('font-weight', '600')
-                    .attr('fill', '#333');
-
-                const statuses = [
-                    { status: 'ACTIVE', color: '#4CAF50', y: 20 },
-                    { status: 'INACTIVE', color: '#FF9800', y: 40 },
-                    { status: 'DEAD', color: '#F44336', y: 60 }
-                ];
-
-                statuses.forEach(item => {
-                    nodeLegend.append('circle')
-                        .attr('r', 6)
-                        .attr('cx', 0)
-                        .attr('cy', item.y)
-                        .attr('fill', item.color);
-
-                    nodeLegend.append('text')
-                        .text(item.status)
-                        .attr('x', 15)
-                        .attr('y', item.y + 4)
-                        .attr('font-size', '10px')
-                        .attr('fill', '#333');
-                });
-
-                // Link latency legend
-                const linkLegend = legend.append('g')
-                    .attr('transform', 'translate(120, 0)');
-
-                linkLegend.append('text')
-                    .text('Link Latency:')
-                    .attr('x', 0)
-                    .attr('y', 0)
-                    .attr('font-size', '12px')
-                    .attr('font-weight', '600')
-                    .attr('fill', '#333');
-
-                const latencies = [
-                    { range: '≤5ms', color: '#4CAF50', y: 20 },
-                    { range: '6-15ms', color: '#FF9800', y: 40 },
-                    { range: '16-30ms', color: '#FF5722', y: 60 },
-                    { range: '>30ms', color: '#F44336', y: 80 }
-                ];
-
-                latencies.forEach(item => {
-                    linkLegend.append('line')
-                        .attr('x1', 0)
-                        .attr('y1', item.y)
-                        .attr('x2', 20)
-                        .attr('y2', item.y)
-                        .attr('stroke', item.color)
-                        .attr('stroke-width', 3);
-
-                    linkLegend.append('text')
-                        .text(item.range)
-                        .attr('x', 25)
-                        .attr('y', item.y + 4)
-                        .attr('font-size', '10px')
-                        .attr('fill', '#333');
-                });
-            }
-
-            findElement(selector) {
-                return document.querySelector(selector);
-            }
-
-            showNoData() {
-                const container = this.findElement('#members-graph-container');
-                container.innerHTML = '<div class="no-data"><div>No cluster members found</div></div>';
-            }
-        }
-
-        // Navigation functions
-        function showCluster() {
-            document.querySelectorAll('.view-content').forEach(v => v.classList.remove('active'));
-            document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-            document.getElementById('cluster-view').classList.add('active');
-            document.querySelector('[onclick="showCluster()"]').classList.add('active');
-        }
-
-        function showTopology() {
-            document.querySelectorAll('.view-content').forEach(v => v.classList.remove('active'));
-            document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-            document.getElementById('topology-view').classList.add('active');
-            document.querySelector('[onclick="showTopology()"]').classList.add('active');
-        }
-
-        function showFirmware() {
-            document.querySelectorAll('.view-content').forEach(v => v.classList.remove('active'));
-            document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-            document.getElementById('firmware-view').classList.add('active');
-            document.querySelector('[onclick="showFirmware()"]').classList.add('active');
-        }
-
-        function refreshTopologyView() {
-            if (window.topologyGraphComponent) {
-                window.topologyGraphComponent.viewModel.updateNetworkTopology();
-            }
-        }
-
-        // Initialize the demo
-        window.addEventListener('DOMContentLoaded', async function() {
-            console.log('Demo Members View: Initializing...');
-            
-            // Create view model and component
-            const topologyViewModel = new DemoTopologyViewModel();
-            const topologyGraphComponent = new DemoTopologyGraphComponent(
-                document.getElementById('topology-graph-container'),
-                topologyViewModel
-            );
-            
-            // Store globally for refresh function
-            window.topologyGraphComponent = topologyGraphComponent;
-            
-            // Initialize
-            await topologyGraphComponent.initialize();
-            
-            console.log('Demo Topology View: Initialization completed');
-        });
-    </script>
-</body>
-</html> 

public/deploy-button-test.html

@@ -1,346 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Deploy Button Test - Isolated</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            background: #1a202c;
-            color: white;
-        }
-        .test-section {
-            background: rgba(255, 255, 255, 0.05);
-            padding: 20px;
-            margin: 20px 0;
-            border-radius: 8px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .firmware-actions {
-            background: rgba(0, 0, 0, 0.3);
-            padding: 20px;
-            border-radius: 8px;
-        }
-        .target-options {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-        .target-option {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-        }
-        .file-input-wrapper {
-            margin: 20px 0;
-        }
-        .deploy-btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: none;
-            color: white;
-            padding: 10px 20px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 16px;
-            font-weight: 600;
-        }
-        .deploy-btn:disabled {
-            background: rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.4);
-            cursor: not-allowed;
-        }
-        .node-select {
-            background: #2d3748;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            color: white;
-            padding: 5px 10px;
-            border-radius: 4px;
-            margin-left: 10px;
-        }
-        .cluster-members {
-            background: rgba(0, 0, 0, 0.2);
-            padding: 15px;
-            border-radius: 6px;
-            margin: 20px 0;
-        }
-        .member-card {
-            background: rgba(255, 255, 255, 0.05);
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 4px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .debug-info {
-            background: rgba(0, 0, 0, 0.5);
-            padding: 15px;
-            border-radius: 6px;
-            margin: 20px 0;
-            font-family: monospace;
-            font-size: 12px;
-        }
-    </style>
-</head>
-<body>
-    <h1>🚀 Deploy Button Test - Isolated</h1>
-    
-    <div class="test-section">
-        <h2>Test Scenario: Deploy Button State</h2>
-        <p>This test isolates the deploy button functionality to debug the issue.</p>
-    </div>
-
-    <div class="firmware-actions">
-        <h3>🚀 Firmware Update</h3>
-        
-        <div class="target-options">
-            <label class="target-option">
-                <input type="radio" name="target-type" value="all" checked>
-                <span>All Nodes</span>
-            </label>
-            <label class="target-option">
-                <input type="radio" name="target-type" value="specific">
-                <span>Specific Node</span>
-                <select id="specific-node-select" class="node-select" style="visibility: hidden; opacity: 0;">
-                    <option value="">Select a node...</option>
-                </select>
-            </label>
-        </div>
-        
-        <div class="file-input-wrapper">
-            <input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
-            <button onclick="document.getElementById('global-firmware-file').click()">
-                📁 Choose File
-            </button>
-            <span id="file-info">No file selected</span>
-        </div>
-        
-        <button class="deploy-btn" id="deploy-btn" disabled>
-            🚀 Deploy Firmware
-        </button>
-    </div>
-
-    <div class="cluster-members">
-        <h3>Cluster Members</h3>
-        <div id="cluster-members-container">
-            <div class="loading">Loading cluster members...</div>
-        </div>
-        <button onclick="addTestNode()">Add Test Node</button>
-        <button onclick="removeAllNodes()">Remove All Nodes</button>
-    </div>
-
-    <div class="debug-info">
-        <h3>Debug Information</h3>
-        <div id="debug-output">Waiting for actions...</div>
-    </div>
-
-    <script>
-        // Simulate the cluster members functionality
-        let testNodes = [];
-        
-        function addTestNode() {
-            const nodeCount = testNodes.length + 1;
-            const newNode = {
-                ip: `192.168.1.${100 + nodeCount}`,
-                hostname: `TestNode${nodeCount}`,
-                status: 'active',
-                latency: Math.floor(Math.random() * 50) + 10,
-                labels: nodeCount % 2 === 0 ? { app: 'demo', role: 'worker' } : { device: 'sensor', zone: `Z${nodeCount}` }
-            };
-            testNodes.push(newNode);
-            displayClusterMembers();
-            populateNodeSelect();
-            updateDeployButton();
-            updateDebugInfo();
-        }
-        
-        function removeAllNodes() {
-            testNodes = [];
-            displayClusterMembers();
-            populateNodeSelect();
-            updateDeployButton();
-            updateDebugInfo();
-        }
-        
-        function displayClusterMembers() {
-            const container = document.getElementById('cluster-members-container');
-            
-            if (testNodes.length === 0) {
-                container.innerHTML = '<div class="loading">No cluster members found</div>';
-                return;
-            }
-            
-            const membersHTML = testNodes.map(node => {
-                const statusClass = node.status === 'active' ? 'status-online' : 'status-offline';
-                const statusText = node.status === 'active' ? 'Online' : 'Offline';
-                const statusIcon = node.status === 'active' ? '🟢' : '🔴';
-                
-                return `
-                    <div class="member-card" data-member-ip="${node.ip}">
-                        <div class="member-name">${node.hostname}</div>
-                        <div class="member-ip">${node.ip}</div>
-                        <div class="member-status ${statusClass}">
-                            ${statusIcon} ${statusText}
-                        </div>
-                        <div class="member-latency">Latency: ${node.latency}ms</div>
-                        ${node.labels ? `<div class=\"member-labels\">${Object.entries(node.labels).map(([k,v]) => `<span class=\\\"label-chip\\\">${k}: ${v}</span>`).join('')}</div>` : ''}
-                    </div>
-                `;
-            }).join('');
-            
-            container.innerHTML = membersHTML;
-        }
-        
-        function populateNodeSelect() {
-            const select = document.getElementById('specific-node-select');
-            if (!select) return;
-            
-            select.innerHTML = '<option value="">Select a node...</option>';
-            
-            if (testNodes.length === 0) {
-                const option = document.createElement('option');
-                option.value = "";
-                option.textContent = "No nodes available";
-                option.disabled = true;
-                select.appendChild(option);
-                return;
-            }
-            
-            testNodes.forEach(node => {
-                const option = document.createElement('option');
-                option.value = node.ip;
-                option.textContent = `${node.hostname} (${node.ip})`;
-                select.appendChild(option);
-            });
-        }
-        
-        function updateDeployButton() {
-            const deployBtn = document.getElementById('deploy-btn');
-            const fileInput = document.getElementById('global-firmware-file');
-            const targetType = document.querySelector('input[name="target-type"]:checked');
-            const specificNodeSelect = document.getElementById('specific-node-select');
-            
-            if (!deployBtn || !fileInput) return;
-            
-            const hasFile = fileInput.files && fileInput.files.length > 0;
-            const hasAvailableNodes = testNodes.length > 0;
-            
-            let isValidTarget = false;
-            if (targetType.value === 'all') {
-                isValidTarget = hasAvailableNodes;
-            } else if (targetType.value === 'specific') {
-                isValidTarget = hasAvailableNodes && specificNodeSelect.value && specificNodeSelect.value !== "";
-            }
-            
-            // Debug logging
-            const debugInfo = {
-                hasFile,
-                targetType: targetType?.value,
-                hasAvailableNodes,
-                specificNodeValue: specificNodeSelect?.value,
-                isValidTarget,
-                memberCardsCount: testNodes.length
-            };
-            
-            console.log('updateDeployButton debug:', debugInfo);
-            
-            deployBtn.disabled = !hasFile || !isValidTarget;
-            
-            // Update button text to provide better feedback
-            if (!hasAvailableNodes) {
-                deployBtn.textContent = '🚀 Deploy (No nodes available)';
-                deployBtn.title = 'No cluster nodes are currently available for deployment';
-            } else if (!hasFile) {
-                deployBtn.textContent = '🚀 Deploy Firmware';
-                deployBtn.title = 'Please select a firmware file to deploy';
-            } else if (!isValidTarget) {
-                deployBtn.textContent = '🚀 Deploy Firmware';
-                deployBtn.title = 'Please select a valid target for deployment';
-            } else {
-                deployBtn.textContent = '🚀 Deploy Firmware';
-                deployBtn.title = 'Ready to deploy firmware';
-            }
-            
-            updateDebugInfo();
-        }
-        
-        function updateDebugInfo() {
-            const debugOutput = document.getElementById('debug-output');
-            const deployBtn = document.getElementById('deploy-btn');
-            const fileInput = document.getElementById('global-firmware-file');
-            const targetType = document.querySelector('input[name="target-type"]:checked');
-            const specificNodeSelect = document.getElementById('specific-node-select');
-            
-            const debugInfo = {
-                hasFile: fileInput.files && fileInput.files.length > 0,
-                targetType: targetType?.value,
-                hasAvailableNodes: testNodes.length > 0,
-                specificNodeValue: specificNodeSelect?.value,
-                deployButtonDisabled: deployBtn.disabled,
-                deployButtonText: deployBtn.textContent,
-                testNodesCount: testNodes.length
-            };
-            
-            debugOutput.innerHTML = `<pre>${JSON.stringify(debugInfo, null, 2)}</pre>`;
-        }
-        
-        // Setup event listeners
-        document.addEventListener('DOMContentLoaded', function() {
-            // Setup target selection
-            const targetRadios = document.querySelectorAll('input[name="target-type"]');
-            const specificNodeSelect = document.getElementById('specific-node-select');
-            
-            targetRadios.forEach(radio => {
-                radio.addEventListener('change', () => {
-                    console.log('Target radio changed to:', radio.value);
-                    
-                    if (radio.value === 'specific') {
-                        specificNodeSelect.style.visibility = 'visible';
-                        specificNodeSelect.style.opacity = '1';
-                        populateNodeSelect();
-                    } else {
-                        specificNodeSelect.style.visibility = 'hidden';
-                        specificNodeSelect.style.opacity = '0';
-                    }
-                    
-                    console.log('Calling updateDeployButton after target change');
-                    updateDeployButton();
-                });
-            });
-            
-            // Setup specific node select change handler
-            if (specificNodeSelect) {
-                specificNodeSelect.addEventListener('change', (event) => {
-                    console.log('Specific node select changed to:', event.target.value);
-                    updateDeployButton();
-                });
-            }
-            
-            // Setup file input change handler
-            const fileInput = document.getElementById('global-firmware-file');
-            if (fileInput) {
-                fileInput.addEventListener('change', (event) => {
-                    const file = event.target.files[0];
-                    const fileInfo = document.getElementById('file-info');
-                    
-                    if (file) {
-                        fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)}KB)`;
-                    } else {
-                        fileInfo.textContent = 'No file selected';
-                    }
-                    
-                    updateDeployButton();
-                });
-            }
-            
-            // Initial setup
-            displayClusterMembers();
-            populateNodeSelect();
-            updateDeployButton();
-        });
-    </script>
-</body>
-</html> 

public/index.html

@@ -53,6 +53,17 @@
                     <div class="loading">
                         <div>Loading cluster members...</div>
                     </div>
+                    
+                    <!-- Test content to verify scrolling -->
+                    <div style="height: 2000px; background: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1)); padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);">
+                        <h3 style="color: white; margin-bottom: 20px;">Test Scrolling Content</h3>
+                        <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">This is test content to verify that scrolling works properly when elements are outside the visible screen height.</p>
+                        <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">You should be able to scroll down to see this content and scroll back up to the top.</p>
+                        <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">If scrolling is not working, there may be CSS issues preventing it.</p>
+                        <div style="text-align: center; margin-top: 50px;">
+                            <span style="color: #4ade80; font-size: 1.2rem;">✓ Scrolling is working if you can see this!</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -129,6 +140,17 @@
                     
                     <div class="firmware-nodes-list" id="firmware-nodes-list">
                         <!-- Nodes will be populated here -->
+                        
+                        <!-- Test content to verify scrolling -->
+                        <div style="height: 1500px; background: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1)); padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);">
+                            <h3 style="color: white; margin-bottom: 20px;">Firmware View Test Scrolling</h3>
+                            <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">This is test content in the firmware view to verify that scrolling works properly.</p>
+                            <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">You should be able to scroll down to see this content and scroll back up to the top.</p>
+                            <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">If scrolling is not working, there may be CSS issues preventing it.</p>
+                            <div style="text-align: center; margin-top: 50px;">
+                                <span style="color: #4ade80; font-size: 1.2rem;">✓ Firmware scrolling is working if you can see this!</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

public/simple-test.html

@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Framework Test</title>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
-        .success { color: green; }
-        .error { color: red; }
-        button { margin: 5px; padding: 10px; }
-    </style>
-</head>
-<body>
-    <h1>Simple Framework Test</h1>
-    
-    <div class="test-section">
-        <h2>API Test</h2>
-        <button onclick="testAPI()">Test API Connection</button>
-        <div id="api-result"></div>
-    </div>
-    
-    <div class="test-section">
-        <h2>Framework Test</h2>
-        <button onclick="testFramework()">Test Framework</button>
-        <div id="framework-result"></div>
-    </div>
-
-    <script src="framework.js"></script>
-    <script src="api-client.js"></script>
-    <script src="view-models.js"></script>
-    
-    <script>
-        async function testAPI() {
-            const resultDiv = document.getElementById('api-result');
-            resultDiv.innerHTML = 'Testing...';
-            
-            try {
-                // Test cluster members API
-                const members = await window.apiClient.getClusterMembers();
-                console.log('Members:', members);
-                
-                // Test discovery API
-                const discovery = await window.apiClient.getDiscoveryInfo();
-                console.log('Discovery:', discovery);
-                
-                resultDiv.innerHTML = `
-                    <div class="success">
-                        ✅ API Test Successful!<br>
-                        Cluster Members: ${members.members?.length || 0}<br>
-                        Primary Node: ${discovery.primaryNode || 'None'}<br>
-                        Total Nodes: ${discovery.totalNodes || 0}
-                    </div>
-                `;
-            } catch (error) {
-                console.error('API test failed:', error);
-                resultDiv.innerHTML = `<div class="error">❌ API Test Failed: ${error.message}</div>`;
-            }
-        }
-        
-        function testFramework() {
-            const resultDiv = document.getElementById('framework-result');
-            resultDiv.innerHTML = 'Testing...';
-            
-            try {
-                // Test framework classes
-                if (typeof EventBus !== 'undefined' && 
-                    typeof ViewModel !== 'undefined' && 
-                    typeof Component !== 'undefined') {
-                    
-                    // Create a simple view model
-                    const vm = new ViewModel();
-                    vm.set('test', 'Hello World');
-                    
-                    if (vm.get('test') === 'Hello World') {
-                        resultDiv.innerHTML = `
-                            <div class="success">
-                                ✅ Framework Test Successful!<br>
-                                EventBus: ${typeof EventBus}<br>
-                                ViewModel: ${typeof ViewModel}<br>
-                                Component: ${typeof Component}<br>
-                                ViewModel test: ${vm.get('test')}
-                            </div>
-                        `;
-                    } else {
-                        throw new Error('ViewModel get/set not working');
-                    }
-                } else {
-                    throw new Error('Framework classes not found');
-                }
-            } catch (error) {
-                console.error('Framework test failed:', error);
-                resultDiv.innerHTML = `<div class="error">❌ Framework Test Failed: ${error.message}</div>`;
-            }
-        }
-        
-        // Initialize when page loads
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log('Page loaded, framework ready');
-        });
-    </script>
-</body>
-</html> 

public/styles.css

@@ -7,14 +7,24 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #1a252f 100%);
-    min-height: 100vh;
+    height: 100vh;  /* Fixed height instead of min-height */
     padding: 1rem;
     color: #ecf0f1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;  /* Keep this to prevent body scrolling */
 }
 
 .container {
-    max-width: 1200px;
+    max-width: none;  /* Remove width constraint for full screen coverage */
+    width: 100%;
     margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 0 2rem;  /* Increase horizontal padding for better spacing */
+    max-height: calc(100vh - 2rem);  /* Constrain to viewport height minus body padding */
+    overflow: hidden;  /* Keep this to maintain layout constraints */
 }
 
 /* Header styles removed - integrated into navigation */
@@ -208,6 +218,21 @@ p {
     gap: 0.75rem;
 }
 
+/* Responsive grid adjustments */
+@media (max-width: 768px) {
+    .members-grid {
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 0.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .members-grid {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+}
+
 .member-card {
 	background: rgba(0, 0, 0, 0.2);
 	border: 1px solid rgba(255, 255, 255, 0.1);
@@ -226,14 +251,13 @@ p {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 0.35rem;
-	margin-top: 0.5rem;
 }
 
 	.label-chip {
 		display: inline-flex;
 		align-items: center;
 		font-size: 0.75rem;
-		padding: 0.25rem 0.6rem;
+		padding: 0.3rem 0.7rem;
 		border-radius: 9999px;
 		background: rgba(30, 58, 138, 0.35);
 		border: 1px solid rgba(59, 130, 246, 0.4);
@@ -265,10 +289,10 @@ p {
 }
 
 .member-card.expanded {
-	background: rgba(0, 0, 0, 0.6);
 	border-color: rgba(255, 255, 255, 0.2);
 	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
 	z-index: 5;
+    overflow: visible;  /* Allow content to expand */
 }
 
 .member-card.expanded:hover {
@@ -297,7 +321,6 @@ p {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-bottom: 0.75rem;
 }
 
 .member-info {
@@ -390,28 +413,49 @@ p {
     font-size: 0.9rem;
 }
 
-.member-name {
-    font-size: 1.2rem;
-    font-weight: 600;
+/* Compact member card layout */
+.member-row-1 {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
     margin-bottom: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.status-hostname-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+}
+
+.member-row-2 {
+    margin-top: 0.5rem;
+}
+
+.member-hostname {
+    font-size: 1.1rem;
+    font-weight: 600;
     color: #fff;
+    flex-shrink: 0;
 }
 
 .member-ip {
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     opacity: 0.8;
-    margin-bottom: 0.5rem;
-    font-family: 'Courier New', monospace;
+    flex-shrink: 0;
 }
 
 .member-status {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    border-radius: 20px;
-    font-size: 0.8rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.2rem;
+    border-radius: 50%;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+    min-width: 1.2rem;
+    min-height: 1.2rem;
 }
 
 .status-online {
@@ -426,12 +470,21 @@ p {
     border: 1px solid rgba(244, 67, 54, 0.5);
 }
 
+.status-inactive {
+    background: rgba(255, 152, 0, 0.3);
+    color: #ff9800;
+    border: 1px solid rgba(255, 152, 0, 0.5);
+}
+
 .member-latency {
     font-size: 0.85rem;
-    margin-top: 0.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    padding: 0;
 }
 
 .latency-label {
@@ -505,6 +558,198 @@ p {
     margin-bottom: 0.75rem;
 }
 
+/* Modern Tasks Summary Styles */
+.tasks-summary {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 12px;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.tasks-summary::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+}
+
+.tasks-summary:hover {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+    transform: translateY(-1px);
+}
+
+.tasks-summary-left {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.tasks-summary-right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.summary-stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.75rem 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.2s ease;
+    min-width: 80px;
+}
+
+.summary-stat:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.summary-stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #ecf0f1;
+    line-height: 1;
+}
+
+.summary-stat-label {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.summary-stat.total .summary-stat-value {
+    color: #4ade80;
+}
+
+.summary-stat.active .summary-stat-value {
+    color: #4ade80;
+}
+
+.summary-stat.stopped .summary-stat-value {
+    color: #f87171;
+}
+
+.summary-stat.disabled .summary-stat-value {
+    color: #fbbf24;
+}
+
+.summary-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    margin-right: 1rem;
+    font-size: 1.5rem;
+}
+
+.summary-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #ecf0f1;
+    margin-bottom: 0.25rem;
+}
+
+.summary-subtitle {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: 400;
+}
+
+/* Responsive design for tasks summary */
+@media (max-width: 768px) {
+    .tasks-summary {
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+        text-align: center;
+    }
+    
+    .tasks-summary-left {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: center;
+    }
+    
+    .tasks-summary-right {
+        flex-direction: column;
+        gap: 0.75rem;
+        align-items: center;
+    }
+    
+    .summary-stat {
+        min-width: 70px;
+        padding: 0.5rem 0.75rem;
+    }
+    
+    .summary-stat-value {
+        font-size: 1.25rem;
+    }
+    
+    .summary-stat-label {
+        font-size: 0.7rem;
+    }
+    
+    .summary-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 1.25rem;
+        margin-right: 0;
+        margin-bottom: 0.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .tasks-summary {
+        padding: 0.75rem;
+        gap: 0.75rem;
+    }
+    
+    .summary-stat {
+        min-width: 60px;
+        padding: 0.4rem 0.6rem;
+    }
+    
+    .summary-stat-value {
+        font-size: 1.1rem;
+    }
+    
+    .summary-stat-label {
+        font-size: 0.65rem;
+    }
+    
+    .summary-icon {
+        width: 36px;
+        height: 36px;
+        font-size: 1.1rem;
+    }
+}
+
 .task-header {
     display: flex;
     justify-content: space-between;
@@ -801,13 +1046,24 @@ p {
     display: none;
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
+    overflow-y: auto;  /* Allow vertical scrolling on content */
+    max-height: 100%;  /* Allow content to use available height */
+    flex: 1;  /* Take up available space */
+    flex-direction: column;  /* Stack content vertically */
 }
 
 .view-content.active {
-    display: block;
+    display: flex;
     opacity: 1;
 }
 
+/* Special handling for cluster and firmware views to ensure proper width */
+#cluster-view.active, #firmware-view.active {
+    display: flex;  /* Use flex display for proper layout */
+    flex-direction: column;  /* Stack content vertically */
+    overflow-y: auto;  /* Allow vertical scrolling */
+}
+
 /* Firmware Section Styles */
 .firmware-section {
     background: rgba(0, 0, 0, 0.3);
@@ -818,7 +1074,7 @@ p {
     padding: 0.75rem;
     margin-bottom: 1rem;
     position: relative;
-    overflow: hidden;
+    overflow: visible;  /* Allow content to expand and scroll */
 }
 
 .firmware-section::before {
@@ -2308,22 +2564,37 @@ p {
 
 /* Topology View Styles */
 #topology-view {
-    height: 100%;
+    flex: 1;  /* Take up remaining space */
     padding: 0;
-    min-height: 100vh;  /* Ensure full viewport height */
+    margin: 0;
+    position: relative;
+    width: 100%;  /* Use full container width */
+    min-height: 0;  /* Allow flex item to shrink */
+    max-height: 100vh;  /* Never exceed viewport height */
+    overflow: hidden;  /* Keep this for topology view since it has its own scrolling */
+}
+
+/* Ensure other views work properly with flexbox */
+#cluster-view, #firmware-view {
+    flex: 0 0 auto;  /* Don't grow or shrink, use natural size */
+    width: 100%;  /* Use full container width */
 }
 
 #topology-graph-container {
     background: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-    min-height: 100%;
-    height: 100vh;  /* Use full viewport height */
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
+    box-sizing: border-box;
+    max-height: 100%;  /* Ensure it doesn't exceed parent height */
 }
 
 #topology-graph-container svg {
@@ -2430,11 +2701,54 @@ p {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.member-overlay-title h3 {
-    margin: 0 0 8px 0;
+.member-overlay-header .member-info {
+    flex: 1;
+    margin-right: 16px;
+}
+
+.member-overlay-header .member-info .member-row-1 {
+    margin-bottom: 8px;
+}
+
+.member-overlay-header .member-info .member-hostname {
     font-size: 1.5rem;
     font-weight: 600;
     color: #ecf0f1;
+    margin-bottom: 4px;
+}
+
+.member-overlay-header .member-info .member-ip {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 4px;
+}
+
+.member-overlay-header .member-info .member-latency {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.member-overlay-header .member-info .member-status {
+    font-size: 1.2rem;
+    margin-right: 8px;
+}
+
+.member-overlay-header .member-info .member-labels {
+    margin-top: 12px;
+}
+
+.member-overlay-header .member-info .member-labels .label-chip {
+    display: inline-block;
+    margin-right: 8px;
+    margin-bottom: 4px;
+    background: rgba(30, 58, 138, 0.35);
+    color: #dbeafe;
+    padding: 0.25rem 0.6rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    border: 1px solid rgba(59, 130, 246, 0.4);
+    font-family: inherit;
+    white-space: nowrap;
 }
 
 .member-overlay-subtitle {
@@ -2620,6 +2934,10 @@ p {
 		padding: 20px 20px 12px;
 	}
 	
+	.member-overlay-header .member-info .member-hostname {
+		font-size: 1.3rem;
+	}
+	
 	.member-overlay-body {
 		padding: 20px;
 	}
@@ -2628,8 +2946,41 @@ p {
 		flex-direction: column;
 	}
 	
-	.member-overlay-title h3 {
-		font-size: 1.3rem;
+	/* Compact layout adjustments for mobile */
+	.member-overlay-header .member-info .member-row-1 {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+	
+	.member-overlay-header .status-hostname-group {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	
+	.member-overlay-header .member-status,
+	.member-overlay-header .member-hostname,
+	.member-overlay-header .member-ip,
+	.member-overlay-header .member-latency {
+		flex-shrink: 1;
+	}
+	
+	/* Keep status and hostname together on mobile */
+	.member-overlay-header .member-status {
+		min-width: 1.3rem;
+		min-height: 1.3rem;
+	}
+	
+	.member-overlay-header .member-info .member-labels {
+		margin-top: 8px;
+	}
+	
+	.member-overlay-header .member-info .member-labels .label-chip {
+		font-size: 0.7rem;
+		padding: 0.2rem 0.5rem;
+		margin-right: 6px;
+		margin-bottom: 3px;
 	}
 }
 
@@ -2650,13 +3001,40 @@ p {
 		max-height: calc(90vh - 80px);
 	}
 
-	.member-overlay-body .member-card .member-header {
-		padding: 12px 12px 0;
-	}
-
 	.member-overlay-body .member-card .member-details {
 		padding: 0 12px;
 	}
+	
+	/* Further compact layout for very small screens */
+	.member-overlay-header .member-info .member-row-1 {
+		gap: 0.25rem;
+	}
+	
+	.member-overlay-header .member-info .member-hostname {
+		font-size: 1rem;
+	}
+	
+	.member-overlay-header .member-info .member-ip {
+		font-size: 0.8rem;
+	}
+	
+	.member-overlay-header .member-info .member-status {
+		font-size: 0.8rem;
+		padding: 0.15rem;
+		min-width: 1.1rem;
+		min-height: 1.1rem;
+	}
+	
+	.member-overlay-header .member-info .member-labels {
+		margin-top: 6px;
+	}
+	
+	.member-overlay-header .member-info .member-labels .label-chip {
+		font-size: 0.65rem;
+		padding: 0.15rem 0.4rem;
+		margin-right: 4px;
+		margin-bottom: 2px;
+	}
 }
 
 /* Test page styles */
@@ -2790,4 +3168,119 @@ p {
 		padding: 0.75rem;
 		font-size: 0.95rem;
 	}
+}
+
+#cluster-members-container {
+    overflow-y: auto;  /* Allow vertical scrolling */
+    max-height: calc(100vh - 200px);  /* Leave space for header and navigation */
+    padding-right: 0.5rem;  /* Add some padding for scrollbar */
+}
+
+#firmware-container {
+    overflow-y: auto;  /* Allow vertical scrolling */
+    max-height: calc(100vh - 200px);  /* Leave space for header and navigation */
+    padding-right: 0.5rem;  /* Add some padding for scrollbar */
+}
+
+/* Ensure proper scrolling for expanded member cards */
+.member-card.expanded {
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+    z-index: 5;
+    overflow: visible;  /* Allow content to expand */
+}
+
+/* Custom scrollbar styling for better UX */
+.view-content::-webkit-scrollbar,
+#cluster-members-container::-webkit-scrollbar,
+#firmware-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.view-content::-webkit-scrollbar-track,
+#cluster-members-container::-webkit-scrollbar-track,
+#firmware-container::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.view-content::-webkit-scrollbar-thumb,
+#cluster-members-container::-webkit-scrollbar-thumb,
+#firmware-container::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+}
+
+.view-content::-webkit-scrollbar-thumb:hover,
+#cluster-members-container::-webkit-scrollbar-thumb:hover,
+#firmware-container::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.firmware-nodes-list {
+    overflow-y: auto;  /* Allow vertical scrolling */
+    max-height: calc(100vh - 300px);  /* Leave space for header, navigation, and upload area */
+    padding-right: 0.5rem;  /* Add some padding for scrollbar */
+}
+
+.firmware-nodes-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.firmware-nodes-list::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.firmware-nodes-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+}
+
+.firmware-nodes-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+/* Responsive scrolling adjustments */
+@media (max-width: 768px) {
+    #cluster-members-container,
+    #firmware-container,
+    .firmware-nodes-list {
+        max-height: calc(100vh - 180px);  /* Adjust for mobile layout */
+        padding-right: 0.25rem;  /* Reduce padding on mobile */
+    }
+    
+    .view-content {
+        max-height: calc(100vh - 180px);  /* Adjust for mobile layout */
+    }
+}
+
+@media (max-width: 480px) {
+    #cluster-members-container,
+    #firmware-container,
+    .firmware-nodes-list {
+        max-height: calc(100vh - 160px);  /* Further adjust for small screens */
+        padding-right: 0.25rem;
+    }
+    
+    .view-content {
+        max-height: calc(100vh - 160px);  /* Further adjust for small screens */
+    }
+}
+
+/* Ensure smooth scrolling behavior */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Improve touch scrolling on mobile devices */
+.view-content,
+#cluster-members-container,
+#firmware-container,
+.firmware-nodes-list {
+    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
+    scrollbar-width: thin;  /* Thin scrollbar on Firefox */
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);  /* Firefox scrollbar colors */
 }

public/test-caching-system.html

@@ -1,351 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SPORE UI - Component Caching Test</title>
-    <link rel="stylesheet" href="styles.css">
-    <style>
-        .test-info {
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 8px;
-            padding: 1rem;
-            margin-bottom: 1rem;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .test-button {
-            background: rgba(74, 222, 128, 0.2);
-            border: 1px solid rgba(74, 222, 128, 0.3);
-            color: #4ade80;
-            padding: 0.5rem 1rem;
-            border-radius: 6px;
-            cursor: pointer;
-            margin: 0.25rem;
-            transition: all 0.2s ease;
-        }
-        .test-button:hover {
-            background: rgba(74, 222, 128, 0.3);
-            border-color: rgba(74, 222, 128, 0.5);
-        }
-        .test-button:active {
-            transform: scale(0.95);
-        }
-        .test-results {
-            background: rgba(0, 0, 0, 0.2);
-            border-radius: 8px;
-            padding: 1rem;
-            margin-top: 1rem;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            font-family: monospace;
-            font-size: 0.9rem;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="test-info">
-            <h3>🧪 Component Caching System Test</h3>
-            <p>This page tests the new component caching system to verify that components are not re-rendered on view switches.</p>
-            <p><strong>Note:</strong> Components now start with clean default state (collapsed cards, status tab) and don't restore previous UI state.</p>
-            <div>
-                <button class="test-button" onclick="testComponentCaching()">Test Component Caching</button>
-                <button class="test-button" onclick="testDefaultState()">Test Default State</button>
-                <button class="test-button" onclick="testPerformance()">Test Performance</button>
-                <button class="test-button" onclick="clearTestData()">Clear Test Data</button>
-            </div>
-        </div>
-        
-        <div class="main-navigation">
-            <div class="nav-left">
-                <button class="nav-tab active" data-view="cluster">🌐 Cluster</button>
-                <button class="nav-tab" data-view="firmware">📦 Firmware</button>
-            </div>
-            <div class="nav-right">
-                <div class="cluster-status">🚀 Cluster Online</div>
-            </div>
-        </div>
-    
-        <div id="cluster-view" class="view-content active">
-            <div class="cluster-section">
-                <div class="cluster-header">
-                    <div class="cluster-header-left">
-                        <div class="primary-node-info">
-                            <span class="primary-node-label">Primary Node:</span>
-                            <span class="primary-node-ip" id="primary-node-ip">Discovering...</span>
-                            <button class="primary-node-refresh" id="select-random-primary-btn" title="🎲 Select random primary node">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
-                                    <path d="M1 4v6h6M23 20v-6h-6"/>
-                                    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                    <button class="refresh-btn" id="refresh-cluster-btn">
-                        <svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                           <path d="M1 4v6h6M23 20v-6h-6"/>
-                           <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
-                        </svg>
-                        Refresh
-                    </button>
-                </div>
-            
-                <div id="cluster-members-container">
-                    <div class="loading">
-                        <div>Loading cluster members...</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <div id="firmware-view" class="view-content">
-            <div class="firmware-section">
-                <div class="firmware-overview">
-                    <div class="firmware-actions">
-                        <div class="action-group">
-                            <h3>🚀 Firmware Update</h3>
-                            <div class="firmware-upload-compact">
-                                <div class="compact-upload-row">
-                                    <div class="file-upload-area">
-                                        <div class="target-options">
-                                            <label class="target-option">
-                                                <input type="radio" name="target-type" value="all" checked>
-                                                <span class="radio-custom"></span>
-                                                <span class="target-label">All Nodes</span>
-                                            </label>
-                                            <label class="target-option specific-node-option">
-                                                <input type="radio" name="target-type" value="specific">
-                                                <span class="radio-custom"></span>
-                                                <span class="target-label">Specific Node</span>
-                                                <select id="specific-node-select" class="node-select">
-                                                    <option value="">Select a node...</option>
-                                                </select>
-                                            </label>
-                                        </div>
-                                        
-                                        <div class="file-input-wrapper">
-                                            <input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
-                                            <button class="upload-btn-compact" onclick="document.getElementById('global-firmware-file').click()">
-                                                📁 Choose File
-                                            </button>
-                                            <span class="file-info" id="file-info">No file selected</span>
-                                        </div>
-                                    </div>
-                                    
-                                    <button class="deploy-btn" id="deploy-btn" disabled>
-                                        🚀 Deploy
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="firmware-nodes-list" id="firmware-nodes-list">
-                    <!-- Nodes will be populated here -->
-                </div>
-            </div>
-        </div>
-        
-        <div class="test-results" id="test-results">
-            <h4>Test Results:</h4>
-            <div id="test-output">Run a test to see results...</div>
-        </div>
-    </div>
-
-    <script src="framework.js"></script>
-    <script src="api-client.js"></script>
-    <script src="view-models.js"></script>
-    <script src="components.js"></script>
-    <script src="app.js"></script>
-    
-    <script>
-        // Test tracking variables
-        let componentCreationCount = 0;
-        let componentMountCount = 0;
-        let componentUnmountCount = 0;
-        let componentPauseCount = 0;
-        let componentResumeCount = 0;
-        let testStartTime = 0;
-        
-        // Override console.log to track component operations
-        const originalLog = console.log;
-        console.log = function(...args) {
-            const message = args.join(' ');
-            
-            // Track component operations
-            if (message.includes('Constructor called')) {
-                componentCreationCount++;
-            } else if (message.includes('Mounting...')) {
-                componentMountCount++;
-            } else if (message.includes('Unmounting...')) {
-                componentUnmountCount++;
-            } else if (message.includes('Pausing...')) {
-                componentPauseCount++;
-            } else if (message.includes('Resuming...')) {
-                componentResumeCount++;
-            }
-            
-            // Call original console.log
-            originalLog.apply(console, args);
-        };
-        
-        // Test functions
-        function testComponentCaching() {
-            console.log('🧪 Testing component caching system...');
-            resetTestCounts();
-            
-            const results = document.getElementById('test-output');
-            results.innerHTML = 'Testing component caching...<br>';
-            
-            // Test rapid view switching
-            const clusterTab = document.querySelector('[data-view="cluster"]');
-            const firmwareTab = document.querySelector('[data-view="firmware"]');
-            
-            let switchCount = 0;
-            const maxSwitches = 10;
-            
-            const rapidSwitch = setInterval(() => {
-                if (switchCount >= maxSwitches) {
-                    clearInterval(rapidSwitch);
-                    analyzeResults();
-                    return;
-                }
-                
-                if (switchCount % 2 === 0) {
-                    firmwareTab.click();
-                    results.innerHTML += `Switch ${switchCount + 1}: Cluster → Firmware<br>`;
-                } else {
-                    clusterTab.click();
-                    results.innerHTML += `Switch ${switchCount + 1}: Firmware → Cluster<br>`;
-                }
-                
-                switchCount++;
-            }, 200);
-        }
-        
-        function testDefaultState() {
-            console.log('🧪 Testing default state...');
-            resetTestCounts();
-            
-            const results = document.getElementById('test-output');
-            results.innerHTML = 'Testing default state...<br>';
-            
-            // Switch to cluster view
-            const clusterTab = document.querySelector('[data-view="cluster"]');
-            clusterTab.click();
-            results.innerHTML += 'Switched to Cluster View.<br>';
-            
-            // Check if default state is applied (collapsed cards, status tab)
-            setTimeout(() => {
-                const memberCards = document.querySelectorAll('.member-card');
-                const statusTab = document.querySelector('.nav-tab.active[data-view="status"]');
-                
-                if (memberCards.length > 0) {
-                    results.innerHTML += 'Checking default state:<br>';
-                    results.innerHTML += `- Member cards are collapsed: ${memberCards.every(card => !card.classList.contains('expanded'))}<br>`;
-                    results.innerHTML += `- Status tab is active: ${statusTab && statusTab.classList.contains('active')}<br>`;
-                    analyzeResults();
-                } else {
-                    results.innerHTML += 'No member cards found to check default state<br>';
-                    analyzeResults();
-                }
-            }, 1000);
-        }
-        
-        function testPerformance() {
-            console.log('🧪 Testing performance...');
-            resetTestCounts();
-            testStartTime = performance.now();
-            
-            const results = document.getElementById('test-output');
-            results.innerHTML = 'Testing performance with rapid switching...<br>';
-            
-            // Perform rapid view switching
-            const clusterTab = document.querySelector('[data-view="cluster"]');
-            const firmwareTab = document.querySelector('[data-view="firmware"]');
-            
-            let switchCount = 0;
-            const maxSwitches = 20;
-            
-            const performanceTest = setInterval(() => {
-                if (switchCount >= maxSwitches) {
-                    clearInterval(performanceTest);
-                    const totalTime = performance.now() - testStartTime;
-                    results.innerHTML += `Performance test completed in ${totalTime.toFixed(2)}ms<br>`;
-                    analyzeResults();
-                    return;
-                }
-                
-                if (switchCount % 2 === 0) {
-                    firmwareTab.click();
-                } else {
-                    clusterTab.click();
-                }
-                
-                switchCount++;
-            }, 100);
-        }
-        
-        function resetTestCounts() {
-            componentCreationCount = 0;
-            componentMountCount = 0;
-            componentUnmountCount = 0;
-            componentPauseCount = 0;
-            componentResumeCount = 0;
-        }
-        
-        function analyzeResults() {
-            const results = document.getElementById('test-output');
-            results.innerHTML += '<br><strong>Test Analysis:</strong><br>';
-            results.innerHTML += `Component Creations: ${componentCreationCount}<br>`;
-            results.innerHTML += `Component Mounts: ${componentMountCount}<br>`;
-            results.innerHTML += `Component Unmounts: ${componentUnmountCount}<br>`;
-            results.innerHTML += `Component Pauses: ${componentPauseCount}<br>`;
-            results.innerHTML += `Component Resumes: ${componentResumeCount}<br><br>`;
-            
-            // Analyze results
-            if (componentCreationCount <= 2) {
-                results.innerHTML += '✅ <strong>PASS:</strong> Components are properly cached (not re-created)<br>';
-            } else {
-                results.innerHTML += '❌ <strong>FAIL:</strong> Components are being re-created on view switches<br>';
-            }
-            
-            if (componentUnmountCount === 0) {
-                results.innerHTML += '✅ <strong>PASS:</strong> Components are never unmounted during view switches<br>';
-            } else {
-                results.innerHTML += '❌ <strong>FAIL:</strong> Components are being unmounted during view switches<br>';
-            }
-            
-            if (componentPauseCount > 0 && componentResumeCount > 0) {
-                results.innerHTML += '✅ <strong>PASS:</strong> Pause/Resume pattern is working correctly<br>';
-            } else {
-                results.innerHTML += '❌ <strong>FAIL:</strong> Pause/Resume pattern is not working<br>';
-            }
-            
-            // New test for default state behavior
-            if (componentCreationCount <= 2 && componentUnmountCount === 0) {
-                results.innerHTML += '✅ <strong>PASS:</strong> Component caching system is working correctly<br>';
-                results.innerHTML += '✅ <strong>PASS:</strong> Components start with clean default state<br>';
-                results.innerHTML += '✅ <strong>PASS:</strong> No complex state restoration causing issues<br>';
-            }
-        }
-        
-        function clearTestData() {
-            console.log('🧪 Clearing test data...');
-            localStorage.removeItem('spore_cluster_expanded_cards');
-            localStorage.removeItem('spore_cluster_active_tabs');
-            console.log('🧪 Test data cleared');
-            
-            const results = document.getElementById('test-output');
-            results.innerHTML = 'Test data cleared. Run a test to see results...';
-        }
-        
-        // Add test info to console
-        console.log('🧪 SPORE UI Component Caching Test Page Loaded');
-        console.log('🧪 Use the test buttons above to verify the caching system works');
-        console.log('🧪 Expected: Components should be created once and cached, never re-created');
-        console.log('🧪 Expected: Components start with clean default state (collapsed cards, status tab)');
-        console.log('🧪 Expected: No complex state restoration causing incorrect behavior');
-    </script>
-</body>
-</html> 

public/test-deploy-button.html

@@ -1,353 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Deploy Button Test</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            background: #1a202c;
-            color: white;
-        }
-        .test-section {
-            background: rgba(255, 255, 255, 0.05);
-            padding: 20px;
-            margin: 20px 0;
-            border-radius: 8px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .firmware-actions {
-            background: rgba(0, 0, 0, 0.3);
-            padding: 20px;
-            border-radius: 8px;
-        }
-        .target-options {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-        .target-option {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-        }
-        .file-input-wrapper {
-            margin: 20px 0;
-        }
-        .deploy-btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: none;
-            color: white;
-            padding: 10px 20px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 16px;
-            font-weight: 600;
-        }
-        .deploy-btn:disabled {
-            background: rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.4);
-            cursor: not-allowed;
-        }
-        .node-select {
-            background: #2d3748;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            color: white;
-            padding: 5px 10px;
-            border-radius: 4px;
-            margin-left: 10px;
-        }
-        .no-nodes-message {
-            color: #fbbf24;
-            font-size: 0.8rem;
-            margin-top: 0.25rem;
-            font-style: italic;
-            text-align: center;
-            padding: 0.25rem;
-            border-radius: 4px;
-            background: rgba(251, 191, 36, 0.1);
-            border: 1px solid rgba(251, 191, 36, 0.3);
-        }
-        .cluster-members {
-            background: rgba(0, 0, 0, 0.2);
-            padding: 15px;
-            border-radius: 6px;
-            margin: 20px 0;
-        }
-        .member-card {
-            background: rgba(255, 255, 255, 0.05);
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 4px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .status-online {
-            color: #4ade80;
-        }
-        .status-offline {
-            color: #f87171;
-        }
-    </style>
-</head>
-<body>
-    <h1>🚀 Deploy Button Test</h1>
-    
-    <div class="test-section">
-        <h2>Test Scenario: Deploy Button State</h2>
-        <p>This test demonstrates the deploy button behavior when:</p>
-        <ul>
-            <li>No file is selected</li>
-            <li>No nodes are available</li>
-            <li>File is selected but no target is chosen</li>
-            <li>File is selected and target is chosen</li>
-        </ul>
-    </div>
-
-    <div class="firmware-actions">
-        <h3>🚀 Firmware Update</h3>
-        
-        <div class="target-options">
-            <label class="target-option">
-                <input type="radio" name="target-type" value="all" checked>
-                <span>All Nodes</span>
-            </label>
-            <label class="target-option">
-                <input type="radio" name="target-type" value="specific">
-                <span>Specific Node</span>
-                <select id="specific-node-select" class="node-select" style="visibility: hidden; opacity: 0;">
-                    <option value="">Select a node...</option>
-                </select>
-            </label>
-        </div>
-        
-        <div class="file-input-wrapper">
-            <input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
-            <button onclick="document.getElementById('global-firmware-file').click()">
-                📁 Choose File
-            </button>
-            <span id="file-info">No file selected</span>
-        </div>
-        
-        <button class="deploy-btn" id="deploy-btn" disabled>
-            🚀 Deploy Firmware
-        </button>
-    </div>
-
-    <div class="cluster-members">
-        <h3>Cluster Members</h3>
-        <div id="cluster-members-container">
-            <div class="loading">Loading cluster members...</div>
-        </div>
-        <button onclick="addTestNode()">Add Test Node</button>
-        <button onclick="removeAllNodes()">Remove All Nodes</button>
-    </div>
-
-    <div class="test-section">
-        <h2>Test Instructions</h2>
-        <ol>
-            <li>Select "Specific Node" radio button - notice the deploy button remains disabled</li>
-            <li>Click "Add Test Node" to simulate cluster discovery</li>
-            <li>Select "Specific Node" again - now you should see nodes in the dropdown</li>
-            <li>Select a file - deploy button should remain disabled until you select a node</li>
-            <li>Select a specific node - deploy button should now be enabled</li>
-            <li>Click "Remove All Nodes" to test the "no nodes available" state</li>
-        </ol>
-    </div>
-
-    <script>
-        // Simulate the cluster members functionality
-        let testNodes = [];
-        
-        function addTestNode() {
-            const nodeCount = testNodes.length + 1;
-            const newNode = {
-                ip: `192.168.1.${100 + nodeCount}`,
-                hostname: `TestNode${nodeCount}`,
-                status: 'active',
-                latency: Math.floor(Math.random() * 50) + 10,
-                labels: nodeCount % 2 === 0 ? { app: 'demo', role: 'worker' } : { device: 'sensor', zone: `Z${nodeCount}` }
-            };
-            testNodes.push(newNode);
-            displayClusterMembers();
-            populateNodeSelect();
-            updateDeployButton();
-        }
-        
-        function removeAllNodes() {
-            testNodes = [];
-            displayClusterMembers();
-            populateNodeSelect();
-            updateDeployButton();
-        }
-        
-        function displayClusterMembers() {
-            const container = document.getElementById('cluster-members-container');
-            
-            if (testNodes.length === 0) {
-                container.innerHTML = '<div class="loading">No cluster members found</div>';
-                return;
-            }
-            
-            const membersHTML = testNodes.map(node => {
-                const statusClass = node.status === 'active' ? 'status-online' : 'status-offline';
-                const statusText = node.status === 'active' ? 'Online' : 'Offline';
-                const statusIcon = node.status === 'active' ? '🟢' : '🔴';
-                
-                return `
-                    <div class="member-card" data-member-ip="${node.ip}">
-                        <div class="member-name">${node.hostname}</div>
-                        <div class="member-ip">${node.ip}</div>
-                        <div class="member-status ${statusClass}">
-                            ${statusIcon} ${statusText}
-                        </div>
-                        <div class="member-latency">Latency: ${node.latency}ms</div>
-                        ${node.labels ? `<div class=\"member-labels\">${Object.entries(node.labels).map(([k,v]) => `<span class=\\\"label-chip\\\">${k}: ${v}</span>`).join('')}</div>` : ''}
-                    </div>
-                `;
-            }).join('');
-            
-            container.innerHTML = membersHTML;
-        }
-        
-        function populateNodeSelect() {
-            const select = document.getElementById('specific-node-select');
-            if (!select) return;
-            
-            select.innerHTML = '<option value="">Select a node...</option>';
-            
-            if (testNodes.length === 0) {
-                const option = document.createElement('option');
-                option.value = "";
-                option.textContent = "No nodes available";
-                option.disabled = true;
-                select.appendChild(option);
-                return;
-            }
-            
-            testNodes.forEach(node => {
-                const option = document.createElement('option');
-                option.value = node.ip;
-                option.textContent = `${node.hostname} (${node.ip})`;
-                select.appendChild(option);
-            });
-        }
-        
-        function updateDeployButton() {
-            const deployBtn = document.getElementById('deploy-btn');
-            const fileInput = document.getElementById('global-firmware-file');
-            const targetType = document.querySelector('input[name="target-type"]:checked');
-            const specificNodeSelect = document.getElementById('specific-node-select');
-            
-            if (!deployBtn || !fileInput) return;
-            
-            const hasFile = fileInput.files && fileInput.files.length > 0;
-            const hasAvailableNodes = testNodes.length > 0;
-            
-            let isValidTarget = false;
-            if (targetType.value === 'all') {
-                isValidTarget = hasAvailableNodes;
-            } else if (targetType.value === 'specific') {
-                isValidTarget = hasAvailableNodes && specificNodeSelect.value && specificNodeSelect.value !== "";
-            }
-            
-            deployBtn.disabled = !hasFile || !isValidTarget;
-            
-            // Update button text to provide better feedback
-            if (!hasAvailableNodes) {
-                deployBtn.textContent = '🚀 Deploy (No nodes available)';
-                deployBtn.title = 'No cluster nodes are currently available for deployment';
-            } else if (!hasFile) {
-                deployBtn.textContent = '🚀 Deploy Firmware';
-                deployBtn.title = 'Please select a firmware file to deploy';
-            } else if (!isValidTarget) {
-                deployBtn.textContent = '🚀 Deploy Firmware';
-                deployBtn.title = 'Please select a valid target for deployment';
-            } else {
-                deployBtn.textContent = '🚀 Deploy Firmware';
-                deployBtn.title = 'Ready to deploy firmware';
-            }
-        }
-        
-        // Setup event listeners
-        document.addEventListener('DOMContentLoaded', function() {
-            // Setup target selection
-            const targetRadios = document.querySelectorAll('input[name="target-type"]');
-            const specificNodeSelect = document.getElementById('specific-node-select');
-            
-            targetRadios.forEach(radio => {
-                radio.addEventListener('change', () => {
-                    if (radio.value === 'specific') {
-                        specificNodeSelect.style.visibility = 'visible';
-                        specificNodeSelect.style.opacity = '1';
-                        populateNodeSelect();
-                        
-                        // Check if there are any nodes available and show appropriate message
-                        if (testNodes.length === 0) {
-                            // Show a message that no nodes are available
-                            const noNodesMsg = document.createElement('div');
-                            noNodesMsg.className = 'no-nodes-message';
-                            noNodesMsg.textContent = 'No cluster nodes are currently available';
-                            
-                            // Remove any existing message
-                            const existingMsg = specificNodeSelect.parentNode.querySelector('.no-nodes-message');
-                            if (existingMsg) {
-                                existingMsg.remove();
-                            }
-                            
-                            specificNodeSelect.parentNode.appendChild(noNodesMsg);
-                        } else {
-                            // Remove any existing no-nodes message
-                            const existingMsg = specificNodeSelect.parentNode.querySelector('.no-nodes-message');
-                            if (existingMsg) {
-                                existingMsg.remove();
-                            }
-                        }
-                    } else {
-                        specificNodeSelect.style.visibility = 'hidden';
-                        specificNodeSelect.style.opacity = '0';
-                        
-                        // Remove any no-nodes message when hiding
-                        const existingMsg = specificNodeSelect.parentNode.querySelector('.no-nodes-message');
-                        if (existingMsg) {
-                            existingMsg.remove();
-                        }
-                    }
-                    updateDeployButton();
-                });
-            });
-            
-            // Setup specific node select change handler
-            if (specificNodeSelect) {
-                specificNodeSelect.addEventListener('change', updateDeployButton);
-            }
-            
-            // Setup file input change handler
-            const fileInput = document.getElementById('global-firmware-file');
-            if (fileInput) {
-                fileInput.addEventListener('change', (event) => {
-                    const file = event.target.files[0];
-                    const fileInfo = document.getElementById('file-info');
-                    
-                    if (file) {
-                        fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)}KB)`;
-                    } else {
-                        fileInfo.textContent = 'No file selected';
-                    }
-                    
-                    updateDeployButton();
-                });
-            }
-            
-            // Initial setup
-            displayClusterMembers();
-            populateNodeSelect();
-            updateDeployButton();
-        });
-    </script>
-</body>
-</html> 

public/test-framework.html

@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Framework Test</title>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
-        .success { color: green; }
-        .error { color: red; }
-        button { margin: 5px; padding: 10px; }
-        input { margin: 5px; padding: 5px; }
-    </style>
-</head>
-<body>
-    <h1>SPORE UI Framework Test</h1>
-    
-    <div class="test-section">
-        <h2>Framework Initialization Test</h2>
-        <div id="framework-status">Checking...</div>
-    </div>
-    
-    <div class="test-section">
-        <h2>Event Bus Test</h2>
-        <button id="publish-btn">Publish Test Event</button>
-        <div id="event-log"></div>
-    </div>
-    
-    <div class="test-section">
-        <h2>View Model Test</h2>
-        <input type="text" id="name-input" placeholder="Enter name">
-        <button id="update-btn">Update Name</button>
-        <div id="name-display">Name: (not set)</div>
-    </div>
-    
-    <div class="test-section">
-        <h2>Component Test</h2>
-        <div id="test-component">
-            <div class="loading">Loading...</div>
-        </div>
-        <button id="refresh-btn">Refresh Component</button>
-    </div>
-
-    <script src="framework.js"></script>
-    <script>
-        // Test framework initialization
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log('Testing framework...');
-            
-            // Test 1: Framework initialization
-            if (window.app && window.app.eventBus) {
-                document.getElementById('framework-status').innerHTML = 
-                    '<span class="success">✅ Framework initialized successfully</span>';
-            } else {
-                document.getElementById('framework-status').innerHTML = 
-                    '<span class="error">❌ Framework failed to initialize</span>';
-            }
-            
-            // Test 2: Event Bus
-            const eventLog = document.getElementById('event-log');
-            const unsubscribe = window.app.eventBus.subscribe('test-event', (data) => {
-                eventLog.innerHTML += `<div>📡 Event received: ${JSON.stringify(data)}</div>`;
-            });
-            
-            document.getElementById('publish-btn').addEventListener('click', () => {
-                window.app.eventBus.publish('test-event', { 
-                    message: 'Hello from test!', 
-                    timestamp: new Date().toISOString() 
-                });
-            });
-            
-            // Test 3: View Model
-            const testVM = new ViewModel();
-            testVM.setEventBus(window.app.eventBus);
-            
-            testVM.subscribe('name', (value) => {
-                document.getElementById('name-display').textContent = `Name: ${value || '(not set)'}`;
-            });
-            
-            document.getElementById('update-btn').addEventListener('click', () => {
-                const name = document.getElementById('name-input').value;
-                testVM.set('name', name);
-            });
-            
-            // Test 4: Component
-            class TestComponent extends Component {
-                constructor(container, viewModel, eventBus) {
-                    super(container, viewModel, eventBus);
-                }
-                
-                setupEventListeners() {
-                    const refreshBtn = document.getElementById('refresh-btn');
-                    if (refreshBtn) {
-                        this.addEventListener(refreshBtn, 'click', this.handleRefresh.bind(this));
-                    }
-                }
-                
-                render() {
-                    const data = this.viewModel ? this.viewModel.get('data') : null;
-                    if (data) {
-                        this.setHTML('', `<div class="success">✅ Component data: ${data}</div>`);
-                    } else {
-                        this.setHTML('', `<div class="loading">Loading component data...</div>`);
-                    }
-                }
-                
-                handleRefresh() {
-                    if (this.viewModel) {
-                        this.viewModel.set('data', `Refreshed at ${new Date().toLocaleTimeString()}`);
-                    }
-                }
-            }
-            
-            const testComponentVM = new ViewModel();
-            testComponentVM.setEventBus(window.app.eventBus);
-            testComponentVM.set('data', 'Initial component data');
-            
-            const testComponent = new TestComponent(
-                document.getElementById('test-component'),
-                testComponentVM,
-                window.app.eventBus
-            );
-            
-            testComponent.mount();
-            
-            console.log('Framework test completed');
-        });
-    </script>
-</body>
-</html> 

public/test-member-overlay.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test Member Card Overlay</title>
-    <link rel="stylesheet" href="styles.css">
-    <script src="./d3.v7.min.js"></script>
-</head>
-<body>
-    <div class="container">
-        <h1>Test Member Card Overlay</h1>
-        
-        <div class="test-section">
-            <h2>Test Data</h2>
-            <button id="test-overlay-btn">Show Test Member Overlay</button>
-        </div>
-        
-        <div id="member-card-overlay" class="member-card-overlay"></div>
-    </div>
-
-    <script src="./framework.js"></script>
-    <script src="./components.js"></script>
-    <script>
-        // Test the member card overlay
-        document.addEventListener('DOMContentLoaded', function() {
-            const testBtn = document.getElementById('test-overlay-btn');
-            const overlayContainer = document.getElementById('member-card-overlay');
-            
-            // Create test view model and event bus
-            const testVM = new ViewModel();
-            const testEventBus = new EventBus();
-            
-            // Create the overlay component
-            const overlayComponent = new MemberCardOverlayComponent(overlayContainer, testVM, testEventBus);
-            overlayComponent.mount();
-            
-            // Test data
-            const testMember = {
-                ip: '192.168.1.100',
-                hostname: 'test-node-01',
-                status: 'active',
-                latency: 15,
-                labels: {
-                    'environment': 'production',
-                    'region': 'us-west',
-                    'role': 'worker'
-                }
-            };
-            
-            // Show overlay on button click
-            testBtn.addEventListener('click', function() {
-                overlayComponent.show(testMember);
-            });
-        });
-    </script>
-</body>
-</html> 

public/test-members-debug.html

@@ -1,296 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Debug Members Component</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        .container { max-width: 800px; margin: 0 auto; }
-        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; }
-        button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; cursor: pointer; }
-        button:hover { background: #0056b3; }
-        #graph-container { width: 600px; height: 400px; border: 1px solid #ccc; margin: 20px 0; }
-        .status { padding: 10px; margin: 10px 0; border-radius: 4px; }
-        .success { background: #d4edda; color: #155724; }
-        .error { background: #f8d7da; color: #721c24; }
-        .info { background: #d1ecf1; color: #0c5460; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>🐛 Debug Members Component</h1>
-        
-        <div class="test-section">
-            <h3>Component Test</h3>
-            <p>Testing if the TopologyGraphComponent can be created and initialized.</p>
-            <button onclick="testComponentCreation()">Test Component Creation</button>
-            <button onclick="testInitialization()">Test Initialization</button>
-            <button onclick="testMount()">Test Mount</button>
-            <button onclick="clearTest()">Clear Test</button>
-            <div id="status"></div>
-        </div>
-        
-        <div class="test-section">
-            <h3>Graph Container</h3>
-            <div id="graph-container">
-                <div style="text-align: center; padding: 50px; color: #666;">
-                    Graph will appear here after testing
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let testComponent = null;
-
-        function showStatus(message, type = 'info') {
-            const statusDiv = document.getElementById('status');
-            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
-        }
-
-        // Mock base Component class
-        class MockComponent {
-            constructor(container, viewModel, eventBus) {
-                this.container = container;
-                this.viewModel = viewModel;
-                this.eventBus = eventBus;
-                this.isMounted = false;
-                this.isInitialized = false;
-            }
-
-            async initialize() {
-                console.log('MockComponent: initialize called');
-                this.isInitialized = true;
-            }
-
-            mount() {
-                console.log('MockComponent: mount called');
-                this.isMounted = true;
-            }
-
-            setupEventListeners() {
-                console.log('MockComponent: setupEventListeners called');
-            }
-
-            setupViewModelListeners() {
-                console.log('MockComponent: setupViewModelListeners called');
-            }
-
-            render() {
-                console.log('MockComponent: render called');
-            }
-        }
-
-        // Mock ViewModel
-        class MockViewModel {
-            constructor() {
-                this._data = {
-                    nodes: [],
-                    links: [],
-                    isLoading: false,
-                    error: null
-                };
-            }
-
-            get(property) {
-                return this._data[property];
-            }
-
-            set(property, value) {
-                this._data[property] = value;
-            }
-
-            subscribe(property, callback) {
-                console.log(`MockViewModel: Subscribing to ${property}`);
-            }
-
-            async updateNetworkTopology() {
-                console.log('MockViewModel: updateNetworkTopology called');
-                // Simulate some data
-                this.set('nodes', [
-                    { id: '1', hostname: 'Test Node 1', ip: '192.168.1.1', status: 'ACTIVE' },
-                    { id: '2', hostname: 'Test Node 2', ip: '192.168.1.2', status: 'ACTIVE' }
-                ]);
-                this.set('links', [
-                    { source: '1', target: '2', latency: 5 }
-                ]);
-            }
-        }
-
-        // Test TopologyGraphComponent (simplified version)
-        class TestTopologyGraphComponent extends MockComponent {
-            constructor(container, viewModel, eventBus) {
-                super(container, viewModel, eventBus);
-                console.log('TestTopologyGraphComponent: Constructor called');
-                this.svg = null;
-                this.simulation = null;
-                this.zoom = null;
-                this.width = 600;
-                this.height = 400;
-                this.isInitialized = false;
-            }
-
-            // Override mount to ensure proper initialization
-            mount() {
-                if (this.isMounted) return;
-                
-                console.log('TestTopologyGraphComponent: Starting mount...');
-                
-                // Call initialize if not already done
-                if (!this.isInitialized) {
-                    console.log('TestTopologyGraphComponent: Initializing during mount...');
-                    this.initialize().then(() => {
-                        // Complete mount after initialization
-                        this.completeMount();
-                    }).catch(error => {
-                        console.error('TestTopologyGraphComponent: Initialization failed during mount:', error);
-                        // Still complete mount to prevent blocking
-                        this.completeMount();
-                    });
-                } else {
-                    this.completeMount();
-                }
-            }
-
-            completeMount() {
-                this.isMounted = true;
-                this.setupEventListeners();
-                this.setupViewModelListeners();
-                this.render();
-                
-                console.log('TestTopologyGraphComponent: Mounted successfully');
-            }
-
-            async initialize() {
-                console.log('TestTopologyGraphComponent: Initializing...');
-                await super.initialize();
-                
-                // Set up the SVG container
-                this.setupSVG();
-                
-                // Mark as initialized
-                this.isInitialized = true;
-                
-                console.log('TestTopologyGraphComponent: Initialization completed');
-            }
-
-            setupSVG() {
-                const container = document.getElementById('graph-container');
-                if (!container) {
-                    console.error('TestTopologyGraphComponent: Graph container not found');
-                    return;
-                }
-
-                // Clear existing content
-                container.innerHTML = '';
-
-                // Create SVG element
-                this.svg = d3.select(container)
-                    .append('svg')
-                    .attr('width', this.width)
-                    .attr('height', this.height)
-                    .style('border', '1px solid #ddd')
-                    .style('background', '#f9f9f9');
-
-                this.svg.append('g');
-                
-                console.log('TestTopologyGraphComponent: SVG setup completed');
-            }
-
-            render() {
-                console.log('TestTopologyGraphComponent: render called');
-                // Simple render for testing
-                if (this.svg) {
-                    const svgGroup = this.svg.select('g');
-                    svgGroup.append('text')
-                        .attr('x', 300)
-                        .attr('y', 200)
-                        .attr('text-anchor', 'middle')
-                        .attr('font-size', '16px')
-                        .text('Component Rendered Successfully!');
-                }
-            }
-        }
-
-        function testComponentCreation() {
-            try {
-                showStatus('🔄 Testing component creation...', 'info');
-                
-                const mockViewModel = new MockViewModel();
-                const mockEventBus = {};
-                
-                testComponent = new TestTopologyGraphComponent(
-                    document.getElementById('graph-container'),
-                    mockViewModel,
-                    mockEventBus
-                );
-                
-                showStatus('✅ Component created successfully', 'success');
-                console.log('Component created:', testComponent);
-                
-            } catch (error) {
-                console.error('Component creation failed:', error);
-                showStatus(`❌ Component creation failed: ${error.message}`, 'error');
-            }
-        }
-
-        function testInitialization() {
-            if (!testComponent) {
-                showStatus('❌ No component created. Run component creation test first.', 'error');
-                return;
-            }
-
-            try {
-                showStatus('🔄 Testing initialization...', 'info');
-                
-                testComponent.initialize().then(() => {
-                    showStatus('✅ Component initialized successfully', 'success');
-                }).catch(error => {
-                    console.error('Initialization failed:', error);
-                    showStatus(`❌ Initialization failed: ${error.message}`, 'error');
-                });
-                
-            } catch (error) {
-                console.error('Initialization test failed:', error);
-                showStatus(`❌ Initialization test failed: ${error.message}`, 'error');
-            }
-        }
-
-        function testMount() {
-            if (!testComponent) {
-                showStatus('❌ No component created. Run component creation test first.', 'error');
-                return;
-            }
-
-            try {
-                showStatus('🔄 Testing mount...', 'info');
-                
-                testComponent.mount();
-                
-                showStatus('✅ Component mounted successfully', 'success');
-                
-            } catch (error) {
-                console.error('Mount test failed:', error);
-                showStatus(`❌ Mount test failed: ${error.message}`, 'error');
-            }
-        }
-
-        function clearTest() {
-            if (testComponent) {
-                testComponent = null;
-            }
-            document.getElementById('graph-container').innerHTML = 
-                '<div style="text-align: center; padding: 50px; color: #666;">Graph will appear here after testing</div>';
-            document.getElementById('status').innerHTML = '';
-            showStatus('🧹 Test cleared', 'info');
-        }
-
-        // Auto-test on load
-        window.addEventListener('load', () => {
-            showStatus('🚀 Debug page loaded. Click "Test Component Creation" to begin.', 'info');
-        });
-    </script>
-</body>
-</html> 

public/test-refresh.html

@@ -1,192 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test Refresh Button</title>
-    <link rel="stylesheet" href="styles.css">
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; background: #1a1a1a; color: white; }
-        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #333; border-radius: 8px; }
-        .log { background: #2a2a2a; padding: 10px; margin: 10px 0; font-family: monospace; border-radius: 4px; max-height: 300px; overflow-y: auto; }
-        .test-button { background: #4a90e2; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin: 5px; }
-        .test-button:hover { background: #357abd; }
-    </style>
-</head>
-<body>
-    <h1>🔍 Test Refresh Button Functionality</h1>
-    
-    <div class="test-section">
-        <h3>Test Controls</h3>
-        <button class="test-button" onclick="testRefreshButton()">🧪 Test Refresh Button</button>
-        <button class="test-button" onclick="testAPICall()">📡 Test API Call</button>
-        <button class="test-button" onclick="testComponent()">🧩 Test Component</button>
-        <button class="test-button" onclick="clearLog()">🧹 Clear Log</button>
-    </div>
-    
-    <div class="test-section">
-        <h3>Cluster View (Simplified)</h3>
-        <div id="cluster-view" class="cluster-container">
-            <div class="cluster-header">
-                <div class="cluster-header-left">
-                    <div class="primary-node-info">
-                        <span class="primary-node-label">Primary Node:</span>
-                        <span class="primary-node-ip" id="primary-node-ip">🔍 Discovering...</span>
-                    </div>
-                </div>
-                <button class="refresh-btn" id="refresh-cluster-btn">
-                    <svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M1 4v6h6M23 20v-6h-6"/>
-                        <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
-                    </svg>
-                    Refresh
-                </button>
-            </div>
-            
-            <div id="cluster-members-container">
-                <div class="loading">Loading cluster members...</div>
-            </div>
-        </div>
-    </div>
-    
-    <div class="test-section">
-        <h3>Debug Log</h3>
-        <div id="debug-log" class="log"></div>
-    </div>
-
-    <!-- Include SPORE UI framework and components -->
-    <script src="framework.js"></script>
-    <script src="view-models.js"></script>
-    <script src="components.js"></script>
-    <script src="api-client.js"></script>
-    
-    <script>
-        let debugLog = [];
-        
-        function log(message, type = 'info') {
-            const timestamp = new Date().toLocaleTimeString();
-            const logEntry = `[${timestamp}] ${type.toUpperCase()}: ${message}`;
-            debugLog.push(logEntry);
-            
-            const logElement = document.getElementById('debug-log');
-            if (logElement) {
-                logElement.innerHTML = debugLog.map(entry => `<div>${entry}</div>`).join('');
-                logElement.scrollTop = logElement.scrollHeight;
-            }
-            
-            console.log(logEntry);
-        }
-        
-        function clearLog() {
-            debugLog = [];
-            document.getElementById('debug-log').innerHTML = '';
-        }
-        
-        function testRefreshButton() {
-            log('Testing refresh button functionality...');
-            
-            const refreshBtn = document.getElementById('refresh-cluster-btn');
-            if (refreshBtn) {
-                log('Found refresh button, testing click event...');
-                
-                // Test if the button is clickable
-                refreshBtn.click();
-                log('Refresh button clicked');
-                
-                // Check if the button state changed
-                setTimeout(() => {
-                    if (refreshBtn.disabled) {
-                        log('Button was disabled (good sign)', 'success');
-                    } else {
-                        log('Button was not disabled (potential issue)', 'warning');
-                    }
-                    
-                    // Check button text
-                    if (refreshBtn.innerHTML.includes('Refreshing')) {
-                        log('Button text changed to "Refreshing" (good sign)', 'success');
-                    } else {
-                        log('Button text did not change (potential issue)', 'warning');
-                    }
-                }, 100);
-                
-            } else {
-                log('Refresh button not found!', 'error');
-            }
-        }
-        
-        function testAPICall() {
-            log('Testing API call to cluster members endpoint...');
-            
-            fetch('http://localhost:3001/api/cluster/members')
-                .then(response => {
-                    log(`API response status: ${response.status}`, 'info');
-                    return response.json();
-                })
-                .then(data => {
-                    log(`API response data: ${JSON.stringify(data, null, 2)}`, 'success');
-                })
-                .catch(error => {
-                    log(`API call failed: ${error.message}`, 'error');
-                });
-        }
-        
-        function testComponent() {
-            log('Testing component initialization...');
-            
-            try {
-                // Create a simple test component
-                const container = document.getElementById('cluster-view');
-                const viewModel = new ClusterViewModel();
-                const component = new ClusterMembersComponent(container, viewModel, new EventBus());
-                
-                log('Component created successfully', 'success');
-                log(`Component container: ${!!component.container}`, 'info');
-                log(`Component viewModel: ${!!component.viewModel}`, 'info');
-                
-                // Test mounting
-                component.mount();
-                log('Component mounted successfully', 'success');
-                
-                // Test finding elements
-                const refreshBtn = component.findElement('.refresh-btn');
-                log(`Found refresh button: ${!!refreshBtn}`, 'info');
-                
-                // Test event listener setup
-                component.setupEventListeners();
-                log('Event listeners set up successfully', 'success');
-                
-                // Clean up
-                component.unmount();
-                log('Component unmounted successfully', 'success');
-                
-            } catch (error) {
-                log(`Component test failed: ${error.message}`, 'error');
-                console.error('Component test error:', error);
-            }
-        }
-        
-        // Initialize when page loads
-        document.addEventListener('DOMContentLoaded', function() {
-            log('Page loaded, ready for testing');
-            
-            // Test if the refresh button exists
-            const refreshBtn = document.getElementById('refresh-cluster-btn');
-            if (refreshBtn) {
-                log('Refresh button found on page load', 'success');
-            } else {
-                log('Refresh button NOT found on page load', 'error');
-            }
-        });
-        
-        // Global error handler
-        window.addEventListener('error', function(event) {
-            log(`Global error: ${event.error}`, 'error');
-        });
-        
-        // Global unhandled promise rejection handler
-        window.addEventListener('unhandledrejection', function(event) {
-            log(`Unhandled promise rejection: ${event.reason}`, 'error');
-        });
-    </script>
-</body>
-</html> 

public/test-state-preservation.html

@@ -1,419 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SPORE UI - State Preservation Test</title>
-    <link rel="stylesheet" href="styles.css">
-    <style>
-        .test-panel {
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            padding: 20px;
-            margin: 20px 0;
-        }
-        
-        .test-controls {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
-        }
-        
-        .test-button {
-            padding: 8px 16px;
-            border: none;
-            border-radius: 4px;
-            background: #007bff;
-            color: white;
-            cursor: pointer;
-            font-size: 14px;
-        }
-        
-        .test-button:hover {
-            background: #0056b3;
-        }
-        
-        .test-button.danger {
-            background: #dc3545;
-        }
-        
-        .test-button.danger:hover {
-            background: #c82333;
-        }
-        
-        .test-button.success {
-            background: #28a745;
-        }
-        
-        .test-button.success:hover {
-            background: #218838;
-        }
-        
-        .test-info {
-            background: #e9ecef;
-            border: 1px solid #ced4da;
-            border-radius: 4px;
-            padding: 15px;
-            margin: 15px 0;
-        }
-        
-        .test-info h4 {
-            margin-top: 0;
-            color: #495057;
-        }
-        
-        .state-indicator {
-            display: inline-block;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: bold;
-            margin-left: 10px;
-        }
-        
-        .state-preserved {
-            background: #d4edda;
-            color: #155724;
-        }
-        
-        .state-lost {
-            background: #f8d7da;
-            color: #721c24;
-        }
-        
-        .log-container {
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            border-radius: 4px;
-            padding: 15px;
-            max-height: 300px;
-            overflow-y: auto;
-            font-family: monospace;
-            font-size: 12px;
-            margin-top: 20px;
-        }
-        
-        .log-entry {
-            margin: 5px 0;
-            padding: 5px;
-            border-radius: 3px;
-        }
-        
-        .log-info { background: #d1ecf1; color: #0c5460; }
-        .log-success { background: #d4edda; color: #155724; }
-        .log-warning { background: #fff3cd; color: #856404; }
-        .log-error { background: #f8d7da; color: #721c24; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>🧪 SPORE UI State Preservation Test</h1>
-        
-        <div class="test-panel">
-            <h3>Test Controls</h3>
-            <div class="test-controls">
-                <button class="test-button" onclick="testStatePreservation()">
-                    🔄 Test Data Refresh (Preserve State)
-                </button>
-                <button class="test-button danger" onclick="testFullRerender()">
-                    🗑️ Test Full Re-render (Lose State)
-                </button>
-                <button class="test-button success" onclick="expandAllCards()">
-                    📖 Expand All Cards
-                </button>
-                <button class="test-button" onclick="changeAllTabs()">
-                    🏷️ Change All Tabs
-                </button>
-                <button class="test-button" onclick="testManualDataLoad()">
-                    📡 Test Manual Data Load
-                </button>
-                <button class="test-button" onclick="debugComponentState()">
-                    🐛 Debug Component State
-                </button>
-                <button class="test-button" onclick="testManualRefresh()">
-                    🔧 Test Manual Refresh
-                </button>
-                <button class="test-button" onclick="clearLog()">
-                    🧹 Clear Log
-                </button>
-            </div>
-            
-            <div class="test-info">
-                <h4>What This Test Demonstrates:</h4>
-                <ul>
-                    <li><strong>State Preservation:</strong> When data is refreshed, expanded cards and active tabs are maintained</li>
-                    <li><strong>Partial Updates:</strong> Only changed data is updated, not entire components</li>
-                    <li><strong>UI State Persistence:</strong> User interactions (expanded cards, active tabs) are preserved across refreshes</li>
-                    <li><strong>Smart Updates:</strong> The system detects when data has actually changed and only updates what's necessary</li>
-                </ul>
-            </div>
-        </div>
-        
-        <div class="test-panel">
-            <h3>Current State Indicators</h3>
-            <div>
-                <strong>Expanded Cards:</strong>
-                <span class="state-indicator" id="expanded-count">0</span>
-            </div>
-            <div>
-                <strong>Active Tabs:</strong>
-                <span class="state-indicator" id="active-tabs-count">0</span>
-            </div>
-            <div>
-                <strong>Last Update:</strong>
-                <span class="state-indicator" id="last-update">Never</span>
-            </div>
-        </div>
-        
-        <div class="test-panel">
-            <h3>Test Log</h3>
-            <div class="log-container" id="test-log">
-                <div class="log-entry log-info">Test log initialized. Use the test controls above to test state preservation.</div>
-            </div>
-        </div>
-        
-        <!-- Include the actual SPORE UI components for testing -->
-        <div id="cluster-view" class="view-content active">
-            <div class="primary-node-info">
-                <h3>Primary Node</h3>
-                <div id="primary-node-ip">🔍 Discovering...</div>
-                <button class="primary-node-refresh">🔄 Refresh</button>
-            </div>
-            
-            <div id="cluster-members-container">
-                <h3>Cluster Members</h3>
-                <button class="refresh-btn">🔄 Refresh Members</button>
-                <div id="members-list">
-                    <!-- Members will be populated here -->
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Include SPORE UI framework and components -->
-    <script src="framework.js"></script>
-    <script src="view-models.js"></script>
-    <script src="components.js"></script>
-    <script src="api-client.js"></script>
-    
-    <script>
-        // Test state preservation functionality
-        let testLog = [];
-        let expandedCardsCount = 0;
-        let activeTabsCount = 0;
-        
-        function log(message, type = 'info') {
-            const timestamp = new Date().toLocaleTimeString();
-            const logEntry = document.createElement('div');
-            logEntry.className = `log-entry log-${type}`;
-            logEntry.textContent = `[${timestamp}] ${message}`;
-            
-            const logContainer = document.getElementById('test-log');
-            logContainer.appendChild(logEntry);
-            logContainer.scrollTop = logContainer.scrollHeight;
-            
-            testLog.push({ timestamp, message, type });
-        }
-        
-        function updateStateIndicators() {
-            document.getElementById('expanded-count').textContent = expandedCardsCount;
-            document.getElementById('active-tabs-count').textContent = activeTabsCount;
-            document.getElementById('last-update').textContent = new Date().toLocaleTimeString();
-        }
-        
-        function testStatePreservation() {
-            log('🧪 Testing state preservation during data refresh...', 'info');
-            
-            // Simulate a data refresh that preserves state
-            setTimeout(() => {
-                log('✅ Data refresh completed with state preservation', 'success');
-                log('📊 Expanded cards maintained: ' + expandedCardsCount, 'info');
-                log('🏷️ Active tabs maintained: ' + activeTabsCount, 'info');
-                updateStateIndicators();
-            }, 1000);
-        }
-        
-        function testFullRerender() {
-            log('🗑️ Testing full re-render (this would lose state in old system)...', 'warning');
-            
-            // Simulate what would happen in the old system
-            setTimeout(() => {
-                log('❌ Full re-render completed - state would be lost in old system', 'error');
-                log('💡 In new system, this preserves state automatically', 'info');
-                updateStateIndicators();
-            }, 1000);
-        }
-        
-        function expandAllCards() {
-            log('📖 Expanding all cluster member cards...', 'info');
-            expandedCardsCount = 3; // Simulate 3 expanded cards
-            updateStateIndicators();
-            log('✅ All cards expanded. State will be preserved during refreshes.', 'success');
-        }
-        
-        function changeAllTabs() {
-            log('🏷️ Changing all active tabs to different values...', 'info');
-            activeTabsCount = 3; // Simulate 3 active tabs
-            updateStateIndicators();
-            log('✅ All tabs changed. Active tab states will be preserved during refreshes.', 'success');
-        }
-        
-        function clearLog() {
-            document.getElementById('test-log').innerHTML = '';
-            testLog = [];
-            log('🧹 Test log cleared', 'info');
-        }
-        
-        // Test manual data loading
-        async function testManualDataLoad() {
-            log('📡 Testing manual data load...', 'info');
-            
-            try {
-                // Test if we can manually trigger the cluster view model
-                if (window.app && window.app.currentView && window.app.currentView.viewModel) {
-                    const viewModel = window.app.currentView.viewModel;
-                    log('✅ Found cluster view model, attempting to load data...', 'info');
-                    
-                    if (viewModel.updateClusterMembers && typeof viewModel.updateClusterMembers === 'function') {
-                        await viewModel.updateClusterMembers();
-                        log('✅ Manual data load completed', 'success');
-                    } else {
-                        log('❌ updateClusterMembers method not found on view model', 'error');
-                    }
-                } else {
-                    log('❌ No cluster view model found', 'error');
-                }
-            } catch (error) {
-                log(`❌ Manual data load failed: ${error.message}`, 'error');
-            }
-        }
-        
-        // Debug component state
-        function debugComponentState() {
-            log('🐛 Debugging component state...', 'info');
-            
-            try {
-                if (window.app && window.app.currentView && window.app.currentView.clusterMembersComponent) {
-                    const component = window.app.currentView.clusterMembersComponent;
-                    log('✅ Found cluster members component, checking state...', 'info');
-                    
-                    if (component.debugState && typeof component.debugState === 'function') {
-                        const state = component.debugState();
-                        log('📊 Component state:', 'info');
-                        log(`   - Members: ${state.members?.length || 0}`, 'info');
-                        log(`   - Loading: ${state.isLoading}`, 'info');
-                        log(`   - Error: ${state.error || 'none'}`, 'info');
-                        log(`   - Expanded cards: ${state.expandedCards?.size || 0}`, 'info');
-                        log(`   - Active tabs: ${state.activeTabs?.size || 0}`, 'info');
-                    } else {
-                        log('❌ debugState method not found on component', 'error');
-                    }
-                } else {
-                    log('❌ No cluster members component found', 'error');
-                }
-            } catch (error) {
-                log(`❌ Debug failed: ${error.message}`, 'error');
-            }
-        }
-        
-        // Test manual refresh
-        async function testManualRefresh() {
-            log('🔧 Testing manual refresh...', 'info');
-            
-            try {
-                if (window.app && window.app.currentView && window.app.currentView.clusterMembersComponent) {
-                    const component = window.app.currentView.clusterMembersComponent;
-                    log('✅ Found cluster members component, testing manual refresh...', 'info');
-                    
-                    if (component.manualRefresh && typeof component.manualRefresh === 'function') {
-                        await component.manualRefresh();
-                        log('✅ Manual refresh completed', 'success');
-                    } else {
-                        log('❌ manualRefresh method not found on component', 'error');
-                    }
-                } else {
-                    log('❌ No cluster members component found', 'error');
-                }
-            } catch (error) {
-                log(`❌ Manual refresh failed: ${error.message}`, 'error');
-            }
-        }
-        
-        // Initialize test
-        document.addEventListener('DOMContentLoaded', function() {
-            log('🚀 SPORE UI State Preservation Test initialized', 'success');
-            log('💡 This demonstrates how the new system preserves UI state during data refreshes', 'info');
-            updateStateIndicators();
-            
-            // Test API client functionality
-            testAPIClient();
-        });
-        
-        // Test API client functionality
-        async function testAPIClient() {
-            try {
-                log('🧪 Testing API client functionality...', 'info');
-                
-                const response = await window.apiClient.getClusterMembers();
-                log(`✅ API client test successful. Found ${response.members?.length || 0} cluster members`, 'success');
-                
-                if (response.members && response.members.length > 0) {
-                    response.members.forEach(member => {
-                        log(`📱 Member: ${member.hostname || member.ip} (${member.status})`, 'info');
-                    });
-                }
-                
-                // Test discovery info
-                const discoveryInfo = await window.apiClient.getDiscoveryInfo();
-                log(`🔍 Discovery info: Primary node ${discoveryInfo.primaryNode || 'none'}, Total nodes: ${discoveryInfo.totalNodes}`, 'info');
-                
-            } catch (error) {
-                log(`❌ API client test failed: ${error.message}`, 'error');
-            }
-        }
-        
-        // Mock API client for testing
-        if (!window.apiClient) {
-            window.apiClient = {
-                getClusterMembers: async () => {
-                    return {
-                        members: [
-                            { ip: '192.168.1.100', hostname: 'Node-1', status: 'active', latency: 15 },
-                            { ip: '192.168.1.101', hostname: 'Node-2', status: 'active', latency: 22 },
-                            { ip: '192.168.1.102', hostname: 'Node-3', status: 'offline', latency: null }
-                        ]
-                    };
-                },
-                getDiscoveryInfo: async () => {
-                    return {
-                        primaryNode: '192.168.1.100',
-                        clientInitialized: true,
-                        totalNodes: 3
-                    };
-                },
-                getNodeStatus: async (ip) => {
-                    return {
-                        freeHeap: 102400,
-                        chipId: 'ESP32-' + ip.split('.').pop(),
-                        sdkVersion: 'v4.4.2',
-                        cpuFreqMHz: 240,
-                        flashChipSize: 4194304,
-                        api: [
-                            { method: 1, uri: '/status' },
-                            { method: 2, uri: '/config' }
-                        ]
-                    };
-                },
-                getTasksStatus: async () => {
-                    return [
-                        { name: 'Heartbeat', running: true, interval: 5000, enabled: true },
-                        { name: 'DataSync', running: false, interval: 30000, enabled: true }
-                    ];
-                }
-            };
-        }
-    </script>
-</body>
-</html> 

public/test-tabs.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tab Test</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div class="container">
-        <h1>Tab Active State Test</h1>
-        
-        <div class="tabs-container">
-            <div class="tabs-header">
-                <button class="tab-button active" data-tab="status">Status</button>
-                <button class="tab-button" data-tab="endpoints">Endpoints</button>
-                <button class="tab-button" data-tab="tasks">Tasks</button>
-                <button class="tab-button" data-tab="firmware">Firmware</button>
-            </div>
-            
-            <div class="tab-content active" id="status-tab">
-                <h3>Status Tab</h3>
-                <p>This is the status tab content.</p>
-            </div>
-            
-            <div class="tab-content" id="endpoints-tab">
-                <h3>Endpoints Tab</h3>
-                <p>This is the endpoints tab content.</p>
-            </div>
-            
-            <div class="tab-content" id="tasks-tab">
-                <h3>Tasks Tab</h3>
-                <p>This is the tasks tab content.</p>
-            </div>
-            
-            <div class="tab-content" id="firmware-tab">
-                <h3>Firmware Tab</h3>
-                <p>This is the firmware tab content.</p>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // Simple tab functionality test
-        document.addEventListener('DOMContentLoaded', function() {
-            const tabButtons = document.querySelectorAll('.tab-button');
-            const tabContents = document.querySelectorAll('.tab-content');
-            
-            tabButtons.forEach(button => {
-                button.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    
-                    const targetTab = this.dataset.tab;
-                    
-                    // Remove active class from all buttons and contents
-                    tabButtons.forEach(btn => btn.classList.remove('active'));
-                    tabContents.forEach(content => content.classList.remove('active'));
-                    
-                    // Add active class to clicked button and corresponding content
-                    this.classList.add('active');
-                    const targetContent = document.querySelector(`#${targetTab}-tab`);
-                    if (targetContent) {
-                        targetContent.classList.add('active');
-                    }
-                    
-                    console.log('Tab switched to:', targetTab);
-                });
-            });
-        });
-    </script>
-</body>
-</html> 

public/test-topology-debug.html

@@ -1,296 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Debug Members Component</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        .container { max-width: 800px; margin: 0 auto; }
-        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; }
-        button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; cursor: pointer; }
-        button:hover { background: #0056b3; }
-        #graph-container { width: 600px; height: 400px; border: 1px solid #ccc; margin: 20px 0; }
-        .status { padding: 10px; margin: 10px 0; border-radius: 4px; }
-        .success { background: #d4edda; color: #155724; }
-        .error { background: #f8d7da; color: #721c24; }
-        .info { background: #d1ecf1; color: #0c5460; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>🐛 Debug Members Component</h1>
-        
-        <div class="test-section">
-            <h3>Component Test</h3>
-            <p>Testing if the TopologyGraphComponent can be created and initialized.</p>
-            <button onclick="testComponentCreation()">Test Component Creation</button>
-            <button onclick="testInitialization()">Test Initialization</button>
-            <button onclick="testMount()">Test Mount</button>
-            <button onclick="clearTest()">Clear Test</button>
-            <div id="status"></div>
-        </div>
-        
-        <div class="test-section">
-            <h3>Graph Container</h3>
-            <div id="graph-container">
-                <div style="text-align: center; padding: 50px; color: #666;">
-                    Graph will appear here after testing
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let testComponent = null;
-
-        function showStatus(message, type = 'info') {
-            const statusDiv = document.getElementById('status');
-            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
-        }
-
-        // Mock base Component class
-        class MockComponent {
-            constructor(container, viewModel, eventBus) {
-                this.container = container;
-                this.viewModel = viewModel;
-                this.eventBus = eventBus;
-                this.isMounted = false;
-                this.isInitialized = false;
-            }
-
-            async initialize() {
-                console.log('MockComponent: initialize called');
-                this.isInitialized = true;
-            }
-
-            mount() {
-                console.log('MockComponent: mount called');
-                this.isMounted = true;
-            }
-
-            setupEventListeners() {
-                console.log('MockComponent: setupEventListeners called');
-            }
-
-            setupViewModelListeners() {
-                console.log('MockComponent: setupViewModelListeners called');
-            }
-
-            render() {
-                console.log('MockComponent: render called');
-            }
-        }
-
-        // Mock ViewModel
-        class MockViewModel {
-            constructor() {
-                this._data = {
-                    nodes: [],
-                    links: [],
-                    isLoading: false,
-                    error: null
-                };
-            }
-
-            get(property) {
-                return this._data[property];
-            }
-
-            set(property, value) {
-                this._data[property] = value;
-            }
-
-            subscribe(property, callback) {
-                console.log(`MockViewModel: Subscribing to ${property}`);
-            }
-
-            async updateNetworkTopology() {
-                console.log('MockViewModel: updateNetworkTopology called');
-                // Simulate some data
-                this.set('nodes', [
-                    { id: '1', hostname: 'Test Node 1', ip: '192.168.1.1', status: 'ACTIVE' },
-                    { id: '2', hostname: 'Test Node 2', ip: '192.168.1.2', status: 'ACTIVE' }
-                ]);
-                this.set('links', [
-                    { source: '1', target: '2', latency: 5 }
-                ]);
-            }
-        }
-
-        // Test TopologyGraphComponent (simplified version)
-        class TestTopologyGraphComponent extends MockComponent {
-            constructor(container, viewModel, eventBus) {
-                super(container, viewModel, eventBus);
-                console.log('TestTopologyGraphComponent: Constructor called');
-                this.svg = null;
-                this.simulation = null;
-                this.zoom = null;
-                this.width = 600;
-                this.height = 400;
-                this.isInitialized = false;
-            }
-
-            // Override mount to ensure proper initialization
-            mount() {
-                if (this.isMounted) return;
-                
-                console.log('TestTopologyGraphComponent: Starting mount...');
-                
-                // Call initialize if not already done
-                if (!this.isInitialized) {
-                    console.log('TestTopologyGraphComponent: Initializing during mount...');
-                    this.initialize().then(() => {
-                        // Complete mount after initialization
-                        this.completeMount();
-                    }).catch(error => {
-                        console.error('TestTopologyGraphComponent: Initialization failed during mount:', error);
-                        // Still complete mount to prevent blocking
-                        this.completeMount();
-                    });
-                } else {
-                    this.completeMount();
-                }
-            }
-
-            completeMount() {
-                this.isMounted = true;
-                this.setupEventListeners();
-                this.setupViewModelListeners();
-                this.render();
-                
-                console.log('TestTopologyGraphComponent: Mounted successfully');
-            }
-
-            async initialize() {
-                console.log('TestTopologyGraphComponent: Initializing...');
-                await super.initialize();
-                
-                // Set up the SVG container
-                this.setupSVG();
-                
-                // Mark as initialized
-                this.isInitialized = true;
-                
-                console.log('TestTopologyGraphComponent: Initialization completed');
-            }
-
-            setupSVG() {
-                const container = document.getElementById('graph-container');
-                if (!container) {
-                    console.error('TestTopologyGraphComponent: Graph container not found');
-                    return;
-                }
-
-                // Clear existing content
-                container.innerHTML = '';
-
-                // Create SVG element
-                this.svg = d3.select(container)
-                    .append('svg')
-                    .attr('width', this.width)
-                    .attr('height', this.height)
-                    .style('border', '1px solid #ddd')
-                    .style('background', '#f9f9f9');
-
-                this.svg.append('g');
-                
-                console.log('TestTopologyGraphComponent: SVG setup completed');
-            }
-
-            render() {
-                console.log('TestTopologyGraphComponent: render called');
-                // Simple render for testing
-                if (this.svg) {
-                    const svgGroup = this.svg.select('g');
-                    svgGroup.append('text')
-                        .attr('x', 300)
-                        .attr('y', 200)
-                        .attr('text-anchor', 'middle')
-                        .attr('font-size', '16px')
-                        .text('Component Rendered Successfully!');
-                }
-            }
-        }
-
-        function testComponentCreation() {
-            try {
-                showStatus('🔄 Testing component creation...', 'info');
-                
-                const mockViewModel = new MockViewModel();
-                const mockEventBus = {};
-                
-                testComponent = new TestTopologyGraphComponent(
-                    document.getElementById('graph-container'),
-                    mockViewModel,
-                    mockEventBus
-                );
-                
-                showStatus('✅ Component created successfully', 'success');
-                console.log('Component created:', testComponent);
-                
-            } catch (error) {
-                console.error('Component creation failed:', error);
-                showStatus(`❌ Component creation failed: ${error.message}`, 'error');
-            }
-        }
-
-        function testInitialization() {
-            if (!testComponent) {
-                showStatus('❌ No component created. Run component creation test first.', 'error');
-                return;
-            }
-
-            try {
-                showStatus('🔄 Testing initialization...', 'info');
-                
-                testComponent.initialize().then(() => {
-                    showStatus('✅ Component initialized successfully', 'success');
-                }).catch(error => {
-                    console.error('Initialization failed:', error);
-                    showStatus(`❌ Initialization failed: ${error.message}`, 'error');
-                });
-                
-            } catch (error) {
-                console.error('Initialization test failed:', error);
-                showStatus(`❌ Initialization test failed: ${error.message}`, 'error');
-            }
-        }
-
-        function testMount() {
-            if (!testComponent) {
-                showStatus('❌ No component created. Run component creation test first.', 'error');
-                return;
-            }
-
-            try {
-                showStatus('🔄 Testing mount...', 'info');
-                
-                testComponent.mount();
-                
-                showStatus('✅ Component mounted successfully', 'success');
-                
-            } catch (error) {
-                console.error('Mount test failed:', error);
-                showStatus(`❌ Mount test failed: ${error.message}`, 'error');
-            }
-        }
-
-        function clearTest() {
-            if (testComponent) {
-                testComponent = null;
-            }
-            document.getElementById('graph-container').innerHTML = 
-                '<div style="text-align: center; padding: 50px; color: #666;">Graph will appear here after testing</div>';
-            document.getElementById('status').innerHTML = '';
-            showStatus('🧹 Test cleared', 'info');
-        }
-
-        // Auto-test on load
-        window.addEventListener('load', () => {
-            showStatus('🚀 Debug page loaded. Click "Test Component Creation" to begin.', 'info');
-        });
-    </script>
-</body>
-</html> 

public/test-topology-fix.html

@@ -1,286 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test Members View Fix</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        .container { max-width: 800px; margin: 0 auto; }
-        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; }
-        button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; cursor: pointer; }
-        button:hover { background: #0056b3; }
-        #graph-container { width: 600px; height: 400px; border: 1px solid #ccc; margin: 20px 0; }
-        .status { padding: 10px; margin: 10px 0; border-radius: 4px; }
-        .success { background: #d4edda; color: #155724; }
-        .error { background: #f8d7da; color: #721c24; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>🧪 Test Members View Fix</h1>
-        
-        <div class="test-section">
-            <h3>Initialization Test</h3>
-            <p>Testing the fixed initialization order for the Members view component.</p>
-            <button onclick="testInitialization()">Test Initialization</button>
-            <button onclick="testDataUpdate()">Test Data Update</button>
-            <button onclick="clearTest()">Clear Test</button>
-            <div id="status"></div>
-        </div>
-        
-        <div class="test-section">
-            <h3>Graph Container</h3>
-            <div id="graph-container">
-                <div style="text-align: center; padding: 50px; color: #666;">
-                    Graph will appear here after initialization
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let testComponent = null;
-        let testViewModel = null;
-
-        function showStatus(message, type = 'success') {
-            const statusDiv = document.getElementById('status');
-            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
-        }
-
-        // Mock ViewModel for testing
-        class TestViewModel {
-            constructor() {
-                this._data = {
-                    nodes: [],
-                    links: [],
-                    isLoading: false,
-                    error: null
-                };
-                this._listeners = new Map();
-            }
-
-            get(property) {
-                return this._data[property];
-            }
-
-            set(property, value) {
-                this._data[property] = value;
-                this._notifyListeners(property, value);
-            }
-
-            subscribe(property, callback) {
-                if (!this._listeners.has(property)) {
-                    this._listeners.set(property, []);
-                }
-                this._listeners.get(property).push(callback);
-            }
-
-            _notifyListeners(property, value) {
-                if (this._listeners.has(property)) {
-                    this._listeners.get(property).forEach(callback => {
-                        try {
-                            callback(value);
-                        } catch (error) {
-                            console.error(`Error in property listener for ${property}:`, error);
-                        }
-                    });
-                }
-            }
-        }
-
-        // Test Component for testing
-        class TestMembersComponent {
-            constructor(container, viewModel) {
-                this.container = container;
-                this.viewModel = viewModel;
-                this.svg = null;
-                this.isInitialized = false;
-            }
-
-            async initialize() {
-                console.log('TestMembersComponent: Initializing...');
-                
-                // Simulate async initialization
-                await new Promise(resolve => setTimeout(resolve, 100));
-                
-                // Set up SVG
-                this.setupSVG();
-                
-                // Mark as initialized
-                this.isInitialized = true;
-                
-                // Set up listeners AFTER initialization
-                this.viewModel.subscribe('nodes', this.renderGraph.bind(this));
-                this.viewModel.subscribe('links', this.renderGraph.bind(this));
-                
-                console.log('TestMembersComponent: Initialization completed');
-                showStatus('✅ Component initialized successfully', 'success');
-            }
-
-            setupSVG() {
-                const container = document.getElementById('graph-container');
-                container.innerHTML = '';
-                
-                this.svg = d3.select(container)
-                    .append('svg')
-                    .attr('width', 600)
-                    .attr('height', 400)
-                    .style('border', '1px solid #ddd')
-                    .style('background', '#f9f9f9');
-                
-                this.svg.append('g');
-                console.log('TestMembersComponent: SVG setup completed');
-            }
-
-            renderGraph() {
-                try {
-                    // Check if component is initialized
-                    if (!this.isInitialized) {
-                        console.log('TestMembersComponent: Component not yet initialized, skipping render');
-                        return;
-                    }
-
-                    const nodes = this.viewModel.get('nodes');
-                    const links = this.viewModel.get('links');
-
-                    // Check if SVG is initialized
-                    if (!this.svg) {
-                        console.log('TestMembersComponent: SVG not initialized yet, setting up SVG first');
-                        this.setupSVG();
-                    }
-
-                    if (!nodes || nodes.length === 0) {
-                        this.showNoData();
-                        return;
-                    }
-
-                    console.log('TestMembersComponent: Rendering graph with', nodes.length, 'nodes and', links.length, 'links');
-
-                    const svgGroup = this.svg.select('g');
-                    if (!svgGroup || svgGroup.empty()) {
-                        console.error('TestMembersComponent: SVG group not found, cannot render graph');
-                        return;
-                    }
-
-                    // Clear existing elements
-                    svgGroup.selectAll('*').remove();
-
-                    // Create simple nodes
-                    const node = svgGroup.append('g')
-                        .selectAll('g')
-                        .data(nodes)
-                        .enter().append('g')
-                        .attr('class', 'node')
-                        .attr('transform', (d, i) => `translate(${100 + i * 150}, 200)`);
-
-                    node.append('circle')
-                        .attr('r', 20)
-                        .attr('fill', '#4CAF50');
-
-                    node.append('text')
-                        .text(d => d.name)
-                        .attr('x', 0)
-                        .attr('y', 30)
-                        .attr('text-anchor', 'middle')
-                        .attr('font-size', '12px');
-
-                    // Create simple links
-                    if (links.length > 0) {
-                        const link = svgGroup.append('g')
-                            .selectAll('line')
-                            .data(links)
-                            .enter().append('line')
-                            .attr('stroke', '#999')
-                            .attr('stroke-width', 2)
-                            .attr('x1', (d, i) => 100 + i * 150)
-                            .attr('y1', 200)
-                            .attr('x2', (d, i) => 100 + (i + 1) * 150)
-                            .attr('y2', 200);
-                    }
-
-                    showStatus('✅ Graph rendered successfully', 'success');
-                    
-                } catch (error) {
-                    console.error('Failed to render graph:', error);
-                    showStatus(`❌ Graph rendering failed: ${error.message}`, 'error');
-                }
-            }
-
-            showNoData() {
-                const container = document.getElementById('graph-container');
-                container.innerHTML = '<div style="text-align: center; padding: 50px; color: #666;">No data available</div>';
-            }
-        }
-
-        async function testInitialization() {
-            try {
-                showStatus('🔄 Testing initialization...', 'success');
-                
-                // Create test view model and component
-                testViewModel = new TestViewModel();
-                testComponent = new TestMembersComponent(
-                    document.getElementById('graph-container'),
-                    testViewModel
-                );
-                
-                // Initialize component
-                await testComponent.initialize();
-                
-            } catch (error) {
-                console.error('Initialization test failed:', error);
-                showStatus(`❌ Initialization test failed: ${error.message}`, 'error');
-            }
-        }
-
-        function testDataUpdate() {
-            if (!testComponent || !testComponent.isInitialized) {
-                showStatus('❌ Component not initialized. Run initialization test first.', 'error');
-                return;
-            }
-
-            try {
-                showStatus('🔄 Testing data update...', 'success');
-                
-                // Update with test data
-                const testNodes = [
-                    { name: 'Node 1', id: '1' },
-                    { name: 'Node 2', id: '2' },
-                    { name: 'Node 3', id: '3' }
-                ];
-                
-                const testLinks = [
-                    { source: '1', target: '2' },
-                    { source: '2', target: '3' }
-                ];
-                
-                testViewModel.set('nodes', testNodes);
-                testViewModel.set('links', testLinks);
-                
-            } catch (error) {
-                console.error('Data update test failed:', error);
-                showStatus(`❌ Data update test failed: ${error.message}`, 'error');
-            }
-        }
-
-        function clearTest() {
-            if (testComponent) {
-                testComponent = null;
-            }
-            if (testViewModel) {
-                testViewModel = null;
-            }
-            document.getElementById('graph-container').innerHTML = 
-                '<div style="text-align: center; padding: 50px; color: #666;">Graph will appear here after initialization</div>';
-            document.getElementById('status').innerHTML = '';
-            showStatus('🧹 Test cleared', 'success');
-        }
-
-        // Auto-test on load
-        window.addEventListener('load', () => {
-            showStatus('🚀 Test page loaded. Click "Test Initialization" to begin.', 'success');
-        });
-    </script>
-</body>
-</html> 

public/test-topology-overlay.html

@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test Topology with Member Card Overlay</title>
-    <link rel="stylesheet" href="styles.css">
-    <script src="./d3.v7.min.js"></script>
-</head>
-<body>
-    <div class="container">
-        <h1>Test Topology with Member Card Overlay</h1>
-        
-        <div class="test-section">
-            <h2>Topology View with Clickable Nodes</h2>
-            <p>Click on any node in the topology to see the member card overlay.</p>
-            <button id="refresh-topology-btn">Refresh Topology</button>
-        </div>
-        
-        <div id="topology-graph-container">
-            <div class="loading">
-                <div>Loading network topology...</div>
-            </div>
-        </div>
-        
-        <div id="member-card-overlay" class="member-card-overlay"></div>
-    </div>
-
-    <script src="./demo-topology-data.js"></script>
-    <script src="./framework.js"></script>
-    <script src="./components.js"></script>
-    <script>
-        // Test the topology view with member card overlay
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log('Setting up test topology with member card overlay...');
-            
-            // Override the API client with demo data
-            window.apiClient = window.demoApiClient;
-            
-            // Create topology view model
-            const topologyVM = new TopologyViewModel();
-            
-            // Create the topology component
-            const topologyComponent = new TopologyGraphComponent(
-                document.getElementById('topology-graph-container'), 
-                topologyVM, 
-                new EventBus()
-            );
-            
-            // Mount the component
-            topologyComponent.mount();
-            
-            // Refresh button
-            const refreshBtn = document.getElementById('refresh-topology-btn');
-            refreshBtn.addEventListener('click', function() {
-                topologyVM.updateNetworkTopology();
-            });
-            
-            console.log('Test topology setup complete');
-        });
-    </script>
-</body>
-</html> 

public/test-topology-view.html

@@ -1,254 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test Members View</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-            background: #f5f5f5;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        }
-        .test-section {
-            margin-bottom: 30px;
-            padding: 20px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-        }
-        .test-section h3 {
-            margin-top: 0;
-            color: #333;
-        }
-        button {
-            background: #2196F3;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 6px;
-            cursor: pointer;
-            margin: 5px;
-        }
-        button:hover {
-            background: #1976D2;
-        }
-        #graph-container {
-            width: 800px;
-            height: 600px;
-            border: 1px solid #ddd;
-            background: #f9f9f9;
-            margin: 20px 0;
-        }
-        .status {
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 4px;
-        }
-        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
-        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
-        .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>🧪 Test Members View</h1>
-        
-        <div class="test-section">
-            <h3>D3.js Integration Test</h3>
-            <p>Testing D3.js library integration and basic force-directed graph functionality.</p>
-            <button onclick="testD3Integration()">Test D3.js Integration</button>
-            <button onclick="testForceGraph()">Test Force Graph</button>
-            <button onclick="clearGraph()">Clear Graph</button>
-            <div id="status"></div>
-        </div>
-        
-        <div class="test-section">
-            <h3>Graph Visualization</h3>
-            <div id="graph-container"></div>
-        </div>
-    </div>
-
-    <script>
-        let svg = null;
-        let simulation = null;
-
-        function showStatus(message, type = 'info') {
-            const statusDiv = document.getElementById('status');
-            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
-        }
-
-        function testD3Integration() {
-            try {
-                if (typeof d3 === 'undefined') {
-                    throw new Error('D3.js is not loaded');
-                }
-                
-                const version = d3.version;
-                showStatus(`✅ D3.js v${version} loaded successfully!`, 'success');
-                
-                // Test basic D3 functionality
-                const testData = [1, 2, 3, 4, 5];
-                const testSelection = d3.select('#graph-container');
-                testSelection.append('div')
-                    .attr('class', 'test-div')
-                    .text('D3 selection test');
-                
-                showStatus('✅ D3.js basic functionality working!', 'success');
-                
-            } catch (error) {
-                showStatus(`❌ D3.js test failed: ${error.message}`, 'error');
-            }
-        }
-
-        function testForceGraph() {
-            try {
-                if (!svg) {
-                    setupSVG();
-                }
-                
-                // Create sample data
-                const nodes = [
-                    { id: 'node1', name: 'Node 1', status: 'ACTIVE' },
-                    { id: 'node2', name: 'Node 2', status: 'ACTIVE' },
-                    { id: 'node3', name: 'Node 3', status: 'INACTIVE' },
-                    { id: 'node4', name: 'Node 4', status: 'ACTIVE' }
-                ];
-                
-                const links = [
-                    { source: 'node1', target: 'node2', latency: 5 },
-                    { source: 'node1', target: 'node3', latency: 15 },
-                    { source: 'node2', target: 'node4', latency: 8 },
-                    { source: 'node3', target: 'node4', latency: 25 }
-                ];
-                
-                renderGraph(nodes, links);
-                showStatus('✅ Force-directed graph created successfully!', 'success');
-                
-            } catch (error) {
-                showStatus(`❌ Force graph test failed: ${error.message}`, 'error');
-            }
-        }
-
-        function setupSVG() {
-            const container = document.getElementById('graph-container');
-            container.innerHTML = '';
-            
-            svg = d3.select(container)
-                .append('svg')
-                .attr('width', 800)
-                .attr('height', 600)
-                .style('border', '1px solid #ddd')
-                .style('background', '#f9f9f9');
-        }
-
-        function renderGraph(nodes, links) {
-            if (!svg) return;
-            
-            const svgGroup = svg.append('g');
-            
-            // Create links
-            const link = svgGroup.append('g')
-                .selectAll('line')
-                .data(links)
-                .enter().append('line')
-                .attr('stroke', '#999')
-                .attr('stroke-opacity', 0.6)
-                .attr('stroke-width', 2);
-            
-            // Create nodes
-            const node = svgGroup.append('g')
-                .selectAll('g')
-                .data(nodes)
-                .enter().append('g')
-                .attr('class', 'node')
-                .call(d3.drag()
-                    .on('start', dragstarted)
-                    .on('drag', dragged)
-                    .on('end', dragended));
-            
-            // Add circles to nodes
-            node.append('circle')
-                .attr('r', 8)
-                .attr('fill', d => getNodeColor(d.status));
-            
-            // Add labels
-            node.append('text')
-                .text(d => d.name)
-                .attr('x', 12)
-                .attr('y', 4)
-                .attr('font-size', '12px');
-            
-            // Set up force simulation
-            simulation = d3.forceSimulation(nodes)
-                .force('link', d3.forceLink(links).id(d => d.id).distance(100))
-                .force('charge', d3.forceManyBody().strength(-300))
-                .force('center', d3.forceCenter(400, 300));
-            
-            // Update positions on simulation tick
-            simulation.on('tick', () => {
-                link
-                    .attr('x1', d => d.source.x)
-                    .attr('y1', d => d.source.y)
-                    .attr('x2', d => d.target.x)
-                    .attr('y2', d => d.target.y);
-                
-                node
-                    .attr('transform', d => `translate(${d.x},${d.y})`);
-            });
-        }
-
-        function getNodeColor(status) {
-            switch (status) {
-                case 'ACTIVE': return '#4CAF50';
-                case 'INACTIVE': return '#FF9800';
-                default: return '#9E9E9E';
-            }
-        }
-
-        function dragstarted(event, d) {
-            if (!event.active) simulation.alphaTarget(0.3).restart();
-            d.fx = d.x;
-            d.fy = d.y;
-        }
-
-        function dragged(event, d) {
-            d.fx = event.x;
-            d.fy = event.y;
-        }
-
-        function dragended(event, d) {
-            if (!event.active) simulation.alphaTarget(0);
-            d.fx = null;
-            d.fy = null;
-        }
-
-        function clearGraph() {
-            if (svg) {
-                svg.selectAll('*').remove();
-                svg = null;
-            }
-            if (simulation) {
-                simulation.stop();
-                simulation = null;
-            }
-            showStatus('Graph cleared', 'info');
-        }
-
-        // Auto-test on load
-        window.addEventListener('load', () => {
-            setTimeout(() => {
-                testD3Integration();
-            }, 500);
-        });
-    </script>
-</body>
-</html> 

public/test-view-switching.html

@@ -1 +0,0 @@
-