From 84d23ffa38649daaa5f2b3b08e59dd569eba4c63 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 00:16:30 +0000
Subject: [PATCH 1/2] Initial plan


From 2d7ea6469aff786c9d6d144b0c5fa97f36f5af9a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 00:21:14 +0000
Subject: [PATCH 2/2] Add system map page with interactive network graph
 visualization

Co-authored-by: HeadyConnection <250789142+HeadyConnection@users.noreply.github.com>
---
 .../apps/heady_admin_ui/css/system-map.css    | 611 ++++++++++++++
 .../apps/heady_admin_ui/index.html            |   4 +
 .../apps/heady_admin_ui/js/network-graph.js   | 772 ++++++++++++++++++
 .../apps/heady_admin_ui/system-map.html       | 411 ++++++++++
 4 files changed, 1798 insertions(+)
 create mode 100644 HeadySystems_v13/apps/heady_admin_ui/css/system-map.css
 create mode 100644 HeadySystems_v13/apps/heady_admin_ui/js/network-graph.js
 create mode 100644 HeadySystems_v13/apps/heady_admin_ui/system-map.html

diff --git a/HeadySystems_v13/apps/heady_admin_ui/css/system-map.css b/HeadySystems_v13/apps/heady_admin_ui/css/system-map.css
new file mode 100644
index 00000000..47f97304
--- /dev/null
+++ b/HeadySystems_v13/apps/heady_admin_ui/css/system-map.css
@@ -0,0 +1,611 @@
+/* ========================================
+   Heady Admin UI - System Map Styles
+   ======================================== */
+
+/* ========================================
+   Main Container
+   ======================================== */
+
+.system-map-container {
+    width: 100%;
+    height: calc(100vh - 200px);
+    min-height: 600px;
+    position: relative;
+    background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--border-color);
+    overflow: hidden;
+    box-shadow: var(--shadow-xl);
+}
+
+/* ========================================
+   Canvas
+   ======================================== */
+
+#networkCanvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+    touch-action: none;
+}
+
+#networkCanvas:active {
+    cursor: grabbing;
+}
+
+/* ========================================
+   Control Panel
+   ======================================== */
+
+.control-panel {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md);
+    box-shadow: var(--shadow-lg);
+    z-index: 100;
+    min-width: 200px;
+}
+
+.control-section {
+    margin-bottom: var(--spacing-md);
+    padding-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.control-section:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.control-section h4 {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+/* Zoom Controls */
+.zoom-controls {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: center;
+}
+
+.zoom-btn {
+    width: 32px;
+    height: 32px;
+    background: var(--bg-card-hover);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 1.125rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.zoom-btn:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: scale(1.1);
+}
+
+.zoom-slider {
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 4px;
+    background: var(--border-color);
+    border-radius: var(--radius-full);
+    outline: none;
+}
+
+.zoom-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.zoom-slider::-webkit-slider-thumb:hover {
+    background: var(--color-secondary);
+    transform: scale(1.2);
+}
+
+.zoom-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    transition: all 0.3s ease;
+}
+
+.zoom-slider::-moz-range-thumb:hover {
+    background: var(--color-secondary);
+    transform: scale(1.2);
+}
+
+/* View Mode Buttons */
+.view-mode-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.view-mode-btn {
+    width: 100%;
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: transparent;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 0.875rem;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    transition: all 0.3s ease;
+}
+
+.view-mode-btn:hover {
+    background: var(--bg-card-hover);
+    border-color: var(--color-primary);
+}
+
+.view-mode-btn.active {
+    background: var(--gradient-purple);
+    border-color: transparent;
+    color: white;
+}
+
+.view-mode-btn .icon {
+    font-size: 1rem;
+}
+
+/* Filter Controls */
+.filter-controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.filter-checkbox {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-xs);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: background 0.2s ease;
+}
+
+.filter-checkbox:hover {
+    background: var(--bg-card-hover);
+}
+
+.filter-checkbox input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--color-primary);
+}
+
+.filter-checkbox label {
+    flex: 1;
+    font-size: 0.875rem;
+    cursor: pointer;
+}
+
+/* Legend */
+.legend {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-size: 0.875rem;
+}
+
+.legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.legend-color.healthy {
+    background: var(--color-success);
+    box-shadow: 0 0 8px var(--color-success);
+}
+
+.legend-color.warning {
+    background: var(--color-warning);
+    box-shadow: 0 0 8px var(--color-warning);
+}
+
+.legend-color.error {
+    background: var(--color-error);
+    box-shadow: 0 0 8px var(--color-error);
+}
+
+.legend-color.core {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.legend-color.vertical {
+    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+}
+
+.legend-color.infrastructure {
+    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+}
+
+/* ========================================
+   Node Detail Panel
+   ======================================== */
+
+.node-detail-panel {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 320px;
+    max-height: calc(100% - 40px);
+    background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+    z-index: 100;
+    overflow: hidden;
+    transform: translateX(-400px);
+    transition: transform 0.3s ease;
+}
+
+.node-detail-panel.active {
+    transform: translateX(0);
+}
+
+.node-detail-header {
+    padding: var(--spacing-lg);
+    background: var(--gradient-purple);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.node-detail-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    flex: 1;
+}
+
+.node-detail-title .node-icon {
+    font-size: 2rem;
+}
+
+.node-detail-title h3 {
+    font-size: 1.25rem;
+    margin: 0;
+}
+
+.close-panel-btn {
+    width: 32px;
+    height: 32px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: var(--radius-md);
+    color: white;
+    cursor: pointer;
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.close-panel-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+}
+
+.node-detail-content {
+    padding: var(--spacing-lg);
+    max-height: calc(100vh - 300px);
+    overflow-y: auto;
+}
+
+.detail-section {
+    margin-bottom: var(--spacing-lg);
+}
+
+.detail-section:last-child {
+    margin-bottom: 0;
+}
+
+.detail-section h4 {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.status-badge.operational {
+    background: rgba(16, 185, 129, 0.2);
+    color: var(--color-success);
+}
+
+.status-badge.degraded {
+    background: rgba(245, 158, 11, 0.2);
+    color: var(--color-warning);
+}
+
+.status-badge.offline {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--color-error);
+}
+
+.uptime-display {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-success);
+    margin-top: var(--spacing-xs);
+}
+
+.connected-nodes-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.connected-node-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.connected-node-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateX(5px);
+}
+
+.connected-node-item .icon {
+    font-size: 1.25rem;
+}
+
+.activity-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.activity-item {
+    display: flex;
+    gap: var(--spacing-sm);
+    font-size: 0.875rem;
+}
+
+.activity-time {
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    white-space: nowrap;
+}
+
+.activity-text {
+    flex: 1;
+}
+
+.quick-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.action-btn {
+    width: 100%;
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--bg-card-hover);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 0.875rem;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+    background: var(--gradient-purple);
+    border-color: transparent;
+    color: white;
+    transform: translateX(5px);
+}
+
+.action-btn .icon {
+    font-size: 1rem;
+}
+
+/* ========================================
+   Tooltip
+   ======================================== */
+
+.network-tooltip {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(10px);
+    color: white;
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    pointer-events: none;
+    z-index: 1000;
+    opacity: 0;
+    transform: translate(-50%, -100%) translateY(-10px);
+    transition: opacity 0.2s ease;
+    white-space: nowrap;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.network-tooltip.active {
+    opacity: 1;
+}
+
+.tooltip-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+}
+
+.tooltip-stats {
+    display: flex;
+    gap: var(--spacing-md);
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* ========================================
+   Loading State
+   ======================================== */
+
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--bg-card);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    z-index: 200;
+}
+
+.loading-spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid var(--border-color);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+.loading-text {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+}
+
+/* ========================================
+   Responsive Design
+   ======================================== */
+
+@media (max-width: 768px) {
+    .system-map-container {
+        height: calc(100vh - 150px);
+        min-height: 400px;
+    }
+
+    .control-panel {
+        top: 10px;
+        right: 10px;
+        min-width: 160px;
+        padding: var(--spacing-sm);
+    }
+
+    .node-detail-panel {
+        width: calc(100% - 20px);
+        left: 10px;
+        top: 10px;
+    }
+
+    .node-detail-panel.active {
+        transform: translateY(0);
+    }
+
+    .node-detail-panel:not(.active) {
+        transform: translateY(-600px);
+    }
+}
+
+@media (max-width: 480px) {
+    .control-panel {
+        position: fixed;
+        bottom: 10px;
+        top: auto;
+        right: 10px;
+        left: 10px;
+        max-width: calc(100% - 20px);
+    }
+
+    .view-mode-buttons {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .view-mode-btn {
+        flex: 1;
+        min-width: 120px;
+    }
+}
+
+/* ========================================
+   Accessibility
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+    .node-detail-panel,
+    .network-tooltip {
+        transition: none;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .control-panel,
+    .node-detail-panel {
+        border: 2px solid var(--text-primary);
+    }
+}
diff --git a/HeadySystems_v13/apps/heady_admin_ui/index.html b/HeadySystems_v13/apps/heady_admin_ui/index.html
index 0087274d..4c8b6ca7 100644
--- a/HeadySystems_v13/apps/heady_admin_ui/index.html
+++ b/HeadySystems_v13/apps/heady_admin_ui/index.html
@@ -28,6 +28,10 @@ <h1 class="logo">
                         <span class="icon">📊</span>
                         <span>Dashboard</span>
                     </button>
+                    <a href="system-map.html" class="nav-item">
+                        <span class="icon">🗺️</span>
+                        <span>System Map</span>
+                    </a>
                     <button class="nav-item" data-view="verticals">
                         <span class="icon">🎯</span>
                         <span>Verticals</span>
diff --git a/HeadySystems_v13/apps/heady_admin_ui/js/network-graph.js b/HeadySystems_v13/apps/heady_admin_ui/js/network-graph.js
new file mode 100644
index 00000000..d8828cf0
--- /dev/null
+++ b/HeadySystems_v13/apps/heady_admin_ui/js/network-graph.js
@@ -0,0 +1,772 @@
+/**
+ * Heady Admin UI - Network Graph Component
+ * Interactive force-directed graph for system topology visualization
+ */
+
+class NetworkGraph {
+    constructor(canvasId, options = {}) {
+        this.canvas = document.getElementById(canvasId);
+        if (!this.canvas) {
+            console.error(`Canvas ${canvasId} not found`);
+            return;
+        }
+
+        this.ctx = this.canvas.getContext('2d');
+        this.width = this.canvas.width = this.canvas.offsetWidth * window.devicePixelRatio;
+        this.height = this.canvas.height = this.canvas.offsetHeight * window.devicePixelRatio;
+        this.canvas.style.width = this.canvas.offsetWidth + 'px';
+        this.canvas.style.height = this.canvas.offsetHeight + 'px';
+
+        // Options
+        this.options = {
+            layoutMode: options.layoutMode || 'force-directed',
+            showLabels: options.showLabels !== false,
+            showParticles: options.showParticles !== false,
+            particleSpeed: options.particleSpeed || 0.5,
+            ...options
+        };
+
+        // Node and edge data
+        this.nodes = [];
+        this.edges = [];
+        this.particles = [];
+
+        // Interaction state
+        this.draggedNode = null;
+        this.hoveredNode = null;
+        this.selectedNode = null;
+        this.zoom = 1;
+        this.panX = 0;
+        this.panY = 0;
+        this.isDragging = false;
+        this.lastMouseX = 0;
+        this.lastMouseY = 0;
+
+        // Animation
+        this.animationId = null;
+        this.time = 0;
+
+        // Filters
+        this.filters = {
+            verticals: true,
+            infrastructure: true,
+            core: true
+        };
+
+        this.init();
+    }
+
+    init() {
+        // Load data
+        this.loadData();
+
+        // Setup event listeners
+        this.setupEventListeners();
+
+        // Start animation loop
+        this.animate();
+
+        // Simulate real-time updates
+        this.startRealtimeUpdates();
+    }
+
+    loadData() {
+        // Define nodes
+        this.nodes = [
+            { id: 'core', label: 'Heady Core', icon: '⚡', type: 'core', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.9 },
+            { id: 'make', label: 'HeadyMake', icon: '🏭', type: 'vertical', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.7 },
+            { id: 'field', label: 'HeadyField', icon: '🌾', type: 'vertical', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.8 },
+            { id: 'legacy', label: 'HeadyLegacy', icon: '👤', type: 'vertical', x: 0, y: 0, vx: 0, vy: 0, status: 'degraded', activity: 0.5 },
+            { id: 'kinetic', label: 'HeadyKinetic', icon: '🔥', type: 'vertical', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.75 },
+            { id: 'bio', label: 'HeadyBio', icon: '🧬', type: 'vertical', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.6 },
+            { id: 'ed', label: 'HeadyEd', icon: '📚', type: 'vertical', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.4 },
+            { id: 'guard', label: 'HeadyGuard', icon: '🛡️', type: 'vertical', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.85 },
+            { id: 'mcp', label: 'MCP Gateway', icon: '🌐', type: 'infrastructure', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.9 },
+            { id: 'auth', label: 'Authentik', icon: '🔐', type: 'infrastructure', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.7 },
+            { id: 'db', label: 'Database', icon: '💾', type: 'infrastructure', x: 0, y: 0, vx: 0, vy: 0, status: 'operational', activity: 0.65 }
+        ];
+
+        // Define edges
+        this.edges = [
+            { from: 'core', to: 'make', dataFlow: 'bidirectional', health: 'healthy' },
+            { from: 'core', to: 'field', dataFlow: 'bidirectional', health: 'healthy' },
+            { from: 'core', to: 'legacy', dataFlow: 'bidirectional', health: 'warning' },
+            { from: 'core', to: 'kinetic', dataFlow: 'bidirectional', health: 'healthy' },
+            { from: 'core', to: 'bio', dataFlow: 'bidirectional', health: 'healthy' },
+            { from: 'core', to: 'ed', dataFlow: 'bidirectional', health: 'healthy' },
+            { from: 'core', to: 'guard', dataFlow: 'bidirectional', health: 'healthy' },
+            { from: 'mcp', to: 'core', dataFlow: 'inbound', health: 'healthy' },
+            { from: 'auth', to: 'mcp', dataFlow: 'outbound', health: 'healthy' },
+            { from: 'db', to: 'core', dataFlow: 'bidirectional', health: 'healthy' },
+            { from: 'guard', to: 'auth', dataFlow: 'outbound', health: 'healthy' },
+            { from: 'legacy', to: 'auth', dataFlow: 'outbound', health: 'warning' }
+        ];
+
+        // Initialize node positions based on layout mode
+        this.initializeLayout();
+
+        // Create particles for data flow animation
+        this.createParticles();
+    }
+
+    initializeLayout() {
+        const centerX = this.width / (2 * window.devicePixelRatio);
+        const centerY = this.height / (2 * window.devicePixelRatio);
+
+        if (this.options.layoutMode === 'force-directed') {
+            // Random initial positions for force-directed layout
+            this.nodes.forEach(node => {
+                const angle = Math.random() * Math.PI * 2;
+                const radius = 100 + Math.random() * 100;
+                node.x = centerX + Math.cos(angle) * radius;
+                node.y = centerY + Math.sin(angle) * radius;
+            });
+        } else if (this.options.layoutMode === 'circular') {
+            // Circular layout
+            const radius = Math.min(centerX, centerY) * 0.6;
+            this.nodes.forEach((node, i) => {
+                const angle = (i / this.nodes.length) * Math.PI * 2 - Math.PI / 2;
+                node.x = centerX + Math.cos(angle) * radius;
+                node.y = centerY + Math.sin(angle) * radius;
+            });
+        } else if (this.options.layoutMode === 'hierarchical') {
+            // Hierarchical layout
+            const levels = { core: 1, infrastructure: 0, vertical: 2 };
+            const levelNodes = { 0: [], 1: [], 2: [] };
+            
+            this.nodes.forEach(node => {
+                const level = levels[node.type] || 1;
+                levelNodes[level].push(node);
+            });
+
+            Object.keys(levelNodes).forEach(level => {
+                const nodes = levelNodes[level];
+                const y = centerY + (parseInt(level) - 1) * 200;
+                nodes.forEach((node, i) => {
+                    const spacing = Math.min(600, (this.width / window.devicePixelRatio - 200) / (nodes.length + 1));
+                    node.x = (i + 1) * spacing + 100;
+                    node.y = y;
+                });
+            });
+        }
+    }
+
+    createParticles() {
+        this.particles = [];
+        this.edges.forEach(edge => {
+            const fromNode = this.nodes.find(n => n.id === edge.from);
+            const toNode = this.nodes.find(n => n.id === edge.to);
+            
+            if (fromNode && toNode) {
+                // Create 2-3 particles per edge
+                const particleCount = edge.dataFlow === 'bidirectional' ? 3 : 2;
+                for (let i = 0; i < particleCount; i++) {
+                    this.particles.push({
+                        edge: edge,
+                        progress: i / particleCount,
+                        speed: 0.002 + Math.random() * 0.003,
+                        reverse: edge.dataFlow === 'bidirectional' && i % 2 === 1,
+                        size: 2 + Math.random() * 2
+                    });
+                }
+            }
+        });
+    }
+
+    setupEventListeners() {
+        // Mouse events
+        this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
+        this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
+        this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
+        this.canvas.addEventListener('wheel', this.handleWheel.bind(this));
+        this.canvas.addEventListener('dblclick', this.handleDoubleClick.bind(this));
+
+        // Touch events for mobile
+        this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: false });
+        this.canvas.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: false });
+        this.canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
+
+        // Window resize
+        window.addEventListener('resize', this.handleResize.bind(this));
+
+        // Keyboard events
+        document.addEventListener('keydown', this.handleKeyDown.bind(this));
+    }
+
+    handleMouseDown(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (e.clientX - rect.left) * window.devicePixelRatio;
+        const y = (e.clientY - rect.top) * window.devicePixelRatio;
+
+        const node = this.getNodeAtPosition(x, y);
+        if (node) {
+            this.draggedNode = node;
+            this.canvas.style.cursor = 'grabbing';
+        } else {
+            this.isDragging = true;
+            this.lastMouseX = e.clientX;
+            this.lastMouseY = e.clientY;
+        }
+    }
+
+    handleMouseMove(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (e.clientX - rect.left) * window.devicePixelRatio;
+        const y = (e.clientY - rect.top) * window.devicePixelRatio;
+
+        if (this.draggedNode) {
+            this.draggedNode.x = (x - this.panX) / this.zoom;
+            this.draggedNode.y = (y - this.panY) / this.zoom;
+            this.draggedNode.vx = 0;
+            this.draggedNode.vy = 0;
+        } else if (this.isDragging) {
+            const dx = e.clientX - this.lastMouseX;
+            const dy = e.clientY - this.lastMouseY;
+            this.panX += dx * window.devicePixelRatio;
+            this.panY += dy * window.devicePixelRatio;
+            this.lastMouseX = e.clientX;
+            this.lastMouseY = e.clientY;
+        } else {
+            // Update hovered node
+            const node = this.getNodeAtPosition(x, y);
+            this.hoveredNode = node;
+            this.canvas.style.cursor = node ? 'pointer' : 'grab';
+
+            // Update tooltip
+            this.updateTooltip(e.clientX, e.clientY, node);
+        }
+    }
+
+    handleMouseUp(e) {
+        if (this.draggedNode && !this.isDragging) {
+            // Click event
+            const rect = this.canvas.getBoundingClientRect();
+            const x = (e.clientX - rect.left) * window.devicePixelRatio;
+            const y = (e.clientY - rect.top) * window.devicePixelRatio;
+            const node = this.getNodeAtPosition(x, y);
+            
+            if (node) {
+                this.handleNodeClick(node);
+            }
+        }
+
+        this.draggedNode = null;
+        this.isDragging = false;
+        this.canvas.style.cursor = 'grab';
+    }
+
+    handleWheel(e) {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        const newZoom = Math.max(0.5, Math.min(3, this.zoom * delta));
+        
+        // Zoom towards cursor position
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (e.clientX - rect.left) * window.devicePixelRatio;
+        const y = (e.clientY - rect.top) * window.devicePixelRatio;
+        
+        this.panX = x - (x - this.panX) * (newZoom / this.zoom);
+        this.panY = y - (y - this.panY) * (newZoom / this.zoom);
+        this.zoom = newZoom;
+
+        // Update zoom slider
+        this.updateZoomSlider();
+    }
+
+    handleDoubleClick(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (e.clientX - rect.left) * window.devicePixelRatio;
+        const y = (e.clientY - rect.top) * window.devicePixelRatio;
+        const node = this.getNodeAtPosition(x, y);
+        
+        if (node) {
+            // Navigate to vertical dashboard (simulated)
+            console.log(`Navigate to ${node.label} dashboard`);
+            alert(`Would navigate to ${node.label} dashboard`);
+        }
+    }
+
+    handleTouchStart(e) {
+        e.preventDefault();
+        if (e.touches.length === 1) {
+            const touch = e.touches[0];
+            const rect = this.canvas.getBoundingClientRect();
+            const x = (touch.clientX - rect.left) * window.devicePixelRatio;
+            const y = (touch.clientY - rect.top) * window.devicePixelRatio;
+
+            const node = this.getNodeAtPosition(x, y);
+            if (node) {
+                this.draggedNode = node;
+            } else {
+                this.isDragging = true;
+                this.lastMouseX = touch.clientX;
+                this.lastMouseY = touch.clientY;
+            }
+        }
+    }
+
+    handleTouchMove(e) {
+        e.preventDefault();
+        if (e.touches.length === 1) {
+            const touch = e.touches[0];
+            const rect = this.canvas.getBoundingClientRect();
+            const x = (touch.clientX - rect.left) * window.devicePixelRatio;
+            const y = (touch.clientY - rect.top) * window.devicePixelRatio;
+
+            if (this.draggedNode) {
+                this.draggedNode.x = (x - this.panX) / this.zoom;
+                this.draggedNode.y = (y - this.panY) / this.zoom;
+            } else if (this.isDragging) {
+                const dx = touch.clientX - this.lastMouseX;
+                const dy = touch.clientY - this.lastMouseY;
+                this.panX += dx * window.devicePixelRatio;
+                this.panY += dy * window.devicePixelRatio;
+                this.lastMouseX = touch.clientX;
+                this.lastMouseY = touch.clientY;
+            }
+        }
+    }
+
+    handleTouchEnd(e) {
+        this.draggedNode = null;
+        this.isDragging = false;
+    }
+
+    handleResize() {
+        this.width = this.canvas.width = this.canvas.offsetWidth * window.devicePixelRatio;
+        this.height = this.canvas.height = this.canvas.offsetHeight * window.devicePixelRatio;
+        this.canvas.style.width = this.canvas.offsetWidth + 'px';
+        this.canvas.style.height = this.canvas.offsetHeight + 'px';
+    }
+
+    handleKeyDown(e) {
+        // Arrow keys to move between nodes
+        if (this.selectedNode) {
+            const speed = 10;
+            switch (e.key) {
+                case 'ArrowUp':
+                    this.selectedNode.y -= speed;
+                    break;
+                case 'ArrowDown':
+                    this.selectedNode.y += speed;
+                    break;
+                case 'ArrowLeft':
+                    this.selectedNode.x -= speed;
+                    break;
+                case 'ArrowRight':
+                    this.selectedNode.x += speed;
+                    break;
+                case 'Escape':
+                    this.selectedNode = null;
+                    this.closeDetailPanel();
+                    break;
+            }
+        }
+    }
+
+    getNodeAtPosition(x, y) {
+        const worldX = (x - this.panX) / this.zoom;
+        const worldY = (y - this.panY) / this.zoom;
+
+        for (let i = this.nodes.length - 1; i >= 0; i--) {
+            const node = this.nodes[i];
+            const radius = this.getNodeRadius(node);
+            const dx = node.x - worldX;
+            const dy = node.y - worldY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+
+            if (distance <= radius) {
+                return node;
+            }
+        }
+        return null;
+    }
+
+    getNodeRadius(node) {
+        return node.type === 'core' ? 40 : 30;
+    }
+
+    handleNodeClick(node) {
+        this.selectedNode = node;
+        this.showDetailPanel(node);
+    }
+
+    showDetailPanel(node) {
+        const panel = document.querySelector('.node-detail-panel');
+        if (panel) {
+            // Update panel content
+            panel.querySelector('.node-detail-title .node-icon').textContent = node.icon;
+            panel.querySelector('.node-detail-title h3').textContent = node.label;
+            
+            // Update status badge
+            const statusBadge = panel.querySelector('.status-badge');
+            statusBadge.className = `status-badge ${node.status}`;
+            statusBadge.textContent = node.status.charAt(0).toUpperCase() + node.status.slice(1);
+            
+            // Update uptime (simulated)
+            const uptime = 99.5 + Math.random() * 0.5;
+            panel.querySelector('.uptime-display').textContent = `${uptime.toFixed(2)}%`;
+            
+            // Update connected nodes
+            const connectedList = panel.querySelector('.connected-nodes-list');
+            connectedList.innerHTML = '';
+            
+            const connections = this.edges.filter(e => e.from === node.id || e.to === node.id);
+            connections.forEach(edge => {
+                const connectedId = edge.from === node.id ? edge.to : edge.from;
+                const connectedNode = this.nodes.find(n => n.id === connectedId);
+                if (connectedNode) {
+                    const item = document.createElement('div');
+                    item.className = 'connected-node-item';
+                    item.innerHTML = `
+                        <span class="icon">${connectedNode.icon}</span>
+                        <span>${connectedNode.label}</span>
+                    `;
+                    item.addEventListener('click', () => this.handleNodeClick(connectedNode));
+                    connectedList.appendChild(item);
+                }
+            });
+            
+            // Show panel
+            panel.classList.add('active');
+        }
+    }
+
+    closeDetailPanel() {
+        const panel = document.querySelector('.node-detail-panel');
+        if (panel) {
+            panel.classList.remove('active');
+        }
+    }
+
+    updateTooltip(x, y, node) {
+        const tooltip = document.querySelector('.network-tooltip');
+        if (tooltip) {
+            if (node) {
+                tooltip.querySelector('.tooltip-title').textContent = node.label;
+                tooltip.querySelector('.tooltip-stats').innerHTML = `
+                    <div>Status: ${node.status}</div>
+                    <div>Activity: ${(node.activity * 100).toFixed(0)}%</div>
+                `;
+                tooltip.style.left = `${x}px`;
+                tooltip.style.top = `${y}px`;
+                tooltip.classList.add('active');
+            } else {
+                tooltip.classList.remove('active');
+            }
+        }
+    }
+
+    updateZoomSlider() {
+        const slider = document.querySelector('.zoom-slider');
+        if (slider) {
+            // Map zoom (0.5-3) to slider (0-100)
+            slider.value = ((this.zoom - 0.5) / 2.5) * 100;
+        }
+    }
+
+    applyForces() {
+        if (this.options.layoutMode !== 'force-directed') return;
+
+        const centerX = this.width / (2 * window.devicePixelRatio);
+        const centerY = this.height / (2 * window.devicePixelRatio);
+
+        this.nodes.forEach(node => {
+            if (node === this.draggedNode) return;
+
+            // Reset forces
+            let fx = 0;
+            let fy = 0;
+
+            // Repulsion between nodes
+            this.nodes.forEach(other => {
+                if (node === other) return;
+                const dx = node.x - other.x;
+                const dy = node.y - other.y;
+                const distance = Math.sqrt(dx * dx + dy * dy) + 0.1;
+                const force = 2000 / (distance * distance);
+                fx += (dx / distance) * force;
+                fy += (dy / distance) * force;
+            });
+
+            // Attraction along edges
+            this.edges.forEach(edge => {
+                let other = null;
+                if (edge.from === node.id) {
+                    other = this.nodes.find(n => n.id === edge.to);
+                } else if (edge.to === node.id) {
+                    other = this.nodes.find(n => n.id === edge.from);
+                }
+
+                if (other) {
+                    const dx = other.x - node.x;
+                    const dy = other.y - node.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    const force = distance * 0.01;
+                    fx += (dx / distance) * force;
+                    fy += (dy / distance) * force;
+                }
+            });
+
+            // Center gravity
+            const dx = centerX - node.x;
+            const dy = centerY - node.y;
+            fx += dx * 0.001;
+            fy += dy * 0.001;
+
+            // Apply forces
+            node.vx = (node.vx + fx) * 0.85;
+            node.vy = (node.vy + fy) * 0.85;
+            node.x += node.vx;
+            node.y += node.vy;
+        });
+    }
+
+    updateParticles() {
+        if (!this.options.showParticles) return;
+
+        this.particles.forEach(particle => {
+            particle.progress += particle.speed * this.options.particleSpeed * (particle.reverse ? -1 : 1);
+            
+            if (particle.progress > 1) particle.progress = 0;
+            if (particle.progress < 0) particle.progress = 1;
+        });
+    }
+
+    animate() {
+        this.time += 0.016; // Assuming 60fps
+
+        // Apply physics
+        this.applyForces();
+
+        // Update particles
+        this.updateParticles();
+
+        // Render
+        this.render();
+
+        // Continue animation loop
+        this.animationId = requestAnimationFrame(this.animate.bind(this));
+    }
+
+    render() {
+        // Clear canvas
+        this.ctx.clearRect(0, 0, this.width, this.height);
+
+        // Apply transformations
+        this.ctx.save();
+        this.ctx.translate(this.panX, this.panY);
+        this.ctx.scale(this.zoom, this.zoom);
+
+        // Draw edges
+        this.edges.forEach(edge => {
+            const fromNode = this.nodes.find(n => n.id === edge.from);
+            const toNode = this.nodes.find(n => n.id === edge.to);
+            
+            if (fromNode && toNode && this.shouldShowNode(fromNode) && this.shouldShowNode(toNode)) {
+                this.drawEdge(fromNode, toNode, edge);
+            }
+        });
+
+        // Draw particles
+        if (this.options.showParticles) {
+            this.particles.forEach(particle => {
+                const fromNode = this.nodes.find(n => n.id === particle.edge.from);
+                const toNode = this.nodes.find(n => n.id === particle.edge.to);
+                
+                if (fromNode && toNode && this.shouldShowNode(fromNode) && this.shouldShowNode(toNode)) {
+                    this.drawParticle(fromNode, toNode, particle);
+                }
+            });
+        }
+
+        // Draw nodes
+        this.nodes.forEach(node => {
+            if (this.shouldShowNode(node)) {
+                this.drawNode(node);
+            }
+        });
+
+        this.ctx.restore();
+    }
+
+    shouldShowNode(node) {
+        if (node.type === 'core') return this.filters.core;
+        if (node.type === 'vertical') return this.filters.verticals;
+        if (node.type === 'infrastructure') return this.filters.infrastructure;
+        return true;
+    }
+
+    drawEdge(fromNode, toNode, edge) {
+        this.ctx.save();
+
+        // Edge color based on health
+        let color = '#10b981'; // healthy
+        if (edge.health === 'warning') color = '#f59e0b';
+        if (edge.health === 'error') color = '#ef4444';
+
+        this.ctx.strokeStyle = color;
+        this.ctx.lineWidth = 2;
+        this.ctx.globalAlpha = 0.4;
+
+        // Draw line
+        this.ctx.beginPath();
+        this.ctx.moveTo(fromNode.x, fromNode.y);
+        this.ctx.lineTo(toNode.x, toNode.y);
+        this.ctx.stroke();
+
+        // Draw direction indicator
+        if (edge.dataFlow !== 'bidirectional') {
+            const midX = (fromNode.x + toNode.x) / 2;
+            const midY = (fromNode.y + toNode.y) / 2;
+            const angle = Math.atan2(toNode.y - fromNode.y, toNode.x - fromNode.x);
+            
+            this.ctx.globalAlpha = 0.6;
+            this.ctx.fillStyle = color;
+            this.ctx.beginPath();
+            
+            if (edge.dataFlow === 'outbound') {
+                this.ctx.moveTo(midX + Math.cos(angle) * 8, midY + Math.sin(angle) * 8);
+                this.ctx.lineTo(midX + Math.cos(angle - 2.5) * 8, midY + Math.sin(angle - 2.5) * 8);
+                this.ctx.lineTo(midX + Math.cos(angle + 2.5) * 8, midY + Math.sin(angle + 2.5) * 8);
+            } else {
+                this.ctx.moveTo(midX - Math.cos(angle) * 8, midY - Math.sin(angle) * 8);
+                this.ctx.lineTo(midX - Math.cos(angle - 2.5) * 8, midY - Math.sin(angle - 2.5) * 8);
+                this.ctx.lineTo(midX - Math.cos(angle + 2.5) * 8, midY - Math.sin(angle + 2.5) * 8);
+            }
+            
+            this.ctx.closePath();
+            this.ctx.fill();
+        }
+
+        this.ctx.restore();
+    }
+
+    drawParticle(fromNode, toNode, particle) {
+        const x = fromNode.x + (toNode.x - fromNode.x) * particle.progress;
+        const y = fromNode.y + (toNode.y - fromNode.y) * particle.progress;
+
+        this.ctx.save();
+        this.ctx.fillStyle = '#6366f1';
+        this.ctx.shadowColor = '#6366f1';
+        this.ctx.shadowBlur = 10;
+        this.ctx.globalAlpha = 0.8;
+        
+        this.ctx.beginPath();
+        this.ctx.arc(x, y, particle.size, 0, Math.PI * 2);
+        this.ctx.fill();
+        
+        this.ctx.restore();
+    }
+
+    drawNode(node) {
+        const radius = this.getNodeRadius(node);
+        const isHovered = node === this.hoveredNode;
+        const isSelected = node === this.selectedNode;
+
+        this.ctx.save();
+
+        // Node background
+        const gradient = this.ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, radius);
+        
+        if (node.type === 'core') {
+            gradient.addColorStop(0, '#667eea');
+            gradient.addColorStop(1, '#764ba2');
+        } else if (node.type === 'vertical') {
+            gradient.addColorStop(0, '#10b981');
+            gradient.addColorStop(1, '#059669');
+        } else {
+            gradient.addColorStop(0, '#f59e0b');
+            gradient.addColorStop(1, '#d97706');
+        }
+
+        this.ctx.fillStyle = gradient;
+
+        // Pulsing effect based on activity
+        const pulseScale = 1 + Math.sin(this.time * 3 * node.activity) * 0.05 * node.activity;
+        const drawRadius = radius * pulseScale;
+
+        // Glow effect for hovered/selected
+        if (isHovered || isSelected) {
+            this.ctx.shadowColor = node.status === 'operational' ? '#10b981' : '#f59e0b';
+            this.ctx.shadowBlur = 20;
+        }
+
+        // Draw circle
+        this.ctx.beginPath();
+        this.ctx.arc(node.x, node.y, drawRadius, 0, Math.PI * 2);
+        this.ctx.fill();
+
+        // Border
+        this.ctx.strokeStyle = isSelected ? '#ffffff' : 'rgba(255, 255, 255, 0.3)';
+        this.ctx.lineWidth = isSelected ? 3 : 2;
+        this.ctx.stroke();
+
+        // Icon (emoji)
+        this.ctx.shadowBlur = 0;
+        this.ctx.font = `${radius}px Arial`;
+        this.ctx.textAlign = 'center';
+        this.ctx.textBaseline = 'middle';
+        this.ctx.fillText(node.icon, node.x, node.y);
+
+        // Label
+        if (this.options.showLabels || isHovered) {
+            this.ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+            this.ctx.fillStyle = '#ffffff';
+            this.ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';
+            this.ctx.lineWidth = 3;
+            this.ctx.strokeText(node.label, node.x, node.y + radius + 15);
+            this.ctx.fillText(node.label, node.x, node.y + radius + 15);
+        }
+
+        // Status indicator
+        const statusColor = node.status === 'operational' ? '#10b981' : node.status === 'degraded' ? '#f59e0b' : '#ef4444';
+        this.ctx.fillStyle = statusColor;
+        this.ctx.beginPath();
+        this.ctx.arc(node.x + radius * 0.7, node.y - radius * 0.7, 5, 0, Math.PI * 2);
+        this.ctx.fill();
+
+        this.ctx.restore();
+    }
+
+    setLayoutMode(mode) {
+        this.options.layoutMode = mode;
+        this.initializeLayout();
+    }
+
+    setZoom(value) {
+        this.zoom = 0.5 + (value / 100) * 2.5;
+    }
+
+    setFilter(type, enabled) {
+        this.filters[type] = enabled;
+    }
+
+    startRealtimeUpdates() {
+        setInterval(() => {
+            // Randomly update node activity
+            this.nodes.forEach(node => {
+                node.activity = Math.max(0.3, Math.min(1, node.activity + (Math.random() - 0.5) * 0.1));
+            });
+
+            // Randomly update edge health
+            this.edges.forEach(edge => {
+                if (Math.random() < 0.05) { // 5% chance to change
+                    const statuses = ['healthy', 'warning', 'error'];
+                    edge.health = statuses[Math.floor(Math.random() * statuses.length)];
+                }
+            });
+        }, 5000);
+    }
+
+    destroy() {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+        }
+    }
+}
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = NetworkGraph;
+}
diff --git a/HeadySystems_v13/apps/heady_admin_ui/system-map.html b/HeadySystems_v13/apps/heady_admin_ui/system-map.html
new file mode 100644
index 00000000..bda85609
--- /dev/null
+++ b/HeadySystems_v13/apps/heady_admin_ui/system-map.html
@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Heady System Map - Interactive network topology visualizer">
+    <title>System Map - Heady Admin Dashboard</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/system-map.css">
+</head>
+<body>
+    <!-- Animated Background Particles -->
+    <div id="particles-container" aria-hidden="true"></div>
+    
+    <!-- Main Container -->
+    <div class="container">
+        <!-- Header -->
+        <header class="header" role="banner">
+            <div class="header-content">
+                <div class="logo-section slide-in">
+                    <h1 class="logo">
+                        <span class="logo-text gradient-text">⚡ Heady</span>
+                        <span class="logo-subtitle">System Map</span>
+                    </h1>
+                </div>
+                <nav class="nav" role="navigation" aria-label="Main navigation">
+                    <a href="index.html" class="nav-item">
+                        <span class="icon">📊</span>
+                        <span>Dashboard</span>
+                    </a>
+                    <button class="nav-item active" data-view="system-map">
+                        <span class="icon">🗺️</span>
+                        <span>System Map</span>
+                    </button>
+                    <a href="index.html#verticals" class="nav-item">
+                        <span class="icon">🎯</span>
+                        <span>Verticals</span>
+                    </a>
+                </nav>
+                <div class="header-actions">
+                    <button class="theme-toggle" aria-label="Toggle dark mode">
+                        <span class="icon">🌙</span>
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content" role="main">
+            
+            <!-- System Map Section -->
+            <section class="section fade-in" aria-labelledby="system-map-heading">
+                <h2 id="system-map-heading" class="section-title">
+                    <span class="icon">🗺️</span>
+                    Interactive System Topology
+                </h2>
+
+                <!-- System Map Container -->
+                <div class="system-map-container">
+                    <!-- Loading Overlay -->
+                    <div class="loading-overlay" id="loadingOverlay">
+                        <div class="loading-spinner"></div>
+                        <div class="loading-text">Initializing network topology...</div>
+                    </div>
+
+                    <!-- Canvas -->
+                    <canvas id="networkCanvas" aria-label="Interactive system network graph"></canvas>
+
+                    <!-- Tooltip -->
+                    <div class="network-tooltip">
+                        <div class="tooltip-title"></div>
+                        <div class="tooltip-stats"></div>
+                    </div>
+
+                    <!-- Node Detail Panel -->
+                    <div class="node-detail-panel">
+                        <div class="node-detail-header">
+                            <div class="node-detail-title">
+                                <span class="node-icon">⚡</span>
+                                <h3>Node Details</h3>
+                            </div>
+                            <button class="close-panel-btn" aria-label="Close detail panel" onclick="closeDetailPanel()">×</button>
+                        </div>
+                        <div class="node-detail-content">
+                            <!-- Status Section -->
+                            <div class="detail-section">
+                                <h4>Status & Health</h4>
+                                <div class="status-badge operational">Operational</div>
+                                <div class="uptime-display">99.98%</div>
+                                <p style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem;">Uptime</p>
+                            </div>
+
+                            <!-- Connected Nodes -->
+                            <div class="detail-section">
+                                <h4>Connected Nodes</h4>
+                                <div class="connected-nodes-list">
+                                    <!-- Dynamically populated -->
+                                </div>
+                            </div>
+
+                            <!-- Recent Activity -->
+                            <div class="detail-section">
+                                <h4>Recent Activity</h4>
+                                <div class="activity-timeline">
+                                    <div class="activity-item">
+                                        <span class="activity-time">2 min ago</span>
+                                        <span class="activity-text">Health check passed</span>
+                                    </div>
+                                    <div class="activity-item">
+                                        <span class="activity-time">8 min ago</span>
+                                        <span class="activity-text">Data sync completed</span>
+                                    </div>
+                                    <div class="activity-item">
+                                        <span class="activity-time">15 min ago</span>
+                                        <span class="activity-text">Configuration updated</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Quick Actions -->
+                            <div class="detail-section">
+                                <h4>Quick Actions</h4>
+                                <div class="quick-actions">
+                                    <button class="action-btn">
+                                        <span class="icon">📊</span>
+                                        <span>View Dashboard</span>
+                                    </button>
+                                    <button class="action-btn">
+                                        <span class="icon">🔄</span>
+                                        <span>Restart Service</span>
+                                    </button>
+                                    <button class="action-btn">
+                                        <span class="icon">📝</span>
+                                        <span>View Logs</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Control Panel -->
+                    <div class="control-panel">
+                        <!-- Zoom Controls -->
+                        <div class="control-section">
+                            <h4>Zoom</h4>
+                            <div class="zoom-controls">
+                                <button class="zoom-btn" id="zoomOut" aria-label="Zoom out">−</button>
+                                <input type="range" class="zoom-slider" id="zoomSlider" min="0" max="100" value="20" aria-label="Zoom level">
+                                <button class="zoom-btn" id="zoomIn" aria-label="Zoom in">+</button>
+                            </div>
+                        </div>
+
+                        <!-- View Modes -->
+                        <div class="control-section">
+                            <h4>Layout</h4>
+                            <div class="view-mode-buttons">
+                                <button class="view-mode-btn active" data-mode="force-directed">
+                                    <span class="icon">🌀</span>
+                                    <span>Force-Directed</span>
+                                </button>
+                                <button class="view-mode-btn" data-mode="hierarchical">
+                                    <span class="icon">📊</span>
+                                    <span>Hierarchical</span>
+                                </button>
+                                <button class="view-mode-btn" data-mode="circular">
+                                    <span class="icon">⭕</span>
+                                    <span>Circular</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Filters -->
+                        <div class="control-section">
+                            <h4>Filters</h4>
+                            <div class="filter-controls">
+                                <div class="filter-checkbox">
+                                    <input type="checkbox" id="filterCore" checked>
+                                    <label for="filterCore">Core Systems</label>
+                                </div>
+                                <div class="filter-checkbox">
+                                    <input type="checkbox" id="filterVerticals" checked>
+                                    <label for="filterVerticals">Verticals</label>
+                                </div>
+                                <div class="filter-checkbox">
+                                    <input type="checkbox" id="filterInfra" checked>
+                                    <label for="filterInfra">Infrastructure</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Legend -->
+                        <div class="control-section">
+                            <h4>Legend</h4>
+                            <div class="legend">
+                                <div class="legend-item">
+                                    <div class="legend-color healthy"></div>
+                                    <span>Healthy</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color warning"></div>
+                                    <span>Warning</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color error"></div>
+                                    <span>Error</span>
+                                </div>
+                                <hr style="border: none; border-top: 1px solid var(--border-color); margin: 0.5rem 0;">
+                                <div class="legend-item">
+                                    <div class="legend-color core"></div>
+                                    <span>Core</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color vertical"></div>
+                                    <span>Vertical</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color infrastructure"></div>
+                                    <span>Infrastructure</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Instructions -->
+                <div class="glass-card" style="margin-top: var(--spacing-lg); padding: var(--spacing-lg);">
+                    <h3 style="margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
+                        <span>💡</span>
+                        <span>How to Use</span>
+                    </h3>
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md);">
+                        <div>
+                            <strong>🖱️ Drag Nodes:</strong>
+                            <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">
+                                Click and drag nodes to reposition them
+                            </p>
+                        </div>
+                        <div>
+                            <strong>👆 Click for Details:</strong>
+                            <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">
+                                Single-click a node to view detailed information
+                            </p>
+                        </div>
+                        <div>
+                            <strong>🖱️ Double-Click:</strong>
+                            <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">
+                                Double-click to navigate to the vertical's dashboard
+                            </p>
+                        </div>
+                        <div>
+                            <strong>🔍 Zoom & Pan:</strong>
+                            <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">
+                                Use mouse wheel to zoom, drag canvas to pan
+                            </p>
+                        </div>
+                        <div>
+                            <strong>⌨️ Keyboard:</strong>
+                            <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">
+                                Use arrow keys to move selected node, Esc to close
+                            </p>
+                        </div>
+                        <div>
+                            <strong>📱 Touch Support:</strong>
+                            <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">
+                                Pinch to zoom, drag to pan on mobile devices
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </main>
+
+        <!-- Footer -->
+        <footer class="footer" role="contentinfo">
+            <div class="footer-content">
+                <p>&copy; 2026 HeadySystems Inc. | Invented by Eric Haywood</p>
+                <p class="footer-links">
+                    <a href="index.html" class="sparkle-text">Dashboard</a>
+                    <span>•</span>
+                    <a href="#" class="sparkle-text">Documentation</a>
+                    <span>•</span>
+                    <a href="#" class="sparkle-text">Security</a>
+                </p>
+            </div>
+        </footer>
+    </div>
+
+    <!-- Scripts -->
+    <script src="js/particles.js"></script>
+    <script src="js/network-graph.js"></script>
+    <script>
+        // Initialize theme toggle
+        function initThemeToggle() {
+            const themeToggle = document.querySelector('.theme-toggle');
+            const body = document.body;
+            
+            if (themeToggle) {
+                themeToggle.addEventListener('click', () => {
+                    body.classList.toggle('light-theme');
+                    const icon = themeToggle.querySelector('.icon');
+                    icon.textContent = body.classList.contains('light-theme') ? '☀️' : '🌙';
+                    localStorage.setItem('theme', body.classList.contains('light-theme') ? 'light' : 'dark');
+                });
+
+                // Load saved theme
+                const savedTheme = localStorage.getItem('theme');
+                if (savedTheme === 'light') {
+                    body.classList.add('light-theme');
+                    const icon = themeToggle.querySelector('.icon');
+                    icon.textContent = '☀️';
+                }
+            }
+        }
+
+        // Initialize network graph
+        let networkGraph;
+
+        function initNetworkGraph() {
+            networkGraph = new NetworkGraph('networkCanvas', {
+                layoutMode: 'force-directed',
+                showLabels: true,
+                showParticles: true,
+                particleSpeed: 0.5
+            });
+
+            // Hide loading overlay
+            setTimeout(() => {
+                document.getElementById('loadingOverlay').style.display = 'none';
+            }, 1000);
+        }
+
+        // Control panel event listeners
+        function initControls() {
+            // Zoom controls
+            const zoomIn = document.getElementById('zoomIn');
+            const zoomOut = document.getElementById('zoomOut');
+            const zoomSlider = document.getElementById('zoomSlider');
+
+            zoomIn.addEventListener('click', () => {
+                const newValue = Math.min(100, parseFloat(zoomSlider.value) + 10);
+                zoomSlider.value = newValue;
+                networkGraph.setZoom(newValue);
+            });
+
+            zoomOut.addEventListener('click', () => {
+                const newValue = Math.max(0, parseFloat(zoomSlider.value) - 10);
+                zoomSlider.value = newValue;
+                networkGraph.setZoom(newValue);
+            });
+
+            zoomSlider.addEventListener('input', (e) => {
+                networkGraph.setZoom(parseFloat(e.target.value));
+            });
+
+            // View mode buttons
+            document.querySelectorAll('.view-mode-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    document.querySelectorAll('.view-mode-btn').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    networkGraph.setLayoutMode(btn.dataset.mode);
+                });
+            });
+
+            // Filters
+            document.getElementById('filterCore').addEventListener('change', (e) => {
+                networkGraph.setFilter('core', e.target.checked);
+            });
+
+            document.getElementById('filterVerticals').addEventListener('change', (e) => {
+                networkGraph.setFilter('verticals', e.target.checked);
+            });
+
+            document.getElementById('filterInfra').addEventListener('change', (e) => {
+                networkGraph.setFilter('infrastructure', e.target.checked);
+            });
+        }
+
+        // Close detail panel
+        function closeDetailPanel() {
+            const panel = document.querySelector('.node-detail-panel');
+            if (panel) {
+                panel.classList.remove('active');
+            }
+            if (networkGraph) {
+                networkGraph.selectedNode = null;
+            }
+        }
+
+        // Initialize everything when DOM is ready
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('🗺️ System Map Initialized');
+            
+            initThemeToggle();
+            initNetworkGraph();
+            initControls();
+
+            console.log('✅ Network graph ready');
+            console.log('📊 Real-time updates active');
+        });
+
+        // Cleanup on page unload
+        window.addEventListener('beforeunload', () => {
+            if (networkGraph) {
+                networkGraph.destroy();
+            }
+        });
+    </script>
+</body>
+</html>