quicke2e 0.2.0

package/src/redact.mjs

@@ -0,0 +1,89 @@
+// Declared redaction, shared by the loop (every snapshot) and discover (the map on disk).
+//   redact: [".backup-code", "#card-picker", /recovery code \S+/i]
+// Strings are CSS selectors, RegExps are text patterns. Applied AT THE SOURCE, before any label,
+// title, criterion, trace or map entry is built from the page.
+//
+// Selectors: every matching element -- in the document, open shadow roots and same-origin iframes --
+// gives up its text; that text is then cut out of every page-derived string (the label of a button
+// that CONTAINS it, a name resolved through aria-labelledby, option labels), and candidates inside a
+// match are renamed outright. The cut is separator-flexible ("EEEE-5555-6666" also matches
+// "EEEE 5555 6666"); whole-token for ordinary texts, substring for long letter+digit codes; and only
+// for texts of 4+ letters/digits: a 2-character match ("42") cut every "42" on the page, prices
+// included (audit r9). A short match (a 3-digit CVC) is still renamed as an element; its text is
+// just not hunted elsewhere.
+// Regexes: applied to raw labels, titles and URLs. Text outside any element (the page title) can
+// only be declared this way -- a selector cannot know that text is sensitive.
+
+const esc = (t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+export function textPatterns(texts) {
+  const out = [];
+  for (const t of new Set(texts)) {
+    const chars = [...t].filter((c) => /[A-Za-z0-9]/.test(c));
+    if (chars.length < 4) continue;
+    const body = chars.map(esc).join("[\\s\\-./:]*");
+    // A long text mixing letters and digits ("AB12CD34") cannot collide with ordinary words, so it
+    // is cut as a SUBSTRING, even glued to other text ("Code:AB12CD34x", audit r10). Shorter or
+    // single-class texts keep word boundaries -- that is what keeps "42" out of "€42" and "4217".
+    const strong = chars.length >= 8 && /[A-Za-z]/.test(chars.join("")) && /\d/.test(chars.join(""));
+    out.push(new RegExp(strong ? body : `(?<![A-Za-z0-9])${body}(?![A-Za-z0-9])`, "gi"));
+  }
+  return out;
+}
+
+export async function buildRedactor(page, redact = []) {
+  const sels = redact.filter((x) => typeof x === "string");
+  const res = redact.filter((x) => x instanceof RegExp)
+    .map((r) => new RegExp(r.source, r.flags.includes("g") ? r.flags : r.flags + "g"));
+  let texts = [], inside = new Set();
+  if (sels.length) {
+    const r = await page.evaluate((q) => {
+      const found = [], nodes = [];
+      const walk = (root) => {
+        for (const el of root.querySelectorAll("*")) {
+          if (el.matches(q)) found.push(el);
+          if (el.shadowRoot) walk(el.shadowRoot);
+          if (el.tagName === "IFRAME") { let d = null; try { d = el.contentDocument; } catch {} if (d) walk(d); }
+        }
+      };
+      walk(document);
+      const text = (el) => (el.innerText || el.textContent || "").replace(/\s+/g, " ").trim();
+      for (const el of found) for (const n of [el, ...el.querySelectorAll("[data-jev-node]")])
+        if (n.getAttribute("data-jev-node")) nodes.push(n.getAttribute("data-jev-node"));
+      // a <select>'s text is all its options joined, so each option is collected on its own too
+      const texts = found.flatMap((el) => [text(el), ...[...el.querySelectorAll("option")].map(text)]);
+      return { texts, nodes };
+    }, sels.join(",")).catch(() => ({ texts: [], nodes: [] }));
+    texts = r.texts; inside = new Set(r.nodes);
+  }
+  const pats = [...textPatterns(texts), ...res];
+  const cut = (t) => (t == null ? t : pats.reduce((x, re) => x.replace(re, "<redacted>"), String(t)));
+  return {
+    active: pats.length > 0 || inside.size > 0,
+    cut,
+    url: (u) => (u == null ? u : res.reduce((x, re) => x.replace(re, "<redacted>"), String(u))),
+    isInside: (node) => inside.has(node),
+  };
+}
+
+// Apply a redactor to a snapshot in place.
+export function redactSnapshot(snap, r) {
+  if (!r.active) return;
+  snap.title = r.cut(snap.title);
+  snap.text = r.cut(snap.text);
+  for (const a of snap.actions) {
+    if (r.isInside(a.node) || r.isInside(a.selectNode)) {
+      a.label = "<redacted>"; if (a.optionLabel) a.optionLabel = "<redacted>";
+      if (a.kind === "state" || a.kind === "fill") a.value = "<redacted>";
+    }
+    a.label = r.cut(a.label); if (a.optionLabel) a.optionLabel = r.cut(a.optionLabel);
+    if (a.selectLabel) a.selectLabel = r.cut(a.selectLabel);
+    if (typeof a.value === "string") a.value = r.cut(a.value);
+  }
+}
+
+// Parse CLI --redact values: "/pattern/flags" is a RegExp, anything else a CSS selector.
+export function parseRedactArg(v) {
+  const m = /^\/(.+)\/([a-z]*)$/.exec(v);
+  return m ? new RegExp(m[1], m[2]) : v;
+}

package/src/route.mjs

@@ -0,0 +1,98 @@
+// route: use a discovered MAP to get the loop to the right page before it starts deciding.
+//
+//   1. Jev picks the TARGET page pattern for the goal -- one typed choice over the map's pages.
+//   2. If that pattern has ids (/events/:id), Jev picks the instance by the label of the link
+//      that leads there ("Summer Jam") -- a second typed choice.
+//   3. Code finds the route (BFS over the map's edges) and walks it by role + label. No model.
+// The loop then runs as usual from the target page. The model never navigates blind; it only
+// makes the local choices it is good at.
+import { choose, settle, ARIA } from "./loop.mjs";
+
+const RULES = "Pick the page this goal needs: the page that holds the form or control the goal " +
+  "uses first, or the page the goal asks to reach. Pick STAY if the start page already has it.";
+const MAX = 48;   // under the 52-letter ceiling, with room for STAY
+
+function describe(p) {
+  const bits = [p.pattern, p.headings?.[0] || p.title || ""];
+  for (const f of p.forms || []) {
+    const fields = f.fields.map((x) => x.label).slice(0, 5).join(", ");
+    bits.push(`form ${f.submit?.label || f.name || ""}${fields ? ` (${fields})` : ""}`);
+  }
+  return bits.filter(Boolean).join(" | ").slice(0, 160);
+}
+
+// Cheap lexical prefilter when a map has more pages than the engine can take in one choice.
+function prefilter(pages, goal) {
+  if (pages.length <= MAX) return pages;
+  const words = new Set(goal.toLowerCase().match(/[a-z]{3,}/g) || []);
+  const score = (p) => (describe(p).toLowerCase().match(/[a-z]{3,}/g) || []).filter((w) => words.has(w)).length;
+  return [...pages].sort((a, b) => score(b) - score(a)).slice(0, MAX);
+}
+
+export async function pickTarget(map, goal, engine, startPattern, inputs, redact = []) {
+  const pages = prefilter(map.pages, goal);
+  const criteria = { STAY: `stay on the start page ${startPattern}` };
+  pages.forEach((p, i) => { criteria[`PAGE:${i}`] = describe(p); });
+  const state = { app: map.base.replace(/^https?:\/\//, ""), start: startPattern, pages: pages.length };
+  const d = await choose({ state, criteria, goal, rules: RULES, engine, inputs, redact });
+  const out = { cost: d.cost || 0, ms: d.ms, decisions: [{ choice: d.choice, confidence: d.confidence }] };
+  if (d.choice === "STAY" || !String(d.choice).startsWith("PAGE:")) return { ...out, target: null };
+  const page = pages[Number(d.choice.split(":")[1])];
+  // One instance, or an id-free pattern: done.
+  const into = map.edges.filter((e) => e.to === page.pattern && e.via.label);
+  const byUrl = new Map();
+  for (const e of into) if (!byUrl.has(e.toUrl)) byUrl.set(e.toUrl, e);
+  if (!page.pattern.includes(":id") || byUrl.size <= 1)
+    return { ...out, target: page.urls[0], pattern: page.pattern };
+  const inst = [...byUrl.values()].slice(0, MAX);
+  const c2 = {};
+  inst.forEach((e, i) => { c2[`URL:${i}`] = `${e.via.label} -> ${new URL(e.toUrl).pathname}`; });
+  const d2 = await choose({ state: { ...state, pattern: page.pattern }, criteria: c2, goal,
+    rules: "Pick the item this goal is about.", engine, inputs, redact });
+  out.cost += d2.cost || 0; out.ms += d2.ms;
+  out.decisions.push({ choice: d2.choice, confidence: d2.confidence });
+  const e = inst[Number(String(d2.choice).split(":")[1])] || inst[0];
+  return { ...out, target: e.toUrl, pattern: page.pattern };
+}
+
+// Shortest walk over concrete URLs. Redirect edges are free hops.
+export function findRoute(map, fromUrl, toUrl) {
+  const strip = (u) => u.replace(/#.*$/, "");
+  fromUrl = strip(fromUrl); toUrl = strip(toUrl);
+  if (fromUrl === toUrl) return [];
+  const prev = new Map([[fromUrl, null]]);
+  const q = [fromUrl];
+  while (q.length) {
+    const u = q.shift();
+    for (const e of map.edges) {
+      if (strip(e.fromUrl) !== u || prev.has(strip(e.toUrl))) continue;
+      if (e.via.op === "submit") continue;   // routing never submits a form: that is the test's job
+      prev.set(strip(e.toUrl), e);
+      if (strip(e.toUrl) === toUrl) {
+        const path = [];
+        for (let x = toUrl; prev.get(x); x = strip(prev.get(x).fromUrl)) path.unshift(prev.get(x));
+        return path;
+      }
+      q.push(strip(e.toUrl));
+    }
+  }
+  return null;
+}
+
+// Walk the route by role + label, like a user. Falls back to a direct goto if a hop fails.
+export async function walk(page, route, target) {
+  const hops = [];
+  for (const e of route || []) {
+    if (e.via.op === "redirect") continue;
+    const before = page.url();
+    try {
+      const role = ARIA[e.via.role] || "link", name = e.via.label;
+      try { await page.getByRole(role, { name, exact: true }).first().click({ timeout: 1500 }); }
+      catch { await page.getByRole(role, { name }).first().click({ timeout: 1500 }); }
+      await page.waitForURL((u) => u.toString() !== before, { timeout: 3000 }).catch(() => {});
+      await settle(page);
+      hops.push({ role, label: e.via.label, ok: true });
+    } catch { hops.push({ role: e.via.role, label: e.via.label, ok: false }); break; }
+  }
+  return hops;
+}

package/src/secret.mjs

@@ -0,0 +1,94 @@
+// ONE definition of "looks like a secret", shared by the loop, the in-page snapshot and codegen.
+// A key or a label matching this never has its value sent to an engine or written into a file.
+export const SECRET_SRC = String.raw`pass|pwd|\bpw\b|secret|token|api.?key|access.?key|license.?key|\bpin\b|cvc|cvv|card|iban|otp|2fa|\bssn\b|social.?security|\bauth\b|bearer|credential|private|recovery|mnemonic|seed.?phrase|account.?number|session`;
+export const SECRET = new RegExp(SECRET_SRC, "i");
+export const isSecretKey = (k) => SECRET.test(k || "");
+
+// A STRONG secret (10+ chars, 2+ character classes) cannot be confused with page words, so it is
+// scrubbed fuzzily everywhere. A WEAK one ("admin", "password", "test1234" -- typical seed values) is
+// indistinguishable from ordinary labels: scrubbing it from page text turned the field label
+// "Password" and the links "Admin"/"Administrators" into "<password>" (audit FP1/FP2), broke runs and
+// emitted `name: /^/`. Weak secrets are therefore scrubbed only from the SPEC's own text (goal, done).
+export function isStrong(v) {
+  const t = String(v ?? "");
+  const classes = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((r) => r.test(t)).length;
+  const digits = (t.match(/\d/g) || []).length;
+  // mixed classes, or a long number (card, account, recovery code) -- neither looks like a page word
+  return (t.length >= 10 && classes >= 2) || (/^[\d\s-]+$/.test(t) && digits >= 10);
+}
+export function weakSecretKeys(inputs) {
+  return Object.entries(inputs || {}).filter(([k, v]) => isSecretKey(k) && v != null && String(v).length >= 3 && !isStrong(v)).map(([k]) => k);
+}
+
+const esc = (t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const classesOf = (t) => [/[a-z]/i, /\d/, /[^A-Za-z0-9\s]/].filter((r) => r.test(t)).length;
+function secretPatterns(inputs, { weak = false, weakKeys = [], keepWeak = [] } = {}) {
+  const out = [], partial = [];   // partial forms run LAST, after the whole value had its chance
+  for (const [k, v] of Object.entries(inputs || {})) {
+    if (!isSecretKey(k) || v == null) continue;
+    const val = String(v).trim().replace(/\s+/g, " ");
+    if (val.length < 3) continue;
+    if (!isStrong(val)) {
+      // weak: only the exact value as a whole word -- in spec text always; in page text only for
+      // `weakKeys`, the keys the loop has seen ECHOED (typed, and not on any page before typing)
+      if ((weak && !keepWeak.includes(k)) || weakKeys.includes(k)) out.push({ k, re: new RegExp(`(?<![A-Za-z0-9])${esc(val)}(?![A-Za-z0-9])`, "gi") });
+      continue;
+    }
+    // strong: whole value, plus an 8-char head for a TRUNCATED echo -- but only when the head itself
+    // mixes letters with digits/symbols ("Password" alone would collide with the field label)
+    const forms = [val];
+    const head = val.slice(0, 8);
+    if (val.length > 8 && classesOf(head) >= 2) forms.push(head);
+    // A card is commonly DISPLAYED masked, by its last 4 digits ("ending 6789", "•••• 6789",
+    // "x6789"). That masked form is scrubbed. A bare 4-digit number is NOT: the audit's card ending
+    // 2026 turned "2026 report" into "<card number> report" and the flow picked 2025 (r7).
+    const digits = val.replace(/\D/g, "");
+    if (/^[\d\s-]+$/.test(val) && digits.length >= 12)
+      partial.push({ k, re: new RegExp(`((?:ending(?:\\s+in)?|ends\\s+in|last\\s*(?:4|four)(?:\\s+digits)?)\\s*[:#-]?\\s*|[•*·xX]{1,}[\\s-]?)${digits.slice(-4)}(?!\\d)`, "gi"), keepPrefix: true });
+    const formEnc = (t) => new URLSearchParams({ x: t }).toString().slice(2);
+    for (const f of forms) for (const form of new Set([f, encodeURIComponent(f), formEnc(f)])) {
+      // separator-flexible between every character (a grouped card number "4111-2222-...")
+      const chars = [...form.replace(/[\s+]+/g, "")];
+      out.push({ k, re: new RegExp(chars.map(esc).join("[\\s\\-./+]*") + "[^\\s&?#\"'<>]*", "gi") });
+    }
+  }
+  return out.concat(partial);
+}
+// Placeholders are applied through sentinels, so a later pattern can never match inside an earlier
+// replacement ("<password>").
+function apply(text, pats) {
+  let t = String(text);
+  pats.forEach(({ re, keepPrefix }, i) => {
+    t = t.replace(re, keepPrefix ? (m, pre) => `${pre}\u0001${i}\u0001` : `\u0001${i}\u0001`);
+  });
+  return t.replace(/\u0001(\d+)\u0001/g, (_, i) => `<${pats[Number(i)].k}>`);
+}
+// Page-derived text: strong secrets only.
+export function scrubText(text, inputs, opts) { return apply(text ?? "", secretPatterns(inputs, opts)); }
+// The spec's own words (goal, done): strong AND weak secrets.
+export function scrubSpecText(text, inputs, { keepWeak = [] } = {}) { return apply(text ?? "", secretPatterns(inputs, { weak: true, keepWeak })); }
+export function containsSecret(text, inputs, opts) { return scrubText(text, inputs, opts) !== String(text ?? ""); }
+export function scrub(payload, inputs, opts) {
+  const pats = secretPatterns(inputs, opts);
+  if (!pats.length) return payload;
+  const walk = (x) => typeof x === "string" ? apply(x, pats)
+    : Array.isArray(x) ? x.map(walk)
+    : x && typeof x === "object" ? Object.fromEntries(Object.entries(x).map(([a, b]) => [walk(a), walk(b)])) : x;
+  return walk(payload);
+}
+
+// DECLARED REDACTION. Page content reaches the engine by design -- the engine chooses by what the
+// page says, like any browser agent. Content that must never leave the page is DECLARED in the spec:
+//   redact: [/recovery code \S+/i, /\b\d{4}-[A-Z0-9]{4,}\b/]   // text patterns
+//   redact: ["[data-sensitive]", ".backup-code"]                 // CSS selectors (see loop.mjs)
+// An automatic "looks like a code" rule was built and measured first (audit r7): it broke four flows
+// that worked (newest order, version picker, SKU picker, a year next to a card) because codes carry
+// ordering and identity, and it still leaked four other code shapes. A declaration has neither problem.
+export function redactPatterns(payload, patterns = []) {
+  const res = patterns.filter((p) => p instanceof RegExp).map((p) => new RegExp(p.source, p.flags.includes("g") ? p.flags : p.flags + "g"));
+  if (!res.length) return payload;
+  const walk = (x) => typeof x === "string" ? res.reduce((t, re) => t.replace(re, "<redacted>"), x)
+    : Array.isArray(x) ? x.map(walk)
+    : x && typeof x === "object" ? Object.fromEntries(Object.entries(x).map(([a, b]) => [walk(a), walk(b)])) : x;
+  return walk(payload);
+}

package/src/seen-text.js

@@ -0,0 +1,72 @@
+// Injected into the page. The text a USER perceives, which is what `expect` asserts against.
+//
+// document.body.innerText is not that: a closed <select> contributes EVERY option, so
+// expect:["Growth"] is true before anything is chosen (fixtures/select.html), and Radix's
+// visually-hidden native <select> put every client's name on a page nobody had touched. It also
+// cannot see a typed input value, and it does not enter shadow roots or iframes.
+//
+// Rules: text a sighted user sees, in the flat tree (shadow roots through their slots, same-origin
+// iframes); form controls contribute nothing (assert them with expectState); hidden, aria-hidden,
+// transparent, clipped-to-nothing and off-page text is skipped; spaces around block boxes only, so
+// "€1<span>21</span>" stays "€121".
+() => {
+  const out = [];
+  const SKIP = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "OPTION", "OPTGROUP", "DATALIST", "HEAD"]);
+  // A sighted user's view: not opacity 0, not visibility hidden, not a zero-size clipping box
+  // (a collapsed panel, an sr-only span), not scrolled off the page's top/left edge, not font-size 0.
+  // (audit r7: all four false-passed "Payment confirmed" while "Payment failed" was on screen.)
+  const shown = (el) => {
+    if (el.getAttribute && el.getAttribute("aria-hidden") === "true") return false;
+    if (el.hasAttribute && el.hasAttribute("hidden")) return false;
+    if (el.checkVisibility && !el.checkVisibility({ visibilityProperty: true, opacityProperty: true })) return false;
+    const cs = (el.ownerDocument.defaultView || window).getComputedStyle(el);
+    if (parseFloat(cs.fontSize) === 0) return false;
+    if (cs.display === "contents") return true;
+    const r = el.getBoundingClientRect();
+    const sx = (el.ownerDocument.defaultView || window).scrollX, sy = (el.ownerDocument.defaultView || window).scrollY;
+    if (r.right + sx <= 0 || r.bottom + sy <= 0) return false;
+    const clips = cs.overflow !== "visible" || cs.overflowX !== "visible" || cs.overflowY !== "visible";
+    if (clips && (r.width <= 1 || r.height <= 1)) return false;
+    return true;
+  };
+  const inline = (el) => {
+    const d = (el.ownerDocument.defaultView || window).getComputedStyle(el).display;
+    return d.startsWith("inline") || d === "contents";
+  };
+  const kids = (el) => el.tagName === "SLOT"
+    ? (el.assignedNodes({ flatten: true }).length ? el.assignedNodes({ flatten: true }) : [...el.childNodes])
+    : el.shadowRoot ? [...el.shadowRoot.childNodes] : [...el.childNodes];
+  // CSS text-transform is part of what a user sees ("EVENT"), as innerText also reflects.
+  const transform = (text, el) => {
+    const tt = el ? (el.ownerDocument.defaultView || window).getComputedStyle(el).textTransform : "none";
+    if (tt === "uppercase") return text.toUpperCase();
+    if (tt === "lowercase") return text.toLowerCase();
+    if (tt === "capitalize") return text.replace(/(^|\s)(\S)/g, (m, a, b) => a + b.toUpperCase());
+    return text;
+  };
+  const walk = (node) => {
+    if (node.nodeType === 3) { out.push(transform(node.data, node.parentElement)); return; }
+    if (node.nodeType !== 1) return;
+    const el = node;
+    if (SKIP.has(el.tagName) || !shown(el)) return;
+    const tag = el.tagName;
+    // Form controls contribute NOTHING. A control's value is not a RESULT of the work -- the loop
+    // typed or chose it itself (audit r7: expect "QuarterPush" matched our own typed input while
+    // Save did nothing), and a <select>'s option list was the original false pass. Assert a
+    // control's state with expectState: [{ role, name, value }].
+    if (tag === "SELECT" || tag === "TEXTAREA" || tag === "INPUT") {
+      const t = (el.getAttribute("type") || "").toLowerCase();
+      if (tag === "INPUT" && ["submit", "button", "reset"].includes(t)) out.push(" " + el.value + " ");   // a button's caption is text
+      return;
+    }
+    const block = !inline(el);
+    if (block) out.push(" ");
+    if (tag === "IFRAME") { let d = null; try { d = el.contentDocument; } catch {} if (d?.body) walk(d.body); }
+    else for (const k of kids(el)) walk(k);
+    if (block) out.push(" ");
+  };
+  if (document.body) walk(document.body);
+  // Zero-width characters are KEPT: stripping them made the decoy "Access<U+200B> code accepted"
+  // byte-equal to the expected "Access code accepted" -- a false pass (fixtures/aria-label.html).
+  return out.join("").replace(/\s+/g, " ").trim();
+}

package/src/snapshot.js

@@ -0,0 +1,246 @@
+// A+ : src/snapshot.js extended. Diff against src/snapshot.js, and nothing else:
+//   1. DEEP WALK. Candidates are collected in document order through OPEN shadow roots and
+//      SAME-ORIGIN iframes (contentDocument), instead of document.querySelectorAll(SEL).
+//   2. ROOT-SCOPED NAMES. aria-labelledby / label[for] resolve in el.getRootNode(), not document,
+//      so a label inside the same shadow root (Shoelace) or iframe document is found.
+//   3. PER-DOCUMENT STYLE. getComputedStyle from the element's own window (iframes).
+//   4. NATIVE <select>: one `select` action PER OPTION with a distinct node, so compact() cannot
+//      dedupe them to the placeholder; the <select> itself is the act target (selectNode).
+//   5. HIDDEN CHECKBOX INPUT: a checkbox/radio <input> that fails visible() (opacity 0, 0x0 --
+//      Element Plus, Shoelace, antd) but whose <label> is visible is offered ONCE, stamped on the
+//      label (the thing a user clicks), with the input's name and checked state.
+//   8. SLOTTED TEXT. Inside a shadow root, innerText does not follow <slot> into the host's light
+//      DOM, so a Shoelace <button part=base><slot> read as "button". Text is read through slots.
+//   7. <input type=submit|button|reset> is named by its value (accname spec; src/ fell through to
+//      the name/id attribute, so a legacy "Create project" button was offered as "save"), and a
+//      <select> is never named by its own innerText (that is every option, concatenated).
+//   6. Stamps carry a per-snapshot generation, so a stale stamp from an earlier pass never collides.
+() => {
+  const ZW = /[​-‍]/g;
+  const strip = (v) => (v || "").replace(ZW, "").replace(/\s+/g, " ").trim();
+  const cs = (el) => (el.ownerDocument.defaultView || window).getComputedStyle(el);
+
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1) return false;
+    const s = cs(el);
+    if (s.visibility === "hidden" || s.display === "none" || Number(s.opacity) === 0) return false;
+    if (el.closest("[hidden],[aria-hidden='true'],[data-state='inactive']")) return false;
+    // FIX (v1): an element can have a box and still be invisible (fixtures/negative.html):
+    // an ancestor at opacity 0, a zero-size overflow:hidden wrapper, or positioned off-screen.
+    // Form controls are exempt from the opacity rule: Element Plus renders its real combobox input
+    // inside an opacity-0 wrapper and the user clicks the wrapper (bake-off re-run, vue-ep T2 0/5).
+    const control = /^(INPUT|SELECT|TEXTAREA)$/.test(el.tagName) || el.getAttribute("role") === "combobox";
+    if (el.checkVisibility && !el.checkVisibility({ opacityProperty: !control, visibilityProperty: true })) return false;
+    if (r.right <= 0 || r.bottom <= 0) return false;
+    for (let p = el.parentElement; p && p !== el.ownerDocument.body; p = p.parentElement) {
+      const ps = cs(p);
+      if (ps.overflow === "visible" && ps.overflowX === "visible" && ps.overflowY === "visible") continue;
+      const pr = p.getBoundingClientRect();
+      if (pr.width < 1 || pr.height < 1) return false;
+    }
+    return true;
+  };
+
+  // ---- popup detection: unchanged from src/snapshot.js (top document) ----
+  const bodyChildren = [...document.body.children].filter((el) => el.tagName !== "SCRIPT" && el.tagName !== "STYLE");
+  const hasBox = (el) => { const r = el.getBoundingClientRect(); return r.width >= 1 && r.height >= 1; };
+  const shown = (el) => { const s = cs(el); return s.display !== "none" && s.visibility !== "hidden"; };
+  const floats = (el) => { const p = cs(el).position; return p === "fixed" || p === "absolute"; };
+  const OVERLAY_ROLE = "[role=dialog],[role=alertdialog],[role=listbox],[role=menu],[role=tooltip]";
+  const OVERLAY_IN = (el) => [el, ...el.querySelectorAll(OVERLAY_ROLE)].some((n) => n.matches(OVERLAY_ROLE) && shown(n));
+  const CONTROLLED = (el) => [...document.querySelectorAll('[aria-expanded="true"][aria-controls]')]
+    .some((t) => { const c = document.getElementById(t.getAttribute("aria-controls")); return c && el.contains(c) && !el.contains(t); });
+  const EXPANDED_OUTSIDE = (el) => [...document.querySelectorAll('[aria-expanded="true"]')].some((n) => !el.contains(n));
+  const popupRoots = bodyChildren.filter((el) => {
+    if (!shown(el)) return false;
+    if (!(hasBox(el) || [...el.querySelectorAll("*")].some(hasBox))) return false;
+    const kid = [...el.children].find((c) => shown(c) && hasBox(c));
+    if (floats(el) || (kid && floats(kid))) return OVERLAY_IN(el) || CONTROLLED(el);
+    if (!el.matches(OVERLAY_ROLE) || !hasBox(el)) return false;
+    return EXPANDED_OUTSIDE(el);
+  });
+  const inPopup = (el) => popupRoots.some((p) => p.contains(el));
+
+  // 2. root-scoped lookups
+  // 8. text through <slot>s (flat tree), used wherever a shadow-root element's innerText is read
+  const flat = (node) => {
+    if (node.nodeType === 3) return node.data;
+    if (node.nodeType !== 1) return "";
+    if (node.tagName === "SLOT") { const as = node.assignedNodes({ flatten: true });
+      return (as.length ? as : [...node.childNodes]).map(flat).join(" "); }
+    if (node.tagName === "STYLE" || node.tagName === "SCRIPT") return "";
+    const kids = node.shadowRoot ? [...node.shadowRoot.childNodes] : [...node.childNodes];
+    return kids.map(flat).join(" ");
+  };
+  const textOf = (el) => strip(el.getRootNode() instanceof ShadowRoot ? flat(el) : el.innerText);
+  const byId = (el, id) => { const r = el.getRootNode(); return (r.getElementById ? r.getElementById(id) : null) || el.ownerDocument.getElementById(id); };
+  const labelFor = (el) => el.id ? el.getRootNode().querySelector?.(`label[for="${CSS.escape(el.id)}"]`) : null;
+  const accName = (el) => {
+    const role = el.getAttribute("role");
+    let l = strip(el.getAttribute("aria-label"));
+    if (!l) {
+      const ids = (el.getAttribute("aria-labelledby") || "").split(/\s+/).filter(Boolean);
+      l = strip(ids.map((id) => { const t = byId(el, id); return t ? textOf(t) : ""; }).join(" "));
+    }
+    if (!l) { const lab = labelFor(el); if (lab) l = textOf(lab); }
+    if (!l) { const wrap = el.closest("label"); if (wrap) l = textOf(wrap); }
+    if (!l && el.tagName === "INPUT" && /^(submit|button|reset)$/i.test(el.type)) l = strip(el.value);
+    if (!l) l = strip(el.getAttribute("placeholder"));
+    const valueBearing = role === "combobox" || role === "listbox" || role === "spinbutton";
+    // SECURITY (audit S1): an editable element's text is its CONTENT, never its name.
+    if (!l && !valueBearing && !el.isContentEditable && !["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName)) l = textOf(el);
+    if (!l) l = strip(el.getAttribute("title"));
+    if (!l) {
+      const n = el.getAttribute("name") || el.getAttribute("id") || el.getAttribute("type") || "";
+      if (!/^[_:]?[rR][_:]|^[_:]r|^_R_/.test(n)) l = strip(n);
+    }
+    return l.slice(0, 80) || "(unlabeled)";
+  };
+
+  const selectionOf = (el) => {
+    if (el.tagName === "SELECT") return strip(el.selectedOptions?.[0]?.label || "");
+    if (typeof el.value === "string" && strip(el.value)) return strip(el.value);
+    const own = strip(el.innerText);
+    if (own) return own;
+    const name = accName(el);
+    let node = el, r0 = el.getBoundingClientRect();
+    for (let i = 0; i < 4 && node.parentElement; i++) {
+      node = node.parentElement;
+      const r = node.getBoundingClientRect();
+      if (r.height > r0.height * 2.5) break;
+      if (node.querySelectorAll("input,textarea,select,button,a[href],[role=combobox]").length > 1) break;
+      const t = strip(node.innerText);
+      if (t && t !== name) return t;
+    }
+    return "";
+  };
+
+  const roleOf = (el) => {
+    const explicit = el.getAttribute("role");
+    if (explicit) return explicit;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "a") return "link";
+    if (tag === "button") return "button";
+    if (tag === "select") return "combobox";
+    if (tag === "textarea") return "textbox";
+    if (tag === "input") {
+      const t = (el.getAttribute("type") || "text").toLowerCase();
+      if (t === "checkbox") return "checkbox";
+      if (t === "radio") return "radio";
+      if (t === "submit" || t === "button") return "button";
+      if (t === "password") return "password";
+      return "textbox";
+    }
+    return tag;
+  };
+
+  const SEL = [
+    "input:not([type=hidden])", "textarea", "select", "button", "a[href]",
+    "[role=button]", "[role=tab]", "[role=link]", "[role=checkbox]", "[role=switch]",
+    "[role=option]", "[role=menuitem]", "[role=menuitemradio]", "[role=menuitemcheckbox]",
+    "[role=combobox]", "[role=radio]",
+    "[contenteditable='']", "[contenteditable=true]",
+  ].join(",");
+
+  // 1. deep walk in document order: light DOM, then a host's shadow root at the host's position,
+  //    then a same-origin iframe's document at the iframe's position.
+  const found = [];
+  const walk = (root) => {
+    const tw = (root.ownerDocument || root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    for (let el = tw.nextNode(); el; el = tw.nextNode()) {
+      if (el.matches(SEL)) found.push(el);
+      if (el.shadowRoot) walk(el.shadowRoot);
+      if (el.tagName === "IFRAME") {
+        let d = null; try { d = el.contentDocument; } catch {}
+        if (d && d.body && visible(el)) walk(d.body);
+      }
+    }
+  };
+  walk(document.body);
+
+  // v1: which form does a control belong to, and does this button SUBMIT it? compact() uses this
+  // to hold back a form's submit while a field the spec names in that same form is still unset.
+  const formList = [];
+  const formOf = (el) => { const f = el.form || el.closest("form"); if (!f) return -1;
+    let i = formList.indexOf(f); if (i < 0) { formList.push(f); i = formList.length - 1; } return i; };
+  const submits = (el) => {
+    const t = (el.getAttribute("type") || "").toLowerCase();
+    if (el.tagName === "BUTTON") return formOf(el) >= 0 && (t === "submit" || t === "");
+    return el.tagName === "INPUT" && t === "submit";
+  };
+
+  const actions = [];
+  const gen = Math.random().toString(36).slice(2, 6);
+  let n = 0;
+  const stampedNow = new WeakSet();
+  const stamp = (el) => { const node = `${gen}n${n++}`; el.setAttribute("data-jev-node", node); stampedNow.add(el); return node; };
+  const proxied = new WeakSet();
+
+  for (const el of found) {
+    const tag = el.tagName.toLowerCase();
+    const type = (el.type || "").toLowerCase();
+    if (!visible(el)) {
+      // 5. hidden checkbox/radio input operated through its visible label
+      if (tag === "input" && (type === "checkbox" || type === "radio") && !el.disabled) {
+        const lab = el.closest("label") || labelFor(el);
+        if (lab && visible(lab) && !proxied.has(lab)) {
+          proxied.add(lab);
+          const node = stamp(lab);
+          actions.push({ id: `click:${node}`, kind: "click", node, label: accName(el), role: type, tag: "label",
+            popup: inPopup(lab), value: "", checked: el.checked, proxy: true });
+        }
+      }
+      continue;
+    }
+    if (el.disabled) continue;
+    const role = roleOf(el);
+    const node = stamp(el);
+    const label = accName(el);
+    const popup = inPopup(el);
+    const form = formOf(el);
+
+    if (tag === "select") {
+      // 4. one action per option, distinct node; act target = the <select>
+      [...el.options].forEach((opt, i) => actions.push({ id: `select:${node}:${i}`, kind: "select", node: `${node}#${i}`,
+        selectNode: node, selectLabel: label, optionLabel: opt.label || opt.value,
+        label: `${label}: ${opt.label || opt.value}`, value: opt.value, current_value: el.value, role: "option", popup, form }));
+      actions.push({ id: `state:${node}`, kind: "state", node, label, role, tag, popup,
+        value: strip(el.selectedOptions?.[0]?.label || el.value || "") });
+      continue;
+    }
+    const editable = (tag === "input" && !["checkbox", "radio", "submit", "button"].includes(type))
+      || tag === "textarea" || el.isContentEditable;
+    if (editable && role !== "combobox")
+      actions.push({ id: `fill:${node}`, kind: "fill", node, label, role, tag, popup, form, itype: type,
+        value: strip(el.value ?? el.innerText ?? ""),
+        secret: type === "password" || new RegExp("__SECRET_SRC__", "i").test(`${label} ${el.name || ""} ${el.getAttribute("autocomplete") || ""}`) });
+    if (tag === "label") proxied.add(el);
+    actions.push({ id: `click:${node}`, kind: "click", node, label, role, tag, popup, form,
+      ...(submits(el) ? { submit: true } : {}),
+      value: role === "combobox" ? selectionOf(el).slice(0, 40) : strip(typeof el.value === "string" ? el.value : ""),
+      ...(el.getAttribute("aria-selected") !== null ? { selected: el.getAttribute("aria-selected") === "true" } : {}),
+      ...(el.getAttribute("aria-expanded") !== null ? { expanded: el.getAttribute("aria-expanded") === "true" } : {}),
+      ...(el.getAttribute("aria-haspopup") && el.getAttribute("aria-haspopup") !== "false" ? { haspopup: true } : {}),
+      ...(el.getAttribute("aria-checked") !== null ? { checked: el.getAttribute("aria-checked") === "true" }
+        : typeof el.checked === "boolean" && ["checkbox", "radio"].includes(type) ? { checked: el.checked } : {}) });
+  }
+
+  for (const root of popupRoots) {
+    const alreadyCovered = actions.some((a) => a.popup && root.querySelector(`[data-jev-node="${a.node}"]`));
+    if (alreadyCovered) continue;
+    for (const el of root.querySelectorAll("*")) {
+      if (!visible(el)) continue;
+      if (stampedNow.has(el)) continue;
+      const txt = strip(el.innerText);
+      if (!txt || txt.length > 60) continue;
+      if ([...el.children].some((c) => visible(c) && strip(c.innerText) === txt)) continue;
+      if ([...el.children].filter((c) => visible(c) && strip(c.innerText)).length > 1) continue;
+      const node = stamp(el);
+      actions.push({ id: `click:${node}`, kind: "click", node, label: txt, role: "option", tag: el.tagName.toLowerCase(), popup: true, value: "" });
+    }
+  }
+
+  const text = strip((document.body && document.body.innerText) || "").slice(0, 1200);
+  return { url: location.href, title: document.title, text, actions };
+}