feat(ui): add just ui-serve to look at a UI change locally

justfile

@@ -110,6 +110,12 @@ site:
     scripts/compat_site.py site
     scripts/site_index.py site
 
+# Build the viewer and serve it on 127.0.0.1:PORT with the committed real data, to look at a UI
+# change (a PR checked out with `gh pr checkout`). From a laptop: ssh -L PORT:localhost:PORT HOST.
+ui-serve port="4400":
+    # A local look only, so the host's pnpm may stand in for the pinned one (CI uses the pin).
+    cd ui && export npm_config_manage_package_manager_versions=false && pnpm install --frozen-lockfile && pnpm run build && node e2e/serve.mjs {{ port }}
+
 # Write the UI's data from results/ to OUT (scripts/export_ui.py says what it reads).
 # Needs uv: change points come from Apache Otava, in an environment of its own.
 ui-data out:

ui/README.md

@@ -31,6 +31,10 @@ They serve `dist/` with [test/fixtures/real/](test/fixtures/real/) as its data:
 `just ui-data` run on the public `results` branch. To refresh it, run `just ui-data` from a
 clone that has asv's mirrors in `.asv/` (they give the release names) into that folder.
 
+To look at a UI change, `just ui-serve` (port 4400 by default) builds the viewer and serves it
+with that same data. CI's `ui` job also keeps the browser tests' screenshots as the
+`ui-screenshots` artifact for 14 days: `gh run download <run id> -n ui-screenshots`.
+
 The site reads `index.json` from `PUBLIC_DATA_URL`, an absolute URL or a path relative to the
 page, `data/` by default. Set it at build time:
 

ui/e2e/serve.mjs

@@ -19,4 +19,4 @@ createServer((req, res) => {
   }
   res.writeHead(200, { "content-type": TYPES[extname(file)] ?? "application/octet-stream" });
   createReadStream(file).pipe(res);
-}).listen(Number(process.argv[2]));
+}).listen(Number(process.argv[2]), "127.0.0.1"); // this host only

ui/playwright.config.ts

@@ -7,10 +7,10 @@ const port = Number(process.env.E2E_PORT ?? 4417);
 export default defineConfig({
   testDir: "e2e",
   reporter: process.env.CI ? "github" : "list",
-  use: { baseURL: `http://localhost:${port}/`, browserName: "chromium" },
+  use: { baseURL: `http://127.0.0.1:${port}/`, browserName: "chromium" },
   webServer: {
     command: `node e2e/serve.mjs ${port}`,
-    url: `http://localhost:${port}/`,
+    url: `http://127.0.0.1:${port}/`,
     reuseExistingServer: !process.env.CI,
   },
 });