adding a branch with working docker-compose setup with networking and comprehensive logging in front end chat lifecycles

[itsallaboutthecheddar]

Changelog - Docker Compose Setup and Configuration

Docker Compose Infrastructure Implementation

Overview

Comprehensive Docker Compose setup for Magentic-UI project with browser automation and Python environment services.

Services Architecture

• magentic-ui-python: Python 3.12 environment with ML/data science dependencies
• magentic-ui-browser: Playwright browser automation with VNC access

Commit Messages and File Changes

Core Docker Configuration

feat: Add Docker Compose configuration for multi-service setup

• docker-compose.yml: Multi-service orchestration with Python and browser containers
• Port mappings: 37367 (Playwright), 6080 (VNC), 8081 (Frontend), 8000 (Backend)
• Environment variables: PLAYWRIGHT_PORT, NO_VNC_PORT, PLAYWRIGHT_WS_PATH
• Health checks and service dependencies

feat: Add automated Docker setup script

• docker-setup.sh: Automated container management and setup
• Network creation, image building, container lifecycle management
• OPENAI_API_KEY validation and environment setup
• Development mode installation with error handling

Browser Docker Container

feat: Implement Playwright browser container with VNC support

• src/magentic_ui/docker/magentic-ui-browser-docker/Dockerfile: Multi-stage browser container
• Base: mcr.microsoft.com/playwright:v1.51.1-jammy
• Dependencies: xvfb, x11vnc, supervisor, novnc, openbox
• Ports: 6080 (VNC), 37367 (Playwright WebSocket)

feat: Add X11 display configuration and window management

• src/magentic_ui/docker/magentic-ui-browser-docker/x11-setup.sh: X11 display setup
• Fixed 1440x1440 resolution, DPI 96, black background
• Screen saver and power management disabled
• src/magentic_ui/docker/magentic-ui-browser-docker/openbox-rc.xml: Window manager config
• Fullscreen applications, no decorations, consistent positioning

feat: Configure Playwright server with optimized browser settings

• src/magentic_ui/docker/magentic-ui-browser-docker/playwright-server.js: Playwright WebSocket server
• Chromium with kiosk mode, fullscreen, fixed window size
• WebSocket path and port configuration from environment
• src/magentic_ui/docker/magentic-ui-browser-docker/package.json: Playwright 1.51.1 dependency

feat: Add supervisord process management

• src/magentic_ui/docker/magentic-ui-browser-docker/supervisord.conf: Multi-process supervision
• Xvfb virtual display on :99
• x11vnc VNC server on port 5900
• novnc_proxy web VNC client on port 6080
• Playwright server with environment variables

feat: Add container entrypoint and startup scripts

• src/magentic_ui/docker/magentic-ui-browser-docker/entrypoint.sh: Container initialization
• src/magentic_ui/docker/magentic-ui-browser-docker/start.sh: Supervisord startup

Python Environment Container

feat: Create Python 3.12 environment with ML dependencies

• src/magentic_ui/docker/magentic-ui-python-env/Dockerfile: Python environment setup
• Base: python:3.12-slim
• Build dependencies: ffmpeg, exiftool, build-essential, git
• Virtual environment with optimized pip installation

feat: Add Python package requirements

• src/magentic_ui/docker/magentic-ui-python-env/requirements.txt: Core dependencies
• Data science: pandas, scikit-learn, matplotlib
• Web: requests, beautifulsoup4
• Document processing: pillow, markitdown

feat: Configure Python container entrypoint

• src/magentic_ui/docker/magentic-ui-python-env/entrypoint.sh: Development setup
• Workspace detection and magentic-ui installation
• Pip cache management and verbose error handling

Port Configuration

• 37367: Playwright WebSocket server
• 6080: VNC web client (noVNC)
• 5900: VNC server (internal)
• 8081: Frontend development server
• 8000: Backend API server
• 99: X11 display (internal)

Environment Variables

• PLAYWRIGHT_PORT=37367: Playwright WebSocket port
• NO_VNC_PORT=6080: VNC web client port
• PLAYWRIGHT_WS_PATH=default: WebSocket path
• DISPLAY=:99: X11 display for browser
• OPENAI_API_KEY: Required for AI functionality

Service Flow

1. magentic-ui-python starts first (dependency)
2. magentic-ui-browser starts after Python service is healthy
3. X11 display and window manager initialize
4. VNC server starts for remote access
5. Playwright server launches with optimized browser
6. Health checks ensure service availability

Verification Steps

• Container health checks on port 37367
• VNC access via http://localhost:6080
• Playwright WebSocket at ws://localhost:37367
• Service logs via docker-compose logs

Files Modified/Created

Docker Compose & Setup

• docker-compose.yml - Multi-service orchestration
• docker-setup.sh - Automated setup script

Browser Container (8 files)

• src/magentic_ui/docker/magentic-ui-browser-docker/Dockerfile
• src/magentic_ui/docker/magentic-ui-browser-docker/supervisord.conf
• src/magentic_ui/docker/magentic-ui-browser-docker/playwright-server.js
• src/magentic_ui/docker/magentic-ui-browser-docker/package.json
• src/magentic_ui/docker/magentic-ui-browser-docker/start.sh
• src/magentic_ui/docker/magentic-ui-browser-docker/entrypoint.sh
• src/magentic_ui/docker/magentic-ui-browser-docker/x11-setup.sh
• src/magentic_ui/docker/magentic-ui-browser-docker/openbox-rc.xml

Python Container (3 files)

• src/magentic_ui/docker/magentic-ui-python-env/Dockerfile
• src/magentic_ui/docker/magentic-ui-python-env/requirements.txt
• src/magentic_ui/docker/magentic-ui-python-env/entrypoint.sh

Status

✅ Complete: All Docker configuration files verified and production-ready
✅ Tested: Port mappings, environment variables, and service dependencies confirmed
✅ Documented: Comprehensive setup with troubleshooting guidance

Next Steps

• Run ./docker-setup.sh to initialize the environment
• Access VNC at http://localhost:6080 for browser visualization
• Use docker-compose logs for monitoring and debugging

[itsallaboutthecheddar]

@microsoft-github-policy-service agree