@probolabs/playwright 0.4.17 → 0.4.19

package/dist/index.js

@@ -1,58 +1,63 @@
-const highlighterCode = "(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n  typeof define === 'function' && define.amd ? define(['exports'], factory) :\n  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ProboLabs = {}));\n})(this, (function (exports) { 'use strict';\n\n  const ElementTag = {\n    CLICKABLE: \"CLICKABLE\", // button, link, toggle switch, checkbox, radio, dropdowns, clickable divs\n    FILLABLE: \"FILLABLE\", // input, textarea content_editable, date picker??\n    SELECTABLE: \"SELECTABLE\", // select\n    NON_INTERACTIVE_ELEMENT: 'NON_INTERACTIVE_ELEMENT',\n  };\n\n  class ElementInfo {\n    constructor(element, index, {tag, type, text, html, xpath, css_selector, bounding_box, iframe_selector}) {\n      this.index = index.toString();\n      this.tag = tag;\n      this.type = type;\n      this.text = text;\n      this.html = html;\n      this.xpath = xpath;\n      this.css_selector = css_selector;\n      this.bounding_box = bounding_box;\n      this.iframe_selector = iframe_selector;\n      this.element = element;\n      this.depth = -1;\n    }\n\n    getSelector() {\n      return this.xpath ? this.xpath : this.css_selector;\n    }\n\n    getDepth() {\n      if (this.depth >= 0) {\n        return this.depth;\n      }\n      \n      this.depth = 0;\n      let currentElement = this.element;\n      \n      while (currentElement.nodeType === Node.ELEMENT_NODE) {          \n        this.depth++;\n        if (currentElement.assignedSlot) {\n          currentElement = currentElement.assignedSlot;\n        }\n        else {\n          currentElement = currentElement.parentNode;\n          // Check if we're at a shadow root\n          if (currentElement && currentElement.nodeType !== Node.ELEMENT_NODE && currentElement.getRootNode() instanceof ShadowRoot) {\n            // Get the shadow root's host element\n            currentElement = currentElement.getRootNode().host;     \n          }\n        }\n      }\n          \n      return this.depth;\n    }\n  }\n\n  // import { realpath } from \"fs\";\n\n  function getAllDocumentElementsIncludingShadow(selectors, root = document) {\n    const elements = Array.from(root.querySelectorAll(selectors));\n\n    root.querySelectorAll('*').forEach(el => {\n        if (el.shadowRoot) {\n            elements.push(...getAllDocumentElementsIncludingShadow(selectors, el.shadowRoot));\n        }\n    });\n    return elements;\n  }\n\n  function getAllFrames(root = document) {\n    const result = [root];\n    const frames = getAllDocumentElementsIncludingShadow('frame, iframe', root);  \n    frames.forEach(frame => {\n        try {\n            const frameDocument = frame.contentDocument || frame.contentWindow.document;\n            if (frameDocument) {\n                result.push(frameDocument);\n            }\n        } catch (e) {\n            // Skip cross-origin frames\n            console.warn('Could not access frame content:', e.message);\n        }\n    });\n\n    return result;\n  }\n\n  function getAllElementsIncludingShadow(selectors, root = document) {\n    const elements = [];\n\n    getAllFrames(root).forEach(doc => {\n      elements.push(...getAllDocumentElementsIncludingShadow(selectors, doc));\n    });\n\n    return elements;\n  }\n\n  /**\n   * Deeply searches through DOM trees including Shadow DOM and frames/iframes\n   * @param {string} selector - CSS selector to search for\n   * @param {Document|Element} [root=document] - Starting point for the search\n   * @param {Object} [options] - Search options\n   * @param {boolean} [options.searchShadow=true] - Whether to search Shadow DOM\n   * @param {boolean} [options.searchFrames=true] - Whether to search frames/iframes\n   * @returns {Element[]} Array of found elements\n   \n  function getAllElementsIncludingShadow(selector, root = document, options = {}) {\n    const {\n        searchShadow = true,\n        searchFrames = true\n    } = options;\n\n    const results = new Set();\n    \n    // Helper to check if an element is valid and not yet found\n    const addIfValid = (element) => {\n        if (element && !results.has(element)) {\n            results.add(element);\n        }\n    };\n\n    // Helper to process a single document or element\n    function processNode(node) {\n        // Search regular DOM\n        node.querySelectorAll(selector).forEach(addIfValid);\n\n        if (searchShadow) {\n            // Search all shadow roots\n            const treeWalker = document.createTreeWalker(\n                node,\n                NodeFilter.SHOW_ELEMENT,\n                {\n                    acceptNode: (element) => {\n                        return element.shadowRoot ? \n                            NodeFilter.FILTER_ACCEPT : \n                            NodeFilter.FILTER_SKIP;\n                    }\n                }\n            );\n\n            while (treeWalker.nextNode()) {\n                const element = treeWalker.currentNode;\n                if (element.shadowRoot) {\n                    // Search within shadow root\n                    element.shadowRoot.querySelectorAll(selector).forEach(addIfValid);\n                    // Recursively process the shadow root for nested shadow DOMs\n                    processNode(element.shadowRoot);\n                }\n            }\n        }\n\n        if (searchFrames) {\n            // Search frames and iframes\n            const frames = node.querySelectorAll('frame, iframe');\n            frames.forEach(frame => {\n                try {\n                    const frameDocument = frame.contentDocument;\n                    if (frameDocument) {\n                        processNode(frameDocument);\n                    }\n                } catch (e) {\n                    // Skip cross-origin frames\n                    console.warn('Could not access frame content:', e.message);\n                }\n            });\n        }\n    }\n\n    // Start processing from the root\n    processNode(root);\n\n    return Array.from(results);\n  }\n  */\n  // <div x=1 y=2 role='combobox'> </div>\n  function findDropdowns() {\n    const dropdowns = [];\n    \n    // Native select elements\n    dropdowns.push(...getAllElementsIncludingShadow('select'));\n    \n    // Elements with dropdown roles that don't have <input>..</input>\n    const roleElements = getAllElementsIncludingShadow('[role=\"combobox\"], [role=\"listbox\"], [role=\"dropdown\"], [role=\"option\"], [role=\"menu\"], [role=\"menuitem\"]').filter(el => {\n      return el.tagName.toLowerCase() !== 'input' || ![\"button\", \"checkbox\", \"radio\"].includes(el.getAttribute(\"type\"));\n    });\n    dropdowns.push(...roleElements);\n    \n    // Common dropdown class patterns\n    const dropdownPattern = /.*(dropdown|select|combobox|menu).*/i;\n    const elements = getAllElementsIncludingShadow('*');\n    const dropdownClasses = Array.from(elements).filter(el => {\n      const hasDropdownClass = dropdownPattern.test(el.className);\n      const validTag = ['li', 'ul', 'span', 'div', 'p', 'a', 'button'].includes(el.tagName.toLowerCase());\n      const style = window.getComputedStyle(el); \n      const result = hasDropdownClass && validTag && (style.cursor === 'pointer' || el.tagName.toLowerCase() === 'a' || el.tagName.toLowerCase() === 'button');\n      return result;\n    });\n    \n    dropdowns.push(...dropdownClasses);\n    \n    // Elements with aria-haspopup attribute\n    dropdowns.push(...getAllElementsIncludingShadow('[aria-haspopup=\"true\"], [aria-haspopup=\"listbox\"], [aria-haspopup=\"menu\"]'));\n\n    // Improve navigation element detection\n    // Semantic nav elements with list items\n    dropdowns.push(...getAllElementsIncludingShadow('nav ul li, nav ol li'));\n    \n    // Navigation elements in common design patterns\n    dropdowns.push(...getAllElementsIncludingShadow('header a, .header a, .nav a, .navigation a, .menu a, .sidebar a, aside a'));\n    \n    // Elements in primary navigation areas with common attributes\n    dropdowns.push(...getAllElementsIncludingShadow('[role=\"navigation\"] a, [aria-label*=\"navigation\"] a, [aria-label*=\"menu\"] a'));\n\n    return dropdowns;\n  }\n\n  function findClickables() {\n    const clickables = [];\n    \n    const checkboxPattern = /checkbox/i;\n    // Collect all clickable elements first\n    const nativeLinks = [...getAllElementsIncludingShadow('a')];\n    const nativeButtons = [...getAllElementsIncludingShadow('button')];\n    const inputButtons = [...getAllElementsIncludingShadow('input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"]')];\n    const roleButtons = [...getAllElementsIncludingShadow('[role=\"button\"]')];\n    // const tabbable = [...getAllElementsIncludingShadow('[tabindex=\"0\"]')];\n    const clickHandlers = [...getAllElementsIncludingShadow('[onclick]')];\n    const dropdowns = findDropdowns();\n    const nativeCheckboxes = [...getAllElementsIncludingShadow('input[type=\"checkbox\"]')];  \n    const fauxCheckboxes = getAllElementsIncludingShadow('*').filter(el => {\n      if (checkboxPattern.test(el.className)) {\n        const realCheckboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]', el);\n        if (realCheckboxes.length === 1) {\n          const boundingRect = realCheckboxes[0].getBoundingClientRect();\n          return boundingRect.width <= 1 && boundingRect.height <= 1      \n        }\n      }\n      return false;\n    });\n    const nativeRadios = [...getAllElementsIncludingShadow('input[type=\"radio\"]')];\n    const toggles = findToggles();\n    const pointerElements = findElementsWithPointer();\n    // Add all elements at once\n    clickables.push(\n      ...nativeLinks,\n      ...nativeButtons,\n      ...inputButtons,\n      ...roleButtons,\n      // ...tabbable,\n      ...clickHandlers,\n      ...dropdowns,\n      ...nativeCheckboxes,\n      ...fauxCheckboxes,\n      ...nativeRadios,\n      ...toggles,\n      ...pointerElements\n    );\n\n    // Only uniquify once at the end\n    return clickables;  // Let findElements handle the uniquification\n  }\n\n  function findToggles() {\n    const toggles = [];\n    const checkboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]');\n    const togglePattern = /switch|toggle|slider/i;\n\n    checkboxes.forEach(checkbox => {\n      let isToggle = false;\n\n      // Check the checkbox itself\n      if (togglePattern.test(checkbox.className) || togglePattern.test(checkbox.getAttribute('role') || '')) {\n        isToggle = true;\n      }\n\n      // Check parent elements (up to 3 levels)\n      if (!isToggle) {\n        let element = checkbox;\n        for (let i = 0; i < 3; i++) {\n          const parent = element.parentElement;\n          if (!parent) break;\n\n          const className = parent.className || '';\n          const role = parent.getAttribute('role') || '';\n\n          if (togglePattern.test(className) || togglePattern.test(role)) {\n            isToggle = true;\n            break;\n          }\n          element = parent;\n        }\n      }\n\n      // Check next sibling\n      if (!isToggle) {\n        const nextSibling = checkbox.nextElementSibling;\n        if (nextSibling) {\n          const className = nextSibling.className || '';\n          const role = nextSibling.getAttribute('role') || '';\n          if (togglePattern.test(className) || togglePattern.test(role)) {\n            isToggle = true;\n          }\n        }\n      }\n\n      if (isToggle) {\n        toggles.push(checkbox);\n      }\n    });\n\n    return toggles;\n  }\n\n  function findNonInteractiveElements() {\n    // Get all elements in the document\n    const all = Array.from(getAllElementsIncludingShadow('*'));\n    \n    // Filter elements based on Python implementation rules\n    return all.filter(element => {\n      if (!element.firstElementChild) {\n        const tag = element.tagName.toLowerCase();      \n        if (!['select', 'button', 'a'].includes(tag)) {\n          const validTags = ['p', 'span', 'div', 'input', 'textarea'].includes(tag) || /^h\\d$/.test(tag) || /text/.test(tag);\n          const boundingRect = element.getBoundingClientRect();\n          return validTags && boundingRect.height > 1 && boundingRect.width > 1;\n        }\n      }\n      return false;\n    });\n  }\n\n\n\n  // export function findNonInteractiveElements() {\n  //   const all = [];\n  //   try {\n  //     const elements = getAllElementsIncludingShadow('*');\n  //     all.push(...elements);\n  //   } catch (e) {\n  //     console.warn('Error getting elements:', e);\n  //   }\n    \n  //   console.debug('Total elements found:', all.length);\n    \n  //   return all.filter(element => {\n  //     try {\n  //       const tag = element.tagName.toLowerCase();      \n\n  //       // Special handling for input elements\n  //       if (tag === 'input' || tag === 'textarea') {\n  //         const boundingRect = element.getBoundingClientRect();\n  //         const value = element.value || '';\n  //         const placeholder = element.placeholder || '';\n  //         return boundingRect.height > 1 && \n  //                boundingRect.width > 1 && \n  //                (value.trim() !== '' || placeholder.trim() !== '');\n  //       }\n\n       \n  //       // Check if it's a valid tag for text content\n  //       const validTags = ['p', 'span', 'div', 'label', 'th', 'td', 'li', 'button', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'select'].includes(tag) || \n  //                        /^h\\d$/.test(tag) || \n  //                        /text/.test(tag);\n\n  //       const boundingRect = element.getBoundingClientRect();\n\n  //       // Get direct text content, excluding child element text\n  //       let directText = '';\n  //       for (const node of element.childNodes) {\n  //         // Only include text nodes (nodeType 3)\n  //         if (node.nodeType === 3) {\n  //           directText += node.textContent || '';\n  //         }\n  //       }\n        \n  //       // If no direct text and it's a table cell or heading, check label content\n  //       if (!directText.trim() && (tag === 'th' || tag === 'td' || tag === 'h1')) {\n  //         const labels = element.getElementsByTagName('label');\n  //         for (const label of labels) {\n  //           directText += label.textContent || '';\n  //         }\n  //       }\n\n  //       // If still no text and it's a heading, get all text content\n  //       if (!directText.trim() && tag === 'h1') {\n  //         directText = element.textContent || '';\n  //       }\n\n  //       directText = directText.trim();\n\n  //       // Debug logging\n  //       if (directText) {\n  //         console.debugg('Text element found:', {\n  //           tag,\n  //           text: directText,\n  //           dimensions: boundingRect,\n  //           element\n  //         });\n  //       }\n\n  //       return validTags && \n  //              boundingRect.height > 1 && \n  //              boundingRect.width > 1 && \n  //              directText !== '';\n               \n  //     } catch (e) {\n  //       console.warn('Error processing element:', e);\n  //       return false;\n  //     }\n  //   });\n  // }\n\n\n\n\n\n  function findElementsWithPointer() {\n    const elements = [];\n    const allElements = getAllElementsIncludingShadow('*');\n    \n    console.log('Checking elements with pointer style...');\n    \n    allElements.forEach(element => {\n      // Skip SVG elements for now\n      if (element instanceof SVGElement || element.tagName.toLowerCase() === 'svg') {\n        return;\n      }\n      \n      const style = window.getComputedStyle(element);\n      if (style.cursor === 'pointer') {\n        elements.push(element);\n      }\n    });\n    \n    console.log(`Found ${elements.length} elements with pointer cursor`);\n    return elements;\n  }\n\n  function findCheckables() {\n    const elements = [];\n\n    elements.push(...getAllElementsIncludingShadow('input[type=\"checkbox\"]'));\n    elements.push(...getAllElementsIncludingShadow('input[type=\"radio\"]'));\n    const all_elements = getAllElementsIncludingShadow('label');\n    const radioClasses = Array.from(all_elements).filter(el => {\n      return /.*radio.*/i.test(el.className);    \n    });\n    elements.push(...radioClasses);\n    return elements;\n  }\n\n  function findFillables() {\n    const elements = [];\n\n    const inputs = [...getAllElementsIncludingShadow('input:not([type=\"radio\"]):not([type=\"checkbox\"])')];\n    console.log('Found inputs:', inputs.length, inputs);\n    elements.push(...inputs);\n    \n    const textareas = [...getAllElementsIncludingShadow('textarea')];\n    console.log('Found textareas:', textareas.length);\n    elements.push(...textareas);\n    \n    const editables = [...getAllElementsIncludingShadow('[contenteditable=\"true\"]')];\n    console.log('Found editables:', editables.length);\n    elements.push(...editables);\n\n    return elements;\n  }\n\n  // Helper function to check if element is a form control\n  function isFormControl(elementInfo) {\n    return /^(input|select|textarea|button|label)$/i.test(elementInfo.tag);\n  }\n\n  const isDropdownItem = (elementInfo) => {\n    const dropdownPatterns = [\n      /dropdown[-_]?item/i,    // matches: dropdown-item, dropdownitem, dropdown_item\n      /menu[-_]?item/i,        // matches: menu-item, menuitem, menu_item\n      /dropdown[-_]?link/i,    // matches: dropdown-link, dropdownlink, dropdown_link\n      /list[-_]?item/i,       // matches: list-item, listitem, list_item\n      /select[-_]?item/i,     // matches: select-item, selectitem, select_item  \n    ];\n\n    const rolePatterns = [\n      /menu[-_]?item/i,       // matches: menuitem, menu-item\n      /option/i,              // matches: option\n      /list[-_]?item/i,      // matches: listitem, list-item\n      /tree[-_]?item/i       // matches: treeitem, tree-item\n    ];\n\n    const hasMatchingClass = elementInfo.element.className && \n                            dropdownPatterns.some(pattern => \n                              pattern.test(elementInfo.element.className)\n                            );\n\n    const hasMatchingRole = elementInfo.element.getAttribute('role') && \n                           rolePatterns.some(pattern => \n                             pattern.test(elementInfo.element.getAttribute('role'))\n                           );\n\n    return hasMatchingClass || hasMatchingRole;\n  };\n\n  /**\n   * Finds the first element matching a CSS selector, traversing Shadow DOM if necessary\n   * @param {string} selector - CSS selector to search for\n   * @param {Element} [root=document] - Root element to start searching from\n   * @returns {Element|null} - The first matching element or null if not found\n   */\n  function querySelectorShadow(selector, root = document) {\n    // First try to find in light DOM\n    let element = root.querySelector(selector);\n    if (element) return element;\n    \n    // Get all elements with shadow root\n    const shadowElements = Array.from(root.querySelectorAll('*'))\n        .filter(el => el.shadowRoot);\n    \n    // Search through each shadow root until we find a match\n    for (const el of shadowElements) {\n        element = querySelectorShadow(selector, el.shadowRoot);\n        if (element) return element;\n    }\n    \n    return null;\n  }\n\n  const getElementByXPathOrCssSelector = (element_info) => {\n    let element;\n\n    console.log('getElementByXPathOrCssSelector:', element_info);\n    // if (element_info.xpath) { //try xpath if exists\n    //   element = document.evaluate(\n    //     element_info.xpath, \n    //     document, \n    //     null, \n    //     XPathResult.FIRST_ORDERED_NODE_TYPE, \n    //     null\n    //   ).singleNodeValue;\n    \n    //   if (!element) {\n    //     console.warn('Failed to find element with xpath:', element_info.xpath);\n    //   }\n    // }\n    // else { //try CSS selector\n      if (element_info.iframe_selector) {\n        console.log('elementInfo with iframe: ', element_info);\n        const frames = getAllDocumentElementsIncludingShadow('iframe');\n        \n        // Iterate over all frames and compare their CSS selectors\n        for (const frame of frames) {\n          const cssSelector = generateCssPath(frame);\n          if (cssSelector === element_info.iframe_selector) {\n            const frameDocument = frame.contentDocument || frame.contentWindow.document;\n            element = querySelectorShadow(element_info.css_selector, frameDocument);\n            console.log('found element ', element);\n            break;\n          }        \n        }    }\n      else\n        element = querySelectorShadow(element_info.css_selector);\n      // console.log('found element by CSS elector: ', element);\n      if (!element) {\n        console.warn('Failed to find element with CSS selector:', element_info.css_selector);\n      }\n    // }\n\n    return element;\n  };\n\n  function generateXPath(element) {\n    if (!element || element.getRootNode() instanceof ShadowRoot) return '';\n    \n    // If element has an id, use that (it's unique and shorter)\n    if (element.id) {\n      return `//*[@id=\"${element.id}\"]`;\n    }\n    \n    const parts = [];\n    let current = element;\n    \n    while (current && current.nodeType === Node.ELEMENT_NODE) {\n      let index = 1;\n      let sibling = current.previousSibling;\n      \n      while (sibling) {\n        if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === current.tagName) {\n          index++;\n        }\n        sibling = sibling.previousSibling;\n      }\n      \n      const tagName = current.tagName.toLowerCase();\n      parts.unshift(`${tagName}[${index}]`);\n      current = current.parentNode;\n    }\n    \n    return '/' + parts.join('/');\n  }\n\n  function isDecendent(parent, child) {\n    let element = child;\n    while (element.nodeType === Node.ELEMENT_NODE) {    \n      \n      if (element.assignedSlot) {\n        element = element.assignedSlot;\n      }\n      else {\n        element = element.parentNode;\n        // Check if we're at a shadow root\n        if (element && element.nodeType !== Node.ELEMENT_NODE && element.getRootNode() instanceof ShadowRoot) {\n          // Get the shadow root's host element\n          element = element.getRootNode().host;     \n        }\n      }\n      if (element === parent)\n        return true;\n    }\n    return false;\n  }\n\n  function generateCssPath(element) {\n    if (!element) {\n      console.error('ERROR: No element provided to generateCssPath returning empty string');\n      return '';\n    }\n    const path = [];\n    // console.group('Generating CSS path for:', element);\n    while (element && element.nodeType === Node.ELEMENT_NODE) {    \n      let selector = element.nodeName.toLowerCase();\n      // console.log('Element:', selector, element);\n      \n      // if (element.id) {\n      //   //escape special characters\n      //   const normalized_id = element.id.replace(/[:;.#()[\\]!@$%^&*]/g, '\\\\$&');\n      //   selector = `#${normalized_id}`;\n      //   path.unshift(selector);\n      //   break;\n      // } \n      \n      let sibling = element;\n      let nth = 1;\n      while (sibling = sibling.previousElementSibling) {\n        if (sibling.nodeName.toLowerCase() === selector) nth++;\n      }\n      sibling = element;\n      while (sibling = sibling.nextElementSibling) {\n        if (sibling.nodeName.toLowerCase() === selector) {\n          break;\n        }\n      }\n      selector += `:nth-of-type(${nth})`;\n   \n    \n      path.unshift(selector);\n      //console.log(`  Current path: ${path.join(' > ')}`);\n\n      if (element.assignedSlot) {\n        element = element.assignedSlot;\n        // console.log('  Moving to assigned slot');\n      }\n      else {\n        element = element.parentNode;\n        // console.log('  Moving to parent:', element);\n\n        // Check if we're at a shadow root\n        if (element && element.nodeType !== Node.ELEMENT_NODE && element.getRootNode() instanceof ShadowRoot) {\n          console.log('  Found shadow root, moving to host');\n          // Get the shadow root's host element\n          element = element.getRootNode().host;     \n        }\n      }\n    }\n    \n    // console.log('Final selector:', path.join(' > '));\n    // console.groupEnd();\n    return path.join(' > ');\n  }\n\n\n  function cleanHTML(rawHTML) {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(rawHTML, \"text/html\");\n\n    function cleanElement(element) {\n      const allowedAttributes = new Set([\n        \"role\",\n        \"type\",\n        \"class\",\n        \"href\",\n        \"alt\",\n        \"title\",\n        \"readonly\",\n        \"checked\",\n        \"enabled\",\n        \"disabled\",\n      ]);\n\n      [...element.attributes].forEach(attr => {\n        const name = attr.name.toLowerCase();\n        const value = attr.value;\n\n        const isTestAttribute = /^(testid|test-id|data-test-id)$/.test(name);\n        const isDataAttribute = name.startsWith(\"data-\") && value;\n        const isBooleanAttribute = [\"readonly\", \"checked\", \"enabled\", \"disabled\"].includes(name);\n\n        if (!allowedAttributes.has(name) && !isDataAttribute && !isTestAttribute && !isBooleanAttribute) {\n          element.removeAttribute(name);\n        }\n      });\n\n      // Handle SVG content - more aggressive replacement\n      if (element.tagName.toLowerCase() === \"svg\") {\n        // Remove all attributes except class and role\n        [...element.attributes].forEach(attr => {\n          const name = attr.name.toLowerCase();\n          if (name !== \"class\" && name !== \"role\") {\n            element.removeAttribute(name);\n          }\n        });\n        element.innerHTML = \"CONTENT REMOVED\";\n      } else {\n        // Recursively clean child elements\n        Array.from(element.children).forEach(cleanElement);\n      }\n\n      // Only remove empty elements that aren't semantic or icon elements\n      const keepEmptyElements = ['i', 'span', 'svg', 'button', 'input'];\n      if (!keepEmptyElements.includes(element.tagName.toLowerCase()) && \n          !element.children.length && \n          !element.textContent.trim()) {\n        element.remove();\n      }\n    }\n\n    // Process all elements in the document body\n    Array.from(doc.body.children).forEach(cleanElement);\n    return doc.body.innerHTML;\n  }\n\n  function getContainingIframe(element) {\n    // If not in an iframe, return null\n    if (element.ownerDocument.defaultView === window.top) {\n      return null;\n    }\n    \n    // Try to find the iframe in the parent document that contains our element\n    try {\n      const parentDocument = element.ownerDocument.defaultView.parent.document;\n      const iframes = parentDocument.querySelectorAll('iframe');\n      \n      for (const iframe of iframes) {\n        if (iframe.contentWindow === element.ownerDocument.defaultView) {\n          return iframe;\n        }\n      }\n    } catch (e) {\n      // Cross-origin restriction\n      return \"Cross-origin iframe - cannot access details\";\n    }\n    \n    return null;\n  }\n\n  function getElementInfo(element, index) {\n\n    const xpath = generateXPath(element);\n    const css_selector = generateCssPath(element);\n\n    const iframe = getContainingIframe(element);\n    const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\n\n    // Return element info with pre-calculated values\n    return new ElementInfo(element, index, {\n      tag: element.tagName.toLowerCase(),\n      type: element.type || '',\n      text: element.innerText || element.placeholder || '', //getTextContent(element),\n      html: cleanHTML(element.outerHTML),\n      xpath: xpath,\n      css_selector: css_selector,\n      bounding_box: element.getBoundingClientRect(),\n      iframe_selector: iframe_selector\n    });\n  }\n\n\n\n\n  const filterZeroDimensions = (elementInfo) => {\n    const rect = elementInfo.bounding_box;\n    //single pixel elements are typically faux controls and should be filtered too\n    const hasSize = rect.width > 1 && rect.height > 1;\n    const style = window.getComputedStyle(elementInfo.element);\n    const isVisible = style.display !== 'none' && style.visibility !== 'hidden';\n    \n    if (!hasSize || !isVisible) {\n      // if (elementInfo.element.isConnected) {\n      //   console.log('Filtered out invisible/zero-size element:', {\n      //     tag: elementInfo.tag,\n      //     xpath: elementInfo.xpath,\n      //     element: elementInfo.element,\n      //     hasSize,\n      //     isVisible,\n      //     dimensions: rect\n      //   });\n      // }\n      return false;\n    }\n    return true;\n  };\n\n\n\n  function uniquifyElements(elements) {\n    const seen = new Set();\n\n    console.log(`Starting uniquification with ${elements.length} elements`);\n\n    // Filter out testing infrastructure elements first\n    const filteredInfrastructure = elements.filter(element_info => {\n      // Skip the highlight-overlay element completely - it's part of the testing infrastructure\n      if (element_info.element.id === 'highlight-overlay' || \n          (element_info.css_selector && element_info.css_selector.includes('#highlight-overlay'))) {\n        console.log('Filtered out testing infrastructure element:', element_info.css_selector);\n        return false;\n      }\n      \n      // Filter out UI framework container/manager elements\n      const el = element_info.element;\n      // UI framework container checks - generic detection for any framework\n      if ((el.getAttribute('data-rendered-by') || \n           el.getAttribute('data-reactroot') || \n           el.getAttribute('ng-version') || \n           el.getAttribute('data-component-id') ||\n           el.getAttribute('data-root') ||\n           el.getAttribute('data-framework')) && \n          (el.className && \n           typeof el.className === 'string' && \n           (el.className.includes('Container') || \n            el.className.includes('container') || \n            el.className.includes('Manager') || \n            el.className.includes('manager')))) {\n        console.log('Filtered out UI framework container element:', element_info.css_selector);\n        return false;\n      }\n      \n      // Direct filter for framework container elements that shouldn't be interactive\n      // Consolidating multiple container detection patterns into one efficient check\n      const isFullViewport = element_info.bounding_box && \n                           element_info.bounding_box.x <= 5 && \n                           element_info.bounding_box.y <= 5 && \n                           element_info.bounding_box.width >= (window.innerWidth * 0.95) && \n                           element_info.bounding_box.height >= (window.innerHeight * 0.95);\n                           \n      // Empty content check\n      const isEmpty = !el.innerText || el.innerText.trim() === '';\n      \n      // Check if it's a framework container element\n      if (element_info.element.tagName === 'DIV' && \n          isFullViewport && \n          isEmpty && \n          (\n            // Pattern matching for root containers\n            (element_info.xpath && \n              (element_info.xpath.match(/^\\/html\\[\\d+\\]\\/body\\[\\d+\\]\\/div\\[\\d+\\]\\/div\\[\\d+\\]$/) || \n               element_info.xpath.match(/^\\/\\/\\*\\[@id='[^']+'\\]\\/div\\[\\d+\\]$/))) ||\n            \n            // Simple DOM structure\n            (element_info.css_selector.split(' > ').length <= 4 && element_info.depth <= 5) ||\n            \n            // Empty or container-like classes\n            (!el.className || el.className === '' || \n             (typeof el.className === 'string' && \n              (el.className.includes('overlay') || \n               el.className.includes('container') || \n               el.className.includes('wrapper'))))\n          )) {\n        console.log('Filtered out framework container element:', element_info.css_selector);\n        return false;\n      }\n      \n      return true;\n    });\n\n    // First filter out elements with zero dimensions\n    const nonZeroElements = filteredInfrastructure.filter(filterZeroDimensions);\n    // sort by CSS selector depth so parents are processed first\n    nonZeroElements.sort((a, b) => a.getDepth() - b.getDepth());\n    console.log(`After dimension filtering: ${nonZeroElements.length} elements remain (${elements.length - nonZeroElements.length} removed)`);\n    \n    const filteredByParent = nonZeroElements.filter(element_info => {\n\n      const parent = findClosestParent(seen, element_info);\n      const keep = parent == null || shouldKeepNestedElement(element_info, parent);\n      // console.log(\"node \", element_info.index, \": keep=\", keep, \" parent=\", parent);\n      // if (!keep && !element_info.xpath) {\n      //   console.log(\"Filtered out element \", element_info,\" because it's a nested element of \", parent);\n      // }\n      if (keep)\n        seen.add(element_info.css_selector);\n\n      return keep;\n    });\n\n    console.log(`After parent/child filtering: ${filteredByParent.length} elements remain (${nonZeroElements.length - filteredByParent.length} removed)`);\n\n    // Final overlap filtering\n    const filteredResults = filteredByParent.filter(element => {\n\n       // Look for any element that came BEFORE this one in the array\n      const hasEarlierOverlap = filteredByParent.some(other => {\n        // Only check elements that came before (lower index)\n        if (filteredByParent.indexOf(other) >= filteredByParent.indexOf(element)) {\n          return false;\n        }\n        \n        const isOverlapping = areElementsOverlapping(element, other); \n        return isOverlapping;\n      });  \n\n      // Keep element if it has no earlier overlapping elements\n      return !hasEarlierOverlap;\n    });\n    \n    \n    \n    // Check for overlay removal\n    console.log(`After filtering: ${filteredResults.length} (${filteredByParent.length - filteredResults.length} removed by overlap)`);\n    \n    const nonOverlaidElements = filteredResults.filter(element => {\n      return !isOverlaid(element);\n    });\n\n    console.log(`Final elements after overlay removal: ${nonOverlaidElements.length} (${filteredResults.length - nonOverlaidElements.length} removed)`);\n    \n    return nonOverlaidElements;\n\n  }\n\n\n\n  const areElementsOverlapping = (element1, element2) => {\n    if (element1.css_selector === element2.css_selector) {\n      return true;\n    }\n    \n    const box1 = element1.bounding_box;\n    const box2 = element2.bounding_box;\n    \n    return box1.x === box2.x &&\n           box1.y === box2.y &&\n           box1.width === box2.width &&\n           box1.height === box2.height;\n          //  element1.text === element2.text &&\n          //  element2.tag === 'a';\n  };\n\n  function findClosestParent(seen, element_info) {  \n    // //Use element child/parent queries\n    // let parent = element_info.element.parentNode;\n    // if (parent.getRootNode() instanceof ShadowRoot) {\n    //   // Get the shadow root's host element\n    //   parent = parent.getRootNode().host;    \n    // }\n\n    // while (parent.nodeType === Node.ELEMENT_NODE) {    \n    //   const css_selector = generateCssPath(parent);\n    //   if (seen.has(css_selector)) {\n    //       console.log(\"element \", element_info, \" closest parent is \", parent)\n    //       return parent;      \n    //   }\n    //   parent = parent.parentNode;\n    //   if (parent.getRootNode() instanceof ShadowRoot) {\n    //     // Get the shadow root's host element\n    //     parent = parent.getRootNode().host;      \n    //   }\n    // }\n\n    // Split the xpath into segments\n    const segments = element_info.css_selector.split(' > ');\n    \n    // Try increasingly shorter paths until we find one in the seen set\n    for (let i = segments.length - 1; i > 0; i--) {\n      const parentPath = segments.slice(0, i).join(' > ');\n      if (seen.has(parentPath)) {\n        return parentPath;\n      }\n    }\n\n    return null;\n  }\n\n  function shouldKeepNestedElement(elementInfo, parentPath) {\n    let result = false;\n    const parentSegments = parentPath.split(' > ');\n\n    const isParentLink = /^a(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\n    if (isParentLink) {\n      return false;    \n    }\n    // If this is a checkbox/radio input\n    if (elementInfo.tag === 'input' && \n        (elementInfo.type === 'checkbox' || elementInfo.type === 'radio')) {\n      \n      // Check if parent is a label by looking at the parent xpath's last segment\n      \n      const isParentLabel = /^label(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\n      \n      // If parent is a label, don't keep the input (we'll keep the label instead)\n      if (isParentLabel) {\n        return false;\n      }\n    }\n    \n    // Keep all other form controls and dropdown items\n    if (isFormControl(elementInfo) || isDropdownItem(elementInfo)) {\n      result = true;\n    }\n\n    if(isTableCell(elementInfo)) {\n      result = true;\n    }\n    \n    \n    // console.log(`shouldKeepNestedElement: ${elementInfo.tag} ${elementInfo.text} ${elementInfo.xpath} -> ${parentXPath} -> ${result}`);\n    return result;\n  }\n\n\n  function isTableCell(elementInfo) {\n    const element = elementInfo.element;\n    if(!element || !(element instanceof HTMLElement)) {\n      return false;\n    }\n    const validTags = new Set(['td', 'th']);\n    const validRoles = new Set(['cell', 'gridcell', 'columnheader', 'rowheader']);\n    \n    const tag = element.tagName.toLowerCase();\n    const role = element.getAttribute('role')?.toLowerCase();\n\n    if (validTags.has(tag) || (role && validRoles.has(role))) {\n      return true;\n    }\n    return false;\n    \n  }\n\n  function isOverlaid(elementInfo) {\n    const element = elementInfo.element;\n    const boundingRect = elementInfo.bounding_box;\n    \n\n    \n    \n    // Create a diagnostic logging function that only logs when needed\n    const diagnosticLog = (...args) => {\n      { // set to true for debugging\n        console.log('[OVERLAY-DEBUG]', ...args);\n      }\n    };\n\n    // Special handling for tooltips\n    if (elementInfo.element.className && typeof elementInfo.element.className === 'string' && \n        elementInfo.element.className.includes('tooltip')) {\n      diagnosticLog('Element is a tooltip, not considering it overlaid');\n      return false;\n    }\n    \n    \n      \n        // Get element at the center point to check if it's covered by a popup/modal\n        const middleX = boundingRect.x + boundingRect.width/2;\n        const middleY = boundingRect.y + boundingRect.height/2;\n        const elementAtMiddle = element.ownerDocument.elementFromPoint(middleX, middleY);\n        \n        if (elementAtMiddle && \n            elementAtMiddle !== element && \n            !isDecendent(element, elementAtMiddle) && \n            !isDecendent(elementAtMiddle, element)) {\n\n        // Add detailed logging for overlaid elements with formatted output\n        console.log('[OVERLAY-DEBUG]', JSON.stringify({\n          originalElement: {\n            selector: elementInfo.css_selector,\n            rect: {\n              x: boundingRect.x,\n              y: boundingRect.y,\n              width: boundingRect.width,\n              height: boundingRect.height,\n              top: boundingRect.top,\n              right: boundingRect.right,\n              bottom: boundingRect.bottom,\n              left: boundingRect.left\n            }\n          },\n          overlayingElement: {\n            selector: generateCssPath(elementAtMiddle),\n            rect: {\n              x: elementAtMiddle.getBoundingClientRect().x,\n              y: elementAtMiddle.getBoundingClientRect().y,\n              width: elementAtMiddle.getBoundingClientRect().width,\n              height: elementAtMiddle.getBoundingClientRect().height,\n              top: elementAtMiddle.getBoundingClientRect().top,\n              right: elementAtMiddle.getBoundingClientRect().right,\n              bottom: elementAtMiddle.getBoundingClientRect().bottom,\n              left: elementAtMiddle.getBoundingClientRect().left\n            }\n          },\n          middlePoint: { x: middleX, y: middleY }\n        }, null, 2));\n\n        console.log('[OVERLAY-REMOVED]', elementInfo.css_selector, elementInfo.bounding_box, 'elementAtMiddle:', elementAtMiddle, 'elementAtMiddle selector:', generateCssPath(elementAtMiddle));\n        return true;\n      }\n        \n        // Check specifically if the element at middle is a popup/modal\n        // if (elementAtMiddle && isElementOrAncestorPopup(elementAtMiddle)) {\n        //   diagnosticLog('Element at middle is a popup/modal, element IS overlaid');\n        //   return true; // It's under a popup, so it is overlaid\n        // }\n        return false;\n    //   }\n    //   return false;\n    }\n\n  const highlight = {\n    execute: async function(elementTypes, handleScroll=false) {\n      const elements = await findElements(elementTypes);\n      highlightElements(elements, handleScroll);\n      return elements;\n    },\n\n    unexecute: function(handleScroll=false) {\n      unhighlightElements(handleScroll);\n    },\n\n    generateJSON: async function() {\n      const json = {};\n\n     // Capture viewport dimensions\n     const viewportData = {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      documentWidth: document.documentElement.clientWidth,\n      documentHeight: document.documentElement.clientHeight,\n      timestamp: new Date().toISOString()\n    };\n\n      // Add viewport data to the JSON output\n      json.viewport = viewportData;\n\n\n      await Promise.all(Object.values(ElementTag).map(async elementType => {\n        const elements = await findElements(elementType);\n        json[elementType] = elements;\n      }));\n\n      // Serialize the JSON object\n      const jsonString = JSON.stringify(json, null, 4); // Pretty print with 4 spaces\n\n      console.log(`JSON: ${jsonString}`);\n      return jsonString;\n    },\n\n    getElementInfo\n  };\n\n\n  function unhighlightElements(handleScroll=false) {\n    const documents = getAllFrames();\n    documents.forEach(doc => {\n      const overlay = doc.getElementById('highlight-overlay');\n      if (overlay) {\n        if (handleScroll) {\n          // Remove event listeners\n          doc.removeEventListener('scroll', overlay.scrollHandler, true);\n          doc.removeEventListener('resize', overlay.resizeHandler);\n        }\n        overlay.remove();\n      }\n    });\n  }\n\n\n\n\n  async function findElements(elementTypes, verbose=true) {\n    const typesArray = Array.isArray(elementTypes) ? elementTypes : [elementTypes];\n    console.log('Starting element search for types:', typesArray);\n\n    const elements = [];\n    typesArray.forEach(elementType => {\n      if (elementType === ElementTag.FILLABLE) {\n        elements.push(...findFillables());\n      }\n      if (elementType === ElementTag.SELECTABLE) {\n        elements.push(...findDropdowns());\n      }\n      if (elementType === ElementTag.CLICKABLE) {\n        elements.push(...findClickables());\n        elements.push(...findToggles());\n        elements.push(...findCheckables());\n      }\n      if (elementType === ElementTag.NON_INTERACTIVE_ELEMENT) {\n        elements.push(...findNonInteractiveElements());\n      }\n    });\n\n    // console.log('Before uniquify:', elements.length);\n    const elementsWithInfo = elements.map((element, index) => \n      getElementInfo(element, index)\n    );\n\n    \n    \n    const uniqueElements = uniquifyElements(elementsWithInfo);\n    console.log(`Found ${uniqueElements.length} elements:`);\n    \n    // More comprehensive visibility check\n    const visibleElements = uniqueElements.filter(elementInfo => {\n      const el = elementInfo.element;\n      const style = getComputedStyle(el);\n      \n      // Check various style properties that affect visibility\n      if (style.display === 'none' || \n          style.visibility === 'hidden') {\n        return false;\n      }\n      \n      // Check if element has non-zero dimensions\n      const rect = el.getBoundingClientRect();\n      if (rect.width === 0 || rect.height === 0) {\n        return false;\n      }\n      \n      // Check if element is within viewport\n      if (rect.bottom < 0 || \n          rect.top > window.innerHeight || \n          rect.right < 0 || \n          rect.left > window.innerWidth) {\n        // Element is outside viewport, but still might be valid \n        // if user scrolls to it, so we'll include it\n        return true;\n      }\n      \n      return true;\n    });\n    \n    console.log(`Out of which ${visibleElements.length} elements are visible:`);\n    if (verbose) {\n      visibleElements.forEach(info => {\n        console.log(`Element ${info.index}:`, info);\n      });\n    }\n    \n    return visibleElements;\n  }\n\n  // elements is an array of objects with index, xpath\n  function highlightElements(elements, handleScroll=false) {\n    // console.log('Starting highlight for elements:', elements);\n    \n    // Create overlay if it doesn't exist and store it in a dictionary\n    const documents = getAllFrames();  \n    let overlays = {};\n    documents.forEach(doc => {\n      let overlay = doc.getElementById('highlight-overlay');\n      if (!overlay) {\n        overlay = doc.createElement('div');\n        overlay.id = 'highlight-overlay';\n        overlay.style.cssText = `\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        z-index: 2147483647;\n      `;\n        doc.body.appendChild(overlay);\n      }\n      overlays[doc.documentURI] = overlay;\n    });\n    \n\n    const updateHighlights = (doc = null) => {\n      if (doc) {\n        overlays[doc.documentURI].innerHTML = '';\n      } else {\n        Object.values(overlays).forEach(overlay => { overlay.innerHTML = ''; });\n      }    \n      elements.forEach(elementInfo => {\n        // console.log('updateHighlights-Processing elementInfo:', elementInfo);\n        let element = elementInfo.element; //getElementByXPathOrCssSelector(elementInfo);\n        if (!element) {\n          element = getElementByXPathOrCssSelector(elementInfo);\n          if (!element)\n            return;\n        }\n        \n        //if highlights requested for a specific doc, skip unrelated elements\n        if (doc && element.ownerDocument !== doc) {\n          console.log(\"skipped element \", element, \" since it doesn't belong to document \", doc);\n          return;\n        }\n\n        const rect = element.getBoundingClientRect();\n        // console.log('Element rect:', elementInfo.tag, rect);\n        \n        if (rect.width === 0 || rect.height === 0) {\n          console.warn('Element has zero dimensions:', elementInfo);\n          return;\n        }\n        \n        // Create border highlight (red rectangle)\n        // use ownerDocument to support iframes/frames\n        const highlight = element.ownerDocument.createElement('div');\n        highlight.style.cssText = `\n        position: fixed;\n        left: ${rect.x}px;\n        top: ${rect.y}px;\n        width: ${rect.width}px;\n        height: ${rect.height}px;\n        border: 1px solid rgb(255, 0, 0);\n        transition: all 0.2s ease-in-out;\n      `;\n\n        // Create index label container - now positioned to the right and slightly up\n        const labelContainer = element.ownerDocument.createElement('div');\n        labelContainer.style.cssText = `\n        position: absolute;\n        right: -10px;     /* Offset to the right */\n        top: -10px;       /* Offset upwards */\n        padding: 4px;\n        background-color: rgba(255, 255, 0, 0.6);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      `;\n\n        const text = element.ownerDocument.createElement('span');\n        text.style.cssText = `\n        color: rgb(0, 0, 0, 0.8);\n        font-family: 'Courier New', Courier, monospace;\n        font-size: 12px;\n        font-weight: bold;\n        line-height: 1;\n      `;\n        text.textContent = elementInfo.index;\n        \n        labelContainer.appendChild(text);\n        highlight.appendChild(labelContainer);      \n        overlays[element.ownerDocument.documentURI].appendChild(highlight);\n      });\n    };\n\n    // Initial highlight\n    updateHighlights();\n\n    if (handleScroll) {\n      documents.forEach(doc => {\n        // Update highlights on scroll and resize\n        console.log('registering scroll and resize handlers for document: ', doc);\n        const scrollHandler = () => {\n          requestAnimationFrame(() => updateHighlights(doc));\n        };\n        const resizeHandler = () => {\n          updateHighlights(doc);\n        };\n        doc.addEventListener('scroll', scrollHandler, true);\n        doc.addEventListener('resize', resizeHandler);\n        // Store event handlers for cleanup\n        overlays[doc.documentURI].scrollHandler = scrollHandler;\n        overlays[doc.documentURI].resizeHandler = resizeHandler;\n      });    \n    }\n  }\n\n  // function unexecute() {\n  //   unhighlightElements();\n  // }\n\n  // Make it available globally for both Extension and Playwright\n  if (typeof window !== 'undefined') {\n    window.ProboLabs = {\n      ElementTag,\n      highlight,\n      unhighlightElements,\n      findElements,\n      highlightElements,\n      getElementInfo\n    };\n  }\n\n  exports.findElements = findElements;\n  exports.getElementInfo = getElementInfo;\n  exports.highlight = highlight;\n  exports.highlightElements = highlightElements;\n  exports.unhighlightElements = unhighlightElements;\n\n  Object.defineProperty(exports, '__esModule', { value: true });\n\n}));\n//# sourceMappingURL=probolabs.umd.js.map\n";
-import winston from 'winston';
-
-const ElementTag = {
-  CLICKABLE: "CLICKABLE", // button, link, toggle switch, checkbox, radio, dropdowns, clickable divs
-  FILLABLE: "FILLABLE", // input, textarea content_editable, date picker??
-  SELECTABLE: "SELECTABLE", // select
-  NON_INTERACTIVE_ELEMENT: 'NON_INTERACTIVE_ELEMENT',
-};
+const highlighterCode = "(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n  typeof define === 'function' && define.amd ? define(['exports'], factory) :\n  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ProboLabs = {}));\n})(this, (function (exports) { 'use strict';\n\n  const ElementTag = {\n    CLICKABLE: \"CLICKABLE\", // button, link, toggle switch, checkbox, radio, dropdowns, clickable divs\n    FILLABLE: \"FILLABLE\", // input, textarea content_editable, date picker??\n    SELECTABLE: \"SELECTABLE\", // select\n    NON_INTERACTIVE_ELEMENT: 'NON_INTERACTIVE_ELEMENT',\n  };\n\n  class ElementInfo {\n    constructor(element, index, {tag, type, text, html, xpath, css_selector, bounding_box, iframe_selector, short_css_selector, short_iframe_selector}) {\n      this.index = index.toString();\n      this.tag = tag;\n      this.type = type;\n      this.text = text;\n      this.html = html;\n      this.xpath = xpath;\n      this.css_selector = css_selector;\n      this.bounding_box = bounding_box;\n      this.iframe_selector = iframe_selector;\n      this.element = element;\n      this.depth = -1;\n      this.short_css_selector = short_css_selector;\n      this.short_iframe_selector = short_iframe_selector;\n    }\n\n    getSelector() {\n      return this.xpath ? this.xpath : this.css_selector;\n    }\n\n    getDepth() {\n      if (this.depth >= 0) {\n        return this.depth;\n      }\n      \n      this.depth = 0;\n      let currentElement = this.element;\n      \n      while (currentElement.nodeType === Node.ELEMENT_NODE) {          \n        this.depth++;\n        if (currentElement.assignedSlot) {\n          currentElement = currentElement.assignedSlot;\n        }\n        else {\n          currentElement = currentElement.parentNode;\n          // Check if we're at a shadow root\n          if (currentElement && currentElement.nodeType !== Node.ELEMENT_NODE && currentElement.getRootNode() instanceof ShadowRoot) {\n            // Get the shadow root's host element\n            currentElement = currentElement.getRootNode().host;     \n          }\n        }\n      }\n          \n      return this.depth;\n    }\n  }\n\n  // License: MIT\n  // Author: Anton Medvedev <anton@medv.io>\n  // Source: https://github.com/antonmedv/finder\n  const acceptedAttrNames = new Set(['role', 'name', 'aria-label', 'rel', 'href']);\n  /** Check if attribute name and value are word-like. */\n  function attr(name, value) {\n      let nameIsOk = acceptedAttrNames.has(name);\n      nameIsOk ||= name.startsWith('data-') && wordLike(name);\n      let valueIsOk = wordLike(value) && value.length < 100;\n      valueIsOk ||= value.startsWith('#') && wordLike(value.slice(1));\n      return nameIsOk && valueIsOk;\n  }\n  /** Check if id name is word-like. */\n  function idName(name) {\n      return wordLike(name);\n  }\n  /** Check if class name is word-like. */\n  function className(name) {\n      return wordLike(name);\n  }\n  /** Check if tag name is word-like. */\n  function tagName(name) {\n      return true;\n  }\n  /** Finds unique CSS selectors for the given element. */\n  function finder(input, options) {\n      if (input.nodeType !== Node.ELEMENT_NODE) {\n          throw new Error(`Can't generate CSS selector for non-element node type.`);\n      }\n      if (input.tagName.toLowerCase() === 'html') {\n          return 'html';\n      }\n      const defaults = {\n          root: document.body,\n          idName: idName,\n          className: className,\n          tagName: tagName,\n          attr: attr,\n          timeoutMs: 1000,\n          seedMinLength: 3,\n          optimizedMinLength: 2,\n          maxNumberOfPathChecks: Infinity,\n      };\n      const startTime = new Date();\n      const config = { ...defaults, ...options };\n      const rootDocument = findRootDocument(config.root, defaults);\n      let foundPath;\n      let count = 0;\n      for (const candidate of search(input, config, rootDocument)) {\n          const elapsedTimeMs = new Date().getTime() - startTime.getTime();\n          if (elapsedTimeMs > config.timeoutMs ||\n              count >= config.maxNumberOfPathChecks) {\n              const fPath = fallback(input, rootDocument);\n              if (!fPath) {\n                  throw new Error(`Timeout: Can't find a unique selector after ${config.timeoutMs}ms`);\n              }\n              return selector(fPath);\n          }\n          count++;\n          if (unique(candidate, rootDocument)) {\n              foundPath = candidate;\n              break;\n          }\n      }\n      if (!foundPath) {\n          throw new Error(`Selector was not found.`);\n      }\n      const optimized = [\n          ...optimize(foundPath, input, config, rootDocument, startTime),\n      ];\n      optimized.sort(byPenalty);\n      if (optimized.length > 0) {\n          return selector(optimized[0]);\n      }\n      return selector(foundPath);\n  }\n  function* search(input, config, rootDocument) {\n      const stack = [];\n      let paths = [];\n      let current = input;\n      let i = 0;\n      while (current && current !== rootDocument) {\n          const level = tie(current, config);\n          for (const node of level) {\n              node.level = i;\n          }\n          stack.push(level);\n          current = current.parentElement;\n          i++;\n          paths.push(...combinations(stack));\n          if (i >= config.seedMinLength) {\n              paths.sort(byPenalty);\n              for (const candidate of paths) {\n                  yield candidate;\n              }\n              paths = [];\n          }\n      }\n      paths.sort(byPenalty);\n      for (const candidate of paths) {\n          yield candidate;\n      }\n  }\n  function wordLike(name) {\n      if (/^[a-z\\-]{3,}$/i.test(name)) {\n          const words = name.split(/-|[A-Z]/);\n          for (const word of words) {\n              if (word.length <= 2) {\n                  return false;\n              }\n              if (/[^aeiou]{4,}/i.test(word)) {\n                  return false;\n              }\n          }\n          return true;\n      }\n      return false;\n  }\n  function tie(element, config) {\n      const level = [];\n      const elementId = element.getAttribute('id');\n      if (elementId && config.idName(elementId)) {\n          level.push({\n              name: '#' + CSS.escape(elementId),\n              penalty: 0,\n          });\n      }\n      for (let i = 0; i < element.classList.length; i++) {\n          const name = element.classList[i];\n          if (config.className(name)) {\n              level.push({\n                  name: '.' + CSS.escape(name),\n                  penalty: 1,\n              });\n          }\n      }\n      for (let i = 0; i < element.attributes.length; i++) {\n          const attr = element.attributes[i];\n          if (config.attr(attr.name, attr.value)) {\n              level.push({\n                  name: `[${CSS.escape(attr.name)}=\"${CSS.escape(attr.value)}\"]`,\n                  penalty: 2,\n              });\n          }\n      }\n      const tagName = element.tagName.toLowerCase();\n      if (config.tagName(tagName)) {\n          level.push({\n              name: tagName,\n              penalty: 5,\n          });\n          const index = indexOf(element, tagName);\n          if (index !== undefined) {\n              level.push({\n                  name: nthOfType(tagName, index),\n                  penalty: 10,\n              });\n          }\n      }\n      const nth = indexOf(element);\n      if (nth !== undefined) {\n          level.push({\n              name: nthChild(tagName, nth),\n              penalty: 50,\n          });\n      }\n      return level;\n  }\n  function selector(path) {\n      let node = path[0];\n      let query = node.name;\n      for (let i = 1; i < path.length; i++) {\n          const level = path[i].level || 0;\n          if (node.level === level - 1) {\n              query = `${path[i].name} > ${query}`;\n          }\n          else {\n              query = `${path[i].name} ${query}`;\n          }\n          node = path[i];\n      }\n      return query;\n  }\n  function penalty(path) {\n      return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);\n  }\n  function byPenalty(a, b) {\n      return penalty(a) - penalty(b);\n  }\n  function indexOf(input, tagName) {\n      const parent = input.parentNode;\n      if (!parent) {\n          return undefined;\n      }\n      let child = parent.firstChild;\n      if (!child) {\n          return undefined;\n      }\n      let i = 0;\n      while (child) {\n          if (child.nodeType === Node.ELEMENT_NODE &&\n              (tagName === undefined ||\n                  child.tagName.toLowerCase() === tagName)) {\n              i++;\n          }\n          if (child === input) {\n              break;\n          }\n          child = child.nextSibling;\n      }\n      return i;\n  }\n  function fallback(input, rootDocument) {\n      let i = 0;\n      let current = input;\n      const path = [];\n      while (current && current !== rootDocument) {\n          const tagName = current.tagName.toLowerCase();\n          const index = indexOf(current, tagName);\n          if (index === undefined) {\n              return;\n          }\n          path.push({\n              name: nthOfType(tagName, index),\n              penalty: NaN,\n              level: i,\n          });\n          current = current.parentElement;\n          i++;\n      }\n      if (unique(path, rootDocument)) {\n          return path;\n      }\n  }\n  function nthChild(tagName, index) {\n      if (tagName === 'html') {\n          return 'html';\n      }\n      return `${tagName}:nth-child(${index})`;\n  }\n  function nthOfType(tagName, index) {\n      if (tagName === 'html') {\n          return 'html';\n      }\n      return `${tagName}:nth-of-type(${index})`;\n  }\n  function* combinations(stack, path = []) {\n      if (stack.length > 0) {\n          for (let node of stack[0]) {\n              yield* combinations(stack.slice(1, stack.length), path.concat(node));\n          }\n      }\n      else {\n          yield path;\n      }\n  }\n  function findRootDocument(rootNode, defaults) {\n      if (rootNode.nodeType === Node.DOCUMENT_NODE) {\n          return rootNode;\n      }\n      if (rootNode === defaults.root) {\n          return rootNode.ownerDocument;\n      }\n      return rootNode;\n  }\n  function unique(path, rootDocument) {\n      const css = selector(path);\n      switch (rootDocument.querySelectorAll(css).length) {\n          case 0:\n              throw new Error(`Can't select any node with this selector: ${css}`);\n          case 1:\n              return true;\n          default:\n              return false;\n      }\n  }\n  function* optimize(path, input, config, rootDocument, startTime) {\n      if (path.length > 2 && path.length > config.optimizedMinLength) {\n          for (let i = 1; i < path.length - 1; i++) {\n              const elapsedTimeMs = new Date().getTime() - startTime.getTime();\n              if (elapsedTimeMs > config.timeoutMs) {\n                  return;\n              }\n              const newPath = [...path];\n              newPath.splice(i, 1);\n              if (unique(newPath, rootDocument) &&\n                  rootDocument.querySelector(selector(newPath)) === input) {\n                  yield newPath;\n                  yield* optimize(newPath, input, config, rootDocument, startTime);\n              }\n          }\n      }\n  }\n\n  // import { realpath } from \"fs\";\n\n  function getAllDocumentElementsIncludingShadow(selectors, root = document) {\n    const elements = Array.from(root.querySelectorAll(selectors));\n\n    root.querySelectorAll('*').forEach(el => {\n        if (el.shadowRoot) {\n            elements.push(...getAllDocumentElementsIncludingShadow(selectors, el.shadowRoot));\n        }\n    });\n    return elements;\n  }\n\n  function getAllFrames(root = document) {\n    const result = [root];\n    const frames = getAllDocumentElementsIncludingShadow('frame, iframe', root);  \n    frames.forEach(frame => {\n        try {\n            const frameDocument = frame.contentDocument || frame.contentWindow.document;\n            if (frameDocument) {\n                result.push(frameDocument);\n            }\n        } catch (e) {\n            // Skip cross-origin frames\n            console.warn('Could not access frame content:', e.message);\n        }\n    });\n\n    return result;\n  }\n\n  function getAllElementsIncludingShadow(selectors, root = document) {\n    const elements = [];\n\n    getAllFrames(root).forEach(doc => {\n      elements.push(...getAllDocumentElementsIncludingShadow(selectors, doc));\n    });\n\n    return elements;\n  }\n\n  /**\n   * Deeply searches through DOM trees including Shadow DOM and frames/iframes\n   * @param {string} selector - CSS selector to search for\n   * @param {Document|Element} [root=document] - Starting point for the search\n   * @param {Object} [options] - Search options\n   * @param {boolean} [options.searchShadow=true] - Whether to search Shadow DOM\n   * @param {boolean} [options.searchFrames=true] - Whether to search frames/iframes\n   * @returns {Element[]} Array of found elements\n   \n  function getAllElementsIncludingShadow(selector, root = document, options = {}) {\n    const {\n        searchShadow = true,\n        searchFrames = true\n    } = options;\n\n    const results = new Set();\n    \n    // Helper to check if an element is valid and not yet found\n    const addIfValid = (element) => {\n        if (element && !results.has(element)) {\n            results.add(element);\n        }\n    };\n\n    // Helper to process a single document or element\n    function processNode(node) {\n        // Search regular DOM\n        node.querySelectorAll(selector).forEach(addIfValid);\n\n        if (searchShadow) {\n            // Search all shadow roots\n            const treeWalker = document.createTreeWalker(\n                node,\n                NodeFilter.SHOW_ELEMENT,\n                {\n                    acceptNode: (element) => {\n                        return element.shadowRoot ? \n                            NodeFilter.FILTER_ACCEPT : \n                            NodeFilter.FILTER_SKIP;\n                    }\n                }\n            );\n\n            while (treeWalker.nextNode()) {\n                const element = treeWalker.currentNode;\n                if (element.shadowRoot) {\n                    // Search within shadow root\n                    element.shadowRoot.querySelectorAll(selector).forEach(addIfValid);\n                    // Recursively process the shadow root for nested shadow DOMs\n                    processNode(element.shadowRoot);\n                }\n            }\n        }\n\n        if (searchFrames) {\n            // Search frames and iframes\n            const frames = node.querySelectorAll('frame, iframe');\n            frames.forEach(frame => {\n                try {\n                    const frameDocument = frame.contentDocument;\n                    if (frameDocument) {\n                        processNode(frameDocument);\n                    }\n                } catch (e) {\n                    // Skip cross-origin frames\n                    console.warn('Could not access frame content:', e.message);\n                }\n            });\n        }\n    }\n\n    // Start processing from the root\n    processNode(root);\n\n    return Array.from(results);\n  }\n  */\n  // <div x=1 y=2 role='combobox'> </div>\n  function findDropdowns() {\n    const dropdowns = [];\n    \n    // Native select elements\n    dropdowns.push(...getAllElementsIncludingShadow('select'));\n    \n    // Elements with dropdown roles that don't have <input>..</input>\n    const roleElements = getAllElementsIncludingShadow('[role=\"combobox\"], [role=\"listbox\"], [role=\"dropdown\"], [role=\"option\"], [role=\"menu\"], [role=\"menuitem\"]').filter(el => {\n      return el.tagName.toLowerCase() !== 'input' || ![\"button\", \"checkbox\", \"radio\"].includes(el.getAttribute(\"type\"));\n    });\n    dropdowns.push(...roleElements);\n    \n    // Common dropdown class patterns\n    const dropdownPattern = /.*(dropdown|select|combobox|menu).*/i;\n    const elements = getAllElementsIncludingShadow('*');\n    const dropdownClasses = Array.from(elements).filter(el => {\n      const hasDropdownClass = dropdownPattern.test(el.className);\n      const validTag = ['li', 'ul', 'span', 'div', 'p', 'a', 'button'].includes(el.tagName.toLowerCase());\n      const style = window.getComputedStyle(el); \n      const result = hasDropdownClass && validTag && (style.cursor === 'pointer' || el.tagName.toLowerCase() === 'a' || el.tagName.toLowerCase() === 'button');\n      return result;\n    });\n    \n    dropdowns.push(...dropdownClasses);\n    \n    // Elements with aria-haspopup attribute\n    dropdowns.push(...getAllElementsIncludingShadow('[aria-haspopup=\"true\"], [aria-haspopup=\"listbox\"], [aria-haspopup=\"menu\"]'));\n\n    // Improve navigation element detection\n    // Semantic nav elements with list items\n    dropdowns.push(...getAllElementsIncludingShadow('nav ul li, nav ol li'));\n    \n    // Navigation elements in common design patterns\n    dropdowns.push(...getAllElementsIncludingShadow('header a, .header a, .nav a, .navigation a, .menu a, .sidebar a, aside a'));\n    \n    // Elements in primary navigation areas with common attributes\n    dropdowns.push(...getAllElementsIncludingShadow('[role=\"navigation\"] a, [aria-label*=\"navigation\"] a, [aria-label*=\"menu\"] a'));\n\n    return dropdowns;\n  }\n\n  function findClickables() {\n    const clickables = [];\n    \n    const checkboxPattern = /checkbox/i;\n    // Collect all clickable elements first\n    const nativeLinks = [...getAllElementsIncludingShadow('a')];\n    const nativeButtons = [...getAllElementsIncludingShadow('button')];\n    const inputButtons = [...getAllElementsIncludingShadow('input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"]')];\n    const roleButtons = [...getAllElementsIncludingShadow('[role=\"button\"]')];\n    // const tabbable = [...getAllElementsIncludingShadow('[tabindex=\"0\"]')];\n    const clickHandlers = [...getAllElementsIncludingShadow('[onclick]')];\n    const dropdowns = findDropdowns();\n    const nativeCheckboxes = [...getAllElementsIncludingShadow('input[type=\"checkbox\"]')];  \n    const fauxCheckboxes = getAllElementsIncludingShadow('*').filter(el => {\n      if (checkboxPattern.test(el.className)) {\n        const realCheckboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]', el);\n        if (realCheckboxes.length === 1) {\n          const boundingRect = realCheckboxes[0].getBoundingClientRect();\n          return boundingRect.width <= 1 && boundingRect.height <= 1      \n        }\n      }\n      return false;\n    });\n    const nativeRadios = [...getAllElementsIncludingShadow('input[type=\"radio\"]')];\n    const toggles = findToggles();\n    const pointerElements = findElementsWithPointer();\n    // Add all elements at once\n    clickables.push(\n      ...nativeLinks,\n      ...nativeButtons,\n      ...inputButtons,\n      ...roleButtons,\n      // ...tabbable,\n      ...clickHandlers,\n      ...dropdowns,\n      ...nativeCheckboxes,\n      ...fauxCheckboxes,\n      ...nativeRadios,\n      ...toggles,\n      ...pointerElements\n    );\n\n    // Only uniquify once at the end\n    return clickables;  // Let findElements handle the uniquification\n  }\n\n  function findToggles() {\n    const toggles = [];\n    const checkboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]');\n    const togglePattern = /switch|toggle|slider/i;\n\n    checkboxes.forEach(checkbox => {\n      let isToggle = false;\n\n      // Check the checkbox itself\n      if (togglePattern.test(checkbox.className) || togglePattern.test(checkbox.getAttribute('role') || '')) {\n        isToggle = true;\n      }\n\n      // Check parent elements (up to 3 levels)\n      if (!isToggle) {\n        let element = checkbox;\n        for (let i = 0; i < 3; i++) {\n          const parent = element.parentElement;\n          if (!parent) break;\n\n          const className = parent.className || '';\n          const role = parent.getAttribute('role') || '';\n\n          if (togglePattern.test(className) || togglePattern.test(role)) {\n            isToggle = true;\n            break;\n          }\n          element = parent;\n        }\n      }\n\n      // Check next sibling\n      if (!isToggle) {\n        const nextSibling = checkbox.nextElementSibling;\n        if (nextSibling) {\n          const className = nextSibling.className || '';\n          const role = nextSibling.getAttribute('role') || '';\n          if (togglePattern.test(className) || togglePattern.test(role)) {\n            isToggle = true;\n          }\n        }\n      }\n\n      if (isToggle) {\n        toggles.push(checkbox);\n      }\n    });\n\n    return toggles;\n  }\n\n  function findNonInteractiveElements() {\n    // Get all elements in the document\n    const all = Array.from(getAllElementsIncludingShadow('*'));\n    \n    // Filter elements based on Python implementation rules\n    return all.filter(element => {\n      if (!element.firstElementChild) {\n        const tag = element.tagName.toLowerCase();      \n        if (!['select', 'button', 'a'].includes(tag)) {\n          const validTags = ['p', 'span', 'div', 'input', 'textarea'].includes(tag) || /^h\\d$/.test(tag) || /text/.test(tag);\n          const boundingRect = element.getBoundingClientRect();\n          return validTags && boundingRect.height > 1 && boundingRect.width > 1;\n        }\n      }\n      return false;\n    });\n  }\n\n\n\n  // export function findNonInteractiveElements() {\n  //   const all = [];\n  //   try {\n  //     const elements = getAllElementsIncludingShadow('*');\n  //     all.push(...elements);\n  //   } catch (e) {\n  //     console.warn('Error getting elements:', e);\n  //   }\n    \n  //   console.debug('Total elements found:', all.length);\n    \n  //   return all.filter(element => {\n  //     try {\n  //       const tag = element.tagName.toLowerCase();      \n\n  //       // Special handling for input elements\n  //       if (tag === 'input' || tag === 'textarea') {\n  //         const boundingRect = element.getBoundingClientRect();\n  //         const value = element.value || '';\n  //         const placeholder = element.placeholder || '';\n  //         return boundingRect.height > 1 && \n  //                boundingRect.width > 1 && \n  //                (value.trim() !== '' || placeholder.trim() !== '');\n  //       }\n\n       \n  //       // Check if it's a valid tag for text content\n  //       const validTags = ['p', 'span', 'div', 'label', 'th', 'td', 'li', 'button', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'select'].includes(tag) || \n  //                        /^h\\d$/.test(tag) || \n  //                        /text/.test(tag);\n\n  //       const boundingRect = element.getBoundingClientRect();\n\n  //       // Get direct text content, excluding child element text\n  //       let directText = '';\n  //       for (const node of element.childNodes) {\n  //         // Only include text nodes (nodeType 3)\n  //         if (node.nodeType === 3) {\n  //           directText += node.textContent || '';\n  //         }\n  //       }\n        \n  //       // If no direct text and it's a table cell or heading, check label content\n  //       if (!directText.trim() && (tag === 'th' || tag === 'td' || tag === 'h1')) {\n  //         const labels = element.getElementsByTagName('label');\n  //         for (const label of labels) {\n  //           directText += label.textContent || '';\n  //         }\n  //       }\n\n  //       // If still no text and it's a heading, get all text content\n  //       if (!directText.trim() && tag === 'h1') {\n  //         directText = element.textContent || '';\n  //       }\n\n  //       directText = directText.trim();\n\n  //       // Debug logging\n  //       if (directText) {\n  //         console.debugg('Text element found:', {\n  //           tag,\n  //           text: directText,\n  //           dimensions: boundingRect,\n  //           element\n  //         });\n  //       }\n\n  //       return validTags && \n  //              boundingRect.height > 1 && \n  //              boundingRect.width > 1 && \n  //              directText !== '';\n               \n  //     } catch (e) {\n  //       console.warn('Error processing element:', e);\n  //       return false;\n  //     }\n  //   });\n  // }\n\n\n\n\n\n  function findElementsWithPointer() {\n    const elements = [];\n    const allElements = getAllElementsIncludingShadow('*');\n    \n    console.log('Checking elements with pointer style...');\n    \n    allElements.forEach(element => {\n      // Skip SVG elements for now\n      if (element instanceof SVGElement || element.tagName.toLowerCase() === 'svg') {\n        return;\n      }\n      \n      const style = window.getComputedStyle(element);\n      if (style.cursor === 'pointer') {\n        elements.push(element);\n      }\n    });\n    \n    console.log(`Found ${elements.length} elements with pointer cursor`);\n    return elements;\n  }\n\n  function findCheckables() {\n    const elements = [];\n\n    elements.push(...getAllElementsIncludingShadow('input[type=\"checkbox\"]'));\n    elements.push(...getAllElementsIncludingShadow('input[type=\"radio\"]'));\n    const all_elements = getAllElementsIncludingShadow('label');\n    const radioClasses = Array.from(all_elements).filter(el => {\n      return /.*radio.*/i.test(el.className);    \n    });\n    elements.push(...radioClasses);\n    return elements;\n  }\n\n  function findFillables() {\n    const elements = [];\n\n    const inputs = [...getAllElementsIncludingShadow('input:not([type=\"radio\"]):not([type=\"checkbox\"])')];\n    console.log('Found inputs:', inputs.length, inputs);\n    elements.push(...inputs);\n    \n    const textareas = [...getAllElementsIncludingShadow('textarea')];\n    console.log('Found textareas:', textareas.length);\n    elements.push(...textareas);\n    \n    const editables = [...getAllElementsIncludingShadow('[contenteditable=\"true\"]')];\n    console.log('Found editables:', editables.length);\n    elements.push(...editables);\n\n    return elements;\n  }\n\n  // Helper function to check if element is a form control\n  function isFormControl(elementInfo) {\n    return /^(input|select|textarea|button|label)$/i.test(elementInfo.tag);\n  }\n\n  const isDropdownItem = (elementInfo) => {\n    const dropdownPatterns = [\n      /dropdown[-_]?item/i,    // matches: dropdown-item, dropdownitem, dropdown_item\n      /menu[-_]?item/i,        // matches: menu-item, menuitem, menu_item\n      /dropdown[-_]?link/i,    // matches: dropdown-link, dropdownlink, dropdown_link\n      /list[-_]?item/i,       // matches: list-item, listitem, list_item\n      /select[-_]?item/i,     // matches: select-item, selectitem, select_item  \n    ];\n\n    const rolePatterns = [\n      /menu[-_]?item/i,       // matches: menuitem, menu-item\n      /option/i,              // matches: option\n      /list[-_]?item/i,      // matches: listitem, list-item\n      /tree[-_]?item/i       // matches: treeitem, tree-item\n    ];\n\n    const hasMatchingClass = elementInfo.element.className && \n                            dropdownPatterns.some(pattern => \n                              pattern.test(elementInfo.element.className)\n                            );\n\n    const hasMatchingRole = elementInfo.element.getAttribute('role') && \n                           rolePatterns.some(pattern => \n                             pattern.test(elementInfo.element.getAttribute('role'))\n                           );\n\n    return hasMatchingClass || hasMatchingRole;\n  };\n\n  /**\n   * Finds the first element matching a CSS selector, traversing Shadow DOM if necessary\n   * @param {string} selector - CSS selector to search for\n   * @param {Element} [root=document] - Root element to start searching from\n   * @returns {Element|null} - The first matching element or null if not found\n   */\n  function querySelectorShadow(selector, root = document) {\n    // First try to find in light DOM\n    let element = root.querySelector(selector);\n    if (element) return element;\n    \n    // Get all elements with shadow root\n    const shadowElements = Array.from(root.querySelectorAll('*'))\n        .filter(el => el.shadowRoot);\n    \n    // Search through each shadow root until we find a match\n    for (const el of shadowElements) {\n        element = querySelectorShadow(selector, el.shadowRoot);\n        if (element) return element;\n    }\n    \n    return null;\n  }\n\n  const getElementByXPathOrCssSelector = (element_info) => {\n    console.log('getElementByXPathOrCssSelector:', element_info);\n\n    findElement(document, element_info.iframe_selector, element_info.css_selector);\n  };\n\n  const findElement = (root, iframeSelector, cssSelector) => {\n    let element;\n    \n    if (iframeSelector) {      \n      const frames = getAllDocumentElementsIncludingShadow('iframe', root);\n      \n      // Iterate over all frames and compare their CSS selectors\n      for (const frame of frames) {\n        const selector = generateCssPath(frame);\n        if (selector === iframeSelector) {\n          const frameDocument = frame.contentDocument || frame.contentWindow.document;\n          element = querySelectorShadow(cssSelector, frameDocument);\n          console.log('found element ', element);\n          break;\n        }        \n      }  }\n    else\n      element = querySelectorShadow(cssSelector, root);\n      \n    if (!element) {\n      console.warn('Failed to find element with CSS selector:', cssSelector);\n    }\n\n    return element;\n  };\n\n  function generateXPath(element) {\n    if (!element || element.getRootNode() instanceof ShadowRoot) return '';\n    \n    // If element has an id, use that (it's unique and shorter)\n    if (element.id) {\n      return `//*[@id=\"${element.id}\"]`;\n    }\n    \n    const parts = [];\n    let current = element;\n    \n    while (current && current.nodeType === Node.ELEMENT_NODE) {\n      let index = 1;\n      let sibling = current.previousSibling;\n      \n      while (sibling) {\n        if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === current.tagName) {\n          index++;\n        }\n        sibling = sibling.previousSibling;\n      }\n      \n      const tagName = current.tagName.toLowerCase();\n      parts.unshift(`${tagName}[${index}]`);\n      current = current.parentNode;\n    }\n    \n    return '/' + parts.join('/');\n  }\n\n  function isDecendent(parent, child) {\n    let element = child;\n    while (element.nodeType === Node.ELEMENT_NODE) {    \n      \n      if (element.assignedSlot) {\n        element = element.assignedSlot;\n      }\n      else {\n        element = element.parentNode;\n        // Check if we're at a shadow root\n        if (element && element.nodeType !== Node.ELEMENT_NODE && element.getRootNode() instanceof ShadowRoot) {\n          // Get the shadow root's host element\n          element = element.getRootNode().host;     \n        }\n      }\n      if (element === parent)\n        return true;\n    }\n    return false;\n  }\n\n  function generateCssPath(element) {\n    if (!element) {\n      console.error('ERROR: No element provided to generateCssPath returning empty string');\n      return '';\n    }\n    const path = [];\n    // console.group('Generating CSS path for:', element);\n    while (element && element.nodeType === Node.ELEMENT_NODE) {    \n      let selector = element.nodeName.toLowerCase();\n      \n      \n      let sibling = element;\n      let nth = 1;\n      while (sibling = sibling.previousElementSibling) {\n        if (sibling.nodeName.toLowerCase() === selector) nth++;\n      }\n      sibling = element;\n      while (sibling = sibling.nextElementSibling) {\n        if (sibling.nodeName.toLowerCase() === selector) {\n          break;\n        }\n      }\n      selector += `:nth-of-type(${nth})`;\n   \n    \n      path.unshift(selector);\n      //console.log(`  Current path: ${path.join(' > ')}`);\n\n      if (element.assignedSlot) {\n        element = element.assignedSlot;\n        // console.log('  Moving to assigned slot');\n      }\n      else {\n        element = element.parentNode;\n        // console.log('  Moving to parent:', element);\n\n        // Check if we're at a shadow root\n        if (element && element.nodeType !== Node.ELEMENT_NODE && element.getRootNode() instanceof ShadowRoot) {\n          console.log('  Found shadow root, moving to host');\n          // Get the shadow root's host element\n          element = element.getRootNode().host;     \n        }\n      }\n    }\n    \n    // console.log('Final selector:', path.join(' > '));\n    // console.groupEnd();\n    return path.join(' > ');\n  }\n\n\n  function cleanHTML(rawHTML) {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(rawHTML, \"text/html\");\n\n    function cleanElement(element) {\n      const allowedAttributes = new Set([\n        \"role\",\n        \"type\",\n        \"class\",\n        \"href\",\n        \"alt\",\n        \"title\",\n        \"readonly\",\n        \"checked\",\n        \"enabled\",\n        \"disabled\",\n      ]);\n\n      [...element.attributes].forEach(attr => {\n        const name = attr.name.toLowerCase();\n        const value = attr.value;\n\n        const isTestAttribute = /^(testid|test-id|data-test-id)$/.test(name);\n        const isDataAttribute = name.startsWith(\"data-\") && value;\n        const isBooleanAttribute = [\"readonly\", \"checked\", \"enabled\", \"disabled\"].includes(name);\n\n        if (!allowedAttributes.has(name) && !isDataAttribute && !isTestAttribute && !isBooleanAttribute) {\n          element.removeAttribute(name);\n        }\n      });\n\n      // Handle SVG content - more aggressive replacement\n      if (element.tagName.toLowerCase() === \"svg\") {\n        // Remove all attributes except class and role\n        [...element.attributes].forEach(attr => {\n          const name = attr.name.toLowerCase();\n          if (name !== \"class\" && name !== \"role\") {\n            element.removeAttribute(name);\n          }\n        });\n        element.innerHTML = \"CONTENT REMOVED\";\n      } else {\n        // Recursively clean child elements\n        Array.from(element.children).forEach(cleanElement);\n      }\n\n      // Only remove empty elements that aren't semantic or icon elements\n      const keepEmptyElements = ['i', 'span', 'svg', 'button', 'input'];\n      if (!keepEmptyElements.includes(element.tagName.toLowerCase()) && \n          !element.children.length && \n          !element.textContent.trim()) {\n        element.remove();\n      }\n    }\n\n    // Process all elements in the document body\n    Array.from(doc.body.children).forEach(cleanElement);\n    return doc.body.innerHTML;\n  }\n\n  function getContainingIframe(element) {\n    // If not in an iframe, return null\n    if (element.ownerDocument.defaultView === window.top) {\n      return null;\n    }\n    \n    // Try to find the iframe in the parent document that contains our element\n    try {\n      const parentDocument = element.ownerDocument.defaultView.parent.document;\n      const iframes = parentDocument.querySelectorAll('iframe');\n      \n      for (const iframe of iframes) {\n        if (iframe.contentWindow === element.ownerDocument.defaultView) {\n          return iframe;\n        }\n      }\n    } catch (e) {\n      // Cross-origin restriction\n      return \"Cross-origin iframe - cannot access details\";\n    }\n    \n    return null;\n  }\n\n  function getElementInfo(element, index) {\n\n    const xpath = generateXPath(element);\n    const css_selector = generateCssPath(element);\n    //disabled since it's blocking event handling in recorder\n    const short_css_selector = ''; //getRobustSelector(element);\n\n    const iframe = getContainingIframe(element);  \n    const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\n    //disabled since it's blocking event handling in recorder\n    const short_iframe_selector = ''; //iframe ? getRobustSelector(iframe) : \"\";\n\n    // Return element info with pre-calculated values\n    return new ElementInfo(element, index, {\n      tag: element.tagName.toLowerCase(),\n      type: element.type || '',\n      text: element.innerText || element.placeholder || '', //getTextContent(element),\n      html: cleanHTML(element.outerHTML),\n      xpath: xpath,\n      css_selector: css_selector,\n      bounding_box: element.getBoundingClientRect(),\n      iframe_selector: iframe_selector,\n      short_css_selector: short_css_selector,\n      short_iframe_selector: short_iframe_selector\n    });\n  }\n\n  function getAriaLabelledByText(elementInfo, includeHidden=true) {\n    if (!elementInfo.element.hasAttribute('aria-labelledby')) return '';\n\n    const ids = elementInfo.element.getAttribute('aria-labelledby').split(/\\s+/);\n    let labelText = '';\n\n    //locate root (document or iFrame document if element is contained in an iframe)\n    let root = document;\n    if (elementInfo.iframe_selector) {      \n      const frames = getAllDocumentElementsIncludingShadow('iframe', document);\n      \n      // Iterate over all frames and compare their CSS selectors\n      for (const frame of frames) {\n        const selector = generateCssPath(frame);\n        if (selector === elementInfo.iframe_selector) {\n          root = frame.contentDocument || frame.contentWindow.document;        \n          break;\n        }\n      } \n    }\n\n    ids.forEach(id => {\n      const el = querySelectorShadow(`#${id}`, root);\n      if (el) {\n        if (includeHidden || el.offsetParent !== null || getComputedStyle(el).display !== 'none') {\n          labelText += el.textContent.trim() + ' ';\n        }\n      }\n    });\n\n    return labelText.trim();\n  }\n\n\n\n  const filterZeroDimensions = (elementInfo) => {\n    const rect = elementInfo.bounding_box;\n    //single pixel elements are typically faux controls and should be filtered too\n    const hasSize = rect.width > 1 && rect.height > 1;\n    const style = window.getComputedStyle(elementInfo.element);\n    const isVisible = style.display !== 'none' && style.visibility !== 'hidden';\n    \n    if (!hasSize || !isVisible) {\n      \n      return false;\n    }\n    return true;\n  };\n\n\n\n  function uniquifyElements(elements) {\n    const seen = new Set();\n\n    console.log(`Starting uniquification with ${elements.length} elements`);\n\n    // Filter out testing infrastructure elements first\n    const filteredInfrastructure = elements.filter(element_info => {\n      // Skip the highlight-overlay element completely - it's part of the testing infrastructure\n      if (element_info.element.id === 'highlight-overlay' || \n          (element_info.css_selector && element_info.css_selector.includes('#highlight-overlay'))) {\n        console.log('Filtered out testing infrastructure element:', element_info.css_selector);\n        return false;\n      }\n      \n      // Filter out UI framework container/manager elements\n      const el = element_info.element;\n      // UI framework container checks - generic detection for any framework\n      if ((el.getAttribute('data-rendered-by') || \n           el.getAttribute('data-reactroot') || \n           el.getAttribute('ng-version') || \n           el.getAttribute('data-component-id') ||\n           el.getAttribute('data-root') ||\n           el.getAttribute('data-framework')) && \n          (el.className && \n           typeof el.className === 'string' && \n           (el.className.includes('Container') || \n            el.className.includes('container') || \n            el.className.includes('Manager') || \n            el.className.includes('manager')))) {\n        console.log('Filtered out UI framework container element:', element_info.css_selector);\n        return false;\n      }\n      \n      // Direct filter for framework container elements that shouldn't be interactive\n      // Consolidating multiple container detection patterns into one efficient check\n      const isFullViewport = element_info.bounding_box && \n                           element_info.bounding_box.x <= 5 && \n                           element_info.bounding_box.y <= 5 && \n                           element_info.bounding_box.width >= (window.innerWidth * 0.95) && \n                           element_info.bounding_box.height >= (window.innerHeight * 0.95);\n                           \n      // Empty content check\n      const isEmpty = !el.innerText || el.innerText.trim() === '';\n      \n      // Check if it's a framework container element\n      if (element_info.element.tagName === 'DIV' && \n          isFullViewport && \n          isEmpty && \n          (\n            // Pattern matching for root containers\n            (element_info.xpath && \n              (element_info.xpath.match(/^\\/html\\[\\d+\\]\\/body\\[\\d+\\]\\/div\\[\\d+\\]\\/div\\[\\d+\\]$/) || \n               element_info.xpath.match(/^\\/\\/\\*\\[@id='[^']+'\\]\\/div\\[\\d+\\]$/))) ||\n            \n            // Simple DOM structure\n            (element_info.css_selector.split(' > ').length <= 4 && element_info.depth <= 5) ||\n            \n            // Empty or container-like classes\n            (!el.className || el.className === '' || \n             (typeof el.className === 'string' && \n              (el.className.includes('overlay') || \n               el.className.includes('container') || \n               el.className.includes('wrapper'))))\n          )) {\n        console.log('Filtered out framework container element:', element_info.css_selector);\n        return false;\n      }\n      \n      return true;\n    });\n\n    // First filter out elements with zero dimensions\n    const nonZeroElements = filteredInfrastructure.filter(filterZeroDimensions);\n    // sort by CSS selector depth so parents are processed first\n    nonZeroElements.sort((a, b) => a.getDepth() - b.getDepth());\n    console.log(`After dimension filtering: ${nonZeroElements.length} elements remain (${elements.length - nonZeroElements.length} removed)`);\n    \n    const filteredByParent = nonZeroElements.filter(element_info => {\n\n      const parent = findClosestParent(seen, element_info);\n      const keep = parent == null || shouldKeepNestedElement(element_info, parent);\n      // console.log(\"node \", element_info.index, \": keep=\", keep, \" parent=\", parent);\n      // if (!keep && !element_info.xpath) {\n      //   console.log(\"Filtered out element \", element_info,\" because it's a nested element of \", parent);\n      // }\n      if (keep)\n        seen.add(element_info.css_selector);\n\n      return keep;\n    });\n\n    console.log(`After parent/child filtering: ${filteredByParent.length} elements remain (${nonZeroElements.length - filteredByParent.length} removed)`);\n\n    // Final overlap filtering\n    const filteredResults = filteredByParent.filter(element => {\n\n       // Look for any element that came BEFORE this one in the array\n      const hasEarlierOverlap = filteredByParent.some(other => {\n        // Only check elements that came before (lower index)\n        if (filteredByParent.indexOf(other) >= filteredByParent.indexOf(element)) {\n          return false;\n        }\n        \n        const isOverlapping = areElementsOverlapping(element, other); \n        return isOverlapping;\n      });  \n\n      // Keep element if it has no earlier overlapping elements\n      return !hasEarlierOverlap;\n    });\n    \n    \n    \n    // Check for overlay removal\n    console.log(`After filtering: ${filteredResults.length} (${filteredByParent.length - filteredResults.length} removed by overlap)`);\n    \n    const nonOverlaidElements = filteredResults.filter(element => {\n      return !isOverlaid(element);\n    });\n\n    console.log(`Final elements after overlay removal: ${nonOverlaidElements.length} (${filteredResults.length - nonOverlaidElements.length} removed)`);\n    \n    return nonOverlaidElements;\n\n  }\n\n\n\n  const areElementsOverlapping = (element1, element2) => {\n    if (element1.css_selector === element2.css_selector) {\n      return true;\n    }\n    \n    const box1 = element1.bounding_box;\n    const box2 = element2.bounding_box;\n    \n    return box1.x === box2.x &&\n           box1.y === box2.y &&\n           box1.width === box2.width &&\n           box1.height === box2.height;\n          //  element1.text === element2.text &&\n          //  element2.tag === 'a';\n  };\n\n  function findClosestParent(seen, element_info) {  \n    \n    // Split the xpath into segments\n    const segments = element_info.css_selector.split(' > ');\n    \n    // Try increasingly shorter paths until we find one in the seen set\n    for (let i = segments.length - 1; i > 0; i--) {\n      const parentPath = segments.slice(0, i).join(' > ');\n      if (seen.has(parentPath)) {\n        return parentPath;\n      }\n    }\n\n    return null;\n  }\n\n  function shouldKeepNestedElement(elementInfo, parentPath) {\n    let result = false;\n    const parentSegments = parentPath.split(' > ');\n\n    const isParentLink = /^a(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\n    if (isParentLink) {\n      return false;    \n    }\n    // If this is a checkbox/radio input\n    if (elementInfo.tag === 'input' && \n        (elementInfo.type === 'checkbox' || elementInfo.type === 'radio')) {\n      \n      // Check if parent is a label by looking at the parent xpath's last segment\n      \n      const isParentLabel = /^label(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\n      \n      // If parent is a label, don't keep the input (we'll keep the label instead)\n      if (isParentLabel) {\n        return false;\n      }\n    }\n    \n    // Keep all other form controls and dropdown items\n    if (isFormControl(elementInfo) || isDropdownItem(elementInfo)) {\n      result = true;\n    }\n\n    if(isTableCell(elementInfo)) {\n      result = true;\n    }\n    \n    \n    // console.log(`shouldKeepNestedElement: ${elementInfo.tag} ${elementInfo.text} ${elementInfo.xpath} -> ${parentXPath} -> ${result}`);\n    return result;\n  }\n\n\n  function isTableCell(elementInfo) {\n    const element = elementInfo.element;\n    if(!element || !(element instanceof HTMLElement)) {\n      return false;\n    }\n    const validTags = new Set(['td', 'th']);\n    const validRoles = new Set(['cell', 'gridcell', 'columnheader', 'rowheader']);\n    \n    const tag = element.tagName.toLowerCase();\n    const role = element.getAttribute('role')?.toLowerCase();\n\n    if (validTags.has(tag) || (role && validRoles.has(role))) {\n      return true;\n    }\n    return false;\n    \n  }\n\n  function isOverlaid(elementInfo) {\n    const element = elementInfo.element;\n    const boundingRect = elementInfo.bounding_box;\n    \n\n    \n    \n    // Create a diagnostic logging function that only logs when needed\n    const diagnosticLog = (...args) => {\n      { // set to true for debugging\n        console.log('[OVERLAY-DEBUG]', ...args);\n      }\n    };\n\n    // Special handling for tooltips\n    if (elementInfo.element.className && typeof elementInfo.element.className === 'string' && \n        elementInfo.element.className.includes('tooltip')) {\n      diagnosticLog('Element is a tooltip, not considering it overlaid');\n      return false;\n    }\n    \n    \n      \n        // Get element at the center point to check if it's covered by a popup/modal\n        const middleX = boundingRect.x + boundingRect.width/2;\n        const middleY = boundingRect.y + boundingRect.height/2;\n        const elementAtMiddle = element.ownerDocument.elementFromPoint(middleX, middleY);\n        \n        if (elementAtMiddle && \n            elementAtMiddle !== element && \n            !isDecendent(element, elementAtMiddle) && \n            !isDecendent(elementAtMiddle, element)) {\n\n        \n        return true;\n      }\n        \n        \n      return false;\n    \n    }\n\n\n\n  /**\n   * Get the “best” short, unique, and robust CSS selector for an element.\n   * \n   * @param {Element} element\n   * @returns {string} A selector guaranteed to find exactly that element in its context\n   */\n  function getRobustSelector(element) {\n    // 1. Figure out the real “root” (iframe doc, shadow root, or main doc)\n    const root = (() => {\n      const rootNode = element.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        return rootNode;\n      }\n      return element.ownerDocument;\n    })();\n\n    // 2. Options to bias toward stable attrs and away from auto-generated classes\n    const options = {\n      root,\n      // only use data-*, id or aria-label by default\n      attr(name, value) {\n        if (name === 'id' || name.startsWith('data-') || name === 'aria-label') {\n          return true;\n        }\n        return false;\n      },\n      // skip framework junk\n      filter(name, value) {\n        if (name.startsWith('ng-') || name.startsWith('_ngcontent') || /^p-/.test(name)) {\n          return false;\n        }\n        return true;\n      },\n      // let finder try really short seeds\n      seedMinLength: 1,\n      optimizedMinLength: 1,\n    };\n\n    let selector;\n    try {\n      selector = finder(element, options);\n      // 3. Verify it really works in the context\n      const found = root.querySelectorAll(selector);\n      if (found.length !== 1 || found[0] !== element) {\n        throw new Error('not unique or not found');\n      }\n      return selector;\n    } catch (err) {\n      // 4. Fallback: full path (you already have this utility)\n      console.warn('[getRobustSelector] finder failed, falling back to full path:', err);\n      return generateCssPath(element); // you’d import or define this elsewhere\n    }\n  }\n\n  /**\n   * Checks if an element is scrollable (has scrollable content)\n   * \n   * @param element - The element to check\n   * @returns boolean indicating if the element is scrollable\n   */\n  function isScrollableContainer(element) {\n    if (!element) return false;\n    \n    const style = window.getComputedStyle(element);\n    \n    // Reliable way to detect if an element has scrollbars or is scrollable\n    const hasScrollHeight = element.scrollHeight > element.clientHeight;\n    const hasScrollWidth = element.scrollWidth > element.clientWidth;\n    \n    // Check actual style properties\n    const hasOverflowY = style.overflowY === 'auto' || \n                        style.overflowY === 'scroll' || \n                        style.overflowY === 'overlay';\n    const hasOverflowX = style.overflowX === 'auto' || \n                        style.overflowX === 'scroll' || \n                        style.overflowX === 'overlay';\n    \n    // Check common class names and attributes for scrollable containers across frameworks\n    const hasScrollClasses = element.classList.contains('scroll') || \n                            element.classList.contains('scrollable') ||\n                            element.classList.contains('overflow') ||\n                            element.classList.contains('overflow-auto') ||\n                            element.classList.contains('overflow-scroll') ||\n                            element.getAttribute('data-scrollable') === 'true';\n                            \n    // Check for height/max-height constraints that often indicate scrolling content\n    const hasHeightConstraint = style.maxHeight && \n                               style.maxHeight !== 'none' && \n                               style.maxHeight !== 'auto';\n    \n    // An element is scrollable if it has:\n    // 1. Actual scrollbars in use (most reliable check) OR\n    // 2. Overflow styles allowing scrolling AND content that would require scrolling\n    return (hasScrollHeight && hasOverflowY) || \n           (hasScrollWidth && hasOverflowX) ||\n           (hasScrollClasses && (hasScrollHeight || hasScrollWidth)) ||\n           (hasHeightConstraint && hasScrollHeight);\n  }\n\n  /**\n   * Detects scrollable containers that are ancestors of the target element\n   * \n   * This function traverses up the DOM tree from the target element and identifies\n   * all scrollable containers (elements that have scrollable content).\n   * \n   * @param target - The target element to start the search from\n   * @returns Array of objects with selector and scroll properties\n   */\n  function detectScrollableContainers(target) {\n    const scrollableContainers = [];\n    \n    if (!target) {\n      return scrollableContainers;\n    }\n    \n    console.log('🔍 [detectScrollableContainers] Starting detection for target:', target.tagName, target.id, target.className);\n    \n    // Detect if target is inside an iframe\n    const iframe = getContainingIframe(target);\n    const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\n    \n    console.log('🔍 [detectScrollableContainers] Iframe context:', iframe ? 'inside iframe' : 'main document', 'selector:', iframe_selector);\n    \n    // Start from the target element and traverse up the DOM tree\n    let currentElement = target;\n    let depth = 0;\n    const MAX_DEPTH = 10; // Limit traversal depth to avoid infinite loops\n    \n    while (currentElement && depth < MAX_DEPTH) {\n      // Skip if we've reached the document body or html element\n      if (currentElement === document.body || currentElement === document.documentElement) {\n        break;\n      }\n      \n      // Check if the current element is scrollable\n      if (isScrollableContainer(currentElement)) {\n        console.log('🔍 [detectScrollableContainers] Found scrollable container at depth', depth, ':', currentElement.tagName, currentElement.id, currentElement.className);\n        \n        const container = {\n          containerEl: currentElement,\n          selector: generateCssPath(currentElement),\n          iframe_selector: iframe_selector,\n          scrollTop: currentElement.scrollTop,\n          scrollLeft: currentElement.scrollLeft,\n          scrollHeight: currentElement.scrollHeight,\n          scrollWidth: currentElement.scrollWidth,\n          clientHeight: currentElement.clientHeight,\n          clientWidth: currentElement.clientWidth\n        };\n        \n        scrollableContainers.push(container);\n      }\n      \n      // Move to parent element\n      if (currentElement.assignedSlot) {\n        // Handle Shadow DOM\n        currentElement = currentElement.assignedSlot;\n      } else {\n        currentElement = currentElement.parentElement;\n        \n        // Handle Shadow Root boundaries\n        if (currentElement) {\n          const rootNode = currentElement.getRootNode();\n          if (rootNode instanceof ShadowRoot) {\n            currentElement = rootNode.host;\n          }\n        }\n      }\n      \n      depth++;\n    }\n    \n    console.log('🔍 [detectScrollableContainers] Detection complete. Found', scrollableContainers.length, 'scrollable containers');\n    return scrollableContainers;\n  }\n\n  class DOMSerializer {\n      constructor(options = {}) {\n        this.options = {\n          includeStyles: true,\n          includeScripts: false, // Security consideration\n          includeFrames: true,\n          includeShadowDOM: true,\n          maxDepth: 50,\n          ...options\n        };\n        this.serializedFrames = new Map();\n        this.shadowRoots = new Map();\n      }\n    \n      /**\n       * Serialize a complete document or element\n       */\n      serialize(rootElement = document) {\n        try {\n          const serialized = {\n            type: 'document',\n            doctype: this.serializeDoctype(rootElement),\n            documentElement: this.serializeElement(rootElement.documentElement || rootElement),\n            frames: [],\n            timestamp: Date.now(),\n            url: rootElement.URL || window.location?.href,\n            metadata: {\n              title: rootElement.title,\n              charset: rootElement.characterSet,\n              contentType: rootElement.contentType\n            }\n          };\n    \n          // Serialize frames and iframes if enabled\n          if (this.options.includeFrames) {\n            serialized.frames = this.serializeFrames(rootElement);\n          }\n    \n          return serialized;\n        } catch (error) {\n          console.error('Serialization error:', error);\n          throw new Error(`DOM serialization failed: ${error.message}`);\n        }\n      }\n    \n      /**\n       * Serialize document type declaration\n       */\n      serializeDoctype(doc) {\n        if (!doc.doctype) return null;\n        \n        return {\n          name: doc.doctype.name,\n          publicId: doc.doctype.publicId,\n          systemId: doc.doctype.systemId\n        };\n      }\n    \n      /**\n       * Serialize an individual element and its children\n       */\n      serializeElement(element, depth = 0) {\n        if (depth > this.options.maxDepth) {\n          return { type: 'text', content: '<!-- Max depth exceeded -->' };\n        }\n    \n        const nodeType = element.nodeType;\n        \n        switch (nodeType) {\n          case Node.ELEMENT_NODE:\n            return this.serializeElementNode(element, depth);\n          case Node.TEXT_NODE:\n            return this.serializeTextNode(element);\n          case Node.COMMENT_NODE:\n            return this.serializeCommentNode(element);\n          case Node.DOCUMENT_FRAGMENT_NODE:\n            return this.serializeDocumentFragment(element, depth);\n          default:\n            return null;\n        }\n      }\n    \n      /**\n       * Serialize element node with attributes and children\n       */\n      serializeElementNode(element, depth) {\n        const tagName = element.tagName.toLowerCase();\n        \n        // Skip script tags for security unless explicitly enabled\n        if (tagName === 'script' && !this.options.includeScripts) {\n          return { type: 'comment', content: '<!-- Script tag removed for security -->' };\n        }\n    \n        const serialized = {\n          type: 'element',\n          tagName: tagName,\n          attributes: this.serializeAttributes(element),\n          children: [],\n          shadowRoot: null\n        };\n    \n        // Handle Shadow DOM\n        if (this.options.includeShadowDOM && element.shadowRoot) {\n          serialized.shadowRoot = this.serializeShadowRoot(element.shadowRoot, depth + 1);\n        }\n    \n        // Handle special elements\n        if (tagName === 'iframe' || tagName === 'frame') {\n          serialized.frameData = this.serializeFrameElement(element);\n        }\n    \n        // Serialize children\n        for (const child of element.childNodes) {\n          const serializedChild = this.serializeElement(child, depth + 1);\n          if (serializedChild) {\n            serialized.children.push(serializedChild);\n          }\n        }\n    \n        // Include computed styles if enabled\n        if (this.options.includeStyles && element.nodeType === Node.ELEMENT_NODE) {\n          serialized.computedStyle = this.serializeComputedStyle(element);\n        }\n    \n        return serialized;\n      }\n    \n      /**\n       * Serialize element attributes\n       */\n      serializeAttributes(element) {\n        const attributes = {};\n        \n        if (element.attributes) {\n          for (const attr of element.attributes) {\n            attributes[attr.name] = attr.value;\n          }\n        }\n    \n        return attributes;\n      }\n    \n      /**\n       * Serialize computed styles\n       */\n      serializeComputedStyle(element) {\n        try {\n          const computedStyle = window.getComputedStyle(element);\n          const styles = {};\n          \n          // Only serialize non-default values to reduce size\n          const importantStyles = [\n            'display', 'position', 'width', 'height', 'margin', 'padding',\n            'border', 'background', 'color', 'font-family', 'font-size',\n            'text-align', 'visibility', 'z-index', 'transform'\n          ];\n    \n          for (const prop of importantStyles) {\n            const value = computedStyle.getPropertyValue(prop);\n            if (value && value !== 'initial' && value !== 'normal') {\n              styles[prop] = value;\n            }\n          }\n    \n          return styles;\n        } catch (error) {\n          return {};\n        }\n      }\n    \n      /**\n       * Serialize text node\n       */\n      serializeTextNode(node) {\n        return {\n          type: 'text',\n          content: node.textContent\n        };\n      }\n    \n      /**\n       * Serialize comment node\n       */\n      serializeCommentNode(node) {\n        return {\n          type: 'comment',\n          content: node.textContent\n        };\n      }\n    \n      /**\n       * Serialize document fragment\n       */\n      serializeDocumentFragment(fragment, depth) {\n        const serialized = {\n          type: 'fragment',\n          children: []\n        };\n    \n        for (const child of fragment.childNodes) {\n          const serializedChild = this.serializeElement(child, depth + 1);\n          if (serializedChild) {\n            serialized.children.push(serializedChild);\n          }\n        }\n    \n        return serialized;\n      }\n    \n      /**\n       * Serialize Shadow DOM\n       */\n      serializeShadowRoot(shadowRoot, depth) {\n        const serialized = {\n          type: 'shadowRoot',\n          mode: shadowRoot.mode,\n          children: []\n        };\n    \n        for (const child of shadowRoot.childNodes) {\n          const serializedChild = this.serializeElement(child, depth + 1);\n          if (serializedChild) {\n            serialized.children.push(serializedChild);\n          }\n        }\n    \n        return serialized;\n      }\n    \n      /**\n       * Serialize frame/iframe elements\n       */\n      serializeFrameElement(frameElement) {\n        const frameData = {\n          src: frameElement.src,\n          name: frameElement.name,\n          id: frameElement.id,\n          sandbox: frameElement.sandbox?.toString() || '',\n          allowfullscreen: frameElement.allowFullscreen\n        };\n    \n        // Try to access frame content (may fail due to CORS)\n        try {\n          const frameDoc = frameElement.contentDocument;\n          if (frameDoc && this.options.includeFrames) {\n            frameData.content = this.serialize(frameDoc);\n          }\n        } catch (error) {\n          frameData.accessError = 'Cross-origin frame content not accessible';\n        }\n    \n        return frameData;\n      }\n    \n      /**\n       * Serialize all frames in document\n       */\n      serializeFrames(doc) {\n        const frames = [];\n        const frameElements = doc.querySelectorAll('iframe, frame');\n    \n        for (const frameElement of frameElements) {\n          try {\n            const frameDoc = frameElement.contentDocument;\n            if (frameDoc) {\n              frames.push({\n                element: this.serializeElement(frameElement),\n                content: this.serialize(frameDoc)\n              });\n            }\n          } catch (error) {\n            frames.push({\n              element: this.serializeElement(frameElement),\n              error: 'Frame content not accessible'\n            });\n          }\n        }\n    \n        return frames;\n      }\n    \n      /**\n       * Deserialize serialized DOM data back to DOM nodes\n       */\n      deserialize(serializedData, targetDocument = document) {\n        try {\n          if (serializedData.type === 'document') {\n            return this.deserializeDocument(serializedData, targetDocument);\n          } else {\n            return this.deserializeElement(serializedData, targetDocument);\n          }\n        } catch (error) {\n          console.error('Deserialization error:', error);\n          throw new Error(`DOM deserialization failed: ${error.message}`);\n        }\n      }\n    \n      /**\n       * Deserialize complete document\n       */\n      deserializeDocument(serializedDoc, targetDoc) {\n        // Create new document if needed\n        const doc = targetDoc || document.implementation.createHTMLDocument();\n    \n        // Set doctype if present\n        if (serializedDoc.doctype) {\n          const doctype = document.implementation.createDocumentType(\n            serializedDoc.doctype.name,\n            serializedDoc.doctype.publicId,\n            serializedDoc.doctype.systemId\n          );\n          doc.replaceChild(doctype, doc.doctype);\n        }\n    \n        // Deserialize document element\n        if (serializedDoc.documentElement) {\n          const newDocElement = this.deserializeElement(serializedDoc.documentElement, doc);\n          doc.replaceChild(newDocElement, doc.documentElement);\n        }\n    \n        // Handle metadata\n        if (serializedDoc.metadata) {\n          doc.title = serializedDoc.metadata.title || '';\n        }\n    \n        return doc;\n      }\n    \n      /**\n       * Deserialize individual element\n       */\n      deserializeElement(serializedNode, doc) {\n        switch (serializedNode.type) {\n          case 'element':\n            return this.deserializeElementNode(serializedNode, doc);\n          case 'text':\n            return doc.createTextNode(serializedNode.content);\n          case 'comment':\n            return doc.createComment(serializedNode.content);\n          case 'fragment':\n            return this.deserializeDocumentFragment(serializedNode, doc);\n          case 'shadowRoot':\n            // Shadow roots are handled during element creation\n            return null;\n          default:\n            return null;\n        }\n      }\n    \n      /**\n       * Deserialize element node\n       */\n      deserializeElementNode(serializedElement, doc) {\n        const element = doc.createElement(serializedElement.tagName);\n    \n        // Set attributes\n        if (serializedElement.attributes) {\n          for (const [name, value] of Object.entries(serializedElement.attributes)) {\n            try {\n              element.setAttribute(name, value);\n            } catch (error) {\n              console.warn(`Failed to set attribute ${name}:`, error);\n            }\n          }\n        }\n    \n        // Apply computed styles if available\n        if (serializedElement.computedStyle && this.options.includeStyles) {\n          for (const [prop, value] of Object.entries(serializedElement.computedStyle)) {\n            try {\n              element.style.setProperty(prop, value);\n            } catch (error) {\n              console.warn(`Failed to set style ${prop}:`, error);\n            }\n          }\n        }\n    \n        // Create shadow root if present\n        if (serializedElement.shadowRoot && element.attachShadow) {\n          try {\n            const shadowRoot = element.attachShadow({ \n              mode: serializedElement.shadowRoot.mode || 'open' \n            });\n            \n            // Deserialize shadow root children\n            for (const child of serializedElement.shadowRoot.children) {\n              const childElement = this.deserializeElement(child, doc);\n              if (childElement) {\n                shadowRoot.appendChild(childElement);\n              }\n            }\n          } catch (error) {\n            console.warn('Failed to create shadow root:', error);\n          }\n        }\n    \n        // Deserialize children\n        if (serializedElement.children) {\n          for (const child of serializedElement.children) {\n            const childElement = this.deserializeElement(child, doc);\n            if (childElement) {\n              element.appendChild(childElement);\n            }\n          }\n        }\n    \n        // Handle frame content\n        if (serializedElement.frameData && serializedElement.frameData.content) {\n          // Frame content deserialization would happen after the frame loads\n          element.addEventListener('load', () => {\n            try {\n              const frameDoc = element.contentDocument;\n              if (frameDoc) {\n                this.deserializeDocument(serializedElement.frameData.content, frameDoc);\n              }\n            } catch (error) {\n              console.warn('Failed to deserialize frame content:', error);\n            }\n          });\n        }\n    \n        return element;\n      }\n    \n      /**\n       * Deserialize document fragment\n       */\n      deserializeDocumentFragment(serializedFragment, doc) {\n        const fragment = doc.createDocumentFragment();\n    \n        if (serializedFragment.children) {\n          for (const child of serializedFragment.children) {\n            const childElement = this.deserializeElement(child, doc);\n            if (childElement) {\n              fragment.appendChild(childElement);\n            }\n          }\n        }\n    \n        return fragment;\n      }\n    }\n    \n    // Usage example and utility functions\n    class DOMUtils {\n      /**\n       * Create serializer with common presets\n       */\n      static createSerializer(preset = 'default') {\n        const presets = {\n          default: {\n            includeStyles: true,\n            includeScripts: false,\n            includeFrames: true,\n            includeShadowDOM: true\n          },\n          minimal: {\n            includeStyles: false,\n            includeScripts: false,\n            includeFrames: false,\n            includeShadowDOM: false\n          },\n          complete: {\n            includeStyles: true,\n            includeScripts: true,\n            includeFrames: true,\n            includeShadowDOM: true\n          },\n          secure: {\n            includeStyles: true,\n            includeScripts: false,\n            includeFrames: false,\n            includeShadowDOM: true\n          }\n        };\n    \n        return new DOMSerializer(presets[preset] || presets.default);\n      }\n    \n      /**\n       * Serialize DOM to JSON string\n       */\n      static serializeToJSON(element, options) {\n        const serializer = new DOMSerializer(options);\n        const serialized = serializer.serialize(element);\n        return JSON.stringify(serialized, null, 2);\n      }\n    \n      /**\n       * Deserialize from JSON string\n       */\n      static deserializeFromJSON(jsonString, targetDocument) {\n        const serialized = JSON.parse(jsonString);\n        const serializer = new DOMSerializer();\n        return serializer.deserialize(serialized, targetDocument);\n      }\n    \n      /**\n       * Clone DOM with full fidelity including Shadow DOM\n       */\n      static deepClone(element, options) {\n        const serializer = new DOMSerializer(options);\n        const serialized = serializer.serialize(element);\n        return serializer.deserialize(serialized, element.ownerDocument);\n      }\n    \n      /**\n       * Compare two DOM structures\n       */\n      static compare(element1, element2, options) {\n        const serializer = new DOMSerializer(options);\n        const serialized1 = serializer.serialize(element1);\n        const serialized2 = serializer.serialize(element2);\n        \n        return JSON.stringify(serialized1) === JSON.stringify(serialized2);\n      }\n    }\n    \n    /*\n    // Export for use\n    if (typeof module !== 'undefined' && module.exports) {\n      module.exports = { DOMSerializer, DOMUtils };\n    } else if (typeof window !== 'undefined') {\n      window.DOMSerializer = DOMSerializer;\n      window.DOMUtils = DOMUtils;\n    }\n    */\n\n    /* Usage Examples:\n    \n    // Basic serialization\n    const serializer = new DOMSerializer();\n    const serialized = serializer.serialize(document);\n    console.log(JSON.stringify(serialized, null, 2));\n    \n    // Deserialize back to DOM\n    const clonedDoc = serializer.deserialize(serialized);\n    \n    // Using presets\n    const minimalSerializer = DOMUtils.createSerializer('minimal');\n    const secureSerializer = DOMUtils.createSerializer('secure');\n    \n    // Serialize specific element with Shadow DOM\n    const customElement = document.querySelector('my-custom-element');\n    const serializedElement = serializer.serialize(customElement);\n    \n    // JSON utilities\n    const jsonString = DOMUtils.serializeToJSON(document.body);\n    const restored = DOMUtils.deserializeFromJSON(jsonString);\n    \n    // Deep clone with Shadow DOM support\n    const clone = DOMUtils.deepClone(document.body, { includeShadowDOM: true });\n    \n    */\n\n    function serializeNodeToJSON(nodeElement) {\n      return DOMUtils.serializeToJSON(nodeElement, {includeStyles: false});\n    }\n\n    function deserializeNodeFromJSON(jsonString) {\n      return DOMUtils.deserializeFromJSON(jsonString);\n    }\n\n  /**\n   * Checks if a point is inside a bounding box\n   * \n   * @param point The point to check\n   * @param box The bounding box\n   * @returns boolean indicating if the point is inside the box\n   */\n  function isPointInsideBox(point, box) {\n    return point.x >= box.x &&\n          point.x <= box.x + box.width &&\n          point.y >= box.y &&\n          point.y <= box.y + box.height;\n  }\n\n  /**\n   * Calculates the overlap area between two bounding boxes\n   * \n   * @param box1 First bounding box\n   * @param box2 Second bounding box\n   * @returns The overlap area\n   */\n  function calculateOverlap(box1, box2) {\n    const xOverlap = Math.max(0,\n      Math.min(box1.x + box1.width, box2.x + box2.width) -\n      Math.max(box1.x, box2.x)\n    );\n    const yOverlap = Math.max(0,\n      Math.min(box1.y + box1.height, box2.y + box2.height) -\n      Math.max(box1.y, box2.y)\n    );\n    return xOverlap * yOverlap;\n  }\n\n  /**\n   * Finds an exact match between candidate elements and the actual interaction element\n   * \n   * @param candidate_elements Array of candidate element infos\n   * @param actualInteractionElementInfo The actual interaction element info\n   * @returns The matching candidate element info, or null if no match is found\n   */\n  function findExactMatch(candidate_elements, actualInteractionElementInfo) {\n    if (!actualInteractionElementInfo.element) {\n      return null;\n    }\n\n    const exactMatch = candidate_elements.find(elementInfo => \n      elementInfo.element && elementInfo.element === actualInteractionElementInfo.element\n    );\n    \n    if (exactMatch) {\n      console.log('✅ Found exact element match:', {\n        matchedElement: exactMatch.element?.tagName,\n        matchedElementClass: exactMatch.element?.className,\n        index: exactMatch.index\n      });\n      return exactMatch;\n    }\n    \n    return null;\n  }\n\n  /**\n   * Finds a match by traversing up the parent elements\n   * \n   * @param candidate_elements Array of candidate element infos\n   * @param actualInteractionElementInfo The actual interaction element info\n   * @returns The matching candidate element info, or null if no match is found\n   */\n  function findParentMatch(candidate_elements, actualInteractionElementInfo) {\n    if (!actualInteractionElementInfo.element) {\n      return null;\n    }\n\n    let element = actualInteractionElementInfo.element;\n    while (element.parentElement) {\n      element = element.parentElement;\n      const parentMatch = candidate_elements.find(candidate => \n        candidate.element && candidate.element === element\n      );\n      \n      if (parentMatch) {\n        console.log('✅ Found parent element match:', {\n          matchedElement: parentMatch.element?.tagName,\n          matchedElementClass: parentMatch.element?.className,\n          index: parentMatch.index,\n          depth: element.tagName\n        });\n        return parentMatch;\n      }\n      \n      // Stop if we hit another candidate element\n      if (candidate_elements.some(candidate => \n        candidate.element && candidate.element === element\n      )) {\n        console.log('⚠️ Stopped parent search - hit another candidate element:', element.tagName);\n        break;\n      }\n    }\n    \n    return null;\n  }\n\n  /**\n   * Finds a match based on spatial relationships between elements\n   * \n   * @param candidate_elements Array of candidate element infos\n   * @param actualInteractionElementInfo The actual interaction element info\n   * @returns The matching candidate element info, or null if no match is found\n   */\n  function findSpatialMatch(candidate_elements, actualInteractionElementInfo) {\n    if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\n      return null;\n    }\n\n    const actualBox = actualInteractionElementInfo.bounding_box;\n    let bestMatch = null;\n    let bestScore = 0;\n\n    for (const candidateInfo of candidate_elements) {\n      if (!candidateInfo.bounding_box) continue;\n      \n      const candidateBox = candidateInfo.bounding_box;\n      let score = 0;\n\n      // Check if actual element is contained within candidate\n      if (isPointInsideBox({ x: actualBox.x, y: actualBox.y }, candidateBox) &&\n          isPointInsideBox({ x: actualBox.x + actualBox.width, y: actualBox.y + actualBox.height }, candidateBox)) {\n        score += 100; // High score for containment\n      }\n\n      // Calculate overlap area as a factor\n      const overlap = calculateOverlap(actualBox, candidateBox);\n      score += overlap;\n\n      // Consider proximity if no containment\n      if (score === 0) {\n        const distance = Math.sqrt(\n          Math.pow((actualBox.x + actualBox.width/2) - (candidateBox.x + candidateBox.width/2), 2) +\n          Math.pow((actualBox.y + actualBox.height/2) - (candidateBox.y + candidateBox.height/2), 2)\n        );\n        // Convert distance to a score (closer = higher score)\n        score = 1000 / (distance + 1);\n      }\n\n      if (score > bestScore) {\n        bestScore = score;\n        bestMatch = candidateInfo;\n        console.log('📏 New best spatial match:', {\n          element: candidateInfo.element?.tagName,\n          class: candidateInfo.element?.className,\n          index: candidateInfo.index,\n          score: score\n        });\n      }\n    }\n\n    if (bestMatch) {\n      console.log('✅ Final spatial match selected:', {\n      element: bestMatch.element?.tagName,\n      class: bestMatch.element?.className,\n      index: bestMatch.index,\n      finalScore: bestScore\n    });\n    return bestMatch;\n  }\n\n  return null;\n  }\n\n  /**\n   * Finds a matching candidate element for an actual interaction element\n   * \n   * @param candidate_elements Array of candidate element infos\n   * @param actualInteractionElementInfo The actual interaction element info\n   * @returns The matching candidate element info, or null if no match is found\n   */\n  function findMatchingCandidateElementInfo(candidate_elements, actualInteractionElementInfo) {\n    if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\n      console.error('❌ Missing required properties in actualInteractionElementInfo');\n      return null;\n    }\n\n    console.log('🔍 Starting element matching for:', {\n      clickedElement: actualInteractionElementInfo.element.tagName,\n      clickedElementClass: actualInteractionElementInfo.element.className,\n      totalCandidates: candidate_elements.length\n    });\n\n    // First try exact element match\n    const exactMatch = findExactMatch(candidate_elements, actualInteractionElementInfo);\n    if (exactMatch) {\n      return exactMatch;\n    }\n    console.log('❌ No exact element match found, trying parent matching...');\n\n    // Try finding closest clickable parent\n    const parentMatch = findParentMatch(candidate_elements, actualInteractionElementInfo);\n    if (parentMatch) {\n      return parentMatch;\n    }\n    console.log('❌ No parent match found, falling back to spatial matching...');\n\n    // If no exact or parent match, look for spatial relationships\n    const spatialMatch = findSpatialMatch(candidate_elements, actualInteractionElementInfo);\n    if (spatialMatch) {\n      return spatialMatch;\n    }\n\n    console.error('❌ No matching element found for actual interaction element:', actualInteractionElementInfo);\n    return null;\n  }\n\n  const highlight = {\n    execute: async function(elementTypes, handleScroll=false) {\n      const elements = await findElements(elementTypes);\n      highlightElements(elements, handleScroll);\n      return elements;\n    },\n\n    unexecute: function(handleScroll=false) {\n      unhighlightElements(handleScroll);\n    },\n\n    generateJSON: async function() {\n      const json = {};\n\n     // Capture viewport dimensions\n     const viewportData = {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      documentWidth: document.documentElement.clientWidth,\n      documentHeight: document.documentElement.clientHeight,\n      timestamp: new Date().toISOString()\n    };\n\n      // Add viewport data to the JSON output\n      json.viewport = viewportData;\n\n\n      await Promise.all(Object.values(ElementTag).map(async elementType => {\n        const elements = await findElements(elementType);\n        json[elementType] = elements;\n      }));\n\n      // Serialize the JSON object\n      const jsonString = JSON.stringify(json, null, 4); // Pretty print with 4 spaces\n\n      console.log(`JSON: ${jsonString}`);\n      return jsonString;\n    },\n\n    getElementInfo\n  };\n\n\n  function unhighlightElements(handleScroll=false) {\n    const documents = getAllFrames();\n    documents.forEach(doc => {\n      const overlay = doc.getElementById('highlight-overlay');\n      if (overlay) {\n        if (handleScroll) {\n          // Remove event listeners\n          doc.removeEventListener('scroll', overlay.scrollHandler, true);\n          doc.removeEventListener('resize', overlay.resizeHandler);\n        }\n        overlay.remove();\n      }\n    });\n  }\n\n\n\n\n  async function findElements(elementTypes, verbose=true) {\n    const typesArray = Array.isArray(elementTypes) ? elementTypes : [elementTypes];\n    console.log('Starting element search for types:', typesArray);\n\n    const elements = [];\n    typesArray.forEach(elementType => {\n      if (elementType === ElementTag.FILLABLE) {\n        elements.push(...findFillables());\n      }\n      if (elementType === ElementTag.SELECTABLE) {\n        elements.push(...findDropdowns());\n      }\n      if (elementType === ElementTag.CLICKABLE) {\n        elements.push(...findClickables());\n        elements.push(...findToggles());\n        elements.push(...findCheckables());\n      }\n      if (elementType === ElementTag.NON_INTERACTIVE_ELEMENT) {\n        elements.push(...findNonInteractiveElements());\n      }\n    });\n\n    // console.log('Before uniquify:', elements.length);\n    const elementsWithInfo = elements.map((element, index) => \n      getElementInfo(element, index)\n    );\n\n    \n    \n    const uniqueElements = uniquifyElements(elementsWithInfo);\n    console.log(`Found ${uniqueElements.length} elements:`);\n    \n    // More comprehensive visibility check\n    const visibleElements = uniqueElements.filter(elementInfo => {\n      const el = elementInfo.element;\n      const style = getComputedStyle(el);\n      \n      // Check various style properties that affect visibility\n      if (style.display === 'none' || \n          style.visibility === 'hidden') {\n        return false;\n      }\n      \n      // Check if element has non-zero dimensions\n      const rect = el.getBoundingClientRect();\n      if (rect.width === 0 || rect.height === 0) {\n        return false;\n      }\n      \n      // Check if element is within viewport\n      if (rect.bottom < 0 || \n          rect.top > window.innerHeight || \n          rect.right < 0 || \n          rect.left > window.innerWidth) {\n        // Element is outside viewport, but still might be valid \n        // if user scrolls to it, so we'll include it\n        return true;\n      }\n      \n      return true;\n    });\n    \n    console.log(`Out of which ${visibleElements.length} elements are visible:`);\n    if (verbose) {\n      visibleElements.forEach(info => {\n        console.log(`Element ${info.index}:`, info);\n      });\n    }\n    \n    return visibleElements;\n  }\n\n  // elements is an array of objects with index, xpath\n  function highlightElements(elements, handleScroll=false) {\n    // console.log('[highlightElements] called with', elements.length, 'elements');\n    // Create overlay if it doesn't exist and store it in a dictionary\n    const documents = getAllFrames();  \n    let overlays = {};\n    documents.forEach(doc => {\n      let overlay = doc.getElementById('highlight-overlay');\n      if (!overlay) {\n        overlay = doc.createElement('div');\n        overlay.id = 'highlight-overlay';\n        overlay.style.cssText = `\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        z-index: 2147483647;\n      `;\n        doc.body.appendChild(overlay);\n        // console.log('[highlightElements] Created overlay in document:', doc);\n      }\n      overlays[doc.documentURI] = overlay;\n    });\n    \n\n    const updateHighlights = (doc = null) => {\n      if (doc) {\n        overlays[doc.documentURI].innerHTML = '';\n      } else {\n        Object.values(overlays).forEach(overlay => { overlay.innerHTML = ''; });\n      }    \n      elements.forEach((elementInfo, idx) => {\n        //console.log(`[highlightElements] Processing element ${idx}:`, elementInfo.tag, elementInfo.css_selector, elementInfo.bounding_box);\n        let element = elementInfo.element; //getElementByXPathOrCssSelector(elementInfo);\n        if (!element) {\n          element = getElementByXPathOrCssSelector(elementInfo);\n          if (!element) {\n            console.warn('[highlightElements] Could not find element for:', elementInfo);\n            return;\n          }\n        }\n        //if highlights requested for a specific doc, skip unrelated elements\n        if (doc && element.ownerDocument !== doc) {\n          console.log(\"[highlightElements] Skipped element since it doesn't belong to document\", doc);\n          return;\n        }\n        const rect = element.getBoundingClientRect();\n        if (rect.width === 0 || rect.height === 0) {\n          console.warn('[highlightElements] Element has zero dimensions:', elementInfo);\n          return;\n        }\n        // Create border highlight (red rectangle)\n        // use ownerDocument to support iframes/frames\n        const highlight = element.ownerDocument.createElement('div');\n        highlight.style.cssText = `\n        position: fixed;\n        left: ${rect.x}px;\n        top: ${rect.y}px;\n        width: ${rect.width}px;\n        height: ${rect.height}px;\n        border: 1px solid rgb(255, 0, 0);\n        transition: all 0.2s ease-in-out;\n      `;\n        // Create index label container - now positioned to the right and slightly up\n        const labelContainer = element.ownerDocument.createElement('div');\n        labelContainer.style.cssText = `\n        position: absolute;\n        right: -10px;     /* Offset to the right */\n        top: -10px;       /* Offset upwards */\n        padding: 4px;\n        background-color: rgba(255, 255, 0, 0.6);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      `;\n        const text = element.ownerDocument.createElement('span');\n        text.style.cssText = `\n        color: rgb(0, 0, 0, 0.8);\n        font-family: 'Courier New', Courier, monospace;\n        font-size: 12px;\n        font-weight: bold;\n        line-height: 1;\n      `;\n        text.textContent = elementInfo.index;\n        labelContainer.appendChild(text);\n        highlight.appendChild(labelContainer);      \n        overlays[element.ownerDocument.documentURI].appendChild(highlight);\n        \n      });\n    };\n\n    // Initial highlight\n    updateHighlights();\n\n    if (handleScroll) {\n      documents.forEach(doc => {\n        // Update highlights on scroll and resize\n        console.log('registering scroll and resize handlers for document: ', doc);\n        const scrollHandler = () => {\n          requestAnimationFrame(() => updateHighlights(doc));\n        };\n        const resizeHandler = () => {\n          updateHighlights(doc);\n        };\n        doc.addEventListener('scroll', scrollHandler, true);\n        doc.addEventListener('resize', resizeHandler);\n        // Store event handlers for cleanup\n        overlays[doc.documentURI].scrollHandler = scrollHandler;\n        overlays[doc.documentURI].resizeHandler = resizeHandler;\n      });    \n    }\n  }\n\n  // function unexecute() {\n  //   unhighlightElements();\n  // }\n\n  // Make it available globally for both Extension and Playwright\n  if (typeof window !== 'undefined') {\n    function stripElementRefs(elementInfo) {\n      if (!elementInfo) return null;\n      const { element, ...rest } = elementInfo;\n      return rest;\n    }\n\n    window.ProboLabs = window.ProboLabs || {};\n\n    // --- Caching State ---\n    window.ProboLabs.candidates = [];\n    window.ProboLabs.actual = null;\n    window.ProboLabs.matchingCandidate = null;\n\n    // --- Methods ---\n    /**\n     * Find and cache candidate elements of a given type (e.g., 'CLICKABLE').\n     * NOTE: This function is async and must be awaited from Playwright/Node.\n     */\n    window.ProboLabs.findAndCacheCandidateElements = async function(elementType) {\n      //console.log('[ProboLabs] findAndCacheCandidateElements called with:', elementType);\n      const found = await findElements(elementType);\n      window.ProboLabs.candidates = found;\n      // console.log('[ProboLabs] candidates set to:', found, 'type:', typeof found, 'isArray:', Array.isArray(found));\n      return found.length;\n    };\n\n    window.ProboLabs.findAndCacheActualElement = function(cssSelector, iframeSelector, isHover=false) {\n      // console.log('[ProboLabs] findAndCacheActualElement called with:', cssSelector, iframeSelector);\n      let el = findElement(document, iframeSelector, cssSelector);\n      if(isHover) {\n        const visibleElement = findClosestVisibleElement(el);\n        if (visibleElement) {\n          el = visibleElement;\n        }\n      }\n      if (!el) {\n        window.ProboLabs.actual = null;\n        // console.log('[ProboLabs] actual set to null');\n        return false;\n      }\n      window.ProboLabs.actual = getElementInfo(el, -1);\n      // console.log('[ProboLabs] actual set to:', window.ProboLabs.actual);\n      return true;\n    };\n\n    window.ProboLabs.findAndCacheMatchingCandidate = function() {\n      // console.log('[ProboLabs] findAndCacheMatchingCandidate called');\n      if (!window.ProboLabs.candidates.length || !window.ProboLabs.actual) {\n        window.ProboLabs.matchingCandidate = null;\n        // console.log('[ProboLabs] matchingCandidate set to null');\n        return false;\n      }\n      window.ProboLabs.matchingCandidate = findMatchingCandidateElementInfo(window.ProboLabs.candidates, window.ProboLabs.actual);\n      // console.log('[ProboLabs] matchingCandidate set to:', window.ProboLabs.matchingCandidate);\n      return !!window.ProboLabs.matchingCandidate;\n    };\n\n    window.ProboLabs.highlightCachedElements = function(which) {\n      let elements = [];\n      if (which === 'candidates') elements = window.ProboLabs.candidates;\n      if (which === 'actual' && window.ProboLabs.actual) elements = [window.ProboLabs.actual];\n      if (which === 'matching' && window.ProboLabs.matchingCandidate) elements = [window.ProboLabs.matchingCandidate];\n      console.log(`[ProboLabs] highlightCachedElements ${which} with ${elements.length} elements`);\n      highlightElements(elements);\n    };\n\n    window.ProboLabs.unhighlight = function() {\n      // console.log('[ProboLabs] unhighlight called');\n      unhighlightElements();\n    };\n\n    window.ProboLabs.reset = function() {\n      console.log('[ProboLabs] reset called');\n      window.ProboLabs.candidates = [];\n      window.ProboLabs.actual = null;\n      window.ProboLabs.matchingCandidate = null;\n      unhighlightElements();\n    };\n\n    window.ProboLabs.getCandidates = function() {\n      // console.log('[ProboLabs] getCandidates called. candidates:', window.ProboLabs.candidates, 'type:', typeof window.ProboLabs.candidates, 'isArray:', Array.isArray(window.ProboLabs.candidates));\n      const arr = Array.isArray(window.ProboLabs.candidates) ? window.ProboLabs.candidates : [];\n      return arr.map(stripElementRefs);\n    };\n    window.ProboLabs.getActual = function() {\n      return stripElementRefs(window.ProboLabs.actual);\n    };\n    window.ProboLabs.getMatchingCandidate = function() {\n      return stripElementRefs(window.ProboLabs.matchingCandidate);\n    };\n\n    // Retain existing API for backward compatibility\n    window.ProboLabs.ElementTag = ElementTag;\n    window.ProboLabs.highlightElements = highlightElements;\n    window.ProboLabs.unhighlightElements = unhighlightElements;\n    window.ProboLabs.findElements = findElements;\n    window.ProboLabs.getElementInfo = getElementInfo;\n    window.ProboLabs.highlight = window.ProboLabs.highlight;\n    window.ProboLabs.unhighlight = window.ProboLabs.unhighlight;\n\n    // --- Utility Functions ---\n    function findClosestVisibleElement(element) {\n      let current = element;\n      while (current) {\n        const style = window.getComputedStyle(current);\n        if (\n          style &&\n          style.display !== 'none' &&\n          style.visibility !== 'hidden' &&\n          current.offsetWidth > 0 &&\n          current.offsetHeight > 0\n        ) {\n          return current;\n        }\n        if (!current.parentElement || current === document.body) break;\n        current = current.parentElement;\n      }\n      return null;\n    }\n  }\n\n  exports.ElementInfo = ElementInfo;\n  exports.ElementTag = ElementTag;\n  exports.deserializeNodeFromJSON = deserializeNodeFromJSON;\n  exports.detectScrollableContainers = detectScrollableContainers;\n  exports.findElement = findElement;\n  exports.findElements = findElements;\n  exports.generateCssPath = generateCssPath;\n  exports.getAriaLabelledByText = getAriaLabelledByText;\n  exports.getContainingIframe = getContainingIframe;\n  exports.getElementInfo = getElementInfo;\n  exports.getRobustSelector = getRobustSelector;\n  exports.highlight = highlight;\n  exports.highlightElements = highlightElements;\n  exports.isScrollableContainer = isScrollableContainer;\n  exports.serializeNodeToJSON = serializeNodeToJSON;\n  exports.unhighlightElements = unhighlightElements;\n\n}));\n//# sourceMappingURL=probolabs.umd.js.map\n";
+var ApplyAIStatus;
+(function (ApplyAIStatus) {
+    ApplyAIStatus["PREPARE_START"] = "PREPARE_START";
+    ApplyAIStatus["PREPARE_SUCCESS"] = "PREPARE_SUCCESS";
+    ApplyAIStatus["PREPARE_ERROR"] = "PREPARE_ERROR";
+    ApplyAIStatus["SEND_START"] = "SEND_START";
+    ApplyAIStatus["SEND_SUCCESS"] = "SEND_SUCCESS";
+    ApplyAIStatus["SEND_ERROR"] = "SEND_ERROR";
+    ApplyAIStatus["APPLY_AI_CANCELLED"] = "APPLY_AI_CANCELLED";
+    ApplyAIStatus["SUMMARY_COMPLETED"] = "SUMMARY_COMPLETED";
+    ApplyAIStatus["SUMMARY_ERROR"] = "SUMMARY_ERROR";
+})(ApplyAIStatus || (ApplyAIStatus = {}));
+var ReplayStatus;
+(function (ReplayStatus) {
+    ReplayStatus["REPLAY_START"] = "REPLAY_START";
+    ReplayStatus["REPLAY_SUCCESS"] = "REPLAY_SUCCESS";
+    ReplayStatus["REPLAY_ERROR"] = "REPLAY_ERROR";
+    ReplayStatus["REPLAY_CANCELLED"] = "REPLAY_CANCELLED";
+})(ReplayStatus || (ReplayStatus = {}));
+
+// WebSocketsMessageType enum for WebSocket and event message types shared across the app
+var WebSocketsMessageType;
+(function (WebSocketsMessageType) {
+    WebSocketsMessageType["INTERACTION_APPLY_AI_PREPARE_START"] = "INTERACTION_APPLY_AI_PREPARE_START";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_PREPARE_SUCCESS"] = "INTERACTION_APPLY_AI_PREPARE_SUCCESS";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_PREPARE_ERROR"] = "INTERACTION_APPLY_AI_PREPARE_ERROR";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_SEND_TO_LLM_START"] = "INTERACTION_APPLY_AI_SEND_TO_LLM_START";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_SEND_TO_LLM_SUCCESS"] = "INTERACTION_APPLY_AI_SEND_TO_LLM_SUCCESS";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_SEND_TO_LLM_ERROR"] = "INTERACTION_APPLY_AI_SEND_TO_LLM_ERROR";
+    WebSocketsMessageType["INTERACTION_REPLAY_START"] = "INTERACTION_REPLAY_START";
+    WebSocketsMessageType["INTERACTION_REPLAY_SUCCESS"] = "INTERACTION_REPLAY_SUCCESS";
+    WebSocketsMessageType["INTERACTION_REPLAY_ERROR"] = "INTERACTION_REPLAY_ERROR";
+    WebSocketsMessageType["INTERACTION_REPLAY_CANCELLED"] = "INTERACTION_REPLAY_CANCELLED";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_CANCELLED"] = "INTERACTION_APPLY_AI_CANCELLED";
+    WebSocketsMessageType["INTERACTION_STEP_CREATED"] = "INTERACTION_STEP_CREATED";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_SUMMARY_COMPLETED"] = "INTERACTION_APPLY_AI_SUMMARY_COMPLETED";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_SUMMARY_ERROR"] = "INTERACTION_APPLY_AI_SUMMARY_ERROR";
+})(WebSocketsMessageType || (WebSocketsMessageType = {}));
 
-class ElementInfo {
-  constructor(element, index, {tag, type, text, html, xpath, css_selector, bounding_box, iframe_selector}) {
-    this.index = index.toString();
-    this.tag = tag;
-    this.type = type;
-    this.text = text;
-    this.html = html;
-    this.xpath = xpath;
-    this.css_selector = css_selector;
-    this.bounding_box = bounding_box;
-    this.iframe_selector = iframe_selector;
-    this.element = element;
-    this.depth = -1;
-  }
-
-  getSelector() {
-    return this.xpath ? this.xpath : this.css_selector;
-  }
-
-  getDepth() {
-    if (this.depth >= 0) {
-      return this.depth;
-    }
-    
-    this.depth = 0;
-    let currentElement = this.element;
-    
-    while (currentElement.nodeType === Node.ELEMENT_NODE) {          
-      this.depth++;
-      if (currentElement.assignedSlot) {
-        currentElement = currentElement.assignedSlot;
-      }
-      else {
-        currentElement = currentElement.parentNode;
-        // Check if we're at a shadow root
-        if (currentElement && currentElement.nodeType !== Node.ELEMENT_NODE && currentElement.getRootNode() instanceof ShadowRoot) {
-          // Get the shadow root's host element
-          currentElement = currentElement.getRootNode().host;     
-        }
-      }
-    }
-        
-    return this.depth;
-  }
-}
+// Action constants
+var PlaywrightAction;
+(function (PlaywrightAction) {
+    PlaywrightAction["VISIT_BASE_URL"] = "VISIT_BASE_URL";
+    PlaywrightAction["VISIT_URL"] = "VISIT_URL";
+    PlaywrightAction["CLICK"] = "CLICK";
+    PlaywrightAction["FILL_IN"] = "FILL_IN";
+    PlaywrightAction["SELECT_DROPDOWN"] = "SELECT_DROPDOWN";
+    PlaywrightAction["SELECT_MULTIPLE_DROPDOWN"] = "SELECT_MULTIPLE_DROPDOWN";
+    PlaywrightAction["CHECK_CHECKBOX"] = "CHECK_CHECKBOX";
+    PlaywrightAction["SELECT_RADIO"] = "SELECT_RADIO";
+    PlaywrightAction["TOGGLE_SWITCH"] = "TOGGLE_SWITCH";
+    PlaywrightAction["TYPE_KEYS"] = "TYPE_KEYS";
+    PlaywrightAction["HOVER"] = "HOVER";
+    PlaywrightAction["VALIDATE_EXACT_VALUE"] = "VALIDATE_EXACT_VALUE";
+    PlaywrightAction["VALIDATE_CONTAINS_VALUE"] = "VALIDATE_CONTAINS_VALUE";
+    PlaywrightAction["VALIDATE_URL"] = "VALIDATE_URL";
+    PlaywrightAction["VALIDATE"] = "VALIDATE";
+    PlaywrightAction["SCROLL_TO_ELEMENT"] = "SCROLL_TO_ELEMENT";
+})(PlaywrightAction || (PlaywrightAction = {}));
 
 /**
  * Logging levels for Probo
@@ -65,75 +70,91 @@ var ProboLogLevel;
     ProboLogLevel["WARN"] = "WARN";
     ProboLogLevel["ERROR"] = "ERROR";
 })(ProboLogLevel || (ProboLogLevel = {}));
-// Map ProboLogLevel to Winston levels
-const levelMap = {
-    [ProboLogLevel.DEBUG]: 'debug',
-    [ProboLogLevel.INFO]: 'info',
-    [ProboLogLevel.LOG]: 'info',
-    [ProboLogLevel.WARN]: 'warn',
-    [ProboLogLevel.ERROR]: 'error',
+const logLevelOrder = {
+    [ProboLogLevel.DEBUG]: 0,
+    [ProboLogLevel.INFO]: 1,
+    [ProboLogLevel.LOG]: 2,
+    [ProboLogLevel.WARN]: 3,
+    [ProboLogLevel.ERROR]: 4,
 };
-// Create a single Winston logger instance without transports initially
-const logger = winston.createLogger({
-    level: levelMap[ProboLogLevel.INFO],
-    format: winston.format.combine(winston.format.timestamp(), winston.format.printf(({ timestamp, level, message }) => `[${timestamp}] ${level.toUpperCase()}: ${message}`)),
-    transports: []
-});
-/**
- * Configure logging transports and level.
- * @param options.logToConsole - Enable or disable console logging (default: true)
- * @param options.logToFile    - Enable or disable file logging (default: true)
- * @param options.level        - Logging level (default: INFO)
- * @param options.filePath     - Path for file transport (default: '/tmp/probo.log')
- */
-function configureLogger(options) {
-    const { logToConsole = true, logToFile = true, level = ProboLogLevel.INFO, filePath = '/tmp/probo.log', } = options || {};
-    // Set global level
-    logger.level = levelMap[level];
-    // Console transport
-    const consoleTransport = logger.transports.find(t => t instanceof winston.transports.Console);
-    if (logToConsole) {
-        if (!consoleTransport) {
-            logger.add(new winston.transports.Console());
-        }
+class ProboLogger {
+    constructor(prefix, level = ProboLogLevel.INFO) {
+        this.prefix = prefix;
+        this.level = level;
     }
-    else if (consoleTransport) {
-        logger.remove(consoleTransport);
+    setLogLevel(level) {
+        this.level = level;
     }
-    // File transport
-    const fileTransport = logger.transports.find(t => t instanceof winston.transports.File);
-    if (logToFile) {
-        if (!fileTransport) {
-            logger.add(new winston.transports.File({ filename: filePath }));
-        }
+    shouldLog(level) {
+        return logLevelOrder[level] >= logLevelOrder[this.level];
     }
-    else if (fileTransport) {
-        logger.remove(fileTransport);
+    preamble() {
+        const now = new Date();
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        const seconds = String(now.getSeconds()).padStart(2, '0');
+        return `[${hours}:${minutes}:${seconds}] [${this.prefix}]`;
     }
+    debug(...args) { if (this.shouldLog(ProboLogLevel.DEBUG))
+        console.debug(this.preamble(), ...args); }
+    info(...args) { if (this.shouldLog(ProboLogLevel.INFO))
+        console.info(this.preamble(), ...args); }
+    log(...args) { if (this.shouldLog(ProboLogLevel.LOG))
+        console.log(this.preamble(), ...args); }
+    warn(...args) { if (this.shouldLog(ProboLogLevel.WARN))
+        console.warn(this.preamble(), ...args); }
+    error(...args) { if (this.shouldLog(ProboLogLevel.ERROR))
+        console.error(this.preamble(), ...args); }
 }
-// Apply defaults: both console and file, INFO level
-configureLogger();
 /**
- * Simple logger wrapper that prefixes messages.
+ * Interfaces for element information (unchanged)
  */
-class ProboLogger {
-    constructor(prefix) {
-        this.prefix = prefix;
-    }
-    _logInternal(level, ...args) {
-        const msg = args
-            .map(a => (typeof a === 'object' ? JSON.stringify(a) : a))
-            .join(' ');
-        logger.log({ level: levelMap[level], message: `[${this.prefix}] ${msg}` });
-    }
-    debug(...args) { this._logInternal(ProboLogLevel.DEBUG, ...args); }
-    info(...args) { this._logInternal(ProboLogLevel.INFO, ...args); }
-    log(...args) { this._logInternal(ProboLogLevel.LOG, ...args); }
-    warn(...args) { this._logInternal(ProboLogLevel.WARN, ...args); }
-    error(...args) { this._logInternal(ProboLogLevel.ERROR, ...args); }
+/* export interface ElementInfo {
+  index: string;
+  tag: string;
+  type: string;
+  text: string;
+  html: string;
+  xpath: string;
+  css_selector: string;
+  bounding_box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  iframe_selector: string;
+  element: any;
+  depth?: number;
+  getSelector(): string;
+  getDepth(): number;
 }
-// Default logger instance
-const proboLogger$1 = new ProboLogger('probolib');
+ */
+/* export interface CleanElementInfo {
+  index: string;
+  tag: string;
+  type: string;
+  text: string;
+  html: string;
+  xpath: string;
+  css_selector: string;
+  iframe_selector: string;
+  bounding_box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  depth: number;
+} */
 // Element cleaner logging
 const elementLogger = new ProboLogger('element-cleaner');
 /**
@@ -179,602 +200,8 @@ function cleanupInstructionElements(instruction) {
     return cleaned;
 }
 
-// Action constants
-const PlaywrightAction = {
-    VISIT_BASE_URL: 'VISIT_BASE_URL',
-    VISIT_URL: 'VISIT_URL',
-    CLICK: 'CLICK',
-    FILL_IN: 'FILL_IN',
-    SELECT_DROPDOWN: 'SELECT_DROPDOWN',
-    SELECT_MULTIPLE_DROPDOWN: 'SELECT_MULTIPLE_DROPDOWN',
-    CHECK_CHECKBOX: 'CHECK_CHECKBOX',
-    SELECT_RADIO: 'SELECT_RADIO',
-    TOGGLE_SWITCH: 'TOGGLE_SWITCH',
-    TYPE_KEYS: 'TYPE_KEYS',
-    HOVER: 'HOVER',
-    VALIDATE_EXACT_VALUE: 'VALIDATE_EXACT_VALUE',
-    VALIDATE_CONTAINS_VALUE: 'VALIDATE_CONTAINS_VALUE',
-    VALIDATE_URL: 'VALIDATE_URL',
-};
-const SPECIAL_KEYS = [
-    'Enter', 'Tab', 'Escape', 'Backspace', 'Delete',
-    'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
-    'Home', 'End', 'PageUp', 'PageDown',
-    'Insert', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
-    'Shift', 'Control', 'Alt', 'Meta',
-    'CapsLock', 'NumLock', 'ScrollLock',
-    'Pause', 'PrintScreen', 'ContextMenu',
-    'AudioVolumeUp', 'AudioVolumeDown', 'AudioVolumeMute',
-    'MediaTrackNext', 'MediaTrackPrevious', 'MediaStop', 'MediaPlayPause',
-    'BrowserBack', 'BrowserForward', 'BrowserRefresh', 'BrowserFavorites'
-];
-/**
- * Handle potential navigation exactly like Python's handle_potential_navigation
- */
-async function handlePotentialNavigation(page, locator = null, value = null, options = {}) {
-    const { initialTimeout = 5000, navigationTimeout = 7000, globalTimeout = 15000, } = options;
-    const startTime = Date.now();
-    let navigationCount = 0;
-    let lastNavTime = null;
-    const onFrameNav = (frame) => {
-        if (frame === page.mainFrame()) {
-            navigationCount++;
-            lastNavTime = Date.now();
-            proboLogger$1.debug(`DEBUG_NAV[${((Date.now() - startTime) / 1000).toFixed(3)}s]: navigation detected (count=${navigationCount})`);
-        }
-    };
-    proboLogger$1.debug(`DEBUG_NAV[0.000s]: Starting navigation detection`);
-    page.on("framenavigated", onFrameNav);
-    try {
-        if (locator) {
-            proboLogger$1.debug(`DEBUG_NAV: Executing click(${value})`);
-            await clickAtPosition(page, locator, value);
-        }
-        // wait for any initial nav to fire
-        await page.waitForTimeout(initialTimeout);
-        proboLogger$1.debug(`DEBUG_NAV[${((Date.now() - startTime) / 1000).toFixed(3)}s]: After initial wait, count=${navigationCount}`);
-        if (navigationCount > 0) {
-            // loop until either per-nav or global timeout
-            while (true) {
-                const now = Date.now();
-                if (lastNavTime !== null &&
-                    now - lastNavTime > navigationTimeout) {
-                    proboLogger$1.debug(`DEBUG_NAV[${((now - startTime) / 1000).toFixed(3)}s]: per‐navigation timeout reached`);
-                    break;
-                }
-                if (now - startTime > globalTimeout) {
-                    proboLogger$1.debug(`DEBUG_NAV[${((now - startTime) / 1000).toFixed(3)}s]: overall timeout reached`);
-                    break;
-                }
-                await page.waitForTimeout(500);
-            }
-            // now wait for load + idle
-            proboLogger$1.debug(`DEBUG_NAV: waiting for load state`);
-            await page.waitForLoadState("load", { timeout: globalTimeout });
-            proboLogger$1.debug(`DEBUG_NAV: waiting for networkidle`);
-            try {
-                // shorter idle‐wait so we don't hang the full globalTimeout here
-                await page.waitForLoadState("networkidle", {
-                    timeout: navigationTimeout,
-                });
-            }
-            catch (_a) {
-                proboLogger$1.debug(`DEBUG_NAV: networkidle not reached in ${navigationTimeout}ms, proceeding anyway`);
-            }
-            await scrollToBottomRight(page);
-            proboLogger$1.debug(`DEBUG_NAV: done`);
-            return true;
-        }
-        proboLogger$1.debug(`DEBUG_NAV: no navigation detected`);
-        return false;
-    }
-    finally {
-        page.removeListener("framenavigated", onFrameNav);
-        proboLogger$1.debug(`DEBUG_NAV: listener removed`);
-    }
-}
-/**
- * Scroll entire page to bottom-right, triggering lazy-loaded content
- */
-async function scrollToBottomRight(page) {
-    const startTime = performance.now();
-    proboLogger$1.debug(`Starting scroll to bottom-right`);
-    let lastHeight = await page.evaluate(() => document.documentElement.scrollHeight);
-    let lastWidth = await page.evaluate(() => document.documentElement.scrollWidth);
-    let smoothingSteps = 0;
-    while (true) {
-        const initY = await page.evaluate(() => window.scrollY);
-        const initX = await page.evaluate(() => window.scrollX);
-        const clientHeight = await page.evaluate(() => document.documentElement.clientHeight);
-        const maxHeight = await page.evaluate(() => document.documentElement.scrollHeight);
-        const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
-        const maxWidth = await page.evaluate(() => document.documentElement.scrollWidth);
-        let currX = initX;
-        while (currX < maxWidth - clientWidth) {
-            let currY = initY;
-            while (currY < maxHeight - clientHeight) {
-                currY += clientHeight;
-                await page.evaluate(([x, y]) => window.scrollTo(x, y), [currX, currY]);
-                await page.waitForTimeout(50);
-                smoothingSteps++;
-            }
-            currX += clientWidth;
-        }
-        proboLogger$1.debug(`performed ${smoothingSteps} smoothing steps while scrolling`);
-        const newHeight = await page.evaluate(() => document.documentElement.scrollHeight);
-        const newWidth = await page.evaluate(() => document.documentElement.scrollWidth);
-        if (newHeight === lastHeight && newWidth === lastWidth)
-            break;
-        proboLogger$1.debug(`page dimensions updated, repeating scroll`);
-        lastHeight = newHeight;
-        lastWidth = newWidth;
-    }
-    if (smoothingSteps > 0) {
-        await page.waitForTimeout(200);
-        await page.evaluate('window.scrollTo(0, 0)');
-        await page.waitForTimeout(50);
-    }
-    proboLogger$1.debug(`Scroll completed in ${(performance.now() - startTime).toFixed(3)}ms`);
-}
-/**
- * Wait for DOM mutations to settle using MutationObserver logic
- */
-async function waitForMutationsToSettle(page, mutationTimeout = 1500, initTimeout = 2000) {
-    const startTime = Date.now();
-    proboLogger$1.debug(`Starting mutation settlement (initTimeout=${initTimeout}, mutationTimeout=${mutationTimeout})`);
-    const result = await page.evaluate(async ({ mutationTimeout, initTimeout }) => {
-        async function blockUntilStable(targetNode, options = { childList: true, subtree: true }) {
-            return new Promise((resolve) => {
-                let initTimerExpired = false;
-                let mutationsOccurred = false;
-                const observerTimers = new Set();
-                window.setTimeout(() => {
-                    initTimerExpired = true;
-                    if (observerTimers.size === 0)
-                        resolve(mutationsOccurred);
-                }, initTimeout);
-                const observer = new MutationObserver(() => {
-                    mutationsOccurred = true;
-                    observerTimers.forEach((t) => clearTimeout(t));
-                    observerTimers.clear();
-                    const t = window.setTimeout(() => {
-                        observerTimers.delete(t);
-                        if (initTimerExpired && observerTimers.size === 0) {
-                            observer.disconnect();
-                            resolve(mutationsOccurred);
-                        }
-                    }, mutationTimeout);
-                    observerTimers.add(t);
-                });
-                observer.observe(targetNode, options);
-            });
-        }
-        return blockUntilStable(document.body);
-    }, { mutationTimeout, initTimeout });
-    const total = ((Date.now() - startTime) / 1000).toFixed(2);
-    proboLogger$1.debug(result
-        ? `Mutations settled. Took ${total}s`
-        : `No mutations observed. Took ${total}s`);
-    return result;
-}
-/**
- * Get element text value: allTextContents + innerText fallback
- */
-async function getElementValue(page, locator) {
-    const texts = await locator.allTextContents();
-    let allText = texts.join('').trim();
-    if (!allText) {
-        allText = await locator.evaluate((el) => el.innerText);
-    }
-    proboLogger$1.debug(`getElementValue: [${allText}]`);
-    return allText;
-}
-/**
- * Select dropdown option: native <select>, <option>, child select, or ARIA listbox
- */
-async function selectDropdownOption(page, locator, value) {
-    const tagName = await (locator === null || locator === void 0 ? void 0 : locator.evaluate((el) => el.tagName.toLowerCase()));
-    const role = await (locator === null || locator === void 0 ? void 0 : locator.getAttribute('role'));
-    if (tagName === 'option' || role === 'option') {
-        proboLogger$1.debug('selectDropdownOption: option role detected');
-        await (locator === null || locator === void 0 ? void 0 : locator.click());
-    }
-    else if (tagName === 'select') {
-        proboLogger$1.debug('selectDropdownOption: simple select tag detected');
-        try {
-            await (locator === null || locator === void 0 ? void 0 : locator.selectOption(value));
-        }
-        catch (_a) {
-            proboLogger$1.debug('selectDropdownOption: manual change event fallback');
-            const handle = locator ? await locator.elementHandle() : null;
-            await page.evaluate(({ h, val }) => {
-                const el = h;
-                if (el) {
-                    el.value = Array.isArray(val) ? val[0] : val;
-                    el.dispatchEvent(new Event('change', { bubbles: true }));
-                }
-            }, { h: handle, val: value });
-        }
-    }
-    else {
-        proboLogger$1.debug('selectDropdownOption: custom dropdown path');
-        let listbox = locator.locator('select');
-        let count = await listbox.count();
-        if (count > 1)
-            throw new Error(`selectDropdownOption: ambiguous <select> count=${count}`);
-        if (count === 1) {
-            proboLogger$1.debug('selectDropdownOption: child <select> found');
-            await listbox.selectOption(value);
-            return;
-        }
-        await locator.click();
-        let container = locator;
-        count = 0;
-        if (role !== 'listbox') {
-            for (let i = 0; i < 7; i++) {
-                listbox = container.getByRole('listbox');
-                count = await listbox.count();
-                if (count >= 1)
-                    break;
-                proboLogger$1.debug(`selectDropdownOption: iteration #${i} no listbox found`);
-                container = container.locator('xpath=..');
-            }
-        }
-        else {
-            listbox = container;
-            count = await listbox.count();
-        }
-        if (count !== 1)
-            throw new Error(`selectDropdownOption: found ${count} listbox locators`);
-        const vals = Array.isArray(value) ? value : [value];
-        for (const val of vals) {
-            const option = listbox.getByRole('option').getByText(new RegExp(`^${val}$`, 'i'));
-            const optCount = await option.count();
-            if (optCount !== 1)
-                throw new Error(`selectDropdownOption: ${optCount} options for '${val}'`);
-            await option.click();
-        }
-    }
-}
-/**
- * Execute a given Playwright action, mirroring Python's _perform_action
- */
-async function executePlaywrightAction(page, action, value, iframe_selector, element_css_selector) {
-    proboLogger$1.info(`performing Action: ${action} Value: ${value}`);
-    try {
-        if (action === PlaywrightAction.VISIT_BASE_URL || action === PlaywrightAction.VISIT_URL) {
-            await page.goto(value, { waitUntil: 'load' });
-            await handlePotentialNavigation(page, null);
-        }
-        else {
-            let locator = undefined;
-            if (iframe_selector)
-                locator = page.frameLocator(iframe_selector).locator(element_css_selector);
-            else
-                locator = page.locator(element_css_selector);
-            switch (action) {
-                case PlaywrightAction.CLICK:
-                    await handlePotentialNavigation(page, locator, value);
-                    break;
-                case PlaywrightAction.FILL_IN:
-                    // await locator.click();
-                    await locator.fill(value);
-                    break;
-                case PlaywrightAction.TYPE_KEYS:
-                    // Check if the value contains any special keys
-                    const specialKey = SPECIAL_KEYS.find(key => value.includes(key));
-                    if (specialKey) {
-                        // If it's a single special key, just press it
-                        if (value === specialKey) {
-                            await (locator === null || locator === void 0 ? void 0 : locator.press(specialKey));
-                        }
-                        else {
-                            // Handle combinations like 'Control+A' or 'Shift+ArrowRight'
-                            const parts = value.split('+');
-                            if (parts.length === 2 && SPECIAL_KEYS.includes(parts[0]) && SPECIAL_KEYS.includes(parts[1])) {
-                                await (locator === null || locator === void 0 ? void 0 : locator.press(value));
-                            }
-                            else {
-                                // If it's a mix of special keys and text, use pressSequentially
-                                await (locator === null || locator === void 0 ? void 0 : locator.pressSequentially(value));
-                            }
-                        }
-                    }
-                    else {
-                        // No special keys, just type normally
-                        await (locator === null || locator === void 0 ? void 0 : locator.pressSequentially(value));
-                    }
-                    break;
-                case PlaywrightAction.SELECT_DROPDOWN:
-                    await selectDropdownOption(page, locator, value);
-                    break;
-                case PlaywrightAction.SELECT_MULTIPLE_DROPDOWN:
-                    let optsArr;
-                    if (value.startsWith('[')) {
-                        try {
-                            optsArr = JSON.parse(value);
-                        }
-                        catch (_a) {
-                            optsArr = value.slice(1, -1).split(',').map(o => o.trim());
-                        }
-                    }
-                    else {
-                        optsArr = value.split(',').map(o => o.trim());
-                    }
-                    await (locator === null || locator === void 0 ? void 0 : locator.selectOption(optsArr));
-                    break;
-                case PlaywrightAction.CHECK_CHECKBOX:
-                    await (locator === null || locator === void 0 ? void 0 : locator.setChecked(value.toLowerCase() === 'true'));
-                    break;
-                case PlaywrightAction.SELECT_RADIO:
-                case PlaywrightAction.TOGGLE_SWITCH:
-                    await (locator === null || locator === void 0 ? void 0 : locator.click());
-                    break;
-                case PlaywrightAction.HOVER:
-                    await (locator === null || locator === void 0 ? void 0 : locator.hover({ noWaitAfter: false }));
-                    await page.waitForTimeout(100); // short delay for hover to take effect
-                    break;
-                case PlaywrightAction.VALIDATE_EXACT_VALUE:
-                    const actualExact = await getElementValue(page, locator);
-                    proboLogger$1.debug(`actual value is [${actualExact}]`);
-                    if (actualExact !== value) {
-                        proboLogger$1.info(`Validation *FAIL* expected '${value}' but got '${actualExact}'`);
-                        return false;
-                    }
-                    proboLogger$1.info('Validation *PASS*');
-                    break;
-                case PlaywrightAction.VALIDATE_CONTAINS_VALUE:
-                    const actualContains = await getElementValue(page, locator);
-                    proboLogger$1.debug(`actual value is [${actualContains}]`);
-                    if (!actualContains.includes(value)) {
-                        proboLogger$1.info(`Validation *FAIL* expected '${value}' to be contained in '${actualContains}'`);
-                        return false;
-                    }
-                    proboLogger$1.info('Validation *PASS*');
-                    break;
-                case PlaywrightAction.VALIDATE_URL:
-                    const currUrl = page.url();
-                    if (currUrl !== value) {
-                        proboLogger$1.info(`Validation *FAIL* expected url '${value}' while is '${currUrl}'`);
-                        return false;
-                    }
-                    proboLogger$1.info('Validation *PASS*');
-                    break;
-                default:
-                    throw new Error(`Unknown action: ${action}`);
-            }
-        }
-        return true;
-    }
-    catch (e) {
-        proboLogger$1.debug(`***ERROR failed to execute action ${action}: ${e}`);
-        throw e;
-    }
-}
-/**
- * Execute a given Playwright action using native Playwright functions where possible
- */
-async function executeCachedPlaywrightAction(page, action, value, iframe_selector, element_css_selector) {
-    proboLogger$1.log(`performing Cached Action: ${action} Value: ${value} on iframe: ${iframe_selector} locator: ${element_css_selector}`);
-    try {
-        let locator = undefined;
-        if (iframe_selector)
-            locator = page.frameLocator(iframe_selector).locator(element_css_selector);
-        else
-            locator = page.locator(element_css_selector);
-        switch (action) {
-            case PlaywrightAction.VISIT_BASE_URL:
-            case PlaywrightAction.VISIT_URL:
-                await page.goto(value, { waitUntil: 'networkidle' });
-                break;
-            case PlaywrightAction.CLICK:
-                await clickAtPosition(page, locator, value);
-                await handlePotentialNavigation(page);
-                break;
-            case PlaywrightAction.FILL_IN:
-                // await locator.click();
-                await locator.fill(value);
-                break;
-            case PlaywrightAction.TYPE_KEYS:
-                // Check if the value contains any special keys
-                const specialKey = SPECIAL_KEYS.find(key => value.includes(key));
-                if (specialKey) {
-                    // If it's a single special key, just press it
-                    if (value === specialKey) {
-                        await locator.press(specialKey);
-                    }
-                    else {
-                        // Handle combinations like 'Control+A' or 'Shift+ArrowRight'
-                        const parts = value.split('+');
-                        if (parts.length === 2 && SPECIAL_KEYS.includes(parts[0]) && SPECIAL_KEYS.includes(parts[1])) {
-                            await locator.press(value);
-                        }
-                        else {
-                            // If it's a mix of special keys and text, use pressSequentially
-                            await locator.pressSequentially(value);
-                        }
-                    }
-                }
-                else {
-                    // No special keys, just type normally
-                    await locator.pressSequentially(value);
-                }
-                break;
-            case PlaywrightAction.SELECT_DROPDOWN:
-                await locator.selectOption(value);
-                break;
-            case PlaywrightAction.SELECT_MULTIPLE_DROPDOWN:
-                let optsArr;
-                if (value.startsWith('[')) {
-                    try {
-                        optsArr = JSON.parse(value);
-                    }
-                    catch (_a) {
-                        optsArr = value.slice(1, -1).split(',').map(o => o.trim());
-                    }
-                }
-                else {
-                    optsArr = value.split(',').map(o => o.trim());
-                }
-                await locator.selectOption(optsArr);
-                break;
-            case PlaywrightAction.CHECK_CHECKBOX:
-                await locator.setChecked(value.toLowerCase() === 'true');
-                break;
-            case PlaywrightAction.SELECT_RADIO:
-            case PlaywrightAction.TOGGLE_SWITCH:
-                await locator.click();
-                break;
-            case PlaywrightAction.HOVER:
-                await (locator === null || locator === void 0 ? void 0 : locator.hover({ noWaitAfter: false }));
-                await page.waitForTimeout(100); // short delay for hover to take effect
-                break;
-            case PlaywrightAction.VALIDATE_EXACT_VALUE:
-                const actualExact = await getElementValue(page, locator);
-                proboLogger$1.debug(`actual value is [${actualExact}]`);
-                if (actualExact !== value) {
-                    proboLogger$1.info(`Validation *FAIL* expected '${value}' but got '${actualExact}'`);
-                    return false;
-                }
-                proboLogger$1.info('Validation *PASS*');
-                break;
-            case PlaywrightAction.VALIDATE_CONTAINS_VALUE:
-                const actualContains = await getElementValue(page, locator);
-                proboLogger$1.debug(`actual value is [${actualContains}]`);
-                if (!actualContains.includes(value)) {
-                    proboLogger$1.info(`Validation *FAIL* expected '${value}' to be contained in '${actualContains}'`);
-                    return false;
-                }
-                proboLogger$1.info('Validation *PASS*');
-                break;
-            case PlaywrightAction.VALIDATE_URL:
-                const currUrl = page.url();
-                if (currUrl !== value) {
-                    proboLogger$1.info(`Validation *FAIL* expected url '${value}' while is '${currUrl}'`);
-                    return false;
-                }
-                proboLogger$1.info('Validation *PASS*');
-                break;
-            default:
-                throw new Error(`Unknown action: ${action}`);
-        }
-        return true;
-    }
-    catch (e) {
-        proboLogger$1.debug(`***ERROR failed to execute cached action ${action}: ${e}`);
-        throw e;
-    }
-}
-var ClickPosition;
-(function (ClickPosition) {
-    ClickPosition["LEFT"] = "LEFT";
-    ClickPosition["RIGHT"] = "RIGHT";
-    ClickPosition["CENTER"] = "CENTER";
-})(ClickPosition || (ClickPosition = {}));
-/**
- * Click on an element at a specific position
- */
-async function clickAtPosition(page, locator, clickPosition) {
-    if (!clickPosition || clickPosition === ClickPosition.CENTER) {
-        await locator.click({ noWaitAfter: false });
-        return;
-    }
-    const boundingBox = await locator.boundingBox();
-    if (boundingBox) {
-        if (clickPosition === ClickPosition.LEFT) {
-            await page.mouse.click(boundingBox.x + 10, boundingBox.y + boundingBox.height / 2);
-        }
-        else if (clickPosition === ClickPosition.RIGHT) {
-            await page.mouse.click(boundingBox.x + boundingBox.width - 10, boundingBox.y + boundingBox.height / 2);
-        }
-    }
-}
-
-class Highlighter {
-    constructor(enableConsoleLogs = true) {
-        this.enableConsoleLogs = enableConsoleLogs;
-    }
-    async ensureHighlighterScript(page, maxRetries = 3) {
-        for (let attempt = 0; attempt < maxRetries; attempt++) {
-            try {
-                const scriptExists = await page.evaluate(`typeof window.ProboLabs?.highlight?.execute === 'function'`);
-                if (!scriptExists) {
-                    proboLogger$1.debug('Injecting highlighter script...');
-                    await page.evaluate(highlighterCode);
-                    // Verify the script was injected correctly
-                    const verified = await page.evaluate(`
-            //console.log('ProboLabs global:', window.ProboLabs);
-            typeof window.ProboLabs?.highlight?.execute === 'function'
-          `);
-                    proboLogger$1.debug('Script injection verified:', verified);
-                }
-                return; // Success - exit the function
-            }
-            catch (error) {
-                if (attempt === maxRetries - 1) {
-                    throw error;
-                }
-                proboLogger$1.debug(`Script injection attempt ${attempt + 1} failed, retrying after delay...`);
-                await new Promise(resolve => setTimeout(resolve, 100));
-            }
-        }
-    }
-    async highlightElements(page, elementTags) {
-        proboLogger$1.debug('highlightElements called with:', elementTags);
-        await this.ensureHighlighterScript(page);
-        // Execute the highlight function and await its result
-        const result = await page.evaluate(async (tags) => {
-            var _a, _b;
-            //proboLogger.debug('Browser: Starting highlight execution with tag:', tag);
-            if (!((_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.highlight) === null || _b === void 0 ? void 0 : _b.execute)) {
-                console.error('Browser: ProboLabs.highlight.execute is not available!');
-                return null;
-            }
-            const elements = await window.ProboLabs.highlight.execute(tags);
-            //proboLogger.debug('Browser: Found elements:', elements);
-            return elements;
-        }, elementTags);
-        // proboLogger.debug("highlighted elements =>");
-        // for (let i = 0; i < result.length; i++) {      
-        //     proboLogger.debug(result[i]);
-        // };
-        return result;
-    }
-    async unhighlightElements(page) {
-        proboLogger$1.debug('unhighlightElements called');
-        await this.ensureHighlighterScript(page);
-        await page.evaluate(() => {
-            var _a, _b;
-            (_b = (_a = window === null || window === void 0 ? void 0 : window.ProboLabs) === null || _a === void 0 ? void 0 : _a.highlight) === null || _b === void 0 ? void 0 : _b.unexecute();
-        });
-    }
-    async highlightElement(page, element_css_selector, iframe_selector, element_index) {
-        await this.ensureHighlighterScript(page);
-        proboLogger$1.debug('Highlighting element with:', { element_css_selector, iframe_selector, element_index });
-        await page.evaluate(({ css_selector, iframe_selector, index }) => {
-            const proboLabs = window.ProboLabs;
-            if (!proboLabs) {
-                proboLogger$1.warn('ProboLabs not initialized');
-                return;
-            }
-            // Create ElementInfo object for the element
-            const elementInfo = {
-                css_selector: css_selector,
-                iframe_selector: iframe_selector,
-                index: index
-            };
-            // Call highlightElements directly
-            proboLabs.highlightElements([elementInfo]);
-        }, {
-            css_selector: element_css_selector,
-            iframe_selector: iframe_selector,
-            index: element_index
-        });
-    }
-}
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
 var retry$2 = {};
@@ -1039,336 +466,1120 @@ function requireRetry$1 () {
 		      var args     = Array.prototype.slice.call(arguments, 1);
 		      var callback = args.pop();
 
-		      args.push(function(err) {
-		        if (op.retry(err)) {
-		          return;
-		        }
-		        if (err) {
-		          arguments[0] = op.mainError();
-		        }
-		        callback.apply(this, arguments);
-		      });
+		      args.push(function(err) {
+		        if (op.retry(err)) {
+		          return;
+		        }
+		        if (err) {
+		          arguments[0] = op.mainError();
+		        }
+		        callback.apply(this, arguments);
+		      });
+
+		      op.attempt(function() {
+		        original.apply(obj, args);
+		      });
+		    }.bind(obj, original);
+		    obj[method].options = options;
+		  }
+		}; 
+	} (retry$2));
+	return retry$2;
+}
+
+var retry$1;
+var hasRequiredRetry;
+
+function requireRetry () {
+	if (hasRequiredRetry) return retry$1;
+	hasRequiredRetry = 1;
+	retry$1 = requireRetry$1();
+	return retry$1;
+}
+
+var retryExports = requireRetry();
+var retry = /*@__PURE__*/getDefaultExportFromCjs(retryExports);
+
+const objectToString = Object.prototype.toString;
+
+const isError = value => objectToString.call(value) === '[object Error]';
+
+const errorMessages = new Set([
+	'network error', // Chrome
+	'Failed to fetch', // Chrome
+	'NetworkError when attempting to fetch resource.', // Firefox
+	'The Internet connection appears to be offline.', // Safari 16
+	'Load failed', // Safari 17+
+	'Network request failed', // `cross-fetch`
+	'fetch failed', // Undici (Node.js)
+	'terminated', // Undici (Node.js)
+]);
+
+function isNetworkError(error) {
+	const isValid = error
+		&& isError(error)
+		&& error.name === 'TypeError'
+		&& typeof error.message === 'string';
+
+	if (!isValid) {
+		return false;
+	}
+
+	// We do an extra check for Safari 17+ as it has a very generic error message.
+	// Network errors in Safari have no stack.
+	if (error.message === 'Load failed') {
+		return error.stack === undefined;
+	}
+
+	return errorMessages.has(error.message);
+}
+
+class AbortError extends Error {
+	constructor(message) {
+		super();
+
+		if (message instanceof Error) {
+			this.originalError = message;
+			({message} = message);
+		} else {
+			this.originalError = new Error(message);
+			this.originalError.stack = this.stack;
+		}
+
+		this.name = 'AbortError';
+		this.message = message;
+	}
+}
+
+const decorateErrorWithCounts = (error, attemptNumber, options) => {
+	// Minus 1 from attemptNumber because the first attempt does not count as a retry
+	const retriesLeft = options.retries - (attemptNumber - 1);
+
+	error.attemptNumber = attemptNumber;
+	error.retriesLeft = retriesLeft;
+	return error;
+};
+
+async function pRetry(input, options) {
+	return new Promise((resolve, reject) => {
+		options = {...options};
+		options.onFailedAttempt ??= () => {};
+		options.shouldRetry ??= () => true;
+		options.retries ??= 10;
+
+		const operation = retry.operation(options);
+
+		const abortHandler = () => {
+			operation.stop();
+			reject(options.signal?.reason);
+		};
+
+		if (options.signal && !options.signal.aborted) {
+			options.signal.addEventListener('abort', abortHandler, {once: true});
+		}
+
+		const cleanUp = () => {
+			options.signal?.removeEventListener('abort', abortHandler);
+			operation.stop();
+		};
+
+		operation.attempt(async attemptNumber => {
+			try {
+				const result = await input(attemptNumber);
+				cleanUp();
+				resolve(result);
+			} catch (error) {
+				try {
+					if (!(error instanceof Error)) {
+						throw new TypeError(`Non-error was thrown: "${error}". You should only throw errors.`);
+					}
+
+					if (error instanceof AbortError) {
+						throw error.originalError;
+					}
+
+					if (error instanceof TypeError && !isNetworkError(error)) {
+						throw error;
+					}
+
+					decorateErrorWithCounts(error, attemptNumber, options);
+
+					if (!(await options.shouldRetry(error))) {
+						operation.stop();
+						reject(error);
+					}
+
+					await options.onFailedAttempt(error);
+
+					if (!operation.retry(error)) {
+						throw operation.mainError();
+					}
+				} catch (finalError) {
+					decorateErrorWithCounts(finalError, attemptNumber, options);
+					cleanUp();
+					reject(finalError);
+				}
+			}
+		});
+	});
+}
+
+const apiLogger = new ProboLogger('apiclient');
+class ApiError extends Error {
+    constructor(status, message, data) {
+        super(message);
+        this.status = status;
+        this.data = data;
+        this.name = 'ApiError';
+        // Remove stack trace for cleaner error messages
+        this.stack = undefined;
+    }
+    toString() {
+        return `${this.message} (Status: ${this.status})`;
+    }
+}
+class ApiClient {
+    constructor(apiUrl, token, maxRetries = 3, initialBackoff = 1000) {
+        this.apiUrl = apiUrl;
+        this.token = token;
+        this.maxRetries = maxRetries;
+        this.initialBackoff = initialBackoff;
+    }
+    async handleResponse(response) {
+        var _a;
+        try {
+            const data = await response.json();
+            if (!response.ok) {
+                switch (response.status) {
+                    case 401:
+                        throw new ApiError(401, 'Unauthorized - Invalid or missing authentication token');
+                    case 403:
+                        throw new ApiError(403, 'Forbidden - You do not have permission to perform this action');
+                    case 400:
+                        throw new ApiError(400, 'Bad Request', data);
+                    case 404:
+                        throw new ApiError(404, 'Not Found', data);
+                    case 500:
+                        throw new ApiError(500, 'Internal Server Error', data);
+                    default:
+                        throw new ApiError(response.status, `API Error: ${data.error || 'Unknown error'}`, data);
+                }
+            }
+            return data;
+        }
+        catch (error) {
+            // Only throw the original error if it's not a network error
+            if (!((_a = error.message) === null || _a === void 0 ? void 0 : _a.includes('fetch failed'))) {
+                throw error;
+            }
+            throw new ApiError(0, 'Network error: fetch failed');
+        }
+    }
+    getHeaders() {
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        // Always include token in headers now that we have a default
+        headers['Authorization'] = `Token ${this.token}`;
+        return headers;
+    }
+    async createStep(options) {
+        apiLogger.debug('creating step ', options.stepPrompt);
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/step-runners/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({
+                    step_id: options.stepIdFromServer,
+                    scenario_name: options.scenarioName,
+                    step_prompt: options.stepPrompt,
+                    initial_screenshot: options.initial_screenshot_url,
+                    initial_html_content: options.initial_html_content,
+                    use_cache: options.use_cache,
+                }),
+            });
+            const data = await this.handleResponse(response);
+            return data.step.id;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                apiLogger.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async patchStep(stepId, fields) {
+        // Use PATCH /steps/:id/ endpoint
+        apiLogger.debug(`patching step #${stepId}`);
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/steps/${stepId}/`, {
+                method: 'PATCH',
+                headers: this.getHeaders(),
+                body: JSON.stringify(fields)
+            });
+            const data = await this.handleResponse(response);
+            return;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                apiLogger.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async resolveNextInstruction(stepId, instruction, aiModel) {
+        apiLogger.debug(`resolving next instruction: ${instruction}`);
+        return pRetry(async () => {
+            apiLogger.debug(`API client: Resolving next instruction for step ${stepId}`);
+            const cleanInstruction = cleanupInstructionElements(instruction);
+            const response = await fetch(`${this.apiUrl}/step-runners/${stepId}/run/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({
+                    executed_instruction: cleanInstruction,
+                    ai_model: aiModel
+                }),
+            });
+            const data = await this.handleResponse(response);
+            return data.instruction;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                apiLogger.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async uploadScreenshot(screenshot_bytes) {
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/upload-screenshots/`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Token ${this.token}`
+                },
+                body: screenshot_bytes,
+            });
+            const data = await this.handleResponse(response);
+            return data.screenshot_url;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                apiLogger.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async findStepByPrompt(prompt, scenarioName) {
+        apiLogger.debug(`Finding step by prompt: ${prompt} and scenario: ${scenarioName}`);
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/step-runners/find-step-by-prompt/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({
+                    prompt: prompt,
+                    scenario_name: scenarioName
+                }),
+            });
+            try {
+                const data = await this.handleResponse(response);
+                return {
+                    step: data.step,
+                    total_count: data.total_count
+                };
+            }
+            catch (error) {
+                // If we get a 404, the step doesn't exist
+                if (error instanceof ApiError && error.status === 404) {
+                    return null;
+                }
+                // For any other error, rethrow
+                throw error;
+            }
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                apiLogger.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async resetStep(stepId) {
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/steps/${stepId}/reset/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+            });
+            const data = await this.handleResponse(response);
+            return data;
+        });
+    }
+    async interactionToStep(scenarioName, interaction, position = -1) {
+        // Use POST /interaction-to-step/ endpoint
+        apiLogger.debug(`converting interaction #${interaction.interactionId} to step`);
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/interaction-to-step/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({
+                    scenario_name: scenarioName,
+                    position,
+                    interaction_id: interaction.interactionId,
+                    action: interaction.action,
+                    argument: interaction.argument,
+                    element_css_selector: interaction.elementInfo.css_selector,
+                    iframe_selector: interaction.elementInfo.iframe_selector,
+                    prompt: interaction.nativeDescription,
+                    vanilla_prompt: interaction.nativeDescription,
+                    is_vanilla_prompt_robust: interaction.isNativeDescriptionElaborate || false,
+                    target_element_name: interaction.nativeName,
+                    target_element_info: interaction.elementInfo,
+                    url: interaction.url,
+                })
+            });
+            const data = await this.handleResponse(response);
+            return [data.result.step_id, data.result.matched_step, data.scenario_id];
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                apiLogger.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async actionToPrompt(action2promptInput, aiModel) {
+        // Use POST /action-to-prompt/ endpoint
+        apiLogger.debug(`running action2prompt for step #${action2promptInput.step_id}`);
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/steps/${action2promptInput.step_id}/action_to_prompt/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({ ...action2promptInput, 'model': aiModel })
+            });
+            const data = await this.handleResponse(response);
+            return data;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                apiLogger.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async summarizeScenario(scenarioId, aiModel) {
+        const response = await fetch(`${this.apiUrl}/api/scenarios/${scenarioId}/summary`, {
+            method: 'POST',
+            headers: this.getHeaders(),
+            body: JSON.stringify({ 'model': aiModel })
+        });
+        const data = await response.json();
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to summarize scenario');
+        }
+        return data;
+    }
+} /* ApiClient */
+
+// Default logger instance
+const proboLogger = new ProboLogger('probolib');
 
-		      op.attempt(function() {
-		        original.apply(obj, args);
-		      });
-		    }.bind(obj, original);
-		    obj[method].options = options;
-		  }
-		}; 
-	} (retry$2));
-	return retry$2;
+const SPECIAL_KEYS = [
+    'Enter', 'Tab', 'Escape', 'Backspace', 'Delete',
+    'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+    'Home', 'End', 'PageUp', 'PageDown',
+    'Insert', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
+    'Shift', 'Control', 'Alt', 'Meta',
+    'CapsLock', 'NumLock', 'ScrollLock',
+    'Pause', 'PrintScreen', 'ContextMenu',
+    'AudioVolumeUp', 'AudioVolumeDown', 'AudioVolumeMute',
+    'MediaTrackNext', 'MediaTrackPrevious', 'MediaStop', 'MediaPlayPause',
+    'BrowserBack', 'BrowserForward', 'BrowserRefresh', 'BrowserFavorites'
+];
+/**
+ * Handle potential navigation exactly like Python's handle_potential_navigation
+ */
+async function handlePotentialNavigation(page, locator = null, value = null, options = {}) {
+    const { initialTimeout = 5000, navigationTimeout = 7000, globalTimeout = 15000, } = options;
+    const startTime = Date.now();
+    let navigationCount = 0;
+    let lastNavTime = null;
+    const onFrameNav = (frame) => {
+        if (frame === page.mainFrame()) {
+            navigationCount++;
+            lastNavTime = Date.now();
+            proboLogger.debug(`DEBUG_NAV[${((Date.now() - startTime) / 1000).toFixed(3)}s]: navigation detected (count=${navigationCount})`);
+        }
+    };
+    proboLogger.debug(`DEBUG_NAV[0.000s]: Starting navigation detection`);
+    page.on("framenavigated", onFrameNav);
+    try {
+        if (locator) {
+            proboLogger.debug(`DEBUG_NAV: Executing click(${value})`);
+            await clickAtPosition(page, locator, value);
+        }
+        // wait for any initial nav to fire
+        await page.waitForTimeout(initialTimeout);
+        proboLogger.debug(`DEBUG_NAV[${((Date.now() - startTime) / 1000).toFixed(3)}s]: After initial wait, count=${navigationCount}`);
+        if (navigationCount > 0) {
+            // loop until either per-nav or global timeout
+            while (true) {
+                const now = Date.now();
+                if (lastNavTime !== null &&
+                    now - lastNavTime > navigationTimeout) {
+                    proboLogger.debug(`DEBUG_NAV[${((now - startTime) / 1000).toFixed(3)}s]: per‐navigation timeout reached`);
+                    break;
+                }
+                if (now - startTime > globalTimeout) {
+                    proboLogger.debug(`DEBUG_NAV[${((now - startTime) / 1000).toFixed(3)}s]: overall timeout reached`);
+                    break;
+                }
+                await page.waitForTimeout(500);
+            }
+            // now wait for load + idle
+            proboLogger.debug(`DEBUG_NAV: waiting for load state`);
+            await page.waitForLoadState("load", { timeout: globalTimeout });
+            proboLogger.debug(`DEBUG_NAV: waiting for networkidle`);
+            try {
+                // shorter idle‐wait so we don't hang the full globalTimeout here
+                await page.waitForLoadState("networkidle", {
+                    timeout: navigationTimeout,
+                });
+            }
+            catch (_a) {
+                proboLogger.debug(`DEBUG_NAV: networkidle not reached in ${navigationTimeout}ms, proceeding anyway`);
+            }
+            await scrollToBottomRight(page);
+            proboLogger.debug(`DEBUG_NAV: done`);
+            return true;
+        }
+        proboLogger.debug(`DEBUG_NAV: no navigation detected`);
+        return false;
+    }
+    finally {
+        page.removeListener("framenavigated", onFrameNav);
+        proboLogger.debug(`DEBUG_NAV: listener removed`);
+    }
 }
-
-var retry$1;
-var hasRequiredRetry;
-
-function requireRetry () {
-	if (hasRequiredRetry) return retry$1;
-	hasRequiredRetry = 1;
-	retry$1 = requireRetry$1();
-	return retry$1;
+/**
+ * Scroll entire page to bottom-right, triggering lazy-loaded content
+ */
+async function scrollToBottomRight(page) {
+    const startTime = performance.now();
+    proboLogger.debug(`Starting scroll to bottom-right`);
+    let lastHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+    let lastWidth = await page.evaluate(() => document.documentElement.scrollWidth);
+    let smoothingSteps = 0;
+    while (true) {
+        const initY = await page.evaluate(() => window.scrollY);
+        const initX = await page.evaluate(() => window.scrollX);
+        const clientHeight = await page.evaluate(() => document.documentElement.clientHeight);
+        const maxHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+        const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
+        const maxWidth = await page.evaluate(() => document.documentElement.scrollWidth);
+        let currX = initX;
+        while (currX < maxWidth - clientWidth) {
+            let currY = initY;
+            while (currY < maxHeight - clientHeight) {
+                currY += clientHeight;
+                await page.evaluate(([x, y]) => window.scrollTo(x, y), [currX, currY]);
+                await page.waitForTimeout(50);
+                smoothingSteps++;
+            }
+            currX += clientWidth;
+        }
+        proboLogger.debug(`performed ${smoothingSteps} smoothing steps while scrolling`);
+        const newHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+        const newWidth = await page.evaluate(() => document.documentElement.scrollWidth);
+        if (newHeight === lastHeight && newWidth === lastWidth)
+            break;
+        proboLogger.debug(`page dimensions updated, repeating scroll`);
+        lastHeight = newHeight;
+        lastWidth = newWidth;
+    }
+    if (smoothingSteps > 0) {
+        await page.waitForTimeout(200);
+        await page.evaluate('window.scrollTo(0, 0)');
+        await page.waitForTimeout(50);
+    }
+    proboLogger.debug(`Scroll completed in ${(performance.now() - startTime).toFixed(3)}ms`);
 }
-
-var retryExports = requireRetry();
-var retry = /*@__PURE__*/getDefaultExportFromCjs(retryExports);
-
-const objectToString = Object.prototype.toString;
-
-const isError = value => objectToString.call(value) === '[object Error]';
-
-const errorMessages = new Set([
-	'network error', // Chrome
-	'Failed to fetch', // Chrome
-	'NetworkError when attempting to fetch resource.', // Firefox
-	'The Internet connection appears to be offline.', // Safari 16
-	'Load failed', // Safari 17+
-	'Network request failed', // `cross-fetch`
-	'fetch failed', // Undici (Node.js)
-	'terminated', // Undici (Node.js)
-]);
-
-function isNetworkError(error) {
-	const isValid = error
-		&& isError(error)
-		&& error.name === 'TypeError'
-		&& typeof error.message === 'string';
-
-	if (!isValid) {
-		return false;
-	}
-
-	// We do an extra check for Safari 17+ as it has a very generic error message.
-	// Network errors in Safari have no stack.
-	if (error.message === 'Load failed') {
-		return error.stack === undefined;
-	}
-
-	return errorMessages.has(error.message);
+/**
+ * Wait for DOM mutations to settle using MutationObserver logic
+ */
+async function waitForMutationsToSettle(page, mutationTimeout = 1500, initTimeout = 2000) {
+    const startTime = Date.now();
+    proboLogger.debug(`Starting mutation settlement (initTimeout=${initTimeout}, mutationTimeout=${mutationTimeout})`);
+    const result = await page.evaluate(async ({ mutationTimeout, initTimeout }) => {
+        async function blockUntilStable(targetNode, options = { childList: true, subtree: true }) {
+            return new Promise((resolve) => {
+                let initTimerExpired = false;
+                let mutationsOccurred = false;
+                const observerTimers = new Set();
+                window.setTimeout(() => {
+                    initTimerExpired = true;
+                    if (observerTimers.size === 0)
+                        resolve(mutationsOccurred);
+                }, initTimeout);
+                const observer = new MutationObserver(() => {
+                    mutationsOccurred = true;
+                    observerTimers.forEach((t) => clearTimeout(t));
+                    observerTimers.clear();
+                    const t = window.setTimeout(() => {
+                        observerTimers.delete(t);
+                        if (initTimerExpired && observerTimers.size === 0) {
+                            observer.disconnect();
+                            resolve(mutationsOccurred);
+                        }
+                    }, mutationTimeout);
+                    observerTimers.add(t);
+                });
+                observer.observe(targetNode, options);
+            });
+        }
+        return blockUntilStable(document.body);
+    }, { mutationTimeout, initTimeout });
+    const total = ((Date.now() - startTime) / 1000).toFixed(2);
+    proboLogger.debug(result
+        ? `Mutations settled. Took ${total}s`
+        : `No mutations observed. Took ${total}s`);
+    return result;
 }
-
-class AbortError extends Error {
-	constructor(message) {
-		super();
-
-		if (message instanceof Error) {
-			this.originalError = message;
-			({message} = message);
-		} else {
-			this.originalError = new Error(message);
-			this.originalError.stack = this.stack;
-		}
-
-		this.name = 'AbortError';
-		this.message = message;
-	}
+/**
+ * Get element text value: allTextContents + innerText fallback
+ */
+async function getElementValue(page, locator) {
+    const texts = await locator.allTextContents();
+    let allText = texts.join('').trim();
+    if (!allText) {
+        allText = await locator.evaluate((el) => el.innerText);
+    }
+    if (!allText) {
+        allText = await locator.inputValue();
+    }
+    proboLogger.debug(`getElementValue: [${allText}]`);
+    return allText;
+}
+/**
+ * Select dropdown option: native <select>, <option>, child select, or ARIA listbox
+ */
+async function selectDropdownOption(page, locator, value) {
+    const tagName = await (locator === null || locator === void 0 ? void 0 : locator.evaluate((el) => el.tagName.toLowerCase()));
+    const role = await (locator === null || locator === void 0 ? void 0 : locator.getAttribute('role'));
+    if (tagName === 'option' || role === 'option') {
+        proboLogger.debug('selectDropdownOption: option role detected');
+        await (locator === null || locator === void 0 ? void 0 : locator.click());
+    }
+    else if (tagName === 'select') {
+        proboLogger.debug('selectDropdownOption: simple select tag detected');
+        try {
+            await (locator === null || locator === void 0 ? void 0 : locator.selectOption(value));
+        }
+        catch (_a) {
+            proboLogger.debug('selectDropdownOption: manual change event fallback');
+            const handle = locator ? await locator.elementHandle() : null;
+            await page.evaluate(({ h, val }) => {
+                const el = h;
+                if (el) {
+                    el.value = Array.isArray(val) ? val[0] : val;
+                    el.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+            }, { h: handle, val: value });
+        }
+    }
+    else {
+        proboLogger.debug('selectDropdownOption: custom dropdown path');
+        let listbox = locator.locator('select');
+        let count = await listbox.count();
+        if (count > 1)
+            throw new Error(`selectDropdownOption: ambiguous <select> count=${count}`);
+        if (count === 1) {
+            proboLogger.debug('selectDropdownOption: child <select> found');
+            await listbox.selectOption(value);
+            return;
+        }
+        await locator.click();
+        let container = locator;
+        count = 0;
+        if (role !== 'listbox') {
+            for (let i = 0; i < 7; i++) {
+                listbox = container.getByRole('listbox');
+                count = await listbox.count();
+                if (count >= 1)
+                    break;
+                proboLogger.debug(`selectDropdownOption: iteration #${i} no listbox found`);
+                container = container.locator('xpath=..');
+            }
+        }
+        else {
+            listbox = container;
+            count = await listbox.count();
+        }
+        if (count !== 1)
+            throw new Error(`selectDropdownOption: found ${count} listbox locators`);
+        const vals = Array.isArray(value) ? value : [value];
+        for (const val of vals) {
+            const option = listbox.getByRole('option').getByText(new RegExp(`^${val}$`, 'i'));
+            const optCount = await option.count();
+            if (optCount !== 1)
+                throw new Error(`selectDropdownOption: ${optCount} options for '${val}'`);
+            await option.click();
+        }
+    }
+}
+/**
+ * Execute a given Playwright action, mirroring Python's _perform_action
+ */
+async function executePlaywrightAction(page, action, value, iframe_selector, element_css_selector) {
+    proboLogger.info(`performing Action: ${action} Value: ${value}`);
+    try {
+        if (action === PlaywrightAction.VISIT_BASE_URL || action === PlaywrightAction.VISIT_URL) {
+            await page.goto(value, { waitUntil: 'load' });
+            await handlePotentialNavigation(page, null);
+        }
+        else {
+            let locator = undefined;
+            if (iframe_selector)
+                locator = page.frameLocator(iframe_selector).locator(element_css_selector);
+            else
+                locator = page.locator(element_css_selector);
+            switch (action) {
+                case PlaywrightAction.CLICK:
+                    await handlePotentialNavigation(page, locator, value);
+                    break;
+                case PlaywrightAction.FILL_IN:
+                    // await locator.click();
+                    await locator.fill(value);
+                    break;
+                case PlaywrightAction.TYPE_KEYS:
+                    // Check if the value contains any special keys
+                    const specialKey = SPECIAL_KEYS.find(key => value.includes(key));
+                    if (specialKey) {
+                        // If it's a single special key, just press it
+                        if (value === specialKey) {
+                            await (locator === null || locator === void 0 ? void 0 : locator.press(specialKey));
+                        }
+                        else {
+                            // Handle combinations like 'Control+A' or 'Shift+ArrowRight'
+                            const parts = value.split('+');
+                            if (parts.length === 2 && SPECIAL_KEYS.includes(parts[0]) && SPECIAL_KEYS.includes(parts[1])) {
+                                await (locator === null || locator === void 0 ? void 0 : locator.press(value));
+                            }
+                            else {
+                                // If it's a mix of special keys and text, use pressSequentially
+                                await (locator === null || locator === void 0 ? void 0 : locator.pressSequentially(value));
+                            }
+                        }
+                    }
+                    else {
+                        // No special keys, just type normally
+                        await (locator === null || locator === void 0 ? void 0 : locator.pressSequentially(value));
+                    }
+                    break;
+                case PlaywrightAction.SELECT_DROPDOWN:
+                    await selectDropdownOption(page, locator, value);
+                    break;
+                case PlaywrightAction.SELECT_MULTIPLE_DROPDOWN:
+                    let optsArr;
+                    if (value.startsWith('[')) {
+                        try {
+                            optsArr = JSON.parse(value);
+                        }
+                        catch (_a) {
+                            optsArr = value.slice(1, -1).split(',').map(o => o.trim());
+                        }
+                    }
+                    else {
+                        optsArr = value.split(',').map(o => o.trim());
+                    }
+                    await (locator === null || locator === void 0 ? void 0 : locator.selectOption(optsArr));
+                    break;
+                case PlaywrightAction.CHECK_CHECKBOX:
+                    await (locator === null || locator === void 0 ? void 0 : locator.setChecked(value.toLowerCase() === 'true'));
+                    break;
+                case PlaywrightAction.SELECT_RADIO:
+                case PlaywrightAction.TOGGLE_SWITCH:
+                    await (locator === null || locator === void 0 ? void 0 : locator.click());
+                    break;
+                case PlaywrightAction.HOVER:
+                    if (await locator.isVisible()) {
+                        await (locator === null || locator === void 0 ? void 0 : locator.hover({ noWaitAfter: false }));
+                        await page.waitForTimeout(100); // short delay for hover to take effect
+                    }
+                    break;
+                case PlaywrightAction.VALIDATE_EXACT_VALUE:
+                    const actualExact = await getElementValue(page, locator);
+                    proboLogger.debug(`actual value is [${actualExact}]`);
+                    if (actualExact !== value) {
+                        proboLogger.info(`Validation *FAIL* expected '${value}' but got '${actualExact}'`);
+                        return false;
+                    }
+                    proboLogger.info('Validation *PASS*');
+                    break;
+                case PlaywrightAction.VALIDATE_CONTAINS_VALUE:
+                case PlaywrightAction.VALIDATE:
+                    const actualContains = await getElementValue(page, locator);
+                    proboLogger.debug(`actual value is [${actualContains}]`);
+                    if (!actualContains.includes(value)) {
+                        proboLogger.info(`Validation *FAIL* expected '${value}' to be contained in '${actualContains}'`);
+                        return false;
+                    }
+                    proboLogger.info('Validation *PASS*');
+                    break;
+                case PlaywrightAction.VALIDATE_URL:
+                    const currUrl = page.url();
+                    if (currUrl !== value) {
+                        proboLogger.info(`Validation *FAIL* expected url '${value}' while is '${currUrl}'`);
+                        return false;
+                    }
+                    proboLogger.info('Validation *PASS*');
+                    break;
+                case PlaywrightAction.SCROLL_TO_ELEMENT:
+                    //  Restore exact scroll positions from recording
+                    const scrollData = JSON.parse(value);
+                    try {
+                        proboLogger.debug('🔄 Restoring scroll position for container:', locator, 'scrollTop:', scrollData.scrollTop, 'scrollLeft:', scrollData.scrollLeft);
+                        await locator.evaluate((el, scrollData) => {
+                            el.scrollTop = scrollData.scrollTop;
+                            el.scrollLeft = scrollData.scrollLeft;
+                        }, { scrollTop: scrollData.scrollTop, scrollLeft: scrollData.scrollLeft }, { timeout: 2000 });
+                    }
+                    catch (e) {
+                        proboLogger.error('🔄 Failed to restore scroll position for container:', locator, 'scrollTop:', scrollData.scrollTop, 'scrollLeft:', scrollData.scrollLeft, 'error:', e);
+                    }
+                    await page.waitForTimeout(500);
+                    break;
+                default:
+                    throw new Error(`Unknown action: ${action}`);
+            }
+        }
+        return true;
+    }
+    catch (e) {
+        proboLogger.debug(`***ERROR failed to execute action ${action}: ${e}`);
+        throw e;
+    }
 }
-
-const decorateErrorWithCounts = (error, attemptNumber, options) => {
-	// Minus 1 from attemptNumber because the first attempt does not count as a retry
-	const retriesLeft = options.retries - (attemptNumber - 1);
-
-	error.attemptNumber = attemptNumber;
-	error.retriesLeft = retriesLeft;
-	return error;
-};
-
-async function pRetry(input, options) {
-	return new Promise((resolve, reject) => {
-		options = {...options};
-		options.onFailedAttempt ??= () => {};
-		options.shouldRetry ??= () => true;
-		options.retries ??= 10;
-
-		const operation = retry.operation(options);
-
-		const abortHandler = () => {
-			operation.stop();
-			reject(options.signal?.reason);
-		};
-
-		if (options.signal && !options.signal.aborted) {
-			options.signal.addEventListener('abort', abortHandler, {once: true});
-		}
-
-		const cleanUp = () => {
-			options.signal?.removeEventListener('abort', abortHandler);
-			operation.stop();
-		};
-
-		operation.attempt(async attemptNumber => {
-			try {
-				const result = await input(attemptNumber);
-				cleanUp();
-				resolve(result);
-			} catch (error) {
-				try {
-					if (!(error instanceof Error)) {
-						throw new TypeError(`Non-error was thrown: "${error}". You should only throw errors.`);
-					}
-
-					if (error instanceof AbortError) {
-						throw error.originalError;
-					}
-
-					if (error instanceof TypeError && !isNetworkError(error)) {
-						throw error;
-					}
-
-					decorateErrorWithCounts(error, attemptNumber, options);
-
-					if (!(await options.shouldRetry(error))) {
-						operation.stop();
-						reject(error);
-					}
-
-					await options.onFailedAttempt(error);
-
-					if (!operation.retry(error)) {
-						throw operation.mainError();
-					}
-				} catch (finalError) {
-					decorateErrorWithCounts(finalError, attemptNumber, options);
-					cleanUp();
-					reject(finalError);
-				}
-			}
-		});
-	});
+/**
+ * Execute a given Playwright action using native Playwright functions where possible
+ */
+async function executeCachedPlaywrightAction(page, action, value, iframe_selector, element_css_selector) {
+    proboLogger.log(`performing Cached Action: ${action} Value: ${value} on iframe: ${iframe_selector} locator: ${element_css_selector}`);
+    try {
+        let locator = undefined;
+        if (iframe_selector)
+            locator = page.frameLocator(iframe_selector).locator(element_css_selector);
+        else
+            locator = page.locator(element_css_selector);
+        switch (action) {
+            case PlaywrightAction.VISIT_BASE_URL:
+            case PlaywrightAction.VISIT_URL:
+                await page.goto(value, { waitUntil: 'networkidle' });
+                break;
+            case PlaywrightAction.CLICK:
+                await clickAtPosition(page, locator, value);
+                await handlePotentialNavigation(page);
+                break;
+            case PlaywrightAction.FILL_IN:
+                // await locator.click();
+                await locator.fill(value);
+                break;
+            case PlaywrightAction.TYPE_KEYS:
+                // Check if the value contains any special keys
+                const specialKey = SPECIAL_KEYS.find(key => value.includes(key));
+                if (specialKey) {
+                    // If it's a single special key, just press it
+                    if (value === specialKey) {
+                        await locator.press(specialKey);
+                    }
+                    else {
+                        // Handle combinations like 'Control+A' or 'Shift+ArrowRight'
+                        const parts = value.split('+');
+                        if (parts.length === 2 && SPECIAL_KEYS.includes(parts[0]) && SPECIAL_KEYS.includes(parts[1])) {
+                            await locator.press(value);
+                        }
+                        else {
+                            // If it's a mix of special keys and text, use pressSequentially
+                            await locator.pressSequentially(value);
+                        }
+                    }
+                }
+                else {
+                    // No special keys, just type normally
+                    await locator.pressSequentially(value);
+                }
+                break;
+            case PlaywrightAction.SELECT_DROPDOWN:
+                await locator.selectOption(value);
+                break;
+            case PlaywrightAction.SELECT_MULTIPLE_DROPDOWN:
+                let optsArr;
+                if (value.startsWith('[')) {
+                    try {
+                        optsArr = JSON.parse(value);
+                    }
+                    catch (_a) {
+                        optsArr = value.slice(1, -1).split(',').map(o => o.trim());
+                    }
+                }
+                else {
+                    optsArr = value.split(',').map(o => o.trim());
+                }
+                await locator.selectOption(optsArr);
+                break;
+            case PlaywrightAction.CHECK_CHECKBOX:
+                await locator.setChecked(value.toLowerCase() === 'true');
+                break;
+            case PlaywrightAction.SELECT_RADIO:
+            case PlaywrightAction.TOGGLE_SWITCH:
+                await locator.click();
+                break;
+            case PlaywrightAction.HOVER:
+                if (await locator.isVisible()) {
+                    await (locator === null || locator === void 0 ? void 0 : locator.hover({ noWaitAfter: false }));
+                    await page.waitForTimeout(100); // short delay for hover to take effect
+                }
+                break;
+            case PlaywrightAction.VALIDATE_EXACT_VALUE:
+                const actualExact = await getElementValue(page, locator);
+                proboLogger.debug(`actual value is [${actualExact}]`);
+                if (actualExact !== value) {
+                    proboLogger.info(`Validation *FAIL* expected '${value}' but got '${actualExact}'`);
+                    return false;
+                }
+                proboLogger.info('Validation *PASS*');
+                break;
+            case PlaywrightAction.VALIDATE_CONTAINS_VALUE:
+            case PlaywrightAction.VALIDATE:
+                const actualContains = await getElementValue(page, locator);
+                proboLogger.debug(`actual value is [${actualContains}]`);
+                if (!actualContains.includes(value)) {
+                    proboLogger.info(`Validation *FAIL* expected '${value}' to be contained in '${actualContains}'`);
+                    return false;
+                }
+                proboLogger.info('Validation *PASS*');
+                break;
+            case PlaywrightAction.VALIDATE_URL:
+                const currUrl = page.url();
+                if (currUrl !== value) {
+                    proboLogger.info(`Validation *FAIL* expected url '${value}' while is '${currUrl}'`);
+                    return false;
+                }
+                proboLogger.info('Validation *PASS*');
+                break;
+            default:
+                throw new Error(`Unknown action: ${action}`);
+        }
+        return true;
+    }
+    catch (e) {
+        proboLogger.debug(`***ERROR failed to execute cached action ${action}: ${e}`);
+        throw e;
+    }
 }
-
-class ApiError extends Error {
-    constructor(status, message, data) {
-        super(message);
-        this.status = status;
-        this.data = data;
-        this.name = 'ApiError';
-        // Remove stack trace for cleaner error messages
-        this.stack = undefined;
+var ClickPosition;
+(function (ClickPosition) {
+    ClickPosition["LEFT"] = "LEFT";
+    ClickPosition["RIGHT"] = "RIGHT";
+    ClickPosition["CENTER"] = "CENTER";
+})(ClickPosition || (ClickPosition = {}));
+/**
+ * Click on an element at a specific position
+ */
+async function clickAtPosition(page, locator, clickPosition) {
+    if (!clickPosition || clickPosition === ClickPosition.CENTER) {
+        await locator.click({ noWaitAfter: false });
+        return;
     }
-    toString() {
-        return `${this.message} (Status: ${this.status})`;
+    const boundingBox = await locator.boundingBox();
+    if (boundingBox) {
+        if (clickPosition === ClickPosition.LEFT) {
+            // await page.mouse.click(boundingBox.x + 10, boundingBox.y + boundingBox.height/2);
+            // mouse click returns immediately, use locator click instead (position relative to top left corner)
+            await locator.click({ noWaitAfter: false, position: { x: 10, y: boundingBox.height / 2 } });
+        }
+        else if (clickPosition === ClickPosition.RIGHT) {
+            // await page.mouse.click(boundingBox.x + boundingBox.width - 10, boundingBox.y + boundingBox.height/2);
+            // mouse click returns immediately, use locator click instead (position relative to top left corner)
+            await locator.click({ noWaitAfter: false, position: { x: boundingBox.width - 10, y: boundingBox.height / 2 } });
+        }
     }
 }
-class ApiClient {
-    constructor(apiUrl, token, maxRetries = 3, initialBackoff = 1000) {
-        this.apiUrl = apiUrl;
-        this.token = token;
-        this.maxRetries = maxRetries;
-        this.initialBackoff = initialBackoff;
+
+class Highlighter {
+    constructor(enableConsoleLogs = true) {
+        this.enableConsoleLogs = enableConsoleLogs;
     }
-    async handleResponse(response) {
-        var _a;
-        try {
-            const data = await response.json();
-            if (!response.ok) {
-                switch (response.status) {
-                    case 401:
-                        throw new ApiError(401, 'Unauthorized - Invalid or missing authentication token');
-                    case 403:
-                        throw new ApiError(403, 'Forbidden - You do not have permission to perform this action');
-                    case 400:
-                        throw new ApiError(400, 'Bad Request', data);
-                    case 404:
-                        throw new ApiError(404, 'Not Found', data);
-                    case 500:
-                        throw new ApiError(500, 'Internal Server Error', data);
-                    default:
-                        throw new ApiError(response.status, `API Error: ${data.error || 'Unknown error'}`, data);
+    async ensureHighlighterScript(page, maxRetries = 3) {
+        for (let attempt = 0; attempt < maxRetries; attempt++) {
+            try {
+                const scriptExists = await page.evaluate(`typeof window.ProboLabs?.highlight?.execute === 'function'`);
+                if (!scriptExists) {
+                    proboLogger.debug('Injecting highlighter script...');
+                    await page.evaluate(highlighterCode);
+                    // Verify the script was injected correctly
+                    const verified = await page.evaluate(`
+            //console.log('ProboLabs global:', window.ProboLabs);
+            typeof window.ProboLabs?.highlight?.execute === 'function'
+          `);
+                    proboLogger.debug('Script injection verified:', verified);
                 }
+                return; // Success - exit the function
             }
-            return data;
-        }
-        catch (error) {
-            // Only throw the original error if it's not a network error
-            if (!((_a = error.message) === null || _a === void 0 ? void 0 : _a.includes('fetch failed'))) {
-                throw error;
+            catch (error) {
+                if (attempt === maxRetries - 1) {
+                    throw error;
+                }
+                proboLogger.debug(`Script injection attempt ${attempt + 1} failed, retrying after delay...`);
+                await new Promise(resolve => setTimeout(resolve, 100));
             }
-            throw new ApiError(0, 'Network error: fetch failed');
         }
     }
-    getHeaders() {
-        const headers = {
-            'Content-Type': 'application/json',
-        };
-        // Always include token in headers now that we have a default
-        headers['Authorization'] = `Token ${this.token}`;
-        return headers;
-    }
-    async createStep(options) {
-        proboLogger$1.debug('creating step ', options.stepPrompt);
-        return pRetry(async () => {
-            const response = await fetch(`${this.apiUrl}/step-runners/`, {
-                method: 'POST',
-                headers: this.getHeaders(),
-                body: JSON.stringify({
-                    step_id: options.stepIdFromServer,
-                    scenario_name: options.scenarioName,
-                    step_prompt: options.stepPrompt,
-                    initial_screenshot: options.initial_screenshot_url,
-                    initial_html_content: options.initial_html_content,
-                    use_cache: options.use_cache,
-                }),
-            });
-            const data = await this.handleResponse(response);
-            return data.step.id;
-        }, {
-            retries: this.maxRetries,
-            minTimeout: this.initialBackoff,
-            onFailedAttempt: error => {
-                proboLogger$1.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+    async highlightElements(page, elementTags) {
+        proboLogger.debug('highlightElements called with:', elementTags);
+        await this.ensureHighlighterScript(page);
+        // Execute the highlight function and await its result
+        const result = await page.evaluate(async (tags) => {
+            var _a, _b;
+            //proboLogger.debug('Browser: Starting highlight execution with tag:', tag);
+            if (!((_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.highlight) === null || _b === void 0 ? void 0 : _b.execute)) {
+                console.error('Browser: ProboLabs.highlight.execute is not available!');
+                return null;
             }
+            const elements = await window.ProboLabs.highlight.execute(tags);
+            //proboLogger.debug('Browser: Found elements:', elements);
+            return elements;
+        }, elementTags);
+        // proboLogger.debug("highlighted elements =>");
+        // for (let i = 0; i < result.length; i++) {      
+        //     proboLogger.debug(result[i]);
+        // };
+        return result;
+    }
+    async unhighlightElements(page) {
+        proboLogger.debug('unhighlightElements called');
+        await this.ensureHighlighterScript(page);
+        await page.evaluate(() => {
+            var _a, _b;
+            (_b = (_a = window === null || window === void 0 ? void 0 : window.ProboLabs) === null || _a === void 0 ? void 0 : _a.highlight) === null || _b === void 0 ? void 0 : _b.unexecute();
         });
     }
-    async resolveNextInstruction(stepId, instruction, aiModel) {
-        proboLogger$1.debug(`resolving next instruction: ${instruction}`);
-        return pRetry(async () => {
-            proboLogger$1.debug(`API client: Resolving next instruction for step ${stepId}`);
-            const cleanInstruction = cleanupInstructionElements(instruction);
-            const response = await fetch(`${this.apiUrl}/step-runners/${stepId}/run/`, {
-                method: 'POST',
-                headers: this.getHeaders(),
-                body: JSON.stringify({
-                    executed_instruction: cleanInstruction,
-                    ai_model: aiModel
-                }),
-            });
-            const data = await this.handleResponse(response);
-            return data.instruction;
-        }, {
-            retries: this.maxRetries,
-            minTimeout: this.initialBackoff,
-            onFailedAttempt: error => {
-                proboLogger$1.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+    async highlightElement(page, element_css_selector, iframe_selector, element_index) {
+        await this.ensureHighlighterScript(page);
+        proboLogger.debug('Highlighting element with:', { element_css_selector, iframe_selector, element_index });
+        await page.evaluate(({ css_selector, iframe_selector, index }) => {
+            const proboLabs = window.ProboLabs;
+            if (!proboLabs) {
+                proboLogger.warn('ProboLabs not initialized');
+                return;
             }
+            // Create ElementInfo object for the element
+            const elementInfo = {
+                css_selector: css_selector,
+                iframe_selector: iframe_selector,
+                index: index
+            };
+            // Call highlightElements directly
+            proboLabs.highlightElements([elementInfo]);
+        }, {
+            css_selector: element_css_selector,
+            iframe_selector: iframe_selector,
+            index: element_index
         });
     }
-    async uploadScreenshot(screenshot_bytes) {
-        return pRetry(async () => {
-            const response = await fetch(`${this.apiUrl}/upload-screenshots/`, {
-                method: 'POST',
-                headers: {
-                    'Authorization': `Token ${this.token}`
-                },
-                body: screenshot_bytes,
-            });
-            const data = await this.handleResponse(response);
-            return data.screenshot_url;
-        }, {
-            retries: this.maxRetries,
-            minTimeout: this.initialBackoff,
-            onFailedAttempt: error => {
-                proboLogger$1.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
-            }
+    // --- New Clean Caching API ---
+    /**
+     * Find and cache candidate elements of a given type (e.g., 'CLICKABLE').
+     * Returns the number of candidates found.
+     */
+    async findAndCacheCandidateElements(page, elementTypes) {
+        await this.ensureHighlighterScript(page);
+        const result = await page.evaluate(async (types) => {
+            var _a, _b;
+            return await ((_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.findAndCacheCandidateElements) === null || _b === void 0 ? void 0 : _b.call(_a, types));
+        }, elementTypes);
+        return result !== null && result !== void 0 ? result : 0;
+    }
+    /**
+     * Find and cache the actual interaction element by CSS and iframe selector.
+     * Returns true if found, false otherwise.
+     */
+    async findAndCacheActualElement(page, cssSelector, iframeSelector, isHover = false) {
+        await this.ensureHighlighterScript(page);
+        const result = await page.evaluate((params) => {
+            var _a, _b;
+            return (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.findAndCacheActualElement) === null || _b === void 0 ? void 0 : _b.call(_a, params.css, params.iframe, params.isHover);
+        }, { css: cssSelector, iframe: iframeSelector, isHover: isHover });
+        return result !== null && result !== void 0 ? result : false;
+    }
+    /**
+     * Find and cache the best matching candidate for the actual element.
+     * Returns true if a match was found, false otherwise.
+     */
+    async findAndCacheMatchingCandidate(page) {
+        await this.ensureHighlighterScript(page);
+        const result = await page.evaluate(() => {
+            var _a, _b;
+            return (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.findAndCacheMatchingCandidate) === null || _b === void 0 ? void 0 : _b.call(_a);
         });
+        return result !== null && result !== void 0 ? result : false;
     }
-    async findStepByPrompt(prompt, scenarioName) {
-        proboLogger$1.debug(`Finding step by prompt: ${prompt} and scenario: ${scenarioName}`);
-        return pRetry(async () => {
-            const response = await fetch(`${this.apiUrl}/step-runners/find-step-by-prompt/`, {
-                method: 'POST',
-                headers: this.getHeaders(),
-                body: JSON.stringify({
-                    prompt: prompt,
-                    scenario_name: scenarioName
-                }),
-            });
-            try {
-                const data = await this.handleResponse(response);
-                return {
-                    step: data.step,
-                    total_count: data.total_count
-                };
-            }
-            catch (error) {
-                // If we get a 404, the step doesn't exist
-                if (error instanceof ApiError && error.status === 404) {
-                    return null;
-                }
-                // For any other error, rethrow
-                throw error;
-            }
-        }, {
-            retries: this.maxRetries,
-            minTimeout: this.initialBackoff,
-            onFailedAttempt: error => {
-                proboLogger$1.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
-            }
+    /**
+     * Highlight the cached candidates, actual, or matching candidate.
+     * @param which 'candidates' | 'actual' | 'matching'
+     */
+    async highlightCachedElements(page, which) {
+        await this.ensureHighlighterScript(page);
+        await page.evaluate((w) => {
+            var _a, _b;
+            (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.highlightCachedElements) === null || _b === void 0 ? void 0 : _b.call(_a, w);
+        }, which);
+    }
+    /**
+     * Remove all highlights.
+     */
+    async unhighlightCached(page) {
+        await this.ensureHighlighterScript(page);
+        await page.evaluate(() => {
+            var _a, _b;
+            (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.unhighlight) === null || _b === void 0 ? void 0 : _b.call(_a);
         });
     }
-    async resetStep(stepId) {
-        return pRetry(async () => {
-            const response = await fetch(`${this.apiUrl}/steps/${stepId}/reset/`, {
-                method: 'POST',
-                headers: this.getHeaders(),
-            });
-            const data = await this.handleResponse(response);
-            return data;
+    /**
+     * Reset/clear all cached state.
+     */
+    async resetCached(page) {
+        await this.ensureHighlighterScript(page);
+        await page.evaluate(() => {
+            var _a, _b;
+            (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.reset) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    /**
+     * Get serializable info for Node/Playwright (candidates, actual, matchingCandidate)
+     */
+    async getCandidatesCached(page) {
+        await this.ensureHighlighterScript(page);
+        return await page.evaluate(() => {
+            var _a, _b;
+            return (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.getCandidates) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    async getActualCached(page) {
+        await this.ensureHighlighterScript(page);
+        return await page.evaluate(() => {
+            var _a, _b;
+            return (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.getActual) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    async getMatchingCandidateCached(page) {
+        await this.ensureHighlighterScript(page);
+        return await page.evaluate(() => {
+            var _a, _b;
+            return (_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.getMatchingCandidate) === null || _b === void 0 ? void 0 : _b.call(_a);
         });
     }
 }
 
-const proboLogger = new ProboLogger('probo-playwright');
+// const proboLogger = new ProboLogger('probo-playwright');
 /**
  * Available AI models for LLM operations
  */
@@ -1397,7 +1608,8 @@ const retryOptions = {
 class Probo {
     constructor({ scenarioName, token = '', apiUrl = '', enableConsoleLogs = false, logToConsole = true, logToFile = false, debugLevel = ProboLogLevel.INFO, aiModel = AIModel.DEFAULT_AI_MODEL }) {
         // Configure logger transports and level
-        configureLogger({ logToConsole, logToFile, level: debugLevel });
+        // configureLogger({ logToConsole, logToFile, level: debugLevel });
+        proboLogger.setLogLevel(debugLevel);
         const apiKey = token || process.env.PROBO_API_KEY;
         if (!apiKey) {
             proboLogger.error("API key wasn't provided. Pass 'token' or set PROBO_API_KEY");
@@ -1416,7 +1628,7 @@ class Probo {
         proboLogger.info(`Initializing: scenario=${scenarioName}, apiUrl=${apiEndPoint}, ` +
             `enableConsoleLogs=${enableConsoleLogs}, debugLevel=${debugLevel}, aiModel=${aiModel}`);
     }
-    async runStep(page, stepPrompt, options = { useCache: true, stepIdFromServer: undefined, aiModel: this.aiModel }) {
+    async runStep(page, stepPrompt, argument = null, options = { useCache: true, stepIdFromServer: undefined, aiModel: this.aiModel }) {
         // Use the aiModel from options if provided, otherwise use the one from constructor
         const aiModelToUse = options.aiModel !== undefined ? options.aiModel : this.aiModel;
         proboLogger.log(`runStep: ${options.stepIdFromServer ? '#' + options.stepIdFromServer + ' - ' : ''}${stepPrompt}, aiModel: ${aiModelToUse}, pageUrl: ${page.url()}`);
@@ -1424,7 +1636,7 @@ class Probo {
         // First check if the step exists in the database
         let stepId;
         if (options.useCache) {
-            const isCachedStep = await this._handleCachedStep(page, stepPrompt);
+            const isCachedStep = await this._handleCachedStep(page, stepPrompt, argument);
             if (isCachedStep) {
                 proboLogger.debug('performed cached step!');
                 return true;
@@ -1477,7 +1689,7 @@ class Probo {
                         instruction = executed_instruction;
                         break;
                     case 'perform_action':
-                        instruction = await this._handlePerformAction(page, nextInstruction);
+                        instruction = await this._handlePerformAction(page, nextInstruction, argument);
                         break;
                     default:
                         throw new Error(`Unknown instruction type: ${nextInstruction.what_to_do}`);
@@ -1489,12 +1701,13 @@ class Probo {
             }
         }
     }
-    async _handleCachedStep(page, stepPrompt) {
+    async _handleCachedStep(page, stepPrompt, argument) {
         proboLogger.debug(`Checking if step exists in database: ${stepPrompt}`);
         const result = await this.apiClient.findStepByPrompt(stepPrompt, this.scenarioName);
         if (result) {
-            proboLogger.log(`Found existing step with ID: ${result.step.id} going to perform action: ${result.step.action} with value: ${result.step.action_value}`);
-            proboLogger.debug(`Step in the DB: #${result.step.id} status: ${result.step.status} action: ${result.step.action} action_value: ${result.step.action_value} locator: ${result.step.element_css_selector}`);
+            const actionArgument = argument !== null && argument !== void 0 ? argument : result.step.argument;
+            proboLogger.log(`Found existing step with ID: ${result.step.id} going to perform action: ${result.step.action} with value: ${actionArgument}`);
+            proboLogger.debug(`Step in the DB: #${result.step.id} status: ${result.step.status} action: ${result.step.action} argument: ${actionArgument} locator: ${result.step.element_css_selector}`);
             if (result.step.status !== 'EXECUTED') {
                 proboLogger.debug(`Step ${result.step.id} is not executed, returning false`);
                 return false;
@@ -1503,7 +1716,7 @@ class Probo {
             const element_css_selector = result.step.element_css_selector;
             const iframe_selector = result.step.iframe_selector;
             try {
-                await executeCachedPlaywrightAction(page, result.step.action, result.step.action_value, iframe_selector, element_css_selector);
+                await executeCachedPlaywrightAction(page, result.step.action, actionArgument, iframe_selector, element_css_selector);
             }
             catch (error) {
                 proboLogger.error(`Error executing action for step ${result.step.id} going to reset the step`);
@@ -1571,15 +1784,15 @@ class Probo {
         proboLogger.debug(`taking screenshot of current page: ${page.url()}`);
         // await page.evaluate(() => document.fonts?.ready.catch(() => {}));
         const screenshot_bytes = await page.screenshot({ fullPage: true, animations: 'disabled' });
-        // make an api call to upload the screenshot to cloudinary
-        proboLogger.debug('uploading image data to cloudinary');
+        // make an api call to upload the screenshot to cloud
+        proboLogger.debug('uploading image data to cloud');
         const screenshot_url = await this.apiClient.uploadScreenshot(screenshot_bytes);
         return screenshot_url;
     }
-    async _handlePerformAction(page, nextInstruction) {
+    async _handlePerformAction(page, nextInstruction, argument) {
         proboLogger.debug('Handling perform action:', nextInstruction);
         const action = nextInstruction.args.action;
-        const value = nextInstruction.args.value;
+        const value = argument !== null && argument !== void 0 ? argument : nextInstruction.args.value;
         const element_css_selector = nextInstruction.args.element_css_selector;
         const iframe_selector = nextInstruction.args.iframe_selector;
         const element_index = nextInstruction.args.element_index;
@@ -1628,6 +1841,7 @@ class Probo {
         return executed_instruction;
     }
 }
+// export const highlighterCode = '';
 
-export { AIModel, ElementInfo, ElementTag, Highlighter, Probo, ProboLogLevel, ProboLogger, configureLogger, executeCachedPlaywrightAction, executePlaywrightAction };
+export { AIModel, Highlighter, PlaywrightAction, Probo, ProboLogLevel, executeCachedPlaywrightAction, executePlaywrightAction };
 //# sourceMappingURL=index.js.map