[PoC] Studio Web: run the Agentic UI in a browser (local + SecEx backends)

[lezama]

Related issues

Stacked on top of interface-improvements (the AI-focused Agentic UI). Supersedes #3693 — same idea, now branched from Automattic/studio directly (no fork remote needed) and extended to run against hosted sites via a sandbox. Directional Proof of Concept; no companion issue yet.

How AI was used in this PR

Built by an AI agent (Claude Code) — including this description — then reviewed by me. The agent wrote the web connector, the CLI web-server, the per-session git workspace + publish layer, and the SecEx connector, and verified the end-to-end flow in a real browser.

Proposed Changes

A Proof of Concept that runs Studio's Agentic UI (apps/ui) in a plain web browser as the foundation for Studio Web. apps/ui already talks to the backend only through its Connector interface, so this swaps the connector and adds a small headless backend — without changing the UI itself.

Two backends are wired behind the same UI:

• Local web backend — a CLI web-server (HTTP + SSE) that runs the same Studio Code agent the desktop app does; only the transport differs from Electron IPC. Each session is bound to its own git-backed workspace, and there's a draft → publish flow (working-tree changes become a reviewable commit, pushed to a deploy remote when one is configured).
• SecEx backend — a connector that talks straight from the browser to the hosted studio-code endpoint, so the full agent runs in an isolated cloud sandbox against the user's site. This needs a companion change to that endpoint (CORS on the streamed response, egress, and token handling), tracked internally.

It also previews the generated site client-side via WordPress Playground, so the in-app preview needs no server-side preview proxy.

This is directional, not production-ready. The hosted path's rough edges — preview performance (Playground boot is slow), long-stream robustness (the connection can drop on long turns), durable sessions, and a real shared preview URL — are the natural follow-ups.

Testing Instructions

Local web backend (fully reproducible):

1. npm run cli:build
2. node apps/cli/dist/cli/main.mjs web-server → serves http://localhost:8088
3. cd apps/ui && npm run dev:web → serves http://localhost:5300
4. Open http://localhost:5300, pick a site → New chat → send a prompt; the agent's reply streams in.

Quick backend checks without the UI:

curl -s localhost:8088/health
curl -s localhost:8088/sites | python3 -m json.tool

SecEx backend (needs the hosted endpoint + sandbox infra):

• cd apps/ui && VITE_STUDIO_BACKEND=secex VITE_STUDIO_WPCOM_TOKEN=<wpcom oauth token> npm run dev:web → open http://localhost:5300; the browser talks directly to the hosted studio-code endpoint and the agent runs in the sandbox.

Pre-merge Checklist

• tsc (apps/cli + apps/ui) and ESLint clean on the changed files.
• Architecture/tests/polish review — this is a PoC and expects revisiting before landing.