From d40c4f77b9d8b35758fea0c2945c772aa9644dbd Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 4 Aug 2026 21:58:57 +0200
Subject: [PATCH] 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 -->
---
 dogfood/coder/main.tf | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/dogfood/coder/main.tf b/dogfood/coder/main.tf
index 887e4d3780..5fe2cc5301 100644
--- a/dogfood/coder/main.tf
+++ b/dogfood/coder/main.tf
@@ -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
+  }
+}