feat(visualize): 3D nebula showpiece as the default view

Per the steering toward visual impact, make the 3D force graph a living
nebula and the default:
- gentle auto-rotation once idle (pauses on interaction) so it's alive at rest
- soft per-node bloom + faint twinkle + bright core sparks → nebula glow
- ambient light 'comets' drifting along random filaments
Treemap kept behind the TREEMAP toggle for the informative view.

Author: KylinMountain

openkb/templates/graph.html

@@ -270,7 +270,8 @@
 let didDrag = false;
 let alpha = 1;                   // simulated-annealing "temperature"; cools to 0 so motion stops
 let spread = 1;                  // spacing knob: >1 spreads nodes apart, <1 packs them tighter
-let mode = "treemap";            // "treemap" = document/concept infographic (default), "graph" = 3D force
+let mode = "graph";              // "graph" = 3D nebula showpiece (default), "treemap" = infographic
+let idleFrames = 0;              // frames since last interaction → drives idle auto-rotation
 
 document.getElementById("ncount").textContent = nodes.length;
 document.getElementById("ecount").textContent = edges.length;
@@ -478,6 +479,7 @@
 
 canvas.addEventListener("wheel", e => {
   e.preventDefault();
+  idleFrames = 0;                       // pause auto-rotation while the user is interacting
   const f = Math.exp(-e.deltaY * 0.0015);
   const ns = Math.max(0.3, Math.min(9, scale*f));   // wider range so you can dive deep in
   const k = ns/scale;
@@ -538,6 +540,26 @@
   ctx.globalAlpha = 1;
 }
 
+// ambient "comets" drifting along random filaments → the nebula feels alive even at rest
+const pulses = Array.from({length: Math.min(10, Math.max(0, edges.length))},
+  () => ({ ei: Math.floor(Math.random()*edges.length), k: Math.random(), sp: 0.003 + Math.random()*0.004 }));
+function drawPulses(t){
+  for(const p of pulses){
+    let e = edges[p.ei], a = e && byId[e.source], b = e && byId[e.target];
+    if(!e || a.alpha < 0.06 || b.alpha < 0.06){ p.ei = Math.floor(Math.random()*edges.length); p.k = 0; continue; }
+    p.k += p.sp;
+    if(p.k >= 1){ p.k = 0; p.ei = Math.floor(Math.random()*edges.length); continue; }
+    const fade = Math.sin(p.k*Math.PI);                 // fade in/out along the filament
+    const fog = Math.max(0.25, Math.min(1, 1 - (a.rz+b.rz)/1300));
+    const fx = a.sx + (b.sx-a.sx)*p.k, fy = a.sy + (b.sy-a.sy)*p.k;
+    ctx.globalAlpha = 0.85 * fade * fog;
+    ctx.shadowColor = "rgba(120,200,255,.9)"; ctx.shadowBlur = 7;
+    ctx.fillStyle = "rgba(190,225,255,.95)";
+    ctx.beginPath(); ctx.arc(fx, fy, 1.7, 0, TAU); ctx.fill();
+    ctx.shadowBlur = 0; ctx.globalAlpha = 1;
+  }
+}
+
 function drawNode(n, t){
   if(n.alpha < 0.02) return;
   const col = n.col;
@@ -566,11 +588,17 @@
   }
   // disc + glow (glow eases with highlight so hovering doesn't flash the whole scene)
   ctx.beginPath(); ctx.arc(x, y, r, 0, TAU);
+  const twinkle = 0.82 + 0.18*Math.sin(t*0.0013 + n.r*3.1);   // gentle per-node shimmer
   ctx.fillStyle = `rgba(${col},${0.5 + 0.5*hl})`;
-  ctx.shadowColor = `rgba(${col},.7)`;
-  ctx.shadowBlur = (n.id===hover ? 9 : 0) * fog * hl;   // flat crisp discs at rest; a touch of glow only on hover
+  ctx.shadowColor = `rgba(${col},.9)`;
+  ctx.shadowBlur = (n.id===hover ? 18 : 8) * fog * hl * twinkle;   // soft bloom → nebula glow
   ctx.fill();
   ctx.shadowBlur = 0;
+  // bright core spark for the nearer/brighter nodes
+  if(hl > 0.5 && fog > 0.5){
+    ctx.beginPath(); ctx.arc(x - r*0.28, y - r*0.28, r*0.3, 0, TAU);
+    ctx.fillStyle = `rgba(255,255,255,${0.35*fog})`; ctx.fill();
+  }
   // (flat discs — no glossy core highlight)
   // label — declutter: hubs at rest; hovered node + neighbors; selection; zoomed in; near depth only
   const showLabel = (scale > 1.4) || (n.id === selected) || (hover ? hl > 0.55 : labelIds.has(n.id));
@@ -589,6 +617,8 @@
 function frame(t){
   if(mode === "graph"){          // treemap is DOM — the canvas idles
     if(alpha > 0.005) step();
+    idleFrames = (orbiting || drag) ? 0 : idleFrames + 1;
+    if(idleFrames > 150) yaw += 0.0011;   // gentle auto-rotation once idle → a living nebula
     project();
     const focus = hover || selected;   // hover/selection spotlights a node + its neighbours
     for(const n of nodes){
@@ -598,6 +628,7 @@
     ctx.setTransform(DPR,0,0,DPR,0,0);
     ctx.clearRect(0,0,W(),H());
     edges.forEach(e => drawEdge(e, t));
+    drawPulses(t);               // ambient light travelling the filaments
     // draw nodes far → near so nearer discs occlude farther ones (painter's algorithm)
     nodes.filter(visible).sort((a,b) => b.rz - a.rz).forEach(n => drawNode(n, t));
   }
@@ -625,7 +656,7 @@
 });
 canvas.addEventListener("mousedown", e => {
   const n = pick(e.offsetX, e.offsetY);
-  didDrag = false;
+  didDrag = false; idleFrames = 0;
   oStartX = e.offsetX; oStartY = e.offsetY;   // press origin — for the drag threshold and orbit
   if(n){ drag = n; hover = n.id; canvas.style.cursor = "grabbing"; }
   else { orbiting = true; yawStart = yaw; pitchStart = pitch; canvas.style.cursor = "grabbing"; }
@@ -734,8 +765,8 @@
 
 /* ===================== boot ===================== */
 window.addEventListener("resize", () => { size(); if(mode === "treemap") buildTreemap(); });
-size(); seed();          // seed positions so a later switch to 3D has a layout to settle
-setMode("treemap");      // open on the treemap infographic
+size(); seed();
+setMode("graph");        // open on the 3D nebula
 requestAnimationFrame(frame);
 </script>
 </body>