prolog-notebook 0.4.3 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # Changelog
 
+## [0.5.1] — 2026-08-30
+
+Everything here came from one field report: a chapter written with the tool rather than a test
+written against it.
+
+### Fixed
+
+- **`view` bound quietly behind a squatter on the same port.** A stale
+  `python3 -m http.server --bind ::` holds `*:8777` on IPv6; binding `127.0.0.1:8777` on IPv4
+  does not collide with it, so `EADDRINUSE` never fired and the auto-bump never ran. `localhost`
+  then resolves to `::1` first and the reader gets somebody else's directory listing where a
+  chapter should be. The port is now connect-tested on **both stacks** before binding, because
+  *can I bind* and *will the reader reach me* are different questions.
+
+- **`view` printed its URL on stderr**, where a wrapper never saw it — which is how somebody
+  came to type `localhost` by hand. It is the command's output and is on stdout now; `view`
+  writes no notebook and no data there, so nothing can be corrupted by it.
+
+- **`view` and `build` never looked for an update.** The offer went into the `run` path first
+  and stayed there. Every command that does real work now goes through one door, always before
+  the work — the only point at which the answer can change the outcome.
+
+- **A prediction released the hold on blur, not on typing.** A reader who typed their prediction
+  and looked up saw nothing happen, and the link between *I wrote something* and *the answers
+  appeared* was broken by a pause with no cause. Debounced `input` at 1.2 s now, with `change`
+  kept so leaving the box is still immediate.
+
+- **The console was not clean, and this audience opens the console.** A `favicon.ico` 404 on
+  every load — now a `data:` URI carrying the notebook's own `?-` prompt — and an issues-panel
+  warning for every form field on the page, all of which were anonymous. Every field has an id:
+  `src-<cell>`, `goal-<cell>`, `predict-<n>`.
+
+- **A missing browser opener took the whole command down.** `spawn` reports that
+  asynchronously, so the `try/catch` around it caught nothing and an unhandled `'error'` event
+  killed `view` after the server had started. `start` on Windows is a shell builtin and was
+  never going to work spawned by name; it goes through `cmd` now.
+
+## [0.5.0] — 2026-08-30
+
+**The CLI can show a notebook.** Until now the only way to see one running was to clone this
+repository, start a dev server, symlink your file into `notebooks/` and pass `?src=`. A
+notebook tool whose notebooks could only be read from its own source tree was not finished.
+
+### Added
+
+- **`prolog-notebook view <file>`** — serves the chapter and opens it, cells live. It serves
+  exactly what `build` writes, from memory, streaming the runtime and the engine out of the
+  installed package: no temp directory, nothing to clean up, and no chance of the page you look
+  at differing from the page you would publish. `--port` (8777 by default, and it says so when
+  it has to take another), `--no-open`.
+
+- **`prolog-notebook build <file> --out <dir>`** — a plain static directory you can host, zip
+  or send:
+
+      index.html  app.js  notebook.css  lib/*.js  swipl/swipl-bundle.js
+
+  No bundler. The runtime is already plain ES modules with relative imports, so the build is a
+  prerender and a copy.
+
+  **What the page does not contain** is the half worth stating. No markdown library — the prose
+  is HTML by the time it is written, which is why `page.js` and `notebook.js` are separate
+  files, and a test now enforces that neither the parser nor the renderer reaches a reader. And
+  no engine on the path to *reading*: the 6.2 MB sits in the directory untouched until somebody
+  presses Run.
+
+### Changed
+
+- `editsOf()` moved from `page.js` to `notebook.js`. A built page needs it and must not import
+  the renderer — and so 137 kB of markdown parser — to get it.
+- `viewer/` is now what it always should have been: the shell for working on the renderer
+  itself. Everyone else uses `view`.
+
 ## [0.4.3] — 2026-08-30
 
 ### Added

package/README.md

@@ -40,6 +40,27 @@ So a query cell gives you the first solution, and then you step.
 
 ## Try it
 
+```sh
+npm i -g prolog-notebook
+prolog-notebook view notebooks/ch04-cut.prolog.md
+```
+
+That is a chapter — the `once/1` placement puzzle, a real worked section rather than a widget
+demo. It opens in your browser with the cells live: press Run, then `; next`. Nothing is
+installed but the command, and the chapter is readable before the engine arrives.
+
+To send it to somebody, or host it:
+
+```sh
+prolog-notebook build ch04-cut.prolog.md --out site/
+```
+
+A plain directory: prerendered HTML with the saved answers in it, the runtime beside it, and
+the 6.2 MB engine that is fetched only when a reader presses Run. No bundler, no build step of
+your own, nothing to configure.
+
+### Or from a checkout
+
 ```sh
 git clone https://github.com/jarecsni/prolog-notebook
 cd prolog-notebook
@@ -59,7 +80,7 @@ are all in it, and there is no HTML anywhere. Point the viewer at any other note
 | | |
 |---|---|
 | `notebooks/` | chapters. The product. |
-| `viewer/` | one shell page that renders any of them. Replaced by `build` in v0.3. |
+| `viewer/` | the development shell, for working on the renderer itself. `view` and `build` are what everyone else uses. |
 
 The chapter also reads on the repo page, [as a file](notebooks/ch04-cut.prolog.md), with no
 build step and no site: prose as prose, Prolog syntax-highlighted, the saved answers in place,
@@ -247,8 +268,8 @@ Working and tested:
 - program cells and query cells with `Run` / `; next` / `all` / `stop`, per-cell reset, and a
   page that says what the engine is holding
 - `hold` and `rerun="auto"` — the author decides what a reader may see and when it refreshes
-- **the CLI runner**: `prolog-notebook run` executes a chapter headlessly and writes its
-  answers back
+- **the CLI**: `run` executes a chapter headlessly and writes its answers back, `view` opens it
+  in a browser, `build` writes a page you can host or send
 - download your own copy of a chapter, answers and all
 - 186 passing tests
 
@@ -256,7 +277,6 @@ Not built yet:
 
 - `--check` — run a chapter in CI and fail the build when its answers have drifted. Needs a
   timeout first: a test suite that can hang forever is not a test suite.
-- `build` — a static page a reader can open, without a dev server
 - custom elements (`<prolog-program>`, `<prolog-query>`) so notebooks drop into any static site
 - a VS Code notebook controller — VS Code supplies the UI, this supplies the kernel, still no Python
 - persistence, so a reader's edits survive a reload

package/bin/prolog-notebook.mjs

@@ -4,8 +4,8 @@
 // Code "run all" and a future --check get the same behaviour without going
 // through a shell (869ectt38, 869ectt3e).
 import { createRequire } from 'node:module';
-import { readFileSync, writeFileSync } from 'node:fs';
-import { basename } from 'node:path';
+import { copyFileSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { basename, dirname, join, resolve } from 'node:path';
 import { parse, NotebookError } from '../src/format.js';
 import { prologVersion } from '../src/engine.js';
 import { buildLine, currentBuild } from '../src/build-info.js';
@@ -14,6 +14,8 @@ import { updateNotice } from '../src/update.js';
 import { confirm, describeInstall, globalRoot, install, relaunch, upgradePlan } from '../src/upgrade.js';
 import { exportSource } from '../src/export.js';
 import { runNotebook, DEFAULT_LIMIT } from '../src/run.js';
+import { buildFiles } from '../src/build.js';
+import { openInBrowser, serve } from '../src/serve.js';
 
 // The engine is imported WHERE IT IS USED, never at the top. src/node.js pulls in
 // 5.9 MB of WebAssembly at module scope, so a static import here would mean that
@@ -37,6 +39,8 @@ const require = createRequire(import.meta.url);
 
 const USAGE = `prolog-notebook — Jupyter-style notebooks for Prolog
 
+  prolog-notebook view <file.prolog.md>    read it in a browser, cells and all
+  prolog-notebook build <file.prolog.md>   write a page you can host or send
   prolog-notebook run <file.prolog.md>...   run every cell, write the answers back
   prolog-notebook upgrade                  fetch the latest version
 
@@ -44,6 +48,9 @@ Options
   --limit <n>     solutions to take from one query before stopping (default ${DEFAULT_LIMIT})
   --stdout        print the result instead of writing the file
   --quiet         report only failures
+  --out <dir>     where build writes (default: <file>-site)
+  --port <n>      what view listens on (default 8777)
+  --no-open       view prints the URL instead of opening a browser
   --version       version, engine and copyright
   --check-update  ask npm whether a newer one exists, and say so either way
   -h, --help      this
@@ -133,6 +140,38 @@ function canAsk() {
   return Boolean(process.stdin.isTTY && process.stderr.isTTY);
 }
 
+/**
+ * The offer, BEFORE the command does anything — which is the only place it can
+ * change the outcome. Afterwards the files are written, the server is up, and a
+ * newer version has nothing left to do.
+ *
+ * Every command that does real work goes through here: `run`, `view` and
+ * `build`. It went in the run path first and stayed there, so `view` — the
+ * command somebody is most likely to leave running — was the one that never
+ * looked.
+ *
+ * It costs a network round trip once a day, not once a run: the rest of the day
+ * is a file read.
+ *
+ * @returns {Promise<number|null>} an exit code when the command has been handed
+ *   to a newer version, null to carry on here.
+ */
+async function upgradeFirst({ quiet = false, asked = false } = {}) {
+  if (!canAsk() || (quiet && !asked)) return null;
+  const ahead = await updateNotice({ version: VERSION, force: asked })
+    .catch(() => ({ message: null, newer: null }));
+  if (ahead.message) process.stderr.write(`${ahead.message}\n`);
+  if (!ahead.newer || !(await confirm('Update and continue on the new version?'))) return null;
+  if ((await upgrade(ahead.newer)) !== 0) {
+    process.stderr.write('Carrying on with the version you have.\n');
+    return null;
+  }
+  process.stderr.write('Continuing on the new version.\n');
+  // The path has not changed — npm replaced what is behind it — so this is the
+  // same command, running the bytes that have just arrived.
+  return relaunch(process.argv);
+}
+
 async function offerUpgrade(newer) {
   if (!canAsk()) {
     // Nobody to ask, so say what to type instead. `prolog-notebook upgrade`
@@ -173,6 +212,7 @@ async function main(argv) {
   }
 
   const command = args.shift();
+  if (command === 'view' || command === 'build') return page(command, args);
   if (command === 'upgrade') {
     const { message, newer } = await updateNotice({ version: VERSION, force: true });
     if (message) process.stderr.write(`${message}\n`);
@@ -211,30 +251,9 @@ async function main(argv) {
   }
   if (!options.quiet) process.stderr.write(`${RUNAWAY_WARNING}\n`);
 
-  // BEFORE THE WORK, when there is somebody to ask — because the point of asking
-  // is to run the NEW version, and that is only possible while there is still
-  // something to run. Afterwards the files are written and the answer comes too
-  // late to change them.
-  //
-  // It costs a network round trip once a day, not once a run: the rest of the day
-  // is a file read. Measured at 25-120 ms against npm, against a run that spends
-  // seconds in Prolog.
-  if (canAsk() && !options.quiet) {
-    const ahead = await updateNotice({ version: VERSION, force: asked })
-      .catch(() => ({ message: null, newer: null }));
-    if (ahead.message) process.stderr.write(`${ahead.message}\n`);
-    if (ahead.newer && await confirm('Update and continue on the new version?')) {
-      if ((await upgrade(ahead.newer)) === 0) {
-        process.stderr.write('Continuing on the new version.\n');
-        // The path has not changed — npm replaced what is behind it — so this is
-        // the same command, running the bytes that have just arrived.
-        return relaunch(process.argv);
-      }
-      process.stderr.write('Carrying on with the version you have.\n');
-    }
-    // Asked and answered: the check below has nothing left to say.
-    checked = true;
-  }
+  const jump = await upgradeFirst({ quiet: options.quiet, asked });
+  if (jump !== null) return jump;
+  checked = canAsk() && (!options.quiet || asked);
 
   // STARTED NOW, READ AT THE END. The registry is somebody else's machine on
   // somebody else's network, and none of that should stand between the reader
@@ -273,6 +292,80 @@ async function main(argv) {
   return status;
 }
 
+/**
+ * `build` and `view`, which are the same page put in two different places.
+ *
+ * Neither runs a cell: a chapter's answers are already in the file, which is the
+ * whole reason a built page is readable before any engine arrives. Use `run` to
+ * put them there.
+ */
+async function page(command, args) {
+  const options = { out: null, port: 8777, open: true };
+  const files = [];
+  while (args.length) {
+    const arg = args.shift();
+    if (arg === '--out') options.out = args.shift();
+    else if (arg === '--port') {
+      options.port = Number(args.shift());
+      if (!Number.isInteger(options.port) || options.port < 0 || options.port > 65535) {
+        process.stderr.write('--port takes a port number\n');
+        return 2;
+      }
+    } else if (arg === '--no-open') options.open = false;
+    else if (arg.startsWith('-')) {
+      process.stderr.write(`unknown option "${arg}"\n`);
+      return 2;
+    } else files.push(arg);
+  }
+  if (files.length !== 1) {
+    process.stderr.write(`${command} takes exactly one notebook\n`);
+    return 2;
+  }
+
+  // The same offer the run path makes, and for the same reason: a server about to
+  // start, or a directory about to be written, is work that a newer version
+  // should be doing.
+  const jump = await upgradeFirst();
+  if (jump !== null) return jump;
+
+  const file = files[0];
+  let built;
+  try {
+    const source = readFileSync(file, 'utf8');
+    built = buildFiles(parse(source), source, { filename: basename(file) });
+  } catch (e) {
+    process.stderr.write(`${file}: ${e.message}\n`);
+    return 1;
+  }
+
+  if (command === 'build') {
+    const out = options.out ?? `${file.replace(/\.prolog\.md$/, '')}-site`;
+    for (const [name, entry] of built) {
+      const target = join(out, name);
+      mkdirSync(dirname(target), { recursive: true });
+      if (entry.text !== undefined) writeFileSync(target, entry.text);
+      else copyFileSync(entry.copy, target);
+    }
+    process.stderr.write(`${out}: ${built.size} files\n`);
+    process.stderr.write(`Open ${join(out, 'index.html')} over HTTP, or host the directory.\n`);
+    return 0;
+  }
+
+  const server = await serve(built, { port: options.port });
+  // THE URL IS THIS COMMAND'S OUTPUT. `view` writes no notebook and no data to
+  // stdout, so there is nothing for it to corrupt — and a URL on stderr is a URL
+  // a wrapper does not see, which is how somebody came to type localhost by hand
+  // and land on another server entirely (869ernmvh).
+  process.stdout.write(`${server.url}\n`);
+  if (server.port !== options.port) {
+    process.stderr.write(`${options.port} was already answering — using ${server.port} instead.\n`);
+  }
+  process.stderr.write(`${basename(file)} is at ${server.url} — Ctrl-C to stop.\n`);
+  if (options.open) openInBrowser(server.url);
+  // Deliberately never resolves: the server is the command.
+  return new Promise(() => {});
+}
+
 async function runFile(file, session, options) {
   const name = basename(file);
   let notebook;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prolog-notebook",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "Jupyter-style notebooks for Prolog. Runs in the browser, installs nothing.",
   "type": "module",
   "main": "./src/node.js",

package/src/build-info.json

@@ -1,4 +1,4 @@
 {
-  "commit": "bd4d4d6",
-  "built": "2026-08-30 15:55:33 UTC"
+  "commit": "3ed80f2",
+  "built": "2026-08-30 17:12:10 UTC"
 }

package/src/build.js

@@ -0,0 +1,155 @@
+// A chapter to a page that stands on its own (869ermwfv).
+//
+// The output is a plain static directory: open it, host it, zip it and send it.
+// Nothing here is a bundler — the runtime is already plain ES modules with
+// relative imports, so the "build" is a prerender plus a copy.
+//
+// WHAT THE PAGE DOES NOT CONTAIN is the interesting half. No markdown library:
+// the prose is HTML by the time this writes it, which is exactly why page.js and
+// notebook.js were split — a prerendered chapter needs the wiring, not the
+// parser. And no engine on the critical path: 6.2 MB of WebAssembly sits in the
+// directory and is fetched the first time somebody presses Run, so the chapter is
+// readable with none of it, which is the property this whole project exists for.
+//
+// NOTHING IS WRITTEN HERE. This returns a MAP of what the directory should
+// contain — generated text, or a path to copy — so that `build` can write it,
+// `view` can serve it, and a test can read it, without any of the three
+// disagreeing about what a page is.
+import { renderNotebook } from './render.js';
+
+/** The runtime a page needs. Copied side by side, so their relative imports hold. */
+export const RUNTIME = [
+  'notebook.js', 'browser.js', 'session.js', 'engine.js', 'worker.js',
+  'clauses.js', 'export.js', 'format.js', 'version.js',
+];
+
+/**
+ * The notebook's own prompt, `?-`, as a tab icon.
+ *
+ * A data: URI rather than a file, because the alternative is a favicon.ico 404 on
+ * every single load and this audience opens the console (869ernmxe). An SVG so it
+ * scales to whatever size the tab wants.
+ */
+const FAVICON = encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">'
+  + '<rect width="32" height="32" rx="7" fill="#faf7f0"/>'
+  + '<text x="16" y="23" font-family="ui-monospace,Menlo,monospace" font-size="19"'
+  + ' font-weight="600" fill="#8a3b1e" text-anchor="middle">?-</text></svg>',
+);
+
+/** The one engine file: the bundle carries its own data. */
+export const ENGINE = 'swipl-bundle.js';
+
+/**
+ * The page, as a map of file name to what belongs there.
+ *
+ * @param {{frontMatter: Map<string,string>, cells: object[]}} notebook parsed
+ * @param {string} source the notebook's own bytes, for the download
+ * @param {{filename?: string, src?: URL, engine?: URL}} [options]
+ *   `src` is the directory holding the runtime modules and `engine` the
+ *   directory holding swipl-wasm's bundle — arguments rather than constants so a
+ *   test can point them anywhere and an installed package can find its own.
+ * @returns {Map<string, {text: string}|{copy: URL}>}
+ */
+export function buildFiles(notebook, source, options = {}) {
+  const {
+    filename = 'notebook.prolog.md',
+    src = new URL('./', import.meta.url),
+    engine = new URL('../node_modules/swipl-wasm/dist/swipl/', import.meta.url),
+  } = options;
+
+  const files = new Map();
+  files.set('index.html', { text: page(notebook) });
+  files.set('app.js', { text: app(source, filename) });
+  files.set('notebook.css', { copy: new URL('notebook.css', src) });
+  for (const module of RUNTIME) files.set(`lib/${module}`, { copy: new URL(module, src) });
+  files.set(`swipl/${ENGINE}`, { copy: new URL(ENGINE, engine) });
+  return files;
+}
+
+/**
+ * The chapter's own title, from its first H1 (format §2).
+ *
+ * Written into the HTML at build time rather than set by script on load: it is
+ * the browser tab, the bookmark and the thing a link preview shows, and none of
+ * those wait for JavaScript.
+ */
+function titleOf(notebook) {
+  for (const cell of notebook.cells) {
+    if (cell.kind !== 'markdown') continue;
+    const heading = /^#\s+(.+)$/m.exec(cell.source);
+    if (heading) return heading[1].trim();
+  }
+  return 'A Prolog notebook';
+}
+
+function escapeHtml(text) {
+  return String(text).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+}
+
+function page(notebook) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(titleOf(notebook))}</title>
+<link rel="icon" href="data:image/svg+xml,${FAVICON}">
+<link rel="stylesheet" href="notebook.css">
+</head>
+<body>
+<main>
+${renderNotebook(notebook)}
+<!--
+  THE CHAPTER ABOVE IS ALREADY READABLE. Everything below is the runtime that
+  makes it runnable, and none of it is needed to read a word.
+-->
+<div id="boot-warning">
+  <strong>This notebook is not running.</strong>
+  The page loaded but its JavaScript did not. The usual cause is opening
+  <code>index.html</code> straight from disk — browsers block ES modules over
+  <code>file://</code>. Serve it over HTTP instead, or run
+  <code>prolog-notebook view</code> on the notebook itself.
+  The chapter is readable either way; only the buttons need this.
+</div>
+</main>
+<script type="module" src="app.js"></script>
+</body>
+</html>
+`;
+}
+
+/**
+ * The wiring, and the source it hands back when a reader asks for a copy.
+ *
+ * The notebook's own bytes are embedded because "the chapter as published" has to
+ * mean the bytes the author wrote, not a re-serialisation of the model — a
+ * hand-written chapter would otherwise come back reformatted.
+ */
+function app(source, filename) {
+  return `// Generated by prolog-notebook build. The chapter is already in index.html;
+// this only wires it up.
+import { editsOf, mount, offerDownload } from './lib/notebook.js';
+import { parse } from './lib/format.js';
+import { exportSource } from './lib/export.js';
+
+const SOURCE = ${JSON.stringify(source)};
+const FILENAME = ${JSON.stringify(filename)};
+
+const root = document.querySelector('main');
+// The engine lives beside this file rather than in a node_modules the browser
+// cannot see, so its location is passed rather than guessed.
+const cells = mount(root, {
+  swiplUrl: new URL('./swipl/${ENGINE}', import.meta.url).href,
+});
+
+const notebook = parse(SOURCE);
+offerDownload(root, {
+  produce: () => ({ filename: FILENAME, text: exportSource(notebook, editsOf(cells)) }),
+  published: () => ({ filename: FILENAME, text: SOURCE }),
+  isEdited: () => cells.programs.some((p) => p.isEdited())
+    || cells.queries.some((q) => q.isEdited()),
+  on: cells.on,
+});
+`;
+}

package/src/notebook.js

@@ -25,6 +25,14 @@ let serial = 0;
 let panels = 0;
 
 /** Absolute, never relative: "3 minutes ago" is wrong the moment it is written. */
+/**
+ * How long a reader may stop typing before a prediction counts as written.
+ *
+ * Long enough that a first keystroke does not reveal the answers, short enough
+ * that somebody who has finished sees the consequence of finishing.
+ */
+const PREDICTION_PAUSE = 1200;
+
 function clock(date = new Date()) {
   return date.toLocaleTimeString(undefined, { hour12: false });
 }
@@ -1294,11 +1302,31 @@ function mountQuery(cell, options, bus, { above = [], below = [], prediction = n
 
   if (held) {
     hidden = true;
-    // `change` rather than `input`: it fires when they leave the box, so the
-    // answers do not appear under a reader who is still mid-sentence. An empty
-    // box is not a prediction, so it does not end the wait.
-    prediction?.addEventListener('change', () => {
+    /**
+     * AS THEY WRITE, not when they leave the box.
+     *
+     * This listened on `change` alone, which fires on blur — so a reader who
+     * typed their prediction and looked up saw nothing happen, and the link
+     * between "I wrote something" and "the answers appeared" was broken by a
+     * pause with no cause (869ernmzh). The original reasoning was about the
+     * FIRST KEYSTROKE and it over-corrected: they have committed as soon as they
+     * have written something.
+     *
+     * Debounced, so one character does not reveal the chapter and a reader who is
+     * still typing is not interrupted. `change` stays as well, so leaving the box
+     * is immediate. An empty box is still not a prediction.
+     */
+    const release = () => {
       if (held && prediction.value.trim() !== '') setHidden(false);
+    };
+    let pause = null;
+    prediction?.addEventListener('input', () => {
+      clearTimeout(pause);
+      pause = setTimeout(release, PREDICTION_PAUSE);
+    });
+    prediction?.addEventListener('change', () => {
+      clearTimeout(pause);
+      release();
     });
   }
 
@@ -1338,6 +1366,31 @@ function mountQuery(cell, options, bus, { above = [], below = [], prediction = n
   };
 }
 
+/**
+ * What the cells now say, keyed by id, for src/export.js to fold into the model.
+ *
+ * HERE RATHER THAN IN page.js, because a built page has its HTML already and must
+ * not import the renderer to get this — page.js pulls in markdown-it, and 137 KB
+ * of markdown parser to answer "what does this textarea say" is the opposite of
+ * why these two files are separate.
+ *
+ * @param {{programs: object[], queries: object[]}} cells what mount() returned
+ * @returns {Map<string, object>}
+ */
+export function editsOf(cells) {
+  const map = new Map();
+  for (const program of cells.programs) {
+    map.set(program.name, { source: program.text() });
+  }
+  for (const query of cells.queries) {
+    const output = query.output();
+    map.set(query.id, output === undefined
+      ? { goal: query.goal() }
+      : { goal: query.goal(), output });
+  }
+  return map;
+}
+
 function autosizeNow(ta) {
   ta.style.height = 'auto';
   ta.style.height = `${ta.scrollHeight}px`;

package/src/page.js

@@ -6,7 +6,7 @@
 // a prerendered chapter from downloading 137 KB of markdown-it to render nothing.
 import { parse } from './format.js';
 import { renderNotebook } from './render.js';
-import { mount, offerDownload } from './notebook.js';
+import { editsOf, mount, offerDownload } from './notebook.js';
 import { exportSource, filenameFor } from './export.js';
 
 /**
@@ -33,7 +33,7 @@ export function renderInto(text, root, options = {}) {
   // but a markdown cell has been rendered to HTML and cannot be read back out of
   // it — a chapter exported from the DOM alone would lose its writing.
   offerDownload(root, {
-    produce: () => ({ filename, text: exportSource(notebook, edits(cells)) }),
+    produce: () => ({ filename, text: exportSource(notebook, editsOf(cells)) }),
     // THE BYTES THE PAGE WAS GIVEN, not the model written out again. A
     // re-serialisation would be canonical form, which is not necessarily the
     // author's file: a hand-written chapter with no ids, or attributes in
@@ -49,21 +49,6 @@ export function renderInto(text, root, options = {}) {
   return notebook;
 }
 
-/** What the cells now say, keyed by id, for src/export.js to fold into the model. */
-function edits(cells) {
-  const map = new Map();
-  for (const program of cells.programs) {
-    map.set(program.name, { source: program.text() });
-  }
-  for (const query of cells.queries) {
-    const output = query.output();
-    map.set(query.id, output === undefined
-      ? { goal: query.goal() }
-      : { goal: query.goal(), output });
-  }
-  return map;
-}
-
 /**
  * Fetch a `.prolog.md` and render it.
  *

package/src/render.js

@@ -85,7 +85,7 @@ export function escapeHtml(text) {
  * @param {{variant: string, title: string, body: string}} cell
  * @returns {string}
  */
-export function renderContainer(cell) {
+export function renderContainer(cell, ordinal = 1) {
   switch (cell.variant) {
     case 'margin':
       // The whole note lives in the head line — `> [!margin] text with no body` —
@@ -122,7 +122,7 @@ function joinHeadAndBody(cell) {
  * markup for a place to answer it. The reveal is a <details> so that it still
  * works, unclicked, on the GitHub page.
  */
-function renderPredict(cell) {
+function renderPredict(cell, ordinal = 1) {
   const { before, summary, reveal } = splitReveal(cell.body);
   const parts = [];
   if (cell.title) parts.push(`<h3>${renderInline(cell.title)}</h3>`);
@@ -131,7 +131,11 @@ function renderPredict(cell) {
   // the format has no spelling for a per-prediction one, and inventing an
   // attribute for it would be a format change to save one line of prose — the
   // author's own question is directly above it and says what to write.
-  parts.push('<textarea placeholder="your prediction…" spellcheck="false"></textarea>');
+  // An id, because a form field without one is a warning in every browser's
+  // issues panel and this audience opens the issues panel (869ernmxe). Minted
+  // from position, since a container carries no id in the model — and stable for
+  // a given chapter, which is what a saved prediction will need (869ectt5d).
+  parts.push(`<textarea id="predict-${ordinal}" placeholder="your prediction…" spellcheck="false"></textarea>`);
   if (reveal !== null) {
     parts.push(`<details>\n<summary>${escapeHtml(summary)}</summary>\n${renderProse(reveal)}\n</details>`);
   }
@@ -177,7 +181,7 @@ export function renderProgram(cell) {
   <div class="bar">program<span class="spacer"></span><span class="status"></span>
     <button data-act="reset" disabled>reset</button>
     <button class="primary" data-act="consult">Consult</button></div>
-  <textarea spellcheck="false">${escapeHtml(cell.source)}</textarea>
+  <textarea id="src-${escapeHtml(cell.id)}" spellcheck="false">${escapeHtml(cell.source)}</textarea>
 </div>`;
 }
 
@@ -217,7 +221,8 @@ export function renderQuery(cell, options = {}) {
     <button data-act="next" disabled>; next</button>
     <button data-act="all" disabled>all</button>
     <button data-act="stop" disabled>stop</button></div>
-  <div class="prompt"><span>?-</span><input value="${escapeHtml(cell.goal)}" spellcheck="false"></div>
+  <div class="prompt"><span>?-</span>`
+    + `<input id="goal-${escapeHtml(cell.id)}" value="${escapeHtml(cell.goal)}" spellcheck="false"></div>
   <div class="out">${renderSavedOutput(cell, { stale })}</div>
 </div>`;
 }
@@ -305,7 +310,7 @@ export function renderCell(cell, options = {}) {
     case 'markdown':
       return renderProse(cell.source);
     case 'container':
-      return renderContainer(cell);
+      return renderContainer(cell, options.ordinal);
     case 'program':
       return renderProgram(cell);
     case 'query':
@@ -333,7 +338,9 @@ export function renderNotebook(notebook) {
   const parts = [];
   const kicker = renderKicker(notebook.frontMatter);
   if (kicker) parts.push(kicker);
+  let predictions = 0;
   for (const cell of notebook.cells) {
+    if (cell.kind === 'container' && cell.variant === 'predict') predictions += 1;
     // Staleness is decided here rather than in renderQuery, because it is a fact
     // about the cell's PLACE in the notebook — the program cells above it — and a
     // query cell on its own cannot know it. Computed before first paint: a 64-bit
@@ -348,7 +355,7 @@ export function renderNotebook(notebook) {
     const rerun = cell.kind === 'query'
       ? cell.rerun ?? notebook.frontMatter.get('rerun') ?? 'manual'
       : null;
-    parts.push(renderCell(cell, { stale, rerun }));
+    parts.push(renderCell(cell, { stale, rerun, ordinal: predictions }));
   }
   return `${parts.join('\n\n')}\n`;
 }

package/src/serve.js

@@ -0,0 +1,141 @@
+// Showing the chapter you are writing (869ermwjv).
+//
+// It serves exactly what `build` writes — the same map — so the page somebody
+// looks at and the page they would publish cannot drift apart. Generated files
+// come from memory and copied ones are streamed from wherever they live, so
+// nothing is written to disk and there is nothing to clean up.
+//
+// A server of about forty lines rather than a dependency: it answers GET for a
+// fixed set of paths that this process generated, and 404s everything else. It
+// is not a static file server and must not become one.
+import { spawn } from 'node:child_process';
+import { createReadStream } from 'node:fs';
+import { createServer } from 'node:http';
+import { connect } from 'node:net';
+
+const TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.wasm': 'application/wasm',
+  '.data': 'application/octet-stream',
+  '.md': 'text/markdown; charset=utf-8',
+};
+
+export function contentType(name) {
+  const dot = name.lastIndexOf('.');
+  return TYPES[name.slice(dot)] ?? 'application/octet-stream';
+}
+
+/**
+ * Serve a built page.
+ *
+ * @param {Map<string, {text: string}|{copy: URL}>} files what build produced
+ * @param {{port?: number, host?: string}} [options]
+ * @returns {Promise<{url: string, port: number, close: () => Promise<void>}>}
+ */
+export async function serve(files, { port = 8777, host = '127.0.0.1' } = {}) {
+  // ASK WHETHER ANYBODY IS THERE, on both stacks, before binding to one of them.
+  //
+  // An IPv6 wildcard listener — `python3 -m http.server --bind ::` — does not
+  // collide with an IPv4 loopback bind, so EADDRINUSE never fires and the bind
+  // succeeds. `localhost` then resolves to ::1 first, and the reader gets the
+  // other server's directory listing while this one sits unreachable on
+  // 127.0.0.1 with nothing anywhere saying why (869ernmvh). Found by somebody
+  // authoring their first chapter, which is exactly where it would be found.
+  if (port !== 0 && await occupied(port)) port = 0;
+  const server = createServer((request, response) => {
+    // Only GET, and only the names this process generated: the path never
+    // reaches the filesystem, so there is nothing for a `..` to escape into.
+    const name = decodeURIComponent(new URL(request.url, 'http://x').pathname).replace(/^\//, '');
+    const entry = files.get(name === '' ? 'index.html' : name);
+    if (request.method !== 'GET' || !entry) {
+      response.writeHead(404, { 'content-type': 'text/plain' }).end('not found\n');
+      return;
+    }
+    response.writeHead(200, {
+      'content-type': contentType(name || 'index.html'),
+      // A page being written is a page that changes under the reader.
+      'cache-control': 'no-store',
+    });
+    if (entry.text !== undefined) {
+      response.end(entry.text);
+      return;
+    }
+    createReadStream(entry.copy).on('error', () => response.end()).pipe(response);
+  });
+
+  const listening = await listen(server, port, host);
+  return {
+    url: `http://${host}:${listening}/`,
+    port: listening,
+    close: () => new Promise((resolve) => server.close(resolve)),
+  };
+}
+
+/**
+ * Take the port asked for, or any port at all.
+ *
+ * A tool that dies because something else is on 8777 is a tool that makes the
+ * reader find out what. It says which port it took instead.
+ */
+function listen(server, port, host) {
+  return new Promise((resolve, reject) => {
+    server.once('error', (error) => {
+      if (error.code !== 'EADDRINUSE') return reject(error);
+      server.listen(0, host, () => resolve(server.address().port));
+    });
+    server.listen(port, host, () => resolve(server.address().port));
+  });
+}
+
+/**
+ * Hand the URL to whatever the desktop uses.
+ *
+ * TWO WAYS THIS GOES WRONG, both found by reading it rather than running it:
+ *
+ * - `start` on Windows is a SHELL BUILTIN, not a program, so spawning it by name
+ *   fails every time. It has to be run through cmd, and the empty string is
+ *   cmd's title argument — without it, a quoted URL becomes the window title and
+ *   nothing opens.
+ * - spawn reports a missing program ASYNCHRONOUSLY. A try/catch around it catches
+ *   nothing, and an 'error' event with no listener is an uncaught exception —
+ *   which took the whole command down, AFTER the server had started, on any
+ *   machine without an opener. A listener that does nothing is the fix: the URL
+ *   is on screen either way, and a browser that will not open is not a reason to
+ *   stop serving.
+ */
+export function openInBrowser(url, { spawnImpl = spawn, platform = process.platform } = {}) {
+  const argv = platform === 'win32'
+    ? ['cmd', ['/c', 'start', '', url]]
+    : [platform === 'darwin' ? 'open' : 'xdg-open', [url]];
+  const child = spawnImpl(argv[0], argv[1], { stdio: 'ignore', detached: true });
+  child.on('error', () => {});
+  child.unref?.();
+  return child;
+}
+
+/**
+ * Is something already answering on this port, on either stack?
+ *
+ * A connect, not a bind: the question is "will the reader reach somebody else
+ * here", and a bind can succeed while the answer is yes.
+ */
+export async function occupied(port, { hosts = ['127.0.0.1', '::1'], timeout = 300 } = {}) {
+  const answers = await Promise.all(hosts.map((host) => reachable(host, port, timeout)));
+  return answers.some(Boolean);
+}
+
+function reachable(host, port, timeout) {
+  return new Promise((resolve) => {
+    const socket = connect({ host, port, timeout });
+    const done = (answer) => {
+      socket.destroy();
+      resolve(answer);
+    };
+    socket.once('connect', () => done(true));
+    socket.once('error', () => done(false));
+    socket.once('timeout', () => done(false));
+  });
+}

package/src/version.js

@@ -10,7 +10,7 @@
 export const NAME = 'Prolog Notebook';
 
 /** Must equal package.json's `version` — test/run.test.mjs enforces it. */
-export const VERSION = '0.4.3';
+export const VERSION = '0.5.1';
 
 /** The two facts a licence notice is actually made of. */
 export const YEAR = '2026';