neutral

Phase 20: React UI Build

Status: 📋 Planned
Estimated Duration: 8–12 weeks
Depends on: Phase 14 (API), all feature phases for UI surfaces (Phases 1–10)
Branch: dev

Goal

Replace the current lightweight htmx-based operator console (cmd/ui) with a production-grade, full-featured React application that surfaces every capability the Cruvero runtime has built across Phases 1–10. Add a visual drag-and-drop flow builder for designing agent workflows that persist to a configurable GitHub repository. The UI becomes the primary operator interface—not just a monitoring tool, but a complete control plane.

Design Philosophy

React app with Go backend — The htmx approach worked for the operator console, but a full-featured UI with flow builder, real-time streaming, state inspection, and interactive visualizations requires a proper React frontend. Single Go binary still serves the built React assets.
Go API stays the authority — The React frontend consumes the Go API. No business logic in the frontend.
Every phase's features get a UI surface — If it exists in the CLI, it should exist in the UI.
Security first — OWASP Top 10 mitigations, role-based access, future-proofed for enterprise identity providers.

Sub-Phases

Sub-Phase	Name	Prompts	Depends On
20A	Go Backend: Auth, Flow, and API Layer	5	--
20B	React Foundation: Project, Layout, Auth, API Client	5	20A
20C	Core UI Pages: Runs, Cost, Tools, Memory	5	20B
20D	Advanced Pages: Replay, Traces, Supervisor, Settings	4	20C
20E	Visual Flow Builder + GitHub Persistence UI	5	20B
20F	Security Hardening, Build Pipeline, Testing, Polish	4	20C, 20D, 20E

Total: 28 prompts across 6 sub-phases.

Dependency graph: 20A → 20B → 20C → 20D → 20F and 20B → 20E → 20F

Architecture Decisions

Concern	Decision
Frontend	React 18 (Vite) with TypeScript
Workflow builder	React Flow (`reactflow` library)
Charts	ECharts (`echarts-for-react`)
JSON editing	Monaco Editor
State management	Zustand (client state) + TanStack Query (server state)
Styling	Tailwind CSS, matched to Figma reference in `reference/frontend/` folder
Backend	All APIs in Golang (extend `cmd/ui/main.go` or new `cmd/api` service)
Serving	React is UI-only—no SSR, no Node.js in production. Go embeds built assets from `cmd/ui/dist/`.
Auth	OIDC with role-based access (Keycloak primary, Azure AD future-proofed)
Workflow persistence	Workflows save to GitHub (source of truth), repo configurable per tenant

User Roles & Permissions

Role	Permissions
Viewer	Read-only access to runs, logs, metrics, tool registry, memory
Editor	Execute runs, approve/reject, answer questions, edit state, manage prompts
Admin	Manage tools, registry versions, users, workflows, tenant settings
Super Admin	Tenant management, system config, role assignment, provider config

Auth Architecture

Primary: Keycloak OIDC integration with JWT tokens
Future: Azure AD / Entra ID support (abstract identity provider interface)
Token handling: Secure HTTP-only cookies, refresh token rotation
Role claims: Map OIDC claims/groups to Cruvero roles
Session management: Configurable timeout, forced logout on role change

Scope by Feature Area

1. Dashboard & Run Management (Phase 1–2 features)

Run list with status badges (Running, Completed, Failed, Paused), duration, model, cost, step count
Run filters: status, date range, model, prompt search, cost range
Run detail page:
- Step-by-step timeline with expand/collapse per step
- Per-step: LLM decision, tool call + args, tool result, latency, token count, cost
- Decision record hashes (prompt hash, state hash, tool schema hash, input hash)
- State diff viewer between steps (JSON diff with syntax highlighting)
- Raw prompt viewer (what the LLM actually saw)
Live run streaming via SSE with configurable interval
Start new run from UI: prompt input, model selector, registry version, max steps, advanced config

2. Approval & Human-in-the-Loop (Phase 2 features)

Approval queue page: pending approvals across all running workflows
- Approve/reject with optional reason
- Show tool name, args, agent reasoning for the call
- Approval history with timestamps and actors
Question queue: pending questions from agents
- Answer inline with text input
Live control panel per running workflow:
- Pause / Resume / Step (single-step then pause)
- Edit state (Monaco JSON editor with validation)
- Inject synthetic tool result

3. Replay & Time-Travel (Phase 2 + 6A features)

Replay console:
- Select run → pick step → replay from that point
- Side-by-side comparison: original vs replay decision log
- Decision override editor (inject different decision at step N)
- Counterfactual replay: "what if the agent had done X instead?"
Replay diff viewer: highlight divergence points between original and replay

4. Causal Tracing & Explainability (Phase 6A features)

Trace explorer per run:
- Visual influence graph: which inputs influenced which outputs
- Click any output → see causal chain (user messages, tool results, memory facts)
- Influence confidence scores
"Why did the agent do X?" query interface
- Select an output/decision → see all contributing factors

5. Tool Registry & Management (Phase 1–2 features)

Tool browser: search/filter all tools across registry versions
- Tool schema viewer (JSON Schema rendered as form)
- Read-only flag, retry policy, cost hints
- MCP tool distinction (shows source server)
Tool approval policies: enable/disable tools, cap retry attempts
Tool repair policies: configure repair loop settings per tool
Registry version browser: compare tools across versions, diff tool schemas

6. Memory Explorer (Phase 4 features)

Episodic memory: browse per-run episodes, expandable timeline
Semantic memory: search facts by query, view embeddings (optional 2D projection), see salience scores
Procedural memory: browse/edit stored procedures and playbooks
Memory policy viewer: show active policies (working memory limit, summarization threshold, etc.)

7. Cost Dashboard (Phase 6B features)

Cost overview: total spend by time period, grouped by model/provider/run
Cost breakdown per run: per-step cost with token/tool split
Cost trends chart: ECharts line chart over time, bar chart by model
Cost policy display: show active max cost per run/step, cheap model preferences
Provider comparison: OpenRouter vs Azure cost side-by-side
Model catalog browser: list all models with context limits, pricing, capabilities
Model preferences: view/edit preferred models per namespace

8. Supervisor & Multi-Agent (Phase 5 features)

Supervisor run viewer:
- Visual layout showing supervisor + child agents
- Per-agent status, progress, cost
- Inter-agent message timeline
- Blackboard state viewer (shared state)
Pattern selector: when starting a supervisor run, pick pattern (delegate, broadcast, debate, pipeline, map-reduce, voting, saga)
Saga viewer: step progression with compensation status
- Shows which steps completed, which failed, which compensated
Debate viewer: side-by-side arguments from pro/con agents with critic output

9. Graph DSL Visualizer (Phase 3 features)

Read-only graph renderer: visualize any existing Graph DSL workflow
- Show steps, routes, parallel branches, join points
- Highlight current execution position for running workflows
- Color-code by status (pending, running, completed, failed)
Subgraph expansion: click to drill into composed subgraphs

10. Visual Flow Builder + GitHub Persistence (NEW)

Drag-and-drop workflow editor using React Flow
- Node palette with all DSL primitives:
  - Step (with tool binding)
  - Route (with condition editor)
  - Parallel (with branch configuration)
  - Join (JoinAll, JoinAny, JoinN, JoinVote selector)
  - Subgraph (reference to another flow)
  - Approval Gate (with timeout config)
  - Start / End nodes
- Edge connections with typed ports (data flow, control flow)
- Property panel: per-node configuration sidebar (Monaco for complex JSON)
- Real-time validation overlay (missing joins, cycles, unreachable nodes, invalid conditions)
- Minimap, zoom, pan, auto-layout (dagre/elk)
- Undo/redo support
- Keyboard shortcuts
Bidirectional serialization: visual graph ↔ Graph DSL JSON
GitHub persistence:
- Repo configurable per tenant in tenant settings
- Each workflow saved as a folder: <repo>/<workflow-name>/
  - workflow.json — Graph DSL definition
  - metadata.json — Name, description, version, author, timestamps
  - README.md — Auto-generated documentation
- Direct commit or PR mode (create branch + PR for review)
- Load existing workflows from GitHub for editing
- Commit history viewer per workflow
- Conflict detection on save
- Branch selection for load/save
Preview / dry-run: compile flow → execute with mock tools → show execution trace overlaid on the graph
Deploy: push flow to registry as a new graph version

11. Live Agent Inspection (Phase 6C features)

Inspector panel for running workflows:
- Current state viewer (full JSON tree via Monaco)
- Memory state (working, episodic snapshots)
- Drill into any state path
- Edit state fields inline (gated, sends edit-state signal)
- Step/continue controls with visual step indicator
- Inject synthetic tool result

12. Speculative Execution Viewer (Phase 6C features)

Speculation dashboard: when a run uses speculative execution, show all branches
- Per-branch: model used, cost, output, status
- Winning branch highlighted
- Selection criteria shown (lowest cost / highest similarity)

13. Differential Testing (Phase 6C features)

Diff test launcher: select two models or agent versions, provide test inputs
Results table: side-by-side outputs, cost comparison, latency comparison
Aggregate metrics: accuracy, cost delta, latency delta

14. Agent Versioning (Phase 6C features)

Version registry: list agent versions with semver, changelog, compatibility
Version comparison: diff two versions (schema changes, behavior changes)
Rollback controls: select a version to deploy

15. Ops & Self-Healing (Phase 6C features)

Ops tools panel: read-only query tools (workflow_query, trace_query, registry_get_latest)
Gated write tools: workflow_edit_state, workflow_approve, workflow_replay_override (require confirmation)
Repair log: show tool repair attempts per run

16. MCP Server Status (Phase 2 + 8 features)

MCP server health: list configured MCP servers, connection status, last ping
MCP tool inventory: tools exposed per server
MCP server config viewer: endpoint, env vars (masked)

17. Settings & Configuration

Environment viewer: show current config (non-secret values)
Provider config: active LLM provider, model, timeout
Tenant settings: GitHub repo for workflows, default model, cost limits
Auth status: current auth mode, identity provider config
System health: Temporal connection, Postgres connection, Dragonfly connection

Technical Architecture

Frontend Stack

Layer	Technology
Framework	React 18 with TypeScript
Build	Vite → static bundle in `cmd/ui/dist/`
Routing	React Router v6
Flow builder	React Flow
Charts	ECharts (`echarts-for-react`)
JSON editor	Monaco Editor
Server state	TanStack Query (React Query)
Client state	Zustand
Styling	Tailwind CSS
Streaming	EventSource API for SSE
API client	Typed client, calls Phase 14 API endpoints

Backend (Go)

Extend the existing cmd/ui Go server. If Phase 14 API endpoints are missing for any UI feature, add them in this phase.

API Endpoints (extend/add as needed):

Flows:

GET /api/flows — list flows from GitHub
GET /api/flows/:name — load flow folder (workflow.json + metadata.json)
POST /api/flows — save flow draft (server-side)
POST /api/flows/:name/commit — commit to GitHub
POST /api/flows/:name/validate — server-side validation
POST /api/flows/:name/preview — dry-run execution
POST /api/flows/:name/deploy — register as graph version
GET /api/flows/:name/history — commit history

Memory:

GET /api/memory/episodic?run_id=...&limit=...&types=...
GET /api/memory/semantic?query=...&k=...&namespace=...
GET /api/memory/procedural?name=...

Traces:

GET /api/traces?run_id=...&step=...
GET /api/traces/explain?run_id=...&output_id=...

Inspection:

POST /api/inspect/state — get live state
POST /api/inspect/edit — edit state (gated by role)
POST /api/inspect/inject — inject tool result

Supervisor:

GET /api/supervisor/run?workflow_id=... — supervisor state with agents
GET /api/supervisor/blackboard?workflow_id=...
POST /api/supervisor/signal — send signal to supervisor

Models:

GET /api/models?provider=... — model catalog
GET /api/models/prefs?namespace=... — preferred models
POST /api/models/prefs — update preferences

Agent Versions:

GET /api/agent-versions
GET /api/agent-versions/:version
POST /api/agent-versions — create version

Diff Testing:

POST /api/diff-test — launch diff test
GET /api/diff-test/:id — get results

MCP:

GET /api/mcp/servers — server list + status
GET /api/mcp/tools?server=... — tools per server

Tenant:

GET /api/tenant/settings — tenant configuration
PUT /api/tenant/settings — update tenant settings (Admin+)
GET /api/tenant/users — list users (Admin+)
POST /api/tenant/users/:id/role — assign role (Super Admin)

System:

GET /api/health — Temporal + Postgres + Dragonfly status
GET /api/config — non-secret configuration values

GitHub Persistence

Configurable per tenant via tenant settings UI

Each workflow is a folder in the configured repo:

<repo>/<workflow-name>/
├── workflow.json      # Graph DSL definition
├── metadata.json      # Name, version, author, timestamps
└── README.md          # Auto-generated docs

Optional PR mode: create branch + PR instead of direct commit
Uses go-github library (or mcp-github if available)
Conflict detection: compare SHA before commit, prompt user on conflict

Serving Model

go run ./cmd/ui --addr :8080 serves the built React app from embedded cmd/ui/dist/
Development: cd cmd/ui/frontend && vite dev with proxy to Go API on :8081
Production: single binary, no Node.js required at runtime
Environment variable CRUVERO_UI_MODE=react (default) or htmx for backward compat

OWASP Security Hardening

All OWASP Top 10 mitigations implemented:

Category	Mitigation
Injection	Parameterized queries (Go backend), input validation on all API endpoints
Broken Auth	Secure session management, JWT with short expiry, refresh token rotation
Sensitive Data	HTTPS only, secrets never in responses, secure cookie flags
XXE	JSON-only APIs, no XML parsing
Broken Access Control	Role-based route guards (frontend), role checks on every API endpoint (backend)
Security Misconfiguration	Hardened CSP headers, X-Frame-Options, X-Content-Type-Options
XSS	React's built-in escaping, CSP with strict script-src, no dangerouslySetInnerHTML
Insecure Deserialization	Strict JSON schema validation on all inputs
Vulnerable Components	Automated dependency audit (npm audit, govulncheck), Dependabot/Renovate
Insufficient Logging	Audit log for all mutations, structured logging with correlation IDs

Security Headers (served by Go)

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' wss:;
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()

CSRF Protection

All state-changing requests require CSRF token
Token generated server-side, stored in secure cookie
Validated on every POST/PUT/DELETE

Input Sanitization

All user input validated against JSON schemas
Monaco editor content sanitized before execution
File uploads validated (type, size, content)

Tasks and Subtasks

1. Project Scaffold (1 week)

Vite + React + TypeScript project setup in cmd/ui/frontend/
Tailwind CSS configuration
ESLint + Prettier configuration
Vitest + React Testing Library setup
Go server: embed built React assets, serve SPA with fallback routing

2. Design System (1 week)

Component library from Figma reference in reference/frontend/ folder
Design tokens: colors, spacing, typography, shadows
Core components: Button, Input, Select, Modal, Table, Card, Badge, Tabs
Layout components: Sidebar, TopBar, ContentArea, PageHeader

3. Auth Integration (1 week)

OIDC login flow with Keycloak
JWT token management (secure cookies, refresh rotation)
Role extraction from claims/groups
Route guards (frontend): redirect unauthorized users
API guards (backend): role check middleware
Abstract identity provider interface (future Azure AD support)
Session timeout handling, logout

4. Run Management Pages (2 weeks)

Run list with filters, search, pagination
Run detail with step timeline, state diffs, decision records
Live streaming run view (SSE)
Start new run form with model selector
Approval queue page
Question queue page
Live control panel (pause/resume/step)

5. Cost & Models Pages (1 week)

Cost dashboard with ECharts time-series
Per-run cost breakdown
Model catalog browser
Model preferences editor
Provider comparison view

6. Tool & Registry Pages (1 week)

Tool browser with schema viewer
Registry version comparison
Tool approval policies editor
Tool repair policies editor
MCP server status page

7. Memory Explorer (1 week)

Episodic memory timeline per run
Semantic memory search with salience scores
Procedural memory browser
Memory policy viewer

8. Replay & Trace Pages (1 week)

Replay console with side-by-side diff
Counterfactual replay launcher
Causal trace explorer with influence graph
"Why did the agent do X?" query interface

9. Supervisor & Multi-Agent Pages (1 week)

Supervisor run viewer with agent graph
Inter-agent message timeline
Blackboard state viewer
Saga step viewer with compensation
Debate side-by-side viewer

10. Visual Flow Builder (2–3 weeks)

React Flow integration with custom node types
Node palette with all DSL primitives
Property panel with Monaco for complex config
Edge validation and typed ports
Real-time client-side validation overlay
Auto-layout with dagre/elk
Undo/redo, keyboard shortcuts, minimap
Bidirectional serialization (visual ↔ DSL JSON)

11. GitHub Integration (1 week)

Go backend: GitHub API for list/load/commit/PR
Tenant settings: configure GitHub repo
Flow list page: browse workflows from repo
Load/save/commit workflow from builder
Commit history viewer
PR mode toggle
Conflict detection

12. Preview & Deploy (1 week)

Dry-run execution with mock tools
Execution trace overlay on flow builder graph
Deploy to registry as graph version

13. Inspection & Advanced Pages (1 week)

Live inspection panel with Monaco state editor
Speculative execution viewer
Differential testing launcher + results
Agent version registry page
Ops tools panel
Settings & system health page

14. OWASP Hardening (1 week)

CSP headers implementation
CSRF token flow
Input sanitization audit
Dependency audit setup (npm audit, govulncheck)
Security header verification
Penetration testing checklist

15. Polish & Testing (1 week)

Responsive design for common breakpoints
Loading states, error boundaries, empty states
E2E tests (Playwright)
API endpoint tests
Accessibility (WCAG 2.1 AA): keyboard nav, ARIA, focus management
Documentation

Files to Add/Change

Frontend (new)

Path	Description
`cmd/ui/frontend/`	React project root
`cmd/ui/frontend/src/pages/`	Page components (RunList, RunDetail, CostDashboard, FlowBuilder, etc.)
`cmd/ui/frontend/src/components/`	Shared components (design system)
`cmd/ui/frontend/src/components/flow/`	React Flow workflow builder nodes + edges
`cmd/ui/frontend/src/hooks/`	API hooks, auth hooks, SSE hooks
`cmd/ui/frontend/src/api/`	Typed API client
`cmd/ui/frontend/src/auth/`	OIDC integration, role guards, provider abstraction
`cmd/ui/frontend/src/stores/`	Zustand stores
`cmd/ui/frontend/vite.config.ts`	Vite configuration
`cmd/ui/frontend/tailwind.config.ts`	Tailwind configuration
`cmd/ui/frontend/tsconfig.json`	TypeScript configuration
`cmd/ui/frontend/package.json`	Dependencies
`cmd/ui/frontend/.eslintrc.js`	ESLint configuration
`cmd/ui/frontend/.prettierrc`	Prettier configuration

Backend (extend)

Path	Description
`cmd/ui/main.go`	Serve embedded React dist, security headers, SPA fallback
`cmd/ui/flow_api.go`	Flow CRUD + GitHub handlers
`cmd/ui/memory_api.go`	Memory query handlers
`cmd/ui/trace_api.go`	Trace/explain handlers
`cmd/ui/inspect_api.go`	Live inspection handlers
`cmd/ui/supervisor_api.go`	Supervisor query/signal handlers
`cmd/ui/models_api.go`	Model catalog + prefs handlers
`cmd/ui/versions_api.go`	Agent version handlers
`cmd/ui/difftest_api.go`	Diff test handlers
`cmd/ui/mcp_api.go`	MCP status handlers
`cmd/ui/tenant_api.go`	Tenant settings + user management
`cmd/ui/health_api.go`	System health handler
`cmd/ui/auth_middleware.go`	Role-based access middleware
`cmd/ui/csrf_middleware.go`	CSRF protection middleware
`cmd/ui/security_headers.go`	Security headers middleware

Shared

Path	Description
`internal/flow/types.go`	Flow JSON schema types
`internal/flow/serialize.go`	Visual ↔ DSL conversion
`internal/flow/validate.go`	Graph validation
`internal/flow/github.go`	GitHub persistence
`internal/flow/preview.go`	Dry-run execution
`internal/auth/provider.go`	Abstract identity provider interface
`internal/auth/keycloak.go`	Keycloak implementation
`internal/auth/azuread.go`	Azure AD implementation (stub for future)
`docs/manual/flow-builder.md`	Flow builder documentation
`docs/manual/ui-react.md`	React UI documentation

Environment Variables

Variable	Default	Description
`CRUVERO_UI_MODE`	`react`	`react` or `htmx` (backward compat)
`CRUVERO_UI_STATIC_DIR`	`cmd/ui/dist`	Path to React build output
`CRUVERO_UI_DEV_PROXY`	—	Vite dev server URL for development mode
`CRUVERO_FLOW_GITHUB_REPO`	—	Default GitHub repo for workflow persistence
`CRUVERO_FLOW_GITHUB_BRANCH`	`main`	Default branch for workflow files
`CRUVERO_FLOW_GITHUB_TOKEN`	—	GitHub PAT (falls back to `GITHUB_TOKEN`)
`CRUVERO_FLOW_GITHUB_PR_MODE`	`false`	Create PRs instead of direct commits
`CRUVERO_AUTH_PROVIDER`	`keycloak`	Identity provider (`keycloak`, `azuread`)
`CRUVERO_UI_JWKS_URL`	—	OIDC JWKS endpoint
`CRUVERO_UI_ISSUER`	—	OIDC issuer URL
`CRUVERO_UI_AUDIENCE`	—	OIDC audience/client ID
`CRUVERO_UI_SESSION_TIMEOUT`	`8h`	Session timeout duration

Dev Environment Checks

Exit Criteria

Code Quality Requirements

Go (internal/flow/, internal/auth/, cmd/ui/)

Error handling: never ignore errors with _
Cyclomatic complexity per function under 15
No commented-out code, no TODO without linked issue
Resource cleanup (defer Close, context cancellation)
Early returns, no magic values, no hardcoded secrets
Linting: go vet ./internal/flow/... ./internal/auth/... && staticcheck ./internal/flow/... ./internal/auth/...

TypeScript (cmd/ui/frontend/)

Strict TypeScript ("strict": true in tsconfig)
ESLint with recommended + React hooks rules
No any types (use unknown + type guards)
Components under 50 lines (extract sub-components)
Linting: npx tsc --noEmit && npx eslint src/

Test Coverage

Go packages: >= 80% for internal/flow/ and internal/auth/
React: Vitest component tests for shared components
E2E: Playwright critical path tests

Success Metrics

Metric	Target
Feature parity	All `cmd/ui` htmx features replicated in React
Flow builder	Creates valid Graph DSL definitions, round-trips losslessly
Security	OWASP Top 10 mitigations verified
Accessibility	WCAG 2.1 AA compliance
Test coverage	>= 80% for internal/flow/ and internal/auth/; Vitest + Playwright for frontend

Cross-References

Current htmx UI: cmd/ui/main.go, cmd/ui/ui/*
Figma reference: reference/frontend/ folder in repo
Phase 14 API: cmd/ui/main.go (existing endpoints)
Graph DSL: internal/graph/*
Supervisor: internal/supervisor/*
Memory: internal/memory/*

Notes

This replaces the current htmx static UI entirely. The old cmd/ui/ui/* static files become legacy.
React Flow is the established standard for node-based editors. No need to build from scratch.
The Go binary still serves everything—go:embed the built React dist. No Node.js in production.
GitHub persistence makes flows CI-friendly: you can lint, test, and deploy flows from a CI pipeline.
PR mode is critical for teams: flows go through review before they're live.
The flow builder doesn't replace the Go DSL—it's a visual authoring layer that produces the same JSON the DSL produces.
Every page should have a direct link to the corresponding CLI command in the docs, so power users can switch between UI and CLI seamlessly.
If Phase 14 API is missing endpoints needed by the UI, add them as part of this phase and document the additions.

Goal​

Design Philosophy​

Sub-Phases​

Architecture Decisions​

User Roles & Permissions​

Auth Architecture​

Scope by Feature Area​

1. Dashboard & Run Management (Phase 1–2 features)​

2. Approval & Human-in-the-Loop (Phase 2 features)​

3. Replay & Time-Travel (Phase 2 + 6A features)​

4. Causal Tracing & Explainability (Phase 6A features)​

5. Tool Registry & Management (Phase 1–2 features)​

6. Memory Explorer (Phase 4 features)​

7. Cost Dashboard (Phase 6B features)​

8. Supervisor & Multi-Agent (Phase 5 features)​

9. Graph DSL Visualizer (Phase 3 features)​

10. Visual Flow Builder + GitHub Persistence (NEW)​

11. Live Agent Inspection (Phase 6C features)​

12. Speculative Execution Viewer (Phase 6C features)​

13. Differential Testing (Phase 6C features)​

14. Agent Versioning (Phase 6C features)​

15. Ops & Self-Healing (Phase 6C features)​

16. MCP Server Status (Phase 2 + 8 features)​

17. Settings & Configuration​

Technical Architecture​

Frontend Stack​

Backend (Go)​

GitHub Persistence​

Serving Model​

OWASP Security Hardening​

Security Headers (served by Go)​

CSRF Protection​

Input Sanitization​

Tasks and Subtasks​

1. Project Scaffold (1 week)​

2. Design System (1 week)​

3. Auth Integration (1 week)​

4. Run Management Pages (2 weeks)​

5. Cost & Models Pages (1 week)​

6. Tool & Registry Pages (1 week)​

7. Memory Explorer (1 week)​

8. Replay & Trace Pages (1 week)​

9. Supervisor & Multi-Agent Pages (1 week)​

10. Visual Flow Builder (2–3 weeks)​

11. GitHub Integration (1 week)​

12. Preview & Deploy (1 week)​

13. Inspection & Advanced Pages (1 week)​

14. OWASP Hardening (1 week)​

15. Polish & Testing (1 week)​

Files to Add/Change​

Frontend (new)​

Backend (extend)​

Shared​

Environment Variables​

Dev Environment Checks​

Exit Criteria​

Code Quality Requirements​

Go (internal/flow/, internal/auth/, cmd/ui/)​

TypeScript (cmd/ui/frontend/)​

Test Coverage​

Success Metrics​

Cross-References​

Notes​