@hozu/cli 0.7.0 → 0.8.0

package/dist/commands/browse.js

@@ -1,464 +1,398 @@
-import { existsSync } from 'node:fs';
-import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { mkdtemp, rm, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
-import { dirname, extname, join, relative, resolve } from 'node:path';
+import { dirname, join, relative, resolve } from 'node:path';
 import { findBrowser, launch } from '../cdp.js';
 import { HozuCliError } from '../errors.js';
-import { appParts } from './request.js';
-const ORIGIN = 'http://localhost';
+import { sleep, Tab, World } from './browse-tab.js';
+import { describeElement, parseSession } from './request.js';
 const LIMIT = 1500;
-const QUIET_MS = 300;
-const SETTLE_MS = 500;
-const CAP_MS = 8000;
-const MIME = {
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.svg': 'image/svg+xml',
-    '.ico': 'image/x-icon',
-    '.webp': 'image/webp',
-    '.json': 'application/json',
-    '.txt': 'text/plain',
-    '.css': 'text/css',
-    '.js': 'text/javascript',
-    '.woff2': 'font/woff2',
-};
-const KEYS = {
-    Enter: { code: 'Enter', keyCode: 13, text: '\r' },
-    Escape: { code: 'Escape', keyCode: 27 },
-    Tab: { code: 'Tab', keyCode: 9 },
-    Backspace: { code: 'Backspace', keyCode: 8 },
-    Space: { code: 'Space', keyCode: 32, text: ' ' },
-    ArrowUp: { code: 'ArrowUp', keyCode: 38 },
-    ArrowDown: { code: 'ArrowDown', keyCode: 40 },
-    ArrowLeft: { code: 'ArrowLeft', keyCode: 37 },
-    ArrowRight: { code: 'ArrowRight', keyCode: 39 },
-};
-const PAGE = String.raw `(() => {
-  const norm = (s) => (s ?? '').replace(/\s+/g, ' ').trim().toLowerCase()
-  const shown = (el) => { const r = el.getBoundingClientRect(); return r.width > 0 || r.height > 0 }
-  const nameOf = (el) => {
-    const aria = el.getAttribute('aria-label')
-    if (aria) return aria
-    const by = el.getAttribute('aria-labelledby')
-    if (by) return by.split(/\s+/).map((id) => document.getElementById(id)?.textContent ?? '').join(' ')
-    if (el.labels && el.labels.length) return [...el.labels].map((l) => l.textContent).join(' ')
-    if (el.tagName === 'INPUT' && ['submit', 'button'].includes(el.type)) return el.value
-    if (el.placeholder) return el.placeholder
-    if (el.getAttribute('title') && !el.textContent.trim()) return el.getAttribute('title')
-    return el.textContent
-  }
-  const KINDS = {
-    fill: 'input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), textarea, [contenteditable=true]',
-    select: 'select',
-    check: 'input[type=checkbox], input[type=radio]',
-    click: 'button, a[href], [role=button], [role=link], [role=tab], [role=option], [role=menuitem], [role=checkbox], [role=switch], input[type=submit], input[type=button], summary, [title], label',
-  }
-  const find = (kind, name) => {
-    const all = [...document.querySelectorAll(KINDS[kind])].filter(shown)
-    const want = norm(name)
-    let hits = all.filter((el) => norm(nameOf(el)) === want || norm(el.getAttribute('title')) === want)
-    if (!hits.length && kind === 'click')
-      hits = [...document.body.querySelectorAll('*')].filter(
-        (el) => shown(el) && norm(el.textContent) === want && ![...el.children].some((c) => norm(c.textContent) === want),
-      )
-    if (!hits.length) {
-      const names = [...new Set(all.map((el) => (nameOf(el) ?? '').replace(/\s+/g, ' ').trim()).filter(Boolean))]
-      return { error: 'No ' + kind + ' target named "' + name + '"' + (names.length ? '. On the page: ' + names.slice(0, 20).map((n) => JSON.stringify(n.slice(0, 40))).join(', ') : '') }
+const TARGETED = new Set(['fill', 'select', 'check', 'uncheck', 'click', 'submit']);
+const VERBS = 'fill <label>=<value>, select <label>=<option>, check <label>, uncheck <label>, click <name>, submit "<form>", press <key>, wait <ms>, goto <path> (targets take in "<text>")';
+export function parseStep(text) {
+    const space = text.indexOf(' ');
+    const verb = space < 0 ? text : text.slice(0, space);
+    let rest = space < 0 ? '' : text.slice(space + 1).trim();
+    let within = null;
+    const scoped = TARGETED.has(verb) ? /^(.*?)\s+in\s+"([^"]+)"$/.exec(rest) : null;
+    if (scoped) {
+        rest = scoped[1].trim();
+        within = scoped[2];
     }
-    return { el: hits[0], count: hits.length }
-  }
-  const setValue = (el, value) => {
-    const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : el instanceof HTMLSelectElement ? HTMLSelectElement.prototype : HTMLInputElement.prototype
-    el.focus()
-    if (el.isContentEditable) el.textContent = value
-    else Object.getOwnPropertyDescriptor(proto, 'value').set.call(el, value)
-    el.dispatchEvent(new Event('input', { bubbles: true }))
-    el.dispatchEvent(new Event('change', { bubbles: true }))
-  }
-  const note = (count) => (count > 1 ? count + ' matched; used the first' : null)
-  return {
-    point(kind, name) {
-      const f = find(kind, name)
-      if (f.error) return f
-      f.el.scrollIntoView({ block: 'center', inline: 'center' })
-      const r = f.el.getBoundingClientRect()
-      return { x: r.left + r.width / 2, y: r.top + r.height / 2, note: note(f.count) }
-    },
-    fill(name, value) {
-      const f = find('fill', name)
-      if (f.error) return f
-      setValue(f.el, value)
-      return { note: note(f.count) }
-    },
-    select(name, option) {
-      const f = find('select', name)
-      if (f.error) return f
-      const o = [...f.el.options].find((o) => norm(o.textContent) === norm(option) || o.value === option)
-      if (!o) return { error: 'Select "' + name + '" has no option "' + option + '". Options: ' + [...f.el.options].map((o) => JSON.stringify(o.textContent.trim())).join(', ') }
-      setValue(f.el, o.value)
-      return { note: note(f.count) }
-    },
-    report(selectors, expected) {
-      const widgets = []
-      const hydrated = document.documentElement.hasAttribute('data-hozu-ready')
-      for (const el of document.querySelectorAll('[data-hozu-widget]')) {
-        const name = el.getAttribute('data-hozu-widget')
-        const state = el.getAttribute('data-hozu-widget-state')
-        const load = expected.find(([n]) => n === name)?.[1]
-        const r = el.getBoundingClientRect()
-        const empty = !el.children.length && !el.textContent.trim()
-        widgets.push({
-          name,
-          state: state === 'loading' ? 'not mounted' : state,
-          width: Math.round(r.width),
-          height: Math.round(r.height),
-          canvases: el.querySelectorAll('canvas').length,
-          elements: el.querySelectorAll('*').length,
-          hint:
-            state === 'failed'
-              ? 'its setup threw; see errors'
-              : state === 'loading'
-                ? load === 'visible' && (r.bottom < 0 || r.top > innerHeight)
-                  ? "load: 'visible' mounts it when it scrolls into view"
-                  : load === 'idle'
-                    ? "load: 'idle' mounts it when the browser is idle"
-                    : 'its module has not loaded; see errors'
-                : r.height === 0
-                  ? 'it has no height, so a map or canvas inside shows nothing: give it a height class such as h-64'
-                  : empty
-                    ? 'it mounted but rendered nothing'
-                    : null,
-        })
-      }
-      if (!hydrated)
-        for (const [name] of expected)
-          widgets.push({
-            name, state: 'not mounted', width: null, height: null, canvases: 0, elements: 0,
-            hint: 'the page did not hydrate; see errors',
-          })
-      const elements = []
-      for (const sel of selectors)
-        for (const el of document.querySelectorAll(sel)) {
-          const attrs = {}
-          for (const a of el.attributes) attrs[a.name] = a.value
-          const text = (el.innerText ?? el.textContent ?? '').replace(/\s+/g, ' ').trim()
-          elements.push({ selector: sel, tag: el.tagName.toLowerCase(), attrs, text: text.length > 120 ? text.slice(0, 120) + '…' : text })
-        }
-      return {
-        title: document.title,
-        url: location.pathname + location.search,
-        hydrated,
-        text: (document.body?.innerText ?? '').replace(/[ \t]+/g, ' ').replace(/\n\s*\n+/g, '\n').trim(),
-        widgets,
-        elements,
-      }
-    },
-  }
-})()`;
-async function bodyOf(request) {
-    if (request.postDataEntries?.length)
-        return Buffer.concat(request.postDataEntries.map((e) => Buffer.from(e.bytes ?? '', 'base64')));
-    return request.postData === undefined ? undefined : Buffer.from(request.postData);
+    if (verb === 'fill' || verb === 'select') {
+        const eq = rest.indexOf('=');
+        if (eq <= 0)
+            throw new Error(`"${text}" needs <label>=<value>`);
+        return { verb, target: rest.slice(0, eq).trim(), value: rest.slice(eq + 1), within };
+    }
+    return { verb, target: verb === 'submit' ? rest.replace(/^"(.*)"$/, '$1') : rest, value: '', within };
+}
+const q = JSON.stringify;
+async function aim(tab, call) {
+    const start = Date.now();
+    for (;;) {
+        const at = await tab.page(call);
+        if (at.error || !at.covered)
+            return at;
+        if (Date.now() - start > 1500)
+            return { error: `${at.covered} covers the target where it would be clicked` };
+        await sleep(50);
+    }
+}
+export async function act(tab, p) {
+    const off = tab.mode === 'off';
+    const done = (r) => ({
+        ok: !r.error,
+        note: r.error ?? r.note ?? null,
+        jsOnly: null,
+    });
+    if (p.verb === 'fill' || p.verb === 'select')
+        return done(await tab.page(`${p.verb}(${q(p.target)}, ${q(p.value)}, ${q(p.within)})`));
+    if (p.verb === 'submit')
+        return done(await tab.page(`submit(${q(p.target)}, ${q(p.within)})`));
+    if (p.verb === 'check' || p.verb === 'uncheck') {
+        const at = await aim(tab, `checkable(${q(p.target)}, ${q(p.within)})`);
+        if (at.error)
+            return done(at);
+        const want = p.verb === 'check';
+        if (at.radio && !want)
+            return done({ error: 'A radio button cannot be unchecked: check another option' });
+        if (at.checked === want)
+            return done({ note: `already ${p.verb}ed` });
+        await tab.mouse(at.x, at.y);
+        return done(at);
+    }
+    if (p.verb === 'click') {
+        const at = await aim(tab, `point(${q(p.target)}, ${q(p.within)})`);
+        if (at.error)
+            return done(at);
+        if (off && at.jsOnly)
+            return { ok: true, note: at.note, jsOnly: at.jsOnly };
+        await tab.mouse(at.x, at.y);
+        return done(at);
+    }
+    if (p.verb === 'press') {
+        if (!p.target)
+            throw new Error('press takes a key such as Enter');
+        const reason = off ? await tab.page(`keyJsOnly(${q(p.target)})`) : null;
+        if (reason)
+            return { ok: true, note: null, jsOnly: reason };
+        await tab.key(p.target);
+        return done({});
+    }
+    if (p.verb === 'wait') {
+        const ms = Number(p.target);
+        if (!p.target || !Number.isFinite(ms) || ms < 0 || ms > 30000)
+            throw new Error('wait takes milliseconds (0–30000)');
+        await sleep(ms);
+        return done({});
+    }
+    if (p.verb === 'goto') {
+        if (!p.target.startsWith('/'))
+            throw new Error('goto takes a path such as /items/1');
+        await tab.open(p.target);
+        return done({});
+    }
+    throw new Error(`Unknown step "${p.verb}": use ${VERBS}`);
 }
+const linesOf = (s) => s.text.split('\n').filter((l) => l.trim());
+const minus = (a, b) => {
+    const left = new Map();
+    for (const l of b)
+        left.set(l, (left.get(l) ?? 0) + 1);
+    return a.filter((l) => {
+        const n = left.get(l) ?? 0;
+        if (n > 0)
+            left.set(l, n - 1);
+        return n === 0;
+    });
+};
+const comparable = (s) => minus(linesOf(s), s.widget);
+const same = (a, b) => {
+    const x = comparable(a);
+    const y = comparable(b);
+    return a.url === b.url && x.length === y.length && minus(x, y).length === 0;
+};
+const delta = (before, after) => before.url !== after.url
+    ? { added: linesOf(after), removed: [] }
+    : { added: minus(linesOf(after), linesOf(before)), removed: minus(linesOf(before), linesOf(after)) };
+const combine = (changes) => {
+    const notes = changes.map((c) => c.note);
+    if (notes.every((n) => n === notes[0]))
+        return notes[0] ?? null;
+    return (changes
+        .filter((c) => c.note)
+        .map((c) => `${c.mode}: ${c.note}`)
+        .join('; ') || null);
+};
 export async function runBrowse(loaded, options) {
     const path = options.path ?? '/';
     if (!path.startsWith('/'))
         throw new HozuCliError('usage', 'hozu browse needs a path', ['hozu browse /']);
+    for (const a of options.actors)
+        if (a.session !== undefined)
+            parseSession(a.session);
     const browser = findBrowser();
     if (!browser)
         throw new HozuCliError('config', 'hozu browse needs Chrome, Chromium or Edge, and none was found', [
             'Install Google Chrome, or set HOZU_CHROME=/path/to/chrome',
+            'hozu get <path> reads pages without a browser',
         ]);
-    const parts = await appParts(loaded, 'browse', options.session);
-    const root = dirname(loaded.path);
-    const build = loaded.build(false);
-    const server = await parts.importFrom('@hozu/runtime-server', ['npm install @hozu/runtime-server']);
-    const styles = await (await parts.importFrom('@hozu/css', ['npm install @hozu/css'])).compileStyles(build, { base: root });
-    const used = server.usedWidgets(build.ir);
-    const widgets = used.length
-        ? await (await parts.importFrom('@hozu/bundle', ['npm install @hozu/bundle'])).bundleWidgets(build)
-        : null;
-    const handler = server.createHandler({
-        build,
-        styles,
-        widgets,
-        resolvers: parts.resolvers,
-        session: parts.session,
-        env: process.env,
-    });
-    const publicDir = join(root, 'public');
-    const respond = async (request) => {
-        const response = await handler.fetch(request);
-        const file = join(publicDir, decodeURIComponent(new URL(request.url).pathname));
-        if (response.status !== 404 || !file.startsWith(publicDir) || !existsSync(file))
-            return response;
-        return new Response(await readFile(file).catch(() => null), {
-            headers: { 'content-type': MIME[extname(file)] ?? 'application/octet-stream' },
-        });
-    };
+    const modes = options.js === 'both' ? ['on', 'off'] : [options.js];
+    const sessions = options.actors.map((a) => a.session);
+    const worlds = modes.map(() => new World(loaded.path, dirname(loaded.path), sessions));
     const profile = await mkdtemp(join(tmpdir(), 'hozu-browse-'));
-    const cdp = launch(browser, profile);
+    let cdp = null;
     const errors = [];
-    const steps = [];
-    let status = 0;
-    let inflight = 0;
-    let lastActivity = Date.now();
-    let loaded_ = false;
+    const tabs = [];
     try {
-        const { targetId } = await cdp.send('Target.createTarget', { url: 'about:blank' });
-        const { sessionId } = await cdp.send('Target.attachToTarget', { targetId, flatten: true });
-        const send = (method, params = {}) => cdp.send(method, params, sessionId);
-        const documentUrls = new Set();
+        const cookies = await Promise.all(worlds.map((w) => w.cookies));
+        cdp = launch(browser, profile);
+        const bySession = new Map();
         cdp.on((method, params, from) => {
-            if (from !== sessionId)
+            const tab = from ? bySession.get(from) : undefined;
+            if (!tab)
                 return;
-            if (method === 'Fetch.requestPaused') {
-                const r = params.request;
-                void (async () => {
-                    try {
-                        const response = await respond(new Request(r.url, {
-                            method: r.method,
-                            headers: r.headers,
-                            ...(r.method === 'GET' || r.method === 'HEAD' ? {} : { body: (await bodyOf(r)) ?? null }),
-                        }));
-                        const headers = [...response.headers]
-                            .filter(([k]) => k !== 'set-cookie')
-                            .map(([name, value]) => ({ name, value }));
-                        for (const c of response.headers.getSetCookie())
-                            headers.push({ name: 'set-cookie', value: c });
-                        const body = Buffer.from(await response.arrayBuffer()).toString('base64');
-                        await send('Fetch.fulfillRequest', {
-                            requestId: params.requestId,
-                            responseCode: response.status,
-                            responseHeaders: headers,
-                            body,
-                        });
-                    }
-                    catch (error) {
-                        errors.push({ kind: 'request', text: `the app threw: ${String(error)}`, at: r.url });
-                        await send('Fetch.failRequest', { requestId: params.requestId, errorReason: 'Failed' }).catch(() => { });
-                    }
-                })();
-            }
-            if (method.startsWith('Network.'))
-                lastActivity = Date.now();
-            if (method === 'Network.requestWillBeSent') {
-                inflight++;
-                if (params.type === 'Document')
-                    documentUrls.add(params.requestId);
-            }
-            if (method === 'Network.loadingFinished')
-                inflight--;
-            if (method === 'Network.loadingFailed') {
-                inflight--;
-                if (!params.canceled && params.blockedReason !== 'inspector')
-                    errors.push({ kind: 'request', text: params.errorText, at: null });
-            }
-            if (method === 'Network.responseReceived') {
-                const url = params.response.url.startsWith(ORIGIN)
-                    ? params.response.url.slice(ORIGIN.length)
-                    : params.response.url;
-                if (documentUrls.has(params.requestId))
-                    status = params.response.status;
-                if (params.response.status >= 400)
-                    errors.push({ kind: 'request', text: `${params.response.status} ${url}`, at: url });
-            }
-            if (method === 'Runtime.exceptionThrown') {
-                const d = params.exceptionDetails;
-                const frame = d.stackTrace?.callFrames?.[0];
-                errors.push({
-                    kind: 'exception',
-                    text: d.exception?.description?.split('\n')[0] ?? d.text,
-                    at: frame ? `${frame.url.replace(ORIGIN, '')}:${frame.lineNumber + 1}` : (d.url ?? null),
-                });
-            }
-            if (method === 'Runtime.consoleAPICalled' && params.type === 'error') {
-                const frame = params.stackTrace?.callFrames?.[0];
-                errors.push({
-                    kind: 'console',
-                    text: params.args
-                        .map((a) => a.value !== undefined ? String(a.value) : String(a.description ?? a.type).split('\n')[0])
-                        .join(' '),
-                    at: frame ? `${frame.url.replace(ORIGIN, '')}:${frame.lineNumber + 1}` : null,
-                });
-            }
-            if (method === 'Page.frameStartedLoading' && params.frameId === targetId)
-                loaded_ = false;
-            if (method === 'Page.loadEventFired')
-                loaded_ = true;
-        });
-        await send('Fetch.enable', { patterns: [{ urlPattern: `${ORIGIN}/*` }] });
-        await send('Network.enable');
-        await send('Runtime.enable');
-        await send('Page.enable');
-        await send('Emulation.setDeviceMetricsOverride', {
-            width: 1280,
-            height: 800,
-            deviceScaleFactor: 1,
-            mobile: false,
+            tab.handle(method, params, from);
+            if (method === 'Target.attachedToTarget')
+                bySession.set(params.sessionId, tab);
         });
-        if (options.reducedMotion)
-            await send('Emulation.setEmulatedMedia', {
-                features: [{ name: 'prefers-reduced-motion', value: 'reduce' }],
-            });
-        const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-        const evaluate = async (expression) => {
-            const r = await send('Runtime.evaluate', { expression, returnByValue: true, awaitPromise: true });
-            if (r.exceptionDetails)
-                throw new Error(r.exceptionDetails.exception?.description ?? r.exceptionDetails.text);
-            return r.result.value;
-        };
-        const settle = async () => {
-            const start = Date.now();
-            await sleep(SETTLE_MS);
-            while (Date.now() - start < CAP_MS) {
-                if (inflight <= 0 && Date.now() - lastActivity >= QUIET_MS) {
-                    const ready = await evaluate("!document.getElementById('hozu-payload') || document.documentElement.hasAttribute('data-hozu-ready')").catch(() => false);
-                    if (ready && loaded_)
-                        return;
-                }
-                await sleep(50);
-            }
-        };
-        const open = async (to) => {
-            loaded_ = false;
-            lastActivity = Date.now();
-            await send('Page.navigate', { url: ORIGIN + to });
-            await settle();
-        };
-        const mouse = async (x, y) => {
-            for (const type of ['mouseMoved', 'mousePressed', 'mouseReleased'])
-                await send('Input.dispatchMouseEvent', { type, x, y, button: 'left', clickCount: 1 });
-        };
-        await open(path);
-        const firstStatus = status;
-        for (const raw of options.steps) {
-            const text = raw.trim();
-            const space = text.indexOf(' ');
-            const verb = space < 0 ? text : text.slice(0, space);
-            const rest = space < 0 ? '' : text.slice(space + 1).trim();
-            const pair = () => {
-                const eq = rest.indexOf('=');
-                if (eq <= 0)
-                    throw new Error(`"${text}" needs <label>=<value>`);
-                return [rest.slice(0, eq).trim(), rest.slice(eq + 1)];
-            };
-            let result = {};
-            try {
-                if (verb === 'fill') {
-                    const [label, value] = pair();
-                    result = await evaluate(`${PAGE}.fill(${JSON.stringify(label)}, ${JSON.stringify(value)})`);
-                }
-                else if (verb === 'select') {
-                    const [label, value] = pair();
-                    result = await evaluate(`${PAGE}.select(${JSON.stringify(label)}, ${JSON.stringify(value)})`);
-                }
-                else if (verb === 'click' || verb === 'check') {
-                    const at = await evaluate(`${PAGE}.point(${JSON.stringify(verb === 'click' ? 'click' : 'check')}, ${JSON.stringify(rest)})`);
-                    if (at.error)
-                        result = at;
-                    else {
-                        await mouse(at.x, at.y);
-                        result = { note: at.note };
-                    }
-                }
-                else if (verb === 'press') {
-                    const key = KEYS[rest] ?? {
-                        code: `Key${rest.toUpperCase()}`,
-                        keyCode: rest.toUpperCase().charCodeAt(0),
-                        text: rest,
-                    };
-                    await send('Input.dispatchKeyEvent', {
-                        type: 'keyDown',
-                        key: rest,
-                        code: key.code,
-                        windowsVirtualKeyCode: key.keyCode,
-                        ...(key.text ? { text: key.text } : {}),
+        const tabOf = (mode, actor) => tabs.find((t) => t.mode === mode && t.actor === options.actors[actor].name);
+        const nameOf = (actor) => options.actors[actor].name;
+        const steps = [];
+        const initial = new Map();
+        let failed = false;
+        let opened = 0;
+        for (const item of options.plan) {
+            if ('open' in item) {
+                await Promise.all(modes.map(async (mode, m) => {
+                    const tab = new Tab(cdp, worlds[m], mode, nameOf(item.open), errors);
+                    tabs.push(tab);
+                    await tab.start(cookies[m][item.open] ?? null, options.reducedMotion);
+                    bySession.set(tab.sessionId, tab);
+                    await tab.open(path);
+                    initial.set(tab, tab.status);
+                    await tab.look();
+                }));
+                if (opened++ > 0) {
+                    const changes = modes.map((mode) => {
+                        const tab = tabOf(mode, item.open);
+                        return {
+                            mode,
+                            ok: true,
+                            note: null,
+                            jsOnly: null,
+                            requested: true,
+                            navigated: true,
+                            url: tab.snapshot.url,
+                            added: linesOf(tab.snapshot),
+                            removed: [],
+                        };
                     });
-                    await send('Input.dispatchKeyEvent', {
-                        type: 'keyUp',
-                        key: rest,
-                        code: key.code,
-                        windowsVirtualKeyCode: key.keyCode,
+                    steps.push({
+                        step: `open ${path}`,
+                        ok: true,
+                        note: null,
+                        actor: nameOf(item.open),
+                        modes: changes,
                     });
                 }
-                else if (verb === 'wait') {
-                    const ms = Number(rest);
-                    if (!Number.isFinite(ms) || ms < 0 || ms > 30000)
-                        throw new Error('wait takes milliseconds (0–30000)');
-                    await sleep(ms);
-                }
-                else if (verb === 'goto') {
-                    if (!rest.startsWith('/'))
-                        throw new Error('goto takes a path such as /items/1');
-                    await open(rest);
-                }
-                else
-                    throw new Error(`Unknown step "${verb}": use fill <label>=<value>, select <label>=<option>, check <label>, click <name>, press <key>, wait <ms>, goto <path>`);
+                continue;
             }
-            catch (error) {
-                result = { error: error instanceof Error ? error.message : String(error) };
+            const actor = nameOf(item.actor);
+            const text = item.step.trim();
+            const base = { step: text, ...(actor === null ? {} : { actor }) };
+            if (failed) {
+                steps.push({ ...base, ok: false, note: 'skipped after a failed step' });
+                continue;
             }
-            steps.push({ step: text, ok: !result.error, note: result.error ?? result.note ?? null });
-            if (result.error)
-                break;
-            if (verb !== 'wait' && verb !== 'goto')
-                await settle();
+            const results = await Promise.all(modes.map(async (mode) => {
+                const tab = tabOf(mode, item.actor);
+                const others = tabs.filter((t) => t.mode === mode && t !== tab);
+                const before = tab.snapshot;
+                tab.requested = false;
+                tab.mark();
+                for (const o of others)
+                    o.mark();
+                let r;
+                let verb = '';
+                try {
+                    const parsed = parseStep(text);
+                    verb = parsed.verb;
+                    r = await act(tab, parsed);
+                }
+                catch (error) {
+                    r = { ok: false, note: error instanceof Error ? error.message : String(error), jsOnly: null };
+                }
+                const acted = r.ok && !r.jsOnly && verb !== 'wait' && verb !== 'goto';
+                if (acted)
+                    await tab.settle();
+                await Promise.all(others.map((o) => o.settle()));
+                const after = await tab.look();
+                const elsewhere = [];
+                for (const o of others) {
+                    const was = o.snapshot;
+                    const d = delta(was, await o.look());
+                    if (d.added.length || d.removed.length)
+                        elsewhere.push({ actor: o.actor ?? '', mode, ...d });
+                }
+                const change = {
+                    mode,
+                    ok: r.ok,
+                    note: r.note,
+                    jsOnly: r.jsOnly,
+                    requested: tab.requested,
+                    navigated: before.url !== after.url,
+                    url: after.url,
+                    ...delta(before, after),
+                };
+                return { change, before, after, elsewhere };
+            }));
+            const changes = results.map((x) => x.change);
+            const [on, off] = results;
+            const differs = on !== undefined &&
+                off !== undefined &&
+                same(on.before, off.before) &&
+                on.change.requested &&
+                off.change.requested &&
+                !same(on.after, off.after);
+            const elsewhere = results.flatMap((x) => x.elsewhere);
+            const ok = changes.every((c) => c.ok);
+            steps.push({
+                ...base,
+                ok,
+                note: combine(changes),
+                modes: changes,
+                ...(differs ? { differs } : {}),
+                ...(elsewhere.length ? { elsewhere } : {}),
+            });
+            if (!ok)
+                failed = true;
         }
-        for (const skipped of options.steps.slice(steps.length))
-            steps.push({ step: skipped.trim(), ok: false, note: 'skipped after a failed step' });
-        const expected = Object.entries((await evaluate("(() => { try { return JSON.parse(document.getElementById('hozu-payload')?.textContent ?? '{}').widgets ?? {} } catch { return {} } })()"))).map(([name, w]) => [name, w.load]);
-        const report = await evaluate(`${PAGE}.report(${JSON.stringify(options.select)}, ${JSON.stringify(expected)})`);
+        const order = (e) => options.actors.findIndex((a) => a.name === (e.actor ?? null)) * 2 + modes.indexOf(e.mode ?? modes[0]);
+        errors.sort((a, b) => order(a) - order(b));
+        const first = tabs.find((t) => t.actor === options.actors[0].name);
+        const on = tabs.find((t) => t.actor === first.actor && t.mode === 'on');
+        const expected = on
+            ? Object.entries((await on.evaluate("(() => { try { return JSON.parse(document.getElementById('hozu-payload')?.textContent ?? '{}').widgets ?? {} } catch { return {} } })()"))).map(([name, w]) => [name, w.load])
+            : [];
+        const report = on
+            ? await on.page(`report(${q(options.select)}, ${q(expected)})`)
+            : { hydrated: false, widgets: [], ...(await first.page(`report(${q(options.select)}, [])`)) };
         let screenshot = null;
         if (options.screenshot) {
-            const shot = await send('Page.captureScreenshot', { format: 'png' });
+            const shot = await first.send('Page.captureScreenshot', { format: 'png' });
             const file = resolve(options.screenshot);
             await writeFile(file, Buffer.from(shot.data, 'base64'));
             const near = relative(process.cwd(), file);
             screenshot = near && !near.startsWith('..') ? near : file;
         }
-        const full = report.text;
-        return {
+        const clip = (text) => (text.length > LIMIT && !options.full ? `${text.slice(0, LIMIT)}…` : text);
+        const full = first.snapshot.text;
+        const output = {
             path,
-            url: report.url,
-            status: firstStatus,
-            title: report.title,
-            hydrated: report.hydrated,
+            url: first.snapshot.url,
+            status: initial.get(first) ?? first.status,
+            title: first.snapshot.title,
+            hydrated: on ? report.hydrated : false,
             steps,
             errors,
-            widgets: report.widgets,
-            text: full.length > LIMIT && !options.full ? `${full.slice(0, LIMIT)}…` : full,
+            widgets: (on ? report.widgets : []),
+            text: clip(full),
             truncated: full.length > LIMIT && !options.full,
-            elements: report.elements,
+            elements: (on ? report.elements : report.elements),
             screenshot,
+            modes,
         };
+        if (tabs.length > 1)
+            output.actors = tabs.map((t) => ({
+                name: t.actor ?? '',
+                mode: t.mode,
+                url: t.snapshot.url,
+                status: initial.get(t) ?? t.status,
+                title: t.snapshot.title,
+                steps: steps.filter((s) => (s.actor ?? null) === t.actor),
+                errors: errors.filter((e) => (e.actor ?? null) === t.actor && e.mode === t.mode),
+                text: clip(t.snapshot.text),
+            }));
+        return output;
     }
     finally {
-        await cdp.close().catch(() => { });
+        await cdp?.close().catch(() => { });
+        await Promise.all(worlds.map((w) => w.close().catch(() => 0)));
         await rm(profile, { recursive: true, force: true }).catch(() => { });
     }
 }
-export const browseFailed = (out) => out.errors.length > 0 || out.steps.some((s) => !s.ok) || out.widgets.some((w) => w.state === 'failed');
-export function describeBrowse(out) {
+export const browseFailed = (out) => out.errors.length > 0 ||
+    out.steps.some((s) => !s.ok || s.differs) ||
+    out.widgets.some((w) => w.state === 'failed');
+const ITEMS = 6;
+const WIDTH = 60;
+const TEXT = 600;
+const cut = (s, n, full) => (!full && s.length > n ? `${s.slice(0, n)}…` : s);
+function describeChange(c, full) {
+    if (!c.ok)
+        return `FAILED — ${c.note}`;
+    if (c.jsOnly)
+        return `js-only (${c.jsOnly})`;
+    const moved = c.navigated;
+    const items = [
+        ...c.added.map((l) => (moved ? cut(l, WIDTH, full) : `+ ${cut(l, WIDTH, full)}`)),
+        ...c.removed.map((l) => `− ${cut(l, WIDTH, full)}`),
+    ];
+    const shown = full ? items : items.slice(0, ITEMS);
+    const more = items.length - shown.length;
+    const list = [...shown, ...(more ? [`… ${more} more`] : [])].join(' · ');
+    return [moved ? `→ ${c.url}` : '', list].filter(Boolean).join(': ');
+}
+export function describeBrowse(out, full = false) {
+    const modes = out.modes ?? ['on'];
     const lines = [
-        `BROWSE ${out.path} → ${out.status}${out.url !== out.path ? ` (now ${out.url})` : ''} · ${out.hydrated ? 'hydrated' : 'not hydrated'}`,
+        `BROWSE ${out.path} → ${out.status}${out.url !== out.path ? ` (now ${out.url})` : ''} · ${modes.includes('on') ? (out.hydrated ? 'hydrated' : 'not hydrated') : 'no JS'} · js ${modes.join('+')}`,
         `  title: ${out.title}`,
     ];
-    for (const s of out.steps)
-        lines.push(`  ${s.ok ? 'step' : 'FAILED'}: ${s.step}${s.note ? ` — ${s.note}` : ''}`);
+    out.steps.forEach((s, i) => {
+        const who = s.actor ? `${s.actor}: ` : '';
+        const head = `  ${i + 1} ${who}${s.step}`;
+        const changes = s.modes ?? [];
+        const texts = changes.map((c) => describeChange(c, full));
+        const flag = s.differs ? '  ≠ DIFFERS: both modes made a request and the resulting text differs' : '';
+        if (!changes.length)
+            lines.push(`${head}${s.note ? ` — ${s.note}` : ''}`);
+        else if (texts.every((t) => t === texts[0]))
+            lines.push(`${head}${texts[0] ? `: ${texts[0]}` : ''}${s.ok && s.note ? ` — ${s.note}` : ''}${flag}`);
+        else {
+            lines.push(`${head}${flag}`);
+            changes.forEach((c, k) => {
+                lines.push(`      ${c.mode}: ${texts[k] || '(no change)'}${c.ok && c.note ? ` — ${c.note}` : ''}`);
+            });
+        }
+        for (const e of s.elsewhere ?? [])
+            lines.push(`      ${e.actor || 'page'}${modes.length > 1 ? ` (${e.mode})` : ''}: ${describeChange({
+                mode: e.mode,
+                ok: true,
+                note: null,
+                jsOnly: null,
+                requested: false,
+                navigated: false,
+                url: '',
+                added: e.added,
+                removed: e.removed,
+            }, full)}`);
+    });
     if (!out.errors.length)
         lines.push('  errors: none');
     for (const e of out.errors)
-        lines.push(`  error (${e.kind}): ${e.text}${e.at ? ` at ${e.at}` : ''}`);
+        lines.push(`  error (${[e.kind, e.type, e.actor, modes.length > 1 ? e.mode : undefined].filter(Boolean).join(', ')}): ${e.text}${e.at ? ` at ${e.at}` : ''}${e.url && e.url !== e.at ? ` on ${e.url}` : ''}`);
     for (const w of out.widgets)
         lines.push(`  widget ${w.name}: ${w.state}${w.width === null ? '' : ` ${w.width}×${w.height}`}${w.state === 'mounted' ? `, ${w.canvases} canvas, ${w.elements} elements` : ''}${w.hint ? ` — ${w.hint}` : ''}`);
-    lines.push(`  text: ${out.text.replace(/\n/g, ' · ')}${out.truncated ? ' (truncated; --full shows all)' : ''}`);
+    const text = out.text.replace(/\n/g, ' · ');
+    lines.push(`  text: ${cut(text, TEXT, full)}${out.truncated || (!full && text.length > TEXT) ? ' (truncated; --full shows all)' : ''}`);
+    const firstName = out.actors?.[0]?.name;
+    for (const a of out.actors ?? [])
+        if (a.name !== firstName && a.mode === modes[0])
+            lines.push(`  ${a.name}: ${a.url} · ${cut(a.text.replace(/\n/g, ' · '), 200, full)}`);
     for (const e of out.elements)
-        lines.push(`  ${e.selector}: <${e.tag}${Object.entries(e.attrs)
-            .filter(([k]) => k !== 'class' && k !== 'style')
-            .map(([k, v]) => (v === '' ? ` ${k}` : ` ${k}="${v}"`))
-            .join('')}>${e.text ? ` ${e.text}` : ''}`);
+        lines.push(`  ${describeElement(e)}`);
     if (out.screenshot)
         lines.push(`  screenshot: ${out.screenshot}`);
     return `${lines.join('\n')}\n`;