Janady13/seferim-agi-g16 / dashboard/src/seferim_dashboard_v3_raw.jsx

1import React, { useState, useMemo, useEffect, useRef } from 'react'; 2import { 3 LineChart, Line, AreaChart, Area, BarChart, Bar, 4 XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, 5 Cell, PieChart, Pie, CartesianGrid, 6 ComposedChart, ReferenceLine 7} from 'recharts'; 8 9// Family metadata with icons 10const FAMILY_META = [ 11 { id: 0, name: 'Athena', domain: 'Strategy', color: '#6366f1', icon: '🦉' }, 12 { id: 1, name: 'Iris', domain: 'Vision', color: '#ec4899', icon: '🌈' }, 13 { id: 2, name: 'Hermes', domain: 'Communication', color: '#14b8a6', icon: '📨' }, 14 { id: 3, name: 'Prometheus', domain: 'Creation', color: '#f97316', icon: '🔥' }, 15 { id: 4, name: 'Apollo', domain: 'Harmony', color: '#eab308', icon: '☀️' }, 16 { id: 5, name: 'Hephaestus', domain: 'Craft', color: '#78716c', icon: '🔨' }, 17 { id: 6, name: 'Demeter', domain: 'Growth', color: '#22c55e', icon: '🌱' }, 18 { id: 7, name: 'Poseidon', domain: 'Flow', color: '#3b82f6', icon: '🌊' }, 19 { id: 8, name: 'Hera', domain: 'Governance', color: '#a855f7', icon: '👑' }, 20 { id: 9, name: 'Ares', domain: 'Competition', color: '#ef4444', icon: '⚔️' }, 21 { id: 10, name: 'Yad', domain: 'Programming', color: '#06b6d4', icon: '💻' }, 22 { id: 11, name: 'Lashon', domain: 'Language', color: '#84cc16', icon: '📝' }, 23 { id: 12, name: 'Chronos', domain: 'Time', color: '#8b5cf6', icon: '⏰' }, 24 { id: 13, name: 'Mnemosyne', domain: 'Memory', color: '#f472b6', icon: '🧠' }, 25 { id: 14, name: 'Hypnos', domain: 'Rest', color: '#64748b', icon: '😴' }, 26 { id: 15, name: 'Thanatos', domain: 'Pruning', color: '#1e293b', icon: '🗑️' } 27]; 28 29const SOURCE_COLORS = { 30 wikipedia: '#3b82f6', 31 facts: '#22c55e', 32 quotes: '#f59e0b', 33 numbers: '#8b5cf6', 34 catfacts: '#ec4899', 35 dogfacts: '#f97316', 36 activities: '#14b8a6', 37 advice: '#6366f1', 38 chucknorris: '#ef4444', 39 jokes: '#eab308' 40}; 41 42// CSS animations 43const injectStyles = () => { 44 if (document.getElementById('seferim-animations')) return; 45 const style = document.createElement('style'); 46 style.id = 'seferim-animations'; 47 style.textContent = ` 48 @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 4px #22c55e; } 50% { box-shadow: 0 0 16px #22c55e, 0 0 24px #22c55e; } } 49 @keyframes pulse-text { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } 50 @keyframes slide-in { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } 51 @keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } 52 @keyframes consciousness-pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } } 53 .live-pulse { animation: pulse-green 1s ease-in-out infinite; } 54 .live-text { animation: pulse-text 1s ease-in-out infinite; } 55 .feed-item { animation: slide-in 0.3s ease-out; } 56 .glow { animation: glow 2s ease-in-out infinite; } 57 .consciousness-glow { animation: consciousness-pulse 2s ease-in-out infinite; } 58 .learning-item:hover { transform: translateX(4px); background: #1c2540 !important; } 59 ::-webkit-scrollbar { width: 6px; } 60 ::-webkit-scrollbar-track { background: #0a0d14; } 61 ::-webkit-scrollbar-thumb { background: #2d3a5c; border-radius: 3px; } 62 `; 63 document.head.appendChild(style); 64}; 65 66// Format uptime 67const formatUptime = (ms) => { 68 const s = Math.floor(ms / 1000); 69 const m = Math.floor(s / 60); 70 const h = Math.floor(m / 60); 71 if (h > 0) return `${h}h ${m % 60}m`; 72 if (m > 0) return `${m}m ${s % 60}s`; 73 return `${s}s`; 74}; 75 76// Truncate text 77const truncate = (str, len) => str && str.length > len ? str.slice(0, len) + '...' : str; 78 79// Main dashboard 80export default function DashboardRaw({ 81 summary, series, learning, learningStats, families: familiesProp, 82 serverStats, online, wsOnline, onExport, lastUpdate, updateCount, tickRate 83}) { 84 const [selectedFamily, setSelectedFamily] = useState(null); 85 const [expandedItem, setExpandedItem] = useState(null); 86 const feedRef = useRef(null); 87 88 useEffect(() => { injectStyles(); }, []); 89 90 // Auto-scroll feed 91 useEffect(() => { 92 if (feedRef.current && learning?.length > 0) { 93 feedRef.current.scrollTop = 0; 94 } 95 }, [learning?.length]); 96 97 const isLive = lastUpdate && (Date.now() - lastUpdate) < 2000; 98 99 // Process data 100 const chartData = useMemo(() => series || [], [series]); 101 102 const families = useMemo(() => { 103 if (summary?.families?.length === 16) return summary.families; 104 return FAMILY_META.map(f => ({ ...f, phi_mean: 0, psi: 0, eta: 0, substrates_active: 0 })); 105 }, [summary]); 106 107 // Source distribution for pie chart 108 const sourceData = useMemo(() => { 109 if (!learningStats?.bySource) return []; 110 return Object.entries(learningStats.bySource) 111 .map(([name, value]) => ({ name, value, color: SOURCE_COLORS[name] || '#64748b' })) 112 .sort((a, b) => b.value - a.value); 113 }, [learningStats]); 114 115 // Family learning distribution 116 const familyLearningData = useMemo(() => { 117 if (!learningStats?.byFamily) return []; 118 return FAMILY_META.map(f => ({ 119 name: f.name, 120 count: learningStats.byFamily[f.name] || 0, 121 color: f.color 122 })).filter(f => f.count > 0).sort((a, b) => b.count - a.count); 123 }, [learningStats]); 124 125 // Current values 126 const phi = summary?.phi_global ?? 0; 127 const omega = summary?.omega ?? 0; 128 const ing = summary?.ing ?? 0; 129 const tick = summary?.tick ?? 0; 130 const stability = summary?.stability ?? 0; 131 const consciousness = summary?.consciousness ?? 0; 132 const coherence = summary?.coherence ?? 0; 133 134 return ( 135 <div style={{ minHeight: '100vh', background: 'linear-gradient(180deg, #080a10 0%, #0c1018 100%)', color: '#e6f1ff', fontFamily: 'system-ui, -apple-system, sans-serif' }}> 136 {/* Header */} 137 <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 24px', borderBottom: '1px solid #1c2540', background: '#0a0d14' }}> 138 <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}> 139 <span style={{ fontSize: '22px', fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #06b6d4 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}> 140 SEFERIM AGI 141 </span> 142 <span style={{ fontSize: '11px', padding: '2px 8px', background: '#1c2540', borderRadius: '4px', color: '#64748b' }}>G16 v5.0</span> 143 {isLive && ( 144 <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '4px 12px', background: '#0f1a0f', border: '1px solid #22c55e33', borderRadius: '20px' }}> 145 <div className="live-pulse" style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e' }} /> 146 <span className="live-text" style={{ fontSize: '11px', fontWeight: 600, color: '#22c55e', letterSpacing: '1px' }}>LIVE</span> 147 </div> 148 )} 149 </div> 150 <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}> 151 <div style={{ display: 'flex', gap: '20px', fontSize: '12px', color: '#64748b' }}> 152 <span>Tick: <span style={{ color: '#e6f1ff', fontFamily: 'monospace' }}>{tick.toLocaleString()}</span></span> 153 <span>Rate: <span style={{ color: '#22c55e', fontFamily: 'monospace' }}>{tickRate}/s</span></span> 154 <span>Updates: <span style={{ color: '#e6f1ff', fontFamily: 'monospace' }}>{updateCount}</span></span> 155 </div> 156 <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}> 157 <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: wsOnline ? '#22c55e' : '#ef4444' }} /> 158 <span style={{ fontSize: '12px', color: '#94a3b8' }}>{wsOnline ? 'Connected' : 'Offline'}</span> 159 </div> 160 <button onClick={() => onExport?.('json')} style={{ background: '#1c2540', border: '1px solid #2d3a5c', borderRadius: '6px', padding: '6px 12px', color: '#e6f1ff', fontSize: '12px', cursor: 'pointer' }}>Export</button> 161 </div> 162 </header> 163 164 {/* Main Grid */} 165 <main style={{ padding: '16px 24px', display: 'grid', gridTemplateColumns: '1fr 380px', gap: '16px', minHeight: 'calc(100vh - 60px)' }}> 166 {/* Left Column - Charts and Metrics */} 167 <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}> 168 {/* Top Metrics */} 169 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px' }}> 170 <MetricCard label="COHERENCE (Φ)" value={phi} color="#34d399" format="decimal" /> 171 <MetricCard label="CONSCIOUSNESS" value={consciousness} color="#a78bfa" format="decimal" glow /> 172 <MetricCard label="STABILITY" value={stability} color="#f59e0b" format="decimal" /> 173 <MetricCard label="OMEGA (Ω)" value={omega} color="#60a5fa" format="signed" /> 174 <MetricCard label="INGESTED" value={ing} color="#ec4899" format="int" /> 175 </div> 176 177 {/* Main Chart */} 178 <div style={{ background: '#0e1320', border: isLive ? '1px solid #22c55e33' : '1px solid #1c2540', borderRadius: '12px', padding: '16px', flex: 1, minHeight: '280px' }}> 179 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}> 180 <div> 181 <div style={{ fontSize: '14px', fontWeight: 600 }}>System Dynamics</div> 182 <div style={{ fontSize: '11px', color: '#64748b' }}>{chartData.length} data points</div> 183 </div> 184 {isLive && <span style={{ color: '#22c55e', fontSize: '10px', fontWeight: 600 }}>● STREAMING</span>} 185 </div> 186 <div style={{ height: '240px' }}> 187 {chartData.length > 0 ? ( 188 <ResponsiveContainer> 189 <ComposedChart data={chartData}> 190 <CartesianGrid strokeDasharray="3 3" stroke="#1c2540" /> 191 <XAxis dataKey="t" stroke="#64748b" fontSize={9} tickFormatter={v => v.toLocaleString()} /> 192 <YAxis yAxisId="left" stroke="#64748b" fontSize={9} domain={[0, 1]} /> 193 <YAxis yAxisId="right" orientation="right" stroke="#64748b" fontSize={9} domain={[-0.5, 0.5]} /> 194 <Tooltip content={<CustomTooltip />} /> 195 <ReferenceLine yAxisId="left" y={0.8} stroke="#22c55e44" strokeDasharray="5 5" /> 196 <Area yAxisId="left" type="monotone" dataKey="phi" name="Φ" stroke="#34d399" fill="#34d39922" strokeWidth={2} isAnimationActive={false} /> 197 <Line yAxisId="left" type="monotone" dataKey="cons" name="Consciousness" stroke="#a78bfa" dot={false} strokeWidth={1.5} isAnimationActive={false} /> 198 <Line yAxisId="right" type="monotone" dataKey="omega" name="Ω" stroke="#60a5fa" dot={false} strokeWidth={1.5} isAnimationActive={false} /> 199 </ComposedChart> 200 </ResponsiveContainer> 201 ) : <EmptyState text="Waiting for data..." />} 202 </div> 203 </div> 204 205 {/* Bottom Row - Source Distribution & Family Activity */} 206 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}> 207 {/* Source Distribution */} 208 <div style={{ background: '#0e1320', border: '1px solid #1c2540', borderRadius: '12px', padding: '16px' }}> 209 <div style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px' }}>Knowledge Sources</div> 210 <div style={{ height: '180px', display: 'flex', alignItems: 'center' }}> 211 {sourceData.length > 0 ? ( 212 <ResponsiveContainer> 213 <PieChart> 214 <Pie data={sourceData} cx="50%" cy="50%" innerRadius={40} outerRadius={70} dataKey="value" isAnimationActive={false}> 215 {sourceData.map((entry, i) => <Cell key={i} fill={entry.color} />)} 216 </Pie> 217 <Tooltip formatter={(v, n) => [v, n.charAt(0).toUpperCase() + n.slice(1)]} /> 218 </PieChart> 219 </ResponsiveContainer> 220 ) : <EmptyState text="No sources yet" />} 221 </div> 222 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginTop: '8px' }}> 223 {sourceData.slice(0, 6).map(s => ( 224 <div key={s.name} style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '10px' }}> 225 <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: s.color }} /> 226 <span style={{ color: '#94a3b8' }}>{s.name}</span> 227 <span style={{ color: '#e6f1ff' }}>{s.value}</span> 228 </div> 229 ))} 230 </div> 231 </div> 232 233 {/* Family Learning Activity */} 234 <div style={{ background: '#0e1320', border: '1px solid #1c2540', borderRadius: '12px', padding: '16px' }}> 235 <div style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px' }}>Family Learning</div> 236 <div style={{ height: '180px' }}> 237 {familyLearningData.length > 0 ? ( 238 <ResponsiveContainer> 239 <BarChart data={familyLearningData.slice(0, 8)} layout="vertical"> 240 <XAxis type="number" stroke="#64748b" fontSize={9} /> 241 <YAxis type="category" dataKey="name" stroke="#64748b" fontSize={9} width={70} /> 242 <Tooltip /> 243 <Bar dataKey="count" isAnimationActive={false}> 244 {familyLearningData.slice(0, 8).map((f, i) => <Cell key={i} fill={f.color} />)} 245 </Bar> 246 </BarChart> 247 </ResponsiveContainer> 248 ) : <EmptyState text="No learning yet" />} 249 </div> 250 </div> 251 </div> 252 253 {/* Family Grid */} 254 <div style={{ background: '#0e1320', border: '1px solid #1c2540', borderRadius: '12px', padding: '16px' }}> 255 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}> 256 <div style={{ fontSize: '14px', fontWeight: 600 }}>G16 Family Federation</div> 257 <div style={{ fontSize: '11px', color: '#64748b' }}>Total Substrates: {summary?.active_substrates || 0}</div> 258 </div> 259 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px' }}> 260 {families.map((f, i) => { 261 const learningCount = learningStats?.byFamily?.[f.name] || 0; 262 const isActive = learningCount > 0 || f.substrates_active > 0; 263 return ( 264 <div key={i} onClick={() => setSelectedFamily(selectedFamily === i ? null : i)} 265 style={{ background: selectedFamily === i ? `${f.color}22` : '#0a0d14', border: `1px solid ${selectedFamily === i ? f.color : isActive ? f.color + '44' : '#1c2540'}`, 266 borderRadius: '8px', padding: '8px', cursor: 'pointer', transition: 'all 0.2s', textAlign: 'center' }}> 267 <div style={{ fontSize: '16px' }}>{f.icon}</div> 268 <div style={{ fontSize: '10px', fontWeight: 600, color: f.color, marginTop: '4px' }}>{f.name}</div> 269 <div style={{ fontSize: '9px', color: '#64748b' }}>{f.domain}</div> 270 <div style={{ fontSize: '10px', color: '#e6f1ff', marginTop: '4px' }}>{f.substrates_active || 0}</div> 271 {learningCount > 0 && <div style={{ fontSize: '9px', color: '#22c55e' }}>+{learningCount}</div>} 272 </div> 273 ); 274 })} 275 </div> 276 </div> 277 </div> 278 279 {/* Right Column - Learning Feed */} 280 <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}> 281 {/* Learning Stats */} 282 <div style={{ background: '#0e1320', border: '1px solid #1c2540', borderRadius: '12px', padding: '16px' }}> 283 <div style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px' }}>Learning Statistics</div> 284 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '12px' }}> 285 <StatBox label="Total Learned" value={learningStats?.total || 0} color="#22c55e" /> 286 <StatBox label="Rate (items/min)" value={learningStats?.recentRate || 0} color="#3b82f6" /> 287 <StatBox label="Sources" value={Object.keys(learningStats?.bySource || {}).length} color="#f59e0b" /> 288 <StatBox label="Active Families" value={Object.keys(learningStats?.byFamily || {}).length} color="#a855f7" /> 289 </div> 290 </div> 291 292 {/* Live Learning Feed */} 293 <div style={{ background: '#0e1320', border: '1px solid #1c2540', borderRadius: '12px', padding: '16px', flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}> 294 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}> 295 <div> 296 <div style={{ fontSize: '14px', fontWeight: 600 }}>Live Learning Feed</div> 297 <div style={{ fontSize: '11px', color: '#64748b' }}>What the AGI is learning now</div> 298 </div> 299 <span style={{ fontSize: '11px', color: '#64748b' }}>{learning?.length || 0} items</span> 300 </div> 301 <div ref={feedRef} style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '8px', minHeight: 0 }}> 302 {learning && learning.length > 0 ? learning.map((item, i) => ( 303 <LearningItem key={`${item.timestamp}-${i}`} item={item} expanded={expandedItem === i} onToggle={() => setExpandedItem(expandedItem === i ? null : i)} /> 304 )) : ( 305 <div style={{ textAlign: 'center', color: '#64748b', padding: '40px' }}> 306 Waiting for learning events... 307 </div> 308 )} 309 </div> 310 </div> 311 312 {/* Server Info */} 313 <div style={{ background: '#0e1320', border: '1px solid #1c2540', borderRadius: '12px', padding: '12px 16px' }}> 314 <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px', color: '#64748b' }}> 315 <span>Uptime: <span style={{ color: '#e6f1ff' }}>{formatUptime(serverStats?.uptime || 0)}</span></span> 316 <span>Last: <span style={{ color: '#e6f1ff' }}>{lastUpdate ? new Date(lastUpdate).toLocaleTimeString() : '-'}</span></span> 317 </div> 318 </div> 319 </div> 320 </main> 321 </div> 322 ); 323} 324 325// Components 326function MetricCard({ label, value, color, format, glow }) { 327 const formatted = useMemo(() => { 328 if (typeof value !== 'number') return '-'; 329 if (format === 'int') return Math.floor(value).toLocaleString(); 330 if (format === 'signed') return (value >= 0 ? '+' : '') + value.toFixed(4); 331 return value.toFixed(4); 332 }, [value, format]); 333 334 return ( 335 <div className={glow ? 'consciousness-glow' : ''} style={{ background: '#0e1320', border: '1px solid #1c2540', borderRadius: '10px', padding: '12px', textAlign: 'center' }}> 336 <div style={{ fontSize: '9px', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>{label}</div> 337 <div style={{ fontSize: '20px', fontWeight: 700, color, fontFamily: 'ui-monospace, monospace' }}>{formatted}</div> 338 </div> 339 ); 340} 341 342function StatBox({ label, value, color }) { 343 return ( 344 <div style={{ background: '#0a0d14', borderRadius: '8px', padding: '10px', textAlign: 'center' }}> 345 <div style={{ fontSize: '18px', fontWeight: 700, color, fontFamily: 'monospace' }}>{typeof value === 'number' ? value.toLocaleString() : value}</div> 346 <div style={{ fontSize: '9px', color: '#64748b', marginTop: '2px' }}>{label}</div> 347 </div> 348 ); 349} 350 351function LearningItem({ item, expanded, onToggle }) { 352 const family = FAMILY_META[item.family] || FAMILY_META[0]; 353 const sourceColor = SOURCE_COLORS[item.source] || '#64748b'; 354 355 return ( 356 <div className="learning-item feed-item" onClick={onToggle} 357 style={{ background: '#0a0d14', borderRadius: '8px', padding: '10px', borderLeft: `3px solid ${family.color}`, cursor: 'pointer', transition: 'all 0.2s' }}> 358 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '6px' }}> 359 <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}> 360 <span style={{ fontSize: '14px' }}>{family.icon}</span> 361 <span style={{ fontSize: '11px', fontWeight: 600, color: family.color }}>{family.name}</span> 362 </div> 363 <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}> 364 <span style={{ fontSize: '9px', padding: '2px 6px', background: sourceColor + '22', color: sourceColor, borderRadius: '4px' }}> 365 {item.source} 366 </span> 367 <span style={{ fontSize: '9px', color: '#64748b' }}> 368 {item.receivedAt ? new Date(item.receivedAt).toLocaleTimeString() : ''} 369 </span> 370 </div> 371 </div> 372 <div style={{ fontSize: '12px', fontWeight: 500, color: '#e6f1ff', marginBottom: '4px' }}> 373 {item.title || 'Untitled'} 374 </div> 375 <div style={{ fontSize: '11px', color: '#94a3b8', lineHeight: 1.4 }}> 376 {expanded ? item.content : truncate(item.content, 120)} 377 </div> 378 {item.content && item.content.length > 120 && ( 379 <div style={{ fontSize: '10px', color: '#6366f1', marginTop: '4px' }}> 380 {expanded ? 'Click to collapse' : 'Click to expand...'} 381 </div> 382 )} 383 <div style={{ fontSize: '9px', color: '#475569', marginTop: '6px' }}> 384 {item.content?.length || 0} chars 385 </div> 386 </div> 387 ); 388} 389 390function CustomTooltip({ active, payload, label }) { 391 if (!active || !payload?.length) return null; 392 return ( 393 <div style={{ background: '#1c2540', border: '1px solid #2d3a5c', borderRadius: '8px', padding: '10px', fontSize: '11px' }}> 394 <div style={{ color: '#64748b', marginBottom: '6px' }}>Tick: {label?.toLocaleString()}</div> 395 {payload.map((p, i) => ( 396 <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '2px' }}> 397 <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: p.color }} /> 398 <span style={{ color: '#94a3b8' }}>{p.name}:</span> 399 <span style={{ color: '#e6f1ff', fontWeight: 600 }}>{typeof p.value === 'number' ? p.value.toFixed(6) : p.value}</span> 400 </div> 401 ))} 402 </div> 403 ); 404} 405 406function EmptyState({ text }) { 407 return ( 408 <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', color: '#64748b', fontSize: '12px' }}> 409 {text} 410 </div> 411 ); 412} 413