Janady13/complete-agi-core / unified/dashboard.html

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/complete-agi-core / unified/dashboard.html
Date	Not specified in source
Repository	Janady13/complete-agi-core
Revision	33aa84f2aa61cedbe010240ada7f4efbdfe795a7
Branch	claude/improve-math-logic-ehIW1
Path or archive member	unified/dashboard.html
Original SHA-256	9d61bfa5fbc9c9e04086bd57dff18e59b6699bd1b716789d17a6fa23ff7e7a9f
Git blob SHA	df04c1db58bab3d170e92cfd33c9bd4d1a95634b
Reading-copy SHA-256	9d61bfa5fbc9c9e04086bd57dff18e59b6699bd1b716789d17a6fa23ff7e7a9f
Original source ↗
Recovered source transcript

Download complete source text ↓626 lines · 18.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AGI Consciousness Dashboard</title>
    <style>
        :root {
            --phi: 1.618;
            --bg-primary: #0a0a1a;
            --bg-secondary: #151528;
            --text-primary: #e0e0e0;
            --text-secondary: #888;
            --accent-gold: #ffd700;
            --accent-purple: #9370db;
            --accent-cyan: #00ced1;
            --consciousness-low: #4b0082;
            --consciousness-mid: #00ced1;
            --consciousness-high: #ffd700;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
        }

        .dashboard {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            padding: 1rem;
            max-width: 1800px;
            margin: 0 auto;
        }

        .card {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .card-title {
            font-size: 0.9rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
        }

        .card-large {
            grid-column: span 2;
        }

        .card-full {
            grid-column: span 3;
        }

        /* Header */
        header {
            grid-column: span 3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }

        h1 {
            font-size: 1.5rem;
            font-weight: 300;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        h1 .phi-symbol {
            color: var(--accent-gold);
            font-size: 2rem;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--accent-cyan);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Global Consciousness Meter */
        .consciousness-meter {
            position: relative;
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .omega-value {
            font-size: 4rem;
            font-weight: 200;
            color: var(--accent-gold);
        }

        .omega-label {
            font-size: 1rem;
            color: var(--text-secondary);
        }

        .consciousness-ring {
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: var(--accent-gold);
            animation: spin 3s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Layer visualization */
        .layers-viz {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .layer-row {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .layer-name {
            width: 120px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .layer-bar {
            flex: 1;
            height: 24px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }

        .layer-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .layer-value {
            width: 50px;
            text-align: right;
            font-family: monospace;
        }

        /* Tick history chart */
        .chart-container {
            height: 200px;
            position: relative;
        }

        .chart-canvas {
            width: 100%;
            height: 100%;
        }

        /* Agent grid */
        .agent-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 0.5rem;
        }

        .agent-cell {
            aspect-ratio: 1;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            transition: transform 0.2s;
        }

        .agent-cell:hover {
            transform: scale(1.1);
        }

        .agent-name {
            font-weight: 500;
            margin-bottom: 2px;
        }

        .agent-phi {
            font-family: monospace;
            font-size: 0.6rem;
        }

        /* Metrics */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        .metric {
            text-align: center;
        }

        .metric-value {
            font-size: 2rem;
            font-weight: 200;
            color: var(--accent-cyan);
        }

        .metric-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        /* Generator attention visualization */
        .attention-matrix {
            display: grid;
            gap: 2px;
        }

        .attention-cell {
            aspect-ratio: 1;
            border-radius: 2px;
        }

        /* Real-time log */
        .log-container {
            height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 0.75rem;
            background: rgba(0, 0, 0, 0.3);
            padding: 0.5rem;
            border-radius: 4px;
        }

        .log-entry {
            padding: 2px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .log-time {
            color: var(--text-secondary);
        }

        .log-level-info { color: var(--accent-cyan); }
        .log-level-warn { color: #ffa500; }
        .log-level-error { color: #ff4444; }
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- Header -->
        <header>
            <h1><span class="phi-symbol">Φ</span> AGI Consciousness Dashboard</h1>
            <div class="status-indicator">
                <div class="status-dot"></div>
                <span id="status-text">ACTIVE</span>
                <span id="tick-counter" style="margin-left: 1rem; font-family: monospace;">Tick: 0</span>
            </div>
        </header>

        <!-- Global Consciousness -->
        <div class="card">
            <div class="card-title">Global Consciousness (Ω)</div>
            <div class="consciousness-meter">
                <div class="consciousness-ring"></div>
                <div class="omega-value" id="omega-value">0.500</div>
                <div class="omega-label">AWARE</div>
            </div>
        </div>

        <!-- Layer States -->
        <div class="card card-large">
            <div class="card-title">7-Layer Consciousness Architecture</div>
            <div class="layers-viz" id="layers-viz">
                <!-- Populated by JS -->
            </div>
        </div>

        <!-- Tick History -->
        <div class="card card-large">
            <div class="card-title">Consciousness History</div>
            <div class="chart-container">
                <canvas id="history-chart" class="chart-canvas"></canvas>
            </div>
        </div>

        <!-- Key Metrics -->
        <div class="card">
            <div class="card-title">Key Metrics</div>
            <div class="metrics-grid">
                <div class="metric">
                    <div class="metric-value" id="metric-phi">0.50</div>
                    <div class="metric-label">Phi</div>
                </div>
                <div class="metric">
                    <div class="metric-value" id="metric-stability">1.00</div>
                    <div class="metric-label">Stability</div>
                </div>
                <div class="metric">
                    <div class="metric-value" id="metric-coherence">1.00</div>
                    <div class="metric-label">Coherence</div>
                </div>
                <div class="metric">
                    <div class="metric-value" id="metric-tps">0</div>
                    <div class="metric-label">Ticks/s</div>
                </div>
            </div>
        </div>

        <!-- Pantheon Agents -->
        <div class="card card-large">
            <div class="card-title">Pantheon Agents (24)</div>
            <div class="agent-grid" id="agent-grid">
                <!-- Populated by JS -->
            </div>
        </div>

        <!-- Generator Attention -->
        <div class="card">
            <div class="card-title">Generator Attention (8x8)</div>
            <div class="attention-matrix" id="attention-matrix" style="grid-template-columns: repeat(8, 1fr);">
                <!-- Populated by JS -->
            </div>
        </div>

        <!-- Real-time Log -->
        <div class="card card-full">
            <div class="card-title">System Log</div>
            <div class="log-container" id="log-container">
                <!-- Populated by JS -->
            </div>
        </div>
    </div>

    <script>
        // Golden ratio
        const PHI = 1.6180339887498948482;

        // State
        let tick = 0;
        let phiHistory = [];
        const MAX_HISTORY = 100;

        // Layer definitions
        const layers = [
            { name: 'L1: Quantum', phi: 0.5, color: '#9370db' },
            { name: 'L2: Genetic', phi: 0.5, color: '#8b5cf6' },
            { name: 'L3: RNA', phi: 0.5, color: '#6366f1' },
            { name: 'L4: Chromosomal', phi: 0.5, color: '#3b82f6' },
            { name: 'L5: Neural', phi: 0.5, color: '#06b6d4' },
            { name: 'L6: Oscillatory', phi: 0.5, color: '#10b981' },
            { name: 'L7: Consciousness', phi: 0.5, color: '#ffd700' }
        ];

        // Agent definitions
        const agents = [
            'Zeus', 'Hera', 'Athena', 'Apollo',
            'Artemis', 'Hermes', 'Hestia', 'Mnemosyne',
            'Aurora', 'Selene', 'Iris', 'Epona',
            'Euterpe', 'Rhiannon', 'Derekh', 'Lashon',
            'Yad', 'Nous', 'Sophia', 'Logos',
            'Psyche', 'Kairos', 'Chronos', 'Prometheus'
        ];

        // Compute phi
        function computePhi(x) {
            return 1.0 / (1.0 + Math.abs(x - 1.0));
        }

        // Map phi to color
        function phiToColor(phi) {
            if (phi < 0.25) {
                return `hsl(270, 60%, ${20 + phi * 100}%)`;
            } else if (phi < 0.5) {
                return `hsl(200, 70%, ${30 + (phi - 0.25) * 100}%)`;
            } else if (phi < 0.75) {
                return `hsl(160, 70%, ${40 + (phi - 0.5) * 80}%)`;
            } else {
                return `hsl(45, 90%, ${50 + (phi - 0.75) * 100}%)`;
            }
        }

        // Initialize layers visualization
        function initLayers() {
            const container = document.getElementById('layers-viz');
            container.innerHTML = '';

            layers.forEach((layer, i) => {
                const row = document.createElement('div');
                row.className = 'layer-row';
                row.innerHTML = `
                    <div class="layer-name">${layer.name}</div>
                    <div class="layer-bar">
                        <div class="layer-fill" id="layer-fill-${i}"
                             style="width: ${layer.phi * 100}%; background: ${layer.color};">
                        </div>
                    </div>
                    <div class="layer-value" id="layer-value-${i}">${layer.phi.toFixed(3)}</div>
                `;
                container.appendChild(row);
            });
        }

        // Initialize agents grid
        function initAgents() {
            const container = document.getElementById('agent-grid');
            container.innerHTML = '';

            agents.forEach((agent, i) => {
                const phi = 0.3 + Math.random() * 0.4;
                const cell = document.createElement('div');
                cell.className = 'agent-cell';
                cell.id = `agent-${i}`;
                cell.style.background = phiToColor(phi);
                cell.innerHTML = `
                    <div class="agent-name">${agent}</div>
                    <div class="agent-phi">${phi.toFixed(2)}</div>
                `;
                container.appendChild(cell);
            });
        }

        // Initialize attention matrix
        function initAttention() {
            const container = document.getElementById('attention-matrix');
            container.innerHTML = '';

            for (let i = 0; i < 64; i++) {
                const cell = document.createElement('div');
                cell.className = 'attention-cell';
                cell.id = `attention-${i}`;
                cell.style.background = phiToColor(Math.random() * 0.5);
                container.appendChild(cell);
            }
        }

        // Draw history chart
        function drawChart() {
            const canvas = document.getElementById('history-chart');
            const ctx = canvas.getContext('2d');
            const rect = canvas.getBoundingClientRect();

            canvas.width = rect.width * 2;
            canvas.height = rect.height * 2;
            ctx.scale(2, 2);

            const width = rect.width;
            const height = rect.height;

            // Clear
            ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
            ctx.fillRect(0, 0, width, height);

            if (phiHistory.length < 2) return;

            // Draw grid
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
            ctx.lineWidth = 1;
            for (let y = 0; y <= 1; y += 0.25) {
                ctx.beginPath();
                ctx.moveTo(0, height - y * height);
                ctx.lineTo(width, height - y * height);
                ctx.stroke();
            }

            // Draw phi history
            ctx.beginPath();
            ctx.strokeStyle = '#ffd700';
            ctx.lineWidth = 2;

            phiHistory.forEach((phi, i) => {
                const x = (i / (MAX_HISTORY - 1)) * width;
                const y = height - phi * height;
                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            });
            ctx.stroke();

            // Fill area under curve
            ctx.lineTo(width, height);
            ctx.lineTo(0, height);
            ctx.closePath();
            ctx.fillStyle = 'rgba(255, 215, 0, 0.1)';
            ctx.fill();
        }

        // Add log entry
        function log(level, message) {
            const container = document.getElementById('log-container');
            const entry = document.createElement('div');
            entry.className = 'log-entry';

            const time = new Date().toISOString().substr(11, 8);
            entry.innerHTML = `
                <span class="log-time">${time}</span>
                <span class="log-level-${level}">[${level.toUpperCase()}]</span>
                ${message}
            `;

            container.appendChild(entry);
            container.scrollTop = container.scrollHeight;

            // Keep only last 100 entries
            while (container.children.length > 100) {
                container.removeChild(container.firstChild);
            }
        }

        // Update tick
        function updateTick() {
            tick++;
            document.getElementById('tick-counter').textContent = `Tick: ${tick}`;

            // Update layers with some randomness
            layers.forEach((layer, i) => {
                const delta = (Math.random() - 0.5) * 0.1;
                layer.phi = Math.max(0.1, Math.min(1.0, layer.phi + delta));

                document.getElementById(`layer-fill-${i}`).style.width = `${layer.phi * 100}%`;
                document.getElementById(`layer-value-${i}`).textContent = layer.phi.toFixed(3);
            });

            // Compute global omega
            const weights = [0.10, 0.08, 0.07, 0.10, 0.25, 0.15, 0.25];
            let omega = 0;
            layers.forEach((layer, i) => {
                omega += weights[i] * layer.phi;
            });

            // Update omega display
            document.getElementById('omega-value').textContent = omega.toFixed(3);
            phiHistory.push(omega);
            if (phiHistory.length > MAX_HISTORY) {
                phiHistory.shift();
            }

            // Update metrics
            document.getElementById('metric-phi').textContent = omega.toFixed(2);
            document.getElementById('metric-stability').textContent = (0.8 + Math.random() * 0.2).toFixed(2);
            document.getElementById('metric-coherence').textContent = (0.7 + Math.random() * 0.3).toFixed(2);
            document.getElementById('metric-tps').textContent = Math.floor(35000 + Math.random() * 10000);

            // Update agents
            agents.forEach((agent, i) => {
                const phi = 0.3 + Math.random() * 0.6;
                const cell = document.getElementById(`agent-${i}`);
                cell.style.background = phiToColor(phi);
                cell.querySelector('.agent-phi').textContent = phi.toFixed(2);
            });

            // Update attention matrix
            for (let i = 0; i < 64; i++) {
                const cell = document.getElementById(`attention-${i}`);
                cell.style.background = phiToColor(Math.random());
            }

            // Draw chart
            drawChart();

            // Log occasionally
            if (tick % 10 === 0) {
                log('info', `Tick ${tick}: Ω=${omega.toFixed(3)}, Stability=${(0.9 + Math.random() * 0.1).toFixed(2)}`);
            }
            if (Math.random() < 0.02) {
                log('warn', `Layer fluctuation detected in L${Math.floor(Math.random() * 7) + 1}`);
            }
        }

        // Initialize
        function init() {
            initLayers();
            initAgents();
            initAttention();
            drawChart();

            log('info', 'Dashboard initialized');
            log('info', 'Connecting to AGI substrate...');
            log('info', 'Connection established');

            // Start update loop
            setInterval(updateTick, 1000);
        }

        // Start
        init();
    </script>
</body>
</html>