feat(web): Archon Studio visual workflow builder (PR-2)

packages/docs-web/src/content/docs/adapters/web.md

@@ -177,6 +177,12 @@ The Workflow Builder at `/legacy/workflows/builder` provides a visual editor for
 
 You can also browse existing workflows on the `/legacy/workflows` page and open any of them in the builder to edit.
 
+### Archon Studio builder (beta)
+
+A rebuilt visual builder is available in the new console at `/console/builder` (reachable from the console sidebar). It is a controlled React Flow canvas with a node palette, per-node inspector, live YAML preview, inline validation panel, smart-guide snapping, marquee selection, and a right-click context menu (add node, cut/copy/duplicate/delete, paste, select all, auto-arrange, fit view). All seven node types (`prompt`, `command`, `bash`, `script`, `loop`, `approval`, `cancel`) are editable directly in the inspector.
+
+This builder is **beta and fixture-backed**: it loads a local example workflow and reports edits in-memory — load/save to `.archon/workflows/` and a live `/console/builder/:name` route land in a later milestone. For saving workflows today, use the `/legacy/workflows/builder` editor above.
+
 ## SSE Streaming
 
 The Web UI uses Server-Sent Events (SSE) for real-time communication with the backend. When you open a conversation, the frontend opens a persistent connection to `/api/stream/:conversationId`.

packages/web/package.json

@@ -24,14 +24,6 @@
     "escape-string-regexp": "^5.0.0",
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.563.0",
-    "radix-ui": "^1.4.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-markdown": "^9.0.0",
-    "react-resizable-panels": "^4",
-    "react-router": "^7.0.0",
-    "rehype-highlight": "^7.0.0",
-    "remark-breaks": "^4.0.0",
     "mdast-util-find-and-replace": "^3.0.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-gfm": "^3.0.0",
@@ -42,6 +34,14 @@
     "mdast-util-gfm-task-list-item": "^2.0.0",
     "mdast-util-newline-to-break": "^2.0.0",
     "mdast-util-to-markdown": "^2.0.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.0",
+    "react-resizable-panels": "^4",
+    "react-router": "^7.0.0",
+    "rehype-highlight": "^7.0.0",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "4",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",

packages/web/src/experiments/README.md

@@ -12,4 +12,4 @@ Rules:
 Current experiments:
 
 - `console/` — greenfield rebuild of the web UI around the 4-primitive mental model (Project, Run, Workflow, Worktree). Mounted at `/console`.
-- `console/builder/` — Archon Studio workflow-builder data layer (types, variant registry, round-trip model, validation). PR-1 of the builder chain; no route mount yet — canvas (PR-2) and persistence (PR-3) follow.
+- `console/builder/` — Archon Studio visual workflow builder: the PR-1 data layer (types, variant registry, round-trip model, validation) plus the PR-2 canvas — a controlled React Flow surface with node palette, inspector, validation panel, YAML preview, and context menu. Mounted (beta) at `/console/builder` with a sidebar entry; still fixture-backed (takes a workflow prop, reports edits via `onChange`). Persistence — load/save and the live `:name` route — follows in PR-3.

packages/web/src/experiments/console/ConsoleApp.tsx

@@ -4,6 +4,7 @@ import { ProjectRail } from './components/ProjectRail';
 import { AddProjectDialog } from './components/AddProjectDialog';
 import { ProjectPalette } from './components/ProjectPalette';
 import { KeymapHelp } from './components/KeymapHelp';
+import { BuilderRoute } from './builder/BuilderRoute';
 import { RunsPage } from './routes/RunsPage';
 import { RunDetailPage } from './routes/RunDetailPage';
 import { ChatPage } from './routes/ChatPage';
@@ -73,6 +74,7 @@ export function ConsoleApp(): ReactElement {
           <Routes>
             <Route index element={<RunsPage />} />
             <Route path="settings" element={<SettingsPage />} />
+            <Route path="builder" element={<BuilderRoute />} />
             <Route path="_preview" element={<PreviewPage />} />
             <Route path="p/:projectId" element={<RunsPage />} />
             <Route path="p/:projectId/chat" element={<ChatPage />} />