@browserbasehq/stagehand 1.1.1 → 1.2.0

package/dist/index.js

@@ -8,6 +8,7 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __reflectGet = Reflect.get;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -54,6 +55,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __superGet = (cls, obj, key) => __reflectGet(__getProtoOf(cls), key, obj);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -82,27 +84,29 @@ __export(lib_exports, {
 });
 module.exports = __toCommonJS(lib_exports);
 var import_test = require("@playwright/test");
-var import_crypto = __toESM(require("crypto"));
 var import_fs2 = __toESM(require("fs"));
 var import_sdk2 = require("@browserbasehq/sdk");
 
 // lib/prompt.ts
 var actSystemPrompt = `
 # Instructions
-You are a browser automation assistant. Your job is to accomplish the user's goal across multiple model calls.
+You are a browser automation assistant. Your job is to accomplish the user's goal across multiple model calls by running playwright commands.
 
-You are given:
+## Input
+You will receive:
 1. the user's overall goal
 2. the steps that you've taken so far
 3. a list of active DOM elements in this chunk to consider to get closer to the goal. 
+4. Optionally, a list of variable names that the user has provided that you may use to accomplish the goal. To use the variables, you must use the special <|VARIABLE_NAME|> syntax.
 
-You have 2 tools that you can call: doAction, and skipSection. Do action only performs Playwright actions. Do not perform any other actions.
 
-Note: If there is a popup on the page for cookies or advertising that has nothing to do with the goal, try to close it first before proceeding. As this can block the goal from being completed.
+## Your Goal / Specification
+You have 2 tools that you can call: doAction, and skipSection. Do action only performs Playwright actions. Do exactly what the user's goal is. Do not perform any other actions or exceed the scope of the goal.
+If the user's goal will be accomplished after running the playwright action, set completed to true. Better to have completed set to true if your are not sure.
 
-Also, verify if the goal has been accomplished already. Do this by checking if the goal has been accomplished based on the previous steps completed, the current page DOM elements and the current page URL / starting page URL. If it has, set completed to true and finish the task.
+Note: If there is a popup on the page for cookies or advertising that has nothing to do with the goal, try to close it first before proceeding. As this can block the goal from being completed.
 
-Do exactly what the user's goal is. Do not exceed the scope of the goal.
+Again, if the user's goal will be accomplished after running the playwright action, set completed to true.
 `;
 var verifyActCompletionSystemPrompt = `
 You are a browser automation assistant. The job has given you a goal and a list of steps that have been taken so far. Your job is to determine if the user's goal has been completed based on the provided information.
@@ -156,8 +160,8 @@ function buildActSystemPrompt() {
     content: actSystemPrompt
   };
 }
-function buildActUserPrompt(action, steps = "None", domElements) {
-  const actUserPrompt = `
+function buildActUserPrompt(action, steps = "None", domElements, variables) {
+  let actUserPrompt = `
 # My Goal
 ${action}
 
@@ -167,6 +171,12 @@ ${steps}
 # Current Active Dom Elements
 ${domElements}
 `;
+  if (variables && Object.keys(variables).length > 0) {
+    actUserPrompt += `
+# Variables
+${Object.entries(variables).map(([key, value]) => `<|${key.toUpperCase()}|>`).join("\n")}
+`;
+  }
   return {
     role: "user",
     content: actUserPrompt
@@ -392,6 +402,14 @@ function verifyActCompletion(_0) {
     return response.completed;
   });
 }
+function fillInVariables(text, variables) {
+  let processedText = text;
+  Object.entries(variables).forEach(([key, value]) => {
+    const placeholder = `<|${key.toUpperCase()}|>`;
+    processedText = processedText.replace(placeholder, value);
+  });
+  return processedText;
+}
 function act(_0) {
   return __async(this, arguments, function* ({
     action,
@@ -402,12 +420,13 @@ function act(_0) {
     screenshot,
     retries = 0,
     logger,
-    requestId
+    requestId,
+    variables
   }) {
     const llmClient = llmProvider.getClient(modelName, requestId);
     const messages = [
       buildActSystemPrompt(),
-      buildActUserPrompt(action, steps, domElements)
+      buildActUserPrompt(action, steps, domElements, variables)
     ];
     const response = yield llmClient.createChatCompletion({
       model: modelName,
@@ -583,6 +602,16 @@ var OpenAIClient = class {
   }
   createChatCompletion(options) {
     return __async(this, null, function* () {
+      const _a = options, { image: _ } = _a, optionsWithoutImage = __objRest(_a, ["image"]);
+      this.logger({
+        category: "OpenAI",
+        message: `Creating chat completion with options: ${JSON.stringify(
+          optionsWithoutImage,
+          null,
+          2
+        )}`,
+        level: 1
+      });
       const cacheOptions = {
         model: options.model,
         messages: options.messages,
@@ -596,7 +625,18 @@ var OpenAIClient = class {
       if (this.enableCaching) {
         const cachedResponse = yield this.cache.get(cacheOptions, this.requestId);
         if (cachedResponse) {
+          this.logger({
+            category: "llm_cache",
+            message: `LLM Cache hit - returning cached response`,
+            level: 1
+          });
           return cachedResponse;
+        } else {
+          this.logger({
+            category: "llm_cache",
+            message: `LLM Cache miss - no cached response found`,
+            level: 1
+          });
         }
       }
       if (options.image) {
@@ -614,7 +654,7 @@ var OpenAIClient = class {
         };
         options.messages = [...options.messages, screenshotMessage];
       }
-      const _a = options, { image, response_model } = _a, openAiOptions = __objRest(_a, ["image", "response_model"]);
+      const _b = options, { image, response_model } = _b, openAiOptions = __objRest(_b, ["image", "response_model"]);
       let responseFormat = void 0;
       if (options.response_model) {
         responseFormat = (0, import_zod2.zodResponseFormat)(
@@ -625,6 +665,11 @@ var OpenAIClient = class {
       const response = yield this.client.chat.completions.create(__spreadProps(__spreadValues({}, openAiOptions), {
         response_format: responseFormat
       }));
+      this.logger({
+        category: "OpenAI",
+        message: `Response: ${JSON.stringify(response, null, 2)}`,
+        level: 1
+      });
       if (response_model) {
         const extractedData = response.choices[0].message.content;
         const parsedData = JSON.parse(extractedData);
@@ -660,7 +705,17 @@ var AnthropicClient = class {
   }
   createChatCompletion(options) {
     return __async(this, null, function* () {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _b, _c, _d, _e, _f, _g, _h;
+      const _a = options, { image: _ } = _a, optionsWithoutImage = __objRest(_a, ["image"]);
+      this.logger({
+        category: "Anthropic",
+        message: `Creating chat completion with options: ${JSON.stringify(
+          optionsWithoutImage,
+          null,
+          2
+        )}`,
+        level: 1
+      });
       const cacheOptions = {
         model: options.model,
         messages: options.messages,
@@ -673,7 +728,18 @@ var AnthropicClient = class {
       if (this.enableCaching) {
         const cachedResponse = yield this.cache.get(cacheOptions, this.requestId);
         if (cachedResponse) {
+          this.logger({
+            category: "llm_cache",
+            message: `LLM Cache hit - returning cached response`,
+            level: 1
+          });
           return cachedResponse;
+        } else {
+          this.logger({
+            category: "llm_cache",
+            message: `LLM Cache miss - no cached response found`,
+            level: 1
+          });
         }
       }
       const systemMessage = options.messages.find((msg) => msg.role === "system");
@@ -697,7 +763,7 @@ var AnthropicClient = class {
         };
         options.messages = [...options.messages, screenshotMessage];
       }
-      let anthropicTools = (_a = options.tools) == null ? void 0 : _a.map((tool) => {
+      let anthropicTools = (_b = options.tools) == null ? void 0 : _b.map((tool) => {
         if (tool.type === "function") {
           return {
             name: tool.function.name,
@@ -714,8 +780,8 @@ var AnthropicClient = class {
       let toolDefinition;
       if (options.response_model) {
         const jsonSchema = (0, import_zod_to_json_schema.zodToJsonSchema)(options.response_model.schema);
-        const schemaProperties = ((_c = (_b = jsonSchema.definitions) == null ? void 0 : _b.MySchema) == null ? void 0 : _c.properties) || jsonSchema.properties;
-        const schemaRequired = ((_e = (_d = jsonSchema.definitions) == null ? void 0 : _d.MySchema) == null ? void 0 : _e.required) || jsonSchema.required;
+        const schemaProperties = ((_d = (_c = jsonSchema.definitions) == null ? void 0 : _c.MySchema) == null ? void 0 : _d.properties) || jsonSchema.properties;
+        const schemaRequired = ((_f = (_e = jsonSchema.definitions) == null ? void 0 : _e.MySchema) == null ? void 0 : _f.required) || jsonSchema.required;
         toolDefinition = {
           name: "print_extracted_data",
           description: "Prints the extracted data based on the provided schema.",
@@ -741,6 +807,11 @@ var AnthropicClient = class {
         system: systemMessage == null ? void 0 : systemMessage.content,
         temperature: options.temperature
       });
+      this.logger({
+        category: "Anthropic",
+        message: `Response: ${JSON.stringify(response, null, 2)}`,
+        level: 1
+      });
       const transformedResponse = {
         id: response.id,
         object: "chat.completion",
@@ -751,7 +822,7 @@ var AnthropicClient = class {
             index: 0,
             message: {
               role: "assistant",
-              content: ((_f = response.content.find((c) => c.type === "text")) == null ? void 0 : _f.text) || null,
+              content: ((_g = response.content.find((c) => c.type === "text")) == null ? void 0 : _g.text) || null,
               tool_calls: response.content.filter((c) => c.type === "tool_use").map((toolUse) => ({
                 id: toolUse.id,
                 type: "function",
@@ -785,7 +856,7 @@ var AnthropicClient = class {
         } else {
           if (!options.retries || options.retries < 5) {
             return this.createChatCompletion(__spreadProps(__spreadValues({}, options), {
-              retries: ((_g = options.retries) != null ? _g : 0) + 1
+              retries: ((_h = options.retries) != null ? _h : 0) + 1
             }));
           }
           throw new Error(
@@ -801,24 +872,24 @@ var AnthropicClient = class {
   }
 };
 
-// lib/llm/LLMCache.ts
+// lib/cache/BaseCache.ts
 var fs = __toESM(require("fs"));
 var path = __toESM(require("path"));
 var crypto = __toESM(require("crypto"));
-var LLMCache = class {
-  constructor(logger, cacheDir = path.join(process.cwd(), "tmp", ".cache"), cacheFile = "llm_calls.json") {
+var BaseCache = class {
+  constructor(logger, cacheDir = path.join(process.cwd(), "tmp", ".cache"), cacheFile = "cache.json") {
     this.CACHE_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1e3;
     // 1 week in milliseconds
     this.CLEANUP_PROBABILITY = 0.01;
-    // 1% chance
     this.LOCK_TIMEOUT_MS = 1e3;
-    this.lock_acquired = false;
-    this.count_lock_acquire_failures = 0;
-    this.request_id_to_used_hashes = {};
+    this.lockAcquired = false;
+    this.lockAcquireFailures = 0;
+    // Added for request ID tracking
+    this.requestIdToUsedHashes = {};
     this.logger = logger;
     this.cacheDir = cacheDir;
     this.cacheFile = path.join(cacheDir, cacheFile);
-    this.lockFile = path.join(cacheDir, "llm_cache.lock");
+    this.lockFile = path.join(cacheDir, "cache.lock");
     this.ensureCacheDirectory();
     this.setupProcessHandlers();
   }
@@ -832,11 +903,11 @@ var LLMCache = class {
     process.on("SIGTERM", releaseLockAndExit);
     process.on("uncaughtException", (err) => {
       this.logger({
-        category: "llm_cache",
+        category: "base_cache",
         message: `Uncaught exception: ${err}`,
         level: 2
       });
-      if (this.lock_acquired) {
+      if (this.lockAcquired) {
         releaseLockAndExit();
       }
     });
@@ -844,6 +915,11 @@ var LLMCache = class {
   ensureCacheDirectory() {
     if (!fs.existsSync(this.cacheDir)) {
       fs.mkdirSync(this.cacheDir, { recursive: true });
+      this.logger({
+        category: "base_cache",
+        message: `Created cache directory at ${this.cacheDir}`,
+        level: 1
+      });
     }
   }
   createHash(data) {
@@ -862,25 +938,35 @@ var LLMCache = class {
             const lockAge = Date.now() - fs.statSync(this.lockFile).mtimeMs;
             if (lockAge > this.LOCK_TIMEOUT_MS) {
               fs.unlinkSync(this.lockFile);
+              this.logger({
+                category: "base_cache",
+                message: "Stale lock file removed",
+                level: 1
+              });
             }
           }
           fs.writeFileSync(this.lockFile, process.pid.toString(), { flag: "wx" });
-          this.count_lock_acquire_failures = 0;
-          this.lock_acquired = true;
+          this.lockAcquireFailures = 0;
+          this.lockAcquired = true;
+          this.logger({
+            category: "base_cache",
+            message: "Lock acquired",
+            level: 1
+          });
           return true;
         } catch (error) {
           yield this.sleep(5);
         }
       }
       this.logger({
-        category: "llm_cache",
+        category: "base_cache",
         message: "Failed to acquire lock after timeout",
         level: 2
       });
-      this.count_lock_acquire_failures++;
-      if (this.count_lock_acquire_failures >= 3) {
+      this.lockAcquireFailures++;
+      if (this.lockAcquireFailures >= 3) {
         this.logger({
-          category: "llm_cache",
+          category: "base_cache",
           message: "Failed to acquire lock 3 times in a row. Releasing lock manually.",
           level: 1
         });
@@ -893,111 +979,125 @@ var LLMCache = class {
     try {
       if (fs.existsSync(this.lockFile)) {
         fs.unlinkSync(this.lockFile);
+        this.logger({
+          category: "base_cache",
+          message: "Lock released",
+          level: 1
+        });
       }
-      this.lock_acquired = false;
+      this.lockAcquired = false;
     } catch (error) {
       this.logger({
-        category: "llm_cache",
+        category: "base_cache",
         message: `Error releasing lock: ${error}`,
         level: 2
       });
     }
   }
+  /**
+   * Cleans up stale cache entries that exceed the maximum age.
+   */
+  cleanupStaleEntries() {
+    return __async(this, null, function* () {
+      if (!(yield this.acquireLock())) {
+        this.logger({
+          category: "llm_cache",
+          message: "Failed to acquire lock for cleanup",
+          level: 2
+        });
+        return;
+      }
+      try {
+        const cache = this.readCache();
+        const now = Date.now();
+        let entriesRemoved = 0;
+        for (const [hash, entry] of Object.entries(cache)) {
+          if (now - entry.timestamp > this.CACHE_MAX_AGE_MS) {
+            delete cache[hash];
+            entriesRemoved++;
+          }
+        }
+        if (entriesRemoved > 0) {
+          this.writeCache(cache);
+          this.logger({
+            category: "llm_cache",
+            message: `Cleaned up ${entriesRemoved} stale cache entries`,
+            level: 1
+          });
+        }
+      } catch (error) {
+        this.logger({
+          category: "llm_cache",
+          message: `Error during cache cleanup: ${error}`,
+          level: 2
+        });
+      } finally {
+        this.releaseLock();
+      }
+    });
+  }
   readCache() {
     if (fs.existsSync(this.cacheFile)) {
-      return JSON.parse(fs.readFileSync(this.cacheFile, "utf-8"));
+      try {
+        const data = fs.readFileSync(this.cacheFile, "utf-8");
+        return JSON.parse(data);
+      } catch (error) {
+        this.logger({
+          category: "base_cache",
+          message: `Error reading cache file: ${error}. Resetting cache.`,
+          level: 1
+        });
+        this.resetCache();
+        return {};
+      }
     }
     return {};
   }
   writeCache(cache) {
     try {
-      if (Math.random() < this.CLEANUP_PROBABILITY) {
-        this.cleanupStaleEntries(cache);
-      }
       fs.writeFileSync(this.cacheFile, JSON.stringify(cache, null, 2));
-    } finally {
-      this.releaseLock();
-    }
-  }
-  cleanupStaleEntries(cache) {
-    if (!this.acquireLock()) {
-      this.logger({
-        category: "llm_cache",
-        message: "Failed to acquire lock for cleaning up cache",
-        level: 2
-      });
-      return;
-    }
-    try {
-      const now = Date.now();
-      let entriesRemoved = 0;
-      for (const [hash, entry] of Object.entries(cache)) {
-        if (now - entry.timestamp > this.CACHE_MAX_AGE_MS) {
-          delete cache[hash];
-          entriesRemoved++;
-        }
-      }
-      if (entriesRemoved > 0) {
-        this.logger({
-          category: "llm_cache",
-          message: `Cleaned up ${entriesRemoved} stale cache entries`,
-          level: 1
-        });
-      }
-    } catch (error) {
       this.logger({
-        category: "llm_cache",
-        message: `Error cleaning up stale cache entries: ${error}`,
+        category: "base_cache",
+        message: "Cache written to file",
         level: 1
       });
-    } finally {
-      this.releaseLock();
-    }
-  }
-  resetCache() {
-    if (!this.acquireLock()) {
+    } catch (error) {
       this.logger({
-        category: "llm_cache",
-        message: "Failed to acquire lock for resetting cache",
+        category: "base_cache",
+        message: `Error writing cache file: ${error}`,
         level: 2
       });
-      return;
-    }
-    try {
-      this.ensureCacheDirectory();
-      fs.writeFileSync(this.cacheFile, "{}");
     } finally {
       this.releaseLock();
     }
   }
-  get(options, requestId) {
+  /**
+   * Retrieves data from the cache based on the provided options.
+   * @param hashObj - The options used to generate the cache key.
+   * @param requestId - The identifier for the current request.
+   * @returns The cached data if available, otherwise null.
+   */
+  get(hashObj, requestId) {
     return __async(this, null, function* () {
-      var _a, _b;
       if (!(yield this.acquireLock())) {
         this.logger({
-          category: "llm_cache",
+          category: "base_cache",
           message: "Failed to acquire lock for getting cache",
           level: 2
         });
         return null;
       }
       try {
-        const hash = this.createHash(options);
+        const hash = this.createHash(hashObj);
         const cache = this.readCache();
         if (cache[hash]) {
-          this.logger({
-            category: "llm_cache",
-            message: "Cache hit",
-            level: 1
-          });
-          (_b = (_a = this.request_id_to_used_hashes)[requestId]) != null ? _b : _a[requestId] = [];
-          this.request_id_to_used_hashes[requestId].push(hash);
-          return cache[hash].response;
+          this.trackRequestIdUsage(requestId, hash);
+          return cache[hash].data;
         }
         return null;
       } catch (error) {
         this.logger({
-          category: "llm_cache",
+          category: "base_cache",
           message: `Error getting cache: ${error}. Resetting cache.`,
           level: 1
         });
@@ -1008,82 +1108,189 @@ var LLMCache = class {
       }
     });
   }
-  deleteCacheForRequestId(requestId) {
+  /**
+   * Stores data in the cache based on the provided options and requestId.
+   * @param hashObj - The options used to generate the cache key.
+   * @param data - The data to be cached.
+   * @param requestId - The identifier for the cache entry.
+   */
+  set(hashObj, data, requestId) {
     return __async(this, null, function* () {
-      var _a;
       if (!(yield this.acquireLock())) {
         this.logger({
-          category: "llm_cache",
-          message: "Failed to acquire lock for deleting cache",
+          category: "base_cache",
+          message: "Failed to acquire lock for setting cache",
           level: 2
         });
         return;
       }
       try {
+        const hash = this.createHash(hashObj);
         const cache = this.readCache();
-        let entriesRemoved = [];
-        for (const hash of (_a = this.request_id_to_used_hashes[requestId]) != null ? _a : []) {
-          if (cache[hash]) {
-            entriesRemoved.push(cache[hash]);
-            delete cache[hash];
-          }
-        }
-        this.logger({
-          category: "llm_cache",
-          message: `Deleted ${entriesRemoved.length} cache entries for requestId ${requestId}`,
-          level: 1
-        });
+        cache[hash] = {
+          data,
+          timestamp: Date.now(),
+          requestId
+        };
         this.writeCache(cache);
-      } catch (exception) {
+        this.trackRequestIdUsage(requestId, hash);
+      } catch (error) {
         this.logger({
-          category: "llm_cache",
-          message: `Error deleting cache for requestId ${requestId}: ${exception}`,
+          category: "base_cache",
+          message: `Error setting cache: ${error}. Resetting cache.`,
           level: 1
         });
+        this.resetCache();
       } finally {
         this.releaseLock();
+        if (Math.random() < this.CLEANUP_PROBABILITY) {
+          this.cleanupStaleEntries();
+        }
       }
     });
   }
-  set(options, response, requestId) {
+  delete(hashObj) {
     return __async(this, null, function* () {
-      var _a, _b;
       if (!(yield this.acquireLock())) {
         this.logger({
-          category: "llm_cache",
-          message: "Failed to acquire lock for setting cache",
+          category: "base_cache",
+          message: "Failed to acquire lock for removing cache entry",
           level: 2
         });
         return;
       }
       try {
-        const hash = this.createHash(options);
+        const hash = this.createHash(hashObj);
         const cache = this.readCache();
-        cache[hash] = {
-          response,
-          timestamp: Date.now(),
-          requestId
-        };
-        this.writeCache(cache);
-        (_b = (_a = this.request_id_to_used_hashes)[requestId]) != null ? _b : _a[requestId] = [];
-        this.request_id_to_used_hashes[requestId].push(hash);
+        if (cache[hash]) {
+          delete cache[hash];
+          this.writeCache(cache);
+        } else {
+          this.logger({
+            category: "base_cache",
+            message: "Cache entry not found to delete",
+            level: 1
+          });
+        }
+      } catch (error) {
         this.logger({
-          category: "llm_cache",
-          message: "Cache miss - saved new response",
-          level: 1
+          category: "base_cache",
+          message: `Error removing cache entry: ${error}`,
+          level: 2
         });
+      } finally {
+        this.releaseLock();
+      }
+    });
+  }
+  /**
+   * Tracks the usage of a hash with a specific requestId.
+   * @param requestId - The identifier for the current request.
+   * @param hash - The cache key hash.
+   */
+  trackRequestIdUsage(requestId, hash) {
+    var _a, _b;
+    (_b = (_a = this.requestIdToUsedHashes)[requestId]) != null ? _b : _a[requestId] = [];
+    this.requestIdToUsedHashes[requestId].push(hash);
+  }
+  /**
+   * Deletes all cache entries associated with a specific requestId.
+   * @param requestId - The identifier for the request whose cache entries should be deleted.
+   */
+  deleteCacheForRequestId(requestId) {
+    return __async(this, null, function* () {
+      var _a;
+      if (!(yield this.acquireLock())) {
+        this.logger({
+          category: "base_cache",
+          message: "Failed to acquire lock for deleting cache",
+          level: 2
+        });
+        return;
+      }
+      try {
+        const cache = this.readCache();
+        const hashes = (_a = this.requestIdToUsedHashes[requestId]) != null ? _a : [];
+        let entriesRemoved = 0;
+        for (const hash of hashes) {
+          if (cache[hash]) {
+            delete cache[hash];
+            entriesRemoved++;
+          }
+        }
+        if (entriesRemoved > 0) {
+          this.writeCache(cache);
+        } else {
+          this.logger({
+            category: "base_cache",
+            message: `No cache entries found for requestId ${requestId}`,
+            level: 1
+          });
+        }
+        delete this.requestIdToUsedHashes[requestId];
       } catch (error) {
         this.logger({
-          category: "llm_cache",
-          message: `Error setting cache: ${error}. Resetting cache.`,
-          level: 1
+          category: "base_cache",
+          message: `Error deleting cache for requestId ${requestId}: ${error}`,
+          level: 2
         });
-        this.resetCache();
       } finally {
         this.releaseLock();
       }
     });
   }
+  /**
+   * Resets the entire cache by clearing the cache file.
+   */
+  resetCache() {
+    try {
+      fs.writeFileSync(this.cacheFile, "{}");
+      this.requestIdToUsedHashes = {};
+    } catch (error) {
+      this.logger({
+        category: "base_cache",
+        message: `Error resetting cache: ${error}`,
+        level: 2
+      });
+    } finally {
+      this.releaseLock();
+    }
+  }
+};
+
+// lib/cache/LLMCache.ts
+var LLMCache = class _LLMCache extends BaseCache {
+  constructor(logger, cacheDir, cacheFile) {
+    super(logger, cacheDir, cacheFile || "llm_calls.json");
+  }
+  /**
+   * Overrides the get method to track used hashes by requestId.
+   * @param options - The options used to generate the cache key.
+   * @param requestId - The identifier for the current request.
+   * @returns The cached data if available, otherwise null.
+   */
+  get(options, requestId) {
+    return __async(this, null, function* () {
+      const data = yield __superGet(_LLMCache.prototype, this, "get").call(this, options, requestId);
+      return data;
+    });
+  }
+  /**
+   * Overrides the set method to include cache cleanup logic.
+   * @param options - The options used to generate the cache key.
+   * @param data - The data to be cached.
+   * @param requestId - The identifier for the current request.
+   */
+  set(options, data, requestId) {
+    return __async(this, null, function* () {
+      yield __superGet(_LLMCache.prototype, this, "set").call(this, options, data, requestId);
+      this.logger({
+        category: "llm_cache",
+        message: "Cache miss - saved new response",
+        level: 1
+      });
+    });
+  }
 };
 
 // lib/llm/LLMProvider.ts
@@ -1203,8 +1410,8 @@ var ScreenshotService = class _ScreenshotService {
       const { width, height } = yield image.metadata();
       const svgAnnotations = yield Promise.all(
         Object.entries(this.selectorMap).map(
-          (_0) => __async(this, [_0], function* ([id, selector]) {
-            return this.createElementAnnotation(id, selector);
+          (_0) => __async(this, [_0], function* ([id, selectors]) {
+            return this.createElementAnnotation(id, selectors);
           })
         )
       );
@@ -1226,18 +1433,25 @@ var ScreenshotService = class _ScreenshotService {
       return annotatedScreenshot;
     });
   }
-  createElementAnnotation(id, selector) {
+  createElementAnnotation(id, selectors) {
     return __async(this, null, function* () {
       try {
-        const element = yield this.page.locator(`xpath=${selector}`).first();
-        const box = yield element.boundingBox();
+        let element = null;
+        const selectorPromises = selectors.map(
+          (selector) => __async(this, null, function* () {
+            try {
+              element = yield this.page.locator(`xpath=${selector}`).first();
+              const box2 = yield element.boundingBox({ timeout: 5e3 });
+              return box2;
+            } catch (e) {
+              return null;
+            }
+          })
+        );
+        const boxes = yield Promise.all(selectorPromises);
+        const box = boxes.find((b) => b !== null);
         if (!box) {
-          this.log({
-            category: "Debug",
-            message: `No bounding box for element ${id}`,
-            level: 2
-          });
-          return "";
+          throw new Error(`Unable to create annotation for element ${id}`);
         }
         const scrollPosition = yield this.page.evaluate(() => ({
           scrollX: window.scrollX,
@@ -1264,8 +1478,8 @@ var ScreenshotService = class _ScreenshotService {
       `;
       } catch (error) {
         this.log({
-          category: "Error",
-          message: `Failed to create annotation for element ${id}: ${error}`,
+          category: "Vision",
+          message: `Warning: Failed to create annotation for element ${id}: ${error}, trace: ${error.stack}`,
           level: 0
         });
         return "";
@@ -1317,21 +1531,962 @@ var ScreenshotService = class _ScreenshotService {
   }
 };
 
-// lib/index.ts
-require("dotenv").config({ path: ".env" });
-function getBrowser(apiKey, projectId, env = "LOCAL", headless = false, logger, browserbaseSessionCreateParams, browserbaseResumeSessionID) {
-  return __async(this, null, function* () {
-    if (env === "BROWSERBASE") {
-      if (!apiKey) {
-        logger({
-          category: "Init",
-          message: "BROWSERBASE_API_KEY is required to use BROWSERBASE env. Defaulting to LOCAL.",
-          level: 0
-        });
-        env = "LOCAL";
-      }
-      if (!projectId) {
-        logger({
+// lib/types.ts
+var PlaywrightCommandException = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "PlaywrightCommandException";
+  }
+};
+var PlaywrightCommandMethodNotSupportedException = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "PlaywrightCommandMethodNotSupportedException";
+  }
+};
+
+// lib/cache/ActionCache.ts
+var ActionCache = class _ActionCache extends BaseCache {
+  constructor(logger, cacheDir, cacheFile) {
+    super(logger, cacheDir, cacheFile || "action_cache.json");
+  }
+  addActionStep(_0) {
+    return __async(this, arguments, function* ({
+      url,
+      action,
+      previousSelectors,
+      playwrightCommand,
+      componentString,
+      xpaths,
+      newStepString,
+      completed,
+      requestId
+    }) {
+      this.logger({
+        category: "action_cache",
+        message: `Adding action step to cache: ${action}, requestId: ${requestId}, url: ${url}, previousSelectors: ${previousSelectors}`,
+        level: 1
+      });
+      yield this.set(
+        { url, action, previousSelectors },
+        {
+          playwrightCommand,
+          componentString,
+          xpaths,
+          newStepString,
+          completed,
+          previousSelectors,
+          action
+        },
+        requestId
+      );
+    });
+  }
+  /**
+   * Retrieves all actions for a specific trajectory.
+   * @param trajectoryId - Unique identifier for the trajectory.
+   * @param requestId - The identifier for the current request.
+   * @returns An array of TrajectoryEntry objects or null if not found.
+   */
+  getActionStep(_0) {
+    return __async(this, arguments, function* ({
+      url,
+      action,
+      previousSelectors,
+      requestId
+    }) {
+      const data = yield __superGet(_ActionCache.prototype, this, "get").call(this, { url, action, previousSelectors }, requestId);
+      if (!data) {
+        return null;
+      }
+      return data;
+    });
+  }
+  removeActionStep(cacheHashObj) {
+    return __async(this, null, function* () {
+      yield __superGet(_ActionCache.prototype, this, "delete").call(this, cacheHashObj);
+    });
+  }
+  /**
+   * Clears all actions for a specific trajectory.
+   * @param trajectoryId - Unique identifier for the trajectory.
+   * @param requestId - The identifier for the current request.
+   */
+  clearAction(requestId) {
+    return __async(this, null, function* () {
+      yield __superGet(_ActionCache.prototype, this, "deleteCacheForRequestId").call(this, requestId);
+      this.logger({
+        category: "action_cache",
+        message: `Cleared action for ID: ${requestId}`,
+        level: 1
+      });
+    });
+  }
+  /**
+   * Resets the entire action cache.
+   */
+  resetCache() {
+    return __async(this, null, function* () {
+      yield __superGet(_ActionCache.prototype, this, "resetCache").call(this);
+      this.logger({
+        category: "action_cache",
+        message: "Action cache has been reset.",
+        level: 1
+      });
+    });
+  }
+};
+
+// lib/utils.ts
+var import_crypto = __toESM(require("crypto"));
+function generateId(operation) {
+  return import_crypto.default.createHash("sha256").update(operation).digest("hex");
+}
+
+// lib/handlers/actHandler.ts
+var StagehandActHandler = class {
+  constructor({
+    stagehand,
+    verbose,
+    llmProvider,
+    enableCaching,
+    logger,
+    waitForSettledDom,
+    defaultModelName,
+    startDomDebug,
+    cleanupDomDebug
+  }) {
+    this.stagehand = stagehand;
+    this.verbose = verbose;
+    this.llmProvider = llmProvider;
+    this.enableCaching = enableCaching;
+    this.logger = logger;
+    this.waitForSettledDom = waitForSettledDom;
+    this.actionCache = new ActionCache(this.logger);
+    this.defaultModelName = defaultModelName;
+    this.startDomDebug = startDomDebug;
+    this.cleanupDomDebug = cleanupDomDebug;
+    this.actions = {};
+  }
+  _recordAction(action, result) {
+    return __async(this, null, function* () {
+      const id = generateId(action);
+      this.actions[id] = { result, action };
+      return id;
+    });
+  }
+  _verifyActionCompletion(_0) {
+    return __async(this, arguments, function* ({
+      completed,
+      verifierUseVision,
+      requestId,
+      action,
+      steps,
+      model,
+      domSettleTimeoutMs
+    }) {
+      yield this.waitForSettledDom(domSettleTimeoutMs);
+      const { selectorMap } = yield this.stagehand.page.evaluate(() => {
+        return window.processAllOfDom();
+      });
+      let actionCompleted = false;
+      if (completed) {
+        this.stagehand.log({
+          category: "action",
+          message: `Action marked as completed, Verifying if this is true...`,
+          level: 1
+        });
+        let domElements = void 0;
+        let fullpageScreenshot = void 0;
+        if (verifierUseVision) {
+          try {
+            const screenshotService = new ScreenshotService(
+              this.stagehand.page,
+              selectorMap,
+              this.verbose
+            );
+            fullpageScreenshot = yield screenshotService.getScreenshot(true, 15);
+          } catch (e) {
+            this.stagehand.log({
+              category: "action",
+              message: `Error getting full page screenshot: ${e.message}
+. Trying again...`,
+              level: 1
+            });
+            const screenshotService = new ScreenshotService(
+              this.stagehand.page,
+              selectorMap,
+              this.verbose
+            );
+            fullpageScreenshot = yield screenshotService.getScreenshot(true, 15);
+          }
+        } else {
+          ({ outputString: domElements } = yield this.stagehand.page.evaluate(
+            () => {
+              return window.processAllOfDom();
+            }
+          ));
+        }
+        actionCompleted = yield verifyActCompletion({
+          goal: action,
+          steps,
+          llmProvider: this.llmProvider,
+          modelName: model,
+          screenshot: fullpageScreenshot,
+          domElements,
+          logger: this.logger,
+          requestId
+        });
+        this.stagehand.log({
+          category: "action",
+          message: `Action completion verification result: ${actionCompleted}`,
+          level: 1
+        });
+      }
+      return actionCompleted;
+    });
+  }
+  _performPlaywrightMethod(method, args, xpath, domSettleTimeoutMs) {
+    return __async(this, null, function* () {
+      const locator = this.stagehand.page.locator(`xpath=${xpath}`).first();
+      const initialUrl = this.stagehand.page.url();
+      if (method === "scrollIntoView") {
+        this.stagehand.log({
+          category: "action",
+          message: `Scrolling element into view`,
+          level: 2
+        });
+        try {
+          yield locator.evaluate((element) => {
+            element.scrollIntoView({ behavior: "smooth", block: "center" });
+          }).catch((e) => {
+            this.stagehand.log({
+              category: "action",
+              message: `Error scrolling element into view: ${e.message}
+Trace: ${e.stack}`,
+              level: 1
+            });
+          });
+        } catch (e) {
+          this.stagehand.log({
+            category: "action",
+            message: `Error scrolling element into view: ${e.message}
+Trace: ${e.stack}`,
+            level: 1
+          });
+          throw new PlaywrightCommandException(e.message);
+        }
+      } else if (method === "fill" || method === "type") {
+        try {
+          yield locator.fill("");
+          yield locator.click();
+          const text = args[0];
+          for (const char of text) {
+            yield this.stagehand.page.keyboard.type(char, {
+              delay: Math.random() * 50 + 25
+            });
+          }
+        } catch (e) {
+          this.logger({
+            category: "action",
+            message: `Error filling element: ${e.message}
+Trace: ${e.stack}`,
+            level: 1
+          });
+          throw new PlaywrightCommandException(e.message);
+        }
+      } else if (method === "press") {
+        try {
+          const key = args[0];
+          yield this.stagehand.page.keyboard.press(key);
+        } catch (e) {
+          this.logger({
+            category: "action",
+            message: `Error pressing key: ${e.message}
+Trace: ${e.stack}`,
+            level: 1
+          });
+          throw new PlaywrightCommandException(e.message);
+        }
+      } else if (typeof locator[method] === "function") {
+        this.logger({
+          category: "action",
+          message: `Page URL before action: ${this.stagehand.page.url()}`,
+          level: 2
+        });
+        try {
+          yield locator[method](...args);
+        } catch (e) {
+          this.logger({
+            category: "action",
+            message: `Error performing method ${method} with args ${JSON.stringify(
+              args
+            )}: ${e.message}
+Trace: ${e.stack}`,
+            level: 1
+          });
+          throw new PlaywrightCommandException(e.message);
+        }
+        if (method === "click") {
+          this.logger({
+            category: "action",
+            message: `Clicking element, checking for page navigation`,
+            level: 1
+          });
+          const newOpenedTab = yield Promise.race([
+            new Promise((resolve) => {
+              this.stagehand.context.once("page", (page) => resolve(page));
+              setTimeout(() => resolve(null), 1500);
+            })
+          ]);
+          this.logger({
+            category: "action",
+            message: `Clicked element, ${newOpenedTab ? "opened a new tab" : "no new tabs opened"}`,
+            level: 1
+          });
+          if (newOpenedTab) {
+            this.logger({
+              category: "action",
+              message: `New page detected (new tab) with URL: ${newOpenedTab.url()}`,
+              level: 1
+            });
+            yield newOpenedTab.close();
+            yield this.stagehand.page.goto(newOpenedTab.url());
+            yield this.stagehand.page.waitForLoadState("domcontentloaded");
+            yield this.waitForSettledDom(domSettleTimeoutMs);
+          }
+          yield Promise.race([
+            this.stagehand.page.waitForLoadState("networkidle"),
+            new Promise((resolve) => setTimeout(resolve, 5e3))
+          ]).catch((e) => {
+            this.logger({
+              category: "action",
+              message: `Network idle timeout hit`,
+              level: 1
+            });
+          });
+          this.logger({
+            category: "action",
+            message: `Finished waiting for (possible) page navigation`,
+            level: 1
+          });
+          if (this.stagehand.page.url() !== initialUrl) {
+            this.logger({
+              category: "action",
+              message: `New page detected with URL: ${this.stagehand.page.url()}`,
+              level: 1
+            });
+          }
+        }
+      } else {
+        this.logger({
+          category: "action",
+          message: `Chosen method ${method} is invalid`,
+          level: 1
+        });
+        throw new PlaywrightCommandMethodNotSupportedException(
+          `Method ${method} not supported`
+        );
+      }
+      yield this.waitForSettledDom(domSettleTimeoutMs);
+    });
+  }
+  _getComponentString(locator) {
+    return __async(this, null, function* () {
+      return yield locator.evaluate((el) => {
+        const clone = el.cloneNode(true);
+        const attributesToKeep = [
+          "type",
+          "name",
+          "placeholder",
+          "aria-label",
+          "role",
+          "href",
+          "title",
+          "alt"
+        ];
+        Array.from(clone.attributes).forEach((attr) => {
+          if (!attributesToKeep.includes(attr.name)) {
+            clone.removeAttribute(attr.name);
+          }
+        });
+        const outerHtml = clone.outerHTML;
+        return outerHtml.trim().replace(/\s+/g, " ");
+      });
+    });
+  }
+  getElement(xpath, timeout = 5e3) {
+    return __async(this, null, function* () {
+      try {
+        const element = this.stagehand.page.locator(`xpath=${xpath}`).first();
+        yield element.waitFor({ state: "attached", timeout });
+        return element;
+      } catch (e) {
+        this.logger({
+          category: "action",
+          message: `Element with XPath ${xpath} not found within ${timeout}ms.`,
+          level: 1
+        });
+        return null;
+      }
+    });
+  }
+  _checkIfCachedStepIsValid_oneXpath(cachedStep) {
+    return __async(this, null, function* () {
+      this.logger({
+        category: "action",
+        message: `Checking if cached step is valid: ${cachedStep.xpath}, ${cachedStep.savedComponentString}`,
+        level: 1
+      });
+      try {
+        const locator = yield this.getElement(cachedStep.xpath);
+        if (!locator) {
+          this.logger({
+            category: "action",
+            message: `Locator not found for xpath: ${cachedStep.xpath}`,
+            level: 1
+          });
+          return false;
+        }
+        this.logger({
+          category: "action",
+          message: `locator element: ${yield this._getComponentString(locator)}`,
+          level: 1
+        });
+        let currentComponent = yield this._getComponentString(locator);
+        this.logger({
+          category: "action",
+          message: `Current text: ${currentComponent}`,
+          level: 1
+        });
+        if (!currentComponent || !cachedStep.savedComponentString) {
+          this.logger({
+            category: "action",
+            message: `Current text or cached text is undefined`,
+            level: 1
+          });
+          return false;
+        }
+        const normalizedCurrentText = currentComponent.trim().replace(/\s+/g, " ");
+        const normalizedCachedText = cachedStep.savedComponentString.trim().replace(/\s+/g, " ");
+        if (normalizedCurrentText !== normalizedCachedText) {
+          this.logger({
+            category: "action",
+            message: `Current text and cached text do not match: ${normalizedCurrentText} !== ${normalizedCachedText}`,
+            level: 1
+          });
+          return false;
+        }
+        return true;
+      } catch (e) {
+        this.logger({
+          category: "action",
+          message: `Error checking if cached step is valid: ${e.message}
+Trace: ${e.stack}`,
+          level: 1
+        });
+        return false;
+      }
+    });
+  }
+  _getValidCachedStepXpath(cachedStep) {
+    return __async(this, null, function* () {
+      const reversedXpaths = [...cachedStep.xpaths].reverse();
+      for (const xpath of reversedXpaths) {
+        const isValid = yield this._checkIfCachedStepIsValid_oneXpath({
+          xpath,
+          savedComponentString: cachedStep.savedComponentString
+        });
+        if (isValid) {
+          return xpath;
+        }
+      }
+      return null;
+    });
+  }
+  _runCachedActionIfAvailable(_0) {
+    return __async(this, arguments, function* ({
+      action,
+      previousSelectors,
+      requestId,
+      steps,
+      chunksSeen,
+      modelName,
+      useVision,
+      verifierUseVision,
+      retries,
+      variables,
+      model,
+      domSettleTimeoutMs
+    }) {
+      const cacheObj = {
+        url: this.stagehand.page.url(),
+        action,
+        previousSelectors,
+        requestId
+      };
+      this.logger({
+        category: "action",
+        message: `Checking action cache for: ${JSON.stringify(cacheObj)}`,
+        level: 1
+      });
+      const cachedStep = yield this.actionCache.getActionStep(cacheObj);
+      if (!cachedStep) {
+        this.logger({
+          category: "action",
+          message: `Action cache miss: ${JSON.stringify(cacheObj)}`,
+          level: 1
+        });
+        return null;
+      }
+      this.logger({
+        category: "action",
+        message: `Action cache semi-hit: ${cachedStep.playwrightCommand.method} with args: ${JSON.stringify(
+          cachedStep.playwrightCommand.args
+        )}`,
+        level: 1
+      });
+      try {
+        const validXpath = yield this._getValidCachedStepXpath({
+          xpaths: cachedStep.xpaths,
+          savedComponentString: cachedStep.componentString
+        });
+        this.logger({
+          category: "action",
+          message: `Cached action step is valid: ${validXpath !== null}`,
+          level: 1
+        });
+        if (!validXpath) {
+          this.logger({
+            category: "action",
+            message: `Cached action step is invalid, removing...`,
+            level: 1
+          });
+          yield this.actionCache.removeActionStep(cacheObj);
+          return null;
+        }
+        this.logger({
+          category: "action",
+          message: `Action Cache Hit: ${cachedStep.playwrightCommand.method} with args: ${JSON.stringify(
+            cachedStep.playwrightCommand.args
+          )}`,
+          level: 1
+        });
+        cachedStep.playwrightCommand.args = cachedStep.playwrightCommand.args.map(
+          (arg) => {
+            return fillInVariables(arg, variables);
+          }
+        );
+        yield this._performPlaywrightMethod(
+          cachedStep.playwrightCommand.method,
+          cachedStep.playwrightCommand.args,
+          validXpath,
+          domSettleTimeoutMs
+        );
+        steps = steps + cachedStep.newStepString;
+        const { outputString, selectorMap } = yield this.stagehand.page.evaluate(
+          ({ chunksSeen: chunksSeen2 }) => {
+            return window.processDom(chunksSeen2);
+          },
+          { chunksSeen }
+        );
+        if (cachedStep.completed) {
+          let actionCompleted = yield this._verifyActionCompletion({
+            completed: true,
+            verifierUseVision,
+            model,
+            steps,
+            requestId,
+            action,
+            domSettleTimeoutMs
+          });
+          this.logger({
+            category: "action",
+            message: `Action completion verification result from cache: ${actionCompleted}`,
+            level: 1
+          });
+          if (actionCompleted) {
+            return {
+              success: true,
+              message: "Action completed successfully using cached step",
+              action
+            };
+          }
+        }
+        return this.act({
+          action,
+          steps,
+          chunksSeen,
+          modelName,
+          useVision,
+          verifierUseVision,
+          retries,
+          requestId,
+          variables,
+          previousSelectors: [...previousSelectors, cachedStep.xpaths[0]],
+          skipActionCacheForThisStep: false,
+          domSettleTimeoutMs
+        });
+      } catch (exception) {
+        this.logger({
+          category: "action",
+          message: `Error performing cached action step: ${exception.message}
+Trace: ${exception.stack}`,
+          level: 1
+        });
+        yield this.actionCache.removeActionStep(cacheObj);
+        return null;
+      }
+    });
+  }
+  act(_0) {
+    return __async(this, arguments, function* ({
+      action,
+      steps = "",
+      chunksSeen,
+      modelName,
+      useVision,
+      verifierUseVision,
+      retries = 0,
+      requestId,
+      variables,
+      previousSelectors,
+      skipActionCacheForThisStep = false,
+      domSettleTimeoutMs
+    }) {
+      var _a;
+      try {
+        yield this.waitForSettledDom(domSettleTimeoutMs);
+        yield this.startDomDebug();
+        const model = modelName != null ? modelName : this.defaultModelName;
+        if (this.enableCaching && !skipActionCacheForThisStep) {
+          const response2 = yield this._runCachedActionIfAvailable({
+            action,
+            previousSelectors,
+            requestId,
+            steps,
+            chunksSeen,
+            modelName: model,
+            useVision,
+            verifierUseVision,
+            retries,
+            variables,
+            model,
+            domSettleTimeoutMs
+          });
+          if (response2 !== null) {
+            return response2;
+          } else {
+            return this.act({
+              action,
+              steps,
+              chunksSeen,
+              modelName,
+              useVision,
+              verifierUseVision,
+              retries,
+              requestId,
+              variables,
+              previousSelectors,
+              skipActionCacheForThisStep: true,
+              domSettleTimeoutMs
+            });
+          }
+        }
+        if (!modelsWithVision.includes(model) && (useVision !== false || verifierUseVision)) {
+          this.logger({
+            category: "action",
+            message: `${model} does not support vision, but useVision was set to ${useVision}. Defaulting to false.`,
+            level: 1
+          });
+          useVision = false;
+          verifierUseVision = false;
+        }
+        this.logger({
+          category: "action",
+          message: `Running / Continuing action: ${action} on page: ${this.stagehand.page.url()}`,
+          level: 2
+        });
+        this.logger({
+          category: "action",
+          message: `Processing DOM...`,
+          level: 2
+        });
+        const { outputString, selectorMap, chunk, chunks } = yield this.stagehand.page.evaluate(
+          ({ chunksSeen: chunksSeen2 }) => {
+            return window.processDom(chunksSeen2);
+          },
+          { chunksSeen }
+        );
+        this.logger({
+          category: "action",
+          message: `Looking at chunk ${chunk}. Chunks left: ${chunks.length - chunksSeen.length}`,
+          level: 1
+        });
+        let annotatedScreenshot;
+        if (useVision === true) {
+          if (!modelsWithVision.includes(model)) {
+            this.logger({
+              category: "action",
+              message: `${model} does not support vision. Skipping vision processing.`,
+              level: 1
+            });
+          } else {
+            const screenshotService = new ScreenshotService(
+              this.stagehand.page,
+              selectorMap,
+              this.verbose
+            );
+            annotatedScreenshot = yield screenshotService.getAnnotatedScreenshot(false);
+          }
+        }
+        const response = yield act({
+          action,
+          domElements: outputString,
+          steps,
+          llmProvider: this.llmProvider,
+          modelName: model,
+          screenshot: annotatedScreenshot,
+          logger: this.logger,
+          requestId,
+          variables
+        });
+        this.logger({
+          category: "action",
+          message: `Received response from LLM: ${JSON.stringify(response)}`,
+          level: 1
+        });
+        yield this.cleanupDomDebug();
+        if (!response) {
+          if (chunksSeen.length + 1 < chunks.length) {
+            chunksSeen.push(chunk);
+            this.logger({
+              category: "action",
+              message: `No action found in current chunk. Chunks seen: ${chunksSeen.length}.`,
+              level: 1
+            });
+            return this.act({
+              action,
+              steps: steps + (!steps.endsWith("\n") ? "\n" : "") + "## Step: Scrolled to another section\n",
+              chunksSeen,
+              modelName,
+              useVision,
+              verifierUseVision,
+              requestId,
+              variables,
+              previousSelectors,
+              skipActionCacheForThisStep,
+              domSettleTimeoutMs
+            });
+          } else if (useVision === "fallback") {
+            this.logger({
+              category: "action",
+              message: `Switching to vision-based processing`,
+              level: 1
+            });
+            yield this.stagehand.page.evaluate(() => window.scrollToHeight(0));
+            return yield this.act({
+              action,
+              steps,
+              chunksSeen,
+              modelName,
+              useVision: true,
+              verifierUseVision,
+              requestId,
+              variables,
+              previousSelectors,
+              skipActionCacheForThisStep,
+              domSettleTimeoutMs
+            });
+          } else {
+            if (this.enableCaching) {
+              this.llmProvider.cleanRequestCache(requestId);
+              this.actionCache.deleteCacheForRequestId(requestId);
+            }
+            return {
+              success: false,
+              message: `Action was not able to be completed.`,
+              action
+            };
+          }
+        }
+        const elementId = response["element"];
+        const xpaths = selectorMap[elementId];
+        const method = response["method"];
+        const args = response["args"];
+        const elementLines = outputString.split("\n");
+        const elementText = ((_a = elementLines.find((line) => line.startsWith(`${elementId}:`))) == null ? void 0 : _a.split(":")[1]) || "Element not found";
+        this.logger({
+          category: "action",
+          message: `Executing method: ${method} on element: ${elementId} (xpaths: ${xpaths.join(
+            ", "
+          )}) with args: ${JSON.stringify(args)}`,
+          level: 1
+        });
+        try {
+          const initialUrl = this.stagehand.page.url();
+          const locator = this.stagehand.page.locator(`xpath=${xpaths[0]}`).first();
+          const originalUrl = this.stagehand.page.url();
+          const componentString = yield this._getComponentString(locator);
+          const responseArgs = [...args];
+          if (variables) {
+            responseArgs.forEach((arg, index) => {
+              if (typeof arg === "string") {
+                args[index] = fillInVariables(arg, variables);
+              }
+            });
+          }
+          yield this._performPlaywrightMethod(
+            method,
+            args,
+            xpaths[0],
+            domSettleTimeoutMs
+          );
+          const newStepString = (!steps.endsWith("\n") ? "\n" : "") + `## Step: ${response.step}
+  Element: ${elementText}
+  Action: ${response.method}
+  Reasoning: ${response.why}
+`;
+          steps += newStepString;
+          if (this.enableCaching) {
+            this.actionCache.addActionStep({
+              action,
+              url: originalUrl,
+              previousSelectors,
+              playwrightCommand: {
+                method,
+                args: responseArgs
+              },
+              componentString,
+              requestId,
+              xpaths,
+              newStepString,
+              completed: response.completed
+            }).catch((e) => {
+              this.logger({
+                category: "action",
+                message: `Error adding action step to cache: ${e.message}
+Trace: ${e.stack}`,
+                level: 1
+              });
+            });
+          }
+          if (this.stagehand.page.url() !== initialUrl) {
+            steps += `  Result (Important): Page URL changed from ${initialUrl} to ${this.stagehand.page.url()}
+
+`;
+          }
+          const actionCompleted = yield this._verifyActionCompletion({
+            completed: response.completed,
+            verifierUseVision,
+            requestId,
+            action,
+            steps,
+            model,
+            domSettleTimeoutMs
+          });
+          if (!actionCompleted) {
+            this.logger({
+              category: "action",
+              message: `Continuing to next action step`,
+              level: 1
+            });
+            return this.act({
+              action,
+              steps,
+              modelName,
+              chunksSeen,
+              useVision,
+              verifierUseVision,
+              requestId,
+              variables,
+              previousSelectors: [...previousSelectors, xpaths[0]],
+              skipActionCacheForThisStep: false,
+              domSettleTimeoutMs
+            });
+          } else {
+            this.logger({
+              category: "action",
+              message: `Action completed successfully`,
+              level: 1
+            });
+            yield this._recordAction(action, response.step);
+            return {
+              success: true,
+              message: `Action completed successfully: ${steps}${response.step}`,
+              action
+            };
+          }
+        } catch (error) {
+          this.logger({
+            category: "action",
+            message: `Error performing action - D (Retries: ${retries}): ${error.message}
+Trace: ${error.stack}`,
+            level: 1
+          });
+          if (retries < 2) {
+            return this.act({
+              action,
+              steps,
+              modelName,
+              useVision,
+              verifierUseVision,
+              retries: retries + 1,
+              chunksSeen,
+              requestId,
+              variables,
+              previousSelectors,
+              skipActionCacheForThisStep,
+              domSettleTimeoutMs
+            });
+          }
+          yield this._recordAction(action, "");
+          if (this.enableCaching) {
+            this.llmProvider.cleanRequestCache(requestId);
+            this.actionCache.deleteCacheForRequestId(requestId);
+          }
+          return {
+            success: false,
+            message: `Error performing action - A: ${error.message}`,
+            action
+          };
+        }
+      } catch (error) {
+        this.logger({
+          category: "action",
+          message: `Error performing action - B: ${error.message}
+Trace: ${error.stack}`,
+          level: 1
+        });
+        if (this.enableCaching) {
+          this.llmProvider.cleanRequestCache(requestId);
+          this.actionCache.deleteCacheForRequestId(requestId);
+        }
+        return {
+          success: false,
+          message: `Error performing action - C: ${error.message}`,
+          action
+        };
+      }
+    });
+  }
+};
+
+// lib/index.ts
+require("dotenv").config({ path: ".env" });
+function getBrowser(apiKey, projectId, env = "LOCAL", headless = false, logger, browserbaseSessionCreateParams, browserbaseResumeSessionID) {
+  return __async(this, null, function* () {
+    if (env === "BROWSERBASE") {
+      if (!apiKey) {
+        logger({
+          category: "Init",
+          message: "BROWSERBASE_API_KEY is required to use BROWSERBASE env. Defaulting to LOCAL.",
+          level: 0
+        });
+        env = "LOCAL";
+      }
+      if (!projectId) {
+        logger({
           category: "Init",
           message: "BROWSERBASE_PROJECT_ID is required for some Browserbase features that may not work without it.",
           level: 1
@@ -1507,20 +2662,31 @@ var Stagehand = class {
     this.llmProvider = llmProvider || new LLMProvider(this.logger, this.enableCaching);
     this.env = env;
     this.observations = {};
-    this.apiKey = apiKey;
-    this.projectId = projectId;
-    this.actions = {};
+    this.apiKey = apiKey != null ? apiKey : process.env.BROWSERBASE_API_KEY;
+    this.projectId = projectId != null ? projectId : process.env.BROWSERBASE_PROJECT_ID;
     this.verbose = verbose != null ? verbose : 0;
     this.debugDom = debugDom != null ? debugDom : false;
     this.defaultModelName = "gpt-4o";
     this.domSettleTimeoutMs = domSettleTimeoutMs != null ? domSettleTimeoutMs : 3e4;
     this.headless = headless != null ? headless : false;
     this.browserBaseSessionCreateParams = browserBaseSessionCreateParams;
+    this.actHandler = new StagehandActHandler({
+      stagehand: this,
+      verbose: this.verbose,
+      llmProvider: this.llmProvider,
+      enableCaching: this.enableCaching,
+      logger: this.logger,
+      waitForSettledDom: this._waitForSettledDom.bind(this),
+      defaultModelName: this.defaultModelName,
+      startDomDebug: this.startDomDebug.bind(this),
+      cleanupDomDebug: this.cleanupDomDebug.bind(this)
+    });
     this.browserbaseResumeSessionID = browserbaseResumeSessionID;
   }
   init() {
     return __async(this, arguments, function* ({
-      modelName = "gpt-4o"
+      modelName = "gpt-4o",
+      domSettleTimeoutMs
     } = {}) {
       const { context, debugUrl, sessionUrl } = yield getBrowser(
         this.apiKey,
@@ -1536,7 +2702,10 @@ var Stagehand = class {
       });
       this.context = context;
       this.page = context.pages()[0];
+      yield this.page.waitForLoadState("domcontentloaded");
+      yield this._waitForSettledDom();
       this.defaultModelName = modelName;
+      this.domSettleTimeoutMs = domSettleTimeoutMs != null ? domSettleTimeoutMs : this.domSettleTimeoutMs;
       const originalGoto = this.page.goto.bind(this.page);
       this.page.goto = (url, options) => __async(this, null, function* () {
         const result = yield originalGoto(url, options);
@@ -1547,14 +2716,33 @@ var Stagehand = class {
       if (this.headless) {
         yield this.page.setViewportSize({ width: 1280, height: 720 });
       }
-      yield this.page.addInitScript({
-        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "process.js")
+      yield this.context.addInitScript({
+        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "xpathUtils.js"),
+        content: import_fs2.default.readFileSync(
+          import_path2.default.join(__dirname, "..", "dist", "dom", "build", "xpathUtils.js"),
+          "utf8"
+        )
+      });
+      yield this.context.addInitScript({
+        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "process.js"),
+        content: import_fs2.default.readFileSync(
+          import_path2.default.join(__dirname, "..", "dist", "dom", "build", "process.js"),
+          "utf8"
+        )
       });
-      yield this.page.addInitScript({
-        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "utils.js")
+      yield this.context.addInitScript({
+        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "utils.js"),
+        content: import_fs2.default.readFileSync(
+          import_path2.default.join(__dirname, "..", "dist", "dom", "build", "utils.js"),
+          "utf8"
+        )
       });
-      yield this.page.addInitScript({
-        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "debug.js")
+      yield this.context.addInitScript({
+        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "debug.js"),
+        content: import_fs2.default.readFileSync(
+          import_path2.default.join(__dirname, "..", "dist", "dom", "build", "debug.js"),
+          "utf8"
+        )
       });
       return { debugUrl, sessionUrl };
     });
@@ -1574,14 +2762,33 @@ var Stagehand = class {
       if (this.headless) {
         yield this.page.setViewportSize({ width: 1280, height: 720 });
       }
-      yield this.page.addInitScript({
-        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "process.js")
+      yield this.context.addInitScript({
+        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "xpathUtils.js"),
+        content: import_fs2.default.readFileSync(
+          import_path2.default.join(__dirname, "..", "dist", "dom", "build", "xpathUtils.js"),
+          "utf8"
+        )
+      });
+      yield this.context.addInitScript({
+        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "process.js"),
+        content: import_fs2.default.readFileSync(
+          import_path2.default.join(__dirname, "..", "dist", "dom", "build", "process.js"),
+          "utf8"
+        )
       });
-      yield this.page.addInitScript({
-        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "utils.js")
+      yield this.context.addInitScript({
+        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "utils.js"),
+        content: import_fs2.default.readFileSync(
+          import_path2.default.join(__dirname, "..", "dist", "dom", "build", "utils.js"),
+          "utf8"
+        )
       });
-      yield this.page.addInitScript({
-        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "debug.js")
+      yield this.context.addInitScript({
+        path: import_path2.default.join(__dirname, "..", "dist", "dom", "build", "debug.js"),
+        content: import_fs2.default.readFileSync(
+          import_path2.default.join(__dirname, "..", "dist", "dom", "build", "debug.js"),
+          "utf8"
+        )
       });
       return { context: this.context };
     });
@@ -1720,24 +2927,13 @@ Trace: ${e.stack}`,
       }
     });
   }
-  // Recording
-  _generateId(operation) {
-    return import_crypto.default.createHash("sha256").update(operation).digest("hex");
-  }
   _recordObservation(instruction, result) {
     return __async(this, null, function* () {
-      const id = this._generateId(instruction);
+      const id = generateId(instruction);
       this.observations[id] = { result, instruction };
       return id;
     });
   }
-  _recordAction(action, result) {
-    return __async(this, null, function* () {
-      const id = this._generateId(action);
-      this.actions[id] = { result, action };
-      return id;
-    });
-  }
   // Main methods
   _extract(_0) {
     return __async(this, arguments, function* ({
@@ -1826,116 +3022,25 @@ Trace: ${e.stack}`,
       domSettleTimeoutMs
     }) {
       if (!instruction) {
-        instruction = `Find elements that can be used for any future actions in the page. These may be navigation links, related pages, section/subsection links, buttons, or other interactive elements. Be comprehensive: if there are multiple elements that may be relevant for future actions, return all of them.`;
-      }
-      const model = modelName != null ? modelName : this.defaultModelName;
-      this.log({
-        category: "observation",
-        message: `starting observation: ${instruction}`,
-        level: 1
-      });
-      yield this._waitForSettledDom(domSettleTimeoutMs);
-      yield this.startDomDebug();
-      let { outputString, selectorMap } = yield this.page.evaluate(
-        (fullPage2) => fullPage2 ? window.processAllOfDom() : window.processDom([]),
-        fullPage
-      );
-      let annotatedScreenshot;
-      if (useVision === true) {
-        if (!modelsWithVision.includes(model)) {
-          this.log({
-            category: "observation",
-            message: `${model} does not support vision. Skipping vision processing.`,
-            level: 1
-          });
-        } else {
-          const screenshotService = new ScreenshotService(
-            this.page,
-            selectorMap,
-            this.verbose
-          );
-          annotatedScreenshot = yield screenshotService.getAnnotatedScreenshot(fullPage);
-          outputString = "n/a. use the image to find the elements.";
-        }
-      }
-      const observationResponse = yield observe({
-        instruction,
-        domElements: outputString,
-        llmProvider: this.llmProvider,
-        modelName: modelName || this.defaultModelName,
-        image: annotatedScreenshot,
-        requestId
-      });
-      const elementsWithSelectors = observationResponse.elements.map(
-        (element) => {
-          const _a = element, { elementId } = _a, rest = __objRest(_a, ["elementId"]);
-          return __spreadProps(__spreadValues({}, rest), {
-            selector: `xpath=${selectorMap[elementId]}`
-          });
-        }
-      );
-      yield this.cleanupDomDebug();
-      this._recordObservation(instruction, elementsWithSelectors);
-      this.log({
-        category: "observation",
-        message: `found element ${JSON.stringify(elementsWithSelectors)}`,
-        level: 1
-      });
-      yield this._recordObservation(instruction, elementsWithSelectors);
-      return elementsWithSelectors;
-    });
-  }
-  _act(_0) {
-    return __async(this, arguments, function* ({
-      action,
-      steps = "",
-      chunksSeen,
-      modelName,
-      useVision,
-      verifierUseVision,
-      retries = 0,
-      requestId,
-      domSettleTimeoutMs
-    }) {
-      var _a;
-      const model = modelName != null ? modelName : this.defaultModelName;
-      if (!modelsWithVision.includes(model) && (useVision !== false || verifierUseVision)) {
-        this.log({
-          category: "action",
-          message: `${model} does not support vision, but useVision was set to ${useVision}. Defaulting to false.`,
-          level: 1
-        });
-        useVision = false;
-        verifierUseVision = false;
+        instruction = `Find elements that can be used for any future actions in the page. These may be navigation links, related pages, section/subsection links, buttons, or other interactive elements. Be comprehensive: if there are multiple elements that may be relevant for future actions, return all of them.`;
       }
+      const model = modelName != null ? modelName : this.defaultModelName;
       this.log({
-        category: "action",
-        message: `Running / Continuing action: ${action} on page: ${this.page.url()}`,
-        level: 2
+        category: "observation",
+        message: `starting observation: ${instruction}`,
+        level: 1
       });
       yield this._waitForSettledDom(domSettleTimeoutMs);
       yield this.startDomDebug();
-      this.log({
-        category: "action",
-        message: `Processing DOM...`,
-        level: 2
-      });
-      const { outputString, selectorMap, chunk, chunks } = yield this.page.evaluate(
-        ({ chunksSeen: chunksSeen2 }) => {
-          return window.processDom(chunksSeen2);
-        },
-        { chunksSeen }
+      let { outputString, selectorMap } = yield this.page.evaluate(
+        (fullPage2) => fullPage2 ? window.processAllOfDom() : window.processDom([]),
+        fullPage
       );
-      this.log({
-        category: "action",
-        message: `Looking at chunk ${chunk}. Chunks left: ${chunks.length - chunksSeen.length}`,
-        level: 1
-      });
       let annotatedScreenshot;
       if (useVision === true) {
         if (!modelsWithVision.includes(model)) {
           this.log({
-            category: "action",
+            category: "observation",
             message: `${model} does not support vision. Skipping vision processing.`,
             level: 1
           });
@@ -1945,419 +3050,35 @@ Trace: ${e.stack}`,
             selectorMap,
             this.verbose
           );
-          annotatedScreenshot = yield screenshotService.getAnnotatedScreenshot(false);
+          annotatedScreenshot = yield screenshotService.getAnnotatedScreenshot(fullPage);
+          outputString = "n/a. use the image to find the elements.";
         }
       }
-      const response = yield act({
-        action,
+      const observationResponse = yield observe({
+        instruction,
         domElements: outputString,
-        steps,
         llmProvider: this.llmProvider,
-        modelName: model,
-        screenshot: annotatedScreenshot,
-        logger: this.logger,
+        modelName: modelName || this.defaultModelName,
+        image: annotatedScreenshot,
         requestId
       });
-      this.log({
-        category: "action",
-        message: `Received response from LLM: ${JSON.stringify(response)}`,
-        level: 1
-      });
-      yield this.cleanupDomDebug();
-      if (!response) {
-        if (chunksSeen.length + 1 < chunks.length) {
-          chunksSeen.push(chunk);
-          this.log({
-            category: "action",
-            message: `No action found in current chunk. Chunks seen: ${chunksSeen.length}.`,
-            level: 1
-          });
-          return this._act({
-            action,
-            steps: steps + (!steps.endsWith("\n") ? "\n" : "") + "## Step: Scrolled to another section\n",
-            chunksSeen,
-            modelName,
-            useVision,
-            verifierUseVision,
-            requestId,
-            domSettleTimeoutMs
-          });
-        } else if (useVision === "fallback") {
-          this.log({
-            category: "action",
-            message: `Switching to vision-based processing`,
-            level: 1
-          });
-          yield this.page.evaluate(() => window.scrollToHeight(0));
-          return yield this._act({
-            action,
-            steps,
-            chunksSeen,
-            modelName,
-            useVision: true,
-            verifierUseVision,
-            requestId,
-            domSettleTimeoutMs
+      const elementsWithSelectors = observationResponse.elements.map(
+        (element) => {
+          const _a = element, { elementId } = _a, rest = __objRest(_a, ["elementId"]);
+          return __spreadProps(__spreadValues({}, rest), {
+            selector: `xpath=${selectorMap[elementId][0]}`
           });
-        } else {
-          if (this.enableCaching) {
-            this.llmProvider.cleanRequestCache(requestId);
-          }
-          return {
-            success: false,
-            message: `Action was not able to be completed.`,
-            action
-          };
         }
-      }
-      const elementId = response["element"];
-      const xpath = selectorMap[elementId];
-      const method = response["method"];
-      const args = response["args"];
-      const elementLines = outputString.split("\n");
-      const elementText = ((_a = elementLines.find((line) => line.startsWith(`${elementId}:`))) == null ? void 0 : _a.split(":")[1]) || "Element not found";
+      );
+      yield this.cleanupDomDebug();
+      this._recordObservation(instruction, elementsWithSelectors);
       this.log({
-        category: "action",
-        message: `Executing method: ${method} on element: ${elementId} (xpath: ${xpath}) with args: ${JSON.stringify(
-          args
-        )}`,
+        category: "observation",
+        message: `found element ${JSON.stringify(elementsWithSelectors)}`,
         level: 1
       });
-      let urlChangeString = "";
-      const locator = this.page.locator(`xpath=${xpath}`).first();
-      try {
-        const initialUrl = this.page.url();
-        if (method === "scrollIntoView") {
-          this.log({
-            category: "action",
-            message: `Scrolling element into view`,
-            level: 2
-          });
-          try {
-            yield locator.evaluate((element) => {
-              element.scrollIntoView({ behavior: "smooth", block: "center" });
-            }).catch((e) => {
-              this.log({
-                category: "action",
-                message: `Error scrolling element into view: ${e.message}
-Trace: ${e.stack}`,
-                level: 1
-              });
-            });
-          } catch (e) {
-            this.log({
-              category: "action",
-              message: `Error scrolling element into view (Retries ${retries}): ${e.message}
-Trace: ${e.stack}`,
-              level: 1
-            });
-            if (retries < 2) {
-              return this._act({
-                action,
-                steps,
-                modelName,
-                useVision,
-                verifierUseVision,
-                retries: retries + 1,
-                chunksSeen,
-                requestId,
-                domSettleTimeoutMs
-              });
-            }
-          }
-        } else if (method === "fill" || method === "type") {
-          try {
-            yield locator.fill("");
-            yield locator.click();
-            const text = args[0];
-            for (const char of text) {
-              yield this.page.keyboard.type(char, {
-                delay: Math.random() * 50 + 25
-              });
-            }
-          } catch (e) {
-            this.log({
-              category: "action",
-              message: `Error filling element (Retries ${retries}): ${e.message}
-Trace: ${e.stack}`,
-              level: 1
-            });
-            if (retries < 2) {
-              return this._act({
-                action,
-                steps,
-                modelName,
-                useVision,
-                verifierUseVision,
-                retries: retries + 1,
-                chunksSeen,
-                requestId,
-                domSettleTimeoutMs
-              });
-            }
-          }
-        } else if (method === "press") {
-          try {
-            const key = args[0];
-            yield this.page.keyboard.press(key);
-          } catch (e) {
-            this.log({
-              category: "action",
-              message: `Error pressing key (Retries ${retries}): ${e.message}
-Trace: ${e.stack}`,
-              level: 1
-            });
-            if (retries < 2) {
-              return this._act({
-                action,
-                steps,
-                modelName,
-                useVision,
-                verifierUseVision,
-                retries: retries + 1,
-                chunksSeen,
-                requestId,
-                domSettleTimeoutMs
-              });
-            }
-          }
-        } else if (typeof locator[method] === "function") {
-          this.log({
-            category: "action",
-            message: `Page URL before action: ${this.page.url()}`,
-            level: 2
-          });
-          try {
-            yield locator[method](...args);
-          } catch (e) {
-            this.log({
-              category: "action",
-              message: `Error performing method ${method} with args ${JSON.stringify(
-                args
-              )} (Retries: ${retries}): ${e.message}
-Trace: ${e.stack}`,
-              level: 1
-            });
-            if (retries < 2) {
-              return this._act({
-                action,
-                steps,
-                modelName,
-                useVision,
-                verifierUseVision,
-                retries: retries + 1,
-                chunksSeen,
-                requestId,
-                domSettleTimeoutMs
-              });
-            }
-          }
-          if (method === "click") {
-            this.log({
-              category: "action",
-              message: `Clicking element, checking for page navigation`,
-              level: 1
-            });
-            const newOpenedTab = yield Promise.race([
-              new Promise((resolve) => {
-                this.context.once("page", (page) => resolve(page));
-                setTimeout(() => resolve(null), 1500);
-              })
-            ]);
-            this.log({
-              category: "action",
-              message: `Clicked element, ${newOpenedTab ? "opened a new tab" : "no new tabs opened"}`,
-              level: 1
-            });
-            if (newOpenedTab) {
-              this.log({
-                category: "action",
-                message: `New page detected (new tab) with URL: ${newOpenedTab.url()}`,
-                level: 1
-              });
-              yield newOpenedTab.close();
-              yield this.page.goto(newOpenedTab.url());
-              yield this.page.waitForLoadState("domcontentloaded");
-              yield this._waitForSettledDom(domSettleTimeoutMs);
-            }
-            yield Promise.race([
-              this.page.waitForLoadState("networkidle"),
-              new Promise((resolve) => setTimeout(resolve, 5e3))
-            ]).catch((e) => {
-              this.log({
-                category: "action",
-                message: `Network idle timeout hit`,
-                level: 1
-              });
-            });
-            this.log({
-              category: "action",
-              message: `Finished waiting for (possible) page navigation`,
-              level: 1
-            });
-            if (this.page.url() !== initialUrl) {
-              this.log({
-                category: "action",
-                message: `New page detected with URL: ${this.page.url()}`,
-                level: 1
-              });
-            }
-          }
-        } else {
-          this.log({
-            category: "action",
-            message: `Chosen method ${method} is invalid`,
-            level: 1
-          });
-          if (retries < 2) {
-            return this._act({
-              action,
-              steps,
-              modelName: model,
-              useVision,
-              verifierUseVision,
-              retries: retries + 1,
-              chunksSeen,
-              requestId
-            });
-          } else {
-            if (this.enableCaching) {
-              this.llmProvider.cleanRequestCache(requestId);
-            }
-            return {
-              success: false,
-              message: `Internal error: Chosen method ${method} is invalid`,
-              action
-            };
-          }
-        }
-        let newSteps = steps + (!steps.endsWith("\n") ? "\n" : "") + `## Step: ${response.step}
-  Element: ${elementText}
-  Action: ${response.method}
-  Reasoning: ${response.why}
-`;
-        if (urlChangeString) {
-          newSteps += `  Result (Important): ${urlChangeString}
-
-`;
-        }
-        let actionComplete = false;
-        if (response.completed) {
-          this.log({
-            category: "action",
-            message: `Action marked as completed, Verifying if this is true...`,
-            level: 1
-          });
-          let domElements = void 0;
-          let fullpageScreenshot = void 0;
-          if (verifierUseVision) {
-            try {
-              const screenshotService = new ScreenshotService(
-                this.page,
-                selectorMap,
-                this.verbose
-              );
-              fullpageScreenshot = yield screenshotService.getScreenshot(
-                true,
-                15
-              );
-            } catch (e) {
-              this.log({
-                category: "action",
-                message: `Error getting full page screenshot: ${e.message}
-. Trying again...`,
-                level: 1
-              });
-              const screenshotService = new ScreenshotService(
-                this.page,
-                selectorMap,
-                this.verbose
-              );
-              fullpageScreenshot = yield screenshotService.getScreenshot(
-                true,
-                15
-              );
-            }
-          } else {
-            ({ outputString: domElements } = yield this.page.evaluate(() => {
-              return window.processAllOfDom();
-            }));
-          }
-          actionComplete = yield verifyActCompletion({
-            goal: action,
-            steps: newSteps,
-            llmProvider: this.llmProvider,
-            modelName: model,
-            screenshot: fullpageScreenshot,
-            domElements,
-            logger: this.logger,
-            requestId
-          });
-          this.log({
-            category: "action",
-            message: `Action completion verification result: ${actionComplete}`,
-            level: 1
-          });
-        }
-        if (!actionComplete) {
-          this.log({
-            category: "action",
-            message: `Continuing to next action step`,
-            level: 1
-          });
-          return this._act({
-            action,
-            steps: newSteps,
-            modelName,
-            chunksSeen,
-            useVision,
-            verifierUseVision,
-            requestId,
-            domSettleTimeoutMs
-          });
-        } else {
-          this.log({
-            category: "action",
-            message: `Action completed successfully`,
-            level: 1
-          });
-          yield this._recordAction(action, response.step);
-          return {
-            success: true,
-            message: `Action completed successfully: ${steps}${response.step}`,
-            action
-          };
-        }
-      } catch (error) {
-        this.log({
-          category: "action",
-          message: `Error performing action (Retries: ${retries}): ${error.message}
-Trace: ${error.stack}`,
-          level: 1
-        });
-        if (retries < 2) {
-          return this._act({
-            action,
-            steps,
-            modelName,
-            useVision,
-            verifierUseVision,
-            retries: retries + 1,
-            chunksSeen,
-            requestId,
-            domSettleTimeoutMs
-          });
-        }
-        yield this._recordAction(action, "");
-        if (this.enableCaching) {
-          this.llmProvider.cleanRequestCache(requestId);
-        }
-        return {
-          success: false,
-          message: `Error performing action: ${error.message}`,
-          action
-        };
-      }
+      yield this._recordObservation(instruction, elementsWithSelectors);
+      return elementsWithSelectors;
     });
   }
   act(_0) {
@@ -2365,6 +3086,7 @@ Trace: ${error.stack}`,
       action,
       modelName,
       useVision = "fallback",
+      variables = {},
       domSettleTimeoutMs
     }) {
       useVision = useVision != null ? useVision : "fallback";
@@ -2373,13 +3095,19 @@ Trace: ${error.stack}`,
         category: "act",
         message: `Running act with action: ${action}, requestId: ${requestId}`
       });
-      return this._act({
+      if (variables) {
+        this.variables = __spreadValues(__spreadValues({}, this.variables), variables);
+      }
+      return this.actHandler.act({
         action,
         modelName,
         chunksSeen: [],
         useVision,
         verifierUseVision: useVision !== false,
         requestId,
+        variables,
+        previousSelectors: [],
+        skipActionCacheForThisStep: false,
         domSettleTimeoutMs
       }).catch((e) => {
         this.logger({
@@ -2387,9 +3115,6 @@ Trace: ${error.stack}`,
           message: `Error acting: ${e.message}
 Trace: ${e.stack}`
         });
-        if (this.enableCaching) {
-          this.llmProvider.cleanRequestCache(requestId);
-        }
         return {
           success: false,
           message: `Internal error: Error acting: ${e.message}`,