Open-Studio

Inspiration The inspiration for Open-Studio came from the desire to create a lightweight, autonomous coding environment that combines the best features of AI-assisted development tools with full transparency and local control. The goal was to build a system where users could give natural language missions, have those missions executed by OpenCode with full visibility, and watch the process in real-time through a visible Chromium instance. The addition of a generated Kanban/Pomodoro application demonstrated that the system could not only write code but produce a complete, functional product.

What it does Open-Studio is a Dockerized development environment that:

Receives natural language missions and delegates programming to OpenCode Provides real-time activity streaming through Server-Sent Events Maintains a visible Chromium instance for process verification via noVNC Executes tests, builds production bundles, and performs visual verification with Playwright/CDP Generates complete applications (like a Kanban/Pomodoro tool) within the workspace Offers a three-panel UI with mission control, workspace, and runtime The generated application includes task management with drag-and-drop Kanban board (backlog, in progress, review, done columns), a Pomodoro timer with audio synthesis, localStorage persistence, and full accessibility features.

How we built it The project was constructed in several phases:

Base Docker Images: Created sandbox-browser (Debian Bookworm Slim with Chromium, Xvfb, Fluxbox, x11vnc, noVNC, websockify, socat) and sandbox-workspace (Node.js 22 with OpenCode 1.18.34, Git, Python, npm) Orchestrator Development: Built a Node.js/Express server with React 18/Vite 5 frontend handling mission submission, SSE event streaming, and Docker container coordination OpenCode Integration: Configured OpenCode to run missions via opencode run --format json --auto --dir /workspace --model , capturing all tool usage, file changes, terminal output, and token consumption Application Generation: Enabled OpenCode to generate the Kanban/Pomodoro application within the workspace, including all functional modules (Kanban board with drag-and-drop, Pomodoro timer with audio synthesis using Web Audio API, localStorage persistence with versioned keys) Verification Pipeline: Added automated unit tests (155 tests across 9 files), production builds, and Playwright/CDP visual verification as the final step after OpenCode completes Challenges we ran into Several significant challenges emerged during development:

Intermittent timing issues: The Pomodoro timer tests proved sensitive to exact second boundaries, passing in isolation but failing in complete runs. This taught us to build tolerance into time-based assertions and verify behavior manually in Chromium. State management: Maintaining mission history in memory meant resetting the orchestrator would lose visible mission history—a documented limitation since the state is not persisted across restarts. Security boundaries: Restricting all file operations to the /workspace directory required careful path validation to prevent escape attempts, with strict rejection of routes attempting to leave the workspace. Single-mission constraint: Only one concurrent mission is allowed, which limits multi-user scenarios but keeps the architecture simpler and more secure. Cloudflare deployment: The final step of deploying to Cloudflare Pages remained pending due to authentication requirements, representing the classic "last 10%" of hackathon projects with the planned name open-studio-demo. Intermittent assertions: A Pomodoro test expecting counter change within exactly one second passed in isolation but failed in two out of four complete runs, though the application behavior was verified correct (descending from 25:00 to 24:57). Accomplishments that we're proud of Fully functional local environment: Open-Studio operates as an autonomous local system that receives missions, executes OpenCode, transmits changes and commands, validates with automated tests, builds the project, and opens it in a visible browser Complete application generation: The Kanban/Pomodoro application is not a template but genuinely generated by OpenCode within the workspace, including all specified features Quality assurance: 155 approved tests, 0 lint errors, TypeScript approval, successful Vite build, and application rendered correctly in Chromium visible Real-time transparency: Full event streaming via SSE allows users to observe every step of the mission execution, from OpenCode tool usage to file changes and terminal output Visual verification: Playwright/CDP automated checks confirm UI correctness, including exact badge visibility, Kanban drag-and-drop, Pomodoro timer behavior, and search/filter functionality Production-ready build: The workspace/dist directory contains a complete, deployable build ready for Cloudflare Pages or other hosting What we learned Dockerized agent environments require careful orchestration of base images, dependency management, and container communication patterns Real-time event streaming (SSE) provides essential feedback during long-running operations, but requires handling connection drops and reconnection gracefully Visual verification with Playwright/CDP catches UI regressions that unit tests miss, but requires building tolerance for non-deterministic timing State limitations in memory-only systems mean mission history resets on orchestrator restart—a trade-off between simplicity and continuity Security boundaries must be enforced at multiple levels: path validation, tool permission restrictions, and credential handling via environment variables only The last 10% of a hackathon project (deployment, authentication, edge-case testing) often takes disproportionate time but represents the most important polish for production readiness What's next for Open-Studio Cloudflare Pages deployment: Authenticate and deploy the open-studio-demo project to make the environment publicly accessible Persistent mission state: Implement database storage (PostgreSQL/Firestore) to survive orchestrator restarts and support multiple concurrent users User authentication: Add auth system (OAuth/Clerk/Supabase) to enable multi-user workspaces and project sharing Backend synchronization: Replace browser-only localStorage Kanban persistence with real backend sync for cross-device access Multi-mission support: Lift the single-concurrent-mission constraint with a queue system and per-user workspaces Expanded application templates: Generate additional application types beyond Kanban/Pomodoro (calendars, dashboards, data tools) based on mission descriptions Enhanced AI model options: Integrate more model providers (Groq, Anthropic, etc.) beyond the current Groq/Gemini/OpenCode defaults ** improved accessibility**: Full WCAG compliance audit and screen reader optimization for all generated applications CLI integration:Expose more OpenCode capabilities through command-line interface for power users and CI/CD pipelines

Built With

• dnd-kit
• docker
• express.js
• monaco-editor
• node.js
• opencode-1.18.34
• playwright-core
• react-18
• tailwind-css-4
• testing-library
• vite-5
• vitest