infernoflow 0.32.7 → 0.32.9

package/dist/lib/commands/graph.mjs

@@ -1,337 +1,220 @@
-/**
- * infernoflow graph
- *
- * Builds a capability dependency graph from scan.json.
- * Shows which capabilities call which — so changing one reveals its downstream impact.
- *
- * Usage:
- *   infernoflow graph                   Print full dependency tree
- *   infernoflow graph --cap auth-login  Show deps for one capability (up + down)
- *   infernoflow graph --json            Machine-readable graph.json to stdout
- *   infernoflow graph --check           Warn if frozen/stable caps have new dependents
- */
-
-import * as fs   from "node:fs";
-import * as path from "node:path";
-import { bold, cyan, gray, green, yellow, red } from "../ui/output.mjs";
-
-// ── helpers ───────────────────────────────────────────────────────────────────
-
-function loadJson(p) {
-  try { return JSON.parse(fs.readFileSync(p, "utf8")); }
-  catch { return null; }
-}
-
-function getLevel(cap) {
-  return cap?.stability || "experimental";
-}
-
-const LEVEL_ICON = { frozen: "🧊", stable: "〰️ ", experimental: "🌊" };
-const LEVEL_COLOR = { frozen: red, stable: yellow, experimental: green };
-
-// ── graph builder ─────────────────────────────────────────────────────────────
-
-/**
- * Build edges: capA → capB if any function in capA calls a function in capB.
- *
- * Strategy:
- *   1. Build a function-name → capId index from scan data
- *   2. For each cap, check its calls[] against the index
- *   3. If a call matches a function in another cap → edge
- */
-function buildGraph(scanCaps, allCaps) {
-  // capId → { id, name, stability, functions[], calls[], services[], dbCalls[], httpCalls[] }
-  const nodes = {};
-  // capId → Set<capId>  (edges: this cap calls that cap)
-  const edges = {};
-  // capId → Set<capId>  (reverse: this cap is called by those caps)
-  const reverse = {};
-
-  // Build function → capId index
-  const funcIndex = {}; // functionName → capId
-  for (const entry of scanCaps) {
-    const capFull = allCaps.find(c => c.id === entry.id) || {};
-    nodes[entry.id] = {
-      id:        entry.id,
-      name:      entry.name || capFull.name || capFull.title || entry.id,
-      stability: capFull.stability || "experimental",
-      functions: entry.codeAnalysis?.functions  || [],
-      calls:     entry.codeAnalysis?.calls      || [],
-      services:  entry.codeAnalysis?.services   || [],
-      dbCalls:   entry.codeAnalysis?.dbCalls    || [],
-      httpCalls: entry.codeAnalysis?.httpCalls  || [],
-    };
-    edges[entry.id]   = new Set();
-    reverse[entry.id] = new Set();
-
-    for (const fn of (entry.codeAnalysis?.functions || [])) {
-      const bare = fn.replace(/\(\)$/, "");
-      funcIndex[bare] = entry.id;
-      funcIndex[bare.toLowerCase()] = entry.id;
-    }
-  }
-
-  // Build edges from calls[]
-  for (const [capId, node] of Object.entries(nodes)) {
-    for (const call of node.calls) {
-      const bare   = call.replace(/\(\)$/, "");
-      const target = funcIndex[bare] || funcIndex[bare.toLowerCase()];
-      if (target && target !== capId) {
-        edges[capId].add(target);
-        reverse[target].add(capId);
+import*as E from"node:fs";import*as x from"node:path";import{bold as u,cyan as z,gray as c,green as A,yellow as $,red as k}from"../ui/output.mjs";function S(t){try{return JSON.parse(E.readFileSync(t,"utf8"))}catch{return null}}function B(t){return t?.stability||"experimental"}const w={frozen:"\u{1F9CA}",stable:"\u3030\uFE0F ",experimental:"\u{1F30A}"},C={frozen:k,stable:$,experimental:A};function T(t,i){const l={},a={},d={},n=new Map;for(const e of t){const r=i.find(o=>o.id===e.id)||{};l[e.id]={id:e.id,name:e.name||r.name||r.title||e.id,stability:r.stability||"experimental",functions:e.codeAnalysis?.functions||[],calls:e.codeAnalysis?.calls||[],services:e.codeAnalysis?.services||[],dbCalls:e.codeAnalysis?.dbCalls||[],httpCalls:e.codeAnalysis?.httpCalls||[]},a[e.id]=new Set,d[e.id]=new Set;for(const o of e.codeAnalysis?.functions||[]){const s=o.replace(/\(\)$/,"");n.set(s,e.id),n.set(s.toLowerCase(),e.id)}}for(const[e,r]of Object.entries(l))for(const o of r.calls){const s=o.replace(/\(\)$/,""),g=n.get(s)||n.get(s.toLowerCase());g&&g!==e&&(a[e].add(g),d[g].add(e))}const f={},p={};for(const e of Object.keys(l))f[e]=[...a[e]],p[e]=[...d[e]];return{nodes:l,edges:f,reverse:p}}function O(t){const{nodes:i,edges:l,reverse:a}=t,d=Object.keys(i).sort();console.log(),console.log(u("  Capability Dependency Graph")),console.log(c("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500")),console.log();let n=!1;for(const p of d){const e=i[p],r=l[p]||[],o=a[p]||[],s=w[e.stability]||"\u{1F30A}",g=C[e.stability]||A;if(!(r.length===0&&o.length===0)){if(n=!0,console.log(`  ${s} ${u(g(p))}`),r.length>0){console.log(c("    calls \u2192"));for(const h of r){const y=i[h],j=w[y?.stability]||"\u{1F30A}";console.log(c(`       ${j} ${h}`))}}if(o.length>0){console.log(c("    called by \u2190"));for(const h of o){const y=w[i[h]?.stability]||"\u{1F30A}";console.log(c(`       ${y} ${h}`))}}console.log()}}n||(console.log(c("  No inter-capability dependencies detected.")),console.log(c("  Run `infernoflow scan` first to populate call data.")),console.log());const f=Object.values(t.edges).reduce((p,e)=>p+e.length,0);console.log(c("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500")),console.log(c(`  ${d.length} capabilities \xB7 ${f} dependency edge(s)`)),console.log()}function W(t,i){const{nodes:l,edges:a,reverse:d}=i,n=l[t];n||(console.error(k(`\u2717 Capability "${t}" not found in graph.`)),process.exit(1));const f=w[n.stability]||"\u{1F30A}",p=C[n.stability]||A;console.log(),console.log(u(`  ${f} ${p(t)}`)+c(`  (${n.stability})`)),n.services?.length&&console.log(c("  external: ")+z(n.services.join(", "))),console.log();const e=a[t]||[],r=d[t]||[];if(e.length>0){console.log(u("  Calls (downstream dependencies):"));for(const o of e){const s=l[o],g=C[s?.stability]||A,h=w[s?.stability]||"\u{1F30A}";console.log(`    ${h} ${g(o)}`+c(s?.services?.length?`  [${s.services.join(", ")}]`:""))}console.log()}else console.log(c("  No downstream dependencies.")),console.log();if(r.length>0){console.log(u("  Called by (upstream dependents):"));for(const o of r){const s=l[o],g=C[s?.stability]||A,h=w[s?.stability]||"\u{1F30A}";console.log(`    ${h} ${g(o)}`)}console.log()}else console.log(c("  No capabilities call this one.")),console.log();if((n.stability==="frozen"||n.stability==="stable")&&r.length>0){const o=n.stability==="frozen"?k:$;console.log(o(`  \u26A0  This capability is ${n.stability}. Changing it may break:`));for(const s of r)console.log(o(`     \u2022 ${s}`));console.log()}}function H(t,i){const l=[];if(!t||!i)return l;for(const[a,d]of Object.entries(i.nodes)){if(d.stability==="experimental")continue;const n=new Set(t.reverse?.[a]||[]),p=[...new Set(i.reverse[a]||[])].filter(e=>!n.has(e));if(p.length>0&&l.push({type:"new-dependents",capId:a,stability:d.stability,detail:`${p.join(", ")} now depend on this`}),d.stability==="frozen"){const e=new Set(t.edges?.[a]||[]),r=new Set(i.edges[a]||[]),o=[...r].filter(g=>!e.has(g)),s=[...e].filter(g=>!r.has(g));(o.length>0||s.length>0)&&l.push({type:"frozen-internals-changed",capId:a,stability:d.stability,detail:[o.length?`added calls: ${o.join(", ")}`:"",s.length?`removed calls: ${s.join(", ")}`:""].filter(Boolean).join("; ")})}}return l}function M(t){const i=t.nodes||{},l=t.deps||{},a=Object.keys(i),d=[];for(const[f,p]of Object.entries(l))for(const e of p)d.push({from:f,to:e});return`<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>infernoflow \u2014 Capability Graph</title>
+<style>
+  *{box-sizing:border-box;margin:0;padding:0}
+  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0f1117;color:#e2e8f0;height:100vh;display:flex;flex-direction:column}
+  header{padding:14px 20px;border-bottom:1px solid #1e2535;display:flex;align-items:center;gap:12px;background:#0b0e18}
+  header h1{font-size:14px;font-weight:700;color:#f1f5f9;letter-spacing:.02em}
+  header span{font-size:12px;color:#64748b}
+  #stats{margin-left:auto;font-size:11px;color:#475569}
+  #canvas{flex:1;position:relative;overflow:hidden}
+  svg{width:100%;height:100%}
+  .node{cursor:pointer}
+  .node rect{rx:8;ry:8;transition:filter .15s}
+  .node rect:hover{filter:brightness(1.2)}
+  .node text{font-size:11px;font-weight:600;pointer-events:none;text-anchor:middle;dominant-baseline:middle}
+  .edge{fill:none;stroke:#334155;stroke-width:1.5;transition:stroke .15s,stroke-width .15s}
+  .edge.active{stroke:#f97316;stroke-width:2.5}
+  .edge.dim{stroke:#1e2535;stroke-width:1}
+  .tooltip{position:absolute;background:#1e2535;border:1px solid #334155;border-radius:10px;padding:12px 16px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:220px;color:#e2e8f0;z-index:10}
+  .tooltip strong{display:block;margin-bottom:6px;font-size:13px;color:#f1f5f9}
+  .tag{display:inline-block;background:#0f1117;border:1px solid #334155;border-radius:4px;padding:2px 7px;margin:2px 2px 2px 0;font-size:10px;color:#94a3b8}
+  .tag.calls{border-color:#6366f1;color:#a5b4fc}
+  .tag.callers{border-color:#10b981;color:#6ee7b7}
+  #legend{position:absolute;bottom:16px;left:20px;display:flex;gap:14px;font-size:11px;color:#64748b}
+  .ldot{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}
+</style>
+</head>
+<body>
+<header>
+  <span style="font-size:18px">\u{1F525}</span>
+  <h1>infernoflow \u2014 Capability Graph</h1>
+  <span id="project-name"></span>
+  <span id="stats"></span>
+</header>
+<div id="canvas">
+  <svg id="svg">
+    <defs>
+      <marker id="arr" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L8,3 z" fill="#334155"/></marker>
+      <marker id="arr-hi" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L8,3 z" fill="#f97316"/></marker>
+    </defs>
+  </svg>
+  <div class="tooltip" id="tip"></div>
+  <div id="legend">
+    <span><span class="ldot" style="background:#6366f180;border:2px solid #6366f1"></span>Has dependencies</span>
+    <span><span class="ldot" style="background:#10b98180;border:2px solid #10b981"></span>View layer</span>
+    <span><span class="ldot" style="background:#33415580;border:2px solid #475569"></span>Independent</span>
+  </div>
+</div>
+<script>
+const DATA = ${JSON.stringify({nodes:a,edges:d})};
+const NW=120, NH=34;
+
+// Separate connected vs isolated nodes
+const connectedSet = new Set([...DATA.edges.map(e=>e.from),...DATA.edges.map(e=>e.to)]);
+const connected    = DATA.nodes.filter(id=>connectedSet.has(id));
+const isolated     = DATA.nodes.filter(id=>!connectedSet.has(id));
+
+// Layout connected nodes using basic force-inspired placement
+const W = ()=>document.getElementById("canvas").offsetWidth  || 900;
+const H = ()=>document.getElementById("canvas").offsetHeight || 600;
+
+function layout() {
+  const w=W(), h=H();
+  const pos = {};
+  // Find sources (no incoming edges)
+  const hasIncoming = new Set(DATA.edges.map(e=>e.to));
+  const sources = connected.filter(id=>!hasIncoming.has(id));
+  const layers = [];
+  const assigned = new Set();
+
+  // BFS layering
+  let layer = sources.filter(id=>connected.includes(id));
+  while (layer.length > 0) {
+    layers.push(layer);
+    layer.forEach(id=>assigned.add(id));
+    const next = [];
+    for (const id of layer) {
+      for (const {from,to} of DATA.edges) {
+        if (from===id && !assigned.has(to)) { next.push(to); assigned.add(to); }
       }
     }
+    layer = [...new Set(next)];
   }
-
-  // Serialise Sets to arrays
-  const serialisedEdges   = {};
-  const serialisedReverse = {};
-  for (const id of Object.keys(nodes)) {
-    serialisedEdges[id]   = [...edges[id]];
-    serialisedReverse[id] = [...reverse[id]];
-  }
-
-  return { nodes, edges: serialisedEdges, reverse: serialisedReverse };
+  // Any connected nodes not yet assigned
+  connected.filter(id=>!assigned.has(id)).forEach(id=>layers[layers.length-1||0]?.push(id)||layers.push([id]));
+
+  const layerH = Math.min(140, (h-180) / Math.max(layers.length,1));
+  layers.forEach((layer,li) => {
+    const y = 60 + li*layerH;
+    const totalW = layer.length*(NW+24)-24;
+    const startX = (w-totalW)/2;
+    layer.forEach((id,i)=>{
+      pos[id] = { x: startX+i*(NW+24), y };
+    });
+  });
+
+  // Isolated nodes in a grid at bottom
+  const cols = Math.max(1, Math.floor((w-40)/(NW+8)));
+  isolated.forEach((id,i)=>{
+    const col=i%cols, row=Math.floor(i/cols);
+    pos[id]={ x:20+col*(NW+8), y:h-120+row*40 };
+  });
+
+  return pos;
 }
 
-// ── terminal reporters ────────────────────────────────────────────────────────
-
-function printFullGraph(graph) {
-  const { nodes, edges, reverse } = graph;
-  const ids = Object.keys(nodes).sort();
+function render() {
+  const svg = document.getElementById("svg");
+  svg.innerHTML = \`<defs>
+    <marker id="arr" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L8,3 z" fill="#334155"/></marker>
+    <marker id="arr-hi" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L8,3 z" fill="#f97316"/></marker>
+  </defs>\`;
 
-  console.log();
-  console.log(bold("  Capability Dependency Graph"));
-  console.log(gray("  ────────────────────────────────────────────────────────────"));
-  console.log();
+  const pos = layout();
 
-  let hasDeps = false;
-  for (const id of ids) {
-    const node  = nodes[id];
-    const deps  = edges[id]   || [];
-    const callers = reverse[id] || [];
-    const icon  = LEVEL_ICON[node.stability] || "🌊";
-    const color = LEVEL_COLOR[node.stability] || green;
-
-    if (deps.length === 0 && callers.length === 0) continue;
-    hasDeps = true;
-
-    console.log(`  ${icon} ${bold(color(id))}`);
-
-    if (deps.length > 0) {
-      console.log(gray("    calls →"));
-      for (const dep of deps) {
-        const depNode = nodes[dep];
-        const depIcon = LEVEL_ICON[depNode?.stability] || "🌊";
-        console.log(gray(`       ${depIcon} ${dep}`));
-      }
-    }
-    if (callers.length > 0) {
-      console.log(gray("    called by ←"));
-      for (const caller of callers) {
-        const callerIcon = LEVEL_ICON[nodes[caller]?.stability] || "🌊";
-        console.log(gray(`       ${callerIcon} ${caller}`));
-      }
-    }
-    console.log();
-  }
-
-  if (!hasDeps) {
-    console.log(gray("  No inter-capability dependencies detected."));
-    console.log(gray("  Run `infernoflow scan` first to populate call data."));
-    console.log();
+  function nodeColor(id) {
+    if (!connectedSet.has(id)) return {fill:"#33415540",stroke:"#475569",text:"#94a3b8"};
+    if (id.startsWith("View"))  return {fill:"#10b98120",stroke:"#10b981",text:"#6ee7b7"};
+    return {fill:"#6366f120",stroke:"#6366f1",text:"#a5b4fc"};
   }
 
-  // Summary stats
-  const totalEdges = Object.values(graph.edges).reduce((n, arr) => n + arr.length, 0);
-  console.log(gray(`  ────────────────────────────────────────────────────────────`));
-  console.log(gray(`  ${ids.length} capabilities · ${totalEdges} dependency edge(s)`));
-  console.log();
-}
-
-function printCapGraph(capId, graph) {
-  const { nodes, edges, reverse } = graph;
-  const node = nodes[capId];
-  if (!node) {
-    console.error(red(`✗ Capability "${capId}" not found in graph.`));
-    process.exit(1);
-  }
-
-  const icon  = LEVEL_ICON[node.stability] || "🌊";
-  const color = LEVEL_COLOR[node.stability] || green;
-
-  console.log();
-  console.log(bold(`  ${icon} ${color(capId)}`) + gray(`  (${node.stability})`));
-  if (node.services?.length) console.log(gray(`  external: `) + cyan(node.services.join(", ")));
-  console.log();
-
-  const deps    = edges[capId]   || [];
-  const callers = reverse[capId] || [];
-
-  if (deps.length > 0) {
-    console.log(bold("  Calls (downstream dependencies):"));
-    for (const dep of deps) {
-      const d    = nodes[dep];
-      const dColor = LEVEL_COLOR[d?.stability] || green;
-      const dIcon  = LEVEL_ICON[d?.stability]  || "🌊";
-      console.log(`    ${dIcon} ${dColor(dep)}` + gray(d?.services?.length ? `  [${d.services.join(", ")}]` : ""));
+  // Draw edges first
+  DATA.edges.forEach(({from,to})=>{
+    const f=pos[from], t=pos[to];
+    if (!f||!t) return;
+    const fx=f.x+NW/2, fy=f.y+NH/2, tx=t.x+NW/2, ty=t.y+NH/2;
+    const dx=tx-fx, dy=ty-fy, len=Math.sqrt(dx*dx+dy*dy)||1;
+    const sx=fx+(dx/len)*(NW/2+4), sy=fy+(dy/len)*(NH/2+4);
+    const ex=tx-(dx/len)*(NW/2+8), ey=ty-(dy/len)*(NH/2+8);
+    const mx=(sx+ex)/2-dy*0.18, my=(sy+ey)/2+dx*0.18;
+    const p=document.createElementNS("http://www.w3.org/2000/svg","path");
+    p.setAttribute("d",\`M\${sx},\${sy} Q\${mx},\${my} \${ex},\${ey}\`);
+    p.setAttribute("class","edge");
+    p.setAttribute("marker-end","url(#arr)");
+    p.dataset.from=from; p.dataset.to=to;
+    svg.appendChild(p);
+  });
+
+  // Draw nodes
+  DATA.nodes.forEach(id=>{
+    const p=pos[id]; if(!p) return;
+    const c=nodeColor(id);
+    const isSmall=!connectedSet.has(id);
+    const w=isSmall?NW:NW, h=isSmall?26:NH;
+
+    const g=document.createElementNS("http://www.w3.org/2000/svg","g");
+    g.setAttribute("class","node");
+    g.setAttribute("transform",\`translate(\${p.x},\${p.y})\`);
+
+    const rect=document.createElementNS("http://www.w3.org/2000/svg","rect");
+    rect.setAttribute("width",w); rect.setAttribute("height",h);
+    rect.setAttribute("rx",isSmall?5:8);
+    rect.setAttribute("fill",c.fill);
+    rect.setAttribute("stroke",c.stroke);
+    rect.setAttribute("stroke-width",isSmall?"1.5":"2");
+
+    const txt=document.createElementNS("http://www.w3.org/2000/svg","text");
+    txt.setAttribute("x",w/2); txt.setAttribute("y",h/2);
+    txt.setAttribute("fill",c.text);
+    txt.setAttribute("font-size",isSmall?"9":"11");
+    txt.setAttribute("font-weight","600");
+    txt.setAttribute("text-anchor","middle");
+    txt.setAttribute("dominant-baseline","middle");
+    // Shorten long names for display
+    let label=id;
+    if(label.length>15) {
+      label=label.replace(/([A-Z])/g,(m,c,o)=>o>0?' '+m:m);
+      if(label.length>18) label=label.replace('Complete Pending On','CPO ').replace('Advance Repeat','AdvRpt ');
+      if(label.length>18) label=id.replace(/([A-Z][a-z]+)/g,w=>w.slice(0,3)).slice(0,16);
     }
-    console.log();
-  } else {
-    console.log(gray("  No downstream dependencies."));
-    console.log();
-  }
+    txt.textContent=label;
 
-  if (callers.length > 0) {
-    console.log(bold("  Called by (upstream dependents):"));
-    for (const caller of callers) {
-      const c    = nodes[caller];
-      const cColor = LEVEL_COLOR[c?.stability] || green;
-      const cIcon  = LEVEL_ICON[c?.stability]  || "🌊";
-      console.log(`    ${cIcon} ${cColor(caller)}`);
-    }
-    console.log();
-  } else {
-    console.log(gray("  No capabilities call this one."));
-    console.log();
-  }
+    g.appendChild(rect); g.appendChild(txt);
+    g.addEventListener("mouseenter",e=>showTip(id,e));
+    g.addEventListener("mouseleave",hideTip);
+    svg.appendChild(g);
+  });
 
-  // Impact warning for frozen/stable
-  if ((node.stability === "frozen" || node.stability === "stable") && callers.length > 0) {
-    const color2 = node.stability === "frozen" ? red : yellow;
-    console.log(color2(`  ⚠  This capability is ${node.stability}. Changing it may break:`));
-    for (const caller of callers) console.log(color2(`     • ${caller}`));
-    console.log();
-  }
+  document.getElementById("stats").textContent = \`\${DATA.nodes.length} capabilities \xB7 \${DATA.edges.length} edges\`;
 }
 
-// ── breaking change checker ───────────────────────────────────────────────────
-
-/**
- * Compare previous graph.json with new graph to detect:
- * - frozen/stable caps that have gained new callers (more dependents = higher risk)
- * - frozen caps that have new outgoing deps (their internals changed)
- */
-function checkBreakingChanges(prevGraph, newGraph) {
-  const warnings = [];
-  if (!prevGraph || !newGraph) return warnings;
-
-  for (const [capId, node] of Object.entries(newGraph.nodes)) {
-    if (node.stability === "experimental") continue;
-
-    const prevCallers = new Set(prevGraph.reverse?.[capId] || []);
-    const newCallers  = new Set(newGraph.reverse[capId]    || []);
-    const addedCallers = [...newCallers].filter(c => !prevCallers.has(c));
-
-    if (addedCallers.length > 0) {
-      warnings.push({
-        type:    "new-dependents",
-        capId,
-        stability: node.stability,
-        detail:  `${addedCallers.join(", ")} now depend on this`,
-      });
-    }
-
-    if (node.stability === "frozen") {
-      const prevDeps = new Set(prevGraph.edges?.[capId] || []);
-      const newDeps  = new Set(newGraph.edges[capId]    || []);
-      const addedDeps = [...newDeps].filter(d => !prevDeps.has(d));
-      const removedDeps = [...prevDeps].filter(d => !newDeps.has(d));
-
-      if (addedDeps.length > 0 || removedDeps.length > 0) {
-        warnings.push({
-          type:    "frozen-internals-changed",
-          capId,
-          stability: node.stability,
-          detail:  [
-            addedDeps.length   ? `added calls: ${addedDeps.join(", ")}`   : "",
-            removedDeps.length ? `removed calls: ${removedDeps.join(", ")}` : "",
-          ].filter(Boolean).join("; "),
-        });
-      }
-    }
-  }
-
-  return warnings;
+function showTip(id, evt) {
+  const calls   = DATA.edges.filter(e=>e.from===id).map(e=>e.to);
+  const callers = DATA.edges.filter(e=>e.to===id).map(e=>e.from);
+  let html = \`<strong>\u{1F30A} \${id}</strong>\`;
+  if (calls.length)   html += \`<div style="margin-top:6px">calls \u2192<br>\${calls.map(c=>\`<span class="tag calls">\${c}</span>\`).join('')}</div>\`;
+  if (callers.length) html += \`<div style="margin-top:6px">\u2190 called by<br>\${callers.map(c=>\`<span class="tag callers">\${c}</span>\`).join('')}</div>\`;
+  if (!calls.length && !callers.length) html += \`<div style="margin-top:6px;color:#475569;font-size:11px">No inter-capability dependencies</div>\`;
+  const tip=document.getElementById("tip");
+  tip.innerHTML=html; tip.style.opacity="1";
+  const canvas=document.getElementById("canvas").getBoundingClientRect();
+  let tx=evt.clientX-canvas.left+16, ty=evt.clientY-canvas.top-60;
+  if(tx+220>canvas.width) tx=evt.clientX-canvas.left-236;
+  tip.style.left=Math.max(0,tx)+"px"; tip.style.top=Math.max(0,ty)+"px";
+
+  // Highlight edges
+  document.querySelectorAll(".edge").forEach(p=>{
+    const active=p.dataset.from===id||p.dataset.to===id;
+    p.setAttribute("class",active?"edge active":"edge dim");
+    p.setAttribute("marker-end",active?"url(#arr-hi)":"url(#arr)");
+  });
 }
-
-// ── entry point ───────────────────────────────────────────────────────────────
-
-export async function graphCommand(rawArgs) {
-  const args      = (rawArgs || []).slice(1); // skip command name
-  const jsonMode  = args.includes("--json");
-  const checkMode = args.includes("--check");
-  const capIdx    = args.indexOf("--cap");
-  const capFilter = capIdx !== -1 ? args[capIdx + 1] : null;
-
-  const cwd        = process.cwd();
-  const infernoDir = path.join(cwd, "inferno");
-  const scanPath   = path.join(infernoDir, "scan.json");
-  const graphPath  = path.join(infernoDir, "graph.json");
-  const capsPath   = path.join(infernoDir, "capabilities.json");
-
-  // Load scan data
-  const scan = loadJson(scanPath);
-  if (!scan) {
-    console.error(red("✗ inferno/scan.json not found — run `infernoflow scan` first."));
-    process.exit(1);
-  }
-
-  // Load capabilities (for stability info)
-  let allCaps = [];
-  const rawCaps = loadJson(capsPath);
-  if (rawCaps) allCaps = Array.isArray(rawCaps) ? rawCaps : (rawCaps.capabilities || []);
-
-  // Build graph
-  const scanCaps = scan.capabilities || [];
-  const graph    = buildGraph(scanCaps, allCaps);
-
-  // Check for breaking changes vs saved graph
-  const prevGraph = loadJson(graphPath);
-  const breakingWarnings = checkMode || true ? checkBreakingChanges(prevGraph, graph) : [];
-
-  // Save graph.json
-  const graphData = {
-    builtAt:      new Date().toISOString(),
-    capabilities: Object.keys(graph.nodes).length,
-    edges:        Object.values(graph.edges).reduce((n, arr) => n + arr.length, 0),
-    nodes:        graph.nodes,
-    deps:         graph.edges,
-    dependents:   graph.reverse,
-  };
-
-  if (!jsonMode) {
-    fs.writeFileSync(graphPath, JSON.stringify(graphData, null, 2));
-  }
-
-  // Output
-  if (jsonMode) {
-    console.log(JSON.stringify(graphData, null, 2));
-    return;
-  }
-
-  if (capFilter) {
-    printCapGraph(capFilter, graph);
-  } else {
-    printFullGraph(graph);
-  }
-
-  // Breaking change warnings
-  if (breakingWarnings.length > 0) {
-    console.log(yellow("  ⚠  Dependency changes detected:"));
-    for (const w of breakingWarnings) {
-      const icon = w.stability === "frozen" ? red("🧊") : yellow("〰️ ");
-      console.log(`  ${icon} ${bold(w.capId)} — ${w.detail}`);
-    }
-    console.log();
-    if (checkMode) process.exit(1);
-  }
-
-  if (!jsonMode) console.log(gray(`  Graph saved → inferno/graph.json`));
+function hideTip(){
+  document.getElementById("tip").style.opacity="0";
+  document.querySelectorAll(".edge").forEach(p=>{
+    p.setAttribute("class","edge");
+    p.setAttribute("marker-end","url(#arr)");
+  });
 }
 
-// ── exported utility for other commands ──────────────────────────────────────
-
-export function loadGraph(infernoDir) {
-  return loadJson(path.join(infernoDir, "graph.json"));
-}
+render();
+window.addEventListener("resize", render);
+</script>
+</body>
+</html>`}async function F(t){const i=(t||[]).slice(1),l=i.includes("--json"),a=i.includes("--check"),d=i.includes("--html"),n=i.indexOf("--cap"),f=n!==-1?i[n+1]:null,p=process.cwd(),e=x.join(p,"inferno"),r=x.join(e,"scan.json"),o=x.join(e,"graph.json"),s=x.join(e,"capabilities.json"),g=S(r);g||(console.error(k("\u2717 inferno/scan.json not found \u2014 run `infernoflow scan` first.")),process.exit(1));let h=[];const y=S(s);y&&(h=Array.isArray(y)?y:y.capabilities||[]);const j=g.capabilities||[],m=T(j,h),L=S(o),D=H(L,m),v={builtAt:new Date().toISOString(),capabilities:Object.keys(m.nodes).length,edges:Object.values(m.edges).reduce((b,N)=>b+N.length,0),nodes:m.nodes,deps:m.edges,dependents:m.reverse};if(l||E.writeFileSync(o,JSON.stringify(v,null,2)),d){const b=x.join(e,"graph.html");E.writeFileSync(b,M(v)),console.log(c(`
+  infernoflow graph  \u2192  HTML`)),console.log(c("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500")),console.log(`  ${u("graph.html")} written \u2192 ${z("inferno/graph.html")}`),console.log(c(`  ${v.capabilities} capabilities \xB7 ${v.edges} dependency edge(s)`)),console.log(),console.log(c("  Open in browser:  ")+z("inferno/graph.html")),console.log();return}if(l){console.log(JSON.stringify(v,null,2));return}if(f?W(f,m):O(m),D.length>0){console.log($("  \u26A0  Dependency changes detected:"));for(const b of D){const N=b.stability==="frozen"?k("\u{1F9CA}"):$("\u3030\uFE0F ");console.log(`  ${N} ${u(b.capId)} \u2014 ${b.detail}`)}console.log(),a&&process.exit(1)}l||console.log(c("  Graph saved \u2192 inferno/graph.json"))}function X(t){return S(x.join(t,"graph.json"))}export{M as buildGraphHtml,F as graphCommand,X as loadGraph};