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

package/src/services/ledger-viz.mjs

@@ -15,14 +15,54 @@
 // doesn't do: it reads the checked-in chat-dock engine bundle.
 
 import { loadMemory, readFactRows, findContradictions, normFactTerm } from "../adapters/memory/core.mjs";
-import { THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson } from "./viz-theme.mjs";
+import { THEME_TOKENS_CSS, MONO_STACK, escapeHtml, embedJson, countLabel, TOKENS } from "./viz-theme.mjs";
 import { createTicker, prefersReducedMotion } from "./viz-ticker.mjs";
+import { bfsLevels } from "../domain/planning.mjs";
+import { pluralOf } from "../domain/inflect.mjs";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 
 const LEDGER_ROW_LIMIT_DEFAULT = 20000;
 
+// The ledger reads as an observability dashboard (dense stat tiles, bar
+// panels, a log-style fact stream) rather than an editorial page, so its
+// chrome runs the system sans everywhere instead of THEME_TOKENS_CSS's
+// serif body face; MONO_STACK still carries every metric, label, and log row.
+const DASH_SANS_STACK = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
+
+// This page pins a dark, New-Relic-style dashboard register in BOTH site
+// themes — a deliberate departure from THEME_TOKENS_CSS's light/dark switch,
+// which every other generated page still follows. --taught/--corpus/--entail/
+// --alert stay the shared semantic provenance tokens; here they're pinned to
+// their dark-theme-friendly values, read straight off viz-theme.mjs's own
+// exported TOKENS.dark table so this page's palette can never drift from the
+// one every other generated page's dark mode uses. The tier alphas (.35/.65/1)
+// match TOKENS's own tier scale; the four "soft" tints use higher alphas than
+// THEME_TOKENS_CSS's shared soft tokens on purpose — this dashboard chrome
+// wants a more visible tint against its always-dark background than the
+// light/dark-switching pages need, so those four alphas stay page-specific.
+function hexRgb(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
+}
+const DASH_DARK_CHROME_CSS = (() => {
+  const t = TOKENS.dark;
+  const [taught, corpus, entail] = [hexRgb(t.taught), hexRgb(t.corpus), hexRgb(t.entail)];
+  return `
+  :root { color-scheme: dark; }
+  body {
+    --bg: ${t.bg}; --ink: ${t.ink}; --muted: ${t.muted}; --line: ${t.line}; --card: ${t.card};
+    --taught: ${t.taught}; --corpus: ${t.corpus}; --entail: ${t.entail}; --alert: ${t.alert};
+    --taught-t1: rgba(${taught},.35); --taught-t2: rgba(${taught},.65); --taught-t3: rgba(${taught},1);
+    --corpus-t1: rgba(${corpus},.35); --corpus-t2: rgba(${corpus},.65); --corpus-t3: rgba(${corpus},1);
+    --entail-t1: rgba(${entail},.35); --entail-t2: rgba(${entail},.65); --entail-t3: rgba(${entail},1);
+    --taught-soft: rgba(${taught},.14); --corpus-soft: rgba(${corpus},.14);
+    --entail-soft: rgba(${entail},.16); --alert-soft: rgba(${hexRgb(t.alert)},.16);
+  }
+`;
+})();
+
 /** Read the checked-in browser memory-ask-engine bundle
  *  (`src/surfaces/web/memory-ask-browser.bundle.js`) — the real memory-graph answer engine
  *  (chat.mjs's factAnswer/factReadBack) the chat dock runs on. Returns `""`,
@@ -407,7 +447,7 @@ function dashboardHtml(stats, { fresh = false } = {}) {
   const total = s.totalFacts || 0;
   const freshCls = fresh ? " fresh" : "";
   if (!total) {
-    return `<section class="dash${freshCls}" id="dash" aria-label="Ledger metrics"><div class="tile"><span class="tile-label">facts.total</span><span class="tile-value">0</span><span class="tile-sub">nothing taught yet</span></div></section>`;
+    return `<section class="dash${freshCls}" id="dash" aria-label="Ledger metrics"><div class="kpirow"><div class="tile"><span class="tile-label">facts.total</span><span class="tile-value">0</span><span class="tile-sub">nothing taught yet</span></div></div></section>`;
   }
   const terms = s.totalTerms || 0;
   const qualityCls = s.contradictionCount > 0 ? " tile-alert" : "";
@@ -415,33 +455,42 @@ function dashboardHtml(stats, { fresh = false } = {}) {
   const predicatesHtml = s.predicates?.length
     ? microbarsHtml(s.predicates.map((p) => ({ label: p.phrase || p.predicate, count: p.count })))
     : `<span class="tile-sub">none yet</span>`;
+  // Two explicit-column grids — a 4-up KPI row, then a 2-up row of bar-chart
+  // tiles — instead of one auto-fill grid: auto-fill's column count depends
+  // on viewport width, so a wide-tile mid-row wrap used to strand empty
+  // tracks on the right of both rows. Both stay `.tile` (the dashboard-strip
+  // e2e test counts six of them under `.dash`, whatever their sub-grid).
   return `<section class="dash${freshCls}" id="dash" aria-label="Ledger metrics">
-    <div class="tile">
-      <span class="tile-label">facts.total</span>
-      <span class="tile-value">${total}</span>
-      <span class="tile-sub">${terms} term${terms === 1 ? "" : "s"} tracked</span>
-    </div>
-    <div class="tile tile-wide">
-      <span class="tile-label">facts.by-tier</span>
-      ${tierTileHtml(s.byProv || {}, total)}
-    </div>
-    <div class="tile">
-      <span class="tile-label">graph.avg-degree</span>
-      <span class="tile-value">${(s.density || 0).toFixed(1)}</span>
-      <span class="tile-sub">facts per term</span>
-    </div>
-    <div class="tile${qualityCls}">
-      <span class="tile-label">data.quality</span>
-      <span class="tile-value">${s.contradictionCount || 0}</span>
-      <span class="tile-sub">term${s.contradictionCount === 1 ? "" : "s"} with more than one answer</span>
-    </div>
-    <div class="tile tile-wide">
-      <span class="tile-label">corpus.bundles</span>
-      <div class="bundlebars">${bundlesHtml}</div>
+    <div class="kpirow">
+      <div class="tile">
+        <span class="tile-label">facts.total</span>
+        <span class="tile-value">${total}</span>
+        <span class="tile-sub">${countLabel(terms, "term")} tracked</span>
+      </div>
+      <div class="tile tile-tier">
+        <span class="tile-label">facts.by-tier</span>
+        ${tierTileHtml(s.byProv || {}, total)}
+      </div>
+      <div class="tile">
+        <span class="tile-label">graph.avg-degree</span>
+        <span class="tile-value">${(s.density || 0).toFixed(1)}</span>
+        <span class="tile-sub">facts per term</span>
+      </div>
+      <div class="tile${qualityCls}">
+        <span class="tile-label">data.quality</span>
+        <span class="tile-value">${s.contradictionCount || 0}</span>
+        <span class="tile-sub">${s.contradictionCount === 1 ? "term" : pluralOf("term")} with more than one answer</span>
+      </div>
     </div>
-    <div class="tile tile-wide">
-      <span class="tile-label">predicate.top</span>
-      <div class="bundlebars">${predicatesHtml}</div>
+    <div class="barpanels">
+      <div class="tile tile-bars">
+        <span class="tile-label">corpus.bundles</span>
+        <div class="bundlebars">${bundlesHtml}</div>
+      </div>
+      <div class="tile tile-bars">
+        <span class="tile-label">predicate.top</span>
+        <div class="bundlebars">${predicatesHtml}</div>
+      </div>
     </div>
   </section>`;
 }
@@ -508,7 +557,7 @@ export function renderLedgerHtml({ rows, terms, edges, focus, contradictions, wo
   const ledgerJson = embedJson({ rows: rows || [], terms: terms || [], edges: edges || [], focus: focus || null, contradictions: contradictions || [], worthALook: worthALook || null, meta: meta || { shown: 0, total: 0, truncated: false }, focusDigest: focusDigest || null, digestStructures: Array.isArray(digestStructures) ? digestStructures : [] });
   const payloadJson = embedJson(payload || { individuals: [], objectProperties: [] });
   const shown = meta?.shown ?? (rows || []).length;
-  const title = `tmct ledger — ${shown} fact${shown === 1 ? "" : "s"}${focus ? ` (focus: ${escapeHtml(focus)})` : ""}`;
+  const title = `tmct ledger — ${countLabel(shown, "fact")}${focus ? ` (focus: ${escapeHtml(focus)})` : ""}`;
   const bundleStr = typeof memoryAskBundle === "string" ? memoryAskBundle : "";
   const hasMemChat = bundleStr.length > 0;
   // The placeholder is honest: the canonical exchange only when its terms are
@@ -534,7 +583,7 @@ export function renderLedgerHtml({ rows, terms, edges, focus, contradictions, wo
           <button type="button" id="ingestToggle" class="dockbtn">ingest text&hellip;</button>
           <button type="button" id="exportFacts" class="dockbtn">export facts</button>
         </div>
-        <div class="researchrow" title="Fetches the topic from Simple English Wikipedia into this graph, then queues the topics its lead section links to — each queued topic runs as its own dock turn, paced politely. Asking is the network consent for these fetches.">
+        <div class="researchrow" title="Fetches the topic from Simple English Wikipedia into this graph, then queues the topics its lead section links to. Each queued topic runs as its own dock turn, paced politely. Asking is the network consent for these fetches.">
           <label for="researchTopic" class="mono">research:</label>
           <input id="researchTopic" type="text" autocomplete="off" spellcheck="false"
             placeholder="a topic, e.g. owls" aria-label="Topic to research on Simple English Wikipedia">
@@ -544,7 +593,7 @@ export function renderLedgerHtml({ rows, terms, edges, focus, contradictions, wo
         </div>
         <div class="ingestpanel" id="ingestPanel" hidden>
           <textarea id="ingestText" spellcheck="false" aria-label="Text to ingest into the graph"
-            placeholder="Paste text or drop a .txt/.md file. Each sentence it recognizes as a fact is added to the graph; the rest are skipped honestly."></textarea>
+            placeholder="Paste text or drop a .txt/.md file. Each sentence it recognizes as a fact is added to the graph. The rest are skipped."></textarea>
           <div class="ingestrow">
             <button type="button" class="dockbtn" id="ingestBrowse">browse&hellip;</button>
             <input type="file" id="ingestFile" accept=".txt,.md,text/plain,text/markdown" hidden>
@@ -562,7 +611,7 @@ export function renderLedgerHtml({ rows, terms, edges, focus, contradictions, wo
         </form>
         ${ingestHtml}
       </div>`
-    : `<div class="chat chat-off"><p class="chatnote">chat unavailable — run <span class="mono">npm run build:ask-bundle</span> to enable the in-page ask engine.</p></div>`;
+    : `<div class="chat chat-off"><p class="chatnote">Chat unavailable. Run <span class="mono">npm run build:ask-bundle</span> to enable the in-page ask engine.</p></div>`;
 
   return `<!doctype html>
 <html lang="en">
@@ -587,46 +636,52 @@ export function renderLedgerHtml({ rows, terms, edges, focus, contradictions, wo
 -->
 <style>
 ${THEME_TOKENS_CSS}
+${DASH_DARK_CHROME_CSS}
   html { background: var(--bg); }
-  body { margin: 0; background: var(--bg); color: var(--ink); font-family: ${SERIF_STACK}; font-size: 16px; line-height: 1.5; }
+  body { margin: 0; background: var(--bg); color: var(--ink); font-family: ${DASH_SANS_STACK}; font-size: 15px; line-height: 1.5; }
   .mono { font-family: ${MONO_STACK}; }
-  main { max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
+  main { max-width: 1200px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
   .eyebrow { font-family: ${MONO_STACK}; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: .4em 1.2em; margin-bottom: .9rem; }
   button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
-  button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
-  .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .5rem 0; margin-bottom: 1.1rem; }
+  button:focus-visible, input:focus-visible { outline: 2px solid var(--corpus); outline-offset: 2px; border-radius: 4px; }
+  .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .7rem; margin-bottom: 1.1rem; }
   .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .78rem; }
   .crumbs .sep { color: var(--muted); }
-  .crumb { font-family: ${MONO_STACK}; font-size: .74rem; padding: .12rem .5rem; border: 1px solid var(--line); border-radius: 99px; background: var(--card); }
+  .crumb { font-family: ${MONO_STACK}; font-size: .74rem; padding: .12rem .5rem; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); }
   .crumb[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
   .search { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
-  .search input { font-family: ${MONO_STACK}; font-size: .78rem; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .6rem; width: 170px; }
+  .search input { font-family: ${MONO_STACK}; font-size: .78rem; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .6rem; width: 170px; }
   .search .miss { font-size: .72rem; color: var(--alert); font-family: ${MONO_STACK}; }
-  .dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .6rem; margin: 0 0 1.1rem; }
-  .tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem .6rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
-  .tile-wide { grid-column: span 2; }
-  .tile-alert { border-color: var(--alert); }
+  /* Two explicit-column grids instead of one auto-fill grid: a 4-up KPI row,
+     then a 2-up row of bar-chart tiles, so both rows fill the container's
+     full width at any viewport rather than stranding a leftover track. */
+  .dash { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.1rem; }
+  .kpirow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
+  .barpanels { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
+  @media (max-width: 700px) { .kpirow { grid-template-columns: repeat(2, 1fr); } .barpanels { grid-template-columns: 1fr; } }
+  .tile { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 6px; padding: .6rem .75rem .65rem; display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
+  .tile-alert { border-left-color: var(--alert); }
   .tile-label { font-family: ${MONO_STACK}; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
-  .tile-value { font-family: ${MONO_STACK}; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
+  .tile-value { font-family: ${MONO_STACK}; font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
   .tile-alert .tile-value { color: var(--alert); }
   .tile-sub { font-family: ${MONO_STACK}; font-size: .68rem; color: var(--muted); }
-  .tierbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--line); margin-top: .3rem; }
+  .tierbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--line); margin-top: .35rem; }
   .tseg { height: 100%; }
   .tseg.t-taught { background: var(--taught); } .tseg.t-corpus { background: var(--corpus); } .tseg.t-entail { background: var(--entail); }
   .tierlegend { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin-top: .35rem; font-family: ${MONO_STACK}; font-size: .65rem; }
   .tleg.t-taught { color: var(--taught); } .tleg.t-corpus { color: var(--corpus); } .tleg.t-entail { color: var(--entail); }
-  .bundlebars { display: flex; flex-direction: column; gap: .22rem; margin-top: .35rem; }
-  .bbar { display: grid; grid-template-columns: minmax(0,1fr) 3.4rem 1.6rem; align-items: center; gap: .4rem; font-family: ${MONO_STACK}; font-size: .68rem; }
+  .bundlebars { display: flex; flex-direction: column; gap: .26rem; margin-top: .4rem; }
+  .bbar { display: grid; grid-template-columns: minmax(0,1fr) 3.4rem 1.6rem; align-items: center; gap: .4rem; font-family: ${MONO_STACK}; font-size: .7rem; }
   .bblabel { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .bbtrack { background: var(--line); border-radius: 99px; height: 5px; overflow: hidden; }
-  .bbfill { display: block; height: 100%; background: var(--ink); opacity: .55; border-radius: 99px; }
+  .bbfill { display: block; height: 100%; background: var(--ink); opacity: .6; border-radius: 99px; }
   .bbn { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
   .sparkwrap { margin-top: .5rem; }
   .spark { display: block; width: 100%; height: 44px; }
   .spark .fill { fill: var(--muted); opacity: .18; stroke: none; }
   .spark .line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
   .spark .dot { fill: var(--ink); }
-  .app { display: grid; grid-template-columns: 190px minmax(0,1fr) 230px; gap: 1.3rem; grid-template-areas: "rail ledger aside"; }
+  .app { display: grid; grid-template-columns: 190px minmax(0,1fr) 240px; gap: 1.1rem; grid-template-areas: "rail ledger aside"; align-items: start; }
   .rail { grid-area: rail; } .ledger { grid-area: ledger; } .aside { grid-area: aside; }
   @media (max-width: 880px) { .app { grid-template-columns: 1fr; grid-template-areas: "ledger" "aside" "rail"; } .search { margin-left: 0; } }
   .rail h2, .aside h2 { font-family: ${MONO_STACK}; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 1rem 0 .4rem; }
@@ -641,7 +696,7 @@ ${THEME_TOKENS_CSS}
   .seg.on.neutral { background: var(--ink); color: var(--bg); } .seg.on.neutral .n { color: var(--bg); }
   .seg.on.c-taught { background: var(--taught); } .seg.on.c-corpus { background: var(--corpus); } .seg.on.c-entail { background: var(--entail); }
   .d-taught { background: var(--taught); } .d-corpus { background: var(--corpus); } .d-entail { background: var(--entail); }
-  .focuscard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; }
+  .focuscard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .85rem 1rem; margin-bottom: 1rem; }
   .focuscard .term { font-size: 1.35rem; font-weight: 700; }
   .focuscard .klass, .focuscard .stats { font-family: ${MONO_STACK}; font-size: .72rem; color: var(--muted); margin-top: .3rem; font-variant-numeric: tabular-nums; }
   .focuscard .focusdigest { margin-top: .7rem; font-size: .92rem; line-height: 1.5; }
@@ -656,8 +711,13 @@ ${THEME_TOKENS_CSS}
   .group { margin: 1.1rem 0; }
   .group h3 { font-family: ${MONO_STACK}; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 .35rem; display: flex; align-items: baseline; gap: .5rem; }
   .group h3::after { content: ""; flex: 1; border-top: 1px solid var(--line); transform: translateY(-.2em); }
-  .rows { display: flex; flex-direction: column; gap: .35rem; }
-  .row { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; padding: .45rem .75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; font-size: .95rem; }
+  /* The fact stream reads as a dense query-result log: full-width rows, a
+     hairline between each, a provenance-colored left rail, no per-row card
+     chrome. */
+  .rows { display: flex; flex-direction: column; }
+  .row { background: transparent; border: none; border-left: 3px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: .42rem .7rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; font-family: ${MONO_STACK}; font-size: .82rem; }
+  .rows .row:last-child { border-bottom: none; }
+  .row:hover { background: var(--line); }
   .row.p-taught.t3 { border-left-color: var(--taught-t3); } .row.p-taught.t2 { border-left-color: var(--taught-t2); } .row.p-taught.t1 { border-left-color: var(--taught-t1); }
   .row.p-corpus.t3 { border-left-color: var(--corpus-t3); } .row.p-corpus.t2 { border-left-color: var(--corpus-t2); } .row.p-corpus.t1 { border-left-color: var(--corpus-t1); }
   .row.p-entail.t3 { border-left-color: var(--entail-t3); } .row.p-entail.t2 { border-left-color: var(--entail-t2); } .row.p-entail.t1 { border-left-color: var(--entail-t1); }
@@ -668,18 +728,18 @@ ${THEME_TOKENS_CSS}
   .prov.p-taught { color: var(--taught); background: var(--taught-soft); }
   .prov.p-corpus { color: var(--corpus); background: var(--corpus-soft); }
   .prov.p-entail { color: var(--entail); background: var(--entail-soft); }
-  .contra { border: 1px solid var(--alert); border-radius: 10px; padding: .5rem; margin-top: .35rem; }
+  .contra { border: 1px solid var(--alert); border-radius: 6px; padding: .5rem; margin-top: .35rem; }
   .contra .label { font-family: ${MONO_STACK}; font-size: .66rem; color: var(--alert); margin: 0 0 .35rem .2rem; }
-  .empty { color: var(--muted); font-size: .9rem; border: 1px dashed var(--line); border-radius: 8px; padding: .8rem 1rem; }
+  .empty { color: var(--muted); font-size: .88rem; border: 1px dashed var(--line); border-radius: 6px; padding: .8rem 1rem; }
   .looks { display: flex; flex-direction: column; gap: .45rem; }
-  .look { display: block; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; font-size: .8rem; width: 100%; }
+  .look { display: block; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .65rem; font-size: .8rem; width: 100%; }
   .look:hover { border-color: var(--ink); }
   .look .tag { display: block; font-family: ${MONO_STACK}; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .18rem; }
   .look.k-taught .tag { color: var(--taught); } .look.k-alert .tag { color: var(--alert); } .look.k-hub .tag { color: var(--corpus); }
-  .mapwrap { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .45rem; margin-top: .45rem; }
+  .mapwrap { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .45rem; margin-top: .45rem; }
   .mapwrap canvas { display: block; width: 100%; height: 160px; cursor: pointer; }
   .mapnote { font-family: ${MONO_STACK}; font-size: .62rem; color: var(--muted); margin: .3rem .2rem 0; }
-  .chat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .65rem .85rem; margin-bottom: 1rem; }
+  .chat { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .65rem .85rem; margin-bottom: 1rem; }
   .chatlog { display: flex; flex-direction: column; gap: .45rem; max-height: 220px; overflow-y: auto; }
   .chatlog:empty { display: none; }
   .chatlog .u { font-family: ${MONO_STACK}; font-size: .76rem; color: var(--muted); }
@@ -712,6 +772,7 @@ ${THEME_TOKENS_CSS}
   .ingeststatus { font-size: .68rem; color: var(--muted); }
   @media (prefers-reduced-motion: no-preference) {
     .seg, .chip, .look { transition: border-color .12s ease, background-color .12s ease; }
+    .row { transition: background-color .1s ease; }
     /* A live teach re-render swaps the dash section wholesale (dashboardHtml
        is called again in full — see the inline script below), so the "this
        just changed" signal has to be an animation on the fresh markup itself,
@@ -784,6 +845,11 @@ ${ledgerBundleAvailable ? `<script src="./ledger-browser.bundle.js"></script>` :
   // escapeHtml/pct by their real names) resolve without a second copy.
   const escapeHtml = esc;
   const pct = ${pct.toString()};
+  // pluralOf underlies countLabel's own default-parameter lookup — spliced
+  // ahead of it so that lookup resolves the same way it does node-side.
+  const pluralOf = ${pluralOf.toString()};
+  const countLabel = ${countLabel.toString()};
+  const bfsLevels = ${bfsLevels.toString()};
   const tierTileHtml = ${tierTileHtml.toString()};
   const microbarsHtml = ${microbarsHtml.toString()};
   const dashboardHtml = ${dashboardHtml.toString()};
@@ -916,7 +982,7 @@ ${ledgerBundleAvailable ? `<script src="./ledger-browser.bundle.js"></script>` :
       : "";
     let html = '<div class="focuscard"><div class="term">' + esc(focus) + "</div>" +
       '<div class="klass">' + (klass ? esc(klass.phrase + " " + klass.o) : "no class recorded") + "</div>" +
-      '<div class="stats">' + all.length + " facts &middot; " + srcs.size + " source" + (srcs.size === 1 ? "" : "s") +
+      '<div class="stats">' + countLabel(all.length, "fact") + " &middot; " + countLabel(srcs.size, "source") +
       (dates.length ? " &middot; first " + esc(dates[0].slice(0, 10)) + " &middot; last " + esc(dates[dates.length - 1].slice(0, 10)) : "") + "</div>" + digestHtml + "</div>";
     const bracketed = new Set();
     for (const fam of FAMS) {
@@ -934,7 +1000,7 @@ ${ledgerBundleAvailable ? `<script src="./ledger-browser.bundle.js"></script>` :
       for (const [, grp] of groupsHere) {
         if (grp.length < 2) continue;
         grp.forEach((r) => bracketed.add(r.id));
-        inner += '<div class="contra"><p class="label">more than one answer on record &mdash; shown, never merged</p><div class="rows">' + grp.map(rowHtml).join("") + "</div></div>";
+        inner += '<div class="contra"><p class="label">more than one answer on record, shown, not merged</p><div class="rows">' + grp.map(rowHtml).join("") + "</div></div>";
       }
       html += '<div class="group"><h3>' + esc(FAM_LABEL[fam]) + '</h3><div class="rows">' + inner + "</div></div>";
     }
@@ -952,7 +1018,7 @@ ${ledgerBundleAvailable ? `<script src="./ledger-browser.bundle.js"></script>` :
       looks.push({ cls: "k-taught", tag: "newest teach", target: w.newestTaught.term, body: r ? esc(r.s + " " + r.phrase + " " + r.o) : esc(w.newestTaught.term) });
     }
     if (w.contradictions && w.contradictions.count) {
-      looks.push({ cls: "k-alert", tag: w.contradictions.count + " with more than one answer", target: w.contradictions.firstFocusTerm, body: '<span class="mono">' + esc(w.contradictions.firstFocusTerm) + "</span> has answers that differ &mdash; read both" });
+      looks.push({ cls: "k-alert", tag: w.contradictions.count + " with more than one answer", target: w.contradictions.firstFocusTerm, body: '<span class="mono">' + esc(w.contradictions.firstFocusTerm) + "</span> has answers that differ. Read both." });
     }
     if (w.biggestHub) {
       looks.push({ cls: "k-hub", tag: "biggest hub", target: w.biggestHub.term, body: '<span class="mono">' + esc(w.biggestHub.term) + "</span> touches " + w.biggestHub.degree + " facts" });
@@ -979,13 +1045,16 @@ ${ledgerBundleAvailable ? `<script src="./ledger-browser.bundle.js"></script>` :
     if (!focus) return;
     const color = { taught: cssVar("--taught"), corpus: cssVar("--corpus"), entailed: cssVar("--entail"), entail: cssVar("--entail") };
     const lineC = cssVar("--line"), inkC = cssVar("--ink");
-    const hop1 = new Set(), hop2 = new Set();
-    for (const e of LEDGER.edges) { if (e.s === focus) hop1.add(e.o); if (e.o === focus) hop1.add(e.s); }
-    hop1.delete(focus);
-    for (const e of LEDGER.edges) {
-      if (hop1.has(e.s) && e.o !== focus && !hop1.has(e.o)) hop2.add(e.o);
-      if (hop1.has(e.o) && e.s !== focus && !hop1.has(e.s)) hop2.add(e.s);
-    }
+    const neighborsOf = (term) => {
+      const out = [];
+      for (const e of LEDGER.edges) {
+        if (e.s === term) out.push(e.o);
+        else if (e.o === term) out.push(e.s);
+      }
+      return out;
+    };
+    const [hop1Level, hop2Level] = bfsLevels(focus, neighborsOf, { maxDepth: 2 });
+    const hop1 = new Set(hop1Level || []), hop2 = new Set(hop2Level || []);
     const cx = w / 2, cy = h / 2, r1 = 42, r2 = 68;
     const pos = { [focus]: { x: cx, y: cy } };
     const place = (set, r) => { const a = [...set].sort(); a.forEach((t, i) => { const ang = (2 * Math.PI * i) / a.length - Math.PI / 2; pos[t] = { x: cx + r * Math.cos(ang), y: cy + r * Math.sin(ang) }; }); };
@@ -1222,7 +1291,7 @@ ${ledgerBundleAvailable ? `<script src="./ledger-browser.bundle.js"></script>` :
             const fresh = tmctLedger.computeLedgerDataFromPayload(s.memoryDir.payload, {});
             applyLedgerData(fresh);
             const skipped = sentences.length - grounded;
-            statusEl.textContent = sentences.length + " sentence" + (sentences.length === 1 ? "" : "s")
+            statusEl.textContent = countLabel(sentences.length, "sentence")
               + ", " + grounded + " added" + (skipped ? ", " + skipped + " skipped" : "");
           } catch {
             statusEl.textContent = "something went wrong ingesting that";
@@ -1274,7 +1343,7 @@ ${ledgerBundleAvailable ? `<script src="./ledger-browser.bundle.js"></script>` :
         researchPlayBtn.setAttribute("aria-pressed", String(st.playing));
         researchStatusEl.textContent = !researchQueue ? ""
           : researchQueue.complete
-            ? 'research "' + researchQueue.topic + '" complete \\u2014 ' + researchQueue.done.length + " topic" + (researchQueue.done.length === 1 ? "" : "s")
+            ? 'research "' + researchQueue.topic + '" complete \\u2014 ' + countLabel(researchQueue.done.length, "topic")
             : researchQueue.done.length + " done \\u00b7 " + researchQueue.pending.length + " queued";
       }
 

package/src/services/memory-panel-viz.mjs

@@ -49,6 +49,30 @@ export function statsSummaryLine(stats, bandLabel) {
     : stats.total + " starter facts loaded";
 }
 
+/** Drop every asset the site's service worker has cached, and unregister the
+ *  worker itself, so the next load reads the shipped files off the network.
+ *  A page's own taught-facts store lives in IndexedDB, a different store
+ *  entirely — clearing that alone would still re-seed from whatever copy of
+ *  chat-seed.json the worker cached, which is the whole reason this exists.
+ *  Best-effort throughout: a browser with no Cache Storage, no worker, or a
+ *  storage call that throws just leaves the caller to reload as before.
+ *  Pure of this module's scope, so it stays `.toString()`-splice safe. */
+export async function clearSiteAssetCaches() {
+  try {
+    if (globalThis.caches) {
+      for (const key of await caches.keys()) {
+        if (key.startsWith("tmct-precache-")) await caches.delete(key);
+      }
+    }
+  } catch { /* the reload still re-reads whatever the worker will serve */ }
+  try {
+    if (navigator.serviceWorker && navigator.serviceWorker.getRegistrations) {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      await Promise.all(registrations.map((registration) => registration.unregister()));
+    }
+  } catch { /* an un-unregisterable worker still has an empty cache now */ }
+}
+
 /** Fetch `url` reading the body as a stream, reporting (loadedBytes,
  *  totalBytes) after every chunk — total is 0 when the response carries no
  *  Content-Length. Resolves to a Blob of the whole body. Falls back to a
@@ -157,3 +181,41 @@ export function renderStatsPanelInto(panelEl, stats, opts) {
     }
   }
 }
+
+/** The boot statusline while the big engine assets stream in — byte-identical
+ *  across research-viz.mjs and ingest-viz.mjs, each commenting that it uses
+ *  "the same aggregator" as the other. `parts` is an array of { loaded, total }
+ *  byte counts (total 0 when a response carried no Content-Length); with no
+ *  usable total the line shows loaded bytes alone rather than inventing a
+ *  denominator. Self-contained, `.toString()`-splice safe. */
+export function loadProgressLine(parts) {
+  const mb = (n) => (n / 1048576).toFixed(1);
+  let loaded = 0;
+  let total = 0;
+  let totalKnown = true;
+  for (const p of parts || []) {
+    loaded += (p && p.loaded) || 0;
+    if (p && p.total > 0) total += p.total;
+    else totalKnown = false;
+  }
+  return totalKnown && total > 0
+    ? "loading the engine… " + mb(loaded) + " MB / " + mb(total) + " MB"
+    : "loading the engine… " + mb(loaded) + " MB";
+}
+
+/** One learned/grounded fact as its three canonical cells, plus whichever of
+ *  the two per-page provenance fields the caller's fact objects carry: `source`
+ *  (research.html's source key, e.g. "taught"/"seed:conceptnet" — used for the
+ *  tone dot) and `provenance` (ingest.html's raw ' | '-joined tag string —
+ *  shown verbatim). Both default to "" when the fact object doesn't carry
+ *  that field, so either page reads back only the one it populated. Pure,
+ *  `.toString()`-splice safe. */
+export function factTripleParts(fact) {
+  return {
+    subject: String((fact && fact.subject) || ""),
+    predicate: String((fact && fact.predicate) || ""),
+    object: String((fact && fact.object) || ""),
+    source: String((fact && fact.source) || ""),
+    provenance: String((fact && fact.provenance) || ""),
+  };
+}

package/src/services/mud-editor.mjs

@@ -12,11 +12,14 @@
 // point is "change what this world is made of" has to speak the vocabulary the
 // world is actually written in, and neither table is a superset of the other.
 //
-// No imports: every export here is `.toString()`-splice-safe, the same discipline
-// adventure-editor.mjs and the *-viz render-glue functions hold — mud-viz.mjs
-// splices these straight into mud.html's inline script, which captures a
-// function's own source text and nothing it closes over. A splice-safe function
-// carries its whole dependency graph inside its own body.
+// Every export here but wordBeforeCursor is written locally, and is
+// `.toString()`-splice-safe, the same discipline adventure-editor.mjs and the
+// *-viz render-glue functions hold — mud-viz.mjs splices these straight into
+// mud.html's inline script, which captures a function's own source text and
+// nothing it closes over. A splice-safe function carries its whole dependency
+// graph inside its own body. wordBeforeCursor is a re-export of viz-theme.mjs's
+// shared implementation, itself self-contained and splice-safe the same way —
+// this module no longer keeps its own copy of it.
 //
 // Two predicate families sync differently, for the reason adventure-editor.mjs's
 // own header sets out:
@@ -34,6 +37,8 @@
 //     that fails to parse this keystroke must never be read as "this fact is
 //     gone".
 
+export { wordBeforeCursor } from "./viz-theme.mjs";
+
 const PLACEMENT_KIND = "placement";
 const OPENNESS_KIND = "openness";
 const MASS_KIND = "mass";
@@ -301,13 +306,3 @@ export function planMudEditorSync(rows, state, triples) {
   }
   return { toAppend, toRemoveIds };
 }
-
-/** The word immediately before `cursorPos` in `text` — a run of letters, digits
- *  and hyphens, the shape this vocabulary's own terms take ("underground-space",
- *  "mole-1"). Empty when the cursor sits after whitespace or punctuation with no
- *  word directly behind it. Pure. */
-export function wordBeforeCursor(text, cursorPos) {
-  const head = String(text || "").slice(0, cursorPos);
-  const m = head.match(/[A-Za-z][A-Za-z0-9-]*$/);
-  return m ? m[0].toLowerCase() : "";
-}

package/src/services/mud-turn.mjs

@@ -50,10 +50,12 @@ import { fnv1a32 } from "../domain/hash.mjs";
 import { bfsLevels } from "../domain/planning.mjs";
 import { loadMemory, readFactRows } from "../adapters/memory/core.mjs";
 import { DEFAULT_GAME_CONFIG, mudMassDrainPerTurn } from "../domain/game-config.mjs";
+import { predatorSubjects } from "../domain/mud-facts.mjs";
 import {
   foldWorldState, worldActionRows, runWorldCommand, recordTold, recordExamined,
   recordMassDrain, personKnowledgeLines, objectClassChain, diggableDirections,
   isOutOfPlay, outOfPlayReasonOf, outOfPlayPhrase, massDrainPerTurnOf,
+  parseSnapshotSubject,
 } from "./adventure.mjs";
 
 const FOOD_CLASS = "food";
@@ -61,7 +63,6 @@ const LATERAL_DIRECTIONS = ["north", "south", "east", "west"];
 // Deep enough to cross a whole burrow without letting one character's
 // pathfinder walk a whole grown world every tick.
 const WALK_SEARCH_DEPTH = 8;
-const SNAPSHOT_RE = /^(.+)@turn(\d+)$/;
 
 const EXIT_TOWARD_FOOD_CHANCE = 0.5;
 const EDGE_FOLLOW_DIG_CHANCE = 0.25;
@@ -208,8 +209,8 @@ function roomsStoodIn(rows, character) {
   const visited = new Set();
   for (const row of worldActionRows(rows)) {
     if (row.predicate !== "mgx:currently-in") continue;
-    const snapshot = SNAPSHOT_RE.exec(row.subject);
-    if ((snapshot ? snapshot[1] : row.subject) !== character) continue;
+    const snapshot = parseSnapshotSubject(row.subject);
+    if ((snapshot ? snapshot.base : row.subject) !== character) continue;
     visited.add(row.object);
   }
   return visited;
@@ -220,9 +221,8 @@ function roomsStoodIn(rows, character) {
  *  funnel straight to the den, since the unvisited room nearest the burrow is
  *  exactly where the fox lives. The den stays reachable by the food gamble
  *  below, which is a gamble and is meant to be. */
-const predatorRooms = (rows, state) => new Set((rows || [])
-  .filter((r) => r.predicate === "mgx:is-predator" && r.object === "true")
-  .map((r) => state.placements.get(r.subject)?.object)
+const predatorRooms = (rows, state) => new Set(predatorSubjects(rows)
+  .map((subject) => state.placements.get(subject)?.object)
   .filter(Boolean));
 
 /**