It works now

app/web/static/script.js

@@ -0,0 +1,73 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const nodeGridContainer = document.getElementById('node-grid-container');
+    const nodeCountSpan = document.getElementById('node-count');
+    const POLLING_INTERVAL_MS = 3000; // Poll every 3 seconds
+
+    async function fetchNodeData() {
+        try {
+            const response = await fetch('/nodes/status');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            renderNodeGrid(data.nodes);
+        } catch (error) {
+            console.error("Error fetching node data:", error);
+            nodeGridContainer.innerHTML = '<p class="loading-message">Error loading node data. Please check server connection.</p>';
+        }
+    }
+
+    function renderNodeGrid(nodes) {
+        nodeGridContainer.innerHTML = ''; // Clear existing nodes
+        nodeCountSpan.textContent = nodes.length; // Update total node count
+
+        if (nodes.length === 0) {
+            nodeGridContainer.innerHTML = '<p class="loading-message">No nodes reporting yet. Start a client!</p>';
+            return;
+        }
+
+        nodes.forEach(node => {
+            const nodeCell = document.createElement('div');
+            nodeCell.classList.add('node-cell');
+            nodeCell.classList.add(`node-${node.health_status}`); // Apply health color class
+
+            // Truncate UUID for display
+            const displayUuid = node.uuid.substring(0, 8) + '...';
+
+            nodeCell.innerHTML = `
+                <div class="node-uuid" title="${node.uuid}">${displayUuid}</div>
+                <div class="node-status-text">Status: ${node.health_status.toUpperCase()}</div>
+                <div class="node-tooltip">
+                    <p><strong>UUID:</strong> ${node.uuid}</p>
+                    <p><strong>IP:</strong> ${node.ip}</p>
+                    <p><strong>Last Seen:</strong> ${new Date(node.last_seen).toLocaleTimeString()}</p>
+                    <p><strong>Uptime:</strong> ${node.uptime_seconds ? formatUptime(node.uptime_seconds) : 'N/A'}</p>
+                    <p><strong>Load Avg (1m, 5m, 15m):</strong> ${node.load_avg ? node.load_avg.join(', ') : 'N/A'}</p>
+                    <p><strong>Memory Usage:</strong> ${node.memory_usage_percent ? node.memory_usage_percent.toFixed(2) + '%' : 'N/A'}</p>
+                </div>
+            `;
+            nodeGridContainer.appendChild(nodeCell);
+        });
+    }
+
+    function formatUptime(seconds) {
+        const days = Math.floor(seconds / (3600 * 24));
+        seconds %= (3600 * 24);
+        const hours = Math.floor(seconds / 3600);
+        seconds %= 3600;
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = Math.floor(seconds % 60);
+
+        let parts = [];
+        if (days > 0) parts.push(`${days}d`);
+        if (hours > 0) parts.push(`${hours}h`);
+        if (minutes > 0) parts.push(`${minutes}m`);
+        if (remainingSeconds > 0 || parts.length === 0) parts.push(`${remainingSeconds}s`); // Ensure at least seconds are shown
+
+        return parts.join(' ');
+    }
+
+    // Initial fetch and then set up polling
+    fetchNodeData();
+    setInterval(fetchNodeData, POLLING_INTERVAL_MS);
+});