# UI Architecture

The frontend is a Single Page Application (SPA) built with **Vue 3** and **Vite**. It is located in `APP_UI/`.

## Technology Stack
- **Framework**: Vue 3 (Composition API, Script Setup)
- **Build Tool**: Vite
- **Styling**: Bootstrap 5 + Custom CSS (`src/assets/main.css`)
- **Routing**: Vue Router
- **HTTP Client**: Axios

## Key Features
- **Responsive Design**: Mobile-friendly sidebar and layouts.
- **Theme Support**: Built-in Light/Dark mode toggling.
- **Real-Time Data**: Polls the Monitoring API (`APP_CORE`) for live statistics.
- **Authentication**: JWT-based auth flow with support for 2FA.

## Configuration
Run-time configuration is loaded from `/public/config.json`. This allows the Vue app to be built once and deployed to any environment.

**File Structure (`config.json`):**
```json
{
  "api_base_url": "/api/v1",             // Proxy path to Core Monitoring API
  "profiles_api_base_url": "/api",       // Proxy path to Profiler API
  "refresh_interval": 30000              // Poll interval in ms
}
```

## Integration
The UI is served by Nginx in production and proxies API requests to:
- `/api/v1/` -> **APP_CORE** (Flask, Port 5000)
- `/profiles-api/` -> **APP_PROFILER** (FastAPI, Port 8000)

See [Deployment Guide](../General/Deployment.md) for Nginx configuration details.