papilot 0.8.6 → 0.8.7

package/engine/src/core/tasks.ts

@@ -46,6 +46,12 @@ export function taskMarker(folder: string): [string, string | null] {
     );
   return marker ? [marker.root, marker.task] : [repo.toplevel(), null];
 }
+export async function revisionReaderAsync(repo: Repo, rev: string, folder: string) {
+  const files = (await repo.runAsync(["ls-tree", "-r", "-z", "--name-only", rev, ...(folder ? ["--", folder] : [])]))
+      .toString().split("\0").filter((p) => p.endsWith(".tex")),
+    blobs = await repo.blobsAsync(rev, files);
+  return (file: string) => blobs[file]?.toString() ?? null;
+}
 export function revisionReader(repo: Repo, rev: string, folder: string) {
   const files = repo.files(rev, folder).filter((p) => p.endsWith(".tex")),
     blobs = repo.blobs(rev, files);
@@ -73,6 +79,12 @@ export class Tasks {
       GENERATED,
     );
   }
+  snapshotAsync(task: Task) {
+    return new Repo(task.worktree).snapshotAsync(
+      [this.app.project.source_dir, ...task.scope.paths],
+      GENERATED,
+    );
+  }
   create(
     name?: string,
     title?: string,
@@ -80,6 +92,43 @@ export class Tasks {
     files: string[] = [],
     deferred = false,
   ): Task {
+    const reserved = this.reserve(name, title, sections, files);
+    if ("existing" in reserved) return reserved.existing;
+    const base = this.app.repo.snapshot([this.app.project.source_dir, ...reserved.paths], GENERATED);
+    const scope = this.scopeOf(sections.length ? revisionReader(this.app.repo, base, this.app.project.doc_dir) : null, sections, reserved.paths);
+    fs.mkdirSync(path.dirname(reserved.worktree), { recursive: true });
+    this.app.repo.run(["worktree", "add", "--detach", reserved.worktree, base]);
+    return this.record(reserved, base, scope, deferred);
+  }
+  /** `create` for the server: the snapshot and the checkout of the new
+   *  worktree, seconds for a large paper, run while it answers requests. */
+  async createAsync(
+    name?: string,
+    title?: string,
+    sections: string[] = [],
+    files: string[] = [],
+    deferred = false,
+  ): Promise<Task> {
+    const reserved = this.reserve(name, title, sections, files);
+    if ("existing" in reserved) return reserved.existing;
+    this.creating.add(reserved.name);
+    try {
+      // The manuscript is read between writes, which may be changing it; the
+      // much longer checkout of the worktree is not.
+      const base = await this.app.exclusive(() => this.app.repo.snapshotAsync([this.app.project.source_dir, ...reserved.paths], GENERATED));
+      const scope = this.scopeOf(sections.length ? await revisionReaderAsync(this.app.repo, base, this.app.project.doc_dir) : null, sections, reserved.paths);
+      await fs.promises.mkdir(path.dirname(reserved.worktree), { recursive: true });
+      await this.app.repo.runAsync(["worktree", "add", "--detach", reserved.worktree, base]);
+      return this.record(reserved, base, scope, deferred);
+    } finally {
+      this.creating.delete(reserved.name);
+    }
+  }
+  // Names of tasks whose worktree is being created.
+  private creating = new Set<string>();
+  // The task's name, title, worktree and scope paths, or the open task that
+  // already covers this request.
+  private reserve(name: string | undefined, title: string | undefined, sections: string[], files: string[]): { existing: Task } | { name: string; title: string; worktree: string; paths: string[] } {
     const { app } = this,
       project = app.project;
     if (sections.length && files.length)
@@ -93,18 +142,21 @@ export class Tasks {
       );
     let candidate = name,
       suffix = 1;
-    for (;;) {
+    for (;; candidate = `${name.slice(0, 60)}-${++suffix}`) {
+      if (this.creating.has(candidate)) {
+        if (explicit) throw new Error(`Task ${JSON.stringify(name)} is being created. Try again in a moment.`);
+        continue;
+      }
       const existing = app.store.one<Task>(
         "SELECT * FROM tasks WHERE name=?",
         candidate,
       );
       if (!existing || existing.closed) break;
-      if (this.matches(existing, sections, files)) return existing;
+      if (this.matches(existing, sections, files)) return { existing };
       if (explicit)
         throw new Error(
           `Task ${JSON.stringify(name)} already exists with a different scope. Finish it first or choose another name.`,
         );
-      candidate = `${name.slice(0, 60)}-${++suffix}`;
     }
     name = candidate;
     if (!app.repo.hasHead())
@@ -122,31 +174,30 @@ export class Tasks {
       throw new Error(
         `The folder ${worktree} already exists. Remove it or choose another name.`,
       );
-    const paths = files.map(cleanPath),
-      base = app.repo.snapshot([project.source_dir, ...paths], GENERATED);
-    let scope: Scope;
-    if (sections.length) {
-      const outline = buildOutline(
-        revisionReader(app.repo, base, project.doc_dir),
-        project.main,
-      );
-      const [ranges, chosen] = selectedRanges(
-        outline.nodes,
-        resolveSections(outline.nodes, sections),
-      );
-      scope = { sections: chosen, ranges, paths: Object.keys(ranges).sort() };
-    } else
-      scope = {
+    return { name, title, worktree, paths: files.map(cleanPath) };
+  }
+  private scopeOf(read: ((file: string) => string | null) | null, sections: string[], paths: string[]): Scope {
+    const project = this.app.project;
+    if (!sections.length || !read)
+      return {
         sections: [],
         ranges: null,
         paths: paths.length ? paths : [project.source_dir],
       };
-    fs.mkdirSync(path.dirname(worktree), { recursive: true });
-    app.repo.run(["worktree", "add", "--detach", worktree, base]);
+    const outline = buildOutline(read, project.main);
+    const [ranges, chosen] = selectedRanges(
+      outline.nodes,
+      resolveSections(outline.nodes, sections),
+    );
+    return { sections: chosen, ranges, paths: Object.keys(ranges).sort() };
+  }
+  // Records a task whose worktree was just checked out at `base`.
+  private record({ name, title, worktree }: { name: string; title: string; worktree: string }, base: string, scope: Scope, deferred: boolean) {
+    const { app } = this;
     try {
       writeJson(path.join(new Repo(worktree).gitDir(), "latex-review.json"), {
         task: name,
-        root: project.root,
+        root: app.project.root,
       });
       app.repo.updateRef(`refs/latex-review/${name}/base`, base);
       app.store.transaction(() => {
@@ -197,7 +248,14 @@ export class Tasks {
         JSON.stringify([...task.scope.paths].sort())
     );
   }
+  /** Closes the task and removes its worktree, after every other write of
+   *  the review engine; removing a large worktree takes a while. */
   async finish(name: string, force = false) {
+    const result = await this.app.exclusive(() => this.finishNow(name, force));
+    await this.app.publisher.pruneCache();
+    return result;
+  }
+  private async finishNow(name: string, force: boolean) {
     this.app.delivery.assertReady(name);
     const app = this.app,
       task = this.get(name);
@@ -212,7 +270,7 @@ export class Tasks {
         `${counts.pending} pending and ${counts.commented} commented changes`,
       );
     const leftover = fs.existsSync(task.worktree)
-      ? app.repo.changedFiles(task.accepted, this.snapshot(task))
+      ? await app.repo.changedFilesAsync(task.accepted, await this.snapshotAsync(task))
       : [];
     if (leftover.length)
       problems.push(
@@ -223,17 +281,16 @@ export class Tasks {
         `The task still has ${problems.join("; ")}. Publish and finish the review first, or use --force to discard them.`,
       );
     if (fs.existsSync(task.worktree))
-      app.repo.run(["worktree", "remove", "--force", task.worktree]);
-    app.repo.run(["worktree", "prune"], { check: false });
-    app.repo.deleteRefs(`refs/latex-review/${name}/`);
-    fs.rmSync(path.join(app.state, "rounds", name), {
+      await app.repo.runAsync(["worktree", "remove", "--force", task.worktree]);
+    await app.repo.runAsync(["worktree", "prune"], { check: false });
+    await app.repo.deleteRefsAsync(`refs/latex-review/${name}/`);
+    await fs.promises.rm(path.join(app.state, "rounds", name), {
       recursive: true,
       force: true,
     });
     app.store.execute("UPDATE tasks SET closed=? WHERE name=?", now(), name);
-    await app.publisher.pruneCache();
     return {
-      changed: app.repo.changedFiles(task.base, task.accepted),
+      changed: await app.repo.changedFilesAsync(task.base, task.accepted),
       discarded: counts,
     };
   }

package/engine/src/core/view.ts

@@ -3,7 +3,7 @@ import path from "node:path";
 import { randomBytes } from "node:crypto";
 import { Builder, BuildError } from "./build.ts";
 import { cleanPath, within } from "./git.ts";
-import { run } from "./process.ts";
+import { capture } from "./process.ts";
 import { mupdf } from "../render/pdf.ts";
 import type { App } from "../server.ts";
 import type { BuildInfo } from "../types.ts";
@@ -72,15 +72,15 @@ function location(app: App, worktree: string, value: string): Location {
 }
 // The pages SyncTeX gives for a source line, or for the nearest line that
 // printed something.
-function pagesOf(pdf: string, file: string, line: number) {
+async function pagesOf(pdf: string, file: string, line: number) {
   for (let distance = 0; distance <= NEARBY; distance++)
     for (const candidate of distance ? [line - distance, line + distance] : [line]) {
       if (candidate < 1) continue;
-      const output = run(
+      const output = (await capture(
         "synctex",
         ["view", "-i", `${candidate}:0:${file}`, "-o", pdf],
         { check: false, timeout: 20000 },
-      ).stdout.toString();
+      ).catch(() => ({ stdout: Buffer.alloc(0) }))).stdout.toString();
       const pages = [
         ...new Set(
           [...output.matchAll(/^Page:(\d+)$/gm)].map((m) => Number(m[1])),
@@ -105,12 +105,12 @@ export async function view(
     labels = (request.pages ?? []).map((p) => p.trim()).filter(Boolean);
   if (!locations.length && !labels.length)
     throw new Error("Ask for at least one source location or page number.");
-  const after = app.tasks.snapshot(task),
+  const after = await app.tasks.snapshotAsync(task),
     before = task.accepted,
     builder = new Builder(project, app.repo),
-    targets = builder.plan(before, after, [
+    targets = await builder.planAsync(before, after, [
       ...new Set([
-        ...app.repo.changedFiles(before, after),
+        ...(await app.repo.changedFilesAsync(before, after)),
         ...locations.map((l) => l.file),
       ]),
     ]);
@@ -150,7 +150,7 @@ export async function view(
           build.root,
           path.posix.relative(project.source_dir || ".", l.file),
         ),
-        found = fs.existsSync(file) ? pagesOf(pdf, file, l.line) : [];
+        found = fs.existsSync(file) ? await pagesOf(pdf, file, l.line) : [];
       if (found.length) found.forEach((page) => ask(page, l.asked));
       else missing.push(`${l.asked}: SyncTeX places no typeset text at or near this line.`);
     }

package/engine/src/server.ts

@@ -52,9 +52,23 @@ export class App {
     this.confirmations = new Confirmations(
       path.join(this.state, "references-confirmed.json"),
     );
-    this.review.recover();
-    this.delivery.recover();
-    this.reconciliation.recover();
+    // Writes interrupted by a restart are finished first, before any other.
+    this.ready = this.exclusive(async () => {
+      await this.review.recover();
+      await this.delivery.recover();
+      await this.reconciliation.recover();
+    });
+  }
+  /** Settles once writes interrupted by a restart are finished. */
+  ready: Promise<void>;
+  private writing: Promise<unknown> = Promise.resolve();
+  /** Runs `work` after every write that started before it. Decisions,
+   *  deliveries and task changes run Git without blocking the server, so this
+   *  keeps them from interleaving, as when they ran in one piece. */
+  exclusive<T>(work: () => T | Promise<T>): Promise<T> {
+    const result = this.writing.then(() => work());
+    this.writing = result.then(() => undefined, () => undefined);
+    return result;
   }
   get project() {
     const config = path.join(this.root, CONFIG_NAME),
@@ -153,12 +167,14 @@ export function createServer(app: App) {
       csrf: app.csrf,
     }));
     server.get<{ Params: { id: string } }>("/api/jobs/:id", (request) => {
-      const j = app.publisher.job(request.params.id);
+      const j = app.publisher.job(request.params.id),
+        revision = app.publisher.revision(j.id);
       return {
         id: j.id,
         task: j.task,
         status: j.status,
         phase: j.phase,
+        ...(revision ? { revision } : {}),
         ...j.result,
       };
     });
@@ -324,10 +340,10 @@ export function createServer(app: App) {
           },
         },
       },
-      (request) => {
+      async (request) => {
         const d = request.body;
         return app.taskInfo(
-          app.tasks.create(d.name, d.title, d.sections, d.files, d.deferred).name,
+          (await app.tasks.createAsync(d.name, d.title, d.sections, d.files, d.deferred)).name,
         );
       },
     );
@@ -351,6 +367,12 @@ export function createServer(app: App) {
       { schema: { body: { ...objectSchema, additionalProperties: false, properties: { confirmation: { type: "string", maxLength: 100 }, keepCurrent: { type: "boolean" }, mode: { enum: ["workspace", "commit"] }, message: { type: "string", maxLength: 5000 } } } } },
       request => app.delivery.apply(request.params.name, request.body.keepCurrent === true, request.body.mode, request.body.message, request.body.confirmation),
     );
+    // A speculative build of the manuscript compiles what applying the task
+    // would write, so its PDF is ready when the author applies it.
+    server.get<{ Params: { name: string } }>("/api/tasks/:name/preview", async (request) => {
+      const writes = await app.delivery.preview(request.params.name);
+      return { files: writes && Object.fromEntries(Object.entries(writes).map(([file, data]) => [file, data?.toString("base64") ?? null])) };
+    });
     server.post<{ Params: { name: string }; Body: { mode: "workspace" | "branch"; message?: string } }>(
       "/api/tasks/:name/deliver",
       { schema: { body: { ...objectSchema, required: ["mode"], properties: { mode: { enum: ["workspace", "branch"] }, message: { type: "string", maxLength: 5000 } } } } },
@@ -470,7 +492,31 @@ export function createServer(app: App) {
   });
   return server;
 }
+interface Owner {
+  left: boolean;
+  stop: () => void;
+}
 export async function serve(root: string, port = 0, idle = 12 * 3600) {
+  // A server started with an IPC channel belongs to the app that started it
+  // (see launch in client.ts) and stops when that app ends, even while it is
+  // still starting. Closing the channel on the way out keeps it from holding
+  // this process open.
+  if (!process.send) return run(root, port, idle);
+  if (!process.connected) return;
+  const owner: Owner = { left: false, stop: () => {} };
+  const left = () => {
+    owner.left = true;
+    owner.stop();
+  };
+  process.once("disconnect", left);
+  try {
+    await run(root, port, idle, owner);
+  } finally {
+    process.off("disconnect", left);
+    if (process.connected) process.disconnect();
+  }
+}
+async function run(root: string, port: number, idle: number, owner?: Owner) {
   root = new Repo(root).toplevel();
   process.chdir(root);
   const home = path.join(new Repo(root).gitDir(), "latex-review/server"),
@@ -479,6 +525,8 @@ export async function serve(root: string, port = 0, idle = 12 * 3600) {
     server = createServer(app);
   let timer: NodeJS.Timeout | undefined;
   try {
+    // Requests see the state that interrupted writes leave once finished.
+    await app.ready.catch(() => undefined);
     try {
       await server.listen({ host: "127.0.0.1", port });
     } catch (error) {
@@ -506,6 +554,14 @@ export async function serve(root: string, port = 0, idle = 12 * 3600) {
     };
     process.once("SIGTERM", shutdown);
     process.once("SIGINT", shutdown);
+    // Requests still open, such as a CLI waiting on feedback, end with it.
+    if (owner) {
+      owner.stop = () => {
+        shutdown();
+        server.server.closeAllConnections();
+      };
+      if (owner.left) owner.stop();
+    }
     timer = setInterval(
       () => {
         if (now() - app.activity > idle && !app.publisher.busy()) shutdown();

package/engine/src/types.ts

@@ -413,6 +413,14 @@ export interface RoundDetail extends Omit<RenderedRound, "units"> {
   /** The new version's complete PDF, when the host serves one, so the review
    * can show the changes in the whole paper. */
   pdf?: string;
+  /** The build whose PDF the strips come from, and the chapters it compiled
+   * (["full"] when it is the whole paper). */
+  build?: { key: string; targets: string[] };
+  /** While that PDF compiles, a host may show each TeX pass of it: this URL
+   * answers `?after=N` with `{ pass }`, a later pass whose PDF is `pdf?pass=`
+   * that number, `{ pass: null }` once `pdf` is complete, or `{}` to ask
+   * again. */
+  passes?: string;
 }
 export type TaskState =
   "editing" | "building" | "build_failed" | "reviewing" | "revise" | "done";

package/engine/src/web/FullPaper.tsx

@@ -1,6 +1,7 @@
 import {
   Fragment,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -89,8 +90,18 @@ const clock = (ms: number) => {
   return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
 };
 
+interface Loaded {
+  pdf: PDFDocumentProxy;
+  width: number;
+  height: number;
+  labels: string[] | null;
+  // An earlier version, shown while the complete PDF compiles.
+  partial: boolean;
+}
+
 export function FullPaper({
   url,
+  passes,
   changes,
   render,
   scrollRoot,
@@ -98,38 +109,77 @@ export function FullPaper({
   onUnavailable,
 }: {
   url: string;
+  passes?: string;
   changes: PlacedChange[];
   render: (block: ChangeBlock, index: number) => ReactNode;
   scrollRoot: RefObject<HTMLElement | null>;
   onReady: () => void;
   onUnavailable: () => void;
 }) {
-  const [loaded, setLoaded] = useState<{ pdf: PDFDocumentProxy; width: number; height: number; labels: string[] | null } | null>(null),
+  const [loaded, setLoaded] = useState<Loaded | null>(null),
     [error, setError] = useState(""),
-    [started] = useState(() => Date.now()),
-    [now, setNow] = useState(() => Date.now());
+    [started, setStarted] = useState(() => Date.now()),
+    [now, setNow] = useState(() => Date.now()),
+    shown = useRef<PDFDocumentProxy | null>(null),
+    announced = useRef(false),
+    // Where the change being reviewed was on screen before a newer version
+    // replaced the pages, so that it stays there.
+    anchor = useRef<{ stop: string; offset: number } | null>(null);
   useEffect(() => {
     let live = true;
+    const stop = new AbortController(),
+      tasks: ReturnType<typeof pdfjs.getDocument>[] = [];
     setLoaded(null);
     setError("");
-    const task = pdfjs.getDocument({ url, enableXfa: false });
-    task.promise.then(
-      async (pdf) => {
-        const first = (await pdf.getPage(1)).getViewport({ scale: 1 }),
-          labels = await pdf.getPageLabels().catch(() => null);
-        if (live) setLoaded({ pdf, width: first.width, height: first.height, labels });
-      },
-      (failure: Error) => {
-        if (live) setError(failure.message);
-      },
-    );
+    setStarted(Date.now());
+    announced.current = false;
+    const open = async (source: string, partial: boolean) => {
+      const task = pdfjs.getDocument({ url: source, enableXfa: false });
+      tasks.push(task);
+      const pdf = await task.promise,
+        first = (await pdf.getPage(1)).getViewport({ scale: 1 }),
+        labels = await pdf.getPageLabels().catch(() => null);
+      if (!live) return;
+      const root = scrollRoot.current,
+        current = root?.querySelector<HTMLElement>(".paper .change.current");
+      anchor.current = root && current?.dataset.stop
+        ? { stop: current.dataset.stop, offset: current.getBoundingClientRect().top - root.getBoundingClientRect().top }
+        : null;
+      setLoaded({ pdf, width: first.width, height: first.height, labels, partial });
+    };
+    void (async () => {
+      // Earlier versions while the complete PDF compiles, such as the
+      // chapters the round compiled and each TeX pass of the whole paper, so
+      // the changes show long before every page number has settled.
+      for (let after = 0; passes && live; ) {
+        const response = await fetch(`${passes}?after=${after}`, { signal: stop.signal }),
+          next = (await response.json()) as { pass?: number | null; error?: string };
+        if (!response.ok) throw new Error(next.error || `HTTP ${response.status}`);
+        if (next.pass === null) break;
+        if (typeof next.pass === "number" && next.pass > after) {
+          after = next.pass;
+          // A version that cannot be shown is skipped for the next one.
+          await open(`${url}${url.includes("?") ? "&" : "?"}pass=${after}`, true).catch(() => undefined);
+        }
+      }
+      if (live) await open(url, false);
+    })().catch((failure: Error) => {
+      if (live) setError(failure.message);
+    });
     return () => {
       live = false;
-      void task.destroy();
+      stop.abort();
+      for (const task of tasks) void task.destroy();
     };
-  }, [url]);
+  }, [url, passes]);
+  // A newer version replaces the one on screen once its pages are in place.
+  useEffect(() => {
+    const previous = shown.current;
+    shown.current = loaded?.pdf ?? null;
+    if (previous && previous !== shown.current) void previous.loadingTask.destroy();
+  }, [loaded]);
   useEffect(() => {
-    if (loaded || error) return;
+    if ((loaded && !loaded.partial) || error) return;
     const timer = setInterval(() => setNow(Date.now()), 1000);
     return () => clearInterval(timer);
   }, [loaded, error]);
@@ -143,6 +193,11 @@ export function FullPaper({
       },
     [loaded, changes],
   );
+  const preparing = (
+    <>
+      {t("Preparing the full PDF…")} <span className="paper-clock">{clock(now - started)}</span>
+    </>
+  );
   if (error)
     return (
       <div className="paper-status" role="alert">
@@ -156,13 +211,36 @@ export function FullPaper({
     return (
       <div className="paper-status" role="status">
         <div className="pulse" />
-        <p>
-          {t("Preparing the full PDF…")} <span className="paper-clock">{clock(now - started)}</span>
-        </p>
+        <p>{preparing}</p>
       </div>
     );
   return (
-    <Pages paper={paper} render={render} scrollRoot={scrollRoot} onReady={onReady} />
+    <>
+      {loaded?.partial && (
+        <div className="paper-updating" role="status">
+          <span className="pulse" />
+          <span>{preparing}</span>
+        </div>
+      )}
+      <Pages
+        paper={paper}
+        render={render}
+        scrollRoot={scrollRoot}
+        onReady={() => {
+          if (!announced.current) {
+            announced.current = true;
+            onReady();
+            return;
+          }
+          // Later versions keep the change being reviewed where it was.
+          const root = scrollRoot.current,
+            kept = anchor.current,
+            current = kept && root?.querySelector<HTMLElement>(`.paper [data-stop="${kept.stop}"]`);
+          if (root && kept && current)
+            root.scrollTop += current.getBoundingClientRect().top - root.getBoundingClientRect().top - kept.offset;
+        }}
+      />
+    </>
   );
 }
 
@@ -181,8 +259,9 @@ function Pages({
     ready = useRef(onReady);
   ready.current = onReady;
   useEffect(() => paint(box.current!, paper, scrollRoot.current), [paper, scrollRoot]);
-  // The pages exist now: the selected change can be scrolled to.
-  useEffect(() => ready.current(), [paper]);
+  // The pages exist now: the selected change can be scrolled to, before
+  // they are painted.
+  useLayoutEffect(() => ready.current(), [paper]);
   const slice = (page: number, top: number, bottom: number) =>
     bottom - top > 0.5 && (
       <div className="paper-context" key={`${page}:${top}`}>
@@ -227,15 +306,18 @@ function paint(container: HTMLElement, paper: Paper, root: HTMLElement | null) {
     width = container.clientWidth,
     stopped = false;
   const pages = () => Array.from(container.querySelectorAll<HTMLElement>(".paper-page"));
+  const free = (canvas: HTMLCanvasElement) => {
+    canvas.remove();
+    canvas.width = canvas.height = 0;
+  };
+  // Pages painted from an earlier version of the PDF stay until this one's
+  // replace them, so a newer version comes in without the pages blanking.
   const release = (index: number) => {
     const entry = alive.get(index);
-    if (!entry) return;
     alive.delete(index);
-    entry.task?.cancel();
-    for (const canvas of entry.canvases) {
-      canvas.remove();
-      canvas.width = canvas.height = 0;
-    }
+    entry?.task?.cancel();
+    entry?.canvases.forEach(free);
+    pages()[index]?.querySelectorAll("canvas").forEach(free);
   };
   const pump = () => {
     while (!stopped && running < 2) {
@@ -254,7 +336,7 @@ function paint(container: HTMLElement, paper: Paper, root: HTMLElement | null) {
     alive.set(index, entry);
     try {
       const page = await paper.pdf.getPage(index + 1);
-      if (alive.get(index) !== entry) return;
+      if (stopped || alive.get(index) !== entry) return;
       const slices = Array.from(element.querySelectorAll<HTMLElement>(".paper-slice")),
         cssWidth = slices[0]?.clientWidth || element.clientWidth,
         size = page.getViewport({ scale: 1 }),
@@ -265,7 +347,7 @@ function paint(container: HTMLElement, paper: Paper, root: HTMLElement | null) {
       source.height = Math.floor(viewport.height);
       entry.task = page.render({ canvas: source, viewport });
       await entry.task.promise;
-      if (alive.get(index) !== entry) return;
+      if (stopped || alive.get(index) !== entry) return;
       for (const slice of slices) {
         const top = Math.round(Number(slice.dataset.top) * scale),
           bottom = Math.min(source.height, Math.round(Number(slice.dataset.bottom) * scale));
@@ -274,12 +356,13 @@ function paint(container: HTMLElement, paper: Paper, root: HTMLElement | null) {
         canvas.width = source.width;
         canvas.height = bottom - top;
         canvas.getContext("2d")!.drawImage(source, 0, top, source.width, bottom - top, 0, 0, source.width, bottom - top);
+        slice.querySelectorAll("canvas").forEach(free);
         slice.append(canvas);
         entry.canvases.push(canvas);
       }
       source.width = source.height = 0;
     } catch (failure) {
-      if ((failure as Error)?.name !== "RenderingCancelledException") console.error(failure);
+      if (!stopped && (failure as Error)?.name !== "RenderingCancelledException") console.error(failure);
       if (alive.get(index) === entry) alive.delete(index);
     } finally {
       running--;
@@ -305,7 +388,11 @@ function paint(container: HTMLElement, paper: Paper, root: HTMLElement | null) {
   const resized = new ResizeObserver(() => {
     if (Math.abs(container.clientWidth - width) < 1) return;
     width = container.clientWidth;
-    for (const index of [...alive.keys()]) release(index);
+    // Repainted at the new width over the current pages.
+    for (const [index, entry] of [...alive]) {
+      entry.task?.cancel();
+      alive.delete(index);
+    }
     pump();
   });
   resized.observe(container);
@@ -313,6 +400,7 @@ function paint(container: HTMLElement, paper: Paper, root: HTMLElement | null) {
     stopped = true;
     observer.disconnect();
     resized.disconnect();
-    for (const index of [...alive.keys()]) release(index);
+    // The canvases stay for the next version, or go with the page.
+    for (const entry of alive.values()) entry.task?.cancel();
   };
 }

package/engine/src/web/review.tsx

@@ -282,9 +282,11 @@ export function ReviewApp({
           ? ["pending", "accepted"].includes(decisions[id])
           : decisions[id] === "pending",
     );
+  // Only undecided changes can be decided: a decided one is changed back
+  // with Undo while that is possible.
   const kinds = (units: string[]): Kind[] =>
     !changes
-      ? ["accept", "reject", "comment"]
+      ? targets(units, "accept").length ? ["accept", "reject", "comment"] : []
       : targets(units, "accept").length
         ? ["accept", "reject"]
         : targets(units, "unstage").length
@@ -1569,6 +1571,7 @@ export function ReviewApp({
                 <Suspense fallback={<div className="paper-status" role="status"><div className="pulse" /></div>}>
                 <FullPaper
                   url={detail.pdf!}
+                  passes={detail.passes}
                   changes={placed}
                   render={(block, at) => change(block, at, true)}
                   scrollRoot={paper}