@trueclone/cli 0.2.0 → 0.4.0-rc.1

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,27 @@ 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
+// Types for what the page uses that React's typings don't know: custom elements (<code-island>), and HTML attributes
+// newer than the typings or outside them (command, commandfor, popovertarget, a framework's own): an HTML attribute
+// is valid markup whether React lists it or not, so every element accepts any attribute here.
+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);
+await fs.rm(path.join(out, 'custom-elements.d.ts'), { force: true });
+await fs.writeFile(path.join(out, 'html-types.d.ts'), `// Generated by scripts/next.mjs: the page's markup, typed for JSX as the browser accepts it.
+import type { DetailedHTMLProps, HTMLAttributes as ReactHTMLAttributes } from 'react';
+
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    [attribute: string]: unknown;
+  }
+${custom.size ? `  namespace JSX {
+    interface IntrinsicElements {
+${[...custom].map((t) => `      ${JSON.stringify(t)}: DetailedHTMLProps<ReactHTMLAttributes<HTMLElement>, HTMLElement>;`).join('\n')}
+    }
+  }
+` : ''}}
+`);
 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,12 +367,35 @@ 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);
+  const layerOrder = []; // the site's own cascade layers, in the order its stylesheets first declare them
+  // a stylesheet's relative @import (patches/x.css importing ../tokens.css): the imported file comes along, renamed
+  // into styles/site/, and the @import points at it there
+  const carryImports = async (css, fromDir) => {
+    const out2 = [];
+    for (const m of css.matchAll(/@import\s+(?:url\()?\s*(['"])([^'"]+)\1\s*\)?/g)) {
+      const spec = m[2];
+      if (/^(https?:)?\/\//.test(spec) || spec.startsWith('data:') || !/\.css(\?|$)/i.test(spec)) continue;
+      const src = path.resolve(fromDir, spec.split('?')[0]);
+      const text = await fs.readFile(src, 'utf8').catch(() => null);
+      if (text === null) { console.warn(`WARNING @import ${spec} not found next to its stylesheet`); continue; }
+      const name = `imported-${path.basename(src)}`;
+      await fs.writeFile(path.join(out, 'styles', 'site', name), text.replace(/url\((['"]?)(?:\.\.\/)*assets\//g, (q0, q) => `url(${q}/assets/`));
+      out2.push([m[0], `@import "./${name}"`]);
+    }
+    for (const [a, b] of out2) css = css.split(a).join(b);
+    return css;
+  };
+  for (const e of [...els(head), ...bodyStyles]) {
     const a = attrsOf(e);
-    let css = null, file = null;
+    let css = null, file = null, fromDir = cloneDir;
     if (e.tagName === 'link' && a.rel === 'stylesheet' && a.href && !/^(https?:)?\/\//.test(a.href)) {
       css = await fs.readFile(path.join(cloneDir, a.href), 'utf8').catch(() => null);
       file = path.basename(a.href);
+      fromDir = path.dirname(path.join(cloneDir, a.href));
     } else if (e.tagName === 'style') {
       css = (e.childNodes || []).map((c) => c.value || '').join('');
       file = `inline-${++inline}.css`;
@@ -348,6 +403,8 @@ async function seededApp() {
     if (css === null) continue;
     // stylesheets lived in clone/css/ (assets at ../assets/), inline blocks in the page (assets at assets/)
     css = css.replace(/url\((['"]?)(?:\.\.\/)?assets\//g, (m, q) => `url(${q}/assets/`);
+    css = await carryImports(css, fromDir);
+    for (const m of css.matchAll(/@layer\s+([\w-]+(?:\s*,\s*[\w-]+)*)\s*[;{]/g)) for (const l of m[1].split(',').map((x) => x.trim())) if (!layerOrder.includes(l)) layerOrder.push(l);
     usesTailwind ||= /--tw-|tailwindcss v\d/.test(css);
     await fs.writeFile(path.join(out, 'styles', 'site', file), css);
     imports.push(`import '../styles/site/${file}';`);
@@ -360,7 +417,11 @@ async function seededApp() {
   const tailwind = usesTailwind ? '@import "tailwindcss" source(none);'
     : '/* no preflight: the original was not built with Tailwind and relies on browser defaults */\n@layer theme, base, components, utilities;\n@import "tailwindcss/theme.css" layer(theme);\n@import "tailwindcss/utilities.css" layer(utilities) source(none);';
   const scoped = theme.replace('@import "tailwindcss";', `${tailwind}\n@source "../components/ui";`);
-  await fs.writeFile(path.join(out, 'app', 'globals.css'), scoped);
+  // Cascade layers are ordered by their first declaration anywhere in the page. globals.css loads first, so the site's
+  // own order goes at its very top: otherwise Tailwind's "base" is declared before the site's "reset", and the site's
+  // reset ends up overriding its own base.
+  const layerHead = layerOrder.length ? `/* the original's cascade layer order, declared first (see scripts/next.mjs) */\n@layer ${layerOrder.join(', ')};\n` : '';
+  await fs.writeFile(path.join(out, 'app', 'globals.css'), layerHead + scoped);
   const siteCssImports = imports;
 
   // markup
@@ -424,30 +485,84 @@ 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);
+  // the page's other head links (icons, font preloads, preconnects, a manifest), as in the HTML clone; local files are
+  // served from public/ at the same path
+  const headLinks = [];
+  for (const e of els(head)) {
+    // the seed's own small head scripts (tc-vw keeps --tc-vw at 1% of the layout width): they must run before paint
+    if (e.tagName === 'script' && /^tc-/.test(attrsOf(e).id || '') && !attrsOf(e).src) {
+      headLinks.push(`        <script id=${JSON.stringify(attrsOf(e).id)} dangerouslySetInnerHTML={{ __html: ${JSON.stringify((e.childNodes || []).map((c) => c.value || '').join(''))} }} />`);
+      continue;
+    }
+    if (e.tagName !== 'link') continue;
+    const a = attrsOf(e);
+    const rel = String(a.rel || '').toLowerCase();
+    if (!a.href || rel === 'stylesheet' || !/\b(icon|apple-touch-icon|mask-icon|preload|prefetch|preconnect|dns-prefetch|manifest)\b/.test(rel)) continue;
+    if (/\bpreload\b/.test(rel) && a.as === 'script') continue; // the scripts' own preloads are written below
+    let href = a.href;
+    if (!/^(https?:)?\/\//.test(href) && !href.startsWith('data:')) {
+      const clean = href.replace(/^\.\//, '').split(/[?#]/)[0];
+      const to = path.join(out, 'public', clean);
+      if (!clean.startsWith('assets/')) { await fs.mkdir(path.dirname(to), { recursive: true }); await fs.copyFile(path.join(cloneDir, clean), to).catch(() => {}); }
+      href = `/${clean}`;
+    }
+    const attrs = Object.entries({ ...a, href }).filter(([k]) => !/^on/.test(k)).map(([k, v]) => `${k === 'crossorigin' ? 'crossOrigin' : k === 'hreflang' ? 'hrefLang' : k === 'referrerpolicy' ? 'referrerPolicy' : k === 'fetchpriority' ? 'fetchPriority' : k}=${JSON.stringify(k === 'crossorigin' && v === '' ? 'anonymous' : v)}`);
+    headLinks.push(`        <link ${attrs.join(' ')} />`);
+  }
+  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 +586,11 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html${htmlAttrs} suppressHydrationWarning>
+      <head>
+${headLinks.join('\n')}
+        {/* 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>
   );
@@ -522,11 +642,21 @@ if (flags.verify) {
   for (let i = 0; i < 60; i++) { try { if ((await fetch(url)).ok) break; } catch { /* starting */ } await new Promise((r) => setTimeout(r, 1000)); }
   const lab = path.resolve('.');
   const score = (args) => run('node', args, { cwd: lab });
+  // The app is scored with the same checks, into compare-next/ and REPORT.next.md: the HTML clone's compare/ and
+  // REPORT.md are moved aside first and put back after, so its scores are never overwritten by the app's.
+  const exists = (p) => fs.stat(p).then(() => true, () => false);
+  const keep = [[path.join(root, 'compare'), path.join(root, '.compare-html')], [path.join(root, 'REPORT.md'), path.join(root, '.REPORT-html.md')]];
+  for (const [from, to] of keep) { await fs.rm(to, { recursive: true, force: true }); if (await exists(from)) await fs.rename(from, to); }
   try {
     // same scoring entry point as the HTML clone: time limit per step, summary at the end
     await score([path.join(path.dirname(toPath(import.meta.url)), 'score.mjs'), name, '--url', url, ...(flags.quick ? ['--quick'] : [])]);
   } finally {
     if (process.platform === 'win32') spawn('taskkill', ['/pid', String(server.pid), '/T', '/F']);
     else server.kill();
+    await fs.rm(path.join(root, 'compare-next'), { recursive: true, force: true });
+    if (await exists(path.join(root, 'compare'))) await fs.rename(path.join(root, 'compare'), path.join(root, 'compare-next'));
+    if (await exists(path.join(root, 'REPORT.md'))) await fs.rename(path.join(root, 'REPORT.md'), path.join(root, 'REPORT.next.md'));
+    for (const [from, to] of keep) if (await exists(to)) await fs.rename(to, from);
+    console.log(`Next.js app scores: ${path.relative(process.cwd(), path.join(root, 'REPORT.next.md'))} (details in compare-next/); the HTML clone's REPORT.md is unchanged`);
   }
 }

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

@@ -4,6 +4,7 @@
 //
 // usage: node scripts/report.mjs <name>
 import fs from 'node:fs/promises';
+import fsSync from 'node:fs';
 import path from 'node:path';
 import { parseArgs } from './lib.mjs';
 
@@ -22,10 +23,14 @@ 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, states: 95, canvas: 90, motion: 95, detail: 95, hovers: 90, load: 95 };
+// an accepted difference never covers a value below this, and needs evidence (a file it names that exists)
+const ACCEPT_FLOOR = 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'];
+// the seed sizes, then the held-out sizes (captured and scored, never used to build the clone)
+const VPS = ['desktop', 'tablet', 'mobile', 'laptop', 'wide'];
+const HELD = new Set(['laptop', 'wide']);
 
 const layout = await read('compare/report.mask.json');
 const visual = await read('compare/report.json');
@@ -34,35 +39,89 @@ 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');
+// review: the frames trueclone review wrote, and the verdict the agent gave each in notes.md
+const reviewVerdicts = notesSection('Review');
+const reviewFrames = [];
+for (const size of ['wide', 'laptop', 'desktop', 'tablet', 'mobile']) {
+  const fr = await read(`compare/review/${size}/frames.json`);
+  for (const x of fr?.frames || []) {
+    const v = reviewVerdicts.find((l) => l.startsWith(`${x.id} ${size}:`) || l.startsWith(`${x.id} ${size} :`));
+    reviewFrames.push({ size, id: x.id, pct: x.pct, verdict: v ? v.slice(v.indexOf(':') + 1).trim() : null });
+  }
+}
+const reviewOpen = reviewFrames.filter((x) => !x.verdict || !/^same\b/i.test(x.verdict));
+const findings = notesSection('Findings');
+// an entry needs `evidence: <file>` naming a file in the site folder (a crop, a measurement): a reason without proof
+// is a gap, not a decision
+const hasEvidence = (a) => { const m = /evidence:\s*([^\s;,)]+)/i.exec(a); return Boolean(m && fsSync.existsSync(path.resolve(root, m[1]))); };
+const acceptedFor = (check, vp) => accepted.filter((a) => hasEvidence(a) && new RegExp(`\\b${check}\\b`, 'i').test(a) && (!vp || new RegExp(`\\b${vp}\\b`, 'i').test(a) || !/\b(desktop|tablet|mobile|laptop|wide)\b/i.test(a)));
+const unproven = accepted.filter((a) => !hasEvidence(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) : [];
+  // never below the floor: an accepted difference explains the last few points, not a broken page
+  const covered = failing.length && failing.every((v) => (typeof values[v] !== 'number' || values[v] >= ACCEPT_FLOOR) && 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) => x >= T.states, `target ≥ ${T.states}%`);
+const CV = byVp(states, 'canvas');
+if (present(CV).length) row('Canvases', CV, (x) => x >= T.canvas, `target ≥ ${T.canvas}%; what each scene draws, compared in the scroll-state frames (colours and coverage)`);
+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>)');
+if (reviewFrames.length) {
+  const sizes = [...new Set(reviewFrames.map((x) => x.size))];
+  rows.push(`| Review (by eye) | ${VPS.map((v) => (sizes.includes(v) ? `${reviewFrames.filter((x) => x.size === v && x.verdict && /^same\b/i.test(x.verdict)).length}/${reviewFrames.filter((x) => x.size === v).length}` : '–')).join(' | ')} | ${reviewOpen.length ? '**below target**' : 'pass'} | frames signed off "same" in notes.md (trueclone review) |`);
+} else rows.push(`| Review (by eye) | – | – | – | – | – | **below target** | not done: run trueclone review <name> and give every frame a verdict in notes.md |`);
 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');
+  scenarios.length ? `${scenarios.length - failed.length}/${scenarios.length} scenarios change on both sides and end in the reference's state (≥ 95)` : '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 s of failed) weak.push(s.expect.ref !== null && !(s.expect.ref && s.expect.clone)
+  ? `- Interaction "${s.name}": the expected change happened on ${s.expect.ref ? 'the reference' : 'neither side'}${s.expect.clone ? '' : ', not on the clone'}`
+  : `- Interaction "${s.name}": the clone ends in a different state (${s.score}% like the reference's)`);
+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,15 +151,20 @@ 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.ref?.noise ?? v.noise} between two runs)`)).join(', ')}: unstable on the reference itself (random motion, timing), excluded from the scores above |` : ''}
+${(load?.viewports || []).some((v) => v.cloneUnstable) ? `| Clone loads inconsistently | ${load.viewports.filter((v) => v.cloneUnstable).map((v) => `${v.viewport} (±${v.clone.noise} between two runs)`).join(', ')}: the clone's own load differs from one run to the next; scored by its worse run, since a visitor can get either |` : ''}
 
 ## Scores
 
-| Check | Desktop | Tablet | Mobile | Status | Notes |
-|---|---|---|---|---|---|
+| Check | Desktop 1440 | Tablet 768 | Mobile 390 | Laptop 1280 ° | Wide 1920 ° | Status | Notes |
+|---|---|---|---|---|---|---|---|
 ${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
+° held out: captured and scored, never used to build the clone. A clone right at the seed sizes and wrong here is fitted to those sizes, not a copy of the site.
+${unproven.length ? `\n${unproven.length} accepted difference(s) in notes.md name no evidence file and are not applied: ${unproven.map((a) => `"${a.slice(0, 50)}…"`).join('; ')}\n` : ''}
+${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` : ''}${reviewOpen.length ? `## Review: open frames\n\n${reviewOpen.slice(0, 40).map((x) => `- ${x.id} ${x.size}: ${x.verdict || 'no verdict yet'} (compare/review/${x.size}/${x.id}.png)`).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>).'}
 
@@ -110,5 +174,7 @@ ${motionInv ? `Libraries: ${libs.length ? libs.join(', ') : 'none (no GSAP, Leni
 - **Tracking, analytics and bot protection** are left out on purpose${tracking.length ? `: ${[...new Set(tracking.map((c) => { try { const u = new URL(c.url); return `${u.host}${u.pathname.split('/').slice(0, 3).join('/')}`; } catch { return host(c.url); } }))].join(', ')}` : ''}.
 ${data.length ? `- **Data and API calls** the reference makes (${uniq(data).length}), which the clone does not call; their captured responses are in reference/desktop.har:\n${uniq(data).slice(0, 15).map((c) => `  - \`${c.method} ${c.url.split('?')[0].slice(0, 110)}\` → ${c.status} ${c.type.split(';')[0]}`).join('\n')}` : '- **Data and API calls**: none seen during the capture (static content).'}
 `;
-await fs.writeFile(path.join(root, 'REPORT.md'), md);
+// rows left out of the summary table (an empty optional row) must not leave a blank line that splits it
+const [head, ...rest] = md.split('\n## Scores');
+await fs.writeFile(path.join(root, 'REPORT.md'), [head.replace(/(\|[^\n]*)\n(?:\n)+(?=\|)/g, '$1\n'), ...rest].join('\n## Scores'));
 console.log(`${verdict} -> ${path.relative(process.cwd(), path.join(root, 'REPORT.md'))}`);