style: auto-fix lint and format

fix(dashdot): normalize /api suffix from integration URL for Dashdot v6 compatibility
Dashdot v6 removed the /api prefix from all endpoints (e.g. /info instead of /api/info). Users who configured their integration URL with a trailing /api suffix from Dashdot v5 setups would get incorrect paths like /api/info causing 404s. The fix strips any trailing /api suffix from the stored URL before constructing API paths. Closes #6027
2026-06-20 13:08:45 +00:00 · 2026-06-20 15:07:18 +02:00
25 changed files with 768 additions and 1399 deletions
@@ -6,7 +6,7 @@
  },
  "engines": {
    "node": ">=24.16.0",
-    "pnpm": ">=11.7.0"
+    "pnpm": ">=11.6.0"
  },
-  "packageManager": "pnpm@11.7.0"
+  "packageManager": "pnpm@11.6.0"
 }
@@ -62,7 +62,7 @@
  },
  "engines": {
    "node": ">=24.16.0",
-    "pnpm": ">=11.7.0"
+    "pnpm": ">=11.6.0"
  },
  "packageManager": "pnpm@11.7.0",
  "dependencies": {
@@ -2,7 +2,6 @@ import { TRPCError } from "@trpc/server";
 import { observable } from "@trpc/server/observable";
 import { z } from "zod/v4";

-import { createLogger } from "@homarr/core/infrastructure/logs";
 import { createIntegrationAsync } from "@homarr/integrations";
 import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homarr/integrations/types";
 import {
@@ -15,8 +14,6 @@ import type { BeszelAlertsData, BeszelSystemRow } from "@homarr/request-handler/
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";

-const logger = createLogger({ module: "beszelRouter" });
-
 export const beszelRouter = createTRPCRouter({
  getSystems: publicProcedure
    .meta({
@@ -28,9 +25,7 @@ export const beszelRouter = createTRPCRouter({
    })
    .concat(createManyIntegrationMiddleware("query", "beszel", "mock"))
    .query(async ({ ctx }) => {
-      const integrationIds = ctx.integrations.map((i) => i.id);
-      logger.debug("getSystems called", { userId: ctx.session?.user?.id, integrationIds });
-      const settled = await Promise.allSettled(
+      const results = await Promise.all(
        ctx.integrations.map(async (integration) => {
          const innerHandler = beszelSystemsRequestHandler.handler(integration, {});
          const { data, timestamp } = await innerHandler.getCachedOrUpdatedDataAsync({
@@ -45,29 +40,6 @@ export const beszelRouter = createTRPCRouter({
          };
        }),
      );
-      const results = settled.map((result, index) => {
-        if (result.status === "fulfilled") return result.value;
-        const integration = ctx.integrations[index];
-        logger.warn("getSystems integration failed", {
-          userId: ctx.session?.user?.id,
-          integrationId: integration?.id,
-          error: result.reason,
-        });
-        return {
-          integrationId: integration?.id ?? "unknown",
-          integrationName: integration?.name ?? "unknown",
-          integrationUrl: integration?.url ?? "",
-          systems: [],
-          updatedAt: new Date(0),
-          error: result.reason instanceof Error ? result.reason.message : String(result.reason),
-        };
-      });
-      logger.debug("getSystems completed", {
-        userId: ctx.session?.user?.id,
-        integrationIds,
-        resultCount: results.length,
-        errorCount: results.filter((r) => "error" in r).length,
-      });
      return results;
    }),

@@ -111,14 +83,7 @@ export const beszelRouter = createTRPCRouter({
      }),
    )
    .query(async ({ ctx, input }) => {
-      const integrationIds = ctx.integrations.map((i) => i.id);
-      logger.debug("getAlerts called", {
-        userId: ctx.session?.user?.id,
-        integrationIds,
-        includeHistory: input.includeHistory,
-        maxHistoryItems: input.maxHistoryItems,
-      });
-      const settled = await Promise.allSettled(
+      const results = await Promise.all(
        ctx.integrations.map(async (integration) => {
          const alertsHandler = beszelAlertsRequestHandler.handler(integration, {
            includeHistory: input.includeHistory,
@@ -135,7 +100,6 @@ export const beszelRouter = createTRPCRouter({
          }
          return {
            integrationId: integration.id,
-            integrationName: integration.name,
            alerts: alertsResult.data.alerts,
            history: alertsResult.data.history,
            systemNameMap,
@@ -143,30 +107,6 @@ export const beszelRouter = createTRPCRouter({
          };
        }),
      );
-      const results = settled.map((result, index) => {
-        if (result.status === "fulfilled") return result.value;
-        const integration = ctx.integrations[index];
-        logger.warn("getAlerts integration failed", {
-          userId: ctx.session?.user?.id,
-          integrationId: integration?.id,
-          error: result.reason,
-        });
-        return {
-          integrationId: integration?.id ?? "unknown",
-          integrationName: integration?.name ?? "unknown",
-          alerts: [],
-          history: [],
-          systemNameMap: {},
-          updatedAt: new Date(0),
-          error: result.reason instanceof Error ? result.reason.message : String(result.reason),
-        };
-      });
-      logger.debug("getAlerts completed", {
-        userId: ctx.session?.user?.id,
-        integrationIds,
-        resultCount: results.length,
-        errorCount: results.filter((r) => "error" in r).length,
-      });
      return results;
    }),

@@ -224,41 +164,13 @@ export const beszelRouter = createTRPCRouter({
      if (!integration) {
        throw new TRPCError({ code: "BAD_REQUEST", message: "At least one Beszel integrationId is required" });
      }
-      logger.debug("getSystemStats called", {
-        userId: ctx.session?.user?.id,
-        integrationId: integration.id,
+      const innerHandler = beszelStatsRequestHandler.handler(integration, {
        systemId: input.systemId,
        timePeriod: input.timePeriod,
        includeDocker: input.includeDocker,
      });
-      try {
-        const innerHandler = beszelStatsRequestHandler.handler(integration, {
-          systemId: input.systemId,
-          timePeriod: input.timePeriod,
-          includeDocker: input.includeDocker,
-        });
-        const { data, timestamp } = await innerHandler.getCachedOrUpdatedDataAsync({ forceUpdate: false });
-        logger.debug("getSystemStats completed", {
-          userId: ctx.session?.user?.id,
-          integrationId: integration.id,
-          systemId: input.systemId,
-        });
-        return { integrationId: integration.id, ...data, updatedAt: timestamp };
-      } catch (error) {
-        logger.warn("getSystemStats failed", {
-          userId: ctx.session?.user?.id,
-          integrationId: integration.id,
-          systemId: input.systemId,
-          error,
-        });
-        return {
-          integrationId: integration.id,
-          systemStats: [],
-          containerStats: [],
-          updatedAt: new Date(0),
-          error: error instanceof Error ? error.message : String(error),
-        };
-      }
+      const { data, timestamp } = await innerHandler.getCachedOrUpdatedDataAsync({ forceUpdate: false });
+      return { integrationId: integration.id, ...data, updatedAt: timestamp };
    }),

  subscribeSystemStats: publicProcedure
@@ -278,11 +190,6 @@ export const beszelRouter = createTRPCRouter({
          emit.error(new Error("No Beszel integration configured"));
          return () => {};
        }
-        logger.debug("subscribeSystemStats opened", {
-          userId: ctx.session?.user?.id,
-          integrationId: integration.id,
-          systemId: input.systemId,
-        });

        const abortController = new AbortController();

@@ -292,12 +199,6 @@ export const beszelRouter = createTRPCRouter({
            await instance.subscribeRealtimeMetrics(input.systemId, (data) => emit.next(data), abortController.signal);
          } catch (error) {
            if (!abortController.signal.aborted) {
-              logger.warn("subscribeSystemStats error", {
-                userId: ctx.session?.user?.id,
-                integrationId: integration.id,
-                systemId: input.systemId,
-                error,
-              });
              if (error instanceof Error) {
                emit.error(error);
              } else {
@@ -309,11 +210,6 @@ export const beszelRouter = createTRPCRouter({

        return () => {
          abortController.abort();
-          logger.debug("subscribeSystemStats closed", {
-            userId: ctx.session?.user?.id,
-            integrationId: integration.id,
-            systemId: input.systemId,
-          });
        };
      });
    }),
@@ -55,7 +55,7 @@ export abstract class Integration {
    return this.integration.decryptedSecrets.some((secret) => secret.kind === kind);
  }

-  private createUrl(
+  protected createUrl(
    inputUrl: string,
    path: `/${string}`,
    queryParams?: Record<string, string | Date | number | boolean | null | undefined>,
@@ -46,13 +46,10 @@ export class BeszelIntegration extends Integration {
  private async authenticateAsync(): Promise<BeszelSession> {
    const existingSession = await this.sessionStore.getAsync();
    if (existingSession) {
-      logger.debug("Using stored Beszel session", { integrationId: this.integration.id });
      return existingSession;
    }

-    const authUrl = this.url("/api/collections/users/auth-with-password");
-    logger.debug("Authenticating with Beszel", { integrationId: this.integration.id, url: authUrl.pathname });
-    const response = await fetchWithTrustedCertificatesAsync(authUrl, {
+    const response = await fetchWithTrustedCertificatesAsync(this.url("/api/collections/users/auth-with-password"), {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
@@ -60,28 +57,23 @@ export class BeszelIntegration extends Integration {
        password: this.getSecretValue("password"),
      }),
    });
-    logger.debug("Beszel auth response received", { integrationId: this.integration.id, status: response.status });

    if (!response.ok) {
-      logger.warn("Beszel auth failed", { integrationId: this.integration.id, status: response.status });
      throw new ResponseError(response);
    }

    const data = (await response.json()) as BeszelAuthResponse;
    const session: BeszelSession = { token: data.token, userId: data.record.id };
    await this.sessionStore.setAsync(session);
-    logger.debug("Saved Beszel session", { integrationId: this.integration.id, userId: session.userId });
    return session;
  }

  private async fetchWithAuthAsync(url: URL, options: { method?: string; body?: string } = {}) {
-    const method = options.method ?? "GET";
-    const start = performance.now();
    let session = await this.authenticateAsync();

    const doFetch = (token: string) =>
      fetchWithTrustedCertificatesAsync(url, {
-        method,
+        method: options.method ?? "GET",
        headers: {
          Authorization: token,
          ...(options.body ? { "Content-Type": "application/json" } : {}),
@@ -90,42 +82,14 @@ export class BeszelIntegration extends Integration {
      });

    let response = await doFetch(session.token);
-    logger.debug("Beszel response", {
-      integrationId: this.integration.id,
-      method,
-      path: url.pathname,
-      status: response.status,
-      durationMs: Math.round(performance.now() - start),
-      attempt: 1,
-    });

    if (response.status === 401) {
-      logger.warn("Beszel 401, clearing session and retrying", {
-        integrationId: this.integration.id,
-        method,
-        path: url.pathname,
-      });
      await this.sessionStore.clearAsync();
      session = await this.authenticateAsync();
      response = await doFetch(session.token);
-      logger.debug("Beszel response (after re-auth)", {
-        integrationId: this.integration.id,
-        method,
-        path: url.pathname,
-        status: response.status,
-        durationMs: Math.round(performance.now() - start),
-        attempt: 2,
-      });
    }

    if (!response.ok) {
-      logger.warn("Beszel request failed", {
-        integrationId: this.integration.id,
-        method,
-        path: url.pathname,
-        status: response.status,
-        durationMs: Math.round(performance.now() - start),
-      });
      throw new ResponseError(response);
    }

@@ -293,7 +257,6 @@ export class BeszelIntegration extends Integration {
  ): Promise<void> {
    const session = await this.authenticateAsync();
    const sseUrl = this.url("/api/realtime");
-    logger.debug("Opening Beszel SSE connection", { integrationId: this.integration.id, systemId });

    const sseResponse = await fetchWithTrustedCertificatesAsync(sseUrl, {
      headers: { Authorization: session.token },
@@ -301,14 +264,8 @@ export class BeszelIntegration extends Integration {
    });

    if (!sseResponse.ok || !sseResponse.body) {
-      logger.warn("Beszel SSE connection failed", {
-        integrationId: this.integration.id,
-        systemId,
-        status: sseResponse.status,
-      });
      throw new ResponseError(sseResponse);
    }
-    logger.debug("Beszel SSE connection opened", { integrationId: this.integration.id, systemId });

    const reader = sseResponse.body.getReader();
    const decoder = new TextDecoder();
@@ -365,10 +322,6 @@ export class BeszelIntegration extends Integration {
        }
      }
      if (!signal.aborted) {
-        logger.warn("Beszel SSE stream ended unexpectedly", {
-          integrationId: this.integration.id,
-          systemId,
-        });
        throw new Error("Beszel SSE stream ended unexpectedly");
      }
    } finally {
@@ -16,6 +16,19 @@ import type { ISystemHealthMonitoringIntegration } from "../interfaces/health-mo
 import type { SystemHealthMonitoring } from "../interfaces/health-monitoring/health-monitoring-types";

 export class DashDotIntegration extends Integration implements ISystemHealthMonitoringIntegration {
+  /**
+   * Dashdot v5 had endpoints at /api/info, /api/load/* etc.
+   * Dashdot v6 removed the /api prefix. Users who previously configured
+   * their integration URL as http://host:port/api need it normalized.
+   */
+  protected override url(
+    path: `/${string}`,
+    queryParams?: Record<string, string | Date | number | boolean | null | undefined>,
+  ) {
+    const normalizedUrl = this.integration.url.replace(/\/api\/?$/, "");
+    return this.createUrl(normalizedUrl, path, queryParams);
+  }
+
  protected async testingAsync(input: IntegrationTestingInput): Promise<TestingResult> {
    const response = await input.fetchAsync(this.url("/info"));
    if (!response.ok) return TestConnectionError.StatusResult(response);
@@ -0,0 +1,66 @@
+import { describe, expect, test, vi } from "vitest";
+
+import { createDb } from "@homarr/db/test";
+
+import type { IntegrationTestingInput } from "../src/base/integration";
+import { DashDotIntegration } from "../src/dashdot/dashdot-integration";
+
+vi.mock("@homarr/db", async (importActual) => {
+  const actual = await importActual<typeof import("@homarr/db")>();
+  return {
+    ...actual,
+    db: createDb(),
+  };
+});
+
+vi.mock("@homarr/core/infrastructure/certificates", async (importActual) => {
+  const actual = await importActual<typeof import("@homarr/core/infrastructure/certificates")>();
+  return {
+    ...actual,
+    getTrustedCertificateHostnamesAsync: vi.fn().mockResolvedValue([]),
+  };
+});
+
+vi.mock("@homarr/redis", () => ({}));
+
+const createIntegration = (url: string) =>
+  new DashDotIntegration({
+    id: "test",
+    name: "Dashdot",
+    url,
+    decryptedSecrets: [],
+    externalUrl: null,
+  });
+
+describe("DashDot URL normalization", () => {
+  test("url with /api suffix is stripped", async () => {
+    const integration = createIntegration("http://dashdot:3001/api");
+    // Access protected url() via testingAsync which calls this.url("/info")
+    const url = (integration as unknown as { url: (path: string) => URL }).url("/info");
+    expect(url.toString()).toBe("http://dashdot:3001/info");
+  });
+
+  test("url with /api/ trailing slash is stripped", async () => {
+    const integration = createIntegration("http://dashdot:3001/api/");
+    const url = (integration as unknown as { url: (path: string) => URL }).url("/info");
+    expect(url.toString()).toBe("http://dashdot:3001/info");
+  });
+
+  test("url without /api suffix is unchanged", async () => {
+    const integration = createIntegration("http://dashdot:3001");
+    const url = (integration as unknown as { url: (path: string) => URL }).url("/info");
+    expect(url.toString()).toBe("http://dashdot:3001/info");
+  });
+
+  test("url with /api only at end is stripped (not mid-path)", async () => {
+    const integration = createIntegration("http://dashdot:3001/somepath/api");
+    const url = (integration as unknown as { url: (path: string) => URL }).url("/info");
+    expect(url.toString()).toBe("http://dashdot:3001/somepath/info");
+  });
+
+  test("url with path prefix other than /api is preserved", async () => {
+    const integration = createIntegration("http://dashdot:3001/dashdot");
+    const url = (integration as unknown as { url: (path: string) => URL }).url("/load/cpu");
+    expect(url.toString()).toBe("http://dashdot:3001/dashdot/load/cpu");
+  });
+});
@@ -415,18 +415,8 @@ export const createChannelWithLatestAndEvents = <TData>(channelName: string) =>
      });
    },
    publishAndUpdateLastStateAsync: async (data: TData) => {
-      // Set first, then publish. If publish fails the storage is still consistent
-      // and subscribers will catch up on the next event.
-      const payload = superjson.stringify({ data, timestamp: new Date() });
-      await getSetClient.set(channelName, payload);
-      try {
-        await publisher.publish(channelName, superjson.stringify(data));
-      } catch (error) {
-        logger.warn("Failed to publish cache update (storage is correct, subscribers will catch up)", {
-          channel: channelName,
-          error: error instanceof Error ? error.message : String(error),
-        });
-      }
+      await publisher.publish(channelName, superjson.stringify(data));
+      await getSetClient.set(channelName, superjson.stringify({ data, timestamp: new Date() }));
    },
    setAsync: async (data: TData) => {
      await getSetClient.set(channelName, superjson.stringify({ data, timestamp: new Date() }));
@@ -1,6 +1,5 @@
 import dayjs from "dayjs";

-import { createLogger } from "@homarr/core/infrastructure/logs";
 import { createIntegrationAsync } from "@homarr/integrations";
 import type {
  BeszelAlert,
@@ -14,8 +13,6 @@ import type {

 import { createCachedIntegrationRequestHandler } from "./lib/cached-integration-request-handler";

-const logger = createLogger({ module: "beszelRequestHandler" });
-
 export type { BeszelSystemRow } from "@homarr/integrations/types";

 /**
@@ -59,7 +56,6 @@ export const beszelSystemsRequestHandler = createCachedIntegrationRequestHandler
  Record<string, never>
 >({
  async requestAsync(integration) {
-    const start = performance.now();
    const instance = await createIntegrationAsync(integration);
    const systems = await instance.getSystemsAsync();
    const enriched = await Promise.all(
@@ -68,16 +64,9 @@ export const beszelSystemsRequestHandler = createCachedIntegrationRequestHandler
        return mapToSystemRow(system, details);
      }),
    );
-    logger.debug("beszelSystems fetch completed", {
-      integrationId: integration.id,
-      durationMs: Math.round(performance.now() - start),
-      count: enriched.length,
-    });
    return enriched;
  },
  cacheDuration: dayjs.duration(5, "seconds"),
-  fallbackToStaleOnError: true,
-  retry: { attempts: 2, delayMs: 500 },
  queryKey: "beszelSystems",
 });

@@ -92,21 +81,12 @@ export const beszelAlertsRequestHandler = createCachedIntegrationRequestHandler<
  { includeHistory: boolean; maxHistoryItems: number }
 >({
  async requestAsync(integration, input) {
-    const start = performance.now();
    const instance = await createIntegrationAsync(integration);
    const alerts = await instance.getAlertsAsync();
    const history = input.includeHistory ? await instance.getAlertHistoryAsync(undefined, input.maxHistoryItems) : [];
-    logger.debug("beszelAlerts fetch completed", {
-      integrationId: integration.id,
-      durationMs: Math.round(performance.now() - start),
-      alertsCount: alerts.length,
-      historyCount: history.length,
-    });
    return { alerts, history };
  },
  cacheDuration: dayjs.duration(15, "seconds"),
-  fallbackToStaleOnError: true,
-  retry: { attempts: 2, delayMs: 500 },
  queryKey: "beszelAlerts",
 });

@@ -115,8 +95,8 @@ const timePeriodConfig: Record<string, { type: string; perPage: number; cacheSec
  "1h": { type: "1m", perPage: 60, cacheSeconds: 60 },
  "12h": { type: "10m", perPage: 72, cacheSeconds: 300 },
  "24h": { type: "20m", perPage: 72, cacheSeconds: 600 },
-  "1w": { type: "1440m", perPage: 9, cacheSeconds: 1800 },
-  "30d": { type: "1440m", perPage: 32, cacheSeconds: 3600 },
+  "1w": { type: "120m", perPage: 84, cacheSeconds: 1800 },
+  "30d": { type: "480m", perPage: 90, cacheSeconds: 3600 },
 };

 export interface BeszelStatsData {
@@ -130,26 +110,15 @@ export const beszelStatsRequestHandler = createCachedIntegrationRequestHandler<
  { systemId: string; timePeriod: string; includeDocker: boolean }
 >({
  async requestAsync(integration, input) {
-    const start = performance.now();
    const config = timePeriodConfig[input.timePeriod] ?? { type: "1m", perPage: 60, cacheSeconds: 60 };
    const instance = await createIntegrationAsync(integration);
    const systemStats = await instance.getSystemStatsAsync(input.systemId, config.type, config.perPage);
    const containerStats = input.includeDocker
      ? await instance.getContainerStatsAsync(input.systemId, config.type, config.perPage).catch(() => [])
      : [];
-    logger.debug("beszelStats fetch completed", {
-      integrationId: integration.id,
-      systemId: input.systemId,
-      timePeriod: input.timePeriod,
-      durationMs: Math.round(performance.now() - start),
-      systemStatsCount: systemStats.length,
-      containerStatsCount: containerStats.length,
-    });
    return { systemStats, containerStats };
  },
  cacheDuration: dayjs.duration(60, "seconds"),
-  fallbackToStaleOnError: true,
-  retry: { attempts: 2, delayMs: 500 },
  queryKey: "beszelStats",
  cacheDurationForInput(input) {
    const config = timePeriodConfig[input.timePeriod];
@@ -18,9 +18,6 @@ interface Options<TData, TKind extends IntegrationKind, TInput extends Record<st
  requestAsync: (integration: IntegrationOfKind<TKind>, input: TInput) => Promise<TData>;
  cacheDuration: Duration;
  cacheDurationForInput?: (input: TInput) => Duration | undefined;
-  fallbackToStaleOnError?: boolean;
-  retry?: { attempts?: number; delayMs?: number };
-  isValid?: (data: TData) => boolean;
 }

 export const createCachedIntegrationRequestHandler = <
@@ -38,9 +35,6 @@ export const createCachedIntegrationRequestHandler = <
          return await options.requestAsync(input.integration, input.options);
        },
        cacheDuration: options.cacheDurationForInput?.(itemOptions) ?? options.cacheDuration,
-        fallbackToStaleOnError: options.fallbackToStaleOnError,
-        retry: options.retry,
-        isValid: options.isValid,
        createRedisChannel(input, handlerOptions) {
          return createIntegrationOptionsChannel<TData>(input.integration.id, handlerOptions.queryKey, input.options);
        },
@@ -7,16 +7,6 @@ import type { createChannelWithLatestAndEvents } from "@homarr/redis";

 const logger = createLogger({ module: "cachedRequestHandler" });

-type FetchResult<TData> = { data: TData; timestamp: Date };
-type InFlightEntry = Promise<FetchResult<unknown>>;
-
-const inFlightFetches = new Map<string, InFlightEntry>();
-
-const isAbortedError = (error: unknown): boolean => {
-  if (!(error instanceof Error)) return false;
-  return error.name === "AbortError" || error.name === "TimeoutError";
-};
-
 interface Options<TData, TInput extends Record<string, unknown>> {
  // Unique key for this request handler
  queryKey: string;
@@ -27,70 +17,28 @@ interface Options<TData, TInput extends Record<string, unknown>> {
  ) => ReturnType<typeof createChannelWithLatestAndEvents<TData>>;
  cacheDuration: Duration;
  fallbackToStaleOnError?: boolean;
-  // Retry the upstream call on failure. attempts=1 means no retry (default).
-  // AbortError / TimeoutError are never retried.
-  retry?: { attempts?: number; delayMs?: number };
-  // Predicate to decide whether a fetched response is worth caching.
-  // Return false to skip the cache write (next call will refetch).
-  isValid?: (data: TData) => boolean;
 }

-const defaultRetry = { attempts: 1, delayMs: 0 };
-const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
-
 export const createCachedRequestHandler = <TData, TInput extends Record<string, unknown>>(
  options: Options<TData, TInput>,
 ) => {
  return {
    handler: (input: TInput) => {
      const channel = options.createRedisChannel(input, options);
-      const retryConfig = { ...defaultRetry, ...options.retry };

      return {
        async getCachedOrUpdatedDataAsync({ forceUpdate = false }) {
          const channelData = await channel.getAsync();

-          const requestNewDataAsync = (): Promise<FetchResult<TData>> => {
-            const inflight = inFlightFetches.get(channel.name);
-            if (inflight) {
-              logger.debug("Cached request handler joining in-flight fetch", {
-                channel: channel.name,
-                queryKey: options.queryKey,
-              });
-              return inflight as Promise<FetchResult<TData>>;
-            }
-
-            const promise = (async (): Promise<FetchResult<TData>> => {
-              let lastError: unknown;
-              for (let attempt = 1; attempt <= retryConfig.attempts; attempt++) {
-                try {
-                  const data = await options.requestAsync(input);
-                  if (options.isValid && !options.isValid(data)) {
-                    logger.warn("Cached request handler received invalid data, not caching", {
-                      channel: channel.name,
-                      queryKey: options.queryKey,
-                      attempt,
-                    });
-                    return { data, timestamp: new Date() };
-                  }
-                  await channel.publishAndUpdateLastStateAsync(data);
-                  return { data, timestamp: new Date() };
-                } catch (error) {
-                  lastError = error;
-                  if (isAbortedError(error) || attempt === retryConfig.attempts) {
-                    break;
-                  }
-                  logger.warn("Cached request handler fetch failed, retrying", {
-                    channel: channel.name,
-                    queryKey: options.queryKey,
-                    attempt,
-                    nextDelayMs: retryConfig.delayMs,
-                    error: error instanceof Error ? `${error.name}: ${error.message}` : String(error),
-                  });
-                  await sleep(retryConfig.delayMs);
-                }
-              }
-
+          const requestNewDataAsync = async () => {
+            try {
+              const data = await options.requestAsync(input);
+              await channel.publishAndUpdateLastStateAsync(data);
+              return {
+                data,
+                timestamp: new Date(),
+              };
+            } catch (error) {
              if (options.fallbackToStaleOnError && channelData) {
                logger.warn(
                  new ErrorWithMetadata(
@@ -98,21 +46,15 @@ export const createCachedRequestHandler = <TData, TInput extends Record<string,
                    {
                      channel: channel.name,
                      queryKey: options.queryKey,
-                      attempts: retryConfig.attempts,
                    },
-                    { cause: lastError },
+                    { cause: error },
                  ),
                );
                return channelData;
              }

-              throw lastError;
-            })().finally(() => {
-              inFlightFetches.delete(channel.name);
-            });
-
-            inFlightFetches.set(channel.name, promise as InFlightEntry);
-            return promise;
+              throw error;
+            }
          };

          if (forceUpdate) {
@@ -3639,9 +3639,6 @@
      "error": {
        "internalServerError": "Unable to connect to Beszel. Check your integration settings."
      },
-      "empty": {
-        "noSystems": "No systems found"
-      },
      "metric": {
        "cpu": "CPU",
        "memory": "Memory",
@@ -3715,9 +3712,6 @@
        }
      },
      "selectSystem": "Select system",
-      "empty": {
-        "noSystems": "No systems found"
-      },
      "error": {
        "internalServerError": "Unable to connect to Beszel. Check your integration settings.",
        "liveConnectionFailed": "Live connection failed. Your Beszel instance may not support real-time streaming.",
@@ -1,7 +1,7 @@
 "use client";

 import { useMemo } from "react";
-import { Badge, Box, Center, Divider, Group, Loader, ScrollArea, Stack, Text, ThemeIcon } from "@mantine/core";
+import { Badge, Box, Divider, Group, ScrollArea, Stack, Text, ThemeIcon } from "@mantine/core";
 import { IconBellOff, IconCircleCheck, IconFlame, IconHistory } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -12,7 +12,6 @@ import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";

 import type { WidgetComponentProps } from "../definition";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";

 const alertIconMap: Record<string, LucideIcon> = {
  CPU: Cpu,
@@ -41,11 +40,7 @@ export default function BeszelAlertsWidget({
    () => ({ integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems }),
    [integrationIds, options.showHistory, options.maxHistoryItems],
  );
-  const {
-    data: results = [],
-    error: alertsError,
-    isPending,
-  } = clientApi.widget.beszel.getAlerts.useQuery(alertsInput, {
+  const { data: results = [], error: alertsError } = clientApi.widget.beszel.getAlerts.useQuery(alertsInput, {
    staleTime: 15_000,
    refetchInterval: 15_000,
    retry: false,
@@ -98,126 +93,113 @@ export default function BeszelAlertsWidget({

  if (alertsError) throw alertsError;

-  if (isPending) {
-    return (
-      <Center h="100%">
-        <Loader size="sm" />
-      </Center>
-    );
-  }
-
  return (
-    <Box h="100%" pos="relative">
-      <Box pos="absolute" top={4} right={8} style={{ zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={results} />
-      </Box>
-      <ScrollArea h="100%" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-        <Stack gap="sm" p="sm">
-          {alerts.length === 0 && (
-            <Stack align="center" justify="center" py="xl" gap="xs">
-              <ThemeIcon variant="light" color="gray" size="lg" radius="xl">
-                <IconBellOff size={18} />
-              </ThemeIcon>
-              <Text size="sm" c="dimmed">
-                {t("empty")}
+    <ScrollArea h="100%" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
+      <Stack gap="sm" p="sm">
+        {alerts.length === 0 && (
+          <Stack align="center" justify="center" py="xl" gap="xs">
+            <ThemeIcon variant="light" color="gray" size="lg" radius="xl">
+              <IconBellOff size={18} />
+            </ThemeIcon>
+            <Text size="sm" c="dimmed">
+              {t("empty")}
+            </Text>
+          </Stack>
+        )}
+
+        {triggeredAlerts.length > 0 && (
+          <Stack gap={6}>
+            <Group gap={6}>
+              <IconFlame size={14} color="var(--mantine-color-red-6)" />
+              <Text size="xs" fw={600} tt="uppercase" c="red">
+                {t("status.triggered")} ({triggeredAlerts.length})
              </Text>
-            </Stack>
-          )}
+            </Group>
+            {triggeredAlerts.map((alert) => (
+              <AlertRow
+                key={alert._key}
+                name={alert.name}
+                value={alert.value}
+                min={alert.min}
+                systemName={systemNameMap[alert.system] ?? alert.system}
+                triggered
+              />
+            ))}
+          </Stack>
+        )}

-          {triggeredAlerts.length > 0 && (
+        {triggeredAlerts.length > 0 && okAlerts.length > 0 && <Divider />}
+
+        {okAlerts.length > 0 && (
+          <Stack gap={6}>
+            <Group gap={6}>
+              <IconCircleCheck size={14} color="var(--mantine-color-green-6)" />
+              <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+                {t("status.ok")} ({okAlerts.length})
+              </Text>
+            </Group>
+            {okAlerts.map((alert) => (
+              <AlertRow
+                key={alert._key}
+                name={alert.name}
+                value={alert.value}
+                min={alert.min}
+                systemName={systemNameMap[alert.system] ?? alert.system}
+                triggered={false}
+              />
+            ))}
+          </Stack>
+        )}
+
+        {options.showHistory && history.length > 0 && (
+          <>
+            <Divider />
            <Stack gap={6}>
              <Group gap={6}>
-                <IconFlame size={14} color="var(--mantine-color-red-6)" />
-                <Text size="xs" fw={600} tt="uppercase" c="red">
-                  {t("status.triggered")} ({triggeredAlerts.length})
-                </Text>
-              </Group>
-              {triggeredAlerts.map((alert) => (
-                <AlertRow
-                  key={alert._key}
-                  name={alert.name}
-                  value={alert.value}
-                  min={alert.min}
-                  systemName={systemNameMap[alert.system] ?? alert.system}
-                  triggered
-                />
-              ))}
-            </Stack>
-          )}
-
-          {triggeredAlerts.length > 0 && okAlerts.length > 0 && <Divider />}
-
-          {okAlerts.length > 0 && (
-            <Stack gap={6}>
-              <Group gap={6}>
-                <IconCircleCheck size={14} color="var(--mantine-color-green-6)" />
+                <IconHistory size={14} opacity={0.5} />
                <Text size="xs" fw={600} tt="uppercase" c="dimmed">
-                  {t("status.ok")} ({okAlerts.length})
+                  {t("history")}
                </Text>
              </Group>
-              {okAlerts.map((alert) => (
-                <AlertRow
-                  key={alert._key}
-                  name={alert.name}
-                  value={alert.value}
-                  min={alert.min}
-                  systemName={systemNameMap[alert.system] ?? alert.system}
-                  triggered={false}
-                />
-              ))}
-            </Stack>
-          )}
-
-          {options.showHistory && history.length > 0 && (
-            <>
-              <Divider />
-              <Stack gap={6}>
-                <Group gap={6}>
-                  <IconHistory size={14} opacity={0.5} />
-                  <Text size="xs" fw={600} tt="uppercase" c="dimmed">
-                    {t("history")}
-                  </Text>
-                </Group>
-                {history.map((entry) => {
-                  const systemName = systemNameMap[entry.system] ?? entry.system;
-                  const isResolved = !!entry.resolved;
-                  const HistoryIcon = alertIconMap[entry.name] ?? Server;
-                  return (
-                    <Group key={entry._key} justify="space-between" wrap="nowrap" gap="xs" pl={4}>
-                      <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
-                        <Box
-                          w={3}
-                          h={24}
-                          style={{ borderRadius: 2, flexShrink: 0 }}
-                          bg={isResolved ? "green.6" : "red.6"}
-                        />
-                        <HistoryIcon size={12} opacity={0.5} style={{ flexShrink: 0 }} />
-                        <Stack gap={0} style={{ minWidth: 0 }}>
-                          <Text size="xs" fw={500} truncate>
-                            {entry.name}
-                          </Text>
-                          <Text size="xs" c="dimmed" truncate>
-                            {systemName}
-                          </Text>
-                        </Stack>
-                      </Group>
-                      <Stack gap={0} align="flex-end" style={{ flexShrink: 0 }}>
-                        <Badge size="xs" variant="dot" color={isResolved ? "green" : "red"}>
-                          {isResolved ? t("resolved") : t("status.triggered")}
-                        </Badge>
-                        <Text size="10px" c="dimmed">
-                          {dayjs(entry.created).fromNow()}
+              {history.map((entry) => {
+                const systemName = systemNameMap[entry.system] ?? entry.system;
+                const isResolved = !!entry.resolved;
+                const HistoryIcon = alertIconMap[entry.name] ?? Server;
+                return (
+                  <Group key={entry._key} justify="space-between" wrap="nowrap" gap="xs" pl={4}>
+                    <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
+                      <Box
+                        w={3}
+                        h={24}
+                        style={{ borderRadius: 2, flexShrink: 0 }}
+                        bg={isResolved ? "green.6" : "red.6"}
+                      />
+                      <HistoryIcon size={12} opacity={0.5} style={{ flexShrink: 0 }} />
+                      <Stack gap={0} style={{ minWidth: 0 }}>
+                        <Text size="xs" fw={500} truncate>
+                          {entry.name}
+                        </Text>
+                        <Text size="xs" c="dimmed" truncate>
+                          {systemName}
                        </Text>
                      </Stack>
                    </Group>
-                  );
-                })}
-              </Stack>
-            </>
-          )}
-        </Stack>
-      </ScrollArea>
-    </Box>
+                    <Stack gap={0} align="flex-end" style={{ flexShrink: 0 }}>
+                      <Badge size="xs" variant="dot" color={isResolved ? "green" : "red"}>
+                        {isResolved ? t("resolved") : t("status.triggered")}
+                      </Badge>
+                      <Text size="10px" c="dimmed">
+                        {dayjs(entry.created).fromNow()}
+                      </Text>
+                    </Stack>
+                  </Group>
+                );
+              })}
+            </Stack>
+          </>
+        )}
+      </Stack>
+    </ScrollArea>
  );
 }

@@ -1,7 +0,0 @@
-.clickableCard {
-  transition: background-color 150ms;
-}
-
-.clickableCard:hover {
-  background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
-}
@@ -1,7 +1,7 @@
 "use client";

 import type { MantineSize } from "@mantine/core";
-import { Badge, Box, Card, Center, Group, Loader, Progress, Text, Stack } from "@mantine/core";
+import { Badge, Box, Card, Group, Progress, Text, Stack } from "@mantine/core";
 import {
  Activity,
  Battery,
@@ -15,22 +15,16 @@ import {
  Thermometer,
  Wifi,
 } from "lucide-react";
-import { IconServerOff } from "@tabler/icons-react";

 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
-import { useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";

-import classes from "./component.module.css";
-
 import type { WidgetComponentProps } from "../definition";
 import type { BeszelSystemRow } from "../beszel/_shared/types";
 import { statusColorMap, thresholdColor } from "../beszel/_shared/colors";
 import { formatByteRate, formatLoadAvg, formatPercent, formatTemp, formatUptime } from "../beszel/_shared/format";
 import { useBeszelFilteredSystems, useBeszelSystemsSubscription } from "../beszel/_shared/hooks";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
-import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";

 interface SizeConfig {
  iconSize: number;
@@ -160,7 +154,6 @@ interface SystemCardProps {
  size: SizeConfig;
  maxMetrics: number;
  itemRadius: MantineSize;
-  onClick?: () => void;
 }

 const metricRenderers = [
@@ -317,7 +310,7 @@ const metricRenderers = [
  },
 ] as const;

-const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick }: SystemCardProps) => {
+const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius }: SystemCardProps) => {
  const visibleMetrics = metricRenderers.filter((m) => m.visible(system, options)).slice(0, maxMetrics);

  return (
@@ -326,14 +319,11 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
      radius={itemRadius}
      bg="transparent"
      h="100%"
-      onClick={onClick}
-      className={onClick ? classes.clickableCard : undefined}
      style={{
        overflow: "hidden",
        display: "flex",
        flexDirection: "column" as const,
        border: "0.0625rem solid var(--border-color)",
-        cursor: onClick ? "pointer" : undefined,
      }}
    >
      <Group gap="xs" mb={2}>
@@ -363,13 +353,8 @@ export default function BeszelSystemGridWidget({
 }: WidgetComponentProps<"beszelSystemGrid">) {
  const t = useScopedI18n("widget.beszelSystemGrid");
  const board = useRequiredBoard();
-  const { openModal } = useModalAction(BeszelSystemStatsModal);

-  const {
-    data: results = [],
-    error: systemsError,
-    isPending,
-  } = clientApi.widget.beszel.getSystems.useQuery(
+  const { data: results = [], error: systemsError } = clientApi.widget.beszel.getSystems.useQuery(
    { integrationIds },
    { staleTime: 5_000, refetchInterval: 5_000, retry: false },
  );
@@ -379,30 +364,6 @@ export default function BeszelSystemGridWidget({

  if (systemsError) throw systemsError;

-  if (isPending) {
-    return (
-      <Center h="100%">
-        <Loader size="sm" />
-      </Center>
-    );
-  }
-
-  if (filteredSystems.length === 0) {
-    return (
-      <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-        <BeszelIntegrationErrorIndicator results={results} />
-        <Center h="100%">
-          <Stack align="center" gap="xs">
-            <IconServerOff size={28} opacity={0.5} />
-            <Text size="sm" c="dimmed">
-              {t("empty.noSystems")}
-            </Text>
-          </Stack>
-        </Center>
-      </Box>
-    );
-  }
-
  const cols = getColCount(width, filteredSystems.length);
  const rows = Math.ceil(filteredSystems.length / cols) || 1;
  const rawCellHeight = height / rows;
@@ -413,37 +374,28 @@ export default function BeszelSystemGridWidget({
  const maxMetrics = getMaxVisibleMetrics(effectiveCellHeight, size);

  return (
-    <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-      <BeszelIntegrationErrorIndicator results={results} />
-      <Box
-        h="100%"
-        style={{
-          display: "grid",
-          gridTemplateColumns: `repeat(${cols}, 1fr)`,
-          gridTemplateRows: scrollEnabled ? `repeat(${rows}, ${MIN_CELL_HEIGHT}px)` : `repeat(${rows}, 1fr)`,
-          gap: size.gap,
-          overflow: scrollEnabled ? "auto" : "hidden",
-        }}
-      >
-        {filteredSystems.map((system) => {
-          const integrationId = system._key.split(":")[0] ?? "";
-          const handleClick = isEditMode
-            ? undefined
-            : () => openModal({ integrationId, systemId: system.id }, { title: system.name });
-          return (
-            <SystemCard
-              key={system._key}
-              system={system}
-              options={options}
-              t={t}
-              size={size}
-              maxMetrics={maxMetrics}
-              itemRadius={board.itemRadius}
-              onClick={handleClick}
-            />
-          );
-        })}
-      </Box>
+    <Box
+      h="100%"
+      style={{
+        pointerEvents: isEditMode ? "none" : undefined,
+        display: "grid",
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gridTemplateRows: scrollEnabled ? `repeat(${rows}, ${MIN_CELL_HEIGHT}px)` : `repeat(${rows}, 1fr)`,
+        gap: size.gap,
+        overflow: scrollEnabled ? "auto" : "hidden",
+      }}
+    >
+      {filteredSystems.map((system) => (
+        <SystemCard
+          key={system._key}
+          system={system}
+          options={options}
+          t={t}
+          size={size}
+          maxMetrics={maxMetrics}
+          itemRadius={board.itemRadius}
+        />
+      ))}
    </Box>
  );
 }
@@ -1,8 +1,8 @@
 "use client";

 import { useCallback, useMemo } from "react";
-import { Button, Box, Center, Loader, Menu, ScrollArea, Select, SimpleGrid, Stack, Text } from "@mantine/core";
-import { IconPlugConnectedX, IconServer, IconQuestionMark, IconServerOff } from "@tabler/icons-react";
+import { 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";
 import { useSession } from "@homarr/auth/client";
@@ -15,7 +15,6 @@ import classes from "./component.module.css";

 import type { WidgetComponentProps } from "../definition";
 import { containerColors } from "../beszel/_shared/colors";
-import type { BeszelTimePeriod } from "../beszel/_shared/chart";
 import {
  BeszelChartPanel,
  CPU_Y_AXIS_DOMAIN,
@@ -30,7 +29,6 @@ import {
  formatPercent,
  formatStorageBytes,
 } from "../beszel/_shared/format";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
 import { makeTooltipProps } from "../beszel/_shared/tooltip";
 import { useLiveStats } from "../beszel/_shared/use-live-stats";

@@ -99,18 +97,13 @@ export default function BeszelSystemStatsWidget({
      timePeriod: options.timePeriod as "1m" | "1h" | "12h" | "24h" | "1w" | "30d",
      includeDocker: showDocker,
    },
-    {
-      staleTime: 30 * 1000,
-      refetchInterval: isLive ? false : 5_000,
-      enabled: !isLive && systemReady && selectedSystem !== "",
-      retry: false,
-    },
+    { staleTime: 30 * 1000, enabled: !isLive && systemReady && selectedSystem !== "", retry: false },
  );

  const { data: liveData, error: liveError } = useLiveStats(integrationIds, selectedSystem, isLive && systemReady);

  let activeStats:
-    | { systemStats: BeszelSystemStatsRecord[]; containerStats: BeszelContainerStatsRecord[]; error?: string }
+    | { systemStats: BeszelSystemStatsRecord[]; containerStats: BeszelContainerStatsRecord[] }
    | null
    | undefined = statsResult;
  if (isLive) {
@@ -160,31 +153,30 @@ export default function BeszelSystemStatsWidget({
  const systemStats = activeStats?.systemStats;
  const containerStatsRaw = activeStats?.containerStats;

-  const timePeriod = options.timePeriod as BeszelTimePeriod;
-  const cpuData = useSystemChartData(statsWhenShown(options.showCpu, systemStats), mappers.cpu, timePeriod);
-  const memoryData = useSystemChartData(statsWhenShown(options.showMemory, systemStats), mappers.memory, timePeriod);
-  const diskData = useSystemChartData(statsWhenShown(options.showDisk, systemStats), mappers.disk, timePeriod);
-  const diskIOData = useSystemChartData(statsWhenShown(options.showDiskIO, systemStats), mappers.diskIO, timePeriod);
-  const networkData = useSystemChartData(statsWhenShown(options.showNetwork, systemStats), mappers.network, timePeriod);
+  const cpuData = useSystemChartData(statsWhenShown(options.showCpu, systemStats), mappers.cpu, isLive);
+  const memoryData = useSystemChartData(statsWhenShown(options.showMemory, systemStats), mappers.memory, isLive);
+  const diskData = useSystemChartData(statsWhenShown(options.showDisk, systemStats), mappers.disk, isLive);
+  const diskIOData = useSystemChartData(statsWhenShown(options.showDiskIO, systemStats), mappers.diskIO, isLive);
+  const networkData = useSystemChartData(statsWhenShown(options.showNetwork, systemStats), mappers.network, isLive);

  const containerNames = useContainerNames(statsWhenShown(showDocker, containerStatsRaw));
  const dockerCpuData = useDockerChartData(
    statsWhenShown(options.showDockerCpu, containerStatsRaw),
    containerNames,
    "cpu",
-    timePeriod,
+    isLive,
  );
  const dockerMemData = useDockerChartData(
    statsWhenShown(options.showDockerMemory, containerStatsRaw),
    containerNames,
    "memory",
-    timePeriod,
+    isLive,
  );
  const dockerNetData = useDockerChartData(
    statsWhenShown(options.showDockerNetwork, containerStatsRaw),
    containerNames,
    "network",
-    timePeriod,
+    isLive,
  );

  const containerSeries = useMemo(
@@ -197,30 +189,6 @@ export default function BeszelSystemStatsWidget({
  if (systemsError) throw systemsError;
  if (!isLive && statsError) throw statsError;

-  if (systemsPending) {
-    return (
-      <Center h="100%">
-        <Loader size="sm" />
-      </Center>
-    );
-  }
-
-  if (systems.length === 0) {
-    return (
-      <Box h="100%" pos="relative">
-        <BeszelIntegrationErrorIndicator results={systemsResult} />
-        <Center h="100%">
-          <Stack align="center" gap="xs">
-            <IconServerOff size={28} opacity={0.5} />
-            <Text size="sm" c="dimmed">
-              {t("empty.noSystems")}
-            </Text>
-          </Stack>
-        </Center>
-      </Box>
-    );
-  }
-
  if (!systemsPending && !systemExists && systems.length > 0) {
    return (
      <Center h="100%">
@@ -258,186 +226,164 @@ export default function BeszelSystemStatsWidget({
  }

  return (
-    <Box h="100%" pos="relative">
-      <Box pos="absolute" top={4} right={8} style={{ zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={systemsResult} />
-      </Box>
-      <ScrollArea
-        h="100%"
-        className={classes.beszelStatsContainer}
-        style={{ pointerEvents: (isEditMode && "none") || undefined }}
-      >
-        <Stack gap="md" p="sm">
-          {!isEditMode && systems.length > 1 && (
-            <Menu position="bottom-start" withArrow shadow="md" withinPortal>
-              <Menu.Target>
-                <Button
-                  variant="default"
-                  size="compact-xs"
-                  leftSection={<IconServer size={14} />}
-                  className={classes.beszelStatsSystemToggle}
+    <ScrollArea
+      h="100%"
+      className={classes.beszelStatsContainer}
+      style={{ pointerEvents: (isEditMode && "none") || undefined }}
+    >
+      <Stack gap="md" p="sm">
+        {!isEditMode && systems.length > 1 && (
+          <Menu position="bottom-start" withArrow shadow="md" withinPortal>
+            <Menu.Target>
+              <Button
+                variant="default"
+                size="compact-xs"
+                leftSection={<IconServer size={14} />}
+                className={classes.beszelStatsSystemToggle}
+              >
+                {selectedLabel}
+              </Button>
+            </Menu.Target>
+            <Menu.Dropdown>
+              {systems.map((s) => (
+                <Menu.Item
+                  key={s.value}
+                  fz="xs"
+                  fw={s.value === selectedSystem ? 600 : 400}
+                  c={s.value !== selectedSystem ? "dimmed" : undefined}
+                  onClick={() => handleSelectSystem(s.value)}
                >
-                  {selectedLabel}
-                </Button>
-              </Menu.Target>
-              <Menu.Dropdown>
-                {systems.map((s) => (
-                  <Menu.Item
-                    key={s.value}
-                    fz="xs"
-                    fw={s.value === selectedSystem ? 600 : 400}
-                    c={s.value !== selectedSystem ? "dimmed" : undefined}
-                    onClick={() => handleSelectSystem(s.value)}
-                  >
-                    {s.label}
-                  </Menu.Item>
-                ))}
-              </Menu.Dropdown>
-            </Menu>
-          )}
+                  {s.label}
+                </Menu.Item>
+              ))}
+            </Menu.Dropdown>
+          </Menu>
+        )}

-          {!isLive && !activeStats && systemReady && selectedSystem !== "" && (
-            <Center h={CHART_HEIGHT}>
-              <Loader size="sm" />
-            </Center>
-          )}
+        {activeStats && (
+          <SimpleGrid cols={cols} spacing="md">
+            {options.showCpu && cpuData.length > 0 && (
+              <BeszelChartPanel
+                title={t("chart.cpu.title")}
+                subtitle={t("chart.cpu.subtitle")}
+                chartProps={{
+                  h: CHART_HEIGHT,
+                  data: cpuData,
+                  series: series.cpu,
+                  yAxisFormatter: chartAxisFormatters.percent,
+                  yAxisDomain: CPU_Y_AXIS_DOMAIN,
+                  tooltipProps: tooltipPercent,
+                }}
+              />
+            )}

-          {!isLive && activeStats && "error" in activeStats && activeStats.error && (
-            <Center h={CHART_HEIGHT}>
-              <Stack align="center" gap="xs">
-                <IconServerOff size={24} opacity={0.5} />
-                <Text size="sm" c="dimmed">
-                  {activeStats.error}
-                </Text>
-              </Stack>
-            </Center>
-          )}
+            {options.showMemory && memoryData.length > 0 && (
+              <BeszelChartPanel
+                title={t("chart.memory.title")}
+                subtitle={t("chart.memory.subtitle")}
+                chartProps={{
+                  h: CHART_HEIGHT,
+                  data: memoryData,
+                  type: "stacked",
+                  series: series.memory,
+                  yAxisFormatter: chartAxisFormatters.gb,
+                  tooltipProps: tooltipGB,
+                }}
+              />
+            )}

-          {activeStats && (!("error" in activeStats) || !activeStats.error) && (
-            <SimpleGrid cols={cols} spacing="md">
-              {options.showCpu && cpuData.length > 0 && (
-                <BeszelChartPanel
-                  title={t("chart.cpu.title")}
-                  subtitle={t("chart.cpu.subtitle")}
-                  chartProps={{
-                    h: CHART_HEIGHT,
-                    data: cpuData,
-                    series: series.cpu,
-                    yAxisFormatter: chartAxisFormatters.percent,
-                    yAxisDomain: CPU_Y_AXIS_DOMAIN,
-                    tooltipProps: tooltipPercent,
-                  }}
-                />
-              )}
+            {options.showDisk && diskData.length > 0 && (
+              <BeszelChartPanel
+                title={t("chart.disk.title")}
+                subtitle={t("chart.disk.subtitle")}
+                chartProps={{
+                  h: CHART_HEIGHT,
+                  data: diskData,
+                  series: series.disk,
+                  yAxisFormatter: chartAxisFormatters.gb,
+                  tooltipProps: tooltipGB,
+                }}
+              />
+            )}

-              {options.showMemory && memoryData.length > 0 && (
-                <BeszelChartPanel
-                  title={t("chart.memory.title")}
-                  subtitle={t("chart.memory.subtitle")}
-                  chartProps={{
-                    h: CHART_HEIGHT,
-                    data: memoryData,
-                    type: "stacked",
-                    series: series.memory,
-                    yAxisFormatter: chartAxisFormatters.gb,
-                    tooltipProps: tooltipGB,
-                  }}
-                />
-              )}
+            {options.showDiskIO && diskIOData.length > 0 && (
+              <BeszelChartPanel
+                title={t("chart.diskIO.title")}
+                subtitle={t("chart.diskIO.subtitle")}
+                chartProps={{
+                  h: CHART_HEIGHT,
+                  data: diskIOData,
+                  series: series.diskIO,
+                  yAxisFormatter: chartAxisFormatters.rate,
+                  tooltipProps: tooltipRate,
+                }}
+              />
+            )}

-              {options.showDisk && diskData.length > 0 && (
-                <BeszelChartPanel
-                  title={t("chart.disk.title")}
-                  subtitle={t("chart.disk.subtitle")}
-                  chartProps={{
-                    h: CHART_HEIGHT,
-                    data: diskData,
-                    series: series.disk,
-                    yAxisFormatter: chartAxisFormatters.gb,
-                    tooltipProps: tooltipGB,
-                  }}
-                />
-              )}
+            {options.showNetwork && networkData.length > 0 && (
+              <BeszelChartPanel
+                title={t("chart.network.title")}
+                subtitle={t("chart.network.subtitle")}
+                chartProps={{
+                  h: CHART_HEIGHT,
+                  data: networkData,
+                  series: series.network,
+                  yAxisFormatter: chartAxisFormatters.rate,
+                  tooltipProps: tooltipRate,
+                }}
+              />
+            )}

-              {options.showDiskIO && diskIOData.length > 0 && (
-                <BeszelChartPanel
-                  title={t("chart.diskIO.title")}
-                  subtitle={t("chart.diskIO.subtitle")}
-                  chartProps={{
-                    h: CHART_HEIGHT,
-                    data: diskIOData,
-                    series: series.diskIO,
-                    yAxisFormatter: chartAxisFormatters.rate,
-                    tooltipProps: tooltipRate,
-                  }}
-                />
-              )}
+            {showDocker && containerSeries.length > 0 && (
+              <>
+                {options.showDockerCpu && dockerCpuData.length > 0 && (
+                  <BeszelChartPanel
+                    title={t("chart.dockerCpu.title")}
+                    subtitle={t("chart.dockerCpu.subtitle")}
+                    chartProps={{
+                      h: CHART_HEIGHT,
+                      data: dockerCpuData,
+                      type: "stacked",
+                      series: containerSeries,
+                      yAxisFormatter: chartAxisFormatters.percent,
+                      tooltipProps: tooltipPercentTotal,
+                    }}
+                  />
+                )}

-              {options.showNetwork && networkData.length > 0 && (
-                <BeszelChartPanel
-                  title={t("chart.network.title")}
-                  subtitle={t("chart.network.subtitle")}
-                  chartProps={{
-                    h: CHART_HEIGHT,
-                    data: networkData,
-                    series: series.network,
-                    yAxisFormatter: chartAxisFormatters.rate,
-                    tooltipProps: tooltipRate,
-                  }}
-                />
-              )}
+                {options.showDockerMemory && dockerMemData.length > 0 && (
+                  <BeszelChartPanel
+                    title={t("chart.dockerMemory.title")}
+                    subtitle={t("chart.dockerMemory.subtitle")}
+                    chartProps={{
+                      h: CHART_HEIGHT,
+                      data: dockerMemData,
+                      type: "stacked",
+                      series: containerSeries,
+                      yAxisFormatter: chartAxisFormatters.bytes,
+                      tooltipProps: tooltipBytesTotal,
+                    }}
+                  />
+                )}

-              {showDocker && containerSeries.length > 0 && (
-                <>
-                  {options.showDockerCpu && dockerCpuData.length > 0 && (
-                    <BeszelChartPanel
-                      title={t("chart.dockerCpu.title")}
-                      subtitle={t("chart.dockerCpu.subtitle")}
-                      chartProps={{
-                        h: CHART_HEIGHT,
-                        data: dockerCpuData,
-                        type: "stacked",
-                        series: containerSeries,
-                        yAxisFormatter: chartAxisFormatters.percent,
-                        tooltipProps: tooltipPercentTotal,
-                      }}
-                    />
-                  )}
-
-                  {options.showDockerMemory && dockerMemData.length > 0 && (
-                    <BeszelChartPanel
-                      title={t("chart.dockerMemory.title")}
-                      subtitle={t("chart.dockerMemory.subtitle")}
-                      chartProps={{
-                        h: CHART_HEIGHT,
-                        data: dockerMemData,
-                        type: "stacked",
-                        series: containerSeries,
-                        yAxisFormatter: chartAxisFormatters.bytes,
-                        tooltipProps: tooltipBytesTotal,
-                      }}
-                    />
-                  )}
-
-                  {options.showDockerNetwork && dockerNetData.length > 0 && (
-                    <BeszelChartPanel
-                      title={t("chart.dockerNetwork.title")}
-                      subtitle={t("chart.dockerNetwork.subtitle")}
-                      chartProps={{
-                        h: CHART_HEIGHT,
-                        data: dockerNetData,
-                        series: containerSeries,
-                        yAxisFormatter: chartAxisFormatters.rate,
-                        tooltipProps: tooltipRate,
-                      }}
-                    />
-                  )}
-                </>
-              )}
-            </SimpleGrid>
-          )}
-        </Stack>
-      </ScrollArea>
-    </Box>
+                {options.showDockerNetwork && dockerNetData.length > 0 && (
+                  <BeszelChartPanel
+                    title={t("chart.dockerNetwork.title")}
+                    subtitle={t("chart.dockerNetwork.subtitle")}
+                    chartProps={{
+                      h: CHART_HEIGHT,
+                      data: dockerNetData,
+                      series: containerSeries,
+                      yAxisFormatter: chartAxisFormatters.rate,
+                      tooltipProps: tooltipRate,
+                    }}
+                  />
+                )}
+              </>
+            )}
+          </SimpleGrid>
+        )}
+      </Stack>
+    </ScrollArea>
  );
 }
@@ -3,7 +3,7 @@
 import "./styles.css";

 import { useMemo, useState } from "react";
-import { Center, Group, Indicator, Loader, Progress, Text } from "@mantine/core";
+import { Group, Indicator, Progress, Text } from "@mantine/core";
 import type { DataTableColumn, DataTableSortStatus } from "mantine-datatable";
 import { DataTable } from "mantine-datatable";
 import {
@@ -20,7 +20,6 @@ import {
 } from "lucide-react";

 import { clientApi } from "@homarr/api/client";
-import { useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";

 import type { WidgetComponentProps } from "../definition";
@@ -28,8 +27,6 @@ import type { BeszelSystemRow } from "../beszel/_shared/types";
 import { loadAvgColor, statusColorMap, thresholdColor } from "../beszel/_shared/colors";
 import { formatByteRate, formatLoadAvg, formatPercent, formatTemp, formatUptime } from "../beszel/_shared/format";
 import { useBeszelFilteredSystems, useBeszelSystemsSubscription } from "../beszel/_shared/hooks";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
-import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";

 const directionMultiplier: Record<string, number> = { asc: 1, desc: -1 };

@@ -69,12 +66,7 @@ export default function BeszelSystemTableWidget({
  width,
 }: WidgetComponentProps<"beszelSystemTable">) {
  const t = useScopedI18n("widget.beszelSystemTable");
-  const { openModal } = useModalAction(BeszelSystemStatsModal);
-  const {
-    data: results = [],
-    error: systemsError,
-    isPending,
-  } = clientApi.widget.beszel.getSystems.useQuery(
+  const { data: results = [], error: systemsError } = clientApi.widget.beszel.getSystems.useQuery(
    { integrationIds },
    { staleTime: 5_000, refetchInterval: 5_000, retry: false },
  );
@@ -263,42 +255,23 @@ export default function BeszelSystemTableWidget({
    return cols.filter(Boolean) as DataTableColumn<SystemRowWithKey>[];
  }, [options, t, size]);

-  const handleRowClick = ({ record }: { record: SystemRowWithKey }) => {
-    const integrationId = record._key.split(":")[0] ?? "";
-    openModal({ integrationId, systemId: record.id }, { title: record.name });
-  };
-
  if (systemsError) throw systemsError;

-  if (isPending) {
-    return (
-      <Center h="100%">
-        <Loader size="sm" />
-      </Center>
-    );
-  }
-
  return (
-    <div style={{ position: "relative", height: "100%" }}>
-      <div style={{ position: "absolute", top: 4, right: 8, zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={results} />
-      </div>
-      <DataTable
-        style={{ pointerEvents: isEditMode ? "none" : undefined }}
-        withTableBorder={false}
-        borderRadius={0}
-        highlightOnHover
-        fz={size.fontSize}
-        records={sortedSystems}
-        columns={columns}
-        sortStatus={sortStatus}
-        onSortStatusChange={setSortStatus}
-        noRecordsText={t("noRecords")}
-        idAccessor="_key"
-        height="100%"
-        className="beszel-table"
-        onRowClick={isEditMode ? undefined : handleRowClick}
-      />
-    </div>
+    <DataTable
+      style={{ pointerEvents: isEditMode ? "none" : undefined }}
+      withTableBorder={false}
+      borderRadius={0}
+      highlightOnHover
+      fz={size.fontSize}
+      records={sortedSystems}
+      columns={columns}
+      sortStatus={sortStatus}
+      onSortStatusChange={setSortStatus}
+      noRecordsText={t("noRecords")}
+      idAccessor="_key"
+      height="100%"
+      className="beszel-table"
+    />
  );
 }
@@ -6,23 +6,14 @@
 .beszel-table .mantine-datatable-table thead,
 .beszel-table .mantine-datatable-table tbody,
 .beszel-table .mantine-datatable-table tfoot,
+.beszel-table .mantine-datatable-table tr,
 .beszel-table th,
 .beszel-table td {
  background-color: transparent !important;
 }

-.beszel-table .mantine-datatable-table tr {
-  background-color: transparent;
-}
-
-.beszel-table .mantine-datatable-table tbody tr:hover {
-  background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
-}
-
 .beszel-table th {
  white-space: nowrap;
-  background-color: color-mix(in srgb, var(--mantine-color-body) 60%, transparent) !important;
-  backdrop-filter: blur(8px);
 }

 .beszel-table td {
@@ -8,46 +8,14 @@ import dayjs from "dayjs";

 import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homarr/integrations/types";

-export type BeszelTimePeriod = "1m" | "1h" | "12h" | "24h" | "1w" | "30d";
+const formatTime = (timestamp: string) => dayjs(timestamp).format("HH:mm");
+const formatTimeLive = (timestamp: string) => dayjs(timestamp).format("HH:mm:ss");

-const timeFormats: Record<BeszelTimePeriod, string> = {
-  "1m": "HH:mm:ss",
-  "1h": "HH:mm",
-  "12h": "HH:mm",
-  "24h": "HH:mm",
-  "1w": "MMM D",
-  "30d": "MMM D",
-};
-
-const periodDays: Partial<Record<BeszelTimePeriod, number>> = { "1w": 7, "30d": 30 };
-
-function prepareRecords<T>(records: T[], timePeriod: BeszelTimePeriod) {
-  const fmt = (timestamp: string) => dayjs(timestamp).format(timeFormats[timePeriod]);
-  if (timePeriod === "1m") {
-    return { fmt, ordered: records };
+function prepareRecords<T>(records: T[], live: boolean) {
+  if (live) {
+    return { fmt: formatTimeLive, ordered: records };
  }
-  return { fmt, ordered: [...records].toReversed() };
-}
-
-function padTimeGrid(data: Record<string, unknown>[], timePeriod: BeszelTimePeriod) {
-  const days = periodDays[timePeriod];
-  if (!days) return data;
-
-  const fmt = (ts: string) => dayjs(ts).format(timeFormats[timePeriod]);
-  const now = dayjs();
-  const existingDays = new Set(data.map((d) => dayjs(d.rawTime as string).format("YYYY-MM-DD")));
-  const result = [...data];
-
-  for (let i = days; i >= 0; i--) {
-    const d = now.subtract(i, "day").startOf("day");
-    const key = d.format("YYYY-MM-DD");
-    if (!existingDays.has(key)) {
-      const iso = d.toISOString();
-      result.push({ time: fmt(iso), rawTime: iso });
-    }
-  }
-
-  return result.toSorted((a, b) => new Date(a.rawTime as string).getTime() - new Date(b.rawTime as string).getTime());
+  return { fmt: formatTime, ordered: [...records].toReversed() };
 }

 const yAxisBase = { tickMargin: 0, tick: { fontSize: 10 } } as const;
@@ -109,7 +77,7 @@ const BeszelAreaChart = memo(
        dataKey="time"
        curveType="monotone"
        withGradient={false}
-        connectNulls={false}
+        connectNulls
        withDots={false}
        type={type}
        strokeWidth={1}
@@ -128,18 +96,16 @@ const BeszelAreaChart = memo(
 export const useSystemChartData = (
  systemStats: BeszelSystemStatsRecord[] | undefined,
  mapFn: (stats: BeszelSystemStatsRecord["stats"]) => Record<string, unknown>,
-  timePeriod: BeszelTimePeriod = "1h",
+  live = false,
 ) =>
  useMemo(() => {
    if (!systemStats) return [];
-    const { fmt, ordered } = prepareRecords(systemStats, timePeriod);
-    const mapped = ordered.map((r) => ({
+    const { fmt, ordered } = prepareRecords(systemStats, live);
+    return ordered.map((r) => ({
      time: fmt(r.created),
-      rawTime: r.created,
      ...mapFn(r.stats),
    }));
-    return padTimeGrid(mapped, timePeriod);
-  }, [systemStats, mapFn, timePeriod]);
+  }, [systemStats, mapFn, live]);

 export const useContainerNames = (containerStats: BeszelContainerStatsRecord[] | undefined, max = 15) => {
  const prevRef = useRef<string[]>([]);
@@ -178,20 +144,19 @@ export const useDockerChartData = (
  containerStats: BeszelContainerStatsRecord[] | undefined,
  containerNames: string[],
  metric: "cpu" | "memory" | "network",
-  timePeriod: BeszelTimePeriod = "1h",
+  live = false,
 ) =>
  useMemo(() => {
    if (!containerStats?.length) return [];
    const extract = defaultContainerExtractors[metric];
    if (!extract) return [];
-    const { fmt, ordered } = prepareRecords(containerStats, timePeriod);
-    const mapped = ordered.map((record) => {
-      const point: Record<string, unknown> = { time: fmt(record.created), rawTime: record.created };
+    const { fmt, ordered } = prepareRecords(containerStats, live);
+    return ordered.map((record) => {
+      const point: Record<string, unknown> = { time: fmt(record.created) };
      const byName = new Map(record.stats.map((c) => [c.n, c]));
      for (const name of containerNames) {
        point[name] = extract(byName.get(name));
      }
      return point;
    });
-    return padTimeGrid(mapped, timePeriod);
-  }, [containerStats, containerNames, metric, timePeriod]);
+  }, [containerStats, containerNames, metric, live]);
@@ -1,25 +0,0 @@
-"use client";
-
-import { Tooltip } from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
-
-interface IntegrationResult {
-  integrationId: string;
-  integrationName?: string;
-  error?: string;
-}
-
-interface BeszelIntegrationErrorIndicatorProps {
-  results: IntegrationResult[];
-}
-
-export function BeszelIntegrationErrorIndicator({ results }: BeszelIntegrationErrorIndicatorProps) {
-  const failed = results.filter((r) => "error" in r && r.error);
-  if (failed.length === 0) return null;
-  const label = failed.map((r) => r.integrationName ?? r.integrationId).join(", ");
-  return (
-    <Tooltip label={label} position="left" withArrow>
-      <IconAlertTriangle size={14} color="var(--mantine-color-orange-6)" style={{ cursor: "help", flexShrink: 0 }} />
-    </Tooltip>
-  );
-}
@@ -31,10 +31,7 @@ export const useBeszelFilteredSystems = (
  statusFilter: string,
 ): SystemRowWithKey[] => {
  const allSystems = useMemo(
-    () =>
-      results
-        .flatMap((r) => r.systems.map((s) => ({ ...s, _key: `${r.integrationId}:${s.id}` })))
-        .toSorted((a, b) => a.name.localeCompare(b.name)),
+    () => results.flatMap((r) => r.systems.map((s) => ({ ...s, _key: `${r.integrationId}:${s.id}` }))),
    [results],
  );

@@ -1,173 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { SegmentedControl, SimpleGrid, Stack } from "@mantine/core";
-
-import { clientApi } from "@homarr/api/client";
-import { createModal } from "@homarr/modals";
-import { useScopedI18n } from "@homarr/translation/client";
-
-import type { BeszelTimePeriod } from "./chart";
-import { BeszelChartPanel, CPU_Y_AXIS_DOMAIN, useSystemChartData } from "./chart";
-import { chartAxisFormatters, formatByteRate, formatGB, formatPercent } from "./format";
-import { makeTooltipProps } from "./tooltip";
-
-const tooltipPercent = makeTooltipProps(formatPercent);
-const tooltipGB = makeTooltipProps(formatGB, true);
-const tooltipRate = makeTooltipProps(formatByteRate, true);
-
-const CHART_HEIGHT = 180;
-const MB = 1024 * 1024;
-
-const timePeriodOptions: { value: BeszelTimePeriod; label: string }[] = [
-  { value: "1h", label: "1H" },
-  { value: "12h", label: "12H" },
-  { value: "24h", label: "24H" },
-  { value: "1w", label: "1W" },
-  { value: "30d", label: "30D" },
-];
-
-interface BeszelSystemStatsModalProps {
-  integrationId: string;
-  systemId: string;
-}
-
-export const BeszelSystemStatsModal = createModal<BeszelSystemStatsModalProps>(({ innerProps }) => {
-  const t = useScopedI18n("widget.beszelSystemStats");
-  const [timePeriod, setTimePeriod] = useState<BeszelTimePeriod>("1h");
-
-  const { data } = clientApi.widget.beszel.getSystemStats.useQuery(
-    {
-      integrationIds: [innerProps.integrationId],
-      systemId: innerProps.systemId,
-      timePeriod,
-      includeDocker: false,
-    },
-    { staleTime: 30_000 },
-  );
-
-  const mappers = useMemo(
-    () => ({
-      cpu: (s: { cpu: number }) => ({ [t("chart.cpu.series")]: s.cpu }),
-      memory: (s: { mu: number; mb: number }) => ({
-        [t("chart.memory.series")]: s.mu,
-        [t("chart.memory.cache")]: s.mb ?? 0,
-      }),
-      disk: (s: { du: number }) => ({ [t("chart.disk.series")]: s.du }),
-      diskIO: (s: { dr?: number; dw?: number }) => ({
-        [t("chart.diskIO.read")]: (s.dr ?? 0) * MB,
-        [t("chart.diskIO.write")]: (s.dw ?? 0) * MB,
-      }),
-      network: (s: { ns: number; nr: number; b?: [number, number] }) => ({
-        [t("chart.network.sent")]: s.b?.[0] ?? s.ns,
-        [t("chart.network.recv")]: s.b?.[1] ?? s.nr,
-      }),
-    }),
-    [t],
-  );
-
-  const series = useMemo(
-    () => ({
-      cpu: [{ name: t("chart.cpu.series"), color: "teal.6" }],
-      memory: [
-        { name: t("chart.memory.series"), color: "teal.5" },
-        { name: t("chart.memory.cache"), color: "teal.8" },
-      ],
-      disk: [{ name: t("chart.disk.series"), color: "grape.6" }],
-      diskIO: [
-        { name: t("chart.diskIO.write"), color: "orange.6" },
-        { name: t("chart.diskIO.read"), color: "blue.6" },
-      ],
-      network: [
-        { name: t("chart.network.sent"), color: "blue.6" },
-        { name: t("chart.network.recv"), color: "teal.6" },
-      ],
-    }),
-    [t],
-  );
-
-  const systemStats = data?.systemStats;
-  const cpuData = useSystemChartData(systemStats, mappers.cpu, timePeriod);
-  const memoryData = useSystemChartData(systemStats, mappers.memory, timePeriod);
-  const diskData = useSystemChartData(systemStats, mappers.disk, timePeriod);
-  const diskIOData = useSystemChartData(systemStats, mappers.diskIO, timePeriod);
-  const networkData = useSystemChartData(systemStats, mappers.network, timePeriod);
-
-  return (
-    <Stack gap="md">
-      <SegmentedControl
-        size="xs"
-        value={timePeriod}
-        onChange={(v) => setTimePeriod(v as BeszelTimePeriod)}
-        data={timePeriodOptions}
-      />
-      <SimpleGrid cols={2} spacing="md">
-        {cpuData.length > 0 && (
-          <BeszelChartPanel
-            title={t("chart.cpu.title")}
-            chartProps={{
-              h: CHART_HEIGHT,
-              data: cpuData,
-              series: series.cpu,
-              yAxisFormatter: chartAxisFormatters.percent,
-              yAxisDomain: CPU_Y_AXIS_DOMAIN,
-              tooltipProps: tooltipPercent,
-            }}
-          />
-        )}
-        {memoryData.length > 0 && (
-          <BeszelChartPanel
-            title={t("chart.memory.title")}
-            chartProps={{
-              h: CHART_HEIGHT,
-              data: memoryData,
-              type: "stacked",
-              series: series.memory,
-              yAxisFormatter: chartAxisFormatters.gb,
-              tooltipProps: tooltipGB,
-            }}
-          />
-        )}
-        {diskData.length > 0 && (
-          <BeszelChartPanel
-            title={t("chart.disk.title")}
-            chartProps={{
-              h: CHART_HEIGHT,
-              data: diskData,
-              series: series.disk,
-              yAxisFormatter: chartAxisFormatters.gb,
-              tooltipProps: tooltipGB,
-            }}
-          />
-        )}
-        {diskIOData.length > 0 && (
-          <BeszelChartPanel
-            title={t("chart.diskIO.title")}
-            chartProps={{
-              h: CHART_HEIGHT,
-              data: diskIOData,
-              series: series.diskIO,
-              yAxisFormatter: chartAxisFormatters.rate,
-              tooltipProps: tooltipRate,
-            }}
-          />
-        )}
-        {networkData.length > 0 && (
-          <BeszelChartPanel
-            title={t("chart.network.title")}
-            chartProps={{
-              h: CHART_HEIGHT,
-              data: networkData,
-              series: series.network,
-              yAxisFormatter: chartAxisFormatters.rate,
-              tooltipProps: tooltipRate,
-            }}
-          />
-        )}
-      </SimpleGrid>
-    </Stack>
-  );
-}).withOptions({
-  defaultTitle: (t) => t("widget.beszelSystemStats.name"),
-  size: 1200,
-});
@@ -3,10 +3,6 @@
 import type { CSSProperties } from "react";
 import { createPortal } from "react-dom";
 import { useCallback, useEffect, useRef, useState } from "react";
-import dayjs from "dayjs";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-
-dayjs.extend(localizedFormat);

 const styles: Record<string, CSSProperties> = {
  wrapper: {
@@ -44,7 +40,6 @@ export interface TooltipPayloadItem {
  value: number;
  color: string;
  dataKey: string;
-  payload?: Record<string, unknown>;
 }

 interface PortalTooltipProps {
@@ -55,39 +50,16 @@ interface PortalTooltipProps {
  showTotal?: boolean;
 }

-const MARGIN = 14;
-
 const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }: PortalTooltipProps) => {
  const mouseRef = useRef({ x: 0, y: 0 });
-  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  const rafRef = useRef(0);
-  const tooltipRef = useRef<HTMLDivElement>(null);

  const handleMouse = useCallback((e: MouseEvent) => {
    mouseRef.current = { x: e.clientX, y: e.clientY };
    cancelAnimationFrame(rafRef.current);
    rafRef.current = requestAnimationFrame(() => {
-      const el = tooltipRef.current;
-      const mx = mouseRef.current.x;
-      const my = mouseRef.current.y;
-
-      if (!el) {
-        setPos({ x: mx + MARGIN, y: my });
-        return;
-      }
-
-      const { width, height } = el.getBoundingClientRect();
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-
-      let x = mx + MARGIN;
-      let y = my - height / 2;
-
-      if (x + width > vw - MARGIN) x = mx - width - MARGIN;
-      if (y < MARGIN) y = MARGIN;
-      if (y + height > vh - MARGIN) y = vh - MARGIN - height;
-
-      setPos({ x, y });
+      setMouse(mouseRef.current);
    });
  }, []);

@@ -112,22 +84,21 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:

  if (!sorted.length) return null;

-  const rawTime = sorted[0]?.payload?.rawTime as string | undefined;
-  const tooltipLabel = rawTime ? dayjs(rawTime).format("MMM D, LT") : label;
  const total = sorted.reduce((sum, p) => sum + p.value, 0);

  const portalStyle: CSSProperties = {
    position: "fixed",
-    left: pos.x,
-    top: pos.y,
+    left: mouse.x + 14,
+    top: mouse.y,
+    transform: "translateY(-50%)",
    zIndex: 10000,
    pointerEvents: "none",
  };

  return createPortal(
-    <div ref={tooltipRef} style={portalStyle}>
+    <div style={portalStyle}>
      <div style={styles.wrapper}>
-        <div style={styles.header}>{tooltipLabel}</div>
+        <div style={styles.header}>{label}</div>
        {sorted.map((item) => (
          <div key={item.dataKey} style={styles.row}>
            <div style={{ ...styles.indicator, background: item.color }} />
@@ -52,22 +52,22 @@ catalog:
  "@testcontainers/mysql": ^12.0.2
  "@testcontainers/postgresql": ^12.0.2
  "@testcontainers/redis": ^12.0.2
-  "@tiptap/extension-color": 3.27.0
-  "@tiptap/extension-highlight": 3.27.0
-  "@tiptap/extension-image": 3.27.0
-  "@tiptap/extension-link": ^3.27.0
-  "@tiptap/extension-placeholder": ^3.27.0
-  "@tiptap/extension-table": 3.27.0
-  "@tiptap/extension-table-cell": 3.27.0
-  "@tiptap/extension-table-header": 3.27.0
-  "@tiptap/extension-table-row": 3.27.0
-  "@tiptap/extension-task-item": 3.27.0
-  "@tiptap/extension-task-list": 3.27.0
-  "@tiptap/extension-text-align": 3.27.0
-  "@tiptap/extension-text-style": 3.27.0
-  "@tiptap/extension-underline": 3.27.0
-  "@tiptap/react": ^3.27.0
-  "@tiptap/starter-kit": ^3.27.0
+  "@tiptap/extension-color": 3.26.1
+  "@tiptap/extension-highlight": 3.26.1
+  "@tiptap/extension-image": 3.26.1
+  "@tiptap/extension-link": ^3.26.1
+  "@tiptap/extension-placeholder": ^3.26.1
+  "@tiptap/extension-table": 3.26.1
+  "@tiptap/extension-table-cell": 3.26.1
+  "@tiptap/extension-table-header": 3.26.1
+  "@tiptap/extension-table-row": 3.26.1
+  "@tiptap/extension-task-item": 3.26.1
+  "@tiptap/extension-task-list": 3.26.1
+  "@tiptap/extension-text-align": 3.26.1
+  "@tiptap/extension-text-style": 3.26.1
+  "@tiptap/extension-underline": 3.26.1
+  "@tiptap/react": ^3.26.1
+  "@tiptap/starter-kit": ^3.26.1
  "@trpc/client": ^11.17.0
  "@trpc/next": ^11.17.0
  "@trpc/react-query": ^11.17.0
@@ -93,7 +93,7 @@ catalog:
  "@types/ws": ^8.18.1
  "@types/xml2js": ^0.4.14
  posthog-js: ^1.255.0
-  posthog-node: ^4.18.0
+  posthog-node: ^4.17.0
  "@vitejs/plugin-react": ^6.0.2
  "@vitest/coverage-v8": ^4.1.8
  "@vitest/ui": ^4.1.8
@@ -138,7 +138,7 @@ catalog:
  jsonpath-plus: ^10.4.0
  ldapts: 8.1.8
  lodash.clonedeep: ^4.5.0
-  lucide-react: ^1.20.0
+  lucide-react: ^1.18.0
  "mantine-contextmenu": ^9.3.0
  mantine-datatable: ^9.3.0
  mantine-react-table: npm:mantine-react-table-open@9.0.3
@@ -180,7 +180,7 @@ catalog:
  vite: ^8.0.16
  undici: 7.27.2
  use-deep-compare-effect: ^1.8.1
-  video.js: ^8.23.8
+  video.js: ^8.23.7
  vite-tsconfig-paths: ^6.1.1
  vitest: ^4.1.8
  winston: 3.19.0
@@ -206,7 +206,7 @@ minimumReleaseAgeExclude:
 overrides:
  "@babel/helpers@<7.26.10": ">=7.29.7"
  "@babel/runtime@<7.26.10": ">=7.29.7"
-  "axios@>=1.0.0 <1.8.2": ">=1.18.0"
+  "axios@>=1.0.0 <1.8.2": ">=1.17.0"
  "brace-expansion@>=2.0.0 <=2.0.1": ">=5.0.6"
  "brace-expansion@>=1.0.0 <=1.1.11": ">=5.0.6"
  "esbuild@<=0.24.2": ">=0.28.0"