prolog-notebook 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+## [0.1.0] — 2026-08-02
+
+First release. The execution core works; the file-backed renderer does not exist yet.
+
+### Added
+
+- **Execution core** (`src/engine.js`) — SWI-Prolog via WebAssembly, with no DOM in it, so
+  the same module backs the browser, a future VS Code controller, and a headless runner.
+  `PrologSession.consult/2`, `session.query/1`, `query.next()`, `query.all()`.
+- **Node entry point** (`prolog-notebook`) and **browser entry point**
+  (`prolog-notebook/browser`).
+- **Cell wiring** (`src/notebook.js`) — program cells and query cells with `Run`, `; next`
+  and `all`. Stepping solutions one at a time is deliberate: a Prolog query yields answers
+  on backtracking, and watching that happen is usually the point.
+- **Worked example** (`example/index.html`) — the `once/1` placement puzzle, a real section
+  rather than a widget demo.
+- Eight tests covering duplicate proofs, `once` around a generator versus a test, ground
+  goals, failure, unknown predicates, and stepping.
+
+### Notes
+
+Two behaviours of `swipl-wasm` that the core papers over, both found by driving a browser
+rather than reading documentation:
+
+- `prolog.query/1` runs with `system` as its context module while `consult/1` loads into
+  `user`, so goals are wrapped as `user:( Goal )`.
+- `next()` can return the final binding together with `done: true`; treating `done` as
+  "stop" drops the last solution.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Johnny Jarecsni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,143 @@
+# prolog-notebook
+
+**Jupyter-style notebooks for Prolog. Runs in the browser, installs nothing.**
+
+> ⚠️ **v0.1.0 — early.** The execution core works and is tested. The renderer that turns a
+> notebook *file* into a page is not written yet; today you mark cells up in HTML by hand.
+> See [Status](#status).
+
+## The idea
+
+Prolog is unusually badly served by a printed page, and unusually well served by an
+executable one.
+
+Almost everything that trips up a Prolog learner is something you have to *watch happen*.
+A query does not return an answer, it returns answers one at a time on backtracking. A rule
+that reads correctly can be wrong because of the order its goals are in. `once/1` around one
+goal is free and around the goal next to it is catastrophic. None of that survives being
+described; all of it is obvious the moment you run it and press `;` a few times.
+
+So the aim here is notebooks where the prose and the Prolog live together and the Prolog
+actually runs — for the reader, not just the author. That last part is the whole problem.
+A Jupyter kernel for Prolog [already exists][kernel] and is good, but it needs Python, then
+Jupyter, then the kernel, then a local SWI-Prolog: four installs before the first query. A
+reader who has to do that has already closed the tab.
+
+`prolog-notebook` uses [SWI-Prolog compiled to WebAssembly][wasm], so the Prolog system runs
+*inside the page*. No server, no kernel process, no install. You publish a static file and
+the reader clicks a link.
+
+### `; next` is the point
+
+The reason this is not "Jupyter with a different kernel" is the button marked `; next`.
+
+Jupyter's model is request/response: run a cell, get a result. Prolog's model is a stream of
+solutions you walk through. In the included example, `is_son(X)` reports edward *twice* — and
+that duplication **is the lesson**, because it means Prolog found two proofs. A notebook that
+showed only a final list of results would have hidden the very thing worth teaching.
+
+So a query cell gives you the first solution, and then you step.
+
+## Try it
+
+```sh
+git clone https://github.com/jarecsni/prolog-notebook
+cd prolog-notebook
+npm install
+npm run example        # then open http://localhost:8777/example/
+```
+
+The example is a real worked section — the `once/1` placement puzzle — not a widget demo.
+Predict what each version returns before you press Run.
+
+It has to be **served over HTTP**. Opening `example/index.html` straight from disk leaves the
+buttons inert, because browsers block ES modules over `file://` — the page detects this and
+says so rather than failing silently.
+
+## Use it
+
+Headless, in Node — this is how you test that every example in a document still works:
+
+```js
+import { createSession, formatSolution } from 'prolog-notebook';
+
+const session = await createSession();
+session.consult(`
+  male(edward).  male(alfred).
+  father(albert, edward).  mother(victoria, edward).
+  parent(X, Y) :- father(X, Y) ; mother(X, Y).
+  is_son(X) :- male(X), parent(_, X).
+`);
+
+// Step solutions one at a time, as at the prompt
+const q = session.query('is_son(X)');
+let r;
+while (!(r = q.next()).done) console.log(formatSolution(r.solution));
+
+// …or drain it
+const { solutions } = session.query('is_son(X)').all();
+```
+
+In a browser, load the WASM bundle with a `<script>` tag, then import from
+`prolog-notebook/browser`. See [`example/index.html`](example/index.html) for the cell
+markup and [`src/notebook.js`](src/notebook.js) for the wiring.
+
+### API
+
+| | |
+|---|---|
+| `createSession(options?)` | boots SWI-Prolog; returns a `PrologSession` |
+| `session.consult(text, name?)` | loads a clause base into `user`; `{ok, error?}` |
+| `session.query(goal)` | opens a query; returns a `PrologQuery` |
+| `query.next()` | one solution: `{done, solution?, error?}` |
+| `query.all(limit?)` | drains it: `{solutions, error?, truncated}` |
+| `formatSolution(s)` | renders bindings the way a top level would |
+
+## Two things that will bite you if you build this yourself
+
+Both were found by driving a real browser, not by reading documentation.
+
+**Module context.** `prolog.query(Goal)` runs with `system` as its context module, while
+`consult/1` loads into `user`. Unqualified goals raise `Unknown procedure: system:foo/1`
+*even though the consult reported success*. Goals are wrapped as `user:( Goal )`.
+
+**The last solution arrives with `done`.** `next()` can return `{done: true, value: {...}}` —
+a final binding and the end of the search in a single step. Treating `done` as "stop, no more
+answers" silently drops the last solution, which is the kind of bug you don't notice until a
+lesson about backtracking quietly teaches the wrong thing.
+
+## Status
+
+Working and tested:
+
+- execution core, environment-agnostic (`src/engine.js`), 8 passing tests
+- Node entry point, browser entry point
+- program cells and query cells with `Run` / `; next` / `all`
+- the worked example
+
+Not built yet:
+
+- **a file-backed renderer** — reading `.ipynb` or markdown and *generating* the cells.
+  Today the example's cells are hand-written HTML. This is the next real piece of work.
+- 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
+- a CLI runner, to execute a document's cells in CI and fail the build when an example rots
+- `trace/0` integration, for visible backtracking — where [prolog-trace-viz][ptv] would plug in
+- syntax highlighting
+
+## Prior art
+
+[prolog-jupyter-kernel][kernel] — a proper Jupyter kernel for SWI and SICStus, from Anne
+Brecklinghaus's master's thesis at Düsseldorf. Use it if you already live in JupyterLab and
+don't mind the installs.
+
+[SWISH](https://swish.swi-prolog.org/) — SWI-Prolog's own browser environment, which has a
+notebook feature. Server-hosted and sandboxed; this is neither.
+
+## License
+
+MIT
+
+[kernel]: https://github.com/hhu-stups/prolog-jupyter-kernel
+[wasm]: https://github.com/SWI-Prolog/swipl-wasm
+[ptv]: https://github.com/jarecsni/prolog-trace-viz

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "prolog-notebook",
+  "version": "0.1.0",
+  "description": "Jupyter-style notebooks for Prolog. Runs in the browser, installs nothing.",
+  "type": "module",
+  "main": "./src/node.js",
+  "exports": {
+    ".": "./src/node.js",
+    "./browser": "./src/browser.js",
+    "./engine": "./src/engine.js",
+    "./notebook.css": "./src/notebook.css"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "test": "node --test test/*.test.mjs",
+    "example": "python3 -m http.server 8777",
+    "prepublishOnly": "npm test"
+  },
+  "keywords": [
+    "prolog",
+    "notebook",
+    "jupyter",
+    "swi-prolog",
+    "wasm",
+    "webassembly",
+    "logic-programming",
+    "literate-programming"
+  ],
+  "author": "Johnny Jarecsni",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jarecsni/prolog-notebook.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jarecsni/prolog-notebook/issues"
+  },
+  "homepage": "https://github.com/jarecsni/prolog-notebook#readme",
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "swipl-wasm": "^8.0.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/browser.js

@@ -0,0 +1,25 @@
+// Browser entry point. The swipl-wasm bundle is loaded by a <script> tag and
+// exposes a global SWIPL factory; keeping the load out of this module means the
+// 5.9 MB bundle is fetched by the page, not by a bundler.
+import { PrologSession } from './engine.js';
+
+export * from './engine.js';
+
+let session = null;
+
+/**
+ * Boot (once) and return the shared session for this page.
+ * @returns {Promise<PrologSession>}
+ */
+export function createSession(options = {}) {
+  if (!session) {
+    if (typeof globalThis.SWIPL !== 'function') {
+      throw new Error(
+        'swipl-wasm not found. Load it first, e.g.\n' +
+          '<script src="node_modules/swipl-wasm/dist/swipl/swipl-bundle.js"></script>'
+      );
+    }
+    session = PrologSession.create(globalThis.SWIPL, options);
+  }
+  return session;
+}

package/src/engine.js

@@ -0,0 +1,134 @@
+// The execution core. No DOM, no browser assumptions — this same module backs the
+// web renderer, a VS Code notebook controller, and a headless CLI runner.
+//
+// The engine is SWI-Prolog itself compiled to WebAssembly, so nothing is installed
+// and nothing is spawned: the Prolog system runs inside the host process.
+
+let fileSerial = 0;
+
+export class PrologSession {
+  /**
+   * @param {Function} swiplFactory the SWIPL factory from swipl-wasm
+   * @param {object} [options] passed through to the factory
+   */
+  static async create(swiplFactory, options = {}) {
+    const module = await swiplFactory({ arguments: ['-q'], ...options });
+    return new PrologSession(module);
+  }
+
+  constructor(module) {
+    this.module = module;
+  }
+
+  /**
+   * Load a clause base into the `user` module.
+   * @param {string} text Prolog source
+   * @returns {{ok: boolean, error?: string}}
+   */
+  consult(text, name = `cell${fileSerial++}`) {
+    const path = `/${name}.pl`;
+    try {
+      this.module.FS.writeFile(path, text);
+      const r = this.module.prolog.query(`user:consult('${path}')`).once();
+      if (r && r.error) return { ok: false, error: r.message };
+      return { ok: true };
+    } catch (e) {
+      return { ok: false, error: e.message };
+    }
+  }
+
+  /**
+   * Open a query. Solutions are pulled one at a time — this is Prolog, not a
+   * function call, and stepping the solutions is usually the point.
+   * @param {string} goal
+   * @returns {PrologQuery}
+   */
+  query(goal) {
+    // Cells consult into `user`, but prolog.query/1 runs with `system` as the
+    // context module, so an unqualified goal resolves against the wrong one.
+    const cleaned = goal.trim().replace(/\.$/, '');
+    return new PrologQuery(this.module.prolog.query(`user:( ${cleaned} )`));
+  }
+}
+
+export class PrologQuery {
+  constructor(handle) {
+    this.handle = handle;
+    this.exhausted = false;
+    this.count = 0;
+  }
+
+  /**
+   * Pull the next solution.
+   * @returns {{done: boolean, solution?: object, error?: string}}
+   */
+  next() {
+    if (this.exhausted) return { done: true };
+    let r;
+    try {
+      r = this.handle.next();
+    } catch (e) {
+      this.exhausted = true;
+      return { done: true, error: e.message };
+    }
+    if (r.error) {
+      this.exhausted = true;
+      return { done: true, error: r.message };
+    }
+
+    // The engine can deliver the final solution *together with* done:true — a
+    // binding and the end of the search in one step. Reporting `done` without
+    // the binding silently loses the last solution.
+    const out = { done: !!r.done };
+    if (r.value) {
+      this.count += 1;
+      out.solution = bindingsOf(r.value);
+    }
+    if (r.done) this.exhausted = true;
+    return out;
+  }
+
+  /**
+   * Drain the query. `limit` guards against a genuinely infinite generator.
+   * @returns {{solutions: object[], error?: string, truncated: boolean}}
+   */
+  all(limit = 1000) {
+    const solutions = [];
+    let error;
+    while (!this.exhausted && solutions.length < limit) {
+      const r = this.next();
+      if (r.solution) solutions.push(r.solution);
+      if (r.error) error = r.error;
+    }
+    return { solutions, error, truncated: !this.exhausted };
+  }
+}
+
+/** Strip the engine's bookkeeping keys from a solution. */
+export function bindingsOf(value) {
+  const out = {};
+  for (const [k, v] of Object.entries(value)) {
+    if (k === '$tag' || k === 'success') continue;
+    out[k] = v;
+  }
+  return out;
+}
+
+/** Render a solution the way a Prolog top level would. */
+export function formatSolution(solution) {
+  const pairs = Object.entries(solution);
+  if (!pairs.length) return 'true';
+  return pairs.map(([k, v]) => `${k} = ${formatTerm(v)}`).join(',  ');
+}
+
+export function formatTerm(v) {
+  if (v === null || v === undefined) return '_';
+  if (Array.isArray(v)) return `[${v.map(formatTerm).join(', ')}]`;
+  if (typeof v === 'object') {
+    if (v.$tag === 'string') return `"${v.text}"`;
+    if (v.functor) return `${v.functor}(${(v.args || []).map(formatTerm).join(', ')})`;
+    if (v.v !== undefined) return `_${v.v}`;
+    return JSON.stringify(v);
+  }
+  return String(v);
+}

package/src/node.js

@@ -0,0 +1,10 @@
+// Node entry point: boots the engine with the swipl-wasm Node build.
+import SWIPL from 'swipl-wasm/dist/swipl-node.js';
+import { PrologSession } from './engine.js';
+
+export * from './engine.js';
+
+/** @returns {Promise<PrologSession>} a session running in this Node process. */
+export function createSession(options = {}) {
+  return PrologSession.create(SWIPL, options);
+}

package/src/notebook.css

@@ -0,0 +1,201 @@
+:root {
+  --ink: #1d1d1f;
+  --paper: #fdfcf7;
+  --rule: #e0dccf;
+  --accent: #b4451f;
+  --code-bg: #f5f2e8;
+  --ok: #2f6b3a;
+  --err: #a52014;
+  --hand: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  padding: 3rem 1.5rem 6rem;
+  background: var(--paper);
+  color: var(--ink);
+  font: 17px/1.65 Georgia, "Iowan Old Style", serif;
+}
+
+main { max-width: 46rem; margin: 0 auto; }
+
+h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 .3rem; }
+h2 {
+  font-size: 1.35rem;
+  margin: 3rem 0 .8rem;
+  padding-bottom: .3rem;
+  border-bottom: 2px solid var(--rule);
+}
+.kicker {
+  font: 600 .8rem/1 system-ui, sans-serif;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 1.4rem;
+}
+
+p { margin: 0 0 1rem; }
+code { font: .92em ui-monospace, "SF Mono", Menlo, monospace; background: var(--code-bg); padding: .1em .3em; border-radius: 3px; }
+
+/* --- cells --- */
+
+.cell {
+  margin: 1.6rem 0;
+  border: 1px solid var(--rule);
+  border-radius: 6px;
+  background: #fff;
+  overflow: hidden;
+}
+.cell .bar {
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  padding: .45rem .7rem;
+  background: var(--code-bg);
+  border-bottom: 1px solid var(--rule);
+  font: 600 .72rem/1 system-ui, sans-serif;
+  letter-spacing: .09em;
+  text-transform: uppercase;
+  color: #6b6455;
+}
+.cell .bar .spacer { flex: 1; }
+
+textarea, input {
+  width: 100%;
+  border: 0;
+  padding: .8rem .9rem;
+  font: 14px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
+  color: var(--ink);
+  background: #fff;
+  resize: none;
+}
+textarea:focus, input:focus { outline: 2px solid #cfd8e8; outline-offset: -2px; }
+
+input { border-bottom: 1px solid var(--rule); }
+.query .prompt { display: flex; align-items: baseline; }
+.query .prompt span {
+  padding-left: .9rem;
+  font: 14px ui-monospace, Menlo, monospace;
+  color: #8a8371;
+  white-space: nowrap;
+}
+
+button {
+  font: 600 .74rem/1 system-ui, sans-serif;
+  padding: .42rem .7rem;
+  border: 1px solid #c8c1ae;
+  border-radius: 4px;
+  background: #fff;
+  color: var(--ink);
+  cursor: pointer;
+}
+button:hover:not(:disabled) { background: var(--code-bg); }
+button:disabled { opacity: .38; cursor: default; }
+button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+button.primary:hover { background: #98380f; }
+
+.status { font: 400 .74rem/1 system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
+.status.ok { color: var(--ok); }
+.status.err { color: var(--err); }
+.status.busy { color: #8a8371; }
+
+.out {
+  font: 13.5px/1.7 ui-monospace, Menlo, monospace;
+  padding: .6rem .9rem;
+  max-height: 16rem;
+  overflow-y: auto;
+  background: #fbfaf5;
+  border-top: 1px solid var(--rule);
+}
+.out:empty { display: none; }
+.line.echo { color: #8a8371; }
+.line.sol { color: var(--ok); }
+.line.done { color: #8a8371; font-style: italic; }
+.line.err { color: var(--err); }
+
+/* --- teaching devices --- */
+
+.predict {
+  margin: 1.6rem 0;
+  padding: 1rem 1.2rem;
+  border: 2px dashed #c8b98a;
+  border-radius: 6px;
+  background: #fffdf2;
+}
+.predict h3 {
+  margin: 0 0 .5rem;
+  font: 700 .95rem/1.3 system-ui, sans-serif;
+  color: var(--accent);
+}
+.predict textarea {
+  border: 1px solid var(--rule);
+  border-radius: 4px;
+  background: #fff;
+  min-height: 3.4rem;
+}
+.predict summary {
+  cursor: pointer;
+  font: 600 .85rem/1 system-ui, sans-serif;
+  color: var(--accent);
+  margin-top: .7rem;
+}
+.predict[open] summary { margin-bottom: .6rem; }
+.predict details p:last-child { margin-bottom: 0; }
+
+.aside {
+  margin: 1.8rem 0;
+  padding: .9rem 1.1rem;
+  border-left: 4px solid var(--accent);
+  background: #fbf6ef;
+  font-size: .95rem;
+}
+.aside strong { display: block; margin-bottom: .3rem; }
+
+.note {
+  font-family: var(--hand);
+  font-size: 1.12rem;
+  color: var(--accent);
+  transform: rotate(-1.2deg);
+  margin: .6rem 0 1.4rem 2rem;
+}
+.note::before { content: "↖ "; }
+
+.bullets { border-top: 3px double var(--rule); padding-top: 1rem; margin-top: 2.5rem; }
+.bullets h2 { border: 0; margin-top: 0; }
+.bullets li { margin-bottom: .5rem; }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ink: #e8e4da; --paper: #16151a; --rule: #35323c;
+    --code-bg: #22212a; --accent: #e2825c; --ok: #7fc98d; --err: #f0806f;
+  }
+  .cell, textarea, input { background: #1c1b22; }
+  .out { background: #1a191f; }
+  .predict { background: #201e19; border-color: #5a4f36; }
+  .aside { background: #201d1c; }
+  button { background: #24232b; border-color: #454150; color: var(--ink); }
+  button:hover:not(:disabled) { background: #2d2b35; }
+  button.primary { background: var(--accent); color: #16151a; }
+}
+
+/* Shown until mount() runs; see notebook.js. Its presence means the page is inert. */
+#boot-warning {
+  margin: 0 0 2rem;
+  padding: 1rem 1.2rem;
+  border: 2px solid var(--err);
+  border-radius: 6px;
+  background: #fff5f3;
+  font-size: .95rem;
+}
+#boot-warning strong { color: var(--err); }
+#boot-warning pre {
+  margin: .6rem 0 0;
+  padding: .6rem .8rem;
+  background: var(--code-bg);
+  border-radius: 4px;
+  font: 13px/1.5 ui-monospace, Menlo, monospace;
+  overflow-x: auto;
+}
+@media (prefers-color-scheme: dark) { #boot-warning { background: #2a1d1b; } }

package/src/notebook.js

@@ -0,0 +1,144 @@
+// Browser wiring: turns marked-up cells in a page into a running notebook.
+//
+// Deliberately not a framework. A page declares its cells as ordinary elements and
+// calls mount(); the DOM is the notebook. A file-backed renderer (reading .ipynb or
+// markdown and generating these cells) is the next layer up, and is not written yet.
+import { createSession, formatSolution } from './browser.js';
+
+let serial = 0;
+let booted = false;
+
+export function mount(root = document) {
+  // A page can carry a #boot-warning element saying "this notebook is not running".
+  // It is removed only once mount() has actually run, so any failure that prevents
+  // this module from loading — opening the page over file://, a bad path, a syntax
+  // error — leaves the warning on screen instead of silently inert buttons.
+  document.getElementById('boot-warning')?.remove();
+
+  root.querySelectorAll('.cell.program').forEach(mountProgram);
+  root.querySelectorAll('.cell.query').forEach(mountQuery);
+}
+
+/** Boot the engine, reporting the first (slow, 5.9 MB) load through `status`. */
+async function boot(status) {
+  if (!booted && status) {
+    status.textContent = 'starting SWI-Prolog (5.9 MB, first time only)…';
+    status.className = 'status busy';
+  }
+  const session = await createSession();
+  booted = true;
+  return session;
+}
+
+function mountProgram(cell) {
+  const source = cell.querySelector('textarea');
+  const button = cell.querySelector('button');
+  const status = cell.querySelector('.status');
+  const name = `cell${serial++}`;
+
+  autosize(source);
+
+  button.addEventListener('click', async () => {
+    const label = button.textContent;
+    button.disabled = true;
+    button.textContent = 'Working…';
+    try {
+      const session = await boot(status);
+      const r = session.consult(source.value, name);
+      status.textContent = r.ok ? '✓ consulted' : r.error;
+      status.className = `status ${r.ok ? 'ok' : 'err'}`;
+    } catch (e) {
+      status.textContent = e.message;
+      status.className = 'status err';
+    } finally {
+      button.disabled = false;
+      button.textContent = label;
+    }
+  });
+}
+
+function mountQuery(cell) {
+  const input = cell.querySelector('input');
+  const runBtn = cell.querySelector('[data-act="run"]');
+  const nextBtn = cell.querySelector('[data-act="next"]');
+  const allBtn = cell.querySelector('[data-act="all"]');
+  const out = cell.querySelector('.out');
+
+  let query = null;
+  let count = 0;
+
+  const write = (text, cls) => {
+    const line = document.createElement('div');
+    line.className = `line ${cls || ''}`;
+    line.textContent = text;
+    out.appendChild(line);
+    out.scrollTop = out.scrollHeight;
+  };
+
+  const finish = () => {
+    query = null;
+    nextBtn.disabled = true;
+    allBtn.disabled = true;
+  };
+
+  const step = () => {
+    if (!query) return;
+    const r = query.next();
+    if (r.solution) write(`${++count}.  ${formatSolution(r.solution)}`, 'sol');
+    if (r.error) {
+      write(r.error, 'err');
+      finish();
+      return;
+    }
+    if (r.done) {
+      write(count === 0 ? 'false.' : 'no more solutions.', 'done');
+      finish();
+    }
+  };
+
+  runBtn.addEventListener('click', async () => {
+    out.innerHTML = '';
+    count = 0;
+    const goal = input.value.trim().replace(/\.$/, '');
+    if (!goal) return;
+    write(`?- ${goal}.`, 'echo');
+    runBtn.disabled = true;
+    try {
+      if (!booted) write('starting SWI-Prolog (5.9 MB, first time only)…', 'done');
+      const session = await boot();
+      query = session.query(goal);
+      nextBtn.disabled = false;
+      allBtn.disabled = false;
+      step();
+    } catch (e) {
+      write(e.message, 'err');
+      finish();
+    } finally {
+      runBtn.disabled = false;
+    }
+  });
+
+  nextBtn.addEventListener('click', step);
+  allBtn.addEventListener('click', () => {
+    let guard = 0;
+    while (query && guard++ < 500) step();
+    if (guard >= 500) write('stopped after 500 solutions.', 'done');
+  });
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') runBtn.click();
+    if (e.key === ';') {
+      e.preventDefault();
+      if (!nextBtn.disabled) step();
+    }
+  });
+}
+
+function autosize(ta) {
+  const fit = () => {
+    ta.style.height = 'auto';
+    ta.style.height = `${ta.scrollHeight}px`;
+  };
+  ta.addEventListener('input', fit);
+  requestAnimationFrame(fit);
+}