writer: make the workspace record-session port structural

apps/writer/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "icons": "node scripts/write-pwa-icons.mjs",
     "build": "pnpm manifest && pnpm manifest:validate && vite build",
+    "build:lab": "VITE_MDBASE_ENV=lab pnpm build",
     "dev": "pnpm manifest && vite --host 127.0.0.1",
     "manifest": "node scripts/write-manifest.mjs",
     "manifest:validate": "mdbase-connect-dev validate-manifest public/.well-known/mdbase-app.json",
@@ -32,23 +33,27 @@
     "@lezer/highlight": "^1.2.3",
     "@lezer/markdown": "^1.4.3",
     "@mdbase-dev/connect": "0.1.0-beta.125",
-    "@mdbase-dev/ui": "0.1.0-beta.125",
+    "@mdbase-dev/connect-protocol": "file:vendor/mdbase-dev-connect-protocol-0.1.0-beta.129-d765e675c3da.tgz",
+    "@mdbase-dev/sdk": "file:../../vendor/mdbase-dev-sdk-dev-9a033b25.tgz",
+    "@mdbase-dev/ui": "file:../../vendor/mdbase-dev-ui-dev-9553ad66.tgz",
     "@mdbase-writer/core": "workspace:*",
     "@myriaddreamin/typst-ts-renderer": "0.7.0",
     "@myriaddreamin/typst-ts-web-compiler": "0.7.0",
     "@myriaddreamin/typst.ts": "0.7.0",
-    "pandoc-wasm": "1.1.0",
     "@phosphor-icons/react": "^2.1.10",
+    "pandoc-wasm": "1.1.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },
   "devDependencies": {
     "@callumalpass/mdbase": "0.3.0-rc.5",
     "@mdbase-dev/connect-dev": "0.1.0-beta.125",
     "@mdbase-dev/connect-testing": "0.1.0-beta.125",
+    "@testing-library/react": "16.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "jsdom": "29.1.1",
     "playwright": "1.61.1",
     "vite": "^8.3.1",
     "yaml": "^2.9.0"

apps/writer/public/404.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>Page not found · mdbase writer</title>
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<style>
+:root {
+  color-scheme: light dark;
+  --canvas: oklch(99.5% 0.002 255);
+  --ink: oklch(21% 0.018 255);
+  --muted: oklch(54% 0.01 255);
+  --line: oklch(92% 0.006 255);
+  --accent: oklch(47% 0.1 238);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --canvas: oklch(17.5% 0.012 255);
+    --ink: oklch(92% 0.008 255);
+    --muted: oklch(62% 0.011 255);
+    --line: oklch(29% 0.012 255);
+    --accent: oklch(73% 0.105 238);
+  }
+}
+html, body { height: 100%; margin: 0; }
+body {
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  box-sizing: border-box;
+  background: var(--canvas);
+  color: var(--ink);
+  font: 14px/1.5 "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+main { max-width: 32rem; }
+.code { margin: 0 0 0.5rem; color: var(--muted); font: 12px/1.4 "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
+h1 { margin: 0 0 0.5rem; font-size: 20px; line-height: 1.25; }
+p { margin: 0 0 1rem; color: var(--muted); }
+a { color: var(--accent); text-underline-offset: 2px; }
+a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+</style>
+</head>
+<body>
+<main>
+<p class="code">404</p>
+<h1>Page not found</h1>
+<p>There is nothing at this address.</p>
+<a href="/">Open mdbase writer</a>
+</main>
+</body>
+</html>

apps/writer/scripts/browser-export-review-test.mjs

@@ -0,0 +1,67 @@
+// Loopback-only, real Pandoc conversion and browser downloads; no LAB credentials.
+import assert from "node:assert/strict";
+import {mkdir} from "node:fs/promises";
+import {chromium} from "playwright";
+const base = process.argv[2] ?? "http://127.0.0.1:48332/";
+const origin = new URL(base).origin;
+assert.ok(["127.0.0.1", "localhost", "[::1]"].includes(new URL(base).hostname));
+await mkdir("out", {recursive: true});
+const browser = await chromium.launch({executablePath: process.env.CHROME});
+const context = await browser.newContext({viewport: {width: 1280, height: 900}});
+await context.route("**/*", route => new URL(route.request().url()).origin === origin ? route.continue() : route.abort());
+const page = await context.newPage();
+let downloads = 0;
+page.on("download", () => downloads++);
+try {
+  await page.goto(`${base}?demo`);
+  await page.locator(".manuscript-title").filter({hasText: "Patient Observation"}).click();
+  await page.locator(".cm-content[contenteditable=true]").click();
+  await page.keyboard.press("Control+a");
+  await page.keyboard.insertText("# Unresolved citation test\n\n[test] Word export with [@bugfix3missing, p. 3].\n");
+  await page.getByRole("button", {name: "Export formats", exact: true}).click();
+  await page.getByRole("menuitem", {name: /Word/}).click();
+  const review = page.getByRole("dialog", {name: "Review export problems", exact: true});
+  await review.waitFor({timeout: 120000});
+  assert.match(await review.innerText(), /bugfix3missing/);
+  assert.equal(downloads, 0);
+  await review.getByRole("button", {name: "Cancel and fix problems", exact: true}).click();
+  await review.waitFor({state: "hidden"});
+  assert.equal(downloads, 0);
+  console.log("PASS unresolved citation review and cancellation download nothing");
+
+  await page.getByRole("button", {name: "Export Word", exact: true}).click();
+  await review.waitFor();
+  // Listen BEFORE the click: the browser may emit download before click() resolves.
+  const [download] = await Promise.all([
+    page.waitForEvent("download", {timeout: 20000}),
+    review.getByRole("button", {name: "Export anyway", exact: true}).click(),
+  ]);
+  await download.saveAs("out/unresolved-citation.docx");
+  assert.equal(await download.failure(), null);
+  assert.match(download.suggestedFilename(), /\.docx$/);
+  await review.waitFor({state: "hidden"});
+  await page.waitForTimeout(800);
+  assert.match(await page.getByRole("alert").innerText(), /Exported Word with/);
+  assert.equal(downloads, 1);
+  console.log("PASS consent downloads DOCX and leaves its warning visible after native close");
+
+  await page.evaluate(() => {
+    const original = URL.createObjectURL.bind(URL);
+    URL.createObjectURL = blob => {
+      if (blob.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document") throw new Error("Controlled download refusal.");
+      return original(blob);
+    };
+  });
+  await page.getByRole("button", {name: "Export Word", exact: true}).click();
+  await review.waitFor();
+  await review.getByRole("button", {name: "Export anyway", exact: true}).click();
+  await review.waitFor({state: "hidden"});
+  await page.waitForTimeout(800);
+  assert.match(await page.getByRole("alert").innerText(), /The file could not be downloaded\. Controlled download refusal\./);
+  assert.equal(downloads, 1);
+  await page.getByRole("button", {name: "Retry export", exact: true}).waitFor();
+  console.log("PASS failed download leaves an actionable error after native close");
+} catch (error) {
+  await page.screenshot({path: "out/export-review-failure.png"});
+  throw error;
+} finally { await context.close(); await browser.close(); }

apps/writer/scripts/browser-find-panel-test.mjs

@@ -0,0 +1,57 @@
+// Isolated loopback demo and real CodeMirror/CSS; no LAB credentials.
+import assert from "node:assert/strict";
+import {mkdir} from "node:fs/promises";
+import {chromium} from "playwright";
+const base = process.argv[2] ?? "http://127.0.0.1:48332/";
+const origin = new URL(base).origin;
+assert.ok(["127.0.0.1", "localhost", "[::1]"].includes(new URL(base).hostname));
+await mkdir("out", {recursive: true});
+const browser = await chromium.launch({executablePath: process.env.CHROME});
+const context = await browser.newContext({viewport: {width: 1280, height: 900}});
+await context.route("**/*", route => new URL(route.request().url()).origin === origin ? route.continue() : route.abort());
+const page = await context.newPage();
+try {
+  await page.goto(`${base}?demo`);
+  await page.locator(".manuscript-title").filter({hasText: "Patient Observation"}).click();
+  for (const width of [1280, 390, 320]) {
+    await page.setViewportSize({width, height: width === 1280 ? 900 : 844});
+    if (width < 900) await page.getByRole("navigation", {name: "View", exact: true}).getByRole("button", {name: /Write/}).click();
+    const panel = page.locator(".cm-search");
+    if (!await panel.isVisible()) {
+      await page.locator(".cm-content[contenteditable=true]").click();
+      await page.keyboard.press("Control+f");
+    }
+    await panel.waitFor();
+    const geometry = await panel.locator("label").evaluateAll(labels => labels.map(label => {
+      const input = label.querySelector("input");
+      const text = [...label.childNodes].find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim());
+      const range = document.createRange();
+      range.selectNodeContents(text);
+      const box = input.getBoundingClientRect(), caption = range.getBoundingClientRect(), target = label.getBoundingClientRect();
+      return {text: label.innerText, width: box.width, gap: caption.left - box.right, center: Math.abs((caption.top + caption.bottom - box.top - box.bottom) / 2), targetHeight: target.height};
+    }));
+    assert.equal(geometry.length, 3);
+    for (const option of geometry) {
+      assert.ok(option.width <= 24, `${width}px stretched checkbox: ${JSON.stringify(option)}`);
+      assert.ok(option.gap >= 0 && option.gap <= 12, `${width}px separated label: ${JSON.stringify(option)}`);
+      assert.ok(option.center <= 6, `${width}px separate rows: ${JSON.stringify(option)}`);
+      if (width < 900) assert.ok(option.targetHeight >= 44, `${width}px small touch label: ${JSON.stringify(option)}`);
+    }
+    for (const name of ["match case", "regexp", "by word"]) {
+      const checkbox = panel.getByRole("checkbox", {name, exact: true});
+      const before = await checkbox.isChecked();
+      await panel.locator("label").filter({hasText: name}).click();
+      assert.equal(await checkbox.isChecked(), !before);
+      await checkbox.focus();
+      await page.keyboard.press("Space");
+      assert.equal(await checkbox.isChecked(), before);
+    }
+    const bounds = await panel.boundingBox();
+    assert.ok(bounds.x >= 0 && bounds.x + bounds.width <= width + 1);
+    await page.screenshot({path: `out/find-panel-${width}.png`});
+    console.log(`PASS ${width}px adjacent labels, label/keyboard toggles and panel fits`);
+  }
+} catch (error) {
+  await page.screenshot({path: "out/find-panel-failure.png"});
+  throw error;
+} finally { await context.close(); await browser.close(); }

apps/writer/scripts/browser-install-test.mjs

@@ -0,0 +1,51 @@
+// Isolated loopback demo, real Writer CSS and install invitation; no LAB credentials.
+import assert from "node:assert/strict";
+import {chromium} from "playwright";
+const base = process.argv[2] ?? "http://127.0.0.1:48332/";
+const origin = new URL(base).origin;
+assert.ok(["127.0.0.1", "localhost", "[::1]"].includes(new URL(base).hostname));
+const browser = await chromium.launch({executablePath: process.env.CHROME});
+const context = await browser.newContext({viewport: {width: 390, height: 844}});
+await context.route("**/*", route => new URL(route.request().url()).origin === origin ? route.continue() : route.abort());
+const page = await context.newPage();
+try {
+  await page.goto(`${base}?demo`);
+  await page.locator(".manuscript-title").filter({hasText: "Patient Observation"}).click();
+  await page.locator(".pane-tabs").waitFor();
+  // A controlled browser invitation, never an actual installation.
+  await page.evaluate(() => {
+    const event = new Event("beforeinstallprompt", {cancelable: true});
+    Object.assign(event, {prompt: async () => {}, userChoice: Promise.resolve({outcome: "dismissed"})});
+    window.dispatchEvent(event);
+  });
+  await page.locator(".pwa-install").waitFor({timeout: 35000});
+  for (const [width, height] of [[390, 844], [320, 568], [844, 390]]) {
+    await page.setViewportSize({width, height});
+    for (const name of ["Sidebar", "Write", "Preview"]) {
+      await page.getByRole("navigation", {name: "View", exact: true}).getByRole("button", {name: new RegExp(`^${name}`)}).click();
+      const geometry = await page.evaluate(() => {
+        const banner = document.querySelector(".pwa-install");
+        const prompt = banner.getBoundingClientRect();
+        const nav = document.querySelector(".pane-tabs").getBoundingClientRect();
+        const withPrompt = document.documentElement.scrollWidth;
+        banner.hidden = true;
+        const withoutPrompt = document.documentElement.scrollWidth;
+        banner.hidden = false;
+        return {gap: nav.top - prompt.bottom, top: prompt.top, fits: prompt.left >= 0 && prompt.right <= innerWidth, withPrompt, withoutPrompt};
+      });
+      assert.ok(geometry.gap >= 8, `${width}px ${name}: ${JSON.stringify(geometry)}`);
+      assert.ok(geometry.top >= 0); assert.equal(geometry.fits, true);
+      // A zoomed document preview may itself be wider; the invitation must add no overflow.
+      assert.equal(geometry.withPrompt, geometry.withoutPrompt, `${width}px ${name}: ${JSON.stringify(geometry)}`);
+    }
+    console.log(`PASS install invitation leaves all three mode controls reachable at ${width}x${height}`);
+  }
+  await page.setViewportSize({width: 1280, height: 900});
+  assert.equal(await page.locator(".pwa-install").evaluate(e => getComputedStyle(e).bottom), "16px");
+  await page.setViewportSize({width: 390, height: 844});
+  await page.getByRole("button", {name: "Manuscripts", exact: true}).click();
+  assert.equal(await page.locator(".pwa-install").evaluate(e => getComputedStyle(e).bottom), "16px");
+  await page.getByRole("button", {name: "Not now", exact: true}).click();
+  assert.equal(await page.locator(".pwa-install").count(), 0);
+  console.log("PASS desktop/home positioning and dismissal");
+} catch (error) {await page.screenshot({path: "out/install-prompt-failure.png"}); throw error;} finally {await context.close(); await browser.close();}

apps/writer/scripts/browser-reliability-test.mjs

@@ -229,6 +229,49 @@ try {
     assert.equal(await body(page, main), before);
   });
 
+  for (const list of [false, true]) await scenario(`${list ? "list" : "paragraph"} Enter stays visible while typing and undo redo retain exact source`, async (page) => {
+    await open(page);
+    await page.evaluate((main) => window.writer.workspace.setBody(main, "# [test] typing\n\n"), main);
+    await page.locator(".cm-content").click(); await page.keyboard.press("ControlOrMeta+End");
+    for (const text of [list ? "- One" : "One", "Two", "Three"]) {
+      await page.keyboard.type(text); await page.keyboard.press("Enter");
+    }
+    if (list) await page.keyboard.press("Enter");
+    await page.keyboard.type("After"); await page.keyboard.press("Enter");
+    const expected = `# [test] typing\n\n${list ? "- One\n- Two\n- Three\n" : "One\nTwo\nThree"}\nAfter\n`;
+    assert.equal(await body(page, main), expected);
+    const lines = await page.locator(".cm-line").allTextContents();
+    assert.ok(lines.includes(list ? "- Three" : "Three"), "the third line must not merge with After");
+    assert.ok(lines.includes("After"), "the new line is visible, not an atomic hidden range");
+    await page.waitForTimeout(600); // Start a separate typing history group.
+    await page.keyboard.type("Undo marker.");
+    assert.equal(await body(page, main), `${expected}Undo marker.`, "typing after Enter keeps the newline");
+    await page.keyboard.press("ControlOrMeta+z"); assert.equal(await body(page, main), expected, "Undo restores the exact prior body");
+    // A real shifted letter reports key="Z". Playwright's lowercase +Shift+z
+    // reports key="z", which CodeMirror correctly handles as the Undo binding.
+    await page.keyboard.press("ControlOrMeta+Shift+Z"); assert.equal(await body(page, main), `${expected}Undo marker.`, "Redo restores the exact typed body");
+    assert.ok((await page.locator(".cm-line").allTextContents()).includes("Undo marker."));
+    if (!await page.evaluate(() => /Mac/.test(navigator.platform))) {
+      await page.keyboard.press("Control+z"); assert.equal(await body(page, main), expected);
+      await page.keyboard.press("Control+y"); assert.equal(await body(page, main), `${expected}Undo marker.`);
+    }
+    // Reload starts with the caret elsewhere. Moving it away must never make
+    // a stored Enter vanish from the displayed lines (the old folding bug).
+    await page.keyboard.press("ControlOrMeta+Home");
+    assert.ok((await page.locator(".cm-line").allTextContents()).includes("After"));
+    assert.ok((await page.locator(".cm-line").allTextContents()).includes(list ? "- Three" : "Three"));
+    assert.equal(await body(page, main), `${expected}Undo marker.`);
+  });
+
+  await scenario("explicit bullet after automatic continuation is not doubled", async (page) => {
+    await open(page);
+    await page.evaluate((path) => window.writer.workspace.setBody(path, "# [test] manual markers\n\n"), main);
+    await page.locator(".cm-content").click(); await page.keyboard.press("ControlOrMeta+End");
+    await page.keyboard.type("- Staghorn corals"); await page.keyboard.press("Enter");
+    await page.keyboard.type("- Brain corals");
+    assert.equal(await body(page, main), "# [test] manual markers\n\n- Staghorn corals\n- Brain corals");
+  });
+
   await scenario("chapter switching retains undo redo selection and scroll", async (page) => {
     await open(page); await painted(page);
     const chapter = "chapters/worms.md";
@@ -258,7 +301,7 @@ try {
     await page.locator(".cm-content").evaluate((el) => el.focus({ preventScroll: true }));
     await page.keyboard.press("ControlOrMeta+z");
     assert.equal(await body(page, chapter), before);
-    await page.keyboard.press("ControlOrMeta+Shift+z");
+    await page.keyboard.press("ControlOrMeta+Shift+Z");
     assert.match(await body(page, chapter), /Retained history marker/);
     await page.keyboard.type(" Cursor kept.");
     assert.equal((await body(page, chapter)).endsWith("Retained history marker. Cursor kept."), true);

apps/writer/scripts/browser-test.mjs

@@ -116,7 +116,8 @@ async function typeAtEndOfParagraph(needle, text) {
 await step("home lists the demo manuscripts", async () => {
   await page.goto(`${base}?demo`);
   await page.getByRole("heading", { name: "Manuscripts" }).waitFor();
-  const titles = await page.locator(".manuscript-title").allTextContents();
+  // Recovery drafts share the title class, but are not registered manuscripts.
+  const titles = await page.locator(".manuscript-row[data-path] .manuscript-title").allTextContents();
   assert.deepEqual(titles, ["Patient Observation", "Small Agents, Large Effects: Darwin and the Science of Slow Change"]);
 });
 
@@ -226,8 +227,9 @@ await step("an embedded Reader annotation shows and typesets as its quotation, a
 await step("a toolbar over a selection formats it and finds a source for it", async () => {
   const before = await editorText();
   const bar = page.locator(".cm-selection-bar");
-  // Double-click "Charles" (hard-wrapped lines are joined), then take "Lyell" too.
-  const charles = await page.evaluate(() => {
+  // Scrolling the larger source-line view updates CodeMirror's viewport on a
+  // frame. Wait for its text nodes, then double-click Charles and take Lyell.
+  const charles = await page.waitForFunction(() => {
     const walker = document.createTreeWalker(document.querySelector(".cm-content"), NodeFilter.SHOW_TEXT);
     for (let node = walker.nextNode(); node; node = walker.nextNode()) {
       const at = node.textContent.indexOf("Charles Lyell, who");
@@ -240,8 +242,10 @@ await step("a toolbar over a selection formats it and finds a source for it", as
     }
     return null;
   });
-  assert.ok(charles, "found “Charles Lyell, who” in the editor");
-  await page.mouse.dblclick(charles.x, charles.y);
+  const position = await charles.jsonValue();
+  await charles.dispose();
+  assert.ok(position, "found “Charles Lyell, who” in the editor");
+  await page.mouse.dblclick(position.x, position.y);
   await page.keyboard.press("ControlOrMeta+Shift+ArrowRight");
   await bar.waitFor({ timeout: 5_000 });
   await bar.getByRole("button", { name: "Bold" }).click();