# UX Roadmap: React UI Unification & Infrastructure Scaling

## Goal
Consolidate all administrative functionality into the React-based `control-plane-ui`, retiring the legacy Vue/CDN implementation, and introducing premium infrastructure management features.

---

## Phase 1: Feature Parity (Migration) [DONE]
Bring over the core "Studio" features from the Vue implementation to React.

### 1.1 Auth Management [DONE]
- [x] **User List:** Data grid with search/filter (MUI `DataGrid`).
- [x] **User Details:** Sidebar or modal showing user metadata and actions (Ban, Reset Password, Delete).

### 1.2 Storage Browser [DONE]
- [x] **Bucket Explorer:** Sidebar to switch between buckets.
- [x] **File Manager:** Table view with file type icons, size estimation, and direct upload/download/delete support.

### 1.3 Database & Functions [DONE]
- [x] **Data View:** Schema-aware table browser with pagination.
- [x] **Edge Functions:** Monaco-style editor for Deno functions with a sleek "Deploy" animation.

### 1.4 Observability [DONE]
- [x] **Realtime Console:** Live event stream with color-coded "IN/OUT/SYS" messages.
- [x] **Logs Viewer:** Integrated LogQL search for Loki logs.

---

## Phase 2: Pillar Scaling & "Wow" Factor [DONE]
Implement the advanced infrastructure management features.

### 2.1 Dashboard Overhaul [DONE]
- [x] **Pillar Cards:** Dynamic, animated cards for `Worker`, `Database`, `ProxyAPI`, and `System`.
- [x] **Live Sparklines:** Small charts showing real-time resource usage per pillar.
- [x] **Scaling Status:** Pulse animations and progress bars during active scaling operations.

### 2.2 Premium Scaling Workflow [DONE]
- [x] **Glassmorphism Modals:** Replace browser `confirm()` with high-fidelity modals.
- [x] **Financial Transparency:** Real-time cost impact calculation (e.g., "This will add €5.20/mo to your bill").
- [x] **Time Estimation:** Visual countdown or progress indicator for node provisioning.

### 2.3 Visual Excellence [DONE]
- [x] **Deep Dark Mode:** Refine the MUI theme with custom HSL colors and subtle borders.
- [x] **Micro-animations:** Framer Motion for page transitions and button interactions.

---

## Phase 3: Unification & Cleanup [DONE]
- [x] **Internal Routing:** Ensure consistent breadcrumbs and navigation.
- [x] **Proxy Integration:** Update the Gateway to serve the React build at `/dashboard` (SPA).
- [x] **Deprecation:** Remove the `web/` directory and all Vue dependencies.

---

## Phase 4: Verification [IN PROGRESS]
- [ ] **E2E Expansion:** Add Playwright tests for every migrated feature.
- [ ] **Visual Regression:** Ensure layout consistency across different viewports.
- [ ] **Podman Validation:** Full stack deployment and verification.