feat(beszel): add error definitions and retry config to beszel widgets

Add INTERNAL_SERVER_ERROR error definitions to alerts, grid, and table
widgets. Set retry: false and appropriate staleTime/refetchInterval.

packages/widgets/src/beszel-alerts/component.tsx

@@ -42,22 +42,35 @@ export default function BeszelAlertsWidget({
       includeHistory: options.showHistory,
       maxHistoryItems: options.maxHistoryItems,
     },
-    { staleTime: 30 * 1000 },
+    { staleTime: 15_000, refetchInterval: 15_000, retry: false },
   );
   const utils = clientApi.useUtils();
 
   clientApi.widget.beszel.subscribeAlerts.useSubscription(
-    { integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems },
+    {
+      integrationIds,
+      includeHistory: options.showHistory,
+      maxHistoryItems: options.maxHistoryItems,
+    },
     {
       enabled: !isEditMode,
       onData(data) {
         utils.widget.beszel.getAlerts.setData(
-          { integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems },
+          {
+            integrationIds,
+            includeHistory: options.showHistory,
+            maxHistoryItems: options.maxHistoryItems,
+          },
           (prev) => {
             if (!prev) return prev;
             return prev.map((r) =>
               r.integrationId === data.integrationId
-                ? { ...r, alerts: data.alerts.alerts, history: data.alerts.history, updatedAt: data.timestamp }
+                ? {
+                    ...r,
+                    alerts: data.alerts.alerts,
+                    history: data.alerts.history,
+                    updatedAt: data.timestamp,
+                  }
                 : r,
             );
           },

packages/widgets/src/beszel-alerts/index.ts

@@ -1,4 +1,4 @@
-import { IconBell } from "@tabler/icons-react";
+import { IconBell, IconServerOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { createWidgetDefinition } from "../definition";
@@ -11,7 +11,16 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelAle
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showHistory: factory.switch({ defaultValue: true }),
-      maxHistoryItems: factory.number({ defaultValue: 10, validate: z.number().min(1).max(100) }),
+      maxHistoryItems: factory.number({
+        defaultValue: 10,
+        validate: z.number().min(1).max(100),
+      }),
     }));
   },
+  errors: {
+    INTERNAL_SERVER_ERROR: {
+      icon: IconServerOff,
+      message: (t) => t("widget.beszelAlerts.error.internalServerError"),
+    },
+  },
 }).withDynamicImport(() => import("./component"));

packages/widgets/src/beszel-system-grid/component.tsx

@@ -316,7 +316,11 @@ const SystemCard = ({ system, options, t, size, maxMetrics }: SystemCardProps) =
       radius="sm"
       withBorder
       h="100%"
-      style={{ overflow: "hidden", display: "flex", flexDirection: "column" as const }}
+      style={{
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column" as const,
+      }}
     >
       <Group gap="xs" mb={2}>
         <Badge
@@ -346,7 +350,7 @@ export default function BeszelSystemGridWidget({
   const t = useScopedI18n("widget.beszelSystemGrid");
   const { data: results = [] } = clientApi.widget.beszel.getSystems.useQuery(
     { integrationIds },
-    { staleTime: 30 * 1000 },
+    { staleTime: 5_000, refetchInterval: 5_000, retry: false },
   );
 
   useBeszelSystemsSubscription(integrationIds, !isEditMode);

packages/widgets/src/beszel-system-grid/index.ts

@@ -1,4 +1,4 @@
-import { IconLayoutGrid } from "@tabler/icons-react";
+import { IconLayoutGrid, IconServerOff } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
 import { statusOptions } from "../beszel/_shared/options";
@@ -10,7 +10,10 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
   integrationsRequired: true,
   createOptions() {
     return optionsBuilder.from((factory) => ({
-      statusFilter: factory.select({ defaultValue: "all", options: statusOptions }),
+      statusFilter: factory.select({
+        defaultValue: "all",
+        options: statusOptions,
+      }),
       showCpu: factory.switch({ defaultValue: true }),
       showMemory: factory.switch({ defaultValue: true }),
       showDisk: factory.switch({ defaultValue: true }),
@@ -24,4 +27,10 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
       showAgent: factory.switch({ defaultValue: true }),
     }));
   },
+  errors: {
+    INTERNAL_SERVER_ERROR: {
+      icon: IconServerOff,
+      message: (t) => t("widget.beszelSystemGrid.error.internalServerError"),
+    },
+  },
 }).withDynamicImport(() => import("./component"));

packages/widgets/src/beszel-system-table/component.tsx

@@ -34,7 +34,7 @@ type SystemRowWithKey = BeszelSystemRow & { _key: string };
 
 interface SizeConfig {
   iconSize: number;
-  fontSize: "xs" | "10px";
+  fontSize: "xs" | "sm";
   progressSize: "xs" | "sm";
   cellPadding: number;
   valueMiw: number;
@@ -42,9 +42,21 @@ interface SizeConfig {
 
 const getSizeConfig = (width: number): SizeConfig => {
   if (width < 400) {
-    return { iconSize: 10, fontSize: "10px", progressSize: "xs", cellPadding: 2, valueMiw: 30 };
+    return {
+      iconSize: 10,
+      fontSize: "xs",
+      progressSize: "xs",
+      cellPadding: 2,
+      valueMiw: 30,
+    };
   }
-  return { iconSize: 14, fontSize: "xs", progressSize: "sm", cellPadding: 4, valueMiw: 38 };
+  return {
+    iconSize: 14,
+    fontSize: "sm",
+    progressSize: "sm",
+    cellPadding: 4,
+    valueMiw: 38,
+  };
 };
 
 export default function BeszelSystemTableWidget({
@@ -56,7 +68,7 @@ export default function BeszelSystemTableWidget({
   const t = useScopedI18n("widget.beszelSystemTable");
   const { data: results = [] } = clientApi.widget.beszel.getSystems.useQuery(
     { integrationIds },
-    { staleTime: 30 * 1000 },
+    { staleTime: 5_000, refetchInterval: 5_000, retry: false },
   );
   const size = getSizeConfig(width);
 

packages/widgets/src/beszel-system-table/index.ts

@@ -1,4 +1,4 @@
-import { IconTable } from "@tabler/icons-react";
+import { IconServerOff, IconTable } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
 import { statusOptions } from "../beszel/_shared/options";
@@ -29,9 +29,15 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
   integrationsRequired: true,
   createOptions() {
     return optionsBuilder.from((factory) => ({
-      statusFilter: factory.select({ defaultValue: "all", options: statusOptions }),
+      statusFilter: factory.select({
+        defaultValue: "all",
+        options: statusOptions,
+      }),
       sortBy: factory.select({ defaultValue: "name", options: sortOptions }),
-      sortDirection: factory.select({ defaultValue: "asc", options: sortDirectionOptions }),
+      sortDirection: factory.select({
+        defaultValue: "asc",
+        options: sortDirectionOptions,
+      }),
       showCpu: factory.switch({ defaultValue: true }),
       showMemory: factory.switch({ defaultValue: true }),
       showDisk: factory.switch({ defaultValue: true }),
@@ -45,4 +51,10 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
       showAgent: factory.switch({ defaultValue: true }),
     }));
   },
+  errors: {
+    INTERNAL_SERVER_ERROR: {
+      icon: IconServerOff,
+      message: (t) => t("widget.beszelSystemTable.error.internalServerError"),
+    },
+  },
 }).withDynamicImport(() => import("./component"));