feat(dogfood/coder): add agent-browser live preview app (#27838)

Gives dogfood workspaces a live view of what the coding agent's browser
is doing, using the
[agent-browser](https://github.com/vercel-labs/agent-browser) dashboard
embedded as a regular workspace app. This is the dogfood-only POC phase
to validate the approach; no product code changes.

- `install-deps` installs a pinned agent-browser, seeds the
version-matched skill into `~/.claude/skills` and `~/.agents/skills`,
and starts the dashboard (self-daemonizing, idempotent) on
`127.0.0.1:4848`.
- New `agent-browser` coder_app embeds the dashboard: it auto-appears as
a tab on the Tasks page and can be added as a workspace_app tab in the
Agents right panel.

Notes for review:

- The version is pinned to 0.33.2. I verified that release's dashboard
sends no `X-Frame-Options`/CSP headers (embeddability is not a
documented upstream contract, so it must be re-verified on bumps).
- The slug is deliberately not `preview`; Tasks special-cases that slug
for the app-under-development toolbar (`WorkspaceAppFrame.tsx`).
- The dashboard itself is unauthenticated, so exposure is controlled
entirely by the app share level (`owner`).
- Example-template and docs changes were dropped from this PR on
purpose; they can follow once the approach is validated on dogfood.

Validation: `terraform fmt`/`validate` on the template and a local
frameability check of the pinned dashboard release.

> Mux worked on this on Mike's behalf.

<!-- mux-attribution: model=claude-sonnet-4-x thinking=high -->
This commit is contained in:
Michael Suchacz
2026-08-04 21:58:57 +02:00
committed by GitHub
parent 1c993c7c5c
commit d40c4f77b9
+36
View File
@@ -683,6 +683,22 @@ resource "coder_script" "install-deps" {
# (site tests + the claude-code/codex MCP servers below).
cd "${local.repo_dir}/site" && pnpm exec playwright install chromium
npx --yes --package=@playwright/mcp@0.0.75 playwright-core install --no-shell chromium
# Keep this version pinned because the dashboard is embeddable only while
# it omits X-Frame-Options and CSP headers. This is not a documented
# contract, so verify those headers before updating.
npm install -g agent-browser@0.33.2
agent-browser install
# Keep the agent skill aligned with the installed CLI version.
skill_src="$(npm root -g)/agent-browser/skills/agent-browser"
for skill_dir in "$HOME/.claude/skills" "$HOME/.agents/skills"; do
mkdir -p "$skill_dir"
rm -rf "$skill_dir/agent-browser"
cp -r "$skill_src" "$skill_dir/agent-browser"
done
agent-browser dashboard start
EOT
}
@@ -1012,3 +1028,23 @@ resource "coder_app" "codex" {
exec tmux new-session -A -s codex codex
EOT
}
# Live view of agent browser sessions, served by the dashboard that
# install-deps starts. The dashboard has no authentication, so restrict
# it to the workspace owner. "preview" is reserved for apps that need
# the iframe navigation toolbar.
resource "coder_app" "agent_browser" {
agent_id = coder_agent.dev.id
slug = "agent-browser"
display_name = "Agent Browser"
icon = "${data.coder_workspace.me.access_url}/emojis/1f310.png" // 🌐
url = "http://localhost:4848"
share = "owner"
subdomain = true
open_in = "tab"
healthcheck {
url = "http://localhost:4848/"
interval = 5
threshold = 6
}
}