Upload 2 files

browser-agent.js

@@ -0,0 +1,277 @@
+/**
+ * Browser Agent - AI-Powered Browser Automation with Vision
+ * Uses Qwen VL to see screenshots and decide actions like a human
+ */
+
+// Vision Model Configuration
+export const VISION_MODEL = 'qwen/qwen-2.5-vl-7b-instruct:free';
+
+// Get OpenRouter API Keys with fallback (same pattern as Vercel)
+function getOpenRouterKeys() {
+    const keys = [];
+    for (let i = 1; i <= 10; i++) {
+        const key = process.env[`OPENROUTER_API_KEY_${i}`];
+        if (key && key.trim()) keys.push(key.trim());
+    }
+    // Also check the base key
+    if (process.env.OPENROUTER_API_KEY) {
+        keys.push(process.env.OPENROUTER_API_KEY.trim());
+    }
+    return keys;
+}
+
+/**
+ * Analyze screenshot with Vision AI and decide next action
+ */
+async function analyzeWithVision(screenshotBase64, task, previousSteps = [], currentUrl = '') {
+    const stepHistory = previousSteps.map((s, i) =>
+        `Step ${i + 1}: ${s.action.type} - ${s.action.description || ''}`
+    ).join('\n');
+
+    const prompt = `You are a browser automation agent. You can see the current webpage screenshot.
+
+TASK: ${task}
+
+CURRENT URL: ${currentUrl}
+
+PREVIOUS STEPS:
+${stepHistory || 'None yet'}
+
+Based on what you see in the screenshot, decide the NEXT ACTION to complete the task.
+
+Respond in this exact JSON format:
+{
+    "observation": "Brief description of what you see on the page",
+    "thinking": "Your reasoning about what to do next",
+    "action": {
+        "type": "click" | "type" | "scroll" | "goto" | "wait" | "done",
+        "x": 500,
+        "y": 300,
+        "text": "text to type if action is type",
+        "url": "url if action is goto",
+        "direction": "up or down if scroll",
+        "description": "human readable description of this action"
+    },
+    "taskComplete": false,
+    "result": "Only fill this if taskComplete is true - the final answer/result"
+}
+
+IMPORTANT:
+- If you see search results with the information needed, extract it and set taskComplete: true
+- For click actions, estimate x,y coordinates based on where you see the element
+- If you see a search box, type the search query
+- If the page needs to scroll to see more, use scroll action
+- Be efficient - don't take unnecessary steps`;
+
+    const keys = getOpenRouterKeys();
+    if (keys.length === 0) {
+        console.error('[BrowserAgent] No OpenRouter API keys found!');
+        return {
+            observation: 'No API keys configured',
+            thinking: 'Cannot analyze without API keys',
+            action: { type: 'wait', description: 'Waiting - no API keys' },
+            taskComplete: false
+        };
+    }
+
+    // Try each key until one works
+    for (const apiKey of keys) {
+        try {
+            const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${apiKey}`,
+                    'Content-Type': 'application/json',
+                    'HTTP-Referer': 'https://luks-pied.vercel.app',
+                    'X-Title': 'Lukas Browser Agent'
+                },
+                body: JSON.stringify({
+                    model: VISION_MODEL,
+                    messages: [{
+                        role: 'user',
+                        content: [
+                            { type: 'text', text: prompt },
+                            {
+                                type: 'image_url',
+                                image_url: {
+                                    url: `data:image/png;base64,${screenshotBase64}`
+                                }
+                            }
+                        ]
+                    }],
+                    max_tokens: 1000
+                })
+            });
+
+            if (response.status === 429) {
+                console.log('[BrowserAgent] Rate limited, trying next key...');
+                continue;
+            }
+
+            const data = await response.json();
+
+            if (data.choices && data.choices[0]?.message?.content) {
+                const content = data.choices[0].message.content;
+                // Extract JSON from response (handle markdown code blocks)
+                const jsonMatch = content.match(/\{[\s\S]*\}/);
+                if (jsonMatch) {
+                    return JSON.parse(jsonMatch[0]);
+                }
+            }
+
+            if (data.error) {
+                console.log(`[BrowserAgent] API error: ${data.error.message}, trying next key...`);
+                continue;
+            }
+        } catch (error) {
+            console.log(`[BrowserAgent] Key failed: ${error.message}, trying next...`);
+            continue;
+        }
+    }
+
+    console.error('[BrowserAgent] All API keys failed');
+    return {
+        observation: 'Error analyzing screenshot',
+        thinking: 'All API keys failed',
+        action: { type: 'wait', description: 'Waiting due to error' },
+        taskComplete: false
+    };
+}
+
+/**
+ * Execute a browser action
+ */
+async function executeAction(page, action) {
+    try {
+        switch (action.type) {
+            case 'click':
+                await page.mouse.click(action.x, action.y);
+                await page.waitForTimeout(1000);
+                break;
+
+            case 'type':
+                if (action.x && action.y) {
+                    await page.mouse.click(action.x, action.y);
+                    await page.waitForTimeout(300);
+                }
+                await page.keyboard.type(action.text, { delay: 50 });
+                await page.keyboard.press('Enter');
+                await page.waitForTimeout(2000);
+                break;
+
+            case 'scroll':
+                const amount = action.direction === 'up' ? -400 : 400;
+                await page.mouse.wheel(0, amount);
+                await page.waitForTimeout(500);
+                break;
+
+            case 'goto':
+                await page.goto(action.url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+                await page.waitForTimeout(2000);
+                break;
+
+            case 'wait':
+                await page.waitForTimeout(2000);
+                break;
+
+            case 'done':
+                // Task is complete, no action needed
+                break;
+
+            default:
+                console.log('[BrowserAgent] Unknown action:', action.type);
+        }
+        return true;
+    } catch (error) {
+        console.error('[BrowserAgent] Action execution error:', error.message);
+        return false;
+    }
+}
+
+/**
+ * Run the Browser Agent loop
+ */
+async function runBrowserAgent(page, task, socket, maxSteps = 10) {
+    console.log(`[BrowserAgent] Starting task: "${task}"`);
+
+    const steps = [];
+    let taskComplete = false;
+    let finalResult = null;
+
+    // Start by going to Google
+    await page.goto('https://www.google.com', { waitUntil: 'domcontentloaded' });
+    await page.waitForTimeout(1000);
+
+    for (let i = 0; i < maxSteps && !taskComplete; i++) {
+        console.log(`[BrowserAgent] Step ${i + 1}/${maxSteps}`);
+
+        // 1. Take screenshot
+        const screenshotBuffer = await page.screenshot({ type: 'png' });
+        const screenshotBase64 = screenshotBuffer.toString('base64');
+
+        // 2. Get current URL
+        const currentUrl = page.url();
+
+        // 3. Analyze with Vision AI
+        console.log('[BrowserAgent] Analyzing screenshot with Vision AI...');
+        const analysis = await analyzeWithVision(screenshotBase64, task, steps, currentUrl);
+
+        console.log(`[BrowserAgent] Observation: ${analysis.observation}`);
+        console.log(`[BrowserAgent] Thinking: ${analysis.thinking}`);
+        console.log(`[BrowserAgent] Action: ${analysis.action?.type} - ${analysis.action?.description}`);
+
+        // 4. Record step
+        const step = {
+            stepNumber: i + 1,
+            screenshot: screenshotBase64,
+            observation: analysis.observation,
+            thinking: analysis.thinking,
+            action: analysis.action,
+            timestamp: Date.now()
+        };
+        steps.push(step);
+
+        // 5. Send update to frontend
+        if (socket) {
+            socket.emit('agent:step', {
+                step: i + 1,
+                total: maxSteps,
+                screenshot: screenshotBase64,
+                observation: analysis.observation,
+                action: analysis.action?.description || analysis.action?.type,
+                taskComplete: analysis.taskComplete
+            });
+        }
+
+        // 6. Check if task is complete
+        if (analysis.taskComplete) {
+            taskComplete = true;
+            finalResult = analysis.result;
+            console.log('[BrowserAgent] Task completed!');
+            console.log('[BrowserAgent] Result:', finalResult);
+            break;
+        }
+
+        // 7. Execute the action
+        if (analysis.action && analysis.action.type !== 'done') {
+            await executeAction(page, analysis.action);
+        }
+    }
+
+    // Take final screenshot
+    const finalScreenshot = await page.screenshot({ type: 'png' });
+
+    return {
+        success: taskComplete,
+        steps: steps,
+        result: finalResult,
+        finalScreenshot: finalScreenshot.toString('base64'),
+        totalSteps: steps.length
+    };
+}
+
+export {
+    runBrowserAgent,
+    analyzeWithVision,
+    executeAction
+};

index.js

@@ -1,359 +1,395 @@
-/**
- * Lukas Worker - The Muscles
- * Browser automation server with Socket.io for real-time control and streaming
- * Deploy this to Hugging Face Spaces as a Docker container
- */
-
-import express from 'express';
-import { createServer } from 'http';
-import { Server } from 'socket.io';
-import { chromium } from 'playwright';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const PORT = process.env.PORT || 7860;
-const WORKER_SECRET = process.env.WORKER_SECRET || 'lukas-dev-secret';
-
-const app = express();
-const httpServer = createServer(app);
-
-// Socket.io server with CORS for Vercel
-const io = new Server(httpServer, {
-    cors: {
-        origin: ['https://luks-pied.vercel.app', 'http://localhost:5173', 'http://localhost:3000'],
-        methods: ['GET', 'POST'],
-        credentials: true
-    },
-    transports: ['websocket', 'polling']
-});
-
-// Health check endpoint (Required for Hugging Face)
-app.get('/', (req, res) => {
-    res.json({
-        status: 'ok',
-        service: 'Lukas Worker (The Muscles)',
-        version: '1.0.0',
-        ready: true
-    });
-});
-
-app.get('/health', (req, res) => {
-    res.json({ status: 'healthy', timestamp: new Date().toISOString() });
-});
-
-// =============================================================================
-//                          BROWSER MANAGEMENT
-// =============================================================================
-
-let browser = null;
-let browserContext = null;
-let activePage = null;
-let streamInterval = null;
-let connectedClient = null;
-
-async function initBrowser() {
-    if (browser) return;
-
-    console.log('🚀 Launching browser...');
-    browser = await chromium.launch({
-        headless: true,
-        args: [
-            '--no-sandbox',
-            '--disable-setuid-sandbox',
-            '--disable-dev-shm-usage',
-            '--disable-accelerated-2d-canvas',
-            '--no-first-run',
-            '--no-zygote',
-            '--disable-gpu'
-        ]
-    });
-
-    browserContext = await browser.newContext({
-        viewport: { width: 1280, height: 720 },
-        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
-    });
-
-    activePage = await browserContext.newPage();
-    console.log('✅ Browser ready');
-}
-
-async function closeBrowser() {
-    if (browser) {
-        await browser.close();
-        browser = null;
-        browserContext = null;
-        activePage = null;
-        console.log('🔴 Browser closed');
-    }
-}
-
-// =============================================================================
-//                          STREAMING
-// =============================================================================
-
-async function startStreaming(socket) {
-    if (streamInterval) clearInterval(streamInterval);
-    if (!activePage) return;
-
-    console.log('📺 Starting live stream...');
-
-    streamInterval = setInterval(async () => {
-        try {
-            if (!activePage) return;
-
-            const screenshot = await activePage.screenshot({
-                type: 'jpeg',
-                quality: 60,
-                fullPage: false
-            });
-
-            const base64 = screenshot.toString('base64');
-            socket.emit('stream:frame', { image: base64 });
-        } catch (error) {
-            // Page might be navigating, ignore errors
-        }
-    }, 200); // ~5 FPS for smooth streaming
-}
-
-function stopStreaming() {
-    if (streamInterval) {
-        clearInterval(streamInterval);
-        streamInterval = null;
-        console.log('📺 Stream stopped');
-    }
-}
-
-// =============================================================================
-//                          SOCKET HANDLERS
-// =============================================================================
-
-io.use((socket, next) => {
-    const token = socket.handshake.auth?.token;
-
-    if (token === WORKER_SECRET) {
-        console.log('✅ Client authenticated');
-        next();
-    } else {
-        console.log('❌ Authentication failed');
-        next(new Error('Authentication failed'));
-    }
-});
-
-io.on('connection', async (socket) => {
-    console.log('🔗 Client connected:', socket.id);
-
-    // Only allow one client at a time
-    if (connectedClient && connectedClient !== socket.id) {
-        socket.emit('error', { message: 'Another client is already connected' });
-        socket.disconnect();
-        return;
-    }
-
-    connectedClient = socket.id;
-
-    // Initialize browser on first connection
-    await initBrowser();
-
-    // Start streaming automatically
-    startStreaming(socket);
-
-    // =========================================================================
-    //                      COMMAND HANDLERS
-    // =========================================================================
-
-    socket.on('browser:goto', async (data, callback) => {
-        try {
-            const { url } = data;
-            console.log(`🌐 Navigating to: ${url}`);
-
-            await activePage.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
-
-            const title = await activePage.title();
-            callback({ success: true, title });
-        } catch (error) {
-            console.error('❌ Navigation error:', error.message);
-            callback({ success: false, error: error.message });
-        }
-    });
-
-    socket.on('browser:click', async (data, callback) => {
-        try {
-            const { selector, x, y } = data;
-
-            if (x !== undefined && y !== undefined) {
-                // Click by coordinates
-                console.log(`🖱️ Clicking at coordinates: (${x}, ${y})`);
-                await activePage.mouse.click(x, y);
-            } else if (selector) {
-                // Click by selector
-                console.log(`🖱️ Clicking selector: ${selector}`);
-                await activePage.click(selector, { timeout: 10000 });
-            } else {
-                throw new Error('Either selector or x,y coordinates required');
-            }
-
-            callback({ success: true });
-        } catch (error) {
-            console.error('❌ Click error:', error.message);
-            callback({ success: false, error: error.message });
-        }
-    });
-
-    socket.on('browser:type', async (data, callback) => {
-        try {
-            const { selector, text } = data;
-
-            if (selector) {
-                // Type into specific element
-                console.log(`⌨️ Typing in selector: ${selector}`);
-                await activePage.fill(selector, text);
-            } else {
-                // Type using keyboard (to focused element)
-                console.log(`⌨️ Typing text: ${text.substring(0, 20)}...`);
-                await activePage.keyboard.type(text, { delay: 30 });
-            }
-
-            callback({ success: true });
-        } catch (error) {
-            console.error('❌ Type error:', error.message);
-            callback({ success: false, error: error.message });
-        }
-    });
-
-    socket.on('browser:scroll', async (data, callback) => {
-        try {
-            const { direction = 'down', amount = 500 } = data;
-            console.log(`📜 Scrolling ${direction}`);
-
-            await activePage.evaluate((dir, amt) => {
-                window.scrollBy(0, dir === 'down' ? amt : -amt);
-            }, direction, amount);
-
-            callback({ success: true });
-        } catch (error) {
-            callback({ success: false, error: error.message });
-        }
-    });
-
-    socket.on('browser:screenshot', async (data, callback) => {
-        try {
-            console.log('📸 Taking screenshot...');
-
-            const screenshot = await activePage.screenshot({
-                type: 'png',
-                fullPage: data?.fullPage || false
-            });
-
-            callback({ success: true, image: screenshot.toString('base64') });
-        } catch (error) {
-            callback({ success: false, error: error.message });
-        }
-    });
-
-    socket.on('browser:getContent', async (data, callback) => {
-        try {
-            console.log('📄 Getting page content...');
-
-            const content = await activePage.content();
-            const title = await activePage.title();
-            const url = activePage.url();
-
-            // Get text content for AI analysis
-            const textContent = await activePage.evaluate(() => {
-                return document.body.innerText.substring(0, 10000);
-            });
-
-            callback({ success: true, content, title, url, textContent });
-        } catch (error) {
-            callback({ success: false, error: error.message });
-        }
-    });
-
-    socket.on('browser:getAccessibility', async (data, callback) => {
-        try {
-            console.log('🌳 Getting accessibility tree...');
-
-            const tree = await activePage.accessibility.snapshot();
-            callback({ success: true, tree });
-        } catch (error) {
-            callback({ success: false, error: error.message });
-        }
-    });
-
-    socket.on('browser:execute', async (data, callback) => {
-        try {
-            const { action, params } = data;
-            console.log(`⚡ Executing action: ${action}`);
-
-            let result = null;
-
-            switch (action) {
-                case 'waitForSelector':
-                    await activePage.waitForSelector(params.selector, { timeout: params.timeout || 10000 });
-                    result = { found: true };
-                    break;
-
-                case 'pressKey':
-                    await activePage.keyboard.press(params.key);
-                    result = { pressed: params.key };
-                    break;
-
-                case 'goBack':
-                    await activePage.goBack();
-                    result = { navigated: true };
-                    break;
-
-                case 'goForward':
-                    await activePage.goForward();
-                    result = { navigated: true };
-                    break;
-
-                case 'reload':
-                    await activePage.reload();
-                    result = { reloaded: true };
-                    break;
-
-                default:
-                    throw new Error(`Unknown action: ${action}`);
-            }
-
-            callback({ success: true, result });
-        } catch (error) {
-            callback({ success: false, error: error.message });
-        }
-    });
-
-    // =========================================================================
-    //                      DISCONNECT HANDLER
-    // =========================================================================
-
-    socket.on('disconnect', () => {
-        console.log('🔌 Client disconnected:', socket.id);
-        stopStreaming();
-        connectedClient = null;
-
-        // Don't close browser immediately, keep it warm for reconnection
-        // closeBrowser();
-    });
-});
-
-// =============================================================================
-//                          START SERVER
-// =============================================================================
-
-httpServer.listen(PORT, '0.0.0.0', () => {
-    console.log('═══════════════════════════════════════════════════════════════');
-    console.log(`  🦾 Lukas Worker (The Muscles) is running`);
-    console.log(`  📡 Socket.io server: http://0.0.0.0:${PORT}`);
-    console.log(`  🔐 Secret required for connection`);
-    console.log('═══════════════════════════════════════════════════════════════');
-});
-
-// Graceful shutdown
-process.on('SIGTERM', async () => {
-    console.log('🛑 Shutting down...');
-    stopStreaming();
-    await closeBrowser();
-    process.exit(0);
-});
+/**
+ * Lukas Worker - The Muscles
+ * Browser automation server with Socket.io for real-time control and streaming
+ * Deploy this to Hugging Face Spaces as a Docker container
+ */
+
+import express from 'express';
+import { createServer } from 'http';
+import { Server } from 'socket.io';
+import { chromium } from 'playwright';
+import dotenv from 'dotenv';
+import { runBrowserAgent } from './browser-agent.js';
+
+dotenv.config();
+
+const PORT = process.env.PORT || 7860;
+const WORKER_SECRET = process.env.WORKER_SECRET || 'lukas-dev-secret';
+
+const app = express();
+const httpServer = createServer(app);
+
+// Socket.io server with CORS for Vercel
+const io = new Server(httpServer, {
+    cors: {
+        origin: ['https://luks-pied.vercel.app', 'http://localhost:5173', 'http://localhost:3000'],
+        methods: ['GET', 'POST'],
+        credentials: true
+    },
+    transports: ['websocket', 'polling']
+});
+
+// Health check endpoint (Required for Hugging Face)
+app.get('/', (req, res) => {
+    res.json({
+        status: 'ok',
+        service: 'Lukas Worker (The Muscles)',
+        version: '1.0.0',
+        ready: true
+    });
+});
+
+app.get('/health', (req, res) => {
+    res.json({ status: 'healthy', timestamp: new Date().toISOString() });
+});
+
+// =============================================================================
+//                          BROWSER MANAGEMENT
+// =============================================================================
+
+let browser = null;
+let browserContext = null;
+let activePage = null;
+let streamInterval = null;
+let connectedClient = null;
+
+async function initBrowser() {
+    if (browser) return;
+
+    console.log('🚀 Launching browser...');
+    browser = await chromium.launch({
+        headless: true,
+        args: [
+            '--no-sandbox',
+            '--disable-setuid-sandbox',
+            '--disable-dev-shm-usage',
+            '--disable-accelerated-2d-canvas',
+            '--no-first-run',
+            '--no-zygote',
+            '--disable-gpu'
+        ]
+    });
+
+    browserContext = await browser.newContext({
+        viewport: { width: 1280, height: 720 },
+        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
+    });
+
+    activePage = await browserContext.newPage();
+    console.log('✅ Browser ready');
+}
+
+async function closeBrowser() {
+    if (browser) {
+        await browser.close();
+        browser = null;
+        browserContext = null;
+        activePage = null;
+        console.log('🔴 Browser closed');
+    }
+}
+
+// =============================================================================
+//                          STREAMING
+// =============================================================================
+
+async function startStreaming(socket) {
+    if (streamInterval) clearInterval(streamInterval);
+    if (!activePage) return;
+
+    console.log('📺 Starting live stream...');
+
+    streamInterval = setInterval(async () => {
+        try {
+            if (!activePage) return;
+
+            const screenshot = await activePage.screenshot({
+                type: 'jpeg',
+                quality: 60,
+                fullPage: false
+            });
+
+            const base64 = screenshot.toString('base64');
+            socket.emit('stream:frame', { image: base64 });
+        } catch (error) {
+            // Page might be navigating, ignore errors
+        }
+    }, 200); // ~5 FPS for smooth streaming
+}
+
+function stopStreaming() {
+    if (streamInterval) {
+        clearInterval(streamInterval);
+        streamInterval = null;
+        console.log('📺 Stream stopped');
+    }
+}
+
+// =============================================================================
+//                          SOCKET HANDLERS
+// =============================================================================
+
+io.use((socket, next) => {
+    const token = socket.handshake.auth?.token;
+
+    if (token === WORKER_SECRET) {
+        console.log('✅ Client authenticated');
+        next();
+    } else {
+        console.log('❌ Authentication failed');
+        next(new Error('Authentication failed'));
+    }
+});
+
+io.on('connection', async (socket) => {
+    console.log('🔗 Client connected:', socket.id);
+
+    // Only allow one client at a time
+    if (connectedClient && connectedClient !== socket.id) {
+        socket.emit('error', { message: 'Another client is already connected' });
+        socket.disconnect();
+        return;
+    }
+
+    connectedClient = socket.id;
+
+    // Initialize browser on first connection
+    await initBrowser();
+
+    // Start streaming automatically
+    startStreaming(socket);
+
+    // =========================================================================
+    //                      COMMAND HANDLERS
+    // =========================================================================
+
+    socket.on('browser:goto', async (data, callback) => {
+        try {
+            const { url } = data;
+            console.log(`🌐 Navigating to: ${url}`);
+
+            await activePage.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+
+            const title = await activePage.title();
+            callback({ success: true, title });
+        } catch (error) {
+            console.error('❌ Navigation error:', error.message);
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    socket.on('browser:click', async (data, callback) => {
+        try {
+            const { selector, x, y } = data;
+
+            if (x !== undefined && y !== undefined) {
+                // Click by coordinates
+                console.log(`🖱️ Clicking at coordinates: (${x}, ${y})`);
+                await activePage.mouse.click(x, y);
+            } else if (selector) {
+                // Click by selector
+                console.log(`🖱️ Clicking selector: ${selector}`);
+                await activePage.click(selector, { timeout: 10000 });
+            } else {
+                throw new Error('Either selector or x,y coordinates required');
+            }
+
+            callback({ success: true });
+        } catch (error) {
+            console.error('❌ Click error:', error.message);
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    socket.on('browser:type', async (data, callback) => {
+        try {
+            const { selector, text } = data;
+
+            if (selector) {
+                // Type into specific element
+                console.log(`⌨️ Typing in selector: ${selector}`);
+                await activePage.fill(selector, text);
+            } else {
+                // Type using keyboard (to focused element)
+                console.log(`⌨️ Typing text: ${text.substring(0, 20)}...`);
+                await activePage.keyboard.type(text, { delay: 30 });
+            }
+
+            callback({ success: true });
+        } catch (error) {
+            console.error('❌ Type error:', error.message);
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    socket.on('browser:scroll', async (data, callback) => {
+        try {
+            const { direction = 'down', amount = 500 } = data;
+            console.log(`📜 Scrolling ${direction}`);
+
+            await activePage.evaluate((dir, amt) => {
+                window.scrollBy(0, dir === 'down' ? amt : -amt);
+            }, direction, amount);
+
+            callback({ success: true });
+        } catch (error) {
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    socket.on('browser:screenshot', async (data, callback) => {
+        try {
+            console.log('📸 Taking screenshot...');
+
+            const screenshot = await activePage.screenshot({
+                type: 'png',
+                fullPage: data?.fullPage || false
+            });
+
+            callback({ success: true, image: screenshot.toString('base64') });
+        } catch (error) {
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    socket.on('browser:getContent', async (data, callback) => {
+        try {
+            console.log('📄 Getting page content...');
+
+            const content = await activePage.content();
+            const title = await activePage.title();
+            const url = activePage.url();
+
+            // Get text content for AI analysis
+            const textContent = await activePage.evaluate(() => {
+                return document.body.innerText.substring(0, 10000);
+            });
+
+            callback({ success: true, content, title, url, textContent });
+        } catch (error) {
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    socket.on('browser:getAccessibility', async (data, callback) => {
+        try {
+            console.log('🌳 Getting accessibility tree...');
+
+            const tree = await activePage.accessibility.snapshot();
+            callback({ success: true, tree });
+        } catch (error) {
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    socket.on('browser:execute', async (data, callback) => {
+        try {
+            const { action, params } = data;
+            console.log(`⚡ Executing action: ${action}`);
+
+            let result = null;
+
+            switch (action) {
+                case 'waitForSelector':
+                    await activePage.waitForSelector(params.selector, { timeout: params.timeout || 10000 });
+                    result = { found: true };
+                    break;
+
+                case 'pressKey':
+                    await activePage.keyboard.press(params.key);
+                    result = { pressed: params.key };
+                    break;
+
+                case 'goBack':
+                    await activePage.goBack();
+                    result = { navigated: true };
+                    break;
+
+                case 'goForward':
+                    await activePage.goForward();
+                    result = { navigated: true };
+                    break;
+
+                case 'reload':
+                    await activePage.reload();
+                    result = { reloaded: true };
+                    break;
+
+                default:
+                    throw new Error(`Unknown action: ${action}`);
+            }
+
+            callback({ success: true, result });
+        } catch (error) {
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    // =========================================================================
+    //                      DISCONNECT HANDLER
+    // =========================================================================
+
+    // =========================================================================
+    //                      BROWSER AGENT (AI-POWERED)
+    // =========================================================================
+
+    socket.on('browser:agent', async (data, callback) => {
+        try {
+            const { task, maxSteps = 10 } = data;
+            console.log('🤖 [Agent] Starting AI Browser Agent...');
+            console.log(`🎯 [Agent] Task: "${task}"`);
+
+            if (!activePage) {
+                await initBrowser();
+            }
+
+            // Run the browser agent with Vision AI
+            const result = await runBrowserAgent(activePage, task, socket, maxSteps);
+
+            console.log(`✅ [Agent] Completed in ${result.totalSteps} steps`);
+            callback({
+                success: result.success,
+                result: result.result,
+                steps: result.steps.map(s => ({
+                    stepNumber: s.stepNumber,
+                    observation: s.observation,
+                    action: s.action?.description || s.action?.type
+                })),
+                finalScreenshot: result.finalScreenshot,
+                totalSteps: result.totalSteps
+            });
+        } catch (error) {
+            console.error('❌ [Agent] Error:', error.message);
+            callback({ success: false, error: error.message });
+        }
+    });
+
+    socket.on('disconnect', () => {
+        console.log('🔌 Client disconnected:', socket.id);
+        stopStreaming();
+        connectedClient = null;
+
+        // Don't close browser immediately, keep it warm for reconnection
+        // closeBrowser();
+    });
+});
+
+// =============================================================================
+//                          START SERVER
+// =============================================================================
+
+httpServer.listen(PORT, '0.0.0.0', () => {
+    console.log('═══════════════════════════════════════════════════════════════');
+    console.log(`  🦾 Lukas Worker (The Muscles) is running`);
+    console.log(`  📡 Socket.io server: http://0.0.0.0:${PORT}`);
+    console.log(`  🔐 Secret required for connection`);
+    console.log('═══════════════════════════════════════════════════════════════');
+});
+
+// Graceful shutdown
+process.on('SIGTERM', async () => {
+    console.log('🛑 Shutting down...');
+    stopStreaming();
+    await closeBrowser();
+    process.exit(0);
+});