From 4a65d2ae87438551aefa45c97aa568aa849876cd Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 15 Jun 2026 16:57:27 +0200
Subject: [PATCH] fix(beszel): don't clear live data on transient connection
 errors

Keep showing existing charts during brief WebSocket reconnections
instead of flashing the error UI. The error state only shows when
no data was ever received (genuine initial connection failure).
---
 packages/widgets/src/beszel/_shared/chart.tsx | 80 +++++++++----------
 .../src/beszel/_shared/use-live-stats.ts      |  1 -
 2 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/packages/widgets/src/beszel/_shared/chart.tsx b/packages/widgets/src/beszel/_shared/chart.tsx
index 6af0ce567..7db7ccd60 100644
--- a/packages/widgets/src/beszel/_shared/chart.tsx
+++ b/packages/widgets/src/beszel/_shared/chart.tsx
@@ -51,47 +51,47 @@ type BeszelAreaChartProps = Omit<AreaChartProps, "dataKey" | "curveType" | "with
   yAxisDomain?: [number, string];
 };
 
-const BeszelAreaChart = memo(
-  ({
-    yAxisFormatter,
-    yAxisDomain,
-    yAxisProps: yAxisPropsOverride,
-    type = "default",
-    ...props
-  }: BeszelAreaChartProps) => {
-    const mergedYAxis = useMemo(
-      () => ({
-        ...yAxisBase,
-        width: 32,
-        tickMargin: 2,
-        ...(yAxisDomain ? { domain: yAxisDomain } : {}),
-        tickFormatter: yAxisFormatter,
-        ...yAxisPropsOverride,
-      }),
-      [yAxisFormatter, yAxisDomain, yAxisPropsOverride],
-    );
+const BeszelAreaChart = memo(({
+  yAxisFormatter,
+  yAxisDomain,
+  yAxisProps: yAxisPropsOverride,
+  type = "default",
+  ...props
+}: BeszelAreaChartProps) => {
+  const mergedYAxis = useMemo(
+    () => ({
+      ...yAxisBase,
+      width: 48,
+      tickMargin: 2,
+      ...(yAxisDomain ? { domain: yAxisDomain } : {}),
+      tickFormatter: yAxisFormatter,
+      ...yAxisPropsOverride,
+    }),
+    [yAxisFormatter, yAxisDomain, yAxisPropsOverride],
+  );
 
-    return (
-      <AreaChart
-        dataKey="time"
-        curveType="monotone"
-        withGradient={false}
-        connectNulls
-        withDots={false}
-        type={type}
-        strokeWidth={1}
-        fillOpacity={0.2}
-        areaChartProps={noAnimation}
-        withXAxis
-        withYAxis
-        w="100%"
-        style={chartStyle}
-        yAxisProps={mergedYAxis}
-        {...props}
-      />
-    );
-  },
-);
+  return (
+    <AreaChart
+      dataKey="time"
+      curveType="monotone"
+      withGradient={false}
+      connectNulls
+      withDots={false}
+      type={type}
+      strokeWidth={1}
+      fillOpacity={0.2}
+      areaChartProps={{
+        // margin: { top: 0, right: 0, bottom: 0, left: 10 },
+      }}
+      withXAxis
+      withYAxis
+      w="100%"
+      style={chartStyle}
+      yAxisProps={mergedYAxis}
+      {...props}
+    />
+  );
+});
 
 export const useSystemChartData = (
   systemStats: BeszelSystemStatsRecord[] | undefined,
diff --git a/packages/widgets/src/beszel/_shared/use-live-stats.ts b/packages/widgets/src/beszel/_shared/use-live-stats.ts
index b006ab0fd..2ee0a82f0 100644
--- a/packages/widgets/src/beszel/_shared/use-live-stats.ts
+++ b/packages/widgets/src/beszel/_shared/use-live-stats.ts
@@ -37,7 +37,6 @@ export const useLiveStats = (integrationIds: string[], systemId: string, enabled
   );
 
   const onError = useCallback((err: unknown) => {
-    setData(null);
     setError(err instanceof Error ? err : new Error(String(err)));
   }, []);