diff options
Diffstat (limited to 'downloads/memory/release-arc-3d.html')
| -rw-r--r-- | downloads/memory/release-arc-3d.html | 384 |
1 files changed, 384 insertions, 0 deletions
diff --git a/downloads/memory/release-arc-3d.html b/downloads/memory/release-arc-3d.html new file mode 100644 index 0000000..2aa359d --- /dev/null +++ b/downloads/memory/release-arc-3d.html @@ -0,0 +1,384 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8"> +<title>newOS4 Memory Constellation — v4.5.86 → v4.5.90b</title> +<style> + html,body { margin:0; padding:0; background:#02030a; color:#cfe; font-family:ui-monospace,Menlo,monospace; overflow:hidden; } + #app { position:fixed; inset:0; } + #hud { position:fixed; top:12px; left:12px; padding:10px 14px; background:rgba(0,0,0,.55); border:1px solid #234; border-radius:6px; max-width:320px; font-size:12px; line-height:1.5; backdrop-filter:blur(6px); } + #hud h1 { margin:0 0 6px; font-size:14px; color:#9ef; letter-spacing:.5px; } + #hud .row { display:flex; justify-content:space-between; gap:12px; } + #hud .k { color:#678; } #hud .v { color:#bdf; } + #info { position:fixed; bottom:12px; left:12px; padding:10px 14px; background:rgba(0,0,0,.55); border:1px solid #234; border-radius:6px; max-width:420px; font-size:12px; line-height:1.55; backdrop-filter:blur(6px); display:none; } + #info .ver { color:#fff; font-weight:700; } + #info .phase { color:#9ef; font-size:10px; text-transform:uppercase; letter-spacing:1px; } + #info ul { margin:6px 0 0; padding-left:16px; color:#9ab; } + #controls { position:fixed; top:12px; right:12px; display:flex; flex-direction:column; gap:6px; } + #controls button { background:rgba(0,0,0,.6); color:#9ef; border:1px solid #234; padding:6px 10px; font-family:inherit; font-size:11px; border-radius:4px; cursor:pointer; } + #controls button:hover { background:rgba(40,80,120,.5); } + #legend { position:fixed; bottom:12px; right:12px; padding:8px 12px; background:rgba(0,0,0,.55); border:1px solid #234; border-radius:6px; font-size:11px; } + #legend .item { display:flex; align-items:center; gap:6px; margin:2px 0; color:#9ab; } + #legend .dot { width:8px; height:8px; border-radius:50%; } + #tip { position:fixed; bottom:6px; left:50%; transform:translateX(-50%); color:#456; font-size:10px; letter-spacing:1px; } +</style> +</head> +<body> +<div id="app"></div> +<div id="hud"> + <h1>◉ newOS4 MEMORY CONSTELLATION</h1> + <div class="row"><span class="k">range</span><span class="v">v4.5.86 → v4.5.90b</span></div> + <div class="row"><span class="k">releases</span><span class="v">7</span></div> + <div class="row"><span class="k">modules</span><span class="v">43</span></div> + <div class="row"><span class="k">skills</span><span class="v">24</span></div> + <div class="row"><span class="k">review findings</span><span class="v">12 closed</span></div> + <div class="row"><span class="k">status</span><span class="v">✅ shipped clean</span></div> +</div> +<div id="info"></div> +<div id="controls"> + <button id="b-rot">⏸ auto-rotate</button> + <button id="b-pulse">◌ trigger pulse</button> + <button id="b-reset">⌖ reset view</button> +</div> +<div id="legend"> + <div class="item"><span class="dot" style="background:#4488ff"></span>v4.5.86 cold-start</div> + <div class="item"><span class="dot" style="background:#44ddff"></span>v4.5.87 purge</div> + <div class="item"><span class="dot" style="background:#44ffaa"></span>v4.5.88 schema</div> + <div class="item"><span class="dot" style="background:#88ff44"></span>v4.5.89 connectors</div> + <div class="item"><span class="dot" style="background:#ffee44"></span>v4.5.89b review</div> + <div class="item"><span class="dot" style="background:#ff9944"></span>v4.5.90 skills</div> + <div class="item"><span class="dot" style="background:#ff4488"></span>v4.5.90b skill-review</div> +</div> +<div id="tip">drag to rotate · scroll to zoom · click a node</div> + +<script type="importmap"> +{ + "imports": { + "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", + "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" + } +} +</script> + +<script type="module"> +import * as THREE from 'three'; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + +// ─── SCENE SETUP ───────────────────────────────────────────────────────── +const app = document.getElementById('app'); +const scene = new THREE.Scene(); +scene.fog = new THREE.FogExp2(0x02030a, 0.012); + +const camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 200); +camera.position.set(12, 8, 16); + +const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:false }); +renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); +renderer.setSize(innerWidth, innerHeight); +renderer.setClearColor(0x02030a); +app.appendChild(renderer.domElement); + +const controls = new OrbitControls(camera, renderer.domElement); +controls.enableDamping = true; +controls.dampingFactor = 0.06; +controls.minDistance = 6; +controls.maxDistance = 40; +const initialCam = camera.position.clone(); + +// ─── LIGHTING ──────────────────────────────────────────────────────────── +scene.add(new THREE.HemisphereLight(0x6688aa, 0x110022, 0.55)); +const key = new THREE.DirectionalLight(0xffeebb, 1.1); key.position.set(8, 12, 6); scene.add(key); +const fill = new THREE.PointLight(0x4488ff, 1.4, 30); fill.position.set(-8, 4, -6); scene.add(fill); +const rim = new THREE.PointLight(0xff4488, 0.9, 24); rim.position.set(6, 8, -10); scene.add(rim); + +// ─── RELEASE DATA (hand-calculated helix positions) ───────────────────── +// Helix: 7 points, R=4.2, y-step=1.4, angle = i * 2π/6 +// x = R*cos(θ), z = R*sin(θ), y = i*1.4 - 4.2 (centered vertically) +const R = 4.2, STEP = 1.4, OFFSET_Y = -4.2; +const cos = (a)=>Math.cos(a), sin=(a)=>Math.sin(a); +const angle = (i)=>i * (Math.PI*2/6); +const yOf = (i)=>i * STEP + OFFSET_Y; + +const releases = [ + { v:'v4.5.86', phase:'Cold-Start', color:0x4488ff, size:0.55, info:[ + 'Activated 3 dormant modules', + 'Predictor, MemoryGraph, WorldModel', + 'First runnable cognitive stack']}, + { v:'v4.5.87', phase:'Purge + Slim', color:0x44ddff, size:0.50, info:[ + '-42% system prompt', + 'Removed dead code', + 'Smaller, faster, focused']}, + { v:'v4.5.88', phase:'Schema 2.0', color:0x44ffaa, size:0.55, info:[ + 'Namespace: global vs agent', + 'source_session field', + 'Dual-lookup (by id + by query)']}, + { v:'v4.5.89', phase:'Connectors', color:0x88ff44, size:0.62, info:[ + 'memgraph ↔ NVFS bridge', + 'World-model TTL + refresh', + 'Lazy decay, semantic sync']}, + { v:'v4.5.89b', phase:'Review Harden', color:0xffee44, size:0.58, info:[ + '6 review findings fixed', + 'Config persistence', + 'Clean before R3']}, + { v:'v4.5.90', phase:'Agent Skills', color:0xff9944, size:0.78, info:[ + '4 commands: learn, validate, audit, restore', + '8 methods exposed', + 'Skills self-improve']}, + { v:'v4.5.90b', phase:'Skill Review', color:0xff4488, size:0.85, info:[ + '6 more findings closed', + 'Bayesian confidence (uses/(uses+5))', + '0 P0/P1 outstanding']}, +]; + +// ─── GLOW TEXTURE (canvas-based radial gradient) ──────────────────────── +function glowTexture(inner, outer){ + const c = document.createElement('canvas'); c.width = c.height = 128; + const ctx = c.getContext('2d'); + const g = ctx.createRadialGradient(64,64,0, 64,64,64); + g.addColorStop(0, inner); g.addColorStop(0.4, outer); g.addColorStop(1, 'rgba(0,0,0,0)'); + ctx.fillStyle = g; ctx.fillRect(0,0,128,128); + return new THREE.CanvasTexture(c); +} + +// ─── CENTRAL CORE ──────────────────────────────────────────────────────── +const coreGeo = new THREE.IcosahedronGeometry(1.1, 1); +const coreMat = new THREE.MeshPhongMaterial({ color:0xffffff, emissive:0x4488ff, emissiveIntensity:0.6, shininess:80, flatShading:true }); +const core = new THREE.Mesh(coreGeo, coreMat); +scene.add(core); + +// core glow halo +const coreGlow = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowTexture('rgba(120,180,255,0.9)','rgba(40,80,180,0.4)'), blending:THREE.AdditiveBlending, depthWrite:false })); +coreGlow.scale.set(5,5,5); +scene.add(coreGlow); + +// ─── RELEASE NODES ─────────────────────────────────────────────────────── +const releaseGroup = new THREE.Group(); +scene.add(releaseGroup); + +const releaseMeshes = []; +releases.forEach((r, i) => { + const a = angle(i); + const pos = new THREE.Vector3(R*cos(a), yOf(i), R*sin(a)); + + // sphere + const geo = new THREE.SphereGeometry(r.size, 32, 32); + const mat = new THREE.MeshPhongMaterial({ color: r.color, emissive: r.color, emissiveIntensity: 0.35, shininess:60 }); + const mesh = new THREE.Mesh(geo, mat); + mesh.position.copy(pos); + mesh.userData = r; + releaseGroup.add(mesh); + releaseMeshes.push(mesh); + + // glow sprite + const glow = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowTexture('rgba(255,255,255,0.5)','rgba(0,0,0,0)'), color: r.color, blending:THREE.AdditiveBlending, depthWrite:false, transparent:true, opacity:0.7 })); + glow.scale.set(r.size*3.5, r.size*3.5, 1); + glow.position.copy(pos); + releaseGroup.add(glow); + + // label sprite (canvas-baked text) + const lc = document.createElement('canvas'); lc.width=256; lc.height=64; + const lctx = lc.getContext('2d'); + lctx.font='bold 28px ui-monospace,monospace'; + lctx.textAlign='center'; lctx.textBaseline='middle'; + lctx.fillStyle = '#' + r.color.toString(16).padStart(6,'0'); + lctx.shadowColor='#000'; lctx.shadowBlur=6; + lctx.fillText(r.v, 128, 32); + const labelTex = new THREE.CanvasTexture(lc); + const label = new THREE.Sprite(new THREE.SpriteMaterial({ map: labelTex, depthWrite:false, transparent:true })); + label.scale.set(2.0, 0.5, 1); + label.position.set(pos.x, pos.y + r.size + 0.35, pos.z); + releaseGroup.add(label); +}); + +// ─── EDGES (curves between consecutive releases + radial to core) ──────── +const edgeMat = new THREE.LineBasicMaterial({ color: 0x446688, transparent:true, opacity:0.55 }); +for (let i=0; i<releaseMeshes.length-1; i++){ + const a = releaseMeshes[i].position, b = releaseMeshes[i+1].position; + // quadratic curve via midpoint + slight outward bulge + const mid = a.clone().add(b).multiplyScalar(0.5); + mid.add(new THREE.Vector3(0, 0.6, 0)); + const curve = new THREE.QuadraticBezierCurve3(a, mid, b); + const pts = curve.getPoints(40).map(p => new THREE.Vector3(p.x, p.y, p.z)); + const geo = new THREE.BufferGeometry().setFromPoints(pts); + releaseGroup.add(new THREE.Line(geo, edgeMat)); +} +// radial spokes from each release to core +for (const m of releaseMeshes){ + const geo = new THREE.BufferGeometry().setFromPoints([m.position, new THREE.Vector3(0,0,0)]); + const line = new THREE.Line(geo, new THREE.LineDashedMaterial({ color:0x224466, dashSize:0.15, gapSize:0.1, transparent:true, opacity:0.4 })); + line.computeLineDistances(); + releaseGroup.add(line); +} + +// ─── SKILL ORBIT NODES (4 commands from v4.5.90) ──────────────────────── +const skills = [ + { name:'skill-learn', color:0xffddaa }, + { name:'skill-validate', color:0xaaffdd }, + { name:'skill-audit', color:0xddaaff }, + { name:'skill-restore', color:0xaadfff }, +]; +const skillOrbit = new THREE.Group(); +scene.add(skillOrbit); +const skillMeshes = []; +skills.forEach((s, i) => { + const a = i * (Math.PI*2/skills.length) + Math.PI/4; + const radius = 7.2; + const pos = new THREE.Vector3(radius*cos(a), yOf(5) + Math.sin(a)*1.5, radius*sin(a)); + const geo = new THREE.OctahedronGeometry(0.35, 0); + const mat = new THREE.MeshPhongMaterial({ color: s.color, emissive:s.color, emissiveIntensity:0.4, flatShading:true }); + const mesh = new THREE.Mesh(geo, mat); + mesh.position.copy(pos); + mesh.userData = { v:s.name, phase:'v4.5.90 command', color:s.color, + info:['Command shipped in v4.5.90','Part of Agent Skills bundle']}; + skillOrbit.add(mesh); + skillMeshes.push(mesh); + + const lc=document.createElement('canvas');lc.width=256;lc.height=48; + const lctx=lc.getContext('2d'); + lctx.font='20px ui-monospace,monospace'; lctx.textAlign='center'; lctx.textBaseline='middle'; + lctx.fillStyle='#cde'; lctx.shadowColor='#000'; lctx.shadowBlur=4; + lctx.fillText(s.name, 128, 24); + const label = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(lc), depthWrite:false, transparent:true })); + label.scale.set(1.6, 0.3, 1); + label.position.set(pos.x, pos.y+0.6, pos.z); + skillOrbit.add(label); +}); + +// ─── MEMORY PARTICLES (instanced points) ──────────────────────────────── +const N = 400; +const partGeo = new THREE.BufferGeometry(); +const positions = new Float32Array(N*3); +const phases = new Float32Array(N); +for (let i=0; i<N; i++){ + // random points in a torus shell + const theta = Math.random()*Math.PI*2; + const r = 9 + Math.random()*4; + const y = (Math.random()-0.5) * 14; + positions[i*3] = r*cos(theta); + positions[i*3+1] = y; + positions[i*3+2] = r*sin(theta); + phases[i] = Math.random()*Math.PI*2; +} +partGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3)); +partGeo.setAttribute('phase', new THREE.BufferAttribute(phases, 1)); +const partMat = new THREE.PointsMaterial({ color:0x88aaff, size:0.05, transparent:true, opacity:0.6, sizeAttenuation:true, depthWrite:false }); +const particles = new THREE.Points(partGeo, partMat); +scene.add(particles); + +// ─── PULSE RING (decay visualization) ──────────────────────────────────── +const pulseGeo = new THREE.RingGeometry(0.5, 0.55, 64); +const pulseMat = new THREE.MeshBasicMaterial({ color:0x88ddff, side:THREE.DoubleSide, transparent:true, opacity:0.7, depthWrite:false, blending:THREE.AdditiveBlending }); +const pulse = new THREE.Mesh(pulseGeo, pulseMat); +pulse.rotation.x = -Math.PI/2; +pulse.visible = false; +scene.add(pulse); +let pulseT = 0, pulsing = false; + +// ─── STARFIELD ─────────────────────────────────────────────────────────── +const starGeo = new THREE.BufferGeometry(); +const starPos = new Float32Array(1500*3); +for (let i=0; i<1500; i++){ + // sphere shell far out + const t = Math.random()*Math.PI*2; + const p = Math.acos(2*Math.random()-1); + const r = 60 + Math.random()*40; + starPos[i*3] = r*Math.sin(p)*cos(t); + starPos[i*3+1] = r*Math.cos(p); + starPos[i*3+2] = r*Math.sin(p)*sin(t); +} +starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3)); +scene.add(new THREE.Points(starGeo, new THREE.PointsMaterial({ color:0xffffff, size:0.15, sizeAttenuation:true, transparent:true, opacity:0.7 }))); + +// ─── RAYCASTER (click) ────────────────────────────────────────────────── +const raycaster = new THREE.Raycaster(); +const mouse = new THREE.Vector2(); +const pickables = [...releaseMeshes, ...skillMeshes, core]; +const infoEl = document.getElementById('info'); + +function showInfo(d){ + if (!d){ infoEl.style.display='none'; return; } + const c = '#' + (d.color||0x88aaff).toString(16).padStart(6,'0'); + infoEl.style.borderColor = c + '66'; + infoEl.innerHTML = `<div class="phase">${d.phase||''}</div> + <div class="ver" style="color:${c}">${d.v}</div> + <ul>${(d.info||[]).map(x=>`<li>${x}</li>`).join('')}</ul>`; + infoEl.style.display = 'block'; +} +window.addEventListener('click', (e) => { + mouse.x = (e.clientX/innerWidth)*2 - 1; + mouse.y = -(e.clientY/innerHeight)*2 + 1; + raycaster.setFromCamera(mouse, camera); + const hits = raycaster.intersectObjects(pickables, false); + if (hits.length){ showInfo(hits[0].object.userData); } + else { showInfo(null); } +}); + +// ─── HOVER CURSOR ─────────────────────────────────────────────────────── +window.addEventListener('mousemove', (e)=>{ + mouse.x = (e.clientX/innerWidth)*2 - 1; + mouse.y = -(e.clientY/innerHeight)*2 + 1; + raycaster.setFromCamera(mouse, camera); + const hits = raycaster.intersectObjects(pickables, false); + renderer.domElement.style.cursor = hits.length ? 'pointer' : 'grab'; +}); + +// ─── UI BUTTONS ────────────────────────────────────────────────────────── +let autoRotate = true; +document.getElementById('b-rot').onclick = () => { + autoRotate = !autoRotate; + document.getElementById('b-rot').textContent = autoRotate ? '⏸ auto-rotate' : '▶ auto-rotate'; +}; +document.getElementById('b-pulse').onclick = () => { pulsing = true; pulseT = 0; pulse.visible = true; }; +document.getElementById('b-reset').onclick = () => { + camera.position.copy(initialCam); + controls.target.set(0,0,0); + controls.update(); +}; + +// ─── RESIZE ────────────────────────────────────────────────────────────── +window.addEventListener('resize', () => { + camera.aspect = innerWidth/innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(innerWidth, innerHeight); +}); + +// ─── ANIMATION LOOP ────────────────────────────────────────────────────── +const clock = new THREE.Clock(); +function tick(){ + const dt = clock.getDelta(); + const t = clock.elapsedTime; + + if (autoRotate){ + releaseGroup.rotation.y += dt * 0.08; + skillOrbit.rotation.y -= dt * 0.15; + } + core.rotation.y += dt * 0.4; + core.rotation.x += dt * 0.2; + coreGlow.material.opacity = 0.7 + 0.3*Math.sin(t*2); + + // particle drift + const ppos = particles.geometry.attributes.position; + const ppha = particles.geometry.attributes.phase; + for (let i=0; i<N; i++){ + const ph = ppha.array[i]; + ppos.array[i*3+1] += Math.sin(t + ph) * 0.003; + } + ppos.needsUpdate = true; + + // pulse animation + if (pulsing){ + pulseT += dt; + const s = 0.5 + pulseT * 12; + pulse.scale.set(s, s, s); + pulseMat.opacity = Math.max(0, 0.8 - pulseT*0.6); + if (pulseT > 1.5){ pulsing = false; pulse.visible = false; } + } + + controls.update(); + renderer.render(scene, camera); + requestAnimationFrame(tick); +} +tick(); +</script> +</body> +</html> |