Feature/redesign (#53)

## Summary

- Redesigned the dashboard with a sidebar-based layout, replacing the old flat single-page structure
- Split monolithic `styles.css` into modular CSS: `tokens.css`, `layout.css`, `components.css`
- Added primary/secondary metric hierarchy with visual weight for the detail view
- Added chart drawer for click-to-expand correlation analysis between metrics
- Enhanced single-GPU overview on the All page

Author: psalias2006

README.md

@@ -2,7 +2,7 @@
 
 # GPU Hot
 
-Real-time NVIDIA GPU monitoring dashboard. Web-based, no SSH required.
+Real-time NVIDIA GPU monitoring dashboard. Lightweight, web-based, and self-hosted.
 
 [![Python](https://img.shields.io/badge/Python-3.8+-3776AB?style=flat-square&logo=python&logoColor=white)](https://www.python.org/)
 [![Docker](https://img.shields.io/badge/Docker-Ready-2496ED?style=flat-square&logo=docker&logoColor=white)](https://www.docker.com/)
@@ -76,7 +76,7 @@ NODE_URLS=http://host:1312...  # Comma-separated node URLs (required for hub mod
 
 **Backend (`core/config.py`):**
 ```python
-UPDATE_INTERVAL = 0.5  # Polling interval
+UPDATE_INTERVAL = 0.5  # Polling interval in seconds
 PORT = 1312            # Server port
 ```
 
@@ -87,42 +87,58 @@ PORT = 1312            # Server port
 ### HTTP
 ```bash
 GET /              # Dashboard
-GET /api/gpu-data  # JSON metrics
+GET /api/gpu-data  # JSON metrics snapshot
+GET /api/version   # Version and update info
 ```
 
 ### WebSocket
 ```javascript
-socket.on('gpu_data', (data) => {
-  // Updates every 0.5s (configurable)
-  // Contains: data.gpus, data.processes, data.system
-});
+const ws = new WebSocket('ws://localhost:1312/socket.io/');
+
+ws.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  // data.gpus      — per-GPU metrics
+  // data.processes  — active GPU processes
+  // data.system     — host CPU, RAM, swap, disk, network
+};
 ```
+
 ---
 
 ## Project Structure
 
-```bash
+```
 gpu-hot/
-├── app.py                      # Flask + WebSocket server
+├── app.py                      # FastAPI server + routes
+├── version.py                  # Version info
 ├── core/
 │   ├── config.py               # Configuration
 │   ├── monitor.py              # NVML GPU monitoring
 │   ├── handlers.py             # WebSocket handlers
-│   ├── routes.py               # HTTP routes
+│   ├── hub.py                  # Multi-node hub aggregator
+│   ├── hub_handlers.py         # Hub WebSocket handlers
+│   ├── nvidia_smi_fallback.py  # nvidia-smi fallback for older GPUs
 │   └── metrics/
 │       ├── collector.py        # Metrics collection
 │       └── utils.py            # Metric utilities
 ├── static/
+│   ├── css/
+│   │   ├── tokens.css          # Design tokens (colors, spacing)
+│   │   ├── layout.css          # Page layout (sidebar, main)
+│   │   └── components.css      # UI components (cards, charts)
 │   ├── js/
-│   │   ├── charts.js           # Chart configs
-│   │   ├── gpu-cards.js        # UI components
-│   │   ├── socket-handlers.js  # WebSocket + rendering
-│   │   ├── ui.js               # View management
-│   │   └── app.js              # Init
-│   └── css/styles.css
+│   │   ├── chart-config.js     # Chart.js configurations
+│   │   ├── chart-manager.js    # Chart data + lifecycle
+│   │   ├── chart-drawer.js     # Correlation drawer
+│   │   ├── gpu-cards.js        # GPU card rendering
+│   │   ├── socket-handlers.js  # WebSocket + batched rendering
+│   │   ├── ui.js               # Sidebar navigation
+│   │   └── app.js              # Init + version check
+│   └── favicon.svg
 ├── templates/index.html
 ├── Dockerfile
-└── docker-compose.yml
+├── docker-compose.yml
+└── requirements.txt
 ```
 
 ---

core/handlers.py

@@ -55,11 +55,59 @@ async def monitor_loop(monitor, connections):
                 monitor.get_processes()
             )
 
+            # Core system metrics
+            vmem = psutil.virtual_memory()
             system_info = {
                 'cpu_percent': psutil.cpu_percent(percpu=False),
-                'memory_percent': psutil.virtual_memory().percent,
+                'memory_percent': vmem.percent,
+                'memory_total_gb': round(vmem.total / (1024 ** 3), 2),
+                'memory_used_gb': round(vmem.used / (1024 ** 3), 2),
+                'memory_available_gb': round(vmem.available / (1024 ** 3), 2),
+                'cpu_count': psutil.cpu_count(),
                 'timestamp': datetime.now().isoformat()
             }
+
+            # Swap memory
+            try:
+                swap = psutil.swap_memory()
+                system_info['swap_percent'] = swap.percent
+            except Exception:
+                pass
+
+            # CPU frequency
+            try:
+                freq = psutil.cpu_freq()
+                if freq:
+                    system_info['cpu_freq_current'] = round(freq.current, 0)
+                    system_info['cpu_freq_max'] = round(freq.max, 0)
+            except Exception:
+                pass
+
+            # Load average (Linux/Mac only)
+            try:
+                load = psutil.getloadavg()
+                system_info['load_avg_1'] = round(load[0], 2)
+                system_info['load_avg_5'] = round(load[1], 2)
+                system_info['load_avg_15'] = round(load[2], 2)
+            except (AttributeError, OSError):
+                pass
+
+            # Network I/O (cumulative bytes — frontend computes rate)
+            try:
+                net = psutil.net_io_counters()
+                system_info['net_bytes_sent'] = net.bytes_sent
+                system_info['net_bytes_recv'] = net.bytes_recv
+            except Exception:
+                pass
+
+            # Disk I/O (cumulative bytes — frontend computes rate)
+            try:
+                disk = psutil.disk_io_counters()
+                if disk:
+                    system_info['disk_read_bytes'] = disk.read_bytes
+                    system_info['disk_write_bytes'] = disk.write_bytes
+            except Exception:
+                pass
 
             data = {
                 'mode': config.MODE,

core/metrics/collector.py

@@ -193,10 +193,9 @@ def _add_fan_speeds(self, handle, data):
 
     def _add_throttling(self, handle, data):
         if throttle := safe_get(pynvml.nvmlDeviceGetCurrentClocksThrottleReasons, handle):
+            # Only report genuinely alarming throttle reasons.
+            # GPU Idle, App Settings, and SW Power Cap are normal operating conditions.
             throttle_map = [
-                (pynvml.nvmlClocksThrottleReasonGpuIdle, 'GPU Idle'),
-                (pynvml.nvmlClocksThrottleReasonApplicationsClocksSetting, 'App Settings'),
-                (pynvml.nvmlClocksThrottleReasonSwPowerCap, 'SW Power Cap'),
                 (pynvml.nvmlClocksThrottleReasonHwSlowdown, 'HW Slowdown'),
                 (pynvml.nvmlClocksThrottleReasonSwThermalSlowdown, 'SW Thermal'),
                 (pynvml.nvmlClocksThrottleReasonHwThermalSlowdown, 'HW Thermal'),