npm - clawmatrix - Versions diffs - 0.2.11 → 0.3.1 - Mend

clawmatrix 0.2.11 → 0.3.1

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 (35) hide show

package/LICENSE +27 -0
package/README.md +123 -12
package/package.json +2 -1
package/src/acp-proxy.ts +407 -68
package/src/cli.ts +478 -10
package/src/cluster-service.ts +114 -14
package/src/compat.ts +0 -6
package/src/config.ts +8 -5
package/src/connection.ts +61 -55
package/src/e2e/helpers.ts +1 -5
package/src/file-transfer.ts +64 -14
package/src/handoff.ts +21 -8
package/src/index.ts +234 -5
package/src/knowledge-sync.ts +44 -6
package/src/model-proxy.ts +35 -10
package/src/peer-manager.ts +81 -13
package/src/rate-limiter.ts +16 -10
package/src/router.ts +115 -33
package/src/sentinel-manager.ts +51 -0
package/src/sentinel.ts +13 -3
package/src/tool-proxy.ts +12 -4
package/src/tools/cluster-diagnostic.ts +3 -2
package/src/tools/cluster-edit.ts +2 -1
package/src/tools/cluster-events.ts +3 -1
package/src/tools/cluster-exec.ts +2 -0
package/src/tools/cluster-handoff.ts +3 -1
package/src/tools/cluster-peers.ts +3 -1
package/src/tools/cluster-read.ts +4 -1
package/src/tools/cluster-send.ts +2 -1
package/src/tools/cluster-terminal.ts +4 -7
package/src/tools/cluster-tool.ts +2 -2
package/src/tools/cluster-write.ts +3 -1
package/src/types.ts +103 -1
package/src/web.ts +2 -10
package/src/web-ui.ts +0 -1622

package/src/web-ui.ts DELETED Viewed

@@ -1,1622 +0,0 @@
-/** Returns the full HTML for the ClawMatrix dashboard SPA. */
-export function renderDashboard(nodeId: string): string {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>ClawMatrix — ${esc(nodeId)}</title>
-<style>
-${CSS}
-</style>
-<script src="https://cdn.jsdelivr.net/npm/force-graph@1/dist/force-graph.min.js"></script>
-</head>
-<body>
-<!-- Login -->
-<div id="login-view" class="login-view">
-  <div class="login-card">
-    <div class="login-logo">
-      <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-        <circle cx="24" cy="24" r="6" fill="#818cf8"/>
-        <circle cx="10" cy="12" r="4" fill="#6366f1" opacity=".7"/>
-        <circle cx="38" cy="12" r="4" fill="#6366f1" opacity=".7"/>
-        <circle cx="10" cy="36" r="4" fill="#6366f1" opacity=".7"/>
-        <circle cx="38" cy="36" r="4" fill="#6366f1" opacity=".7"/>
-        <line x1="24" y1="24" x2="10" y2="12" stroke="#6366f1" stroke-width="1.5" opacity=".5"/>
-        <line x1="24" y1="24" x2="38" y2="12" stroke="#6366f1" stroke-width="1.5" opacity=".5"/>
-        <line x1="24" y1="24" x2="10" y2="36" stroke="#6366f1" stroke-width="1.5" opacity=".5"/>
-        <line x1="24" y1="24" x2="38" y2="36" stroke="#6366f1" stroke-width="1.5" opacity=".5"/>
-        <line x1="10" y1="12" x2="38" y2="12" stroke="#6366f1" stroke-width="1" opacity=".3"/>
-        <line x1="38" y1="12" x2="38" y2="36" stroke="#6366f1" stroke-width="1" opacity=".3"/>
-        <line x1="38" y1="36" x2="10" y2="36" stroke="#6366f1" stroke-width="1" opacity=".3"/>
-        <line x1="10" y1="36" x2="10" y2="12" stroke="#6366f1" stroke-width="1" opacity=".3"/>
-      </svg>
-    </div>
-    <h1>ClawMatrix</h1>
-    <p class="login-subtitle">Mesh Cluster Dashboard</p>
-    <form id="login-form" autocomplete="off">
-      <input type="password" id="login-token" placeholder="Access Token" autocomplete="current-password" required>
-      <button type="submit">Connect</button>
-      <p id="login-error" class="login-error"></p>
-    </form>
-  </div>
-</div>
-<!-- Dashboard -->
-<div id="dashboard" class="dashboard hidden">
-  <!-- Header -->
-  <header class="header">
-    <div class="header-left">
-      <svg width="28" height="28" viewBox="0 0 48 48" fill="none" class="header-logo">
-        <circle cx="24" cy="24" r="6" fill="#818cf8"/>
-        <circle cx="10" cy="12" r="4" fill="#6366f1" opacity=".7"/>
-        <circle cx="38" cy="12" r="4" fill="#6366f1" opacity=".7"/>
-        <circle cx="10" cy="36" r="4" fill="#6366f1" opacity=".7"/>
-        <circle cx="38" cy="36" r="4" fill="#6366f1" opacity=".7"/>
-        <line x1="24" y1="24" x2="10" y2="12" stroke="#6366f1" stroke-width="1.5" opacity=".5"/>
-        <line x1="24" y1="24" x2="38" y2="12" stroke="#6366f1" stroke-width="1.5" opacity=".5"/>
-        <line x1="24" y1="24" x2="10" y2="36" stroke="#6366f1" stroke-width="1.5" opacity=".5"/>
-        <line x1="24" y1="24" x2="38" y2="36" stroke="#6366f1" stroke-width="1.5" opacity=".5"/>
-      </svg>
-      <span class="header-title">ClawMatrix</span>
-      <span id="header-node" class="header-node"></span>
-    </div>
-    <div class="header-right">
-      <span id="header-status" class="status-dot offline"></span>
-      <span id="header-uptime" class="header-uptime"></span>
-      <button id="btn-logout" class="btn-ghost" title="Logout">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
-      </button>
-    </div>
-  </header>
-  <!-- Main content -->
-  <div class="main">
-    <!-- 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>
-        <div id="mesh-container"></div>
-      </div>
-    </div>
-    <!-- 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>
-          <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">
-          <div class="chat-empty">Select a model and start chatting with your cluster.</div>
-        </div>
-        <form id="chat-form" class="chat-input-row">
-          <textarea id="chat-input" placeholder="Type a message..." rows="1"></textarea>
-          <button type="submit" id="chat-send" title="Send">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
-          </button>
-        </form>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-${JS}
-</script>
-</body>
-</html>`;
-}
-function esc(s: string): string {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-// ── CSS ─────────────────────────────────────────────────────────────
-const CSS = `
-:root {
-  --bg: #08090d;
-  --bg-card: #0f1117;
-  --bg-card-hover: #161822;
-  --border: #1e2030;
-  --border-subtle: #151725;
-  --text: #e2e8f0;
-  --text-secondary: #8b92a8;
-  --text-dim: #555d75;
-  --accent: #818cf8;
-  --accent-dim: #6366f1;
-  --accent-glow: rgba(99, 102, 241, 0.15);
-  --green: #34d399;
-  --green-dim: rgba(52, 211, 153, 0.15);
-  --orange: #fbbf24;
-  --orange-dim: rgba(251, 191, 36, 0.15);
-  --red: #f87171;
-  --red-dim: rgba(248, 113, 113, 0.15);
-  --radius: 10px;
-  --radius-sm: 6px;
-}
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', system-ui, sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  overflow: hidden;
-  height: 100vh;
-}
-.hidden { display: none !important; }
-/* Login */
-.login-view {
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg);
-  background-image:
-    radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.08) 0%, transparent 50%),
-    radial-gradient(ellipse at 70% 80%, rgba(99,102,241,0.05) 0%, transparent 50%);
-}
-.login-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 48px 40px 40px;
-  width: 380px;
-  text-align: center;
-  box-shadow: 0 0 80px rgba(99,102,241,0.06);
-}
-.login-logo { margin-bottom: 20px; }
-.login-card h1 {
-  font-size: 24px;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-  margin-bottom: 4px;
-}
-.login-subtitle {
-  color: var(--text-secondary);
-  font-size: 14px;
-  margin-bottom: 32px;
-}
-.login-card input {
-  width: 100%;
-  padding: 12px 16px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text);
-  font-size: 14px;
-  outline: none;
-  transition: border-color 0.2s;
-}
-.login-card input:focus {
-  border-color: var(--accent-dim);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-.login-card button {
-  width: 100%;
-  padding: 12px;
-  margin-top: 16px;
-  background: var(--accent-dim);
-  color: #fff;
-  border: none;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s, transform 0.1s;
-}
-.login-card button:hover { background: var(--accent); }
-.login-card button:active { transform: scale(0.98); }
-.login-error {
-  color: var(--red);
-  font-size: 13px;
-  margin-top: 12px;
-  min-height: 20px;
-}
-/* Header */
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 56px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-card);
-  flex-shrink: 0;
-}
-.header-left { display: flex; align-items: center; gap: 10px; }
-.header-title { font-weight: 700; font-size: 16px; letter-spacing: -0.3px; }
-.header-node {
-  font-size: 13px;
-  color: var(--text-secondary);
-  padding: 2px 10px;
-  background: var(--accent-glow);
-  border-radius: 12px;
-  border: 1px solid rgba(99,102,241,0.2);
-}
-.header-right { display: flex; align-items: center; gap: 14px; }
-.header-uptime {
-  font-size: 12px;
-  color: var(--text-dim);
-  font-variant-numeric: tabular-nums;
-}
-.status-dot {
-  width: 8px; height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-}
-.status-dot.online { background: var(--green); box-shadow: 0 0 8px var(--green); }
-.status-dot.offline { background: var(--red); }
-.btn-ghost {
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
-  padding: 6px 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  transition: color 0.2s, border-color 0.2s;
-}
-.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }
-/* Dashboard layout */
-.dashboard {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-.main {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.panel-left {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.panel-right {
-  width: 420px;
-  min-width: 320px;
-  border-left: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-}
-/* Cards */
-.card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-.card-header h2 {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-secondary);
-}
-.badge {
-  font-size: 11px;
-  padding: 2px 10px;
-  border-radius: 10px;
-  font-weight: 600;
-}
-.badge-online { background: var(--green-dim); color: var(--green); }
-.badge-relay { background: var(--orange-dim); color: var(--orange); }
-.badge-offline { background: var(--red-dim); color: var(--red); }
-.badge-self { background: var(--accent-glow); color: var(--accent); }
-/* Mesh canvas */
-.mesh-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  border-radius: 0;
-  border: none;
-}
-#mesh-container {
-  flex: 1;
-  width: 100%;
-  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;
-}
-.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: 12px 16px;
-  font-size: 13px;
-  line-height: 1.7;
-  overflow-y: auto;
-}
-.detail-body .detail-section {
-  margin-bottom: 12px;
-}
-.detail-body .detail-label {
-  color: var(--text-dim);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  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;
-  gap: 6px;
-}
-.detail-body .tag {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  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;
-  gap: 8px;
-  padding: 4px 0;
-}
-.detail-body .item-icon {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-/* Chat */
-.chat-card {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 50%;
-  min-height: 0;
-  border-radius: 0;
-  border: none;
-  border-top: none;
-}
-.chat-selects {
-  display: flex;
-  gap: 8px;
-}
-.chat-selects select {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: var(--radius-sm);
-  outline: none;
-  cursor: pointer;
-  max-width: 200px;
-}
-.chat-selects select:focus {
-  border-color: var(--accent-dim);
-}
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.chat-empty {
-  color: var(--text-dim);
-  font-size: 13px;
-  text-align: center;
-  margin: auto;
-  padding: 40px 20px;
-}
-.chat-msg {
-  max-width: 90%;
-  padding: 10px 14px;
-  border-radius: 12px;
-  font-size: 13px;
-  line-height: 1.6;
-  word-break: break-word;
-  white-space: pre-wrap;
-}
-.chat-msg.user {
-  align-self: flex-end;
-  background: var(--accent-dim);
-  color: #fff;
-  border-bottom-right-radius: 4px;
-}
-.chat-msg.assistant {
-  align-self: flex-start;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-bottom-left-radius: 4px;
-}
-.chat-msg.error {
-  align-self: center;
-  background: var(--red-dim);
-  color: var(--red);
-  font-size: 12px;
-}
-.chat-input-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid var(--border-subtle);
-  background: var(--bg-card);
-}
-.chat-input-row textarea {
-  flex: 1;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-radius: var(--radius-sm);
-  padding: 10px 14px;
-  font-size: 13px;
-  font-family: inherit;
-  resize: none;
-  outline: none;
-  max-height: 120px;
-  line-height: 1.5;
-  transition: border-color 0.2s;
-}
-.chat-input-row textarea:focus {
-  border-color: var(--accent-dim);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-.chat-input-row button {
-  width: 38px;
-  height: 38px;
-  border-radius: var(--radius-sm);
-  background: var(--accent-dim);
-  color: #fff;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: background 0.2s, transform 0.1s;
-}
-.chat-input-row button:hover { background: var(--accent); }
-.chat-input-row button:active { transform: scale(0.95); }
-.chat-input-row button:disabled { opacity: 0.4; cursor: not-allowed; }
-/* Scrollbar */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
-/* Responsive */
-@media (max-width: 860px) {
-  .main { flex-direction: column; }
-  .panel-right {
-    width: 100%;
-    border-left: none;
-    border-top: 1px solid var(--border);
-    height: 50vh;
-  }
-  .panel-left { overflow-y: auto; }
-}
-`;
-// ── JavaScript ──────────────────────────────────────────────────────
-const JS = `
-(function() {
-  'use strict';
-  // ── State ──
-  let state = { local: null, peers: [], nodeId: '', uptime: 0 };
-  let selectedNode = null;
-  let chatMessages = [];
-  let chatStreaming = false;
-  let chatMode = 'model'; // 'model' | 'handoff'
-  let handoffNodeId = null;
-  let hoveredNode = null;
-  let pollTimer = null;
-  let graph = null;
-  // ── DOM refs ──
-  const $ = (id) => document.getElementById(id);
-  const loginView = $('login-view');
-  const dashboard = $('dashboard');
-  const loginForm = $('login-form');
-  const loginToken = $('login-token');
-  const loginError = $('login-error');
-  // ── Auth ──
-  loginForm.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    loginError.textContent = '';
-    try {
-      const res = await fetch('/api/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ token: loginToken.value }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        loginError.textContent = data.error || 'Login failed';
-        return;
-      }
-      loginView.classList.add('hidden');
-      dashboard.classList.remove('hidden');
-      startDashboard();
-    } catch (err) {
-      loginError.textContent = 'Connection failed';
-    }
-  });
-  $('btn-logout').addEventListener('click', async () => {
-    await fetch('/api/logout', { method: 'POST' });
-    chatMessages = [];
-    stopDashboard();
-    dashboard.classList.add('hidden');
-    loginView.classList.remove('hidden');
-    loginToken.value = '';
-  });
-  // ── Init check (try with existing cookie) ──
-  (async () => {
-    try {
-      const res = await fetch('/api/status');
-      if (res.ok) {
-        loginView.classList.add('hidden');
-        dashboard.classList.remove('hidden');
-        const data = await res.json();
-        updateState(data);
-        startDashboard();
-      }
-    } catch {}
-  })();
-  // ── Dashboard lifecycle ──
-  function startDashboard() {
-    initMesh();
-    pollStatus();
-    pollTimer = setInterval(pollStatus, 3000);
-  }
-  function stopDashboard() {
-    if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
-  }
-  async function pollStatus() {
-    try {
-      const res = await fetch('/api/status');
-      if (res.status === 401) {
-        stopDashboard();
-        dashboard.classList.add('hidden');
-        loginView.classList.remove('hidden');
-        return;
-      }
-      if (res.ok) {
-        updateState(await res.json());
-      }
-    } catch {}
-  }
-  function updateState(data) {
-    state = data;
-    $('header-node').textContent = state.nodeId;
-    $('header-status').className = 'status-dot online';
-    $('header-uptime').textContent = formatUptime(state.uptime);
-    const totalNodes = 1 + state.peers.length;
-    $('peer-count').textContent = totalNodes + (totalNodes === 1 ? ' node' : ' nodes');
-    $('peer-count').className = 'badge badge-self';
-    updateMeshData();
-    updateModelSelect();
-    if (selectedNode) updateDetail(selectedNode);
-  }
-  function formatUptime(s) {
-    if (s < 60) return s + 's';
-    if (s < 3600) return Math.floor(s / 60) + 'm ' + (s % 60) + 's';
-    const h = Math.floor(s / 3600);
-    const m = Math.floor((s % 3600) / 60);
-    return h + 'h ' + m + 'm';
-  }
-  // ── 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() {
-    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);
-  }
-  // 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 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);
-      }
-    }
-    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);
-    }
-    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');
-      }
-    }
-    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');
-          }
-        }
-      }
-    }
-    return { nodes, links };
-  }
-  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 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;
-      }
-    }
-    if (!nodesChanged && !linksChanged) return; // topology unchanged, skip
-    // 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 };
-    }
-    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 ──
-  function updateDetail(nodeId) {
-    const isLocal = nodeId === state.nodeId;
-    const nodeData = isLocal ? state.local : state.peers.find(p => p.nodeId === nodeId);
-    if (!nodeData) {
-      $('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');
-    } else {
-      statusBadge.textContent = 'Offline';
-      statusBadge.className = 'badge badge-offline';
-    }
-    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">';
-      html += '<div class="detail-label">Route</div>';
-      html += '<div>via <strong>' + esc(nodeData.reachableVia) + '</strong></div>';
-      html += '</div>';
-    }
-    // Models
-    if (nodeData.models?.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;)">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></div>';
-    }
-    // Agents
-    if (nodeData.agents?.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;)">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></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">';
-      html += '<div class="detail-label">Tags</div>';
-      html += '<div class="detail-tags">';
-      for (const t of nodeData.tags) {
-        html += '<span class="tag">' + esc(t) + '</span>';
-      }
-      html += '</div>';
-      html += '</div>';
-    }
-    if (!html) {
-      html = '<div style="color:var(--text-dim)">No capabilities declared.</div>';
-    }
-    $('detail-body').innerHTML = html;
-  }
-  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');
-    const current = sel.value;
-    // Collect all models with node info
-    const models = [];
-    if (state.local?.models) {
-      for (const m of state.local.models) {
-        models.push({ id: m.id, nodeId: state.nodeId, label: m.id + ' @ ' + state.nodeId });
-      }
-    }
-    for (const p of state.peers) {
-      if (!p.online) continue;
-      for (const m of p.models) {
-        models.push({ id: m.id, nodeId: p.nodeId, label: m.id + ' @ ' + p.nodeId });
-      }
-    }
-    sel.innerHTML = '<option value="">Select model...</option>';
-    for (const m of models) {
-      const opt = document.createElement('option');
-      opt.value = m.nodeId + '/' + m.id;
-      opt.textContent = m.label;
-      sel.appendChild(opt);
-    }
-    if (current && sel.querySelector('option[value="' + CSS.escape(current) + '"]')) {
-      sel.value = current;
-    }
-  }
-  // ── Chat ──
-  const chatInput = $('chat-input');
-  const chatForm = $('chat-form');
-  const chatMsgs = $('chat-messages');
-  chatInput.addEventListener('input', () => {
-    chatInput.style.height = 'auto';
-    chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px';
-  });
-  chatInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      chatForm.requestSubmit();
-    }
-  });
-  chatForm.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    if (chatStreaming) 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('/');
-    chatMessages.push({ role: 'user', content: text });
-    chatMessages.push({ role: 'assistant', content: '' });
-    renderChatMessages();
-    chatStreaming = true;
-    $('chat-send').disabled = true;
-    try {
-      const messages = chatMessages
-        .filter(m => m.role !== 'error' && m.content)
-        .map(m => ({ role: m.role, content: m.content }));
-      const res = await fetch('/api/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ model, nodeId, messages: messages.slice(0, -1) }),
-      });
-      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();
-          if (data === '[DONE]') continue;
-          try {
-            const parsed = JSON.parse(data);
-            const delta = parsed.choices?.[0]?.delta?.content;
-            if (delta) {
-              chatMessages[chatMessages.length - 1].content += delta;
-              renderChatMessages();
-            }
-          } 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();
-    }
-  }
-  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) {
-      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;
-    }
-    chatMsgs.innerHTML = chatMessages.map(m => {
-      const cls = m.role === 'user' ? 'user' : m.role === 'error' ? 'error' : 'assistant';
-      return '<div class="chat-msg ' + cls + '">' + esc(m.content || '...') + '</div>';
-    }).join('');
-    chatMsgs.scrollTop = chatMsgs.scrollHeight;
-  }
-})();
-`;