feat(devcontainer): add vnc server for browser testing and ui preview

- Add VNC packages (xvfb, x11vnc, novnc) to Dockerfile
- Create start-vnc.sh script for automated VNC startup
- Add VNC coder_app with browser icon in workspace
- Configure Traefik routing for external domain access
- Add port 6080 forwarding in devcontainer.json

VNC accessible at: {owner}-{workspace}-vnc.dev.simpleaccounts.io/vnc.html

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Developer

.coder/template.tf

@@ -327,6 +327,13 @@ resource "coder_agent" "main" {
       bash .devcontainer/post-start.sh || echo "⚠️  Post-start script had issues"
     fi
 
+    # Start VNC server for browser testing
+    echo "🖥️  Starting VNC server..."
+    if [ -x /usr/local/bin/start-vnc ]; then
+      /usr/local/bin/start-vnc &
+      echo "✅ VNC server started on port 6080"
+    fi
+
     echo "✅ Workspace ready!"
     echo ""
     echo "Quick start commands:"
@@ -336,6 +343,8 @@ resource "coder_agent" "main" {
     echo "Or from app directories:"
     echo "  Frontend: cd apps/frontend && npm start"
     echo "  Backend:  cd apps/backend && ./mvnw spring-boot:run"
+    echo ""
+    echo "VNC Browser: https://${data.coder_workspace_owner.me.name}-${data.coder_workspace.me.name}-vnc.dev.simpleaccounts.io/vnc.html"
   EOT
 
   # Display apps (for web access)
@@ -457,6 +466,24 @@ resource "coder_app" "swagger" {
   share        = "owner"
 }
 
+# VNC Browser for UI testing and preview
+# Always enabled - useful for Playwright tests and visual debugging
+resource "coder_app" "vnc" {
+  agent_id     = coder_agent.main.id
+  slug         = "vnc"
+  display_name = "VNC Browser"
+  icon         = "/icon/desktop.svg"
+  url          = "http://localhost:6080/vnc.html?autoconnect=true"
+  subdomain    = true
+  share        = "owner"
+
+  healthcheck {
+    url       = "http://localhost:6080"
+    interval  = 10
+    threshold = 20
+  }
+}
+
 # Main workspace container
 resource "docker_container" "workspace" {
   # Use pre-built image for fast startup
@@ -629,6 +656,22 @@ resource "docker_container" "workspace" {
     value = "8080"
   }
 
+  # VNC routing (port 6080)
+  labels {
+    label = "traefik.http.routers.${data.coder_workspace_owner.me.name}-${data.coder_workspace.me.name}-vnc.rule"
+    value = "Host(`${data.coder_workspace_owner.me.name}-${data.coder_workspace.me.name}-vnc.dev.simpleaccounts.io`)"
+  }
+
+  labels {
+    label = "traefik.http.routers.${data.coder_workspace_owner.me.name}-${data.coder_workspace.me.name}-vnc.service"
+    value = "${data.coder_workspace_owner.me.name}-${data.coder_workspace.me.name}-vnc"
+  }
+
+  labels {
+    label = "traefik.http.services.${data.coder_workspace_owner.me.name}-${data.coder_workspace.me.name}-vnc.loadbalancer.server.port"
+    value = "6080"
+  }
+
   # Depend on database containers and host directory setup
   depends_on = [
     docker_container.postgres,
@@ -659,6 +702,11 @@ resource "coder_metadata" "workspace_info" {
     value = "https://${data.coder_workspace_owner.me.name}-${data.coder_workspace.me.name}-api.dev.simpleaccounts.io"
   }
 
+  item {
+    key   = "vnc_url"
+    value = "https://${data.coder_workspace_owner.me.name}-${data.coder_workspace.me.name}-vnc.dev.simpleaccounts.io/vnc.html"
+  }
+
   item {
     key   = "postgres_host"
     value = "db:5432"

.devcontainer/Dockerfile

@@ -82,12 +82,22 @@ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
         libevdev2 \
         libnotify4 \
         libflite1 \
+        # VNC packages for browser testing and UI preview
+        xvfb \
+        x11vnc \
+        novnc \
+        websockify \
     && apt-get clean -y && rm -rf /var/lib/apt/lists/*
 
 # Set Playwright to use system Chromium
 ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
 ENV PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/chromium
 
+# VNC configuration
+ENV DISPLAY=:99
+ENV VNC_PORT=5900
+ENV NOVNC_PORT=6080
+
 # Install global npm packages and AI CLI tools
 RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g npm@latest" 2>&1
 
@@ -124,6 +134,10 @@ RUN NVM_BIN=$(su vscode -c "source /usr/local/share/nvm/nvm.sh && echo \$(npm pr
 COPY --chown=vscode:vscode .devcontainer/install-cli-tools.sh /usr/local/bin/install-cli-tools
 RUN chmod +x /usr/local/bin/install-cli-tools
 
+# Copy VNC startup script
+COPY --chown=vscode:vscode .devcontainer/start-vnc.sh /usr/local/bin/start-vnc
+RUN chmod +x /usr/local/bin/start-vnc
+
 # Provide Cursor CLI shim in PATH (resolves actual binary at runtime)
 COPY --chown=vscode:vscode .devcontainer/cursor-cli.sh /usr/local/bin/cursor
 RUN chmod +x /usr/local/bin/cursor && ln -sf /usr/local/bin/cursor /usr/local/bin/cursor-agent

.devcontainer/devcontainer.json

@@ -63,12 +63,13 @@
   },
 
   // Port forwarding
-  "forwardPorts": [3000, 8080, 5432, 6379],
+  "forwardPorts": [3000, 8080, 5432, 6379, 6080],
   "portsAttributes": {
     "3000": { "label": "Frontend (Vite)", "onAutoForward": "notify" },
     "8080": { "label": "Backend (Spring Boot)", "onAutoForward": "notify" },
     "5432": { "label": "PostgreSQL", "onAutoForward": "silent" },
-    "6379": { "label": "Redis", "onAutoForward": "silent" }
+    "6379": { "label": "Redis", "onAutoForward": "silent" },
+    "6080": { "label": "VNC (Browser)", "onAutoForward": "notify" }
   },
 
   // Lifecycle scripts

.devcontainer/start-vnc.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+# VNC Server Startup Script
+# Starts Xvfb, x11vnc, and noVNC for remote browser access
+
+set -e
+
+# Configuration
+DISPLAY_NUM=99
+VNC_PORT=5900
+NOVNC_PORT=6080
+RESOLUTION="1400x900x24"
+
+# Check if already running
+if pgrep -x "Xvfb" > /dev/null; then
+    echo "VNC already running"
+    exit 0
+fi
+
+echo "Starting VNC server..."
+
+# Start Xvfb (Virtual Framebuffer)
+Xvfb :${DISPLAY_NUM} -screen 0 ${RESOLUTION} &
+sleep 2
+
+export DISPLAY=:${DISPLAY_NUM}
+
+# Start x11vnc
+x11vnc -display :${DISPLAY_NUM} -forever -nopw -shared -rfbport ${VNC_PORT} &
+sleep 2
+
+# Start noVNC (web-based VNC client)
+/usr/share/novnc/utils/novnc_proxy --vnc localhost:${VNC_PORT} --listen ${NOVNC_PORT} &
+sleep 1
+
+echo "VNC server started!"
+echo "  - Display: :${DISPLAY_NUM}"
+echo "  - VNC Port: ${VNC_PORT}"
+echo "  - noVNC Port: ${NOVNC_PORT}"