feat(demo): add trio Playwright orchestration + seed embeds for the pitch video

- backend/demo/trio.ts drives 3 real Chromium sessions (Alice/Bob/Carol) collaborating on a
fresh document in under 30s for the demo reel, with human-like typing and kill-leftovers
hygiene on every run
- Centralize the hand-crafted banner HTML and demo-specific embeds (confusion matrix, memory
bar) so the script stays deterministic for recordings
- Expose a `load-demo` entrypoint used by the dev-only script to hydrate the editor in one shot

Made-with: Cursor

backend/demo/banners.ts

@@ -0,0 +1,179 @@
+/**
+ * Pre-built banner HTML snippets used by the demo personas.
+ *
+ * They follow the same conventions as a real HtmlEmbed in the editor:
+ *  - Single root element with a stable class
+ *  - Scoped <style> using CSS variables for theming
+ *  - IIFE <script> with a `data-mounted` guard
+ *  - No globals, no external dependencies
+ *
+ * The Editor exposes a dev-only `__demo-set-banner` window event that writes
+ * the provided HTML straight into `embedStore` under the `banner.html` key,
+ * which is exactly what the "Create chart" button + Embed Studio pipeline
+ * would do once the agent finished generating. We use it from the demo
+ * script to make the recording deterministic and visually polished.
+ */
+
+export const NEURAL_NETWORK_BANNER_HTML = `<div class="d3-banner-nn" aria-label="Neural network banner"></div>
+<style>
+  .d3-banner-nn {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    /* Transparent on purpose: embeds (banner included) inherit the page
+       background, per the "no background by default" convention. */
+    background: transparent;
+  }
+  .d3-banner-nn svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  .d3-banner-nn .nn-link {
+    stroke: color-mix(in oklab, var(--text-color, #111) 14%, transparent);
+    stroke-width: 0.6;
+    fill: none;
+  }
+  .d3-banner-nn .nn-node {
+    fill: var(--primary-color, #4f46e5);
+    opacity: 0.85;
+  }
+  .d3-banner-nn .nn-node-ring {
+    fill: none;
+    stroke: color-mix(in oklab, var(--primary-color, #4f46e5) 60%, transparent);
+    stroke-width: 0.8;
+  }
+  .d3-banner-nn .nn-pulse {
+    fill: var(--primary-color, #4f46e5);
+  }
+</style>
+<script>
+(() => {
+  const bootstrap = () => {
+    const all = Array.from(document.querySelectorAll('.d3-banner-nn'));
+    const container = all.find((el) => el.dataset.mounted !== 'true');
+    if (!container) return;
+    container.dataset.mounted = 'true';
+
+    const NS = 'http://www.w3.org/2000/svg';
+    const W = 980;
+    const H = 392;
+
+    const svg = document.createElementNS(NS, 'svg');
+    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
+    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    container.appendChild(svg);
+
+    // Layer sizes: input -> 3 hidden layers -> output.
+    const layers = [6, 10, 14, 10, 6];
+    const padX = 110;
+    const padY = 70;
+
+    const xs = layers.map((_, i) =>
+      padX + (i * (W - padX * 2)) / (layers.length - 1)
+    );
+
+    const nodes = [];
+    layers.forEach((count, li) => {
+      const usable = H - padY * 2;
+      const step = count > 1 ? usable / (count - 1) : 0;
+      for (let i = 0; i < count; i++) {
+        nodes.push({
+          layer: li,
+          idx: i,
+          x: xs[li],
+          y: padY + (count > 1 ? i * step : usable / 2),
+        });
+      }
+    });
+
+    const links = [];
+    for (let li = 0; li < layers.length - 1; li++) {
+      const a = nodes.filter((n) => n.layer === li);
+      const b = nodes.filter((n) => n.layer === li + 1);
+      a.forEach((na) => b.forEach((nb) => links.push([na, nb])));
+    }
+
+    const gLinks = document.createElementNS(NS, 'g');
+    links.forEach(([a, b]) => {
+      const line = document.createElementNS(NS, 'line');
+      line.setAttribute('class', 'nn-link');
+      line.setAttribute('x1', String(a.x));
+      line.setAttribute('y1', String(a.y));
+      line.setAttribute('x2', String(b.x));
+      line.setAttribute('y2', String(b.y));
+      gLinks.appendChild(line);
+    });
+    svg.appendChild(gLinks);
+
+    const gNodes = document.createElementNS(NS, 'g');
+    nodes.forEach((n) => {
+      const ring = document.createElementNS(NS, 'circle');
+      ring.setAttribute('class', 'nn-node-ring');
+      ring.setAttribute('cx', String(n.x));
+      ring.setAttribute('cy', String(n.y));
+      ring.setAttribute('r', '7');
+      gNodes.appendChild(ring);
+
+      const c = document.createElementNS(NS, 'circle');
+      c.setAttribute('class', 'nn-node');
+      c.setAttribute('cx', String(n.x));
+      c.setAttribute('cy', String(n.y));
+      c.setAttribute('r', '3.2');
+      gNodes.appendChild(c);
+    });
+    svg.appendChild(gNodes);
+
+    const gPulses = document.createElementNS(NS, 'g');
+    svg.appendChild(gPulses);
+
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduced) return;
+
+    let stopped = false;
+    container.__demoCleanup = () => { stopped = true; };
+
+    const fire = () => {
+      if (stopped || links.length === 0) return;
+      const [a, b] = links[Math.floor(Math.random() * links.length)];
+      const c = document.createElementNS(NS, 'circle');
+      c.setAttribute('class', 'nn-pulse');
+      c.setAttribute('r', '2.6');
+      c.setAttribute('cx', String(a.x));
+      c.setAttribute('cy', String(a.y));
+      c.style.opacity = '0.9';
+      gPulses.appendChild(c);
+
+      const start = performance.now();
+      const dur = 700 + Math.random() * 700;
+      const tick = (now) => {
+        if (stopped) { c.remove(); return; }
+        const t = Math.min(1, (now - start) / dur);
+        const x = a.x + (b.x - a.x) * t;
+        const y = a.y + (b.y - a.y) * t;
+        c.setAttribute('cx', String(x));
+        c.setAttribute('cy', String(y));
+        c.style.opacity = String(0.9 * (1 - t));
+        if (t < 1) requestAnimationFrame(tick);
+        else c.remove();
+      };
+      requestAnimationFrame(tick);
+    };
+
+    const loop = () => {
+      if (stopped) return;
+      const burst = 2 + Math.floor(Math.random() * 3);
+      for (let i = 0; i < burst; i++) fire();
+      setTimeout(loop, 160 + Math.random() * 180);
+    };
+    loop();
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  } else {
+    bootstrap();
+  }
+})();
+</script>`;

backend/demo/human-typing.ts

@@ -0,0 +1,132 @@
+/**
+ * human-typing.ts
+ *
+ * Helpers to make Playwright type like a real human: variable cadence,
+ * thinking pauses around punctuation, occasional typos that get corrected
+ * with backspace, short words sent as bursts, and longer words slowed down.
+ *
+ * Designed for demo/marketing videos where the goal is "this looks like a
+ * person writing", not deterministic test output.
+ */
+import type { Page, Locator } from "playwright";
+
+export interface HumanTypingOptions {
+  /** Baseline delay between keystrokes (ms). Actual delay is jittered. */
+  baseDelay?: number;
+  /** Jitter range added on top of baseDelay (ms). */
+  jitter?: number;
+  /** Probability (0-1) of mistyping a character, then fixing it. */
+  typoRate?: number;
+  /** Probability (0-1) of a short "thinking" pause between words. */
+  thinkRate?: number;
+  /** Multiplier applied to all delays (1 = normal, 0.5 = fast, 2 = slow). */
+  speed?: number;
+}
+
+const DEFAULTS: Required<HumanTypingOptions> = {
+  baseDelay: 55,
+  jitter: 85,
+  typoRate: 0.025,
+  thinkRate: 0.18,
+  speed: 1,
+};
+
+function rand(min: number, max: number): number {
+  return min + Math.random() * (max - min);
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+/** Picks a plausible typo character adjacent to the target on QWERTY. */
+const TYPO_MAP: Record<string, string> = {
+  a: "s", b: "v", c: "v", d: "s", e: "r", f: "d", g: "h", h: "j",
+  i: "o", j: "k", k: "l", l: "k", m: "n", n: "m", o: "p", p: "o",
+  q: "w", r: "t", s: "a", t: "y", u: "i", v: "b", w: "e", x: "c",
+  y: "u", z: "x",
+};
+
+function typoFor(ch: string): string | null {
+  const lower = ch.toLowerCase();
+  const neighbor = TYPO_MAP[lower];
+  if (!neighbor) return null;
+  return ch === lower ? neighbor : neighbor.toUpperCase();
+}
+
+/**
+ * Type `text` into the currently focused element of `page` with human-like
+ * rhythm. Adds pauses after punctuation, thinking pauses between words,
+ * the occasional typo followed by a correction, and small speed variation.
+ */
+export async function humanType(
+  page: Page,
+  text: string,
+  options: HumanTypingOptions = {}
+): Promise<void> {
+  const { baseDelay, jitter, typoRate, thinkRate, speed } = { ...DEFAULTS, ...options };
+  const scale = 1 / speed;
+
+  const tokens = text.split(/(\s+)/);
+
+  for (let t = 0; t < tokens.length; t++) {
+    const token = tokens[t];
+    if (!token) continue;
+
+    if (/^\s+$/.test(token)) {
+      await page.keyboard.type(token, { delay: 0 });
+      if (Math.random() < thinkRate) {
+        await sleep(rand(180, 520) * scale);
+      }
+      continue;
+    }
+
+    const wordSpeed = token.length > 7 ? rand(1.0, 1.3) : rand(0.7, 1.0);
+
+    for (let i = 0; i < token.length; i++) {
+      const ch = token[i];
+      const delay = (baseDelay + Math.random() * jitter) * wordSpeed * scale;
+
+      const shouldTypo = Math.random() < typoRate && /[a-zA-Z]/.test(ch);
+      if (shouldTypo) {
+        const wrong = typoFor(ch);
+        if (wrong) {
+          await page.keyboard.type(wrong, { delay });
+          await sleep(rand(90, 260) * scale);
+          await page.keyboard.press("Backspace");
+          await sleep(rand(60, 180) * scale);
+        }
+      }
+
+      await page.keyboard.type(ch, { delay });
+
+      if (/[,;:]/.test(ch)) {
+        await sleep(rand(280, 700) * scale);
+      } else if (/[.!?]/.test(ch)) {
+        await sleep(rand(600, 1400) * scale);
+      }
+    }
+  }
+}
+
+/**
+ * Focus a locator and type with `humanType`. Waits for visibility first.
+ */
+export async function humanTypeInto(
+  page: Page,
+  target: Locator,
+  text: string,
+  options: HumanTypingOptions = {}
+): Promise<void> {
+  await target.waitFor({ state: "visible" });
+  await target.click();
+  await sleep(rand(250, 550));
+  await humanType(page, text, options);
+}
+
+/**
+ * Sleep for a human-ish "reading/thinking" pause.
+ */
+export function pause(min: number, max: number = min): Promise<void> {
+  return sleep(rand(min, max));
+}

backend/demo/personas.ts

@@ -0,0 +1,21 @@
+/**
+ * personas.ts
+ *
+ * Pre-defined collab identities used to seed `localStorage` before the page
+ * loads. The collab-editor frontend reads the key
+ * `collab-editor:fallback-user` on boot (see frontend/src/utils/user.ts) and
+ * uses it for the yjs awareness cursor name + color.
+ */
+export interface Persona {
+  id: string;
+  name: string;
+  color: string;
+}
+
+export const PERSONAS = {
+  alice: { id: "alice", name: "Alice Chen", color: "#958DF1" },
+  bob: { id: "bob", name: "Bob Martin", color: "#70CFF8" },
+  carol: { id: "carol", name: "Carol Reyes", color: "#F98181" },
+} as const satisfies Record<string, Persona>;
+
+export const FALLBACK_USER_KEY = "collab-editor:fallback-user";

backend/demo/solo.ts

@@ -0,0 +1,130 @@
+/**
+ * demo/solo.ts
+ *
+ * Single-persona demo: opens the collab-editor as "Alice", types the title
+ * and one paragraph with human-like rhythm. Use this to visually validate
+ * that the typing feels natural before scaling to multiple personas.
+ *
+ * Prereqs:
+ *   - Frontend dev server running on http://localhost:5678
+ *   - Backend dev server running on http://localhost:8080
+ *
+ * Run:
+ *   cd backend && npx tsx demo/solo.ts
+ *
+ * Tuning:
+ *   - Pass `--speed 1.5` to type faster, `--speed 0.7` to slow it down.
+ *   - Pass `--url http://localhost:5678` to override the target.
+ */
+import { chromium } from "playwright";
+import { humanType, humanTypeInto, pause } from "./human-typing.js";
+import { PERSONAS, FALLBACK_USER_KEY } from "./personas.js";
+
+interface CliArgs {
+  url: string;
+  speed: number;
+  headless: boolean;
+}
+
+function parseArgs(argv: string[]): CliArgs {
+  const args: CliArgs = {
+    url: "http://localhost:5678",
+    speed: 1,
+    headless: false,
+  };
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === "--url") args.url = argv[++i];
+    else if (arg === "--speed") args.speed = Number(argv[++i]);
+    else if (arg === "--headless") args.headless = true;
+  }
+  return args;
+}
+
+async function run() {
+  const args = parseArgs(process.argv.slice(2));
+  const persona = PERSONAS.alice;
+
+  console.log(`[demo/solo] launching as ${persona.name} (${persona.color})`);
+  console.log(`[demo/solo] target: ${args.url}  speed: ${args.speed}x`);
+
+  const browser = await chromium.launch({
+    headless: args.headless,
+    args: ["--window-size=1280,800"],
+  });
+
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 800 },
+    deviceScaleFactor: 2,
+  });
+
+  await context.addInitScript(
+    ({ key, value }) => {
+      try {
+        localStorage.setItem(key, value);
+      } catch {
+        /* ignore */
+      }
+    },
+    {
+      key: FALLBACK_USER_KEY,
+      value: JSON.stringify({ name: persona.name, color: persona.color }),
+    }
+  );
+
+  const page = await context.newPage();
+
+  console.log(`[demo/solo] goto ${args.url}`);
+  try {
+    await page.goto(args.url, { waitUntil: "domcontentloaded", timeout: 15_000 });
+  } catch (err) {
+    console.error(
+      `[demo/solo] cannot reach ${args.url}. Is the frontend dev server running?`
+    );
+    await browser.close();
+    process.exit(1);
+  }
+
+  await page.waitForSelector("[aria-label='Undo']", { timeout: 20_000 });
+  console.log(`[demo/solo] editor ready, starting scenario`);
+
+  await pause(1200, 2000);
+
+  const title = page.getByPlaceholder("Article title");
+  await humanTypeInto(page, title, "Climate signals in early 2026", {
+    speed: args.speed,
+    typoRate: 0.03,
+  });
+
+  await pause(900, 1600);
+
+  const body = page.locator(".ProseMirror").first();
+  await body.click();
+  await pause(600, 1200);
+
+  await humanType(
+    page,
+    "Over the last six months, a handful of monitoring stations picked up anomalies that deserve a closer look. ",
+    { speed: args.speed, typoRate: 0.035, thinkRate: 0.22 }
+  );
+
+  await pause(800, 1400);
+
+  await humanType(
+    page,
+    "We cross-checked three independent datasets before drawing any conclusions.",
+    { speed: args.speed, typoRate: 0.025 }
+  );
+
+  await pause(1500, 2500);
+
+  console.log(`[demo/solo] scenario complete. Leaving browser open for inspection.`);
+  console.log(`[demo/solo] press Ctrl+C to quit.`);
+
+  await new Promise(() => {});
+}
+
+run().catch((err) => {
+  console.error("[demo/solo] fatal:", err);
+  process.exit(1);
+});

backend/demo/trio.ts

@@ -0,0 +1,1054 @@
+/**
+ * demo/trio.ts
+ *
+ * Three-persona collaboration demo for recording a mini product video.
+ * Scenario: an empty article gets turned into a small research piece on
+ * the famous Quake III "fast inverse square root" trick, with headings,
+ * a paragraph, inline + block math, a syntax-highlighted C snippet,
+ * and one review comment from a teammate.
+ *
+ * By default:
+ *   - Alice is the "hero" window (visible). This is what you record.
+ *   - Bob and Carol run headless. Their yjs cursors, comments and edits
+ *     appear in Alice's window as if real teammates joined.
+ *
+ * With --all-visible, all three browsers launch visibly.
+ *
+ * Prereqs:
+ *   - Frontend dev server on http://localhost:5678
+ *   - Backend dev server on http://localhost:8080
+ */
+import { chromium, type Browser, type BrowserContext, type Page } from "playwright";
+import { execSync } from "node:child_process";
+import { humanType, humanTypeInto, pause } from "./human-typing.js";
+import { PERSONAS, FALLBACK_USER_KEY, type Persona } from "./personas.js";
+import { NEURAL_NETWORK_BANNER_HTML } from "./banners.js";
+
+/**
+ * Kill any Chromium instance left over from a previous Playwright run.
+ *
+ * We match on the ms-playwright install path so we only target the
+ * automation browser - the user's regular Chrome/Chromium is untouched.
+ * Non-fatal: if pkill finds nothing (exit 1) or isn't available, we
+ * just move on and let Playwright launch fresh browsers.
+ */
+function killLeftoverChromiums() {
+  // Match both the headful Chromium binary (Alice's window) and the
+  // headless-shell binary (Bob/Carol). The `ms-playwright` segment is
+  // unique to the Playwright install path so we never touch the user's
+  // real Chrome/Chromium.
+  const patterns = [
+    "ms-playwright/.*Chromium",
+    "ms-playwright/.*chrome-headless-shell",
+  ];
+  let killed = false;
+  for (const p of patterns) {
+    try {
+      execSync(`pkill -f '${p}'`, { stdio: "ignore" });
+      killed = true;
+    } catch {
+      // pkill exits 1 when no process matches - normal on a clean start.
+    }
+  }
+  if (killed) {
+    console.log("[trio] killed leftover Playwright Chromium instances");
+    // Give the OS a beat to reclaim ports / window handles before we
+    // spawn fresh browsers, otherwise launch can flake on macOS.
+    execSync("sleep 0.4");
+  }
+}
+
+interface CliArgs {
+  url: string;
+  speed: number;
+  allVisible: boolean;
+}
+
+function parseArgs(argv: string[]): CliArgs {
+  const args: CliArgs = {
+    url: "http://localhost:5678",
+    speed: 2,
+    allVisible: false,
+  };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--url") args.url = argv[++i];
+    else if (a === "--speed") args.speed = Number(argv[++i]);
+    else if (a === "--all-visible") args.allVisible = true;
+  }
+  return args;
+}
+
+interface LaunchOptions {
+  persona: Persona;
+  headless: boolean;
+  windowPosition?: { x: number; y: number };
+  /**
+   * If true, Chromium starts in OS fullscreen (no window chrome, no menu bar
+   * on macOS). Used for Alice (the recorded persona) so the screencast looks
+   * clean. Forces `viewport: null` so the page uses the real window size.
+   */
+  fullscreen?: boolean;
+}
+
+async function launchPersona(
+  url: string,
+  opts: LaunchOptions
+): Promise<{ browser: Browser; context: BrowserContext; page: Page }> {
+  const launchArgs: string[] = [];
+  if (opts.fullscreen) {
+    launchArgs.push("--start-fullscreen");
+  } else {
+    launchArgs.push("--window-size=1280,800");
+    if (opts.windowPosition) {
+      launchArgs.push(
+        `--window-position=${opts.windowPosition.x},${opts.windowPosition.y}`
+      );
+    }
+  }
+
+  const browser = await chromium.launch({
+    headless: opts.headless,
+    args: launchArgs,
+  });
+
+  // Playwright forbids `deviceScaleFactor` when `viewport` is null (real
+  // window size). For fullscreen we accept the OS-native DPR.
+  const context = await browser.newContext(
+    opts.fullscreen
+      ? { viewport: null }
+      : { viewport: { width: 1280, height: 800 }, deviceScaleFactor: 2 }
+  );
+
+  await context.addInitScript(
+    ({ key, value }) => {
+      try {
+        localStorage.setItem(key, value);
+      } catch {
+        /* ignore */
+      }
+    },
+    {
+      key: FALLBACK_USER_KEY,
+      value: JSON.stringify({ name: opts.persona.name, color: opts.persona.color }),
+    }
+  );
+
+  const page = await context.newPage();
+  await page.goto(url, { waitUntil: "domcontentloaded", timeout: 20_000 });
+  await page.waitForSelector("[aria-label='Undo']", { timeout: 25_000 });
+
+  return { browser, context, page };
+}
+
+// ----------------------------------------------------------------------------
+// Editor helpers
+// ----------------------------------------------------------------------------
+
+/**
+ * Move the caret to the very end of the ProseMirror editor, regardless of
+ * where it currently sits. More reliable than "body.click() + Ctrl+End":
+ *   - body.click() lands at the geometric center and may drop the caret
+ *     inside a heading, which then gets extended when typing.
+ *   - Ctrl+End is not a "go to end of document" shortcut on macOS.
+ * We use the DOM Range API on the first .ProseMirror element.
+ */
+async function focusEnd(page: Page) {
+  await page.evaluate(() => {
+    const root = document.querySelector(".ProseMirror") as HTMLElement | null;
+    if (!root) return;
+    root.focus();
+    const range = document.createRange();
+    range.selectNodeContents(root);
+    range.collapse(false);
+    const sel = window.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(range);
+  });
+}
+
+/**
+ * Wipe everything so each run starts from a pristine doc:
+ *  - body
+ *  - frontmatter (title, subtitle, authors, ...)
+ *  - banner (the previous run's neural network would otherwise persist)
+ *  - citations + settings + all embeds
+ *
+ * We dispatch the `reset-article` window event the Editor already exposes
+ * for the `/Reset article` slash command, then wait for the empty-banner
+ * placeholder (and so the "Create chart" button) to come back.
+ */
+async function resetDoc(page: Page) {
+  await page.evaluate(() => {
+    window.dispatchEvent(new CustomEvent("reset-article"));
+  });
+  // Give Yjs / React a beat to flush the wipe to the DOM.
+  await pause(500, 800);
+
+  // The empty-state placeholder reappears once banner === "". Wait for it
+  // explicitly so the next step (createNeuralNetworkBanner) is reliable.
+  try {
+    await page
+      .locator(".hero-banner--empty")
+      .first()
+      .waitFor({ state: "visible", timeout: 5_000 });
+  } catch {
+    // Non-fatal: createNeuralNetworkBanner has its own warning path.
+  }
+}
+
+/**
+ * Insert a Heading 2 via the markdown shortcut "## ". This triggers the
+ * StarterKit input rule and the "##" tokens are transformed live into a
+ * styled heading - visually snappier than popping the slash menu.
+ */
+async function insertHeading2(page: Page, text: string, speed: number) {
+  await page.keyboard.type("## ", { delay: 45 });
+  await pause(80, 160);
+  await humanType(page, text, { speed, typoRate: 0.015, thinkRate: 0.08 });
+  await page.keyboard.press("Enter");
+  await pause(150, 280);
+}
+
+/**
+ * Enter a code block via the markdown shortcut "```<lang> " then type the
+ * body. The regex in @tiptap/extension-code-block expects
+ *   /^```([a-z]+)?[\s\n]$/
+ * so we close the fence with a trailing space, which triggers the rule.
+ */
+async function insertCodeBlock(
+  page: Page,
+  language: string,
+  code: string,
+  speed: number
+) {
+  await page.keyboard.type("```" + language + " ", { delay: 30 });
+  await pause(80, 140);
+  await humanType(page, code, {
+    speed: speed * 2,
+    typoRate: 0,
+    thinkRate: 0.02,
+  });
+  await pause(180, 320);
+  await page.keyboard.press("ArrowDown");
+  await pause(80, 160);
+}
+
+/**
+ * Click "Create chart" in the empty banner placeholder, type a short prompt
+ * in the Embed Studio (purely visual - we don't wait for the real agent),
+ * then inject a pre-built neural network banner via the dev-only
+ * `__demo-set-banner` window event the Editor exposes for this script.
+ *
+ * Finally close the Embed Studio with "Save & Close" so Alice's editor
+ * area is fully visible again for the rest of the recording.
+ */
+async function createNeuralNetworkBanner(page: Page, speed: number) {
+  const createBtn = page.getByRole("button", { name: /Create chart/i }).first();
+  try {
+    await createBtn.waitFor({ state: "visible", timeout: 5_000 });
+  } catch {
+    console.warn('[alice] "Create chart" button not found, skipping banner');
+    return;
+  }
+  await createBtn.scrollIntoViewIfNeeded();
+  await pause(120, 220);
+  await createBtn.click();
+
+  // Type the prompt for real so the viewer sees the user instruction
+  // forming in the chat textarea, then clear it (mimics submit reset).
+  const promptArea = page.getByPlaceholder("Describe your chart...");
+  const promptText = "A neural network illustration";
+  try {
+    await promptArea.waitFor({ state: "visible", timeout: 4_000 });
+    await promptArea.click();
+    await pause(120, 220);
+    await humanType(page, promptText, {
+      speed: speed * 1.5,
+      typoRate: 0,
+      thinkRate: 0.02,
+    });
+    await pause(150, 280);
+    await promptArea.fill("");
+  } catch {
+    console.warn("[alice] embed studio textarea not found, faking anyway");
+  }
+
+  // Stream a fake assistant reply so the recording shows tokens
+  // appearing one by one (real LLM feel), then drop the banner once
+  // the reply is fully visible.
+  await streamFakeExchange(page, {
+    eventName: "__demo-embed-chat",
+    prompt: promptText,
+    reply:
+      "Done - a layered network with subtle pulses along the synapses, themed with the article's primary color.",
+  });
+  await page.evaluate(
+    (html) => {
+      window.dispatchEvent(
+        new CustomEvent("__demo-set-banner", { detail: { html } }),
+      );
+    },
+    NEURAL_NETWORK_BANNER_HTML,
+  );
+  await pause(500, 800);
+
+  const closeBtn = page.getByRole("button", { name: /^Save & Close$/i }).first();
+  if (await closeBtn.isVisible().catch(() => false)) {
+    await closeBtn.click();
+  } else {
+    const xBtn = page.getByRole("button", { name: /Close Embed Studio/i }).first();
+    if (await xBtn.isVisible().catch(() => false)) {
+      await xBtn.click();
+    } else {
+      await page.keyboard.press("Escape");
+    }
+  }
+  await pause(150, 280);
+}
+
+/**
+ * Double-click a word, open the comment dialog from the bubble toolbar,
+ * type the comment and submit. Scoped to the currently-open dialog so we
+ * don't collide with the Publish dialog.
+ */
+async function leaveCommentOn(
+  page: Page,
+  word: string,
+  commentText: string,
+  speed: number
+): Promise<boolean> {
+  const target = page
+    .locator(".ProseMirror p")
+    .getByText(word, { exact: false })
+    .first();
+  try {
+    await target.waitFor({ state: "visible", timeout: 45_000 });
+  } catch {
+    console.warn(`[comment] word "${word}" not found in paragraphs`);
+    return false;
+  }
+
+  await target.scrollIntoViewIfNeeded();
+  await target.hover();
+  await pause(400, 800);
+  await target.dblclick();
+  await pause(400, 700);
+
+  const commentBtn = page.locator('.bubble-toolbar button[aria-label="Comment"]');
+  try {
+    await commentBtn.waitFor({ state: "visible", timeout: 5_000 });
+  } catch {
+    console.warn(`[comment] bubble toolbar did not show for "${word}"`);
+    return false;
+  }
+  await commentBtn.click();
+
+  const dialog = page
+    .locator('dialog[open]')
+    .filter({ has: page.locator("textarea") })
+    .first();
+  const textarea = dialog.locator("textarea");
+  await textarea.waitFor({ state: "visible", timeout: 5_000 });
+  await textarea.click();
+  await pause(250, 500);
+
+  await humanType(page, commentText, { speed, typoRate: 0.015 });
+  await pause(500, 900);
+
+  await dialog.locator("button.btn--primary").click();
+  return true;
+}
+
+// ----------------------------------------------------------------------------
+// Persona scripts
+// ----------------------------------------------------------------------------
+
+/**
+ * Open the "Add author" modal, fill it in, and submit.
+ *
+ * - Looks for the placeholder button first (no authors yet), falls back to
+ *   the small "+" icon button next to the existing authors list.
+ * - Optionally creates a new affiliation OR selects an existing chip by its
+ *   1-based index (matches the ordered list shown in the form).
+ * - Submits via the primary button. Waits for the dialog to close before
+ *   returning so the next call can find the trigger again.
+ */
+interface AddAuthorOpts {
+  url?: string;
+  newAffiliation?: string;
+  selectAffiliations?: number[]; // 1-based indices
+}
+
+async function addAuthor(
+  page: Page,
+  name: string,
+  speed: number,
+  opts: AddAuthorOpts = {}
+): Promise<boolean> {
+  const placeholderTrigger = page.locator(".meta-placeholder-btn", {
+    hasText: /Add author/i,
+  });
+  const iconTrigger = page.locator('button.icon-btn[aria-label="Add author"]');
+
+  let opened = false;
+  if (await placeholderTrigger.first().isVisible().catch(() => false)) {
+    await placeholderTrigger.first().scrollIntoViewIfNeeded();
+    await pause(80, 160);
+    await placeholderTrigger.first().click();
+    opened = true;
+  } else if (await iconTrigger.first().isVisible().catch(() => false)) {
+    await iconTrigger.first().scrollIntoViewIfNeeded();
+    await pause(80, 160);
+    await iconTrigger.first().click();
+    opened = true;
+  }
+  if (!opened) {
+    console.warn("[author] no Add-author trigger visible");
+    return false;
+  }
+
+  const dialog = page.locator("dialog.ed-dialog--author");
+  try {
+    await dialog.waitFor({ state: "visible", timeout: 5_000 });
+  } catch {
+    console.warn("[author] modal did not open");
+    return false;
+  }
+  await pause(120, 220);
+
+  const fastSpeed = speed * 1.4;
+
+  const nameInput = dialog.getByPlaceholder("Name");
+  await nameInput.click();
+  await humanType(page, name, { speed: fastSpeed, typoRate: 0, thinkRate: 0.02 });
+  await pause(80, 160);
+
+  if (opts.url) {
+    const urlInput = dialog.getByPlaceholder("URL (optional)");
+    await urlInput.click();
+    await humanType(page, opts.url, { speed: fastSpeed, typoRate: 0, thinkRate: 0.02 });
+    await pause(80, 160);
+  }
+
+  if (opts.selectAffiliations && opts.selectAffiliations.length > 0) {
+    for (const idx of opts.selectAffiliations) {
+      const chip = dialog
+        .locator(".chip")
+        .filter({ hasText: new RegExp(`^${idx}\\.`) })
+        .first();
+      if (await chip.isVisible().catch(() => false)) {
+        await chip.click();
+        await pause(60, 140);
+      }
+    }
+  }
+
+  if (opts.newAffiliation) {
+    const newAffInput = dialog.getByPlaceholder(/New affiliation/i);
+    await newAffInput.click();
+    await humanType(page, opts.newAffiliation, {
+      speed: fastSpeed,
+      typoRate: 0,
+      thinkRate: 0.02,
+    });
+    await pause(80, 160);
+  }
+
+  const submit = dialog.locator("button.btn--primary");
+  await submit.click();
+
+  // Dialog unmounts on submit; wait for it to disappear so the next iteration
+  // can locate the trigger again.
+  try {
+    await dialog.waitFor({ state: "hidden", timeout: 3_000 });
+  } catch {
+    /* non-fatal */
+  }
+  await pause(100, 200);
+  return true;
+}
+
+/**
+ * Wait until a Heading 2 with the given text is rendered in the document.
+ * Used to coordinate handoffs between personas without hard-coded sleeps.
+ */
+async function waitForHeading2(page: Page, text: string, timeout = 60_000) {
+  await page
+    .locator(".ProseMirror h2")
+    .filter({ hasText: text })
+    .first()
+    .waitFor({ state: "visible", timeout });
+}
+
+/**
+ * Place this browser's caret at the END of the first <p> directly after
+ * the heading whose text matches `headingText`. Used so each persona can
+ * type into its OWN section concurrently without stepping on the others.
+ *
+ * Returns false if the heading or following paragraph cannot be found.
+ */
+async function focusParagraphAfterHeading(page: Page, headingText: string) {
+  return await page.evaluate((text) => {
+    const root = document.querySelector(".ProseMirror") as HTMLElement | null;
+    if (!root) return false;
+    const headings = Array.from(root.querySelectorAll("h2"));
+    const wanted = text.toLowerCase();
+    const heading = headings.find(
+      (h) => (h.textContent || "").trim().toLowerCase().includes(wanted),
+    );
+    if (!heading) return false;
+    let para: Element | null = heading.nextElementSibling;
+    while (para && para.tagName !== "P") para = para.nextElementSibling;
+    if (!para) return false;
+    (para as HTMLElement).focus();
+    const range = document.createRange();
+    range.selectNodeContents(para);
+    range.collapse(false);
+    const sel = window.getSelection();
+    if (!sel) return false;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    return true;
+  }, headingText);
+}
+
+/**
+ * Visibly select an entire paragraph containing the given text snippet.
+ * Used to stage an AI rewrite: the viewer sees Alice highlight Bob's
+ * paragraph before she opens the chat and asks for a reformulation.
+ *
+ * We do the selection via the DOM Selection API (rather than
+ * `locator.click({ clickCount: 3 })`) because Tiptap/ProseMirror can
+ * swallow synthetic triple-clicks. Selecting the full <p> contents
+ * yields the same visual result (blue highlight over the paragraph)
+ * and survives losing focus to the chat panel.
+ */
+async function selectParagraphByText(
+  page: Page,
+  snippet: string,
+): Promise<boolean> {
+  return await page.evaluate((text) => {
+    const root = document.querySelector(".ProseMirror") as HTMLElement | null;
+    if (!root) return false;
+    const paragraphs = Array.from(root.querySelectorAll("p"));
+    const para = paragraphs.find((p) =>
+      (p.textContent || "").includes(text),
+    );
+    if (!para) return false;
+    para.scrollIntoView({ behavior: "smooth", block: "center" });
+    (para as HTMLElement).focus();
+    const range = document.createRange();
+    range.selectNodeContents(para);
+    const sel = window.getSelection();
+    if (!sel) return false;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    // Stamp the paragraph as "claimed by the agent" so the viewer sees
+    // a persistent "Agent is working" badge through the chat prompt and
+    // the streaming reply. The App.tsx replace handler will swap this
+    // for `.demo-agent-rewriting` when the retype actually starts.
+    para.classList.add("demo-agent-pending");
+    return true;
+  }, snippet);
+}
+
+/**
+ * Stream a fake LLM exchange (user prompt + assistant reply) into a chat
+ * panel via the given dev-only window event name. The assistant text is
+ * appended chunk by chunk so the recording shows tokens streaming in,
+ * the way a real model would render.
+ *
+ * Optional `replace` triggers a find-and-replace on the editor body
+ * AFTER the assistant message is fully streamed - that way the viewer
+ * reads the suggestion before seeing the paragraph swap.
+ */
+async function streamFakeExchange(
+  page: Page,
+  args: {
+    eventName: "__demo-chat" | "__demo-embed-chat";
+    prompt: string;
+    reply: string;
+    open?: boolean;
+    replace?: { from: string; to: string };
+    chunkMs?: [number, number];
+    chunkSize?: [number, number];
+  },
+) {
+  const userMessage = {
+    id: `demo-u-${Date.now()}`,
+    role: "user",
+    parts: [{ type: "text", text: args.prompt }],
+  };
+  const assistantId = `demo-a-${Date.now() + 1}`;
+
+  // Step 1: post the user message and (optionally) open the panel.
+  await page.evaluate(
+    ({ name, msgs, open }) => {
+      window.dispatchEvent(
+        new CustomEvent(name, { detail: { messages: msgs, open } }),
+      );
+    },
+    {
+      name: args.eventName,
+      msgs: [userMessage],
+      open: args.open,
+    },
+  );
+
+  // Brief "thinking" beat before the first token streams in.
+  await pause(280, 480);
+
+  // Step 2: stream the assistant text in small chunks.
+  const tokens = args.reply.split(/(\s+)/).filter((t) => t.length > 0);
+  const [chunkMin, chunkMax] = args.chunkSize ?? [1, 2];
+  const [delayMin, delayMax] = args.chunkMs ?? [22, 55];
+  let acc = "";
+  let i = 0;
+  while (i < tokens.length) {
+    const take =
+      chunkMin +
+      Math.floor(Math.random() * Math.max(1, chunkMax - chunkMin + 1));
+    const chunk = tokens.slice(i, i + take).join("");
+    acc += chunk;
+    i += take;
+    await page.evaluate(
+      ({ name, msgs }) => {
+        window.dispatchEvent(
+          new CustomEvent(name, { detail: { messages: msgs } }),
+        );
+      },
+      {
+        name: args.eventName,
+        msgs: [
+          userMessage,
+          {
+            id: assistantId,
+            role: "assistant",
+            parts: [{ type: "text", text: acc }],
+          },
+        ],
+      },
+    );
+    await pause(delayMin, delayMax);
+  }
+
+  // Step 3: optional editor body rewrite, AFTER the reply is fully
+  // visible so the viewer reads the suggestion first.
+  if (args.replace && args.eventName === "__demo-chat") {
+    await pause(280, 450);
+    await page.evaluate(
+      ({ replace }) => {
+        window.dispatchEvent(
+          new CustomEvent("__demo-chat", { detail: { replace } }),
+        );
+      },
+      { replace: args.replace },
+    );
+  }
+}
+
+/**
+ * Open the floating chat panel, type the prompt for real (so the user
+ * sees the textarea filling) then stream a fake assistant reply and
+ * apply a paragraph rewrite on the editor body.
+ */
+async function requestRephrase(
+  page: Page,
+  args: {
+    prompt: string;
+    reply: string;
+    fromText: string;
+    toText: string;
+    speed: number;
+  },
+) {
+  // 1) Open the panel via the floating FAB and let it animate in.
+  const fab = page.getByRole("button", { name: /AI Assistant/i }).first();
+  if (await fab.isVisible().catch(() => false)) {
+    await fab.click();
+    await pause(220, 380);
+  }
+
+  // 2) Type the user prompt into the chat textarea (real typing for the
+  //    visible "user side" of the exchange).
+  const textarea = page
+    .locator(".chat-floating textarea, .chat-panel textarea")
+    .first();
+  try {
+    await textarea.waitFor({ state: "visible", timeout: 3_000 });
+    await textarea.click();
+    await humanType(page, args.prompt, {
+      speed: args.speed * 2.2,
+      typoRate: 0,
+      thinkRate: 0.01,
+    });
+    await pause(100, 180);
+  } catch {
+    console.warn("[chat] textarea not found, will inject anyway");
+  }
+
+  // 3) Clear the textarea (mimics the post-submit reset) and stream the
+  //    fake exchange + paragraph rewrite.
+  try {
+    await textarea.fill("");
+  } catch {
+    /* non-fatal */
+  }
+  await streamFakeExchange(page, {
+    eventName: "__demo-chat",
+    prompt: args.prompt,
+    reply: args.reply,
+    open: true,
+    replace: { from: args.fromText, to: args.toText },
+  });
+  // The editor-side rewrite animates async (highlight ~520ms + chunked
+  // retype ~24ms per 1-2 chars). Wait long enough to cover the big
+  // reveal without padding the end of the recording too much.
+  const animBudgetMs = 500 + args.toText.length * 18;
+  await pause(animBudgetMs, animBudgetMs + 200);
+}
+
+/**
+ * Build the article scaffold in one persona pass: three Heading 2 nodes
+ * each followed by an empty paragraph the assigned persona can later fill.
+ *
+ * Layout produced:
+ *   <h2>The recipe</h2>
+ *   <p></p>           <- Alice fills this
+ *   <h2>Intuition</h2>
+ *   <p></p>           <- Bob fills this
+ *   <h2>In Python</h2>
+ *   <p></p>           <- Carol fills this
+ */
+async function writeScaffold(page: Page, headings: string[], speed: number) {
+  for (const h of headings) {
+    await page.keyboard.type("## ", { delay: 22 });
+    await pause(40, 80);
+    await humanType(page, h, {
+      speed: speed * 2.2,
+      typoRate: 0,
+      thinkRate: 0.01,
+    });
+    await page.keyboard.press("Enter");
+    await pause(40, 80);
+    // Extra Enter to leave a dedicated empty paragraph below the heading.
+    await page.keyboard.press("Enter");
+    await pause(50, 100);
+  }
+}
+
+async function runAlice(page: Page, speed: number) {
+  console.log("[alice] ready");
+  await pause(150, 250);
+
+  // --- Title + subtitle (fast, no typos) -------------------------------
+  // Speed-tuned for the 30s budget: humans type fast enough that the
+  // viewer reads the title forming, but we skip typo backspaces here.
+  const fast = speed * 2;
+  const title = page.getByPlaceholder("Article title");
+  await humanTypeInto(page, title, "Attention, by hand", {
+    speed: fast,
+    typoRate: 0,
+    thinkRate: 0.01,
+  });
+
+  await pause(80, 140);
+
+  const subtitle = page.getByPlaceholder("Subtitle (optional)");
+  await humanTypeInto(
+    page,
+    subtitle,
+    "The one formula behind every LLM",
+    { speed: fast, typoRate: 0, thinkRate: 0.01 },
+  );
+
+  await pause(120, 220);
+
+  // --- Banner: neural network illustration ------------------------------
+  await createNeuralNetworkBanner(page, speed);
+
+  // --- Article scaffold (3 sections, each with an empty paragraph) ------
+  // Alice writes the skeleton so Bob and Carol have stable heading anchors
+  // to claim their own paragraphs.
+  await focusEnd(page);
+  await pause(80, 160);
+  await writeScaffold(page, ["The recipe", "Intuition", "In Python"], speed);
+  console.log("[alice] scaffold ready, opening parallel phase");
+
+  // --- Section 1: The recipe (Alice's section, parallel with Bob/Carol) -
+  await focusParagraphAfterHeading(page, "The recipe");
+  await pause(80, 160);
+
+  // Inline math uses $$...$$ (see @tiptap/extension-mathematics).
+  const bodySpeed = speed * 1.8;
+  await humanType(
+    page,
+    "At the heart of a Transformer, attention mixes queries ",
+    { speed: bodySpeed, typoRate: 0, thinkRate: 0.02 },
+  );
+  await humanType(page, "$$Q$$", { speed: bodySpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, ", keys ", { speed: bodySpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, "$$K$$", { speed: bodySpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, " and values ", { speed: bodySpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, "$$V$$", { speed: bodySpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, ".", { speed: bodySpeed, typoRate: 0, thinkRate: 0 });
+
+  await pause(160, 280);
+
+  // Block math line uses $$$...$$$
+  await page.keyboard.press("Enter");
+  await pause(60, 120);
+  await humanType(
+    page,
+    "$$$\\text{Attention}(Q, K, V) = \\text{softmax}\\left(\\frac{QK^\\top}{\\sqrt{d_k}}\\right)V$$$",
+    { speed: bodySpeed, typoRate: 0, thinkRate: 0 },
+  );
+  await page.keyboard.press("Enter");
+  await pause(80, 160);
+
+  // Follow-up paragraph wrapping up the recipe. Adds substance so the
+  // final article reads like more than a bullet list of components.
+  // Typed fast (2.5x base) to stay inside the video budget.
+  await humanType(
+    page,
+    "Softmax turns the scores into weights, and the weighted sum over V gives a contextual vector per token.",
+    { speed: speed * 2.5, typoRate: 0, thinkRate: 0.01 },
+  );
+
+  await pause(180, 320);
+
+  // --- Rephrase flow: Alice selects Bob's "Intuition" paragraph, opens
+  //     the main chat and asks to reformulate. The selection is made
+  //     visible BEFORE the chat opens so the viewer understands what
+  //     will be rewritten. The exchange is faked via `__demo-chat`.
+  try {
+    await page
+      .locator(".ProseMirror p")
+      .filter({ hasText: "Each token asks" })
+      .first()
+      .waitFor({ state: "visible", timeout: 15_000 });
+    await pause(220, 380);
+
+    const selected = await selectParagraphByText(page, "Each token asks");
+    if (!selected) {
+      console.warn("[alice] could not select Bob's paragraph");
+    } else {
+      // Give the viewer a short beat to notice the highlighted paragraph
+      // before Alice moves to the chat panel.
+      await pause(380, 540);
+      await requestRephrase(page, {
+        prompt: "Rephrase this paragraph more concisely.",
+        reply:
+          "Sure - tightened to a three-beat rhythm that matches the headings:",
+        fromText:
+          "Each token asks: which other tokens should I look at? Q is the question, K is the address, V is the answer.",
+        toText:
+          "Q asks the question. K shows the address. V delivers the answer.",
+        speed,
+      });
+    }
+  } catch {
+    console.warn("[alice] Bob's paragraph not detected, skipping rephrase");
+  }
+
+  console.log("[alice] scenario complete");
+}
+
+async function runBob(page: Page, speed: number) {
+  console.log("[bob] joined, opening author modal early");
+  await pause(800, 1_200);
+
+  // 1) Author modal happens FIRST, in parallel with Alice typing the title
+  //    and creating the banner. The modal sits above the editor so it
+  //    doesn't disturb Alice's body work, and it's the fastest way to
+  //    show "Bob is contributing too" while Alice is still solo on screen.
+  await addAuthor(page, "Alice Renoir", speed, {
+    newAffiliation: "Hugging Face",
+  });
+  await pause(120, 240);
+  await addAuthor(page, "Bob Mercier", speed, {
+    selectAffiliations: [1],
+  });
+  await pause(120, 240);
+  await addAuthor(page, "Carol Dubois", speed, {
+    selectAffiliations: [1],
+  });
+  console.log("[bob] authors added");
+
+  // 2) Wait for the "Intuition" heading from Alice's scaffold, then claim
+  //    the paragraph after it. This is when the parallel typing window
+  //    really kicks in: Alice writing "The recipe", Carol writing
+  //    "In Python", Bob writing here, all at the same time.
+  try {
+    await waitForHeading2(page, "Intuition", 60_000);
+  } catch {
+    console.warn("[bob] 'Intuition' heading not found, skipping body");
+    return;
+  }
+  await pause(150, 280);
+
+  const focused = await focusParagraphAfterHeading(page, "Intuition");
+  if (!focused) {
+    console.warn("[bob] could not focus paragraph after 'Intuition'");
+    return;
+  }
+  await pause(60, 120);
+  const bobSpeed = speed * 1.8;
+  await humanType(
+    page,
+    "Each token asks: which other tokens should I look at? ",
+    { speed: bobSpeed, typoRate: 0, thinkRate: 0.02 },
+  );
+  await humanType(page, "$$Q$$", { speed: bobSpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, " is the question, ", { speed: bobSpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, "$$K$$", { speed: bobSpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, " is the address, ", { speed: bobSpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, "$$V$$", { speed: bobSpeed, typoRate: 0, thinkRate: 0 });
+  await humanType(page, " is the answer.", { speed: bobSpeed, typoRate: 0, thinkRate: 0 });
+
+  await pause(120, 220);
+
+  // Follow-up paragraph expanding the mental model. Bob doesn't touch
+  // the first paragraph again: Alice will target it for the rephrase.
+  await page.keyboard.press("Enter");
+  await pause(60, 120);
+  await humanType(
+    page,
+    "Multiply, normalize with softmax, and each token becomes a weighted blend of its neighbours.",
+    { speed: speed * 2.5, typoRate: 0, thinkRate: 0.01 },
+  );
+
+  console.log("[bob] scenario complete");
+}
+
+async function runCarol(page: Page, speed: number) {
+  console.log("[carol] joined, will write the code section");
+  await pause(1_200, 1_800);
+
+  // Wait for Alice's scaffold to ship the "In Python" heading, then claim
+  // the paragraph below it and type the code block immediately. Carol
+  // types in parallel with Alice's section and Bob's section.
+  try {
+    await waitForHeading2(page, "In Python", 60_000);
+  } catch {
+    console.warn("[carol] 'In Python' heading not found, skipping section");
+    return;
+  }
+  await pause(150, 300);
+
+  const focused = await focusParagraphAfterHeading(page, "In Python");
+  if (!focused) {
+    console.warn("[carol] could not focus paragraph after 'In Python'");
+    return;
+  }
+  await pause(80, 160);
+
+  // Preamble line before the code block so the section reads as a
+  // narrated snippet rather than an isolated chunk of Python.
+  await humanType(
+    page,
+    "The whole recipe fits in eight lines of PyTorch:",
+    { speed: speed * 2.5, typoRate: 0, thinkRate: 0.01 },
+  );
+  await page.keyboard.press("Enter");
+  await pause(80, 160);
+
+  const code =
+    "import torch\n" +
+    "import torch.nn.functional as F\n" +
+    "\n" +
+    "def attention(Q, K, V):\n" +
+    "    d_k = K.size(-1)\n" +
+    "    scores = Q @ K.transpose(-2, -1) / d_k ** 0.5\n" +
+    "    weights = F.softmax(scores, dim=-1)\n" +
+    "    return weights @ V";
+  await insertCodeBlock(page, "python", code, speed);
+
+  // Closing reference (lands right after the code block).
+  await humanType(
+    page,
+    "Introduced by Vaswani et al. (2017), this single block of math powers every modern LLM.",
+    { speed: speed * 2.5, typoRate: 0, thinkRate: 0.01 },
+  );
+
+  console.log("[carol] scenario complete");
+}
+
+// ----------------------------------------------------------------------------
+// Main
+// ----------------------------------------------------------------------------
+
+async function run() {
+  const args = parseArgs(process.argv.slice(2));
+  console.log(
+    `[trio] target=${args.url} speed=${args.speed}x allVisible=${args.allVisible}`
+  );
+
+  // Nuke any orphaned Chromium left over from a previous run (e.g. demo
+  // killed with Ctrl+C before it could close its browsers). Without this
+  // we get stale Yjs connections / extra windows cluttering the screen.
+  killLeftoverChromiums();
+
+  const alicePos = args.allVisible ? { x: 0, y: 0 } : undefined;
+  const bobPos = args.allVisible ? { x: 1300, y: 0 } : undefined;
+  const carolPos = args.allVisible ? { x: 650, y: 830 } : undefined;
+
+  const alice = await launchPersona(args.url, {
+    persona: PERSONAS.alice,
+    headless: false,
+    windowPosition: alicePos,
+    fullscreen: !args.allVisible,
+  });
+  console.log("[trio] alice up");
+
+  // Wipe the shared Yjs doc once on Alice's session BEFORE Bob/Carol join,
+  // so they connect to a clean slate (no leftover banner / body / title
+  // from a previous demo run). Idempotent: a no-op on a fresh server.
+  console.log("[trio] resetting shared document");
+  await resetDoc(alice.page);
+
+  const bob = await launchPersona(args.url, {
+    persona: PERSONAS.bob,
+    headless: !args.allVisible,
+    windowPosition: bobPos,
+  });
+  console.log("[trio] bob up");
+
+  const carol = await launchPersona(args.url, {
+    persona: PERSONAS.carol,
+    headless: !args.allVisible,
+    windowPosition: carolPos,
+  });
+  console.log("[trio] carol up");
+
+  // T0 marks the start of the actual demo content (after the browsers
+  // and Yjs reset). Useful to measure the perceived "video length"
+  // independently of Playwright cold-start time.
+  const T0 = Date.now();
+  const stamp = (tag: string) =>
+    console.log(`[trio] +${((Date.now() - T0) / 1000).toFixed(2)}s ${tag}`);
+  stamp("demo phase start");
+
+  await Promise.all([
+    runAlice(alice.page, args.speed)
+      .then(() => stamp("alice done"))
+      .catch((err) => console.error("[alice] error:", err)),
+    runBob(bob.page, args.speed)
+      .then(() => stamp("bob done"))
+      .catch((err) => console.error("[bob] error:", err)),
+    runCarol(carol.page, args.speed)
+      .then(() => stamp("carol done"))
+      .catch((err) => console.error("[carol] error:", err)),
+  ]);
+  stamp("all personas finished");
+
+  console.log("[trio] all personas finished. Browsers stay open. Ctrl+C to quit.");
+  await new Promise(() => {});
+}
+
+run().catch((err) => {
+  console.error("[trio] fatal:", err);
+  process.exit(1);
+});

frontend/src/editor/load-demo.ts

@@ -0,0 +1,39 @@
+import type { Editor } from "@tiptap/core";
+import type * as Y from "yjs";
+import type { FrontmatterStore } from "./frontmatter/frontmatter-store";
+import type { EmbedStore } from "./embeds/embed-store";
+import { seedFrontmatter } from "./frontmatter/seed-frontmatter";
+import { DEFAULT_CONTENT, SEED_CITATIONS } from "./default-content";
+import {
+  SEED_BANNER_HTML,
+  SEED_SCALING_CHART_HTML,
+  SEED_MEMORY_BAR_HTML,
+  SEED_CONFUSION_MATRIX_HTML,
+} from "./seed-embeds";
+
+/**
+ * Replace the current document with the demo content.
+ * Called explicitly by the user via /demo slash command or a UI button.
+ */
+export function loadDemoContent(
+  editor: Editor,
+  frontmatterStore: FrontmatterStore,
+  citationsMap: Y.Map<any>,
+  settingsMap: Y.Map<any>,
+  embedStore?: EmbedStore | null,
+) {
+  editor.commands.setContent(DEFAULT_CONTENT);
+  seedFrontmatter(frontmatterStore, true);
+
+  for (const [key, entry] of Object.entries(SEED_CITATIONS)) {
+    citationsMap.set(key, entry);
+  }
+  settingsMap.set("citationStyle", "apa");
+
+  if (embedStore) {
+    embedStore.set("banner.html", SEED_BANNER_HTML);
+    embedStore.set("d3-scaling-chart.html", SEED_SCALING_CHART_HTML);
+    embedStore.set("d3-memory-bar.html", SEED_MEMORY_BAR_HTML);
+    embedStore.set("d3-confusion-matrix.html", SEED_CONFUSION_MATRIX_HTML);
+  }
+}

frontend/src/editor/seed-embed-confusion-matrix.ts

@@ -0,0 +1,181 @@
+/**
+ * Side-by-side confusion matrices: baseline vs improved.
+ * Adapted from research-article-template/app/src/content/embeds/d3-confusion-matrix.html
+ * Self-contained with inline data.
+ */
+export const SEED_CONFUSION_MATRIX_HTML = `<div class="d3-confusion-matrix"></div>
+<style>
+  .d3-confusion-matrix { position: relative; }
+  .d3-confusion-matrix .panels { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 4px; }
+  .d3-confusion-matrix .panel { flex: 1 1 320px; min-width: 280px; }
+  .d3-confusion-matrix .panel__title { color: var(--text-color); font-size: 12px; line-height: 1.35; margin: 0 0 6px 0; font-weight: 600; }
+  .d3-confusion-matrix .axis-label { fill: var(--text-color); font-size: 11px; font-weight: 700; }
+  .d3-confusion-matrix .cell-text { fill: var(--muted-color); font-size: 11px; pointer-events: none; }
+  .d3-confusion-matrix .chart-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-confusion-matrix'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-confusion-matrix')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip'); let tipInner;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        Object.assign(tip.style, { position: 'absolute', top: '0px', left: '0px', transform: 'translate(-9999px, -9999px)', pointerEvents: 'none', padding: '8px 10px', borderRadius: '8px', fontSize: '12px', lineHeight: '1.35', border: '1px solid var(--border-color)', background: 'var(--surface-bg)', color: 'var(--text-color)', boxShadow: '0 4px 24px rgba(0,0,0,.18)', opacity: '0', transition: 'opacity .12s ease' });
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign = 'left'; tip.appendChild(tipInner); container.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      const panels = document.createElement('div'); panels.className = 'panels';
+      const panelA = document.createElement('div'); panelA.className = 'panel';
+      const titleA = document.createElement('div'); titleA.className = 'panel__title'; titleA.textContent = 'Baseline (row-normalized %)';
+      panelA.appendChild(titleA);
+      const mountA = document.createElement('div'); panelA.appendChild(mountA);
+      const panelB = document.createElement('div'); panelB.className = 'panel';
+      const titleB = document.createElement('div'); titleB.className = 'panel__title'; titleB.textContent = 'Delta (Improved - Baseline, pp)';
+      panelB.appendChild(titleB);
+      const mountB = document.createElement('div'); panelB.appendChild(mountB);
+      panels.appendChild(panelA); panels.appendChild(panelB);
+      container.appendChild(panels);
+
+      const cardA = document.createElement('div'); cardA.className = 'chart-card'; mountA.appendChild(cardA);
+      const svgA = d3.select(cardA).append('svg').attr('width', '100%').style('display', 'block');
+      const gRootA = svgA.append('g'); const gCellsA = gRootA.append('g'); const gAxesA = gRootA.append('g');
+      const cardB = document.createElement('div'); cardB.className = 'chart-card'; mountB.appendChild(cardB);
+      const svgB = d3.select(cardB).append('svg').attr('width', '100%').style('display', 'block');
+      const gRootB = svgB.append('g'); const gCellsB = gRootB.append('g'); const gAxesB = gRootB.append('g');
+
+      const classes = ['0','1','2','3','4','5','6','7','8','9'];
+      const matrixA = [[90,2,1,0,0,0,1,0,5,1],[3,85,5,1,0,1,2,1,1,1],[1,6,70,10,4,4,1,1,1,2],[0,1,8,65,10,10,2,1,1,2],[0,0,2,6,83,3,1,1,3,1],[0,1,2,12,4,70,5,2,2,2],[1,2,1,0,1,2,88,1,3,1],[0,1,1,1,1,1,2,90,1,2],[6,2,2,4,6,3,3,2,70,2],[1,1,1,1,2,1,1,2,1,89]];
+      const matrixB = [[94,1,0,0,0,0,1,0,3,1],[2,90,3,1,0,0,1,1,1,1],[1,4,78,7,3,3,1,1,1,1],[0,1,5,74,7,8,1,1,1,2],[0,0,1,4,88,2,1,1,2,1],[0,1,1,9,3,78,3,1,2,2],[1,1,1,0,1,1,91,1,2,1],[0,1,1,1,1,1,1,92,1,1],[4,1,1,3,4,2,2,2,79,2],[1,1,1,1,2,1,1,1,1,90]];
+
+      const getSequentialColors = (count) => {
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') { return window.ColorPalettes.getColors('sequential', count); } } catch (_) {}
+        const arr = []; for (let i = 0; i < count; i++) arr.push('var(--primary-color)'); return arr;
+      };
+      const palette = getSequentialColors(13);
+      const getDivergingColors = (count) => {
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') { return window.ColorPalettes.getColors('diverging', count); } } catch (_) {}
+        const arr = []; for (let i = 0; i < count; i++) { const t = i / (count - 1); arr.push('color-mix(in srgb, #D64545 ' + Math.round((1-t)*100) + '%, #3A7BD5 ' + Math.round(t*100) + '%)'); } return arr;
+      };
+
+      const margin = { top: 36, right: 24, bottom: 26, left: 56 };
+      let width = 800, height = 480;
+
+      function chooseTextOnBg(bgCss) {
+        try {
+          var m = String(bgCss||'').match(/rgba?\\(([^)]+)\\)/);
+          if (!m) return '#0e1116';
+          var parts = m[1].split(',').map(function(s){ return parseFloat(s.trim()); });
+          var srgb = [parts[0],parts[1],parts[2]].map(function(v){ return Math.max(0,Math.min(255,v))/255; });
+          var linear = srgb.map(function(c){ return c<=0.03928?c/12.92:Math.pow((c+0.055)/1.055,2.4); });
+          var L = 0.2126*linear[0]+0.7152*linear[1]+0.0722*linear[2];
+          return L < 0.5 ? '#ffffff' : '#0e1116';
+        } catch(_){ return '#0e1116'; }
+      }
+
+      function updateSize() {
+        width = container.clientWidth || 800;
+        var gap = 16; var minPanel = 320;
+        var nCols = (width >= (minPanel * 2 + gap)) ? 2 : 1;
+        var panelWidth = nCols === 2 ? Math.max(minPanel, Math.floor((width - gap) / 2)) : Math.max(minPanel, width);
+        var base = Math.max(minPanel, Math.round(panelWidth * 0.92));
+        height = base;
+        svgA.attr('viewBox', '0 0 ' + panelWidth + ' ' + height).attr('preserveAspectRatio', 'xMidYMid meet').style('width', '100%').style('height', 'auto');
+        svgB.attr('viewBox', '0 0 ' + panelWidth + ' ' + height).attr('preserveAspectRatio', 'xMidYMid meet').style('width', '100%').style('height', 'auto');
+        gRootA.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+        gRootB.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+        var innerWidth = panelWidth - margin.left - margin.right;
+        var innerHeight = height - margin.top - margin.bottom;
+        return { innerWidth: innerWidth, innerHeight: innerHeight };
+      }
+
+      function computeValues(matrix) {
+        var n = classes.length;
+        var totalsByRow = matrix.map(function(row){ return row.reduce(function(a,b){return a+b;},0); });
+        var flat = []; var minV = Infinity; var maxV = -Infinity;
+        for (var r = 0; r < n; r++) { for (var c = 0; c < n; c++) { var count = matrix[r][c]; var value = totalsByRow[r] ? count / totalsByRow[r] : 0; if (value < minV) minV = value; if (value > maxV) maxV = value; flat.push({ r: r, c: c, count: count, value: value }); } }
+        return { data: flat, minV: minV, maxV: maxV };
+      }
+
+      function getColorScale(values, minV, maxV) {
+        var hasPalette = palette.length > 0;
+        if (hasPalette && window.ColorPalettes) { var scale = d3.scaleQuantile().domain(values).range(palette); return function(v){ return scale(v); }; }
+        var norm = d3.scaleLinear().domain([minV, maxV]).range([0.08, 0.9]).clamp(true);
+        return function(v){ return 'color-mix(in oklab, var(--primary-color) ' + Math.round(norm(v)*100) + '%, var(--surface-bg))'; };
+      }
+
+      function render() {
+        var sizes = updateSize();
+        var n = classes.length;
+        var gridSize = Math.min(sizes.innerWidth, sizes.innerHeight);
+        var cellSize = gridSize / n;
+        var x = d3.scaleBand().domain(d3.range(n)).range([0, gridSize]).paddingInner(0.06);
+        var yScale = d3.scaleBand().domain(d3.range(n)).range([0, gridSize]).paddingInner(0.06);
+
+        var dataA = computeValues(matrixA);
+        var colorA = getColorScale(dataA.data.map(function(d){return d.value;}), dataA.minV, dataA.maxV);
+
+        gCellsA.selectAll('*').remove();
+        dataA.data.forEach(function(d) {
+          gCellsA.append('rect').attr('x', x(d.c)).attr('y', yScale(d.r)).attr('width', x.bandwidth()).attr('height', yScale.bandwidth()).attr('rx', 2).attr('fill', colorA(d.value))
+            .on('mousemove', function(event) { var p = d3.pointer(event, container); tipInner.innerHTML = '<strong>' + classes[d.r] + '</strong> &rarr; <strong>' + classes[d.c] + '</strong><br/>' + (d.value*100).toFixed(1) + '% (' + d.count + ')'; tip.style.transform = 'translate(' + (p[0]+10) + 'px, ' + (p[1]+10) + 'px)'; tip.style.opacity = '1'; })
+            .on('mouseleave', function() { tip.style.opacity = '0'; });
+          gCellsA.append('text').attr('class', 'cell-text').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle').attr('x', x(d.c) + x.bandwidth()/2).attr('y', yScale(d.r) + yScale.bandwidth()/2).text(Math.round(d.value*100));
+        });
+
+        gAxesA.selectAll('*').remove();
+        classes.forEach(function(c, i) {
+          gAxesA.append('text').attr('class', 'axis-label').attr('text-anchor', 'middle').attr('x', x(i) + x.bandwidth()/2).attr('y', -8).text(c);
+          gAxesA.append('text').attr('class', 'axis-label').attr('text-anchor', 'end').attr('x', -8).attr('y', yScale(i) + yScale.bandwidth()/2).attr('dominant-baseline', 'middle').text(c);
+        });
+        gAxesA.append('text').attr('class', 'axis-label').attr('text-anchor', 'middle').attr('x', gridSize/2).attr('y', sizes.innerHeight + 20).text('Predicted');
+        gAxesA.append('text').attr('class', 'axis-label').attr('text-anchor', 'middle').attr('transform', 'translate(' + (-40) + ',' + (gridSize/2) + ') rotate(-90)').text('Actual');
+
+        var dataB = computeValues(matrixB);
+        var diverging = getDivergingColors(13);
+        var mapA = new Map(dataA.data.map(function(d){ return [d.r + '-' + d.c, d.value]; }));
+        var delta = dataB.data.map(function(d){ return { r: d.r, c: d.c, count: d.count, value: d.value - (mapA.get(d.r + '-' + d.c) || 0) }; });
+        var maxAbsDelta = Math.max(0.01, d3.max(delta, function(d){ return Math.abs(d.value); }) || 0.01);
+        var colorB = d3.scaleQuantize().domain([-maxAbsDelta, maxAbsDelta]).range(diverging);
+
+        gCellsB.selectAll('*').remove();
+        delta.forEach(function(d, i) {
+          gCellsB.append('rect').attr('x', x(d.c)).attr('y', yScale(d.r)).attr('width', x.bandwidth()).attr('height', yScale.bandwidth()).attr('rx', 2).attr('fill', colorB(d.value))
+            .on('mousemove', function(event) { var p = d3.pointer(event, container); var a = dataA.data.find(function(x){ return x.r===d.r && x.c===d.c; }); var b = dataB.data.find(function(x){ return x.r===d.r && x.c===d.c; }); var dv = ((b?b.value:0)-(a?a.value:0))*100; tipInner.innerHTML = '<strong>' + classes[d.r] + '</strong> &rarr; <strong>' + classes[d.c] + '</strong><br/>baseline ' + (a?a.value*100:0).toFixed(1) + '%<br/>improved ' + (b?b.value*100:0).toFixed(1) + '%<br/>delta ' + dv.toFixed(1) + ' pp'; tip.style.transform = 'translate(' + (p[0]+10) + 'px, ' + (p[1]+10) + 'px)'; tip.style.opacity = '1'; })
+            .on('mouseleave', function() { tip.style.opacity = '0'; });
+          gCellsB.append('text').attr('class', 'cell-text').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle').attr('x', x(d.c) + x.bandwidth()/2).attr('y', yScale(d.r) + yScale.bandwidth()/2).text(Math.round(d.value*100));
+        });
+
+        gAxesB.selectAll('*').remove();
+        classes.forEach(function(c, i) {
+          gAxesB.append('text').attr('class', 'axis-label').attr('text-anchor', 'middle').attr('x', x(i) + x.bandwidth()/2).attr('y', -8).text(c);
+          gAxesB.append('text').attr('class', 'axis-label').attr('text-anchor', 'end').attr('x', -8).attr('y', yScale(i) + yScale.bandwidth()/2).attr('dominant-baseline', 'middle').text(c);
+        });
+        gAxesB.append('text').attr('class', 'axis-label').attr('text-anchor', 'middle').attr('x', gridSize/2).attr('y', sizes.innerHeight + 20).text('Predicted');
+        gAxesB.append('text').attr('class', 'axis-label').attr('text-anchor', 'middle').attr('transform', 'translate(' + (-40) + ',' + (gridSize/2) + ') rotate(-90)').text('Actual');
+      }
+
+      render();
+      if (window.ResizeObserver) { new ResizeObserver(function(){ render(); }).observe(container); }
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function(){ ensureD3(bootstrap); }, { once: true }); } else { ensureD3(bootstrap); }
+  })();
+<\/script>`;

frontend/src/editor/seed-embed-memory-bar.ts

@@ -0,0 +1,250 @@
+/**
+ * Stacked bar chart: GPU memory breakdown by component.
+ * Adapted from research-article-template/app/src/content/embeds/d3-bar.html
+ * Self-contained with inline data (no CSV dependency).
+ */
+export const SEED_MEMORY_BAR_HTML = `<div class="d3-bar"></div>
+<style>
+  .d3-bar .controls {
+    margin-top: 0;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+  .d3-bar .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-bar .controls label {
+    font-size: 12px;
+    color: var(--text-color);
+    font-weight: 700;
+  }
+  .d3-bar .controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    transition: border-color .15s ease, box-shadow .15s ease;
+  }
+  [data-theme="dark"] .d3-bar .controls select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  }
+  .d3-bar .controls select:hover { border-color: var(--primary-color); }
+  .d3-bar .controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232, 137, 171, .25); outline: none; }
+  .d3-bar .chart-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 20px;
+    margin: 8px 0 0 0;
+    flex-wrap: wrap;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  .d3-bar .legend-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+  .d3-bar .legend-bottom .legend-title { font-size: 12px; font-weight: 700; color: var(--text-color); }
+  .d3-bar .legend-bottom .items { display: flex; flex-wrap: wrap; gap: 8px 14px; }
+  .d3-bar .legend-bottom .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+  .d3-bar .legend-bottom .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-color); display: inline-block; }
+  .d3-bar.hovering .legend-bottom .item.ghost { opacity: .35; }
+  .d3-bar.hovering .bars path.ghost { opacity: .35; }
+  .d3-bar .axis-label { fill: var(--text-color); font-size: 12px; font-weight: 700; }
+  .d3-bar .axes path, .d3-bar .axes line { stroke: var(--axis-color); }
+  .d3-bar .axes text { fill: var(--tick-color); }
+  .d3-bar .grid line { stroke: var(--grid-color); }
+  .d3-bar .d3-tooltip { z-index: var(--z-tooltip); backdrop-filter: saturate(1.12) blur(8px); }
+  .d3-bar .bars path.bar { transition: opacity .12s ease, stroke .12s ease, stroke-width .12s ease; }
+  .d3-bar .bars path.bar.highlight { stroke: none; stroke-width: 0; }
+  .d3-bar.hovering .bars path.ghost { opacity: .25; }
+  .d3-bar .d3-tooltip .swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-color); display: inline-block; margin-right: 6px; vertical-align: -2px; }
+  .d3-bar .chart-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; }
+  .d3-bar .controls { justify-content: flex-start; min-width: 320px; }
+  .d3-bar .controls .control-group { min-width: 150px; }
+  .d3-bar .controls select { font-size: 13px; min-width: 160px; }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const container = (mount && mount.querySelector && mount.querySelector('.d3-bar')) || document.querySelector('.d3-bar');
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      const seqLabels = ["1024", "2048", "4096", "8192"];
+      const seqScale = [1, 2, 4, 8];
+      const componentKeys = ['parameters', 'gradients', 'optimizer', 'activations'];
+      const modelSizes = ["1B", "3B", "8B", "70B", "405B"];
+      const paramsMem = { "1B": 4.0, "3B": 13.3, "8B": 26.0, "70B": 244.0, "405B": 1520.0 };
+      const actCoeff = { "1B": 3.6, "3B": 9.3, "8B": 46.2, "70B": 145.7, "405B": 1519.9 };
+      const recomputeModes = ["none", "selective", "full"];
+
+      const activationsCurve = (sizeKey, mode) => {
+        const coeff = actCoeff[sizeKey];
+        let arr = seqScale.map((v) => coeff * (v * v));
+        if (mode === 'selective') arr = arr.map((v) => v * 0.25);
+        else if (mode === 'full') arr = arr.map((v) => v * (1 / 16));
+        return arr;
+      };
+      const stackFor = (sizeKey, mode) => {
+        const p = seqScale.map(() => paramsMem[sizeKey]);
+        const g = seqScale.map(() => paramsMem[sizeKey]);
+        const o = seqScale.map(() => 2 * paramsMem[sizeKey]);
+        const a = activationsCurve(sizeKey, mode);
+        return { parameters: p, gradients: g, optimizer: o, activations: a };
+      };
+
+      const Y = {};
+      recomputeModes.forEach((m) => { Y[m] = {}; modelSizes.forEach((s) => { Y[m][s] = stackFor(s, m); }); });
+
+      const controls = document.createElement('div'); controls.className = 'controls';
+      const groupSize = document.createElement('div'); groupSize.className = 'control-group';
+      const labelSize = document.createElement('label'); labelSize.textContent = 'Model Size';
+      const selSize = document.createElement('select'); modelSizes.forEach((s) => { const o = document.createElement('option'); o.value = s; o.textContent = s; selSize.appendChild(o); });
+      groupSize.appendChild(labelSize); groupSize.appendChild(selSize);
+      const groupRecomp = document.createElement('div'); groupRecomp.className = 'control-group';
+      const labelRecomp = document.createElement('label'); labelRecomp.textContent = 'Recomputation';
+      const selRecomp = document.createElement('select'); recomputeModes.forEach((m) => { const o = document.createElement('option'); o.value = m; o.textContent = m; selRecomp.appendChild(o); });
+      groupRecomp.appendChild(labelRecomp); groupRecomp.appendChild(selRecomp);
+
+      const header = document.createElement('div'); header.className = 'chart-header';
+      const legendBottom = document.createElement('div'); legendBottom.className = 'legend-bottom';
+      const legendTitle = document.createElement('div'); legendTitle.className = 'legend-title'; legendTitle.textContent = 'Legend';
+      const legendItems = document.createElement('div'); legendItems.className = 'items';
+      legendBottom.appendChild(legendTitle); legendBottom.appendChild(legendItems);
+      header.appendChild(legendBottom); header.appendChild(controls);
+
+      const card = document.createElement('div'); card.className = 'chart-card'; container.appendChild(card);
+      container.appendChild(header);
+      const svg = d3.select(card).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gBars = gRoot.append('g').attr('class', 'bars');
+
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip'); let tipInner;
+      if (!tip) { tip = document.createElement('div'); tip.className = 'd3-tooltip'; Object.assign(tip.style, { position: 'absolute', top: '0px', left: '0px', transform: 'translate(-9999px, -9999px)', pointerEvents: 'none', padding: '8px 10px', borderRadius: '8px', fontSize: '12px', lineHeight: '1.35', border: '1px solid var(--border-color)', background: 'var(--surface-bg)', color: 'var(--text-color)', boxShadow: '0 4px 24px rgba(0,0,0,.18)', opacity: '0', transition: 'opacity .12s ease' }); tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign = 'left'; tip.appendChild(tipInner); container.appendChild(tip); } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      let currentSize = modelSizes[0];
+      let currentMode = 'selective';
+      selRecomp.value = currentMode;
+
+      let width = 800, height = 360;
+      const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+      const x0 = d3.scaleBand().paddingInner(0.25).paddingOuter(0.1);
+      const y = d3.scaleLinear();
+      function getCategoricalColors(count) {
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') { return window.ColorPalettes.getColors('categorical', count); } } catch (_) {}
+        const tableau = (window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948'];
+        return tableau.slice(0, count);
+      }
+      const palette = getCategoricalColors(componentKeys.length);
+      const colorMap = new Map(componentKeys.map((k, i) => [k, palette[i]]));
+      const colorOf = (key) => colorMap.get(key) || 'var(--primary-color)';
+
+      function yMax(sizeKey, mode) {
+        const s = Y[mode][sizeKey]; let max = 0;
+        for (let i = 0; i < seqLabels.length; i++) { const sum = s.parameters[i] + s.gradients[i] + s.optimizer[i] + s.activations[i]; if (sum > max) max = sum; }
+        return max * 1.05;
+      }
+
+      function renderLegend() {
+        legendItems.innerHTML = componentKeys.map((key, i) => '<span class="item" data-key="' + key + '"><span class="swatch" style="background:' + palette[i] + '"></span><span>' + key + '</span></span>').join('');
+        legendItems.querySelectorAll('.item').forEach((el) => {
+          el.addEventListener('mouseenter', () => { const k = el.getAttribute('data-key'); if (!k) return; container.classList.add('hovering'); gBars.selectAll('path.bar').classed('ghost', d => d && d.key !== k); legendItems.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-key') !== k)); });
+          el.addEventListener('mouseleave', () => { container.classList.remove('hovering'); gBars.selectAll('path.bar').classed('ghost', false); legendItems.querySelectorAll('.item').forEach(it => it.classList.remove('ghost')); });
+        });
+      }
+
+      function updateScales() {
+        width = container.clientWidth || 800; height = Math.max(260, Math.round(width / 3)); svg.attr('width', width).attr('height', height);
+        const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; gRoot.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+        x0.domain(seqLabels).range([0, innerWidth]);
+        y.domain([0, yMax(currentSize, currentMode)]).range([innerHeight, 0]).nice();
+        gGrid.selectAll('*').remove();
+        gGrid.selectAll('line').data(y.ticks(6)).join('line').attr('x1', 0).attr('x2', innerWidth).attr('y1', (d) => y(d)).attr('y2', (d) => y(d)).attr('stroke', 'var(--grid-color)').attr('stroke-width', 1).attr('shape-rendering', 'crispEdges');
+        gAxes.selectAll('*').remove();
+        gAxes.append('g').attr('transform', 'translate(0,' + innerHeight + ')').call(d3.axisBottom(x0)).call((g) => { g.selectAll('path, line').attr('stroke', 'var(--axis-color)'); g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '12px'); });
+        gAxes.append('g').call(d3.axisLeft(y).ticks(6).tickFormat(d3.format('~f'))).call((g) => { g.selectAll('path, line').attr('stroke', 'var(--axis-color)'); g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '12px'); });
+        gAxes.append('text').attr('class', 'axis-label').attr('x', innerWidth / 2).attr('y', innerHeight + 44).attr('text-anchor', 'middle').text('Sequence Length');
+        gAxes.append('text').attr('class', 'axis-label').attr('text-anchor', 'middle').attr('transform', 'translate(' + (-52) + ',' + (innerHeight / 2) + ') rotate(-90)').text('Memory (GB)');
+        renderLegend();
+        return { innerWidth: innerWidth, innerHeight: innerHeight };
+      }
+
+      function drawBars() {
+        const stacks = Y[currentMode][currentSize];
+        const series = componentKeys.map((key, i) => ({ key: key, color: palette[i], values: stacks[key] }));
+        const stacked = seqLabels.map((label, i) => {
+          let acc = 0; const items = [];
+          series.forEach((s, idx) => { const y0 = acc; const y1 = acc + s.values[i]; items.push({ key: s.key, color: s.color, i: i, y0: y0, y1: y1, xLabel: label, value: s.values[i], isBottom: idx === 0, isTop: idx === series.length - 1 }); acc = y1; });
+          const total = acc; items.forEach(it => { it.total = total; });
+          return { label: label, items: items };
+        });
+        const sizes = updateScales();
+        const bandWidth = x0.bandwidth();
+        const rCorner = 4;
+        const roundedPath = (x, yTop, w, h, isTop, isBottom) => {
+          const r = Math.min(rCorner, Math.max(0, Math.min(w, h) / 2));
+          const rTL = isTop ? r : 0, rTR = isTop ? r : 0, rBR = isBottom ? r : 0, rBL = isBottom ? r : 0;
+          const x0 = x, y0 = yTop, x1 = x + w, y1 = yTop + h;
+          return 'M' + (x0 + rTL) + ',' + y0 + 'H' + (x1 - rTR) + (rTR ? 'Q' + x1 + ',' + y0 + ' ' + x1 + ',' + (y0 + rTR) : 'V' + y0) + 'V' + (y1 - rBR) + (rBR ? 'Q' + x1 + ',' + y1 + ' ' + (x1 - rBR) + ',' + y1 : 'H' + x1) + 'H' + (x0 + rBL) + (rBL ? 'Q' + x0 + ',' + y1 + ' ' + x0 + ',' + (y1 - rBL) : 'V' + y1) + 'V' + (y0 + rTL) + (rTL ? 'Q' + x0 + ',' + y0 + ' ' + (x0 + rTL) + ',' + y0 : 'H' + x0) + 'Z';
+        };
+        const groups = gBars.selectAll('g.bar-group').data(stacked, d => d.label);
+        const groupsEnter = groups.enter().append('g').attr('class', 'bar-group');
+        groupsEnter.merge(groups).attr('transform', (d) => 'translate(' + x0(d.label) + ',0)');
+        groups.exit().remove();
+        const bars = groupsEnter.merge(groups).selectAll('path.bar').data(d => d.items, d => d.key);
+        bars.enter().append('path').attr('class', 'bar')
+          .attr('d', (d) => roundedPath(0, y(d.y1), bandWidth, Math.max(0.5, y(d.y0) - y(d.y1)), d.isTop, d.isBottom))
+          .attr('fill', (d) => d.color)
+          .on('mouseenter', function (ev, d) { container.classList.add('hovering'); gBars.selectAll('path.bar').classed('ghost', (dd) => !(dd && dd.key === d.key)); var pct = d.total > 0 ? (d.value / d.total * 100) : 0; tipInner.innerHTML = '<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;"><span class="swatch" style="background:' + d.color + '"></span><strong>' + d.key + '</strong></div><div><strong>Seq</strong> ' + d.xLabel + '</div><div><strong>Mem</strong> ' + d.value.toFixed(1) + ' GB <span style="opacity:.7">(' + pct.toFixed(0) + '%)</span></div><div style="opacity:.7"><strong>Total</strong> ' + d.total.toFixed(1) + ' GB</div>'; tip.style.opacity = '1'; legendItems.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-key') !== d.key)); })
+          .on('mousemove', function (ev) { var m = d3.pointer(ev, container); var maxX = (container.clientWidth || 0) - (tip.offsetWidth + 6); var maxY = (container.clientHeight || 0) - (tip.offsetHeight + 6); tip.style.transform = 'translate(' + Math.round(Math.max(0, Math.min(m[0] + 12, maxX))) + 'px, ' + Math.round(Math.max(0, Math.min(m[1] + 12, maxY))) + 'px)'; })
+          .on('mouseleave', function () { tip.style.opacity = '0'; tip.style.transform = 'translate(-9999px, -9999px)'; container.classList.remove('hovering'); gBars.selectAll('path.bar').classed('ghost', false); legendItems.querySelectorAll('.item').forEach(it => { it.classList.remove('hovered'); it.classList.remove('ghost'); }); })
+          .merge(bars).transition().duration(200)
+          .attr('d', (d) => roundedPath(0, y(d.y1), bandWidth, Math.max(0.5, y(d.y0) - y(d.y1)), d.isTop, d.isBottom))
+          .attr('fill', (d) => d.color);
+        bars.exit().remove();
+      }
+
+      drawBars();
+      controls.appendChild(groupSize); controls.appendChild(groupRecomp);
+      selSize.addEventListener('change', (e) => { currentSize = e.target.value; drawBars(); });
+      selRecomp.addEventListener('change', (e) => { currentMode = e.target.value; drawBars(); });
+      if (window.ResizeObserver) { new ResizeObserver(() => drawBars()).observe(container); }
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
+  })();
+<\/script>`;

frontend/src/editor/seed-embeds.ts

@@ -0,0 +1,230 @@
+/**
+ * Seed embed HTML for the demo content.
+ *
+ * banner.html: self-contained scatter plot with generated data (no CSV).
+ * d3-scaling-chart.html: simple line chart for the body embed.
+ * d3-memory-bar.html: stacked bar chart for memory analysis.
+ * d3-confusion-matrix.html: side-by-side confusion matrices.
+ */
+
+export const SEED_BANNER_HTML = `<div class="d3-scatter"></div>
+<style>
+  .d3-scatter svg { display: block; }
+  .d3-scatter .centroid text { pointer-events: none; }
+</style>
+<script>
+(() => {
+  const ensureD3 = (cb) => {
+    if (window.d3 && typeof window.d3.select === 'function') return cb();
+    let s = document.getElementById('d3-cdn-script');
+    if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+    s.addEventListener('load', () => { if (window.d3) cb(); }, { once: true });
+    if (window.d3) cb();
+  };
+
+  const bootstrap = () => {
+    const scriptEl = document.currentScript;
+    let container = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!(container && container.classList.contains('d3-scatter'))) {
+      const cs = [...document.querySelectorAll('.d3-scatter')].filter(el => el.dataset.mounted !== 'true');
+      container = cs[cs.length - 1] || null;
+    }
+    if (!container || container.dataset.mounted === 'true') return;
+    container.dataset.mounted = 'true';
+    container.style.position = 'relative';
+
+    const categories = ['Language', 'Vision', 'Multimodal', 'RL', 'Diffusion', 'Retrieval'];
+    const rng = (seed) => { let s = seed; return () => { s = (s * 16807 + 0) % 2147483647; return s / 2147483647; }; };
+    const r = rng(42);
+    const gauss = () => {
+      const u = Math.max(1e-9, r());
+      return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * r());
+    };
+    const centers = categories.map((cat, ci) => {
+      const tx = (ci + 0.5) / categories.length;
+      const cx = 0.08 + tx * 0.84 + (r() - 0.5) * 0.06;
+      const cy = 0.25 + r() * 0.5;
+      const sx = 0.05 + r() * 0.05;
+      const sy = 0.05 + r() * 0.05;
+      const theta = r() * Math.PI;
+      return { cat, cx, cy, sx, sy, cos: Math.cos(theta), sin: Math.sin(theta) };
+    });
+    const data = [];
+    centers.forEach(({ cat, cx, cy, sx, sy, cos, sin }) => {
+      const n = 225 + Math.floor(r() * 270);
+      for (let i = 0; i < n; i++) {
+        const gx = gauss() * sx, gy = gauss() * sy;
+        data.push({
+          x: cx + gx * cos - gy * sin,
+          y: cy + gx * sin + gy * cos,
+          group: cat,
+          label: cat + ' ' + (i + 1),
+        });
+      }
+    });
+    for (let k = 0; k < 120; k++) {
+      const a = centers[Math.floor(r() * centers.length)];
+      let b = centers[Math.floor(r() * centers.length)];
+      if (b === a) b = centers[(centers.indexOf(a) + 1) % centers.length];
+      const t = r();
+      data.push({
+        x: a.cx + (b.cx - a.cx) * t + gauss() * 0.015,
+        y: a.cy + (b.cy - a.cy) * t + gauss() * 0.015,
+        group: r() < 0.5 ? a.cat : b.cat,
+        label: 'bridge',
+      });
+    }
+
+    const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+    const gDots = svg.append('g');
+    const gLabels = svg.append('g');
+
+    const x = d3.scaleLinear();
+    const y = d3.scaleLinear();
+    const color = d3.scaleOrdinal().domain(categories);
+    const margin = { top: 8, right: 12, bottom: 8, left: 12 };
+
+    function refreshPalette() {
+      try {
+        if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+          const arr = window.ColorPalettes.getColors('categorical', categories.length);
+          if (arr && arr.length) { color.range(arr); return; }
+        }
+      } catch {}
+      color.range(['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948']);
+    }
+
+    function draw() {
+      const w = container.clientWidth || 800;
+      const h = Math.max(200, Math.round(w / 2.8));
+      svg.attr('width', w).attr('height', h);
+
+      const iw = w - margin.left - margin.right;
+      const ih = h - margin.top - margin.bottom;
+      x.domain(d3.extent(data, d => d.x)).range([margin.left, margin.left + iw]);
+      y.domain(d3.extent(data, d => d.y)).range([margin.top + ih, margin.top]);
+
+      const dots = gDots.selectAll('circle').data(data);
+      dots.enter().append('circle')
+        .attr('r', 3.5).attr('fill-opacity', 0.8)
+        .attr('stroke-width', 0.5)
+        .merge(dots)
+        .attr('cx', d => x(d.x)).attr('cy', d => y(d.y))
+        .attr('fill', d => color(d.group))
+        .attr('stroke', d => d3.color(color(d.group)).darker(0.3));
+      dots.exit().remove();
+
+      const centroids = d3.rollups(data, v => ({ x: d3.mean(v, d => d.x), y: d3.mean(v, d => d.y) }), d => d.group);
+      const labels = gLabels.selectAll('g.centroid').data(centroids, d => d[0]);
+      const enter = labels.enter().append('g').attr('class', 'centroid');
+      enter.append('text').attr('class', 'bg').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+        .style('font-weight', '800').style('font-size', '14px').style('stroke', 'var(--page-bg, #fff)')
+        .style('stroke-width', '6px').style('paint-order', 'stroke fill');
+      enter.append('text').attr('class', 'fg').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+        .style('font-weight', '800').style('font-size', '14px');
+      const merged = enter.merge(labels);
+      merged.attr('transform', d => 'translate(' + x(d[1].x) + ',' + y(d[1].y) + ')');
+      merged.select('.bg').text(d => d[0]).style('fill', 'var(--page-bg, #fff)');
+      merged.select('.fg').text(d => d[0]).style('fill', d => color(d[0]));
+      labels.exit().remove();
+    }
+
+    refreshPalette();
+    draw();
+    document.addEventListener('palettes:updated', () => { refreshPalette(); draw(); });
+    if (window.ResizeObserver) new ResizeObserver(draw).observe(container);
+  };
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+  else ensureD3(bootstrap);
+})();
+<\/script>`;
+
+export const SEED_SCALING_CHART_HTML = `<div class="d3-line-chart"></div>
+<style>
+  .d3-line-chart {
+    font-family: sans-serif;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 8px;
+    color: var(--text-color);
+  }
+  .d3-line-chart .line { fill: none; stroke: var(--primary-color); stroke-width: 3px; }
+  .d3-line-chart .area { fill: var(--primary-color); opacity: 0.3; }
+  .d3-line-chart .axis path, .d3-line-chart .axis line { stroke: var(--axis-color); }
+  .d3-line-chart .axis text { fill: var(--text-color); }
+  .d3-line-chart .grid line { stroke: var(--grid-color); stroke-opacity: 0.7; shape-rendering: crispEdges; }
+  .d3-line-chart .tooltip { position: absolute; pointer-events: none; background-color: var(--surface-bg); border: 1px solid var(--border-color); padding: 8px; border-radius: 4px; font-size: 12px; color: var(--text-color); }
+  .d3-line-chart .dot { fill: var(--primary-color); stroke: var(--surface-bg); stroke-width: 2px; }
+</style>
+<script>
+(() => {
+  const ensureD3 = (cb) => {
+    if (window.d3 && typeof window.d3.select === 'function') return cb();
+    let s = document.getElementById('d3-cdn-script');
+    if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+    s.addEventListener('load', () => { if (window.d3) cb(); }, { once: true });
+    if (window.d3) cb();
+  };
+
+  const bootstrap = () => {
+    const scriptEl = document.currentScript;
+    let container = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!(container && container.classList.contains('d3-line-chart'))) {
+      const cs = [...document.querySelectorAll('.d3-line-chart')].filter(el => el.dataset.mounted !== 'true');
+      container = cs[cs.length - 1] || null;
+    }
+    if (!container || container.dataset.mounted === 'true') return;
+    container.dataset.mounted = 'true';
+
+    const data = [
+      { date: new Date("2023-01-01"), value: 30 },
+      { date: new Date("2023-01-02"), value: 80 },
+      { date: new Date("2023-01-03"), value: 45 },
+      { date: new Date("2023-01-04"), value: 60 },
+      { date: new Date("2023-01-05"), value: 20 },
+      { date: new Date("2023-01-06"), value: 90 },
+      { date: new Date("2023-01-07"), value: 55 }
+    ];
+
+    const margin = { top: 20, right: 30, bottom: 40, left: 40 };
+
+    const render = () => {
+      const width = container.clientWidth;
+      const height = Math.min(width / 1.6, 400);
+      d3.select(container).select('svg').remove();
+      d3.select(container).select('.tooltip').remove();
+
+      const svg = d3.select(container).append('svg').attr('width', width).attr('height', height);
+      const g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+      const iw = width - margin.left - margin.right;
+      const ih = height - margin.top - margin.bottom;
+
+      const x = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([0, iw]);
+      const y = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).nice().range([ih, 0]);
+
+      g.append('g').attr('class', 'axis').attr('transform', 'translate(0,' + ih + ')').call(d3.axisBottom(x));
+      g.append('g').attr('class', 'axis').call(d3.axisLeft(y).ticks(5));
+      g.append('g').attr('class', 'grid').call(d3.axisLeft(y).tickSize(-iw).tickFormat(''));
+
+      const line = d3.line().x(d => x(d.date)).y(d => y(d.value)).curve(d3.curveMonotoneX);
+      const area = d3.area().x(d => x(d.date)).y0(ih).y1(d => y(d.value)).curve(d3.curveMonotoneX);
+
+      g.append('path').datum(data).attr('class', 'area').attr('d', area);
+      g.append('path').datum(data).attr('class', 'line').attr('d', line);
+      g.selectAll('.dot').data(data).enter().append('circle').attr('class', 'dot')
+        .attr('cx', d => x(d.date)).attr('cy', d => y(d.value)).attr('r', 5);
+    };
+
+    render();
+    if (window.ResizeObserver) new ResizeObserver(render).observe(container);
+  };
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+  else ensureD3(bootstrap);
+})();
+<\/script>`;
+
+export { SEED_MEMORY_BAR_HTML } from "./seed-embed-memory-bar";
+export { SEED_CONFUSION_MATRIX_HTML } from "./seed-embed-confusion-matrix";