npm - clawmatrix - Versions diffs - 0.1.15 → 0.1.16 - Mend

clawmatrix 0.1.15 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/BOOTSTRAP.md +17 -2
package/package.json +1 -1
package/src/auth.ts +42 -12
package/src/cluster-service.ts +31 -4
package/src/compat.ts +3 -0
package/src/connection.ts +15 -6
package/src/handoff.ts +311 -17
package/src/http-utils.ts +35 -0
package/src/index.ts +33 -15
package/src/model-proxy.ts +19 -16
package/src/peer-manager.ts +55 -5
package/src/router.ts +62 -28
package/src/tool-proxy.ts +22 -7
package/src/tools/cluster-events.ts +119 -0
package/src/tools/cluster-exec.ts +4 -0
package/src/tools/cluster-handoff-reply.ts +77 -0
package/src/tools/cluster-handoff.ts +12 -0
package/src/tools/cluster-peers.ts +17 -1
package/src/tools/cluster-send.ts +1 -3
package/src/tools/cluster-tool.ts +2 -5
package/src/types.ts +93 -0
package/src/web-ui.ts +490 -345
package/src/web.ts +675 -53

package/src/web-ui.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export function renderDashboard(nodeId: string): string {
 <style>
 ${CSS}
 </style>
+<script src="https://cdn.jsdelivr.net/npm/force-graph@1/dist/force-graph.min.js"></script>
 </head>
 <body>
@@ -72,26 +73,32 @@ ${CSS}
   <!-- Main content -->
   <div class="main">
-    <!-- Left: Mesh + Details -->
+    <!-- Left: Mesh -->
     <div class="panel-left">
       <div class="card mesh-card">
         <div class="card-header">
           <h2>Mesh Topology</h2>
           <span id="peer-count" class="badge">0 nodes</span>
         </div>
-        <canvas id="mesh-canvas"></canvas>
-      </div>
-      <div id="node-detail" class="card detail-card hidden">
-        <div class="card-header">
-          <h2 id="detail-title">Node Details</h2>
-          <span id="detail-status" class="badge"></span>
-        </div>
-        <div id="detail-body" class="detail-body"></div>
+        <div id="mesh-container"></div>
       </div>
     </div>
-    <!-- Right: Chat -->
+    <!-- Right: Detail + Chat -->
     <div class="panel-right">
+      <div id="node-detail" class="detail-panel hidden">
+        <div class="detail-header">
+          <div class="detail-header-left">
+            <span id="detail-status-dot" class="detail-dot"></span>
+            <span id="detail-title" class="detail-title-text"></span>
+            <span id="detail-status" class="badge"></span>
+          </div>
+          <button id="detail-close" class="btn-icon" title="Close">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <div id="detail-body" class="detail-body"></div>
+      </div>
       <div class="card chat-card">
         <div class="card-header">
           <h2 id="chat-title">Chat</h2>
@@ -313,10 +320,7 @@ body {
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 16px;
-  gap: 16px;
   min-width: 0;
-  overflow-y: auto;
 }
 .panel-right {
@@ -368,23 +372,83 @@ body {
   flex: 1;
   display: flex;
   flex-direction: column;
-  min-height: 300px;
+  border-radius: 0;
+  border: none;
 }
-#mesh-canvas {
+#mesh-container {
   flex: 1;
   width: 100%;
-  cursor: default;
+  overflow: hidden;
+}
+#mesh-container canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+/* Node detail (right panel) */
+.detail-panel {
+  flex: 1 1 50%;
+  min-height: 0;
+  overflow-y: auto;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
+  animation: slideDown 0.2s ease-out;
+}
+@keyframes slideDown {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.detail-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.detail-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.detail-title-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-/* Node detail */
-.detail-card { flex-shrink: 0; }
+.btn-icon {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s, background 0.15s;
+}
+.btn-icon:hover { color: var(--text); background: rgba(255,255,255,0.05); }
 .detail-body {
-  padding: 16px 18px;
+  padding: 12px 16px;
   font-size: 13px;
   line-height: 1.7;
-  max-height: 320px;
   overflow-y: auto;
 }
@@ -473,7 +537,8 @@ body {
 .chat-card {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex: 1 1 50%;
+  min-height: 0;
   border-radius: 0;
   border: none;
   border-top: none;
@@ -627,15 +692,11 @@ const JS = `
   let selectedNode = null;
   let chatMessages = [];
   let chatStreaming = false;
-  let meshNodes = [];
-  let meshEdges = [];
   let chatMode = 'model'; // 'model' | 'handoff'
   let handoffNodeId = null;
   let hoveredNode = null;
-  let dragNode = null;
-  let dragOffset = { x: 0, y: 0 };
-  let animFrame = null;
   let pollTimer = null;
+  let graph = null;
   // ── DOM refs ──
   const $ = (id) => document.getElementById(id);
@@ -644,8 +705,6 @@ const JS = `
   const loginForm = $('login-form');
   const loginToken = $('login-token');
   const loginError = $('login-error');
-  const canvas = $('mesh-canvas');
-  const ctx = canvas.getContext('2d');
   // ── Auth ──
   loginForm.addEventListener('submit', async (e) => {
@@ -698,13 +757,10 @@ const JS = `
     initMesh();
     pollStatus();
     pollTimer = setInterval(pollStatus, 3000);
-    requestAnimationFrame(renderLoop);
   }
   function stopDashboard() {
     if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
-    if (animFrame) { cancelAnimationFrame(animFrame); animFrame = null; }
-    window.removeEventListener('resize', resizeCanvas);
   }
   async function pollStatus() {
@@ -745,360 +801,372 @@ const JS = `
     return h + 'h ' + m + 'm';
   }
-  // ── Mesh visualization ──
-  const DPR = window.devicePixelRatio || 1;
-  let W = 0, H = 0;
+  // ── Mesh visualization (force-graph) ──
+  const NODE_COLORS = {
+    self: '#818cf8',
+    direct: '#34d399',
+    relay: '#fbbf24',
+    satellite: '#f472b6',
+    offline: '#555d75',
+  };
+  const GLOW_COLORS = {
+    self: [129, 140, 248],
+    direct: [52, 211, 153],
+    relay: [251, 191, 36],
+    satellite: [244, 114, 182],
+  };
+  let frameCount = 0;
   function initMesh() {
-    resizeCanvas();
-    window.addEventListener('resize', resizeCanvas);
-    canvas.addEventListener('mousedown', onCanvasMouseDown);
-    canvas.addEventListener('mousemove', onCanvasMouseMove);
-    canvas.addEventListener('mouseup', onCanvasMouseUp);
-    canvas.addEventListener('mouseleave', () => { hoveredNode = null; dragNode = null; canvas.style.cursor = 'default'; });
+    const container = $('mesh-container');
+    // Close button for detail panel
+    $('detail-close').addEventListener('click', () => {
+      selectedNode = null;
+      $('node-detail').classList.add('hidden');
+      setChatMode('model', null);
+    });
+    graph = new ForceGraph()(container)
+      .backgroundColor('transparent')
+      .nodeId('id')
+      .linkSource('source')
+      .linkTarget('target')
+      .nodeVal(node => node.type === 'self' ? 8 : node.type === 'satellite' ? 3 : 5)
+      .nodeCanvasObjectMode(() => 'replace')
+      .nodeCanvasObject((node, ctx, globalScale) => {
+        const isSelected = selectedNode === node.id;
+        const isHovered = hoveredNode === node.id;
+        const r = node.type === 'self' ? 16 : node.type === 'satellite' ? 9 : 12;
+        const color = NODE_COLORS[node.type] || NODE_COLORS.offline;
+        const glowRgb = GLOW_COLORS[node.type];
+        // Animated pulse glow
+        if (glowRgb) {
+          const pulse = 0.5 + 0.5 * Math.sin(frameCount * 0.03 + (node.__idx || 0) * 1.5);
+          const glowR = r * (2.5 + (isHovered || isSelected ? 1.0 : 0) + pulse * 0.5);
+          const glowAlpha = isSelected ? 0.25 : isHovered ? 0.2 : 0.08 + pulse * 0.04;
+          const grad = ctx.createRadialGradient(node.x, node.y, r * 0.5, node.x, node.y, glowR);
+          grad.addColorStop(0, 'rgba(' + glowRgb.join(',') + ',' + glowAlpha + ')');
+          grad.addColorStop(0.6, 'rgba(' + glowRgb.join(',') + ',' + (glowAlpha * 0.3) + ')');
+          grad.addColorStop(1, 'transparent');
+          ctx.fillStyle = grad;
+          ctx.fillRect(node.x - glowR, node.y - glowR, glowR * 2, glowR * 2);
+        }
+        // Outer ring for selected/hovered
+        if (isSelected || isHovered) {
+          ctx.beginPath();
+          ctx.arc(node.x, node.y, r + 3, 0, Math.PI * 2);
+          ctx.strokeStyle = color + (isSelected ? '60' : '30');
+          ctx.lineWidth = 2;
+          ctx.stroke();
+        }
+        // Main circle with gradient fill
+        const fillGrad = ctx.createRadialGradient(node.x - r * 0.3, node.y - r * 0.3, 0, node.x, node.y, r);
+        fillGrad.addColorStop(0, color);
+        fillGrad.addColorStop(1, color + 'aa');
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, r, 0, Math.PI * 2);
+        ctx.fillStyle = fillGrad;
+        ctx.fill();
+        // Border
+        ctx.strokeStyle = isSelected ? '#fff' : isHovered ? color : color + '50';
+        ctx.lineWidth = isSelected ? 2 : isHovered ? 1.5 : 1;
+        ctx.stroke();
+        // Inner ring for self with animated rotation
+        if (node.type === 'self') {
+          ctx.save();
+          ctx.translate(node.x, node.y);
+          ctx.rotate(frameCount * 0.008);
+          ctx.beginPath();
+          ctx.arc(0, 0, r - 5, 0, Math.PI * 1.5);
+          ctx.strokeStyle = 'rgba(255,255,255,0.35)';
+          ctx.lineWidth = 1.5;
+          ctx.stroke();
+          ctx.restore();
+        }
+        // Label with shadow
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        const fontSize = Math.max((node.type === 'self' ? 12 : 11) / globalScale, 3);
+        ctx.font = (node.type === 'self' ? '600 ' : '500 ') + fontSize + 'px -apple-system, system-ui, sans-serif';
+        const labelY = node.y + r + 12 / globalScale;
+        ctx.fillStyle = 'rgba(0,0,0,0.5)';
+        ctx.fillText(node.id, node.x + 0.5 / globalScale, labelY + 0.5 / globalScale);
+        ctx.fillStyle = isSelected || isHovered ? '#fff' : 'rgba(255,255,255,0.8)';
+        ctx.fillText(node.id, node.x, labelY);
+        // Capability counts
+        const data = node.data;
+        if (data) {
+          const parts = [];
+          if (node.type === 'satellite') {
+            parts.push(data.ssid ? data.ssid : 'cellular');
+          } else {
+            const agents = data.agents?.length || 0;
+            const models = data.models?.length || 0;
+            const tools = data.toolProxy?.enabled ? (data.toolProxy.allow?.length || 0) : 0;
+            if (models) parts.push(models + 'M');
+            if (agents) parts.push(agents + 'A');
+            if (tools) parts.push(tools + 'T');
+          }
+          if (parts.length) {
+            ctx.font = Math.max(10 / globalScale, 2.5) + 'px -apple-system, system-ui, sans-serif';
+            ctx.fillStyle = 'rgba(255,255,255,0.4)';
+            ctx.fillText(parts.join(' \\u00b7 '), node.x, labelY + 13 / globalScale);
+          }
+        }
+      })
+      .linkCanvasObjectMode(() => 'replace')
+      .linkCanvasObject((link, ctx, globalScale) => {
+        const src = link.source;
+        const tgt = link.target;
+        if (!src || !tgt || src.x == null || tgt.x == null) return;
+        const isDirect = link.type === 'direct';
+        const isSatellite = link.type === 'satellite';
+        const rgb = getLinkColorRgb(src, tgt);
+        // Link line with glow
+        ctx.beginPath();
+        ctx.moveTo(src.x, src.y);
+        ctx.lineTo(tgt.x, tgt.y);
+        // Glow layer
+        ctx.strokeStyle = 'rgba(' + rgb + ',0.12)';
+        ctx.lineWidth = isDirect ? 6 : 4;
+        ctx.setLineDash([]);
+        ctx.stroke();
+        // Main line
+        ctx.beginPath();
+        ctx.moveTo(src.x, src.y);
+        ctx.lineTo(tgt.x, tgt.y);
+        ctx.strokeStyle = 'rgba(' + rgb + ',' + (isDirect ? '0.55' : '0.4') + ')';
+        ctx.lineWidth = isDirect ? 2 : 1.5;
+        if (isSatellite) ctx.setLineDash([3, 5]);
+        else if (!isDirect) ctx.setLineDash([6, 4]);
+        else ctx.setLineDash([]);
+        ctx.stroke();
+        ctx.setLineDash([]);
+      })
+      .linkDirectionalParticles(link => link.type === 'direct' ? 4 : 2)
+      .linkDirectionalParticleSpeed(link => link.type === 'direct' ? 0.004 : 0.003)
+      .linkDirectionalParticleWidth(link => link.type === 'direct' ? 3 : 2)
+      .linkDirectionalParticleColor(link => {
+        return 'rgba(' + getLinkColorRgb(link.source, link.target) + ',0.8)';
+      })
+      .onNodeHover(node => {
+        hoveredNode = node ? node.id : null;
+        container.style.cursor = node ? 'pointer' : 'default';
+      })
+      .onNodeClick((node) => {
+        selectedNode = node.id;
+        updateDetail(node.id);
+        setChatMode(node.id !== state.nodeId ? 'handoff' : 'model', node.id !== state.nodeId ? node.id : null);
+      })
+      .onBackgroundClick(() => {
+        selectedNode = null;
+        $('node-detail').classList.add('hidden');
+        setChatMode('model', null);
+      })
+      .onNodeDragEnd(node => {
+        node.fx = node.x;
+        node.fy = node.y;
+      })
+      .onRenderFramePre((ctx, globalScale) => {
+        frameCount++;
+        // Subtle radial gradient background
+        const w = graph.width();
+        const h = graph.height();
+        const bgGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, Math.max(w, h) * 0.6);
+        bgGrad.addColorStop(0, 'rgba(99, 102, 241, 0.03)');
+        bgGrad.addColorStop(1, 'transparent');
+        ctx.fillStyle = bgGrad;
+        ctx.fillRect(-w / 2, -h / 2, w, h);
+        // Grid dots instead of lines
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.04)';
+        const gridSize = 30 / globalScale;
+        const dotR = 1 / globalScale;
+        const xMin = -w / 2;
+        const yMin = -h / 2;
+        const xMax = w / 2;
+        const yMax = h / 2;
+        for (let x = Math.floor(xMin / gridSize) * gridSize; x < xMax; x += gridSize) {
+          for (let y = Math.floor(yMin / gridSize) * gridSize; y < yMax; y += gridSize) {
+            ctx.beginPath();
+            ctx.arc(x, y, dotR, 0, Math.PI * 2);
+            ctx.fill();
+          }
+        }
+      })
+      .cooldownTime(Infinity)
+      .d3AlphaMin(0);
+    // Configure forces — strong repulsion to spread nodes apart
+    graph.d3Force('link').distance(200);
+    graph.d3Force('charge').strength(-800).distanceMin(50);
+    graph.d3Force('center', null);
+    // Observe container resize
+    new ResizeObserver(() => {
+      const rect = container.getBoundingClientRect();
+      const headerH = container.parentElement.querySelector('.card-header')?.offsetHeight || 0;
+      graph.width(rect.width).height(rect.height - headerH);
+    }).observe(container.parentElement);
+    // Trigger initial size
+    const rect = container.getBoundingClientRect();
+    const headerH = container.parentElement.querySelector('.card-header')?.offsetHeight || 0;
+    graph.width(rect.width).height(rect.height - headerH);
   }
-  function resizeCanvas() {
-    const rect = canvas.parentElement.getBoundingClientRect();
-    const headerH = canvas.parentElement.querySelector('.card-header')?.offsetHeight || 0;
-    W = rect.width;
-    H = rect.height - headerH;
-    canvas.width = W * DPR;
-    canvas.height = H * DPR;
-    canvas.style.width = W + 'px';
-    canvas.style.height = H + 'px';
-    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
-    layoutNodes();
+  // Color palette for distinguishing different WSS connections
+  const LINK_COLORS = [
+    [129, 140, 248],  // indigo
+    [52, 211, 153],   // emerald
+    [251, 146, 60],   // orange
+    [167, 139, 250],  // violet
+    [56, 189, 248],   // sky
+    [251, 191, 36],   // amber
+    [244, 114, 182],  // pink
+    [45, 212, 191],   // teal
+    [248, 113, 113],  // red
+    [163, 230, 53],   // lime
+  ];
+  let linkColorIndex = 0;
+  const linkColorMap = {};  // edge key → color index
+  function getLinkColorRgb(source, target) {
+    const s = typeof source === 'object' ? source.id : source;
+    const t = typeof target === 'object' ? target.id : target;
+    const key = [s, t].sort().join('::');
+    if (!(key in linkColorMap)) {
+      linkColorMap[key] = linkColorIndex % LINK_COLORS.length;
+      linkColorIndex++;
+    }
+    const c = LINK_COLORS[linkColorMap[key]];
+    return c[0] + ',' + c[1] + ',' + c[2];
   }
-  function updateMeshData() {
-    const allNodes = [
+  function buildGraphInputs() {
+    const allPeers = state.peers.map((p, i) => ({
+      id: p.nodeId,
+      type: p.connection === 'satellite' ? 'satellite' : (p.online ? (p.connection === 'direct' ? 'direct' : 'relay') : 'offline'),
+      data: p,
+    }));
+    const nodes = [
       { id: state.nodeId, type: 'self', data: state.local },
-      ...state.peers.map(p => ({
-        id: p.nodeId,
-        type: p.online ? (p.connection === 'direct' ? 'direct' : 'relay') : 'offline',
-        data: p,
-      })),
+      ...allPeers,
     ];
+    // Spread initial positions in a circle so nodes don't start at (0,0)
+    const radius = 120;
+    for (let i = 0; i < nodes.length; i++) {
+      const n = nodes[i];
+      if (n.x == null) {
+        const angle = (2 * Math.PI * i) / nodes.length - Math.PI / 2;
+        n.x = radius * Math.cos(angle);
+        n.y = radius * Math.sin(angle);
+      }
+    }
-    // Preserve positions for existing nodes
-    const oldPositions = {};
-    for (const n of meshNodes) oldPositions[n.id] = { x: n.x, y: n.y, vx: n.vx, vy: n.vy };
-    meshNodes = allNodes.map((n, i) => {
-      const old = oldPositions[n.id];
-      if (old) return { ...n, x: old.x, y: old.y, vx: old.vx, vy: old.vy };
-      // New node: random position
-      const angle = (i / allNodes.length) * Math.PI * 2 - Math.PI / 2;
-      const r = n.type === 'self' ? 0 : 120 + Math.random() * 40;
-      return {
-        ...n,
-        x: W / 2 + Math.cos(angle) * r,
-        y: H / 2 + Math.sin(angle) * r,
-        vx: 0,
-        vy: 0,
-      };
-    });
-    // Build edges
-    meshEdges = [];
-    const edgeSet = new Set();
+    const links = [];
+    const edgeMap = {};  // pairKey → link object (dedup, direct wins over relay)
     function addEdge(a, b, type) {
-      const key = [a, b].sort().join('::') + '::' + type;
-      if (edgeSet.has(key)) return;
-      edgeSet.add(key);
-      meshEdges.push({ from: a, to: b, type: type });
+      const pairKey = [a, b].sort().join('::');
+      const existing = edgeMap[pairKey];
+      // direct > relay > satellite: keep the stronger type
+      if (existing) {
+        if (existing.type === 'direct') return;  // already best
+        if (type === 'direct') { existing.type = 'direct'; return; }
+        return;  // keep first
+      }
+      getLinkColorRgb(a, b);  // pre-register color for this pair
+      const link = { source: a, target: b, type: type };
+      edgeMap[pairKey] = link;
+      links.push(link);
     }
-    // Edges from self to direct peers
     for (const p of state.peers) {
-      if (p.connection === 'direct') {
+      if (p.connection === 'satellite') {
+        addEdge(state.nodeId, p.nodeId, 'satellite');
+      } else if (p.connection === 'direct') {
         addEdge(state.nodeId, p.nodeId, 'direct');
       } else if (p.reachableVia) {
         addEdge(p.reachableVia, p.nodeId, 'relay');
         addEdge(state.nodeId, p.reachableVia, 'direct');
       }
     }
-    // Edges between remote peers (from directPeers data)
+    const nodeIds = new Set(nodes.map(n => n.id));
     for (const p of state.peers) {
       if (p.directPeers) {
         for (const dp of p.directPeers) {
-          if (dp !== state.nodeId) {
+          if (dp !== state.nodeId && nodeIds.has(dp)) {
             addEdge(p.nodeId, dp, 'direct');
           }
         }
       }
     }
-    layoutNodes();
+    return { nodes, links };
   }
-  function layoutNodes() {
-    // Pin self to center only if not manually dragged
-    const self = meshNodes.find(n => n.type === 'self');
-    if (self && !self._pinned) { self.x = W / 2; self.y = H / 2; }
+  function linkKey(l) {
+    const s = typeof l.source === 'object' ? l.source.id : l.source;
+    const t = typeof l.target === 'object' ? l.target.id : l.target;
+    return [s, t].sort().join('::');
   }
-  // Force simulation step
-  function simulateForces() {
-    const k = 0.005; // spring constant
-    const repulsion = 8000;
-    const damping = 0.85;
-    const center = { x: W / 2, y: H / 2 };
-    for (let i = 0; i < meshNodes.length; i++) {
-      const a = meshNodes[i];
-      if (a._pinned || (a.type === 'self' && !dragNode)) continue; // pinned
-      let fx = 0, fy = 0;
-      // Repulsion from all other nodes
-      for (let j = 0; j < meshNodes.length; j++) {
-        if (i === j) continue;
-        const b = meshNodes[j];
-        let dx = a.x - b.x;
-        let dy = a.y - b.y;
-        const d2 = dx * dx + dy * dy + 1;
-        const f = repulsion / d2;
-        fx += dx * f;
-        fy += dy * f;
-      }
-      // Spring to connected nodes
-      for (const edge of meshEdges) {
-        let other = null;
-        if (edge.from === a.id) other = meshNodes.find(n => n.id === edge.to);
-        else if (edge.to === a.id) other = meshNodes.find(n => n.id === edge.from);
-        if (!other) continue;
-        const dx = other.x - a.x;
-        const dy = other.y - a.y;
-        const d = Math.sqrt(dx * dx + dy * dy);
-        const desired = 150;
-        const f = k * (d - desired);
-        fx += dx / d * f;
-        fy += dy / d * f;
+  function updateMeshData() {
+    if (!graph) return;
+    const { nodes: newNodes, links: newLinks } = buildGraphInputs();
+    const { nodes: curNodes, links: curLinks } = graph.graphData();
+    // Check if topology actually changed
+    const curNodeIds = new Set(curNodes.map(n => n.id));
+    const newNodeIds = new Set(newNodes.map(n => n.id));
+    const curLinkKeys = new Set(curLinks.map(linkKey));
+    const newLinkKeys = new Set(newLinks.map(linkKey));
+    const nodesChanged = newNodeIds.size !== curNodeIds.size || [...newNodeIds].some(id => !curNodeIds.has(id));
+    const linksChanged = newLinkKeys.size !== curLinkKeys.size || [...newLinkKeys].some(k => !curLinkKeys.has(k));
+    // Always update node data (type, capabilities) in place
+    const curMap = {};
+    for (const n of curNodes) curMap[n.id] = n;
+    for (const nn of newNodes) {
+      const cur = curMap[nn.id];
+      if (cur) {
+        cur.type = nn.type;
+        cur.data = nn.data;
       }
-      // Gravity toward center
-      fx += (center.x - a.x) * 0.001;
-      fy += (center.y - a.y) * 0.001;
-      a.vx = (a.vx + fx) * damping;
-      a.vy = (a.vy + fy) * damping;
-      a.x += a.vx;
-      a.y += a.vy;
-      // Bounds
-      const pad = 60;
-      a.x = Math.max(pad, Math.min(W - pad, a.x));
-      a.y = Math.max(pad, Math.min(H - pad, a.y));
     }
-  }
-  let particleTime = 0;
-  function renderMesh() {
-    ctx.clearRect(0, 0, W, H);
-    // Grid background
-    ctx.strokeStyle = 'rgba(30, 32, 48, 0.5)';
-    ctx.lineWidth = 0.5;
-    const gridSize = 40;
-    for (let x = 0; x < W; x += gridSize) {
-      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
-    }
-    for (let y = 0; y < H; y += gridSize) {
-      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
-    }
-    particleTime += 0.015;
-    // Draw edges
-    for (const edge of meshEdges) {
-      const a = meshNodes.find(n => n.id === edge.from);
-      const b = meshNodes.find(n => n.id === edge.to);
-      if (!a || !b) continue;
-      const isDirect = edge.type === 'direct';
-      ctx.beginPath();
-      ctx.moveTo(a.x, a.y);
-      ctx.lineTo(b.x, b.y);
+    if (!nodesChanged && !linksChanged) return; // topology unchanged, skip
-      if (isDirect) {
-        ctx.strokeStyle = 'rgba(99, 102, 241, 0.3)';
-        ctx.lineWidth = 2;
-        ctx.setLineDash([]);
-      } else {
-        ctx.strokeStyle = 'rgba(251, 191, 36, 0.25)';
-        ctx.lineWidth = 1.5;
-        ctx.setLineDash([6, 4]);
-      }
-      ctx.stroke();
-      ctx.setLineDash([]);
-      // Animated particles along edge
-      const color = isDirect ? '99, 102, 241' : '251, 191, 36';
-      const dx = b.x - a.x;
-      const dy = b.y - a.y;
-      const len = Math.sqrt(dx * dx + dy * dy);
-      if (len < 10) continue;
-      for (let i = 0; i < 3; i++) {
-        const t = ((particleTime * 0.5 + i * 0.33) % 1);
-        const px = a.x + dx * t;
-        const py = a.y + dy * t;
-        ctx.beginPath();
-        ctx.arc(px, py, 2, 0, Math.PI * 2);
-        ctx.fillStyle = 'rgba(' + color + ', ' + (0.6 - t * 0.4) + ')';
-        ctx.fill();
-      }
+    // Topology changed — preserve positions of existing nodes
+    const posMap = {};
+    for (const n of curNodes) {
+      posMap[n.id] = { x: n.x, y: n.y, vx: n.vx, vy: n.vy, fx: n.fx, fy: n.fy };
     }
-    // Draw nodes
-    for (const node of meshNodes) {
-      const isHovered = hoveredNode === node.id;
-      const isSelected = selectedNode === node.id;
-      const r = node.type === 'self' ? 28 : 22;
-      // Glow
-      if (node.type !== 'offline') {
-        const glowColor = node.type === 'self' ? 'rgba(129,140,248,0.15)' :
-                          node.type === 'direct' ? 'rgba(52,211,153,0.12)' :
-                          'rgba(251,191,36,0.1)';
-        const grad = ctx.createRadialGradient(node.x, node.y, r, node.x, node.y, r * 2.5);
-        grad.addColorStop(0, glowColor);
-        grad.addColorStop(1, 'transparent');
-        ctx.fillStyle = grad;
-        ctx.fillRect(node.x - r * 3, node.y - r * 3, r * 6, r * 6);
-      }
-      // Node circle
-      ctx.beginPath();
-      ctx.arc(node.x, node.y, r, 0, Math.PI * 2);
-      const color = node.type === 'self' ? '#818cf8' :
-                    node.type === 'direct' ? '#34d399' :
-                    node.type === 'relay' ? '#fbbf24' : '#555d75';
-      ctx.fillStyle = isHovered || isSelected ? color : adjustAlpha(color, 0.8);
-      ctx.fill();
-      // Border
-      ctx.strokeStyle = isSelected ? '#fff' : isHovered ? adjustAlpha(color, 1) : adjustAlpha(color, 0.3);
-      ctx.lineWidth = isSelected ? 2.5 : isHovered ? 2 : 1.5;
-      ctx.stroke();
-      // Inner ring for self
-      if (node.type === 'self') {
-        ctx.beginPath();
-        ctx.arc(node.x, node.y, r - 6, 0, Math.PI * 2);
-        ctx.strokeStyle = 'rgba(255,255,255,0.3)';
-        ctx.lineWidth = 1;
-        ctx.stroke();
-      }
-      // Label
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.font = (node.type === 'self' ? '600 12px' : '500 11px') + ' -apple-system, system-ui, sans-serif';
-      ctx.fillStyle = '#fff';
-      ctx.fillText(node.id, node.x, node.y + r + 16);
-      // Capability counts below label
-      const data = node.data;
-      if (data) {
-        const parts = [];
-        const agents = data.agents?.length || 0;
-        const models = data.models?.length || 0;
-        if (models) parts.push(models + 'M');
-        if (agents) parts.push(agents + 'A');
-        if (parts.length) {
-          ctx.font = '10px -apple-system, system-ui, sans-serif';
-          ctx.fillStyle = 'rgba(255,255,255,0.4)';
-          ctx.fillText(parts.join(' · '), node.x, node.y + r + 30);
-        }
+    for (const n of newNodes) {
+      const old = posMap[n.id];
+      if (old) {
+        n.x = old.x; n.y = old.y;
+        n.vx = old.vx; n.vy = old.vy;
+        n.fx = old.fx; n.fy = old.fy;
       }
     }
-  }
-  function adjustAlpha(hex, alpha) {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
-  }
-  function renderLoop() {
-    simulateForces();
-    renderMesh();
-    animFrame = requestAnimationFrame(renderLoop);
-  }
-  function hitTest(mx, my) {
-    for (let i = meshNodes.length - 1; i >= 0; i--) {
-      const n = meshNodes[i];
-      const r = n.type === 'self' ? 28 : 22;
-      const dx = mx - n.x;
-      const dy = my - n.y;
-      if (dx * dx + dy * dy <= (r + 8) * (r + 8)) return n;
-    }
-    return null;
-  }
-  function getCanvasPos(e) {
-    const rect = canvas.getBoundingClientRect();
-    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
-  }
-  function onCanvasMouseDown(e) {
-    const { x, y } = getCanvasPos(e);
-    const hit = hitTest(x, y);
-    if (hit) {
-      dragNode = hit;
-      dragOffset.x = x - hit.x;
-      dragOffset.y = y - hit.y;
-      hit._pinned = true;
-      canvas.style.cursor = 'grabbing';
-      // Also select on click
-      selectedNode = hit.id;
-      updateDetail(hit.id);
-      setChatMode(hit.id !== state.nodeId ? 'handoff' : 'model', hit.id !== state.nodeId ? hit.id : null);
-    }
-  }
-  function onCanvasMouseMove(e) {
-    const { x, y } = getCanvasPos(e);
-    if (dragNode) {
-      dragNode.x = x - dragOffset.x;
-      dragNode.y = y - dragOffset.y;
-      canvas.style.cursor = 'grabbing';
-      return;
-    }
-    const hit = hitTest(x, y);
-    hoveredNode = hit ? hit.id : null;
-    canvas.style.cursor = hit ? 'grab' : 'default';
-  }
-  function onCanvasMouseUp(e) {
-    if (dragNode) {
-      // Keep self pinned to where it was dropped; release others after a delay
-      if (dragNode.type !== 'self') {
-        const node = dragNode;
-        setTimeout(() => { node._pinned = false; }, 2000);
-      }
-      dragNode = null;
-      canvas.style.cursor = 'default';
-    } else {
-      const { x, y } = getCanvasPos(e);
-      const hit = hitTest(x, y);
-      if (!hit) {
-        selectedNode = null;
-        $('node-detail').classList.add('hidden');
-        setChatMode('model', null);
-      }
-    }
+    graph.graphData({ nodes: newNodes, links: newLinks });
   }
   // ── Node detail panel ──
@@ -1109,14 +1177,29 @@ const JS = `
       $('node-detail').classList.add('hidden');
       return;
     }
+    const isSat = nodeData.connection === 'satellite';
     $('node-detail').classList.remove('hidden');
     $('detail-title').textContent = nodeId;
+    // Status dot color
+    const dot = $('detail-status-dot');
+    const dotColor = isLocal ? 'var(--accent)' : isSat ? '#f472b6' : nodeData.online ? 'var(--green)' : 'var(--red)';
+    dot.style.background = dotColor;
+    if (isLocal || isSat || nodeData.online) dot.style.boxShadow = '0 0 6px ' + dotColor;
+    else dot.style.boxShadow = 'none';
     const statusBadge = $('detail-status');
+    statusBadge.style.background = '';
+    statusBadge.style.color = '';
     if (isLocal) {
       statusBadge.textContent = 'Self';
       statusBadge.className = 'badge badge-self';
+    } else if (isSat) {
+      statusBadge.textContent = 'Satellite';
+      statusBadge.style.background = 'rgba(244,114,182,0.15)';
+      statusBadge.style.color = '#f472b6';
+      statusBadge.className = 'badge';
     } else if (nodeData.online) {
       statusBadge.textContent = nodeData.connection === 'direct' ? 'Direct' : 'Relay';
       statusBadge.className = 'badge ' + (nodeData.connection === 'direct' ? 'badge-online' : 'badge-relay');
@@ -1127,6 +1210,41 @@ const JS = `
     let html = '';
+    // Satellite node detail
+    if (isSat) {
+      html += '<div class="detail-section">';
+      html += '<div class="detail-label">Network</div>';
+      html += '<div class="detail-grid">';
+      if (nodeData.cellular) {
+        html += '<span class="detail-key">Type</span><span>Cellular</span>';
+      } else if (nodeData.ssid) {
+        html += '<span class="detail-key">WiFi</span><span>' + esc(nodeData.ssid) + '</span>';
+      }
+      if (nodeData.ip) html += '<span class="detail-key">IP</span><span>' + esc(nodeData.ip) + '</span>';
+      if (nodeData.router) html += '<span class="detail-key">Router</span><span>' + esc(nodeData.router) + '</span>';
+      if (nodeData.country) html += '<span class="detail-key">Country</span><span>' + esc(nodeData.country) + '</span>';
+      if (nodeData.location) html += '<span class="detail-key">Location</span><span>' + esc(nodeData.location) + '</span>';
+      if (nodeData.platform) html += '<span class="detail-key">Platform</span><span>' + esc(nodeData.platform) + '</span>';
+      if (typeof nodeData.battery === 'number') {
+        const bat = nodeData.battery + '%' + (nodeData.charging ? ' (charging)' : '');
+        html += '<span class="detail-key">Battery</span><span>' + esc(bat) + '</span>';
+      }
+      if (nodeData.lastSeen) html += '<span class="detail-key">Last seen</span><span>' + new Date(nodeData.lastSeen).toLocaleTimeString() + '</span>';
+      html += '</div></div>';
+      const satTools = nodeData.toolProxy?.allow || [];
+      if (satTools.length > 0) {
+        html += '<div class="detail-section">';
+        html += '<div class="detail-label">Tools (' + satTools.length + ')</div>';
+        html += '<div style="display:flex;flex-wrap:wrap;gap:4px">';
+        for (const t of satTools) {
+          html += '<span class="badge" style="background:rgba(244,114,182,0.1);color:#f472b6;font-size:11px">' + esc(t) + '</span>';
+        }
+        html += '</div></div>';
+      }
+      $('detail-body').innerHTML = html;
+      return;
+    }
     // Device info
     if (nodeData.deviceInfo) {
       const d = nodeData.deviceInfo;
@@ -1179,6 +1297,33 @@ const JS = `
       html += '</div></div>';
     }
+    // Cluster Tools
+    if (nodeData.clusterTools?.length) {
+      html += '<div class="detail-section">';
+      html += '<div class="detail-label collapsible" onclick="this.classList.toggle(&#39;expanded&#39;);this.nextElementSibling.classList.toggle(&#39;expanded&#39;)">Cluster Tools (' + nodeData.clusterTools.length + ')</div>';
+      html += '<div class="detail-items">';
+      for (const t of nodeData.clusterTools) {
+        html += '<div class="item-row"><span class="item-icon" style="background:var(--orange, #f59e0b)"></span>';
+        html += '<span>' + esc(t) + '</span></div>';
+      }
+      html += '</div></div>';
+    }
+    // Tool Proxy
+    if (nodeData.toolProxy) {
+      html += '<div class="detail-section">';
+      html += '<div class="detail-label">Tool Proxy</div>';
+      html += '<div class="detail-grid">';
+      html += '<span class="detail-key">Status</span><span>' + (nodeData.toolProxy.enabled ? '<span style="color:var(--green)">Enabled</span>' : '<span style="color:var(--text-dim)">Disabled</span>') + '</span>';
+      if (nodeData.toolProxy.enabled && nodeData.toolProxy.allow?.length) {
+        html += '<span class="detail-key">Allow</span><span>' + nodeData.toolProxy.allow.map(function(t) { return esc(t); }).join(', ') + '</span>';
+      }
+      if (nodeData.toolProxy.enabled && nodeData.toolProxy.deny?.length) {
+        html += '<span class="detail-key">Deny</span><span>' + nodeData.toolProxy.deny.map(function(t) { return esc(t); }).join(', ') + '</span>';
+      }
+      html += '</div></div>';
+    }
     // Tags
     if (nodeData.tags?.length) {
       html += '<div class="detail-section">';