Added fixes for Devtools and Agent Server connection. Fixed Dockerfile

Author: olesho

agent-server/nodejs/src/lib/BrowserAgentServer.js

@@ -773,11 +773,66 @@ export class BrowserAgentServer extends EventEmitter {
    */
   async getCDPBrowserEndpoint() {
     try {
-      const cdpUrl = `http://${CONFIG.cdp.host}:${CONFIG.cdp.port}/json/version`;
-      logger.info('Attempting to connect to CDP', { cdpUrl });
-      const response = await fetch(cdpUrl);
-      const data = await response.json();
-      return data.webSocketDebuggerUrl;
+      const path = '/json/version';
+      logger.info('Attempting to connect to CDP', {
+        host: CONFIG.cdp.host,
+        port: CONFIG.cdp.port,
+        path
+      });
+
+      // When connecting via host.docker.internal, we need to set Host header to localhost
+      // because Chrome only accepts CDP requests with localhost/127.0.0.1 in the Host header
+      const headers = {};
+      if (CONFIG.cdp.host === 'host.docker.internal') {
+        headers['Host'] = `localhost:${CONFIG.cdp.port}`;
+        logger.info('Using Host header override for host.docker.internal', headers);
+      }
+
+      const options = {
+        hostname: CONFIG.cdp.host,
+        port: CONFIG.cdp.port,
+        path: path,
+        method: 'GET',
+        headers: headers
+      };
+
+      const http = await import('http');
+
+      return new Promise((resolve, reject) => {
+        const req = http.default.request(options, (res) => {
+          let data = '';
+
+          res.on('data', (chunk) => {
+            data += chunk;
+          });
+
+          res.on('end', () => {
+            try {
+              const jsonData = JSON.parse(data);
+              let wsUrl = jsonData.webSocketDebuggerUrl;
+
+              // Replace localhost with host.docker.internal when running in Docker
+              if (CONFIG.cdp.host === 'host.docker.internal' && wsUrl) {
+                wsUrl = wsUrl.replace('ws://localhost:', 'ws://host.docker.internal:');
+                wsUrl = wsUrl.replace('ws://127.0.0.1:', 'ws://host.docker.internal:');
+                logger.info('Rewrote WebSocket URL for Docker', { original: jsonData.webSocketDebuggerUrl, rewritten: wsUrl });
+              }
+
+              resolve(wsUrl);
+            } catch (parseError) {
+              logger.error('Failed to parse CDP response', { error: parseError.message, data });
+              reject(new Error('Failed to connect to Chrome DevTools Protocol'));
+            }
+          });
+        });
+
+        req.on('error', (error) => {
+          logger.error('Failed to get CDP browser endpoint', { error: error.message });
+          reject(new Error('Failed to connect to Chrome DevTools Protocol'));
+        });
+
+        req.end();
+      });
     } catch (error) {
       logger.error('Failed to get CDP browser endpoint', { error: error.message });
       throw new Error('Failed to connect to Chrome DevTools Protocol');

docker/Dockerfile

@@ -47,25 +47,88 @@ RUN git remote add upstream https://github.com/BrowserOperator/browser-operator-
 RUN git fetch upstream
 RUN git checkout upstream/main
 
-# Allow configurable automated mode
-ARG AUTOMATED_MODE=false
-
-# Set build-time flags based on Docker arg
-RUN if [ "$AUTOMATED_MODE" = "true" ]; then \
-      sed -i 's/AUTOMATED_MODE: false/AUTOMATED_MODE: true/' \
-        front_end/panels/ai_chat/core/BuildConfig.ts; \
-    fi
+# Force automated mode (matches parent Dockerfile.devtools approach - rock-solid)
+RUN sed -i 's/AUTOMATED_MODE: false/AUTOMATED_MODE: true/' \
+    front_end/panels/ai_chat/core/BuildConfig.ts || true
 
 # Build Browser Operator version with current changes
 RUN npm run build
 
-# Production stage
+# ==============================================================================
+# Agent Server build stage
+# ==============================================================================
+FROM --platform=linux/amd64 node:18-alpine AS agent-server-builder
+
+WORKDIR /workspace
+
+# Copy agent-server from local directory
+COPY agent-server/nodejs /workspace/agent-server
+
+WORKDIR /workspace/agent-server
+
+# Install dependencies
+RUN npm install
+
+# ==============================================================================
+# Production stage - DevTools + Agent Server
+# ==============================================================================
 FROM --platform=linux/amd64 nginx:alpine
 
+# Install Node.js (required for agent-server)
+RUN apk add --no-cache nodejs npm bash
+
 # Copy the built DevTools frontend
 COPY --from=builder /workspace/devtools/devtools-frontend/out/Default/gen/front_end /usr/share/nginx/html
 
+# Copy agent-server from builder stage
+COPY --from=agent-server-builder /workspace/agent-server /opt/agent-server
+
 # Copy nginx config
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
 
-EXPOSE 8000
+# Create startup script to run both nginx and agent-server
+RUN cat > /usr/local/bin/start-services.sh <<'EOFSCRIPT'
+#!/bin/bash
+set -e
+
+# Start nginx in background
+echo "Starting nginx..."
+nginx -g "daemon off;" &
+NGINX_PID=$!
+
+# Start agent-server in background
+echo "Starting agent-server..."
+cd /opt/agent-server
+node start.js &
+AGENT_PID=$!
+
+# Wait for both processes
+echo "DevTools running on http://localhost:8000"
+echo "Agent Server WebSocket on ws://localhost:8082"
+echo "Agent Server HTTP API on http://localhost:8080"
+echo "Press Ctrl+C to stop..."
+
+# Trap SIGTERM and SIGINT
+trap "kill $NGINX_PID $AGENT_PID 2>/dev/null || true; exit 0" SIGTERM SIGINT
+
+# Wait for either process to exit
+wait -n $NGINX_PID $AGENT_PID
+
+# If one exits, kill the other
+kill $NGINX_PID $AGENT_PID 2>/dev/null || true
+EOFSCRIPT
+
+RUN chmod +x /usr/local/bin/start-services.sh
+
+# Environment variables for agent-server
+ENV PORT=8082
+ENV API_PORT=8080
+ENV HOST=0.0.0.0
+ENV CDP_HOST=host.docker.internal
+ENV CDP_PORT=9222
+
+EXPOSE 8000 8080 8082
+
+# Override the nginx entrypoint
+ENTRYPOINT []
+CMD ["/bin/bash", "/usr/local/bin/start-services.sh"]

docker/README.md

@@ -1,12 +1,13 @@
-# Docker Setup for Chrome DevTools Frontend
+# Docker Setup for Browser Operator DevTools + Agent Server
 
-This directory contains Docker configuration files for building and running the Chrome DevTools Frontend in a containerized environment.
+This directory contains Docker configuration files for building and running the Browser Operator DevTools Frontend with integrated Agent Server in a containerized environment.
 
 ## Overview
 
 The Docker setup uses a multi-stage build process:
-1. **Build Stage**: Compiles the DevTools frontend using the full development environment
-2. **Production Stage**: Serves only the built files using Nginx (lightweight, ~50MB final image)
+1. **DevTools Build Stage**: Compiles the DevTools frontend using the full development environment
+2. **Agent Server Build Stage**: Installs Node.js dependencies for the agent server
+3. **Production Stage**: Serves DevTools via Nginx + runs Agent Server (Node.js) in the same container
 
 ## Prerequisites
 
@@ -22,11 +23,8 @@ The Docker setup uses a multi-stage build process:
 From the repository root directory:
 
 ```bash
-# Build with automated mode (default - bypasses OAuth, auto-enables evaluation)
-docker build -f docker/Dockerfile -t browser-operator-automated .
-
-# Build with normal mode (requires manual authentication)
-docker build -f docker/Dockerfile --build-arg AUTOMATED_MODE=false -t browser-operator-manual .
+# Build DevTools image (AUTOMATED_MODE is always enabled)
+docker build -f docker/Dockerfile -t browser-operator-devtools .
 
 # Or use docker-compose (recommended)
 docker-compose -f docker/docker-compose.yml build
@@ -35,67 +33,143 @@ docker-compose -f docker/docker-compose.yml build
 ### Running the Container
 
 ```bash
-# Automated mode (no authentication required, evaluation auto-enabled)
-docker run -d -p 8000:8000 --name browser-operator-automated browser-operator-automated
-
-# Manual mode (requires OAuth/API key setup)
-docker run -d -p 8000:8000 --name browser-operator-manual browser-operator-manual
+# Run DevTools container (AUTOMATED_MODE enabled by default)
+docker run -d -p 8000:8000 --name browser-operator-devtools browser-operator-devtools
 
 # Or using docker-compose (recommended)
 docker-compose -f docker/docker-compose.yml up -d
 ```
 
-The DevTools will be available at: http://localhost:8000
+The services will be available at:
+- **DevTools UI**: http://localhost:8000
+- **Agent Server HTTP API**: http://localhost:8080
+- **Agent Server WebSocket**: ws://localhost:8082
 
 ### Accessing DevTools
 
-Once the container is running, open Chrome or Chromium with:
+Once the container is running, open Chrome or Chromium with remote debugging enabled:
 
 ```bash
 # macOS
-/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --custom-devtools-frontend=http://localhost:8000/
+"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
+  --remote-debugging-port=9222 \
+  --remote-allow-origins="*" \
+  --auto-open-devtools-for-tabs \
+  --user-data-dir=/tmp/chrome-debug-profile \
+  --custom-devtools-frontend=http://localhost:8000/
 
 # Linux
-google-chrome --custom-devtools-frontend=http://localhost:8000/
+google-chrome \
+  --remote-debugging-port=9222 \
+  --remote-allow-origins="*" \
+  --auto-open-devtools-for-tabs \
+  --user-data-dir=/tmp/chrome-debug-profile \
+  --custom-devtools-frontend=http://localhost:8000/
 
 # Windows
-chrome.exe --custom-devtools-frontend=http://localhost:8000/
+"C:\Program Files\Google\Chrome\Application\chrome.exe" \
+  --remote-debugging-port=9222 \
+  --remote-allow-origins="*" \
+  --auto-open-devtools-for-tabs \
+  --user-data-dir=C:\temp\chrome-debug-profile \
+  --custom-devtools-frontend=http://localhost:8000/
 ```
 
+**Important flags:**
+- `--remote-debugging-port=9222` - Enables CDP for the Agent Server to connect
+- `--remote-allow-origins="*"` - Allows CDP connections from Docker containers
+- `--auto-open-devtools-for-tabs` - Automatically opens DevTools for new tabs (required for agent-server automation)
+- `--user-data-dir=/tmp/chrome-debug-profile` - Uses a temporary profile to avoid conflicts
+- `--custom-devtools-frontend=http://localhost:8000/` - Uses the Browser Operator DevTools
+
+**Note:** Make sure to completely quit Chrome before starting it with these flags. On macOS, use `Cmd+Q` or run `killall "Google Chrome"`.
+
 ## File Structure
 
 ```
 docker/
-├── Dockerfile           # Multi-stage build configuration
+├── Dockerfile           # Multi-stage build (DevTools + Agent Server)
 ├── .dockerignore       # Files to exclude from Docker context
 ├── nginx.conf          # Nginx server configuration
 ├── docker-compose.yml  # Docker Compose configuration
 └── README.md          # This file
+
+../agent-server/         # Agent Server source code (included in build)
 ```
 
-## Automated Mode vs Manual Mode
+## Automated Mode (Always Enabled)
 
-### Automated Mode (Default)
-- **Purpose**: Optimized for Docker/CI environments and automated workflows
-- **Authentication**: Bypasses OAuth panel - no manual setup required  
-- **Evaluation**: Automatically enables evaluation mode for API wrapper connectivity
-- **Use cases**: Production deployments, CI/CD, headless automation, API integration
+This Docker image is built with **AUTOMATED_MODE** always enabled for seamless deployment:
 
-### Manual Mode  
-- **Purpose**: Standard interactive usage
-- **Authentication**: Requires OAuth setup or API key configuration
-- **Evaluation**: Manual enable/disable in settings
-- **Use cases**: Development, interactive testing, manual usage
+- **Authentication**: Bypasses OAuth panel - no manual setup required
+- **Evaluation**: Automatically enables evaluation mode for agent-server connectivity
+- **Use cases**: Production deployments, CI/CD, headless automation, API integration
 
 ```bash
-# Example automated mode workflow
-docker build -f docker/Dockerfile -t browser-operator-automated .
-docker run -d -p 8000:8000 --name browser-operator browser-operator-automated
+# Example workflow - ready to use immediately
+docker build -f docker/Dockerfile -t browser-operator-devtools .
+docker run -d -p 8000:8000 --name browser-operator browser-operator-devtools
 
 # Ready to use immediately - no authentication required!
-# Evaluation server can connect automatically via WebSocket (ws://localhost:8080)
+# Agent server can connect automatically via WebSocket (ws://localhost:8082)
 ```
 
+**Note**: This approach matches the parent repository's `Dockerfile.devtools` which has proven to work "rock-solid" in production.
+
+## Agent Server
+
+The container includes a fully functional Agent Server that provides:
+
+### WebSocket API (port 8082)
+- JSON-RPC 2.0 bidirectional communication
+- Browser agent lifecycle management
+- Direct CDP integration
+
+### HTTP REST API (port 8080)
+- `POST /v1/responses` - Send tasks to browser agents
+- `POST /page/screenshot` - Capture screenshots via CDP
+- `POST /page/content` - Get HTML/text content
+- `GET /status` - Health check
+
+### Configuration
+
+The Agent Server runs with these default settings:
+- **WebSocket Port**: 8082
+- **HTTP API Port**: 8080
+- **Host**: 0.0.0.0 (listens on all interfaces)
+- **Authentication**: Disabled (automated mode)
+
+To customize, you can override environment variables:
+
+```bash
+docker run -d -p 8000:8000 -p 8080:8080 -p 8082:8082 \
+  -e EVAL_SERVER_WS_PORT=8082 \
+  -e EVAL_SERVER_HTTP_PORT=8080 \
+  -e EVAL_SERVER_HOST=0.0.0.0 \
+  browser-operator-devtools
+```
+
+### Testing the Agent Server
+
+```bash
+# Health check
+curl http://localhost:8080/status
+
+# Send a task (requires browser with remote debugging)
+curl -X POST http://localhost:8080/v1/responses \
+  -H "Content-Type: application/json" \
+  -d '{
+    "input": "Navigate to google.com",
+    "url": "about:blank",
+    "wait_timeout": 5000,
+    "model": {
+      "main_model": {"provider": "openai", "model": "gpt-4", "api_key": "sk-..."}
+    }
+  }'
+```
+
+For more details on the Agent Server API, see `../agent-server/README.md`.
+
 ## Advanced Usage
 
 ### Development Mode