@browserbasehq/stagehand 1.1.2 → 1.2.0

package/dist/dom/build/debug.js

@@ -2,12 +2,19 @@
   // lib/dom/debug.ts
   async function debugDom() {
     window.chunkNumber = 0;
-    const { selectorMap, outputString } = await window.processElements(
-      window.chunkNumber
-    );
+    const { selectorMap: multiSelectorMap, outputString } = await window.processElements(window.chunkNumber);
+    const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
     drawChunk(selectorMap);
     setupChunkNav();
   }
+  function multiSelectorMapToSelectorMap(multiSelectorMap) {
+    return Object.fromEntries(
+      Object.entries(multiSelectorMap).map(([key, selectors]) => [
+        Number(key),
+        selectors[0]
+      ])
+    );
+  }
   function drawChunk(selectorMap) {
     cleanupMarkers();
     Object.entries(selectorMap).forEach(([_index, selector]) => {
@@ -81,7 +88,10 @@
         window.chunkNumber -= 1;
         window.scrollTo(0, window.chunkNumber * window.innerHeight);
         await window.waitForDomSettle();
-        const { selectorMap } = await processElements(window.chunkNumber);
+        const { selectorMap: multiSelectorMap } = await window.processElements(
+          window.chunkNumber
+        );
+        const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
         drawChunk(selectorMap);
         setupChunkNav();
       };
@@ -103,7 +113,10 @@
         window.chunkNumber += 1;
         window.scrollTo(0, window.chunkNumber * window.innerHeight);
         await window.waitForDomSettle();
-        const { selectorMap } = await processElements(window.chunkNumber);
+        const { selectorMap: multiSelectorMap } = await window.processElements(
+          window.chunkNumber
+        );
+        const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
         drawChunk(selectorMap);
         setupChunkNav();
       };

package/dist/dom/build/index.js

@@ -60,7 +60,7 @@
       generateStandardXPath(element),
       generatedIdBasedXPath(element)
     ]);
-    return [...idBasedXPath ? [idBasedXPath] : [], standardXPath, complexXPath];
+    return [standardXPath, ...idBasedXPath ? [idBasedXPath] : [], complexXPath];
   }
   async function generateComplexXPath(element) {
     const parts = [];
@@ -145,7 +145,7 @@
       }
       element = element.parentElement;
     }
-    return parts.length ? `//${parts.join("//")}` : "";
+    return parts.length ? `/${parts.join("/")}` : "";
   }
   async function generatedIdBasedXPath(element) {
     if (isElementNode(element) && element.id) {
@@ -163,11 +163,7 @@
   }
   async function processDom(chunksSeen) {
     const { chunk, chunksArray } = await pickChunk(chunksSeen);
-    const { outputString, selectorMap } = await processElements2(
-      chunk,
-      void 0,
-      void 0
-    );
+    const { outputString, selectorMap } = await processElements(chunk);
     console.log(
       `Stagehand (Browser Process): Extracted dom elements:
 ${outputString}`
@@ -187,7 +183,7 @@ ${outputString}`
     let index = 0;
     const results = [];
     for (let chunk = 0; chunk < totalChunks; chunk++) {
-      const result = await processElements2(chunk, true, index);
+      const result = await processElements(chunk, true, index);
       results.push(result);
       index += Object.keys(result.selectorMap).length;
     }
@@ -221,7 +217,7 @@ ${outputString}`
     });
   }
   var xpathCache = /* @__PURE__ */ new Map();
-  async function processElements2(chunk, scrollToChunk = true, indexOffset = 0) {
+  async function processElements(chunk, scrollToChunk = true, indexOffset = 0) {
     console.time("processElements:total");
     const viewportHeight = window.innerHeight;
     const chunkHeight = viewportHeight * chunk;
@@ -336,7 +332,7 @@ ${outputString}`
   }
   window.processDom = processDom;
   window.processAllOfDom = processAllOfDom;
-  window.processElements = processElements2;
+  window.processElements = processElements;
   window.scrollToHeight = scrollToHeight;
   var leafElementDenyList = ["SVG", "IFRAME", "SCRIPT", "STYLE", "LINK"];
   var interactiveElementTypes = [
@@ -501,12 +497,19 @@ ${outputString}`
   // lib/dom/debug.ts
   async function debugDom() {
     window.chunkNumber = 0;
-    const { selectorMap, outputString } = await window.processElements(
-      window.chunkNumber
-    );
+    const { selectorMap: multiSelectorMap, outputString } = await window.processElements(window.chunkNumber);
+    const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
     drawChunk(selectorMap);
     setupChunkNav();
   }
+  function multiSelectorMapToSelectorMap(multiSelectorMap) {
+    return Object.fromEntries(
+      Object.entries(multiSelectorMap).map(([key, selectors]) => [
+        Number(key),
+        selectors[0]
+      ])
+    );
+  }
   function drawChunk(selectorMap) {
     cleanupMarkers();
     Object.entries(selectorMap).forEach(([_index, selector]) => {
@@ -580,7 +583,10 @@ ${outputString}`
         window.chunkNumber -= 1;
         window.scrollTo(0, window.chunkNumber * window.innerHeight);
         await window.waitForDomSettle();
-        const { selectorMap } = await processElements(window.chunkNumber);
+        const { selectorMap: multiSelectorMap } = await window.processElements(
+          window.chunkNumber
+        );
+        const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
         drawChunk(selectorMap);
         setupChunkNav();
       };
@@ -602,7 +608,10 @@ ${outputString}`
         window.chunkNumber += 1;
         window.scrollTo(0, window.chunkNumber * window.innerHeight);
         await window.waitForDomSettle();
-        const { selectorMap } = await processElements(window.chunkNumber);
+        const { selectorMap: multiSelectorMap } = await window.processElements(
+          window.chunkNumber
+        );
+        const selectorMap = multiSelectorMapToSelectorMap(multiSelectorMap);
         drawChunk(selectorMap);
         setupChunkNav();
       };

package/dist/dom/build/process.js

@@ -60,7 +60,7 @@
       generateStandardXPath(element),
       generatedIdBasedXPath(element)
     ]);
-    return [...idBasedXPath ? [idBasedXPath] : [], standardXPath, complexXPath];
+    return [standardXPath, ...idBasedXPath ? [idBasedXPath] : [], complexXPath];
   }
   async function generateComplexXPath(element) {
     const parts = [];
@@ -145,7 +145,7 @@
       }
       element = element.parentElement;
     }
-    return parts.length ? `//${parts.join("//")}` : "";
+    return parts.length ? `/${parts.join("/")}` : "";
   }
   async function generatedIdBasedXPath(element) {
     if (isElementNode(element) && element.id) {
@@ -163,11 +163,7 @@
   }
   async function processDom(chunksSeen) {
     const { chunk, chunksArray } = await pickChunk(chunksSeen);
-    const { outputString, selectorMap } = await processElements(
-      chunk,
-      void 0,
-      void 0
-    );
+    const { outputString, selectorMap } = await processElements(chunk);
     console.log(
       `Stagehand (Browser Process): Extracted dom elements:
 ${outputString}`

package/dist/dom/build/xpathUtils.js

@@ -8,11 +8,7 @@
   }
   async function processDom(chunksSeen) {
     const { chunk, chunksArray } = await pickChunk(chunksSeen);
-    const { outputString, selectorMap } = await processElements(
-      chunk,
-      void 0,
-      void 0
-    );
+    const { outputString, selectorMap } = await processElements(chunk);
     console.log(
       `Stagehand (Browser Process): Extracted dom elements:
 ${outputString}`
@@ -386,7 +382,7 @@ ${outputString}`
       generateStandardXPath(element),
       generatedIdBasedXPath(element)
     ]);
-    return [...idBasedXPath ? [idBasedXPath] : [], standardXPath, complexXPath];
+    return [standardXPath, ...idBasedXPath ? [idBasedXPath] : [], complexXPath];
   }
   async function generateComplexXPath(element) {
     const parts = [];
@@ -471,7 +467,7 @@ ${outputString}`
       }
       element = element.parentElement;
     }
-    return parts.length ? `//${parts.join("//")}` : "";
+    return parts.length ? `/${parts.join("/")}` : "";
   }
   async function generatedIdBasedXPath(element) {
     if (isElementNode(element) && element.id) {

package/dist/index.js

@@ -90,21 +90,23 @@ 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.
@@ -169,7 +171,7 @@ ${steps}
 # Current Active Dom Elements
 ${domElements}
 `;
-  if (variables) {
+  if (variables && Object.keys(variables).length > 0) {
     actUserPrompt += `
 # Variables
 ${Object.entries(variables).map(([key, value]) => `<|${key.toUpperCase()}|>`).join("\n")}
@@ -600,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,
@@ -642,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)(
@@ -653,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);
@@ -688,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,
@@ -736,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,
@@ -753,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.",
@@ -780,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",
@@ -790,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",
@@ -824,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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@browserbasehq/stagehand",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "An AI web browsing framework focused on simplicity and extensibility.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",