Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The FixOps frontend architecture is designed as a sophisticated enterprise-grade command and control interface for a Decision and Verification Engine. It facilitates the ingestion of security scans, provides high-fidelity visualization of complex decision pipelines, and allows for multi-LLM consensus analysis. The system supports two primary operational modes: a Demo Mode for illustrating sophisticated security decision pipelines and a Production Mode for real-time security intelligence using live data flows.
Sources: frontend/src/pages/ArchitectDashboard.jsx:115-135, frontend/src/pages/EnhancedDashboard.jsx:620-630
Tech Stack and Core Dependencies
The frontend is built primarily using React 18/19 and leveraged by Vite for fast development and building. It utilizes a modern ecosystem for state management, data fetching, and visualization.
| Category | Technology |
|---|---|
| Framework | React (v18.2.0 / v19.2.0) |
| Build Tool | Vite, Next.js |
| Data Fetching | Axios, TanStack Query (React Query) |
| Styling | Tailwind CSS, Framer Motion |
| Visualization | Recharts, Cytoscape.js |
| State Management | Zustand |
| Documentation | React Markdown, Remark GFM |
Sources: frontend/package.json:1-55, web/apps/workflows/package.json:1-35
System Operation Modes
The architecture dynamically adjusts its interface and data rendering logic based on the systemMode (Demo vs. Production). This is managed through central state components that fetch system info from the backend.
The system mode affects throughput metrics (e.g., 1.2K scans/day in demo vs. 0 in ready production) and technology availability (e.g., In-Memory Demo Store vs. ChromaDB).
Sources: frontend/src/pages/ArchitectureCenter.jsx:49-110, frontend/src/pages/ArchitectDashboard.jsx:125-135
Data Flow Pipeline
The frontend visualizes a multi-layered data processing pipeline that flows from initial ingestion to final decision persistence.
Processing Pipeline Stages
- Input Layer: Handles Scan Ingestion (SARIF, SBOM, CSV, JSON).
- Processing Layer: Implements Bayesian Prior Mapping and Markov Transition Matrices using libraries like
pgmpyandmchmm. - Intelligence Layer: Utilizes Vector Databases (ChromaDB) and Multi-LLM Consensus (GPT, Claude, Gemini).
- Decision Layer: Executes policies through the Open Policy Agent (OPA).
- Output Layer: Persists results in an Evidence Lake (PostgreSQL/Audit).
Sources: frontend/src/pages/ArchitectureCenter.jsx:55-108, frontend/src/pages/ArchitectDashboard.jsx:250-285
Component Architecture
The frontend is organized into specialized dashboards catering to different technical personas, primarily the Security Architect.
Architect Dashboard
The Architect Dashboard provides a real-time status grid of core system components.
Enhanced Decision Dashboard
This module handles complex multi-LLM analysis. It supports Chunked File Uploads to manage large enterprise scan files (up to 100MB) and provides a comparison interface for different LLM providers.
Multi-LLM Consensus Flow
The frontend coordinates with the backend to present consensus analysis across various models.
API Integration and Documentation
The frontend dynamically loads technical documentation and architecture specs directly from the API.
- Architecture Docs: Fetched from
/api/v1/docs/architecture. - Installation Guide: Fetched from
/api/v1/docs/install. - Core Metrics: Fetched from
/api/v1/decisions/metrics(includes Latency, Consensus Rate, and Audit Compliance).
Sources: frontend/src/pages/ArchitecturePage.jsx:15-30, frontend/src/pages/InstallPage.jsx:15-30, frontend/src/pages/ArchitectDashboard.jsx:15-35
Summary
The FixOps frontend architecture serves as a high-performance visualization layer for complex security logic. By integrating React's component-based structure with specialized libraries for graphing (Cytoscape) and data handling (TanStack Query), it provides developers and architects with a transparent view of the Bayesian and Markov-based decision processes. The architecture's ability to pivot between demo and production modes makes it a versatile tool for both system validation and live enterprise security operations.
Sources: frontend/src/pages/ArchitectureCenter.jsx:320-335, frontend/src/pages/EnhancedDashboard.jsx:780-800