I will implement **Phase 4.1: Management UI** by upgrading the current single-file dashboard into a feature-rich Admin UI using Vue 3 (via CDN) and adding necessary backend proxy support. ### 1. Gateway Enhancements - **Add Dependencies**: Add `reqwest` to `gateway/Cargo.toml` to enable proxying requests to internal services (Loki). - **Loki Proxy**: Implement a `/platform/v1/logs` endpoint in `gateway/src/main.rs` that forwards LogQL queries to the internal Loki instance (`http://loki:3100`). This allows the frontend to securely query logs without exposing Loki directly. - **Storage & Realtime Access**: Ensure existing APIs (`/storage/v1`, `/realtime/v1`) are accessible from the dashboard (using the service role key for admin actions). ### 2. Admin UI Implementation (`web/index.html`) Refactor the existing HTML file into a **Vue 3 Single Page Application** with the following features: - **Tabbed Interface**: Clean navigation between Dashboard, Storage, Realtime, and Logs. - **Dashboard Tab**: - List and manage Projects and Users (existing functionality improved). - **Storage Browser Tab**: - List all S3 buckets. - Browse objects within buckets. - Upload files directly via the UI. - Preview/Download links for objects. - **Realtime Inspector Tab**: - WebSocket client to connect to `ws://localhost:8000/realtime/v1/websocket`. - UI to subscribe to specific channels (e.g., `room:lobby`). - Live log of sent/received messages. - **Logs Viewer Tab**: - Input field for LogQL queries (e.g., `{app="gateway"}`). - Time range selector. - Display formatted log results fetched via the new proxy endpoint. ### 3. Verification - Rebuild and run the Gateway. - Verify the Admin UI at `http://localhost:8000/dashboard`. - Test each tab: - **Storage**: Upload a test file and verify it appears in the list. - **Realtime**: Connect and send a test message. - **Logs**: Query logs and verify output from Loki.