From a0e4b2c45d00750a8c1e6b7bcc02fa6028c39121 Mon Sep 17 00:00:00 2001
From: zowks <67444066+zowks@users.noreply.github.com>
Date: Sat, 11 Jul 2026 22:00:22 +0000
Subject: [PATCH 1/2] feat(frontend): live area stack chart for aggregate stats

---
 .../lib/components/LiveAreaStackChart.svelte  | 89 +++++++++++++++++++
 .../src/lib/remotes/clusters.remote.ts        |  9 +-
 .../src/routes/(app)/stats/+layout.svelte     |  5 +-
 .../src/routes/(app)/stats/+page.svelte       | 71 +++------------
 .../routes/(app)/stats/components/CPU.svelte  | 45 ++++++++++
 .../components/LiveAreaStackChart.svelte      | 36 ++++++++
 .../(app)/stats/components/Memory.svelte      | 45 ++++++++++
 7 files changed, 237 insertions(+), 63 deletions(-)
 create mode 100644 packages/frontend/src/lib/components/LiveAreaStackChart.svelte
 create mode 100644 packages/frontend/src/routes/(app)/stats/components/CPU.svelte
 create mode 100644 packages/frontend/src/routes/(app)/stats/components/LiveAreaStackChart.svelte
 create mode 100644 packages/frontend/src/routes/(app)/stats/components/Memory.svelte

diff --git a/packages/frontend/src/lib/components/LiveAreaStackChart.svelte b/packages/frontend/src/lib/components/LiveAreaStackChart.svelte
new file mode 100644
index 0000000..6a77570
--- /dev/null
+++ b/packages/frontend/src/lib/components/LiveAreaStackChart.svelte
@@ -0,0 +1,89 @@
+<script lang="ts" module>
+  const shades = [800, 700, 600, 500, 400, 300, 200, 100] as const;
+  const colors = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "success",
+    "warning",
+    "error",
+    "surface",
+  ] as const;
+</script>
+
+<script lang="ts" generics="T extends Record<string, { date: Date }> = any">
+  import { curveCatmullRom } from "d3-shape";
+  import { merge } from "es-toolkit/object";
+  import { AreaChart, type AreaChartProps } from "layerchart";
+  import { untrack } from "svelte";
+
+  interface Props extends Omit<AreaChartProps<T>, "data" | "xDomain" | "seriesLayout" | "series"> {
+    value?: T;
+    color?: (typeof colors)[number];
+  }
+
+  let { value, color = "primary", ...props }: Props = $props();
+
+  type Data = Record<keyof T, T[keyof T][]>;
+  let data = $state.raw<Data>();
+  let xDomain = $state<AreaChartProps<T>["xDomain"]>();
+
+  let keys = $derived<NonNullable<AreaChartProps<T>["series"]>[number]["key"][]>(
+    Object.keys(data ?? {}),
+  );
+
+  $effect(() => {
+    if (!value) return;
+
+    const oneMinuteAgo = new Date(Date.now() - 60_000);
+    let latest: Date | undefined;
+    let earliest = new Date(oneMinuteAgo);
+
+    if (untrack(() => data)) {
+      data = Object.fromEntries(
+        [untrack(() => Object.keys(data!)), Object.keys(value)].flat().map((key: keyof T) => {
+          const values = untrack(() => data![key]) ?? [];
+
+          const index = values.findLastIndex(({ date }) => date < oneMinuteAgo);
+          const updated = [...values.slice(index !== -1 ? index : 0), value[key] ?? []];
+
+          const last = updated.at(-1);
+          if (last && last.date > (latest ?? new Date(0))) latest = last.date;
+          if (updated[0].date < earliest) earliest = updated[0].date;
+
+          return [key, updated];
+        }),
+      ) as Data;
+    } else {
+      data = Object.fromEntries(
+        Object.entries(value).map(([key, value]) => [key, [value]]),
+      ) as Data;
+    }
+
+    xDomain = [earliest, latest ?? new Date()];
+  });
+</script>
+
+<AreaChart
+  grid={false}
+  {...props}
+  {xDomain}
+  seriesLayout="stack"
+  series={keys.map((key, index) => ({
+    key,
+    data: data?.[key],
+    color: `var(--color-${color}-${shades[index % (shades.length - 1)]})`,
+  }))}
+  props={merge<NonNullable<AreaChartProps<T>["props"]>, NonNullable<AreaChartProps<T>["props"]>>(
+    {
+      area: { curve: curveCatmullRom },
+      tooltip: {
+        root: { class: "preset-filled-surface-100-900!" },
+        header: {
+          format: (x) => new Date(x).toLocaleTimeString(),
+        },
+      },
+    },
+    props.props ?? {},
+  )}
+/>
diff --git a/packages/frontend/src/lib/remotes/clusters.remote.ts b/packages/frontend/src/lib/remotes/clusters.remote.ts
index 9c9891c..0720b7c 100644
--- a/packages/frontend/src/lib/remotes/clusters.remote.ts
+++ b/packages/frontend/src/lib/remotes/clusters.remote.ts
@@ -243,12 +243,10 @@ export const getClustersLive = query.live(async function* () {
 });
 
 export const getClustersStatsLive = query.live(async function* () {
-  const token = getRequestEvent().cookies.get("token");
-
-  const response = await fetch(new URL("/clusters/stats/stream?interval=2", env.API_URL), {
+  const response = await fetch(new URL("/clusters/stats/stream?interval=1", env.API_URL), {
     headers: {
       Accept: "text/event-stream",
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
     },
   });
 
@@ -265,7 +263,8 @@ export const getClustersStatsLive = query.live(async function* () {
         // @ts-ignore svelte-check false positive
         .values();
 
-      for await (const chunk of chunks) yield JSON.parse(chunk.data) as GetAggregateStatsDto;
+      for await (const chunk of chunks)
+        yield { ...(JSON.parse(chunk.data) as GetAggregateStatsDto), date: new Date() };
       return;
     }
     case 401:
diff --git a/packages/frontend/src/routes/(app)/stats/+layout.svelte b/packages/frontend/src/routes/(app)/stats/+layout.svelte
index 58dccd8..05cb1d0 100644
--- a/packages/frontend/src/routes/(app)/stats/+layout.svelte
+++ b/packages/frontend/src/routes/(app)/stats/+layout.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
+  import { appbar } from "../+layout.svelte";
   import type { LayoutProps } from "./$types";
 
   let { children }: LayoutProps = $props();
 </script>
 
-<main class="flex flex-col gap-4 max-w-4xl mx-auto">
+{@render appbar(["Statistics"])}
+
+<main class="mx-auto flex max-w-4xl flex-col gap-4">
   {@render children()}
 </main>
diff --git a/packages/frontend/src/routes/(app)/stats/+page.svelte b/packages/frontend/src/routes/(app)/stats/+page.svelte
index b31e380..6483956 100644
--- a/packages/frontend/src/routes/(app)/stats/+page.svelte
+++ b/packages/frontend/src/routes/(app)/stats/+page.svelte
@@ -1,66 +1,23 @@
 <script lang="ts">
+  import LiveQueryPing from "$lib/components/LiveQueryPing.svelte";
   import { getClustersStatsLive } from "$lib/remotes/clusters.remote";
-  import formatBytes from "$lib/utils/formatBytes";
-  import { CpuIcon, Icon, MemoryStickIcon } from "@lucide/svelte";
-  import { Progress } from "@skeletonlabs/skeleton-svelte";
-  const sum = (acc: number, value: number) => acc + value;
 
-  let live = getClustersStatsLive();
-
-  let cpu = $derived(
-    Object.values(await live)
-      .map((value) => value.cpuPercentage)
-      .reduce(sum, 0),
-  );
-
-  let memory = $derived(
-    Object.values(await live)
-      .map((value) => value.memory.percentage)
-      .reduce(sum, 0),
-  );
-
-  let memoryUsage = $derived(
-    Object.values(await live)
-      .map((value) => value.memory.usage)
-      .reduce(sum, 0),
-  );
+  import CPU from "./components/CPU.svelte";
+  import Memory from "./components/Memory.svelte";
 </script>
 
-{#snippet card(
-  label: string,
-  icon: typeof Icon,
-  percentage: number,
-  value: string[],
-)}
-  {@const Icon = icon}
+<div class="flex flex-col gap-4">
+  <div class="flex justify-end px-4">
+    <LiveQueryPing query={getClustersStatsLive()} />
+  </div>
+
   <div
-    class="@container relative flex card aspect-video preset-filled-surface-100-900 border border-surface-200-800"
+    class={[
+      "grid grid-cols-1 gap-4 lg:grid-cols-2",
+      "*:border *:border-surface-200-800 *:bg-surface-100-900",
+    ]}
   >
-    <div class="z-10 flex items-center justify-center w-full">
-      <Icon class="flex-3 size-36 text-surface-50-950 opacity-50" />
-
-      <div class="flex-4 flex flex-col gap-2 justify-center">
-        <p class="font-bold text-xl text-surface-500">{label}</p>
-        {#each value as value}
-          <p class="text-5xl font-bold opacity-75">{value}</p>
-        {/each}
-      </div>
-    </div>
-
-    <Progress value={percentage} class="absolute h-full top-0 left-0">
-      <Progress.Track class="h-full bg-transparent">
-        <Progress.Range
-          class="bg-primary-600-400 shadow-[4px_0px_6px_0px_rgba(0,0,0,0.1)]  rounded-l-xl rounded-r-none transition-[width]"
-        />
-      </Progress.Track>
-    </Progress>
+    <CPU />
+    <Memory />
   </div>
-{/snippet}
-
-<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-  {@render card("CPU", CpuIcon, cpu, [cpu.toPrecision(2) + "%"])}
-  {@render card("Memory", MemoryStickIcon, memory, [
-    memory.toPrecision(2) + "%",
-    formatBytes(memoryUsage),
-  ])}
 </div>
diff --git a/packages/frontend/src/routes/(app)/stats/components/CPU.svelte b/packages/frontend/src/routes/(app)/stats/components/CPU.svelte
new file mode 100644
index 0000000..aaa470f
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/stats/components/CPU.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import LiveAreaStackChart from "$lib/components/LiveAreaStackChart.svelte";
+  import Widget from "$lib/components/Widget.svelte";
+  import { getClustersStatsLive } from "$lib/remotes/clusters.remote";
+  import formatPercentage from "$lib/utils/formatPercentage";
+  import type { GetAggregateStatsDto } from "@hallmaster/backend/dto";
+  import { CpuIcon } from "@lucide/svelte";
+  import { onMount, type ComponentProps } from "svelte";
+
+  let value = $state<ComponentProps<LiveAreaStackChart["value"]>>();
+
+  onMount(() => {
+    let unmounted = false;
+    (async () => {
+      for await (const { date, ...stats } of getClustersStatsLive()) {
+        console.log(unmounted);
+        if (unmounted) break;
+        value = Object.fromEntries(
+          Object.entries(stats as GetAggregateStatsDto).map(([key, { cpuPercentage }]) => [
+            `Cluster ${key.padStart(2, "0")}`,
+            { date, value: cpuPercentage / 100 },
+          ]),
+        );
+      }
+    })();
+
+    return () => (unmounted = true);
+  });
+
+  let sum = $derived.by<GetAggregateStatsDto[number]["cpuPercentage"]>(() => {
+    if (!value) return 0;
+
+    return Object.values(value).reduce((acc, { value }) => acc + value, 0);
+  });
+</script>
+
+<Widget icon={CpuIcon} title="CPU" value={formatPercentage(sum)}>
+  <LiveAreaStackChart
+    {value}
+    x="date"
+    y="value"
+    axis={false}
+    props={{ tooltip: { item: { format: formatPercentage } } }}
+  />
+</Widget>
diff --git a/packages/frontend/src/routes/(app)/stats/components/LiveAreaStackChart.svelte b/packages/frontend/src/routes/(app)/stats/components/LiveAreaStackChart.svelte
new file mode 100644
index 0000000..c2103f4
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/stats/components/LiveAreaStackChart.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  const shades = [800, 700, 600, 500, 400, 300, 200, 100] as const;
+  const colors = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "success",
+    "warning",
+    "error",
+    "surface",
+  ] as const;
+</script>
+
+<script lang="ts" generics="T extends { date: Date }">
+  import LiveAreaChart from "$lib/components/LiveAreaChart.svelte";
+  import type { ComponentProps } from "svelte";
+
+  interface Props extends Omit<ComponentProps<LiveAreaChart<T>>, "seriesLayout" | "series"> {
+    color?: (typeof colors)[number];
+  }
+
+  let { value, x, color = "primary", ...props }: Props = $props();
+
+  let keys = $derived(Object.keys(value ?? {}).filter((key) => key !== x));
+</script>
+
+<LiveAreaChart
+  {...props}
+  {value}
+  {x}
+  seriesLayout="stack"
+  series={keys.map((key, index) => ({
+    key,
+    color: `var(--color-${color}-${shades[index % (shades.length - 1)]})`,
+  }))}
+/>
diff --git a/packages/frontend/src/routes/(app)/stats/components/Memory.svelte b/packages/frontend/src/routes/(app)/stats/components/Memory.svelte
new file mode 100644
index 0000000..a8990a5
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/stats/components/Memory.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import LiveAreaStackChart from "$lib/components/LiveAreaStackChart.svelte";
+  import Widget from "$lib/components/Widget.svelte";
+  import { getClustersStatsLive } from "$lib/remotes/clusters.remote";
+  import formatBytes from "$lib/utils/formatBytes";
+  import type { GetAggregateStatsDto } from "@hallmaster/backend/dto";
+  import { MemoryStickIcon } from "@lucide/svelte";
+  import { onMount, type ComponentProps } from "svelte";
+
+  let value = $state<ComponentProps<LiveAreaStackChart["value"]>>();
+
+  onMount(() => {
+    let unmounted = false;
+    (async () => {
+      for await (const { date, ...stats } of getClustersStatsLive()) {
+        if (unmounted) break;
+        value = Object.fromEntries(
+          Object.entries(stats as GetAggregateStatsDto).map(([key, { memory }]) => [
+            `Cluster ${key.padStart(2, "0")}`,
+            { date, value: memory.usage },
+          ]),
+        );
+      }
+    })();
+
+    return () => (unmounted = true);
+  });
+
+  let sum = $derived.by<GetAggregateStatsDto[number]["memory"]["usage"]>(() => {
+    if (!value) return 0;
+
+    return Object.values(value).reduce((acc, { value }) => acc + value, 0);
+  });
+</script>
+
+<Widget icon={MemoryStickIcon} title="Memory" value={formatBytes(sum)}>
+  <LiveAreaStackChart
+    {value}
+    x="date"
+    y="value"
+    axis={false}
+    color="secondary"
+    props={{ tooltip: { item: { format: formatBytes } } }}
+  />
+</Widget>

From 01a75566e6ba4fa9ec3f86d48f6df87139e49b61 Mon Sep 17 00:00:00 2001
From: zowks <67444066+zowks@users.noreply.github.com>
Date: Sun, 12 Jul 2026 13:11:38 +0000
Subject: [PATCH 2/2] fix(frontend): pull request fixes

---
 .../src/lib/remotes/clusters.remote.ts        | 65 ++++++++++---------
 .../src/routes/(app)/stats/+page.svelte       |  2 +-
 .../routes/(app)/stats/components/CPU.svelte  |  3 +-
 .../components/LiveAreaStackChart.svelte      | 36 ----------
 .../(app)/stats/components/Memory.svelte      |  2 +-
 5 files changed, 39 insertions(+), 69 deletions(-)
 delete mode 100644 packages/frontend/src/routes/(app)/stats/components/LiveAreaStackChart.svelte

diff --git a/packages/frontend/src/lib/remotes/clusters.remote.ts b/packages/frontend/src/lib/remotes/clusters.remote.ts
index 0720b7c..97509a7 100644
--- a/packages/frontend/src/lib/remotes/clusters.remote.ts
+++ b/packages/frontend/src/lib/remotes/clusters.remote.ts
@@ -5,6 +5,7 @@ import {
   ClusterIdParamSchema,
   GetClusterLogsQuerySchema,
   GetClusterSchema,
+  SseIntervalQuerySchema,
   type GetAggregateStatsDto,
   type GetClusterDto,
   type GetClusterLogsDto,
@@ -242,39 +243,45 @@ export const getClustersLive = query.live(async function* () {
   }
 });
 
-export const getClustersStatsLive = query.live(async function* () {
-  const response = await fetch(new URL("/clusters/stats/stream?interval=1", env.API_URL), {
-    headers: {
-      Accept: "text/event-stream",
-      Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
-    },
-  });
+export const getClustersStatsLive = query.live(
+  SseIntervalQuerySchema,
+  async function* ({ interval }) {
+    const response = await fetch(
+      new URL(`/clusters/stats/stream?interval=${interval}`, env.API_URL),
+      {
+        headers: {
+          Accept: "text/event-stream",
+          Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
+        },
+      },
+    );
 
-  switch (response.status) {
-    case 200: {
-      if (!response.body) {
-        console.error(await response.text());
-        return error(500, "An error occurred");
+    switch (response.status) {
+      case 200: {
+        if (!response.body) {
+          console.error(await response.text());
+          return error(500, "An error occurred");
+        }
+
+        const chunks = response.body
+          .pipeThrough(new TextDecoderStream())
+          .pipeThrough(new EventSourceParserStream())
+          // @ts-ignore svelte-check false positive
+          .values();
+
+        for await (const chunk of chunks)
+          yield { ...(JSON.parse(chunk.data) as GetAggregateStatsDto), date: new Date() };
+        return;
       }
+      case 401:
+        return redirect(303, "/login");
 
-      const chunks = response.body
-        .pipeThrough(new TextDecoderStream())
-        .pipeThrough(new EventSourceParserStream())
-        // @ts-ignore svelte-check false positive
-        .values();
-
-      for await (const chunk of chunks)
-        yield { ...(JSON.parse(chunk.data) as GetAggregateStatsDto), date: new Date() };
-      return;
+      default:
+        console.error(await response.text());
+        return error(500, "An error occurred");
     }
-    case 401:
-      return redirect(303, "/login");
-
-    default:
-      console.error(await response.text());
-      return error(500, "An error occurred");
-  }
-});
+  },
+);
 
 export const startClusters = query.batch(
   "unchecked",
diff --git a/packages/frontend/src/routes/(app)/stats/+page.svelte b/packages/frontend/src/routes/(app)/stats/+page.svelte
index 6483956..47314d7 100644
--- a/packages/frontend/src/routes/(app)/stats/+page.svelte
+++ b/packages/frontend/src/routes/(app)/stats/+page.svelte
@@ -8,7 +8,7 @@
 
 <div class="flex flex-col gap-4">
   <div class="flex justify-end px-4">
-    <LiveQueryPing query={getClustersStatsLive()} />
+    <LiveQueryPing query={getClustersStatsLive({ interval: 1 })} />
   </div>
 
   <div
diff --git a/packages/frontend/src/routes/(app)/stats/components/CPU.svelte b/packages/frontend/src/routes/(app)/stats/components/CPU.svelte
index aaa470f..6c0931c 100644
--- a/packages/frontend/src/routes/(app)/stats/components/CPU.svelte
+++ b/packages/frontend/src/routes/(app)/stats/components/CPU.svelte
@@ -12,8 +12,7 @@
   onMount(() => {
     let unmounted = false;
     (async () => {
-      for await (const { date, ...stats } of getClustersStatsLive()) {
-        console.log(unmounted);
+      for await (const { date, ...stats } of getClustersStatsLive({ interval: 1 })) {
         if (unmounted) break;
         value = Object.fromEntries(
           Object.entries(stats as GetAggregateStatsDto).map(([key, { cpuPercentage }]) => [
diff --git a/packages/frontend/src/routes/(app)/stats/components/LiveAreaStackChart.svelte b/packages/frontend/src/routes/(app)/stats/components/LiveAreaStackChart.svelte
deleted file mode 100644
index c2103f4..0000000
--- a/packages/frontend/src/routes/(app)/stats/components/LiveAreaStackChart.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts" module>
-  const shades = [800, 700, 600, 500, 400, 300, 200, 100] as const;
-  const colors = [
-    "primary",
-    "secondary",
-    "tertiary",
-    "success",
-    "warning",
-    "error",
-    "surface",
-  ] as const;
-</script>
-
-<script lang="ts" generics="T extends { date: Date }">
-  import LiveAreaChart from "$lib/components/LiveAreaChart.svelte";
-  import type { ComponentProps } from "svelte";
-
-  interface Props extends Omit<ComponentProps<LiveAreaChart<T>>, "seriesLayout" | "series"> {
-    color?: (typeof colors)[number];
-  }
-
-  let { value, x, color = "primary", ...props }: Props = $props();
-
-  let keys = $derived(Object.keys(value ?? {}).filter((key) => key !== x));
-</script>
-
-<LiveAreaChart
-  {...props}
-  {value}
-  {x}
-  seriesLayout="stack"
-  series={keys.map((key, index) => ({
-    key,
-    color: `var(--color-${color}-${shades[index % (shades.length - 1)]})`,
-  }))}
-/>
diff --git a/packages/frontend/src/routes/(app)/stats/components/Memory.svelte b/packages/frontend/src/routes/(app)/stats/components/Memory.svelte
index a8990a5..c1b9c6c 100644
--- a/packages/frontend/src/routes/(app)/stats/components/Memory.svelte
+++ b/packages/frontend/src/routes/(app)/stats/components/Memory.svelte
@@ -12,7 +12,7 @@
   onMount(() => {
     let unmounted = false;
     (async () => {
-      for await (const { date, ...stats } of getClustersStatsLive()) {
+      for await (const { date, ...stats } of getClustersStatsLive({ interval: 1 })) {
         if (unmounted) break;
         value = Object.fromEntries(
           Object.entries(stats as GetAggregateStatsDto).map(([key, { memory }]) => [