path: root/downloads/memory/release-arc-3d.html

<!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>