synabun 1.3.0 → 2.0.0-beta

package/neural-interface/public/variant/3d/graph.js

@@ -1,2399 +0,0 @@
-// ═══════════════════════════════════════════
-// SynaBun Neural Interface — 3D Graph (Raw Three.js)
-// Core graph initialization, node/link rendering,
-// layout computation, animation loop, interactions
-// ═══════════════════════════════════════════
-//
-// THREE, TWEEN, OrbitControls, EffectComposer, RenderPass, UnrealBloomPass
-// are globals from CDN imports. No ForceGraph3D dependency.
-console.log('[graph.js] LOADED — v4 polished layout + fresnel orbs');
-
-import { state, emit, on } from '../../shared/state.js';
-import { KEYS } from '../../shared/constants.js';
-import { storage } from '../../shared/storage.js';
-import { catColor } from '../../shared/colors.js';
-import { fetchLinks } from '../../shared/api.js';
-import { gfx } from './gfx.js';
-
-// ── Constants ──────────────────────────────
-const FLOOR_Y = -500;
-const PLEXUS_RADIUS = 200;
-const _MULTI_SELECT_BLUE = new THREE.Color(0.4, 0.7, 1.0);
-const _MAX_BATCH_LINKS = 15000;
-const _posStorageKey = KEYS.NODE_POS_3D;
-
-// ── Module state ───────────────────────────
-let graph = null;
-let _graphContainer = null;
-let animFrameId = null;
-let graphRemovalTimer = null;
-let _bloomPass = null;
-
-// Frustum culling (reused every frame — zero alloc)
-const _worldPos = new THREE.Vector3();
-const _mouseDir = new THREE.Vector3();
-const _frustum = new THREE.Frustum();
-const _frustumPadded = new THREE.Frustum();
-const _projScreenMatrix = new THREE.Matrix4();
-
-// Batch link rendering — single draw call for ALL visible links
-let _linkBatch = null;
-let _linkBatchGeo = null;
-let _linkBatchDirty = true;
-let _linkPosDirty = true;  // positions need update (drag, layout change)
-let _batchLinks = [];
-let _visualLinks = [];
-let _nodeById = new Map();
-let _linkBatchPositions = new Float32Array(_MAX_BATCH_LINKS * 6);
-let _linkBatchColors = new Float32Array(_MAX_BATCH_LINKS * 6);
-let _crossCategoryLinks = [];
-
-// Drag state
-const _drag = {
-  active: false,
-  node: null,
-  type: null,
-  dragSet: new Set(),
-  frozenSet: new Set(),
-  prevPos: null,
-  depthOffset: new THREE.Vector3(),
-};
-
-// 3D mouse position tracking via raycasting
-const _mouse = new THREE.Vector2();
-const _raycaster = new THREE.Raycaster();
-const _mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-const _mouse3D = new THREE.Vector3();
-let _mouse3DValid = false;
-let _mouseMoved = false;
-const _dragDepthVec = new THREE.Vector3();
-
-// Node scale boost when links are off
-let noLinksScaleBoost = 1.0;
-
-// Pointer-over-UI guard
-let _pointerOverUI = false;
-
-// Focus mode — true when visualization is paused (zero-resource mode)
-let _focusPaused = false;
-
-// ── Raw Three.js objects (replaces ForceGraph3D) ──
-let _scene    = null;
-let _camera   = null;
-let _renderer = null;
-let _controls = null;
-let _composer = null;
-
-// ── Graph data store (replaces ForceGraph3D's internal data) ──
-let _graphNodes = [];
-let _graphLinks = [];
-
-// ── Anchor/Tag scene objects (memory nodes have ZERO Three.js objects) ──
-const _anchorTagObjects = new Map(); // nodeId → THREE.Group
-let _anchorTagArray = [];            // flat array for fast iteration in animate()
-
-// ── Pointer events state for custom raycasting ──
-let _pointerDownPos = null;
-let _pointerDownTime = 0;
-let _pointerDownNode = null;
-const _dragPlane = new THREE.Plane();
-const _dragHit = new THREE.Vector3();
-
-// ═══════════════════════════════════════════
-// GRAPH PROXY — matches ForceGraph3D API surface
-// so camera.js, background.js, main.js need zero changes
-// ═══════════════════════════════════════════
-
-function _tweenCameraPosition(toPos, toLookAt, durationMs) {
-  if (!_camera || !_controls) return;
-  if (!durationMs || durationMs <= 0) {
-    _camera.position.set(toPos.x, toPos.y, toPos.z);
-    if (toLookAt) {
-      _controls.target.set(toLookAt.x, toLookAt.y, toLookAt.z);
-      _controls.update();
-    }
-    return;
-  }
-  new TWEEN.Tween(_camera.position)
-    .to({ x: toPos.x, y: toPos.y, z: toPos.z }, durationMs)
-    .easing(TWEEN.Easing.Quadratic.Out)
-    .start();
-  if (toLookAt) {
-    new TWEEN.Tween(_controls.target)
-      .to({ x: toLookAt.x, y: toLookAt.y, z: toLookAt.z }, durationMs)
-      .easing(TWEEN.Easing.Quadratic.Out)
-      .onUpdate(() => _controls.update())
-      .start();
-  }
-}
-
-const graphProxy = {
-  scene:    () => _scene,
-  camera:   () => _camera,
-  controls: () => _controls,
-  renderer: () => _renderer,
-  graphData: (data) => {
-    if (data !== undefined) {
-      _graphNodes = data.nodes || [];
-      _graphLinks = data.links || [];
-    } else {
-      return { nodes: _graphNodes, links: _graphLinks };
-    }
-  },
-  cameraPosition: (pos, lookAt, ms) => _tweenCameraPosition(pos, lookAt, ms ?? 0),
-  postProcessingComposer: () => _composer,
-  backgroundColor: (hex) => {
-    if (_renderer) _renderer.setClearColor(new THREE.Color(hex));
-  },
-  d3Force: () => ({ strength: () => ({}) }), // noop — forces are disabled
-};
-
-// ═══════════════════════════════════════════
-// INSTANCED RENDERING — memory nodes
-// ═══════════════════════════════════════════
-const _MAX_MEMORY_NODES = 8000;
-const _NODE_LIMIT_KEY = 'neural-node-limit';
-let _nodeLimit = parseInt(storage.getItem(_NODE_LIMIT_KEY) || '0', 10) || 0; // 0 = no limit
-
-// 3 InstancedMesh for wireframes (one per LOD tier)
-let _wireInstLow  = null;  // importance 1-4
-let _wireInstMed  = null;  // importance 5-7
-let _wireInstHigh = null;  // importance 8+
-
-// 1 Points mesh for glows
-let _glowPoints = null;
-let _glowPointsGeo = null;
-
-// Index management
-let _nodeInstanceMap = new Map(); // nodeId → { tier, index }
-let _tierNodes = [[], [], []];    // [lowNodes, medNodes, highNodes]
-let _glowNodeOrder = [];          // all memory nodes in global index order
-
-// Per-node state (parallel Float32Arrays — static, updated only on dirty)
-const _nodeOpacity     = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeGlowOpacity = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeScale       = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeColorR      = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeColorG      = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeColorB      = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeBaseColorR  = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeBaseColorG  = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeBaseColorB  = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeBaseOpacity = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeImportance  = new Float32Array(_MAX_MEMORY_NODES);
-const _nodeBaseRadius  = new Float32Array(_MAX_MEMORY_NODES);
-
-// Dirty flag — only recompute + upload GPU buffers when state changes
-let _instancesDirty = true;
-
-// Reusable math scratch objects (zero-alloc per frame)
-const _instMatrix    = new THREE.Matrix4();
-const _instPos       = new THREE.Vector3();
-const _instScaleV    = new THREE.Vector3();
-const _identityQuat  = new THREE.Quaternion(); // identity — no rotation
-
-// ═══════════════════════════════════════════
-// SOFT DOT TEXTURE
-// ═══════════════════════════════════════════
-let _softDotTex = null;
-function getSoftDotTexture() {
-  if (_softDotTex) return _softDotTex;
-  const size = 64;
-  const canvas = document.createElement('canvas');
-  canvas.width = size; canvas.height = size;
-  const ctx = canvas.getContext('2d');
-  const c = size / 2;
-  const imgData = ctx.createImageData(size, size);
-  const d = imgData.data;
-  for (let py = 0; py < size; py++) {
-    for (let px = 0; px < size; px++) {
-      const dx = (px - c) / c, dy = (py - c) / c;
-      const dist = Math.sqrt(dx * dx + dy * dy);
-      const t = Math.max(0, Math.min(1, (0.55 - dist) / (0.55 - 0.1)));
-      const alpha = t * t * (3 - 2 * t);
-      const idx = (py * size + px) * 4;
-      d[idx] = 255; d[idx + 1] = 255; d[idx + 2] = 255;
-      d[idx + 3] = alpha * 255 | 0;
-    }
-  }
-  ctx.putImageData(imgData, 0, 0);
-  _softDotTex = new THREE.CanvasTexture(canvas);
-  _softDotTex.needsUpdate = true;
-  return _softDotTex;
-}
-
-// ── Shared hitbox material for anchor/tag PlaneGeometry hitboxes (~50-100 total) ──
-let _sharedHitboxMat = null;
-function getHitboxMaterial() {
-  if (!_sharedHitboxMat) {
-    _sharedHitboxMat = new THREE.MeshBasicMaterial({
-      transparent: true, opacity: 0, depthWrite: false, side: THREE.DoubleSide,
-    });
-  }
-  return _sharedHitboxMat;
-}
-
-// ═══════════════════════════════════════════
-// INSTANCED SHADER MATERIALS
-// ═══════════════════════════════════════════
-
-function createWireInstanceMaterial() {
-  return new THREE.ShaderMaterial({
-    wireframe: false,
-    transparent: true,
-    depthWrite: true,
-    side: THREE.DoubleSide,
-    uniforms: {
-      uTime: { value: 0.0 },
-    },
-    vertexShader: `
-      attribute vec3 instanceColor;
-      attribute float instanceOpacity;
-      varying vec3 vColor;
-      varying float vOpacity;
-      varying vec3 vNormal;
-      varying vec3 vViewPos;
-      void main() {
-        vColor = instanceColor;
-        vOpacity = instanceOpacity;
-        vec4 mvPosition = modelViewMatrix * instanceMatrix * vec4(position, 1.0);
-        vNormal = normalize(normalMatrix * mat3(instanceMatrix) * normal);
-        vViewPos = mvPosition.xyz;
-        gl_Position = projectionMatrix * mvPosition;
-      }
-    `,
-    fragmentShader: `
-      uniform float uTime;
-      varying vec3 vColor;
-      varying float vOpacity;
-      varying vec3 vNormal;
-      varying vec3 vViewPos;
-      void main() {
-        if (vOpacity < 0.003) discard;
-        // Fresnel rim glow — brighter at edges, subtler at center
-        float fresnel = 1.0 - abs(dot(normalize(vNormal), normalize(-vViewPos)));
-        fresnel = pow(fresnel, 1.5);
-        float rim = 0.7 + fresnel * 0.3;
-        // Subtle shimmer
-        float shimmer = 1.0 + sin(uTime * 1.5 + vViewPos.x * 0.1) * 0.05;
-        gl_FragColor = vec4(vColor * 1.8 * rim * shimmer, 1.0);
-      }
-    `,
-  });
-}
-
-function createGlowPointsMaterial() {
-  return new THREE.ShaderMaterial({
-    transparent: true,
-    depthWrite: false,
-    uniforms: {
-      uTexture: { value: getSoftDotTexture() },
-    },
-    vertexShader: `
-      attribute vec3 glowColor;
-      attribute float glowOpacity;
-      attribute float glowSize;
-      varying vec3 vColor;
-      varying float vOpacity;
-      void main() {
-        vColor = glowColor;
-        vOpacity = glowOpacity;
-        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
-        gl_PointSize = glowSize * (300.0 / -mvPosition.z);
-        gl_PointSize = clamp(gl_PointSize, 1.0, 128.0);
-        gl_Position = projectionMatrix * mvPosition;
-      }
-    `,
-    fragmentShader: `
-      uniform sampler2D uTexture;
-      varying vec3 vColor;
-      varying float vOpacity;
-      void main() {
-        if (vOpacity < 0.003) discard;
-        vec4 texel = texture2D(uTexture, gl_PointCoord);
-        gl_FragColor = vec4(vColor * 1.8, texel.a * vOpacity * 2.0);
-      }
-    `,
-  });
-}
-
-// ═══════════════════════════════════════════
-// CATEGORY LOGOS — preloaded images for anchor nodes
-// ═══════════════════════════════════════════
-const _categoryLogos = new Map();
-
-let _logoRefreshTimer = null;
-export function preloadCategoryLogos(categories) {
-  const names = new Set(categories.map(c => c.name));
-  for (const [k] of _categoryLogos) { if (!names.has(k)) _categoryLogos.delete(k); }
-  for (const cat of categories) {
-    if (!cat.logo) continue;
-    const existing = _categoryLogos.get(cat.name);
-    if (existing && existing.src === cat.logo) continue;
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    const catName = cat.name;
-    const entry = { img, ready: false, src: cat.logo };
-    img.onload = () => {
-      entry.ready = true;
-      // Remove existing anchor so applyGraphData recreates it with the logo
-      for (const [id, obj] of _anchorTagObjects) {
-        if (obj.userData.anchorCategory === catName) {
-          _scene.remove(obj);
-          _anchorTagObjects.delete(id);
-          break;
-        }
-      }
-      // Debounced graph refresh so logos appear on anchors once loaded
-      clearTimeout(_logoRefreshTimer);
-      _logoRefreshTimer = setTimeout(() => { if (graph) applyGraphData(); }, 200);
-    };
-    img.onerror = () => { _categoryLogos.delete(cat.name); };
-    img.src = cat.logo;
-    _categoryLogos.set(cat.name, entry);
-  }
-}
-
-// Legacy fallback: hardcoded OpenClaw logo
-const _openclawLogo = new Image();
-_openclawLogo.src = '/openclaw-logo-text.png';
-let _openclawLogoReady = false;
-_openclawLogo.onload = () => { _openclawLogoReady = true; };
-
-// ═══════════════════════════════════════════
-// INSTANCED RENDERING — init + index management
-// ═══════════════════════════════════════════
-
-function initInstancedRendering() {
-  const scene = graph.scene();
-
-  // 3 InstancedMesh for wireframes (one per LOD tier)
-  const geoLow  = new THREE.IcosahedronGeometry(1, 0);
-  const geoMed  = new THREE.IcosahedronGeometry(1, 1);
-  const geoHigh = new THREE.IcosahedronGeometry(1, 2);
-
-  _wireInstLow  = new THREE.InstancedMesh(geoLow,  createWireInstanceMaterial(), _MAX_MEMORY_NODES);
-  _wireInstMed  = new THREE.InstancedMesh(geoMed,  createWireInstanceMaterial(), _MAX_MEMORY_NODES);
-  _wireInstHigh = new THREE.InstancedMesh(geoHigh, createWireInstanceMaterial(), _MAX_MEMORY_NODES);
-
-  for (const inst of [_wireInstLow, _wireInstMed, _wireInstHigh]) {
-    inst.count = 0;
-    inst.frustumCulled = false;
-
-    const colorAttr = new THREE.InstancedBufferAttribute(
-      new Float32Array(_MAX_MEMORY_NODES * 3), 3
-    );
-    colorAttr.setUsage(THREE.DynamicDrawUsage);
-    inst.geometry.setAttribute('instanceColor', colorAttr);
-
-    const opacityAttr = new THREE.InstancedBufferAttribute(
-      new Float32Array(_MAX_MEMORY_NODES), 1
-    );
-    opacityAttr.setUsage(THREE.DynamicDrawUsage);
-    inst.geometry.setAttribute('instanceOpacity', opacityAttr);
-
-    scene.add(inst);
-  }
-
-  // 1 Points mesh for glows
-  _glowPointsGeo = new THREE.BufferGeometry();
-
-  const posAttr = new THREE.BufferAttribute(new Float32Array(_MAX_MEMORY_NODES * 3), 3);
-  posAttr.setUsage(THREE.DynamicDrawUsage);
-  _glowPointsGeo.setAttribute('position', posAttr);
-
-  const glowColorAttr = new THREE.BufferAttribute(new Float32Array(_MAX_MEMORY_NODES * 3), 3);
-  glowColorAttr.setUsage(THREE.DynamicDrawUsage);
-  _glowPointsGeo.setAttribute('glowColor', glowColorAttr);
-
-  const glowOpAttr = new THREE.BufferAttribute(new Float32Array(_MAX_MEMORY_NODES), 1);
-  glowOpAttr.setUsage(THREE.DynamicDrawUsage);
-  _glowPointsGeo.setAttribute('glowOpacity', glowOpAttr);
-
-  const glowSizeAttr = new THREE.BufferAttribute(new Float32Array(_MAX_MEMORY_NODES), 1);
-  glowSizeAttr.setUsage(THREE.DynamicDrawUsage);
-  _glowPointsGeo.setAttribute('glowSize', glowSizeAttr);
-
-  _glowPointsGeo.setDrawRange(0, 0);
-
-  _glowPoints = new THREE.Points(_glowPointsGeo, createGlowPointsMaterial());
-  _glowPoints.frustumCulled = false;
-  scene.add(_glowPoints);
-}
-
-function rebuildInstanceMap() {
-  _nodeInstanceMap.clear();
-  _tierNodes[0].length = 0;
-  _tierNodes[1].length = 0;
-  _tierNodes[2].length = 0;
-  _glowNodeOrder.length = 0;
-
-  if (!graph) return;
-  const gd = graph.graphData();
-
-  // First pass: assign nodes to tiers (cap at effective limit to prevent buffer overflow)
-  const effectiveLimit = _nodeLimit > 0 ? Math.min(_nodeLimit, _MAX_MEMORY_NODES) : _MAX_MEMORY_NODES;
-  let memCount = 0;
-  for (let i = 0; i < gd.nodes.length; i++) {
-    const node = gd.nodes[i];
-    if (!node.payload || node.payload._isAnchor || node.payload._isTag) continue;
-    if (memCount >= effectiveLimit) break;
-
-    const importance = node.payload.importance || 5;
-    const tier = importance >= 8 ? 2 : importance >= 5 ? 1 : 0;
-
-    _tierNodes[tier].push(node);
-    _nodeInstanceMap.set(node.id, { tier, index: _tierNodes[tier].length - 1 });
-    memCount++;
-  }
-
-  // Build _glowNodeOrder in tier order (tier 0, then tier 1, then tier 2)
-  // so global indices match Phase 2's globalOffset mapping
-  for (let t = 0; t < 3; t++) {
-    for (let i = 0; i < _tierNodes[t].length; i++) {
-      _glowNodeOrder.push(_tierNodes[t][i]);
-    }
-  }
-
-  // Initialize animation state for each node (now in tier order)
-  for (let gi = 0; gi < _glowNodeOrder.length; gi++) {
-    const node = _glowNodeOrder[gi];
-    const importance = node.payload.importance || 5;
-    const color = catColor(node.payload.category);
-    const hex = new THREE.Color(color);
-    const mutedHex = hex.clone();
-    const radius = 6 + (importance - 1) * 0.8;
-    const baseOpacity = 0.75 + (importance - 1) * 0.03;
-
-    _nodeBaseOpacity[gi] = baseOpacity;
-    _nodeBaseColorR[gi] = mutedHex.r;
-    _nodeBaseColorG[gi] = mutedHex.g;
-    _nodeBaseColorB[gi] = mutedHex.b;
-    _nodeColorR[gi] = mutedHex.r;
-    _nodeColorG[gi] = mutedHex.g;
-    _nodeColorB[gi] = mutedHex.b;
-    _nodeOpacity[gi] = baseOpacity;
-    _nodeGlowOpacity[gi] = baseOpacity * 0.85;
-    _nodeScale[gi] = 1.0;
-    _nodeImportance[gi] = importance;
-    _nodeBaseRadius[gi] = radius;
-  }
-
-  _instancesDirty = true;
-
-  // Set instance counts
-  if (_wireInstLow)  _wireInstLow.count  = _tierNodes[0].length;
-  if (_wireInstMed)  _wireInstMed.count  = _tierNodes[1].length;
-  if (_wireInstHigh) _wireInstHigh.count = _tierNodes[2].length;
-
-  // Set glow draw range
-  if (_glowPointsGeo) _glowPointsGeo.setDrawRange(0, _glowNodeOrder.length);
-}
-
-// GFX preset resets — handle instanced memory nodes + individual anchor/tag nodes
-on('gfx:preset-applied', () => {
-  // Reset instanced memory node opacities to base values
-  for (let gi = 0; gi < _glowNodeOrder.length; gi++) {
-    _nodeOpacity[gi] = _nodeBaseOpacity[gi];
-    _nodeGlowOpacity[gi] = _nodeBaseOpacity[gi] * 0.85;
-  }
-  _instancesDirty = true;
-  // Reset individual anchor/tag nodes
-  for (const [, obj] of _anchorTagObjects) {
-    if (!obj || !obj.userData) continue;
-    const dot = obj.userData.dot;
-    if (dot && dot.material) {
-      dot.material.opacity = obj.userData.baseOpacity || 0.1;
-    }
-  }
-});
-
-// Node limit change — save to storage and rebuild
-on('search:apply', () => { _instancesDirty = true; });
-on('search:clear', () => { _instancesDirty = true; });
-on('categories-changed', () => { _instancesDirty = true; });
-
-on('node-limit-changed', (limit) => {
-  _nodeLimit = limit;
-  storage.setItem(_NODE_LIMIT_KEY, String(limit));
-  if (graph) {
-    rebuildInstanceMap();
-    _instancesDirty = true;
-    emit('graph:refresh');
-  }
-});
-
-
-// ═══════════════════════════════════════════
-// NODE CREATION — Anchor (parent category)
-// ═══════════════════════════════════════════
-function createAnchorObject(node) {
-  const parentName = node.payload._anchorCategory;
-  const color = catColor(parentName);
-  const hex = new THREE.Color(color);
-  const dotSize = 20;
-
-  const group = new THREE.Group();
-
-  // Label — logo or text on canvas
-  const _logoEntry = _categoryLogos.get(parentName);
-  const useLogo = (_logoEntry && _logoEntry.ready) || (parentName === 'openclaw' && _openclawLogoReady);
-  const logoImage = (_logoEntry && _logoEntry.ready) ? _logoEntry.img : _openclawLogo;
-  if (_logoEntry) console.log(`[anchor] ${parentName}: logo entry found, ready=${_logoEntry.ready}, src=${_logoEntry.src}`);
-  else console.log(`[anchor] ${parentName}: no logo entry in _categoryLogos (map size: ${_categoryLogos.size})`);
-
-  let contentW, contentH;
-  const PAD = 16;
-
-  if (useLogo) {
-    const aspect = logoImage.naturalWidth / (logoImage.naturalHeight || 1);
-    const maxW = 380, maxH = 100;
-    if (aspect >= maxW / maxH) { contentW = maxW; contentH = maxW / aspect; }
-    else { contentH = maxH; contentW = maxH * aspect; }
-  } else {
-    const measureCanvas = document.createElement('canvas');
-    const measureCtx = measureCanvas.getContext('2d');
-    measureCtx.font = '600 48px "Space Grotesk", "Inter", system-ui, sans-serif';
-    const metrics = measureCtx.measureText(parentName.toUpperCase());
-    contentW = Math.ceil(metrics.width);
-    contentH = 58;
-  }
-
-  const canvasW = Math.ceil(contentW + PAD * 2);
-  const canvasH = Math.ceil(contentH + PAD * 2);
-
-  const labelCanvas = document.createElement('canvas');
-  const labelCtx = labelCanvas.getContext('2d');
-  labelCanvas.width = canvasW;
-  labelCanvas.height = canvasH;
-  labelCtx.clearRect(0, 0, canvasW, canvasH);
-
-  if (useLogo) {
-    labelCtx.globalAlpha = 1.0;
-    labelCtx.drawImage(logoImage, PAD, PAD, contentW, contentH);
-    labelCtx.globalAlpha = 1.0;
-  } else {
-    labelCtx.font = '600 48px "Space Grotesk", "Inter", system-ui, sans-serif';
-    labelCtx.textAlign = 'center';
-    labelCtx.textBaseline = 'middle';
-    labelCtx.fillStyle = 'rgba(255,255,255,1.0)';
-    labelCtx.fillText(parentName.toUpperCase(), canvasW / 2, canvasH / 2);
-  }
-
-  const labelTex = new THREE.CanvasTexture(labelCanvas);
-  labelTex.colorSpace = THREE.SRGBColorSpace;
-
-  // Billboard mesh with custom ShaderMaterial — bypasses SpriteMaterial pipeline entirely
-  const SCALE = 0.3;
-  const labelW = canvasW * SCALE;
-  const labelH = canvasH * SCALE;
-  const labelGeo = new THREE.PlaneGeometry(1, 1); // 1x1 base — scale set in animate loop via baseLabelScale
-  const labelShaderMat = new THREE.ShaderMaterial({
-    transparent: true,
-    depthTest: false,
-    depthWrite: false,
-    fog: false,
-    uniforms: {
-      uTexture: { value: labelTex },
-      uOpacity: { value: 1.0 },
-    },
-    vertexShader: `
-      varying vec2 vUv;
-      void main() {
-        vUv = uv;
-        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-      }
-    `,
-    fragmentShader: `
-      uniform sampler2D uTexture;
-      uniform float uOpacity;
-      varying vec2 vUv;
-      void main() {
-        vec4 tex = texture2D(uTexture, vUv);
-        if (tex.a < 0.01) discard;
-        gl_FragColor = vec4(tex.rgb, tex.a * uOpacity);
-      }
-    `,
-  });
-  const label = new THREE.Mesh(labelGeo, labelShaderMat);
-  label.renderOrder = 999;
-  label.position.set(0, 0, 0.5);
-  group.add(label);
-
-  // Flat plane hitbox (shared material)
-  const hitGeo = new THREE.PlaneGeometry(labelW, labelH);
-  const hitbox = new THREE.Mesh(hitGeo, getHitboxMaterial());
-  hitbox.position.set(0, 0, 0.5);
-  group.add(hitbox);
-
-  group.userData.nodeId = node.id;
-  group.userData.isAnchor = true;
-  group.userData.anchorCategory = parentName;
-  group.userData.dot = null;
-  group.userData.label = label;
-  group.userData.baseLabelScale = { x: labelW, y: labelH };
-  group.userData.baseLabelY = 0;
-  group.userData.baseRadius = dotSize;
-  group.userData.category = parentName;
-  group.userData.phase = parentName.length * 0.7;
-  group.userData.importance = 10;
-  group.userData.baseOpacity = 1.0;
-
-  group.userData._currentScale = 0.01;
-  group.scale.setScalar(0.01);
-
-  return group;
-}
-
-// ═══════════════════════════════════════════
-// NODE CREATION — Tag (child category)
-// ═══════════════════════════════════════════
-function createTagObject(node) {
-  const catName = node.payload._tagCategory;
-  const color = catColor(catName);
-  const hex = new THREE.Color(color);
-  const dotSize = 10;
-
-  const group = new THREE.Group();
-
-  // Visible dot sprite
-  const dotMat = new THREE.SpriteMaterial({
-    map: getSoftDotTexture(),
-    color: hex,
-    transparent: true,
-    opacity: 1.0,
-    blending: THREE.NormalBlending,
-    depthWrite: false,
-    fog: false,
-  });
-  const dot = new THREE.Sprite(dotMat);
-  dot.scale.set(dotSize, dotSize, 1);
-  dot.raycast = () => {};
-  group.add(dot);
-
-  // Small text label
-  const measureCanvas = document.createElement('canvas');
-  const measureCtx = measureCanvas.getContext('2d');
-  measureCtx.font = '500 38px "JetBrains Mono", "Space Grotesk", monospace';
-  const tagMetrics = measureCtx.measureText(catName);
-  const tagTextW = Math.ceil(tagMetrics.width);
-  const tagTextH = 48;
-  const tagPad = 12;
-  const tagCanvasW = tagTextW + tagPad * 2;
-  const tagCanvasH = tagTextH + tagPad * 2;
-
-  const labelCanvas = document.createElement('canvas');
-  const labelCtx = labelCanvas.getContext('2d');
-  labelCanvas.width = tagCanvasW;
-  labelCanvas.height = tagCanvasH;
-  labelCtx.clearRect(0, 0, tagCanvasW, tagCanvasH);
-  labelCtx.font = '500 38px "JetBrains Mono", "Space Grotesk", monospace';
-  labelCtx.textAlign = 'center';
-  labelCtx.textBaseline = 'middle';
-  labelCtx.fillStyle = color;
-  labelCtx.fillText(catName, tagCanvasW / 2, tagCanvasH / 2);
-
-  const labelTex = new THREE.CanvasTexture(labelCanvas);
-  labelTex.colorSpace = THREE.SRGBColorSpace;
-
-  // Billboard mesh with custom ShaderMaterial — bypasses SpriteMaterial pipeline
-  const TAG_SCALE = 0.25;
-  const tagLabelW = tagCanvasW * TAG_SCALE;
-  const tagLabelH = tagCanvasH * TAG_SCALE;
-  const tagLabelGeo = new THREE.PlaneGeometry(1, 1); // 1x1 base — scale set in animate loop via baseLabelScale
-  const tagLabelShaderMat = new THREE.ShaderMaterial({
-    transparent: true,
-    depthTest: false,
-    depthWrite: false,
-    fog: false,
-    uniforms: {
-      uTexture: { value: labelTex },
-      uOpacity: { value: 1.0 },
-    },
-    vertexShader: `
-      varying vec2 vUv;
-      void main() {
-        vUv = uv;
-        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-      }
-    `,
-    fragmentShader: `
-      uniform sampler2D uTexture;
-      uniform float uOpacity;
-      varying vec2 vUv;
-      void main() {
-        vec4 tex = texture2D(uTexture, vUv);
-        if (tex.a < 0.01) discard;
-        gl_FragColor = vec4(tex.rgb, tex.a * uOpacity);
-      }
-    `,
-  });
-  const label = new THREE.Mesh(tagLabelGeo, tagLabelShaderMat);
-  label.renderOrder = 999;
-  label.position.set(0, dotSize * 0.8, 0);
-  group.add(label);
-
-  // Flat plane hitbox (shared material)
-  const hitW = Math.max(tagLabelW, dotSize);
-  const hitH = tagLabelH + dotSize;
-  const hitGeo = new THREE.PlaneGeometry(hitW, hitH);
-  const hitbox = new THREE.Mesh(hitGeo, getHitboxMaterial());
-  hitbox.position.set(0, dotSize * 0.4, 0);
-  group.add(hitbox);
-
-  group.userData.nodeId = node.id;
-  group.userData.isTag = true;
-  group.userData.tagCategory = catName;
-  group.userData.dot = dot;
-  group.userData.label = label;
-  group.userData.baseLabelScale = { x: tagLabelW, y: tagLabelH };
-  group.userData.baseLabelY = dotSize * 0.8;
-  group.userData.baseRadius = dotSize;
-  group.userData.category = catName;
-  group.userData.phase = catName.split('').reduce((a, c) => a + c.charCodeAt(0), 0) * 0.3;
-  group.userData.importance = 8;
-  group.userData.baseOpacity = 1.0;
-
-  group.userData._currentScale = 0.01;
-  group.scale.setScalar(0.01);
-
-  return group;
-}
-
-// ═══════════════════════════════════════════
-// MOUSE 3D POSITION — raycasting for plexus
-// ═══════════════════════════════════════════
-
-function _initMouseTracking() {
-  document.addEventListener('mousemove', (e) => {
-    if (_focusPaused) return;
-    // Use container bounds for correct raycasting when explorer sidebar shifts the graph
-    const rect = _graphContainer
-      ? _graphContainer.getBoundingClientRect()
-      : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
-    _mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-    _mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
-    _mouse3DValid = true;
-    _mouseMoved = true;
-  });
-
-  // Wheel-during-drag: move node along camera→node line of sight.
-  // Uses capture phase on the container so we intercept BEFORE OrbitControls.
-  // Also directly moves the Three.js mesh for immediate visual feedback
-  // (onNodeDrag only fires on mousemove, not on wheel scroll).
-  const wheelTarget = _graphContainer || document;
-  wheelTarget.addEventListener('wheel', (e) => {
-    if (_focusPaused) return;
-    if (!_drag.active || !_drag.node || !graph) return;
-
-    e.preventDefault();
-    e.stopImmediatePropagation();
-
-    const cam = graph.camera();
-    const node = _drag.node;
-
-    // Direction from camera to node
-    _dragDepthVec.set(node.x || 0, node.y || 0, node.z || 0)
-      .sub(cam.position).normalize();
-
-    // 5% of distance per scroll tick, floor of 5 units
-    const camDist = cam.position.distanceTo(node);
-    const step = Math.max(5, camDist * 0.05);
-    const delta = (e.deltaY < 0 ? 1 : -1) * step;
-
-    // Don't let node pass behind the camera (stop ~30 units in front)
-    const MIN_CAM_DIST = 30;
-    if (delta < 0 && camDist <= MIN_CAM_DIST) return;
-    const clampedDelta = delta < 0 ? Math.max(delta, -(camDist - MIN_CAM_DIST)) : delta;
-
-    // Compute the offset for this tick
-    const ox = _dragDepthVec.x * clampedDelta;
-    const oy = _dragDepthVec.y * clampedDelta;
-    const oz = _dragDepthVec.z * clampedDelta;
-
-    // Accumulate for drag (adds depth offset on next drag move)
-    _drag.depthOffset.x += ox;
-    _drag.depthOffset.y += oy;
-    _drag.depthOffset.z += oz;
-
-    // Directly move node data + Three.js mesh for immediate visual feedback
-    const gd = graph.graphData();
-
-    node.x = (node.x || 0) + ox;
-    node.y = (node.y || 0) + oy;
-    node.z = (node.z || 0) + oz;
-    node.fx = node.x; node.fy = node.y; node.fz = node.z;
-    const nodeObj = _anchorTagObjects.get(node.id);
-    if (nodeObj) nodeObj.position.set(node.x, node.y, node.z);
-
-    // Move rigid-body group
-    for (const n of gd.nodes) {
-      if (n === node) continue;
-      if (_drag.dragSet.has(n.id)) {
-        n.x = (n.x || 0) + ox;
-        n.y = (n.y || 0) + oy;
-        n.z = (n.z || 0) + oz;
-        n.fx = n.x; n.fy = n.y; n.fz = n.z;
-        const nObj = _anchorTagObjects.get(n.id);
-        if (nObj) nObj.position.set(n.x, n.y, n.z);
-      }
-    }
-
-    // Keep prevPos in sync + mark dirty
-    _drag.prevPos = { x: node.x, y: node.y, z: node.z };
-    _linkPosDirty = true;
-    _instancesDirty = true;
-  }, { capture: true, passive: false });
-}
-
-function updateMouse3D() {
-  if (!graph || !_mouse3DValid) return;
-  const cam = graph.camera();
-  _raycaster.setFromCamera(_mouse, cam);
-  const controls = graph.controls();
-  const target = controls && controls.target ? controls.target : _mouseDir.set(0, 0, 0);
-  _mousePlane.setFromNormalAndCoplanarPoint(
-    cam.getWorldDirection(_mouseDir).negate(),
-    target
-  );
-  _raycaster.ray.intersectPlane(_mousePlane, _mouse3D);
-}
-
-// ═══════════════════════════════════════════
-// NODE POSITION PERSISTENCE
-// ═══════════════════════════════════════════
-let _posSaveTimer = null;
-
-export function saveNodePositions() {
-  if (!graph) return;
-  const gd = graph.graphData();
-  const positions = {};
-  for (const n of gd.nodes) {
-    if (n.x != null) {
-      positions[n.id] = { x: n.x, y: n.y, z: n.z };
-    }
-  }
-  try { storage.setItem(_posStorageKey, JSON.stringify(positions)); } catch (_) {}
-}
-
-function restoreNodePositions(nodes) {
-  try {
-    const saved = JSON.parse(storage.getItem(_posStorageKey) || '{}');
-    if (!Object.keys(saved).length) return;
-    for (const n of nodes) {
-      if (saved[n.id]) {
-        const pos = saved[n.id];
-        n.x = pos.x; n.y = pos.y; n.z = pos.z;
-        n.fx = pos.x; n.fy = pos.y; n.fz = pos.z;
-      }
-    }
-  } catch (_) {}
-}
-
-function schedulePositionSave() {
-  if (_posSaveTimer) clearTimeout(_posSaveTimer);
-  _posSaveTimer = setTimeout(saveNodePositions, 2000);
-}
-
-// ═══════════════════════════════════════════
-// BATCH LINK RENDERER — single draw call
-// ═══════════════════════════════════════════
-function initLinkBatch() {
-  if (!graph) return;
-  _linkBatchGeo = new THREE.BufferGeometry();
-  _linkBatchGeo.setAttribute('position', new THREE.BufferAttribute(_linkBatchPositions, 3));
-  _linkBatchGeo.setAttribute('color', new THREE.BufferAttribute(_linkBatchColors, 3));
-  _linkBatchGeo.setDrawRange(0, 0);
-  const mat = new THREE.LineBasicMaterial({
-    vertexColors: true, transparent: true,
-    opacity: gfx.linkOpacity || 0.12, depthWrite: false,
-  });
-  _linkBatch = new THREE.LineSegments(_linkBatchGeo, mat);
-  _linkBatch.frustumCulled = false;
-  _linkBatch.renderOrder = -1;
-  graph.scene().add(_linkBatch);
-}
-
-// ═══════════════════════════════════════════
-// DRAG SET BUILDER — determines rigid-body group
-// ═══════════════════════════════════════════
-function _buildDragSet(node, allNodes) {
-  const dragSet = new Set();
-  dragSet.add(node.id);
-
-  if (node.payload && node.payload._isAnchor) {
-    const anchorCat = node.payload._anchorCategory;
-    const childCats = Object.entries(state.categoryMetadata)
-      .filter(([, m]) => m.parent === anchorCat)
-      .map(([name]) => name);
-    const treeCats = new Set([anchorCat, ...childCats]);
-    for (const n of allNodes) {
-      if (n === node) continue;
-      if (n.payload._isTag && treeCats.has(n.payload._tagCategory)) dragSet.add(n.id);
-      if (!n.payload._isAnchor && !n.payload._isTag && treeCats.has(n.payload.category)) dragSet.add(n.id);
-    }
-    return { type: 'anchor', dragSet };
-  }
-
-  if (node.payload && node.payload._isTag) {
-    const tagCat = node.payload._tagCategory;
-    for (const n of allNodes) {
-      if (!n.payload._isAnchor && !n.payload._isTag && n.payload.category === tagCat) {
-        dragSet.add(n.id);
-      }
-    }
-    return { type: 'tag', dragSet };
-  }
-
-  // Multi-select drag
-  if (state.multiSelected.size > 0 && state.multiSelected.has(node.id)) {
-    for (const id of state.multiSelected) dragSet.add(id);
-    return { type: 'multi', dragSet };
-  }
-
-  return { type: 'memory', dragSet };
-}
-
-// ═══════════════════════════════════════════
-// LAYOUT COMPUTATION — geodesic sphere packing
-// ═══════════════════════════════════════════
-function computeLayout(nodes) {
-  const anchors = nodes.filter(n => n.payload._isAnchor);
-  const tags = nodes.filter(n => n.payload._isTag);
-  const memories = nodes.filter(n => !n.payload._isAnchor && !n.payload._isTag);
-  const placed = new Set();
-
-  const GOLDEN = (1 + Math.sqrt(5)) / 2;
-
-  function fibSphere(n, radius, center) {
-    const points = [];
-    for (let i = 0; i < n; i++) {
-      const y = 1 - (2 * i + 1) / n;
-      const r = Math.sqrt(1 - y * y);
-      const theta = 2 * Math.PI * i / GOLDEN;
-      points.push({
-        x: center.x + Math.cos(theta) * r * radius,
-        y: center.y + y * radius,
-        z: center.z + Math.sin(theta) * r * radius,
-      });
-    }
-    return points;
-  }
-
-  // 1. Anchors in a wide ring
-  const anchorRadius = anchors.length > 1 ? 700 + anchors.length * 200 : 0;
-  const ANCHOR_Y = 500;
-  const TAG_Y = ANCHOR_Y - 220;
-  const SPHERE_GAP = 160;
-
-  anchors.forEach((anchor, i) => {
-    const angle = (i / anchors.length) * Math.PI * 2 - Math.PI / 2;
-    anchor.x = Math.cos(angle) * anchorRadius;
-    anchor.y = ANCHOR_Y;
-    anchor.z = Math.sin(angle) * anchorRadius;
-    anchor.fx = anchor.x; anchor.fy = anchor.y; anchor.fz = anchor.z;
-    placed.add(anchor.id);
-  });
-
-  // 2. For each anchor: child tags in rings, each with memory sphere
-  anchors.forEach(anchor => {
-    const cat = anchor.payload._anchorCategory;
-    const childTags = tags.filter(t => t.payload._parentAnchor === cat);
-    const directMems = memories.filter(m => m.payload.category === cat && !placed.has(m.id));
-
-    if (childTags.length) {
-      const tagRingRadius = Math.max(380, childTags.length * 160);
-
-      childTags.forEach((tag, i) => {
-        const angle = (i / childTags.length) * Math.PI * 2;
-        tag.x = anchor.x + Math.cos(angle) * tagRingRadius;
-        tag.y = TAG_Y;
-        tag.z = anchor.z + Math.sin(angle) * tagRingRadius;
-        tag.fx = tag.x; tag.fy = tag.y; tag.fz = tag.z;
-        placed.add(tag.id);
-
-        const tagCat = tag.payload._tagCategory;
-        const tagMems = memories.filter(m => m.payload.category === tagCat && !placed.has(m.id));
-        if (tagMems.length) {
-          const r = 90 + Math.sqrt(tagMems.length) * 18;
-          const sphereCenter = { x: tag.x, y: tag.y - r - SPHERE_GAP, z: tag.z };
-          const positions = fibSphere(tagMems.length, r, sphereCenter);
-          tagMems.forEach((mem, j) => {
-            mem.x = positions[j].x;
-            mem.y = positions[j].y;
-            mem.z = positions[j].z;
-            mem.fx = mem.x; mem.fy = mem.y; mem.fz = mem.z;
-            placed.add(mem.id);
-          });
-        }
-      });
-    }
-
-    // Direct-parent memories
-    if (directMems.length) {
-      const r = 90 + Math.sqrt(directMems.length) * 18;
-      const sphereCenter = { x: anchor.x, y: TAG_Y - r - SPHERE_GAP, z: anchor.z };
-      const positions = fibSphere(directMems.length, r, sphereCenter);
-      directMems.forEach((mem, i) => {
-        mem.x = positions[i].x;
-        mem.y = positions[i].y;
-        mem.z = positions[i].z;
-        mem.fx = mem.x; mem.fy = mem.y; mem.fz = mem.z;
-        placed.add(mem.id);
-      });
-    }
-  });
-
-  // 3. Orphan memories
-  const orphans = memories.filter(m => !placed.has(m.id));
-  if (orphans.length) {
-    const catGroups = {};
-    orphans.forEach(m => {
-      const c = m.payload.category || 'uncategorized';
-      if (!catGroups[c]) catGroups[c] = [];
-      catGroups[c].push(m);
-    });
-    const groupNames = Object.keys(catGroups);
-    const orphanBase = anchorRadius + 400;
-
-    groupNames.forEach((c, gi) => {
-      const angle = (gi / Math.max(groupNames.length, 1)) * Math.PI * 2;
-      const cx = Math.cos(angle) * orphanBase;
-      const cz = Math.sin(angle) * orphanBase;
-      const mems = catGroups[c];
-      const r = 90 + Math.sqrt(mems.length) * 18;
-      const positions = fibSphere(mems.length, r, { x: cx, y: 0, z: cz });
-
-      mems.forEach((mem, i) => {
-        mem.x = positions[i].x;
-        mem.y = positions[i].y;
-        mem.z = positions[i].z;
-        mem.fx = mem.x; mem.fy = mem.y; mem.fz = mem.z;
-        placed.add(mem.id);
-      });
-    });
-  }
-
-  // Floor clamp
-  const NODE_FLOOR = FLOOR_Y + 10;
-  for (const n of nodes) {
-    if (n.y < NODE_FLOOR) {
-      n.y = NODE_FLOOR;
-      if (n.fy !== undefined) n.fy = NODE_FLOOR;
-    }
-  }
-}
-
-// ═══════════════════════════════════════════
-// APPLY GRAPH DATA — inject anchors/tags, compute layout
-// ═══════════════════════════════════════════
-export function applyGraphData() {
-  if (!graph) return;
-
-  let visibleNodes = state.allNodes.filter(n => state.activeCategories.has(n.payload.category));
-  let visibleIds = new Set(visibleNodes.map(n => n.id));
-  const nodeCatMap = {};
-  for (const n of visibleNodes) nodeCatMap[n.id] = n.payload.category;
-
-  // Separate same-category links from cross-category
-  const sameCatLinks = [];
-  _crossCategoryLinks = [];
-  for (const l of state.allLinks) {
-    const srcId = l.source.id || l.source;
-    const tgtId = l.target.id || l.target;
-    if (!visibleIds.has(srcId) || !visibleIds.has(tgtId)) continue;
-    if (nodeCatMap[srcId] === nodeCatMap[tgtId]) {
-      sameCatLinks.push(l);
-    } else {
-      _crossCategoryLinks.push({ ...l, _crossCategory: true });
-    }
-  }
-
-  _visualLinks = state.linkMode === 'all'
-    ? [...sameCatLinks, ..._crossCategoryLinks]
-    : [...sameCatLinks];
-  let visibleLinks = [];
-
-  // Anchor / Tag hierarchy injection
-  const injectedNodes = [];
-  const injectedLinks = [];
-  const parentCats = Object.entries(state.categoryMetadata).filter(([, meta]) => meta.is_parent);
-
-  const nodesByCat = new Map();
-  for (const n of visibleNodes) {
-    const cat = n.payload.category;
-    let arr = nodesByCat.get(cat);
-    if (!arr) { arr = []; nodesByCat.set(cat, arr); }
-    arr.push(n);
-  }
-
-  for (const [parentName] of parentCats) {
-    const childCats = Object.entries(state.categoryMetadata)
-      .filter(([, m]) => m.parent === parentName)
-      .map(([name]) => name);
-
-    const parentMems = nodesByCat.get(parentName) || [];
-    let hasTreeMemories = parentMems.length > 0;
-    if (!hasTreeMemories) {
-      for (const c of childCats) { if (nodesByCat.has(c)) { hasTreeMemories = true; break; } }
-    }
-    if (!hasTreeMemories) continue;
-
-    const anchorId = `_anchor_${parentName}`;
-    injectedNodes.push({
-      id: anchorId,
-      payload: { category: parentName, _isAnchor: true, _anchorCategory: parentName, importance: 10, content: parentName }
-    });
-
-    for (const childName of childCats) {
-      const childMemories = nodesByCat.get(childName) || [];
-      if (childMemories.length === 0) continue;
-
-      const tagId = `_tag_${childName}`;
-      injectedNodes.push({
-        id: tagId,
-        payload: { category: childName, _isTag: true, _tagCategory: childName, _parentAnchor: parentName, importance: 8, content: childName }
-      });
-
-      injectedLinks.push({ source: anchorId, target: tagId, strength: 0.3, _isStructural: true });
-
-      for (const mem of childMemories) {
-        injectedLinks.push({ source: tagId, target: mem.id, strength: 0.5, _isStructural: true });
-      }
-    }
-
-    for (const mem of parentMems) {
-      injectedLinks.push({ source: anchorId, target: mem.id, strength: 0.4, _isStructural: true });
-    }
-  }
-
-  visibleNodes = [...injectedNodes, ...visibleNodes];
-  visibleIds = new Set(visibleNodes.map(n => n.id));
-  visibleLinks = injectedLinks;
-
-  // Build node lookup for batch link renderer
-  _nodeById = new Map();
-  for (const n of visibleNodes) _nodeById.set(n.id, n);
-
-  // Focus mode
-  if (state.focusedNodeId && visibleIds.has(state.focusedNodeId)) {
-    const neighborIds = new Set([state.focusedNodeId]);
-    const allLinksForFocus = [...visibleLinks, ..._visualLinks];
-    allLinksForFocus.forEach(l => {
-      const srcId = l.source.id || l.source;
-      const tgtId = l.target.id || l.target;
-      if (srcId === state.focusedNodeId) neighborIds.add(tgtId);
-      if (tgtId === state.focusedNodeId) neighborIds.add(srcId);
-    });
-    visibleNodes = visibleNodes.filter(n => neighborIds.has(n.id));
-    visibleIds = neighborIds;
-    visibleLinks = visibleLinks.filter(l => {
-      const srcId = l.source.id || l.source;
-      const tgtId = l.target.id || l.target;
-      return neighborIds.has(srcId) && neighborIds.has(tgtId);
-    });
-    _visualLinks = _visualLinks.filter(l => {
-      const srcId = l.source.id || l.source;
-      const tgtId = l.target.id || l.target;
-      return neighborIds.has(srcId) && neighborIds.has(tgtId);
-    });
-    _nodeById = new Map();
-    for (const n of visibleNodes) _nodeById.set(n.id, n);
-  }
-
-  // Restore saved positions or compute layout
-  const savedPositions = JSON.parse(storage.getItem(_posStorageKey) || '{}');
-  const hasSaved = Object.keys(savedPositions).length > 0;
-
-  if (hasSaved) {
-    restoreNodePositions(visibleNodes);
-  } else {
-    computeLayout(visibleNodes);
-  }
-
-  graph.graphData({ nodes: visibleNodes, links: visibleLinks });
-
-  // ── Sync anchor/tag Three.js objects with scene ──
-  const currentIds = new Set(visibleNodes.map(n => n.id));
-
-  // Remove objects for nodes no longer present
-  for (const [id, obj] of _anchorTagObjects) {
-    if (!currentIds.has(id)) {
-      _scene.remove(obj);
-      // Dispose textures from sprites
-      obj.traverse(child => {
-        if (child.material) {
-          if (child.material.map) child.material.map.dispose();
-          child.material.dispose();
-        }
-        if (child.geometry) child.geometry.dispose();
-      });
-      _anchorTagObjects.delete(id);
-    }
-  }
-
-  // Add/update anchor/tag objects
-  for (const n of visibleNodes) {
-    if (!n.payload || (!n.payload._isAnchor && !n.payload._isTag)) continue;
-
-    const existing = _anchorTagObjects.get(n.id);
-    if (existing) {
-      // Already exists — update position
-      existing.position.set(n.x || 0, n.y || 0, n.z || 0);
-      n.__threeObj = existing; // keep compat for animate loop
-      continue;
-    }
-
-    // Create new anchor/tag Three.js object
-    let obj;
-    if (n.payload._isAnchor) obj = createAnchorObject(n);
-    else if (n.payload._isTag) obj = createTagObject(n);
-
-    if (obj) {
-      obj.position.set(n.x || 0, n.y || 0, n.z || 0);
-      _scene.add(obj);
-      _anchorTagObjects.set(n.id, obj);
-      n.__threeObj = obj; // compat for animate loop
-    }
-  }
-
-  // Rebuild flat array for fast iteration in animate()
-  _anchorTagArray = Array.from(_anchorTagObjects.values());
-
-  // Rebuild instance mapping for instanced memory node rendering
-  rebuildInstanceMap();
-
-  _linkBatchDirty = true;
-  _linkPosDirty = true;
-
-  // Pin any unpositioned nodes
-  for (const n of visibleNodes) {
-    if (n.fx == null && n.x != null) { n.fx = n.x; n.fy = n.y; n.fz = n.z; }
-  }
-
-  schedulePositionSave();
-}
-
-// ═══════════════════════════════════════════
-// LINK VISIBILITY
-// ═══════════════════════════════════════════
-export function applyLinkVisibility() {
-  _linkBatchDirty = true;
-  _linkPosDirty = true;
-}
-
-let _linksFetching = false;
-export async function setLinkMode(mode) {
-  state.linkMode = mode;
-  if (mode === 'off') {
-    noLinksScaleBoost = 1.4;
-    applyLinkVisibility();
-    return;
-  }
-
-  noLinksScaleBoost = 1.0;
-
-  // Lazy-load links from server on first enable
-  if (state.allLinks.length === 0 && !_linksFetching) {
-    _linksFetching = true;
-    try {
-      const data = await fetchLinks();
-      if (data.links) {
-        state.allLinks = data.links;
-        emit('stats-changed');
-      }
-    } catch (err) {
-      console.error('Failed to fetch links:', err);
-    } finally {
-      _linksFetching = false;
-    }
-  }
-
-  applyGraphData();
-  applyLinkVisibility();
-}
-
-export function setLinkTypeFilter(filter) {
-  state.linkTypeFilter = filter;
-  applyLinkVisibility();
-}
-
-// ═══════════════════════════════════════════
-// GRAPH REMOVAL SCHEDULING
-// ═══════════════════════════════════════════
-export function scheduleGraphRemoval(delay = 600) {
-  _linkBatchDirty = true;
-  _linkPosDirty = true;
-  if (graphRemovalTimer) clearTimeout(graphRemovalTimer);
-  graphRemovalTimer = setTimeout(() => {
-    graphRemovalTimer = null;
-    applyGraphData();
-    emit('stats-changed');
-  }, delay);
-}
-
-export function cancelScheduledRemoval() {
-  if (graphRemovalTimer) {
-    clearTimeout(graphRemovalTimer);
-    graphRemovalTimer = null;
-  }
-}
-
-// ═══════════════════════════════════════════
-// INTERACTIONS — hover, click, drag
-// ═══════════════════════════════════════════
-
-function _initUIGuards() {
-  document.querySelectorAll('.glass, #title-bar, #search-container, #stats-bar').forEach(el => {
-    el.addEventListener('pointerenter', () => { _pointerOverUI = true; }, true);
-    el.addEventListener('pointerleave', () => { _pointerOverUI = false; }, true);
-  });
-}
-
-// ═══════════════════════════════════════════
-// CUSTOM POINTER EVENTS + RAYCASTING
-// Replaces ForceGraph3D's onNodeHover/Click/Drag
-// ═══════════════════════════════════════════
-
-function _raycastMemoryNodes(ray) {
-  // O(N) ray-sphere intersection against memory node positions.
-  // No scene graph objects — pure math. Returns { node, dist } or null.
-  let bestDist = Infinity;
-  let bestNode = null;
-  const ox = ray.origin.x, oy = ray.origin.y, oz = ray.origin.z;
-  const dx = ray.direction.x, dy = ray.direction.y, dz = ray.direction.z;
-
-  for (let gi = 0, len = _glowNodeOrder.length; gi < len; gi++) {
-    if (_nodeScale[gi] <= 0.01) continue; // hidden
-    const node = _glowNodeOrder[gi];
-    const radius = _nodeBaseRadius[gi] * _nodeScale[gi] * 1.2; // 1.2 = hit margin
-    const cx = node.x || 0, cy = node.y || 0, cz = node.z || 0;
-
-    // Ray-sphere intersection (algebraic form)
-    const ecx = ox - cx, ecy = oy - cy, ecz = oz - cz;
-    const b = ecx * dx + ecy * dy + ecz * dz;
-    const c = ecx * ecx + ecy * ecy + ecz * ecz - radius * radius;
-    const disc = b * b - c;
-    if (disc < 0) continue;
-    const dist = -b - Math.sqrt(disc);
-    if (dist < 0 || dist >= bestDist) continue;
-    bestDist = dist;
-    bestNode = node;
-  }
-  return bestNode ? { node: bestNode, dist: bestDist } : null;
-}
-
-function _pickNode(mouseNDC) {
-  // Two-pass picking: anchor/tag objects first (standard Three.js), then memory nodes (ray-sphere)
-  _raycaster.setFromCamera(mouseNDC, _camera);
-  const ray = _raycaster.ray;
-
-  // Pass 1: anchor/tag objects (~50-100 Three.js Groups with PlaneGeometry hitboxes)
-  if (_anchorTagArray.length > 0) {
-    const hits = _raycaster.intersectObjects(_anchorTagArray, true);
-    if (hits.length > 0) {
-      let obj = hits[0].object;
-      while (obj && !obj.userData.nodeId) obj = obj.parent;
-      if (obj && obj.userData.nodeId) {
-        const node = _nodeById.get(obj.userData.nodeId);
-        if (node) return { node, dist: hits[0].distance };
-      }
-    }
-  }
-
-  // Pass 2: memory nodes (ray-sphere math — no scene objects)
-  return _raycastMemoryNodes(ray);
-}
-
-let _prevHoveredNode = null;
-
-function _onPointerMove(e) {
-  if (_focusPaused || _pointerOverUI) return;
-
-  const rect = _graphContainer
-    ? _graphContainer.getBoundingClientRect()
-    : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
-  _mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-  _mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
-
-  if (_drag.active) {
-    _handleDragMove(e);
-    return;
-  }
-
-  // Hover detection
-  const hit = _pickNode(_mouse);
-  const hoveredNode = hit ? hit.node : null;
-  if (hoveredNode !== _prevHoveredNode) {
-    handleNodeHover(hoveredNode, _prevHoveredNode);
-    _prevHoveredNode = hoveredNode;
-  }
-}
-
-function _onPointerDown(e) {
-  if (_focusPaused || e.button !== 0 || _pointerOverUI) return;
-  _pointerDownPos = { x: e.clientX, y: e.clientY };
-  _pointerDownTime = performance.now();
-
-  const hit = _pickNode(_mouse);
-  _pointerDownNode = hit ? hit.node : null;
-
-  if (_pointerDownNode) {
-    _startDrag(_pointerDownNode, e);
-  }
-}
-
-function _onPointerUp(e) {
-  if (_focusPaused || e.button !== 0) return;
-
-  if (_drag.active) {
-    const wasDrag = _pointerDownPos
-      ? Math.sqrt(
-          (e.clientX - _pointerDownPos.x) ** 2 +
-          (e.clientY - _pointerDownPos.y) ** 2
-        ) >= 5
-      : true;
-
-    _endDrag();
-
-    // If pointer barely moved, treat as click on the originally picked node
-    if (!wasDrag && _pointerDownNode) {
-      handleNodeClick(_pointerDownNode, e);
-    }
-    _pointerDownPos = null;
-    _pointerDownNode = null;
-    return;
-  }
-
-  if (!_pointerDownPos) return;
-  const dx = e.clientX - _pointerDownPos.x;
-  const dy = e.clientY - _pointerDownPos.y;
-  const dt = performance.now() - _pointerDownTime;
-  const isClick = Math.sqrt(dx * dx + dy * dy) < 5 && dt < 500;
-
-  if (isClick) {
-    const hit = _pickNode(_mouse);
-    if (hit) {
-      handleNodeClick(hit.node, e);
-    } else {
-      handleBackgroundClick();
-    }
-  }
-  _pointerDownPos = null;
-  _pointerDownNode = null;
-}
-
-function _startDrag(node, e) {
-  // Drag plane: perpendicular to camera, passing through node position
-  const nodePos = _dragHit.set(node.x || 0, node.y || 0, node.z || 0);
-  const camDir = _camera.getWorldDirection(_mouseDir);
-  _dragPlane.setFromNormalAndCoplanarPoint(camDir, nodePos);
-
-  const { type, dragSet } = _buildDragSet(node, _graphNodes);
-  _drag.active = true;
-  _drag.node = node;
-  _drag.type = type;
-  _drag.dragSet = dragSet;
-  _drag.depthOffset.set(0, 0, 0);
-  _drag.prevPos = { x: node.x || 0, y: node.y || 0, z: node.z || 0 };
-  _instancesDirty = true;
-  document.body.style.cursor = 'grabbing';
-  _controls.enabled = false; // Disable orbit during drag
-}
-
-function _handleDragMove(e) {
-  if (!_drag.active || !_drag.node) return;
-
-  _raycaster.setFromCamera(_mouse, _camera);
-  if (!_raycaster.ray.intersectPlane(_dragPlane, _dragHit)) return;
-
-  const newX = _dragHit.x + _drag.depthOffset.x;
-  const newY = _dragHit.y + _drag.depthOffset.y;
-  const newZ = _dragHit.z + _drag.depthOffset.z;
-  const node = _drag.node;
-
-  if (_drag.prevPos) {
-    const ddx = newX - _drag.prevPos.x;
-    const ddy = newY - _drag.prevPos.y;
-    const ddz = newZ - _drag.prevPos.z;
-
-    if (ddx !== 0 || ddy !== 0 || ddz !== 0) {
-      for (let i = 0, len = _graphNodes.length; i < len; i++) {
-        const n = _graphNodes[i];
-        if (n === node || !_drag.dragSet.has(n.id)) continue;
-        n.x = (n.x || 0) + ddx;
-        n.y = (n.y || 0) + ddy;
-        n.z = (n.z || 0) + ddz;
-        n.fx = n.x; n.fy = n.y; n.fz = n.z;
-        // Move anchor/tag Three.js object if exists
-        const obj = _anchorTagObjects.get(n.id);
-        if (obj) obj.position.set(n.x, n.y, n.z);
-      }
-    }
-  }
-
-  node.x = newX; node.y = newY; node.z = newZ;
-  node.fx = node.x; node.fy = node.y; node.fz = node.z;
-  const nodeObj = _anchorTagObjects.get(node.id);
-  if (nodeObj) nodeObj.position.set(node.x, node.y, node.z);
-
-  _drag.prevPos = { x: newX, y: newY, z: newZ };
-  _linkPosDirty = true;
-  _instancesDirty = true;
-}
-
-function _endDrag() {
-  if (!_drag.active) return;
-  const node = _drag.node;
-  if (node) { node.fx = node.x; node.fy = node.y; node.fz = node.z; }
-  document.body.style.cursor = state.hoveredNodeId ? 'grab' : 'default';
-  _drag.active = false;
-  _drag.node = null;
-  _drag.type = null;
-  _drag.dragSet = new Set();
-  _drag.prevPos = null;
-  _drag.depthOffset.set(0, 0, 0);
-  _controls.enabled = true; // Re-enable orbit
-  _linkPosDirty = true;
-  _instancesDirty = true;
-  schedulePositionSave();
-}
-
-function _initPointerEvents(canvas) {
-  canvas.addEventListener('pointermove', _onPointerMove);
-  canvas.addEventListener('pointerdown', _onPointerDown);
-  canvas.addEventListener('pointerup', _onPointerUp);
-}
-
-// ═══════════════════════════════════════════
-
-function handleNodeHover(node, prevNode) {
-  const $tooltip = document.getElementById('tooltip');
-  if (_pointerOverUI) {
-    $tooltip.classList.remove('visible');
-    if ($tooltip._moveHandler) {
-      document.removeEventListener('mousemove', $tooltip._moveHandler);
-    }
-    document.body.style.cursor = 'default';
-    return;
-  }
-  if (_drag.active) {
-    document.body.style.cursor = 'grabbing';
-  } else {
-    document.body.style.cursor = node ? 'grab' : 'default';
-  }
-  state.hoveredNodeId = node ? node.id : null;
-  _instancesDirty = true;
-
-  if (node) {
-    const cat = node.payload.category;
-
-    if (node.payload._isAnchor) {
-      document.getElementById('tooltip-category').textContent = cat.toUpperCase();
-      document.getElementById('tooltip-category').style.color = catColor(cat);
-      const childCount = Object.entries(state.categoryMetadata).filter(([, m]) => m.parent === cat).length;
-      document.getElementById('tooltip-preview').textContent = `Parent category \u2022 ${childCount} sub-categories`;
-      document.getElementById('tooltip-importance').textContent = '\u2606';
-    } else if (node.payload._isTag) {
-      document.getElementById('tooltip-category').textContent = cat;
-      document.getElementById('tooltip-category').style.color = catColor(cat);
-      const memCount = state.allNodes.filter(n => n.payload.category === cat).length;
-      document.getElementById('tooltip-preview').textContent = `${memCount} memories`;
-      document.getElementById('tooltip-importance').textContent = '\u25cf';
-    } else {
-      const imp = node.payload.importance || 5;
-      const preview = (node.payload.content || '').length > 100
-        ? node.payload.content.slice(0, 100) + '...'
-        : (node.payload.content || '');
-      const catText = node.payload._isOpenClaw ? '[OC] ' + cat : cat;
-      document.getElementById('tooltip-category').textContent = catText;
-      document.getElementById('tooltip-category').style.color = catColor(cat);
-      document.getElementById('tooltip-preview').textContent = preview;
-      document.getElementById('tooltip-importance').textContent = '\u2605'.repeat(Math.min(imp, 10));
-    }
-
-    const moveTooltip = (e) => {
-      $tooltip.style.left = (e.clientX + 16) + 'px';
-      $tooltip.style.top = (e.clientY + 16) + 'px';
-    };
-    document.addEventListener('mousemove', moveTooltip);
-    $tooltip._moveHandler = moveTooltip;
-    $tooltip.classList.add('visible');
-  } else {
-    $tooltip.classList.remove('visible');
-    if ($tooltip._moveHandler) {
-      document.removeEventListener('mousemove', $tooltip._moveHandler);
-    }
-  }
-}
-
-function handleNodeClick(node, event) {
-  if (!node || _pointerOverUI) return;
-
-  // Anchor nodes: zoom to fit entire category cluster
-  if (node.payload._isAnchor) {
-    const parentName = node.payload._anchorCategory;
-    const gd = graph.graphData();
-    const childCats = Object.entries(state.categoryMetadata)
-      .filter(([, m]) => m.parent === parentName)
-      .map(([name]) => name);
-    const treeCats = new Set([parentName, ...childCats]);
-    const treeNodes = gd.nodes.filter(n =>
-      n.payload && (treeCats.has(n.payload.category) || n.payload._anchorCategory === parentName || (n.payload._tagCategory && treeCats.has(n.payload._tagCategory)))
-    );
-    if (treeNodes.length === 0) return;
-
-    let minX = Infinity, maxX = -Infinity;
-    let minY = Infinity, maxY = -Infinity;
-    let minZ = Infinity, maxZ = -Infinity;
-    for (const n of treeNodes) {
-      const x = n.x || 0, y = n.y || 0, z = n.z || 0;
-      if (x < minX) minX = x; if (x > maxX) maxX = x;
-      if (y < minY) minY = y; if (y > maxY) maxY = y;
-      if (z < minZ) minZ = z; if (z > maxZ) maxZ = z;
-    }
-    const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2, cz = (minZ + maxZ) / 2;
-    const span = Math.max(maxX - minX, maxY - minY, maxZ - minZ, 30);
-    const dist = span * 1.2 + 40;
-    graph.cameraPosition(
-      { x: cx + dist * 0.5, y: cy + dist * 0.35, z: cz + dist * 0.5 },
-      { x: cx, y: cy, z: cz },
-      1500
-    );
-    return;
-  }
-
-  // Tag nodes: zoom to show tag + its memory sphere
-  if (node.payload._isTag) {
-    const tagCat = node.payload._tagCategory;
-    const gd = graph.graphData();
-    const tagMems = gd.nodes.filter(n => n.payload && n.payload.category === tagCat && !n.payload._isAnchor && !n.payload._isTag);
-    if (tagMems.length > 0) {
-      let minX = node.x, maxX = node.x, minY = node.y, maxY = node.y, minZ = node.z, maxZ = node.z;
-      for (const n of tagMems) {
-        const x = n.x || 0, y = n.y || 0, z = n.z || 0;
-        if (x < minX) minX = x; if (x > maxX) maxX = x;
-        if (y < minY) minY = y; if (y > maxY) maxY = y;
-        if (z < minZ) minZ = z; if (z > maxZ) maxZ = z;
-      }
-      const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2, cz = (minZ + maxZ) / 2;
-      const span = Math.max(maxX - minX, maxY - minY, maxZ - minZ, 30);
-      const dist = span * 1.1 + 30;
-      graph.cameraPosition(
-        { x: cx + dist * 0.5, y: cy + dist * 0.3, z: cz + dist * 0.5 },
-        { x: cx, y: cy, z: cz },
-        1500
-      );
-    } else {
-      const dist = gfx.gentleZoom;
-      graph.cameraPosition(
-        { x: node.x + dist, y: node.y + dist * 0.4, z: node.z + dist },
-        { x: node.x, y: node.y, z: node.z },
-        1500
-      );
-    }
-    return;
-  }
-
-  // Ctrl+Click: toggle multi-select
-  if (event && (event.ctrlKey || event.metaKey)) {
-    if (state.multiSelected.has(node.id)) {
-      state.multiSelected.delete(node.id);
-    } else {
-      state.multiSelected.add(node.id);
-    }
-    _instancesDirty = true;
-    emit('multiselect:update');
-    return;
-  }
-
-  // Regular click: clear multi-select, navigate
-  if (state.multiSelected.size > 0) {
-    state.multiSelected.clear();
-    _instancesDirty = true;
-    emit('multiselect:update');
-  }
-  navigateToNode(node);
-}
-
-export function navigateToNode(node, { zoom = 'close' } = {}) {
-  if (!node) return;
-  if (node.payload && (node.payload._isAnchor || node.payload._isTag)) return;
-  state.selectedNodeId = node.id;
-  _instancesDirty = true;
-  storage.setItem(KEYS.SELECTED_NODE, node.id);
-
-  // Ensure category is visible
-  if (!state.activeCategories.has(node.payload.category)) {
-    state.activeCategories.add(node.payload.category);
-    emit('categories-changed');
-  }
-
-  // If focus mode is on, switch focus to the new node
-  if (state.focusedNodeId !== null) {
-    state.focusedNodeId = node.id;
-    applyGraphData();
-    emit('stats-changed');
-  }
-
-  // Camera transition
-  const dist = zoom === 'gentle' ? gfx.gentleZoom : gfx.clickZoom;
-  graph.cameraPosition(
-    { x: node.x + dist, y: node.y + dist * 0.4, z: node.z + dist },
-    { x: node.x, y: node.y, z: node.z },
-    1500
-  );
-
-  emit('node-selected', node);
-}
-
-function handleBackgroundClick() {
-  // Don't close detail panel on background click
-}
-
-// ═══════════════════════════════════════════
-// INSTANCED MEMORY NODES — static, dirty-flag
-// ═══════════════════════════════════════════
-
-function _updateMemoryNodesInstanced() {
-  const nodeCount = _glowNodeOrder.length;
-  if (nodeCount === 0) return;
-  if (!_instancesDirty) return;
-  _instancesDirty = false;
-
-  // Phase 1: compute final state directly (no animation, no lerp)
-  for (let gi = 0; gi < nodeCount; gi++) {
-    const node = _glowNodeOrder[gi];
-    const nodeId = node.id;
-
-    const isHovered = nodeId === state.hoveredNodeId;
-    const isSelected = nodeId === state.selectedNodeId;
-    const isDragMember = _drag.active && _drag.dragSet.has(nodeId);
-    const isMultiSelected = state.multiSelected.has(nodeId);
-    const isCatHidden = !state.activeCategories.has(node.payload.category);
-    const isSearchMatch = state.searchResults !== null && state.searchResults.has(nodeId);
-    const isSearchMiss = state.searchResults !== null && !isSearchMatch;
-
-    // Opacity — direct target, no interpolation
-    let opacity = _nodeBaseOpacity[gi];
-    if (isSearchMatch) opacity = 0.85;
-    else if (isSearchMiss) opacity = 0;
-    if (isCatHidden) opacity = 0;
-    if (_drag.active && !isCatHidden) {
-      if (isDragMember) opacity = Math.max(opacity, 0.6);
-      else opacity *= 0.35;
-    }
-    if (isHovered) opacity = 0.75;
-    if (isSelected) opacity = 0.85;
-    if (isMultiSelected) opacity = 0.7;
-    _nodeOpacity[gi] = opacity;
-
-    // Glow opacity
-    const glowMult = isSearchMatch ? 0.95 : 0.85;
-    _nodeGlowOpacity[gi] = opacity * glowMult;
-
-    // Color — direct set, no interpolation
-    if (isMultiSelected) {
-      _nodeColorR[gi] = _MULTI_SELECT_BLUE.r;
-      _nodeColorG[gi] = _MULTI_SELECT_BLUE.g;
-      _nodeColorB[gi] = _MULTI_SELECT_BLUE.b;
-    } else {
-      _nodeColorR[gi] = _nodeBaseColorR[gi];
-      _nodeColorG[gi] = _nodeBaseColorG[gi];
-      _nodeColorB[gi] = _nodeBaseColorB[gi];
-    }
-
-    // Scale — direct target, no interpolation
-    let scale = 1.0;
-    if (isCatHidden || isSearchMiss) scale = 0;
-    else if (isSearchMatch) scale = 1.8;
-    if (isSelected) scale = 2.0;
-    else if (isMultiSelected) scale = 1.5;
-    else if (isHovered) scale = 1.6;
-    scale *= noLinksScaleBoost;
-    _nodeScale[gi] = scale;
-
-    // Memory nodes have no Three.js object — raycasting uses _nodeScale[] directly
-  }
-
-  // Phase 2: compose instance matrices and upload GPU attributes
-  const tiers = [_wireInstLow, _wireInstMed, _wireInstHigh];
-  let globalOffset = 0;
-
-  for (let t = 0; t < 3; t++) {
-    const inst = tiers[t];
-    const tierLen = _tierNodes[t].length;
-    if (!inst || tierLen === 0) { globalOffset += tierLen; continue; }
-
-    const colorArr = inst.geometry.attributes.instanceColor.array;
-    const opacityArr = inst.geometry.attributes.instanceOpacity.array;
-
-    for (let i = 0; i < tierLen; i++) {
-      const gi = globalOffset + i;
-      const node = _tierNodes[t][i];
-      const scale = _nodeScale[gi] * _nodeBaseRadius[gi];
-
-      // Compose matrix: position + uniform scale (no rotation)
-      _instPos.set(node.x || 0, node.y || 0, node.z || 0);
-      _instScaleV.set(scale, scale, scale);
-      _instMatrix.compose(_instPos, _identityQuat, _instScaleV);
-      inst.setMatrixAt(i, _instMatrix);
-
-      // Color
-      const ci3 = i * 3;
-      colorArr[ci3]     = _nodeColorR[gi];
-      colorArr[ci3 + 1] = _nodeColorG[gi];
-      colorArr[ci3 + 2] = _nodeColorB[gi];
-
-      // Opacity
-      opacityArr[i] = _nodeOpacity[gi];
-    }
-
-    inst.instanceMatrix.needsUpdate = true;
-    inst.geometry.attributes.instanceColor.needsUpdate = true;
-    inst.geometry.attributes.instanceOpacity.needsUpdate = true;
-
-    globalOffset += tierLen;
-  }
-
-  // Glow Points: write position + color + opacity + size
-  if (_glowPoints && nodeCount > 0) {
-    const posArr = _glowPointsGeo.attributes.position.array;
-    const colArr = _glowPointsGeo.attributes.glowColor.array;
-    const opArr  = _glowPointsGeo.attributes.glowOpacity.array;
-    const sizeArr = _glowPointsGeo.attributes.glowSize.array;
-
-    for (let gi = 0; gi < nodeCount; gi++) {
-      const node = _glowNodeOrder[gi];
-      const gi3 = gi * 3;
-
-      posArr[gi3]     = node.x || 0;
-      posArr[gi3 + 1] = node.y || 0;
-      posArr[gi3 + 2] = node.z || 0;
-
-      colArr[gi3]     = _nodeColorR[gi];
-      colArr[gi3 + 1] = _nodeColorG[gi];
-      colArr[gi3 + 2] = _nodeColorB[gi];
-
-      opArr[gi] = _nodeGlowOpacity[gi];
-      sizeArr[gi] = _nodeBaseRadius[gi] * _nodeScale[gi] * 1.4;
-    }
-
-    _glowPointsGeo.attributes.position.needsUpdate = true;
-    _glowPointsGeo.attributes.glowColor.needsUpdate = true;
-    _glowPointsGeo.attributes.glowOpacity.needsUpdate = true;
-    _glowPointsGeo.attributes.glowSize.needsUpdate = true;
-  }
-}
-
-
-// ═══════════════════════════════════════════
-// ANIMATION LOOP
-// ═══════════════════════════════════════════
-function animate() {
-  animFrameId = requestAnimationFrame(animate);
-  const time = performance.now() * 0.001;
-
-  TWEEN.update();
-
-  // Update wireframe orb shader time uniform (Fresnel shimmer)
-  if (_wireInstLow)  _wireInstLow.material.uniforms.uTime.value = time;
-  if (_wireInstMed)  _wireInstMed.material.uniforms.uTime.value = time;
-  if (_wireInstHigh) _wireInstHigh.material.uniforms.uTime.value = time;
-
-  // WASD camera movement — delegated to camera module via event
-  emit('camera-tick');
-
-  // Update 3D mouse position via raycasting (skip when mouse hasn't moved)
-  if (_mouseMoved) {
-    updateMouse3D();
-    _mouseMoved = false;
-  }
-
-  // Floor effect uniforms (updated by background module listening to 'animate-tick')
-  emit('animate-tick', { time, graph });
-
-  // ── Node pass ──
-  if (graph) {
-    const _cam = _camera;
-
-    // Build frustum once per frame
-    _cam.updateMatrixWorld();
-    _projScreenMatrix.multiplyMatrices(_cam.projectionMatrix, _cam.matrixWorldInverse);
-    _frustum.setFromProjectionMatrix(_projScreenMatrix);
-    _frustumPadded.copy(_frustum);
-    for (let _pi = 0; _pi < 6; _pi++) _frustumPadded.planes[_pi].constant += 60;
-
-    // ── Pass 1: Anchor/Tag nodes only (~50-100 objects, not 3500) ──
-    for (let _ni = 0, _nlen = _anchorTagArray.length; _ni < _nlen; _ni++) {
-      const obj = _anchorTagArray[_ni];
-      if (!obj || !obj.userData || !obj.userData.nodeId) continue;
-
-      const dot = obj.userData.dot;
-      const label = obj.userData.label;
-      const phase = obj.userData.phase || 0;
-      const isCatHidden = !state.activeCategories.has(obj.userData.category);
-      const isHovered = obj.userData.nodeId === state.hoveredNodeId;
-      const isSelected = obj.userData.nodeId === state.selectedNodeId;
-      const isMultiSelected = state.multiSelected.has(obj.userData.nodeId);
-
-      // Frustum culling
-      obj.getWorldPosition(_worldPos);
-      let _cullZone = 0;
-      if (!_frustum.containsPoint(_worldPos)) {
-        _cullZone = _frustumPadded.containsPoint(_worldPos) ? 1 : 2;
-      }
-      if (isHovered || isSelected || (_drag.active && _drag.dragSet.has(obj.userData.nodeId))) {
-        _cullZone = 0;
-      }
-
-      // Zone 2: fully outside — decay to invisible, then skip entirely
-      if (_cullZone === 2) {
-        // Already fully faded — skip all work
-        if (obj.userData._currentScale <= 0.01) {
-          const dotOp = dot ? dot.material.opacity : 0;
-          const labelOp = label ? (label.material.uniforms ? label.material.uniforms.uOpacity.value : label.material.opacity) : 0;
-          const glowOp = obj.userData.glow ? obj.userData.glow.material.opacity : 0;
-          if (dotOp === 0 && labelOp === 0 && glowOp === 0) continue;
-        }
-        if (dot) {
-          dot.material.opacity *= 0.85;
-          if (dot.material.opacity < 0.005) dot.material.opacity = 0;
-        }
-        if (label) {
-          if (label.material.uniforms) {
-            label.material.uniforms.uOpacity.value *= 0.85;
-            if (label.material.uniforms.uOpacity.value < 0.005) label.material.uniforms.uOpacity.value = 0;
-          } else {
-            label.material.opacity *= 0.85;
-            if (label.material.opacity < 0.005) label.material.opacity = 0;
-          }
-        }
-        const _glowCull = obj.userData.glow;
-        if (_glowCull) {
-          _glowCull.material.opacity *= 0.85;
-          if (_glowCull.material.opacity < 0.005) _glowCull.material.opacity = 0;
-        }
-        if (obj.userData._currentScale > 0.01) {
-          obj.userData._currentScale *= 0.9;
-          obj.scale.setScalar(obj.userData._currentScale);
-        }
-        continue;
-      }
-
-      // Mouse proximity
-      let mouseProx = 0;
-      if (_cullZone === 0 && _mouse3DValid && _mouse3D.lengthSq() > 0) {
-        const mouseDist = _mouse3D.distanceTo(_worldPos);
-        mouseProx = 1 - Math.min(mouseDist / PLEXUS_RADIUS, 1);
-        mouseProx = mouseProx * mouseProx;
-      }
-
-      const breathe = 1 + Math.sin(time * 0.5 + phase) * 0.03;
-
-      // ── Anchor nodes ──
-      if (obj.userData.isAnchor) {
-        const baseOp = obj.userData.baseOpacity;
-        let dotTarget = baseOp + mouseProx * 0.2;
-        let labelTarget = 1.0;
-        if (!state.labelsVisible) labelTarget = 0;
-        if (isCatHidden) { dotTarget = 0; labelTarget = 0; }
-        else if (state.searchResults !== null && !state.searchResults.has(obj.userData.nodeId)) {
-          dotTarget = 0; labelTarget = 0;
-        }
-        if (_drag.active && !isCatHidden) {
-          if (_drag.dragSet.has(obj.userData.nodeId)) dotTarget = Math.max(dotTarget, 0.9);
-          else { dotTarget *= 0.5; labelTarget *= 0.85; }
-        }
-        if (isHovered) { dotTarget = 1.0; labelTarget = 1.0; }
-        if (isSelected) dotTarget = 1.0;
-        if (_cullZone === 1) { dotTarget *= 0.5; }
-
-        const fade = isCatHidden ? 0.15 : 0.2;
-        if (dot) dot.material.opacity += (dotTarget * breathe - dot.material.opacity) * fade;
-        if (label) {
-          if (label.material.uniforms) {
-            label.material.uniforms.uOpacity.value += (labelTarget - label.material.uniforms.uOpacity.value) * fade;
-            // Floor: visible labels never go below 0.9 opacity
-            if (_cullZone === 0 && labelTarget > 0 && label.material.uniforms.uOpacity.value < 0.9) {
-              label.material.uniforms.uOpacity.value = 0.9;
-            }
-          } else {
-            label.material.opacity += (labelTarget - label.material.opacity) * fade;
-          }
-          // Billboard: face camera
-          label.quaternion.copy(_cam.quaternion);
-        }
-
-        if (label && obj.userData.baseLabelScale) {
-          const camDist = _cam.position.distanceTo(_worldPos);
-          const scaleFactor = Math.max(1.5, Math.min(8.0, camDist / 80)) * state.labelSizeMultiplier;
-          const bls = obj.userData.baseLabelScale;
-          label.scale.set(bls.x * scaleFactor, bls.y * scaleFactor, 1);
-        }
-
-        let targetScale = isCatHidden ? 0 : breathe;
-        if (isHovered) targetScale *= 1.15;
-        if (obj.userData._currentScale == null) obj.userData._currentScale = 0.01;
-        obj.userData._currentScale += (targetScale - obj.userData._currentScale) * 0.1;
-        obj.scale.setScalar(obj.userData._currentScale);
-        continue;
-      }
-
-      // ── Tag nodes ──
-      if (obj.userData.isTag) {
-        const baseOp = obj.userData.baseOpacity;
-        let dotTarget = baseOp + mouseProx * 0.3;
-        let labelTarget = 1.0;
-        if (!state.labelsVisible) labelTarget = 0;
-
-        if (isCatHidden) { dotTarget = 0; labelTarget = 0; }
-        else if (state.searchResults !== null && !state.searchResults.has(obj.userData.nodeId)) {
-          dotTarget = 0; labelTarget = 0;
-        }
-        if (_drag.active && !isCatHidden) {
-          if (_drag.dragSet.has(obj.userData.nodeId)) dotTarget = Math.max(dotTarget, 0.8);
-          else { dotTarget *= 0.4; labelTarget *= 0.85; }
-        }
-        if (isHovered) { dotTarget = 1.0; labelTarget = 1.0; }
-        if (isSelected) dotTarget = 1.0;
-        if (_cullZone === 1) { dotTarget *= 0.5; }
-
-        const fade = isCatHidden ? 0.15 : 0.2;
-        if (dot) dot.material.opacity += (dotTarget * breathe - dot.material.opacity) * fade;
-        if (label) {
-          if (label.material.uniforms) {
-            label.material.uniforms.uOpacity.value += (labelTarget - label.material.uniforms.uOpacity.value) * fade;
-            // Floor: visible labels never go below 0.9 opacity
-            if (_cullZone === 0 && labelTarget > 0 && label.material.uniforms.uOpacity.value < 0.9) {
-              label.material.uniforms.uOpacity.value = 0.9;
-            }
-          } else {
-            label.material.opacity += (labelTarget - label.material.opacity) * fade;
-          }
-          // Billboard: face camera
-          label.quaternion.copy(_cam.quaternion);
-        }
-
-        if (label && obj.userData.baseLabelScale) {
-          const camDist = _cam.position.distanceTo(_worldPos);
-          const scaleFactor = Math.max(1.2, Math.min(6.0, camDist / 60)) * state.labelSizeMultiplier;
-          const bls = obj.userData.baseLabelScale;
-          label.scale.set(bls.x * scaleFactor, bls.y * scaleFactor, 1);
-          label.position.y = (obj.userData.baseLabelY || obj.userData.baseRadius * 1.0) * scaleFactor;
-        }
-
-        let targetScale = isCatHidden ? 0 : breathe * (1 + mouseProx * 0.1);
-        if (isHovered) targetScale *= 1.1;
-        if (obj.userData._currentScale == null) obj.userData._currentScale = 0.01;
-        obj.userData._currentScale += (targetScale - obj.userData._currentScale) * 0.1;
-        obj.scale.setScalar(obj.userData._currentScale);
-        continue;
-      }
-
-    }
-
-    // ── Pass 2: Memory nodes (instanced rendering) ──
-    _updateMemoryNodesInstanced();
-
-    // ── LINK BATCH — single draw call ──
-    if (_linkBatch) {
-      if (_linkBatchDirty && _nodeById.size > 0) {
-        _batchLinks.length = 0;
-        if (state.linkMode !== 'off') {
-          const grey = { r: 0.45, g: 0.45, b: 0.45 };
-          const colorCache = new Map();
-          function _getMuted(cat) {
-            let c = colorCache.get(cat);
-            if (!c) {
-              const base = new THREE.Color(catColor(cat));
-              c = { r: base.r + (grey.r - base.r) * 0.5, g: base.g + (grey.g - base.g) * 0.5, b: base.b + (grey.b - base.b) * 0.5 };
-              colorCache.set(cat, c);
-            }
-            return c;
-          }
-          const cols = _linkBatchColors;
-          let ci = 0;
-          for (let li = 0, ll = _visualLinks.length; li < ll; li++) {
-            const link = _visualLinks[li];
-            if (state.linkMode === 'intra' && link._crossCategory) continue;
-            if (state.linkTypeFilter !== 'all' && (!link.types || !link.types.includes(state.linkTypeFilter))) continue;
-            const srcId = link.source.id || link.source;
-            const tgtId = link.target.id || link.target;
-            const srcNode = _nodeById.get(srcId);
-            const tgtNode = _nodeById.get(tgtId);
-            if (!srcNode || !tgtNode) continue;
-            const srcCat = srcNode.payload ? srcNode.payload.category : null;
-            const tgtCat = tgtNode.payload ? tgtNode.payload.category : null;
-            if (srcCat && !state.activeCategories.has(srcCat)) continue;
-            if (tgtCat && !state.activeCategories.has(tgtCat)) continue;
-            // Hide links where both endpoints are not search matches
-            if (state.searchResults !== null) {
-              const srcMatch = state.searchResults.has(srcId);
-              const tgtMatch = state.searchResults.has(tgtId);
-              if (!srcMatch && !tgtMatch) continue;
-            }
-            if (ci + 6 > cols.length) break;
-            link._srcNode = srcNode;
-            link._tgtNode = tgtNode;
-            _batchLinks.push(link);
-            const sc = _getMuted(srcNode.payload ? srcNode.payload.category : '_fallback');
-            const tc = _getMuted(tgtNode.payload ? tgtNode.payload.category : '_fallback');
-            cols[ci] = sc.r; cols[ci + 1] = sc.g; cols[ci + 2] = sc.b;
-            cols[ci + 3] = tc.r; cols[ci + 4] = tc.g; cols[ci + 5] = tc.b;
-            ci += 6;
-          }
-          _linkBatchGeo.attributes.color.needsUpdate = true;
-        }
-        _linkBatchDirty = false;
-      }
-
-      // Update positions only when nodes have moved (drag, layout change)
-      if (_linkPosDirty) {
-        const bl = _batchLinks;
-        const blen = bl.length;
-        if (blen > 0) {
-          const pos = _linkBatchPositions;
-          let pi = 0;
-          for (let i = 0; i < blen; i++) {
-            const s = bl[i]._srcNode, t = bl[i]._tgtNode;
-            pos[pi] = s.x; pos[pi + 1] = s.y; pos[pi + 2] = s.z;
-            pos[pi + 3] = t.x; pos[pi + 4] = t.y; pos[pi + 5] = t.z;
-            pi += 6;
-          }
-          _linkBatchGeo.attributes.position.needsUpdate = true;
-          _linkBatchGeo.setDrawRange(0, blen * 2);
-        } else {
-          _linkBatchGeo.setDrawRange(0, 0);
-        }
-        _linkPosDirty = false;
-      }
-
-      // Sync opacity from GFX slider
-      const targetOp = gfx.linkOpacity || 0.12;
-      if (_linkBatch.material.opacity !== targetOp) _linkBatch.material.opacity = targetOp;
-    }
-  }
-
-  // ── Render ── (single render loop — no more ForceGraph3D internal loop)
-  if (_controls) _controls.update(); // damping
-  if (_composer) {
-    _composer.render();
-  } else if (_renderer && _scene && _camera) {
-    _renderer.render(_scene, _camera);
-  }
-}
-
-// ═══════════════════════════════════════════
-// GRAPH INITIALIZATION
-// ═══════════════════════════════════════════
-
-/**
- * Initialize the 3D graph with raw Three.js (no ForceGraph3D dependency).
- * @param {HTMLElement} container  The DOM element to render into (e.g. #graph-container)
- * @param {Object} [options]       Optional callbacks
- * @param {Function} [options.onApplyBgTheme]  Called after graph is built to apply background
- * @returns {Object} The graph proxy object
- */
-export function initGraph(container, options = {}) {
-  _graphContainer = container;
-
-  // Initialize mouse tracking and UI guards
-  _initMouseTracking();
-  _initUIGuards();
-
-  // ── 1. Renderer ──
-  _renderer = new THREE.WebGLRenderer({
-    antialias: true,
-    powerPreference: 'high-performance',
-    alpha: false,
-  });
-  _renderer.setPixelRatio(window.devicePixelRatio);
-  _renderer.setSize(container.offsetWidth, container.offsetHeight);
-  _renderer.setClearColor(new THREE.Color('#050505'));
-  _renderer.toneMapping = THREE.NoToneMapping;
-  _renderer.sortObjects = false;
-  _renderer.info.autoReset = false;
-  container.appendChild(_renderer.domElement);
-
-  // ── 2. Scene ──
-  _scene = new THREE.Scene();
-
-  // ── 3. Camera ──
-  _camera = new THREE.PerspectiveCamera(
-    70,
-    container.offsetWidth / container.offsetHeight,
-    0.1,
-    50000,
-  );
-  _camera.position.set(0, 600, 1400);
-
-  // ── 4. OrbitControls ──
-  _controls = new OrbitControls(_camera, _renderer.domElement);
-  _controls.enableDamping = true;
-  _controls.dampingFactor = 0.08;
-
-  // ── 5. EffectComposer + RenderPass ──
-  _composer = new EffectComposer(_renderer);
-  _composer.addPass(new RenderPass(_scene, _camera));
-
-  // ── 6. Resize handler ──
-  window.addEventListener('resize', _onResize);
-
-  // ── 7. Assign proxy as `graph` ──
-  graph = graphProxy;
-
-  // ── 8. Pointer events for hover/click/drag (custom raycasting) ──
-  _initPointerEvents(_renderer.domElement);
-
-  // Init instanced rendering for memory nodes (MUST be before applyGraphData
-  // so rebuildInstanceMap() can set instance counts on the already-created meshes)
-  initInstancedRendering();
-
-  // Apply data (layout is computed, positions are pinned)
-  applyGraphData();
-
-  // One-time reset: clear saved positions for new layout version
-  if (storage.getItem(KEYS.LAYOUT_VERSION) !== 'v6-polished') {
-    try { storage.removeItem(_posStorageKey); } catch (_) {}
-    storage.setItem(KEYS.LAYOUT_VERSION, 'v6-polished');
-  }
-
-  // Apply link visibility
-  applyLinkVisibility();
-
-  // Bloom post-processing (half resolution for performance)
-  if (gfx.bloomEnabled !== false) {
-    _bloomPass = new UnrealBloomPass(
-      new THREE.Vector2(Math.floor(container.offsetWidth / 2), Math.floor(container.offsetHeight / 2)),
-      0.5,   // strength
-      0.4,   // radius
-      1.0    // threshold — only orbs (2.5x output) bloom, not labels
-    );
-    _composer.addPass(_bloomPass);
-  }
-
-  // OutputPass: converts linear→sRGB for correct display brightness
-  _composer.addPass(new OutputPass());
-
-  // Apply background theme
-  if (options.onApplyBgTheme) {
-    options.onApplyBgTheme(gfx.bgTheme || 'deep-grid');
-  }
-
-  // Init batch link renderer
-  initLinkBatch();
-
-  // Start animation loop
-  animate();
-
-  return graph;
-}
-
-// ═══════════════════════════════════════════
-// RESIZE HANDLER
-// ═══════════════════════════════════════════
-function _onResize() {
-  if (!_graphContainer || !_camera || !_renderer || !_composer) return;
-  const w = _graphContainer.offsetWidth;
-  const h = _graphContainer.offsetHeight;
-  _camera.aspect = w / h;
-  _camera.updateProjectionMatrix();
-  _renderer.setSize(w, h);
-  _composer.setSize(w, h);
-  if (_bloomPass) {
-    _bloomPass.resolution.set(Math.floor(w / 2), Math.floor(h / 2));
-  }
-}
-
-// ═══════════════════════════════════════════
-// PUBLIC API
-// ═══════════════════════════════════════════
-
-/** Returns the graph proxy (or null before init). */
-export function getGraph() {
-  return graph;
-}
-
-/** Returns the bloom pass (or null before init). */
-export function getBloomPass() {
-  return _bloomPass;
-}
-
-/** Returns current visual links array. */
-export function getVisualLinks() {
-  return _visualLinks;
-}
-
-/** Returns the node-by-id Map. */
-export function getNodeById() {
-  return _nodeById;
-}
-
-/** Mark the link batch as dirty (force rebuild on next frame). */
-export function markLinksDirty() {
-  _linkBatchDirty = true;
-  _linkPosDirty = true;
-}
-
-/** Returns the drag state object (read-only). */
-export function getDragState() {
-  return _drag;
-}
-
-/** Stop the animation loop. */
-export function stopAnimation() {
-  if (animFrameId) {
-    cancelAnimationFrame(animFrameId);
-    animFrameId = null;
-  }
-}
-
-/** Restart the animation loop after stopping. */
-export function startAnimation() {
-  if (!animFrameId) animate();
-}
-
-/** Pause all interaction (focus mode — zero resource consumption). */
-export function pauseInteraction() {
-  _focusPaused = true;
-  if (_controls) _controls.enabled = false;
-}
-
-/** Resume interaction after focus mode exit. */
-export function resumeInteraction() {
-  _focusPaused = false;
-  if (_controls) _controls.enabled = true;
-}
-
-/** Clear saved node positions from localStorage. */
-export function clearSavedPositions() {
-  try { storage.removeItem(_posStorageKey); } catch (_) {}
-}
-
-/** Recompute layout from scratch (no saved positions). */
-export function resetLayout() {
-  clearSavedPositions();
-  applyGraphData();
-}
-
-/** Update bloom pass parameters. */
-export function setBloomParams(strength, threshold, radius) {
-  if (_bloomPass) {
-    if (strength !== undefined) _bloomPass.strength = strength;
-    if (threshold !== undefined) _bloomPass.threshold = threshold;
-    if (radius !== undefined) _bloomPass.radius = radius;
-  }
-}
-
-/** Enable or disable bloom post-processing at runtime. */
-export function setBloomEnabled(enabled) {
-  if (_bloomPass) {
-    _bloomPass.enabled = enabled;
-  }
-}
-
-/** Returns the noLinksScaleBoost value (used by external animation code). */
-export function getNoLinksScaleBoost() {
-  return noLinksScaleBoost;
-}