@chdlabs/my-shield 0.1.0

package/src/admin/dashboard/dashboard.js

@@ -0,0 +1,610 @@
+/**
+ * Shield Security Dashboard Client Controller
+ * Secure DOM manipulation using native standards (no innerHTML).
+ * Real-time event streaming via Server-Sent Events (SSE).
+ *
+ * @author ChdLabs
+ * @license MIT
+ */
+(function() {
+    'use strict';
+
+    // State
+    let activeTab = 'overview';
+    let sseSource = null;
+    let attackVelocityCounter = 0;
+    const recentEventTimestamps = [];
+
+    // DOM References
+    const tabs = document.querySelectorAll('.nav-tab');
+    const panels = document.querySelectorAll('.view-panel');
+    const btnRefresh = document.getElementById('btn-refresh');
+    const btnClearFeed = document.getElementById('btn-clear-feed');
+    const eventFeed = document.getElementById('event-feed');
+    const toastContainer = document.getElementById('toast-container');
+
+    // Modals
+    const modalBlockIp = document.getElementById('modal-block-ip');
+    const btnOpenBlockModal = document.getElementById('btn-open-block-modal');
+    const btnCloseModal = document.getElementById('btn-close-modal');
+    const btnCancelModal = document.getElementById('btn-cancel-modal');
+    const formBlockIp = document.getElementById('form-block-ip');
+    const formAddTrap = document.getElementById('form-add-trap');
+
+    // UI Toast Notification helper (replaces alert())
+    function showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = 'toast';
+        toast.textContent = message;
+        if (type === 'error') {
+            toast.style.borderColor = 'var(--accent-red)';
+        } else if (type === 'success') {
+            toast.style.borderColor = 'var(--accent-green)';
+        }
+        toastContainer.appendChild(toast);
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+        }, 4000);
+    }
+
+    function getStoredToken() {
+        return localStorage.getItem('pqc_session_token');
+    }
+
+    async function apiFetch(url, options = {}) {
+        const token = getStoredToken();
+        const headers = { ...options.headers };
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+        const res = await fetch(url, { ...options, headers });
+        if (res.status === 401) {
+            showToast('Authentication required. Please login with an admin account.', 'error');
+        } else if (res.status === 403) {
+            showToast('Access denied: Administrator privileges required.', 'error');
+        }
+        return res;
+    }
+
+    // Tab Navigation
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const targetView = tab.getAttribute('data-view');
+            if (!targetView) return;
+
+            tabs.forEach(t => t.classList.remove('active'));
+            panels.forEach(p => p.classList.remove('active'));
+
+            tab.classList.add('active');
+            const targetPanel = document.getElementById(`view-${targetView}`);
+            if (targetPanel) {
+                targetPanel.classList.add('active');
+            }
+            activeTab = targetView;
+            loadViewData(targetView);
+        });
+    });
+
+    // Modal Handlers
+    if (btnOpenBlockModal) {
+        btnOpenBlockModal.addEventListener('click', () => {
+            modalBlockIp.removeAttribute('hidden');
+        });
+    }
+
+    function closeModal() {
+        modalBlockIp.setAttribute('hidden', '');
+        formBlockIp.reset();
+    }
+
+    if (btnCloseModal) btnCloseModal.addEventListener('click', closeModal);
+    if (btnCancelModal) btnCancelModal.addEventListener('click', closeModal);
+
+    // Form: Manual Block IP
+    if (formBlockIp) {
+        formBlockIp.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const ipInput = document.getElementById('input-block-ip');
+            const reasonInput = document.getElementById('input-block-reason');
+            const ip = ipInput.value.trim();
+            const reason = reasonInput.value.trim() || 'manual_admin_ban';
+
+            try {
+                const res = await apiFetch('/admin/shield/api/block', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ ip, reason })
+                });
+                const data = await res.json();
+                if (res.ok) {
+                    showToast(`Blocked IP: ${ip}`, 'success');
+                    closeModal();
+                    loadOverview();
+                } else {
+                    showToast(data.error || 'Failed to block IP', 'error');
+                }
+            } catch (err) {
+                showToast(`Request failed: ${err.message}`, 'error');
+            }
+        });
+    }
+
+    // Form: Add Honeypot Trap
+    if (formAddTrap) {
+        formAddTrap.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const pathInput = document.getElementById('input-trap-path');
+            const path = pathInput.value.trim();
+
+            try {
+                const res = await apiFetch('/admin/shield/api/honeypot/add', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ path })
+                });
+                const data = await res.json();
+                if (res.ok) {
+                    showToast(`Added trap: ${path}`, 'success');
+                    pathInput.value = '';
+                    loadHoneypots();
+                } else {
+                    showToast(data.error || 'Failed to add trap', 'error');
+                }
+            } catch (err) {
+                showToast(`Request failed: ${err.message}`, 'error');
+            }
+        });
+    }
+
+    // Clear Feed Button
+    if (btnClearFeed) {
+        btnClearFeed.addEventListener('click', () => {
+            eventFeed.replaceChildren();
+        });
+    }
+
+    // Refresh Button
+    if (btnRefresh) {
+        btnRefresh.addEventListener('click', () => {
+            loadViewData(activeTab);
+            showToast('Refreshed telemetry data', 'info');
+        });
+    }
+
+    // Dispatcher for View Data Loading
+    function loadViewData(view) {
+        switch(view) {
+            case 'overview':
+                loadOverview();
+                break;
+            case 'intelligence':
+                loadIntelligence();
+                break;
+            case 'honeypots':
+                loadHoneypots();
+                break;
+            case 'health':
+                loadHealth();
+                break;
+        }
+    }
+
+    // ── 1. LOAD OVERVIEW ──
+    async function loadOverview() {
+        try {
+            const [statsRes, blockedRes] = await Promise.all([
+                apiFetch('/admin/shield/api/stats'),
+                apiFetch('/admin/shield/api/blocked')
+            ]);
+            const stats = await statsRes.json();
+            const blocked = await blockedRes.json();
+
+            // Populate Metric Cards
+            document.getElementById('val-blocked-ips').textContent = stats.blockedIPs ?? 0;
+            document.getElementById('val-total-events').textContent = stats.eventsTotal ?? 0;
+
+            if (stats.bloom) {
+                document.getElementById('val-bloom-fill').textContent = `${stats.bloom.fillPercentage}%`;
+                document.getElementById('val-bloom-fpr').textContent = `Est. False Positive: ${(stats.bloom.estimatedFPRate * 100).toFixed(4)}%`;
+            }
+
+            // Populate Blocked IPs Table
+            const tbody = document.getElementById('tbody-blocked-ips');
+            tbody.replaceChildren();
+
+            const list = blocked.blockedIPs || [];
+            if (list.length === 0) {
+                const tr = document.createElement('tr');
+                const td = document.createElement('td');
+                td.setAttribute('colspan', '4');
+                td.className = 'text-muted';
+                td.textContent = 'No active IP blocks. System is clean.';
+                tr.appendChild(td);
+                tbody.appendChild(tr);
+            } else {
+                list.forEach(item => {
+                    const tr = document.createElement('tr');
+
+                    const tdIp = document.createElement('td');
+                    tdIp.textContent = item.ip;
+                    tdIp.style.fontFamily = 'var(--font-mono)';
+
+                    const tdReason = document.createElement('td');
+                    tdReason.textContent = item.reason;
+
+                    const tdTtl = document.createElement('td');
+                    const remSec = Math.max(0, Math.round((item.remainingTtlMs || 0) / 1000));
+                    tdTtl.textContent = `${remSec}s remaining`;
+
+                    const tdActions = document.createElement('td');
+                    const btnUnblock = document.createElement('button');
+                    btnUnblock.className = 'btn btn-sm btn-secondary';
+                    btnUnblock.textContent = 'Unblock';
+                    btnUnblock.addEventListener('click', async () => {
+                        try {
+                            const res = await apiFetch(`/admin/shield/api/block/${encodeURIComponent(item.ip)}`, { method: 'DELETE' });
+                            if (res.ok) {
+                                showToast(`Unblocked ${item.ip}`, 'info');
+                                loadOverview();
+                            }
+                        } catch (err) {
+                            showToast(`Failed: ${err.message}`, 'error');
+                        }
+                    });
+                    tdActions.appendChild(btnUnblock);
+
+                    tr.appendChild(tdIp);
+                    tr.appendChild(tdReason);
+                    tr.appendChild(tdTtl);
+                    tr.appendChild(tdActions);
+                    tbody.appendChild(tr);
+                });
+            }
+        } catch (err) {
+            console.error('Failed to load overview data:', err);
+        }
+    }
+
+    // ── 2. LOAD 404 INTELLIGENCE ──
+    async function loadIntelligence() {
+        try {
+            const res = await apiFetch('/admin/shield/api/intelligence');
+            const data = await res.json();
+
+            document.getElementById('intel-total-hits').textContent = data.summary?.totalHits ?? 0;
+            document.getElementById('intel-unique-paths').textContent = data.summary?.uniquePaths ?? 0;
+            document.getElementById('intel-last-saved').textContent = data.lastSaved ? `Last snapshot: ${new Date(data.lastSaved).toLocaleTimeString()}` : 'Never saved';
+
+            // Top Paths Chart
+            const chartContainer = document.getElementById('intel-paths-chart');
+            chartContainer.replaceChildren();
+
+            const pathsEntries = Object.entries(data.paths || {})
+                .sort((a, b) => b[1].count - a[1].count)
+                .slice(0, 10);
+
+            if (pathsEntries.length === 0) {
+                const empty = document.createElement('div');
+                empty.className = 'text-muted';
+                empty.textContent = 'No 404 scan patterns captured yet.';
+                chartContainer.appendChild(empty);
+            } else {
+                const maxHits = Math.max(...pathsEntries.map(e => e[1].count), 1);
+                pathsEntries.forEach(([p, info]) => {
+                    const row = document.createElement('div');
+                    row.style.marginBottom = '0.75rem';
+
+                    const labelBox = document.createElement('div');
+                    labelBox.style.display = 'flex';
+                    labelBox.style.justifyContent = 'space-between';
+                    labelBox.style.fontSize = '0.8rem';
+                    labelBox.style.marginBottom = '0.2rem';
+
+                    const pathSpan = document.createElement('span');
+                    pathSpan.textContent = p;
+                    pathSpan.style.fontFamily = 'var(--font-mono)';
+
+                    const countSpan = document.createElement('span');
+                    countSpan.textContent = `${info.count} hits (${info.uniqueIPs || 1} IPs)`;
+                    countSpan.className = 'text-muted';
+
+                    labelBox.appendChild(pathSpan);
+                    labelBox.appendChild(countSpan);
+
+                    const barBg = document.createElement('div');
+                    barBg.style.height = '8px';
+                    barBg.style.backgroundColor = 'var(--bg-surface)';
+                    barBg.style.borderRadius = '4px';
+                    barBg.style.overflow = 'hidden';
+
+                    const barFill = document.createElement('div');
+                    barFill.style.height = '100%';
+                    barFill.style.width = `${Math.max(5, (info.count / maxHits) * 100)}%`;
+                    barFill.style.backgroundColor = info.autoPromoted ? 'var(--accent-red)' : 'var(--accent-cyan)';
+                    barFill.style.borderRadius = '4px';
+                    barBg.appendChild(barFill);
+
+                    row.appendChild(labelBox);
+                    row.appendChild(barBg);
+                    chartContainer.appendChild(row);
+                });
+            }
+
+            // Fingerprints Table
+            const tbodyFp = document.getElementById('tbody-fingerprints');
+            tbodyFp.replaceChildren();
+
+            const fpEntries = Object.entries(data.scannerFingerprints || {})
+                .sort((a, b) => b[1] - a[1])
+                .slice(0, 15);
+
+            if (fpEntries.length === 0) {
+                const tr = document.createElement('tr');
+                const td = document.createElement('td');
+                td.setAttribute('colspan', '2');
+                td.className = 'text-muted';
+                td.textContent = 'No scanner signatures recorded.';
+                tr.appendChild(td);
+                tbodyFp.appendChild(tr);
+            } else {
+                fpEntries.forEach(([ua, count]) => {
+                    const tr = document.createElement('tr');
+                    const tdUa = document.createElement('td');
+                    tdUa.textContent = ua;
+                    tdUa.style.fontFamily = 'var(--font-mono)';
+                    tdUa.style.fontSize = '0.75rem';
+
+                    const tdCount = document.createElement('td');
+                    tdCount.textContent = count;
+                    tdCount.style.fontWeight = '700';
+
+                    tr.appendChild(tdUa);
+                    tr.appendChild(tdCount);
+                    tbodyFp.appendChild(tr);
+                });
+            }
+
+        } catch (err) {
+            console.error('Failed to load intelligence data:', err);
+        }
+    }
+
+    // ── 3. LOAD HONEYPOTS ──
+    async function loadHoneypots() {
+        try {
+            const statsRes = await apiFetch('/admin/shield/api/stats');
+            const stats = await statsRes.json();
+
+            const countEl = document.getElementById('honeypot-count');
+            countEl.textContent = `${stats.honeypot?.activeTraps ?? 0} active traps (${stats.honeypot?.promotedTraps ?? 0} auto-promoted)`;
+
+            const tbody = document.getElementById('tbody-traps');
+            tbody.replaceChildren();
+
+            const trapsList = stats.honeypot?.traps || [];
+            if (trapsList.length === 0) {
+                const tr = document.createElement('tr');
+                const td = document.createElement('td');
+                td.setAttribute('colspan', '4');
+                td.className = 'text-muted';
+                td.textContent = 'No active traps registered.';
+                tr.appendChild(td);
+                tbody.appendChild(tr);
+            } else {
+                trapsList.forEach(trap => {
+                    const tr = document.createElement('tr');
+
+                    const tdRoute = document.createElement('td');
+                    tdRoute.textContent = trap.path;
+                    tdRoute.style.fontFamily = 'var(--font-mono)';
+
+                    const tdSource = document.createElement('td');
+                    const badge = document.createElement('span');
+                    badge.className = `feed-badge ${trap.source === 'auto_promoted' ? 'honeypot' : 'anomaly'}`;
+                    badge.textContent = trap.source || 'builtin';
+                    tdSource.appendChild(badge);
+
+                    const tdCatches = document.createElement('td');
+                    tdCatches.textContent = trap.hitCount || 0;
+
+                    const tdActions = document.createElement('td');
+                    if (trap.source !== 'builtin') {
+                        const btnRemove = document.createElement('button');
+                        btnRemove.className = 'btn btn-sm btn-secondary';
+                        btnRemove.textContent = 'Remove';
+                        btnRemove.addEventListener('click', async () => {
+                            try {
+                                const cleanPath = trap.path.startsWith('/') ? trap.path.slice(1) : trap.path;
+                                const res = await apiFetch(`/admin/shield/api/honeypot/${cleanPath}`, { method: 'DELETE' });
+                                if (res.ok) {
+                                    showToast(`Removed trap ${trap.path}`, 'info');
+                                    loadHoneypots();
+                                }
+                            } catch (err) {
+                                showToast(`Failed: ${err.message}`, 'error');
+                            }
+                        });
+                        tdActions.appendChild(btnRemove);
+                    } else {
+                        const span = document.createElement('span');
+                        span.className = 'text-muted text-xs';
+                        span.textContent = 'Core trap';
+                        tdActions.appendChild(span);
+                    }
+
+                    tr.appendChild(tdRoute);
+                    tr.appendChild(tdSource);
+                    tr.appendChild(tdCatches);
+                    tr.appendChild(tdActions);
+                    tbody.appendChild(tr);
+                });
+            }
+        } catch (err) {
+            console.error('Failed to load honeypot data:', err);
+        }
+    }
+
+    // ── 4. LOAD SYSTEM HEALTH ──
+    async function loadHealth() {
+        try {
+            const statsRes = await apiFetch('/admin/shield/api/stats');
+            const stats = await statsRes.json();
+
+            // Memory List
+            const memList = document.getElementById('health-memory-list');
+            memList.replaceChildren();
+
+            const memItems = [
+                { label: 'Uptime', val: `${Math.round(stats.uptime || 0)}s` },
+                { label: 'Bloom Buffer Memory', val: `${Math.round((stats.bloom?.sizeBytes || 0) / 1024)} KB` },
+                { label: 'LRU Cache Entries', val: `${stats.lru?.size || 0} / ${stats.lru?.maxSize || 0}` },
+                { label: 'Ring Buffer Utilization', val: `${stats.eventsTotal || 0} events` }
+            ];
+
+            memItems.forEach(item => {
+                const el = document.createElement('div');
+                el.className = 'health-item';
+                const lbl = document.createElement('span');
+                lbl.className = 'health-item-label';
+                lbl.textContent = item.label;
+                const val = document.createElement('span');
+                val.className = 'health-item-val';
+                val.textContent = item.val;
+                el.appendChild(lbl);
+                el.appendChild(val);
+                memList.appendChild(el);
+            });
+
+            // Telemetry List
+            const telList = document.getElementById('health-telemetry-list');
+            telList.replaceChildren();
+
+            const telItems = [
+                { label: 'Persistence File', val: stats.persistence?.fileExists ? 'Synchronized' : 'Pending Save' },
+                { label: 'File Size', val: `${stats.persistence?.fileSize || 0} bytes` },
+                { label: 'Save Interval', val: `${Math.round((stats.persistence?.intervalMs || 0) / 1000)}s` },
+                { label: 'LRU Hit Rate', val: `${((stats.lru?.hitRate || 0) * 100).toFixed(1)}%` },
+                { label: 'Total 404 Discovered', val: stats.intelligence?.uniquePaths || 0 }
+            ];
+
+            telItems.forEach(item => {
+                const el = document.createElement('div');
+                el.className = 'health-item';
+                const lbl = document.createElement('span');
+                lbl.className = 'health-item-label';
+                lbl.textContent = item.label;
+                const val = document.createElement('span');
+                val.className = 'health-item-val';
+                val.textContent = item.val;
+                el.appendChild(lbl);
+                el.appendChild(val);
+                telList.appendChild(el);
+            });
+
+        } catch (err) {
+            console.error('Failed to load health telemetry:', err);
+        }
+    }
+
+    // ── 5. REAL-TIME SERVER-SENT EVENTS (SSE) STREAM ──
+    function connectEventStream() {
+        if (typeof EventSource === 'undefined') return;
+
+        const token = getStoredToken();
+        const streamUrl = token ? `/admin/shield/api/stream?token=${encodeURIComponent(token)}` : '/admin/shield/api/stream';
+        sseSource = new EventSource(streamUrl);
+
+        sseSource.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.type === 'connected') return;
+
+                // Track attack velocity
+                const now = Date.now();
+                recentEventTimestamps.push(now);
+                updateAttackVelocity();
+
+                // Append event to Live Feed
+                appendFeedEvent(data);
+            } catch (err) {
+                // Ignore parse errors
+            }
+        };
+
+        sseSource.onerror = () => {
+            const ind = document.getElementById('live-indicator');
+            if (ind) {
+                ind.className = 'status-pill';
+                ind.textContent = 'DISCONNECTED';
+            }
+        };
+
+        sseSource.onopen = () => {
+            const ind = document.getElementById('live-indicator');
+            if (ind) {
+                ind.className = 'status-pill status-live';
+                ind.replaceChildren();
+                const dot = document.createElement('span');
+                dot.className = 'pulse-dot';
+                ind.appendChild(dot);
+                ind.appendChild(document.createTextNode(' LIVE TELEMETRY'));
+            }
+        };
+    }
+
+    function appendFeedEvent(evt) {
+        if (!eventFeed) return;
+
+        const item = document.createElement('div');
+        item.className = 'feed-item';
+
+        const leftBox = document.createElement('div');
+        leftBox.style.display = 'flex';
+        leftBox.style.alignItems = 'center';
+        leftBox.style.gap = '0.5rem';
+
+        const badge = document.createElement('span');
+        badge.className = `feed-badge ${evt.type === 'honeypot' ? 'honeypot' : (evt.type === '404_anomaly' ? 'anomaly' : 'blocked')}`;
+        badge.textContent = evt.type;
+
+        const info = document.createElement('span');
+        info.textContent = `${evt.ip || 'Unknown IP'} -> ${evt.path || '/'}`;
+
+        leftBox.appendChild(badge);
+        leftBox.appendChild(info);
+
+        const time = document.createElement('span');
+        time.className = 'text-muted text-xs';
+        time.textContent = new Date().toLocaleTimeString();
+
+        item.appendChild(leftBox);
+        item.appendChild(time);
+
+        eventFeed.insertBefore(item, eventFeed.firstChild);
+
+        // Keep feed under 100 items in DOM
+        if (eventFeed.children.length > 100) {
+            eventFeed.removeChild(eventFeed.lastChild);
+        }
+    }
+
+    function updateAttackVelocity() {
+        const now = Date.now();
+        while (recentEventTimestamps.length > 0 && now - recentEventTimestamps[0] > 60000) {
+            recentEventTimestamps.shift();
+        }
+        const velEl = document.getElementById('val-attack-velocity');
+        if (velEl) {
+            velEl.textContent = `${recentEventTimestamps.length}/min`;
+        }
+    }
+
+    // Interval to refresh attack velocity every 5s
+    setInterval(updateAttackVelocity, 5000);
+
+    // Initial Bootstrap
+    loadOverview();
+    connectEventStream();
+})();