From 4f9404dcaa49e210544e3b14222409200313ab0c Mon Sep 17 00:00:00 2001
From: Fabio Rehm <fgrehm@gmail.com>
Date: Sat, 28 Feb 2026 12:36:08 -0300
Subject: [PATCH 1/3] feat: add devcontainer support

Adds .devcontainer configuration for local development using Docker containers.
Includes Playwright (chromium) pre-installed with dependencies via custom Dockerfile.
Enables consistent development environment across different machines.

Coding-Agent: Claude Code
Model: claude-haiku-4-5-20251001
---
 .devcontainer/Dockerfile        |  3 +++
 .devcontainer/devcontainer.json | 14 ++++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 .devcontainer/Dockerfile
 create mode 100644 .devcontainer/devcontainer.json

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
new file mode 100644
index 0000000..ff23bb5
--- /dev/null
+++ b/.devcontainer/Dockerfile
@@ -0,0 +1,3 @@
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye
+
+RUN npx playwright install chromium --with-deps
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000..2ea8453
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,14 @@
+{
+  "name": "design-os",
+  "build": {
+    "dockerfile": "Dockerfile"
+  },
+  "postCreateCommand": "npm install",
+  "forwardPorts": [3000],
+  "portsAttributes": {
+    "3000": {
+      "label": "Vite Dev Server",
+      "onAutoForward": "notify"
+    }
+  }
+}

From f8744d868a06b79b3576a0cac460d4838c43e6f1 Mon Sep 17 00:00:00 2001
From: Fabio Rehm <fgrehm@gmail.com>
Date: Sat, 28 Feb 2026 12:37:04 -0300
Subject: [PATCH 2/3] docs: add devcontainer usage guide

---
 .devcontainer/README.md | 51 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 .devcontainer/README.md

diff --git a/.devcontainer/README.md b/.devcontainer/README.md
new file mode 100644
index 0000000..de4e9d7
--- /dev/null
+++ b/.devcontainer/README.md
@@ -0,0 +1,51 @@
+# Development Container
+
+This project includes a development container configuration for consistent development environments across different machines.
+
+## Prerequisites
+
+- Docker
+- A devcontainer-compatible tool (VS Code Dev Containers, GitHub Codespaces, crib, etc.)
+
+## What's Included
+
+- Node.js 20 with TypeScript support
+- Git
+- Playwright (chromium) with browser dependencies pre-installed
+- npm packages from `package.json` auto-installed on container creation
+
+## Getting Started
+
+### VS Code
+
+1. Install the [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension
+2. Open the project folder
+3. Click the remote indicator (bottom left corner)
+4. Select "Reopen in Container"
+
+The container will build and initialize automatically (first build takes ~2-3 minutes).
+
+### Other Tools
+
+Use your devcontainer-compatible tool to open this project. Refer to its documentation for specific instructions.
+
+## Available Commands
+
+Once the container is running:
+
+```bash
+npm run dev       # Start Vite dev server (http://localhost:3000)
+npm run build     # Build for production
+npm run lint      # Run ESLint
+npm run preview   # Preview production build
+```
+
+## Playwright MCP Integration
+
+Playwright (chromium) is pre-installed in the container image. To use it with Claude Code's Playwright MCP integration, run this **inside the container**:
+
+```bash
+claude mcp add playwright -- npx @playwright/mcp@latest --headless
+```
+
+**NOTE**: The `--headless` flag is required inside the container since there is no display server.

From 808c545ad4ff91530e2aee66a60bba4755f421de Mon Sep 17 00:00:00 2001
From: Fabio Rehm <fgrehm@gmail.com>
Date: Sat, 28 Feb 2026 15:19:41 -0300
Subject: [PATCH 3/3] fix: devcontainer runtime issues

- Install Claude Code as node user in Dockerfile
- Set remoteUser to node for correct workspace permissions
- Publish port 3000 via appPort for non-VS Code tools
- Make Vite server host configurable via VITE_HOST env var
- Bind to :: (dual-stack) in container for IPv4+IPv6 support

Coding-Agent: Claude Code
Model: claude-opus-4-6
---
 .devcontainer/Dockerfile        | 3 ++-
 .devcontainer/devcontainer.json | 5 +++++
 vite.config.ts                  | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index ff23bb5..70824fe 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,3 +1,4 @@
 FROM mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye
 
-RUN npx playwright install chromium --with-deps
+RUN npx playwright install --with-deps chromium
+RUN su node -c "curl -fsSL https://claude.ai/install.sh | bash"
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 2ea8453..e43ed5c 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -3,7 +3,12 @@
   "build": {
     "dockerfile": "Dockerfile"
   },
+  "remoteUser": "node",
+  "containerEnv": {
+    "VITE_HOST": "::"
+  },
   "postCreateCommand": "npm install",
+  "appPort": [3000],
   "forwardPorts": [3000],
   "portsAttributes": {
     "3000": {
diff --git a/vite.config.ts b/vite.config.ts
index c16ba22..4c526f1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,5 +13,6 @@ export default defineConfig({
   },
   server: {
     port: 3000,
+    host: process.env.VITE_HOST || 'localhost',
   },
 })