feat: dashboard playground tab connection failure

[liavweiss]

Fix bug: Dashboard Playground Tab Connection Failure

#849

Fixes the Playground tab connection issue where OpenWebUI fails to load, showing "localhost refused to connect" error. The fix ensures the Playground tab uses the backend proxy route instead of constructing direct URLs, enabling proper static asset loading and API routing.

Problem

The Playground tab was attempting to connect directly to OpenWebUI by constructing URLs based on hostname patterns (e.g., replacing 'dashboard' with 'openwebui'). This approach had several issues:

1. Connection failures: Direct URLs bypass the backend proxy, causing CORS and connection issues
2. Static asset loading failures: OpenWebUI's static assets (/static/, /_app/) were not being proxied, resulting in 404 errors
3. API routing issues: OpenWebUI API endpoints (e.g., /api/config) were not routed correctly
4. Backend detection error: OpenWebUI detected iframe embedding and showed "Open WebUI Backend Required" error
5. Deployment incompatibility: The hostname-based URL construction doesn't work reliably across different deployment scenarios (Docker, Kubernetes, local dev)

Solution

Frontend Changes

• Changed iframe source: Updated PlaygroundPage.tsx to use the backend proxy route /embedded/openwebui/ instead of constructing direct URLs
• Simplified component: Removed unnecessary URL construction logic and state management

Backend Changes

1. Added OpenWebUI static asset handlers:

   • Implemented /static/ handler with referer-based routing to handle conflicts between Jaeger and OpenWebUI (both use /static/)
   • Implemented /_app/ handler with referer-based routing to handle conflicts between OpenWebUI and ChatUI (both use /_app/)

2. Added OpenWebUI API routing:

   • Updated /api/ router to prioritize OpenWebUI API endpoints (/api/config) based on path patterns or referer header
   • Ensures OpenWebUI API calls are routed correctly instead of falling through to other services
   • /api/config is used for OpenWebUI configuration

3. Added X-Forwarded- headers*:

   • Added X-Forwarded-Host, X-Forwarded-Proto, and X-Forwarded-For headers in the proxy
   • Makes OpenWebUI think it's being served directly from the backend, fixing the "Backend Required" error

4. Updated static file server:

   • Added /static/ to the exclusion list to prevent the static file server from attempting to serve proxy routes

Changes Made

Files Modified

• dashboard/frontend/src/pages/PlaygroundPage.tsx - Changed iframe src to use backend proxy route
• dashboard/backend/router/router.go - Added OpenWebUI static asset handlers and API routing
• dashboard/backend/proxy/proxy.go - Added X-Forwarded-* headers for backend detection
• dashboard/backend/handlers/static.go - Added /static/ to exclusion list

Testing

✅ Verified the fix works:

• Playground tab loads OpenWebUI successfully
• All static assets (JS, CSS, images) load correctly
• OpenWebUI API endpoints work properly
• No "Backend Required" error
• Works with quickstart.sh script

✅ Tested compatibility:

• Jaeger /static/ assets still work correctly (referer-based routing)
• ChatUI /_app/ assets still work correctly (referer-based routing)
• Other dashboard tabs (Monitoring, Config, Tracing) continue to work

[netlify]

✅ Deploy Preview for vllm-semantic-router ready!

Name	Link
🔨 Latest commit	523433b
🔍 Latest deploy log	https://app.netlify.com/projects/vllm-semantic-router/deploys/69430d22fa4dab000881814c
😎 Deploy Preview	https://deploy-preview-850--vllm-semantic-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

👥 vLLM Semantic Team Notification

The following members have been identified for the changed files in this PR and have been automatically assigned:

📁 dashboard

Owners: @JaredforReal, @Xunzhuo
Files changed:

• dashboard/backend/handlers/static.go
• dashboard/backend/proxy/proxy.go
• dashboard/backend/router/router.go
• dashboard/frontend/src/pages/PlaygroundPage.tsx
• dashboard/frontend/src/vite-env.d.ts

---

🎉 Thanks for your contributions!

This comment was automatically generated based on the OWNER files in the repository.

[samzong]

@liavweiss Great work on this PR. The proxy-based approach is solid and I really like the direction you took here.

Since this is mainly intended to work with the openwebui, it would be great to test it against the dockerfile.stack introduced in PR #845. That’s the environment I was targeting when trying to land this solution.

If you hit any issues or need help testing or wiring things together, feel free to reach out. Happy to help.

[liavweiss]

Hey @samzong,

I tested the backend proxy approach with the all-in-one stack setup from PR #845, and it works! ✅

The Playground tab loads OpenWebUI correctly through the /embedded/openwebui/ proxy route. The only thing to note is that OpenWebUI takes a few minutes to finish downloading files on first startup, but once it's ready, everything works as expected.

PR is ready