Proposal: Modern Dashboard MVP Plan

[JaredforReal]

Is your feature request related to a problem? Please describe.
We need a Modern Dashboard that integrates Configuration Management, an Interactive Playground, and Real-time Monitoring & Observability. The goal is to lower the barrier for new users and provide a unified management experience.

Currently, we already have:

• Grafana + Prometheus for observability,
• Open Web UI for interactive usage,
• Multiple deployment options: local installation, Docker Compose, and Kubernetes,
• A website/ folder at the project root that focuses on introduction and documentation.

However, these pieces are currently separate, and there is no single entry point that consolidates them into a cohesive experience.

---

Describe the solution you'd like
Introduce a new dashboard/ dir in root dir or tools/, dedicated to this Modern Dashboard:

dashboard/
├── frontend/                        # UI for configuration, playground, monitoring
│  ├─ Monitoring (iframe Grafana + Prometheus charts)
│  ├─ Config Viewer (Read-only VSR config JSON)
│  └─ Playground (iframe Open WebUI)
├── backend/                         # API proxy, auth, metrics aggregation
│  ├─ /api/metrics → Prometheus
│  ├─ /api/config  → semantic-router API / config loader
│  └─ /api/proxy   → Open WebUI proxy
├── deploy/
│   ├── docker/                      # Docker Compose setup
│   ├── kubernetes/                  # K8s manifests
│   ├── local/                       # Local/dev setup
├── README.md                       # Setup guide for all environments
└── helm-chart/                      # (optional) Helm chart for dashboard

Key Design Considerations

• Grafana Integration: Embed Grafana dashboards directly into the UI via iframe, with reverse proxy and authentication (e.g., SSO and JWT) for a seamless, secure user experience.
• Deployment Flexibility: Provide consistent support for local, Docker Compose, and Kubernetes setups, ensuring smooth transitions from development to production.
• Security & Access Control: Centralize authentication and role-based access control through the backend proxy, protecting metrics and configuration endpoints.
• Extensibility: Adopt a modular structure that allows easy addition of new visualization tools, configuration sources, or integrations in the future.

Benefits

• Unified Entry Point: Consolidates configuration, observability, and interactive playground into a single dashboard, minimizing context switching.
• Accelerated Onboarding: Enables new users to explore and operate the system without juggling multiple tools (Grafana, Open Web UI, CLI).
• Operational Consistency: Works seamlessly across environments (local, Compose, Kubernetes), covering both developer workflows and production deployments.
• Future-Proof Design: Modular directory structure (frontend/, backend/, deploy/) ensures scalability for new features like alerts, advanced analytics, or third-party integrations.

---

Proposal for #314

[JaredforReal]

@Xunzhuo @rootfs WDTY?

[rootfs]

The grafana + prom is a good start, the "config viewer" will need more iteration. Thanks for starting up this idea!

[JaredforReal]

We already have a well-designed Open-WebUI that provides a unified entry point across three different deployment modes, which makes it easier for the Modern Dashboard to stay agnostic to how semantic-router is deployed. Following the same pattern, I plan to introduce a unified Grafana + Prometheus entry point for all three deployment modes to support the Modern Dashboard. With this approach, the dashboard/deploy/ directory for separate deployment configurations may no longer be necessary.