<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>arifOS APEX Sovereign | Realized Intelligence Dashboard</title>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/recharts/umd/Recharts.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;500;600;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #050505;
            --card: #0a0a0a;
            --card-hover: #111;
            --accent: #00ffcc;
            --accent-dim: rgba(0, 255, 204, 0.1);
            --accent-glow: rgba(0, 255, 204, 0.4);
            --text: #e8e8e8;
            --text-secondary: #888;
            --dim: #444;
            --border: #1a1a1a;
            --font-mono: 'JetBrains Mono', monospace;
            --font-sans: 'Inter', sans-serif;
            --danger: #ff4444;
            --danger-dim: rgba(255, 68, 68, 0.1);
            --warning: #ffaa00;
            --success: #00ff88;
            --success-dim: rgba(0, 255, 136, 0.1);
            --info: #4488ff;
        }

        * { box-sizing: border-box; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--font-sans);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            line-height: 1.6;
        }

        .app {
            max-width: 1400px;
            margin: 0 auto;
            padding: 24px;
        }

        /* Header */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 24px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .brand-motto {
            font-family: var(--font-mono);
            font-size: 0.65rem;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 3px;
            padding: 4px 8px;
            border: 1px solid var(--accent-dim);
            border-radius: 4px;
        }

        .brand-title {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .status-bar {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .status-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--success);
            box-shadow: 0 0 8px var(--success);
        }

        .status-dot.pulse {
            animation: pulse 2s infinite;
        }

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

        /* Grid Layout */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 20px;
        }

        .card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            transition: all 0.2s ease;
        }

        .card:hover {
            background: var(--card-hover);
            border-color: var(--dim);
        }

        .card-full { grid-column: span 12; }
        .card-8 { grid-column: span 8; }
        .card-6 { grid-column: span 6; }
        .card-4 { grid-column: span 4; }
        .card-3 { grid-column: span 3; }

        @media (max-width: 1200px) {
            .card-8, .card-6, .card-4, .card-3 { grid-column: span 6; }
        }

        @media (max-width: 768px) {
            .card-8, .card-6, .card-4, .card-3 { grid-column: span 12; }
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-secondary);
            margin: 0;
        }

        .card-badge {
            font-family: var(--font-mono);
            font-size: 0.65rem;
            padding: 2px 8px;
            border-radius: 4px;
            background: var(--accent-dim);
            color: var(--accent);
            border: 1px solid var(--accent-dim);
        }

        .card-badge.success { background: var(--success-dim); color: var(--success); border-color: var(--success-dim); }
        .card-badge.warning { background: rgba(255, 170, 0, 0.1); color: var(--warning); }
        .card-badge.danger { background: var(--danger-dim); color: var(--danger); border-color: var(--danger-dim); }

        /* Metric Cards */
        .metric-primary {
            text-align: center;
            padding: 40px 20px;
        }

        .metric-value-large {
            font-family: var(--font-mono);
            font-size: 4rem;
            font-weight: 700;
            color: var(--accent);
            text-shadow: 0 0 30px var(--accent-glow);
            margin: 10px 0;
            line-height: 1;
        }

        .metric-label-large {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .metric-formula {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            color: var(--dim);
        }

        .metric-insight {
            margin-top: 20px;
            padding: 12px 16px;
            background: var(--accent-dim);
            border-left: 3px solid var(--accent);
            border-radius: 0 6px 6px 0;
            font-size: 0.85rem;
            line-height: 1.5;
            color: var(--text);
        }

        .metric-grid-5 {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
        }

        @media (max-width: 1200px) {
            .metric-grid-5 { grid-template-columns: repeat(3, 1fr); }
        }

        @media (max-width: 768px) {
            .metric-grid-5 { grid-template-columns: repeat(2, 1fr); }
        }

        .metric-box {
            background: #111;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            position: relative;
            overflow: hidden;
        }

        .metric-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent);
            opacity: 0.5;
        }

        .metric-box.warning::before { background: var(--warning); }
        .metric-box.danger::before { background: var(--danger); }

        .metric-box-label {
            font-size: 0.65rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .metric-box-value {
            font-family: var(--font-mono);
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
        }

        .metric-box-trend {
            font-size: 0.75rem;
            color: var(--dim);
        }

        .trend-up { color: var(--success); }
        .trend-down { color: var(--danger); }
        .trend-stable { color: var(--text-secondary); }

        /* Witness Section */
        .witness-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 20px;
        }

        .witness-item {
            text-align: center;
            padding: 20px;
            background: #111;
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .witness-name {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .witness-score {
            font-family: var(--font-mono);
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 4px;
        }

        .witness-bar {
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }

        .witness-bar-fill {
            height: 100%;
            background: var(--accent);
            border-radius: 2px;
            transition: width 0.5s ease;
        }

        /* Floor Status */
        .floor-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
        }

        @media (max-width: 1200px) {
            .floor-grid { grid-template-columns: repeat(4, 1fr); }
        }

        @media (max-width: 768px) {
            .floor-grid { grid-template-columns: repeat(3, 1fr); }
        }

        .floor-item {
            background: #111;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 10px 8px;
            text-align: center;
            font-size: 0.7rem;
        }

        .floor-item.pass { border-color: var(--success); background: var(--success-dim); }
        .floor-item.band { border-color: var(--warning); background: rgba(255, 170, 0, 0.05); }
        .floor-item.lock { border-color: var(--accent); background: var(--accent-dim); }
        .floor-item.human { border-color: var(--info); background: rgba(68, 136, 255, 0.1); }

        .floor-name {
            font-weight: 600;
            margin-bottom: 4px;
            color: var(--text);
        }

        .floor-status {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.8;
        }

        /* Machine Health */
        .health-bar {
            margin-bottom: 16px;
        }

        .health-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            margin-bottom: 6px;
            color: var(--text-secondary);
        }

        .health-track {
            height: 6px;
            background: var(--border);
            border-radius: 3px;
            overflow: hidden;
        }

        .health-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        .health-fill.good { background: var(--success); }
        .health-fill.warn { background: var(--warning); }
        .health-fill.crit { background: var(--danger); }

        /* Chart Containers */
        .chart-container {
            height: 280px;
        }

        /* Session History */
        .history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }

        .history-table th {
            text-align: left;
            padding: 12px 8px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 1px;
            border-bottom: 1px solid var(--border);
        }

        .history-table td {
            padding: 12px 8px;
            border-bottom: 1px solid var(--border);
            color: var(--text);
        }

        .history-table tr:hover td {
            background: var(--card-hover);
        }

        .verdict-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .verdict-seal { background: var(--success-dim); color: var(--success); }
        .verdict-partial { background: rgba(255, 170, 0, 0.1); color: var(--warning); }
        .verdict-hold { background: rgba(68, 136, 255, 0.1); color: var(--info); }
        .verdict-void { background: var(--danger-dim); color: var(--danger); }

        /* Insights */
        .insights-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .insights-list li {
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            font-size: 0.9rem;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .insights-list li:last-child {
            border-bottom: none;
        }

        .insight-icon {
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .insight-text {
            color: var(--text);
            line-height: 1.5;
        }

        .insight-recommendation {
            margin-top: 8px;
            padding: 8px 12px;
            background: var(--accent-dim);
            border-radius: 6px;
            font-size: 0.8rem;
            color: var(--accent);
        }

        /* Quick Actions */
        .actions-row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 6px;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--text);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn:hover {
            border-color: var(--accent);
            background: var(--card-hover);
        }

        .btn-primary {
            background: var(--accent-dim);
            border-color: var(--accent);
            color: var(--accent);
        }

        .btn-danger {
            background: var(--danger-dim);
            border-color: var(--danger);
            color: var(--danger);
        }

        /* Footer */
        .footer {
            margin-top: 40px;
            padding: 20px 0;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.7rem;
            color: var(--dim);
        }

        .footer-links {
            display: flex;
            gap: 20px;
        }

        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
        }

        .footer-links a:hover {
            color: var(--accent);
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const { useState, useEffect, useMemo } = React;
        const { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Cell, LineChart, Line } = Recharts;

        const DEMO_DATA = {
            system: {
                status: "HEALTHY",
                version: "——.——.——",
                floors_active: "—/13",
                uptime: "—"
            },
            vitals: {
                G_star: 0.80,
                dS: -0.1,
                peace2: 1.21,
                kappa_r: 0.97,
                psi_le: 1.09
            },
            witness: {
                human: 1.00,
                ai: 0.97,
                earth: 0.91
            },
            floors: [
                { id: "F1", name: "Amanah", status: "pass", score: 0.85 },
                { id: "F2", name: "Truth", status: "pass", score: 0.99 },
                { id: "F3", name: "Tri-Witness", status: "pass", score: 0.95 },
                { id: "F4", name: "ΔS", status: "pass", score: -0.1 },
                { id: "F5", name: "Peace²", status: "pass", score: 1.21 },
                { id: "F6", name: "κᵣ", status: "pass", score: 0.97 },
                { id: "F7", name: "Humility", status: "band", score: 0.04 },
                { id: "F8", name: "Genius", status: "pass", score: 0.80 },
                { id: "F9", name: "C_dark", status: "pass", score: 0.15 },
                { id: "F10", name: "Ontology", status: "lock", score: 1.0 },
                { id: "F11", name: "Command", status: "lock", score: 1.0 },
                { id: "F12", name: "Injection", status: "pass", score: 0.82 },
                { id: "F13", name: "Sovereign", status: "human", score: 1.0 }
            ],
            machine: {
                cpu: 1.3,
                ram: 36.1,
                latency: 45,
                energy_budget: 94
            },
            history: [
                { time: "15:06", action: "vault_seal", verdict: "SEAL", G_star: 0.80, dS: -0.1, note: "Committed to ledger" },
                { time: "15:05", action: "forge", verdict: "SEAL", G_star: 0.80, dS: -0.1, note: "Solution synthesized" },
                { time: "15:04", action: "asi_critique", verdict: "SEAL", G_star: 0.81, dS: -0.1, note: "Safety check passed" },
                { time: "15:03", action: "agi_reason", verdict: "SEAL", G_star: 0.85, dS: -0.3, note: "3-path reasoning" },
                { time: "15:02", action: "init_anchor", verdict: "SEAL", G_star: 0.82, dS: -0.2, note: "Session opened" }
            ],
            insights: [
                { type: "success", icon: "✓", text: "No alerts. System operating within constitutional bounds.", recommendation: null },
                { type: "info", icon: "ℹ", text: "Current Ψ_LE (1.09) approaching agent-grade threshold (1.1).", recommendation: "Next major decision should include explicit F3 Tri-Witness confirmation." },
                { type: "trend", icon: "→", text: "ΔS consistently -0.1 to -0.3 across last 5 actions.", recommendation: "Information density increasing per reply — entropy reduction on track." }
            ]
        };

        function Dashboard() {
            const [data, setData] = useState(DEMO_DATA);

            useEffect(() => {
                const poll = async () => {
                    try {
                        const res = await fetch('/api/status');
                        if (!res.ok) return;
                        const json = await res.json();
                        const h = json.health || {};
                        const th = h.thermodynamic || {};
                        const gov = h.governance || {};
                        const rf = h.runtime_floors || {};
                        const src = Object.keys(rf).length ? rf : gov;

                        const overallOk = json.overall_ok !== false;
                        const status = overallOk ? "HEALTHY" : "DEGRADED";

                        const G_star = th.vitality_index ?? gov.psi_vitality ?? 0.5;
                        const dS = th.entropy_delta ?? 0;
                        const peace2 = th.peace_squared ?? 0.5;
                        const witness = th.witness || { human: 0, ai: 0, earth: 0 };

                        const floors = [
                            { id: "F1", name: "Amanah",     status: src.F1  >= 0.8 ? "pass" : "band", score: src.F1  ?? 0 },
                            { id: "F2", name: "Truth",      status: src.F2  >= 0.8 ? "pass" : "band", score: src.F2  ?? 0 },
                            { id: "F3", name: "Tri-Witness",status: src.F3  >= 0.8 ? "pass" : "band", score: src.F3  ?? 0 },
                            { id: "F4", name: "ΔS",          status: src.F4  >= 0   ? "pass" : "band", score: src.F4  ?? 0 },
                            { id: "F5", name: "Peace²",     status: src.F5  >= 0.8 ? "pass" : "band", score: src.F5  ?? 0 },
                            { id: "F6", name: "κᵣ",          status: src.F6  >= 0.8 ? "pass" : "band", score: src.F6  ?? 0 },
                            { id: "F7", name: "Humility",    status: src.F7  >= 0.8 ? "pass" : "band", score: src.F7  ?? 0 },
                            { id: "F8", name: "Genius",      status: src.F8  >= 0.8 ? "pass" : "band", score: src.F8  ?? 0 },
                            { id: "F9", name: "C_dark",      status: src.F9  >= 0.8 ? "pass" : "band", score: src.F9  ?? 0 },
                            { id: "F10", name: "Ontology",   status: src.F10 >= 0.8 ? "lock" : "band", score: src.F10 ?? 0 },
                            { id: "F11", name: "Command",    status: src.F11 >= 0.8 ? "lock" : "band", score: src.F11 ?? 0 },
                            { id: "F12", name: "Injection",  status: src.F12 >= 0.8 ? "pass" : "band", score: src.F12 ?? 0 },
                            { id: "F13", name: "Sovereign",   status: src.F13 >= 0.8 ? "human" : "band", score: src.F13 ?? 0 },
                        ];

                        const passFloors = floors.filter(f => f.status === "pass" || f.status === "lock" || f.status === "human");
                        const floorsActive = passFloors.length ? `${passFloors.length}/13` : null;

                        const machines = json.containers || [];
                        const cpu = machines.reduce((s, c) => s + (c.cpu_percent || 0), 0).toFixed(1);
                        const ram = machines.reduce((s, c) => s + (c.memory_percent || 0), 0).toFixed(1);

                        setData(prev => ({
                            ...prev,
                            system: {
                                status,
                                version: h.version || "——.——.——",
                                floors_active: floorsActive || prev.system.floors_active,
                                uptime: prev.system.uptime,
                            },
                            vitals: { G_star, dS, peace2, kappa_r: 0, psi_le: 0 },
                            witness: {
                                human: witness.human ?? 0,
                                ai: witness.ai ?? 0,
                                earth: witness.earth ?? 0,
                            },
                            floors,
                            machine: { cpu, ram, latency: 0, energy_budget: 0 },
                        }));
                    } catch (e) { console.error('poll error:', e); }
                };
                poll();
                const id = setInterval(poll, 5000);
                return () => clearInterval(id);
            }, []);

            // Calculate verdict from vitals
            const getVerdict = () => {
                const { G_star, dS, peace2 } = data.vitals;
                if (peace2 < 1.0) return "Paused";
                if (G_star < 0.80) return "Degraded";
                return "Alive";
            };

            const verdict = getVerdict();

            // Witness chart data
            const witnessData = useMemo(() => [
                { subject: 'Human', A: data.witness.human, fullMark: 1 },
                { subject: 'AI', A: data.witness.ai, fullMark: 1 },
                { subject: 'Earth', A: data.witness.earth, fullMark: 1 },
            ], [data]);

            // Floor strength data for bar chart
            const floorData = useMemo(() => {
                return data.floors.map(f => ({
                    name: f.id,
                    value: f.score,
                    status: f.status
                }));
            }, [data]);

            return (
                <div className="app">
                    {/* Header */}
                    <header className="header">
                        <div className="brand">
                            <span className="brand-motto">Ditempa Bukan Diberi</span>
                            <h1 className="brand-title">APEX Sovereign Dashboard</h1>
                        </div>
                        <div className="status-bar">
                            <div className="status-item">
                                <span className="status-dot pulse"></span>
                                <span>{data.system.status}</span>
                            </div>
                            <div className="status-item">
                                <span>v{data.system.version}</span>
                            </div>
                            <div className="status-item">
                                <span>{data.system.floors_active} Floors</span>
                            </div>
                        </div>
                    </header>

                    {/* Main Grid */}
                    <div className="dashboard-grid">

                        {/* Primary Metric: G★ */}
                        <div className="card card-4 metric-primary">
                            <div className="card-header">
                                <h2 className="card-title">Governed Intelligence</h2>
                                <span className="card-badge">Real-time</span>
                            </div>
                            <div className="metric-value-large">{data.vitals.G_star.toFixed(2)}</div>
                            <div className="metric-formula">G★ = (A × P × X × E²) × (1 − h)</div>
                            <div className="metric-insight">
                                Operating at constitutional threshold. F8 Genius floor met. System is reasoning well and governing itself.
                            </div>
                        </div>

                        {/* Verdict Status */}
                        <div className="card card-4">
                            <div className="card-header">
                                <h2 className="card-title">System Verdict</h2>
                                <span className={`card-badge ${verdict === 'Alive' ? 'success' : verdict === 'Degraded' ? 'warning' : 'danger'}`}>
                                    {verdict}
                                </span>
                            </div>
                            <div style={{ padding: '30px 0', textAlign: 'center' }}>
                                <div style={{ fontSize: '3rem', marginBottom: '10px' }}>
                                    {verdict === 'Alive' ? '●' : verdict === 'Degraded' ? '◐' : '○'}
                                </div>
                                <div style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                                    {verdict === 'Alive'
                                        ? "All systems operational. Constitutional governance active."
                                        : verdict === 'Degraded'
                                        ? "Performance reduced but functional. Monitor closely."
                                        : "Critical state. Human intervention required."
                                    }
                                </div>
                            </div>
                        </div>

                        {/* Five Vitals */}
                        <div className="card card-4">
                            <div className="card-header">
                                <h2 className="card-title">Five Vital Signs</h2>
                            </div>
                            <div className="witness-grid">
                                <div className="witness-item">
                                    <div className="witness-name">ΔS Entropy</div>
                                    <div className="witness-score" style={{color: data.vitals.dS < 0 ? 'var(--success)' : 'var(--danger)'}}>
                                        {data.vitals.dS > 0 ? '+' : ''}{data.vitals.dS.toFixed(1)}
                                    </div>
                                    <div style={{fontSize: '0.7rem', color: 'var(--dim)'}}>Clarity</div>
                                    <div className="witness-bar">
                                        <div className="witness-bar-fill" style={{width: `${Math.min(100, Math.abs(data.vitals.dS) * 100)}%`, background: data.vitals.dS < 0 ? 'var(--success)' : 'var(--danger)'}}></div>
                                    </div>
                                </div>
                                <div className="witness-item">
                                    <div className="witness-name">Peace²</div>
                                    <div className="witness-score">{data.vitals.peace2.toFixed(2)}</div>
                                    <div style={{fontSize: '0.7rem', color: 'var(--dim)'}}>Stability</div>
                                    <div className="witness-bar">
                                        <div className="witness-bar-fill" style={{width: `${Math.min(100, (data.vitals.peace2 / 1.5) * 100)}%`}}></div>
                                    </div>
                                </div>
                                <div className="witness-item">
                                    <div className="witness-name">κᵣ Maruah</div>
                                    <div className="witness-score">{data.vitals.kappa_r.toFixed(2)}</div>
                                    <div style={{fontSize: '0.7rem', color: 'var(--dim)'}}>Dignity</div>
                                    <div className="witness-bar">
                                        <div className="witness-bar-fill" style={{width: `${data.vitals.kappa_r * 100}%`}}></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Five Vitals Detail */}
                        <div className="card card-full">
                            <div className="card-header">
                                <h2 className="card-title">Constitutional Vitals — What They Mean</h2>
                            </div>
                            <div className="metric-grid-5">
                                <div className="metric-box">
                                    <div className="metric-box-label">G★ Genius Score</div>
                                    <div className="metric-box-value">{data.vitals.G_star.toFixed(2)}</div>
                                    <div className="metric-box-trend trend-stable">→ Operating normally</div>
                                </div>
                                <div className="metric-box">
                                    <div className="metric-box-label">ΔS Entropy Delta</div>
                                    <div className="metric-box-value" style={{color: 'var(--success)'}}>{data.vitals.dS.toFixed(1)}</div>
                                    <div className="metric-box-trend trend-down">↓ Reducing confusion</div>
                                </div>
                                <div className="metric-box">
                                    <div className="metric-box-label">Peace² Stability</div>
                                    <div className="metric-box-value">{data.vitals.peace2.toFixed(2)}</div>
                                    <div className="metric-box-trend trend-up">↑ System stable</div>
                                </div>
                                <div className="metric-box">
                                    <div className="metric-box-label">κᵣ Maruah</div>
                                    <div className="metric-box-value">{data.vitals.kappa_r.toFixed(2)}</div>
                                    <div className="metric-box-trend trend-stable">→ Dignity respected</div>
                                </div>
                                <div className="metric-box">
                                    <div className="metric-box-label">Ψ_LE AGI Pressure</div>
                                    <div className="metric-box-value">{data.vitals.psi_le.toFixed(2)}</div>
                                    <div className="metric-box-trend trend-stable">→ Agent-grade</div>
                                </div>
                            </div>
                            <div className="metric-insight" style={{marginTop: '20px'}}>
                                <strong>What this means:</strong> The system is governing itself correctly. Every reply reduces confusion (ΔS {'<'} 0)
                                and respects regional context (κᵣ {'>'} 0.95). Ψ_LE at 1.09 indicates agent-grade reasoning — below AGI horizon.
                            </div>
                        </div>

                        {/* Tri-Witness */}
                        <div className="card card-6">
                            <div className="card-header">
                                <h2 className="card-title">Tri-Witness Consensus (F3)</h2>
                                <span className="card-badge success">Consensus 0.95+</span>
                            </div>
                            <div className="chart-container">
                                <ResponsiveContainer width="100%" height="100%">
                                    <RadarChart cx="50%" cy="50%" outerRadius="70%" data={witnessData}>
                                        <PolarGrid stroke="#222" />
                                        <PolarAngleAxis dataKey="subject" tick={{fill: '#888', fontSize: 12}} />
                                        <PolarRadiusAxis angle={30} domain={[0, 1]} tick={false} axisLine={false} />
                                        <Radar name="Witness" dataKey="A" stroke="#00ffcc" fill="#00ffcc" fillOpacity={0.2} />
                                    </RadarChart>
                                </ResponsiveContainer>
                            </div>
                            <div className="metric-insight">
                                <strong>Consensus achieved.</strong> All three witnesses agree (Human 1.0, AI 0.97, Earth 0.91).
                                Safe to SEAL decisions without human override.
                            </div>
                        </div>

                        {/* Floor Status */}
                        <div className="card card-6">
                            <div className="card-header">
                                <h2 className="card-title">13 Constitutional Floors</h2>
                                <span className="card-badge success">All Active</span>
                            </div>
                            <div className="floor-grid">
                                {data.floors.map(floor => (
                                    <div key={floor.id} className={`floor-item ${floor.status}`}>
                                        <div className="floor-name">{floor.id}</div>
                                        <div className="floor-status">{floor.status}</div>
                                    </div>
                                ))}
                            </div>
                            <div style={{marginTop: '16px', fontSize: '0.8rem', color: 'var(--text-secondary)'}}>
                                <span style={{color: 'var(--success)'}}>● Pass</span> &nbsp;
                                <span style={{color: 'var(--warning)'}}>● Band</span> &nbsp;
                                <span style={{color: 'var(--accent)'}}>● Lock</span> &nbsp;
                                <span style={{color: 'var(--info)'}}>● Human</span>
                            </div>
                        </div>

                        {/* Machine Health */}
                        <div className="card card-4">
                            <div className="card-header">
                                <h2 className="card-title">Machine Health</h2>
                                <span className="card-badge success">Healthy</span>
                            </div>
                            <div style={{padding: '10px 0'}}>
                                <div className="health-bar">
                                    <div className="health-label">
                                        <span>CPU Load</span>
                                        <span>{data.machine.cpu}%</span>
                                    </div>
                                    <div className="health-track">
                                        <div className="health-fill good" style={{width: `${data.machine.cpu}%`}}></div>
                                    </div>
                                </div>
                                <div className="health-bar">
                                    <div className="health-label">
                                        <span>RAM Usage</span>
                                        <span>{data.machine.ram}%</span>
                                    </div>
                                    <div className="health-track">
                                        <div className="health-fill good" style={{width: `${data.machine.ram}%`}}></div>
                                    </div>
                                </div>
                                <div className="health-bar">
                                    <div className="health-label">
                                        <span>Latency</span>
                                        <span>{data.machine.latency}ms</span>
                                    </div>
                                    <div className="health-track">
                                        <div className="health-fill good" style={{width: `${Math.min(100, (data.machine.latency / 100) * 100)}%`}}></div>
                                    </div>
                                </div>
                                <div className="health-bar">
                                    <div className="health-label">
                                        <span>Energy Budget</span>
                                        <span>{data.machine.energy_budget}%</span>
                                    </div>
                                    <div className="health-track">
                                        <div className="health-fill good" style={{width: `${data.machine.energy_budget}%`}}></div>
                                    </div>
                                </div>
                            </div>
                            <div className="metric-insight">
                                Machine is healthy. Low latency preserves "cheap truth" capability.
                                94% energy budget remaining.
                            </div>
                        </div>

                        {/* Session History */}
                        <div className="card card-8">
                            <div className="card-header">
                                <h2 className="card-title">Session History — Last 5 Actions</h2>
                            </div>
                            <table className="history-table">
                                <thead>
                                    <tr>
                                        <th>Time</th>
                                        <th>Action</th>
                                        <th>Verdict</th>
                                        <th>G★</th>
                                        <th>ΔS</th>
                                        <th>Note</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {data.history.map((row, idx) => (
                                        <tr key={idx}>
                                            <td>{row.time}</td>
                                            <td><code style={{fontFamily: 'var(--font-mono)', fontSize: '0.8rem'}}>{row.action}</code></td>
                                            <td><span className={`verdict-badge verdict-${row.verdict.toLowerCase()}`}>{row.verdict}</span></td>
                                            <td>{row.G_star.toFixed(2)}</td>
                                            <td style={{color: row.dS < 0 ? 'var(--success)' : 'var(--danger)'}}>{row.dS > 0 ? '+' : ''}{row.dS.toFixed(1)}</td>
                                            <td style={{color: 'var(--text-secondary)'}}>{row.note}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                            <div className="metric-insight" style={{marginTop: '16px'}}>
                                <strong>Trend:</strong> Consistent SEALs. G★ stable around 0.80-0.85.
                                Entropy always reducing (ΔS {'<'} 0). Constitutional operation verified.
                            </div>
                        </div>

                        {/* Insights & Recommendations */}
                        <div className="card card-4">
                            <div className="card-header">
                                <h2 className="card-title">Insights</h2>
                            </div>
                            <ul className="insights-list">
                                {data.insights.map((insight, idx) => (
                                    <li key={idx}>
                                        <span className="insight-icon">{insight.icon}</span>
                                        <div>
                                            <div className="insight-text">{insight.text}</div>
                                            {insight.recommendation && (
                                                <div className="insight-recommendation">
                                                    <strong>Recommendation:</strong> {insight.recommendation}
                                                </div>
                                            )}
                                        </div>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Quick Actions */}
                        <div className="card card-full">
                            <div className="card-header">
                                <h2 className="card-title">Quick Actions</h2>
                            </div>
                            <div className="actions-row">
                                <button className="btn btn-primary">Init New Session</button>
                                <button className="btn">Run Forge</button>
                                <button className="btn">View Ledger</button>
                                <button className="btn btn-danger">Trigger 888_HOLD</button>
                                <button className="btn">Export Report</button>
                            </div>
                        </div>
                    </div>

                    {/* Footer */}
                    <footer className="footer">
                        <div>
                            arifOS L0 KERNEL | VERSION {data.system.version} | APEX THEOREM GOVERNANCE ACTIVE
                        </div>
                        <div className="footer-links">
                            <a href="/">Home</a>
                            <a href="/docs">Documentation</a>
                            <a href="/api">API</a>
                            <a href="https://github.com/ariffazil/arifosmcp">GitHub</a>
                        </div>
                    </footer>
                </div>
            );
        }

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<Dashboard />);
    </script>
</body>
</html>
