Deploy BrowserPilot with NumPy fix (2.2.6)

.dockerignore

@@ -0,0 +1,27 @@
+.git
+.gitignore
+*.md
+!README.md
+.env
+.env.*
+__pycache__
+*.pyc
+.pytest_cache
+.coverage
+*.egg-info
+dist
+build
+node_modules
+frontend/node_modules
+frontend/dist
+*.log
+.DS_Store
+Thumbs.db
+.vscode
+.idea
+*.swp
+*.swo
+*~
+.cache
+outputs/*
+!outputs/.gitkeep

.env.test

@@ -0,0 +1 @@
+GOOGLE_API_KEY=dummy_key_for_test

.github/workflows/README.md

@@ -0,0 +1,58 @@
+# GitHub Actions Workflows
+
+## Docker Build (`docker-build.yml`)
+
+This workflow automatically builds and publishes the BrowserPilot Docker image when changes are merged to the main branch.
+
+### Triggers
+- **Push to main branch**: When code is merged to main, specifically when these files change:
+  - `Dockerfile`
+  - `docker-compose*.yml`
+  - `backend/**`
+  - `frontend/**`
+  - `requirements.txt`
+- **Pull Requests**: Builds (but doesn't push) images for PRs to test the build process
+- **Manual trigger**: Can be run manually from the GitHub Actions tab
+
+### What it does
+1. **Builds the Docker image** using the multi-stage Dockerfile
+2. **Publishes to GitHub Container Registry** (`ghcr.io`) with multiple tags:
+   - `latest` (for main branch)
+   - `main` (branch name)
+   - `main-<sha>` (commit SHA)
+3. **Multi-architecture support**: Builds for both `linux/amd64` and `linux/arm64`
+4. **Caching**: Uses GitHub Actions cache for faster builds
+5. **Security**: Generates build attestations for supply chain security
+
+### Published Images
+The Docker images are published to:
+- `ghcr.io/veverkap/browserpilot:latest`
+- `ghcr.io/veverkap/browserpilot:main`
+- `ghcr.io/veverkap/browserpilot:main-<commit-sha>`
+
+### Usage
+Users can pull and run the published images:
+
+```bash
+# Pull the latest image
+docker pull ghcr.io/veverkap/browserpilot:latest
+
+# Run with Docker
+docker run -p 8000:8000 -e GOOGLE_API_KEY=your_key ghcr.io/veverkap/browserpilot:latest
+
+# Or use in docker-compose.yml
+services:
+  browserpilot:
+    image: ghcr.io/veverkap/browserpilot:latest
+    # ... other config
+```
+
+### Permissions Required
+The workflow needs the following permissions (automatically granted):
+- `contents: read` - To checkout the repository
+- `packages: write` - To publish to GitHub Container Registry
+
+### Optional: Docker Hub Integration
+The workflow includes an optional step to update Docker Hub descriptions if you want to also publish to Docker Hub. To enable this:
+1. Add `DOCKERHUB_USERNAME` and `DOCKERHUB_TOKEN` secrets to your repository
+2. The workflow will automatically update the Docker Hub repository description using `README.docker.md`

.github/workflows/docker-build.yml

@@ -0,0 +1,51 @@
+name: Build and Publish Docker Image
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to the Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=sha,prefix={{branch}}-
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/keepalive.yml

@@ -0,0 +1,50 @@
+name: Keep HF Space Awake
+
+on:
+  schedule:
+    # Runs every 13 minutes
+    - cron: '*/13 * * * *'
+  workflow_dispatch: # Allow manual trigger
+
+jobs:
+  keepalive:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Ping Hugging Face Space
+        id: ping
+        run: |
+          echo "🔍 Pinging Hugging Face Space..."
+          RESPONSE=$(curl -s -o /dev/null -w "%{http_code}" "${{ secrets.HF_SPACE_URL }}")
+          echo "✅ Response status: $RESPONSE"
+          echo "status_code=$RESPONSE" >> $GITHUB_OUTPUT
+          
+          if [ "$RESPONSE" -ge 200 ] && [ "$RESPONSE" -lt 400 ]; then
+            echo "✅ Space is awake!"
+            echo "success=true" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "❌ Space returned status: $RESPONSE"
+            echo "success=false" >> $GITHUB_OUTPUT
+            exit 1
+          fi
+        env:
+          HF_SPACE_URL: ${{ secrets.HF_SPACE_URL }}
+      
+      - name: Notify Telegram on failure
+        if: failure()
+        run: |
+          echo "📧 Sending Telegram alert..."
+          curl -X POST "https://api.telegram.org/bot${{ secrets.TELEGRAM_BOT_TOKEN }}/sendMessage" \
+            -d "chat_id=${{ secrets.TELEGRAM_CHAT_ID }}" \
+            -d "text=⚠️ <b>KeepAlive Alert</b>%0A%0A🔴 HF Space health check failed!%0A<b>Status:</b> ${{ steps.ping.outputs.status_code }}%0A%0AThe Space might be sleeping or down." \
+            -d "parse_mode=HTML"
+      
+      - name: Notify Telegram on success (after previous failure)
+        if: success()
+        run: |
+          echo "📧 Sending Telegram success notification..."
+          curl -X POST "https://api.telegram.org/bot${{ secrets.TELEGRAM_BOT_TOKEN }}/sendMessage" \
+            -d "chat_id=${{ secrets.TELEGRAM_CHAT_ID }}" \
+            -d "text=✅ <b>KeepAlive OK</b>%0A%0A🟢 HF Space health check passed!%0A<b>Status:</b> ${{ steps.ping.outputs.status_code }}%0A%0AThe Space is awake and running." \
+            -d "parse_mode=HTML"
+

.gitignore

@@ -0,0 +1,31 @@
+venv
+.env
+__pycache__
+*.pyc
+outputs
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

DEPLOY_HUGGINGFACE.md

@@ -0,0 +1,105 @@
+# Hugging Face Spaces Deployment
+
+## Deploy en Hugging Face Spaces (100% GRATIS)
+
+### Paso 1: Crear cuenta en Hugging Face
+
+1. Ir a https://huggingface.co
+2. Click en "Sign Up" (usá GitHub para más facilidad)
+
+### Paso 2: Crear un nuevo Space
+
+1. Click en tu avatar → **"New Space"**
+2. Configurar el Space:
+   - **Space name**: `browserpilot` (o el nombre que quieras)
+   - **License**: MIT
+   - **SDK**: **Docker**
+   - **Visibility**: Public (o Private si querés)
+3. Click en **"Create Space"**
+
+### Paso 3: Conectar el repositorio de GitHub
+
+1. En el dashboard del Space, vas a ver **"Files"**
+2. Click en **"Import from GitHub"** (o **"Add file"** → **"Import from GitHub"**)
+3. Autorizá Hugging Face a acceder a tu GitHub
+4. Seleccioná el repositorio: `ncolex/33BrowserPilot`
+5. Click en **"Import"**
+
+### Paso 4: Configurar las Variables de Entorno
+
+1. En el Space, andá a **"Settings"** (pestaña de arriba)
+2. Bajá hasta **"Variables and secrets"**
+3. Agregá las siguientes variables:
+
+| Type | Key | Value |
+|------|-----|-------|
+| Secret | `GOOGLE_API_KEY` | `AIzaSyBDl98MXre7ecN9jW16EVltBlaf38awkdo` |
+| Secret | `DATABASE_URL` | `postgresql://neondb_owner:npg_obFVM76KLule@ep-twilight-field-aiwca4xu.c-4.us-east-1.aws.neon.tech/neondb?sslmode=require` |
+| Variable | `PYTHONUNBUFFERED` | `1` |
+
+**Para agregar cada una:**
+- Click en **"New secret"** o **"New variable"**
+- Completá el nombre y valor
+- Click en **"Save"**
+
+### Paso 5: Esperar el deploy
+
+1. Hugging Face va a empezar a construir el Docker automáticamente
+2. El estado va a cambiar: `Building` → `Running`
+3. Puede tardar 5-10 minutos la primera vez
+
+### Paso 6: ¡Listo!
+
+Una vez que diga **"Running"**, tu BrowserPilot está disponible en:
+
+```
+https://huggingface.co/spaces/tu-usuario/browserpilot
+```
+
+## Notas Importantes
+
+⚠️ **Recursos limitados**: Los Spaces free tienen 2 vCPU y 16GB RAM, pero son compartidos.
+
+⚠️ **Se duerme**: Después de ~48 horas de inactividad, el Space se duerme. El primer request puede tardar 1-2 minutos.
+
+⚠️ **Sin GPU**: El plan free no incluye GPU, solo CPU.
+
+⚠️ **Storage temporal**: Los archivos en `/app/outputs` se pierden cuando el Space se reinicia. Para storage persistente, necesitás usar Hugging Face Datasets o un servicio externo.
+
+## Actualizar el Space
+
+Cada vez que hagas push a GitHub:
+
+```bash
+cd /home/ncx/BROPILOT/33BrowserPilot
+git push origin main
+```
+
+Hugging Face va a detectar los cambios y redeployar automáticamente.
+
+## Troubleshooting
+
+### El Space no arranca
+- Revisá los logs en la pestaña **"Logs"**
+- Verificá que la `GOOGLE_API_KEY` esté configurada
+- Checkeá que el Dockerfile sea correcto
+
+### Error de memoria
+- El Space free tiene límites de memoria
+- Intentá reducir el uso de memoria en el código
+- Considerá upgrade al plan Pro ($9/mes) si necesitás más recursos
+
+### Los archivos no persisten
+- Los Spaces no tienen storage persistente en el plan free
+- Para guardar archivos permanentemente, usá:
+  - Hugging Face Datasets
+  - Un servicio externo (S3, Google Drive, etc.)
+  - La base de datos Neon para metadata
+
+## Opcional: Agregar storage persistente
+
+Para guardar los outputs permanentemente, podés usar Hugging Face Datasets:
+
+1. Crear un Dataset en Hugging Face
+2. Montarlo en el Space desde Settings → Datasets
+3. Guardar los archivos en `/datasets/tu-usuario/tu-dataset`

DEPLOY_RENDER.md

@@ -0,0 +1,177 @@
+# Despliegue en Render.com + Neon Database
+
+## Arquitectura
+
+- **Aplicación**: Render.com (Docker)
+- **Base de Datos**: Neon PostgreSQL (gratis, 500MB)
+- **Outputs**: Disco persistente en Render (5GB)
+
+## Paso 1: Crear la Base de Datos en Neon
+
+1. **Ir a Neon**
+   - Visitá https://neon.tech
+   - Click en "Sign Up" (usá GitHub para más facilidad)
+
+2. **Crear un nuevo proyecto**
+   - Click en "New Project"
+   - **Name**: `browserpilot-db`
+   - **Region**: Us-West (Oregon) - misma que Render
+   - Click en "Create Project"
+
+3. **Obtener la DATABASE_URL**
+   - En el dashboard del proyecto, vas a ver la "Connection String"
+   - Copiá el string que dice algo como:
+     ```
+     postgresql://user:password@ep-xxx.us-west-2.aws.neon.tech/dbname?sslmode=require
+     ```
+   - Guardala para el próximo paso
+
+4. **Configuración opcional**
+   - Podés ver la base de datos desde el dashboard de Neon
+   - Las tablas se crean automáticamente al iniciar la app
+
+## Paso 2: Desplegar en Render
+
+### Opción 1: Usando el Dashboard de Render (Recomendado)
+
+1. **Crear una cuenta en Render**
+   - Ir a https://render.com y registrarse
+
+2. **Crear un nuevo Web Service**
+   - Click en "New +" → "Web Service"
+   - Conectar tu repositorio de GitHub
+
+3. **Configurar el servicio**
+   - **Name**: `browserpilot` (o el nombre que quieras)
+   - **Region**: Oregon (us-west-2) - misma que Neon
+   - **Branch**: `main`
+   - **Root Directory**: (dejar vacío)
+   - **Runtime**: `Docker`
+   - **Docker Command**: (dejar vacío)
+
+4. **Configurar Variables de Entorno**
+   En la sección "Environment", agregar:
+   
+   | Key | Value |
+   |-----|-------|
+   | `GOOGLE_API_KEY` | `AIzaSyBDl98MXre7ecN9jW16EVltBlaf38awkdo` |
+   | `DATABASE_URL` | (pegá el connection string de Neon) |
+   | `SCRAPER_PROXIES` | `[]` (o tu configuración de proxies si tenés) |
+
+5. **Configurar Disk (opcional pero recomendado)**
+   - Click en "Add Disk"
+   - **Name**: `outputs`
+   - **Mount Path**: `/app/outputs`
+   - **Size**: 5 GB (mínimo)
+
+6. **Seleccionar Plan**
+   - **Starter** ($7/mes) - recomendado para empezar
+   - El plan free no soporta Docker
+
+7. **Deploy**
+   - Click en "Create Web Service"
+   - Esperar a que se complete el despliegue (~5-10 minutos)
+
+### Opción 2: Usando Render CLI
+
+```bash
+# Instalar Render CLI
+npm install -g @render-cloud/renderctl
+
+# Login
+renderctl login
+
+# Deploy usando el render.yaml
+cd /home/ncx/BROPILOT/33BrowserPilot
+renderctl up -f render.yaml
+```
+
+## Configuración del render.yaml
+
+El archivo `render.yaml` ya está configurado con:
+- Tipo: Web Service con Docker
+- Región: Oregon
+- Plan: Starter
+- Health check: `/`
+- Disco persistente para outputs
+
+## Después del despliegue
+
+1. **Verificar el deploy**
+   - Ir al dashboard de Render
+   - Ver los logs en tiempo real
+   - Verificar que el health check pase
+
+2. **Acceder a la aplicación**
+   - La URL será algo como: `https://browserpilot-xxxx.onrender.com`
+
+3. **Configurar dominio personalizado (opcional)**
+   - En el dashboard → Settings → Custom Domain
+
+## Variables de Entorno Requeridas
+
+| Variable | Requerida | Descripción |
+|----------|-----------|-------------|
+| `GOOGLE_API_KEY` | ✅ Sí | API key de Google Gemini |
+| `DATABASE_URL` | ✅ Sí | Connection string de Neon PostgreSQL |
+| `SCRAPER_PROXIES` | ❌ No | Configuración de proxies (JSON array) |
+
+## Costos Estimados
+
+| Servicio | Plan | Costo |
+|----------|------|-------|
+| **Render** | Starter | $7/mes |
+| **Render Disk** | 5GB | ~$0.50/mes |
+| **Neon** | Free | $0/mes (500MB) |
+| **Total** | | ~$7.50/mes |
+
+## Endpoints de la API
+
+### Jobs
+- `POST /job` - Crear un nuevo job
+- `GET /jobs` - Listar todos los jobs (con paginación)
+- `GET /job/{job_id}` - Obtener detalles de un job
+- `DELETE /job/{job_id}` - Eliminar un job
+- `GET /download/{job_id}` - Descargar el resultado
+
+### Streaming
+- `GET /streaming/{job_id}` - Obtener info de streaming
+- `POST /streaming/create/{job_id}` - Crear sesión de streaming
+- `DELETE /streaming/{job_id}` - Limpiar sesión
+- `WS /stream/{job_id}` - WebSocket para streaming
+
+### Sistema
+- `GET /stats` - Estadísticas del sistema
+- `GET /proxy/stats` - Estadísticas de proxies
+- `POST /proxy/reload` - Recargar proxies
+
+## Notas Importantes
+
+⚠️ **Importante**: Render no soporta el plan free para servicios Docker.
+
+⚠️ **Importante**: Los servicios en el plan starter se duermen después de 15 minutos de inactividad. El primer request después de dormir puede tardar ~30 segundos.
+
+⚠️ **Importante**: Neon tiene un límite de 500MB en el plan free. Si necesitás más espacio, considerá upgrade a Neon Pro ($19/mes).
+
+## Troubleshooting
+
+### El deploy falla
+- Verificar los logs en el dashboard de Render
+- Asegurarse de que el Dockerfile sea correcto
+- Verificar que las variables de entorno estén configuradas
+- Checkear que la DATABASE_URL de Neon sea correcta
+
+### La aplicación no responde
+- Verificar el health check en el dashboard
+- Revisar los logs de errores
+- Verificar que la GOOGLE_API_KEY sea válida
+- Verificar que la conexión a Neon funcione
+
+### Problemas de memoria
+- El plan starter tiene 512MB RAM
+- Si necesitás más, upgrade al plan Standard ($15/mes)
+
+### La base de datos no conecta
+- Verificar que la DATABASE_URL incluya `?sslmode=require`
+- Checkear que la región de Neon sea la misma que Render (us-west-2)
+- Verificar los logs de error de conexión

Dockerfile

@@ -0,0 +1,80 @@
+# Multi-stage Dockerfile for BrowserPilot
+# Stage 1: Build the React frontend
+FROM node:20-alpine AS frontend-builder
+
+# Set working directory for frontend
+WORKDIR /app/frontend
+
+# Copy package files
+COPY frontend/package*.json ./
+
+# Install all dependencies (including dev dependencies needed for build)
+RUN npm config set strict-ssl false && npm install
+
+# Copy frontend source code
+COPY frontend/ ./
+
+# Build the frontend
+RUN npm run build
+
+# Stage 2: Use Playwright's official Docker image with Python (Ubuntu-based)
+FROM mcr.microsoft.com/playwright/python:v1.53.0-jammy
+
+# Set working directory
+WORKDIR /app
+
+# Copy Python requirements and install dependencies
+COPY requirements.txt .
+# Install compatible versions of numpy and pandas for Python 3.10
+RUN pip install --trusted-host pypi.org --trusted-host pypi.python.org --trusted-host files.pythonhosted.org --no-cache-dir \
+    fastapi==0.111.0 \
+    uvicorn[standard]==0.29.0 \
+    playwright==1.53.0 \
+    google-generativeai==0.5.0 \
+    pydantic==2.7.1 \
+    bs4==0.0.2 \
+    lxml==5.2.1 \
+    markdownify==0.11.6 \
+    "numpy>=2.0.0,<2.3.0" \
+    "pandas>=2.0.0,<2.3.0" \
+    python-dateutil==2.9.0.post0 \
+    pytz==2025.2 \
+    tzdata==2025.2 \
+    reportlab==4.4.2 \
+    psycopg2-binary==2.9.9 \
+    asyncpg==0.29.0 \
+    python-telegram-bot==21.0 \
+    aiohttp==3.9.5
+
+# Copy backend source code
+COPY backend/ ./backend/
+
+# Copy built frontend from the frontend-builder stage
+COPY --from=frontend-builder /app/frontend/dist ./frontend/
+
+# Create outputs directory
+RUN mkdir -p outputs
+
+# Copy entrypoint script
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+# Set environment variables
+ENV PYTHONPATH=/app
+ENV PYTHONUNBUFFERED=1
+ENV GRADIO_SERVER_NAME=0.0.0.0
+ENV GRADIO_SERVER_PORT=8000
+
+# Expose the port the app runs on
+EXPOSE 8000
+
+# Create a non-root user for security (the playwright image already has pwuser)
+RUN chown -R pwuser:pwuser /app
+USER pwuser
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:8000/ || exit 1
+
+# Run the application using entrypoint
+ENTRYPOINT ["/entrypoint.sh"]

KEEPALIVE.md

@@ -0,0 +1,44 @@
+# KeepAlive para Hugging Face Spaces - GitHub Actions
+
+## ¿Qué es esto?
+
+GitHub Actions ejecuta un workflow cada **13 minutos** que hace ping a tu Hugging Face Space para evitar que se duerma.
+
+## Configuración
+
+### 1. Agregar el secreto en GitHub
+
+1. Andá a tu repo: https://github.com/ncolex/33BrowserPilot
+2. **Settings** → **Secrets and variables** → **Actions**
+3. **New repository secret**
+4. **Name**: `HF_SPACE_URL`
+5. **Value**: `https://huggingface.co/spaces/ncolex/browserpilot`
+6. **Add secret**
+
+### 2. ¡Listo!
+
+El workflow se ejecuta automáticamente cada 13 minutos.
+
+## Verificación
+
+- **Actions tab**: https://github.com/ncolex/33BrowserPilot/actions
+- **Workflow**: "Keep HF Space Awake"
+- **Runs**: Cada ~13 minutos
+
+## Trigger manual
+
+Podés ejecutar manualmente el workflow:
+1. Andá a **Actions** → **Keep HF Space Awake**
+2. **Run workflow** → **Run workflow**
+
+## Costo: **$0/mes**
+
+- **GitHub Actions**: 2000 minutos/mes gratis
+- **Este workflow**: ~1 minuto/mes (segundos realmente)
+- **Total usado**: <1% del límite gratis
+
+## Notas
+
+- Los workflows se pueden ejecutar cada 5 minutos como mínimo
+- 13 minutos es un buen balance (no muy frecuente, no muy raro)
+- El workflow falla si el Space está caído (esperado)

README.docker.md

@@ -0,0 +1,201 @@
+# 🐳 Docker Setup for BrowserPilot
+
+BrowserPilot can be easily deployed using Docker, which provides a consistent environment with all dependencies pre-installed.
+
+## Quick Start with Docker
+
+### 1. Using Docker Compose (Recommended)
+
+The easiest way to run BrowserPilot is with Docker Compose:
+
+```bash
+# Clone the repository
+git clone https://github.com/ai-naymul/BrowserPilot.git
+cd BrowserPilot
+
+# Create environment file
+echo 'GOOGLE_API_KEY=your_actual_api_key_here' > .env
+
+# Run with Docker Compose
+docker-compose up -d
+```
+
+The application will be available at `http://localhost:8000`.
+
+### 2. Using Docker Build & Run
+
+If you prefer to use Docker directly:
+
+```bash
+# Build the image
+docker build -t browserpilot .
+
+# Run the container
+docker run -d \
+  --name browserpilot \
+  -p 8000:8000 \
+  -e GOOGLE_API_KEY=your_actual_api_key_here \
+  -v $(pwd)/outputs:/app/outputs \
+  --shm-size=2g \
+  browserpilot
+```
+
+## Configuration
+
+### Environment Variables
+
+Set these environment variables for the container:
+
+```bash
+# Required
+GOOGLE_API_KEY=your_gemini_api_key_here
+
+# Optional - Proxy configuration
+SCRAPER_PROXIES='[{"server": "http://proxy1:port", "username": "user", "password": "pass"}]'
+```
+
+### Volume Mounts
+
+- `./outputs:/app/outputs` - Persist extracted data and downloads
+- `./.env:/app/.env:ro` - Mount environment file (optional)
+
+## Production Deployment
+
+For production use, use the production Docker Compose configuration:
+
+```bash
+# Production deployment
+docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d
+```
+
+This provides:
+- Resource limits (4GB RAM, 2 CPU cores)
+- Proper logging configuration
+- Restart policies
+- Optimized environment settings
+
+## Docker Image Details
+
+### Multi-Stage Build
+The Dockerfile uses a multi-stage build process:
+1. **Frontend Builder**: Builds the React frontend using Node.js Alpine
+2. **Runtime**: Uses Microsoft's Playwright Python image with all browser dependencies
+
+### Features
+- ✅ Pre-installed Playwright browsers (Chromium)
+- ✅ All system dependencies for browser automation
+- ✅ Non-root user for security
+- ✅ Health checks included
+- ✅ Optimized for container environments
+
+### Image Size
+The final image is approximately 2.5GB due to:
+- Playwright browsers and dependencies
+- Python runtime and packages
+- System libraries for browser automation
+
+## Troubleshooting
+
+### Common Issues
+
+**Container exits immediately:**
+```bash
+# Check logs
+docker logs browserpilot
+
+# Common issue: Missing GOOGLE_API_KEY
+docker run -e GOOGLE_API_KEY=your_key_here browserpilot
+```
+
+**Browser crashes or fails:**
+```bash
+# Increase shared memory size
+docker run --shm-size=2g browserpilot
+
+# Or with Docker Compose (already configured)
+docker-compose up
+```
+
+**Permission issues with outputs:**
+```bash
+# Fix output directory permissions
+sudo chown -R $(id -u):$(id -g) outputs/
+```
+
+### Health Checks
+
+The container includes health checks:
+```bash
+# Check container health
+docker inspect --format='{{.State.Health}}' browserpilot
+```
+
+### Performance Tuning
+
+For better performance:
+```bash
+# Increase resources
+docker run \
+  --memory=4g \
+  --cpus=2 \
+  --shm-size=2g \
+  browserpilot
+```
+
+## Development with Docker
+
+### Live Development
+For development with live reload:
+
+```bash
+# Mount source code for development
+docker run -it \
+  -p 8000:8000 \
+  -v $(pwd)/backend:/app/backend \
+  -v $(pwd)/outputs:/app/outputs \
+  -e GOOGLE_API_KEY=your_key_here \
+  browserpilot \
+  python -m uvicorn backend.main:app --host 0.0.0.0 --port 8000 --reload
+```
+
+### Building Custom Images
+
+To customize the Docker image:
+
+```dockerfile
+# Extend the base image
+FROM browserpilot:latest
+
+# Add custom dependencies
+RUN pip install your-custom-package
+
+# Copy custom configurations
+COPY custom-config.json /app/
+```
+
+## Security Considerations
+
+- The container runs as a non-root user (`pwuser`)
+- Uses security options for browser sandbox
+- Environment variables are not exposed in the image
+- Secrets should be mounted as files or environment variables
+
+## Monitoring and Logging
+
+### Logs
+```bash
+# View logs
+docker logs -f browserpilot
+
+# With timestamps
+docker logs -t browserpilot
+```
+
+### Monitoring
+```bash
+# Resource usage
+docker stats browserpilot
+
+# Container inspection
+docker inspect browserpilot
+```

README.md

@@ -1,10 +1,233 @@
----
-title: Browserpilot
-emoji: 📉
-colorFrom: purple
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# BrowserPilot
+
+> Ever wished you could tell your browser "Hey, go grab all the product prices from that e-commerce site" and it would just... do it? That's exactly what this does, but smarter.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Python 3.8+](https://img.shields.io/badge/python-3.8+-blue.svg)](https://www.python.org/downloads/)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
+
+## What's This All About?
+
+Tired of writing complex scrapers that break every time a website changes its layout? Yeah, me too. 
+
+This AI-powered browser actually *sees* web pages like you do. It doesn't care if Amazon redesigns their product pages or if LinkedIn adds new anti-bot measures. Just tell it what you want in plain English, and it figures out how to get it.
+
+Think of it as having a really smart intern who never gets tired, never makes mistakes, and can handle any website you throw at them - even the ones with annoying CAPTCHAs.
+
+## See It In Action
+
+Trust me, it's pretty cool watching an AI navigate websites like a human
+
+
+https://github.com/user-attachments/assets/39d2ed68-e121-49b9-817e-2eb5edc25627
+
+
+## Why You'll Love This
+
+### It Actually "Sees" Websites
+- Uses Google's Gemini AI to look at pages like you do
+- Automatically figures out if it's looking at Amazon, LinkedIn, or your random blog
+- Clicks the right buttons even when websites change their design
+- Works on literally any website (yes, even the weird ones)
+
+### Handles the Annoying Stuff
+- Gets blocked by Cloudflare? No problem, switches proxies automatically
+- Encounters a CAPTCHA? Solves it with AI vision
+- Website thinks it's a bot? Laughs in artificial intelligence
+- Proxy goes down? Switches to a backup faster than you can blink
+
+### Gives You Data How You Want It
+- Say "save as PDF" and boom, you get a PDF
+- Ask for CSV and it structures everything perfectly
+- Want JSON? It knows what you mean
+- Organizes everything with timestamps and metadata (because details matter)
+
+### Watch It Work Live
+- Stream the browser view in real-time (it's oddly satisfying)
+- Click and type remotely if you need to step in
+- Multiple people can watch the same session
+- Perfect for debugging or just showing off
+
+## Getting Started (It's Actually Pretty Easy)
+
+### 🐳 Quick Start with Docker (Recommended)
+
+The easiest way to run BrowserPilot is with Docker:
+
+```bash
+# Clone and start with Docker Compose
+git clone https://github.com/ai-naymul/BrowserPilot.git
+cd BrowserPilot
+echo 'GOOGLE_API_KEY=your_actual_api_key_here' > .env
+docker-compose up -d
+```
+
+Open `http://localhost:8000` and you're ready to go! 🚀
+
+[📖 Full Docker Documentation](README.docker.md)
+
+### 💻 Manual Installation
+
+### What You'll Need
+- Python 3.8 or newer (check with `python --version`)
+- A Google AI API key (free to get, just sign up at ai.google.dev)
+- Some proxies if you're planning to scrape heavily (optional but recommended)
+
+### Let's Get This Running
+
+1. **Grab the code**
+   ```bash
+   git clone https://github.com/ai-naymul/BrowserPilot.git
+   cd BrowserPilot
+   ```
+
+2. **Install the good stuff**
+   ```bash
+   curl -LsSf https://astral.sh/uv/install.sh | sh
+   uv pip install -r requirements.txt
+   ```
+
+3. **Add your secrets**
+   ```bash
+   # Create a .env file (don't worry, it's gitignored)
+   echo 'GOOGLE_API_KEY=your_actual_api_key_here' > .env
+   echo 'SCRAPER_PROXIES=[{"server": "http://proxy1:port", "username": "user", "password": "pass"}]' >> .env
+   ```
+
+4. **Fire it up**
+   ```bash
+   python -m uvicorn backend.main:app --reload
+   ```
+
+5. **See the magic**
+   Open `http://localhost:8000` and start telling it what to do
+
+## Real Examples (Because Everyone Loves Examples)
+
+### Just Getting Started
+```javascript
+"Go to Hacker News and save the top stories as JSON"
+```
+That's it. Seriously. It'll figure out the rest.
+
+### Shopping for Data
+```javascript
+"Search Amazon for wireless headphones under $100 and export the results to CSV"
+```
+It'll navigate, search, filter, and organize everything nicely for you.
+
+### Social Media Intel
+```javascript
+"Go to LinkedIn, find AI engineers in San Francisco, and save their profiles"
+```
+Don't worry, it handles all the login prompts and infinite scroll nonsense.
+
+### The Wild West
+```javascript
+"Visit this random e-commerce site and grab all the product prices"
+```
+Even works on sites you've never seen before. That's the beauty of AI vision.
+
+## Core Components
+
+### Smart Browser Controller
+- Automatic anti-bot detection using AI vision
+- Proxy rotation on detection/blocking
+- CAPTCHA solving capabilities
+- Browser restart with new proxies
+
+### Vision Model Integration
+- Dynamic website analysis
+- Anti-bot system detection
+- Element interaction decisions
+- CAPTCHA recognition and solving
+
+### Universal Extractor
+- AI-powered content extraction
+- Multiple output format support
+- Structured data organization
+- Metadata preservation
+
+### Proxy Management
+- Health tracking and statistics
+- Performance-based selection
+- Site-specific blocking lists
+- Automatic failure recovery
+
+## The Cool Technical Stuff
+
+### Smart Format Detection
+Just talk to it naturally:
+- "save as PDF" → Gets you a beautiful PDF
+- "export to CSV" → Perfectly structured spreadsheet
+- "give me JSON" → Clean, organized data structure
+
+### Anti-Bot Ninja Mode
+- Spots Cloudflare challenges before they even load
+- Solves CAPTCHAs like a human (but faster)
+- Detects rate limits and backs off gracefully
+- Switches identities when websites get suspicious
+
+### Dashboard That Actually Helps
+- See which proxies are working (and which ones suck)
+- Watch your browser sessions live
+- Track how much you're spending on AI tokens
+- Performance stats that make sense
+
+## Configuration
+
+### Proxy Configuration
+```json
+{
+  "SCRAPER_PROXIES": [
+    {
+      "server": "http://proxy1.example.com:8080",
+      "username": "user1",
+      "password": "pass1",
+      "location": "US"
+    },
+    {
+      "server": "http://proxy2.example.com:8080",
+      "username": "user2",
+      "password": "pass2",
+      "location": "EU"
+    }
+  ]
+}
+```
+
+### Environment Variables
+```bash
+# Required
+GOOGLE_API_KEY=your_gemini_api_key_here
+
+# Optional
+SCRAPER_PROXIES=your_proxy_configuration
+```
+
+## Contributors
+
+<a href="https://github.com/your-username/your-repo/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=ai-naymul/BrowserPilot" />
+</a>
+
+
+## 🤝 Want to Help Make This Better?
+
+Found a bug? Have a crazy idea? Want to add support for your favorite website? I'd love the help!
+
+Here's how to jump in:
+1. Fork this repo (there's a button for that)
+2. Create a branch with a name that makes sense (`git checkout -b fix-amazon-pagination`)
+3. Make your changes (and please test them!)
+4. Commit with a message that explains what you did
+5. Push it up and open a pull request
+
+For big changes, maybe open an issue first so we can chat about it.
+
+## 🙏 Acknowledgments
+
+- [Playwright](https://playwright.dev/) for browser automation
+- [Google Gemini](https://ai.google.dev/) for vision AI capabilities
+- [FastAPI](https://fastapi.tiangolo.com/) for the backend framework
+- Open source community for inspiration and tools

README_HF.md

@@ -0,0 +1,30 @@
+---
+title: BrowserPilot
+emoji: 🤖
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+---
+
+# BrowserPilot - AI-Powered Browser Automation
+
+Este espacio de Hugging Face ejecuta BrowserPilot, un navegador automatizado con IA que usa Google Gemini para navegar sitios web y extraer datos.
+
+## Cómo usar
+
+1. Agregá tu `GOOGLE_API_KEY` en los **Settings** de este Space (Variables and secrets)
+2. Opcional: agregá `DATABASE_URL` de Neon para guardar el historial de jobs
+3. El frontend estará disponible en la URL de este Space
+
+## Endpoints de la API
+
+- `POST /job` - Crear un nuevo job
+- `GET /jobs` - Listar todos los jobs
+- `GET /download/{job_id}` - Descargar resultado
+- `WS /stream/{job_id}` - Streaming del navegador
+
+## Ver código fuente
+
+https://github.com/ncolex/33BrowserPilot

SETUP_COMPLETE.md

@@ -0,0 +1,118 @@
+# 🚀 BrowserPilot - Configuración Lista
+
+## ✅ Lo que ya está hecho:
+
+1. **Base de datos Neon creada**
+   - Proyecto: `browserpilot-db`
+   - ID: `late-king-86238640`
+   - Región: `aws-us-east-1`
+   - ✅ Conectada y lista para usar
+
+2. **Código actualizado en GitHub**
+   - Repo: https://github.com/ncolex/33BrowserPilot
+   - ✅ Con integración a PostgreSQL
+   - ✅ Endpoints para listar jobs: `GET /jobs`
+
+3. **Variables configuradas localmente**
+   - `GOOGLE_API_KEY`: ✅ Configurada
+   - `DATABASE_URL`: ✅ Configurada
+
+---
+
+## 📋 Lo que tenés que hacer AHORA en Hugging Face:
+
+### Paso 1: Crear el Space
+1. Entrá a https://huggingface.co/spaces
+2. Click en **"Create new Space"**
+3. Completar:
+   - **Space name**: `browserpilot`
+   - **License**: MIT
+   - **SDK**: **Docker** ⚠️ (¡importante!)
+   - **Visibility**: Public
+4. **Create Space**
+
+### Paso 2: Importar desde GitHub
+1. En el Space, click en **"Import from GitHub repo"**
+2. Autorizá Hugging Face a acceder a tu GitHub
+3. Seleccioná: `ncolex/33BrowserPilot`
+4. **Import**
+
+### Paso 3: Configurar Variables (Settings → Variables and secrets)
+
+**Secrets:**
+```
+GOOGLE_API_KEY = AIzaSyBDl98MXre7ecN9jW16EVltBlaf38awkdo
+DATABASE_URL = postgresql://neondb_owner:npg_obFVM76KLule@ep-twilight-field-aiwca4xu.c-4.us-east-1.aws.neon.tech/neondb?sslmode=require
+```
+
+**Variables:**
+```
+PYTHONUNBUFFERED = 1
+```
+
+### Paso 4: Esperar el deploy
+- El build tarda **5-10 minutos**
+- Cuando diga **"Running"**, ¡está listo!
+- URL: `https://huggingface.co/spaces/tu-usuario/browserpilot`
+
+---
+
+## 🎯 URLs útiles:
+
+| Servicio | URL |
+|----------|-----|
+| **GitHub Repo** | https://github.com/ncolex/33BrowserPilot |
+| **Neon Dashboard** | https://console.neon.tech |
+| **Hugging Face Spaces** | https://huggingface.co/spaces |
+
+---
+
+## 📊 Endpoints de la API (una vez desplegado):
+
+```bash
+# Crear un job
+curl -X POST https://huggingface.co/spaces/tu-usuario/browserpilot/job \
+  -H "Content-Type: application/json" \
+  -d '{"prompt": "Go to Hacker News and save top stories as JSON", "format": "json"}'
+
+# Listar jobs
+curl https://huggingface.co/spaces/tu-usuario/browserpilot/jobs
+
+# Ver stats
+curl https://huggingface.co/spaces/tu-usuario/browserpilot/stats
+```
+
+---
+
+## 💰 Costo: $0/mes
+
+- **Hugging Face Spaces**: 100% gratis
+- **Neon Database**: 100% gratis (500MB)
+- **Total**: $0/mes
+
+---
+
+## ⚠️ Importante:
+
+1. Los **Secrets** en HF no se ven en la UI, solo se usan internamente
+2. La **DATABASE_URL** guarda el historial de jobs permanentemente
+3. Los archivos en `/outputs` **NO persisten** si el Space se reinicia
+4. El Space se **duerme** después de ~48h de inactividad
+
+---
+
+## 🔧 Comandos útiles de Neon CLI:
+
+```bash
+# Ver proyectos
+neonctl projects list
+
+# Ver connection string
+neonctl connection-string --project-id late-king-86238640
+
+# Ver branches
+neonctl branches list --project-id late-king-86238640
+
+# Ver queries (si está habilitado)
+neonctl operations list --project-id late-king-86238640
+```

TELEGRAM_BOT.md

@@ -0,0 +1,162 @@
+# 🤖 Telegram Bot Integration
+
+## Bot: @Error33yobot
+
+### Configuración Requerida
+
+**En Hugging Face Spaces** (Settings → Variables and secrets):
+
+| Type | Key | Value |
+|------|-----|-------|
+| Secret | `TELEGRAM_BOT_TOKEN` | `8246977072:AAHItyl6wYcrkNwTcj5Teu0lsVwTeMKZZqU` |
+| Secret | `TELEGRAM_CHAT_ID` | `5858991844` |
+
+**En GitHub Secrets** (Settings → Secrets and variables → Actions):
+
+| Secret | Value |
+|--------|-------|
+| `TELEGRAM_BOT_TOKEN` | `8246977072:AAHItyl6wYcrkNwTcj5Teu0lsVwTeMKZZqU` |
+| `TELEGRAM_CHAT_ID` | `5858991844` |
+
+✅ **Configuración completa** - ¡El bot ya está funcionando!
+
+---
+
+## Cómo obtener tu Chat ID (ya configurado)
+
+El Chat ID ya está configurado: `5858991844`
+
+Si necesitás cambiarlo en el futuro, los pasos son:
+
+1. **Abrí Telegram**
+2. **Buscá**: `@Error33yobot`
+3. **Iniciá el bot**: Click en "Start" o mandale "hola"
+4. **Ejecutá este comando**:
+   ```bash
+   curl -s "https://api.telegram.org/bot8246977072:AAHItyl6wYcrkNwTcj5Teu0lsVwTeMKZZqU/getUpdates" | python3 -m json.tool
+   ```
+5. **Buscá** en el resultado: `"chat": {"id": 123456789, ...}`
+
+---
+
+## Comandos del Bot
+
+| Comando | Descripción |
+|---------|-------------|
+| `/start` | Mostrar ayuda y comandos disponibles |
+| `/ping` | Verificar que el bot está activo |
+| `/status` | Ver estado del sistema (jobs activos, proxies, etc.) |
+| `/jobs` | Listar los últimos 5 jobs |
+
+---
+
+## Crear Jobs desde Telegram
+
+Simplemente **enviá un mensaje** al bot con tu tarea:
+
+```
+Go to Hacker News and save the top 10 stories as JSON
+```
+
+El bot va a:
+1. ✅ Crear el job
+2. 📋 Confirmarte con el Job ID
+3. 🔔 Avisarte cuando termine con el link de descarga
+
+---
+
+## Notificaciones Automáticas
+
+### Job Started
+```
+🚀 Job Started
+ID: abc123...
+Task: Go to Hacker News...
+Format: json
+⏳ Processing...
+```
+
+### Job Completed
+```
+✅ Job Completed!
+ID: abc123...
+Format: json
+📥 Download Result
+```
+
+### Job Failed
+```
+❌ Job Failed
+ID: abc123...
+Error: [error message]
+```
+
+### KeepAlive Alert
+```
+⚠️ KeepAlive Alert
+🔴 HF Space health check failed!
+Status: 503
+The Space might be sleeping or down.
+```
+
+### KeepAlive Restored
+```
+✅ KeepAlive OK
+🟢 HF Space health check passed!
+Status: 200
+The Space is awake and running.
+```
+
+---
+
+## Flujo de Uso
+
+1. **Configurá** las variables en HF Spaces y GitHub
+2. **Iniciá** el bot en Telegram (`/start`)
+3. **Enviá** tu tarea como mensaje
+4. **Esperá** la notificación de completado
+5. **Descargá** el resultado desde el link
+
+---
+
+## Ejemplos de Comandos
+
+### Buscar en Google
+```
+Search for "AI engineers in San Francisco" on LinkedIn and save as CSV
+```
+
+### Extraer datos
+```
+Go to amazon.com and get the top 5 wireless headphones under $100
+```
+
+### Navegación compleja
+```
+Visit hackernews.com, click on "Ask HN", and save all posts from today
+```
+
+---
+
+## Troubleshooting
+
+### El bot no responde
+- Verificá que `TELEGRAM_BOT_TOKEN` esté configurado
+- Verificá que `TELEGRAM_CHAT_ID` sea correcto
+- Revisá los logs del Space
+
+### No llegan las notificaciones
+- Verificá que el bot tenga permisos para enviarte mensajes
+- Asegurate de haber iniciado el bot (`/start`)
+
+### El keepalive no notifica
+- Verificá los secrets de GitHub Actions
+- Revisá el workflow en: https://github.com/ncolex/33BrowserPilot/actions
+
+---
+
+## Costo: **$0/mes**
+
+- Telegram Bot API: Gratis
+- GitHub Actions: 2000 min/mes (usás ~1)
+- Total: $0

docker-compose.prod.yml

@@ -0,0 +1,30 @@
+version: '3.8'
+
+services:
+  browserpilot:
+    restart: always
+    # Resource limits for production
+    deploy:
+      resources:
+        limits:
+          memory: 4G
+          cpus: '2.0'
+        reservations:
+          memory: 2G
+          cpus: '1.0'
+    # Production logging
+    logging:
+      driver: "json-file"
+      options:
+        max-size: "100m"
+        max-file: "10"
+    # Don't mount local .env in production
+    volumes:
+      - ./outputs:/app/outputs
+    # Production environment variables
+    environment:
+      - GOOGLE_API_KEY=${GOOGLE_API_KEY}
+      - SCRAPER_PROXIES=${SCRAPER_PROXIES:-[]}
+      # Production settings
+      - PYTHONUNBUFFERED=1
+      - PYTHONOPTIMIZE=1

docker-compose.yml

@@ -0,0 +1,35 @@
+version: '3.8'
+
+services:
+  browserpilot:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8000:8000"
+    environment:
+      # Required: Add your Google AI API key
+      - GOOGLE_API_KEY=${GOOGLE_API_KEY}
+      # Optional: Proxy configuration
+      - SCRAPER_PROXIES=${SCRAPER_PROXIES:-[]}
+    volumes:
+      # Persist outputs directory
+      - ./outputs:/app/outputs
+      # Optional: Mount .env file for local development
+      - ./.env:/app/.env:ro
+    restart: unless-stopped
+    # Use SHM size to prevent browser crashes
+    shm_size: '2gb'
+    # Security options for running browsers
+    security_opt:
+      - seccomp:unconfined
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+networks:
+  default:
+    name: browserpilot-network

entrypoint.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+set -e
+
+echo "🚀 Starting BrowserPilot on Hugging Face Spaces..."
+
+# Create outputs directory if it doesn't exist
+mkdir -p /app/outputs
+
+# Install dependencies if needed
+if [ -f requirements.txt ]; then
+    echo "📦 Installing Python dependencies..."
+    pip install -q --no-cache-dir -r requirements.txt
+fi
+
+# Check if GOOGLE_API_KEY is set
+if [ -z "$GOOGLE_API_KEY" ]; then
+    echo "⚠️ WARNING: GOOGLE_API_KEY is not set!"
+    echo "Please add it in Settings → Variables and secrets"
+fi
+
+# Check if DATABASE_URL is set (optional)
+if [ -n "$DATABASE_URL" ]; then
+    echo "✅ Database configured"
+else
+    echo "ℹ️ DATABASE_URL not set - database features disabled"
+fi
+
+# Start the application
+echo "🌐 Starting FastAPI server on port 8000..."
+exec python -m uvicorn backend.main:app --host 0.0.0.0 --port 8000

frontend/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

frontend/README.md

@@ -0,0 +1 @@
+new-ui-browserpilot

frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

frontend/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BrowserPilot - AI-Powered Web Automation</title>
+    <meta name="description" content="Professional AI browser automation dashboard for intelligent web scraping and data extraction">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/src/App.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BrowserPilotDashboard } from './components/BrowserPilotDashboard';
+
+function App() {
+  return <BrowserPilotDashboard />;
+}
+
+export default App;

frontend/src/components/BrowserPilotDashboard.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from 'react';
+import { Header } from './Header';
+import { JobForm } from './JobForm';
+import { StatusDisplay } from './StatusDisplay';
+import { TokenUsage } from './TokenUsage';
+import { DecisionLog } from './DecisionLog';
+import { ScreenshotGallery } from './ScreenshotGallery';
+import { StreamingViewer } from './StreamingViewer';
+import { ProxyStats } from './ProxyStats';
+import { WebSocketManager } from '../services/WebSocketManager';
+
+export const BrowserPilotDashboard: React.FC = () => {
+  const [wsManager] = useState(() => new WebSocketManager());
+  const [status, setStatus] = useState<{
+    message: string;
+    type: 'success' | 'error' | 'info';
+  } | null>(null);
+  const [tokenUsage, setTokenUsage] = useState({
+    prompt_tokens: 0,
+    response_tokens: 0,
+    total_tokens: 0,
+    api_calls: 0
+  });
+  const [proxyStats, setProxyStats] = useState({
+    available: 0,
+    healthy: 0,
+    blocked: 0,
+    retry_count: 0
+  });
+  const [decisions, setDecisions] = useState<any[]>([]);
+  const [screenshots, setScreenshots] = useState<string[]>([]);
+  const [currentJobId, setCurrentJobId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [streamingEnabled, setStreamingEnabled] = useState(false);
+
+  useEffect(() => {
+    // Set up WebSocket event listeners
+    wsManager.on('connected', () => {
+      setStatus({ message: 'Connected to BrowserPilot server', type: 'success' });
+      setIsLoading(false);
+    });
+
+    wsManager.on('decision', (data: any) => {
+      const decision = data.decision || data;
+      setDecisions(prev => [...prev, decision]);
+      
+      if (decision.token_usage) {
+        updateTokenUsage(decision.token_usage);
+      }
+    });
+
+    wsManager.on('screenshot', (data: any) => {
+      const screenshot = data.screenshot || data;
+      if (typeof screenshot === 'string') {
+        setScreenshots(prev => [...prev, screenshot]);
+      }
+    });
+
+    wsManager.on('proxy_stats', (data: any) => {
+      setProxyStats(data.stats || data);
+    });
+
+    wsManager.on('token_usage', (data: any) => {
+      updateTokenUsage(data.token_usage || data);
+    });
+
+    wsManager.on('page_info', (data: any) => {
+      setStatus({
+        message: `Navigating: ${data.url} • Found ${data.interactive_elements} interactive elements`,
+        type: 'info'
+      });
+    });
+
+    wsManager.on('extraction', (data: any) => {
+      if (data.status === 'completed') {
+        setStatus({
+          message: `Extraction completed successfully in ${data.format?.toUpperCase()} format`,
+          type: 'success'
+        });
+      }
+    });
+
+    wsManager.on('error', (data: any) => {
+      setStatus({
+        message: data.message || data.error || 'An unexpected error occurred',
+        type: 'error'
+      });
+      setIsLoading(false);
+    });
+
+    return () => {
+      wsManager.disconnect();
+      wsManager.disconnectStream();
+    };
+  }, [wsManager]);
+
+  const updateTokenUsage = (usage: any) => {
+    setTokenUsage(prev => ({
+      prompt_tokens: prev.prompt_tokens + (usage.prompt_tokens || 0),
+      response_tokens: prev.response_tokens + (usage.response_tokens || 0),
+      total_tokens: prev.total_tokens + (usage.total_tokens || 0),
+      api_calls: prev.api_calls + 1
+    }));
+  };
+
+  const handleJobCreated = (jobData: { jobId: string; streaming: boolean; format: string }) => {
+    console.log('Job created:', jobData);
+    setCurrentJobId(jobData.jobId);
+    setIsLoading(true);
+    setStreamingEnabled(jobData.streaming);
+    wsManager.connect(jobData.jobId);
+  };
+
+  const clearDecisions = () => setDecisions([]);
+  const clearScreenshots = () => setScreenshots([]);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-stone-50 via-amber-50/30 to-orange-50/20 dark:from-stone-900 dark:via-stone-800 dark:to-stone-700 transition-all duration-1000">
+      <Header />
+      
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
+        {/* Welcome Animation */}
+        <div className="text-center mb-12 animate-in fade-in slide-in-from-top-1 duration-1000">
+          <h1 className="text-4xl font-light text-stone-800 dark:text-stone-200 mb-4 tracking-wide">
+            Welcome to <span className="font-medium text-stone-700 dark:text-stone-300">BrowserPilot</span>
+          </h1>
+          <p className="text-stone-600 dark:text-stone-400 text-lg font-light max-w-2xl mx-auto leading-relaxed">
+            Open-source alternative to Perplexity Comet and director.ai. Describe what you need, and watch as your browser comes to life.
+          </p>
+        </div>
+
+        {/* Control Panel */}
+        <div className="grid grid-cols-1 xl:grid-cols-3 gap-8 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
+          <div className="xl:col-span-2">
+            <JobForm wsManager={wsManager} onJobCreated={handleJobCreated} />
+          </div>
+          
+          <div className="space-y-6">
+            <TokenUsage usage={tokenUsage} />
+            <ProxyStats stats={proxyStats} />
+          </div>
+        </div>
+
+        {/* Status Display */}
+        {status && (
+          <div className="animate-in fade-in slide-in-from-top-2 duration-500">
+            <StatusDisplay status={status} onDismiss={() => setStatus(null)} />
+          </div>
+        )}
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-stone-200/60 p-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+            <div className="flex items-center justify-center space-x-4">
+              <div className="w-8 h-8 border-4 border-amber-200 border-t-amber-600 rounded-full animate-spin"></div>
+              <p className="text-stone-700 font-medium">BrowserPilot is working...</p>
+            </div>
+          </div>
+        )}
+
+        {/* Browser Streaming */}
+        <div className="animate-in fade-in slide-in-from-left-4 duration-700 delay-400">
+          <StreamingViewer
+            wsManager={wsManager}
+            jobId={currentJobId}
+            autoConnect={streamingEnabled}
+          />
+        </div>
+
+        {/* Decision Log */}
+        <div className="animate-in fade-in slide-in-from-right-4 duration-700 delay-500">
+          <DecisionLog decisions={decisions} onClear={clearDecisions} />
+        </div>
+
+        {/* Screenshot Gallery */}
+        <div className="animate-in fade-in slide-in-from-bottom-4 duration-700 delay-600">
+          <ScreenshotGallery screenshots={screenshots} onClear={clearScreenshots} />
+        </div>
+      </main>
+
+      {/* Floating Action Button */}
+      <div className="fixed bottom-8 right-8 z-50">
+        <button className="w-14 h-14 bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-full shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-300 flex items-center justify-center group">
+          <div className="w-6 h-6 border-2 border-white rounded-sm group-hover:rotate-12 transition-transform duration-300"></div>
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/components/DecisionLog.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Brain, Trash2, Clock, Target, Lightbulb } from 'lucide-react';
+
+interface DecisionLogProps {
+  decisions: any[];
+  onClear: () => void;
+}
+
+export const DecisionLog: React.FC<DecisionLogProps> = ({ decisions, onClear }) => {
+  return (
+    <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-stone-200/60 overflow-hidden transition-all duration-300 hover:shadow-md hover:bg-white/80">
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-stone-400 to-stone-500 dark:from-stone-500 dark:to-stone-600 rounded-xl flex items-center justify-center shadow-md">
+              <Brain className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <h2 className="text-lg font-medium text-stone-800 dark:text-stone-200">AI Decision Log</h2>
+              <p className="text-sm text-stone-600 dark:text-stone-400 font-light">Real-time reasoning & actions</p>
+            </div>
+          </div>
+
+          <button
+            onClick={onClear}
+            className="px-4 py-2 text-xs bg-stone-100/80 dark:bg-stone-700/80 text-stone-600 dark:text-stone-400 rounded-lg hover:bg-stone-200/80 dark:hover:bg-stone-600/80 transition-all duration-200 flex items-center space-x-2 group backdrop-blur-sm"
+          >
+            <Trash2 className="w-3 h-3 group-hover:scale-110 transition-transform duration-200" />
+            <span>Clear Log</span>
+          </button>
+        </div>
+
+        <div className="bg-stone-50/80 dark:bg-stone-800/50 backdrop-blur-sm rounded-xl border border-stone-200/60 dark:border-stone-600/60 h-80 overflow-y-auto">
+          {decisions.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-stone-500 dark:text-stone-400">
+              <div className="text-center animate-in fade-in duration-500">
+                <Lightbulb className="w-12 h-12 text-stone-400 dark:text-stone-500 mx-auto mb-4" />
+                <p className="text-sm font-medium mb-2">No decisions yet</p>
+                <p className="text-xs text-stone-400 dark:text-stone-500 font-light">AI reasoning will appear here as tasks run</p>
+              </div>
+            </div>
+          ) : (
+            <div className="p-4 space-y-3">
+              {decisions.map((decision, index) => (
+                <div
+                  key={index}
+                  className="bg-white/80 dark:bg-stone-700/50 backdrop-blur-sm p-4 rounded-xl border-l-4 border-stone-400 dark:border-stone-500 shadow-sm hover:shadow-md transition-all duration-300 animate-in fade-in slide-in-from-bottom-2"
+                  style={{ animationDelay: `${index * 100}ms` }}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center space-x-2">
+                      <Target className="w-4 h-4 text-stone-600 dark:text-stone-400" />
+                      <span className="font-medium text-stone-600 dark:text-stone-400 text-sm tracking-wide">
+                        {decision.action?.toUpperCase() || 'THINKING'}
+                      </span>
+                    </div>
+                    <div className="flex items-center space-x-1 text-xs text-stone-500 dark:text-stone-400">
+                      <Clock className="w-3 h-3" />
+                      <span>{new Date().toLocaleTimeString()}</span>
+                    </div>
+                  </div>
+                  <p className="text-stone-700 dark:text-stone-300 text-sm mb-2 leading-relaxed font-light">
+                    {decision.reason || 'Processing...'}
+                  </p>
+                  {decision.text && (
+                    <p className="text-xs text-stone-500 dark:text-stone-400 font-mono bg-stone-100/80 dark:bg-stone-600/50 px-3 py-2 rounded-lg backdrop-blur-sm">
+                      "{decision.text}"
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/Header.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Activity, Settings, User, Moon, Sun } from 'lucide-react';
+
+
+
+const BrowserPilotLogo = ({ className = "" }) => (
+  <svg 
+    viewBox="0 0 1024 1024" 
+    className={`w-full h-full ${className}`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0 0 C337.92 0 675.84 0 1024 0 C1024 337.92 1024 675.84 1024 1024 C686.08 1024 348.16 1024 0 1024 C0 686.08 0 348.16 0 0 Z " fill="#FEFEFE" transform="translate(0,0)"/>
+    <path d="M0 0 C16.75287235 2.39326748 30.16084399 9.09518011 43 20 C43.73605469 20.59167969 44.47210938 21.18335938 45.23046875 21.79296875 C51.60190269 27.11163563 60.6873028 35.38542461 62 44 C62.66 44 63.32 44 64 44 C64.23074219 44.53367187 64.46148437 45.06734375 64.69921875 45.6171875 C66.52384312 49.78569693 68.43494069 53.85197877 70.5625 57.875 C76.24387517 69.13286341 77.15074725 80.84522004 77.14526367 93.24267578 C77.14862228 94.34301651 77.1519809 95.44335724 77.15544128 96.57704163 C77.16490742 100.19981021 77.16689239 103.82253233 77.16796875 107.4453125 C77.17118495 109.9786684 77.1745493 112.51202412 77.17805481 115.04537964 C77.18403568 120.35284937 77.18593884 125.66030199 77.18530273 130.96777344 C77.18470347 137.06841877 77.1952304 143.16897524 77.2110464 149.26959813 C77.22579799 155.17383676 77.22928804 161.07804081 77.22869301 166.98229599 C77.2298664 169.4771244 77.23425185 171.9719536 77.24202538 174.46677017 C77.33350568 206.8656192 77.33350568 206.8656192 72 220 C71.72414063 220.68964844 71.44828125 221.37929688 71.1640625 222.08984375 C62.12427406 243.45310447 48.26244954 259.85812387 30.66748047 274.58789062 C27.45311344 277.30998417 24.34998247 280.15493026 21.23046875 282.984375 C18.52203531 285.43192606 15.77680541 287.83430427 13.01953125 290.2265625 C11.52433695 291.5395571 10.04488349 292.87052487 8.57421875 294.2109375 C7.76597656 294.94570313 6.95773437 295.68046875 6.125 296.4375 C5.38507813 297.11683594 4.64515625 297.79617188 3.8828125 298.49609375 C2 300 2 300 0 300 C0 201 0 102 0 0 Z " fill="#0F2F52" transform="translate(383,295)"/>
+    <path d="M0 0 C1.18980469 -0.01224609 2.37960937 -0.02449219 3.60546875 -0.03710938 C11.31114451 -0.04974163 18.57212145 0.6583843 26.125 2.1875 C26.125 2.8475 26.125 3.5075 26.125 4.1875 C26.99511719 4.29835938 27.86523438 4.40921875 28.76171875 4.5234375 C39.13498909 6.57158611 48.41756383 13.36524831 55.6875 20.8125 C57.48053543 23.77490636 57.85613932 24.78039077 57.125 28.1875 C54.74691804 30.58153675 51.98239531 32.37537509 49.1875 34.25 C48.3728125 34.81654297 47.558125 35.38308594 46.71875 35.96679688 C45.02303097 37.14488915 43.32258798 38.31620863 41.61767578 39.48095703 C37.9246459 42.00928993 34.27695515 44.60039306 30.625 47.1875 C29.21876709 48.17710762 27.81251696 49.16669077 26.40625 50.15625 C21.95413946 53.29891627 17.5377812 56.48994254 13.125 59.6875 C6.62441517 64.39790657 0.0863612 69.05047608 -6.48046875 73.66796875 C-11.6406672 77.30204566 -16.7642894 80.98421401 -21.875 84.6875 C-28.37558483 89.39790657 -34.9136388 94.05047608 -41.48046875 98.66796875 C-46.6406672 102.30204566 -51.7642894 105.98421401 -56.875 109.6875 C-63.372616 114.39575531 -69.90723693 119.04685192 -76.47167969 123.66137695 C-81.7204449 127.35704787 -86.92785214 131.10717754 -92.125 134.875 C-97.5209089 138.77947503 -102.92150187 142.67620283 -108.375 146.5 C-109.3959375 147.21800781 -110.416875 147.93601562 -111.46875 148.67578125 C-113.875 150.1875 -113.875 150.1875 -115.875 150.1875 C-115.92533329 144.96290409 -115.96114875 139.73845654 -115.98486328 134.51367188 C-115.99477398 132.74509211 -116.00830643 130.97652804 -116.02587891 129.20800781 C-116.11596352 119.89219849 -116.01276084 110.67978965 -115.00390625 101.41015625 C-114.92749908 100.69997345 -114.85109192 99.98979065 -114.77236938 99.25808716 C-111.70639993 74.07592452 -97.38310532 50.87093685 -79.875 33.1875 C-78.97201172 32.19363281 -78.97201172 32.19363281 -78.05078125 31.1796875 C-66.51677462 18.68693472 -50.02619612 9.65117207 -34.125 4.25 C-33.26189209 3.95520752 -32.39878418 3.66041504 -31.50952148 3.35668945 C-21.11573359 0.01650263 -10.84289408 0.00583579 0 0 Z " fill="#102F53" transform="translate(498.875,574.8125)"/>
+    <path d="M0 0 C0.94994742 -0.00170885 1.89989484 -0.0034177 2.87862855 -0.00517833 C6.07551821 -0.00848393 9.27219998 0.00254812 12.46907043 0.01345825 C14.75519811 0.01402213 17.04132615 0.01370626 19.32745361 0.01257324 C25.54611742 0.01199783 31.76470457 0.02378258 37.98335052 0.03772116 C44.47763544 0.05019719 50.97192198 0.05139654 57.46621704 0.05377197 C68.37050244 0.05928817 79.27475943 0.07179293 90.17903137 0.08963013 C101.41112629 0.10798449 112.64321355 0.12214316 123.87532043 0.13064575 C124.91361264 0.13143392 124.91361264 0.13143392 125.97288045 0.13223802 C129.44537302 0.13484807 132.91786566 0.13737549 136.39035833 0.13986182 C165.20413064 0.16059966 194.01787428 0.1959784 222.83161926 0.24050903 C222.83161926 1.56050903 222.83161926 2.88050903 222.83161926 4.24050903 C221.16941346 5.24790649 219.50141252 6.24573858 217.83161926 7.24050903 C216.15506823 8.9638911 214.63734271 10.79442599 213.08552551 12.63113403 C210.24993653 15.91393029 207.29812799 19.07617856 204.33161926 22.24050903 C203.73397766 22.87843384 203.13633606 23.51635864 202.52058411 24.1736145 C201.26870151 25.50910956 200.01641404 26.8442252 198.76374817 28.1789856 C196.80738954 30.26636141 194.85607132 32.35834787 192.90583801 34.45144653 C191.61031149 35.83951067 190.3147398 37.22753265 189.01911926 38.61550903 C188.43388489 39.24457153 187.84865051 39.87363403 187.24568176 40.52175903 C186.10679542 41.73962854 184.95567059 42.9462009 183.79099655 44.13943291 C181.79295443 46.21616339 181.79295443 46.21616339 180.05415726 48.54667854 C176.87732802 52.35217221 174.37178145 54.86006777 169.47389984 56.06991196 C165.35698172 56.38321585 161.32587844 56.41337311 157.20173645 56.34158325 C155.63216869 56.34723826 154.06261089 56.35678465 152.49308777 56.36990356 C148.25296424 56.39373816 144.01497207 56.36161102 139.77507687 56.31771231 C135.33050187 56.27990013 130.88599918 56.28944137 126.44129944 56.2925415 C118.9831574 56.29061857 111.5258405 56.25359574 104.06794739 56.19412231 C95.44877937 56.12568506 86.83060875 56.10646044 78.21119571 56.11489093 C69.90888518 56.1224174 61.60690894 56.10145438 53.30467987 56.06534195 C49.7752578 56.05011771 46.24598352 56.04373239 42.71652985 56.04424667 C38.56288216 56.04311567 34.41013393 56.01667327 30.2567482 55.97068787 C28.7334108 55.95769299 27.2099744 55.95313748 25.68658829 55.95766068 C23.60560981 55.96236383 21.52720472 55.9362782 19.44654846 55.90234375 C18.28295177 55.89526335 17.11935509 55.88818295 15.92049789 55.88088799 C11.21022401 54.90436524 9.02666672 51.98612036 6.39021301 48.13504028 C3.97239561 43.64480797 1.9587493 39.15619574 0.13630676 34.39675903 C-3.25606544 26.19006221 -7.08179858 18.00385367 -11.27531433 10.1736145 C-12.55220416 7.40969606 -12.4942862 5.23883925 -12.16838074 2.24050903 C-8.16063356 -0.43132242 -4.65265941 -0.03032001 0 0 Z " fill="#113054" transform="translate(504.1683807373047,413.7594909667969)"/>
+    <path d="M0 0 C1.22506288 0.00276538 1.22506288 0.00276538 2.4748745 0.00558662 C3.41159492 0.0028373 4.34831535 0.00008797 5.31342125 -0.00274467 C6.34416267 0.00444588 7.3749041 0.01163643 8.43688011 0.01904488 C9.5198185 0.01875282 10.60275688 0.01846077 11.71851158 0.01815987 C15.31140108 0.01955738 18.90408527 0.03513848 22.49693871 0.05078316 C24.98272653 0.05451179 27.46851583 0.05735947 29.95430565 0.0593586 C35.83686706 0.0662244 41.71935222 0.08200019 47.60188234 0.10205758 C54.95490879 0.12658579 62.30794434 0.13734311 69.66100121 0.14843941 C82.78083057 0.16991035 95.90059871 0.20367798 109.02037621 0.24609566 C107.22505512 4.12559282 104.91970566 6.5157086 101.83287621 9.49609566 C97.95694142 13.24735002 94.35376225 17.10489378 90.82579613 21.18457222 C87.8919369 24.53460701 84.8294053 27.76069229 81.77037621 30.99609566 C76.25656484 36.84912361 70.79324027 42.74233414 65.38756371 48.69531441 C64.60639183 49.53707222 63.82521996 50.37883003 63.02037621 51.24609566 C61.98324486 52.54196602 61.98324486 52.54196602 60.92516136 53.86401558 C56.97099627 57.10664365 54.14497315 56.97211761 49.17662621 56.91015816 C47.90655724 56.9173336 47.90655724 56.9173336 46.61083031 56.92465401 C44.8256144 56.92804741 43.04033589 56.91888406 41.25523949 56.89795113 C38.52840198 56.87117447 35.80568001 56.89771464 33.07896996 56.92968941 C31.34067965 56.92638521 29.60239191 56.91997875 27.86412621 56.91015816 C27.05254051 56.92027931 26.24095482 56.93040047 25.40477562 56.94082832 C21.19320196 56.85397974 19.50458267 56.62668178 16.08727074 53.94067574 C14.41550033 51.76121318 13.13666206 49.98637697 12.10631371 47.46875191 C11.82014183 46.7900605 11.53396996 46.11136909 11.23912621 45.41211128 C10.96068871 44.71795113 10.68225121 44.02379097 10.39537621 43.30859566 C9.82131787 41.92387387 9.24581725 40.53974904 8.66881371 39.15625191 C8.39649925 38.49383492 8.1241848 37.83141792 7.84361839 37.14892769 C7.07568897 35.37394492 6.19613562 33.64842383 5.30943871 31.92968941 C4.02037621 29.24609566 4.02037621 29.24609566 4.02037621 26.24609566 C3.36037621 26.24609566 2.70037621 26.24609566 2.02037621 26.24609566 C1.67104027 25.31925972 1.32170433 24.39242378 0.96178246 23.43750191 C0.50674339 22.23996284 0.05170433 21.04242378 -0.41712379 19.80859566 C-0.86958473 18.61363472 -1.32204567 17.41867378 -1.78821754 16.18750191 C-2.69410639 13.40163842 -2.69410639 13.40163842 -3.97962379 12.24609566 C-4.1041724 10.60379201 -4.15530904 8.9555729 -4.16712379 7.30859566 C-4.18130348 6.41269722 -4.19548317 5.51679878 -4.21009254 4.59375191 C-3.91152265 1.55238735 -3.10866164 0.38645127 0 0 Z " fill="#0F2F52" transform="translate(536.9796237945557,501.75390434265137)"/>
+  </svg>
+);
+
+
+export const Header: React.FC = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+    document.documentElement.classList.toggle('dark');
+  };
+
+  return (
+    <header className="bg-white/80 dark:bg-stone-900/80 backdrop-blur-md shadow-sm border-b border-stone-200/60 dark:border-stone-700/60 sticky top-0 z-50 transition-all duration-300">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center space-x-4 group">
+            {/* Logo Placeholder - You can replace this with your SVG */}
+            <div className="w-10 h-10 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-700 dark:to-stone-800 rounded-xl flex items-center justify-center shadow-md group-hover:shadow-lg transition-all duration-300 group-hover:scale-105 p-1">
+            <BrowserPilotLogo className="group-hover:scale-110 transition-transform duration-300" />
+            </div>
+            <div className="transform group-hover:translate-x-1 transition-transform duration-300">
+              <h1 className="text-xl font-medium text-stone-800 dark:text-stone-200 tracking-wide">BrowserPilot</h1>
+              <p className="text-xs text-stone-500 dark:text-stone-400 -mt-1 font-light">Open-source alternative to Perplexity Comet</p>
+            </div>
+          </div>
+          
+          <div className="flex items-center space-x-6">
+            {/* Status Indicator */}
+            <div className="flex items-center space-x-3 px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-full border border-stone-200/60 dark:border-stone-700/60 hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors duration-200">
+              <Activity className="w-4 h-4 text-emerald-500 animate-pulse" />
+              <span className="text-sm text-stone-600 dark:text-stone-300 font-medium">Active</span>
+            </div>
+
+            {/* Dark Mode Toggle */}
+            <button
+              onClick={toggleDarkMode}
+              className="w-10 h-10 bg-stone-100 dark:bg-stone-800 hover:bg-stone-200 dark:hover:bg-stone-700 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-105"
+            >
+              {isDarkMode ? (
+                <Sun className="w-5 h-5 text-stone-600 dark:text-stone-300" />
+              ) : (
+                <Moon className="w-5 h-5 text-stone-600 dark:text-stone-300" />
+              )}
+            </button>
+
+            {/* User Menu */}
+            <div className="relative">
+              <button
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
+                className="w-10 h-10 bg-stone-100 dark:bg-stone-800 hover:bg-stone-200 dark:hover:bg-stone-700 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-105"
+              >
+                <User className="w-5 h-5 text-stone-600 dark:text-stone-300" />
+              </button>
+
+              {isMenuOpen && (
+                <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-stone-800 rounded-xl shadow-lg border border-stone-200/60 dark:border-stone-700/60 py-2 animate-in fade-in slide-in-from-top-2 duration-200">
+                  <button className="w-full px-4 py-2 text-left text-stone-700 dark:text-stone-300 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-150 flex items-center space-x-3">
+                    <Settings className="w-4 h-4" />
+                    <span>Settings</span>
+                  </button>
+                  <a 
+                    href="https://browserpilot-alpha.vercel.app/" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="w-full px-4 py-2 text-left text-stone-700 dark:text-stone-300 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-150 flex items-center space-x-3"
+                  >
+                    <Activity className="w-4 h-4" />
+                    <span>Visit Landing Page</span>
+                  </a>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};

frontend/src/components/JobForm.tsx

@@ -0,0 +1,297 @@
+import React, { useState, useEffect } from 'react';
+import { Play, Download, Monitor, Eye, EyeOff, Sparkles, ArrowRight } from 'lucide-react';
+import { WebSocketManager } from '../services/WebSocketManager';
+const API_BASE_URL = 'http://localhost:8000';
+
+interface JobFormProps {
+  wsManager: WebSocketManager;
+  onJobCreated: (data: { jobId: string; streaming: boolean; format: string }) => void;
+}
+
+export const JobForm: React.FC<JobFormProps> = ({ wsManager, onJobCreated }) => {
+  const [prompt, setPrompt] = useState('Navigate to Hacker News and extract the top 10 stories as JSON with titles, URLs, and scores');
+  const [format, setFormat] = useState('json');
+  const [headless, setHeadless] = useState(false);
+  const [streaming, setStreaming] = useState(true);
+  const [currentJobId, setCurrentJobId] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [detectedFormat, setDetectedFormat] = useState<string | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    const detected = detectFormatFromPrompt(prompt);
+    setDetectedFormat(detected);
+  }, [prompt]);
+
+  const detectFormatFromPrompt = (text: string): string | null => {
+    const lower = text.toLowerCase();
+    const patterns = {
+      pdf: [/\bpdf\b/, /pdf format/, /save.*pdf/, /as pdf/, /to pdf/],
+      csv: [/\bcsv\b/, /csv format/, /save.*csv/, /as csv/, /to csv/],
+      json: [/\bjson\b/, /json format/, /save.*json/, /as json/, /to json/],
+      html: [/\bhtml\b/, /html format/, /save.*html/, /as html/, /to html/],
+      md: [/\bmarkdown\b/, /md format/, /save.*markdown/, /as markdown/, /to md/],
+      txt: [/\btext\b/, /txt format/, /save.*text/, /as text/, /to txt/, /plain text/]
+    };
+
+    for (const [fmt, regexes] of Object.entries(patterns)) {
+      if (regexes.some(regex => regex.test(lower))) {
+        return fmt;
+      }
+    }
+    return null;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!prompt.trim() || isSubmitting) return;
+
+    setIsSubmitting(true);
+    const finalFormat = detectedFormat || format;
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/job`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt,
+          format: finalFormat,
+          headless,
+          enable_streaming: streaming
+        })
+      });
+
+      const data = await response.json();
+      setCurrentJobId(data.job_id);
+      onJobCreated({
+        jobId: data.job_id,
+        streaming,
+        format: finalFormat
+      });
+    } catch (error) {
+      console.error('Error creating job:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDownload = async () => {
+    if (!currentJobId) return;
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/download/${currentJobId}`);
+      if (response.ok) {
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `browserpilot_result_${currentJobId}.${format}`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+      }
+    } catch (error) {
+      console.error('Download error:', error);
+    }
+  };
+
+  return (
+    <div 
+      className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-stone-200/60 overflow-hidden transition-all duration-500 hover:shadow-md hover:bg-white/80"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="p-8">
+        <div className="flex items-center space-x-4 mb-8">
+          <div className={`w-12 h-12 bg-gradient-to-br from-amber-400 to-orange-500 rounded-xl flex items-center justify-center shadow-md transition-all duration-300 ${isHovered ? 'scale-110 rotate-3' : ''}`}>
+            <Sparkles className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-xl font-medium text-stone-800 mb-1">Create Automation Task</h2>
+            <p className="text-stone-600 font-light">Describe what you want to accomplish, and BrowserPilot will handle the rest</p>
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-8">
+          {/* Task Description */}
+          <div className="space-y-3">
+            <label htmlFor="prompt" className="block text-sm font-medium text-stone-700">
+              Task Description
+              <span className="text-stone-500 font-light ml-2">(natural language works best)</span>
+            </label>
+            <div className="relative">
+              <textarea
+                id="prompt"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                rows={4}
+                className="w-full px-4 py-4 border border-stone-300/60 dark:border-stone-600/60 rounded-xl focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition-all duration-200 resize-none text-stone-800 dark:text-stone-200 placeholder-stone-400 dark:placeholder-stone-500 bg-white/50 dark:bg-stone-800/50 backdrop-blur-sm"
+                placeholder="Examples:&#10;• Navigate to Amazon and find wireless headphones under $100&#10;• Go to LinkedIn and extract AI engineer profiles in San Francisco&#10;• Visit news.ycombinator.com and save top stories as JSON"
+              />
+              <div className="absolute bottom-3 right-3">
+                <ArrowRight className="w-5 h-5 text-stone-400" />
+              </div>
+            </div>
+            
+            {/* Example Prompts */}
+            <div className="mt-4">
+              <label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-3">
+                Quick Examples
+                <span className="text-stone-500 dark:text-stone-400 font-light ml-2">(click to use)</span>
+              </label>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  onClick={() => setPrompt("Go to https://news.ycombinator.com and save top stories as JSON")}
+                  className="text-left p-3 bg-stone-50/80 dark:bg-stone-800/50 hover:bg-stone-100/80 dark:hover:bg-stone-700/50 border border-stone-200/60 dark:border-stone-600/60 rounded-lg transition-all duration-200 group backdrop-blur-sm"
+                >
+                  <div className="text-sm font-medium text-stone-700 dark:text-stone-300 group-hover:text-stone-900 dark:group-hover:text-stone-100">
+                    Hacker News Stories
+                  </div>
+                  <div className="text-xs text-stone-500 dark:text-stone-400 mt-1">
+                    Extract top stories as JSON
+                  </div>
+                </button>
+                
+                <button
+                  type="button"
+                  onClick={() => setPrompt("Visit firecrawl.dev pricing page and save to PDF format")}
+                  className="text-left p-3 bg-stone-50/80 dark:bg-stone-800/50 hover:bg-stone-100/80 dark:hover:bg-stone-700/50 border border-stone-200/60 dark:border-stone-600/60 rounded-lg transition-all duration-200 group backdrop-blur-sm"
+                >
+                  <div className="text-sm font-medium text-stone-700 dark:text-stone-300 group-hover:text-stone-900 dark:group-hover:text-stone-100">
+                    Save Page as PDF
+                  </div>
+                  <div className="text-xs text-stone-500 dark:text-stone-400 mt-1">
+                    Convert webpage to PDF
+                  </div>
+                </button>
+                
+                <button
+                  type="button"
+                  onClick={() => setPrompt("Search 'AI tools' and export results as CSV")}
+                  className="text-left p-3 bg-stone-50/80 dark:bg-stone-800/50 hover:bg-stone-100/80 dark:hover:bg-stone-700/50 border border-stone-200/60 dark:border-stone-600/60 rounded-lg transition-all duration-200 group backdrop-blur-sm"
+                >
+                  <div className="text-sm font-medium text-stone-700 dark:text-stone-300 group-hover:text-stone-900 dark:group-hover:text-stone-100">
+                    Search & Export CSV
+                  </div>
+                  <div className="text-xs text-stone-500 dark:text-stone-400 mt-1">
+                    Search results to spreadsheet
+                  </div>
+                </button>
+                
+                <button
+                  type="button"
+                  onClick={() => setPrompt("Find AI engineers in San Francisco on LinkedIn and save their profiles")}
+                  className="text-left p-3 bg-stone-50/80 dark:bg-stone-800/50 hover:bg-stone-100/80 dark:hover:bg-stone-700/50 border border-stone-200/60 dark:border-stone-600/60 rounded-lg transition-all duration-200 group backdrop-blur-sm"
+                >
+                  <div className="text-sm font-medium text-stone-700 dark:text-stone-300 group-hover:text-stone-900 dark:group-hover:text-stone-100">
+                    LinkedIn Profiles
+                  </div>
+                  <div className="text-xs text-stone-500 dark:text-stone-400 mt-1">
+                    Extract professional profiles
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Format Detection Indicator */}
+          {detectedFormat && (
+            <div className="p-4 bg-amber-50/80 backdrop-blur-sm border border-amber-200/60 rounded-xl animate-in fade-in slide-in-from-top-1 duration-300">
+              <div className="flex items-center">
+                <Sparkles className="w-4 h-4 text-amber-600 mr-3" />
+                <span className="text-sm font-medium text-amber-800">Smart Detection:</span>
+                <span className="ml-2 text-sm text-amber-700 font-mono uppercase bg-amber-100 px-2 py-1 rounded-md">
+                  {detectedFormat} format detected
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Configuration Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Format Selection */}
+            <div className="space-y-3">
+              <label htmlFor="format" className="block text-sm font-medium text-stone-700">
+                Output Format
+              </label>
+              <select
+                id="format"
+                value={format}
+                onChange={(e) => setFormat(e.target.value)}
+                className="w-full px-4 py-3 border border-stone-300/60 dark:border-stone-600/60 rounded-xl focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition-all duration-200 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 backdrop-blur-sm"
+              >
+                <option value="txt">Plain Text (TXT)</option>
+                <option value="md">Markdown (MD)</option>
+                <option value="json">JSON</option>
+                <option value="html">HTML</option>
+                <option value="csv">CSV</option>
+                <option value="pdf">PDF</option>
+              </select>
+            </div>
+
+            {/* Options */}
+            <div className="space-y-4">
+              <label className="block text-sm font-medium text-stone-700">Automation Options</label>
+              <div className="space-y-4">
+                <label className="flex items-center cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    checked={headless}
+                    onChange={(e) => setHeadless(e.target.checked)}
+                    className="w-4 h-4 text-amber-600 border-stone-300 dark:border-stone-600 rounded focus:ring-amber-500/20 focus:ring-2 bg-white dark:bg-stone-800"
+                  />
+                  <div className="ml-3 flex items-center">
+                    {headless ? (
+                      <EyeOff className="w-4 h-4 text-stone-600 dark:text-stone-400 mr-2" />
+                    ) : (
+                      <Eye className="w-4 h-4 text-stone-600 dark:text-stone-400 mr-2" />
+                    )}
+                    <span className="text-sm text-stone-700 dark:text-stone-300 group-hover:text-stone-900 dark:group-hover:text-stone-100 transition-colors">
+                      Headless Mode
+                    </span>
+                  </div>
+                </label>
+                <label className="flex items-center cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    checked={streaming}
+                    onChange={(e) => setStreaming(e.target.checked)}
+                    className="w-4 h-4 text-amber-600 border-stone-300 dark:border-stone-600 rounded focus:ring-amber-500/20 focus:ring-2 bg-white dark:bg-stone-800"
+                  />
+                  <div className="ml-3 flex items-center">
+                    <Monitor className="w-4 h-4 text-stone-600 dark:text-stone-400 mr-2" />
+                    <span className="text-sm text-stone-700 dark:text-stone-300 group-hover:text-stone-900 dark:group-hover:text-stone-100 transition-colors">
+                      Live Streaming
+                    </span>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-wrap gap-4 pt-6 border-t border-stone-200/60">
+            <button
+              type="submit"
+              disabled={isSubmitting || !prompt.trim()}
+              className="flex-1 min-w-0 bg-gradient-to-r from-amber-500 to-orange-500 text-white px-8 py-4 rounded-xl font-medium hover:from-amber-600 hover:to-orange-600 focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 flex items-center justify-center space-x-3 group shadow-md hover:shadow-lg"
+            >
+              <Play className={`w-5 h-5 transition-transform duration-300 ${isSubmitting ? 'animate-spin' : 'group-hover:scale-110'}`} />
+              <span className="text-lg">{isSubmitting ? 'Launching BrowserPilot...' : 'Start Automation'}</span>
+            </button>
+
+            <button
+              type="button"
+              onClick={handleDownload}
+              disabled={!currentJobId}
+              className="px-8 py-4 border border-stone-300/60 dark:border-stone-600/60 text-stone-700 dark:text-stone-300 rounded-xl font-medium hover:bg-stone-50 dark:hover:bg-stone-700/50 hover:border-stone-400 dark:hover:border-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-500/20 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 flex items-center space-x-3 group bg-white/50 dark:bg-stone-800/50 backdrop-blur-sm"
+            >
+              <Download className="w-5 h-5 group-hover:scale-110 transition-transform duration-300" />
+              <span>Download Results</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

frontend/src/components/ProxyStats.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Shield, CheckCircle, XCircle, RotateCcw } from 'lucide-react';
+
+interface ProxyStatsProps {
+  stats: {
+    available: number;
+    healthy: number;
+    blocked: number;
+    retry_count: number;
+  };
+}
+
+export const ProxyStats: React.FC<ProxyStatsProps> = ({ stats }) => {
+  return (
+    <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-stone-200/60 overflow-hidden transition-all duration-300 hover:shadow-md hover:bg-white/80">
+      <div className="p-6">
+        <div className="flex items-center space-x-3 mb-6">
+          <div className="w-10 h-10 bg-gradient-to-br from-stone-400 to-stone-500 dark:from-stone-500 dark:to-stone-600 rounded-xl flex items-center justify-center shadow-md">
+            <Shield className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h2 className="text-lg font-medium text-stone-800 dark:text-stone-200">Proxy Network</h2>
+            <p className="text-sm text-stone-600 dark:text-stone-400 font-light">Smart rotation & health</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="bg-gradient-to-br from-sage-50/80 to-sage-100/50 dark:from-stone-800/50 dark:to-stone-700/50 p-4 rounded-xl border border-sage-200/40 dark:border-stone-600/40 group hover:shadow-sm transition-all duration-300 backdrop-blur-sm">
+            <div className="flex items-center justify-between mb-2">
+              <CheckCircle className="w-4 h-4 text-sage-600 dark:text-sage-400" />
+              <span className="text-xs text-sage-600/70 dark:text-sage-400/70 font-medium tracking-wide">AVAILABLE</span>
+            </div>
+            <div className="text-2xl font-light text-sage-700 dark:text-sage-300 mb-1">{stats.available}</div>
+            <div className="text-sm text-sage-600/80 dark:text-sage-400/80 font-light">Proxies</div>
+          </div>
+
+          <div className="bg-gradient-to-br from-sky-50/80 to-sky-100/50 dark:from-stone-800/50 dark:to-stone-700/50 p-4 rounded-xl border border-sky-200/40 dark:border-stone-600/40 group hover:shadow-sm transition-all duration-300 backdrop-blur-sm">
+            <div className="flex items-center justify-between mb-2">
+              <CheckCircle className="w-4 h-4 text-sky-600 dark:text-sky-400 fill-current" />
+              <span className="text-xs text-sky-600/70 dark:text-sky-400/70 font-medium tracking-wide">HEALTHY</span>
+            </div>
+            <div className="text-2xl font-light text-sky-700 dark:text-sky-300 mb-1">{stats.healthy}</div>
+            <div className="text-sm text-sky-600/80 dark:text-sky-400/80 font-light">Active</div>
+          </div>
+
+          <div className="bg-gradient-to-br from-honey-50/80 to-honey-100/50 dark:from-stone-800/50 dark:to-stone-700/50 p-4 rounded-xl border border-honey-200/40 dark:border-stone-600/40 group hover:shadow-sm transition-all duration-300 backdrop-blur-sm">
+            <div className="flex items-center justify-between mb-2">
+              <XCircle className="w-4 h-4 text-honey-600 dark:text-honey-400" />
+              <span className="text-xs text-honey-600/70 dark:text-honey-400/70 font-medium tracking-wide">BLOCKED</span>
+            </div>
+            <div className="text-2xl font-light text-honey-700 dark:text-honey-300 mb-1">{stats.blocked}</div>
+            <div className="text-sm text-honey-600/80 dark:text-honey-400/80 font-light">Proxies</div>
+          </div>
+
+          <div className="bg-gradient-to-br from-blush-50/80 to-blush-100/50 dark:from-stone-800/50 dark:to-stone-700/50 p-4 rounded-xl border border-blush-200/40 dark:border-stone-600/40 group hover:shadow-sm transition-all duration-300 backdrop-blur-sm">
+            <div className="flex items-center justify-between mb-2">
+              <RotateCcw className="w-4 h-4 text-blush-600 dark:text-blush-400" />
+              <span className="text-xs text-blush-600/70 dark:text-blush-400/70 font-medium tracking-wide">RETRIES</span>
+            </div>
+            <div className="text-2xl font-light text-blush-700 dark:text-blush-300 mb-1">{stats.retry_count}</div>
+            <div className="text-sm text-blush-600/80 dark:text-blush-400/80 font-light">Count</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/ScreenshotGallery.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+import { Camera, X, Maximize2 } from 'lucide-react'
+
+interface ScreenshotGalleryProps {
+  screenshots: string[]
+  onClear: () => void
+}
+
+export const ScreenshotGallery: React.FC<ScreenshotGalleryProps> = ({ screenshots, onClear }) => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null)
+
+  const handleImageClick = (screenshot: string) => {
+    setSelectedImage(screenshot)
+  }
+
+  const closeModal = () => {
+    setSelectedImage(null)
+  }
+
+  return (
+    <div className="animate-fade-in-up" style={{ animationDelay: '0.6s' }}>
+      <div className="bg-white/80 dark:bg-stone-800/80 backdrop-blur-sm rounded-2xl border border-stone-200/50 dark:border-stone-700/50 shadow-lg hover:shadow-xl transition-all duration-300">
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-br from-stone-400 to-stone-500 rounded-xl flex items-center justify-center shadow-sm">
+                <Camera className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-stone-900 dark:text-stone-100">Screenshots</h2>
+                <p className="text-sm text-stone-600 dark:text-stone-400">Captured browser states during automation</p>
+              </div>
+            </div>
+            
+            <div className="flex items-center space-x-3">
+              <span className="text-sm text-stone-500 dark:text-stone-400">
+                {screenshots.length} screenshot{screenshots.length !== 1 ? 's' : ''}
+              </span>
+              <button 
+                onClick={onClear}
+                className="px-3 py-1.5 text-xs bg-stone-100 dark:bg-stone-700 text-stone-600 dark:text-stone-300 rounded-lg hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-200"
+              >
+                Clear
+              </button>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-96 overflow-y-auto">
+            {screenshots.length === 0 ? (
+              <div className="col-span-full text-stone-500 dark:text-stone-400 text-center py-12">
+                <Camera className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p>No screenshots captured yet</p>
+                <p className="text-sm mt-1">Screenshots will appear here as the agent runs</p>
+              </div>
+            ) : (
+              screenshots.map((screenshot, index) => (
+                <div 
+                  key={index}
+                  className="relative group cursor-pointer transform hover:scale-105 transition-all duration-300"
+                  onClick={() => handleImageClick(screenshot)}
+                >
+                  <img 
+                    src={`data:image/png;base64,${screenshot}`}
+                    className="w-full h-32 object-cover rounded-xl border border-stone-200 dark:border-stone-700 shadow-sm group-hover:shadow-md transition-all duration-300" 
+                    alt={`Screenshot ${index + 1}`}
+                  />
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300 rounded-xl flex items-center justify-center">
+                    <Maximize2 className="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                  </div>
+                  <div className="absolute bottom-2 left-2 right-2">
+                    <div className="bg-black/70 text-white text-xs px-2 py-1 rounded-lg backdrop-blur-sm">
+                      Screenshot {index + 1} - {new Date().toLocaleTimeString()}
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Modal for full-size image */}
+      {selectedImage && (
+        <div 
+          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fade-in"
+          onClick={closeModal}
+        >
+          <div className="relative max-w-4xl max-h-full">
+            <button
+              onClick={closeModal}
+              className="absolute -top-12 right-0 text-white hover:text-stone-300 transition-colors"
+            >
+              <X className="w-8 h-8" />
+            </button>
+            <img
+              src={`data:image/png;base64,${selectedImage}`}
+              className="max-w-full max-h-full object-contain rounded-xl shadow-2xl"
+              alt="Full size screenshot"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/StatusDisplay.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import { CheckCircle, AlertCircle, Info, X, Sparkles } from 'lucide-react';
+
+interface StatusDisplayProps {
+  status: {
+    message: string;
+    type: 'success' | 'error' | 'info';
+  };
+  onDismiss: () => void;
+}
+
+export const StatusDisplay: React.FC<StatusDisplayProps> = ({ status, onDismiss }) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    setIsVisible(true);
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(onDismiss, 300);
+    }, 6000);
+
+    return () => clearTimeout(timer);
+  }, [status, onDismiss]);
+
+  const getStatusConfig = () => {
+    switch (status.type) {
+      case 'success':
+        return {
+          icon: CheckCircle,
+          bgColor: 'bg-emerald-50/90 border-emerald-200/60',
+          textColor: 'text-emerald-800',
+          iconColor: 'text-emerald-600',
+          accentColor: 'bg-emerald-500'
+        };
+      case 'error':
+        return {
+          icon: AlertCircle,
+          bgColor: 'bg-rose-50/90 border-rose-200/60',
+          textColor: 'text-rose-800',
+          iconColor: 'text-rose-600',
+          accentColor: 'bg-rose-500'
+        };
+      default:
+        return {
+          icon: Info,
+          bgColor: 'bg-blue-50/90 border-blue-200/60',
+          textColor: 'text-blue-800',
+          iconColor: 'text-blue-600',
+          accentColor: 'bg-blue-500'
+        };
+    }
+  };
+
+  const config = getStatusConfig();
+  const Icon = config.icon;
+
+  return (
+    <div 
+      className={`
+        ${config.bgColor} border rounded-xl p-4 shadow-sm backdrop-blur-sm transition-all duration-500 relative overflow-hidden
+        ${isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-2 scale-95'}
+      `}
+    >
+      {/* Animated accent bar */}
+      <div className={`absolute top-0 left-0 h-1 ${config.accentColor} animate-pulse`} style={{ width: '100%' }}></div>
+      
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <div className="relative">
+            <Icon className={`w-6 h-6 ${config.iconColor}`} />
+            {status.type === 'info' && (
+              <Sparkles className="w-3 h-3 text-blue-400 absolute -top-1 -right-1 animate-pulse" />
+            )}
+          </div>
+          <div>
+            <span className={`text-sm font-medium ${config.textColor} leading-relaxed`}>
+              {status.message}
+            </span>
+          </div>
+        </div>
+        <button
+          onClick={() => {
+            setIsVisible(false);
+            setTimeout(onDismiss, 300);
+          }}
+          className={`${config.textColor} hover:opacity-70 transition-all duration-200 p-1 rounded-lg hover:bg-white/20`}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/components/StreamingViewer.tsx

@@ -0,0 +1,232 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Monitor, Play, Square, Camera, Settings, Circle, Maximize2 } from 'lucide-react';
+import { WebSocketManager } from '../services/WebSocketManager';
+
+interface StreamingViewerProps {
+  wsManager: WebSocketManager;
+  jobId: string | null;
+  autoConnect?: boolean;
+}
+
+export const StreamingViewer: React.FC<StreamingViewerProps> = ({ wsManager, jobId, autoConnect = false }) => {
+  const [isConnected, setIsConnected] = useState(false);
+  const [currentFrame, setCurrentFrame] = useState<string | null>(null);
+  const [streamStats, setStreamStats] = useState({ frameCount: 0, fps: 0 });
+  const [showStream, setShowStream] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const lastFrameTimeRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    wsManager.on('stream_connected', () => {
+      setIsConnected(true);
+    });
+
+    wsManager.on('stream_disconnected', () => {
+      setIsConnected(false);
+      setStreamStats({ frameCount: 0, fps: 0 });
+      lastFrameTimeRef.current = null;
+    });
+
+    wsManager.on('stream_frame', (data: any) => {
+      setCurrentFrame(data.data);
+
+      const now = performance.now();
+      const lastFrame = lastFrameTimeRef.current;
+      const fps = lastFrame ? Math.round(1000 / Math.max(now - lastFrame, 1)) : 0;
+      lastFrameTimeRef.current = now;
+
+      setStreamStats(prev => ({
+        frameCount: prev.frameCount + 1,
+        fps: fps || prev.fps
+      }));
+    });
+
+    wsManager.on('streaming_info', (data: any) => {
+      if (data.streaming?.enabled) {
+        setShowStream(true);
+      }
+    });
+  }, [wsManager]);
+
+  useEffect(() => {
+    if (autoConnect && jobId && !wsManager.isStreamConnected()) {
+      setShowStream(true);
+      wsManager.connectStream(jobId);
+    } else {
+      console.log('Auto-connect conditions not met:', {
+        autoConnect: !!autoConnect,
+        jobId: !!jobId,
+        notConnected: !wsManager.isStreamConnected()
+      });
+    }
+  
+    if (!jobId) {
+      setCurrentFrame(null);
+      setStreamStats({ frameCount: 0, fps: 0 });
+      lastFrameTimeRef.current = null;
+      setIsConnected(false);
+    }
+  }, [autoConnect, jobId, wsManager]);
+
+  const handleConnect = () => {
+    if (jobId) {
+      wsManager.connectStream(jobId);
+    }
+  };
+
+  const handleDisconnect = () => {
+    wsManager.disconnectStream();
+  };
+
+  const handleStreamClick = (e: React.MouseEvent<HTMLImageElement>) => {
+    if (!isConnected) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = Math.round((e.clientX - rect.left) * (1280 / rect.width));
+    const y = Math.round((e.clientY - rect.top) * (800 / rect.height));
+
+    wsManager.sendStreamMessage({
+      type: 'mouse',
+      eventType: 'mousePressed',
+      x,
+      y,
+      button: 'left',
+      clickCount: 1
+    });
+
+    setTimeout(() => {
+      wsManager.sendStreamMessage({
+        type: 'mouse',
+        eventType: 'mouseReleased',
+        x,
+        y,
+        button: 'left'
+      });
+    }, 100);
+  };
+
+  if (!showStream) {
+    return (
+      <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-stone-200/60 overflow-hidden transition-all duration-300 hover:shadow-md hover:bg-white/80">
+        <div className="p-8">
+          <div className="flex items-center space-x-3 mb-6">
+            <div className="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center shadow-md">
+              <Monitor className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <h2 className="text-lg font-medium text-stone-800">Live Browser View</h2>
+              <p className="text-sm text-stone-600 font-light">Real-time browser streaming with interaction</p>
+            </div>
+          </div>
+
+          <div className="bg-stone-50/80 dark:bg-stone-800/50 backdrop-blur-sm rounded-xl border-2 border-dashed border-stone-300/60 dark:border-stone-600/60 p-16 text-center">
+            <div className="w-20 h-20 bg-stone-200/80 dark:bg-stone-700/80 rounded-2xl mx-auto mb-6 flex items-center justify-center">
+              <Monitor className="w-10 h-10 text-stone-400 dark:text-stone-500" />
+            </div>
+            <h3 className="text-xl font-medium text-stone-800 dark:text-stone-200 mb-3">Browser Streaming</h3>
+            <p className="text-stone-600 dark:text-stone-400 font-light mb-6 max-w-md mx-auto leading-relaxed">
+              Enable streaming to watch BrowserPilot navigate websites in real-time
+            </p>
+            <button
+              onClick={() => setShowStream(true)}
+              className="px-6 py-3 bg-gradient-to-r from-stone-500 to-stone-600 text-white rounded-xl hover:from-stone-600 hover:to-stone-700 transition-all duration-300 flex items-center space-x-3 mx-auto group shadow-md hover:shadow-lg"
+            >
+              <Play className="w-5 h-5 group-hover:scale-110 transition-transform duration-300" />
+              <span className="font-medium">Enable Live Streaming</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-stone-200/60 overflow-hidden transition-all duration-300 hover:shadow-md hover:bg-white/80">
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-stone-400 to-stone-500 dark:from-stone-500 dark:to-stone-600 rounded-xl flex items-center justify-center shadow-md">
+              <Monitor className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <h2 className="text-lg font-medium text-stone-800 dark:text-stone-200">Live Browser View</h2>
+              <p className="text-sm text-stone-600 dark:text-stone-400 font-light">Real-time browser streaming with interaction</p>
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-4">
+            <div className={`flex items-center space-x-2 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 ${
+              isConnected 
+                ? 'bg-sage-100/80 dark:bg-sage-800/50 text-sage-800 dark:text-sage-200 backdrop-blur-sm' 
+                : 'bg-blush-100/80 dark:bg-blush-800/50 text-blush-800 dark:text-blush-200 backdrop-blur-sm'
+            }`}>
+              <Circle className={`w-2 h-2 ${isConnected ? 'text-sage-600 dark:text-sage-400 fill-current animate-pulse' : 'text-blush-600 dark:text-blush-400 fill-current'}`} />
+              <span>{isConnected ? 'Live' : 'Offline'}</span>
+            </div>
+            <span className="text-xs text-stone-500 dark:text-stone-400 font-light">{streamStats.fps} FPS</span>
+          </div>
+        </div>
+
+        <div className="relative bg-stone-900 dark:bg-stone-950 rounded-xl overflow-hidden border border-stone-200/60 dark:border-stone-600/60 shadow-lg">
+          {currentFrame ? (
+            <img
+              src={`data:image/jpeg;base64,${currentFrame}`}
+              alt="Browser Stream"
+              className="w-full h-auto cursor-pointer hover:opacity-95 transition-opacity duration-200"
+              onClick={handleStreamClick}
+            />
+          ) : (
+            <div className="aspect-video flex items-center justify-center bg-stone-900 dark:bg-stone-950">
+              <div className="text-center animate-in fade-in duration-500">
+                <Monitor className="w-16 h-16 text-stone-400 dark:text-stone-500 mx-auto mb-4" />
+                <p className="text-stone-300 dark:text-stone-400 text-sm font-light">Waiting for stream data...</p>
+              </div>
+            </div>
+          )}
+
+          {/* Stream Controls Overlay */}
+          <div className="absolute bottom-4 left-4 right-4">
+            <div className="bg-black/70 backdrop-blur-md rounded-xl p-4 border border-white/10">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <button
+                    onClick={handleConnect}
+                    disabled={isConnected || !jobId}
+                    className="px-4 py-2 bg-emerald-500 text-white rounded-lg text-sm hover:bg-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center space-x-2 group"
+                  >
+                    <Play className="w-4 h-4 group-hover:scale-110 transition-transform duration-200" />
+                    <span>Connect</span>
+                  </button>
+                  <button
+                    onClick={handleDisconnect}
+                    disabled={!isConnected}
+                    className="px-4 py-2 bg-rose-500 text-white rounded-lg text-sm hover:bg-rose-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center space-x-2 group"
+                  >
+                    <Square className="w-4 h-4 group-hover:scale-110 transition-transform duration-200" />
+                    <span>Disconnect</span>
+                  </button>
+                  <button className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-all duration-200 flex items-center space-x-2 group">
+                    <Camera className="w-4 h-4 group-hover:scale-110 transition-transform duration-200" />
+                    <span>Capture</span>
+                  </button>
+                </div>
+
+                <div className="flex items-center space-x-3 text-white text-sm">
+                  <button className="p-2 hover:bg-white/10 rounded-lg transition-colors duration-200">
+                    <Maximize2 className="w-4 h-4" />
+                  </button>
+                  <Settings className="w-4 h-4" />
+                  <select className="bg-stone-700/80 text-white rounded-lg px-3 py-1 text-xs border-0 focus:ring-2 focus:ring-purple-500 backdrop-blur-sm">
+                    <option value="60">Low Quality</option>
+                    <option value="80" selected>Medium Quality</option>
+                    <option value="100">High Quality</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/TokenUsage.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { BarChart3, TrendingUp, Zap, Activity } from 'lucide-react';
+
+interface TokenUsageProps {
+  usage: {
+    prompt_tokens: number;
+    response_tokens: number;
+    total_tokens: number;
+    api_calls: number;
+  };
+}
+
+export const TokenUsage: React.FC<TokenUsageProps> = ({ usage }) => {
+  return (
+    <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-stone-200/60 overflow-hidden transition-all duration-300 hover:shadow-md hover:bg-white/80">
+      <div className="p-6">
+        <div className="flex items-center space-x-3 mb-6">
+          <div className="w-10 h-10 bg-gradient-to-br from-stone-400 to-stone-500 dark:from-stone-500 dark:to-stone-600 rounded-xl flex items-center justify-center shadow-md">
+            <BarChart3 className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h2 className="text-lg font-medium text-stone-800 dark:text-stone-200">Token Usage</h2>
+            <p className="text-sm text-stone-600 dark:text-stone-400 font-light">AI model consumption</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="bg-gradient-to-br from-stone-50/80 to-stone-100/50 dark:from-stone-800/50 dark:to-stone-700/50 p-4 rounded-xl border border-stone-200/40 dark:border-stone-600/40 group hover:shadow-sm transition-all duration-300 backdrop-blur-sm">
+            <div className="flex items-center justify-between mb-2">
+              <Activity className="w-4 h-4 text-stone-600 dark:text-stone-400" />
+              <span className="text-xs text-stone-600/70 dark:text-stone-400/70 font-medium tracking-wide">TOTAL</span>
+            </div>
+            <div className="text-2xl font-light text-stone-700 dark:text-stone-300 mb-1">{usage.total_tokens.toLocaleString()}</div>
+            <div className="text-sm text-stone-600/80 dark:text-stone-400/80 font-light">Tokens</div>
+          </div>
+
+          <div className="bg-gradient-to-br from-sage-50/80 to-sage-100/50 dark:from-stone-800/50 dark:to-stone-700/50 p-4 rounded-xl border border-sage-200/40 dark:border-stone-600/40 group hover:shadow-sm transition-all duration-300 backdrop-blur-sm">
+            <div className="flex items-center justify-between mb-2">
+              <TrendingUp className="w-4 h-4 text-sage-600 dark:text-sage-400" />
+              <span className="text-xs text-sage-600/70 dark:text-sage-400/70 font-medium tracking-wide">INPUT</span>
+            </div>
+            <div className="text-2xl font-light text-sage-700 dark:text-sage-300 mb-1">{usage.prompt_tokens.toLocaleString()}</div>
+            <div className="text-sm text-sage-600/80 dark:text-sage-400/80 font-light">Prompt</div>
+          </div>
+
+          <div className="bg-gradient-to-br from-lavender-50/80 to-lavender-100/50 dark:from-stone-800/50 dark:to-stone-700/50 p-4 rounded-xl border border-lavender-200/40 dark:border-stone-600/40 group hover:shadow-sm transition-all duration-300 backdrop-blur-sm">
+            <div className="flex items-center justify-between mb-2">
+              <Zap className="w-4 h-4 text-lavender-600 dark:text-lavender-400" />
+              <span className="text-xs text-lavender-600/70 dark:text-lavender-400/70 font-medium tracking-wide">OUTPUT</span>
+            </div>
+            <div className="text-2xl font-light text-lavender-700 dark:text-lavender-300 mb-1">{usage.response_tokens.toLocaleString()}</div>
+            <div className="text-sm text-lavender-600/80 dark:text-lavender-400/80 font-light">Response</div>
+          </div>
+
+          <div className="bg-gradient-to-br from-peach-50/80 to-peach-100/50 dark:from-stone-800/50 dark:to-stone-700/50 p-4 rounded-xl border border-peach-200/40 dark:border-stone-600/40 group hover:shadow-sm transition-all duration-300 backdrop-blur-sm">
+            <div className="flex items-center justify-between mb-2">
+              <Activity className="w-4 h-4 text-peach-600 dark:text-peach-400" />
+              <span className="text-xs text-peach-600/70 dark:text-peach-400/70 font-medium tracking-wide">CALLS</span>
+            </div>
+            <div className="text-2xl font-light text-peach-700 dark:text-peach-300 mb-1">{usage.api_calls}</div>
+            <div className="text-sm text-peach-600/80 dark:text-peach-400/80 font-light">API Requests</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/index.css

@@ -0,0 +1,386 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom color definitions for softer palette */
+:root {
+  --sage-50: #f6f7f6;
+  --sage-100: #e8eae8;
+  --sage-200: #d1d5d1;
+  --sage-300: #adb5ad;
+  --sage-400: #8a948a;
+  --sage-500: #6b756b;
+  --sage-600: #565e56;
+  --sage-700: #484e48;
+  --sage-800: #3d423d;
+  --sage-900: #343834;
+  
+  --lavender-50: #f7f6f9;
+  --lavender-100: #ede9f2;
+  --lavender-200: #ddd6e7;
+  --lavender-300: #c4b8d4;
+  --lavender-400: #a892bd;
+  --lavender-500: #9070a6;
+  --lavender-600: #7a5a8a;
+  --lavender-700: #654a71;
+  --lavender-800: #553f5e;
+  --lavender-900: #49374f;
+  
+  --peach-50: #fef7f3;
+  --peach-100: #fdede5;
+  --peach-200: #fad8ca;
+  --peach-300: #f6baa4;
+  --peach-400: #f0926d;
+  --peach-500: #e97142;
+  --peach-600: #da5a28;
+  --peach-700: #b6481e;
+  --peach-800: #923d1d;
+  --peach-900: #76361c;
+  
+  --honey-50: #fefbf3;
+  --honey-100: #fdf4e1;
+  --honey-200: #fae7c2;
+  --honey-300: #f6d498;
+  --honey-400: #f1bc6c;
+  --honey-500: #eca54a;
+  --honey-600: #dd8f39;
+  --honey-700: #b87532;
+  --honey-800: #945d30;
+  --honey-900: #784d2a;
+  
+  --blush-50: #fdf4f3;
+  --blush-100: #fce7e6;
+  --blush-200: #f9d4d2;
+  --blush-300: #f4b5b1;
+  --blush-400: #ec8b85;
+  --blush-500: #e0675e;
+  --blush-600: #cd4f45;
+  --blush-700: #ab3f37;
+  --blush-800: #8d3832;
+  --blush-900: #753530;
+  
+  --sky-50: #f0f9ff;
+  --sky-100: #e0f2fe;
+  --sky-200: #bae6fd;
+  --sky-300: #7dd3fc;
+  --sky-400: #38bdf8;
+  --sky-500: #0ea5e9;
+  --sky-600: #0284c7;
+  --sky-700: #0369a1;
+  --sky-800: #075985;
+  --sky-900: #0c4a6e;
+}
+
+/* Apply custom colors */
+.bg-sage-50 { background-color: var(--sage-50); }
+.bg-sage-100 { background-color: var(--sage-100); }
+.text-sage-600 { color: var(--sage-600); }
+.text-sage-700 { color: var(--sage-700); }
+.text-sage-300 { color: var(--sage-300); }
+.text-sage-400 { color: var(--sage-400); }
+.border-sage-200 { border-color: var(--sage-200); }
+
+.bg-lavender-50 { background-color: var(--lavender-50); }
+.bg-lavender-100 { background-color: var(--lavender-100); }
+.text-lavender-600 { color: var(--lavender-600); }
+.text-lavender-700 { color: var(--lavender-700); }
+.text-lavender-300 { color: var(--lavender-300); }
+.text-lavender-400 { color: var(--lavender-400); }
+.border-lavender-200 { border-color: var(--lavender-200); }
+
+.bg-peach-50 { background-color: var(--peach-50); }
+.bg-peach-100 { background-color: var(--peach-100); }
+.text-peach-600 { color: var(--peach-600); }
+.text-peach-700 { color: var(--peach-700); }
+.text-peach-300 { color: var(--peach-300); }
+.text-peach-400 { color: var(--peach-400); }
+.border-peach-200 { border-color: var(--peach-200); }
+
+.bg-honey-50 { background-color: var(--honey-50); }
+.bg-honey-100 { background-color: var(--honey-100); }
+.text-honey-600 { color: var(--honey-600); }
+.text-honey-700 { color: var(--honey-700); }
+.text-honey-300 { color: var(--honey-300); }
+.text-honey-400 { color: var(--honey-400); }
+.border-honey-200 { border-color: var(--honey-200); }
+
+.bg-blush-50 { background-color: var(--blush-50); }
+.bg-blush-100 { background-color: var(--blush-100); }
+.text-blush-600 { color: var(--blush-600); }
+.text-blush-700 { color: var(--blush-700); }
+.text-blush-300 { color: var(--blush-300); }
+.text-blush-400 { color: var(--blush-400); }
+.border-blush-200 { border-color: var(--blush-200); }
+
+.bg-sky-50 { background-color: var(--sky-50); }
+.bg-sky-100 { background-color: var(--sky-100); }
+.text-sky-600 { color: var(--sky-600); }
+.text-sky-700 { color: var(--sky-700); }
+.text-sky-300 { color: var(--sky-300); }
+.text-sky-400 { color: var(--sky-400); }
+.border-sky-200 { border-color: var(--sky-200); }
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    margin: 0;
+    padding: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 50%, #fef7ed 100%);
+    transition: background 0.3s ease;
+  }
+  
+  .dark body {
+    background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #44403c 100%);
+  }
+}
+
+@layer components {
+  .animate-in {
+    animation: animate-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .fade-in {
+    animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .slide-in-from-top-1 {
+    animation: slide-in-from-top-1 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .slide-in-from-top-2 {
+    animation: slide-in-from-top-2 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .slide-in-from-bottom-2 {
+    animation: slide-in-from-bottom-2 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .slide-in-from-bottom-4 {
+    animation: slide-in-from-bottom-4 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .slide-in-from-left-4 {
+    animation: slide-in-from-left-4 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .slide-in-from-right-4 {
+    animation: slide-in-from-right-4 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .zoom-in-95 {
+    animation: zoom-in-95 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .btn-primary {
+    @apply bg-gradient-to-r from-amber-500 to-orange-500 text-white px-8 py-4 rounded-xl font-medium hover:from-amber-600 hover:to-orange-600 focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:ring-offset-2 transition-all duration-300 shadow-md hover:shadow-lg;
+  }
+  
+  .card {
+    @apply bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-stone-200/60 p-6;
+  }
+  
+  .input-field {
+    @apply w-full px-4 py-3 border border-stone-300/60 rounded-xl focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition-all duration-200 bg-white/50 backdrop-blur-sm;
+  }
+  
+  .status-badge {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium backdrop-blur-sm;
+  }
+}
+
+@keyframes animate-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-from-top-1 {
+  0% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-top-2 {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom-2 {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom-4 {
+  0% {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left-4 {
+  0% {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right-4 {
+  0% {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes zoom-in-95 {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Scrollbar styling for webkit browsers */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f8fafc;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, #d6d3d1, #a8a29e);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, #a8a29e, #78716c);
+}
+
+/* Custom focus styles */
+.focus\:ring-amber-500\/20:focus {
+  --tw-ring-color: rgb(245 158 11 / 0.2);
+}
+
+/* Gradient backgrounds */
+.gradient-warm {
+  background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 50%, #fdba74 100%);
+}
+
+.glass-effect {
+  @apply bg-white/70 backdrop-blur-md border border-stone-200/60;
+}
+
+/* Hover effects */
+.hover-lift {
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -3px rgba(0, 0, 0, 0.05);
+}
+
+/* Loading animations */
+@keyframes pulse-soft {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.animate-pulse-soft {
+  animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Interactive elements */
+.interactive-scale {
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.interactive-scale:hover {
+  transform: scale(1.05);
+}
+
+.interactive-scale:active {
+  transform: scale(0.98);
+}
+
+/* Floating elements */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* Staggered animations */
+.stagger-1 { animation-delay: 0.1s; }
+.stagger-2 { animation-delay: 0.2s; }
+.stagger-3 { animation-delay: 0.3s; }
+.stagger-4 { animation-delay: 0.4s; }
+.stagger-5 { animation-delay: 0.5s; }
+.stagger-6 { animation-delay: 0.6s; }

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

frontend/src/services/WebSocketManager.ts

@@ -0,0 +1,178 @@
+type EventCallback = (data: any) => void;
+
+export class WebSocketManager {
+  private websocket: WebSocket | null = null;
+  private streamWebSocket: WebSocket | null = null;
+  private eventListeners: Map<string, EventCallback[]> = new Map();
+  private reconnectAttempts = 0;
+  private maxReconnectAttempts = 5;
+  private reconnectDelay = 1000;
+
+  public connect(jobId: string): void {
+    if (this.websocket) {
+      this.websocket.close();
+    }
+
+    // Detect if we're in development mode (frontend on different port than backend)
+    const isDev = window.location.port === '5173';
+    const backendHost = isDev ? 'localhost:8000' : window.location.host;
+    const wsBase = `${window.location.protocol === "https:" ? "wss" : "ws"}://${backendHost}`;
+    console.log(`📡 Connecting to WebSocket: ${wsBase}/ws/${jobId}`);
+    this.websocket = new WebSocket(`${wsBase}/ws/${jobId}`);
+    
+    this.websocket.onopen = () => {
+      console.log('📡 WebSocket connected successfully');
+      this.reconnectAttempts = 0;
+      this.emit('connected', { status: 'connected' });
+    };
+
+    this.websocket.onmessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log('📨 WebSocket message received:', data.type, data);
+        
+        // Handle different message types
+        switch (data.type) {
+          case 'proxy_stats':
+            this.emit('proxy_stats', data.stats || data);
+            break;
+          case 'decision':
+            this.emit('decision', data.decision || data);
+            break;
+          case 'screenshot':
+            this.emit('screenshot', data.screenshot || data);
+            break;
+          case 'token_usage':
+            this.emit('token_usage', data.token_usage || data);
+            break;
+          case 'page_info':
+            this.emit('page_info', data);
+            break;
+          case 'extraction':
+            this.emit('extraction', data);
+            break;
+          case 'streaming_info':
+            this.emit('streaming_info', data);
+            break;
+          case 'error':
+            this.emit('error', data);
+            break;
+          default:
+            if (data.status) {
+              this.emit('status', data);
+            } else {
+              this.emit(data.type, data);
+            }
+        }
+      } catch (error) {
+        console.error('Error parsing WebSocket message:', error, event.data);
+      }
+    };
+
+    this.websocket.onclose = (event: CloseEvent) => {
+      console.log('📡 WebSocket disconnected:', event.code, event.reason);
+      this.websocket = null;
+      
+      if (this.reconnectAttempts < this.maxReconnectAttempts) {
+        this.reconnectAttempts++;
+        console.log(`🔄 Attempting reconnection ${this.reconnectAttempts}/${this.maxReconnectAttempts}`);
+        setTimeout(() => this.connect(jobId), this.reconnectDelay);
+        this.reconnectDelay *= 2;
+      }
+    };
+
+    this.websocket.onerror = (error: Event) => {
+      console.error('📡 WebSocket error:', error);
+      this.emit('error', { error: 'WebSocket connection error' });
+    };
+  }
+
+  public connectStream(jobId: string): void {
+    if (this.streamWebSocket) {
+      this.streamWebSocket.close();
+    }
+
+    // Detect if we're in development mode (frontend on different port than backend)
+    const isDev = window.location.port === '5173';
+    const backendHost = isDev ? 'localhost:8000' : window.location.host;
+    const wsBase = `${window.location.protocol === "https:" ? "wss" : "ws"}://${backendHost}`;
+    console.log(`🎥 Connecting to Stream WebSocket: ${wsBase}/stream/${jobId}`);
+    this.streamWebSocket = new WebSocket(`${wsBase}/stream/${jobId}`);
+    
+    this.streamWebSocket.onopen = () => {
+      console.log('🎥 Stream WebSocket connected successfully');
+      this.emit('stream_connected', { status: 'connected' });
+    };
+
+    this.streamWebSocket.onmessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log('🎥 Stream message received:', data.type);
+        this.emit('stream_' + data.type, data);
+      } catch (error) {
+        console.error('Error parsing stream message:', error);
+      }
+    };
+
+    this.streamWebSocket.onclose = () => {
+      console.log('🎥 Stream WebSocket disconnected');
+      this.streamWebSocket = null;
+      this.emit('stream_disconnected', { status: 'disconnected' });
+    };
+
+    this.streamWebSocket.onerror = (error: Event) => {
+      console.error('🎥 Stream WebSocket error:', error);
+      this.emit('stream_error', { error: 'Stream connection error' });
+    };
+  }
+
+  public sendStreamMessage(message: any): void {
+    if (this.streamWebSocket && this.streamWebSocket.readyState === WebSocket.OPEN) {
+      this.streamWebSocket.send(JSON.stringify(message));
+    } else {
+      console.warn('Stream WebSocket not connected');
+    }
+  }
+
+  public on(event: string, callback: EventCallback): void {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, []);
+    }
+    this.eventListeners.get(event)?.push(callback);
+    console.log(`📝 Event listener added for: ${event}`);
+  }
+
+  private emit(event: string, data: any): void {
+    const listeners = this.eventListeners.get(event) || [];
+    console.log(`📤 Emitting event: ${event} to ${listeners.length} listeners`);
+    listeners.forEach(callback => {
+      try {
+        callback(data);
+      } catch (error) {
+        console.error(`Error in event listener for ${event}:`, error);
+      }
+    });
+  }
+
+  public disconnect(): void {
+    if (this.websocket) {
+      this.websocket.close();
+      this.websocket = null;
+    }
+  }
+
+  public disconnectStream(): void {
+    if (this.streamWebSocket) {
+      this.streamWebSocket.close();
+      this.streamWebSocket = null;
+    }
+  }
+
+  public isConnected(): boolean {
+    return this.websocket !== null && this.websocket.readyState === WebSocket.OPEN;
+  }
+
+  public isStreamConnected(): boolean {
+    return this.streamWebSocket !== null && this.streamWebSocket.readyState === WebSocket.OPEN;
+  }
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tailwind.config.js

@@ -0,0 +1,72 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        sage: {
+          50: '#f6f7f6',
+          100: '#e8eae8',
+          200: '#d1d5d1',
+          300: '#adb5ad',
+          400: '#8a948a',
+          500: '#6b756b',
+          600: '#565e56',
+          700: '#484e48',
+          800: '#3d423d',
+          900: '#343834',
+        },
+        lavender: {
+          50: '#f7f6f9',
+          100: '#ede9f2',
+          200: '#ddd6e7',
+          300: '#c4b8d4',
+          400: '#a892bd',
+          500: '#9070a6',
+          600: '#7a5a8a',
+          700: '#654a71',
+          800: '#553f5e',
+          900: '#49374f',
+        },
+        peach: {
+          50: '#fef7f3',
+          100: '#fdede5',
+          200: '#fad8ca',
+          300: '#f6baa4',
+          400: '#f0926d',
+          500: '#e97142',
+          600: '#da5a28',
+          700: '#b6481e',
+          800: '#923d1d',
+          900: '#76361c',
+        },
+        honey: {
+          50: '#fefbf3',
+          100: '#fdf4e1',
+          200: '#fae7c2',
+          300: '#f6d498',
+          400: '#f1bc6c',
+          500: '#eca54a',
+          600: '#dd8f39',
+          700: '#b87532',
+          800: '#945d30',
+          900: '#784d2a',
+        },
+        blush: {
+          50: '#fdf4f3',
+          100: '#fce7e6',
+          200: '#f9d4d2',
+          300: '#f4b5b1',
+          400: '#ec8b85',
+          500: '#e0675e',
+          600: '#cd4f45',
+          700: '#ab3f37',
+          800: '#8d3832',
+          900: '#753530',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

frontend/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});

render.yaml

@@ -0,0 +1,24 @@
+services:
+  - type: web
+    name: browserpilot
+    env: docker
+    region: oregon
+    plan: starter
+    dockerfilePath: ./Dockerfile
+    dockerContext: .
+    healthCheckPath: /
+    envVars:
+      - key: GOOGLE_API_KEY
+        sync: false
+      - key: DATABASE_URL
+        sync: false
+      - key: SCRAPER_PROXIES
+        sync: false
+        default: []
+      - key: PYTHONUNBUFFERED
+        sync: false
+        default: 1
+    disk:
+      name: outputs
+      mountPath: /app/outputs
+      sizeGB: 5

requirements.txt

@@ -0,0 +1,18 @@
+fastapi==0.111.0
+uvicorn[standard]==0.29.0
+playwright==1.53.0
+google-generativeai==0.5.0
+pydantic==2.7.1
+bs4==0.0.2
+lxml==5.2.1
+markdownify==0.11.6
+numpy==2.2.6
+pandas==2.2.3
+python-dateutil==2.9.0.post0
+pytz==2025.2
+tzdata==2025.2
+reportlab==4.4.2
+psycopg2-binary==2.9.9
+asyncpg==0.29.0
+python-telegram-bot==21.0
+aiohttp==3.9.5