@effect-agent/platform-cloudflare 0.1.0-beta.36 → 0.1.0-beta.37

package/dist/interactive-browser.mjs

@@ -16,6 +16,10 @@ const MAX_HANDOFF_TIMEOUT_MILLIS = 30 * 6e4;
 const MAX_HOST_TEXT_LENGTH = 8 * 1024;
 const CLEANUP_STEP_TIMEOUT_MILLIS = 1e4;
 const CLOSE_SESSION_TIMEOUT_MILLIS = 1e4;
+const ACTION_NETWORK_QUIET_MILLIS = 200;
+const ACTION_NETWORK_SETTLE_MILLIS = 2e3;
+const ACTION_POST_STATE_MILLIS = 250;
+const MAX_OBSERVED_CONTROLS = 64;
 const PositiveInt = Schema.Int.check(Schema.isGreaterThan(0));
 const BoundedHostText = Schema.String.check(Schema.isMinLength(1), Schema.isMaxLength(MAX_HOST_TEXT_LENGTH));
 const BoundedRemoteText = Schema.String.check(Schema.isMaxLength(MAX_TEXT_LENGTH));
@@ -30,6 +34,57 @@ const TextObservation = Schema.Union([
 		observed: Schema.Natural
 	})
 ]);
+const ActionTargetState = Schema.Struct({
+	matchCount: Schema.Natural,
+	invalidSelector: Schema.optionalKey(Schema.Boolean),
+	kind: Schema.optionalKey(Schema.Literals([
+		"button",
+		"checkbox",
+		"radio",
+		"select",
+		"text",
+		"link",
+		"other"
+	])),
+	checked: Schema.optionalKey(Schema.Boolean),
+	selected: Schema.optionalKey(Schema.Boolean),
+	disabled: Schema.optionalKey(Schema.Boolean),
+	required: Schema.optionalKey(Schema.Boolean),
+	valid: Schema.optionalKey(Schema.Boolean),
+	formValid: Schema.optionalKey(Schema.Boolean)
+});
+const ActionNetworkState = Schema.Struct({
+	total: Schema.Natural,
+	status2xx: Schema.Natural,
+	status3xx: Schema.Natural,
+	status4xx: Schema.Natural,
+	status5xx: Schema.Natural,
+	failed: Schema.Natural,
+	pending: Schema.Natural,
+	settleTimedOut: Schema.Boolean
+});
+const ActionObservation = Schema.Struct({
+	before: ActionTargetState,
+	after: Schema.optionalKey(ActionTargetState),
+	afterUnavailable: Schema.Boolean,
+	network: ActionNetworkState
+});
+const PageObservation = Schema.fromJsonString(Schema.Struct({
+	pageText: BoundedRemoteText,
+	selectorMatchCount: Schema.Natural,
+	controlsTruncated: Schema.Boolean,
+	controls: Schema.Array(Schema.Struct({
+		selector: BoundedRemoteText,
+		kind: BoundedRemoteText,
+		label: Schema.optionalKey(Schema.String.check(Schema.isMaxLength(200))),
+		checked: Schema.optionalKey(Schema.Boolean),
+		selected: Schema.optionalKey(Schema.Boolean),
+		disabled: Schema.optionalKey(Schema.Boolean),
+		required: Schema.optionalKey(Schema.Boolean),
+		valid: Schema.optionalKey(Schema.Boolean),
+		formValid: Schema.optionalKey(Schema.Boolean)
+	})).check(Schema.isMaxLength(MAX_OBSERVED_CONTROLS))
+}));
 const PngBytes = Schema.Uint8Array.check(Schema.isMaxLength(MAX_SCREENSHOT_BYTES), Schema.makeFilter((bytes) => bytes.length >= 8 && bytes[0] === 137 && bytes[1] === 80 && bytes[2] === 78 && bytes[3] === 71 && bytes[4] === 13 && bytes[5] === 10 && bytes[6] === 26 && bytes[7] === 10, { title: "PNG bytes" }));
 const BrowserRunSessionId = Schema.String.check(Schema.isMinLength(1), Schema.isMaxLength(256), Schema.makeFilter((value) => /^[A-Za-z0-9_-]+$/.test(value), { title: "a Browser Run session identifier" }));
 const LiveViewUrl = Schema.String.check(Schema.isMaxLength(MAX_HOST_TEXT_LENGTH), Schema.makeFilter((value) => {
@@ -52,6 +107,24 @@ const HandoffStateObservation = Schema.Union([Schema.Struct({
 	handoffId: Schema.optionalKey(BoundedHostText),
 	durationMs: Schema.optionalKey(HandoffDuration)
 })]);
+/**
+* Host presentation state in CSS pixels. Dimensions are integers in 1..2048,
+* density is finite in 1..2 (default 1), and neither scaled dimension may exceed
+* 2048 pixels. Mobile, touch, and orientation emulation are not supported.
+*/
+var BrowserRunViewport = class extends Schema.Class("BrowserRunViewport")(Schema.Struct({
+	width: PositiveInt.check(Schema.isLessThanOrEqualTo(2048)),
+	height: PositiveInt.check(Schema.isLessThanOrEqualTo(2048)),
+	deviceScaleFactor: Schema.optionalKey(Schema.Finite.check(Schema.isBetween({
+		minimum: 1,
+		maximum: 2
+	})))
+}).check(Schema.makeFilter((viewport) => Math.max(viewport.width, viewport.height) * (viewport.deviceScaleFactor ?? 1) <= 2048, { title: "a viewport with scaled dimensions no larger than 2048 pixels" }))) {};
+const decodeViewport = (input) => Schema.decodeUnknownEffect(BrowserRunViewport)(input, { onExcessProperty: "error" }).pipe(Effect.mapError(() => policyError("The browser viewport is malformed")), Effect.map((viewport) => ({
+	width: viewport.width,
+	height: viewport.height,
+	deviceScaleFactor: viewport.deviceScaleFactor ?? 1
+})));
 /** Host-only request for a redacted Cloudflare Live View URL. */
 var BrowserRunLiveViewRequest = class extends Schema.Class("BrowserRunLiveViewRequest")({
 	mode: Schema.Literal("tab"),
@@ -75,10 +148,16 @@ var BrowserRunHandoffState = class extends Schema.Class("BrowserRunHandoffState"
 /** Host-supplied Browser Run binding projected into one fakeable launch operation. */
 var BrowserRunInteractiveBinding = class BrowserRunInteractiveBinding extends Context.Service()("@effect-agent/platform-cloudflare/BrowserRunInteractiveBinding") {
 	static layer(options) {
-		return Layer.succeed(BrowserRunInteractiveBinding)({
-			launch: async (keepAliveMillis) => makeProductionBrowser(await puppeteer.launch(options.browser, { keep_alive: keepAliveMillis })),
-			connect: async (sessionId) => makeProductionBrowser(await puppeteer.connect(options.browser, sessionId))
-		});
+		return Layer.effect(BrowserRunInteractiveBinding)(Effect.gen(function* () {
+			const viewport = options.viewport === void 0 ? void 0 : yield* decodeViewport(options.viewport);
+			return {
+				launch: async (keepAliveMillis) => makeProductionBrowser(await puppeteer.launch(options.browser, {
+					keep_alive: keepAliveMillis,
+					...viewport === void 0 ? {} : { defaultViewport: { ...viewport } }
+				})),
+				connect: async (sessionId) => makeProductionBrowser(await puppeteer.connect(options.browser, sessionId))
+			};
+		}));
 	}
 };
 /** Cloudflare host authority kept separate from the provider-neutral browser handle. */
@@ -95,6 +174,205 @@ const makeProductionCdpSession = (session) => ({
 	},
 	detach: () => session.detach()
 });
+var BrowserRunActionUndispatched = class extends Error {
+	matchCount;
+	constructor(matchCount) {
+		super("The browser action selector did not resolve to exactly one element");
+		this.matchCount = matchCount;
+	}
+};
+const readActionTarget = (page, selector) => page.evaluate((requestedSelector) => {
+	const pageDocument = Reflect.get(globalThis, "document");
+	let matches;
+	try {
+		matches = Reflect.apply(Reflect.get(pageDocument, "querySelectorAll"), pageDocument, [requestedSelector]);
+	} catch (cause) {
+		if (cause instanceof Error && cause.name === "SyntaxError") return {
+			matchCount: 0,
+			invalidSelector: true
+		};
+		throw cause;
+	}
+	if (typeof matches !== "object" || matches === null) throw new Error("Invalid query result");
+	const matchCount = Math.min(1e4, Reflect.get(matches, "length"));
+	const element = Reflect.get(matches, 0);
+	if (element === void 0) return { matchCount };
+	const associated = Reflect.get(element, "control") ?? element;
+	const tagName = String(Reflect.get(associated, "tagName") ?? "").toLowerCase();
+	const inputType = String(Reflect.get(associated, "type") ?? "").toLowerCase();
+	const role = String(Reflect.apply(Reflect.get(element, "getAttribute"), element, ["role"]) ?? "").toLowerCase();
+	const kind = tagName === "button" || role === "button" ? "button" : inputType === "checkbox" || role === "checkbox" || role === "switch" ? "checkbox" : inputType === "radio" || role === "radio" ? "radio" : tagName === "select" ? "select" : tagName === "input" || tagName === "textarea" ? "text" : tagName === "a" ? "link" : "other";
+	const checked = Reflect.get(associated, "checked");
+	const selected = tagName === "select" ? Reflect.get(associated, "selectedIndex") >= 0 : Reflect.get(associated, "selected");
+	const disabled = Reflect.get(associated, "disabled");
+	const required = Reflect.get(associated, "required");
+	const validity = Reflect.get(associated, "validity");
+	const form = Reflect.get(associated, "form");
+	const formMatches = form === null || form === void 0 ? void 0 : Reflect.get(form, "matches");
+	const ariaChecked = Reflect.apply(Reflect.get(element, "getAttribute"), element, ["aria-checked"]);
+	const ariaDisabled = Reflect.apply(Reflect.get(element, "getAttribute"), element, ["aria-disabled"]);
+	const ariaSelected = Reflect.apply(Reflect.get(element, "getAttribute"), element, ["aria-selected"]);
+	return {
+		matchCount,
+		kind,
+		...typeof checked === "boolean" ? { checked } : ariaChecked === "true" || ariaChecked === "false" ? { checked: ariaChecked === "true" } : {},
+		...typeof selected === "boolean" ? { selected } : ariaSelected === "true" || ariaSelected === "false" ? { selected: ariaSelected === "true" } : {},
+		disabled: typeof disabled === "boolean" ? disabled : ariaDisabled === "true",
+		...typeof required === "boolean" ? { required } : {},
+		...validity !== void 0 && typeof Reflect.get(validity, "valid") === "boolean" ? { valid: Reflect.get(validity, "valid") } : {},
+		...typeof formMatches === "function" ? { formValid: Reflect.apply(formMatches, form, [":valid"]) } : {}
+	};
+}, selector);
+const boundedBestEffort = async (promise, millis) => {
+	let timer;
+	try {
+		return await Promise.race([promise.catch(() => void 0), new Promise((resolve) => {
+			timer = setTimeout(resolve, millis);
+		})]);
+	} finally {
+		clearTimeout(timer);
+	}
+};
+const readActionTargetAfter = (page, selector) => boundedBestEffort(readActionTarget(page, selector).then(Schema.decodeUnknownSync(ActionTargetState)), ACTION_POST_STATE_MILLIS);
+const makeActionRequestTracker = (page, signal) => {
+	const pending = /* @__PURE__ */ new Set();
+	let total = 0;
+	let status2xx = 0;
+	let status3xx = 0;
+	let status4xx = 0;
+	let status5xx = 0;
+	let failed = 0;
+	let lastChange = performance.now();
+	let closed = false;
+	let wake;
+	let timer;
+	const relevant = (request) => {
+		const resourceType = request.resourceType();
+		return resourceType === "fetch" || resourceType === "xhr";
+	};
+	const onRequest = (request) => {
+		if (!relevant(request)) return;
+		pending.add(request);
+		total++;
+		lastChange = performance.now();
+	};
+	const onFinished = (request) => {
+		if (!pending.delete(request)) return;
+		let status;
+		try {
+			status = request.response()?.status();
+		} catch {}
+		if (status !== void 0) {
+			if (status >= 200 && status < 300) status2xx++;
+			else if (status >= 300 && status < 400) status3xx++;
+			else if (status >= 400 && status < 500) status4xx++;
+			else if (status >= 500 && status < 600) status5xx++;
+		}
+		lastChange = performance.now();
+	};
+	const onFailed = (request) => {
+		if (!pending.delete(request)) return;
+		failed++;
+		lastChange = performance.now();
+	};
+	const close = () => {
+		if (closed) return;
+		closed = true;
+		page.off("request", onRequest);
+		page.off("requestfinished", onFinished);
+		page.off("requestfailed", onFailed);
+		signal.removeEventListener("abort", close);
+		clearTimeout(timer);
+		wake?.();
+	};
+	try {
+		page.on("request", onRequest);
+		page.on("requestfinished", onFinished);
+		page.on("requestfailed", onFailed);
+		signal.addEventListener("abort", close, { once: true });
+		if (signal.aborted) close();
+	} catch (cause) {
+		close();
+		throw cause;
+	}
+	const wait = async () => {
+		const startedAt = performance.now();
+		let settleTimedOut = false;
+		while (!closed) {
+			const now = performance.now();
+			if (pending.size === 0 && now - lastChange >= ACTION_NETWORK_QUIET_MILLIS) break;
+			if (now - startedAt >= ACTION_NETWORK_SETTLE_MILLIS) {
+				settleTimedOut = true;
+				break;
+			}
+			await new Promise((resolve) => {
+				wake = resolve;
+				timer = setTimeout(() => resolve(), 50);
+			});
+			wake = void 0;
+		}
+		return {
+			total,
+			status2xx,
+			status3xx,
+			status4xx,
+			status5xx,
+			failed,
+			pending: pending.size,
+			settleTimedOut
+		};
+	};
+	return {
+		wait,
+		close,
+		markActionSettled: () => {
+			lastChange = performance.now();
+		}
+	};
+};
+const disposeActionHandles = async (handles) => {
+	await boundedBestEffort(Promise.allSettled(handles.map(async (handle) => handle.dispose())), ACTION_POST_STATE_MILLIS);
+};
+const runObservedPageAction = async (page, selector, signal, onDispatch, action) => {
+	if (signal.aborted) throw new BrowserRunActionUndispatched(0);
+	const before = Schema.decodeUnknownSync(ActionTargetState)(await readActionTarget(page, selector));
+	if (before.matchCount !== 1 || before.invalidSelector === true) throw new BrowserRunActionUndispatched(before.matchCount);
+	const matches = await page.$$(selector);
+	if (matches.length !== 1 || matches[0] === void 0) {
+		await disposeActionHandles(matches);
+		throw new BrowserRunActionUndispatched(Math.min(1e4, matches.length));
+	}
+	if (signal.aborted) {
+		await disposeActionHandles(matches);
+		throw new BrowserRunActionUndispatched(1);
+	}
+	let tracker;
+	let disposing;
+	const dispose = () => disposing ??= disposeActionHandles(matches);
+	const onAbort = () => {
+		dispose();
+	};
+	signal.addEventListener("abort", onAbort, { once: true });
+	try {
+		tracker = makeActionRequestTracker(page, signal);
+		if (signal.aborted) throw new BrowserRunActionUndispatched(1);
+		onDispatch();
+		await action(matches[0]);
+		tracker.markActionSettled();
+		const network = await tracker.wait();
+		const after = signal.aborted ? void 0 : await readActionTargetAfter(page, selector);
+		return {
+			before,
+			...after === void 0 ? {} : { after },
+			afterUnavailable: after === void 0,
+			network
+		};
+	} finally {
+		tracker?.close();
+		signal.removeEventListener("abort", onAbort);
+		await dispose();
+	}
+};
 const makeProductionPage = (page) => {
 	const listeners = /* @__PURE__ */ new Map();
 	return {
@@ -115,51 +393,146 @@ const makeProductionPage = (page) => {
 		},
 		goto: async (url) => {
 			await page.goto(url, {
-				waitUntil: "networkidle0",
-				timeout: 0
+				waitUntil: "domcontentloaded",
+				timeout: 3e4
 			});
 		},
 		url: () => page.url(),
-		readText: (selector, maximumBytes) => page.evaluate((requestedSelector, maximum) => {
-			const pageDocument = Reflect.get(globalThis, "document");
-			const element = requestedSelector === void 0 ? Reflect.get(pageDocument, "body") : Reflect.apply(Reflect.get(pageDocument, "querySelector"), pageDocument, [requestedSelector]);
-			if (element === null) return { _tag: "MissingElement" };
-			const innerText = Reflect.get(element, "innerText");
-			const textContent = Reflect.get(element, "textContent");
-			const text = typeof innerText === "string" ? innerText : typeof textContent === "string" ? textContent : "";
-			const observed = new TextEncoder().encode(text).byteLength;
-			return observed > maximum ? {
-				_tag: "OverLimit",
-				observed
-			} : {
-				_tag: "Text",
-				text
-			};
-		}, selector, maximumBytes),
-		fill: async (selector, value) => {
-			await page.$eval(selector, (element, nextValue) => {
-				let prototype = Reflect.getPrototypeOf(element);
-				let setValue;
-				while (prototype !== null) {
-					const setter = Reflect.getOwnPropertyDescriptor(prototype, "value")?.set;
-					if (typeof setter === "function") {
-						setValue = setter;
-						break;
+		readText: async (selector, maximumBytes) => {
+			const observation = Schema.decodeUnknownSync(TextObservation)(await page.evaluate((requestedSelector, maximum, maximumControls) => {
+				const pageDocument = Reflect.get(globalThis, "document");
+				const matches = requestedSelector === void 0 ? void 0 : Reflect.apply(Reflect.get(pageDocument, "querySelectorAll"), pageDocument, [requestedSelector]);
+				const selectorMatchCount = matches === void 0 || matches === null ? 1 : Math.min(1e4, Reflect.get(matches, "length"));
+				const element = matches === void 0 || matches === null ? Reflect.get(pageDocument, "body") : Reflect.get(matches, 0);
+				if (element === null) return { _tag: "MissingElement" };
+				if (element === void 0) return { _tag: "MissingElement" };
+				const innerText = Reflect.get(element, "innerText");
+				const textContent = Reflect.get(element, "textContent");
+				const pageText = typeof innerText === "string" ? innerText : typeof textContent === "string" ? textContent : "";
+				const primaryControlSelector = "input,select,textarea,label,button,[role=\"checkbox\"],[role=\"radio\"],[role=\"option\"],[role=\"switch\"],[role=\"tab\"],[role=\"button\"]";
+				const optionSelector = "select option";
+				const secondaryControlSelector = "a[href]";
+				const controlSelector = `${primaryControlSelector},${optionSelector},${secondaryControlSelector}`;
+				const selectorFor = (candidate) => {
+					const parts = [];
+					let current = candidate;
+					while (current !== null && current !== void 0) {
+						const tagName = String(Reflect.get(current, "tagName") ?? "").toLowerCase();
+						if (tagName === "") break;
+						const parent = Reflect.get(current, "parentElement");
+						if (parent === null) {
+							parts.push(tagName);
+							break;
+						}
+						let sibling = Reflect.get(current, "previousElementSibling");
+						let index = 1;
+						while (sibling !== null && sibling !== void 0) {
+							if (String(Reflect.get(sibling, "tagName") ?? "").toLowerCase() === tagName) index++;
+							sibling = Reflect.get(sibling, "previousElementSibling");
+						}
+						parts.push(`${tagName}:nth-of-type(${index})`);
+						current = parent;
 					}
-					prototype = Reflect.getPrototypeOf(prototype);
-				}
-				if (setValue === void 0) throw new Error("The selector did not resolve to a fillable field");
-				const focus = Reflect.get(element, "focus");
-				if (typeof focus === "function") Reflect.apply(focus, element, []);
-				Reflect.apply(setValue, element, [nextValue]);
-				const dispatchEvent = Reflect.get(element, "dispatchEvent");
-				if (typeof dispatchEvent === "function") {
-					Reflect.apply(dispatchEvent, element, [new Event("input", { bubbles: true })]);
-					Reflect.apply(dispatchEvent, element, [new Event("change", { bubbles: true })]);
-				}
-			}, value);
+					return parts.reverse().join(" > ");
+				};
+				const visible = (candidate) => {
+					const hidden = Reflect.get(candidate, "hidden");
+					const ariaHidden = Reflect.apply(Reflect.get(candidate, "getAttribute"), candidate, ["aria-hidden"]);
+					const rects = Reflect.apply(Reflect.get(candidate, "getClientRects"), candidate, []);
+					return hidden !== true && ariaHidden !== "true" && typeof rects === "object" && rects !== null && Reflect.get(rects, "length") > 0;
+				};
+				const candidates = [];
+				let controlsTruncated = false;
+				const consider = (candidate) => {
+					const tagName = String(Reflect.get(candidate, "tagName") ?? "").toLowerCase();
+					const visibilityTarget = tagName === "option" ? Reflect.apply(Reflect.get(candidate, "closest"), candidate, ["select"]) : candidate;
+					if (!(tagName !== "label" || Reflect.get(candidate, "control") !== null) || typeof visibilityTarget !== "object" || visibilityTarget === null || !visible(visibilityTarget)) return;
+					candidates.push(candidate);
+					if (candidates.length > maximumControls) controlsTruncated = true;
+				};
+				const elementMatches = Reflect.get(element, "matches");
+				if (typeof elementMatches === "function" && Reflect.apply(elementMatches, element, [controlSelector])) consider(element);
+				const considerSelector = (candidateSelector) => {
+					const descendants = Reflect.apply(Reflect.get(element, "querySelectorAll"), element, [candidateSelector]);
+					if (typeof descendants !== "object" || descendants === null) return;
+					const descendantCount = Reflect.get(descendants, "length");
+					for (let index = 0; index < descendantCount && !controlsTruncated; index++) consider(Reflect.get(descendants, index));
+				};
+				considerSelector(primaryControlSelector);
+				if (!controlsTruncated) considerSelector(optionSelector);
+				if (!controlsTruncated) considerSelector(secondaryControlSelector);
+				const controls = candidates.slice(0, maximumControls).map((candidate) => {
+					const associated = Reflect.get(candidate, "control") ?? candidate;
+					const tagName = String(Reflect.get(candidate, "tagName") ?? "").toLowerCase();
+					const inputType = String(Reflect.get(associated, "type") ?? "").toLowerCase();
+					const role = String(Reflect.apply(Reflect.get(candidate, "getAttribute"), candidate, ["role"]) ?? "").toLowerCase();
+					const ariaLabel = Reflect.apply(Reflect.get(candidate, "getAttribute"), candidate, ["aria-label"]);
+					const candidateText = tagName === "textarea" || tagName === "input" || tagName === "select" ? void 0 : Reflect.get(candidate, tagName === "option" ? "label" : "innerText");
+					const associatedLabels = Reflect.get(associated, "labels");
+					const associatedLabel = associatedLabels !== void 0 && associatedLabels !== null && Reflect.get(associatedLabels, "length") > 0 ? Reflect.get(Reflect.get(associatedLabels, 0), "innerText") : void 0;
+					const label = String(typeof ariaLabel === "string" && ariaLabel !== "" ? ariaLabel : typeof candidateText === "string" && candidateText !== "" ? candidateText : associatedLabel ?? "").replace(/\s+/g, " ").trim().slice(0, 200);
+					const checked = Reflect.get(associated, "checked");
+					const selected = tagName === "select" ? Reflect.get(associated, "selectedIndex") >= 0 : Reflect.get(associated, "selected");
+					const disabled = Reflect.get(associated, "disabled");
+					const required = Reflect.get(associated, "required");
+					const validity = Reflect.get(associated, "validity");
+					const form = Reflect.get(associated, "form");
+					const formMatches = form === null || form === void 0 ? void 0 : Reflect.get(form, "matches");
+					const ariaChecked = Reflect.apply(Reflect.get(candidate, "getAttribute"), candidate, ["aria-checked"]);
+					const ariaSelected = Reflect.apply(Reflect.get(candidate, "getAttribute"), candidate, ["aria-selected"]);
+					const ariaDisabled = Reflect.apply(Reflect.get(candidate, "getAttribute"), candidate, ["aria-disabled"]);
+					return {
+						selector: selectorFor(candidate),
+						kind: tagName === "label" ? `label:${inputType || "control"}` : tagName === "input" ? `input:${inputType || "text"}` : role !== "" ? `role:${role}` : tagName,
+						...label === "" ? {} : { label },
+						...typeof checked === "boolean" ? { checked } : ariaChecked === "true" || ariaChecked === "false" ? { checked: ariaChecked === "true" } : {},
+						...typeof selected === "boolean" ? { selected } : ariaSelected === "true" || ariaSelected === "false" ? { selected: ariaSelected === "true" } : {},
+						...typeof disabled === "boolean" ? { disabled } : ariaDisabled === "true" || ariaDisabled === "false" ? { disabled: ariaDisabled === "true" } : {},
+						...typeof required === "boolean" ? { required } : {},
+						...validity !== void 0 && typeof Reflect.get(validity, "valid") === "boolean" ? { valid: Reflect.get(validity, "valid") } : {},
+						...typeof formMatches === "function" ? { formValid: Reflect.apply(formMatches, form, [":valid"]) } : {}
+					};
+				});
+				const text = JSON.stringify({
+					pageText,
+					selectorMatchCount,
+					controls,
+					controlsTruncated
+				});
+				const observed = new TextEncoder().encode(text).byteLength;
+				return observed > maximum ? {
+					_tag: "OverLimit",
+					observed
+				} : {
+					_tag: "Text",
+					text
+				};
+			}, selector, maximumBytes, MAX_OBSERVED_CONTROLS));
+			if (observation._tag === "Text") Schema.decodeUnknownSync(PageObservation)(observation.text);
+			return observation;
 		},
-		click: (selector) => page.click(selector),
+		fill: (selector, value, signal, onDispatch) => runObservedPageAction(page, selector, signal, onDispatch, (element) => element.evaluate((element, nextValue) => {
+			let prototype = Reflect.getPrototypeOf(element);
+			let setValue;
+			while (prototype !== null) {
+				const setter = Reflect.getOwnPropertyDescriptor(prototype, "value")?.set;
+				if (typeof setter === "function") {
+					setValue = setter;
+					break;
+				}
+				prototype = Reflect.getPrototypeOf(prototype);
+			}
+			if (setValue === void 0) throw new Error("The selector did not resolve to a fillable field");
+			const focus = Reflect.get(element, "focus");
+			if (typeof focus === "function") Reflect.apply(focus, element, []);
+			Reflect.apply(setValue, element, [nextValue]);
+			const dispatchEvent = Reflect.get(element, "dispatchEvent");
+			if (typeof dispatchEvent === "function") {
+				Reflect.apply(dispatchEvent, element, [new Event("input", { bubbles: true })]);
+				Reflect.apply(dispatchEvent, element, [new Event("change", { bubbles: true })]);
+			}
+		}, value)),
+		click: (selector, signal, onDispatch) => runObservedPageAction(page, selector, signal, onDispatch, (element) => element.click()),
 		screenshot: (fullPage) => page.screenshot({
 			type: "png",
 			fullPage
@@ -172,7 +545,8 @@ const makeProductionPage = (page) => {
 				behavior: "instant"
 			}]);
 		}, deltaX, deltaY),
-		createCdpSession: async () => makeProductionCdpSession(await page.createCDPSession())
+		createCdpSession: async () => makeProductionCdpSession(await page.createCDPSession()),
+		setViewport: (viewport) => page.setViewport(viewport)
 	};
 };
 const makeProductionContext = (context) => ({
@@ -202,6 +576,13 @@ const actionError = (operation, cause) => InteractiveBrowserActionError.make({
 	message: `The interactive browser ${operation} operation failed`,
 	...cause === void 0 ? {} : { cause }
 });
+const undispatchedActionError = (operation) => InteractiveBrowserActionError.make({
+	implementation: browserRunInteractiveImplementation,
+	operation,
+	message: `The interactive browser ${operation} operation was not dispatched`
+});
+/** Recognizes a local pre-dispatch refusal without exposing selector or page content. */
+const isBrowserRunUndispatchedActionError = (error) => Schema.is(InteractiveBrowserActionError)(error) && error.implementation.identity === browserRunInteractiveImplementation.identity && (error.operation === "click" || error.operation === "fill") && error.message === `The interactive browser ${error.operation} operation was not dispatched`;
 const policyError = (message) => InteractiveBrowserPolicyDeniedError.make({
 	implementation: browserRunInteractiveImplementation,
 	message
@@ -282,6 +663,12 @@ const stateFailure = (state) => {
 	if (state.violation.value !== void 0) return state.violation.value;
 	if (state.closed.value || state.disconnected.value || state.uncertain.value) return expiredError();
 };
+var BrowserRunRemoteFailure = class {
+	cause;
+	constructor(cause) {
+		this.cause = cause;
+	}
+};
 const awaitPendingRequests = (state) => Effect.suspend(() => {
 	const pending = [...state.pendingRequests];
 	return pending.length === 0 ? Effect.void : Effect.promise(() => Promise.all(pending)).pipe(Effect.asVoid, Effect.andThen(awaitPendingRequests(state)));
@@ -331,32 +718,87 @@ const makeHandle = Effect.fn("BrowserRunInteractive.makeHandle")(function* (page
 	const actions = yield* Ref.make(0);
 	const remote = (operation, evaluate) => Effect.tryPromise({
 		try: evaluate,
-		catch: (cause) => {
-			if (state.disconnected.value || isRemoteClosure(cause)) {
-				state.disconnected.value = true;
-				return expiredError();
-			}
-			return actionError(operation, cause);
+		catch: (cause) => new BrowserRunRemoteFailure(cause)
+	}).pipe(Effect.catch((failure) => {
+		const cause = failure.cause;
+		if (cause instanceof BrowserRunActionUndispatched) return Effect.logInfo("Browser interactive action was not dispatched").pipe(Effect.annotateLogs({
+			"browser.action": operation,
+			"browser.selector_match_count": cause.matchCount
+		}), Effect.andThen(Effect.fail(undispatchedActionError(operation))));
+		if (state.disconnected.value || isRemoteClosure(cause)) {
+			state.disconnected.value = true;
+			return Effect.fail(expiredError());
 		}
+		return Effect.fail(actionError(operation, cause));
+	}));
+	const observedAction = (operation, evaluate) => Effect.suspend(() => {
+		let dispatched = false;
+		let pending;
+		return remote(operation, (signal) => {
+			pending = evaluate(signal, () => {
+				dispatched = true;
+			});
+			return pending;
+		}).pipe(Effect.onInterrupt(() => Effect.gen(function* () {
+			state.uncertain.value = true;
+			yield* Effect.logWarning("Browser interactive action interrupted").pipe(Effect.annotateLogs({
+				"browser.action": operation,
+				"browser.action_dispatched": dispatched,
+				"browser.action_outcome_unknown": dispatched
+			}));
+			const completion = pending;
+			if (completion !== void 0) yield* Effect.promise(() => boundedBestEffort(completion, 500));
+		})));
+	});
+	const decodeActionObservation = Effect.fn("BrowserRunInteractive.decodeActionObservation")(function* (raw) {
+		return yield* Schema.decodeUnknownEffect(ActionObservation)(raw).pipe(Effect.mapError((cause) => protocolError("The browser returned a malformed action observation", cause)));
 	});
-	const run = (effect, preflight = Effect.void) => permits.withPermitsIfAvailable(1)(Effect.gen(function* () {
+	const logActionObservation = (operation, observation) => Effect.logInfo("Browser interactive action observed").pipe(Effect.annotateLogs({
+		"browser.action": operation,
+		"browser.selector_match_count": observation.before.matchCount,
+		...observation.before.kind === void 0 ? {} : { "browser.target_kind": observation.before.kind },
+		...observation.before.checked === void 0 ? {} : { "browser.target_checked_before": observation.before.checked },
+		...observation.after?.checked === void 0 ? {} : { "browser.target_checked_after": observation.after.checked },
+		...observation.before.selected === void 0 ? {} : { "browser.target_selected_before": observation.before.selected },
+		...observation.after?.selected === void 0 ? {} : { "browser.target_selected_after": observation.after.selected },
+		...observation.before.disabled === void 0 ? {} : { "browser.target_disabled_before": observation.before.disabled },
+		...observation.after?.disabled === void 0 ? {} : { "browser.target_disabled_after": observation.after.disabled },
+		...observation.before.required === void 0 ? {} : { "browser.target_required_before": observation.before.required },
+		...observation.after?.required === void 0 ? {} : { "browser.target_required_after": observation.after.required },
+		...observation.before.valid === void 0 ? {} : { "browser.target_valid_before": observation.before.valid },
+		...observation.after?.valid === void 0 ? {} : { "browser.target_valid_after": observation.after.valid },
+		...observation.before.formValid === void 0 ? {} : { "browser.form_valid_before": observation.before.formValid },
+		...observation.after?.formValid === void 0 ? {} : { "browser.form_valid_after": observation.after.formValid },
+		"browser.target_after_unavailable": observation.afterUnavailable,
+		"browser.fetch_xhr_total": observation.network.total,
+		"browser.fetch_xhr_2xx": observation.network.status2xx,
+		"browser.fetch_xhr_3xx": observation.network.status3xx,
+		"browser.fetch_xhr_4xx": observation.network.status4xx,
+		"browser.fetch_xhr_5xx": observation.network.status5xx,
+		"browser.fetch_xhr_failed": observation.network.failed,
+		"browser.fetch_xhr_pending": observation.network.pending,
+		"browser.network_settle_timed_out": observation.network.settleTimedOut
+	}));
+	const run = (effect, preflight = Effect.void, consumeAction = true) => permits.withPermitsIfAvailable(1)(Effect.gen(function* () {
 		const unavailable = stateFailure(state);
 		if (unavailable !== void 0) return yield* unavailable;
 		yield* preflight;
-		const admitted = yield* Ref.modify(actions, (count) => count >= policy.maxActions ? [{
-			allowed: false,
-			observed: count + 1
-		}, count] : [{
-			allowed: true,
-			observed: count + 1
-		}, count + 1]);
-		if (!admitted.allowed) return yield* InteractiveBrowserLimitError.make({
-			implementation: browserRunInteractiveImplementation,
-			limit: "actions",
-			maximum: policy.maxActions,
-			observed: admitted.observed,
-			message: "The browser action limit was reached"
-		});
+		if (consumeAction) {
+			const admitted = yield* Ref.modify(actions, (count) => count >= policy.maxActions ? [{
+				allowed: false,
+				observed: count + 1
+			}, count] : [{
+				allowed: true,
+				observed: count + 1
+			}, count + 1]);
+			if (!admitted.allowed) return yield* InteractiveBrowserLimitError.make({
+				implementation: browserRunInteractiveImplementation,
+				limit: "actions",
+				maximum: policy.maxActions,
+				observed: admitted.observed,
+				message: "The browser action limit was reached"
+			});
+		}
 		const completed = effect.pipe(Effect.catch((error) => {
 			const failure = stateFailure(state);
 			return Effect.fail(failure ?? error);
@@ -371,6 +813,7 @@ const makeHandle = Effect.fn("BrowserRunInteractive.makeHandle")(function* (page
 		})), Effect.catch((error) => {
 			if (Schema.is(InteractiveBrowserLimitError)(error) && error.limit === "elapsed") return Effect.fail(error);
 			const failure = stateFailure(state);
+			if (Schema.is(InteractiveBrowserActionError)(error) && !isBrowserRunUndispatchedActionError(error)) state.uncertain.value = true;
 			return Effect.fail(failure ?? error);
 		}));
 	})).pipe(Effect.flatMap((result) => Option.isSome(result) ? Effect.succeed(result.value) : Effect.fail(InteractiveBrowserBusyError.make({
@@ -404,8 +847,16 @@ const makeHandle = Effect.fn("BrowserRunInteractive.makeHandle")(function* (page
 				});
 				return yield* Schema.decodeUnknownEffect(BrowserTextResult)({ text: observation.text }).pipe(Effect.mapError((cause) => protocolError("The browser returned malformed page text", cause)));
 			})),
-			fill: (request) => run(remote("fill", () => page.fill(request.selector, request.value)).pipe(Effect.andThen(decodeActionResult(page, policy)))),
-			click: (request) => run(remote("click", () => page.click(request.selector)).pipe(Effect.andThen(decodeActionResult(page, policy)))),
+			fill: (request) => run(Effect.gen(function* () {
+				const observation = yield* observedAction("fill", (signal, onDispatch) => page.fill(request.selector, request.value, signal, onDispatch)).pipe(Effect.flatMap(decodeActionObservation));
+				yield* logActionObservation("fill", observation);
+				return yield* decodeActionResult(page, policy);
+			})),
+			click: (request) => run(Effect.gen(function* () {
+				const observation = yield* observedAction("click", (signal, onDispatch) => page.click(request.selector, signal, onDispatch)).pipe(Effect.flatMap(decodeActionObservation));
+				yield* logActionObservation("click", observation);
+				return yield* decodeActionResult(page, policy);
+			})),
 			screenshot: (request) => Schema.decodeUnknownEffect(BrowserScreenshotRequest)(request).pipe(Effect.mapError(() => policyError("The browser screenshot request is malformed")), Effect.flatMap((decoded) => run(Effect.gen(function* () {
 				const raw = yield* remote("screenshot", () => page.screenshot(decoded.fullPage));
 				const bytes = yield* Schema.decodeUnknownEffect(PngBytes)(raw).pipe(Effect.mapError(() => protocolError("The browser returned a malformed PNG screenshot")));
@@ -561,6 +1012,16 @@ const makeHostService = (binding) => {
 		return {
 			handle: runtime.handle,
 			sessionId: Redacted.make(sessionIdValue),
+			resizeViewport: (viewport) => decodeViewport(viewport).pipe(Effect.flatMap((decoded) => runtime.run(Effect.tryPromise({
+				try: () => page.setViewport(decoded),
+				catch: (cause) => {
+					if (state.disconnected.value || isRemoteClosure(cause)) {
+						state.disconnected.value = true;
+						return expiredError();
+					}
+					return protocolError("Resizing the browser viewport failed", cause);
+				}
+			}), currentPagePreflight, false))),
 			getLiveView: (request) => Schema.decodeUnknownEffect(BrowserRunLiveViewRequest)(request).pipe(Effect.mapError(() => policyError("The Live View request is malformed")), Effect.flatMap((decoded) => runtime.run(cdpCommand(page, state, "Cloudflare.getLiveView", {
 				mode: decoded.mode,
 				expiresInMs: decoded.expiresInMs
@@ -613,6 +1074,6 @@ const browserRunInteractiveLayer = () => Layer.effect(InteractiveBrowser, Effect
 	return InteractiveBrowser.of({ open: (policy) => host.open(policy).pipe(Effect.map((session) => session.handle)) });
 }));
 //#endregion
-export { BrowserRunHandoffRequest, BrowserRunHandoffResult, BrowserRunHandoffState, BrowserRunInteractiveBinding, BrowserRunInteractiveHost, BrowserRunLiveViewRequest, BrowserRunLiveViewResult, browserRunInteractiveHostLayer, browserRunInteractiveImplementation, browserRunInteractiveLayer };
+export { BrowserRunHandoffRequest, BrowserRunHandoffResult, BrowserRunHandoffState, BrowserRunInteractiveBinding, BrowserRunInteractiveHost, BrowserRunLiveViewRequest, BrowserRunLiveViewResult, BrowserRunViewport, browserRunInteractiveHostLayer, browserRunInteractiveImplementation, browserRunInteractiveLayer, isBrowserRunUndispatchedActionError };
 
 //# sourceMappingURL=interactive-browser.mjs.map