UI Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Horizon's user interface is designed as a multi-platform experience, encompassing both web-based access and a dedicated desktop application. The architecture leverages modern web technologies—specifically React and TypeScript—integrated with the Tauri framework to deliver a native desktop experience with a lightweight footprint. This approach ensures high performance while maintaining consistency across the browser and desktop environments.
The UI serves as the primary presentation layer for the CMDB system, providing interfaces for asset inventory management, network topology visualization, security configuration monitoring, and business impact analysis. It interacts with the backend through a RESTful API and, in the case of the desktop application, through Tauri's inter-process communication (IPC) bridge.
Sources: README.md:19-27, IMPLEMENTATION_PLAN.md:41-45, crates/ui/src-tauri/tauri.conf.json:1-10
Desktop Application Framework (Tauri)
The desktop component of Horizon is built using Tauri, a framework that uses a Rust-based backend to manage system-level operations and a web-based frontend for the user interface. This hybrid architecture allows the application to maintain a small memory footprint (targeted at <50MB) while providing native capabilities.
Core Desktop Configuration
The desktop application is configured with the following parameters:
| Parameter | Value / Description |
|---|---|
| Product Name | horizon |
| Identifier | com.cyberpath-hq.horizon |
| Window Dimensions | 800x600 (default) |
| Frontend Dev URL | http://localhost:1420 |
| Build Commands | bun run dev (dev), bun run build (prod) |
Sources: crates/ui/src-tauri/tauri.conf.json:3-25, IMPLEMENTATION_PLAN.md:129-132
Desktop-Specific Capabilities
The desktop application includes features not present in the standard web version:
- Multi-Server Profile Management: Encrypted storage for multiple server credentials and URLs.
- Offline Mode: Local caching using SQLite (rusqlite) for data synchronization.
- System Integration: System tray menus, native notifications, and window state persistence.
- Local Agent Management: UI for installing and monitoring the Horizon agent on the host machine.
Sources: IMPLEMENTATION_PLAN.md:435-475
Frontend Technology Stack
The UI frontend is built using a modern React stack, ensuring type safety and modularity.
Key Technologies
- Framework: React 19.1.0
- Language: TypeScript 5.8.3
- Build Tool: Vite 7.0.4
- Styling: Tailwind CSS and shadcn/ui component library
- State Management: React Context and Hooks (e.g.,
useState)
Sources: crates/ui/package.json:12-32, IMPLEMENTATION_PLAN.md:167-175, crates/ui/src/App.tsx:1-5
Component Structure
The UI follows a component-based architecture. The entry point is defined in index.html, which loads main.tsx to mount the React application.
The diagram shows the hierarchical structure of the frontend application from the entry HTML to specific feature modules.
Sources: crates/ui/index.html:10-14, IMPLEMENTATION_PLAN.md:183-195
Data Flow and Communication
The UI communicates with backend services using two primary channels depending on the environment.
Tauri Command Invocation
In the desktop application, the frontend communicates with the Rust backend using the invoke API. This is used for system-level tasks or when the desktop backend acts as a proxy.
// Example of Tauri command invocation in App.tsx
import { invoke } from "@tauri-apps/api/core";
async function greet() {
setGreetMsg(await invoke("greet", { name }));
}
Sources: crates/ui/src/App.tsx:9-13
API Communication Sequence
For standard data operations (Assets, Users, Security), the UI interacts with the Horizon API Server via REST.
The sequence diagram illustrates the dual communication paths: IPC for local desktop commands and HTTP/HTTPS for core CMDB data.
Sources: crates/ui/src/App.tsx:11, IMPLEMENTATION_PLAN.md:113-125, README.md:104-110
UI Feature Modules
The implementation plan divides the UI into several functional modules based on business logic:
1. Authentication and RBAC
Handles user registration, login (email/password), Multi-Factor Authentication (TOTP), and session management. It implements role-based visibility for navigation menus.
Sources: IMPLEMENTATION_PLAN.md:177-181, IMPLEMENTATION_PLAN.md:197-201
2. Asset Management
Provides the interface for the core CMDB functionality:
- Asset Explorer: List view with filtering, pagination, and full-text search.
- Asset Detail: Tabbed interface showing relationships, history, software inventory, and vulnerabilities.
- Relationship Mapping: Visual representation of dependencies between infrastructure components.
Sources: IMPLEMENTATION_PLAN.md:219-225
3. Security and Compliance
- Configuration Dashboard: Displays compliance scoring against CIS benchmarks.
- Vulnerability Tracking: Lists CVEs correlated to specific assets.
- Network Topology: Interactive visualization of network flows and topology maps.
Sources: IMPLEMENTATION_PLAN.md:313-317, IMPLEMENTATION_PLAN.md:365-369
Development and Build Pipeline
The UI project is managed as a crate within the Rust workspace but utilizes npm-compatible package management for frontend dependencies.
Available Scripts
| Command | Action |
|---|---|
npm run dev | Starts the Vite development server |
npm run build | Compiles TypeScript and builds the production bundle |
npm run tauri | Executes Tauri-specific CLI commands |
Sources: crates/ui/package.json:6-11
Directory Layout
crates/ui/
├── index.html # Entry HTML
├── package.json # Node.js dependencies
├── src/ # React/TypeScript source
│ ├── App.tsx # Main application component
│ └── main.tsx # React entry point
└── src-tauri/ # Rust desktop backend
├── Cargo.toml # Rust dependencies (tauri, serde)
└── tauri.conf.json # Tauri configuration
Sources: crates/ui/index.html, crates/ui/package.json, crates/ui/src-tauri/tauri.conf.json
Summary
The Horizon UI Architecture provides a unified React-based frontend that functions as both a standard web application and a high-performance desktop tool via Tauri. By utilizing a shared TypeScript codebase, the project maintains feature parity across platforms while allowing the desktop version to leverage native system capabilities for offline storage and server management. This modular approach aligns with the project's strategic goals of accessibility and comprehensiveness.