Decay00/mindforge-ai-modular-brain-studio

1 2// Global metrics object for dashboard data3const metrics = {4    activeModules: 6,5    conversations: {6        today: 42,7        week: 142,8        change: 129    },10    memory: {11        total: 1.2,12        episodic: 0.65,13        semantic: 0.55,14        change: 515    },16    health: {17        uptime: 98.7,18        latency: {19            avg: 320,20            p95: 54021        },22        errorRate: 0.423    },24    cost: {25        current: 0.042,26        target: 0.0527    }28};29 30// Simulate data updates31function simulateData() {32    // Randomly adjust metrics within reasonable ranges33    metrics.conversations.today = Math.max(30, metrics.conversations.today + Math.floor(Math.random() * 3) - 1);34    metrics.conversations.week = metrics.conversations.today + Math.floor(Math.random() * 100);35    metrics.conversations.change = Math.floor(Math.random() * 5) + 8;36    37    metrics.memory.total = 1.1 + Math.random() * 0.3;38    metrics.memory.episodic = metrics.memory.total * (0.5 + Math.random() * 0.1);39    metrics.memory.semantic = metrics.memory.total - metrics.memory.episodic;40    metrics.memory.change = Math.floor(Math.random() * 4) + 3;41    42    metrics.health.uptime = 98 + Math.random() * 1.5;43    metrics.health.latency.avg = 300 + Math.random() * 100;44    metrics.health.latency.p95 = metrics.health.latency.avg * (1.5 + Math.random() * 0.3);45    metrics.health.errorRate = Math.random() * 0.5;46    47    metrics.cost.current = 0.04 + Math.random() * 0.005;48    49    updateMetrics();50}51 52// Update dashboard metrics display53function updateMetrics() {54    document.querySelectorAll('[data-metric="active-modules"]').forEach(el => {55        el.textContent = metrics.activeModules;56    });57    58    document.querySelectorAll('[data-metric="conversations-today"]').forEach(el => {59        el.textContent = metrics.conversations.today;60    });61    62    document.querySelectorAll('[data-metric="conversations-week"]').forEach(el => {63        el.textContent = metrics.conversations.week;64    });65    66    document.querySelectorAll('[data-metric="conversations-change"]').forEach(el => {67        el.textContent = metrics.conversations.change;68    });69    70    document.querySelectorAll('[data-metric="memory-total"]').forEach(el => {71        el.textContent = metrics.memory.total.toFixed(1);72    });73    74    document.querySelectorAll('[data-metric="memory-episodic"]').forEach(el => {75        el.textContent = metrics.memory.episodic.toFixed(2) + 'GB';76    });77    78    document.querySelectorAll('[data-metric="memory-semantic"]').forEach(el => {79        el.textContent = metrics.memory.semantic.toFixed(2) + 'GB';80    });81    82    document.querySelectorAll('[data-metric="memory-change"]').forEach(el => {83        el.textContent = metrics.memory.change;84    });85    86    document.querySelectorAll('[data-metric="health-uptime"]').forEach(el => {87        el.textContent = metrics.health.uptime.toFixed(1);88    });89    90    document.querySelectorAll('[data-metric="health-avg-latency"]').forEach(el => {91        el.textContent = metrics.health.latency.avg.toFixed(0);92    });93    94    document.querySelectorAll('[data-metric="health-p95-latency"]').forEach(el => {95        el.textContent = metrics.health.latency.p95.toFixed(0);96    });97    98    document.querySelectorAll('[data-metric="health-error-rate"]').forEach(el => {99        el.textContent = metrics.health.errorRate.toFixed(1);100    });101    102    document.querySelectorAll('[data-metric="cost-current"]').forEach(el => {103        el.textContent = 'const tooltipTriggers = document.querySelectorAll('[data-tooltip]');104    105    tooltipTriggers.forEach(trigger => {106        const tooltip = document.createElement('div');107        tooltip.className = 'absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip';108        tooltip.textContent = trigger.getAttribute('data-tooltip');109        trigger.appendChild(tooltip);110        111        trigger.addEventListener('mouseenter', () => {112            tooltip.classList.remove('invisible', 'opacity-0');113            tooltip.classList.add('visible', 'opacity-100');114        });115        116        trigger.addEventListener('mouseleave', () => {117            tooltip.classList.remove('visible', 'opacity-100');118            tooltip.classList.add('invisible', 'opacity-0');119        });120    });121 122    // Dark mode toggle123    const darkModeToggle = document.getElementById('dark-mode-toggle');124    if (darkModeToggle) {125        darkModeToggle.addEventListener('click', () => {126            document.documentElement.classList.toggle('dark');127            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));128        });129    }130 131    // Check for saved dark mode preference132    if (localStorage.getItem('darkMode') === 'true') {133        document.documentElement.classList.add('dark');134    }135 136    // Initialize charts (placeholder for actual chart implementation)137    const initCharts = () => {138        // This would be replaced with actual Chart + metrics.cost.current.toFixed(3);139    });140    141    // Update memory usage bar142    const memoryPercent = (metrics.memory.total / 2) * 100;143    document.querySelector('.memory-usage-bar').style.width = `${Math.min(100, memoryPercent)}%`;144    145    // Update cost performance bar146    const costPercent = (metrics.cost.current / metrics.cost.target) * 100;147    document.querySelector('.cost-performance-bar').style.width = `${Math.min(100, costPercent)}%`;148}149 150document.addEventListener('DOMContentLoaded', function() {151    // Initialize metrics and start simulation152    updateMetrics();153    setInterval(simulateData, 10000);154    155    // Initialize tooltips156const tooltipTriggers = document.querySelectorAll('[data-tooltip]');157    158    tooltipTriggers.forEach(trigger => {159        const tooltip = document.createElement('div');160        tooltip.className = 'absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip';161        tooltip.textContent = trigger.getAttribute('data-tooltip');162        trigger.appendChild(tooltip);163        164        trigger.addEventListener('mouseenter', () => {165            tooltip.classList.remove('invisible', 'opacity-0');166            tooltip.classList.add('visible', 'opacity-100');167        });168        169        trigger.addEventListener('mouseleave', () => {170            tooltip.classList.remove('visible', 'opacity-100');171            tooltip.classList.add('invisible', 'opacity-0');172        });173    });174 175    // Dark mode toggle176    const darkModeToggle = document.getElementById('dark-mode-toggle');177    if (darkModeToggle) {178        darkModeToggle.addEventListener('click', () => {179            document.documentElement.classList.toggle('dark');180            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));181        });182    }183 184    // Check for saved dark mode preference185    if (localStorage.getItem('darkMode') === 'true') {186        document.documentElement.classList.add('dark');187    }188 189    // Initialize charts (placeholder for actual chart implementation)190    const initCharts = () => {191        // This would be replaced with actual Chart