import { useState, useEffect, useRef, useCallback } from “react”; // ─── CANONICAL REASON ONTOLOGY ─────────────────────────────────────────────── const REASONS = { coherence_below_threshold: “Coherence below threshold”, corridor_above_threshold: “Corridor breach”, tau_not_yet_earned: “τ not yet earned”, emit_conditions_satisfied: “Emit conditions satisfied”, forced_emit_under_time_pressure: “Forced emit under time pressure”, reset_by_user: “Reset by user”, }; // ─── STATE MACHINE ──────────────────────────────────────────────────────────── // UNSTABLE : C < C_crit OR D > θ // ACCUMULATING: C ≥ C_crit AND D ≤ θ AND τ < τ* // EMIT : all three conditions satisfied function computeUIState(C, D, tau, C_crit, theta, tau_star) { if (C < C_crit || D > theta) return “UNSTABLE”; if (tau < tau_star) return “ACCUMULATING”; return “EMIT”; } function computeHoldReason(C, D, tau, C_crit, theta, tau_star) { if (C < C_crit) return “coherence_below_threshold”; if (D > theta) return “corridor_above_threshold”; if (tau < tau_star) return “tau_not_yet_earned”; return “emit_conditions_satisfied”; } // ─── FAKE BACKEND ───────────────────────────────────────────────────────────── function generateSignal(t, noiseLevel = 0.08) { const base = 0.5 + 0.25 * Math.sin(t * 0.8) + 0.15 * Math.sin(t * 2.1); const noise = (Math.random() - 0.5) * noiseLevel * 2; return Math.max(0, Math.min(1, base + noise)); } function generateDeviation(t) { const base = 0.15 + 0.10 * Math.abs(Math.sin(t * 0.6)); const spike = Math.random() < 0.03 ? Math.random() * 0.4 : 0; return Math.max(0, Math.min(1, base + spike)); } // ─── COLORS ─────────────────────────────────────────────────────────────────── const STATE_CONFIG = { UNSTABLE: { label: “UNSTABLE”, sub: “Signal unstable. Holding for coherence.”, color: “#ef4444”, glow: “rgba(239,68,68,0.3)”, bg: “rgba(239,68,68,0.06)”, border: “rgba(239,68,68,0.3)”, dot: “#ef4444”, }, ACCUMULATING: { label: “ACCUMULATING”, sub: “Stability emerging. Earning emission.”, color: “#f59e0b”, glow: “rgba(245,158,11,0.3)”, bg: “rgba(245,158,11,0.06)”, border: “rgba(245,158,11,0.3)”, dot: “#f59e0b”, }, EMIT: { label: “EMIT AUTHORIZED”, sub: “Signal stable. Emission authorized.”, color: “#10b981”, glow: “rgba(16,185,129,0.3)”, bg: “rgba(16,185,129,0.06)”, border: “rgba(16,185,129,0.3)”, dot: “#10b981”, }, }; // ─── TRAJECTORY CHART ───────────────────────────────────────────────────────── function TrajectoryChart({ history, C_crit, theta }) { const W = 480, H = 120, PAD = { t: 12, b: 28, l: 36, r: 12 }; const iW = W - PAD.l - PAD.r; const iH = H - PAD.t - PAD.b; const N = Math.min(history.length, 120); const slice = history.slice(-N); const toX = (i) => PAD.l + (i / (N - 1 || 1)) * iW; const toY = (v) => PAD.t + (1 - v) * iH; const cPath = slice.map((d, i) => `${i === 0 ? "M" : "L"}${toX(i)},${toY(d.C)}`).join(” “); const dPath = slice.map((d, i) => `${i === 0 ? "M" : "L"}${toX(i)},${toY(d.D)}`).join(” “); const stateColors = { UNSTABLE: “#ef4444”, ACCUMULATING: “#f59e0b”, EMIT: “#10b981” }; return ( <svg width={W} height={H} style={{ width: “100%”, fontFamily: “‘IBM Plex Mono’, monospace” }}> <defs> <linearGradient id="cGrad" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor="#38bdf8" stopOpacity="0.15" /> <stop offset="100%" stopColor="#38bdf8" stopOpacity="0" /> </linearGradient> </defs> ``` {/* threshold lines */} <line x1={PAD.l} x2={W - PAD.r} y1={toY(C_crit)} y2={toY(C_crit)} stroke="#38bdf8" strokeWidth="0.75" strokeDasharray="4,3" opacity="0.5" /> <line x1={PAD.l} x2={W - PAD.r} y1={toY(theta)} y2={toY(theta)} stroke="#f97316" strokeWidth="0.75" strokeDasharray="4,3" opacity="0.5" /> <text x={W - PAD.r - 2} y={toY(C_crit) - 3} textAnchor="end" fill="#38bdf8" fontSize="8" opacity="0.7">C_crit</text> <text x={W - PAD.r - 2} y={toY(theta) - 3} textAnchor="end" fill="#f97316" fontSize="8" opacity="0.7">θ</text> {/* state coloring beneath coherence line */} {slice.map((d, i) => { if (i === 0) return null; const x1 = toX(i - 1), x2 = toX(i); const col = stateColors[d.state] || "#444"; return <rect key={i} x={x1} y={PAD.t + iH + 2} width={x2 - x1} height={4} fill={col} opacity="0.6" rx="1" />; })} {/* coherence fill */} <path d={`${cPath} L${toX(slice.length - 1)},${toY(0)} L${toX(0)},${toY(0)} Z`} fill="url(#cGrad)" /> {/* coherence line */} <path d={cPath} fill="none" stroke="#38bdf8" strokeWidth="1.5" strokeLinejoin="round" /> {/* deviation line */} <path d={dPath} fill="none" stroke="#f97316" strokeWidth="1" strokeLinejoin="round" strokeDasharray="3,2" /> {/* forced emit markers */} {slice.map((d, i) => d.forced ? ( <circle key={`fe-${i}`} cx={toX(i)} cy={toY(d.C)} r="4" fill="#ef4444" stroke="#fff" strokeWidth="1" opacity="0.9" /> ) : null )} {/* y-axis labels */} {[0, 0.5, 1].map(v => ( <text key={v} x={PAD.l - 4} y={toY(v) + 3} textAnchor="end" fill="#4b5563" fontSize="8">{v.toFixed(1)}</text> ))} {/* legend */} <line x1={PAD.l} x2={PAD.l + 14} y1={H - 6} y2={H - 6} stroke="#38bdf8" strokeWidth="1.5" /> <text x={PAD.l + 17} y={H - 3} fill="#9ca3af" fontSize="8">C(t)</text> <line x1={PAD.l + 40} x2={PAD.l + 54} y1={H - 6} y2={H - 6} stroke="#f97316" strokeWidth="1" strokeDasharray="3,2" /> <text x={PAD.l + 57} y={H - 3} fill="#9ca3af" fontSize="8">D(t)</text> <text x={PAD.l + 82} y={H - 3} fill="#9ca3af" fontSize="8">▮ state</text> </svg> ``` ); } // ─── AUDIT LOG ──────────────────────────────────────────────────────────────── function AuditLog({ entries }) { const endRef = useRef(null); useEffect(() => { endRef.current?.scrollIntoView({ behavior: “smooth” }); }, [entries.length]); if (entries.length === 0) return ( <div style={{ color: “#4b5563”, fontSize: “11px”, fontFamily: “‘IBM Plex Mono’, monospace”, padding: “12px”, textAlign: “center” }}> No events recorded. </div> ); return ( <div style={{ maxHeight: “180px”, overflowY: “auto”, fontFamily: “‘IBM Plex Mono’, monospace”, fontSize: “10px” }}> {entries.map((e, i) => ( <div key={i} style={{ display: “grid”, gridTemplateColumns: “80px 1fr”, gap: “8px”, padding: “5px 8px”, borderBottom: “1px solid rgba(255,255,255,0.04)”, background: e.reason === “forced_emit_under_time_pressure” ? “rgba(239,68,68,0.08)” : “transparent”, }}> <span style={{ color: “#4b5563” }}>{e.ts}</span> <span> <span style={{ color: e.reason === “forced_emit_under_time_pressure” ? “#ef4444” : e.reason === “emit_conditions_satisfied” ? “#10b981” : e.reason === “reset_by_user” ? “#6b7280” : “#f59e0b”, marginRight: “6px” }}> {e.reason} </span> <span style={{ color: “#374151”, fontSize: “9px” }}> C={e.C?.toFixed(3)} D={e.D?.toFixed(3)} τ={e.tau?.toFixed(1)}s </span> {e.forced && ( <span style={{ marginLeft: “6px”, padding: “1px 5px”, background: “rgba(239,68,68,0.2)”, color: “#ef4444”, borderRadius: “3px”, fontSize: “8px”, letterSpacing: “0.5px” }}>FORCED</span> )} </span> </div> ))} <div ref={endRef} /> </div> ); } // ─── MAIN COMPONENT ─────────────────────────────────────────────────────────── export default function CUSTGate() { const C_CRIT = 0.62; const THETA = 0.28; const TAU_STAR = 8; const [running, setRunning] = useState(false); const [t, setT] = useState(0); const [C, setC] = useState(0.5); const [D, setD] = useState(0.2); const [tau, setTau] = useState(0); const [uiState, setUiState] = useState(“UNSTABLE”); const [holdReason, setHoldReason] = useState(“coherence_below_threshold”); const [history, setHistory] = useState([]); const [audit, setAudit] = useState([]); const [emitCount, setEmitCount] = useState(0); const [forcedEmitCount, setForcedEmitCount] = useState(0); const [lastEmit, setLastEmit] = useState(null); const [forceFlash, setForceFlash] = useState(false); const prevStateRef = useRef(“UNSTABLE”); const tickRef = useRef(null); const timestamp = () => { const d = new Date(); return `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}:${String(d.getSeconds()).padStart(2,"0")}`; }; const addAudit = useCallback((reason, cVal, dVal, tauVal, forced = false) => { setAudit(prev => […prev.slice(-49), { ts: timestamp(), reason, C: cVal, D: dVal, tau: tauVal, forced }]); }, []); const tick = useCallback(() => { setT(prev => { const newT = prev + 0.1; const newC = generateSignal(newT); const newD = generateDeviation(newT); ``` setC(newC); setD(newD); setTau(prevTau => { const stable = newC >= C_CRIT && newD <= THETA; const newTau = stable ? prevTau + 0.1 : 0; const newState = computeUIState(newC, newD, newTau, C_CRIT, THETA, TAU_STAR); const newReason = computeHoldReason(newC, newD, newTau, C_CRIT, THETA, TAU_STAR); setUiState(newState); setHoldReason(newReason); // auto-emit on state transition to EMIT if (newState === "EMIT" && prevStateRef.current !== "EMIT") { setEmitCount(n => n + 1); setLastEmit({ C: newC, D: newD, tau: newTau, ts: timestamp() }); addAudit("emit_conditions_satisfied", newC, newD, newTau); } setHistory(h => [...h.slice(-119), { C: newC, D: newD, tau: newTau, state: newState, forced: false }]); prevStateRef.current = newState; return newTau; }); return newT; }); ``` }, [addAudit]); useEffect(() => { if (running) { tickRef.current = setInterval(tick, 100); } else { clearInterval(tickRef.current); } return () => clearInterval(tickRef.current); }, [running, tick]); const handleForceEmit = () => { clearInterval(tickRef.current); setForcedEmitCount(n => n + 1); setEmitCount(n => n + 1); setLastEmit({ C, D, tau, ts: timestamp(), forced: true }); addAudit(“forced_emit_under_time_pressure”, C, D, tau, true); setHistory(h => […h.slice(-119), { C, D, tau, state: uiState, forced: true }]); setForceFlash(true); setTimeout(() => setForceFlash(false), 1200); if (running) tickRef.current = setInterval(tick, 100); }; const handleReset = () => { clearInterval(tickRef.current); setRunning(false); setT(0); setC(0.5); setD(0.2); setTau(0); setUiState(“UNSTABLE”); setHoldReason(“coherence_below_threshold”); setHistory([]); setEmitCount(0); setForcedEmitCount(0); setLastEmit(null); addAudit(“reset_by_user”, 0.5, 0.2, 0); }; const cfg = STATE_CONFIG[uiState]; const tauPct = Math.min(100, (tau / TAU_STAR) * 100); return ( <div style={{ minHeight: “100vh”, background: “#080c10”, display: “flex”, alignItems: “center”, justifyContent: “center”, padding: “24px”, fontFamily: “‘IBM Plex Mono’, monospace”, }}> <style>{`@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap'); * { box-sizing: border-box; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 2px; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--glow); opacity: 1; } 70% { box-shadow: 0 0 0 10px transparent; opacity: 0; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes force-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes tau-fill { from { width: 0%; } }`}</style> ``` <div style={{ width: "100%", maxWidth: "560px" }}> {/* HEADER */} <div style={{ marginBottom: "24px" }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}> <span style={{ color: "#1f2937", fontSize: "10px", letterSpacing: "3px", textTransform: "uppercase" }}> CUST · Coherence Gate v2 </span> <span style={{ color: "#1f2937", fontSize: "10px" }}> G(t) = 𝟙[C≥C_crit] · 𝟙[D≤θ] · 𝟙[τ≥τ*] </span> </div> <div style={{ height: "1px", background: "linear-gradient(to right, #1f2937, transparent)", marginTop: "6px" }} /> </div> {/* STATE INDICATOR */} <div style={{ border: `1px solid ${cfg.border}`, background: cfg.bg, borderRadius: "4px", padding: "20px 24px", marginBottom: "16px", position: "relative", transition: "all 0.4s ease", "--glow": cfg.glow, animation: uiState === "EMIT" ? "pulse-ring 2s infinite" : "none", ...(forceFlash ? { animation: "force-flash 0.3s ease 3" } : {}), }}> <div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px" }}> <div style={{ width: "8px", height: "8px", borderRadius: "50%", background: cfg.dot, boxShadow: `0 0 8px ${cfg.glow}`, }} /> <span style={{ color: cfg.color, fontSize: "13px", fontWeight: "600", letterSpacing: "2px" }}> {cfg.label} </span> </div> <div style={{ color: "#6b7280", fontSize: "11px", marginLeft: "20px" }}> {cfg.sub} </div> {/* hold reason pill */} {uiState !== "EMIT" && ( <div style={{ marginTop: "10px", marginLeft: "20px", display: "inline-block", padding: "3px 10px", border: `1px solid ${cfg.border}`, borderRadius: "2px", fontSize: "9px", color: cfg.color, letterSpacing: "1px", textTransform: "uppercase", }}> {REASONS[holdReason]} </div> )} </div> {/* METRICS ROW */} <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "8px", marginBottom: "16px", }}> {[ { label: "C(t)", value: C.toFixed(3), thresh: C_CRIT, ok: C >= C_CRIT, unit: `crit ${C_CRIT}` }, { label: "D(t)", value: D.toFixed(3), thresh: THETA, ok: D <= THETA, unit: `θ ${THETA}` }, { label: "τ(t)", value: tau.toFixed(1) + "s", ok: tau >= TAU_STAR, unit: `τ* ${TAU_STAR}s` }, ].map(m => ( <div key={m.label} style={{ background: "#0d1117", border: "1px solid #1f2937", borderRadius: "4px", padding: "12px", }}> <div style={{ color: "#374151", fontSize: "9px", marginBottom: "4px", letterSpacing: "1px" }}> {m.label} </div> <div style={{ color: m.ok ? "#10b981" : "#ef4444", fontSize: "18px", fontWeight: "500", }}>{m.value}</div> <div style={{ color: "#1f2937", fontSize: "9px", marginTop: "2px" }}>{m.unit}</div> </div> ))} </div> {/* TAU PROGRESS */} <div style={{ marginBottom: "16px" }}> <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "5px" }}> <span style={{ color: "#374151", fontSize: "9px", letterSpacing: "1px" }}>τ ACCUMULATION</span> <span style={{ color: "#374151", fontSize: "9px" }}>{tau.toFixed(1)}s / {TAU_STAR}s</span> </div> <div style={{ height: "4px", background: "#0d1117", borderRadius: "2px", overflow: "hidden", border: "1px solid #1f2937" }}> <div style={{ height: "100%", width: `${tauPct}%`, background: uiState === "EMIT" ? "#10b981" : uiState === "ACCUMULATING" ? "#f59e0b" : "#1f2937", borderRadius: "2px", transition: "width 0.1s linear, background 0.3s ease", boxShadow: uiState === "ACCUMULATING" ? "0 0 6px rgba(245,158,11,0.4)" : "none", }} /> </div> </div> {/* TRAJECTORY */} <div style={{ background: "#0d1117", border: "1px solid #1f2937", borderRadius: "4px", padding: "12px", marginBottom: "16px", }}> <div style={{ color: "#374151", fontSize: "9px", letterSpacing: "1px", marginBottom: "8px" }}> TRAJECTORY — WHY DID THE GATE WAIT? </div> <TrajectoryChart history={history} C_crit={C_CRIT} theta={THETA} /> </div> {/* CONTROLS */} <div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}> <button onClick={() => setRunning(r => !r)} style={{ flex: 1, padding: "10px", background: running ? "#0d1117" : "#0f2027", border: running ? "1px solid #374151" : "1px solid #164e63", color: running ? "#6b7280" : "#22d3ee", borderRadius: "3px", cursor: "pointer", fontSize: "10px", letterSpacing: "1.5px", textTransform: "uppercase", transition: "all 0.2s", }}> {running ? "⏸ Pause" : "▶ Run Signal"} </button> <button onClick={handleForceEmit} style={{ flex: 1, padding: "10px", background: "rgba(239,68,68,0.06)", border: "1px solid rgba(239,68,68,0.3)", color: "#ef4444", borderRadius: "3px", cursor: "pointer", fontSize: "10px", letterSpacing: "1.5px", textTransform: "uppercase", transition: "all 0.2s", }}> ⚡ Force Emit </button> <button onClick={handleReset} style={{ padding: "10px 16px", background: "#0d1117", border: "1px solid #1f2937", color: "#374151", borderRadius: "3px", cursor: "pointer", fontSize: "10px", letterSpacing: "1.5px", textTransform: "uppercase", }}> ↺ </button> </div> {/* EMIT STATS */} {(emitCount > 0 || forcedEmitCount > 0) && ( <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px", marginBottom: "16px", }}> <div style={{ background: "#0d1117", border: "1px solid #1f2937", borderRadius: "4px", padding: "10px 12px" }}> <div style={{ color: "#374151", fontSize: "9px", marginBottom: "3px", letterSpacing: "1px" }}> EARNED EMITS </div> <div style={{ color: "#10b981", fontSize: "20px", fontWeight: "500" }}> {emitCount - forcedEmitCount} </div> </div> <div style={{ background: "#0d1117", border: forcedEmitCount > 0 ? "1px solid rgba(239,68,68,0.3)" : "1px solid #1f2937", borderRadius: "4px", padding: "10px 12px" }}> <div style={{ color: "#374151", fontSize: "9px", marginBottom: "3px", letterSpacing: "1px" }}> FORCED EMITS </div> <div style={{ color: forcedEmitCount > 0 ? "#ef4444" : "#374151", fontSize: "20px", fontWeight: "500" }}> {forcedEmitCount} </div> </div> </div> )} {/* LAST EMIT SNAPSHOT */} {lastEmit && ( <div style={{ background: "#0d1117", border: lastEmit.forced ? "1px solid rgba(239,68,68,0.25)" : "1px solid rgba(16,185,129,0.2)", borderRadius: "4px", padding: "10px 14px", marginBottom: "16px", }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "6px" }}> <span style={{ color: "#374151", fontSize: "9px", letterSpacing: "1px" }}>LAST EMIT SNAPSHOT</span> {lastEmit.forced && ( <span style={{ padding: "2px 8px", background: "rgba(239,68,68,0.15)", border: "1px solid rgba(239,68,68,0.3)", color: "#ef4444", borderRadius: "2px", fontSize: "8px", letterSpacing: "1px" }}> FORCED </span> )} </div> <div style={{ display: "flex", gap: "16px", fontSize: "10px" }}> <span><span style={{ color: "#374151" }}>ts </span><span style={{ color: "#9ca3af" }}>{lastEmit.ts}</span></span> <span><span style={{ color: "#374151" }}>C </span><span style={{ color: lastEmit.forced ? "#ef4444" : "#10b981" }}>{lastEmit.C?.toFixed(3)}</span></span> <span><span style={{ color: "#374151" }}>D </span><span style={{ color: lastEmit.forced ? "#ef4444" : "#10b981" }}>{lastEmit.D?.toFixed(3)}</span></span> <span><span style={{ color: "#374151" }}>τ </span><span style={{ color: lastEmit.forced ? "#ef4444" : "#10b981" }}>{lastEmit.tau?.toFixed(1)}s</span></span> </div> {lastEmit.forced && ( <div style={{ marginTop: "6px", color: "#ef4444", fontSize: "9px", opacity: "0.7" }}> Emitted under time pressure. Review audit trail. </div> )} </div> )} {/* AUDIT LOG */} <div style={{ background: "#0d1117", border: "1px solid #1f2937", borderRadius: "4px", overflow: "hidden", }}> <div style={{ padding: "8px 12px", borderBottom: "1px solid #1f2937", display: "flex", justifyContent: "space-between", alignItems: "center", }}> <span style={{ color: "#374151", fontSize: "9px", letterSpacing: "1px" }}>AUDIT SPINE</span> <span style={{ color: "#1f2937", fontSize: "9px" }}>{audit.length} events</span> </div> <AuditLog entries={audit} /> </div> {/* FOOTER */} <div style={{ marginTop: "16px", display: "flex", justifyContent: "space-between" }}> <span style={{ color: "#111827", fontSize: "9px" }}>Resona OS · CUST Gate v2</span> <span style={{ color: "#111827", fontSize: "9px" }}> {uiState === "UNSTABLE" ? "unstable" : uiState === "ACCUMULATING" ? "accumulating" : "authorized"} </span> </div> </div> </div> ``` ); }