rosie / web /executive-stream.html
betterwithage's picture
Rosie Palantir-class 3D executive backend: /cockpit-3d + /decision-tree-3d + /executive-stream (ADDITIVE)
66983c9 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Rosie · Executive Stream</title>
<!--
Rosie Executive Stream — SSE-driven live tape of decisions.
Pattern stolen (cited): Stripe Dashboard -> 3 BIG numbers + one clean tape.
3 BIG numbers in 72px gold serif: total decisions today, GO rate, p95 latency.
Bottom: scrolling tape of last 20 verdicts with one-line summaries.
Feed: /api/rosie/v4/cockpit-feed (SSE). Λ = Conjecture 1 (NOT a theorem).
Sovereign. ADDITIVE. Co-Authored-By: Perplexity Computer Agent. v11 749/14/163.
-->
<style>
:root{--bg:#070809;--ink:#f3ede0;--dim:#8a8576;--gold:#e8c574;--go:#46d18a;--review:#e3bd4a;--nogo:#e06a5e}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:radial-gradient(ellipse at top,#101216 0%,#070809 70%);
color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;overflow:hidden}
header{padding:30px 48px 0}
header .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
header h1{font-size:20px;font-weight:600;letter-spacing:.04em;margin-top:6px;color:#fff}
header .doctrine{font-size:11px;color:var(--dim);margin-top:6px;letter-spacing:.04em}
.bignums{display:flex;gap:64px;padding:40px 48px 20px}
.bn .v{font-family:Georgia,"Times New Roman",serif;font-size:72px;line-height:1;color:var(--gold);
font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(232,197,116,.28)}
.bn .l{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:14px}
.live{position:fixed;top:34px;right:48px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.live .pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--go);
margin-right:7px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.tapewrap{position:fixed;bottom:0;left:0;right:0;border-top:1px solid #1c1d20;
background:rgba(7,8,9,.85);backdrop-filter:blur(8px)}
.tapehdr{padding:12px 48px 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.tape{height:300px;overflow:hidden;padding:0 48px 18px}
.row{display:flex;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid #131416;
animation:slidein .4s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.row .v{font-weight:700;font-size:13px;letter-spacing:.05em;width:78px;flex:none}
.row .it{flex:1;font-size:14px;color:#d8d2c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .lam{font-family:ui-monospace,monospace;font-size:12px;color:var(--dim);width:90px;flex:none;text-align:right}
.row .org{font-size:11px;color:var(--dim);width:230px;flex:none;text-align:right;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{padding:40px 0;color:var(--dim);font-size:14px}
</style>
</head>
<body>
<header>
<div class="eyebrow">Rosie · Executive Operator</div>
<h1>Decision Stream</h1>
<div class="doctrine">Doctrine v11 LOCKED 749/14/163 · Λ = Conjecture 1 (NOT a theorem) · Sovereign · SLSA L1</div>
</header>
<div class="live"><span class="pulse"></span><span id="status">connecting…</span></div>
<div class="bignums">
<div class="bn"><div class="v" id="n-total"></div><div class="l">Decisions today</div></div>
<div class="bn"><div class="v" id="n-go"></div><div class="l">GO rate</div></div>
<div class="bn"><div class="v" id="n-p95"></div><div class="l">p95 latency</div></div>
</div>
<div class="tapewrap">
<div class="tapehdr">Live tape · last 20 verdicts</div>
<div class="tape" id="tape"><div class="empty">Awaiting first decision…</div></div>
</div>
<script>
const VC={GO:'var(--go)',REVIEW:'var(--review)','NO-GO':'var(--nogo)'};
const elTotal=document.getElementById('n-total'), elGo=document.getElementById('n-go'),
elP95=document.getElementById('n-p95'), tape=document.getElementById('tape'),
status=document.getElementById('status');
function render(d){
const m=d.metrics||{};
elTotal.textContent=m.total_today ?? 0;
elGo.textContent=((m.go_rate_24h ?? 0)*100).toFixed(0)+'%';
elP95.textContent=(m.p95_latency_ms==null)?'n/a':(m.p95_latency_ms+'ms');
const recent=d.recent||[];
if(!recent.length){ tape.innerHTML='<div class="empty">Awaiting first decision…</div>'; return; }
tape.innerHTML='';
recent.forEach(v=>{
const el=document.createElement('div'); el.className='row';
el.innerHTML=`<span class="v" style="color:${VC[v.verdict]||'#888'}">${v.verdict}</span>
<span class="it">${escapeHtml(v.intent||'—')}</span>
<span class="org">${(v.organs||[]).join(', ')}</span>
<span class="lam">Λ ${v.unified_lambda}</span>`;
tape.appendChild(el);
});
}
function escapeHtml(s){return (s||'').replace(/[&<>]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));}
function connect(){
const es=new EventSource('/api/rosie/v4/cockpit-feed');
es.onopen=()=>status.textContent='live';
es.onmessage=ev=>{ try{ render(JSON.parse(ev.data)); status.textContent='live'; }catch(e){} };
es.onerror=()=>{ status.textContent='reconnecting…'; es.close(); setTimeout(connect,4000); };
}
connect();
</script>
</body>
</html>