feat(viz): add comm-deploy and tool-discovery embeds for dim 2 & 3

Replace the placeholder visuals and markdown tables in Dimensions 2
(Communication & deployment) and 3 (Tool & action model) with paired
animated SVG embeds plus polished chip-tables.

Dimension 2:
- d3-comm-deploy.html: two-panel SVG (HTTP frameworks / In-process)
with Play/Pause + speed slider, animated request/response packets
showing the network hop on the HTTP side and the inline call on the
in-process side. Auto-plays on scroll-into-view.
- comm-deploy-matrix.html: chip-styled table with grouped bands
(Shape / Deployment / Trainer-side), clickable HF Spaces and
PrimeIntellect Hub links, ✓/—/N/A pill badges.

Dimension 3:
- d3-tool-discovery.html: 6 framework cards in a responsive grid,
each with a mini sequence diagram (Trainer ↔ Env) animating
discovery → invoke phases. HTTP cards show dashed wire arrows,
in-process show solid Python calls.
- tool-action-matrix.html: polished table with Kind pill (HTTP /
In-process), code chips for endpoints and decorators, single
green ✓ for the universal multi-turn capability.

Both sections also get tighter intro/bridge prose replacing the
old bullet lists.

app/src/content/chapters/dimensions.mdx

@@ -21,55 +21,33 @@ The first thing any environment author runs into is the API surface. What do I s
 
 ---
 
-### Dimension 2: Communication & deployment
+### Communication & deployment
 
 *Where does it run and how do they talk?*
 
-The most fundamental architectural split: does your environment run as a **separate HTTP server** or **inside the training process**?
+The most fundamental architectural split: does your environment run as a **separate HTTP server** or **inside the training process**? Everything else, the protocol, the deployment target, what you have to install on the trainer side, falls out of this single choice. Hit Play below to watch one tool call travel through each shape.
 
-> **[Visualisation, replaces ASCII below]** *Architecture split — two-panel diagram.* Left panel "HTTP Frameworks": two boxes (Training Process | Environment Server) connected by HTTP arrows in both directions, plus a dashed arrow from the Env Server to an external Backend. Right panel "In-Process Frameworks": one outer box (Training Process) containing a nested inner box (Trainer + Env), with a dashed arrow from the inner box to an external Backend. Below each panel, framework chips show who lives on which side (OpenEnv/ORS/NeMo Gym vs Verifiers/SkyRL/GEM). Toggle button: "highlight network hops" — animates the HTTP request/response cycle on the left panel so the latency cost is visible.
+<HtmlEmbed src="d3-comm-deploy.html" frameless />
 
-**The two patterns:** HTTP frameworks run the environment as a separate service, this lets you deploy it on a CPU machine (or HF Space) while GPUs focus on training, and scale by adding server replicas. In-process frameworks run the environment in the same Python process as training, no server to manage, but the environment shares the training node's resources.
+The two patterns differ on three things that show up in practice. **Where it runs:** an HTTP framework lives on its own machine, often a cheap CPU box or a Hugging Face Space, while the in-process kind shares the training GPU node. **What you install on the trainer side:** HTTP only needs an SDK or `requests`, while in-process pulls the full framework package into the training venv. **How it scales:** HTTP scales by adding server replicas behind a load balancer, in-process scales by adding more identical training workers, each with its own copy of the env. The table below lines all of that up at a glance.
 
-|  | OpenEnv | ORS | NeMo Gym | Verifiers | SkyRL Gym | GEM |
-| --- | --- | --- | --- | --- | --- | --- |
-| **Type** | HTTP server | HTTP server | HTTP server | In-process | In-process | In-process |
-| **Protocol** | JSON-RPC 2.0 (MCP) with WebSocket support | REST + SSE | REST + cookies | Python calls | Python calls | Python calls |
-| **Docker** | ✅ | ✅ | ✅ | — | — | — |
-| **HF Spaces** | ✅ [Deployed](https://huggingface.co/spaces/AdithyaSK/jupyter-agent-openenv) | ✅ [Deployed](https://huggingface.co/spaces/AdithyaSK/jupyter-agent-ors) | ✅ [Deployed](https://huggingface.co/spaces/AdithyaSK/jupyter-agent-nemo-gym) | N/A | N/A | N/A |
-| **OpenReward** | — | ✅ | — | — | — | — |
-| **PrimeIntellect Hub** | — | — | — | ✅ (via [Prime RL](https://github.com/PrimeIntellect-ai/prime-rl)) | — | — |
-| **Scales independently** | ✅ | ✅ | ✅ | — | — | — |
-| **Deps on trainer side** | `openenv-core` | `requests` only | `requests` only | Full package | Full package | Full package |
-| **Auth** | None | `X-API-Key` | Cookies | N/A | N/A | N/A |
-
-> **[Table polish]** Convert the ✅ / — / N/A cells into colored chip badges (green pill for ✅, gray outline for —, faded for N/A). For the "HF Spaces" row, render each ✅ as a clickable chip that opens the deployed Space in a new tab — links are in the source text but the table doesn't expose them well right now.
+<HtmlEmbed src="comm-deploy-matrix.html" frameless />
 
 Note: Verifiers integrates with PrimeIntellect's training stack (Prime RL) and their managed environment hub, which hosts community-contributed environments for distributed RL training.
 
 ---
 
-### Dimension 3: Tool & action model
+### Tool & action model
 
 *How does the model interact with the environment?*
 
-All 6 frameworks expose tools that the model can call, but they define and discover tools differently.
-
-The key distinction: **where does the tool definition live, and how is it discovered?**
+All six frameworks ultimately expose the same thing to the model, a list of callable tools with names, descriptions, and typed parameters. What differs is **where the tool definition lives** and **how the trainer discovers it**. HTTP frameworks define tools on the server and ship a discovery endpoint the client hits at runtime. In-process frameworks define tools as Python functions and register them when the env constructs. After discovery, both shapes look identical: send a tool call, get back an observation.
 
-- **HTTP frameworks**: Tools are defined on the server (as decorated functions or HTTP endpoints). The client/adapter discovers them at runtime via a protocol-specific endpoint.
-- **In-process frameworks**: Tools are defined as Python functions or methods. Each framework has its own registration pattern, explicit lists, `ToolGroup` classes, or environment wrappers.
+<HtmlEmbed src="d3-tool-discovery.html" frameless />
 
-In both cases, the model ends up seeing the same thing, a list of callable tools with names, descriptions, and typed parameters.
-
-|  | OpenEnv | ORS | NeMo Gym | Verifiers | SkyRL Gym | GEM |
-| --- | --- | --- | --- | --- | --- | --- |
-| **Tool definition** | `@mcp.tool` decorator on FastMCP | `@tool` decorator + Pydantic model | FastAPI `app.post()` endpoint | Plain Python functions passed to `ToolEnv(tools=[...])` | Methods on `ToolGroup` subclasses | Environment wrappers (`ToolEnvWrapper`) |
-| **Discovery** | MCP `tools/list` endpoint | `GET /tools` HTTP endpoint | OpenAPI schema (`GET /openapi.json`) | Explicit list at init time | `init_tool_groups()` registration | Wrapper composition |
-| **Schema format** | MCP tool spec (JSON Schema) | ORS ToolSpec | OpenAPI JSON Schema | Python type hints → auto-converted | Python type hints → auto-converted | Wrapper-defined |
-| **Multi-turn** | ✅ (trainer loops) | ✅ (trainer loops) | ✅ (trainer loops) | ✅ (trainer loops) | ✅ (trainer loops) | ✅ (trainer loops) |
+The animation makes the discovery moment visible, but the table below is where the per-framework details live: what you decorate, which endpoint serves the schema, and what schema format the model sees. Multi-turn is universal, every framework loops generation against tool calls. The differences are upstream of that.
 
-> **[Visualisation]** *Tool-discovery sequence diagrams — six tiny strips.* For each framework, a small left-to-right sequence: `Client → discovery call → tool list → first tool invocation → response`. Each strip uses the framework's color and labels the protocol-specific endpoint (`tools/list` for OpenEnv, `GET /tools` for ORS, `GET /openapi.json` for NeMo Gym, `init time` for Verifiers/SkyRL/GEM). The visual difference between an HTTP discovery call and an in-process registration becomes obvious side-by-side.
+<HtmlEmbed src="tool-action-matrix.html" frameless />
 
 ---
 

app/src/content/embeds/comm-deploy-matrix.html

@@ -0,0 +1,268 @@
+<div class="comm-deploy-matrix" style="width:100%;margin:14px 0;"></div>
+<style>
+  .comm-deploy-matrix {
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--surface-bg);
+    overflow: hidden;
+    color: var(--text-color);
+  }
+  .comm-deploy-matrix__head {
+    display: flex; align-items: center; gap: 12px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-color);
+    background: color-mix(in oklab, var(--muted-color) 4%, transparent);
+    flex-wrap: wrap;
+  }
+  .comm-deploy-matrix__title {
+    font-size: 10.5px;
+    font-weight: 800;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: var(--muted-color);
+    margin-right: auto;
+  }
+  .comm-deploy-matrix__legend {
+    display: inline-flex; align-items: center; gap: 10px;
+    font-size: 10.5px; color: var(--muted-color);
+  }
+  .comm-deploy-matrix__legend .item {
+    display: inline-flex; align-items: center; gap: 5px;
+  }
+
+  /* status pills */
+  .cdm-pill {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 2px 9px;
+    font-size: 11px;
+    font-weight: 700;
+    border-radius: 999px;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+  .cdm-pill.yes {
+    background: color-mix(in oklab, #22c55e 14%, transparent);
+    color: #16a34a;
+    border: 1px solid color-mix(in oklab, #22c55e 35%, transparent);
+  }
+  .cdm-pill.no {
+    color: var(--muted-color);
+    border: 1px dashed color-mix(in oklab, var(--muted-color) 50%, transparent);
+    background: transparent;
+  }
+  .cdm-pill.na {
+    color: color-mix(in oklab, var(--muted-color) 70%, var(--text-color));
+    background: color-mix(in oklab, var(--muted-color) 6%, transparent);
+    border: 1px solid color-mix(in oklab, var(--border-color) 80%, transparent);
+    font-weight: 600;
+  }
+  a.cdm-pill.yes {
+    text-decoration: none;
+    cursor: pointer;
+    transition: filter .15s ease, transform .15s ease;
+  }
+  a.cdm-pill.yes:hover { filter: brightness(1.15); }
+  a.cdm-pill.yes::after {
+    content: "↗";
+    font-size: 10px;
+    margin-left: 1px;
+  }
+
+  /* table */
+  .comm-deploy-matrix__wrap { overflow-x: auto; }
+  .comm-deploy-matrix table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    min-width: 720px;
+  }
+  .comm-deploy-matrix table thead th {
+    text-align: left;
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    color: var(--muted-color);
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border-color);
+    background: color-mix(in oklab, var(--muted-color) 3%, transparent);
+    white-space: nowrap;
+  }
+  .comm-deploy-matrix table thead th .swatch {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: var(--c, var(--muted-color));
+    display: inline-block;
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+  .comm-deploy-matrix table tbody td {
+    padding: 10px 12px;
+    border-bottom: 1px solid color-mix(in oklab, var(--border-color) 60%, transparent);
+    vertical-align: middle;
+    color: var(--text-color);
+  }
+  .comm-deploy-matrix table tbody tr:last-child td { border-bottom: 0; }
+  .comm-deploy-matrix table tbody tr:hover td {
+    background: color-mix(in oklab, var(--muted-color) 3%, transparent);
+  }
+  .comm-deploy-matrix table tbody td.row-name {
+    font-weight: 600;
+    color: var(--text-color);
+    white-space: nowrap;
+  }
+  .comm-deploy-matrix table tbody td code {
+    background: color-mix(in oklab, var(--muted-color) 10%, transparent);
+    border-radius: 3px;
+    padding: 0 5px;
+    font-size: 11px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+  .cdm-text { font-size: 11.5px; color: var(--text-color); }
+  .cdm-text .muted { color: var(--muted-color); }
+  .cdm-group-band {
+    background: color-mix(in oklab, var(--muted-color) 5%, transparent);
+  }
+  .cdm-group-band td {
+    padding: 5px 12px;
+    font-size: 9.5px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.7px;
+    color: var(--muted-color);
+  }
+</style>
+<script>
+(() => {
+  const bootstrap = () => {
+    const scriptEl = document.currentScript;
+    let container = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!(container && container.classList && container.classList.contains('comm-deploy-matrix'))) {
+      const cands = Array.from(document.querySelectorAll('.comm-deploy-matrix'))
+        .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+      container = cands[cands.length - 1] || null;
+    }
+    if (!container || (container.dataset && container.dataset.mounted === 'true')) return;
+    container.dataset.mounted = 'true';
+
+    const FRAMEWORKS = [
+      { key: 'openenv', name: 'OpenEnv',   color: '#3b82f6', kind: 'http' },
+      { key: 'ors',     name: 'ORS',       color: '#a855f7', kind: 'http' },
+      { key: 'nemo',    name: 'NeMo Gym',  color: '#22c55e', kind: 'http' },
+      { key: 'verifs',  name: 'Verifiers', color: '#ec4899', kind: 'inproc' },
+      { key: 'skyrl',   name: 'SkyRL Gym', color: '#f59e0b', kind: 'inproc' },
+      { key: 'gem',     name: 'GEM',       color: '#14b8a6', kind: 'inproc' },
+    ];
+
+    const yes = (label='Yes') => `<span class="cdm-pill yes">✓ ${label}</span>`;
+    const no  = ()             => `<span class="cdm-pill no">—</span>`;
+    const na  = ()             => `<span class="cdm-pill na">N/A</span>`;
+    const link = (label, href) => `<a class="cdm-pill yes" href="${href}" target="_blank" rel="noopener">${label}</a>`;
+    const txt = (s, muted='') => `<span class="cdm-text">${s}${muted ? `<span class="muted"> · ${muted}</span>` : ''}</span>`;
+    const code = (s) => `<code>${s}</code>`;
+
+    const ROWS = [
+      { group: 'Shape' },
+      { name: 'Type', cells: {
+        openenv: txt('HTTP server'),
+        ors: txt('HTTP server'),
+        nemo: txt('HTTP server'),
+        verifs: txt('In-process'),
+        skyrl:  txt('In-process'),
+        gem:    txt('In-process'),
+      }},
+      { name: 'Protocol', cells: {
+        openenv: txt('JSON-RPC 2.0 (MCP)', 'WebSocket'),
+        ors:     txt('REST + SSE'),
+        nemo:    txt('REST + cookies'),
+        verifs:  txt('Python calls'),
+        skyrl:   txt('Python calls'),
+        gem:     txt('Python calls'),
+      }},
+
+      { group: 'Deployment' },
+      { name: 'Docker', cells: {
+        openenv: yes(), ors: yes(), nemo: yes(),
+        verifs: no(), skyrl: no(), gem: no(),
+      }},
+      { name: 'HF Spaces', cells: {
+        openenv: link('OpenEnv', 'https://huggingface.co/spaces/AdithyaSK/jupyter-agent-openenv'),
+        ors:     link('ORS',     'https://huggingface.co/spaces/AdithyaSK/jupyter-agent-ors'),
+        nemo:    link('NeMo',    'https://huggingface.co/spaces/AdithyaSK/jupyter-agent-nemo-gym'),
+        verifs: na(), skyrl: na(), gem: na(),
+      }},
+      { name: 'OpenReward', cells: {
+        openenv: no(), ors: yes(), nemo: no(),
+        verifs: no(), skyrl: no(), gem: no(),
+      }},
+      { name: 'PrimeIntellect Hub', cells: {
+        openenv: no(), ors: no(), nemo: no(),
+        verifs: link('Prime RL', 'https://github.com/PrimeIntellect-ai/prime-rl'),
+        skyrl: no(), gem: no(),
+      }},
+      { name: 'Scales independently', cells: {
+        openenv: yes(), ors: yes(), nemo: yes(),
+        verifs: no(), skyrl: no(), gem: no(),
+      }},
+
+      { group: 'Trainer-side' },
+      { name: 'Deps on trainer', cells: {
+        openenv: code('openenv-core'),
+        ors:     code('requests') + ' only',
+        nemo:    code('requests') + ' only',
+        verifs:  txt('Full package'),
+        skyrl:   txt('Full package'),
+        gem:     txt('Full package'),
+      }},
+      { name: 'Auth', cells: {
+        openenv: txt('None'),
+        ors:     code('X-API-Key'),
+        nemo:    txt('Cookies'),
+        verifs:  na(),
+        skyrl:   na(),
+        gem:     na(),
+      }},
+    ];
+
+    const headerCells = FRAMEWORKS.map(f =>
+      `<th><span class="swatch" style="--c:${f.color};"></span>${f.name}</th>`
+    ).join('');
+
+    const bodyHtml = ROWS.map(r => {
+      if (r.group) {
+        return `<tr class="cdm-group-band"><td colspan="${FRAMEWORKS.length + 1}">${r.group}</td></tr>`;
+      }
+      const cells = FRAMEWORKS.map(f => `<td>${r.cells[f.key]}</td>`).join('');
+      return `<tr><td class="row-name">${r.name}</td>${cells}</tr>`;
+    }).join('');
+
+    container.innerHTML = `
+      <div class="comm-deploy-matrix__head">
+        <span class="comm-deploy-matrix__title">Communication & deployment · 6 frameworks</span>
+        <span class="comm-deploy-matrix__legend">
+          <span class="item"><span class="cdm-pill yes" style="padding:1px 7px;">✓</span> ships</span>
+          <span class="item"><span class="cdm-pill no" style="padding:1px 8px;">—</span> no</span>
+          <span class="item"><span class="cdm-pill na" style="padding:1px 7px;">N/A</span> not applicable</span>
+        </span>
+      </div>
+      <div class="comm-deploy-matrix__wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Capability</th>
+              ${headerCells}
+            </tr>
+          </thead>
+          <tbody>${bodyHtml}</tbody>
+        </table>
+      </div>
+    `;
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  } else {
+    bootstrap();
+  }
+})();
+</script>

app/src/content/embeds/d3-comm-deploy.html

@@ -0,0 +1,477 @@
+<div class="d3-comm-deploy" style="width:100%;margin:14px 0;"></div>
+<style>
+  .d3-comm-deploy {
+    position: relative;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--surface-bg);
+    overflow: hidden;
+    color: var(--text-color);
+    --c-http: #3b82f6;
+    --c-inproc: #ec4899;
+    --c-flow: var(--primary-color, #6366f1);
+  }
+
+  /* ── Header ── */
+  .d3-comm-deploy__header {
+    display: flex; flex-wrap: wrap; align-items: center;
+    gap: 12px 16px; padding: 12px 16px;
+    border-bottom: 1px solid var(--border-color);
+  }
+  .d3-comm-deploy__title {
+    font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
+    text-transform: uppercase; color: var(--muted-color);
+    margin-right: auto;
+  }
+  .d3-comm-deploy__btn {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 12px; border-radius: 7px;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg); color: var(--text-color);
+    font-size: 12px; font-weight: 600; cursor: pointer;
+    transition: border-color .12s ease, background .12s ease;
+  }
+  .d3-comm-deploy__btn:hover { border-color: var(--primary-color); }
+  .d3-comm-deploy__btn.primary {
+    border-color: var(--primary-color);
+    background: color-mix(in oklab, var(--primary-color) 12%, var(--surface-bg));
+  }
+  .d3-comm-deploy__btn svg { width: 12px; height: 12px; }
+  .d3-comm-deploy__speed {
+    display: inline-flex; align-items: center; gap: 8px;
+    font-size: 11px; color: var(--muted-color);
+  }
+  .d3-comm-deploy__speed input[type=range] {
+    width: 100px;
+    accent-color: var(--primary-color);
+  }
+  .d3-comm-deploy__speed-val {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    color: var(--text-color); font-size: 11px;
+    min-width: 36px; text-align: right;
+  }
+
+  /* ── Body grid: two panels side by side ── */
+  .d3-comm-deploy__body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    background: color-mix(in oklab, var(--muted-color) 3%, transparent);
+  }
+  .d3-comm-deploy__panel {
+    padding: 14px 16px 16px 16px;
+    display: flex; flex-direction: column; gap: 10px;
+    min-width: 0;
+  }
+  .d3-comm-deploy__panel + .d3-comm-deploy__panel {
+    border-left: 1px solid var(--border-color);
+  }
+  @media (max-width: 720px) {
+    .d3-comm-deploy__body { grid-template-columns: 1fr; }
+    .d3-comm-deploy__panel + .d3-comm-deploy__panel {
+      border-left: 0;
+      border-top: 1px solid var(--border-color);
+    }
+  }
+
+  .d3-comm-deploy__panel-head {
+    display: flex; align-items: center; gap: 8px;
+    font-size: 11px; font-weight: 700;
+    letter-spacing: 0.6px; text-transform: uppercase;
+    color: var(--text-color);
+  }
+  .d3-comm-deploy__panel-head .swatch {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--c, var(--muted-color));
+    flex-shrink: 0;
+  }
+  .d3-comm-deploy__panel-head .tag {
+    margin-left: auto;
+    font-size: 10px; font-weight: 700;
+    color: var(--muted-color);
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+  }
+
+  /* ── SVG stage ── */
+  .d3-comm-deploy__stage {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    border-radius: 10px;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    overflow: hidden;
+    min-height: 200px;
+  }
+  .d3-comm-deploy__stage svg {
+    width: 100%; height: 100%; display: block;
+    font-family: ui-sans-serif, system-ui, sans-serif;
+  }
+  .d3-comm-deploy__stage .box {
+    fill: color-mix(in oklab, var(--muted-color) 5%, var(--surface-bg));
+    stroke: var(--border-color);
+    stroke-width: 1.2;
+  }
+  .d3-comm-deploy__stage .box.outer {
+    fill: color-mix(in oklab, var(--muted-color) 3%, transparent);
+    stroke-dasharray: 0;
+  }
+  .d3-comm-deploy__stage .box.tinted-http {
+    fill: color-mix(in oklab, var(--c-http) 8%, var(--surface-bg));
+    stroke: color-mix(in oklab, var(--c-http) 35%, var(--border-color));
+  }
+  .d3-comm-deploy__stage .box.tinted-env {
+    fill: color-mix(in oklab, #22c55e 8%, var(--surface-bg));
+    stroke: color-mix(in oklab, #22c55e 35%, var(--border-color));
+  }
+  .d3-comm-deploy__stage .box.tinted-inproc {
+    fill: color-mix(in oklab, var(--c-inproc) 8%, var(--surface-bg));
+    stroke: color-mix(in oklab, var(--c-inproc) 35%, var(--border-color));
+  }
+  .d3-comm-deploy__stage .box.backend {
+    fill: color-mix(in oklab, var(--muted-color) 4%, transparent);
+    stroke: var(--border-color);
+    stroke-dasharray: 4 3;
+  }
+  .d3-comm-deploy__stage .label-title {
+    fill: var(--text-color);
+    font-size: 11px; font-weight: 700;
+  }
+  .d3-comm-deploy__stage .label-sub {
+    fill: var(--muted-color);
+    font-size: 9px; font-weight: 500;
+  }
+  .d3-comm-deploy__stage .arrow {
+    stroke: var(--muted-color);
+    stroke-width: 1.4;
+    fill: none;
+  }
+  .d3-comm-deploy__stage .arrow.dashed {
+    stroke-dasharray: 4 3;
+  }
+  .d3-comm-deploy__stage .arrow-label {
+    fill: var(--muted-color);
+    font-size: 8.5px;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+  }
+  /* travelling packets */
+  .d3-comm-deploy__stage .packet {
+    fill: var(--c, var(--c-flow));
+    opacity: 0;
+  }
+  .d3-comm-deploy.playing .packet {
+    animation-play-state: running;
+  }
+  .d3-comm-deploy:not(.playing) .packet {
+    animation-play-state: paused;
+    opacity: 0;
+  }
+  /* HTTP panel: long-distance packets */
+  .d3-comm-deploy .packet.http-out {
+    animation: dcd-http-out var(--dur, 1.6s) linear infinite;
+  }
+  .d3-comm-deploy .packet.http-in {
+    animation: dcd-http-in var(--dur, 1.6s) linear infinite;
+    animation-delay: calc(var(--dur, 1.6s) * 0.5);
+  }
+  @keyframes dcd-http-out {
+    0%   { transform: translate(0, 0); opacity: 0; }
+    8%   { opacity: 1; }
+    92%  { opacity: 1; }
+    100% { transform: translate(120px, 0); opacity: 0; }
+  }
+  @keyframes dcd-http-in {
+    0%   { transform: translate(0, 0); opacity: 0; }
+    8%   { opacity: 1; }
+    92%  { opacity: 1; }
+    100% { transform: translate(-120px, 0); opacity: 0; }
+  }
+  .d3-comm-deploy .packet.http-back {
+    animation: dcd-http-back var(--dur, 1.6s) linear infinite;
+    animation-delay: calc(var(--dur, 1.6s) * 0.25);
+  }
+  @keyframes dcd-http-back {
+    0%   { transform: translate(0, 0); opacity: 0; }
+    8%   { opacity: 0.85; }
+    92%  { opacity: 0.85; }
+    100% { transform: translate(0, 56px); opacity: 0; }
+  }
+
+  /* In-process panel: short hop packets */
+  .d3-comm-deploy .packet.ip-out {
+    animation: dcd-ip-out var(--dur, 1.6s) linear infinite;
+  }
+  .d3-comm-deploy .packet.ip-in {
+    animation: dcd-ip-in var(--dur, 1.6s) linear infinite;
+    animation-delay: calc(var(--dur, 1.6s) * 0.5);
+  }
+  @keyframes dcd-ip-out {
+    0%   { transform: translate(0, 0); opacity: 0; }
+    10%  { opacity: 1; }
+    90%  { opacity: 1; }
+    100% { transform: translate(40px, 0); opacity: 0; }
+  }
+  @keyframes dcd-ip-in {
+    0%   { transform: translate(0, 0); opacity: 0; }
+    10%  { opacity: 1; }
+    90%  { opacity: 1; }
+    100% { transform: translate(-40px, 0); opacity: 0; }
+  }
+  .d3-comm-deploy .packet.ip-back {
+    animation: dcd-ip-back var(--dur, 1.6s) linear infinite;
+    animation-delay: calc(var(--dur, 1.6s) * 0.25);
+  }
+  @keyframes dcd-ip-back {
+    0%   { transform: translate(0, 0); opacity: 0; }
+    10%  { opacity: 0.85; }
+    90%  { opacity: 0.85; }
+    100% { transform: translate(0, 60px); opacity: 0; }
+  }
+
+  /* ── Framework chips ── */
+  .d3-comm-deploy__chips {
+    display: flex; flex-wrap: wrap; gap: 6px;
+  }
+  .d3-comm-deploy__chip {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 4px 9px;
+    font-size: 11px; font-weight: 600;
+    border-radius: 999px;
+    border: 1px solid color-mix(in oklab, var(--c, var(--border-color)) 35%, var(--border-color));
+    background: color-mix(in oklab, var(--c, transparent) 8%, transparent);
+    color: var(--text-color);
+  }
+  .d3-comm-deploy__chip .dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--c, var(--muted-color));
+    flex-shrink: 0;
+  }
+  .d3-comm-deploy__note {
+    font-size: 11.5px;
+    color: var(--muted-color);
+    line-height: 1.5;
+  }
+
+  /* ── Caption ── */
+  .d3-comm-deploy__caption {
+    padding: 10px 16px;
+    border-top: 1px solid var(--border-color);
+    font-size: 11.5px;
+    color: var(--muted-color);
+    font-style: italic;
+    line-height: 1.55;
+  }
+</style>
+<script>
+(() => {
+  const bootstrap = () => {
+    const scriptEl = document.currentScript;
+    let container = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!(container && container.classList && container.classList.contains('d3-comm-deploy'))) {
+      const cands = Array.from(document.querySelectorAll('.d3-comm-deploy'))
+        .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+      container = cands[cands.length - 1] || null;
+    }
+    if (!container || (container.dataset && container.dataset.mounted === 'true')) return;
+    container.dataset.mounted = 'true';
+
+    container.innerHTML = `
+      <div class="d3-comm-deploy__header">
+        <div class="d3-comm-deploy__title">Two architectures · same RL loop</div>
+        <button type="button" class="d3-comm-deploy__btn primary" data-act="play">
+          <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6,4 20,12 6,20"/></svg>
+          <span data-label>Play</span>
+        </button>
+        <label class="d3-comm-deploy__speed">
+          Speed
+          <input type="range" min="0.4" max="2" step="0.1" value="1" data-act="speed">
+          <span class="d3-comm-deploy__speed-val" data-speed-val>1.0×</span>
+        </label>
+      </div>
+
+      <div class="d3-comm-deploy__body">
+
+        <!-- HTTP PANEL -->
+        <section class="d3-comm-deploy__panel">
+          <header class="d3-comm-deploy__panel-head" style="--c: var(--c-http);">
+            <span class="swatch"></span>
+            HTTP frameworks
+            <span class="tag">trainer ↔ server</span>
+          </header>
+
+          <div class="d3-comm-deploy__stage">
+            <svg viewBox="0 0 400 220" preserveAspectRatio="xMidYMid meet">
+              <defs>
+                <marker id="dcd-arr-http" viewBox="0 0 10 10" refX="9" refY="5"
+                  markerWidth="6" markerHeight="6" orient="auto" markerUnits="userSpaceOnUse">
+                  <path d="M0,0 L10,5 L0,10 Z" fill="currentColor"/>
+                </marker>
+              </defs>
+
+              <!-- training process box -->
+              <rect class="box tinted-http" x="14" y="50" width="130" height="80" rx="10"/>
+              <text class="label-title" x="79" y="80" text-anchor="middle">Training process</text>
+              <text class="label-sub" x="79" y="96" text-anchor="middle">GPU node</text>
+              <text class="label-sub" x="79" y="108" text-anchor="middle">trainer + vLLM</text>
+
+              <!-- env server box -->
+              <rect class="box tinted-env" x="256" y="50" width="130" height="80" rx="10"/>
+              <text class="label-title" x="321" y="80" text-anchor="middle">Environment server</text>
+              <text class="label-sub" x="321" y="96" text-anchor="middle">CPU · FastAPI</text>
+              <text class="label-sub" x="321" y="108" text-anchor="middle">per-session state</text>
+
+              <!-- arrows between (action up, response down) -->
+              <g style="color: var(--muted-color);">
+                <path class="arrow" d="M144,75 L256,75" marker-end="url(#dcd-arr-http)"/>
+                <text class="arrow-label" x="200" y="68" text-anchor="middle">action / tool call</text>
+                <path class="arrow" d="M256,105 L144,105" marker-end="url(#dcd-arr-http)"/>
+                <text class="arrow-label" x="200" y="120" text-anchor="middle">obs · reward</text>
+              </g>
+
+              <!-- backend dashed -->
+              <rect class="box backend" x="261" y="160" width="120" height="44" rx="8"/>
+              <text class="label-title" x="321" y="184" text-anchor="middle">Backend</text>
+              <text class="label-sub" x="321" y="196" text-anchor="middle">E2B · Modal · custom</text>
+              <g style="color: var(--muted-color);">
+                <path class="arrow dashed" d="M321,130 L321,160" marker-end="url(#dcd-arr-http)"/>
+              </g>
+
+              <!-- packets -->
+              <circle class="packet http-out" cx="144" cy="75" r="3.5" style="fill: var(--c-http);"/>
+              <circle class="packet http-in"  cx="256" cy="105" r="3.5" style="fill: #22c55e;"/>
+              <circle class="packet http-back" cx="321" cy="130" r="3" style="fill: var(--muted-color); opacity:0;"/>
+            </svg>
+          </div>
+
+          <div class="d3-comm-deploy__chips">
+            <span class="d3-comm-deploy__chip" style="--c:#3b82f6;"><span class="dot"></span>OpenEnv</span>
+            <span class="d3-comm-deploy__chip" style="--c:#a855f7;"><span class="dot"></span>ORS</span>
+            <span class="d3-comm-deploy__chip" style="--c:#22c55e;"><span class="dot"></span>NeMo Gym</span>
+          </div>
+          <div class="d3-comm-deploy__note">
+            Two processes, one network hop on every tool call. Env can run on a CPU box or HF Space and scale by adding replicas.
+          </div>
+        </section>
+
+        <!-- IN-PROCESS PANEL -->
+        <section class="d3-comm-deploy__panel">
+          <header class="d3-comm-deploy__panel-head" style="--c: var(--c-inproc);">
+            <span class="swatch"></span>
+            In-process frameworks
+            <span class="tag">single python process</span>
+          </header>
+
+          <div class="d3-comm-deploy__stage">
+            <svg viewBox="0 0 400 220" preserveAspectRatio="xMidYMid meet">
+              <defs>
+                <marker id="dcd-arr-ip" viewBox="0 0 10 10" refX="9" refY="5"
+                  markerWidth="6" markerHeight="6" orient="auto" markerUnits="userSpaceOnUse">
+                  <path d="M0,0 L10,5 L0,10 Z" fill="currentColor"/>
+                </marker>
+              </defs>
+
+              <!-- outer training process box -->
+              <rect class="box outer" x="14" y="32" width="372" height="118" rx="12"/>
+              <text class="label-title" x="28" y="50" text-anchor="start" style="fill: var(--muted-color); font-size:9px; letter-spacing:0.5px; text-transform:uppercase;">Training process</text>
+
+              <!-- inner trainer box -->
+              <rect class="box tinted-http" x="32" y="62" width="140" height="76" rx="9"/>
+              <text class="label-title" x="102" y="92" text-anchor="middle">Trainer</text>
+              <text class="label-sub" x="102" y="108" text-anchor="middle">GRPO · vLLM</text>
+              <text class="label-sub" x="102" y="120" text-anchor="middle">GPU node</text>
+
+              <!-- inner env box -->
+              <rect class="box tinted-inproc" x="228" y="62" width="140" height="76" rx="9"/>
+              <text class="label-title" x="298" y="92" text-anchor="middle">Env (Python obj)</text>
+              <text class="label-sub" x="298" y="108" text-anchor="middle">step() · reset()</text>
+              <text class="label-sub" x="298" y="120" text-anchor="middle">same venv</text>
+
+              <!-- arrows between -->
+              <g style="color: var(--muted-color);">
+                <path class="arrow" d="M172,84 L228,84" marker-end="url(#dcd-arr-ip)"/>
+                <text class="arrow-label" x="200" y="78" text-anchor="middle">call</text>
+                <path class="arrow" d="M228,116 L172,116" marker-end="url(#dcd-arr-ip)"/>
+                <text class="arrow-label" x="200" y="130" text-anchor="middle">return</text>
+              </g>
+
+              <!-- backend dashed -->
+              <rect class="box backend" x="140" y="170" width="120" height="38" rx="8"/>
+              <text class="label-title" x="200" y="190" text-anchor="middle">Backend</text>
+              <text class="label-sub" x="200" y="202" text-anchor="middle">optional · E2B / sandbox</text>
+              <g style="color: var(--muted-color);">
+                <path class="arrow dashed" d="M298,138 L298,162 L260,162 L260,170" marker-end="url(#dcd-arr-ip)"/>
+              </g>
+
+              <!-- packets -->
+              <circle class="packet ip-out" cx="172" cy="84" r="3.5" style="fill: var(--c-inproc);"/>
+              <circle class="packet ip-in"  cx="228" cy="116" r="3.5" style="fill: #22c55e;"/>
+              <circle class="packet ip-back" cx="298" cy="138" r="3" style="fill: var(--muted-color); opacity:0;"/>
+            </svg>
+          </div>
+
+          <div class="d3-comm-deploy__chips">
+            <span class="d3-comm-deploy__chip" style="--c:#ec4899;"><span class="dot"></span>Verifiers</span>
+            <span class="d3-comm-deploy__chip" style="--c:#f59e0b;"><span class="dot"></span>SkyRL Gym</span>
+            <span class="d3-comm-deploy__chip" style="--c:#14b8a6;"><span class="dot"></span>GEM</span>
+          </div>
+          <div class="d3-comm-deploy__note">
+            One process. Direct Python call. Fewer moving parts, but env shares the GPU node's CPU and dependency tree.
+          </div>
+        </section>
+      </div>
+
+      <div class="d3-comm-deploy__caption">
+        Same loop, two shapes. HTTP frameworks separate trainer and env so each can scale on its own machine class. In-process frameworks fold the env into the trainer for simpler local runs at the cost of resource isolation.
+      </div>
+    `;
+
+    // ── Controls ──
+    const playBtn = container.querySelector('[data-act="play"]');
+    const playLbl = container.querySelector('[data-label]');
+    const speedInput = container.querySelector('[data-act="speed"]');
+    const speedVal = container.querySelector('[data-speed-val]');
+
+    let playing = false;
+    const setPlaying = (next) => {
+      playing = next;
+      container.classList.toggle('playing', playing);
+      playLbl.textContent = playing ? 'Pause' : 'Play';
+      const icon = playBtn.querySelector('svg');
+      if (playing) {
+        icon.innerHTML = '<rect x="6" y="5" width="4" height="14" fill="currentColor"/><rect x="14" y="5" width="4" height="14" fill="currentColor"/>';
+      } else {
+        icon.innerHTML = '<polygon points="6,4 20,12 6,20" fill="currentColor"/>';
+      }
+    };
+    playBtn.addEventListener('click', () => setPlaying(!playing));
+
+    const updateSpeed = () => {
+      const s = parseFloat(speedInput.value);
+      const dur = (1.6 / s).toFixed(2) + 's';
+      container.style.setProperty('--dur', dur);
+      speedVal.textContent = s.toFixed(1) + '×';
+    };
+    speedInput.addEventListener('input', updateSpeed);
+    updateSpeed();
+
+    // start playing on first scroll-into-view, like the other embeds
+    const io = ('IntersectionObserver' in window) ? new IntersectionObserver((entries) => {
+      entries.forEach(e => {
+        if (e.isIntersecting && !playing) {
+          setPlaying(true);
+          io.disconnect();
+        }
+      });
+    }, { threshold: 0.4 }) : null;
+    if (io) io.observe(container); else setPlaying(true);
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  } else {
+    bootstrap();
+  }
+})();
+</script>

app/src/content/embeds/d3-tool-discovery.html

@@ -0,0 +1,435 @@
+<div class="d3-tool-discovery" style="width:100%;margin:14px 0;"></div>
+<style>
+  .d3-tool-discovery {
+    position: relative;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--surface-bg);
+    overflow: hidden;
+    color: var(--text-color);
+  }
+
+  /* ── Header ── */
+  .d3-tool-discovery__header {
+    display: flex; flex-wrap: wrap; align-items: center;
+    gap: 12px 16px; padding: 12px 16px;
+    border-bottom: 1px solid var(--border-color);
+  }
+  .d3-tool-discovery__title {
+    font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
+    text-transform: uppercase; color: var(--muted-color);
+    margin-right: auto;
+  }
+  .d3-tool-discovery__btn {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 12px; border-radius: 7px;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg); color: var(--text-color);
+    font-size: 12px; font-weight: 600; cursor: pointer;
+    transition: border-color .12s ease, background .12s ease;
+  }
+  .d3-tool-discovery__btn:hover { border-color: var(--primary-color); }
+  .d3-tool-discovery__btn.primary {
+    border-color: var(--primary-color);
+    background: color-mix(in oklab, var(--primary-color) 12%, var(--surface-bg));
+  }
+  .d3-tool-discovery__btn svg { width: 12px; height: 12px; }
+  .d3-tool-discovery__speed {
+    display: inline-flex; align-items: center; gap: 8px;
+    font-size: 11px; color: var(--muted-color);
+  }
+  .d3-tool-discovery__speed input[type=range] {
+    width: 100px;
+    accent-color: var(--primary-color);
+  }
+  .d3-tool-discovery__speed-val {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    color: var(--text-color); font-size: 11px;
+    min-width: 36px; text-align: right;
+  }
+
+  /* ── Grid of framework cards ── */
+  .d3-tool-discovery__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 0;
+    background: color-mix(in oklab, var(--muted-color) 3%, transparent);
+  }
+  .td-card {
+    padding: 14px 14px 12px 14px;
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    display: flex; flex-direction: column; gap: 9px;
+    background: var(--surface-bg);
+    min-width: 0;
+  }
+  /* fix the trailing edges so the grid looks clean */
+  .td-card:nth-child(3n) { border-right: 0; }
+  .td-card:nth-last-child(-n+3):not(:nth-child(3n+2)):not(:nth-child(3n)) { border-bottom: 0; }
+  @media (max-width: 880px) {
+    .td-card { border-right: 0 !important; }
+    .td-card:nth-last-child(-n+2) { border-bottom: 0; }
+  }
+  @media (max-width: 580px) {
+    .td-card { border-bottom: 1px solid var(--border-color) !important; }
+    .td-card:last-child { border-bottom: 0 !important; }
+  }
+
+  /* card head */
+  .td-card__head {
+    display: flex; align-items: center; gap: 8px;
+  }
+  .td-card__head .swatch {
+    width: 9px; height: 9px;
+    border-radius: 50%;
+    background: var(--c, var(--muted-color));
+    flex-shrink: 0;
+  }
+  .td-card__head .name {
+    font-weight: 700;
+    font-size: 12.5px;
+    color: var(--text-color);
+  }
+  .td-card__head .kind {
+    margin-left: auto;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border-radius: 4px;
+    color: var(--muted-color);
+    background: color-mix(in oklab, var(--muted-color) 8%, transparent);
+    border: 1px solid var(--border-color);
+  }
+  .td-card__head .kind.http {
+    color: color-mix(in oklab, var(--c, #3b82f6) 90%, var(--text-color));
+    background: color-mix(in oklab, var(--c, #3b82f6) 12%, transparent);
+    border-color: color-mix(in oklab, var(--c, #3b82f6) 30%, var(--border-color));
+  }
+
+  /* sequence stage */
+  .td-stage {
+    position: relative;
+    aspect-ratio: 16 / 6;
+    border-radius: 8px;
+    background: color-mix(in oklab, var(--muted-color) 4%, transparent);
+    border: 1px solid var(--border-color);
+    overflow: hidden;
+    min-height: 90px;
+  }
+  .td-stage svg {
+    width: 100%; height: 100%; display: block;
+    font-family: ui-sans-serif, system-ui, sans-serif;
+  }
+  .td-stage .node {
+    fill: var(--surface-bg);
+    stroke: var(--border-color);
+    stroke-width: 1.2;
+  }
+  .td-stage .node.client {
+    fill: color-mix(in oklab, var(--muted-color) 6%, var(--surface-bg));
+  }
+  .td-stage .node.env {
+    fill: color-mix(in oklab, var(--c) 10%, var(--surface-bg));
+    stroke: color-mix(in oklab, var(--c) 35%, var(--border-color));
+  }
+  .td-stage .label-title {
+    fill: var(--text-color);
+    font-size: 10px; font-weight: 700;
+  }
+  .td-stage .label-sub {
+    fill: var(--muted-color);
+    font-size: 8.5px; font-weight: 500;
+  }
+  .td-stage .arrow {
+    stroke: var(--muted-color);
+    stroke-width: 1.3;
+    fill: none;
+  }
+  .td-stage .arrow.dashed { stroke-dasharray: 4 3; }
+  .td-stage .arrow-label {
+    fill: var(--text-color);
+    font-size: 8.5px;
+    font-weight: 600;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+  .td-stage .stage-tag {
+    fill: var(--muted-color);
+    font-size: 7.5px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+
+  /* travelling packets — sequence: discovery out → discovery in → call out → call in */
+  .td-stage .packet {
+    fill: var(--c, var(--primary-color));
+    opacity: 0;
+  }
+  .d3-tool-discovery.playing .packet {
+    animation-play-state: running;
+  }
+  .d3-tool-discovery:not(.playing) .packet { animation-play-state: paused; opacity: 0; }
+
+  /* full sequence packet covering 4 phases over the duration */
+  .td-stage .packet.disc-out {
+    animation: td-disc-out var(--dur, 2.4s) linear infinite;
+  }
+  .td-stage .packet.disc-in {
+    animation: td-disc-in var(--dur, 2.4s) linear infinite;
+  }
+  .td-stage .packet.call-out {
+    animation: td-call-out var(--dur, 2.4s) linear infinite;
+  }
+  .td-stage .packet.call-in {
+    animation: td-call-in var(--dur, 2.4s) linear infinite;
+  }
+  @keyframes td-disc-out {
+    0%   { transform: translate(0, 0); opacity: 0; }
+    1%   { opacity: 1; }
+    23%  { transform: translate(180px, 0); opacity: 1; }
+    24%  { opacity: 0; }
+    100% { opacity: 0; }
+  }
+  @keyframes td-disc-in {
+    0%, 24% { opacity: 0; }
+    25%  { transform: translate(0, 0); opacity: 1; }
+    48%  { transform: translate(-180px, 0); opacity: 1; }
+    49%  { opacity: 0; }
+    100% { opacity: 0; }
+  }
+  @keyframes td-call-out {
+    0%, 49% { opacity: 0; }
+    50%  { transform: translate(0, 0); opacity: 1; }
+    73%  { transform: translate(180px, 0); opacity: 1; }
+    74%  { opacity: 0; }
+    100% { opacity: 0; }
+  }
+  @keyframes td-call-in {
+    0%, 74% { opacity: 0; }
+    75%  { transform: translate(0, 0); opacity: 1; }
+    98%  { transform: translate(-180px, 0); opacity: 1; }
+    99%  { opacity: 0; }
+    100% { opacity: 0; }
+  }
+
+  /* card footer table */
+  .td-card__rows {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 3px 10px;
+    font-size: 10.5px;
+    line-height: 1.5;
+  }
+  .td-card__rows .k {
+    color: var(--muted-color);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    font-size: 9.5px;
+    padding-top: 1px;
+  }
+  .td-card__rows .v {
+    color: var(--text-color);
+    overflow-wrap: anywhere;
+  }
+  .td-card__rows code {
+    background: color-mix(in oklab, var(--muted-color) 10%, transparent);
+    border-radius: 3px;
+    padding: 0 4px;
+    font-size: 10.5px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+
+  /* caption */
+  .d3-tool-discovery__caption {
+    padding: 10px 16px;
+    border-top: 1px solid var(--border-color);
+    font-size: 11.5px;
+    color: var(--muted-color);
+    font-style: italic;
+    line-height: 1.55;
+  }
+</style>
+<script>
+(() => {
+  const bootstrap = () => {
+    const scriptEl = document.currentScript;
+    let container = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!(container && container.classList && container.classList.contains('d3-tool-discovery'))) {
+      const cands = Array.from(document.querySelectorAll('.d3-tool-discovery'))
+        .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+      container = cands[cands.length - 1] || null;
+    }
+    if (!container || (container.dataset && container.dataset.mounted === 'true')) return;
+    container.dataset.mounted = 'true';
+
+    const FRAMEWORKS = [
+      {
+        key: 'openenv',  name: 'OpenEnv',   color: '#3b82f6', kind: 'http',
+        defn: '<code>@mcp.tool</code> on FastMCP',
+        discoveryLabel: 'tools/list',
+        callLabel: 'tools/call',
+        schema: 'MCP tool spec (JSON Schema)',
+      },
+      {
+        key: 'ors',      name: 'ORS',       color: '#a855f7', kind: 'http',
+        defn: '<code>@tool</code> + Pydantic',
+        discoveryLabel: 'GET /tools',
+        callLabel: 'POST /call',
+        schema: 'ORS ToolSpec',
+      },
+      {
+        key: 'nemo',     name: 'NeMo Gym',  color: '#22c55e', kind: 'http',
+        defn: '<code>app.post()</code> endpoints',
+        discoveryLabel: 'GET /openapi.json',
+        callLabel: 'POST /tool',
+        schema: 'OpenAPI JSON Schema',
+      },
+      {
+        key: 'verifs',   name: 'Verifiers', color: '#ec4899', kind: 'inproc',
+        defn: 'Plain Python fns',
+        discoveryLabel: 'tools=[fn]',
+        callLabel: 'fn(args)',
+        schema: 'Type hints (auto)',
+      },
+      {
+        key: 'skyrl',    name: 'SkyRL Gym', color: '#f59e0b', kind: 'inproc',
+        defn: '<code>ToolGroup</code> subclass',
+        discoveryLabel: 'init_tool_groups()',
+        callLabel: 'group.invoke()',
+        schema: 'Type hints (auto)',
+      },
+      {
+        key: 'gem',      name: 'GEM',       color: '#14b8a6', kind: 'inproc',
+        defn: '<code>ToolEnvWrapper</code>',
+        discoveryLabel: 'wrapper compose',
+        callLabel: 'env.step(call)',
+        schema: 'Wrapper-defined',
+      },
+    ];
+
+    const cardSvg = (f) => `
+      <svg viewBox="0 0 280 110" preserveAspectRatio="xMidYMid meet">
+        <defs>
+          <marker id="td-arr-${f.key}" viewBox="0 0 10 10" refX="9" refY="5"
+            markerWidth="6" markerHeight="6" orient="auto" markerUnits="userSpaceOnUse">
+            <path d="M0,0 L10,5 L0,10 Z" fill="currentColor"/>
+          </marker>
+        </defs>
+
+        <!-- left node: Trainer -->
+        <rect class="node client" x="10" y="22" width="64" height="62" rx="8"/>
+        <text class="label-title" x="42" y="48" text-anchor="middle">Trainer</text>
+        <text class="label-sub" x="42" y="62" text-anchor="middle">${f.kind === 'http' ? 'client' : 'in-process'}</text>
+
+        <!-- right node: Env / tools -->
+        <rect class="node env" x="206" y="22" width="64" height="62" rx="8"/>
+        <text class="label-title" x="238" y="48" text-anchor="middle">${f.kind === 'http' ? 'Env server' : 'Env (Py)'}</text>
+        <text class="label-sub" x="238" y="62" text-anchor="middle">tools</text>
+
+        <!-- discovery arrow (top) -->
+        <g style="color: var(--muted-color);">
+          <path class="arrow ${f.kind === 'http' ? 'dashed' : ''}" d="M74,38 L206,38" marker-end="url(#td-arr-${f.key})"/>
+          <text class="arrow-label" x="140" y="32" text-anchor="middle">${f.discoveryLabel}</text>
+        </g>
+        <text class="stage-tag" x="140" y="14" text-anchor="middle">discover</text>
+
+        <!-- call arrow (bottom) -->
+        <g style="color: var(--c);">
+          <path class="arrow" d="M74,72 L206,72" marker-end="url(#td-arr-${f.key})"/>
+          <text class="arrow-label" x="140" y="88" text-anchor="middle">${f.callLabel}</text>
+        </g>
+        <text class="stage-tag" x="140" y="106" text-anchor="middle">invoke</text>
+
+        <!-- packets -->
+        <circle class="packet disc-out" cx="74" cy="38" r="3" style="fill: var(--muted-color);"/>
+        <circle class="packet disc-in"  cx="206" cy="38" r="3" style="fill: var(--muted-color);"/>
+        <circle class="packet call-out" cx="74" cy="72" r="3.2" style="fill: var(--c);"/>
+        <circle class="packet call-in"  cx="206" cy="72" r="3.2" style="fill: #22c55e;"/>
+      </svg>
+    `;
+
+    const cardsHtml = FRAMEWORKS.map(f => `
+      <article class="td-card" style="--c:${f.color};">
+        <div class="td-card__head">
+          <span class="swatch"></span>
+          <span class="name">${f.name}</span>
+          <span class="kind ${f.kind === 'http' ? 'http' : ''}">${f.kind === 'http' ? 'HTTP' : 'In-process'}</span>
+        </div>
+        <div class="td-stage">${cardSvg(f)}</div>
+        <div class="td-card__rows">
+          <span class="k">def</span><span class="v">${f.defn}</span>
+          <span class="k">discover</span><span class="v"><code>${f.discoveryLabel}</code></span>
+          <span class="k">schema</span><span class="v">${f.schema}</span>
+        </div>
+      </article>
+    `).join('');
+
+    container.innerHTML = `
+      <div class="d3-tool-discovery__header">
+        <div class="d3-tool-discovery__title">Tool discovery & invocation · 6 frameworks</div>
+        <button type="button" class="d3-tool-discovery__btn primary" data-act="play">
+          <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6,4 20,12 6,20"/></svg>
+          <span data-label>Play</span>
+        </button>
+        <label class="d3-tool-discovery__speed">
+          Speed
+          <input type="range" min="0.4" max="2" step="0.1" value="1" data-act="speed">
+          <span class="d3-tool-discovery__speed-val" data-speed-val>1.0×</span>
+        </label>
+      </div>
+      <div class="d3-tool-discovery__grid">${cardsHtml}</div>
+      <div class="d3-tool-discovery__caption">
+        Same loop, two discovery shapes. HTTP frameworks fetch the tool list at runtime over the wire (dashed line). In-process frameworks register tools when the env constructs (solid Python call). After that, both look the same to the model: name + typed args in, observation out.
+      </div>
+    `;
+
+    // ── Controls ──
+    const playBtn = container.querySelector('[data-act="play"]');
+    const playLbl = container.querySelector('[data-label]');
+    const speedInput = container.querySelector('[data-act="speed"]');
+    const speedVal = container.querySelector('[data-speed-val]');
+
+    let playing = false;
+    const setPlaying = (next) => {
+      playing = next;
+      container.classList.toggle('playing', playing);
+      playLbl.textContent = playing ? 'Pause' : 'Play';
+      const icon = playBtn.querySelector('svg');
+      if (playing) {
+        icon.innerHTML = '<rect x="6" y="5" width="4" height="14" fill="currentColor"/><rect x="14" y="5" width="4" height="14" fill="currentColor"/>';
+      } else {
+        icon.innerHTML = '<polygon points="6,4 20,12 6,20" fill="currentColor"/>';
+      }
+    };
+    playBtn.addEventListener('click', () => setPlaying(!playing));
+
+    const updateSpeed = () => {
+      const s = parseFloat(speedInput.value);
+      const dur = (2.4 / s).toFixed(2) + 's';
+      container.style.setProperty('--dur', dur);
+      speedVal.textContent = s.toFixed(1) + '×';
+    };
+    speedInput.addEventListener('input', updateSpeed);
+    updateSpeed();
+
+    const io = ('IntersectionObserver' in window) ? new IntersectionObserver((entries) => {
+      entries.forEach(e => {
+        if (e.isIntersecting && !playing) {
+          setPlaying(true);
+          io.disconnect();
+        }
+      });
+    }, { threshold: 0.3 }) : null;
+    if (io) io.observe(container); else setPlaying(true);
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  } else {
+    bootstrap();
+  }
+})();
+</script>

app/src/content/embeds/tool-action-matrix.html

@@ -0,0 +1,198 @@
+<div class="tool-action-matrix" style="width:100%;margin:14px 0;"></div>
+<style>
+  .tool-action-matrix {
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--surface-bg);
+    overflow: hidden;
+    color: var(--text-color);
+  }
+  .tool-action-matrix__head {
+    display: flex; align-items: center; gap: 12px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-color);
+    background: color-mix(in oklab, var(--muted-color) 4%, transparent);
+    flex-wrap: wrap;
+  }
+  .tool-action-matrix__title {
+    font-size: 10.5px;
+    font-weight: 800;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: var(--muted-color);
+    margin-right: auto;
+  }
+  .tool-action-matrix__legend {
+    display: inline-flex; align-items: center; gap: 10px;
+    font-size: 10.5px; color: var(--muted-color);
+  }
+  .tool-action-matrix__legend .item {
+    display: inline-flex; align-items: center; gap: 5px;
+  }
+  .tam-pill {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 2px 9px;
+    font-size: 11px;
+    font-weight: 700;
+    border-radius: 999px;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+  .tam-pill.yes {
+    background: color-mix(in oklab, #22c55e 14%, transparent);
+    color: #16a34a;
+    border: 1px solid color-mix(in oklab, #22c55e 35%, transparent);
+  }
+  .tam-pill.kind-http {
+    background: color-mix(in oklab, #3b82f6 12%, transparent);
+    color: color-mix(in oklab, #3b82f6 80%, var(--text-color));
+    border: 1px solid color-mix(in oklab, #3b82f6 30%, transparent);
+  }
+  .tam-pill.kind-inproc {
+    background: color-mix(in oklab, #ec4899 10%, transparent);
+    color: color-mix(in oklab, #ec4899 80%, var(--text-color));
+    border: 1px solid color-mix(in oklab, #ec4899 28%, transparent);
+  }
+
+  .tool-action-matrix__wrap { overflow-x: auto; }
+  .tool-action-matrix table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    min-width: 760px;
+  }
+  .tool-action-matrix table thead th {
+    text-align: left;
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    color: var(--muted-color);
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border-color);
+    background: color-mix(in oklab, var(--muted-color) 3%, transparent);
+    white-space: nowrap;
+  }
+  .tool-action-matrix table thead th .swatch {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: var(--c, var(--muted-color));
+    display: inline-block;
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+  .tool-action-matrix table tbody td {
+    padding: 10px 12px;
+    border-bottom: 1px solid color-mix(in oklab, var(--border-color) 60%, transparent);
+    vertical-align: middle;
+    color: var(--text-color);
+    font-size: 11.5px;
+    line-height: 1.5;
+  }
+  .tool-action-matrix table tbody tr:last-child td { border-bottom: 0; }
+  .tool-action-matrix table tbody tr:hover td {
+    background: color-mix(in oklab, var(--muted-color) 3%, transparent);
+  }
+  .tool-action-matrix table tbody td.row-name {
+    font-weight: 600;
+    color: var(--text-color);
+    white-space: nowrap;
+    font-size: 12px;
+  }
+  .tool-action-matrix table tbody td code {
+    background: color-mix(in oklab, var(--muted-color) 10%, transparent);
+    border-radius: 3px;
+    padding: 0 5px;
+    font-size: 11px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+</style>
+<script>
+(() => {
+  const bootstrap = () => {
+    const scriptEl = document.currentScript;
+    let container = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!(container && container.classList && container.classList.contains('tool-action-matrix'))) {
+      const cands = Array.from(document.querySelectorAll('.tool-action-matrix'))
+        .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+      container = cands[cands.length - 1] || null;
+    }
+    if (!container || (container.dataset && container.dataset.mounted === 'true')) return;
+    container.dataset.mounted = 'true';
+
+    const FRAMEWORKS = [
+      { key: 'openenv', name: 'OpenEnv',   color: '#3b82f6', kind: 'http' },
+      { key: 'ors',     name: 'ORS',       color: '#a855f7', kind: 'http' },
+      { key: 'nemo',    name: 'NeMo Gym',  color: '#22c55e', kind: 'http' },
+      { key: 'verifs',  name: 'Verifiers', color: '#ec4899', kind: 'inproc' },
+      { key: 'skyrl',   name: 'SkyRL Gym', color: '#f59e0b', kind: 'inproc' },
+      { key: 'gem',     name: 'GEM',       color: '#14b8a6', kind: 'inproc' },
+    ];
+
+    const yes = '<span class="tam-pill yes">✓</span>';
+
+    const ROWS = [
+      { name: 'Tool definition', cells: {
+        openenv: '<code>@mcp.tool</code> on FastMCP',
+        ors:     '<code>@tool</code> + Pydantic model',
+        nemo:    'FastAPI <code>app.post()</code> endpoint',
+        verifs:  'Plain Python fns into <code>ToolEnv(tools=[...])</code>',
+        skyrl:   'Methods on <code>ToolGroup</code> subclass',
+        gem:     'Env wrappers (<code>ToolEnvWrapper</code>)',
+      }},
+      { name: 'Discovery', cells: {
+        openenv: 'MCP <code>tools/list</code>',
+        ors:     'HTTP <code>GET /tools</code>',
+        nemo:    'OpenAPI <code>GET /openapi.json</code>',
+        verifs:  'Explicit list at init',
+        skyrl:   '<code>init_tool_groups()</code>',
+        gem:     'Wrapper composition',
+      }},
+      { name: 'Schema format', cells: {
+        openenv: 'MCP tool spec (JSON Schema)',
+        ors:     'ORS ToolSpec',
+        nemo:    'OpenAPI JSON Schema',
+        verifs:  'Python type hints (auto)',
+        skyrl:   'Python type hints (auto)',
+        gem:     'Wrapper-defined',
+      }},
+      { name: 'Multi-turn', cells: {
+        openenv: yes, ors: yes, nemo: yes,
+        verifs: yes, skyrl: yes, gem: yes,
+      }},
+    ];
+
+    const headerCells = FRAMEWORKS.map(f =>
+      `<th><span class="swatch" style="--c:${f.color};"></span>${f.name}</th>`
+    ).join('');
+    const kindRow = FRAMEWORKS.map(f => `<td><span class="tam-pill kind-${f.kind}">${f.kind === 'http' ? 'HTTP' : 'In-process'}</span></td>`).join('');
+    const rowsHtml = ROWS.map(r => {
+      const cells = FRAMEWORKS.map(f => `<td>${r.cells[f.key]}</td>`).join('');
+      return `<tr><td class="row-name">${r.name}</td>${cells}</tr>`;
+    }).join('');
+
+    container.innerHTML = `
+      <div class="tool-action-matrix__head">
+        <span class="tool-action-matrix__title">Tool & action model · 6 frameworks</span>
+      </div>
+      <div class="tool-action-matrix__wrap">
+        <table>
+          <thead>
+            <tr><th>Capability</th>${headerCells}</tr>
+          </thead>
+          <tbody>
+            <tr><td class="row-name">Kind</td>${kindRow}</tr>
+            ${rowsHtml}
+          </tbody>
+        </table>
+      </div>
+    `;
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  } else {
+    bootstrap();
+  }
+})();
+</script>