Spaces:
Running
Running
File size: 10,649 Bytes
a6a5d8e bcfe2f2 06c9714 bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e bcfe2f2 4d5bafc bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e bcfe2f2 a6a5d8e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>a11oy — Wires · The Constitution · SZL Holdings</title>
<meta name="description" content="The live cross-organ mesh: five wires (B/C/D/E/F) that bind the organs into one signed organism. Each row reads a real a11oy endpoint — no mock data."/>
<!-- SOVEREIGN: 0 runtime CDN. Fonts self-hosted in-image, served same-origin at
/vendor/fonts/*.woff2 (SAME pattern as the clean console). NO external font CDN. -->
<style>
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/vendor/fonts/SpaceGrotesk.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/vendor/fonts/JetBrainsMono.woff2') format('woff2');}
</style>
<style>
:root{
--ground:#0a0a0a; --panel:#0c0c0c; --panel2:#070707;
--gold:#c9b787; --gold-bright:#d6c69a;
--teal:#5fb3a3; --teal-soft:rgba(95,179,163,0.10);
--cream:#f5f5f5; --paragraph:#9a9a9a; --muted:#888; --dim:#555;
--gold-line:rgba(201,183,135,0.15); --gold-soft:rgba(201,183,135,0.04);
--teal-line:rgba(95,179,163,0.22);
--live:#5a8a6e; --err:#b06a5a;
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
--display:'Space Grotesk',Georgia,serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--ground);color:var(--cream);
font-family:var(--display);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.mono{font-family:var(--mono);}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;}
.ribbon{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.25rem;
flex-wrap:wrap;padding:0.5rem 1.25rem;font-family:var(--mono);font-size:10px;
letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);
background:rgba(10,10,10,0.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--gold-line);}
.ribbon .sep{color:var(--dim);} .ribbon .teal{color:var(--teal);}
.ribbon .live{display:inline-flex;align-items:center;gap:0.4rem;color:var(--cream);}
.ribbon a{margin-left:auto;color:var(--teal);text-decoration:none;}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 6px var(--live);animation:pulseDot 2.2s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
.hero{position:relative;overflow:hidden;padding:3rem 1.5rem 2rem;text-align:center;}
.grid-bg{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);}
.hero-inner{position:relative;z-index:2;max-width:64rem;margin:0 auto;}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .85rem;border-radius:999px;border:1px solid var(--gold-line);background:var(--gold-soft);margin-bottom:1.5rem;}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulseDot 2.2s ease-in-out infinite;}
.eyebrow-text{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.headline{font-size:clamp(2.2rem,5vw,4rem);font-weight:300;line-height:1.04;letter-spacing:-.035em;margin:0 0 1.1rem;color:var(--cream);}
.headline .accent{background:linear-gradient(120deg,var(--cream) 20%,var(--gold) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.support{font-size:16px;line-height:1.65;color:var(--paragraph);max-width:42rem;margin:0 auto 1.75rem;}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;max-width:60rem;margin:0 auto;}
.stat{flex:1 1 150px;min-width:140px;border:1px solid var(--gold-line);border-radius:8px;background:var(--panel);padding:.9rem 1rem;text-align:left;}
.stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.stat .v{font-size:1.35rem;font-weight:500;color:var(--gold);margin-top:.25rem;}
.stat .v.teal{color:var(--teal);}
.wrap{max-width:64rem;margin:1.5rem auto 3rem;padding:0 1.25rem;}
.controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.r-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:11.5px;font-weight:500;font-family:var(--mono);
border-radius:6px;border:1px solid var(--gold-line);background:transparent;color:var(--gold);cursor:pointer;letter-spacing:.04em;transition:background .18s,border-color .18s;}
.r-btn:hover{background:rgba(201,183,135,.08);border-color:rgba(201,183,135,.35);}
.r-btn.primary{background:rgba(95,179,163,.10);border-color:var(--teal-line);color:var(--teal);}
.wire{border:1px solid var(--gold-line);border-radius:12px;background:var(--panel);padding:1.2rem 1.3rem;margin-bottom:1rem;}
.wire-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem;flex-wrap:wrap;}
.wire-id{font-family:var(--mono);font-size:12px;color:var(--teal);border:1px solid var(--teal-line);border-radius:5px;padding:.1rem .5rem;background:var(--teal-soft);}
.wire-edge{font-size:1.05rem;font-weight:500;color:var(--cream);}
.wire-status{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:.15rem .55rem;border-radius:999px;}
.st-live{color:var(--live);border:1px solid rgba(90,138,110,.4);background:rgba(90,138,110,.08);}
.st-proc{color:var(--gold);border:1px solid var(--gold-line);background:var(--gold-soft);}
.wire-detail{font-family:var(--mono);font-size:11.5px;color:var(--paragraph);line-height:1.6;}
.meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:1rem;line-height:1.7;}
.honesty{max-width:64rem;margin:0 auto 2rem;padding:1.1rem 1.3rem;border:1px solid var(--gold-line);border-radius:10px;background:var(--gold-soft);
font-size:12px;color:var(--paragraph);line-height:1.7;}
.honesty b{color:var(--gold);}
.footer{padding:2rem 1.5rem 3rem;text-align:center;}
.footer .note{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
@media (max-width:560px){.wire-status{margin-left:0;}}
</style>
</head>
<body>
<div class="ribbon">
<span>SZL HOLDINGS</span><span class="sep">/</span>
<span class="teal">A11OY</span><span class="sep">/</span>
<span>WIRES · THE CONSTITUTION</span><span class="sep">/</span>
<span>DOCTRINE V11 · LOCKED</span><span class="sep">/</span>
<span class="live"><span class="live-dot"></span>LIVE · RT</span>
<a href="/superpowers">superpowers →</a>
</div>
<section class="hero">
<div class="grid-bg" aria-hidden="true"></div>
<div class="hero-inner">
<div class="eyebrow"><span class="eyebrow-dot"></span><span class="eyebrow-text">· five wires · one signed organism</span></div>
<h1 class="headline">Five organs. <span class="accent">One constitution.</span></h1>
<p class="support">The mesh is the constitution: five wires that bind the organs into one organism. Each row below reads the live
<span class="mono">/api/a11oy/v1/mesh/state</span> endpoint — real status, no mock. Honest labels distinguish a fully cross-Space
wire from an in-process one.</p>
<div class="stats">
<div class="stat"><div class="k">Wires</div><div class="v" id="s-wires">—</div></div>
<div class="stat"><div class="k">Doctrine</div><div class="v teal" id="s-doc">v11</div></div>
<div class="stat"><div class="k">Λ status</div><div class="v teal">Conjecture 1</div></div>
<div class="stat"><div class="k">SLSA</div><div class="v teal">Build L2</div></div>
</div>
</div>
</section>
<div class="wrap">
<div class="controls">
<button class="r-btn primary" onclick="loadWires()">▶ Refresh the mesh</button>
<button class="r-btn" onclick="window.location='/observability'">Observability →</button>
</div>
<div id="wires"></div>
<div class="meta" id="meta"></div>
</div>
<div class="honesty">
<b>Honesty.</b> Statuses are read live from <span class="mono">/api/a11oy/v1/mesh/state</span>. <b>LIVE</b> = a real in-Space wire;
<b>LIVE_IN_PROCESS</b> = real W3C trace ids generated + propagated within each Space (the cross-Space distributed-trace broker is
NOT yet wired and is shown honestly). Λ is <b>Conjecture 1</b>, never a theorem. Proved formulas = <b>8</b> {F1,F4,F7,F11,F12,F18,F19,F22}.
SLSA <b>Build L2</b> on all 5 organ images. No L3 / FedRAMP / Iron Bank / CMMC.
</div>
<footer class="footer"><span class="note">a11oy · governance substrate · by SZL Holdings · Counsel-governed · A11oy-orchestrated</span></footer>
<script>
async function getJSON(path){ const r=await fetch(path); if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); }
function statusClass(s){ return (s||'').toUpperCase().includes('PROCESS') ? 'st-proc' : 'st-live'; }
async function loadWires(){
const host=document.getElementById('wires');
host.innerHTML='<div class="wire-detail mono">loading live mesh…</div>';
try{
const d=await getJSON('/api/a11oy/v1/mesh/state');
const wires=d.wires||{};
const keys=Object.keys(wires);
document.getElementById('s-wires').textContent=keys.length;
document.getElementById('s-doc').textContent=d.doctrine||'v11';
host.innerHTML='';
keys.forEach(k=>{
const w=wires[k];
const el=document.createElement('div'); el.className='wire';
el.innerHTML=`<div class="wire-head"><span class="wire-id">Wire ${k}</span>
<span class="wire-edge">${(w.edge||'').replace(/</g,'<')}</span>
<span class="wire-status ${statusClass(w.status)}">${w.status||'—'}</span></div>
<div class="wire-detail">${(w.detail||'').replace(/</g,'<')}</div>`;
host.appendChild(el);
});
const m=document.getElementById('meta');
m.innerHTML=`khipu_root: ${d.khipu_root||'(empty — resets on restart)'}<br>${(d.honesty||'').replace(/</g,'<')}`;
}catch(e){ host.innerHTML='<div class="wire-detail mono" style="color:var(--err)">mesh unreachable: '+e.message+' — retry in a moment (transient).</div>'; }
}
loadWires();
</script>
</body>
</html>
|