opencroc 1.4.0 → 1.4.2

package/dist/web/index.html

@@ -127,7 +127,7 @@
 const S = {
   project:null, graph:{nodes:[],edges:[]}, agents:[], ws:null,
   pan:{x:0,y:0}, zoom:1, dragging:false, dragStart:{x:0,y:0},
-  nodePos:new Map(), hoveredNode:null, running:false
+  nodePos:new Map(), hoveredNode:null, running:false, _userPanned:false
 };
 
 async function fetchProject(){
@@ -198,19 +198,47 @@ function updateStats(){
 function layoutGraph(){
   const nodes=S.graph.nodes; if(!nodes.length)return;
   const c=document.getElementById('graph-canvas');
-  const w=c.clientWidth||800,h=c.clientHeight||500,cx=w/2,cy=h/2;
+  const w=c.clientWidth||800,h=c.clientHeight||500;
+  // Group non-module nodes by module
   const mods=new Map();
-  for(const n of nodes){const m=n.module||n.id;if(!mods.has(m))mods.set(m,[]);mods.get(m).push(n);}
-  const keys=[...mods.keys()];
+  S.modMeta=new Map(); // module → {cx,cy,radius,color}
+  for(const n of nodes){
+    if(n.type==='module') continue;
+    const m=n.module||'other';
+    if(!mods.has(m)) mods.set(m,[]);
+    mods.get(m).push(n);
+  }
+  const keys=[...mods.keys()].sort((a,b)=>(mods.get(b).length-mods.get(a).length));
+  const nMods=keys.length||1;
+  // Module color palette (10 distinct colors, cycle)
+  const palette=['#4ecca3','#e94560','#f39c12','#3498db','#9b59b6','#1abc9c','#e67e22','#2ecc71','#e84393','#00cec9'];
+  // Adaptive ring radius
+  const totalMembers=nodes.filter(n=>n.type!=='module').length;
+  const baseRadius=Math.max(300, Math.sqrt(totalMembers)*30);
   for(let i=0;i<keys.length;i++){
-    const mn=mods.get(keys[i]);
-    const a=(i/keys.length)*Math.PI*2-Math.PI/2, r=Math.min(w,h)*.3;
-    const mcx=cx+Math.cos(a)*r, mcy=cy+Math.sin(a)*r;
+    const mn=mods.get(keys[i]); if(!mn)continue;
+    const modAngle=(i/nMods)*Math.PI*2-Math.PI/2;
+    const mcx=w/2+Math.cos(modAngle)*baseRadius;
+    const mcy=h/2+Math.sin(modAngle)*baseRadius;
+    const subRadius=Math.max(50, Math.sqrt(mn.length)*22);
+    const col=palette[i%palette.length];
+    // Store module meta for cluster rendering
+    const modNodeId='module:'+keys[i];
+    S.nodePos.set(modNodeId,{x:mcx,y:mcy});
+    S.modMeta.set(keys[i],{cx:mcx,cy:mcy,radius:subRadius+30,color:col,count:mn.length});
     for(let j=0;j<mn.length;j++){
-      const na=(j/mn.length)*Math.PI*2, nr=35+mn.length*8;
-      S.nodePos.set(mn[j].id,{x:mcx+Math.cos(na)*nr,y:mcy+Math.sin(na)*nr});
+      const na=(j/mn.length)*Math.PI*2;
+      S.nodePos.set(mn[j].id,{x:mcx+Math.cos(na)*subRadius,y:mcy+Math.sin(na)*subRadius});
     }
   }
+  // Auto-center
+  if(nodes.length>0&&!S._userPanned){
+    let minX=Infinity,maxX=-Infinity,minY=Infinity,maxY=-Infinity;
+    for(const[,p] of S.nodePos){minX=Math.min(minX,p.x);maxX=Math.max(maxX,p.x);minY=Math.min(minY,p.y);maxY=Math.max(maxY,p.y);}
+    const gw=maxX-minX+300,gh=maxY-minY+300,gcx=minX+(maxX-minX)/2,gcy=minY+(maxY-minY)/2;
+    S.zoom=Math.min(1, Math.min(w/gw, h/gh));
+    S.pan.x=w/2-gcx*S.zoom;S.pan.y=h/2-gcy*S.zoom;
+  }
 }
 
 function renderCanvas(){
@@ -220,44 +248,83 @@ function renderCanvas(){
   ctx.scale(dpr,dpr);
   const w=canvas.clientWidth,h=canvas.clientHeight;
   ctx.clearRect(0,0,w,h); ctx.save(); ctx.translate(S.pan.x,S.pan.y); ctx.scale(S.zoom,S.zoom);
-  // Grid
+  // Subtle grid
   ctx.strokeStyle='#151530';ctx.lineWidth=.5;
-  for(let x=0;x<w*2;x+=32){ctx.beginPath();ctx.moveTo(x,-h);ctx.lineTo(x,h*2);ctx.stroke();}
-  for(let y=0;y<h*2;y+=32){ctx.beginPath();ctx.moveTo(-w,y);ctx.lineTo(w*2,y);ctx.stroke();}
+  const gridStep=40;
+  for(let x=-2000;x<4000;x+=gridStep){ctx.beginPath();ctx.moveTo(x,-2000);ctx.lineTo(x,4000);ctx.stroke();}
+  for(let y=-2000;y<4000;y+=gridStep){ctx.beginPath();ctx.moveTo(-2000,y);ctx.lineTo(4000,y);ctx.stroke();}
+
   const edges=S.graph.edges||[],nodes=S.graph.nodes||[];
-  // Edges
+  const largeGraph=nodes.length>80;
+
+  // Draw module cluster backgrounds
+  if(S.modMeta){
+    for(const[name,m] of S.modMeta){
+      ctx.beginPath(); ctx.arc(m.cx,m.cy,m.radius,0,Math.PI*2);
+      ctx.fillStyle=m.color+'10'; ctx.fill();
+      ctx.strokeStyle=m.color+'30'; ctx.lineWidth=2; ctx.setLineDash([6,4]); ctx.stroke(); ctx.setLineDash([]);
+      // Module label at top of cluster
+      ctx.font='bold 13px "Courier New"'; ctx.fillStyle=m.color+'cc'; ctx.textAlign='center'; ctx.textBaseline='bottom';
+      ctx.fillText(name+' ('+m.count+')',m.cx,m.cy-m.radius-6);
+    }
+  }
+
+  // Draw "uses" edges with curved lines + gradient
   for(const e of edges){
+    if(e.relation==='contains') continue; // never draw contains
     const s=S.nodePos.get(e.source),t=S.nodePos.get(e.target);if(!s||!t)continue;
-    ctx.strokeStyle='rgba(78,204,163,.25)';ctx.lineWidth=1.5;
-    ctx.beginPath();ctx.moveTo(s.x,s.y);ctx.lineTo(t.x,t.y);ctx.stroke();
-    const a=Math.atan2(t.y-s.y,t.x-s.x),al=7,ax=t.x-Math.cos(a)*18,ay=t.y-Math.sin(a)*18;
-    ctx.fillStyle='rgba(78,204,163,.4)';ctx.beginPath();ctx.moveTo(ax,ay);
-    ctx.lineTo(ax-al*Math.cos(a-.4),ay-al*Math.sin(a-.4));
-    ctx.lineTo(ax-al*Math.cos(a+.4),ay-al*Math.sin(a+.4));ctx.closePath();ctx.fill();
+    const dx=t.x-s.x,dy=t.y-s.y,dist=Math.sqrt(dx*dx+dy*dy);
+    // Curved edge via quadratic bezier, perpendicular offset
+    const mx=(s.x+t.x)/2+dy*0.15, my=(s.y+t.y)/2-dx*0.15;
+    const grad=ctx.createLinearGradient(s.x,s.y,t.x,t.y);
+    grad.addColorStop(0,'rgba(233,69,96,.5)'); // controller (red)
+    grad.addColorStop(1,'rgba(78,204,163,.5)'); // model (green)
+    ctx.strokeStyle=grad;ctx.lineWidth=2;
+    ctx.beginPath();ctx.moveTo(s.x,s.y);ctx.quadraticCurveTo(mx,my,t.x,t.y);ctx.stroke();
+    // Arrowhead
+    const t2=0.95,at2x=(1-t2)*(1-t2)*s.x+2*(1-t2)*t2*mx+t2*t2*t.x,at2y=(1-t2)*(1-t2)*s.y+2*(1-t2)*t2*my+t2*t2*t.y;
+    const a=Math.atan2(t.y-at2y,t.x-at2x),al=8;
+    ctx.fillStyle='rgba(78,204,163,.6)';ctx.beginPath();ctx.moveTo(t.x,t.y);
+    ctx.lineTo(t.x-al*Math.cos(a-.4),t.y-al*Math.sin(a-.4));
+    ctx.lineTo(t.x-al*Math.cos(a+.4),t.y-al*Math.sin(a+.4));ctx.closePath();ctx.fill();
   }
+
+  // Draw nodes
   const tc={model:'#4ecca3',controller:'#e94560',api:'#f39c12',dto:'#3498db',module:'#9b59b6'};
   const sc={idle:'#444',testing:'#f39c12',passed:'#4ecca3',failed:'#e94560'};
-  const icons={model:'📦',controller:'🎮',api:'🔌',dto:'📋',module:'📁'};
   for(const n of nodes){
+    if(n.type==='module') continue; // drawn as cluster bg instead
     const p=S.nodePos.get(n.id);if(!p)continue;
-    const sz=n.type==='module'?22:14,c=tc[n.type]||'#888',ol=sc[n.status]||'#444',hov=S.hoveredNode===n.id;
-    if(n.status==='testing'){ctx.shadowColor=sc.testing;ctx.shadowBlur=12;}
-    else if(n.status==='passed'){ctx.shadowColor=sc.passed;ctx.shadowBlur=8;}
-    else if(n.status==='failed'){ctx.shadowColor=sc.failed;ctx.shadowBlur=10;}
-    ctx.fillStyle='rgba(0,0,0,.3)';ctx.fillRect(p.x-sz+2,p.y-sz+2,sz*2,sz*2);
-    ctx.fillStyle=c;ctx.fillRect(p.x-sz,p.y-sz,sz*2,sz*2);
-    ctx.fillStyle='rgba(255,255,255,.15)';ctx.fillRect(p.x-sz,p.y-sz,sz*2,3);ctx.fillRect(p.x-sz,p.y-sz,3,sz*2);
-    ctx.shadowBlur=0;ctx.strokeStyle=hov?'#fff':ol;ctx.lineWidth=hov?3:2;ctx.strokeRect(p.x-sz,p.y-sz,sz*2,sz*2);
-    ctx.font=sz+'px serif';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(icons[n.type]||'⬜',p.x,p.y);
-    ctx.font='10px "Courier New"';ctx.fillStyle=hov?'#fff':'#bbb';ctx.textAlign='center';ctx.textBaseline='top';
-    ctx.fillText((n.label||n.id.split(':').pop()).substring(0,20),p.x,p.y+sz+4);
+    const sz=10,c=tc[n.type]||'#888',ol=sc[n.status]||'#444',hov=S.hoveredNode===n.id;
+    // Glow for active status
+    if(n.status==='testing'){ctx.shadowColor=sc.testing;ctx.shadowBlur=14;}
+    else if(n.status==='passed'){ctx.shadowColor=sc.passed;ctx.shadowBlur=10;}
+    else if(n.status==='failed'){ctx.shadowColor=sc.failed;ctx.shadowBlur=12;}
+    // Node circle instead of rect for cleaner look
+    ctx.beginPath();ctx.arc(p.x,p.y,sz,0,Math.PI*2);
+    ctx.fillStyle=c;ctx.fill();
+    ctx.shadowBlur=0;
+    ctx.strokeStyle=hov?'#fff':ol;ctx.lineWidth=hov?3:1.5;ctx.stroke();
+    // Icon
+    ctx.font=(sz)+'px serif';ctx.textAlign='center';ctx.textBaseline='middle';
+    ctx.fillText(n.type==='model'?'📦':'🎮',p.x,p.y);
+    // Label — show at higher zoom or on hover
+    if(S.zoom>0.4||hov){
+      ctx.font='9px "Courier New"';ctx.fillStyle=hov?'#fff':'#aaa';ctx.textAlign='center';ctx.textBaseline='top';
+      ctx.fillText((n.label||n.id.split(':').pop()).substring(0,18),p.x,p.y+sz+3);
+    }
   }
   ctx.restore();
+
+  // HUD legend
+  ctx.font='10px "Courier New"';ctx.textAlign='left';
+  const leg=[['📦 Model','#4ecca3'],['🎮 Controller','#e94560'],['─── uses','rgba(200,100,130,.8)']];
+  for(let i=0;i<leg.length;i++){ctx.fillStyle=leg[i][1];ctx.fillText(leg[i][0],10,h-40+i*14);}
 }
 
 function setupCanvas(){
   const c=document.getElementById('graph-canvas');
-  c.addEventListener('mousedown',e=>{S.dragging=true;S.dragStart={x:e.clientX-S.pan.x,y:e.clientY-S.pan.y};c.style.cursor='grabbing';});
+  c.addEventListener('mousedown',e=>{S.dragging=true;S._userPanned=true;S.dragStart={x:e.clientX-S.pan.x,y:e.clientY-S.pan.y};c.style.cursor='grabbing';});
   c.addEventListener('mousemove',e=>{
     if(S.dragging){S.pan.x=e.clientX-S.dragStart.x;S.pan.y=e.clientY-S.dragStart.y;renderCanvas();}
     const rect=c.getBoundingClientRect(),mx=(e.clientX-rect.left-S.pan.x)/S.zoom,my=(e.clientY-rect.top-S.pan.y)/S.zoom;
@@ -288,7 +355,34 @@ function updateAll(){
 function renderModList(){
   const el=document.getElementById('mod-list'),mods=S.graph.nodes.filter(n=>n.type==='module');
   if(!mods.length){el.innerHTML='<div style="padding:8px;color:#555;font-size:10px">No modules found</div>';return;}
-  el.innerHTML=mods.map(m=>'<div class="mod-item"><div class="dot '+m.status+'"></div>'+esc(m.label||m.id.replace('module:',''))+'</div>').join('');
+  // Sort by member count descending
+  const sorted=mods.sort((a,b)=>{
+    const ca=S.modMeta&&S.modMeta.get(a.label)?S.modMeta.get(a.label).count:0;
+    const cb=S.modMeta&&S.modMeta.get(b.label)?S.modMeta.get(b.label).count:0;
+    return cb-ca;
+  });
+  el.innerHTML=sorted.map(m=>{
+    const meta=S.modMeta&&S.modMeta.get(m.label);
+    const cnt=meta?meta.count:'';
+    const col=meta?meta.color:'#888';
+    return '<div class="mod-item" data-mod="'+esc(m.label)+'" style="border-left:3px solid '+col+';padding-left:6px">'
+      +'<div class="dot '+m.status+'"></div>'
+      +esc(m.label)+' <span style="color:#555;font-size:9px">('+cnt+')</span></div>';
+  }).join('');
+  // Click to navigate
+  el.querySelectorAll('.mod-item').forEach(item=>{
+    item.addEventListener('click',()=>{
+      const name=item.getAttribute('data-mod');
+      const meta=S.modMeta&&S.modMeta.get(name);
+      if(meta){
+        const c=document.getElementById('graph-canvas');
+        S.zoom=0.8;S._userPanned=true;
+        S.pan.x=c.clientWidth/2-meta.cx*S.zoom;
+        S.pan.y=c.clientHeight/2-meta.cy*S.zoom;
+        renderCanvas();
+      }
+    });
+  });
 }
 function renderAgentSB(){
   document.getElementById('agent-sidebar').innerHTML=S.agents.map(a=>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencroc",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "AI-native E2E testing framework — source-aware test generation, intelligent validation, and self-healing",
   "keywords": [
     "e2e",