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

package/bin/client/recorderv3/services.js

@@ -2,150 +2,826 @@ import { readdirSync, readFileSync } from "fs";
 import { getRunsServiceBaseURL } from "../utils/index.js";
 import { axiosClient } from "../utils/axiosClient.js";
 import path from "path";
-
+import { EventEmitter } from "events";
+import { v4 as uuidv4 } from "uuid"; // Import uuid
 export class NamesService {
-  constructor({ screenshotMap, TOKEN, projectDir, logger }) {
-    this.screenshotMap = screenshotMap;
-    this.TOKEN = TOKEN;
-    this.projectDir = projectDir;
-    this.logger = logger;
-  }
-  async generateStepName({ commands, stepsNames, parameters, map }) {
-    let screenshot = this.screenshotMap.get(commands[commands.length - 1].inputID);
-    if (!screenshot && commands.length > 1) {
-      screenshot = this.screenshotMap.get(commands[commands.length - 2].inputID);
-    }
-
-    const url = `${getRunsServiceBaseURL()}/generate-step-information/generate`;
-    const TIMEOUT = 120; // 2 minutes
-    const { data } = await axiosClient({
-      url,
-      method: "POST",
-      data: {
-        commands,
-        stepsNames,
-        parameters,
-        //screenshot,
-        map,
-      },
-      headers: {
-        Authorization: `Bearer ${this.TOKEN}`,
-        "X-Source": "recorder",
-      },
-    });
-    const actionUrl = `${getRunsServiceBaseURL()}/action/get-action?id=${data.id}`;
-    let result = { status: 500 };
-    for (let i = 0; i < TIMEOUT; i++) {
-      try {
-        const action = await axiosClient({
-          url: actionUrl,
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${this.TOKEN}`,
-            "X-Source": "recorder",
-          },
+    screenshotMap;
+    TOKEN;
+    projectDir;
+    logger;
+    constructor({ screenshotMap, TOKEN, projectDir, logger }) {
+        this.screenshotMap = screenshotMap;
+        this.TOKEN = TOKEN;
+        this.projectDir = projectDir;
+        this.logger = logger;
+    }
+    //@ts-expect-error
+    async generateStepName({ commands, stepsNames, parameters, map }) {
+        let screenshot = this.screenshotMap.get(commands[commands.length - 1].inputID);
+        if (!screenshot && commands.length > 1) {
+            screenshot = this.screenshotMap.get(commands[commands.length - 2].inputID);
+        }
+        const url = `${getRunsServiceBaseURL()}/generate-step-information/generate`;
+        const TIMEOUT = 120; // 2 minutes
+        const { data } = await axiosClient({
+            url,
+            method: "POST",
+            data: {
+                commands,
+                stepsNames,
+                parameters,
+                //screenshot,
+                map,
+            },
+            headers: {
+                Authorization: `Bearer ${this.TOKEN}`,
+                "X-Source": "recorder",
+            },
+        });
+        const actionUrl = `${getRunsServiceBaseURL()}/action/get-action?id=${data.id}`;
+        let result = { status: 500 };
+        for (let i = 0; i < TIMEOUT; i++) {
+            try {
+                const action = await axiosClient({
+                    url: actionUrl,
+                    method: "GET",
+                    headers: {
+                        Authorization: `Bearer ${this.TOKEN}`,
+                        "X-Source": "recorder",
+                    },
+                });
+                if (action.data.status) {
+                    result = action;
+                    break;
+                }
+            }
+            catch (error) {
+                if (i === TIMEOUT - 1) {
+                    this.logger.error("Timeout while generating step details: ", error instanceof Error ? error : { message: JSON.stringify(error) });
+                    console.error("Timeout while generating step details: ", error instanceof Error ? error.message : error);
+                }
+            }
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+        }
+        if (result.status !== 200) {
+            return { success: false, message: "Error while generating step details" };
+        }
+        return result.data;
+    }
+    async generateScenarioAndFeatureNames(scenarioAsText) {
+        if (!this.projectDir) {
+            throw new Error("Project directory not found");
+        }
+        // read all files with .feature extension into an object {files:[{name: "", content: ""}]}
+        const featureFiles = readdirSync(path.join(this.projectDir, "features"));
+        const featureFilesContent = featureFiles
+            .filter((file) => file.endsWith(".feature"))
+            .map((file) => {
+            return {
+                name: file,
+                content: readFileSync(path.join(this.projectDir, "features", file), "utf8"),
+            };
         });
-
-        if (action.data.status) {
-          result = action;
-          break;
-        }
-      } catch (error) {
-        if (i === TIMEOUT - 1) {
-          this.logger.error("Timeout while generating step details: ", error);
-          console.error("Timeout while generating step details: ", error);
-        }
-      }
-
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    }
-
-    if (result.status !== 200) {
-      return { success: false, message: "Error while generating step details" };
-    }
-    return result.data;
-  }
-  async generateScenarioAndFeatureNames(scenarioAsText) {
-    if (!this.projectDir) {
-      throw new Error("Project directory not found");
-    }
-    // read all files with .feature extension into an object {files:[{name: "", content: ""}]}
-    const featureFiles = readdirSync(path.join(this.projectDir, "features"));
-    const featureFilesContent = featureFiles
-      .filter((file) => file.endsWith(".feature"))
-      .map((file) => {
-        return {
-          name: file,
-          content: readFileSync(path.join(this.projectDir, "features", file), "utf8"),
+        const genObject = {
+            files: featureFilesContent,
+            scenario: scenarioAsText,
         };
-      });
-    const genObject = {
-      files: featureFilesContent,
-      scenario: scenarioAsText,
-    };
-
-    // get screenshot for the last command
-    const url = `${getRunsServiceBaseURL()}/generate-step-information/generate_scenario_feature`;
-    const TIMEOUT = 120; // 2 minutes
-    const { data } = await axiosClient({
-      url,
-      method: "POST",
-      data: {
-        ...genObject,
-      },
-      headers: {
-        Authorization: `Bearer ${this.TOKEN}`,
-        "X-Source": "recorder",
-      },
-    });
-    const actionUrl = `${getRunsServiceBaseURL()}/action/get-action?id=${data.id}`;
-    let result = { status: 500 };
-    for (let i = 0; i < TIMEOUT; i++) {
-      try {
-        const action = await axiosClient({
-          url: actionUrl,
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${this.TOKEN}`,
-            "X-Source": "recorder",
-          },
+        // get screenshot for the last command
+        const url = `${getRunsServiceBaseURL()}/generate-step-information/generate_scenario_feature`;
+        const TIMEOUT = 120; // 2 minutes
+        const { data } = await axiosClient({
+            url,
+            method: "POST",
+            data: {
+                ...genObject,
+            },
+            headers: {
+                Authorization: `Bearer ${this.TOKEN}`,
+                "X-Source": "recorder",
+            },
+        });
+        const actionUrl = `${getRunsServiceBaseURL()}/action/get-action?id=${data.id}`;
+        let result = { status: 500 };
+        for (let i = 0; i < TIMEOUT; i++) {
+            try {
+                const action = await axiosClient({
+                    url: actionUrl,
+                    method: "GET",
+                    headers: {
+                        Authorization: `Bearer ${this.TOKEN}`,
+                        "X-Source": "recorder",
+                    },
+                });
+                if (action.data.status) {
+                    result = action;
+                    break;
+                }
+            }
+            catch (error) {
+                if (i === TIMEOUT - 1) {
+                    console.error("Timeout while generating step details: ", error);
+                }
+            }
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+        }
+        if (result.status !== 200) {
+            return { success: false, message: "Error while generating step details" };
+        }
+        return result.data;
+    }
+    //@ts-expect-error
+    async generateCommandName({ command }) {
+        const url = `${getRunsServiceBaseURL()}/generate-step-information/generate-element-name`;
+        const screenshot = this.screenshotMap.get(command.inputID);
+        const result = await axiosClient({
+            url,
+            method: "POST",
+            data: { ...command, screenshot },
+            headers: {
+                Authorization: `Bearer ${this.TOKEN}`,
+                "X-Source": "recorder",
+            },
+        });
+        if (result.status !== 200) {
+            return { success: false, message: "Error while generating command details" };
+        }
+        return result.data;
+    }
+}
+export class PublishService {
+    TOKEN;
+    constructor(TOKEN) {
+        this.TOKEN = TOKEN;
+    }
+    async saveScenario({ scenario, featureName, override, branch, isEditing, projectId, env }) {
+        const runsURL = getRunsServiceBaseURL();
+        const workspaceURL = runsURL.replace("/runs", "/workspace");
+        const url = `${workspaceURL}/publish-recording`;
+        try {
+            const result = await axiosClient({
+                url,
+                method: "POST",
+                data: {
+                    scenario,
+                    featureName,
+                    override,
+                    env,
+                },
+                params: {
+                    branch,
+                },
+                headers: {
+                    Authorization: `Bearer ${this.TOKEN}`,
+                    "X-Source": "recorder",
+                },
+            });
+            if (result.status !== 200) {
+                return { success: false, message: "Error while saving scenario" };
+            }
+            try {
+                this.updateProjectMetadata({
+                    featureName,
+                    scenarioName: scenario.name,
+                    projectId,
+                    branch,
+                    isEditing: override,
+                });
+            }
+            catch (error) { }
+            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 save scenario: ${errorMessage} \n ${reason}`);
+        }
+    }
+    async updateProjectMetadata({ featureName, scenarioName, projectId, branch, isEditing }) {
+        try {
+            await axiosClient({
+                method: "POST",
+                url: `${getRunsServiceBaseURL()}/project/updateProjectMetadata`,
+                data: {
+                    featureName,
+                    scenarioName,
+                    eventType: isEditing ? "editScenario" : "createScenario",
+                    projectId,
+                    branch: branch,
+                },
+                headers: {
+                    Authorization: `Bearer ${this.TOKEN}`,
+                    "X-Source": "recorder",
+                },
+            });
+        }
+        catch (error) {
+            // logger.error("Failed to update project metadata: " + error.message);
+            // @ts-ignore
+            console.error("run_recorder", `Failed to update project metadata: ${error.message ?? error}`);
+        }
+    }
+}
+export class RemoteBrowserService extends EventEmitter {
+    CDP_CONNECT_URL;
+    context;
+    pages = new Map();
+    _selectedPageId = null;
+    wsUrlBase; // Store the base URL
+    hasClipboardData(payload) {
+        return Boolean(payload && (payload.text || payload.html || (Array.isArray(payload.files) && payload.files.length > 0)));
+    }
+    getSelectedPageInfo() {
+        if (!this._selectedPageId) {
+            return null;
+        }
+        return this.pages.get(this._selectedPageId) ?? null;
+    }
+    constructor({ CDP_CONNECT_URL, context }) {
+        super();
+        this.CDP_CONNECT_URL = CDP_CONNECT_URL;
+        this.context = context;
+        this.wsUrlBase = this.CDP_CONNECT_URL.replace(/^http/, "ws") + "/devtools/page/";
+        this.log("🚀 RemoteBrowserService initialized", { CDP_CONNECT_URL });
+        this.context.grantPermissions(["clipboard-read", "clipboard-write"]).catch((error) => {
+            this.log("⚠️ Failed to pre-grant clipboard permissions", { error });
+        });
+        this.initializeListeners();
+    }
+    log(message, data) {
+        const timestamp = new Date().toISOString();
+        console.log(`[${timestamp}] [RemoteBrowserService] ${message}`, data ? JSON.stringify(data, null, 2) : "");
+    }
+    isTransientPageDataError(error) {
+        const message = error instanceof Error ? error.message : typeof error === "string" ? error : undefined;
+        if (!message) {
+            return false;
+        }
+        const transientIndicators = [
+            "Execution context was destroyed",
+            "Execution context is not available",
+            "Cannot find context with specified id",
+            "Target closed",
+            "Navigation interrupted",
+        ];
+        return transientIndicators.some((indicator) => message.includes(indicator));
+    }
+    /**
+     * Gets the CDP Target ID for a page *directly* from the page.
+     * This is the only reliable method during restarts.
+     */
+    async getCdpTargetId(page) {
+        try {
+            if (page.isClosed()) {
+                this.log("⚠️ Attempted to get CDP ID from a closed page");
+                return null;
+            }
+            const cdpSession = await page.context().newCDPSession(page);
+            const { targetInfo } = await cdpSession.send("Target.getTargetInfo");
+            this.log("🔍 Retrieved TargetInfo via CDP session", targetInfo);
+            await cdpSession.detach();
+            if (targetInfo && targetInfo.targetId) {
+                this.log("✅ Found CDP ID by session", { id: targetInfo.targetId, url: page.url() });
+                return targetInfo.targetId;
+            }
+            throw new Error("Target.getTargetInfo did not return a targetId");
+        }
+        catch (error) {
+            this.log("❌ Error getting CDP ID by session", { url: page.url(), error });
+            return null;
+        }
+    }
+    async initializeListeners() {
+        this.log("📡 Initializing listeners");
+        // Initialize with existing pages
+        const existingPages = this.context.pages();
+        this.log("📄 Found existing pages", { count: existingPages.length });
+        for (const page of existingPages) {
+            const stableTabId = uuidv4();
+            const cdpTargetId = await this.getCdpTargetId(page);
+            this.pages.set(stableTabId, {
+                page,
+                cdpTargetId,
+                lastKnownTitle: undefined,
+                lastKnownUrl: page.url(),
+                lastKnownWsDebuggerUrl: cdpTargetId ? `${this.wsUrlBase}${cdpTargetId}` : undefined,
+            });
+            page.on("framenavigated", async () => {
+                try {
+                    await this.ensureClipboardScriptLoaded(page);
+                }
+                catch (err) {
+                    this.log("❌ Error injecting clipboard script on navigation", { stableTabId, error: err });
+                }
+            });
+            // this.log("✅ Existing page added to map", { stableTabId, cdpTargetId, url: page.url() });
+            // this.attachPageLifecycleListeners(page, stableTabId);
+            // this.log("🔍 Attached lifecycle listeners to existing page", { stableTabId });
+        }
+        // if (this.pages.size > 0 && !this._selectedPageId) {
+        //   this._selectedPageId = Array.from(this.pages.keys())[0];
+        // }
+        //   await this.syncState();
+        this.context.on("page", async (page) => {
+            // const stableTabId = uuidv4();
+            // this.log("🆕 New page event triggered", { stableTabId, url: page.url() });
+            //     // We get the ID immediately, but it might be null if the page is too new
+            //     const cdpTargetId = await this.getCdpTargetId(page);
+            //     this.pages.set(stableTabId, {
+            //       page,
+            //       cdpTargetId,
+            //       lastKnownTitle: undefined,
+            //       lastKnownUrl: page.url(),
+            //       lastKnownWsDebuggerUrl: cdpTargetId ? `${this.wsUrlBase}${cdpTargetId}` : undefined,
+            //     });
+            //     if (cdpTargetId) {
+            //       this.log("✅ Page mapped to CDP ID", { stableTabId, cdpTargetId });
+            //     } else {
+            //       this.log("⚠️ Could not find CDP ID for new page yet", { stableTabId });
+            //     }
+            //     if (!this._selectedPageId) {
+            //       // Select the first page that opens
+            //       this._selectedPageId = stableTabId;
+            //       this.log("🎯 Initial selected page set", { selectedPageId: this._selectedPageId });
+            //     }
+            //     this.attachPageLifecycleListeners(page, stableTabId);
+            //     await this.syncState();
+            await this.ensureClipboardScriptLoaded(page);
+        });
+    }
+    // private attachPageLifecycleListeners(page: Page, stableTabId: string) {
+    //   page.on("load", () => this.syncState());
+    //   page.on("framenavigated", () => this.syncState());
+    //   page.on("close", async () => {
+    //     this.log("🗑️ Page close event", { stableTabId });
+    //     this.pages.delete(stableTabId);
+    //     if (this._selectedPageId === stableTabId) {
+    //       this._selectedPageId = this.pages.size > 0 ? Array.from(this.pages.keys())[0] : null;
+    //       this.log("🔄 Selected page changed after close", { newSelectedId: this._selectedPageId });
+    //     }
+    //     await this.syncState();
+    //   });
+    // }
+    // private async syncState() {
+    //   try {
+    //     this.log("🔄 Starting state sync");
+    //     const state = await this.getState();
+    //     this.log("✅ State sync complete", { pagesCount: state.pages.length, selectedPageId: state.selectedPageId });
+    //     this.emit("BrowserService.stateSync", state);
+    //   } catch (error) {
+    //     this.log("❌ Error syncing state", { error });
+    //   }
+    // }
+    // async getState(): Promise<BrowserState> {
+    //   this.log("📊 Getting current state");
+    //   const pagesData: PageData[] = [];
+    //   const pagesToDelete: string[] = []; // To clean up closed pages
+    //   for (const [stableTabId, pageInfo] of this.pages.entries()) {
+    //     const pageData: PageData = {
+    //       id: stableTabId,
+    //       title: pageInfo.lastKnownTitle ?? "",
+    //       url: pageInfo.lastKnownUrl ?? pageInfo.page.url(),
+    //       wsDebuggerUrl: pageInfo.lastKnownWsDebuggerUrl ?? "",
+    //     };
+    //     try {
+    //       if (pageInfo.page.isClosed()) {
+    //         this.log("🧹 Found closed page during getState, marking for deletion", { stableTabId });
+    //         pagesToDelete.push(stableTabId);
+    //         continue;
+    //       }
+    //       // Get the one, true, live CDP ID
+    //       const currentCdpId = await this.getCdpTargetId(pageInfo.page);
+    //       if (currentCdpId && pageInfo.cdpTargetId !== currentCdpId) {
+    //         this.log("🔄 CDP ID changed", { stableTabId, old: pageInfo.cdpTargetId, new: currentCdpId });
+    //         pageInfo.cdpTargetId = currentCdpId; // Update our internal reference
+    //       }
+    //       // Manually construct the WebSocket URL
+    //       const wsDebuggerUrl = currentCdpId
+    //         ? `${this.wsUrlBase}${currentCdpId}`
+    //         : (pageInfo.lastKnownWsDebuggerUrl ?? "");
+    //       if (!wsDebuggerUrl) {
+    //         this.log("⚠️ Could not get CDP ID, wsDebuggerUrl will be empty", { stableTabId });
+    //       }
+    //       const title = await pageInfo.page.title();
+    //       const currentUrl = pageInfo.page.url();
+    //       pageData.title = title;
+    //       pageData.url = currentUrl;
+    //       pageData.wsDebuggerUrl = wsDebuggerUrl; // Use the constructed URL
+    //       pageInfo.lastKnownTitle = title;
+    //       pageInfo.lastKnownUrl = currentUrl;
+    //       pageInfo.lastKnownWsDebuggerUrl = wsDebuggerUrl;
+    //       this.log("🟥Page data", pageData);
+    //     } catch (error) {
+    //       const message = error instanceof Error ? error.message : JSON.stringify(error);
+    //       if (this.isTransientPageDataError(error)) {
+    //         this.log("⏳ Transient error getting page data, will retry", { stableTabId, message });
+    //       } else {
+    //         this.log("❌ Error getting page data", { stableTabId, message });
+    //         pagesToDelete.push(stableTabId); // Mark for deletion
+    //         continue;
+    //       }
+    //     }
+    //     if (!pageData.title) {
+    //       pageData.title = pageInfo.page.url() === "about:blank" ? "" : "Loading...";
+    //     }
+    //     pagesData.push(pageData);
+    //   }
+    //   pagesToDelete.forEach((id) => this.pages.delete(id));
+    //   if (this._selectedPageId && !this.pages.has(this._selectedPageId)) {
+    //     this._selectedPageId = pagesData.length > 0 ? pagesData[0].id : null;
+    //     this.log("🔄 Corrected selectedPageId", { new: this._selectedPageId });
+    //   }
+    //   if (!this._selectedPageId && pagesData.length > 0) {
+    //     this._selectedPageId = pagesData[0].id;
+    //     this.log("🎯 Set default selectedPageId", { new: this._selectedPageId });
+    //   }
+    //   const state = {
+    //     pages: pagesData,
+    //     selectedPageId: this._selectedPageId,
+    //   };
+    //   this.log("📦 Final state", state);
+    //   return state;
+    // }
+    // async createTab(url: string = "about:blank"): Promise<void> {
+    //   try {
+    //     this.log("🆕 Creating new tab", { url });
+    //     const page = await this.context.newPage(); // This will trigger the 'page' event
+    //     if (url !== "about:blank") {
+    //       await page.goto(url, { waitUntil: "domcontentloaded" });
+    //     }
+    //     for (const [stableTabId, pageInfo] of this.pages.entries()) {
+    //       if (pageInfo.page === page) {
+    //         this._selectedPageId = stableTabId;
+    //         this.log("✅ New tab created and selected", { stableTabId, url });
+    //         break;
+    //       }
+    //     }
+    //     await this.syncState();
+    //   } catch (error) {
+    //     this.log("❌ Error creating tab", { error });
+    //   }
+    // }
+    // async closeTab(stableTabId: string): Promise<void> {
+    //   try {
+    //     this.log("🗑️ Closing tab", { stableTabId });
+    //     const pageInfo = this.pages.get(stableTabId);
+    //     if (pageInfo) {
+    //       await pageInfo.page.close(); // This will trigger the 'close' event
+    //     } else {
+    //       this.log("⚠️ Page not found for closing", { stableTabId });
+    //     }
+    //   } catch (error) {
+    //     this.log("❌ Error closing tab", { error });
+    //   }
+    // }
+    // async selectTab(stableTabId: string): Promise<void> {
+    //   try {
+    //     this.log("🎯 Selecting tab", { stableTabId });
+    //     const pageInfo = this.pages.get(stableTabId);
+    //     if (pageInfo) {
+    //       this._selectedPageId = stableTabId;
+    //       await pageInfo.page.bringToFront();
+    //       this.log("✅ Tab selected successfully", { stableTabId });
+    //       await this.syncState();
+    //     } else {
+    //       this.log("⚠️ Page not found for selection", { stableTabId });
+    //     }
+    //   } catch (error) {
+    //     this.log("❌ Error selecting tab", { error });
+    //   }
+    // }
+    getPageInfo(stableTabId) {
+        if (!stableTabId) {
+            this.log("⚠️ Operation requested without a selected tab");
+            return null;
+        }
+        const pageInfo = this.pages.get(stableTabId);
+        if (!pageInfo) {
+            this.log("⚠️ Page not found for operation", { stableTabId });
+            return null;
+        }
+        return pageInfo;
+    }
+    // async navigateTab(stableTabId: string, url: string): Promise<void> {
+    //   const pageInfo = this.getPageInfo(stableTabId);
+    //   if (!pageInfo) {
+    //     return;
+    //   }
+    //   try {
+    //     this.log("🌐 Navigating tab", { stableTabId, url });
+    //     await pageInfo.page.goto(url, { waitUntil: "domcontentloaded" });
+    //     this._selectedPageId = stableTabId;
+    //     await this.syncState();
+    //   } catch (error) {
+    //     this.log("❌ Error navigating tab", { stableTabId, url, error });
+    //     throw error;
+    //   }
+    // }
+    // async reloadTab(stableTabId: string): Promise<void> {
+    //   const pageInfo = this.getPageInfo(stableTabId);
+    //   if (!pageInfo) {
+    //     return;
+    //   }
+    //   try {
+    //     this.log("🔄 Reloading tab", { stableTabId, url: pageInfo.page.url() });
+    //     await pageInfo.page.reload({ waitUntil: "domcontentloaded" });
+    //     await this.syncState();
+    //   } catch (error) {
+    //     this.log("❌ Error reloading tab", { stableTabId, error });
+    //     throw error;
+    //   }
+    // }
+    // async goBack(stableTabId: string): Promise<void> {
+    //   const pageInfo = this.getPageInfo(stableTabId);
+    //   if (!pageInfo) {
+    //     return;
+    //   }
+    //   try {
+    //     this.log("⬅️ Navigating back", { stableTabId });
+    //     const response = await pageInfo.page.goBack({ waitUntil: "domcontentloaded" });
+    //     if (!response) {
+    //       this.log("ℹ️ No history entry to go back to", { stableTabId });
+    //     }
+    //     await this.syncState();
+    //   } catch (error) {
+    //     this.log("❌ Error navigating back", { stableTabId, error });
+    //     throw error;
+    //   }
+    // }
+    // async goForward(stableTabId: string): Promise<void> {
+    //   const pageInfo = this.getPageInfo(stableTabId);
+    //   if (!pageInfo) {
+    //     return;
+    //   }
+    //   try {
+    //     this.log("➡️ Navigating forward", { stableTabId });
+    //     const response = await pageInfo.page.goForward({ waitUntil: "domcontentloaded" });
+    //     if (!response) {
+    //       this.log("ℹ️ No history entry to go forward to", { stableTabId });
+    //     }
+    //     await this.syncState();
+    //   } catch (error) {
+    //     this.log("❌ Error navigating forward", { stableTabId, error });
+    //     throw error;
+    //   }
+    // }
+    async applyClipboardPayload(payload) {
+        this.log("📋 applyClipboardPayload called", {
+            hasText: !!payload?.text,
+            hasHtml: !!payload?.html,
+            hasFiles: !!payload?.files,
+            textLength: payload?.text?.length,
+            htmlLength: payload?.html?.length,
+            filesCount: payload?.files?.length,
+        });
+        const pageInfo = this.getPageInfo(this._selectedPageId);
+        if (!pageInfo) {
+            this.log("⚠️ No active page available for clipboard payload", {
+                selectedPageId: this._selectedPageId,
+                totalPages: this.pages.size,
+            });
+            return;
+        }
+        this.log("📄 Target page info", {
+            stableTabId: this._selectedPageId,
+            url: pageInfo.page.url(),
+            isClosed: pageInfo.page.isClosed(),
+            title: await pageInfo.page.title().catch(() => "unknown"),
+        });
+        try {
+            // Grant permissions first
+            this.log("🔐 Attempting to grant clipboard permissions");
+            await pageInfo.page
+                .context()
+                .grantPermissions(["clipboard-read", "clipboard-write"])
+                .then(() => {
+                this.log("✅ Clipboard permissions granted");
+            })
+                .catch((error) => {
+                this.log("⚠️ Failed to grant clipboard permissions", { error: error.message });
+            });
+            // Apply the clipboard data using the injected function
+            this.log("🚀 Executing clipboard application script", {
+                payloadPreview: {
+                    text: payload?.text?.substring(0, 100),
+                    html: payload?.html?.substring(0, 100),
+                },
+            });
+            const result = await pageInfo.page.evaluate((clipboardData) => {
+                console.log("[RemoteBrowser->Page] Starting clipboard application");
+                console.log("[RemoteBrowser->Page] Payload:", {
+                    hasText: !!clipboardData?.text,
+                    hasHtml: !!clipboardData?.html,
+                    text: clipboardData?.text?.substring(0, 50),
+                    html: clipboardData?.html?.substring(0, 50),
+                });
+                // Check if the function exists
+                if (typeof window.__bvt_applyClipboardData !== "function") {
+                    console.error("[RemoteBrowser->Page] ❌ __bvt_applyClipboardData function not found!");
+                    console.log("[RemoteBrowser->Page] Available window properties:", Object.keys(window).filter((k) => k.includes("bvt")));
+                    return false;
+                }
+                console.log("[RemoteBrowser->Page] ✅ __bvt_applyClipboardData function found, calling it");
+                try {
+                    const result = window.__bvt_applyClipboardData(clipboardData);
+                    console.log("[RemoteBrowser->Page] Function returned:", result);
+                    return result;
+                }
+                catch (error) {
+                    console.error("[RemoteBrowser->Page] ❌ Error calling __bvt_applyClipboardData:", error);
+                    return false;
+                }
+            }, payload);
+            this.log("📊 Clipboard application result", {
+                success: result,
+                selectedPageId: this._selectedPageId,
+            });
+            if (!result) {
+                this.log("⚠️ Clipboard script returned false - data may not have been applied");
+            }
+            else {
+                this.log("✅ Clipboard payload applied successfully");
+            }
+        }
+        catch (error) {
+            this.log("❌ Error applying clipboard payload", {
+                error: error instanceof Error ? error.message : String(error),
+                stack: error instanceof Error ? error.stack : undefined,
+                selectedPageId: this._selectedPageId,
+                pageUrl: pageInfo.page.url(),
+            });
+            throw error;
+        }
+    }
+    async readClipboardPayload() {
+        const pageInfo = this.getSelectedPageInfo();
+        if (!pageInfo) {
+            this.log("⚠️ Cannot read clipboard - no active page", { selectedPageId: this._selectedPageId });
+            return null;
+        }
+        try {
+            await pageInfo.page
+                .context()
+                .grantPermissions(["clipboard-read", "clipboard-write"])
+                .catch((error) => {
+                this.log("⚠️ Failed to ensure clipboard permissions before read", { error });
+            });
+            const payload = await pageInfo.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("[RemoteClipboard] Failed to serialize clipboard blob", { type, error });
+                                }
+                            }
+                        }
+                    }
+                    catch (error) {
+                        console.warn("[RemoteClipboard] 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("[RemoteClipboard] 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;
+            });
+            if (this.hasClipboardData(payload)) {
+                this.log("📋 Remote clipboard payload captured", {
+                    hasText: !!payload.text,
+                    hasHtml: !!payload.html,
+                    fileCount: payload.files?.length ?? 0,
+                });
+                return payload;
+            }
+            this.log("ℹ️ Remote clipboard read returned empty payload", {
+                selectedPageId: this._selectedPageId,
+            });
+            return null;
+        }
+        catch (error) {
+            this.log("❌ Error reading remote clipboard", {
+                error: error instanceof Error ? error.message : String(error),
+            });
+            throw error;
+        }
+    }
+    // Add a helper method to verify clipboard script is loaded
+    async verifyClipboardScript(stableTabId) {
+        const pageInfo = this.pages.get(stableTabId);
+        if (!pageInfo) {
+            this.log("⚠️ Cannot verify clipboard script - page not found", { stableTabId });
+            return false;
+        }
+        try {
+            const isLoaded = await pageInfo.page.evaluate(() => {
+                return (typeof window.__bvt_applyClipboardData === "function" && typeof window.__bvt_reportClipboard === "function");
+            });
+            this.log("🔍 Clipboard script verification", {
+                stableTabId,
+                isLoaded,
+                url: pageInfo.page.url(),
+            });
+            return isLoaded;
+        }
+        catch (error) {
+            this.log("❌ Error verifying clipboard script", {
+                stableTabId,
+                error: error instanceof Error ? error.message : String(error),
+            });
+            return false;
+        }
+    }
+    // Call this after navigation to ensure script is loaded
+    async ensureClipboardScriptLoaded(page) {
+        try {
+            const isLoaded = await page.evaluate(() => {
+                return typeof window.__bvt_applyClipboardData === "function";
+            });
+            if (!isLoaded) {
+                this.log("⚠️ Clipboard script not loaded, attempting to reload");
+                // The script should be in initScripts, so it will load on next navigation
+                // or you could manually inject it here
+            }
+            else {
+                this.log("✅ Clipboard script confirmed loaded");
+            }
+        }
+        catch (error) {
+            this.log("❌ Error checking clipboard script", { error });
+        }
+    }
+    getSelectedPage() {
+        const pageInfo = this.getSelectedPageInfo();
+        this.log("🔍 Getting selected page", {
+            selectedPageId: this._selectedPageId,
+            found: !!pageInfo,
+            url: pageInfo?.page.url(),
         });
-
-        if (action.data.status) {
-          result = action;
-          break;
-        }
-      } catch (error) {
-        if (i === TIMEOUT - 1) {
-          console.error("Timeout while generating step details: ", error);
-        }
-      }
-
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    }
-
-    if (result.status !== 200) {
-      return { success: false, message: "Error while generating step details" };
-    }
-
-    return result.data;
-  }
-
-  async generateCommandName({ command }) {
-    const url = `${getRunsServiceBaseURL()}/generate-step-information/generate-element-name`;
-    const screenshot = this.screenshotMap.get(command.inputID);
-    const result = await axiosClient({
-      url,
-      method: "POST",
-      data: { ...command, screenshot },
-      headers: {
-        Authorization: `Bearer ${this.TOKEN}`,
-        "X-Source": "recorder",
-      },
-    });
-    if (result.status !== 200) {
-      return { success: false, message: "Error while generating command details" };
-    }
-    return result.data;
-  }
+        return pageInfo?.page || null;
+    }
+    destroy() {
+        this.log("💥 Destroying RemoteBrowserService");
+        this.context.removeAllListeners("page");
+        for (const [, pageInfo] of this.pages.entries()) {
+            pageInfo.page.removeAllListeners(); // Remove all listeners from each page
+        }
+        this.pages.clear();
+        this._selectedPageId = null;
+        this.removeAllListeners(); // Remove listeners on the emitter itself
+    }
 }