Spaces:
Running
Running
| <!-- SPDX-License-Identifier: Apache-2.0 © 2026 Lutar, Stephen P. — SZL Holdings · Doctrine v13 --> | |
| <!-- WASI-RIKUQ surface — observability single-pane + chaos/resilience organ. ADDITIVE per Doctrine v13 §2.3. --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>a11oy · WASI-RIKUQ — the House-Watcher (dashboard of everything)</title> | |
| <style> | |
| :root{--bg:#0b0d12;--panel:#12151d;--ink:#e7ecf3;--mut:#8a93a6;--acc:#7cc4ff;--ok:#54d18c;--warn:#ffcf5c;--bad:#ff6b6b;--line:#222838;--mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace} | |
| *{box-sizing:border-box} | |
| body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif} | |
| a{color:var(--acc)} | |
| .wrap{max-width:1100px;margin:0 auto;padding:28px 20px 80px} | |
| .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px} | |
| .brand{font-weight:700;letter-spacing:.5px}.tag{font-size:12px;color:var(--mut)} | |
| .nav a{margin-left:14px;font-size:13px;text-decoration:none;color:var(--mut)}.nav a:hover{color:var(--acc)} | |
| h1{font-size:26px;margin:24px 0 6px}.sub{color:var(--mut);margin:0 0 18px} | |
| .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin:14px 0;border-left:3px solid var(--ok)} | |
| .path{font-family:var(--mono);font-size:12.5px;color:var(--acc);margin:6px 0} | |
| pre{width:100%;background:#0a0c11;color:var(--ink);border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:12px;padding:10px;overflow:auto;max-height:300px;white-space:pre-wrap;word-break:break-word} | |
| button{background:var(--acc);color:#06121f;border:0;border-radius:8px;padding:9px 16px;font-weight:600;cursor:pointer;font-size:13px;margin:8px 8px 8px 0} | |
| input,select{background:#0a0c11;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px} | |
| .mut{color:var(--mut);font-size:13px} | |
| .scene{width:100%;height:340px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(circle at 50% 25%,#10131c,#080a0f);margin:14px 0} | |
| .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:8px} | |
| .tile{background:#0a0c11;border:1px solid var(--line);border-radius:10px;padding:12px} | |
| .tile .n{font-size:24px;font-weight:700} .tile .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px} | |
| .big{font-size:54px;font-weight:800} .verdict{font-size:14px;font-weight:700;padding:3px 12px;border-radius:20px} | |
| .verdict.GREEN{color:var(--ok);background:#0f2a1c}.verdict.AMBER{color:var(--warn);background:#2a2410}.verdict.RED{color:var(--bad);background:#2a1414} | |
| .honest{background:#0e1117;border:1px solid #2a2030;border-left:3px solid var(--warn);border-radius:10px;padding:14px 16px;margin:22px 0;font-size:13px} | |
| .honest b{color:var(--warn)} code{font-family:var(--mono);color:var(--acc);font-size:12.5px} | |
| footer{margin-top:34px;border-top:1px solid var(--line);padding-top:14px;color:var(--mut);font-size:12px} | |
| </style> | |
| <script type="importmap"> | |
| {"imports":{"three":"https://esm.sh/three@0.160.0"}} | |
| </script> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="top"> | |
| <div><span class="brand">a11oy</span> <span class="tag">· WASI-RIKUQ — the House-Watcher · Doctrine v13 §2.3</span></div> | |
| <div class="nav"><a href="/">home</a><a href="/chaski">chaski</a><a href="/wallpa">wallpa</a><a href="/wasi-rikuq">wasi-rikuq</a></div> | |
| </div> | |
| <h1>WASI-RIKUQ — the House-Watcher</h1> | |
| <p class="sub">Quechua <code>wasi</code> (house) + <code>rikuq</code> (one who watches, from <code>rikuy</code> = to see/watch over). The founder's dashboard of everything: it watches every flagship, owns the incident log + runbooks, runs 2-person-gated chaos, and computes one health number. Factor: <code>Wasi(a)=(∏ₒ hₒ)·𝟙[error-budget intact] ∈ [0,1]</code> — <b>advisory only; HUKLLA stays the sole halt-authority</b>.</p> | |
| <div class="scene"><canvas id="watcher3d" style="width:100%;height:100%;display:block;border-radius:12px"></canvas></div> | |
| <p class="mut" style="text-align:center;margin-top:-6px">A watchman atop a tower, eyes on every organ. Node color = health. Drag to orbit.</p> | |
| <div class="card"> | |
| <h3>Health of the empire — single number</h3> | |
| <div class="path">GET /api/a11oy/wasi-rikuq/health-of-the-empire</div> | |
| <button onclick="loadHealth()">Compute health</button> | |
| <div style="display:flex;align-items:center;gap:20px;margin-top:8px"> | |
| <div class="big" id="healthnum">—</div><div class="verdict" id="verdict">—</div> | |
| </div> | |
| <pre id="healthout">— one number in [0,1] expressing overall house health —</pre> | |
| </div> | |
| <div class="card"> | |
| <h3>Single-pane dashboard</h3> | |
| <div class="path">GET /api/a11oy/wasi-rikuq/dashboard</div> | |
| <button onclick="loadDash()">Load dashboard</button> | |
| <div class="grid" id="tiles"></div> | |
| <pre id="dashout">— uptime · latency · error rate · Khipu DAG depth · Yuyay distribution · HUKLLA firings · wire pulse —</pre> | |
| </div> | |
| <div class="card"> | |
| <h3>Incidents + auto-loaded runbook</h3> | |
| <div class="path">GET /incidents · GET /runbook?incident_type=…</div> | |
| <select id="itype"><option>flagship_down</option><option>khipu_integrity_fail</option><option>all_llm_down</option><option>breaker_open</option><option>chaos_regression</option><option>sorry_drift</option></select> | |
| <button onclick="loadRunbook()">Load runbook</button> | |
| <button onclick="loadIncidents()" style="background:transparent;color:var(--acc);border:1px solid var(--acc)">Incident log (30d)</button> | |
| <pre id="incout">— live + 30d incident log; runbook auto-loads by incident type —</pre> | |
| </div> | |
| <div class="card"> | |
| <h3>Chaos experiment — 2-person Yuyay gate</h3> | |
| <div class="path">POST /api/a11oy/wasi-rikuq/chaos</div> | |
| <input id="exp" placeholder="experiment, e.g. kill-amaru-pod" size="28"/> | |
| <button onclick="chaos(1)">Try with 1 approver (should DENY)</button> | |
| <button onclick="chaos(2)">Try with 2 approvers (should ALLOW)</button> | |
| <pre id="chaosout">— chaos is gated: needs 2 DISTINCT approvers, each with 13-axis yuyay_score ≥ 0.90 —</pre> | |
| </div> | |
| <div class="honest"> | |
| <b>Honest labels (Doctrine v13 §5 + HARD RULES):</b> WASI-RIKUQ is <b>advisory only</b> — it informs <b>HUKLLA</b> but never usurps it (INV-1 preserved). It wires into <b>Wires D–H</b> from the resilience mesh. Chaos requires a <b>2-person Yuyay gate</b>. Every action emits a <b>Khipu receipt</b> (SHA3-256 hash-chain; signature <b>DSSE PLACEHOLDER</b>). Durable metrics DB / Prometheus / Grafana is the P1 backend; this surface is the P0 single-pane face. | |
| </div> | |
| <footer>a11oy · WASI-RIKUQ observability + resilience organ · Doctrine v13 (additive over v12 / v11 LOCKED 749/14/163 · 13-axis · replay <code>bacf5443…631fc5</code>) · — Yachay</footer> | |
| </div> | |
| <script> | |
| const API='/api/a11oy/wasi-rikuq';let LASTHEALTH={}; | |
| function show(id,o){document.getElementById(id).textContent=typeof o==='string'?o:JSON.stringify(o,null,2);} | |
| async function loadHealth(){try{const j=await(await fetch(API+'/health-of-the-empire')).json();LASTHEALTH=j.per_flagship_health||{}; | |
| document.getElementById('healthnum').textContent=j.health_of_the_empire.toFixed(3); | |
| const v=document.getElementById('verdict');v.textContent=j.verdict;v.className='verdict '+j.verdict; | |
| show('healthout',j);paintNodes(); | |
| }catch(e){show('healthout','error: '+e);}} | |
| async function loadDash(){try{const j=await(await fetch(API+'/dashboard')).json();const sp=j.single_pane; | |
| const tiles=[['flagships up',sp.flagships_up],['avg latency ms',sp.avg_latency_ms],['error rate',sp.error_rate],['Yuyay axes',sp.yuyay_distribution.axes_total],['HUKLLA fired',sp.huklla_firings['T01-T10']],['declarations',sp.locked_numbers.declarations],['sorries',sp.locked_numbers.sorries]]; | |
| document.getElementById('tiles').innerHTML=tiles.map(([l,n])=>`<div class="tile"><div class="n">${n}</div><div class="l">${l}</div></div>`).join(''); | |
| show('dashout',sp); | |
| }catch(e){show('dashout','error: '+e);}} | |
| async function loadRunbook(){try{const t=document.getElementById('itype').value;show('incout',await(await fetch(API+'/runbook?incident_type='+t)).json());}catch(e){show('incout','error: '+e);}} | |
| async function loadIncidents(){try{show('incout',await(await fetch(API+'/incidents')).json());}catch(e){show('incout','error: '+e);}} | |
| async function chaos(n){try{const exp=document.getElementById('exp').value||'kill-amaru-pod'; | |
| const ap=[{id:'alice',yuyay_score:0.95}];if(n>=2)ap.push({id:'bob',yuyay_score:0.93}); | |
| const r=await fetch(API+'/chaos',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({experiment:exp,yuyay_approvers:ap})}); | |
| show('chaosout',{http_status:r.status,...(await r.json())}); | |
| }catch(e){show('chaosout','error: '+e);}} | |
| loadHealth();loadDash(); | |
| </script> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| import {OrbitControls} from 'https://esm.sh/three@0.160.0/examples/jsm/controls/OrbitControls.js'; | |
| const canvas=document.getElementById('watcher3d'); | |
| const renderer=new THREE.WebGLRenderer({canvas,antialias:true,alpha:true}); | |
| function size(){renderer.setSize(canvas.clientWidth,canvas.clientHeight,false);} | |
| const scene=new THREE.Scene(); | |
| const cam=new THREE.PerspectiveCamera(50,canvas.clientWidth/canvas.clientHeight,0.1,100);cam.position.set(0,3,8); | |
| const ctrl=new OrbitControls(cam,renderer.domElement);ctrl.enableDamping=true;ctrl.enablePan=false; | |
| scene.add(new THREE.AmbientLight(0x6688ff,0.5));const key=new THREE.PointLight(0xffffff,2.0,50);key.position.set(3,7,5);scene.add(key); | |
| // Watch-tower | |
| const tower=new THREE.Mesh(new THREE.CylinderGeometry(0.45,0.7,3.2,12),new THREE.MeshStandardMaterial({color:0x2a3447,roughness:0.8}));tower.position.y=1.6;scene.add(tower); | |
| // Watchman (a glowing eye atop the tower) | |
| const eye=new THREE.Mesh(new THREE.SphereGeometry(0.42,28,28),new THREE.MeshStandardMaterial({color:0x7cc4ff,emissive:0x2b6bd1,emissiveIntensity:1.4,roughness:0.2}));eye.position.y=3.6;scene.add(eye); | |
| const pupil=new THREE.Mesh(new THREE.SphereGeometry(0.16,20,20),new THREE.MeshStandardMaterial({color:0x06121f,emissive:0x000000}));pupil.position.set(0,3.6,0.34);scene.add(pupil); | |
| // Five organ nodes ringed around the base, color set by health | |
| const names=['amaru','sentra','killinchu','rosie','a11oy'];const nodes={}; | |
| names.forEach((nm,i)=>{const a=i/names.length*Math.PI*2;const x=Math.sin(a)*3.6,z=Math.cos(a)*3.6; | |
| const n=new THREE.Mesh(new THREE.IcosahedronGeometry(0.34,0),new THREE.MeshStandardMaterial({color:0x54d18c,emissive:0x123a26,emissiveIntensity:0.8})); | |
| n.position.set(x,0.4,z);scene.add(n);nodes[nm]=n; | |
| const line=new THREE.Line(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0,3.6,0),n.position]),new THREE.LineBasicMaterial({color:0x335577,transparent:true,opacity:0.6}));scene.add(line);}); | |
| window._paint=function(){for(const nm in nodes){const h=(window._health&&window._health[nm]!==undefined)?window._health[nm]:1;const c=h>=0.8?0x54d18c:(h>0.3?0xffcf5c:0xff6b6b);nodes[nm].material.color.setHex(c);nodes[nm].material.emissive.setHex(c);nodes[nm].material.emissiveIntensity=0.5;}}; | |
| let t=0;function loop(){t+=0.016;eye.rotation.y=Math.sin(t*0.7)*0.6;pupil.position.x=Math.sin(t*0.7)*0.18;pupil.position.z=0.34+Math.cos(t*0.7)*0.05; | |
| for(const nm in nodes)nodes[nm].rotation.y+=0.012;ctrl.update();renderer.render(scene,cam);requestAnimationFrame(loop);} | |
| size();window.addEventListener('resize',()=>{size();cam.aspect=canvas.clientWidth/canvas.clientHeight;cam.updateProjectionMatrix();});loop(); | |
| </script> | |
| <script>function paintNodes(){window._health=LASTHEALTH;if(window._paint)window._paint();}</script> | |
| </body> | |
| </html> | |