@atolljs/devtools 0.1.7

package/README.md

@@ -0,0 +1,156 @@
+# @atolljs/devtools
+
+Devtools transport + analytics dashboard for AtollJS instrumentation events:
+pool lifecycle, task timings, worker crashes/respawns, shared-memory field
+writes, and island op traffic — streamed from the app to a standalone server
+and rendered by a bundled dashboard.
+
+The dashboard is a multi-view analytics site (dependency-free static app in
+`app/`):
+
+- **Dashboard** — sub-tabs: *Overview* (the **app map** — one world-space
+  canvas holding every live session as an atoll cluster: main thread at
+  the center, pool sockets on the rim, workers on the mid orbit, islands
+  on the outer orbit rendered as framework marks — React ⚛, Vue V,
+  Svelte S, Angular A, Solid, vanilla JS, per the `framework` tag the
+  mounter declares. Wheel to zoom, drag to pan, double-click to refit;
+  zoom tiers apply clustering — sessions collapse to labeled discs, mid
+  zoom collapses islands into a green pool ring; click a node to inspect,
+  click a session disc/center to drill in) plus KPI cards, per-second
+  task-throughput chart, and an "attention needed" feed. *Pools*,
+  *Workers*, *Islands*: the entity tables — pools (size, memory, worker
+  count, tasks, failures), workers (tasks, failures, respawns, errors,
+  heap, hosted islands, last task, live/down), islands (app, framework,
+  pid, host `poolN#0` cross-link, round-trips, op batches, replay ms,
+  events, live/unmounted). *Worker* / *Island*: the inspector sub-tabs,
+  appearing on row or map-node click — worker inspector (own waterfall
+  lane, live heap chart, that worker's fetches, task history, error
+  log), island inspector (framework badge, op-traffic chart, per-call
+  aggregates, event-channel breakdown, round-trip table). Island and
+  worker inspectors are cross-linked — `island:mount` carries the
+  client's `poolId`.
+- **Tasks** — a waterfall/flame view: one swimlane per pool worker slot,
+  queued→dispatched→settled segments colored by outcome, hover tooltips;
+  per-task aggregates (n, failures, wait/run avg, run p95/max) with
+  click-to-drill filtering of the waterfall and the per-call table.
+- **Network** — two sub-tabs. *Traffic*: rolling 60s charts (tasks/s,
+  avg run ms, errors/s, in-flight calls, island ops/round-trips/events
+  per second, fetches/s) plus a **fetch log** of real `fetch()` traffic
+  from main thread and workers. *Request* (click a fetch row): request/
+  response headers, capped body previews, sizes (transfer/encoded/
+  decoded), and a Resource-Timing stage breakdown (stalled, dns, tcp,
+  tls, request+waiting, download). Cross-origin responses without
+  `Timing-Allow-Origin` show total time only.
+- **Memory** — two sub-tabs. *Shared-memory writes*: field-writes/s and
+  top-fields/s charts plus the per-field table (writes, writes/sec,
+  version, last writer `poolId#slot` when worker-forwarded, rate
+  sparkline). *JS heap*: per-execution-context heap via
+  `performance.measureUserAgentSpecificMemory` — worker heaps identified
+  by worker script URL.
+- **Log** — the raw event stream.
+
+Sessions are pages/processes; a disconnected session is retained (bounded)
+as an **ended** session so its history stays attributed for post-mortem
+analysis — its rows are grayed and excluded from live KPIs. Hover an ended
+session in the sidebar and click **×** to dismiss it: the server drops it
+from the session list and purges its replayed batches, so it stays gone for
+current and future viewers. Live sessions can't be dismissed.
+
+## Surface
+
+| Import | Purpose |
+|---|---|
+| `@atolljs/devtools` | `connectDevtools({ transport?, url?, session?, flushMs?, bufferCap?, replayBatches?, network?, memory? })` — installs the core event sink and batches events to dashboards. Default `transport: 'auto'`: **BroadcastChannel** in a browser window (pure client — no backend; the dashboard is served on the app's own origin at `/__atoll/` by the vite plugin, and `mountDevtoolsOverlay()` embeds it in a floating flyout — draggable, resizable, `position` option), WebSocket to the aggregate server everywhere else (`url` or `transport: 'websocket'` opts in — Node uses this path). `network` (default on) wraps `fetch` to emit `net:fetch` per request; `memory` (default on) samples JS heap into `runtime:memory`. |
+| `@atolljs/devtools/node` | Node entry — `initDevtools`/`connectDevtools` without the browser-only pieces (WebSocket-only, env-gated, no overlay). Use this import in Node apps. |
+| `@atolljs/devtools/server` | `createDevtoolsServer({ port?, host?, appDir?, replayBatches? })` — Node http + dependency-free WebSocket server on `127.0.0.1` (default port 4780). |
+| `atoll-devtools` bin | Boots the server and prints the dashboard URL. `atoll devtools` resolves it through the CLI too. |
+
+## Usage
+
+```bash
+npx atoll-devtools          # or: atoll devtools [--port 4780]
+```
+
+The quickest wire-up in an existing app is the scaffolder —
+`atoll add devtools` writes the right init module for your host (browser,
+Node, or the Angular aggregate-server variant) and installs the package.
+Or by hand:
+
+```ts
+// in the app — one line. No-op unless the URL carries ?__atoll_devtools:
+// then the BroadcastChannel sink installs and the overlay flyout mounts.
+// Call before pools spawn: worker-side events forward only if the sink
+// existed at INIT time.
+import { initDevtools } from '@atolljs/devtools';
+initDevtools({ session: { name: 'my-app' } });
+
+//   my-app/?__atoll_devtools  → devtools on
+//   my-app/                   → zero cost, no sink installed
+//
+// Always-on or programmatic control: `connectDevtools(opts)` ignores the
+// param; `initDevtools({ enabled, overlay })` overrides the gate.
+```
+
+## Node apps (Express, NestJS, …)
+
+Node takes the WebSocket path automatically — no `window`, so no
+BroadcastChannel — pointed at the standalone server, which is also the
+dashboard:
+
+```bash
+npx atoll-devtools          # http://127.0.0.1:4780
+```
+
+```ts
+// src/devtools.ts — a dedicated module, imported FIRST from the entry.
+// No-op unless ATOLL_DEVTOOLS is set in the environment.
+import { initDevtools } from '@atolljs/devtools/node';
+initDevtools({ session: { name: 'my-api' } });
+```
+
+```ts
+// main.ts — the import order matters: ESM evaluates imports before the
+// body, and pools usually spawn inside a sibling module or NestFactory.
+import './devtools';
+```
+
+```bash
+ATOLL_DEVTOOLS=1 npm run start
+```
+
+- Works on any Node — the client uses the global `WebSocket` on ≥ 22 and
+  falls back to a bundled dependency-free client (`src/nodeWs.ts`) below it.
+- Inbound HTTP is not instrumented — `net:fetch` covers the `fetch()` calls
+  your app *makes*, on the main thread and inside workers.
+- `runtime:memory` comes from `process.memoryUsage()` in Node — per-worker
+  heap columns fill for `worker_threads` pools.
+- No overlay, no `/__atoll/` — Node sessions appear on the aggregate
+  dashboard as `runtime: 'node'` alongside any browser apps pointed at the
+  same server.
+- See `examples/express` and `examples/nestjs` for the wiring.
+
+- Worker-side events reach the sink automatically: pools pass a
+  `devtools` flag in INIT, workers forward `ATOLL_DEVTOOLS` messages back
+  over the task channel, and the pool stamps each with
+  `worker: {poolId, slot}` — so `memory:write`, `net:fetch`, and worker
+  heap samples attribute to a specific worker. Only active when a sink
+  was installed before the spawn.
+- `net:fetch` covers `fetch()` on the main thread (via the probe
+  `connectDevtools` installs) and inside workers (probed when forwarding
+  is enabled). XHR is not covered.
+- `runtime:memory` uses Chrome's `performance.measureUserAgentSpecificMemory`
+  on the main thread (cluster breakdown — every worker context listed by
+  its script URL), `performance.memory` where available, and
+  `process.memoryUsage()` on Node (heapUsed + RSS — also inside
+  `worker_threads`, so per-worker heap columns populate for Node pools).
+- Zero cost when unused: `emitDevtools` is one branch without a sink, and
+  `connectDevtools()` is the only thing that installs one.
+- Events buffered while the socket connects are capped (50k, oldest
+  dropped); batches flush every 100ms.
+
+## Wire protocol
+
+JSON text frames. Apps → server on `/events`: `{type:'hello', session}`
+then `{type:'batch', events[]}`. Dashboards → server on `/view`:
+`{type:'sessions'}` then `{type:'batch', session, events}` fan-out, with a
+bounded tail replayed to late joiners. See `src/protocol.ts`.

package/app/index.html

@@ -0,0 +1,388 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>atoll devtools</title>
+  <style>
+    :root { color-scheme: dark; }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      background: #0d1117; color: #c9d1d9;
+    }
+    header {
+      display: flex; align-items: baseline; gap: 12px; padding: 10px 16px;
+      border-bottom: 1px solid #21262d; position: sticky; top: 0; background: #0d1117; z-index: 5;
+    }
+    header h1 { font-size: 14px; margin: 0; color: #58a6ff; }
+    #conn { font-size: 11px; }
+    #conn.on { color: #3fb950; } #conn.off { color: #f85149; }
+    main { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 42px); }
+    aside { border-right: 1px solid #21262d; padding: 10px; }
+    aside h2, section h2, .view h2 {
+      font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8b949e; margin: 12px 0 6px;
+    }
+    .sess { padding: 6px 8px; border: 1px solid #21262d; border-radius: 6px; margin-bottom: 6px; cursor: pointer; position: relative; }
+    .sess.sel { border-color: #58a6ff; background: #161b22; }
+    .sess:hover { border-color: #30363d; }
+    .sess:hover .nm { text-decoration: underline; }
+    .sess .dismiss {
+      position: absolute; top: 3px; right: 6px; color: #8b949e; font-size: 12px;
+      line-height: 1; padding: 1px 4px; border-radius: 4px; display: none;
+    }
+    .sess:hover .dismiss { display: block; }
+    .sess .dismiss:hover { color: #f85149; background: #21262d; text-decoration: none; }
+    .sess .pin {
+      position: absolute; top: 3px; right: 22px; color: #8b949e; font-size: 10px;
+      line-height: 1.4; padding: 0 4px; border-radius: 4px; display: none;
+    }
+    .sess:hover .pin, .sess .pin.on { display: block; }
+    .sess .pin.on { color: #58a6ff; }
+    .sess .pin:hover { color: #58a6ff; background: #21262d; text-decoration: none; }
+    .sess .rt { color: #8b949e; font-size: 10px; }
+    .panels { padding: 10px 16px 30px; min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - 42px); box-sizing: border-box; }
+    #scope { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 14px; color: #c9d1d9; }
+    #scope .nm { font-weight: 600; }
+    #scope .meta { color: #8b949e; font-size: 11px; }
+    .panels > .view { flex: none; }
+    /* flex:1 fills the panels column; max-height keeps tall logs inside the
+       viewport (42px header + ~80px nav/padding) so #log scrolls internally. */
+    #view-log.on { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: calc(100vh - 122px); }
+    nav { display: flex; gap: 4px; margin: 4px 0 10px; }
+    /* main nav reads as folder tabs — the active tab shares the content
+       background and overlaps the baseline so it looks attached */
+    .panels > nav { gap: 0; border-bottom: 1px solid #21262d; margin-bottom: 12px; }
+    nav button {
+      background: none; border: 1px solid #21262d; color: #8b949e; border-radius: 6px;
+      padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12px;
+    }
+    .panels > nav button {
+      border-color: transparent; border-bottom: none; border-radius: 6px 6px 0 0;
+      padding: 6px 14px; margin-bottom: -1px;
+    }
+    .panels > nav button:hover { color: #c9d1d9; }
+    .panels > nav button.on {
+      color: #c9d1d9; background: #0d1117; border-color: #21262d;
+    }
+    table { border-collapse: collapse; width: 100%; }
+    th, td { text-align: left; padding: 3px 8px; border-bottom: 1px solid #21262d; font-weight: normal; }
+    th { color: #8b949e; font-size: 11px; cursor: pointer; user-select: none; }
+    th:hover { text-decoration: underline; }
+    tbody tr[data-drill] { cursor: pointer; }
+    tbody tr[data-drill]:hover { background: #161b22; }
+    tbody tr[data-inspect], tbody tr[data-winspect], tbody tr[data-fetch] { cursor: pointer; }
+    tbody tr[data-inspect]:hover, tbody tr[data-winspect]:hover, tbody tr[data-fetch]:hover { background: #161b22; }
+    tbody tr[data-drill]:hover td:first-child,
+    tbody tr[data-inspect]:hover td:first-child,
+    tbody tr[data-fetch]:hover td.url,
+    tbody tr[data-winspect]:hover td:nth-child(2),
+    tbody tr[data-winspect]:hover td:nth-child(3) { text-decoration: underline; }
+    .ok { color: #3fb950; } .error, .crashed { color: #f85149; }
+    .aborted, .timeout, .queue-full { color: #d29922; }
+    .muted { color: #8b949e; }
+    tr.grp td {
+      background: #161b22; color: #8b949e; font-size: 10px;
+      text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px;
+    }
+    .pill { display: inline-block; padding: 0 6px; border-radius: 8px; background: #21262d; font-size: 10px; margin-left: 6px; }
+    .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
+    .kpi { border: 1px solid #21262d; border-radius: 8px; padding: 8px 10px; }
+    .kpi .v { font-size: 20px; }
+    .kpi .l { color: #8b949e; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
+    .kpi.bad .v { color: #f85149; } .kpi.warn .v { color: #d29922; } .kpi.good .v { color: #3fb950; }
+    #alerts { border: 1px solid #21262d; border-radius: 8px; padding: 6px 10px; max-height: 150px; overflow-y: auto; }
+    #alerts div { padding: 2px 0; border-bottom: 1px dashed #21262d; }
+    #waterfall { width: 100%; height: 240px; display: block; border: 1px solid #21262d; border-radius: 8px; background: #010409; cursor: crosshair; }
+    #tip {
+      position: fixed; pointer-events: none; background: #161b22; border: 1px solid #30363d;
+      border-radius: 6px; padding: 6px 8px; font-size: 11px; display: none; z-index: 10; max-width: 320px;
+    }
+    .legend span { display: inline-block; margin-right: 12px; font-size: 11px; }
+    .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
+    #drill { display: none; margin: 6px 0; }
+    #drill.on { display: inline-block; }
+    #log { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid #21262d; border-radius: 6px; padding: 6px 8px; }
+    #log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .logts { color: #484f58; font-size: 10px; }
+    canvas.spark { display: inline-block; vertical-align: middle; }
+    td.url { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .wlink { color: #58a6ff; cursor: pointer; text-decoration: none; } .wlink:hover { text-decoration: underline; }
+    nav button:hover, .subnav button:hover { text-decoration: underline; }
+    #drill { cursor: pointer; } #drill:hover { text-decoration: underline; }
+    .subnav { display: flex; gap: 4px; margin: 0 0 10px; }
+    .subnav button {
+      background: none; border: 1px solid #21262d; color: #8b949e; border-radius: 6px;
+      padding: 3px 10px; cursor: pointer; font: inherit; font-size: 11px;
+    }
+    .subnav button.on { color: #c9d1d9; border-color: #58a6ff; background: #161b22; }
+    .fwicon { width: 16px; height: 16px; vertical-align: middle; margin-top: -2px; }
+    .subview { display: none; } .subview.on { display: block; }
+    pre.body {
+      max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-all;
+      border: 1px solid #21262d; border-radius: 6px; padding: 6px 8px; font-size: 11px;
+      background: #010409; margin: 0;
+    }
+    .tbar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; border: 1px solid #21262d; }
+    .tbar div { min-width: 0; }
+    .tkv td { font-size: 11px; }
+    .tkv td:first-child { color: #8b949e; white-space: nowrap; width: 1%; }
+    canvas.topo {
+      width: 100%; height: 320px; display: block; margin-bottom: 10px;
+      border: 1px solid #21262d; border-radius: 8px; background: #010409; cursor: pointer;
+    }
+    .view { display: none; }
+    .view.on { display: block; }
+    .charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
+    .chart-card { border: 1px solid #21262d; border-radius: 8px; padding: 8px 10px; }
+    .chart-card .lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: .05em; }
+    .chart-card .lbl b { font-size: 15px; }
+    .chart-card canvas { width: 100%; height: 64px; display: block; margin-top: 4px; }
+    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+    @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
+
+    /* ── broadcast (pure-client) mode — sessions are this origin's own
+       instances; the selector/scope title earn their space back. ── */
+    body.local main { grid-template-columns: 1fr; }
+    body.local aside, body.local #scope { display: none; }
+
+    /* ── mini mode (?mini=1) — the overlay flyout: single instance, so no
+       session sidebar/scope, and the redundant session columns go too. ── */
+    body.mini { font-size: 12px; }
+    body.mini header { padding: 6px 12px; position: static; }
+    body.mini header h1 { font-size: 12px; }
+    body.mini main { grid-template-columns: 1fr; min-height: 0; }
+    body.mini aside, body.mini #scope { display: none; }
+    body.mini .panels { padding: 6px 10px 20px; min-height: 0; }
+    body.mini .subview#tv-map.on { display: flex; flex-direction: column; height: calc(100vh - 96px); }
+    body.mini #appmap { flex: 1; min-height: 0; height: auto !important; }
+    body.mini .kpis { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
+    body.mini .kpi { padding: 6px 8px; }
+    body.mini .kpi .v { font-size: 15px; }
+    body.mini table { font-size: 11px; }
+    body.mini th, body.mini td { padding: 3px 6px; }
+    body.mini h2, body.mini section h2, body.mini .view h2 { margin: 8px 0 4px; }
+    body.mini tr.grp { display: none; }
+    body.mini #workers th:first-child, body.mini #workers td:first-child,
+    body.mini #pools th:first-child, body.mini #pools td:first-child { display: none; }
+    body.mini .grid2 { grid-template-columns: 1fr; gap: 8px; }
+    body.mini nav button { padding: 3px 8px; font-size: 11px; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>atoll devtools</h1>
+    <span id="conn" class="off">connecting…</span>
+    <span class="muted" id="counts"></span>
+  </header>
+  <main>
+    <aside>
+      <h2>Sessions</h2>
+      <div id="sessions"><div class="muted">none</div></div>
+    </aside>
+    <div class="panels">
+      <div id="scope"></div>
+      <nav>
+        <button data-view="dashboard" class="on">Dashboard</button>
+        <button data-view="tasks">Tasks</button>
+        <button data-view="network">Network</button>
+        <button data-view="memory">Memory</button>
+        <button data-view="log">Log</button>
+      </nav>
+
+      <section class="view on" id="view-dashboard">
+        <h2>App map <span class="muted">— scroll to zoom · drag to pan · double-click to fit · click a node to inspect · click a session disc to drill in</span></h2>
+        <canvas id="appmap" class="topo" style="height:420px"></canvas>
+        <nav class="subnav" style="margin-top:10px">
+          <button class="on" data-sub="tv-dash">Overview</button>
+          <button data-sub="tv-pools">Pools</button>
+          <button data-sub="tv-workers">Workers</button>
+          <button data-sub="tv-islands">Islands</button>
+          <button data-sub="tv-worker" id="navTopoW" style="display:none">Worker</button>
+          <button data-sub="tv-island" id="navTopoI" style="display:none">Island</button>
+        </nav>
+        <div class="subview on" id="tv-dash">
+          <div class="kpis" id="kpis"></div>
+          <div class="grid2" style="margin-top:14px">
+            <div>
+              <h2>Task throughput <span class="muted">/s, last 60s</span></h2>
+              <canvas id="tput" width="560" height="80" style="width:100%"></canvas>
+            </div>
+            <div>
+              <h2>Attention needed</h2>
+              <div id="alerts"><div class="muted">nothing flagged</div></div>
+            </div>
+          </div>
+        </div>
+        <div class="subview" id="tv-pools">
+          <h2>Pools</h2>
+          <table id="pools"><thead><tr>
+            <th>session</th><th>pool</th><th>size</th><th>memory</th><th>workers</th><th>tasks</th><th>failed</th>
+          </tr></thead><tbody></tbody></table>
+        </div>
+        <div class="subview" id="tv-workers">
+          <h2>Workers <span class="muted">— every pool slot; click a row to inspect</span></h2>
+          <table id="workers"><thead><tr>
+            <th>session</th><th>worker</th><th>tasks</th><th>failed</th><th>respawns</th><th>errors</th><th>heap</th><th>islands</th><th>last task</th><th>state</th>
+          </tr></thead><tbody></tbody></table>
+        </div>
+        <div class="subview" id="tv-islands">
+          <h2>Islands <span class="muted">— click a row to inspect</span></h2>
+          <table id="islands"><thead><tr>
+            <th>instance</th><th>app</th><th>fw</th><th>pid</th><th>host</th><th>round-trips</th><th>op batches</th><th>ops</th><th>replay ms</th><th>events</th><th>state</th>
+          </tr></thead><tbody></tbody></table>
+        </div>
+        <div class="subview" id="tv-worker">
+          <h2 id="wkTitle">Worker inspector</h2>
+          <div class="kpis" id="wkKpis"></div>
+          <h2 style="margin-top:14px">Task lane <span class="muted" id="wkrange"></span></h2>
+          <canvas id="wklane" style="width:100%;height:120px;display:block;border:1px solid #21262d;border-radius:8px;background:#010409;cursor:crosshair"></canvas>
+          <div class="grid2" style="margin-top:14px">
+            <div>
+              <h2>Tasks on this worker <span class="muted">(latest 150)</span></h2>
+              <table id="wkTasks"><thead><tr>
+                <th>call</th><th>task</th><th>wait ms</th><th>run ms</th><th>outcome</th><th>error</th>
+              </tr></thead><tbody></tbody></table>
+            </div>
+            <div>
+              <h2>JS heap <span class="muted">— live (2s samples)</span></h2>
+              <canvas id="wkheap" style="width:100%;height:80px;display:block;border:1px solid #21262d;border-radius:8px;background:#010409"></canvas>
+              <h2 style="margin-top:14px">Fetches from this worker <span class="muted">(latest 50)</span></h2>
+              <table id="wkFetch"><thead><tr>
+                <th>ms</th><th>status</th><th>method</th><th>url</th><th>bytes</th>
+              </tr></thead><tbody></tbody></table>
+              <h2 style="margin-top:14px">Worker errors</h2>
+              <div id="wkErrors" style="border:1px solid #21262d;border-radius:8px;padding:6px 10px;max-height:220px;overflow-y:auto"></div>
+            </div>
+          </div>
+        </div>
+        <div class="subview" id="tv-island">
+          <h2 id="inspTitle">Island inspector</h2>
+          <div class="kpis" id="inspKpis"></div>
+          <div class="grid2" style="margin-top:14px">
+            <div>
+              <h2>Op traffic <span class="muted">— batch size over time, colored by call</span></h2>
+              <canvas id="optraffic" style="width:100%;height:140px;display:block;border:1px solid #21262d;border-radius:8px;background:#010409"></canvas>
+              <div class="legend">
+                <span><i style="background:#58a6ff"></i>mount</span>
+                <span><i style="background:#3fb950"></i>dispatch</span>
+                <span><i style="background:#8b949e"></i>flush</span>
+                <span><i style="background:#d29922"></i>setSize</span>
+                <span><i style="background:#a371f7"></i>updateProps</span>
+                <span><i style="background:#f85149"></i>unmount</span>
+              </div>
+            </div>
+            <div>
+              <h2>By call</h2>
+              <table id="inspVia"><thead><tr>
+                <th>via</th><th>batches</th><th>ops</th><th>replay ms</th>
+              </tr></thead><tbody></tbody></table>
+              <h2 style="margin-top:14px">Event channel <span class="muted">(worker → shell emits)</span></h2>
+              <table id="inspEvents"><thead><tr><th>name</th><th>count</th></tr></thead><tbody></tbody></table>
+            </div>
+          </div>
+          <h2>Round-trips <span class="muted">— every main→worker call (latest 150)</span></h2>
+          <table id="inspTasks"><thead><tr>
+            <th>#</th><th>method</th><th>ms</th><th>ops back</th><th>result</th><th>error</th>
+          </tr></thead><tbody></tbody></table>
+        </div>
+      </section>
+
+      <section class="view" id="view-tasks">
+        <h2>Task waterfall <span class="muted">— wait (gray) → run (colored) per worker slot</span></h2>
+        <div class="legend">
+          <span><i style="background:#58a6ff"></i>ok</span>
+          <span><i style="background:#f85149"></i>error/crash</span>
+          <span><i style="background:#d29922"></i>abort/timeout</span>
+          <span><i style="background:#8b949e"></i>queued / in-flight</span>
+          <span class="muted" id="wfrange"></span>
+          <span id="drill" class="pill"></span>
+        </div>
+        <canvas id="waterfall"></canvas>
+        <div id="tip"></div>
+        <h2>By task <span class="muted">— click a row to drill into its calls</span></h2>
+        <table id="taskAgg"><thead><tr>
+          <th>task</th><th>calls</th><th>fail</th><th>wait avg</th><th>run avg</th><th>run p95</th><th>run max</th>
+        </tr></thead><tbody></tbody></table>
+        <h2>Calls <span class="muted">(latest 200)</span></h2>
+        <table id="tasks"><thead><tr>
+          <th>call</th><th>task</th><th>pool</th><th>slot</th><th>wait ms</th><th>run ms</th><th>outcome</th><th>error</th>
+        </tr></thead><tbody></tbody></table>
+      </section>
+
+      <section class="view" id="view-network">
+        <nav class="subnav">
+          <button class="on" data-sub="nv-traffic">Traffic</button>
+          <button data-sub="nv-req" id="navNetReq" style="display:none">Request</button>
+        </nav>
+        <div class="subview on" id="nv-traffic">
+          <h2>Network <span class="muted">— live channel traffic (per-second, last 60s)</span></h2>
+          <div class="charts" id="charts"></div>
+          <h2 style="margin-top:14px">Fetch log <span class="muted">— real HTTP traffic, latest 150 — click a row for detail</span></h2>
+          <table id="fetchlog"><thead><tr>
+            <th>session</th><th>ms</th><th>status</th><th>method</th><th>url</th><th>from</th><th>bytes</th>
+          </tr></thead><tbody></tbody></table>
+        </div>
+        <div class="subview" id="nv-req">
+          <div id="reqTitle" class="muted" style="margin-bottom:8px"></div>
+          <div class="kpis" id="reqKpis" style="margin-bottom:12px"></div>
+          <h2>Timing</h2>
+          <div id="reqTiming" style="margin-bottom:12px"></div>
+          <div class="grid2">
+            <div>
+              <h2>Request headers</h2>
+              <table id="reqReqH"><tbody></tbody></table>
+              <h2 style="margin-top:12px">Request body</h2>
+              <pre class="body" id="reqReqB"></pre>
+            </div>
+            <div>
+              <h2>Response headers</h2>
+              <table id="reqResH"><tbody></tbody></table>
+              <h2 style="margin-top:12px">Response body</h2>
+              <pre class="body" id="reqResB"></pre>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="view" id="view-memory">
+        <nav class="subnav">
+          <button class="on" data-sub="mv-fields">Shared-memory writes</button>
+          <button data-sub="mv-heap">JS heap</button>
+        </nav>
+        <div class="subview on" id="mv-fields">
+          <div class="grid2">
+            <div>
+              <h2>Field writes /s</h2>
+              <canvas id="memrate" style="width:100%;height:80px;display:block;border:1px solid #21262d;border-radius:8px;background:#010409"></canvas>
+            </div>
+            <div>
+              <h2>Top fields /s</h2>
+              <canvas id="memtop" style="width:100%;height:80px;display:block;border:1px solid #21262d;border-radius:8px;background:#010409"></canvas>
+              <div class="legend" id="memtopLegend"></div>
+            </div>
+          </div>
+          <table id="mem" style="margin-top:10px"><thead><tr>
+            <th>field</th><th>session</th><th>writes</th><th>writes/s</th><th>version</th><th>last writer</th><th>rate</th>
+          </tr></thead><tbody></tbody></table>
+        </div>
+        <div class="subview" id="mv-heap">
+          <h2>JS heap <span class="muted">— per-session total, live</span></h2>
+          <canvas id="heapline" style="width:100%;height:110px;display:block;border:1px solid #21262d;border-radius:8px;background:#010409"></canvas>
+          <div class="legend" id="heaplineLegend" style="margin-top:4px"></div>
+          <h2 style="margin-top:14px">JS heap by context <span class="muted">— measureUserAgentSpecificMemory attribution</span></h2>
+          <table id="heapctx"><thead><tr>
+            <th>session</th><th>context</th><th>heap</th>
+          </tr></thead><tbody></tbody></table>
+        </div>
+      </section>
+
+      <section class="view" id="view-log">
+        <h2>Event log</h2>
+        <div id="log"></div>
+      </section>
+    </div>
+  </main>
+  <script type="module" src="./main.js"></script>
+</body>
+</html>