Skip to main content

Source: docs/manual/ui-react.md

This page is generated by site/scripts/sync-manual-docs.mjs.

React Web UI

The React UI is Cruvero's primary operator console. It is a React 18 + TypeScript SPA served by cmd/ui.

Source: cmd/ui/frontend/*, route wiring in cmd/ui/frontend/src/App.tsx

Architecture​

  • Framework: React 18 + TypeScript (strict mode)
  • Build: Vite, output embedded at cmd/ui/dist
  • Routing: React Router v6
  • Server state: TanStack Query
  • Client state: Zustand
  • Styling: Tailwind CSS

Development​

Start backend:

go run ./cmd/ui --addr :8081

Start frontend dev server:

cd cmd/ui/frontend
npm run dev

Open http://localhost:5173.

Current Route Map​

Route-level guards are implemented through ProtectedRoute in App.tsx.

Auth and shell​

  • Public: /login, /callback
  • Protected shell root: /
  • Catch-all: * (Not Found)

Operations​

  • / dashboard
  • /operations
  • /runs
  • /runs/:id
  • /runs/:id/replay
  • /replay
  • /traces
  • /events
  • /control
  • /approvals (editor)
  • /questions (editor)

Runtime and build surfaces​

  • /tools
  • /prompts
  • /knowledge-bases
  • /memory, /memory/episodic, /memory/semantic, /memory/procedural, /memory/policies
  • /cost, /cost-overview, /cost-models
  • /flows
  • /flows/builder, /flows/builder/:id (editor)
  • /flows/builder-v2, /flows/builder-v2/:id (editor)
  • /inspect
  • /speculation
  • /diff-test

Governance, tenant, and admin​

  • /audit, /security, /immune, /quota, /pii
  • /tenant, /tenant/users
  • /health
  • /models
  • /settings/model-prefs
  • /agents (admin)
  • /mcp (admin)
  • /settings (admin)
  • /settings/tools (admin)

Legacy aliases (redirects)​

  • /registry and /tools/registry -> /tools
  • /composites -> /tools
  • /supervisor -> /runs
  • /supervisor/:id -> /runs/:id
  • /agent-versions -> /agents
  • /mcp/gateways -> /mcp

Flagship UX Workflows​

New Run modal​

NewRunModal.tsx supports:

  • Single-agent and multi-agent tabs.
  • Launch presets (feature-team, feature-team + primary KB, quick single agent).
  • Template load/save against /api/run-templates.
  • Per-agent prompt-version overrides (guided tabs + raw JSON fallback).
  • Pre-run validation (/api/supervisor/preflight-preview).
  • Swarm simulation preview with timeline/risk heatmap (/api/supervisor/preview-run).

See Run Orchestration.

Knowledge Bases​

KnowledgeBasesPage + CreateKnowledgeBaseModal support create/update/delete, upload, embed, and prompt-registry binding.

See Knowledge Bases.

Agents control plane​

AgentsPage includes New Agent, status column, capability/trust views, and MCP live/unbound badges.

See Agent Control Plane.

Runtime APIs Used by the React UI​

  • Core /api/* runtime endpoints from main.go.
  • Role-scoped runtime endpoints from runtime_routes.go.
  • Supervisor preview endpoints: /api/supervisor/preflight-preview, /api/supervisor/preview-run, /api/supervisor/feature-ripple.
  • Knowledge Base endpoints: /api/knowledge-bases*.
  • Run template endpoints: /api/run-templates*.