/* ============================================================================ * a11oy_operator_organ.js — The OPERATOR organ: live 3D infrastructure topology. * * PROVENANCE: the real 3D infra-visualization capability was ingested from an * internal showpiece Space and re-homed here as the platform's Operator organ. * The orbiting-node / signal-wire / live-health-poll engine is that capability; * it has been re-themed to a11oy's sovereign-gold palette and reframed as an * honest infrastructure topology (the 5 governed SZL services + the Operator * core). No banned codenames are surfaced — this is the "Operator" organ. * * 0 RUNTIME CDN: Three.js r160 + OrbitControls are vendored locally and loaded * via the import map ("three" -> /hero/vendor3d/three.module.min.js). Glow is * additive-blend sprites (no postprocessing pass), so nothing un-vendored is * needed. Honest live/cached/pending states only — no fabricated telemetry. * * Doctrine v11: locked-proven = 8 {F1,F4,F7,F11,F12,F18,F19,F22}; Λ = Conjecture 1. * Signed-off-by: Opus 4.8 (Dev3 — Operator-organ ingest). Apache-2.0. * ========================================================================== */ import * as THREE from 'three'; import { OrbitControls } from 'three/addons/OrbitControls.js'; const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const GOLD = 0xc9b787, GOLD_BRIGHT = 0xd6c69a, LIVE = 0x5a8a6e, WARN = 0xc7a14a, DOWN = 0x9a4a4a; // Infra topology source — fetched server-side from /operator-organ/topology.json // (which reads the org infra manifest + probes the 5 governed services). The // nodes below are the honest fallback skeleton used until topology.json loads. const FALLBACK = { core: { id: 'operator', name: 'Operator Core', role: 'orchestrator' }, nodes: [ { id: 'gate', name: 'Trust Gate', role: 'heart', pos: [13, 6, 2] }, { id: 'reasoning', name: 'Reasoning Cortex', role: 'brain', pos: [8, 12, -3] }, { id: 'receipts', name: 'Receipt Bus', role: 'circulatory', pos: [-13, 7, 2] }, { id: 'telemetry', name: 'Telemetry Spans', role: 'nervous', pos: [12, -5, 3] }, { id: 'mesh', name: 'Service Mesh', role: 'skeleton', pos: [-12, -5, 3] }, { id: 'fleet', name: 'Fleet C2', role: 'effector', pos: [0, 6, -15] }, ], }; let scene, camera, renderer, controls, raycaster, pointer; let coreGroup, coreMat, nodes = {}, wires = [], clock = new THREE.Clock(); let topo = FALLBACK, lastFpsTime = performance.now(), frameCount = 0, fps = 60; let dataMode = 'pending'; // live | cached | pending const CENTER = new THREE.Vector3(0, 6, 0); const PARTICLE_GEO = new THREE.SphereGeometry(0.13, 8, 6); const PER_WIRE = 5; init(); async function init() { const wrap = document.getElementById('scene'); scene = new THREE.Scene(); scene.background = new THREE.Color(0x0a0a0a); scene.fog = new THREE.FogExp2(0x0a0a0a, 0.012); camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 1000); camera.position.set(0, 7, 34); renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' }); renderer.setSize(innerWidth, innerHeight); renderer.setPixelRatio(Math.min(devicePixelRatio, 1.8)); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.12; wrap.appendChild(renderer.domElement); scene.add(new THREE.AmbientLight(0x2a2a33, 0.7)); const key = new THREE.DirectionalLight(0xffe6b8, 1.0); key.position.set(6, 16, 12); scene.add(key); const fill = new THREE.DirectionalLight(0xc9b787, 0.4); fill.position.set(-12, 4, 8); scene.add(fill); scene.add(new THREE.PointLight(0xd6c69a, 0.7, 60)); controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.07; controls.minDistance = 10; controls.maxDistance = 90; controls.target.copy(CENTER); raycaster = new THREE.Raycaster(); pointer = new THREE.Vector2(); buildStarfield(); await loadTopology(); // sets `topo` + dataMode before building buildCore(); buildNodes(); buildWires(); buildUI(); addEventListener('resize', onResize); pollHealth(); setInterval(pollHealth, 30000); setInterval(updateClock, 1000); updateClock(); animate(); } function buildStarfield() { const n = REDUCED ? 600 : 1500, pos = [], col = []; const c1 = new THREE.Color(0x2a2a33), c2 = new THREE.Color(GOLD); for (let i = 0; i < n; i++) { pos.push((Math.random() - 0.5) * 280, (Math.random() - 0.5) * 280, (Math.random() - 0.5) * 280); const c = c1.clone().lerp(c2, Math.random() * 0.5); col.push(c.r, c.g, c.b); } const geo = new THREE.BufferGeometry(); geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3)); geo.setAttribute('color', new THREE.Float32BufferAttribute(col, 3)); scene.add(new THREE.Points(geo, new THREE.PointsMaterial({ size: 0.4, vertexColors: true, transparent: true, opacity: 0.5 }))); } function glowSprite(color, size, op) { const cv = document.createElement('canvas'); cv.width = cv.height = 128; const g = cv.getContext('2d'); const col = new THREE.Color(color); const rgb = `${(col.r*255)|0},${(col.g*255)|0},${(col.b*255)|0}`; const grd = g.createRadialGradient(64, 64, 0, 64, 64, 64); grd.addColorStop(0, `rgba(${rgb},0.9)`); grd.addColorStop(0.4, `rgba(${rgb},0.35)`); grd.addColorStop(1, 'rgba(0,0,0,0)'); g.fillStyle = grd; g.fillRect(0, 0, 128, 128); const s = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(cv), transparent: true, opacity: op, blending: THREE.AdditiveBlending, depthWrite: false })); s.scale.set(size, size, 1); return s; } // ---- central Operator core (orchestrator) ---- function buildCore() { coreGroup = new THREE.Group(); coreGroup.position.copy(CENTER); coreMat = new THREE.MeshStandardMaterial({ color: GOLD_BRIGHT, emissive: 0xb89a52, emissiveIntensity: 1.3, roughness: 0.4, metalness: 0.4, toneMapped: false }); const core = new THREE.Mesh(new THREE.IcosahedronGeometry(2.0, 2), coreMat); // gentle surface displacement for an organic governed-core look const p = core.geometry.attributes.position; for (let i = 0; i < p.count; i++) { const v = new THREE.Vector3().fromBufferAttribute(p, i); const nn = 0.12 * Math.sin(v.x * 3) * Math.cos(v.y * 3) * Math.sin(v.z * 2.5); v.multiplyScalar(1 + nn); p.setXYZ(i, v.x, v.y, v.z); } core.geometry.computeVertexNormals(); coreGroup.add(core); const cage = new THREE.Mesh(new THREE.IcosahedronGeometry(2.5, 1), new THREE.MeshBasicMaterial({ color: GOLD, wireframe: true, transparent: true, opacity: 0.35, toneMapped: false })); coreGroup.add(cage); coreGroup.userData.cage = cage; coreGroup.add(glowSprite(GOLD, 11, 0.5)); coreGroup.add(makeLabel(topo.core.name || 'Operator Core', '#d6c69a', 1.05)); coreGroup.children[coreGroup.children.length - 1].position.set(0, 3.4, 0); scene.add(coreGroup); } // ---- governed-service nodes orbiting the core ---- function buildNodes() { topo.nodes.forEach(nd => { const grp = new THREE.Group(); grp.position.set(...(nd.pos || [10, 0, 0])); const orb = new THREE.Mesh(new THREE.IcosahedronGeometry(0.85, 1), new THREE.MeshStandardMaterial({ color: 0x6a6a6a, emissive: 0x333333, emissiveIntensity: 0.6, metalness: 0.5, roughness: 0.35, toneMapped: false })); grp.add(orb); const halo = new THREE.Mesh(new THREE.TorusGeometry(1.35, 0.05, 8, 48), new THREE.MeshBasicMaterial({ color: 0x6a6a6a, transparent: true, opacity: 0.5, toneMapped: false })); grp.add(halo); grp.add(glowSprite(0x6a6a6a, 4.5, 0.35)); const gl = grp.children[grp.children.length - 1]; const label = makeLabel(nd.name, '#c9b787', 0.9); label.position.set(0, 1.9, 0); grp.add(label); scene.add(grp); nodes[nd.id] = { grp, orb, halo, glow: gl, label, data: nd, alive: null }; }); } // ---- signal wires from core to each node ---- function buildWires() { topo.nodes.forEach(nd => { const start = CENTER.clone(); const end = new THREE.Vector3(...(nd.pos || [10, 0, 0])); const mid = start.clone().add(end).multiplyScalar(0.5).add(new THREE.Vector3((Math.random()-0.5)*2, 2.5, (Math.random()-0.5)*2)); const curve = new THREE.QuadraticBezierCurve3(start, mid, end); const grp = new THREE.Group(); const pts = curve.getPoints(60); const dashed = new THREE.Line(new THREE.BufferGeometry().setFromPoints(pts), new THREE.LineDashedMaterial({ color: 0x6a6a6a, transparent: true, opacity: 0.5, dashSize: 0.4, gapSize: 0.3 })); dashed.computeLineDistances(); grp.add(dashed); const tube = new THREE.Mesh(new THREE.TubeGeometry(curve, 64, 0.045, 8, false), new THREE.MeshStandardMaterial({ color: LIVE, emissive: LIVE, emissiveIntensity: 1.2, metalness: 0.3, roughness: 0.3, transparent: true, opacity: 0, toneMapped: false })); grp.add(tube); const particles = []; const pmat = new THREE.MeshBasicMaterial({ color: LIVE, toneMapped: false }); for (let k = 0; k < PER_WIRE; k++) { const pp = new THREE.Mesh(PARTICLE_GEO, pmat.clone()); pp.userData = { t: k / PER_WIRE }; pp.visible = false; grp.add(pp); particles.push(pp); } scene.add(grp); wires.push({ id: nd.id, grp, dashed, tube, particles, curve, live: false }); }); } function makeLabel(text, color, scale) { const cv = document.createElement('canvas'); cv.width = 320; cv.height = 64; const ctx = cv.getContext('2d'); ctx.fillStyle = 'rgba(10,10,10,0.72)'; roundRect(ctx, 4, 8, 312, 48, 12); ctx.fill(); ctx.font = 'bold 28px "Space Grotesk", Georgia, sans-serif'; ctx.fillStyle = color || '#f5f5f5'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, 160, 34); const spr = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(cv), transparent: true, depthWrite: false })); spr.scale.set(4.2 * (scale || 1), 0.84 * (scale || 1), 1); return spr; } function roundRect(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); } // ============================================================ // TOPOLOGY + LIVE HEALTH — server-side fetched, honest degrade // ============================================================ async function loadTopology() { try { const r = await fetch('/operator-organ/topology.json', { cache: 'no-store', signal: AbortSignal.timeout(8000) }); if (r.ok) { const j = await r.json(); if (j && Array.isArray(j.nodes) && j.nodes.length) { topo = j; dataMode = j.source === 'live' ? 'live' : 'cached'; } } } catch { dataMode = 'pending'; } setModeBadge(); } async function pollHealth() { let alive = 0; for (const nd of topo.nodes) { let up = (typeof nd.healthy === 'boolean') ? nd.healthy : null; const n = nodes[nd.id]; if (!n) continue; if (up) alive++; const c = new THREE.Color(up === true ? LIVE : (up === false ? DOWN : WARN)); n.orb.material.color.copy(c); n.orb.material.emissive.copy(c); n.halo.material.color.copy(c); n.glow.material.color.copy(c); const w = wires.find(x => x.id === nd.id); if (w) { w.live = up === true; w.dashed.visible = up !== true; w.tube.material.opacity = up === true ? 0.8 : 0; w.tube.material.color.copy(c); w.tube.material.emissive.copy(c); w.particles.forEach(p => { p.visible = up === true; p.material.color.copy(c); }); } } // refresh topology (which carries live healthy flags) on each poll cycle await loadTopology(); renderHUD(alive); } function setModeBadge() { const el = document.getElementById('opMode'); if (!el) return; const map = { live: ['LIVE', '#5a8a6e'], cached: ['CACHED', '#c7a14a'], pending: ['PENDING', '#9a4a4a'] }; const [txt, col] = map[dataMode] || map.pending; el.textContent = txt; el.style.color = col; } function renderHUD(alive) { const set = (id, v) => { const e = document.getElementById(id); if (e) e.textContent = v; }; set('opNodes', topo.nodes.length); set('opAlive', `${alive}/${topo.nodes.length}`); const ul = document.getElementById('opList'); if (ul) ul.innerHTML = topo.nodes.map(nd => { const st = nd.healthy === true ? 'up' : (nd.healthy === false ? 'down' : 'warn'); const tag = nd.healthy === true ? 'live' : (nd.healthy === false ? 'down' : 'unmeasured'); return `