[LHF-01] Performance Degradation from Destructive Full-Page UI Reloads

[sheepdestroyer]

Location

router/main.py (Dashboard HTML template script tag, lines 2818-2823)

Problem Description

Telemetry updates on the dashboard are forced via setInterval(() => { window.location.reload(); }, 3000);. This destructive full-page reload breaks layout persistence, impacts browser rendering performance, and demands full server-side DOM reconstruction and DB queries every 3 seconds.

Fix Overview

Strip the global page-reloader and replace it with a focused asynchronous script that targets specific metadata fields from a JSON status endpoint.

Proposed Implementation Steps

1. Define a new JSON API endpoint (e.g., @app.get("/api/dashboard-stats")) that returns the metrics dictionary.
2. In the dashboard HTML script tag, replace the window.location.reload() with a fetch request to the new endpoint.
3. Update specific DOM node elements dynamically inside the callback.

Code Example / Diff

Before:

<script>
    // Auto refresh metrics every 3 seconds
    setInterval(() => {
        window.location.reload();
    }, 3000);
</script>

After:

<script>
    async function refreshStats() {
        try {
            const res = await fetch("/api/dashboard-stats");
            const data = await res.json();
            document.getElementById("litellm-status").className = data.litellm ? "status-ok" : "status-error";
            // ... update other elements ...
        } catch (e) {
            console.error("Failed to fetch stats:", e);
        }
    }
    setInterval(refreshStats, 3000);
    window.addEventListener("DOMContentLoaded", refreshStats);
</script>

[google-labs-jules]

Jules is on it. When finished, you will see another comment and be able to review a PR.

[google-labs-jules]

Ready for a review! A PR has been created.