Add dashboard for node and server statistics

DASHBOARD.md

@@ -0,0 +1,161 @@
+# Web Dashboard Quick Start
+
+## Starting the Dashboard
+
+The dashboard is automatically started when you run:
+
+```bash
+docker compose up -d
+```
+
+This will start three services:
+1. **palladium-node** - The Palladium blockchain node
+2. **electrumx-server** - The ElectrumX server
+3. **palladium-dashboard** - The web monitoring dashboard
+
+## Accessing the Dashboard
+
+Once all services are running, access the dashboard at:
+
+**From the same machine:**
+```
+http://localhost:8080
+```
+
+**From another device on your network:**
+```
+http://<your-raspberry-pi-ip>:8080
+```
+
+To find your Raspberry Pi IP address:
+```bash
+hostname -I | awk '{print $1}'
+```
+
+## Dashboard Features
+
+### Overview Cards
+- **System Resources**: Real-time CPU, memory, and disk usage
+- **Palladium Node**: Block height, difficulty, connections, sync progress
+- **ElectrumX Server**: Active sessions, requests, subscriptions, uptime
+
+### Charts
+- **Block Time History**: Line chart showing block generation times
+- **Mempool Transactions**: Bar chart of pending transactions
+
+### Recent Blocks
+Table showing the last 10 blocks with:
+- Block height
+- Block hash
+- Timestamp
+- Block size
+- Transaction count
+
+## Auto-Refresh
+
+The dashboard automatically refreshes every 10 seconds to show the latest data.
+
+## Troubleshooting
+
+### Dashboard Not Loading
+
+1. Check if all containers are running:
+   ```bash
+   docker ps
+   ```
+
+   You should see three containers:
+   - `palladium-node`
+   - `electrumx-server`
+   - `palladium-dashboard`
+
+2. Check dashboard logs:
+   ```bash
+   docker logs palladium-dashboard
+   ```
+
+3. Check if the port is accessible:
+   ```bash
+   curl http://localhost:8080/api/health
+   ```
+
+### Services Showing as "Down"
+
+If services show as down in the dashboard:
+
+1. **Palladium Node**: May still be syncing. Check logs:
+   ```bash
+   docker logs palladium-node
+   ```
+
+2. **ElectrumX Server**: May be waiting for the node to sync. Check logs:
+   ```bash
+   docker logs electrumx-server
+   ```
+
+### Network Access Issues
+
+If you can't access from another device:
+
+1. Check firewall rules:
+   ```bash
+   sudo ufw status
+   ```
+
+2. Allow port 8080 if needed:
+   ```bash
+   sudo ufw allow 8080/tcp
+   ```
+
+3. Verify the dashboard is listening on all interfaces:
+   ```bash
+   netstat -tln | grep 8080
+   ```
+
+   Should show: `0.0.0.0:8080`
+
+## Stopping the Dashboard
+
+To stop all services including the dashboard:
+
+```bash
+docker compose down
+```
+
+To stop only the dashboard:
+
+```bash
+docker stop palladium-dashboard
+```
+
+## Rebuilding the Dashboard
+
+If you make changes to the dashboard code:
+
+```bash
+docker compose build dashboard
+docker compose up -d dashboard
+```
+
+## API Endpoints
+
+The dashboard also provides REST API endpoints:
+
+- `GET /api/health` - Health check
+- `GET /api/palladium/info` - Node information
+- `GET /api/palladium/blocks/recent` - Recent blocks
+- `GET /api/electrumx/stats` - Server statistics
+- `GET /api/system/resources` - System resources
+
+Example:
+```bash
+curl http://localhost:8080/api/health | jq
+```
+
+## Security Note
+
+The dashboard is exposed on `0.0.0.0:8080` making it accessible from your network. If you're running this on a public server, consider:
+
+1. Using a reverse proxy (nginx) with authentication
+2. Restricting access with firewall rules
+3. Using HTTPS with SSL certificates

Dockerfile.dashboard

@@ -0,0 +1,37 @@
+FROM python:3.11-slim
+
+LABEL maintainer="Palladium ElectrumX Dashboard"
+LABEL description="Web Dashboard for Palladium Node and ElectrumX Server"
+
+WORKDIR /app
+
+# Install system dependencies for building Python packages and Docker CLI
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    gcc \
+    python3-dev \
+    curl \
+    ca-certificates \
+    && install -m 0755 -d /etc/apt/keyrings \
+    && curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc \
+    && chmod a+r /etc/apt/keyrings/docker.asc \
+    && echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian bookworm stable" > /etc/apt/sources.list.d/docker.list \
+    && apt-get update \
+    && apt-get install -y --no-install-recommends docker-ce-cli \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY web-dashboard/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY web-dashboard/ .
+
+# Expose port
+EXPOSE 8080
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD python -c "import requests; requests.get('http://localhost:8080/api/health', timeout=5)"
+
+# Run the application
+CMD ["python", "app.py"]

docker-compose.yml

@@ -70,4 +70,27 @@ services:
 
     volumes:
       - ./electrumx-data:/data
-      - ./palladium-node-data/palladium.conf:/palladium-config/palladium.conf:ro
+      - ./palladium-node-data/palladium.conf:/palladium-config/palladium.conf:ro
+
+  dashboard:
+    build:
+      context: .
+      dockerfile: Dockerfile.dashboard
+    image: palladium-dashboard:local
+    container_name: palladium-dashboard
+    restart: unless-stopped
+    depends_on:
+      - palladiumd
+      - electrumx
+    ports:
+      - "0.0.0.0:8080:8080"  # Web Dashboard (accessible from network)
+
+    environment:
+      PALLADIUM_RPC_HOST: "palladiumd"
+      PALLADIUM_RPC_PORT: "2332"
+      ELECTRUMX_RPC_HOST: "electrumx"
+      ELECTRUMX_RPC_PORT: "8000"
+
+    volumes:
+      - ./palladium-node-data/palladium.conf:/palladium-config/palladium.conf:ro
+      - /var/run/docker.sock:/var/run/docker.sock:ro

web-dashboard/README.md

@@ -0,0 +1,43 @@
+# Palladium Network Dashboard
+
+Modern web dashboard for monitoring Palladium Node and ElectrumX Server statistics.
+
+## Features
+
+- **Real-time Monitoring**: Auto-refresh every 10 seconds
+- **Palladium Node Stats**: Block height, difficulty, connections, sync progress
+- **ElectrumX Server Stats**: Active sessions, requests, subscriptions, uptime
+- **System Resources**: CPU, memory, and disk usage monitoring
+- **Interactive Charts**: Block time history and mempool transaction graphs
+- **Recent Blocks Table**: View the latest blocks with detailed information
+- **Professional UI**: Dark theme with responsive design
+
+## API Endpoints
+
+- `GET /` - Main dashboard page
+- `GET /api/health` - Health check for all services
+- `GET /api/palladium/info` - Palladium node information
+- `GET /api/palladium/blocks/recent` - Recent blocks
+- `GET /api/electrumx/stats` - ElectrumX server statistics
+- `GET /api/system/resources` - System resource usage
+
+## Technology Stack
+
+- **Backend**: Python Flask
+- **Frontend**: HTML5, CSS3, JavaScript
+- **Charts**: Chart.js
+- **Design**: Modern dark theme with gradient accents
+
+## Access
+
+After starting the services with `docker-compose up -d`, access the dashboard at:
+
+```
+http://localhost:8080
+```
+
+Or from another device on the network:
+
+```
+http://<your-server-ip>:8080
+```

web-dashboard/app.py

@@ -0,0 +1,378 @@
+#!/usr/bin/env python3
+"""
+Web Dashboard API for Palladium Node and ElectrumX Server Statistics
+"""
+
+from flask import Flask, jsonify, render_template, request
+from flask_cors import CORS
+import requests
+import json
+import os
+import time
+from datetime import datetime
+import psutil
+import socket
+
+app = Flask(__name__)
+CORS(app)
+
+# Configuration
+PALLADIUM_RPC_HOST = os.getenv('PALLADIUM_RPC_HOST', 'palladiumd')
+PALLADIUM_RPC_PORT = int(os.getenv('PALLADIUM_RPC_PORT', '2332'))
+ELECTRUMX_RPC_HOST = os.getenv('ELECTRUMX_RPC_HOST', 'electrumx')
+ELECTRUMX_RPC_PORT = int(os.getenv('ELECTRUMX_RPC_PORT', '8000'))
+
+# Read RPC credentials from palladium.conf
+def get_rpc_credentials():
+    """Read RPC credentials from palladium.conf"""
+    try:
+        conf_path = '/palladium-config/palladium.conf'
+        rpc_user = None
+        rpc_password = None
+
+        with open(conf_path, 'r') as f:
+            for line in f:
+                line = line.strip()
+                if line.startswith('rpcuser='):
+                    rpc_user = line.split('=', 1)[1]
+                elif line.startswith('rpcpassword='):
+                    rpc_password = line.split('=', 1)[1]
+
+        return rpc_user, rpc_password
+    except Exception as e:
+        print(f"Error reading RPC credentials: {e}")
+        return None, None
+
+def palladium_rpc_call(method, params=None):
+    """Make RPC call to Palladium node"""
+    if params is None:
+        params = []
+
+    rpc_user, rpc_password = get_rpc_credentials()
+    if not rpc_user or not rpc_password:
+        return None
+
+    url = f"http://{PALLADIUM_RPC_HOST}:{PALLADIUM_RPC_PORT}"
+    headers = {'content-type': 'application/json'}
+    payload = {
+        "jsonrpc": "2.0",
+        "id": "dashboard",
+        "method": method,
+        "params": params
+    }
+
+    try:
+        response = requests.post(
+            url,
+            auth=(rpc_user, rpc_password),
+            data=json.dumps(payload),
+            headers=headers,
+            timeout=10
+        )
+
+        if response.status_code == 200:
+            result = response.json()
+            return result.get('result')
+        return None
+    except Exception as e:
+        print(f"RPC call error ({method}): {e}")
+        return None
+
+def get_electrumx_stats():
+    """Get ElectrumX statistics via Electrum protocol and system info"""
+    try:
+        import socket
+        import json
+        import subprocess
+        from datetime import datetime
+
+        stats = {
+            'server_version': 'Unknown',
+            'protocol_min': '',
+            'protocol_max': '',
+            'genesis_hash': '',
+            'hash_function': '',
+            'pruning': None,
+            'sessions': 0,
+            'requests': 0,
+            'subs': 0,
+            'uptime': 0,
+            'db_size': 0,
+            'tcp_port': 50001,
+            'ssl_port': 50002,
+            'server_ip': 'Unknown'
+        }
+
+        # Get server IP address
+        try:
+            # Try to get public IP from external service
+            response = requests.get('https://api.ipify.org?format=json', timeout=3)
+            if response.status_code == 200:
+                stats['server_ip'] = response.json().get('ip', 'Unknown')
+            else:
+                # Fallback to local IP
+                s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
+                s.connect(("8.8.8.8", 80))
+                stats['server_ip'] = s.getsockname()[0]
+                s.close()
+        except Exception as e:
+            print(f"IP detection error: {e}")
+            # Last fallback: get hostname IP
+            try:
+                stats['server_ip'] = socket.gethostbyname(socket.gethostname())
+            except:
+                stats['server_ip'] = 'Unknown'
+
+        # Get server features via Electrum protocol
+        try:
+            sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+            sock.settimeout(5)
+            sock.connect((ELECTRUMX_RPC_HOST, 50001))
+
+            request = {
+                "jsonrpc": "2.0",
+                "id": 1,
+                "method": "server.features",
+                "params": []
+            }
+
+            sock.send((json.dumps(request) + '\n').encode())
+            response = sock.recv(4096).decode()
+            sock.close()
+
+            data = json.loads(response)
+            if 'result' in data:
+                result = data['result']
+                stats['server_version'] = result.get('server_version', 'Unknown')
+                stats['protocol_min'] = result.get('protocol_min', '')
+                stats['protocol_max'] = result.get('protocol_max', '')
+                stats['genesis_hash'] = result.get('genesis_hash', '')[:16] + '...'
+                stats['hash_function'] = result.get('hash_function', '')
+                stats['pruning'] = result.get('pruning')
+        except Exception as e:
+            print(f"ElectrumX protocol error: {e}")
+
+        # Try to get container stats via Docker
+        try:
+            # Get container uptime
+            result = subprocess.run(
+                ['docker', 'inspect', 'electrumx-server', '--format', '{{.State.StartedAt}}'],
+                capture_output=True,
+                text=True,
+                timeout=2
+            )
+            if result.returncode == 0:
+                started_at = result.stdout.strip()
+                # Parse and calculate uptime
+                from dateutil import parser
+                start_time = parser.parse(started_at)
+                uptime_seconds = int((datetime.now(start_time.tzinfo) - start_time).total_seconds())
+                stats['uptime'] = uptime_seconds
+        except Exception as e:
+            print(f"Docker uptime error: {e}")
+
+        # Try to estimate DB size from data directory
+        try:
+            result = subprocess.run(
+                ['docker', 'exec', 'electrumx-server', 'du', '-sb', '/data'],
+                capture_output=True,
+                text=True,
+                timeout=5
+            )
+            if result.returncode == 0:
+                db_size = int(result.stdout.split()[0])
+                stats['db_size'] = db_size
+        except Exception as e:
+            print(f"DB size error: {e}")
+
+        # Count active connections (TCP sessions)
+        try:
+            result = subprocess.run(
+                ['docker', 'exec', 'electrumx-server', 'sh', '-c',
+                 'netstat -an 2>/dev/null | grep ":50001.*ESTABLISHED" | wc -l'],
+                capture_output=True,
+                text=True,
+                timeout=2
+            )
+            if result.returncode == 0:
+                sessions = int(result.stdout.strip())
+                stats['sessions'] = sessions
+        except Exception as e:
+            print(f"Sessions count error: {e}")
+
+        return stats
+    except Exception as e:
+        print(f"ElectrumX stats error: {e}")
+        return None
+
+@app.route('/')
+def index():
+    """Serve main dashboard page"""
+    return render_template('index.html')
+
+@app.route('/peers')
+def peers():
+    """Serve peers page"""
+    return render_template('peers.html')
+
+@app.route('/api/palladium/info')
+def palladium_info():
+    """Get Palladium node blockchain info"""
+    try:
+        blockchain_info = palladium_rpc_call('getblockchaininfo')
+        network_info = palladium_rpc_call('getnetworkinfo')
+        mining_info = palladium_rpc_call('getmininginfo')
+        peer_info = palladium_rpc_call('getpeerinfo')
+        mempool_info = palladium_rpc_call('getmempoolinfo')
+
+        data = {
+            'blockchain': blockchain_info or {},
+            'network': network_info or {},
+            'mining': mining_info or {},
+            'peers': len(peer_info) if peer_info else 0,
+            'mempool': mempool_info or {},
+            'timestamp': datetime.now().isoformat()
+        }
+
+        return jsonify(data)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/palladium/peers')
+def palladium_peers():
+    """Get detailed peer information"""
+    try:
+        peer_info = palladium_rpc_call('getpeerinfo')
+        if not peer_info:
+            return jsonify({'peers': []})
+
+        peers_data = []
+        for peer in peer_info:
+            peers_data.append({
+                'addr': peer.get('addr', 'Unknown'),
+                'inbound': peer.get('inbound', False),
+                'version': peer.get('subver', 'Unknown'),
+                'conntime': peer.get('conntime', 0),
+                'bytessent': peer.get('bytessent', 0),
+                'bytesrecv': peer.get('bytesrecv', 0)
+            })
+
+        return jsonify({
+            'peers': peers_data,
+            'total': len(peers_data),
+            'timestamp': datetime.now().isoformat()
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/palladium/blocks/recent')
+def recent_blocks():
+    """Get recent blocks information"""
+    try:
+        blockchain_info = palladium_rpc_call('getblockchaininfo')
+        if not blockchain_info:
+            return jsonify({'error': 'Cannot get blockchain info'}), 500
+
+        current_height = blockchain_info.get('blocks', 0)
+        blocks = []
+
+        # Get last 10 blocks
+        for i in range(min(10, current_height)):
+            height = current_height - i
+            block_hash = palladium_rpc_call('getblockhash', [height])
+            if block_hash:
+                block = palladium_rpc_call('getblock', [block_hash])
+                if block:
+                    blocks.append({
+                        'height': height,
+                        'hash': block_hash,
+                        'time': block.get('time'),
+                        'size': block.get('size'),
+                        'tx_count': len(block.get('tx', []))
+                    })
+
+        return jsonify({'blocks': blocks})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/electrumx/stats')
+def electrumx_stats():
+    """Get ElectrumX server statistics"""
+    try:
+        stats = get_electrumx_stats()
+        if stats:
+            # Get additional info from logs if available
+            try:
+                # Try to get container stats
+                import subprocess
+                result = subprocess.run(
+                    ['docker', 'exec', 'electrumx-server', 'sh', '-c',
+                     'ps aux | grep electrumx_server | grep -v grep'],
+                    capture_output=True,
+                    text=True,
+                    timeout=2
+                )
+                if result.returncode == 0:
+                    # Process is running, add placeholder stats
+                    stats['status'] = 'running'
+                    stats['sessions'] = 0  # Will show 0 for now
+                    stats['requests'] = 0
+                    stats['subs'] = 0
+            except:
+                pass
+
+            return jsonify({
+                'stats': stats,
+                'timestamp': datetime.now().isoformat()
+            })
+        return jsonify({'error': 'Cannot connect to ElectrumX'}), 500
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/system/resources')
+def system_resources():
+    """Get system resource usage"""
+    try:
+        cpu_percent = psutil.cpu_percent(interval=1)
+        memory = psutil.virtual_memory()
+        disk = psutil.disk_usage('/')
+
+        data = {
+            'cpu': {
+                'percent': cpu_percent,
+                'count': psutil.cpu_count()
+            },
+            'memory': {
+                'total': memory.total,
+                'used': memory.used,
+                'percent': memory.percent
+            },
+            'disk': {
+                'total': disk.total,
+                'used': disk.used,
+                'percent': disk.percent
+            },
+            'timestamp': datetime.now().isoformat()
+        }
+
+        return jsonify(data)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/health')
+def health():
+    """Health check endpoint"""
+    palladium_ok = palladium_rpc_call('getblockchaininfo') is not None
+    electrumx_ok = get_electrumx_stats() is not None
+
+    return jsonify({
+        'status': 'healthy' if (palladium_ok and electrumx_ok) else 'degraded',
+        'services': {
+            'palladium': 'up' if palladium_ok else 'down',
+            'electrumx': 'up' if electrumx_ok else 'down'
+        },
+        'timestamp': datetime.now().isoformat()
+    })
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=8080, debug=False)

web-dashboard/requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+flask-cors==4.0.0
+requests==2.31.0
+psutil==5.9.6
+python-dateutil==2.8.2

web-dashboard/static/dashboard.js

@@ -0,0 +1,271 @@
+// Dashboard JavaScript
+
+// Format numbers
+function formatNumber(num) {
+    if (num >= 1000000000) return (num / 1000000000).toFixed(2) + 'B';
+    if (num >= 1000000) return (num / 1000000).toFixed(2) + 'M';
+    if (num >= 1000) return (num / 1000).toFixed(2) + 'K';
+    return num.toString();
+}
+
+// Format difficulty (always with M suffix and 1 decimal)
+function formatDifficulty(num) {
+    if (num >= 1000000000) return (num / 1000000000).toFixed(1) + ' B';
+    if (num >= 1000000) return (num / 1000000).toFixed(1) + ' M';
+    if (num >= 1000) return (num / 1000).toFixed(1) + ' K';
+    return num.toFixed(1);
+}
+
+// Format block height (always full integer with thousands separator)
+function formatBlockHeight(num) {
+    return num.toLocaleString('en-US');
+}
+
+// Format bytes
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// Format time
+function formatTime(timestamp) {
+    const date = new Date(timestamp * 1000);
+    return date.toLocaleTimeString();
+}
+
+// Format duration
+function formatDuration(seconds) {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+
+    if (days > 0) return `${days}d ${hours}h`;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+}
+
+// Update health status
+function updateHealthStatus(data) {
+    const statusEl = document.getElementById('healthStatus');
+    const statusDot = statusEl.querySelector('.status-dot');
+    const statusText = statusEl.querySelector('.status-text');
+
+    if (data.status === 'healthy') {
+        statusEl.classList.remove('degraded');
+        statusText.textContent = 'All Systems Operational';
+    } else {
+        statusEl.classList.add('degraded');
+        statusText.textContent = 'Service Degraded';
+    }
+}
+
+// Update system resources
+async function updateSystemResources() {
+    try {
+        const response = await fetch('/api/system/resources');
+        const data = await response.json();
+
+        if (data.error) {
+            console.error('System resources error:', data.error);
+            return;
+        }
+
+        // Update CPU
+        const cpuPercent = data.cpu.percent.toFixed(1);
+        document.getElementById('cpuValue').textContent = cpuPercent + '%';
+        document.getElementById('cpuProgress').style.width = cpuPercent + '%';
+
+        // Update Memory
+        const memPercent = data.memory.percent.toFixed(1);
+        document.getElementById('memoryValue').textContent = memPercent + '%';
+        document.getElementById('memoryProgress').style.width = memPercent + '%';
+
+        // Update Disk
+        const diskPercent = data.disk.percent.toFixed(1);
+        document.getElementById('diskValue').textContent = diskPercent + '%';
+        document.getElementById('diskProgress').style.width = diskPercent + '%';
+
+    } catch (error) {
+        console.error('Error fetching system resources:', error);
+    }
+}
+
+// Update Palladium info
+async function updatePalladiumInfo() {
+    try {
+        const response = await fetch('/api/palladium/info');
+        const data = await response.json();
+
+        if (data.error) {
+            console.error('Palladium info error:', data.error);
+            return;
+        }
+
+        // Update blockchain info
+        if (data.blockchain) {
+            document.getElementById('blockHeight').textContent = formatBlockHeight(data.blockchain.blocks || 0);
+            document.getElementById('difficulty').textContent = formatDifficulty(data.blockchain.difficulty || 0);
+            document.getElementById('network').textContent = (data.blockchain.chain || 'unknown').toUpperCase();
+
+            const progress = ((data.blockchain.verificationprogress || 0) * 100).toFixed(2);
+            document.getElementById('syncProgress').textContent = progress + '%';
+        }
+
+        // Update network info
+        if (data.network) {
+            let version = data.network.subversion || 'Unknown';
+            // Extract version number from /Palladium:2.0.0/ format
+            const match = version.match(/:([\d.]+)/);
+            if (match) {
+                version = 'v' + match[1];
+            }
+            document.getElementById('nodeVersion').textContent = version;
+        }
+
+        // Update connections
+        document.getElementById('connections').textContent = data.peers || 0;
+
+        // Update mempool info
+        if (data.mempool) {
+            document.getElementById('mempoolSize').textContent = data.mempool.size || 0;
+            document.getElementById('mempoolBytes').textContent = formatBytes(data.mempool.bytes || 0);
+            document.getElementById('mempoolMax').textContent = formatBytes(data.mempool.maxmempool || 0);
+
+            // Calculate usage percentage
+            if (data.mempool.maxmempool && data.mempool.bytes) {
+                const usage = ((data.mempool.bytes / data.mempool.maxmempool) * 100).toFixed(1);
+                document.getElementById('mempoolUsage').textContent = usage + '%';
+            } else {
+                document.getElementById('mempoolUsage').textContent = '0%';
+            }
+        }
+
+    } catch (error) {
+        console.error('Error fetching Palladium info:', error);
+    }
+}
+
+// Update recent blocks
+async function updateRecentBlocks() {
+    try {
+        const response = await fetch('/api/palladium/blocks/recent');
+        const data = await response.json();
+
+        if (data.error) {
+            console.error('Recent blocks error:', data.error);
+            return;
+        }
+
+        const tbody = document.getElementById('recentBlocksTable');
+        tbody.innerHTML = '';
+
+        if (data.blocks && data.blocks.length > 0) {
+            data.blocks.forEach(block => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td><strong>${block.height}</strong></td>
+                    <td class="hash-cell" title="${block.hash}">${block.hash.substring(0, 20)}...</td>
+                    <td>${formatTime(block.time)}</td>
+                    <td>${formatBytes(block.size)}</td>
+                    <td>${block.tx_count}</td>
+                `;
+                tbody.appendChild(row);
+            });
+        } else {
+            tbody.innerHTML = '<tr><td colspan="5" class="loading">No blocks available</td></tr>';
+        }
+
+    } catch (error) {
+        console.error('Error fetching recent blocks:', error);
+    }
+}
+
+// Peers are now on a separate page, no update needed here
+
+// Update ElectrumX stats
+async function updateElectrumXStats() {
+    try {
+        const response = await fetch('/api/electrumx/stats');
+        const data = await response.json();
+
+        if (data.error) {
+            console.error('ElectrumX stats error:', data.error);
+            return;
+        }
+
+        if (data.stats) {
+            // Server version (extract version number like we do for node)
+            let serverVersion = data.stats.server_version || 'Unknown';
+            const versionMatch = serverVersion.match(/([\d.]+)/);
+            if (versionMatch) {
+                serverVersion = 'v' + versionMatch[1];
+            }
+            document.getElementById('serverVersion').textContent = serverVersion;
+
+            // Active sessions
+            const sessions = typeof data.stats.sessions === 'number' ? data.stats.sessions : '--';
+            document.getElementById('activeSessions').textContent = sessions;
+
+            // Database size
+            const dbSize = data.stats.db_size > 0 ? formatBytes(data.stats.db_size) : '--';
+            document.getElementById('dbSize').textContent = dbSize;
+
+            // Uptime
+            const uptime = data.stats.uptime > 0 ? formatDuration(data.stats.uptime) : '--';
+            document.getElementById('uptime').textContent = uptime;
+
+            // Server IP
+            document.getElementById('serverIP').textContent = data.stats.server_ip || '--';
+
+            // TCP Port
+            document.getElementById('tcpPort').textContent = data.stats.tcp_port || 50001;
+
+            // SSL Port
+            document.getElementById('sslPort').textContent = data.stats.ssl_port || 50002;
+        }
+
+    } catch (error) {
+        console.error('Error fetching ElectrumX stats:', error);
+    }
+}
+
+// Update health check
+async function updateHealth() {
+    try {
+        const response = await fetch('/api/health');
+        const data = await response.json();
+        updateHealthStatus(data);
+    } catch (error) {
+        console.error('Error fetching health:', error);
+    }
+}
+
+// Update last update time
+function updateLastUpdateTime() {
+    const now = new Date().toLocaleString();
+    document.getElementById('lastUpdate').textContent = now;
+}
+
+// Update all data
+async function updateAll() {
+    updateLastUpdateTime();
+    await Promise.all([
+        updateHealth(),
+        updateSystemResources(),
+        updatePalladiumInfo(),
+        updateRecentBlocks(),
+        updateElectrumXStats()
+    ]);
+}
+
+// Initialize dashboard
+document.addEventListener('DOMContentLoaded', async () => {
+    // Initial update
+    await updateAll();
+
+    // Auto-refresh every 10 seconds
+    setInterval(updateAll, 10000);
+});

web-dashboard/static/peers.js

@@ -0,0 +1,123 @@
+// Peers Page JavaScript
+
+// Format bytes
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// Format duration
+function formatDuration(seconds) {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+
+    if (days > 0) return `${days}d ${hours}h ${minutes}m`;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+}
+
+// Update peers table and statistics
+async function updatePeers() {
+    try {
+        const response = await fetch('/api/palladium/peers');
+        const data = await response.json();
+
+        if (data.error) {
+            console.error('Peers error:', data.error);
+            return;
+        }
+
+        const tbody = document.getElementById('peersTableBody');
+        tbody.innerHTML = '';
+
+        if (data.peers && data.peers.length > 0) {
+            let inboundCount = 0;
+            let outboundCount = 0;
+            let totalSent = 0;
+            let totalReceived = 0;
+
+            data.peers.forEach(peer => {
+                const row = document.createElement('tr');
+                const direction = peer.inbound ? '⬇️ Inbound' : '⬆️ Outbound';
+                const directionClass = peer.inbound ? 'peer-inbound' : 'peer-outbound';
+
+                // Count inbound/outbound
+                if (peer.inbound) {
+                    inboundCount++;
+                } else {
+                    outboundCount++;
+                }
+
+                // Sum traffic
+                totalSent += peer.bytessent || 0;
+                totalReceived += peer.bytesrecv || 0;
+
+                // Extract version number
+                let version = peer.subver || peer.version || 'Unknown';
+                const versionMatch = version.match(/([\d.]+)/);
+                if (versionMatch) {
+                    version = 'v' + versionMatch[1];
+                }
+
+                // Format connection time
+                const connTime = peer.conntime ? formatDuration(Math.floor(Date.now() / 1000) - peer.conntime) : '--';
+
+                // Calculate total traffic for this peer
+                const peerTotal = (peer.bytessent || 0) + (peer.bytesrecv || 0);
+
+                row.innerHTML = `
+                    <td class="peer-addr">${peer.addr}</td>
+                    <td><span class="${directionClass}">${direction}</span></td>
+                    <td>${version}</td>
+                    <td>${connTime}</td>
+                    <td>${formatBytes(peer.bytessent || 0)}</td>
+                    <td>${formatBytes(peer.bytesrecv || 0)}</td>
+                    <td><strong>${formatBytes(peerTotal)}</strong></td>
+                `;
+                tbody.appendChild(row);
+            });
+
+            // Update statistics
+            document.getElementById('totalPeers').textContent = data.peers.length;
+            document.getElementById('inboundPeers').textContent = inboundCount;
+            document.getElementById('outboundPeers').textContent = outboundCount;
+            document.getElementById('totalTraffic').textContent = formatBytes(totalSent + totalReceived);
+
+        } else {
+            tbody.innerHTML = '<tr><td colspan="7" class="loading">No peers connected</td></tr>';
+            document.getElementById('totalPeers').textContent = '0';
+            document.getElementById('inboundPeers').textContent = '0';
+            document.getElementById('outboundPeers').textContent = '0';
+            document.getElementById('totalTraffic').textContent = '0 B';
+        }
+
+    } catch (error) {
+        console.error('Error fetching peers:', error);
+        document.getElementById('peersTableBody').innerHTML = '<tr><td colspan="7" class="loading">Error loading peers</td></tr>';
+    }
+}
+
+// Update last update time
+function updateLastUpdateTime() {
+    const now = new Date().toLocaleString();
+    document.getElementById('lastUpdate').textContent = now;
+}
+
+// Update all data
+async function updateAll() {
+    updateLastUpdateTime();
+    await updatePeers();
+}
+
+// Initialize page
+document.addEventListener('DOMContentLoaded', async () => {
+    // Initial update
+    await updateAll();
+
+    // Auto-refresh every 10 seconds
+    setInterval(updateAll, 10000);
+});

web-dashboard/static/style.css

@@ -0,0 +1,506 @@
+:root {
+    --primary-color: #6366f1;
+    --secondary-color: #8b5cf6;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-card: #1e293b;
+    --text-primary: #f1f5f9;
+    --text-secondary: #94a3b8;
+    --border-color: #334155;
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1f35 100%);
+    color: var(--text-primary);
+    min-height: 100vh;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Header */
+.header {
+    background: var(--bg-card);
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 24px;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border-color);
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.logo-icon {
+    width: 36px;
+    height: 36px;
+    stroke: var(--primary-color);
+    stroke-width: 2;
+}
+
+.health-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: rgba(16, 185, 129, 0.1);
+    border-radius: 20px;
+    border: 1px solid var(--success-color);
+}
+
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--success-color);
+    animation: pulse 2s ease-in-out infinite;
+}
+
+.status-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--success-color);
+}
+
+.health-status.degraded {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: var(--danger-color);
+}
+
+.health-status.degraded .status-dot {
+    background: var(--danger-color);
+}
+
+.health-status.degraded .status-text {
+    color: var(--danger-color);
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 24px;
+    margin-bottom: 24px;
+}
+
+.card {
+    background: var(--bg-card);
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.card.full-width {
+    grid-column: 1 / -1;
+}
+
+.card.chart-card {
+    min-height: 350px;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.card-header h2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.card-icon {
+    font-size: 24px;
+}
+
+.card-content {
+    color: var(--text-secondary);
+}
+
+/* Stats Grid */
+.stat-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+}
+
+.stat-grid-3col {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+}
+
+/* ElectrumX Grid Layout */
+.electrumx-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+}
+
+.electrumx-grid .full-width {
+    grid-column: 1 / -1;
+}
+
+.stat-item {
+    padding: 16px;
+    background: rgba(99, 102, 241, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+.stat-link {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.stat-link:hover {
+    background: rgba(99, 102, 241, 0.15);
+    border-color: rgba(99, 102, 241, 0.4);
+    transform: translateY(-2px);
+}
+
+.stat-link::after {
+    content: '→';
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 18px;
+    color: var(--primary-color);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.stat-link:hover::after {
+    opacity: 1;
+}
+
+.stat-label {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+    word-break: break-word;
+}
+
+/* Resource Monitoring */
+.resource-item {
+    display: grid;
+    grid-template-columns: 120px 1fr 80px;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.resource-item:last-child {
+    margin-bottom: 0;
+}
+
+.resource-label {
+    font-size: 14px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.resource-value {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+    text-align: right;
+}
+
+.progress-bar {
+    height: 8px;
+    background: var(--bg-primary);
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    border-radius: 4px;
+    transition: width 0.5s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.progress-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+/* Table */
+.table-container {
+    overflow-x: auto;
+}
+
+.blocks-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.blocks-table thead {
+    background: rgba(99, 102, 241, 0.1);
+}
+
+.blocks-table th {
+    padding: 12px;
+    text-align: left;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.blocks-table td {
+    padding: 12px;
+    border-bottom: 1px solid var(--border-color);
+    font-size: 14px;
+}
+
+.blocks-table tbody tr {
+    transition: background 0.2s;
+}
+
+.blocks-table tbody tr:hover {
+    background: rgba(99, 102, 241, 0.05);
+}
+
+.blocks-table .hash-cell {
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+    color: var(--primary-color);
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.blocks-table .loading {
+    text-align: center;
+    padding: 24px;
+    color: var(--text-secondary);
+}
+
+.peer-addr {
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+}
+
+.peer-inbound {
+    padding: 4px 8px;
+    background: rgba(16, 185, 129, 0.1);
+    border-radius: 4px;
+    color: var(--success-color);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.peer-outbound {
+    padding: 4px 8px;
+    background: rgba(99, 102, 241, 0.1);
+    border-radius: 4px;
+    color: var(--primary-color);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+/* Back Button */
+.back-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: rgba(99, 102, 241, 0.1);
+    border-radius: 8px;
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.back-button:hover {
+    background: rgba(99, 102, 241, 0.2);
+    transform: translateX(-4px);
+}
+
+/* Peers Table Specific */
+.peers-table td {
+    white-space: nowrap;
+}
+
+.peers-table .peer-addr {
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    padding: 24px;
+    color: var(--text-secondary);
+    font-size: 14px;
+    background: var(--bg-card);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+}
+
+.footer p {
+    margin: 4px 0;
+}
+
+#lastUpdate {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+/* Chart Styling */
+.chart-description {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-bottom: 12px;
+    padding: 8px 12px;
+    background: rgba(99, 102, 241, 0.05);
+    border-left: 3px solid var(--primary-color);
+    border-radius: 4px;
+    font-style: italic;
+}
+
+canvas {
+    max-height: 280px !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .header-content {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .stat-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stat-grid-3col {
+        grid-template-columns: 1fr;
+    }
+
+    .electrumx-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .resource-item {
+        grid-template-columns: 1fr;
+        gap: 8px;
+    }
+
+    .resource-value {
+        text-align: left;
+    }
+
+    .blocks-table {
+        font-size: 12px;
+    }
+
+    .blocks-table th,
+    .blocks-table td {
+        padding: 8px;
+    }
+}
+
+/* Loading Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.card {
+    animation: fadeIn 0.5s ease-out;
+}

web-dashboard/templates/index.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Palladium & ElectrumX Dashboard</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=10">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <h1>
+                    <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                    </svg>
+                    Palladium Network Dashboard
+                </h1>
+                <div class="health-status" id="healthStatus">
+                    <span class="status-dot"></span>
+                    <span class="status-text">Checking...</span>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Grid -->
+        <div class="dashboard-grid">
+            <!-- System Resources -->
+            <div class="card">
+                <div class="card-header">
+                    <h2>System Resources</h2>
+                    <span class="card-icon">💻</span>
+                </div>
+                <div class="card-content">
+                    <div class="resource-item">
+                        <div class="resource-label">CPU Usage</div>
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="cpuProgress"></div>
+                        </div>
+                        <div class="resource-value" id="cpuValue">--%</div>
+                    </div>
+                    <div class="resource-item">
+                        <div class="resource-label">Memory Usage</div>
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="memoryProgress"></div>
+                        </div>
+                        <div class="resource-value" id="memoryValue">--%</div>
+                    </div>
+                    <div class="resource-item">
+                        <div class="resource-label">Disk Usage</div>
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="diskProgress"></div>
+                        </div>
+                        <div class="resource-value" id="diskValue">--%</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Palladium Node Info -->
+            <div class="card">
+                <div class="card-header">
+                    <h2>Palladium Node</h2>
+                    <span class="card-icon">⛏️</span>
+                </div>
+                <div class="card-content">
+                    <div class="stat-grid">
+                        <div class="stat-item">
+                            <div class="stat-label">Block Height</div>
+                            <div class="stat-value" id="blockHeight">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Difficulty</div>
+                            <div class="stat-value" id="difficulty">--</div>
+                        </div>
+                        <a href="/peers" class="stat-item stat-link">
+                            <div class="stat-label">Connections</div>
+                            <div class="stat-value" id="connections">--</div>
+                        </a>
+                        <div class="stat-item">
+                            <div class="stat-label">Network</div>
+                            <div class="stat-value" id="network">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Sync Progress</div>
+                            <div class="stat-value" id="syncProgress">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Version</div>
+                            <div class="stat-value" id="nodeVersion">--</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ElectrumX Server -->
+            <div class="card">
+                <div class="card-header">
+                    <h2>ElectrumX Server</h2>
+                    <span class="card-icon">⚡</span>
+                </div>
+                <div class="card-content">
+                    <div class="electrumx-grid">
+                        <div class="stat-item">
+                            <div class="stat-label">Server Version</div>
+                            <div class="stat-value" id="serverVersion">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Active Sessions</div>
+                            <div class="stat-value" id="activeSessions">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Database Size</div>
+                            <div class="stat-value" id="dbSize">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Uptime</div>
+                            <div class="stat-value" id="uptime">--</div>
+                        </div>
+                        <div class="stat-item full-width">
+                            <div class="stat-label">Server IP</div>
+                            <div class="stat-value" id="serverIP">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">TCP Port</div>
+                            <div class="stat-value" id="tcpPort">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">SSL Port</div>
+                            <div class="stat-value" id="sslPort">--</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Mempool Info -->
+            <div class="card">
+                <div class="card-header">
+                    <h2>Mempool</h2>
+                    <span class="card-icon">📝</span>
+                </div>
+                <div class="card-content">
+                    <div class="stat-grid">
+                        <div class="stat-item">
+                            <div class="stat-label">Transactions</div>
+                            <div class="stat-value" id="mempoolSize">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Total Size</div>
+                            <div class="stat-value" id="mempoolBytes">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Usage</div>
+                            <div class="stat-value" id="mempoolUsage">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Max Size</div>
+                            <div class="stat-value" id="mempoolMax">--</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Recent Blocks Table -->
+            <div class="card full-width">
+                <div class="card-header">
+                    <h2>Recent Blocks</h2>
+                    <span class="card-icon">🔗</span>
+                </div>
+                <div class="card-content">
+                    <div class="table-container">
+                        <table class="blocks-table">
+                            <thead>
+                                <tr>
+                                    <th>Height</th>
+                                    <th>Hash</th>
+                                    <th>Time</th>
+                                    <th>Size</th>
+                                    <th>Transactions</th>
+                                </tr>
+                            </thead>
+                            <tbody id="recentBlocksTable">
+                                <tr><td colspan="5" class="loading">Loading...</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <p>Last updated: <span id="lastUpdate">--</span></p>
+            <p>Auto-refresh every 10 seconds</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='dashboard.js') }}?v=10"></script>
+</body>
+</html>

web-dashboard/templates/peers.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Network Peers - Palladium Dashboard</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=7">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <h1>
+                    <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                    </svg>
+                    Network Peers
+                </h1>
+                <a href="/" class="back-button">
+                    <span>← Back to Dashboard</span>
+                </a>
+            </div>
+        </header>
+
+        <!-- Peers Statistics -->
+        <div class="dashboard-grid">
+            <div class="card">
+                <div class="card-header">
+                    <h2>Connection Statistics</h2>
+                    <span class="card-icon">📊</span>
+                </div>
+                <div class="card-content">
+                    <div class="stat-grid">
+                        <div class="stat-item">
+                            <div class="stat-label">Total Peers</div>
+                            <div class="stat-value" id="totalPeers">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Inbound</div>
+                            <div class="stat-value" id="inboundPeers">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Outbound</div>
+                            <div class="stat-value" id="outboundPeers">--</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Total Traffic</div>
+                            <div class="stat-value" id="totalTraffic">--</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Detailed Peers Table -->
+        <div class="card full-width">
+            <div class="card-header">
+                <h2>Connected Peers</h2>
+                <span class="card-icon">🌐</span>
+            </div>
+            <div class="card-content">
+                <div class="table-container">
+                    <table class="blocks-table peers-table">
+                        <thead>
+                            <tr>
+                                <th>IP Address</th>
+                                <th>Direction</th>
+                                <th>Version</th>
+                                <th>Connection Time</th>
+                                <th>Data Sent</th>
+                                <th>Data Received</th>
+                                <th>Total Traffic</th>
+                            </tr>
+                        </thead>
+                        <tbody id="peersTableBody">
+                            <tr><td colspan="7" class="loading">Loading peers...</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <p>Last updated: <span id="lastUpdate">--</span></p>
+            <p>Auto-refresh every 10 seconds</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='peers.js') }}?v=7"></script>
+</body>
+</html>