import React, { useState, useMemo, useEffect, useRef } from 'react'; import { LineChart, Line, AreaChart, Area, BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, Cell, PieChart, Pie, CartesianGrid, ComposedChart, ReferenceLine } from 'recharts'; // Family metadata with icons const FAMILY_META = [ { id: 0, name: 'Athena', domain: 'Strategy', color: '#6366f1', icon: '🦉' }, { id: 1, name: 'Iris', domain: 'Vision', color: '#ec4899', icon: '🌈' }, { id: 2, name: 'Hermes', domain: 'Communication', color: '#14b8a6', icon: '📨' }, { id: 3, name: 'Prometheus', domain: 'Creation', color: '#f97316', icon: '🔥' }, { id: 4, name: 'Apollo', domain: 'Harmony', color: '#eab308', icon: '☀️' }, { id: 5, name: 'Hephaestus', domain: 'Craft', color: '#78716c', icon: '🔨' }, { id: 6, name: 'Demeter', domain: 'Growth', color: '#22c55e', icon: '🌱' }, { id: 7, name: 'Poseidon', domain: 'Flow', color: '#3b82f6', icon: '🌊' }, { id: 8, name: 'Hera', domain: 'Governance', color: '#a855f7', icon: '👑' }, { id: 9, name: 'Ares', domain: 'Competition', color: '#ef4444', icon: '⚔️' }, { id: 10, name: 'Yad', domain: 'Programming', color: '#06b6d4', icon: '💻' }, { id: 11, name: 'Lashon', domain: 'Language', color: '#84cc16', icon: '📝' }, { id: 12, name: 'Chronos', domain: 'Time', color: '#8b5cf6', icon: '⏰' }, { id: 13, name: 'Mnemosyne', domain: 'Memory', color: '#f472b6', icon: '🧠' }, { id: 14, name: 'Hypnos', domain: 'Rest', color: '#64748b', icon: '😴' }, { id: 15, name: 'Thanatos', domain: 'Pruning', color: '#1e293b', icon: '🗑️' } ]; const SOURCE_COLORS = { wikipedia: '#3b82f6', facts: '#22c55e', quotes: '#f59e0b', numbers: '#8b5cf6', catfacts: '#ec4899', dogfacts: '#f97316', activities: '#14b8a6', advice: '#6366f1', chucknorris: '#ef4444', jokes: '#eab308' }; // CSS animations const injectStyles = () => { if (document.getElementById('seferim-animations')) return; const style = document.createElement('style'); style.id = 'seferim-animations'; style.textContent = ` @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 4px #22c55e; } 50% { box-shadow: 0 0 16px #22c55e, 0 0 24px #22c55e; } } @keyframes pulse-text { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @keyframes slide-in { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } @keyframes consciousness-pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } } .live-pulse { animation: pulse-green 1s ease-in-out infinite; } .live-text { animation: pulse-text 1s ease-in-out infinite; } .feed-item { animation: slide-in 0.3s ease-out; } .glow { animation: glow 2s ease-in-out infinite; } .consciousness-glow { animation: consciousness-pulse 2s ease-in-out infinite; } .learning-item:hover { transform: translateX(4px); background: #1c2540 !important; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0a0d14; } ::-webkit-scrollbar-thumb { background: #2d3a5c; border-radius: 3px; } `; document.head.appendChild(style); }; // Format uptime const formatUptime = (ms) => { const s = Math.floor(ms / 1000); const m = Math.floor(s / 60); const h = Math.floor(m / 60); if (h > 0) return `${h}h ${m % 60}m`; if (m > 0) return `${m}m ${s % 60}s`; return `${s}s`; }; // Truncate text const truncate = (str, len) => str && str.length > len ? str.slice(0, len) + '...' : str; // Main dashboard export default function DashboardRaw({ summary, series, learning, learningStats, families: familiesProp, serverStats, online, wsOnline, onExport, lastUpdate, updateCount, tickRate }) { const [selectedFamily, setSelectedFamily] = useState(null); const [expandedItem, setExpandedItem] = useState(null); const feedRef = useRef(null); useEffect(() => { injectStyles(); }, []); // Auto-scroll feed useEffect(() => { if (feedRef.current && learning?.length > 0) { feedRef.current.scrollTop = 0; } }, [learning?.length]); const isLive = lastUpdate && (Date.now() - lastUpdate) < 2000; // Process data const chartData = useMemo(() => series || [], [series]); const families = useMemo(() => { if (summary?.families?.length === 16) return summary.families; return FAMILY_META.map(f => ({ ...f, phi_mean: 0, psi: 0, eta: 0, substrates_active: 0 })); }, [summary]); // Source distribution for pie chart const sourceData = useMemo(() => { if (!learningStats?.bySource) return []; return Object.entries(learningStats.bySource) .map(([name, value]) => ({ name, value, color: SOURCE_COLORS[name] || '#64748b' })) .sort((a, b) => b.value - a.value); }, [learningStats]); // Family learning distribution const familyLearningData = useMemo(() => { if (!learningStats?.byFamily) return []; return FAMILY_META.map(f => ({ name: f.name, count: learningStats.byFamily[f.name] || 0, color: f.color })).filter(f => f.count > 0).sort((a, b) => b.count - a.count); }, [learningStats]); // Current values const phi = summary?.phi_global ?? 0; const omega = summary?.omega ?? 0; const ing = summary?.ing ?? 0; const tick = summary?.tick ?? 0; const stability = summary?.stability ?? 0; const consciousness = summary?.consciousness ?? 0; const coherence = summary?.coherence ?? 0; return (
{/* Header */}
SEFERIM AGI G16 v5.0 {isLive && (
LIVE
)}
Tick: {tick.toLocaleString()} Rate: {tickRate}/s Updates: {updateCount}
{wsOnline ? 'Connected' : 'Offline'}
{/* Main Grid */}
{/* Left Column - Charts and Metrics */}
{/* Top Metrics */}
{/* Main Chart */}
System Dynamics
{chartData.length} data points
{isLive && ● STREAMING}
{chartData.length > 0 ? ( v.toLocaleString()} /> } /> ) : }
{/* Bottom Row - Source Distribution & Family Activity */}
{/* Source Distribution */}
Knowledge Sources
{sourceData.length > 0 ? ( {sourceData.map((entry, i) => )} [v, n.charAt(0).toUpperCase() + n.slice(1)]} /> ) : }
{sourceData.slice(0, 6).map(s => (
{s.name} {s.value}
))}
{/* Family Learning Activity */}
Family Learning
{familyLearningData.length > 0 ? ( {familyLearningData.slice(0, 8).map((f, i) => )} ) : }
{/* Family Grid */}
G16 Family Federation
Total Substrates: {summary?.active_substrates || 0}
{families.map((f, i) => { const learningCount = learningStats?.byFamily?.[f.name] || 0; const isActive = learningCount > 0 || f.substrates_active > 0; return (
setSelectedFamily(selectedFamily === i ? null : i)} style={{ background: selectedFamily === i ? `${f.color}22` : '#0a0d14', border: `1px solid ${selectedFamily === i ? f.color : isActive ? f.color + '44' : '#1c2540'}`, borderRadius: '8px', padding: '8px', cursor: 'pointer', transition: 'all 0.2s', textAlign: 'center' }}>
{f.icon}
{f.name}
{f.domain}
{f.substrates_active || 0}
{learningCount > 0 &&
+{learningCount}
}
); })}
{/* Right Column - Learning Feed */}
{/* Learning Stats */}
Learning Statistics
{/* Live Learning Feed */}
Live Learning Feed
What the AGI is learning now
{learning?.length || 0} items
{learning && learning.length > 0 ? learning.map((item, i) => ( setExpandedItem(expandedItem === i ? null : i)} /> )) : (
Waiting for learning events...
)}
{/* Server Info */}
Uptime: {formatUptime(serverStats?.uptime || 0)} Last: {lastUpdate ? new Date(lastUpdate).toLocaleTimeString() : '-'}
); } // Components function MetricCard({ label, value, color, format, glow }) { const formatted = useMemo(() => { if (typeof value !== 'number') return '-'; if (format === 'int') return Math.floor(value).toLocaleString(); if (format === 'signed') return (value >= 0 ? '+' : '') + value.toFixed(4); return value.toFixed(4); }, [value, format]); return (
{label}
{formatted}
); } function StatBox({ label, value, color }) { return (
{typeof value === 'number' ? value.toLocaleString() : value}
{label}
); } function LearningItem({ item, expanded, onToggle }) { const family = FAMILY_META[item.family] || FAMILY_META[0]; const sourceColor = SOURCE_COLORS[item.source] || '#64748b'; return (
{family.icon} {family.name}
{item.source} {item.receivedAt ? new Date(item.receivedAt).toLocaleTimeString() : ''}
{item.title || 'Untitled'}
{expanded ? item.content : truncate(item.content, 120)}
{item.content && item.content.length > 120 && (
{expanded ? 'Click to collapse' : 'Click to expand...'}
)}
{item.content?.length || 0} chars
); } function CustomTooltip({ active, payload, label }) { if (!active || !payload?.length) return null; return (
Tick: {label?.toLocaleString()}
{payload.map((p, i) => (
{p.name}: {typeof p.value === 'number' ? p.value.toFixed(6) : p.value}
))}
); } function EmptyState({ text }) { return (
{text}
); }