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

clawmatrix 0.1.14 → 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 (25) hide show

package/BOOTSTRAP.md +55 -8
package/package.json +4 -2
package/src/auth.ts +42 -12
package/src/cluster-service.ts +35 -7
package/src/compat.ts +3 -0
package/src/config.ts +57 -6
package/src/connection.ts +34 -8
package/src/device-info.ts +48 -0
package/src/handoff.ts +330 -21
package/src/http-utils.ts +35 -0
package/src/index.ts +47 -19
package/src/model-proxy.ts +546 -242
package/src/peer-manager.ts +65 -6
package/src/router.ts +89 -47
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 +117 -0
package/src/web-ui.ts +694 -342
package/src/web.ts +726 -50

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,33 +73,42 @@ ${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>Chat</h2>
+          <h2 id="chat-title">Chat</h2>
           <div class="chat-selects">
             <select id="chat-model" title="Model">
               <option value="">Select model...</option>
             </select>
+            <select id="chat-agent" title="Agent" class="hidden">
+              <option value="">Select agent...</option>
+            </select>
           </div>
         </div>
         <div id="chat-messages" class="chat-messages">
@@ -310,10 +320,7 @@ body {
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 16px;
-  gap: 16px;
   min-width: 0;
-  overflow-y: auto;
 }
 .panel-right {
@@ -365,22 +372,84 @@ 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;
 }
-/* Node detail */
-.detail-card { flex-shrink: 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;
+}
+.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;
+  overflow-y: auto;
 }
 .detail-body .detail-section {
@@ -395,6 +464,34 @@ body {
   margin-bottom: 4px;
 }
+.detail-body .detail-label.collapsible {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.detail-body .detail-label.collapsible::before {
+  content: '▶';
+  font-size: 8px;
+  transition: transform 0.15s;
+  display: inline-block;
+}
+.detail-body .detail-label.collapsible.expanded::before {
+  transform: rotate(90deg);
+}
+.detail-body .detail-items {
+  display: none;
+  padding-top: 2px;
+}
+.detail-body .detail-items.expanded {
+  display: block;
+}
 .detail-body .detail-tags {
   display: flex;
   flex-wrap: wrap;
@@ -410,6 +507,18 @@ body {
   color: var(--text-secondary);
 }
+.detail-body .detail-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  font-size: 12px;
+}
+.detail-body .detail-key {
+  color: var(--text-dim);
+  font-weight: 500;
+}
 .detail-body .item-row {
   display: flex;
   align-items: center;
@@ -428,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;
@@ -582,13 +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);
@@ -597,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) => {
@@ -651,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() {
@@ -698,341 +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',
+  };
-  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 GLOW_COLORS = {
+    self: [129, 140, 248],
+    direct: [52, 211, 153],
+    relay: [251, 191, 36],
+    satellite: [244, 114, 182],
+  };
-  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();
-  }
+  let frameCount = 0;
-  function updateMeshData() {
-    const allNodes = [
-      { 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,
-      })),
-    ];
+  function initMesh() {
+    const container = $('mesh-container');
-    // 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,
-      };
+    // Close button for detail panel
+    $('detail-close').addEventListener('click', () => {
+      selectedNode = null;
+      $('node-detail').classList.add('hidden');
+      setChatMode('model', null);
     });
-    // Build edges
-    meshEdges = [];
-    for (const p of state.peers) {
-      if (p.connection === 'direct') {
-        meshEdges.push({ from: state.nodeId, to: p.nodeId, type: 'direct' });
-      } else if (p.reachableVia) {
-        meshEdges.push({ from: p.reachableVia, to: p.nodeId, type: 'relay' });
-        // Also ensure edge from self to relay node
-        if (!meshEdges.find(e => (e.from === state.nodeId && e.to === p.reachableVia) || (e.to === state.nodeId && e.from === p.reachableVia))) {
-          meshEdges.push({ from: state.nodeId, to: p.reachableVia, type: 'direct' });
+    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);
         }
-      }
-    }
-    layoutNodes();
-  }
+        // 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();
+        }
-  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; }
-  }
+        // 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();
-  // 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;
-      }
+        // Border
+        ctx.strokeStyle = isSelected ? '#fff' : isHovered ? color : color + '50';
+        ctx.lineWidth = isSelected ? 2 : isHovered ? 1.5 : 1;
+        ctx.stroke();
-      // 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;
-      }
+        // 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();
+        }
-      // Gravity toward center
-      fx += (center.x - a.x) * 0.001;
-      fy += (center.y - a.y) * 0.001;
+        // 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);
-      a.vx = (a.vx + fx) * damping;
-      a.vy = (a.vy + fy) * damping;
-      a.x += a.vx;
-      a.y += a.vy;
+        // Glow layer
+        ctx.strokeStyle = 'rgba(' + rgb + ',0.12)';
+        ctx.lineWidth = isDirect ? 6 : 4;
+        ctx.setLineDash([]);
+        ctx.stroke();
-      // 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));
-    }
+        // 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);
   }
-  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();
+  // 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];
+  }
-    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 (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();
+  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 },
+      ...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);
       }
     }
-    // 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);
+    const links = [];
+    const edgeMap = {};  // pairKey → link object (dedup, direct wins over relay)
+    function addEdge(a, b, 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);
+    }
-      // 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();
+    for (const p of state.peers) {
+      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');
       }
-      // 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);
+    }
+    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 && nodeIds.has(dp)) {
+            addEdge(p.nodeId, dp, 'direct');
+          }
         }
       }
     }
-  }
-  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 + ')';
+    return { nodes, links };
   }
-  function renderLoop() {
-    simulateForces();
-    renderMesh();
-    animFrame = requestAnimationFrame(renderLoop);
+  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('::');
   }
-  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;
+  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;
+      }
     }
-    return null;
-  }
-  function getCanvasPos(e) {
-    const rect = canvas.getBoundingClientRect();
-    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
-  }
+    if (!nodesChanged && !linksChanged) return; // topology unchanged, skip
-  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);
+    // 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 };
     }
-  }
-  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');
+    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;
       }
     }
+    graph.graphData({ nodes: newNodes, links: newLinks });
   }
   // ── Node detail panel ──
@@ -1043,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');
@@ -1061,6 +1210,57 @@ 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;
+      html += '<div class="detail-section">';
+      html += '<div class="detail-label">System</div>';
+      html += '<div class="detail-grid">';
+      html += '<span class="detail-key">OS</span><span>' + esc(d.os) + '</span>';
+      html += '<span class="detail-key">Arch</span><span>' + esc(d.arch) + '</span>';
+      html += '<span class="detail-key">Host</span><span>' + esc(d.hostname) + '</span>';
+      html += '<span class="detail-key">CPU</span><span>' + esc(d.cpuModel) + ' (' + d.cpuCores + ' cores)</span>';
+      html += '<span class="detail-key">Memory</span><span>' + formatMemory(d.totalMemoryMB) + '</span>';
+      if (d.openclawVersion && d.openclawVersion !== 'unknown') html += '<span class="detail-key">OpenClaw</span><span>' + esc(d.openclawVersion) + '</span>';
+      html += '</div>';
+      html += '</div>';
+    }
     // Connection info
     if (!isLocal && nodeData.connection === 'relay' && nodeData.reachableVia) {
       html += '<div class="detail-section">';
@@ -1072,27 +1272,56 @@ const JS = `
     // Models
     if (nodeData.models?.length) {
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">Models</div>';
+      html += '<div class="detail-label collapsible" onclick="this.classList.toggle(&#39;expanded&#39;);this.nextElementSibling.classList.toggle(&#39;expanded&#39;)">Models (' + nodeData.models.length + ')</div>';
+      html += '<div class="detail-items">';
       for (const m of nodeData.models) {
         html += '<div class="item-row"><span class="item-icon" style="background:var(--accent)"></span>';
         html += '<span>' + esc(m.id) + '</span>';
         if (m.description) html += '<span style="color:var(--text-dim);font-size:11px"> — ' + esc(m.description) + '</span>';
         html += '</div>';
       }
-      html += '</div>';
+      html += '</div></div>';
     }
     // Agents
     if (nodeData.agents?.length) {
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">Agents</div>';
+      html += '<div class="detail-label collapsible" onclick="this.classList.toggle(&#39;expanded&#39;);this.nextElementSibling.classList.toggle(&#39;expanded&#39;)">Agents (' + nodeData.agents.length + ')</div>';
+      html += '<div class="detail-items">';
       for (const a of nodeData.agents) {
         html += '<div class="item-row"><span class="item-icon" style="background:var(--green)"></span>';
         html += '<span>' + esc(a.id) + '</span>';
         if (a.description) html += '<span style="color:var(--text-dim);font-size:11px"> — ' + esc(a.description) + '</span>';
         html += '</div>';
       }
-      html += '</div>';
+      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
@@ -1116,6 +1345,51 @@ const JS = `
   function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }
+  function formatMemory(mb) {
+    if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB';
+    return mb + ' MB';
+  }
+  // ── Chat mode ──
+  function setChatMode(mode, nodeId) {
+    if (chatMode === mode && handoffNodeId === nodeId) return;
+    chatMode = mode;
+    handoffNodeId = nodeId;
+    const title = $('chat-title');
+    const modelSel = $('chat-model');
+    const agentSel = $('chat-agent');
+    if (mode === 'handoff' && nodeId) {
+      title.textContent = 'Handoff \\u2192 ' + nodeId;
+      modelSel.classList.add('hidden');
+      agentSel.classList.remove('hidden');
+      updateAgentSelect();
+    } else {
+      title.textContent = 'Chat';
+      modelSel.classList.remove('hidden');
+      agentSel.classList.add('hidden');
+    }
+    // Clear conversation when switching modes
+    chatMessages = [];
+    renderChatMessages();
+  }
+  function updateAgentSelect() {
+    const sel = $('chat-agent');
+    const node = state.peers.find(p => p.nodeId === handoffNodeId);
+    sel.innerHTML = '<option value="">Select agent...</option>';
+    if (node?.agents) {
+      for (const a of node.agents) {
+        const opt = document.createElement('option');
+        opt.value = a.id;
+        opt.textContent = a.id + (a.description ? ' \\u2014 ' + a.description : '');
+        sel.appendChild(opt);
+      }
+    }
+  }
   // ── Model select ──
   function updateModelSelect() {
     const sel = $('chat-model');
@@ -1169,23 +1443,27 @@ const JS = `
     e.preventDefault();
     if (chatStreaming) return;
-    const modelVal = $('chat-model').value;
-    if (!modelVal) { alert('Please select a model'); return; }
     const text = chatInput.value.trim();
     if (!text) return;
+    if (chatMode === 'handoff') {
+      await submitHandoff(text);
+    } else {
+      await submitChat(text);
+    }
+  });
+  async function submitChat(text) {
+    const modelVal = $('chat-model').value;
+    if (!modelVal) { alert('Please select a model'); return; }
     chatInput.value = '';
     chatInput.style.height = 'auto';
     const [nodeId, ...modelParts] = modelVal.split('/');
     const model = modelParts.join('/');
-    // Add user message
     chatMessages.push({ role: 'user', content: text });
-    renderChatMessages();
-    // Add placeholder for assistant
     chatMessages.push({ role: 'assistant', content: '' });
     renderChatMessages();
@@ -1238,7 +1516,6 @@ const JS = `
         }
       }
-      // Clean up empty assistant message
       if (!chatMessages[chatMessages.length - 1].content) {
         chatMessages[chatMessages.length - 1] = { role: 'error', content: 'No response received' };
       }
@@ -1251,11 +1528,86 @@ const JS = `
       $('chat-send').disabled = false;
       chatInput.focus();
     }
-  });
+  }
+  async function submitHandoff(text) {
+    const agent = $('chat-agent').value;
+    if (!agent) { alert('Please select an agent'); return; }
+    chatInput.value = '';
+    chatInput.style.height = 'auto';
+    chatMessages.push({ role: 'user', content: text });
+    chatMessages.push({ role: 'assistant', content: '' });
+    renderChatMessages();
+    chatStreaming = true;
+    $('chat-send').disabled = true;
+    try {
+      const res = await fetch('/api/handoff', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nodeId: handoffNodeId, agent, task: text }),
+      });
+      if (!res.ok) {
+        const err = await res.text();
+        chatMessages[chatMessages.length - 1] = { role: 'error', content: 'Error: ' + err };
+        renderChatMessages();
+        return;
+      }
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\\n');
+        buffer = lines.pop();
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const data = line.slice(6).trim();
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.type === 'delta') {
+              chatMessages[chatMessages.length - 1].content += parsed.content;
+              renderChatMessages();
+            } else if (parsed.type === 'error') {
+              chatMessages[chatMessages.length - 1] = { role: 'error', content: 'Error: ' + parsed.error };
+              renderChatMessages();
+            }
+            // type === 'done' — stream already accumulated the content
+          } catch {}
+        }
+      }
+      if (!chatMessages[chatMessages.length - 1].content) {
+        chatMessages[chatMessages.length - 1] = { role: 'error', content: 'No response received' };
+      }
+      renderChatMessages();
+    } catch (err) {
+      chatMessages[chatMessages.length - 1] = { role: 'error', content: 'Error: ' + err.message };
+      renderChatMessages();
+    } finally {
+      chatStreaming = false;
+      $('chat-send').disabled = false;
+      chatInput.focus();
+    }
+  }
   function renderChatMessages() {
     if (chatMessages.length === 0) {
-      chatMsgs.innerHTML = '<div class="chat-empty">Select a model and start chatting with your cluster.</div>';
+      const hint = chatMode === 'handoff'
+        ? 'Select an agent and describe your task.'
+        : 'Select a model and start chatting with your cluster.';
+      chatMsgs.innerHTML = '<div class="chat-empty">' + hint + '</div>';
       return;
     }