acrylblends 1.0.10 → 1.2.0

package/lib/door/page.js

@@ -84,7 +84,7 @@ var PageChannel = class {
 	}
 	connect() {
 		if (this.disposed || this.source !== void 0) return;
-		const query = `window=${encodeURIComponent(this.options.windowId)}&focused=${this.options.focused() ? "1" : "0"}${this.options.shellWindow === void 0 ? "" : `&shell=${String(this.options.shellWindow)}`}`;
+		const query = `window=${encodeURIComponent(this.options.windowId)}&focused=${this.options.focused() ? "1" : "0"}${this.options.shellWindow === void 0 ? "" : `&shell=${String(this.options.shellWindow)}`}${this.options.tab === void 0 ? "" : `&tab=${encodeURIComponent(this.options.tab)}`}`;
 		const viaSocket = this.socketAllowed;
 		this.socketReady = false;
 		const source = viaSocket ? (this.options.createSocket ?? ((url) => socketSource(new WebSocket(url))))(`${socketBase(this.options.base)}/channel/ws?${query}`) : (this.options.createSource ?? ((url) => new EventSource(url)))(`${this.options.base}/channel?${query}`);
@@ -99,6 +99,10 @@ var PageChannel = class {
 			heard();
 		});
 		source.addEventListener("ping", heard);
+		source.addEventListener("run", (event) => {
+			heard();
+			this.options.onRun?.(event.data === "1");
+		});
 		source.addEventListener("call", (event) => {
 			heard();
 			if (typeof event.data === "string") this.answer(event.data);
@@ -170,6 +174,7 @@ var PageChannel = class {
 		if (source !== void 0) {
 			source.onerror = null;
 			source.close();
+			this.options.onRun?.(false);
 		}
 	}
 	answer(text) {
@@ -492,6 +497,15 @@ function valueOf(el, role) {
 	else if (el.hasAttribute("contenteditable")) value = el.textContent ?? void 0;
 	return value === void 0 || value === "" ? void 0 : clip(value, 100);
 }
+/** Choices of a select listed at most; a longer list ends with how many more there are. */
+const MAX_OPTIONS = 20;
+/** The choices of a native select (what `act select` takes), or undefined when it is not one or is sensitive. */
+function optionsOf(el) {
+	if (!(el instanceof HTMLSelectElement) || isSensitive(el)) return void 0;
+	const labels = [...el.options].filter((option) => !option.hidden).map((option) => clip((option.textContent ?? "").trim(), 60)).filter((label) => label !== "");
+	if (labels.length <= MAX_OPTIONS) return labels;
+	return [...labels.slice(0, MAX_OPTIONS), `(${String(labels.length - MAX_OPTIONS)} more)`];
+}
 /** Heading level, when the element is a heading. */
 function levelOf(el) {
 	const explicit = Number(el.getAttribute("aria-level"));
@@ -578,7 +592,7 @@ var SnapshotBuilder = class {
 		const root = this.root();
 		const view = root.ownerDocument.defaultView;
 		let offset = options.cursor ?? 0;
-		if (options.cursor === void 0) {
+		if (offset === 0) {
 			this.refs.begin();
 			const all = collect(root);
 			this.candidates = [...all.filter((c) => inViewport(c.element, view)), ...all.filter((c) => !inViewport(c.element, view))];
@@ -590,6 +604,7 @@ var SnapshotBuilder = class {
 			if (isProtected(candidate.element)) states.push("protected");
 			const value = valueOf(candidate.element, candidate.role);
 			const level = candidate.role === "heading" ? levelOf(candidate.element) : void 0;
+			const options = optionsOf(candidate.element);
 			return {
 				ref: this.refs.issue(candidate.element, candidate.role, candidate.name),
 				role: candidate.role,
@@ -597,7 +612,8 @@ var SnapshotBuilder = class {
 				depth: candidate.depth,
 				states,
 				...value === void 0 ? {} : { value },
-				...level === void 0 ? {} : { level }
+				...level === void 0 ? {} : { level },
+				...options === void 0 ? {} : { options }
 			};
 		});
 		const end = offset + page.length;
@@ -640,6 +656,7 @@ function prepare(env, ref) {
 	if (isProtected(element)) throw new UiControlError("protected", `"${resolved.name}" belongs to approval, permissions or Agent Control itself; only the user operates it`);
 	if (effectivelyHidden(element)) throw new UiControlError("not-actionable", `"${resolved.name}" is not visible`);
 	if (element.disabled === true || element.getAttribute("aria-disabled") === "true") throw new UiControlError("not-actionable", `"${resolved.name}" is disabled`);
+	env.touched?.(element);
 	return resolved;
 }
 function mouse(element, type) {
@@ -781,6 +798,7 @@ function scroll(env, request) {
 	const dy = request.direction === "up" ? -amount : request.direction === "down" ? amount : 0;
 	if (request.ref !== void 0) {
 		const { element, role, name } = env.refs.resolve(request.ref);
+		env.touched?.(element);
 		element.scrollBy?.({
 			left: dx,
 			top: dy
@@ -909,6 +927,8 @@ var RefTable = class {
 /** After the user touches the page, agent actions wait this long, so the user always wins. */
 const YIELD_MS = 400;
 const MAX_YIELD_MS = 2e3;
+/** How long after an act a navigation it started is still noticed (a link's navigation starts a task or two after the click). */
+const LEAVE_WATCH_MS = 50;
 function realSleep(ms, signal) {
 	return new Promise((resolve, reject) => {
 		if (signal.aborted) {
@@ -938,9 +958,11 @@ var UiDriver = class {
 	doing = "";
 	current = {
 		busy: false,
+		running: false,
 		doing: "",
 		killed: false
 	};
+	runningFlag = false;
 	options;
 	constructor(options) {
 		this.options = options;
@@ -948,7 +970,8 @@ var UiDriver = class {
 		this.env = {
 			refs: this.refs,
 			document: options.document,
-			sleep: options.sleep ?? realSleep
+			sleep: options.sleep ?? realSleep,
+			...options.touched === void 0 ? {} : { touched: options.touched }
 		};
 	}
 	/** The current activity; the same object until something changes, as a store snapshot must be. */
@@ -969,6 +992,16 @@ var UiDriver = class {
 		this.snapshots.clear();
 		this.emit();
 	}
+	/**
+	* A run asked for from this page's panel starts (`true`) or ends (`false`). The indicator stays up for the whole run, not only while a call is in flight. A new run is a new
+	* question from the person, so it also allows the agent to drive again after an earlier Stop.
+	*/
+	setRunning(running) {
+		if (running === this.runningFlag) return;
+		this.runningFlag = running;
+		if (running) this.killedFlag = false;
+		this.emit();
+	}
 	/** The user allowed the agent to drive again. */
 	resume() {
 		this.killedFlag = false;
@@ -1017,10 +1050,10 @@ var UiDriver = class {
 				...request.cursor === void 0 ? {} : { cursor: request.cursor },
 				...request.maxNodes === void 0 ? {} : { maxNodes: request.maxNodes }
 			});
-			case "click": return click(this.env, request);
-			case "type": return typeText(this.env, request);
+			case "click": return await this.watchLeaving(() => click(this.env, request), signal);
+			case "type": return await this.watchLeaving(() => typeText(this.env, request), signal);
 			case "select": return selectOption(this.env, request);
-			case "press": return pressKey(this.env, request);
+			case "press": return await this.watchLeaving(() => pressKey(this.env, request), signal);
 			case "scroll": return scroll(this.env, request);
 			case "wait": return wait(this.env, request, signal);
 			case "reload": return this.leave({ reload: true }, "reloading");
@@ -1028,6 +1061,29 @@ var UiDriver = class {
 		}
 	}
 	/**
+	* Run an act that may start a navigation (a click on a link, Enter in a form) and say so: the browser asks `beforeunload` when a navigation starts, during the act or a
+	* moment after it. The answer is sent before the page goes; the Host then waits for the next page instead of reading this one again.
+	*/
+	async watchLeaving(act, signal) {
+		const view = this.options.document().defaultView;
+		let leaving = false;
+		const onLeave = () => {
+			leaving = true;
+		};
+		view?.addEventListener("beforeunload", onLeave);
+		try {
+			const result = act();
+			if (!leaving) await this.env.sleep(LEAVE_WATCH_MS, signal);
+			return leaving ? {
+				...result,
+				leaving: true,
+				detail: `${result.detail === void 0 ? "" : `${result.detail}; `}the page is going to another address`
+			} : result;
+		} finally {
+			view?.removeEventListener("beforeunload", onLeave);
+		}
+	}
+	/**
 	* The page is about to be replaced, so the answer is given first and the move happens a moment later (the answer is a POST that the page's own unload would cut off).
 	* The Host does not wait for this answer to be the last word: it waits for the page to come back.
 	*/
@@ -1058,10 +1114,11 @@ var UiDriver = class {
 	emit() {
 		const next = {
 			busy: this.busyCount > 0,
+			running: this.runningFlag,
 			doing: this.doing,
 			killed: this.killedFlag
 		};
-		if (next.busy === this.current.busy && next.doing === this.current.doing && next.killed === this.current.killed) return;
+		if (next.busy === this.current.busy && next.running === this.current.running && next.doing === this.current.doing && next.killed === this.current.killed) return;
 		this.current = next;
 		const activity = next;
 		for (const listener of [...this.listeners]) listener(activity);
@@ -1111,6 +1168,8 @@ const LABELS = {
 	scroll: "scrolling",
 	wait: "waiting"
 };
+/** Dispatched on the page's window by the Stop button: the agent panel in the same page cancels its run. */
+const STOP_RUN_EVENT = "acryl:stop-run";
 const STYLE_ID = "acryl-door-indicator-style";
 const STYLES = `
 .acrylDoorBar { position: fixed; z-index: 2147483647; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
@@ -1133,12 +1192,16 @@ function mountIndicator(driver, document) {
 	bar.setAttribute("data-acryl-no-agent", "");
 	bar.setAttribute("role", "status");
 	bar.setAttribute("aria-live", "polite");
+	const stopAgent = () => {
+		driver.kill();
+		document.defaultView?.dispatchEvent(new CustomEvent(STOP_RUN_EVENT));
+	};
 	const onKey = (event) => {
-		if (event.key === "Escape" && event.isTrusted && driver.activity.busy) driver.kill();
+		if (event.key === "Escape" && event.isTrusted && (driver.activity.busy || driver.activity.running)) stopAgent();
 	};
 	document.addEventListener("keydown", onKey, true);
 	const render = (activity) => {
-		if (!activity.busy && !activity.killed) {
+		if (!activity.busy && !activity.running && !activity.killed) {
 			bar.remove();
 			return;
 		}
@@ -1158,11 +1221,9 @@ function mountIndicator(driver, document) {
 			const dot = document.createElement("span");
 			dot.className = "acrylDoorDot";
 			dot.setAttribute("aria-hidden", "true");
-			text.textContent = `Agent is driving: ${LABELS[activity.doing] ?? activity.doing}`;
+			text.textContent = `Agent is driving: ${activity.busy ? LABELS[activity.doing] ?? activity.doing : "working on your request"}`;
 			button.textContent = "Stop";
-			button.addEventListener("click", () => {
-				driver.kill();
-			});
+			button.addEventListener("click", stopAgent);
 			bar.replaceChildren(dot, text, button);
 		}
 		if (!bar.isConnected) document.body.append(bar);

package/lib/door/protocol.d.ts

@@ -1,2 +1,2 @@
-import { C as parseUiRequest, S as parseChannelToPage, _ as UiRequest, a as DEFAULT_SNAPSHOT_NODES, b as WINDOW_ID, c as MAX_WAIT_MS, d as UI_OPS, f as UiActionResult, g as UiOp, h as UiNode, i as ChannelToPage, l as MUTATING_OPS, m as UiErrorCode, n as AuditEntry, o as MAX_SNAPSHOT_NODES, p as UiControlError, r as ChannelToHost, s as MAX_TEXT_LENGTH, t as APP_PATH, u as UI_ERROR_CODES, v as UiResult, x as parseChannelToHost, y as UiSnapshot } from "../protocol-a2aqrp2X.js";
+import { C as parseUiRequest, S as parseChannelToPage, _ as UiRequest, a as DEFAULT_SNAPSHOT_NODES, b as WINDOW_ID, c as MAX_WAIT_MS, d as UI_OPS, f as UiActionResult, g as UiOp, h as UiNode, i as ChannelToPage, l as MUTATING_OPS, m as UiErrorCode, n as AuditEntry, o as MAX_SNAPSHOT_NODES, p as UiControlError, r as ChannelToHost, s as MAX_TEXT_LENGTH, t as APP_PATH, u as UI_ERROR_CODES, v as UiResult, x as parseChannelToHost, y as UiSnapshot } from "../protocol-BeIYCgTo.js";
 export { APP_PATH, AuditEntry, ChannelToHost, ChannelToPage, DEFAULT_SNAPSHOT_NODES, MAX_SNAPSHOT_NODES, MAX_TEXT_LENGTH, MAX_WAIT_MS, MUTATING_OPS, UI_ERROR_CODES, UI_OPS, UiActionResult, UiControlError, UiErrorCode, UiNode, UiOp, UiRequest, UiResult, UiSnapshot, WINDOW_ID, parseChannelToHost, parseChannelToPage, parseUiRequest };

package/lib/drivers.d.ts

@@ -26,10 +26,11 @@ type ChatEvent = {
 interface ChatDriver {
   readonly kind: 'chat';
   readonly name: string;
-  /** Runs one message. Aborting `signal` stops the run. */
+  /** Runs one message. Aborting `signal` stops the run. `page` is the door's id of the page whose panel asked, when it sent one: a driver that uses the page drives that one. */
   start(options: {
     message: string;
     signal: AbortSignal;
+    page?: string;
   }): AsyncIterable<ChatEvent>;
 }
 /** A live pseudo-terminal session. */
@@ -45,6 +46,14 @@ interface TerminalSession {
 interface TerminalDriver {
   readonly kind: 'terminal';
   readonly name: string;
+  /**
+   * Where the panel loads the terminal view from: the browser module that draws it, and the URL prefix the view's endpoints live under. The driver
+   * plugin serves both, so the view follows wherever the app is mounted (the root of its own server, or the prefix the ACRYL frame serves it at).
+   */
+  readonly view: {
+    readonly module: string;
+    readonly prefix: string;
+  };
   start(options: {
     cwd: string;
     env: NodeJS.ProcessEnv;

package/lib/{index-DMOtA-NJ.d.ts → index-DGq7H0lb.d.ts}

@@ -88,7 +88,17 @@ declare class Router extends Service {
    * mount's code a request is in. The core's `app.route` runs first so a sub-app's own `onError` still applies to its routes.
    */
   private snapshot;
-  /** Abort `flights`, cut their bodies short and wait for them to settle, at most `disposeGraceMs`. */
+  /**
+   * The router's own disposal: let the flights already in flight finish within `disposeGraceMs` - a save being written when the app stops must not be cut
+   * by the router beneath it - then abort what is left and settle it for a moment, so disposal does not wait a second full grace on code that ignores
+   * its abort signal.
+   */
+  private drain;
+  /** The one draining rule: let `flights` finish inside the grace, then abort and settle what is left. */
+  private drainFlights;
+  /** Resolve true when every flight settled inside `ms`, false at the deadline. */
+  private settledWithin;
+  /** Abort `flights`, cut their bodies short and wait for them to settle, at most `settleMs`. */
   private end;
   /** Turn errors no mounted app handled into responses. One handler per router; the calling plugin owns it. */
   onError(handler: ErrorHandler): () => void;

package/lib/node-server.d.ts

@@ -1,5 +1,5 @@
 import { t as Acryl } from "./app-D8riatvv.js";
-import { a as Owner, c as UpgradeHubOptions, d as upgradeWebSocket, f as WebSocketData, i as testWebSocket, l as UpgradeRouter, m as WebSocketServerLike, n as TestWebSocketOptions, o as UpgradeEmitter, p as WebSocketLike, r as TestWebSocketResult, s as UpgradeHub, t as TestSocket, u as RequestError } from "./test-websocket-DyeS50Tr.js";
+import { a as Owner, c as UpgradeHubOptions, d as upgradeWebSocket, f as WebSocketData, i as testWebSocket, l as UpgradeRouter, m as WebSocketServerLike, n as TestWebSocketOptions, o as UpgradeEmitter, p as WebSocketLike, r as TestWebSocketResult, s as UpgradeHub, t as TestSocket, u as RequestError } from "./test-websocket-GUTAkFQT.js";
 import { n as serveStatic, t as ServeStaticOptions } from "./serve-static-B7sqnftW.js";
 import { t as getConnInfo } from "./conninfo-BCROmdnf.js";
 import { AddressInfo } from "node:net";
@@ -90,6 +90,12 @@ declare const getRequestListener: (fetchCallback: FetchCallback, options?: {
 interface ClientModulesOptions {
   /** The folder of client modules, absolute or relative to the working directory. */
   readonly root: string;
+  /**
+   * The URL prefix the app is mounted at, when the caller knows it. A host can compose app plugins under its own router, and under a
+   * Host whose router is a different copy of this package the request's match result is not visible here, so `basePath(c)` throws; the
+   * explicit prefix is then the only reliable way to know where the mount starts. Omitted, the router's `basePath(c)` is used.
+   */
+  readonly mount?: string | undefined;
   /** The folder {@link buildClientModules} wrote; with `NODE_ENV=production` it is served instead of compiling, which needs no `typescript`. */
   readonly compiled?: string | undefined;
   /** At most this many bytes of compiled modules are kept in memory (least recently served first out); 16 MiB when not given. */

package/lib/node-server.js

@@ -1,5 +1,5 @@
-import { a as serve, i as createAdaptorServer, l as RequestError, n as UpgradeEmitter, o as upgradeWebSocket, r as UpgradeHub, s as getRequestListener, t as testWebSocket } from "./test-websocket-BLeEvybj.js";
+import { a as serve, d as RequestError, i as createAdaptorServer, n as UpgradeEmitter, o as upgradeWebSocket, r as UpgradeHub, s as getRequestListener, t as testWebSocket } from "./test-websocket-CQOSvBth.js";
 import { t as serveStatic } from "./serve-static-C1Nkj_xB.js";
 import { t as getConnInfo } from "./conninfo-CWJwieh4.js";
-import { n as clientModules, t as buildClientModules } from "./client-modules-drj4mjhj.js";
+import { n as clientModules, t as buildClientModules } from "./client-modules-Bkdr83jO.js";
 export { RequestError, UpgradeEmitter, UpgradeHub, buildClientModules, clientModules, createAdaptorServer, getConnInfo, getRequestListener, serve, serveStatic, testWebSocket, upgradeWebSocket };

package/lib/{protocol-a2aqrp2X.d.ts → protocol-BeIYCgTo.d.ts}

@@ -36,6 +36,8 @@ interface UiNode {
   readonly value?: string;
   /** Heading level, when it is a heading. */
   readonly level?: number;
+  /** The choices of a select, as `act select` takes them, when it is not sensitive. */
+  readonly options?: readonly string[];
 }
 interface UiSnapshot {
   readonly generation: number;
@@ -93,6 +95,8 @@ interface UiActionResult {
     readonly name: string;
   };
   readonly detail?: string;
+  /** The act started a navigation (a link, a form that submits): this page is going away, and the Host waits for the next one. */
+  readonly leaving?: true;
 }
 type UiResult = UiSnapshot | UiActionResult;
 /**

package/lib/{snapshot-text-BfEbEOjA.js → snapshot-text-CXTnjxGx.js}

@@ -5,7 +5,7 @@ import { r as streamSSE } from "./streaming-BlDaph8U.js";
 import { i as loopbackOnly, r as loopbackAuthority } from "./loopback-only-BbasoF7R.js";
 import "./helpers-BEjcdbgw.js";
 import { d as parseChannelToHost, l as UiControlError, u as WINDOW_ID } from "./protocol-CQ_if7Dg.js";
-import "./src-BTBm4OPD.js";
+import "./src-iBJ2ysV9.js";
 import "./middleware-BfG_fp8P.js";
 import { dirname, join } from "node:path";
 import { closeSync, mkdirSync, openSync, readFileSync, renameSync, statSync, writeSync } from "node:fs";
@@ -29,17 +29,22 @@ const DEFAULT_CALL_TIMEOUT_MS = 3e4;
 /** How long a page has to say it heard a read-only call before the call goes to the next page. */
 const DEFAULT_ACK_MS = 3e3;
 /**
-* The pages and who drives which. One page answers a call, chosen the same way every time: the page the Host just sent somewhere (it comes back as a new page, `prefer`), else the
-* one in front (it reports `focused`), else the most recently active; a page that did not acknowledge a call in time goes to the end of the line. An explicit desktop `window` picks its page.
+* The pages and who drives which. One page answers a call, chosen the same way every time: the page whose panel asked for the run that is making the call (`driveFor`), else the page the
+* Host just sent somewhere (it comes back as a new page, `prefer`), else the one in front (it reports `focused`), else the most recently active; a page that did not acknowledge a call in time goes to the end of the line. An explicit desktop `window` picks its page.
+* A call that names its `page` (the page a run was asked from) goes to that page alone, followed into its tab when it reloads or moves, and to no other.
 */
 var UiChannel = class {
 	ackMs;
 	attachWaitMs;
+	requirePage;
 	/** The page the Host sent to a new place and that came back: it keeps being driven until the person focuses another page. */
 	preferred;
+	/** The pages whose panels have a run going, the latest last: a call with no `window` goes to the latest of them that is still connected. */
+	askers = [];
 	constructor(options = {}) {
 		this.ackMs = options.ackMs ?? DEFAULT_ACK_MS;
 		this.attachWaitMs = options.attachWaitMs ?? 0;
+		this.requirePage = options.requirePage === true;
 	}
 	connections = /* @__PURE__ */ new Map();
 	pending = /* @__PURE__ */ new Map();
@@ -52,18 +57,22 @@ var UiChannel = class {
 	* Register a page's stream. A stream already open for the same window is closed first, and its calls settle as `disconnected`.
 	* @returns the function to call when this stream ends.
 	*/
-	attach(windowId, focused, stream, shellWindow) {
+	attach(windowId, focused, stream, shellWindow, tab) {
 		const previous = this.connections.get(windowId);
 		if (previous !== void 0) this.drop(previous, true);
 		const connection = {
 			stream,
 			windowId,
 			shellWindow,
+			tab,
 			focused,
 			lastActive: ++this.clock,
 			suspect: previous?.suspect === true
 		};
 		this.connections.set(windowId, connection);
+		for (const asker of this.askers) if (asker.windowId === windowId) asker.tab ??= tab;
+		else if (tab !== void 0 && asker.tab === tab) asker.windowId = windowId;
+		if (this.askers.some((asker) => asker.windowId === windowId)) this.tell(connection, "1");
 		for (const waiter of [...this.attachWaiters]) waiter(windowId);
 		return () => {
 			if (this.connections.get(windowId) === connection) this.drop(connection, false);
@@ -104,12 +113,83 @@ var UiChannel = class {
 			...shellWindow === void 0 ? {} : { shellWindow }
 		}));
 	}
+	/**
+	* A run asked for from this page's panel is going: its calls (which name no window) are for this page, whatever else is open and whichever was driven last, until the run ends.
+	* An explicit desktop `window` still picks its own page.
+	* @returns the function to call when the run ends.
+	*/
+	driveFor(windowId) {
+		const asker = {
+			origin: windowId,
+			windowId,
+			tab: this.connections.get(windowId)?.tab
+		};
+		this.askers.push(asker);
+		this.tellPage(windowId, "1");
+		return () => {
+			const at = this.askers.indexOf(asker);
+			if (at === -1) return;
+			this.askers.splice(at, 1);
+			if (!this.askers.some((other) => other.windowId === asker.windowId)) this.tellPage(asker.windowId, "0");
+		};
+	}
+	/** Where the page a run was asked from is now: the same window, or the page that replaced it in the same tab. */
+	whereIs(page) {
+		const asker = [...this.askers].reverse().find((entry) => entry.origin === page);
+		return asker === void 0 ? {
+			windowId: page,
+			tab: this.connections.get(page)?.tab
+		} : {
+			windowId: asker.windowId,
+			tab: asker.tab
+		};
+	}
+	/**
+	* A promise for the run's page coming back after a reload or a move: the next page that connects in its tab (or with its window id). Ask for it BEFORE the call that makes the page
+	* leave. Pages of other tabs, another visitor's among them, are never taken for it.
+	* @param signal - stop waiting (the act did not move the page after all); the promise then answers `undefined`.
+	* @returns the window id of the page that came back, or `undefined` when it did not within `timeoutMs`.
+	*/
+	expectPageBack(page, timeoutMs, signal) {
+		const { windowId, tab } = this.whereIs(page);
+		return new Promise((resolve) => {
+			const done = (value) => {
+				clearTimeout(timer);
+				this.attachWaiters.delete(waiter);
+				signal?.removeEventListener("abort", stop);
+				resolve(value);
+			};
+			const stop = () => {
+				done(void 0);
+			};
+			signal?.addEventListener("abort", stop, { once: true });
+			const waiter = (attached) => {
+				const connection = this.connections.get(attached);
+				if (attached === windowId || tab !== void 0 && connection?.tab === tab) done(attached);
+			};
+			const timer = setTimeout(() => {
+				done(void 0);
+			}, timeoutMs);
+			this.attachWaiters.add(waiter);
+		});
+	}
+	tellPage(windowId, running) {
+		const connection = this.connections.get(windowId);
+		if (connection !== void 0) this.tell(connection, running);
+	}
+	tell(connection, running) {
+		try {
+			connection.stream.notify?.("run", running);
+		} catch {}
+	}
 	/** Drive this page from now on (it is the one the Host just sent to a new place), until the person focuses another. */
 	prefer(windowId) {
 		const connection = this.connections.get(windowId);
 		if (connection === void 0) return;
 		this.preferred = windowId;
 		connection.lastActive = ++this.clock;
+		for (const asker of this.askers) if (!this.connections.has(asker.windowId) && (asker.tab === void 0 || asker.tab === connection.tab)) asker.windowId = windowId;
+		if (this.askers.some((asker) => asker.windowId === windowId)) this.tellPage(windowId, "1");
 	}
 	/**
 	* Ask the current page to do something. A read-only call (`look`, `wait`) that the page does not acknowledge in time goes to the next page, and the silent one is last in line
@@ -119,6 +199,8 @@ var UiChannel = class {
 	async call(request, options = {}, retried = false) {
 		if (this.closed) throw new UiControlError("unloaded", "the door was unloaded");
 		const readOnlyCall = request.op === "snapshot" || request.op === "wait";
+		if (options.page !== void 0) return await this.callPage(request, options.page, options, readOnlyCall);
+		if (this.requirePage) throw new UiControlError("no-window", "this door drives only the page whose visitor asked, and the call names no page");
 		if (readOnlyCall && this.attachWaitMs > 0 && this.connections.size === 0) await this.expectNewPage(this.attachWaitMs);
 		const ordered = this.ordered();
 		const candidates = options.window === void 0 ? ordered : ordered.filter((connection) => connection.shellWindow === options.window);
@@ -144,6 +226,25 @@ var UiChannel = class {
 		}
 		throw new UiControlError("timeout", `no page of the app answered within ${String(Math.round(this.ackMs / 1e3))} s: the app's pages are open but none responded. Likely causes: a tab in the background, a page that is still loading after a navigation (look again), a page busy running a long script, or a page that holds the browser's six connections with event streams of its own (a page should keep to two). Bring the app's tab to the front, or navigate it, then look again`);
 	}
+	/**
+	* A call for one page (the page a run was asked from, followed into its tab): it goes to that page alone and never fails over to another one. A page that is between two
+	* documents (it reloads, or moves to another path) is waited for, up to the attach wait.
+	*/
+	async callPage(request, page, options, readOnly) {
+		let target = this.connections.get(this.whereIs(page).windowId);
+		if (target === void 0 && this.attachWaitMs > 0) {
+			const back = await this.expectPageBack(page, this.attachWaitMs);
+			if (back !== void 0) target = this.connections.get(back);
+		}
+		if (target === void 0) throw new UiControlError("no-window", "the page this run is for is not open any more");
+		if (options.signal?.aborted === true) throw new UiControlError("aborted", "the call was cancelled");
+		try {
+			return await this.callOne(target, request, options, readOnly);
+		} catch (cause) {
+			if (cause instanceof Silent) throw new UiControlError("timeout", "the page this run is for did not answer: is its tab in the background or still loading? Look again");
+			throw cause;
+		}
+	}
 	callOne(target, request, options, failOver) {
 		const signal = options.signal;
 		const id = this.nextId;
@@ -209,16 +310,22 @@ var UiChannel = class {
 	}
 	/**
 	* A promise for the window id of the next page that connects and was not connected when this was asked (the page that came back after a reload or a move).
+	* @param signal - stop waiting; the promise then answers `undefined`.
 	* @returns that id, or `undefined` when no new page connected within `timeoutMs`.
 	*/
-	expectNewPage(timeoutMs) {
+	expectNewPage(timeoutMs, signal) {
 		const known = new Set(this.connections.keys());
 		return new Promise((resolve) => {
 			const done = (value) => {
 				clearTimeout(timer);
 				this.attachWaiters.delete(waiter);
+				signal?.removeEventListener("abort", stop);
 				resolve(value);
 			};
+			const stop = () => {
+				done(void 0);
+			};
+			signal?.addEventListener("abort", stop, { once: true });
 			const waiter = (windowId) => {
 				if (!known.has(windowId)) done(windowId);
 			};
@@ -258,9 +365,10 @@ var UiChannel = class {
 		for (const connection of [...this.connections.values()]) connection.stream.close();
 		this.connections.clear();
 	}
-	/** The order pages are driven in: the one the Host sent somewhere, suspect ones last, the one in front, then the most recently active. */
+	/** The order pages are driven in: the one whose panel asked, the one the Host sent somewhere, suspect ones last, the one in front, then the most recently active. */
 	ordered() {
-		const rank = (connection) => (connection.suspect ? 0 : 4) + (connection.windowId === this.preferred ? 2 : 0) + (connection.focused ? 1 : 0);
+		const asker = [...this.askers].reverse().find((entry) => this.connections.has(entry.windowId))?.windowId;
+		const rank = (connection) => (connection.suspect ? 0 : 4) + (connection.windowId === this.preferred ? 2 : 0) + (connection.focused ? 1 : 0) + (connection.windowId === asker && !connection.suspect ? 8 : 0);
 		return [...this.connections.values()].sort((a, b) => rank(b) - rank(a) || b.lastActive - a.lastActive);
 	}
 	/** Forget a connection; its calls in flight settle as `disconnected` at once rather than waiting for their timeout. */
@@ -423,6 +531,8 @@ function pageChannelRoutes(channel, options) {
 		const focused = c.req.query("focused") === "1";
 		const shellQuery = Number(c.req.query("shell"));
 		const shellWindow = Number.isSafeInteger(shellQuery) && shellQuery > 0 ? shellQuery : void 0;
+		const tabQuery = c.req.query("tab");
+		const tab = tabQuery !== void 0 && WINDOW_ID.test(tabQuery) ? tabQuery : void 0;
 		const signal = c.req.raw.signal;
 		return streamSSE(c, async (stream) => {
 			let end = () => {};
@@ -441,8 +551,9 @@ function pageChannelRoutes(channel, options) {
 				send: (data) => {
 					write("call", data);
 				},
+				notify: write,
 				close: end
-			}, shellWindow);
+			}, shellWindow, tab);
 			const beat = setInterval(() => {
 				write("ping", "");
 			}, heartbeatMs);
@@ -476,7 +587,8 @@ function renderSnapshot(snapshot, more = (cursor) => `call ui_snapshot with curs
 		const level = node.level === void 0 ? "" : ` level=${String(node.level)}`;
 		const states = node.states.length === 0 ? "" : ` [${node.states.join(", ")}]`;
 		const value = node.value === void 0 ? "" : ` value=${JSON.stringify(node.value)}`;
-		return `${"  ".repeat(Math.min(node.depth, 8))}- ${node.role}${node.name === "" ? "" : ` ${JSON.stringify(node.name)}`}${level}${states}${value} [ref=${node.ref}]`;
+		const options = node.options === void 0 ? "" : ` options=${JSON.stringify(node.options)}`;
+		return `${"  ".repeat(Math.min(node.depth, 8))}- ${node.role}${node.name === "" ? "" : ` ${JSON.stringify(node.name)}`}${level}${states}${value}${options} [ref=${node.ref}]`;
 	});
 	const rest = snapshot.nextCursor === void 0 ? "" : `\n(${String(snapshot.total - snapshot.nextCursor)} more elements; ${more(snapshot.nextCursor)})`;
 	return `Page: ${snapshot.title || "(untitled)"}\nSnapshot ${String(snapshot.generation)}, ${String(snapshot.nodes.length)} of ${String(snapshot.total)} elements:\n${lines.join("\n")}${rest}`;