@palate/cli 0.0.0-stage → 0.0.2

package/src/loop/states.mjs

@@ -0,0 +1,1547 @@
+// `palate states <route>`: the last 20%. Finds the stateful parts of a screen (lists, tables, card grids, forms,
+// numbers, images, text that comes from data, buttons that act) from the DOM and a quick read of the source,
+// renders the screen in every state that matters without touching the user's code, measures each one, and
+// writes a contact sheet (one row per part, one column per state), findings.json and a brief of the missing
+// states, most important first.
+//   States with data fetched in the browser: Playwright route mocks rewrite the app's own JSON (empty, one
+//   item, 50 items, long strings), hold it (loading, no answer), or fail it (500, network down).
+//   Data written in the code (a static page): DOM-level transforms (long text, many items, one item); the
+//   rest is reported as not simulable, never pretended.
+//   Always: images that fail, 320 wide, 200% zoom with a keyboard-only pass, and forms and buttons pressed
+//   twice, failing, offline and empty, with every request they send answered by palate (never the app's
+//   server, so nothing is written).
+//   Every form also fails a submit by keyboard only (at 1440 and 320, long values): focus, message, announcement,
+//   values kept, on screen, and fixed by keyboard.
+// `palate states <route> --verify` runs it again and puts each earlier finding before | after.
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { contactSheet, HIDE_DEV, scrollThrough, slugOf, stamp, withBrowser } from "../look.mjs";
+import { normalizeRoute } from "../shoot.mjs";
+import { readJson } from "./common.mjs";
+import { slash } from "./craft.mjs";
+import { checkRules, projectOf, routeTags, rulesBlock, STATE_METRICS } from "./rules.mjs";
+import { dataKind, scanSource, whereIs } from "./states-source.mjs";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const script = fs.readFileSync(path.join(here, "..", "page-states.js"), "utf8").trim().replace(/;\s*$/, "");
+const inPage = (page, op, arg = {}) => page.evaluate(`(${script})(${JSON.stringify(op)}, ${JSON.stringify(arg)})`);
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// Requests that carry the app's data (fetch / XHR), not the dev server's own traffic or assets.
+const NOISE = /\/_next\/|__nextjs|webpack-hmr|turbopack|hot-update|\/@vite\/|\/@fs\/|\/@id\/|\/@react-refresh|\/node_modules\/|__vite|\/__palate\/|[?&]_rsc=|sockjs|\/favicon|\.(m?js|jsx|tsx?|css|map|woff2?|ttf|otf|png|jpe?g|gif|svg|webp|avif|ico)(\?|$)/i;
+export const isData = (req) => ["fetch", "xhr"].includes(req.resourceType()) && !NOISE.test(req.url());
+const isRead = (req) => ["GET", "HEAD"].includes(req.method());
+const okJson = { status: 200, contentType: "application/json", body: JSON.stringify({ ok: true }) };
+const LOAD_HOLD = 5000;
+// 500 rows in a dev build (React dev mode renders 2-5x slower than production): past 2s a list needs virtualizing.
+const SLOW_500 = 2000;
+
+export const STATES = {
+  default: "as it is",
+  empty: "empty",
+  loading: "loading",
+  error: "error 500",
+  network: "network down",
+  hang: "no answer",
+  long: "long text",
+  many: "50 items",
+  one: "one item",
+  images: "images fail",
+  narrow: "320 wide",
+  submitting: "submitting (pressed twice)",
+  "submit-error": "submit fails",
+  offline: "offline",
+  "empty-submit": "empty submit",
+  "lost-retry": "answer lost, retried",
+  recover: "keyboard error recovery at 1440",
+  "recover-narrow": "keyboard error recovery at 320",
+  zoom: "200% + keyboard",
+  pressed: "pressed twice",
+};
+
+// ---- the app's JSON, rewritten for a state
+const COUNT_KEY = /^(total|count|totalCount|total_count|length|size|totalItems|total_items|totalResults)$/;
+const KEEP_KEY = /(^|_)(id|uuid|url|src|href|avatar|image|img|photo|picture|icon|logo|slug|key|date|time|created|updated|at|status|type|role|color|colour|token|locale|lang|currency)$|(Id|Url|At|Src)$/i;
+const LONG = {
+  name: "Maximiliana Alexandrova-Featherstonehaugh de la Cruz-Villanueva",
+  company: "International Consolidated Holdings & Subsidiaries Worldwide Ltd.",
+  email: "maximiliana.alexandrova-featherstonehaugh@international-consolidated-holdings.co.uk",
+  word: "Supercalifragilisticexpialidocious-pneumonoultramicroscopicsilicovolcanoconiosis",
+};
+export function shapeData(body, mode, n = 50) {
+  let k = 0;
+  const longer = (v, key) => {
+    if (/^\S+@\S+\.\S+$/.test(v) || /e-?mail/i.test(key)) return LONG.email;
+    if (/^(https?:|\/|data:)|^\d{4}-\d\d-\d\d|^#[0-9a-f]{3,8}$/i.test(v)) return v;
+    if (/company|org|team|workspace|account|title/i.test(key)) return k++ ? LONG.company : `${LONG.company} ${LONG.word}`;
+    if (/name|author|user|owner|label/i.test(key)) return k++ ? LONG.name : `${LONG.name} ${LONG.word}`;
+    return v.length < 80 ? `${v} ${v} ${v}` : v;
+  };
+  const hasArray = (o) => Object.values(o).some(Array.isArray);
+  const uniq = (v, i) => (v && typeof v === "object" && !Array.isArray(v) ? Object.fromEntries(Object.entries(v).map(([key, x]) => [key, /^(id|uuid|key|slug)$|Id$/.test(key) && i ? (typeof x === "number" ? x + i * 100_000 : `${x}-${i}`) : x])) : v);
+  const rec = (v, key, depth) => {
+    if (Array.isArray(v)) {
+      if (mode === "empty") return [];
+      if (mode === "one") return v.length ? [rec(v[0], key, depth + 1)] : v;
+      if (mode === "many") return v.length ? Array.from({ length: n }, (_, i) => uniq(rec(v[i % v.length], key, depth + 1), Math.floor(i / v.length) ? i : 0)) : v;
+      return v.map((x) => rec(x, key, depth + 1));
+    }
+    if (v && typeof v === "object") {
+      if (mode === "empty" && depth === 0 && !hasArray(v)) return {};
+      return Object.fromEntries(Object.entries(v).map(([key2, x]) => [key2, COUNT_KEY.test(key2) && typeof x === "number" ? (mode === "empty" ? 0 : mode === "one" ? 1 : mode === "many" ? n : x) : rec(x, key2, depth + 1)]));
+    }
+    if (mode === "long" && typeof v === "string" && v && !KEEP_KEY.test(key)) return longer(v, key);
+    return v;
+  };
+  return rec(body, "", 0);
+}
+const jsonMock = (fn) => async (r, req) => {
+  if (!isRead(req)) return r.fulfill(okJson);
+  let res;
+  try {
+    res = await r.fetch();
+  } catch {
+    return r.abort();
+  }
+  if (!/json/.test(res.headers()["content-type"] ?? "")) return r.fulfill({ response: res });
+  let body;
+  try {
+    body = await res.json();
+  } catch {
+    return r.fulfill({ response: res });
+  }
+  return r.fulfill({ response: res, json: fn(body) });
+};
+const stringsOf = (v, out = new Set()) => {
+  if (out.size > 400) return out;
+  if (typeof v === "string" && v.length >= 3 && v.length <= 80 && !/^(https?:|\/)/.test(v)) out.add(v);
+  else if (Array.isArray(v)) v.forEach((x) => stringsOf(x, out));
+  else if (v && typeof v === "object") Object.values(v).forEach((x) => stringsOf(x, out));
+  return out;
+};
+
+// ---- one render of the route under a state
+async function visit(browser, o = {}) {
+  const ctx = await browser.newContext({ viewport: { width: o.width ?? 1440, height: o.height ?? 900 }, deviceScaleFactor: o.scale ?? 1, reducedMotion: o.motion ? "no-preference" : "reduce" });
+  await ctx.addInitScript(HIDE_DEV);
+  const log = { data: [], errors: [], held: [] };
+  let first;
+  log.first = new Promise((r) => (first = r));
+  await ctx.route("**/*", async (r) => {
+    const req = r.request();
+    try {
+      if (o.images && req.resourceType() === "image") return await r.fulfill({ status: 404, body: "" });
+      if (!isData(req)) return await r.fallback();
+      const rec = { method: req.method(), url: req.url(), at: Date.now() };
+      log.data.push(rec);
+      first(rec);
+      if (o.data) return await o.data(r, req, log);
+      // Nothing palate does may write to the app's server: every send is answered here.
+      if (!isRead(req)) return await r.fulfill(okJson);
+      return await r.fallback();
+    } catch {
+      // The page closed while the request was held.
+    }
+  });
+  const page = await ctx.newPage();
+  page.on("pageerror", (e) => log.errors.push(String(e.message).slice(0, 200)));
+  const close = async () => {
+    log.held.splice(0).forEach((h) => h());
+    await ctx.close().catch(() => {});
+  };
+  return { ctx, page, log, close };
+}
+async function go(page, url, { wait = "load" } = {}) {
+  for (let k = 0; k < 2; k++) {
+    try {
+      await page.goto(url, { waitUntil: wait, timeout: 60_000 });
+      return true;
+    } catch (e) {
+      if (k) return false;
+    }
+  }
+  return false;
+}
+const settle = async (page, idle = 8000) => {
+  await page.waitForLoadState("networkidle", { timeout: idle }).catch(() => {});
+  await page.waitForTimeout(500);
+};
+
+// Where to crop a part in a state: its own box when it is there (a short form or a number is still its own
+// box, never its neighbours); a list that emptied to a line or vanished is cropped where it was, at its
+// original size, so what replaced it shows.
+export const placeOf = (mc, base, c = null) => {
+  const b = mc?.box;
+  const list = !c || Boolean(c.sig);
+  if (b && b.height >= (list ? 40 : 8)) return b;
+  if (!base) return b ?? mc?.regionBox ?? null;
+  return { x: base.x, y: b?.y ?? base.y, width: base.width, height: list ? Math.max(base.height, 80) : base.height };
+};
+
+async function crop(page, b, file, { pad = 12, maxH = 560 } = {}) {
+  if (!b || b.width < 2 || b.height < 2) return null;
+  const { w, h } = await page.evaluate(() => ({ w: document.documentElement.scrollWidth, h: document.documentElement.scrollHeight })).catch(() => ({ w: 0, h: 0 }));
+  const x = Math.max(0, b.x - pad);
+  const y = Math.max(0, b.y - pad);
+  const clip = { x, y, width: Math.min(w - x, b.width + pad * 2), height: Math.min(h - y, b.height + pad * 2, maxH) };
+  if (clip.width < 8 || clip.height < 8) return null;
+  await page.screenshot({ path: file, fullPage: true, clip }).catch(() => null);
+  return fs.existsSync(file) ? file : null;
+}
+
+// ---- test values: what palate types into a field so the form's own validation lets it through. Several per
+// field, most likely first; each one kept only if it meets the field's pattern, length and range. A phone
+// placeholder ("07700 900123") is the best guess at the format the form wants, so it goes first.
+const PHONES = ["07700 900123", "+44 7700 900123", "(555) 010-0123", "+1 555 010 0123", "5550100123", "0412 345 678", "+61 412 345 678", "030 901820", "+49 30 901820", "01 23 45 67 89", "+33 1 23 45 67 89", "98765 43210", "+91 98765 43210"];
+const POSTCODES = ["SW1A 1AA", "10001", "94103", "75001", "10115", "2000", "M5V 2T6"];
+const day = (n) => new Date(Date.now() + n * 864e5).toISOString().slice(0, 10);
+export function testValues(x) {
+  const r = x.rules ?? {};
+  const k = `${x.name} ${x.label} ${r.autocomplete ?? ""}`;
+  const ph = (r.placeholder ?? "").replace(/^(e\.?g\.?|for example|like|such as)[:,]?\s*/i, "").trim();
+  let list;
+  if (x.type === "email" || /e-?mail/i.test(k)) list = ["test@example.com", "palate.test@example.org"];
+  else if (x.type === "url" || /\burl\b|website/i.test(k)) list = ["https://example.com", "example.com"];
+  else if (x.type === "number" || x.type === "range") {
+    const lo = Number.isFinite(parseFloat(r.min)) ? parseFloat(r.min) : null;
+    const hi = Number.isFinite(parseFloat(r.max)) ? parseFloat(r.max) : null;
+    list = [String(lo !== null && hi !== null ? Math.round((lo + hi) / 2) : lo !== null ? lo + 1 : hi !== null ? Math.min(3, hi) : 3)];
+  } else if (x.type === "tel" || /phone|mobile|\btel\b/i.test(k) || r.inputMode === "tel") list = [/\d{3}/.test(ph) ? ph : null, ...PHONES];
+  else if (/postal|post ?code|\bzip\b/i.test(k)) list = [/\d/.test(ph) ? ph : null, ...POSTCODES];
+  else if (x.type === "password") list = ["palate-Test-2026!", "Palate-test-2026"];
+  else if (x.type === "date") list = [day(60), day(14), day(180)].filter((d) => (!r.min || d >= r.min) && (!r.max || d <= r.max)).concat(r.min && /^\d{4}-\d\d-\d\d$/.test(r.min) ? [r.min] : []);
+  else if (x.type === "time") list = ["10:30", "14:00"];
+  else if (/numeric|decimal/.test(r.inputMode ?? "")) list = [/^\d[\d\s]*$/.test(ph) ? ph : null, "123456", "1234", "12"];
+  else if (x.type === "textarea") list = ["A short test message from palate, to check how the form sends."];
+  else if (/name/i.test(k)) list = ["Test User", "Sam Taylor"];
+  else list = [ph && ph.length <= 40 && !/^(your|enter|type|search|add)\b/i.test(ph) ? ph : null, "Test", "Test value"];
+  list = [...new Set(list.filter(Boolean))];
+  let re = null;
+  try {
+    re = r.pattern ? new RegExp(`^(?:${r.pattern})$`, "v") : null;
+  } catch {}
+  const fits = (v) => (!re || re.test(v)) && (!r.minLength || v.length >= r.minLength) && (!r.maxLength || v.length <= r.maxLength);
+  const ok = list.filter(fits);
+  if (ok.length) return ok;
+  // Nothing fits: stretch the first to the minimum length, or digits only (a pattern of digits).
+  const pad = (v) => (r.minLength && v.length < r.minLength ? `${v} ${"x".repeat(r.minLength)}`.slice(0, Math.max(r.minLength, v.length)) : v);
+  return [...new Set([...list.map(pad), ...list.map((v) => v.replace(/\D/g, "")).filter(Boolean)])].filter(fits).concat(list).slice(0, 6);
+}
+
+async function fill(page, comp, values = comp.values) {
+  for (const [i, f] of comp.fields.entries()) {
+    const loc = page.locator(f.sel).first();
+    const v = values?.[i] ?? testValues(f)[0] ?? "Test";
+    try {
+      if (f.type === "select") await loc.selectOption({ index: 1 }, { timeout: 1500 });
+      else if (f.type === "checkbox" || f.type === "radio") {
+        if (f.required || values?.[i] === true) await loc.check({ timeout: 1500 });
+      } else if (!["file", "color", "hidden"].includes(f.type)) await loc.fill(String(v), { timeout: 1500 });
+    } catch {}
+  }
+}
+
+// Fills the form and sends it until its own validation lets it through: each field the page marks wrong (or
+// names in its message) moves on to its next test value, up to five rounds. Returns the values that got
+// through, or what was tried and the message that stopped it. Writes are answered by palate.
+export async function probeValues(page, f, { writes = () => 0, baseTexts = [] } = {}) {
+  const lists = f.fields.map((x) => (["checkbox", "radio", "select", "file", "color", "hidden"].includes(x.type) ? [null] : testValues(x)));
+  const at = f.fields.map(() => 0);
+  const values = () => f.fields.map((x, i) => (x.type === "checkbox" || x.type === "radio" ? at[i] > 0 || null : lists[i][at[i]] ?? null));
+  const arg = { id: f.id, fields: f.fields.map((x) => x.sel), baseTexts };
+  const tried = [];
+  let last = null;
+  for (let round = 0; round < 5; round++) {
+    await fill(page, f, values());
+    const sent0 = writes();
+    await page.locator(f.submit).first().click({ timeout: 3000 }).catch(() => {});
+    await page.waitForTimeout(800);
+    last = await inPage(page, "validity", arg).catch(() => null);
+    tried.push(values());
+    if (writes() > sent0) return { passed: true, sent: true, values: values(), rounds: round + 1, tried };
+    if (!last) break;
+    // Which fields to change: the ones marked, else the ones the message names, else every typed one.
+    const words = (x) => `${x.name} ${x.label}`.replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z]+/).filter((w) => w.length >= 4);
+    const named = (t) => f.fields.map((x, i) => (t && words(x).some((w) => t.toLowerCase().includes(w)) ? i : -1)).filter((i) => i >= 0);
+    let bad = last.fields.map((x, i) => (x?.invalid || x?.said ? i : -1)).filter((i) => i >= 0);
+    if (!bad.length && last.message) bad = named(last.message);
+    if (!bad.length && !last.message) return { passed: true, sent: false, values: values(), rounds: round + 1, tried };
+    if (!bad.length) bad = f.fields.map((x, i) => i).filter((i) => lists[i].length > 1 || ["checkbox", "radio"].includes(f.fields[i].type));
+    let moved = false;
+    for (const i of bad) {
+      if (["checkbox", "radio"].includes(f.fields[i].type) ? at[i] === 0 : at[i] + 1 < lists[i].length) {
+        at[i]++;
+        moved = true;
+      }
+    }
+    if (!moved) break;
+  }
+  const blocked = (last?.fields ?? []).map((x, i) => (x?.invalid || x?.said ? i : -1)).filter((i) => i >= 0);
+  return { passed: false, sent: false, values: values(), rounds: tried.length, tried, message: last?.message ?? last?.fields?.find((x) => x?.said)?.said ?? null, blocked: blocked.map((i) => ({ label: fieldName(f.fields[i]), tried: [...new Set(tried.map((v) => v[i]).filter((v) => typeof v === "string"))] })) };
+}
+
+// ---- keyboard error recovery: a failed submit, by keyboard only, and what the user can do about it
+// The field left invalid: an email or URL typed malformed (long, realistic), else a required field left empty.
+const NOT_TYPED = new Set(["select", "checkbox", "radio", "file", "color", "hidden", "range", "date", "datetime-local", "time", "month", "week", "submit", "button", "reset", "image"]);
+const BAD = { email: "maximiliana.alexandrova-featherstonehaugh.international-consolidated-holdings.co.uk", url: "international consolidated holdings" };
+export function recoveryPlan(f) {
+  const fl = f.fields ?? [];
+  const typed = (x) => !NOT_TYPED.has(x.type);
+  const mail = (x) => x.type === "email" || (typed(x) && /e-?mail/i.test(`${x.name} ${x.label}`));
+  let i = fl.findIndex(mail);
+  if (i >= 0) return { target: i, how: "malformed", bad: BAD.email };
+  i = fl.findIndex((x) => x.type === "url");
+  if (i >= 0) return { target: i, how: "malformed", bad: BAD.url };
+  i = fl.findIndex((x) => x.required && typed(x));
+  if (i < 0) i = fl.findIndex((x) => x.required);
+  if (i < 0) i = fl.findIndex(typed);
+  return i < 0 ? null : { target: i, how: "empty", bad: "" };
+}
+export function longValue(x) {
+  const k = `${x.name} ${x.label}`;
+  if (x.type === "email" || /e-?mail/i.test(k)) return LONG.email;
+  if (x.type === "url" || /\burl\b|website|link/i.test(k)) return "https://international-consolidated-holdings.co.uk/studios/ceramics/members";
+  if (x.type === "tel" || /phone|\btel\b|mobile/i.test(k)) return "+44 20 7946 0958 ext. 1234";
+  if (x.type === "number") return "12";
+  if (x.type === "password") return "correct-horse-battery-staple-2026";
+  if (/company|organi[sz]ation|\borg\b|team|studio|workspace|business/i.test(k)) return LONG.company;
+  if (x.type === "textarea" || /message|note|comment|description|\bbio\b|about|details/i.test(k)) return `${LONG.name} from ${LONG.company} would like to join the Thursday wheel-throwing class and fire twelve pieces in the next bisque.`;
+  return LONG.name;
+}
+// A field filled the way a keyboard user does it: select all, delete, type; Space for a checkbox, an arrow for a select.
+async function typeInto(page, x, value, { fix = false } = {}) {
+  if (x.type === "checkbox" || x.type === "radio") {
+    if (x.required || fix) await page.keyboard.press("Space");
+    return;
+  }
+  if (x.type === "select") {
+    if (value !== "") await page.keyboard.press("ArrowDown");
+    return;
+  }
+  if (NOT_TYPED.has(x.type)) return;
+  await page.keyboard.press("ControlOrMeta+A");
+  await page.keyboard.press("Backspace");
+  if (value) await page.keyboard.type(value);
+}
+
+// One form, keyboard only: Tab in from the top of the page, fill what the Tab order reaches (long values, one
+// field left invalid), press Enter on the submit, read what happened; then go back to the field by keyboard,
+// fix it, submit again and read again. writes() counts the writes sent so far; shot() crops the failed state.
+export async function keyboardRecovery(page, f, { writes = () => 0, shot = null } = {}) {
+  const plan = recoveryPlan(f);
+  if (!plan) return { skipped: "it has no field palate could leave invalid" };
+  const arg = { id: f.id, fields: f.fields.map((x) => x.sel), submit: f.submit };
+  const where = () => inPage(page, "active", arg).catch(() => ({ body: true, field: -1, submit: false, inForm: false }));
+  const press = async (k) => {
+    await page.keyboard.press(k);
+    await page.waitForTimeout(40);
+    return where();
+  };
+  // Tab in from the top.
+  await page.evaluate(() => {
+    document.activeElement?.blur?.();
+    window.scrollTo(0, 0);
+  }).catch(() => {});
+  let a = { field: -1 };
+  let tabs = 0;
+  while (tabs < 120 && !(a.field >= 0 || a.submit)) (a = await press("Tab")), tabs++;
+  const byScript = !(a.field >= 0 || a.submit);
+  if (byScript) {
+    await page.locator(arg.fields[0]).first().focus({ timeout: 1500 }).catch(() => {});
+    a = await where();
+  }
+  // Fill what the Tab order reaches, until the submit (or out of the form).
+  const typed = new Set();
+  for (let k = 0; k < 40 && !a.submit; k++) {
+    if (a.field >= 0 && !typed.has(a.field)) {
+      typed.add(a.field);
+      await typeInto(page, f.fields[a.field], a.field === plan.target ? plan.bad : longFor(f, a.field));
+    } else if (!a.inForm && typed.size) break;
+    a = await press("Tab");
+  }
+  // Submit: Enter on the submit button; when the Tab order never got there, Enter in the last field typed.
+  const submitBy = async () => {
+    if (a.submit) {
+      await page.keyboard.press("Enter");
+      return "Enter on the submit button";
+    }
+    for (let k = 0; k < 12 && !(a.field >= 0); k++) a = await press("Shift+Tab");
+    await page.keyboard.press("Enter");
+    return "Enter in a field (the Tab order never reached the submit button)";
+  };
+  const armed = await inPage(page, "recover-arm", arg);
+  const sent0 = writes();
+  const how = await submitBy();
+  await page.waitForTimeout(900);
+  const r1 = await inPage(page, "recover-read", arg);
+  const sent1 = writes() - sent0;
+  const out = { plan: { ...plan, label: fieldName(f.fields[plan.target]) }, tabs, byScript, typed: [...typed], how, values: armed.values, r1, sent1 };
+  const anyError = r1.nativeBlocked || r1.fields.some((x) => x?.ariaInvalid) || Boolean(r1.message && /\S/.test(r1.message.text) && !/\b(sent|saved|added|thanks|thank you|success)/i.test(r1.message.text));
+  if (sent1 > 0 && !anyError) return { ...out, accepted: true };
+  if (shot) await shot(r1).catch(() => {});
+  // Fix it by keyboard: back to the field (Shift+Tab, then Tab), a valid value, the submit again.
+  a = await where();
+  for (let k = 0; k < 30 && a.field !== plan.target; k++) a = await press("Shift+Tab");
+  for (let k = 0; k < 60 && a.field !== plan.target; k++) a = await press("Tab");
+  const fixByScript = a.field !== plan.target;
+  if (fixByScript) await page.locator(arg.fields[plan.target]).first().focus({ timeout: 1500 }).catch(() => {});
+  await typeInto(page, f.fields[plan.target], longFor(f, plan.target), { fix: true });
+  a = await where();
+  for (let k = 0; k < 30 && !a.submit; k++) {
+    a = await press("Tab");
+    if (!a.inForm && !a.submit) break;
+  }
+  await inPage(page, "recover-arm", { ...arg, again: true });
+  const sentFix0 = writes();
+  const how2 = await submitBy();
+  await page.waitForTimeout(1200);
+  const r2 = await inPage(page, "recover-read", { ...arg, message: r1.message?.text ?? "" });
+  return { ...out, fix: { byScript: fixByScript, how: how2, r2, sent: writes() - sentFix0 } };
+}
+const fieldName = (x) => (x ? x.label || x.name || x.type : "the field");
+// A long value, unless the field has a format of its own (a phone, a postcode, a number, a pattern): then the
+// value that got past the form's validation, so only the field palate left invalid is wrong.
+const longFor = (f, i) => {
+  const x = f.fields[i];
+  const v = f.values?.[i];
+  const strict = x.type === "tel" || x.type === "number" || x.rules?.pattern || /numeric|decimal|tel/.test(x.rules?.inputMode ?? "") || /phone|mobile|\btel\b|postal|post ?code|\bzip\b/i.test(`${x.name} ${x.label}`);
+  return strict && typeof v === "string" ? v : longValue(x);
+};
+
+// The findings of one recovery run (state "recover" at 1440, "recover-narrow" at 320).
+const VALID_RE = /\b(required|invalid|enter (?:a|an|your|the)|must|please|valid|missing|format|too (?:long|short)|at (?:least|most)|can.?t be (?:blank|empty)|isn.?t|doesn.?t look|not a|looks? like|incorrect)\b|\b(error|wrong|couldn.?t|could not|failed|unable|problem|try again)/i;
+export function recoveryFindings(f, r, state = "recover") {
+  if (!r || r.skipped || r.accepted || !r.r1) return [];
+  const out = [];
+  const width = state === "recover-narrow" ? 320 : 1440;
+  const { r1, plan } = r;
+  const t = plan.target;
+  // The first invalid field, in the form's order: one the page marked, or the one palate left invalid.
+  const firstBad = r1.fields.findIndex((x, i) => x && (x.ariaInvalid || (r1.nativeBlocked && x.nativeInvalid) || i === t));
+  const B = r1.fields[firstBad] ?? {};
+  const bName = fieldName(f.fields[firstBad]);
+  const msg = r1.message?.text ?? "";
+  const did = `Keyboard only at ${width}px, long values typed, ${plan.label} left ${plan.how === "empty" ? "empty" : `malformed ("${plan.bad.slice(0, 40)}…")`}, ${r.how}${r.byScript ? " (Tab from the top never reached the form; palate focused its first field)" : ` after ${r.tabs} Tab press(es) to reach the form`}`;
+  const relates = (s) => VALID_RE.test(s) || (msg && (s.includes(msg.slice(0, 40)) || msg.includes(s)));
+  const ref = (B.described ?? []).find((d) => d.visible && (d.fresh || VALID_RE.test(d.text) || (msg && (d.text.includes(msg) || msg.includes(d.text)))));
+  const native = r1.nativeBlocked && B.nativeInvalid;
+  // 1. Focus goes to the first invalid field, or an error summary that links to it.
+  const onField = r1.active.field === firstBad;
+  const onSummary = Boolean(r1.active.summary && B.id && r1.active.summary.links.includes(B.id));
+  if (!onField && !onSummary) add("focus-not-on-error", "high", `After a failed submit, keyboard focus stays ${r1.active.body ? "nowhere (it falls back to the page)" : `on ${r1.active.what}`}, not on the field to fix (${bName}): a keyboard or screen reader user has to hunt for it.`, `${did}: document.activeElement is ${r1.active.body ? "<body>" : r1.active.what}.`, "On a failed submit, move focus to the first invalid field (`field.focus()`), or to an error summary at the top of the form (`tabIndex={-1}`, role=\"alert\", a heading) with one link per error pointing at its field (`<a href=\"#email\">`).");
+  // 2. The field is marked invalid and its message tied to it.
+  const markedInvalid = B.ariaInvalid || native;
+  if (!native && !(markedInvalid && ref)) {
+    const why = !msg ? "no message says what's wrong" : !B.ariaInvalid ? `the field isn't marked invalid (no aria-invalid="true")${ref ? "" : `, and the message "${msg.slice(0, 60)}" isn't tied to it`}` : `the message "${msg.slice(0, 60)}" isn't tied to it (${(B.described ?? []).length ? `aria-describedby points at ${B.described.map((d) => `#${d.id} "${d.text.slice(0, 30)}"${d.visible ? "" : " (hidden or empty)"}`).join(", ")}` : "no aria-describedby or aria-errormessage"})`;
+    add("error-not-tied", "medium", `After a failed submit, ${bName}: ${why}. A screen reader on the field hears no error.`, `${did}: aria-invalid ${B.ariaInvalid ? '"true"' : "missing"}; described by ${(B.described ?? []).map((d) => `#${d.id}`).join(", ") || "nothing"}; message on screen: ${msg ? `"${msg.slice(0, 60)}"` : "none"}.`, "Set aria-invalid=\"true\" on the field and point aria-describedby (or aria-errormessage) at the message's id: `<input id=\"email\" aria-invalid=\"true\" aria-describedby=\"email-error\">` `<p id=\"email-error\">Enter an email address like name@example.com.</p>`. Show the message as text next to the field (not colour alone), and clear both when the value is fixed.");
+  }
+  // 3. The message is announced: a live region that was there (or role=alert) changed, or focus is on the
+  // field that describes it, or on a summary that is itself an alert or has a heading.
+  const live = (r1.live ?? []).filter((x) => !x.hidden && (x.existed || x.alert) && relates(x.text));
+  const late = (r1.live ?? []).filter((x) => !x.hidden && !x.existed && !x.alert);
+  const announced = live.length || native || (onField && ref) || (onSummary && (r1.active.summary.alert || r1.active.summary.labelled));
+  if (!announced) add("error-not-announced", "high", `The error is never announced: ${msg ? `"${msg.slice(0, 60)}" appears on screen` : "nothing appears"}, but no live region carries it and focus doesn't move to a field that describes it, so a screen reader user hears nothing after pressing ${f.submitText ? `"${f.submitText}"` : "submit"}.`, `${did}: ${late.length ? `a live region was added with the text already in it ("${late[0].text.slice(0, 50)}"), which screen readers often skip` : (r1.live ?? []).length ? `live regions changed but not with the error ("${r1.live[0].text.slice(0, 50)}")` : "no role=alert, role=status or aria-live region changed"}; focus on ${r1.active.body ? "<body>" : r1.active.what}.`, "Keep an empty live region in the page from the start and set the message into it on error (`<p id=\"email-error\" role=\"alert\"></p>`, or aria-live=\"polite\"), or move focus to the invalid field whose aria-describedby points at the message, so it is read with the field.");
+  // 4. Every typed value is still there.
+  const lost = (r.values ?? []).map((v, i) => (v && r1.fields[i] && r1.fields[i].value !== v ? i : -1)).filter((i) => i >= 0);
+  if (lost.length) add("values-lost", "high", `The failed submit throws away what the user typed: ${lost.map((i) => fieldName(f.fields[i])).join(", ")} ${lost.length > 1 ? "are" : "is"} ${lost.every((i) => !r1.fields[i].value) ? "empty" : "changed"} again.`, `${did}: ${lost.slice(0, 3).map((i) => `${fieldName(f.fields[i])} "${r.values[i].slice(0, 30)}…" → "${r1.fields[i].value.slice(0, 30)}"`).join("; ")}.`, "Keep every value on a failed submit: don't reset the form, remount the fields or clear state; clear only after a success. Leave the invalid value in place too, so it can be fixed instead of retyped.");
+  // 5. Field and message on screen without sideways scrolling, the focused field not under a sticky bar.
+  const off = [];
+  if (B.offX) off.push(`${bName} runs past the screen's edge (${B.box.left}–${B.box.right}px of ${r1.width}px)`);
+  if (r1.message?.offX) off.push(`the message "${msg.slice(0, 40)}" runs past the screen's edge (${r1.message.box.left}–${r1.message.box.right}px of ${r1.width}px)`);
+  const covered = onField || onSummary ? r1.active.coveredBy : null;
+  if (covered) off.push(`the focused ${onField ? "field" : "element"} sits under ${covered}`);
+  if (off.length) add("error-offscreen", "medium", `At ${width}px with long text, the error can't be seen without scrolling: ${off.join("; ")}.`, `${did}: page ${r1.overflowX ? `scrolls ${r1.overflowX}px sideways` : "doesn't scroll sideways"}.`, "Let the field and its message wrap inside the screen (`min-width: 0` on flex children, `max-width: 100%` on inputs, `overflow-wrap: anywhere` on the message), and add `scroll-padding-top` (the sticky header's height) on html so a focused field scrolls clear of it.");
+  // 6. Fixed by keyboard and sent again, the error clears.
+  const fx = r.fix?.r2;
+  if (fx) {
+    // Only the target's own error counts: a message about another field (a date palate couldn't type) that
+    // stays is that field's, not a sticky one.
+    const own = firstBad === t || (r1.fields[t]?.described ?? []).some((d) => msg && (d.text.includes(msg.slice(0, 40)) || msg.includes(d.text)));
+    const still = fx.fields[t]?.ariaInvalid || (fx.nativeBlocked && fx.fields[t]?.nativeInvalid) || (fx.stillShown && own);
+    if (still) add("error-sticks", "medium", `After ${plan.label} is fixed and the form sent again by keyboard, the error stays${fx.stillShown && msg ? ` ("${msg.slice(0, 50)}" still on screen)` : ""}${fx.fields[t]?.ariaInvalid ? " and the field is still aria-invalid" : ""}.`, `Fixed with a valid value${r.fix.byScript ? " (palate focused the field: the keyboard couldn't get back to it)" : " by Shift+Tab back to the field"}, ${r.fix.how}; ${r.fix.sent} write(s) sent.`, "Clear the error when the value becomes valid (on input, or on the next submit): remove aria-invalid, empty the message, and let the submit go through.");
+  }
+  return out;
+  function add(check, severity, what, measured, fix) {
+    out.push({ comp: f.id, state, check, severity, what, measured, fix, copy: check === "error-not-tied" && !msg ? `Name the field and the fix: "${formCopy(f).enter}"` : "" });
+  }
+}
+
+// The latest states session for a route, or null.
+export function latestStates(dir, route) {
+  const base = path.join(dir, ".palate", "states", slugOf(route));
+  if (!fs.existsSync(base)) return null;
+  const done = fs.readdirSync(base).filter((s) => fs.existsSync(path.join(base, s, "findings.json"))).sort();
+  return done.length ? path.join(base, done.at(-1)) : null;
+}
+
+// The run a verify compares against: the first run of the current round, i.e. the latest run that wasn't
+// itself a verify. Verifying twice still counts from there ("5 of 7 fixed since the first run").
+export function originalStates(dir, route) {
+  const base = path.join(dir, ".palate", "states", slugOf(route));
+  if (!fs.existsSync(base)) return null;
+  const done = fs.readdirSync(base).filter((s) => fs.existsSync(path.join(base, s, "findings.json"))).sort();
+  const isVerify = (s) => fs.existsSync(path.join(base, s, "verify.md")) || Boolean(readJson(path.join(base, s, "findings.json"), {})?.verifyOf);
+  const first = [...done].reverse().find((s) => !isVerify(s));
+  return first ? path.join(base, first) : done.length ? path.join(base, done[0]) : null;
+}
+
+// The facts the user's rules read (rules.mjs), from the latest states run for a route.
+export function statesFacts(dir, route) {
+  const s = latestStates(dir, route);
+  const f = s ? readJson(path.join(s, "findings.json"), null) : null;
+  return f?.facts ? { ...f.facts, statesRun: path.basename(s) } : null;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+export async function states(dir, rawRoute, { url, verify = false } = {}) {
+  const route = normalizeRoute(rawRoute);
+  const prev = verify ? originalStates(dir, route) : latestStates(dir, route);
+  if (verify && !prev) throw new Error(`No states run for ${route} to verify against. Run: palate states ${route}`);
+  const session = path.join(dir, ".palate", "states", slugOf(route), stamp());
+  const cropsDir = path.join(session, "crops");
+  fs.mkdirSync(cropsDir, { recursive: true });
+  fs.writeFileSync(path.join(dir, ".palate", ".gitignore"), "*\n");
+  const src = scanSource(dir, route);
+  const t0 = Date.now();
+
+  return withBrowser(dir, { url }, async ({ base, browser }) => {
+  const run = await renderAll(base, browser, route, session, cropsDir);
+  const where = {};
+  for (const c of run.components) where[c.id] = sourceOf(dir, c, src, route);
+  // A fetch in a form's own file is its submit (tested as a form), not the data on the screen.
+  const kind = dataKind(run.requests, src, run.components.filter((c) => c.kind === "form" && where[c.id]?.file).map((c) => where[c.id].file));
+  const findings = derive(run, { kind, src, where });
+  const facts = factsOf(run, findings, kind);
+  const sheet = await sheetOf(browser, run, findings, session).catch(() => null);
+  const record = {
+    route,
+    at: new Date().toISOString(),
+    ...(verify ? { verifyOf: path.basename(prev) } : {}),
+    seconds: Math.round((Date.now() - t0) / 1000),
+    data: { kind, requests: run.requests.map((r) => ({ method: r.method, url: r.url, status: r.status, json: r.json })) },
+    source: { entry: src.entry, files: src.files, fetches: src.fetches.slice(0, 12), maps: src.maps.slice(0, 20), loading: src.loading.length, error: src.error.length, empty: src.empty.length, server: src.server, staticArrays: src.staticArrays, conventions: src.conventions, ui: src.ui },
+    components: run.components.map((c) => ({ ...c, where: where[c.id] })),
+    actions: run.actions,
+    tested: (run.results.actions ?? []).map((a) => ({ text: a.text, sent: a.sent })),
+    ran: run.ran,
+    cells: run.cells,
+    timing500: run.results.many500?.comps ?? null,
+    recovery: recoveryOf(run.results),
+    cannot: run.cannot.concat(cannotOf(kind, src, run)),
+    findings,
+    facts,
+    sheet,
+  };
+  fs.writeFileSync(path.join(session, "findings.json"), JSON.stringify(record, null, 1));
+  const brief = briefOf(dir, route, record, session);
+  fs.writeFileSync(path.join(session, "states.md"), brief);
+  if (!verify) return { text: `${brief}\n\n(Brief saved to ${slash(path.join(session, "states.md"))})`, session, sheet, findings };
+  const v = await verifyOf(browser, prev, record, session);
+  return { text: v.text, session, sheet: v.sheet, findings };
+  });
+}
+
+// ---- every render
+async function renderAll(base, browser, route, session, cropsDir) {
+  const full = base + route;
+  // Warm up: the dev server compiles the route and may reload once while it optimises dependencies.
+  {
+    const w = await visit(browser);
+    await go(w.page, full);
+    await settle(w.page, 15_000);
+    await w.close();
+  }
+  // The page as it is: what it fetches (and the JSON), its stateful parts, its text, its measurements.
+  const b = await visit(browser);
+  const responses = [];
+  b.page.on("response", async (res) => {
+    const req = res.request();
+    if (!isData(req)) return;
+    const rec = { method: req.method(), url: req.url(), status: res.status(), json: false };
+    responses.push(rec);
+    try {
+      if (/json/.test(res.headers()["content-type"] ?? "")) {
+        rec.body = await res.json();
+        rec.json = true;
+      }
+    } catch {}
+  });
+  await go(b.page, full);
+  await settle(b.page);
+  await scrollThrough(b.page, { pause: 70 });
+  await settle(b.page, 3000);
+  const dataStrings = [...stringsOf(responses.map((r) => r.body).filter(Boolean))];
+  const found = await inPage(b.page, "find", { dataStrings });
+  // Forms that look the same are tested once.
+  const formSeen = new Map();
+  for (const c of found.components) if (c.kind === "form") (formSeen.has(c.formSig) ? (c.sameAs = formSeen.get(c.formSig)) : formSeen.set(c.formSig, c.id));
+  const components = found.components;
+  const texts = await inPage(b.page, "texts");
+  const baseM = await inPage(b.page, "measure", { components, baseTexts: texts });
+  const pageShot = path.join(session, "page-1440.png");
+  await b.page.screenshot({ path: pageShot, fullPage: true }).catch(() => {});
+  const cells = Object.fromEntries(components.map((c) => [c.id, {}]));
+  const results = { default: baseM };
+  const ran = { default: { note: "" } };
+  const cannot = [];
+  for (const c of components) cells[c.id].default = await crop(b.page, baseM.comps[c.id]?.box ?? c.box, path.join(cropsDir, `${c.id}-default.png`), { pad: c.sig ? 12 : 8 });
+  const baseErrors = b.log.errors.slice();
+  await b.close();
+
+  const requests = responses.filter((r) => r.method === "GET" || r.method === "HEAD");
+  const fetched = requests.length > 0;
+  const data = components.filter((c) => !["form"].includes(c.kind));
+  const collections = components.filter((c) => c.sig && c.kind !== "form");
+
+  // A render under a state: mock, load, mark, optionally transform, measure, crop every part.
+  const stateRun = async (key, o = {}) => {
+    const v = await visit(browser, o);
+    try {
+      await go(v.page, full);
+      await settle(v.page);
+      if (o.scroll !== false) await scrollThrough(v.page, { pause: 60 }).catch(() => {});
+      await inPage(v.page, "mark", { components });
+      let transformed = null;
+      if (o.transform) {
+        transformed = await inPage(v.page, "transform", { mode: o.transform, n: 50, components: o.transformOn ?? collections });
+        await v.page.waitForTimeout(350);
+      }
+      const m = await inPage(v.page, "measure", { components, baseTexts: texts });
+      m.errors = v.log.errors.slice();
+      m.transformed = transformed;
+      m.sent = v.log.data.length;
+      results[key] = m;
+      for (const c of o.only ?? data) cells[c.id][key] = await crop(v.page, placeOf(m.comps[c.id], o.width ? null : baseM.comps[c.id]?.box ?? c.box, c), path.join(cropsDir, `${c.id}-${key}.png`), { pad: c.sig ? 12 : 8 });
+      // The first screen in every state, for findings about the page as a whole.
+      await v.page.evaluate(() => window.scrollTo({ top: 0, behavior: "instant" })).catch(() => {});
+      await v.page.screenshot({ path: path.join(session, `page-${key}.png`) }).catch(() => {});
+      ran[key] = { note: o.note ?? "" };
+      return { v, m };
+    } finally {
+      if (!o.keep) await v.close();
+    }
+  };
+
+  const tasks = [];
+  if (fetched) {
+    tasks.push(async () => {
+      await stateRun("empty", { data: jsonMock((x) => shapeData(x, "empty")), note: "every array the app fetched answered empty" });
+    });
+    tasks.push(() => stateRun("error", { data: (r) => r.fulfill({ status: 500, contentType: "application/json", body: JSON.stringify({ error: "Internal Server Error" }) }), note: "every data request answered 500" }));
+    tasks.push(() => stateRun("network", { data: (r) => r.abort("internetdisconnected"), note: "every data request failed (network down)" }));
+    tasks.push(() => loadingRun("loading"));
+    tasks.push(() => loadingRun("hang"));
+  }
+  const staticNote = fetched ? "" : " (in the DOM: the data is in the code)";
+  tasks.push(() => stateRun("images", { images: true, note: "every image answered 404", only: data.filter((c) => c.kind === "image" || baseM.comps[c.id]?.broken || c.images) }));
+  tasks.push(() => stateRun("narrow", { width: 320, height: 720, note: "320px wide (WCAG reflow)", fold: true, only: components.filter((c) => !c.sameAs) }));
+  tasks.push(() => keyboardRun());
+  for (const f of components.filter((c) => c.kind === "form" && !c.sameAs)) {
+    for (const mode of ["submitting", "submit-error", "offline", "empty-submit"]) tasks.push(() => formRun(f, mode));
+    tasks.push(() => lostRetryRun(f));
+    for (const w of [1440, 320]) tasks.push(() => recoverRun(f, w));
+  }
+  tasks.push(() => actionsRun());
+
+  // Long, many and one: the app's JSON when it fetches; the DOM for parts whose data is in the code.
+  const transformsAfterEmpty = () => {
+    const driven = new Set(fetched ? components.filter((c) => isDriven(c, baseM, results.empty)).map((c) => c.id) : []);
+    const dom = (list) => list.filter((c) => !driven.has(c.id));
+    return [
+      () => stateRun("long", { data: fetched ? jsonMock((x) => shapeData(x, "long")) : undefined, transform: "long", transformOn: dom(data.filter((c) => c.kind !== "image")), note: `names, emails and company names 3× long, one long unbroken word${staticNote}` }),
+      () => stateRun("many", { data: fetched ? jsonMock((x) => shapeData(x, "many", 50)) : undefined, transform: "many", transformOn: dom(collections), note: `every list at 50 items${staticNote}` }),
+      () => stateRun("one", { data: fetched ? jsonMock((x) => shapeData(x, "one")) : undefined, transform: "one", transformOn: dom(collections), note: `every list at one item${staticNote}` }),
+    ];
+  };
+
+  // Loading: data held for 5s; looked at 1.2s and 2.8s after the first request. No answer: held, looked at 8s.
+  async function loadingRun(key) {
+    const hold = key === "loading" ? (r) => sleep(LOAD_HOLD).then(() => r.fallback()) : (r, req, log) => new Promise((res) => log.held.push(res)).then(() => r.abort("timedout"));
+    const v = await visit(browser, { motion: true, data: hold });
+    try {
+      const nav = go(v.page, full, { wait: "domcontentloaded" });
+      const firstReq = await Promise.race([v.log.first, sleep(15_000).then(() => null)]);
+      await nav;
+      if (!firstReq) {
+        ran[key] = { note: "no data request during load" };
+        return;
+      }
+      const at = (ms) => sleep(Math.max(0, firstReq.at + ms - Date.now()));
+      await at(key === "loading" ? 1200 : 8000);
+      await inPage(v.page, "mark", { components }).catch(() => null);
+      const m = await inPage(v.page, "measure", { components, baseTexts: texts }).catch(() => null);
+      if (!m) return;
+      await v.page.screenshot({ path: path.join(session, `page-${key}.png`) }).catch(() => {});
+      const shots = {};
+      for (const c of data) {
+        const bx = placeOf(m.comps[c.id], baseM.comps[c.id]?.box ?? c.box, c);
+        cells[c.id][key] = await crop(v.page, bx, path.join(cropsDir, `${c.id}-${key}.png`));
+        if (key === "loading") shots[c.id] = { bx, a: cells[c.id][key] ? fs.readFileSync(cells[c.id][key]) : null };
+      }
+      if (key === "loading") {
+        await at(2800);
+        m.still = {};
+        for (const c of data) {
+          const s = shots[c.id];
+          if (!s?.a) continue;
+          const f2 = path.join(cropsDir, `${c.id}-loading-2.png`);
+          await crop(v.page, s.bx, f2);
+          m.still[c.id] = fs.existsSync(f2) && fs.readFileSync(f2).equals(s.a);
+        }
+      }
+      m.errors = v.log.errors.slice();
+      results[key] = m;
+      ran[key] = { note: key === "loading" ? `data held ${LOAD_HOLD / 1000}s; seen 1.2s and 2.8s after the first request` : "data never answered; seen 8s in" };
+    } finally {
+      await v.close();
+    }
+  }
+
+  // 500 records: how long each list takes to render them. Only parts whose items follow the records (at 50
+  // records they showed ~50 items; three stat cards stay three), each watched on its own clock: one part that
+  // never grows can't use up another's time.
+  // A slow first time is timed once more and the faster counts: a dev server and a busy machine add noise.
+  async function manyTiming(list) {
+    const parts = timedParts(list, baseM, results.many);
+    if (!parts.length) return;
+    const out = (await timeOnce(parts)) ?? {};
+    for (let k = 2; k <= 3; k++) {
+      const slow = parts.filter((p) => out[p.c.id]?.ms > SLOW_500);
+      if (!slow.length) break;
+      await sleep(1000);
+      const again = (await timeOnce(slow)) ?? {};
+      for (const p of slow) {
+        out[p.c.id].tries = k;
+        if (again[p.c.id]?.ms != null && again[p.c.id].ms < out[p.c.id].ms) out[p.c.id] = { ...again[p.c.id], tries: k };
+      }
+    }
+    results.many500 = { comps: out };
+  }
+  async function timeOnce(parts) {
+    let at = 0;
+    const v = await visit(browser, {
+      data: async (r, req) => {
+        await jsonMock((x) => shapeData(x, "many", 500))(r, req);
+        at = Date.now();
+      },
+    });
+    try {
+      await go(v.page, full, { wait: "domcontentloaded" });
+      // Watched in the page (no round trip per look): when each part reached its count, by the same clock.
+      const seen = await v.page.evaluate(({ sels, targets, limit }) => new Promise((done) => {
+        const out = {};
+        const t0 = Date.now();
+        const count = (s) => {
+          try {
+            return document.querySelector(s)?.children.length ?? 0;
+          } catch {
+            return 0;
+          }
+        };
+        const tick = () => {
+          sels.forEach((s, i) => {
+            if (out[i]) return;
+            const n = count(s);
+            if (n >= targets[i]) out[i] = { at: Date.now(), n };
+          });
+          if (Object.keys(out).length === sels.length || Date.now() - t0 > limit) done({ out, counts: sels.map(count) });
+          else setTimeout(tick, 16);
+        };
+        tick();
+      }), { sels: parts.map((p) => p.c.selector), targets: parts.map((p) => p.target), limit: 16_000 }).catch(() => null);
+      if (!seen) return null;
+      const out = {};
+      parts.forEach((p, i) => {
+        const hit = seen.out[i];
+        out[p.c.id] = hit ? { ms: at ? Math.max(0, hit.at - at) : null, items: hit.n } : { ms: null, items: seen.counts[i], timedOut: 15_000 };
+      });
+      return out;
+    } finally {
+      await v.close();
+    }
+  }
+
+  // 200% zoom on a 1440×900 screen (720×450 CSS px) and a keyboard-only pass: Tab through, and note focus
+  // that lands on something hidden, off screen, or under a sticky bar.
+  async function keyboardRun() {
+    const v = await visit(browser, { width: 720, height: 450, scale: 2 });
+    try {
+      await go(v.page, full);
+      await settle(v.page);
+      const m = await inPage(v.page, "measure", { components, baseTexts: texts });
+      await v.page.screenshot({ path: path.join(session, "page-zoom.png") }).catch(() => {});
+      const stops = [];
+      const issues = [];
+      for (let k = 0; k < 70; k++) {
+        await v.page.keyboard.press("Tab");
+        await v.page.waitForTimeout(70);
+        const f = await inPage(v.page, "focus").catch(() => null);
+        if (!f || f.body) continue;
+        if (f.sel === stops[0] && stops.length > 3) break;
+        if (stops.includes(f.sel)) continue;
+        stops.push(f.sel);
+        if (f.hidden || !f.inView || f.obscured) {
+          if (issues.length < 8 && !issues.some((i) => i.sel === f.sel)) {
+            const file = path.join(cropsDir, `focus-${issues.length + 1}.png`);
+            await v.page.screenshot({ path: file }).catch(() => {});
+            issues.push({ ...f, file });
+          }
+        }
+      }
+      m.focusIssues = issues;
+      m.stops = stops.length;
+      results.zoom = m;
+      ran.zoom = { note: `720×450 at 2× (200% of 1440×900); Tab pressed through ${stops.length} stops` };
+    } finally {
+      await v.close();
+    }
+  }
+
+  // A form: filled with test values and sent; every send answered by palate after a pause.
+  async function formRun(f, mode) {
+    const delay = mode === "submitting" ? 3000 : 500;
+    const v = await visit(browser, {
+      motion: true,
+      data: async (r, req) => {
+        // Route mocks answer before the browser's offline check, so offline has to fail here too.
+        if (mode === "offline") return r.abort("internetdisconnected");
+        if (isRead(req)) return r.fallback();
+        await sleep(delay);
+        if (mode === "submit-error") return r.fulfill({ status: 500, contentType: "application/json", body: JSON.stringify({ ok: false, error: "Internal Server Error" }) });
+        return r.fulfill(okJson);
+      },
+    });
+    try {
+      await go(v.page, full);
+      await settle(v.page);
+      await inPage(v.page, "mark", { components: [f] });
+      if (mode !== "empty-submit") await fill(v.page, f);
+      const filled = await inPage(v.page, "measure", { components: [f], baseTexts: texts, fields: f.fields.map((x) => x.sel) });
+      if (mode === "offline") await v.ctx.setOffline(true);
+      const before = v.log.data.length;
+      const t = Date.now();
+      const btn = v.page.locator(f.submit).first();
+      await btn.scrollIntoViewIfNeeded({ timeout: 2000 }).catch(() => {});
+      let clicked = await btn.click({ timeout: 3000 }).then(() => true).catch(() => false);
+      // Two presses racing, 30ms apart (dispatched in the page: a locator click waits too long to race).
+      if (mode === "submitting" && clicked) {
+        await v.page.waitForTimeout(30);
+        await v.page.evaluate((sel) => document.querySelector(sel)?.click(), f.submit).catch(() => {});
+      }
+      // The transition, not only the end: the button looked at three times while the 3s request runs.
+      const samples = [];
+      if (mode === "submitting" && clicked) {
+        for (const at of [120, 1200, 2500]) {
+          await sleep(Math.max(0, t + at - Date.now()));
+          const s = await inPage(v.page, "measure", { components: [], baseTexts: texts, submit: f.submit }).catch(() => null);
+          samples.push({ at, cue: Boolean(s?.submit && (s.submit.disabled || s.submit.ariaDisabled || s.submit.busy || s.submit.cue || (s.submit.text && s.submit.text !== f.submitText))) });
+        }
+      } else await v.page.waitForTimeout(350);
+      const pending = await inPage(v.page, "measure", { components: [f], baseTexts: texts, fields: f.fields.map((x) => x.sel), submit: f.submit });
+      const box = (m) => placeOf(m.comps[f.id], baseM.comps[f.id]?.box ?? f.box, f);
+      if (mode === "submitting") cells[f.id][mode] = await crop(v.page, box(pending), path.join(cropsDir, `${f.id}-${mode}.png`), { pad: 8 });
+      await v.page.waitForTimeout(mode === "submitting" ? 3300 : 1600);
+      const after = await inPage(v.page, "measure", { components: [f], baseTexts: texts, fields: f.fields.map((x) => x.sel), submit: f.submit });
+      const focus = await inPage(v.page, "focus").catch(() => null);
+      if (mode !== "submitting") cells[f.id][mode] = await crop(v.page, box(after), path.join(cropsDir, `${f.id}-${mode}.png`), { pad: 8 });
+      else cells[f.id]["submitted"] = await crop(v.page, box(after), path.join(cropsDir, `${f.id}-submitted.png`), { pad: 8 });
+      const sent = v.log.data.slice(before).filter((d) => d.at - t < 2500 && !isReadMethod(d.method)).length;
+      const outcome = mode === "submitting" ? await inPage(v.page, "outcome", { baseTexts: texts, values: filled.fields }).catch(() => null) : null;
+      results[`${f.id}:${mode}`] = { clicked, sent, filled: filled.fields, pending, after, focus, samples, outcome, errors: v.log.errors.slice() };
+      ran[mode] = { note: { submitting: "filled with test values, pressed twice 30ms apart, answered after 3s; the button looked at 0.1s, 1.2s and 2.5s", "submit-error": "filled, sent, answered 500", offline: "filled, browser offline, sent", "empty-submit": "sent with every field empty" }[mode] };
+    } finally {
+      await v.close();
+    }
+  }
+
+  // Saved, but the answer was lost: the first send reaches palate (standing in for the server, which never
+  // sees it) and its response is dropped, so the client sees a network error. Then the user retries the way
+  // the UI offers (its Retry button, or the submit again) and palate answers that one. Which writes arrived,
+  // with which headers and body, and what the UI shows after.
+  async function lostRetryRun(f) {
+    const writes = [];
+    const reads = [];
+    const v = await visit(browser, {
+      motion: true,
+      data: async (r, req) => {
+        if (isRead(req)) {
+          if (writes.length) reads.push({ at: Date.now(), after: writes.length });
+          return r.fallback();
+        }
+        writes.push({ at: Date.now(), url: req.url(), headers: req.headers(), body: req.postData() ?? "" });
+        if (writes.length === 1) {
+          await sleep(600);
+          return r.abort("timedout");
+        }
+        await sleep(400);
+        return r.fulfill(okJson);
+      },
+    });
+    try {
+      await go(v.page, full);
+      await settle(v.page);
+      await inPage(v.page, "mark", { components: [f] });
+      await fill(v.page, f);
+      const filled = await inPage(v.page, "measure", { components: [f], baseTexts: texts, fields: f.fields.map((x) => x.sel) });
+      const btn = v.page.locator(f.submit).first();
+      await btn.scrollIntoViewIfNeeded({ timeout: 2000 }).catch(() => {});
+      const clicked = await btn.click({ timeout: 3000 }).then(() => true).catch(() => false);
+      await v.page.waitForTimeout(1600);
+      const lost = await inPage(v.page, "outcome", { baseTexts: texts, values: filled.fields });
+      const failed = await inPage(v.page, "measure", { components: [f], baseTexts: texts, fields: f.fields.map((x) => x.sel), submit: f.submit });
+      let how = null;
+      if (clicked && writes.length === 1) {
+        if (lost.retry) {
+          how = "its Try again button";
+          await v.page.locator(lost.retry).first().click({ timeout: 2000 }).catch(() => (how = null));
+        }
+        if (!how) {
+          // The form as the user left it: what it still holds, refilled only if it cleared.
+          if ((failed.fields ?? []).every((x) => !x)) await fill(v.page, f);
+          how = "pressing the submit again";
+          await btn.click({ timeout: 3000 }).catch(() => (how = null));
+        }
+        await v.page.waitForTimeout(1600);
+      }
+      const end = await inPage(v.page, "outcome", { baseTexts: texts, values: filled.fields });
+      const after = await inPage(v.page, "measure", { components: [f], baseTexts: texts, fields: f.fields.map((x) => x.sel), submit: f.submit });
+      cells[f.id]["lost-retry"] = await crop(v.page, placeOf(after.comps[f.id], baseM.comps[f.id]?.box ?? f.box, f), path.join(cropsDir, `${f.id}-lost-retry.png`), { pad: 8 });
+      results[`${f.id}:lost-retry`] = { clicked, how, writes, checked: reads.some((x) => x.after === 1 && writes[1] && x.at < writes[1].at), idempotent: idempotencyOf(writes[0], writes[1]), lost, end, failedMsg: failed.comps[f.id]?.errorMsg ?? failed.errorTexts?.[0] ?? null, errors: v.log.errors.slice() };
+      ran["lost-retry"] = { note: "filled and sent; the first send reached palate (the server never sees it) and its answer was dropped, then retried the way the UI offers, answered 200" };
+    } finally {
+      await v.close();
+    }
+  }
+
+  // A failed submit by keyboard only, at 1440 and 320, with long values: focus, message, announcement, values
+  // kept, on screen, and fixed by keyboard. Every write answered by palate.
+  async function recoverRun(f, width) {
+    const key = width < 400 ? "recover-narrow" : "recover";
+    const v = await visit(browser, { width, height: width < 400 ? 720 : 900, motion: true, data: async (r, req) => (isRead(req) ? r.fallback() : (await sleep(300), r.fulfill(okJson))) });
+    try {
+      await go(v.page, full);
+      await settle(v.page);
+      await inPage(v.page, "mark", { components: [f] });
+      const shot = async (r1) => {
+        const b = await v.page.locator(`[data-palate-c="${f.id}"]`).first().boundingBox().catch(() => null);
+        const sy = await v.page.evaluate(() => scrollY).catch(() => 0);
+        const m = r1.message?.box;
+        const x0 = Math.min(b?.x ?? m?.left ?? 0, m?.left ?? Infinity);
+        const y0 = Math.min(b?.y ?? m?.top ?? 0, m?.top ?? Infinity);
+        const x1 = Math.max(b ? b.x + b.width : 0, m?.right ?? 0);
+        const y1 = Math.max(b ? b.y + b.height : 0, m?.bottom ?? 0);
+        if (b || m) cells[f.id][key] = await crop(v.page, { x: x0, y: y0 + sy, width: x1 - x0, height: y1 - y0 }, path.join(cropsDir, `${f.id}-${key}.png`), { pad: 10 });
+        await v.page.screenshot({ path: path.join(cropsDir, `${f.id}-${key}-screen.png`) });
+      };
+      const r = await keyboardRecovery(v.page, f, { writes: () => v.log.data.filter((d) => !isReadMethod(d.method)).length, shot });
+      results[`${f.id}:${key}`] = { ...r, screen: fs.existsSync(path.join(cropsDir, `${f.id}-${key}-screen.png`)) ? path.join(cropsDir, `${f.id}-${key}-screen.png`) : null };
+      const name = `${f.id} form${f.heading ? ` "${f.heading}"` : ""}`;
+      if (r.skipped) width > 400 && cannot.push(`Keyboard error recovery (${name}): ${r.skipped}.`);
+      else if (r.accepted) cannot.push(`Keyboard error recovery (${name}, ${width}px): the form sent ${r.plan.label} ${r.plan.how === "empty" ? "empty" : `as "${r.plan.bad.slice(0, 40)}…"`} without complaint. palate answers every send with 200, so a server-side validation error couldn't be seen.`);
+      ran[key] = { note: `keyboard only at ${width}px: Tab into each form, long values typed, one field left invalid, Enter on the submit; then Shift+Tab back, fixed, sent again` };
+    } finally {
+      await v.close();
+    }
+  }
+
+  // Buttons outside forms, each pressed twice quickly with every request held: the ones that send something.
+  async function actionsRun() {
+    if (!found.actions.length) return;
+    const v = await visit(browser, { motion: true, data: async (r, req) => (await sleep(2500), isRead(req) ? r.fallback() : r.fulfill(okJson)) });
+    const out = [];
+    try {
+      await go(v.page, full);
+      await settle(v.page);
+      for (const a of found.actions) {
+        const loc = v.page.locator(a.sel).first();
+        if (!(await loc.isVisible().catch(() => false))) continue;
+        const before = v.log.data.length;
+        const url0 = v.page.url();
+        await loc.click({ timeout: 1500 }).catch(() => {});
+        await v.page.waitForTimeout(80);
+        await loc.click({ timeout: 600, force: true }).catch(() => {});
+        await v.page.waitForTimeout(450);
+        const sent = v.log.data.length - before;
+        if (sent > 0) {
+          const m = await inPage(v.page, "measure", { components: [], baseTexts: texts, submit: a.sel });
+          const bx = await loc.boundingBox().catch(() => null);
+          const file = bx ? await crop(v.page, { x: bx.x, y: bx.y + (await v.page.evaluate(() => scrollY)), width: bx.width, height: bx.height }, path.join(cropsDir, `action-${out.length + 1}.png`), { pad: 40 }) : null;
+          out.push({ ...a, sent, submit: m.submit, file });
+          await v.page.waitForTimeout(2600);
+        }
+        if (v.page.url() !== url0) {
+          await go(v.page, full);
+          await settle(v.page);
+        }
+      }
+      results.actions = out;
+      ran.pressed = { note: `${found.actions.length} button(s) outside forms pressed twice 80ms apart; ${out.length} sent a request` };
+    } finally {
+      await v.close();
+    }
+  }
+
+  // Before any form is tested: test values its own validation accepts (every write answered 200).
+  async function probeRun(f) {
+    const v = await visit(browser, { motion: true, data: async (r, req) => (isRead(req) ? r.fallback() : (await sleep(200), r.fulfill(okJson))) });
+    try {
+      await go(v.page, full);
+      await settle(v.page);
+      await inPage(v.page, "mark", { components: [f] });
+      const p = await probeValues(v.page, f, { writes: () => v.log.data.filter((d) => !isReadMethod(d.method)).length, baseTexts: texts });
+      f.values = p.values;
+      f.probe = { passed: p.passed, sent: p.sent, rounds: p.rounds, message: p.message ?? null, blocked: p.blocked ?? [] };
+    } finally {
+      await v.close();
+    }
+  }
+
+  // Three at a time; empty first, since long / many / one need to know which parts its data drives.
+  const pool = async (list, n = 3) => {
+    const q = [...list];
+    await Promise.all(Array.from({ length: Math.min(n, q.length) }, async () => {
+      while (q.length) {
+        const t = q.shift();
+        await t().catch((e) => cannot.push(`A render failed: ${String(e.message).split("\n")[0].slice(0, 160)}`));
+      }
+    }));
+  };
+  await pool(components.filter((c) => c.kind === "form" && !c.sameAs).map((f) => () => probeRun(f)));
+  if (fetched) await pool([tasks.shift()], 1);
+  await pool([...tasks, ...transformsAfterEmpty()]);
+  // 500 records last and alone, so other renders don't slow the timing; the 50-item render says which parts'
+  // items follow the records.
+  if (fetched) {
+    const timed = collections.filter((c) => isDriven(c, baseM, results.empty));
+    if (timed.length) await manyTiming(timed).catch((e) => cannot.push(`A render failed: ${String(e.message).split("\n")[0].slice(0, 160)}`));
+  }
+
+  return { components, actions: found.actions, title: found.title, requests, responses, baseM, baseErrors, results, cells, ran, cannot, pageShot, fetched };
+}
+const isReadMethod = (m) => m === "GET" || m === "HEAD";
+
+// Whether a retried write says it is the same write: an idempotency or request-id header with the same value
+// on both, or a client-made id in the body (a key named like one, or any UUID) that repeats. What the user
+// typed doesn't count: two invites to the same email are still two writes.
+const ID_HEADER = /^(idempotency-key|x-idempotency-key|x-request-id|request-id|x-client-request-id|x-correlation-id|x-mutation-id)$/i;
+const ID_KEY = /^(id|uuid|key|nonce|client_?id|request_?id|idempotency_?key|client_?mutation_?id|mutation_?id|operation_?id|submission_?id|draft_?id|temp_?id|local_?id)$/i;
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const bodyIds = (body) => {
+  const out = new Map();
+  let o = null;
+  try {
+    o = JSON.parse(body);
+  } catch {
+    try {
+      o = Object.fromEntries(new URLSearchParams(body));
+    } catch {}
+  }
+  const walk = (v, k, d) => {
+    if (d > 4 || v == null) return;
+    if (typeof v === "object") return Object.entries(v).forEach(([k2, x]) => walk(x, k2, d + 1));
+    const s = String(v);
+    if ((ID_KEY.test(k) && s.length >= 6) || UUID.test(s)) out.set(`${k}=${s}`, k);
+  };
+  walk(o, "", 0);
+  return out;
+};
+export function idempotencyOf(a, b) {
+  if (!a || !b) return null;
+  for (const [k, v] of Object.entries(a.headers ?? {})) if (ID_HEADER.test(k) && v && b.headers?.[k.toLowerCase()] === v) return `the ${k} header repeats`;
+  const ids = bodyIds(b.body ?? "");
+  for (const [kv, k] of bodyIds(a.body ?? "")) if (ids.has(kv)) return `"${k || "id"}" in the body repeats`;
+  return null;
+}
+
+// The parts worth timing at 500 records: their item count followed the records at 50 (a list of 7 showed
+// ~50), so at 500 they should show ~500. Stat cards and capped lists don't grow and aren't timed.
+export function timedParts(list, baseM, many) {
+  return list
+    .map((c) => {
+      const b = baseM?.comps?.[c.id]?.count ?? 0;
+      const m = many?.comps?.[c.id]?.count ?? 0;
+      return { c, follows: m >= 40 && m > b, target: Math.round(m * 10 * 0.9) };
+    })
+    .filter((p) => p.follows);
+}
+
+// A part's content comes from the fetched data when emptying the data changed it.
+function isDriven(c, baseM, empty) {
+  if (!empty) return false;
+  const b = baseM.comps[c.id];
+  const e = empty.comps[c.id];
+  if (!b || !e) return false;
+  if (!e.present && b.present) return true;
+  if (c.sig && e.count !== b.count) return true;
+  return e.scopeText !== b.scopeText;
+}
+
+// Where a part lives in the source: the best file:line by its text and classes, what is mapped near it, and
+// whether that file handles loading, errors and empty arrays at all.
+// Only files the route's entry reaches count (whereIs, states-source.mjs); when the clues disagree it says
+// "not sure" instead of naming a file.
+function sourceOf(dir, c, src, route) {
+  const top = whereIs(dir, c, src, route);
+  if (!top) return null;
+  if (top.unsure) return { unsure: true, guesses: top.guesses };
+  const file = top.file;
+  const near = src.maps.filter((m) => m.file === file && Math.abs(m.line - top.line) <= 12).sort((a, b) => Math.abs(a.line - top.line) - Math.abs(b.line - top.line))[0] ?? null;
+  const has = (list) => list.some((x) => x.file === file);
+  return { file, line: top.line, map: near ? { line: near.line, over: near.over } : null, handles: { loading: has(src.loading), error: has(src.error), empty: has(src.empty) }, fetch: src.fetches.find((x) => x.file === file) ?? null, static: src.staticArrays.find((s) => s.file === file && near && near.over.split(".")[0] === s.name) ?? null };
+}
+
+// ---- findings
+const SEV = ["high", "medium", "low"];
+const label = (c) => `${c.id} ${c.kind}${c.heading ? ` "${c.heading}"` : c.texts?.[0] ? ` "${c.texts[0].slice(0, 32)}"` : ""}`;
+const noun = (c) => ({ list: "list", table: "table", cards: "cards", grid: "grid", form: "form", number: "number", image: "image", text: "text" })[c.kind] ?? "part";
+const uiName = (ui, role) => (ui[role] ? `${path.basename(ui[role]).replace(/\.\w+$/, "")} (${ui[role]})` : null);
+
+// What a part holds, in its own words, for the copy a finding suggests: its heading when that names records
+// ("This week's firings" → firings), else the request whose records it shows (/api/firings.json → firings),
+// else its heading, else every request's records. Never another part's subject.
+const recordsOf = (url) => {
+  try {
+    return decodeURIComponent(new URL(url).pathname).split("/").filter(Boolean).at(-1)?.replace(/\.\w+$/, "").replace(/[-_]+/g, " ").toLowerCase() || null;
+  } catch {
+    return null;
+  }
+};
+const PEOPLE = /^(members|users|people|team|teammates|collaborators|guests|students|customers|contacts|employees|staff|clients|patients|attendees|participants)$/;
+const singular = (w) => (/ies$/.test(w) ? w.replace(/ies$/, "y") : /(ss|us)$/.test(w) ? w : w.replace(/s$/, ""));
+export function subjectOf(c, requests = []) {
+  const h = (c.heading ?? "").trim();
+  const last = (h.replace(/['’]s\b/g, "").match(/[A-Za-z]+/g) ?? []).at(-1)?.toLowerCase();
+  const lower = (s) => s.charAt(0).toLowerCase() + s.slice(1);
+  if (last && last.length >= 3 && /[^s]s$/.test(last)) return { noun: last, phrase: lower(h) };
+  const texts = (c.texts ?? []).join(" ");
+  let best = null;
+  for (const r of requests) {
+    const hits = [...stringsOf(r.body ?? null)].filter((s) => s.length >= 3 && texts.includes(s)).length;
+    if (hits && (!best || hits > best.hits)) best = { hits, noun: recordsOf(r.url) };
+  }
+  if (best?.noun) return { noun: best.noun, phrase: best.noun };
+  if (last && last.length >= 3) return { noun: last, phrase: lower(h) };
+  const all = [...new Set(requests.map((r) => recordsOf(r.url)).filter(Boolean))];
+  if (all.length) return { noun: all.join(" and "), phrase: all.join(" and ") };
+  return { noun: "records", phrase: "this" };
+}
+export function copyFor(c, requests, kind) {
+  const { noun: n, phrase } = subjectOf(c, requests);
+  const one = singular(n.split(" and ")[0]);
+  const verb = PEOPLE.test(n) ? "Invite" : "Add";
+  return {
+    empty: `Say what is empty and what to do next: "No ${n} yet." with one line on why it matters, and the action that adds the first one as a button ("${verb} a ${one}"). Never "No data".`,
+    loading: `A skeleton needs no words; if you use text, say what is loading ("Loading ${phrase}…").`,
+    error: `Say what happened and what to do: "Couldn't load ${phrase}. Check your connection and try again." with a "Try again" button. No codes, no blame.`,
+  }[kind];
+}
+
+// A form's own words: its button ("Invite member" → "Couldn't invite member.") and its first required field.
+export function formCopy(f) {
+  const act = (f.submitText ?? "").trim();
+  const field = f.fields?.find((x) => x.required) ?? f.fields?.[0];
+  const what = field ? (field.type === "email" || /e-?mail/i.test(`${field.name} ${field.label}`) ? "an email address" : field.label && !/@|\.\w/.test(field.label) ? field.label.toLowerCase().replace(/^(an?|the|your)\s+/, "") : null) : null;
+  return {
+    failed: act && act.split(/\s+/).length <= 4 ? `Couldn't ${act.charAt(0).toLowerCase()}${act.slice(1)}. Try again in a moment.` : "Couldn't send it. Try again in a moment.",
+    enter: what ? (what.startsWith("an ") || what.startsWith("a ") ? `Enter ${what}.` : `Enter ${/^[aeiou]/.test(what) ? "an" : "a"} ${what}.`) : "Name the field that's missing and what to put in it.",
+  };
+}
+
+// A render that crashed: the app's root emptied, a dev error overlay, or the page went blank with an error.
+// A blank page with no error counts only when the data failed (elsewhere it is a missing state, not a crash).
+export const crashedIn = (m, baseM, s = "error") => Boolean(m && (m.rootEmpty || m.overlay || ((m.errors?.length || (["error", "network"].includes(s) && (baseM?.bodyText ?? 0) >= 120)) && m.bodyText < 40)));
+
+function derive(run, { kind, src, where }) {
+  const { components, results: R, baseM } = run;
+  const out = [];
+  const add = (f) => {
+    // One finding per part and check; a second state that shows it joins the first.
+    const twin = out.find((x) => x.comp === f.comp && x.check === f.check);
+    if (twin) {
+      if (!twin.states.includes(f.state)) twin.states.push(f.state);
+      if (f.affects) twin.affects = { ...(twin.affects ?? {}), ...f.affects };
+      return;
+    }
+    out.push({ ...f, states: [f.state] });
+  };
+  // A page that crashed in a state: one finding, and every part it took down fails in that state.
+  const crashed = new Set();
+  // (Not while loading: a page may hold nothing but a spinner then.)
+  for (const s of ["empty", "error", "network", "long", "many", "one", "images", "narrow"]) {
+    const x = R[s];
+    if (!crashedIn(x, baseM, s)) continue;
+    crashed.add(s);
+    const gone = components.filter((c) => baseM.comps[c.id]?.present && !x.comps?.[c.id]?.present).map((c) => c.id);
+    const fails = s === "error" || s === "network";
+    const reqs0 = run.requests.map((r) => `${r.method} ${new URL(r.url).pathname}`).filter((v, i, a) => a.indexOf(v) === i).join(", ");
+    add({ comp: "page", state: s, check: "crash", severity: "high", what: `${fails ? "When the data fails" : `In the "${STATES[s]}" state`}, the page crashes${x.bodyText < 40 || x.rootEmpty ? " and goes blank" : ""}${x.errors?.length ? ` (${x.errors[0].slice(0, 90)})` : x.overlay ? " (the dev server's error overlay)" : ""}.`, measured: `${s === "error" ? `A 500 on ${reqs0}` : s === "network" ? `A network failure on ${reqs0}` : STATES[s]}: ${x.errors?.length ? "a runtime error, " : ""}${x.bodyText} characters left on the page${gone.length ? `; ${gone.join(", ")} gone` : ""}.`, fix: fails ? "Check the response before using it (`if (!res.ok) throw …`), keep the data's type when it fails, and catch the error into state the screen can render. Add an error boundary around the screen." : "Guard the data path for this shape (empty arrays, missing fields, long values), and add an error boundary around the screen so one part can't take the page down.", copy: "", crop: fs.existsSync(path.join(path.dirname(run.pageShot), `page-${s}.png`)) ? path.join(path.dirname(run.pageShot), `page-${s}.png`) : null, affects:{ [s]: gone.length ? gone : components.map((c) => c.id) } });
+  }
+  // A page that scrolls sideways: the parts reaching past the screen's edge fail in that state too.
+  const sideways = (s) => components.filter((c) => (R[s]?.comps?.[c.id]?.past ?? 0) > 1).map((c) => c.id);
+  const ui = src.ui;
+  const loc = (c) => (where[c.id]?.unsure ? `not sure (the clues point at ${where[c.id].guesses.join(" and ")}; check before editing)` : where[c.id] ? `${where[c.id].file}:${where[c.id].line}${where[c.id].map ? ` (\`${where[c.id].map.over}.map\` at line ${where[c.id].map.line})` : ""}` : null);
+  const over = (c) => where[c.id]?.map?.over ?? "the array";
+  const reqs = run.requests.map((r) => `${r.method} ${new URL(r.url).pathname}`).filter((v, i, a) => a.indexOf(v) === i).join(", ");
+  const driven = new Set(components.filter((c) => isDriven(c, baseM, R.empty)).map((c) => c.id));
+  const crop = (c, s) => run.cells[c.id]?.[s] ?? null;
+
+  for (const c of components) {
+    if (c.kind === "form") continue;
+    const d = driven.has(c.id);
+    // Empty
+    const e = crashed.has("empty") ? null : R.empty?.comps[c.id];
+    if (d && e && (c.sig ? !e.present || e.count === 0 : true)) {
+      if (!e.emptyMsg) add({ comp: c.id, state: "empty", check: "missing-empty", severity: "high", what: `The ${noun(c)} has no empty state: with no records it shows ${e.present ? `an empty ${c.tag} and nothing in its place` : "nothing at all where it was"}.`, measured: `${reqs} answered with empty arrays; ${e.present ? `${e.count ?? 0} items rendered` : "the part was gone"}, and no message or action appeared in its place.`, fix: `Branch on \`${over(c)}.length === 0\` and render an empty state in the space the ${noun(c)} takes: what is empty, why it matters in one line, and the next action as a button${ui.empty ? `; use ${uiName(ui, "empty")}` : ""}.`, copy: copyFor(c, run.requests, "empty"), crop: crop(c, "empty") });
+      else if (!e.actions.length && ["list", "table", "cards", "grid"].includes(c.kind)) add({ comp: c.id, state: "empty", check: "empty-no-action", severity: "low", what: `The empty state says "${e.emptyMsg.slice(0, 60)}" but offers nothing to do next.`, measured: "No button or link in the empty region.", fix: "Add the next action as a button in the empty state (create, invite, import, clear the filters).", copy: "Pair the message with the one action that fills the list.", crop: crop(c, "empty") });
+    }
+    // Loading
+    const l = crashed.has("loading") ? null : R.loading?.comps[c.id];
+    if (d && l) {
+      const shown = l.present && (c.sig ? l.count > 0 : true) && !l.newTexts.length && l.scopeText === baseM.comps[c.id]?.scopeText;
+      if (!shown) {
+        if (l.emptyMsg && !l.loadingCue) add({ comp: c.id, state: "loading", check: "empty-while-loading", severity: "high", what: `While the data loads, the ${noun(c)} says "${l.emptyMsg.slice(0, 60)}": it claims there is nothing before it knows.`, measured: `1.2s into a ${LOAD_HOLD / 1000}s load the empty message shows and no loading cue does.`, fix: "Keep loading and empty apart: show the loading state until the request settles; render the empty state only when it succeeded with no records.", copy: "", crop: crop(c, "loading") });
+        else if (!l.loadingCue && !R.loading.cues.length) add({ comp: c.id, state: "loading", check: "missing-loading", severity: "high", what: `Nothing shows that the ${noun(c)} is loading: ${l.present ? "it sits empty" : "its space is blank"} until the data arrives.`, measured: `Data held ${LOAD_HOLD / 1000}s: no skeleton, spinner, aria-busy or "Loading" text in its region${R.loading.still?.[c.id] ? ", and nothing on it changed between 1.2s and 2.8s" : ""}.`, fix: `Track the request (\`loading\` until it settles) and render a skeleton shaped like the ${noun(c)}'s rows in its place, with aria-busy on the region${ui.skeleton ? `; use ${uiName(ui, "skeleton")}` : ui.spinner ? `; use ${uiName(ui, "spinner")}` : ""}. Show it only after ~300ms so fast loads don't flash.`, copy: copyFor(c, run.requests, "loading"), crop: crop(c, "loading") });
+      }
+    }
+    // Errors: 500 and network down
+    for (const s of ["error", "network"]) {
+      const x = R[s]?.comps[c.id];
+      // A crash is one finding for the page (above), with this part failing in it.
+      if (!d || !x || crashed.has(s)) continue;
+      if (!x.errorMsg && !R[s].errorTexts.length) add({ comp: c.id, state: s, check: "error-swallowed", severity: "high", what: `When the data fails to load, nothing says so: the ${noun(c)} ${x.emptyMsg ? `shows its empty state ("${x.emptyMsg.slice(0, 40)}") as if there were no records` : x.present ? "just sits there" : "silently disappears"}.`, measured: `${s === "error" ? "500 from" : "Network failure on"} ${reqs}: no new error text, alert or retry anywhere on the page.`, fix: `Catch the failure into an \`error\` state and render it in the ${noun(c)}'s place: what happened, and a Retry button that runs the request again${ui.alert ? `; use ${uiName(ui, "alert")}` : ""}. Never fall through to the empty state.`, copy: copyFor(c, run.requests, "error"), crop: crop(c, s) });
+      else if (x.errorMsg && !x.retry && ["list", "table", "cards", "grid", "text", "number"].includes(c.kind)) add({ comp: c.id, state: s, check: "error-no-retry", severity: "low", what: `The error ("${x.errorMsg.slice(0, 50)}") has no way to try again.`, measured: "No Retry / Try again button near the message.", fix: "Add a Try again button that re-runs the request.", copy: "", crop: crop(c, s) });
+    }
+    const h = R.hang?.comps[c.id];
+    const missing = out.find((x) => x.comp === c.id && x.check === "missing-loading");
+    if (d && h && !h.loadingCue && !h.errorMsg && missing && !missing.states.includes("hang")) missing.states.push("hang");
+    const saysSlow = h && [...(h.newTexts ?? []), ...(h.inPlace ?? [])].some((t) => /taking longer|still loading|slow|hang on|almost there/i.test(t));
+    if (d && h && h.loadingCue && !h.errorMsg && !saysSlow) add({ comp: c.id, state: "hang", check: "no-timeout", severity: "low", what: `When the request never answers, 8s in the ${noun(c)} still shows only its loading cue: nothing says it's slow, and there's no way out.`, measured: `Data held with no answer; at 8s: ${h.loadingCue}, no "taking longer" text, no error.`, fix: "Give the request a timeout (AbortSignal.timeout(10_000)) and show the error state with Try again when it fires; after ~3s say it's taking longer than usual.", copy: "\"This is taking longer than usual…\" then the error state.", crop: crop(c, "hang") });
+
+    // Long text, 320 wide: new overflow, clipping and spills (not already there as it is).
+    const baseIssues = new Set((baseM.comps[c.id]?.overflow ?? []).map((o) => `${o.kind}|${o.sel}`));
+    for (const s of ["long", "narrow"]) {
+      const x = R[s]?.comps[c.id];
+      if (!x || crashed.has(s)) continue;
+      const issues = x.overflow.filter((o) => !baseIssues.has(`${o.kind}|${o.sel}`));
+      if (!issues.length) continue;
+      const worst = issues.find((o) => o.kind === "spill" || o.kind === "outside") ?? issues.find((o) => o.kind === "clip" || o.kind === "clip-y") ?? issues[0];
+      const how = { spill: "spills out of its box", outside: `runs ${worst.px}px outside the ${noun(c)}`, clip: "is cut off with no ellipsis", "clip-y": "is cut off at the bottom", ellipsis: "is truncated with no way to read the rest (no title or tooltip)" }[worst.kind];
+      // Copy written in the code only gets longer when someone edits or translates it: say so, and rank it lower.
+      const hypothetical = s === "long" && !d;
+      const sev = hypothetical ? "low" : issues.some((o) => o.kind !== "ellipsis") ? "medium" : "low";
+      add({ comp: c.id, state: s, check: worst.kind === "ellipsis" ? "truncated-no-title" : "text-overflow", severity: sev, what: `${s === "long" ? (hypothetical ? "If this copy grows (new content, translation), long text" : "Long text") : "At 320px, text"} ${how}: "${worst.text.slice(0, 50)}".`, measured: issues.slice(0, 3).map((o) => `${o.kind} ${o.px}px at ${o.sel.split(" > ").slice(-2).join(" > ")}`).join("; "), fix: worst.kind === "ellipsis" ? "Keep the ellipsis but expose the full text: a title attribute or tooltip, or let it wrap to two lines (line-clamp: 2)." : "Let text wrap inside its box: `min-width: 0` on flex and grid children, `overflow-wrap: anywhere` for names, emails and URLs, and truncate with an ellipsis plus a title only where one line is a must.", copy: "", crop: crop(c, s) });
+    }
+    // 50 items: layout breaks, and a page that grows without end.
+    const m = crashed.has("many") ? null : R.many?.comps[c.id];
+    if (m && c.sig && run.fetched && driven.has(c.id) && R.many.pageHeight - baseM.pageHeight > 4 * 900 && !m.paging) add({ comp: c.id, state: "many", check: "no-pagination", severity: "low", what: `At 50 records the ${noun(c)} pushes the page ${Math.round((R.many.pageHeight - baseM.pageHeight) / 100) * 100}px longer, with no pagination, "Show more" or scroll area.`, measured: `Page height ${baseM.pageHeight}px → ${R.many.pageHeight}px.`, fix: "Paginate (or Show more after ~20), or put the list in its own scroll area with a sticky header; virtualize past a few hundred rows.", copy: "", crop: crop(c, "many") });
+    const t = R.many500?.comps[c.id];
+    if (t?.ms > SLOW_500 || t?.timedOut) add({ comp: c.id, state: "many", check: "slow-500", severity: "medium", what: t.timedOut ? `500 records don't finish rendering in ${t.timedOut / 1000}s.` : `500 records take ${(t.ms / 1000).toFixed(1)}s to render.`, measured: t.timedOut ? `${t.items} items rendered ${t.timedOut / 1000}s after the response.` : `${t.items} items rendered ${t.ms}ms after the response${t.tries ? ` (the fastest of ${t.tries} tries)` : ""}.`, fix: "Virtualize the list (render only the rows on screen) or paginate on the server.", copy: "", crop: null });
+    // One item: a lone card stretched across the row.
+    const o = R.one?.comps[c.id];
+    if (o?.itemBox && baseM.comps[c.id]?.itemBox && ["cards", "grid"].includes(c.kind) && o.itemBox.width > baseM.comps[c.id].itemBox.width * 1.6) add({ comp: c.id, state: "one", check: "one-stretches", severity: "low", what: `With one item, its card stretches to ${o.itemBox.width}px (from ${baseM.comps[c.id].itemBox.width}px).`, measured: `Item width ${baseM.comps[c.id].itemBox.width}px → ${o.itemBox.width}px.`, fix: "Give grid items a fixed track (`repeat(auto-fill, minmax(280px, 1fr))` keeps empty tracks) or a max-width, so one item keeps its size.", copy: "", crop: crop(c, "one") });
+    // Images that fail.
+    const im = crashed.has("images") ? null : R.images?.comps[c.id];
+    // Avatars (small, round, next to a person's name) fall back to initials; any other picture to a neutral tile.
+    const avatars = im?.broken?.length && im.broken.every((b) => b.avatar);
+    const noAlt = im?.broken?.some((b) => !b.alt);
+    if (im?.broken?.length) add({ comp: c.id, state: "images", check: "broken-image", severity: "medium", what: `${im.broken.length} image(s) show the browser's broken-image icon when they fail${avatars ? " (avatars)" : ""}.`, measured: im.broken.slice(0, 3).map((b) => `${b.src}${b.alt ? ` alt "${b.alt}"` : " no alt"}`).join("; "), fix: avatars ? "Fall back on error: onError swaps in initials or a generated avatar seeded by the name, on a neutral background the same size." : `Handle onError: hide the img and show a neutral placeholder the same size (a quiet tile${noAlt ? "; give the image alt text that says what it shows, and use it as the placeholder's label" : " labelled with the alt text"}), so the layout doesn't jump.`, copy: "", crop: crop(c, "images") });
+  }
+
+  // The page as a whole.
+  const plural = (s) => (crashed.has(s) ? [] : R[s]?.plurals ?? []);
+  for (const s of ["one", "empty"]) for (const p of plural(s)) add({ comp: "page", state: s, check: "plural", severity: "low", what: `"${p}": the count isn't pluralised.`, measured: `Seen with ${s === "one" ? "one record" : "no records"}.`, fix: "Pluralise with Intl.PluralRules or a helper: \"1 member\", \"2 members\", and \"No members\" for zero.", copy: "", crop: null });
+  const zeros = (R.loading?.newTexts ?? []).filter((t) => /(^|[^\d.,])0\s+[a-z]/i.test(t) && t.length < 80);
+  if (zeros.length) add({ comp: "page", state: "loading", check: "zero-while-loading", severity: "medium", what: `While the data loads, the screen says "${zeros[0]}": a count of zero the data never said.`, measured: `1.2s into a ${LOAD_HOLD / 1000}s load; as it is, that line reads a real count.`, fix: "Render counts only once the data is in: a skeleton the width of the number while loading, never a default 0.", copy: "", crop: null });
+  for (const s of ["empty", "long", "one", "many"]) for (const lk of R[s]?.leaks?.filter((x) => !(baseM.leaks ?? []).some((b) => b.text === x.text)) ?? []) add({ comp: "page", state: s, check: "leak", severity: "high", what: `The screen shows "${lk.text}" to the reader.`, measured: `${STATES[s]}: ${lk.sel.split(" > ").slice(-2).join(" > ")}.`, fix: "Guard the data path: a fallback for missing fields (`?? \"—\"`), and never render a raw undefined, null or NaN.", copy: "", crop: null });
+  if (R.narrow && R.narrow.overflowX > 1) add({ comp: "page", state: "narrow", check: "page-sideways-320", affects: { narrow: sideways("narrow") }, severity: "high", what: `At 320px the page scrolls sideways by ${R.narrow.overflowX}px.`, measured: `scrollWidth exceeds the viewport by ${R.narrow.overflowX}px.`, fix: "Find the element wider than the screen (fixed widths, long words, wide tables) and let it shrink or scroll in its own box.", copy: "", crop: path.join(path.dirname(run.pageShot), "page-narrow.png") });
+  if (R.zoom && R.zoom.overflowX > 1) add({ comp: "page", state: "zoom", check: "page-sideways-zoom", affects: { zoom: sideways("zoom") }, severity: "medium", what: `At 200% zoom the page scrolls sideways by ${R.zoom.overflowX}px.`, measured: "720×450 CSS px viewport.", fix: "Let the layout reflow at 720px: no fixed widths wider than the viewport.", copy: "", crop: path.join(path.dirname(run.pageShot), "page-zoom.png") });
+  const fi = R.zoom?.focusIssues ?? [];
+  const says = (f) => (f.obscured ? `${f.what} is hidden under ${f.obscured}` : f.hidden ? `${f.what} can't be seen` : `${f.what} is off screen`);
+  if (fi.length) add({ comp: "page", state: "zoom", check: "focus-lost", severity: "medium", what: `Keyboard focus lands where it can't be seen (${fi.length} stop${fi.length > 1 ? "s" : ""}): ${fi.slice(0, 3).map(says).join("; ")}.`, measured: `Tab pass at 200% zoom through ${R.zoom.stops} stops: ${fi.slice(0, 4).map((f) => f.sel.split(" > ").slice(-2).join(" > ")).join("; ")}.`, fix: [fi.some((f) => f.obscured) && "Add `scroll-padding-top` (the sticky bar's height) to html so focused elements scroll clear of it.", fi.some((f) => !f.obscured) && "Take hidden or off-screen copies out of the tab order (inert, hidden, or tabindex=-1 on decorative duplicates), or show them on focus."].filter(Boolean).join(" "), copy: "", crop: fi[0].file });
+
+  // Forms.
+  for (const f of components.filter((c) => c.kind === "form" && !c.sameAs)) {
+    const sub = R[`${f.id}:submitting`];
+    const err = R[`${f.id}:submit-error`];
+    const off = R[`${f.id}:offline`];
+    const emp = R[`${f.id}:empty-submit`];
+    const twins = components.filter((c) => c.sameAs === f.id).map((c) => c.id);
+    const also = twins.length ? ` (the same form as ${twins.join(", ")})` : "";
+    if (sub && !sub.sent && sub.clicked) {
+      // Why nothing went out: the form's own validation refused every test value palate tried, or it got
+      // through and the page handled the send itself (no request to fail or slow down).
+      const pr = f.probe;
+      const tried = (pr?.blocked ?? []).map((b) => `${b.label} (${b.tried.slice(0, 4).map((v) => `"${v}"`).join(", ")})`).join("; ");
+      const what = pr && !pr.passed
+        ? `palate couldn't get past the form's own validation${also}: ${tried ? `it tried ${tried}` : `${pr.rounds} round(s) of test values`}${pr.message ? ` and the form said "${pr.message.slice(0, 80)}"` : ""}. Its pending, error and offline states went untested.`
+        : pr?.passed && !pr.sent
+          ? `Test values passed the form's validation but no request went out${also}: the send happens in the page (or isn't wired to a server yet), so palate couldn't slow it down or fail it. Its pending, error and offline states went untested.`
+          : `With test values the form sent nothing${also}; palate couldn't test its pending, error and offline states.`;
+      const fix = pr && !pr.passed ? "If the format is that strict, say it in the label or placeholder (palate tries the placeholder first), and check the message is visible and clear. Then test these states by hand, or run again." : pr?.passed && !pr.sent ? "Once the form posts to a real endpoint, run palate states again; until then test these states by hand." : "If validation stopped it, check the message is visible and clear. Otherwise test these states by hand.";
+      add({ comp: f.id, state: "submitting", check: "form-sent-nothing", severity: "low", what, measured: `Fields: ${f.fields.map((x) => x.type).join(", ")}; new text: ${sub.after.newTexts.slice(0, 2).join(" · ") || "none"}${pr ? `; ${pr.rounds} round(s) of test values` : ""}.`, fix, copy: "", crop: run.cells[f.id]?.submitting });
+    }
+    if (sub?.sent >= 2) add({ comp: f.id, state: "submitting", check: "double-submit", severity: "high", what: `Pressing "${f.submitText}" twice sends the form twice${also}.`, measured: `${sub.sent} requests from two presses 30ms apart.`, fix: "Ignore submits while one is pending (a ref set before the first await: `if (pending.current) return`; state alone is too slow for a 30ms race), and set aria-disabled on the button while it runs (keep it focusable).", copy: "", crop: run.cells[f.id]?.submitting });
+    if (sub?.outcome?.successes?.length >= 2) add({ comp: f.id, state: "submitting", check: "double-success", severity: "medium", what: `Pressing "${f.submitText}" twice shows ${sub.outcome.successes.length} success messages${also}.`, measured: `After two presses 30ms apart: ${sub.outcome.successes.slice(0, 2).map((t) => `"${t.slice(0, 50)}"`).join(", ")}.`, fix: "One submit, one outcome: ignore the second press while the first is pending, and replace the status message rather than adding one per response.", copy: "", crop: run.cells[f.id]?.submitted });
+    // The transition: pending at first, idle again before the answer came, so a third press would send again.
+    const drop = sub?.samples?.[0]?.cue ? sub.samples.find((x) => !x.cue) : null;
+    if (sub?.sent >= 1 && drop) add({ comp: f.id, state: "submitting", check: "pending-drops", severity: "medium", what: `The "${f.submitText}" button goes back to idle ${(drop.at / 1000).toFixed(1)}s into a 3s request${also}: it looks done and can be pressed again before the outcome is known.`, measured: `Looked at 0.1s, 1.2s and 2.5s: ${sub.samples.map((x) => `${(x.at / 1000).toFixed(1)}s ${x.cue ? "pending" : "idle"}`).join(", ")}.`, fix: "Keep the button pending (aria-disabled, spinner or -ing label) until the request settles, success or failure; tie it to the request, not to a timer.", copy: "", crop: run.cells[f.id]?.submitting });
+    if (sub?.sent >= 1) {
+      const p = sub.pending;
+      const cue = sub.samples?.some((x) => x.cue) || p.submit && (p.submit.disabled || p.submit.ariaDisabled || p.submit.busy || p.submit.cue || (p.submit.text && p.submit.text !== f.submitText)) ? true : Boolean(p.comps[f.id]?.loadingCue);
+      if (!cue) add({ comp: f.id, state: "submitting", check: "no-pending", severity: "medium", what: `For the 3s the request runs, nothing shows the form is sending${also}.`, measured: `The "${f.submitText}" button stayed the same (not disabled, no aria-busy, no spinner, same label).`, fix: `Show the pending state on the button: a spinner or "${f.submitText.replace(/^(\w+)/, (w) => (/e$/.test(w) ? `${w.slice(0, -1)}ing` : `${w}ing`))}…", aria-disabled while it runs${ui.spinner ? `; use ${uiName(ui, "spinner")}` : ""}.`, copy: "Name what is happening: \"Sending…\", \"Saving…\".", crop: run.cells[f.id]?.submitting });
+      if (!sub.focus || sub.focus.body) add({ comp: f.id, state: "submitting", check: "focus-lost", severity: "medium", what: `After the form is sent, keyboard focus is lost (it falls back to the page)${also}.`, measured: "document.activeElement is <body> after the response.", fix: "Move focus to the result: the success message (tabIndex=-1, focus()) or back to the first field.", copy: "", crop: run.cells[f.id]?.submitted });
+    }
+    if (err?.sent >= 1) {
+      const a = err.after;
+      const msg = a.comps[f.id]?.errorMsg;
+      if (!msg && !a.errorTexts.length) add({ comp: f.id, state: "submit-error", check: "error-swallowed", severity: "high", what: `When sending fails, the form says nothing${a.comps[f.id]?.newTexts.length ? ` (it shows "${a.comps[f.id].newTexts[0].slice(0, 40)}")` : ""}${also}.`, measured: "The request answered 500; no error text or alert appeared.", fix: `Check \`res.ok\`, keep the form as it was, and show the error next to the button (role=alert)${ui.alert ? `; use ${uiName(ui, "alert")}` : ""}.`, copy: `Say what happened and what to do: "${formCopy(f).failed}"`, crop: run.cells[f.id]?.["submit-error"] });
+      const lost = err.filled.map((v, i) => v && !a.fields[i] ? f.fields[i].label || f.fields[i].type : null).filter(Boolean);
+      if (lost.length) add({ comp: f.id, state: "submit-error", check: "clears-on-error", severity: "medium", what: `When sending fails, the form clears what the user typed (${lost.join(", ")}).`, measured: "Field values before: filled; after the 500: empty.", fix: "Clear the fields only after a success.", copy: "", crop: run.cells[f.id]?.["submit-error"] });
+    }
+    if (off && off.clicked) {
+      const a = off.after;
+      if (!a.comps[f.id]?.errorMsg && !a.errorTexts.length) add({ comp: f.id, state: "offline", check: "offline-silent", severity: "medium", what: `Offline, sending the form does nothing visible${also}.`, measured: "Browser offline, the button pressed: no message after 2s.", fix: "Catch the network error and say so; keep what the user typed so they can send it again.", copy: "\"You're offline. Check your connection and try again.\"", crop: run.cells[f.id]?.offline });
+    }
+    if (emp && emp.clicked) {
+      if (emp.sent) add({ comp: f.id, state: "empty-submit", check: "empty-sent", severity: "medium", what: `The empty form is sent to the server${also}.`, measured: `${emp.sent} request(s) with every field empty.`, fix: "Validate before sending: required fields stop the submit and say which field and why.", copy: `Name the field and the fix: "${formCopy(f).enter}"`, crop: run.cells[f.id]?.["empty-submit"] });
+      else if (!emp.after.comps[f.id]?.newTexts.length && f.noValidate) add({ comp: f.id, state: "empty-submit", check: "empty-silent", severity: "low", what: "Sending the empty form does nothing visible.", measured: "No request, no message.", fix: "Say what's missing next to the field (aria-invalid, aria-describedby).", copy: `"${formCopy(f).enter}"`, crop: run.cells[f.id]?.["empty-submit"] });
+    }
+    // Saved, answer lost, retried.
+    const lr = R[`${f.id}:lost-retry`];
+    if (lr?.clicked && lr.writes.length >= 1) {
+      const n = lr.writes.length;
+      const crop0 = run.cells[f.id]?.["lost-retry"];
+      const seen = `First send reached the server (palate stood in) and its answer was dropped${lr.failedMsg ? `; the UI said "${lr.failedMsg.slice(0, 60)}"` : ""}; retried by ${lr.how ?? "nothing (no way to retry)"}`;
+      const fixKey = "Generate an idempotency key once per submit attempt (crypto.randomUUID()), send it as an Idempotency-Key header, and reuse the same key when the user retries; the server stores the key with the result and answers a repeat with the first result. Or, before retrying, check whether the record already exists. Keep the button pending until the outcome is known.";
+      if (n >= 2 && !lr.idempotent && !lr.checked) add({ comp: f.id, state: "lost-retry", check: "retry-duplicate", severity: "high", what: `Retry after a lost response sends a second write: the record would be created twice${also}.`, measured: `${seen}. ${n} writes reached the server (${[...new Set(lr.writes.map((w) => new URL(w.url).pathname))].join(", ")}), with no Idempotency-Key or request-id header the same on both and no client-made id repeating in the body${lr.writes[0].body === lr.writes[1].body ? " (the two bodies are identical)" : ""}.`, fix: fixKey, copy: "", crop: crop0 });
+      if (lr.end?.records >= 2) add({ comp: f.id, state: "lost-retry", check: "retry-two-records", severity: "high", what: `After a lost response and a retry, the screen shows the record twice${also}.`, measured: `${seen}; ${lr.end.records} elements show what was typed.`, fix: `${fixKey} Add the record to the screen once, keyed by its id.`, copy: "", crop: crop0 });
+      if (lr.end?.successes?.length >= 2) add({ comp: f.id, state: "lost-retry", check: "retry-two-successes", severity: "medium", what: `After a lost response and a retry, the screen shows two success messages${also}.`, measured: `${seen}; ${lr.end.successes.slice(0, 2).map((t) => `"${t.slice(0, 50)}"`).join(", ")}.`, fix: "One outcome per submit: replace the status message instead of adding one per response.", copy: "", crop: crop0 });
+    }
+    // A failed submit, keyboard only: focus, message, announcement, values, on screen, fixed.
+    for (const key of ["recover", "recover-narrow"]) {
+      const rr = R[`${f.id}:${key}`];
+      for (const x of recoveryFindings(f, rr, key)) add({ ...x, what: x.what.replace(/\.$/, `${also}.`), crop: x.check === "error-offscreen" ? rr.screen ?? run.cells[f.id]?.[key] : run.cells[f.id]?.[key] ?? rr.screen });
+    }
+  }
+  // Buttons outside forms.
+  for (const a of R.actions ?? []) {
+    if (a.sent >= 2) add({ comp: "page", state: "pressed", check: "double-submit", severity: "high", what: `Pressing "${a.text}" twice sends ${a.sent} requests.`, measured: "Two presses 80ms apart, every request held 2.5s.", fix: "Ignore presses while the first is pending and show it on the button (aria-disabled, a spinner).", copy: "", crop: a.file });
+    else if (a.submit && !(a.submit.disabled || a.submit.ariaDisabled || a.submit.busy || a.submit.cue)) add({ comp: "page", state: "pressed", check: "no-pending", severity: "medium", what: `"${a.text}" sends a request but shows nothing while it runs.`, measured: "Same button 300ms after the press.", fix: "Show a pending state on the button while its request runs.", copy: "", crop: a.file });
+  }
+  // Findings about the page as a whole show that state's first screen.
+  for (const f of out) {
+    const fold = path.join(path.dirname(run.pageShot), `page-${f.state}.png`);
+    if (!f.crop && fs.existsSync(fold)) f.crop = fold;
+  }
+  const rank = (f) => SEV.indexOf(f.severity) * 100 + Object.keys(STATES).indexOf(f.state);
+  return out.sort((a, b) => rank(a) - rank(b)).map((f, i) => ({ id: `S${i + 1}`, ...f, componentLabel: f.comp === "page" ? "the page" : label(components.find((c) => c.id === f.comp)), where: f.comp === "page" ? null : loc(components.find((c) => c.id === f.comp)) }));
+}
+
+// What each keyboard recovery run measured, compact, for findings.json and the brief.
+const RECOVERY_CHECKS = { "focus-not-on-error": "focus moves to the field", "error-not-tied": "aria-invalid + message tied", "error-not-announced": "announced", "values-lost": "values kept", "error-offscreen": "on screen", "error-sticks": "clears when fixed" };
+function recoveryOf(R) {
+  const out = {};
+  for (const [k, r] of Object.entries(R)) {
+    const [id, key] = k.split(":");
+    if (!/^recover/.test(key ?? "") || !r) continue;
+    const r1 = r.r1;
+    (out[id] ??= {})[key] = r.skipped ? { skipped: r.skipped } : { plan: r.plan, tabs: r.tabs, byScript: r.byScript, how: r.how, accepted: Boolean(r.accepted), sent: r.sent1, focus: r1?.active?.what ?? null, message: r1?.message?.text ?? null, nativeBlocked: r1?.nativeBlocked, fields: r1?.fields?.map((x, i) => x && { ariaInvalid: x.ariaInvalid, described: x.described.map((d) => `#${d.id}`), kept: !r.values?.[i] || x.value === r.values[i] }), live: r1?.live ?? [], fix: r.fix ? { how: r.fix.how, byScript: r.fix.byScript, sent: r.fix.sent, stillInvalid: Boolean(r.fix.r2?.fields?.[r.plan.target]?.ariaInvalid), stillShown: Boolean(r.fix.r2?.stillShown) } : null };
+  }
+  return out;
+}
+
+// The facts the user's rules read (null: not measurable on this screen).
+function factsOf(run, findings, kind) {
+  const n = (check) => findings.filter((f) => [].concat(check).includes(f.check)).length;
+  const lists = run.components.some((c) => c.sig && c.kind !== "form");
+  const forms = run.components.some((c) => c.kind === "form") || (run.results.actions ?? []).length > 0;
+  const fetched = kind === "fetched";
+  return {
+    listsWithoutEmptyState: fetched && lists ? n("missing-empty") : null,
+    missingLoadingStates: fetched ? n(["missing-loading", "empty-while-loading"]) : null,
+    errorsSwallowed: fetched || forms ? n(["error-swallowed", "crash"]) : null,
+    doubleSubmits: forms ? n(["double-submit", "retry-duplicate"]) : null,
+    brokenImages: run.baseM.images ? n("broken-image") : null,
+    textOverflows: n(["text-overflow", "page-sideways"]),
+  };
+}
+
+function cannotOf(kind, src, run) {
+  const out = [];
+  if (kind === "static") out.push(`Empty, loading and error: the data on this screen is written in the code${src.staticArrays.length ? ` (${src.staticArrays.slice(0, 3).map((s) => `\`${s.name}\` in ${s.file}:${s.line}`).join(", ")})` : ""}, not fetched, so it can't be empty, slow or fail until it comes from somewhere. Long text, many items and one item were simulated in the DOM instead.`);
+  if (kind === "server") out.push(`Data fetched on the server (${src.server.map((s) => `${s.file}:${s.line}`).join(", ")}) never reaches the browser, so palate can't empty, delay or fail it. ${src.conventions.loading ? `There is a ${src.conventions.loading}.` : "Add loading.tsx next to the route (Next) for the loading state,"} ${src.conventions.error ? `and ${src.conventions.error}.` : "and error.tsx for the error state; test empty with an empty fixture in your data layer."}`);
+  if (kind === "fetched-later") out.push(`The source fetches (${src.fetches.slice(0, 2).map((f) => `${f.file}:${f.line}`).join(", ")}), but nothing was requested during load: probably on an interaction palate didn't make. Those states weren't rendered.`);
+  if (!run.components.some((c) => c.kind === "form") && !(run.results.actions ?? []).length) out.push("Slow interaction, double submit and offline: nothing on this screen sends a request when used.");
+  out.push(run.baseM.images ? "Missing images: <img> elements were failed and checked; CSS background and mask images (logos painted through a mask) just vanish and aren't checked." : "Missing images: this screen has no <img> elements; CSS background and mask images aren't checked.");
+  if (kind !== "static") out.push("WebSockets, server-sent events and Server Actions aren't mocked.");
+  out.push("DOM transforms change the page after React rendered it; a part that re-renders by itself (an autoplaying demo) may undo them.");
+  return out;
+}
+
+// A part fails in a state when a finding names it there, or a page-wide one (a crash, sideways scroll) took it down.
+export const failsIn = (findings, id, s) => findings.some((f) => (f.comp === id && f.states.includes(s)) || (f.affects?.[s] ?? []).includes(id));
+
+// ---- the contact sheet: one row per part, one column per state it has
+async function sheetOf(browser, run, findings, session) {
+  const marks = (c, s) => (failsIn(findings, c.id, s) ? " ✗" : " ✓");
+  const rows = run.components.map((c) => {
+    const states = c.kind === "form" ? (c.sameAs ? ["default"] : ["default", "submitting", "submitted", "submit-error", "offline", "empty-submit", "lost-retry", "recover", "recover-narrow", "narrow"]) : ["default", "empty", "loading", "error", "network", "hang", "long", "many", "one", "images", "narrow"];
+    const cells = states
+      .filter((s) => s === "default" || run.ran[s === "submitted" ? "submitting" : s] || run.cells[c.id]?.[s])
+      .map((s) => ({ caption: `${s === "submitted" ? "after sending" : STATES[s]}${s === "default" || s === "submitted" ? "" : run.cells[c.id]?.[s] ? marks(c, s) : ""}`, file: run.cells[c.id]?.[s] ?? null, note: c.kind === "form" || s === "default" ? "not shot" : "not driven by data here" }));
+    const req = c.kind !== "form" && isDriven(c, run.baseM, run.results.empty) ? " · from the fetched data" : "";
+    return { label: `${label(c)}${c.count ? ` · ${c.count} items` : ""}${c.sameAs ? ` · same form as ${c.sameAs}, tested there` : ""}${req}`, cells };
+  });
+  const pageCells = [
+    { caption: "1440", file: run.pageShot },
+    ...["narrow", "zoom"].map((s) => ({ caption: `${STATES[s]}${findings.some((f) => f.comp === "page" && f.states.includes(s)) ? " ✗" : " ✓"}`, file: fs.existsSync(path.join(session, `page-${s}.png`)) ? path.join(session, `page-${s}.png`) : null })),
+    ...findings.filter((f) => f.comp === "page" && f.crop && fs.existsSync(f.crop) && !/page-(narrow|zoom)\.png$/.test(f.crop)).slice(0, 4).map((f) => ({ caption: `${f.id} ${STATES[f.state]} ✗`, file: f.crop })),
+  ];
+  rows.push({ label: "The page", cells: pageCells.filter((c) => c.file) });
+  const out = path.join(session, "sheet.png");
+  await contactSheet(browser, rows, out, { cell: 300, maxCell: 300 });
+  return out;
+}
+
+// ---- the brief
+function briefOf(dir, route, rec, session) {
+  const tags = routeTags(dir, route);
+  const all = rulesBlock(tags, { failures: false, route, project: projectOf(dir) });
+  // Only the user's state rules belong here (the rest apply to the design, and fix and shoot carry them).
+  const stateRules = all.rules.filter((r) => STATE_METRICS.has(r.check?.metric));
+  const results = checkRules(stateRules, rec.facts ? { ...rec.facts, statesRun: path.basename(session) } : null);
+  const mark = (r) => results.find((x) => x.id === r.id)?.status;
+  const mine = {
+    line: all.line,
+    lines: stateRules.length ? ["## Your rules for states (must pass)", ...stateRules.map((r) => `- ${mark(r) === "fail" ? "✗ FAILS NOW: " : mark(r) === "pass" ? "✓ " : ""}**${r.id}** ${r.rule}`), ""] : [`No state rules yet. To have palate enforce one on every shoot: palate rule add "every list has an empty state" (also loading, errors, double submit, broken images, long text).`, ""],
+  };
+  const { findings, data, source: src } = rec;
+  const reqs = data.requests.map((r) => `${r.method} ${new URL(r.url).pathname} (${r.status})`).filter((v, i, a) => a.indexOf(v) === i);
+  const dataLine = {
+    fetched: `fetched in the browser: ${reqs.join(", ")}. palate rewrote those answers for each state.`,
+    static: `written in the code${src.staticArrays.length ? ` (${src.staticArrays.slice(0, 4).map((s) => `\`${s.name}\` in ${s.file}`).join(", ")})` : ""}. Nothing is fetched while the page loads, so it can't be empty, loading or failing yet; palate simulated long text, many items and one item in the DOM.`,
+    server: `fetched on the server (${src.server.map((s) => `${s.file}:${s.line}`).join(", ")}); the browser never sees those requests.`,
+    "fetched-later": `fetched by the source (${src.fetches.slice(0, 2).map((f) => `${f.file}:${f.line}`).join(", ")}), but not while the page loads.`,
+  }[data.kind];
+  const forms = rec.components.filter((c) => c.kind === "form");
+  const ok = summaryOk(rec);
+  const byComp = rec.components.map((c) => `- **${c.id}** ${c.kind}${c.heading ? ` "${c.heading}"` : ""}${c.count ? `, ${c.count} items` : ""}${c.where?.unsure ? " · where: not sure" : c.where ? ` · ${c.where.file}:${c.where.line}` : ""}${c.sameAs ? ` · same form as ${c.sameAs}` : ""}`);
+  const lines = [
+    mine.line,
+    "",
+    `# States: ${route}`,
+    "",
+    "AI gets a screen 80% of the way; this is the rest: every state of every part, rendered and measured. Build the missing states below, most important first, with the project's own components. Keep the design and its idea; change only what each finding names.",
+    "",
+    ...mine.lines,
+    `Data on this screen: ${dataLine}`,
+    `Source read: ${src.entry ?? "no route file found (routing in code)"}${src.files.length > 1 ? ` and ${src.files.length - 1} file(s) it imports` : ""}; ${src.loading} line(s) handle loading, ${src.error} errors, ${src.empty} empty arrays.`,
+    `Contact sheet: ${slash(rec.sheet ?? path.join(session, "sheet.png"))} (one row per part, one column per state; ✗ marks a finding). Crops: ${slash(path.join(session, "crops"))}.`,
+    "",
+    "## The parts palate found",
+    ...byComp,
+    ...(rec.actions?.length ? [`- ${rec.actions.length} button(s) outside forms, pressed twice to see which send requests.`] : []),
+    "",
+    findings.length ? `## Build these states (${findings.length}, most important first)` : "## No missing states found",
+    ...(findings.length ? [] : ["Every state palate could render held up. Look at the contact sheet anyway: measurements catch what's missing, not whether it's good."]),
+    ...findings.map((f, i) =>
+      [
+        `### ${i + 1}. ${f.id} [${f.severity}] ${f.componentLabel} · ${f.states.map((s) => STATES[s]).join(", ")}`,
+        `- What: ${f.what}`,
+        `- Measured: ${f.measured}`,
+        f.where ? `- Where: ${f.where}` : "",
+        `- Build: ${f.fix}`,
+        f.copy ? `- Copy: ${f.copy}` : "",
+        f.crop ? `- Crop: ${slash(f.crop)}` : "",
+      ]
+        .filter(Boolean)
+        .join("\n"),
+    ),
+    ok.length ? "\n## Measured and fine" : "",
+    ...ok,
+    "",
+    "## What palate could not simulate here",
+    ...rec.cannot.map((c) => `- ${c}`),
+    "",
+    "## How",
+    "- One finding at a time, in this order. Reuse the project's components" + (Object.keys(src.ui).length ? ` (${Object.entries(src.ui).map(([k, v]) => `${k}: ${v}`).join(", ")})` : "") + " and tokens; don't install packages without asking.",
+    "- Empty states say what is empty and what to do next, with the action as a button. Errors say what happened and what to do, with Try again; never fall through to the empty state. Loading is a skeleton shaped like the content (aria-busy on the region), after ~300ms. Pending buttons keep their size, show a spinner or an -ing label, ignore a second press, and stay pending until the outcome is known. A write the user may retry carries an idempotency key made once per submit and reused on the retry. A failed submit moves focus to the first invalid field (or an error summary linking to it), marks it aria-invalid with aria-describedby pointing at a visible message in a live region, keeps every value, and clears when fixed.",
+    "- Real copy in the product's voice; no codes, no blame, no exclamation marks.",
+    "",
+    "## Verify",
+    `When all are done: \`palate states ${route} --verify\`. It renders every state again and puts each finding before | after, measured: fixed or still failing. Then the project's typecheck. Don't commit.`,
+  ];
+  return lines
+    .filter((l, i, a) => !(l === "" && a[i - 1] === ""))
+    .join("\n")
+    .replace(/\n(#{2,3} )/g, "\n\n$1")
+    .replace(/\n{3,}/g, "\n\n");
+}
+
+// What held up, in one line each (so the brief says what was checked, not only what failed).
+function summaryOk(rec) {
+  const out = [];
+  const bad = (c, s) => failsIn(rec.findings, c, s);
+  for (const c of rec.components) {
+    const states = Object.keys(rec.cells[c.id] ?? {}).filter((s) => s !== "default" && s !== "submitted" && s !== "loading-2" && !bad(c.id, s));
+    if (states.length) out.push(`- ${c.id} ${c.kind}${c.heading ? ` "${c.heading}"` : ""}: ${states.map((s) => STATES[s] ?? s).join(", ")} ✓`);
+  }
+  for (const [id, runs] of Object.entries(rec.recovery ?? {})) {
+    for (const [key, r] of Object.entries(runs)) {
+      if (r.skipped || r.accepted) continue;
+      const ok = Object.entries(RECOVERY_CHECKS).filter(([check]) => !rec.findings.some((f) => f.comp === id && f.check === check && f.states.includes(key))).map(([, what]) => what);
+      if (ok.length) out.push(`- ${id} ${STATES[key]}: ${ok.join(", ")} ✓`);
+    }
+  }
+  if (rec.ran.zoom && !rec.findings.some((f) => f.state === "zoom")) out.push(`- Keyboard at 200% zoom: ${rec.ran.zoom.note.split("; ")[1] ?? "Tab pass"}, focus always visible ✓`);
+  if (rec.ran.narrow && !rec.findings.some((f) => f.comp === "page" && f.state === "narrow")) out.push("- 320 wide: no sideways scroll ✓");
+  return out;
+}
+
+// ---- verify: the earlier findings, before | after
+function matchComp(c, list) {
+  return list.find((x) => x.kind === c.kind && x.selector === c.selector) ?? list.find((x) => x.kind === c.kind && c.heading && x.heading === c.heading) ?? list.find((x) => x.kind === c.kind && c.sig && x.sig === c.sig) ?? list.find((x) => x.kind === c.kind && c.formSig && x.formSig === c.formSig) ?? null;
+}
+async function verifyOf(browser, prevDir, now, session) {
+  const prev = readJson(path.join(prevDir, "findings.json"), null);
+  if (!prev) throw new Error(`Could not read ${prevDir}/findings.json`);
+  const rows = [];
+  const lines = [];
+  let fixed = 0;
+  let gone = 0;
+  for (const f of prev.findings) {
+    const pc = prev.components.find((c) => c.id === f.comp);
+    const nc = pc ? matchComp(pc, now.components) : null;
+    const still = now.findings.find((g) => g.check === f.check && (f.comp === "page" ? g.comp === "page" : nc && g.comp === nc.id));
+    // A part palate no longer finds isn't fixed, it's gone (or was never a part): said, not counted.
+    const lost = !still && f.comp !== "page" && !nc;
+    if (lost) gone++;
+    else if (!still) fixed++;
+    const fold = (s) => path.join(session, `page-${s}.png`);
+    const after = f.comp === "page" ? still?.crop ?? f.states.map(fold).find((p) => fs.existsSync(p)) ?? null : nc ? f.states.map((s) => now.cells[nc.id]?.[s]).find(Boolean) ?? null : null;
+    lines.push(`- ${f.id} [${f.severity}] ${f.componentLabel} · ${f.states.map((s) => STATES[s]).join(", ")}: ${still ? `**still failing** (now ${still.id}: ${still.measured})` : lost ? "**part not found now** (not counted as fixed)" : "**fixed**"} · ${f.what}`);
+    rows.push({ label: `${f.id} ${f.componentLabel} · ${f.states.map((s) => STATES[s]).join(", ")} · ${f.check}: ${still ? "STILL FAILING" : lost ? "part not found now" : "fixed"}`, cells: [{ caption: "before", file: f.crop && fs.existsSync(f.crop) ? f.crop : null, note: "no crop" }, { caption: "after", file: after && fs.existsSync(after) ? after : null, note: nc || f.comp === "page" ? "not shot" : "the part is gone" }] });
+  }
+  const fresh = now.findings.filter((g) => !prev.findings.some((f) => f.check === g.check && (g.comp === "page" ? f.comp === "page" : (() => {
+    const pc = prev.components.find((c) => c.id === f.comp);
+    return pc && matchComp(pc, now.components)?.id === g.comp;
+  })())));
+  const sheet = rows.length ? await contactSheet(browser, rows, path.join(session, "before-after.png"), { cell: 520, maxCell: 420 }) : null;
+  const text = [
+    `# Verify the states: ${now.route}`,
+    "",
+    `Before: ${path.basename(prevDir)} (the first run) · after: ${path.basename(session)}. ${fixed} of ${prev.findings.length} finding(s) fixed since the first run, measured${gone ? `; ${gone} belong to parts palate no longer finds` : ""}${fresh.length ? `; ${fresh.length} new since then, listed separately` : ""}.`,
+    sheet ? `Before | after: ${slash(sheet)}. The new contact sheet: ${slash(now.sheet ?? "")}.` : "",
+    "",
+    "## Findings of the first run",
+    ...lines,
+    fresh.length ? `\n## New since the first run (${fresh.length}, not counted above)\n${fresh.map((g) => `- ${g.id} [${g.severity}] ${g.componentLabel} · ${g.states.map((s) => STATES[s]).join(", ")}: ${g.what}${g.crop ? ` Crop: ${slash(g.crop)}` : ""}`).join("\n")}` : "",
+    "",
+    fixed + gone === prev.findings.length && !fresh.length ? "Every state holds up. Open the before | after once to check the new states look right, not only that they exist." : `Fix what is still failing${fresh.length ? " and what is new" : ""}, then run \`palate states ${now.route} --verify\` again.`,
+  ]
+    .filter((l, i, a) => !(l === "" && a[i - 1] === ""))
+    .join("\n");
+  fs.writeFileSync(path.join(session, "verify.md"), text);
+  return { text: `${text}\n\n(Saved to ${slash(path.join(session, "verify.md"))})`, sheet };
+}