new awesome build

DOCS/UI/Architecture.md

@@ -0,0 +1,35 @@
+# 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.