From c5b4cf9a0e9ea9f35876ab87c4b46722edcd44a7 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 15 Jun 2026 16:01:01 +0200
Subject: [PATCH] fix(beszel): add recovery button when live mode fails

When SSE connection fails, the error UI now shows a specific message
and a button to switch back to historical view, so users don't need
to reload the page to recover.
---
 packages/translation/src/lang/en.json                 |  2 ++
 .../widgets/src/beszel-system-stats/component.tsx     | 11 +++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index db654f202..78b34ff0a 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -3703,6 +3703,8 @@
       "selectSystem": "Select system",
       "error": {
         "internalServerError": "Unable to connect to Beszel. Check your integration settings.",
+        "liveConnectionFailed": "Live connection failed. Your Beszel instance may not support real-time streaming.",
+        "switchToHistorical": "Switch to historical view",
         "systemNotFound": "Selected system was not found. Choose a different system."
       },
       "chart": {
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index 1f242e070..77245c461 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useMemo } from "react";
-import { ActionIcon, Center, Menu, ScrollArea, Select, SimpleGrid, Stack, Text } from "@mantine/core";
+import { ActionIcon, Button, Center, Menu, ScrollArea, Select, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconPlugConnectedX, IconServer, IconQuestionMark } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -148,8 +148,15 @@ export default function BeszelSystemStatsWidget({
         <Stack align="center" gap="sm" p="md">
           <IconPlugConnectedX size={40} />
           <Text size="sm" c="dimmed" ta="center">
-            {t("error.internalServerError")}
+            {t("error.liveConnectionFailed")}
           </Text>
+          <Button
+            size="xs"
+            variant="light"
+            onClick={() => setOptions({ newOptions: { timePeriod: "1h" } })}
+          >
+            {t("error.switchToHistorical")}
+          </Button>
         </Stack>
       </Center>
     );