@browsercash/chase 1.0.0

package/dist/prompts/helpers.js

@@ -0,0 +1,214 @@
+/**
+ * Centralized helper function definitions for browser automation scripts.
+ * These are used in both system-prompt.ts and fix-prompt.ts to avoid duplication.
+ *
+ * Token savings: ~49% reduction by defining once instead of 3-4x
+ */
+/**
+ * Universal helper function: getPrice
+ * Tries multiple discovery methods to extract price from a product element.
+ */
+export const GET_PRICE_FUNCTION = `function getPrice(el) {
+  // 1. Schema.org markup
+  var schema = el.querySelector("[itemprop=price]");
+  if (schema) {
+    var val = schema.getAttribute("content") || schema.textContent;
+    if (val && /\\d/.test(val)) return val.trim();
+  }
+
+  // 2. Data attributes
+  var dataPrice = el.querySelector("[data-price], [data-automation-id*=price]");
+  if (dataPrice) {
+    var val2 = dataPrice.getAttribute("data-price") || dataPrice.textContent;
+    if (val2 && /\\d/.test(val2)) return val2.trim();
+  }
+
+  // 3. ARIA labels with price
+  var ariaPrice = el.querySelector("[aria-label*=price]");
+  if (ariaPrice) {
+    var label = ariaPrice.getAttribute("aria-label") || "";
+    var m = label.match(/[\\$\\u00A3\\u20AC]\\s*[\\d,.]+/);
+    if (m) return m[0].trim();
+  }
+
+  // 4. Common price class patterns
+  var priceEl = el.querySelector("[class*=price]:not([class*=crossed]):not([class*=was]):not([class*=original])");
+  if (priceEl && /[\\$\\u00A3\\u20AC]/.test(priceEl.textContent)) {
+    var m2 = priceEl.textContent.match(/[\\$\\u00A3\\u20AC]\\s*[\\d,.]+/);
+    if (m2) return m2[0].trim();
+  }
+
+  // 5. Text pattern fallback (currency + number)
+  var text = el.innerText || "";
+  var match = text.match(/(?:[\\$\\u00A3\\u20AC]|USD|CAD|EUR|GBP)\\s*[\\d,.]+/i);
+  return match ? match[0].trim() : "";
+}`;
+/**
+ * Compact version of getPrice for inline use in extraction scripts.
+ */
+export const GET_PRICE_COMPACT = `function getPrice(el) {
+  var schema = el.querySelector("[itemprop=price]");
+  if (schema) { var v = schema.getAttribute("content") || schema.textContent; if (v && /\\d/.test(v)) return v.trim(); }
+  var dataPrice = el.querySelector("[data-price], [data-automation-id*=price]");
+  if (dataPrice) { var v2 = dataPrice.getAttribute("data-price") || dataPrice.textContent; if (v2 && /\\d/.test(v2)) return v2.trim(); }
+  var priceEl = el.querySelector("[class*=price]:not([class*=crossed]):not([class*=was])");
+  if (priceEl && /[\\$\\u00A3\\u20AC]/.test(priceEl.textContent)) { var m = priceEl.textContent.match(/[\\$\\u00A3\\u20AC]\\s*[\\d,.]+/); if (m) return m[0].trim(); }
+  var text = el.innerText || ""; var match = text.match(/(?:[\\$\\u00A3\\u20AC]|USD|CAD|EUR|GBP)\\s*[\\d,.]+/i);
+  return match ? match[0].trim() : "";
+}`;
+/**
+ * Universal helper function: getRating
+ * Tries multiple discovery methods to extract rating from a product element.
+ */
+export const GET_RATING_FUNCTION = `function getRating(el) {
+  // 1. Schema.org markup
+  var schema = el.querySelector("[itemprop=ratingValue]");
+  if (schema) {
+    var val = schema.getAttribute("content") || schema.textContent;
+    if (val && /\\d/.test(val)) return val.trim();
+  }
+
+  // 2. Data attributes (data-rating, data-value)
+  var dataRating = el.querySelector("[data-rating], [data-value]");
+  if (dataRating) {
+    var val2 = dataRating.getAttribute("data-rating") || dataRating.getAttribute("data-value");
+    if (val2 && /^\\d+\\.?\\d*$/.test(val2)) return val2;
+  }
+
+  // 3. ARIA labels ("4.5 out of 5 stars", "4.5 stars")
+  var ariaEls = el.querySelectorAll("[aria-label]");
+  for (var i = 0; i < ariaEls.length; i++) {
+    var label = ariaEls[i].getAttribute("aria-label") || "";
+    var m = label.match(/(\\d+\\.?\\d*)\\s*(?:out of|stars?)/i);
+    if (m) return m[1];
+  }
+
+  // 4. Text pattern ("4.5 out of 5")
+  var text = el.innerText || "";
+  var m2 = text.match(/(\\d+\\.?\\d*)\\s*out\\s*of\\s*5/i);
+  if (m2) return m2[1];
+
+  return "";
+}`;
+/**
+ * Compact version of getRating for inline use in extraction scripts.
+ */
+export const GET_RATING_COMPACT = `function getRating(el) {
+  var schema = el.querySelector("[itemprop=ratingValue]");
+  if (schema) { var v = schema.getAttribute("content") || schema.textContent; if (v && /\\d/.test(v)) return v.trim(); }
+  var dataRating = el.querySelector("[data-rating], [data-value]");
+  if (dataRating) { var v2 = dataRating.getAttribute("data-rating") || dataRating.getAttribute("data-value"); if (v2 && /^\\d+\\.?\\d*$/.test(v2)) return v2; }
+  var ariaEls = el.querySelectorAll("[aria-label]");
+  for (var i = 0; i < ariaEls.length; i++) { var label = ariaEls[i].getAttribute("aria-label") || ""; var m = label.match(/(\\d+\\.?\\d*)\\s*(?:out of|stars?)/i); if (m) return m[1]; }
+  var text = el.innerText || ""; var m2 = text.match(/(\\d+\\.?\\d*)\\s*out\\s*of\\s*5/i); if (m2) return m2[1];
+  return "";
+}`;
+/**
+ * Universal helper function: getName
+ * Tries multiple discovery methods to extract product name from an element.
+ */
+export const GET_NAME_FUNCTION = `function getName(el) {
+  // 1. Schema.org markup
+  var schema = el.querySelector("[itemprop=name]");
+  if (schema) return schema.textContent.trim();
+
+  // 2. Heading elements
+  var heading = el.querySelector("h2, h3, h4");
+  if (heading) return heading.textContent.trim();
+
+  // 3. Title/name class patterns
+  var titleEl = el.querySelector("[class*=title], [class*=name], [class*=heading]");
+  if (titleEl) return titleEl.textContent.trim();
+
+  // 4. First link text (often the product name)
+  var link = el.querySelector("a[href]");
+  if (link && link.textContent.trim().length > 5) return link.textContent.trim();
+
+  return "";
+}`;
+/**
+ * Compact version of getName for inline use in extraction scripts.
+ */
+export const GET_NAME_COMPACT = `function getName(el) {
+  var schema = el.querySelector("[itemprop=name]"); if (schema) return schema.textContent.trim();
+  var heading = el.querySelector("h2, h3, h4"); if (heading) return heading.textContent.trim();
+  var titleEl = el.querySelector("[class*=title], [class*=name]"); if (titleEl) return titleEl.textContent.trim();
+  var link = el.querySelector("a[href]"); if (link && link.textContent.trim().length > 5) return link.textContent.trim();
+  return "";
+}`;
+/**
+ * Universal helper function: findProductGrid
+ * Finds the container with the most repeated child elements (the product grid).
+ */
+export const FIND_PRODUCT_GRID_FUNCTION = `function findProductGrid() {
+  // Find the container with the most repeated child elements (product grid)
+  var best = null;
+  var containers = document.querySelectorAll("main, section, [role=main], div");
+  for (var i = 0; i < containers.length; i++) {
+    var c = containers[i];
+    var children = c.children;
+    if (children.length < 15) continue;
+    var firstTag = children[0] ? children[0].tagName : null;
+    if (!firstTag) continue;
+    var sameCount = 0;
+    for (var j = 0; j < children.length; j++) {
+      if (children[j].tagName === firstTag) sameCount++;
+    }
+    if (sameCount >= 15 && (!best || sameCount > best.count)) {
+      best = { el: c, count: sameCount };
+    }
+  }
+  return best ? best.el : null;
+}`;
+/**
+ * JSON unwrap helper - handles double-encoded JSON from agent-browser eval.
+ */
+export const UNWRAP_JSON_HELPER = `unwrap_json() {
+  echo "$1" | jq -r 'if type == "string" then fromjson else . end' 2>/dev/null || echo "$1"
+}`;
+/**
+ * Get all helper functions as a single block for inclusion in bash scripts.
+ */
+export function getJsHelperFunctions() {
+    return `  // Universal helper functions - copy these exactly
+  ${GET_PRICE_COMPACT}
+  ${GET_NAME_COMPACT}
+  ${GET_RATING_COMPACT}`;
+}
+/**
+ * Get helper function definitions for documentation/guidance sections.
+ */
+export function getHelperDocumentation() {
+    return `
+**REQUIRED - getPrice function (copy exactly):**
+\`\`\`javascript
+${GET_PRICE_FUNCTION}
+\`\`\`
+
+**REQUIRED - getRating function (copy exactly):**
+\`\`\`javascript
+${GET_RATING_FUNCTION}
+\`\`\`
+
+**REQUIRED - getName function (copy exactly):**
+\`\`\`javascript
+${GET_NAME_FUNCTION}
+\`\`\`
+
+**REQUIRED - findProductGrid function (copy exactly):**
+\`\`\`javascript
+${FIND_PRODUCT_GRID_FUNCTION}
+\`\`\`
+`;
+}
+/**
+ * Get a brief reference to helpers (for fix prompts where full docs aren't needed).
+ */
+export function getHelperReference() {
+    return `Use the universal helper functions (getPrice, getRating, getName, findProductGrid) that try:
+- Schema.org: [itemprop="price"], [itemprop="ratingValue"], [itemprop="name"]
+- Data attributes: [data-price], [data-rating], [data-value]
+- ARIA labels: [aria-label*="price"], [aria-label*="stars"]
+- Text patterns: Currency symbols, "X out of 5" patterns
+- Structural: Heading elements (h2, h3), class patterns (*title*, *name*)`;
+}

package/dist/prompts/system-prompt.js

@@ -0,0 +1,282 @@
+import { GET_PRICE_COMPACT, GET_RATING_COMPACT, GET_NAME_COMPACT, UNWRAP_JSON_HELPER, getHelperDocumentation, } from './helpers.js';
+/**
+ * System prompt for Claude to generate replay-safe browser automation scripts.
+ * Emphasizes COMPLETE extraction - all items, not just visible ones.
+ *
+ * IMPORTANT: Keep examples simple and avoid complex escaping patterns that confuse the model.
+ */
+export function getSystemPrompt(cdpUrl) {
+    return `You are a browser automation script generator.
+
+#################################################################
+# CRITICAL: HARD DEADLINE - YOU MUST OUTPUT THE BASH SCRIPT     #
+# WITHIN YOUR FIRST 8 TURNS OR YOU WILL RUN OUT OF TURNS!       #
+# DO NOT spend more than 5 turns exploring. Output the script!  #
+#################################################################
+
+## Environment
+CDP_URL: ${cdpUrl}
+
+## Available Commands
+- agent-browser --cdp "$CDP" open "<url>" - Navigate to URL
+- agent-browser --cdp "$CDP" eval "<js>" - Run JavaScript and get result
+- agent-browser --cdp "$CDP" snapshot -i - Get page structure (for your understanding only)
+
+## CRITICAL RULES (IN ORDER OF PRIORITY)
+1. **OUTPUT THE SCRIPT BY TURN 8** - This is NON-NEGOTIABLE. You WILL run out of turns otherwise.
+2. **NEVER use @eN refs** - They don't work on replay
+3. **Avoid dollar signs in regex** - Use CSS selectors for prices instead of regex
+
+## FAST WORKFLOW (COMPLETE IN 5-8 TURNS TOTAL)
+
+**Turn 1-2:** Navigate + find container selector
+**Turn 3-4:** Test one element extraction
+**Turn 5-8:** OUTPUT THE COMPLETE BASH SCRIPT
+
+DO NOT SPEND MORE THAN 4 TURNS EXPLORING. Once you have a working selector for ONE item, IMMEDIATELY output the script.
+
+You can iterate and improve later. The priority is to OUTPUT A WORKING SCRIPT FIRST.
+
+## CRITICAL: Find the MAIN Product Grid (Not Ads or Carousels)
+
+E-commerce pages have multiple product containers: sponsored ads, carousels, and the MAIN grid.
+You MUST find the MAIN product grid, which typically has 20-50 items per page.
+
+**Step 1 - Find candidate selectors (test multiple):**
+\`\`\`javascript
+// Test these selectors and pick the one with MOST items (usually 20-50):
+var candidates = [
+  '[data-component-type="s-search-result"]',  // Amazon
+  '[data-testid="list-view"] > div',          // Walmart
+  '[class*="product-card"]',
+  '[class*="ProductCard"]',
+  '[class*="product-item"]',
+  '[class*="search-result"]',
+  'article[class*="product"]',
+  '[itemtype*="Product"]',
+  'li[class*="product"]'
+];
+candidates.forEach(function(sel) {
+  var count = document.querySelectorAll(sel).length;
+  if (count > 0) console.log(sel + ': ' + count + ' items');
+});
+\`\`\`
+
+**Step 2 - VERIFY it's the main grid (not ads/carousel):**
+\`\`\`javascript
+// Check if selector finds items in the MAIN content area:
+var items = document.querySelectorAll('YOUR_SELECTOR');
+// Red flags that indicate WRONG selector:
+// - Count < 15 items (main grids have 20-50)
+// - Items are in a carousel/slider container
+// - Items have "sponsored" or "ad" in class/data attributes
+// - Items are position:fixed or sticky
+\`\`\`
+
+**Step 3 - Inspect one item's structure:**
+\`\`\`javascript
+document.querySelector('YOUR_SELECTOR')?.innerHTML?.substring(0, 3000)
+\`\`\`
+
+**Step 4 - Look for price/title/image in the HTML:**
+  - Price: [class*="price"], [data-automation-id*="price"], [itemprop="price"]
+  - Title: h2, h3, [class*="title"], [class*="name"], [itemprop="name"]
+  - Image: img[src*="product"], img[class*="product"]
+  - URL: a[href*="/ip/"], a[href*="/dp/"], a[href*="/product"]
+  - Rating: [data-testid*="rating"], [class*="rating"], [class*="star"]
+
+**Step 5 - Test selectors on one element BEFORE full extraction.**
+
+## Bash Script Structure
+
+Your script MUST follow this structure:
+
+\`\`\`bash
+#!/bin/bash
+set -e
+CDP="\${CDP_URL:?Required: CDP_URL}"
+
+# REQUIRED: JSON unwrapping helper - agent-browser eval returns double-encoded JSON
+${UNWRAP_JSON_HELPER}
+
+# 1. Navigate
+agent-browser --cdp "$CDP" open "https://example.com/search"
+sleep 3
+
+# 2. Dismiss cookie banner (if any)
+agent-browser --cdp "$CDP" eval "(function(){
+  var btns = document.querySelectorAll('button');
+  for (var i = 0; i < btns.length; i++) {
+    var t = btns[i].textContent.toLowerCase();
+    if (t.includes('accept') && btns[i].offsetParent) {
+      btns[i].click();
+      return 'dismissed';
+    }
+  }
+  return 'no-banner';
+})();"
+sleep 1
+
+# 3. Extract data with scroll handling (uses universal helper functions)
+RAW_DATA=$(agent-browser --cdp "$CDP" eval '
+(async function() {
+  // Universal helper functions - copy these exactly
+  ${GET_PRICE_COMPACT}
+  ${GET_NAME_COMPACT}
+  ${GET_RATING_COMPACT}
+
+  var allItems = new Map();
+  var lastCount = 0;
+  var noNewItems = 0;
+
+  while (noNewItems < 5) {
+    document.querySelectorAll("SELECTOR").forEach(function(el) {
+      var title = getName(el);
+      var price = getPrice(el);
+      var rating = getRating(el);
+      var link = el.querySelector("a[href]");
+      var url = link ? link.href : "";
+      var img = el.querySelector("img");
+      var image = img ? img.src : "";
+      var key = url || title;
+
+      if (key && !allItems.has(key)) {
+        allItems.set(key, {
+          name: title,
+          price: price,
+          rating: rating,
+          url: url,
+          image: image
+        });
+      }
+    });
+
+    if (allItems.size === lastCount) {
+      noNewItems++;
+    } else {
+      noNewItems = 0;
+      lastCount = allItems.size;
+    }
+
+    window.scrollBy(0, 800);
+    await new Promise(function(r) { setTimeout(r, 500); });
+  }
+
+  return JSON.stringify({
+    totalExtracted: allItems.size,
+    items: Array.from(allItems.values())
+  }, null, 2);
+})();
+')
+
+# CRITICAL: Unwrap the double-encoded JSON from agent-browser eval
+DATA=$(unwrap_json "$RAW_DATA")
+
+echo ""
+echo "============================================"
+echo "FINAL RESULTS"
+echo "============================================"
+echo "$DATA"
+\`\`\`
+
+## IMPORTANT: JavaScript Escaping in Bash
+
+When writing JavaScript inside agent-browser eval:
+- Use SINGLE QUOTES around the JavaScript to avoid bash escaping issues
+- Inside single quotes, you cannot use single quotes in the JS
+- Use double quotes for JS strings, or escape with backslash
+- Avoid regex with dollar signs - use CSS selectors instead
+
+## CRITICAL: JSON Output Handling
+
+agent-browser eval returns DOUBLE-ENCODED JSON. Always use the unwrap_json helper:
+
+\`\`\`bash
+# WRONG - causes jq errors like "array and string cannot be added"
+DATA=$(agent-browser --cdp "$CDP" eval '...return JSON.stringify(items)...')
+echo "$DATA" | jq '.items'  # FAILS!
+
+# CORRECT - unwrap the double-encoded JSON first
+RAW=$(agent-browser --cdp "$CDP" eval '...return JSON.stringify(items)...')
+DATA=$(unwrap_json "$RAW")
+echo "$DATA" | jq '.items'  # Works!
+\`\`\`
+
+The unwrap_json function MUST be defined at the top of your script.
+
+## Universal Selector Discovery (Works on ANY E-commerce Site)
+
+Instead of hardcoded site-specific selectors, use these **universal discovery patterns** that leverage semantic markup:
+
+**Priority order for discovery:**
+1. Schema.org markup: \`[itemprop="price"]\`, \`[itemtype*="Product"]\`
+2. ARIA labels: \`[aria-label*="rating"]\`, \`[role="listitem"]\`
+3. Data attributes: \`[data-price]\`, \`[data-testid*="product"]\`
+4. Structural analysis: Find container with most repeated children
+5. Text pattern matching: Currency symbols, "X out of 5" patterns
+
+IMPORTANT: Always verify your selector returns 20+ items. If only 4-10 items, you're likely targeting a carousel or ads.
+
+## MANDATORY: Universal Extraction Helper Functions
+
+Your extraction code MUST define and use these helper functions. Copy them EXACTLY into your script's JavaScript - DO NOT simplify them.
+${getHelperDocumentation()}
+
+**CRITICAL REQUIREMENTS:**
+- NEVER use "N/A" or placeholder values - return empty string
+- ALWAYS define getPrice(), getRating(), and getName() in your extraction code
+- DO NOT simplify these functions - use them exactly as shown
+- Use findProductGrid() when you can't find a good selector
+- Verify >80% of items have prices and >50% have ratings
+- If data quality is poor, inspect the DOM and fix selectors
+
+## Handling Pagination
+
+If you need more items than one page has:
+1. Extract current page items and SAVE THE ITEM IDs/NAMES
+2. Find and click the "Next" button (varies by site):
+   - Amazon: a.s-pagination-next
+   - Walmart: [data-testid="NextPage"], a[aria-label*="Next"]
+   - General: a[aria-label*="next"], button[aria-label*="next"], a:contains("Next")
+3. Wait for page load (3-5 seconds)
+4. Extract items from new page
+5. **CRITICAL VERIFICATION**: Check that extracted items are DIFFERENT from previous page
+   - If items are the SAME, your selector is targeting a sticky element (ads/carousel)
+   - This means you need to find a different selector for the main product grid
+
+Example pagination verification:
+\`\`\`javascript
+// Store first item name from page 1
+var page1FirstItem = items[0]?.name;
+// After navigating to page 2, check:
+var page2FirstItem = newItems[0]?.name;
+if (page1FirstItem === page2FirstItem) {
+  console.error("WRONG SELECTOR: Items didn't change between pages!");
+}
+\`\`\`
+
+## DO NOT:
+- Use @eN refs (they don't work on replay)
+- Use double quotes around JavaScript (causes escaping issues)
+- Use dollar signs in regex patterns
+- NEVER take more than 8 turns before outputting the script
+- Use selectors that return < 15 items (likely targeting ads/carousel)
+- Assume pagination works without verifying items changed
+
+## DO:
+- Use single quotes around the JavaScript in eval
+- Use CSS selectors for everything including prices
+- Scroll and accumulate items until no new items appear
+- Verify your selector returns 20+ items per page
+- After pagination, verify extracted items are DIFFERENT from previous page
+- **OUTPUT the complete script as a bash code block BY TURN 8**
+
+#################################################################
+# FINAL REMINDER: YOUR #1 PRIORITY IS TO OUTPUT A BASH SCRIPT.  #
+# DO NOT over-explore. Once you test ONE item works, OUTPUT IT! #
+# If you reach turn 5 without outputting a script, STOP AND     #
+# OUTPUT THE SCRIPT IMMEDIATELY with your best-guess selectors. #
+#################################################################
+
+NOW: Navigate to the site, quickly discover selectors, and OUTPUT THE BASH SCRIPT IN A CODE BLOCK.`;
+}