diff --git a/crates/runtime-dashboard/src/actors.html b/crates/runtime-dashboard/src/actors.html
new file mode 100644
index 0000000..b2f2ad2
--- /dev/null
+++ b/crates/runtime-dashboard/src/actors.html
@@ -0,0 +1,739 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Swactor Runtime – Actors</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
+
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
+  }
+  .header-left { display: flex; align-items: center; }
+  .header h1 { font-size: 16px; font-weight: 600; color: #fff; }
+  .status-dot {
+    width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
+    display: inline-block; margin-left: 8px; vertical-align: middle;
+  }
+  .status-dot.disconnected { background: #f44336; }
+  .status-dot.done { background: #ff9800; }
+  .status-dot.replaying { background: #2196f3; animation: pulse 1.5s infinite; }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+
+  .replay-badge {
+    display: none; background: #2196f3; color: #fff; font-size: 10px; font-weight: 700;
+    padding: 2px 8px; border-radius: 3px; margin-left: 10px; letter-spacing: 1px;
+    vertical-align: middle;
+  }
+  .replay-badge.visible { display: inline-block; }
+
+  .nav-links { display: flex; gap: 4px; margin-left: 20px; }
+  .nav-link {
+    color: #888; text-decoration: none; font-size: 12px;
+    padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
+  }
+  .nav-link:hover { color: #e0e0e0; }
+  .nav-link.active { color: #fff; background: #2a2d3e; }
+
+  .header-right { display: flex; align-items: center; gap: 12px; }
+
+  .progress-bar-wrap {
+    display: none; width: 100%; height: 3px; background: #2a2d3e;
+  }
+  .progress-bar-wrap.visible { display: block; }
+  .progress-fill {
+    height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px; padding: 12px;
+  }
+
+  .panel {
+    background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
+    padding: 14px; overflow: hidden;
+  }
+  .panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+
+  .full-width { grid-column: 1 / -1; }
+
+  .stats-cards {
+    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
+  }
+  .stat-card {
+    background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
+  }
+  .stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
+  .stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
+
+  canvas { width: 100%; height: 200px; }
+
+  .search-wrap { margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
+  .search-input {
+    background: #1c1f2e; border: 1px solid #2a2d3e; color: #e0e0e0;
+    padding: 6px 10px; border-radius: 4px; font-family: inherit;
+    font-size: 12px; width: 300px; outline: none;
+  }
+  .search-input:focus { border-color: #6366f1; }
+  .search-info { color: #555; font-size: 11px; }
+
+  .actor-list-wrap { max-height: 500px; overflow-y: auto; }
+  .actor-list-wrap table { width: 100%; border-collapse: collapse; }
+  .actor-list-wrap th, .actor-list-wrap td {
+    padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2d3e; font-size: 12px;
+  }
+  .actor-list-wrap th {
+    color: #888; font-weight: 500; position: sticky; top: 0; background: #161822;
+  }
+  .sortable { cursor: pointer; user-select: none; }
+  .sortable:hover { color: #e0e0e0; }
+  .sort-arrow { font-size: 10px; margin-left: 4px; color: #6366f1; }
+
+  .depth-bar {
+    height: 8px; border-radius: 2px; max-width: 120px; min-width: 2px;
+  }
+
+  .msg-type { color: #4caf50; }
+  .msg-type.none { color: #555; font-style: italic; }
+
+  tr.focused { background: #1c1f2e; }
+  tr.clickable { cursor: pointer; }
+  tr.clickable:hover { background: #1a1d2c; }
+
+  .detail-panel { display: none; }
+  .detail-panel.visible { display: block; }
+  .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+  .detail-close {
+    background: none; border: 1px solid #2a2d3e; color: #888; border-radius: 3px;
+    padding: 2px 8px; cursor: pointer; font-family: inherit; font-size: 11px;
+  }
+  .detail-close:hover { color: #e0e0e0; border-color: #555; }
+  .detail-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
+  }
+  .detail-item { background: #1c1f2e; border-radius: 4px; padding: 8px 10px; }
+  .detail-item .d-label { font-size: 10px; color: #888; text-transform: uppercase; }
+  .detail-item .d-value { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; word-break: break-all; }
+  .poisoned-badge {
+    background: #f44336; color: #fff; font-size: 10px; font-weight: 700;
+    padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px;
+  }
+  .healthy-badge { color: #4caf50; font-size: 12px; }
+  canvas.sparkline { width: 100%; height: 60px; }
+
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: #0f1117; }
+  ::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
+</style>
+</head>
+<body>
+<div class="header">
+  <div class="header-left">
+    <h1>
+      Swactor Runtime Dashboard
+      <span id="statusDot" class="status-dot"></span>
+      <span id="replayBadge" class="replay-badge">REPLAY</span>
+    </h1>
+    <nav class="nav-links">
+      <a href="/" class="nav-link">Overview</a>
+      <a href="/actors" class="nav-link active">Actors</a>
+      <a href="/distribution" class="nav-link">Distribution</a>
+    </nav>
+  </div>
+  <div class="header-right">
+    <span id="replaySpeed" style="color:#2196f3;font-size:12px;display:none;"></span>
+    <span id="replayPct" style="color:#888;font-size:12px;display:none;"></span>
+    <span id="uptimeLabel" style="color:#888;font-size:12px;"></span>
+  </div>
+</div>
+<div id="progressBarWrap" class="progress-bar-wrap">
+  <div id="progressFill" class="progress-fill"></div>
+</div>
+
+<div class="grid">
+  <!-- Stat cards -->
+  <div class="panel full-width">
+    <h2>Actor Stats</h2>
+    <div class="stats-cards">
+      <div class="stat-card"><div class="value" id="statTotal">0</div><div class="label">Total Actors</div></div>
+      <div class="stat-card"><div class="value" id="statAvgMbox">0</div><div class="label">Avg Mailbox</div></div>
+      <div class="stat-card"><div class="value" id="statMaxMbox">0</div><div class="label">Max Mailbox</div></div>
+      <div class="stat-card"><div class="value" id="statActiveWorkers">0</div><div class="label">Active Workers</div></div>
+    </div>
+  </div>
+
+  <!-- Mailbox depth distribution -->
+  <div class="panel">
+    <h2>Mailbox Depth Distribution</h2>
+    <canvas id="depthChart"></canvas>
+  </div>
+
+  <!-- Actors per worker -->
+  <div class="panel">
+    <h2>Actors per Worker</h2>
+    <canvas id="workerChart"></canvas>
+  </div>
+
+  <!-- Actor table -->
+  <div class="panel full-width">
+    <h2>All Actors <span id="actorCount" style="color:#555;font-weight:400;"></span></h2>
+    <div class="search-wrap">
+      <input type="text" id="actorSearch" class="search-input" placeholder="Filter by address or worker..." />
+      <span id="searchInfo" class="search-info"></span>
+    </div>
+    <div class="actor-list-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th class="sortable" data-sort="address">Address <span id="sortArrowAddress" class="sort-arrow"></span></th>
+            <th class="sortable" data-sort="worker">Worker <span id="sortArrowWorker" class="sort-arrow"></span></th>
+            <th class="sortable" data-sort="mailbox">Mailbox <span id="sortArrowMailbox" class="sort-arrow"></span></th>
+            <th class="sortable" data-sort="msgs">Msgs <span id="sortArrowMsgs" class="sort-arrow"></span></th>
+            <th>Last Msg</th>
+            <th>Depth</th>
+          </tr>
+        </thead>
+        <tbody id="actorTableBody"></tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Actor detail panel -->
+  <div id="detailPanel" class="panel full-width detail-panel">
+    <div class="detail-header">
+      <h2>Actor Detail <span id="detailAddr" style="color:#aaa;font-weight:400;"></span></h2>
+      <button class="detail-close" id="detailClose">Close</button>
+    </div>
+    <div class="detail-grid">
+      <div class="detail-item"><div class="d-label">Full Address</div><div class="d-value" id="detailFullAddr" style="font-size:11px;"></div></div>
+      <div class="detail-item"><div class="d-label">Worker</div><div class="d-value" id="detailWorker"></div></div>
+      <div class="detail-item"><div class="d-label">Mailbox Depth</div><div class="d-value" id="detailMailbox"></div></div>
+      <div class="detail-item"><div class="d-label">Messages Processed</div><div class="d-value" id="detailMsgCount"></div></div>
+      <div class="detail-item"><div class="d-label">Last Message Type</div><div class="d-value" id="detailLastMsg"></div></div>
+      <div class="detail-item"><div class="d-label">Status</div><div class="d-value" id="detailStatus"></div></div>
+    </div>
+    <h2>Mailbox Depth History</h2>
+    <canvas id="sparkline" class="sparkline"></canvas>
+  </div>
+</div>
+
+<script>
+(function() {
+  var DASHBOARD_MODE = '__DASHBOARD_MODE__';
+  var isReplay = (DASHBOARD_MODE === 'replay');
+  var lastUptimeMs = null;
+  var lastStatsTime = null;
+
+  var dot = document.getElementById('statusDot');
+  var uptimeLabel = document.getElementById('uptimeLabel');
+  var replayBadge = document.getElementById('replayBadge');
+  var replaySpeed = document.getElementById('replaySpeed');
+  var replayPct = document.getElementById('replayPct');
+  var progressBarWrap = document.getElementById('progressBarWrap');
+  var progressFill = document.getElementById('progressFill');
+
+  if (isReplay) {
+    replayBadge.className = 'replay-badge visible';
+    progressBarWrap.className = 'progress-bar-wrap visible';
+    dot.className = 'status-dot replaying';
+    uptimeLabel.style.display = 'none';
+  }
+
+  function updateUptime() {
+    if (isReplay) return;
+    var up = lastUptimeMs;
+    if (up !== null && lastStatsTime !== null) {
+      up += (Date.now() - lastStatsTime);
+    }
+    if (up === null) { uptimeLabel.textContent = ''; return; }
+    var s = Math.floor(up / 1000);
+    var d = Math.floor(s / 86400);
+    var h = Math.floor((s % 86400) / 3600);
+    var m = Math.floor((s % 3600) / 60);
+    var sec = s % 60;
+    var parts = [];
+    if (d > 0) parts.push(d + 'd');
+    if (h > 0 || d > 0) parts.push(h + 'h');
+    parts.push(m + 'm');
+    parts.push(sec + 's');
+    uptimeLabel.textContent = parts.join(' ');
+  }
+  setInterval(updateUptime, 1000);
+
+  // ── State ──────────────────────────────────────────────
+  var currentActors = [];
+  var sortCol = 'worker';
+  var sortAsc = true;
+  var searchTimer = null;
+  var focusedAddrHex = null;
+  var depthHistory = {};
+  var HISTORY_MAX = 120;
+
+  var colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
+
+  // ── Helpers ────────────────────────────────────────────
+  function addrToHex(addr) {
+    var bytes = Array.isArray(addr) ? addr : Object.values(addr);
+    var hex = '';
+    for (var j = 0; j < Math.min(8, bytes.length); j++) {
+      hex += ('0' + bytes[j].toString(16)).slice(-2);
+    }
+    return hex + '\u2026';
+  }
+
+  function addrToFullHex(addr) {
+    var bytes = Array.isArray(addr) ? addr : Object.values(addr);
+    var hex = '';
+    for (var j = 0; j < bytes.length; j++) {
+      hex += ('0' + bytes[j].toString(16)).slice(-2);
+    }
+    return hex;
+  }
+
+  function shortTypeName(full) {
+    if (!full) return '';
+    var parts = full.split('::');
+    return parts[parts.length - 1];
+  }
+
+  function escapeHtml(s) {
+    if (!s) return '';
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
+
+  function depthColor(d) {
+    if (d === 0) return '#4caf50';
+    if (d <= 2) return '#8bc34a';
+    if (d <= 5) return '#cddc39';
+    if (d <= 10) return '#ff9800';
+    if (d <= 20) return '#ff5722';
+    return '#f44336';
+  }
+
+  // ── Stat cards ─────────────────────────────────────────
+  function updateStatCards(actors) {
+    var total = actors.length;
+    var sum = 0, max = 0;
+    var workerSet = {};
+    for (var i = 0; i < actors.length; i++) {
+      sum += actors[i].mailbox_depth;
+      if (actors[i].mailbox_depth > max) max = actors[i].mailbox_depth;
+      workerSet[actors[i].worker_id] = true;
+    }
+    var avg = total > 0 ? (sum / total).toFixed(1) : '0';
+    document.getElementById('statTotal').textContent = total;
+    document.getElementById('statAvgMbox').textContent = avg;
+    document.getElementById('statMaxMbox').textContent = max;
+    document.getElementById('statActiveWorkers').textContent = Object.keys(workerSet).length;
+  }
+
+  // ── Mailbox depth distribution chart ───────────────────
+  var depthCanvas = document.getElementById('depthChart');
+  var depthCtx = depthCanvas.getContext('2d');
+
+  var buckets = [
+    {label: '0', min: 0, max: 0},
+    {label: '1-2', min: 1, max: 2},
+    {label: '3-5', min: 3, max: 5},
+    {label: '6-10', min: 6, max: 10},
+    {label: '11-20', min: 11, max: 20},
+    {label: '21-50', min: 21, max: 50},
+    {label: '50+', min: 51, max: Infinity}
+  ];
+
+  var bucketColors = ['#4caf50','#8bc34a','#cddc39','#ff9800','#ff5722','#f44336','#d32f2f'];
+
+  function drawDepthChart(actors) {
+    var dpr = window.devicePixelRatio || 1;
+    var rect = depthCanvas.getBoundingClientRect();
+    depthCanvas.width = rect.width * dpr;
+    depthCanvas.height = rect.height * dpr;
+    depthCtx.scale(dpr, dpr);
+    var W = rect.width, H = rect.height;
+    depthCtx.clearRect(0, 0, W, H);
+
+    var counts = buckets.map(function() { return 0; });
+    for (var i = 0; i < actors.length; i++) {
+      var d = actors[i].mailbox_depth;
+      for (var b = 0; b < buckets.length; b++) {
+        if (d >= buckets[b].min && d <= buckets[b].max) {
+          counts[b]++;
+          break;
+        }
+      }
+    }
+
+    var maxCount = Math.max(1, Math.max.apply(null, counts));
+    var barW = Math.max(12, Math.floor((W - 40) / buckets.length) - 8);
+    var chartH = H - 35;
+
+    for (var i = 0; i < buckets.length; i++) {
+      var x = 20 + i * (barW + 8);
+      var h = (counts[i] / maxCount) * (chartH - 10);
+      depthCtx.fillStyle = bucketColors[i];
+      depthCtx.globalAlpha = 0.85;
+      depthCtx.fillRect(x, chartH - h, barW, h);
+
+      if (counts[i] > 0) {
+        depthCtx.globalAlpha = 1;
+        depthCtx.fillStyle = '#e0e0e0';
+        depthCtx.font = '10px monospace';
+        depthCtx.textAlign = 'center';
+        depthCtx.fillText(counts[i], x + barW / 2, chartH - h - 4);
+      }
+
+      depthCtx.globalAlpha = 1;
+      depthCtx.fillStyle = '#888';
+      depthCtx.font = '10px monospace';
+      depthCtx.textAlign = 'center';
+      depthCtx.fillText(buckets[i].label, x + barW / 2, H - 4);
+    }
+  }
+
+  // ── Actors per worker chart ────────────────────────────
+  var workerCanvas = document.getElementById('workerChart');
+  var workerCtx = workerCanvas.getContext('2d');
+
+  function drawWorkerChart(actors) {
+    var dpr = window.devicePixelRatio || 1;
+    var rect = workerCanvas.getBoundingClientRect();
+    workerCanvas.width = rect.width * dpr;
+    workerCanvas.height = rect.height * dpr;
+    workerCtx.scale(dpr, dpr);
+    var W = rect.width, H = rect.height;
+    workerCtx.clearRect(0, 0, W, H);
+
+    var workerCounts = {};
+    for (var i = 0; i < actors.length; i++) {
+      var wid = actors[i].worker_id;
+      workerCounts[wid] = (workerCounts[wid] || 0) + 1;
+    }
+    var entries = Object.keys(workerCounts).sort(function(a, b) { return +a - +b; })
+      .map(function(wid) { return {id: +wid, count: workerCounts[wid]}; });
+
+    if (entries.length === 0) return;
+
+    var maxCount = Math.max(1, Math.max.apply(null, entries.map(function(e) { return e.count; })));
+    var barW = Math.max(12, Math.floor((W - 40) / entries.length) - 8);
+    var chartH = H - 35;
+
+    for (var i = 0; i < entries.length; i++) {
+      var x = 20 + i * (barW + 8);
+      var h = (entries[i].count / maxCount) * (chartH - 10);
+      workerCtx.fillStyle = colors[entries[i].id % colors.length];
+      workerCtx.globalAlpha = 0.85;
+      workerCtx.fillRect(x, chartH - h, barW, h);
+
+      workerCtx.globalAlpha = 1;
+      workerCtx.fillStyle = '#e0e0e0';
+      workerCtx.font = '10px monospace';
+      workerCtx.textAlign = 'center';
+      workerCtx.fillText(entries[i].count, x + barW / 2, chartH - h - 4);
+
+      workerCtx.fillStyle = '#888';
+      workerCtx.fillText('W' + entries[i].id, x + barW / 2, H - 4);
+    }
+  }
+
+  // ── Actor table ────────────────────────────────────────
+  var MAX_TABLE_ROWS = 2000;
+
+  function renderActorTable() {
+    var filter = document.getElementById('actorSearch').value.toLowerCase();
+    var filtered = currentActors;
+    if (filter) {
+      filtered = currentActors.filter(function(a) {
+        var hex = addrToHex(a.address).toLowerCase();
+        return hex.indexOf(filter) >= 0 || ('w' + a.worker_id).indexOf(filter) >= 0;
+      });
+    }
+
+    // Sort
+    filtered.sort(function(a, b) {
+      var va, vb;
+      if (sortCol === 'address') {
+        va = addrToHex(a.address);
+        vb = addrToHex(b.address);
+        return sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
+      } else if (sortCol === 'worker') {
+        va = a.worker_id; vb = b.worker_id;
+      } else if (sortCol === 'msgs') {
+        va = a.messages_processed || 0; vb = b.messages_processed || 0;
+      } else {
+        va = a.mailbox_depth; vb = b.mailbox_depth;
+      }
+      return sortAsc ? va - vb : vb - va;
+    });
+
+    // Update sort arrows
+    ['address', 'worker', 'mailbox', 'msgs'].forEach(function(col) {
+      var key = col.charAt(0).toUpperCase() + col.slice(1);
+      var el = document.getElementById('sortArrow' + key);
+      if (col === sortCol) {
+        el.textContent = sortAsc ? '\u25B2' : '\u25BC';
+      } else {
+        el.textContent = '';
+      }
+    });
+
+    var maxDepth = 1;
+    for (var i = 0; i < currentActors.length; i++) {
+      if (currentActors[i].mailbox_depth > maxDepth) maxDepth = currentActors[i].mailbox_depth;
+    }
+
+    var tbody = document.getElementById('actorTableBody');
+    tbody.innerHTML = '';
+    var count = Math.min(filtered.length, MAX_TABLE_ROWS);
+    for (var i = 0; i < count; i++) {
+      var a = filtered[i];
+      var hex = addrToHex(a.address);
+      var fullHex = addrToFullHex(a.address);
+      var pct = Math.round((a.mailbox_depth / maxDepth) * 120);
+      var bc = depthColor(a.mailbox_depth);
+      var hasMsg = !!a.last_msg_type;
+      var msgShort = hasMsg ? shortTypeName(a.last_msg_type) : '\u2014';
+      var msgClass = hasMsg ? 'msg-type' : 'msg-type none';
+      var msgTitle = hasMsg ? ' title="' + escapeHtml(a.last_msg_type) + '"' : '';
+      var tr = document.createElement('tr');
+      tr.className = 'clickable' + (fullHex === focusedAddrHex ? ' focused' : '');
+      if (a.poisoned) tr.style.opacity = '0.6';
+      tr.setAttribute('data-addr', fullHex);
+      tr.innerHTML =
+        '<td style="color:#aaa;font-size:11px;">' + escapeHtml(hex) + (a.poisoned ? ' <span style="color:#f44336;font-size:9px;">DEAD</span>' : '') + '</td>' +
+        '<td>W' + a.worker_id + '</td>' +
+        '<td>' + a.mailbox_depth + '</td>' +
+        '<td>' + (a.messages_processed || 0).toLocaleString() + '</td>' +
+        '<td class="' + msgClass + '"' + msgTitle + '>' + escapeHtml(msgShort) + '</td>' +
+        '<td><div class="depth-bar" style="width:' + pct + 'px;background:' + bc + ';"></div></td>';
+      tr.addEventListener('click', (function(fh) { return function() { focusActor(fh); }; })(fullHex));
+      tbody.appendChild(tr);
+    }
+
+    if (filtered.length > MAX_TABLE_ROWS) {
+      var tr2 = document.createElement('tr');
+      tr2.innerHTML = '<td colspan="6" style="color:#555;">... and ' + (filtered.length - MAX_TABLE_ROWS) + ' more</td>';
+      tbody.appendChild(tr2);
+    }
+
+    var info = '(' + filtered.length + (filtered.length !== currentActors.length ? ' of ' + currentActors.length : '') + ')';
+    document.getElementById('actorCount').textContent = info;
+  }
+
+  // ── Focus / detail panel ───────────────────────────────
+  function focusActor(fullHex) {
+    focusedAddrHex = fullHex;
+    document.getElementById('detailPanel').className = 'panel full-width detail-panel visible';
+    updateDetailPanel();
+    renderActorTable();
+  }
+
+  function clearFocus() {
+    focusedAddrHex = null;
+    document.getElementById('detailPanel').className = 'panel full-width detail-panel';
+    renderActorTable();
+  }
+
+  document.getElementById('detailClose').addEventListener('click', clearFocus);
+
+  function updateDetailPanel() {
+    if (!focusedAddrHex) return;
+    var actor = null;
+    for (var i = 0; i < currentActors.length; i++) {
+      if (addrToFullHex(currentActors[i].address) === focusedAddrHex) {
+        actor = currentActors[i];
+        break;
+      }
+    }
+    if (!actor) {
+      document.getElementById('detailAddr').textContent = focusedAddrHex.substring(0, 16) + '\u2026 (gone)';
+      return;
+    }
+
+    document.getElementById('detailAddr').textContent = addrToHex(actor.address);
+    document.getElementById('detailFullAddr').textContent = focusedAddrHex;
+    document.getElementById('detailWorker').textContent = 'W' + actor.worker_id;
+    document.getElementById('detailMailbox').textContent = actor.mailbox_depth;
+    document.getElementById('detailMsgCount').textContent = (actor.messages_processed || 0).toLocaleString();
+
+    var hasMsg = !!actor.last_msg_type;
+    document.getElementById('detailLastMsg').innerHTML = hasMsg
+      ? '<span class="msg-type" title="' + escapeHtml(actor.last_msg_type) + '">' + escapeHtml(shortTypeName(actor.last_msg_type)) + '</span>'
+      : '<span class="msg-type none">\u2014</span>';
+
+    var isPoisoned = !!actor.poisoned;
+    document.getElementById('detailStatus').innerHTML = isPoisoned
+      ? '<span class="poisoned-badge">POISONED</span>'
+      : '<span class="healthy-badge">Healthy</span>';
+
+    drawSparkline();
+  }
+
+  // ── Sparkline ──────────────────────────────────────────
+  function drawSparkline() {
+    var canvas = document.getElementById('sparkline');
+    var ctx = canvas.getContext('2d');
+    var dpr = window.devicePixelRatio || 1;
+    var rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+    var W = rect.width, H = rect.height;
+    ctx.clearRect(0, 0, W, H);
+
+    var hist = depthHistory[focusedAddrHex];
+    if (!hist || hist.length < 2) {
+      ctx.fillStyle = '#555';
+      ctx.font = '11px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText('Collecting data\u2026', W / 2, H / 2);
+      return;
+    }
+
+    var max = Math.max(1, Math.max.apply(null, hist));
+    var padY = 6, padX = 4;
+    var drawW = W - padX * 2;
+    var drawH = H - padY * 2;
+
+    // Fill area
+    ctx.beginPath();
+    ctx.moveTo(padX, H - padY);
+    for (var i = 0; i < hist.length; i++) {
+      var x = padX + (i / (hist.length - 1)) * drawW;
+      var y = (H - padY) - (hist[i] / max) * drawH;
+      ctx.lineTo(x, y);
+    }
+    ctx.lineTo(padX + drawW, H - padY);
+    ctx.closePath();
+    ctx.fillStyle = 'rgba(99, 102, 241, 0.15)';
+    ctx.fill();
+
+    // Line
+    ctx.beginPath();
+    for (var i = 0; i < hist.length; i++) {
+      var x = padX + (i / (hist.length - 1)) * drawW;
+      var y = (H - padY) - (hist[i] / max) * drawH;
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    ctx.strokeStyle = '#6366f1';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    // Label
+    var last = hist[hist.length - 1];
+    ctx.fillStyle = '#e0e0e0';
+    ctx.font = '10px monospace';
+    ctx.textAlign = 'right';
+    ctx.fillText('depth: ' + last + '  max: ' + max, W - padX, padY + 8);
+  }
+
+  // ── Sort click handlers ────────────────────────────────
+  var sortHeaders = document.querySelectorAll('.sortable');
+  for (var i = 0; i < sortHeaders.length; i++) {
+    sortHeaders[i].addEventListener('click', function() {
+      var col = this.getAttribute('data-sort');
+      if (sortCol === col) { sortAsc = !sortAsc; }
+      else { sortCol = col; sortAsc = true; }
+      renderActorTable();
+    });
+  }
+
+  // ── Search handler ─────────────────────────────────────
+  document.getElementById('actorSearch').addEventListener('keyup', function() {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(renderActorTable, 150);
+  });
+
+  // ── Status helpers ─────────────────────────────────────
+  function setStatus(s) {
+    if (s === 'done') {
+      dot.className = 'status-dot done';
+      if (isReplay) {
+        replayPct.textContent = '100%';
+        progressFill.style.width = '100%';
+      }
+    } else if (s === 'disconnected') {
+      dot.className = 'status-dot disconnected';
+    } else {
+      dot.className = isReplay ? 'status-dot replaying' : 'status-dot';
+    }
+  }
+
+  // ── SSE connection ─────────────────────────────────────
+  var es = new EventSource('/events');
+
+  es.addEventListener('stats', function(e) {
+    try {
+      var data = JSON.parse(e.data);
+      if (typeof data.uptime_ms === 'number') {
+        lastUptimeMs = data.uptime_ms;
+        lastStatsTime = Date.now();
+      }
+      currentActors = data.actor_details || [];
+      updateStatCards(currentActors);
+      drawDepthChart(currentActors);
+      drawWorkerChart(currentActors);
+
+      // Accumulate per-actor depth history
+      var liveAddrs = {};
+      for (var i = 0; i < currentActors.length; i++) {
+        var fh = addrToFullHex(currentActors[i].address);
+        liveAddrs[fh] = true;
+        if (!depthHistory[fh]) depthHistory[fh] = [];
+        depthHistory[fh].push(currentActors[i].mailbox_depth);
+        if (depthHistory[fh].length > HISTORY_MAX) depthHistory[fh].shift();
+      }
+      // Clean up stale entries for removed actors
+      for (var key in depthHistory) {
+        if (!liveAddrs[key]) delete depthHistory[key];
+      }
+
+      renderActorTable();
+      if (focusedAddrHex) updateDetailPanel();
+    } catch(err) { console.error('stats parse error', err); }
+  });
+
+  es.addEventListener('replay_meta', function(e) {
+    try {
+      var meta = JSON.parse(e.data);
+      replaySpeed.textContent = meta.speed + 'x';
+      replaySpeed.style.display = 'inline';
+      replayPct.style.display = 'inline';
+      replayPct.textContent = '0%';
+    } catch(err) { console.error('replay_meta parse error', err); }
+  });
+
+  es.addEventListener('replay_progress', function(e) {
+    try {
+      var data = JSON.parse(e.data);
+      var pct = Math.round(data.progress * 100);
+      replayPct.textContent = pct + '%';
+      progressFill.style.width = pct + '%';
+    } catch(err) { console.error('replay_progress parse error', err); }
+  });
+
+  es.addEventListener('done', function() {
+    setStatus('done');
+    es.close();
+  });
+
+  es.onerror = function() {
+    setStatus('disconnected');
+  };
+
+  es.onopen = function() {
+    setStatus('connected');
+  };
+})();
+</script>
+</body>
+</html>
diff --git a/crates/runtime-dashboard/src/actors_html.rs b/crates/runtime-dashboard/src/actors_html.rs
index 7fb6100..bdc648e 100644
--- a/crates/runtime-dashboard/src/actors_html.rs
+++ b/crates/runtime-dashboard/src/actors_html.rs
@@ -1,740 +1 @@
-pub const ACTORS_HTML: &str = r##"<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Swactor Runtime – Actors</title>
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
-
-  .header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
-  }
-  .header-left { display: flex; align-items: center; }
-  .header h1 { font-size: 16px; font-weight: 600; color: #fff; }
-  .status-dot {
-    width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
-    display: inline-block; margin-left: 8px; vertical-align: middle;
-  }
-  .status-dot.disconnected { background: #f44336; }
-  .status-dot.done { background: #ff9800; }
-  .status-dot.replaying { background: #2196f3; animation: pulse 1.5s infinite; }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
-  }
-
-  .replay-badge {
-    display: none; background: #2196f3; color: #fff; font-size: 10px; font-weight: 700;
-    padding: 2px 8px; border-radius: 3px; margin-left: 10px; letter-spacing: 1px;
-    vertical-align: middle;
-  }
-  .replay-badge.visible { display: inline-block; }
-
-  .nav-links { display: flex; gap: 4px; margin-left: 20px; }
-  .nav-link {
-    color: #888; text-decoration: none; font-size: 12px;
-    padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
-  }
-  .nav-link:hover { color: #e0e0e0; }
-  .nav-link.active { color: #fff; background: #2a2d3e; }
-
-  .header-right { display: flex; align-items: center; gap: 12px; }
-
-  .progress-bar-wrap {
-    display: none; width: 100%; height: 3px; background: #2a2d3e;
-  }
-  .progress-bar-wrap.visible { display: block; }
-  .progress-fill {
-    height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;
-  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px; padding: 12px;
-  }
-
-  .panel {
-    background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
-    padding: 14px; overflow: hidden;
-  }
-  .panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
-
-  .full-width { grid-column: 1 / -1; }
-
-  .stats-cards {
-    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
-  }
-  .stat-card {
-    background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
-  }
-  .stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
-  .stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
-
-  canvas { width: 100%; height: 200px; }
-
-  .search-wrap { margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
-  .search-input {
-    background: #1c1f2e; border: 1px solid #2a2d3e; color: #e0e0e0;
-    padding: 6px 10px; border-radius: 4px; font-family: inherit;
-    font-size: 12px; width: 300px; outline: none;
-  }
-  .search-input:focus { border-color: #6366f1; }
-  .search-info { color: #555; font-size: 11px; }
-
-  .actor-list-wrap { max-height: 500px; overflow-y: auto; }
-  .actor-list-wrap table { width: 100%; border-collapse: collapse; }
-  .actor-list-wrap th, .actor-list-wrap td {
-    padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2d3e; font-size: 12px;
-  }
-  .actor-list-wrap th {
-    color: #888; font-weight: 500; position: sticky; top: 0; background: #161822;
-  }
-  .sortable { cursor: pointer; user-select: none; }
-  .sortable:hover { color: #e0e0e0; }
-  .sort-arrow { font-size: 10px; margin-left: 4px; color: #6366f1; }
-
-  .depth-bar {
-    height: 8px; border-radius: 2px; max-width: 120px; min-width: 2px;
-  }
-
-  .msg-type { color: #4caf50; }
-  .msg-type.none { color: #555; font-style: italic; }
-
-  tr.focused { background: #1c1f2e; }
-  tr.clickable { cursor: pointer; }
-  tr.clickable:hover { background: #1a1d2c; }
-
-  .detail-panel { display: none; }
-  .detail-panel.visible { display: block; }
-  .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
-  .detail-close {
-    background: none; border: 1px solid #2a2d3e; color: #888; border-radius: 3px;
-    padding: 2px 8px; cursor: pointer; font-family: inherit; font-size: 11px;
-  }
-  .detail-close:hover { color: #e0e0e0; border-color: #555; }
-  .detail-grid {
-    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
-  }
-  .detail-item { background: #1c1f2e; border-radius: 4px; padding: 8px 10px; }
-  .detail-item .d-label { font-size: 10px; color: #888; text-transform: uppercase; }
-  .detail-item .d-value { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; word-break: break-all; }
-  .poisoned-badge {
-    background: #f44336; color: #fff; font-size: 10px; font-weight: 700;
-    padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px;
-  }
-  .healthy-badge { color: #4caf50; font-size: 12px; }
-  canvas.sparkline { width: 100%; height: 60px; }
-
-  ::-webkit-scrollbar { width: 6px; }
-  ::-webkit-scrollbar-track { background: #0f1117; }
-  ::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
-</style>
-</head>
-<body>
-<div class="header">
-  <div class="header-left">
-    <h1>
-      Swactor Runtime Dashboard
-      <span id="statusDot" class="status-dot"></span>
-      <span id="replayBadge" class="replay-badge">REPLAY</span>
-    </h1>
-    <nav class="nav-links">
-      <a href="/" class="nav-link">Overview</a>
-      <a href="/actors" class="nav-link active">Actors</a>
-      <a href="/distribution" class="nav-link">Distribution</a>
-    </nav>
-  </div>
-  <div class="header-right">
-    <span id="replaySpeed" style="color:#2196f3;font-size:12px;display:none;"></span>
-    <span id="replayPct" style="color:#888;font-size:12px;display:none;"></span>
-    <span id="uptimeLabel" style="color:#888;font-size:12px;"></span>
-  </div>
-</div>
-<div id="progressBarWrap" class="progress-bar-wrap">
-  <div id="progressFill" class="progress-fill"></div>
-</div>
-
-<div class="grid">
-  <!-- Stat cards -->
-  <div class="panel full-width">
-    <h2>Actor Stats</h2>
-    <div class="stats-cards">
-      <div class="stat-card"><div class="value" id="statTotal">0</div><div class="label">Total Actors</div></div>
-      <div class="stat-card"><div class="value" id="statAvgMbox">0</div><div class="label">Avg Mailbox</div></div>
-      <div class="stat-card"><div class="value" id="statMaxMbox">0</div><div class="label">Max Mailbox</div></div>
-      <div class="stat-card"><div class="value" id="statActiveWorkers">0</div><div class="label">Active Workers</div></div>
-    </div>
-  </div>
-
-  <!-- Mailbox depth distribution -->
-  <div class="panel">
-    <h2>Mailbox Depth Distribution</h2>
-    <canvas id="depthChart"></canvas>
-  </div>
-
-  <!-- Actors per worker -->
-  <div class="panel">
-    <h2>Actors per Worker</h2>
-    <canvas id="workerChart"></canvas>
-  </div>
-
-  <!-- Actor table -->
-  <div class="panel full-width">
-    <h2>All Actors <span id="actorCount" style="color:#555;font-weight:400;"></span></h2>
-    <div class="search-wrap">
-      <input type="text" id="actorSearch" class="search-input" placeholder="Filter by address or worker..." />
-      <span id="searchInfo" class="search-info"></span>
-    </div>
-    <div class="actor-list-wrap">
-      <table>
-        <thead>
-          <tr>
-            <th class="sortable" data-sort="address">Address <span id="sortArrowAddress" class="sort-arrow"></span></th>
-            <th class="sortable" data-sort="worker">Worker <span id="sortArrowWorker" class="sort-arrow"></span></th>
-            <th class="sortable" data-sort="mailbox">Mailbox <span id="sortArrowMailbox" class="sort-arrow"></span></th>
-            <th class="sortable" data-sort="msgs">Msgs <span id="sortArrowMsgs" class="sort-arrow"></span></th>
-            <th>Last Msg</th>
-            <th>Depth</th>
-          </tr>
-        </thead>
-        <tbody id="actorTableBody"></tbody>
-      </table>
-    </div>
-  </div>
-
-  <!-- Actor detail panel -->
-  <div id="detailPanel" class="panel full-width detail-panel">
-    <div class="detail-header">
-      <h2>Actor Detail <span id="detailAddr" style="color:#aaa;font-weight:400;"></span></h2>
-      <button class="detail-close" id="detailClose">Close</button>
-    </div>
-    <div class="detail-grid">
-      <div class="detail-item"><div class="d-label">Full Address</div><div class="d-value" id="detailFullAddr" style="font-size:11px;"></div></div>
-      <div class="detail-item"><div class="d-label">Worker</div><div class="d-value" id="detailWorker"></div></div>
-      <div class="detail-item"><div class="d-label">Mailbox Depth</div><div class="d-value" id="detailMailbox"></div></div>
-      <div class="detail-item"><div class="d-label">Messages Processed</div><div class="d-value" id="detailMsgCount"></div></div>
-      <div class="detail-item"><div class="d-label">Last Message Type</div><div class="d-value" id="detailLastMsg"></div></div>
-      <div class="detail-item"><div class="d-label">Status</div><div class="d-value" id="detailStatus"></div></div>
-    </div>
-    <h2>Mailbox Depth History</h2>
-    <canvas id="sparkline" class="sparkline"></canvas>
-  </div>
-</div>
-
-<script>
-(function() {
-  var DASHBOARD_MODE = '__DASHBOARD_MODE__';
-  var isReplay = (DASHBOARD_MODE === 'replay');
-  var lastUptimeMs = null;
-  var lastStatsTime = null;
-
-  var dot = document.getElementById('statusDot');
-  var uptimeLabel = document.getElementById('uptimeLabel');
-  var replayBadge = document.getElementById('replayBadge');
-  var replaySpeed = document.getElementById('replaySpeed');
-  var replayPct = document.getElementById('replayPct');
-  var progressBarWrap = document.getElementById('progressBarWrap');
-  var progressFill = document.getElementById('progressFill');
-
-  if (isReplay) {
-    replayBadge.className = 'replay-badge visible';
-    progressBarWrap.className = 'progress-bar-wrap visible';
-    dot.className = 'status-dot replaying';
-    uptimeLabel.style.display = 'none';
-  }
-
-  function updateUptime() {
-    if (isReplay) return;
-    var up = lastUptimeMs;
-    if (up !== null && lastStatsTime !== null) {
-      up += (Date.now() - lastStatsTime);
-    }
-    if (up === null) { uptimeLabel.textContent = ''; return; }
-    var s = Math.floor(up / 1000);
-    var d = Math.floor(s / 86400);
-    var h = Math.floor((s % 86400) / 3600);
-    var m = Math.floor((s % 3600) / 60);
-    var sec = s % 60;
-    var parts = [];
-    if (d > 0) parts.push(d + 'd');
-    if (h > 0 || d > 0) parts.push(h + 'h');
-    parts.push(m + 'm');
-    parts.push(sec + 's');
-    uptimeLabel.textContent = parts.join(' ');
-  }
-  setInterval(updateUptime, 1000);
-
-  // ── State ──────────────────────────────────────────────
-  var currentActors = [];
-  var sortCol = 'worker';
-  var sortAsc = true;
-  var searchTimer = null;
-  var focusedAddrHex = null;
-  var depthHistory = {};
-  var HISTORY_MAX = 120;
-
-  var colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
-
-  // ── Helpers ────────────────────────────────────────────
-  function addrToHex(addr) {
-    var bytes = Array.isArray(addr) ? addr : Object.values(addr);
-    var hex = '';
-    for (var j = 0; j < Math.min(8, bytes.length); j++) {
-      hex += ('0' + bytes[j].toString(16)).slice(-2);
-    }
-    return hex + '\u2026';
-  }
-
-  function addrToFullHex(addr) {
-    var bytes = Array.isArray(addr) ? addr : Object.values(addr);
-    var hex = '';
-    for (var j = 0; j < bytes.length; j++) {
-      hex += ('0' + bytes[j].toString(16)).slice(-2);
-    }
-    return hex;
-  }
-
-  function shortTypeName(full) {
-    if (!full) return '';
-    var parts = full.split('::');
-    return parts[parts.length - 1];
-  }
-
-  function escapeHtml(s) {
-    if (!s) return '';
-    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-  }
-
-  function depthColor(d) {
-    if (d === 0) return '#4caf50';
-    if (d <= 2) return '#8bc34a';
-    if (d <= 5) return '#cddc39';
-    if (d <= 10) return '#ff9800';
-    if (d <= 20) return '#ff5722';
-    return '#f44336';
-  }
-
-  // ── Stat cards ─────────────────────────────────────────
-  function updateStatCards(actors) {
-    var total = actors.length;
-    var sum = 0, max = 0;
-    var workerSet = {};
-    for (var i = 0; i < actors.length; i++) {
-      sum += actors[i].mailbox_depth;
-      if (actors[i].mailbox_depth > max) max = actors[i].mailbox_depth;
-      workerSet[actors[i].worker_id] = true;
-    }
-    var avg = total > 0 ? (sum / total).toFixed(1) : '0';
-    document.getElementById('statTotal').textContent = total;
-    document.getElementById('statAvgMbox').textContent = avg;
-    document.getElementById('statMaxMbox').textContent = max;
-    document.getElementById('statActiveWorkers').textContent = Object.keys(workerSet).length;
-  }
-
-  // ── Mailbox depth distribution chart ───────────────────
-  var depthCanvas = document.getElementById('depthChart');
-  var depthCtx = depthCanvas.getContext('2d');
-
-  var buckets = [
-    {label: '0', min: 0, max: 0},
-    {label: '1-2', min: 1, max: 2},
-    {label: '3-5', min: 3, max: 5},
-    {label: '6-10', min: 6, max: 10},
-    {label: '11-20', min: 11, max: 20},
-    {label: '21-50', min: 21, max: 50},
-    {label: '50+', min: 51, max: Infinity}
-  ];
-
-  var bucketColors = ['#4caf50','#8bc34a','#cddc39','#ff9800','#ff5722','#f44336','#d32f2f'];
-
-  function drawDepthChart(actors) {
-    var dpr = window.devicePixelRatio || 1;
-    var rect = depthCanvas.getBoundingClientRect();
-    depthCanvas.width = rect.width * dpr;
-    depthCanvas.height = rect.height * dpr;
-    depthCtx.scale(dpr, dpr);
-    var W = rect.width, H = rect.height;
-    depthCtx.clearRect(0, 0, W, H);
-
-    var counts = buckets.map(function() { return 0; });
-    for (var i = 0; i < actors.length; i++) {
-      var d = actors[i].mailbox_depth;
-      for (var b = 0; b < buckets.length; b++) {
-        if (d >= buckets[b].min && d <= buckets[b].max) {
-          counts[b]++;
-          break;
-        }
-      }
-    }
-
-    var maxCount = Math.max(1, Math.max.apply(null, counts));
-    var barW = Math.max(12, Math.floor((W - 40) / buckets.length) - 8);
-    var chartH = H - 35;
-
-    for (var i = 0; i < buckets.length; i++) {
-      var x = 20 + i * (barW + 8);
-      var h = (counts[i] / maxCount) * (chartH - 10);
-      depthCtx.fillStyle = bucketColors[i];
-      depthCtx.globalAlpha = 0.85;
-      depthCtx.fillRect(x, chartH - h, barW, h);
-
-      if (counts[i] > 0) {
-        depthCtx.globalAlpha = 1;
-        depthCtx.fillStyle = '#e0e0e0';
-        depthCtx.font = '10px monospace';
-        depthCtx.textAlign = 'center';
-        depthCtx.fillText(counts[i], x + barW / 2, chartH - h - 4);
-      }
-
-      depthCtx.globalAlpha = 1;
-      depthCtx.fillStyle = '#888';
-      depthCtx.font = '10px monospace';
-      depthCtx.textAlign = 'center';
-      depthCtx.fillText(buckets[i].label, x + barW / 2, H - 4);
-    }
-  }
-
-  // ── Actors per worker chart ────────────────────────────
-  var workerCanvas = document.getElementById('workerChart');
-  var workerCtx = workerCanvas.getContext('2d');
-
-  function drawWorkerChart(actors) {
-    var dpr = window.devicePixelRatio || 1;
-    var rect = workerCanvas.getBoundingClientRect();
-    workerCanvas.width = rect.width * dpr;
-    workerCanvas.height = rect.height * dpr;
-    workerCtx.scale(dpr, dpr);
-    var W = rect.width, H = rect.height;
-    workerCtx.clearRect(0, 0, W, H);
-
-    var workerCounts = {};
-    for (var i = 0; i < actors.length; i++) {
-      var wid = actors[i].worker_id;
-      workerCounts[wid] = (workerCounts[wid] || 0) + 1;
-    }
-    var entries = Object.keys(workerCounts).sort(function(a, b) { return +a - +b; })
-      .map(function(wid) { return {id: +wid, count: workerCounts[wid]}; });
-
-    if (entries.length === 0) return;
-
-    var maxCount = Math.max(1, Math.max.apply(null, entries.map(function(e) { return e.count; })));
-    var barW = Math.max(12, Math.floor((W - 40) / entries.length) - 8);
-    var chartH = H - 35;
-
-    for (var i = 0; i < entries.length; i++) {
-      var x = 20 + i * (barW + 8);
-      var h = (entries[i].count / maxCount) * (chartH - 10);
-      workerCtx.fillStyle = colors[entries[i].id % colors.length];
-      workerCtx.globalAlpha = 0.85;
-      workerCtx.fillRect(x, chartH - h, barW, h);
-
-      workerCtx.globalAlpha = 1;
-      workerCtx.fillStyle = '#e0e0e0';
-      workerCtx.font = '10px monospace';
-      workerCtx.textAlign = 'center';
-      workerCtx.fillText(entries[i].count, x + barW / 2, chartH - h - 4);
-
-      workerCtx.fillStyle = '#888';
-      workerCtx.fillText('W' + entries[i].id, x + barW / 2, H - 4);
-    }
-  }
-
-  // ── Actor table ────────────────────────────────────────
-  var MAX_TABLE_ROWS = 2000;
-
-  function renderActorTable() {
-    var filter = document.getElementById('actorSearch').value.toLowerCase();
-    var filtered = currentActors;
-    if (filter) {
-      filtered = currentActors.filter(function(a) {
-        var hex = addrToHex(a.address).toLowerCase();
-        return hex.indexOf(filter) >= 0 || ('w' + a.worker_id).indexOf(filter) >= 0;
-      });
-    }
-
-    // Sort
-    filtered.sort(function(a, b) {
-      var va, vb;
-      if (sortCol === 'address') {
-        va = addrToHex(a.address);
-        vb = addrToHex(b.address);
-        return sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
-      } else if (sortCol === 'worker') {
-        va = a.worker_id; vb = b.worker_id;
-      } else if (sortCol === 'msgs') {
-        va = a.messages_processed || 0; vb = b.messages_processed || 0;
-      } else {
-        va = a.mailbox_depth; vb = b.mailbox_depth;
-      }
-      return sortAsc ? va - vb : vb - va;
-    });
-
-    // Update sort arrows
-    ['address', 'worker', 'mailbox', 'msgs'].forEach(function(col) {
-      var key = col.charAt(0).toUpperCase() + col.slice(1);
-      var el = document.getElementById('sortArrow' + key);
-      if (col === sortCol) {
-        el.textContent = sortAsc ? '\u25B2' : '\u25BC';
-      } else {
-        el.textContent = '';
-      }
-    });
-
-    var maxDepth = 1;
-    for (var i = 0; i < currentActors.length; i++) {
-      if (currentActors[i].mailbox_depth > maxDepth) maxDepth = currentActors[i].mailbox_depth;
-    }
-
-    var tbody = document.getElementById('actorTableBody');
-    tbody.innerHTML = '';
-    var count = Math.min(filtered.length, MAX_TABLE_ROWS);
-    for (var i = 0; i < count; i++) {
-      var a = filtered[i];
-      var hex = addrToHex(a.address);
-      var fullHex = addrToFullHex(a.address);
-      var pct = Math.round((a.mailbox_depth / maxDepth) * 120);
-      var bc = depthColor(a.mailbox_depth);
-      var hasMsg = !!a.last_msg_type;
-      var msgShort = hasMsg ? shortTypeName(a.last_msg_type) : '\u2014';
-      var msgClass = hasMsg ? 'msg-type' : 'msg-type none';
-      var msgTitle = hasMsg ? ' title="' + escapeHtml(a.last_msg_type) + '"' : '';
-      var tr = document.createElement('tr');
-      tr.className = 'clickable' + (fullHex === focusedAddrHex ? ' focused' : '');
-      if (a.poisoned) tr.style.opacity = '0.6';
-      tr.setAttribute('data-addr', fullHex);
-      tr.innerHTML =
-        '<td style="color:#aaa;font-size:11px;">' + escapeHtml(hex) + (a.poisoned ? ' <span style="color:#f44336;font-size:9px;">DEAD</span>' : '') + '</td>' +
-        '<td>W' + a.worker_id + '</td>' +
-        '<td>' + a.mailbox_depth + '</td>' +
-        '<td>' + (a.messages_processed || 0).toLocaleString() + '</td>' +
-        '<td class="' + msgClass + '"' + msgTitle + '>' + escapeHtml(msgShort) + '</td>' +
-        '<td><div class="depth-bar" style="width:' + pct + 'px;background:' + bc + ';"></div></td>';
-      tr.addEventListener('click', (function(fh) { return function() { focusActor(fh); }; })(fullHex));
-      tbody.appendChild(tr);
-    }
-
-    if (filtered.length > MAX_TABLE_ROWS) {
-      var tr2 = document.createElement('tr');
-      tr2.innerHTML = '<td colspan="6" style="color:#555;">... and ' + (filtered.length - MAX_TABLE_ROWS) + ' more</td>';
-      tbody.appendChild(tr2);
-    }
-
-    var info = '(' + filtered.length + (filtered.length !== currentActors.length ? ' of ' + currentActors.length : '') + ')';
-    document.getElementById('actorCount').textContent = info;
-  }
-
-  // ── Focus / detail panel ───────────────────────────────
-  function focusActor(fullHex) {
-    focusedAddrHex = fullHex;
-    document.getElementById('detailPanel').className = 'panel full-width detail-panel visible';
-    updateDetailPanel();
-    renderActorTable();
-  }
-
-  function clearFocus() {
-    focusedAddrHex = null;
-    document.getElementById('detailPanel').className = 'panel full-width detail-panel';
-    renderActorTable();
-  }
-
-  document.getElementById('detailClose').addEventListener('click', clearFocus);
-
-  function updateDetailPanel() {
-    if (!focusedAddrHex) return;
-    var actor = null;
-    for (var i = 0; i < currentActors.length; i++) {
-      if (addrToFullHex(currentActors[i].address) === focusedAddrHex) {
-        actor = currentActors[i];
-        break;
-      }
-    }
-    if (!actor) {
-      document.getElementById('detailAddr').textContent = focusedAddrHex.substring(0, 16) + '\u2026 (gone)';
-      return;
-    }
-
-    document.getElementById('detailAddr').textContent = addrToHex(actor.address);
-    document.getElementById('detailFullAddr').textContent = focusedAddrHex;
-    document.getElementById('detailWorker').textContent = 'W' + actor.worker_id;
-    document.getElementById('detailMailbox').textContent = actor.mailbox_depth;
-    document.getElementById('detailMsgCount').textContent = (actor.messages_processed || 0).toLocaleString();
-
-    var hasMsg = !!actor.last_msg_type;
-    document.getElementById('detailLastMsg').innerHTML = hasMsg
-      ? '<span class="msg-type" title="' + escapeHtml(actor.last_msg_type) + '">' + escapeHtml(shortTypeName(actor.last_msg_type)) + '</span>'
-      : '<span class="msg-type none">\u2014</span>';
-
-    var isPoisoned = !!actor.poisoned;
-    document.getElementById('detailStatus').innerHTML = isPoisoned
-      ? '<span class="poisoned-badge">POISONED</span>'
-      : '<span class="healthy-badge">Healthy</span>';
-
-    drawSparkline();
-  }
-
-  // ── Sparkline ──────────────────────────────────────────
-  function drawSparkline() {
-    var canvas = document.getElementById('sparkline');
-    var ctx = canvas.getContext('2d');
-    var dpr = window.devicePixelRatio || 1;
-    var rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width * dpr;
-    canvas.height = rect.height * dpr;
-    ctx.scale(dpr, dpr);
-    var W = rect.width, H = rect.height;
-    ctx.clearRect(0, 0, W, H);
-
-    var hist = depthHistory[focusedAddrHex];
-    if (!hist || hist.length < 2) {
-      ctx.fillStyle = '#555';
-      ctx.font = '11px monospace';
-      ctx.textAlign = 'center';
-      ctx.fillText('Collecting data\u2026', W / 2, H / 2);
-      return;
-    }
-
-    var max = Math.max(1, Math.max.apply(null, hist));
-    var padY = 6, padX = 4;
-    var drawW = W - padX * 2;
-    var drawH = H - padY * 2;
-
-    // Fill area
-    ctx.beginPath();
-    ctx.moveTo(padX, H - padY);
-    for (var i = 0; i < hist.length; i++) {
-      var x = padX + (i / (hist.length - 1)) * drawW;
-      var y = (H - padY) - (hist[i] / max) * drawH;
-      ctx.lineTo(x, y);
-    }
-    ctx.lineTo(padX + drawW, H - padY);
-    ctx.closePath();
-    ctx.fillStyle = 'rgba(99, 102, 241, 0.15)';
-    ctx.fill();
-
-    // Line
-    ctx.beginPath();
-    for (var i = 0; i < hist.length; i++) {
-      var x = padX + (i / (hist.length - 1)) * drawW;
-      var y = (H - padY) - (hist[i] / max) * drawH;
-      if (i === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-    ctx.strokeStyle = '#6366f1';
-    ctx.lineWidth = 1.5;
-    ctx.stroke();
-
-    // Label
-    var last = hist[hist.length - 1];
-    ctx.fillStyle = '#e0e0e0';
-    ctx.font = '10px monospace';
-    ctx.textAlign = 'right';
-    ctx.fillText('depth: ' + last + '  max: ' + max, W - padX, padY + 8);
-  }
-
-  // ── Sort click handlers ────────────────────────────────
-  var sortHeaders = document.querySelectorAll('.sortable');
-  for (var i = 0; i < sortHeaders.length; i++) {
-    sortHeaders[i].addEventListener('click', function() {
-      var col = this.getAttribute('data-sort');
-      if (sortCol === col) { sortAsc = !sortAsc; }
-      else { sortCol = col; sortAsc = true; }
-      renderActorTable();
-    });
-  }
-
-  // ── Search handler ─────────────────────────────────────
-  document.getElementById('actorSearch').addEventListener('keyup', function() {
-    clearTimeout(searchTimer);
-    searchTimer = setTimeout(renderActorTable, 150);
-  });
-
-  // ── Status helpers ─────────────────────────────────────
-  function setStatus(s) {
-    if (s === 'done') {
-      dot.className = 'status-dot done';
-      if (isReplay) {
-        replayPct.textContent = '100%';
-        progressFill.style.width = '100%';
-      }
-    } else if (s === 'disconnected') {
-      dot.className = 'status-dot disconnected';
-    } else {
-      dot.className = isReplay ? 'status-dot replaying' : 'status-dot';
-    }
-  }
-
-  // ── SSE connection ─────────────────────────────────────
-  var es = new EventSource('/events');
-
-  es.addEventListener('stats', function(e) {
-    try {
-      var data = JSON.parse(e.data);
-      if (typeof data.uptime_ms === 'number') {
-        lastUptimeMs = data.uptime_ms;
-        lastStatsTime = Date.now();
-      }
-      currentActors = data.actor_details || [];
-      updateStatCards(currentActors);
-      drawDepthChart(currentActors);
-      drawWorkerChart(currentActors);
-
-      // Accumulate per-actor depth history
-      var liveAddrs = {};
-      for (var i = 0; i < currentActors.length; i++) {
-        var fh = addrToFullHex(currentActors[i].address);
-        liveAddrs[fh] = true;
-        if (!depthHistory[fh]) depthHistory[fh] = [];
-        depthHistory[fh].push(currentActors[i].mailbox_depth);
-        if (depthHistory[fh].length > HISTORY_MAX) depthHistory[fh].shift();
-      }
-      // Clean up stale entries for removed actors
-      for (var key in depthHistory) {
-        if (!liveAddrs[key]) delete depthHistory[key];
-      }
-
-      renderActorTable();
-      if (focusedAddrHex) updateDetailPanel();
-    } catch(err) { console.error('stats parse error', err); }
-  });
-
-  es.addEventListener('replay_meta', function(e) {
-    try {
-      var meta = JSON.parse(e.data);
-      replaySpeed.textContent = meta.speed + 'x';
-      replaySpeed.style.display = 'inline';
-      replayPct.style.display = 'inline';
-      replayPct.textContent = '0%';
-    } catch(err) { console.error('replay_meta parse error', err); }
-  });
-
-  es.addEventListener('replay_progress', function(e) {
-    try {
-      var data = JSON.parse(e.data);
-      var pct = Math.round(data.progress * 100);
-      replayPct.textContent = pct + '%';
-      progressFill.style.width = pct + '%';
-    } catch(err) { console.error('replay_progress parse error', err); }
-  });
-
-  es.addEventListener('done', function() {
-    setStatus('done');
-    es.close();
-  });
-
-  es.onerror = function() {
-    setStatus('disconnected');
-  };
-
-  es.onopen = function() {
-    setStatus('connected');
-  };
-})();
-</script>
-</body>
-</html>
-"##;
+pub const ACTORS_HTML: &str = include_str!("actors.html");
diff --git a/crates/runtime-dashboard/src/dashboard.html b/crates/runtime-dashboard/src/dashboard.html
new file mode 100644
index 0000000..c4e9bc3
--- /dev/null
+++ b/crates/runtime-dashboard/src/dashboard.html
@@ -0,0 +1,511 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Swactor Runtime Dashboard</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
+
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
+  }
+  .header h1 { font-size: 16px; font-weight: 600; color: #fff; }
+  .status-dot {
+    width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
+    display: inline-block; margin-left: 8px; vertical-align: middle;
+  }
+  .status-dot.disconnected { background: #f44336; }
+  .status-dot.done { background: #ff9800; }
+  .status-dot.replaying { background: #2196f3; animation: pulse 1.5s infinite; }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+
+  .replay-badge {
+    display: none; background: #2196f3; color: #fff; font-size: 10px; font-weight: 700;
+    padding: 2px 8px; border-radius: 3px; margin-left: 10px; letter-spacing: 1px;
+    vertical-align: middle;
+  }
+  .replay-badge.visible { display: inline-block; }
+
+  .header-left { display: flex; align-items: center; }
+  .nav-links { display: flex; gap: 4px; margin-left: 20px; }
+  .nav-link {
+    color: #888; text-decoration: none; font-size: 12px;
+    padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
+  }
+  .nav-link:hover { color: #e0e0e0; }
+  .nav-link.active { color: #fff; background: #2a2d3e; }
+
+  .header-right { display: flex; align-items: center; gap: 12px; }
+
+  .progress-bar-wrap {
+    display: none; width: 100%; height: 3px; background: #2a2d3e;
+  }
+  .progress-bar-wrap.visible { display: block; }
+  .progress-fill {
+    height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 12px; padding: 12px;
+  }
+
+  .panel {
+    background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
+    padding: 14px; overflow: hidden;
+  }
+  .panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+
+  .stats-cards {
+    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
+  }
+  .stat-card {
+    background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
+  }
+  .stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
+  .stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
+
+  .chart-panel { grid-row: span 2; }
+  canvas#workerChart { width: 100%; height: 200px; }
+
+  .actor-table-wrap { max-height: 200px; overflow-y: auto; }
+  .actor-table-wrap table { width: 100%; border-collapse: collapse; }
+  .actor-table-wrap th, .actor-table-wrap td {
+    padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2d3e; font-size: 12px;
+  }
+  .actor-table-wrap th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
+
+  .log-panel {
+    grid-column: 1 / -1;
+  }
+  .log-wrap { max-height: 300px; overflow-y: auto; }
+  .log-wrap table { width: 100%; border-collapse: collapse; }
+  .log-wrap th, .log-wrap td {
+    padding: 3px 8px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
+    white-space: nowrap;
+  }
+  .log-wrap th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
+  .log-wrap td.msg { white-space: normal; word-break: break-all; max-width: 400px; }
+
+  .level-ERROR { color: #f44336; font-weight: 700; }
+  .level-WARN { color: #ff9800; }
+  .level-INFO { color: #4caf50; }
+  .level-DEBUG { color: #2196f3; }
+  .level-TRACE { color: #666; }
+
+  .worker-detail-panel { grid-column: 1 / -1; }
+  .worker-detail-scroll { max-height: 360px; overflow-y: auto; }
+  .worker-group { margin-bottom: 8px; border: 1px solid #2a2d3e; border-radius: 4px; overflow: hidden; }
+  .worker-group-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 7px 12px; background: #1c1f2e; cursor: pointer; user-select: none;
+  }
+  .worker-group-header:hover { background: #22253a; }
+  .worker-group-header .wid { font-weight: 700; }
+  .worker-group-header .summary { color: #888; font-size: 11px; }
+  .worker-group-header .toggle { color: #555; font-size: 14px; }
+  .worker-group-body { display: none; }
+  .worker-group.open .worker-group-body { display: block; }
+  .worker-group-body table { width: 100%; border-collapse: collapse; }
+  .worker-group-body th, .worker-group-body td {
+    padding: 3px 10px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
+  }
+  .worker-group-body th { color: #888; font-weight: 500; background: #161822; }
+  .msg-type { color: #4caf50; }
+  .msg-type.none { color: #555; font-style: italic; }
+
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: #0f1117; }
+  ::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
+</style>
+</head>
+<body>
+<div class="header">
+  <div class="header-left">
+    <h1>
+      Swactor Runtime Dashboard
+      <span id="statusDot" class="status-dot"></span>
+      <span id="replayBadge" class="replay-badge">REPLAY</span>
+    </h1>
+    <nav class="nav-links">
+      <a href="/" class="nav-link active">Overview</a>
+      <a href="/actors" class="nav-link">Actors</a>
+      <a href="/distribution" class="nav-link">Distribution</a>
+    </nav>
+  </div>
+  <div class="header-right">
+    <span id="replaySpeed" style="color:#2196f3;font-size:12px;display:none;"></span>
+    <span id="replayPct" style="color:#888;font-size:12px;display:none;"></span>
+    <span id="uptimeLabel" style="color:#888;font-size:12px;"></span>
+  </div>
+</div>
+<div id="progressBarWrap" class="progress-bar-wrap">
+  <div id="progressFill" class="progress-fill"></div>
+</div>
+
+<div class="grid">
+  <div class="panel chart-panel">
+    <h2>Worker Distribution</h2>
+    <canvas id="workerChart"></canvas>
+    <div id="workerLegend" style="margin-top:8px;font-size:11px;color:#888;"></div>
+  </div>
+
+  <div class="panel">
+    <h2>Stats</h2>
+    <div class="stats-cards">
+      <div class="stat-card"><div class="value" id="statActors">0</div><div class="label">Actors</div></div>
+      <div class="stat-card"><div class="value" id="statMessages">0</div><div class="label">Messages</div></div>
+      <div class="stat-card"><div class="value" id="statWorkers">0</div><div class="label">Workers</div></div>
+      <div class="stat-card"><div class="value" id="statMailbox">0</div><div class="label">Mailbox</div></div>
+    </div>
+  </div>
+
+  <div class="panel">
+    <h2>Actors</h2>
+    <div class="actor-table-wrap">
+      <table>
+        <thead><tr><th>Address</th><th>Worker</th></tr></thead>
+        <tbody id="actorTableBody"></tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="panel worker-detail-panel">
+    <h2>Worker Details</h2>
+    <div class="worker-detail-scroll" id="workerDetailContainer"></div>
+  </div>
+
+  <div class="panel log-panel">
+    <h2>Activity Log <span id="logCount" style="color:#555;font-weight:400;"></span></h2>
+    <div class="log-wrap" id="logWrap">
+      <table>
+        <thead><tr><th>Seq</th><th>Time</th><th>Level</th><th>Worker</th><th>Message</th><th>Fields</th></tr></thead>
+        <tbody id="logTableBody"></tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+(function() {
+  var DASHBOARD_MODE = '__DASHBOARD_MODE__';
+  var logRowCount = 0;
+  var MAX_LOG_ROWS = 2000;
+  var isReplay = (DASHBOARD_MODE === 'replay');
+  var lastUptimeMs = null;
+  var lastStatsTime = null;
+
+  var dot = document.getElementById('statusDot');
+  var uptimeLabel = document.getElementById('uptimeLabel');
+  var replayBadge = document.getElementById('replayBadge');
+  var replaySpeed = document.getElementById('replaySpeed');
+  var replayPct = document.getElementById('replayPct');
+  var progressBarWrap = document.getElementById('progressBarWrap');
+  var progressFill = document.getElementById('progressFill');
+
+  if (isReplay) {
+    replayBadge.className = 'replay-badge visible';
+    progressBarWrap.className = 'progress-bar-wrap visible';
+    dot.className = 'status-dot replaying';
+    uptimeLabel.style.display = 'none';
+  }
+
+  function updateUptime() {
+    if (isReplay) return;
+    var up = lastUptimeMs;
+    if (up !== null && lastStatsTime !== null) {
+      up += (Date.now() - lastStatsTime);
+    }
+    if (up === null) { uptimeLabel.textContent = ''; return; }
+    var s = Math.floor(up / 1000);
+    var d = Math.floor(s / 86400);
+    var h = Math.floor((s % 86400) / 3600);
+    var m = Math.floor((s % 3600) / 60);
+    var sec = s % 60;
+    var parts = [];
+    if (d > 0) parts.push(d + 'd');
+    if (h > 0 || d > 0) parts.push(h + 'h');
+    parts.push(m + 'm');
+    parts.push(sec + 's');
+    uptimeLabel.textContent = parts.join(' ');
+  }
+  setInterval(updateUptime, 1000);
+
+  var canvas = document.getElementById('workerChart');
+  var ctx = canvas.getContext('2d');
+  var colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
+
+  function drawWorkerChart(workers) {
+    var dpr = window.devicePixelRatio || 1;
+    var rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+    var W = rect.width, H = rect.height;
+    ctx.clearRect(0, 0, W, H);
+
+    if (!workers || workers.length === 0) return;
+
+    var maxActors = Math.max(1, Math.max.apply(null, workers.map(function(w) { return w.num_actors; })));
+    var barW = Math.max(8, Math.floor((W - 40) / workers.length) - 6);
+    var chartH = H - 30;
+
+    workers.forEach(function(w, i) {
+      var x = 20 + i * (barW + 6);
+      var h = (w.num_actors / maxActors) * (chartH * 0.45);
+      ctx.fillStyle = colors[i % colors.length];
+      ctx.globalAlpha = 0.8;
+      ctx.fillRect(x, chartH * 0.5 - h, barW, h);
+
+      var mh = Math.min(w.mailbox_depth * 2, chartH * 0.4);
+      ctx.globalAlpha = 0.4;
+      ctx.fillRect(x, chartH * 0.55, barW, mh);
+
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = '#888';
+      ctx.font = '10px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText('W' + w.id, x + barW / 2, H - 2);
+    });
+
+    var legend = document.getElementById('workerLegend');
+    legend.innerHTML = workers.map(function(w, i) {
+      return '<span style="color:' + colors[i % colors.length] + '">W' + w.id +
+        ': ' + w.num_actors + ' actors, ' + w.messages_processed + ' msgs, mbox ' + w.mailbox_depth + '</span>';
+    }).join(' &nbsp;|&nbsp; ');
+  }
+
+  function updateStats(data) {
+    if (typeof data.uptime_ms === 'number') {
+      lastUptimeMs = data.uptime_ms;
+      lastStatsTime = Date.now();
+    }
+    var totalActors = data.actors ? data.actors.length : 0;
+    var totalMsgs = data.workers ? data.workers.reduce(function(s, w) { return s + w.messages_processed; }, 0) : 0;
+    var totalMailbox = data.workers ? data.workers.reduce(function(s, w) { return s + w.mailbox_depth; }, 0) : 0;
+
+    document.getElementById('statActors').textContent = totalActors;
+    document.getElementById('statMessages').textContent = totalMsgs.toLocaleString();
+    document.getElementById('statWorkers').textContent = data.num_workers || 0;
+    document.getElementById('statMailbox').textContent = totalMailbox;
+
+    drawWorkerChart(data.workers);
+
+    var tbody = document.getElementById('actorTableBody');
+    tbody.innerHTML = '';
+    if (data.actors) {
+      var shown = data.actors.slice(0, 200);
+      shown.forEach(function(entry) {
+        var addr = entry[0];
+        var wid = entry[1];
+        var hex = '';
+        if (addr && addr.length > 0) {
+          var bytes = Array.isArray(addr) ? addr : Object.values(addr);
+          for (var j = 0; j < Math.min(8, bytes.length); j++) {
+            hex += ('0' + bytes[j].toString(16)).slice(-2);
+          }
+          hex += '\u2026';
+        }
+        var tr = document.createElement('tr');
+        tr.innerHTML = '<td style="color:#aaa;font-size:11px;">' + hex + '</td><td>W' + wid + '</td>';
+        tbody.appendChild(tr);
+      });
+      if (data.actors.length > 200) {
+        var tr2 = document.createElement('tr');
+        tr2.innerHTML = '<td colspan="2" style="color:#555;">... and ' + (data.actors.length - 200) + ' more</td>';
+        tbody.appendChild(tr2);
+      }
+    }
+
+    updateWorkerDetails(data);
+  }
+
+  function formatAddr(addr) {
+    var hex = '';
+    if (addr && addr.length > 0) {
+      var bytes = Array.isArray(addr) ? addr : Object.values(addr);
+      for (var j = 0; j < Math.min(8, bytes.length); j++) {
+        hex += ('0' + bytes[j].toString(16)).slice(-2);
+      }
+      hex += '\u2026';
+    }
+    return hex;
+  }
+
+  function shortTypeName(full) {
+    if (!full) return '';
+    var parts = full.split('::');
+    return parts[parts.length - 1];
+  }
+
+  function updateWorkerDetails(data) {
+    var container = document.getElementById('workerDetailContainer');
+    if (!data.workers) return;
+
+    var groups = {};
+    data.workers.forEach(function(w) { groups[w.id] = { info: w, actors: [] }; });
+    if (data.actor_details) {
+      data.actor_details.forEach(function(a) {
+        if (groups[a.worker_id]) groups[a.worker_id].actors.push(a);
+      });
+    }
+
+    var openState = {};
+    container.querySelectorAll('.worker-group').forEach(function(g) {
+      openState[g.dataset.wid] = g.classList.contains('open');
+    });
+
+    container.innerHTML = '';
+    var wids = Object.keys(groups).sort(function(a, b) { return a - b; });
+
+    wids.forEach(function(wid) {
+      var g = groups[wid];
+      var div = document.createElement('div');
+      var isOpen = openState[wid] || false;
+      div.className = 'worker-group' + (isOpen ? ' open' : '');
+      div.dataset.wid = wid;
+
+      var hdr = document.createElement('div');
+      hdr.className = 'worker-group-header';
+      var panicHtml = g.info.panics > 0 ? ', <span style="color:#f44336">' + g.info.panics + ' panics</span>' : '';
+      hdr.innerHTML =
+        '<span class="wid" style="color:' + colors[wid % colors.length] + '">W' + wid + '</span>' +
+        '<span class="summary">' + g.actors.length + ' actors, ' +
+          g.info.messages_processed.toLocaleString() + ' msgs, mbox ' + g.info.mailbox_depth + panicHtml + '</span>' +
+        '<span class="toggle">' + (isOpen ? '\u25BC' : '\u25B6') + '</span>';
+      hdr.onclick = function() {
+        div.classList.toggle('open');
+        hdr.querySelector('.toggle').textContent = div.classList.contains('open') ? '\u25BC' : '\u25B6';
+      };
+      div.appendChild(hdr);
+
+      var body = document.createElement('div');
+      body.className = 'worker-group-body';
+      if (g.actors.length === 0) {
+        body.innerHTML = '<div style="padding:6px 12px;color:#555;">No actors</div>';
+      } else {
+        var rows = '';
+        g.actors.forEach(function(a) {
+          var hex = formatAddr(a.address);
+          var hasMsg = !!a.last_msg_type;
+          var msgShort = hasMsg ? shortTypeName(a.last_msg_type) : 'none';
+          var msgClass = hasMsg ? 'msg-type' : 'msg-type none';
+          var title = hasMsg ? ' title="' + escapeHtml(a.last_msg_type) + '"' : '';
+          rows += '<tr><td style="color:#aaa;">' + hex + '</td>' +
+            '<td>' + a.mailbox_depth + '</td>' +
+            '<td class="' + msgClass + '"' + title + '>' + escapeHtml(msgShort) + '</td></tr>';
+        });
+        body.innerHTML = '<table><thead><tr><th>Address</th><th>Mailbox</th><th>Last Message</th></tr></thead><tbody>' + rows + '</tbody></table>';
+      }
+      div.appendChild(body);
+      container.appendChild(div);
+    });
+  }
+
+  function addLogEvents(events) {
+    var tbody = document.getElementById('logTableBody');
+    var wrap = document.getElementById('logWrap');
+    var wasAtBottom = wrap.scrollTop + wrap.clientHeight >= wrap.scrollHeight - 20;
+
+    events.forEach(function(ev) {
+      if (logRowCount >= MAX_LOG_ROWS) {
+        tbody.removeChild(tbody.firstChild);
+        logRowCount--;
+      }
+      var tr = document.createElement('tr');
+      var ts = new Date(ev.timestamp_ms);
+      var timeStr = ts.toLocaleTimeString() + '.' + String(ts.getMilliseconds()).padStart(3, '0');
+      var wid = ev.worker_id !== null && ev.worker_id !== undefined ? 'W' + ev.worker_id : '-';
+      var fieldsStr = Object.keys(ev.fields).length > 0 ? JSON.stringify(ev.fields) : '';
+
+      tr.innerHTML =
+        '<td>' + ev.seq + '</td>' +
+        '<td>' + timeStr + '</td>' +
+        '<td class="level-' + ev.level + '">' + ev.level + '</td>' +
+        '<td>' + wid + '</td>' +
+        '<td class="msg">' + escapeHtml(ev.message) + '</td>' +
+        '<td style="color:#555;max-width:300px;overflow:hidden;text-overflow:ellipsis;">' + escapeHtml(fieldsStr) + '</td>';
+      tbody.appendChild(tr);
+      logRowCount++;
+    });
+
+    document.getElementById('logCount').textContent = '(' + logRowCount + ')';
+
+    if (wasAtBottom) {
+      wrap.scrollTop = wrap.scrollHeight;
+    }
+  }
+
+  function escapeHtml(s) {
+    if (!s) return '';
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
+
+  function setStatus(s) {
+    if (s === 'done') {
+      dot.className = 'status-dot done';
+      if (isReplay) {
+        replayPct.textContent = '100%';
+        progressFill.style.width = '100%';
+      }
+    } else if (s === 'disconnected') {
+      dot.className = 'status-dot disconnected';
+    } else {
+      dot.className = isReplay ? 'status-dot replaying' : 'status-dot';
+    }
+  }
+
+  var es = new EventSource('/events');
+
+  es.addEventListener('stats', function(e) {
+    try { updateStats(JSON.parse(e.data)); } catch(err) { console.error('stats parse error', err); }
+  });
+
+  es.addEventListener('activity', function(e) {
+    try { addLogEvents(JSON.parse(e.data)); } catch(err) { console.error('activity parse error', err); }
+  });
+
+  es.addEventListener('replay_meta', function(e) {
+    try {
+      var meta = JSON.parse(e.data);
+      replaySpeed.textContent = meta.speed + 'x';
+      replaySpeed.style.display = 'inline';
+      replayPct.style.display = 'inline';
+      replayPct.textContent = '0%';
+    } catch(err) { console.error('replay_meta parse error', err); }
+  });
+
+  es.addEventListener('replay_progress', function(e) {
+    try {
+      var data = JSON.parse(e.data);
+      var pct = Math.round(data.progress * 100);
+      replayPct.textContent = pct + '%';
+      progressFill.style.width = pct + '%';
+    } catch(err) { console.error('replay_progress parse error', err); }
+  });
+
+  es.addEventListener('done', function() {
+    setStatus('done');
+    es.close();
+  });
+
+  es.onerror = function() {
+    setStatus('disconnected');
+  };
+
+  es.onopen = function() {
+    setStatus('connected');
+  };
+})();
+</script>
+</body>
+</html>
diff --git a/crates/runtime-dashboard/src/dashboard_html.rs b/crates/runtime-dashboard/src/dashboard_html.rs
index ec1cc28..c58f01b 100644
--- a/crates/runtime-dashboard/src/dashboard_html.rs
+++ b/crates/runtime-dashboard/src/dashboard_html.rs
@@ -1,512 +1 @@
-pub const DASHBOARD_HTML: &str = r##"<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Swactor Runtime Dashboard</title>
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
-
-  .header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
-  }
-  .header h1 { font-size: 16px; font-weight: 600; color: #fff; }
-  .status-dot {
-    width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
-    display: inline-block; margin-left: 8px; vertical-align: middle;
-  }
-  .status-dot.disconnected { background: #f44336; }
-  .status-dot.done { background: #ff9800; }
-  .status-dot.replaying { background: #2196f3; animation: pulse 1.5s infinite; }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
-  }
-
-  .replay-badge {
-    display: none; background: #2196f3; color: #fff; font-size: 10px; font-weight: 700;
-    padding: 2px 8px; border-radius: 3px; margin-left: 10px; letter-spacing: 1px;
-    vertical-align: middle;
-  }
-  .replay-badge.visible { display: inline-block; }
-
-  .header-left { display: flex; align-items: center; }
-  .nav-links { display: flex; gap: 4px; margin-left: 20px; }
-  .nav-link {
-    color: #888; text-decoration: none; font-size: 12px;
-    padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
-  }
-  .nav-link:hover { color: #e0e0e0; }
-  .nav-link.active { color: #fff; background: #2a2d3e; }
-
-  .header-right { display: flex; align-items: center; gap: 12px; }
-
-  .progress-bar-wrap {
-    display: none; width: 100%; height: 3px; background: #2a2d3e;
-  }
-  .progress-bar-wrap.visible { display: block; }
-  .progress-fill {
-    height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;
-  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto;
-    gap: 12px; padding: 12px;
-  }
-
-  .panel {
-    background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
-    padding: 14px; overflow: hidden;
-  }
-  .panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
-
-  .stats-cards {
-    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
-  }
-  .stat-card {
-    background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
-  }
-  .stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
-  .stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
-
-  .chart-panel { grid-row: span 2; }
-  canvas#workerChart { width: 100%; height: 200px; }
-
-  .actor-table-wrap { max-height: 200px; overflow-y: auto; }
-  .actor-table-wrap table { width: 100%; border-collapse: collapse; }
-  .actor-table-wrap th, .actor-table-wrap td {
-    padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2d3e; font-size: 12px;
-  }
-  .actor-table-wrap th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
-
-  .log-panel {
-    grid-column: 1 / -1;
-  }
-  .log-wrap { max-height: 300px; overflow-y: auto; }
-  .log-wrap table { width: 100%; border-collapse: collapse; }
-  .log-wrap th, .log-wrap td {
-    padding: 3px 8px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
-    white-space: nowrap;
-  }
-  .log-wrap th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
-  .log-wrap td.msg { white-space: normal; word-break: break-all; max-width: 400px; }
-
-  .level-ERROR { color: #f44336; font-weight: 700; }
-  .level-WARN { color: #ff9800; }
-  .level-INFO { color: #4caf50; }
-  .level-DEBUG { color: #2196f3; }
-  .level-TRACE { color: #666; }
-
-  .worker-detail-panel { grid-column: 1 / -1; }
-  .worker-detail-scroll { max-height: 360px; overflow-y: auto; }
-  .worker-group { margin-bottom: 8px; border: 1px solid #2a2d3e; border-radius: 4px; overflow: hidden; }
-  .worker-group-header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 7px 12px; background: #1c1f2e; cursor: pointer; user-select: none;
-  }
-  .worker-group-header:hover { background: #22253a; }
-  .worker-group-header .wid { font-weight: 700; }
-  .worker-group-header .summary { color: #888; font-size: 11px; }
-  .worker-group-header .toggle { color: #555; font-size: 14px; }
-  .worker-group-body { display: none; }
-  .worker-group.open .worker-group-body { display: block; }
-  .worker-group-body table { width: 100%; border-collapse: collapse; }
-  .worker-group-body th, .worker-group-body td {
-    padding: 3px 10px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
-  }
-  .worker-group-body th { color: #888; font-weight: 500; background: #161822; }
-  .msg-type { color: #4caf50; }
-  .msg-type.none { color: #555; font-style: italic; }
-
-  ::-webkit-scrollbar { width: 6px; }
-  ::-webkit-scrollbar-track { background: #0f1117; }
-  ::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
-</style>
-</head>
-<body>
-<div class="header">
-  <div class="header-left">
-    <h1>
-      Swactor Runtime Dashboard
-      <span id="statusDot" class="status-dot"></span>
-      <span id="replayBadge" class="replay-badge">REPLAY</span>
-    </h1>
-    <nav class="nav-links">
-      <a href="/" class="nav-link active">Overview</a>
-      <a href="/actors" class="nav-link">Actors</a>
-      <a href="/distribution" class="nav-link">Distribution</a>
-    </nav>
-  </div>
-  <div class="header-right">
-    <span id="replaySpeed" style="color:#2196f3;font-size:12px;display:none;"></span>
-    <span id="replayPct" style="color:#888;font-size:12px;display:none;"></span>
-    <span id="uptimeLabel" style="color:#888;font-size:12px;"></span>
-  </div>
-</div>
-<div id="progressBarWrap" class="progress-bar-wrap">
-  <div id="progressFill" class="progress-fill"></div>
-</div>
-
-<div class="grid">
-  <div class="panel chart-panel">
-    <h2>Worker Distribution</h2>
-    <canvas id="workerChart"></canvas>
-    <div id="workerLegend" style="margin-top:8px;font-size:11px;color:#888;"></div>
-  </div>
-
-  <div class="panel">
-    <h2>Stats</h2>
-    <div class="stats-cards">
-      <div class="stat-card"><div class="value" id="statActors">0</div><div class="label">Actors</div></div>
-      <div class="stat-card"><div class="value" id="statMessages">0</div><div class="label">Messages</div></div>
-      <div class="stat-card"><div class="value" id="statWorkers">0</div><div class="label">Workers</div></div>
-      <div class="stat-card"><div class="value" id="statMailbox">0</div><div class="label">Mailbox</div></div>
-    </div>
-  </div>
-
-  <div class="panel">
-    <h2>Actors</h2>
-    <div class="actor-table-wrap">
-      <table>
-        <thead><tr><th>Address</th><th>Worker</th></tr></thead>
-        <tbody id="actorTableBody"></tbody>
-      </table>
-    </div>
-  </div>
-
-  <div class="panel worker-detail-panel">
-    <h2>Worker Details</h2>
-    <div class="worker-detail-scroll" id="workerDetailContainer"></div>
-  </div>
-
-  <div class="panel log-panel">
-    <h2>Activity Log <span id="logCount" style="color:#555;font-weight:400;"></span></h2>
-    <div class="log-wrap" id="logWrap">
-      <table>
-        <thead><tr><th>Seq</th><th>Time</th><th>Level</th><th>Worker</th><th>Message</th><th>Fields</th></tr></thead>
-        <tbody id="logTableBody"></tbody>
-      </table>
-    </div>
-  </div>
-</div>
-
-<script>
-(function() {
-  var DASHBOARD_MODE = '__DASHBOARD_MODE__';
-  var logRowCount = 0;
-  var MAX_LOG_ROWS = 2000;
-  var isReplay = (DASHBOARD_MODE === 'replay');
-  var lastUptimeMs = null;
-  var lastStatsTime = null;
-
-  var dot = document.getElementById('statusDot');
-  var uptimeLabel = document.getElementById('uptimeLabel');
-  var replayBadge = document.getElementById('replayBadge');
-  var replaySpeed = document.getElementById('replaySpeed');
-  var replayPct = document.getElementById('replayPct');
-  var progressBarWrap = document.getElementById('progressBarWrap');
-  var progressFill = document.getElementById('progressFill');
-
-  if (isReplay) {
-    replayBadge.className = 'replay-badge visible';
-    progressBarWrap.className = 'progress-bar-wrap visible';
-    dot.className = 'status-dot replaying';
-    uptimeLabel.style.display = 'none';
-  }
-
-  function updateUptime() {
-    if (isReplay) return;
-    var up = lastUptimeMs;
-    if (up !== null && lastStatsTime !== null) {
-      up += (Date.now() - lastStatsTime);
-    }
-    if (up === null) { uptimeLabel.textContent = ''; return; }
-    var s = Math.floor(up / 1000);
-    var d = Math.floor(s / 86400);
-    var h = Math.floor((s % 86400) / 3600);
-    var m = Math.floor((s % 3600) / 60);
-    var sec = s % 60;
-    var parts = [];
-    if (d > 0) parts.push(d + 'd');
-    if (h > 0 || d > 0) parts.push(h + 'h');
-    parts.push(m + 'm');
-    parts.push(sec + 's');
-    uptimeLabel.textContent = parts.join(' ');
-  }
-  setInterval(updateUptime, 1000);
-
-  var canvas = document.getElementById('workerChart');
-  var ctx = canvas.getContext('2d');
-  var colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
-
-  function drawWorkerChart(workers) {
-    var dpr = window.devicePixelRatio || 1;
-    var rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width * dpr;
-    canvas.height = rect.height * dpr;
-    ctx.scale(dpr, dpr);
-    var W = rect.width, H = rect.height;
-    ctx.clearRect(0, 0, W, H);
-
-    if (!workers || workers.length === 0) return;
-
-    var maxActors = Math.max(1, Math.max.apply(null, workers.map(function(w) { return w.num_actors; })));
-    var barW = Math.max(8, Math.floor((W - 40) / workers.length) - 6);
-    var chartH = H - 30;
-
-    workers.forEach(function(w, i) {
-      var x = 20 + i * (barW + 6);
-      var h = (w.num_actors / maxActors) * (chartH * 0.45);
-      ctx.fillStyle = colors[i % colors.length];
-      ctx.globalAlpha = 0.8;
-      ctx.fillRect(x, chartH * 0.5 - h, barW, h);
-
-      var mh = Math.min(w.mailbox_depth * 2, chartH * 0.4);
-      ctx.globalAlpha = 0.4;
-      ctx.fillRect(x, chartH * 0.55, barW, mh);
-
-      ctx.globalAlpha = 1;
-      ctx.fillStyle = '#888';
-      ctx.font = '10px monospace';
-      ctx.textAlign = 'center';
-      ctx.fillText('W' + w.id, x + barW / 2, H - 2);
-    });
-
-    var legend = document.getElementById('workerLegend');
-    legend.innerHTML = workers.map(function(w, i) {
-      return '<span style="color:' + colors[i % colors.length] + '">W' + w.id +
-        ': ' + w.num_actors + ' actors, ' + w.messages_processed + ' msgs, mbox ' + w.mailbox_depth + '</span>';
-    }).join(' &nbsp;|&nbsp; ');
-  }
-
-  function updateStats(data) {
-    if (typeof data.uptime_ms === 'number') {
-      lastUptimeMs = data.uptime_ms;
-      lastStatsTime = Date.now();
-    }
-    var totalActors = data.actors ? data.actors.length : 0;
-    var totalMsgs = data.workers ? data.workers.reduce(function(s, w) { return s + w.messages_processed; }, 0) : 0;
-    var totalMailbox = data.workers ? data.workers.reduce(function(s, w) { return s + w.mailbox_depth; }, 0) : 0;
-
-    document.getElementById('statActors').textContent = totalActors;
-    document.getElementById('statMessages').textContent = totalMsgs.toLocaleString();
-    document.getElementById('statWorkers').textContent = data.num_workers || 0;
-    document.getElementById('statMailbox').textContent = totalMailbox;
-
-    drawWorkerChart(data.workers);
-
-    var tbody = document.getElementById('actorTableBody');
-    tbody.innerHTML = '';
-    if (data.actors) {
-      var shown = data.actors.slice(0, 200);
-      shown.forEach(function(entry) {
-        var addr = entry[0];
-        var wid = entry[1];
-        var hex = '';
-        if (addr && addr.length > 0) {
-          var bytes = Array.isArray(addr) ? addr : Object.values(addr);
-          for (var j = 0; j < Math.min(8, bytes.length); j++) {
-            hex += ('0' + bytes[j].toString(16)).slice(-2);
-          }
-          hex += '\u2026';
-        }
-        var tr = document.createElement('tr');
-        tr.innerHTML = '<td style="color:#aaa;font-size:11px;">' + hex + '</td><td>W' + wid + '</td>';
-        tbody.appendChild(tr);
-      });
-      if (data.actors.length > 200) {
-        var tr2 = document.createElement('tr');
-        tr2.innerHTML = '<td colspan="2" style="color:#555;">... and ' + (data.actors.length - 200) + ' more</td>';
-        tbody.appendChild(tr2);
-      }
-    }
-
-    updateWorkerDetails(data);
-  }
-
-  function formatAddr(addr) {
-    var hex = '';
-    if (addr && addr.length > 0) {
-      var bytes = Array.isArray(addr) ? addr : Object.values(addr);
-      for (var j = 0; j < Math.min(8, bytes.length); j++) {
-        hex += ('0' + bytes[j].toString(16)).slice(-2);
-      }
-      hex += '\u2026';
-    }
-    return hex;
-  }
-
-  function shortTypeName(full) {
-    if (!full) return '';
-    var parts = full.split('::');
-    return parts[parts.length - 1];
-  }
-
-  function updateWorkerDetails(data) {
-    var container = document.getElementById('workerDetailContainer');
-    if (!data.workers) return;
-
-    var groups = {};
-    data.workers.forEach(function(w) { groups[w.id] = { info: w, actors: [] }; });
-    if (data.actor_details) {
-      data.actor_details.forEach(function(a) {
-        if (groups[a.worker_id]) groups[a.worker_id].actors.push(a);
-      });
-    }
-
-    var openState = {};
-    container.querySelectorAll('.worker-group').forEach(function(g) {
-      openState[g.dataset.wid] = g.classList.contains('open');
-    });
-
-    container.innerHTML = '';
-    var wids = Object.keys(groups).sort(function(a, b) { return a - b; });
-
-    wids.forEach(function(wid) {
-      var g = groups[wid];
-      var div = document.createElement('div');
-      var isOpen = openState[wid] || false;
-      div.className = 'worker-group' + (isOpen ? ' open' : '');
-      div.dataset.wid = wid;
-
-      var hdr = document.createElement('div');
-      hdr.className = 'worker-group-header';
-      var panicHtml = g.info.panics > 0 ? ', <span style="color:#f44336">' + g.info.panics + ' panics</span>' : '';
-      hdr.innerHTML =
-        '<span class="wid" style="color:' + colors[wid % colors.length] + '">W' + wid + '</span>' +
-        '<span class="summary">' + g.actors.length + ' actors, ' +
-          g.info.messages_processed.toLocaleString() + ' msgs, mbox ' + g.info.mailbox_depth + panicHtml + '</span>' +
-        '<span class="toggle">' + (isOpen ? '\u25BC' : '\u25B6') + '</span>';
-      hdr.onclick = function() {
-        div.classList.toggle('open');
-        hdr.querySelector('.toggle').textContent = div.classList.contains('open') ? '\u25BC' : '\u25B6';
-      };
-      div.appendChild(hdr);
-
-      var body = document.createElement('div');
-      body.className = 'worker-group-body';
-      if (g.actors.length === 0) {
-        body.innerHTML = '<div style="padding:6px 12px;color:#555;">No actors</div>';
-      } else {
-        var rows = '';
-        g.actors.forEach(function(a) {
-          var hex = formatAddr(a.address);
-          var hasMsg = !!a.last_msg_type;
-          var msgShort = hasMsg ? shortTypeName(a.last_msg_type) : 'none';
-          var msgClass = hasMsg ? 'msg-type' : 'msg-type none';
-          var title = hasMsg ? ' title="' + escapeHtml(a.last_msg_type) + '"' : '';
-          rows += '<tr><td style="color:#aaa;">' + hex + '</td>' +
-            '<td>' + a.mailbox_depth + '</td>' +
-            '<td class="' + msgClass + '"' + title + '>' + escapeHtml(msgShort) + '</td></tr>';
-        });
-        body.innerHTML = '<table><thead><tr><th>Address</th><th>Mailbox</th><th>Last Message</th></tr></thead><tbody>' + rows + '</tbody></table>';
-      }
-      div.appendChild(body);
-      container.appendChild(div);
-    });
-  }
-
-  function addLogEvents(events) {
-    var tbody = document.getElementById('logTableBody');
-    var wrap = document.getElementById('logWrap');
-    var wasAtBottom = wrap.scrollTop + wrap.clientHeight >= wrap.scrollHeight - 20;
-
-    events.forEach(function(ev) {
-      if (logRowCount >= MAX_LOG_ROWS) {
-        tbody.removeChild(tbody.firstChild);
-        logRowCount--;
-      }
-      var tr = document.createElement('tr');
-      var ts = new Date(ev.timestamp_ms);
-      var timeStr = ts.toLocaleTimeString() + '.' + String(ts.getMilliseconds()).padStart(3, '0');
-      var wid = ev.worker_id !== null && ev.worker_id !== undefined ? 'W' + ev.worker_id : '-';
-      var fieldsStr = Object.keys(ev.fields).length > 0 ? JSON.stringify(ev.fields) : '';
-
-      tr.innerHTML =
-        '<td>' + ev.seq + '</td>' +
-        '<td>' + timeStr + '</td>' +
-        '<td class="level-' + ev.level + '">' + ev.level + '</td>' +
-        '<td>' + wid + '</td>' +
-        '<td class="msg">' + escapeHtml(ev.message) + '</td>' +
-        '<td style="color:#555;max-width:300px;overflow:hidden;text-overflow:ellipsis;">' + escapeHtml(fieldsStr) + '</td>';
-      tbody.appendChild(tr);
-      logRowCount++;
-    });
-
-    document.getElementById('logCount').textContent = '(' + logRowCount + ')';
-
-    if (wasAtBottom) {
-      wrap.scrollTop = wrap.scrollHeight;
-    }
-  }
-
-  function escapeHtml(s) {
-    if (!s) return '';
-    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-  }
-
-  function setStatus(s) {
-    if (s === 'done') {
-      dot.className = 'status-dot done';
-      if (isReplay) {
-        replayPct.textContent = '100%';
-        progressFill.style.width = '100%';
-      }
-    } else if (s === 'disconnected') {
-      dot.className = 'status-dot disconnected';
-    } else {
-      dot.className = isReplay ? 'status-dot replaying' : 'status-dot';
-    }
-  }
-
-  var es = new EventSource('/events');
-
-  es.addEventListener('stats', function(e) {
-    try { updateStats(JSON.parse(e.data)); } catch(err) { console.error('stats parse error', err); }
-  });
-
-  es.addEventListener('activity', function(e) {
-    try { addLogEvents(JSON.parse(e.data)); } catch(err) { console.error('activity parse error', err); }
-  });
-
-  es.addEventListener('replay_meta', function(e) {
-    try {
-      var meta = JSON.parse(e.data);
-      replaySpeed.textContent = meta.speed + 'x';
-      replaySpeed.style.display = 'inline';
-      replayPct.style.display = 'inline';
-      replayPct.textContent = '0%';
-    } catch(err) { console.error('replay_meta parse error', err); }
-  });
-
-  es.addEventListener('replay_progress', function(e) {
-    try {
-      var data = JSON.parse(e.data);
-      var pct = Math.round(data.progress * 100);
-      replayPct.textContent = pct + '%';
-      progressFill.style.width = pct + '%';
-    } catch(err) { console.error('replay_progress parse error', err); }
-  });
-
-  es.addEventListener('done', function() {
-    setStatus('done');
-    es.close();
-  });
-
-  es.onerror = function() {
-    setStatus('disconnected');
-  };
-
-  es.onopen = function() {
-    setStatus('connected');
-  };
-})();
-</script>
-</body>
-</html>
-"##;
+pub const DASHBOARD_HTML: &str = include_str!("dashboard.html");
diff --git a/crates/runtime-dashboard/src/distribution.html b/crates/runtime-dashboard/src/distribution.html
new file mode 100644
index 0000000..9d51d3a
--- /dev/null
+++ b/crates/runtime-dashboard/src/distribution.html
@@ -0,0 +1,746 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Swactor Runtime – Distribution</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
+
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
+  }
+  .header-left { display: flex; align-items: center; }
+  .header h1 { font-size: 16px; font-weight: 600; color: #fff; }
+  .status-dot {
+    width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
+    display: inline-block; margin-left: 8px; vertical-align: middle;
+  }
+  .status-dot.disconnected { background: #f44336; }
+  .status-dot.done { background: #ff9800; }
+
+  .nav-links { display: flex; gap: 4px; margin-left: 20px; }
+  .nav-link {
+    color: #888; text-decoration: none; font-size: 12px;
+    padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
+  }
+  .nav-link:hover { color: #e0e0e0; }
+  .nav-link.active { color: #fff; background: #2a2d3e; }
+
+  .header-right { display: flex; align-items: center; gap: 12px; }
+
+  .main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr auto;
+    height: calc(100vh - 48px);
+  }
+
+  .graph-panel {
+    grid-row: 1 / 3; border-right: 1px solid #2a2d3e; position: relative;
+    min-height: 0;
+  }
+  .graph-panel canvas { width: 100%; height: 100%; display: block; }
+
+  .side-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
+
+  .stats-panel {
+    flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #2a2d3e; background: #161822;
+  }
+  .stats-panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
+
+  .stats-cards {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
+  }
+  .stat-card {
+    background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
+  }
+  .stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
+  .stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
+
+  .table-panel {
+    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
+  }
+  .table-panel h2 {
+    font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px;
+    padding: 10px 16px 6px; flex-shrink: 0;
+  }
+  .table-scroll {
+    flex: 1; overflow-y: auto; padding: 0 16px 8px;
+  }
+  .table-scroll table { width: 100%; border-collapse: collapse; }
+  .table-scroll th, .table-scroll td {
+    padding: 3px 8px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
+    white-space: nowrap;
+  }
+  .table-scroll th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
+
+  .state-alive { color: #4caf50; }
+  .state-suspect { color: #ff9800; }
+  .state-dead { color: #f44336; }
+
+  .bottom-panel {
+    grid-column: 1 / -1; border-top: 1px solid #2a2d3e; background: #161822;
+    display: flex; gap: 12px; padding: 12px 16px; height: 200px;
+  }
+  .bottom-section { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+  .bottom-section h2 {
+    font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
+  }
+  .bottom-section canvas { flex: 1; width: 100%; }
+  .bottom-section .scroll-wrap {
+    flex: 1; overflow-y: auto; font-size: 11px;
+  }
+
+  .ego-hint {
+    position: absolute; bottom: 12px; left: 12px; font-size: 10px;
+    color: #555; pointer-events: none;
+  }
+
+  .node-id-label {
+    position: absolute; top: 12px; left: 12px; font-size: 11px;
+    color: #888; max-width: 50%; overflow: hidden; text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: #0f1117; }
+  ::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
+</style>
+</head>
+<body>
+<div class="header">
+  <div class="header-left">
+    <h1>
+      Swactor Runtime Dashboard
+      <span id="statusDot" class="status-dot disconnected"></span>
+    </h1>
+    <nav class="nav-links">
+      <a href="/" class="nav-link">Overview</a>
+      <a href="/actors" class="nav-link">Actors</a>
+      <a href="/distribution" class="nav-link active">Distribution</a>
+    </nav>
+  </div>
+  <div class="header-right">
+    <span id="nodeLabel" style="color:#888;font-size:12px;">Waiting for data...</span>
+  </div>
+</div>
+
+<div class="main">
+  <!-- Left: Graph -->
+  <div class="graph-panel">
+    <canvas id="graphCanvas"></canvas>
+    <div class="ego-hint" id="egoHint">Click a node for ego-centric view. Double-click to reset.</div>
+    <div class="node-id-label" id="selfLabel"></div>
+  </div>
+
+  <!-- Right: Stats + Tables -->
+  <div class="side-panel">
+    <div class="stats-panel">
+      <h2>Distribution Stats</h2>
+      <div class="stats-cards">
+        <div class="stat-card"><div class="value" id="statMembers">0</div><div class="label">Members</div></div>
+        <div class="stat-card"><div class="value" id="statAlive">0</div><div class="label">Alive</div></div>
+        <div class="stat-card"><div class="value" id="statSuspect">0</div><div class="label">Suspect</div></div>
+        <div class="stat-card"><div class="value" id="statDead">0</div><div class="label">Dead</div></div>
+        <div class="stat-card"><div class="value" id="statCache">0</div><div class="label">Cache</div></div>
+        <div class="stat-card"><div class="value" id="statRT">0</div><div class="label">RT Size</div></div>
+        <div class="stat-card"><div class="value" id="statDir">0</div><div class="label">Directory</div></div>
+        <div class="stat-card"><div class="value" id="statRepair">0</div><div class="label">Repair Q</div></div>
+        <div class="stat-card"><div class="value" id="statProbes">0</div><div class="label">Probes</div></div>
+      </div>
+    </div>
+
+    <div class="table-panel">
+      <h2>Members <span id="memberCount" style="color:#555;font-weight:400;"></span></h2>
+      <div class="table-scroll">
+        <table>
+          <thead><tr><th>State</th><th>Node ID</th><th>Address</th><th>Inc</th></tr></thead>
+          <tbody id="membersBody"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bottom: Cache, Gossip Pairs, Routing Histogram -->
+  <div class="bottom-panel">
+    <div class="bottom-section">
+      <h2>LRU Cache <span id="cacheCount" style="color:#555;font-weight:400;"></span></h2>
+      <div class="scroll-wrap">
+        <table style="width:100%;border-collapse:collapse;">
+          <thead><tr><th style="color:#888;font-weight:500;font-size:11px;">Actor</th><th style="color:#888;font-weight:500;font-size:11px;">Node</th></tr></thead>
+          <tbody id="cacheBody"></tbody>
+        </table>
+      </div>
+    </div>
+    <div class="bottom-section">
+      <h2>Recent Probes</h2>
+      <div class="scroll-wrap" id="probesWrap"></div>
+    </div>
+    <div class="bottom-section">
+      <h2>Routing Buckets</h2>
+      <canvas id="bucketChart"></canvas>
+    </div>
+  </div>
+</div>
+
+<script>
+(function() {
+  var DASHBOARD_MODE = '__DASHBOARD_MODE__';
+  var dot = document.getElementById('statusDot');
+
+  // ── State ───────────────────────────────────────────────────────
+  var data = null;        // latest DistributionNodeSnapshot
+  var selfNodeId = '';    // this node's hex id
+  var focusIdx = -1;      // ego-centric focus (-1 = none, 0 = self)
+
+  // Graph state
+  var N = 0;
+  var posX = new Float64Array(0);
+  var posY = new Float64Array(0);
+  var nodeIds = [];       // hex strings
+  var nodeStates = [];    // 'alive' | 'suspect' | 'dead' | 'self'
+  var nodeAddrs = [];
+  var layoutDone = false;
+  var layoutIter = 0;
+
+  // View transform
+  var vx = 0, vy = 0, vs = 1;
+  var isDragging = false, dragX = 0, dragY = 0, dragVx = 0, dragVy = 0;
+  var clickStartX = 0, clickStartY = 0;
+
+  // Routing neighbor set (for ego highlight)
+  var routingSet = {};
+
+  // ── Quadtree (Barnes-Hut) ──────────────────────────────────────
+  var QF = 11;
+  var qt = new Float64Array(256 * QF);
+  var qtN = 0;
+  var _fx = 0, _fy = 0;
+
+  function qtAlloc(ox, oy, sz) {
+    if (qtN * QF >= qt.length) {
+      var nq = new Float64Array(Math.max(qt.length * 2, 256 * QF));
+      nq.set(qt); qt = nq;
+    }
+    var i = qtN++, o = i * QF;
+    qt[o]=ox; qt[o+1]=oy; qt[o+2]=sz;
+    qt[o+3]=0; qt[o+4]=0; qt[o+5]=0;
+    qt[o+6]=-1; qt[o+7]=-1; qt[o+8]=-1; qt[o+9]=-1;
+    qt[o+10]=-1;
+    return i;
+  }
+
+  function qtBuild() {
+    var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+    for (var i = 0; i < N; i++) {
+      if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
+      if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
+    }
+    var sz = Math.max(x1 - x0, y1 - y0, 1) + 2;
+    qtN = 0;
+    qtAlloc(x0 - 1, y0 - 1, sz);
+    for (var i = 0; i < N; i++) qtIns(0, i, posX[i], posY[i]);
+  }
+
+  function qtIns(ni, bi, bx, by) {
+    var o = ni * QF;
+    if (qt[o+5] === 0) { qt[o+3] = bx; qt[o+4] = by; qt[o+5] = 1; qt[o+10] = bi; return; }
+    if (qt[o+10] >= 0) {
+      if (qt[o+2] < 0.001) { qt[o+5]++; return; }
+      var eb = qt[o+10], ex = qt[o+3], ey = qt[o+4];
+      qt[o+10] = -1;
+      qtInsChild(ni, eb, ex, ey);
+    }
+    var m = qt[o+5];
+    qt[o+3] = (qt[o+3]*m + bx) / (m+1);
+    qt[o+4] = (qt[o+4]*m + by) / (m+1);
+    qt[o+5] = m + 1;
+    qtInsChild(ni, bi, bx, by);
+  }
+
+  function qtInsChild(ni, bi, bx, by) {
+    var o = ni * QF, hs = qt[o+2] / 2;
+    var mx = qt[o] + hs, my = qt[o+1] + hs;
+    var qx = bx < mx ? 0 : 1, qy = by < my ? 0 : 1;
+    var ci = o + 6 + qy * 2 + qx;
+    if (qt[ci] < 0) qt[ci] = qtAlloc(qx ? mx : qt[o], qy ? my : qt[o+1], hs);
+    qtIns(qt[ci], bi, bx, by);
+  }
+
+  function qtCalc(ni, px, py, k2, th2) {
+    if (ni < 0) return;
+    var o = ni * QF;
+    if (qt[o+5] === 0) return;
+    var dx = qt[o+3] - px, dy = qt[o+4] - py;
+    var d2 = dx*dx + dy*dy;
+    if (d2 < 0.0001) d2 = 0.0001;
+    if (qt[o+10] >= 0 || qt[o+2]*qt[o+2]/d2 < th2) {
+      var d = Math.sqrt(d2), f = -(k2 * qt[o+5]) / d2;
+      _fx += (dx/d)*f; _fy += (dy/d)*f;
+      return;
+    }
+    for (var c = 6; c < 10; c++) if (qt[o+c] >= 0) qtCalc(qt[o+c], px, py, k2, th2);
+  }
+
+  // ── Canvas setup ───────────────────────────────────────────────
+  var canvas = document.getElementById('graphCanvas');
+  var ctx = canvas.getContext('2d');
+
+  function resizeCanvas() {
+    var r = canvas.parentElement.getBoundingClientRect();
+    canvas.width = r.width * devicePixelRatio;
+    canvas.height = r.height * devicePixelRatio;
+    canvas.style.width = r.width + 'px';
+    canvas.style.height = r.height + 'px';
+  }
+  window.addEventListener('resize', function() { resizeCanvas(); drawGraph(); });
+
+  // ── Zoom & pan ─────────────────────────────────────────────────
+  canvas.addEventListener('wheel', function(e) {
+    e.preventDefault();
+    var r = canvas.getBoundingClientRect();
+    var mx = e.clientX - r.left, my = e.clientY - r.top;
+    var f = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+    var ns = Math.max(0.05, Math.min(5, vs * f));
+    var ratio = ns / vs;
+    vx = mx - (mx - vx) * ratio;
+    vy = my - (my - vy) * ratio;
+    vs = ns;
+    drawGraph();
+  }, { passive: false });
+
+  canvas.addEventListener('mousedown', function(e) {
+    if (e.button !== 0) return;
+    isDragging = true;
+    dragX = e.clientX; dragY = e.clientY;
+    clickStartX = e.clientX; clickStartY = e.clientY;
+    dragVx = vx; dragVy = vy;
+    canvas.style.cursor = 'grabbing';
+  });
+  window.addEventListener('mousemove', function(e) {
+    if (!isDragging) return;
+    vx = dragVx + (e.clientX - dragX);
+    vy = dragVy + (e.clientY - dragY);
+    drawGraph();
+  });
+  window.addEventListener('mouseup', function(e) {
+    if (isDragging) {
+      var wasDrag = Math.abs(e.clientX - clickStartX) > 3 || Math.abs(e.clientY - clickStartY) > 3;
+      isDragging = false; canvas.style.cursor = '';
+      if (!wasDrag) handleClick(e);
+    }
+  });
+  canvas.addEventListener('dblclick', function() { focusIdx = -1; resetView(); drawGraph(); });
+
+  function resetView() {
+    if (N === 0) { vx = 0; vy = 0; vs = 1; return; }
+    var r = canvas.parentElement.getBoundingClientRect();
+    var w = r.width, h = r.height;
+    var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+    for (var i = 0; i < N; i++) {
+      if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
+      if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
+    }
+    if (!isFinite(x0)) { vx = 0; vy = 0; vs = 1; return; }
+    var pad = 40;
+    vs = Math.min(w / (x1 - x0 + pad * 2), h / (y1 - y0 + pad * 2), 2);
+    vx = (w - (x0 + x1) * vs) / 2;
+    vy = (h - (y0 + y1) * vs) / 2;
+  }
+
+  // ── Click handler (ego-centric selection) ──────────────────────
+  function handleClick(e) {
+    var r = canvas.getBoundingClientRect();
+    var mx = e.clientX - r.left, my = e.clientY - r.top;
+    var wx = (mx - vx) / vs, wy = (my - vy) / vs;
+    var baseR = Math.max(4, Math.min(12, 400 / Math.sqrt(Math.max(N, 1))));
+    var hitR = baseR * 2;
+    var best = -1, bestD = hitR * hitR;
+    for (var i = 0; i < N; i++) {
+      var dx = posX[i] - wx, dy = posY[i] - wy;
+      var d2 = dx*dx + dy*dy;
+      if (d2 < bestD) { bestD = d2; best = i; }
+    }
+    if (best < 0) { focusIdx = -1; }
+    else { focusIdx = best; }
+    drawGraph();
+  }
+
+  // ── Force layout ───────────────────────────────────────────────
+  function initPositions(w, h) {
+    var cx = w / 2, cy = h / 2;
+    var rad = Math.min(cx, cy) * 0.6;
+    for (var i = 0; i < N; i++) {
+      var a = (2 * Math.PI * i) / N - Math.PI / 2;
+      posX[i] = cx + rad * Math.cos(a);
+      posY[i] = cy + rad * Math.sin(a);
+    }
+  }
+
+  function runLayout() {
+    var r = canvas.parentElement.getBoundingClientRect();
+    var w = r.width, h = r.height;
+    if (w === 0 || h === 0) return;
+    var cx = w/2, cy = h/2;
+    var k = Math.sqrt(w*h / Math.max(N, 1)), k2 = k*k;
+    var totalIters = Math.min(200, Math.max(30, Math.floor(20000 / Math.max(N, 1))));
+    var useBH = N > 60, th2 = 0.64;
+    var dx = new Float64Array(N), dy = new Float64Array(N);
+
+    // Edges: self→each member (star topology from this node's perspective)
+    var selfIdx = 0; // node 0 is always 'self'
+    var edges = [];
+    for (var i = 1; i < N; i++) edges.push([selfIdx, i]);
+
+    for (var iter = 0; iter < totalIters; iter++) {
+      dx.fill(0); dy.fill(0);
+
+      if (useBH) {
+        qtBuild();
+        for (var i = 0; i < N; i++) {
+          _fx = 0; _fy = 0;
+          qtCalc(0, posX[i], posY[i], k2, th2);
+          dx[i] += _fx; dy[i] += _fy;
+        }
+      } else {
+        for (var i = 0; i < N; i++) for (var j = i+1; j < N; j++) {
+          var ddx = posX[i]-posX[j], ddy = posY[i]-posY[j];
+          var dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
+          var f = k2/dist, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
+          dx[i] += fx; dy[i] += fy; dx[j] -= fx; dy[j] -= fy;
+        }
+      }
+
+      for (var e = 0; e < edges.length; e++) {
+        var si = edges[e][0], di = edges[e][1];
+        var ddx = posX[si]-posX[di], ddy = posY[si]-posY[di];
+        var dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
+        var f = (dist*dist)/k, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
+        dx[si] -= fx; dy[si] -= fy; dx[di] += fx; dy[di] += fy;
+      }
+
+      for (var i = 0; i < N; i++) {
+        dx[i] -= (posX[i]-cx)*0.01; dy[i] -= (posY[i]-cy)*0.01;
+      }
+
+      var temp = Math.max(0.1, 1 - iter/totalIters);
+      for (var i = 0; i < N; i++) {
+        var dist = Math.sqrt(dx[i]*dx[i] + dy[i]*dy[i]) || 0.01;
+        var cap = Math.min(dist, 10*temp);
+        posX[i] += (dx[i]/dist)*cap; posY[i] += (dy[i]/dist)*cap;
+        posX[i] = Math.max(40, Math.min(w-40, posX[i]));
+        posY[i] = Math.max(40, Math.min(h-40, posY[i]));
+      }
+    }
+
+    layoutDone = true;
+    resetView();
+  }
+
+  // ── Draw graph ─────────────────────────────────────────────────
+  var stateColors = { 'alive': '#4caf50', 'suspect': '#ff9800', 'dead': '#f44336', 'self': '#6366f1' };
+
+  function drawGraph() {
+    var dpr = devicePixelRatio || 1;
+    var r = canvas.parentElement.getBoundingClientRect();
+    if (canvas.width !== Math.round(r.width * dpr)) resizeCanvas();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, r.width, r.height);
+
+    if (N === 0) {
+      ctx.fillStyle = '#555';
+      ctx.font = '13px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText('No distribution data yet', r.width / 2, r.height / 2);
+      return;
+    }
+
+    ctx.save();
+    ctx.translate(vx, vy);
+    ctx.scale(vs, vs);
+
+    var baseR = Math.max(4, Math.min(12, 400 / Math.sqrt(Math.max(N, 1))));
+
+    // Determine highlighted set for ego mode
+    var highlighted = null;
+    if (focusIdx >= 0) {
+      highlighted = {};
+      highlighted[focusIdx] = true;
+      // If focus is self (0), highlight all connected members
+      // If focus is a member, highlight self and that member
+      if (focusIdx === 0) {
+        for (var i = 1; i < N; i++) highlighted[i] = true;
+      } else {
+        highlighted[0] = true; // always show self
+      }
+    }
+
+    // Draw edges (self → each member)
+    for (var i = 1; i < N; i++) {
+      var alpha = 1;
+      var dash = false;
+      if (highlighted) {
+        if (!highlighted[i]) { alpha = 0.08; }
+        else {
+          // Check if this node is a routing neighbor
+          var nid = nodeIds[i];
+          if (routingSet[nid]) { dash = true; alpha = 0.7; }
+          else { alpha = 0.5; }
+        }
+      } else {
+        alpha = 0.2;
+      }
+
+      ctx.beginPath();
+      ctx.moveTo(posX[0], posY[0]);
+      ctx.lineTo(posX[i], posY[i]);
+      ctx.strokeStyle = 'rgba(99,102,241,' + alpha + ')';
+      ctx.lineWidth = 1 / vs;
+      if (dash) { ctx.setLineDash([4/vs, 4/vs]); }
+      else { ctx.setLineDash([]); }
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+
+    // Draw nodes
+    for (var i = 0; i < N; i++) {
+      var opacity = 1;
+      if (highlighted && !highlighted[i]) opacity = 0.15;
+
+      var col = stateColors[nodeStates[i]] || '#888';
+      var isSelf = (nodeStates[i] === 'self');
+
+      ctx.beginPath();
+      var nr = isSelf ? baseR * 1.5 : baseR;
+      ctx.arc(posX[i], posY[i], nr, 0, Math.PI * 2);
+      ctx.globalAlpha = opacity * 0.85;
+      ctx.fillStyle = col;
+      ctx.fill();
+
+      if (isSelf) {
+        ctx.lineWidth = 2 / vs;
+        ctx.strokeStyle = '#fff';
+        ctx.globalAlpha = opacity * 0.6;
+        ctx.stroke();
+      }
+
+      if (focusIdx === i) {
+        ctx.lineWidth = 2 / vs;
+        ctx.strokeStyle = '#fff';
+        ctx.globalAlpha = opacity;
+        ctx.stroke();
+      }
+
+      ctx.globalAlpha = 1;
+
+      // Label (short ID)
+      if (vs > 0.5) {
+        ctx.fillStyle = '#ccc';
+        ctx.globalAlpha = opacity;
+        ctx.font = Math.round(9 / vs) + 'px monospace';
+        ctx.textAlign = 'center';
+        var label = nodeIds[i] ? nodeIds[i].substring(0, 8) : '';
+        ctx.fillText(label, posX[i], posY[i] - nr - 3/vs);
+        ctx.globalAlpha = 1;
+      }
+    }
+
+    ctx.restore();
+  }
+
+  // ── Update from snapshot ───────────────────────────────────────
+  function updateFromSnapshot(d) {
+    data = d;
+
+    // Build node arrays: index 0 = self, then members
+    var oldN = N;
+    var newIds = [d.node_id];
+    var newStates = ['self'];
+    var newAddrs = [d.listen_addr];
+    for (var i = 0; i < d.members.length; i++) {
+      newIds.push(d.members[i].node_id);
+      newStates.push(d.members[i].state);
+      newAddrs.push(d.members[i].addr);
+    }
+
+    // Build routing neighbor set
+    routingSet = {};
+    for (var i = 0; i < d.routing_neighbors.length; i++) {
+      routingSet[d.routing_neighbors[i].node_id] = true;
+    }
+
+    selfNodeId = d.node_id;
+
+    // Check if topology changed
+    var changed = newIds.length !== N;
+    if (!changed) {
+      for (var i = 0; i < newIds.length; i++) {
+        if (newIds[i] !== nodeIds[i]) { changed = true; break; }
+      }
+    }
+
+    nodeIds = newIds;
+    nodeStates = newStates;
+    nodeAddrs = newAddrs;
+    N = nodeIds.length;
+
+    if (changed || !layoutDone) {
+      posX = new Float64Array(N);
+      posY = new Float64Array(N);
+      resizeCanvas();
+      initPositions(canvas.parentElement.getBoundingClientRect().width,
+                    canvas.parentElement.getBoundingClientRect().height);
+      runLayout();
+    } else {
+      // Just update states, redraw
+      drawGraph();
+    }
+
+    updateUI(d);
+  }
+
+  function updateUI(d) {
+    // Self label
+    document.getElementById('selfLabel').textContent = 'Node: ' + d.node_id.substring(0, 16) + '\u2026';
+    document.getElementById('nodeLabel').textContent = d.listen_addr;
+
+    // Stats cards
+    document.getElementById('statMembers').textContent = d.members.length;
+    document.getElementById('statAlive').textContent = d.alive_count;
+    document.getElementById('statSuspect').textContent = d.suspect_count;
+    document.getElementById('statDead').textContent = d.dead_count;
+    document.getElementById('statCache').textContent = d.cache_size;
+    document.getElementById('statRT').textContent = d.routing_table_size;
+    document.getElementById('statDir').textContent = d.directory_entry_count;
+    document.getElementById('statRepair').textContent = d.repair_queue_size;
+    document.getElementById('statProbes').textContent = d.recent_probe_targets.length;
+
+    // Color alive/suspect/dead
+    document.getElementById('statAlive').style.color = '#4caf50';
+    document.getElementById('statSuspect').style.color = d.suspect_count > 0 ? '#ff9800' : '#fff';
+    document.getElementById('statDead').style.color = d.dead_count > 0 ? '#f44336' : '#fff';
+
+    // Members table
+    var body = document.getElementById('membersBody');
+    body.innerHTML = '';
+    document.getElementById('memberCount').textContent = '(' + d.members.length + ')';
+    for (var i = 0; i < d.members.length; i++) {
+      var m = d.members[i];
+      var cls = 'state-' + m.state;
+      var tr = document.createElement('tr');
+      tr.innerHTML =
+        '<td class="' + cls + '">' + m.state + '</td>' +
+        '<td style="color:#aaa;font-size:10px;">' + m.node_id.substring(0, 16) + '\u2026</td>' +
+        '<td>' + m.addr + '</td>' +
+        '<td>' + m.incarnation + '</td>';
+      body.appendChild(tr);
+    }
+
+    // Cache table
+    var cacheBody = document.getElementById('cacheBody');
+    cacheBody.innerHTML = '';
+    document.getElementById('cacheCount').textContent = '(' + d.cache_entries.length + ')';
+    var cacheMax = Math.min(d.cache_entries.length, 200);
+    for (var i = 0; i < cacheMax; i++) {
+      var e = d.cache_entries[i];
+      var tr = document.createElement('tr');
+      tr.innerHTML =
+        '<td style="color:#aaa;font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;">' + e.actor_addr + '</td>' +
+        '<td style="color:#aaa;font-size:10px;">' + e.node_id.substring(0, 12) + '\u2026</td>';
+      cacheBody.appendChild(tr);
+    }
+
+    // Recent probes
+    var probesWrap = document.getElementById('probesWrap');
+    probesWrap.innerHTML = '';
+    for (var i = d.recent_probe_targets.length - 1; i >= 0; i--) {
+      var div = document.createElement('div');
+      div.style.cssText = 'padding:2px 0;color:#aaa;font-size:11px;border-bottom:1px solid #1c1f2e;';
+      div.textContent = d.recent_probe_targets[i].substring(0, 16) + '\u2026';
+      probesWrap.appendChild(div);
+    }
+
+    // Routing bucket histogram
+    drawBucketChart(d.routing_buckets);
+  }
+
+  // ── Bucket histogram ───────────────────────────────────────────
+  function drawBucketChart(buckets) {
+    var cv = document.getElementById('bucketChart');
+    var bctx = cv.getContext('2d');
+    var dpr = devicePixelRatio || 1;
+    var rect = cv.parentElement.getBoundingClientRect();
+    var rw = rect.width, rh = cv.parentElement.clientHeight - 20;
+    cv.width = rw * dpr;
+    cv.height = rh * dpr;
+    cv.style.width = rw + 'px';
+    cv.style.height = rh + 'px';
+    bctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    bctx.clearRect(0, 0, rw, rh);
+
+    if (!buckets || buckets.length === 0) {
+      bctx.fillStyle = '#555';
+      bctx.font = '11px monospace';
+      bctx.textAlign = 'center';
+      bctx.fillText('No buckets', rw / 2, rh / 2);
+      return;
+    }
+
+    var maxCount = 1;
+    for (var i = 0; i < buckets.length; i++) {
+      if (buckets[i][1] > maxCount) maxCount = buckets[i][1];
+    }
+
+    var barW = Math.max(4, Math.floor((rw - 20) / buckets.length) - 2);
+    var chartH = rh - 20;
+
+    for (var i = 0; i < buckets.length; i++) {
+      var x = 10 + i * (barW + 2);
+      var h = (buckets[i][1] / maxCount) * (chartH - 4);
+      bctx.fillStyle = '#6366f1';
+      bctx.globalAlpha = 0.8;
+      bctx.fillRect(x, chartH - h, barW, h);
+
+      if (buckets.length <= 30) {
+        bctx.globalAlpha = 1;
+        bctx.fillStyle = '#888';
+        bctx.font = '8px monospace';
+        bctx.textAlign = 'center';
+        bctx.fillText(buckets[i][0], x + barW / 2, rh - 2);
+      }
+    }
+    bctx.globalAlpha = 1;
+  }
+
+  // ── SSE connection ─────────────────────────────────────────────
+  var es = new EventSource('/events');
+
+  es.addEventListener('distribution', function(e) {
+    try {
+      var d = JSON.parse(e.data);
+      updateFromSnapshot(d);
+    } catch(err) { console.error('distribution parse error', err); }
+  });
+
+  es.addEventListener('done', function() {
+    dot.className = 'status-dot done';
+    es.close();
+  });
+
+  es.onerror = function() {
+    dot.className = 'status-dot disconnected';
+  };
+
+  es.onopen = function() {
+    dot.className = 'status-dot';
+  };
+
+  resizeCanvas();
+  drawGraph();
+})();
+</script>
+</body>
+</html>
diff --git a/crates/runtime-dashboard/src/distribution_html.rs b/crates/runtime-dashboard/src/distribution_html.rs
index 650bf06..43c57ef 100644
--- a/crates/runtime-dashboard/src/distribution_html.rs
+++ b/crates/runtime-dashboard/src/distribution_html.rs
@@ -1,747 +1 @@
-pub const DISTRIBUTION_HTML: &str = r##"<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Swactor Runtime – Distribution</title>
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
-
-  .header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
-  }
-  .header-left { display: flex; align-items: center; }
-  .header h1 { font-size: 16px; font-weight: 600; color: #fff; }
-  .status-dot {
-    width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
-    display: inline-block; margin-left: 8px; vertical-align: middle;
-  }
-  .status-dot.disconnected { background: #f44336; }
-  .status-dot.done { background: #ff9800; }
-
-  .nav-links { display: flex; gap: 4px; margin-left: 20px; }
-  .nav-link {
-    color: #888; text-decoration: none; font-size: 12px;
-    padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
-  }
-  .nav-link:hover { color: #e0e0e0; }
-  .nav-link.active { color: #fff; background: #2a2d3e; }
-
-  .header-right { display: flex; align-items: center; gap: 12px; }
-
-  .main {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto 1fr auto;
-    height: calc(100vh - 48px);
-  }
-
-  .graph-panel {
-    grid-row: 1 / 3; border-right: 1px solid #2a2d3e; position: relative;
-    min-height: 0;
-  }
-  .graph-panel canvas { width: 100%; height: 100%; display: block; }
-
-  .side-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
-
-  .stats-panel {
-    flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #2a2d3e; background: #161822;
-  }
-  .stats-panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
-
-  .stats-cards {
-    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
-  }
-  .stat-card {
-    background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
-  }
-  .stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
-  .stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
-
-  .table-panel {
-    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
-  }
-  .table-panel h2 {
-    font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px;
-    padding: 10px 16px 6px; flex-shrink: 0;
-  }
-  .table-scroll {
-    flex: 1; overflow-y: auto; padding: 0 16px 8px;
-  }
-  .table-scroll table { width: 100%; border-collapse: collapse; }
-  .table-scroll th, .table-scroll td {
-    padding: 3px 8px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
-    white-space: nowrap;
-  }
-  .table-scroll th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
-
-  .state-alive { color: #4caf50; }
-  .state-suspect { color: #ff9800; }
-  .state-dead { color: #f44336; }
-
-  .bottom-panel {
-    grid-column: 1 / -1; border-top: 1px solid #2a2d3e; background: #161822;
-    display: flex; gap: 12px; padding: 12px 16px; height: 200px;
-  }
-  .bottom-section { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-  .bottom-section h2 {
-    font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
-  }
-  .bottom-section canvas { flex: 1; width: 100%; }
-  .bottom-section .scroll-wrap {
-    flex: 1; overflow-y: auto; font-size: 11px;
-  }
-
-  .ego-hint {
-    position: absolute; bottom: 12px; left: 12px; font-size: 10px;
-    color: #555; pointer-events: none;
-  }
-
-  .node-id-label {
-    position: absolute; top: 12px; left: 12px; font-size: 11px;
-    color: #888; max-width: 50%; overflow: hidden; text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  ::-webkit-scrollbar { width: 6px; }
-  ::-webkit-scrollbar-track { background: #0f1117; }
-  ::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
-</style>
-</head>
-<body>
-<div class="header">
-  <div class="header-left">
-    <h1>
-      Swactor Runtime Dashboard
-      <span id="statusDot" class="status-dot disconnected"></span>
-    </h1>
-    <nav class="nav-links">
-      <a href="/" class="nav-link">Overview</a>
-      <a href="/actors" class="nav-link">Actors</a>
-      <a href="/distribution" class="nav-link active">Distribution</a>
-    </nav>
-  </div>
-  <div class="header-right">
-    <span id="nodeLabel" style="color:#888;font-size:12px;">Waiting for data...</span>
-  </div>
-</div>
-
-<div class="main">
-  <!-- Left: Graph -->
-  <div class="graph-panel">
-    <canvas id="graphCanvas"></canvas>
-    <div class="ego-hint" id="egoHint">Click a node for ego-centric view. Double-click to reset.</div>
-    <div class="node-id-label" id="selfLabel"></div>
-  </div>
-
-  <!-- Right: Stats + Tables -->
-  <div class="side-panel">
-    <div class="stats-panel">
-      <h2>Distribution Stats</h2>
-      <div class="stats-cards">
-        <div class="stat-card"><div class="value" id="statMembers">0</div><div class="label">Members</div></div>
-        <div class="stat-card"><div class="value" id="statAlive">0</div><div class="label">Alive</div></div>
-        <div class="stat-card"><div class="value" id="statSuspect">0</div><div class="label">Suspect</div></div>
-        <div class="stat-card"><div class="value" id="statDead">0</div><div class="label">Dead</div></div>
-        <div class="stat-card"><div class="value" id="statCache">0</div><div class="label">Cache</div></div>
-        <div class="stat-card"><div class="value" id="statRT">0</div><div class="label">RT Size</div></div>
-        <div class="stat-card"><div class="value" id="statDir">0</div><div class="label">Directory</div></div>
-        <div class="stat-card"><div class="value" id="statRepair">0</div><div class="label">Repair Q</div></div>
-        <div class="stat-card"><div class="value" id="statProbes">0</div><div class="label">Probes</div></div>
-      </div>
-    </div>
-
-    <div class="table-panel">
-      <h2>Members <span id="memberCount" style="color:#555;font-weight:400;"></span></h2>
-      <div class="table-scroll">
-        <table>
-          <thead><tr><th>State</th><th>Node ID</th><th>Address</th><th>Inc</th></tr></thead>
-          <tbody id="membersBody"></tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-
-  <!-- Bottom: Cache, Gossip Pairs, Routing Histogram -->
-  <div class="bottom-panel">
-    <div class="bottom-section">
-      <h2>LRU Cache <span id="cacheCount" style="color:#555;font-weight:400;"></span></h2>
-      <div class="scroll-wrap">
-        <table style="width:100%;border-collapse:collapse;">
-          <thead><tr><th style="color:#888;font-weight:500;font-size:11px;">Actor</th><th style="color:#888;font-weight:500;font-size:11px;">Node</th></tr></thead>
-          <tbody id="cacheBody"></tbody>
-        </table>
-      </div>
-    </div>
-    <div class="bottom-section">
-      <h2>Recent Probes</h2>
-      <div class="scroll-wrap" id="probesWrap"></div>
-    </div>
-    <div class="bottom-section">
-      <h2>Routing Buckets</h2>
-      <canvas id="bucketChart"></canvas>
-    </div>
-  </div>
-</div>
-
-<script>
-(function() {
-  var DASHBOARD_MODE = '__DASHBOARD_MODE__';
-  var dot = document.getElementById('statusDot');
-
-  // ── State ───────────────────────────────────────────────────────
-  var data = null;        // latest DistributionNodeSnapshot
-  var selfNodeId = '';    // this node's hex id
-  var focusIdx = -1;      // ego-centric focus (-1 = none, 0 = self)
-
-  // Graph state
-  var N = 0;
-  var posX = new Float64Array(0);
-  var posY = new Float64Array(0);
-  var nodeIds = [];       // hex strings
-  var nodeStates = [];    // 'alive' | 'suspect' | 'dead' | 'self'
-  var nodeAddrs = [];
-  var layoutDone = false;
-  var layoutIter = 0;
-
-  // View transform
-  var vx = 0, vy = 0, vs = 1;
-  var isDragging = false, dragX = 0, dragY = 0, dragVx = 0, dragVy = 0;
-  var clickStartX = 0, clickStartY = 0;
-
-  // Routing neighbor set (for ego highlight)
-  var routingSet = {};
-
-  // ── Quadtree (Barnes-Hut) ──────────────────────────────────────
-  var QF = 11;
-  var qt = new Float64Array(256 * QF);
-  var qtN = 0;
-  var _fx = 0, _fy = 0;
-
-  function qtAlloc(ox, oy, sz) {
-    if (qtN * QF >= qt.length) {
-      var nq = new Float64Array(Math.max(qt.length * 2, 256 * QF));
-      nq.set(qt); qt = nq;
-    }
-    var i = qtN++, o = i * QF;
-    qt[o]=ox; qt[o+1]=oy; qt[o+2]=sz;
-    qt[o+3]=0; qt[o+4]=0; qt[o+5]=0;
-    qt[o+6]=-1; qt[o+7]=-1; qt[o+8]=-1; qt[o+9]=-1;
-    qt[o+10]=-1;
-    return i;
-  }
-
-  function qtBuild() {
-    var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
-    for (var i = 0; i < N; i++) {
-      if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
-      if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
-    }
-    var sz = Math.max(x1 - x0, y1 - y0, 1) + 2;
-    qtN = 0;
-    qtAlloc(x0 - 1, y0 - 1, sz);
-    for (var i = 0; i < N; i++) qtIns(0, i, posX[i], posY[i]);
-  }
-
-  function qtIns(ni, bi, bx, by) {
-    var o = ni * QF;
-    if (qt[o+5] === 0) { qt[o+3] = bx; qt[o+4] = by; qt[o+5] = 1; qt[o+10] = bi; return; }
-    if (qt[o+10] >= 0) {
-      if (qt[o+2] < 0.001) { qt[o+5]++; return; }
-      var eb = qt[o+10], ex = qt[o+3], ey = qt[o+4];
-      qt[o+10] = -1;
-      qtInsChild(ni, eb, ex, ey);
-    }
-    var m = qt[o+5];
-    qt[o+3] = (qt[o+3]*m + bx) / (m+1);
-    qt[o+4] = (qt[o+4]*m + by) / (m+1);
-    qt[o+5] = m + 1;
-    qtInsChild(ni, bi, bx, by);
-  }
-
-  function qtInsChild(ni, bi, bx, by) {
-    var o = ni * QF, hs = qt[o+2] / 2;
-    var mx = qt[o] + hs, my = qt[o+1] + hs;
-    var qx = bx < mx ? 0 : 1, qy = by < my ? 0 : 1;
-    var ci = o + 6 + qy * 2 + qx;
-    if (qt[ci] < 0) qt[ci] = qtAlloc(qx ? mx : qt[o], qy ? my : qt[o+1], hs);
-    qtIns(qt[ci], bi, bx, by);
-  }
-
-  function qtCalc(ni, px, py, k2, th2) {
-    if (ni < 0) return;
-    var o = ni * QF;
-    if (qt[o+5] === 0) return;
-    var dx = qt[o+3] - px, dy = qt[o+4] - py;
-    var d2 = dx*dx + dy*dy;
-    if (d2 < 0.0001) d2 = 0.0001;
-    if (qt[o+10] >= 0 || qt[o+2]*qt[o+2]/d2 < th2) {
-      var d = Math.sqrt(d2), f = -(k2 * qt[o+5]) / d2;
-      _fx += (dx/d)*f; _fy += (dy/d)*f;
-      return;
-    }
-    for (var c = 6; c < 10; c++) if (qt[o+c] >= 0) qtCalc(qt[o+c], px, py, k2, th2);
-  }
-
-  // ── Canvas setup ───────────────────────────────────────────────
-  var canvas = document.getElementById('graphCanvas');
-  var ctx = canvas.getContext('2d');
-
-  function resizeCanvas() {
-    var r = canvas.parentElement.getBoundingClientRect();
-    canvas.width = r.width * devicePixelRatio;
-    canvas.height = r.height * devicePixelRatio;
-    canvas.style.width = r.width + 'px';
-    canvas.style.height = r.height + 'px';
-  }
-  window.addEventListener('resize', function() { resizeCanvas(); drawGraph(); });
-
-  // ── Zoom & pan ─────────────────────────────────────────────────
-  canvas.addEventListener('wheel', function(e) {
-    e.preventDefault();
-    var r = canvas.getBoundingClientRect();
-    var mx = e.clientX - r.left, my = e.clientY - r.top;
-    var f = e.deltaY < 0 ? 1.1 : 1 / 1.1;
-    var ns = Math.max(0.05, Math.min(5, vs * f));
-    var ratio = ns / vs;
-    vx = mx - (mx - vx) * ratio;
-    vy = my - (my - vy) * ratio;
-    vs = ns;
-    drawGraph();
-  }, { passive: false });
-
-  canvas.addEventListener('mousedown', function(e) {
-    if (e.button !== 0) return;
-    isDragging = true;
-    dragX = e.clientX; dragY = e.clientY;
-    clickStartX = e.clientX; clickStartY = e.clientY;
-    dragVx = vx; dragVy = vy;
-    canvas.style.cursor = 'grabbing';
-  });
-  window.addEventListener('mousemove', function(e) {
-    if (!isDragging) return;
-    vx = dragVx + (e.clientX - dragX);
-    vy = dragVy + (e.clientY - dragY);
-    drawGraph();
-  });
-  window.addEventListener('mouseup', function(e) {
-    if (isDragging) {
-      var wasDrag = Math.abs(e.clientX - clickStartX) > 3 || Math.abs(e.clientY - clickStartY) > 3;
-      isDragging = false; canvas.style.cursor = '';
-      if (!wasDrag) handleClick(e);
-    }
-  });
-  canvas.addEventListener('dblclick', function() { focusIdx = -1; resetView(); drawGraph(); });
-
-  function resetView() {
-    if (N === 0) { vx = 0; vy = 0; vs = 1; return; }
-    var r = canvas.parentElement.getBoundingClientRect();
-    var w = r.width, h = r.height;
-    var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
-    for (var i = 0; i < N; i++) {
-      if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
-      if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
-    }
-    if (!isFinite(x0)) { vx = 0; vy = 0; vs = 1; return; }
-    var pad = 40;
-    vs = Math.min(w / (x1 - x0 + pad * 2), h / (y1 - y0 + pad * 2), 2);
-    vx = (w - (x0 + x1) * vs) / 2;
-    vy = (h - (y0 + y1) * vs) / 2;
-  }
-
-  // ── Click handler (ego-centric selection) ──────────────────────
-  function handleClick(e) {
-    var r = canvas.getBoundingClientRect();
-    var mx = e.clientX - r.left, my = e.clientY - r.top;
-    var wx = (mx - vx) / vs, wy = (my - vy) / vs;
-    var baseR = Math.max(4, Math.min(12, 400 / Math.sqrt(Math.max(N, 1))));
-    var hitR = baseR * 2;
-    var best = -1, bestD = hitR * hitR;
-    for (var i = 0; i < N; i++) {
-      var dx = posX[i] - wx, dy = posY[i] - wy;
-      var d2 = dx*dx + dy*dy;
-      if (d2 < bestD) { bestD = d2; best = i; }
-    }
-    if (best < 0) { focusIdx = -1; }
-    else { focusIdx = best; }
-    drawGraph();
-  }
-
-  // ── Force layout ───────────────────────────────────────────────
-  function initPositions(w, h) {
-    var cx = w / 2, cy = h / 2;
-    var rad = Math.min(cx, cy) * 0.6;
-    for (var i = 0; i < N; i++) {
-      var a = (2 * Math.PI * i) / N - Math.PI / 2;
-      posX[i] = cx + rad * Math.cos(a);
-      posY[i] = cy + rad * Math.sin(a);
-    }
-  }
-
-  function runLayout() {
-    var r = canvas.parentElement.getBoundingClientRect();
-    var w = r.width, h = r.height;
-    if (w === 0 || h === 0) return;
-    var cx = w/2, cy = h/2;
-    var k = Math.sqrt(w*h / Math.max(N, 1)), k2 = k*k;
-    var totalIters = Math.min(200, Math.max(30, Math.floor(20000 / Math.max(N, 1))));
-    var useBH = N > 60, th2 = 0.64;
-    var dx = new Float64Array(N), dy = new Float64Array(N);
-
-    // Edges: self→each member (star topology from this node's perspective)
-    var selfIdx = 0; // node 0 is always 'self'
-    var edges = [];
-    for (var i = 1; i < N; i++) edges.push([selfIdx, i]);
-
-    for (var iter = 0; iter < totalIters; iter++) {
-      dx.fill(0); dy.fill(0);
-
-      if (useBH) {
-        qtBuild();
-        for (var i = 0; i < N; i++) {
-          _fx = 0; _fy = 0;
-          qtCalc(0, posX[i], posY[i], k2, th2);
-          dx[i] += _fx; dy[i] += _fy;
-        }
-      } else {
-        for (var i = 0; i < N; i++) for (var j = i+1; j < N; j++) {
-          var ddx = posX[i]-posX[j], ddy = posY[i]-posY[j];
-          var dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
-          var f = k2/dist, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
-          dx[i] += fx; dy[i] += fy; dx[j] -= fx; dy[j] -= fy;
-        }
-      }
-
-      for (var e = 0; e < edges.length; e++) {
-        var si = edges[e][0], di = edges[e][1];
-        var ddx = posX[si]-posX[di], ddy = posY[si]-posY[di];
-        var dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
-        var f = (dist*dist)/k, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
-        dx[si] -= fx; dy[si] -= fy; dx[di] += fx; dy[di] += fy;
-      }
-
-      for (var i = 0; i < N; i++) {
-        dx[i] -= (posX[i]-cx)*0.01; dy[i] -= (posY[i]-cy)*0.01;
-      }
-
-      var temp = Math.max(0.1, 1 - iter/totalIters);
-      for (var i = 0; i < N; i++) {
-        var dist = Math.sqrt(dx[i]*dx[i] + dy[i]*dy[i]) || 0.01;
-        var cap = Math.min(dist, 10*temp);
-        posX[i] += (dx[i]/dist)*cap; posY[i] += (dy[i]/dist)*cap;
-        posX[i] = Math.max(40, Math.min(w-40, posX[i]));
-        posY[i] = Math.max(40, Math.min(h-40, posY[i]));
-      }
-    }
-
-    layoutDone = true;
-    resetView();
-  }
-
-  // ── Draw graph ─────────────────────────────────────────────────
-  var stateColors = { 'alive': '#4caf50', 'suspect': '#ff9800', 'dead': '#f44336', 'self': '#6366f1' };
-
-  function drawGraph() {
-    var dpr = devicePixelRatio || 1;
-    var r = canvas.parentElement.getBoundingClientRect();
-    if (canvas.width !== Math.round(r.width * dpr)) resizeCanvas();
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, r.width, r.height);
-
-    if (N === 0) {
-      ctx.fillStyle = '#555';
-      ctx.font = '13px monospace';
-      ctx.textAlign = 'center';
-      ctx.fillText('No distribution data yet', r.width / 2, r.height / 2);
-      return;
-    }
-
-    ctx.save();
-    ctx.translate(vx, vy);
-    ctx.scale(vs, vs);
-
-    var baseR = Math.max(4, Math.min(12, 400 / Math.sqrt(Math.max(N, 1))));
-
-    // Determine highlighted set for ego mode
-    var highlighted = null;
-    if (focusIdx >= 0) {
-      highlighted = {};
-      highlighted[focusIdx] = true;
-      // If focus is self (0), highlight all connected members
-      // If focus is a member, highlight self and that member
-      if (focusIdx === 0) {
-        for (var i = 1; i < N; i++) highlighted[i] = true;
-      } else {
-        highlighted[0] = true; // always show self
-      }
-    }
-
-    // Draw edges (self → each member)
-    for (var i = 1; i < N; i++) {
-      var alpha = 1;
-      var dash = false;
-      if (highlighted) {
-        if (!highlighted[i]) { alpha = 0.08; }
-        else {
-          // Check if this node is a routing neighbor
-          var nid = nodeIds[i];
-          if (routingSet[nid]) { dash = true; alpha = 0.7; }
-          else { alpha = 0.5; }
-        }
-      } else {
-        alpha = 0.2;
-      }
-
-      ctx.beginPath();
-      ctx.moveTo(posX[0], posY[0]);
-      ctx.lineTo(posX[i], posY[i]);
-      ctx.strokeStyle = 'rgba(99,102,241,' + alpha + ')';
-      ctx.lineWidth = 1 / vs;
-      if (dash) { ctx.setLineDash([4/vs, 4/vs]); }
-      else { ctx.setLineDash([]); }
-      ctx.stroke();
-    }
-    ctx.setLineDash([]);
-
-    // Draw nodes
-    for (var i = 0; i < N; i++) {
-      var opacity = 1;
-      if (highlighted && !highlighted[i]) opacity = 0.15;
-
-      var col = stateColors[nodeStates[i]] || '#888';
-      var isSelf = (nodeStates[i] === 'self');
-
-      ctx.beginPath();
-      var nr = isSelf ? baseR * 1.5 : baseR;
-      ctx.arc(posX[i], posY[i], nr, 0, Math.PI * 2);
-      ctx.globalAlpha = opacity * 0.85;
-      ctx.fillStyle = col;
-      ctx.fill();
-
-      if (isSelf) {
-        ctx.lineWidth = 2 / vs;
-        ctx.strokeStyle = '#fff';
-        ctx.globalAlpha = opacity * 0.6;
-        ctx.stroke();
-      }
-
-      if (focusIdx === i) {
-        ctx.lineWidth = 2 / vs;
-        ctx.strokeStyle = '#fff';
-        ctx.globalAlpha = opacity;
-        ctx.stroke();
-      }
-
-      ctx.globalAlpha = 1;
-
-      // Label (short ID)
-      if (vs > 0.5) {
-        ctx.fillStyle = '#ccc';
-        ctx.globalAlpha = opacity;
-        ctx.font = Math.round(9 / vs) + 'px monospace';
-        ctx.textAlign = 'center';
-        var label = nodeIds[i] ? nodeIds[i].substring(0, 8) : '';
-        ctx.fillText(label, posX[i], posY[i] - nr - 3/vs);
-        ctx.globalAlpha = 1;
-      }
-    }
-
-    ctx.restore();
-  }
-
-  // ── Update from snapshot ───────────────────────────────────────
-  function updateFromSnapshot(d) {
-    data = d;
-
-    // Build node arrays: index 0 = self, then members
-    var oldN = N;
-    var newIds = [d.node_id];
-    var newStates = ['self'];
-    var newAddrs = [d.listen_addr];
-    for (var i = 0; i < d.members.length; i++) {
-      newIds.push(d.members[i].node_id);
-      newStates.push(d.members[i].state);
-      newAddrs.push(d.members[i].addr);
-    }
-
-    // Build routing neighbor set
-    routingSet = {};
-    for (var i = 0; i < d.routing_neighbors.length; i++) {
-      routingSet[d.routing_neighbors[i].node_id] = true;
-    }
-
-    selfNodeId = d.node_id;
-
-    // Check if topology changed
-    var changed = newIds.length !== N;
-    if (!changed) {
-      for (var i = 0; i < newIds.length; i++) {
-        if (newIds[i] !== nodeIds[i]) { changed = true; break; }
-      }
-    }
-
-    nodeIds = newIds;
-    nodeStates = newStates;
-    nodeAddrs = newAddrs;
-    N = nodeIds.length;
-
-    if (changed || !layoutDone) {
-      posX = new Float64Array(N);
-      posY = new Float64Array(N);
-      resizeCanvas();
-      initPositions(canvas.parentElement.getBoundingClientRect().width,
-                    canvas.parentElement.getBoundingClientRect().height);
-      runLayout();
-    } else {
-      // Just update states, redraw
-      drawGraph();
-    }
-
-    updateUI(d);
-  }
-
-  function updateUI(d) {
-    // Self label
-    document.getElementById('selfLabel').textContent = 'Node: ' + d.node_id.substring(0, 16) + '\u2026';
-    document.getElementById('nodeLabel').textContent = d.listen_addr;
-
-    // Stats cards
-    document.getElementById('statMembers').textContent = d.members.length;
-    document.getElementById('statAlive').textContent = d.alive_count;
-    document.getElementById('statSuspect').textContent = d.suspect_count;
-    document.getElementById('statDead').textContent = d.dead_count;
-    document.getElementById('statCache').textContent = d.cache_size;
-    document.getElementById('statRT').textContent = d.routing_table_size;
-    document.getElementById('statDir').textContent = d.directory_entry_count;
-    document.getElementById('statRepair').textContent = d.repair_queue_size;
-    document.getElementById('statProbes').textContent = d.recent_probe_targets.length;
-
-    // Color alive/suspect/dead
-    document.getElementById('statAlive').style.color = '#4caf50';
-    document.getElementById('statSuspect').style.color = d.suspect_count > 0 ? '#ff9800' : '#fff';
-    document.getElementById('statDead').style.color = d.dead_count > 0 ? '#f44336' : '#fff';
-
-    // Members table
-    var body = document.getElementById('membersBody');
-    body.innerHTML = '';
-    document.getElementById('memberCount').textContent = '(' + d.members.length + ')';
-    for (var i = 0; i < d.members.length; i++) {
-      var m = d.members[i];
-      var cls = 'state-' + m.state;
-      var tr = document.createElement('tr');
-      tr.innerHTML =
-        '<td class="' + cls + '">' + m.state + '</td>' +
-        '<td style="color:#aaa;font-size:10px;">' + m.node_id.substring(0, 16) + '\u2026</td>' +
-        '<td>' + m.addr + '</td>' +
-        '<td>' + m.incarnation + '</td>';
-      body.appendChild(tr);
-    }
-
-    // Cache table
-    var cacheBody = document.getElementById('cacheBody');
-    cacheBody.innerHTML = '';
-    document.getElementById('cacheCount').textContent = '(' + d.cache_entries.length + ')';
-    var cacheMax = Math.min(d.cache_entries.length, 200);
-    for (var i = 0; i < cacheMax; i++) {
-      var e = d.cache_entries[i];
-      var tr = document.createElement('tr');
-      tr.innerHTML =
-        '<td style="color:#aaa;font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;">' + e.actor_addr + '</td>' +
-        '<td style="color:#aaa;font-size:10px;">' + e.node_id.substring(0, 12) + '\u2026</td>';
-      cacheBody.appendChild(tr);
-    }
-
-    // Recent probes
-    var probesWrap = document.getElementById('probesWrap');
-    probesWrap.innerHTML = '';
-    for (var i = d.recent_probe_targets.length - 1; i >= 0; i--) {
-      var div = document.createElement('div');
-      div.style.cssText = 'padding:2px 0;color:#aaa;font-size:11px;border-bottom:1px solid #1c1f2e;';
-      div.textContent = d.recent_probe_targets[i].substring(0, 16) + '\u2026';
-      probesWrap.appendChild(div);
-    }
-
-    // Routing bucket histogram
-    drawBucketChart(d.routing_buckets);
-  }
-
-  // ── Bucket histogram ───────────────────────────────────────────
-  function drawBucketChart(buckets) {
-    var cv = document.getElementById('bucketChart');
-    var bctx = cv.getContext('2d');
-    var dpr = devicePixelRatio || 1;
-    var rect = cv.parentElement.getBoundingClientRect();
-    var rw = rect.width, rh = cv.parentElement.clientHeight - 20;
-    cv.width = rw * dpr;
-    cv.height = rh * dpr;
-    cv.style.width = rw + 'px';
-    cv.style.height = rh + 'px';
-    bctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    bctx.clearRect(0, 0, rw, rh);
-
-    if (!buckets || buckets.length === 0) {
-      bctx.fillStyle = '#555';
-      bctx.font = '11px monospace';
-      bctx.textAlign = 'center';
-      bctx.fillText('No buckets', rw / 2, rh / 2);
-      return;
-    }
-
-    var maxCount = 1;
-    for (var i = 0; i < buckets.length; i++) {
-      if (buckets[i][1] > maxCount) maxCount = buckets[i][1];
-    }
-
-    var barW = Math.max(4, Math.floor((rw - 20) / buckets.length) - 2);
-    var chartH = rh - 20;
-
-    for (var i = 0; i < buckets.length; i++) {
-      var x = 10 + i * (barW + 2);
-      var h = (buckets[i][1] / maxCount) * (chartH - 4);
-      bctx.fillStyle = '#6366f1';
-      bctx.globalAlpha = 0.8;
-      bctx.fillRect(x, chartH - h, barW, h);
-
-      if (buckets.length <= 30) {
-        bctx.globalAlpha = 1;
-        bctx.fillStyle = '#888';
-        bctx.font = '8px monospace';
-        bctx.textAlign = 'center';
-        bctx.fillText(buckets[i][0], x + barW / 2, rh - 2);
-      }
-    }
-    bctx.globalAlpha = 1;
-  }
-
-  // ── SSE connection ─────────────────────────────────────────────
-  var es = new EventSource('/events');
-
-  es.addEventListener('distribution', function(e) {
-    try {
-      var d = JSON.parse(e.data);
-      updateFromSnapshot(d);
-    } catch(err) { console.error('distribution parse error', err); }
-  });
-
-  es.addEventListener('done', function() {
-    dot.className = 'status-dot done';
-    es.close();
-  });
-
-  es.onerror = function() {
-    dot.className = 'status-dot disconnected';
-  };
-
-  es.onopen = function() {
-    dot.className = 'status-dot';
-  };
-
-  resizeCanvas();
-  drawGraph();
-})();
-</script>
-</body>
-</html>
-"##;
+pub const DISTRIBUTION_HTML: &str = include_str!("distribution.html");
diff --git a/crates/simulation-dashboard/src/dashboard.html b/crates/simulation-dashboard/src/dashboard.html
new file mode 100644
index 0000000..d4874be
--- /dev/null
+++ b/crates/simulation-dashboard/src/dashboard.html
@@ -0,0 +1,1715 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Simulation Dashboard</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #0f1117; color: #e0e0e0; }
+  .header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3a; }
+  .header h1 { font-size: 18px; font-weight: 600; color: #c0c6d4; }
+  .trace-select { background: #1a1d2e; color: #e0e0e0; border: 1px solid #2a2d3a; border-radius: 4px; padding: 6px 12px; font-size: 13px; cursor: pointer; min-width: 240px; max-width: 420px; }
+  .trace-select:hover { border-color: #4f46e5; }
+  .trace-select:focus { outline: none; border-color: #6366f1; }
+  .trace-select:disabled { cursor: default; opacity: 0.5; }
+  .status-badge { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9ca3af; }
+  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
+  .status-dot.ready { background: #22c55e; }
+  .status-dot.loading { background: #3b82f6; animation: pulse 1s infinite; }
+  .status-dot.error { background: #ef4444; }
+  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+  .main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 48px); }
+  .graph-panel { grid-row: 1 / 3; border-right: 1px solid #2a2d3a; position: relative; }
+  canvas { width: 100%; height: 100%; display: block; }
+  .layout-progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(22,24,34,0.9); border: 1px solid #2a2d3a; border-radius: 8px; padding: 16px 24px; text-align: center; font-size: 13px; color: #9ca3af; display: none; z-index: 10; }
+  .layout-progress .progress-bar { width: 200px; height: 4px; background: #2a2d3a; border-radius: 2px; margin-top: 8px; overflow: hidden; }
+  .layout-progress .progress-fill { height: 100%; background: #6366f1; border-radius: 2px; width: 0%; transition: width 0.1s; }
+  .side-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
+  .stats-panel { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #2a2d3a; background: #161822; }
+  .stats-panel h2 { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
+  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+  .stat-item .stat-value { font-size: 22px; font-weight: 700; color: #e5e7eb; }
+  .stat-item .stat-label { font-size: 11px; color: #6b7280; text-transform: uppercase; }
+  .worker-panel { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #2a2d3a; height: 180px; overflow-y: auto; }
+  .worker-panel h2 { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
+  .worker-columns { display: flex; gap: 8px; overflow-x: auto; }
+  .worker-col { flex: 1; min-width: 160px; background: #1a1d2e; border-radius: 6px; padding: 8px; font-size: 11px; max-height: 140px; overflow-y: auto; }
+  .worker-col-header { font-weight: 600; color: #818cf8; margin-bottom: 4px; font-size: 12px; }
+  .worker-entry { color: #9ca3af; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .event-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+  .event-panel h2 { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px 8px; }
+  .event-table-wrap { flex: 1; overflow-y: auto; padding: 0 16px 8px; }
+  table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  th { text-align: left; color: #6b7280; font-weight: 500; padding: 4px 8px; border-bottom: 1px solid #2a2d3a; position: sticky; top: 0; background: #0f1117; }
+  td { padding: 3px 8px; border-bottom: 1px solid #1a1d2e; white-space: nowrap; }
+  tr.highlight-push td { background: rgba(59,130,246,0.1); }
+  tr.highlight-set td { background: rgba(34,197,94,0.1); }
+  tr.highlight-kill td { background: rgba(239,68,68,0.15); }
+  tr.highlight-revive td { background: rgba(34,197,94,0.15); }
+  tr.highlight-membership td { background: rgba(245,158,11,0.1); }
+  tr.highlight-registry td { background: rgba(168,85,247,0.1); }
+  tr.highlight-ping td { background: rgba(59,130,246,0.08); }
+  .replay-controls { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #161822; border-bottom: 1px solid #2a2d3a; }
+  .replay-controls button { background: #2a2d3a; color: #e0e0e0; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
+  .replay-controls button:hover { background: #3b3f52; }
+  .replay-controls input[type=range] { flex: 1; }
+  .replay-controls .replay-pos { font-size: 12px; color: #9ca3af; min-width: 60px; text-align: right; }
+  .replay-controls .speed-group { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
+  .replay-controls .speed-group input { width: 64px; background: #1a1d2e; color: #e0e0e0; border: 1px solid #2a2d3a; border-radius: 4px; padding: 2px 6px; font-size: 12px; text-align: right; }
+  .replay-controls .speed-group label { font-size: 11px; color: #6b7280; white-space: nowrap; }
+  .tab-bar { display: flex; border-bottom: 1px solid #2a2d3a; background: #161822; flex-shrink: 0; }
+  .tab-btn { flex: 1; padding: 8px 0; font-size: 13px; font-weight: 500; color: #6b7280; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; text-align: center; }
+  .tab-btn:hover { color: #9ca3af; }
+  .tab-btn.active { color: #818cf8; border-bottom-color: #818cf8; }
+  .tab-content { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
+  .tab-content.active { display: flex; }
+  .analytics-scroll { flex: 1; overflow-y: auto; padding: 12px 16px; }
+  .badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
+  .badge { background: #1a1d2e; border-radius: 6px; padding: 10px 12px; border-left: 3px solid #6b7280; }
+  .badge.green { border-left-color: #22c55e; }
+  .badge.yellow { border-left-color: #f59e0b; }
+  .badge.red { border-left-color: #ef4444; }
+  .badge .badge-val { font-size: 18px; font-weight: 700; color: #e5e7eb; }
+  .badge .badge-lbl { font-size: 11px; color: #6b7280; text-transform: uppercase; }
+  .chart-section { margin-bottom: 16px; }
+  .chart-section h3 { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
+  .chart-section canvas { width: 100%; border-radius: 4px; background: #1a1d2e; display: block; }
+  .chart-empty { padding: 24px; text-align: center; color: #4b5563; font-size: 13px; }
+  .node-detail { position: absolute; top: 60px; left: 20px; width: 280px; background: rgba(22,24,34,0.95); border: 1px solid #2a2d3a; border-radius: 8px; padding: 14px; z-index: 20; display: none; font-size: 12px; }
+  .node-detail h3 { font-size: 14px; color: #c7d2fe; margin-bottom: 8px; }
+  .node-detail .close-btn { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #6b7280; cursor: pointer; font-size: 16px; }
+  .node-detail .close-btn:hover { color: #e0e0e0; }
+  .node-detail .nd-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #1a1d2e; }
+  .node-detail .nd-key { color: #6b7280; }
+  .node-detail .nd-val { color: #e5e7eb; font-weight: 500; }
+  .node-detail .nd-events { max-height: 160px; overflow-y: auto; margin-top: 8px; }
+  .node-detail .nd-ev { color: #9ca3af; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
+  .heatmap-wrap { position: relative; }
+  .heatmap-tooltip { position: absolute; display: none; background: rgba(22,24,34,0.95); border: 1px solid #2a2d3a; border-radius: 4px; padding: 4px 8px; font-size: 11px; color: #e0e0e0; white-space: nowrap; pointer-events: none; z-index: 5; }
+</style>
+</head>
+<body>
+<div class="header">
+  <h1>Simulation Dashboard</h1>
+  <select id="traceSelect" class="trace-select" disabled><option value="">Loading traces...</option></select>
+  <div class="status-badge">
+    <div class="status-dot loading" id="statusDot"></div>
+    <span id="statusText">Loading traces...</span>
+  </div>
+</div>
+<div class="main">
+  <div class="graph-panel">
+    <canvas id="graphCanvas"></canvas>
+    <div class="layout-progress" id="layoutProgress">
+      <div>Computing layout...</div>
+      <div class="progress-bar"><div class="progress-fill" id="layoutProgressFill"></div></div>
+    </div>
+    <div class="node-detail" id="nodeDetail">
+      <button class="close-btn" id="nodeDetailClose">&times;</button>
+      <h3 id="ndName"></h3>
+      <div id="ndStats"></div>
+      <div class="nd-events" id="ndEvents"></div>
+    </div>
+  </div>
+  <div class="side-panel">
+    <div class="replay-controls" id="replayControls" style="display:none">
+      <button id="btnFirst" title="First">|&#9664;</button>
+      <button id="btnPrev" title="Previous">&#9664;</button>
+      <button id="btnPlay" title="Play">&#9654;</button>
+      <button id="btnNext" title="Next">&#9654;</button>
+      <button id="btnLast" title="Last">&#9654;|</button>
+      <input type="range" id="replaySlider" min="0" max="0" value="0">
+      <span class="replay-pos" id="replayPos">0/0</span>
+      <span class="speed-group">
+        <input type="number" id="speedInput" value="100" min="10" max="2000" step="10">
+        <label>ms/event</label>
+      </span>
+    </div>
+    <div class="tab-bar">
+      <button class="tab-btn active" data-tab="replay">Replay</button>
+      <button class="tab-btn" data-tab="analytics">Analytics</button>
+    </div>
+    <div class="tab-content active" id="tab-replay">
+      <div class="stats-panel">
+        <h2>Stats</h2>
+        <div class="stats-grid">
+          <div class="stat-item"><div class="stat-value" id="statNodes">0</div><div class="stat-label">Nodes</div></div>
+          <div class="stat-item"><div class="stat-value" id="statEdges">0</div><div class="stat-label">Edges</div></div>
+          <div class="stat-item"><div class="stat-value" id="statMessages">0</div><div class="stat-label">Messages</div></div>
+          <div class="stat-item"><div class="stat-value" id="statRound">0/0</div><div class="stat-label">Round</div></div>
+        </div>
+      </div>
+      <div class="worker-panel">
+        <h2>Worker Logs</h2>
+        <div class="worker-columns" id="workerColumns"></div>
+      </div>
+      <div class="event-panel">
+        <h2>Event Log</h2>
+        <div class="event-table-wrap" id="eventTableWrap">
+          <table>
+            <thead><tr><th>Seq</th><th>Round</th><th>Thread</th><th>Node</th><th>Event</th><th>Details</th></tr></thead>
+            <tbody id="eventTableBody"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="tab-content" id="tab-analytics">
+      <div class="analytics-scroll">
+        <div class="badge-grid" id="badgeGrid"></div>
+        <div class="chart-section" id="convSection">
+          <h3>Convergence Curve</h3>
+          <canvas id="convCanvas" height="180"></canvas>
+        </div>
+        <div class="chart-section" id="heatSection">
+          <h3>Propagation Heatmap</h3>
+          <div class="heatmap-wrap">
+            <canvas id="heatCanvas" height="250"></canvas>
+            <div class="heatmap-tooltip" id="heatTooltip"></div>
+          </div>
+        </div>
+        <div class="chart-section" id="loadSection">
+          <h3>Load Distribution</h3>
+          <canvas id="loadCanvas" height="150"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+const MAX_TABLE_ROWS = 2000;
+
+// ── Node data (indexed by integer) ────────────────────────────────
+let nodeNames = [];          // nodeNames[i] = "node_42"
+let nodeIdx = new Map();     // "node_42" -> 0
+let N = 0;
+let posX = new Float64Array(0);
+let posY = new Float64Array(0);
+
+// ── Edge data (flat typed arrays, sorted by appearance index) ─────
+let totalEdges = 0;
+let edgeSrc = new Int32Array(0);    // source node index
+let edgeDst = new Int32Array(0);    // dest node index
+let edgeAppear = new Int32Array(0); // appearance event index (-1 = initial)
+let visEdges = 0;                   // edges[0..visEdges-1] are visible
+
+// ── Flash state (at most 1 node + 1 edge at a time) ──────────────
+let flashNode = -1, flashNodeT = 0;
+let flashSrc = -1, flashDst = -1, flashEdgeT = 0;
+
+// ── Events & replay ──────────────────────────────────────────────
+let allEvents = [];
+let replayCursor = 0;
+let workerLogs = {};
+let lastTablePos = -1, lastWorkerPos = -1;
+
+// ── Analytics data ───────────────────────────────────────────────
+let snapRounds = [];         // unique tick numbers that have snapshots
+let snapEntries = [];        // snapEntries[roundIdx][nodeIdx] = entry count
+let snapPeerCount = [];      // snapPeerCount[roundIdx][nodeIdx] = peer count
+let totalKeys = 0;           // max entries seen across all snapshots
+let numRounds = 0;           // total rounds from trace
+
+let metricPushesSent = new Int32Array(0);
+let metricPushesRecv = new Int32Array(0);
+let metricRedundant = 0;
+let metricTotalPushes = 0;
+let metricNoPeers = 0;
+
+// cumulative push-recv per round: cumulPushRecv[roundIdx][nodeIdx]
+let cumulPushRecv = [];
+// round number for each event index: eventRoundIdx[evtIdx] = roundIdx into snapRounds
+let eventRoundMap = [];      // eventRoundMap[evtIdx] = tick
+
+// ── Distribution-specific state ────────────────────────────────
+let isDist = false;
+let snapMembers = [];    // snapMembers[roundIdx] = Int32Array(N) — member_count
+let snapRegistry = [];   // snapRegistry[roundIdx] = Int32Array(N) — registry_size
+let snapCache = [];      // snapCache[roundIdx] = Int32Array(N) — cache_size
+let snapAlive = [];      // snapAlive[roundIdx] = Uint8Array(N) — is_alive
+let snapRouting = [];    // snapRouting[roundIdx] = Int32Array(N) — routing_table_size
+let snapRepair = [];     // snapRepair[roundIdx] = Int32Array(N) — repair_queue_size
+let snapDirectory = [];  // snapDirectory[roundIdx] = Int32Array(N) — directory_entry_count
+let snapTombstone = [];  // snapTombstone[roundIdx] = Int32Array(N) — registry_tombstone_count
+
+// ── Community detection ──────────────────────────────────────────
+let community = new Int32Array(0);  // community[nodeIdx] = community id
+let numCommunities = 0;
+let communityHulls = [];   // communityHulls[cid] = [[x,y], ...]
+let communityColors = ['#6366f1','#22c55e','#f59e0b','#ef4444','#3b82f6','#a855f7','#ec4899','#14b8a6'];
+
+// ── View transform ───────────────────────────────────────────────
+let vx = 0, vy = 0, vs = 1; // view x, y, scale
+let isDragging = false, dragX = 0, dragY = 0, dragVx = 0, dragVy = 0;
+
+// ── Tab switching ────────────────────────────────────────────────
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+    btn.classList.add('active');
+    document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
+    if (btn.dataset.tab === 'analytics') drawAllCharts();
+  });
+});
+
+// ── Quadtree pool (flat Float64Array, reused across iterations) ──
+// Per node: [ox, oy, size, cx, cy, mass, c0, c1, c2, c3, body]
+const QF = 11;
+let qt = new Float64Array(0);
+let qtN = 0;
+let _fx = 0, _fy = 0; // force accumulator (avoids object alloc)
+
+let layoutAbortFlag = false;
+
+// ── Canvas ───────────────────────────────────────────────────────
+const canvas = document.getElementById('graphCanvas');
+const ctx2d = canvas.getContext('2d');
+
+function resizeCanvas() {
+  const r = canvas.parentElement.getBoundingClientRect();
+  canvas.width = r.width * devicePixelRatio;
+  canvas.height = r.height * devicePixelRatio;
+  canvas.style.width = r.width + 'px';
+  canvas.style.height = r.height + 'px';
+}
+window.addEventListener('resize', () => { resizeCanvas(); drawGraph(); });
+
+// ── Zoom & pan ───────────────────────────────────────────────────
+canvas.addEventListener('wheel', (e) => {
+  e.preventDefault();
+  const r = canvas.getBoundingClientRect();
+  const mx = e.clientX - r.left, my = e.clientY - r.top;
+  const f = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+  const ns = Math.max(0.05, Math.min(5, vs * f));
+  const ratio = ns / vs;
+  vx = mx - (mx - vx) * ratio;
+  vy = my - (my - vy) * ratio;
+  vs = ns;
+  drawGraph();
+}, { passive: false });
+
+let clickStartX = 0, clickStartY = 0;
+canvas.addEventListener('mousedown', (e) => {
+  if (e.button !== 0) return;
+  isDragging = true;
+  dragX = e.clientX; dragY = e.clientY;
+  clickStartX = e.clientX; clickStartY = e.clientY;
+  dragVx = vx; dragVy = vy;
+  canvas.style.cursor = 'grabbing';
+});
+window.addEventListener('mousemove', (e) => {
+  if (!isDragging) return;
+  vx = dragVx + (e.clientX - dragX);
+  vy = dragVy + (e.clientY - dragY);
+  drawGraph();
+});
+window.addEventListener('mouseup', (e) => {
+  if (isDragging) {
+    const wasDrag = Math.abs(e.clientX - clickStartX) > 3 || Math.abs(e.clientY - clickStartY) > 3;
+    isDragging = false; canvas.style.cursor = '';
+    if (!wasDrag) handleNodeClick(e);
+  }
+});
+canvas.addEventListener('dblclick', () => { resetView(); drawGraph(); });
+
+function resetView() {
+  if (N === 0) { vx = 0; vy = 0; vs = 1; return; }
+  const r = canvas.parentElement.getBoundingClientRect();
+  const w = r.width, h = r.height;
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (let i = 0; i < N; i++) {
+    if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
+    if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
+  }
+  if (!isFinite(x0)) { vx = 0; vy = 0; vs = 1; return; }
+  const pad = 40;
+  vs = Math.min(w / (x1 - x0 + pad * 2), h / (y1 - y0 + pad * 2), 2);
+  vx = (w - (x0 + x1) * vs) / 2;
+  vy = (h - (y0 + y1) * vs) / 2;
+}
+
+// ── Quadtree (flat array, zero-alloc per iteration) ──────────────
+function qtAlloc(ox, oy, sz) {
+  if (qtN * QF >= qt.length) {
+    const nq = new Float64Array(Math.max(qt.length * 2, 256 * QF));
+    nq.set(qt); qt = nq;
+  }
+  const i = qtN++, o = i * QF;
+  qt[o]=ox; qt[o+1]=oy; qt[o+2]=sz;
+  qt[o+3]=0; qt[o+4]=0; qt[o+5]=0;
+  qt[o+6]=-1; qt[o+7]=-1; qt[o+8]=-1; qt[o+9]=-1;
+  qt[o+10]=-1;
+  return i;
+}
+
+function qtBuild() {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (let i = 0; i < N; i++) {
+    if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
+    if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
+  }
+  const sz = Math.max(x1 - x0, y1 - y0, 1) + 2;
+  qtN = 0;
+  qtAlloc(x0 - 1, y0 - 1, sz);
+  for (let i = 0; i < N; i++) qtIns(0, i, posX[i], posY[i]);
+}
+
+function qtIns(ni, bi, bx, by) {
+  const o = ni * QF;
+  if (qt[o+5] === 0) {
+    qt[o+3] = bx; qt[o+4] = by; qt[o+5] = 1; qt[o+10] = bi;
+    return;
+  }
+  if (qt[o+10] >= 0) {
+    if (qt[o+2] < 0.001) { qt[o+5]++; return; } // cell too small, just accumulate
+    const eb = qt[o+10], ex = qt[o+3], ey = qt[o+4];
+    qt[o+10] = -1;
+    qtInsChild(ni, eb, ex, ey);
+  }
+  const m = qt[o+5];
+  qt[o+3] = (qt[o+3]*m + bx) / (m+1);
+  qt[o+4] = (qt[o+4]*m + by) / (m+1);
+  qt[o+5] = m + 1;
+  qtInsChild(ni, bi, bx, by);
+}
+
+function qtInsChild(ni, bi, bx, by) {
+  const o = ni * QF, hs = qt[o+2] / 2;
+  const mx = qt[o] + hs, my = qt[o+1] + hs;
+  const qx = bx < mx ? 0 : 1, qy = by < my ? 0 : 1;
+  const ci = o + 6 + qy * 2 + qx;
+  if (qt[ci] < 0) qt[ci] = qtAlloc(qx ? mx : qt[o], qy ? my : qt[o+1], hs);
+  qtIns(qt[ci], bi, bx, by);
+}
+
+function qtCalc(ni, px, py, k2, th2) {
+  if (ni < 0) return;
+  const o = ni * QF;
+  if (qt[o+5] === 0) return;
+  const dx = qt[o+3] - px, dy = qt[o+4] - py;
+  let d2 = dx*dx + dy*dy;
+  if (d2 < 0.0001) d2 = 0.0001;
+  if (qt[o+10] >= 0 || qt[o+2]*qt[o+2]/d2 < th2) {
+    const d = Math.sqrt(d2), f = -(k2 * qt[o+5]) / d2;
+    _fx += (dx/d)*f; _fy += (dy/d)*f;
+    return;
+  }
+  for (let c = 6; c < 10; c++) if (qt[o+c] >= 0) qtCalc(qt[o+c], px, py, k2, th2);
+}
+
+// ── Force layout ─────────────────────────────────────────────────
+function initPositions() {
+  const r = canvas.parentElement.getBoundingClientRect();
+  const cx = r.width / 2, cy = r.height / 2;
+  const rad = Math.min(cx, cy) * 0.7;
+  for (let i = 0; i < N; i++) {
+    const a = (2 * Math.PI * i) / N - Math.PI / 2;
+    posX[i] = cx + rad * Math.cos(a);
+    posY[i] = cy + rad * Math.sin(a);
+  }
+}
+
+function runForceLayout(w, h) {
+  return new Promise(resolve => {
+    layoutAbortFlag = false;
+    const cx = w/2, cy = h/2;
+    const k = Math.sqrt(w*h / Math.max(N, 1)), k2 = k*k;
+    const totalIters = Math.min(300, Math.max(50, Math.floor(40000 / Math.max(N, 1))));
+    const CHUNK = 50, useBH = N > 100, th2 = 0.64;
+    const dx = new Float64Array(N), dy = new Float64Array(N);
+    const progressEl = document.getElementById('layoutProgress');
+    const fillEl = document.getElementById('layoutProgressFill');
+    if (N > 50) { progressEl.style.display = 'block'; fillEl.style.width = '0%'; }
+    let iter = 0;
+
+    function doChunk() {
+      if (layoutAbortFlag) { progressEl.style.display = 'none'; resolve(); return; }
+      const end = Math.min(iter + CHUNK, totalIters);
+      for (; iter < end; iter++) {
+        dx.fill(0); dy.fill(0);
+
+        if (useBH) {
+          qtBuild();
+          for (let i = 0; i < N; i++) {
+            _fx = 0; _fy = 0;
+            qtCalc(0, posX[i], posY[i], k2, th2);
+            dx[i] += _fx; dy[i] += _fy;
+          }
+        } else {
+          for (let i = 0; i < N; i++) for (let j = i+1; j < N; j++) {
+            let ddx = posX[i]-posX[j], ddy = posY[i]-posY[j];
+            let dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
+            let f = k2/dist, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
+            dx[i] += fx; dy[i] += fy; dx[j] -= fx; dy[j] -= fy;
+          }
+        }
+
+        for (let i = 0; i < visEdges; i++) {
+          const si = edgeSrc[i], di = edgeDst[i];
+          let ddx = posX[si]-posX[di], ddy = posY[si]-posY[di];
+          let dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
+          let f = (dist*dist)/k, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
+          dx[si] -= fx; dy[si] -= fy; dx[di] += fx; dy[di] += fy;
+        }
+
+        for (let i = 0; i < N; i++) {
+          dx[i] -= (posX[i]-cx)*0.01; dy[i] -= (posY[i]-cy)*0.01;
+        }
+
+        const temp = Math.max(0.1, 1 - iter/totalIters);
+        for (let i = 0; i < N; i++) {
+          let dist = Math.sqrt(dx[i]*dx[i] + dy[i]*dy[i]) || 0.01;
+          let cap = Math.min(dist, 10*temp);
+          posX[i] += (dx[i]/dist)*cap; posY[i] += (dy[i]/dist)*cap;
+          posX[i] = Math.max(40, Math.min(w-40, posX[i]));
+          posY[i] = Math.max(40, Math.min(h-40, posY[i]));
+        }
+      }
+      fillEl.style.width = Math.round(100*iter/totalIters) + '%';
+      if (iter < totalIters) { drawGraph(); setTimeout(doChunk, 0); }
+      else { progressEl.style.display = 'none'; resetView(); drawGraph(); resolve(); }
+    }
+    doChunk();
+  });
+}
+
+// ── Node click → detail panel ────────────────────────────────────
+function handleNodeClick(e) {
+  const r = canvas.getBoundingClientRect();
+  const mx = e.clientX - r.left, my = e.clientY - r.top;
+  const wx = (mx - vx) / vs, wy = (my - vy) / vs;
+  const baseR = Math.max(2, Math.min(8, 400/Math.sqrt(Math.max(N, 1))));
+  const hitR = baseR * 2;
+  let best = -1, bestD = hitR * hitR;
+  for (let i = 0; i < N; i++) {
+    const dx = posX[i] - wx, dy = posY[i] - wy;
+    const d2 = dx*dx + dy*dy;
+    if (d2 < bestD) { bestD = d2; best = i; }
+  }
+  const panel = document.getElementById('nodeDetail');
+  if (best < 0) { panel.style.display = 'none'; return; }
+  showNodeDetail(best);
+}
+
+function showNodeDetail(ni) {
+  const panel = document.getElementById('nodeDetail');
+  document.getElementById('ndName').textContent = nodeNames[ni];
+
+  // Find current round from replay position
+  let curRound = 0;
+  if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
+
+  // Key count from latest snapshot ≤ current round
+  let keyCount = 0, peerCount = 0;
+  for (let r = snapRounds.length - 1; r >= 0; r--) {
+    if (snapRounds[r] <= curRound) { keyCount = snapEntries[r][ni] || 0; peerCount = snapPeerCount[r][ni] || 0; break; }
+  }
+
+  let html = '';
+  if (isDist) {
+    // Find latest distribution snapshot for this node
+    let snap = null;
+    for (let r = snapRounds.length - 1; r >= 0; r--) {
+      if (snapRounds[r] <= curRound) {
+        snap = {
+          members: snapMembers[r][ni] || 0,
+          registry: snapRegistry[r][ni] || 0,
+          cache: snapCache[r][ni] || 0,
+          alive: snapAlive[r][ni],
+          routing: snapRouting[r][ni] || 0,
+          repair: snapRepair[r][ni] || 0,
+          directory: snapDirectory[r][ni] || 0,
+          tombstones: snapTombstone[r][ni] || 0,
+        };
+        break;
+      }
+    }
+    if (snap) {
+      html += '<div class="nd-row"><span class="nd-key">Status</span><span class="nd-val" style="color:' + (snap.alive ? '#22c55e' : '#ef4444') + '">' + (snap.alive ? 'Alive' : 'Dead') + '</span></div>';
+      html += '<div class="nd-row"><span class="nd-key">Members</span><span class="nd-val">' + snap.members + '</span></div>';
+      html += '<div class="nd-row"><span class="nd-key">Routing Table</span><span class="nd-val">' + snap.routing + '</span></div>';
+      html += '<div class="nd-row"><span class="nd-key">Directory</span><span class="nd-val">' + snap.directory + '</span></div>';
+      html += '<div class="nd-row"><span class="nd-key">Cache</span><span class="nd-val">' + snap.cache + '</span></div>';
+      html += '<div class="nd-row"><span class="nd-key">Registry</span><span class="nd-val">' + snap.registry + '</span></div>';
+      html += '<div class="nd-row"><span class="nd-key">Tombstones</span><span class="nd-val">' + snap.tombstones + '</span></div>';
+      html += '<div class="nd-row"><span class="nd-key">Repair Queue</span><span class="nd-val">' + snap.repair + '</span></div>';
+    }
+  } else {
+    html += '<div class="nd-row"><span class="nd-key">Community</span><span class="nd-val">' + (community[ni] !== undefined ? community[ni] : '-') + '</span></div>';
+    html += '<div class="nd-row"><span class="nd-key">Pushes Sent</span><span class="nd-val">' + (metricPushesSent[ni] || 0) + '</span></div>';
+    html += '<div class="nd-row"><span class="nd-key">Pushes Recv</span><span class="nd-val">' + (metricPushesRecv[ni] || 0) + '</span></div>';
+    html += '<div class="nd-row"><span class="nd-key">Keys</span><span class="nd-val">' + keyCount + '/' + totalKeys + '</span></div>';
+    html += '<div class="nd-row"><span class="nd-key">Peers</span><span class="nd-val">' + peerCount + '</span></div>';
+  }
+  document.getElementById('ndStats').innerHTML = html;
+
+  // Mini event log: last 20 events for this node up to cursor
+  const name = nodeNames[ni];
+  let evHtml = '<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Recent events:</div>';
+  let count = 0;
+  for (let i = Math.min(replayCursor, allEvents.length) - 1; i >= 0 && count < 20; i--) {
+    if (allEvents[i].node === name) {
+      evHtml += '<div class="nd-ev">' + allEvents[i].kind + (allEvents[i].detail ? ': ' + formatDetail(allEvents[i].kind, allEvents[i].detail).replace(/&[lr]arr;/g, '→') : '') + '</div>';
+      count++;
+    }
+  }
+  document.getElementById('ndEvents').innerHTML = evHtml;
+
+  panel.style.display = 'block';
+}
+
+document.getElementById('nodeDetailClose').addEventListener('click', () => {
+  document.getElementById('nodeDetail').style.display = 'none';
+});
+
+// ── Community detection (BFS on visible edges) ──────────────────
+function detectCommunities() {
+  community = new Int32Array(N).fill(-1);
+  numCommunities = 0;
+  const adj = new Array(N);
+  for (let i = 0; i < N; i++) adj[i] = [];
+  for (let i = 0; i < totalEdges; i++) {
+    adj[edgeSrc[i]].push(edgeDst[i]);
+    adj[edgeDst[i]].push(edgeSrc[i]);
+  }
+  const queue = [];
+  for (let i = 0; i < N; i++) {
+    if (community[i] >= 0) continue;
+    const cid = numCommunities++;
+    community[i] = cid;
+    queue.push(i);
+    while (queue.length > 0) {
+      const u = queue.pop();
+      for (const v of adj[u]) {
+        if (community[v] < 0) { community[v] = cid; queue.push(v); }
+      }
+    }
+  }
+}
+
+// ── Convex hull (Graham scan) ───────────────────────────────────
+function convexHull(points) {
+  if (points.length < 3) return points.slice();
+  points.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+  const cross = (o, a, b) => (a[0]-o[0])*(b[1]-o[1]) - (a[1]-o[1])*(b[0]-o[0]);
+  const lower = [];
+  for (const p of points) {
+    while (lower.length >= 2 && cross(lower[lower.length-2], lower[lower.length-1], p) <= 0) lower.pop();
+    lower.push(p);
+  }
+  const upper = [];
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i];
+    while (upper.length >= 2 && cross(upper[upper.length-2], upper[upper.length-1], p) <= 0) upper.pop();
+    upper.push(p);
+  }
+  lower.pop(); upper.pop();
+  return lower.concat(upper);
+}
+
+function computeCommunityHulls() {
+  communityHulls = [];
+  for (let c = 0; c < numCommunities; c++) {
+    const pts = [];
+    for (let i = 0; i < N; i++) {
+      if (community[i] === c) pts.push([posX[i], posY[i]]);
+    }
+    communityHulls.push(pts.length >= 3 ? convexHull(pts) : pts);
+  }
+}
+
+// ── Analytics charts ────────────────────────────────────────────
+function drawAllCharts() {
+  drawBadges();
+  drawConvergenceChart();
+  drawHeatmap();
+  drawLoadHistogram();
+}
+
+function drawBadges() {
+  const grid = document.getElementById('badgeGrid');
+
+  if (isDist) {
+    const hasSnaps = snapRounds.length > 0;
+    const lastRound = hasSnaps ? snapRounds.length - 1 : -1;
+
+    // Alive count
+    let aliveCount = N;
+    if (lastRound >= 0) {
+      aliveCount = 0;
+      for (let i = 0; i < N; i++) if (snapAlive[lastRound][i]) aliveCount++;
+    }
+
+    // Membership accuracy: fraction of alive nodes with correct member_count
+    let memAccuracy = 1.0;
+    if (lastRound >= 0) {
+      let correct = 0, alive = 0;
+      for (let i = 0; i < N; i++) {
+        if (!snapAlive[lastRound][i]) continue;
+        alive++;
+        if (snapMembers[lastRound][i] >= aliveCount - 1) correct++;
+      }
+      memAccuracy = alive > 0 ? correct / alive : 1;
+    }
+
+    // Registry max
+    let maxReg = 0;
+    if (lastRound >= 0) {
+      for (let i = 0; i < N; i++) if (snapRegistry[lastRound][i] > maxReg) maxReg = snapRegistry[lastRound][i];
+    }
+
+    // Cache total
+    let totalCache = 0;
+    if (lastRound >= 0) {
+      for (let i = 0; i < N; i++) if (snapAlive[lastRound][i]) totalCache += snapCache[lastRound][i];
+    }
+
+    // Repair queue total
+    let totalRepair = 0;
+    if (lastRound >= 0) {
+      for (let i = 0; i < N; i++) if (snapAlive[lastRound][i]) totalRepair += snapRepair[lastRound][i];
+    }
+
+    const memColor = memAccuracy >= 0.99 ? 'green' : memAccuracy >= 0.8 ? 'yellow' : 'red';
+    const aliveColor = aliveCount === N ? 'green' : aliveCount >= N * 0.8 ? 'yellow' : 'red';
+
+    grid.innerHTML =
+      badge(aliveColor, aliveCount + '/' + N, 'Alive Nodes') +
+      badge(memColor, (memAccuracy * 100).toFixed(0) + '%', 'Membership') +
+      badge('', maxReg, 'Registry Size') +
+      badge('', totalCache, 'Cache Total') +
+      badge(totalRepair > 0 ? 'yellow' : 'green', totalRepair, 'Repair Queue') +
+      badge('', allEvents.length, 'Events');
+    return;
+  }
+
+  const hasSnaps = snapRounds.length > 0;
+
+  // Delivery ratio
+  let delivery = 1.0;
+  if (hasSnaps) {
+    const last = snapEntries[snapEntries.length - 1];
+    let full = 0;
+    for (let i = 0; i < N; i++) if (last[i] >= totalKeys && totalKeys > 0) full++;
+    delivery = N > 0 ? full / N : 1;
+  }
+
+  // Convergence round
+  let convRound = hasSnaps ? -1 : 0;
+  if (hasSnaps && totalKeys > 0) {
+    for (let r = 0; r < snapRounds.length; r++) {
+      let allFull = true;
+      for (let i = 0; i < N; i++) { if (snapEntries[r][i] < totalKeys) { allFull = false; break; } }
+      if (allFull) { convRound = snapRounds[r]; break; }
+    }
+  }
+
+  // Redundancy
+  const redundancy = metricTotalPushes > 0 ? metricRedundant / metricTotalPushes : 0;
+
+  // Load balance CV
+  let mean = 0, variance = 0;
+  if (N > 0) {
+    for (let i = 0; i < N; i++) mean += metricPushesRecv[i];
+    mean /= N;
+    for (let i = 0; i < N; i++) { const d = metricPushesRecv[i] - mean; variance += d * d; }
+    variance /= N;
+  }
+  const cv = mean > 0 ? Math.sqrt(variance) / mean : 0;
+
+  // Amplification
+  const amp = N > 0 ? metricTotalPushes / N : 0;
+
+  const logN = N > 1 ? Math.log2(N) : 1;
+  const delColor = delivery >= 0.99 ? 'green' : delivery >= 0.9 ? 'yellow' : 'red';
+  const convColor = convRound < 0 ? 'red' : convRound <= 2 * logN ? 'green' : convRound <= 3 * logN ? 'yellow' : 'red';
+  const redColor = redundancy < 0.2 ? 'green' : redundancy < 0.4 ? 'yellow' : 'red';
+  const cvColor = cv < 0.3 ? 'green' : cv < 0.6 ? 'yellow' : 'red';
+
+  grid.innerHTML =
+    badge(delColor, (delivery * 100).toFixed(1) + '%', 'Delivery') +
+    badge(convColor, convRound < 0 ? 'Never' : 'Round ' + convRound, 'Convergence') +
+    badge(redColor, (redundancy * 100).toFixed(1) + '%', 'Redundancy') +
+    badge(cvColor, 'CV ' + cv.toFixed(2), 'Load Balance') +
+    badge('', metricTotalPushes.toLocaleString(), 'Total Pushes') +
+    badge('', amp.toFixed(2) + '\u00d7', 'Amplification');
+}
+
+function badge(color, val, label) {
+  return '<div class="badge ' + color + '"><div class="badge-val">' + val + '</div><div class="badge-lbl">' + label + '</div></div>';
+}
+
+function drawConvergenceChart() {
+  const cv = document.getElementById('convCanvas');
+  if (!snapRounds.length || totalKeys === 0) {
+    cv.style.display = 'none';
+    const sec = document.getElementById('convSection');
+    if (!sec.querySelector('.chart-empty')) { const d = document.createElement('div'); d.className = 'chart-empty'; d.textContent = 'No snapshot data'; sec.appendChild(d); }
+    return;
+  }
+  cv.style.display = 'block';
+  const sec = document.getElementById('convSection');
+  const emp = sec.querySelector('.chart-empty');
+  if (emp) emp.remove();
+
+  const dpr = devicePixelRatio;
+  const w = cv.parentElement.clientWidth, h = 180;
+  cv.width = w * dpr; cv.height = h * dpr;
+  cv.style.width = w + 'px'; cv.style.height = h + 'px';
+  const c = cv.getContext('2d');
+  c.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+  const pad = { l: 45, r: 12, t: 12, b: 28 };
+  const cw = w - pad.l - pad.r, ch = h - pad.t - pad.b;
+  const maxRound = snapRounds[snapRounds.length - 1] || 1;
+
+  // Background
+  c.fillStyle = '#1a1d2e'; c.fillRect(0, 0, w, h);
+
+  // Grid
+  c.strokeStyle = '#2a2d3a'; c.lineWidth = 1;
+  for (let pct = 0; pct <= 100; pct += 25) {
+    const y = pad.t + ch * (1 - pct / 100);
+    c.beginPath(); c.moveTo(pad.l, y); c.lineTo(pad.l + cw, y); c.stroke();
+  }
+
+  // Compute data points
+  const pts = [];
+  if (isDist) {
+    // Membership convergence: fraction of alive nodes with correct member count per round
+    for (let r = 0; r < snapRounds.length; r++) {
+      let alive = 0, correct = 0;
+      let aliveCount = 0;
+      for (let i = 0; i < N; i++) if (snapAlive[r][i]) aliveCount++;
+      for (let i = 0; i < N; i++) {
+        if (!snapAlive[r][i]) continue;
+        alive++;
+        if (snapMembers[r][i] >= aliveCount - 1) correct++;
+      }
+      pts.push({ round: snapRounds[r], pct: alive > 0 ? correct / alive * 100 : 0 });
+    }
+  } else {
+    // existing gossip convergence
+    for (let r = 0; r < snapRounds.length; r++) {
+      let full = 0;
+      for (let i = 0; i < N; i++) if (snapEntries[r][i] >= totalKeys) full++;
+      pts.push({ round: snapRounds[r], pct: N > 0 ? full / N * 100 : 0 });
+    }
+  }
+
+  // Draw fill
+  c.beginPath();
+  c.moveTo(pad.l, pad.t + ch);
+  for (const p of pts) {
+    const x = pad.l + (p.round / maxRound) * cw;
+    const y = pad.t + ch * (1 - p.pct / 100);
+    c.lineTo(x, y);
+  }
+  c.lineTo(pad.l + (pts[pts.length-1].round / maxRound) * cw, pad.t + ch);
+  c.closePath();
+  c.fillStyle = 'rgba(99,102,241,0.2)'; c.fill();
+
+  // Draw line
+  c.beginPath();
+  for (let i = 0; i < pts.length; i++) {
+    const x = pad.l + (pts[i].round / maxRound) * cw;
+    const y = pad.t + ch * (1 - pts[i].pct / 100);
+    i === 0 ? c.moveTo(x, y) : c.lineTo(x, y);
+  }
+  c.strokeStyle = '#6366f1'; c.lineWidth = 2; c.stroke();
+
+  // Current replay round marker
+  let curRound = 0;
+  if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
+  const mx = pad.l + (curRound / maxRound) * cw;
+  c.setLineDash([4, 3]); c.strokeStyle = '#f59e0b'; c.lineWidth = 1;
+  c.beginPath(); c.moveTo(mx, pad.t); c.lineTo(mx, pad.t + ch); c.stroke();
+  c.setLineDash([]);
+
+  // Axes labels
+  c.fillStyle = '#6b7280'; c.font = '10px system-ui,sans-serif';
+  c.textAlign = 'right';
+  for (let pct = 0; pct <= 100; pct += 25) {
+    c.fillText(pct + '%', pad.l - 4, pad.t + ch * (1 - pct / 100) + 3);
+  }
+  c.textAlign = 'center';
+  const step = Math.max(1, Math.ceil(maxRound / 8));
+  for (let r = 0; r <= maxRound; r += step) {
+    c.fillText(r, pad.l + (r / maxRound) * cw, h - 6);
+  }
+}
+
+function drawHeatmap() {
+  const cv = document.getElementById('heatCanvas');
+  const tooltip = document.getElementById('heatTooltip');
+  if (!snapRounds.length || totalKeys === 0) {
+    cv.style.display = 'none';
+    const sec = document.getElementById('heatSection');
+    if (!sec.querySelector('.chart-empty')) { const d = document.createElement('div'); d.className = 'chart-empty'; d.textContent = 'No snapshot data'; sec.appendChild(d); }
+    return;
+  }
+  cv.style.display = 'block';
+  const sec = document.getElementById('heatSection');
+  const emp = sec.querySelector('.chart-empty');
+  if (emp) emp.remove();
+
+  const dpr = devicePixelRatio;
+  const w = cv.parentElement.clientWidth;
+  const padL = 60, padR = 8, padT = 4, padB = 24;
+  const cols = snapRounds.length, rows = N;
+  const cellW = Math.max(1, Math.floor((w - padL - padR) / Math.max(cols, 1)));
+  const cellH = N <= 50 ? 14 : Math.max(1, Math.min(4, Math.floor(220 / N)));
+  const h = padT + rows * cellH + padB;
+  cv.width = w * dpr; cv.height = h * dpr;
+  cv.style.width = w + 'px'; cv.style.height = h + 'px';
+  const c = cv.getContext('2d');
+  c.setTransform(dpr, 0, 0, dpr, 0, 0);
+  c.fillStyle = '#1a1d2e'; c.fillRect(0, 0, w, h);
+
+  // Sort nodes by name
+  const sortedIdx = Array.from({length: N}, (_, i) => i);
+  sortedIdx.sort((a, b) => nodeNames[a].localeCompare(nodeNames[b]));
+
+  // Draw cells
+  for (let ri = 0; ri < rows; ri++) {
+    const ni = sortedIdx[ri];
+    for (let ci = 0; ci < cols; ci++) {
+      const frac = totalKeys > 0 ? (snapEntries[ci][ni] || 0) / totalKeys : 0;
+      const g = Math.round(frac * 200);
+      c.fillStyle = 'rgb(' + (255 - g) + ',' + (255 - Math.round(frac * 55)) + ',' + (255 - g) + ')';
+      if (frac > 0) c.fillStyle = 'rgb(' + Math.round(30 + (1-frac)*225) + ',' + Math.round(80 + (1-frac)*175) + ',' + Math.round(30 + (1-frac)*225) + ')';
+      else c.fillStyle = '#2a2d3a';
+      c.fillRect(padL + ci * cellW, padT + ri * cellH, cellW - (cellW > 2 ? 1 : 0), cellH - (cellH > 2 ? 1 : 0));
+    }
+  }
+
+  // Node labels (only if space)
+  if (cellH >= 10) {
+    c.fillStyle = '#9ca3af'; c.font = '9px system-ui,sans-serif'; c.textAlign = 'right';
+    for (let ri = 0; ri < rows; ri++) {
+      c.fillText(nodeNames[sortedIdx[ri]], padL - 3, padT + ri * cellH + cellH - 2);
+    }
+  }
+
+  // Round labels
+  c.fillStyle = '#6b7280'; c.font = '9px system-ui,sans-serif'; c.textAlign = 'center';
+  const labelStep = Math.max(1, Math.ceil(cols / 10));
+  for (let ci = 0; ci < cols; ci += labelStep) {
+    c.fillText(snapRounds[ci], padL + ci * cellW + cellW / 2, h - 6);
+  }
+
+  // Current round marker
+  let curRound = 0;
+  if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
+  let markerCol = 0;
+  for (let ci = 0; ci < cols; ci++) { if (snapRounds[ci] <= curRound) markerCol = ci; }
+  const mx = padL + markerCol * cellW + cellW / 2;
+  c.setLineDash([3, 2]); c.strokeStyle = '#f59e0b'; c.lineWidth = 1;
+  c.beginPath(); c.moveTo(mx, padT); c.lineTo(mx, padT + rows * cellH); c.stroke();
+  c.setLineDash([]);
+
+  // Hover tooltip
+  cv.onmousemove = (e) => {
+    const rect = cv.getBoundingClientRect();
+    const ex = e.clientX - rect.left, ey = e.clientY - rect.top;
+    const col = Math.floor((ex - padL) / cellW);
+    const row = Math.floor((ey - padT) / cellH);
+    if (col >= 0 && col < cols && row >= 0 && row < rows) {
+      const ni = sortedIdx[row];
+      const entries = snapEntries[col][ni] || 0;
+      const pct = totalKeys > 0 ? Math.round(entries / totalKeys * 100) : 0;
+      // Tooltip text depends on trace type
+      if (isDist) {
+        tooltip.textContent = nodeNames[ni] + ' at round ' + snapRounds[col] + ': registry ' + entries;
+      } else {
+        tooltip.textContent = nodeNames[ni] + ' at round ' + snapRounds[col] + ': ' + entries + '/' + totalKeys + ' keys (' + pct + '%)';
+      }
+      tooltip.style.display = 'block';
+      tooltip.style.left = (ex + 12) + 'px'; tooltip.style.top = (ey - 20) + 'px';
+    } else { tooltip.style.display = 'none'; }
+  };
+  cv.onmouseleave = () => { tooltip.style.display = 'none'; };
+}
+
+function drawLoadHistogram() {
+  const cv = document.getElementById('loadCanvas');
+  const dpr = devicePixelRatio;
+  const w = cv.parentElement.clientWidth, h = 150;
+  cv.width = w * dpr; cv.height = h * dpr;
+  cv.style.width = w + 'px'; cv.style.height = h + 'px';
+  const c = cv.getContext('2d');
+  c.setTransform(dpr, 0, 0, dpr, 0, 0);
+  c.fillStyle = '#1a1d2e'; c.fillRect(0, 0, w, h);
+
+  if (N === 0) return;
+
+  const pad = { l: 40, r: 8, t: 8, b: 24 };
+  const cw = w - pad.l - pad.r, ch = h - pad.t - pad.b;
+
+  // Get data up to current replay pos from cumulative
+  let data;
+  let curRound = 0;
+  if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
+
+  if (isDist) {
+    // Show cache size per node at current round
+    data = new Int32Array(N);
+    let bestR = -1;
+    for (let r = 0; r < snapRounds.length; r++) {
+      if (snapRounds[r] <= curRound) bestR = r;
+    }
+    if (bestR >= 0) {
+      for (let i = 0; i < N; i++) data[i] = snapCache[bestR][i];
+    }
+  } else {
+    // Find the closest round in cumulPushRecv
+    let bestR = -1;
+    for (let r = 0; r < snapRounds.length; r++) {
+      if (snapRounds[r] <= curRound) bestR = r;
+    }
+
+    if (bestR >= 0 && cumulPushRecv.length > bestR) {
+      data = cumulPushRecv[bestR];
+    } else {
+      data = metricPushesRecv; // fallback: total
+    }
+  }
+
+  // Compute stats
+  let maxVal = 0, mean = 0;
+  for (let i = 0; i < N; i++) { if (data[i] > maxVal) maxVal = data[i]; mean += data[i]; }
+  mean /= N;
+  if (maxVal === 0) maxVal = 1;
+  let std = 0;
+  for (let i = 0; i < N; i++) { const d = data[i] - mean; std += d * d; }
+  std = Math.sqrt(std / N);
+
+  // Bin for large N
+  const useBins = N > 100;
+  let barData, barCount;
+  if (useBins) {
+    barCount = Math.min(50, N);
+    barData = new Float64Array(barCount);
+    const binCounts = new Int32Array(barCount);
+    for (let i = 0; i < N; i++) {
+      const bin = Math.min(barCount - 1, Math.floor(i / N * barCount));
+      barData[bin] += data[i]; binCounts[bin]++;
+    }
+    for (let i = 0; i < barCount; i++) if (binCounts[i] > 0) barData[i] /= binCounts[i];
+    // Recompute max
+    maxVal = 0;
+    for (let i = 0; i < barCount; i++) if (barData[i] > maxVal) maxVal = barData[i];
+    if (maxVal === 0) maxVal = 1;
+  } else {
+    barCount = N;
+    barData = data;
+  }
+
+  const barW = Math.max(1, cw / barCount - (barCount < 50 ? 1 : 0));
+
+  for (let i = 0; i < barCount; i++) {
+    const val = barData[i];
+    const barH = (val / maxVal) * ch;
+    const dev = std > 0 ? Math.abs(val - mean) / std : 0;
+    // Color by deviation: green near mean, yellow moderate, red outlier
+    let r, g, b;
+    if (dev < 1) { r = 34; g = 197; b = 94; }
+    else if (dev < 2) { r = 245; g = 158; b = 11; }
+    else { r = 239; g = 68; b = 68; }
+    c.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
+    c.fillRect(pad.l + i * (cw / barCount), pad.t + ch - barH, barW, barH);
+  }
+
+  // Mean line
+  const meanY = pad.t + ch - (mean / maxVal) * ch;
+  c.setLineDash([4, 3]); c.strokeStyle = '#e0e0e0'; c.lineWidth = 1;
+  c.beginPath(); c.moveTo(pad.l, meanY); c.lineTo(pad.l + cw, meanY); c.stroke();
+  c.setLineDash([]);
+
+  // Labels
+  c.fillStyle = '#6b7280'; c.font = '10px system-ui,sans-serif';
+  c.textAlign = 'right';
+  c.fillText(maxVal, pad.l - 4, pad.t + 10);
+  c.fillText('0', pad.l - 4, pad.t + ch);
+  c.textAlign = 'left';
+  c.fillText('mean: ' + mean.toFixed(1), pad.l + 4, meanY - 4);
+  c.textAlign = 'center';
+  c.fillText(useBins ? 'nodes (binned)' : 'node index', pad.l + cw / 2, h - 4);
+}
+
+// ── Drawing ──────────────────────────────────────────────────────
+function drawGraph() {
+  const r = canvas.parentElement.getBoundingClientRect();
+  const w = r.width, h = r.height, dpr = devicePixelRatio, now = performance.now();
+
+  ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx2d.clearRect(0, 0, w, h);
+  ctx2d.setTransform(dpr*vs, 0, 0, dpr*vs, dpr*vx, dpr*vy);
+
+  // Viewport in world coordinates
+  const v0x = -vx/vs, v0y = -vy/vs, v1x = (w-vx)/vs, v1y = (h-vy)/vs;
+
+  // Adaptive sizing
+  const baseR = Math.max(2, Math.min(8, 400/Math.sqrt(Math.max(N, 1))));
+  const showStroke = N <= 200;
+
+  // Semantic zoom levels
+  const showHulls = vs < 0.5 && numCommunities > 1;
+  const showNodes = vs >= 0.2;
+  const showEdges = vs >= 0.2 && !(vs < 0.5 && N > 1000);
+  const showLabels = vs * baseR > 6;
+  const thickDetail = vs > 1.5;
+
+  // Flash state
+  const hasNodeFlash = flashNode >= 0 && now - flashNodeT < 400;
+  const hasEdgeFlash = flashSrc >= 0 && now - flashEdgeT < 600;
+
+  // ── Community hulls (zoomed out) ──
+  if (showHulls) {
+    for (let c = 0; c < numCommunities; c++) {
+      const hull = communityHulls[c];
+      if (!hull || hull.length < 2) continue;
+      const color = communityColors[c % communityColors.length];
+      // Expand hull slightly for padding
+      let cx = 0, cy = 0;
+      for (const p of hull) { cx += p[0]; cy += p[1]; }
+      cx /= hull.length; cy /= hull.length;
+      const pad = 20 / vs;
+
+      ctx2d.beginPath();
+      for (let i = 0; i < hull.length; i++) {
+        const dx = hull[i][0] - cx, dy = hull[i][1] - cy;
+        const d = Math.sqrt(dx*dx + dy*dy) || 1;
+        const px = hull[i][0] + dx/d * pad, py = hull[i][1] + dy/d * pad;
+        i === 0 ? ctx2d.moveTo(px, py) : ctx2d.lineTo(px, py);
+      }
+      ctx2d.closePath();
+      ctx2d.fillStyle = color + '18'; ctx2d.fill();
+      ctx2d.strokeStyle = color + '60'; ctx2d.lineWidth = 2/vs; ctx2d.stroke();
+
+      // Label
+      if (vs < 0.5) {
+        let count = 0;
+        for (let i = 0; i < N; i++) if (community[i] === c) count++;
+        ctx2d.fillStyle = color;
+        ctx2d.font = Math.max(12, 16/vs) + 'px system-ui,sans-serif';
+        ctx2d.textAlign = 'center';
+        ctx2d.fillText('Community ' + c + ' (' + count + ' nodes)', cx, cy);
+      }
+    }
+  }
+
+  // ── Edges ──
+  if (showEdges && !(vs < 0.15 && visEdges > 10000)) {
+    const baseAlpha = Math.min(0.25, 40/Math.sqrt(Math.max(visEdges, 1)));
+    let flashEdgeI = -1;
+
+    ctx2d.beginPath();
+    ctx2d.strokeStyle = 'rgba(99,102,241,' + baseAlpha + ')';
+    ctx2d.lineWidth = (thickDetail ? 1.5 : 1)/vs;
+    let batched = 0;
+
+    for (let i = 0; i < visEdges; i++) {
+      const si = edgeSrc[i], di = edgeDst[i];
+      const sx = posX[si], sy = posY[si], dx = posX[di], dy = posY[di];
+      if ((sx < v0x && dx < v0x) || (sx > v1x && dx > v1x) ||
+          (sy < v0y && dy < v0y) || (sy > v1y && dy > v1y)) continue;
+      if (hasEdgeFlash && si === flashSrc && di === flashDst) { flashEdgeI = i; continue; }
+      ctx2d.moveTo(sx, sy); ctx2d.lineTo(dx, dy); batched++;
+    }
+    if (batched > 0) ctx2d.stroke();
+
+    if (flashEdgeI >= 0) {
+      const si = edgeSrc[flashEdgeI], di = edgeDst[flashEdgeI];
+      const alpha = baseAlpha + (1-baseAlpha) * (1-(now-flashEdgeT)/600);
+      ctx2d.beginPath();
+      ctx2d.moveTo(posX[si], posY[si]); ctx2d.lineTo(posX[di], posY[di]);
+      ctx2d.strokeStyle = 'rgba(99,102,241,' + alpha + ')';
+      ctx2d.lineWidth = 2.5/vs;
+      ctx2d.stroke();
+    }
+  }
+
+  // ── Nodes ──
+  if (showNodes) {
+    let flashNodeI = -1;
+
+    if (isDist) {
+      // Distribution: color by alive/dead
+      let curRound = 0;
+      if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
+      let curAlive = null;
+      for (let r = snapRounds.length - 1; r >= 0; r--) {
+        if (snapRounds[r] <= curRound) { curAlive = snapAlive[r]; break; }
+      }
+
+      // Draw alive nodes
+      ctx2d.beginPath();
+      for (let i = 0; i < N; i++) {
+        const alive = curAlive ? curAlive[i] : 1;
+        if (!alive) continue;
+        const px = posX[i], py = posY[i];
+        if (px+baseR < v0x || px-baseR > v1x || py+baseR < v0y || py-baseR > v1y) continue;
+        if (hasNodeFlash && i === flashNode) { flashNodeI = i; continue; }
+        ctx2d.moveTo(px+baseR, py); ctx2d.arc(px, py, baseR, 0, 2*Math.PI);
+      }
+      ctx2d.fillStyle = '#22c55e'; ctx2d.fill();
+      if (showStroke) { ctx2d.strokeStyle = '#16a34a'; ctx2d.lineWidth = 1.5/vs; ctx2d.stroke(); }
+
+      // Draw dead nodes
+      ctx2d.beginPath();
+      for (let i = 0; i < N; i++) {
+        const alive = curAlive ? curAlive[i] : 1;
+        if (alive) continue;
+        const px = posX[i], py = posY[i];
+        if (px+baseR < v0x || px-baseR > v1x || py+baseR < v0y || py-baseR > v1y) continue;
+        if (hasNodeFlash && i === flashNode) { flashNodeI = i; continue; }
+        ctx2d.moveTo(px+baseR, py); ctx2d.arc(px, py, baseR, 0, 2*Math.PI);
+      }
+      ctx2d.fillStyle = '#ef4444'; ctx2d.fill();
+      if (showStroke) { ctx2d.strokeStyle = '#dc2626'; ctx2d.lineWidth = 1.5/vs; ctx2d.stroke(); }
+    } else {
+      // Gossip: existing community/default coloring
+      const useCommunityColor = numCommunities > 1;
+
+      if (useCommunityColor) {
+        // Batch by community color
+        for (let c = 0; c < numCommunities; c++) {
+          ctx2d.beginPath();
+          for (let i = 0; i < N; i++) {
+            if (community[i] !== c) continue;
+            const px = posX[i], py = posY[i];
+            if (px+baseR < v0x || px-baseR > v1x || py+baseR < v0y || py-baseR > v1y) continue;
+            if (hasNodeFlash && i === flashNode) { flashNodeI = i; continue; }
+            ctx2d.moveTo(px+baseR, py); ctx2d.arc(px, py, baseR, 0, 2*Math.PI);
+          }
+          ctx2d.fillStyle = communityColors[c % communityColors.length]; ctx2d.fill();
+          if (showStroke) { ctx2d.strokeStyle = '#1a1d2e'; ctx2d.lineWidth = 1/vs; ctx2d.stroke(); }
+        }
+      } else {
+        ctx2d.beginPath();
+        for (let i = 0; i < N; i++) {
+          const px = posX[i], py = posY[i];
+          if (px+baseR < v0x || px-baseR > v1x || py+baseR < v0y || py-baseR > v1y) continue;
+          if (hasNodeFlash && i === flashNode) { flashNodeI = i; continue; }
+          ctx2d.moveTo(px+baseR, py); ctx2d.arc(px, py, baseR, 0, 2*Math.PI);
+        }
+        ctx2d.fillStyle = '#6366f1'; ctx2d.fill();
+        if (showStroke) { ctx2d.strokeStyle = '#4f46e5'; ctx2d.lineWidth = 1.5/vs; ctx2d.stroke(); }
+      }
+    }
+
+    // Flash node (shared)
+    if (flashNodeI >= 0) {
+      const t = 1-(now-flashNodeT)/400, rad = baseR+6*t;
+      ctx2d.beginPath();
+      ctx2d.arc(posX[flashNodeI], posY[flashNodeI], rad, 0, 2*Math.PI);
+      ctx2d.fillStyle = '#818cf8'; ctx2d.fill();
+      if (showStroke) { ctx2d.strokeStyle = '#4f46e5'; ctx2d.lineWidth = 1.5/vs; ctx2d.stroke(); }
+    }
+  }
+
+  // ── Labels ──
+  if (showLabels) {
+    ctx2d.fillStyle = '#c7d2fe';
+    ctx2d.font = Math.max(8, Math.min(thickDetail ? 13 : 11, (thickDetail ? 13 : 11)/vs)) + 'px system-ui,sans-serif';
+    ctx2d.textAlign = 'center';
+    for (let i = 0; i < N; i++) {
+      const px = posX[i], py = posY[i];
+      if (px < v0x || px > v1x || py < v0y || py > v1y) continue;
+      ctx2d.fillText(nodeNames[i], px, py + baseR + 14/vs);
+    }
+  }
+
+  if (hasNodeFlash || hasEdgeFlash) requestAnimationFrame(drawGraph);
+}
+
+// ── Edge visibility (binary search, zero allocation) ─────────────
+function updateVisibleEdges(pos) {
+  let lo = 0, hi = totalEdges;
+  while (lo < hi) {
+    const mid = (lo + hi) >>> 1;
+    if (edgeAppear[mid] < pos) lo = mid + 1; else hi = mid;
+  }
+  visEdges = lo;
+}
+
+// ── UI helpers ───────────────────────────────────────────────────
+function updateStats(nn, ne, nm, cr, tr) {
+  document.getElementById('statNodes').textContent = nn;
+  document.getElementById('statEdges').textContent = ne;
+  document.getElementById('statMessages').textContent = nm;
+  document.getElementById('statRound').textContent = cr + '/' + tr;
+}
+
+function formatDetail(kind, detail) {
+  if (!detail) return '';
+  switch (kind) {
+    case 'GossipRoundStarted': return '&rarr; ' + (detail.target_name || detail.target);
+    case 'PushReceived': return '&larr; ' + (detail.from_name || detail.from) + ' (' + detail.keys_updated + ' keys)';
+    case 'LocalSet': return 'key=' + detail.key;
+    case 'PeerAdded': return '+ ' + (detail.peer_name || detail.peer);
+    case 'PeerRemoved': return '- ' + (detail.peer_name || detail.peer);
+    case 'QueryReceived': return 'key=' + detail.key;
+    case 'StateSnapshot': return detail.entries + ' entries, ' + detail.peer_count + ' peers';
+    case 'Joined': return 'seed: ' + detail.seed_addr;
+    case 'MembershipChanged': return detail.target + ' → ' + detail.new_state;
+    case 'PingSent': return '→ ' + detail.target;
+    case 'AckReceived': return '← ' + detail.from;
+    case 'ActorRegistered': return 'actor: ' + detail.actor_id;
+    case 'ActorStored': return detail.actor_id + ' on ' + detail.on_node;
+    case 'ActorResolved': return detail.actor_id + ' → ' + detail.found_on;
+    case 'ActorResolveFailed': return detail.actor_id + ': ' + detail.reason;
+    case 'NameRegistered': return '"' + detail.name + '" on node ' + detail.node_idx;
+    case 'NameUnregistered': return '"' + detail.name + '" on node ' + detail.node_idx;
+    case 'NameResolved': return '"' + detail.name + '" → ' + detail.result;
+    case 'NodeKilled': return '';
+    case 'NodeRevived': return '';
+    default: return JSON.stringify(detail);
+  }
+}
+
+function makeRow(ev) {
+  const tr = document.createElement('tr');
+  if (ev.kind === 'GossipRoundStarted') tr.className = 'highlight-push';
+  else if (ev.kind === 'LocalSet') tr.className = 'highlight-set';
+  else if (ev.kind === 'NodeKilled') tr.className = 'highlight-kill';
+  else if (ev.kind === 'NodeRevived') tr.className = 'highlight-revive';
+  else if (ev.kind === 'MembershipChanged') tr.className = 'highlight-membership';
+  else if (ev.kind === 'NameRegistered' || ev.kind === 'NameUnregistered') tr.className = 'highlight-registry';
+  else if (ev.kind === 'PingSent' || ev.kind === 'AckReceived') tr.className = 'highlight-ping';
+  tr.innerHTML = '<td>'+ev.seq+'</td><td>'+ev.tick+'</td><td>'+(ev.thread||'-')+'</td><td>'+ev.node+'</td><td>'+ev.kind+'</td><td>'+formatDetail(ev.kind, ev.detail)+'</td>';
+  return tr;
+}
+
+function fmtWorker(ev) {
+  let t = ev.node + ': ' + ev.kind;
+  if (ev.kind === 'GossipRoundStarted' && ev.detail) t += ' -> ' + (ev.detail.target_name || ev.detail.target);
+  if (ev.kind === 'PushReceived' && ev.detail) t += ' <- ' + (ev.detail.from_name || ev.detail.from);
+  return t;
+}
+
+function rebuildWorkerColumns() {
+  const c = document.getElementById('workerColumns');
+  c.innerHTML = '';
+  for (const t of Object.keys(workerLogs).sort()) {
+    const col = document.createElement('div');
+    col.className = 'worker-col'; col.id = 'worker-' + t;
+    col.innerHTML = '<div class="worker-col-header">' + t + '</div>';
+    c.appendChild(col);
+  }
+}
+
+function updateWorkerColumn(thread) {
+  const col = document.getElementById('worker-' + thread);
+  if (!col) return;
+  let h = '<div class="worker-col-header">' + thread + '</div>';
+  for (const e of workerLogs[thread]) h += '<div class="worker-entry">' + e + '</div>';
+  col.innerHTML = h;
+  col.scrollTop = col.scrollHeight;
+}
+
+// ── Incremental table/worker updates ─────────────────────────────
+function updateEventTable(pos) {
+  const tbody = document.getElementById('eventTableBody');
+  const incr = pos > lastTablePos && pos - lastTablePos <= 100 && lastTablePos >= 0;
+  if (!incr) tbody.textContent = '';
+  const frag = document.createDocumentFragment();
+  const start = incr ? lastTablePos : Math.max(0, pos - MAX_TABLE_ROWS);
+  for (let i = start; i < pos && i < allEvents.length; i++) frag.appendChild(makeRow(allEvents[i]));
+  tbody.appendChild(frag);
+  if (incr) while (tbody.childNodes.length > MAX_TABLE_ROWS) tbody.removeChild(tbody.firstChild);
+  lastTablePos = pos;
+  document.getElementById('eventTableWrap').scrollTop = 1e9;
+}
+
+function updateWorkerPanel(pos) {
+  const incr = pos > lastWorkerPos && pos - lastWorkerPos <= 100 && lastWorkerPos >= 0;
+  const start = incr ? lastWorkerPos : Math.max(0, pos - 200);
+  if (!incr) workerLogs = {};
+  let needCols = !incr;
+  for (let i = start; i < pos && i < allEvents.length; i++) {
+    const ev = allEvents[i];
+    if (!ev.thread) continue;
+    if (!workerLogs[ev.thread]) { workerLogs[ev.thread] = []; needCols = true; }
+    workerLogs[ev.thread].push(fmtWorker(ev));
+    if (workerLogs[ev.thread].length > 50) workerLogs[ev.thread].shift();
+  }
+  if (needCols) rebuildWorkerColumns();
+  for (const t of Object.keys(workerLogs)) updateWorkerColumn(t);
+  lastWorkerPos = pos;
+}
+
+// ── Replay engine ────────────────────────────────────────────────
+let replayRafId = 0, playTimer = null;
+
+function stopPlayback() {
+  if (playTimer !== null) {
+    clearInterval(playTimer); playTimer = null;
+    document.getElementById('btnPlay').innerHTML = '&#9654;';
+    document.getElementById('btnPlay').title = 'Play';
+  }
+}
+
+function startPlayback() {
+  stopPlayback();
+  if (replayCursor >= allEvents.length) return;
+  const speed = parseInt(document.getElementById('speedInput').value) || 100;
+  document.getElementById('btnPlay').innerHTML = '&#9208;';
+  document.getElementById('btnPlay').title = 'Pause';
+  playTimer = setInterval(() => {
+    if (replayCursor >= allEvents.length) { stopPlayback(); return; }
+    replayTo(replayCursor + 1);
+  }, speed);
+}
+
+function replayTo(pos) {
+  replayCursor = pos;
+  if (replayRafId) return;
+  replayRafId = requestAnimationFrame(() => { replayRafId = 0; replayToImpl(replayCursor); });
+}
+
+function replayToImpl(pos) {
+  flashNode = -1; flashSrc = -1; flashDst = -1;
+
+  updateVisibleEdges(pos);
+  updateEventTable(pos);
+  updateWorkerPanel(pos);
+
+  // Flash last event
+  if (pos > 0 && pos <= allEvents.length) {
+    const ev = allEvents[pos - 1];
+    flashNode = nodeIdx.get(ev.node) ?? -1;
+    flashNodeT = performance.now();
+    if (ev.kind === 'GossipRoundStarted' && ev.detail) {
+      const t = ev.detail.target_name || ev.detail.target;
+      if (t) { flashSrc = nodeIdx.get(ev.node) ?? -1; flashDst = nodeIdx.get(t) ?? -1; flashEdgeT = performance.now(); }
+    }
+    if (ev.kind === 'PushReceived' && ev.detail) {
+      const f = ev.detail.from_name || ev.detail.from;
+      if (f) { flashSrc = nodeIdx.get(f) ?? -1; flashDst = nodeIdx.get(ev.node) ?? -1; flashEdgeT = performance.now(); }
+    }
+    if (ev.kind === 'PingSent' && ev.detail) {
+      const t = ev.detail.target;
+      if (t) { flashSrc = nodeIdx.get(ev.node) ?? -1; flashDst = nodeIdx.get(t) ?? -1; flashEdgeT = performance.now(); }
+    }
+    if (ev.kind === 'AckReceived' && ev.detail) {
+      const f = ev.detail.from;
+      if (f) { flashSrc = nodeIdx.get(f) ?? -1; flashDst = nodeIdx.get(ev.node) ?? -1; flashEdgeT = performance.now(); }
+    }
+  }
+
+  document.getElementById('replaySlider').value = pos;
+  document.getElementById('replayPos').textContent = replayCursor + '/' + allEvents.length;
+  drawGraph();
+  // Update analytics charts if visible
+  if (document.getElementById('tab-analytics').classList.contains('active')) {
+    drawConvergenceChart();
+    drawHeatmap();
+    drawLoadHistogram();
+  }
+}
+
+// ── Trace loading ────────────────────────────────────────────────
+function resetState() {
+  stopPlayback();
+  layoutAbortFlag = true;
+  nodeNames = []; nodeIdx.clear(); N = 0;
+  posX = new Float64Array(0); posY = new Float64Array(0);
+  totalEdges = 0; visEdges = 0;
+  edgeSrc = new Int32Array(0); edgeDst = new Int32Array(0); edgeAppear = new Int32Array(0);
+  flashNode = -1; flashSrc = -1; flashDst = -1;
+  allEvents = []; replayCursor = 0; workerLogs = {};
+  lastTablePos = -1; lastWorkerPos = -1;
+  vx = 0; vy = 0; vs = 1;
+  snapRounds = []; snapEntries = []; snapPeerCount = []; totalKeys = 0; numRounds = 0;
+  metricPushesSent = new Int32Array(0); metricPushesRecv = new Int32Array(0);
+  metricRedundant = 0; metricTotalPushes = 0; metricNoPeers = 0;
+  cumulPushRecv = []; eventRoundMap = [];
+  isDist = false;
+  snapMembers = []; snapRegistry = []; snapCache = []; snapAlive = [];
+  snapRouting = []; snapRepair = []; snapDirectory = []; snapTombstone = [];
+  community = new Int32Array(0); numCommunities = 0; communityHulls = [];
+  document.getElementById('eventTableBody').textContent = '';
+  document.getElementById('workerColumns').innerHTML = '';
+  document.getElementById('layoutProgress').style.display = 'none';
+  document.getElementById('nodeDetail').style.display = 'none';
+  document.getElementById('badgeGrid').innerHTML = '';
+}
+
+async function loadTrace(file) {
+  const dot = document.getElementById('statusDot');
+  const statusText = document.getElementById('statusText');
+  dot.className = 'status-dot loading';
+  statusText.textContent = 'Loading...';
+  resetState();
+
+  const resp = await fetch('/trace.json?file=' + encodeURIComponent(file));
+  if (!resp.ok) { dot.className = 'status-dot error'; statusText.textContent = 'Failed to load trace'; return; }
+  const trace = await resp.json();
+  isDist = (trace.trace_type === 'distribution');
+
+  // Build node index
+  nodeNames = trace.node_names;
+  N = nodeNames.length;
+  nodeIdx = new Map();
+  for (let i = 0; i < N; i++) nodeIdx.set(nodeNames[i], i);
+  posX = new Float64Array(N);
+  posY = new Float64Array(N);
+
+  // Build edges (initial topology)
+  const edgeKeys = new Set();
+  const tempEdges = []; // flat triples: [src, dst, appear, ...]
+  for (const [a, b] of trace.topology_edges) {
+    const si = nodeIdx.get(a), di = nodeIdx.get(b);
+    if (si === undefined || di === undefined) continue;
+    const key = si + ',' + di;
+    if (!edgeKeys.has(key)) { edgeKeys.add(key); tempEdges.push(si, di, -1); }
+  }
+
+  // Build events + extract snapshots
+  let seq = 0;
+  allEvents = [];
+  numRounds = trace.num_rounds || 0;
+
+  if (isDist) {
+    // Distribution: snapshots come from trace.snapshots_per_round directly
+    snapRounds = [];
+    for (let r = 0; r < (trace.snapshots_per_round || []).length; r++) {
+      const roundSnaps = trace.snapshots_per_round[r];
+      snapRounds.push(r + 1); // 1-indexed round
+      const memArr = new Int32Array(N);
+      const regArr = new Int32Array(N);
+      const cacheArr = new Int32Array(N);
+      const aliveArr = new Uint8Array(N);
+      const routingArr = new Int32Array(N);
+      const repairArr = new Int32Array(N);
+      const dirArr = new Int32Array(N);
+      const tombArr = new Int32Array(N);
+      for (const [nodeName, snap] of roundSnaps) {
+        const ni = nodeIdx.get(nodeName);
+        if (ni === undefined) continue;
+        memArr[ni] = snap.member_count || 0;
+        regArr[ni] = snap.registry_size || 0;
+        cacheArr[ni] = snap.cache_size || 0;
+        aliveArr[ni] = snap.is_alive ? 1 : 0;
+        routingArr[ni] = snap.routing_table_size || 0;
+        repairArr[ni] = snap.repair_queue_size || 0;
+        dirArr[ni] = snap.directory_entry_count || 0;
+        tombArr[ni] = snap.registry_tombstone_count || 0;
+      }
+      snapMembers.push(memArr);
+      snapRegistry.push(regArr);
+      snapCache.push(cacheArr);
+      snapAlive.push(aliveArr);
+      snapRouting.push(routingArr);
+      snapRepair.push(repairArr);
+      snapDirectory.push(dirArr);
+      snapTombstone.push(tombArr);
+      // For convergence chart compatibility, use registry_size as "entries"
+      snapEntries.push(regArr);
+      snapPeerCount.push(memArr);
+      // Track max for heatmap scaling
+      for (let i = 0; i < N; i++) {
+        if (regArr[i] > totalKeys) totalKeys = regArr[i];
+      }
+    }
+
+    // Distribution events (no StateSnapshot filtering needed)
+    for (const ev of trace.events) {
+      const isObj = typeof ev.kind === 'object';
+      let kind, detail;
+      if (isObj) { for (kind in ev.kind) break; detail = ev.kind[kind] || null; }
+      else { kind = ev.kind; detail = null; }
+      allEvents.push({ seq: seq++, tick: ev.tick, node: ev.node_name, thread: null, kind, detail });
+    }
+  } else {
+    // First pass: collect snapshots grouped by tick
+    const snapByTick = new Map(); // tick -> Map(nodeIdx -> {entries, peer_count})
+    for (const ev of trace.events) {
+      const isObj = typeof ev.kind === 'object';
+      if (isObj && 'StateSnapshot' in ev.kind) {
+        const snap = ev.kind.StateSnapshot.snapshot || ev.kind.StateSnapshot;
+        const ni = nodeIdx.get(ev.node_name);
+        if (ni === undefined) continue;
+        const entriesCount = snap.entries ? Object.keys(snap.entries).length : 0;
+        const peerCount = snap.peer_count || 0;
+        if (!snapByTick.has(ev.tick)) snapByTick.set(ev.tick, new Map());
+        snapByTick.get(ev.tick).set(ni, { entries: entriesCount, peer_count: peerCount });
+        if (entriesCount > totalKeys) totalKeys = entriesCount;
+        continue;
+      }
+      if (!isObj && ev.kind === 'StateSnapshot') continue;
+      let kind, detail;
+      if (isObj) { for (kind in ev.kind) break; detail = ev.kind[kind] || null; }
+      else { kind = ev.kind; detail = null; }
+      allEvents.push({ seq: seq++, tick: ev.tick, node: ev.node_name, thread: ev.thread_name, kind, detail });
+    }
+
+    // Build snapshot arrays sorted by round
+    snapRounds = Array.from(snapByTick.keys()).sort((a, b) => a - b);
+    snapEntries = []; snapPeerCount = [];
+    for (const tick of snapRounds) {
+      const eArr = new Int32Array(N);
+      const pArr = new Int32Array(N);
+      const m = snapByTick.get(tick);
+      for (const [ni, d] of m) { eArr[ni] = d.entries; pArr[ni] = d.peer_count; }
+      snapEntries.push(eArr);
+      snapPeerCount.push(pArr);
+    }
+
+    // Compute per-node metrics from events
+    metricPushesSent = new Int32Array(N);
+    metricPushesRecv = new Int32Array(N);
+    metricRedundant = 0; metricTotalPushes = 0; metricNoPeers = 0;
+
+    // Also build cumulative push-recv per round
+    const roundSet = new Set(snapRounds);
+    cumulPushRecv = [];
+    let runningRecv = new Int32Array(N);
+
+    for (let i = 0; i < allEvents.length; i++) {
+      const ev = allEvents[i];
+      const ni = nodeIdx.get(ev.node);
+      if (ni === undefined) continue;
+      if (ev.kind === 'GossipRoundStarted') {
+        metricPushesSent[ni]++;
+        metricTotalPushes++;
+      }
+      if (ev.kind === 'PushReceived') {
+        metricPushesRecv[ni]++;
+        runningRecv[ni]++;
+        if (ev.detail && ev.detail.keys_updated === 0) metricRedundant++;
+      }
+      if (ev.kind === 'GossipRoundNoPeers') { metricNoPeers++; }
+    }
+
+    // Build cumulative recv snapshots aligned to snap rounds
+    // Re-scan to build per-round cumulative
+    if (snapRounds.length > 0) {
+      const cumRecv = new Int32Array(N);
+      let sri = 0;
+      for (let i = 0; i < allEvents.length && sri < snapRounds.length; i++) {
+        const ev = allEvents[i];
+        if (ev.kind === 'PushReceived') {
+          const ni = nodeIdx.get(ev.node);
+          if (ni !== undefined) cumRecv[ni]++;
+        }
+        // When we pass a snapshot round boundary, save
+        while (sri < snapRounds.length && ev.tick >= snapRounds[sri]) {
+          cumulPushRecv.push(new Int32Array(cumRecv));
+          sri++;
+        }
+      }
+      // Fill remaining
+      while (sri < snapRounds.length) { cumulPushRecv.push(new Int32Array(cumRecv)); sri++; }
+    }
+  }
+
+  // Index PeerAdded edges
+  for (let i = 0; i < allEvents.length; i++) {
+    const ev = allEvents[i];
+    if (ev.kind !== 'PeerAdded' || !ev.detail) continue;
+    const peer = ev.detail.peer_name || ev.detail.peer;
+    if (!peer) continue;
+    const si = nodeIdx.get(ev.node), di = nodeIdx.get(peer);
+    if (si === undefined || di === undefined) continue;
+    const key = si + ',' + di;
+    if (!edgeKeys.has(key)) { edgeKeys.add(key); tempEdges.push(si, di, i); }
+  }
+
+  // Sort by appearance and build typed arrays
+  const nEdges = tempEdges.length / 3;
+  const sortIdx = new Array(nEdges);
+  for (let i = 0; i < nEdges; i++) sortIdx[i] = i;
+  sortIdx.sort((a, b) => tempEdges[a*3+2] - tempEdges[b*3+2]);
+
+  totalEdges = nEdges;
+  edgeSrc = new Int32Array(nEdges);
+  edgeDst = new Int32Array(nEdges);
+  edgeAppear = new Int32Array(nEdges);
+  for (let j = 0; j < nEdges; j++) {
+    const i = sortIdx[j];
+    edgeSrc[j] = tempEdges[i*3]; edgeDst[j] = tempEdges[i*3+1]; edgeAppear[j] = tempEdges[i*3+2];
+  }
+
+  updateVisibleEdges(0);
+
+  dot.className = 'status-dot loading';
+  statusText.textContent = 'Computing layout...';
+  updateStats(N, totalEdges, allEvents.length, trace.num_rounds, trace.num_rounds);
+
+  resizeCanvas();
+  initPositions();
+  const rect = canvas.parentElement.getBoundingClientRect();
+  await runForceLayout(rect.width, rect.height);
+
+  // Community detection + hulls
+  detectCommunities();
+  computeCommunityHulls();
+
+  dot.className = 'status-dot ready';
+  statusText.textContent = trace.name + (isDist ? ' [distribution]' : ' [gossip]') + ' (' + allEvents.length + ' events)';
+  drawGraph();
+  drawAllCharts();
+
+  // Update panel labels
+  document.querySelector('.worker-panel h2').textContent = isDist ? 'Node Status' : 'Worker Logs';
+  document.querySelector('#heatSection h3').textContent = isDist ? 'Registry Propagation' : 'Propagation Heatmap';
+  document.querySelector('#loadSection h3').textContent = isDist ? 'Cache Utilization' : 'Load Distribution';
+  document.querySelector('#convSection h3').textContent = isDist ? 'Membership Convergence' : 'Convergence Curve';
+
+  // Update stat labels
+  if (isDist) {
+    document.querySelectorAll('.stat-label')[1].textContent = 'Alive';
+  } else {
+    document.querySelectorAll('.stat-label')[1].textContent = 'Edges';
+  }
+
+  // Update stats with distribution-specific values
+  if (isDist && snapAlive.length > 0) {
+    let alive = 0;
+    const lastSnap = snapAlive[snapAlive.length - 1];
+    for (let i = 0; i < N; i++) if (lastSnap[i]) alive++;
+    updateStats(N, alive, allEvents.length, numRounds, numRounds);
+  } else {
+    updateStats(N, totalEdges, allEvents.length, numRounds, numRounds);
+  }
+
+  // Replay controls
+  document.getElementById('replayControls').style.display = 'flex';
+  const slider = document.getElementById('replaySlider');
+  slider.max = allEvents.length; slider.value = 0;
+  replayCursor = 0;
+  document.getElementById('replayPos').textContent = '0/' + allEvents.length;
+
+  document.getElementById('btnFirst').onclick = () => { stopPlayback(); replayTo(0); };
+  document.getElementById('btnPrev').onclick = () => { stopPlayback(); replayTo(Math.max(0, replayCursor-1)); };
+  document.getElementById('btnNext').onclick = () => { stopPlayback(); replayTo(Math.min(allEvents.length, replayCursor+1)); };
+  document.getElementById('btnLast').onclick = () => { stopPlayback(); replayTo(allEvents.length); };
+  slider.oninput = () => { stopPlayback(); replayTo(parseInt(slider.value)); };
+  document.getElementById('btnPlay').onclick = () => { playTimer !== null ? stopPlayback() : startPlayback(); };
+  document.getElementById('speedInput').onchange = () => { if (playTimer !== null) startPlayback(); };
+}
+
+// ── Boot ─────────────────────────────────────────────────────────
+resizeCanvas();
+(async function() {
+  const select = document.getElementById('traceSelect');
+  const dot = document.getElementById('statusDot');
+  const statusText = document.getElementById('statusText');
+  let traces;
+  try { traces = await (await fetch('/traces')).json(); }
+  catch { dot.className='status-dot error'; statusText.textContent='Failed to fetch trace list'; select.innerHTML='<option value="">Error</option>'; return; }
+  if (!traces.length) { dot.className='status-dot error'; statusText.textContent='No traces found'; select.innerHTML='<option value="">No traces found</option>'; return; }
+  select.innerHTML = '';
+  traces.forEach(t => { const o = document.createElement('option'); o.value = t.file; o.textContent = '[' + (t.trace_type || 'gossip') + '] ' + t.name+' ('+t.nodes+' nodes, '+t.events+' events)'; select.appendChild(o); });
+  select.disabled = false;
+  select.onchange = () => { if (select.value) loadTrace(select.value); };
+  loadTrace(traces[0].file);
+})();
+</script>
+</body>
+</html>
diff --git a/crates/simulation-dashboard/src/dashboard_html.rs b/crates/simulation-dashboard/src/dashboard_html.rs
index 6885af1..c58f01b 100644
--- a/crates/simulation-dashboard/src/dashboard_html.rs
+++ b/crates/simulation-dashboard/src/dashboard_html.rs
@@ -1,1716 +1 @@
-pub const DASHBOARD_HTML: &str = r##"<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Simulation Dashboard</title>
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #0f1117; color: #e0e0e0; }
-  .header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3a; }
-  .header h1 { font-size: 18px; font-weight: 600; color: #c0c6d4; }
-  .trace-select { background: #1a1d2e; color: #e0e0e0; border: 1px solid #2a2d3a; border-radius: 4px; padding: 6px 12px; font-size: 13px; cursor: pointer; min-width: 240px; max-width: 420px; }
-  .trace-select:hover { border-color: #4f46e5; }
-  .trace-select:focus { outline: none; border-color: #6366f1; }
-  .trace-select:disabled { cursor: default; opacity: 0.5; }
-  .status-badge { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9ca3af; }
-  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
-  .status-dot.ready { background: #22c55e; }
-  .status-dot.loading { background: #3b82f6; animation: pulse 1s infinite; }
-  .status-dot.error { background: #ef4444; }
-  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
-  .main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 48px); }
-  .graph-panel { grid-row: 1 / 3; border-right: 1px solid #2a2d3a; position: relative; }
-  canvas { width: 100%; height: 100%; display: block; }
-  .layout-progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(22,24,34,0.9); border: 1px solid #2a2d3a; border-radius: 8px; padding: 16px 24px; text-align: center; font-size: 13px; color: #9ca3af; display: none; z-index: 10; }
-  .layout-progress .progress-bar { width: 200px; height: 4px; background: #2a2d3a; border-radius: 2px; margin-top: 8px; overflow: hidden; }
-  .layout-progress .progress-fill { height: 100%; background: #6366f1; border-radius: 2px; width: 0%; transition: width 0.1s; }
-  .side-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
-  .stats-panel { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #2a2d3a; background: #161822; }
-  .stats-panel h2 { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
-  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
-  .stat-item .stat-value { font-size: 22px; font-weight: 700; color: #e5e7eb; }
-  .stat-item .stat-label { font-size: 11px; color: #6b7280; text-transform: uppercase; }
-  .worker-panel { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #2a2d3a; height: 180px; overflow-y: auto; }
-  .worker-panel h2 { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
-  .worker-columns { display: flex; gap: 8px; overflow-x: auto; }
-  .worker-col { flex: 1; min-width: 160px; background: #1a1d2e; border-radius: 6px; padding: 8px; font-size: 11px; max-height: 140px; overflow-y: auto; }
-  .worker-col-header { font-weight: 600; color: #818cf8; margin-bottom: 4px; font-size: 12px; }
-  .worker-entry { color: #9ca3af; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .event-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
-  .event-panel h2 { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px 8px; }
-  .event-table-wrap { flex: 1; overflow-y: auto; padding: 0 16px 8px; }
-  table { width: 100%; border-collapse: collapse; font-size: 12px; }
-  th { text-align: left; color: #6b7280; font-weight: 500; padding: 4px 8px; border-bottom: 1px solid #2a2d3a; position: sticky; top: 0; background: #0f1117; }
-  td { padding: 3px 8px; border-bottom: 1px solid #1a1d2e; white-space: nowrap; }
-  tr.highlight-push td { background: rgba(59,130,246,0.1); }
-  tr.highlight-set td { background: rgba(34,197,94,0.1); }
-  tr.highlight-kill td { background: rgba(239,68,68,0.15); }
-  tr.highlight-revive td { background: rgba(34,197,94,0.15); }
-  tr.highlight-membership td { background: rgba(245,158,11,0.1); }
-  tr.highlight-registry td { background: rgba(168,85,247,0.1); }
-  tr.highlight-ping td { background: rgba(59,130,246,0.08); }
-  .replay-controls { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #161822; border-bottom: 1px solid #2a2d3a; }
-  .replay-controls button { background: #2a2d3a; color: #e0e0e0; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
-  .replay-controls button:hover { background: #3b3f52; }
-  .replay-controls input[type=range] { flex: 1; }
-  .replay-controls .replay-pos { font-size: 12px; color: #9ca3af; min-width: 60px; text-align: right; }
-  .replay-controls .speed-group { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
-  .replay-controls .speed-group input { width: 64px; background: #1a1d2e; color: #e0e0e0; border: 1px solid #2a2d3a; border-radius: 4px; padding: 2px 6px; font-size: 12px; text-align: right; }
-  .replay-controls .speed-group label { font-size: 11px; color: #6b7280; white-space: nowrap; }
-  .tab-bar { display: flex; border-bottom: 1px solid #2a2d3a; background: #161822; flex-shrink: 0; }
-  .tab-btn { flex: 1; padding: 8px 0; font-size: 13px; font-weight: 500; color: #6b7280; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; text-align: center; }
-  .tab-btn:hover { color: #9ca3af; }
-  .tab-btn.active { color: #818cf8; border-bottom-color: #818cf8; }
-  .tab-content { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
-  .tab-content.active { display: flex; }
-  .analytics-scroll { flex: 1; overflow-y: auto; padding: 12px 16px; }
-  .badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
-  .badge { background: #1a1d2e; border-radius: 6px; padding: 10px 12px; border-left: 3px solid #6b7280; }
-  .badge.green { border-left-color: #22c55e; }
-  .badge.yellow { border-left-color: #f59e0b; }
-  .badge.red { border-left-color: #ef4444; }
-  .badge .badge-val { font-size: 18px; font-weight: 700; color: #e5e7eb; }
-  .badge .badge-lbl { font-size: 11px; color: #6b7280; text-transform: uppercase; }
-  .chart-section { margin-bottom: 16px; }
-  .chart-section h3 { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
-  .chart-section canvas { width: 100%; border-radius: 4px; background: #1a1d2e; display: block; }
-  .chart-empty { padding: 24px; text-align: center; color: #4b5563; font-size: 13px; }
-  .node-detail { position: absolute; top: 60px; left: 20px; width: 280px; background: rgba(22,24,34,0.95); border: 1px solid #2a2d3a; border-radius: 8px; padding: 14px; z-index: 20; display: none; font-size: 12px; }
-  .node-detail h3 { font-size: 14px; color: #c7d2fe; margin-bottom: 8px; }
-  .node-detail .close-btn { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #6b7280; cursor: pointer; font-size: 16px; }
-  .node-detail .close-btn:hover { color: #e0e0e0; }
-  .node-detail .nd-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #1a1d2e; }
-  .node-detail .nd-key { color: #6b7280; }
-  .node-detail .nd-val { color: #e5e7eb; font-weight: 500; }
-  .node-detail .nd-events { max-height: 160px; overflow-y: auto; margin-top: 8px; }
-  .node-detail .nd-ev { color: #9ca3af; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
-  .heatmap-wrap { position: relative; }
-  .heatmap-tooltip { position: absolute; display: none; background: rgba(22,24,34,0.95); border: 1px solid #2a2d3a; border-radius: 4px; padding: 4px 8px; font-size: 11px; color: #e0e0e0; white-space: nowrap; pointer-events: none; z-index: 5; }
-</style>
-</head>
-<body>
-<div class="header">
-  <h1>Simulation Dashboard</h1>
-  <select id="traceSelect" class="trace-select" disabled><option value="">Loading traces...</option></select>
-  <div class="status-badge">
-    <div class="status-dot loading" id="statusDot"></div>
-    <span id="statusText">Loading traces...</span>
-  </div>
-</div>
-<div class="main">
-  <div class="graph-panel">
-    <canvas id="graphCanvas"></canvas>
-    <div class="layout-progress" id="layoutProgress">
-      <div>Computing layout...</div>
-      <div class="progress-bar"><div class="progress-fill" id="layoutProgressFill"></div></div>
-    </div>
-    <div class="node-detail" id="nodeDetail">
-      <button class="close-btn" id="nodeDetailClose">&times;</button>
-      <h3 id="ndName"></h3>
-      <div id="ndStats"></div>
-      <div class="nd-events" id="ndEvents"></div>
-    </div>
-  </div>
-  <div class="side-panel">
-    <div class="replay-controls" id="replayControls" style="display:none">
-      <button id="btnFirst" title="First">|&#9664;</button>
-      <button id="btnPrev" title="Previous">&#9664;</button>
-      <button id="btnPlay" title="Play">&#9654;</button>
-      <button id="btnNext" title="Next">&#9654;</button>
-      <button id="btnLast" title="Last">&#9654;|</button>
-      <input type="range" id="replaySlider" min="0" max="0" value="0">
-      <span class="replay-pos" id="replayPos">0/0</span>
-      <span class="speed-group">
-        <input type="number" id="speedInput" value="100" min="10" max="2000" step="10">
-        <label>ms/event</label>
-      </span>
-    </div>
-    <div class="tab-bar">
-      <button class="tab-btn active" data-tab="replay">Replay</button>
-      <button class="tab-btn" data-tab="analytics">Analytics</button>
-    </div>
-    <div class="tab-content active" id="tab-replay">
-      <div class="stats-panel">
-        <h2>Stats</h2>
-        <div class="stats-grid">
-          <div class="stat-item"><div class="stat-value" id="statNodes">0</div><div class="stat-label">Nodes</div></div>
-          <div class="stat-item"><div class="stat-value" id="statEdges">0</div><div class="stat-label">Edges</div></div>
-          <div class="stat-item"><div class="stat-value" id="statMessages">0</div><div class="stat-label">Messages</div></div>
-          <div class="stat-item"><div class="stat-value" id="statRound">0/0</div><div class="stat-label">Round</div></div>
-        </div>
-      </div>
-      <div class="worker-panel">
-        <h2>Worker Logs</h2>
-        <div class="worker-columns" id="workerColumns"></div>
-      </div>
-      <div class="event-panel">
-        <h2>Event Log</h2>
-        <div class="event-table-wrap" id="eventTableWrap">
-          <table>
-            <thead><tr><th>Seq</th><th>Round</th><th>Thread</th><th>Node</th><th>Event</th><th>Details</th></tr></thead>
-            <tbody id="eventTableBody"></tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <div class="tab-content" id="tab-analytics">
-      <div class="analytics-scroll">
-        <div class="badge-grid" id="badgeGrid"></div>
-        <div class="chart-section" id="convSection">
-          <h3>Convergence Curve</h3>
-          <canvas id="convCanvas" height="180"></canvas>
-        </div>
-        <div class="chart-section" id="heatSection">
-          <h3>Propagation Heatmap</h3>
-          <div class="heatmap-wrap">
-            <canvas id="heatCanvas" height="250"></canvas>
-            <div class="heatmap-tooltip" id="heatTooltip"></div>
-          </div>
-        </div>
-        <div class="chart-section" id="loadSection">
-          <h3>Load Distribution</h3>
-          <canvas id="loadCanvas" height="150"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-const MAX_TABLE_ROWS = 2000;
-
-// ── Node data (indexed by integer) ────────────────────────────────
-let nodeNames = [];          // nodeNames[i] = "node_42"
-let nodeIdx = new Map();     // "node_42" -> 0
-let N = 0;
-let posX = new Float64Array(0);
-let posY = new Float64Array(0);
-
-// ── Edge data (flat typed arrays, sorted by appearance index) ─────
-let totalEdges = 0;
-let edgeSrc = new Int32Array(0);    // source node index
-let edgeDst = new Int32Array(0);    // dest node index
-let edgeAppear = new Int32Array(0); // appearance event index (-1 = initial)
-let visEdges = 0;                   // edges[0..visEdges-1] are visible
-
-// ── Flash state (at most 1 node + 1 edge at a time) ──────────────
-let flashNode = -1, flashNodeT = 0;
-let flashSrc = -1, flashDst = -1, flashEdgeT = 0;
-
-// ── Events & replay ──────────────────────────────────────────────
-let allEvents = [];
-let replayCursor = 0;
-let workerLogs = {};
-let lastTablePos = -1, lastWorkerPos = -1;
-
-// ── Analytics data ───────────────────────────────────────────────
-let snapRounds = [];         // unique tick numbers that have snapshots
-let snapEntries = [];        // snapEntries[roundIdx][nodeIdx] = entry count
-let snapPeerCount = [];      // snapPeerCount[roundIdx][nodeIdx] = peer count
-let totalKeys = 0;           // max entries seen across all snapshots
-let numRounds = 0;           // total rounds from trace
-
-let metricPushesSent = new Int32Array(0);
-let metricPushesRecv = new Int32Array(0);
-let metricRedundant = 0;
-let metricTotalPushes = 0;
-let metricNoPeers = 0;
-
-// cumulative push-recv per round: cumulPushRecv[roundIdx][nodeIdx]
-let cumulPushRecv = [];
-// round number for each event index: eventRoundIdx[evtIdx] = roundIdx into snapRounds
-let eventRoundMap = [];      // eventRoundMap[evtIdx] = tick
-
-// ── Distribution-specific state ────────────────────────────────
-let isDist = false;
-let snapMembers = [];    // snapMembers[roundIdx] = Int32Array(N) — member_count
-let snapRegistry = [];   // snapRegistry[roundIdx] = Int32Array(N) — registry_size
-let snapCache = [];      // snapCache[roundIdx] = Int32Array(N) — cache_size
-let snapAlive = [];      // snapAlive[roundIdx] = Uint8Array(N) — is_alive
-let snapRouting = [];    // snapRouting[roundIdx] = Int32Array(N) — routing_table_size
-let snapRepair = [];     // snapRepair[roundIdx] = Int32Array(N) — repair_queue_size
-let snapDirectory = [];  // snapDirectory[roundIdx] = Int32Array(N) — directory_entry_count
-let snapTombstone = [];  // snapTombstone[roundIdx] = Int32Array(N) — registry_tombstone_count
-
-// ── Community detection ──────────────────────────────────────────
-let community = new Int32Array(0);  // community[nodeIdx] = community id
-let numCommunities = 0;
-let communityHulls = [];   // communityHulls[cid] = [[x,y], ...]
-let communityColors = ['#6366f1','#22c55e','#f59e0b','#ef4444','#3b82f6','#a855f7','#ec4899','#14b8a6'];
-
-// ── View transform ───────────────────────────────────────────────
-let vx = 0, vy = 0, vs = 1; // view x, y, scale
-let isDragging = false, dragX = 0, dragY = 0, dragVx = 0, dragVy = 0;
-
-// ── Tab switching ────────────────────────────────────────────────
-document.querySelectorAll('.tab-btn').forEach(btn => {
-  btn.addEventListener('click', () => {
-    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
-    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-    btn.classList.add('active');
-    document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
-    if (btn.dataset.tab === 'analytics') drawAllCharts();
-  });
-});
-
-// ── Quadtree pool (flat Float64Array, reused across iterations) ──
-// Per node: [ox, oy, size, cx, cy, mass, c0, c1, c2, c3, body]
-const QF = 11;
-let qt = new Float64Array(0);
-let qtN = 0;
-let _fx = 0, _fy = 0; // force accumulator (avoids object alloc)
-
-let layoutAbortFlag = false;
-
-// ── Canvas ───────────────────────────────────────────────────────
-const canvas = document.getElementById('graphCanvas');
-const ctx2d = canvas.getContext('2d');
-
-function resizeCanvas() {
-  const r = canvas.parentElement.getBoundingClientRect();
-  canvas.width = r.width * devicePixelRatio;
-  canvas.height = r.height * devicePixelRatio;
-  canvas.style.width = r.width + 'px';
-  canvas.style.height = r.height + 'px';
-}
-window.addEventListener('resize', () => { resizeCanvas(); drawGraph(); });
-
-// ── Zoom & pan ───────────────────────────────────────────────────
-canvas.addEventListener('wheel', (e) => {
-  e.preventDefault();
-  const r = canvas.getBoundingClientRect();
-  const mx = e.clientX - r.left, my = e.clientY - r.top;
-  const f = e.deltaY < 0 ? 1.1 : 1 / 1.1;
-  const ns = Math.max(0.05, Math.min(5, vs * f));
-  const ratio = ns / vs;
-  vx = mx - (mx - vx) * ratio;
-  vy = my - (my - vy) * ratio;
-  vs = ns;
-  drawGraph();
-}, { passive: false });
-
-let clickStartX = 0, clickStartY = 0;
-canvas.addEventListener('mousedown', (e) => {
-  if (e.button !== 0) return;
-  isDragging = true;
-  dragX = e.clientX; dragY = e.clientY;
-  clickStartX = e.clientX; clickStartY = e.clientY;
-  dragVx = vx; dragVy = vy;
-  canvas.style.cursor = 'grabbing';
-});
-window.addEventListener('mousemove', (e) => {
-  if (!isDragging) return;
-  vx = dragVx + (e.clientX - dragX);
-  vy = dragVy + (e.clientY - dragY);
-  drawGraph();
-});
-window.addEventListener('mouseup', (e) => {
-  if (isDragging) {
-    const wasDrag = Math.abs(e.clientX - clickStartX) > 3 || Math.abs(e.clientY - clickStartY) > 3;
-    isDragging = false; canvas.style.cursor = '';
-    if (!wasDrag) handleNodeClick(e);
-  }
-});
-canvas.addEventListener('dblclick', () => { resetView(); drawGraph(); });
-
-function resetView() {
-  if (N === 0) { vx = 0; vy = 0; vs = 1; return; }
-  const r = canvas.parentElement.getBoundingClientRect();
-  const w = r.width, h = r.height;
-  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
-  for (let i = 0; i < N; i++) {
-    if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
-    if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
-  }
-  if (!isFinite(x0)) { vx = 0; vy = 0; vs = 1; return; }
-  const pad = 40;
-  vs = Math.min(w / (x1 - x0 + pad * 2), h / (y1 - y0 + pad * 2), 2);
-  vx = (w - (x0 + x1) * vs) / 2;
-  vy = (h - (y0 + y1) * vs) / 2;
-}
-
-// ── Quadtree (flat array, zero-alloc per iteration) ──────────────
-function qtAlloc(ox, oy, sz) {
-  if (qtN * QF >= qt.length) {
-    const nq = new Float64Array(Math.max(qt.length * 2, 256 * QF));
-    nq.set(qt); qt = nq;
-  }
-  const i = qtN++, o = i * QF;
-  qt[o]=ox; qt[o+1]=oy; qt[o+2]=sz;
-  qt[o+3]=0; qt[o+4]=0; qt[o+5]=0;
-  qt[o+6]=-1; qt[o+7]=-1; qt[o+8]=-1; qt[o+9]=-1;
-  qt[o+10]=-1;
-  return i;
-}
-
-function qtBuild() {
-  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
-  for (let i = 0; i < N; i++) {
-    if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
-    if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
-  }
-  const sz = Math.max(x1 - x0, y1 - y0, 1) + 2;
-  qtN = 0;
-  qtAlloc(x0 - 1, y0 - 1, sz);
-  for (let i = 0; i < N; i++) qtIns(0, i, posX[i], posY[i]);
-}
-
-function qtIns(ni, bi, bx, by) {
-  const o = ni * QF;
-  if (qt[o+5] === 0) {
-    qt[o+3] = bx; qt[o+4] = by; qt[o+5] = 1; qt[o+10] = bi;
-    return;
-  }
-  if (qt[o+10] >= 0) {
-    if (qt[o+2] < 0.001) { qt[o+5]++; return; } // cell too small, just accumulate
-    const eb = qt[o+10], ex = qt[o+3], ey = qt[o+4];
-    qt[o+10] = -1;
-    qtInsChild(ni, eb, ex, ey);
-  }
-  const m = qt[o+5];
-  qt[o+3] = (qt[o+3]*m + bx) / (m+1);
-  qt[o+4] = (qt[o+4]*m + by) / (m+1);
-  qt[o+5] = m + 1;
-  qtInsChild(ni, bi, bx, by);
-}
-
-function qtInsChild(ni, bi, bx, by) {
-  const o = ni * QF, hs = qt[o+2] / 2;
-  const mx = qt[o] + hs, my = qt[o+1] + hs;
-  const qx = bx < mx ? 0 : 1, qy = by < my ? 0 : 1;
-  const ci = o + 6 + qy * 2 + qx;
-  if (qt[ci] < 0) qt[ci] = qtAlloc(qx ? mx : qt[o], qy ? my : qt[o+1], hs);
-  qtIns(qt[ci], bi, bx, by);
-}
-
-function qtCalc(ni, px, py, k2, th2) {
-  if (ni < 0) return;
-  const o = ni * QF;
-  if (qt[o+5] === 0) return;
-  const dx = qt[o+3] - px, dy = qt[o+4] - py;
-  let d2 = dx*dx + dy*dy;
-  if (d2 < 0.0001) d2 = 0.0001;
-  if (qt[o+10] >= 0 || qt[o+2]*qt[o+2]/d2 < th2) {
-    const d = Math.sqrt(d2), f = -(k2 * qt[o+5]) / d2;
-    _fx += (dx/d)*f; _fy += (dy/d)*f;
-    return;
-  }
-  for (let c = 6; c < 10; c++) if (qt[o+c] >= 0) qtCalc(qt[o+c], px, py, k2, th2);
-}
-
-// ── Force layout ─────────────────────────────────────────────────
-function initPositions() {
-  const r = canvas.parentElement.getBoundingClientRect();
-  const cx = r.width / 2, cy = r.height / 2;
-  const rad = Math.min(cx, cy) * 0.7;
-  for (let i = 0; i < N; i++) {
-    const a = (2 * Math.PI * i) / N - Math.PI / 2;
-    posX[i] = cx + rad * Math.cos(a);
-    posY[i] = cy + rad * Math.sin(a);
-  }
-}
-
-function runForceLayout(w, h) {
-  return new Promise(resolve => {
-    layoutAbortFlag = false;
-    const cx = w/2, cy = h/2;
-    const k = Math.sqrt(w*h / Math.max(N, 1)), k2 = k*k;
-    const totalIters = Math.min(300, Math.max(50, Math.floor(40000 / Math.max(N, 1))));
-    const CHUNK = 50, useBH = N > 100, th2 = 0.64;
-    const dx = new Float64Array(N), dy = new Float64Array(N);
-    const progressEl = document.getElementById('layoutProgress');
-    const fillEl = document.getElementById('layoutProgressFill');
-    if (N > 50) { progressEl.style.display = 'block'; fillEl.style.width = '0%'; }
-    let iter = 0;
-
-    function doChunk() {
-      if (layoutAbortFlag) { progressEl.style.display = 'none'; resolve(); return; }
-      const end = Math.min(iter + CHUNK, totalIters);
-      for (; iter < end; iter++) {
-        dx.fill(0); dy.fill(0);
-
-        if (useBH) {
-          qtBuild();
-          for (let i = 0; i < N; i++) {
-            _fx = 0; _fy = 0;
-            qtCalc(0, posX[i], posY[i], k2, th2);
-            dx[i] += _fx; dy[i] += _fy;
-          }
-        } else {
-          for (let i = 0; i < N; i++) for (let j = i+1; j < N; j++) {
-            let ddx = posX[i]-posX[j], ddy = posY[i]-posY[j];
-            let dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
-            let f = k2/dist, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
-            dx[i] += fx; dy[i] += fy; dx[j] -= fx; dy[j] -= fy;
-          }
-        }
-
-        for (let i = 0; i < visEdges; i++) {
-          const si = edgeSrc[i], di = edgeDst[i];
-          let ddx = posX[si]-posX[di], ddy = posY[si]-posY[di];
-          let dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
-          let f = (dist*dist)/k, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
-          dx[si] -= fx; dy[si] -= fy; dx[di] += fx; dy[di] += fy;
-        }
-
-        for (let i = 0; i < N; i++) {
-          dx[i] -= (posX[i]-cx)*0.01; dy[i] -= (posY[i]-cy)*0.01;
-        }
-
-        const temp = Math.max(0.1, 1 - iter/totalIters);
-        for (let i = 0; i < N; i++) {
-          let dist = Math.sqrt(dx[i]*dx[i] + dy[i]*dy[i]) || 0.01;
-          let cap = Math.min(dist, 10*temp);
-          posX[i] += (dx[i]/dist)*cap; posY[i] += (dy[i]/dist)*cap;
-          posX[i] = Math.max(40, Math.min(w-40, posX[i]));
-          posY[i] = Math.max(40, Math.min(h-40, posY[i]));
-        }
-      }
-      fillEl.style.width = Math.round(100*iter/totalIters) + '%';
-      if (iter < totalIters) { drawGraph(); setTimeout(doChunk, 0); }
-      else { progressEl.style.display = 'none'; resetView(); drawGraph(); resolve(); }
-    }
-    doChunk();
-  });
-}
-
-// ── Node click → detail panel ────────────────────────────────────
-function handleNodeClick(e) {
-  const r = canvas.getBoundingClientRect();
-  const mx = e.clientX - r.left, my = e.clientY - r.top;
-  const wx = (mx - vx) / vs, wy = (my - vy) / vs;
-  const baseR = Math.max(2, Math.min(8, 400/Math.sqrt(Math.max(N, 1))));
-  const hitR = baseR * 2;
-  let best = -1, bestD = hitR * hitR;
-  for (let i = 0; i < N; i++) {
-    const dx = posX[i] - wx, dy = posY[i] - wy;
-    const d2 = dx*dx + dy*dy;
-    if (d2 < bestD) { bestD = d2; best = i; }
-  }
-  const panel = document.getElementById('nodeDetail');
-  if (best < 0) { panel.style.display = 'none'; return; }
-  showNodeDetail(best);
-}
-
-function showNodeDetail(ni) {
-  const panel = document.getElementById('nodeDetail');
-  document.getElementById('ndName').textContent = nodeNames[ni];
-
-  // Find current round from replay position
-  let curRound = 0;
-  if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
-
-  // Key count from latest snapshot ≤ current round
-  let keyCount = 0, peerCount = 0;
-  for (let r = snapRounds.length - 1; r >= 0; r--) {
-    if (snapRounds[r] <= curRound) { keyCount = snapEntries[r][ni] || 0; peerCount = snapPeerCount[r][ni] || 0; break; }
-  }
-
-  let html = '';
-  if (isDist) {
-    // Find latest distribution snapshot for this node
-    let snap = null;
-    for (let r = snapRounds.length - 1; r >= 0; r--) {
-      if (snapRounds[r] <= curRound) {
-        snap = {
-          members: snapMembers[r][ni] || 0,
-          registry: snapRegistry[r][ni] || 0,
-          cache: snapCache[r][ni] || 0,
-          alive: snapAlive[r][ni],
-          routing: snapRouting[r][ni] || 0,
-          repair: snapRepair[r][ni] || 0,
-          directory: snapDirectory[r][ni] || 0,
-          tombstones: snapTombstone[r][ni] || 0,
-        };
-        break;
-      }
-    }
-    if (snap) {
-      html += '<div class="nd-row"><span class="nd-key">Status</span><span class="nd-val" style="color:' + (snap.alive ? '#22c55e' : '#ef4444') + '">' + (snap.alive ? 'Alive' : 'Dead') + '</span></div>';
-      html += '<div class="nd-row"><span class="nd-key">Members</span><span class="nd-val">' + snap.members + '</span></div>';
-      html += '<div class="nd-row"><span class="nd-key">Routing Table</span><span class="nd-val">' + snap.routing + '</span></div>';
-      html += '<div class="nd-row"><span class="nd-key">Directory</span><span class="nd-val">' + snap.directory + '</span></div>';
-      html += '<div class="nd-row"><span class="nd-key">Cache</span><span class="nd-val">' + snap.cache + '</span></div>';
-      html += '<div class="nd-row"><span class="nd-key">Registry</span><span class="nd-val">' + snap.registry + '</span></div>';
-      html += '<div class="nd-row"><span class="nd-key">Tombstones</span><span class="nd-val">' + snap.tombstones + '</span></div>';
-      html += '<div class="nd-row"><span class="nd-key">Repair Queue</span><span class="nd-val">' + snap.repair + '</span></div>';
-    }
-  } else {
-    html += '<div class="nd-row"><span class="nd-key">Community</span><span class="nd-val">' + (community[ni] !== undefined ? community[ni] : '-') + '</span></div>';
-    html += '<div class="nd-row"><span class="nd-key">Pushes Sent</span><span class="nd-val">' + (metricPushesSent[ni] || 0) + '</span></div>';
-    html += '<div class="nd-row"><span class="nd-key">Pushes Recv</span><span class="nd-val">' + (metricPushesRecv[ni] || 0) + '</span></div>';
-    html += '<div class="nd-row"><span class="nd-key">Keys</span><span class="nd-val">' + keyCount + '/' + totalKeys + '</span></div>';
-    html += '<div class="nd-row"><span class="nd-key">Peers</span><span class="nd-val">' + peerCount + '</span></div>';
-  }
-  document.getElementById('ndStats').innerHTML = html;
-
-  // Mini event log: last 20 events for this node up to cursor
-  const name = nodeNames[ni];
-  let evHtml = '<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Recent events:</div>';
-  let count = 0;
-  for (let i = Math.min(replayCursor, allEvents.length) - 1; i >= 0 && count < 20; i--) {
-    if (allEvents[i].node === name) {
-      evHtml += '<div class="nd-ev">' + allEvents[i].kind + (allEvents[i].detail ? ': ' + formatDetail(allEvents[i].kind, allEvents[i].detail).replace(/&[lr]arr;/g, '→') : '') + '</div>';
-      count++;
-    }
-  }
-  document.getElementById('ndEvents').innerHTML = evHtml;
-
-  panel.style.display = 'block';
-}
-
-document.getElementById('nodeDetailClose').addEventListener('click', () => {
-  document.getElementById('nodeDetail').style.display = 'none';
-});
-
-// ── Community detection (BFS on visible edges) ──────────────────
-function detectCommunities() {
-  community = new Int32Array(N).fill(-1);
-  numCommunities = 0;
-  const adj = new Array(N);
-  for (let i = 0; i < N; i++) adj[i] = [];
-  for (let i = 0; i < totalEdges; i++) {
-    adj[edgeSrc[i]].push(edgeDst[i]);
-    adj[edgeDst[i]].push(edgeSrc[i]);
-  }
-  const queue = [];
-  for (let i = 0; i < N; i++) {
-    if (community[i] >= 0) continue;
-    const cid = numCommunities++;
-    community[i] = cid;
-    queue.push(i);
-    while (queue.length > 0) {
-      const u = queue.pop();
-      for (const v of adj[u]) {
-        if (community[v] < 0) { community[v] = cid; queue.push(v); }
-      }
-    }
-  }
-}
-
-// ── Convex hull (Graham scan) ───────────────────────────────────
-function convexHull(points) {
-  if (points.length < 3) return points.slice();
-  points.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
-  const cross = (o, a, b) => (a[0]-o[0])*(b[1]-o[1]) - (a[1]-o[1])*(b[0]-o[0]);
-  const lower = [];
-  for (const p of points) {
-    while (lower.length >= 2 && cross(lower[lower.length-2], lower[lower.length-1], p) <= 0) lower.pop();
-    lower.push(p);
-  }
-  const upper = [];
-  for (let i = points.length - 1; i >= 0; i--) {
-    const p = points[i];
-    while (upper.length >= 2 && cross(upper[upper.length-2], upper[upper.length-1], p) <= 0) upper.pop();
-    upper.push(p);
-  }
-  lower.pop(); upper.pop();
-  return lower.concat(upper);
-}
-
-function computeCommunityHulls() {
-  communityHulls = [];
-  for (let c = 0; c < numCommunities; c++) {
-    const pts = [];
-    for (let i = 0; i < N; i++) {
-      if (community[i] === c) pts.push([posX[i], posY[i]]);
-    }
-    communityHulls.push(pts.length >= 3 ? convexHull(pts) : pts);
-  }
-}
-
-// ── Analytics charts ────────────────────────────────────────────
-function drawAllCharts() {
-  drawBadges();
-  drawConvergenceChart();
-  drawHeatmap();
-  drawLoadHistogram();
-}
-
-function drawBadges() {
-  const grid = document.getElementById('badgeGrid');
-
-  if (isDist) {
-    const hasSnaps = snapRounds.length > 0;
-    const lastRound = hasSnaps ? snapRounds.length - 1 : -1;
-
-    // Alive count
-    let aliveCount = N;
-    if (lastRound >= 0) {
-      aliveCount = 0;
-      for (let i = 0; i < N; i++) if (snapAlive[lastRound][i]) aliveCount++;
-    }
-
-    // Membership accuracy: fraction of alive nodes with correct member_count
-    let memAccuracy = 1.0;
-    if (lastRound >= 0) {
-      let correct = 0, alive = 0;
-      for (let i = 0; i < N; i++) {
-        if (!snapAlive[lastRound][i]) continue;
-        alive++;
-        if (snapMembers[lastRound][i] >= aliveCount - 1) correct++;
-      }
-      memAccuracy = alive > 0 ? correct / alive : 1;
-    }
-
-    // Registry max
-    let maxReg = 0;
-    if (lastRound >= 0) {
-      for (let i = 0; i < N; i++) if (snapRegistry[lastRound][i] > maxReg) maxReg = snapRegistry[lastRound][i];
-    }
-
-    // Cache total
-    let totalCache = 0;
-    if (lastRound >= 0) {
-      for (let i = 0; i < N; i++) if (snapAlive[lastRound][i]) totalCache += snapCache[lastRound][i];
-    }
-
-    // Repair queue total
-    let totalRepair = 0;
-    if (lastRound >= 0) {
-      for (let i = 0; i < N; i++) if (snapAlive[lastRound][i]) totalRepair += snapRepair[lastRound][i];
-    }
-
-    const memColor = memAccuracy >= 0.99 ? 'green' : memAccuracy >= 0.8 ? 'yellow' : 'red';
-    const aliveColor = aliveCount === N ? 'green' : aliveCount >= N * 0.8 ? 'yellow' : 'red';
-
-    grid.innerHTML =
-      badge(aliveColor, aliveCount + '/' + N, 'Alive Nodes') +
-      badge(memColor, (memAccuracy * 100).toFixed(0) + '%', 'Membership') +
-      badge('', maxReg, 'Registry Size') +
-      badge('', totalCache, 'Cache Total') +
-      badge(totalRepair > 0 ? 'yellow' : 'green', totalRepair, 'Repair Queue') +
-      badge('', allEvents.length, 'Events');
-    return;
-  }
-
-  const hasSnaps = snapRounds.length > 0;
-
-  // Delivery ratio
-  let delivery = 1.0;
-  if (hasSnaps) {
-    const last = snapEntries[snapEntries.length - 1];
-    let full = 0;
-    for (let i = 0; i < N; i++) if (last[i] >= totalKeys && totalKeys > 0) full++;
-    delivery = N > 0 ? full / N : 1;
-  }
-
-  // Convergence round
-  let convRound = hasSnaps ? -1 : 0;
-  if (hasSnaps && totalKeys > 0) {
-    for (let r = 0; r < snapRounds.length; r++) {
-      let allFull = true;
-      for (let i = 0; i < N; i++) { if (snapEntries[r][i] < totalKeys) { allFull = false; break; } }
-      if (allFull) { convRound = snapRounds[r]; break; }
-    }
-  }
-
-  // Redundancy
-  const redundancy = metricTotalPushes > 0 ? metricRedundant / metricTotalPushes : 0;
-
-  // Load balance CV
-  let mean = 0, variance = 0;
-  if (N > 0) {
-    for (let i = 0; i < N; i++) mean += metricPushesRecv[i];
-    mean /= N;
-    for (let i = 0; i < N; i++) { const d = metricPushesRecv[i] - mean; variance += d * d; }
-    variance /= N;
-  }
-  const cv = mean > 0 ? Math.sqrt(variance) / mean : 0;
-
-  // Amplification
-  const amp = N > 0 ? metricTotalPushes / N : 0;
-
-  const logN = N > 1 ? Math.log2(N) : 1;
-  const delColor = delivery >= 0.99 ? 'green' : delivery >= 0.9 ? 'yellow' : 'red';
-  const convColor = convRound < 0 ? 'red' : convRound <= 2 * logN ? 'green' : convRound <= 3 * logN ? 'yellow' : 'red';
-  const redColor = redundancy < 0.2 ? 'green' : redundancy < 0.4 ? 'yellow' : 'red';
-  const cvColor = cv < 0.3 ? 'green' : cv < 0.6 ? 'yellow' : 'red';
-
-  grid.innerHTML =
-    badge(delColor, (delivery * 100).toFixed(1) + '%', 'Delivery') +
-    badge(convColor, convRound < 0 ? 'Never' : 'Round ' + convRound, 'Convergence') +
-    badge(redColor, (redundancy * 100).toFixed(1) + '%', 'Redundancy') +
-    badge(cvColor, 'CV ' + cv.toFixed(2), 'Load Balance') +
-    badge('', metricTotalPushes.toLocaleString(), 'Total Pushes') +
-    badge('', amp.toFixed(2) + '\u00d7', 'Amplification');
-}
-
-function badge(color, val, label) {
-  return '<div class="badge ' + color + '"><div class="badge-val">' + val + '</div><div class="badge-lbl">' + label + '</div></div>';
-}
-
-function drawConvergenceChart() {
-  const cv = document.getElementById('convCanvas');
-  if (!snapRounds.length || totalKeys === 0) {
-    cv.style.display = 'none';
-    const sec = document.getElementById('convSection');
-    if (!sec.querySelector('.chart-empty')) { const d = document.createElement('div'); d.className = 'chart-empty'; d.textContent = 'No snapshot data'; sec.appendChild(d); }
-    return;
-  }
-  cv.style.display = 'block';
-  const sec = document.getElementById('convSection');
-  const emp = sec.querySelector('.chart-empty');
-  if (emp) emp.remove();
-
-  const dpr = devicePixelRatio;
-  const w = cv.parentElement.clientWidth, h = 180;
-  cv.width = w * dpr; cv.height = h * dpr;
-  cv.style.width = w + 'px'; cv.style.height = h + 'px';
-  const c = cv.getContext('2d');
-  c.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-  const pad = { l: 45, r: 12, t: 12, b: 28 };
-  const cw = w - pad.l - pad.r, ch = h - pad.t - pad.b;
-  const maxRound = snapRounds[snapRounds.length - 1] || 1;
-
-  // Background
-  c.fillStyle = '#1a1d2e'; c.fillRect(0, 0, w, h);
-
-  // Grid
-  c.strokeStyle = '#2a2d3a'; c.lineWidth = 1;
-  for (let pct = 0; pct <= 100; pct += 25) {
-    const y = pad.t + ch * (1 - pct / 100);
-    c.beginPath(); c.moveTo(pad.l, y); c.lineTo(pad.l + cw, y); c.stroke();
-  }
-
-  // Compute data points
-  const pts = [];
-  if (isDist) {
-    // Membership convergence: fraction of alive nodes with correct member count per round
-    for (let r = 0; r < snapRounds.length; r++) {
-      let alive = 0, correct = 0;
-      let aliveCount = 0;
-      for (let i = 0; i < N; i++) if (snapAlive[r][i]) aliveCount++;
-      for (let i = 0; i < N; i++) {
-        if (!snapAlive[r][i]) continue;
-        alive++;
-        if (snapMembers[r][i] >= aliveCount - 1) correct++;
-      }
-      pts.push({ round: snapRounds[r], pct: alive > 0 ? correct / alive * 100 : 0 });
-    }
-  } else {
-    // existing gossip convergence
-    for (let r = 0; r < snapRounds.length; r++) {
-      let full = 0;
-      for (let i = 0; i < N; i++) if (snapEntries[r][i] >= totalKeys) full++;
-      pts.push({ round: snapRounds[r], pct: N > 0 ? full / N * 100 : 0 });
-    }
-  }
-
-  // Draw fill
-  c.beginPath();
-  c.moveTo(pad.l, pad.t + ch);
-  for (const p of pts) {
-    const x = pad.l + (p.round / maxRound) * cw;
-    const y = pad.t + ch * (1 - p.pct / 100);
-    c.lineTo(x, y);
-  }
-  c.lineTo(pad.l + (pts[pts.length-1].round / maxRound) * cw, pad.t + ch);
-  c.closePath();
-  c.fillStyle = 'rgba(99,102,241,0.2)'; c.fill();
-
-  // Draw line
-  c.beginPath();
-  for (let i = 0; i < pts.length; i++) {
-    const x = pad.l + (pts[i].round / maxRound) * cw;
-    const y = pad.t + ch * (1 - pts[i].pct / 100);
-    i === 0 ? c.moveTo(x, y) : c.lineTo(x, y);
-  }
-  c.strokeStyle = '#6366f1'; c.lineWidth = 2; c.stroke();
-
-  // Current replay round marker
-  let curRound = 0;
-  if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
-  const mx = pad.l + (curRound / maxRound) * cw;
-  c.setLineDash([4, 3]); c.strokeStyle = '#f59e0b'; c.lineWidth = 1;
-  c.beginPath(); c.moveTo(mx, pad.t); c.lineTo(mx, pad.t + ch); c.stroke();
-  c.setLineDash([]);
-
-  // Axes labels
-  c.fillStyle = '#6b7280'; c.font = '10px system-ui,sans-serif';
-  c.textAlign = 'right';
-  for (let pct = 0; pct <= 100; pct += 25) {
-    c.fillText(pct + '%', pad.l - 4, pad.t + ch * (1 - pct / 100) + 3);
-  }
-  c.textAlign = 'center';
-  const step = Math.max(1, Math.ceil(maxRound / 8));
-  for (let r = 0; r <= maxRound; r += step) {
-    c.fillText(r, pad.l + (r / maxRound) * cw, h - 6);
-  }
-}
-
-function drawHeatmap() {
-  const cv = document.getElementById('heatCanvas');
-  const tooltip = document.getElementById('heatTooltip');
-  if (!snapRounds.length || totalKeys === 0) {
-    cv.style.display = 'none';
-    const sec = document.getElementById('heatSection');
-    if (!sec.querySelector('.chart-empty')) { const d = document.createElement('div'); d.className = 'chart-empty'; d.textContent = 'No snapshot data'; sec.appendChild(d); }
-    return;
-  }
-  cv.style.display = 'block';
-  const sec = document.getElementById('heatSection');
-  const emp = sec.querySelector('.chart-empty');
-  if (emp) emp.remove();
-
-  const dpr = devicePixelRatio;
-  const w = cv.parentElement.clientWidth;
-  const padL = 60, padR = 8, padT = 4, padB = 24;
-  const cols = snapRounds.length, rows = N;
-  const cellW = Math.max(1, Math.floor((w - padL - padR) / Math.max(cols, 1)));
-  const cellH = N <= 50 ? 14 : Math.max(1, Math.min(4, Math.floor(220 / N)));
-  const h = padT + rows * cellH + padB;
-  cv.width = w * dpr; cv.height = h * dpr;
-  cv.style.width = w + 'px'; cv.style.height = h + 'px';
-  const c = cv.getContext('2d');
-  c.setTransform(dpr, 0, 0, dpr, 0, 0);
-  c.fillStyle = '#1a1d2e'; c.fillRect(0, 0, w, h);
-
-  // Sort nodes by name
-  const sortedIdx = Array.from({length: N}, (_, i) => i);
-  sortedIdx.sort((a, b) => nodeNames[a].localeCompare(nodeNames[b]));
-
-  // Draw cells
-  for (let ri = 0; ri < rows; ri++) {
-    const ni = sortedIdx[ri];
-    for (let ci = 0; ci < cols; ci++) {
-      const frac = totalKeys > 0 ? (snapEntries[ci][ni] || 0) / totalKeys : 0;
-      const g = Math.round(frac * 200);
-      c.fillStyle = 'rgb(' + (255 - g) + ',' + (255 - Math.round(frac * 55)) + ',' + (255 - g) + ')';
-      if (frac > 0) c.fillStyle = 'rgb(' + Math.round(30 + (1-frac)*225) + ',' + Math.round(80 + (1-frac)*175) + ',' + Math.round(30 + (1-frac)*225) + ')';
-      else c.fillStyle = '#2a2d3a';
-      c.fillRect(padL + ci * cellW, padT + ri * cellH, cellW - (cellW > 2 ? 1 : 0), cellH - (cellH > 2 ? 1 : 0));
-    }
-  }
-
-  // Node labels (only if space)
-  if (cellH >= 10) {
-    c.fillStyle = '#9ca3af'; c.font = '9px system-ui,sans-serif'; c.textAlign = 'right';
-    for (let ri = 0; ri < rows; ri++) {
-      c.fillText(nodeNames[sortedIdx[ri]], padL - 3, padT + ri * cellH + cellH - 2);
-    }
-  }
-
-  // Round labels
-  c.fillStyle = '#6b7280'; c.font = '9px system-ui,sans-serif'; c.textAlign = 'center';
-  const labelStep = Math.max(1, Math.ceil(cols / 10));
-  for (let ci = 0; ci < cols; ci += labelStep) {
-    c.fillText(snapRounds[ci], padL + ci * cellW + cellW / 2, h - 6);
-  }
-
-  // Current round marker
-  let curRound = 0;
-  if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
-  let markerCol = 0;
-  for (let ci = 0; ci < cols; ci++) { if (snapRounds[ci] <= curRound) markerCol = ci; }
-  const mx = padL + markerCol * cellW + cellW / 2;
-  c.setLineDash([3, 2]); c.strokeStyle = '#f59e0b'; c.lineWidth = 1;
-  c.beginPath(); c.moveTo(mx, padT); c.lineTo(mx, padT + rows * cellH); c.stroke();
-  c.setLineDash([]);
-
-  // Hover tooltip
-  cv.onmousemove = (e) => {
-    const rect = cv.getBoundingClientRect();
-    const ex = e.clientX - rect.left, ey = e.clientY - rect.top;
-    const col = Math.floor((ex - padL) / cellW);
-    const row = Math.floor((ey - padT) / cellH);
-    if (col >= 0 && col < cols && row >= 0 && row < rows) {
-      const ni = sortedIdx[row];
-      const entries = snapEntries[col][ni] || 0;
-      const pct = totalKeys > 0 ? Math.round(entries / totalKeys * 100) : 0;
-      // Tooltip text depends on trace type
-      if (isDist) {
-        tooltip.textContent = nodeNames[ni] + ' at round ' + snapRounds[col] + ': registry ' + entries;
-      } else {
-        tooltip.textContent = nodeNames[ni] + ' at round ' + snapRounds[col] + ': ' + entries + '/' + totalKeys + ' keys (' + pct + '%)';
-      }
-      tooltip.style.display = 'block';
-      tooltip.style.left = (ex + 12) + 'px'; tooltip.style.top = (ey - 20) + 'px';
-    } else { tooltip.style.display = 'none'; }
-  };
-  cv.onmouseleave = () => { tooltip.style.display = 'none'; };
-}
-
-function drawLoadHistogram() {
-  const cv = document.getElementById('loadCanvas');
-  const dpr = devicePixelRatio;
-  const w = cv.parentElement.clientWidth, h = 150;
-  cv.width = w * dpr; cv.height = h * dpr;
-  cv.style.width = w + 'px'; cv.style.height = h + 'px';
-  const c = cv.getContext('2d');
-  c.setTransform(dpr, 0, 0, dpr, 0, 0);
-  c.fillStyle = '#1a1d2e'; c.fillRect(0, 0, w, h);
-
-  if (N === 0) return;
-
-  const pad = { l: 40, r: 8, t: 8, b: 24 };
-  const cw = w - pad.l - pad.r, ch = h - pad.t - pad.b;
-
-  // Get data up to current replay pos from cumulative
-  let data;
-  let curRound = 0;
-  if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
-
-  if (isDist) {
-    // Show cache size per node at current round
-    data = new Int32Array(N);
-    let bestR = -1;
-    for (let r = 0; r < snapRounds.length; r++) {
-      if (snapRounds[r] <= curRound) bestR = r;
-    }
-    if (bestR >= 0) {
-      for (let i = 0; i < N; i++) data[i] = snapCache[bestR][i];
-    }
-  } else {
-    // Find the closest round in cumulPushRecv
-    let bestR = -1;
-    for (let r = 0; r < snapRounds.length; r++) {
-      if (snapRounds[r] <= curRound) bestR = r;
-    }
-
-    if (bestR >= 0 && cumulPushRecv.length > bestR) {
-      data = cumulPushRecv[bestR];
-    } else {
-      data = metricPushesRecv; // fallback: total
-    }
-  }
-
-  // Compute stats
-  let maxVal = 0, mean = 0;
-  for (let i = 0; i < N; i++) { if (data[i] > maxVal) maxVal = data[i]; mean += data[i]; }
-  mean /= N;
-  if (maxVal === 0) maxVal = 1;
-  let std = 0;
-  for (let i = 0; i < N; i++) { const d = data[i] - mean; std += d * d; }
-  std = Math.sqrt(std / N);
-
-  // Bin for large N
-  const useBins = N > 100;
-  let barData, barCount;
-  if (useBins) {
-    barCount = Math.min(50, N);
-    barData = new Float64Array(barCount);
-    const binCounts = new Int32Array(barCount);
-    for (let i = 0; i < N; i++) {
-      const bin = Math.min(barCount - 1, Math.floor(i / N * barCount));
-      barData[bin] += data[i]; binCounts[bin]++;
-    }
-    for (let i = 0; i < barCount; i++) if (binCounts[i] > 0) barData[i] /= binCounts[i];
-    // Recompute max
-    maxVal = 0;
-    for (let i = 0; i < barCount; i++) if (barData[i] > maxVal) maxVal = barData[i];
-    if (maxVal === 0) maxVal = 1;
-  } else {
-    barCount = N;
-    barData = data;
-  }
-
-  const barW = Math.max(1, cw / barCount - (barCount < 50 ? 1 : 0));
-
-  for (let i = 0; i < barCount; i++) {
-    const val = barData[i];
-    const barH = (val / maxVal) * ch;
-    const dev = std > 0 ? Math.abs(val - mean) / std : 0;
-    // Color by deviation: green near mean, yellow moderate, red outlier
-    let r, g, b;
-    if (dev < 1) { r = 34; g = 197; b = 94; }
-    else if (dev < 2) { r = 245; g = 158; b = 11; }
-    else { r = 239; g = 68; b = 68; }
-    c.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
-    c.fillRect(pad.l + i * (cw / barCount), pad.t + ch - barH, barW, barH);
-  }
-
-  // Mean line
-  const meanY = pad.t + ch - (mean / maxVal) * ch;
-  c.setLineDash([4, 3]); c.strokeStyle = '#e0e0e0'; c.lineWidth = 1;
-  c.beginPath(); c.moveTo(pad.l, meanY); c.lineTo(pad.l + cw, meanY); c.stroke();
-  c.setLineDash([]);
-
-  // Labels
-  c.fillStyle = '#6b7280'; c.font = '10px system-ui,sans-serif';
-  c.textAlign = 'right';
-  c.fillText(maxVal, pad.l - 4, pad.t + 10);
-  c.fillText('0', pad.l - 4, pad.t + ch);
-  c.textAlign = 'left';
-  c.fillText('mean: ' + mean.toFixed(1), pad.l + 4, meanY - 4);
-  c.textAlign = 'center';
-  c.fillText(useBins ? 'nodes (binned)' : 'node index', pad.l + cw / 2, h - 4);
-}
-
-// ── Drawing ──────────────────────────────────────────────────────
-function drawGraph() {
-  const r = canvas.parentElement.getBoundingClientRect();
-  const w = r.width, h = r.height, dpr = devicePixelRatio, now = performance.now();
-
-  ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
-  ctx2d.clearRect(0, 0, w, h);
-  ctx2d.setTransform(dpr*vs, 0, 0, dpr*vs, dpr*vx, dpr*vy);
-
-  // Viewport in world coordinates
-  const v0x = -vx/vs, v0y = -vy/vs, v1x = (w-vx)/vs, v1y = (h-vy)/vs;
-
-  // Adaptive sizing
-  const baseR = Math.max(2, Math.min(8, 400/Math.sqrt(Math.max(N, 1))));
-  const showStroke = N <= 200;
-
-  // Semantic zoom levels
-  const showHulls = vs < 0.5 && numCommunities > 1;
-  const showNodes = vs >= 0.2;
-  const showEdges = vs >= 0.2 && !(vs < 0.5 && N > 1000);
-  const showLabels = vs * baseR > 6;
-  const thickDetail = vs > 1.5;
-
-  // Flash state
-  const hasNodeFlash = flashNode >= 0 && now - flashNodeT < 400;
-  const hasEdgeFlash = flashSrc >= 0 && now - flashEdgeT < 600;
-
-  // ── Community hulls (zoomed out) ──
-  if (showHulls) {
-    for (let c = 0; c < numCommunities; c++) {
-      const hull = communityHulls[c];
-      if (!hull || hull.length < 2) continue;
-      const color = communityColors[c % communityColors.length];
-      // Expand hull slightly for padding
-      let cx = 0, cy = 0;
-      for (const p of hull) { cx += p[0]; cy += p[1]; }
-      cx /= hull.length; cy /= hull.length;
-      const pad = 20 / vs;
-
-      ctx2d.beginPath();
-      for (let i = 0; i < hull.length; i++) {
-        const dx = hull[i][0] - cx, dy = hull[i][1] - cy;
-        const d = Math.sqrt(dx*dx + dy*dy) || 1;
-        const px = hull[i][0] + dx/d * pad, py = hull[i][1] + dy/d * pad;
-        i === 0 ? ctx2d.moveTo(px, py) : ctx2d.lineTo(px, py);
-      }
-      ctx2d.closePath();
-      ctx2d.fillStyle = color + '18'; ctx2d.fill();
-      ctx2d.strokeStyle = color + '60'; ctx2d.lineWidth = 2/vs; ctx2d.stroke();
-
-      // Label
-      if (vs < 0.5) {
-        let count = 0;
-        for (let i = 0; i < N; i++) if (community[i] === c) count++;
-        ctx2d.fillStyle = color;
-        ctx2d.font = Math.max(12, 16/vs) + 'px system-ui,sans-serif';
-        ctx2d.textAlign = 'center';
-        ctx2d.fillText('Community ' + c + ' (' + count + ' nodes)', cx, cy);
-      }
-    }
-  }
-
-  // ── Edges ──
-  if (showEdges && !(vs < 0.15 && visEdges > 10000)) {
-    const baseAlpha = Math.min(0.25, 40/Math.sqrt(Math.max(visEdges, 1)));
-    let flashEdgeI = -1;
-
-    ctx2d.beginPath();
-    ctx2d.strokeStyle = 'rgba(99,102,241,' + baseAlpha + ')';
-    ctx2d.lineWidth = (thickDetail ? 1.5 : 1)/vs;
-    let batched = 0;
-
-    for (let i = 0; i < visEdges; i++) {
-      const si = edgeSrc[i], di = edgeDst[i];
-      const sx = posX[si], sy = posY[si], dx = posX[di], dy = posY[di];
-      if ((sx < v0x && dx < v0x) || (sx > v1x && dx > v1x) ||
-          (sy < v0y && dy < v0y) || (sy > v1y && dy > v1y)) continue;
-      if (hasEdgeFlash && si === flashSrc && di === flashDst) { flashEdgeI = i; continue; }
-      ctx2d.moveTo(sx, sy); ctx2d.lineTo(dx, dy); batched++;
-    }
-    if (batched > 0) ctx2d.stroke();
-
-    if (flashEdgeI >= 0) {
-      const si = edgeSrc[flashEdgeI], di = edgeDst[flashEdgeI];
-      const alpha = baseAlpha + (1-baseAlpha) * (1-(now-flashEdgeT)/600);
-      ctx2d.beginPath();
-      ctx2d.moveTo(posX[si], posY[si]); ctx2d.lineTo(posX[di], posY[di]);
-      ctx2d.strokeStyle = 'rgba(99,102,241,' + alpha + ')';
-      ctx2d.lineWidth = 2.5/vs;
-      ctx2d.stroke();
-    }
-  }
-
-  // ── Nodes ──
-  if (showNodes) {
-    let flashNodeI = -1;
-
-    if (isDist) {
-      // Distribution: color by alive/dead
-      let curRound = 0;
-      if (replayCursor > 0 && replayCursor <= allEvents.length) curRound = allEvents[replayCursor - 1].tick;
-      let curAlive = null;
-      for (let r = snapRounds.length - 1; r >= 0; r--) {
-        if (snapRounds[r] <= curRound) { curAlive = snapAlive[r]; break; }
-      }
-
-      // Draw alive nodes
-      ctx2d.beginPath();
-      for (let i = 0; i < N; i++) {
-        const alive = curAlive ? curAlive[i] : 1;
-        if (!alive) continue;
-        const px = posX[i], py = posY[i];
-        if (px+baseR < v0x || px-baseR > v1x || py+baseR < v0y || py-baseR > v1y) continue;
-        if (hasNodeFlash && i === flashNode) { flashNodeI = i; continue; }
-        ctx2d.moveTo(px+baseR, py); ctx2d.arc(px, py, baseR, 0, 2*Math.PI);
-      }
-      ctx2d.fillStyle = '#22c55e'; ctx2d.fill();
-      if (showStroke) { ctx2d.strokeStyle = '#16a34a'; ctx2d.lineWidth = 1.5/vs; ctx2d.stroke(); }
-
-      // Draw dead nodes
-      ctx2d.beginPath();
-      for (let i = 0; i < N; i++) {
-        const alive = curAlive ? curAlive[i] : 1;
-        if (alive) continue;
-        const px = posX[i], py = posY[i];
-        if (px+baseR < v0x || px-baseR > v1x || py+baseR < v0y || py-baseR > v1y) continue;
-        if (hasNodeFlash && i === flashNode) { flashNodeI = i; continue; }
-        ctx2d.moveTo(px+baseR, py); ctx2d.arc(px, py, baseR, 0, 2*Math.PI);
-      }
-      ctx2d.fillStyle = '#ef4444'; ctx2d.fill();
-      if (showStroke) { ctx2d.strokeStyle = '#dc2626'; ctx2d.lineWidth = 1.5/vs; ctx2d.stroke(); }
-    } else {
-      // Gossip: existing community/default coloring
-      const useCommunityColor = numCommunities > 1;
-
-      if (useCommunityColor) {
-        // Batch by community color
-        for (let c = 0; c < numCommunities; c++) {
-          ctx2d.beginPath();
-          for (let i = 0; i < N; i++) {
-            if (community[i] !== c) continue;
-            const px = posX[i], py = posY[i];
-            if (px+baseR < v0x || px-baseR > v1x || py+baseR < v0y || py-baseR > v1y) continue;
-            if (hasNodeFlash && i === flashNode) { flashNodeI = i; continue; }
-            ctx2d.moveTo(px+baseR, py); ctx2d.arc(px, py, baseR, 0, 2*Math.PI);
-          }
-          ctx2d.fillStyle = communityColors[c % communityColors.length]; ctx2d.fill();
-          if (showStroke) { ctx2d.strokeStyle = '#1a1d2e'; ctx2d.lineWidth = 1/vs; ctx2d.stroke(); }
-        }
-      } else {
-        ctx2d.beginPath();
-        for (let i = 0; i < N; i++) {
-          const px = posX[i], py = posY[i];
-          if (px+baseR < v0x || px-baseR > v1x || py+baseR < v0y || py-baseR > v1y) continue;
-          if (hasNodeFlash && i === flashNode) { flashNodeI = i; continue; }
-          ctx2d.moveTo(px+baseR, py); ctx2d.arc(px, py, baseR, 0, 2*Math.PI);
-        }
-        ctx2d.fillStyle = '#6366f1'; ctx2d.fill();
-        if (showStroke) { ctx2d.strokeStyle = '#4f46e5'; ctx2d.lineWidth = 1.5/vs; ctx2d.stroke(); }
-      }
-    }
-
-    // Flash node (shared)
-    if (flashNodeI >= 0) {
-      const t = 1-(now-flashNodeT)/400, rad = baseR+6*t;
-      ctx2d.beginPath();
-      ctx2d.arc(posX[flashNodeI], posY[flashNodeI], rad, 0, 2*Math.PI);
-      ctx2d.fillStyle = '#818cf8'; ctx2d.fill();
-      if (showStroke) { ctx2d.strokeStyle = '#4f46e5'; ctx2d.lineWidth = 1.5/vs; ctx2d.stroke(); }
-    }
-  }
-
-  // ── Labels ──
-  if (showLabels) {
-    ctx2d.fillStyle = '#c7d2fe';
-    ctx2d.font = Math.max(8, Math.min(thickDetail ? 13 : 11, (thickDetail ? 13 : 11)/vs)) + 'px system-ui,sans-serif';
-    ctx2d.textAlign = 'center';
-    for (let i = 0; i < N; i++) {
-      const px = posX[i], py = posY[i];
-      if (px < v0x || px > v1x || py < v0y || py > v1y) continue;
-      ctx2d.fillText(nodeNames[i], px, py + baseR + 14/vs);
-    }
-  }
-
-  if (hasNodeFlash || hasEdgeFlash) requestAnimationFrame(drawGraph);
-}
-
-// ── Edge visibility (binary search, zero allocation) ─────────────
-function updateVisibleEdges(pos) {
-  let lo = 0, hi = totalEdges;
-  while (lo < hi) {
-    const mid = (lo + hi) >>> 1;
-    if (edgeAppear[mid] < pos) lo = mid + 1; else hi = mid;
-  }
-  visEdges = lo;
-}
-
-// ── UI helpers ───────────────────────────────────────────────────
-function updateStats(nn, ne, nm, cr, tr) {
-  document.getElementById('statNodes').textContent = nn;
-  document.getElementById('statEdges').textContent = ne;
-  document.getElementById('statMessages').textContent = nm;
-  document.getElementById('statRound').textContent = cr + '/' + tr;
-}
-
-function formatDetail(kind, detail) {
-  if (!detail) return '';
-  switch (kind) {
-    case 'GossipRoundStarted': return '&rarr; ' + (detail.target_name || detail.target);
-    case 'PushReceived': return '&larr; ' + (detail.from_name || detail.from) + ' (' + detail.keys_updated + ' keys)';
-    case 'LocalSet': return 'key=' + detail.key;
-    case 'PeerAdded': return '+ ' + (detail.peer_name || detail.peer);
-    case 'PeerRemoved': return '- ' + (detail.peer_name || detail.peer);
-    case 'QueryReceived': return 'key=' + detail.key;
-    case 'StateSnapshot': return detail.entries + ' entries, ' + detail.peer_count + ' peers';
-    case 'Joined': return 'seed: ' + detail.seed_addr;
-    case 'MembershipChanged': return detail.target + ' → ' + detail.new_state;
-    case 'PingSent': return '→ ' + detail.target;
-    case 'AckReceived': return '← ' + detail.from;
-    case 'ActorRegistered': return 'actor: ' + detail.actor_id;
-    case 'ActorStored': return detail.actor_id + ' on ' + detail.on_node;
-    case 'ActorResolved': return detail.actor_id + ' → ' + detail.found_on;
-    case 'ActorResolveFailed': return detail.actor_id + ': ' + detail.reason;
-    case 'NameRegistered': return '"' + detail.name + '" on node ' + detail.node_idx;
-    case 'NameUnregistered': return '"' + detail.name + '" on node ' + detail.node_idx;
-    case 'NameResolved': return '"' + detail.name + '" → ' + detail.result;
-    case 'NodeKilled': return '';
-    case 'NodeRevived': return '';
-    default: return JSON.stringify(detail);
-  }
-}
-
-function makeRow(ev) {
-  const tr = document.createElement('tr');
-  if (ev.kind === 'GossipRoundStarted') tr.className = 'highlight-push';
-  else if (ev.kind === 'LocalSet') tr.className = 'highlight-set';
-  else if (ev.kind === 'NodeKilled') tr.className = 'highlight-kill';
-  else if (ev.kind === 'NodeRevived') tr.className = 'highlight-revive';
-  else if (ev.kind === 'MembershipChanged') tr.className = 'highlight-membership';
-  else if (ev.kind === 'NameRegistered' || ev.kind === 'NameUnregistered') tr.className = 'highlight-registry';
-  else if (ev.kind === 'PingSent' || ev.kind === 'AckReceived') tr.className = 'highlight-ping';
-  tr.innerHTML = '<td>'+ev.seq+'</td><td>'+ev.tick+'</td><td>'+(ev.thread||'-')+'</td><td>'+ev.node+'</td><td>'+ev.kind+'</td><td>'+formatDetail(ev.kind, ev.detail)+'</td>';
-  return tr;
-}
-
-function fmtWorker(ev) {
-  let t = ev.node + ': ' + ev.kind;
-  if (ev.kind === 'GossipRoundStarted' && ev.detail) t += ' -> ' + (ev.detail.target_name || ev.detail.target);
-  if (ev.kind === 'PushReceived' && ev.detail) t += ' <- ' + (ev.detail.from_name || ev.detail.from);
-  return t;
-}
-
-function rebuildWorkerColumns() {
-  const c = document.getElementById('workerColumns');
-  c.innerHTML = '';
-  for (const t of Object.keys(workerLogs).sort()) {
-    const col = document.createElement('div');
-    col.className = 'worker-col'; col.id = 'worker-' + t;
-    col.innerHTML = '<div class="worker-col-header">' + t + '</div>';
-    c.appendChild(col);
-  }
-}
-
-function updateWorkerColumn(thread) {
-  const col = document.getElementById('worker-' + thread);
-  if (!col) return;
-  let h = '<div class="worker-col-header">' + thread + '</div>';
-  for (const e of workerLogs[thread]) h += '<div class="worker-entry">' + e + '</div>';
-  col.innerHTML = h;
-  col.scrollTop = col.scrollHeight;
-}
-
-// ── Incremental table/worker updates ─────────────────────────────
-function updateEventTable(pos) {
-  const tbody = document.getElementById('eventTableBody');
-  const incr = pos > lastTablePos && pos - lastTablePos <= 100 && lastTablePos >= 0;
-  if (!incr) tbody.textContent = '';
-  const frag = document.createDocumentFragment();
-  const start = incr ? lastTablePos : Math.max(0, pos - MAX_TABLE_ROWS);
-  for (let i = start; i < pos && i < allEvents.length; i++) frag.appendChild(makeRow(allEvents[i]));
-  tbody.appendChild(frag);
-  if (incr) while (tbody.childNodes.length > MAX_TABLE_ROWS) tbody.removeChild(tbody.firstChild);
-  lastTablePos = pos;
-  document.getElementById('eventTableWrap').scrollTop = 1e9;
-}
-
-function updateWorkerPanel(pos) {
-  const incr = pos > lastWorkerPos && pos - lastWorkerPos <= 100 && lastWorkerPos >= 0;
-  const start = incr ? lastWorkerPos : Math.max(0, pos - 200);
-  if (!incr) workerLogs = {};
-  let needCols = !incr;
-  for (let i = start; i < pos && i < allEvents.length; i++) {
-    const ev = allEvents[i];
-    if (!ev.thread) continue;
-    if (!workerLogs[ev.thread]) { workerLogs[ev.thread] = []; needCols = true; }
-    workerLogs[ev.thread].push(fmtWorker(ev));
-    if (workerLogs[ev.thread].length > 50) workerLogs[ev.thread].shift();
-  }
-  if (needCols) rebuildWorkerColumns();
-  for (const t of Object.keys(workerLogs)) updateWorkerColumn(t);
-  lastWorkerPos = pos;
-}
-
-// ── Replay engine ────────────────────────────────────────────────
-let replayRafId = 0, playTimer = null;
-
-function stopPlayback() {
-  if (playTimer !== null) {
-    clearInterval(playTimer); playTimer = null;
-    document.getElementById('btnPlay').innerHTML = '&#9654;';
-    document.getElementById('btnPlay').title = 'Play';
-  }
-}
-
-function startPlayback() {
-  stopPlayback();
-  if (replayCursor >= allEvents.length) return;
-  const speed = parseInt(document.getElementById('speedInput').value) || 100;
-  document.getElementById('btnPlay').innerHTML = '&#9208;';
-  document.getElementById('btnPlay').title = 'Pause';
-  playTimer = setInterval(() => {
-    if (replayCursor >= allEvents.length) { stopPlayback(); return; }
-    replayTo(replayCursor + 1);
-  }, speed);
-}
-
-function replayTo(pos) {
-  replayCursor = pos;
-  if (replayRafId) return;
-  replayRafId = requestAnimationFrame(() => { replayRafId = 0; replayToImpl(replayCursor); });
-}
-
-function replayToImpl(pos) {
-  flashNode = -1; flashSrc = -1; flashDst = -1;
-
-  updateVisibleEdges(pos);
-  updateEventTable(pos);
-  updateWorkerPanel(pos);
-
-  // Flash last event
-  if (pos > 0 && pos <= allEvents.length) {
-    const ev = allEvents[pos - 1];
-    flashNode = nodeIdx.get(ev.node) ?? -1;
-    flashNodeT = performance.now();
-    if (ev.kind === 'GossipRoundStarted' && ev.detail) {
-      const t = ev.detail.target_name || ev.detail.target;
-      if (t) { flashSrc = nodeIdx.get(ev.node) ?? -1; flashDst = nodeIdx.get(t) ?? -1; flashEdgeT = performance.now(); }
-    }
-    if (ev.kind === 'PushReceived' && ev.detail) {
-      const f = ev.detail.from_name || ev.detail.from;
-      if (f) { flashSrc = nodeIdx.get(f) ?? -1; flashDst = nodeIdx.get(ev.node) ?? -1; flashEdgeT = performance.now(); }
-    }
-    if (ev.kind === 'PingSent' && ev.detail) {
-      const t = ev.detail.target;
-      if (t) { flashSrc = nodeIdx.get(ev.node) ?? -1; flashDst = nodeIdx.get(t) ?? -1; flashEdgeT = performance.now(); }
-    }
-    if (ev.kind === 'AckReceived' && ev.detail) {
-      const f = ev.detail.from;
-      if (f) { flashSrc = nodeIdx.get(f) ?? -1; flashDst = nodeIdx.get(ev.node) ?? -1; flashEdgeT = performance.now(); }
-    }
-  }
-
-  document.getElementById('replaySlider').value = pos;
-  document.getElementById('replayPos').textContent = replayCursor + '/' + allEvents.length;
-  drawGraph();
-  // Update analytics charts if visible
-  if (document.getElementById('tab-analytics').classList.contains('active')) {
-    drawConvergenceChart();
-    drawHeatmap();
-    drawLoadHistogram();
-  }
-}
-
-// ── Trace loading ────────────────────────────────────────────────
-function resetState() {
-  stopPlayback();
-  layoutAbortFlag = true;
-  nodeNames = []; nodeIdx.clear(); N = 0;
-  posX = new Float64Array(0); posY = new Float64Array(0);
-  totalEdges = 0; visEdges = 0;
-  edgeSrc = new Int32Array(0); edgeDst = new Int32Array(0); edgeAppear = new Int32Array(0);
-  flashNode = -1; flashSrc = -1; flashDst = -1;
-  allEvents = []; replayCursor = 0; workerLogs = {};
-  lastTablePos = -1; lastWorkerPos = -1;
-  vx = 0; vy = 0; vs = 1;
-  snapRounds = []; snapEntries = []; snapPeerCount = []; totalKeys = 0; numRounds = 0;
-  metricPushesSent = new Int32Array(0); metricPushesRecv = new Int32Array(0);
-  metricRedundant = 0; metricTotalPushes = 0; metricNoPeers = 0;
-  cumulPushRecv = []; eventRoundMap = [];
-  isDist = false;
-  snapMembers = []; snapRegistry = []; snapCache = []; snapAlive = [];
-  snapRouting = []; snapRepair = []; snapDirectory = []; snapTombstone = [];
-  community = new Int32Array(0); numCommunities = 0; communityHulls = [];
-  document.getElementById('eventTableBody').textContent = '';
-  document.getElementById('workerColumns').innerHTML = '';
-  document.getElementById('layoutProgress').style.display = 'none';
-  document.getElementById('nodeDetail').style.display = 'none';
-  document.getElementById('badgeGrid').innerHTML = '';
-}
-
-async function loadTrace(file) {
-  const dot = document.getElementById('statusDot');
-  const statusText = document.getElementById('statusText');
-  dot.className = 'status-dot loading';
-  statusText.textContent = 'Loading...';
-  resetState();
-
-  const resp = await fetch('/trace.json?file=' + encodeURIComponent(file));
-  if (!resp.ok) { dot.className = 'status-dot error'; statusText.textContent = 'Failed to load trace'; return; }
-  const trace = await resp.json();
-  isDist = (trace.trace_type === 'distribution');
-
-  // Build node index
-  nodeNames = trace.node_names;
-  N = nodeNames.length;
-  nodeIdx = new Map();
-  for (let i = 0; i < N; i++) nodeIdx.set(nodeNames[i], i);
-  posX = new Float64Array(N);
-  posY = new Float64Array(N);
-
-  // Build edges (initial topology)
-  const edgeKeys = new Set();
-  const tempEdges = []; // flat triples: [src, dst, appear, ...]
-  for (const [a, b] of trace.topology_edges) {
-    const si = nodeIdx.get(a), di = nodeIdx.get(b);
-    if (si === undefined || di === undefined) continue;
-    const key = si + ',' + di;
-    if (!edgeKeys.has(key)) { edgeKeys.add(key); tempEdges.push(si, di, -1); }
-  }
-
-  // Build events + extract snapshots
-  let seq = 0;
-  allEvents = [];
-  numRounds = trace.num_rounds || 0;
-
-  if (isDist) {
-    // Distribution: snapshots come from trace.snapshots_per_round directly
-    snapRounds = [];
-    for (let r = 0; r < (trace.snapshots_per_round || []).length; r++) {
-      const roundSnaps = trace.snapshots_per_round[r];
-      snapRounds.push(r + 1); // 1-indexed round
-      const memArr = new Int32Array(N);
-      const regArr = new Int32Array(N);
-      const cacheArr = new Int32Array(N);
-      const aliveArr = new Uint8Array(N);
-      const routingArr = new Int32Array(N);
-      const repairArr = new Int32Array(N);
-      const dirArr = new Int32Array(N);
-      const tombArr = new Int32Array(N);
-      for (const [nodeName, snap] of roundSnaps) {
-        const ni = nodeIdx.get(nodeName);
-        if (ni === undefined) continue;
-        memArr[ni] = snap.member_count || 0;
-        regArr[ni] = snap.registry_size || 0;
-        cacheArr[ni] = snap.cache_size || 0;
-        aliveArr[ni] = snap.is_alive ? 1 : 0;
-        routingArr[ni] = snap.routing_table_size || 0;
-        repairArr[ni] = snap.repair_queue_size || 0;
-        dirArr[ni] = snap.directory_entry_count || 0;
-        tombArr[ni] = snap.registry_tombstone_count || 0;
-      }
-      snapMembers.push(memArr);
-      snapRegistry.push(regArr);
-      snapCache.push(cacheArr);
-      snapAlive.push(aliveArr);
-      snapRouting.push(routingArr);
-      snapRepair.push(repairArr);
-      snapDirectory.push(dirArr);
-      snapTombstone.push(tombArr);
-      // For convergence chart compatibility, use registry_size as "entries"
-      snapEntries.push(regArr);
-      snapPeerCount.push(memArr);
-      // Track max for heatmap scaling
-      for (let i = 0; i < N; i++) {
-        if (regArr[i] > totalKeys) totalKeys = regArr[i];
-      }
-    }
-
-    // Distribution events (no StateSnapshot filtering needed)
-    for (const ev of trace.events) {
-      const isObj = typeof ev.kind === 'object';
-      let kind, detail;
-      if (isObj) { for (kind in ev.kind) break; detail = ev.kind[kind] || null; }
-      else { kind = ev.kind; detail = null; }
-      allEvents.push({ seq: seq++, tick: ev.tick, node: ev.node_name, thread: null, kind, detail });
-    }
-  } else {
-    // First pass: collect snapshots grouped by tick
-    const snapByTick = new Map(); // tick -> Map(nodeIdx -> {entries, peer_count})
-    for (const ev of trace.events) {
-      const isObj = typeof ev.kind === 'object';
-      if (isObj && 'StateSnapshot' in ev.kind) {
-        const snap = ev.kind.StateSnapshot.snapshot || ev.kind.StateSnapshot;
-        const ni = nodeIdx.get(ev.node_name);
-        if (ni === undefined) continue;
-        const entriesCount = snap.entries ? Object.keys(snap.entries).length : 0;
-        const peerCount = snap.peer_count || 0;
-        if (!snapByTick.has(ev.tick)) snapByTick.set(ev.tick, new Map());
-        snapByTick.get(ev.tick).set(ni, { entries: entriesCount, peer_count: peerCount });
-        if (entriesCount > totalKeys) totalKeys = entriesCount;
-        continue;
-      }
-      if (!isObj && ev.kind === 'StateSnapshot') continue;
-      let kind, detail;
-      if (isObj) { for (kind in ev.kind) break; detail = ev.kind[kind] || null; }
-      else { kind = ev.kind; detail = null; }
-      allEvents.push({ seq: seq++, tick: ev.tick, node: ev.node_name, thread: ev.thread_name, kind, detail });
-    }
-
-    // Build snapshot arrays sorted by round
-    snapRounds = Array.from(snapByTick.keys()).sort((a, b) => a - b);
-    snapEntries = []; snapPeerCount = [];
-    for (const tick of snapRounds) {
-      const eArr = new Int32Array(N);
-      const pArr = new Int32Array(N);
-      const m = snapByTick.get(tick);
-      for (const [ni, d] of m) { eArr[ni] = d.entries; pArr[ni] = d.peer_count; }
-      snapEntries.push(eArr);
-      snapPeerCount.push(pArr);
-    }
-
-    // Compute per-node metrics from events
-    metricPushesSent = new Int32Array(N);
-    metricPushesRecv = new Int32Array(N);
-    metricRedundant = 0; metricTotalPushes = 0; metricNoPeers = 0;
-
-    // Also build cumulative push-recv per round
-    const roundSet = new Set(snapRounds);
-    cumulPushRecv = [];
-    let runningRecv = new Int32Array(N);
-
-    for (let i = 0; i < allEvents.length; i++) {
-      const ev = allEvents[i];
-      const ni = nodeIdx.get(ev.node);
-      if (ni === undefined) continue;
-      if (ev.kind === 'GossipRoundStarted') {
-        metricPushesSent[ni]++;
-        metricTotalPushes++;
-      }
-      if (ev.kind === 'PushReceived') {
-        metricPushesRecv[ni]++;
-        runningRecv[ni]++;
-        if (ev.detail && ev.detail.keys_updated === 0) metricRedundant++;
-      }
-      if (ev.kind === 'GossipRoundNoPeers') { metricNoPeers++; }
-    }
-
-    // Build cumulative recv snapshots aligned to snap rounds
-    // Re-scan to build per-round cumulative
-    if (snapRounds.length > 0) {
-      const cumRecv = new Int32Array(N);
-      let sri = 0;
-      for (let i = 0; i < allEvents.length && sri < snapRounds.length; i++) {
-        const ev = allEvents[i];
-        if (ev.kind === 'PushReceived') {
-          const ni = nodeIdx.get(ev.node);
-          if (ni !== undefined) cumRecv[ni]++;
-        }
-        // When we pass a snapshot round boundary, save
-        while (sri < snapRounds.length && ev.tick >= snapRounds[sri]) {
-          cumulPushRecv.push(new Int32Array(cumRecv));
-          sri++;
-        }
-      }
-      // Fill remaining
-      while (sri < snapRounds.length) { cumulPushRecv.push(new Int32Array(cumRecv)); sri++; }
-    }
-  }
-
-  // Index PeerAdded edges
-  for (let i = 0; i < allEvents.length; i++) {
-    const ev = allEvents[i];
-    if (ev.kind !== 'PeerAdded' || !ev.detail) continue;
-    const peer = ev.detail.peer_name || ev.detail.peer;
-    if (!peer) continue;
-    const si = nodeIdx.get(ev.node), di = nodeIdx.get(peer);
-    if (si === undefined || di === undefined) continue;
-    const key = si + ',' + di;
-    if (!edgeKeys.has(key)) { edgeKeys.add(key); tempEdges.push(si, di, i); }
-  }
-
-  // Sort by appearance and build typed arrays
-  const nEdges = tempEdges.length / 3;
-  const sortIdx = new Array(nEdges);
-  for (let i = 0; i < nEdges; i++) sortIdx[i] = i;
-  sortIdx.sort((a, b) => tempEdges[a*3+2] - tempEdges[b*3+2]);
-
-  totalEdges = nEdges;
-  edgeSrc = new Int32Array(nEdges);
-  edgeDst = new Int32Array(nEdges);
-  edgeAppear = new Int32Array(nEdges);
-  for (let j = 0; j < nEdges; j++) {
-    const i = sortIdx[j];
-    edgeSrc[j] = tempEdges[i*3]; edgeDst[j] = tempEdges[i*3+1]; edgeAppear[j] = tempEdges[i*3+2];
-  }
-
-  updateVisibleEdges(0);
-
-  dot.className = 'status-dot loading';
-  statusText.textContent = 'Computing layout...';
-  updateStats(N, totalEdges, allEvents.length, trace.num_rounds, trace.num_rounds);
-
-  resizeCanvas();
-  initPositions();
-  const rect = canvas.parentElement.getBoundingClientRect();
-  await runForceLayout(rect.width, rect.height);
-
-  // Community detection + hulls
-  detectCommunities();
-  computeCommunityHulls();
-
-  dot.className = 'status-dot ready';
-  statusText.textContent = trace.name + (isDist ? ' [distribution]' : ' [gossip]') + ' (' + allEvents.length + ' events)';
-  drawGraph();
-  drawAllCharts();
-
-  // Update panel labels
-  document.querySelector('.worker-panel h2').textContent = isDist ? 'Node Status' : 'Worker Logs';
-  document.querySelector('#heatSection h3').textContent = isDist ? 'Registry Propagation' : 'Propagation Heatmap';
-  document.querySelector('#loadSection h3').textContent = isDist ? 'Cache Utilization' : 'Load Distribution';
-  document.querySelector('#convSection h3').textContent = isDist ? 'Membership Convergence' : 'Convergence Curve';
-
-  // Update stat labels
-  if (isDist) {
-    document.querySelectorAll('.stat-label')[1].textContent = 'Alive';
-  } else {
-    document.querySelectorAll('.stat-label')[1].textContent = 'Edges';
-  }
-
-  // Update stats with distribution-specific values
-  if (isDist && snapAlive.length > 0) {
-    let alive = 0;
-    const lastSnap = snapAlive[snapAlive.length - 1];
-    for (let i = 0; i < N; i++) if (lastSnap[i]) alive++;
-    updateStats(N, alive, allEvents.length, numRounds, numRounds);
-  } else {
-    updateStats(N, totalEdges, allEvents.length, numRounds, numRounds);
-  }
-
-  // Replay controls
-  document.getElementById('replayControls').style.display = 'flex';
-  const slider = document.getElementById('replaySlider');
-  slider.max = allEvents.length; slider.value = 0;
-  replayCursor = 0;
-  document.getElementById('replayPos').textContent = '0/' + allEvents.length;
-
-  document.getElementById('btnFirst').onclick = () => { stopPlayback(); replayTo(0); };
-  document.getElementById('btnPrev').onclick = () => { stopPlayback(); replayTo(Math.max(0, replayCursor-1)); };
-  document.getElementById('btnNext').onclick = () => { stopPlayback(); replayTo(Math.min(allEvents.length, replayCursor+1)); };
-  document.getElementById('btnLast').onclick = () => { stopPlayback(); replayTo(allEvents.length); };
-  slider.oninput = () => { stopPlayback(); replayTo(parseInt(slider.value)); };
-  document.getElementById('btnPlay').onclick = () => { playTimer !== null ? stopPlayback() : startPlayback(); };
-  document.getElementById('speedInput').onchange = () => { if (playTimer !== null) startPlayback(); };
-}
-
-// ── Boot ─────────────────────────────────────────────────────────
-resizeCanvas();
-(async function() {
-  const select = document.getElementById('traceSelect');
-  const dot = document.getElementById('statusDot');
-  const statusText = document.getElementById('statusText');
-  let traces;
-  try { traces = await (await fetch('/traces')).json(); }
-  catch { dot.className='status-dot error'; statusText.textContent='Failed to fetch trace list'; select.innerHTML='<option value="">Error</option>'; return; }
-  if (!traces.length) { dot.className='status-dot error'; statusText.textContent='No traces found'; select.innerHTML='<option value="">No traces found</option>'; return; }
-  select.innerHTML = '';
-  traces.forEach(t => { const o = document.createElement('option'); o.value = t.file; o.textContent = '[' + (t.trace_type || 'gossip') + '] ' + t.name+' ('+t.nodes+' nodes, '+t.events+' events)'; select.appendChild(o); });
-  select.disabled = false;
-  select.onchange = () => { if (select.value) loadTrace(select.value); };
-  loadTrace(traces[0].file);
-})();
-</script>
-</body>
-</html>
-"##;
+pub const DASHBOARD_HTML: &str = include_str!("dashboard.html");
