@dev-blinq/cucumber_client 1.0.1457-dev → 1.0.1457-stage

package/bin/client/recorderv3/bvt_recorder.js

@@ -1,24 +1,345 @@
 // define the jsdoc type for the input
 import { closeContext, initContext, _getDataFile, resetTestData } from "automation_model";
-import { existsSync, readdirSync, readFileSync, rmSync } from "fs";
-import path from "path";
-import url from "url";
+import { existsSync, readdirSync, readFileSync, rmSync } from "node:fs";
+import { rm } from "fs/promises";
+import path from "node:path";
+import url from "node:url";
 import { getImplementedSteps, parseRouteFiles } from "./implemented_steps.js";
-import { NamesService } from "./services.js";
+import { NamesService, PublishService } from "./services.js";
 import { BVTStepRunner } from "./step_runner.js";
-import { readFile, writeFile } from "fs/promises";
-import { updateStepDefinitions, loadStepDefinitions, getCommandsForImplementedStep } from "./step_utils.js";
-import { updateFeatureFile } from "./update_feature.js";
+import { readFile, writeFile } from "node:fs/promises";
+import {
+  loadStepDefinitions,
+  getCommandsForImplementedStep,
+  updateStepDefinitions,
+  getCodePage,
+  getCucumberStep,
+  _toRecordingStep,
+  toMethodName,
+} from "./step_utils.js";
 import { parseStepTextParameters } from "../cucumber/utils.js";
 import { AstBuilder, GherkinClassicTokenMatcher, Parser } from "@cucumber/gherkin";
 import chokidar from "chokidar";
 import { unEscapeNonPrintables } from "../cucumber/utils.js";
-import { findAvailablePort } from "../utils/index.js";
-import socketLogger from "../utils/socket_logger.js";
+import { findAvailablePort, getRunsServiceBaseURL } from "../utils/index.js";
+import socketLogger, { getErrorMessage } from "../utils/socket_logger.js";
 import { tmpdir } from "os";
+import { faker } from "@faker-js/faker/locale/en_US";
+import { chromium } from "playwright-core";
+import { axiosClient } from "../utils/axiosClient.js";
+import { _generateCodeFromCommand } from "../code_gen/playwright_codeget.js";
+import { Recording } from "../recording.js";
+
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const clipboardBridgeScript = `
+  ;(() => {
+    if (window.__bvtRecorderClipboardBridgeInitialized) {
+      console.log('[ClipboardBridge] Already initialized, skipping');
+      return;
+    }
+    window.__bvtRecorderClipboardBridgeInitialized = true;
+    console.log('[ClipboardBridge] Initializing clipboard bridge');
+
+    const emitPayload = (payload, attempt = 0) => {
+      const reporter = window.__bvt_reportClipboard;
+      if (typeof reporter === "function") {
+        try {
+          console.log('[ClipboardBridge] Reporting clipboard payload:', payload);
+          reporter(payload);
+        } catch (error) {
+          console.warn("[ClipboardBridge] Failed to report payload", error);
+        }
+        return;
+      }
+      if (attempt < 5) {
+        console.log('[ClipboardBridge] Reporter not ready, retrying...', attempt);
+        setTimeout(() => emitPayload(payload, attempt + 1), 50 * (attempt + 1));
+      } else {
+        console.warn('[ClipboardBridge] Reporter never became available');
+      }
+    };
+
+    const fileToBase64 = (file) => {
+      return new Promise((resolve) => {
+        try {
+          const reader = new FileReader();
+          reader.onload = () => {
+            const { result } = reader;
+            if (typeof result === "string") {
+              const index = result.indexOf("base64,");
+              resolve(index !== -1 ? result.substring(index + 7) : result);
+              return;
+            }
+            if (result instanceof ArrayBuffer) {
+              const bytes = new Uint8Array(result);
+              let binary = "";
+              const chunk = 0x8000;
+              for (let i = 0; i < bytes.length; i += chunk) {
+                binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+              }
+              resolve(btoa(binary));
+              return;
+            }
+            resolve(null);
+          };
+          reader.onerror = () => resolve(null);
+          reader.readAsDataURL(file);
+        } catch (error) {
+          console.warn("[ClipboardBridge] Failed to serialize file", error);
+          resolve(null);
+        }
+      });
+    };
+
+    const handleClipboardEvent = async (event) => {
+      try {
+        console.log('[ClipboardBridge] Handling clipboard event:', event.type);
+        const payload = { trigger: event.type };
+        const clipboardData = event.clipboardData;
+
+        if (clipboardData) {
+          try {
+            const text = clipboardData.getData("text/plain");
+            if (text) {
+              payload.text = text;
+              console.log('[ClipboardBridge] Captured text:', text.substring(0, 50));
+            }
+          } catch (error) {
+            console.warn("[ClipboardBridge] Could not read text/plain", error);
+          }
+
+          try {
+            const html = clipboardData.getData("text/html");
+            if (html) {
+              payload.html = html;
+              console.log('[ClipboardBridge] Captured HTML:', html.substring(0, 50));
+            }
+          } catch (error) {
+            console.warn("[ClipboardBridge] Could not read text/html", error);
+          }
+
+          const files = clipboardData.files;
+          if (files && files.length > 0) {
+            console.log('[ClipboardBridge] Processing files:', files.length);
+            const serialized = [];
+            for (const file of files) {
+              const data = await fileToBase64(file);
+              if (data) {
+                serialized.push({
+                  name: file.name,
+                  type: file.type,
+                  lastModified: file.lastModified,
+                  data,
+                });
+              }
+            }
+            if (serialized.length > 0) {
+              payload.files = serialized;
+            }
+          }
+        }
+
+        if (!payload.text) {
+          try {
+            const selection = window.getSelection?.();
+            const selectionText = selection?.toString?.();
+            if (selectionText) {
+              payload.text = selectionText;
+              console.log('[ClipboardBridge] Using selection text:', selectionText.substring(0, 50));
+            }
+          } catch {
+            // Ignore selection access errors.
+          }
+        }
+
+        emitPayload(payload);
+      } catch (error) {
+        console.warn("[ClipboardBridge] Could not process event", error);
+      }
+    };
+
+    // NEW: Function to apply clipboard data to the page
+    window.__bvt_applyClipboardData = (payload) => {
+      console.log('[ClipboardBridge] Applying clipboard data:', payload);
+      
+      if (!payload) {
+        console.warn('[ClipboardBridge] No payload provided');
+        return false;
+      }
+      
+      try {
+        // Create DataTransfer object
+        let dataTransfer = null;
+        try {
+          dataTransfer = new DataTransfer();
+          console.log('[ClipboardBridge] DataTransfer created');
+        } catch (error) {
+          console.warn('[ClipboardBridge] Could not create DataTransfer', error);
+        }
+        
+        if (dataTransfer) {
+          if (payload.text) {
+            try {
+              dataTransfer.setData("text/plain", payload.text);
+              console.log('[ClipboardBridge] Set text/plain:', payload.text.substring(0, 50));
+            } catch (error) {
+              console.warn('[ClipboardBridge] Failed to set text/plain', error);
+            }
+          }
+          if (payload.html) {
+            try {
+              dataTransfer.setData("text/html", payload.html);
+              console.log('[ClipboardBridge] Set text/html:', payload.html.substring(0, 50));
+            } catch (error) {
+              console.warn('[ClipboardBridge] Failed to set text/html', error);
+            }
+          }
+        }
+        
+        // Get target element
+        let target = document.activeElement || document.body;
+        console.log('[ClipboardBridge] Target element:', {
+          tagName: target.tagName,
+          type: target.type,
+          isContentEditable: target.isContentEditable,
+          id: target.id,
+          className: target.className
+        });
+        
+        // Try synthetic paste event first
+        let pasteHandled = false;
+        if (dataTransfer && target && typeof target.dispatchEvent === "function") {
+          try {
+            const pasteEvent = new ClipboardEvent("paste", {
+              clipboardData: dataTransfer,
+              bubbles: true,
+              cancelable: true,
+            });
+            pasteHandled = target.dispatchEvent(pasteEvent);
+            console.log('[ClipboardBridge] Paste event dispatched, handled:', pasteHandled);
+          } catch (error) {
+            console.warn('[ClipboardBridge] Failed to dispatch paste event', error);
+          }
+        }
+        
+        
+        console.log('[ClipboardBridge] Paste event not handled, trying fallback methods');
+        
+        // Fallback: Try execCommand with HTML first (for contenteditable)
+        if (payload.html && target.isContentEditable) {
+          console.log('[ClipboardBridge] Trying execCommand insertHTML');
+          try {
+            const inserted = document.execCommand('insertHTML', false, payload.html);
+            if (inserted) {
+              console.log('[ClipboardBridge] Successfully inserted HTML via execCommand');
+              return true;
+            }
+          } catch (error) {
+            console.warn('[ClipboardBridge] execCommand insertHTML failed', error);
+          }
+          
+          // Try Range API for HTML
+          console.log('[ClipboardBridge] Trying Range API for HTML');
+          try {
+            const selection = window.getSelection?.();
+            if (selection && selection.rangeCount > 0) {
+              const range = selection.getRangeAt(0);
+              range.deleteContents();
+              const fragment = range.createContextualFragment(payload.html);
+              range.insertNode(fragment);
+              range.collapse(false);
+              console.log('[ClipboardBridge] Successfully inserted HTML via Range API');
+              return true;
+            }
+          } catch (error) {
+            console.warn('[ClipboardBridge] Range API HTML insertion failed', error);
+          }
+        }
+        
+        // Fallback: Try execCommand with text
+        if (payload.text) {
+          console.log('[ClipboardBridge] Trying execCommand insertText');
+          try {
+            const inserted = document.execCommand('insertText', false, payload.text);
+            if (inserted) {
+              console.log('[ClipboardBridge] Successfully inserted text via execCommand');
+              return true;
+            }
+          } catch (error) {
+            console.warn('[ClipboardBridge] execCommand insertText failed', error);
+          }
+          
+          // Try Range API for text
+          if (target.isContentEditable) {
+            console.log('[ClipboardBridge] Trying Range API for text');
+            try {
+              const selection = window.getSelection?.();
+              if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                range.deleteContents();
+                range.insertNode(document.createTextNode(payload.text));
+                range.collapse(false);
+                console.log('[ClipboardBridge] Successfully inserted text via Range API');
+                return true;
+              }
+            } catch (error) {
+              console.warn('[ClipboardBridge] Range API text insertion failed', error);
+            }
+          }
+          
+          // Last resort: Direct value assignment for input/textarea
+          if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+            console.log('[ClipboardBridge] Trying direct value assignment');
+            try {
+              const start = target.selectionStart ?? target.value.length ?? 0;
+              const end = target.selectionEnd ?? target.value.length ?? 0;
+              const value = target.value ?? "";
+              const text = payload.text;
+              target.value = value.slice(0, start) + text + value.slice(end);
+              const caret = start + text.length;
+              if (typeof target.setSelectionRange === 'function') {
+                target.setSelectionRange(caret, caret);
+              }
+              target.dispatchEvent(new Event('input', { bubbles: true }));
+              console.log('[ClipboardBridge] Successfully set value directly');
+              return true;
+            } catch (error) {
+              console.warn('[ClipboardBridge] Direct value assignment failed', error);
+            }
+          }
+        }
+        
+        console.warn('[ClipboardBridge] All paste methods failed');
+        return false;
+      } catch (error) {
+        console.error('[ClipboardBridge] Error applying clipboard data:', error);
+        return false;
+      }
+    };
+
+    // Set up event listeners for copy/cut
+    document.addEventListener(
+      "copy",
+      (event) => {
+        void handleClipboardEvent(event);
+      },
+      true
+    );
+    document.addEventListener(
+      "cut",
+      (event) => {
+        void handleClipboardEvent(event);
+      },
+      true
+    );
+    
+    console.log('[ClipboardBridge] Clipboard bridge initialized successfully');
+  })();
+`;
+
 export function getInitScript(config, options) {
   const preScript = `
   window.__bvt_Recorder_config = ${JSON.stringify(config ?? null)};
@@ -28,7 +349,7 @@ export function getInitScript(config, options) {
     path.join(__dirname, "..", "..", "assets", "bundled_scripts", "recorder.js"),
     "utf8"
   );
-  return preScript + recorderScript;
+  return preScript + recorderScript + clipboardBridgeScript;
 }
 
 async function evaluate(frame, script) {
@@ -42,7 +363,6 @@ async function evaluate(frame, script) {
 }
 
 async function findNestedFrameSelector(frame, obj) {
-  console.log("Testing new version");
   try {
     const parent = frame.parentFrame();
     if (!parent) return { children: obj };
@@ -53,8 +373,7 @@ async function findNestedFrameSelector(frame, obj) {
     }, frameElement);
     return findNestedFrameSelector(parent, { children: obj, selectors });
   } catch (e) {
-    socketLogger.error(`Error in findNestedFrameSelector: ${e}`);
-    console.error(e);
+    socketLogger.error(`Error in script evaluation: ${getErrorMessage(e)}`, undefined, "findNestedFrameSelector");
   }
 }
 const transformFillAction = (action, el) => {
@@ -156,6 +475,17 @@ const transformAction = (action, el, isVerify, isPopupCloseClick, isInHoverMode,
     }
   }
 };
+const diffPaths = (currentPath, newPath) => {
+  const currentDomain = new URL(currentPath).hostname;
+  const newDomain = new URL(newPath).hostname;
+  if (currentDomain !== newDomain) {
+    return true;
+  } else {
+    const currentRoute = new URL(currentPath).pathname;
+    const newRoute = new URL(newPath).pathname;
+    return currentRoute !== newRoute;
+  }
+};
 /**
  * @typedef {Object} BVTRecorderInput
  * @property {string} envName
@@ -185,12 +515,16 @@ export class BVTRecorder {
       projectDir: this.projectDir,
       logger: this.logger,
     });
+    this.workspaceService = new PublishService(this.TOKEN);
     this.pageSet = new Set();
     this.lastKnownUrlPath = "";
-    this.world = { attach: () => {} };
+    this.world = { attach: () => { } };
     this.shouldTakeScreenshot = true;
     this.watcher = null;
     this.networkEventsFolder = path.join(tmpdir(), "blinq_network_events");
+    this.tempProjectFolder = `${tmpdir()}/bvt_temp_project_${Math.floor(Math.random() * 1000000)}`;
+    this.tempSnapshotsFolder = path.join(this.tempProjectFolder, "data/snapshots");
+
     if (existsSync(this.networkEventsFolder)) {
       rmSync(this.networkEventsFolder, { recursive: true, force: true });
     }
@@ -208,6 +542,12 @@ export class BVTRecorder {
     cmdExecutionSuccess: "BVTRecorder.cmdExecutionSuccess",
     cmdExecutionError: "BVTRecorder.cmdExecutionError",
     interceptResults: "BVTRecorder.interceptResults",
+    onDebugURLChange: "BVTRecorder.onDebugURLChange",
+    updateCommand: "BVTRecorder.updateCommand",
+    browserStateSync: "BrowserService.stateSync",
+    browserStateError: "BrowserService.stateError",
+    clipboardPush: "BrowserService.clipboardPush",
+    clipboardError: "BrowserService.clipboardError",
   };
   bindings = {
     __bvt_recordCommand: async ({ frame, page, context }, event) => {
@@ -237,6 +577,25 @@ export class BVTRecorder {
     __bvt_getObject: (_src, obj) => {
       this.processObject(obj);
     },
+    __bvt_reportClipboard: async ({ page }, payload) => {
+      try {
+        if (!payload) {
+          return;
+        }
+        const activePage = this.browserEmitter?.getSelectedPage() ?? this.page;
+        if (activePage && activePage !== page) {
+          return;
+        }
+        const pageUrl = typeof page?.url === "function" ? page.url() : null;
+        this.sendEvent(this.events.clipboardPush, {
+          data: payload,
+          trigger: payload?.trigger ?? "copy",
+          pageUrl,
+        });
+      } catch (error) {
+        this.logger.error("Error forwarding clipboard payload from page", error);
+      }
+    },
   };
 
   getSnapshot = async (attr) => {
@@ -294,11 +653,15 @@ export class BVTRecorder {
   }
 
   async _initBrowser({ url }) {
-    this.#remoteDebuggerPort = await findAvailablePort();
-    process.env.CDP_LISTEN_PORT = this.#remoteDebuggerPort;
+    if (process.env.CDP_LISTEN_PORT === undefined) {
+      this.#remoteDebuggerPort = await findAvailablePort();
+      process.env.CDP_LISTEN_PORT = this.#remoteDebuggerPort;
+    } else {
+      this.#remoteDebuggerPort = process.env.CDP_LISTEN_PORT;
+    }
 
     // this.stepRunner.setRemoteDebugPort(this.#remoteDebuggerPort);
-    this.world = { attach: () => {} };
+    this.world = { attach: () => { } };
 
     const ai_config_file = path.join(this.projectDir, "ai_config.json");
     let ai_config = {};
@@ -318,7 +681,8 @@ export class BVTRecorder {
       ],
     };
 
-    const bvtContext = await initContext(url, false, false, this.world, 450, initScripts, this.envName);
+    const scenario = { pickle: this.scenarioDoc };
+    const bvtContext = await initContext(url, false, false, this.world, 450, initScripts, this.envName, scenario);
     this.bvtContext = bvtContext;
     this.stepRunner = new BVTStepRunner({
       projectDir: this.projectDir,
@@ -344,8 +708,7 @@ export class BVTRecorder {
       },
       bvtContext: this.bvtContext,
     });
-    const context = bvtContext.playContext;
-    this.context = context;
+    this.context = bvtContext.playContext;
     this.web = bvtContext.stable || bvtContext.web;
     this.web.tryAllStrategies = true;
     this.page = bvtContext.page;
@@ -359,9 +722,19 @@ export class BVTRecorder {
       await this.context.exposeBinding(name, handler);
     }
     this._watchTestData();
-    this.web.onRestoreSaveState = (url) => {
-      this._initBrowser({ url });
+    this.web.onRestoreSaveState = async (url) => {
+      await this._initBrowser({ url });
+      this._addPagelisteners(this.context);
+      this._addFrameNavigateListener(this.page);
     };
+
+    // create a second browser for locator generation
+    this.backgroundBrowser = await chromium.launch({
+      headless: true,
+    });
+    this.backgroundContext = await this.backgroundBrowser.newContext({});
+    await this.backgroundContext.addInitScript({ content: this.getInitScripts(this.config) });
+    await this.backgroundContext.newPage();
   }
   async onClosePopup() {
     // console.log("close popups");
@@ -403,13 +776,14 @@ export class BVTRecorder {
 
     await this.page.goto(url, {
       waitUntil: "domcontentloaded",
+      timeout: this.config.page_timeout ?? 60_000,
     });
     // add listener for frame navigation on current tab
     this._addFrameNavigateListener(this.page);
 
     // eval init script on current tab
     // await this._initPage(this.page);
-    this.#currentURL = new URL(url).pathname;
+    this.#currentURL = url;
 
     await this.page.dispatchEvent("html", "scroll");
     await delay(1000);
@@ -451,14 +825,15 @@ export class BVTRecorder {
           element: { inputID: "frame" },
         });
 
-        const newPath = new URL(frame.url()).pathname;
+        const newUrl = frame.url();
+        const newPath = new URL(newUrl).pathname;
         const newTitle = await frame.title();
-        if (newPath !== this.#currentURL) {
+        const changed = diffPaths(this.#currentURL, newUrl);
+
+        if (changed) {
           this.sendEvent(this.events.onFrameNavigate, { url: newPath, title: newTitle });
-          this.#currentURL = newPath;
+          this.#currentURL = newUrl;
         }
-        // await this._setRecordingMode(frame);
-        // await this._initPage(page);
       } catch (error) {
         this.logger.error("Error in frame navigate event");
         this.logger.error(error);
@@ -623,7 +998,6 @@ export class BVTRecorder {
       try {
         if (page.isClosed()) return;
         this.pageSet.add(page);
-
         await page.waitForLoadState("domcontentloaded");
 
         // add listener for frame navigation on new tab
@@ -688,6 +1062,52 @@ export class BVTRecorder {
       console.error("Error in saving screenshot: ", error);
     }
   }
+  async generateLocators(event) {
+    const snapshotDetails = event.snapshotDetails;
+    if (!snapshotDetails) {
+      throw new Error("No snapshot details found");
+    }
+    const mode = event.mode;
+    const inputID = event.element.inputID;
+
+    const { id, contextId, doc } = snapshotDetails;
+    // const selector = `[data-blinq-id="${id}"]`;
+    const newPage = await this.backgroundContext.newPage();
+    await newPage.setContent(doc, { waitUntil: "domcontentloaded" });
+    const locatorsObj = await newPage.evaluate(
+      ([id, contextId, mode]) => {
+        const recorder = window.__bvt_Recorder;
+        const contextElement = document.querySelector(`[data-blinq-context-id="${contextId}"]`);
+        const el = document.querySelector(`[data-blinq-id="${id}"]`);
+        if (contextElement) {
+          const result = recorder.locatorGenerator.toContextLocators(el, contextElement);
+          return result;
+        }
+        const isRecordingText = mode === "recordingText";
+        return recorder.locatorGenerator.getElementLocators(el, {
+          excludeText: isRecordingText,
+        });
+      },
+      [id, contextId, mode]
+    );
+
+    // console.log(`Generated locators: for ${inputID}: `, JSON.stringify(locatorsObj));
+    await newPage.close();
+    if (event.nestFrmLoc?.children) {
+      locatorsObj.nestFrmLoc = event.nestFrmLoc.children;
+    }
+
+    this.sendEvent(this.events.updateCommand, {
+      locators: {
+        locators: locatorsObj.locators,
+        nestFrmLoc: locatorsObj.nestFrmLoc,
+        iframe_src: !event.frame.isTop ? event.frame.url : undefined,
+      },
+      allStrategyLocators: locatorsObj.allStrategyLocators,
+      inputID,
+    });
+    // const
+  }
   async onAction(event) {
     this._updateUrlPath();
     // const locators = this.overlayLocators(event);
@@ -701,25 +1121,41 @@ export class BVTRecorder {
         event.mode === "recordingHover",
         event.mode === "multiInspecting"
       ),
-      locators: {
-        locators: event.locators,
-        iframe_src: !event.frame.isTop ? event.frame.url : undefined,
-      },
-      allStrategyLocators: event.allStrategyLocators,
+      // locators: {
+      //   locators: event.locators,
+      //   iframe_src: !event.frame.isTop ? event.frame.url : undefined,
+      // },
+      // allStrategyLocators: event.allStrategyLocators,
       url: event.frame.url,
       title: event.frame.title,
       extract: {},
       lastKnownUrlPath: this.lastKnownUrlPath,
     };
-    if (event.nestFrmLoc?.children) {
-      cmdEvent.locators.nestFrmLoc = event.nestFrmLoc.children;
-    }
+    // if (event.nestFrmLoc?.children) {
+    //   cmdEvent.locators.nestFrmLoc = event.nestFrmLoc.children;
+    // }
     // this.logger.info({ event });
     if (this.shouldTakeScreenshot) {
       await this.storeScreenshot(event);
     }
-    this.sendEvent(this.events.onNewCommand, cmdEvent);
-    this._updateUrlPath();
+    // this.sendEvent(this.events.onNewCommand, cmdEvent);
+    // this._updateUrlPath();
+    if (event.locators) {
+      Object.assign(cmdEvent, {
+        locators: {
+          locators: event.locators,
+          iframe_src: !event.frame.isTop ? event.frame.url : undefined,
+          nestFrmLoc: event.nestFrmLoc?.children,
+        },
+        allStrategyLocators: event.allStrategyLocators,
+      })
+      this.sendEvent(this.events.onNewCommand, cmdEvent);
+      this._updateUrlPath();
+    } else {
+      this.sendEvent(this.events.onNewCommand, cmdEvent);
+      this._updateUrlPath();
+      await this.generateLocators(event);
+    }
   }
   _updateUrlPath() {
     try {
@@ -735,13 +1171,12 @@ export class BVTRecorder {
   }
   async closeBrowser() {
     delete process.env.TEMP_RUN;
-    await this.watcher.close().then(() => {});
+    await this.watcher.close().then(() => { });
     this.watcher = null;
     this.previousIndex = null;
     this.previousHistoryLength = null;
     this.previousUrl = null;
     this.previousEntries = null;
-
     await closeContext();
     this.pageSet.clear();
   }
@@ -764,25 +1199,26 @@ export class BVTRecorder {
     for (let i = 0; i < 3; i++) {
       result = 0;
       try {
-        for (const page of this.context.pages()) {
-          for (const frame of page.frames()) {
-            try {
-              //scope, text1, tag1, regex1 = false, partial1, ignoreCase = true, _params: Params)
-              const frameResult = await this.web._locateElementByText(
-                frame,
-                searchString,
-                tag,
-                regex,
-                partial,
-                ignoreCase,
-                {}
-              );
-              result += frameResult.elementCount;
-            } catch (e) {
-              console.log(e);
-            }
+        // for (const page of this.context.pages()) {
+        const page = this.web.page;
+        for (const frame of page.frames()) {
+          try {
+            //scope, text1, tag1, regex1 = false, partial1, ignoreCase = true, _params: Params)
+            const frameResult = await this.web._locateElementByText(
+              frame,
+              searchString,
+              tag,
+              regex,
+              partial,
+              ignoreCase,
+              {}
+            );
+            result += frameResult.elementCount;
+          } catch (e) {
+            console.log(e);
           }
         }
+        // }
 
         return result;
       } catch (e) {
@@ -833,15 +1269,21 @@ export class BVTRecorder {
     }, 100);
     this.timerId = timerId;
   }
-  async runStep({ step, parametersMap, tags, isFirstStep, listenNetwork }, options) {
+  async runStep({ step, parametersMap, tags, isFirstStep, listenNetwork, AICode }, options) {
     const { skipAfter = true, skipBefore = !isFirstStep } = options || {};
+
+    const env = path.basename(this.envName, ".json");
     const _env = {
       TOKEN: this.TOKEN,
       TEMP_RUN: true,
       REPORT_FOLDER: this.bvtContext.reportFolder,
       BLINQ_ENV: this.envName,
       DEBUG: "blinq:route",
+      // BVT_TEMP_SNAPSHOTS_FOLDER: step.isImplemented ? path.join(this.tempSnapshotsFolder, env) : undefined,
     };
+    if (!step.isImplemented) {
+      _env.BVT_TEMP_SNAPSHOTS_FOLDER = path.join(this.tempSnapshotsFolder, env);
+    }
 
     this.bvtContext.navigate = true;
     this.bvtContext.loadedRoutes = null;
@@ -861,6 +1303,7 @@ export class BVTRecorder {
     await this.setMode("running");
 
     try {
+      step.text = step.text.trim();
       const { result, info } = await this.stepRunner.runStep(
         {
           step,
@@ -868,6 +1311,7 @@ export class BVTRecorder {
           envPath: this.envName,
           tags,
           config: this.config,
+          AICode,
         },
         this.bvtContext,
         {
@@ -887,10 +1331,23 @@ export class BVTRecorder {
       this.bvtContext.navigate = false;
     }
   }
-  async saveScenario({ scenario, featureName, override, isSingleStep }) {
-    await updateStepDefinitions({ scenario, featureName, projectDir: this.projectDir }); // updates mjs files
-    if (!isSingleStep) await updateFeatureFile({ featureName, scenario, override, projectDir: this.projectDir }); // updates gherkin files
-    await this.cleanup({ tags: scenario.tags });
+  async saveScenario({ scenario, featureName, override, isSingleStep, branch, isEditing, env, AICode }) {
+    const res = await this.workspaceService.saveScenario({
+      scenario,
+      featureName,
+      override,
+      isSingleStep,
+      branch,
+      isEditing,
+      projectId: path.basename(this.projectDir),
+      env: env ?? this.envName,
+      AICode,
+    });
+    if (res.success) {
+      await this.cleanup({ tags: scenario.tags });
+    } else {
+      throw new Error(res.message || "Error saving scenario");
+    }
   }
   async getImplementedSteps() {
     const stepsAndScenarios = await getImplementedSteps(this.projectDir);
@@ -1055,9 +1512,11 @@ export class BVTRecorder {
     const featureFilePath = path.join(this.projectDir, "features", featureName);
     const gherkinDoc = this.parseFeatureFile(featureFilePath);
     const scenario = gherkinDoc.feature.children.find((child) => child.scenario.name === scenarioName)?.scenario;
+    this.scenarioDoc = scenario;
 
     const steps = [];
     const parameters = [];
+    const datasets = [];
     if (scenario.examples && scenario.examples.length > 0) {
       const example = scenario.examples[0];
       example?.tableHeader?.cells.forEach((cell, index) => {
@@ -1065,7 +1524,26 @@ export class BVTRecorder {
           key: cell.value,
           value: unEscapeNonPrintables(example.tableBody[0].cells[index].value),
         });
+        // datasets.push({
+        //   data: example.tableBody[]
+        // })
       });
+
+      for (let i = 0; i < example.tableBody.length; i++) {
+        const row = example.tableBody[i];
+        // for (const row of example.tableBody) {
+        const paramters = [];
+        row.cells.forEach((cell, index) => {
+          paramters.push({
+            key: example.tableHeader.cells[index].value,
+            value: unEscapeNonPrintables(cell.value),
+          });
+        });
+        datasets.push({
+          data: paramters,
+          datasetId: i,
+        });
+      }
     }
 
     for (const step of scenario.steps) {
@@ -1086,6 +1564,7 @@ export class BVTRecorder {
       tags: scenario.tags.map((tag) => tag.name),
       steps,
       parameters,
+      datasets,
     };
   }
   async findRelatedTextInAllFrames({ searchString, climb, contextText, params }) {
@@ -1118,6 +1597,271 @@ export class BVTRecorder {
     }
     return result;
   }
+  async setStepCodeByScenario({
+    function_name,
+    mjs_file_content,
+    user_request,
+    selectedTarget,
+    page_context,
+    AIMemory,
+    steps_context,
+  }) {
+    const runsURL = getRunsServiceBaseURL();
+    const url = `${runsURL}/process-user-request/generate-code-with-context`;
+    try {
+      const result = await axiosClient({
+        url,
+        method: "POST",
+        data: {
+          function_name,
+          mjs_file_content,
+          user_request,
+          selectedTarget,
+          page_context,
+          AIMemory,
+          steps_context,
+        },
+        headers: {
+          Authorization: `Bearer ${this.TOKEN}`,
+          "X-Source": "recorder",
+        },
+      });
+      if (result.status !== 200) {
+        return { success: false, message: "Error while fetching code changes" };
+      }
+      return { success: true, data: result.data };
+    } catch (error) {
+      // @ts-ignore
+      const reason = error?.response?.data?.error || "";
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      throw new Error(`Failed to fetch code changes: ${errorMessage} \n ${reason}`);
+    }
+  }
+
+  async getStepCodeByScenario({ featureName, scenarioName, projectId, branch }) {
+    try {
+      const runsURL = getRunsServiceBaseURL();
+      const ssoURL = runsURL.replace("/runs", "/auth");
+      const privateRepoURL = `${ssoURL}/isRepoPrivate?project_id=${projectId}`;
+
+      const isPrivateRepoReq = await axiosClient({
+        url: privateRepoURL,
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${this.TOKEN}`,
+          "X-Source": "recorder",
+        },
+      });
+
+      if (isPrivateRepoReq.status !== 200) {
+        return { success: false, message: "Error while checking repo privacy" };
+      }
+
+      const isPrivateRepo = isPrivateRepoReq.data.isPrivate ? isPrivateRepoReq.data.isPrivate : false;
+
+      const workspaceURL = runsURL.replace("/runs", "/workspace");
+      const url = `${workspaceURL}/get-step-code-by-scenario`;
+
+      const result = await axiosClient({
+        url,
+        method: "POST",
+        data: {
+          scenarioName,
+          featureName,
+          projectId,
+          isPrivateRepo,
+          branch,
+        },
+        headers: {
+          Authorization: `Bearer ${this.TOKEN}`,
+          "X-Source": "recorder",
+        },
+      });
+      if (result.status !== 200) {
+        return { success: false, message: "Error while getting step code" };
+      }
+      return { success: true, data: result.data.stepInfo };
+    } catch (error) {
+      const reason = error?.response?.data?.error || "";
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      throw new Error(`Failed to get step code: ${errorMessage} \n ${reason}`);
+    }
+  }
+  async getContext() {
+    await this.page.waitForLoadState("domcontentloaded");
+    await this.page.waitForSelector("body");
+    await this.page.waitForTimeout(500);
+    return await this.page.evaluate(() => {
+      return document.documentElement.outerHTML;
+    });
+  }
+  async deleteCommandFromStepCode({ scenario, AICode, command }) {
+    if (!AICode || AICode.length === 0) {
+      console.log("No AI code available to delete.");
+      return;
+    }
+
+    const __temp_features_FolderName = "__temp_features" + Math.random().toString(36).substring(2, 7);
+    const tempFolderPath = path.join(this.projectDir, __temp_features_FolderName);
+    process.env.tempFeaturesFolderPath = __temp_features_FolderName;
+    process.env.TESTCASE_REPORT_FOLDER_PATH = tempFolderPath;
+
+    try {
+      await this.stepRunner.copyCodetoTempFolder({ tempFolderPath, AICode });
+      await this.stepRunner.writeWrapperCode(tempFolderPath);
+      const codeView = AICode.find((f) => f.stepName === scenario.step.text);
+
+      if (!codeView) {
+        throw new Error("Step code not found for step: " + scenario.step.text);
+      }
+
+      const functionName = codeView.functionName;
+      const mjsPath = path
+        .normalize(codeView.mjsFile)
+        .split(path.sep)
+        .filter((part) => part !== "features")
+        .join(path.sep);
+      const codePath = path.join(tempFolderPath, mjsPath);
+
+      if (!existsSync(codePath)) {
+        throw new Error("Step code file not found: " + codePath);
+      }
+
+      const codePage = getCodePage(codePath);
+
+      const elements = codePage.getVariableDeclarationAsObject("elements");
+
+      const cucumberStep = getCucumberStep({ step: scenario.step });
+      cucumberStep.text = scenario.step.text;
+      const stepCommands = scenario.step.commands;
+      const cmd = _toRecordingStep(command, scenario.step.name);
+
+      const recording = new Recording();
+      recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
+      const step = { ...recording.steps[0], ...cmd };
+      const result = _generateCodeFromCommand(step, elements, {});
+
+      codePage._removeCommands(functionName, result.codeLines);
+      codePage.removeUnusedElements();
+      codePage.save();
+
+      await rm(tempFolderPath, { recursive: true, force: true });
+
+      return { code: codePage.fileContent, mjsFile: codeView.mjsFile };
+    } catch (error) {
+      await rm(tempFolderPath, { recursive: true, force: true });
+      throw error;
+    }
+  }
+  async addCommandToStepCode({ scenario, AICode }) {
+    if (!AICode || AICode.length === 0) {
+      console.log("No AI code available to add.");
+      return;
+    }
+
+    const __temp_features_FolderName = "__temp_features" + Math.random().toString(36).substring(2, 7);
+    const tempFolderPath = path.join(this.projectDir, __temp_features_FolderName);
+    process.env.tempFeaturesFolderPath = __temp_features_FolderName;
+    process.env.TESTCASE_REPORT_FOLDER_PATH = tempFolderPath;
+
+    try {
+      await this.stepRunner.copyCodetoTempFolder({ tempFolderPath, AICode });
+      await this.stepRunner.writeWrapperCode(tempFolderPath);
+
+      let codeView = AICode.find((f) => f.stepName === scenario.step.text);
+
+      if (codeView) {
+        scenario.step.commands = [scenario.step.commands.pop()];
+        const functionName = codeView.functionName;
+        const mjsPath = path
+          .normalize(codeView.mjsFile)
+          .split(path.sep)
+          .filter((part) => part !== "features")
+          .join(path.sep);
+        const codePath = path.join(tempFolderPath, mjsPath);
+
+        if (!existsSync(codePath)) {
+          throw new Error("Step code file not found: " + codePath);
+        }
+
+        const codePage = getCodePage(codePath);
+        const elements = codePage.getVariableDeclarationAsObject("elements");
+
+        const cucumberStep = getCucumberStep({ step: scenario.step });
+        cucumberStep.text = scenario.step.text;
+        const stepCommands = scenario.step.commands;
+        const cmd = _toRecordingStep(scenario.step.commands[0], scenario.step.name);
+
+        const recording = new Recording();
+        recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
+        const step = { ...recording.steps[0], ...cmd };
+
+        const result = _generateCodeFromCommand(step, elements, {});
+        codePage.insertElements(result.elements);
+
+        codePage._injectOneCommand(functionName, result.codeLines.join("\n"));
+        codePage.save();
+
+        await rm(tempFolderPath, { recursive: true, force: true });
+
+        return { code: codePage.fileContent, newStep: false, mjsFile: codeView.mjsFile };
+      }
+      console.log("Step code not found for step: ", scenario.step.text);
+
+      codeView = AICode[0];
+      const functionName = toMethodName(scenario.step.text);
+      const codeLines = [];
+      const mjsPath = path
+        .normalize(codeView.mjsFile)
+        .split(path.sep)
+        .filter((part) => part !== "features")
+        .join(path.sep);
+      const codePath = path.join(tempFolderPath, mjsPath);
+
+      if (!existsSync(codePath)) {
+        throw new Error("Step code file not found: " + codePath);
+      }
+
+      const codePage = getCodePage(codePath);
+      const elements = codePage.getVariableDeclarationAsObject("elements");
+      let newElements = { ...elements };
+
+      const cucumberStep = getCucumberStep({ step: scenario.step });
+      cucumberStep.text = scenario.step.text;
+      const stepCommands = scenario.step.commands;
+      stepCommands.forEach((command) => {
+        const cmd = _toRecordingStep(command, scenario.step.name);
+
+        const recording = new Recording();
+        recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
+        const step = { ...recording.steps[0], ...cmd };
+        const result = _generateCodeFromCommand(step, elements, {});
+        newElements = { ...result.elements };
+        codeLines.push(...result.codeLines);
+      });
+
+      codePage.insertElements(newElements);
+      codePage.addInfraCommand(
+        functionName,
+        cucumberStep.text,
+        cucumberStep.getVariablesList(),
+        codeLines,
+        false,
+        "recorder"
+      );
+
+      const keyword = (cucumberStep.keywordAlias ?? cucumberStep.keyword).trim();
+      codePage.addCucumberStep(keyword, cucumberStep.getTemplate(), functionName, stepCommands.length);
+      codePage.save();
+
+      await rm(tempFolderPath, { recursive: true, force: true });
+
+      return { code: codePage.fileContent, newStep: true, functionName, mjsFile: codeView.mjsFile };
+    } catch (error) {
+      await rm(tempFolderPath, { recursive: true, force: true });
+      throw error;
+    }
+  }
   async cleanup({ tags }) {
     const noopStep = {
       text: "Noop",
@@ -1235,4 +1979,509 @@ export class BVTRecorder {
       this.bvtContext.STORE_DETAILED_NETWORK_DATA = false;
     }
   }
+
+  async fakeParams(params) {
+    const newFakeParams = {};
+    Object.keys(params).forEach((key) => {
+      if (!params[key].startsWith("{{") || !params[key].endsWith("}}")) {
+        newFakeParams[key] = params[key];
+        return;
+      }
+
+      try {
+        const value = params[key].substring(2, params[key].length - 2).trim();
+        const faking = value.split("(")[0].split(".");
+        let argument = value.substring(value.indexOf("(") + 1, value.lastIndexOf(")"));
+        argument = isNaN(Number(argument)) || argument === "" ? argument : Number(argument);
+        let fakeFunc = faker;
+        faking.forEach((f) => {
+          fakeFunc = fakeFunc[f];
+        });
+        const newValue = fakeFunc(argument);
+        newFakeParams[key] = newValue;
+      } catch (error) {
+        newFakeParams[key] = params[key];
+      }
+    });
+
+    return newFakeParams;
+  }
+
+  async getBrowserState() {
+    try {
+      const state = await this.browserEmitter?.getState();
+      this.sendEvent(this.events.browserStateSync, state);
+    } catch (error) {
+      this.logger.error("Error getting browser state:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error getting browser state",
+        code: "GET_STATE_ERROR",
+      });
+    }
+  }
+
+  async applyClipboardPayload(message) {
+    const payload = message?.data ?? message;
+
+    this.logger.info("[BVTRecorder] applyClipboardPayload called", {
+      hasPayload: !!payload,
+      hasText: !!payload?.text,
+      hasHtml: !!payload?.html,
+      trigger: message?.trigger,
+    });
+
+    if (!payload) {
+      this.logger.warn("[BVTRecorder] No payload provided");
+      return;
+    }
+
+    try {
+      if (this.browserEmitter && typeof this.browserEmitter.applyClipboardPayload === "function") {
+        this.logger.info("[BVTRecorder] Using RemoteBrowserService to apply clipboard");
+        await this.browserEmitter.applyClipboardPayload(payload);
+        return;
+      }
+
+      const activePage = this.browserEmitter?.getSelectedPage() ?? this.page;
+      if (!activePage) {
+        this.logger.warn("[BVTRecorder] No active page available");
+        return;
+      }
+
+      this.logger.info("[BVTRecorder] Applying clipboard to page", {
+        url: activePage.url(),
+        isClosed: activePage.isClosed(),
+      });
+
+      const result = await activePage.evaluate((clipboardData) => {
+        console.log("[Page] Executing clipboard application", clipboardData);
+        if (typeof window.__bvt_applyClipboardData === "function") {
+          return window.__bvt_applyClipboardData(clipboardData);
+        }
+        console.error("[Page] __bvt_applyClipboardData function not found!");
+        return false;
+      }, payload);
+
+      this.logger.info("[BVTRecorder] Clipboard application result:", result);
+
+      if (!result) {
+        this.logger.warn("[BVTRecorder] Clipboard data not applied successfully");
+      } else {
+        this.logger.info("[BVTRecorder] Clipboard data applied successfully");
+      }
+    } catch (error) {
+      this.logger.error("[BVTRecorder] Error applying clipboard payload", error);
+      this.sendEvent(this.events.clipboardError, {
+        message: "Failed to apply clipboard contents to the remote session",
+        trigger: message?.trigger ?? "paste",
+      });
+    }
+  }
+
+  hasClipboardPayload(payload) {
+    return Boolean(
+      payload && (payload.text || payload.html || (Array.isArray(payload.files) && payload.files.length > 0))
+    );
+  }
+
+  async collectClipboardFromPage(page) {
+    if (!page) {
+      this.logger.warn("[BVTRecorder] No page available to collect clipboard data");
+      return null;
+    }
+    try {
+      await page
+        .context()
+        .grantPermissions(["clipboard-read", "clipboard-write"])
+        .catch((error) => {
+          this.logger.warn("[BVTRecorder] Failed to grant clipboard permissions before read", error);
+        });
+
+      const payload = await page.evaluate(async () => {
+        const result = {};
+        if (typeof navigator === "undefined" || !navigator.clipboard) {
+          return result;
+        }
+
+        const arrayBufferToBase64 = (buffer) => {
+          let binary = "";
+          const bytes = new Uint8Array(buffer);
+          const chunkSize = 0x8000;
+          for (let index = 0; index < bytes.length; index += chunkSize) {
+            const chunk = bytes.subarray(index, index + chunkSize);
+            binary += String.fromCharCode(...chunk);
+          }
+          return btoa(binary);
+        };
+
+        const files = [];
+
+        if (typeof navigator.clipboard.read === "function") {
+          try {
+            const items = await navigator.clipboard.read();
+            for (const item of items) {
+              if (item.types.includes("text/html") && !result.html) {
+                const blob = await item.getType("text/html");
+                result.html = await blob.text();
+              }
+              if (item.types.includes("text/plain") && !result.text) {
+                const blob = await item.getType("text/plain");
+                result.text = await blob.text();
+              }
+              for (const type of item.types) {
+                if (type.startsWith("text/")) {
+                  continue;
+                }
+                try {
+                  const blob = await item.getType(type);
+                  const buffer = await blob.arrayBuffer();
+                  files.push({
+                    name: `clipboard-file-${files.length + 1}`,
+                    type,
+                    lastModified: Date.now(),
+                    data: arrayBufferToBase64(buffer),
+                  });
+                } catch (error) {
+                  console.warn("[BVTRecorder] Failed to serialize clipboard blob", { type, error });
+                }
+              }
+            }
+          } catch (error) {
+            console.warn("[BVTRecorder] navigator.clipboard.read failed", error);
+          }
+        }
+
+        if (!result.text && typeof navigator.clipboard.readText === "function") {
+          try {
+            const text = await navigator.clipboard.readText();
+            if (text) {
+              result.text = text;
+            }
+          } catch (error) {
+            console.warn("[BVTRecorder] navigator.clipboard.readText failed", error);
+          }
+        }
+
+        if (!result.text) {
+          const selection = window.getSelection?.()?.toString?.();
+          if (selection) {
+            result.text = selection;
+          }
+        }
+
+        if (files.length > 0) {
+          result.files = files;
+        }
+
+        return result;
+      });
+
+      return payload;
+    } catch (error) {
+      this.logger.error("[BVTRecorder] Error collecting clipboard payload", error);
+      return null;
+    }
+  }
+
+  async readClipboardPayload(message) {
+    try {
+      let payload = null;
+      if (this.browserEmitter && typeof this.browserEmitter.readClipboardPayload === "function") {
+        payload = await this.browserEmitter.readClipboardPayload();
+      } else {
+        const activePage = this.browserEmitter?.getSelectedPage() ?? this.page;
+        payload = await this.collectClipboardFromPage(activePage);
+      }
+
+      if (this.hasClipboardPayload(payload)) {
+        this.logger.info("[BVTRecorder] Remote clipboard payload ready", {
+          hasText: !!payload.text,
+          hasHtml: !!payload.html,
+          files: payload.files?.length ?? 0,
+        });
+        this.sendEvent(this.events.clipboardPush, {
+          data: payload,
+          trigger: message?.trigger ?? "copy",
+          origin: message?.source ?? "browserUI",
+        });
+        return payload;
+      }
+
+      this.logger.warn("[BVTRecorder] Remote clipboard payload empty or unavailable");
+      this.sendEvent(this.events.clipboardError, {
+        message: "Remote clipboard is empty",
+        trigger: message?.trigger ?? "copy",
+      });
+      return null;
+    } catch (error) {
+      this.logger.error("[BVTRecorder] Error reading clipboard payload", error);
+      this.sendEvent(this.events.clipboardError, {
+        message: "Failed to read clipboard contents from the remote session",
+        trigger: message?.trigger ?? "copy",
+        details: error instanceof Error ? error.message : String(error),
+      });
+      throw error;
+    }
+  }
+
+  async injectClipboardIntoPage(page, payload) {
+    if (!page) {
+      return;
+    }
+
+    try {
+      await page
+        .context()
+        .grantPermissions(["clipboard-read", "clipboard-write"])
+        .catch(() => { });
+      await page.evaluate(async (clipboardPayload) => {
+        const toArrayBuffer = (base64) => {
+          if (!base64) {
+            return null;
+          }
+          const binaryString = atob(base64);
+          const len = binaryString.length;
+          const bytes = new Uint8Array(len);
+          for (let i = 0; i < len; i += 1) {
+            bytes[i] = binaryString.charCodeAt(i);
+          }
+          return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+        };
+
+        const createFileFromPayload = (filePayload) => {
+          const buffer = toArrayBuffer(filePayload?.data);
+          if (!buffer) {
+            return null;
+          }
+          const name = filePayload?.name || "clipboard-file";
+          const type = filePayload?.type || "application/octet-stream";
+          const lastModified = filePayload?.lastModified ?? Date.now();
+          try {
+            return new File([buffer], name, { type, lastModified });
+          } catch (error) {
+            console.warn("Clipboard bridge could not recreate File object", error);
+            return null;
+          }
+        };
+
+        let dataTransfer = null;
+        try {
+          dataTransfer = new DataTransfer();
+        } catch (error) {
+          console.warn("Clipboard bridge could not create DataTransfer", error);
+        }
+
+        if (dataTransfer) {
+          if (clipboardPayload?.text) {
+            try {
+              dataTransfer.setData("text/plain", clipboardPayload.text);
+            } catch (error) {
+              console.warn("Clipboard bridge failed to set text/plain", error);
+            }
+          }
+          if (clipboardPayload?.html) {
+            try {
+              dataTransfer.setData("text/html", clipboardPayload.html);
+            } catch (error) {
+              console.warn("Clipboard bridge failed to set text/html", error);
+            }
+          }
+          if (Array.isArray(clipboardPayload?.files)) {
+            for (const filePayload of clipboardPayload.files) {
+              const file = createFileFromPayload(filePayload);
+              if (file) {
+                try {
+                  dataTransfer.items.add(file);
+                } catch (error) {
+                  console.warn("Clipboard bridge failed to append file", error);
+                }
+              }
+            }
+          }
+        }
+
+        let target = document.activeElement || document.body;
+        if (!target) {
+          target = document.body || null;
+        }
+
+        let pasteHandled = false;
+        if (dataTransfer && target && typeof target.dispatchEvent === "function") {
+          try {
+            const clipboardEvent = new ClipboardEvent("paste", {
+              clipboardData: dataTransfer,
+              bubbles: true,
+              cancelable: true,
+            });
+            pasteHandled = target.dispatchEvent(clipboardEvent);
+          } catch (error) {
+            console.warn("Clipboard bridge failed to dispatch synthetic paste event", error);
+          }
+        }
+
+        if (pasteHandled) {
+          return;
+        }
+
+        const callLegacyExecCommand = (command, value) => {
+          const execCommand = document && document["execCommand"];
+          if (typeof execCommand === "function") {
+            try {
+              return execCommand.call(document, command, false, value);
+            } catch (error) {
+              console.warn("Clipboard bridge failed to execute legacy command", error);
+            }
+          }
+          return false;
+        };
+
+        if (clipboardPayload?.html) {
+          const inserted = callLegacyExecCommand("insertHTML", clipboardPayload.html);
+          if (inserted) {
+            return;
+          }
+          try {
+            const selection = window.getSelection?.();
+            if (selection && selection.rangeCount > 0) {
+              const range = selection.getRangeAt(0);
+              range.deleteContents();
+              const fragment = range.createContextualFragment(clipboardPayload.html);
+              range.insertNode(fragment);
+              range.collapse(false);
+              return;
+            }
+          } catch (error) {
+            console.warn("Clipboard bridge could not insert HTML via Range APIs", error);
+          }
+        }
+
+        if (clipboardPayload?.text) {
+          const inserted = callLegacyExecCommand("insertText", clipboardPayload.text);
+          if (inserted) {
+            return;
+          }
+          try {
+            const selection = window.getSelection?.();
+            if (selection && selection.rangeCount > 0) {
+              const range = selection.getRangeAt(0);
+              range.deleteContents();
+              range.insertNode(document.createTextNode(clipboardPayload.text));
+              range.collapse(false);
+              return;
+            }
+          } catch (error) {
+            console.warn("Clipboard bridge could not insert text via Range APIs", error);
+          }
+        }
+
+        if (clipboardPayload?.text && target && "value" in target) {
+          try {
+            const input = target;
+            const start = input.selectionStart ?? input.value.length ?? 0;
+            const end = input.selectionEnd ?? input.value.length ?? 0;
+            const value = input.value ?? "";
+            const text = clipboardPayload.text;
+            input.value = `${value.slice(0, start)}${text}${value.slice(end)}`;
+            const caret = start + text.length;
+            if (typeof input.setSelectionRange === "function") {
+              input.setSelectionRange(caret, caret);
+            }
+            input.dispatchEvent(new Event("input", { bubbles: true }));
+          } catch (error) {
+            console.warn("Clipboard bridge failed to mutate input element", error);
+          }
+        }
+      }, payload);
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async createTab(url) {
+    try {
+      await this.browserEmitter?.createTab(url);
+    } catch (error) {
+      this.logger.error("Error creating tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error creating tab",
+        code: "CREATE_TAB_ERROR",
+      });
+    }
+  }
+
+  async closeTab(pageId) {
+    try {
+      await this.browserEmitter?.closeTab(pageId);
+    } catch (error) {
+      this.logger.error("Error closing tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error closing tab",
+        code: "CLOSE_TAB_ERROR",
+      });
+    }
+  }
+
+  async selectTab(pageId) {
+    try {
+      await this.browserEmitter?.selectTab(pageId);
+    } catch (error) {
+      this.logger.error("Error selecting tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error selecting tab",
+        code: "SELECT_TAB_ERROR",
+      });
+    }
+  }
+
+  async navigateTab({ pageId, url }) {
+    try {
+      if (!pageId || !url) {
+        this.logger.error("navigateTab called without pageId or url", { pageId, url });
+        return;
+      }
+      await this.browserEmitter?.navigateTab(pageId, url);
+    } catch (error) {
+      this.logger.error("Error navigating tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error navigating tab",
+        code: "NAVIGATE_TAB_ERROR",
+      });
+    }
+  }
+
+  async reloadTab(pageId) {
+    try {
+      await this.browserEmitter?.reloadTab(pageId);
+    } catch (error) {
+      this.logger.error("Error reloading tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error reloading tab",
+        code: "RELOAD_TAB_ERROR",
+      });
+    }
+  }
+
+  async goBack(pageId) {
+    try {
+      await this.browserEmitter?.goBack(pageId);
+    } catch (error) {
+      this.logger.error("Error navigating back:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error navigating back",
+        code: "GO_BACK_ERROR",
+      });
+    }
+  }
+
+  async goForward(pageId) {
+    try {
+      await this.browserEmitter?.goForward(pageId);
+    } catch (error) {
+      this.logger.error("Error navigating forward:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error navigating forward",
+        code: "GO_FORWARD_ERROR",
+      });
+    }
+  }
 }