page-agent 0.0.6 → 0.0.7

package/dist/lib/page-agent.js

@@ -10,30 +10,320 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-var __defProp = Object.defineProperty;
+var __defProp2 = Object.defineProperty;
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name2 = (target, value) => __defProp2(target, "name", { value, configurable: true });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _bus, _wrapper, _indicator, _statusText, _historySection, _expandButton, _pauseButton, _stopButton, _inputSection, _taskInput, _bus2, _state, _isExpanded, _pageAgent, _userAnswerResolver, _isWaitingForUserAnswer, _headerUpdateTimer, _pendingHeaderText, _isAnimating, _Panel_instances, update_fn, show_fn, hide_fn, reset_fn, togglePause_fn, updatePauseButton_fn, stopAgent_fn, submitTask_fn, handleUserAnswer_fn, showInputArea_fn, hideInputArea_fn, shouldShowInputArea_fn, createWrapper_fn, setupEventListeners_fn, toggle_fn, expand_fn, collapse_fn, startHeaderUpdateLoop_fn, stopHeaderUpdateLoop_fn, checkAndUpdateHeader_fn, animateTextChange_fn, updateStatusIndicator_fn, updateHistory_fn, scrollToBottom_fn, createHistoryItem_fn, _cursor, _currentCursorX, _currentCursorY, _targetCursorX, _targetCursorY, _SimulatorMask_instances, createCursor_fn, moveCursorToTarget_fn, _llm, _totalWaitTime, _abortController, _PageAgent_instances, packMacroTool_fn, getSystemPrompt_fn, assembleUserPrompt_fn, onDone_fn, getBrowserState_fn, updateTree_fn;
+var __PageController, _bus, _wrapper, _indicator, _statusText, _historySection, _expandButton, _pauseButton, _stopButton, _inputSection, _taskInput, _bus2, _state, _isExpanded, _pageAgent, _userAnswerResolver, _isWaitingForUserAnswer, _headerUpdateTimer, _pendingHeaderText, _isAnimating, _Panel_instances, update_fn, show_fn, hide_fn, reset_fn, togglePause_fn, updatePauseButton_fn, stopAgent_fn, submitTask_fn, handleUserAnswer_fn, showInputArea_fn, hideInputArea_fn, shouldShowInputArea_fn, createWrapper_fn, setupEventListeners_fn, toggle_fn, expand_fn, collapse_fn, startHeaderUpdateLoop_fn, stopHeaderUpdateLoop_fn, checkAndUpdateHeader_fn, animateTextChange_fn, updateStatusIndicator_fn, updateHistory_fn, scrollToBottom_fn, createHistoryItem_fn, _cursor, _currentCursorX, _currentCursorY, _targetCursorX, _targetCursorY, _SimulatorMask_instances, createCursor_fn, moveCursorToTarget_fn, _llm, _totalWaitTime, _abortController, _PageAgent_instances, packMacroTool_fn, getSystemPrompt_fn, assembleUserPrompt_fn, onDone_fn, getBrowserState_fn;
 import chalk from "chalk";
 import zod, { z } from "zod";
 import { Motion } from "ai-motion";
+var __defProp = Object.defineProperty;
+var __name = /* @__PURE__ */ __name2((target, value) => __defProp(target, "name", { value, configurable: true }), "__name");
+async function waitFor$1(seconds) {
+  await new Promise((resolve) => setTimeout(resolve, seconds * 1e3));
+}
+__name2(waitFor$1, "waitFor$1");
+__name(waitFor$1, "waitFor");
+async function movePointerToElement(element) {
+  const rect = element.getBoundingClientRect();
+  const x = rect.left + rect.width / 2;
+  const y = rect.top + rect.height / 2;
+  window.dispatchEvent(new CustomEvent("PageAgent::MovePointerTo", { detail: { x, y } }));
+  await waitFor$1(0.3);
+}
+__name2(movePointerToElement, "movePointerToElement");
+__name(movePointerToElement, "movePointerToElement");
+function getElementByIndex(selectorMap, index) {
+  const interactiveNode = selectorMap.get(index);
+  if (!interactiveNode) {
+    throw new Error(`No interactive element found at index ${index}`);
+  }
+  const element = interactiveNode.ref;
+  if (!element) {
+    throw new Error(`Element at index ${index} does not have a reference`);
+  }
+  if (!(element instanceof HTMLElement)) {
+    throw new Error(`Element at index ${index} is not an HTMLElement`);
+  }
+  return element;
+}
+__name2(getElementByIndex, "getElementByIndex");
+__name(getElementByIndex, "getElementByIndex");
+let lastClickedElement = null;
+function blurLastClickedElement() {
+  if (lastClickedElement) {
+    lastClickedElement.blur();
+    lastClickedElement.dispatchEvent(
+      new MouseEvent("mouseout", { bubbles: true, cancelable: true })
+    );
+    lastClickedElement = null;
+  }
+}
+__name2(blurLastClickedElement, "blurLastClickedElement");
+__name(blurLastClickedElement, "blurLastClickedElement");
+async function clickElement(element) {
+  blurLastClickedElement();
+  lastClickedElement = element;
+  await scrollIntoViewIfNeeded(element);
+  await movePointerToElement(element);
+  window.dispatchEvent(new CustomEvent("PageAgent::ClickPointer"));
+  await waitFor$1(0.1);
+  element.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true, cancelable: true }));
+  element.dispatchEvent(new MouseEvent("mouseover", { bubbles: true, cancelable: true }));
+  element.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+  element.focus();
+  element.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true }));
+  element.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  await waitFor$1(0.1);
+}
+__name2(clickElement, "clickElement");
+__name(clickElement, "clickElement");
+const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+  window.HTMLInputElement.prototype,
+  "value"
+).set;
+const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
+  window.HTMLTextAreaElement.prototype,
+  "value"
+).set;
+async function inputTextElement(element, text) {
+  if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
+    throw new Error("Element is not an input or textarea");
+  }
+  await clickElement(element);
+  if (element instanceof HTMLTextAreaElement) {
+    nativeTextAreaValueSetter.call(element, text);
+  } else {
+    nativeInputValueSetter.call(element, text);
+  }
+  const inputEvent = new Event("input", { bubbles: true });
+  element.dispatchEvent(inputEvent);
+  await waitFor$1(0.1);
+  blurLastClickedElement();
+}
+__name2(inputTextElement, "inputTextElement");
+__name(inputTextElement, "inputTextElement");
+async function selectOptionElement(selectElement, optionText) {
+  if (!(selectElement instanceof HTMLSelectElement)) {
+    throw new Error("Element is not a select element");
+  }
+  const options = Array.from(selectElement.options);
+  const option = options.find((opt) => opt.textContent?.trim() === optionText.trim());
+  if (!option) {
+    throw new Error(`Option with text "${optionText}" not found in select element`);
+  }
+  selectElement.value = option.value;
+  selectElement.dispatchEvent(new Event("change", { bubbles: true }));
+  await waitFor$1(0.1);
+}
+__name2(selectOptionElement, "selectOptionElement");
+__name(selectOptionElement, "selectOptionElement");
+async function scrollIntoViewIfNeeded(element) {
+  const el = element;
+  if (el.scrollIntoViewIfNeeded) {
+    el.scrollIntoViewIfNeeded();
+  } else {
+    el.scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
+  }
+}
+__name2(scrollIntoViewIfNeeded, "scrollIntoViewIfNeeded");
+__name(scrollIntoViewIfNeeded, "scrollIntoViewIfNeeded");
+async function scrollVertically(down, scroll_amount, element) {
+  if (element) {
+    const targetElement = element;
+    console.log(
+      "[SCROLL DEBUG] Starting direct container scroll for element:",
+      targetElement.tagName
+    );
+    let currentElement = targetElement;
+    let scrollSuccess = false;
+    let scrolledElement = null;
+    let scrollDelta = 0;
+    let attempts = 0;
+    const dy2 = scroll_amount;
+    while (currentElement && attempts < 10) {
+      const computedStyle = window.getComputedStyle(currentElement);
+      const hasScrollableY = /(auto|scroll|overlay)/.test(computedStyle.overflowY);
+      const canScrollVertically = currentElement.scrollHeight > currentElement.clientHeight;
+      console.log(
+        "[SCROLL DEBUG] Checking element:",
+        currentElement.tagName,
+        "hasScrollableY:",
+        hasScrollableY,
+        "canScrollVertically:",
+        canScrollVertically,
+        "scrollHeight:",
+        currentElement.scrollHeight,
+        "clientHeight:",
+        currentElement.clientHeight
+      );
+      if (hasScrollableY && canScrollVertically) {
+        const beforeScroll = currentElement.scrollTop;
+        const maxScroll = currentElement.scrollHeight - currentElement.clientHeight;
+        let scrollAmount = dy2 / 3;
+        if (scrollAmount > 0) {
+          scrollAmount = Math.min(scrollAmount, maxScroll - beforeScroll);
+        } else {
+          scrollAmount = Math.max(scrollAmount, -beforeScroll);
+        }
+        currentElement.scrollTop = beforeScroll + scrollAmount;
+        const afterScroll = currentElement.scrollTop;
+        const actualScrollDelta = afterScroll - beforeScroll;
+        console.log(
+          "[SCROLL DEBUG] Scroll attempt:",
+          currentElement.tagName,
+          "before:",
+          beforeScroll,
+          "after:",
+          afterScroll,
+          "delta:",
+          actualScrollDelta
+        );
+        if (Math.abs(actualScrollDelta) > 0.5) {
+          scrollSuccess = true;
+          scrolledElement = currentElement;
+          scrollDelta = actualScrollDelta;
+          console.log(
+            "[SCROLL DEBUG] Successfully scrolled container:",
+            currentElement.tagName,
+            "delta:",
+            actualScrollDelta
+          );
+          break;
+        }
+      }
+      if (currentElement === document.body || currentElement === document.documentElement) {
+        break;
+      }
+      currentElement = currentElement.parentElement;
+      attempts++;
+    }
+    if (scrollSuccess) {
+      return `Scrolled container (${scrolledElement?.tagName}) by ${scrollDelta}px`;
+    } else {
+      return `No scrollable container found for element (${targetElement.tagName})`;
+    }
+  }
+  const dy = scroll_amount;
+  const bigEnough = /* @__PURE__ */ __name((el2) => el2.clientHeight >= window.innerHeight * 0.5, "bigEnough");
+  const canScroll = /* @__PURE__ */ __name((el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowY) && el2.scrollHeight > el2.clientHeight && bigEnough(el2), "canScroll");
+  let el = document.activeElement;
+  while (el && !canScroll(el) && el !== document.body) el = el.parentElement;
+  el = canScroll(el) ? el : Array.from(document.querySelectorAll("*")).find(canScroll) || document.scrollingElement || document.documentElement;
+  if (el === document.scrollingElement || el === document.documentElement || el === document.body) {
+    window.scrollBy(0, dy);
+    return `✅ Scrolled page by ${dy}px.`;
+  } else {
+    el.scrollBy({ top: dy, behavior: "smooth" });
+    await waitFor$1(0.1);
+    return `✅ Scrolled container (${el.tagName}) by ${dy}px.`;
+  }
+}
+__name2(scrollVertically, "scrollVertically");
+__name(scrollVertically, "scrollVertically");
+async function scrollHorizontally(right, scroll_amount, element) {
+  if (element) {
+    const targetElement = element;
+    console.log(
+      "[SCROLL DEBUG] Starting direct container scroll for element:",
+      targetElement.tagName
+    );
+    let currentElement = targetElement;
+    let scrollSuccess = false;
+    let scrolledElement = null;
+    let scrollDelta = 0;
+    let attempts = 0;
+    const dx2 = right ? scroll_amount : -scroll_amount;
+    while (currentElement && attempts < 10) {
+      const computedStyle = window.getComputedStyle(currentElement);
+      const hasScrollableX = /(auto|scroll|overlay)/.test(computedStyle.overflowX);
+      const canScrollHorizontally = currentElement.scrollWidth > currentElement.clientWidth;
+      console.log(
+        "[SCROLL DEBUG] Checking element:",
+        currentElement.tagName,
+        "hasScrollableX:",
+        hasScrollableX,
+        "canScrollHorizontally:",
+        canScrollHorizontally,
+        "scrollWidth:",
+        currentElement.scrollWidth,
+        "clientWidth:",
+        currentElement.clientWidth
+      );
+      if (hasScrollableX && canScrollHorizontally) {
+        const beforeScroll = currentElement.scrollLeft;
+        const maxScroll = currentElement.scrollWidth - currentElement.clientWidth;
+        let scrollAmount = dx2 / 3;
+        if (scrollAmount > 0) {
+          scrollAmount = Math.min(scrollAmount, maxScroll - beforeScroll);
+        } else {
+          scrollAmount = Math.max(scrollAmount, -beforeScroll);
+        }
+        currentElement.scrollLeft = beforeScroll + scrollAmount;
+        const afterScroll = currentElement.scrollLeft;
+        const actualScrollDelta = afterScroll - beforeScroll;
+        console.log(
+          "[SCROLL DEBUG] Scroll attempt:",
+          currentElement.tagName,
+          "before:",
+          beforeScroll,
+          "after:",
+          afterScroll,
+          "delta:",
+          actualScrollDelta
+        );
+        if (Math.abs(actualScrollDelta) > 0.5) {
+          scrollSuccess = true;
+          scrolledElement = currentElement;
+          scrollDelta = actualScrollDelta;
+          console.log(
+            "[SCROLL DEBUG] Successfully scrolled container:",
+            currentElement.tagName,
+            "delta:",
+            actualScrollDelta
+          );
+          break;
+        }
+      }
+      if (currentElement === document.body || currentElement === document.documentElement) {
+        break;
+      }
+      currentElement = currentElement.parentElement;
+      attempts++;
+    }
+    if (scrollSuccess) {
+      return `Scrolled container (${scrolledElement?.tagName}) horizontally by ${scrollDelta}px`;
+    } else {
+      return `No horizontally scrollable container found for element (${targetElement.tagName})`;
+    }
+  }
+  const dx = right ? scroll_amount : -scroll_amount;
+  const bigEnough = /* @__PURE__ */ __name((el2) => el2.clientWidth >= window.innerWidth * 0.5, "bigEnough");
+  const canScroll = /* @__PURE__ */ __name((el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowX) && el2.scrollWidth > el2.clientWidth && bigEnough(el2), "canScroll");
+  let el = document.activeElement;
+  while (el && !canScroll(el) && el !== document.body) el = el.parentElement;
+  el = canScroll(el) ? el : Array.from(document.querySelectorAll("*")).find(canScroll) || document.scrollingElement || document.documentElement;
+  if (el === document.scrollingElement || el === document.documentElement || el === document.body) {
+    window.scrollBy(dx, 0);
+    return `✅ Scrolled page horizontally by ${dx}px`;
+  } else {
+    el.scrollBy({ left: dx, behavior: "smooth" });
+    await waitFor$1(0.1);
+    return `✅ Scrolled container (${el.tagName}) horizontally by ${dx}px`;
+  }
+}
+__name2(scrollHorizontally, "scrollHorizontally");
+__name(scrollHorizontally, "scrollHorizontally");
 const VIEWPORT_EXPANSION = -1;
-const DEFAULT_MODEL_NAME = "PAGE-AGENT-FREE-TESTING-RANDOM";
-const DEFAULT_API_KEY = "PAGE-AGENT-FREE-TESTING-RANDOM";
-const DEFAULT_BASE_URL = "https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy";
-const LLM_MAX_RETRIES = 2;
-const MAX_STEPS = 20;
-const DEFAULT_TEMPERATURE = 0.7;
-const DEFAULT_MAX_TOKENS = 4096;
 const domTree = /* @__PURE__ */ __name((args = {
   doHighlightElements: true,
   focusHighlightIndex: -1,
@@ -57,6 +347,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
     extraData.set(element, { ...extraData.get(element), ...data });
   }
+  __name2(addExtraData, "addExtraData");
   __name(addExtraData, "addExtraData");
   const DOM_CACHE = {
     boundingRects: /* @__PURE__ */ new WeakMap(),
@@ -79,6 +370,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return rect;
   }
+  __name2(getCachedBoundingRect, "getCachedBoundingRect");
   __name(getCachedBoundingRect, "getCachedBoundingRect");
   function getCachedComputedStyle(element) {
     if (!element) return null;
@@ -91,6 +383,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return style;
   }
+  __name2(getCachedComputedStyle, "getCachedComputedStyle");
   __name(getCachedComputedStyle, "getCachedComputedStyle");
   function getCachedClientRects(element) {
     if (!element) return null;
@@ -103,6 +396,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return rects;
   }
+  __name2(getCachedClientRects, "getCachedClientRects");
   __name(getCachedClientRects, "getCachedClientRects");
   const DOM_HASH_MAP = {};
   const ID = { current: 0 };
@@ -274,6 +568,7 @@ const domTree = /* @__PURE__ */ __name((args = {
       }
     }
   }
+  __name2(highlightElement, "highlightElement");
   __name(highlightElement, "highlightElement");
   function isScrollableElement(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
@@ -320,6 +615,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     });
     return scrollData;
   }
+  __name2(isScrollableElement, "isScrollableElement");
   __name(isScrollableElement, "isScrollableElement");
   function isTextNodeVisible(textNode) {
     try {
@@ -372,6 +668,7 @@ const domTree = /* @__PURE__ */ __name((args = {
       return false;
     }
   }
+  __name2(isTextNodeVisible, "isTextNodeVisible");
   __name(isTextNodeVisible, "isTextNodeVisible");
   function isElementAccepted(element) {
     if (!element || !element.tagName) return false;
@@ -398,11 +695,13 @@ const domTree = /* @__PURE__ */ __name((args = {
     ]);
     return !leafElementDenyList.has(tagName);
   }
+  __name2(isElementAccepted, "isElementAccepted");
   __name(isElementAccepted, "isElementAccepted");
   function isElementVisible(element) {
     const style = getCachedComputedStyle(element);
     return element.offsetWidth > 0 && element.offsetHeight > 0 && style?.visibility !== "hidden" && style?.display !== "none";
   }
+  __name2(isElementVisible, "isElementVisible");
   __name(isElementVisible, "isElementVisible");
   function isInteractiveElement(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
@@ -499,6 +798,7 @@ const domTree = /* @__PURE__ */ __name((args = {
       if (style?.cursor && interactiveCursors.has(style.cursor)) return true;
       return false;
     }
+    __name2(doesElementHaveInteractivePointer, "doesElementHaveInteractivePointer");
     __name(doesElementHaveInteractivePointer, "doesElementHaveInteractivePointer");
     let isInteractiveCursor = doesElementHaveInteractivePointer(element);
     if (isInteractiveCursor) {
@@ -659,6 +959,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return false;
   }
+  __name2(isInteractiveElement, "isInteractiveElement");
   __name(isInteractiveElement, "isInteractiveElement");
   function isTopElement(element) {
     if (viewportExpansion === -1) {
@@ -730,6 +1031,7 @@ const domTree = /* @__PURE__ */ __name((args = {
       }
     });
   }
+  __name2(isTopElement, "isTopElement");
   __name(isTopElement, "isTopElement");
   function isInExpandedViewport(element, viewportExpansion2) {
     if (viewportExpansion2 === -1) {
@@ -751,6 +1053,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return false;
   }
+  __name2(isInExpandedViewport, "isInExpandedViewport");
   __name(isInExpandedViewport, "isInExpandedViewport");
   function isInteractiveCandidate(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;
@@ -769,6 +1072,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     const hasQuickInteractiveAttr = element.hasAttribute("onclick") || element.hasAttribute("role") || element.hasAttribute("tabindex") || element.hasAttribute("aria-") || element.hasAttribute("data-action") || element.getAttribute("contenteditable") === "true";
     return hasQuickInteractiveAttr;
   }
+  __name2(isInteractiveCandidate, "isInteractiveCandidate");
   __name(isInteractiveCandidate, "isInteractiveCandidate");
   const DISTINCT_INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
     "a",
@@ -814,6 +1118,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     const isParentBody = element.parentElement && element.parentElement.isSameNode(document.body);
     return (isInteractiveElement(element) || hasInteractiveAttributes || hasInteractiveClass) && hasVisibleChildren && isInKnownContainer && !isParentBody;
   }
+  __name2(isHeuristicallyInteractive, "isHeuristicallyInteractive");
   __name(isHeuristicallyInteractive, "isHeuristicallyInteractive");
   function isElementDistinctInteraction(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
@@ -884,6 +1189,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return false;
   }
+  __name2(isElementDistinctInteraction, "isElementDistinctInteraction");
   __name(isElementDistinctInteraction, "isElementDistinctInteraction");
   function handleHighlighting(nodeData, node, parentIframe, isParentHighlighted) {
     if (!nodeData.isInteractive) return false;
@@ -915,6 +1221,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return false;
   }
+  __name2(handleHighlighting, "handleHighlighting");
   __name(handleHighlighting, "handleHighlighting");
   function buildDomTree(node, parentIframe = null, isParentHighlighted = false) {
     if (!node || node.id === HIGHLIGHT_CONTAINER_ID || node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.TEXT_NODE) {
@@ -1052,6 +1359,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     DOM_HASH_MAP[id] = nodeData;
     return id;
   }
+  __name2(buildDomTree, "buildDomTree");
   __name(buildDomTree, "buildDomTree");
   const rootId = buildDomTree(document.body);
   DOM_CACHE.clearCache();
@@ -1085,19 +1393,20 @@ function getFlatTree(config) {
     highlightOpacity: config.highlightOpacity ?? 0,
     highlightLabelOpacity: config.highlightLabelOpacity ?? 0.1
   });
-  const currentUrl2 = window.location.href;
+  const currentUrl = window.location.href;
   for (const nodeId in elements.map) {
     const node = elements.map[nodeId];
     if (node.isInteractive && node.ref) {
       const ref = node.ref;
       if (!newElementsCache.has(ref)) {
-        newElementsCache.set(ref, currentUrl2);
+        newElementsCache.set(ref, currentUrl);
         node.isNew = true;
       }
     }
   }
   return elements;
 }
+__name2(getFlatTree, "getFlatTree");
 __name(getFlatTree, "getFlatTree");
 function flatTreeToString(flatTree, include_attributes) {
   const DEFAULT_INCLUDE_ATTRIBUTES = [
@@ -1282,6 +1591,7 @@ function flatTreeToString(flatTree, include_attributes) {
   processNode(rootNode, 0, result2);
   return result2.join("\n");
 }
+__name2(flatTreeToString, "flatTreeToString");
 __name(flatTreeToString, "flatTreeToString");
 const getAllTextTillNextClickableElement = /* @__PURE__ */ __name((node, maxDepth = -1) => {
   const textParts = [];
@@ -1314,6 +1624,7 @@ function getSelectorMap(flatTree) {
   }
   return selectorMap;
 }
+__name2(getSelectorMap, "getSelectorMap");
 __name(getSelectorMap, "getSelectorMap");
 function getElementTextMap(simplifiedHTML) {
   const lines = simplifiedHTML.split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
@@ -1328,6 +1639,7 @@ function getElementTextMap(simplifiedHTML) {
   }
   return elementTextMap;
 }
+__name2(getElementTextMap, "getElementTextMap");
 __name(getElementTextMap, "getElementTextMap");
 function cleanUpHighlights() {
   const cleanupFunctions = window._highlightCleanupFunctions || [];
@@ -1338,6 +1650,7 @@ function cleanUpHighlights() {
   }
   window._highlightCleanupFunctions = [];
 }
+__name2(cleanUpHighlights, "cleanUpHighlights");
 __name(cleanUpHighlights, "cleanUpHighlights");
 window.addEventListener("popstate", () => {
   cleanUpHighlights();
@@ -1354,47 +1667,304 @@ if (navigation && typeof navigation.addEventListener === "function") {
     cleanUpHighlights();
   });
 } else {
-  let currentUrl2 = window.location.href;
+  let currentUrl = window.location.href;
   setInterval(() => {
-    if (window.location.href !== currentUrl2) {
-      currentUrl2 = window.location.href;
+    if (window.location.href !== currentUrl) {
+      currentUrl = window.location.href;
       cleanUpHighlights();
     }
-  }, 500);
-}
-function getPageInfo() {
-  const viewport_width = window.innerWidth;
-  const viewport_height = window.innerHeight;
-  const page_width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth || 0);
-  const page_height = Math.max(
-    document.documentElement.scrollHeight,
-    document.body.scrollHeight || 0
-  );
-  const scroll_x = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft || 0;
-  const scroll_y = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || 0;
-  const pixels_below = Math.max(0, page_height - (window.innerHeight + scroll_y));
-  const pixels_right = Math.max(0, page_width - (window.innerWidth + scroll_x));
-  return {
-    // Current viewport dimensions
-    viewport_width,
-    viewport_height,
-    // Total page dimensions
-    page_width,
-    page_height,
-    // Current scroll position
-    scroll_x,
-    scroll_y,
-    pixels_above: scroll_y,
-    pixels_below,
-    pages_above: viewport_height > 0 ? scroll_y / viewport_height : 0,
-    pages_below: viewport_height > 0 ? pixels_below / viewport_height : 0,
-    total_pages: viewport_height > 0 ? page_height / viewport_height : 0,
-    current_page_position: scroll_y / Math.max(1, page_height - viewport_height),
-    pixels_left: scroll_x,
-    pixels_right
-  };
-}
-__name(getPageInfo, "getPageInfo");
+  }, 500);
+}
+function getPageInfo() {
+  const viewport_width = window.innerWidth;
+  const viewport_height = window.innerHeight;
+  const page_width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth || 0);
+  const page_height = Math.max(
+    document.documentElement.scrollHeight,
+    document.body.scrollHeight || 0
+  );
+  const scroll_x = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft || 0;
+  const scroll_y = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || 0;
+  const pixels_below = Math.max(0, page_height - (window.innerHeight + scroll_y));
+  const pixels_right = Math.max(0, page_width - (window.innerWidth + scroll_x));
+  return {
+    // Current viewport dimensions
+    viewport_width,
+    viewport_height,
+    // Total page dimensions
+    page_width,
+    page_height,
+    // Current scroll position
+    scroll_x,
+    scroll_y,
+    pixels_above: scroll_y,
+    pixels_below,
+    pages_above: viewport_height > 0 ? scroll_y / viewport_height : 0,
+    pages_below: viewport_height > 0 ? pixels_below / viewport_height : 0,
+    total_pages: viewport_height > 0 ? page_height / viewport_height : 0,
+    current_page_position: scroll_y / Math.max(1, page_height - viewport_height),
+    pixels_left: scroll_x,
+    pixels_right
+  };
+}
+__name2(getPageInfo, "getPageInfo");
+__name(getPageInfo, "getPageInfo");
+function patchReact(pageController) {
+  const reactRootElements = document.querySelectorAll(
+    '[data-reactroot], [data-reactid], [data-react-checksum], #root, #app, [id^="root-"], [id^="app-"], #adex-wrapper, #adex-root'
+  );
+  for (const element of reactRootElements) {
+    element.setAttribute("data-page-agent-not-interactive", "true");
+  }
+}
+__name2(patchReact, "patchReact");
+__name(patchReact, "patchReact");
+const _PageController = (__PageController = class extends EventTarget {
+  config;
+  /** Corresponds to eval_page in browser-use */
+  flatTree = null;
+  /**
+   * All highlighted index-mapped interactive elements
+   * Corresponds to DOMState.selector_map in browser-use
+   */
+  selectorMap = /* @__PURE__ */ new Map();
+  /** Index -> element text description mapping */
+  elementTextMap = /* @__PURE__ */ new Map();
+  /**
+   * Simplified HTML for LLM consumption.
+   * Corresponds to clickable_elements_to_string in browser-use
+   */
+  simplifiedHTML = "<EMPTY>";
+  /** last time the tree was updated */
+  lastTimeUpdate = 0;
+  constructor(config = {}) {
+    super();
+    this.config = config;
+    patchReact();
+  }
+  // ======= State Queries =======
+  /**
+   * Get current page URL
+   */
+  async getCurrentUrl() {
+    return window.location.href;
+  }
+  /**
+   * Get current page title
+   */
+  async getPageTitle() {
+    return document.title;
+  }
+  /**
+   * Get page scroll and size info
+   */
+  async getPageInfo() {
+    return getPageInfo();
+  }
+  /**
+   * Get the simplified HTML representation of the page.
+   * This is used by LLM to understand the page structure.
+   */
+  async getSimplifiedHTML() {
+    return this.simplifiedHTML;
+  }
+  /**
+   * Get text description for an element by index
+   */
+  async getElementText(index) {
+    return this.elementTextMap.get(index);
+  }
+  /**
+   * Get total number of indexed interactive elements
+   */
+  async getElementCount() {
+    return this.selectorMap.size;
+  }
+  /**
+   * Get last tree update timestamp
+   */
+  async getLastUpdateTime() {
+    return this.lastTimeUpdate;
+  }
+  /**
+   * Get the viewport expansion setting
+   */
+  async getViewportExpansion() {
+    return this.config.viewportExpansion ?? VIEWPORT_EXPANSION;
+  }
+  // ======= DOM Tree Operations =======
+  /**
+   * Update DOM tree, returns simplified HTML for LLM.
+   * This is the main method to refresh the page state.
+   */
+  async updateTree() {
+    this.dispatchEvent(new Event("beforeUpdate"));
+    this.lastTimeUpdate = Date.now();
+    cleanUpHighlights();
+    const blacklist = [
+      ...this.config.interactiveBlacklist || [],
+      ...document.querySelectorAll("[data-page-agent-not-interactive]").values()
+    ];
+    this.flatTree = getFlatTree({
+      ...this.config,
+      interactiveBlacklist: blacklist
+    });
+    this.simplifiedHTML = flatTreeToString(this.flatTree, this.config.include_attributes);
+    this.selectorMap.clear();
+    this.selectorMap = getSelectorMap(this.flatTree);
+    this.elementTextMap.clear();
+    this.elementTextMap = getElementTextMap(this.simplifiedHTML);
+    this.dispatchEvent(new Event("afterUpdate"));
+    return this.simplifiedHTML;
+  }
+  /**
+   * Clean up all element highlights
+   */
+  async cleanUpHighlights() {
+    cleanUpHighlights();
+  }
+  // ======= Element Actions =======
+  /**
+   * Click element by index
+   */
+  async clickElement(index) {
+    try {
+      const element = getElementByIndex(this.selectorMap, index);
+      const elemText = this.elementTextMap.get(index);
+      await clickElement(element);
+      if (element instanceof HTMLAnchorElement && element.target === "_blank") {
+        return {
+          success: true,
+          message: `✅ Clicked element (${elemText ?? index}). ⚠️ Link opens in a new tab. You are not capable of reading new tabs.`
+        };
+      }
+      return {
+        success: true,
+        message: `✅ Clicked element (${elemText ?? index}).`
+      };
+    } catch (error2) {
+      return {
+        success: false,
+        message: `❌ Failed to click element: ${error2}`
+      };
+    }
+  }
+  /**
+   * Input text into element by index
+   */
+  async inputText(index, text) {
+    try {
+      const element = getElementByIndex(this.selectorMap, index);
+      const elemText = this.elementTextMap.get(index);
+      await inputTextElement(element, text);
+      return {
+        success: true,
+        message: `✅ Input text (${text}) into element (${elemText ?? index}).`
+      };
+    } catch (error2) {
+      return {
+        success: false,
+        message: `❌ Failed to input text: ${error2}`
+      };
+    }
+  }
+  /**
+   * Select dropdown option by index and option text
+   */
+  async selectOption(index, optionText) {
+    try {
+      const element = getElementByIndex(this.selectorMap, index);
+      const elemText = this.elementTextMap.get(index);
+      await selectOptionElement(element, optionText);
+      return {
+        success: true,
+        message: `✅ Selected option (${optionText}) in element (${elemText ?? index}).`
+      };
+    } catch (error2) {
+      return {
+        success: false,
+        message: `❌ Failed to select option: ${error2}`
+      };
+    }
+  }
+  /**
+   * Scroll vertically
+   */
+  async scroll(options) {
+    try {
+      const { down, numPages, pixels, index } = options;
+      const scrollAmount = pixels ?? numPages * (down ? 1 : -1) * window.innerHeight;
+      const element = index !== void 0 ? getElementByIndex(this.selectorMap, index) : null;
+      const message = await scrollVertically(down, scrollAmount, element);
+      return {
+        success: true,
+        message
+      };
+    } catch (error2) {
+      return {
+        success: false,
+        message: `❌ Failed to scroll: ${error2}`
+      };
+    }
+  }
+  /**
+   * Scroll horizontally
+   */
+  async scrollHorizontally(options) {
+    try {
+      const { right, pixels, index } = options;
+      const scrollAmount = pixels * (right ? 1 : -1);
+      const element = index !== void 0 ? getElementByIndex(this.selectorMap, index) : null;
+      const message = await scrollHorizontally(right, scrollAmount, element);
+      return {
+        success: true,
+        message
+      };
+    } catch (error2) {
+      return {
+        success: false,
+        message: `❌ Failed to scroll horizontally: ${error2}`
+      };
+    }
+  }
+  /**
+   * Execute arbitrary JavaScript on the page
+   */
+  async executeJavascript(script) {
+    try {
+      const asyncFunction = eval(`(async () => { ${script} })`);
+      const result = await asyncFunction();
+      return {
+        success: true,
+        message: `✅ Executed JavaScript. Result: ${result}`
+      };
+    } catch (error2) {
+      return {
+        success: false,
+        message: `❌ Error executing JavaScript: ${error2}`
+      };
+    }
+  }
+  /**
+   * Dispose and clean up resources
+   */
+  dispose() {
+    cleanUpHighlights();
+    this.flatTree = null;
+    this.selectorMap.clear();
+    this.elementTextMap.clear();
+    this.simplifiedHTML = "<EMPTY>";
+  }
+}, __name2(__PageController, "_PageController"), __PageController);
+__name(_PageController, "PageController");
+let PageController = _PageController;
+const DEFAULT_MODEL_NAME = "PAGE-AGENT-FREE-TESTING-RANDOM";
+const DEFAULT_API_KEY = "PAGE-AGENT-FREE-TESTING-RANDOM";
+const DEFAULT_BASE_URL = "https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy";
+const LLM_MAX_RETRIES = 2;
+const MAX_STEPS = 20;
+const DEFAULT_TEMPERATURE = 0.7;
+const DEFAULT_MAX_TOKENS = 4096;
 const enUS = {
   ui: {
     panel: {
@@ -1526,7 +2096,7 @@ const _I18n = class _I18n {
     return this.language;
   }
 };
-__name(_I18n, "I18n");
+__name2(_I18n, "I18n");
 let I18n = _I18n;
 function parseLLMConfig(config) {
   return {
@@ -1538,13 +2108,13 @@ function parseLLMConfig(config) {
     maxRetries: config.maxRetries ?? LLM_MAX_RETRIES
   };
 }
-__name(parseLLMConfig, "parseLLMConfig");
+__name2(parseLLMConfig, "parseLLMConfig");
 const _EventBus = class _EventBus extends EventTarget {
   /**
    * Listen to built-in events
    */
   on(event, handler) {
-    const wrappedHandler = /* @__PURE__ */ __name((e) => {
+    const wrappedHandler = /* @__PURE__ */ __name2((e) => {
       const customEvent = e;
       const params = customEvent.detail?.[0];
       return handler(params);
@@ -1555,7 +2125,7 @@ const _EventBus = class _EventBus extends EventTarget {
    * Listen to built-in events (one-time)
    */
   once(event, handler) {
-    const wrappedHandler = /* @__PURE__ */ __name((e) => {
+    const wrappedHandler = /* @__PURE__ */ __name2((e) => {
       const customEvent = e;
       const params = customEvent.detail?.[0];
       return handler(params);
@@ -1571,7 +2141,7 @@ const _EventBus = class _EventBus extends EventTarget {
     return;
   }
 };
-__name(_EventBus, "EventBus");
+__name2(_EventBus, "EventBus");
 let EventBus = _EventBus;
 const buses = /* @__PURE__ */ new Map();
 function getEventBus(channel) {
@@ -1582,7 +2152,7 @@ function getEventBus(channel) {
   buses.set(channel, bus);
   return bus;
 }
-__name(getEventBus, "getEventBus");
+__name2(getEventBus, "getEventBus");
 const InvokeErrorType = {
   // Retryable
   NETWORK_ERROR: "network_error",
@@ -1631,7 +2201,7 @@ const _InvokeError = class _InvokeError extends Error {
     return retryableTypes.includes(type);
   }
 };
-__name(_InvokeError, "InvokeError");
+__name2(_InvokeError, "InvokeError");
 let InvokeError = _InvokeError;
 function zodToOpenAITool(name, tool2) {
   return {
@@ -1643,7 +2213,7 @@ function zodToOpenAITool(name, tool2) {
     }
   };
 }
-__name(zodToOpenAITool, "zodToOpenAITool");
+__name2(zodToOpenAITool, "zodToOpenAITool");
 function lenientParseMacroToolCall(responseData, inputSchema) {
   const choice = responseData.choices?.[0];
   if (!choice) {
@@ -1764,7 +2334,7 @@ function lenientParseMacroToolCall(responseData, inputSchema) {
     );
   }
 }
-__name(lenientParseMacroToolCall, "lenientParseMacroToolCall");
+__name2(lenientParseMacroToolCall, "lenientParseMacroToolCall");
 function modelPatch(body) {
   const model = body.model || "";
   if (model.toLowerCase().startsWith("claude")) {
@@ -1780,7 +2350,7 @@ function modelPatch(body) {
   }
   return body;
 }
-__name(modelPatch, "modelPatch");
+__name2(modelPatch, "modelPatch");
 const _OpenAIClient = class _OpenAIClient {
   config;
   constructor(config) {
@@ -1877,7 +2447,7 @@ const _OpenAIClient = class _OpenAIClient {
     };
   }
 };
-__name(_OpenAIClient, "OpenAIClient");
+__name2(_OpenAIClient, "OpenAIClient");
 let OpenAIClient = _OpenAIClient;
 const _LLM = class _LLM {
   constructor(config, id) {
@@ -1910,383 +2480,111 @@ const _LLM = class _LLM {
       // retry settings
       {
         maxRetries: this.config.maxRetries,
-        onRetry: /* @__PURE__ */ __name((retries) => {
+        onRetry: /* @__PURE__ */ __name2((retries) => {
           __privateGet(this, _bus).emit("panel:update", {
             type: "retry",
             displayText: `retry-ing (${retries} / ${this.config.maxRetries})`
           });
         }, "onRetry"),
-        onError: /* @__PURE__ */ __name((error2, withRetry2) => {
+        onError: /* @__PURE__ */ __name2((error2, withRetry2) => {
           __privateGet(this, _bus).emit("panel:update", {
             type: "error",
             displayText: `step failed: ${error2.message}`
-          });
-        }, "onError")
-      }
-    );
-  }
-};
-_bus = new WeakMap();
-__name(_LLM, "LLM");
-let LLM = _LLM;
-async function withRetry(fn, settings) {
-  let retries = 0;
-  let lastError = null;
-  while (retries <= settings.maxRetries) {
-    if (retries > 0) {
-      settings.onRetry(retries);
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    }
-    try {
-      return await fn();
-    } catch (error2) {
-      console.error(error2);
-      settings.onError(error2, retries < settings.maxRetries);
-      if (error2?.name === "AbortError") throw error2;
-      if (error2 instanceof InvokeError && !error2.retryable) throw error2;
-      lastError = error2;
-      retries++;
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    }
-  }
-  throw lastError;
-}
-__name(withRetry, "withRetry");
-function patchReact(pageAgent) {
-  const reactRootElements = document.querySelectorAll(
-    '[data-reactroot], [data-reactid], [data-react-checksum], #root, #app, [id^="root-"], [id^="app-"], #adex-wrapper, #adex-root'
-  );
-  for (const element of reactRootElements) {
-    element.setAttribute("data-page-agent-not-interactive", "true");
-  }
-}
-__name(patchReact, "patchReact");
-const SYSTEM_PROMPT = 'You are an AI agent designed to operate in an iterative loop to automate browser tasks. Your ultimate goal is accomplishing the task provided in <user_request>.\n\n<intro>\nYou excel at following tasks:\n1. Navigating complex websites and extracting precise information\n2. Automating form submissions and interactive web actions\n3. Gathering and saving information \n4. Operate effectively in an agent loop\n5. Efficiently performing diverse web tasks\n</intro>\n\n<language_settings>\n- Default working language: **中文**\n- Use the language that user is using. Return in user\'s language.\n</language_settings>\n\n<input>\nAt every step, your input will consist of: \n1. <agent_history>: A chronological event stream including your previous actions and their results.\n2. <agent_state>: Current <user_request> and <step_info>.\n3. <browser_state>: Current URL, interactive elements indexed for actions, and visible page content.\n</input>\n\n<agent_history>\nAgent history will be given as a list of step information as follows:\n\n<step_{step_number}>:\nEvaluation of Previous Step: Assessment of last action\nMemory: Your memory of this step\nNext Goal: Your goal for this step\nAction Results: Your actions and their results\n</step_{step_number}>\n\nand system messages wrapped in <sys> tag.\n</agent_history>\n\n<user_request>\nUSER REQUEST: This is your ultimate objective and always remains visible.\n- This has the highest priority. Make the user happy.\n- If the user request is very specific - then carefully follow each step and dont skip or hallucinate steps.\n- If the task is open ended you can plan yourself how to get it done.\n</user_request>\n\n<browser_state>\n1. Browser State will be given as:\n\nCurrent URL: URL of the page you are currently viewing.\nInteractive Elements: All interactive elements will be provided in format as [index]<type>text</type> where\n- index: Numeric identifier for interaction\n- type: HTML element type (button, input, etc.)\n- text: Element description\n\nExamples:\n[33]<div>User form</div>\n\\t*[35]<button aria-label=\'Submit form\'>Submit</button>\n\nNote that:\n- Only elements with numeric indexes in [] are interactive\n- (stacked) indentation (with \\t) is important and means that the element is a (html) child of the element above (with a lower index)\n- Elements tagged with `*[` are the new clickable elements that appeared on the website since the last step - if url has not changed.\n- Pure text elements without [] are not interactive.\n</browser_state>\n\n<browser_rules>\nStrictly follow these rules while using the browser and navigating the web:\n- Only interact with elements that have a numeric [index] assigned.\n- Only use indexes that are explicitly provided.\n- If the page changes after, for example, an input text action, analyze if you need to interact with new elements, e.g. selecting the right option from the list.\n- By default, only elements in the visible viewport are listed. Use scrolling actions if you suspect relevant content is offscreen which you need to interact with. Scroll ONLY if there are more pixels below or above the page.\n- You can scroll by a specific number of pages using the num_pages parameter (e.g., 0.5 for half page, 2.0 for two pages).\n- All the elements that are scrollable are marked with `data-scrollable` attribute. Including the scrollable distance in every directions. You can scroll *the element* in case some area are overflowed.\n- If a captcha appears, tell user you can not solve captcha. finished the task and ask user to solve it.\n- If expected elements are missing, try scrolling, or navigating back.\n- If the page is not fully loaded, use the `wait` action.\n- Do not repeat one action for more than 3 times unless some conditions changed.\n- If you fill an input field and your action sequence is interrupted, most often something changed e.g. suggestions popped up under the field.\n- If the <user_request> includes specific page information such as product type, rating, price, location, etc., try to apply filters to be more efficient.\n- The <user_request> is the ultimate goal. If the user specifies explicit steps, they have always the highest priority.\n- If you input_text into a field, you might need to press enter, click the search button, or select from dropdown for completion.\n- Don\'t login into a page if you don\'t have to. Don\'t login if you don\'t have the credentials. \n- There are 2 types of tasks always first think which type of request you are dealing with:\n1. Very specific step by step instructions:\n- Follow them as very precise and don\'t skip steps. Try to complete everything as requested.\n2. Open ended tasks. Plan yourself, be creative in achieving them.\n- If you get stuck e.g. with logins or captcha in open-ended tasks you can re-evaluate the task and try alternative ways, e.g. sometimes accidentally login pops up, even though there some part of the page is accessible or you get some information via web search.\n</browser_rules>\n\n<capability>\n- You can only handle single page app. Do not jump out of current page.\n- Do not click on link if it will open in a new page (etc. <a target="_blank">)\n- It is ok to fail the task.\n	- User can be wrong. If the request of user is not achievable, inappropriate or you do not have enough information or tools to achieve it. Tell user to make a better request.\n	- Webpage can be broken. All webpages or apps have bugs. Some bug will make it hard for your job. It\'s encouraged to tell user the problem of current page. Your feedbacks (including failing) are valuable for user.\n	- Trying to hard can be harmful. Repeating some action back and forth or pushing for a complex procedure with little knowledge can cause unwanted result and harmful side-effects. User would rather you to complete the task with a fail.\n- If you are not clear about the request or steps. `ask_user` to clarify it.\n- If you do not have knowledge for the current webpage or task. You must require user to give specific instructions and detailed steps.\n</capability>\n\n<task_completion_rules>\nYou must call the `done` action in one of three cases:\n- When you have fully completed the USER REQUEST.\n- When you reach the final allowed step (`max_steps`), even if the task is incomplete.\n- When you feel stuck or unable to solve user request. Or user request is not clear or contains inappropriate content.\n- If it is ABSOLUTELY IMPOSSIBLE to continue.\n\nThe `done` action is your opportunity to terminate and share your findings with the user.\n- Set `success` to `true` only if the full USER REQUEST has been completed with no missing components.\n- If any part of the request is missing, incomplete, or uncertain, set `success` to `false`.\n- You can use the `text` field of the `done` action to communicate your findings and to provide a coherent reply to the user and fulfill the USER REQUEST.\n- You are ONLY ALLOWED to call `done` as a single action. Don\'t call it together with other actions.\n- If the user asks for specified format, such as "return JSON with following structure", "return a list of format...", MAKE sure to use the right format in your answer.\n- If the user asks for a structured output, your `done` action\'s schema may be modified. Take this schema into account when solving the task!\n</task_completion_rules>\n\n<reasoning_rules>\nExhibit the following reasoning patterns to successfully achieve the <user_request>:\n\n- Reason about <agent_history> to track progress and context toward <user_request>.\n- Analyze the most recent "Next Goal" and "Action Result" in <agent_history> and clearly state what you previously tried to achieve.\n- Analyze all relevant items in <agent_history> and <browser_state> to understand your state.\n- Explicitly judge success/failure/uncertainty of the last action. Never assume an action succeeded just because it appears to be executed in your last step in <agent_history>. If the expected change is missing, mark the last action as failed (or uncertain) and plan a recovery.\n- Analyze whether you are stuck, e.g. when you repeat the same actions multiple times without any progress. Then consider alternative approaches e.g. scrolling for more context or ask user for help.\n- `ask_user` for help if you have any difficulty. Users want to be kept in the loop.\n- If you see information relevant to <user_request>, plan saving the information to memory.\n- Always reason about the <user_request>. Make sure to carefully analyze the specific steps and information required. E.g. specific filters, specific form fields, specific information to search. Make sure to always compare the current trajectory with the user request and think carefully if thats how the user requested it.\n</reasoning_rules>\n\n<examples>\nHere are examples of good output patterns. Use them as reference but never copy them directly.\n\n<evaluation_examples>\n- Positive Examples:\n"evaluation_previous_goal": "Successfully navigated to the product page and found the target information. Verdict: Success"\n"evaluation_previous_goal": "Clicked the login button and user authentication form appeared. Verdict: Success"\n</evaluation_examples>\n\n<memory_examples>\n"memory": "Found many pending reports that need to be analyzed in the main page. Successfully processed the first 2 reports on quarterly sales data and moving on to inventory analysis and customer feedback reports."\n</memory_examples>\n\n<next_goal_examples>\n"next_goal": "Click on the \'Add to Cart\' button to proceed with the purchase flow."\n"next_goal": "Extract details from the first item on the page."\n</next_goal_examples>\n</examples>\n\n<output>\nYou must ALWAYS respond with a valid JSON in this exact format:\n\n{\n  "evaluation_previous_goal": "Concise one-sentence analysis of your last action. Clearly state success, failure, or uncertain.",\n  "memory": "1-3 concise sentences of specific memory of this step and overall progress. You should put here everything that will help you track progress in future steps. Like counting pages visited, items found, etc.",\n  "next_goal": "State the next immediate goal and action to achieve it, in one clear sentence."\n  "action":{"one_action_name": {// action-specific parameter}}\n}\n</output>\n';
-async function waitFor(seconds) {
-  await new Promise((resolve) => setTimeout(resolve, seconds * 1e3));
-}
-__name(waitFor, "waitFor");
-let currentUrl = window.location.href;
-async function getSystemInfo() {
-  if (currentUrl === window.location.href) return "";
-  await waitFor(0.3);
-  currentUrl = window.location.href;
-  return `
-<sys> Current URL changed to: ${currentUrl} </sys>`;
-}
-__name(getSystemInfo, "getSystemInfo");
-async function movePointerToElement(element) {
-  const rect = element.getBoundingClientRect();
-  const x = rect.left + rect.width / 2;
-  const y = rect.top + rect.height / 2;
-  window.dispatchEvent(new CustomEvent("PageAgent::MovePointerTo", { detail: { x, y } }));
-  await waitFor(0.3);
-}
-__name(movePointerToElement, "movePointerToElement");
-function getElementByIndex(pageAgent, index) {
-  const interactiveNode = pageAgent.selectorMap.get(index);
-  if (!interactiveNode) {
-    throw new Error(`No interactive element found at index ${index}`);
-  }
-  const element = interactiveNode.ref;
-  if (!element) {
-    throw new Error(`Element at index ${index} does not have a reference`);
-  }
-  if (!(element instanceof HTMLElement)) {
-    throw new Error(`Element at index ${index} is not an HTMLElement`);
-  }
-  return element;
-}
-__name(getElementByIndex, "getElementByIndex");
-let lastClickedElement = null;
-function blurLastClickedElement() {
-  if (lastClickedElement) {
-    lastClickedElement.blur();
-    lastClickedElement.dispatchEvent(
-      new MouseEvent("mouseout", { bubbles: true, cancelable: true })
-    );
-    lastClickedElement = null;
-  }
-}
-__name(blurLastClickedElement, "blurLastClickedElement");
-async function clickElement(element) {
-  blurLastClickedElement();
-  lastClickedElement = element;
-  await scrollIntoViewIfNeeded(element);
-  await movePointerToElement(element);
-  window.dispatchEvent(new CustomEvent("PageAgent::ClickPointer"));
-  await waitFor(0.1);
-  element.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true, cancelable: true }));
-  element.dispatchEvent(new MouseEvent("mouseover", { bubbles: true, cancelable: true }));
-  element.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
-  element.focus();
-  element.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true }));
-  element.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
-  await waitFor(0.1);
-}
-__name(clickElement, "clickElement");
-const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-  window.HTMLInputElement.prototype,
-  "value"
-).set;
-const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
-  window.HTMLTextAreaElement.prototype,
-  "value"
-).set;
-async function createSyntheticInputEvent(elem, key) {
-  elem.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, cancelable: true, key }));
-  await waitFor(0.01);
-  if (elem instanceof HTMLInputElement || elem instanceof HTMLTextAreaElement) {
-    elem.dispatchEvent(new Event("beforeinput", { bubbles: true }));
-    await waitFor(0.01);
-    elem.dispatchEvent(new Event("input", { bubbles: true }));
-    await waitFor(0.01);
-  }
-  elem.dispatchEvent(new KeyboardEvent("keyup", { bubbles: true, cancelable: true, key }));
-}
-__name(createSyntheticInputEvent, "createSyntheticInputEvent");
-async function inputTextElement(element, text) {
-  if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
-    throw new Error("Element is not an input or textarea");
-  }
-  await clickElement(element);
-  if (element instanceof HTMLTextAreaElement) {
-    nativeTextAreaValueSetter.call(element, text);
-  } else {
-    nativeInputValueSetter.call(element, text);
-  }
-  const inputEvent = new Event("input", { bubbles: true });
-  element.dispatchEvent(inputEvent);
-  await waitFor(0.1);
-  blurLastClickedElement();
-}
-__name(inputTextElement, "inputTextElement");
-async function selectOptionElement(selectElement, optionText) {
-  if (!(selectElement instanceof HTMLSelectElement)) {
-    throw new Error("Element is not a select element");
-  }
-  const options = Array.from(selectElement.options);
-  const option = options.find((opt) => opt.textContent?.trim() === optionText.trim());
-  if (!option) {
-    throw new Error(`Option with text "${optionText}" not found in select element`);
-  }
-  selectElement.value = option.value;
-  selectElement.dispatchEvent(new Event("change", { bubbles: true }));
-  await waitFor(0.1);
-}
-__name(selectOptionElement, "selectOptionElement");
-async function scrollIntoViewIfNeeded(element) {
-  const el = element;
-  if (el.scrollIntoViewIfNeeded) {
-    el.scrollIntoViewIfNeeded();
-  } else {
-    el.scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
-  }
-}
-__name(scrollIntoViewIfNeeded, "scrollIntoViewIfNeeded");
-async function scrollVertically(down, scroll_amount, element) {
-  if (element) {
-    const targetElement = element;
-    console.log(
-      "[SCROLL DEBUG] Starting direct container scroll for element:",
-      targetElement.tagName
-    );
-    let currentElement = targetElement;
-    let scrollSuccess = false;
-    let scrolledElement = null;
-    let scrollDelta = 0;
-    let attempts = 0;
-    const dy2 = scroll_amount;
-    while (currentElement && attempts < 10) {
-      const computedStyle = window.getComputedStyle(currentElement);
-      const hasScrollableY = /(auto|scroll|overlay)/.test(computedStyle.overflowY);
-      const canScrollVertically = currentElement.scrollHeight > currentElement.clientHeight;
-      console.log(
-        "[SCROLL DEBUG] Checking element:",
-        currentElement.tagName,
-        "hasScrollableY:",
-        hasScrollableY,
-        "canScrollVertically:",
-        canScrollVertically,
-        "scrollHeight:",
-        currentElement.scrollHeight,
-        "clientHeight:",
-        currentElement.clientHeight
-      );
-      if (hasScrollableY && canScrollVertically) {
-        const beforeScroll = currentElement.scrollTop;
-        const maxScroll = currentElement.scrollHeight - currentElement.clientHeight;
-        let scrollAmount = dy2 / 3;
-        if (scrollAmount > 0) {
-          scrollAmount = Math.min(scrollAmount, maxScroll - beforeScroll);
-        } else {
-          scrollAmount = Math.max(scrollAmount, -beforeScroll);
-        }
-        currentElement.scrollTop = beforeScroll + scrollAmount;
-        const afterScroll = currentElement.scrollTop;
-        const actualScrollDelta = afterScroll - beforeScroll;
-        console.log(
-          "[SCROLL DEBUG] Scroll attempt:",
-          currentElement.tagName,
-          "before:",
-          beforeScroll,
-          "after:",
-          afterScroll,
-          "delta:",
-          actualScrollDelta
-        );
-        if (Math.abs(actualScrollDelta) > 0.5) {
-          scrollSuccess = true;
-          scrolledElement = currentElement;
-          scrollDelta = actualScrollDelta;
-          console.log(
-            "[SCROLL DEBUG] Successfully scrolled container:",
-            currentElement.tagName,
-            "delta:",
-            actualScrollDelta
-          );
-          break;
-        }
-      }
-      if (currentElement === document.body || currentElement === document.documentElement) {
-        break;
+          });
+        }, "onError")
       }
-      currentElement = currentElement.parentElement;
-      attempts++;
+    );
+  }
+};
+_bus = new WeakMap();
+__name2(_LLM, "LLM");
+let LLM = _LLM;
+async function withRetry(fn, settings) {
+  let retries = 0;
+  let lastError = null;
+  while (retries <= settings.maxRetries) {
+    if (retries > 0) {
+      settings.onRetry(retries);
+      await new Promise((resolve) => setTimeout(resolve, 100));
     }
-    if (scrollSuccess) {
-      return `Scrolled container (${scrolledElement?.tagName}) by ${scrollDelta}px`;
-    } else {
-      return `No scrollable container found for element (${targetElement.tagName})`;
+    try {
+      return await fn();
+    } catch (error2) {
+      console.error(error2);
+      settings.onError(error2, retries < settings.maxRetries);
+      if (error2?.name === "AbortError") throw error2;
+      if (error2 instanceof InvokeError && !error2.retryable) throw error2;
+      lastError = error2;
+      retries++;
+      await new Promise((resolve) => setTimeout(resolve, 100));
     }
   }
-  const dy = scroll_amount;
-  const bigEnough = /* @__PURE__ */ __name((el2) => el2.clientHeight >= window.innerHeight * 0.5, "bigEnough");
-  const canScroll = /* @__PURE__ */ __name((el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowY) && el2.scrollHeight > el2.clientHeight && bigEnough(el2), "canScroll");
-  let el = document.activeElement;
-  while (el && !canScroll(el) && el !== document.body) el = el.parentElement;
-  el = canScroll(el) ? el : Array.from(document.querySelectorAll("*")).find(canScroll) || document.scrollingElement || document.documentElement;
-  if (el === document.scrollingElement || el === document.documentElement || el === document.body) {
-    window.scrollBy(0, dy);
-    return `✅ Scrolled page by ${dy}px.`;
-  } else {
-    el.scrollBy({ top: dy, behavior: "smooth" });
-    await waitFor(0.1);
-    return `✅ Scrolled container (${el.tagName}) by ${dy}px.`;
-  }
+  throw lastError;
 }
-__name(scrollVertically, "scrollVertically");
-async function scrollHorizontally(right, scroll_amount, element) {
-  if (element) {
-    const targetElement = element;
-    console.log(
-      "[SCROLL DEBUG] Starting direct container scroll for element:",
-      targetElement.tagName
-    );
-    let currentElement = targetElement;
-    let scrollSuccess = false;
-    let scrolledElement = null;
-    let scrollDelta = 0;
-    let attempts = 0;
-    const dx2 = right ? scroll_amount : -scroll_amount;
-    while (currentElement && attempts < 10) {
-      const computedStyle = window.getComputedStyle(currentElement);
-      const hasScrollableX = /(auto|scroll|overlay)/.test(computedStyle.overflowX);
-      const canScrollHorizontally = currentElement.scrollWidth > currentElement.clientWidth;
-      console.log(
-        "[SCROLL DEBUG] Checking element:",
-        currentElement.tagName,
-        "hasScrollableX:",
-        hasScrollableX,
-        "canScrollHorizontally:",
-        canScrollHorizontally,
-        "scrollWidth:",
-        currentElement.scrollWidth,
-        "clientWidth:",
-        currentElement.clientWidth
-      );
-      if (hasScrollableX && canScrollHorizontally) {
-        const beforeScroll = currentElement.scrollLeft;
-        const maxScroll = currentElement.scrollWidth - currentElement.clientWidth;
-        let scrollAmount = dx2 / 3;
-        if (scrollAmount > 0) {
-          scrollAmount = Math.min(scrollAmount, maxScroll - beforeScroll);
-        } else {
-          scrollAmount = Math.max(scrollAmount, -beforeScroll);
-        }
-        currentElement.scrollLeft = beforeScroll + scrollAmount;
-        const afterScroll = currentElement.scrollLeft;
-        const actualScrollDelta = afterScroll - beforeScroll;
-        console.log(
-          "[SCROLL DEBUG] Scroll attempt:",
-          currentElement.tagName,
-          "before:",
-          beforeScroll,
-          "after:",
-          afterScroll,
-          "delta:",
-          actualScrollDelta
-        );
-        if (Math.abs(actualScrollDelta) > 0.5) {
-          scrollSuccess = true;
-          scrolledElement = currentElement;
-          scrollDelta = actualScrollDelta;
-          console.log(
-            "[SCROLL DEBUG] Successfully scrolled container:",
-            currentElement.tagName,
-            "delta:",
-            actualScrollDelta
-          );
-          break;
-        }
-      }
-      if (currentElement === document.body || currentElement === document.documentElement) {
-        break;
+__name2(withRetry, "withRetry");
+const SYSTEM_PROMPT = 'You are an AI agent designed to operate in an iterative loop to automate browser tasks. Your ultimate goal is accomplishing the task provided in <user_request>.\n\n<intro>\nYou excel at following tasks:\n1. Navigating complex websites and extracting precise information\n2. Automating form submissions and interactive web actions\n3. Gathering and saving information \n4. Operate effectively in an agent loop\n5. Efficiently performing diverse web tasks\n</intro>\n\n<language_settings>\n- Default working language: **中文**\n- Use the language that user is using. Return in user\'s language.\n</language_settings>\n\n<input>\nAt every step, your input will consist of: \n1. <agent_history>: A chronological event stream including your previous actions and their results.\n2. <agent_state>: Current <user_request> and <step_info>.\n3. <browser_state>: Current URL, interactive elements indexed for actions, and visible page content.\n</input>\n\n<agent_history>\nAgent history will be given as a list of step information as follows:\n\n<step_{step_number}>:\nEvaluation of Previous Step: Assessment of last action\nMemory: Your memory of this step\nNext Goal: Your goal for this step\nAction Results: Your actions and their results\n</step_{step_number}>\n\nand system messages wrapped in <sys> tag.\n</agent_history>\n\n<user_request>\nUSER REQUEST: This is your ultimate objective and always remains visible.\n- This has the highest priority. Make the user happy.\n- If the user request is very specific - then carefully follow each step and dont skip or hallucinate steps.\n- If the task is open ended you can plan yourself how to get it done.\n</user_request>\n\n<browser_state>\n1. Browser State will be given as:\n\nCurrent URL: URL of the page you are currently viewing.\nInteractive Elements: All interactive elements will be provided in format as [index]<type>text</type> where\n- index: Numeric identifier for interaction\n- type: HTML element type (button, input, etc.)\n- text: Element description\n\nExamples:\n[33]<div>User form</div>\n\\t*[35]<button aria-label=\'Submit form\'>Submit</button>\n\nNote that:\n- Only elements with numeric indexes in [] are interactive\n- (stacked) indentation (with \\t) is important and means that the element is a (html) child of the element above (with a lower index)\n- Elements tagged with `*[` are the new clickable elements that appeared on the website since the last step - if url has not changed.\n- Pure text elements without [] are not interactive.\n</browser_state>\n\n<browser_rules>\nStrictly follow these rules while using the browser and navigating the web:\n- Only interact with elements that have a numeric [index] assigned.\n- Only use indexes that are explicitly provided.\n- If the page changes after, for example, an input text action, analyze if you need to interact with new elements, e.g. selecting the right option from the list.\n- By default, only elements in the visible viewport are listed. Use scrolling actions if you suspect relevant content is offscreen which you need to interact with. Scroll ONLY if there are more pixels below or above the page.\n- You can scroll by a specific number of pages using the num_pages parameter (e.g., 0.5 for half page, 2.0 for two pages).\n- All the elements that are scrollable are marked with `data-scrollable` attribute. Including the scrollable distance in every directions. You can scroll *the element* in case some area are overflowed.\n- If a captcha appears, tell user you can not solve captcha. finished the task and ask user to solve it.\n- If expected elements are missing, try scrolling, or navigating back.\n- If the page is not fully loaded, use the `wait` action.\n- Do not repeat one action for more than 3 times unless some conditions changed.\n- If you fill an input field and your action sequence is interrupted, most often something changed e.g. suggestions popped up under the field.\n- If the <user_request> includes specific page information such as product type, rating, price, location, etc., try to apply filters to be more efficient.\n- The <user_request> is the ultimate goal. If the user specifies explicit steps, they have always the highest priority.\n- If you input_text into a field, you might need to press enter, click the search button, or select from dropdown for completion.\n- Don\'t login into a page if you don\'t have to. Don\'t login if you don\'t have the credentials. \n- There are 2 types of tasks always first think which type of request you are dealing with:\n1. Very specific step by step instructions:\n- Follow them as very precise and don\'t skip steps. Try to complete everything as requested.\n2. Open ended tasks. Plan yourself, be creative in achieving them.\n- If you get stuck e.g. with logins or captcha in open-ended tasks you can re-evaluate the task and try alternative ways, e.g. sometimes accidentally login pops up, even though there some part of the page is accessible or you get some information via web search.\n</browser_rules>\n\n<capability>\n- You can only handle single page app. Do not jump out of current page.\n- Do not click on link if it will open in a new page (etc. <a target="_blank">)\n- It is ok to fail the task.\n	- User can be wrong. If the request of user is not achievable, inappropriate or you do not have enough information or tools to achieve it. Tell user to make a better request.\n	- Webpage can be broken. All webpages or apps have bugs. Some bug will make it hard for your job. It\'s encouraged to tell user the problem of current page. Your feedbacks (including failing) are valuable for user.\n	- Trying to hard can be harmful. Repeating some action back and forth or pushing for a complex procedure with little knowledge can cause unwanted result and harmful side-effects. User would rather you to complete the task with a fail.\n- If you are not clear about the request or steps. `ask_user` to clarify it.\n- If you do not have knowledge for the current webpage or task. You must require user to give specific instructions and detailed steps.\n</capability>\n\n<task_completion_rules>\nYou must call the `done` action in one of three cases:\n- When you have fully completed the USER REQUEST.\n- When you reach the final allowed step (`max_steps`), even if the task is incomplete.\n- When you feel stuck or unable to solve user request. Or user request is not clear or contains inappropriate content.\n- If it is ABSOLUTELY IMPOSSIBLE to continue.\n\nThe `done` action is your opportunity to terminate and share your findings with the user.\n- Set `success` to `true` only if the full USER REQUEST has been completed with no missing components.\n- If any part of the request is missing, incomplete, or uncertain, set `success` to `false`.\n- You can use the `text` field of the `done` action to communicate your findings and to provide a coherent reply to the user and fulfill the USER REQUEST.\n- You are ONLY ALLOWED to call `done` as a single action. Don\'t call it together with other actions.\n- If the user asks for specified format, such as "return JSON with following structure", "return a list of format...", MAKE sure to use the right format in your answer.\n- If the user asks for a structured output, your `done` action\'s schema may be modified. Take this schema into account when solving the task!\n</task_completion_rules>\n\n<reasoning_rules>\nExhibit the following reasoning patterns to successfully achieve the <user_request>:\n\n- Reason about <agent_history> to track progress and context toward <user_request>.\n- Analyze the most recent "Next Goal" and "Action Result" in <agent_history> and clearly state what you previously tried to achieve.\n- Analyze all relevant items in <agent_history> and <browser_state> to understand your state.\n- Explicitly judge success/failure/uncertainty of the last action. Never assume an action succeeded just because it appears to be executed in your last step in <agent_history>. If the expected change is missing, mark the last action as failed (or uncertain) and plan a recovery.\n- Analyze whether you are stuck, e.g. when you repeat the same actions multiple times without any progress. Then consider alternative approaches e.g. scrolling for more context or ask user for help.\n- `ask_user` for help if you have any difficulty. Users want to be kept in the loop.\n- If you see information relevant to <user_request>, plan saving the information to memory.\n- Always reason about the <user_request>. Make sure to carefully analyze the specific steps and information required. E.g. specific filters, specific form fields, specific information to search. Make sure to always compare the current trajectory with the user request and think carefully if thats how the user requested it.\n</reasoning_rules>\n\n<examples>\nHere are examples of good output patterns. Use them as reference but never copy them directly.\n\n<evaluation_examples>\n- Positive Examples:\n"evaluation_previous_goal": "Successfully navigated to the product page and found the target information. Verdict: Success"\n"evaluation_previous_goal": "Clicked the login button and user authentication form appeared. Verdict: Success"\n</evaluation_examples>\n\n<memory_examples>\n"memory": "Found many pending reports that need to be analyzed in the main page. Successfully processed the first 2 reports on quarterly sales data and moving on to inventory analysis and customer feedback reports."\n</memory_examples>\n\n<next_goal_examples>\n"next_goal": "Click on the \'Add to Cart\' button to proceed with the purchase flow."\n"next_goal": "Extract details from the first item on the page."\n</next_goal_examples>\n</examples>\n\n<output>\nYou must ALWAYS respond with a valid JSON in this exact format:\n\n{\n  "evaluation_previous_goal": "Concise one-sentence analysis of your last action. Clearly state success, failure, or uncertain.",\n  "memory": "1-3 concise sentences of specific memory of this step and overall progress. You should put here everything that will help you track progress in future steps. Like counting pages visited, items found, etc.",\n  "next_goal": "State the next immediate goal and action to achieve it, in one clear sentence."\n  "action":{"one_action_name": {// action-specific parameter}}\n}\n</output>\n';
+async function waitUntil(check, timeout = 60 * 601e3) {
+  if (check()) return true;
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    const interval = setInterval(() => {
+      if (check()) {
+        clearInterval(interval);
+        resolve(true);
+      } else if (Date.now() - start > timeout) {
+        clearInterval(interval);
+        reject(new Error("Timeout waiting for condition to become true"));
       }
-      currentElement = currentElement.parentElement;
-      attempts++;
-    }
-    if (scrollSuccess) {
-      return `Scrolled container (${scrolledElement?.tagName}) horizontally by ${scrollDelta}px`;
-    } else {
-      return `No horizontally scrollable container found for element (${targetElement.tagName})`;
-    }
+    }, 100);
+  });
+}
+__name2(waitUntil, "waitUntil");
+async function waitFor(seconds) {
+  await new Promise((resolve) => setTimeout(resolve, seconds * 1e3));
+}
+__name2(waitFor, "waitFor");
+function truncate(text, maxLength) {
+  if (text.length > maxLength) {
+    return text.substring(0, maxLength) + "...";
   }
-  const dx = right ? scroll_amount : -scroll_amount;
-  const bigEnough = /* @__PURE__ */ __name((el2) => el2.clientWidth >= window.innerWidth * 0.5, "bigEnough");
-  const canScroll = /* @__PURE__ */ __name((el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowX) && el2.scrollWidth > el2.clientWidth && bigEnough(el2), "canScroll");
-  let el = document.activeElement;
-  while (el && !canScroll(el) && el !== document.body) el = el.parentElement;
-  el = canScroll(el) ? el : Array.from(document.querySelectorAll("*")).find(canScroll) || document.scrollingElement || document.documentElement;
-  if (el === document.scrollingElement || el === document.documentElement || el === document.body) {
-    window.scrollBy(dx, 0);
-    return `✅ Scrolled page horizontally by ${dx}px`;
-  } else {
-    el.scrollBy({ left: dx, behavior: "smooth" });
-    await waitFor(0.1);
-    return `✅ Scrolled container (${el.tagName}) horizontally by ${dx}px`;
+  return text;
+}
+__name2(truncate, "truncate");
+function trimLines(text) {
+  return text.split("\n").map((line) => line.trim()).join("\n");
+}
+__name2(trimLines, "trimLines");
+function randomID(existingIDs) {
+  let id = Math.random().toString(36).substring(2, 11);
+  if (!existingIDs) {
+    return id;
+  }
+  const MAX_TRY = 1e3;
+  let tryCount = 0;
+  while (existingIDs.includes(id)) {
+    id = Math.random().toString(36).substring(2, 11);
+    tryCount++;
+    if (tryCount > MAX_TRY) {
+      throw new Error("randomID: too many try");
+    }
   }
+  return id;
 }
-__name(scrollHorizontally, "scrollHorizontally");
-const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  clickElement,
-  createSyntheticInputEvent,
-  getElementByIndex,
-  getSystemInfo,
-  inputTextElement,
-  movePointerToElement,
-  scrollHorizontally,
-  scrollIntoViewIfNeeded,
-  scrollVertically,
-  selectOptionElement,
-  waitFor
-}, Symbol.toStringTag, { value: "Module" }));
-window.utils = utils;
+__name2(randomID, "randomID");
+if (!window.__PAGE_AGENT_IDS__) {
+  window.__PAGE_AGENT_IDS__ = [];
+}
+const ids = window.__PAGE_AGENT_IDS__;
+function uid() {
+  const id = randomID(ids);
+  ids.push(id);
+  return id;
+}
+__name2(uid, "uid");
 function tool(options) {
   return options;
 }
-__name(tool, "tool");
+__name2(tool, "tool");
 const tools = /* @__PURE__ */ new Map();
 tools.set(
   "done",
@@ -2296,7 +2594,7 @@ tools.set(
       text: zod.string(),
       success: zod.boolean().default(true)
     }),
-    execute: /* @__PURE__ */ __name(async function(input2) {
+    execute: /* @__PURE__ */ __name2(async function(input2) {
       return Promise.resolve("Task completed");
     }, "execute")
   })
@@ -2308,12 +2606,12 @@ tools.set(
     inputSchema: zod.object({
       seconds: zod.number().min(1).max(10).default(1)
     }),
-    execute: /* @__PURE__ */ __name(async function(input2) {
-      const lastTimeUpdate = this.lastTimeUpdate;
+    execute: /* @__PURE__ */ __name2(async function(input2) {
+      const lastTimeUpdate = await this.pageController.getLastUpdateTime();
       const actualWaitTime = Math.max(0, input2.seconds - (Date.now() - lastTimeUpdate) / 1e3);
       console.log(`actualWaitTime: ${actualWaitTime} seconds`);
       await waitFor(actualWaitTime);
-      return `✅ Waited for ${input2.seconds} seconds.` + await getSystemInfo();
+      return `✅ Waited for ${input2.seconds} seconds.`;
     }, "execute")
   })
 );
@@ -2324,9 +2622,9 @@ tools.set(
     inputSchema: zod.object({
       question: zod.string()
     }),
-    execute: /* @__PURE__ */ __name(async function(input2) {
+    execute: /* @__PURE__ */ __name2(async function(input2) {
       const answer = await this.panel.askUser(input2.question);
-      return `✅ Received user answer: ${answer}` + await getSystemInfo();
+      return `✅ Received user answer: ${answer}`;
     }, "execute")
   })
 );
@@ -2337,14 +2635,9 @@ tools.set(
     inputSchema: zod.object({
       index: zod.int().min(0)
     }),
-    execute: /* @__PURE__ */ __name(async function(input2) {
-      const element = getElementByIndex(this, input2.index);
-      const elemText = this.elementTextMap.get(input2.index);
-      await clickElement(element);
-      if (element instanceof HTMLAnchorElement && element.target === "_blank") {
-        return `⚠️ Clicked link that opens in a new tab (${elemText ? elemText : input2.index}). You are not capable of reading new tabs.`;
-      }
-      return `✅ Clicked element (${elemText ? elemText : input2.index}).` + await getSystemInfo();
+    execute: /* @__PURE__ */ __name2(async function(input2) {
+      const result2 = await this.pageController.clickElement(input2.index);
+      return result2.message;
     }, "execute")
   })
 );
@@ -2356,11 +2649,9 @@ tools.set(
       index: zod.int().min(0),
       text: zod.string()
     }),
-    execute: /* @__PURE__ */ __name(async function(input2) {
-      const element = getElementByIndex(this, input2.index);
-      const elemText = this.elementTextMap.get(input2.index);
-      await inputTextElement(element, input2.text);
-      return `✅ Input text (${input2.text}) into element (${elemText ? elemText : input2.index}).` + await getSystemInfo();
+    execute: /* @__PURE__ */ __name2(async function(input2) {
+      const result2 = await this.pageController.inputText(input2.index, input2.text);
+      return result2.message;
     }, "execute")
   })
 );
@@ -2372,11 +2663,9 @@ tools.set(
       index: zod.int().min(0),
       text: zod.string()
     }),
-    execute: /* @__PURE__ */ __name(async function(input2) {
-      const element = getElementByIndex(this, input2.index);
-      const elemText = this.elementTextMap.get(input2.index);
-      await selectOptionElement(element, input2.text);
-      return `✅ Selected option (${input2.text}) in element (${elemText ? elemText : input2.index}).` + await getSystemInfo();
+    execute: /* @__PURE__ */ __name2(async function(input2) {
+      const result2 = await this.pageController.selectOption(input2.index, input2.text);
+      return result2.message;
     }, "execute")
   })
 );
@@ -2390,11 +2679,12 @@ tools.set(
       pixels: zod.number().int().min(0).optional(),
       index: zod.number().int().min(0).optional()
     }),
-    execute: /* @__PURE__ */ __name(async function(input2) {
-      const { down, num_pages, index, pixels } = input2;
-      const scroll_amount = pixels ? pixels : num_pages * (down ? 1 : -1) * window.innerHeight;
-      const element = index !== void 0 ? getElementByIndex(this, index) : null;
-      return await scrollVertically(down, scroll_amount, element) + await getSystemInfo();
+    execute: /* @__PURE__ */ __name2(async function(input2) {
+      const result2 = await this.pageController.scroll({
+        ...input2,
+        numPages: input2.num_pages
+      });
+      return result2.message;
     }, "execute")
   })
 );
@@ -2407,11 +2697,9 @@ tools.set(
       pixels: zod.number().int().min(0),
       index: zod.number().int().min(0).optional()
     }),
-    execute: /* @__PURE__ */ __name(async function(input2) {
-      const { right, pixels, index } = input2;
-      const scroll_amount = pixels * (right ? 1 : -1);
-      const element = index !== void 0 ? getElementByIndex(this, index) : null;
-      return await scrollHorizontally(right, scroll_amount, element) + await getSystemInfo();
+    execute: /* @__PURE__ */ __name2(async function(input2) {
+      const result2 = await this.pageController.scrollHorizontally(input2);
+      return result2.message;
     }, "execute")
   })
 );
@@ -2422,71 +2710,12 @@ tools.set(
     inputSchema: zod.object({
       script: zod.string()
     }),
-    execute: /* @__PURE__ */ __name(async function(input) {
-      try {
-        const asyncFunction = eval(`(async () => { ${input.script} })`);
-        const result = await asyncFunction();
-        return `✅ Executed JavaScript. Result: ${result}` + await getSystemInfo();
-      } catch (error2) {
-        return `❌ Error executing JavaScript: ${error2}` + await getSystemInfo();
-      }
+    execute: /* @__PURE__ */ __name2(async function(input2) {
+      const result2 = await this.pageController.executeJavascript(input2.script);
+      return result2.message;
     }, "execute")
   })
 );
-async function waitUntil(check, timeout = 60 * 601e3) {
-  if (check()) return true;
-  return new Promise((resolve, reject) => {
-    const start = Date.now();
-    const interval = setInterval(() => {
-      if (check()) {
-        clearInterval(interval);
-        resolve(true);
-      } else if (Date.now() - start > timeout) {
-        clearInterval(interval);
-        reject(new Error("Timeout waiting for condition to become true"));
-      }
-    }, 100);
-  });
-}
-__name(waitUntil, "waitUntil");
-function truncate(text, maxLength) {
-  if (text.length > maxLength) {
-    return text.substring(0, maxLength) + "...";
-  }
-  return text;
-}
-__name(truncate, "truncate");
-function trimLines(text) {
-  return text.split("\n").map((line) => line.trim()).join("\n");
-}
-__name(trimLines, "trimLines");
-function randomID(existingIDs) {
-  let id = Math.random().toString(36).substring(2, 11);
-  if (!existingIDs) {
-    return id;
-  }
-  const MAX_TRY = 1e3;
-  let tryCount = 0;
-  while (existingIDs.includes(id)) {
-    id = Math.random().toString(36).substring(2, 11);
-    tryCount++;
-    if (tryCount > MAX_TRY) {
-      throw new Error("randomID: too many try");
-    }
-  }
-  return id;
-}
-__name(randomID, "randomID");
-if (!window.__PAGE_AGENT_IDS__) {
-  window.__PAGE_AGENT_IDS__ = [];
-}
-const ids = window.__PAGE_AGENT_IDS__;
-function uid() {
-  const id = randomID(ids);
-  ids.push(id);
-  return id;
-}
-__name(uid, "uid");
 const _UIState = class _UIState {
   steps = [];
   currentStep = null;
@@ -2545,7 +2774,7 @@ const _UIState = class _UIState {
     return `step_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
   }
 };
-__name(_UIState, "UIState");
+__name2(_UIState, "UIState");
 let UIState = _UIState;
 const wrapper$1 = "_wrapper_1j0ct_1";
 const background = "_background_1j0ct_39";
@@ -2721,7 +2950,7 @@ _Panel_instances = new WeakSet();
 /**
  * Update status
  */
-update_fn = /* @__PURE__ */ __name(function(stepData) {
+update_fn = /* @__PURE__ */ __name2(function(stepData) {
   const step = __privateGet(this, _state).addStep(stepData);
   const headerText = truncate(step.displayText, 20);
   __privateSet(this, _pendingHeaderText, headerText);
@@ -2741,7 +2970,7 @@ update_fn = /* @__PURE__ */ __name(function(stepData) {
 /**
  * Show panel
  */
-show_fn = /* @__PURE__ */ __name(function() {
+show_fn = /* @__PURE__ */ __name2(function() {
   this.wrapper.style.display = "block";
   void this.wrapper.offsetHeight;
   this.wrapper.style.opacity = "1";
@@ -2750,7 +2979,7 @@ show_fn = /* @__PURE__ */ __name(function() {
 /**
  * Hide panel
  */
-hide_fn = /* @__PURE__ */ __name(function() {
+hide_fn = /* @__PURE__ */ __name2(function() {
   this.wrapper.style.opacity = "0";
   this.wrapper.style.transform = "translateX(-50%) translateY(20px)";
   this.wrapper.style.display = "none";
@@ -2758,7 +2987,7 @@ hide_fn = /* @__PURE__ */ __name(function() {
 /**
  * Reset state
  */
-reset_fn = /* @__PURE__ */ __name(function() {
+reset_fn = /* @__PURE__ */ __name2(function() {
   __privateGet(this, _state).reset();
   __privateGet(this, _statusText).textContent = __privateGet(this, _pageAgent).i18n.t("ui.panel.ready");
   __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, "thinking");
@@ -2773,7 +3002,7 @@ reset_fn = /* @__PURE__ */ __name(function() {
 /**
  * Toggle pause state
  */
-togglePause_fn = /* @__PURE__ */ __name(function() {
+togglePause_fn = /* @__PURE__ */ __name2(function() {
   __privateGet(this, _pageAgent).paused = !__privateGet(this, _pageAgent).paused;
   __privateMethod(this, _Panel_instances, updatePauseButton_fn).call(this);
   if (__privateGet(this, _pageAgent).paused) {
@@ -2787,7 +3016,7 @@ togglePause_fn = /* @__PURE__ */ __name(function() {
 /**
  * Update pause button state
  */
-updatePauseButton_fn = /* @__PURE__ */ __name(function() {
+updatePauseButton_fn = /* @__PURE__ */ __name2(function() {
   if (__privateGet(this, _pageAgent).paused) {
     __privateGet(this, _pauseButton).textContent = "▶";
     __privateGet(this, _pauseButton).title = __privateGet(this, _pageAgent).i18n.t("ui.panel.continue");
@@ -2801,7 +3030,7 @@ updatePauseButton_fn = /* @__PURE__ */ __name(function() {
 /**
  * Stop Agent
  */
-stopAgent_fn = /* @__PURE__ */ __name(function() {
+stopAgent_fn = /* @__PURE__ */ __name2(function() {
   __privateMethod(this, _Panel_instances, update_fn).call(this, {
     type: "error",
     displayText: __privateGet(this, _pageAgent).i18n.t("ui.panel.taskTerminated")
@@ -2811,7 +3040,7 @@ stopAgent_fn = /* @__PURE__ */ __name(function() {
 /**
  * Submit task
  */
-submitTask_fn = /* @__PURE__ */ __name(function() {
+submitTask_fn = /* @__PURE__ */ __name2(function() {
   const input2 = __privateGet(this, _taskInput).value.trim();
   if (!input2) return;
   __privateMethod(this, _Panel_instances, hideInputArea_fn).call(this);
@@ -2824,7 +3053,7 @@ submitTask_fn = /* @__PURE__ */ __name(function() {
 /**
  * Handle user answer
  */
-handleUserAnswer_fn = /* @__PURE__ */ __name(function(input2) {
+handleUserAnswer_fn = /* @__PURE__ */ __name2(function(input2) {
   __privateMethod(this, _Panel_instances, update_fn).call(this, {
     type: "input",
     displayText: __privateGet(this, _pageAgent).i18n.t("ui.panel.userAnswer", { input: input2 })
@@ -2838,7 +3067,7 @@ handleUserAnswer_fn = /* @__PURE__ */ __name(function(input2) {
 /**
  * Show input area
  */
-showInputArea_fn = /* @__PURE__ */ __name(function(placeholder) {
+showInputArea_fn = /* @__PURE__ */ __name2(function(placeholder) {
   __privateGet(this, _taskInput).value = "";
   __privateGet(this, _taskInput).placeholder = placeholder || __privateGet(this, _pageAgent).i18n.t("ui.panel.taskInput");
   __privateGet(this, _inputSection).classList.remove(styles$1.hidden);
@@ -2849,13 +3078,13 @@ showInputArea_fn = /* @__PURE__ */ __name(function(placeholder) {
 /**
  * Hide input area
  */
-hideInputArea_fn = /* @__PURE__ */ __name(function() {
+hideInputArea_fn = /* @__PURE__ */ __name2(function() {
   __privateGet(this, _inputSection).classList.add(styles$1.hidden);
 }, "#hideInputArea");
 /**
  * Check if input area should be shown
  */
-shouldShowInputArea_fn = /* @__PURE__ */ __name(function() {
+shouldShowInputArea_fn = /* @__PURE__ */ __name2(function() {
   if (__privateGet(this, _isWaitingForUserAnswer)) return true;
   const steps = __privateGet(this, _state).getAllSteps();
   if (steps.length === 0) {
@@ -2864,7 +3093,7 @@ shouldShowInputArea_fn = /* @__PURE__ */ __name(function() {
   const lastStep = steps[steps.length - 1];
   return lastStep.type === "completed" || lastStep.type === "error";
 }, "#shouldShowInputArea");
-createWrapper_fn = /* @__PURE__ */ __name(function() {
+createWrapper_fn = /* @__PURE__ */ __name2(function() {
   const wrapper2 = document.createElement("div");
   wrapper2.id = "page-agent-runtime_agent-panel";
   wrapper2.className = `${styles$1.wrapper} ${styles$1.collapsed}`;
@@ -2912,7 +3141,7 @@ createWrapper_fn = /* @__PURE__ */ __name(function() {
   document.body.appendChild(wrapper2);
   return wrapper2;
 }, "#createWrapper");
-setupEventListeners_fn = /* @__PURE__ */ __name(function() {
+setupEventListeners_fn = /* @__PURE__ */ __name2(function() {
   const header2 = this.wrapper.querySelector(`.${styles$1.header}`);
   header2.addEventListener("click", (e) => {
     if (e.target.closest(`.${styles$1.controlButton}`)) {
@@ -2943,20 +3172,20 @@ setupEventListeners_fn = /* @__PURE__ */ __name(function() {
     e.stopPropagation();
   });
 }, "#setupEventListeners");
-toggle_fn = /* @__PURE__ */ __name(function() {
+toggle_fn = /* @__PURE__ */ __name2(function() {
   if (__privateGet(this, _isExpanded)) {
     __privateMethod(this, _Panel_instances, collapse_fn).call(this);
   } else {
     __privateMethod(this, _Panel_instances, expand_fn).call(this);
   }
 }, "#toggle");
-expand_fn = /* @__PURE__ */ __name(function() {
+expand_fn = /* @__PURE__ */ __name2(function() {
   __privateSet(this, _isExpanded, true);
   this.wrapper.classList.remove(styles$1.collapsed);
   this.wrapper.classList.add(styles$1.expanded);
   __privateGet(this, _expandButton).textContent = "▲";
 }, "#expand");
-collapse_fn = /* @__PURE__ */ __name(function() {
+collapse_fn = /* @__PURE__ */ __name2(function() {
   __privateSet(this, _isExpanded, false);
   this.wrapper.classList.remove(styles$1.expanded);
   this.wrapper.classList.add(styles$1.collapsed);
@@ -2965,7 +3194,7 @@ collapse_fn = /* @__PURE__ */ __name(function() {
 /**
  * Start periodic header update loop
  */
-startHeaderUpdateLoop_fn = /* @__PURE__ */ __name(function() {
+startHeaderUpdateLoop_fn = /* @__PURE__ */ __name2(function() {
   __privateSet(this, _headerUpdateTimer, setInterval(() => {
     __privateMethod(this, _Panel_instances, checkAndUpdateHeader_fn).call(this);
   }, 450));
@@ -2973,7 +3202,7 @@ startHeaderUpdateLoop_fn = /* @__PURE__ */ __name(function() {
 /**
  * Stop periodic header update loop
  */
-stopHeaderUpdateLoop_fn = /* @__PURE__ */ __name(function() {
+stopHeaderUpdateLoop_fn = /* @__PURE__ */ __name2(function() {
   if (__privateGet(this, _headerUpdateTimer)) {
     clearInterval(__privateGet(this, _headerUpdateTimer));
     __privateSet(this, _headerUpdateTimer, null);
@@ -2982,7 +3211,7 @@ stopHeaderUpdateLoop_fn = /* @__PURE__ */ __name(function() {
 /**
  * Check if header needs update and trigger animation if not currently animating
  */
-checkAndUpdateHeader_fn = /* @__PURE__ */ __name(function() {
+checkAndUpdateHeader_fn = /* @__PURE__ */ __name2(function() {
   if (!__privateGet(this, _pendingHeaderText) || __privateGet(this, _isAnimating)) {
     return;
   }
@@ -2997,7 +3226,7 @@ checkAndUpdateHeader_fn = /* @__PURE__ */ __name(function() {
 /**
  * Animate text change with fade out/in effect
  */
-animateTextChange_fn = /* @__PURE__ */ __name(function(newText) {
+animateTextChange_fn = /* @__PURE__ */ __name2(function(newText) {
   __privateSet(this, _isAnimating, true);
   __privateGet(this, _statusText).classList.add(styles$1.fadeOut);
   setTimeout(() => {
@@ -3010,21 +3239,21 @@ animateTextChange_fn = /* @__PURE__ */ __name(function(newText) {
     }, 300);
   }, 150);
 }, "#animateTextChange");
-updateStatusIndicator_fn = /* @__PURE__ */ __name(function(type) {
+updateStatusIndicator_fn = /* @__PURE__ */ __name2(function(type) {
   __privateGet(this, _indicator).className = styles$1.indicator;
   __privateGet(this, _indicator).classList.add(styles$1[type]);
 }, "#updateStatusIndicator");
-updateHistory_fn = /* @__PURE__ */ __name(function() {
+updateHistory_fn = /* @__PURE__ */ __name2(function() {
   const steps = __privateGet(this, _state).getAllSteps();
   __privateGet(this, _historySection).innerHTML = steps.map((step) => __privateMethod(this, _Panel_instances, createHistoryItem_fn).call(this, step)).join("");
   __privateMethod(this, _Panel_instances, scrollToBottom_fn).call(this);
 }, "#updateHistory");
-scrollToBottom_fn = /* @__PURE__ */ __name(function() {
+scrollToBottom_fn = /* @__PURE__ */ __name2(function() {
   setTimeout(() => {
     __privateGet(this, _historySection).scrollTop = __privateGet(this, _historySection).scrollHeight;
   }, 0);
 }, "#scrollToBottom");
-createHistoryItem_fn = /* @__PURE__ */ __name(function(step) {
+createHistoryItem_fn = /* @__PURE__ */ __name2(function(step) {
   const time = step.timestamp.toLocaleTimeString("zh-CN", {
     hour12: false,
     hour: "2-digit",
@@ -3080,7 +3309,7 @@ createHistoryItem_fn = /* @__PURE__ */ __name(function(step) {
 			</div>
 		`;
 }, "#createHistoryItem");
-__name(_Panel, "Panel");
+__name2(_Panel, "Panel");
 let Panel = _Panel;
 function getToolExecutingText(toolName, args, i18n) {
   switch (toolName) {
@@ -3100,7 +3329,7 @@ function getToolExecutingText(toolName, args, i18n) {
       return i18n.t("ui.tools.executing", { toolName });
   }
 }
-__name(getToolExecutingText, "getToolExecutingText");
+__name2(getToolExecutingText, "getToolExecutingText");
 function getToolCompletedText(toolName, args, i18n) {
   switch (toolName) {
     case "click_element_by_index":
@@ -3119,7 +3348,7 @@ function getToolCompletedText(toolName, args, i18n) {
       return null;
   }
 }
-__name(getToolCompletedText, "getToolCompletedText");
+__name2(getToolCompletedText, "getToolCompletedText");
 function hasDarkModeClass() {
   const DFEAULT_DARK_MODE_CLASSES = ["dark", "dark-mode", "theme-dark", "night", "night-mode"];
   const htmlElement = document.documentElement;
@@ -3135,7 +3364,7 @@ function hasDarkModeClass() {
   }
   return false;
 }
-__name(hasDarkModeClass, "hasDarkModeClass");
+__name2(hasDarkModeClass, "hasDarkModeClass");
 function parseRgbColor(colorString) {
   const rgbMatch = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(colorString);
   if (!rgbMatch) {
@@ -3147,7 +3376,7 @@ function parseRgbColor(colorString) {
     b: parseInt(rgbMatch[3])
   };
 }
-__name(parseRgbColor, "parseRgbColor");
+__name2(parseRgbColor, "parseRgbColor");
 function isColorDark(colorString, threshold = 128) {
   if (!colorString || colorString === "transparent" || colorString.startsWith("rgba(0, 0, 0, 0)")) {
     return false;
@@ -3159,7 +3388,7 @@ function isColorDark(colorString, threshold = 128) {
   const luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
   return luminance < threshold;
 }
-__name(isColorDark, "isColorDark");
+__name2(isColorDark, "isColorDark");
 function isBackgroundDark() {
   const htmlStyle = window.getComputedStyle(document.documentElement);
   const bodyStyle = window.getComputedStyle(document.body);
@@ -3172,7 +3401,7 @@ function isBackgroundDark() {
   }
   return false;
 }
-__name(isBackgroundDark, "isBackgroundDark");
+__name2(isBackgroundDark, "isBackgroundDark");
 function isPageDark() {
   if (hasDarkModeClass()) {
     return true;
@@ -3182,7 +3411,7 @@ function isPageDark() {
   }
   return false;
 }
-__name(isPageDark, "isPageDark");
+__name2(isPageDark, "isPageDark");
 const wrapper = "_wrapper_1oy2s_1";
 const styles = {
   wrapper
@@ -3298,7 +3527,7 @@ _currentCursorY = new WeakMap();
 _targetCursorX = new WeakMap();
 _targetCursorY = new WeakMap();
 _SimulatorMask_instances = new WeakSet();
-createCursor_fn = /* @__PURE__ */ __name(function() {
+createCursor_fn = /* @__PURE__ */ __name2(function() {
   __privateGet(this, _cursor).className = cursorStyles.cursor;
   const rippleContainer = document.createElement("div");
   rippleContainer.className = cursorStyles.cursorRipple;
@@ -3311,7 +3540,7 @@ createCursor_fn = /* @__PURE__ */ __name(function() {
   __privateGet(this, _cursor).appendChild(borderLayer);
   this.wrapper.appendChild(__privateGet(this, _cursor));
 }, "#createCursor");
-moveCursorToTarget_fn = /* @__PURE__ */ __name(function() {
+moveCursorToTarget_fn = /* @__PURE__ */ __name2(function() {
   const newX = __privateGet(this, _currentCursorX) + (__privateGet(this, _targetCursorX) - __privateGet(this, _currentCursorX)) * 0.2;
   const newY = __privateGet(this, _currentCursorY) + (__privateGet(this, _targetCursorY) - __privateGet(this, _currentCursorY)) * 0.2;
   const xDistance = Math.abs(newX - __privateGet(this, _targetCursorX));
@@ -3334,7 +3563,7 @@ moveCursorToTarget_fn = /* @__PURE__ */ __name(function() {
   }
   requestAnimationFrame(() => __privateMethod(this, _SimulatorMask_instances, moveCursorToTarget_fn).call(this));
 }, "#moveCursorToTarget");
-__name(_SimulatorMask, "SimulatorMask");
+__name2(_SimulatorMask, "SimulatorMask");
 let SimulatorMask = _SimulatorMask;
 function assert(condition, message, silent) {
   if (!condition) {
@@ -3343,7 +3572,7 @@ function assert(condition, message, silent) {
     throw new Error(errorMessage);
   }
 }
-__name(assert, "assert");
+__name2(assert, "assert");
 const _PageAgent = class _PageAgent extends EventTarget {
   constructor(config = {}) {
     super();
@@ -3361,19 +3590,8 @@ const _PageAgent = class _PageAgent extends EventTarget {
     __privateAdd(this, _llm);
     __privateAdd(this, _totalWaitTime, 0);
     __privateAdd(this, _abortController, new AbortController());
-    /** Corresponds to eval_page in browser-use */
-    __publicField(this, "flatTree", null);
-    /**
-     * All highlighted index-mapped interactive elements
-     * Corresponds to DOMState.selector_map in browser-use
-     */
-    __publicField(this, "selectorMap", /* @__PURE__ */ new Map());
-    /** highlight index -> element text */
-    __publicField(this, "elementTextMap", /* @__PURE__ */ new Map());
-    /** Corresponds to clickable_elements_to_string in browser-use */
-    __publicField(this, "simplifiedHTML", "<EMPTY>");
-    /** last time the tree was updated */
-    __publicField(this, "lastTimeUpdate", 0);
+    /** PageController for DOM operations */
+    __publicField(this, "pageController");
     /** Fullscreen mask */
     __publicField(this, "mask", new SimulatorMask());
     /** History records */
@@ -3383,6 +3601,7 @@ const _PageAgent = class _PageAgent extends EventTarget {
     this.i18n = new I18n(this.config.language);
     this.panel = new Panel(this);
     this.tools = new Map(tools);
+    this.pageController = new PageController(this.config);
     if (this.config.customTools) {
       for (const [name, tool2] of Object.entries(this.config.customTools)) {
         if (tool2 === null) {
@@ -3395,7 +3614,6 @@ const _PageAgent = class _PageAgent extends EventTarget {
     if (!this.config.experimentalScriptExecutionTool) {
       this.tools.delete("execute_javascript");
     }
-    patchReact();
     window.addEventListener("beforeunload", (e) => {
       if (!this.disposed) this.dispose("PAGE_UNLOADING");
     });
@@ -3428,7 +3646,7 @@ const _PageAgent = class _PageAgent extends EventTarget {
       let step = 0;
       while (true) {
         await onBeforeStep.call(this, step);
-        console.group(`step: ${step + 1}`);
+        console.group(`step: ${step}`);
         if (__privateGet(this, _abortController).signal.aborted) throw new Error("AbortError");
         await waitUntil(() => !this.paused);
         console.log(chalk.blue("Thinking..."));
@@ -3444,7 +3662,7 @@ const _PageAgent = class _PageAgent extends EventTarget {
             },
             {
               role: "user",
-              content: __privateMethod(this, _PageAgent_instances, assembleUserPrompt_fn).call(this)
+              content: await __privateMethod(this, _PageAgent_instances, assembleUserPrompt_fn).call(this)
             }
           ],
           { AgentOutput: __privateMethod(this, _PageAgent_instances, packMacroTool_fn).call(this) },
@@ -3512,10 +3730,7 @@ const _PageAgent = class _PageAgent extends EventTarget {
   dispose(reason) {
     console.log("Disposing PageAgent...");
     this.disposed = true;
-    cleanUpHighlights();
-    this.flatTree = null;
-    this.selectorMap.clear();
-    this.elementTextMap.clear();
+    this.pageController.dispose();
     this.panel.dispose();
     this.mask.dispose();
     this.history = [];
@@ -3536,7 +3751,7 @@ _PageAgent_instances = new WeakSet();
  * - action: { toolName: toolInput }
  * where action must be selected from tools defined in this.tools
  */
-packMacroTool_fn = /* @__PURE__ */ __name(function() {
+packMacroTool_fn = /* @__PURE__ */ __name2(function() {
   const tools2 = this.tools;
   const actionSchemas = Array.from(tools2.entries()).map(([toolName, tool2]) => {
     return zod.object({
@@ -3555,7 +3770,7 @@ packMacroTool_fn = /* @__PURE__ */ __name(function() {
   });
   return {
     inputSchema: macroToolSchema,
-    execute: /* @__PURE__ */ __name(async (input2) => {
+    execute: /* @__PURE__ */ __name2(async (input2) => {
       if (__privateGet(this, _abortController).signal.aborted) throw new Error("AbortError");
       await waitUntil(() => !this.paused);
       console.log(chalk.blue.bold("MacroTool execute"), input2);
@@ -3615,7 +3830,7 @@ packMacroTool_fn = /* @__PURE__ */ __name(function() {
 /**
  * Get system prompt, dynamically replace language settings based on configured language
  */
-getSystemPrompt_fn = /* @__PURE__ */ __name(function() {
+getSystemPrompt_fn = /* @__PURE__ */ __name2(function() {
   let systemPrompt = SYSTEM_PROMPT;
   const targetLanguage = this.config.language === "zh-CN" ? "中文" : "English";
   systemPrompt = systemPrompt.replace(
@@ -3624,7 +3839,7 @@ getSystemPrompt_fn = /* @__PURE__ */ __name(function() {
   );
   return systemPrompt;
 }, "#getSystemPrompt");
-assembleUserPrompt_fn = /* @__PURE__ */ __name(function() {
+assembleUserPrompt_fn = /* @__PURE__ */ __name2(async function() {
   let prompt = "";
   prompt += "<agent_history>\n";
   this.history.forEach((history, index) => {
@@ -3647,11 +3862,11 @@ assembleUserPrompt_fn = /* @__PURE__ */ __name(function() {
 			</step_info>
 			</agent_state>
 		`;
-  prompt += __privateMethod(this, _PageAgent_instances, getBrowserState_fn).call(this);
+  prompt += await __privateMethod(this, _PageAgent_instances, getBrowserState_fn).call(this);
   return trimLines(prompt);
 }, "#assembleUserPrompt");
-onDone_fn = /* @__PURE__ */ __name(function(text, success = true) {
-  cleanUpHighlights();
+onDone_fn = /* @__PURE__ */ __name2(function(text, success = true) {
+  this.pageController.cleanUpHighlights();
   this.bus.emit("panel:update", {
     type: success ? "output" : "error",
     displayText: text
@@ -3663,27 +3878,39 @@ onDone_fn = /* @__PURE__ */ __name(function(text, success = true) {
   this.mask.hide();
   __privateGet(this, _abortController).abort();
 }, "#onDone");
-getBrowserState_fn = /* @__PURE__ */ __name(function() {
-  const pageUrl = window.location.href;
-  const pageTitle = document.title;
-  const pi = getPageInfo();
-  __privateMethod(this, _PageAgent_instances, updateTree_fn).call(this);
+getBrowserState_fn = /* @__PURE__ */ __name2(async function() {
+  const pageUrl = await this.pageController.getCurrentUrl();
+  const pageTitle = await this.pageController.getPageTitle();
+  const pi = await this.pageController.getPageInfo();
+  const viewportExpansion = await this.pageController.getViewportExpansion();
+  this.mask.wrapper.style.pointerEvents = "none";
+  await this.pageController.updateTree();
+  this.mask.wrapper.style.pointerEvents = "auto";
+  const simplifiedHTML = await this.pageController.getSimplifiedHTML();
   let prompt = trimLines(`<browser_state>
 			Current Page: [${pageTitle}](${pageUrl})
 
 			Page info: ${pi.viewport_width}x${pi.viewport_height}px viewport, ${pi.page_width}x${pi.page_height}px total page size, ${pi.pages_above.toFixed(1)} pages above, ${pi.pages_below.toFixed(1)} pages below, ${pi.total_pages.toFixed(1)} total pages, at ${(pi.current_page_position * 100).toFixed(0)}% of page
 
-			${"Interactive elements from top layer of the current page (full page):"}
+			${viewportExpansion === -1 ? "Interactive elements from top layer of the current page (full page):" : "Interactive elements from top layer of the current page inside the viewport:"}
 
 		`);
-  {
+  const has_content_above = pi.pixels_above > 4;
+  if (has_content_above && viewportExpansion !== -1) {
+    prompt += `... ${pi.pixels_above} pixels above (${pi.pages_above.toFixed(1)} pages) - scroll to see more ...
+`;
+  } else {
     prompt += `[Start of page]
 `;
   }
-  prompt += this.simplifiedHTML;
+  prompt += simplifiedHTML;
   prompt += `
 `;
-  {
+  const has_content_below = pi.pixels_below > 4;
+  if (has_content_below && viewportExpansion !== -1) {
+    prompt += `... ${pi.pixels_below} pixels below (${pi.pages_below.toFixed(1)} pages) - scroll to see more ...
+`;
+  } else {
     prompt += `[End of page]
 `;
   }
@@ -3691,30 +3918,7 @@ getBrowserState_fn = /* @__PURE__ */ __name(function() {
 `;
   return prompt;
 }, "#getBrowserState");
-/**
- * Update document tree
- */
-updateTree_fn = /* @__PURE__ */ __name(function() {
-  this.dispatchEvent(new Event("beforeUpdate"));
-  this.lastTimeUpdate = Date.now();
-  cleanUpHighlights();
-  this.mask.wrapper.style.pointerEvents = "none";
-  this.flatTree = getFlatTree({
-    ...this.config,
-    interactiveBlacklist: [
-      ...this.config.interactiveBlacklist || [],
-      ...document.querySelectorAll("[data-page-agent-not-interactive]").values()
-    ]
-  });
-  this.mask.wrapper.style.pointerEvents = "auto";
-  this.simplifiedHTML = flatTreeToString(this.flatTree, this.config.include_attributes);
-  this.selectorMap.clear();
-  this.selectorMap = getSelectorMap(this.flatTree);
-  this.elementTextMap.clear();
-  this.elementTextMap = getElementTextMap(this.simplifiedHTML);
-  this.dispatchEvent(new Event("afterUpdate"));
-}, "#updateTree");
-__name(_PageAgent, "PageAgent");
+__name2(_PageAgent, "PageAgent");
 let PageAgent = _PageAgent;
 export {
   PageAgent,