feat: improve styling, add more infos to node cards

public/scripts/components/MonitoringViewComponent.js

@@ -132,6 +132,46 @@ class MonitoringViewComponent extends Component {
         return 'utilization-red';
     }
 
+    // Format lastSeen timestamp to human readable format
+    formatLastSeen(lastSeen) {
+        if (!lastSeen) return 'Unknown';
+        
+        // lastSeen appears to be in milliseconds
+        const now = Date.now();
+        const diff = now - lastSeen;
+        
+        if (diff < 60000) { // Less than 1 minute
+            return 'Just now';
+        } else if (diff < 3600000) { // Less than 1 hour
+            const minutes = Math.floor(diff / 60000);
+            return `${minutes}m ago`;
+        } else if (diff < 86400000) { // Less than 1 day
+            const hours = Math.floor(diff / 3600000);
+            const minutes = Math.floor((diff % 3600000) / 60000);
+            return `${hours}h ${minutes}m ago`;
+        } else { // More than 1 day
+            const days = Math.floor(diff / 86400000);
+            const hours = Math.floor((diff % 86400000) / 3600000);
+            return `${days}d ${hours}h ago`;
+        }
+    }
+
+    // Format flash size in human readable format
+    formatFlashSize(bytes) {
+        if (!bytes || bytes === 0) return 'Unknown';
+        
+        const units = ['B', 'KB', 'MB', 'GB'];
+        let size = bytes;
+        let unitIndex = 0;
+        
+        while (size >= 1024 && unitIndex < units.length - 1) {
+            size /= 1024;
+            unitIndex++;
+        }
+        
+        return `${size.toFixed(1)} ${units[unitIndex]}`;
+    }
+
     // Clean up resources
     cleanup() {
         if (this.drawer) {
@@ -323,6 +363,7 @@ class MonitoringViewComponent extends Component {
     renderNodeCard(nodeData) {
         const { ip, hostname, resources, hasResources, error, resourceSource } = nodeData;
         
+        
         if (!hasResources) {
             return `
                 <div class="node-card error" data-node-ip="${ip}">
@@ -336,6 +377,12 @@ class MonitoringViewComponent extends Component {
                     <div class="node-error">
                         ${error || 'Monitoring endpoint not available'}
                     </div>
+                    ${nodeData.lastSeen ? `
+                    <div class="node-uptime">
+                        <div class="uptime-label">⏱️ Last Seen</div>
+                        <div class="uptime-value">${this.formatLastSeen(nodeData.lastSeen)}</div>
+                    </div>
+                    ` : ''}
                 </div>
             `;
         }
@@ -344,6 +391,7 @@ class MonitoringViewComponent extends Component {
         const cpu = resources?.cpu || {};
         const memory = resources?.memory || {};
         const storage = resources?.filesystem || resources?.storage || {};
+        const system = resources?.system || {};
         
         let cpuTotal, cpuAvailable, cpuUsed, cpuUtilization;
         let memoryTotal, memoryAvailable, memoryUsed, memoryUtilization;
@@ -398,6 +446,26 @@ class MonitoringViewComponent extends Component {
                     <span class="status-badge ${resourceSource === 'monitoring' ? 'success' : 'warning'}">${resourceSourceText}</span>
                 </div>
                 
+                ${system.uptime_formatted ? `
+                <div class="node-uptime">
+                    <div class="uptime-label">⏱️ Uptime</div>
+                    <div class="uptime-value">${system.uptime_formatted}</div>
+                </div>
+                ` : ''}
+                
+                <div class="node-latency">
+                    <div class="latency-label">🐢 Latency</div>
+                    <div class="latency-value">${nodeData.latency ? `${nodeData.latency}ms` : 'N/A'}</div>
+                </div>
+                <div class="latency-divider"></div>
+                
+                ${(nodeData.basic?.flashChipSize || nodeData.resources?.flashChipSize) ? `
+                <div class="node-flash">
+                    <div class="flash-label">💾 Flash</div>
+                    <div class="flash-value">${this.formatFlashSize(nodeData.basic?.flashChipSize || nodeData.resources?.flashChipSize)}</div>
+                </div>
+                ` : ''}
+                
                 <div class="node-resources">
                     <div class="resource-item">
                         <div class="resource-label">⚡ CPU</div>