madbase/.trae/documents/plan_20260311_215157.md

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.