Skip to main content

Source: docs/manual/figma-reference-ui-prompt.md

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

Figma Reference UI Prompt

Use this master prompt with Figma's LLM to generate a React reference site that covers Cruvero's full feature surface (completed phases plus planned full UI control-plane scope).

Copy and paste everything in the block below:

Build a complete React + TypeScript reference control-plane UI for "Cruvero", a Temporal-native agent runtime for durable, auditable, multi-tenant, tool-enabled AI workflows.

This is a reference app for future implementation and agent guidance. It does not need pixel-perfect production polish, but it must cover the full product surface with realistic pages, navigation, states, and mock data.

Primary objective:
- Generate a full site map and page set that exposes all major capabilities available in Cruvero.
- Use mock-first data and frontend service adapters with clear API-contract hints for later backend wiring.

Tech constraints:
- React 18 + TypeScript.
- Componentized architecture with reusable primitives.
- Responsive layout (desktop first, then tablet/mobile adaptation).
- Include loading, empty, success, warning, and error states.
- Keep all business logic in mock services; UI should be API-ready.

Visual direction:
- A decisive "operator control room" aesthetic, not a generic template.
- Palette: graphite neutrals with electric cyan + amber accents; avoid purple-heavy defaults.
- Typography: "Space Grotesk" for headings, "Source Sans 3" for body, "IBM Plex Mono" for technical metadata.
- Dense but readable data views, strong hierarchy, clear status colors.
- Add subtle motion for panel transitions and live update indicators.

App IA and route map:
- /dashboard
- /runs
- /runs/:workflowId
- /runs/:workflowId/live
- /runs/:workflowId/replay
- /approvals
- /questions
- /inspect/:workflowId
- /traces/:runId
- /traces/:runId/provenance
- /tools
- /tools/registry
- /tools/policies/approval
- /tools/policies/repair
- /tools/composites
- /memory/episodic
- /memory/semantic
- /memory/procedural
- /memory/policies
- /cost
- /cost/models
- /cost/preferences
- /quota
- /tenants
- /supervisor
- /supervisor/:workflowId
- /graph/viewer
- /flows
- /flows/builder
- /flows/builder/:name
- /flows/history/:name
- /difftest
- /speculation/:workflowId
- /agent-versions
- /prompt-library
- /prompt-library/:id
- /prompt-library/feedback
- /pii
- /pii/challenges
- /audit
- /audit/verify
- /security
- /immune
- /mcp
- /events
- /ops
- /settings
- /health

Global shell requirements:
- Left sidebar grouped by domain: Runs, Orchestration, Tools, Knowledge, Governance, Security, Operations, Settings.
- Top bar with tenant switcher, environment badge, connection status (NATS/SSE/Temporal), quick actions, user menu.
- Global command palette and quick-jump search.
- Breadcrumbs + page-level action bar.

Core domains and what each must include:

1) Runs and live operations
- Run list with filters: status, tenant, date range, model/provider, prompt text, cost range.
- Run detail with step timeline:
  - decision, tool call args, tool result, latency, token usage, per-step cost
  - decision hashes (prompt/state/tool-schema/input hash)
  - raw prompt viewer
  - state snapshot and JSON diff between steps
- Live stream panel with event feed and connection fallback state.
- Start run form: prompt, model, registry version, max steps, advanced options.
- Control actions: pause, resume, single-step, edit state, inject synthetic tool result.

2) Human-in-the-loop
- Approval queue: approve/reject, reason capture, actor/timestamp history.
- Question queue: answer inline and see conversation context.
- Include clear pending counts and SLA-like aging indicators.

3) Replay, counterfactual, and explainability
- Replay launcher from step N.
- Decision override editor and side-by-side original vs replay diff.
- Causal trace explorer with influence graph.
- "Why did agent do this?" panel that traces contributing facts/messages/tool results.
- Provenance DAG view for decisions, tool calls, tool results, memory facts.

4) Tools and registry
- Tool browser with schema viewer (render JSON Schema as readable form).
- Registry version comparison and schema diff.
- Approval policy editor and repair policy editor.
- Composite tool builder/inspector with step contracts and validation.
- MCP tool provenance labels (server/tool source).

5) Memory
- Episodic timeline per run.
- Semantic search with salience score indicators and filters.
- Procedural memory catalog and playbook view.
- Memory policy page (working memory limits, summarization thresholds, context budget behavior).

6) Cost, models, and optimization
- Cost overview with trend charts and grouped breakdowns by model/provider/run.
- Per-run and per-step cost drilldown.
- Model catalog page: context limits, pricing, capabilities, provider.
- Model preference editor per namespace/tenant.
- Provider comparison view.

7) Multi-agent and orchestration
- Supervisor run view with parent + child agent graph.
- Per-agent status, progress, cost, and message timeline.
- Blackboard shared state viewer.
- Pattern selector surfaces: delegate, broadcast, debate, pipeline, map-reduce, voting, saga.
- Saga progress with compensation states.
- Debate viewer side-by-side (pro/con/critic).

8) Graph workflows and visual builder
- Read-only graph DSL viewer (routes, parallels, joins, subgraphs, execution position).
- Flow builder with drag/drop nodes:
  - Start, End, Step, Route, Parallel, Join (All/Any/N/Vote), Subgraph, Approval Gate
- Typed connection ports, minimap, zoom/pan, undo/redo.
- Validation overlay: cycles, unreachable nodes, missing joins, invalid conditions.
- Bidirectional visual graph <-> DSL JSON panel.
- Preview/dry-run with trace overlay.
- Deploy action to publish as graph version.

9) Governance: tenants, quota, audit
- Tenant list/detail and isolation indicators.
- Quota dashboard (minute/hour/day windows, remaining request/token/cost, alerts at warning/critical).
- Quota override/reset controls with expiry and audit confirmation.
- Audit explorer with filter/search and run-linked drilldown.
- Hash-chain verification page with integrity result and failure diagnostics.
- Compliance export UI stubs (SOC2/HIPAA).

10) Security, immune, and PII
- Security alerts dashboard (injection detected, output filter blocks, network policy denies).
- Immune system page:
  - anomaly signatures
  - quarantined tools
  - release action with reason/actor
  - vaccination history card
- PII guard page:
  - policy by boundary (audit/output/tool_io/memory/events)
  - mode (detect/redact/block/tokenize/challenge)
  - class toggles and confidence threshold
  - risk score and risk level summaries
- PII challenge queue page:
  - hold lifecycle, reviewer view, approve/deny workflow.

11) Prompt library
- Prompt search page with semantic search and ranking component breakdown:
  - similarity, quality, recency, usage
- Prompt detail page with immutable version/hash metadata.
- Template parameter form preview.
- Usage/feedback metrics page and feedback capture form.

12) Event bus and operations
- Event stream monitor (subjects, throughput, lag, errors).
- Tenant event-isolation visibility.
- NATS/JetStream health and consumer lag cards.
- Ops panel with read-only and gated-write tools.
- Worker/admin operations stubs: backup, restore, migration status, workers, fixtures validation.

13) Advanced experimentation
- Differential test launcher and results table (output/cost/latency deltas).
- Speculative execution viewer with branch comparison and winner rationale.
- Agent versions registry with compare and rollback actions.
- Playground/simulation mode surface (dry-run, scenario, chaos).

14) Settings and health
- Non-secret config viewer (provider, auth mode, runtime flags).
- Auth status panel (none/keycloak).
- System health matrix: Temporal, Postgres, Dragonfly, NATS, vector store, MCP.
- Incident links and runbook shortcuts.

Shared component requirements:
- StatusBadge, CostBadge, TenantBadge, RiskBadge, ConnectionBadge.
- DataTable with sorting/filtering/pagination.
- Timeline + StepCard.
- JsonViewer + JsonDiffViewer.
- SchemaViewer for tools.
- GraphCanvas shell component.
- ConfirmDialog for all gated actions.
- AuditTrailDrawer for entity-level event history.
- Toast/alert center for async outcomes.

Data modeling requirements:
- Define frontend interfaces for:
  - RunSummary, RunStep, DecisionRecordHashSet
  - ApprovalItem, QuestionItem
  - TraceNode, ProvenanceNode, ProvenanceEdge
  - ToolDef, RegistryVersion, CompositeToolDef
  - MemoryEpisode, MemoryFact, MemoryProcedure, MemoryPolicy
  - CostPoint, CostBreakdown, ModelInfo, ModelPreference
  - TenantSummary, QuotaStatus, QuotaOverride
  - SupervisorRun, AgentNode, BlackboardSnapshot
  - FlowDefinition, FlowNode, FlowEdge, FlowValidationIssue
  - DiffTestResult, SpeculationBranch, AgentVersion
  - PromptDef, PromptMetrics, PromptScoreComponents
  - SecurityAlert, ImmuneAnomaly, QuarantineEntry
  - PIIFindingSummary, PIIChallengeHold
  - MCPServerStatus, EventBusHealth, SystemHealth

Mock-data and API-hint requirements:
- Build mock service adapters per domain with realistic seed data.
- Include endpoint placeholders grouped by domain (runs/tools/memory/cost/supervisor/graph/flows/governance/security/ops/settings).
- Keep UI interactions wired through service layer so mocks can be swapped for real APIs later.

Interaction quality rules:
- Every page must include loading, empty, and error state.
- Gated actions must require explicit confirmation and reason text.
- Preserve filter/search state in URL query params.
- Provide deep links between related entities (run -> audit -> trace -> provenance).

Output expectations:
- Generate complete app structure, key pages, reusable components, and mock service layer.
- Prioritize breadth of feature coverage and clear operator workflows over polish.
- If time is limited, still generate full navigation and page skeletons with the above sections represented.

Final acceptance checklist (self-check before finishing):
- All listed routes exist.
- All 14 domain groups have dedicated UI surfaces.
- Governance/security/PII/prompt-library/event-bus features are present.
- Run lifecycle, approval, replay, trace, and flow-builder workflows are demonstrable.
- Site is responsive and coherent as a single reference control-plane product.