Fixed docker build (#40)

## Pull Request Overview

This PR adds Docker configuration and documentation to enable containerized deployment of the DevTools frontend. The changes focus on creating a reproducible build environment that follows the exact setup process outlined in the original README.

- Added multi-stage Dockerfile that properly clones depot_tools, fetches devtools-frontend, and switches to Browser Operator fork
- Updated AI Chat panel README with Docker deployment instructions
- Configured nginx to serve the built frontend on port 8000

Author: olesho

docker/Dockerfile

@@ -1,8 +1,7 @@
 # Multi-stage build for Chrome DevTools Frontend
-# Stage 1: Builder - Use x86-64 for build compatibility
 FROM --platform=linux/amd64 ubuntu:22.04 AS builder
 
-# Install required packages for the build
+# Install required packages
 RUN apt-get update && apt-get install -y \
     curl \
     git \
@@ -11,74 +10,53 @@ RUN apt-get update && apt-get install -y \
     python-is-python3 \
     wget \
     unzip \
-    lsb-release \
     sudo \
     ca-certificates \
-    gnupg \
+    build-essential \
     && rm -rf /var/lib/apt/lists/*
 
-# Install Node.js 18.x (LTS)
+# Install Node.js 18.x
 RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
     apt-get install -y nodejs && \
     rm -rf /var/lib/apt/lists/*
 
-# Set up working directory
 WORKDIR /workspace
 
-# Copy the entire repository
-COPY . .
-
-# Clone depot_tools if not exists and add to PATH
-RUN if [ ! -d "third_party/depot_tools" ]; then \
-        git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git third_party/depot_tools; \
-    fi
-
-# Set PATH to include depot_tools
-ENV PATH="/workspace/third_party/depot_tools:${PATH}"
-
-# Set environment variables to bypass CIPD issues
-ENV VPYTHON_BYPASS="manually managed python not supported by chrome operations"
+# Clone depot_tools
+RUN git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
+ENV PATH="/workspace/depot_tools:${PATH}"
 ENV DEPOT_TOOLS_UPDATE=0
 
-# Download Node.js binary for the expected path (x86-64)
-RUN mkdir -p third_party/node/linux && \
-    cd third_party/node/linux && \
-    wget -q https://nodejs.org/dist/v18.20.0/node-v18.20.0-linux-x64.tar.xz && \
-    tar -xf node-v18.20.0-linux-x64.tar.xz && \
-    mv node-v18.20.0-linux-x64 node-linux-x64 && \
-    rm -rf node-v18.20.0-linux-x64.tar.xz
+# Follow README instructions exactly:
+# fetching code
+RUN mkdir devtools
+WORKDIR /workspace/devtools
+RUN fetch devtools-frontend
 
-# Download correct ninja binary for x86-64
-RUN rm -rf third_party/ninja && \
-    mkdir -p third_party/ninja && \
-    wget -O /tmp/ninja.zip https://github.com/ninja-build/ninja/releases/download/v1.11.1/ninja-linux.zip && \
-    unzip -o /tmp/ninja.zip -d third_party/ninja/ && \
-    chmod +x third_party/ninja/ninja && \
-    rm /tmp/ninja.zip
+# Build steps
+WORKDIR /workspace/devtools/devtools-frontend
 
-# Create a simple python3 wrapper for vpython3
-RUN echo '#!/bin/bash\nexec python3 "$@"' > /usr/local/bin/vpython3 && \
-    chmod +x /usr/local/bin/vpython3
+RUN gclient sync
+RUN /workspace/depot_tools/ensure_bootstrap
 
-# Run npm install and build
-RUN npm install && \
-    npm run build
+# Build standard DevTools first
+RUN npm run build
 
-# Stage 2: Production
-FROM nginx:alpine
+# Add Browser Operator fork and switch to it
+RUN git remote add upstream https://github.com/BrowserOperator/browser-operator-core.git
+RUN git fetch upstream
+RUN git checkout upstream/main
 
-# Copy only the built frontend files from builder stage
-COPY --from=builder /workspace/out/Default/gen/front_end /usr/share/nginx/html
+# Build Browser Operator version
+RUN npm run build
 
-# Copy nginx configuration
-COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+# Production stage
+FROM --platform=linux/amd64 nginx:alpine
 
-# Expose port 8000 to match the original Python server port
-EXPOSE 8000
+# Copy the built DevTools frontend
+COPY --from=builder /workspace/devtools/devtools-frontend/out/Default/gen/front_end /usr/share/nginx/html
 
-# Health check
-HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
-    CMD wget --no-verbose --tries=1 --spider http://localhost:8000/ || exit 1
+# Copy nginx config
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
 
-# Start nginx
-CMD ["nginx", "-g", "daemon off;"]
+EXPOSE 8000

front_end/panels/ai_chat/Readme.md

@@ -2,6 +2,18 @@
 
 This panel is a Multi-Agent Framework that allows a user to connect an existing LLM with the chromium browser.
 
+### Docker
+```sh
+# assuming you are running from the root "browser-operator-core" directory
+docker build -f docker/Dockerfile -t devtools-frontend .
+docker run -d -p 8000:8000 --name devtools-frontend devtools-frontend
+<path-to-devtools-frontend>/third_party/chrome/chrome-<platform>/chrome --disable-infobars --custom-devtools-frontend=http://localhost:8000/
+
+# MacOS Example
+/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=http://localhost:8000/
+```
+
+
 ### Steps to run project
 
 1. Setup the depot_tools to fetch the chromium dev tools using the instructions provided [here](https://www.chromium.org/developers/how-tos/get-the-code/)
@@ -25,7 +37,7 @@ npm run build
 
 3. Update the code to this fork implementation
 ```sh
-git remote add upstream git@github.com:tysonthomas9/browser-operator-devtools-frontend.git
+git remote add upstream https://github.com/BrowserOperator/browser-operator-core.git
 git fetch upstream
 git checkout upstream/main
 ```