pw-repl 0.3.2 → 0.4.1

package/lib/commands.js

@@ -1,13 +1,14 @@
 const path = require('path');
 const fs = require('fs');
-const { state, withTimeout, onShutdown, shutdown } = require('./state');
+const { state, clientRecord, withTimeout, onShutdown, shutdown } = require('./state');
 const out = require('./output');
 const HELP = require('./help');
+const { takeOptions } = require('./cli-names');
 const { devices } = require('playwright-core');
-const { toSelector, unquote, splitSelector } = require('./syntax');
+const { toSelector, unquote, splitSelector, REF, keyName } = require('./syntax');
 
 const { printOutput, OUTPUT_LIMIT } = out;
-const SCREENSHOT_DIR = process.env.PW_SCREENSHOT_DIR || '/tmp';
+
 const COMMAND_TIMEOUT = 15000;
 const MAX_CAPTURE_EVENTS = 10000;
 const MAX_CAPTURE_TEXT = 400000;
@@ -56,7 +57,7 @@ async function startCapture(tokens) {
     out.notice('The captured tab closed, which ended the capture; capture shows what it recorded.');
   });
   const capture = {
-    page, label, startedAt, events, handlers, wake: null,
+    page, label, startedAt, events, handlers, wake: null, owner: state.client,
     get dropped() { return dropped; },
     get shortened() { return shortened; },
   };
@@ -115,7 +116,7 @@ function ensureDialogHandler(p) {
 
 // Runs ahead of the command queue (see runner.js), so it still works while
 // commands wait on the dialog; it returns its output rather than printing it.
-async function dialogCommand(args) {
+async function dialogCommand(args, selected = state.page) {
   const [action, ...rest] = (args || '').trim().split(/\s+/).filter(Boolean);
   const pages = state.browser.contexts().flatMap(c => c.pages());
   for (const p of openDialogs.keys()) if (p.isClosed() || !pages.includes(p)) openDialogs.delete(p);
@@ -126,7 +127,7 @@ async function dialogCommand(args) {
   }
   if (action !== 'accept' && action !== 'dismiss') throw new Error('Usage: dialog [accept [text] | dismiss]');
   // The selected tab's dialog, or the only one open.
-  const page = openDialogs.has(state.page) ? state.page : openDialogs.size === 1 ? [...openDialogs.keys()][0] : null;
+  const page = openDialogs.has(selected) ? selected : openDialogs.size === 1 ? [...openDialogs.keys()][0] : null;
   if (!page) throw new Error(openDialogs.size ? 'Several tabs have a dialog open; select one with tab <index|url-part> first' : 'No dialog is open.');
   const dialog = openDialogs.get(page);
   openDialogs.delete(page);
@@ -166,7 +167,8 @@ const SCREENSHOT_DELAY_MAX = 60;
 
 function nextScreenshotPath(name) {
   const filename = name ? `screenshot-${name}` : `screenshot-${Date.now()}`;
-  return path.join(SCREENSHOT_DIR, `${filename}.png`);
+  // A REPL on a socket of its own keeps its screenshots next to it, as its log is.
+  return path.join(process.env.PW_SCREENSHOT_DIR || state.ownDir || '/tmp', `${filename}.png`);
 }
 
 // Per page: a CDP session's emulation applies to the page it is attached to
@@ -178,6 +180,28 @@ function keptSession(p) {
   return keptSessions.get(p);
 }
 
+// Chrome all but stops drawing a tab that is not in front once it has had
+// input (about a frame a second), and Playwright waits for frames to see an
+// element hold still before acting on it, so each click in a tab opened in the
+// background took 1-2s. A screencast keeps the tab drawing without bringing it
+// to the front, for as long as the REPL runs (the throttle is back within
+// seconds of stopping it). Its frames are tiny and rare; the cost is that the
+// tab renders at full rate, as if in front, an animation or a video included.
+const drawingPages = new WeakSet();
+
+async function keepDrawing(p) {
+  if (drawingPages.has(p)) return;
+  drawingPages.add(p);
+  try {
+    const session = await keptSession(p);
+    session.on('Page.screencastFrame', frame => session.send('Page.screencastFrameAck', { sessionId: frame.sessionId }).catch(() => {}));
+    await session.send('Page.startScreencast', { format: 'jpeg', quality: 1, maxWidth: 8, maxHeight: 8, everyNthFrame: 60 });
+  } catch {
+    // Only slower without it.
+    drawingPages.delete(p);
+  }
+}
+
 const networkEnabled = new WeakSet();
 // page -> how its network is changed: { offline: true }, or slowed { latency, down, up } (ms, kbps).
 const networkChanged = new WeakMap();
@@ -196,7 +220,7 @@ async function setNetwork(p, setting) {
     downloadThroughput: setting?.down ? setting.down * 125 : -1,
     uploadThroughput: setting?.up ? setting.up * 125 : -1,
   });
-  if (setting) networkChanged.set(p, setting); else networkChanged.delete(p);
+  if (setting) networkChanged.set(p, { ...setting, owner: state.client }); else networkChanged.delete(p);
 }
 
 function networkText(setting) {
@@ -266,7 +290,7 @@ async function setEmulation(p, next) {
   if (next.locale !== previous.locale) await send('Emulation.setLocaleOverride', next.locale ? { locale: next.locale } : {});
   if (next.timezone !== previous.timezone) await send('Emulation.setTimezoneOverride', { timezoneId: next.timezone || '' });
   if (next.scheme !== previous.scheme) await send('Emulation.setEmulatedMedia', { features: next.scheme ? [{ name: 'prefers-color-scheme', value: next.scheme }] : [] });
-  if (emulatedKinds(next).length) emulations.set(p, next); else emulations.delete(p);
+  if (emulatedKinds(next).length) emulations.set(p, { ...next, owner: state.client }); else emulations.delete(p);
 }
 
 function showEmulation() {
@@ -339,14 +363,22 @@ function routeKind(how, rest, usage) {
   if (/^\d{3}$/.test(how)) {
     const status = Number(how);
     if (status < 200 || status > 599) throw new Error('Status must be from 200 to 599');
-    if (!rest) throw new Error(usage);
-    parseJson(rest, 'Body');
-    const preview = rest.length > ROUTE_PREVIEW ? `${rest.slice(0, ROUTE_PREVIEW)}…` : rest;
+    // JSON unless its type is given, so a typo in the JSON is not served as text.
+    const typed = /^--content-type=("(?:[^"\\]|\\.)*"|'[^']*'|\S+)(?:\s+([\s\S]*))?$/.exec(rest || '');
+    const body = typed ? typed[2] || '' : rest || '';
+    if (!typed && body) {
+      try { JSON.parse(body); } catch (error) {
+        throw new Error(`Body is not valid JSON: ${error.message}; for another kind, give its type: route <url-glob> <status> --content-type=text/plain <body>`);
+      }
+    }
+    // Quoted when it has a parameter: --content-type="text/html; charset=utf-8".
+    const contentType = typed ? unquote(typed[1]) : body ? 'application/json' : undefined;
+    const preview = body.length > ROUTE_PREVIEW ? `${body.slice(0, ROUTE_PREVIEW)}…` : body;
     return {
-      text: `${status} ${preview}`,
+      text: `${status}${typed ? ` (${contentType})` : ''}${preview ? ` ${preview}` : ''}`,
       async handle(r, req, tag) {
         markChanged(req, status, 'faked');
-        await r.fulfill({ status, contentType: 'application/json', body: rest });
+        await r.fulfill({ status, contentType, body });
         out.notice(`Faked: ${tag()} -> ${status}`);
       },
     };
@@ -398,7 +430,8 @@ function routeKind(how, rest, usage) {
 function listRoutes() {
   const routes = routesFor(state.page);
   const forms = [
-    ['route <url-glob> <status> <json-body>', 'answer it with this status and JSON'],
+    ['route <url-glob> <status> [json-body]', 'answer it with this status and JSON'],
+    ['route <url-glob> <status> --content-type=<type> <body>', 'or with a body of another type'],
     ['route <url-glob> patch <json>', 'let it through, then change its JSON'],
     ['route <url-glob> delay <seconds>', 'hold it, then let it through'],
     ['route <url-glob> abort', 'fail it as if the connection broke'],
@@ -442,6 +475,11 @@ const BODY_TIMEOUT = 15000;
 // Hidden unless asked for: they are rarely what is being checked and crowd out
 // the API calls that are.
 const RECENT_HIDDEN_TYPES = new Set(['image', 'font', 'stylesheet', 'media']);
+// The bodies body prints; any other is binary.
+const TEXT_BODY = /json|^text\/|javascript|xml|html|x-www-form-urlencoded/;
+// A watched tab keeps each body watch shows as it arrives, since the browser
+// drops them once the tab navigates, often before anyone has read them.
+const KEPT_BODY_MAX = 100 * 1024;
 const recentLogs = new WeakMap();
 const consoleLogs = new WeakMap();
 // request -> how a route changed it (faked or patched), shown after its status.
@@ -451,6 +489,8 @@ const requestEntries = new WeakMap();
 const loadedAt = new WeakMap();
 // Tabs this REPL opened with tab new.
 const openedTabs = new WeakSet();
+// page -> the client that opened it (null: the prompt, or a sender without a name).
+const tabOwners = new WeakMap();
 
 function clipText(text) {
   return text.length > MAX_EVENT_TEXT ? `${text.slice(0, MAX_EVENT_TEXT)}…` : text;
@@ -463,6 +503,17 @@ function consoleText(msg) {
   return /^Failed to load resource/.test(text) && url ? `${text}: ${url}` : text;
 }
 
+// A level includes the ones above it, as playwright-cli's console [min-level]
+// does, which sorts the types the same way; a page error is an error.
+const CONSOLE_LEVELS = ['error', 'warning', 'info', 'debug'];
+const DEBUG_TYPES = new Set(['clear', 'debug', 'endGroup', 'profile', 'profileEnd', 'startGroup', 'startGroupCollapsed', 'trace']);
+
+function consoleLevel(type) {
+  if (type === 'error' || type === 'assert' || type === 'pageerror') return 'error';
+  if (type === 'warning') return 'warning';
+  return DEBUG_TYPES.has(type) ? 'debug' : 'info';
+}
+
 function keep(log, entry) {
   log.push(entry);
   if (log.length > RECENT_MAX) log.shift();
@@ -473,12 +524,14 @@ function ensureRecentLog(p) {
   const log = [];
   const logs = [];
   let nextId = 1;
+  let newDocument = false;
   recentLogs.set(p, log);
   consoleLogs.set(p, logs);
   p.on('request', req => {
     let navigation = false;
     try { navigation = req.isNavigationRequest() && req.frame() === p.mainFrame(); } catch {}
     const entry = { id: nextId++, t: Date.now(), method: req.method(), url: req.url(), type: req.resourceType(), status: 'pending', ms: null, response: null, navigation };
+    if (navigation) newDocument = true;
     requestEntries.set(req, entry);
     keep(log, entry);
   });
@@ -497,9 +550,21 @@ function ensureRecentLog(p) {
       if (res) status = String(res.status());
     } catch {}
     finish(req, changedRequests.has(req) ? `${status} ${changedRequests.get(req)}` : status, res);
+    keepBody(p, requestEntries.get(req), res);
+  });
+  p.on('requestfailed', req => {
+    finish(req, `failed: ${req.failure()?.errorText || 'unknown'}`);
+    // A page that never loaded: the app's next route change is not a load either.
+    if (requestEntries.get(req)?.navigation) newDocument = false;
   });
-  p.on('requestfailed', req => finish(req, `failed: ${req.failure()?.errorText || 'unknown'}`));
   p.on('load', () => loadedAt.set(p, Date.now()));
+  // A page load, marked among the messages it comes between; it ages out with them. Only a new
+  // document counts: an app's own route change (pushState, a hash) navigates without loading.
+  p.on('framenavigated', frame => {
+    if (frame !== p.mainFrame() || !newDocument) return;
+    newDocument = false;
+    keep(logs, { t: Date.now(), type: 'load', text: frame.url() });
+  });
   p.on('console', msg => keep(logs, { t: Date.now(), type: msg.type(), text: clipText(consoleText(msg)) }));
   // Uncaught exceptions never reach the console event.
   p.on('pageerror', error => keep(logs, { t: Date.now(), type: 'pageerror', text: clipText(error.stack || error.message) }));
@@ -527,10 +592,43 @@ const WATCH_MAX = 200;
 const WATCH_REQUESTS_SHOWN = 5;
 // Scripts too: a dev server loads dozens per navigation, crowding out the API calls.
 const WATCH_HIDDEN_TYPES = new Set([...RECENT_HIDDEN_TYPES, 'script']);
+
+// Tabs whose watch on --next-tab is still starting: the page can load before it is ready.
+const startingWatches = new WeakSet();
+
+// A page that navigates as soon as a request answers (a login that redirects)
+// takes the body with it before the request is even reported finished; told to
+// in time, the browser keeps them outside the page instead. Once per tab, from
+// its first watch, and never switched off: up to 50 MB of the browser's memory
+// per watched tab, for as long as the REPL runs.
+const DURABLE_TOTAL = 50 * 1024 * 1024;
+const durablePages = new WeakSet();
+
+async function keepBodiesDurable(p) {
+  if (durablePages.has(p)) return;
+  durablePages.add(p);
+  try {
+    const session = await keptSession(p);
+    await session.send('Network.configureDurableMessages', { maxTotalBufferSize: DURABLE_TOTAL, maxResourceBufferSize: KEPT_BODY_MAX });
+  } catch {
+    // An older Chrome: bodies are still kept once their requests finish.
+  }
+}
+
+async function keepBody(p, entry, res) {
+  if (!entry || !res || !(watches.get(p)?.on || startingWatches.has(p)) || WATCH_HIDDEN_TYPES.has(entry.type)) return;
+  const headers = res.headers();
+  if (!TEXT_BODY.test(headers['content-type'] || '') || Number(headers['content-length']) > KEPT_BODY_MAX) return;
+  try {
+    const buffer = await res.body();
+    if (buffer.length <= KEPT_BODY_MAX) entry.kept = buffer;
+  } catch {}
+}
 const TYPING_BACKDATE_MAX = 60000;
 const PAGE_ACTIONS = new Set(['click', 'check', 'uncheck', 'select', 'fill', 'type', 'press', 'submit']);
-// Playwright refuses a second binding with the same name, so a retry must not re-register it.
+// page -> its binding's record function; the binding is added once per tab.
 const watchBindings = new WeakMap();
+const WATCH_BINDING = '__pwReplWatch';
 
 // Runs in the page. Describes elements the way snapshot does: role and name.
 const WATCH_SCRIPT = `(() => {
@@ -575,7 +673,7 @@ const WATCH_SCRIPT = `(() => {
   const send = (action, el, extra, since) => {
     // Typing still waiting for its pause is recorded first, so the steps stay in order.
     if (action !== 'type') for (const field of [...pending.keys()]) flushTyping(field);
-    if (typeof window.__pwReplWatch === 'function') window.__pwReplWatch({ action, target: el ? describe(el) : 'page', extra: extra || '', since: since || 0 });
+    if (typeof window.__pwReplWatch === 'function') window.__pwReplWatch(JSON.stringify({ action, target: el ? describe(el) : 'page', extra: extra || '', since: since || 0 }));
   };
   document.addEventListener('click', e => {
     const el = e.target.closest ? (e.target.closest(INTERACTIVE) || e.target) : e.target;
@@ -772,6 +870,7 @@ function printLive(p, watch) {
 }
 
 async function startWatching(p, changes = false, live = false) {
+  await keepBodiesDurable(p);
   let watch = watches.get(p);
   if (!watch) {
     // shownSeq and shownRequestId mark how far watch new has read.
@@ -790,12 +889,22 @@ async function startWatching(p, changes = false, live = false) {
       scheduleSettle(p, created);
     };
     // The page can call the binding itself, so only the page-side actions are
-    // accepted from it, as plain strings; navigations come from here.
+    // accepted from it, as plain strings; navigations come from here. A CDP
+    // binding of its own, not Playwright's exposeBinding: every Playwright
+    // client shares that one, so another tool attached to the browser would
+    // answer each call with a "not exposed" error thrown into the page.
     if (!watchBindings.has(p)) {
       const binding = { record: null };
-      await p.exposeBinding('__pwReplWatch', (_source, event) => {
-        if (binding.record && event && PAGE_ACTIONS.has(event.action)) binding.record(event.action, String(event.target || ''), String(event.extra || ''), event.since);
+      const session = await keptSession(p);
+      session.on('Runtime.bindingCalled', ({ name, payload }) => {
+        if (name !== WATCH_BINDING || !binding.record) return;
+        let event;
+        try { event = JSON.parse(payload); } catch { return; }
+        if (event && PAGE_ACTIONS.has(event.action)) binding.record(event.action, String(event.target || ''), String(event.extra || ''), event.since);
       });
+      // Calls are reported only to a session with Runtime on.
+      await session.send('Runtime.enable');
+      await session.send('Runtime.addBinding', { name: WATCH_BINDING });
       watchBindings.set(p, binding);
     }
     watchBindings.get(p).record = record;
@@ -827,6 +936,63 @@ async function startWatching(p, changes = false, live = false) {
   watch.on = true;
 }
 
+// Set by watch on --next-tab: the next tab to open (by anyone), or the next
+// whose URL contains part, is watched from its first page and selected. Each
+// new tab is watched from the moment it opens, since its first page may load
+// at once; one that turns out not to be it is left as it was.
+let nextTab = null;
+
+// The sender's own --next-tab is still waiting: the tab will be selected for it.
+function waitingForMe() {
+  return !!nextTab && nextTab.client === state.client;
+}
+const BROWSER_PAGE = /^(?:about|chrome|chrome-search|devtools|edge):/;
+
+function waitingText() {
+  return `Waiting to watch the next tab that opens${nextTab.part ? ` with a URL containing ${nextTab.part}` : ''}`;
+}
+
+function watchNewTab(p) {
+  const want = nextTab;
+  startingWatches.add(p);
+  keepBodiesDurable(p);
+  startWatching(p, want.changes, want.live).then(() => {
+    startingWatches.delete(p);
+    watches.get(p).owner = want.client;
+    const onNavigate = frame => {
+      if (frame !== p.mainFrame() || BROWSER_PAGE.test(frame.url())) return;
+      const url = frame.url();
+      p.off('framenavigated', onNavigate);
+      const watch = watches.get(p);
+      if (nextTab !== want || (want.part && !url.includes(want.part))) {
+        stopWatching(p, watch);
+        watch.events.length = 0;
+        return;
+      }
+      nextTab = null;
+      // Its record starts at its own page, not the new-tab page before it.
+      const first = watch.events.findIndex(e => e.action === 'navigate' && e.target === clipText(url));
+      if (first > 0) watch.events.splice(0, first);
+      // A page that loaded before the watch was ready: its step is added, at its request's time.
+      if (first < 0) {
+        const request = (recentLogs.get(p) || []).filter(e => e.navigation && e.url === url).pop();
+        watch.events.unshift({ seq: watch.nextSeq++, t: request ? request.t : Date.now(), action: 'navigate', target: clipText(url), extra: '' });
+      }
+      // Selected for the client that asked, whoever's command runs now.
+      const record = clientRecord(want.client);
+      if (record.page !== p) { record.previousPage = record.page; record.page = p; }
+      keepDrawing(p);
+      out.notice(`Watching the new tab ${url}, now the selected tab (watch on --next-tab)`);
+    };
+    p.on('framenavigated', onNavigate);
+    // Opened on its page already, as a link to a new tab does.
+    if (p.url() && !BROWSER_PAGE.test(p.url())) onNavigate(p.mainFrame());
+  }).catch(error => {
+    startingWatches.delete(p);
+    out.notice(`Could not watch the new tab ${p.url()}: ${error.message}`);
+  });
+}
+
 // For each step of a watch, the requests made between it and the next step.
 function requestsByStep(watch, p = state.page) {
   const requests = (recentLogs.get(p) || []).filter(r => !WATCH_HIDDEN_TYPES.has(r.type) && !r.url.startsWith('chrome-extension://'));
@@ -893,6 +1059,8 @@ function listModes() {
   const all = state.browser.contexts().flatMap(c => c.pages());
   state.tabListing = all.slice();
   const on = all.map((p, i) => [p, i, activeModes(p)]).filter(([, , modes]) => modes.length);
+  if (nextTab) out.log(`${waitingText()} (watch off stops waiting)${nextTab.client ? `, for ${nextTab.client}` : ''}${on.length ? '\n' : ''}`);
+  if (!on.length && nextTab) return;
   if (!on.length) {
     out.log('No modes are on in any tab.');
     out.log(hints([
@@ -905,28 +1073,54 @@ function listModes() {
     return;
   }
   const width = Math.max(...on.map(([p, i]) => `[${i}] ${p.url()}`.length));
-  for (const [p, i, modes] of on) out.log(`${p === state.page ? '*' : ' '} ${`[${i}] ${p.url()}`.padEnd(width)}  (${modes.join(' ')})`);
+  for (const [p, i, modes] of on) {
+    out.log(`${p === state.page ? '*' : ' '} ${`[${i}] ${p.url()}`.padEnd(width)}  (${modes.join(' ')})`);
+    const owners = modeOwners(p);
+    if (owners.some(([owner]) => owner)) out.log(`      on by ${ownersText(owners)}`);
+  }
   out.log(hints([['modes off', 'turn them all off']]));
 }
 
+// Who turned on each mode in a tab: [client, what], client null for the prompt or an unnamed sender.
+function modeOwners(p) {
+  const owners = [];
+  const watch = watches.get(p);
+  if (watch?.on) owners.push([watch.owner ?? null, 'watch']);
+  const network = networkChanged.get(p);
+  if (network) owners.push([network.owner ?? null, network.offline ? 'network:off' : 'network:slow']);
+  const emulated = emulations.get(p);
+  if (emulated) owners.push([emulated.owner ?? null, 'emulate']);
+  for (const [glob, route] of pageRoutes.get(p) || []) owners.push([route.owner ?? null, `route ${glob}`]);
+  if (cap && cap.page === p) owners.push([cap.owner ?? null, 'capture']);
+  return owners;
+}
+
+function ownersText(owners) {
+  const byOwner = new Map();
+  for (const [owner, what] of owners) byOwner.set(owner, [...(byOwner.get(owner) || []), what]);
+  return [...byOwner].map(([owner, whats]) => `${owner || 'unnamed'}: ${whats.join(', ')}`).join('; ');
+}
+
 // Turns off everything the REPL turned on, in every tab: nothing it leaves
-// behind keeps acting on someone's browser.
-async function allModesOff() {
+// behind keeps acting on someone's browser. mine: only what the running client turned on.
+async function allModesOff(mine = false) {
   const all = state.browser.contexts().flatMap(c => c.pages());
+  const ours = owner => !mine || (owner ?? null) === state.client;
   let any = false;
   let failed = 0;
+  if (nextTab && ours(nextTab.client)) { nextTab = null; any = true; out.log('Stopped waiting to watch a new tab'); }
   // A tab that fails (e.g. it crashed) must not keep the others' modes on.
   for (const p of all) {
     const done = [];
     let problem = null;
     try {
       const watch = watches.get(p);
-      if (watch?.on) { stopWatching(p, watch); done.push('watch off'); }
-      if (cap && cap.page === p) { endCapture(); done.push('capture off (capture shows it)'); }
-      const globs = [...(pageRoutes.get(p)?.keys() || [])];
+      if (watch?.on && ours(watch.owner)) { stopWatching(p, watch); done.push('watch off'); }
+      if (cap && cap.page === p && ours(cap.owner)) { endCapture(); done.push('capture off (capture shows it)'); }
+      const globs = [...(pageRoutes.get(p) || [])].filter(([, route]) => ours(route.owner)).map(([glob]) => glob);
       if (globs.length) { await unroute(p, globs); done.push(`${globs.length} route${globs.length === 1 ? '' : 's'} removed`); }
-      if (networkChanged.has(p)) { await setNetwork(p, null); done.push('network on'); }
-      if (emulations.has(p)) { await setEmulation(p, {}); done.push('emulate off'); }
+      if (networkChanged.has(p) && ours(networkChanged.get(p).owner)) { await setNetwork(p, null); done.push('network on'); }
+      if (emulations.has(p) && ours(emulations.get(p).owner)) { await setEmulation(p, {}); done.push('emulate off'); }
     } catch (error) {
       problem = error.message;
     }
@@ -934,7 +1128,7 @@ async function allModesOff() {
     if (problem) { failed += 1; out.error(`${p.url()}: could not turn everything off: ${problem}`); }
   }
   if (failed) throw new Error(`Modes may still be on in ${failed} tab${failed === 1 ? '' : 's'}; modes lists them`);
-  if (!any) out.log('No modes were on.');
+  if (!any) out.log(mine ? 'None of your modes were on.' : 'No modes were on.');
 }
 
 // The type a page sees for a file it is given, from its extension.
@@ -957,6 +1151,31 @@ function soleSelector(args, usage) {
   return toSelector(text);
 }
 
+const MODIFIERS = ['Alt', 'Control', 'ControlOrMeta', 'Meta', 'Shift'];
+
+// click <selector> [button] [--modifiers=<keys>], as playwright-cli's click
+// takes them. The button is read only after a ref or a quoted selector, so
+// click text=Turn right is still one selector.
+function clickArgs(args, usage) {
+  // Found outside quotes only, so a quoted selector keeps whatever is in it.
+  const { found, rest: text } = takeOptions((args || '').trim(), { modifiers: 'value' });
+  const modifiers = found.flatMap(o => (o.value || '').split(',').filter(Boolean).map(keyName));
+  const unknown = modifiers.find(m => !MODIFIERS.includes(m));
+  if (unknown) throw new Error(`Not a modifier: ${unknown}; they are ${MODIFIERS.join(', ')}`);
+  const parsed = splitSelector(text);
+  const button = parsed && /^(?:left|right|middle)$/.test(parsed.rest || '') && (REF.test(parsed.word) || /^["']/.test(text)) ? parsed.rest : null;
+  const selector = button ? parsed.selector : soleSelector(text, usage);
+  const options = { ...(button ? { button } : {}), ...(modifiers.length ? { modifiers } : {}) };
+  return { selector, shown: args.trim(), options };
+}
+
+// A trailing --submit, as playwright-cli's fill and type take: Enter afterwards.
+function submitFlag(args) {
+  if (/(?:^|\s)--submit\s/.test((args || '').trim())) throw new Error('--submit goes at the end of the line');
+  const match = /^([\s\S]*?)\s+--submit$/.exec((args || '').trim());
+  return match ? { args: match[1], submit: true } : { args, submit: false };
+}
+
 function selectorAndValue(args, usage, example) {
   const parsed = splitSelector(args);
   if (!parsed || parsed.rest === undefined) {
@@ -1046,15 +1265,17 @@ const SNAPSHOT_HINT_LINES = 60;
 // Each matching line (any part of it: role, name, flags such as [disabled]),
 // with the named elements it sits in, so a match can be placed without the
 // rest of the tree.
+// needle: text to find in any case, or a RegExp.
 function grepSnapshot(text, needle) {
-  const lower = needle.toLowerCase();
+  const lower = typeof needle === 'string' ? needle.toLowerCase() : null;
+  const matches = line => (lower === null ? needle.test(line) : line.toLowerCase().includes(lower));
   const stack = [];
   const hits = [];
   const label = line => line.trim().replace(/^- /, '').replace(/:$/, '').replace(/^'(.*)'$/, '$1');
   for (const line of text.split('\n')) {
     const indent = line.length - line.trimStart().length;
     while (stack.length && stack[stack.length - 1].indent >= indent) stack.pop();
-    if (line.toLowerCase().includes(lower)) {
+    if (matches(line)) {
       const around = stack.filter(a => !/^generic(?: \[|$)/.test(a.label));
       // A hit with no ref of its own (text) keeps the ref of what holds it, so
       // snapshot <ref> can show what sits beside it: the value next to a label.
@@ -1067,6 +1288,17 @@ function grepSnapshot(text, needle) {
   return hits;
 }
 
+// For --regex, as playwright-cli's find --regex and requests --filter take one.
+function regexOf(pattern) {
+  try { return new RegExp(pattern); } catch (error) { throw new Error(`Not a regular expression: ${error.message}`); }
+}
+
+// A pattern without its quotes, and with \" inside them as ", as snapshot
+// reads one: other backslashes are the regexp's own (\d).
+function patternText(text) {
+  return text.replace(/^(["'])(.*)\1$/, '$2').replace(/\\"/g, '"');
+}
+
 // Local time with its offset (18:16:15.721-06:00), so it reads against the
 // user's clock and is still unambiguous.
 function clock(t) {
@@ -1107,7 +1339,16 @@ function discardCapture() {
 // person using the browser; Playwright's newPage would bring it to the front.
 const OPEN_TIMEOUT = 10000;
 
+// True while tab new opens a tab: watch on --next-tab waits for one someone
+// else opens, not one a client of the REPL opens for itself.
+let opening = false;
+
 async function openTab() {
+  opening = true;
+  try { return await openOwnTab(); } finally { opening = false; }
+}
+
+async function openOwnTab() {
   const ctx = state.browser.contexts()[0];
   let opened = null;
   const session = await state.browser.newBrowserCDPSession().catch(() => null);
@@ -1122,6 +1363,8 @@ async function openTab() {
   // A browser that cannot open one in the background (e.g. some headless ones) opens it as usual.
   if (!opened) opened = await ctx.newPage();
   openedTabs.add(opened);
+  tabOwners.set(opened, state.client);
+  keepDrawing(opened);
   return opened;
 }
 
@@ -1165,11 +1408,17 @@ async function listTabs() {
     // URL first on its own line: it is what distinguishes otherwise
     // identically titled tabs, and titles wrap less badly when indented.
     if (i) out.log('');
-    out.log(`${marker} [${i}] ${p.url()}`);
+    out.log(`${marker} [${i}] ${p.url()}${tabOwners.get(p) ? `  (opened by ${tabOwners.get(p)})` : ''}`);
     out.log(`        ${JSON.stringify(title)}`);
   }
 }
 
+// A function written out (el => ..., function (el) {...}), as one expression.
+function isFunctionText(text) {
+  if (!/^\s*(?:async\s+)?(?:function\b|\([^)]*\)\s*=>|[\w$]+\s*=>)/.test(text)) return false;
+  try { new Function(`return (${text}\n);`); return true; } catch { return false; }
+}
+
 const commands = {
   async tab(args) {
     const trimmed = (args || '').trim();
@@ -1194,6 +1443,7 @@ const commands = {
       if (p !== state.page) state.previousPage = state.page;
       state.page = p;
       ensureDialogHandler(p);
+      keepDrawing(p);
     };
     const byUrl = part => {
       const matches = all.filter(p => p.url().includes(part));
@@ -1270,15 +1520,15 @@ const commands = {
   },
 
   async click(args) {
-    const selector = soleSelector(args, 'click <selector>');
-    await onElement(selector, () => state.page.click(selector, { timeout: 5000 }));
-    out.log(`Clicked: ${args.trim()}`);
+    const { selector, shown, options } = clickArgs(args, 'click <selector> [left|right|middle] [--modifiers=<key>[,<key>]]');
+    await onElement(selector, () => state.page.click(selector, { ...options, timeout: 5000 }));
+    out.log(`Clicked: ${shown}`);
   },
 
   async dblclick(args) {
-    const selector = soleSelector(args, 'dblclick <selector>');
-    await onElement(selector, () => state.page.dblclick(selector, { timeout: 5000 }));
-    out.log(`Double-clicked: ${args.trim()}`);
+    const { selector, shown, options } = clickArgs(args, 'dblclick <selector> [left|right|middle] [--modifiers=<key>[,<key>]]');
+    await onElement(selector, () => state.page.dblclick(selector, { ...options, timeout: 5000 }));
+    out.log(`Double-clicked: ${shown}`);
   },
 
   async hover(args) {
@@ -1287,14 +1537,36 @@ const commands = {
     out.log(`Hovered: ${args.trim()}`);
   },
 
-  async fill(args) {
-    const { selector, value, shown } = selectorAndValue(args, 'fill <selector> <value>', 'fill #name Ada Lovelace');
+  async fill(line) {
+    const { args, submit } = submitFlag(line);
+    const { selector, value, shown } = selectorAndValue(args, 'fill <selector> <value> [--submit]', 'fill #name Ada Lovelace');
     await onElement(selector, () => state.page.fill(selector, value, { timeout: 5000 }));
-    out.log(`Filled: ${shown}`);
+    if (submit) await state.page.press(selector, 'Enter', { timeout: 5000 });
+    out.log(`Filled${submit ? ' and submitted' : ''}: ${shown}`);
   },
 
-  async type(args) {
-    const { selector, value, shown } = selectorAndValue(args, 'type <selector> <text>', 'type #search garden hose');
+  async type(line) {
+    const { args, submit } = submitFlag(line);
+    // One word, or one quoted, is typed into the focused element, as playwright-cli's type does.
+    const sole = splitSelector(args);
+    if (sole && sole.rest === undefined) {
+      // Named, since it may not be the element meant; one that takes no text is refused.
+      const focused = await state.page.evaluate(() => {
+        const el = document.activeElement;
+        if (!el || el === document.body || el === document.documentElement) return null;
+        const editable = el.isContentEditable || el.matches('textarea, input:not([type=checkbox],[type=radio],[type=button],[type=submit],[type=reset],[type=image],[type=file],[type=range],[type=color],[type=hidden])');
+        const id = el.id ? `#${el.id}` : el.name ? `[name=${el.name}]` : el.placeholder ? `[placeholder="${el.placeholder}"]` : '';
+        return { editable, name: `${el.tagName.toLowerCase()}${id}` };
+      });
+      const usage = 'type <selector> <text> types into an element, e.g. type #search garden hose';
+      if (!focused) throw new Error(`Nothing on the page has focus: ${usage}`);
+      if (!focused.editable) throw new Error(`The focused element, ${focused.name}, takes no text: ${usage}`);
+      await state.page.keyboard.type(sole.word);
+      if (submit) await state.page.keyboard.press('Enter');
+      out.log(`Typed into the focused ${focused.name}${submit ? ', and submitted' : ''}`);
+      return;
+    }
+    const { selector, value, shown } = selectorAndValue(args, 'type [<selector>] <text> [--submit]', 'type #search garden hose');
     // Typed after what the field already holds, as someone clicking into it
     // at the end would; focusing it alone leaves the caret at the start.
     await onElement(selector, () => state.page.locator(selector).first().evaluate(el => {
@@ -1310,18 +1582,19 @@ const commands = {
       }
     }, null, { timeout: 5000 }));
     await state.page.keyboard.type(value);
-    out.log(`Typed into: ${shown}`);
+    if (submit) await state.page.keyboard.press('Enter');
+    out.log(`Typed into${submit ? ' and submitted' : ''}: ${shown}`);
   },
 
   async press(args) {
     const parsed = splitSelector(args);
     if (!parsed) throw new Error('Usage: press <key> | press <selector> <key>, e.g. press Enter or press #name Enter');
     if (parsed.rest === undefined) {
-      await state.page.keyboard.press(parsed.word);
-      out.log(`Pressed: ${parsed.word}`);
+      await state.page.keyboard.press(keyName(parsed.word));
+      out.log(`Pressed: ${keyName(parsed.word)}`);
       return;
     }
-    const key = unquote(parsed.rest);
+    const key = keyName(unquote(parsed.rest));
     await onElement(parsed.selector, () => state.page.press(parsed.selector, key, { timeout: 5000 }));
     out.log(`Pressed ${key} on ${parsed.word}`);
   },
@@ -1349,7 +1622,12 @@ const commands = {
   // container, where the paths mean nothing.
   async upload(args) {
     const parsed = splitSelector(args);
-    if (!parsed || parsed.rest === undefined) throw new Error('Usage: upload <selector> <file>..., e.g. upload "input[type=file]" photo.png; quote a path with spaces');
+    // playwright-cli's upload <file> answers a file picker a click opened. Here
+    // the input is named instead: catching pickers would catch the person's too.
+    const usage = 'Usage: upload <selector> <file>..., naming the file input (or the button that opens it) first, e.g. upload e12 ./doc.pdf; quote a path with spaces';
+    if (!parsed || parsed.rest === undefined) throw new Error(usage);
+    // A path, not a selector; // starts an XPath.
+    if (/^(?:\.{1,2}\/|\/(?!\/)|~)/.test(parsed.word) || (!REF.test(parsed.word) && fs.statSync(path.resolve(parsed.word), { throwIfNoEntry: false })?.isFile())) throw new Error(`${parsed.word} is a file, not the input: ${usage.slice(7)}`);
     const files = [...parsed.rest.matchAll(/"((?:[^"\\]|\\.)*)"|'([^']*)'|(\S+)/g)].map(m => path.resolve(m[1] !== undefined ? m[1].replace(/\\(.)/g, '$1') : m[2] ?? m[3]));
     const payloads = files.map(file => {
       let buffer;
@@ -1459,14 +1737,21 @@ const commands = {
   },
 
   async screenshot(args) {
-    const usage = 'Usage: screenshot [--full] [--delay|-d <seconds>] [name]\nNames may contain letters, digits, underscores, and hyphens.';
-    const tokens = (args || '').trim().split(/\s+/).filter(Boolean);
+    const usage = 'Usage: screenshot [<ref>] [--full] [--delay|-d <seconds>] [name | --filename=<file>]\nNames may contain letters, digits, underscores, and hyphens.';
+    // The file first: a path may be quoted, with spaces in it.
+    let file = null;
+    const rest = (args || '').replace(/(?:^|\s)--filename(?:=|\s+)("(?:[^"\\]|\\.)*"|'[^']*'|\S+)/, (_, value) => { file = unquote(value); return ' '; });
+    const tokens = rest.trim().split(/\s+/).filter(Boolean);
     let full = false;
     let delay = 0;
+    let ref = null;
     const names = [];
     for (let i = 0; i < tokens.length; i++) {
       const token = tokens[i];
-      if (token === '--full') { full = true; continue; }
+      // --full-page and --filename are playwright-cli's.
+      if (token === '--full' || token === '--full-page') { full = true; continue; }
+      if (token === '--filename' || token.startsWith('--filename=')) throw new Error(usage);
+      if (!ref && !names.length && REF.test(token)) { ref = token; continue; }
       if (token === '--delay' || token === '-d') {
         const value = tokens[++i];
         // Capped low on purpose: a timed shot is human-in-the-loop, and a typo
@@ -1477,7 +1762,7 @@ const commands = {
       }
       names.push(token);
     }
-    if (names.length > 1 || (names[0] && !/^[a-zA-Z0-9_-]+$/.test(names[0]))) throw new Error(usage);
+    if (names.length > 1 || (names[0] && !/^[a-zA-Z0-9_-]+$/.test(names[0])) || (file && names.length) || (ref && full)) throw new Error(usage);
     const name = names[0] || null;
     // Counted down out loud so a watcher can time a hover or menu state, and so
     // the wait is distinguishable from a hung command in a tmux capture.
@@ -1486,13 +1771,23 @@ const commands = {
       await state.page.waitForTimeout(1000);
     }
     // Named after the countdown so a default filename timestamps the capture.
-    const filepath = nextScreenshotPath(name);
+    // A file given is relative to the REPL's folder; pw-repl send makes it the sender's.
+    const filepath = file ? path.resolve(file) : nextScreenshotPath(name);
+    const type = /\.jpe?g$/i.test(filepath) ? 'jpeg' : 'png';
+    // Checked before the tab is brought to the front, which can move someone's view.
+    if (fs.existsSync(filepath)) throw new Error(`Screenshot already exists: ${filepath}`);
+    if (!fs.existsSync(path.dirname(filepath))) throw new Error(`No folder ${path.dirname(filepath)} to save ${path.basename(filepath)} in`);
     // Chrome does not draw a tab that is not in front, and tabs open in the
     // background, so the tab is brought to the front for the shot.
     await state.page.bringToFront();
     let image;
     try {
-      image = await state.page.screenshot({ fullPage: full });
+      if (ref) {
+        const selector = toSelector(ref);
+        image = await onElement(selector, () => state.page.locator(selector).screenshot({ type, timeout: 5000 }));
+      } else {
+        image = await state.page.screenshot({ fullPage: full, type });
+      }
     } finally {
       // Playwright's screenshot resets the screen size and pixel ratio it
       // finds; an emulated phone's are set again.
@@ -1517,9 +1812,11 @@ const commands = {
     const full = /^--full(?:\s|$)/.test(rest);
     if (full) rest = rest.slice(6).trim();
     let needle = null;
-    if (/^--grep(?:\s|$)/.test(rest)) {
-      needle = rest.slice(6).trim().replace(/^(["'])(.*)\1$/, '$2').replace(/\\"/g, '"');
-      if (!needle) throw new Error('Usage: snapshot [--full] --grep <text>');
+    const grep = /^--(grep|regex)(?:\s|$)/.exec(rest);
+    if (grep) {
+      needle = rest.slice(grep[0].length).trim().replace(/^(["'])(.*)\1$/, '$2').replace(/\\"/g, '"');
+      if (!needle) throw new Error(`Usage: snapshot [--full] --${grep[1]} <${grep[1] === 'grep' ? 'text' : 'pattern'}>`);
+      if (grep[1] === 'regex') needle = regexOf(needle);
       rest = '';
     }
     // Playwright's labels are e5, or frame-prefixed like f1e5 in newer versions.
@@ -1566,6 +1863,8 @@ const commands = {
     if (value === 'off') {
       await setEmulation(state.page, { ...current, [key]: undefined });
       out.log(`Stopped emulating ${key === 'scheme' ? 'the color scheme' : what} in the selected tab`);
+      // As when turned on: the page keeps what it read at load until it loads again.
+      if ((what === 'mobile' || what === 'locale') && state.page.url() !== 'about:blank') out.log('The page sees its own user agent, touch and languages again from its next load: reload to see all of it.');
       return;
     }
     let next;
@@ -1586,8 +1885,8 @@ const commands = {
     await setEmulation(state.page, { ...current, [key]: next });
     const shown = what === 'mobile' ? `mobile (${deviceText(next)})` : what === 'dark' || what === 'light' ? `${what} mode` : `${what} ${next}`;
     out.log(`Emulating ${shown} in the selected tab`);
-    // The page reads these when it loads; the rest applies at once.
-    if (what === 'mobile' || what === 'locale') out.log('The page sees its user agent, touch and languages from its next load: reload to see all of it.');
+    // The page reads these when it loads; the rest applies at once. A blank tab has nothing to reload.
+    if ((what === 'mobile' || what === 'locale') && state.page.url() !== 'about:blank') out.log('The page sees its user agent, touch and languages from its next load: reload to see all of it.');
   },
 
   async wait(args) {
@@ -1619,8 +1918,8 @@ const commands = {
     }
     const selector = toSelector(unquote(tokens.join(' ')));
     if (gone) return waitGone(state.page.locator(selector), tokens.join(' '), timeout);
-    await state.page.waitForSelector(selector, { state: 'attached', timeout }).catch(plainly(`No element matches ${tokens.join(' ')} within ${seconds}s`));
-    out.log(`Found: ${tokens.join(' ')}`);
+    await state.page.waitForSelector(selector, { state: 'visible', timeout }).catch(plainly(`No visible element matches ${tokens.join(' ')} within ${seconds}s`));
+    out.log(`Visible: ${tokens.join(' ')}`);
   },
 
   async sleep(args) {
@@ -1661,12 +1960,15 @@ const commands = {
   async route(args) {
     const trimmed = (args || '').trim();
     if (!trimmed) return listRoutes();
+    // A glob may be quoted, as it is in a shell.
     const off = /^off(?:\s+(\S+))?$/.exec(trimmed);
-    if (off) return removeRoutes(off[1]);
-    const usage = 'Usage: route <url-glob> <status> <json-body> | route <url-glob> patch <json> | route <url-glob> delay <seconds> | route <url-glob> abort | route off <url-glob>|--all';
-    const match = /^(\S+)\s+(\S+)(?:\s+([\s\S]+))?$/.exec(trimmed);
+    if (off) return removeRoutes(off[1] && unquote(off[1]));
+    const usage = 'Usage: route <url-glob> <status> [json-body] | route <url-glob> patch <json> | route <url-glob> delay <seconds> | route <url-glob> abort | route off <url-glob>|--all';
+    const parsed = splitSelector(trimmed);
+    const match = /^(\S+)(?:\s+([\s\S]+))?$/.exec(parsed?.rest || '');
     if (!match) throw new Error(usage);
-    const [, glob, how, rest] = match;
+    const glob = parsed.word;
+    const [, how, rest] = match;
     const route = routeKind(how, rest, usage);
     const routes = routesFor(state.page);
     const previous = routes.get(glob);
@@ -1683,21 +1985,29 @@ const commands = {
       }
     };
     await state.page.route(glob, handler);
-    routes.set(glob, { text: route.text, handler });
+    routes.set(glob, { text: route.text, handler, owner: state.client });
     out.log(`${previous ? 'Replaced' : 'Routed'}: ${glob} -> ${route.text}`);
   },
 
   async requests(args) {
-    const tokens = (args || '').trim().split(/\s+/).filter(Boolean);
+    // --regex <pattern> takes the rest of the line.
+    let regex = null;
+    const text = (args || '').replace(/(?:^|\s)--regex(?:\s+([\s\S]*))?$/, (_, pattern) => {
+      if (!pattern?.trim()) throw new Error('Usage: requests [--all] [n] --regex <pattern>');
+      regex = regexOf(patternText(pattern.trim()));
+      return '';
+    });
+    const tokens = text.trim().split(/\s+/).filter(Boolean);
     const everything = tokens.includes('--all');
     if (everything) tokens.splice(tokens.indexOf('--all'), 1);
     let count = RECENT_DEFAULT;
     if (tokens.length && /^\d+$/.test(tokens[0])) count = Number(tokens.shift());
-    if (count < 1 || count > RECENT_MAX || tokens.length > 1) throw new Error(`Usage: requests [--all] [n] [url-filter] (n from 1 to ${RECENT_MAX})`);
-    const filter = tokens[0];
+    if (count < 1 || count > RECENT_MAX || tokens.length > (regex ? 0 : 1)) throw new Error(`Usage: requests [--all] [n] [url-filter | --regex <pattern>] (n from 1 to ${RECENT_MAX})`);
+    const filter = regex ? String(regex) : tokens[0];
+    const wanted = regex ? url => regex.test(url) : url => !filter || url.includes(filter);
     const log = recentLogs.get(state.page) || [];
     const shown = everything ? log : log.filter(e => !RECENT_HIDDEN_TYPES.has(e.type) && !e.url.startsWith('chrome-extension://'));
-    const matches = shown.filter(e => !filter || e.url.includes(filter)).slice(-count);
+    const matches = shown.filter(e => wanted(e.url)).slice(-count);
     if (!matches.length) { out.log(filter ? `No requests matching ${filter}` : 'No requests on the selected tab'); return; }
     for (const e of matches) {
       const ms = e.ms === null ? '-' : `${e.ms}ms`;
@@ -1712,29 +2022,34 @@ const commands = {
   },
 
   async body(args, all) {
-    const match = /^#?(\d+)$/.exec((args || '').trim());
-    if (!match) throw new Error('Usage: body <#> (the number from requests)');
-    const id = Number(match[1]);
-    const entry = (recentLogs.get(state.page) || []).find(e => e.id === id);
-    if (!entry) throw new Error(`No request #${id} on the selected tab; requests lists them`);
+    const arg = (args || '').trim();
+    if (!arg) throw new Error('Usage: body <#> | body <url-part> (the number from requests, or the latest request whose URL contains url-part)');
+    const log = recentLogs.get(state.page) || [];
+    const match = /^#?(\d+)$/.exec(arg);
+    // The latest that has finished: one still pending has no body yet.
+    const entry = match ? log.find(e => e.id === Number(match[1])) : log.filter(e => e.url.includes(arg) && e.status !== 'pending').pop();
+    if (!entry) throw new Error(match ? `No request #${match[1]} on the selected tab; requests lists them` : `No finished request on the selected tab has a URL containing ${arg}`);
+    const id = entry.id;
     // A fake is marked answered before the browser hands over its response.
     for (let waited = 0; !entry.response && /(?:faked|patched)$/.test(entry.status) && waited < 2000; waited += 50) {
       await new Promise(resolve => setTimeout(resolve, 50));
     }
     if (!entry.response) throw new Error(`#${id} has no response${entry.status === 'pending' ? ' yet' : ` (${entry.status})`}`);
-    // Not withTimeout: its "timed out" error would disconnect the REPL, and
-    // reading a body cannot have changed anything.
-    let timer;
-    const late = new Promise((_, reject) => { timer = setTimeout(() => reject(new Error(`did not arrive within ${BODY_TIMEOUT / 1000}s`)), BODY_TIMEOUT); });
-    let buffer;
-    try { buffer = await Promise.race([entry.response.body(), late]); }
-    // Playwright's reason ends in advice for its own API ("Read response.body() before..."), so only its first line is kept.
-    catch (error) { throw new Error(`The body of #${id} is not available: ${String(error.message).split('\n')[0]} (the browser drops bodies, e.g. after the tab navigates)`); }
-    finally { clearTimeout(timer); }
+    let buffer = entry.kept;
+    if (!buffer) {
+      // Not withTimeout: its "timed out" error would disconnect the REPL, and
+      // reading a body cannot have changed anything.
+      let timer;
+      const late = new Promise((_, reject) => { timer = setTimeout(() => reject(new Error(`did not arrive within ${BODY_TIMEOUT / 1000}s`)), BODY_TIMEOUT); });
+      try { buffer = await Promise.race([entry.response.body(), late]); }
+      // Playwright's reason ends in advice for its own API ("Read response.body() before..."), so only its first line is kept.
+      catch (error) { throw new Error(`The body of #${id} is not available: ${String(error.message).split('\n')[0]} (the browser drops bodies, e.g. after the tab navigates; a watched tab keeps them as they arrive)`); }
+      finally { clearTimeout(timer); }
+    }
     const type = entry.response.headers()['content-type'] || '';
     out.log(`#${id} ${entry.method} ${entry.status} ${entry.url} (${type || 'no content type'}, ${buffer.length} bytes)`);
     if (!buffer.length) return;
-    if (!/json|^text\/|javascript|xml|html|x-www-form-urlencoded/.test(type)) { out.log('[binary body not shown]'); return; }
+    if (!TEXT_BODY.test(type)) { out.log('[binary body not shown]'); return; }
     let text = buffer.toString('utf8');
     if (/json/.test(type)) { try { text = JSON.stringify(JSON.parse(text), null, 2); } catch {} }
     printOutput(text, all);
@@ -1744,28 +2059,53 @@ const commands = {
     const tokens = (args || '').trim().split(/\s+/).filter(Boolean);
     let count = RECENT_DEFAULT;
     if (tokens.length && /^\d+$/.test(tokens[0])) count = Number(tokens.shift());
-    if (count < 1 || count > RECENT_MAX || tokens.length > 1) throw new Error(`Usage: console [n] [filter] (n from 1 to ${RECENT_MAX})`);
+    if (count < 1 || count > RECENT_MAX || tokens.length > 1) throw new Error(`Usage: console [n] [level | filter] (n from 1 to ${RECENT_MAX})`);
     const filter = tokens[0];
-    const matches = (consoleLogs.get(state.page) || [])
-      .filter(e => !filter || e.type.includes(filter) || e.text.includes(filter))
-      .slice(-count);
+    const level = CONSOLE_LEVELS.indexOf(filter);
+    const shown = level === -1
+      ? e => !filter || e.type.includes(filter) || e.text.includes(filter)
+      : e => CONSOLE_LEVELS.indexOf(consoleLevel(e.type)) <= level;
+    const logs = consoleLogs.get(state.page) || [];
+    const matches = logs.filter(e => e.type !== 'load' && shown(e)).slice(-count);
     if (!matches.length) { out.log(filter ? `No console messages matching ${filter}` : 'No console messages on the selected tab'); return; }
-    printOutput(matches.map(e => `${clock(e.t)} [${e.type}] ${e.text}`).join('\n'), all);
+    // Where the page loaded again, so a message from an earlier load does not read as the current one's.
+    // From the load the first message shown came from, if it is still kept.
+    let first = logs.indexOf(matches[0]);
+    while (first > 0 && logs[first].type !== 'load') first -= 1;
+    const lines = logs.filter((e, i) => i >= first && (e.type === 'load' || matches.includes(e)));
+    printOutput(lines.map(e => (e.type === 'load' ? `${clock(e.t)} --- the page loaded ${e.text}` : `${clock(e.t)} [${e.type}] ${e.text}`)).join('\n'), all);
   },
 
   async watch(args, all) {
     const arg = (args || '').trim();
     const watch = watches.get(state.page);
     const [sub, ...flags] = arg.split(/\s+/);
+    const next = flags.indexOf('--next-tab');
+    if (sub === 'on' && next !== -1) {
+      const part = flags[next + 1] && !flags[next + 1].startsWith('--') ? flags[next + 1] : null;
+      const rest = flags.filter((f, i) => i !== next && !(part && i === next + 1));
+      if (!rest.every(f => f === '--changes' || f === '--live')) throw new Error('Usage: watch on [--changes] [--live] --next-tab [url-part]');
+      nextTab = { part, changes: rest.includes('--changes'), live: rest.includes('--live'), client: state.client };
+      out.log(`${waitingText()}: it is watched from its first page, and selected. watch off stops waiting.`);
+      return;
+    }
+    if (sub !== 'on' && arg !== 'off' && waitingForMe() && (!state.page || state.page.isClosed())) {
+      out.log(`${waitingText()} (watch on --next-tab); it is selected once it opens, and watch then shows its steps.`);
+      return;
+    }
     if (sub === 'on' && flags.every(f => f === '--changes' || f === '--live')) {
+      if (!state.page || state.page.isClosed()) throw new Error('No tab is selected; select one with tab <index|url-part>, or open one with tab new');
       const changes = flags.includes('--changes');
       const live = flags.includes('--live');
       await startWatching(state.page, changes, live);
+      watches.get(state.page).owner = state.client;
       out.log(`Watching the selected tab: clicks, typing, form changes, submits and navigations${changes ? ', and what each changed on screen' : ''} (typed values are not recorded)`);
       out.log(live ? 'Each step prints here once it settles; watch shows them again.' : 'watch shows what it has recorded; watch on --live also prints each step here as it happens.');
       return;
     }
     if (arg === 'off') {
+      if (nextTab) { nextTab = null; out.log('Stopped waiting to watch a new tab'); }
+      if (!state.page || state.page.isClosed()) return;
       if (!watch?.on) { out.log('Not watching the selected tab.'); return; }
       stopWatching(state.page, watch);
       const steps = watch.events.length;
@@ -1810,7 +2150,45 @@ const commands = {
 
   async eval(args, all) {
     if (!args) throw new Error('Usage: eval <js-expression>');
-    printOutput(await withTimeout(state.page.evaluate(args), 'Page evaluation', COMMAND_TIMEOUT), all);
+    // eval <function> <ref> calls the function with that element, as playwright-cli's eval does.
+    const onRef = /^([\s\S]+?)\s+((?:f\d+)?e\d+)$/.exec(args.trim());
+    if (onRef && isFunctionText(unquote(onRef[1]))) {
+      const selector = toSelector(onRef[2]);
+      const el = await onElement(selector, () => state.page.locator(selector).first().elementHandle({ timeout: 5000 }));
+      try {
+        // Made from its text by the debugger, as eval is, so a page's CSP cannot
+        // refuse it, and in the element's own frame, which may be an iframe.
+        const fn = await withTimeout((await el.ownerFrame()).evaluateHandle(unquote(onRef[1])), 'Page evaluation', COMMAND_TIMEOUT);
+        try {
+          printOutput(await el.evaluate((e, f) => f(e), fn), all);
+        } finally {
+          await fn.dispose().catch(() => {});
+        }
+      } finally {
+        await el.dispose().catch(() => {});
+      }
+      return;
+    }
+    // A function, as playwright-cli's eval takes, is called rather than returned.
+    // Only a single expression can be one; statements are evaluated as they are.
+    // await at the top level: one expression is run as an async function; statements as DevTools'
+    // console runs them (replMode), which gives back the last one's value.
+    const compiles = (Kind, body) => { try { new Kind(body); return true; } catch { return false; } };
+    const AsyncFunction = (async () => {}).constructor;
+    const awaits = /\bawait\b/.test(args) && !compiles(Function, `return (${args}\n);`);
+    const single = compiles(awaits ? AsyncFunction : Function, `return (${args}\n);`);
+    const call = `const value = (${args}\n); return typeof value === 'function' ? value() : value;`;
+    if (awaits && !single && compiles(AsyncFunction, args)) {
+      const session = await keptSession(state.page);
+      const { result, exceptionDetails } = await withTimeout(session.send('Runtime.evaluate', { expression: args, replMode: true, awaitPromise: true, returnByValue: true }), 'Page evaluation', COMMAND_TIMEOUT);
+      if (exceptionDetails) throw new Error(exceptionDetails.exception?.description || exceptionDetails.text);
+      printOutput(result.value !== undefined ? result.value : result.description ?? 'undefined', all);
+      return;
+    }
+    const expression = single ? `(${awaits ? 'async ' : ''}() => { ${call} })()` : args;
+    const value = await withTimeout(state.page.evaluate(expression), 'Page evaluation', COMMAND_TIMEOUT);
+    // An empty string is shown as one, not as no output at all.
+    printOutput(value === '' ? '""' : value, all);
   },
 
   async cdp(args, all) {
@@ -1871,14 +2249,14 @@ const commands = {
   async modes(args) {
     const arg = (args || '').trim();
     if (!arg) return listModes();
-    if (arg !== 'off') throw new Error('Usage: modes [off]');
-    await allModesOff();
+    if (arg !== 'off' && arg !== 'off --mine') throw new Error('Usage: modes [off [--mine]]');
+    await allModesOff(arg === 'off --mine');
   },
 
   async help(args) {
     const topic = (args || '').trim();
     const text = HELP.render(topic);
-    if (text === null) throw new Error(`No help for ${topic}. Topics: ${Object.keys(HELP.TOPICS).join(', ')}`);
+    if (text === null) throw new Error(HELP.notFound(topic));
     out.log(text);
   },
 
@@ -1888,6 +2266,38 @@ const commands = {
   }
 };
 
+// Run for playwright-cli's names (lib/cli-names.js) where no command here does the same.
+const cliCommands = {
+  // By index only: tab <number> falls back to a tab whose URL contains the number.
+  // The index is into the sender's last listing, so a tab someone opened or
+  // closed since cannot shift it onto another tab; with none yet, the tabs now.
+  async 'tab-select'(args) {
+    const all = state.browser.contexts().flatMap(c => c.pages());
+    if (!/^\d+$/.test(args)) throw new Error('Usage: tab-select <index>, as tab-list lists the tabs');
+    if (!state.tabListing.length) {
+      if (!all[Number(args)]) throw new Error(`No tab [${args}]; there ${all.length === 1 ? 'is 1' : `are ${all.length}`}, and tab-list lists them`);
+      state.tabListing = all.slice();
+    }
+    const target = state.tabListing[Number(args)];
+    if (!target) throw new Error(`No tab [${args}] in your last listing; tab-list lists them again`);
+    if (target.isClosed() || !all.includes(target)) throw new Error(`The tab at [${args}] in your last listing has closed; tab-list lists them again`);
+    return commands.tab(args);
+  },
+
+  // playwright-cli's close ends its own session. The browser here is shared, so
+  // it ends the sender's part in it: its modes are turned off, and every tab,
+  // even one it opened, is left open for someone who may be using it.
+  async close(args) {
+    if (args) throw new Error('Usage: close');
+    if (!state.client) {
+      throw new Error('close turns off the modes you turned on, which needs a client name: pw-repl send -c <name> close. Without one, they cannot be told from the prompt\'s; modes lists what is on.');
+    }
+    await allModesOff(true);
+    const own = state.browser.contexts().flatMap(c => c.pages()).filter(p => tabOwners.get(p) === state.client);
+    if (own.length) out.log(`Tabs you opened are still open: ${own.map(p => p.url()).join(', ')}; tab close <url-part> closes one, or select it and tab close.`);
+  },
+};
+
 onShutdown(discardCapture);
 onShutdown(resetEmulations);
 
@@ -1895,6 +2305,13 @@ onShutdown(resetEmulations);
 function watchPage(p) {
   ensureDialogHandler(p);
   ensureRecentLog(p);
+  if (nextTab && !opening) watchNewTab(p);
+}
+
+// watch on --next-tab waits for a tab, and watch off stops waiting, with none selected;
+// watch says it is still waiting.
+function needsTab(cmd, args) {
+  return !(cmd === 'watch' && (/(?:^|\s)--next-tab(?:\s|$)/.test(args) || /^\s*off\s*$/.test(args) || waitingForMe()));
 }
 
 // Tab completion for the prompt: command names first, then the fixed words
@@ -1921,11 +2338,11 @@ function complete(line) {
     if (command === 'capture') return match(['on', 'off']);
     if (command === 'route') return match(['off']);
   }
-  if (words.length >= 3 && command === 'watch' && words[1] === 'on') return match(['--changes', '--live'].filter(f => !words.slice(2, -1).includes(f)));
+  if (words.length >= 3 && command === 'watch' && words[1] === 'on') return match(['--changes', '--live', '--next-tab'].filter(f => !words.slice(2, -1).includes(f)));
   if (words.length === 3 && command === 'capture' && words[1] === 'on') return match(['requests', 'console']);
   if (words.length === 3 && command === 'emulate' && EMULATE_KINDS.includes(words[1])) return match(['off']);
   if (words.length === 3 && command === 'route' && words[1] === 'off') return match(['--all', ...(state.page ? routesFor(state.page).keys() : [])]);
   return [[], current];
 }
 
-module.exports = { commands, dialogCommand, listTabs, openTab, activeModes, watchPage, complete, compactSnapshot, grepSnapshot, summarizeChanges, scrubEditable, clock };
+module.exports = { commands, cliCommands, needsTab, dialogCommand, listTabs, openTab, activeModes, watchPage, complete, compactSnapshot, grepSnapshot, summarizeChanges, scrubEditable, clock };