@trueclone/cli 0.2.0 → 0.4.0-rc.1

package/scripts/interact.mjs

@@ -11,6 +11,10 @@
 //    "compare": "structure" }]                                                     // or "visual"
 // Step kinds: move [x,y] (fractions of the viewport), hover [x,y], path [[x,y],...], drag {from,to}, down/up [x,y],
 // click {ref,clone} selector or [x,y], key "Escape", wait ms, shot "label".
+// Points are [x, y] fractions of the viewport (0-1); move and hover also take an element: "selector@n" or { ref, clone }.
+// "selector@n" in at/click/expectChange picks the n-th match, counting from 0 (mind hidden duplicates: a mobile menu
+// button is often the first match). A scenario passes when the change happens on both sides and the shots after it
+// match the reference's (≥ 95).
 // usage: node scripts/interact.mjs <name> [--only "<text>"]   |   node scripts/interact.mjs <name> --draft
 import fs from 'node:fs/promises';
 import path from 'node:path';
@@ -19,7 +23,7 @@ import { VIEWPORTS, parseArgs, openBrowser, newPage, serve, warmUp, waitStill, w
 const { pos, flags } = parseArgs(process.argv.slice(2));
 const [name] = pos;
 if (!name) {
-  console.error('usage: npm run interact -- <name> [--only text] | --draft');
+  console.error('usage: trueclone interact <name> [--only "<scenario text>"] | trueclone interact <name> --draft   (scenario format: the comment at the top of scripts/interact.mjs, and SKILL.md)');
   process.exit(1);
 }
 const root = path.resolve('sites', name);
@@ -94,6 +98,14 @@ async function runSide(url, side, list) {
         await wheelTo(page, sc.at?.offset || 0, vp);
       }
       await waitStill(page, { timeout: 3000 });
+      // the first frame only once the screen itself has stopped changing (a slow intro fade outlasts the page-level
+      // wait, and a "before" caught halfway through it is compared against forever): two shots in a row the same
+      for (let t0 = Date.now(), last = null; Date.now() - t0 < 6000;) {
+        const buf = await page.screenshot();
+        if (last && (buf.equals(last) || matchPct(PNG.sync.read(last), PNG.sync.read(buf)).pct >= 99.8)) break;
+        last = buf;
+        await page.waitForTimeout(250);
+      }
       const px = ([x, y]) => [Math.round(x * vp.width), Math.round(y * vp.height)];
       const expectSel = sc.expectChange?.[side];
       const before = expectSel ? await stateOf(page, expectSel) : null;
@@ -109,7 +121,18 @@ async function runSide(url, side, list) {
       };
       await shot('before');
       for (const st of sc.steps) {
-        if (st.move || st.hover) await page.mouse.move(...px(st.move || st.hover), { steps: 15 });
+        if (st.move || st.hover) {
+          // a point [x, y], or an element to put the pointer on: "selector@n" or { ref, clone }
+          const t = st.move || st.hover;
+          const sel = Array.isArray(t) ? null : typeof t === 'string' ? t : t[side];
+          if (!sel) await page.mouse.move(...px(t), { steps: 15 });
+          else {
+            const [s, idx] = sel.split('@');
+            const box = await page.locator(s).nth(Number(idx || 0)).boundingBox().catch(() => null);
+            if (box) await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 15 });
+            else results.push({ name: sc.name, error: `hover ${sel}: no such element on the ${side === 'ref' ? 'reference' : 'clone'}` });
+          }
+        }
         else if (st.path) for (const p of st.path) await page.mouse.move(...px(p), { steps: 20 });
         else if (st.drag) {
           await page.mouse.move(...px(st.drag.from), { steps: 5 });
@@ -146,7 +169,7 @@ const server = typeof flags.url === 'string' ? null : await serve(path.join(root
 const cloneUrl = server ? server.url : flags.url;
 // Reference results are cached per scenario (reference side + viewport + capture time) as long as the shot
 // files still exist; only new or edited scenarios touch the live site. --refresh-ref re-measures all.
-const refKey = (sc) => ({ tool: 'interact', name: sc.name, viewport: sc.viewport, at: sc.at, steps: sc.steps, expect: sc.expectChange?.ref, compare: sc.compare, click: JSON.stringify(sc.steps) });
+const refKey = (sc) => ({ tool: 'interact', v: 2, name: sc.name, viewport: sc.viewport, at: sc.at, steps: sc.steps, expect: sc.expectChange?.ref, compare: sc.compare, click: JSON.stringify(sc.steps) });
 const refRes = [];
 const missing = [];
 for (const sc of scenarios) {
@@ -164,6 +187,7 @@ const cloneRes = await runSide(cloneUrl, 'clone', scenarios);
 server?.close();
 
 const report = { name, at: new Date().toISOString(), scenarios: [] };
+const END_STATE_MIN = 95; // the shots after the action must match this well
 for (const sc of scenarios) {
   const a = refRes.find((r) => r.name === sc.name && r.shots), b = cloneRes.find((r) => r.name === sc.name && r.shots);
   const errors = [...refRes, ...cloneRes].filter((r) => r.name === sc.name && r.error).map((r) => r.error);
@@ -174,7 +198,12 @@ for (const sc of scenarios) {
   }
   const labels = Object.keys(shots).filter((l) => l !== 'before');
   const score = labels.length ? +(labels.reduce((n, l) => n + shots[l], 0) / labels.length).toFixed(2) : null;
-  const expect = sc.expectChange ? { ref: a?.changed, clone: b?.changed, pass: a?.changed === true && b?.changed === true } : null;
+  // a scenario passes when the change happens on both sides AND the clone ends up where the reference does: a wrong
+  // panel opening is a change too
+  const endOk = score !== null && score >= END_STATE_MIN;
+  const expect = sc.expectChange
+    ? { ref: a?.changed, clone: b?.changed, endState: score, pass: a?.changed === true && b?.changed === true && endOk }
+    : { ref: null, clone: null, endState: score, pass: endOk };
   report.scenarios.push({ name: sc.name, score, shots, expect, errors });
 }
 await fs.writeFile(path.join(outDir, 'report.json'), JSON.stringify(report, null, 2));
@@ -182,7 +211,8 @@ console.table(report.scenarios.map((s) => ({
   scenario: s.name,
   'match %': s.score,
   shots: Object.entries(s.shots).map(([k, v]) => `${k} ${v}`).join('  '),
-  'changes (ref/clone)': s.expect ? `${s.expect.ref ? 'yes' : 'NO'} / ${s.expect.clone ? 'yes' : 'NO'}${s.expect.pass ? '' : '  FAIL'}` : '-',
+  'changes (ref/clone)': s.expect.ref === null ? '-' : `${s.expect.ref ? 'yes' : 'NO'} / ${s.expect.clone ? 'yes' : 'NO'}`,
+  'end state': `${s.score ?? '-'}${s.expect.pass ? '' : '  FAIL'}`,
   errors: s.errors.join('; ') || '',
 })));
 console.log(`-> ${path.relative(process.cwd(), path.join(outDir, 'report.json'))}`);

package/scripts/lib.mjs

@@ -3,6 +3,7 @@ import fs from 'node:fs/promises';
 import crypto from 'node:crypto';
 import { createReadStream } from 'node:fs';
 import http from 'node:http';
+import zlib from 'node:zlib';
 import path from 'node:path';
 import { chromium } from 'playwright';
 import { PNG } from 'pngjs';
@@ -10,11 +11,19 @@ import pixelmatch from 'pixelmatch';
 
 export { PNG };
 
+// The seed sizes: the clone is built from what the reference shows at these.
 export const VIEWPORTS = [
   { name: 'mobile', width: 390, height: 844 },
   { name: 'tablet', width: 768, height: 1024 },
   { name: 'desktop', width: 1440, height: 900 },
 ];
+// Held-out sizes: captured and scored, never read by anything that builds the clone. A clone that is right at the seed
+// sizes and wrong here is fitted to the sizes it was built from, not a copy of the site.
+export const HELD_OUT = [
+  { name: 'laptop', width: 1280, height: 720, heldOut: true },
+  { name: 'wide', width: 1920, height: 1080, heldOut: true },
+];
+export const SCORED = [...VIEWPORTS, ...HELD_OUT];
 
 // Jump every animation/transition to its end state so screenshots are deterministic.
 const FREEZE_CSS = `*,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;
@@ -126,36 +135,50 @@ img,video{object-position:-99999px -99999px!important;background:#888!important}
 svg{background:#888!important} svg *{visibility:hidden!important} iframe{visibility:hidden!important}
 canvas{background:#888!important;filter:contrast(0) brightness(1.066)!important}
 [data-lab-cliptext]{background:none!important;-webkit-text-fill-color:transparent!important}
+[data-lab-bgi]{background-image:none!important;background-color:#888!important}
 [data-lab-bgb]::before,[data-lab-bga]::after{background-image:none!important;background-color:#888!important}`; // canvas = media (WebGL heroes, 3D models): flat grey box like images
 
-// What CSS alone can't select: gradient text (background-clip: text paints the glyphs with its background, so a
-// transparent colour still shows the letters) and photo backgrounds on ::before/::after. Marked with attributes
-// the mask CSS targets; `off` removes them.
+// What CSS alone can't select: photo backgrounds (a script that rewrites an element's inline background every frame
+// would undo an inline override, so the mask is a stylesheet rule on a marker attribute, which inline styles lose
+// to), gradient text (background-clip: text paints the glyphs with its background, so a transparent colour still
+// shows the letters) and photo backgrounds on ::before/::after. `off` removes the markers.
+// A script that rebuilds or restyles media after the mask went on (a resize during a full-page shot rebuilds a grid)
+// would leave the new elements unmasked on one side only; an observer marks them as they appear, on both sides.
 function maskExtrasInPage(enable) {
-  const marks = ['data-lab-cliptext', 'data-lab-bgb', 'data-lab-bga'];
+  const marks = ['data-lab-bgi', 'data-lab-cliptext', 'data-lab-bgb', 'data-lab-bga'];
   if (!enable) {
+    window.__labMaskObserver?.disconnect();
+    window.__labMaskObserver = null;
     for (const m of marks) for (const el of document.querySelectorAll(`[${m}]`)) el.removeAttribute(m);
     return;
   }
-  for (const el of document.querySelectorAll('*')) {
+  const markOne = (el) => {
     const s = getComputedStyle(el);
+    if (s.backgroundImage.includes('url(')) el.setAttribute('data-lab-bgi', '');
     if (s.backgroundClip === 'text' || s.webkitBackgroundClip === 'text') el.setAttribute('data-lab-cliptext', '');
     if (getComputedStyle(el, '::before').backgroundImage.includes('url(')) el.setAttribute('data-lab-bgb', '');
     if (getComputedStyle(el, '::after').backgroundImage.includes('url(')) el.setAttribute('data-lab-bga', '');
-  }
+  };
+  for (const el of document.querySelectorAll('*')) markOne(el);
+  window.__labMaskObserver?.disconnect();
+  window.__labMaskObserver = new MutationObserver((records) => {
+    for (const r of records) {
+      if (r.type === 'attributes') {
+        if (!(r.target instanceof Element) || marks.includes(r.attributeName)) continue;
+        markOne(r.target);
+        // a custom property or url() set on an ancestor (--hero-img) reaches its descendants' backgrounds
+        if (/url\(|--/.test(r.target.getAttribute('style') || '')) for (const el of r.target.querySelectorAll('*')) markOne(el);
+        continue;
+      }
+      for (const n of r.addedNodes) if (n instanceof Element) { markOne(n); for (const el of n.querySelectorAll('*')) markOne(el); }
+    }
+  });
+  window.__labMaskObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ['style', 'class'] });
 }
 
 export async function mask(page) {
   const tag = await page.addStyleTag({ content: MASK_CSS });
   await tag.evaluate((el) => el.setAttribute('data-lab-freeze', ''));
-  await page.evaluate(() => {
-    for (const el of document.querySelectorAll('*')) {
-      if (getComputedStyle(el).backgroundImage.includes('url(')) {
-        el.style.setProperty('background-image', 'none', 'important');
-        el.style.setProperty('background-color', '#888', 'important');
-      }
-    }
-  });
   await page.evaluate(maskExtrasInPage, true);
   await page.waitForTimeout(200);
 }
@@ -173,7 +196,7 @@ export async function freezeLoops(page) {
   }).catch(() => {});
 }
 
-// Reversible version of mask() for live pages: on() masks, off() restores every inline style it touched.
+// Reversible version of mask() for live pages: on() masks, off() removes the stylesheet and every marker.
 export async function maskToggle(page, on) {
   await page.evaluate(([css, enable]) => {
     if (enable) {
@@ -182,19 +205,8 @@ export async function maskToggle(page, on) {
       tag.setAttribute('data-lab-freeze', '');
       tag.textContent = css;
       document.head.appendChild(tag);
-      for (const el of document.querySelectorAll('*')) {
-        if (getComputedStyle(el).backgroundImage.includes('url(')) {
-          el.setAttribute('data-lab-bg', el.style.cssText);
-          el.style.setProperty('background-image', 'none', 'important');
-          el.style.setProperty('background-color', '#888', 'important');
-        }
-      }
     } else {
       document.getElementById('lab-mask')?.remove();
-      for (const el of document.querySelectorAll('[data-lab-bg]')) {
-        el.style.cssText = el.getAttribute('data-lab-bg');
-        el.removeAttribute('data-lab-bg');
-      }
     }
   }, [MASK_CSS, on]);
   await page.evaluate(maskExtrasInPage, on);
@@ -242,17 +254,29 @@ const MIME = {
 };
 
 // Port 0 = a free port picked by the OS, so several scoring tools can run side by side; use server.url.
+// Serves a clone the way a host would: text compressed (brotli or gzip, as the browser asks), so the load check
+// compares the clone with a CDN-served original on equal terms.
+const COMPRESSIBLE = /\.(html?|css|m?js|json|svg|txt|xml|map)$/i;
 export function serve(dir, port = 0) {
+  dir = path.resolve(dir); // forward or back slashes, relative or not: one form, so the containment check holds
   return new Promise((resolve) => {
     const server = http.createServer(async (req, res) => {
       let p = decodeURIComponent(new URL(req.url, 'http://x').pathname);
       if (p.endsWith('/')) p += 'index.html';
       const file = path.join(dir, p);
-      if (!file.startsWith(dir)) { res.writeHead(403).end(); return; }
+      if (file !== dir && !file.startsWith(dir + path.sep)) { res.writeHead(403).end(); return; }
       try {
         await fs.access(file);
-        res.writeHead(200, { 'content-type': MIME[path.extname(file).toLowerCase()] || 'application/octet-stream' });
-        createReadStream(file).pipe(res);
+        const headers = { 'content-type': MIME[path.extname(file).toLowerCase()] || 'application/octet-stream' };
+        const accept = String(req.headers['accept-encoding'] || '');
+        const enc = COMPRESSIBLE.test(file) ? (/\bbr\b/.test(accept) ? 'br' : /\bgzip\b/.test(accept) ? 'gzip' : null) : null;
+        if (enc) {
+          res.writeHead(200, { ...headers, 'content-encoding': enc, vary: 'accept-encoding' });
+          createReadStream(file).pipe(enc === 'br' ? zlib.createBrotliCompress({ params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 5 } }) : zlib.createGzip({ level: 6 })).pipe(res);
+        } else {
+          res.writeHead(200, headers);
+          createReadStream(file).pipe(res);
+        }
       } catch { res.writeHead(404).end(); }
     });
     server.listen(port, '127.0.0.1', () => { server.url = `http://127.0.0.1:${server.address().port}/`; resolve(server); });
@@ -277,6 +301,30 @@ export function crop(png, y, h) {
 
 export const match = (a, b, diff) => pixelmatch(a.data, b.data, diff ? diff.data : null, a.width, a.height, { threshold: 0.1, includeAA: false });
 
+// How alike two canvas regions look, 0-100: what a scene draws rarely matches pixel for pixel (time, physics, random
+// seeds), so it is compared by what is drawn rather than where: the colour distribution (64 bins) and how much of the
+// region is covered by drawing at all (pixels away from the region's dominant colour). An empty or wrong canvas scores
+// low; the same scene a frame apart scores high.
+export function canvasSimilarity(a, b) {
+  const stats = (img) => {
+    const hist = new Float64Array(64);
+    const n = img.width * img.height;
+    for (let i = 0; i < n; i++) hist[((img.data[i * 4] >> 6) << 4) | ((img.data[i * 4 + 1] >> 6) << 2) | (img.data[i * 4 + 2] >> 6)]++;
+    let mode = 0;
+    for (let k = 1; k < 64; k++) if (hist[k] > hist[mode]) mode = k;
+    const [mr, mg, mb] = [(mode >> 4) * 64 + 32, ((mode >> 2) & 3) * 64 + 32, (mode & 3) * 64 + 32];
+    let ink = 0;
+    for (let i = 0; i < n; i++) if (Math.abs(img.data[i * 4] - mr) + Math.abs(img.data[i * 4 + 1] - mg) + Math.abs(img.data[i * 4 + 2] - mb) > 96) ink++;
+    for (let k = 0; k < 64; k++) hist[k] /= n || 1;
+    return { hist, ink: ink / (n || 1) };
+  };
+  const A = stats(a), B = stats(b);
+  let inter = 0;
+  for (let k = 0; k < 64; k++) inter += Math.min(A.hist[k], B.hist[k]);
+  const cover = 1 - Math.abs(A.ink - B.ink) / Math.max(A.ink, B.ink, 0.05);
+  return +(100 * (0.5 * inter + 0.5 * cover)).toFixed(2);
+}
+
 export function matchPct(pngA, pngB, withDiff = false) {
   const w = Math.max(pngA.width, pngB.width), h = Math.max(pngA.height, pngB.height);
   const a = pad(pngA, w, h), b = pad(pngB, w, h);

package/scripts/load.mjs

@@ -0,0 +1,106 @@
+// Load sequence: what a visitor sees between the first byte and the settled page, on both sides, measured the same
+// way. Each side loads in a fresh context (cold cache, cache disabled) on the same emulated network, and the visible
+// viewport is photographed 250, 500, 1000, 2000 and 4000 ms after navigation starts, then once more when the page has
+// settled. "Settled at t" is how much the frame at t already matches the final frame (pixel match), so a clone that
+// paints a wrong skeleton for two seconds, or settles much later or earlier than the original, shows up as a gap
+// between the two curves. The score is 100 minus the mean gap. Reference curves are cached per capture.
+//
+// usage: node scripts/load.mjs <name> [--viewport desktop|tablet|mobile|all] [--url <clone url>] [--refresh-ref]
+//   -> sites/<name>/compare/load.json, frames in compare/load/ and reference/load/
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { SCORED as VIEWPORTS, parseArgs, openBrowser, newPage, serve, matchPct, cached, PNG, withTimeout } from './lib.mjs';
+
+const { pos, flags } = parseArgs(process.argv.slice(2));
+const [name] = pos;
+if (!name) {
+  console.error('usage: trueclone load <name> [--viewport desktop|all] [--url <clone url>] [--refresh-ref]');
+  process.exit(1);
+}
+const root = path.resolve('sites', name);
+const meta = JSON.parse(await fs.readFile(path.join(root, 'reference', 'meta.json'), 'utf8'));
+const vps = !flags.viewport || flags.viewport === 'all' ? VIEWPORTS : [VIEWPORTS.find((v) => v.name === flags.viewport)].filter(Boolean);
+const TIMES = [250, 500, 1000, 2000, 4000];
+const SETTLED = 98; // a frame this close to the final one counts as settled
+const NOISE_LIMIT = 15; // two runs of one side further apart than this: that side is unstable, the width is not scored
+// the same network for both sides: the clone is served from this machine, the reference from a CDN, so both are
+// bounded by the emulated link, not by where they come from
+const NETWORK = { offline: false, latency: 40, downloadThroughput: 1.25e6, uploadThroughput: 6e5 };
+
+async function sequence(browser, url, vp, dir) {
+  const { context, page } = await newPage(browser, vp, { reducedMotion: 'no-preference' });
+  try {
+    const cdp = await context.newCDPSession(page);
+    await cdp.send('Network.enable');
+    await cdp.send('Network.setCacheDisabled', { cacheDisabled: true });
+    await cdp.send('Network.emulateNetworkConditions', NETWORK);
+    await fs.mkdir(dir, { recursive: true });
+    const frames = {};
+    const t0 = Date.now();
+    const nav = page.goto(url, { waitUntil: 'load', timeout: 60000 }).catch(() => null);
+    for (const t of TIMES) {
+      const wait = t0 + t - Date.now();
+      if (wait > 0) await new Promise((r) => setTimeout(r, wait));
+      // the frame may be blank before the first byte (a valid part of the sequence)
+      const shot = await withTimeout(page.screenshot({ fullPage: false, animations: 'allow' }), 5000, `load shot ${t}`).catch(() => null);
+      frames[t] = shot ? PNG.sync.read(shot) : null;
+      if (shot) await fs.writeFile(path.join(dir, `${vp.name}-${t}.png`), shot);
+    }
+    await nav;
+    await page.waitForLoadState('networkidle', { timeout: 15000 }).catch(() => {});
+    await page.evaluate(() => document.fonts.ready).catch(() => {});
+    await page.waitForTimeout(1500);
+    const finalShot = await page.screenshot({ fullPage: false, animations: 'allow' });
+    await fs.writeFile(path.join(dir, `${vp.name}-final.png`), finalShot);
+    const final = PNG.sync.read(finalShot);
+    const curve = {};
+    for (const t of TIMES) curve[t] = frames[t] ? matchPct(frames[t], final).pct : 0;
+    const settledAt = TIMES.find((t) => curve[t] >= SETTLED) ?? null;
+    return { curve, settledAt };
+  } finally {
+    await context.close();
+  }
+}
+
+const cloneUrl = typeof flags.url === 'string' ? flags.url : null;
+const server = cloneUrl ? null : await serve(path.join(root, 'clone'));
+const browser = await openBrowser(flags.cdp);
+const viewports = [];
+try {
+  // each side twice: a load is never the same twice (an image that arrives a frame later moves an intro), so the
+  // curve is the mean of two runs and the spread between them is reported as the measurement's own noise
+  const twice = async (url, dir, vp) => {
+    const a = await sequence(browser, url, vp, dir);
+    const b = await sequence(browser, url, vp, dir);
+    const curve = Object.fromEntries(TIMES.map((t) => [t, +((a.curve[t] + b.curve[t]) / 2).toFixed(2)]));
+    const noise = +Math.max(...TIMES.map((t) => Math.abs(a.curve[t] - b.curve[t]))).toFixed(2);
+    return { curve, noise, settledAt: TIMES.find((t) => curve[t] >= SETTLED) ?? null, runs: [a, b] };
+  };
+  for (const vp of vps) {
+    const ref = await cached(root, { tool: 'load', vp: vp.name, times: TIMES, network: NETWORK, v: 2 }, () => twice(meta.url, path.join(root, 'reference', 'load'), vp), Boolean(flags['refresh-ref']));
+    const clone = await twice(cloneUrl || `${server.url}index.html`, path.join(root, 'compare', 'load'), vp);
+    const gap = Object.fromEntries(TIMES.map((t) => [t, +Math.abs(ref.curve[t] - clone.curve[t]).toFixed(2)]));
+    const noise = +Math.max(ref.noise, clone.noise).toFixed(2);
+    const match = (curve) => +(100 - TIMES.reduce((s, t) => s + Math.abs(ref.curve[t] - curve[t]), 0) / TIMES.length).toFixed(2);
+    // Only the reference not agreeing with itself (an intro that starts a second later in one run) leaves nothing to
+    // score against: that width is reported as unstable, like a probe. A clone that loads differently from one run to
+    // the next is a defect, not noise: it is scored by its worse run (a visitor may get that one).
+    const unstable = ref.noise > NOISE_LIMIT;
+    const cloneUnstable = !unstable && clone.noise > NOISE_LIMIT;
+    const score = unstable ? null : cloneUnstable ? Math.min(...clone.runs.map((r) => match(r.curve))) : match(clone.curve);
+    viewports.push({ viewport: vp.name, score, unstable, cloneUnstable, noise, gap, ref, clone });
+    const curves = `curves ref ${TIMES.map((t) => ref.curve[t]).join('/')} clone ${clone.runs.map((r) => TIMES.map((t) => r.curve[t]).join('/')).join(' | ')}`;
+    console.log(unstable
+      ? `${vp.name}: load unstable (the reference differs by ±${ref.noise} between two runs of itself; not scored; ${curves})`
+      : `${vp.name}: load match ${score}%${cloneUnstable ? ` (the clone loads differently each time, ±${clone.noise}: scored by its worse run)` : ` (noise ±${noise})`}; settled: reference ${ref.settledAt ?? '>4000'}ms, clone ${clone.settledAt ?? '>4000'}ms; ${curves}`);
+  }
+} finally {
+  if (!flags.cdp) await browser.close();
+  server?.close();
+}
+await fs.mkdir(path.join(root, 'compare'), { recursive: true });
+const out = path.join(root, 'compare', 'load.json');
+const previous = await fs.readFile(out, 'utf8').then(JSON.parse).catch(() => null);
+const merged = vps.length === VIEWPORTS.length || !previous ? viewports : [...(previous.viewports || []).filter((v) => !viewports.some((n) => n.viewport === v.viewport)), ...viewports];
+await fs.writeFile(out, JSON.stringify({ at: new Date().toISOString(), clone: cloneUrl || server?.url, times: TIMES, network: NETWORK, viewports: merged }, null, 2));
+console.log(`-> ${path.relative(process.cwd(), out)}`);