┌─────────────────────────────────────────────────────────────────────────┐
│              TRADITIONAL SCRAPING vs AI BROWSER AGENTS                  │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  Traditional Scraping:                  AI Browser Agent:              │
│  ┌──────────────────┐                  ┌──────────────────┐            │
│  │ fetch(URL)       │                  │ "Find and book   │            │
│  │ parse(HTML)      │                  │ the cheapest     │            │
│  │ extract(CSS)     │                  │ flight to Paris  │            │
│  │ → Fragile        │                  │ for next Friday" │            │
│  └──────────────────┘                  └──────────────────┘            │
│          │                                      │                      │
│          ▼                                      ▼                      │
│  ┌──────────────────┐                  ┌──────────────────┐            │
│  │ Breaks on        │                  │ Understands      │            │
│  │ layout changes   │                  │ context, adapts  │            │
│  │ Needs constant   │                  │ to changes,      │            │
│  │ maintenance      │                  │ handles auth     │            │
│  └──────────────────┘                  └──────────────────┘            │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────┐
│                   AI BROWSER AGENT ARCHITECTURE                        │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌──────────────┐     Instructions     ┌──────────────┐                │
│  │   Human      │──────────────────────►│   Agent      │                │
│  │   Operator   │                       │   Controller │                │
│  └──────────────┘                       └──────┬───────┘                │
│                                                 │                      │
│                    ┌────────────────────────────┼────────────┐       │
│                    │                            │            │       │
│                    ▼                            ▼            ▼       │
│           ┌──────────────┐              ┌──────────────┐ ┌──────────┐  │
│           │   Planning   │              │   Browser    │ │ Memory   │  │
│           │   Module     │◄────────────►│   Engine     │ │ System   │  │
│           │  (LLM)       │   State      │ (Playwright) │ │          │  │
│           └──────────────┘              └──────┬───────┘ └──────────┘  │
│                                                 │                      │
│                                                 ▼                      │
│                                        ┌──────────────┐               │
│                                        │   Website    │               │
│                                        │   Target     │               │
│                                        └──────────────┘               │
│                                                                         │
│  Key Components:                                                        │
│  • Planning Module: LLM-powered decision making                         │
│  • Browser Engine: Playwright for interaction                           │
│  • Memory System: Context retention across steps                        │
│  • Tool Registry: Available actions (click, type, scroll)             │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

const PLANNING_PROMPT = `
You are an intelligent web navigation agent. Your task is to interact with websites to accomplish user goals.

Current State:
- URL: {{ currentUrl }}
- Page Title: {{ pageTitle }}
- Screenshot: [Base64 encoded image]
- Available Actions: {{ availableActions }}
- Previous Actions: {{ actionHistory }}

Goal: {{ userGoal }}

Instructions:
1. Analyze the current page state from the screenshot
2. Review your progress toward the goal
3. Select ONE action from the available options
4. If the goal is complete, respond with "DONE" and the result
5. If stuck, explain why and request human assistance

Respond in JSON format:
{
  "reasoning": "Your step-by-step thought process",
  "action": "The action to take",
  "parameters": { /* action-specific parameters */ },
  "confidence": 0.95
}
`;

const { chromium } = require('playwright');

async function createBrowserContext() {
  const browser = await chromium.launch({
    headless: true,
    args: [
      '--disable-blink-features=AutomationControlled',
      '--disable-web-security',
      '--disable-features=IsolateOrigins,site-per-process',
    ]
  });
  
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 },
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
    locale: 'en-US',
    timezoneId: 'America/New_York',
    geolocation: { latitude: 40.7128, longitude: -74.0060 },
    permissions: ['geolocation'],
    
    // Anti-detection measures
    bypassCSP: true,
    ignoreHTTPSErrors: true,
    
    // Recording options
    recordVideo: {
      dir: './recordings/',
      size: { width: 1920, height: 1080 }
    }
  });
  
  // Inject anti-detection scripts
  await context.addInitScript(() => {
    Object.defineProperty(navigator, 'webdriver', {
      get: () => undefined
    });
    
    window.chrome = { runtime: {} };
    
    Object.defineProperty(navigator, 'plugins', {
      get: () => [1, 2, 3, 4, 5]
    });
  });
  
  return { browser, context };
}

class AgentMemory {
  constructor() {
    this.shortTerm = new Map();
    this.working = {
      extractedData: [],
      navigationHistory: [],
      formData: {},
      currentGoal: null
    };
    this.longTerm = {
      sitePatterns: new Map(),
      successfulStrategies: [],
      failedApproaches: []
    };
  }
  
  addNavigationStep(url, action, result) {
    this.working.navigationHistory.push({
      timestamp: new Date().toISOString(),
      url,
      action,
      result,
      screenshot: result.screenshot
    });
    
    // Keep only last 10 steps in short-term
    if (this.working.navigationHistory.length > 10) {
      this.archiveToLongTerm(this.working.navigationHistory.shift());
    }
  }
  
  extractData(key, value) {
    this.working.extractedData.push({
      key,
      value,
      timestamp: new Date().toISOString(),
      source: this.getCurrentUrl()
    });
  }
  
  getContextForLLM() {
    return {
      currentGoal: this.working.currentGoal,
      stepsTaken: this.working.navigationHistory.length,
      extractedData: this.working.extractedData,
      recentActions: this.working.navigationHistory.slice(-5),
      pageHistory: this.working.navigationHistory.map(h => h.url)
    };
  }
  
  learnPattern(site, pattern, success) {
    if (!this.longTerm.sitePatterns.has(site)) {
      this.longTerm.sitePatterns.set(site, []);
    }
    this.longTerm.sitePatterns.get(site).push({
      pattern,
      success,
      timestamp: new Date().toISOString()
    });
  }
}

const BROWSER_TOOLS = {
  navigate: {
    description: 'Navigate to a URL',
    parameters: {
      url: { type: 'string', required: true },
      waitUntil: { 
        type: 'string', 
        enum: ['load', 'domcontentloaded', 'networkidle'],
        default: 'networkidle'
      }
    },
    handler: async (page, params) => {
      await page.goto(params.url, { waitUntil: params.waitUntil });
      return { success: true, url: page.url() };
    }
  },
  
  click: {
    description: 'Click an element on the page',
    parameters: {
      selector: { type: 'string', required: true },
      force: { type: 'boolean', default: false },
      timeout: { type: 'number', default: 5000 }
    },
    handler: async (page, params) => {
      await page.click(params.selector, {
        force: params.force,
        timeout: params.timeout
      });
      await page.waitForTimeout(500);
      return { success: true };
    }
  },
  
  type: {
    description: 'Type text into an input field',
    parameters: {
      selector: { type: 'string', required: true },
      text: { type: 'string', required: true },
      clear: { type: 'boolean', default: true },
      delay: { type: 'number', default: 50 }
    },
    handler: async (page, params) => {
      if (params.clear) {
        await page.fill(params.selector, '');
      }
      await page.type(params.selector, params.text, { delay: params.delay });
      return { success: true };
    }
  },
  
  screenshot: {
    description: 'Capture a screenshot of the current page',
    parameters: {
      fullPage: { type: 'boolean', default: false },
      element: { type: 'string', required: false }
    },
    handler: async (page, params) => {
      let screenshot;
      if (params.element) {
        const element = await page.locator(params.element);
        screenshot = await element.screenshot({ encoding: 'base64' });
      } else {
        screenshot = await page.screenshot({
          fullPage: params.fullPage,
          encoding: 'base64'
        });
      }
      return { success: true, screenshot };
    }
  },
  
  extract: {
    description: 'Extract text content from elements',
    parameters: {
      selector: { type: 'string', required: true },
      attribute: { type: 'string', required: false }
    },
    handler: async (page, params) => {
      const elements = await page.locator(params.selector).all();
      const data = [];
      for (const element of elements) {
        if (params.attribute) {
          const attr = await element.getAttribute(params.attribute);
          data.push(attr);
        } else {
          const text = await element.textContent();
          data.push(text.trim());
        }
      }
      return { success: true, data };
    }
  },
  
  scroll: {
    description: 'Scroll the page',
    parameters: {
      direction: { type: 'string', enum: ['up', 'down', 'to'], default: 'down' },
      amount: { type: 'number', default: 500 },
      toElement: { type: 'string', required: false }
    },
    handler: async (page, params) => {
      if (params.toElement) {
        await page.locator(params.toElement).scrollIntoViewIfNeeded();
      } else {
        const direction = params.direction === 'up' ? -1 : 1;
        await page.evaluate((amount, dir) => {
          window.scrollBy(0, amount * dir);
        }, params.amount, direction);
      }
      await page.waitForTimeout(300);
      return { success: true };
    }
  },
  
  wait: {
    description: 'Wait for a condition',
    parameters: {
      selector: { type: 'string', required: false },
      timeout: { type: 'number', default: 5000 },
      state: { 
        type: 'string', 
        enum: ['visible', 'hidden', 'attached', 'detached'],
        default: 'visible'
      }
    },
    handler: async (page, params) => {
      if (params.selector) {
        await page.locator(params.selector).waitFor({
          state: params.state,
          timeout: params.timeout
        });
      } else {
        await page.waitForTimeout(params.timeout);
      }
      return { success: true };
    }
  },
  
  solveCaptcha: {
    description: 'Attempt to solve a CAPTCHA challenge',
    parameters: {
      service: { type: 'string', enum: ['2captcha', 'anticaptcha'], default: '2captcha' },
      type: { type: 'string', enum: ['image', 'recaptcha', 'hcaptcha'] }
    },
    handler: async (page, params) => {
      // Implementation depends on CAPTCHA service
      const captchaResult = await solveCaptchaWithService(page, params);
      return { success: captchaResult.solved, result: captchaResult };
    }
  }
};

# SSH into your n8n server or container
ssh user@your-n8n-server

# Navigate to n8n installation directory
cd /opt/n8n

# Install Playwright and browsers
npm install playwright

# Install browser binaries
npx playwright install chromium
npx playwright install firefox

# Install system dependencies (Ubuntu/Debian)
npx playwright install-deps chromium

// browser-service.js - Reusable Playwright wrapper
const { chromium, firefox, webkit } = require('playwright');

class BrowserService {
  constructor(config = {}) {
    this.browserType = config.browser || 'chromium';
    this.headless = config.headless !== false;
    this.slowMo = config.slowMo || 0;
    this.timeout = config.timeout || 30000;
    this.browsers = new Map();
  }
  
  async launch(sessionId) {
    const browserType = { chromium, firefox, webkit }[this.browserType];
    
    const browser = await browserType.launch({
      headless: this.headless,
      slowMo: this.slowMo,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--no-first-run',
        '--no-zygote',
        '--disable-gpu',
        '--disable-blink-features=AutomationControlled'
      ]
    });
    
    const context = await browser.newContext({
      viewport: { width: 1920, height: 1080 },
      userAgent: this.getRandomUserAgent(),
      locale: 'en-US',
      timezoneId: 'America/New_York',
      bypassCSP: true,
      ignoreHTTPSErrors: true
    });
    
    // Anti-detection
    await context.addInitScript(() => {
      Object.defineProperty(navigator, 'webdriver', { get: () => undefined });
      Object.defineProperty(navigator, 'plugins', { get: () => [1, 2, 3, 4, 5] });
      Object.defineProperty(navigator, 'languages', { get: () => ['en-US', 'en'] });
    });
    
    const page = await context.newPage();
    page.setDefaultTimeout(this.timeout);
    
    this.browsers.set(sessionId, { browser, context, page });
    
    return { sessionId, status: 'launched' };
  }
  
  async navigate(sessionId, url, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    await page.goto(url, {
      waitUntil: options.waitUntil || 'networkidle',
      timeout: options.timeout || this.timeout
    });
    
    const title = await page.title();
    const currentUrl = page.url();
    
    return { 
      success: true, 
      url: currentUrl, 
      title,
      timestamp: new Date().toISOString()
    };
  }
  
  async screenshot(sessionId, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    const screenshot = await page.screenshot({
      fullPage: options.fullPage || false,
      encoding: 'base64',
      type: 'jpeg',
      quality: 80
    });
    
    return {
      success: true,
      screenshot: `data:image/jpeg;base64,${screenshot}`,
      timestamp: new Date().toISOString()
    };
  }
  
  async click(sessionId, selector, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    await page.locator(selector).click({
      timeout: options.timeout || 5000,
      force: options.force || false
    });
    
    await page.waitForTimeout(options.waitAfter || 1000);
    
    return { success: true, selector, timestamp: new Date().toISOString() };
  }
  
  async type(sessionId, selector, text, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    if (options.clear !== false) {
      await page.locator(selector).fill('');
    }
    
    await page.locator(selector).type(text, {
      delay: options.delay || 50
    });
    
    return { success: true, selector, text, timestamp: new Date().toISOString() };
  }
  
  async extract(sessionId, selector, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    const elements = await page.locator(selector).all();
    const data = [];
    
    for (const element of elements) {
      const item = {};
      
      if (options.text !== false) {
        item.text = await element.textContent();
      }
      
      if (options.html) {
        item.html = await element.innerHTML();
      }
      
      if (options.attributes) {
        for (const attr of options.attributes) {
          item[attr] = await element.getAttribute(attr);
        }
      }
      
      data.push(item);
    }
    
    return { success: true, data, count: data.length };
  }
  
  async scroll(sessionId, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    if (options.toElement) {
      await page.locator(options.toElement).scrollIntoViewIfNeeded();
    } else {
      const direction = options.direction === 'up' ? -1 : 1;
      const amount = options.amount || 500;
      
      await page.evaluate((amt, dir) => {
        window.scrollBy(0, amt * dir);
      }, amount, direction);
    }
    
    await page.waitForTimeout(options.waitAfter || 500);
    
    return { success: true, timestamp: new Date().toISOString() };
  }
  
  async evaluate(sessionId, script, args = []) {
    const { page } = this.browsers.get(sessionId);
    const result = await page.evaluate(script, ...args);
    return { success: true, result };
  }
  
  async getPageSource(sessionId) {
    const { page } = this.browsers.get(sessionId);
    const html = await page.content();
    return { success: true, html };
  }
  
  async close(sessionId) {
    const { browser } = this.browsers.get(sessionId);
    await browser.close();
    this.browsers.delete(sessionId);
    return { success: true, sessionId };
  }
  
  getRandomUserAgent() {
    const userAgents = [
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0'
    ];
    return userAgents[Math.floor(Math.random() * userAgents.length)];
  }
}

module.exports = BrowserService;

// n8n Function Node - Browser Agent Controller
const BrowserService = require('/opt/n8n/custom/browser-service.js');

const browserService = new BrowserService({
  browser: $input.first().json.browser || 'chromium',
  headless: $input.first().json.headless !== false,
  timeout: $input.first().json.timeout || 30000
});

// Generate unique session ID
const sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);

try {
  // Launch browser
  await browserService.launch(sessionId);
  
  // Navigate to target URL
  const navigateResult = await browserService.navigate(
    sessionId, 
    $input.first().json.url,
    { waitUntil: 'networkidle' }
  );
  
  // Take initial screenshot
  const screenshotResult = await browserService.screenshot(sessionId, { fullPage: false });
  
  // Extract page data
  const extractResult = await browserService.extract(sessionId, 'h1, h2, .product-title', {
    text: true,
    attributes: ['href', 'data-id']
  });
  
  // Close browser
  await browserService.close(sessionId);
  
  return [{
    json: {
      success: true,
      sessionId,
      navigation: navigateResult,
      screenshot: screenshotResult.screenshot,
      extractedData: extractResult.data,
      timestamp: new Date().toISOString()
    }
  }];
  
} catch (error) {
  // Ensure browser closes on error
  try {
    await browserService.close(sessionId);
  } catch (e) {}
  
  return [{
    json: {
      success: false,
      error: error.message,
      stack: error.stack,
      sessionId,
      timestamp: new Date().toISOString()
    }
  }];
}

# Dockerfile.n8n-playwright
FROM n8nio/n8n:latest

USER root

# Install dependencies
RUN apt-get update && apt-get install -y \
    libnss3 \
    libatk-bridge2.0-0 \
    libdrm-dev \
    libxkbcommon-dev \
    libgbm-dev \
    libasound-dev \
    && rm -rf /var/lib/apt/lists/*

# Install Playwright
RUN npm install -g playwright

# Install browsers
RUN npx playwright install chromium firefox

# Create custom modules directory
RUN mkdir -p /opt/n8n/custom
COPY browser-service.js /opt/n8n/custom/

USER node

EXPOSE 5678

# docker-compose.yml
version: '3.8'

services:
  n8n:
    build:
      context: .
      dockerfile: Dockerfile.n8n-playwright
    ports:
      - "5678:5678"
    environment:
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER=admin
      - N8N_BASIC_AUTH_PASSWORD=your-secure-password
      - NODE_FUNCTION_ALLOW_EXTERNAL=playwright
    volumes:
      - n8n_data:/home/node/.n8n
      - ./custom:/opt/n8n/custom
    deploy:
      resources:
        limits:
          memory: 4G
        reservations:
          memory: 2G

volumes:
  n8n_data:

// n8n Function Node - LLM Agent Controller with Vision
const { OpenAI } = require('openai');

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

async function planNextAction(goal, screenshot, history, pageInfo) {
  const messages = [
    {
      role: 'system',
      content: `You are an expert web automation agent. Your task is to navigate websites and extract information.

Available Actions:
1. navigate({ url }) - Go to a specific URL
2. click({ selector }) - Click an element
3. type({ selector, text }) - Type text into an input
4. scroll({ direction, amount }) - Scroll the page
5. extract({ selector }) - Extract text from elements
6. screenshot({ fullPage }) - Take a screenshot
7. done({ result }) - Task complete, return results

Rules:
- Analyze the screenshot carefully to understand the page structure
- Use specific, reliable CSS selectors
- If an action fails, try an alternative approach
- Provide reasoning for each action
- Return ONLY valid JSON`
    },
    {
      role: 'user',
      content: [
        {
          type: 'text',
          text: `Goal: ${goal}

Page Information:
- URL: ${pageInfo.url}
- Title: ${pageInfo.title}

Previous Actions:
${history.map((h, i) => `${i + 1}. ${h.action}: ${h.reasoning}`).join('\n')}

Current Screenshot:`
        },
        {
          type: 'image_url',
          image_url: {
            url: screenshot,
            detail: 'high'
          }
        }
      ]
    }
  ];
  
  const response = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages,
    max_tokens: 1000,
    temperature: 0.2,
    response_format: { type: 'json_object' }
  });
  
  try {
    const result = JSON.parse(response.choices[0].message.content);
    return result;
  } catch (error) {
    return {
      action: 'done',
      parameters: { 
        result: 'Error parsing LLM response',
        rawResponse: response.choices[0].message.content 
      },
      reasoning: 'Failed to parse JSON response'
    };
  }
}

// Main execution
const goal = $input.first().json.goal;
const screenshot = $input.first().json.screenshot;
const history = $input.first().json.history || [];
const pageInfo = $input.first().json.pageInfo || {};

const action = await planNextAction(goal, screenshot, history, pageInfo);

return [{
  json: {
    action: action.action,
    parameters: action.parameters,
    reasoning: action.reasoning,
    confidence: action.confidence || 0.9
  }
}];

// Anthropic Claude Agent Controller
const { Anthropic } = require('@anthropic-ai/sdk');

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY
});

async function claudeAgentStep(goal, context, availableTools) {
  const response = await anthropic.messages.create({
    model: 'claude-3-opus-20240229',
    max_tokens: 4096,
    temperature: 0.1,
    system: `You are an autonomous web browsing agent. You have access to browser automation tools.

Your available tools:
${JSON.stringify(availableTools, null, 2)}

Follow these principles:
1. Break complex tasks into steps
2. Wait for page loads after navigation
3. Use specific selectors (IDs are preferred)
4. Handle pagination by checking for "next" buttons
5. Extract structured data when possible
6. Report completion with extracted data`,
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'text',
            text: `Goal: ${goal}\n\nCurrent Context:\n${JSON.stringify(context, null, 2)}`
          }
        ]
      }
    ],
    tools: [
      {
        name: 'navigate',
        description: 'Navigate to a URL',
        input_schema: {
          type: 'object',
          properties: {
            url: { type: 'string', description: 'The URL to navigate to' }
          },
          required: ['url']
        }
      },
      {
        name: 'click',
        description: 'Click an element',
        input_schema: {
          type: 'object',
          properties: {
            selector: { type: 'string', description: 'CSS selector for the element' }
          },
          required: ['selector']
        }
      },
      {
        name: 'type',
        description: 'Type text into an input field',
        input_schema: {
          type: 'object',
          properties: {
            selector: { type: 'string' },
            text: { type: 'string' }
          },
          required: ['selector', 'text']
        }
      },
      {
        name: 'extract',
        description: 'Extract data from the page',
        input_schema: {
          type: 'object',
          properties: {
            selector: { type: 'string' },
            attributes: { 
              type: 'array', 
              items: { type: 'string' },
              description: 'Attributes to extract (e.g., ["href", "data-id"])'
            }
          },
          required: ['selector']
        }
      },
      {
        name: 'complete',
        description: 'Mark task as complete',
        input_schema: {
          type: 'object',
          properties: {
            success: { type: 'boolean' },
            data: { type: 'object' },
            summary: { type: 'string' }
          },
          required: ['success']
        }
      }
    ]
  });
  
  // Parse tool use from response
  const toolUse = response.content.find(c => c.type === 'tool_use');
  
  if (toolUse) {
    return {
      action: toolUse.name,
      parameters: toolUse.input,
      reasoning: response.content.find(c => c.type === 'text')?.text || 'Tool execution'
    };
  }
  
  return {
    action: 'unknown',
    reasoning: response.content.find(c => c.type === 'text')?.text || 'No tool selected'
  };
}

// Execute
const result = await claudeAgentStep(
  $input.first().json.goal,
  $input.first().json.context,
  $input.first().json.availableTools
);

return [{ json: result }];

// Local LLM Agent Controller using Ollama
const axios = require('axios');

const OLLAMA_URL = process.env.OLLAMA_URL || 'http://localhost:11434';

async function localAgentStep(goal, context, screenshot = null) {
  // Prepare prompt
  let prompt = `You are a web automation agent. Your goal: ${goal}\n\n`;
  prompt += `Current page: ${context.url}\n`;
  prompt += `Title: ${context.title}\n`;
  
  if (context.previousActions?.length > 0) {
    prompt += `\nPrevious actions:\n`;
    context.previousActions.forEach((action, i) => {
      prompt += `${i + 1}. ${action.action}: ${action.result}\n`;
    });
  }
  
  if (screenshot) {
    prompt += `\n[Screenshot provided as base64 image data]\n`;
  }
  
  prompt += `\nRespond with a JSON object containing:
- "action": One of [navigate, click, type, scroll, extract, complete]
- "parameters": Action-specific parameters
- "reasoning": Brief explanation of your decision\n`;
  
  // Call Ollama
  const response = await axios.post(`${OLLAMA_URL}/api/generate`, {
    model: 'llama3.1-vision',  // or llava, bakllava, etc.
    prompt,
    images: screenshot ? [screenshot.replace(/^data:image\/\w+;base64,/, '')] : [],
    stream: false,
    format: 'json',
    options: {
      temperature: 0.2,
      num_predict: 500
    }
  });
  
  try {
    const result = JSON.parse(response.data.response);
    return result;
  } catch (error) {
    return {
      action: 'complete',
      parameters: { success: false, error: 'Failed to parse response' },
      reasoning: response.data.response
    };
  }
}

// Execute
const result = await localAgentStep(
  $input.first().json.goal,
  $input.first().json.context,
  $input.first().json.screenshot
);

return [{ json: result }];

{
  "name": "AI Browser Agent Loop",
  "nodes": [
    {
      "parameters": {
        "jsCode": "// Initialize or continue agent session\nconst session = $input.first().json.session || {\n  id: 'session_' + Date.now(),\n  goal: $input.first().json.goal,\n  steps: [],\n  data: {},\n  status: 'running'\n};\n\n// Check if we've exceeded step limit\nif (session.steps.length >= 25) {\n  session.status = 'max_steps_reached';\n  return [{ json: session }];\n}\n\nreturn [{ json: session }];"
      },
      "name": "Initialize Session",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1
    },
    {
      "parameters": {
        "jsCode": "// Check if task is complete\nconst session = $input.first().json;\n\nif (session.status !== 'running') {\n  return [{ json: { complete: true, session } }];\n}\n\n// Get current page state from Playwright\nconst browserService = require('/opt/n8n/custom/browser-service.js');\nconst service = new browserService({ headless: true });\n\n// Take screenshot\nconst screenshotResult = await service.screenshot(session.id, { fullPage: false });\n\n// Get page info\nconst pageInfo = await service.evaluate(session.id, () => ({\n  url: window.location.href,\n  title: document.title,\n  headings: Array.from(document.querySelectorAll('h1, h2')).map(h => h.textContent.trim())\n}));\n\nreturn [{ \n  json: { \n    complete: false, \n    session, \n    screenshot: screenshotResult.screenshot,\n    pageInfo: pageInfo.result\n  } \n}];"
      },
      "name": "Get Page State",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1
    },
    {
      "parameters": {
        "jsCode": "// Call LLM to plan next action\nconst { OpenAI } = require('openai');\nconst openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });\n\nconst state = $input.first().json;\n\nconst response = await openai.chat.completions.create({\n  model: 'gpt-4o',\n  messages: [\n    {\n      role: 'system',\n      content: 'You are a web automation agent. Analyze the screenshot and decide the next action.'\n    },\n    {\n      role: 'user',\n      content: [\n        { type: 'text', text: `Goal: ${state.session.goal}` },\n        { type: 'image_url', image_url: { url: state.screenshot } }\n      ]\n    }\n  ],\n  response_format: { type: 'json_object' },\n  max_tokens: 500\n});\n\nconst action = JSON.parse(response.choices[0].message.content);\n\nreturn [{ \n  json: {\n    session: state.session,\n    action,\n    screenshot: state.screenshot\n  }\n}];"
      },
      "name": "LLM Planning",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1
    },
    {
      "parameters": {
        "jsCode": "// Execute the planned action\nconst state = $input.first().json;\nconst action = state.action;\n\nconst browserService = require('/opt/n8n/custom/browser-service.js');\nconst service = new browserService({ headless: true });\n\nlet result;\nswitch (action.action) {\n  case 'navigate':\n    result = await service.navigate(state.session.id, action.parameters.url);\n    break;\n  case 'click':\n    result = await service.click(state.session.id, action.parameters.selector);\n    break;\n  case 'type':\n    result = await service.type(state.session.id, action.parameters.selector, action.parameters.text);\n    break;\n  case 'extract':\n    result = await service.extract(state.session.id, action.parameters.selector);\n    break;\n  case 'complete':\n    result = { success: true, complete: true };\n    break;\n  default:\n    result = { error: 'Unknown action' };\n}\n\n// Update session\nstate.session.steps.push({\n  action: action.action,\n  parameters: action.parameters,\n  result,\n  timestamp: new Date().toISOString()\n});\n\nif (action.action === 'complete') {\n  state.session.status = 'completed';\n  state.session.data = action.parameters.data;\n}\n\nreturn [{ json: state.session }];"
      },
      "name": "Execute Action",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1
    },
    {
      "parameters": {
        "conditions": {
          "boolean": [{\n            "value1": "={{ $json.status }}",\n            "value2": "completed"\n          }]\n        }\n      },
      "name": "Task Complete?",
      "type": "n8n-nodes-base.if",
      "typeVersion": 1
    },
    {
      "parameters": {
        "url": "={{ $workflow.webhookUrl }}",
        "options": {}
      },
      "name": "Loop Back",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1
    },
    {
      "parameters": {
        "respondWith": "json",
        "responseBody": "={{ JSON.stringify({\n          success: true,\n          goal: $input.first().json.goal,\n          steps: $input.first().json.steps.length,\n          data: $input.first().json.data\n        }) }}"
      },
      "name": "Return Results",
      "type": "n8n-nodes-base.respondToWebhook",
      "typeVersion": 1
    }
  ],
  "connections": {
    "Initialize Session": {
      "main": [[{ "node": "Get Page State", "type": "main", "index": 0 }]]
    },
    "Get Page State": {
      "main": [[{ "node": "LLM Planning", "type": "main", "index": 0 }]]
    },
    "LLM Planning": {
      "main": [[{ "node": "Execute Action", "type": "main", "index": 0 }]]
    },
    "Execute Action": {
      "main": [[{ "node": "Task Complete?", "type": "main", "index": 0 }]]
    },
    "Task Complete?": {
      "main": [\n        [{ "node": "Return Results", "type": "main", "index": 0 }],\n        [{ "node": "Loop Back", "type": "main", "index": 0 }]\n      ]\n    }\n  }\n}"

// Authentication Handler
class AuthHandler {
  async handleLogin(sessionId, credentials, browserService) {
    const { page } = browserService.browsers.get(sessionId);
    
    // Step 1: Navigate to login page
    await browserService.navigate(sessionId, credentials.loginUrl);
    await page.waitForTimeout(2000);
    
    // Step 2: Fill credentials
    await browserService.type(sessionId, credentials.usernameSelector, credentials.username);
    await browserService.type(sessionId, credentials.passwordSelector, credentials.password);
    
    // Step 3: Submit login
    await browserService.click(sessionId, credentials.submitSelector);
    
    // Step 4: Handle 2FA if present
    const has2FA = await this.detect2FA(page);
    if (has2FA) {
      const code = await this.get2FACode(credentials.twoFactorMethod);
      await browserService.type(sessionId, credentials.twoFASelector, code);
      await browserService.click(sessionId, credentials.twoFASubmitSelector);
    }
    
    // Step 5: Wait for dashboard/post-login state
    await page.waitForSelector(credentials.postLoginSelector, { timeout: 30000 });
    
    // Step 6: Save session state
    const storageState = await page.context().storageState();
    await this.saveSession(sessionId, storageState);
    
    return { success: true, authenticated: true };
  }
  
  async detect2FA(page) {
    const twoFAIndicators = [
      'text=input[type="tel"]',  // OTP input
      'input[name*="code"]',
      'input[placeholder*="code" i]',
      'text=Two-factor',
      'text=Verification code'
    ];
    
    for (const indicator of twoFAIndicators) {
      const visible = await page.locator(indicator).isVisible().catch(() => false);
      if (visible) return true;
    }
    return false;
  }
  
  async get2FACode(method) {
    switch (method.type) {
      case 'totp':
        // Generate TOTP code
        const speakeasy = require('speakeasy');
        return speakeasy.totp({
          secret: method.secret,
          encoding: 'base32'
        });
        
      case 'email':
        // Poll email for code
        return await this.pollEmailForCode(method.emailConfig);
        
      case 'sms':
        // Retrieve from SMS API
        return await this.getSMSCode(method.phoneNumber);
        
      default:
        throw new Error('Unsupported 2FA method');
    }
  }
  
  async saveSession(sessionId, storageState) {
    // Save to Redis or database for reuse
    const redis = require('redis');
    const client = redis.createClient();
    await client.set(`session:${sessionId}:storage`, JSON.stringify(storageState));
    await client.expire(`session:${sessionId}:storage`, 86400); // 24 hours
  }
  
  async restoreSession(sessionId, browserService) {
    const redis = require('redis');
    const client = redis.createClient();
    const storageState = await client.get(`session:${sessionId}:storage`);
    
    if (storageState) {
      // Launch browser with saved state
      const browser = await chromium.launch({ headless: true });
      const context = await browser.newContext({
        storageState: JSON.parse(storageState)
      });
      const page = await context.newPage();
      
      browserService.browsers.set(sessionId, { browser, context, page });
      return { success: true, restored: true };
    }
    
    return { success: false, restored: false };
  }
}

// Dynamic Content Handler
class DynamicContentHandler {
  async waitForDynamicContent(sessionId, browserService, options = {}) {
    const { page } = browserService.browsers.get(sessionId);
    
    const {
      contentSelector,
      loadingIndicator,
      maxWaitTime = 30000,
      checkInterval = 500
    } = options;
    
    const startTime = Date.now();
    let lastContentCount = 0;
    let stableCount = 0;
    
    while (Date.now() - startTime < maxWaitTime) {
      // Wait for loading to complete
      if (loadingIndicator) {
        await page.locator(loadingIndicator).waitFor({ 
          state: 'hidden', 
          timeout: 5000 
        }).catch(() => {});
      }
      
      // Check content count
      const currentCount = await page.locator(contentSelector).count();
      
      if (currentCount === lastContentCount) {
        stableCount++;
        if (stableCount >= 3) {
          // Content has stabilized
          break;
        }
      } else {
        stableCount = 0;
        lastContentCount = currentCount;
      }
      
      await page.waitForTimeout(checkInterval);
    }
    
    return { 
      success: true, 
      elementCount: lastContentCount,
      waitTime: Date.now() - startTime 
    };
  }
  
  async handleInfiniteScroll(sessionId, browserService, options = {}) {
    const { page } = browserService.browsers.get(sessionId);
    
    const {
      itemSelector,
      maxScrolls = 10,
      scrollDelay = 1000,
      stopCondition = null
    } = options;
    
    let scrollCount = 0;
    let itemsBefore = 0;
    
    while (scrollCount < maxScrolls) {
      // Count items before scroll
      itemsBefore = await page.locator(itemSelector).count();
      
      // Scroll to bottom
      await page.evaluate(() => {
        window.scrollTo(0, document.body.scrollHeight);
      });
      
      // Wait for new content to load
      await page.waitForTimeout(scrollDelay);
      
      // Check if new items loaded
      const itemsAfter = await page.locator(itemSelector).count();
      
      if (itemsAfter === itemsBefore) {
        // No new content loaded
        break;
      }
      
      // Check custom stop condition
      if (stopCondition) {
        const shouldStop = await page.evaluate(stopCondition);
        if (shouldStop) break;
      }
      
      scrollCount++;
    }
    
    return {
      success: true,
      scrollCount,
      totalItems: await page.locator(itemSelector).count()
    };
  }
  
  async handlePagination(sessionId, browserService, options) {
    const { page } = browserService.browsers.get(sessionId);
    const { itemSelector, nextButtonSelector, maxPages = 10 } = options;
    
    const allItems = [];
    let currentPage = 1;
    
    while (currentPage <= maxPages) {
      // Extract items from current page
      const items = await browserService.extract(sessionId, itemSelector);
      allItems.push(...items.data);
      
      // Check for next button
      const hasNext = await page.locator(nextButtonSelector).isVisible().catch(() => false);
      if (!hasNext) break;
      
      // Click next
      const nextDisabled = await page.locator(nextButtonSelector).evaluate(
        el => el.disabled || el.classList.contains('disabled')
      );
      if (nextDisabled) break;
      
      await browserService.click(sessionId, nextButtonSelector);
      await page.waitForTimeout(2000);
      
      currentPage++;
    }
    
    return {
      success: true,
      pagesScraped: currentPage,
      totalItems: allItems.length,
      items: allItems
    };
  }
}

// Anti-Detection and CAPTCHA Handler
class AntiBotHandler {
  async solveCaptcha(sessionId, page, captchaType) {
    switch (captchaType) {
      case 'recaptcha_v2':
        return await this.solveReCaptchaV2(page);
      case 'recaptcha_v3':
        return await this.solveReCaptchaV3(page);
      case 'hcaptcha':
        return await this.solveHCaptcha(page);
      case 'image':
        return await this.solveImageCaptcha(page);
      default:
        throw new Error(`Unsupported CAPTCHA type: ${captchaType}`);
    }
  }
  
  async solveReCaptchaV2(page) {
    // Use 2captcha or similar service
    const apiKey = process.env.CAPTCHA_API_KEY;
    
    // Get site key
    const siteKey = await page.evaluate(() => {
      const element = document.querySelector('.g-recaptcha');
      return element ? element.getAttribute('data-sitekey') : null;
    });
    
    if (!siteKey) {
      throw new Error('reCAPTCHA site key not found');
    }
    
    // Submit to solving service
    const axios = require('axios');
    const submitResponse = await axios.post('http://2captcha.com/in.php', {
      key: apiKey,
      method: 'userrecaptcha',
      googlekey: siteKey,
      pageurl: page.url(),
      json: 1
    });
    
    const captchaId = submitResponse.data.request;
    
    // Poll for solution
    let solution = null;
    let attempts = 0;
    while (!solution && attempts < 60) {
      await new Promise(r => setTimeout(r, 5000));
      const result = await axios.get(`http://2captcha.com/res.php?key=${apiKey}&action=get&id=${captchaId}&json=1`);
      
      if (result.data.status === 1) {
        solution = result.data.request;
      }
      attempts++;
    }
    
    if (!solution) {
      throw new Error('CAPTCHA solving timeout');
    }
    
    // Inject solution
    await page.evaluate((token) => {
      document.getElementById('g-recaptcha-response').innerHTML = token;
    }, solution);
    
    return { success: true, solution };
  }
  
  async applyStealthMeasures(sessionId, browserService) {
    const { page } = browserService.browsers.get(sessionId);
    
    // Inject stealth scripts
    await page.evaluateOnNewDocument(() => {
      // Override navigator.webdriver
      Object.defineProperty(navigator, 'webdriver', {
        get: () => undefined
      });
      
      // Fake plugins
      Object.defineProperty(navigator, 'plugins', {
        get: () => [
          { name: 'Chrome PDF Plugin' },
          { name: 'Native Client' },
          { name: 'Widevine Content Decryption Module' }
        ]
      });
      
      // Fake languages
      Object.defineProperty(navigator, 'languages', {
        get: () => ['en-US', 'en']
      });
      
      // Override permissions
      const originalQuery = window.navigator.permissions.query;
      window.navigator.permissions.query = (parameters) => (
        parameters.name === 'notifications' ?
          Promise.resolve({ state: Notification.permission }) :
          originalQuery(parameters)
      );
      
      // Hide automation indicators
      delete window.navigator.__proto__.webdriver;
      
      // Canvas fingerprint randomization
      const originalToDataURL = HTMLCanvasElement.prototype.toDataURL;
      HTMLCanvasElement.prototype.toDataURL = function(...args) {
        const ctx = this.getContext('2d');
        if (ctx) {
          // Add subtle noise
          const imageData = ctx.getImageData(0, 0, this.width, this.height);
          const data = imageData.data;
          for (let i = 0; i < data.length; i += 4) {
            data[i] += Math.random() > 0.5 ? 1 : -1;
          }
          ctx.putImageData(imageData, 0, 0);
        }
        return originalToDataURL.apply(this, args);
      };
    });
    
    // Set realistic viewport and behavior
    await page.setViewportSize({ width: 1920, height: 1080 });
    
    return { success: true };
  }
  
  async simulateHumanBehavior(sessionId, browserService) {
    const { page } = browserService.browsers.get(sessionId);
    
    // Random mouse movements
    await this.randomMouseMovements(page);
    
    // Random scrolling
    await this.randomScrolling(page);
    
    // Random delays between actions
    await page.waitForTimeout(500 + Math.random() * 1500);
    
    return { success: true };
  }
  
  async randomMouseMovements(page) {
    const viewport = page.viewportSize();
    const points = [];
    
    // Generate bezier curve points
    for (let i = 0; i < 5; i++) {
      points.push({
        x: Math.random() * viewport.width,
        y: Math.random() * viewport.height
      });
    }
    
    for (const point of points) {
      await page.mouse.move(point.x, point.y);
      await page.waitForTimeout(50 + Math.random() * 100);
    }
  }
  
  async randomScrolling(page) {
    const scrollAmount = 100 + Math.random() * 400;
    const direction = Math.random() > 0.5 ? 1 : -1;
    
    await page.evaluate((amount, dir) => {
      window.scrollBy(0, amount * dir);
    }, scrollAmount, direction);
    
    await page.waitForTimeout(200 + Math.random() * 300);
  }
}