feat(frontend): live area stack chart for aggregate stats

[zowks]

This pull request refactors and improves the live statistics dashboard for clusters, focusing on modularizing the CPU and Memory widgets, enhancing real-time charting, and improving code clarity and maintainability. The main changes include extracting CPU and Memory components, introducing a reusable LiveAreaStackChart, updating the live data streaming logic, and polishing the UI layout.

Component Refactoring and Modularization:

• Extracted CPU and Memory statistics into separate components (CPU.svelte and Memory.svelte), each with its own logic for subscribing to live data and rendering with the new LiveAreaStackChart component. [1] [2]
• Introduced LiveAreaStackChart.svelte as a reusable, theme-aware stacked area chart component for visualizing time-series data, replacing the previous inline chart logic. [1] [2]

Live Data Streaming Improvements:

• Updated getClustersStatsLive to stream data every second instead of every two seconds and to include a date field with each data point for accurate charting.

UI/UX Enhancements:

• Updated the stats page layout to add a clear app bar and improved grid structure for widgets, and included a live query ping indicator for better user feedback.

These changes collectively improve code organization, enable more flexible and visually appealing real-time statistics, and lay the groundwork for future extensibility.

Screenshots

/stats

---

Checklist

• My code follows the project's coding style
• Tests pass locally
• I added/updated relevant tests
• I updated documentation (if needed)
• This PR is ready for review

[a9ex]

Depends on unmerged branches. This branch imports components/deps that live on refactor/frontend/clusters (es-toolkit dependency, $lib/components/Widget.svelte, $lib/components/LiveQueryPing.svelte, $lib/utils/formatPercentage.ts). It won't build standalone — please rebase/merge after clusters lands. Merge order: clusters → this. The findings below are the genuine issues independent of those missing imports.

Major

• lib/components/LiveAreaStackChart.svelte — malformed series when a cluster disappears / is omitted. The windowing effect does [...values, value[key] ?? []]. When a cluster that was present is absent from the current tick — which the backend does routinely (a cluster stops, or its stats fetch failed so it's omitted from the aggregate map) — value[key] is undefined, so an empty array [] is appended as a "data point". The subsequent .date/d3 stack math then reads undefined → NaN in the x-domain and stacked areas. This triggers easily during a live demo. Fix: skip keys not in the current tick, or append a real zero point { date, value: 0 }.

Minor

• Dead, divergent duplicate: routes/(app)/stats/components/LiveAreaStackChart.svelte is imported by nobody (CPU/Memory both use $lib/components/LiveAreaStackChart.svelte) and differs from it. Delete it to avoid confusion.
• Leftover debug log: stats/components/CPU.svelte has console.log(unmounted) that runs on every SSE tick. Remove.
• getClustersStatsLive hardcodes ?interval=1 (valid, within [1,120]), but it's not parameterizable — noting only.

Looks good

• No perf/leak concern: the chart windows to the last 60s (~60 points/cluster), reassigns $state.raw wholesale each tick — bounded, cheap at these sizes.
• Aggregate SSE contract is handled correctly otherwise (empty map renders empty; TextDecoderStream → EventSourceParserStream → JSON.parse with proper stream teardown on unsubscribe).

Verdict: draft, not mergeable standalone (missing deps come from clusters). Once rebased, fix the omitted-cluster [] bug (Major), drop the duplicate file, and remove the debug log.