mindweave 3.2.6 → 3.2.7

package/dist/tools/uiPage.js

@@ -17,318 +17,318 @@
  */
 import { createHash } from "node:crypto";
 import { writeFile } from "node:fs/promises";
-import { CdpConnection, listTargets, pageTargets } from "./cdp.js";
+import { CdpConnection, listTargets, listTargetsPatiently, pageTargets } from "./cdp.js";
 // ── the script that runs inside the page ────────────────────────────────────
 /**
  * Reads the page: every control a person could use, its name and state, and the text
  * around them. Returns plain data. Kept as one string so it is sent whole each time and
  * never depends on anything the page defined.
  */
-const READ_SCRIPT = String.raw `(() => {
-  const S = window.__mwui || (window.__mwui = { ids: new WeakMap(), els: new Map(), next: 1 });
-  const idOf = (el) => { let id = S.ids.get(el); if (!id) { id = S.next++; S.ids.set(el, id); } S.els.set(id, new WeakRef(el)); return id; };
-  const txt = (s) => (s || "").replace(/\s+/g, " ").trim();
-  const clip = (s, n) => (s.length > n ? s.slice(0, n - 1) + "…" : s);
-  const SKIP = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "HEAD", "META", "LINK"]);
-  const ROLE = { button: "button", link: "hyperlink", tab: "tabitem", menuitem: "menuitem", menuitemcheckbox: "menuitem",
-    menuitemradio: "menuitem", checkbox: "checkbox", switch: "checkbox", radio: "radiobutton", option: "listitem",
-    treeitem: "treeitem", combobox: "combobox", textbox: "edit", searchbox: "edit", slider: "slider", spinbutton: "edit" };
-  const styleOf = (el) => { try { return getComputedStyle(el); } catch { return null; } };
-  function kindOf(el) {
-    const role = (el.getAttribute("role") || "").trim().split(/\s+/)[0];
-    if (role && ROLE[role]) return ROLE[role];
-    const tag = el.tagName;
-    if (tag === "A" && el.hasAttribute("href")) return "hyperlink";
-    if (tag === "BUTTON" || tag === "SUMMARY") return "button";
-    if (tag === "SELECT") return "combobox";
-    if (tag === "TEXTAREA") return "edit";
-    if (tag === "INPUT") {
-      const t = (el.type || "text").toLowerCase();
-      if (t === "hidden") return null;
-      if (["button", "submit", "reset", "image", "file", "color"].includes(t)) return "button";
-      if (t === "checkbox") return "checkbox";
-      if (t === "radio") return "radiobutton";
-      if (t === "range") return "slider";
-      return "edit";
-    }
-    if (el.isContentEditable && !(el.parentElement && el.parentElement.isContentEditable)) return "edit";
-    if (tag === "LABEL") return null; // its input is listed instead
-    // Anything the page made clickable itself (a div with a click handler shows a pointer):
-    // listed once, at the outermost element with the pointer, not at every child inheriting it.
-    const st = styleOf(el);
-    if (st && st.cursor === "pointer") {
-      const ps = el.parentElement && styleOf(el.parentElement);
-      if (!ps || ps.cursor !== "pointer") return "clickable";
-    }
-    if (el.hasAttribute("onclick")) return "clickable";
-    return null;
-  }
-  const shown = (el) => {
-    const r = el.getBoundingClientRect();
-    if (r.width < 1 || r.height < 1) return null;
-    if (el.checkVisibility && !el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) return null;
-    return r;
-  };
-  function nameOf(el, kind) {
-    const by = el.getAttribute("aria-labelledby");
-    if (by) { const t = txt(by.split(/\s+/).map((id) => (document.getElementById(id) || {}).textContent || "").join(" ")); if (t) return t; }
-    const al = txt(el.getAttribute("aria-label")); if (al) return al;
-    if (el.labels && el.labels.length) { const t = txt([...el.labels].map((l) => l.innerText).join(" ")); if (t) return t; }
-    if (el.tagName === "INPUT" && ["button", "submit", "reset"].includes(el.type)) { const v = txt(el.value); if (v) return v; }
-    if (el.tagName === "INPUT" && el.type === "image") { const a = txt(el.alt); if (a) return a; }
-    if (kind !== "edit" && kind !== "combobox") {
-      const inner = txt(el.innerText); if (inner) return inner;
-      const img = el.querySelector("img[alt]"); if (img && txt(img.alt)) return txt(img.alt);
-      const st = el.querySelector("svg title"); if (st && txt(st.textContent)) return txt(st.textContent);
-    }
-    const title = txt(el.getAttribute("title")); if (title) return title;
-    const ph = txt(el.getAttribute("placeholder") || el.getAttribute("data-placeholder")); if (ph) return ph;
-    return "";
-  }
-  function valueOf(el, kind) {
-    if (el.tagName === "INPUT" && el.type === "password") return "";
-    if (el.tagName === "SELECT") return txt(el.selectedOptions[0] ? el.selectedOptions[0].text : "");
-    if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
-      if (["checkbox", "radio", "button", "submit", "reset", "image", "file", "color"].includes(el.type)) return "";
-      return txt(el.value);
-    }
-    if (kind === "edit" && el.isContentEditable) return txt(el.innerText);
-    return "";
-  }
-  function stateOf(el) {
-    const s = [];
-    const a = (n) => el.getAttribute(n);
-    if (el.type === "checkbox" || el.type === "radio") s.push(el.checked ? "checked" : "unchecked");
-    else if (a("aria-checked") === "true") s.push("checked");
-    else if (a("aria-checked") === "false") s.push("unchecked");
-    if (a("aria-selected") === "true") s.push("selected");
-    if (a("aria-pressed") === "true") s.push("pressed");
-    if (a("aria-expanded") === "true") s.push("expanded");
-    else if (a("aria-expanded") === "false") s.push("collapsed");
-    if (a("aria-current") && a("aria-current") !== "false") s.push("current");
-    if (el.disabled || a("aria-disabled") === "true") s.push("disabled");
-    if (el.tagName === "INPUT" && el.type === "password") s.push("password");
-    if (el.required || a("aria-required") === "true") s.push("required");
-    if (a("aria-invalid") === "true" || (el.validity && el.willValidate && !el.validity.valid && el.value)) s.push("invalid");
-    return s;
-  }
-  const inView = (r) => r.bottom > 0 && r.right > 0 && r.top < innerHeight && r.left < innerWidth;
-
-  const controls = [];
-  const listed = new Set();
-  let walked = 0, more = 0;
-  const MAX = 400;
-  function consider(el) {
-    const kind = kindOf(el);
-    if (!kind) return;
-    let r = shown(el);
-    let viaLabel = false;
-    // A styled checkbox is often an invisible input behind its visible label.
-    if (!r && (el.type === "checkbox" || el.type === "radio") && el.labels && el.labels[0]) { r = shown(el.labels[0]); viaLabel = true; }
-    if (!r) return;
-    if (controls.length >= MAX) { more++; return; }
-    listed.add(el);
-    const state = stateOf(el);
-    if (!inView(r)) state.push("out of view");
-    // Something else is on top of it at its centre: a person could not press it (a dialog's backdrop, an overlay).
-    if (!viaLabel && inView(r)) {
-      const cx = Math.min(Math.max(r.left + r.width / 2, 0), innerWidth - 1), cy = Math.min(Math.max(r.top + r.height / 2, 0), innerHeight - 1);
-      const root = el.getRootNode();
-      const hit = root.elementFromPoint ? root.elementFromPoint(cx, cy) : document.elementFromPoint(cx, cy);
-      if (hit && hit !== el && !el.contains(hit) && !hit.contains(el)) state.push("covered");
-    }
-    const actions = kind === "edit" || kind === "combobox" && el.tagName === "SELECT" ? ["type"] : ["click"];
-    if (kind === "combobox" && el.tagName !== "SELECT") actions.push("type");
-    controls.push({ id: String(idOf(el)), window: 0, kind, name: clip(nameOf(el, kind), 80), value: clip(valueOf(el, kind), 80), actions, state });
-  }
-  function walk(root) {
-    const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-      acceptNode: (n) => (SKIP.has(n.tagName) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
-    });
-    for (let el = tw.nextNode(); el; el = tw.nextNode()) {
-      if (++walked > 12000) return;
-      consider(el);
-      if (el.shadowRoot) walk(el.shadowRoot);
-    }
-  }
-  if (document.body) walk(document.body);
-
-  // The words on the page that are not controls, one line per block, in reading order.
-  const texts = [];
-  const blockCache = new Map();
-  const blockOf = (el) => {
-    let e = el;
-    while (e && e !== document.body) {
-      if (blockCache.has(e)) return blockCache.get(e);
-      const st = styleOf(e);
-      if (st && st.display !== "inline" && st.display !== "contents") { blockCache.set(e, e); return e; }
-      e = e.parentElement;
-    }
-    return document.body;
-  };
-  const insideControl = (el) => { for (let e = el, i = 0; e && i < 12; e = e.parentElement, i++) if (listed.has(e)) return true; return false; };
-  let cur = null, buf = "", total = 0;
-  const flush = () => { const t = txt(buf); if (t && texts.length < 80) { texts.push({ window: 0, text: clip(t, 200) }); total += t.length; } buf = ""; };
-  if (document.body) {
-    const tw = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
-    for (let n = tw.nextNode(); n && texts.length < 80 && total < 6000; n = tw.nextNode()) {
-      const t = n.data;
-      if (!t || !t.trim()) continue;
-      const p = n.parentElement;
-      if (!p || SKIP.has(p.tagName) || insideControl(p) || !shown(p)) continue;
-      const b = blockOf(p);
-      if (b !== cur) { flush(); cur = b; }
-      buf += " " + t;
-    }
-    flush();
-  }
-  // What "scrolled" means here: the page itself, or, in an app whose content scrolls
-  // inside a panel (a chat, a feed), the biggest such panel.
-  let se = document.scrollingElement || document.documentElement;
-  if (se.scrollHeight - innerHeight < 2) {
-    let best = null, area = 0;
-    for (const el of document.querySelectorAll("body *")) {
-      if (el.scrollHeight - el.clientHeight < 2) continue;
-      const oy = (styleOf(el) || {}).overflowY;
-      if (oy !== "auto" && oy !== "scroll") continue;
-      const a = el.clientWidth * el.clientHeight;
-      if (a > area) { area = a; best = el; }
-    }
-    if (best) se = best;
-  }
-  const scrollMax = se === document.scrollingElement || se === document.documentElement ? se.scrollHeight - innerHeight : se.scrollHeight - se.clientHeight;
-  return {
-    controls, texts, more,
-    page: { url: location.href, title: document.title, scrollY: Math.round(se.scrollTop), scrollMax: Math.max(0, Math.round(scrollMax)), width: innerWidth, height: innerHeight },
-  };
+const READ_SCRIPT = String.raw `(() => {
+  const S = window.__mwui || (window.__mwui = { ids: new WeakMap(), els: new Map(), next: 1 });
+  const idOf = (el) => { let id = S.ids.get(el); if (!id) { id = S.next++; S.ids.set(el, id); } S.els.set(id, new WeakRef(el)); return id; };
+  const txt = (s) => (s || "").replace(/\s+/g, " ").trim();
+  const clip = (s, n) => (s.length > n ? s.slice(0, n - 1) + "…" : s);
+  const SKIP = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "HEAD", "META", "LINK"]);
+  const ROLE = { button: "button", link: "hyperlink", tab: "tabitem", menuitem: "menuitem", menuitemcheckbox: "menuitem",
+    menuitemradio: "menuitem", checkbox: "checkbox", switch: "checkbox", radio: "radiobutton", option: "listitem",
+    treeitem: "treeitem", combobox: "combobox", textbox: "edit", searchbox: "edit", slider: "slider", spinbutton: "edit" };
+  const styleOf = (el) => { try { return getComputedStyle(el); } catch { return null; } };
+  function kindOf(el) {
+    const role = (el.getAttribute("role") || "").trim().split(/\s+/)[0];
+    if (role && ROLE[role]) return ROLE[role];
+    const tag = el.tagName;
+    if (tag === "A" && el.hasAttribute("href")) return "hyperlink";
+    if (tag === "BUTTON" || tag === "SUMMARY") return "button";
+    if (tag === "SELECT") return "combobox";
+    if (tag === "TEXTAREA") return "edit";
+    if (tag === "INPUT") {
+      const t = (el.type || "text").toLowerCase();
+      if (t === "hidden") return null;
+      if (["button", "submit", "reset", "image", "file", "color"].includes(t)) return "button";
+      if (t === "checkbox") return "checkbox";
+      if (t === "radio") return "radiobutton";
+      if (t === "range") return "slider";
+      return "edit";
+    }
+    if (el.isContentEditable && !(el.parentElement && el.parentElement.isContentEditable)) return "edit";
+    if (tag === "LABEL") return null; // its input is listed instead
+    // Anything the page made clickable itself (a div with a click handler shows a pointer):
+    // listed once, at the outermost element with the pointer, not at every child inheriting it.
+    const st = styleOf(el);
+    if (st && st.cursor === "pointer") {
+      const ps = el.parentElement && styleOf(el.parentElement);
+      if (!ps || ps.cursor !== "pointer") return "clickable";
+    }
+    if (el.hasAttribute("onclick")) return "clickable";
+    return null;
+  }
+  const shown = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1) return null;
+    if (el.checkVisibility && !el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) return null;
+    return r;
+  };
+  function nameOf(el, kind) {
+    const by = el.getAttribute("aria-labelledby");
+    if (by) { const t = txt(by.split(/\s+/).map((id) => (document.getElementById(id) || {}).textContent || "").join(" ")); if (t) return t; }
+    const al = txt(el.getAttribute("aria-label")); if (al) return al;
+    if (el.labels && el.labels.length) { const t = txt([...el.labels].map((l) => l.innerText).join(" ")); if (t) return t; }
+    if (el.tagName === "INPUT" && ["button", "submit", "reset"].includes(el.type)) { const v = txt(el.value); if (v) return v; }
+    if (el.tagName === "INPUT" && el.type === "image") { const a = txt(el.alt); if (a) return a; }
+    if (kind !== "edit" && kind !== "combobox") {
+      const inner = txt(el.innerText); if (inner) return inner;
+      const img = el.querySelector("img[alt]"); if (img && txt(img.alt)) return txt(img.alt);
+      const st = el.querySelector("svg title"); if (st && txt(st.textContent)) return txt(st.textContent);
+    }
+    const title = txt(el.getAttribute("title")); if (title) return title;
+    const ph = txt(el.getAttribute("placeholder") || el.getAttribute("data-placeholder")); if (ph) return ph;
+    return "";
+  }
+  function valueOf(el, kind) {
+    if (el.tagName === "INPUT" && el.type === "password") return "";
+    if (el.tagName === "SELECT") return txt(el.selectedOptions[0] ? el.selectedOptions[0].text : "");
+    if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
+      if (["checkbox", "radio", "button", "submit", "reset", "image", "file", "color"].includes(el.type)) return "";
+      return txt(el.value);
+    }
+    if (kind === "edit" && el.isContentEditable) return txt(el.innerText);
+    return "";
+  }
+  function stateOf(el) {
+    const s = [];
+    const a = (n) => el.getAttribute(n);
+    if (el.type === "checkbox" || el.type === "radio") s.push(el.checked ? "checked" : "unchecked");
+    else if (a("aria-checked") === "true") s.push("checked");
+    else if (a("aria-checked") === "false") s.push("unchecked");
+    if (a("aria-selected") === "true") s.push("selected");
+    if (a("aria-pressed") === "true") s.push("pressed");
+    if (a("aria-expanded") === "true") s.push("expanded");
+    else if (a("aria-expanded") === "false") s.push("collapsed");
+    if (a("aria-current") && a("aria-current") !== "false") s.push("current");
+    if (el.disabled || a("aria-disabled") === "true") s.push("disabled");
+    if (el.tagName === "INPUT" && el.type === "password") s.push("password");
+    if (el.required || a("aria-required") === "true") s.push("required");
+    if (a("aria-invalid") === "true" || (el.validity && el.willValidate && !el.validity.valid && el.value)) s.push("invalid");
+    return s;
+  }
+  const inView = (r) => r.bottom > 0 && r.right > 0 && r.top < innerHeight && r.left < innerWidth;
+
+  const controls = [];
+  const listed = new Set();
+  let walked = 0, more = 0;
+  const MAX = 400;
+  function consider(el) {
+    const kind = kindOf(el);
+    if (!kind) return;
+    let r = shown(el);
+    let viaLabel = false;
+    // A styled checkbox is often an invisible input behind its visible label.
+    if (!r && (el.type === "checkbox" || el.type === "radio") && el.labels && el.labels[0]) { r = shown(el.labels[0]); viaLabel = true; }
+    if (!r) return;
+    if (controls.length >= MAX) { more++; return; }
+    listed.add(el);
+    const state = stateOf(el);
+    if (!inView(r)) state.push("out of view");
+    // Something else is on top of it at its centre: a person could not press it (a dialog's backdrop, an overlay).
+    if (!viaLabel && inView(r)) {
+      const cx = Math.min(Math.max(r.left + r.width / 2, 0), innerWidth - 1), cy = Math.min(Math.max(r.top + r.height / 2, 0), innerHeight - 1);
+      const root = el.getRootNode();
+      const hit = root.elementFromPoint ? root.elementFromPoint(cx, cy) : document.elementFromPoint(cx, cy);
+      if (hit && hit !== el && !el.contains(hit) && !hit.contains(el)) state.push("covered");
+    }
+    const actions = kind === "edit" || kind === "combobox" && el.tagName === "SELECT" ? ["type"] : ["click"];
+    if (kind === "combobox" && el.tagName !== "SELECT") actions.push("type");
+    controls.push({ id: String(idOf(el)), window: 0, kind, name: clip(nameOf(el, kind), 80), value: clip(valueOf(el, kind), 80), actions, state });
+  }
+  function walk(root) {
+    const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: (n) => (SKIP.has(n.tagName) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
+    });
+    for (let el = tw.nextNode(); el; el = tw.nextNode()) {
+      if (++walked > 12000) return;
+      consider(el);
+      if (el.shadowRoot) walk(el.shadowRoot);
+    }
+  }
+  if (document.body) walk(document.body);
+
+  // The words on the page that are not controls, one line per block, in reading order.
+  const texts = [];
+  const blockCache = new Map();
+  const blockOf = (el) => {
+    let e = el;
+    while (e && e !== document.body) {
+      if (blockCache.has(e)) return blockCache.get(e);
+      const st = styleOf(e);
+      if (st && st.display !== "inline" && st.display !== "contents") { blockCache.set(e, e); return e; }
+      e = e.parentElement;
+    }
+    return document.body;
+  };
+  const insideControl = (el) => { for (let e = el, i = 0; e && i < 12; e = e.parentElement, i++) if (listed.has(e)) return true; return false; };
+  let cur = null, buf = "", total = 0;
+  const flush = () => { const t = txt(buf); if (t && texts.length < 80) { texts.push({ window: 0, text: clip(t, 200) }); total += t.length; } buf = ""; };
+  if (document.body) {
+    const tw = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    for (let n = tw.nextNode(); n && texts.length < 80 && total < 6000; n = tw.nextNode()) {
+      const t = n.data;
+      if (!t || !t.trim()) continue;
+      const p = n.parentElement;
+      if (!p || SKIP.has(p.tagName) || insideControl(p) || !shown(p)) continue;
+      const b = blockOf(p);
+      if (b !== cur) { flush(); cur = b; }
+      buf += " " + t;
+    }
+    flush();
+  }
+  // What "scrolled" means here: the page itself, or, in an app whose content scrolls
+  // inside a panel (a chat, a feed), the biggest such panel.
+  let se = document.scrollingElement || document.documentElement;
+  if (se.scrollHeight - innerHeight < 2) {
+    let best = null, area = 0;
+    for (const el of document.querySelectorAll("body *")) {
+      if (el.scrollHeight - el.clientHeight < 2) continue;
+      const oy = (styleOf(el) || {}).overflowY;
+      if (oy !== "auto" && oy !== "scroll") continue;
+      const a = el.clientWidth * el.clientHeight;
+      if (a > area) { area = a; best = el; }
+    }
+    if (best) se = best;
+  }
+  const scrollMax = se === document.scrollingElement || se === document.documentElement ? se.scrollHeight - innerHeight : se.scrollHeight - se.clientHeight;
+  return {
+    controls, texts, more,
+    page: { url: location.href, title: document.title, scrollY: Math.round(se.scrollTop), scrollMax: Math.max(0, Math.round(scrollMax)), width: innerWidth, height: innerHeight },
+  };
 })()`;
 /** Find a tagged control again, or report it gone. Shared by every action below. */
-const RESOLVE = String.raw `const S = window.__mwui; const ref = S && S.els.get(ID); const el = ref && ref.deref();
-  if (!el || !el.isConnected) return { error: "GONE" };
-  const describe = (e) => { if (!e || !e.tagName) return "something else"; let d = "<" + e.tagName.toLowerCase();
-    if (e.id) d += ' id="' + e.id + '"'; const c = typeof e.className === "string" ? e.className.trim().split(/\s+/).slice(0, 2).join(" ") : "";
+const RESOLVE = String.raw `const S = window.__mwui; const ref = S && S.els.get(ID); const el = ref && ref.deref();
+  if (!el || !el.isConnected) return { error: "GONE" };
+  const describe = (e) => { if (!e || !e.tagName) return "something else"; let d = "<" + e.tagName.toLowerCase();
+    if (e.id) d += ' id="' + e.id + '"'; const c = typeof e.className === "string" ? e.className.trim().split(/\s+/).slice(0, 2).join(" ") : "";
     if (c) d += ' class="' + c + '"'; d += ">"; const t = (e.innerText || "").replace(/\s+/g, " ").trim().slice(0, 40); return t ? d + ' "' + t + '"' : d; };`;
 /** Where to click: the control's centre, after bringing it into view, if a click there
  *  would really reach it. */
-const CLICK_POINT = (id) => String.raw `(() => { const ID = ${id}; ${RESOLVE}
-  if (el.disabled || el.getAttribute("aria-disabled") === "true") return { error: "it is disabled" };
-  if (el.tagName === "SELECT") return { error: "it is a dropdown: use type with the option to pick" };
-  let t = el;
-  const box = (e) => { const r = e.getBoundingClientRect(); return r.width >= 1 && r.height >= 1 ? r : null; };
-  if (!box(t) && el.labels && el.labels[0] && box(el.labels[0])) t = el.labels[0];
-  t.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
-  const r = box(t);
-  if (!r) return { error: "it has no size on the page" };
-  const x = r.left + r.width / 2, y = r.top + r.height / 2;
-  const root = t.getRootNode();
-  const hit = root.elementFromPoint ? root.elementFromPoint(x, y) : document.elementFromPoint(x, y);
-  if (hit && hit !== t && !t.contains(hit) && !(t === el.labels?.[0] && hit === el)) {
-    return { error: "it is covered by " + describe(hit) + " at that spot, so a click there would land on that instead" };
-  }
-  return { x, y };
+const CLICK_POINT = (id) => String.raw `(() => { const ID = ${id}; ${RESOLVE}
+  if (el.disabled || el.getAttribute("aria-disabled") === "true") return { error: "it is disabled" };
+  if (el.tagName === "SELECT") return { error: "it is a dropdown: use type with the option to pick" };
+  let t = el;
+  const box = (e) => { const r = e.getBoundingClientRect(); return r.width >= 1 && r.height >= 1 ? r : null; };
+  if (!box(t) && el.labels && el.labels[0] && box(el.labels[0])) t = el.labels[0];
+  t.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+  const r = box(t);
+  if (!r) return { error: "it has no size on the page" };
+  const x = r.left + r.width / 2, y = r.top + r.height / 2;
+  const root = t.getRootNode();
+  const hit = root.elementFromPoint ? root.elementFromPoint(x, y) : document.elementFromPoint(x, y);
+  if (hit && hit !== t && !t.contains(hit) && !(t === el.labels?.[0] && hit === el)) {
+    return { error: "it is covered by " + describe(hit) + " at that spot, so a click there would land on that instead" };
+  }
+  return { x, y };
 })()`;
 /** Focus a text box and select what is in it, so typing replaces it. A dropdown picks
  *  the option instead. */
-const TYPE_PREP = (id, text) => String.raw `(() => { const ID = ${id}; const TEXT = ${JSON.stringify(text)}; ${RESOLVE}
-  if (el.disabled || el.readOnly || el.getAttribute("aria-disabled") === "true") return { error: "it is disabled or read-only" };
-  if (el.tagName === "INPUT" && el.type === "password") return { error: "PASSWORD" };
-  if (el.tagName === "SELECT") {
-    const want = TEXT.trim().toLowerCase();
-    const opts = [...el.options];
-    const opt = opts.find((o) => o.text.trim().toLowerCase() === want || o.value.toLowerCase() === want)
-      || opts.find((o) => o.text.trim().toLowerCase().includes(want));
-    if (!opt) return { error: "it has no option " + JSON.stringify(TEXT) + ". Its options: " + opts.slice(0, 20).map((o) => JSON.stringify(o.text.trim())).join(", ") };
-    el.value = opt.value;
-    el.dispatchEvent(new Event("input", { bubbles: true }));
-    el.dispatchEvent(new Event("change", { bubbles: true }));
-    return { done: "picked " + JSON.stringify(opt.text.trim()) };
-  }
-  if (el.type === "checkbox" || el.type === "radio") return { error: "it is a " + el.type + ": use click" };
-  el.scrollIntoView({ block: "center", behavior: "instant" });
-  el.focus();
-  if (typeof el.select === "function" && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) el.select();
-  else if (el.isContentEditable) { const range = document.createRange(); range.selectNodeContents(el); const s = getSelection(); s.removeAllRanges(); s.addRange(range); }
-  if (document.activeElement !== el && !el.contains(document.activeElement)) return { error: "it would not take focus" };
-  return { focused: true };
+const TYPE_PREP = (id, text) => String.raw `(() => { const ID = ${id}; const TEXT = ${JSON.stringify(text)}; ${RESOLVE}
+  if (el.disabled || el.readOnly || el.getAttribute("aria-disabled") === "true") return { error: "it is disabled or read-only" };
+  if (el.tagName === "INPUT" && el.type === "password") return { error: "PASSWORD" };
+  if (el.tagName === "SELECT") {
+    const want = TEXT.trim().toLowerCase();
+    const opts = [...el.options];
+    const opt = opts.find((o) => o.text.trim().toLowerCase() === want || o.value.toLowerCase() === want)
+      || opts.find((o) => o.text.trim().toLowerCase().includes(want));
+    if (!opt) return { error: "it has no option " + JSON.stringify(TEXT) + ". Its options: " + opts.slice(0, 20).map((o) => JSON.stringify(o.text.trim())).join(", ") };
+    el.value = opt.value;
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+    return { done: "picked " + JSON.stringify(opt.text.trim()) };
+  }
+  if (el.type === "checkbox" || el.type === "radio") return { error: "it is a " + el.type + ": use click" };
+  el.scrollIntoView({ block: "center", behavior: "instant" });
+  el.focus();
+  if (typeof el.select === "function" && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) el.select();
+  else if (el.isContentEditable) { const range = document.createRange(); range.selectNodeContents(el); const s = getSelection(); s.removeAllRanges(); s.addRange(range); }
+  if (document.activeElement !== el && !el.contains(document.activeElement)) return { error: "it would not take focus" };
+  return { focused: true };
 })()`;
 /** After typing: did the text arrive? Some inputs (date pickers, custom widgets) ignore
  *  typed text, and those get the value set directly with the events a person's typing
  *  would have fired. */
-const TYPE_CHECK = (id, text) => String.raw `(() => { const ID = ${id}; const TEXT = ${JSON.stringify(text)}; ${RESOLVE}
-  const now = el.isContentEditable ? el.innerText : el.value;
-  if (now === TEXT || !(el.tagName === "INPUT" || el.tagName === "TEXTAREA")) return { value: now };
-  const proto = el.tagName === "TEXTAREA" ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
-  Object.getOwnPropertyDescriptor(proto, "value").set.call(el, TEXT);
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-  el.dispatchEvent(new Event("change", { bubbles: true }));
-  return { value: el.value, set: true };
+const TYPE_CHECK = (id, text) => String.raw `(() => { const ID = ${id}; const TEXT = ${JSON.stringify(text)}; ${RESOLVE}
+  const now = el.isContentEditable ? el.innerText : el.value;
+  if (now === TEXT || !(el.tagName === "INPUT" || el.tagName === "TEXTAREA")) return { value: now };
+  const proto = el.tagName === "TEXTAREA" ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  Object.getOwnPropertyDescriptor(proto, "value").set.call(el, TEXT);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+  return { value: el.value, set: true };
 })()`;
 /** The centre of a control (brought into view), or of the viewport when none is named. */
-const POINT = (id) => String.raw `(() => {
-  ${id === null ? "return { x: innerWidth / 2, y: innerHeight / 2 };" : `const ID = ${id}; ${RESOLVE}
-  el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "instant" });
-  const r = el.getBoundingClientRect();
-  if (r.width < 1 || r.height < 1) return { error: "it has no size on the page" };
-  return { x: r.left + r.width / 2, y: r.top + r.height / 2 };`}
+const POINT = (id) => String.raw `(() => {
+  ${id === null ? "return { x: innerWidth / 2, y: innerHeight / 2 };" : `const ID = ${id}; ${RESOLVE}
+  el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "instant" });
+  const r = el.getBoundingClientRect();
+  if (r.width < 1 || r.height < 1) return { error: "it has no size on the page" };
+  return { x: r.left + r.width / 2, y: r.top + r.height / 2 };`}
 })()`;
 /** A control's box on the page (document coordinates, padded a little so its edge shows),
  *  after bringing it into view. */
-const BOX = (id) => String.raw `(() => { const ID = ${id}; ${RESOLVE}
-  el.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
-  const r = el.getBoundingClientRect();
-  if (r.width < 1 || r.height < 1) return { error: "it has no size on the page" };
-  const pad = 8, x = Math.max(0, r.left + scrollX - pad), y = Math.max(0, r.top + scrollY - pad);
-  return { x, y, w: Math.min(r.width + 2 * pad, 4000), h: Math.min(r.height + 2 * pad, 4000) };
+const BOX = (id) => String.raw `(() => { const ID = ${id}; ${RESOLVE}
+  el.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+  const r = el.getBoundingClientRect();
+  if (r.width < 1 || r.height < 1) return { error: "it has no size on the page" };
+  const pad = 8, x = Math.max(0, r.left + scrollX - pad), y = Math.max(0, r.top + scrollY - pad);
+  return { x, y, w: Math.min(r.width + 2 * pad, 4000), h: Math.min(r.height + 2 * pad, 4000) };
 })()`;
 /** The facts a person judges a control by, read off the page: size, colours, type, and the
  *  things that are usually the bug (too small, cut off, hard to read). */
-const INSPECT = (id) => String.raw `(() => { const ID = ${id}; ${RESOLVE}
-  el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "instant" });
-  const r = el.getBoundingClientRect(); const st = getComputedStyle(el);
-  const rgb = (c) => { const m = /rgba?\(([^)]+)\)/.exec(c); if (!m) return null; const p = m[1].split(/[ ,\/]+/).filter(Boolean).map(Number); return { r: p[0], g: p[1], b: p[2], a: p.length > 3 ? p[3] : 1 }; };
-  const hex = (c) => { const v = rgb(c); return v ? "#" + [v.r, v.g, v.b].map((n) => Math.round(n).toString(16).padStart(2, "0")).join("") + (v.a < 1 ? " @" + Math.round(v.a * 100) + "%" : "") : c; };
-  const lum = (v) => { const f = (n) => { n /= 255; return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4); }; return 0.2126 * f(v.r) + 0.7152 * f(v.g) + 0.0722 * f(v.b); };
-  let bg = null;
-  for (let e = el; e && !bg; e = e.parentElement) { const v = rgb(getComputedStyle(e).backgroundColor); if (v && v.a > 0.95) bg = v; }
-  if (!bg) bg = { r: 255, g: 255, b: 255, a: 1 };
-  const fg = rgb(st.color);
-  let contrast = null;
-  if (fg) { const a = lum(fg), b = lum(bg); contrast = (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05); }
-  const lines = [];
-  lines.push("box: " + Math.round(r.width) + "x" + Math.round(r.height) + " at " + Math.round(r.left) + "," + Math.round(r.top) + " (viewport " + innerWidth + "x" + innerHeight + ")");
-  lines.push("text: " + st.fontSize + " " + st.fontFamily.split(",")[0].replace(/["']/g, "") + " weight " + st.fontWeight + ", colour " + hex(st.color) + " on " + hex("rgb(" + bg.r + "," + bg.g + "," + bg.b + ")") + (contrast ? " (contrast " + contrast.toFixed(1) + ":1)" : ""));
-  lines.push("surface: background " + hex(st.backgroundColor) + ", border " + st.borderTopWidth + " " + st.borderTopStyle + " " + hex(st.borderTopColor) + ", radius " + st.borderTopLeftRadius + ", padding " + st.padding + ", margin " + st.margin);
-  lines.push("behaviour: display " + st.display + ", opacity " + st.opacity + ", cursor " + st.cursor + (el.disabled ? ", disabled" : "") + (document.activeElement === el ? ", focused" : ""));
-  const issues = [];
-  const clickable = el.tagName === "BUTTON" || el.tagName === "A" || el.tagName === "INPUT" || el.getAttribute("role") === "button" || st.cursor === "pointer";
-  if (clickable && (r.width < 24 || r.height < 24)) issues.push("small press target (" + Math.round(r.width) + "x" + Math.round(r.height) + "; 24x24 is the least that is comfortable)");
-  if ((st.overflow !== "visible" || st.textOverflow === "ellipsis") && (el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1)) issues.push("its content is cut off (" + el.scrollWidth + "x" + el.scrollHeight + " of content in " + el.clientWidth + "x" + el.clientHeight + ")");
-  if (contrast && contrast < 4.5 && (el.innerText || "").trim() && parseFloat(st.fontSize) < 24) issues.push("low contrast for text this size (" + contrast.toFixed(1) + ":1; 4.5:1 is the usual bar)");
-  if (r.right < 0 || r.bottom < 0 || r.left > innerWidth || r.top > innerHeight) issues.push("it is outside the visible area");
-  if (r.right > innerWidth + 1) issues.push("it runs past the right edge of the viewport by " + Math.round(r.right - innerWidth) + "px");
-  if (st.visibility === "hidden" || Number(st.opacity) < 0.05) issues.push("it is invisible (visibility/opacity)");
-  lines.push(issues.length ? "worth a look: " + issues.join("; ") : "nothing obviously wrong with it");
-  return { lines };
+const INSPECT = (id) => String.raw `(() => { const ID = ${id}; ${RESOLVE}
+  el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "instant" });
+  const r = el.getBoundingClientRect(); const st = getComputedStyle(el);
+  const rgb = (c) => { const m = /rgba?\(([^)]+)\)/.exec(c); if (!m) return null; const p = m[1].split(/[ ,\/]+/).filter(Boolean).map(Number); return { r: p[0], g: p[1], b: p[2], a: p.length > 3 ? p[3] : 1 }; };
+  const hex = (c) => { const v = rgb(c); return v ? "#" + [v.r, v.g, v.b].map((n) => Math.round(n).toString(16).padStart(2, "0")).join("") + (v.a < 1 ? " @" + Math.round(v.a * 100) + "%" : "") : c; };
+  const lum = (v) => { const f = (n) => { n /= 255; return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4); }; return 0.2126 * f(v.r) + 0.7152 * f(v.g) + 0.0722 * f(v.b); };
+  let bg = null;
+  for (let e = el; e && !bg; e = e.parentElement) { const v = rgb(getComputedStyle(e).backgroundColor); if (v && v.a > 0.95) bg = v; }
+  if (!bg) bg = { r: 255, g: 255, b: 255, a: 1 };
+  const fg = rgb(st.color);
+  let contrast = null;
+  if (fg) { const a = lum(fg), b = lum(bg); contrast = (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05); }
+  const lines = [];
+  lines.push("box: " + Math.round(r.width) + "x" + Math.round(r.height) + " at " + Math.round(r.left) + "," + Math.round(r.top) + " (viewport " + innerWidth + "x" + innerHeight + ")");
+  lines.push("text: " + st.fontSize + " " + st.fontFamily.split(",")[0].replace(/["']/g, "") + " weight " + st.fontWeight + ", colour " + hex(st.color) + " on " + hex("rgb(" + bg.r + "," + bg.g + "," + bg.b + ")") + (contrast ? " (contrast " + contrast.toFixed(1) + ":1)" : ""));
+  lines.push("surface: background " + hex(st.backgroundColor) + ", border " + st.borderTopWidth + " " + st.borderTopStyle + " " + hex(st.borderTopColor) + ", radius " + st.borderTopLeftRadius + ", padding " + st.padding + ", margin " + st.margin);
+  lines.push("behaviour: display " + st.display + ", opacity " + st.opacity + ", cursor " + st.cursor + (el.disabled ? ", disabled" : "") + (document.activeElement === el ? ", focused" : ""));
+  const issues = [];
+  const clickable = el.tagName === "BUTTON" || el.tagName === "A" || el.tagName === "INPUT" || el.getAttribute("role") === "button" || st.cursor === "pointer";
+  if (clickable && (r.width < 24 || r.height < 24)) issues.push("small press target (" + Math.round(r.width) + "x" + Math.round(r.height) + "; 24x24 is the least that is comfortable)");
+  if ((st.overflow !== "visible" || st.textOverflow === "ellipsis") && (el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1)) issues.push("its content is cut off (" + el.scrollWidth + "x" + el.scrollHeight + " of content in " + el.clientWidth + "x" + el.clientHeight + ")");
+  if (contrast && contrast < 4.5 && (el.innerText || "").trim() && parseFloat(st.fontSize) < 24) issues.push("low contrast for text this size (" + contrast.toFixed(1) + ":1; 4.5:1 is the usual bar)");
+  if (r.right < 0 || r.bottom < 0 || r.left > innerWidth || r.top > innerHeight) issues.push("it is outside the visible area");
+  if (r.right > innerWidth + 1) issues.push("it runs past the right edge of the viewport by " + Math.round(r.right - innerWidth) + "px");
+  if (st.visibility === "hidden" || Number(st.opacity) < 0.05) issues.push("it is invisible (visibility/opacity)");
+  lines.push(issues.length ? "worth a look: " + issues.join("; ") : "nothing obviously wrong with it");
+  return { lines };
 })()`;
 /** Draw each listed control's number over it, in a layer that takes no clicks, so the picture
  *  and the list speak the same numbers. Removed again right after the picture is taken. */
-const ANNOTATE = (pairs) => String.raw `(() => {
-  const S = window.__mwui; const old = document.getElementById("__mwui_overlay"); if (old) old.remove();
-  const layer = document.createElement("div"); layer.id = "__mwui_overlay";
-  layer.style.cssText = "position:absolute;left:0;top:0;width:0;height:0;z-index:2147483647;pointer-events:none";
-  let drawn = 0;
-  for (const p of ${JSON.stringify(pairs)}) {
-    const ref = S && S.els.get(Number(p.id)); const el = ref && ref.deref(); if (!el || !el.isConnected) continue;
-    const r = el.getBoundingClientRect(); if (r.width < 1 || r.height < 1) continue;
-    const box = document.createElement("div");
-    box.style.cssText = "position:absolute;box-sizing:border-box;border:1.5px solid #ff2d95;left:" + (r.left + scrollX) + "px;top:" + (r.top + scrollY) + "px;width:" + r.width + "px;height:" + r.height + "px";
-    const tag = document.createElement("div");
-    tag.textContent = String(p.n);
-    tag.style.cssText = "position:absolute;left:-1.5px;top:-14px;min-width:14px;padding:0 3px;height:14px;line-height:14px;font:700 10px/14px monospace;color:#fff;background:#ff2d95;text-align:center;border-radius:2px";
-    box.appendChild(tag); layer.appendChild(box); drawn++;
-  }
-  document.documentElement.appendChild(layer);
-  return drawn;
+const ANNOTATE = (pairs) => String.raw `(() => {
+  const S = window.__mwui; const old = document.getElementById("__mwui_overlay"); if (old) old.remove();
+  const layer = document.createElement("div"); layer.id = "__mwui_overlay";
+  layer.style.cssText = "position:absolute;left:0;top:0;width:0;height:0;z-index:2147483647;pointer-events:none";
+  let drawn = 0;
+  for (const p of ${JSON.stringify(pairs)}) {
+    const ref = S && S.els.get(Number(p.id)); const el = ref && ref.deref(); if (!el || !el.isConnected) continue;
+    const r = el.getBoundingClientRect(); if (r.width < 1 || r.height < 1) continue;
+    const box = document.createElement("div");
+    box.style.cssText = "position:absolute;box-sizing:border-box;border:1.5px solid #ff2d95;left:" + (r.left + scrollX) + "px;top:" + (r.top + scrollY) + "px;width:" + r.width + "px;height:" + r.height + "px";
+    const tag = document.createElement("div");
+    tag.textContent = String(p.n);
+    tag.style.cssText = "position:absolute;left:-1.5px;top:-14px;min-width:14px;padding:0 3px;height:14px;line-height:14px;font:700 10px/14px monospace;color:#fff;background:#ff2d95;text-align:center;border-radius:2px";
+    box.appendChild(tag); layer.appendChild(box); drawn++;
+  }
+  document.documentElement.appendChild(layer);
+  return drawn;
 })()`;
 const FOCUS = (id) => String.raw `(() => { const ID = ${id}; ${RESOLVE} el.focus(); return { ok: true }; })()`;
 const NAMED_KEYS = {
@@ -401,15 +401,15 @@ const QUIET_MS = 150;
  *  no animation or transition that has an end is still running (a spinner that never ends
  *  does not count, or nothing would ever settle). Gives up at `max`, so a page that keeps
  *  moving is still looked at. Runs inside the page. */
-const QUIET_SCRIPT = (quiet, max) => String.raw `new Promise((resolve) => {
-  const start = Date.now(); let last = start;
-  const mo = new MutationObserver(() => { last = Date.now(); });
-  mo.observe(document, { subtree: true, childList: true, attributes: true, characterData: true });
-  const moving = () => { try { return document.getAnimations().some((a) => { if (a.playState !== "running") return false;
-    const t = a.effect && a.effect.getComputedTiming && a.effect.getComputedTiming(); return !t || t.endTime !== Infinity; }); } catch { return false; } };
-  const tick = () => { const now = Date.now();
-    if (now - start >= ${max} || (now - last >= ${quiet} && !moving())) { mo.disconnect(); resolve(true); } else setTimeout(tick, 25); };
-  setTimeout(tick, 25);
+const QUIET_SCRIPT = (quiet, max) => String.raw `new Promise((resolve) => {
+  const start = Date.now(); let last = start;
+  const mo = new MutationObserver(() => { last = Date.now(); });
+  mo.observe(document, { subtree: true, childList: true, attributes: true, characterData: true });
+  const moving = () => { try { return document.getAnimations().some((a) => { if (a.playState !== "running") return false;
+    const t = a.effect && a.effect.getComputedTiming && a.effect.getComputedTiming(); return !t || t.endTime !== Infinity; }); } catch { return false; } };
+  const tick = () => { const now = Date.now();
+    if (now - start >= ${max} || (now - last >= ${quiet} && !moving())) { mo.disconnect(); resolve(true); } else setTimeout(tick, 25); };
+  setTimeout(tick, 25);
 })`;
 /** One page being driven: its connection, and what it has reported since the last step. */
 export class PageSession {
@@ -489,7 +489,8 @@ export class PageSession {
     }
     /** Attach to a page behind a local debugging port. `pick` narrows by title or address. */
     static async attach(port, pick, owned) {
-        const pages = pageTargets(await listTargets(port));
+        // Patient: a browser just started may not answer for a moment (see listTargetsPatiently).
+        const pages = pageTargets(await listTargetsPatiently(port));
         if (pages.length === 0)
             throw new Error(`port ${port} has no page to drive`);
         const needle = pick?.toLowerCase();