Spaces:
Running
Running
Rosie genius-grade backend: multi-organ orchestrator v4 (/orchestrate, /chat) + executive graphical view
1b0c319 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>rosie · orchestrate — executive view</title> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <style> | |
| :root{ | |
| --bg:#070b12; --panel:#0d1521; --line:#1b2a3d; | |
| --ink:#e8eef7; --muted:#7e93ad; --go:#2fe08a; --review:#ffcc4d; --nogo:#ff5468; | |
| --a11oy:#5b8cff; --sentra:#ff7b54; --amaru:#36d6c3; --killinchu:#c285ff; --rosie:#ff5fa2; | |
| --accent:#5b8cff; | |
| } | |
| *{box-sizing:border-box} | |
| body{margin:0;background:radial-gradient(1200px 700px at 70% -10%,#10203a 0%,var(--bg) 55%); | |
| color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif; | |
| min-height:100vh} | |
| header{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line)} | |
| header .logo{font-size:22px} | |
| header h1{font-size:16px;margin:0;font-weight:600;letter-spacing:.3px} | |
| header .sub{color:var(--muted);font-size:12px} | |
| header .doctrine{margin-left:auto;font:11px/1.4 ui-monospace,Menlo,monospace;color:var(--muted);text-align:right} | |
| .wrap{display:grid;grid-template-columns:360px 1fr;gap:18px;padding:20px 22px;max-width:1400px;margin:0 auto} | |
| .panel{background:linear-gradient(180deg,#0e1826,#0b1320);border:1px solid var(--line); | |
| border-radius:16px;padding:18px} | |
| label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:0 0 7px} | |
| textarea,input{width:100%;background:#0a121d;border:1px solid #21344b;color:var(--ink); | |
| border-radius:10px;padding:11px;font:14px/1.4 inherit;resize:vertical} | |
| .row{display:flex;align-items:center;gap:10px;margin-top:14px} | |
| .toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;color:var(--muted);font-size:12px} | |
| .toggle input{width:auto} | |
| button{appearance:none;border:none;border-radius:11px;padding:12px 16px;font-weight:650; | |
| font-size:14px;cursor:pointer;background:linear-gradient(180deg,#5b8cff,#3f6de0);color:white;width:100%;margin-top:16px} | |
| button:active{transform:translateY(1px)} | |
| .examples{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px} | |
| .chip{font-size:11.5px;color:#bcd0ee;background:#10243f;border:1px solid #1f3b5e; | |
| padding:6px 9px;border-radius:999px;cursor:pointer} | |
| .chip:hover{background:#163357} | |
| /* Verdict mega-badge */ | |
| .verdict-hero{display:flex;flex-direction:column;align-items:center;justify-content:center; | |
| gap:10px;min-height:210px;text-align:center} | |
| .gauge{position:relative;width:200px;height:200px} | |
| .verdict-word{font-size:38px;font-weight:800;letter-spacing:1px} | |
| .verdict-meta{color:var(--muted);font-size:12px} | |
| .lam{font:13px ui-monospace,Menlo,monospace;color:#9fb6d4} | |
| /* Organ cards */ | |
| .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:6px} | |
| .card{background:#0b1422;border:1px solid var(--line);border-radius:14px;padding:14px;position:relative;overflow:hidden} | |
| .card .bar{position:absolute;left:0;top:0;bottom:0;width:4px} | |
| .card h3{margin:0 0 2px;font-size:14px;display:flex;align-items:center;gap:8px} | |
| .card .role{color:var(--muted);font-size:11px;margin-bottom:10px} | |
| .badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px} | |
| .b-pass,.b-go{background:rgba(47,224,138,.16);color:var(--go)} | |
| .b-degraded,.b-review{background:rgba(255,204,77,.16);color:var(--review)} | |
| .b-unreachable,.b-nogo{background:rgba(255,84,104,.16);color:var(--nogo)} | |
| .card .lambar{height:6px;border-radius:4px;background:#13233a;margin:10px 0 6px;overflow:hidden} | |
| .card .lambar i{display:block;height:100%;border-radius:4px} | |
| .card .meta{font:11px ui-monospace,Menlo,monospace;color:#7e93ad;word-break:break-all} | |
| .card .summary{font-size:12px;color:#c3d4ec;margin:6px 0} | |
| .section-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:22px 0 10px} | |
| #tree{width:100%;height:320px;background:#0a121d;border:1px solid var(--line);border-radius:14px} | |
| .receipt{margin-top:14px;background:#0a121d;border:1px solid var(--line);border-radius:12px;padding:12px; | |
| font:11px/1.5 ui-monospace,Menlo,monospace;color:#8fa8c8;word-break:break-all} | |
| .receipt .sig-ok{color:var(--go)} .receipt .sig-no{color:var(--review)} | |
| .empty{color:var(--muted);text-align:center;padding:50px 0;font-size:13px} | |
| .foot{padding:14px 22px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);max-width:1400px;margin:0 auto} | |
| .spin{display:inline-block;width:14px;height:14px;border:2px solid #2a3f5e;border-top-color:var(--accent); | |
| border-radius:50%;animation:s 0.7s linear infinite;vertical-align:-2px} | |
| @keyframes s{to{transform:rotate(360deg)}} | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <span class="logo">🌹</span> | |
| <div> | |
| <h1>rosie · orchestrate</h1> | |
| <div class="sub">chief-of-staff layer — one front door to five organs</div> | |
| </div> | |
| <div class="doctrine"> | |
| Doctrine v11 · 749/14/163<br> | |
| Λ = Conjecture 1 (not a theorem) · SLSA L1 | |
| </div> | |
| </header> | |
| <div class="wrap"> | |
| <!-- LEFT: intent console --> | |
| <div class="panel"> | |
| <label for="intent">Operator intent</label> | |
| <textarea id="intent" rows="3" placeholder="is drone-07 safe to fly?"></textarea> | |
| <div class="examples"> | |
| <span class="chip">is drone-07 safe to fly?</span> | |
| <span class="chip">predict failure risk for the fleet</span> | |
| <span class="chip">inspect for intrusion threats</span> | |
| <span class="chip">what did we decide earlier?</span> | |
| </div> | |
| <div class="row"> | |
| <label class="toggle"><input type="checkbox" id="reason"> escalate to Step-3.7-Flash voter (reasoning_high)</label> | |
| </div> | |
| <button id="go">Orchestrate ▸</button> | |
| <div class="receipt" id="receipt" style="display:none"></div> | |
| </div> | |
| <!-- RIGHT: graphical executive output --> | |
| <div> | |
| <div class="panel"> | |
| <div class="verdict-hero" id="hero"> | |
| <div class="empty">Issue an intent — Rosie routes to the right organs and returns one signed GO / NO-GO.</div> | |
| </div> | |
| </div> | |
| <div class="section-title">Per-organ verdicts</div> | |
| <div class="cards" id="cards"></div> | |
| <div class="section-title">Decision tree — intent → organs → Λ-fusion</div> | |
| <svg id="tree"></svg> | |
| </div> | |
| </div> | |
| <div class="foot"> | |
| Sovereign · no Anthropic/OpenAI keys · cross-organ calls over HF Space infra only. | |
| Every verdict emits a DSSE Khipu receipt. Λ-aggregation is a geometric mean and remains | |
| <b>Conjecture 1 — not a theorem</b>. Unreachable organs degrade the verdict honestly; no data is fabricated. | |
| </div> | |
| <script> | |
| const ORGAN_COLORS={a11oy:'#5b8cff',sentra:'#ff7b54',amaru:'#36d6c3',killinchu:'#c285ff',rosie:'#ff5fa2'}; | |
| const VWORD={'GO':'GO','REVIEW':'REVIEW','NO-GO':'NO-GO'}; | |
| const VCOLOR={'GO':'#2fe08a','REVIEW':'#ffcc4d','NO-GO':'#ff5468'}; | |
| document.querySelectorAll('.chip').forEach(c=>c.onclick=()=>{document.getElementById('intent').value=c.textContent;}); | |
| document.getElementById('go').onclick=run; | |
| document.getElementById('intent').addEventListener('keydown',e=>{if(e.key==='Enter'&&(e.metaKey||e.ctrlKey))run();}); | |
| async function run(){ | |
| const intent=document.getElementById('intent').value.trim(); | |
| if(!intent)return; | |
| const use_high=document.getElementById('reason').checked; | |
| const hero=document.getElementById('hero'); | |
| hero.innerHTML='<div class="empty"><span class="spin"></span> routing to organs…</div>'; | |
| document.getElementById('cards').innerHTML=''; | |
| document.getElementById('receipt').style.display='none'; | |
| let r; | |
| try{ | |
| const res=await fetch('/api/rosie/v4/orchestrate',{method:'POST',headers:{'content-type':'application/json'}, | |
| body:JSON.stringify({intent,use_reasoning_high:use_high})}); | |
| r=await res.json(); | |
| }catch(e){hero.innerHTML='<div class="empty">network error: '+e+'</div>';return;} | |
| renderHero(r); renderCards(r.cards); renderTree(intent,r); renderReceipt(r); | |
| } | |
| function gauge(lam,verdict){ | |
| const col=VCOLOR[verdict]||'#888'; | |
| const pct=Math.max(0,Math.min(1,lam)); | |
| const C=2*Math.PI*86; | |
| return `<svg viewBox="0 0 200 200" class="gaugesvg"> | |
| <circle cx="100" cy="100" r="86" fill="none" stroke="#13233a" stroke-width="14"/> | |
| <circle cx="100" cy="100" r="86" fill="none" stroke="${col}" stroke-width="14" | |
| stroke-linecap="round" stroke-dasharray="${C}" stroke-dashoffset="${C*(1-pct)}" | |
| transform="rotate(-90 100 100)" style="transition:stroke-dashoffset .8s ease"/> | |
| <text x="100" y="92" text-anchor="middle" fill="${col}" font-size="30" font-weight="800">${VWORD[verdict]||'?'}</text> | |
| <text x="100" y="118" text-anchor="middle" fill="#9fb6d4" font-size="13" font-family="monospace">Λ ${lam.toFixed(3)}</text> | |
| </svg>`; | |
| } | |
| function renderHero(r){ | |
| const reach=r.cards.filter(c=>c.reachable).length; | |
| document.getElementById('hero').innerHTML= | |
| `<div class="gauge">${gauge(r.unified_lambda,r.verdict)}</div> | |
| <div class="verdict-meta">${reach}/${r.cards.length} organs reachable · ${r.elapsed_ms} ms${r.use_reasoning_high?' · Step-3.7-Flash':''}</div> | |
| <div class="lam">unified Λ = geometric-mean(axes) · Conjecture 1</div>`; | |
| } | |
| function renderCards(cards){ | |
| const wrap=document.getElementById('cards');wrap.innerHTML=''; | |
| cards.forEach(c=>{ | |
| const col=ORGAN_COLORS[c.organ]||'#888'; | |
| const v=(c.verdict||'').toLowerCase(); | |
| const sig=c.signed?'🔏 signed':'⚠︎ unsigned'; | |
| const div=document.createElement('div');div.className='card'; | |
| div.innerHTML=`<div class="bar" style="background:${col}"></div> | |
| <h3><span style="color:${col}">●</span> ${c.organ}</h3> | |
| <div class="role">${c.role}</div> | |
| <span class="badge b-${v}">${c.verdict}</span> | |
| <div class="lambar"><i style="width:${(c.axis_lambda*100).toFixed(0)}%;background:${col}"></i></div> | |
| <div class="summary">${c.summary||''}</div> | |
| <div class="meta">kallpa ${c.kallpa_weight} · ${c.latency_ms}ms · ${sig}<br>${c.endpoint}</div>`; | |
| wrap.appendChild(div); | |
| }); | |
| } | |
| function renderTree(intent,r){ | |
| const svg=d3.select('#tree');svg.selectAll('*').remove(); | |
| const W=svg.node().clientWidth,H=320; | |
| const root={name:'Λ-verdict\n'+r.verdict,col:VCOLOR[r.verdict], | |
| children:[{name:'intent',col:'#5b8cff',children:[]}]}; | |
| const intentNode=root.children[0]; | |
| r.cards.forEach(c=>intentNode.children.push({name:c.organ,col:ORGAN_COLORS[c.organ], | |
| leaf:true,lam:c.axis_lambda,verdict:c.verdict})); | |
| const hierarchy=d3.hierarchy(root); | |
| const layout=d3.tree().size([W-80,H-90]);layout(hierarchy); | |
| const g=svg.append('g').attr('transform','translate(40,30)'); | |
| g.selectAll('path.link').data(hierarchy.links()).join('path') | |
| .attr('fill','none').attr('stroke','#24405f').attr('stroke-width',1.5) | |
| .attr('d',d3.linkVertical().x(d=>d.x).y(d=>d.y)); | |
| const node=g.selectAll('g.node').data(hierarchy.descendants()).join('g') | |
| .attr('transform',d=>`translate(${d.x},${d.y})`); | |
| node.append('circle').attr('r',d=>d.data.leaf?16:20) | |
| .attr('fill','#0b1422').attr('stroke',d=>d.data.col||'#5b8cff').attr('stroke-width',3); | |
| node.append('text').attr('text-anchor','middle').attr('dy',d=>d.data.leaf?-22:-26) | |
| .attr('fill','#cfe0f5').attr('font-size',11).attr('font-weight',600) | |
| .text(d=>d.data.name.split('\n')[0]); | |
| node.filter(d=>d.data.name.includes('\n')).append('text').attr('text-anchor','middle').attr('dy',5) | |
| .attr('fill',d=>d.data.col).attr('font-size',11).attr('font-weight',800) | |
| .text(d=>d.data.name.split('\n')[1]); | |
| node.filter(d=>d.data.leaf).append('text').attr('text-anchor','middle').attr('dy',4) | |
| .attr('fill','#9fb6d4').attr('font-size',9).attr('font-family','monospace') | |
| .text(d=>'λ'+d.data.lam.toFixed(2)); | |
| } | |
| function renderReceipt(r){ | |
| const el=document.getElementById('receipt');el.style.display='block'; | |
| const rc=r.receipt||{}; | |
| const sig=rc.signed?'<span class="sig-ok">DSSE signed ✓</span>':'<span class="sig-no">unsigned (honest)</span>'; | |
| el.innerHTML=`<b>Khipu receipt</b> · ${sig}<br> | |
| sha: ${rc.receipt_sha||'—'}<br> | |
| keyid: ${rc.keyid||'—'}<br> | |
| Λ status: ${rc.lambda_status||'Conjecture 1'}<br> | |
| ${rc.signing_honesty?('honesty: '+rc.signing_honesty):''}`; | |
| } | |
| </script> | |
| </body> | |
| </html> | |