@polycode-projects/the-mechanical-code-talker 2.7.2 → 2.7.4

package/src/services/spider-fly-viz.mjs

@@ -0,0 +1,492 @@
+// spider-fly-viz.mjs — the spider-and-fly full-screen page (PLAN_SPIDER_FLY.md
+// §8/§9/§11): a self-contained document shaped exactly like ledger-viz.mjs/
+// plan-viz.mjs — one inlined <style> (importing viz-theme.mjs's shared
+// tokens), behaviour as an inlined IIFE — but unlike those two, almost
+// nothing is embedded as build-time data: the whole game is LIVE client-side
+// state (spider-fly-browser-entry.mjs's createSpiderFlySession), so
+// renderSpiderFlyHtml only needs the page's own static grid geometry (which
+// never changes) plus a title. The engine, sprite resolver and chat turn
+// engine all arrive via ./spider-fly-browser.bundle.js, referenced with a
+// plain same-origin <script src> — the same sibling-file arrangement
+// index.html already uses for chat-browser.bundle.js (both are the FULL
+// turn engine, both generated fresh per build, neither meant to be
+// committed), not memory-ask-browser.bundle.js's inlined-text arrangement
+// (that bundle is small, committed, and inlined specifically so ledger.html
+// stays portable on its own — neither reason applies here).
+//
+// renderSpiderFlyHtml() is pure: no I/O, deterministic output for identical
+// input. scripts/build-demo-site.mjs calls it directly and writes the result
+// to public/spider-fly.html, after building the sibling bundle.
+//
+// Three runtime pieces are spliced into the page's own inlined script via
+// `.toString()` — exactly ledger-viz.mjs's own `facetCounts`/
+// `resolveAnsweredTerm` pattern — because they are genuinely UI-only, with no
+// reason to live inside the engine bundle: `createTicker` (viz-ticker.mjs,
+// the shared play/pause/step/reset primitive), `classOfAgentId` and
+// `threadCellsForSpiderPlan` (below — the silk-thread reconstruction, kept as
+// real, independently-tested exports rather than raw inline-script text, the
+// same discipline ledger-viz.mjs holds its own spliced helpers to). Sprite
+// resolution, grid geometry and the chat turn engine all come from the
+// bundle's own real ES exports instead, since (unlike ledger-viz, which
+// reuses a FIXED shared bundle it can't extend for one page's own needs) this
+// page ships its own dedicated bundle and can just export what it needs.
+import { THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson } from "./viz-theme.mjs";
+import { createTicker } from "./viz-ticker.mjs";
+import { GRID_SIZE, WEB_HOME, WEB_RADIUS, isInWebBlock, cellId } from "../domain/spider-fly-world.mjs";
+
+const CELL_PX = 44;
+const BOARD_PX = CELL_PX * GRID_SIZE;
+const DEFAULT_TITLE = "tmct — the spider and the fly";
+const PREVIEW_MAX_TURNS = 40;
+const TICK_WAIT_MS = 700;
+
+function webCellIds() {
+  const out = [];
+  for (let y = 1; y <= GRID_SIZE; y += 1) {
+    for (let x = 1; x <= GRID_SIZE; x += 1) {
+      if (isInWebBlock(x, y)) out.push(cellId(x, y));
+    }
+  }
+  return out;
+}
+
+/** An agent id's class for sprite/HUD purposes — "spider-2" -> "spider",
+ *  "fly-10" -> "fly", "egg-1" -> "egg". Self-contained (no outer refs),
+ *  `.toString()`-splice safe. */
+export function classOfAgentId(id) {
+  return String(id).replace(/-\d+$/, "");
+}
+
+/**
+ * Reconstruct the spider's remaining silk-thread path — the sequence of
+ * cell ids from its CURRENT cell (after this tick's one executed step) to
+ * wherever `findActionPath` was aiming — from spider-fly.mjs's own
+ * `agents[spiderId]` shape ({ cell, plan }), where `plan` is the FULL
+ * direction list `findActionPath` returned (the step already taken this
+ * tick, `plan[0]`, plus every step still to come). Only a spider with a
+ * REAL multi-step plan draws a thread at all: spider-fly.mjs's own
+ * `planSpiderPath` only ever returns one when the believed fly cell sits
+ * inside the web block (its `isGoal`'s own requirement) — most ticks the
+ * spider is greedily closing distance with no such plan, and this
+ * correctly returns null then, same as "no proof chain to draw" elsewhere
+ * in this project's viz pages.
+ *
+ * `geometry` is `{ parseCellId, cellId, directionDelta }` — the exact three
+ * grid-geometry primitives spider-fly-world.mjs exports, injected rather
+ * than imported so this function stays `.toString()`-splice safe (the
+ * inlined page calls it with `window.tmctSpiderFly`'s own re-exports of the
+ * same three). Returns the ordered cell-id array (length > 1) or null.
+ */
+export function threadCellsForSpiderPlan(agents, geometry) {
+  const { parseCellId, cellId: toCellId, directionDelta } = geometry;
+  for (const [id, agent] of Object.entries(agents || {})) {
+    if (!/^spider-/.test(id) || !agent.plan || !agent.plan.length) continue;
+    const cells = [agent.cell];
+    let cur = parseCellId(agent.cell);
+    for (const direction of agent.plan.slice(1)) {
+      const delta = directionDelta[direction];
+      if (!delta || !cur) break;
+      cur = { x: cur.x + delta.dx, y: cur.y + delta.dy };
+      cells.push(toCellId(cur.x, cur.y));
+    }
+    if (cells.length > 1) return cells;
+  }
+  return null;
+}
+
+/** The self-contained spider-and-fly page. Pure — the same output for the
+ *  same `title` every time; every other piece of state this page shows is
+ *  computed live in the browser once the sibling bundle loads. `?preview=1`
+ *  on the page's own URL switches it into the small, auto-playing,
+ *  non-interactive mode the home page's hero iframe embeds (§11) — one file
+ *  serves both the hero and the "open full-screen" link, matching how
+ *  ledger.html/plan.html are each one file embedded two ways. */
+export function renderSpiderFlyHtml({ title = DEFAULT_TITLE } = {}) {
+  const gridData = embedJson({
+    gridSize: GRID_SIZE,
+    webCells: webCellIds(),
+    webHome: WEB_HOME,
+    webRadius: WEB_RADIUS,
+    boardPx: BOARD_PX,
+    cellPx: CELL_PX,
+    previewMaxTurns: PREVIEW_MAX_TURNS,
+    tickWaitMs: TICK_WAIT_MS,
+  });
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+<style>
+${THEME_TOKENS_CSS}
+  :root { --fly: #A6791F; }
+  @media (prefers-color-scheme: dark) { :root { --fly: #D9A94B; } }
+  :root[data-theme="dark"] { --fly: #D9A94B; }
+  :root[data-theme="light"] { --fly: #A6791F; }
+  html { background: var(--bg); }
+  body { margin: 0; background: var(--bg); color: var(--ink); font-family: ${SERIF_STACK}; font-size: 16px; line-height: 1.5; }
+  .mono { font-family: ${MONO_STACK}; }
+  main { max-width: 980px; margin: 0 auto; padding: 1.4rem 1.2rem 2.2rem; }
+  .eyebrow { font-family: ${MONO_STACK}; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
+  h1 { font-size: 1.4rem; margin: .3rem 0 .9rem; text-wrap: balance; }
+  button { font: inherit; color: inherit; background: none; cursor: pointer; }
+  button:focus-visible, input:focus-visible, .sprite:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+  .stage { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
+  @media (max-width: 760px) { .stage { grid-template-columns: 1fr; } }
+  .board-frame { position: relative; width: ${BOARD_PX}px; max-width: 100%; aspect-ratio: 1 / 1; background: var(--card); border: 1px solid var(--line); }
+  .board-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+  .sprite-layer { position: absolute; inset: 0; }
+  .sprite { position: absolute; width: 7.6%; height: 7.6%; transform: translate(-50%, -50%); transition: left .25s ease, top .25s ease; }
+  @media (prefers-reduced-motion: reduce) { .sprite { transition: none; } }
+  .sprite svg { width: 100%; height: 100%; display: block; }
+  .sprite[data-cls="spider"] { color: var(--taught); }
+  .sprite[data-cls="fly"] { color: var(--fly); }
+  .sprite[data-cls="egg"] { color: var(--muted); }
+  .sprite.dimmed { opacity: .28; }
+  .thread-tip { position: absolute; transform: translate(-50%, -130%); font-family: ${MONO_STACK}; font-size: .68rem; background: var(--ink); color: var(--bg); padding: .1rem .4rem; border-radius: 3px; pointer-events: none; white-space: nowrap; display: none; }
+  .side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
+  .hud, .chat { background: var(--card); border: 1px solid var(--line); padding: .6rem .75rem; }
+  .hud h2, .chat h2 { font-family: ${MONO_STACK}; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 .5rem; }
+  .hud-row { display: flex; flex-direction: column; gap: .1rem; padding: .3rem 0; border-top: 1px solid var(--line); }
+  .hud-row:first-of-type { border-top: none; }
+  .hud-id { font-family: ${MONO_STACK}; font-size: .74rem; }
+  .hud-id.spider { color: var(--taught); } .hud-id.fly { color: var(--fly); } .hud-id.egg { color: var(--muted); }
+  .hud-goal { font-size: .85rem; }
+  .hud-empty { color: var(--muted); font-size: .85rem; }
+  .chatlog { display: flex; flex-direction: column; gap: .4rem; max-height: 220px; overflow-y: auto; margin-bottom: .5rem; }
+  .chatlog:empty { display: none; margin-bottom: 0; }
+  .chatlog .u { font-family: ${MONO_STACK}; font-size: .74rem; color: var(--muted); }
+  .chatlog .u::before { content: "tmct> "; color: var(--taught); }
+  .chatlog .a { font-size: .88rem; line-height: 1.4; white-space: pre-wrap; }
+  .chatask { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--line); padding-top: .5rem; }
+  .chatlog:empty + .chatask { border-top: none; padding-top: 0; }
+  .chatask .prompt { color: var(--taught); font-size: .78rem; font-family: ${MONO_STACK}; }
+  .chatask input { flex: 1; font-family: ${MONO_STACK}; font-size: .78rem; background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: .32rem .55rem; min-width: 0; }
+  .chatask input:disabled { opacity: .5; }
+  .controls-row { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
+  .controls-row button { font-family: ${MONO_STACK}; font-size: .78rem; padding: .3rem .7rem; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
+  .controls-row button:hover:not(:disabled) { border-color: var(--taught); }
+  .controls-row button:disabled { opacity: .4; cursor: default; }
+  .controls-row .turn { margin-left: auto; font-family: ${MONO_STACK}; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .status { font-family: ${MONO_STACK}; font-size: .74rem; color: var(--muted); margin-top: .5rem; }
+  body.preview .side, body.preview .controls-row, body.preview .status { display: none; }
+  body.preview main { padding: 0; max-width: none; }
+  body.preview .stage { display: block; }
+  body.preview .eyebrow, body.preview h1 { display: none; }
+</style>
+</head>
+<body>
+<main>
+  <div class="eyebrow">tmct &middot; spider and fly</div>
+  <h1>A spider in its web, a fly on the board — each planning against the other</h1>
+  <div class="stage">
+    <div class="board-frame" id="boardFrame">
+      <canvas id="board" width="${BOARD_PX}" height="${BOARD_PX}" aria-label="the 10x10 board"></canvas>
+      <canvas id="pov" width="${BOARD_PX}" height="${BOARD_PX}" aria-hidden="true"></canvas>
+      <div class="sprite-layer" id="spriteLayer"></div>
+      <div class="thread-tip" id="threadTip"></div>
+    </div>
+    <aside class="side" aria-label="Agents and chat">
+      <div class="hud">
+        <h2>agents</h2>
+        <div id="hud"></div>
+      </div>
+      <div class="chat">
+        <h2>tell the spider or the fly something</h2>
+        <div class="chatlog" id="chatlog" aria-live="polite"></div>
+        <form class="chatask" id="chatform">
+          <span class="prompt mono">tmct&gt;</span>
+          <input id="chatq" type="text" placeholder="@spider the fly is east" aria-label="Address the spider or the fly" disabled>
+        </form>
+      </div>
+    </aside>
+  </div>
+  <div class="controls-row">
+    <button id="resetBtn" type="button" disabled>reset</button>
+    <button id="playBtn" type="button" disabled>&#9654; play</button>
+    <button id="stepBtn" type="button" disabled>step</button>
+    <span class="turn mono" id="turnLabel">turn: 0</span>
+  </div>
+  <div class="status" id="status">loading the engine&hellip;</div>
+</main>
+<script>
+const SPIDERFLY = ${gridData};
+</script>
+<script src="./spider-fly-browser.bundle.js"></script>
+<script>
+(function () {
+  "use strict";
+  const createTicker = ${createTicker.toString()};
+  const classOfAgentId = ${classOfAgentId.toString()};
+  const threadCellsForSpiderPlan = ${threadCellsForSpiderPlan.toString()};
+  const esc = ${escapeHtml.toString()};
+  const el = (id) => document.getElementById(id);
+  const boardFrame = el("boardFrame");
+  const boardCanvas = el("board");
+  const povCanvas = el("pov");
+  const spriteLayer = el("spriteLayer");
+  const threadTip = el("threadTip");
+  const hudEl = el("hud");
+  const chatlogEl = el("chatlog");
+  const chatformEl = el("chatform");
+  const chatqEl = el("chatq");
+  const statusEl = el("status");
+  const turnLabelEl = el("turnLabel");
+  const resetBtn = el("resetBtn");
+  const playBtn = el("playBtn");
+  const stepBtn = el("stepBtn");
+
+  const params = new URLSearchParams(location.search);
+  const preview = params.get("preview") === "1";
+  document.body.classList.toggle("preview", preview);
+
+  const dpr = window.devicePixelRatio || 1;
+  const boardCtx = boardCanvas.getContext("2d");
+  const povCtx = povCanvas.getContext("2d");
+  function sizeCanvas(canvas, ctx) {
+    canvas.width = SPIDERFLY.boardPx * dpr;
+    canvas.height = SPIDERFLY.boardPx * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  sizeCanvas(boardCanvas, boardCtx);
+  sizeCanvas(povCanvas, povCtx);
+
+  const cssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+
+  // ---- board geometry ---------------------------------------------------
+  const cellSize = SPIDERFLY.boardPx / SPIDERFLY.gridSize;
+  function cellCenterPct(x, y) {
+    return { leftPct: ((x - 0.5) / SPIDERFLY.gridSize) * 100, topPct: ((y - 0.5) / SPIDERFLY.gridSize) * 100 };
+  }
+
+  // ---- state shared across redraws --------------------------------------
+  let session = null;
+  let lastAgents = {};
+  let lastTurn = 0;
+  const goalById = {};
+  const spriteEls = {};
+  let povAgentId = null;
+  let threadHits = [];
+
+  function removeStaleSprites(agents) {
+    for (const id of Object.keys(spriteEls)) {
+      if (!agents[id]) { spriteEls[id].remove(); delete spriteEls[id]; delete goalById[id]; }
+    }
+  }
+
+  function togglePov(id) {
+    povAgentId = povAgentId === id ? null : id;
+    if (!povAgentId) for (const node of Object.values(spriteEls)) node.classList.remove("dimmed");
+    drawPov();
+  }
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && povAgentId) togglePov(povAgentId);
+  });
+
+  function ensureSpriteEl(id, cls) {
+    let node = spriteEls[id];
+    if (node) return node;
+    node = document.createElement("div");
+    node.className = "sprite";
+    node.dataset.cls = cls;
+    const sprite = window.tmctSpiderFly
+      ? tmctSpiderFly.resolveSpriteForClass(cls, (session && session.taxonomyRows) || [], tmctSpiderFly.SPRITE_REGISTRY)
+      : "";
+    node.innerHTML = sprite;
+    if (!preview) {
+      node.tabIndex = 0;
+      node.setAttribute("role", "button");
+      node.setAttribute("aria-label", "show " + id + "\\u2019s point of view");
+      node.addEventListener("click", () => togglePov(id));
+      node.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); togglePov(id); }
+      });
+    }
+    spriteLayer.appendChild(node);
+    spriteEls[id] = node;
+    return node;
+  }
+
+  function applyAgents(agents) {
+    removeStaleSprites(agents);
+    for (const [id, a] of Object.entries(agents)) {
+      const cls = classOfAgentId(id);
+      const node = ensureSpriteEl(id, cls);
+      const parsed = tmctSpiderFly.parseCellId(a.cell);
+      if (!parsed) continue;
+      const pct = cellCenterPct(parsed.x, parsed.y);
+      node.style.left = pct.leftPct + "%";
+      node.style.top = pct.topPct + "%";
+      if (a.goal) goalById[id] = a.goal;
+    }
+    lastAgents = agents;
+  }
+
+  function renderHud() {
+    const ids = Object.keys(lastAgents).sort();
+    if (!ids.length) { hudEl.innerHTML = '<div class="hud-empty">no agents on the board.</div>'; return; }
+    hudEl.innerHTML = ids.map((id) => {
+      const cls = classOfAgentId(id);
+      return '<div class="hud-row"><span class="hud-id ' + esc(cls) + '">' + esc(id) + '</span>'
+        + '<span class="hud-goal">' + esc(goalById[id] || "watching\\u2026") + "</span></div>";
+    }).join("");
+  }
+
+  const threadGeometry = {
+    parseCellId: (id) => tmctSpiderFly.parseCellId(id),
+    cellId: (x, y) => tmctSpiderFly.cellId(x, y),
+    directionDelta: tmctSpiderFly.DIRECTION_DELTA,
+  };
+
+  function drawBoard(agents) {
+    const w = SPIDERFLY.boardPx, h = SPIDERFLY.boardPx;
+    boardCtx.clearRect(0, 0, w, h);
+    boardCtx.fillStyle = cssVar("--taught-soft") || "rgba(46,125,79,.12)";
+    for (const wc of SPIDERFLY.webCells) {
+      const p = tmctSpiderFly.parseCellId(wc);
+      boardCtx.fillRect((p.x - 1) * cellSize, (p.y - 1) * cellSize, cellSize, cellSize);
+    }
+    boardCtx.strokeStyle = cssVar("--line") || "#DDD9D0";
+    boardCtx.lineWidth = 1;
+    for (let i = 0; i <= SPIDERFLY.gridSize; i += 1) {
+      boardCtx.beginPath(); boardCtx.moveTo(i * cellSize, 0); boardCtx.lineTo(i * cellSize, h); boardCtx.stroke();
+      boardCtx.beginPath(); boardCtx.moveTo(0, i * cellSize); boardCtx.lineTo(w, i * cellSize); boardCtx.stroke();
+    }
+    threadHits = [];
+    const thread = threadCellsForSpiderPlan(agents, threadGeometry);
+    if (thread) {
+      boardCtx.strokeStyle = cssVar("--taught") || "#2E7D4F";
+      boardCtx.lineWidth = 2;
+      boardCtx.beginPath();
+      let prev = null;
+      thread.forEach((c, i) => {
+        const p = tmctSpiderFly.parseCellId(c);
+        const px = (p.x - 0.5) * cellSize, py = (p.y - 0.5) * cellSize;
+        if (i === 0) boardCtx.moveTo(px, py); else boardCtx.lineTo(px, py);
+        if (prev) threadHits.push({ x: (prev.x + px) / 2, y: (prev.y + py) / 2, step: i });
+        prev = { x: px, y: py };
+      });
+      boardCtx.stroke();
+    }
+  }
+
+  function drawPov() {
+    povCtx.clearRect(0, 0, SPIDERFLY.boardPx, SPIDERFLY.boardPx);
+    if (!povAgentId) return;
+    const agent = lastAgents[povAgentId];
+    if (!agent) { povAgentId = null; return; }
+    const p = tmctSpiderFly.parseCellId(agent.cell);
+    const visible = new Set(tmctSpiderFly.visibleCells(p.x, p.y, tmctSpiderFly.DEFAULT_VISION_RADIUS));
+    povCtx.fillStyle = "rgba(0,0,0,.55)";
+    for (let gy = 1; gy <= SPIDERFLY.gridSize; gy += 1) {
+      for (let gx = 1; gx <= SPIDERFLY.gridSize; gx += 1) {
+        if (visible.has(tmctSpiderFly.cellId(gx, gy))) continue;
+        povCtx.fillRect((gx - 1) * cellSize, (gy - 1) * cellSize, cellSize, cellSize);
+      }
+    }
+    for (const [id, node] of Object.entries(spriteEls)) {
+      const a = lastAgents[id];
+      node.classList.toggle("dimmed", id !== povAgentId && !!a && !visible.has(a.cell));
+    }
+  }
+
+  boardFrame.addEventListener("mousemove", (e) => {
+    if (!threadHits.length) { threadTip.style.display = "none"; return; }
+    const rect = boardFrame.getBoundingClientRect();
+    const scale = SPIDERFLY.boardPx / rect.width;
+    const mx = (e.clientX - rect.left) * scale, my = (e.clientY - rect.top) * scale;
+    const hit = threadHits.find((h) => (h.x - mx) ** 2 + (h.y - my) ** 2 <= 196);
+    if (!hit) { threadTip.style.display = "none"; return; }
+    threadTip.textContent = "step " + hit.step;
+    threadTip.style.left = ((hit.x / SPIDERFLY.boardPx) * 100) + "%";
+    threadTip.style.top = ((hit.y / SPIDERFLY.boardPx) * 100) + "%";
+    threadTip.style.display = "block";
+  });
+  boardFrame.addEventListener("mouseleave", () => { threadTip.style.display = "none"; });
+
+  function redraw(agents, turn) {
+    applyAgents(agents);
+    renderHud();
+    lastTurn = turn;
+    turnLabelEl.textContent = "turn: " + turn;
+    drawBoard(agents);
+    drawPov();
+  }
+
+  // ---- chat dock ---------------------------------------------------------
+  function addChatLine(cls, html) {
+    const d = document.createElement("div");
+    d.className = cls; d.innerHTML = html;
+    chatlogEl.appendChild(d); chatlogEl.scrollTop = chatlogEl.scrollHeight;
+  }
+  chatformEl.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const q = chatqEl.value.trim();
+    if (!q || !session) return;
+    chatqEl.value = "";
+    addChatLine("u", esc(q));
+    withLock(async () => {
+      const result = await session.turn(q);
+      addChatLine("a", esc(result.answer).replace(/\\n/g, "<br>"));
+      const snap = await session.snapshot();
+      redraw(snap.agents, snap.turn);
+    });
+  });
+
+  // ---- serialize every engine-touching call: the ticker and the chat dock
+  // share one in-memory store, and an overlapping tick()/turn() pair could
+  // race against the same @turnN write.
+  let lock = Promise.resolve();
+  function withLock(fn) {
+    const run = lock.then(fn, fn);
+    lock = run.catch(() => {});
+    return run;
+  }
+
+  async function boot() {
+    session = await tmctSpiderFly.createSpiderFlySession();
+    redraw(session.initial.agents, session.initial.turn);
+    statusEl.textContent = session.opening;
+    chatqEl.disabled = false;
+    resetBtn.disabled = false; playBtn.disabled = false; stepBtn.disabled = false;
+  }
+
+  let loopScheduled = false;
+  const ticker = createTicker({
+    onTick: () => withLock(async () => {
+      const result = await session.tick();
+      redraw(result.agents, result.turn);
+    }),
+    onRender: (state) => {
+      playBtn.textContent = state.playing ? "\\u23f8 pause" : "\\u25b6 play";
+      playBtn.disabled = state.animating;
+      stepBtn.disabled = state.animating || state.playing;
+      resetBtn.disabled = state.animating;
+      if (preview && !state.playing && !state.animating && lastTurn >= SPIDERFLY.previewMaxTurns && !loopScheduled) {
+        loopScheduled = true;
+        setTimeout(() => { loopScheduled = false; ticker.reset().then(() => ticker.play()); }, 1200);
+      }
+    },
+    onReset: () => withLock(boot),
+    hasNext: () => !preview || lastTurn < SPIDERFLY.previewMaxTurns,
+    waitMs: SPIDERFLY.tickWaitMs,
+  });
+  playBtn.addEventListener("click", () => ticker.play());
+  stepBtn.addEventListener("click", () => ticker.stepOnce());
+  resetBtn.addEventListener("click", () => ticker.reset());
+
+  boot().then(() => { if (preview) ticker.play(); });
+
+  new MutationObserver(() => { drawBoard(lastAgents); drawPov(); })
+    .observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+  if (window.matchMedia) {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => { drawBoard(lastAgents); drawPov(); });
+  }
+})();
+</script>
+</body>
+</html>
+`;
+}