@polycode-projects/the-mechanical-code-talker 5.0.5 → 5.0.7

package/src/services/mudiii-viz.mjs

@@ -1,5 +1,5 @@
-// mudiii-viz.mjs — mudiii.html: the one-player town-square demo PLAN_MUD_MUDIII.md
-// describes, over a real three.js scene rather than mud.html's canvas-drawn
+// mudiii-viz.mjs — mudiii.html: the one-player town-square demo, over a real
+// three.js scene rather than mud.html's canvas-drawn
 // room boxes. mud.html's whole control deck carries over unchanged (same
 // ids, same ranges, same defaults — see MUDIII_STYLE and renderMudiiiHtml's
 // own header below for the two sliders' new labels); what mudiii adds is a
@@ -8,13 +8,10 @@
 // mud.html's burrow survey.
 //
 // This module owns the PAGE SHELL only. The 3D scene itself — the actual
-// three.js renderer, the model loader, the per-frame camera update — is a
-// concurrent track's file, src/services/mudiii-scene.mjs, reached through
-// exactly one frozen function: `mudiiiSceneScript(opts) -> string`, a
-// standalone inline <script> this page embeds next to its own. That module
-// does not exist in every worktree yet (see the guarded import below), so
-// this file also ships a "" stub until it lands — no edit needed here when
-// it does.
+// three.js renderer, the model loader, the per-frame camera update — lives in
+// src/services/mudiii-scene.mjs, reached through exactly one frozen function:
+// `mudiiiSceneScript(opts) -> string`, a standalone inline <script> this page
+// embeds next to its own.
 //
 // The contract runs both ways. Scene -> shell: the scene script calls
 // `window.mudiiiHandleSceneClick(cellId)` on a raycast hit. Shell -> scene:
@@ -26,46 +23,41 @@
 // the map panel, the HUD, the deck or the chat down with it.
 //
 // Deliberately absent, all P2P (mud.html's #statePill, share/join buttons,
-// the share overlay, the wave button, the compass ring): this is the
-// 1-player page. A later document adds sharing back from the same bundle.
+// the share overlay, the wave button): this is the 1-player page. A later
+// document adds sharing back from the same bundle.
 //
-// Two corrections applied against PLAN_MUD_MUDIII.md's own text (see
-// AGENTS.md/the dispatch brief this track was built from): the page
-// publishes through the ONE `globalThis.tmct` surface (tmct-surface.mjs),
-// never a page-scoped `tmctMudiii` bag; and `createTicker`/`createSerialQueue`
-// are spliced into the page script from viz-ticker.mjs, not carried by the
-// browser entry.
+// The page publishes through the ONE `globalThis.tmct` surface
+// (tmct-surface.mjs), never a page-scoped bag of its own, and
+// `createTicker`/`createSerialQueue` are spliced into the page script from
+// viz-ticker.mjs rather than carried by the browser entry.
 //
-// A THIRD correction, found while wiring the deck's own play control: the
-// brief's "one createTicker per agent" does not fit the engine contract it
-// was written against. `runPredatorPreyTick(memoryDir, opts)` returns
+// One ticker drives the whole world, not one per agent:
+// `runPredatorPreyTick(memoryDir, opts)` returns
 // `{ turn, agents, items, ecology }` for the WHOLE WORLD in one call — it has
 // no per-character entry point the way mud-turn.mjs's `runMudTurn(character,
 // ...)` does, so there is nothing for a second or third ticker to drive that
 // the first one has not already advanced. This page runs ONE shared ticker
 // for the whole simulation, serialized through the same createSerialQueue
-// mud.html uses for its own multi-pane writes; every HUD card still reads
-// its own agent's slice of the one tick result, which is what "per agent"
-// was actually asking for.
+// mud.html uses for its own multi-pane writes; every HUD card reads its own
+// agent's slice of the one tick result.
 import {
   THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson, embedScriptText, scenarioLabel,
-  rowsForWorld, appendLogLine,
+  rowsForWorld, appendLogLine, wordBeforeCursor, demoEyebrowHtml, EYEBROW_LINKS_CSS,
 } from "./viz-theme.mjs";
-import { createTicker, createSerialQueue } from "./viz-ticker.mjs";
+import { createTicker, createSerialQueue, prefersReducedMotion } from "./viz-ticker.mjs";
 import { renderMudEditorText, gridWorldEditorState } from "./mud-editor.mjs";
 import {
   pillCandidates, matchPills, pillCompleteMarkup, createPillComplete, PILL_COMPLETE_CSS,
 } from "./pill-complete.mjs";
 import { DEFAULT_GAME_CONFIG } from "../domain/game-config.mjs";
+import { DEFAULT_FACING, DEFAULT_GRID_SIZE } from "../domain/town-square-world.mjs";
+import { believedFactSentence } from "./mudiii-turn.mjs";
 
 // The scene module and this one import each other: this file embeds the
 // scene's generated IIFE, and the scene splices this file's pure geometry
-// helpers into it. A static cycle is fine here because every binding crossing
-// it is a hoisted function declaration that nothing calls at module-evaluation
-// time — the same shape world-teach.mjs and adventure.mjs already rely on. It
-// must NOT be a top-level `await import()`: two modules awaiting each other at
-// evaluation time never settle, and the failure is a silent hang rather than
-// an error.
+// helpers into it. The cycle holds because every binding crossing it is a
+// hoisted function declaration that nothing calls at module-evaluation time —
+// the same shape world-teach.mjs and adventure.mjs already rely on.
 import { mudiiiSceneScript } from "./mudiii-scene.mjs";
 
 const DEFAULT_TITLE = "tmct — mudiii";
@@ -84,11 +76,27 @@ const NPC_COUNT_LABELLED = [1, 5, 10];
 const DEFAULT_NPC_COUNT = 2;
 const DEFAULT_DELAY_MS = 220;
 const DEFAULT_MAX_TURNS = 400;
-// test/fixtures/mudiii-ticks.json's own board size — the fallback for a
-// scenario that names no gridSize of its own.
-const DEFAULT_GRID_SIZE = 12;
-const DEFAULT_FACING = "south";
 const CAMERA_MODES = ["follow", "pov", "overhead"];
+// Every export below except renderMudiiiHtml is spliced by `.toString()` into
+// a generated script that shares no scope with this module, so none of them
+// may read a binding declared up here. mudiii-viz.test.mjs holds the line.
+// The ring reads ABSOLUTE, not relative to whichever way an agent happens to
+// face: every other direction word on this page is a compass point (a told
+// fact says "the goblin is east", the map is north-up), and driveRequest takes
+// a compass point directly — a cardinal steps and faces that way, an
+// intercardinal turns on the spot. Ordered north-first, clockwise.
+const RING_POINTS = [
+  "north", "northeast", "east", "southeast", "south", "southwest", "west", "northwest",
+];
+// mud.html's own glyph vocabulary, widened to the four diagonals. The reading
+// differs from mud's: its ring lights every available exit, because a room has
+// a fixed handful. An open grid grants a step almost everywhere, so lighting
+// what is available would light nearly all of it and say nothing. The one lit
+// glyph here is the followed agent's own facing.
+const DIR_GLYPH = Object.freeze({
+  north: "▲ N", northeast: "↗", east: "E ▶", southeast: "↘",
+  south: "▼ S", southwest: "↙", west: "◀ W", northwest: "↖",
+});
 
 const MUDIII_NOTE_LINES = [
   "One fox and a handful of goblins share a town square, rendered in three dimensions rather than mud.html's flat rooms. The foxes slider picks how many predators are cast; the goblins slider adds more prey. Nothing here is a player either — you watch from whichever camera you pick.",
@@ -209,6 +217,48 @@ export function occupiedCells(agents, items) {
   return cells;
 }
 
+/** Who and what stands where right now, as `{ subject, cell }[]` sorted by
+ *  subject — the edit panel's own read of a fact list that carries the whole
+ *  tape rather than a board.
+ *
+ *  The engine stamps each turn's placement row `<id>@turn<N>`, or
+ *  `<id>@epoch<E>@turn<N>` once a reset has moved the epoch on, so a raw
+ *  `mgx:currently-in` sweep returns one row per agent per turn played. This
+ *  folds them to the latest row per base subject by `(epoch, turn)`, the same
+ *  order the engine's own fold ranks by. A bare subject is the world's
+ *  authored placement — every prop is one — and ranks below any stamped row
+ *  for the same base rather than competing with it.
+ *
+ *  Anything carrying `mgx:eaten-by` or `mgx:starved` is dropped: it stood
+ *  somewhere once, and the panel is asked where things stand now. Pure,
+ *  self-contained. */
+export function currentPlacementsFrom(rows) {
+  const STAMP = /^(.*?)(?:@epoch(\d+))?@turn(\d+)$/;
+  const latest = new Map();
+  const gone = new Set();
+  for (const row of rows || []) {
+    if (!row || !row.subject) continue;
+    const match = STAMP.exec(String(row.subject));
+    const base = match ? match[1] : String(row.subject);
+    if (row.predicate === "mgx:eaten-by" || row.predicate === "mgx:starved") {
+      gone.add(base);
+      continue;
+    }
+    if (row.predicate !== "mgx:currently-in") continue;
+    const epoch = match ? Number(match[2] || 0) : -1;
+    const turn = match ? Number(match[3]) : -1;
+    const prior = latest.get(base);
+    if (prior && (prior.epoch > epoch || (prior.epoch === epoch && prior.turn > turn))) continue;
+    latest.set(base, { epoch, turn, cell: row.object });
+  }
+  const placements = [];
+  for (const [subject, entry] of latest) {
+    if (!gone.has(subject)) placements.push({ subject, cell: entry.cell });
+  }
+  placements.sort((a, b) => a.subject.localeCompare(b.subject));
+  return placements;
+}
+
 /** Why a click-to-move or a food placement on `cell` would be refused, or
  *  null when it is clear — `"cell-4-3 is blocked"`, worded once so both the
  *  3D raycast click and a typed "go there" chat verb read the same refusal.
@@ -234,16 +284,40 @@ export function blockedCellReason(cell, props, agents) {
  *  `cellToWorld` does.
  *
  *  "overhead" ignores `agent` entirely and looks straight down at the
- *  board's own centre. "follow" sits back and above the agent's cell, offset
- *  opposite its facing, looking at the agent. "pov" sits AT the agent's cell
- *  at eye height, looking the way it is facing. Returns null when a
- *  non-overhead mode is asked for with no agent (or an agent standing on no
- *  cell) to rig against. Pure, self-contained — calls `cellToWorld` by bare
- *  name, spliced alongside it. */
-export function cameraRigFor(mode, agent, gridSize) {
+ *  board's own centre, high enough that the whole board fits the canvas
+ *  `view` describes (`{ aspect, fovDegrees }`, the live camera's own two
+ *  numbers). "follow" sits back and above the agent's cell, offset opposite
+ *  its facing, looking at the agent. "pov" sits AT the agent's cell at eye
+ *  height, looking the way it is facing. Returns null when a non-overhead
+ *  mode is asked for with no agent (or an agent standing on no cell) to rig
+ *  against. Pure, self-contained — calls `cellToWorld` by bare name, spliced
+ *  alongside it. */
+export function cameraRigFor(mode, agent, gridSize, view) {
   const cellSize = 1;
+  // Every fallback here is written out rather than read from this module's own
+  // constants: the browser runs a `.toString()` copy of this function in a
+  // script that declares none of them, and the drive ring's diagonals set
+  // exactly the intercardinal facing that reaches the facing one.
+  const FALLBACK_GRID_SIZE = 12;
   if (mode === "overhead") {
-    const height = Math.max(4, Number(gridSize) || DEFAULT_GRID_SIZE) * 1.4;
+    const FALLBACK_FOV_DEGREES = 55;
+    // Looking straight down pushes the TOP of a standing model outward from
+    // the centre of frame, so a fit measured on the flat ground plane alone
+    // cuts the head off whoever stands in an outermost cell. This is the room
+    // the tallest of the cast needs out there, counting the id label floating
+    // above it, which is the part a visitor most needs to read. Props run
+    // taller still and are allowed to overhang.
+    const EDGE_ROOM = 1.2;
+    const board = Math.max(4, Number(gridSize) || FALLBACK_GRID_SIZE) * cellSize;
+    const fovDegrees = Number(view && view.fovDegrees) > 0 ? Number(view.fovDegrees) : FALLBACK_FOV_DEGREES;
+    const aspect = Number(view && view.aspect) > 0 ? Number(view.aspect) : 1;
+    const tanHalfVertical = Math.tan((Math.min(fovDegrees, 175) * Math.PI) / 360);
+    const tanHalfHorizontal = tanHalfVertical * aspect;
+    // Fit the TIGHTER axis. A wide canvas runs out of height first, a tall one
+    // runs out of width, and taking the larger of the two distances is what
+    // stops a portrait window cropping the board's own left and right edges.
+    const fitsBothAxes = Math.max(1 / tanHalfVertical, 1 / tanHalfHorizontal);
+    const height = (board / 2) * EDGE_ROOM * fitsBothAxes;
     return { mode: "overhead", position: { x: 0, y: height, z: 0 }, lookAt: { x: 0, y: 0, z: 0 } };
   }
   if (!agent || !agent.cell) return null;
@@ -252,7 +326,7 @@ export function cameraRigFor(mode, agent, gridSize) {
   const FACING_VECTOR = {
     north: { x: 0, z: -1 }, south: { x: 0, z: 1 }, east: { x: 1, z: 0 }, west: { x: -1, z: 0 },
   };
-  const dir = FACING_VECTOR[agent.facing] || FACING_VECTOR[DEFAULT_FACING];
+  const dir = FACING_VECTOR[agent.facing] || FACING_VECTOR.south;
   if (mode === "pov") {
     return {
       mode: "pov",
@@ -308,6 +382,28 @@ export function nextCameraSelection(prev, agents, ecology) {
   };
 }
 
+/** What one press on a camera-mode button should do, as
+ *  `{ mode, selectedId, status }`.
+ *
+ *  `overhead` needs nobody and keeps whatever was selected, so switching back
+ *  to `follow` resumes the same agent. The other two need one, and after a
+ *  fallback there is none: the agent that was followed has been eaten and the
+ *  selection was cleared. The dropdown, meanwhile, still lists the survivors
+ *  and shows its first one, so a press that did nothing left the deck naming
+ *  an agent the camera was not on. `offered` is that dropdown value, and a
+ *  press adopts it when it is still live.
+ *
+ *  With nobody left to adopt the press stays overhead and says why, rather
+ *  than lighting a button over a camera that did not move. `liveIds` is this
+ *  turn's roster. Pure, self-contained. */
+export function cameraSelectionForMode(mode, selectedId, offered, liveIds) {
+  const live = liveIds || [];
+  if (mode === "overhead") return { mode: "overhead", selectedId: selectedId || null, status: null };
+  if (selectedId && live.indexOf(selectedId) !== -1) return { mode, selectedId, status: null };
+  if (offered && live.indexOf(offered) !== -1) return { mode, selectedId: offered, status: null };
+  return { mode: "overhead", selectedId: null, status: "nobody left to follow — staying overhead." };
+}
+
 /** Every agent and item's own dot for the 2D top-down map panel, as
  *  percentage coordinates within a square panel (`{ id, kind, xPct, yPct
  *  }[]`) — never pixel values, so the panel's own CSS controls its actual
@@ -336,6 +432,30 @@ export function mapDotsFor(agents, items, gridSize) {
   return dots;
 }
 
+/** Every static prop's own filled cell for the 2D map panel, as percentage
+ *  coordinates within the same square board `mapDotsFor` draws into
+ *  (`{ id, xPct, yPct, sizePct }[]`). `props` is `propPlacementsFrom`'s own
+ *  output. A block is drawn from the cell's own top-left corner and fills it,
+ *  so the offset is `- 1` where `mapDotsFor`'s dot, centred on the cell, takes
+ *  `- 0.5`. A placement with no parseable cell is dropped rather than drawn at
+ *  a guessed position. Pure, self-contained. */
+export function mapBlocksFor(props, gridSize) {
+  const size = Number(gridSize);
+  if (!Number.isFinite(size) || size <= 0) return [];
+  const blocks = [];
+  for (const prop of props || []) {
+    const match = /^cell-(\d+)-(\d+)$/.exec(String(prop && prop.cell != null ? prop.cell : ""));
+    if (!match) continue;
+    blocks.push({
+      id: prop.id,
+      xPct: ((Number(match[1]) - 1) / size) * 100,
+      yPct: ((Number(match[2]) - 1) / size) * 100,
+      sizePct: 100 / size,
+    });
+  }
+  return blocks;
+}
+
 /** One HUD card's own field set, read off `agent` (`{ id, role, goal, mood,
  *  plan, mass, belief }`, this turn's slice of the tick payload) and a
  *  resolved `mudiiiConfig` (DEFAULT_GAME_CONFIG.mudiii's own shape). `massPct`
@@ -381,6 +501,7 @@ export function clipForAction(role, action, clipMap) {
   const kindFor = {
     wander: "walk",
     forage: "walk",
+    driven: "walk",
     chase: "run",
     evade: "run",
     "eat-agent": role === "predator" ? "attack" : "death",
@@ -412,7 +533,11 @@ export function agentCardMarkup(slot) {
       <div class="hud-meter" id="${w}-meter"><div class="hud-meter-fill" id="${w}-meter-fill"></div></div>
       <p class="hud-goal" id="${w}-goal"></p>
       <p class="hud-plan mono" id="${w}-plan"></p>
-      <p class="hud-belief mono" id="${w}-belief"></p>
+      <button type="button" class="hud-belief-toggle" id="${w}-belief-toggle"
+              aria-expanded="false" aria-controls="${w}-detail" hidden>
+        <span class="hud-belief mono" id="${w}-belief"></span>
+      </button>
+      <div class="hud-detail mono" id="${w}-detail" hidden></div>
     </div>`;
 }
 
@@ -481,7 +606,7 @@ ${PILL_COMPLETE_CSS}
 <body>
 <main>
   <header class="mudiii-topbar">
-    <h1 class="eyebrow">tmct &middot; mudiii</h1>
+    <h1 class="eyebrow">${demoEyebrowHtml("mudiii", "mudiii")}</h1>
     <a class="mudiii-topbar-help" href="./help.html" target="_blank" rel="noopener"
        title="how this demo works, in a new tab" aria-label="how this demo works, opens in a new tab">?</a>
   </header>
@@ -489,6 +614,8 @@ ${PILL_COMPLETE_CSS}
     <section class="deck" aria-label="simulation controls">
       <div class="deck-controls">
         <button type="button" class="deck-play" id="autoToggle" aria-pressed="false">&#9654; play</button>
+        <button type="button" id="stepBtn">step</button>
+        <span class="deck-hint" id="stepHint" hidden>pause to step</span>
         <button type="button" id="resetBtn">reset</button>
 ${scenarioList.length > 1 ? `        <select id="scenarioSelect" class="deck-select" aria-label="which town square to play">
 ${scenarioList.map((s, i) => `          <option value="${i}"${i === 0 ? " selected" : ""}>${escapeHtml(s.label || scenarioLabel(s.worldPayload?.name))}</option>`).join("\n")}
@@ -498,32 +625,55 @@ ${scenarioList.map((s, i) => `          <option value="${i}"${i === 0 ? " select
         <span class="mono deck-turns" id="globalTurnCount">turns: 0</span>
       </div>
       <div class="deck-body">
-        <div class="deck-sliders">
-          <label class="deck-slider">foxes
-            <input type="range" id="playerCountSlider" min="0" max="${PLAYER_COUNTS.length - 1}" step="1"
-                   value="${Math.max(0, PLAYER_COUNTS.indexOf(DEFAULT_PLAYER_COUNT))}"
-                   list="playerCountTicks" aria-valuetext="${DEFAULT_PLAYER_COUNT} foxes">
-            <datalist id="playerCountTicks">${PLAYER_COUNTS.map((n, i) => `<option value="${i}" label="${n}"></option>`).join("")}</datalist>
-            <span class="mono" id="playerCountValue">${DEFAULT_PLAYER_COUNT}</span>
-          </label>
-          <label class="deck-slider">goblins
-            <input type="range" id="npcCountSlider" min="${NPC_COUNT_MIN}" max="${NPC_COUNT_MAX}" step="1"
-                   value="${DEFAULT_NPC_COUNT}"
-                   list="npcCountTicks" aria-valuetext="${DEFAULT_NPC_COUNT} goblins">
-            <datalist id="npcCountTicks">${Array.from({ length: NPC_COUNT_MAX - NPC_COUNT_MIN + 1 }, (_, i) => {
-              const n = NPC_COUNT_MIN + i;
-              return NPC_COUNT_LABELLED.includes(n) ? `<option value="${n}" label="${n}"></option>` : `<option value="${n}"></option>`;
-            }).join("")}</datalist>
-            <span class="mono" id="npcCountValue">${DEFAULT_NPC_COUNT}</span>
-          </label>
-          <label class="deck-slider">delay
-            <input type="range" id="delaySlider" min="80" max="2000" step="20" value="${DEFAULT_DELAY_MS}">
-            <span class="mono" id="delayValue">${DEFAULT_DELAY_MS}ms</span>
-          </label>
-          <label class="deck-slider">max turns
-            <input type="range" id="maxTurnsSlider" min="20" max="2000" step="20" value="${DEFAULT_MAX_TURNS}">
-            <span class="mono" id="maxTurnsValue">${DEFAULT_MAX_TURNS}</span>
-          </label>
+        <div class="deck-panels">
+          <div class="deck-stack deck-stack-1">
+            <label class="deck-slider">foxes
+              <input type="range" id="playerCountSlider" min="0" max="${PLAYER_COUNTS.length - 1}" step="1"
+                     value="${Math.max(0, PLAYER_COUNTS.indexOf(DEFAULT_PLAYER_COUNT))}"
+                     list="playerCountTicks" aria-valuetext="${DEFAULT_PLAYER_COUNT} foxes">
+              <datalist id="playerCountTicks">${PLAYER_COUNTS.map((n, i) => `<option value="${i}" label="${n}"></option>`).join("")}</datalist>
+              <span class="mono" id="playerCountValue">${DEFAULT_PLAYER_COUNT}</span>
+            </label>
+            <label class="deck-slider">goblins
+              <input type="range" id="npcCountSlider" min="${NPC_COUNT_MIN}" max="${NPC_COUNT_MAX}" step="1"
+                     value="${DEFAULT_NPC_COUNT}"
+                     list="npcCountTicks" aria-valuetext="${DEFAULT_NPC_COUNT} goblins">
+              <datalist id="npcCountTicks">${Array.from({ length: NPC_COUNT_MAX - NPC_COUNT_MIN + 1 }, (_, i) => {
+                const n = NPC_COUNT_MIN + i;
+                return NPC_COUNT_LABELLED.includes(n) ? `<option value="${n}" label="${n}"></option>` : `<option value="${n}"></option>`;
+              }).join("")}</datalist>
+              <span class="mono" id="npcCountValue">${DEFAULT_NPC_COUNT}</span>
+            </label>
+            <label class="deck-slider">follow
+              <select id="agentSelect" class="deck-select" aria-label="which agent to follow"
+                      aria-describedby="agentSelectHint">
+${openingAgents.map((a) => `                <option value="${escapeHtml(a.id)}">${escapeHtml(a.id)}</option>`).join("\n")}
+              </select>
+            </label>
+            <span class="deck-hint" id="agentSelectHint" hidden>pause to swap</span>
+          </div>
+          <div class="deck-stack deck-stack-2">
+            <label class="deck-slider">delay
+              <input type="range" id="delaySlider" min="80" max="2000" step="20" value="${DEFAULT_DELAY_MS}">
+              <span class="mono" id="delayValue">${DEFAULT_DELAY_MS}ms</span>
+            </label>
+            <label class="deck-slider">max turns
+              <input type="range" id="maxTurnsSlider" min="20" max="2000" step="20" value="${DEFAULT_MAX_TURNS}">
+              <span class="mono" id="maxTurnsValue">${DEFAULT_MAX_TURNS}</span>
+            </label>
+            <div class="camera-mode" id="cameraMode" role="group" aria-label="camera mode">
+              <button type="button" data-mode="follow" aria-pressed="true">follow</button>
+              <button type="button" data-mode="pov" aria-pressed="false">pov</button>
+              <button type="button" data-mode="overhead" aria-pressed="false">overhead</button>
+            </div>
+          </div>
+          <div class="deck-stack deck-stack-3">
+            <button type="button" class="pill affordance" id="foodPill" data-command="place food" aria-pressed="false">place food</button>
+            <label class="deck-teach" title="With this on, a sentence like &quot;The fox is at cell-3-4.&quot; writes a fact into the square instead of running as a command.">
+              <input type="checkbox" id="teachToggle">
+              teach
+            </label>
+          </div>
         </div>
         <section class="map-panel" id="mapPanel" aria-label="the town square, from above">
           <div class="map-panel-head">
@@ -531,21 +681,14 @@ ${scenarioList.map((s, i) => `          <option value="${i}"${i === 0 ? " select
             <span class="mono map-panel-turn" id="mapPanelTurn">turn 0</span>
           </div>
           <div class="map-panel-board" id="mapPanelBoard"></div>
+          <div class="map-legend">
+            <span class="map-key"><i class="map-swatch map-swatch-predator"></i>predator</span>
+            <span class="map-key"><i class="map-swatch map-swatch-prey"></i>prey</span>
+            <span class="map-key"><i class="map-swatch map-swatch-food"></i>food</span>
+            <span class="map-key"><i class="map-swatch map-swatch-prop"></i>building</span>
+          </div>
         </section>
       </div>
-      <div class="deck-camera">
-        <label class="deck-slider">follow
-          <select id="agentSelect" class="deck-select" aria-label="which agent to follow">
-${openingAgents.map((a) => `            <option value="${escapeHtml(a.id)}">${escapeHtml(a.id)}</option>`).join("\n")}
-          </select>
-        </label>
-        <div class="camera-mode" id="cameraMode" role="group" aria-label="camera mode">
-          <button type="button" data-mode="follow" aria-pressed="true">follow</button>
-          <button type="button" data-mode="pov" aria-pressed="false">pov</button>
-          <button type="button" data-mode="overhead" aria-pressed="false">overhead</button>
-        </div>
-        <button type="button" class="pill affordance" id="foodPill" data-command="place food" aria-pressed="false">place food</button>
-      </div>
       <div class="deck-info-popup mudiii-note" id="deckInfoPopup" role="dialog" aria-label="about this demo" hidden>
         ${MUDIII_NOTE_LINES.map((line) => `<p>${escapeHtml(line)}</p>`).join("\n        ")}
         <button type="button" class="deck-info-popup-close" id="deckInfoClose" aria-label="close">&times;</button>
@@ -554,9 +697,11 @@ ${openingAgents.map((a) => `            <option value="${escapeHtml(a.id)}">${es
   </div>
   <section class="scene-stage" id="sceneStage" aria-label="the town square, in three dimensions">
     <canvas id="sceneCanvas"></canvas>
+    <div class="dir-ring" id="driveRing" role="group" aria-label="walk the agent the camera follows" hidden>
+${RING_POINTS.map((point) => `      <span class="dir-slot dir-${point}"><button type="button" class="dir-pill" data-drive="${point}" title="walk ${point}" aria-label="walk ${point}" aria-pressed="false">${escapeHtml(DIR_GLYPH[point])}</button></span>`).join("\n")}
+    </div>
     <p class="scene-status" id="sceneStatus" role="status"></p>
   </section>
-  <div class="hud-row" id="hudRow" aria-label="every agent's own status"></div>
   <div class="edit-stage" id="mudiiiEditStage" aria-label="the square's own facts, in plain sentences">
     <section class="edit-text" aria-label="the world's facts as editable sentences">
       <h2>the square, in plain sentences</h2>
@@ -586,11 +731,12 @@ ${openingAgents.map((a) => `            <option value="${escapeHtml(a.id)}">${es
         <span class="prompt mono">tmct&gt;</span>
         ${pillCompleteMarkup({
           inputId: "chatInput",
-          inputHtml: '<input id="chatInput" type="text" placeholder="@fox-1 look" aria-label="type a command" disabled>',
+          inputHtml: '<input id="chatInput" type="text" placeholder="@fox the goblin is east" aria-label="type a command" disabled>',
         })}
       </form>
     </div>
   </section>
+  <div class="hud-row" id="hudRow" aria-label="every agent's own status"></div>
 </main>
 <script>
 const MUDIII_PAGE_DATA = ${pageData};
@@ -617,6 +763,7 @@ const MUDIII_STYLE = `
   .mono { font-family: ${MONO_STACK}; }
   main { max-width: 1280px; margin: 0 auto; padding: 1.1rem 1.2rem 2.4rem; }
   .eyebrow { font-family: ${MONO_STACK}; font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--square-ink); opacity: .85; margin: 0; }
+  ${EYEBROW_LINKS_CSS}
   h2 { font-family: ${DISPLAY_STACK}; font-size: 1rem; margin: 0; }
   h3 { font-family: ${MONO_STACK}; font-size: .58rem; margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .12em; color: var(--square-stone-dark); }
   button { font: inherit; color: inherit; background: none; cursor: pointer; }
@@ -637,7 +784,7 @@ const MUDIII_STYLE = `
     box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
     padding: .8rem .9rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0;
   }
-  .deck-controls, .deck-camera { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+  .deck-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
   .deck-info-btn {
     font-family: ${MONO_STACK}; font-size: .78rem; line-height: 1; width: 1.5rem; height: 1.5rem;
     border-radius: 50%; border: 1px solid var(--square-stone-dark); background: rgba(255,255,255,.5);
@@ -653,16 +800,34 @@ const MUDIII_STYLE = `
     font-family: ${MONO_STACK}; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
     padding: .32rem .7rem; border: 1px solid var(--square-stone-dark); border-radius: 3px;
     background: rgba(255,255,255,.5); color: var(--square-ink);
+    /* A select is as wide as its longest option, and a square's label runs to
+       "town square (12x12, 1 fox, 3 goblins)" — on a phone that alone made the
+       whole page scroll sideways. */
+    min-width: 0; max-width: 100%;
   }
+  #scenarioSelect { flex: 1 1 9rem; }
   .deck-select:hover { border-color: var(--square-accent); }
+  .deck-select:disabled { opacity: .45; cursor: default; }
+  .deck-select:disabled:hover { border-color: var(--square-stone-dark); }
+  .deck-hint { font-family: ${MONO_STACK}; font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--square-stone-dark); }
+  .deck-hint[hidden] { display: none; }
   .deck-play { background: var(--square-ink) !important; color: var(--parchment); border-color: var(--square-ink) !important; padding: .38rem 1.1rem !important; }
   .deck-play[aria-pressed="true"] { background: var(--square-accent) !important; border-color: var(--square-accent) !important; color: var(--square-ink); }
   .deck-turns { margin-left: auto; font-size: .74rem; color: var(--square-stone-dark); background: var(--square-stone-dark); background: rgba(43,35,24,.9); color: var(--square-accent); border-radius: 2px; padding: .1rem .5rem; }
   .deck-body { display: flex; gap: .7rem; align-items: flex-start; }
-  .deck-sliders { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1 1 auto; min-width: 0; }
+  .deck-panels { display: flex; flex-wrap: wrap; gap: .6rem 1rem; flex: 1 1 auto; min-width: 0; }
+  /* On a narrow viewport a stack is just a grouping label, not a real box:
+     its controls flow straight into .deck-panels' own wrap, one per row
+     beside the map. Wider breakpoints turn it back into a real column. */
+  .deck-stack { display: contents; }
   .deck-slider { display: flex; align-items: center; gap: .35rem; font-family: ${MONO_STACK}; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--square-stone-dark); min-width: 0; }
   .deck-slider input[type="range"] { accent-color: var(--square-accent); flex: 1 1 4rem; min-width: 2.5rem; width: auto; max-width: 8rem; }
-  .camera-mode { display: inline-flex; gap: .25rem; }
+  .deck-teach { display: flex; align-items: center; gap: .3rem; font-family: ${MONO_STACK}; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--square-stone-dark); cursor: pointer; }
+  .deck-teach input[type="checkbox"] { accent-color: var(--square-accent); }
+  /* A narrow stack column can be too tight for all three button labels on
+     one line, and a nowrap row would rather overflow into the next column
+     than shrink — wrap keeps it inside its own box. */
+  .camera-mode { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
   .camera-mode button[aria-pressed="true"] { background: var(--square-accent); border-color: var(--square-accent); color: var(--square-ink); }
   .deck-info-popup {
     position: absolute; left: .9rem; right: .9rem; top: calc(100% + 8px); z-index: 8;
@@ -688,11 +853,35 @@ const MUDIII_STYLE = `
   .map-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
   .map-panel-title { font-family: ${MONO_STACK}; font-size: .54rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
   .map-panel-turn { font-size: .58rem; opacity: .7; }
-  .map-panel-board { position: relative; flex: 1; min-height: 110px; aspect-ratio: 1; background: rgba(124,154,91,.25); border: 1px solid rgba(233,217,182,.35); border-radius: 3px; }
+  .map-panel-board {
+    position: relative; flex: 1; min-height: 110px; aspect-ratio: 1;
+    --map-cell-pct: 8.3333%;
+    background-color: rgba(124,154,91,.25);
+    background-image:
+      repeating-linear-gradient(90deg, rgba(233,217,182,.22) 0 1px, transparent 1px var(--map-cell-pct)),
+      repeating-linear-gradient(180deg, rgba(233,217,182,.22) 0 1px, transparent 1px var(--map-cell-pct));
+    border: 1px solid rgba(233,217,182,.35); border-radius: 3px;
+  }
+  .map-block { position: absolute; box-sizing: border-box; background: rgba(89,80,63,.9); border: 1px solid rgba(0,0,0,.35); border-radius: 1px; }
   .map-dot { position: absolute; width: .55rem; height: .55rem; margin: -.28rem 0 0 -.28rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.4); }
   .map-dot-predator { background: var(--square-predator); }
   .map-dot-prey { background: var(--square-prey); }
   .map-dot-crumb, .map-dot-morsel, .map-dot-item { background: var(--square-accent); width: .34rem; height: .34rem; margin: -.17rem 0 0 -.17rem; }
+  .map-label {
+    position: absolute; margin: -.66rem 0 0 .26rem; font-size: .44rem; line-height: 1; letter-spacing: .02em;
+    color: var(--parchment); text-shadow: 0 1px 2px rgba(0,0,0,.85); white-space: nowrap; pointer-events: none;
+  }
+  .map-label-left { margin-left: -.3rem; transform: translateX(-100%); }
+  /* Plain inline-block swatches, never .map-dot: that class is absolutely
+     positioned with a centring margin, so a legend reusing it would position
+     against the board and disappear. */
+  .map-legend { display: flex; flex-wrap: wrap; gap: .12rem .5rem; font-family: ${MONO_STACK}; font-size: .5rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
+  .map-key { display: inline-flex; align-items: center; gap: .24rem; }
+  .map-swatch { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.4); }
+  .map-swatch-predator { background: var(--square-predator); }
+  .map-swatch-prey { background: var(--square-prey); }
+  .map-swatch-food { background: var(--square-accent); }
+  .map-swatch-prop { background: rgba(89,80,63,.9); border-radius: 1px; }
 
   .scene-stage { position: relative; margin-bottom: 1rem; border: 1px solid var(--square-stone-dark); border-radius: 4px; overflow: hidden; background: #10161B; min-height: 360px; }
   .scene-stage canvas { display: block; width: 100%; height: 360px; }
@@ -703,7 +892,31 @@ const MUDIII_STYLE = `
   }
   .scene-status:empty { display: none; }
 
-  .hud-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
+  /* Each press sits where it points, mud.html's own ring idiom. */
+  .dir-ring { position: absolute; inset: .3rem; pointer-events: none; }
+  .dir-ring[hidden] { display: none; }
+  .dir-slot { position: absolute; pointer-events: auto; }
+  .dir-north { top: 0; left: 50%; transform: translateX(-50%); }
+  .dir-south { bottom: 0; left: 50%; transform: translateX(-50%); }
+  .dir-west { left: 0; top: 50%; transform: translateY(-50%); }
+  .dir-east { right: 0; top: 50%; transform: translateY(-50%); }
+  .dir-northwest { top: 0; left: 0; }
+  .dir-northeast { top: 0; right: 0; }
+  .dir-southwest { bottom: 0; left: 0; }
+  .dir-southeast { bottom: 0; right: 0; }
+  .dir-pill {
+    font-family: ${MONO_STACK}; font-size: .58rem; letter-spacing: .06em; line-height: 1;
+    padding: .24rem .42rem; border-radius: 2px; border: 1px solid var(--square-stone-dark);
+    background: var(--parchment); color: var(--square-ink); white-space: nowrap;
+  }
+  .dir-pill:hover:not(:disabled) { border-color: var(--square-accent); background: var(--square-accent); }
+  .dir-pill:disabled { opacity: .35; cursor: default; }
+  .dir-pill[aria-pressed="true"] {
+    background: var(--square-accent); border-color: var(--square-stone-dark);
+    box-shadow: 0 0 0 2px rgba(217,138,43,.4);
+  }
+
+  .hud-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
   .hud-card {
     flex: 1 1 220px; min-width: 200px; max-width: 320px;
     background: var(--parchment); border: 1px solid var(--square-stone-dark); border-radius: 4px;
@@ -716,6 +929,14 @@ const MUDIII_STYLE = `
   .hud-meter-fill { height: 100%; background: var(--square-accent); width: 0%; transition: width .3s ease; }
   .hud-goal { margin: 0; font-size: .74rem; }
   .hud-plan, .hud-belief { margin: 0; font-size: .62rem; color: var(--square-stone-dark); }
+  .hud-belief-toggle { display: flex; align-items: baseline; gap: .25rem; width: 100%; text-align: left; padding: 0; border: 0; background: none; }
+  .hud-belief-toggle[hidden] { display: none; }
+  .hud-belief-toggle .hud-belief { flex: 1; min-width: 0; }
+  .hud-belief-toggle::after { content: "\\25BE"; font-size: .55rem; color: var(--square-stone-dark); }
+  .hud-belief-toggle[aria-expanded="true"]::after { content: "\\25B4"; }
+  .hud-belief-toggle:hover .hud-belief, .hud-belief-toggle:hover::after { color: var(--square-ink); }
+  .hud-detail { display: flex; flex-direction: column; gap: .1rem; font-size: .6rem; color: var(--square-stone-dark); border-top: 1px solid rgba(0,0,0,.12); padding-top: .25rem; }
+  .hud-detail[hidden] { display: none; }
   @media (prefers-reduced-motion: reduce) { .hud-meter-fill { transition: none; } }
 
   .edit-stage { display: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
@@ -770,24 +991,69 @@ const MUDIII_STYLE = `
   .pill:hover:not(:disabled) { border-color: var(--square-accent); background: var(--square-accent); }
   .pill.affordance { border-style: dashed; border-color: var(--square-stone); }
   .pill.affordance[aria-pressed="true"] { background: var(--square-accent); border-style: solid; }
+  /* The tick and the cross live in ::before so the tag stays on the screen and
+     out of the submitted sentence — a clicked lie must be indistinguishable
+     from a typed one by the time the lane reads it. */
+  .pill[data-role="dyn-addr"][data-active="1"] { border-color: var(--taught); color: var(--taught); }
+  .pill[data-role="dyn-claim"][data-truth="true"] { border-color: var(--taught); }
+  .pill[data-role="dyn-claim"][data-truth="true"]::before { content: "\\2713 "; opacity: .55; }
+  .pill[data-role="dyn-claim"][data-truth="false"] { border-style: dashed; border-color: var(--alert); }
+  .pill[data-role="dyn-claim"][data-truth="false"]::before { content: "\\2715 "; opacity: .6; }
 
   @media (max-width: 900px) {
     .edit-stage { grid-template-columns: 1fr; }
     #editorText { min-height: 16rem; }
   }
 
-  /* A landscape phone and a narrow desktop window are both under 900px but
-     want different slider/map arrangements, so the split has to key off
-     orientation as well as width. */
+  /* Half the deck is right on a phone and absurd on a 2000px window: a
+     percentage has no ceiling, so a square board grew to roughly 950px tall
+     and pushed the 3D view off the screen. Wide viewports get an absolute
+     size instead, and keep the square — there is room for it here.
+
+     The map is also taller than a single row of controls, which used to
+     leave a tall empty stripe of parchment under them. On a landscape phone
+     and a desktop window alike, the deck becomes one grid with three control
+     columns beside the map. display:contents lifts .deck-panels' three
+     .deck-stack children, and .map-panel, out of .deck-body so all four are
+     grid items of the deck itself. A stack sits at its own natural height,
+     top-aligned, rather than stretching its items apart to match the map —
+     stretching them just traded the empty stripe for gaps between controls
+     that belong together, and a hint drifting away from the select it
+     describes. A shorter stack beside a taller map is fine; the leftover
+     space stays honest whitespace instead. */
+  @media (min-width: 901px), (max-width: 900px) and (orientation: landscape) {
+    .deck-body, .deck-panels { display: contents; }
+    .deck-stack {
+      display: flex; flex-direction: column; gap: .5rem;
+      grid-row: 2; align-self: start;
+    }
+    .deck-stack-1 { grid-column: 1; }
+    .deck-stack-2 { grid-column: 2; }
+    .deck-stack-3 { grid-column: 3; }
+    /* Stretch is the flex column's default cross-axis behaviour, and the
+       food pill is the one control here with a visible border — without
+       this it grows to the stack's full width as a wide dashed box. */
+    .deck-stack .pill.affordance { align-self: flex-start; }
+    .map-panel { grid-column: 4; grid-row: 2; flex: 0 0 auto; max-width: none; }
+  }
+
+  @media (min-width: 901px) {
+    .deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 240px; grid-template-rows: auto auto; column-gap: .8rem; }
+    .deck-controls { grid-column: 1 / -1; grid-row: 1; }
+    .map-panel { align-self: start; }
+  }
+
+  /* A landscape phone is under 900px but wants the same four-column
+     treatment as desktop — just narrower columns and a map that stretches
+     to the stacks' height rather than holding a fixed square, the same
+     trade this breakpoint always made before the grid switch. */
   @media (max-width: 900px) and (orientation: landscape) {
-    .deck-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; }
-    .deck-body { align-items: stretch; }
-    .map-panel { flex-basis: 33%; max-width: 33%; }
-    /* The square aspect-ratio that suits a tall portrait column would blow
-       the map back up to full column width in a short landscape viewport —
-       here it follows the two-row slider stack's own height instead. */
+    .deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(140px, 220px); grid-template-rows: auto auto; column-gap: .6rem; }
+    .deck-controls { grid-column: 1 / -1; grid-row: 1; }
+    .map-panel { align-self: stretch; }
     .map-panel-board { aspect-ratio: auto; min-height: 90px; }
   }
+
 `;
 
 /** The inlined page script, spliced the same way mud-viz.mjs's own
@@ -803,12 +1069,14 @@ function pageScript() {
   const DATA = MUDIII_PAGE_DATA;
   const createTicker = ${createTicker.toString()};
   const createSerialQueue = ${createSerialQueue.toString()};
+  const prefersReducedMotion = ${prefersReducedMotion.toString()};
   const escapeHtml = ${escapeHtml.toString()};
   const esc = escapeHtml;
   const appendLogLine = ${appendLogLine.toString()};
   const rowsForWorld = ${rowsForWorld.toString()};
   const renderMudEditorText = ${renderMudEditorText.toString()};
   const gridWorldEditorState = ${gridWorldEditorState.toString()};
+  const wordBeforeCursor = ${wordBeforeCursor.toString()};
   const pillCandidates = ${pillCandidates.toString()};
   const matchPills = ${matchPills.toString()};
   const createPillComplete = ${createPillComplete.toString()};
@@ -817,33 +1085,41 @@ function pageScript() {
   const cellFromGroundPoint = ${cellFromGroundPoint.toString()};
   const propPlacementsFrom = ${propPlacementsFrom.toString()};
   const occupiedCells = ${occupiedCells.toString()};
+  const currentPlacementsFrom = ${currentPlacementsFrom.toString()};
   const blockedCellReason = ${blockedCellReason.toString()};
   const cameraRigFor = ${cameraRigFor.toString()};
   const nextCameraSelection = ${nextCameraSelection.toString()};
+  const cameraSelectionForMode = ${cameraSelectionForMode.toString()};
   const mapDotsFor = ${mapDotsFor.toString()};
+  const mapBlocksFor = ${mapBlocksFor.toString()};
   const hudCardFieldsFor = ${hudCardFieldsFor.toString()};
   const clipForAction = ${clipForAction.toString()};
   const agentCardMarkup = ${agentCardMarkup.toString()};
+  const believedFactSentence = ${believedFactSentence.toString()};
 
   const el = (id) => document.getElementById(id);
+  const SEED_COMMANDS = ["tick", "what does the fox see", "where is the goblin", "what can I do"];
   let scenarioIndex = 0;
   const scenario = function () { return DATA.scenarios[scenarioIndex]; };
   const gridSizeOf = function () { return scenario().gridSize || DATA.gridSize; };
-  const rosterOf = function (s, role) {
-    return (s.agents || []).filter(function (a) { return !role || a.role === role; }).map(function (a) { return a.id; });
-  };
 
-  // ---- roster picking: the same shuffle-and-slice mud-browser-entry.mjs's
-  // own pickMudRoster performs, kept here rather than in the bundle because
-  // it needs no engine at all and this page's own tests exercise it through
-  // the rendered controls, never directly.
-  function pickRoster(roster, count) {
-    const pool = [...(roster || [])];
-    for (let i = pool.length - 1; i > 0; i -= 1) {
-      const j = Math.floor(Math.random() * (i + 1));
-      const tmp = pool[i]; pool[i] = pool[j]; pool[j] = tmp;
-    }
-    return pool.slice(0, Math.min(count, pool.length));
+  // ---- roster minting -----------------------------------------------------
+  // The page asks for a COUNT and names the ids it is about to get back: the
+  // engine mints <prefix>-1..N at seeded cells, so a slider can call for more
+  // animals than the scenario's own opening cast carries and still be met. The
+  // prefix is read off the scenario's own first agent of that role, so a square
+  // that casts something other than foxes and goblins still names its cast
+  // correctly. Drawing from the scenario's list instead capped every square at
+  // whatever its layout happened to build, and a shuffled draw would leave two
+  // loads of the same square with different casts.
+  function rosterPrefixFor(s, role) {
+    const first = (s.agents || []).find(function (a) { return a && a.role === role; });
+    return first ? roleOfAgentId(first.id) : role;
+  }
+  function mintRoster(prefix, count) {
+    const ids = [];
+    for (let i = 1; i <= count; i += 1) ids.push(prefix + "-" + i);
+    return ids;
   }
 
   let cast = [];
@@ -857,8 +1133,22 @@ function pageScript() {
   let tickQueue = createSerialQueue();
   function serializeTick(fn) { return tickQueue.run(fn); }
   let camera = { mode: "follow", selectedId: null, status: null };
+  // The mode a despawn fallback took away, held until the visitor picks
+  // another agent. Without it, choosing someone new after a fox ate your
+  // goblin leaves the camera overhead and the follow button unlit.
+  let cameraModeBeforeFallback = null;
+  // The cut to overhead the scene has been told to make NEXT tick. The page's
+  // own camera state moves the moment the followed agent leaves the board,
+  // because the deck must never offer an agent that is gone; the 3D camera
+  // holds one more turn so the visitor watches the kill from the animal they
+  // were riding instead of cutting away from it. A rig with nobody to aim at
+  // freezes rather than drifting, which is what makes the held turn read as a
+  // held shot.
+  let deferredSceneCamera = null;
   let foodArmed = false;
   let livePills = [];
+  let selectedAddresseeId = null;
+  const expandedAgents = new Set();
   let pillComplete = null;
   let autoOn = false;
   let editing = false;
@@ -895,6 +1185,13 @@ function pageScript() {
     }
   }
 
+  // Every camera change the visitor asks for goes through here, so a pending
+  // one-turn-late cut can never land on top of a mode they picked in between.
+  function sendCameraToScene(state) {
+    deferredSceneCamera = null;
+    callScene("setCamera", state);
+  }
+
   function applyTickResult(result) {
     if (!result) return;
     // The engine owns the count. Anything that advances a turn — the deck, a
@@ -902,9 +1199,22 @@ function pageScript() {
     if (typeof result.turn === "number") globalTurn = result.turn;
     if (result.agents) agentsById = result.agents;
     if (result.items) itemsById = result.items;
-    callScene("applyTick", { agents: result.agents, items: result.items, ecology: result.ecology });
-    camera = nextCameraSelection(camera, agentsList(), result.ecology || []);
-    callScene("setCamera", camera);
+    callScene("applyTick", {
+      agents: result.agents, items: result.items, ecology: result.ecology, rungs: result.rungs,
+    });
+    const nextCamera = nextCameraSelection(camera, agentsList(), result.ecology || []);
+    if (nextCamera.status && camera.mode !== "overhead") cameraModeBeforeFallback = camera.mode;
+    camera = nextCamera;
+    if (deferredSceneCamera) {
+      const cut = deferredSceneCamera;
+      deferredSceneCamera = null;
+      callScene("setCamera", cut);
+    } else if (nextCamera.status) {
+      // The status line names the kill NOW; the wide shot lands next turn.
+      deferredSceneCamera = { mode: camera.mode, selectedId: camera.selectedId };
+    } else {
+      callScene("setCamera", camera);
+    }
     if (camera.status) setSceneStatus(camera.status);
   }
 
@@ -926,6 +1236,16 @@ function pageScript() {
         const playBtn = el("autoToggle");
         playBtn.setAttribute("aria-pressed", state.playing ? "true" : "false");
         playBtn.textContent = state.playing ? "\\u23F8 pause" : "\\u25B6 play";
+        // The follow control reads the ticker's own state, never a second
+        // "am I playing" the page keeps for itself, so the two can never
+        // disagree. It closes while the board plays because a redraw lands
+        // on top of the open dropdown and loses the pick.
+        el("agentSelect").disabled = state.playing;
+        el("agentSelectHint").hidden = !state.playing;
+        // Step reads the same ticker state for the same reason: a hand-driven
+        // turn while the board plays itself lands in the middle of one.
+        el("stepBtn").disabled = state.playing || state.animating;
+        el("stepHint").hidden = !state.playing;
       },
       hasNext: hasNext,
       wait: liveWait,
@@ -971,20 +1291,72 @@ function pageScript() {
   el("chatLogPopupClose").addEventListener("click", function () { el("chatLogPopup").hidden = true; });
 
   // ---- the pill rail and its typeahead ----------------------------------
+  // The deception rail is tmct.page.pillsForMudiii's own output, rendered and
+  // nothing more: an address pill per live agent, then a true and a false
+  // claim about every individual the addressee could act on. The false cell is
+  // the board's own point reflection, so a lie is always in bounds and never
+  // accidentally true. Which one a pill carries is shown by a glyph in CSS
+  // ::before, never in the submitted text — a clicked lie reads exactly like a
+  // typed one once it is in the input.
+  //
+  // The fixed seeds ahead of it are the town square's OWN verbs, checked
+  // against the lane's regexes rather than borrowed from another page: this
+  // world has no "look".
   function renderChatPills() {
-    const pills = [{ command: "look", label: "look" }];
-    for (const id of Object.keys(agentsById)) pills.push({ command: "@" + id + " look", label: "@" + id + " look" });
-    livePills = pills;
-    el("chatPills").innerHTML = pills.map(function (p) {
+    const seeds = SEED_COMMANDS.map(function (c) { return { command: c, label: c }; });
+    const seedHtml = seeds.map(function (p) {
       return '<button type="button" class="pill" data-command="' + esc(p.command) + '">' + esc(p.label) + "</button>";
     }).join("");
-    const buttons = el("chatPills").querySelectorAll(".pill");
-    for (let i = 0; i < buttons.length; i += 1) {
-      buttons[i].addEventListener("click", function (e) { sendCommand(e.currentTarget.getAttribute("data-command")); });
-    }
+    const rail = window.tmct.page.pillsForMudiii(agentsById, itemsById, selectedAddresseeId, { gridSize: gridSizeOf() });
+    selectedAddresseeId = rail.addresseeId;
+    const addrHtml = rail.addressPills.map(function (p) {
+      return '<button type="button" class="pill" data-role="dyn-addr" data-id="' + esc(p.id) + '"'
+        + (p.id === selectedAddresseeId ? ' data-active="1"' : "") + ">" + esc(p.label) + "</button>";
+    }).join("");
+    const claims = rail.claimPills.map(function (p) {
+      return { command: p.sentence, label: p.text, truth: p.truth };
+    });
+    const claimHtml = claims.map(function (p) {
+      return '<button type="button" class="pill" data-role="dyn-claim" data-truth="' + (p.truth ? "true" : "false")
+        + '" data-command="' + esc(p.command) + '">' + esc(p.label) + "</button>";
+    }).join("");
+    livePills = seeds.concat(claims);
+    el("chatPills").innerHTML = seedHtml + addrHtml + claimHtml;
     if (pillComplete) pillComplete.refresh();
   }
 
+  // A pill APPENDS rather than replacing, so two clicks compose one line. The
+  // second click of a double is what submits: the text it would have appended
+  // went in on the first click of that same pair, which is why nothing is
+  // appended again here.
+  function appendToChatInput(text) {
+    const input = el("chatInput");
+    const head = input.value.replace(/\\s+$/, "");
+    input.value = (head ? head + " " : "") + text;
+    input.focus();
+    input.setSelectionRange(input.value.length, input.value.length);
+  }
+
+  el("chatPills").addEventListener("click", function (e) {
+    const btn = e.target.closest(".pill");
+    if (!btn) return;
+    if (btn.getAttribute("data-role") === "dyn-addr") {
+      selectedAddresseeId = btn.getAttribute("data-id");
+      renderChatPills();
+      return;
+    }
+    const command = btn.getAttribute("data-command");
+    if (!command) return;
+    if (e.detail > 1) {
+      const input = el("chatInput");
+      const line = input.value.trim();
+      input.value = "";
+      if (line) sendCommand(line);
+      return;
+    }
+    appendToChatInput(command);
+  });
+
   function wirePillComplete() {
     pillComplete = createPillComplete({
       input: el("chatInput"),
@@ -1015,7 +1387,8 @@ function pageScript() {
   // still refused entirely client-side — nothing is written, and the food
   // pill stays armed for another try.
   window.mudiiiHandleSceneClick = function (cellId) {
-    if (!foodArmed || !session) return;
+    if (!session || editing) return;
+    if (!foodArmed) { walkFollowedTo(cellId); return; }
     const reason = blockedCellReason(cellId, props, agentsList());
     if (reason) { setSceneStatus(reason); return; }
     sendCommand("put food at " + cellId).then(function () {
@@ -1024,6 +1397,82 @@ function pageScript() {
     });
   };
 
+  // ---- driving one agent by hand ------------------------------------------
+  // Every press here spends a turn: driveAgent runs the SAME whole-world tick
+  // autoplay runs, so the ecology pass runs and every other agent decides and
+  // moves with it. That is what the status line has to say, or the ring reads
+  // as a free nudge that costs nothing.
+  function followedAgentId() {
+    const id = camera.selectedId;
+    return id && agentsById[id] ? id : null;
+  }
+
+  // One lit glyph, and it is the followed agent's own facing — the reading
+  // that makes sense on an open grid, where nearly every step is available and
+  // lighting what is available would say nothing. With nobody followed there
+  // is no facing to show and nothing to walk, so the ring goes away.
+  function renderDriveRing() {
+    const followed = followedAgentId();
+    const ring = el("driveRing");
+    ring.hidden = !followed;
+    if (!followed) return;
+    const facing = agentsById[followed].facing || DATA.defaultFacing;
+    const buttons = ring.querySelectorAll("[data-drive]");
+    for (let i = 0; i < buttons.length; i += 1) {
+      buttons[i].setAttribute("aria-pressed", buttons[i].getAttribute("data-drive") === facing ? "true" : "false");
+    }
+  }
+
+  function drivePress(direction) {
+    const followed = followedAgentId();
+    if (!session || !followed) { setSceneStatus("pick an agent to follow \\u2014 the ring walks whoever the camera is on."); return; }
+    // A hand-driven turn is a deliberate one, so autoplay stands down rather
+    // than racing the press.
+    autoOn = false;
+    if (ticker) ticker.pause();
+    return serializeTick(async function () {
+      const result = await session.driveAgent(followed, direction);
+      applyTickResult(result);
+      renderAll();
+      const driven = result.driven || {};
+      setSceneStatus(driven.accepted
+        ? followed + " went " + driven.direction + " to " + driven.cell + " \\u2014 turn " + result.turn + ", and the whole square moved with it."
+        : followed + " could not go " + direction + " \\u2014 the turn was spent anyway, and the whole square moved.");
+      return result;
+    });
+  }
+
+  el("driveRing").addEventListener("click", function (e) {
+    const btn = e.target.closest("[data-drive]");
+    if (!btn || btn.disabled) return;
+    drivePress(btn.getAttribute("data-drive"));
+  });
+
+  // A ground click with nothing armed walks the followed agent one step along
+  // the route to the cell, and draws the whole route it is heading down. The
+  // route comes from the world's own exit search, so a cell behind a building
+  // is declined rather than drawn as a line through the wall.
+  async function walkFollowedTo(target) {
+    const followed = followedAgentId();
+    if (!followed) { setSceneStatus("pick an agent to follow \\u2014 a click on the ground walks whoever the camera is on."); return; }
+    const from = agentsById[followed].cell;
+    if (target === from) { setSceneStatus(followed + " is already at " + target + "."); return; }
+    callScene("flashCell", target);
+    const snap = await session.snapshot();
+    const route = window.tmct.page.routeBetweenCells(snap.rows, from, target);
+    if (!route || !route.directions.length) {
+      callScene("clearRoute");
+      setSceneStatus("no way through to " + target + " from " + from + ".");
+      return;
+    }
+    callScene("showRoute", route.cells);
+    await drivePress(route.directions[0]);
+    const left = route.directions.length - 1;
+    setSceneStatus(left
+      ? followed + " is heading for " + target + " \\u2014 " + left + " more step" + (left === 1 ? "" : "s") + ", one turn each."
+      : followed + " reached " + target + ".");
+  }
+
   // ---- the HUD row --------------------------------------------------------
   function renderHudRow() {
     const ids = Object.keys(agentsById).sort();
@@ -1043,19 +1492,69 @@ function pageScript() {
       card.querySelector(".hud-meter-fill").style.width = (fields.massPct === null ? 0 : fields.massPct) + "%";
       card.querySelector(".hud-goal").textContent = fields.goal;
       card.querySelector(".hud-plan").textContent = "plan: " + fields.planText;
-      card.querySelector(".hud-belief").textContent = fields.beliefEntries.length
-        ? "believes: " + fields.beliefEntries.map(function (entry) {
-          return entry[0] + (entry[1] ? " @ " + entry[1] : " unseen");
-        }).join(" \\u00b7 ")
-        : "";
+      renderBelief(card, id, fields.beliefEntries);
     }
   }
 
+  // A belief map grows with the cast, so the card shows the first three and a
+  // count and keeps the rest behind a toggle. Which cards are open is held
+  // against the AGENT ID, never the DOM: renderHudRow only rebuilds its
+  // markup when the card count changes, and card slots are positional while
+  // agents re-bind by sorted id, so state left in a card would follow the
+  // slot rather than the animal.
+  const BELIEF_SUMMARY_LIMIT = 3;
+  function renderBelief(card, id, entries) {
+    const toggle = card.querySelector(".hud-belief-toggle");
+    const detail = card.querySelector(".hud-detail");
+    const expanded = expandedAgents.has(id);
+    const shown = entries.slice(0, BELIEF_SUMMARY_LIMIT).map(function (entry) {
+      return entry[0] + (entry[1] ? " @ " + entry[1] : " unseen");
+    }).join(" \\u00b7 ");
+    const rest = entries.length - BELIEF_SUMMARY_LIMIT;
+    card.querySelector(".hud-belief").textContent = entries.length
+      ? "believes: " + shown + (rest > 0 ? " +" + rest + " more" : "")
+      : "";
+    toggle.hidden = entries.length === 0;
+    toggle.setAttribute("aria-expanded", expanded && entries.length ? "true" : "false");
+    detail.hidden = !expanded || entries.length === 0;
+    detail.innerHTML = entries.map(function (entry) {
+      return '<div class="hud-detail-line">' + esc(believedFactSentence(entry[0], entry[1])) + "</div>";
+    }).join("");
+  }
+
+  el("hudRow").addEventListener("click", function (e) {
+    const toggle = e.target.closest(".hud-belief-toggle");
+    if (!toggle) return;
+    const card = toggle.closest(".hud-card");
+    const id = card && card.getAttribute("data-agent");
+    if (!id) return;
+    if (expandedAgents.has(id)) expandedAgents.delete(id); else expandedAgents.add(id);
+    renderHudRow();
+  });
+
   // ---- the top-down map panel ---------------------------------------------
   function renderMapPanel() {
-    const dots = mapDotsFor(agentsList(), itemsList(), gridSizeOf());
-    el("mapPanelBoard").innerHTML = dots.map(function (d) {
-      return '<span class="map-dot map-dot-' + esc(d.kind) + '" style="left:' + d.xPct + '%;top:' + d.yPct + '%" title="' + esc(d.id) + '"></span>';
+    const board = el("mapPanelBoard");
+    const size = gridSizeOf();
+    // The cell divisions are two gradients stepped by this, so the drawn grid
+    // and the dots' own percentages read off the same board size.
+    board.style.setProperty("--map-cell-pct", (100 / size) + "%");
+    const blocks = mapBlocksFor(props, size);
+    const dots = mapDotsFor(agentsList(), itemsList(), size);
+    // Blocks first, dots second: a live agent standing beside a building has
+    // to sit on top of it, not under it.
+    board.innerHTML = blocks.map(function (b) {
+      return '<span class="map-block" style="left:' + b.xPct + '%;top:' + b.yPct + '%;width:' + b.sizePct
+        + '%;height:' + b.sizePct + '%" title="' + esc(b.id) + '"></span>';
+    }).join("") + dots.map(function (d) {
+      const dot = '<span class="map-dot map-dot-' + esc(d.kind) + '" style="left:' + d.xPct + '%;top:' + d.yPct + '%" title="' + esc(d.id) + '"></span>';
+      // Items are named by their colour in the key; only the cast, which the
+      // HUD and the follow control both name, carries its id on the board.
+      if (d.kind !== "predator" && d.kind !== "prey") return dot;
+      // A label on a dot near the right edge would run off the board, so
+      // those hang to the left of their dot instead.
+      const side = d.xPct > 70 ? " map-label-left" : "";
+      return dot + '<span class="map-label mono' + side + '" style="left:' + d.xPct + '%;top:' + d.yPct + '%">' + esc(d.id) + "</span>";
     }).join("");
     el("mapPanelTurn").textContent = "turn " + globalTurn;
   }
@@ -1071,8 +1570,12 @@ function pageScript() {
   }
   el("agentSelect").addEventListener("change", function () {
     const id = el("agentSelect").value || null;
-    camera = { mode: camera.mode, selectedId: id, status: null };
-    callScene("setCamera", camera);
+    const mode = cameraModeBeforeFallback || camera.mode;
+    cameraModeBeforeFallback = null;
+    camera = { mode: mode, selectedId: id, status: null };
+    renderCameraButtons();
+    renderDriveRing();
+    sendCameraToScene(camera);
   });
 
   function renderCameraButtons() {
@@ -1084,9 +1587,15 @@ function pageScript() {
   el("cameraMode").addEventListener("click", function (e) {
     const btn = e.target.closest("button[data-mode]");
     if (!btn) return;
-    camera = { mode: btn.getAttribute("data-mode"), selectedId: camera.selectedId, status: null };
+    cameraModeBeforeFallback = null;
+    camera = cameraSelectionForMode(
+      btn.getAttribute("data-mode"), camera.selectedId, el("agentSelect").value, Object.keys(agentsById),
+    );
     renderCameraButtons();
-    callScene("setCamera", camera);
+    renderAgentSelect();
+    renderDriveRing();
+    setSceneStatus(camera.status || "");
+    sendCameraToScene(camera);
   });
 
   // ---- the control deck ----------------------------------------------------
@@ -1119,7 +1628,14 @@ function pageScript() {
     el("playerCountSlider").addEventListener("change", function () { boot(); });
     el("npcCountSlider").addEventListener("input", function () { showGoblinCount(chosenGoblinCount()); });
     el("npcCountSlider").addEventListener("change", function () { boot(); });
-    el("resetBtn").addEventListener("click", function () { boot(); });
+    // One whole turn: every agent decides and moves, the ecology pass runs,
+    // and the turn counter reads exactly one higher. It goes through the same
+    // ticker play() uses, so the two can never run a turn on top of each other.
+    el("stepBtn").addEventListener("click", function () {
+      if (!session || autoOn) return;
+      ensureTicker().stepOnce();
+    });
+    el("resetBtn").addEventListener("click", function () { resetBoard(); });
     const scenarioSelect = el("scenarioSelect");
     if (scenarioSelect) {
       scenarioSelect.addEventListener("change", function () {
@@ -1154,17 +1670,15 @@ function pageScript() {
   // graph.
   function worldOnlyRows(rows) { return rowsForWorld(rows, scenario().worldPayload.name); }
   let editRows = [];
+  // The FULL store, not the world's own rows: a term's synonyms and its is-a
+  // chain mostly live in the background corpus, not in the square's vocabulary.
+  let allStoreRows = [];
 
   function renderEditPlacements() {
-    const placements = {};
-    for (const row of editRows) {
-      if (row.predicate !== "mgx:currently-in") continue;
-      placements[row.subject] = row.object;
-    }
-    const subjects = Object.keys(placements).sort();
-    el("editPlacements").innerHTML = subjects.length
-      ? subjects.map(function (s) {
-        return '<div class="edit-placement-row"><span class="mono">' + esc(s) + '</span><span>' + esc(placements[s]) + "</span></div>";
+    const placements = currentPlacementsFrom(editRows);
+    el("editPlacements").innerHTML = placements.length
+      ? placements.map(function (p) {
+        return '<div class="edit-placement-row"><span class="mono">' + esc(p.subject) + '</span><span>' + esc(p.cell) + "</span></div>";
       }).join("")
       : '<span class="edit-empty">nothing placed yet</span>';
   }
@@ -1178,11 +1692,12 @@ function pageScript() {
     el("editModeBtn").textContent = "back to playing";
     el("editModeBtn").setAttribute("aria-pressed", "true");
     const snap = await session.snapshot();
+    allStoreRows = snap.rows;
     editRows = worldOnlyRows(snap.rows);
     el("editorText").value = renderMudEditorText(editRows, gridWorldEditorState(snap.state));
     el("editorStatus").className = "edit-status";
     el("editorStatus").textContent = "";
-    el("editorPills").innerHTML = "";
+    renderSuggestionPills();
     renderEditPlacements();
   }
 
@@ -1193,9 +1708,74 @@ function pageScript() {
     el("editModeBtn").setAttribute("aria-pressed", "false");
   }
 
+  // The lateral SKOS neighbourhood plus the vertical is-a chain for whatever
+  // word the cursor sits behind. Nothing found is nothing shown — an honest
+  // miss, never a guessed suggestion.
+  function renderSuggestionPills() {
+    const box = el("editorPills");
+    const term = wordBeforeCursor(el("editorText").value, el("editorText").selectionStart);
+    if (!term || !window.tmct) { box.innerHTML = ""; return; }
+    const related = window.tmct.page.relatedForTerm ? window.tmct.page.relatedForTerm(allStoreRows, term) : null;
+    const chain = window.tmct.page.classAncestorChain ? window.tmct.page.classAncestorChain(term, allStoreRows) : [];
+    const seen = {};
+    seen[term] = true;
+    const out = [];
+    const push = function (label) { if (label && !seen[label]) { seen[label] = true; out.push(label); } };
+    if (related) {
+      related.synonyms.forEach(push);
+      related.related.forEach(function (r) { push(r.prefLabel); });
+    }
+    chain.slice(1).forEach(push);
+    box.innerHTML = out.slice(0, 8).map(function (s) {
+      return '<button type="button" class="pill" data-insert="' + esc(s) + '">' + esc(s) + "</button>";
+    }).join("");
+  }
+
+  el("editorPills").addEventListener("click", function (e) {
+    const btn = e.target.closest(".pill");
+    if (!btn) return;
+    const area = el("editorText");
+    const pos = area.selectionStart;
+    const word = wordBeforeCursor(area.value, pos);
+    const insert = btn.getAttribute("data-insert");
+    area.value = area.value.slice(0, pos - word.length) + insert + area.value.slice(pos);
+    const next = pos - word.length + insert.length;
+    area.setSelectionRange(next, next);
+    area.focus();
+    onEditorChanged();
+  });
+
+  let suggestTimer = null;
   let syncTimer = null;
+  function scheduleSuggestions() { clearTimeout(suggestTimer); suggestTimer = setTimeout(renderSuggestionPills, 180); }
   function scheduleSync() { clearTimeout(syncTimer); syncTimer = setTimeout(applyEditorText, 450); }
-  el("editorText").addEventListener("input", scheduleSync);
+  function onEditorChanged() { scheduleSuggestions(); scheduleSync(); }
+  el("editorText").addEventListener("input", onEditorChanged);
+  el("editorText").addEventListener("click", scheduleSuggestions);
+  el("editorText").addEventListener("keyup", function (e) {
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].indexOf(e.key) !== -1) scheduleSuggestions();
+  });
+
+  // An edit changes the facts, so the meshes have to move with them —
+  // otherwise a deleted well stands in the square until the next Reset.
+  // boot() drops the camera back to overhead and empties the scene's own
+  // agent groups, so the visitor's camera is put back and the live cast is
+  // redrawn straight after: autoplay is paused in edit mode, so nothing else
+  // would repopulate them.
+  async function rebuildSceneFromEdit(result) {
+    props = propPlacementsFrom(editRows, DATA.assetManifest);
+    // A prop may now stand where an animal was, so a change re-casts onto the
+    // edited board. An edit that wrote and retracted nothing leaves the cast
+    // exactly where it stood.
+    if (result && (result.added || result.removed)) {
+      applyTickResult(await session.recast({ agents: cast }));
+    }
+    await callScene("boot", {
+      propPlacements: props, assetManifest: DATA.assetManifest, gridSize: gridSizeOf(), cellSize: 1,
+    });
+    sendCameraToScene(camera);
+    callScene("applyTick", { agents: agentsById, items: itemsById, ecology: [] });
+  }
 
   async function applyEditorText() {
     if (!session) return;
@@ -1204,7 +1784,9 @@ function pageScript() {
     status.textContent = "reading the square\\u2026";
     const result = await serializeTick(function () { return session.applyEdit(el("editorText").value); });
     const snap = await session.snapshot();
+    allStoreRows = snap.rows;
     editRows = worldOnlyRows(snap.rows);
+    await rebuildSceneFromEdit(result);
     if (result && result.unrecognized && result.unrecognized.length) {
       status.className = "edit-status pending";
       status.textContent = result.unrecognized.length + " line" + (result.unrecognized.length === 1 ? "" : "s")
@@ -1219,8 +1801,37 @@ function pageScript() {
   }
 
   // ---- booting ---------------------------------------------------------
-  // Nothing plays on load: booting draws the opening state and stops there.
-  // Ticking waits for the deck's own play control, exactly like mud.html.
+  // The board opens playing: a square standing still reads as broken, and the
+  // first thing anyone does is press play anyway. A visitor who asked for
+  // reduced motion gets the opening board drawn and left still — the play
+  // control is right there — because an autoplaying board is exactly the
+  // unasked-for movement that setting is about.
+
+  // The camera opens riding a goblin. The goblins are the prey, so the first
+  // thing a visitor sees is a chase from inside the animal being chased; when
+  // it is caught the camera cuts wide and the rest of the round plays out
+  // overhead. Falls back to whoever is first by id on a square with no prey.
+  function openingFollowId(agents) {
+    const ids = Object.keys(agents || {}).sort();
+    for (let i = 0; i < ids.length; i += 1) {
+      if (agents[ids[i]] && agents[ids[i]].role === "prey") return ids[i];
+    }
+    return ids[0] || null;
+  }
+
+  // The play control put back to a stopped board. The ticker draws this
+  // itself while it lives, but a Reset throws the ticker away, so the button
+  // would keep reading "pause" over a board that is standing still.
+  function showStopped() {
+    const playBtn = el("autoToggle");
+    playBtn.setAttribute("aria-pressed", "false");
+    playBtn.textContent = "\\u25B6 play";
+    el("agentSelect").disabled = false;
+    el("agentSelectHint").hidden = true;
+    el("stepBtn").disabled = false;
+    el("stepHint").hidden = true;
+  }
+
   let bootSeq = 0;
   async function boot() {
     const seq = bootSeq += 1;
@@ -1229,14 +1840,21 @@ function pageScript() {
     globalTurn = 0;
     tickQueue = createSerialQueue();
     camera = { mode: "follow", selectedId: null, status: null };
+    cameraModeBeforeFallback = null;
+    deferredSceneCamera = null;
+    expandedAgents.clear();
     const s = scenario();
-    const foxes = pickRoster(rosterOf(s, "predator"), chosenFoxCount());
-    const goblins = pickRoster(rosterOf(s, "prey"), chosenGoblinCount());
+    const foxes = mintRoster(rosterPrefixFor(s, "predator"), chosenFoxCount());
+    const goblins = mintRoster(rosterPrefixFor(s, "prey"), chosenGoblinCount());
     cast = foxes.concat(goblins);
     showFoxCount(foxes.length);
     showGoblinCount(goblins.length);
     props = propPlacementsFrom((s.worldPayload && s.worldPayload.facts) || [], DATA.assetManifest);
-    const opened = await window.tmct.open(s.worldPayload, { agents: cast, epoch: 0 });
+    const opened = await window.tmct.open(s.worldPayload, {
+      agents: cast,
+      epoch: 0,
+      getTeachEnabled: function () { return el("teachToggle").checked; },
+    });
     if (seq !== bootSeq) return;
     session = opened;
     agentsById = {};
@@ -1251,9 +1869,43 @@ function pageScript() {
     // the cells both come back from it rather than being guessed here.
     const opening = await session.board();
     if (seq !== bootSeq) return;
-    camera.selectedId = Object.keys(opening.agents || {}).sort()[0] || null;
+    camera.selectedId = openingFollowId(opening.agents);
     applyTickResult(opening);
     renderAll();
+    if (!prefersReducedMotion()) {
+      autoOn = true;
+      ensureTicker().play();
+    }
+  }
+
+  // Reset re-casts the store it already has rather than opening a new one:
+  // the world's facts, everything taught into it and every editor change all
+  // stand, and only the animals are minted again. Re-opening would throw the
+  // taught facts away with the cast, which is not what "reset the board" says.
+  //
+  // A Reset leaves the board STOPPED, whatever it was doing before. Opening
+  // the page is the one time the square starts itself; after that the visitor
+  // says when it runs. The shared ticker in viz-ticker.mjs already resets this
+  // way, and this page keeps its own play flag, so it says so here too.
+  async function resetBoard() {
+    if (!session) return boot();
+    autoOn = false;
+    if (ticker) { ticker.pause(); ticker = null; }
+    expandedAgents.clear();
+    const s = scenario();
+    const foxes = mintRoster(rosterPrefixFor(s, "predator"), chosenFoxCount());
+    const goblins = mintRoster(rosterPrefixFor(s, "prey"), chosenGoblinCount());
+    cast = foxes.concat(goblins);
+    showFoxCount(foxes.length);
+    showGoblinCount(goblins.length);
+    const board = await serializeTick(function () { return session.recast({ agents: cast }); });
+    camera = { mode: "follow", selectedId: openingFollowId(board.agents), status: null };
+    cameraModeBeforeFallback = null;
+    deferredSceneCamera = null;
+    applyTickResult(board);
+    renderAll();
+    showStopped();
+    setSceneStatus("re-cast and stopped \\u2014 the square's own facts stand, and everything taught into it. Press play.");
   }
 
   function renderAll() {
@@ -1261,6 +1913,7 @@ function pageScript() {
     renderMapPanel();
     renderAgentSelect();
     renderCameraButtons();
+    renderDriveRing();
     renderChatPills();
     el("globalTurnCount").textContent = "turns: " + globalTurn;
   }