@olimsaidov/icdp 0.3.0 → 0.3.1

package/dist/frame/index.mjs

@@ -24588,23 +24588,6 @@ function wrapConsoleMethod(fn, type) {
 	Object.defineProperty(wrapped, consoleWrapped, { value: true });
 	return wrapped;
 }
-function highlight(el) {
-	const rect = el.getBoundingClientRect();
-	const marker = document.createElement("div");
-	marker.style.cssText = [
-		"position:fixed",
-		`left:${rect.left}px`,
-		`top:${rect.top}px`,
-		`width:${rect.width}px`,
-		`height:${rect.height}px`,
-		"z-index:2147483647",
-		"pointer-events:none",
-		"outline:2px solid #005fb8",
-		"background:rgba(0,95,184,.08)"
-	].join(";");
-	document.documentElement.appendChild(marker);
-	setTimeout(() => marker.remove(), 500);
-}
 function setNativeValue(el, value) {
 	const proto = el instanceof HTMLInputElement ? HTMLInputElement.prototype : HTMLTextAreaElement.prototype;
 	(Object.getOwnPropertyDescriptor(proto, "value")?.set)?.call(el, value);
@@ -24622,7 +24605,6 @@ function canSelectText(el) {
 function insertText(text) {
 	const el = document.activeElement;
 	if (!el) return;
-	highlight(el);
 	if (el instanceof HTMLInputElement && !canSelectText(el)) {
 		setNativeValue(el, text);
 		el.dispatchEvent(new InputEvent("input", {
@@ -24805,16 +24787,35 @@ function getOuterHTML(params) {
 }
 function focusNode(params) {
 	const element = elementForBackendId(Number(params.backendNodeId ?? params.nodeId));
-	if (element instanceof HTMLElement) element.focus();
+	if (element instanceof HTMLElement) element.focus({ preventScroll: true });
 	return {};
 }
 function scrollIntoViewIfNeeded(params) {
-	elementForBackendId(Number(params.backendNodeId ?? params.nodeId)).scrollIntoView({
-		block: "center",
-		inline: "center"
-	});
+	revealWithinFrame(elementForBackendId(Number(params.backendNodeId ?? params.nodeId)));
 	return {};
 }
+/**
+* Bring an element into view by scrolling its own scroll containers and the
+* frame's viewport — never `Element.scrollIntoView`, which cascades across the
+* iframe boundary and yanks the embedding page to re-position the frame. Honours
+* "IfNeeded": a no-op when the element is already on screen, minimal scroll
+* otherwise.
+*/
+function revealWithinFrame(el) {
+	const container = scrollableAncestor(el);
+	if (container instanceof Element && container !== document.scrollingElement) {
+		const c = container.getBoundingClientRect();
+		const r = el.getBoundingClientRect();
+		if (r.top < c.top) container.scrollTop += r.top - c.top;
+		else if (r.bottom > c.bottom) container.scrollTop += r.bottom - c.bottom;
+		if (r.left < c.left) container.scrollLeft += r.left - c.left;
+		else if (r.right > c.right) container.scrollLeft += r.right - c.right;
+	}
+	const r = el.getBoundingClientRect();
+	const dy = r.top < 0 ? r.top : r.bottom > window.innerHeight ? r.bottom - window.innerHeight : 0;
+	const dx = r.left < 0 ? r.left : r.right > window.innerWidth ? r.right - window.innerWidth : 0;
+	if (dx || dy) window.scrollBy(dx, dy);
+}
 function requestChildNodes(params) {
 	const node = registry.nodeForBackendId(Number(params.nodeId));
 	if (!node) throw new Error(`No element for backendDOMNodeId=${params.nodeId}`);
@@ -25074,6 +25075,12 @@ function announce(allowed) {
 function startFrameAgent(options) {
 	if (started || window.parent === window) return;
 	started = true;
+	const revealOnly = function() {
+		revealWithinFrame(this);
+	};
+	Element.prototype.scrollIntoView = revealOnly;
+	const proto = Element.prototype;
+	if (typeof proto.scrollIntoViewIfNeeded === "function") proto.scrollIntoViewIfNeeded = revealOnly;
 	const allowed = options.allowedParents;
 	window.addEventListener("message", (event) => {
 		if (event.source !== window.parent || !isHandshakeMessage(event.data)) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olimsaidov/icdp",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Chrome DevTools Protocol over an iframe boundary: drive and inspect embedded (including cross-origin) apps with CDP tools, without a real browser debugging session.",
   "homepage": "https://github.com/olimsaidov/icdp#readme",
   "bugs": "https://github.com/olimsaidov/icdp/issues",
@@ -45,8 +45,9 @@
   "scripts": {
     "build": "tsdown",
     "check": "tsc --noEmit && oxlint && oxfmt --check .",
-    "docs:build": "vitepress build docs",
-    "docs:dev": "vitepress dev docs",
+    "docs:build": "node docs/scripts/build-demo-frame.mjs && vitepress build docs",
+    "docs:demo-frame": "node docs/scripts/build-demo-frame.mjs",
+    "docs:dev": "node docs/scripts/build-demo-frame.mjs && vitepress dev docs",
     "docs:preview": "vitepress preview docs",
     "fmt": "oxfmt .",
     "gen:conformance": "node scripts/gen-conformance.ts",
@@ -63,9 +64,12 @@
     "ws": "^8.21.0"
   },
   "devDependencies": {
+    "@olimsaidov/agent-browser-wasm": "^0.27.3",
     "@types/aria-query": "^5.0.4",
     "@types/node": "^24",
     "@types/ws": "^8",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
     "jsdom": "^29.1.1",
     "mermaid": "^11.15.0",
     "oxfmt": "^0.54.0",

package/src/frame/index.ts

@@ -382,24 +382,6 @@ function wrapConsoleMethod(fn: ConsoleMethod, type: string): ConsoleMethod {
   return wrapped;
 }
 
-function highlight(el: Element): void {
-  const rect = el.getBoundingClientRect();
-  const marker = document.createElement("div");
-  marker.style.cssText = [
-    "position:fixed",
-    `left:${rect.left}px`,
-    `top:${rect.top}px`,
-    `width:${rect.width}px`,
-    `height:${rect.height}px`,
-    "z-index:2147483647",
-    "pointer-events:none",
-    "outline:2px solid #005fb8",
-    "background:rgba(0,95,184,.08)",
-  ].join(";");
-  document.documentElement.appendChild(marker);
-  setTimeout(() => marker.remove(), 500);
-}
-
 function setNativeValue(el: HTMLInputElement | HTMLTextAreaElement, value: string): void {
   const proto =
     el instanceof HTMLInputElement ? HTMLInputElement.prototype : HTMLTextAreaElement.prototype;
@@ -414,7 +396,6 @@ function canSelectText(el: HTMLInputElement): boolean {
 function insertText(text: string): void {
   const el = document.activeElement as HTMLElement | null;
   if (!el) return;
-  highlight(el);
   if (el instanceof HTMLInputElement && !canSelectText(el)) {
     setNativeValue(el, text);
     el.dispatchEvent(
@@ -665,20 +646,45 @@ function getOuterHTML(params: CdpParams<"DOM.getOuterHTML">): Protocol.DOM.GetOu
 
 function focusNode(params: CdpParams<"DOM.focus">): Record<string, never> {
   const element = elementForBackendId(Number(params.backendNodeId ?? params.nodeId));
-  if (element instanceof HTMLElement) element.focus();
+  // preventScroll: a default focus() scrolls the element into view across every
+  // ancestor — including the embedding page across the iframe boundary, yanking
+  // the host. Revealing the element is scrollIntoViewIfNeeded's job (and it stays
+  // within the frame); focus must not move the parent.
+  if (element instanceof HTMLElement) element.focus({ preventScroll: true });
   return {};
 }
 
 function scrollIntoViewIfNeeded(
   params: CdpParams<"DOM.scrollIntoViewIfNeeded">,
 ): Record<string, never> {
-  elementForBackendId(Number(params.backendNodeId ?? params.nodeId)).scrollIntoView({
-    block: "center",
-    inline: "center",
-  });
+  revealWithinFrame(elementForBackendId(Number(params.backendNodeId ?? params.nodeId)));
   return {};
 }
 
+/**
+ * Bring an element into view by scrolling its own scroll containers and the
+ * frame's viewport — never `Element.scrollIntoView`, which cascades across the
+ * iframe boundary and yanks the embedding page to re-position the frame. Honours
+ * "IfNeeded": a no-op when the element is already on screen, minimal scroll
+ * otherwise.
+ */
+function revealWithinFrame(el: Element): void {
+  const container = scrollableAncestor(el);
+  if (container instanceof Element && container !== document.scrollingElement) {
+    const c = container.getBoundingClientRect();
+    const r = el.getBoundingClientRect();
+    if (r.top < c.top) container.scrollTop += r.top - c.top;
+    else if (r.bottom > c.bottom) container.scrollTop += r.bottom - c.bottom;
+    if (r.left < c.left) container.scrollLeft += r.left - c.left;
+    else if (r.right > c.right) container.scrollLeft += r.right - c.right;
+  }
+  // window.scrollBy scrolls this frame's own document, not the parent's.
+  const r = el.getBoundingClientRect();
+  const dy = r.top < 0 ? r.top : r.bottom > window.innerHeight ? r.bottom - window.innerHeight : 0;
+  const dx = r.left < 0 ? r.left : r.right > window.innerWidth ? r.right - window.innerWidth : 0;
+  if (dx || dy) window.scrollBy(dx, dy);
+}
+
 function requestChildNodes(params: CdpParams<"DOM.requestChildNodes">): Record<string, never> {
   const node = registry.nodeForBackendId(Number(params.nodeId));
   if (!node) throw new Error(`No element for backendDOMNodeId=${params.nodeId}`);
@@ -1022,6 +1028,19 @@ export function startFrameAgent(options: FrameAgentOptions): void {
   if (started || window.parent === window) return;
   started = true;
 
+  // The embedded app shipped this agent to be automated, and automation must
+  // never scroll the *host* page. Element.scrollIntoView cascades across the
+  // iframe boundary — it scrolls every scrollable ancestor, including the
+  // embedding document — and agent-browser evals it to position elements before
+  // clicking. Replace it (and the legacy scrollIntoViewIfNeeded) with a
+  // frame-local reveal so commands move the frame, never the page around it.
+  const revealOnly = function (this: Element): void {
+    revealWithinFrame(this);
+  };
+  Element.prototype.scrollIntoView = revealOnly as Element["scrollIntoView"];
+  const proto = Element.prototype as Element & { scrollIntoViewIfNeeded?: () => void };
+  if (typeof proto.scrollIntoViewIfNeeded === "function") proto.scrollIntoViewIfNeeded = revealOnly;
+
   const allowed = options.allowedParents;
 
   window.addEventListener("message", (event) => {