@polycode-projects/the-mechanical-code-talker 4.0.0 → 4.1.0

package/src/services/p2p-room.mjs

@@ -164,6 +164,19 @@ export function createP2pRoom({
   const seenProvenanceById = new Map();
   let cachedRows = [];
 
+  // Store-touching work runs one job at a time, in arrival order. Every path
+  // that reads or writes memoryDir/seenProvenanceById/cachedRows crosses at
+  // least one await, so without this a rebind could swap the store while a
+  // merge is half-written into the old one — the merged rows would then
+  // baseline against the wrong store, or vanish. Jobs queued behind a rebind
+  // land on the store the rebind installed.
+  let storeChain = Promise.resolve();
+  function withStore(job) {
+    const run = storeChain.then(job);
+    storeChain = run.then(() => {}, () => {});
+    return run;
+  }
+
   const factsListeners = new Set();
   const stateListeners = new Set();
   const peersListeners = new Set();
@@ -246,8 +259,8 @@ export function createP2pRoom({
 
   /** Diff the store against what this room last saw, relabel each changed
    *  fact's provenance for the wire, and broadcast the batch. The page calls
-   *  this once after every local turn or action. */
-  async function afterLocalChange() {
+   *  this (as `afterLocalChange`) once after every local turn or action. */
+  async function flushLocalChange() {
     await ensureStarted();
     await refreshRows();
     const changed = [];
@@ -270,7 +283,7 @@ export function createP2pRoom({
     if (!accepted.length) return { merged: 0 };
     // Flush first: a local fact still waiting to be diffed would otherwise be
     // recorded as merged below and never leave this browser.
-    await afterLocalChange();
+    await flushLocalChange();
     const { ids } = await appendFacts(memoryDir, accepted.map((f) => ({
       subject: f.subject,
       predicate: f.predicate,
@@ -357,9 +370,11 @@ export function createP2pRoom({
         return;
       }
       case "sync-request": {
-        await refreshRows();
-        const timestamp = now();
-        const facts = syncableFacts(cachedRows).flatMap((row) => toWireFacts(row, displayName, timestamp));
+        const facts = await withStore(async () => {
+          await refreshRows();
+          const timestamp = now();
+          return syncableFacts(cachedRows).flatMap((row) => toWireFacts(row, displayName, timestamp));
+        });
         send(transport, syncResponseMessage({ facts }));
         return;
       }
@@ -368,7 +383,7 @@ export function createP2pRoom({
       // between them needs no sequencing.
       case "sync-response":
       case "op":
-        await mergeIncomingFacts(message.facts);
+        await withStore(() => mergeIncomingFacts(message.facts));
     }
   }
 
@@ -413,7 +428,7 @@ export function createP2pRoom({
   /** Mint a fresh invite blob. One blob completes exactly one connection, so
    *  each call replaces whatever earlier invite was still waiting for a reply. */
   async function startSharing() {
-    await ensureStarted();
+    await withStore(ensureStarted);
     const transport = attachTransport(transportFactory());
     pendingShare = transport;
     lastError = null;
@@ -425,7 +440,7 @@ export function createP2pRoom({
   /** Decode someone's invite and answer it. Returns the reply blob to send
    *  back, or a named problem the page can show beside the box it came from. */
   async function acceptInvite(blobString) {
-    await ensureStarted();
+    await withStore(ensureStarted);
     const decoded = decodeInviteBlob(blobString);
     if (decoded.error) {
       lastError = problem("invite", decoded.error);
@@ -453,7 +468,7 @@ export function createP2pRoom({
   /** Feed the joiner's reply back into the invite it answers, completing the
    *  connection. */
   async function completeInvite(replyBlob) {
-    await ensureStarted();
+    await withStore(ensureStarted);
     if (!pendingShare) {
       lastError = problem("reply", "no-pending-invite");
       return lastError;
@@ -482,20 +497,24 @@ export function createP2pRoom({
   }
 
   async function setMyDisplayName(name) {
-    await ensureStarted();
-    displayName = name;
-    await appendFacts(memoryDir, [nodeNameFact(myPeerId, name, now())]);
-    await sortFactIndividualsById();
-    return afterLocalChange();
+    return withStore(async () => {
+      await ensureStarted();
+      displayName = name;
+      await appendFacts(memoryDir, [nodeNameFact(myPeerId, name, now())]);
+      await sortFactIndividualsById();
+      return flushLocalChange();
+    });
   }
 
   /** Wave as `subjectId`, in `roomId` when there is one. chat.html's presence
    *  wave passes null and lands on PRESENCE_SCOPE instead. */
   async function wave(subjectId, roomId = null) {
-    await ensureStarted();
-    await appendFacts(memoryDir, [waveFact(subjectId, roomId || PRESENCE_SCOPE, now())]);
-    await sortFactIndividualsById();
-    return afterLocalChange();
+    return withStore(async () => {
+      await ensureStarted();
+      await appendFacts(memoryDir, [waveFact(subjectId, roomId || PRESENCE_SCOPE, now())]);
+      await sortFactIndividualsById();
+      return flushLocalChange();
+    });
   }
 
   /** Whether `subjectId` is waving right now, read from the cached rows so a
@@ -517,6 +536,53 @@ export function createP2pRoom({
     return peers.get(peerId)?.displayName || String(peerId).slice(0, 8);
   }
 
+  /** Re-bind this room to a fresh store — the recast path. The peer
+   *  connections are the point of keeping the room alive, so nothing about
+   *  the transports or the peer map is touched. In order: flush whatever the
+   *  OLD store still had undiffed (a turn landed just before the recast must
+   *  not vanish silently), swap the store reference, rebuild the diff
+   *  baseline against the new store, write the identity facts into it, then
+   *  push the new store's syncable facts to every open channel as an
+   *  ordinary op and ask each peer for its own view with an ordinary
+   *  sync-request — the exact machinery a freshly opened channel uses, no
+   *  new message type. Runs on the store chain, so a merge in flight when
+   *  the recast happens finishes against the store it started on, and
+   *  everything behind it lands on the new one. */
+  async function rebind({ memoryDir: nextMemoryDir, worldName: nextWorldName, myDisplayName: nextDisplayName } = {}) {
+    if (!nextMemoryDir) throw new Error("rebind needs the store to bind to");
+    return withStore(async () => {
+      if (closed) throw new Error("this room is closed");
+      if (started) await flushLocalChange();
+      memoryDir = nextMemoryDir;
+      if (nextWorldName) worldName = nextWorldName;
+      if (nextDisplayName) displayName = nextDisplayName;
+      started = true;
+      seenProvenanceById.clear();
+      cachedRows = [];
+      const timestamp = now();
+      const identity = [];
+      if (worldId && worldName) identity.push(worldNameFact(worldId, worldName, timestamp));
+      if (myPeerId && displayName) identity.push(nodeNameFact(myPeerId, displayName, timestamp));
+      if (identity.length) {
+        await appendFacts(memoryDir, identity);
+        await sortFactIndividualsById();
+      }
+      await refreshRows();
+      for (const row of cachedRows) seenProvenanceById.set(row.id, row.provenance);
+      const targets = connectedPeers();
+      let pushed = 0;
+      if (targets.length) {
+        const wireTimestamp = now();
+        const facts = syncableFacts(cachedRows).flatMap((row) => toWireFacts(row, displayName, wireTimestamp));
+        pushed = facts.length;
+        if (facts.length) broadcast(opMessage({ from: myPeerId, facts }));
+        broadcast(syncRequestMessage());
+      }
+      emit(factsListeners, { merged: 0, rows: cachedRows });
+      return { pushed, peers: targets.length };
+    });
+  }
+
   function close() {
     closed = true;
     for (const peer of peers.values()) peer.transport.close();
@@ -534,23 +600,24 @@ export function createP2pRoom({
   return {
     peerId: myPeerId,
     worldId,
-    worldName,
+    get worldName() { return worldName; },
     get displayName() { return displayName; },
     get state() { return state; },
     get lastError() { return lastError; },
     get droppedMessages() { return droppedMessages; },
     peers: peerList,
     displayNameFor,
-    start: ensureStarted,
+    start: () => withStore(ensureStarted),
     startSharing,
     acceptInvite,
     completeInvite,
-    afterLocalChange,
+    afterLocalChange: () => withStore(flushLocalChange),
     setMyDisplayName,
     wave,
     isWaving,
+    rebind,
     factRows: () => cachedRows,
-    refresh: refreshRows,
+    refresh: () => withStore(refreshRows),
     onFactsChanged: subscribe(factsListeners),
     onStateChanged: subscribe(stateListeners),
     onPeersChanged: subscribe(peersListeners),

package/src/services/plan-pddl.mjs

@@ -25,6 +25,8 @@
 // is itself a declared class name is a class-to-class edge; anything else is
 // an individual-to-class edge), not a guess.
 
+import { countLabel } from "./viz-theme.mjs";
+
 const attachPrefix = (predicate) => {
   const p = String(predicate ?? "").trim();
   return p.includes(":") ? p : `mgx:${p}`;
@@ -208,7 +210,7 @@ export function planToPddl(plan, { problemName = "tmct-plan", domainName = "tmct
 
   if (actions.length) {
     lines.push("");
-    lines.push(`;; action sequence — findActionPath's own shortest path (${actions.length} move${actions.length === 1 ? "" : "s"})`);
+    lines.push(`;; action sequence — findActionPath's own shortest path (${countLabel(actions.length, "move")})`);
     actions.forEach((action, i) => {
       const before = states[i] || [];
       const after = states[i + 1] || [];

package/src/services/plan-viz.mjs

@@ -18,7 +18,7 @@
 // inline script degrades honestly when that sibling script is absent or
 // fails to load — the live controls disable themselves rather than pretend
 // to work.
-import { THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson } from "./viz-theme.mjs";
+import { THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson, countLabel } from "./viz-theme.mjs";
 import { planToPddl } from "./plan-pddl.mjs";
 
 const BOARD_W = 640;
@@ -285,10 +285,13 @@ export function renderPlanHtml({ plan, rendersAs = {}, sizeOrder = [], title } =
   const pageData = planToPageData({ plan, rendersAs, sizeOrder });
   const embedded = embedJson(pageData);
   const pddlText = planToPddl(plan);
-  const pageTitle = title || `tmct plan — ${actions.length} move${actions.length === 1 ? "" : "s"}`;
+  const pageTitle = title || `tmct plan — ${countLabel(actions.length, "move")}`;
 
   return `<!doctype html>
-<html lang="en">
+<!-- data-theme is pinned to dark on purpose: this page reads as a track/
+     timeline console, and that console stays dark under a light OS or site
+     theme too, the same way a DAW's own window does. -->
+<html lang="en" data-theme="dark">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -309,97 +312,144 @@ export function renderPlanHtml({ plan, rendersAs = {}, sizeOrder = [], title } =
 -->
 <style>
 ${THEME_TOKENS_CSS}
-html { background: var(--bg); }
-body { margin: 0; background: var(--bg); color: var(--ink); font-family: ${SERIF_STACK}; font-size: 16px; }
-main { max-width: 880px; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
-.head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
-h1 { font-size: 1.15rem; margin: 0 0 .8rem; }
-.chip { font-family: ${MONO_STACK}; font-size: .68rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .12rem .55rem; }
-.stage { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 1rem; }
+/* This console stays dark under either site theme (the html tag pins
+   data-theme="dark" above), so these extra surfaces are plain literals
+   rather than theme-reactive tokens — a track console has one lighting
+   rig, not two. --taught/--corpus/--entail/--alert still come from
+   THEME_TOKENS_CSS above and still carry the site's own provenance
+   language: taught (green) marks the actual current position, entail
+   (amber) marks tmct's own inferred step goal, corpus (blue) marks a
+   session parameter, alert (red) marks a failed solve. */
+:root {
+  --rail: #101317; --well: #0A0C0E; --strip: #1A1F25; --strip2: #20262D;
+  --taught-glow: rgba(95, 190, 139, .45); --entail-glow: rgba(217, 165, 84, .4);
+}
+html { background: var(--rail); }
+body { margin: 0; background: var(--rail); color: var(--ink); font-family: ${MONO_STACK}; font-size: 14px; }
+main { max-width: 1040px; margin: 0 auto; padding: 1.3rem 1rem 3rem; }
+button { font: inherit; }
+
+.rack { border: 1px solid var(--line); background: var(--card); }
+
+/* ---- head strip: the nameplate ---- */
+.headStrip { display: flex; justify-content: space-between; align-items: flex-end; gap: .6rem; flex-wrap: wrap; padding: .9rem 1.1rem .75rem; background: linear-gradient(180deg, var(--strip2), var(--strip)); border-bottom: 1px solid var(--line); border-radius: 9px 9px 0 0; }
+.eyebrow { font-family: ${MONO_STACK}; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
+h1 { font-family: ${SERIF_STACK}; font-size: 1.2rem; font-weight: 600; margin: 0; color: var(--ink); }
+.chip { font-family: ${MONO_STACK}; font-size: .64rem; letter-spacing: .02em; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: .22rem .6rem; background: var(--well); text-align: right; }
+
+/* ---- session strip: a channel-strip row of solve parameters ---- */
+.sessionStrip { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--strip); border-bottom: 1px solid var(--line); font-family: ${MONO_STACK}; font-size: .74rem; }
+.sessionCell { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: .55rem .95rem; border-right: 1px solid var(--line); }
+.paramLabel { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
+.sessionStrip input[type="number"] { width: 3.6rem; font-family: ${MONO_STACK}; font-size: .78rem; background: var(--well); color: var(--taught); border: 1px solid var(--line); border-radius: 4px; padding: .22rem .4rem; font-variant-numeric: tabular-nums; }
+.sessionAction { justify-content: center; }
+.sessionAction button { font-family: ${MONO_STACK}; font-size: .74rem; padding: .4rem .85rem; border-radius: 5px; border: 1px solid var(--line); background: var(--well); color: var(--ink); cursor: pointer; }
+.sessionAction button:hover:not(:disabled) { border-color: var(--corpus); color: var(--corpus); }
+.sessionAction button:focus-visible { outline: 2px solid var(--corpus); outline-offset: 2px; }
+.sessionAction button:disabled { opacity: .4; cursor: default; }
+.sessionStatus { display: flex; align-items: center; margin-left: auto; padding: 0 .95rem; color: var(--muted); }
+.sessionStatus.isError { color: var(--alert); }
+
+/* ---- transport bar ---- */
+.transport { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 1.1rem; background: var(--rail); border-bottom: 1px solid var(--line); }
+.transportButtons { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
+.transportButtons button { font-family: ${MONO_STACK}; font-size: .78rem; padding: .48rem .8rem; border: none; border-right: 1px solid var(--line); background: var(--strip); color: var(--ink); cursor: pointer; }
+.transportButtons button:last-child { border-right: none; }
+.transportButtons button:hover:not(:disabled) { background: var(--strip2); }
+.transportButtons button:focus-visible { outline: 2px solid var(--taught); outline-offset: -2px; }
+.transportButtons button[disabled] { opacity: .35; cursor: default; }
+.transportButtons #play.isPlaying { background: var(--taught-soft); color: var(--taught); }
+.lcd { margin-left: auto; background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: .45rem .75rem; min-width: 10rem; }
+#stepLabel { display: block; font-family: ${MONO_STACK}; font-size: 1rem; letter-spacing: .03em; color: var(--taught); text-shadow: 0 0 8px var(--taught-glow); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.lcdMeter { margin-top: .3rem; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
+.lcdMeterFill { height: 100%; width: 0%; background: var(--taught); box-shadow: 0 0 6px var(--taught-glow); transition: width .18s ease; }
+
+/* ---- the deck: board on the left, arrangement view on the right ---- */
+.stage { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0; }
 /* grid items refuse to shrink below their content's min-width by default, so
    the 640px board would stretch the track and the whole page with it on a
    phone — let the items shrink and the boardwrap scroll instead. */
 .stage > * { min-width: 0; }
-@media (max-width: 660px) { .stage { grid-template-columns: 1fr; } }
+.deck { padding: 1rem 1.1rem 1.1rem; border-right: 1px solid var(--line); }
+@media (max-width: 660px) { .stage { grid-template-columns: 1fr; } .deck { border-right: none; border-bottom: 1px solid var(--line); } }
 .boardwrap { overflow-x: auto; }
-.board { position: relative; width: ${BOARD_W}px; height: ${BOARD_H}px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
+.board { position: relative; width: ${BOARD_W}px; height: ${BOARD_H}px; background: var(--well); border: 1px solid var(--line); border-radius: 6px; }
 .base { position: absolute; left: 4%; right: 4%; bottom: 22px; height: 6px; background: var(--line); border-radius: 3px; }
 .post { position: absolute; bottom: 28px; width: 6px; height: 150px; background: var(--line); border-radius: 3px 3px 0 0; }
-.anchorlabel { position: absolute; bottom: 2px; transform: translateX(-50%); font-family: ${MONO_STACK}; font-size: .66rem; color: var(--muted); }
-.block { position: absolute; height: ${BLOCK_H}px; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: ${MONO_STACK}; font-size: .66rem; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
-.block.moving { z-index: 3; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
+.anchorlabel { position: absolute; bottom: 2px; transform: translateX(-50%); font-family: ${MONO_STACK}; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
+.block { position: absolute; height: ${BLOCK_H}px; border-radius: 4px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: ${MONO_STACK}; font-size: .64rem; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(0,0,0,.4); }
+.block.moving { z-index: 3; box-shadow: 0 0 0 2px var(--taught), 0 6px 14px rgba(0,0,0,.5); }
 .circle { position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--muted); transform: translate(-50%, -100%); }
 .circlelabel { position: absolute; transform: translateX(-50%); font-family: ${MONO_STACK}; font-size: .6rem; color: var(--muted); }
-.controls { display: flex; gap: .45rem; align-items: center; margin-top: .7rem; flex-wrap: wrap; }
-.controls button { font-family: ${MONO_STACK}; font-size: .78rem; padding: .3rem .7rem; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
-.controls button:hover { border-color: var(--taught); }
-.controls button:focus-visible { outline: 2px solid var(--taught); outline-offset: 2px; }
-.controls button[disabled] { opacity: .4; cursor: default; }
-.controls .step { margin-left: auto; font-family: ${MONO_STACK}; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
-.goalline { margin-top: .7rem; font-family: ${MONO_STACK}; font-size: .76rem; color: var(--taught); background: var(--taught-soft); border-radius: 6px; padding: .45rem .65rem; }
-.facts { margin-top: .7rem; font-family: ${MONO_STACK}; font-size: .7rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: .55rem; line-height: 1.7; }
+.goalline { margin-top: .8rem; font-family: ${MONO_STACK}; font-size: .76rem; color: var(--entail); background: var(--entail-soft); border: 1px solid var(--entail); border-radius: 6px; padding: .5rem .75rem; }
+.facts { margin-top: .7rem; font-family: ${MONO_STACK}; font-size: .68rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: .55rem; line-height: 1.7; }
 .facts b { color: var(--ink); }
-.movelist { list-style: none; margin: 0; padding: 0; font-family: ${MONO_STACK}; font-size: .74rem; align-self: start; }
-.movelist li { padding: .28rem .55rem; border-left: 3px solid transparent; color: var(--muted); cursor: pointer; border-radius: 0 5px 5px 0; font-variant-numeric: tabular-nums; }
-.movelist li:hover { color: var(--ink); }
-.movelist li.done { color: var(--ink); }
-.movelist li.current { border-left-color: var(--taught); color: var(--ink); background: var(--taught-soft); font-weight: 700; }
-.movelist .phasehead { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; border-left: 3px solid var(--taught); margin-top: .5rem; }
+.movelist { list-style: none; margin: 0; padding: .5rem; font-family: ${MONO_STACK}; font-size: .72rem; align-self: start; }
+.movelist .phasehead { display: block; background: var(--strip); border: 1px solid var(--line); border-left: 3px solid var(--corpus); border-radius: 4px; padding: .35rem .55rem; margin: .55rem 0 .3rem; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
 .movelist .phasehead:first-child { margin-top: 0; }
-.movelist .phasehead:hover { color: var(--taught); background: var(--taught-soft); }
+.movelist .phasehead:hover { color: var(--ink); border-left-color: var(--taught); }
 .movelist .phasehead:focus-visible { outline: 2px solid var(--taught); outline-offset: 2px; }
-@media (prefers-reduced-motion: reduce) { .block { transition: none !important; } }
-.liveControls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-family: ${MONO_STACK}; font-size: .74rem; }
-.liveControls label { display: flex; align-items: center; gap: .35rem; color: var(--muted); }
-.liveControls input[type="number"] { width: 3.6rem; font-family: ${MONO_STACK}; font-size: .74rem; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: .2rem .4rem; }
-.liveControls button { font-family: ${MONO_STACK}; font-size: .74rem; padding: .3rem .7rem; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
-.liveControls button:hover:not(:disabled) { border-color: var(--taught); }
-.liveControls button:focus-visible { outline: 2px solid var(--taught); outline-offset: 2px; }
-.liveControls button:disabled { opacity: .4; cursor: default; }
-.liveControls .livestatus { color: var(--muted); margin-left: auto; }
-.lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1.2rem; }
+.movelist li:not(.phasehead) { padding: .38rem .55rem; margin: .12rem 0; border: 1px solid transparent; border-radius: 4px; color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; opacity: .55; }
+.movelist li:not(.phasehead):hover { color: var(--ink); border-color: var(--line); opacity: 1; }
+.movelist li.done { color: var(--ink); background: var(--strip); opacity: 1; }
+.movelist li.current { color: var(--ink); background: var(--taught-soft); border-color: var(--taught); box-shadow: inset 3px 0 0 var(--taught); font-weight: 700; opacity: 1; }
+@media (prefers-reduced-motion: reduce) { .block, .lcdMeterFill { transition: none !important; } }
+
+/* ---- lower rack: two channel strips, teach dock and PDDL artifact ---- */
+.lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
 @media (max-width: 780px) { .lower { grid-template-columns: 1fr; } }
-.chat, .pddlpanel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; min-width: 0; }
-.chat h2, .pddlpanel h2 { font-family: ${MONO_STACK}; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 .5rem; }
+.chat, .pddlpanel { background: var(--card); padding: .65rem .8rem; min-width: 0; }
+.chat { border-right: 1px solid var(--line); }
+@media (max-width: 780px) { .chat { border-right: none; border-bottom: 1px solid var(--line); } }
+.chat h2, .pddlpanel h2 { font-family: ${MONO_STACK}; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 .5rem; }
 .chatlog { display: flex; flex-direction: column; gap: .4rem; max-height: 180px; 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: .85rem; line-height: 1.4; white-space: pre-wrap; }
+.chatlog .a { font-family: ${SERIF_STACK}; font-size: .87rem; line-height: 1.45; white-space: pre-wrap; color: var(--ink); }
 .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 { flex: 1; font-family: ${MONO_STACK}; font-size: .78rem; background: var(--well); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: .34rem .55rem; min-width: 0; }
 .chatask input:focus-visible { outline: 2px solid var(--taught); outline-offset: 2px; }
 .chatpills { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
-.pill { font-family: ${MONO_STACK}; font-size: .68rem; padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); cursor: pointer; white-space: nowrap; }
-.pill:hover { border-color: var(--taught); }
+.pill { font-family: ${MONO_STACK}; font-size: .66rem; padding: .22rem .6rem; border: 1px solid var(--line); border-radius: 99px; background: var(--well); color: var(--ink); cursor: pointer; white-space: nowrap; }
+.pill:hover { border-color: var(--taught); color: var(--taught); }
 .pill:focus-visible { outline: 2px solid var(--taught); outline-offset: 2px; }
-.pddlpanel pre { margin: 0; font-family: ${MONO_STACK}; font-size: .68rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto; color: var(--ink); }
+.pddlpanel pre { margin: 0; font-family: ${MONO_STACK}; font-size: .67rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto; color: var(--ink); background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: .6rem .7rem; }
 </style>
 </head>
 <body>
 <main>
-  <div class="head">
-    <h1 id="pageTitle">${escapeHtml(pageTitle)}</h1>
+<div class="rack">
+  <div class="headStrip">
+    <div>
+      <div class="eyebrow">tmct &middot; plan</div>
+      <h1 id="pageTitle">${escapeHtml(pageTitle)}</h1>
+    </div>
     <span class="chip">blocks archetype · ${pageData.layouts.length} snapshots · plan: findActionPath</span>
   </div>
-  <div class="liveControls" id="liveControls">
-    <label for="diskCount">disks <input id="diskCount" type="number" min="1" max="7" value="3"></label>
-    <label for="maxDepth">max search depth <input id="maxDepth" type="number" min="1" max="999" value="300"></label>
-    <button id="resolveBtn" type="button">solve a fresh puzzle</button>
-    <span class="livestatus" id="liveStatus"></span>
+  <div class="sessionStrip" id="liveControls">
+    <label class="sessionCell" for="diskCount"><span class="paramLabel">disks</span><input id="diskCount" type="number" min="1" max="7" value="3"></label>
+    <label class="sessionCell" for="maxDepth"><span class="paramLabel">max depth</span><input id="maxDepth" type="number" min="1" max="999" value="300"></label>
+    <div class="sessionCell sessionAction"><button id="resolveBtn" type="button">solve a fresh puzzle</button></div>
+    <span class="sessionStatus" id="liveStatus"></span>
+  </div>
+  <div class="transport">
+    <div class="transportButtons">
+      <button id="reset" aria-label="Reset to start">⏮ reset</button>
+      <button id="back" aria-label="Step back">◀ back</button>
+      <button id="play" aria-label="Play">▶ play</button>
+      <button id="next" aria-label="Step forward">step ▶</button>
+    </div>
+    <div class="lcd">
+      <span id="stepLabel"></span>
+      <div class="lcdMeter"><div class="lcdMeterFill" id="stepMeter"></div></div>
+    </div>
   </div>
   <div class="stage">
-    <div>
+    <div class="deck">
       <div class="boardwrap"><div class="board" id="board" aria-label="plan board"></div></div>
-      <div class="controls">
-        <button id="reset" aria-label="Reset to start">⏮ reset</button>
-        <button id="back" aria-label="Step back">◀ back</button>
-        <button id="play" aria-label="Play">▶ play</button>
-        <button id="next" aria-label="Step forward">step ▶</button>
-        <span class="step" id="stepLabel"></span>
-      </div>
       <div class="goalline" id="goalline" hidden></div>
       <div class="facts" id="facts"></div>
     </div>
@@ -423,6 +473,7 @@ h1 { font-size: 1.15rem; margin: 0 0 .8rem; }
       <pre id="pddlOut">${escapeHtml(pddlText)}</pre>
     </div>
   </div>
+</div>
 </main>
 <script>
 const PLAN = ${embedded};
@@ -431,6 +482,8 @@ const PLAN = ${embedded};
 <script>
 (function () {
   "use strict";
+  const escapeHtml = ${escapeHtml.toString()};
+  const countLabel = ${countLabel.toString()};
   // Best-effort: a copy of this page opened without the sibling worker file
   // (a tmct --render plan --output file, a file:// open) just swallows the
   // registration failure and works exactly as before.
@@ -438,6 +491,7 @@ const PLAN = ${embedded};
   const pageTitleEl = document.getElementById("pageTitle");
   const board = document.getElementById("board");
   const stepLabel = document.getElementById("stepLabel");
+  const stepMeterEl = document.getElementById("stepMeter");
   const goalline = document.getElementById("goalline");
   const factsEl = document.getElementById("facts");
   const movelist = document.getElementById("movelist");
@@ -511,6 +565,7 @@ const PLAN = ${embedded};
   function render() {
     const phase = phaseFor(step);
     stepLabel.textContent = "step " + step + " / " + N + (phase ? " · " + phase : "");
+    if (stepMeterEl) stepMeterEl.style.width = (N ? Math.min(step, N) / N * 100 : 0) + "%";
     if (plan.stepGoals) {
       goalline.hidden = false;
       goalline.textContent = step < N
@@ -520,7 +575,7 @@ const PLAN = ${embedded};
       goalline.hidden = true;
     }
     factsEl.innerHTML = "<b>board@step" + step + "</b> — " +
-      plan.facts[step].map((f) => f.replace(/&/g, "&amp;").replace(/</g, "&lt;")).join(" · ") +
+      plan.facts[step].map((f) => escapeHtml(f)).join(" · ") +
       ' <span style="opacity:.7">(plan: findActionPath)</span>';
     [...movelist.querySelectorAll("li:not(.phasehead)")].forEach((li, i) => {
       li.classList.toggle("done", i < step);
@@ -529,6 +584,7 @@ const PLAN = ${embedded};
     btn.back.disabled = step === 0 || animating;
     btn.next.disabled = step === N || animating;
     btn.play.textContent = playing ? "⏸ pause" : (step === N ? "▶ replay" : "▶ play");
+    btn.play.classList.toggle("isPlaying", playing);
   }
   async function forward() {
     if (animating || step >= N) return;
@@ -625,6 +681,7 @@ const PLAN = ${embedded};
   const liveAvailable = typeof tmctPlan !== "undefined" && typeof tmctPlan.createPlanSession === "function";
   if (!liveAvailable) {
     liveStatusEl.textContent = "live re-solve unavailable here — showing the baked-in replay only.";
+    liveStatusEl.classList.add("isError");
     resolveBtn.disabled = true;
   } else {
     let session = null;
@@ -698,13 +755,15 @@ const PLAN = ${embedded};
       const d = Math.max(1, parseInt(maxDepthEl.value, 10) || 300);
       diskCountEl.value = n; maxDepthEl.value = d;
       liveStatusEl.textContent = "solving a " + n + "-disk puzzle…";
+      liveStatusEl.classList.remove("isError");
       await tryLoadWink();
       session = await tmctPlan.createPlanSession({ diskCount: n, maxDepth: d });
       if (session.plan) {
         applyPlan(session.plan);
-        liveStatusEl.textContent = "live — " + n + " disk" + (n === 1 ? "" : "s") + ", max depth " + d + ".";
+        liveStatusEl.textContent = "live — " + countLabel(n, "disk", "disks") + ", max depth " + d + ".";
       } else {
         liveStatusEl.textContent = "no plan found within " + d + " moves — raise max search depth and try again.";
+        liveStatusEl.classList.add("isError");
       }
       resolveBtn.disabled = false;
     }));