import { useState, useEffect, useCallback, useRef } from “react”; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ScatterChart, Scatter, Cell, ReferenceLine } from “recharts”; // ── TOYRIF ENGINE (JS port of the Python baseline) ────────────────────────── function seededRng(seed) { let s = seed >>> 0; return () => { s ^= s << 13; s ^= s >> 17; s ^= s << 5; const u = (s >>> 0) / 4294967296; // Box-Muller return null; // placeholder — use lcg below }; } class RNG { constructor(seed = 42) { this.seed = (seed ^ 0x5a4d) >>> 0; } next() { this.seed = (Math.imul(1664525, this.seed) + 1013904223) >>> 0; return this.seed / 4294967296; } normal(mean = 0, std = 1) { const u1 = Math.max(this.next(), 1e-10); const u2 = this.next(); return mean + std * Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2); } int(max) { return Math.floor(this.next() * max); } } function movingAverage(arr, k = 5) { if (arr.length < k) return arr.length ? [arr.reduce((a, b) => a + b, 0) / arr.length] : []; const out = []; for (let i = k - 1; i < arr.length; i++) { let s = 0; for (let j = 0; j < k; j++) s += arr[i - j]; out.push(s / k); } return out; } function nanMean(arr) { const v = arr.filter(x => isFinite(x)); return v.length ? v.reduce((a, b) => a + b, 0) / v.length : NaN; } function classify(W, R, C, decoherence) { if (W.length < 4) return “insufficient_data”; const tail = n => arr => arr.slice(-Math.min(n, arr.length)); const diff = arr => arr.slice(1).map((v, i) => v - arr[i]); const wobble_slope = nanMean(diff(tail(10)(W))); const coherence_slope = nanMean(diff(tail(10)(C))); const recovery_recent = nanMean(tail(10)(R).filter(isFinite)); const peak_c_idx = C.indexOf(Math.max(…C)); const peaked_then_lost = ( peak_c_idx > 2 && peak_c_idx < C.length - 2 && C[peak_c_idx] - C[0] > 0.05 && C[C.length - 1] < C[peak_c_idx] - 0.04 ); if (!decoherence) { if (wobble_slope < 0 && recovery_recent > 0 && coherence_slope > 0) return “stable”; return “near_stable”; } if (peaked_then_lost && recovery_recent > -0.01) return “prophetic_failure”; return “failure”; } function runOnce({ T = 120, alpha = 0.18, noise_std = 0.06, tau = 20, phi = 0.67, sigma = 0.08, rng }) { let x = rng.normal(0, 0.8); let x_prev = x; const X = [x], W = [], R = [], C = []; let decoherence = false, decoherence_reason = null, decoherence_t = null; for (let t = 1; t <= T; t++) { const noise = rng.normal(0, noise_std); x = x + alpha * (-x) + noise; const w = Math.abs(x - x_prev); const c = 1.0 / (1.0 + Math.abs(x)); const r = W.length === 0 ? NaN : -(w - W[W.length - 1]); X.push(x); W.push(w); C.push(c); R.push(r); x_prev = x; ``` if (Math.abs(x) > phi) { decoherence = true; decoherence_reason = "corridor"; decoherence_t = t; break; } if (W.length >= tau) { const slice = W.slice(-tau); if (slice.reduce((a, b) => a + b, 0) / tau >= sigma) { decoherence = true; decoherence_reason = "wobble_window"; decoherence_t = t; break; } } ``` } const H = movingAverage(W, 5); const cls = classify(W, R, C, decoherence); return { X, W, R, C, H, decoherence, decoherence_reason, decoherence_t, classification: cls }; } function runSweep({ n_runs = 200, T = 120, alpha = 0.18, noise_std = 0.06, tau = 20, phi_values = [0.35, 0.50, 0.67, 0.85, 1.10], sigma_values = [0.04, 0.06, 0.08, 0.10, 0.14], seed = 42, onProgress }) { const masterRng = new RNG(seed); const results = []; const total_cells = phi_values.length * sigma_values.length; let done = 0; for (const phi of phi_values) { for (const sigma of sigma_values) { const counts = { stable: 0, near_stable: 0, prophetic_failure: 0, failure: 0, insufficient_data: 0 }; const hums = [], c_slopes = []; ``` for (let i = 0; i < n_runs; i++) { const rng = new RNG(masterRng.int(1_000_000_000)); const out = runOnce({ T, alpha, noise_std, tau, phi, sigma, rng }); counts[out.classification]++; if (out.H.length) hums.push(out.H.reduce((a, b) => a + b, 0) / out.H.length); if (out.C.length > 1) { const slopes = out.C.slice(1).map((v, i) => v - out.C[i]); c_slopes.push(slopes.reduce((a, b) => a + b, 0) / slopes.length); } } const total = Object.values(counts).reduce((a, b) => a + b, 0); results.push({ phi, sigma, stable_pct: counts.stable / total, near_stable_pct: counts.near_stable / total, prophetic_failure_pct: counts.prophetic_failure / total, failure_pct: counts.failure / total, avg_hum: hums.length ? hums.reduce((a, b) => a + b, 0) / hums.length : NaN, avg_c_slope: c_slopes.length ? c_slopes.reduce((a, b) => a + b, 0) / c_slopes.length : NaN, }); done++; if (onProgress) onProgress(done / total_cells); } ``` } return results; } // ── SINGLE RUN for trajectory view ────────────────────────────────────────── function runSingle(phi, sigma, seed) { const rng = new RNG(seed); return runOnce({ T: 120, alpha: 0.18, noise_std: 0.06, tau: 20, phi, sigma, rng }); } // ── COLOR HELPERS ───────────────────────────────────────────────────────────── const CLS_COLOR = { stable: “#00e5a0”, near_stable: “#ffe066”, prophetic_failure: “#ff8c42”, failure: “#ff3d6e”, insufficient_data: “#555”, }; function lerp(a, b, t) { return a + (b - a) * t; } function pctColor(v) { // 0 = #1a1a2e, 1 = #00e5a0 const r = Math.round(lerp(0x1a, 0x00, v)); const g = Math.round(lerp(0x1a, 0xe5, v)); const b2 = Math.round(lerp(0x2e, 0xa0, v)); return `rgb(${r},${g},${b2})`; } function humColor(v, min, max) { const t = max === min ? 0.5 : 1 - (v - min) / (max - min); // lower hum = better return `hsl(${Math.round(lerp(0, 150, t))},80%,45%)`; } // ── COMPONENTS ──────────────────────────────────────────────────────────────── const PHI_VALUES = [0.35, 0.50, 0.67, 0.85, 1.10]; const SIGMA_VALUES = [0.04, 0.06, 0.08, 0.10, 0.14]; function HeatGrid({ data, metric, label, colorFn, fmt = v => (v * 100).toFixed(1) + “%” }) { if (!data.length) return null; const vals = data.map(d => d[metric]).filter(isFinite); const min = Math.min(…vals), max = Math.max(…vals); return ( <div style={{ fontFamily: “‘JetBrains Mono’, monospace” }}> <div style={{ color: “#8ecae6”, fontSize: 11, marginBottom: 6, letterSpacing: 2, textTransform: “uppercase” }}>{label}</div> <div style={{ display: “grid”, gridTemplateColumns: `60px repeat(${SIGMA_VALUES.length}, 1fr)`, gap: 2 }}> <div style={{ color: “#555”, fontSize: 9, display: “flex”, alignItems: “flex-end”, paddingBottom: 4 }}>φ \ σ</div> {SIGMA_VALUES.map(s => ( <div key={s} style={{ color: “#555”, fontSize: 9, textAlign: “center”, paddingBottom: 4 }}>{s}</div> ))} {PHI_VALUES.map(phi => ( <> <div key={“lbl” + phi} style={{ color: “#778”, fontSize: 9, display: “flex”, alignItems: “center” }}>{phi}</div> {SIGMA_VALUES.map(sigma => { const row = data.find(d => d.phi === phi && d.sigma === sigma); const v = row ? row[metric] : NaN; const bg = isFinite(v) ? colorFn(v, min, max) : “#111”; return ( <div key={sigma} title={`φ=${phi} σ=${sigma}: ${isFinite(v) ? fmt(v) : "N/A"}`} style={{ background: bg, borderRadius: 3, height: 32, display: “flex”, alignItems: “center”, justifyContent: “center”, fontSize: 9, color: “#000a”, fontWeight: 600, cursor: “default”, transition: “transform 0.1s”, border: “1px solid #ffffff08” }}> {isFinite(v) ? fmt(v) : “—”} </div> ); })} </> ))} </div> </div> ); } function TrajectoryPanel({ phi, sigma }) { const [seed, setSeed] = useState(42); const result = runSingle(phi, sigma, seed); const { X, W, R, C, H, classification, decoherence, decoherence_reason, decoherence_t } = result; const tLen = X.length; const xData = X.map((v, i) => ({ t: i, x: +v.toFixed(4) })); const wData = W.map((v, i) => ({ t: i + 1, w: +v.toFixed(4) })); const cData = C.map((v, i) => ({ t: i + 1, c: +v.toFixed(4) })); const hData = H.map((v, i) => ({ t: i + 4, h: +v.toFixed(4) })); const rData = R.filter(isFinite).map((v, i) => ({ t: i + 2, r: +v.toFixed(4) })); const cls = classification; const clsColor = CLS_COLOR[cls] || “#aaa”; return ( <div style={{ background: “#0d0d1a”, borderRadius: 8, padding: 16, border: `1px solid ${clsColor}33` }}> <div style={{ display: “flex”, justifyContent: “space-between”, alignItems: “center”, marginBottom: 12 }}> <div style={{ fontSize: 11, color: “#8ecae6”, letterSpacing: 2 }}>TRAJECTORY φ={phi} σ={sigma}</div> <div style={{ display: “flex”, gap: 8, alignItems: “center” }}> <span style={{ background: clsColor + “22”, border: `1px solid ${clsColor}`, color: clsColor, padding: “2px 10px”, borderRadius: 20, fontSize: 10, letterSpacing: 1 }}>{cls.toUpperCase().replace(”_”, “ “)}</span> {decoherence && ( <span style={{ color: “#ff3d6e”, fontSize: 10 }}> ✗ {decoherence_reason} @ t={decoherence_t} </span> )} <button onClick={() => setSeed(s => s + 1)} style={{ background: “#1a1a2e”, border: “1px solid #334”, color: “#8ecae6”, fontSize: 10, padding: “3px 10px”, borderRadius: 4, cursor: “pointer” }}> NEW RUN </button> </div> </div> ``` <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}> {/* X(t) */} <div> <div style={{ fontSize: 9, color: "#556", marginBottom: 4, letterSpacing: 1 }}>X(t) — STATE</div> <ResponsiveContainer width="100%" height={100}> <LineChart data={xData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}> <CartesianGrid strokeDasharray="2 4" stroke="#1a2030" /> <XAxis dataKey="t" tick={{ fontSize: 8, fill: "#445" }} /> <YAxis tick={{ fontSize: 8, fill: "#445" }} domain={[-1.2, 1.2]} /> <ReferenceLine y={phi} stroke="#ff3d6e44" strokeDasharray="3 3" /> <ReferenceLine y={-phi} stroke="#ff3d6e44" strokeDasharray="3 3" /> <Line type="monotone" dataKey="x" dot={false} stroke="#8ecae6" strokeWidth={1.5} /> </LineChart> </ResponsiveContainer> </div> {/* C(t) */} <div> <div style={{ fontSize: 9, color: "#556", marginBottom: 4, letterSpacing: 1 }}>C(t) — COHERENCE PROXY</div> <ResponsiveContainer width="100%" height={100}> <LineChart data={cData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}> <CartesianGrid strokeDasharray="2 4" stroke="#1a2030" /> <XAxis dataKey="t" tick={{ fontSize: 8, fill: "#445" }} /> <YAxis tick={{ fontSize: 8, fill: "#445" }} domain={[0, 1]} /> <Line type="monotone" dataKey="c" dot={false} stroke="#00e5a0" strokeWidth={1.5} /> </LineChart> </ResponsiveContainer> </div> {/* W(t) + H(t) */} <div> <div style={{ fontSize: 9, color: "#556", marginBottom: 4, letterSpacing: 1 }}>W(t) — WOBBLE / H(t) — HUM</div> <ResponsiveContainer width="100%" height={100}> <LineChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}> <CartesianGrid strokeDasharray="2 4" stroke="#1a2030" /> <XAxis dataKey="t" tick={{ fontSize: 8, fill: "#445" }} allowDuplicatedCategory={false} /> <YAxis tick={{ fontSize: 8, fill: "#445" }} /> <Line data={wData} type="monotone" dataKey="w" dot={false} stroke="#ffe066" strokeWidth={1} opacity={0.7} /> <Line data={hData} type="monotone" dataKey="h" dot={false} stroke="#ff8c42" strokeWidth={2} /> </LineChart> </ResponsiveContainer> </div> {/* R(t) */} <div> <div style={{ fontSize: 9, color: "#556", marginBottom: 4, letterSpacing: 1 }}>R(t) — LOCAL RECOVERY</div> <ResponsiveContainer width="100%" height={100}> <LineChart data={rData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}> <CartesianGrid strokeDasharray="2 4" stroke="#1a2030" /> <XAxis dataKey="t" tick={{ fontSize: 8, fill: "#445" }} /> <YAxis tick={{ fontSize: 8, fill: "#445" }} /> <ReferenceLine y={0} stroke="#ffffff22" /> <Line type="monotone" dataKey="r" dot={false} stroke="#bf5af2" strokeWidth={1.5} /> </LineChart> </ResponsiveContainer> </div> </div> </div> ``` ); } function PhiSlicePlot({ data, sigma }) { const filtered = PHI_VALUES.map(phi => { const row = data.find(d => d.phi === phi && d.sigma === sigma); return row ? { phi, …row } : null; }).filter(Boolean); return ( <div> <div style={{ fontSize: 9, color: “#8ecae6”, marginBottom: 8, letterSpacing: 2, textTransform: “uppercase” }}> Phi Slice (σ={sigma}) — Wall signal search </div> <ResponsiveContainer width="100%" height={180}> <LineChart data={filtered} margin={{ top: 4, right: 10, left: -10, bottom: 0 }}> <CartesianGrid strokeDasharray="2 4" stroke="#1a2030" /> <XAxis dataKey=“phi” tick={{ fontSize: 9, fill: “#556” }} label={{ value: “φ”, position: “insideRight”, fill: “#556”, fontSize: 10 }} /> <YAxis tick={{ fontSize: 9, fill: “#556” }} domain={[0, 1]} /> <Tooltip contentStyle={{ background: “#0d0d1a”, border: “1px solid #334”, fontSize: 10 }} /> <Line type=“monotone” dataKey=“stable_pct” dot={{ r: 3 }} stroke=”#00e5a0” strokeWidth={2} name=“stable%” /> <Line type=“monotone” dataKey=“prophetic_failure_pct” dot={{ r: 3 }} stroke=”#ff8c42” strokeWidth={2} name=“proph_fail%” /> <Line type=“monotone” dataKey=“near_stable_pct” dot={{ r: 3 }} stroke=”#ffe066” strokeWidth={1.5} name=“near_stable%” /> <Line type=“monotone” dataKey=“failure_pct” dot={{ r: 3 }} stroke=”#ff3d6e” strokeWidth={1.5} name=“failure%” /> </LineChart> </ResponsiveContainer> </div> ); } // ── MAIN APP ────────────────────────────────────────────────────────────────── export default function App() { const [sweepData, setSweepData] = useState([]); const [running, setRunning] = useState(false); const [progress, setProgress] = useState(0); const [nRuns, setNRuns] = useState(200); const [selectedPhi, setSelectedPhi] = useState(0.67); const [selectedSigma, setSelectedSigma] = useState(0.08); const [sliceSigma, setSliceSigma] = useState(0.08); const workerRef = useRef(null); const runSweepAsync = useCallback(() => { setRunning(true); setProgress(0); // Run in chunks via setTimeout to keep UI responsive setTimeout(() => { const results = runSweep({ n_runs: nRuns, phi_values: PHI_VALUES, sigma_values: SIGMA_VALUES, seed: 42, onProgress: p => setProgress(p), }); setSweepData(results); setRunning(false); }, 50); }, [nRuns]); useEffect(() => { runSweepAsync(); }, []); const humVals = sweepData.map(d => d.avg_hum).filter(isFinite); const humMin = Math.min(…humVals), humMax = Math.max(…humVals); return ( <div style={{ minHeight: “100vh”, background: “#080810”, color: “#c8d8e8”, fontFamily: “‘JetBrains Mono’, ‘Fira Mono’, monospace”, padding: “20px 24px”, }}> <style>{`@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&display=swap'); * { box-sizing: border-box; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #080810; } ::-webkit-scrollbar-thumb { background: #334; } button:hover { opacity: 0.85; }`}</style> ``` {/* Header */} <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}> <div> <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: 4, color: "#e8f4ff" }}>TOYRIF</div> <div style={{ fontSize: 10, color: "#445", letterSpacing: 3, marginTop: 2 }}>RESONANCE INTEGRITY FIELD · DIAGNOSTIC SWEEP</div> </div> <div style={{ display: "flex", gap: 10, alignItems: "center" }}> <div style={{ fontSize: 10, color: "#556" }}>n_runs</div> <select value={nRuns} onChange={e => setNRuns(+e.target.value)} style={{ background: "#0d0d1a", border: "1px solid #334", color: "#8ecae6", padding: "3px 8px", fontSize: 10, borderRadius: 4 }}> {[50, 100, 200, 400].map(n => <option key={n} value={n}>{n}</option>)} </select> <button onClick={runSweepAsync} disabled={running} style={{ background: running ? "#1a1a2e" : "#00e5a022", border: `1px solid ${running ? "#334" : "#00e5a0"}`, color: running ? "#445" : "#00e5a0", padding: "5px 16px", borderRadius: 4, fontSize: 10, letterSpacing: 2, cursor: running ? "default" : "pointer", transition: "all 0.2s" }}> {running ? `RUNNING ${(progress * 100).toFixed(0)}%` : "RUN SWEEP"} </button> </div> </div> {/* Progress bar */} {running && ( <div style={{ height: 2, background: "#1a1a2e", borderRadius: 1, marginBottom: 20 }}> <div style={{ height: "100%", width: `${progress * 100}%`, background: "#00e5a0", borderRadius: 1, transition: "width 0.2s" }} /> </div> )} {sweepData.length > 0 && ( <> {/* Legend */} <div style={{ display: "flex", gap: 20, marginBottom: 20, flexWrap: "wrap" }}> {Object.entries(CLS_COLOR).filter(([k]) => k !== "insufficient_data").map(([k, c]) => ( <div key={k} style={{ display: "flex", alignItems: "center", gap: 6 }}> <div style={{ width: 8, height: 8, borderRadius: "50%", background: c }} /> <span style={{ fontSize: 9, color: "#778", letterSpacing: 1 }}>{k.toUpperCase().replace("_", " ")}</span> </div> ))} </div> {/* 4 heat grids */} <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 24 }}> <div style={{ background: "#0d0d1a", borderRadius: 8, padding: 16, border: "1px solid #1a2030" }}> <HeatGrid data={sweepData} metric="stable_pct" label="Stable %" colorFn={(v) => pctColor(v)} fmt={v => (v * 100).toFixed(0) + "%"} /> </div> <div style={{ background: "#0d0d1a", borderRadius: 8, padding: 16, border: "1px solid #1a2030" }}> <HeatGrid data={sweepData} metric="prophetic_failure_pct" label="Prophetic Failure %" colorFn={(v, min, max) => { const t = max === min ? 0 : (v - min) / (max - min); return `hsl(${Math.round(30 - t * 30)},90%,${Math.round(20 + t * 35)}%)`; }} fmt={v => (v * 100).toFixed(0) + "%"} /> </div> <div style={{ background: "#0d0d1a", borderRadius: 8, padding: 16, border: "1px solid #1a2030" }}> <HeatGrid data={sweepData} metric="avg_hum" label="Avg Hum (lower = quieter)" colorFn={(v, min, max) => humColor(v, min, max)} fmt={v => v.toFixed(3)} /> </div> <div style={{ background: "#0d0d1a", borderRadius: 8, padding: 16, border: "1px solid #1a2030" }}> <HeatGrid data={sweepData} metric="avg_c_slope" label="Avg Coherence Slope" colorFn={(v, min, max) => { const t = max === min ? 0.5 : (v - min) / (max - min); return `hsl(${Math.round(t * 150)},70%,35%)`; }} fmt={v => v.toFixed(4)} /> </div> </div> {/* Phi slice plot */} <div style={{ background: "#0d0d1a", borderRadius: 8, padding: 16, border: "1px solid #1a2030", marginBottom: 20 }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}> <div /> <div style={{ display: "flex", gap: 8, alignItems: "center" }}> <span style={{ fontSize: 9, color: "#556" }}>σ slice:</span> {SIGMA_VALUES.map(s => ( <button key={s} onClick={() => setSliceSigma(s)} style={{ background: sliceSigma === s ? "#8ecae622" : "transparent", border: `1px solid ${sliceSigma === s ? "#8ecae6" : "#334"}`, color: sliceSigma === s ? "#8ecae6" : "#556", padding: "2px 8px", borderRadius: 3, fontSize: 9, cursor: "pointer" }}>{s}</button> ))} </div> </div> <PhiSlicePlot data={sweepData} sigma={sliceSigma} /> <div style={{ display: "flex", gap: 16, marginTop: 8 }}> {[["#00e5a0", "stable"], ["#ff8c42", "prophetic_fail"], ["#ffe066", "near_stable"], ["#ff3d6e", "failure"]].map(([c, l]) => ( <div key={l} style={{ display: "flex", alignItems: "center", gap: 4 }}> <div style={{ width: 16, height: 2, background: c }} /> <span style={{ fontSize: 8, color: "#556" }}>{l}</span> </div> ))} </div> </div> {/* Trajectory inspector */} <div style={{ background: "#0a0a18", borderRadius: 8, padding: 16, border: "1px solid #1a2030", marginBottom: 20 }}> <div style={{ display: "flex", gap: 16, marginBottom: 14, alignItems: "center", flexWrap: "wrap" }}> <div style={{ fontSize: 10, color: "#8ecae6", letterSpacing: 2 }}>TRAJECTORY INSPECTOR</div> <div style={{ display: "flex", gap: 6, alignItems: "center" }}> <span style={{ fontSize: 9, color: "#556" }}>φ:</span> {PHI_VALUES.map(p => ( <button key={p} onClick={() => setSelectedPhi(p)} style={{ background: selectedPhi === p ? "#ff3d6e22" : "transparent", border: `1px solid ${selectedPhi === p ? "#ff3d6e" : "#334"}`, color: selectedPhi === p ? "#ff3d6e" : "#556", padding: "2px 8px", borderRadius: 3, fontSize: 9, cursor: "pointer" }}>{p}</button> ))} </div> <div style={{ display: "flex", gap: 6, alignItems: "center" }}> <span style={{ fontSize: 9, color: "#556" }}>σ:</span> {SIGMA_VALUES.map(s => ( <button key={s} onClick={() => setSelectedSigma(s)} style={{ background: selectedSigma === s ? "#ffe06622" : "transparent", border: `1px solid ${selectedSigma === s ? "#ffe066" : "#334"}`, color: selectedSigma === s ? "#ffe066" : "#556", padding: "2px 8px", borderRadius: 3, fontSize: 9, cursor: "pointer" }}>{s}</button> ))} </div> </div> <TrajectoryPanel phi={selectedPhi} sigma={selectedSigma} /> </div> {/* Raw table */} <div style={{ background: "#0d0d1a", borderRadius: 8, padding: 16, border: "1px solid #1a2030" }}> <div style={{ fontSize: 10, color: "#8ecae6", letterSpacing: 2, marginBottom: 10 }}>RAW SWEEP TABLE</div> <div style={{ overflowX: "auto" }}> <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 9 }}> <thead> <tr style={{ borderBottom: "1px solid #1a2030" }}> {["φ", "σ", "stable%", "near_stable%", "proph_fail%", "fail%", "avg_hum", "avg_c_slope"].map(h => ( <th key={h} style={{ color: "#556", padding: "4px 8px", textAlign: "right", letterSpacing: 1 }}>{h}</th> ))} </tr> </thead> <tbody> {sweepData.map((row, i) => ( <tr key={i} style={{ borderBottom: "1px solid #0d1020", cursor: "pointer" }} onClick={() => { setSelectedPhi(row.phi); setSelectedSigma(row.sigma); }}> <td style={{ padding: "3px 8px", textAlign: "right", color: "#8ecae6" }}>{row.phi}</td> <td style={{ padding: "3px 8px", textAlign: "right", color: "#778" }}>{row.sigma}</td> <td style={{ padding: "3px 8px", textAlign: "right", color: "#00e5a0" }}>{(row.stable_pct * 100).toFixed(1)}%</td> <td style={{ padding: "3px 8px", textAlign: "right", color: "#ffe066" }}>{(row.near_stable_pct * 100).toFixed(1)}%</td> <td style={{ padding: "3px 8px", textAlign: "right", color: "#ff8c42" }}>{(row.prophetic_failure_pct * 100).toFixed(1)}%</td> <td style={{ padding: "3px 8px", textAlign: "right", color: "#ff3d6e" }}>{(row.failure_pct * 100).toFixed(1)}%</td> <td style={{ padding: "3px 8px", textAlign: "right", color: "#aac" }}>{isFinite(row.avg_hum) ? row.avg_hum.toFixed(4) : "—"}</td> <td style={{ padding: "3px 8px", textAlign: "right", color: isFinite(row.avg_c_slope) && row.avg_c_slope > 0 ? "#00e5a0" : "#ff3d6e" }}>{isFinite(row.avg_c_slope) ? row.avg_c_slope.toFixed(5) : "—"}</td> </tr> ))} </tbody> </table> </div> </div> </> )} {/* Footer */} <div style={{ marginTop: 20, fontSize: 8, color: "#334", letterSpacing: 2, textAlign: "center" }}> TOYRIF v1.0 · W=wobble R=recovery H=hum C=coherence · CLICK TABLE ROW → INSPECT TRAJECTORY </div> </div> ``` ); }