mirror of
https://github.com/coder/coder.git
synced 2026-09-21 20:51:01 +08:00
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:
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user