@graphty/visual-review 0.2.0 → 0.2.2

package/trusted/lib/thumbs.mjs

@@ -0,0 +1,149 @@
+/**
+ * Grid thumbnails: a capture scaled down for a tile. Scaling one 2400 x 1800 capture takes about
+ * 90 ms of CPU, so it runs in a few child processes, never on the server's own thread, where a
+ * grid of 36 tiles held every other request for seconds. Processes, not worker threads: threads
+ * share the server's memory, which grew past 500 MB while scaling, and every git the server then
+ * started took 20 ms instead of 3 (the fork copies the parent's page tables). The same file is the
+ * child, started with the FLAG argument.
+ */
+
+import { fork } from "node:child_process";
+import { availableParallelism } from "node:os";
+import { fileURLToPath } from "node:url";
+
+import { PNG } from "pngjs";
+
+// A grid tile is about 190 CSS pixels wide: 400 image pixels keep it sharp on a 2x screen, at
+// about a thirtieth of a 2400 x 1800 capture's memory once decoded.
+const THUMB_WIDTH = 400;
+
+/**
+ * A PNG scaled down to `width` pixels across (never up), each output pixel the average of the
+ * source pixels under it. For display in the grid only: comparisons use the full images.
+ * @param {Buffer} bytes the PNG
+ * @param {number} width the widest the result may be
+ * @returns {Buffer} the smaller PNG
+ */
+export function thumbnail(bytes, width = THUMB_WIDTH) {
+    const src = PNG.sync.read(bytes);
+    const w = Math.min(width, src.width);
+    const h = Math.max(1, Math.round((src.height * w) / src.width));
+    const out = new PNG({ width: w, height: h });
+    for (let y = 0; y < h; y++) {
+        const [y0, y1] = [
+            Math.floor((y * src.height) / h),
+            Math.max(Math.floor(((y + 1) * src.height) / h), 1 + Math.floor((y * src.height) / h)),
+        ];
+        for (let x = 0; x < w; x++) {
+            const [x0, x1] = [
+                Math.floor((x * src.width) / w),
+                Math.max(Math.floor(((x + 1) * src.width) / w), 1 + Math.floor((x * src.width) / w)),
+            ];
+            const sum = [0, 0, 0, 0];
+            for (let sy = y0; sy < y1; sy++) {
+                for (let sx = x0; sx < x1; sx++) {
+                    const i = (sy * src.width + sx) * 4;
+                    for (let c = 0; c < 4; c++) {
+                        sum[c] += src.data[i + c];
+                    }
+                }
+            }
+            const n = (y1 - y0) * (x1 - x0);
+            const o = (y * w + x) * 4;
+            for (let c = 0; c < 4; c++) {
+                out.data[o + c] = Math.round(sum[c] / n);
+            }
+        }
+    }
+    return PNG.sync.write(out);
+}
+
+const FLAG = "--visual-review-thumbnails";
+if (process.argv[2] === FLAG) {
+    process.on("message", (/** @type {Uint8Array} */ bytes) => {
+        try {
+            process.send({ png: thumbnail(Buffer.from(bytes)) });
+        } catch (err) {
+            process.send({ error: err.message });
+        }
+    });
+}
+
+// Half the cores, at most four: the rest stay free for the server, git and the downloads.
+const SIZE = Math.max(1, Math.min(4, Math.floor(availableParallelism() / 2)));
+const idle = [];
+let made = 0;
+/** @type {{ load: () => Promise<Buffer>, resolve: (png: Buffer) => void, reject: (err: Error) => void }[]} */
+const queue = [];
+
+function pump() {
+    while (queue.length > 0 && (idle.length > 0 || made < SIZE)) {
+        let worker = idle.pop();
+        if (!worker) {
+            // Buffers cross as buffers ("advanced"), not as JSON. Idle children never keep the
+            // server's process alive, and they end with it.
+            worker = fork(fileURLToPath(import.meta.url), [FLAG], { serialization: "advanced" });
+            worker.unref();
+            worker.channel?.unref();
+            made++;
+            // One that dies while idle is dropped; a send to it would throw.
+            const child = worker;
+            child.on("error", () => {});
+            child.on("exit", () => {
+                if (idle.includes(child)) {
+                    idle.splice(idle.indexOf(child), 1);
+                    made--;
+                }
+            });
+        }
+        run(worker, queue.shift());
+    }
+}
+
+async function run(w, task) {
+    let bytes;
+    try {
+        bytes = await task.load();
+    } catch (err) {
+        idle.push(w);
+        task.reject(err);
+        pump();
+        return;
+    }
+    // A child that dies (out of memory, say) fails its task and is replaced by the next one.
+    const died = (code) => {
+        w.removeAllListeners("message");
+        made--;
+        task.reject(new Error(`the thumbnail process stopped (${code})`));
+        pump();
+    };
+    w.once("exit", died);
+    w.once("message", ({ png, error }) => {
+        w.removeListener("exit", died);
+        w.channel?.unref();
+        idle.push(w);
+        if (error) {
+            task.reject(new Error(error));
+        } else {
+            task.resolve(Buffer.from(png));
+        }
+        pump();
+    });
+    // Busy, a child keeps the server's process alive until it answers.
+    w.channel?.ref();
+    w.send(bytes);
+}
+
+/**
+ * `thumbnail` in a child process. The image is read only when a child takes it, so a long queue
+ * of thumbnails made in advance holds no images in memory.
+ * @param {() => Promise<Buffer>} load reads the PNG; what it throws, this rejects with
+ * @param {boolean} [urgent] a tile on screen now: ahead of the thumbnails made in advance
+ * @returns {Promise<Buffer>} the smaller PNG
+ */
+export function scaled(load, urgent = false) {
+    return new Promise((resolve, reject) => {
+        queue[urgent ? "unshift" : "push"]({ load, resolve, reject });
+        pump();
+    });
+}

package/trusted/page/index.html

@@ -2,18 +2,32 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
         <title>Visual review</title>
         <link rel="stylesheet" href="review.css" />
         <script type="module" src="review.js"></script>
     </head>
     <body>
-        <header>
-            <button type="button" id="home" class="link">Visual review</button>
-            <nav id="crumbs"></nav>
-            <span id="status" role="status"></span>
-            <button type="button" id="copy-link" title="Copy a link to this screen">Copy link</button>
+        <header id="top">
+            <h1><button type="button" id="home" class="link">Visual review</button></h1>
+            <label class="picker"
+                ><span>Target</span
+                ><select id="pick-target"></select
+            ></label>
+            <label class="picker"
+                ><span>Project</span
+                ><select id="pick-project"></select
+            ></label>
+            <span id="finish-slot"></span>
+            <button type="button" id="keys-button" aria-keyshortcuts="?">Keys <kbd aria-hidden="true">?</kbd></button>
+            <button type="button" id="copy-link">Copy link</button>
         </header>
+        <div id="bar" role="region" aria-label="Tools"></div>
+        <div id="status-row" role="region" aria-label="Messages">
+            <span id="status" role="status"></span><span id="elapsed" aria-hidden="true"></span
+            ><span id="alert" role="alert"></span
+            ><button type="button" id="status-more" class="link" hidden>More</button>
+        </div>
         <main id="app" tabindex="-1"><p>Loading...</p></main>
     </body>
 </html>

package/trusted/page/passkey.js

@@ -0,0 +1,94 @@
+/*
+ * The review page's WebAuthn code: registering the owner's passkey, and approving a Finish with
+ * it (Face ID or Touch ID). The server builds every challenge and checks every answer; this file
+ * only hands bytes between it and the browser.
+ *
+ * Safari needs a user gesture for both calls, so no network request may sit between the press and
+ * the WebAuthn call: the challenge is always fetched before the button that uses it is shown, and
+ * each call below reaches `navigator.credentials` before its first `await`.
+ */
+
+// Own helpers: Uint8Array.fromBase64 is missing from the Safari versions still in use.
+const toB64u = (buffer) => {
+    let s = "";
+    for (const b of new Uint8Array(buffer)) {
+        s += String.fromCharCode(b);
+    }
+    return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+};
+const fromB64u = (s) => {
+    const bin = atob(s.replace(/-/g, "+").replace(/_/g, "/") + "===".slice((s.length + 3) % 4));
+    return Uint8Array.from(bin, (c) => c.charCodeAt(0));
+};
+const credential = (id) => ({ type: "public-key", id: fromB64u(id) });
+
+/**
+ * Fetches a registration challenge. Call it before showing the button that registers.
+ * @param {(path: string, body?: object) => Promise<any>} api the page's API call
+ * @returns {Promise<{ challenge: string, userId: string, rpId: string, known: string[] }>} what
+ *     registerPasskey needs
+ */
+export const prepareRegistration = (api) => api("/api/passkey-challenge", {});
+
+/**
+ * Creates a passkey for this page's host and asks the server to register it, which opens a pull
+ * request adding it. Call it straight from the button's click.
+ * @param {(path: string, body?: object) => Promise<any>} api the page's API call
+ * @param {{ challenge: string, userId: string, rpId: string, known: string[] }} prepared from
+ *     prepareRegistration
+ * @param {string | ((made: PublicKeyCredential) => string)} label what passkeys.json calls the key,
+ *     or a function naming it from the credential made (a platform passkey or a security key)
+ * @returns {Promise<{ entry: object, branch: string, pullRequest: string, gated: boolean }>} the
+ *     server's answer
+ */
+export async function registerPasskey(api, prepared, label) {
+    const created = navigator.credentials.create({
+        publicKey: {
+            rp: { id: prepared.rpId, name: "Visual review" },
+            user: { id: fromB64u(prepared.userId), name: "visual-review", displayName: "Visual review owner" },
+            challenge: fromB64u(prepared.challenge),
+            pubKeyCredParams: [{ type: "public-key", alg: -7 }],
+            authenticatorSelection: { residentKey: "preferred", userVerification: "required" },
+            attestation: "none",
+            excludeCredentials: prepared.known.map(credential),
+        },
+    });
+    const made = await created;
+    const r = made.response;
+    return api("/api/register", {
+        challenge: prepared.challenge,
+        credentialId: toB64u(made.rawId),
+        publicKey: toB64u(r.getPublicKey()),
+        algorithm: r.getPublicKeyAlgorithm(),
+        authenticatorData: toB64u(r.getAuthenticatorData()),
+        clientDataJSON: toB64u(r.clientDataJSON),
+        label: typeof label === "function" ? label(made) : label,
+    });
+}
+
+/**
+ * Signs a prepared Finish's record with the passkey. Call it straight from the press that answers
+ * yes. A cancelled or refused prompt rejects with a NotAllowedError.
+ * @param {{ challenge: string, rpId: string, allowCredentials: string[] }} prepared from
+ *     POST /api/finish-prepare
+ * @returns {Promise<{ credentialId: string, authenticatorData: string, clientDataJSON: string,
+ *     signature: string }>} the approval POST /api/finish takes
+ */
+export async function approve(prepared) {
+    const got = await navigator.credentials.get({
+        publicKey: {
+            challenge: fromB64u(prepared.challenge),
+            rpId: prepared.rpId,
+            allowCredentials: prepared.allowCredentials.map(credential),
+            userVerification: "required",
+            timeout: 120000,
+        },
+    });
+    const r = got.response;
+    return {
+        credentialId: toB64u(got.rawId),
+        authenticatorData: toB64u(r.authenticatorData),
+        clientDataJSON: toB64u(r.clientDataJSON),
+        signature: toB64u(r.signature),
+    };
+}