@relay-federation/bridge 0.3.8 → 0.3.9

package/dashboard/index.html

@@ -76,6 +76,24 @@
     white-space: nowrap;
   }
   .header h1 span { color: var(--accent-blue); }
+  .protocol-badge {
+    font-family: var(--mono);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--accent-blue);
+    padding: 3px 10px;
+    border-radius: 20px;
+    border: 1px solid rgba(88,166,255,0.3);
+    background: rgba(88,166,255,0.08);
+    text-shadow: 0 0 8px rgba(88,166,255,0.5);
+    box-shadow: 0 0 12px rgba(88,166,255,0.15), inset 0 0 8px rgba(88,166,255,0.05);
+    letter-spacing: 1px;
+    animation: protocolPulse 3s ease-in-out infinite;
+  }
+  @keyframes protocolPulse {
+    0%, 100% { box-shadow: 0 0 12px rgba(88,166,255,0.15), inset 0 0 8px rgba(88,166,255,0.05); }
+    50% { box-shadow: 0 0 20px rgba(88,166,255,0.3), inset 0 0 12px rgba(88,166,255,0.1); }
+  }
   .mesh-badge {
     display: flex;
     align-items: center;
@@ -229,7 +247,11 @@
   }
   .detail-card {
     padding: 16px 20px;
+    cursor: pointer;
+    transition: border-color 0.2s;
+    border: 1px solid transparent;
   }
+  .detail-card:hover { border-color: rgba(88,166,255,0.2); }
   .detail-card h3 {
     color: var(--text-muted);
     font-size: 10px;
@@ -238,6 +260,50 @@
     margin-bottom: 10px;
     font-weight: 500;
   }
+  .card-overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 9999;
+    background: rgba(0,0,0,0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .card-overlay .card-expanded {
+    position: relative;
+    width: 90vw;
+    max-width: 700px;
+    max-height: 85vh;
+    overflow-y: auto;
+    border-radius: var(--radius);
+    background: radial-gradient(ellipse at center, rgba(20,30,50,0.95) 0%, rgba(8,10,14,0.98) 100%);
+    border: 1px solid var(--border-light);
+    padding: 24px 28px;
+  }
+  .card-overlay .card-expanded h2 {
+    color: var(--text-primary);
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    margin-bottom: 16px;
+    font-weight: 500;
+  }
+  .card-overlay .card-close {
+    position: absolute;
+    top: 12px; right: 16px;
+    z-index: 10;
+    background: rgba(0,0,0,0.5);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    font-size: 18px;
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .card-overlay .card-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.1); }
   .panel-row {
     display: flex;
     justify-content: space-between;
@@ -872,6 +938,7 @@
 <div class="header">
   <div class="header-left">
     <h1><span>Federation</span> Mesh</h1>
+    <span class="protocol-badge">70016</span>
     <div class="mesh-badge">
       <span class="status-dot green pulse" id="meshDot"></span>
       <span id="meshStatus">loading</span>
@@ -1009,6 +1076,20 @@ let BRIDGES = SEED_URLS.map(url => ({ name: null, url }));
 const POLL_INTERVAL = 5000;
 let discoveryDone = false;
 
+const BOND_EXPLAINER = '<h2>Surety Bond (BND)</h2>' +
+  '<div style="color:var(--text-muted);font-size:13px;line-height:1.6;max-width:480px">' +
+  '<p style="margin-bottom:12px"><strong style="color:var(--text-primary)">This is NOT proof-of-stake.</strong> There is no staking, no delegation, and no block rewards.</p>' +
+  '<p style="margin-bottom:12px">A <strong>surety bond</strong> is economic collateral. Bridge operators lock BSV to their own address as a signal of commitment. The bond UTXO is monitored on-chain — if a bridge spends its bond, the network flags it and its reputation score drops.</p>' +
+  '<p style="margin-bottom:12px">Think of it like a security deposit: you get it back when you leave, but spending it while active tells the network you may not be serious.</p>' +
+  '<p style="margin-bottom:12px"><strong style="color:var(--text-primary)">How BND score works:</strong></p>' +
+  '<ul style="margin:0 0 12px 16px;padding:0">' +
+  '<li style="margin-bottom:6px">Bond amount — more BSV locked = higher score</li>' +
+  '<li style="margin-bottom:6px">Bond age — longer held unspent = more trust</li>' +
+  '<li>Minimum bond: 0.01 BSV (1,000,000 satoshis)</li>' +
+  '</ul>' +
+  '<p style="color:var(--text-dim);font-size:11px">BSV disabled OP_CHECKLOCKTIMEVERIFY at Genesis (Feb 2020), so script-level timelocks are not possible. Enforcement is done by monitoring the UTXO.</p>' +
+  '</div>';
+
 // ── State ──────────────────────────────────────────
 let bridgeData = new Map();
 let selectedBridge = null;
@@ -1020,6 +1101,189 @@ let savedExplorerInput = '';
 let savedExplorerResult = '';
 let appsData = null;
 let latestPrice = null;
+let mempoolHistory = [];
+let peerCountHistory = [];
+
+function openCardOverlay(type) {
+  const b = bridgeData.get(selectedBridge);
+  if (!b) return;
+  const op = isOperator(b._url);
+  let html = renderCardExpanded(type, b, op);
+  if (!html) return;
+  const overlay = document.createElement('div');
+  overlay.className = 'card-overlay';
+  overlay.id = 'cardOverlay';
+  overlay.innerHTML = '<div class="card-expanded"><button class="card-close" onclick="closeCardOverlay()">&times;</button>' + html + '</div>';
+  document.body.appendChild(overlay);
+  overlay.addEventListener('click', function(e) { if (e.target === overlay) closeCardOverlay(); });
+  // Async: load wallet tx history
+  if (type === 'wallet' && b.bridge.address) {
+    fetch('/address/' + b.bridge.address + '/history', { signal: AbortSignal.timeout(10000) })
+      .then(function(r) { return r.ok ? r.json() : null; })
+      .then(function(data) {
+        var el = document.getElementById('walletTxList');
+        if (!el || !data || !data.history) { if (el) el.textContent = 'No transactions found'; return; }
+        var txs = data.history.slice(0, 10);
+        if (txs.length === 0) { el.textContent = 'No transactions yet'; return; }
+        var h = '';
+        for (var i = 0; i < txs.length; i++) {
+          var tx = txs[i];
+          var txid = tx.tx_hash || tx.txid || tx;
+          var short = typeof txid === 'string' ? txid.slice(0, 10) + '...' + txid.slice(-6) : '?';
+          var height = tx.height || '';
+          h += '<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)">';
+          h += '<a href="https://whatsonchain.com/tx/' + txid + '" target="_blank" style="color:var(--accent-blue);text-decoration:none;font-family:var(--mono)">' + short + '</a>';
+          if (height) h += '<span style="color:var(--text-dim);font-size:10px">block ' + height + '</span>';
+          h += '</div>';
+        }
+        el.innerHTML = h;
+      })
+      .catch(function() {
+        var el = document.getElementById('walletTxList');
+        if (el) el.textContent = 'Failed to load transactions';
+      });
+  }
+}
+function closeCardOverlay() {
+  const el = document.getElementById('cardOverlay');
+  if (el) el.remove();
+}
+function renderCardExpanded(type, b, op) {
+  let html = '';
+  switch (type) {
+    case 'bridge':
+      html += '<h2>Bridge</h2>';
+      html += '<div style="font-size:11px;color:var(--text-dim);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px">Identity</div>';
+      html += '<div class="panel-row"><span class="label">Status</span><span class="value ' + (b._error ? 'red' : 'green') + '">' + (b._error ? 'offline' : 'online') + '</span></div>';
+      html += '<div class="panel-row"><span class="label">Registration</span><span class="value ' + (b.bridge.endpoint ? 'green' : 'yellow') + '">' + (b.bridge.endpoint ? 'Registered' : 'Unregistered') + '</span></div>';
+      html += '<div class="panel-row"><span class="label">Pubkey</span><span class="value" style="font-size:10px;word-break:break-all;cursor:pointer" onclick="event.stopPropagation();copyText(\'' + (b.bridge.pubkeyHex || '') + '\', this)">' + (b.bridge.pubkeyHex || '-') + '</span></div>';
+      html += '<div class="panel-row"><span class="label">Endpoint</span><span class="value" style="cursor:pointer" onclick="event.stopPropagation();copyText(\'' + (b.bridge.endpoint || '') + '\', this)">' + (b.bridge.endpoint || '-') + '</span></div>';
+      if (b.bridge.address) {
+        html += '<div class="panel-row"><span class="label">Address</span><span class="value" style="font-size:10px;word-break:break-all;cursor:pointer" onclick="event.stopPropagation();copyText(\'' + b.bridge.address + '\', this)">' + b.bridge.address + '</span></div>';
+      }
+      html += '<div class="panel-row"><span class="label">Mesh ID</span><span class="value">' + (b.bridge.meshId || '-') + '</span></div>';
+      // Domains as clickable links
+      if (b.bridge.domains && b.bridge.domains.length > 0) {
+        html += '<div style="font-size:11px;color:var(--text-dim);margin:16px 0 12px;text-transform:uppercase;letter-spacing:1px">Domains</div>';
+        for (var di = 0; di < b.bridge.domains.length; di++) {
+          var d = b.bridge.domains[di];
+          html += '<div class="panel-row"><span class="value"><a href="https://' + d + '" target="_blank" style="color:var(--accent-blue);text-decoration:none">' + d + '</a></span></div>';
+        }
+      }
+      html += '<div style="font-size:11px;color:var(--text-dim);margin:16px 0 12px;text-transform:uppercase;letter-spacing:1px">Uptime</div>';
+      html += '<div class="panel-row"><span class="label">Current</span><span class="value">' + fmtUptime(b.bridge.uptimeSeconds) + '</span></div>';
+      var maxUptime = Math.max(...[...bridgeData.values()].map(bb => bb.bridge.uptimeSeconds || 0), 1);
+      var uptimePct = Math.min(100, (b.bridge.uptimeSeconds / maxUptime) * 100);
+      html += '<div style="margin-top:8px"><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px"><span style="color:var(--text-dim)">vs mesh leader</span><span style="color:var(--text-muted)">' + uptimePct.toFixed(0) + '%</span></div>';
+      html += '<div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden"><div style="height:100%;width:' + uptimePct + '%;background:var(--accent-green);border-radius:3px;transition:width 0.5s"></div></div></div>';
+      // Peer count sparkline
+      if (peerCountHistory.length > 1) {
+        html += '<div style="font-size:11px;color:var(--text-dim);margin:16px 0 12px;text-transform:uppercase;letter-spacing:1px">Peer Connections (last ' + peerCountHistory.length + ' polls)</div>';
+        html += renderSparkline(peerCountHistory, 'rgba(63,185,80,0.7)');
+      }
+      break;
+    case 'network':
+      html += '<h2>Network</h2>';
+      html += '<div style="font-size:11px;color:var(--text-dim);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px">Chain</div>';
+      html += '<div class="panel-row"><span class="label">Best Height</span><span class="value green">' + fmtHeight(b.headers.bestHeight) + '</span></div>';
+      html += '<div class="panel-row"><span class="label">Best Hash</span><span class="value" style="font-size:10px;word-break:break-all">' + (b.headers.bestHash || '-') + '</span></div>';
+      html += '<div class="panel-row"><span class="label">Local Headers</span><span class="value">' + b.headers.count.toLocaleString() + '</span></div>';
+      html += '<div style="font-size:11px;color:var(--text-dim);margin:16px 0 12px;text-transform:uppercase;letter-spacing:1px">Connectivity</div>';
+      html += '<div class="panel-row"><span class="label">BSV P2P</span><span class="value ' + (b.bsvNode && b.bsvNode.connected ? 'green' : 'red') + '">' + (b.bsvNode && b.bsvNode.connected ? 'Connected' : 'Disconnected') + ' — ' + (b.bsvNode ? b.bsvNode.peers : 0) + ' peers</span></div>';
+      if (b.bsvNode && b.bsvNode.height) {
+        html += '<div class="panel-row"><span class="label">Node Height</span><span class="value">' + b.bsvNode.height.toLocaleString() + '</span></div>';
+      }
+      html += '<div class="panel-row"><span class="label">Mesh Bridges</span><span class="value">' + b.peers.connected + ' connected</span></div>';
+      html += '<div style="font-size:11px;color:var(--text-dim);margin:16px 0 12px;text-transform:uppercase;letter-spacing:1px">Transactions</div>';
+      html += '<div class="panel-row"><span class="label">Mempool</span><span class="value">' + b.txs.mempool + ' txs</span></div>';
+      html += '<div class="panel-row"><span class="label">Seen</span><span class="value">' + b.txs.seen + ' txs</span></div>';
+      // Mempool sparkline (last 20 polls)
+      if (mempoolHistory.length > 1) {
+        html += '<div style="margin-top:12px"><div style="font-size:11px;color:var(--text-dim);margin-bottom:6px">Mempool History (last ' + mempoolHistory.length + ' polls)</div>';
+        html += renderSparkline(mempoolHistory, 'rgba(88,166,255,0.7)');
+        html += '</div>';
+      }
+      break;
+    case 'wallet':
+      if (!op || !b.wallet) return '';
+      // Big balance hero
+      var balSats = b.wallet.balanceSats || 0;
+      var balUsd = (latestPrice && latestPrice.usd) ? (balSats / 1e8 * latestPrice.usd).toFixed(2) : null;
+      html += '<div style="text-align:center;padding:20px 0 16px">';
+      html += '<div style="font-size:32px;font-weight:700;color:var(--accent-green);letter-spacing:-1px">' + fmtSats(balSats) + ' <span style="font-size:14px;font-weight:400;color:var(--text-muted)">sats</span></div>';
+      if (balUsd) html += '<div style="font-size:18px;color:var(--accent-blue);margin-top:4px">$' + balUsd + ' <span style="font-size:11px;color:var(--text-dim)">USD</span></div>';
+      html += '</div>';
+      // Send button
+      html += '<div style="text-align:center;margin-bottom:20px"><button class="btn primary" style="padding:8px 32px;font-size:13px" onclick="event.stopPropagation();closeCardOverlay();showSendModal(\'' + b._url + '\')">Send BSV</button></div>';
+      // Address + QR
+      html += '<div style="border-top:1px solid var(--border);padding-top:16px">';
+      html += '<div style="font-size:11px;color:var(--text-dim);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px">Address</div>';
+      if (b.bridge.address) {
+        html += '<div style="text-align:center;font-size:11px;color:var(--text-muted);word-break:break-all;cursor:pointer;margin-bottom:12px" onclick="event.stopPropagation();copyText(\'' + b.bridge.address + '\', this)">' + b.bridge.address + '</div>';
+        html += '<div style="text-align:center;padding-bottom:16px"><img src="' + generateQR(b.bridge.address) + '" alt="QR" style="border-radius:8px;border:2px solid var(--border)" width="180" height="180"></div>';
+      }
+      html += '</div>';
+      // UTXOs
+      html += '<div style="border-top:1px solid var(--border);padding-top:12px">';
+      html += '<div class="panel-row"><span class="label">UTXOs</span><span class="value">' + (b.wallet.utxoCount || 0) + '</span></div>';
+      html += '</div>';
+      // Recent transactions — loaded async
+      if (b.bridge.address) {
+        html += '<div style="border-top:1px solid var(--border);padding-top:12px;margin-top:12px">';
+        html += '<div style="font-size:11px;color:var(--text-dim);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px">Recent Transactions</div>';
+        html += '<div id="walletTxList" style="font-size:11px;color:var(--text-dim)">Loading...</div>';
+        html += '</div>';
+      }
+      break;
+    case 'bsvnode':
+      if (!b.bsvNode) return '';
+      html += '<h2>BSV Node</h2>';
+      html += '<div class="panel-row"><span class="label">Status</span><span class="value ' + (b.bsvNode.connected ? 'green' : 'red') + '">' + (b.bsvNode.connected ? 'Connected' : 'Disconnected') + '</span></div>';
+      html += '<div class="panel-row"><span class="label">Peers</span><span class="value">' + (b.bsvNode.peers || 0) + '</span></div>';
+      html += '<div class="panel-row"><span class="label">Node Height</span><span class="value">' + (b.bsvNode.height ? b.bsvNode.height.toLocaleString() : '-') + '</span></div>';
+      html += '<div class="panel-row"><span class="label">Bridge Headers</span><span class="value">' + b.headers.count.toLocaleString() + '</span></div>';
+      if (b.bsvNode.height && b.headers.count) {
+        const syncPct = Math.min(100, (b.headers.count / b.bsvNode.height * 100)).toFixed(1);
+        html += '<div class="panel-row"><span class="label">Sync</span><span class="value">' + syncPct + '%</span></div>';
+      }
+      break;
+    case 'peers':
+      // Only show connected peers
+      var onlinePeers = b.peers.list.filter(function(p) { return p.connected; });
+      html += '<h2>Peers (' + onlinePeers.length + ')</h2>';
+      // Sort by score descending
+      var sortedPeers = onlinePeers.slice().sort(function(a, c) { return (c.score || 0) - (a.score || 0); });
+      if (sortedPeers.length === 0) {
+        html += '<div style="color:var(--text-dim);font-size:12px;padding:12px 0">No peers connected</div>';
+      }
+      for (var pi = 0; pi < sortedPeers.length; pi++) {
+        var p = sortedPeers[pi];
+        var scoreVal = p.score !== undefined ? p.score.toFixed(2) : '?';
+        var scoreClr = p.score >= 0.7 ? 'var(--accent-green)' : p.score >= 0.4 ? 'var(--accent-yellow)' : 'var(--accent-red)';
+        html += '<div style="padding:10px 0;border-bottom:1px solid var(--border)">';
+        html += '<div style="display:flex;align-items:center;justify-content:space-between">';
+        html += '<div><span class="peer-dot green"></span><span class="peer-name" style="cursor:pointer" onclick="event.stopPropagation();copyText(\'' + (p.pubkeyHex || '') + '\', this)">' + truncPubkey(p.pubkeyHex) + '</span></div>';
+        html += '<span style="font-family:var(--mono);font-size:13px;font-weight:600;color:' + scoreClr + '">' + scoreVal + '</span>';
+        html += '</div>';
+        html += '<div style="font-size:11px;color:var(--text-dim);margin-top:2px">' + (p.endpoint || 'no endpoint') + (p.health ? ' &middot; ' + p.health : '') + '</div>';
+        if (p.scoreBreakdown) {
+          html += '<div style="margin-top:6px">' + renderScoreBars(p.scoreBreakdown) + '</div>';
+        }
+        html += '</div>';
+      }
+      // Surety bond explainer
+      html += '<div style="margin-top:16px;padding:12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,0.03)">';
+      html += '<h3 style="margin-bottom:8px;font-size:11px;letter-spacing:1px">SURETY BOND (BND)</h3>';
+      html += '<div style="color:var(--text-muted);font-size:12px;line-height:1.5">';
+      html += '<p style="margin-bottom:8px"><strong style="color:var(--text-primary)">This is not proof-of-stake.</strong> No staking, no delegation, no block rewards.</p>';
+      html += '<p style="margin-bottom:8px">A surety bond is economic collateral. Operators lock BSV to their own address as a signal of commitment. The UTXO is monitored on-chain — spending your bond while active flags your bridge and drops your reputation.</p>';
+      html += '<p style="margin-bottom:8px">More BSV bonded + longer held unspent = higher BND score. Minimum: 0.01 BSV.</p>';
+      html += '</div></div>';
+      break;
+    default: return '';
+  }
+  return html;
+}
 
 try { const saved = localStorage.getItem('relay_operator_tokens'); if (saved) operatorTokens = JSON.parse(saved); } catch {}
 
@@ -1032,6 +1296,20 @@ function fmtUptime(s) {
   return m + 'm';
 }
 function truncPubkey(pk) { return pk ? pk.slice(0, 8) + ' ... ' + pk.slice(-6) : '(none)'; }
+function copyText(text, el) { navigator.clipboard.writeText(text).then(() => { var orig = el.textContent; el.textContent = 'Copied!'; el.style.color = 'var(--accent-green)'; setTimeout(() => { el.textContent = orig; el.style.color = ''; }, 1200); }); }
+function renderSparkline(data, color) {
+  if (data.length < 2) return '';
+  var max = Math.max(...data, 1), w = 300, h = 50, pts = [];
+  for (var i = 0; i < data.length; i++) {
+    var x = (i / (data.length - 1)) * w;
+    var y = h - (data[i] / max) * (h - 4) - 2;
+    pts.push(x.toFixed(1) + ',' + y.toFixed(1));
+  }
+  var svg = '<svg width="' + w + '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '" style="width:100%;height:50px">';
+  svg += '<polyline points="' + pts.join(' ') + '" fill="none" stroke="' + color + '" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>';
+  svg += '<polygon points="0,' + h + ' ' + pts.join(' ') + ' ' + w + ',' + h + '" fill="' + color.replace('0.7', '0.1') + '"/>';
+  return svg + '</svg>';
+}
 function scoreColor(v) { return v >= 0.7 ? 'green' : v >= 0.4 ? 'yellow' : 'red'; }
 function fmtSats(n) { return n === null || n === undefined ? '-' : n.toLocaleString(); }
 function fmtHeight(n) { return n > 0 ? n.toLocaleString() : '-'; }
@@ -1123,9 +1401,13 @@ async function pollAll() {
   if (!selectedBridge && bridgeData.size > 0) {
     selectedBridge = bridgeData.keys().next().value;
   }
+  // Track history for sparklines (last 20 polls)
+  const sel = bridgeData.get(selectedBridge);
+  if (sel && sel.txs) { mempoolHistory.push(sel.txs.mempool); if (mempoolHistory.length > 20) mempoolHistory.shift(); }
+  if (sel && sel.peers) { peerCountHistory.push(sel.peers.connected); if (peerCountHistory.length > 20) peerCountHistory.shift(); }
   // Fetch price from self (same-origin, always works)
   fetch('/price', { signal: AbortSignal.timeout(5000) })
-    .then(r => r.ok ? r.json() : null).then(d => { if (d) latestPrice = d; }).catch(() => {});
+    .then(r => r.ok ? r.json() : null).then(d => { if (d) { latestPrice = d; const el = document.querySelector('.stats-hero .stat-card:last-child .stat-value'); if (el) el.textContent = '$' + d.usd.toFixed(2); } }).catch(() => {});
   renderHeader();
   renderBridgeRail();
   renderActiveTab(true);
@@ -1138,14 +1420,13 @@ function renderHeader() {
   const totalPeers = online.reduce((s, b) => s + b.peers.connected, 0);
   const bestH = Math.max(...all.map(b => b.headers.bestHeight));
 
-  document.getElementById('hBridgeCount').textContent = online.length + '/' + all.length;
+  document.getElementById('hBridgeCount').textContent = online.length;
   document.getElementById('hTotalPeers').textContent = totalPeers;
   document.getElementById('hBestHeight').textContent = bestH > 0 ? bestH.toLocaleString() : '-';
 
   const dot = document.getElementById('meshDot');
   const status = document.getElementById('meshStatus');
-  if (online.length === all.length) { dot.className = 'status-dot green pulse'; status.textContent = 'healthy'; }
-  else if (online.length > 0) { dot.className = 'status-dot yellow pulse'; status.textContent = 'degraded'; }
+  if (online.length > 0) { dot.className = 'status-dot green pulse'; status.textContent = 'healthy'; }
   else { dot.className = 'status-dot red pulse'; status.textContent = 'offline'; }
 }
 
@@ -1154,15 +1435,17 @@ function renderBridgeRail() {
   const el = document.getElementById('bridgeRail');
   let html = '<div class="bridge-rail-header">Bridges</div>';
   for (const [name, b] of bridgeData) {
-    const dotColor = b._error ? 'red' : (b.peers.connected > 0 ? 'green' : 'yellow');
+    if (b._error) continue; // Skip offline bridges
+    const dotColor = b.peers.connected > 0 ? 'green' : 'yellow';
     const sel = selectedBridge === name ? ' selected' : '';
     html += '<div class="rail-item' + sel + '" onclick="selectBridge(\'' + name + '\')">';
     html += '<span class="status-dot ' + dotColor + '"></span>';
     html += '<div style="display:flex;flex-direction:column;flex:1;min-width:0"><span class="rail-name">' + name + '</span>';
     const ip = (b._url || '').replace(/^https?:\/\//, '').replace(/:\d+$/, '');
     html += '<span style="font-size:10px;color:var(--text-muted);opacity:0.6">' + ip + '</span></div>';
-    if (b._error) html += '<span class="rail-height offline">off</span>';
-    else html += '<span class="rail-height">' + fmtHeight(b.headers.bestHeight) + '</span>';
+    html += '<div style="text-align:right"><span class="rail-height">' + fmtHeight(b.headers.bestHeight) + '</span>';
+    if (b.bridge && b.bridge.version) html += '<div style="font-size:9px;color:var(--text-dim)">v' + b.bridge.version + '</div>';
+    html += '</div>';
     html += '</div>';
   }
   el.innerHTML = html;
@@ -1245,7 +1528,7 @@ function renderOverviewTab() {
   const totalMempool = online.reduce((s, b) => s + (b.txs ? b.txs.mempool : 0), 0);
 
   let html = '<div class="stats-hero">';
-  html += '<div class="stat-card glass"><div class="stat-value">' + online.length + '<span style="color:var(--text-dim);font-weight:400"> / ' + all.length + '</span></div><div class="stat-label">Bridges Online</div></div>';
+  html += '<div class="stat-card glass"><div class="stat-value">' + online.length + '</div><div class="stat-label">Bridges Online</div></div>';
   html += '<div class="stat-card glass"><div class="stat-value green">' + fmtHeight(bestH) + '</div><div class="stat-label">Best Height</div></div>';
   html += '<div class="stat-card glass"><div class="stat-value">' + totalPeers + '</div><div class="stat-label">Mesh Peers</div></div>';
   html += '<div class="stat-card glass"><div class="stat-value">' + totalMempool + '</div><div class="stat-label">Mempool Txs</div></div>';
@@ -1269,6 +1552,13 @@ function renderOverviewTab() {
   else if (!op && isOperator(b._url)) html += '<button class="btn sm" onclick="showAuthModal(\'' + b._url + '\')">Re-auth</button>';
   html += '</div>';
 
+  // Version + timestamp
+  var myVer = b.bridge && b.bridge.version ? b.bridge.version : '?';
+  var allVersions = [...bridgeData.values()].filter(x => !x._error && x.bridge && x.bridge.version).map(x => x.bridge.version);
+  var newestVer = allVersions.length > 0 ? allVersions.sort().pop() : myVer;
+  var verColor = myVer === newestVer ? 'var(--text-muted)' : 'var(--accent-yellow)';
+  var verWarn = myVer !== newestVer ? ' (latest: v' + newestVer + ')' : '';
+  html += '<div style="font-size:11px;margin-bottom:12px"><span style="color:' + verColor + ';font-weight:600">v' + myVer + verWarn + '</span> <span style="color:var(--text-dim)">&middot; ' + new Date().toLocaleString() + '</span></div>';
   if (b._error) html += '<div class="error-banner">' + b._error + '</div>';
 
   // 3D Mesh Map — compact inline, click to expand
@@ -1279,10 +1569,22 @@ function renderOverviewTab() {
     html += '</div>';
   }
 
+  // Operator toolbar (spans full width, under topology)
+  if (op) {
+    html += '<div class="glass" style="display:flex;align-items:center;gap:8px;padding:8px 14px;margin-bottom:12px;border-radius:var(--radius-sm);flex-wrap:wrap">';
+    html += '<button class="btn primary" onclick="showRegisterModal(\'' + b._url + '\')">Register</button>';
+    html += '<button class="btn danger" onclick="showDeregisterModal(\'' + b._url + '\')">Deregister</button>';
+    html += '<button class="btn" onclick="showSendModal(\'' + b._url + '\')">Send</button>';
+    html += '<button class="btn" onclick="showConnectModal(\'' + b._url + '\')">Connect Peer</button>';
+    html += '<button class="btn" onclick="openLogViewer(\'' + b._url + '\')">View Logs</button>';
+    html += '<button class="btn" onclick="logoutOperator(\'' + b._url + '\')">Logout</button>';
+    html += '</div>';
+  }
+
   html += '<div class="cards-grid">';
 
   // Bridge info card
-  html += '<div class="detail-card glass"><h3>Bridge</h3>';
+  html += '<div class="detail-card glass" onclick="openCardOverlay(\'bridge\')"><h3>Bridge <span style="font-size:9px;color:var(--text-dim);font-weight:400;text-transform:none;letter-spacing:0">— click to expand</span></h3>';
   html += '<div class="panel-row"><span class="label">Status</span><span class="value ' + color + '">' + statusText + '</span></div>';
   html += '<div class="panel-row"><span class="label">Pubkey</span><span class="value">' + truncPubkey(b.bridge.pubkeyHex) + '</span></div>';
   if (op) {
@@ -1296,17 +1598,16 @@ function renderOverviewTab() {
   html += '</div>';
 
   // Network card
-  html += '<div class="detail-card glass"><h3>Network</h3>';
+  html += '<div class="detail-card glass" onclick="openCardOverlay(\'network\')"><h3>Network <span style="font-size:9px;color:var(--text-dim);font-weight:400;text-transform:none;letter-spacing:0">— click to expand</span></h3>';
   html += '<div class="panel-row"><span class="label">Best Height</span><span class="value green">' + fmtHeight(b.headers.bestHeight) + '</span></div>';
-  html += '<div class="panel-row"><span class="label">Best Hash</span><span class="value">' + (b.headers.bestHash ? b.headers.bestHash.slice(0, 16) + '...' : '-') + '</span></div>';
-  html += '<div class="panel-row"><span class="label">Headers</span><span class="value">' + b.headers.count.toLocaleString() + '</span></div>';
+  html += '<div class="panel-row"><span class="label">BSV P2P</span><span class="value ' + (b.bsvNode && b.bsvNode.connected ? 'green' : 'red') + '">' + (b.bsvNode ? b.bsvNode.peers : 0) + ' peers</span></div>';
+  html += '<div class="panel-row"><span class="label">Mesh</span><span class="value">' + b.peers.connected + ' bridges</span></div>';
   html += '<div class="panel-row"><span class="label">Mempool</span><span class="value">' + b.txs.mempool + ' txs</span></div>';
-  html += '<div class="panel-row"><span class="label">Seen</span><span class="value">' + b.txs.seen + ' txs</span></div>';
   html += '</div>';
 
   // Wallet card (operator)
   if (op && b.wallet) {
-    html += '<div class="detail-card glass"><h3>Wallet</h3>';
+    html += '<div class="detail-card glass" onclick="openCardOverlay(\'wallet\')"><h3>Wallet <span style="font-size:9px;color:var(--text-dim);font-weight:400;text-transform:none;letter-spacing:0">— click to expand</span></h3>';
     if (b.bridge.address) {
       html += '<div class="panel-row"><span class="label">Address</span><span class="value" style="font-size:10px;word-break:break-all">' + b.bridge.address + '</span></div>';
       html += '<div style="text-align:center;padding:10px 0"><img src="' + generateQR(b.bridge.address) + '" alt="QR" style="border-radius:6px" width="100" height="100"></div>';
@@ -1316,53 +1617,28 @@ function renderOverviewTab() {
     html += '</div>';
   }
 
-  // BSV Node card
-  if (b.bsvNode) {
-    html += '<div class="detail-card glass"><h3>BSV Node</h3>';
-    html += '<div class="panel-row"><span class="label">Status</span><span class="value ' + (b.bsvNode.connected ? 'green' : 'red') + '">' + (b.bsvNode.connected ? 'Connected' : 'Disconnected') + '</span></div>';
-    html += '<div class="panel-row"><span class="label">Peers</span><span class="value">' + (b.bsvNode.peers || 0) + '</span></div>';
-    html += '<div class="panel-row"><span class="label">Height</span><span class="value">' + (b.bsvNode.height ? b.bsvNode.height.toLocaleString() : '-') + '</span></div>';
-    html += '</div>';
-  }
-
-  // Peers card
-  html += '<div class="detail-card glass"><h3>Peers (' + b.peers.connected + ')</h3>';
-  if (b.peers.list.length === 0) {
+  // Peers card — only show connected peers
+  const connectedPeers = b.peers.list.filter(p => p.connected);
+  html += '<div class="detail-card glass" style="max-height:300px;overflow-y:auto" onclick="openCardOverlay(\'peers\')"><h3 style="display:flex;justify-content:space-between;align-items:center">Peers (' + connectedPeers.length + ') <span style="font-size:9px;color:var(--text-dim);font-weight:400;text-transform:none;letter-spacing:0">— click to expand</span><button class="btn ghost" style="font-size:9px;padding:2px 8px;text-transform:none;letter-spacing:0" onclick="event.stopPropagation();openModal(BOND_EXPLAINER)">What is BND?</button></h3>';
+  if (connectedPeers.length === 0) {
     html += '<div style="color:var(--text-dim);font-size:12px">No peers connected</div>';
   } else {
     const showAll = window._showAllPeers || false;
-    const visiblePeers = showAll ? b.peers.list : b.peers.list.slice(0, 3);
+    const visiblePeers = showAll ? connectedPeers : connectedPeers.slice(0, 4);
     for (const p of visiblePeers) {
-      const dotC = p.connected ? 'green' : 'red';
-      html += '<div class="peer-entry" style="cursor:pointer" onclick="this.classList.toggle(\'expanded\')"><div><span class="peer-dot ' + dotC + '"></span><span class="peer-name">' + truncPubkey(p.pubkeyHex) + '</span> <span style="color:var(--text-dim)">score ' + (p.score !== undefined ? p.score.toFixed(2) : '?') + '</span></div>';
+      html += '<div class="peer-entry" style="cursor:pointer" onclick="event.stopPropagation();this.classList.toggle(\'expanded\')"><div><span class="peer-dot green"></span><span class="peer-name">' + truncPubkey(p.pubkeyHex) + '</span> <span style="color:var(--text-dim)">score ' + (p.score !== undefined ? p.score.toFixed(2) : '?') + '</span></div>';
       html += '<div class="peer-meta">' + (p.endpoint || '') + (p.health ? ' &middot; ' + p.health : '') + '</div>';
       if (p.scoreBreakdown) html += '<div class="score-bars">' + renderScoreBars(p.scoreBreakdown) + '</div>';
       html += '</div>';
     }
-    if (b.peers.list.length > 3) {
-      html += '<div style="text-align:center;padding:4px 0"><button class="btn ghost" style="font-size:11px;padding:2px 10px" onclick="window._showAllPeers=!window._showAllPeers;renderActiveTab()">' + (showAll ? 'Show less' : 'Show all ' + b.peers.list.length + ' peers') + '</button></div>';
+    if (connectedPeers.length > 4) {
+      html += '<div style="text-align:center;padding:4px 0"><button class="btn ghost" style="font-size:11px;padding:2px 10px" onclick="event.stopPropagation();window._showAllPeers=!window._showAllPeers;renderActiveTab()">' + (showAll ? 'Show less' : 'Show all ' + connectedPeers.length + ' peers') + '</button></div>';
     }
   }
   html += '</div>';
 
-  // Actions card (operator)
-  if (op) {
-    html += '<div class="detail-card glass"><h3>Actions</h3>';
-    html += '<div class="actions-grid">';
-    html += '<button class="btn primary" onclick="showRegisterModal(\'' + b._url + '\')">Register</button>';
-    html += '<button class="btn danger" onclick="showDeregisterModal(\'' + b._url + '\')">Deregister</button>';
-    html += '<button class="btn" onclick="showSendModal(\'' + b._url + '\')">Send</button>';
-    html += '<button class="btn" onclick="showConnectModal(\'' + b._url + '\')">Connect Peer</button>';
-    html += '</div>';
-    html += '<button class="btn ghost" onclick="openLogViewer(\'' + b._url + '\')" style="width:100%;margin-top:8px">View Live Logs</button>';
-    if (isOperator(b._url)) html += '<button class="btn ghost" onclick="logoutOperator(\'' + b._url + '\')" style="width:100%;margin-top:4px;color:var(--text-dim)">Logout</button>';
-    html += '<div style="margin-top:10px;padding:8px 10px;background:rgba(88,166,255,0.06);border:1px solid rgba(88,166,255,0.12);border-radius:var(--radius-sm);font-size:11px;color:var(--text-muted)">To backfill historical inscriptions and tokens, run <span style="font-family:var(--mono);color:var(--accent-blue)">relay-bridge backfill</span> from the CLI.</div>';
-    html += '</div>';
-  }
-
   html += '</div>'; // cards-grid
 
-  html += '<div style="color:var(--text-dim);font-size:10px;text-align:center;padding:12px 0">Updated ' + new Date().toLocaleTimeString() + '</div>';
   return html;
 }
 
@@ -2222,11 +2498,12 @@ function renderMiniMap(b) {
 
 function renderScoreBars(breakdown) {
   if (!breakdown) return '';
-  const labels = [['UPT', breakdown.uptime], ['RTT', breakdown.responseTime], ['ACC', breakdown.dataAccuracy], ['STK', breakdown.stakeAge]];
+  const labels = [['UPT', breakdown.uptime], ['RTT', breakdown.responseTime], ['ACC', breakdown.dataAccuracy], ['BND', breakdown.stakeAge]];
   let html = '<div class="score-bars">';
   for (const [label, val] of labels) {
     const pct = Math.round(val * 100);
-    html += '<div class="score-row"><span class="score-label">' + label + '</span><div class="score-bar-bg"><div class="score-bar-fill ' + scoreColor(val) + '" style="width:' + pct + '%"></div></div><span class="score-val">' + val.toFixed(2) + '</span></div>';
+    const color = label === 'BND' ? (val >= 0.4 ? 'green' : val > 0 ? 'yellow' : 'yellow') : scoreColor(val);
+    html += '<div class="score-row"><span class="score-label">' + label + '</span><div class="score-bar-bg"><div class="score-bar-fill ' + color + '" style="width:' + pct + '%"></div></div><span class="score-val">' + val.toFixed(2) + '</span></div>';
   }
   return html + '</div>';
 }

package/lib/status-server.js

@@ -27,6 +27,7 @@ import { handlePostData, handleGetTopics, handleGetData } from './data-endpoints
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const DASHBOARD_HTML = readFileSync(join(__dirname, '..', 'dashboard', 'index.html'), 'utf8')
+const PKG_VERSION = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf8')).version
 export class StatusServer {
   /**
    * @param {object} opts
@@ -121,6 +122,7 @@ export class StatusServer {
     const status = {
       bridge: {
         name: this._config.name || null,
+        version: PKG_VERSION,
         pubkeyHex: this._config.pubkeyHex || null,
         meshId: this._config.meshId || null,
         uptimeSeconds: Math.floor((Date.now() - this._startedAt) / 1000)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relay-federation/bridge",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Bridge server — WebSocket peering, header sync, tx relay, CLI",
   "type": "module",
   "bin": {