@polycode-projects/the-mechanical-code-talker 2.9.0 → 2.9.3

package/src/services/chat-page-viz.mjs

@@ -89,6 +89,53 @@ export function provenanceChipFor(answer, record, bucketFor) {
   return "corpus";
 }
 
+/**
+ * The boot statusline while the big assets stream in — "loading the engine…
+ * X MB / Y MB", aggregated across every asset currently downloading. `parts`
+ * is an array of { loaded, total } byte counts (total 0 when the response
+ * carried no Content-Length); with no usable total the line shows loaded
+ * bytes alone rather than inventing a denominator.
+ *
+ * Self-contained (no outer refs), `.toString()`-splice safe — the same
+ * discipline provenanceChipFor above holds.
+ */
+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";
+}
+
+/**
+ * The exported transcript as one Markdown document: a title line naming the
+ * site version and the export date, then every turn in order as
+ * "**you:** ..." / "**tmct:** ...", with the provenance tier in parentheses
+ * when the turn carried one. Reads the page's transcript MODEL (an array of
+ * { role, text, chipTier }), never the DOM — the message column may
+ * virtualize long chats someday, and an export must still carry every turn.
+ *
+ * Self-contained (no outer refs), `.toString()`-splice safe — the same
+ * discipline provenanceChipFor/loadProgressLine above hold.
+ */
+export function transcriptMarkdown(turns, meta) {
+  const version = (meta && meta.version) || "dev";
+  const date = (meta && meta.date) || "";
+  const lines = ["# tmct chat — v" + version + (date ? " — " + date : ""), ""];
+  for (const turn of turns || []) {
+    const tier = turn.chipTier ? " (" + turn.chipTier + ")" : "";
+    lines.push("**" + turn.role + ":** " + turn.text + tier, "");
+  }
+  return lines.join("\n");
+}
+
 /** The self-contained "talk to it" full-screen page. Pure — the same output
  *  for the same `title` every time; every other piece of state (the session,
  *  every message, every chip) is computed live in the browser once the
@@ -105,24 +152,15 @@ export function renderChatHtml({ title = DEFAULT_TITLE } = {}) {
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${escapeHtml(title)}</title>
 <!--
-  Import map: resolves the "wink-nlp"/"wink-eng-lite-web-model" bare specifiers the
-  sibling chat bundle's own dynamic import() needs (pinned to the exact versions
-  package.json depends on) to esm.sh CDN builds — the same seam plan.html and
-  ledger.html each wire up for their own live sessions, mirrored here because this
-  page can be opened standalone (no import map inherited from a host document). The
-  bundle itself never touches wink-nlp directly — wink-model.mjs's own header
-  explains why a static import would drag the ~1 MB model into every bundle; only
-  the page's own inline script performs this CDN import, the same bounded-race
-  tryLoadWink() pattern public/tmct-browser.mjs uses.
+  The wink lemma/POS tier loads from ./vendor/wink.js — the site's own shared
+  first-party bundle of wink-nlp + wink-eng-lite-web-model (built by
+  scripts/build-wink-vendor.mjs), one cached copy for every page, no CDN. The
+  chat bundle itself never touches wink directly — wink-model.mjs's own header
+  explains why a static import would drag the ~1 MB model into every bundle;
+  only the page's own inline script imports the vendor asset, the same
+  bounded-race tryLoadWink() pattern public/tmct-browser.mjs uses, and a
+  failed load degrades to the curated + fuzzy tiers, never an error.
 -->
-<script type="importmap">
-{
-  "imports": {
-    "wink-nlp": "https://esm.sh/wink-nlp@2.4.0",
-    "wink-eng-lite-web-model": "https://esm.sh/wink-eng-lite-web-model@1.8.1"
-  }
-}
-</script>
 <style>
 ${THEME_TOKENS_CSS}
   html, body { height: 100%; }
@@ -141,8 +179,7 @@ ${THEME_TOKENS_CSS}
 
   .topbar { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
   .brand { display: flex; align-items: baseline; gap: .55rem; }
-  .eyebrow { font-family: ${MONO_STACK}; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
-  .topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 600; }
+  .eyebrow { font-family: ${MONO_STACK}; font-size: .78rem; letter-spacing: .08em; color: var(--muted); }
   .legend { display: flex; gap: .8rem; font-family: ${MONO_STACK}; font-size: .68rem; color: var(--muted); }
   .legend-item { display: inline-flex; align-items: center; gap: .32rem; white-space: nowrap; }
   .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
@@ -183,8 +220,29 @@ ${THEME_TOKENS_CSS}
   .composer-inner input:disabled { opacity: .55; }
   .composer-inner button[type="submit"] { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: 0 0 auto; }
   .composer-inner button[type="submit"]:disabled { opacity: .4; cursor: default; }
+
+  /* the live-Wikipedia opt-in row, under the input: a small pill switch in
+     the statusline's own mono idiom — quiet, off by default. The checkbox
+     itself is visually hidden but stays focusable, so the switch keeps
+     keyboard/screen-reader behaviour for free. */
+  .composer-tools { max-width: 720px; margin: 0 auto; padding: 0 1.1rem .45rem; display: flex; align-items: center; }
+  .composer-tools .liveLabel { display: inline-flex; align-items: center; gap: .45rem; font-family: ${MONO_STACK}; font-size: .68rem; color: var(--muted); cursor: pointer; }
+  .composer-tools input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .toggle-track { position: relative; width: 26px; height: 14px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 99px; background: var(--card); flex: 0 0 auto; transition: background .15s ease, border-color .15s ease; }
+  .toggle-knob { position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: transform .15s ease; }
+  #liveToggle:checked ~ .toggle-track { background: var(--corpus); border-color: var(--corpus); }
+  #liveToggle:checked ~ .toggle-track .toggle-knob { transform: translateX(12px); background: var(--bg); }
+  #liveToggle:focus-visible ~ .toggle-track { outline: 2px solid var(--ink); outline-offset: 2px; }
+
   .statusline { max-width: 720px; margin: 0 auto; padding: 0 1.1rem .6rem; font-family: ${MONO_STACK}; font-size: .68rem; color: var(--muted); }
 
+  /* the composer's small utility row — right-aligned mono controls in the
+     statusline's own idiom, for anything that acts on the conversation as a
+     whole (export, print) rather than on one turn. */
+  .composer-tools { max-width: 720px; margin: 0 auto; padding: 0 1.1rem .35rem; display: flex; justify-content: flex-end; align-items: center; gap: .5rem; }
+  .tool-btn { font-family: ${MONO_STACK}; font-size: .66rem; letter-spacing: .03em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: .16rem .55rem; background: var(--card); }
+  .tool-btn:hover { color: var(--ink); }
+
   /* the provenance stats panel: what this session's memory holds, docked to
      the right of the chat column (a real layout column, not an overlay) —
      re-rendered after boot and after every turn from window.tmctChat's own
@@ -197,6 +255,9 @@ ${THEME_TOKENS_CSS}
   .statsPanel .taught-item { margin: 0 0 .7rem; }
   .statsPanel .taught-tag { display: block; color: var(--muted); font-size: .66rem; margin-top: .15rem; word-break: break-word; }
   .statsPanel .empty { color: var(--muted); margin: 0; }
+  .statsPanel .forget-btn { font-family: ${MONO_STACK}; font-size: .66rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: .18rem .55rem; margin-top: 1.1rem; background: var(--card); }
+  .statsPanel .forget-btn:hover { color: var(--ink); }
+  .statsPanel .persist-note { color: var(--muted); font-size: .64rem; margin: .4rem 0 0; }
 
   @media (max-width: 860px) {
     .statsPanel { display: none; }
@@ -208,6 +269,21 @@ ${THEME_TOKENS_CSS}
   @media (prefers-reduced-motion: reduce) {
     * { scroll-behavior: auto !important; }
   }
+
+  /* print: the WHOLE transcript, not the scrolled-into-view slice — the
+     screen layout pins the message column to the viewport and scrolls inside
+     it, which would clip everything off-screen to one printed page. Undo the
+     pinning (heights auto, overflow visible, flex back to block flow) and
+     drop the interactive chrome; the bubbles and their provenance chips
+     print as-is. */
+  @media print {
+    html, body { height: auto; overflow: visible; }
+    body { display: block; }
+    .chatCol { display: block; }
+    main.chatMain { overflow: visible; height: auto; }
+    .messages { min-height: 0; }
+    form.composer, .statusline, .statsPanel, .legend { display: none; }
+  }
 </style>
 </head>
 <body>
@@ -215,7 +291,6 @@ ${THEME_TOKENS_CSS}
     <header class="topbar">
       <div class="brand">
         <span class="eyebrow">the-mechanical-code-talker</span>
-        <h1>Talk to it</h1>
       </div>
       <div class="legend" aria-hidden="true">${legendHtml}</div>
     </header>
@@ -228,6 +303,17 @@ ${THEME_TOKENS_CSS}
           placeholder="loading the engine…" aria-label="Ask tmct something" disabled>
         <button type="submit" id="composerSend" aria-label="Send" disabled>&#8594;</button>
       </div>
+      <div class="composer-tools">
+        <label class="liveLabel" title="Off by default. When on, a question nothing local can answer also asks en.wikipedia.org — two small requests per lookup, and the answer is cited (CC BY-SA).">
+          <input type="checkbox" id="liveToggle" role="switch" aria-label="ask Wikipedia when I don't know">
+          <span class="toggle-track" aria-hidden="true"><span class="toggle-knob"></span></span>
+          <span>ask Wikipedia when I don&#8217;t know</span>
+        </label>
+        <span class="tool-cluster">
+          <button type="button" id="exportMd" class="tool-btn" title="download this conversation as Markdown">export .md</button>
+          <button type="button" id="printChat" class="tool-btn" title="print the whole conversation">print</button>
+        </span>
+      </div>
     </form>
     <div class="statusline" id="status">loading the engine&hellip;</div>
   </div>
@@ -240,14 +326,33 @@ ${THEME_TOKENS_CSS}
   "use strict";
   const provBucketFor = ${provBucketFor.toString()};
   const provenanceChipFor = ${provenanceChipFor.toString()};
+  const loadProgressLine = ${loadProgressLine.toString()};
+  const transcriptMarkdown = ${transcriptMarkdown.toString()};
   const el = (id) => document.getElementById(id);
 
+  if ("serviceWorker" in navigator) navigator.serviceWorker.register("./tmct-sw.js").catch(() => {});
+
   const messagesEl = el("messages");
   const composerForm = el("composer");
   const inputEl = el("composerInput");
   const sendBtn = el("composerSend");
   const statusEl = el("status");
   const statsPanelEl = el("statsPanel");
+  const liveToggleEl = el("liveToggle");
+
+  // The live-Wikipedia preference: "on" or absent. try/caught throughout —
+  // private-mode storage that throws must never break the page, it just
+  // forgets the preference between visits.
+  const LIVE_PREF_KEY = "tmct.chat.liveWikipedia";
+  function readLivePref() {
+    try { return localStorage.getItem(LIVE_PREF_KEY) === "on"; } catch { return false; }
+  }
+  function writeLivePref(on) {
+    try {
+      if (on) localStorage.setItem(LIVE_PREF_KEY, "on");
+      else localStorage.removeItem(LIVE_PREF_KEY);
+    } catch { /* private mode — the toggle still works this visit */ }
+  }
 
   function scrollToEnd() {
     messagesEl.parentElement.scrollTop = messagesEl.parentElement.scrollHeight;
@@ -298,6 +403,12 @@ ${THEME_TOKENS_CSS}
     entailed: "tmct derived this from taught facts, not read back verbatim",
   };
 
+  // The transcript MODEL — one entry per user submit and per settled
+  // assistant bubble (misses included), appended in display order. Export
+  // and print read this, never the DOM: the message column stays free to
+  // virtualize long chats without silently truncating an export.
+  const transcript = [];
+
   function settleAssistantBubble(row, answer, record) {
     const bubble = row.querySelector(".bubble");
     bubble.classList.remove("pending");
@@ -305,6 +416,7 @@ ${THEME_TOKENS_CSS}
     bubble.classList.toggle("miss", missed);
     bubble.textContent = answer;
     const tier = provenanceChipFor(answer, record, provBucketFor);
+    transcript.push({ role: "tmct", text: answer, chipTier: tier, ts: Date.now() });
     if (tier) {
       const key = tier === "entailed" ? "entail" : tier;
       const chip = document.createElement("span");
@@ -318,22 +430,102 @@ ${THEME_TOKENS_CSS}
 
   // ---- engine boot -------------------------------------------------------
   // The same bounded-race wink load public/tmct-browser.mjs uses, against
-  // this page's own bundle/seed/pack.
+  // this page's own bundle/seed/pack — plus real download progress: the two
+  // big boot assets (the seed and the wink vendor bundle) stream through
+  // fetchWithProgress, and the statusline aggregates their byte counts until
+  // boot settles it back to the normal summary.
   const WINK_LOAD_TIMEOUT_MS = 8000;
-  const timeoutAfter = (ms, reason) => new Promise((_, reject) => setTimeout(() => reject(new Error(reason)), ms));
+
+  const progressParts = {};
+  let progressActive = true;
+  function noteProgress(key, loaded, total) {
+    progressParts[key] = { loaded: loaded, total: total };
+    if (progressActive) statusEl.textContent = loadProgressLine(Object.values(progressParts));
+  }
+
+  // Fetch the 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.
+  async function fetchWithProgress(url, onProgress) {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error("HTTP " + res.status);
+    const total = Number(res.headers.get("content-length")) || 0;
+    if (!res.body || !res.body.getReader) {
+      const blob = await res.blob();
+      onProgress(blob.size, total || blob.size);
+      return blob;
+    }
+    const reader = res.body.getReader();
+    const chunks = [];
+    let loaded = 0;
+    for (;;) {
+      const step = await reader.read();
+      if (step.done) break;
+      chunks.push(step.value);
+      loaded += step.value.byteLength;
+      onProgress(loaded, total);
+    }
+    return new Blob(chunks);
+  }
 
   let winkStatus = "pending";
   async function tryLoadWink() {
+    // The bounded race guards the same failure the CDN era did — a load that
+    // neither resolves nor rejects — but measures 8s WITHOUT A BYTE rather
+    // than 8s wall-clock, so a slow link streaming real progress on a 3.5 MB
+    // asset is never abandoned mid-download.
+    let lastProgressAt = Date.now();
+    const winkProgress = (loaded, total) => {
+      lastProgressAt = Date.now();
+      noteProgress("wink", loaded, total);
+    };
+    const stallGuard = async () => {
+      for (;;) {
+        const idle = Date.now() - lastProgressAt;
+        if (idle >= WINK_LOAD_TIMEOUT_MS) throw new Error("wink vendor asset load stalled");
+        await new Promise((resolve) => setTimeout(resolve, WINK_LOAD_TIMEOUT_MS - idle));
+      }
+    };
     try {
-      const [{ default: winkNLP }, { default: model }] = await Promise.race([
-        Promise.all([import("wink-nlp"), import("wink-eng-lite-web-model")]),
-        timeoutAfter(WINK_LOAD_TIMEOUT_MS, "wink-nlp CDN load timed out"),
+      const mod = await Promise.race([
+        (async () => {
+          try {
+            // Streamed fetch -> Blob -> import, so the biggest asset on the
+            // page reports its progress; the vendor bundle is fully
+            // self-contained, so a blob URL resolves nothing further.
+            const blob = await fetchWithProgress("./vendor/wink.js", winkProgress);
+            const blobUrl = URL.createObjectURL(new Blob([blob], { type: "text/javascript" }));
+            try {
+              return await import(blobUrl);
+            } finally {
+              URL.revokeObjectURL(blobUrl);
+            }
+          } catch (err) {
+            return import("./vendor/wink.js");
+          }
+        })(),
+        stallGuard(),
       ]);
-      window.tmctChat.registerWinkModel(() => ({ winkNLP, model }));
+      window.tmctChat.registerWinkModel(() => ({ winkNLP: mod.winkNLP, model: mod.model }));
       winkStatus = "loaded";
     } catch (err) {
       winkStatus = "unavailable";
-      console.warn("tmct chat: wink-nlp CDN load failed, continuing without the lemma/POS tier", err);
+      console.warn("tmct chat: the wink vendor asset failed to load, continuing without the lemma/POS tier", err);
+    }
+  }
+
+  // The deploy's own version, read off the service worker file the build
+  // already stamps (its cache name embeds package.json's version) — the only
+  // same-origin place the number exists at runtime without a second build
+  // artifact. Best-effort: no worker file, no match, no network -> "dev".
+  async function fetchSiteVersion() {
+    try {
+      const res = await fetch("./tmct-sw.js");
+      if (!res.ok) return "dev";
+      const found = /tmct-precache-v(\\d+\\.\\d+\\.\\d+)/.exec(await res.text());
+      return found ? found[1] : "dev";
+    } catch {
+      return "dev";
     }
   }
 
@@ -341,9 +533,8 @@ ${THEME_TOKENS_CSS}
   let seedFacts = 0;
   async function fetchSeed() {
     try {
-      const res = await fetch("./chat-seed.json");
-      if (!res.ok) throw new Error("HTTP " + res.status);
-      seedPayload = await res.json();
+      const blob = await fetchWithProgress("./chat-seed.json", (loaded, total) => noteProgress("seed", loaded, total));
+      seedPayload = JSON.parse(await blob.text());
       seedFacts = (seedPayload.individuals || []).filter((i) => i.class === "Fact").length;
     } catch (err) {
       seedPayload = null;
@@ -355,7 +546,12 @@ ${THEME_TOKENS_CSS}
     try { return structuredClone(seedPayload); } catch { return JSON.parse(JSON.stringify(seedPayload)); }
   };
   function newSession() {
-    return window.tmctChat.createChatSession({ seedPayload: cloneSeed(), vocabSeeded: Boolean(seedPayload) });
+    return window.tmctChat.createChatSession({
+      seedPayload: cloneSeed(),
+      vocabSeeded: Boolean(seedPayload),
+      liveReference: liveToggleEl.checked,
+      onLiveLookup: function () { statusEl.textContent = "searching wikipedia\\u2026"; },
+    });
   }
 
   let packIndexPromise = null;
@@ -381,12 +577,69 @@ ${THEME_TOKENS_CSS}
     },
   };
 
+  // ---- persistence: what you taught it survives a reload, on this device -
+  // Best-effort IndexedDB (window.tmctChat.openPersistedStore): the whole
+  // Backend-B payload snapshots after each teach turn, debounced so a burst
+  // of teaching costs one multi-MB write, not one per fact. The stamp ties a
+  // snapshot to this deploy (site version) AND this seed (fact count) — either
+  // changing discards the snapshot in favour of the fresh seed.
+  let persist = null;
+  let saveTimer = null;
+  let restoredCount = 0;
+  let siteVersion = "dev";
+  window.tmctChatLastSave = null;
+
+  function scheduleSave() {
+    if (!persist) return;
+    clearTimeout(saveTimer);
+    saveTimer = setTimeout(() => {
+      saveTimer = null;
+      const session = window.tmctChatSession;
+      if (!session) return;
+      const started = performance.now();
+      let snapshot;
+      try {
+        snapshot = structuredClone(session.memoryDir.payload);
+      } catch {
+        try { snapshot = JSON.parse(JSON.stringify(session.memoryDir.payload)); } catch { return; }
+      }
+      persist.save(snapshot).then((saved) => {
+        if (saved) window.tmctChatLastSave = { at: Date.now(), ms: Math.round(performance.now() - started) };
+      });
+    }, 500);
+  }
+
+  async function forgetEverything() {
+    clearTimeout(saveTimer);
+    saveTimer = null;
+    if (persist) await persist.clear();
+    restoredCount = 0;
+    window.tmctChatSession = newSession();
+    const stats = await window.tmctChat.memoryStats(window.tmctChatSession.memoryDir);
+    addSystemLine("forgot everything taught on this device \\u2014 back to the fresh seed (" + statsSummaryLine(stats) + ").");
+    await renderStatsPanel(stats);
+  }
+
   // ---- memory stats: the boot message's own numbers, and the docked panel -
   // Both read window.tmctChat.memoryStats(memoryDir) (chat-browser-entry.mjs)
   // — one computation, reused, so the boot line and the panel can never
   // disagree with each other about what this session's memory holds.
-  const BAND_LABELS = { human: "human persona", seon: "seon ontology", conceptnet: "ConceptNet" };
-  const BAND_ORDER = ["human", "seon", "conceptnet", "taught this session", "other"];
+  const BAND_LABELS = {
+    human: "human persona",
+    "human-medium": "human persona (medium)",
+    "human-large": "human persona (large)",
+    seon: "seon ontology",
+    conceptnet: "ConceptNet",
+    "tier2-aws": "AWS",
+    "tier2-python": "Python",
+    "tier2-java": "Java",
+    "wordnet-xl": "WordNet",
+  };
+  const BAND_ORDER = [
+    "human", "human-medium", "human-large", "seon", "conceptnet",
+    "tier2-aws", "tier2-python", "tier2-java", "wordnet-xl",
+    "taught this session", "other",
+  ];
   const bandLabel = (key) => BAND_LABELS[key] || key;
 
   /** The boot system line's own memory summary — every seed band this
@@ -450,6 +703,21 @@ ${THEME_TOKENS_CSS}
         statsPanelEl.appendChild(item);
       }
     }
+
+    if (persist) {
+      const forget = document.createElement("button");
+      forget.type = "button";
+      forget.id = "forgetEverything";
+      forget.className = "forget-btn";
+      forget.textContent = "forget everything";
+      forget.title = "clear what this device has saved and restart from the fresh seed";
+      forget.addEventListener("click", forgetEverything);
+      statsPanelEl.appendChild(forget);
+      const note = document.createElement("p");
+      note.className = "persist-note";
+      note.textContent = "taught facts are kept best-effort on this device (IndexedDB), never sent anywhere.";
+      statsPanelEl.appendChild(note);
+    }
   }
 
   function renderStatus() {
@@ -461,9 +729,18 @@ ${THEME_TOKENS_CSS}
       : winkStatus === "unavailable"
         ? "wink-nlp unavailable — curated + fuzzy tiers only (still zero guesses, zero LLM)"
         : "wink-nlp: loading\\u2026";
-    statusEl.textContent = seedPart + " \\u00b7 " + winkPart;
+    const livePart = "live wikipedia: " + (liveToggleEl.checked ? "on" : "off");
+    statusEl.textContent = seedPart + " \\u00b7 " + winkPart + " \\u00b7 " + livePart;
   }
 
+  liveToggleEl.addEventListener("change", function () {
+    writeLivePref(liveToggleEl.checked);
+    if (window.tmctChatSession && window.tmctChatSession.setLiveReference) {
+      window.tmctChatSession.setLiveReference(liveToggleEl.checked);
+    }
+    renderStatus();
+  });
+
   let busy = true;
   function setBusy(v) {
     busy = v;
@@ -478,34 +755,86 @@ ${THEME_TOKENS_CSS}
     if (!q || busy || !window.tmctChatSession) return;
     inputEl.value = "";
     addUserBubble(q);
+    transcript.push({ role: "you", text: q, chipTier: null, ts: Date.now() });
     const pendingRow = addPendingAssistantBubble();
     setBusy(true);
     window.tmctChatSession.turn(q)
       .then((result) => {
         settleAssistantBubble(pendingRow, result.answer, result.record);
+        if (result.record && result.record.via === "assert") scheduleSave();
         return renderStatsPanel(); // a teach turn just grew this session's memory; a plain ask leaves it unchanged either way
       })
       .catch((err) => settleAssistantBubble(pendingRow,
         "something went wrong answering that (" + (err && err.message ? err.message : err) + ") \\u2014 try rephrasing",
         { miss: true }))
       .finally(() => {
+        // A "/wiki on|off" turn flips the session's own state — mirror it back
+        // into the switch and the stored preference, then settle the
+        // statusline (which the onLiveLookup hook may have overwritten with
+        // "searching wikipedia…" mid-turn).
+        if (window.tmctChatSession && typeof window.tmctChatSession.liveReference === "boolean"
+            && liveToggleEl.checked !== window.tmctChatSession.liveReference) {
+          liveToggleEl.checked = window.tmctChatSession.liveReference;
+          writeLivePref(liveToggleEl.checked);
+        }
+        renderStatus();
         setBusy(false);
         inputEl.focus();
       });
   });
 
+  // ---- export + print: whole-conversation controls ------------------------
+  // Both read the transcript model; neither touches the network. The export
+  // downloads as a Blob (no server round-trip), and print relies on the
+  // @media print stylesheet above to un-pin the message column so every
+  // turn reaches paper.
+  el("exportMd").addEventListener("click", () => {
+    const md = transcriptMarkdown(transcript, { version: siteVersion, date: new Date(Date.now()).toISOString().slice(0, 10) });
+    const blob = new Blob([md], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "tmct-chat.md";
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  });
+  el("printChat").addEventListener("click", () => window.print());
+
   async function boot() {
     if (!window.tmctChat) {
       statusEl.textContent = "the chat engine didn't load \\u2014 this page needs its build step (npm run demo:build)";
       inputEl.placeholder = "chat engine unavailable";
       return;
     }
-    await Promise.all([fetchSeed(), tryLoadWink()]);
+    await Promise.all([fetchSeed(), tryLoadWink(), fetchSiteVersion().then((v) => { siteVersion = v; })]);
+    progressActive = false;
     window.tmctChat.registerReferencePackProvider(fetchPackProvider);
-    window.tmctChatSession = newSession();
+    if (window.tmctChat.openPersistedStore) {
+      persist = window.tmctChat.openPersistedStore({ storeKey: "chat", stamp: siteVersion + ":" + seedFacts });
+    }
+    const savedRecord = persist ? await persist.load() : null;
+    liveToggleEl.checked = readLivePref();
+    if (savedRecord && savedRecord.payload) {
+      window.tmctChatSession = window.tmctChat.createChatSession({
+        seedPayload: savedRecord.payload,
+        vocabSeeded: true,
+        liveReference: liveToggleEl.checked,
+        onLiveLookup: function () { statusEl.textContent = "searching wikipedia\\u2026"; },
+      });
+    } else {
+      window.tmctChatSession = newSession();
+    }
+    if (window.tmctChatSession.setLiveReference) window.tmctChatSession.setLiveReference(liveToggleEl.checked);
     const stats = await window.tmctChat.memoryStats(window.tmctChatSession.memoryDir);
+    if (savedRecord) restoredCount = stats.taught.length;
+    const restoredNote = savedRecord
+      ? " Restored " + restoredCount + " taught fact" + (restoredCount === 1 ? "" : "s")
+        + " from your last visit \\u2014 state kept best-effort on this device."
+      : "";
     addSystemLine("tmct \\u2014 the real engine, running in this page \\u2014 " + statsSummaryLine(stats)
-      + ". Ask it something, or teach it a fact of your own.");
+      + "." + restoredNote + " Ask it something, or teach it a fact of your own.");
     await renderStatsPanel(stats);
     inputEl.placeholder = seedPayload ? 'try "what is a dog"' : window.tmctChat.vocabExampleHint(false);
     renderStatus();