@atolljs/devtools 0.1.7 → 0.1.8

package/app/panels/performance.js

@@ -0,0 +1,304 @@
+// Performance view: main-thread responsiveness (runtime:longframe,
+// runtime:frames from the jank probe) and message cost (argBytes /
+// resultBytes on task events, island:ops.bytes).
+//
+// Time basis: event `at` is the emitting thread's clock, so every series
+// here buckets on the dashboard clock (performance.now() at ingest), the
+// same rule heapSeries/tput follow in main.js.
+
+const WINDOW_MS = 60_000;
+const MAX_FRAMES = 1000;      // long-frame records kept (all sessions)
+const MAX_FPS = 240;          // fps samples kept per session (~4 min)
+const WORST_ROWS = 15;
+const COST_ROWS = 30;
+const FPS_COLORS = ['#3fb950', '#79c0ff', '#a371f7', '#56d4dd', '#e275ad', '#f0883e'];
+
+const HTML = `
+  <h2>Main thread <span class="muted">— long frames and frame rate, last 60s</span></h2>
+  <div class="kpis" id="pf-kpis"></div>
+  <div id="pf-empty" class="muted" style="margin:8px 0"></div>
+  <canvas id="pf-timeline" style="width:100%;height:150px;display:block;margin-top:10px;border:1px solid #21262d;border-radius:8px;background:#010409"></canvas>
+  <div class="legend" style="margin-top:4px">
+    <span><i style="background:#d29922"></i>long frame (height = duration)</span>
+    <span><i style="background:#f85149"></i>blocking ≥ 100ms</span>
+    <span><i style="background:#3fb950"></i>fps</span>
+    <span><i style="background:#6e7681"></i>background (page hidden, ≥ 100ms script)</span>
+    <span class="muted" id="pf-legend-extra"></span>
+  </div>
+  <h2 style="margin-top:14px">Worst long frames <span class="muted">— retained frames, longest first; scripts from Long Animation Frame attribution</span></h2>
+  <table id="pf-worst"><thead><tr>
+    <th>session</th><th>when</th><th>duration</th><th>blocking</th><th>top scripts</th>
+  </tr></thead><tbody></tbody></table>
+  <h2 style="margin-top:14px">Message cost <span class="muted">— estimated structured-clone size per message</span></h2>
+  <div class="grid2">
+    <div>
+      <h2>Tasks <span class="muted">— args posted / result returned</span></h2>
+      <table id="pf-tasks"><thead><tr>
+        <th>task</th><th>calls</th><th>args avg</th><th>args max</th><th>result avg</th><th>result max</th>
+      </tr></thead><tbody></tbody></table>
+    </div>
+    <div>
+      <h2>Islands <span class="muted">— op batches worker → main</span></h2>
+      <table id="pf-islands"><thead><tr>
+        <th>instance</th><th>batches</th><th>avg</th><th>max</th><th>total</th>
+      </tr></thead><tbody></tbody></table>
+    </div>
+  </div>
+`;
+
+export function setup(api) {
+  const { state, $, esc, fmt, fmtBytes, inSel, key, sessOf } = api;
+
+  /** [{ dash, sid, ms, blockingMs, scripts }] — dashboard-clock stamped. */
+  let frames = [];
+  /** sid → [{ dash, fps, dropped }] */
+  const fps = new Map();
+  /** `${sid}|${taskId}` → cost aggregate */
+  const taskCost = new Map();
+  /** `${sid}|${instance}` → { n, sum, max } */
+  const islandCost = new Map();
+  let dirty = true;
+
+  const agg = () => ({ argN: 0, argSum: 0, argMax: 0, resN: 0, resSum: 0, resMax: 0 });
+
+  api.onEvent((sess, e) => {
+    const sid = sess.id;
+    switch (e.type) {
+      case 'runtime:longframe':
+        if (e.worker) return;
+        frames.push({ dash: performance.now(), sid, ms: e.ms, blockingMs: e.blockingMs, scripts: e.scripts, hidden: !!e.hidden });
+        if (frames.length > MAX_FRAMES) frames.splice(0, frames.length - MAX_FRAMES);
+        break;
+      case 'runtime:frames': {
+        if (e.worker) return;
+        const list = fps.get(sid) ?? [];
+        list.push({ dash: performance.now(), fps: e.fps, dropped: e.dropped });
+        if (list.length > MAX_FPS) list.shift();
+        fps.set(sid, list);
+        break;
+      }
+      case 'task:dispatch': {
+        if (e.argBytes === undefined) return;
+        const k = key(sid, e.taskId);
+        const a = taskCost.get(k) ?? agg();
+        a.argN++; a.argSum += e.argBytes; if (e.argBytes > a.argMax) a.argMax = e.argBytes;
+        taskCost.set(k, a);
+        break;
+      }
+      case 'task:settle': {
+        if (e.resultBytes === undefined) return;
+        const k = key(sid, e.taskId);
+        const a = taskCost.get(k) ?? agg();
+        a.resN++; a.resSum += e.resultBytes; if (e.resultBytes > a.resMax) a.resMax = e.resultBytes;
+        taskCost.set(k, a);
+        break;
+      }
+      case 'island:ops': {
+        if (e.bytes === undefined) return;
+        const k = key(sid, e.instance);
+        const c = islandCost.get(k) ?? { n: 0, sum: 0, max: 0 };
+        c.n++; c.sum += e.bytes; if (e.bytes > c.max) c.max = e.bytes;
+        islandCost.set(k, c);
+        break;
+      }
+      default:
+        return;
+    }
+    dirty = true;
+  });
+
+  api.onReset(() => {
+    frames = [];
+    fps.clear(); taskCost.clear(); islandCost.clear();
+    dirty = true;
+  });
+
+  api.onReconcile((ids) => {
+    frames = frames.filter((f) => ids.has(f.sid));
+    for (const sid of [...fps.keys()]) if (!ids.has(sid)) fps.delete(sid);
+    for (const m of [taskCost, islandCost]) for (const k of [...m.keys()]) if (!ids.has(sessOf(k))) m.delete(k);
+    dirty = true;
+  });
+
+  /** Long frames in the selected sessions within the last `ms` (dashboard clock). */
+  const recentFrames = (ms) => {
+    const lo = performance.now() - ms;
+    const out = [];
+    for (let i = frames.length - 1; i >= 0 && frames[i].dash >= lo; i--) {
+      if (inSel(frames[i].sid)) out.push(frames[i]);
+    }
+    return out;
+  };
+
+  const section = api.addView({
+    id: 'performance',
+    label: 'Performance',
+    order: 25,
+    html: HTML,
+    title: 'Main-thread jank, frame rate, and message cost',
+    badge: () => recentFrames(10_000).filter((f) => !f.hidden).length || null,
+  });
+
+  const visible = () => section.classList.contains('on');
+
+  function renderKpis(all) {
+    const win = all.filter((f) => !f.hidden);
+    const bg = all.filter((f) => f.hidden);
+    const bgScript = bg.reduce((a, f) => a + (f.scripts ? f.scripts.reduce((n, s) => n + s.ms, 0) : f.ms), 0);
+    const lastSamples = [...fps.entries()].filter(([sid]) => inSel(sid)).map(([, l]) => l[l.length - 1]).filter(Boolean);
+    const lo = performance.now() - WINDOW_MS;
+    const winSamples = [...fps.entries()].filter(([sid]) => inSel(sid)).flatMap(([, l]) => l.filter((s) => s.dash >= lo));
+    const cur = lastSamples.length ? Math.min(...lastSamples.map((s) => s.fps)) : undefined;
+    const min = winSamples.length ? Math.min(...winSamples.map((s) => s.fps)) : undefined;
+    const dropped = winSamples.reduce((a, s) => a + s.dropped, 0);
+    const blocking = win.reduce((a, f) => a + f.blockingMs, 0);
+    const worst = win.length ? Math.max(...win.map((f) => f.ms)) : undefined;
+    const fpsCls = (v) => (v === undefined ? '' : v < 30 ? 'bad' : v < 50 ? 'warn' : 'good');
+    $('pf-kpis').innerHTML =
+      api.kpi(String(win.length), 'long frames · 60s', win.length > 10 ? 'bad' : win.length ? 'warn' : 'good') +
+      api.kpi(`${Math.round(blocking)}<span class="muted" style="font-size:11px">ms</span>`, 'total blocking · 60s', blocking > 500 ? 'bad' : blocking > 0 ? 'warn' : '') +
+      api.kpi(cur === undefined ? '—' : String(cur), 'fps now', fpsCls(cur)) +
+      api.kpi(min === undefined ? '—' : String(min), 'min fps · 60s', fpsCls(min)) +
+      api.kpi(String(dropped), 'dropped frames · 60s', dropped > 30 ? 'warn' : '') +
+      api.kpi(worst === undefined ? '—' : `${worst}<span class="muted" style="font-size:11px">ms</span>`, 'worst frame · 60s', worst >= 200 ? 'bad' : worst ? 'warn' : '') +
+      (bg.length
+        ? api.kpi(`${bg.length}<span class="muted" style="font-size:11px"> · ${Math.round(bgScript)}ms</span>`, 'background work · 60s', '')
+        : '');
+    const anyFps = [...fps.keys()].some((sid) => inSel(sid));
+    const anyFrames = frames.some((f) => inSel(f.sid));
+    $('pf-empty').textContent = anyFps || anyFrames
+      ? ''
+      : 'No main-thread samples yet. The jank probe (connectDevtools `jank` option, on by default) reports long frames ' +
+        '(Long Animation Frames, or longtask where unsupported) and a once-a-second fps sample from browser apps; ' +
+        'Node apps and workers have no frames to report.';
+  }
+
+  function drawTimeline(win) {
+    const canvas = $('pf-timeline');
+    const ctx = canvas.getContext('2d');
+    const W = (canvas.width = canvas.clientWidth || 560);
+    const H = (canvas.height = canvas.clientHeight || 150);
+    ctx.clearRect(0, 0, W, H);
+    const L = 40, R = 34, T = 8, B = 16;
+    const pw = W - L - R, ph = H - T - B;
+    const now = performance.now();
+    const x = (dash) => L + pw * (1 - (now - dash) / WINDOW_MS);
+    const msMax = Math.max(100, ...win.map((f) => f.ms));
+    const sids = [...fps.keys()].filter((sid) => inSel(sid));
+    const fpsMax = Math.max(60, ...sids.flatMap((sid) => fps.get(sid).map((s) => s.fps)));
+
+    ctx.font = '10px ui-monospace, monospace';
+    ctx.textBaseline = 'middle';
+    for (const f of [0, 0.5, 1]) {
+      const y = T + ph - f * ph;
+      ctx.strokeStyle = f === 0 ? '#30363d' : '#21262d';
+      ctx.beginPath(); ctx.moveTo(L, Math.round(y) + 0.5); ctx.lineTo(W - R, Math.round(y) + 0.5); ctx.stroke();
+      ctx.fillStyle = '#d29922'; ctx.textAlign = 'right';
+      ctx.fillText(`${Math.round(msMax * f)}ms`, L - 4, y);
+      ctx.fillStyle = '#3fb950'; ctx.textAlign = 'left';
+      ctx.fillText(String(Math.round(fpsMax * f)), W - R + 4, y);
+    }
+    ctx.fillStyle = '#8b949e';
+    ctx.textBaseline = 'top';
+    for (const [ago, align] of [[60, 'left'], [30, 'center'], [0, 'right']]) {
+      ctx.textAlign = align;
+      ctx.fillText(ago ? `-${ago}s` : 'now', L + pw * (1 - ago / 60), T + ph + 3);
+    }
+
+    for (const f of win) {
+      const bh = Math.max(2, (f.ms / msMax) * ph);
+      ctx.fillStyle = f.hidden ? '#6e7681' : f.blockingMs >= 100 ? '#f85149' : '#d29922';
+      ctx.fillRect(Math.round(x(f.dash)) - 1, T + ph - bh, 3, bh);
+    }
+
+    sids.forEach((sid, i) => {
+      const pts = fps.get(sid).filter((s) => s.dash >= now - WINDOW_MS);
+      if (!pts.length) return;
+      ctx.strokeStyle = FPS_COLORS[i % FPS_COLORS.length];
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      pts.forEach((s, j) => {
+        const px = x(s.dash), py = T + ph - (s.fps / fpsMax) * ph;
+        j ? ctx.lineTo(px, py) : ctx.moveTo(px, py);
+      });
+      ctx.stroke();
+      ctx.lineWidth = 1;
+    });
+    $('pf-legend-extra').textContent = sids.length > 1 ? `${sids.length} sessions: one fps line each` : '';
+  }
+
+  function renderWorst() {
+    const now = performance.now();
+    const rows = frames.filter((f) => inSel(f.sid)).sort((a, b) => b.ms - a.ms).slice(0, WORST_ROWS);
+    $('pf-worst').querySelector('tbody').innerHTML = rows.length
+      ? rows.map((f) => {
+          const s = state.sessions.get(f.sid);
+          const scripts = f.scripts?.length
+            ? f.scripts.map((sc) => `<div>${sc.ms}ms <b>${esc(sc.fn || '(anonymous)')}</b> <span class="muted">${esc(shortSrc(sc.src))}</span></div>`).join('')
+            : '<span class="muted">no attribution (longtask fallback or no script)</span>';
+          return `<tr${f.hidden ? ' style="opacity:.6" title="page was hidden: frame length is throttling, script time is real"' : ''}>` +
+            `<td class="muted">${esc(s?.name ?? f.sid)}${f.hidden ? ' · background' : ''}</td><td>${fmt((now - f.dash) / 1000, 0)}s ago</td>` +
+            `<td>${f.ms}ms</td><td class="${f.blockingMs >= 100 ? 'error' : ''}">${f.blockingMs}ms</td><td>${scripts}</td></tr>`;
+        }).join('')
+      : '<tr><td colspan="5" class="muted">no long frames: frames over 50ms show up here with their slowest scripts</td></tr>';
+  }
+
+  function renderCost() {
+    const byTask = new Map();
+    for (const [k, a] of taskCost) {
+      if (!inSel(k)) continue;
+      const taskId = k.slice(k.indexOf('|') + 1);
+      const t = byTask.get(taskId) ?? { argN: 0, argSum: 0, argMax: 0, resN: 0, resSum: 0, resMax: 0 };
+      t.argN += a.argN; t.argSum += a.argSum; t.argMax = Math.max(t.argMax, a.argMax);
+      t.resN += a.resN; t.resSum += a.resSum; t.resMax = Math.max(t.resMax, a.resMax);
+      byTask.set(taskId, t);
+    }
+    const tasks = [...byTask].sort((a, b) => (b[1].argMax + b[1].resMax) - (a[1].argMax + a[1].resMax)).slice(0, COST_ROWS);
+    const avg = (sum, n) => (n ? fmtBytes(Math.round(sum / n)) : '—');
+    $('pf-tasks').querySelector('tbody').innerHTML = tasks.length
+      ? tasks.map(([id, t]) => `<tr><td>${esc(id)}</td><td>${Math.max(t.argN, t.resN)}</td>` +
+          `<td>${avg(t.argSum, t.argN)}</td><td>${t.argN ? fmtBytes(t.argMax) : '—'}</td>` +
+          `<td>${avg(t.resSum, t.resN)}</td><td>${t.resN ? fmtBytes(t.resMax) : '—'}</td></tr>`).join('')
+      : '<tr><td colspan="6" class="muted">no sized task messages yet: task:dispatch / task:settle carry argBytes / resultBytes while devtools is on</td></tr>';
+
+    const isl = [...islandCost].filter(([k]) => inSel(k)).sort((a, b) => b[1].max - a[1].max).slice(0, COST_ROWS);
+    $('pf-islands').querySelector('tbody').innerHTML = isl.length
+      ? isl.map(([k, c]) => `<tr><td>${esc(k.slice(k.indexOf('|') + 1))}</td><td>${c.n}</td>` +
+          `<td>${fmtBytes(Math.round(c.sum / c.n))}</td><td>${fmtBytes(c.max)}</td><td>${fmtBytes(c.sum)}</td></tr>`).join('')
+      : '<tr><td colspan="5" class="muted">no sized op batches yet: island:ops events carry `bytes` per batch</td></tr>';
+  }
+
+  let wasVisible = false;
+  function draw() {
+    const vis = visible();
+    if (vis && !wasVisible) dirty = true;
+    wasVisible = vis;
+    if (!vis) return;
+    const win = recentFrames(WINDOW_MS);
+    drawTimeline(win);
+    if (!dirty) return;
+    dirty = false;
+    renderKpis(win);
+    renderWorst();
+    renderCost();
+  }
+
+  let lastSel;
+  api.onRender(() => {
+    if (state.sel !== lastSel) { lastSel = state.sel; dirty = true; }
+    draw();
+  });
+  // Rolling window: "ago" labels, KPIs, and the chart move with time.
+  api.onTick(() => { dirty = true; draw(); });
+}
+
+/** Last path segments of a script URL, for compact attribution cells. */
+function shortSrc(src) {
+  if (!src) return '';
+  try {
+    const u = new URL(src);
+    return u.pathname.split('/').slice(-2).join('/') + (u.search ? '?…' : '');
+  } catch {
+    return src.slice(-60);
+  }
+}

package/app/panels/reactivity.js

@@ -0,0 +1,271 @@
+// Reactivity view: the cross-thread dependency graph from reactive:node
+// events. Lanes are owners: 'shared memory' (field sources, ids `mem:<path>`
+// shared by every thread), the main thread, and each worker slot (from the
+// pool's forwarding stamp). Edges run dep → dependent; disposed nodes fade.
+//
+// Non-source ids are per-thread counters, so they're qualified here by
+// lane: `main/e3`, `pool-1#0/b2`. Sources stay global so a worker-side
+// writer's field and a main-thread watcher meet at one node.
+
+const CSS = `
+.rx-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:11px; margin-bottom:8px; }
+.rx-wrap { display:grid; grid-template-columns: minmax(0,1fr) 280px; gap:10px; }
+.rx-graph { border:1px solid #21262d; border-radius:8px; background:#010409; overflow:auto; max-height:560px; min-height:200px; }
+.rx-graph svg { display:block; }
+.rx-graph .n { cursor:pointer; }
+.rx-graph .n rect { stroke-width:1; }
+.rx-graph .n.sel rect { stroke:#f0f6fc; stroke-width:2; }
+.rx-graph .n.off { opacity:.3; }
+.rx-graph text { font:11px ui-monospace,monospace; fill:#c9d1d9; pointer-events:none; }
+.rx-graph .lane { font-size:10px; fill:#8b949e; text-transform:uppercase; letter-spacing:.06em; }
+.rx-graph path.e { fill:none; stroke:#30363d; stroke-width:1.2; }
+.rx-graph path.e.hot { stroke:#58a6ff; stroke-width:2; }
+.rx-graph path.e.off { opacity:.25; }
+.rx-detail { border:1px solid #21262d; border-radius:8px; padding:8px 10px; font-size:11px; max-height:560px; overflow:auto; }
+.rx-empty { padding:16px; color:#8b949e; font-size:12px; line-height:1.6; }
+.rx-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin:0 4px 0 10px; vertical-align:middle; }
+`;
+
+const KIND = {
+  source: { color: '#d29922', order: 0 },
+  bridge: { color: '#a371f7', order: 1 },
+  derived: { color: '#58a6ff', order: 2 },
+  effect: { color: '#3fb950', order: 3 },
+};
+const SHARED = 'shared memory';
+const MAX_DISPOSED = 300;
+const COL_W = 230, BOX_W = 196, BOX_H = 22, ROW_H = 30, TOP = 30, LEFT = 14;
+
+const injectCss = () => {
+  if (document.getElementById('rx-css')) return;
+  const s = document.createElement('style');
+  s.id = 'rx-css';
+  s.textContent = CSS;
+  document.head.appendChild(s);
+};
+
+export function setup(api) {
+  injectCss();
+  const { esc } = api;
+
+  const section = api.addView({
+    id: 'reactivity',
+    label: 'Reactivity',
+    order: 45,
+    html: `
+      <h2>Reactivity graph <span class="muted">— shared-memory sources → version bridges → slices → effects, laned by thread</span></h2>
+      <div class="rx-bar">
+        <label><input type="checkbox" id="rxDisposed" checked> show disposed</label>
+        <button class="act" id="rxSnap" title="Fetch the main thread's live nodes (reactive.nodes): for dashboards opened after the creation events scrolled out of the replay tail">Load snapshot</button>
+        <span class="muted" id="rxStats"></span>
+        <span class="rx-legend">${Object.entries(KIND).map(([k, v]) => `<i style="background:${v.color}"></i>${k}`).join('')}</span>
+      </div>
+      <div class="rx-wrap">
+        <div class="rx-graph" id="rxGraph"></div>
+        <div class="rx-detail" id="rxDetail"><span class="muted">click a node for details</span></div>
+      </div>`,
+  });
+  const $ = (id) => section.querySelector(`#${id}`);
+
+  /** `${sid}|${qid}` → node record */
+  const nodes = new Map();
+  let version = 0;
+  let drawn = -1;
+  let selected = null;
+
+  const laneOf = (e) => (e.worker ? `${e.worker.poolId}#${e.worker.slot}` : e.thread === 'main' ? 'main' : 'worker');
+  const qualify = (lane, id) => (id.startsWith('mem:') ? id : `${lane}/${id}`);
+
+  const upsert = (sid, raw, lane, at) => {
+    const qid = qualify(lane, raw.id);
+    const k = api.key(sid, qid);
+    const prev = nodes.get(k);
+    const n = prev ?? { key: k, sid, qid, id: raw.id, createdAt: at, seq: version };
+    n.kind = raw.kind;
+    if (raw.label !== undefined) n.label = raw.label;
+    if (raw.deps !== undefined) n.deps = raw.deps.map((d) => qualify(lane, d));
+    n.deps ??= [];
+    n.lane = raw.kind === 'source' ? SHARED : lane;
+    n.owner = raw.owner;
+    n.disposed = raw.disposed === true;
+    if (n.disposed) n.disposedAt = at;
+    nodes.set(k, n);
+    version++;
+  };
+
+  const trimDisposed = (sid) => {
+    const dead = [...nodes.values()].filter((n) => n.sid === sid && n.disposed);
+    if (dead.length <= MAX_DISPOSED) return;
+    dead.sort((a, b) => a.disposedAt - b.disposedAt);
+    for (const n of dead.slice(0, dead.length - MAX_DISPOSED)) nodes.delete(n.key);
+  };
+
+  api.onEvent((s, e) => {
+    if (e.type !== 'reactive:node') return;
+    upsert(s.id, e, laneOf(e), Date.now());
+    if (e.disposed) trimDisposed(s.id);
+  });
+  api.onReset(() => { nodes.clear(); version++; selected = null; });
+  api.onReconcile((ids) => {
+    for (const [k, n] of nodes) if (!ids.has(n.sid)) nodes.delete(k);
+    version++;
+  });
+
+  $('rxDisposed').onchange = () => { drawn = -1; draw(); };
+  $('rxSnap').onclick = () => {
+    const sid = api.selectedOrOnlyLive();
+    if (!sid || !api.hasCommand(sid, 'reactive.nodes')) {
+      $('rxStats').textContent = sid ? "this app doesn't expose 'reactive.nodes' (no reactive node created with devtools on yet)" : 'select one live session first';
+      return;
+    }
+    api.control(sid, 'reactive.nodes', {}, 3000)
+      .then((list) => {
+        for (const raw of list) upsert(sid, raw, 'main', Date.now());
+        api.scheduleRender();
+      })
+      .catch((err) => { $('rxStats').textContent = `snapshot failed: ${err.message}`; });
+  };
+
+  const visibleNodes = () => {
+    const showDead = $('rxDisposed').checked;
+    return [...nodes.values()].filter((n) => api.inSel(n.key) && (showDead || !n.disposed));
+  };
+
+  const laneSort = (a, b) => {
+    const rank = (l) => (l === SHARED ? 0 : l === 'main' ? 1 : 2);
+    return rank(a) - rank(b) || a.localeCompare(b);
+  };
+
+  function draw() {
+    const list = visibleNodes();
+    const sessions = new Set(list.map((n) => n.sid));
+    const multi = sessions.size > 1;
+    const laneKey = (n) => (multi ? `${api.state.sessions.get(n.sid)?.name ?? n.sid} · ${n.lane}` : n.lane);
+    const lanes = [...new Set(list.map(laneKey))].sort(laneSort);
+    const live = list.filter((n) => !n.disposed).length;
+    $('rxStats').textContent = list.length ? `${live} live · ${list.length - live} disposed · ${lanes.length} lane(s)` : '';
+
+    const graph = $('rxGraph');
+    if (!list.length) {
+      graph.innerHTML = `<div class="rx-empty">
+        No reactive nodes yet.<br>
+        Nodes are emitted while devtools is enabled by <code>watch()</code>, <code>observe()</code> (framework
+        bindings subscribe through it) and <code>reactive().observeRemote()</code>; island push-mode doorbells
+        appear as <code>observe(opsVersion)</code>. Call <code>initDevtools()</code> before those subscriptions are
+        created. Opened the dashboard late? <b>Load snapshot</b> fetches the main thread's live nodes.<br>
+        Worker-side nodes arrive through the event stream (the worker's devtools forwarding must be on).
+      </div>`;
+      return;
+    }
+
+    const pos = new Map();
+    const byLane = new Map(lanes.map((l) => [l, []]));
+    for (const n of list) byLane.get(laneKey(n)).push(n);
+    let maxRows = 0;
+    lanes.forEach((l, col) => {
+      const ns = byLane.get(l).sort((a, b) => KIND[a.kind].order - KIND[b.kind].order || a.seq - b.seq);
+      maxRows = Math.max(maxRows, ns.length);
+      ns.forEach((n, row) => pos.set(n.qid + '|' + n.sid, { x: LEFT + col * COL_W, y: TOP + row * ROW_H }));
+    });
+    const W = LEFT * 2 + lanes.length * COL_W;
+    const H = TOP + maxRows * ROW_H + 10;
+    const at = (sid, qid) => pos.get(qid + '|' + sid);
+    const selNode = selected ? nodes.get(selected) : null;
+
+    const edges = [];
+    for (const n of list) {
+      const to = at(n.sid, n.qid);
+      for (const d of n.deps) {
+        const from = at(n.sid, d);
+        if (!from) continue;
+        const dep = nodes.get(api.key(n.sid, d));
+        const hot = selNode && (selNode.key === n.key || selNode.key === dep?.key);
+        const off = n.disposed || dep?.disposed;
+        let path;
+        if (from.x === to.x) {
+          // same lane: loop out on the right side
+          const x = from.x + BOX_W, bend = x + 18 + Math.min(40, Math.abs(to.y - from.y) / 4);
+          path = `M${x},${from.y + BOX_H / 2} C${bend},${from.y + BOX_H / 2} ${bend},${to.y + BOX_H / 2} ${x},${to.y + BOX_H / 2}`;
+        } else {
+          const [a, b] = from.x < to.x ? [from.x + BOX_W, to.x] : [from.x, to.x + BOX_W];
+          const mid = (a + b) / 2;
+          path = `M${a},${from.y + BOX_H / 2} C${mid},${from.y + BOX_H / 2} ${mid},${to.y + BOX_H / 2} ${b},${to.y + BOX_H / 2}`;
+        }
+        edges.push(`<path class="e${hot ? ' hot' : ''}${off ? ' off' : ''}" d="${path}" marker-end="url(#rxArrow)"/>`);
+      }
+    }
+
+    const boxes = list.map((n) => {
+      const p = at(n.sid, n.qid);
+      const label = n.label ?? n.id;
+      const text = label.length > 28 ? `${label.slice(0, 27)}…` : label;
+      return `<g class="n${n.disposed ? ' off' : ''}${selected === n.key ? ' sel' : ''}" data-k="${esc(n.key)}" transform="translate(${p.x},${p.y})">
+        <title>${esc(`${n.kind} ${n.qid}${n.label ? `\n${n.label}` : ''}`)}</title>
+        <rect width="${BOX_W}" height="${BOX_H}" rx="4" fill="#0d1117" stroke="${KIND[n.kind].color}"/>
+        <rect width="4" height="${BOX_H}" rx="2" fill="${KIND[n.kind].color}"/>
+        <text x="10" y="15">${esc(text)}</text></g>`;
+    }).join('');
+
+    const laneHeads = lanes.map((l, col) => `<text class="lane" x="${LEFT + col * COL_W}" y="16">${esc(l)}</text>`).join('');
+    const scroll = [graph.scrollLeft, graph.scrollTop];
+    graph.innerHTML = `<svg width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">
+      <defs><marker id="rxArrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" orient="auto">
+        <path d="M0,0 L8,4 L0,8 z" fill="#484f58"/></marker></defs>
+      ${laneHeads}${edges.join('')}${boxes}</svg>`;
+    [graph.scrollLeft, graph.scrollTop] = scroll;
+  }
+
+  const showDetail = () => {
+    const n = selected ? nodes.get(selected) : null;
+    const box = $('rxDetail');
+    if (!n) { box.innerHTML = '<span class="muted">click a node for details</span>'; return; }
+    const dependents = [...nodes.values()].filter((x) => x.sid === n.sid && x.deps.includes(n.qid));
+    const ref = (qid) => {
+      const x = nodes.get(api.key(n.sid, qid));
+      return `<a href="#" class="wlink" data-k="${esc(api.key(n.sid, qid))}">${esc(x?.label ?? qid)}</a>${x?.disposed ? ' <span class="muted">(disposed)</span>' : ''}`;
+    };
+    box.innerHTML = `
+      <div><b style="color:${KIND[n.kind].color}">${esc(n.kind)}</b> ${n.disposed ? '<span class="pill">disposed</span>' : '<span class="pill">live</span>'}</div>
+      <table class="tkv" style="margin-top:6px"><tbody>
+        <tr><td>label</td><td>${esc(n.label ?? '—')}</td></tr>
+        <tr><td>id</td><td>${esc(n.qid)}</td></tr>
+        <tr><td>lane</td><td>${esc(n.lane)}</td></tr>
+        <tr><td>owner</td><td>${esc(n.owner ?? '—')}</td></tr>
+        <tr><td>session</td><td>${esc(api.state.sessions.get(n.sid)?.name ?? n.sid)}</td></tr>
+      </tbody></table>
+      <h2 style="margin-top:10px">Depends on</h2>
+      <div>${n.deps.length ? n.deps.map(ref).join('<br>') : '<span class="muted">nothing</span>'}</div>
+      <h2 style="margin-top:10px">Dependents</h2>
+      <div>${dependents.length ? dependents.map((x) => ref(x.qid)).join('<br>') : '<span class="muted">none</span>'}</div>`;
+  };
+
+  const select = (k) => {
+    selected = selected === k ? null : k;
+    drawn = -1;
+    draw();
+    showDetail();
+  };
+  $('rxGraph').addEventListener('click', (ev) => {
+    const g = ev.target.closest('g.n');
+    if (g) select(g.dataset.k);
+  });
+  $('rxDetail').addEventListener('click', (ev) => {
+    const a = ev.target.closest('a[data-k]');
+    if (!a) return;
+    ev.preventDefault();
+    if (nodes.has(a.dataset.k)) select(a.dataset.k);
+  });
+
+  let lastSel = null;
+  api.onRender(() => {
+    if (!section.classList.contains('on')) return;
+    // selection scope (session picker) changes re-filter the lanes too
+    const scope = api.state.sel;
+    if (drawn === version && lastSel === scope) return;
+    drawn = version;
+    lastSel = scope;
+    draw();
+    if (selected && !nodes.has(selected)) selected = null;
+    showDetail();
+  });
+}