@azure-id/orc 0.55.0

package/bin/webui/js/panels/learn.js

@@ -0,0 +1,220 @@
+"use strict";
+/* panels/learn.js — orc ui client
+   The onboarding walkthrough: a contents rail plus one section.
+
+   Loaded by app.html in the order its numeric prefix names. Classic
+   script, no import/export: an ES module import carries no query string,
+   and every static request here needs the per-launch session token. */
+
+
+const LEARN_POS_KEY = "orc-ui-learn-pos";
+
+PANELS.learn = function (host) {
+  head(host, t("learn.title"), t("learn.sub"));
+  const body = el("div", "stack");
+  host.append(body);
+  renderLearn(body);
+};
+
+async function renderLearn(body) {
+  body.replaceChildren(skeleton(6));
+  let d;
+  try {
+    d = (await read("/api/learn")).data;
+  } catch (e) {
+    body.replaceChildren(failBox(e));
+    return;
+  }
+  const sections = d.sections || [];
+  if (!sections.length) {
+    body.replaceChildren(empty(t("common.loadFail")));
+    return;
+  }
+
+  let idx = 0;
+  try {
+    const saved = Number(localStorage.getItem(LEARN_POS_KEY));
+    if (Number.isInteger(saved) && saved >= 0 && saved < sections.length) idx = saved;
+  } catch (_) {}
+
+  const wrap = el("div", "learn");
+
+  /* --- the contents rail ---------------------------------------------- */
+  const side = el("aside", "learn-side");
+  const sideHead = el("div", "learn-side-head", t("learn.contents"));
+  const search = el("input", "text-input");
+  search.type = "search";
+  search.placeholder = t("learn.search");
+  const navList = el("div", "learn-nav");
+  const searchResult = el("div", "learn-result");
+  side.append(sideHead, search, navList, searchResult);
+
+  const navItems = sections.map((s, i) => {
+    const b = el("button", "learn-nav-item");
+    b.type = "button";
+    b.append(el("span", "learn-num", String(i + 1)));
+    // The section title is content, shipped in onboarding-content.js — the same
+    // text the terminal prints. Never translated here.
+    b.append(el("span", "learn-nav-title", stripLeadingGlyph(s.title)));
+    b.addEventListener("click", () => goTo(i));
+    navList.append(b);
+    return b;
+  });
+
+  /* --- the reading pane ------------------------------------------------ */
+  const pane = el("div", "learn-pane");
+  const progress = el("div", "learn-progress");
+  const bar = el("div", "learn-progress-fill");
+  progress.append(bar);
+  const meta = el("div", "learn-meta");
+  const title = el("h2", "learn-title");
+  const article = el("div", "learn-article");
+  const foot = el("div", "learn-foot");
+
+  const prev = el("button", "btn btn-sm", t("learn.prev"));
+  prev.type = "button";
+  prev.addEventListener("click", () => goTo(idx - 1));
+  // Next is wired through `onclick` ONLY, and re-assigned by paint(): on the
+  // last section it wraps to the start instead of advancing. An addEventListener
+  // here as well would leave two live handlers, and both read the same mutable
+  // `idx` — so one click would advance twice.
+  const next = el("button", "btn btn-sm btn-primary", t("learn.next"));
+  next.type = "button";
+  const copyBtn = el("button", "btn btn-ghost btn-sm", t("learn.copySection"));
+  copyBtn.type = "button";
+  copyBtn.addEventListener("click", () => copy(sections[idx].lines.join("\n"), t("learn.copied")));
+
+  foot.append(prev, next, copyBtn);
+  pane.append(progress, meta, title, article, foot);
+  wrap.append(side, pane);
+  body.replaceChildren(wrap);
+
+  function goTo(i) {
+    if (i < 0 || i >= sections.length) return;
+    idx = i;
+    try {
+      localStorage.setItem(LEARN_POS_KEY, String(idx));
+    } catch (_) {}
+    paint();
+  }
+
+  function paint() {
+    const s = sections[idx];
+    navItems.forEach((b, i) => {
+      b.setAttribute("aria-current", i === idx ? "true" : "false");
+      b.classList.toggle("learn-seen", i < idx);
+    });
+    bar.style.width = ((idx + 1) / sections.length) * 100 + "%";
+    meta.textContent = t("learn.progress", { n: idx + 1, total: sections.length });
+    title.textContent = stripLeadingGlyph(s.title);
+    article.replaceChildren(renderLearnBody(s.lines));
+    // Re-trigger the section-swap animation on every move.
+    article.style.animation = "none";
+    void article.offsetHeight;
+    article.style.animation = "";
+    prev.disabled = idx === 0;
+    next.textContent = idx === sections.length - 1 ? t("learn.restart") : t("learn.next");
+    next.onclick = () => goTo(idx === sections.length - 1 ? 0 : idx + 1);
+    // The rail scrolls itself so the current item is always visible, which
+    // matters once the rail is taller than the viewport.
+    navItems[idx].scrollIntoView({ block: "nearest" });
+  }
+
+  search.addEventListener("input", () => {
+    const q = search.value.trim().toLowerCase();
+    let hits = 0;
+    sections.forEach((s, i) => {
+      const hit = !q || (s.title + " " + s.lines.join(" ")).toLowerCase().includes(q);
+      navItems[i].classList.toggle("hidden", !hit);
+      if (hit) hits++;
+    });
+    searchResult.textContent = q ? (hits ? tn(hits, "learn.matches") : t("learn.noMatch")) : "";
+    searchResult.classList.toggle("toolbar-result-none", !!q && !hits);
+    // A search with exactly one hit jumps to it — the obvious next click.
+    if (q && hits === 1) {
+      const only = sections.findIndex((s) => (s.title + " " + s.lines.join(" ")).toLowerCase().includes(q));
+      if (only >= 0 && only !== idx) goTo(only);
+    }
+  });
+  search.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && search.value) {
+      e.stopPropagation();
+      search.value = "";
+      search.dispatchEvent(new Event("input"));
+    }
+  });
+
+  paint();
+}
+
+/* The walkthrough is plain text written for a terminal, and it stays plain
+   text — nothing here is parsed as markup. What the panel adds is TYPOGRAPHY:
+   an indented line that starts with `orc ` or `/orc` is a command, so it is
+   rendered as a click-to-copy chip; a blank line becomes a paragraph break; a
+   line that is a bullet keeps its shape. Everything else is prose. */
+function renderLearnBody(lines) {
+  const out = frag();
+  let para = null;
+  const flush = () => {
+    if (para && para.childNodes.length) out.append(para);
+    para = null;
+  };
+
+  for (const raw of lines) {
+    const line = String(raw);
+    if (!line.trim()) {
+      flush();
+      continue;
+    }
+    const cmd = line.match(/^\s{2,}((?:orc|claude)\s+\S.*?|\/orc[\w-]*)(?:\s{2,}(.*))?$/);
+    if (cmd) {
+      flush();
+      const row = el("div", "learn-cmd-row");
+      const chipBtn = el("button", "learn-cmd", cmd[1].trim());
+      chipBtn.type = "button";
+      chipBtn.title = t("common.copy");
+      chipBtn.addEventListener("click", () => copy(cmd[1].trim(), cmd[1].trim()));
+      row.append(chipBtn);
+      if (cmd[2]) row.append(el("span", "learn-cmd-what", cmd[2].trim()));
+      out.append(row);
+      continue;
+    }
+    if (/^\s*[•·]/.test(line)) {
+      flush();
+      out.append(el("div", "learn-bullet", line.replace(/^\s*[•·]\s*/, "")));
+      continue;
+    }
+    // A pipeline / diagram line is centred monospace, not prose.
+    if (/[→←]/.test(line) && line.trim().length < 100) {
+      flush();
+      out.append(el("div", "learn-flowline", line.trim()));
+      continue;
+    }
+    if (!para) para = el("p", "learn-para");
+    if (para.childNodes.length) para.append(document.createTextNode(" "));
+    para.append(document.createTextNode(line.trim()));
+  }
+  flush();
+  const hint = el("div", "note learn-hint", t("learn.cmdHint"));
+  out.append(hint);
+  return out;
+}
+
+/* ======================================================= MOCKED SKILL USE == */
+/*
+   Every lane, written out as a run you can read before you pay for one: what
+   you type, what ORC prints back, what lands on disk. The whole point is that
+   nobody should have to spend tokens to find out what a command looks like.
+
+   THE SAME RULE AS THE FLOW STEPPER: the catalogue is DERIVED by
+   `bin/mockrun-catalog.js` — groups, reading order, lane names, summaries — and
+   this panel renders it and decides none of it. A second idea of the order (or
+   of which doc belongs to which lane) is exactly the drift the panel exists to
+   make impossible. Everything that arrives in the payload is CLI-side data, so
+   nothing in it is ever passed through `t()`.
+
+   Markdown is rendered to real DOM nodes, never assigned as HTML: `renderMd`
+   builds elements and every piece of text goes in through `textContent`. These
+   files ship inside the package, but "it is our own file" is not a reason to
+   parse it as markup.
+*/

package/bin/webui/js/panels/maintenance.js

@@ -0,0 +1,235 @@
+"use strict";
+/* panels/maintenance.js — orc ui client
+   Preview-then-apply. The apply button stays disabled until a preview was
+   fetched, the exact command is always visible, and a prune names EVERY file.
+
+   Loaded by app.html in the order its numeric prefix names. Classic
+   script, no import/export: an ES module import carries no query string,
+   and every static request here needs the per-launch session token. */
+
+PANELS.maintenance = function (host) {
+  head(host, t("maintenance.title"), t("maintenance.sub"));
+  const body = el("div", "stack");
+  host.append(body);
+  renderMaintenance(body);
+};
+
+async function renderMaintenance(body) {
+  body.replaceChildren(skeleton(5));
+  const d = (await read("/api/maintenance")).data;
+  const out = frag();
+
+  out.append(el("div", "banner", t("maintenance.banner")));
+
+  // ADVANCED is a section, not a disclaimer (v0.44.0). Everything above targets
+  // THIS project; everything in the box below reaches outside it. The global
+  // update lives there because a stale global install is a failure this panel
+  // already reports and, until now, could only tell you to fix in a terminal.
+  const advanced = card(t("maintenance.advanced"));
+  advanced.id = "maintenance-advanced";
+  advanced.append(el("div", "note", t("maintenance.advancedNote")));
+  let anyAdvanced = false;
+
+  for (const a of d.actions) {
+    const row = el("div", "action");
+    row.dataset.action = a.id; // the upgrade spotlight anchors on this
+    const left = el("div");
+    // Action id, label and command are the server's catalog — the label
+    // describes an exact CLI invocation, so it is shown as written.
+    left.append(el("div", "setting-name", a.id));
+    left.append(el("div", "setting-desc", a.label));
+    left.append(el("div", "action-cmd", a.command));
+    if (a.network) left.append(el("div", "note", t("maintenance.network")));
+
+    // `upgrade` is the one action whose whole point is a comparison, so it says
+    // what it would actually do BEFORE you preview it — and offers to check
+    // again, because "up to date" is only as old as the last check.
+    if (a.id === "upgrade") {
+      const status = el("div", "action-status");
+      status.append(el("span", "note", t("maintenance.checking")));
+      left.append(status);
+      const paint = (v) => {
+        const s = versionState(v);
+        status.replaceChildren();
+        status.append(chip(s.label, s.kind), el("span", "note", s.note));
+        const again = el("button", "btn btn-ghost btn-sm btn-allow-busy", t("maintenance.checkAgain"));
+        again.type = "button";
+        again.addEventListener("click", () => {
+          status.replaceChildren(el("span", "note", t("common.checking")));
+          refreshVersion().then(paint).catch(() => status.replaceChildren(el("span", "note", t("maintenance.checkFailed"))));
+        });
+        status.append(again);
+      };
+      versionInfo().then(paint).catch(() => status.replaceChildren(el("span", "note", t("maintenance.couldNotCheck"))));
+    }
+
+    if (a.advanced) left.append(el("div", "note", t("maintenance.globalNote")));
+
+    const btn = el("button", "btn btn-sm", t("maintenance.preview"));
+    btn.type = "button";
+    btn.addEventListener("click", () => previewAction(a.id, body));
+    row.append(left, btn);
+    if (a.advanced) {
+      anyAdvanced = true;
+      advanced.append(row);
+    } else {
+      out.append(row);
+    }
+  }
+
+  if (anyAdvanced) out.append(advanced);
+
+  const job = card(t("maintenance.lastRun"));
+  job.id = "job-card";
+  out.append(job);
+  body.replaceChildren(out);
+  refreshJob();
+}
+
+async function previewAction(action, body) {
+  const d = (await read("/api/maintenance/preview?action=" + encodeURIComponent(action))).data;
+  const b = el("div");
+
+  b.append(el("div", null, d.label));
+  b.append(el("div", "action-cmd", d.command));
+  b.append(el("div", "note", t("maintenance.previewFrom", { command: d.preview_command })));
+
+  // Said BEFORE the apply, not discovered after it. A panel that reloads itself
+  // with no warning reads as a crash, and the whole point of this note is that
+  // the reload is the thing the user wanted.
+  if (d.restarts_ui) b.append(el("div", "note", t("maintenance.willRestart")));
+
+  // The one action that writes outside this project says so before it runs, and
+  // the preview it is showing came from the SAME target — `orc doctor --global`,
+  // not the project doctor.
+  if (d.advanced) {
+    const g = el("div", "banner");
+    g.append(el("div", null, t("maintenance.globalWarn")));
+    b.append(g);
+  }
+
+  // Guard 1 — a run is mid-flight. Updating changes the skills that run will
+  // resume into. The CLI has no idea you are mid-run; this panel does.
+  let ackWaiting = !d.waiting_runs.length;
+  if (d.waiting_runs.length) {
+    const warn = el("div", "banner banner-bad");
+    const inner = el("div");
+    inner.append(el("strong", null, t("maintenance.waitingRuns", { n: d.waiting_runs.length })));
+    inner.append(el("div", null, t("maintenance.waitingBody", { slugs: d.waiting_runs.join(", ") })));
+    const lbl = el("label", "note");
+    const cb = el("input");
+    cb.type = "checkbox";
+    cb.addEventListener("change", () => {
+      ackWaiting = cb.checked;
+      syncApply();
+    });
+    lbl.append(cb, document.createTextNode(" " + t("maintenance.waitingAck")));
+    inner.append(lbl);
+    warn.append(inner);
+    b.append(warn);
+  }
+
+  // Guard 2 — a dirty working tree before an upgrade is worth a warning
+  // BEFORE, not a surprise after.
+  if (d.dirty_tree) {
+    const warn = el("div", "banner");
+    warn.append(el("div", null, t("maintenance.dirtyTree")));
+    b.append(warn);
+  }
+
+  const pv = d.preview || {};
+  if (action === "upgrade") {
+    b.append(
+      kvList([
+        [t("maintenance.installed"), pv.version],
+        [t("maintenance.available"), pv.latest || t("maintenance.availableUnknown")],
+        [t("maintenance.source"), pv.install_spec],
+        // The install URL and the URL the version number was read from are two
+        // different things. Showing only the first is how "up to date" becomes
+        // unfalsifiable from this panel.
+        [t("maintenance.checkedAt"), pv.checked_ref || pv.checked_source || t("maintenance.availableUnknown")],
+        [t("maintenance.updateAvailable"), pv.update_available ? t("maintenance.yes") : t("maintenance.no")],
+      ])
+    );
+    b.append(el("div", "note", t("maintenance.upgradeNote")));
+  } else {
+    const findings = pv.findings || [];
+    b.append(
+      kvList([
+        [t("maintenance.installedPayload"), pv.installed_version],
+        [t("maintenance.thisCli"), pv.package_version],
+        [t("maintenance.findings"), String(findings.length)],
+      ])
+    );
+    if (!findings.length) b.append(el("div", "note", t("maintenance.healthy")));
+    for (const f of findings) {
+      const line = el("div", "note");
+      line.append(
+        chip(f.fixable ? t("overview.doctor.fixable") : t("overview.doctor.manual"), f.fixable ? "info" : "warn"),
+        document.createTextNode(" " + f.message)
+      );
+      b.append(line);
+    }
+    // A count is NOT consent for a deletion — name every file.
+    if (d.names_files) {
+      const paths = findings.filter((f) => f.id === "orphan" || f.id === "orphan-candidates").flatMap((f) => f.paths || []);
+      const c = el("div");
+      c.append(el("div", "note", paths.length ? t("maintenance.wouldDelete", { n: paths.length }) : t("maintenance.wouldDeleteNone")));
+      if (paths.length) {
+        const fl = el("div", "file-list");
+        for (const p of paths) fl.append(el("div", null, p));
+        c.append(fl);
+      }
+      b.append(c);
+    }
+  }
+
+  let applyBtn = null;
+  const syncApply = () => {
+    if (applyBtn) applyBtn.disabled = !ackWaiting;
+  };
+
+  const actions = [{ label: t("common.cancel"), onClick: (c) => c() }];
+  if (action === "upgrade")
+    actions.push({
+      label: t("maintenance.checkOnly"),
+      onClick: () => toast(t("maintenance.checkOnlyDone"), "ok"),
+    });
+  actions.push({
+    label: action === "prune" ? t("maintenance.applyPrune") : action === "upgrade" ? t("maintenance.applyUpgrade") : t("maintenance.apply"),
+    cls: action === "prune" || action === "upgrade" ? "btn-danger" : "btn-primary",
+    id: "apply-btn",
+    disabled: !ackWaiting,
+    onClick: async (close) => {
+      try {
+        await post("/api/maintenance/apply", { action });
+        close();
+        toast(t("maintenance.started", { command: d.command }), "ok");
+        setBusy(true);
+        refreshJob();
+      } catch (e) {
+        toast(t("maintenance.startFail"), "bad", String(e.message));
+      }
+    },
+  });
+
+  modal({ title: t("maintenance.previewTitle", { command: d.command }), body: b, actions });
+  applyBtn = document.getElementById("apply-btn");
+  syncApply();
+}
+
+/* ============================================== PROMISES · BOUNDARY · SELF-SERVE
+   (v0.46.0)
+
+   THE LINE, restated because these three panels sit right on it: a FREE action
+   gets a button, a PAID action gets a copy-able command. `orc pact check` runs
+   the ledger's own cheap proofs and `orc handoff set` edits one graded surface —
+   both deterministic, both a button. `/orc-pact`'s reconcile conversation and
+   `/orc-boundary`'s evidence pass cost model tokens, so they are commands with
+   the reason printed next to them.
+
+   And the second rule, which these panels are the first real test of: the CLI's
+   state words are the ONLY state words. HOLDING/DRIFTED/UNCHECKABLE/BROKEN and
+   EXECUTE/ESCALATE/REFUSE are rendered verbatim, never softened into a friendlier
+   synonym — a second vocabulary is drift no lint can see. test/webui.test.js
+   greps this file for the literals that must come from the CLI instead. */

package/bin/webui/js/panels/mockrun.js

@@ -0,0 +1,227 @@
+"use strict";
+/* panels/mockrun.js — orc ui client
+   The mocked-run gallery and document pane. The catalogue is DERIVED by
+   bin/mockrun-catalog.js; this panel decides nothing about it.
+
+   Loaded by app.html in the order its numeric prefix names. Classic
+   script, no import/export: an ES module import carries no query string,
+   and every static request here needs the per-launch session token. */
+
+const MOCKRUN_KEY = "orc-ui-mockrun-doc";
+
+PANELS.mockrun = function (host) {
+  head(host, t("mockrun.title"), t("mockrun.sub"));
+  const body = el("div", "stack");
+  host.append(body);
+  renderMockrun(body);
+};
+
+async function renderMockrun(body) {
+  body.replaceChildren(skeleton(5));
+  let d;
+  try {
+    d = (await read("/api/mockruns")).data;
+  } catch (e) {
+    body.replaceChildren(failBox(e));
+    return;
+  }
+  const groups = (d && d.groups) || [];
+  const docs = (d && d.docs) || [];
+  if (!docs.length) {
+    body.replaceChildren(empty(t("mockrun.none"), t("mockrun.noneHint")));
+    return;
+  }
+
+  // `open` is a slug or null (null = the gallery). Remembered per browser so
+  // coming back to the panel returns you to what you were reading.
+  let open = null;
+  try {
+    const saved = localStorage.getItem(MOCKRUN_KEY);
+    if (saved && docs.some((x) => x.slug === saved)) open = saved;
+  } catch (_) {}
+
+  const wrap = el("div", "mock");
+
+  /* --- the contents rail ------------------------------------------------ */
+  const side = el("aside", "mock-side");
+  const sideHead = el("div", "mock-side-head", t("mockrun.contents"));
+  const search = el("input", "text-input");
+  search.type = "search";
+  search.placeholder = t("mockrun.search");
+  const navList = el("div", "mock-nav");
+  const searchResult = el("div", "learn-result");
+  side.append(sideHead, search, navList, searchResult);
+
+  const navItems = new Map();
+  for (const g of groups) {
+    // Group titles come from the CLI. They are content, not panel prose.
+    navList.append(el("div", "mock-nav-group", g.title));
+    for (const doc of g.docs) {
+      const b = el("button", "mock-nav-item");
+      b.type = "button";
+      b.append(el("span", "mock-nav-title", doc.lane || doc.title));
+      if (doc.kind === "annotated") b.append(el("span", "mock-nav-tag", t("mockrun.kindAnnotated")));
+      b.addEventListener("click", () => show(doc.slug));
+      navList.append(b);
+      navItems.set(doc.slug, b);
+    }
+  }
+
+  /* --- the pane --------------------------------------------------------- */
+  const pane = el("div", "mock-pane");
+  wrap.append(side, pane);
+  body.replaceChildren(wrap);
+
+  function mark() {
+    for (const [slug, b] of navItems) b.setAttribute("aria-current", slug === open ? "true" : "false");
+  }
+
+  // Re-run the pane's entrance animation on every swap, the same way the Learn
+  // panel does — without it, switching document reads as a content flicker.
+  function replay() {
+    pane.style.animation = "none";
+    void pane.offsetHeight;
+    pane.style.animation = "";
+  }
+
+  function gallery() {
+    open = null;
+    try {
+      localStorage.removeItem(MOCKRUN_KEY);
+    } catch (_) {}
+    mark();
+    const out = frag();
+
+    const intro = el("div", "note mock-intro");
+    intro.append(document.createTextNode(t("mockrun.intro", { n: docs.length })));
+    out.append(intro);
+
+    for (const g of groups) {
+      const sec = el("section", "mock-group");
+      sec.append(el("h2", "mock-group-head", g.title));
+      const grid = el("div", "mock-grid");
+      g.docs.forEach((doc, i) => {
+        const c = el("button", "mock-card");
+        c.type = "button";
+        // The stagger is a CSS custom property so reduced motion's blanket
+        // `animation-delay: 0ms !important` still wins over it.
+        c.style.setProperty("--i", String(Math.min(i, 8)));
+        const top = el("div", "mock-card-top");
+        top.append(el("span", "mock-card-lane", doc.lane || doc.title));
+        if (doc.kind === "annotated") top.append(chip(t("mockrun.kindAnnotated")));
+        c.append(top);
+        c.append(el("div", "mock-card-sum", doc.summary));
+        c.append(el("div", "mock-card-foot", tn(doc.lines, "mockrun.lines")));
+        c.addEventListener("click", () => show(doc.slug));
+        grid.append(c);
+      });
+      sec.append(grid);
+      out.append(sec);
+    }
+    pane.replaceChildren(out);
+    replay();
+  }
+
+  async function show(slug) {
+    open = slug;
+    try {
+      localStorage.setItem(MOCKRUN_KEY, slug);
+    } catch (_) {}
+    mark();
+    pane.replaceChildren(skeleton(6));
+    let doc;
+    try {
+      doc = (await read("/api/mockrun?slug=" + encodeURIComponent(slug))).data;
+    } catch (e) {
+      pane.replaceChildren(failBox(e));
+      return;
+    }
+    if (!doc || !doc.found) {
+      pane.replaceChildren(empty(t("mockrun.missing", { slug })));
+      return;
+    }
+
+    const out = frag();
+
+    const back = el("button", "btn btn-ghost btn-sm mock-back", t("mockrun.back"));
+    back.type = "button";
+    back.addEventListener("click", gallery);
+    out.append(back);
+
+    const h = el("div", "mock-doc-head");
+    h.append(el("h2", "mock-doc-title", doc.title));
+    const meta = el("div", "mock-doc-meta");
+    // The lane is a command you type, so it is printed as one — a chip would
+    // uppercase it, and `/ORC-GRILL` is not a command that exists.
+    if (doc.lane) meta.append(el("span", "mock-doc-lane", doc.lane));
+    meta.append(el("span", "mock-doc-path", doc.path));
+    meta.append(el("span", "mock-doc-lines", tn(doc.lines, "mockrun.lines")));
+    h.append(meta);
+    out.append(h);
+
+    const article = el("article", "mock-article");
+    article.append(renderMd(doc.body, { title: doc.title, docs, open: show }));
+    out.append(article);
+
+    // Reading order is the catalogue's order, so "next" means the next thing
+    // the index would have you read — not the next file alphabetically.
+    const idx = docs.findIndex((x) => x.slug === doc.slug);
+    const foot = el("div", "mock-doc-foot");
+    const prev = docs[idx - 1];
+    const next = docs[idx + 1];
+    if (prev) {
+      const b = el("button", "btn btn-sm", "← " + (prev.lane || prev.title));
+      b.type = "button";
+      b.addEventListener("click", () => show(prev.slug));
+      foot.append(b);
+    }
+    const cmd = el("button", "btn btn-ghost btn-sm", t("mockrun.copyCmd"));
+    cmd.type = "button";
+    cmd.addEventListener("click", () => copy("orc mock-run show " + doc.slug, "orc mock-run"));
+    foot.append(cmd);
+    if (next) {
+      const b = el("button", "btn btn-sm btn-primary", (next.lane || next.title) + " →");
+      b.type = "button";
+      b.addEventListener("click", () => show(next.slug));
+      foot.append(b);
+    }
+    out.append(foot);
+
+    pane.replaceChildren(out);
+    replay();
+    pane.scrollTop = 0;
+  }
+
+  search.addEventListener("input", () => {
+    const q = search.value.trim().toLowerCase();
+    let hits = 0;
+    for (const doc of docs) {
+      const hay = (doc.slug + " " + doc.title + " " + (doc.lane || "") + " " + doc.summary).toLowerCase();
+      const hit = !q || hay.includes(q);
+      navItems.get(doc.slug).classList.toggle("hidden", !hit);
+      if (hit) hits++;
+    }
+    // A group whose every item is filtered out keeps an orphan heading.
+    for (const gh of navList.querySelectorAll(".mock-nav-group")) {
+      let n = gh.nextElementSibling;
+      let any = false;
+      while (n && !n.classList.contains("mock-nav-group")) {
+        if (!n.classList.contains("hidden")) any = true;
+        n = n.nextElementSibling;
+      }
+      gh.classList.toggle("hidden", !!q && !any);
+    }
+    searchResult.textContent = q ? (hits ? tn(hits, "mockrun.matches") : t("mockrun.noMatch")) : "";
+    searchResult.classList.toggle("toolbar-result-none", !!q && !hits);
+  });
+  search.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && search.value) {
+      e.stopPropagation();
+      search.value = "";
+      search.dispatchEvent(new Event("input"));
+    }
+  });
+
+  if (open) show(open);
+  else gallery();
+}