@trueclone/cli 0.2.0 → 0.3.0

package/scripts/load.mjs

@@ -0,0 +1,102 @@
+// 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 { 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);
+    // a side that does not agree with itself (an intro that starts a second later in one run) cannot be scored
+    // against anything: the width is reported as unstable, like a probe, instead of as a number
+    const unstable = noise > NOISE_LIMIT;
+    const score = unstable ? null : +(100 - TIMES.reduce((s, t) => s + gap[t], 0) / TIMES.length).toFixed(2);
+    viewports.push({ viewport: vp.name, score, unstable, noise, gap, ref, clone });
+    console.log(unstable
+      ? `${vp.name}: load unstable (noise ±${noise} between two runs of the ${ref.noise > clone.noise ? 'reference' : 'clone'} itself; not scored; curves ref ${TIMES.map((t) => ref.curve[t]).join('/')} clone ${TIMES.map((t) => clone.curve[t]).join('/')})`
+      : `${vp.name}: load match ${score}% (noise ±${noise}; settled: reference ${ref.settledAt ?? '>4000'}ms, clone ${clone.settledAt ?? '>4000'}ms; curves ref ${TIMES.map((t) => ref.curve[t]).join('/')} clone ${TIMES.map((t) => clone.curve[t]).join('/')})`);
+  }
+} 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)}`);

package/scripts/next.mjs

@@ -15,7 +15,7 @@ import fs from 'node:fs/promises';
 import path from 'node:path';
 import { spawn } from 'node:child_process';
 import net from 'node:net';
-import { parse } from 'parse5';
+import { parse, serialize } from 'parse5';
 import { fileURLToPath as toPath } from 'node:url';
 import { parseArgs } from './lib.mjs';
 
@@ -30,13 +30,17 @@ const cloneDir = path.join(root, 'clone');
 const out = path.join(root, 'next');
 const port = Number(flags.port || 3100);
 
-// Versions: motion libraries pinned to what the verified HTML clone loads, so behaviour is identical.
+// Two kinds of clone. A hand-built one (styles.css + one script.js using GSAP/Lenis/Swiper/three from npm) is
+// converted section by section; a seeded one (trueclone seed: the original's own stylesheets, trueclone's players, a
+// script.js and the libraries it vendored) goes through seededApp() and needs no motion library from npm.
+const seeded = await fs.stat(path.join(cloneDir, 'css')).then(() => true, () => false);
+// Versions: motion libraries pinned to what the verified hand-built HTML clone loads, so behaviour is identical.
 const PKG = {
   name: `${name}-next`, private: true, version: '0.1.0',
   scripts: { dev: 'next dev', build: 'next build', start: `next start -p ${port}` },
   dependencies: {
     next: '16.4.0', react: '19.3.0', 'react-dom': '19.3.0',
-    gsap: '3.13.0', lenis: '1.1.18', swiper: '11.2.6', three: '0.128.0',
+    ...(seeded ? {} : { gsap: '3.13.0', lenis: '1.1.18', swiper: '11.2.6', three: '0.128.0' }),
     clsx: '2.1.1', 'tailwind-merge': '3.7.0',
   },
   devDependencies: {
@@ -84,12 +88,17 @@ function jsxAttrs(node, inSvg) {
     if (node.tagName === 'input' && a.name === 'value') { parts.push(attrString('defaultValue', a.value)); continue; }
     if (node.tagName === 'input' && a.name === 'checked') { parts.push('defaultChecked'); continue; }
     if (LEGACY.has(a.name) && !inSvg) { parts.push(`{...{ ${JSON.stringify(a.name)}: ${JSON.stringify(a.value)} }}`); continue; }
-    if (a.name === 'style') { usesStyle = true; parts.push(`style={${JSON.stringify(styleObject(a.value))} as CSSProperties}`); continue; }
+    // url(assets/…) in an inline style resolves against the page in the clone; the app serves assets at /assets
+    if (a.name === 'style') { usesStyle = true; parts.push(`style={${JSON.stringify(styleObject(a.value.replace(/url\((['"]?)(?:\.\.\/)?assets\//g, (m, q) => `url(${q}/assets/`)))} as CSSProperties}`); continue; }
     // SVG elements have no typed boolean props (hidden), so they go through the spread too
     if (BOOL.has(a.name) && (a.value === '' || a.value === a.name)) { parts.push(inSvg ? `{...{ ${JSON.stringify(a.name)}: true }}` : RENAME[a.name] || a.name); continue; }
     let n = RENAME[a.name] || a.name;
     if (!RENAME[a.name] && inSvg && !n.startsWith('data-') && !n.startsWith('aria-')) n = camel(n);
     if (n === 'xmlns:xlink') continue;
+    // an empty src/srcset/poster makes the browser request the page itself (React logs an error for each); an
+    // empty href means "this page", which # also does without the request
+    if (['src', 'srcSet', 'poster'].includes(n) && a.value === '') continue;
+    if (n === 'href' && a.value === '') { parts.push('href="#"'); continue; }
     const v = ['src', 'href', 'poster', 'srcSet'].includes(n) ? fixUrl(a.value) : a.value;
     // React types these as numbers: tabIndex="0" fails type-checking, tabIndex={0} is the same attribute
     if (['tabIndex', 'colSpan', 'rowSpan', 'maxLength', 'minLength', 'span', 'size', 'cols', 'rows'].includes(n) && /^-?\d+$/.test(v)) { parts.push(`${n}={${v}}`); continue; }
@@ -126,6 +135,12 @@ function toJsx(node, depth, inSvg = false, inPre = false) {
   const svg = inSvg || tag === 'svg';
   const pre = inPre || keepsWhitespace(node);
   const attrs = jsxAttrs(node, svg);
+  // a host with a declarative shadow root (<template shadowrootmode>): the browser's HTML parser builds the shadow
+  // root from the streamed markup, React must not touch the inside, so the host's content is emitted as raw HTML
+  if ((node.childNodes || []).some((c) => c.tagName === 'template' && (c.attrs || []).some((a) => a.name === 'shadowrootmode'))) {
+    const inner = serialize(node).replace(/url\((['"]?)(?:\.\.\/)?assets\//g, (m, q) => `url(${q}/assets/`).replace(/(src|href|poster)="assets\//g, '$1="/assets/');
+    return `${pad}<${tag}${attrs} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: ${JSON.stringify(inner)} }} />`;
+  }
   const kids = (node.childNodes || []).map((c) => toJsx(c, depth + 1, svg, pre)).filter((s) => s !== '');
   if (VOID.has(tag) || !kids.length) return `${pad}<${tag}${attrs} />`;
   const inline = kids.every((k) => !k.startsWith('  ')) && kids.join('').length < 120;
@@ -151,10 +166,6 @@ await fs.rm(path.join(out, 'app'), { recursive: true, force: true });
 await fs.rm(path.join(out, 'components', 'site'), { recursive: true, force: true });
 for (const d of ['app', 'components/site', 'lib', 'styles', 'public']) await fs.mkdir(path.join(out, d), { recursive: true });
 
-// Two kinds of clone. A hand-built one (styles.css + one script.js using GSAP/Lenis/Swiper/three) is converted
-// section by section below; a seeded one (trueclone seed: the original's own stylesheets, trueclone's players and
-// a script.js) goes through seededApp(), further down.
-const seeded = await fs.stat(path.join(cloneDir, 'css')).then(() => true, () => false);
 let components = [];
 if (seeded) components = await seededApp();
 else {
@@ -292,6 +303,22 @@ await fs.rm(path.join(out, 'public', 'assets'), { recursive: true, force: true }
 await fs.cp(path.join(cloneDir, 'assets'), path.join(out, 'public', 'assets'), { recursive: true });
 for (const f of ['DESIGN.md', 'design-tokens.json']) await fs.copyFile(path.join(root, f), path.join(out, f)).catch(() => {});
 await fs.writeFile(path.join(out, 'package.json'), JSON.stringify(PKG, null, 2) + '\n');
+// custom elements (<code-island>, <swiper-container>) have no JSX type: declared here, or `next build` fails
+const custom = new Set();
+(function walk(n) { if (n.tagName && n.tagName.includes('-')) custom.add(n.tagName); for (const c of n.childNodes || []) walk(c); })(body);
+if (custom.size) {
+  await fs.writeFile(path.join(out, 'custom-elements.d.ts'), `// Generated by scripts/next.mjs: the page's custom elements, typed for JSX.
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+${[...custom].map((t) => `      ${JSON.stringify(t)}: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & Record<string, unknown>;`).join('\n')}
+    }
+  }
+}
+`);
+} else await fs.rm(path.join(out, 'custom-elements.d.ts'), { force: true });
 await fs.writeFile(path.join(out, 'postcss.config.mjs'), "export default { plugins: { '@tailwindcss/postcss': {} } };\n");
 await fs.writeFile(path.join(out, 'next.config.mjs'), `import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -335,7 +362,11 @@ async function seededApp() {
   await fs.mkdir(path.join(out, 'styles', 'site'), { recursive: true });
   const imports = [];
   let inline = 0, usesTailwind = false;
-  for (const e of els(head)) {
+  // <style> blocks (and stylesheet links) can sit inside <body> too, anywhere in the tree: same cascade, so they
+  // follow the head's in document order
+  const bodyStyles = [];
+  (function walk(n) { for (const c of n.childNodes || []) { if (c.tagName === 'style' || c.tagName === 'link') bodyStyles.push(c); else walk(c); } })(body);
+  for (const e of [...els(head), ...bodyStyles]) {
     const a = attrsOf(e);
     let css = null, file = null;
     if (e.tagName === 'link' && a.rel === 'stylesheet' && a.href && !/^(https?:)?\/\//.test(a.href)) {
@@ -424,30 +455,60 @@ async function seededApp() {
   const scripts = els(body).filter((e) => e.tagName === 'script');
   const dataBlocks = scripts.filter((s) => /json/.test(attrsOf(s).type || '') && attrsOf(s).id)
     .map((s) => `      <script type="${attrsOf(s).type}" id="${attrsOf(s).id}" dangerouslySetInnerHTML={{ __html: ${JSON.stringify((s.childNodes || []).map((c) => c.value || '').join(''))} }} />`);
-  const srcs = scripts.map((s) => attrsOf(s).src).filter((s) => s && !/^(https?:)?\/\//.test(s));
-  for (const s of srcs) await fs.copyFile(path.join(cloneDir, s), path.join(out, 'public', path.basename(s)));
+  // the scripts, copied to public/ at their own relative paths (a script that loads a sibling file keeps working),
+  // with the files their import statements and import() calls name; a module script stays a module
+  // in document order: files (copied) and inline scripts (run as written); data blocks are rendered in the page
+  const scriptTags = scripts.map((s) => ({ ...attrsOf(s), code: (s.childNodes || []).map((c) => c.value || '').join('') }))
+    .filter((a) => !/json/.test(a.type || '') && (a.src ? !/^(https?:)?\/\//.test(a.src) : a.code.trim()));
+  const copied = new Set();
+  const copyScript = async (rel, depth = 0) => {
+    const clean = rel.split(/[?#]/)[0].replace(/^\.\//, '');
+    if (copied.has(clean) || depth > 4) return;
+    copied.add(clean);
+    const from = path.join(cloneDir, clean);
+    const text = await fs.readFile(from, 'utf8').catch(() => null);
+    if (text === null) { console.warn(`WARNING script referenced but not in clone/: ${clean}`); return; }
+    await fs.mkdir(path.dirname(path.join(out, 'public', clean)), { recursive: true });
+    await fs.copyFile(from, path.join(out, 'public', clean));
+    for (const m of text.matchAll(/(?:^|[^\w$.])import\s*(?:[\w$*{},\s]+from\s*)?['"]([^'"]+)['"]|import\(\s*['"]([^'"]+)['"]\s*\)/g)) {
+      const spec = m[1] || m[2];
+      if (!spec || /^(https?:)?\/\//.test(spec) || !/^[./]/.test(spec)) continue;
+      await copyScript(path.posix.join(path.posix.dirname(clean), spec), depth + 1);
+    }
+    // a script file named in a string (new URL('vendor/three.module.min.js', here), a worker, a lazy loader)
+    for (const m of text.matchAll(/['"]([\w./-]+\.m?js)['"]/g)) {
+      const rel = path.posix.join(path.posix.dirname(clean), m[1].replace(/^\//, ''));
+      if (!copied.has(rel) && await fs.stat(path.join(cloneDir, rel)).then(() => true, () => false)) await copyScript(rel, depth + 1);
+    }
+  };
+  for (const a of scriptTags) if (a.src) await copyScript(a.src);
+  const scriptList = scriptTags.map((a) => ({ ...(a.src ? { src: '/' + a.src.split(/[?#]/)[0].replace(/^\.\//, '') } : { code: a.code }), ...(a.type === 'module' ? { type: 'module' } : {}) }));
   await fs.writeFile(path.join(out, 'components', 'site', 'SiteScripts.tsx'), `'use client';
-// Generated by scripts/next.mjs: runs the clone's scripts (trueclone's reveal and widget players, script.js) in
-// order, once, after hydration, exactly as the static clone does after parsing.
-import { useEffect } from 'react';
+// Generated by scripts/next.mjs: runs the clone's scripts (trueclone's players, inline scripts, script.js) in order,
+// once, the moment hydration is done. The HTML clone runs them as deferred scripts right after parsing; a component
+// app cannot (hydration would re-render what they change), so the files are preloaded from the first byte (see
+// layout.tsx), inserted together with async=false (ordered execution, parallel fetch), and the boot contract
+// (<html class="tc-boot">, seed) keeps script-built regions hidden until the last one has run.
+import { useLayoutEffect } from 'react';
 
-const SCRIPTS = ${JSON.stringify(srcs.map((s) => '/' + path.basename(s)))};
+const SCRIPTS: { src?: string; code?: string; type?: string }[] = ${JSON.stringify(scriptList)};
 
 export default function SiteScripts() {
-  useEffect(() => {
+  useLayoutEffect(() => {
     const w = window as unknown as Record<string, unknown>;
     if (w.__siteScripts) return; // React strict mode runs effects twice in dev
     w.__siteScripts = true;
-    (async () => {
-      for (const src of SCRIPTS) {
-        await new Promise((resolve) => {
-          const s = document.createElement('script');
-          s.src = src;
-          s.onload = s.onerror = () => resolve(null);
-          document.body.appendChild(s);
-        });
-      }
-    })();
+    w.__tcInjected = true;
+    let last: HTMLScriptElement | null = null;
+    for (const { src, code, type } of SCRIPTS) {
+      const s = document.createElement('script');
+      if (type) s.type = type;
+      if (src) { s.src = src; s.async = false; } else { s.textContent = code || ''; }
+      document.body.appendChild(s);
+      if (src) last = s;
+    }
+    const boot = () => { const b = (w as { tcBoot?: { release: () => void } }).tcBoot; if (b) b.release(); else requestAnimationFrame(() => document.documentElement.classList.remove('tc-boot')); };
+    if (last) last.addEventListener('load', boot), last.addEventListener('error', boot); else boot();
   }, []);
   return null;
 }
@@ -471,6 +532,10 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html${htmlAttrs} suppressHydrationWarning>
+      <head>
+        {/* the clone's scripts start downloading with the page; SiteScripts runs them the moment hydration is done */}
+${scriptList.filter((s) => s.src).map((s) => `        <link rel="${s.type === 'module' ? 'modulepreload' : 'preload'}" href=${JSON.stringify(s.src)}${s.type === 'module' ? '' : ' as="script"'} />`).join('\n')}
+      </head>
       <body${bodyAttrs} suppressHydrationWarning>{children}</body>
     </html>
   );

package/scripts/owned.mjs

@@ -0,0 +1,66 @@
+// Which regions of the clone does script.js own? The seed carries the original's markup in its post-script state; a
+// script that rebuilds a region at boot (a hero grid, a card layout it places, a slider it wraps) replaces that
+// markup. This loads the clone twice, with its scripts blocked and with them running, and lists the top-level sections
+// whose structure the scripts changed: those are the agent's, and the seed's recorded players must not run there
+// (hand them over, see SKILL.md). Runs again after each build round.
+// usage: node scripts/owned.mjs <name> [--viewport desktop]
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { VIEWPORTS, parseArgs, openBrowser, newPage, serve, settle, sectionsOf } from './lib.mjs';
+
+const { pos, flags } = parseArgs(process.argv.slice(2));
+const [name] = pos;
+if (!name) {
+  console.error('usage: trueclone owned <name> [--viewport desktop]');
+  process.exit(1);
+}
+const root = path.resolve('sites', name);
+const vp = VIEWPORTS.find((v) => v.name === (flags.viewport || 'desktop'));
+const server = await serve(path.join(root, 'clone'));
+const browser = await openBrowser(flags.cdp);
+
+// a structural signature per top-level section: element count, tag sequence hash, inline-style count
+const signatures = () => {
+  const hash = (s) => { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return (h >>> 0).toString(16); };
+  const unwrap = (el) => { let n = el; while (n.children.length === 1 && !n.matches('header,footer,main,section,nav,article,aside')) n = n.children[0]; return n; };
+  const tops = [...unwrap(document.body).children].filter((el) => !['SCRIPT', 'STYLE', 'TEMPLATE', 'LINK', 'NOSCRIPT'].includes(el.tagName));
+  return tops.map((el) => {
+    const r = el.getBoundingClientRect();
+    const all = el.getElementsByTagName('*');
+    return { label: `${el.tagName.toLowerCase()}${el.id ? `#${el.id}` : ''}${el.classList.length ? `.${[...el.classList].slice(0, 2).join('.')}` : ''}`, y: Math.round(r.top + scrollY), elements: all.length, tags: hash([...all].map((e) => e.tagName).join(',')), styled: [...all].filter((e) => e.hasAttribute('style')).length, shadow: [...all].some((e) => e.shadowRoot) };
+  });
+};
+let before, after;
+try {
+  const url = `${server.url}index.html`;
+  const a = await newPage(browser, vp);
+  await a.page.route(/\.m?js(\?|$)/, (r) => r.abort());
+  await a.page.goto(url, { waitUntil: 'load', timeout: 60000 });
+  await a.page.waitForTimeout(500);
+  before = await a.page.evaluate(signatures);
+  await a.context.close();
+  const b = await newPage(browser, vp, { reducedMotion: 'no-preference' });
+  await b.page.goto(url, { waitUntil: 'load', timeout: 60000 });
+  await settle(b.page);
+  after = await b.page.evaluate(signatures);
+  await b.context.close();
+} finally {
+  if (!flags.cdp) await browser.close();
+  server.close();
+}
+const rows = before.map((s, i) => {
+  const t = after[i] || {};
+  const changed = !t.label ? 'removed' : t.elements !== s.elements || t.tags !== s.tags ? `rebuilt (${s.elements} → ${t.elements} elements)` : t.styled !== s.styled ? `restyled (${s.styled} → ${t.styled} inline styles)` : null;
+  return { section: s.label, y: s.y, before: s.elements, after: t.elements ?? null, changed };
+});
+for (const t of after.slice(before.length)) rows.push({ section: t.label, y: t.y, before: 0, after: t.elements, changed: 'added by a script' });
+await fs.mkdir(path.join(root, 'compare'), { recursive: true });
+await fs.writeFile(path.join(root, 'compare', 'owned.json'), JSON.stringify({ at: new Date().toISOString(), viewport: vp.name, rows }, null, 2));
+// structure changed: the script owns the section; only inline styles changed: it animates inside the seed's markup
+const owned = rows.filter((r) => r.changed && !r.changed.startsWith('restyled'));
+const animated = rows.filter((r) => r.changed?.startsWith('restyled'));
+console.log(owned.length ? `script.js rebuilds ${owned.length} section(s) at ${vp.name}:` : `script.js rebuilds no section at ${vp.name}: the seed's markup and players stand as they are`);
+for (const r of owned) console.log(`  ${r.section} (y ${r.y}): ${r.changed}`);
+if (owned.length) console.log('hand these over to script.js (remove the data-tc-* marks there) and hide them until boot if the original hides them too (seed --hide-until-boot).');
+if (animated.length) console.log(`animated inside the seed's markup (inline styles only): ${animated.map((r) => r.section).join(', ')}`);
+console.log(`-> ${path.relative(process.cwd(), path.join(root, 'compare', 'owned.json'))}`);

package/scripts/report.mjs

@@ -22,8 +22,8 @@ if (!meta) {
 }
 
 // Targets a clone has to meet (the same ones the skill gives the agent).
-const T = { layout: 98, statesGap: 5, motion: 95, detail: 95, hovers: 90 };
-const mark = (ok) => (ok === null ? '–' : ok ? 'pass' : '**below target**');
+const T = { layout: 98, statesGap: 5, motion: 95, detail: 95, hovers: 90, load: 95 };
+const mark = (ok, acceptedNote) => (ok === null ? '–' : ok ? 'pass' : acceptedNote ? `accepted (${acceptedNote})` : '**below target**');
 const pct = (v) => (v === undefined || v === null ? '–' : `${v}%`);
 const VPS = ['desktop', 'tablet', 'mobile'];
 
@@ -34,35 +34,65 @@ const curves = Object.fromEntries(await Promise.all(VPS.map(async (v) => [v, awa
 const interact = await read('compare/interact/report.json');
 const hovers = await read('compare/hovers.desktop.json');
 const detail = await read('compare/detail.json');
+const load = await read('compare/load.json');
+const times = await read('compare/score-times.json');
+const drift = await read('compare/drift.json');
 const motionInv = await read('reference/motion.desktop.json');
+// notes.md: the agent's "Accepted differences" and "Findings" come into the report; an accepted entry that names a
+// check (and optionally a width) turns that check's "below target" into "accepted"
+const notes = await fs.readFile(path.join(root, 'notes.md'), 'utf8').catch(() => '');
+const notesSection = (title) => {
+  const m = new RegExp(`^## ${title}[^\\n]*\\n([\\s\\S]*?)(?=^## |(?![\\s\\S]))`, 'm').exec(notes);
+  return m ? m[1].replace(/<!--[\s\S]*?-->/g, '').split('\n').map((l) => l.trim()).filter((l) => /^[-*]\s+\S/.test(l)).map((l) => l.replace(/^[-*]\s+/, '')) : [];
+};
+const accepted = notesSection('Accepted differences');
+const findings = notesSection('Findings');
+const acceptedFor = (check, vp) => accepted.filter((a) => new RegExp(`\\b${check}\\b`, 'i').test(a) && (!vp || new RegExp(`\\b${vp}\\b`, 'i').test(a) || !/\b(desktop|tablet|mobile)\b/i.test(a)));
 
 const byVp = (rep, key = 'match') => Object.fromEntries((rep?.viewports || []).map((v) => [v.viewport, v[key] ?? v.score]));
 const L = byVp(layout), V = byVp(visual), S = byVp(states), D = byVp(detail, 'score');
 const C = Object.fromEntries(VPS.map((v) => [v, curves[v]?.score]));
 
 const rows = [];
-const row = (check, values, ok, note = '') => rows.push(`| ${check} | ${VPS.map((v) => pct(values[v])).join(' | ')} | ${mark(ok)} | ${note} |`);
+// `test` is a per-width predicate (value, width) => boolean, or a ready boolean/null for single-value checks
+const row = (check, values, test, note = '') => {
+  const ok = typeof test === 'function' ? all(values, test) : test;
+  // below target, but every failing width has an accepted entry in notes.md: the decision is recorded, not hidden
+  const key = check.split(' ')[0].toLowerCase();
+  const failing = typeof test === 'function' ? present(values).filter((v) => !test(values[v], v)) : ok === false ? present(values) : [];
+  const covered = failing.length && failing.every((v) => acceptedFor(key, v).length);
+  const stale = drift?.stale && ['detail', 'hovers', 'motion', 'load', 'interactions'].includes(key) ? ' **stale capture**' : '';
+  rows.push(`| ${check} | ${VPS.map((v) => pct(values[v])).join(' | ')} | ${mark(ok, covered ? acceptedFor(key)[0].slice(0, 60) : null)}${stale} | ${note} |`);
+};
 const present = (vals) => VPS.filter((v) => vals[v] !== undefined && vals[v] !== null);
 const all = (vals, test) => (present(vals).length ? present(vals).every((v) => test(vals[v], v)) : null);
-row(`Layout (structure)`, L, all(L, (x) => x >= T.layout), `target ≥ ${T.layout}%; text and media masked`);
-if (meta.mode === 'exact') row('Layout (real pixels)', V, all(V, (x) => x >= T.layout), 'exact mode: same text and media');
-row('Scroll states', S, all(S, (x, v) => L[v] === undefined || x >= L[v] - T.statesGap), `within ${T.statesGap} points of layout`);
-row('Motion curves', C, all(C, (x) => x >= T.motion), present(C).length ? `target ≥ ${T.motion}%` : 'no motion map (no scroll or time animation to score)');
-row('Detail (styles)', D, all(D, (x) => x >= T.detail), `target ≥ ${T.detail}%; font, size, weight, line height, colour, boxes`);
+row(`Layout (structure)`, L, (x) => x >= T.layout, `target ≥ ${T.layout}%; text and media masked`);
+if (meta.mode === 'exact') row('Layout (real pixels)', V, (x) => x >= T.layout, 'exact mode: same text and media');
+row('Scroll states', S, (x, v) => L[v] === undefined || x >= L[v] - T.statesGap, `within ${T.statesGap} points of layout`);
+row('Motion curves', C, (x) => x >= T.motion, present(C).length ? `target ≥ ${T.motion}%` : 'no motion map (no scroll or time animation to score)');
+row('Detail (styles)', D, (x) => x >= T.detail, `target ≥ ${T.detail}%; font, size, weight, line height, colour, boxes`);
 row('Hovers', { desktop: hovers?.score }, hovers ? hovers.score >= T.hovers : null, `target ≥ ${T.hovers}% of the reference hover effects`);
+const LD = byVp(load, 'score');
+const tts = (side) => VPS.map((v) => load?.viewports.find((x) => x.viewport === v)).filter(Boolean).map((x) => (x[side]?.settledAt === null ? '>4000' : x[side]?.settledAt)).filter((x) => x !== undefined);
+row('Load sequence', LD, (x) => x >= T.load, present(LD).length ? `target ≥ ${T.load}%; how settled each side is at 0.25 to 4 s, cold cache, same network (settled at: reference ${tts('ref').map((x) => `${x}ms`).join(' / ') || '–'}, clone ${tts('clone').map((x) => `${x}ms`).join(' / ') || '–'})` : 'not measured (trueclone load <name>)');
 const scenarios = interact?.scenarios || [];
 const failed = scenarios.filter((s) => s.expect && !s.expect.pass);
 row('Interactions', { desktop: scenarios.length ? +(scenarios.reduce((n, s) => n + (s.score || 0), 0) / scenarios.length).toFixed(2) : undefined }, scenarios.length ? failed.length === 0 : null,
   scenarios.length ? `${scenarios.length - failed.length}/${scenarios.length} scenarios change something on both sides` : 'no interactions.json');
 
 const failing = rows.filter((r) => r.includes('below target')).length;
-const verdict = failing ? `${failing} check(s) below target` : 'every scored check meets its target';
+const acceptedCount = rows.filter((r) => r.includes('| accepted (')).length;
+const verdict = (failing ? `${failing} check(s) below target` : 'every scored check meets its target') + (acceptedCount ? ` (${acceptedCount} accepted with a reason in notes.md)` : '') + (drift?.stale ? '; the live site has changed since the capture: re-capture before trusting the live-measured checks' : '');
 
 // Weakest spots, to fix first.
 const weak = [];
 for (const v of VPS) for (const s of (layout?.viewports.find((x) => x.viewport === v)?.worstSections || []).slice(0, 2)) if (s.match < 99) weak.push(`- Layout ${v}: section "${String(s.label).slice(0, 50)}" at y ${s.y} is ${s.match}%`);
 for (const v of VPS) for (const e of (curves[v]?.entries || []).filter((x) => x.score < 90).slice(0, 3)) weak.push(`- Motion ${v}: "${e.name}" ${e.score}%${e.note ? ` (${e.note})` : ''}`);
 for (const s of failed) weak.push(`- Interaction "${s.name}": the expected change happened on ${s.expect.ref ? 'the reference' : 'neither side'}${s.expect.clone ? '' : ', not on the clone'}`);
+for (const v of (load?.viewports || []).filter((x) => x.score < T.load)) {
+  const worst = Object.entries(v.gap || {}).sort((a, b) => b[1] - a[1])[0];
+  if (worst) weak.push(`- Load ${v.viewport}: at ${worst[0]}ms the clone is ${v.clone.curve[worst[0]]}% settled, the reference ${v.ref.curve[worst[0]]}% (settled at ${v.clone.settledAt ?? '>4000'}ms vs ${v.ref.settledAt ?? '>4000'}ms)`);
+}
 for (const v of detail?.viewports || []) {
   const groups = new Map();
   for (const it of v.issues || []) { const k = it.props[0].split(' ').slice(0, 1)[0]; groups.set(k, (groups.get(k) || 0) + 1); }
@@ -92,6 +122,8 @@ const md = `# trueclone report: ${name}
 | Captured | ${meta.capturedAt} |
 | Scored | ${layout?.at || '–'}${layout?.clone && !/127\.0\.0\.1:\d+\/$/.test(layout.clone) ? ` against ${layout.clone}` : ''} |
 | Verdict | **${verdict}** |
+${times ? `| Scoring time | ${times.totalMin} min (${times.kind}${times.only ? `, only ${times.only.join(',')}` : ''}): ${Object.entries(times.steps).filter(([, s]) => s.seconds).map(([k, s]) => `${k} ${s.seconds}s`).join(', ')}${Object.values(times.steps).some((s) => /kept/.test(s.status)) ? '; unchanged checks kept from their last run' : ''} |` : ''}
+${(detail?.viewports || []).some((v) => v.unstable) || hovers?.unstable || (load?.viewports || []).some((v) => v.unstable) ? `| Not scored | ${(detail?.viewports || []).filter((v) => v.unstable).map((v) => `${v.unstable} detail probe${v.unstable > 1 ? 's' : ''} (${v.viewport})`).concat(hovers?.unstable ? [`${hovers.unstable} hover${hovers.unstable > 1 ? 's' : ''}`] : [], (load?.viewports || []).filter((v) => v.unstable).map((v) => `load ${v.viewport} (±${v.noise} between two runs)`)).join(', ')}: unstable on the reference or the clone itself (random motion, timing), excluded from the scores above |` : ''}
 
 ## Scores
 
@@ -99,8 +131,8 @@ const md = `# trueclone report: ${name}
 |---|---|---|---|---|---|
 ${rows.join('\n')}
 
-${weak.length ? `## Fix first\n\n${weak.join('\n')}\n` : '## Fix first\n\nNothing below 99% on layout, 90% on motion or failing.\n'}
-## Motion found on the reference
+${drift?.stale ? `## Stale capture\n\nThe live page differs from the capture of ${meta.capturedAt}: ${drift.viewports.filter((v) => v.stale).map((v) => `${v.viewport} ${v.livePageHeight}px tall vs ${v.capturedPageHeight}px captured, ${v.liveSections} vs ${v.capturedSections} sections`).join('; ')}. Layout and states score against the captured screenshots; detail, hovers, motion, interactions and load measure the live page and are marked stale above. Re-capture (\`trueclone capture\`, then \`states\`, \`reveals\`, \`seed --force\`) before reading them.\n\n` : ''}${accepted.length ? `## Accepted differences\n\nRecorded in notes.md with a reason; a check below target that is covered here is marked "accepted" in the table.\n\n${accepted.map((a) => `- ${a}`).join('\n')}\n\n` : ''}${weak.length ? `## Fix first\n\n${weak.join('\n')}\n` : '## Fix first\n\nNothing below 99% on layout, 90% on motion or failing.\n'}
+${findings.length ? `## Findings (tool defects met on this site)\n\n${findings.map((f) => `- ${f}`).join('\n')}\n\n` : ''}## Motion found on the reference
 
 ${motionInv ? `Libraries: ${libs.length ? libs.join(', ') : 'none (no GSAP, Lenis, Swiper or similar)'}. ScrollTriggers: ${motionInv.triggers?.length ?? 0}. Tweens created while scrolling: ${motionInv.onScroll?.length ?? 0}. CSS animations: ${(motionInv.css || []).length}.` : 'Not inventoried yet (trueclone motion <name>).'}