@plumpslabs/kuma 2.3.19 → 2.3.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumpslabs/kuma",
-  "version": "2.3.19",
+  "version": "2.3.22",
   "description": "Safety-first context & orchestration engine for AI coding agents. MCP server with mandatory research pipeline, knowledge graph, impact analysis, decision memory, and safety guard — works with any MCP client.",
   "type": "module",
   "main": "dist/index.js",
@@ -63,7 +63,7 @@
   "homepage": "https://github.com/plumpslabs/kuma#readme",
   "license": "MIT",
   "scripts": {
-    "build": "tsup src/index.ts --format esm --clean --out-dir dist",
+    "build": "tsup src/index.ts --format esm --no-splitting --clean --out-dir dist",
     "build:studio": "cd packages/ide/studio && tsup src/index.ts --format esm --clean --out-dir dist",
     "build:all": "pnpm run build && pnpm run build:studio",
     "dev": "tsup src/index.ts --format esm --watch --out-dir dist",

package/packages/ide/studio/dist/index.js

@@ -38,7 +38,17 @@ function query(sql) {
 function queryJson(sql) {
   const raw = query(sql);
   if (!raw) return [];
-  return JSON.parse(raw);
+  try {
+    return JSON.parse(raw);
+  } catch {
+    try {
+      const sanitized = raw.replace(/[\r\n]+/g, " ");
+      return JSON.parse(sanitized);
+    } catch (e) {
+      console.warn("[Studio DB] queryJson parse failed:", e);
+      return [];
+    }
+  }
 }
 function getDashboardData() {
   return {
@@ -53,31 +63,38 @@ function getDashboardData() {
       )
     `),
     nodes: queryJson(
-      `SELECT json_group_array(json_object('id',id,'name',name,'type',type,'file_path',file_path)) FROM nodes ORDER BY created_at DESC`
+      `SELECT json_group_array(json_object('id',id,'name',name,'type',type,'file_path',file_path)) FROM nodes ORDER BY updated_at DESC`
     ),
     edges: queryJson(
       `SELECT json_group_array(json_object('source',source_id,'target',target_id,'relation',type)) FROM edges`
     ),
     gotchas: queryJson(
-      `SELECT json_group_array(json_object('id',id,'file_path',file_path,'description',description,'severity',severity,'workaround',workaround)) FROM known_gotchas ORDER BY severity DESC`
+      `SELECT json_group_array(json_object('id',id,'file_path',file_path,'description',REPLACE(REPLACE(description,char(10),' '),char(13),''),'severity',severity,'workaround',REPLACE(REPLACE(COALESCE(workaround,''),char(10),' '),char(13),''))) FROM known_gotchas ORDER BY severity DESC`
     ),
     trajectories: queryJson(
-      `SELECT json_group_array(json_object('id',id,'goal',goal,'total_duration_ms',total_duration_ms,'success_rate',success_rate,'created_at',created_at)) FROM trajectories ORDER BY created_at DESC LIMIT 20`
+      `SELECT json_group_array(json_object('id',id,'goal',REPLACE(REPLACE(goal,char(10),' '),char(13),''),'total_duration_ms',total_duration_ms,'success_rate',success_rate,'created_at',created_at)) FROM trajectories ORDER BY created_at DESC LIMIT 20`
     ),
     health: queryJson(
-      `SELECT json_group_array(json_object('score',score,'summary',summary,'risk_level',risk_level,'created_at',created_at)) FROM health_snapshots ORDER BY created_at DESC LIMIT 10`
+      `SELECT json_group_array(json_object('score',score,'summary',REPLACE(REPLACE(COALESCE(summary,''),char(10),' '),char(13),''),'risk_level',risk_level,'created_at',created_at)) FROM health_snapshots ORDER BY created_at DESC LIMIT 10`
     )
   };
 }
 
 // src/api.ts
+import fs from "fs";
 var api = new Hono();
 api.use("/*", cors());
 api.get("/status", (c) => {
   const dbPath = findKumaDb();
+  let dbSize = "0 KB";
+  if (dbPath && fs.existsSync(dbPath)) {
+    const bytes = fs.statSync(dbPath).size;
+    dbSize = bytes > 1024 * 1024 ? (bytes / (1024 * 1024)).toFixed(2) + " MB" : (bytes / 1024).toFixed(1) + " KB";
+  }
   return c.json({
     ok: !!dbPath,
     dbPath,
+    dbSize,
     project: dbPath ? dbPath.replace("/.kuma/kuma.db", "").split("/").pop() : null
   });
 });
@@ -89,6 +106,21 @@ api.get("/dashboard", (c) => {
     return c.json({ error: e.message }, 500);
   }
 });
+api.post("/reset-db", (c) => {
+  try {
+    const dbPath = findKumaDb();
+    if (dbPath && fs.existsSync(dbPath)) {
+      fs.unlinkSync(dbPath);
+    }
+    return c.json({ ok: true, message: "Kuma DB reset successfully" });
+  } catch (e) {
+    return c.json({ error: e.message }, 500);
+  }
+});
+api.post("/stop-server", (c) => {
+  setTimeout(() => process.exit(0), 500);
+  return c.json({ ok: true, message: "Kuma Studio server shutting down" });
+});
 var api_default = api;
 
 // src/index.ts

package/packages/ide/studio/public/index.html

@@ -71,19 +71,20 @@ header .status .dot.off { background: var(--red); }
 .health-item .meta { font-size: 11px; color: var(--muted); }
 .empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }
 #legend {
-  position: absolute; bottom: 16px; left: 16px; background: rgba(22,33,62,0.92);
+  position: absolute; bottom: 16px; left: 16px; background: rgba(22,33,62,0.95);
   border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
   font-size: 11px; z-index: 10; max-height: 200px; overflow-y: auto;
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px); color: #f8fafc;
 }
-#legend .title { font-weight: 600; margin-bottom: 6px; color: var(--muted); }
-.legend-item { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
+#legend .title { font-weight: 600; margin-bottom: 6px; color: #94a3b8; }
+.legend-item { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: #f1f5f9; }
 .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
 #graph-tooltip {
-  position: absolute; display: none; background: rgba(22,33,62,0.95);
+  position: absolute; display: none; background: rgba(15, 23, 42, 0.96);
   border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
-  font-size: 12px; z-index: 20; max-width: 320px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5); backdrop-filter: blur(8px);
+  font-size: 12px; z-index: 20; max-width: 420px; word-break: break-all;
+  overflow-wrap: anywhere; white-space: normal; color: #f8fafc;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6); backdrop-filter: blur(12px);
   pointer-events: none;
 }
 #search-box {
@@ -108,6 +109,12 @@ header .status .dot.off { background: var(--red); }
   transition: background 0.2s;
 }
 #graph-controls button:hover { background: var(--accent); border-color: var(--accent); }
+#graph-controls button.active {
+  background: var(--accent) !important;
+  border-color: var(--accent) !important;
+  color: #ffffff !important;
+  box-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
+}
 #loading {
   position: fixed; inset: 0; background: var(--bg); display: flex;
   align-items: center; justify-content: center; z-index: 100;
@@ -125,7 +132,11 @@ header .status .dot.off { background: var(--red); }
 <header>
   <h1>&#9826; Kuma Studio</h1>
   <div class="status"><span class="dot" id="status-dot"></span><span id="status-text">connecting...</span></div>
-  <button onclick="refetch()" id="refetch-btn" style="margin-left:auto;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);border-radius:6px;color:var(--accent);padding:5px 12px;font-size:11px;cursor:pointer;transition:all 0.2s;-webkit-app-region:no-drag" onmouseover="this.style.background='rgba(124,58,237,0.3)'" onmouseout="this.style.background='rgba(124,58,237,0.15)'">&#8635; Refetch</button>
+  <div style="margin-left:auto;display:flex;gap:8px;-webkit-app-region:no-drag">
+    <button onclick="refetch()" id="refetch-btn" style="background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);border-radius:6px;color:var(--accent);padding:5px 12px;font-size:11px;cursor:pointer;transition:all 0.2s">&#8635; Refetch</button>
+    <button onclick="resetKumaDb()" style="background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);border-radius:6px;color:var(--red);padding:5px 12px;font-size:11px;cursor:pointer;transition:all 0.2s">&#128465; Reset DB</button>
+    <button onclick="stopKumaStudio()" style="background:rgba(148,163,184,0.15);border:1px solid rgba(148,163,184,0.3);border-radius:6px;color:#94a3b8;padding:5px 12px;font-size:11px;cursor:pointer;transition:all 0.2s">&#9632; Stop Server</button>
+  </div>
 </header>
 <div class="stats-bar" id="stats-bar"></div>
 <div id="main">
@@ -133,9 +144,11 @@ header .status .dot.off { background: var(--red); }
     <div id="graph-container"></div>
     <div id="search-box"><input id="node-search" type="text" placeholder="Search nodes..." /></div>
     <div id="graph-controls">
-      <button onclick="if(network)network.fit()">Fit</button>
-      <button onclick="if(network)network.startSimulation()">Restart</button>
-      <button onclick="if(network)network.stopSimulation()">Stop</button>
+      <button onclick="resetGraphFocus()" title="Reset node opacity and search">Reset Focus</button>
+      <button onclick="if(network)network.fit()" title="Fit graph to viewport">Fit</button>
+      <button onclick="exportGraphPNG()" title="Export graph as PNG image">Export PNG</button>
+      <button id="btn-unfreeze-physics" class="active" onclick="restartPhysics()" title="Enable physics simulation (nodes will move freely)">Unfreeze Physics</button>
+      <button id="btn-freeze-physics" onclick="stopPhysics()" title="Freeze physics simulation (lock nodes in place)">Freeze Physics</button>
     </div>
     <div id="graph-tooltip"></div>
     <div id="legend"></div>
@@ -152,7 +165,74 @@ header .status .dot.off { background: var(--red); }
 
 <script>
 const API = "/api";
-let network = null, nodesData = null, allNodes = null, allEdges = null;
+let network = null, nodesData = null, allNodes = null, allEdges = null, currentDbSize = "0 KB";
+
+async function resetKumaDb() {
+  var confirmation = prompt("⚠️ CRITICAL ACTION: TYPE 'DELETE' TO CONFIRM RESETTING KUMA DB\nThis will permanently wipe all recorded knowledge nodes, edges, gotchas, and trajectories in .kuma/kuma.db:");
+  if (confirmation !== "DELETE") {
+    if (confirmation !== null) alert("Reset cancelled. Confirmation text did not match 'DELETE'.");
+    return;
+  }
+  try {
+    var res = await fetch(API + "/reset-db", { method: "POST" }).then(function(r){return r.json()});
+    if (res.ok) {
+      alert("Kuma DB reset successfully.");
+      refetch();
+    }
+  } catch (e) {
+    alert("Reset failed: " + e.message);
+  }
+}
+
+async function stopKumaStudio() {
+  if (!confirm("Stop Kuma Studio background server? You can restart it anytime with 'agy kuma studio'.")) return;
+  try {
+    await fetch(API + "/stop-server", { method: "POST" });
+    document.body.innerHTML = '<div style="display:flex;height:100vh;align-items:center;justify-content:center;color:#94a3b8;font-size:16px;">Kuma Studio Server Stopped. You can close this tab.</div>';
+  } catch (e) {
+    alert("Stop failed: " + e.message);
+  }
+}
+
+function resetGraphFocus() {
+  if (!network) return;
+  network.body.data.nodes.forEach(function(n) {
+    network.body.data.nodes.update({
+      id: n.id,
+      opacity: 1.0,
+      font: { color: '#ffffff', bold: true }
+    });
+  });
+  document.getElementById("graph-tooltip").style.display = 'none';
+  var searchInput = document.getElementById("node-search");
+  if (searchInput) searchInput.value = "";
+}
+
+function exportGraphPNG() {
+  if (!network) return;
+  var canvas = document.querySelector("#graph-container canvas");
+  if (!canvas) return;
+  var link = document.createElement("a");
+  link.download = "kuma-knowledge-graph.png";
+  link.href = canvas.toDataURL("image/png");
+  link.click();
+}
+
+function restartPhysics() {
+  if (!network) return;
+  network.setOptions({ physics: { enabled: true } });
+  network.startSimulation();
+  document.getElementById('btn-unfreeze-physics').classList.add('active');
+  document.getElementById('btn-freeze-physics').classList.remove('active');
+}
+
+function stopPhysics() {
+  if (!network) return;
+  network.stopSimulation();
+  network.setOptions({ physics: { enabled: false } });
+  document.getElementById('btn-freeze-physics').classList.add('active');
+  document.getElementById('btn-unfreeze-physics').classList.remove('active');
+}
 
 async function init() {
   var status = await fetch(API+"/status").then(function(r){return r.json()});
@@ -161,6 +241,7 @@ async function init() {
   if (status.ok) {
     dot.className = "dot on";
     txt.textContent = status.project || "connected";
+    currentDbSize = status.dbSize || "0 KB";
   } else {
     dot.className = "dot off";
     txt.textContent = "no kuma.db found";
@@ -191,6 +272,7 @@ function renderStats(data) {
     '<div class="stat"><span class="num">'+(s.edge_count||0)+'</span><span class="lbl">edges</span></div>'+
     '<div class="stat"><span class="num">'+(s.gotcha_count||0)+'</span><span class="lbl">gotchas</span></div>'+
     '<div class="stat"><span class="num">'+(s.trajectory_count||0)+'</span><span class="lbl">trajectories</span></div>'+
+    '<div class="stat"><span class="num" style="color:var(--accent)">'+currentDbSize+'</span><span class="lbl">kuma.db</span></div>'+
     '<div class="stat"><span class="num" style="color:'+hcColor+'">'+(hc||0)+'</span><span class="lbl">health</span></div>';
 }
 
@@ -203,16 +285,21 @@ function truncateLabel(name, maxLen) {
 
 /** Calculate node size based on label length and type */
 function calcNodeSize(name, type) {
-  var base = 14;
+  var isGotcha = name && name.toLowerCase().indexOf("gotcha:") === 0;
+  if (isGotcha) return 14;
+  if (type === "variable") return 14;
+  var base = 18;
+  if (type === "feature_domain") base = 30;
+  if (type === "workflow") base = 24;
+  if (type === "cross_service_link") base = 20;
   if (type === "function") base = 16;
-  if (type === "class") base = 18;
-  if (type === "module") base = 12;
-  if (type === "component") base = 16;
-  if (type === "route") base = 14;
-  if (type === "test") base = 13;
-  // Gentle scaling for long labels
-  var len = name ? Math.min(name.length, 20) : 4;
-  return Math.min(28, Math.max(base, base + len * 0.4));
+  if (type === "class") base = 20;
+  if (type === "module") base = 22;
+  if (type === "component") base = 20;
+  if (type === "route") base = 16;
+  if (type === "test") base = 18;
+  var len = name ? Math.min(name.length, 25) : 4;
+  return Math.min(34, Math.max(base, base + len * 0.4));
 }
 
 
@@ -225,10 +312,32 @@ function renderGraph(data) {
   }
 
   var types = [...new Set(allNodes.map(function(n){return n.type||'unknown'}))];
-  var colors = {function:'#7c3aed',class:'#06b6d4',module:'#22c55e',
-    component:'#f97316',file:'#eab308',route:'#ec4899',test:'#14b8a6'};
-  var shapes = {function:'box',class:'hexagon',module:'ellipse',
-    component:'diamond',file:'square',route:'triangle',test:'star'};
+  var colors = {
+    feature_domain: '#dc2626',
+    workflow: '#2563eb',
+    cross_service_link: '#059669',
+    function: '#7c3aed',
+    class: '#0891b2',
+    module: '#16a34a',
+    component: '#ea580c',
+    file: '#d97706',
+    route: '#db2777',
+    test: '#0d9488',
+    variable: '#6366f1'
+  };
+  var shapes = {
+    feature_domain: 'star',
+    workflow: 'ellipse',
+    cross_service_link: 'box',
+    function: 'box',
+    class: 'hexagon',
+    module: 'ellipse',
+    component: 'diamond',
+    file: 'box',
+    route: 'triangleDown',
+    test: 'star',
+    variable: 'box'
+  };
 
   // Limit nodes for performance if > 200
   var maxNodes = 300;
@@ -239,16 +348,27 @@ function renderGraph(data) {
   }
 
   var visNodes = new vis.DataSet(displayNodes.map(function(n){
-    var label = truncateLabel(n.name, 28);
-    var size = calcNodeSize(n.name, n.type);
-    var color = colors[n.type] || '#888';
+    var isGotcha = n.name && n.name.toLowerCase().indexOf("gotcha:") === 0;
+    var isVariable = n.type === 'variable' && !isGotcha;
+    var shape = isGotcha ? 'triangle' : (shapes[n.type] || 'dot');
+    var maxLen = isGotcha ? 20 : (shape === 'ellipse' ? 18 : (isVariable ? 16 : 32));
+    var label = truncateLabel(n.name, maxLen);
+    var size = isGotcha ? 12 : (isVariable ? 10 : calcNodeSize(n.name, n.type));
+    var color = isGotcha ? '#f97316' : (colors[n.type] || '#64748b');
     return {
       id: n.id,
       label: label,
-      title: '<b>' + n.name + '</b> <span style="color:#888">' + n.type + '</span>' + (n.file_path ? '<br><span style="color:#06b6d4;font-size:11px">' + n.file_path + '</span>' : ''),
-      color: { background: color, border: color, highlight: { background: color, border: '#fff' } },
-      shape: shapes[n.type] || 'dot',
-      font: { color: '#e0e0e0', size: Math.min(14, Math.max(10, size * 0.5)), face: 'monospace' },
+
+      color: {
+        background: color,
+        border: color,
+        highlight: { background: color, border: '#38bdf8' },
+        hover: { background: color, border: '#a855f7' }
+      },
+      shape: shape,
+      font: isVariable
+        ? { color: '#ffffff', size: 10, face: 'sans-serif', multi: false, bold: true }
+        : { color: '#ffffff', size: Math.min(13, Math.max(10, size * 0.55)), face: 'sans-serif', multi: false, bold: true },
       borderWidth: 0,
       size: size,
       mass: 1 + (size / 40),
@@ -256,21 +376,63 @@ function renderGraph(data) {
   }));
 
   var nodeIds = new Set(displayNodes.map(function(n){return n.id}));
-  var displayEdges = allEdges.filter(function(e){
+  var edgeList = allEdges.slice();
+
+  // Auto-connect floating file nodes to matching cross_service_link flow nodes
+  var nameToLinkIds = {};
+  displayNodes.forEach(function(n) {
+    if (n.type === 'cross_service_link') {
+      var cleanName = n.name.toLowerCase().trim();
+      if (!nameToLinkIds[cleanName]) nameToLinkIds[cleanName] = [];
+      nameToLinkIds[cleanName].push(n.id);
+    }
+  });
+
+  displayNodes.forEach(function(n) {
+    if (n.type === 'file' || n.type === 'component' || n.type === 'function') {
+      var fn = n.name.toLowerCase().trim();
+      Object.keys(nameToLinkIds).forEach(function(linkName) {
+        if (fn.includes(linkName) || linkName.includes(fn)) {
+          var targetLinkIds = nameToLinkIds[linkName];
+          targetLinkIds.forEach(function(linkId) {
+            edgeList.push({
+              source: n.id,
+              target: linkId,
+              relation: 'contains'
+            });
+          });
+        }
+      });
+    }
+  });
+
+  var displayEdges = edgeList.filter(function(e){
     return nodeIds.has(e.source) && nodeIds.has(e.target);
   }).slice(0, 500);
 
-  var visEdges = new vis.DataSet(displayEdges.map(function(e){
+  var edgeDefaults = {};
+  var visEdges = new vis.DataSet(displayEdges.map(function(e, idx){
+    var edgeColor = '#64748b';
+    var width = 1.5;
+    var dashes = false;
+    if (e.relation === 'flows_through') { edgeColor = '#3b82f6'; width = 2.5; }
+    if (e.relation === 'triggers') { edgeColor = '#ef4444'; width = 2; dashes = true; }
+    if (e.relation === 'syncs_with') { edgeColor = '#10b981'; width = 2; }
+    if (e.relation === 'contains') { edgeColor = '#64748b'; width = 1.5; dashes = true; }
+
+    edgeDefaults['e'+idx] = { color: edgeColor, width: width };
     return {
+      id: 'e'+idx,
       from: e.source, to: e.target,
       label: e.relation || '',
-      arrows: { to: { enabled: true, scaleFactor: 0.6, type: 'arrow' } },
-      color: { color: '#4a4a6a', highlight: '#7c3aed', hover: '#7c3aed', opacity: 0.5 },
-      font: { size: 10, color: '#666', strokeWidth: 0, background: 'transparent' },
+      arrows: { to: { enabled: true, scaleFactor: 0.7, type: 'arrow' } },
+      color: { color: edgeColor, highlight: '#a855f7', hover: '#38bdf8', opacity: 0.85 },
+      font: { size: 10, color: '#94a3b8', strokeWidth: 0, background: 'transparent' },
+      dashes: dashes,
       smooth: { type: 'continuous', roundness: 0.3 },
-      width: 1.5,
-      hoverWidth: 2.5,
-      selectionWidth: 2.5,
+      width: width,
+      hoverWidth: 3,
+      selectionWidth: 3,
     };
   }));
 
@@ -303,9 +465,10 @@ function renderGraph(data) {
     },
     nodes: {
       borderWidth: 0,
-      font: { color: '#e0e0e0', size: 12, face: 'monospace' },
-      margin: { top: 4, bottom: 4, left: 6, right: 6 },
-      shadow: { enabled: true, color: 'rgba(124,58,237,0.15)', size: 6, x: 0, y: 2 },
+      font: { color: '#ffffff', size: 13, face: 'sans-serif', bold: 'true' },
+      margin: { top: 10, bottom: 10, left: 16, right: 16 },
+      shapeProperties: { borderRadius: 8 },
+      shadow: { enabled: true, color: 'rgba(0,0,0,0.4)', size: 8, x: 0, y: 3 },
     },
     edges: {
       smooth: { type: 'continuous', roundness: 0.3 },
@@ -315,32 +478,72 @@ function renderGraph(data) {
     configure: { enabled: false },
   });
 
-  // Click node → show tooltip with file path
+  // Click node → highlight connected neighborhood (tooltip via hover only)
   network.on('click', function(params) {
-    var tip = document.getElementById("graph-tooltip");
     if (params.nodes.length) {
-      var n = allNodes.find(function(x){return x.id===params.nodes[0]});
-      if (n) {
-        tip.style.display = 'block';
-        tip.innerHTML = '<b>' + n.name + '</b> <span style="color:var(--muted)">' + n.type + '</span>' +
-          (n.file_path ? '<br><span style="color:var(--accent2);font-size:11px;word-break:break-all">' + n.file_path + '</span>' : '');
-        // Position tooltip near the clicked node
-        var pos = network.getPositions([n.id]);
-        if (pos && pos[n.id]) {
-          var canvasPos = network.canvasToDOM(pos[n.id]);
-          var panelRect = container.getBoundingClientRect();
-          var tipX = Math.min(canvasPos.x + 12, panelRect.width - 340);
-          var tipY = Math.max(canvasPos.y - 10, 0);
-          tip.style.left = Math.max(tipX, 8) + 'px';
-          tip.style.top = tipY + 'px';
-        }
-      }
+      var selectedId = params.nodes[0];
+      var connectedNodeIds = new Set(network.getConnectedNodes(selectedId));
+      connectedNodeIds.add(selectedId);
+
+      network.body.data.nodes.forEach(function(n) {
+        var isConnected = connectedNodeIds.has(n.id);
+        network.body.data.nodes.update({
+          id: n.id,
+          opacity: isConnected ? 1.0 : 0.12,
+          font: {
+            color: isConnected ? '#ffffff' : 'rgba(255,255,255,0.07)',
+            bold: isConnected
+          }
+        });
+      });
+
+      network.body.data.edges.forEach(function(e) {
+        var def = edgeDefaults[e.id];
+        var isConnected = connectedNodeIds.has(e.from) && connectedNodeIds.has(e.to);
+        network.body.data.edges.update({
+          id: e.id,
+          color: {
+            color: isConnected ? (def ? def.color : '#64748b') : 'rgba(100,116,139,0.05)',
+            highlight: '#a855f7',
+            hover: '#38bdf8',
+            opacity: isConnected ? 0.85 : 0.05
+          },
+          width: isConnected ? (def ? def.width : 1.5) : 0.3,
+          font: {
+            color: isConnected ? '#94a3b8' : 'rgba(148,163,184,0.1)',
+            size: 10,
+            strokeWidth: 0,
+            background: 'transparent'
+          }
+        });
+      });
     } else {
-      tip.style.display = 'none';
+      document.getElementById("graph-tooltip").style.display = 'none';
+      network.body.data.nodes.forEach(function(n) {
+        network.body.data.nodes.update({
+          id: n.id,
+          opacity: 1.0,
+          font: { color: '#ffffff', bold: true }
+        });
+      });
+      network.body.data.edges.forEach(function(e) {
+        var def = edgeDefaults[e.id];
+        network.body.data.edges.update({
+          id: e.id,
+          color: {
+            color: def ? def.color : '#64748b',
+            highlight: '#a855f7',
+            hover: '#38bdf8',
+            opacity: 0.85
+          },
+          width: def ? def.width : 1.5,
+          font: { size: 10, color: '#94a3b8', strokeWidth: 0, background: 'transparent' }
+        });
+      });
     }
   });
 
-  // Hover highlight
+  // Hover node → show tooltip + border highlight
   network.on('hoverNode', function(params) {
     var nodeId = params.node;
     network.body.data.nodes.updateOnly({
@@ -348,6 +551,23 @@ function renderGraph(data) {
       borderWidth: 2,
       borderWidthSelected: 2,
     });
+
+    var n = allNodes.find(function(x){return x.id===nodeId});
+    if (n) {
+      var tip = document.getElementById("graph-tooltip");
+      tip.style.display = 'block';
+      tip.innerHTML = '<div style="word-break:break-all;overflow-wrap:anywhere;max-width:390px;white-space:normal;line-height:1.4"><b style="color:#f8fafc">' + n.name + '</b> <span style="color:#94a3b8">' + n.type + '</span>' +
+        (n.file_path ? '<br><span style="color:#38bdf8;font-size:11px;word-break:break-all;overflow-wrap:anywhere">' + n.file_path + '</span>' : '') + '</div>';
+      var pos = network.getPositions([n.id]);
+      if (pos && pos[n.id]) {
+        var canvasPos = network.canvasToDOM(pos[n.id]);
+        var panelRect = container.getBoundingClientRect();
+        var tipX = Math.min(canvasPos.x + 12, panelRect.width - 340);
+        var tipY = Math.max(canvasPos.y - 10, 0);
+        tip.style.left = Math.max(tipX, 8) + 'px';
+        tip.style.top = tipY + 'px';
+      }
+    }
   });
   network.on('blurNode', function(params) {
     network.body.data.nodes.updateOnly({
@@ -355,6 +575,7 @@ function renderGraph(data) {
       borderWidth: 0,
       borderWidthSelected: 0,
     });
+    document.getElementById("graph-tooltip").style.display = 'none';
   });
 
   renderLegend(types, colors);