@syke1/mcp-server 1.3.10 → 1.3.11

package/dist/web/public/app.js

@@ -18,6 +18,8 @@ let crawlData = null;
 let modifyingNodes = new Set(); // nodes currently being modified by AI
 let heartbeatNodes = new Map(); // nodeId → { riskLevel, startTime, interval }
 let diffScrollAnim = null; // animation for diff scroll
+let knownNodeIds = new Set(); // track existing nodes for star-birth detection
+let birthAnimations = new Map(); // nodeId → { startTime, spawnPos, targetPos }
 
 const LAYER_HEX = {
   FE: "#00d4ff", BE: "#c084fc", DB: "#ff6b35",
@@ -108,20 +110,62 @@ async function loadGraph() {
   }
   hideWelcomeOverlay();
 
+  const isReload = Graph !== null;
+
+  // Spawn point for new nodes (top-right corner of 3D space)
+  const SPAWN = { x: 5000, y: 4000, z: -2000 };
+
+  // Preserve existing node positions on reload
+  const currentPositions = {};
+  if (isReload) {
+    const cur = Graph.graphData();
+    cur.nodes.forEach(n => {
+      currentPositions[n.id] = { x: n.x, y: n.y, z: n.z };
+    });
+  }
+
   const nodes = raw.nodes.map(n => {
     const layer = n.data.layer || "UTIL";
     const c = LAYER_CENTERS[layer] || LAYER_CENTERS.UTIL;
+    const isNew = knownNodeIds.size > 0 && !knownNodeIds.has(n.data.id);
+
+    // For existing nodes on reload: keep their current simulated position
+    const targetPos = currentPositions[n.data.id] || {
+      x: c.x + (Math.random() - 0.5) * 600,
+      y: c.y + (Math.random() - 0.5) * 600,
+      z: c.z + (Math.random() - 0.5) * 600,
+    };
+
+    // New node: spawn from far corner, will animate to target
+    if (isNew) {
+      console.log("[SYKE] ★ Star birth:", n.data.id);
+      birthAnimations.set(n.data.id, {
+        startTime: Date.now(),
+        spawnPos: { ...SPAWN },
+        targetPos: { ...targetPos },
+        duration: 2500, // 2.5s flight time
+      });
+    }
+
     return {
       id: n.data.id, label: n.data.label, fullPath: n.data.fullPath,
       riskLevel: n.data.riskLevel, dependentCount: n.data.dependentCount,
       lineCount: n.data.lineCount || 0, importsCount: n.data.importsCount || 0,
       depth: n.data.depth || 0, group: n.data.group,
       layer, action: n.data.action || "X", env: n.data.env || "PROD",
-      x: c.x + (Math.random() - 0.5) * 600,
-      y: c.y + (Math.random() - 0.5) * 600,
-      z: c.z + (Math.random() - 0.5) * 600,
+      x: isNew ? SPAWN.x : targetPos.x,
+      y: isNew ? SPAWN.y : targetPos.y,
+      z: isNew ? SPAWN.z : targetPos.z,
+      // Pin new nodes at SPAWN so simulation doesn't skip their animation
+      fx: isNew ? SPAWN.x : undefined,
+      fy: isNew ? SPAWN.y : undefined,
+      fz: isNew ? SPAWN.z : undefined,
+      _isNew: isNew,
     };
   });
+
+  // Update known node IDs
+  knownNodeIds = new Set(nodes.map(n => n.id));
   const links = raw.edges.map(e => ({ source: e.data.source, target: e.data.target }));
   graphData = { nodes, links };
 
@@ -133,6 +177,15 @@ async function loadGraph() {
   const highRisk = nodes.filter(n => n.riskLevel === "HIGH").length;
   document.getElementById("stat-high").textContent = highRisk;
 
+  // ── RELOAD: just update data, no graph re-creation ──
+  if (isReload) {
+    Graph.graphData(graphData);
+    buildLegend(layerCounts);
+    console.log("[SYKE] Graph updated (reload), birth animations:", birthAnimations.size);
+    return;
+  }
+
+  // ── FIRST LOAD: create new Graph instance ──
   const container = document.getElementById("3d-graph");
 
   Graph = ForceGraph3D()(container)
@@ -158,6 +211,14 @@ async function loadGraph() {
         const pulse = 0.5 + 0.5 * Math.sin(Date.now() / 200);
         return base * (1 + pulse * 0.4);
       }
+      // Star birth: start large, shrink to normal
+      const birth = birthAnimations.get(node.id);
+      if (birth) {
+        const t = Math.min(1, (Date.now() - birth.startTime) / birth.duration);
+        if (t >= 1) birthAnimations.delete(node.id);
+        const scale = 1 + (3 - 1) * (1 - t) * (1 - t); // ease-out: 3x → 1x
+        return base * scale;
+      }
       return base;
     })
     .nodeOpacity(1.0)
@@ -220,6 +281,31 @@ async function loadGraph() {
       node.fz = undefined;
     })
 
+    // Star birth: animate pinned position from SPAWN → target on each tick
+    .onEngineTick(() => {
+      if (birthAnimations.size === 0) return;
+      const now = Date.now();
+      for (const [nodeId, anim] of birthAnimations) {
+        const node = graphData.nodes.find(n => n.id === nodeId);
+        if (!node) continue;
+        const t = Math.min(1, (now - anim.startTime) / anim.duration);
+        if (t < 1) {
+          // Ease-out cubic: fast start, gentle landing
+          const ease = 1 - Math.pow(1 - t, 3);
+          node.fx = anim.spawnPos.x + (anim.targetPos.x - anim.spawnPos.x) * ease;
+          node.fy = anim.spawnPos.y + (anim.targetPos.y - anim.spawnPos.y) * ease;
+          node.fz = anim.spawnPos.z + (anim.targetPos.z - anim.spawnPos.z) * ease;
+        } else {
+          // Animation done: unpin, let simulation fine-tune position
+          node.fx = undefined;
+          node.fy = undefined;
+          node.fz = undefined;
+          birthAnimations.delete(nodeId);
+          console.log("[SYKE] ★ Star birth complete:", nodeId);
+        }
+      }
+    })
+
     .d3AlphaDecay(0.008)
     .d3VelocityDecay(0.3)
     .warmupTicks(300)
@@ -377,6 +463,26 @@ function getNodeColor(node) {
     return `rgb(${r},${g},${b})`;
   }
 
+  // Star birth: bright white → cyan → normal layer color
+  const birth = birthAnimations.get(node.id);
+  if (birth) {
+    const t = Math.min(1, (Date.now() - birth.startTime) / birth.duration);
+    const layerHex = LAYER_HEX[node.layer] || "#ff69b4";
+    const lr = parseInt(layerHex.slice(1,3),16);
+    const lg = parseInt(layerHex.slice(3,5),16);
+    const lb = parseInt(layerHex.slice(5,7),16);
+    if (t < 0.3) {
+      // Phase 1: white → cyan flash
+      const p = t / 0.3;
+      return `rgb(${Math.round(255*(1-p))},${255},${255})`;
+    } else {
+      // Phase 2: cyan → normal layer color (smooth blend)
+      const p = (t - 0.3) / 0.7;
+      const ease = p * p; // ease-in for gentle arrival
+      return `rgb(${Math.round(lr*ease)},${Math.round(255+(lg-255)*ease)},${Math.round(255+(lb-255)*ease)})`;
+    }
+  }
+
   // AI is modifying this node → bright pulsing white/orange
   if (modifyingNodes.has(node.id)) {
     const t = Date.now() / 200;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syke1/mcp-server",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "mcpName": "io.github.khalomsky/syke",
   "description": "AI code impact analysis MCP server — dependency graphs, cascade detection, and a mandatory build gate for AI coding agents",
   "main": "dist/index.js",