diff --git a/arc/workflows/vnc-demo/Dockerfile.vnc b/arc/workflows/vnc-demo/Dockerfile.vnc new file mode 100644 index 000000000..596006376 --- /dev/null +++ b/arc/workflows/vnc-demo/Dockerfile.vnc @@ -0,0 +1,27 @@ +FROM node:22-bookworm-slim + +RUN apt-get update && apt-get install -y --no-install-recommends \ + # VNC & desktop + xvfb \ + xfce4 \ + xfce4-terminal \ + x11vnc \ + novnc \ + dbus-x11 \ + # X11 libraries + libx11-6 \ + libxrandr2 \ + libxext6 \ + libxrender1 \ + libxfixes3 \ + libxss1 \ + libxtst6 \ + libxi6 \ + # Utilities + curl \ + git \ + ca-certificates \ + procps \ + && rm -rf /var/lib/apt/lists/* + +WORKDIR /root diff --git a/arc/workflows/vnc-demo/browse-prompt.md b/arc/workflows/vnc-demo/browse-prompt.md new file mode 100644 index 000000000..91e262a8b --- /dev/null +++ b/arc/workflows/vnc-demo/browse-prompt.md @@ -0,0 +1,16 @@ +You have Playwright MCP tools available running in headed mode — a user is watching via VNC. + +1. Call the `browser_install` tool to ensure the browser is installed. +2. Use `browser_navigate` to go to https://news.ycombinator.com +3. Use `browser_snapshot` to capture the page content +4. Use `browser_take_screenshot` to save a screenshot to `/root/output/01-hn-front-page.png` +5. Click on the first story link +6. Wait a moment, then use `browser_take_screenshot` to save to `/root/output/02-first-story.png` +7. Use `browser_navigate_back` to go back +8. Click on the "new" link in the nav bar +9. Use `browser_take_screenshot` to save to `/root/output/03-newest.png` +10. Navigate to https://en.wikipedia.org/wiki/Golden_Gate_Bridge +11. Use `browser_take_screenshot` to save to `/root/output/04-golden-gate.png` +12. Scroll down to see images, then take another screenshot to `/root/output/05-golden-gate-scrolled.png` + +Take your time between actions so the VNC viewer can see what's happening. Write a brief summary of what you found. diff --git a/arc/workflows/vnc-demo/workflow.dot b/arc/workflows/vnc-demo/workflow.dot new file mode 100644 index 000000000..2103c44e5 --- /dev/null +++ b/arc/workflows/vnc-demo/workflow.dot @@ -0,0 +1,16 @@ +digraph VNCDemo { + graph [ + goal="Browse the web with Playwright while user watches via VNC", + model_stylesheet="* { llm_model: claude-sonnet-4-6; llm_provider: anthropic }" + ] + rankdir=LR + + start [shape=Mdiamond, label="Start"] + exit [shape=Msquare, label="Exit"] + + start_vnc [label="Start VNC", shape=parallelogram, script="setsid sh -c 'Xvfb :99 -screen 0 1920x1080x24 &\nsleep 1\nexport DISPLAY=:99\nstartxfce4 &\nsleep 1\nx11vnc -display :99 -forever -nopw -rfbport 5900' /dev/null 2>&1 &\nsleep 3\nmkdir -p /root/output\necho 'VNC ready on display :99'"] + + browse [label="Browse the Web", prompt="@browse-prompt.md"] + + start -> start_vnc -> browse -> exit +} diff --git a/arc/workflows/vnc-demo/workflow.toml b/arc/workflows/vnc-demo/workflow.toml new file mode 100644 index 000000000..b927ab847 --- /dev/null +++ b/arc/workflows/vnc-demo/workflow.toml @@ -0,0 +1,33 @@ +version = 1 +goal = "Browse the web with Playwright while user watches via VNC" +graph = "workflow.dot" + +[llm] +model = "claude-sonnet-4-6" + +[sandbox] +provider = "daytona" + +[sandbox.daytona] +auto_stop_interval = 30 + +[sandbox.daytona.labels] +project = "vnc-demo" + +[sandbox.daytona.snapshot] +name = "vnc-demo-v1" +cpu = 4 +memory = 8 +disk = 10 +dockerfile = { path = "Dockerfile.vnc" } + +[assets] +include = ["output/**"] + +[mcp_servers.playwright] +type = "sandbox" +command = ["npx", "@playwright/mcp@latest", "--port", "3100", "--no-headless", "--browser", "chromium"] +port = 3100 +startup_timeout_secs = 60 +tool_timeout_secs = 120 +env = { DISPLAY = ":99" }