chore: reconcile mobile layer after stack rebase

2026-08-14 11:32:09 +02:00
1 parent 4a4b04d471
commit eb918b805a
@@ -59,7 +59,7 @@
  }
 }

-.dynamicTile {
+.containerTile {
  border-style: dashed;
  background: color-mix(in srgb, var(--mantine-color-default) 88%, var(--mantine-primary-color-light));
 }
@@ -1,14 +1,38 @@
 import { describe, expect, test } from "vitest";

 import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
-import { DynamicSectionMockBuilder } from "~/components/board/items/actions/test/mocks/dynamic-section-mock";
+import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
 import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
 import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
 import { getRepresentativeLayoutWidth, projectBoardLayout } from "./_layout-utils";

-const mobile = { id: "mobile", name: "Mobile", columnCount: 3, breakpoint: 0, role: "mobile" as const };
-const custom = { id: "tablet", name: "Tablet", columnCount: 6, breakpoint: 480, role: "custom" as const };
-const base = { id: "base", name: "Base", columnCount: 12, breakpoint: 768, role: "base" as const };
+const mobile = {
+  id: "mobile",
+  name: "Mobile",
+  columnCount: 3,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
+  breakpoint: 0,
+  role: "mobile" as const,
+};
+const custom = {
+  id: "tablet",
+  name: "Tablet",
+  columnCount: 6,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
+  breakpoint: 480,
+  role: "custom" as const,
+};
+const base = {
+  id: "base",
+  name: "Base",
+  columnCount: 12,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
+  breakpoint: 768,
+  role: "base" as const,
+};

 describe("layout representative widths", () => {
  test("uses a phone width, activation midpoint, and desktop minimum", () => {
@@ -22,30 +46,30 @@ describe("layout representative widths", () => {
 describe("projectBoardLayout", () => {
  test("returns exact saved positions without recursively re-projecting the active layout", () => {
    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
-    const dynamicSection = new DynamicSectionMockBuilder({ id: "dynamic" })
+    const container = new ContainerSectionMockBuilder({ id: "container" })
      .addLayout({ layoutId: mobile.id, parentSectionId: rootSection.id, width: 3, height: 2 })
      .build();
-    const board = new BoardMockBuilder().addLayout(mobile).addSections([rootSection, dynamicSection]).build();
+    const board = new BoardMockBuilder().addLayout(mobile).addSections([rootSection, container]).build();

    expect(projectBoardLayout(board, mobile, mobile)).toEqual([
-      expect.objectContaining({ id: dynamicSection.id, sectionId: rootSection.id, width: 3, height: 2 }),
+      expect.objectContaining({ id: container.id, sectionId: rootSection.id, width: 3, height: 2 }),
    ]);
  });

-  test("uses production ordering and sizing for items and dynamic sections", () => {
+  test("uses production ordering and sizing for items and containers", () => {
    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
-    const dynamicSection = new DynamicSectionMockBuilder({ id: "dynamic" })
+    const container = new ContainerSectionMockBuilder({ id: "container" })
      .addLayout({ layoutId: base.id, parentSectionId: rootSection.id, width: 6, height: 3, xOffset: 6, yOffset: 0 })
      .build();
    const rootItem = new ItemMockBuilder({ id: "root-item", kind: "clock" })
      .addLayout({ layoutId: base.id, sectionId: rootSection.id, width: 5, height: 2, xOffset: 0, yOffset: 0 })
      .build();
    const nestedItem = new ItemMockBuilder({ id: "nested-item", kind: "clock" })
-      .addLayout({ layoutId: base.id, sectionId: dynamicSection.id, width: 4, height: 1, xOffset: 0, yOffset: 0 })
+      .addLayout({ layoutId: base.id, sectionId: container.id, width: 4, height: 1, xOffset: 0, yOffset: 0 })
      .build();
    const board = new BoardMockBuilder()
      .addLayout(mobile)
-      .addSections([rootSection, dynamicSection])
+      .addSections([rootSection, container])
      .addItems([rootItem, nestedItem])
      .build();

@@ -59,7 +83,7 @@ describe("projectBoardLayout", () => {
      yOffset: 0,
      sectionId: rootSection.id,
    });
-    expect(projected.find((element) => element.id === dynamicSection.id)).toMatchObject({
+    expect(projected.find((element) => element.id === container.id)).toMatchObject({
      type: "section",
      width: 3,
      xOffset: 0,
@@ -69,7 +93,7 @@ describe("projectBoardLayout", () => {
    expect(projected.find((element) => element.id === nestedItem.id)).toMatchObject({
      type: "item",
      width: 3,
-      sectionId: dynamicSection.id,
+      sectionId: container.id,
    });
  });

@@ -1,9 +1,12 @@
 import { generateResponsiveGridFor } from "@homarr/common";
 import type { GridAlgorithmItem } from "@homarr/common";
+import type { BoardLane } from "@homarr/definitions";
+import { boardLanes, getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";

 import type { Board } from "./_types";

 export type BoardLayout = Board["layouts"][number];
+type LayoutGeometry = Pick<BoardLayout, "id" | "columnCount" | "leftGutterColumnCount" | "rightGutterColumnCount">;

 export const getRepresentativeLayoutWidth = (layout: BoardLayout, allLayouts: BoardLayout[]) => {
  if (layout.role === "mobile") return 390;
@@ -17,28 +20,69 @@ export const getRepresentativeLayoutWidth = (layout: BoardLayout, allLayouts: Bo
  return nextLayout ? Math.round((layout.breakpoint + nextLayout.breakpoint) / 2) : Math.max(1280, layout.breakpoint);
 };

-export const projectBoardLayout = (
-  board: Board,
-  sourceLayout: Pick<BoardLayout, "id" | "columnCount">,
-  targetLayout: Pick<BoardLayout, "id" | "columnCount">,
-) => {
+export const projectBoardLayout = (board: Board, sourceLayout: LayoutGeometry, targetLayout: LayoutGeometry) => {
  const elements = getElementsForLayout(board, sourceLayout.id);

-  if (sourceLayout.id === targetLayout.id && sourceLayout.columnCount === targetLayout.columnCount) {
+  if (
+    sourceLayout.id === targetLayout.id &&
+    sourceLayout.columnCount === targetLayout.columnCount &&
+    sourceLayout.leftGutterColumnCount === targetLayout.leftGutterColumnCount &&
+    sourceLayout.rightGutterColumnCount === targetLayout.rightGutterColumnCount
+  ) {
    return elements;
  }

-  return board.sections
-    .filter((section) => section.kind !== "dynamic")
-    .flatMap(
-      (section) =>
-        generateResponsiveGridFor({
-          items: elements,
-          previousWidth: sourceLayout.columnCount,
-          width: targetLayout.columnCount,
-          sectionId: section.id,
-        }).items,
+  const emptyRoots = board.sections
+    .filter((section) => section.kind === "empty")
+    .toSorted((first, second) => first.xOffset - second.xOffset || first.id.localeCompare(second.id));
+  const rootByLane = new Map<BoardLane, (typeof emptyRoots)[number]>();
+  for (const root of emptyRoots) {
+    const lane = getRootSectionLane(root.xOffset);
+    if (!rootByLane.has(lane)) rootByLane.set(lane, root);
+  }
+
+  const mainRoot = rootByLane.get("main");
+  if (!mainRoot) return [];
+
+  const sourceRootById = new Map(
+    emptyRoots.map((section) => [section.id, getRootSectionLane(section.xOffset)] as const),
+  );
+  const targetLaneBySourceLane = new Map<BoardLane, BoardLane>(
+    boardLanes.map((lane) => [
+      lane,
+      lane !== "main" && getBoardLaneColumnCount(targetLayout, lane) === 0 ? "main" : lane,
+    ]),
+  );
+  const remappedElements = elements.map((element) => {
+    const sourceLane = sourceRootById.get(element.sectionId);
+    if (!sourceLane) return element;
+    const targetLane = targetLaneBySourceLane.get(sourceLane) ?? "main";
+    return { ...element, sectionId: (rootByLane.get(targetLane) ?? mainRoot).id };
+  });
+
+  return boardLanes.flatMap((lane) => {
+    const root = rootByLane.get(lane);
+    const width = getBoardLaneColumnCount(targetLayout, lane);
+    if (!root || width === 0) return [];
+
+    const sourceLanes = boardLanes.filter(
+      (sourceLane) =>
+        rootByLane.has(sourceLane) &&
+        getBoardLaneColumnCount(sourceLayout, sourceLane) > 0 &&
+        targetLaneBySourceLane.get(sourceLane) === lane,
    );
+    const previousWidth =
+      sourceLanes.length === 1
+        ? getBoardLaneColumnCount(sourceLayout, sourceLanes[0] ?? "main")
+        : Number.MAX_SAFE_INTEGER;
+
+    return generateResponsiveGridFor({
+      items: remappedElements,
+      previousWidth,
+      width,
+      sectionId: root.id,
+    }).items;
+  });
 };

 const getElementsForLayout = (board: Board, layoutId: string): GridAlgorithmItem[] => [
@@ -59,7 +103,7 @@ const getElementsForLayout = (board: Board, layoutId: string): GridAlgorithmItem
      : [];
  }),
  ...board.sections.flatMap((section) => {
-    if (section.kind !== "dynamic") return [];
+    if (section.kind !== "container") return [];
    const layout = section.layouts.find((candidate) => candidate.layoutId === layoutId);
    return layout?.parentSectionId
      ? [
@@ -11,10 +11,18 @@ import type { Board } from "./_types";

 interface Props {
  initialBoard: Board;
+  initialLayoutId: string;
+  initialViewportWidth: number;
  canModify: boolean;
 }

-export const BoardProviders = ({ children, initialBoard, canModify }: PropsWithChildren<Props>) => {
+export const BoardProviders = ({
+  children,
+  initialBoard,
+  initialLayoutId,
+  initialViewportWidth,
+  canModify,
+}: PropsWithChildren<Props>) => {
  const searchParams = useSearchParams();
  const isDesktop = useMediaQuery("(min-width: 64em)");
  const requestedLayoutId = searchParams.get("layout");
@@ -23,7 +31,12 @@ export const BoardProviders = ({ children, initialBoard, canModify }: PropsWithC
  const layoutOverrideId = isLayoutEditRequest && isDesktop ? requestedLayoutId : null;

  return (
-    <BoardProvider initialBoard={initialBoard} layoutOverrideId={layoutOverrideId}>
+    <BoardProvider
+      initialBoard={initialBoard}
+      initialLayoutId={initialLayoutId}
+      initialViewportWidth={initialViewportWidth}
+      layoutOverrideId={layoutOverrideId}
+    >
      <EditModeProvider initialOpen={isLayoutEditRequest}>{children}</EditModeProvider>
    </BoardProvider>
  );
@@ -7,7 +7,7 @@ export const getFirstEmptyPosition = (
  size: { width: number; height: number } = { width: 1, height: 1 },
 ) => {
  for (let yOffset = 0; yOffset < rowCount + 1 - size.height; yOffset++) {
-    for (let xOffset = 0; xOffset < columnCount; xOffset++) {
+    for (let xOffset = 0; xOffset < columnCount + 1 - size.width; xOffset++) {
      const isOccupied = elements.some(
        (element) =>
          element.yOffset < yOffset + size.height &&
@@ -16,6 +16,7 @@ describe("board lanes", () => {
      leftGutterColumnCount: 2,
      rightGutterColumnCount: 3,
      breakpoint: 0,
+      role: "base",
    } satisfies Board["layouts"][number];

    expect(getBoardLaneColumnCount(layout, "left")).toBe(2);
@@ -31,6 +32,7 @@ describe("board lanes", () => {
      leftGutterColumnCount: 3,
      rightGutterColumnCount: 3,
      breakpoint: 0,
+      role: "base",
    } satisfies Board["layouts"][number];

    expect(getBoardLaneColumnCount(layout, "left")).toBe(3);
@@ -120,6 +122,7 @@ describe("board lanes", () => {
        leftGutterColumnCount: 1,
        rightGutterColumnCount: 0,
        breakpoint: 0,
+        role: "base",
      },
    ];

@@ -1,11 +0,0 @@
-import { describe, expect, test } from "vitest";
-
-import { filterRecursiveInnerSections } from "./gridstack";
-
-describe("filterRecursiveInnerSections", () => {
-  test("removes sections that would recursively render an ancestor", () => {
-    const innerSections = [{ id: "safe" }, { id: "parent" }, { id: "root" }];
-
-    expect(filterRecursiveInnerSections(innerSections, new Set(["root", "parent"]))).toEqual([{ id: "safe" }]);
-  });
-});
@@ -1,18 +1,18 @@
 import { describe, expect, test } from "vitest";

 import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
-import { DynamicSectionMockBuilder } from "~/components/board/items/actions/test/mocks/dynamic-section-mock";
+import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
 import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
 import { wouldCreateSectionCycle } from "./section-actions";

 describe("wouldCreateSectionCycle", () => {
-  test("rejects moving a dynamic section into itself or one of its descendants", () => {
+  test("rejects moving a container into itself or one of its descendants", () => {
    const layoutId = "layout";
    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
-    const parentSection = new DynamicSectionMockBuilder({ id: "parent" })
+    const parentSection = new ContainerSectionMockBuilder({ id: "parent" })
      .addLayout({ layoutId, parentSectionId: rootSection.id })
      .build();
-    const childSection = new DynamicSectionMockBuilder({ id: "child" })
+    const childSection = new ContainerSectionMockBuilder({ id: "child" })
      .addLayout({ layoutId, parentSectionId: parentSection.id })
      .build();
    const board = new BoardMockBuilder().addSections([rootSection, parentSection, childSection]).build();
@@ -101,7 +101,7 @@ export const wouldCreateSectionCycle = (
    visitedSectionIds.add(currentSectionId);

    const currentSection = board.sections.find((section) => section.id === currentSectionId);
-    if (currentSection?.kind !== "dynamic") return false;
+    if (currentSection?.kind !== "container") return false;

    currentSectionId = currentSection.layouts.find((layout) => layout.layoutId === layoutId)?.parentSectionId ?? null;
  }
@@ -21,17 +21,9 @@ interface UserAvatarMenuProps {
  children: ReactNode;
  availableUpdates?: RouterOutputs["updateChecker"]["getAvailableUpdates"];
  isDockerEnabled?: boolean;
-  opened: boolean;
-  onOpenChange: (opened: boolean) => void;
 }

-export const UserAvatarMenu = ({
-  children,
-  availableUpdates,
-  isDockerEnabled,
-  opened,
-  onOpenChange,
-}: UserAvatarMenuProps) => {
+export const UserAvatarMenu = ({ children, availableUpdates, isDockerEnabled }: UserAvatarMenuProps) => {
  const t = useScopedI18n("common.userAvatar.menu");
  const session = useSession();

@@ -48,7 +40,7 @@ export const UserAvatarMenu = ({

  return (
    // We use keepMounted so we can add event listeners to prevent navigating away without saving the board
-    <Menu width={300} withinPortal keepMounted opened={opened} onChange={onOpenChange}>
+    <Menu width={300} withinPortal keepMounted>
      <Menu.Dropdown>
        <AvailableUpdatesMenuItem availableUpdates={availableUpdates} />
        <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>
@@ -1831,47 +1831,6 @@ describe("saveLayouts should save layout changes", () => {
    expect(basePosition).toMatchObject({ xOffset: 0, yOffset: 1, width: 4, height: 1, sectionId });
    expect(customPosition).toMatchObject({ xOffset: 0, yOffset: 1, width: 4, height: 1, sectionId });
  });
-  test("should project a new custom layout from the resized Base layout", async () => {
-    const db = createDb();
-    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
-    const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "default");
-    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
-    const secondItemId = createId();
-
-    await db.update(itemLayouts).set({ width: 4, xOffset: 0 }).where(eq(itemLayouts.itemId, itemId));
-    await db.insert(items).values({
-      id: secondItemId,
-      kind: "clock",
-      boardId,
-      options: SuperJSON.stringify({ is24HourFormat: true }),
-    });
-    await db.insert(itemLayouts).values({
-      itemId: secondItemId,
-      layoutId,
-      sectionId,
-      width: 4,
-      height: 1,
-      xOffset: 6,
-      yOffset: 0,
-    });
-
-    const resizedBase = { ...createExistingLayout(layoutId), columnCount: 6 };
-    const savedLayouts = await caller.saveLayouts({
-      id: boardId,
-      layouts: [createMobileLayout(mobileLayoutId), createNewLayout(8), resizedBase],
-    });
-    const customLayoutId = expectToBeDefined(savedLayouts.find((layout) => layout.role === "custom")).id;
-
-    const basePosition = await db.query.itemLayouts.findFirst({
-      where: and(eq(itemLayouts.itemId, secondItemId), eq(itemLayouts.layoutId, layoutId)),
-    });
-    const customPosition = await db.query.itemLayouts.findFirst({
-      where: and(eq(itemLayouts.itemId, secondItemId), eq(itemLayouts.layoutId, customLayoutId)),
-    });
-
-    expect(basePosition).toMatchObject({ xOffset: 0, yOffset: 1, width: 4, height: 1, sectionId });
-    expect(customPosition).toMatchObject({ xOffset: 0, yOffset: 1, width: 4, height: 1, sectionId });
-  });
  test("should remove layout when not present in input", async () => {
    // Arrange
    const db = createDb();
@@ -1,17 +1,47 @@
 import { z } from "zod/v4";

+import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
+import type { DownloadClientJobsAndStatus } from "@homarr/integrations";
 import { createIntegrationAsync, downloadClientItemSchema } from "@homarr/integrations";
 import { downloadClientRequestHandler } from "@homarr/request-handler/downloads";

 import type { IntegrationAction } from "../../middlewares/integration";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";

 const createDownloadClientIntegrationMiddleware = (action: IntegrationAction) =>
  createManyIntegrationMiddleware(action, ...getIntegrationKindsByCategory("downloadClient"));

+interface DownloadClientQueryResultBase {
+  integrationId: string;
+  integrationName: string;
+}
+
+type DownloadClientQueryResult = DownloadClientQueryResultBase &
+  (
+    | {
+        integration: {
+          id: string;
+          name: string;
+          kind: IntegrationKindByCategory<"downloadClient">;
+          updatedAt: Date;
+        };
+        data: DownloadClientJobsAndStatus;
+        error?: never;
+      }
+    | {
+        integration: {
+          id: string;
+          name: string;
+          kind: IntegrationKindByCategory<"downloadClient">;
+        };
+        data: null;
+        error: string;
+      }
+  );
+
 export const downloadsRouter = createTRPCRouter({
  getJobsAndStatuses: publicProcedure
    .meta({
@@ -24,14 +54,29 @@ export const downloadsRouter = createTRPCRouter({
    .concat(createDownloadClientIntegrationMiddleware("query"))
    .input(z.object({ limitPerIntegration: z.number().default(50) }))
    .query(async ({ ctx, input }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const innerHandler = downloadClientRequestHandler.handler(integration, { limit: input.limitPerIntegration });
-        const { data, timestamp } = await innerHandler.getDataAsync();
-        return {
-          integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: timestamp },
-          data,
-        };
-      });
+      return await settleIntegrationQueries<(typeof ctx.integrations)[number], DownloadClientQueryResult>(
+        ctx.integrations,
+        async (integration) => {
+          const innerHandler = downloadClientRequestHandler.handler(integration, { limit: input.limitPerIntegration });
+          const { data, timestamp } = await innerHandler.getDataAsync();
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: timestamp },
+            data,
+          };
+        },
+        {
+          fallback: (integration) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data: null,
+            error: PUBLIC_INTEGRATION_ERROR,
+          }),
+          throwOnAllFailures: true,
+        },
+      );
    }),
  pause: protectedProcedure
    .meta({
@@ -1,9 +1,10 @@
 import { createIntegrationAsync } from "@homarr/integrations";
+import type { SystemHealthMonitoring } from "@homarr/integrations";
 import { SynologyIntegration } from "@homarr/integrations";
 import { clusterInfoRequestHandler, systemInfoRequestHandler } from "@homarr/request-handler/health-monitoring";

 import { createManyIntegrationMiddleware, createOneIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";

 const healthMonitoringIntegrationKinds = [
@@ -16,6 +17,14 @@ const healthMonitoringIntegrationKinds = [
  "mock",
 ] as const;

+interface SystemHealthQueryResult {
+  integrationId: string;
+  integrationName: string;
+  healthInfo: SystemHealthMonitoring | null;
+  updatedAt?: Date;
+  error?: string;
+}
+
 export const healthMonitoringRouter = createTRPCRouter({
  getSystemHealthStatus: publicProcedure
    .meta({
@@ -27,15 +36,27 @@ export const healthMonitoringRouter = createTRPCRouter({
    })
    .concat(createManyIntegrationMiddleware("query", ...healthMonitoringIntegrationKinds))
    .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data, timestamp } = await systemInfoRequestHandler.handler(integration, {}).getDataAsync();
-        return {
-          integrationId: integration.id,
-          integrationName: integration.name,
-          healthInfo: data,
-          updatedAt: timestamp,
-        };
-      });
+      return await settleIntegrationQueries<(typeof ctx.integrations)[number], SystemHealthQueryResult>(
+        ctx.integrations,
+        async (integration) => {
+          const { data, timestamp } = await systemInfoRequestHandler.handler(integration, {}).getDataAsync();
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            healthInfo: data,
+            updatedAt: timestamp,
+          };
+        },
+        {
+          fallback: (integration) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            healthInfo: null,
+            error: PUBLIC_INTEGRATION_ERROR,
+          }),
+          throwOnAllFailures: true,
+        },
+      );
    }),
  listStorageVolumes: publicProcedure
    .meta({
@@ -2,32 +2,21 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { mediaReleaseRequestHandler } from "@homarr/request-handler/media-release";

 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
+import { getMediaReleaseResponse } from "./media-release-result";

 export const mediaReleaseRouter = createTRPCRouter({
  getMediaReleases: publicProcedure
    .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("mediaRelease")))
    .query(async ({ ctx }) => {
-      const results = await settleIntegrationQueries(ctx.integrations, async (integration) => {
+      return await getMediaReleaseResponse(ctx.integrations, async (integration) => {
        const innerHandler = mediaReleaseRequestHandler.handler(integration, {});
        const { data, timestamp } = await innerHandler.getDataAsync();

        return {
-          integration: {
-            id: integration.id,
-            name: integration.name,
-            kind: integration.kind,
-            updatedAt: timestamp,
-          },
          releases: data,
+          updatedAt: timestamp,
        };
      });
-      return results.flatMap((result) =>
-        result.releases.map((release) => ({
-          ...release,
-          integration: result.integration,
-        })),
-      );
    }),
 });
@@ -1,24 +1,39 @@
 import { uptimeKumaRequestHandler } from "@homarr/request-handler/uptime-kuma";

 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";

 export const uptimeKumaRouter = createTRPCRouter({
  getDashboard: publicProcedure
    .concat(createManyIntegrationMiddleware("query", "uptimeKuma"))
    .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const innerHandler = uptimeKumaRequestHandler.handler(integration, {});
-        const { data, timestamp } = await innerHandler.getDataAsync();
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const innerHandler = uptimeKumaRequestHandler.handler(integration, {});
+          const { data, timestamp } = await innerHandler.getDataAsync();

-        return {
-          integrationId: integration.id,
-          integrationName: integration.name,
-          integrationUrl: integration.url,
-          dashboard: data,
-          updatedAt: timestamp,
-        };
-      });
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationUrl: integration.url,
+            dashboard: data as typeof data | null,
+            updatedAt: timestamp,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationUrl: integration.url,
+            dashboard: null,
+            updatedAt: new Date(0),
+            error: toPublicIntegrationError(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
    }),
 });
@@ -1 +0,0 @@
-ALTER TABLE `layout` ADD `role` text DEFAULT 'custom' NOT NULL;
@@ -2356,6 +2356,12 @@
      "noProjectSelected": "No project selected",
      "runnerStatus": "Runner: {status}",
      "updatedAt": "Updated {date}",
+      "projectId": "Project: {id}",
+      "sessionReceived": "Session received: {value}",
+      "sessionSent": "Session sent: {value}",
+      "sessionId": "Session: {id}",
+      "startedAt": "Started {date}",
+      "emptyItems": "No active or recent jobs in this snapshot",
      "metric": {
        "running": "Running",
        "completed": "Done",
@@ -2757,6 +2763,7 @@
      },
      "advanced": {
        "entityId": "Entity ID: {id}",
+        "lastChanged": "Changed {date}",
        "lastUpdated": "Updated {date}",
        "attribute": {
          "unit": "Unit",
@@ -2785,7 +2792,9 @@
      },
      "advanced": {
        "lastExecuted": "Last run at {time}",
-        "automationId": "Automation ID: {id}"
+        "automationId": "Automation ID: {id}",
+        "ready": "Ready to run",
+        "noPermission": "No permission to run this automation"
      },
      "status": {
        "running": "Running automation",
@@ -2798,6 +2807,14 @@
    "stockPrice": {
      "name": "Stock Price",
      "description": "Displays the current stock price of a company",
+      "advanced": {
+        "currentPrice": "Current price",
+        "previousClose": "Previous close",
+        "change": "Change",
+        "changePercentage": "Change (%)",
+        "minimum": "Minimum",
+        "maximum": "Maximum"
+      },
      "option": {
        "stock": {
          "label": "Stock symbol"
@@ -2986,6 +3003,11 @@
      },
      "title": "Indexer manager",
      "testAll": "Test all",
+      "status": {
+        "healthy": "Healthy",
+        "unhealthy": "Unhealthy",
+        "disabled": "Disabled"
+      },
      "error": {
        "internalServerError": "Failed to fetch indexers status"
      }
@@ -3043,7 +3065,10 @@
        "minutes": "{count} minutes",
        "used": "Used",
        "available": "Available",
-        "lastSeen": "Last status update: {lastSeen}"
+        "lastSeen": "Last status update: {lastSeen}",
+        "updatesAvailable": "{count, plural, one {# update available} other {# updates available}}",
+        "rebootRequired": "Reboot required",
+        "rebootNotRequired": "No reboot required"
      },
      "memory": {},
      "error": {
@@ -3162,7 +3187,13 @@
      },
      "server": {
        "buildServer": "Build",
-        "resourceCounts": "{applications, plural, one {# app} other {# apps}} / {services, plural, one {# service} other {# services}}"
+        "resourceCounts": "{applications, plural, one {# app} other {# apps}} / {services, plural, one {# service} other {# services}}",
+        "reachability": "Reachability",
+        "usability": "Usability"
+      },
+      "source": {
+        "url": "Source: {url}",
+        "unavailable": "{source}: unavailable"
      },
      "instances": {
        "title": "Instances"
@@ -3181,7 +3212,11 @@
        "restarting": "Restarting",
        "unknown": "Unknown",
        "online": "Online",
-        "offline": "Offline"
+        "offline": "Offline",
+        "reachable": "Reachable",
+        "unreachable": "Unreachable",
+        "usable": "Usable",
+        "unusable": "Unusable"
      }
    },
    "vpn": {
@@ -3717,6 +3752,9 @@
      "movies": "Missing Movies",
      "providers": "Provider Issues",
      "status": "Health Issues",
+      "sonarrSignalr": "Sonarr SignalR",
+      "radarrSignalr": "Radarr SignalR",
+      "announcements": "Announcements",
      "option": {
        "showMissingEpisodes": {
          "label": "Show missing episodes",
@@ -4315,6 +4353,16 @@
    },
    "networkControllerSummary": {
      "option": {},
+      "advanced": {
+        "updated": "Updated",
+        "metric": {
+          "latency": "Latency",
+          "ping": "Ping",
+          "uptime": "Uptime",
+          "users": "Users",
+          "guests": "Guests"
+        }
+      },
      "card": {
        "vpn": {
          "countConnected": "{count, plural, one {# connected} other {# connected}}",
@@ -4333,6 +4381,9 @@
      "description": "Displays the summary of a Network Controller (like UniFi Controller)"
    },
    "networkControllerStatus": {
+      "advanced": {
+        "updatedAt": "Updated {date}"
+      },
      "card": {
        "variants": {
          "wired": {
@@ -4464,7 +4515,8 @@
      "range": {
        "twelveHours": "12h",
        "oneDay": "24h",
-        "all": "All"
+        "all": "All",
+        "lastThirty": "Last 30"
      }
    },
    "uptimeKuma": {
@@ -4679,7 +4731,9 @@
        }
      },
      "status": {
-        "unhealthy": "Unhealthy"
+        "unhealthy": "Unhealthy",
+        "smart": "SMART",
+        "free": "{percentage}% free"
      }
    },
    "customApi": {
@@ -4800,6 +4854,12 @@
      },
      "column": {
        "system": "System",
+        "source": "Source",
+        "hostname": "Hostname",
+        "os": "OS",
+        "cpuModel": "CPU model",
+        "cores": "Cores",
+        "memoryTotal": "Memory total",
        "cpu": "CPU",
        "memory": "Memory",
        "disk": "Disk",
@@ -4860,6 +4920,14 @@
      "empty": {
        "noSystems": "No systems found"
      },
+      "metadata": {
+        "hostname": "Hostname",
+        "os": "OS",
+        "cpuModel": "CPU model",
+        "cores": "Cores",
+        "memoryTotal": "Memory total",
+        "source": "Source"
+      },
      "metric": {
        "cpu": "CPU",
        "memory": "Memory",
@@ -124,7 +124,10 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
            />
          </Flex>
        </Tooltip.Floating>
-        {options.pingEnabled && !settings.forceDisableStatus && !board.disableStatus && app.href ? (
+        {options.pingEnabled &&
+        !settings.forceDisableStatus &&
+        !board.disableStatus &&
+        Boolean(app.pingUrl ?? app.href) ? (
          <Suspense fallback={<PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />}>
            <PingIndicator appId={app.id} />
          </Suspense>
@@ -16,6 +16,7 @@ import {
  VisuallyHidden,
 } from "@mantine/core";
 import { IconBellOff, IconCircleCheck, IconFlame, IconHistory } from "@tabler/icons-react";
+import { getQueryKey } from "@trpc/react-query";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import type { LucideIcon } from "lucide-react";
@@ -27,6 +28,10 @@ import { useScopedI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
+import { getBeszelAlertsQueryInput } from "./display";
+import { buildBeszelSystemNameMap, getBeszelSystemName } from "./system-name-map";

 const alertIconMap: Record<string, LucideIcon> = {
  CPU: Cpu,
@@ -50,43 +55,64 @@ export default function BeszelAlertsWidget({
  integrationIds,
  isEditMode,
  height,
+  displayMode,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"beszelAlerts">) {
  const t = useScopedI18n("widget.beszelAlerts");
+  const isAdvanced = displayMode === "advanced";
  const alertsInput = useMemo(
-    () => ({ integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems }),
-    [integrationIds, options.showHistory, options.maxHistoryItems],
+    () =>
+      getBeszelAlertsQueryInput(
+        integrationIds,
+        { showHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems },
+        isAdvanced,
+      ),
+    [integrationIds, options.showHistory, options.maxHistoryItems, isAdvanced],
  );
  const alertsQuery = clientApi.widget.beszel.getAlerts.useQuery(alertsInput);
-  const results = getUsableWidgetQueryData(alertsQuery) ?? [];
+  const runtimeQueries = useMemo(
+    () => [getQueryKey(clientApi.widget.beszel.getAlerts, alertsInput, "query")],
+    [alertsInput],
+  );
+  useWidgetRuntimeQueries(widgetRuntimeRef, runtimeQueries);
+  const resultData = getUsableWidgetQueryData(alertsQuery);
+  const results = useMemo(() => resultData ?? [], [resultData]);
  const { isPending } = alertsQuery;

-  const systemNameMap = useMemo(() => {
-    const map: Record<string, string> = {};
-    for (const r of results) {
-      if (r.systemNameMap) {
-        Object.assign(map, r.systemNameMap);
-      }
-    }
-    return map;
-  }, [results]);
+  const systemNameMap = useMemo(() => buildBeszelSystemNameMap(results), [results]);
+  const showIntegrationName = isAdvanced || results.length > 1;

  const alerts = useMemo(
-    () => results.flatMap((r) => r.alerts.map((a) => ({ ...a, _key: `${r.integrationId}:${a.id}` }))),
+    () =>
+      results.flatMap((r) =>
+        r.alerts.map((a) => ({
+          ...a,
+          integrationId: r.integrationId,
+          integrationName: r.integrationName,
+          key: `${r.integrationId}:${a.id}`,
+        })),
+      ),
    [results],
  );

  const history = useMemo(() => {
-    const all = results.flatMap((r) => r.history.map((h) => ({ ...h, _key: `${r.integrationId}:${h.id}` })));
-    return all
-      .toSorted((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime())
-      .slice(0, options.maxHistoryItems);
-  }, [results, options.maxHistoryItems]);
+    const all = results.flatMap((r) =>
+      r.history.map((h) => ({
+        ...h,
+        integrationId: r.integrationId,
+        integrationName: r.integrationName,
+        key: `${r.integrationId}:${h.id}`,
+      })),
+    );
+    const sorted = all.toSorted((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());
+    return isAdvanced ? sorted : sorted.slice(0, options.maxHistoryItems);
+  }, [results, options.maxHistoryItems, isAdvanced]);

  const triggeredAlerts = alerts.filter((a) => a.triggered);
  const okAlerts = alerts.filter((a) => !a.triggered);
-  const showOkAlerts = triggeredAlerts.length === 0 || height >= 260;
-  const showHistory = options.showHistory && height >= 360;
-  const showAlertDescriptions = height >= 190;
+  const showOkAlerts = isAdvanced || triggeredAlerts.length === 0 || height >= 260;
+  const showHistory = isAdvanced || (options.showHistory && height >= 360);
+  const showAlertDescriptions = isAdvanced || height >= 190;

  if (isPending) {
    return (
@@ -99,7 +125,10 @@ export default function BeszelAlertsWidget({
  return (
    <Box h="100%" pos="relative">
      <Box pos="absolute" top={4} right={8} style={{ zIndex: 1 }}>
-        <IntegrationErrorIndicator results={results} />
+        <Group gap={0}>
+          <WidgetQueryErrorIndicator error={alertsQuery.error} label={t("name")} />
+          <IntegrationErrorIndicator results={results} />
+        </Group>
      </Box>
      <ScrollArea h="100%" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
        <Stack gap="sm" p="sm">
@@ -124,11 +153,12 @@ export default function BeszelAlertsWidget({
              </Group>
              {triggeredAlerts.map((alert) => (
                <AlertRow
-                  key={alert._key}
+                  key={alert.key}
                  name={alert.name}
                  value={alert.value}
                  min={alert.min}
-                  systemName={systemNameMap[alert.system] ?? alert.system}
+                  systemName={getBeszelSystemName(systemNameMap, alert.integrationId, alert.system)}
+                  integrationName={showIntegrationName ? alert.integrationName : undefined}
                  triggered
                  showDescription={showAlertDescriptions}
                />
@@ -148,11 +178,12 @@ export default function BeszelAlertsWidget({
              </Group>
              {okAlerts.map((alert) => (
                <AlertRow
-                  key={alert._key}
+                  key={alert.key}
                  name={alert.name}
                  value={alert.value}
                  min={alert.min}
-                  systemName={systemNameMap[alert.system] ?? alert.system}
+                  systemName={getBeszelSystemName(systemNameMap, alert.integrationId, alert.system)}
+                  integrationName={showIntegrationName ? alert.integrationName : undefined}
                  triggered={false}
                  showDescription={showAlertDescriptions}
                />
@@ -171,11 +202,12 @@ export default function BeszelAlertsWidget({
                  </Text>
                </Group>
                {history.map((entry) => {
-                  const systemName = systemNameMap[entry.system] ?? entry.system;
+                  const systemName = getBeszelSystemName(systemNameMap, entry.integrationId, entry.system);
+                  const systemLabel = showIntegrationName ? `${systemName} · ${entry.integrationName}` : systemName;
                  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 key={entry.key} justify="space-between" wrap="nowrap" gap="xs" pl={4}>
                      <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
                        <Box
                          w={3}
@@ -189,7 +221,7 @@ export default function BeszelAlertsWidget({
                            {entry.name}
                          </Text>
                          <Text size="xs" c="dimmed" truncate>
-                            {systemName}
+                            {systemLabel}
                          </Text>
                        </Stack>
                      </Group>
@@ -218,6 +250,7 @@ interface AlertRowProps {
  value: number;
  min: number;
  systemName: string;
+  integrationName?: string;
  triggered: boolean;
  showDescription: boolean;
 }
@@ -243,7 +276,7 @@ function formatAlertDescription(name: string, value: number, min: number): strin
  return `exceeds ${value}${suffix} over ${min} min`;
 }

-function AlertRow({ name, value, min, systemName, triggered, showDescription }: AlertRowProps) {
+function AlertRow({ name, value, min, systemName, integrationName, triggered, showDescription }: AlertRowProps) {
  const Icon = alertIconMap[name] ?? Server;
  const description = formatAlertDescription(name, value, min);
  return (
@@ -263,7 +296,7 @@ function AlertRow({ name, value, min, systemName, triggered, showDescription }:
        <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
          <Group gap={6} wrap="nowrap">
            <Text size="xs" fw={600} truncate>
-              {systemName}
+              {integrationName ? `${systemName} · ${integrationName}` : systemName}
            </Text>
            <Text size="xs" c="dimmed">
              ·
@@ -1,19 +1,22 @@
 import { IconBell, IconServerOff } from "@tabler/icons-react";
 import { z } from "zod/v4";

-import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("beszelAlerts", {
  icon: IconBell,
-  supportsAdvancedFocus: false,
  queryKey: [["widget", "beszel", "getAlerts"]],
-  queryMatcher: ({ input }, scope) =>
-    widgetQueryInputMatches(input, {
+  queryMatcher(query, scope) {
+    const hasRuntimeAlertsQuery = scope.runtimeQueries.some(({ path }) => path.at(-1) === "getAlerts");
+    if (hasRuntimeAlertsQuery) return matchesWidgetRuntimeQuery(query, scope);
+
+    return widgetQueryInputMatches(query.input, {
      integrationIds: scope.integrationIds,
      includeHistory: scope.options.showHistory,
      maxHistoryItems: scope.options.maxHistoryItems,
-    }),
+    });
+  },
  supportedIntegrations: ["beszel", "mock"],
  integrationsRequired: true,
  createOptions() {
@@ -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, Center, Group, Loader, Progress, SimpleGrid, Stack, Text } from "@mantine/core";
 import {
  Activity,
  Battery,
@@ -19,6 +19,7 @@ import { IconServerOff } from "@tabler/icons-react";

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

@@ -38,8 +39,10 @@ import {
 import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
+import { isBeszelGridMetricVisible } from "./display";

 interface SizeConfig {
  iconSize: number;
@@ -117,10 +120,12 @@ const getMaxVisibleMetrics = (cellHeight: number, size: SizeConfig): number => {

 const MIN_CELL_WIDTH = 140;
 const MIN_CELL_HEIGHT = 80;
+const ADVANCED_MIN_CELL_WIDTH = 320;
+const ADVANCED_MIN_CELL_HEIGHT = 420;

-const getColCount = (width: number, _height: number, itemCount: number): number => {
+const getColCount = (width: number, _height: number, itemCount: number, minCellWidth = MIN_CELL_WIDTH): number => {
  if (itemCount <= 1) return 1;
-  const maxCols = Math.min(itemCount, Math.max(1, Math.floor(width / MIN_CELL_WIDTH)));
+  const maxCols = Math.min(itemCount, Math.max(1, Math.floor(width / minCellWidth)));

  let best = 1;
  for (let c = 1; c <= maxCols; c++) {
@@ -168,12 +173,14 @@ const MetricRow = ({ icon, label, value, progress, size }: MetricRowProps) => (
 );

 interface SystemCardProps {
-  system: BeszelSystemRow & { _key: string };
+  system: BeszelSystemRow & { rowKey: string };
  options: WidgetComponentProps<"beszelSystemGrid">["options"];
  t: ReturnType<typeof useScopedI18n<"widget.beszelSystemGrid">>;
  size: SizeConfig;
  maxMetrics: number;
  itemRadius: MantineSize;
+  integrationName: string;
+  isAdvanced: boolean;
  onClick?: () => void;
 }

@@ -190,7 +197,8 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showCpu,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showCpu, advanced),
  },
  {
    key: "showMemory",
@@ -204,7 +212,8 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showMemory,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showMemory, advanced),
  },
  {
    key: "showDisk",
@@ -217,7 +226,8 @@ const metricRenderers = [
        <DiskUsage system={s} fontSize={sz.fontSize} progressSize={sz.progressSize} valueMiw={sz.valueMiw} />
      </Group>
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showDisk,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showDisk, advanced),
  },
  {
    key: "showGpu",
@@ -231,7 +241,8 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showGpu && s.gpu > 0,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showGpu, advanced, s.gpu > 0),
  },
  {
    key: "showLoadAvg",
@@ -244,7 +255,8 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showLoadAvg && s.loadAvg !== null,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showLoadAvg, advanced, s.loadAvg !== null),
  },
  {
    key: "showNet",
@@ -257,7 +269,8 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showNet,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showNet, advanced),
  },
  {
    key: "showTemp",
@@ -270,7 +283,8 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showTemp && s.temp !== null,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showTemp, advanced, s.temp !== null),
  },
  {
    key: "showBattery",
@@ -287,7 +301,8 @@ const metricRenderers = [
        />
      );
    },
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showBattery && s.battery !== null,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showBattery, advanced, s.battery !== null),
  },
  {
    key: "showServices",
@@ -300,7 +315,8 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showServices,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showServices, advanced),
  },
  {
    key: "showUptime",
@@ -313,7 +329,8 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showUptime,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showUptime, advanced),
  },
  {
    key: "showAgent",
@@ -326,12 +343,23 @@ const metricRenderers = [
        size={sz}
      />
    ),
-    visible: (s: BeszelSystemRow, o: SystemCardProps["options"]) => o.showAgent,
+    visible: (s: BeszelSystemRow, o: SystemCardProps["options"], advanced: boolean) =>
+      isBeszelGridMetricVisible(o.showAgent, advanced),
  },
 ] as const;

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

@@ -368,6 +396,20 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
        </Badge>
      </Group>

+      {isAdvanced && (
+        <SimpleGrid cols={2} spacing={4} verticalSpacing={2} mb={4}>
+          <SystemMetadata label={t("metadata.hostname")} value={system.hostname || "—"} />
+          <SystemMetadata label={t("metadata.os")} value={system.osName || "—"} />
+          <SystemMetadata label={t("metadata.cpuModel")} value={system.cpuModel || "—"} />
+          <SystemMetadata label={t("metadata.cores")} value={String(system.cores)} />
+          <SystemMetadata
+            label={t("metadata.memoryTotal")}
+            value={system.memoryTotal > 0 ? formatBytes(system.memoryTotal) : "—"}
+          />
+          <SystemMetadata label={t("metadata.source")} value={integrationName} />
+        </SimpleGrid>
+      )}
+
      <Stack gap={0} style={{ flex: 1 }} justify="space-evenly">
        {visibleMetrics.map((m) => m.render(system, t, size))}
      </Stack>
@@ -380,12 +422,24 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
  );
 };

+const SystemMetadata = ({ label, value }: { label: string; value: string }) => (
+  <Box style={{ minWidth: 0 }}>
+    <Text size="10px" c="dimmed">
+      {label}
+    </Text>
+    <Text size="xs" fw={500} truncate title={value}>
+      {value}
+    </Text>
+  </Box>
+);
+
 export default function BeszelSystemGridWidget({
  options,
  integrationIds,
  isEditMode,
  width,
  height,
+  displayMode,
 }: WidgetComponentProps<"beszelSystemGrid">) {
  const t = useScopedI18n("widget.beszelSystemGrid");
  const board = useRequiredBoard();
@@ -394,6 +448,8 @@ export default function BeszelSystemGridWidget({
  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
  const results = getUsableWidgetQueryData(systemsQuery) ?? [];
  const { isPending } = systemsQuery;
+  const isAdvanced = displayMode === "advanced";
+  const integrationNames = new Map(results.map((result) => [result.integrationId, result.integrationName]));

  const filteredSystems = useBeszelFilteredSystems(results, options.statusFilter);

@@ -408,7 +464,10 @@ export default function BeszelSystemGridWidget({
  if (filteredSystems.length === 0) {
    return (
      <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-        <IntegrationErrorIndicator results={results} />
+        <Group pos="absolute" top={4} right={8} gap={0} style={{ zIndex: 1 }}>
+          <WidgetQueryErrorIndicator error={systemsQuery.error} label={t("name")} />
+          <IntegrationErrorIndicator results={results} />
+        </Group>
        <Center h="100%">
          <Stack align="center" gap="xs">
            <IconServerOff size={28} opacity={0.5} />
@@ -421,19 +480,23 @@ export default function BeszelSystemGridWidget({
    );
  }

-  const cols = getColCount(width, height, filteredSystems.length);
+  const minimumCellWidth = isAdvanced ? ADVANCED_MIN_CELL_WIDTH : MIN_CELL_WIDTH;
+  const cols = getColCount(width, height, filteredSystems.length, minimumCellWidth);
  const rows = Math.ceil(filteredSystems.length / cols) || 1;
  const rawCellHeight = height / rows;
-  const minimumCellHeight = MIN_CELL_HEIGHT;
+  const minimumCellHeight = isAdvanced ? ADVANCED_MIN_CELL_HEIGHT : MIN_CELL_HEIGHT;
  const scrollEnabled = rawCellHeight < minimumCellHeight;
  const effectiveCellHeight = scrollEnabled ? minimumCellHeight : rawCellHeight;
  const cellWidth = width / cols;
  const size = getSizeConfig(cellWidth, effectiveCellHeight);
-  const maxMetrics = getMaxVisibleMetrics(effectiveCellHeight, size);
+  const maxMetrics = isAdvanced ? Number.POSITIVE_INFINITY : getMaxVisibleMetrics(effectiveCellHeight, size);

  return (
    <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-      <IntegrationErrorIndicator results={results} />
+      <Group pos="absolute" top={4} right={8} gap={0} style={{ zIndex: 1 }}>
+        <WidgetQueryErrorIndicator error={systemsQuery.error} label={t("name")} />
+        <IntegrationErrorIndicator results={results} />
+      </Group>
      <Box
        h="100%"
        style={{
@@ -445,19 +508,22 @@ export default function BeszelSystemGridWidget({
        }}
      >
        {filteredSystems.map((system) => {
-          const integrationId = system._key.split(":")[0] ?? "";
+          const integrationId = system.rowKey.split(":")[0] ?? "";
+          const integrationName = integrationNames.get(integrationId) ?? "—";
          const handleClick = isEditMode
            ? undefined
            : () => openModal({ integrationId, systemId: system.id }, { title: system.name });
          return (
            <SystemCard
-              key={system._key}
+              key={system.rowKey}
              system={system}
              options={options}
              t={t}
              size={size}
              maxMetrics={maxMetrics}
              itemRadius={board.itemRadius}
+              integrationName={integrationName}
+              isAdvanced={isAdvanced}
              onClick={handleClick}
            />
          );
@@ -6,7 +6,6 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemGrid", {
  icon: IconLayoutGrid,
-  supportsAdvancedFocus: false,
  queryKey: [["widget", "beszel", "getSystems"]],
  supportedIntegrations: ["beszel", "mock"],
  integrationsRequired: true,
@@ -19,6 +19,7 @@ import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import type { BeszelTimePeriod } from "../beszel/_shared/chart";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import { BeszelStatsView } from "../beszel/_shared/stats-view";
 import { createBeszelSystemChoices, resolveBeszelSystemChoice } from "./selection";

@@ -46,7 +47,8 @@ export default function BeszelSystemStatsWidget({
        }),
    });
  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
-  const systemsResult = getUsableWidgetQueryData(systemsQuery) ?? [];
+  const systemsData = getUsableWidgetQueryData(systemsQuery);
+  const systemsResult = useMemo(() => systemsData ?? [], [systemsData]);
  const { isPending: systemsPending } = systemsQuery;

  const systems = useMemo(() => createBeszelSystemChoices(systemsResult), [systemsResult]);
@@ -140,7 +142,10 @@ export default function BeszelSystemStatsWidget({
  if (systems.length === 0) {
    return (
      <Box h="100%" pos="relative">
-        <IntegrationErrorIndicator results={systemsResult} />
+        <Group pos="absolute" top={4} right={8} gap={0} style={{ zIndex: 1 }}>
+          <WidgetQueryErrorIndicator error={systemsQuery.error} label={t("name")} />
+          <IntegrationErrorIndicator results={systemsResult} />
+        </Group>
        <Center h="100%">
          <Stack align="center" gap="xs">
            <IconServerOff size={28} opacity={0.5} />
@@ -177,7 +182,10 @@ export default function BeszelSystemStatsWidget({
  return (
    <Box h="100%" pos="relative">
      <Box pos="absolute" top={4} right={8} style={{ zIndex: 1 }}>
-        <IntegrationErrorIndicator results={systemsResult} />
+        <Group gap={0}>
+          <WidgetQueryErrorIndicator error={systemsQuery.error} label={t("name")} />
+          <IntegrationErrorIndicator results={systemsResult} />
+        </Group>
      </Box>
      <ScrollArea
        h="100%"
@@ -16,7 +16,6 @@ const timePeriodOptions = [
 ];

 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemStats", {
-  supportsAdvancedFocus: false,
  icon: IconChartAreaLine,
  queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
  queryMatcher(query, scope) {
@@ -20,6 +20,7 @@ import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import { useOptionalBoard } from "@homarr/boards/context";
+import { formatBytes } from "@homarr/common";
 import { useModalAction } from "@homarr/modals";
 import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -40,15 +41,23 @@ import {
 } from "../beszel/_shared/format";
 import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
+import { getBeszelTableVisibleMetricKeys } from "./display";

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

-type SystemRowWithKey = BeszelSystemRow & { _key: string };
+type SystemRowWithKey = BeszelSystemRow & { rowKey: string; integrationName: string };

 const columnAccessors = [
  "name",
+  "integrationName",
+  "hostname",
+  "osName",
+  "cpuModel",
+  "cores",
+  "memoryTotal",
  "cpu",
  "memory",
  "disk",
@@ -60,7 +69,7 @@ const columnAccessors = [
  "services",
  "uptime",
  "agentVersion",
-] as const satisfies readonly (keyof BeszelSystemRow)[];
+] as const satisfies readonly (keyof SystemRowWithKey)[];

 interface SizeConfig {
  iconSize: number;
@@ -97,6 +106,7 @@ export default function BeszelSystemTableWidget({
  boardId,
  itemId,
  setOptions,
+  displayMode,
 }: WidgetComponentProps<"beszelSystemTable">) {
  const t = useScopedI18n("widget.beszelSystemTable");
  const { openModal } = useModalAction(BeszelSystemStatsModal);
@@ -104,26 +114,15 @@ export default function BeszelSystemTableWidget({
  const { data: session } = useSession();
  const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
-  const results = getUsableWidgetQueryData(systemsQuery) ?? [];
+  const systemsData = getUsableWidgetQueryData(systemsQuery);
+  const results = useMemo(() => systemsData ?? [], [systemsData]);
  const { isPending } = systemsQuery;
+  const isAdvanced = displayMode === "advanced";
  const size = useMemo(() => getSizeConfig(width), [width]);
-  const visibleMetricKeys = useMemo(() => {
-    const enabled = [
-      "showCpu",
-      "showMemory",
-      "showDisk",
-      "showGpu",
-      "showLoadAvg",
-      "showNet",
-      "showTemp",
-      "showBattery",
-      "showServices",
-      "showUptime",
-      "showAgent",
-    ].filter((key) => options[key as keyof typeof options]) as string[];
-    const budget = width < 360 ? 1 : width < 560 ? 2 : width < 760 ? 4 : enabled.length;
-    return new Set(enabled.slice(0, budget));
-  }, [options, width]);
+  const visibleMetricKeys = useMemo(
+    () => getBeszelTableVisibleMetricKeys(options, width, isAdvanced),
+    [options, width, isAdvanced],
+  );

  const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
    onError: () =>
@@ -141,6 +140,18 @@ export default function BeszelSystemTableWidget({
  });

  const filteredSystems = useBeszelFilteredSystems(results, options.statusFilter);
+  const integrationNames = useMemo(
+    () => new Map(results.map((result) => [result.integrationId, result.integrationName])),
+    [results],
+  );
+  const systemsWithSource = useMemo(
+    () =>
+      filteredSystems.map((system) => ({
+        ...system,
+        integrationName: integrationNames.get(system.rowKey.split(":")[0] ?? "") ?? "—",
+      })),
+    [filteredSystems, integrationNames],
+  );

  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<SystemRowWithKey>>({
    columnAccessor: options.sortBy,
@@ -154,16 +165,16 @@ export default function BeszelSystemTableWidget({
  }, [options.sortBy, options.sortDirection]);

  const sortedSystems = useMemo(() => {
-    const accessor = sortStatus.columnAccessor as keyof BeszelSystemRow;
+    const accessor = sortStatus.columnAccessor as keyof SystemRowWithKey;
    const dir = directionMultiplier[sortStatus.direction] ?? 1;
-    return [...filteredSystems].toSorted((a, b) => {
+    return [...systemsWithSource].toSorted((a, b) => {
      const aVal = a[accessor] ?? 0;
      const bVal = b[accessor] ?? 0;
      if (typeof aVal === "string" && typeof bVal === "string") return aVal.localeCompare(bVal) * dir;
      if (typeof aVal === "number" && typeof bVal === "number") return (aVal - bVal) * dir;
      return 0;
    });
-  }, [filteredSystems, sortStatus]);
+  }, [systemsWithSource, sortStatus]);

  const PercentCell = ({ value }: { value: number }) => (
    <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
@@ -201,6 +212,54 @@ export default function BeszelSystemTableWidget({
          </Group>
        ),
      },
+      isAdvanced && {
+        accessor: "integrationName",
+        width: 140,
+        ellipsis: true,
+        title: t("column.source"),
+        sortable: true,
+        render: (record) => <Text size={size.fontSize}>{record.integrationName}</Text>,
+      },
+      isAdvanced && {
+        accessor: "hostname",
+        width: 150,
+        ellipsis: true,
+        title: t("column.hostname"),
+        sortable: true,
+        render: (record) => <Text size={size.fontSize}>{record.hostname || "—"}</Text>,
+      },
+      isAdvanced && {
+        accessor: "osName",
+        width: 160,
+        ellipsis: true,
+        title: t("column.os"),
+        sortable: true,
+        render: (record) => <Text size={size.fontSize}>{record.osName || "—"}</Text>,
+      },
+      isAdvanced && {
+        accessor: "cpuModel",
+        width: 220,
+        ellipsis: true,
+        title: t("column.cpuModel"),
+        sortable: true,
+        render: (record) => <Text size={size.fontSize}>{record.cpuModel || "—"}</Text>,
+      },
+      isAdvanced && {
+        accessor: "cores",
+        width: 80,
+        title: t("column.cores"),
+        sortable: true,
+        render: (record) => <Text size={size.fontSize}>{record.cores}</Text>,
+      },
+      isAdvanced && {
+        accessor: "memoryTotal",
+        width: 120,
+        title: t("column.memoryTotal"),
+        sortable: true,
+        render: (record) => (
+          <Text size={size.fontSize}>{record.memoryTotal > 0 ? formatBytes(record.memoryTotal) : "—"}</Text>
+        ),
+      },
      visibleMetricKeys.has("showCpu") && {
        accessor: "cpu",
        width: 140,
@@ -357,7 +416,7 @@ export default function BeszelSystemTableWidget({
    ];

    return cols.filter(Boolean) as DataTableColumn<SystemRowWithKey>[];
-  }, [t, size, visibleMetricKeys]);
+  }, [t, size, visibleMetricKeys, isAdvanced]);

  const { effectiveColumns, storeKey } = usePersistedTableLayout({
    columns,
@@ -371,7 +430,7 @@ export default function BeszelSystemTableWidget({

  const handleRowClick = useCallback(
    ({ record }: { record: SystemRowWithKey }) => {
-      const integrationId = record._key.split(":")[0] ?? "";
+      const integrationId = record.rowKey.split(":")[0] ?? "";
      openModal({ integrationId, systemId: record.id }, { title: record.name });
    },
    [openModal],
@@ -388,7 +447,10 @@ export default function BeszelSystemTableWidget({
  const table = (
    <div style={{ position: "relative", height: "100%" }}>
      <div style={{ position: "absolute", top: 4, right: 8, zIndex: 1 }}>
-        <IntegrationErrorIndicator results={results} />
+        <Group gap={0}>
+          <WidgetQueryErrorIndicator error={systemsQuery.error} label={t("name")} />
+          <IntegrationErrorIndicator results={results} />
+        </Group>
      </div>
      <HomarrDataTable
        isEditMode={isEditMode}
@@ -399,7 +461,7 @@ export default function BeszelSystemTableWidget({
        sortStatus={sortStatus}
        onSortStatusChange={setSortStatus}
        noRecordsText={t("noRecords")}
-        idAccessor="_key"
+        idAccessor="rowKey"
        storeColumnsKey={storeKey}
        onRowClick={isEditMode ? undefined : handleRowClick}
      />
@@ -25,7 +25,6 @@ const sortDirectionOptions = [

 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemTable", {
  icon: IconTable,
-  supportsAdvancedFocus: false,
  queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
  queryMatcher: (query, scope) =>
    query.path.at(-1) === "getSystems"
@@ -111,7 +111,7 @@ export default function BookmarksWidget({
  return (
    <Stack h="100%" mih={0} gap="sm" p={height < 120 ? "xs" : "sm"}>
      {options.title.length > 0 && (
-        <Title order={4} px="0.25rem" lineClamp={1}>
+        <Title order={4} px="0.25rem" lineClamp={displayMode === "advanced" ? undefined : 1}>
          {options.title}
        </Title>
      )}
@@ -283,14 +283,14 @@ const AdvancedBookmarksLayout = ({
                    style={{ width: 40, height: 40, flex: "0 0 auto" }}
                  />
                  <Stack gap={3} miw={0}>
-                    <Text fw={700} size="sm" truncate="end">
+                    <Text fw={700} size="sm">
                      {app.name}
                    </Text>
                    <Anchor component="span" size="xs" truncate="end">
                      {getBookmarkHostname(app.href)}
                    </Anchor>
                    {app.description && (
-                      <Text size="xs" c="dimmed" lineClamp={3}>
+                      <Text size="xs" c="dimmed">
                        {app.description}
                      </Text>
                    )}
@@ -10,13 +10,13 @@ import dayjs from "dayjs";

 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
-import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";
-import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n, useScopedI18n } from "@homarr/translation/client";

 import actionTargetClasses from "../common/action-target.module.css";
 import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { CalendarDay } from "./calender-day";
@@ -27,6 +27,7 @@ import {
  splitEvents,
  toCalendarDateKey,
 } from "./calendar-events";
+import type { CalendarEventWithSource } from "./calendar-event-list";
 import { CalendarEventList } from "./calendar-event-list";
 import classes from "./component.module.css";

@@ -53,6 +54,7 @@ export default function CalendarWidget(props: WidgetComponentProps<"calendar">)
        events={[]}
        failedIntegrations={[]}
        isPending={false}
+        queryError={undefined}
        month={month}
        setMonth={setMonth}
      />
@@ -79,7 +81,20 @@ const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options, d
  const data = getUsableWidgetQueryData(calendarQuery);
  const { isPending } = calendarQuery;

-  const events = useMemo(() => data?.flatMap((item) => item.events) ?? [], [data]);
+  const events = useMemo(
+    () =>
+      data?.flatMap(({ events: integrationEvents, integration, error }) =>
+        error
+          ? []
+          : integrationEvents.map(
+              (event): CalendarEventWithSource => ({
+                ...event,
+                source: { integrationId: integration.id, integrationName: integration.name },
+              }),
+            ),
+      ) ?? [],
+    [data],
+  );
  const failedIntegrations =
    data?.flatMap(({ integration, error }) =>
      error ? [{ integrationId: integration.id, integrationName: integration.name, error }] : [],
@@ -91,6 +106,7 @@ const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options, d
      events={events}
      failedIntegrations={failedIntegrations}
      isPending={isPending}
+      queryError={calendarQuery.error}
      month={month}
      setMonth={setMonth}
      options={options}
@@ -101,9 +117,10 @@ const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options, d

 interface CalendarBaseProps {
  isEditMode: boolean;
-  events: CalendarEvent[];
+  events: CalendarEventWithSource[];
  failedIntegrations: { integrationId: string; integrationName: string; error: string }[];
  isPending: boolean;
+  queryError: unknown;
  month: Date;
  setMonth: (date: Date) => void;
  options: WidgetComponentProps<"calendar">["options"];
@@ -115,11 +132,13 @@ const CalendarBase = ({
  events,
  failedIntegrations,
  isPending,
+  queryError,
  month,
  setMonth,
  options,
  displayMode,
 }: CalendarBaseProps) => {
+  const t = useI18n();
  const locale = useCurrentIntlLocale();
  const { firstDayOfWeek } = useSettings();
  const board = useRequiredBoard();
@@ -151,6 +170,8 @@ const CalendarBase = ({
        events={agendaEvents}
        failedIntegrations={failedIntegrations}
        isPending={isPending}
+        queryError={queryError}
+        queryErrorLabel={t("widget.calendar.name")}
        isEditMode={isEditMode}
        locale={locale}
        month={month}
@@ -161,9 +182,10 @@ const CalendarBase = ({

  return (
    <Stack ref={ref} h="100%" w="100%" gap="xs" style={{ overflow: "hidden" }}>
-      {failedIntegrations.length > 0 && (
+      {(failedIntegrations.length > 0 || Boolean(queryError)) && (
        <Group px="xs" justify="flex-end">
          <IntegrationErrorIndicator results={failedIntegrations} />
+          <WidgetQueryErrorIndicator error={queryError} label={t("widget.calendar.name")} />
        </Group>
      )}
      <Calendar
@@ -243,9 +265,11 @@ const CalendarBase = ({
 };

 interface CalendarAgendaProps {
-  events: CalendarEvent[];
+  events: CalendarEventWithSource[];
  failedIntegrations: CalendarBaseProps["failedIntegrations"];
  isPending: boolean;
+  queryError: unknown;
+  queryErrorLabel: string;
  isEditMode: boolean;
  locale: string;
  month: Date;
@@ -256,6 +280,8 @@ const CalendarAgenda = ({
  events,
  failedIntegrations,
  isPending,
+  queryError,
+  queryErrorLabel,
  isEditMode,
  locale,
  month,
@@ -301,7 +327,10 @@ const CalendarAgenda = ({
            </ActionIcon>
          </Tooltip>
        </Group>
-        {failedIntegrations.length > 0 && <IntegrationErrorIndicator results={failedIntegrations} />}
+        <Group gap={0}>
+          <IntegrationErrorIndicator results={failedIntegrations} />
+          <WidgetQueryErrorIndicator error={queryError} label={queryErrorLabel} />
+        </Group>
      </Group>

      <Box style={{ flex: 1, minHeight: 0 }}>
@@ -310,7 +339,7 @@ const CalendarAgenda = ({
            <Loader size="sm" />
          </Center>
        ) : events.length > 0 ? (
-          <CalendarEventList events={events} groupByDate locale={locale} fillHeight />
+          <CalendarEventList events={events} advanced groupByDate locale={locale} fillHeight />
        ) : (
          <Stack h="100%" align="center" justify="center" p="md">
            <Text c="dimmed" size="sm" ta="center">
@@ -6,7 +6,6 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("clock", {
  icon: IconClock,
-  supportsAdvancedFocus: true,
  queryKey: [["widget", "weather", "atLocation"]],
  queryMatcher: ({ input }, scope) => {
    const location = scope.options.weatherLocation;
@@ -1,17 +1,26 @@
 "use client";

-import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Badge, Box, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";

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

-import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
-import { createWidgetKey } from "./coolify-utils";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
+import { WidgetEmptyState } from "../common/empty-state";
+import type { WidgetComponentProps } from "../definition";
+import { createWidgetKey, getCoolifySectionVisibility } from "./coolify-utils";
 import { InstanceCard } from "./instance-card";
 import { SingleInstanceLayout } from "./single-instance-layout";
+import type { InstanceData } from "./types";

-export default function CoolifyWidget({ options, integrationIds, width, height }: WidgetComponentProps<"coolify">) {
+export default function CoolifyWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"coolify">) {
  const t = useScopedI18n("widget.coolify");

  if (integrationIds.length === 0) {
@@ -22,7 +31,18 @@ export default function CoolifyWidget({ options, integrationIds, width, height }
    );
  }

-  return <CoolifyContent integrationIds={integrationIds} options={options} width={width} height={height} />;
+  const isAdvanced = displayMode === "advanced";
+  const sectionVisibility = getCoolifySectionVisibility(options, displayMode);
+
+  return (
+    <CoolifyContent
+      integrationIds={integrationIds}
+      options={{ ...options, ...sectionVisibility }}
+      width={width}
+      height={height}
+      isAdvanced={isAdvanced}
+    />
+  );
 }

 interface CoolifyContentProps {
@@ -30,19 +50,24 @@ interface CoolifyContentProps {
  options: WidgetComponentProps<"coolify">["options"];
  width: number;
  height: number;
+  isAdvanced: boolean;
 }

-function CoolifyContent({ integrationIds, options, width, height }: CoolifyContentProps) {
+function CoolifyContent({ integrationIds, options, width, height, isAdvanced }: CoolifyContentProps) {
  const t = useScopedI18n("common");
  const instancesQuery = clientApi.widget.coolify.getInstancesInfo.useQuery({
    integrationIds,
  });
  const instancesData = getUsableWidgetQueryData(instancesQuery) ?? [];
  const { isPending } = instancesQuery;
+  const successfulInstances = instancesData.filter(
+    (instance): instance is InstanceData => instance.instanceInfo !== null,
+  );
+  const failedInstances = instancesData.filter((instance) => instance.instanceInfo === null);

  const isTiny = width < 256 || height < 144;
  const hideFooter = height < 112;
-  const [firstInstance] = instancesData;
+  const [firstInstance] = successfulInstances;
  const widgetKey = createWidgetKey(integrationIds);

  if (isPending) {
@@ -54,33 +79,77 @@ function CoolifyContent({ integrationIds, options, width, height }: CoolifyConte
      </Stack>
    );
  }
-
-  if (instancesData.length === 1 && firstInstance) {
+  if (successfulInstances.length === 0) {
    return (
-      <SingleInstanceLayout
-        instance={firstInstance}
-        options={options}
-        isTiny={isTiny}
-        widgetKey={widgetKey}
-        hideFooter={hideFooter}
-      />
+      <Stack h="100%" gap={0}>
+        <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+        <Box style={{ minHeight: 0, flex: 1 }}>
+          <WidgetEmptyState />
+        </Box>
+      </Stack>
+    );
+  }
+
+  if (successfulInstances.length === 1 && firstInstance) {
+    return (
+      <Stack h="100%" gap={0}>
+        <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+        <div style={{ minHeight: 0, flex: 1 }}>
+          <SingleInstanceLayout
+            instance={firstInstance}
+            options={options}
+            isTiny={!isAdvanced && isTiny}
+            isAdvanced={isAdvanced}
+            widgetKey={widgetKey}
+            hideFooter={!isAdvanced && hideFooter}
+          />
+        </div>
+      </Stack>
    );
  }

  return (
-    <ScrollArea h="100%">
-      <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="sm" p="xs">
-        {instancesData.map((instance) => (
-          <InstanceCard
-            key={instance.integrationId}
-            instance={instance}
-            options={options}
-            isTiny={isTiny}
-            widgetKey={widgetKey}
-            hideFooter={hideFooter}
-          />
-        ))}
-      </SimpleGrid>
-    </ScrollArea>
+    <Stack h="100%" gap={0}>
+      <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+      <ScrollArea style={{ minHeight: 0, flex: 1 }}>
+        <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="sm" p="xs">
+          {successfulInstances.map((instance) => (
+            <InstanceCard
+              key={instance.integrationId}
+              instance={instance}
+              options={options}
+              isTiny={!isAdvanced && isTiny}
+              isAdvanced={isAdvanced}
+              widgetKey={widgetKey}
+              hideFooter={!isAdvanced && hideFooter}
+            />
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
+    </Stack>
  );
 }
+
+const FailedSourceBadges = ({
+  sources,
+  queryError,
+}: {
+  sources: { integrationId: string; integrationName: string }[];
+  queryError: unknown;
+}) => {
+  const t = useScopedI18n("widget.coolify");
+  if (sources.length === 0 && !queryError) return null;
+
+  return (
+    <Group gap={4} p="xs" pb={0} wrap="wrap">
+      {sources.map((source) => (
+        <Badge key={source.integrationId} color="red" variant="light" size="xs">
+          {t("source.unavailable", { source: source.integrationName })}
+        </Badge>
+      ))}
+      <Box ml="auto">
+        <WidgetQueryErrorIndicator error={queryError} label={t("name")} />
+      </Box>
+    </Group>
+  );
+};
@@ -1,6 +1,7 @@
 "use client";

-import { Accordion, Anchor, Badge, Card, Group, Image, Text, Tooltip } from "@mantine/core";
+import { useState } from "react";
+import { Accordion, Anchor, Badge, Card, Group, Image, Stack, Text, Tooltip } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";

 import { useTimeAgo } from "@homarr/common";
@@ -8,7 +9,7 @@ import { useScopedI18n } from "@homarr/translation/client";

 import { ApplicationsSection } from "./applications-section";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
-import { buildServerResourceCounts, getBadgeColor, parseStatus } from "./coolify-utils";
+import { buildServerResourceCounts, getBadgeColor, isCoolifyServerOnline, parseStatus } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
 import type { CoolifyOptions, InstanceData } from "./types";
@@ -18,11 +19,12 @@ interface InstanceCardProps {
  instance: InstanceData;
  options: CoolifyOptions;
  isTiny: boolean;
+  isAdvanced: boolean;
  widgetKey: string;
  hideFooter: boolean;
 }

-export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter }: InstanceCardProps) {
+export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey, hideFooter }: InstanceCardProps) {
  const t = useScopedI18n("widget.coolify");
  const tCommon = useScopedI18n("common");
  const cardKey = `${widgetKey}-${instance.integrationId}`;
@@ -34,6 +36,7 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
    key: `coolify-sections-${cardKey}`,
    defaultValue: ["applications"],
  });
+  const [advancedOpenSections, setAdvancedOpenSections] = useState(["servers", "applications", "services"]);
  const serverResourceCounts = buildServerResourceCounts(
    instance.instanceInfo.servers,
    instance.instanceInfo.applications,
@@ -41,9 +44,10 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
  );

  const baseUrl = getSafeApplicationUrl(instance.integrationUrl)?.replace(/\/+$/, "") ?? "";
+  const displayUrl = baseUrl ? baseUrl.replace(/^https?:\/\//, "") : "—";
  const relativeTime = useTimeAgo(instance.updatedAt);

-  const onlineServers = instance.instanceInfo.servers.filter((s) => s.is_reachable !== false).length;
+  const onlineServers = instance.instanceInfo.servers.filter(isCoolifyServerOnline).length;
  const runningApps = instance.instanceInfo.applications.filter(
    (a) => parseStatus(a.status ?? "") === "running",
  ).length;
@@ -76,20 +80,27 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
        wrap="nowrap"
        style={{ borderBottom: "1px solid var(--mantine-color-dark-4)" }}
      >
-        <Group gap={4} wrap="nowrap">
+        <Group gap={4} wrap="nowrap" miw={0}>
          <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
-          <Anchor
-            component={baseUrl ? "a" : "span"}
-            href={baseUrl}
-            target={baseUrl ? "_blank" : undefined}
-            rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
-            fz={isTiny ? "10px" : "xs"}
-            fw={600}
-            c="inherit"
-            lineClamp={1}
-          >
-            {instance.integrationName}
-          </Anchor>
+          <Stack gap={0} miw={0}>
+            <Anchor
+              component={baseUrl ? "a" : "span"}
+              href={baseUrl}
+              target={baseUrl ? "_blank" : undefined}
+              rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
+              fz={isTiny ? "10px" : "xs"}
+              fw={600}
+              c="inherit"
+              lineClamp={1}
+            >
+              {instance.integrationName}
+            </Anchor>
+            {isAdvanced && (
+              <Text fz="10px" c="dimmed" truncate="end">
+                {t("source.url", { url: displayUrl })}
+              </Text>
+            )}
+          </Stack>
        </Group>
        <Group gap={4} wrap="nowrap">
          {isTiny && totalResources > 0 ? (
@@ -125,13 +136,20 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
        </Group>
      </Group>

-      <Accordion variant="filled" chevronPosition="right" multiple value={openSections} onChange={setOpenSections}>
+      <Accordion
+        variant="filled"
+        chevronPosition="right"
+        multiple
+        value={isAdvanced ? advancedOpenSections : openSections}
+        onChange={isAdvanced ? setAdvancedOpenSections : setOpenSections}
+      >
        {options.showServers && (
          <ServersSection
            servers={instance.instanceInfo.servers}
            serverResourceCounts={serverResourceCounts}
            baseUrl={baseUrl}
            isTiny={isTiny}
+            isAdvanced={isAdvanced}
            showIp={showIp}
            onToggleIp={() => setShowIp((prev) => !prev)}
          />
@@ -140,7 +158,12 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
          <ApplicationsSection applications={instance.instanceInfo.applications} baseUrl={baseUrl} isTiny={isTiny} />
        )}
        {options.showServices && (
-          <ServicesSection services={instance.instanceInfo.services} baseUrl={baseUrl} isTiny={isTiny} />
+          <ServicesSection
+            services={instance.instanceInfo.services}
+            baseUrl={baseUrl}
+            isTiny={isTiny}
+            isAdvanced={isAdvanced}
+          />
        )}
      </Accordion>

@@ -1,20 +1,28 @@
 "use client";

 import { Accordion, ActionIcon, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
-import { IconCircleCheckFilled, IconCircleXFilled, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
+import {
+  IconCircleCheckFilled,
+  IconCircleFilled,
+  IconCircleXFilled,
+  IconEye,
+  IconEyeOff,
+  IconServer,
+} from "@tabler/icons-react";

 import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";

 import actionTargetClasses from "../common/action-target.module.css";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
-import { getBadgeColor } from "./coolify-utils";
+import { getBadgeColor, getCoolifyServerState, isCoolifyServerOnline } from "./coolify-utils";

 interface ServersSectionProps {
  servers: CoolifyServer[];
  serverResourceCounts: Map<number, { apps: number; services: number }>;
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
  showIp: boolean;
  onToggleIp: () => void;
 }
@@ -24,12 +32,13 @@ export function ServersSection({
  serverResourceCounts,
  baseUrl,
  isTiny,
+  isAdvanced,
  showIp,
  onToggleIp,
 }: ServersSectionProps) {
  const t = useScopedI18n("widget.coolify");
  const tCommon = useScopedI18n("common");
-  const onlineServers = servers.filter((server) => server.is_reachable !== false).length;
+  const onlineServers = servers.filter(isCoolifyServerOnline).length;

  return (
    <Accordion.Item value="servers">
@@ -67,6 +76,7 @@ export function ServersSection({
                }
                baseUrl={baseUrl}
                isTiny={isTiny}
+                isAdvanced={isAdvanced}
                showIp={showIp}
              />
            ))}
@@ -86,23 +96,28 @@ interface ServerRowProps {
  counts: { apps: number; services: number };
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
  showIp: boolean;
 }

-function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps) {
+function ServerRow({ server, counts, baseUrl, isTiny, isAdvanced, showIp }: ServerRowProps) {
  const t = useScopedI18n("widget.coolify");
  const isBuildServer = server.settings?.is_build_server === true;
-  const isOnline = server.is_reachable !== false;
+  const reachability = getCoolifyServerState(server, "is_reachable");
+  const usability = getCoolifyServerState(server, "is_usable");
  const serverUrl = getSafeApplicationUrl(`${baseUrl}/server/${server.uuid}`);
-  const StatusIcon = isOnline ? IconCircleCheckFilled : IconCircleXFilled;
+  const status = reachability === true ? "online" : reachability === false ? "offline" : "unknown";
+  const StatusIcon =
+    reachability === true ? IconCircleCheckFilled : reachability === false ? IconCircleXFilled : IconCircleFilled;
+  const statusColor = reachability === true ? "green" : reachability === false ? "red" : "gray";

  return (
    <Stack gap={0}>
      <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
        <StatusIcon
-          aria-label={t(isOnline ? "status.online" : "status.offline")}
+          aria-label={t(`status.${status}`)}
          size={isTiny ? 12 : 16}
-          color={`var(--mantine-color-${isOnline ? "green" : "red"}-6)`}
+          color={`var(--mantine-color-${statusColor}-6)`}
        />
        <Anchor
          className={actionTargetClasses.root}
@@ -129,9 +144,30 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
      </Group>
      <Group wrap="nowrap" gap={4} ml={16}>
        <Text fz="10px" c="dimmed">
-          {showIp ? server.ip : "***.***.***.***"}
+          {showIp ? (server.ip ?? "—") : "***.***.***.***"}
        </Text>
      </Group>
+      {isAdvanced && (
+        <Group gap={4} ml={16} wrap="wrap">
+          <ServerStateBadge field="reachability" value={reachability} />
+          <ServerStateBadge field="usability" value={usability} />
+        </Group>
+      )}
    </Stack>
  );
 }
+
+const ServerStateBadge = ({ field, value }: { field: "reachability" | "usability"; value: boolean | undefined }) => {
+  const t = useScopedI18n("widget.coolify");
+  const status =
+    value === undefined
+      ? t("status.unknown")
+      : field === "reachability"
+        ? t(value ? "status.reachable" : "status.unreachable")
+        : t(value ? "status.usable" : "status.unusable");
+  return (
+    <Badge size="xs" variant="light" color={value === true ? "green" : value === false ? "red" : "gray"}>
+      {t(`server.${field}`)}: {status}
+    </Badge>
+  );
+};
@@ -1,21 +1,24 @@
 "use client";

-import { Accordion, Badge, Group, Stack, Text } from "@mantine/core";
+import { Accordion, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
 import { IconStack2 } from "@tabler/icons-react";

 import type { CoolifyServiceWithContext } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";

-import { getBadgeColor, parseStatus } from "./coolify-utils";
+import actionTargetClasses from "../common/action-target.module.css";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { cleanFqdn, getBadgeColor, getStatusColor, parseStatus } from "./coolify-utils";
 import { ResourceRow } from "./resource-row";

 interface ServicesSectionProps {
  services: CoolifyServiceWithContext[];
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
 }

-export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionProps) {
+export function ServicesSection({ services, baseUrl, isTiny, isAdvanced }: ServicesSectionProps) {
  const t = useScopedI18n("widget.coolify");
  const tCommon = useScopedI18n("common");
  const runningServices = services.filter((svc) => parseStatus(svc.status ?? "") === "running").length;
@@ -34,7 +37,19 @@ export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionPr
        {services.length > 0 ? (
          <Stack gap={4}>
            {services.map((service) => (
-              <ResourceRow key={service.uuid} item={service} baseUrl={baseUrl} isTiny={isTiny} resourceType="service" />
+              <Stack key={service.uuid} gap={2}>
+                <ResourceRow item={service} baseUrl={baseUrl} isTiny={isTiny} resourceType="service" />
+                {isAdvanced && service.applications && service.applications.length > 0 && (
+                  <Stack gap={2} ml="lg">
+                    <Text fz="10px" c="dimmed">
+                      {tCommon("applications")}
+                    </Text>
+                    {service.applications.map((application) => (
+                      <ServiceApplicationRow key={application.uuid} application={application} />
+                    ))}
+                  </Stack>
+                )}
+              </Stack>
            ))}
          </Stack>
        ) : (
@@ -46,3 +61,45 @@ export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionPr
    </Accordion.Item>
  );
 }
+
+type ServiceApplication = NonNullable<CoolifyServiceWithContext["applications"]>[number];
+
+const ServiceApplicationRow = ({ application }: { application: ServiceApplication }) => {
+  const t = useScopedI18n("widget.coolify");
+  const status = parseStatus(application.status ?? "");
+  const publicUrl = getSafeApplicationUrl(cleanFqdn(application.fqdn));
+  const statusLabel =
+    status === "running" ||
+    status === "stopped" ||
+    status === "exited" ||
+    status === "starting" ||
+    status === "restarting"
+      ? t(`status.${status}`)
+      : t("status.unknown");
+
+  return (
+    <Group gap={4} wrap="nowrap">
+      <Badge size="xs" variant="dot" color={getStatusColor(status)}>
+        {statusLabel}
+      </Badge>
+      {publicUrl ? (
+        <Anchor
+          className={actionTargetClasses.root}
+          href={publicUrl}
+          target="_blank"
+          rel={SAFE_NEW_TAB_REL}
+          fz="xs"
+          c="inherit"
+          truncate="end"
+          style={{ textDecoration: "none" }}
+        >
+          {application.name}
+        </Anchor>
+      ) : (
+        <Text fz="xs" truncate="end">
+          {application.name}
+        </Text>
+      )}
+    </Group>
+  );
+};
@@ -1,5 +1,6 @@
 "use client";

+import { useState } from "react";
 import { Accordion, Anchor, Group, Image, ScrollArea, Stack, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";

@@ -18,11 +19,19 @@ interface SingleInstanceLayoutProps {
  instance: InstanceData;
  options: CoolifyOptions;
  isTiny: boolean;
+  isAdvanced: boolean;
  widgetKey: string;
  hideFooter: boolean;
 }

-export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hideFooter }: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({
+  instance,
+  options,
+  isTiny,
+  isAdvanced,
+  widgetKey,
+  hideFooter,
+}: SingleInstanceLayoutProps) {
  const t = useScopedI18n("widget.coolify");
  const [showIp, setShowIp] = useLocalStorage({
    key: `coolify-show-ip-${widgetKey}`,
@@ -32,6 +41,7 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hid
    key: `coolify-sections-${widgetKey}`,
    defaultValue: ["applications"],
  });
+  const [advancedOpenSections, setAdvancedOpenSections] = useState(["servers", "applications", "services"]);
  const serverResourceCounts = buildServerResourceCounts(
    instance.instanceInfo.servers,
    instance.instanceInfo.applications,
@@ -52,27 +62,41 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hid
              oolify
            </Text>
          </Group>
-          <Anchor
-            component={baseUrl ? "a" : "span"}
-            href={baseUrl}
-            target={baseUrl ? "_blank" : undefined}
-            rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
-            fz={isTiny ? "xs" : "sm"}
-            fw={500}
-            c="dimmed"
-            lineClamp={1}
-          >
-            {displayUrl}
-          </Anchor>
+          <Stack gap={0} miw={0}>
+            {isAdvanced && (
+              <Text fz="xs" fw={600} truncate="end">
+                {instance.integrationName}
+              </Text>
+            )}
+            <Anchor
+              component={baseUrl ? "a" : "span"}
+              href={baseUrl}
+              target={baseUrl ? "_blank" : undefined}
+              rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
+              fz={isTiny ? "xs" : "sm"}
+              fw={500}
+              c="dimmed"
+              lineClamp={1}
+            >
+              {isAdvanced ? t("source.url", { url: displayUrl }) : displayUrl}
+            </Anchor>
+          </Stack>
        </Group>

-        <Accordion variant="contained" chevronPosition="right" multiple value={openSections} onChange={setOpenSections}>
+        <Accordion
+          variant="contained"
+          chevronPosition="right"
+          multiple
+          value={isAdvanced ? advancedOpenSections : openSections}
+          onChange={isAdvanced ? setAdvancedOpenSections : setOpenSections}
+        >
          {options.showServers && (
            <ServersSection
              servers={instance.instanceInfo.servers}
              serverResourceCounts={serverResourceCounts}
              baseUrl={baseUrl}
              isTiny={isTiny}
+              isAdvanced={isAdvanced}
              showIp={showIp}
              onToggleIp={() => setShowIp((prev) => !prev)}
            />
@@ -81,7 +105,12 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hid
            <ApplicationsSection applications={instance.instanceInfo.applications} baseUrl={baseUrl} isTiny={isTiny} />
          )}
          {options.showServices && (
-            <ServicesSection services={instance.instanceInfo.services} baseUrl={baseUrl} isTiny={isTiny} />
+            <ServicesSection
+              services={instance.instanceInfo.services}
+              baseUrl={baseUrl}
+              isTiny={isTiny}
+              isAdvanced={isAdvanced}
+            />
          )}
        </Accordion>

@@ -6,6 +6,7 @@ import { useState } from "react";
 import {
  ActionIcon,
  Badge,
+  Box,
  Button,
  Card,
  Flex,
@@ -33,7 +34,9 @@ import { MaskedOrNormalImage } from "@homarr/ui";

 import type { widgetKind } from ".";
 import type { WidgetComponentProps } from "../../definition";
+import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import { getUsableWidgetQueryData } from "../../common/query-state";
+import { WidgetQueryErrorIndicator } from "../../common/query-state-indicator";
 import actionTargetClasses from "../../common/action-target.module.css";
 import classes from "./component.module.css";
 import TimerModal from "./TimerModal";
@@ -41,6 +44,15 @@ import TimerModal from "./TimerModal";
 const dnsLightStatus = (enabled: boolean | undefined) =>
  `var(--mantine-color-${typeof enabled === "undefined" ? "blue" : enabled ? "green" : "red"}-6`;

+type DnsSummaryResult = RouterOutputs["widget"]["dnsHole"]["summary"][number];
+type AvailableDnsSummaryResult = DnsSummaryResult & {
+  summary: NonNullable<DnsSummaryResult["summary"]>;
+  integration: DnsSummaryResult["integration"] & { updatedAt: Date };
+};
+
+const isAvailableDnsSummaryResult = (result: DnsSummaryResult): result is AvailableDnsSummaryResult =>
+  result.summary !== null && result.integration.updatedAt !== undefined;
+
 export default function DnsHoleControlsWidget({
  options,
  integrationIds,
@@ -55,7 +67,8 @@ export default function DnsHoleControlsWidget({
    .filter((id) => integrationIds.includes(id));

  const summaryQuery = clientApi.widget.dnsHole.summary.useQuery({ integrationIds });
-  const summaries = getUsableWidgetQueryData(summaryQuery) ?? [];
+  const summaryResults = getUsableWidgetQueryData(summaryQuery) ?? [];
+  const summaries = summaryResults.filter(isAvailableDnsSummaryResult);
  const { isPending: isSummaryPending } = summaryQuery;
  const utils = clientApi.useUtils();

@@ -84,7 +97,7 @@ export default function DnsHoleControlsWidget({
        if (!prevData) return [];

        return prevData.map((item) =>
-          item.integration.id === integrationId
+          item.integration.id === integrationId && item.summary
            ? {
                ...item,
                summary: {
@@ -147,7 +160,14 @@ export default function DnsHoleControlsWidget({
      p="sm"
      gap="sm"
      style={{ pointerEvents: isEditMode ? "none" : undefined }}
+      pos="relative"
    >
+      <Box pos="absolute" top={4} right={4} style={{ zIndex: 2 }}>
+        <Group gap={0}>
+          <IntegrationErrorIndicator results={summaryResults} />
+          <WidgetQueryErrorIndicator error={summaryQuery.error} label={t("widget.dnsHoleControls.name")} />
+        </Group>
+      </Box>
      {controlAllButtonsVisible && (
        <Flex className="dns-hole-controls-buttons" gap="sm">
          <Tooltip label={t("widget.dnsHoleControls.controls.enableAll")}>
@@ -260,7 +280,7 @@ export default function DnsHoleControlsWidget({
 interface ControlsCardProps {
  integrationsWithInteractions: string[];
  toggleDns: (integrationId: string) => Promise<void>;
-  data: RouterOutputs["widget"]["dnsHole"]["summary"][number];
+  data: AvailableDnsSummaryResult;
  setSelectedIntegrationIds: (integrationId: string[]) => void;
  open: () => void;
  t: TranslationFunction;
@@ -53,11 +53,18 @@ import { showErrorNotification } from "@homarr/notifications";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";

 import type { WidgetComponentProps } from "../definition";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import { HomarrDataTable } from "../common/homarr-data-table";
 import { formatLocalizedDateTime } from "../common/locale";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
-import { filterDownloadItemsByStatus, getAvailableDownloadStates } from "./helpers";
+import {
+  DOWNLOAD_COLUMN_ACCESSORS,
+  filterDownloadItemsByStatus,
+  getAvailableDownloadStates,
+  getDownloadColumnAccessors,
+} from "./helpers";

 dayjs.extend(relativeTime);

@@ -84,6 +91,7 @@ interface ColumnContext {
  hasTorrents: boolean;
  hasMultipleClients: boolean;
  hasMultipleTypes: boolean;
+  isAdvanced: boolean;
  size: SizeConfig;
 }

@@ -143,8 +151,8 @@ const columnVisibilityChecks: Partial<Record<string, (ctx: ColumnContext) => boo
  upSpeed: (ctx) => ctx.hasTorrents && ctx.size.showSpeedColumns,
  ratio: (ctx) => ctx.hasTorrents,
  sent: (ctx) => ctx.hasTorrents,
-  integration: (ctx) => ctx.hasMultipleClients,
-  type: (ctx) => ctx.hasMultipleTypes,
+  integration: (ctx) => ctx.isAdvanced || ctx.hasMultipleClients,
+  type: (ctx) => ctx.isAdvanced || ctx.hasMultipleTypes,
  downSpeed: (ctx) => ctx.size.showSpeedColumns,
  time: (ctx) => ctx.size.showTimeColumn,
  state: (ctx) => ctx.size.showStateColumn,
@@ -171,24 +179,6 @@ function progressColor(state: DownloadState, progress: number): string {
  return "blue";
 }

-const columnAccessors = [
-  "name",
-  "progress",
-  "size",
-  "downSpeed",
-  "upSpeed",
-  "time",
-  "state",
-  "added",
-  "ratio",
-  "received",
-  "sent",
-  "category",
-  "integration",
-  "index",
-  "type",
-] as const;
-
 function toCategoryArray(category: string | string[]): string[] {
  if (Array.isArray(category)) return category;
  return [category];
@@ -320,10 +310,17 @@ export default function DownloadClientsWidget({
    integrationIds,
    limitPerIntegration: options.limitPerIntegration,
  });
-  const currentItems = getUsableWidgetQueryData(downloadsQuery) ?? [];
+  const currentItems = getUsableWidgetQueryData(downloadsQuery);
+  const availableItems = useMemo(() => currentItems?.filter((item) => item.data !== null) ?? [], [currentItems]);
  const { isFetching } = downloadsQuery;

  const t = useScopedI18n("widget.downloads");
+  const queryIndicators = (
+    <Group gap={0}>
+      <IntegrationErrorIndicator results={currentItems ?? []} />
+      <WidgetQueryErrorIndicator error={downloadsQuery.error} label={t("name")} />
+    </Group>
+  );

  const [clientFilter, setClientFilter] = useState<string[]>([]);
  const [statusFilter, setStatusFilter] = useState<string[]>([]);
@@ -370,7 +367,7 @@ export default function DownloadClientsWidget({
  }, [options.defaultSort, defaultSortDirection]);

  const eligibleData = useMemo<ExtendedDownloadClientItem[]>(() => {
-    return currentItems
+    return availableItems
      .filter(({ integration }) => integrationIds.includes(integration.id))
      .flatMap((pair) =>
        pair.data.items
@@ -399,7 +396,7 @@ export default function DownloadClientsWidget({
          }),
      );
  }, [
-    currentItems,
+    availableItems,
    integrationIds,
    integrationInteractSet,
    mutateDeleteItem,
@@ -422,7 +419,7 @@ export default function DownloadClientsWidget({
  }, [data, sortStatus]);

  const clients = useMemo<ExtendedClientStatus[]>(() => {
-    return currentItems
+    return availableItems
      .filter(({ integration }) => integrationIds.includes(integration.id))
      .map(({ integration, data: clientData }): ExtendedClientStatus => {
        const interact = integrationInteractSet.has(integration.id);
@@ -459,7 +456,7 @@ export default function DownloadClientsWidget({
        };
      });
  }, [
-    currentItems,
+    availableItems,
    integrationIds,
    integrationInteractSet,
    options.applyFilterToRatio,
@@ -472,10 +469,13 @@ export default function DownloadClientsWidget({
  const hasMultipleTypes = new Set(data.map(({ type }) => type)).size > 1;

  const size = useMemo(() => getSizeConfig(width, height, isAdvanced), [height, isAdvanced, width]);
-  const optionsColumnSet = useMemo(() => new Set<string>(options.columns), [options.columns]);
+  const optionsColumnSet = useMemo(
+    () => new Set<string>(getDownloadColumnAccessors(options.columns, isAdvanced)),
+    [isAdvanced, options.columns],
+  );
  const columnContext = useMemo<ColumnContext>(
-    () => ({ optionsColumnSet, hasTorrents, hasMultipleClients, hasMultipleTypes, size }),
-    [optionsColumnSet, hasTorrents, hasMultipleClients, hasMultipleTypes, size],
+    () => ({ optionsColumnSet, hasTorrents, hasMultipleClients, hasMultipleTypes, isAdvanced, size }),
+    [optionsColumnSet, hasTorrents, hasMultipleClients, hasMultipleTypes, isAdvanced, size],
  );

  let progressColumnWidth = 120;
@@ -688,7 +688,7 @@ export default function DownloadClientsWidget({

  const { effectiveColumns, storeKey } = usePersistedTableLayout({
    columns,
-    columnAccessors,
+    columnAccessors: DOWNLOAD_COLUMN_ACCESSORS,
    columnOrder: options.columnOrder,
    columnWidths: options.columnWidths,
    itemId,
@@ -733,11 +733,16 @@ export default function DownloadClientsWidget({
    return { stateCounts, totalSize, completedSize, totalItems: data.length };
  }, [data]);

-  if (options.columns.length === 0) {
+  if (!isAdvanced && options.columns.length === 0) {
    return (
-      <Center h="100%">
-        <Text>{t("errors.noColumns")}</Text>
-      </Center>
+      <Box h="100%" pos="relative">
+        <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+          {queryIndicators}
+        </Box>
+        <Center h="100%">
+          <Text>{t("errors.noColumns")}</Text>
+        </Center>
+      </Box>
    );
  }

@@ -759,10 +764,13 @@ export default function DownloadClientsWidget({
      )}

      <Box style={{ flex: 1, minHeight: 0, position: "relative" }}>
+        <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+          {queryIndicators}
+        </Box>
        <HomarrDataTable
          isEditMode={isEditMode}
          cellPadding={`${size.cellPadding}px 8px`}
-          fetching={isFetching && currentItems.length === 0}
+          fetching={isFetching && (currentItems?.length ?? 0) === 0}
          fz={size.fontSize}
          records={sortedData}
          columns={effectiveColumns}
@@ -2,28 +2,10 @@ import { IconDownload } from "@tabler/icons-react";
 import { z } from "zod/v4";

 import { getIntegrationKindsByCategory } from "@homarr/definitions";
-import type { ExtendedDownloadClientItem } from "@homarr/integrations";

 import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
-
-const columnsList = [
-  "name",
-  "progress",
-  "size",
-  "downSpeed",
-  "upSpeed",
-  "time",
-  "state",
-  "added",
-  "ratio",
-  "received",
-  "sent",
-  "category",
-  "integration",
-  "index",
-  "type",
-] as const satisfies (keyof ExtendedDownloadClientItem)[];
+import { DOWNLOAD_COLUMN_ACCESSORS } from "./helpers";

 const sortColumns = [
  "name",
@@ -38,7 +20,7 @@ const sortColumns = [
  "sent",
  "index",
  "type",
-] as const satisfies readonly (typeof columnsList)[number][];
+] as const satisfies readonly (typeof DOWNLOAD_COLUMN_ACCESSORS)[number][];

 export const { definition, componentLoader } = createWidgetDefinition("downloads", {
  icon: IconDownload,
@@ -55,7 +37,7 @@ export const { definition, componentLoader } = createWidgetDefinition("downloads
      (factory) => ({
        columns: factory.multiSelect({
          defaultValue: ["name", "progress", "downSpeed", "time", "state"],
-          options: columnsList.map((value) => ({
+          options: DOWNLOAD_COLUMN_ACCESSORS.map((value) => ({
            value,
            label: (t) => t(`widget.downloads.items.${value}.columnTitle`),
          })),
@@ -35,11 +35,7 @@ const storageDeviceNamesMatch = (leftDeviceName: string, rightDeviceName: string
  );
 };

-const matchesVisibleStorageVolume = (
-  visibleVolume: string,
-  integrationId: string,
-  deviceName: string,
-): boolean => {
+const matchesVisibleStorageVolume = (visibleVolume: string, integrationId: string, deviceName: string): boolean => {
  const separatorIndex = visibleVolume.indexOf(":");
  if (separatorIndex === -1) {
    return storageDeviceNamesMatch(visibleVolume, deviceName);
@@ -24,6 +24,8 @@ import {
  IconCpu2,
  IconFileReport,
  IconInfoCircle,
+  IconPackages,
+  IconRefreshAlert,
  IconServer,
  IconTemperature,
  IconVersions,
@@ -41,7 +43,9 @@ import { useI18n } from "@homarr/translation/client";

 import { filterStorageVolumes, normalizeStorageDeviceName } from "../filter-storage-volumes";
 import { WidgetEmptyState } from "../common/empty-state";
-import { getUsableWidgetQueryData } from "../common/query-state";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import actionTargetClasses from "../common/action-target.module.css";
 import { CpuRing } from "./rings/cpu-ring";
@@ -60,21 +64,46 @@ export const SystemHealthMonitoring = ({
  withScrollArea = true,
 }: WidgetComponentProps<"healthMonitoring"> & { withScrollArea?: boolean }) => {
  const t = useI18n();
-  const healthData =
-    getUsableWidgetQueryData(clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds })) ??
-    [];
+  const healthQuery = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
+  const healthResults = getUsableWidgetQueryData(healthQuery) ?? [];
+  const healthData = healthResults.filter(
+    (entry): entry is typeof entry & { healthInfo: NonNullable<typeof entry.healthInfo> } => entry.healthInfo !== null,
+  );
  const [openedIntegrationId, setOpenedIntegrationId] = useState<string | null>(null);
  const board = useRequiredBoard();

  const isAdvanced = displayMode === "advanced";
  const isTiny = !isAdvanced && width < 256;
+  const showCpu = isAdvanced || options.cpu;
+  const showMemory = isAdvanced || options.memory;
+  const showGpu = isAdvanced || options.gpu;
+  const showFileSystem = isAdvanced || options.fileSystem;
+  const queryIndicators = (
+    <Group gap={0}>
+      <IntegrationErrorIndicator results={healthResults} />
+      <WidgetQueryErrorIndicator error={healthQuery.error} label={t("widget.healthMonitoring.name")} />
+    </Group>
+  );

-  if (healthData.length === 0) return <WidgetEmptyState />;
+  if (isInitialWidgetQueryPending(healthQuery)) return <WidgetQueryLoadingState />;
+  if (healthData.length === 0) {
+    return (
+      <Box h="100%" pos="relative">
+        <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+          {queryIndicators}
+        </Box>
+        <WidgetEmptyState />
+      </Box>
+    );
+  }

  const Container = withScrollArea ? ScrollArea : Box;

  return (
-    <Container h={withScrollArea ? "100%" : undefined}>
+    <Container h={withScrollArea ? "100%" : undefined} pos="relative">
+      <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+        {queryIndicators}
+      </Box>
      <Stack mih="100%" gap="sm" className="health-monitoring">
        {healthData.map(({ integrationId, integrationName, healthInfo }) => {
          const filteredFileSystem = filterStorageVolumes(
@@ -145,18 +174,18 @@ export const SystemHealthMonitoring = ({
                </Modal>
              </Box>
              <Flex className="health-monitoring-information-card-elements" justify="center" align="center" wrap="wrap">
-                {options.cpu && <CpuRing cpuUtilization={healthInfo.cpuUtilization} isTiny={isTiny} />}
-                {options.cpu && (
+                {showCpu && <CpuRing cpuUtilization={healthInfo.cpuUtilization} isTiny={isTiny} />}
+                {showCpu && (
                  <CpuTempRing fahrenheit={options.fahrenheit} cpuTemp={healthInfo.cpuTemp} isTiny={isTiny} />
                )}
-                {options.memory && (
+                {showMemory && (
                  <MemoryRing
                    available={healthInfo.memAvailableInBytes}
                    used={healthInfo.memUsedInBytes}
                    isTiny={isTiny}
                  />
                )}
-                {options.gpu &&
+                {showGpu &&
                  healthInfo.gpu.map((gpu) => (
                    <GpuRing key={gpu.gpuId} gpu={gpu} isTiny={isTiny} fahrenheit={options.fahrenheit} />
                  ))}
@@ -166,7 +195,7 @@ export const SystemHealthMonitoring = ({
                  <SystemInformationList healthInfo={healthInfo} memoryUsage={memoryUsage} t={t} compact />
                </Card>
              )}
-              {options.fileSystem &&
+              {showFileSystem &&
                disksData.map((disk) => {
                  return (
                    <Card
@@ -242,7 +271,9 @@ export const SystemHealthMonitoring = ({
  );
 };

-type HealthInfo = RouterOutputs["widget"]["healthMonitoring"]["getSystemHealthStatus"][number]["healthInfo"];
+type HealthInfo = NonNullable<
+  RouterOutputs["widget"]["healthMonitoring"]["getSystemHealthStatus"][number]["healthInfo"]
+>;

 const SystemInformationList = ({
  healthInfo,
@@ -285,6 +316,14 @@ const SystemInformationList = ({
        {healthInfo.loadAverage["5min"]}% / {healthInfo.loadAverage["15min"]}%
      </List.Item>
    )}
+    <List.Item className="health-monitoring-information-updates" icon={<IconPackages size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.updatesAvailable", { count: healthInfo.availablePkgUpdates })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-reboot" icon={<IconRefreshAlert size={compact ? 18 : 30} />}>
+      {healthInfo.rebootRequired
+        ? t("widget.healthMonitoring.popover.rebootRequired")
+        : t("widget.healthMonitoring.popover.rebootNotRequired")}
+    </List.Item>
  </List>
 );

@@ -13,7 +13,6 @@ const createOptions = () =>
  }));

 export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
-  supportsAdvancedFocus: false,
  icon: IconReportSearch,
  contextActions: ({ widgetRuntimeRef, context }) => [
    {
@@ -28,6 +28,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import { WidgetEmptyState } from "../common/empty-state";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
@@ -45,18 +46,19 @@ export default function MediaMissingWidget({
 }: WidgetComponentProps<"mediaMissing">) {
  const t = useScopedI18n("widget.mediaMissing");
  const isAdvanced = displayMode === "advanced";
+  const showMissing = isAdvanced || options.showMissing;
+  const showQueued = isAdvanced || options.showQueued;
  const pageSize = isAdvanced ? Math.max(Number(options.pageSize), 50) : Number(options.pageSize);
  const input = { integrationIds, pageSize };
  useWidgetRuntimeQueries(widgetRuntimeRef, [getQueryKey(clientApi.widget.mediaOrganizer.getData, input, "query")]);
-  const data = getUsableWidgetQueryData(
-    clientApi.widget.mediaOrganizer.getData.useQuery(input, {
-      staleTime: 60 * 1000,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    }),
-  );
-  const [selectedTab, setSelectedTab] = useState<MediaMissingTab>(options.showMissing ? "missing" : "queued");
-  const activeTab = resolveMediaMissingTab(selectedTab, options.showMissing, options.showQueued);
+  const mediaQuery = clientApi.widget.mediaOrganizer.getData.useQuery(input, {
+    staleTime: 60 * 1000,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
+  const data = getUsableWidgetQueryData(mediaQuery);
+  const [selectedTab, setSelectedTab] = useState<MediaMissingTab>(showMissing ? "missing" : "queued");
+  const activeTab = resolveMediaMissingTab(selectedTab, showMissing, showQueued);

  useEffect(() => {
    if (activeTab !== null && activeTab !== selectedTab) setSelectedTab(activeTab);
@@ -64,7 +66,7 @@ export default function MediaMissingWidget({

  if (!data) return <WidgetEmptyState />;
  if (data.length === 0) throw new NoIntegrationDataError();
-  if (!options.showMissing && !options.showQueued)
+  if (!showMissing && !showQueued)
    return (
      <Center h="100%" p="sm">
        <Text c="dimmed" size="sm" ta="center">
@@ -79,7 +81,7 @@ export default function MediaMissingWidget({
  const queuedCount = data.reduce((sum, entry) => sum + entry.queuedCount, 0);
  const failedIntegrations = data.filter((entry): entry is typeof entry & { error: string } => Boolean(entry.error));

-  const enabledPanelCount = Number(options.showMissing) + Number(options.showQueued);
+  const enabledPanelCount = Number(showMissing) + Number(showQueued);
  const panelWidth = isAdvanced && enabledPanelCount > 1 ? width / enabledPanelCount : width;
  const isThin = !isAdvanced && panelWidth > 0 && panelWidth < 160;
  const isShort = !isAdvanced && height > 0 && height < 180;
@@ -102,7 +104,12 @@ export default function MediaMissingWidget({
        ) : (
          <SimpleGrid cols={columns} spacing="xs" verticalSpacing="xs">
            {entries.map(({ item, integrationId }) => (
-              <MediaCard key={`${integrationId}-${item.type}-${item.id}`} item={item} density={density} />
+              <MediaCard
+                key={`${integrationId}-${item.type}-${item.id}`}
+                item={item}
+                density={density}
+                showQueueDetails={isAdvanced}
+              />
            ))}
          </SimpleGrid>
        )}
@@ -121,13 +128,17 @@ export default function MediaMissingWidget({
      ))}
    </Group>
  );
+  const queryFailure = <WidgetQueryErrorIndicator error={mediaQuery.error} label={t("name")} />;

  if (isAdvanced) {
    return (
      <Stack h="100%" gap={0}>
-        {partialFailures}
+        <Group justify="flex-end" px="xs">
+          {queryFailure}
+          {partialFailures}
+        </Group>
        <SimpleGrid cols={enabledPanelCount} spacing="sm" p="sm" style={{ flex: 1, minHeight: 0 }}>
-          {options.showMissing && (
+          {showMissing && (
            <Paper withBorder radius="sm" style={{ minHeight: 0, overflow: "hidden" }}>
              <Group p="xs" gap="xs">
                <IconQuestionMark size={16} />
@@ -138,7 +149,7 @@ export default function MediaMissingWidget({
              <Box h="calc(100% - 40px)">{renderPanel(missing, t("empty.missing"))}</Box>
            </Paper>
          )}
-          {options.showQueued && (
+          {showQueued && (
            <Paper withBorder radius="sm" style={{ minHeight: 0, overflow: "hidden" }}>
              <Group p="xs" gap="xs">
                <IconDownload size={16} />
@@ -163,26 +174,29 @@ export default function MediaMissingWidget({
      h="100%"
      style={{ display: "flex", flexDirection: "column" }}
    >
-      {partialFailures}
+      <Group justify="flex-end" px="xs">
+        {queryFailure}
+        {partialFailures}
+      </Group>
      <Tabs.List grow>
-        {options.showMissing && (
+        {showMissing && (
          <Tabs.Tab value="missing" px={isThin ? 6 : undefined} leftSection={<IconQuestionMark size={14} />}>
            {tabLabel(t("tab.missing"), missing.length, missingCount)}
          </Tabs.Tab>
        )}
-        {options.showQueued && (
+        {showQueued && (
          <Tabs.Tab value="queued" px={isThin ? 6 : undefined} leftSection={<IconDownload size={14} />}>
            {tabLabel(t("tab.queued"), queued.length, queuedCount)}
          </Tabs.Tab>
        )}
      </Tabs.List>

-      {options.showMissing && (
+      {showMissing && (
        <Tabs.Panel value="missing" flex={1} style={{ overflow: "hidden" }}>
          {renderPanel(missing, t("empty.missing"))}
        </Tabs.Panel>
      )}
-      {options.showQueued && (
+      {showQueued && (
        <Tabs.Panel value="queued" flex={1} style={{ overflow: "hidden" }}>
          {renderPanel(queued, t("empty.queued"))}
        </Tabs.Panel>
@@ -306,7 +320,15 @@ const CardShell = ({
  );
 };

-const MediaCard = ({ item, density }: { item: MissingMediaItem | QueuedMediaItem; density: Density }) => {
+const MediaCard = ({
+  item,
+  density,
+  showQueueDetails,
+}: {
+  item: MissingMediaItem | QueuedMediaItem;
+  density: Density;
+  showQueueDetails: boolean;
+}) => {
  const isQueued = "percentComplete" in item;

  return (
@@ -323,6 +345,11 @@ const MediaCard = ({ item, density }: { item: MissingMediaItem | QueuedMediaItem
              {item.type === "episode" ? item.title : item.year}
            </Text>
          )}
+          {isQueued && showQueueDetails && (
+            <Text fz="10px" c="dimmed" lineClamp={1} lh={1.1}>
+              {[item.status, item.timeLeft].filter(Boolean).join(" · ")}
+            </Text>
+          )}
        </Stack>
        {isQueued && <ProgressRing percent={Math.min(100, Math.max(0, item.percentComplete))} density={density} />}
      </Group>
@@ -31,6 +31,7 @@ import { OverflowBadge } from "@homarr/ui";
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
 import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import classes from "./component.module.css";
@@ -44,36 +45,43 @@ export default function MediaReleasesWidget({
 }: WidgetComponentProps<"mediaReleases">) {
  const t = useI18n();
  const releasesQuery = clientApi.widget.mediaRelease.getMediaReleases.useQuery({ integrationIds });
-  const releases = getUsableWidgetQueryData(releasesQuery);
+  const response = getUsableWidgetQueryData(releasesQuery);

  if (isInitialWidgetQueryPending(releasesQuery)) return <WidgetQueryLoadingState />;
-  if (!releases || releases.length === 0) return <WidgetEmptyState />;
+  if (!response) return <WidgetEmptyState />;
+
+  const { releases, failedIntegrations } = response;

  const isAdvanced = displayMode === "advanced";

  return (
    <Box h="100%" pos="relative">
-      <ScrollArea h="100%">
-        <SimpleGrid cols={isAdvanced ? Math.max(1, Math.floor(width / 360)) : 1} p="xs" spacing="sm">
-          {releases.map((item, index) => (
-            <Fragment key={`${item.integration.id}:${item.id}`}>
-              {!isAdvanced && index !== 0 && options.layout === "poster" && <Divider />}
-              <Item item={item} options={options} isAdvanced={isAdvanced} width={width} height={height} />
-            </Fragment>
-          ))}
-        </SimpleGrid>
-      </ScrollArea>
-      {releasesQuery.error && (
-        <Box pos="absolute" top={4} right={4}>
+      {releases.length === 0 ? (
+        <WidgetEmptyState />
+      ) : (
+        <ScrollArea h="100%">
+          <SimpleGrid cols={isAdvanced ? Math.max(1, Math.floor(width / 360)) : 1} p="xs" spacing="sm">
+            {releases.map((item, index) => (
+              <Fragment key={`${item.integration.id}:${item.id}`}>
+                {!isAdvanced && index !== 0 && options.layout === "poster" && <Divider />}
+                <Item item={item} options={options} isAdvanced={isAdvanced} width={width} height={height} />
+              </Fragment>
+            ))}
+          </SimpleGrid>
+        </ScrollArea>
+      )}
+      {(failedIntegrations.length > 0 || releasesQuery.error) && (
+        <Group pos="absolute" top={4} right={4} gap={0}>
+          <IntegrationErrorIndicator results={failedIntegrations} />
          <WidgetQueryErrorIndicator error={releasesQuery.error} label={t("widget.mediaReleases.name")} />
-        </Box>
+        </Group>
      )}
    </Box>
  );
 }

 interface ItemProps {
-  item: RouterOutputs["widget"]["mediaRelease"]["getMediaReleases"][number];
+  item: RouterOutputs["widget"]["mediaRelease"]["getMediaReleases"]["releases"][number];
  options: WidgetComponentProps<"mediaReleases">["options"];
  isAdvanced: boolean;
  width: number;
@@ -211,7 +219,7 @@ const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
                />
              )}
              {isAdvanced && item.description && (
-                <Text size="xs" c="dimmed" lineClamp={3}>
+                <Text size="xs" c="dimmed">
                  {item.description}
                </Text>
              )}
@@ -230,9 +238,17 @@ const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
                </Badge>
              )}

-              {(isAdvanced || options.showSource) && (
-                <Avatar size="sm" radius="xl" src={getIconUrl(item.integration.kind)} alt={item.integration.name} />
-              )}
+              {(isAdvanced || options.showSource) &&
+                (isAdvanced ? (
+                  <Group gap={4} wrap="nowrap">
+                    <Avatar size="sm" radius="xl" src={getIconUrl(item.integration.kind)} alt="" />
+                    <Text size="xs" fw={500} lineClamp={1}>
+                      {item.integration.name}
+                    </Text>
+                  </Group>
+                ) : (
+                  <Avatar size="sm" radius="xl" src={getIconUrl(item.integration.kind)} alt={item.integration.name} />
+                ))}
            </Stack>
          )}
        </Group>
@@ -37,6 +37,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import classes from "./component.module.css";

 type TranscodingDecision = NonNullable<NonNullable<StreamSession["currentlyPlaying"]>["metadata"]>["transcoding"];
@@ -74,16 +75,17 @@ export default function MediaServerWidget({
  isEditMode,
  displayMode,
 }: WidgetComponentProps<"mediaServer">) {
-  const currentStreams =
-    getUsableWidgetQueryData(
-      clientApi.widget.mediaServer.getCurrentStreams.useQuery({
-        integrationIds,
-        showOnlyPlaying: options.showOnlyPlaying,
-      }),
-    ) ?? [];
+  const currentStreamsQuery = clientApi.widget.mediaServer.getCurrentStreams.useQuery({
+    integrationIds,
+    showOnlyPlaying: options.showOnlyPlaying,
+  });
+  const currentStreamsData = getUsableWidgetQueryData(currentStreamsQuery);
+  const currentStreams = useMemo(() => currentStreamsData ?? [], [currentStreamsData]);

  const t = useScopedI18n("widget.mediaServer");
  const isAdvanced = displayMode === "advanced";
+  const showLocation = isAdvanced || options.showLocation;
+  const showBitrate = isAdvanced || options.showBitrate;
  const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
  const columns = useMemo<MRT_ColumnDef<StreamSession>[]>(() => {
    const result: MRT_ColumnDef<StreamSession>[] = [
@@ -142,8 +144,8 @@ export default function MediaServerWidget({
                if (!currentlyPlaying) return null;

                const status = getPlaybackStatus(currentlyPlaying.metadata?.transcoding);
-                const location = options.showLocation ? currentlyPlaying.location : null;
-                const bitrateLabel = options.showBitrate ? formatBitrate(currentlyPlaying.metadata?.bitrateKbps) : null;
+                const location = showLocation ? currentlyPlaying.location : null;
+                const bitrateLabel = showBitrate ? formatBitrate(currentlyPlaying.metadata?.bitrateKbps) : null;

                return (
                  <Stack gap={4} align="flex-start">
@@ -175,7 +177,7 @@ export default function MediaServerWidget({
        : []),
    ];
    return result;
-  }, [isAdvanced, options.showBitrate, options.showLocation, selectedRowId, t, width]);
+  }, [isAdvanced, selectedRowId, showBitrate, showLocation, t, width]);

  // Only render the flat list of sessions when the currentStreams change
  // Otherwise it will always create a new array reference and cause the table to re-render
@@ -285,7 +287,7 @@ export default function MediaServerWidget({
    (sum, session) => sum + (session.currentlyPlaying?.metadata?.bitrateKbps ?? 0),
    0,
  );
-  const totalBitrateLabel = options.showBitrate ? formatBitrate(totalBitrateKbps) : null;
+  const totalBitrateLabel = showBitrate ? formatBitrate(totalBitrateKbps) : null;
  const hasFailedIntegrations = currentStreams.some(({ error }) => Boolean(error));

  return (
@@ -300,12 +302,14 @@ export default function MediaServerWidget({
            {t("summary.transcoding", { count: transcodingCount })}
          </Badge>
          <Group ml="auto">
+            <WidgetQueryErrorIndicator error={currentStreamsQuery.error} label={t("name")} />
            <IntegrationErrorIndicator results={currentStreams} />
          </Group>
        </Group>
      )}
-      {!isAdvanced && hasFailedIntegrations && (
+      {!isAdvanced && (hasFailedIntegrations || currentStreamsQuery.error) && (
        <Group px="xs" justify="flex-end">
+          <WidgetQueryErrorIndicator error={currentStreamsQuery.error} label={t("name")} />
          <IntegrationErrorIndicator results={currentStreams} />
        </Group>
      )}
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import { getQueryKey } from "@trpc/react-query";
 import {
+  Box,
  Center,
  Divider,
  Group,
@@ -26,6 +27,7 @@ import { views } from ".";
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { HealthCheckStatus } from "./health-check-status";
 import { QueuePanel } from "./panels/queue.panel";
@@ -66,7 +68,8 @@ export default function MediaTranscodingWidget({
  useWidgetRuntimeQueries(widgetRuntimeRef, [
    getQueryKey(clientApi.widget.mediaTranscoding.getDataAsync, input, "query"),
  ]);
-  const transcodingData = getUsableWidgetQueryData(clientApi.widget.mediaTranscoding.getDataAsync.useQuery(input));
+  const transcodingQuery = clientApi.widget.mediaTranscoding.getDataAsync.useQuery(input);
+  const transcodingData = getUsableWidgetQueryData(transcodingQuery);

  const [view, setView] = useState<View>(options.defaultView);
  const t = useI18n("widget.mediaTranscoding");
@@ -94,10 +97,16 @@ export default function MediaTranscodingWidget({
  const queuePageCount = totalQueuePages ?? 1;
  const isTiny = !isAdvanced && (width < 280 || height < 140);
  const footerLayout = getTranscodingFooterLayout(width, height);
+  const queryIndicator = (
+    <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+      <WidgetQueryErrorIndicator error={transcodingQuery.error} label={t("name")} />
+    </Box>
+  );

  if (isAdvanced) {
    return (
-      <Stack gap="xs" h="100%" p="xs">
+      <Stack gap="xs" h="100%" p="xs" pos="relative">
+        {queryIndicator}
        <ScrollArea h="100%" style={{ flex: 1 }}>
          <SimpleGrid cols={width >= 1100 ? 3 : width >= 700 ? 2 : 1} spacing="sm">
            <AdvancedPanel title={t("tab.workers")} icon={IconCpu2}>
@@ -127,7 +136,8 @@ export default function MediaTranscodingWidget({
  }

  return (
-    <Stack gap={4} h="100%">
+    <Stack gap={4} h="100%" pos="relative">
+      {queryIndicator}
      {view === "workers" ? (
        <WorkersPanel workers={transcodingData.data.workers} isTiny={isTiny} />
      ) : view === "queue" ? (
@@ -70,6 +70,7 @@ import type { TablerIcon } from "@homarr/ui";
 import type { WidgetComponentProps } from "../definition";
 import actionTargetClasses from "../common/action-target.module.css";
 import { createReadOnlyTaskItemTransaction, ReadOnlyTaskItem } from "./read-only-task-item";
+import { getNotebookDisplay } from "./display";
 import { NotebookTextDirection, setTextDirection } from "./text-direction";

 import "@mantine/tiptap/styles.css";
@@ -98,6 +99,7 @@ export function Notebook({
  boardId,
  itemId,
  height,
+  displayMode = "compact",
 }: WidgetComponentProps<"notebook">) {
  const [content, setContent] = useState(options.content);
  const previousContentRef = useRef(options.content);
@@ -339,6 +341,13 @@ export function Notebook({
    characters: documentText.length,
    words: documentText.length === 0 ? 0 : documentText.split(/\s+/).length,
  };
+  const display = getNotebookDisplay({
+    height,
+    isAdvanced: displayMode === "advanced",
+    isEditing,
+    isSaving,
+    showToolbar: options.showToolbar,
+  });

  return (
    <Box className="homarr-notebook" h="100%" onDoubleClick={handleDoubleClick}>
@@ -375,9 +384,9 @@ export function Notebook({
      >
        <RichTextEditor.Toolbar
          style={{
-            display: isEditing && !isSaving && options.showToolbar === true ? "flex" : "none",
-            maxHeight: height < 180 ? "4.5rem" : "10rem",
-            overflowY: "auto",
+            display: display.showToolbar ? "flex" : "none",
+            maxHeight: display.toolbarMaxHeight,
+            overflowY: display.toolbarMaxHeight === undefined ? undefined : "auto",
          }}
        >
          <RichTextEditor.ControlsGroup>
@@ -505,7 +514,7 @@ export function Notebook({
          <RichTextEditor.Content />
        </ScrollArea>
      </RichTextEditor>
-      {(saveError || height >= 180) && (
+      {(saveError || display.showDocumentStats) && (
        <Group pos="absolute" bottom={4} right={8} gap="xs" style={{ pointerEvents: saveError ? undefined : "none" }}>
          {saveError && (
            <Tooltip label={saveError} multiline>
@@ -521,7 +530,7 @@ export function Notebook({
              </Text>
            </Tooltip>
          )}
-          {height >= 180 && (
+          {display.showDocumentStats && (
            <Text size="xs" c="dimmed">
              {t("widget.notebook.documentStats", documentStats)}
            </Text>
@@ -873,9 +882,18 @@ function ListIndentIncrease() {
    editor?.chain().focus().sinkListItem(itemType).run();
  }, [editor, itemType]);

-  editor?.on("selectionUpdate", ({ editor }) => {
-    setItemType(editor.isActive("taskItem") ? "taskItem" : "listItem");
-  });
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = ({ editor: updatedEditor }: { editor: Editor }) => {
+      setItemType(updatedEditor.isActive("taskItem") ? "taskItem" : "listItem");
+    };
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor]);

  return (
    <RichTextEditor.Control
@@ -897,9 +915,18 @@ function ListIndentDecrease() {
    editor?.chain().focus().liftListItem(itemType).run();
  }, [editor, itemType]);

-  editor?.on("selectionUpdate", ({ editor }) => {
-    setItemType(editor.isActive("taskItem") ? "taskItem" : "listItem");
-  });
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = ({ editor: updatedEditor }: { editor: Editor }) => {
+      setItemType(updatedEditor.isActive("taskItem") ? "taskItem" : "listItem");
+    };
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor]);

  return (
    <RichTextEditor.Control
@@ -9,21 +9,25 @@ import { useRequiredBoard } from "@homarr/boards/context";
 import { useTimeAgo } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";

-import type { WidgetComponentProps } from "../definition";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
+import type { WidgetComponentProps } from "../definition";
+import { getNotificationDisplay } from "./display";

 export default function NotificationsWidget({
  options,
  integrationIds,
  width,
  height,
+  displayMode,
 }: WidgetComponentProps<"notifications">) {
  const notificationsQuery = clientApi.widget.notifications.getNotifications.useQuery({
    ...options,
    integrationIds,
  });
-  const notificationIntegrations = getUsableWidgetQueryData(notificationsQuery) ?? [];
+  const notificationData = getUsableWidgetQueryData(notificationsQuery);
+  const notificationIntegrations = useMemo(() => notificationData ?? [], [notificationData]);
  const { isPending } = notificationsQuery;

  const t = useI18n();
@@ -49,12 +53,23 @@ export default function NotificationsWidget({
  const isDense = width < 280 || height < 180;
  const isRoomy = width >= 360 && height >= 220;
  const bodyLineClamp = height < 112 ? 1 : isDense ? 2 : height >= 300 ? 8 : 4;
+  const notificationDisplay = getNotificationDisplay({
+    displayMode,
+    hideLogos: options.hideLogos,
+    isRoomy,
+    bodyLineClamp,
+  });
  const columns = width >= 720 ? 2 : 1;
  const spacing = isRoomy ? "sm" : "xs";

  return (
    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p="xs">
      <Stack w="100%" gap="xs">
+        {notificationsQuery.error && (
+          <Group justify="flex-end">
+            <WidgetQueryErrorIndicator error={notificationsQuery.error} label={t("widget.notifications.name")} />
+          </Group>
+        )}
        {failedIntegrations.length > 0 && (
          <Group gap={4} wrap="wrap">
            {failedIntegrations.map((integration) => (
@@ -95,7 +110,7 @@ export default function NotificationsWidget({
                  }}
                >
                  <Flex gap={isDense ? "xs" : "sm"} align="flex-start" w="100%">
-                    {!options.hideLogos && notification.source?.iconUrl && (
+                    {notificationDisplay.showLogos && notification.source?.iconUrl && (
                      <Avatar
                        src={notification.source.iconUrl}
                        alt={notification.source.name}
@@ -113,7 +128,7 @@ export default function NotificationsWidget({
                      <Text
                        c="dimmed"
                        size={isDense ? "xs" : "sm"}
-                        lineClamp={bodyLineClamp}
+                        lineClamp={notificationDisplay.bodyLineClamp}
                        style={{ whiteSpace: "pre-line" }}
                      >
                        {notification.body}
@@ -121,7 +136,11 @@ export default function NotificationsWidget({

                      <InfoDisplay
                        date={notification.time}
-                        source={isRoomy ? (notification.source?.name ?? notification.integrationName) : undefined}
+                        source={
+                          notificationDisplay.showSource
+                            ? (notification.source?.name ?? notification.integrationName)
+                            : undefined
+                        }
                        dense={isDense}
                      />
                    </Flex>
@@ -6,7 +6,7 @@ import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";

 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
-  supportsAdvancedFocus: false,
+  supportsAdvancedFocus: true,
  icon: IconMessage,
  queryKey: [["widget", "notifications", "getNotifications"]],
  queryMatcher: ({ input }, scope) =>
@@ -190,18 +190,42 @@ export const { definition, componentLoader } = createWidgetDefinition("patchmon"
        useCustomThresholds: {
          shouldHide: (options) => !options.enableThresholdColors,
        },
-        hostsNeedingUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsNeedingUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsNeedingUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
+        hostsNeedingUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsNeedingUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsNeedingUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
        totalOutdatedPackagesThresholdMode: {
          shouldHide: (options) =>
            !options.enableThresholdColors || !options.useCustomThresholds || !options.showTotalOutdatedPackages,
@@ -13,7 +13,7 @@ const relativeDateSchema = z
  .or(z.literal(""));

 export const { definition, componentLoader } = createWidgetDefinition("releases", {
-  supportsAdvancedFocus: false,
+  supportsAdvancedFocus: true,
  icon: IconRocket,
  queryKey: [["widget", "releases", "getLatest"]],
  queryMatcher: ({ input }, scope) => widgetQueryInputMatches(input, { itemId: scope.itemId }),
@@ -9,8 +9,10 @@ import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useScopedI18n } from "@homarr/translation/client";

-import type { WidgetComponentProps } from "../definition";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { WidgetEmptyState } from "../common/empty-state";
+import { WidgetQueryLoadingState } from "../common/query-state-indicator";
+import type { WidgetComponentProps } from "../definition";
 import { BaseWidgetError } from "../errors/base-component";
 import classes from "./component.module.scss";

@@ -27,6 +29,7 @@ const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
      hasError: false as const,
      entries: normalizedData,
      failedFeedCount: 0,
+      isPending: query.isPending,
      isStale: Boolean(query.error),
    };
  }
@@ -35,11 +38,12 @@ const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
    hasError: false as const,
    entries: normalizedData?.entries ?? [],
    failedFeedCount: normalizedData?.failedFeedCount ?? 0,
+    isPending: query.isPending,
    isStale: Boolean(query.error),
  };
 };

-export default function RssFeed({ options, width, height }: WidgetComponentProps<"rssFeed">) {
+export default function RssFeed({ options, width, height, displayMode }: WidgetComponentProps<"rssFeed">) {
  const feed = useLiveFeed({
    urls: options.feedUrls,
    maximumAmountPosts: typeof options.maximumAmountPosts === "number" ? options.maximumAmountPosts : 100,
@@ -57,6 +61,7 @@ export default function RssFeed({ options, width, height }: WidgetComponentProps
      />
    );
  }
+  if (feed.isPending) return <WidgetQueryLoadingState />;

  const warning = feed.isStale
    ? t("warning.stale")
@@ -64,13 +69,35 @@ export default function RssFeed({ options, width, height }: WidgetComponentProps
      ? t("warning.partial", { count: feed.failedFeedCount })
      : undefined;

+  if (feed.entries.length === 0) {
+    return (
+      <Flex direction="column" h="100%" p="xs">
+        {warning && (
+          <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
+            <output>{warning}</output>
+          </Alert>
+        )}
+        <WidgetEmptyState />
+      </Flex>
+    );
+  }
+
  const languageDir = options.enableRtl ? "RTL" : "LTR";

  const isDense = width < 420 || height < 180;
  const isTiny = width < 260 || height < 110;
  const isRoomy = width >= 420 && height >= 240;
+  const isAdvanced = displayMode === "advanced";
  const columns = width >= 720 && height >= 260 ? 2 : 1;
  const descriptionLines = isRoomy ? Math.max(options.textLinesClamp, 6) : isDense ? 1 : options.textLinesClamp;
+  const entryDisplay = getRssEntryDisplay({
+    isAdvanced,
+    isDense,
+    isTiny,
+    hideDescription: options.hideDescription,
+    showPosterImage: options.showPosterImage,
+    descriptionLines,
+  });
  const spacing = isRoomy ? "sm" : "xs";

  return (
@@ -97,7 +124,7 @@ export default function RssFeed({ options, width, height }: WidgetComponentProps
              title={feedEntry.title}
            >
              <Group wrap="nowrap" align="flex-start" gap={isDense ? "xs" : "md"}>
-                {feedEntry.enclosure !== undefined && options.showPosterImage && !isTiny && (
+                {feedEntry.enclosure !== undefined && entryDisplay.showImage && (
                  <Image
                    className={classes.poster}
                    src={feedEntry.enclosure}
@@ -110,18 +137,29 @@ export default function RssFeed({ options, width, height }: WidgetComponentProps
                )}

                <Flex gap={isRoomy ? "sm" : 6} direction="column" w="100%" miw={0}>
-                  <Text dir={languageDir} fz={isRoomy ? "md" : "sm"} fw={600} lh={1.25} lineClamp={2}>
+                  <Text
+                    dir={languageDir}
+                    fz={isRoomy ? "md" : "sm"}
+                    fw={600}
+                    lh={1.25}
+                    lineClamp={isAdvanced ? undefined : 2}
+                  >
                    {feedEntry.title}
                  </Text>
-                  {!options.hideDescription && feedEntry.description && !isTiny && (
-                    <Text dir={languageDir} c="dimmed" size="sm" lineClamp={descriptionLines}>
+                  {entryDisplay.showDescription && feedEntry.description && (
+                    <Text dir={languageDir} c="dimmed" size="sm" lineClamp={entryDisplay.descriptionLineClamp}>
                      {feedDescriptionToText(feedEntry.description)}
                    </Text>
                  )}

                  <InfoDisplay
-                    source={!isDense ? getHostname(feedEntry.feedUrl) : undefined}
+                    source={entryDisplay.showSource ? getHostname(feedEntry.feedUrl) : undefined}
                    date={feedEntry.published ? dayjs(feedEntry.published).fromNow() : undefined}
+                    timestamp={
+                      isAdvanced && feedEntry.published
+                        ? dayjs(feedEntry.published).format("YYYY-MM-DD HH:mm:ss Z")
+                        : undefined
+                    }
                  />
                </Flex>
              </Group>
@@ -151,15 +189,44 @@ export const getHostname = (url: string): string => {
  }
 };

-const InfoDisplay = ({ date, source }: { date?: string; source?: string }) => (
-  <Group gap={5} align="center" wrap="nowrap">
+interface RssEntryDisplayInput {
+  isAdvanced: boolean;
+  isDense: boolean;
+  isTiny: boolean;
+  hideDescription: boolean;
+  showPosterImage: boolean;
+  descriptionLines: number;
+}
+
+export const getRssEntryDisplay = ({
+  isAdvanced,
+  isDense,
+  isTiny,
+  hideDescription,
+  showPosterImage,
+  descriptionLines,
+}: RssEntryDisplayInput) => ({
+  showDescription: isAdvanced || (!hideDescription && !isTiny),
+  showImage: isAdvanced || (showPosterImage && !isTiny),
+  showSource: isAdvanced || !isDense,
+  descriptionLineClamp: isAdvanced ? undefined : descriptionLines,
+});
+
+const InfoDisplay = ({ date, timestamp, source }: { date?: string; timestamp?: string; source?: string }) => (
+  <Group gap={5} align="center" wrap={timestamp ? "wrap" : "nowrap"}>
    {date && <IconClock size="1rem" color="var(--mantine-color-dimmed)" />}
    {date && (
      <Text size="xs" c="dimmed">
        {date}
      </Text>
    )}
-    {date && source && <Text c="dimmed">•</Text>}
+    {timestamp && <Text c="dimmed">•</Text>}
+    {timestamp && (
+      <Text size="xs" c="dimmed" ff="monospace">
+        {timestamp}
+      </Text>
+    )}
+    {(date || timestamp) && source && <Text c="dimmed">•</Text>}
    {source && (
      <Text size="xs" c="dimmed" truncate="end">
        {source}
@@ -11,7 +11,7 @@ import { optionsBuilder } from "../options";
 * - https://www.jsonfeed.org/version/1.1/
 */
 export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
-  supportsAdvancedFocus: false,
+  supportsAdvancedFocus: true,
  icon: IconRss,
  queryKey: [["widget", "rssFeed", "getFeeds"]],
  queryMatcher: ({ input }, scope) =>
@@ -12,7 +12,7 @@ const timeRangeOptions = stockPriceTimeFrames.range;
 const timeIntervalOptions = stockPriceTimeFrames.interval;

 export const { definition, componentLoader } = createWidgetDefinition("stockPrice", {
-  supportsAdvancedFocus: false,
+  supportsAdvancedFocus: true,
  icon: IconBuildingBank,
  queryKey: [["widget", "stockPrice", "getPriceHistory"]],
  queryMatcher: ({ input }, scope) =>
@@ -9,16 +9,21 @@ import { formatBytesPair } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";

 import { WidgetEmptyState } from "../common/empty-state";
-import { getUsableWidgetQueryData } from "../common/query-state";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { filterStorageVolumes, normalizeStorageDeviceName } from "../filter-storage-volumes";
 import { NoIntegrationDataError } from "../errors/no-data-integration";

-type DisplayMode = WidgetComponentProps<"systemDisks">["options"]["displayMode"];
+type DiskDisplayMode = WidgetComponentProps<"systemDisks">["options"]["displayMode"];
+
+export const clampPercentage = (percentage: number): number => Math.min(100, Math.max(0, percentage));

 export const getDisplayText = (
  item: { used: string; available: string; percentage: number },
-  displayMode: DisplayMode,
+  displayMode: DiskDisplayMode,
+  translatedFreeText?: string,
 ) => {
  switch (displayMode) {
    case "percentage":
@@ -27,27 +32,26 @@ export const getDisplayText = (
      const usedInBytes = Number(item.used);
      const availableInBytes = Number(item.available);
      if (Number.isFinite(usedInBytes) && Number.isFinite(availableInBytes)) {
-        const { used, available } = formatBytesPair(usedInBytes, availableInBytes);
-        return `${used} / ${available}`;
+        const { used, available: total } = formatBytesPair(usedInBytes, usedInBytes + availableInBytes);
+        return `${used} / ${total}`;
      }
      return `${item.used} / ${item.available}`;
    }
    case "free":
-      return `${Math.round(100 - item.percentage)}% free`;
+      return translatedFreeText ?? `${Math.round(100 - clampPercentage(item.percentage))}% free`;
    default:
      return `${Math.round(item.percentage)}%`;
  }
 };

-export const clampPercentage = (percentage: number): number => Math.min(100, Math.max(0, percentage));
-
-const getAbsoluteText = (item: { used: string; available: string }) => {
-  const usedInBytes = Number(item.used);
-  const availableInBytes = Number(item.available);
-  if (!Number.isFinite(usedInBytes) || !Number.isFinite(availableInBytes)) return `${item.used} / ${item.available}`;
-  const { used, available } = formatBytesPair(usedInBytes, availableInBytes);
-  return `${used} / ${available}`;
-};
+export const getAdvancedDisplayTexts = (
+  item: { used: string; available: string; percentage: number },
+  translatedFreeText?: string,
+) => ({
+  percentage: getDisplayText(item, "percentage"),
+  absolute: getDisplayText(item, "absolute"),
+  free: getDisplayText(item, "free", translatedFreeText),
+});

 interface SystemDiskCardProps {
  deviceName: string;
@@ -58,6 +62,9 @@ interface SystemDiskCardProps {
  showBackgroundBar: boolean;
  integrationName?: string;
  secondaryText?: string;
+  freeText?: string;
+  smartStatus?: string;
+  isAdvanced: boolean;
  showSecondaryText: boolean;
  showTemperature: boolean;
 }
@@ -71,6 +78,9 @@ const SystemDiskCard = ({
  showBackgroundBar,
  integrationName,
  secondaryText,
+  freeText,
+  smartStatus,
+  isAdvanced,
  showSecondaryText,
  showTemperature,
 }: SystemDiskCardProps) => {
@@ -98,7 +108,9 @@ const SystemDiskCard = ({
  }, [displayText, healthy]);

  const unhealthyLabel = t("widget.systemDisks.status.unhealthy");
-  const hasHiddenTemperature = temperature !== null && temperature !== undefined && !showTemperature;
+  const hasTemperature = temperature !== null && temperature !== undefined;
+  const temperatureText = hasTemperature ? `${temperature}°C` : "—°C";
+  const hasHiddenTemperature = hasTemperature && !showTemperature;
  const hasHiddenSecondaryText = Boolean(secondaryText && secondaryText !== displayText && !showSecondaryText);
  const tooltipLabel = [
    healthy ? displayText : `${displayText} (${unhealthyLabel})`,
@@ -140,11 +152,19 @@ const SystemDiskCard = ({
                {secondaryText}
              </Text>
            )}
+            {isAdvanced && freeText && freeText !== displayText && (
+              <Text size="xs" c="dimmed">
+                {freeText}
+              </Text>
+            )}
+            {isAdvanced && (
+              <Text size="xs" c={healthy ? "dimmed" : "red"}>
+                {t("widget.systemDisks.status.smart")}: {smartStatus?.trim() || "—"}
+              </Text>
+            )}
          </div>
          <div style={{ flexShrink: 0 }}>
-            {showTemperature && temperature !== null && temperature !== undefined ? (
-              <Text size="sm">{temperature}°C</Text>
-            ) : null}
+            {showTemperature && (hasTemperature || isAdvanced) ? <Text size="sm">{temperatureText}</Text> : null}
          </div>
        </Group>
        <Box
@@ -169,12 +189,32 @@ export default function SystemResources({
  options,
  width,
  height,
+  displayMode,
 }: WidgetComponentProps<"systemDisks">) {
+  const t = useI18n();
  const queryInput = { integrationIds };
-  const data =
-    getUsableWidgetQueryData(clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery(queryInput)) ?? [];
+  const healthQuery = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery(queryInput);
+  const results = getUsableWidgetQueryData(healthQuery) ?? [];
+  const data = results.filter(
+    (entry): entry is typeof entry & { healthInfo: NonNullable<typeof entry.healthInfo> } => entry.healthInfo !== null,
+  );
+  const queryIndicators = (
+    <Group gap={0}>
+      <IntegrationErrorIndicator results={results} />
+      <WidgetQueryErrorIndicator error={healthQuery.error} label={t("widget.systemDisks.name")} />
+    </Group>
+  );
+  const emptyState = (
+    <Box h="100%" pos="relative">
+      <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+        {queryIndicators}
+      </Box>
+      <WidgetEmptyState />
+    </Box>
+  );

-  if (data.length === 0) return <WidgetEmptyState />;
+  if (isInitialWidgetQueryPending(healthQuery)) return <WidgetQueryLoadingState />;
+  if (data.length === 0) return emptyState;

  const disks = data.flatMap((entry) => {
    const fileSystem = filterStorageVolumes(
@@ -193,32 +233,52 @@ export default function SystemResources({
    }));
  });

-  if (data.every((entry) => entry.healthInfo.fileSystem.length === 0)) throw new NoIntegrationDataError();
-  if (disks.length === 0) return <WidgetEmptyState />;
+  const hasNoFileSystems = data.every((entry) => entry.healthInfo.fileSystem.length === 0);
+  const hasFailedSource = results.some((entry) => Boolean(entry.error));
+  if (hasNoFileSystems && !hasFailedSource && !healthQuery.error) throw new NoIntegrationDataError();
+  if (hasNoFileSystems || disks.length === 0) return emptyState;

+  const isAdvanced = displayMode === "advanced";
  const minimumCardWidth = 260;
  const columns = Math.max(1, Math.min(disks.length, Math.floor(width / minimumCardWidth)));
  const cellWidth = width / columns;

  return (
-    <ScrollArea h="100%">
-      <SimpleGrid cols={columns} spacing="xs" p="xs">
-        {disks.map(({ integrationId, integrationName, item, smartItem }) => (
-          <SystemDiskCard
-            key={`${integrationId}:${item.deviceName}`}
-            deviceName={item.deviceName}
-            percentage={item.percentage}
-            displayText={getDisplayText(item, options.displayMode)}
-            temperature={options.showTemperatureIfAvailable ? smartItem?.temperature : undefined}
-            healthy={smartItem?.healthy ?? true} // fall back to healthy if no information is available
-            showBackgroundBar={options.showBackgroundBar}
-            integrationName={data.length > 1 ? integrationName : undefined}
-            secondaryText={getAbsoluteText(item)}
-            showSecondaryText={height >= 160 && cellWidth >= 260}
-            showTemperature={height >= 100 && cellWidth >= 220}
-          />
-        ))}
-      </SimpleGrid>
-    </ScrollArea>
+    <Box h="100%" pos="relative">
+      <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+        {queryIndicators}
+      </Box>
+      <ScrollArea h="100%">
+        <SimpleGrid cols={columns} spacing="xs" p="xs">
+          {disks.map(({ integrationId, integrationName, item, smartItem }) => {
+            const freeText = t("widget.systemDisks.status.free", {
+              percentage: String(Math.round(100 - clampPercentage(item.percentage))),
+            });
+            const advancedDisplayTexts = getAdvancedDisplayTexts(item, freeText);
+
+            return (
+              <SystemDiskCard
+                key={`${integrationId}:${item.deviceName}`}
+                deviceName={item.deviceName}
+                percentage={item.percentage}
+                displayText={
+                  isAdvanced ? advancedDisplayTexts.percentage : getDisplayText(item, options.displayMode, freeText)
+                }
+                temperature={isAdvanced || options.showTemperatureIfAvailable ? smartItem?.temperature : undefined}
+                healthy={smartItem?.healthy ?? true} // fall back to healthy if no information is available
+                showBackgroundBar={isAdvanced || options.showBackgroundBar}
+                integrationName={isAdvanced || data.length > 1 ? integrationName : undefined}
+                secondaryText={advancedDisplayTexts.absolute}
+                freeText={advancedDisplayTexts.free}
+                smartStatus={smartItem?.overallStatus}
+                isAdvanced={isAdvanced}
+                showSecondaryText={isAdvanced || (height >= 160 && cellWidth >= 260)}
+                showTemperature={isAdvanced || (height >= 100 && cellWidth >= 220)}
+              />
+            );
+          })}
+        </SimpleGrid>
+      </ScrollArea>
+    </Box>
  );
 }
@@ -4,10 +4,13 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Box, Center, Group, Loader, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";

 import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";

 import { WidgetEmptyState } from "../common/empty-state";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import { CombinedNetworkTrafficChart } from "./chart/combined-network-traffic";
 import { SystemResourceCPUChart } from "./chart/cpu-chart";
 import { SystemResourceGPUChart } from "./chart/gpu-chart";
@@ -16,6 +19,9 @@ import { NetworkTrafficChart } from "./chart/network-traffic";

 const COMPACT_HISTORY_SIZE = 15;
 const ADVANCED_HISTORY_SIZE = 60;
+const ALL_SYSTEM_CHARTS = ["cpu", "memory", "gpu", "network"] as const;
+
+type SystemChart = WidgetComponentProps<"systemResources">["options"]["visibleCharts"][number];

 type ChartItem = {
  cpu: number;
@@ -51,6 +57,26 @@ export const getCompactChartBudget = (height: number): number => {
  return 4;
 };

+export const getVisibleSystemCharts = ({
+  configuredCharts,
+  hasGpu,
+  hasNetwork,
+  height,
+  isAdvanced,
+}: {
+  configuredCharts: readonly SystemChart[];
+  hasGpu: boolean;
+  hasNetwork: boolean;
+  height: number;
+  isAdvanced: boolean;
+}): SystemChart[] => {
+  const selectedCharts = isAdvanced ? ALL_SYSTEM_CHARTS : configuredCharts;
+  const availableCharts = selectedCharts.filter(
+    (chart) => (chart !== "gpu" || !isAdvanced || hasGpu) && (chart !== "network" || hasNetwork),
+  );
+  return isAdvanced ? [...availableCharts] : availableCharts.slice(0, getCompactChartBudget(height));
+};
+
 export default function SystemResources({
  integrationIds,
  options,
@@ -58,13 +84,23 @@ export default function SystemResources({
  height,
  displayMode,
 }: WidgetComponentProps<"systemResources">) {
+  const t = useScopedI18n("widget.systemResources");
  const healthQuery = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
-  const data = getUsableWidgetQueryData(healthQuery) ?? [];
+  const results = getUsableWidgetQueryData(healthQuery) ?? [];
+  const data = results.filter(
+    (entry): entry is typeof entry & { healthInfo: NonNullable<typeof entry.healthInfo> } => entry.healthInfo !== null,
+  );
  const { dataUpdatedAt, isPending } = healthQuery;
  const isAdvanced = displayMode === "advanced";
  const integrationKey = useMemo(() => integrationIds.join("\u0000"), [integrationIds]);
  const [historyByIntegration, setHistoryByIntegration] = useState<Record<string, ChartItem[]>>({});
  const previousIntegrationKey = useRef(integrationKey);
+  const queryIndicators = (
+    <Group gap={0}>
+      <IntegrationErrorIndicator results={results} />
+      <WidgetQueryErrorIndicator error={healthQuery.error} label={t("name")} />
+    </Group>
+  );

  useEffect(() => {
    if (previousIntegrationKey.current === integrationKey) return;
@@ -102,6 +138,7 @@ export default function SystemResources({
        key={entry.integrationId}
        integrationName={entry.integrationName}
        items={history}
+        hasGpu={entry.healthInfo.gpu.length > 0}
        memoryCapacityInBytes={entry.healthInfo.memAvailableInBytes + entry.healthInfo.memUsedInBytes}
        options={options}
        width={availableWidth}
@@ -120,11 +157,23 @@ export default function SystemResources({
    );
  }

-  if (data.length === 0) return <WidgetEmptyState />;
+  if (data.length === 0) {
+    return (
+      <Box h="100%" pos="relative">
+        <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+          {queryIndicators}
+        </Box>
+        <WidgetEmptyState />
+      </Box>
+    );
+  }

  if (!isAdvanced && data.length === 1 && data[0]) {
    return (
-      <Box h="100%" p="xs">
+      <Box h="100%" p="xs" pos="relative">
+        <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+          {queryIndicators}
+        </Box>
        {renderCharts(data[0], width, Math.max(0, height - 20))}
      </Box>
    );
@@ -133,17 +182,23 @@ export default function SystemResources({
  const compactPanelHeight = Math.max(160, Math.floor(height / Math.min(data.length, 2)));

  return (
-    <ScrollArea h="100%">
-      <SimpleGrid cols={panelColumns} spacing="xs" p="xs">
-        {data.map((entry) => renderCharts(entry, panelWidth, isAdvanced ? height : compactPanelHeight))}
-      </SimpleGrid>
-    </ScrollArea>
+    <Box h="100%" pos="relative">
+      <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
+        {queryIndicators}
+      </Box>
+      <ScrollArea h="100%">
+        <SimpleGrid cols={panelColumns} spacing="xs" p="xs">
+          {data.map((entry) => renderCharts(entry, panelWidth, isAdvanced ? height : compactPanelHeight))}
+        </SimpleGrid>
+      </ScrollArea>
+    </Box>
  );
 }

 interface SystemChartsProps {
  integrationName: string;
  items: ChartItem[];
+  hasGpu: boolean;
  memoryCapacityInBytes: number;
  options: WidgetComponentProps<"systemResources">["options"];
  width: number;
@@ -155,6 +210,7 @@ interface SystemChartsProps {
 const SystemCharts = ({
  integrationName,
  items,
+  hasGpu,
  memoryCapacityInBytes,
  options,
  width,
@@ -163,9 +219,15 @@ const SystemCharts = ({
  showTitle,
 }: SystemChartsProps) => {
  const networkItems = getNetworkHistory(items);
-  const availableCharts = options.visibleCharts.filter((chart) => chart !== "network" || networkItems.length > 0);
-  const visibleCharts = isAdvanced ? availableCharts : availableCharts.slice(0, getCompactChartBudget(height));
+  const visibleCharts = getVisibleSystemCharts({
+    configuredCharts: options.visibleCharts,
+    hasGpu,
+    hasNetwork: networkItems.length > 0,
+    height,
+    isAdvanced,
+  });
  const showNetwork = visibleCharts.includes("network");
+  const labelDisplayMode = isAdvanced ? "textWithIcon" : options.labelDisplayMode;
  const chartCount = visibleCharts.length;
  const chartColumns = isAdvanced && width >= 560 ? 2 : 1;
  const chartHeight = isAdvanced
@@ -192,7 +254,7 @@ const SystemCharts = ({
            <SystemResourceCPUChart
              cpuUsageOverTime={items.map((item) => item.cpu)}
              hasShadow={options.hasShadow}
-              labelDisplayMode={options.labelDisplayMode}
+              labelDisplayMode={labelDisplayMode}
            />
          </Box>
        )}
@@ -202,7 +264,7 @@ const SystemCharts = ({
              memoryUsageOverTime={items.map((item) => item.memory)}
              totalCapacityInBytes={memoryCapacityInBytes}
              hasShadow={options.hasShadow}
-              labelDisplayMode={options.labelDisplayMode}
+              labelDisplayMode={labelDisplayMode}
            />
          </Box>
        )}
@@ -211,7 +273,7 @@ const SystemCharts = ({
            <SystemResourceGPUChart
              gpuUsageOverTime={items.map((item) => item.gpu)}
              hasShadow={options.hasShadow}
-              labelDisplayMode={options.labelDisplayMode}
+              labelDisplayMode={labelDisplayMode}
            />
          </Box>
        )}
@@ -222,13 +284,13 @@ const SystemCharts = ({
                usageOverTime={networkItems.map((network) => network.down)}
                isUp={false}
                hasShadow={options.hasShadow}
-                labelDisplayMode={options.labelDisplayMode}
+                labelDisplayMode={labelDisplayMode}
              />
              <NetworkTrafficChart
                usageOverTime={networkItems.map((network) => network.up)}
                isUp
                hasShadow={options.hasShadow}
-                labelDisplayMode={options.labelDisplayMode}
+                labelDisplayMode={labelDisplayMode}
              />
            </Group>
          ) : (
@@ -236,7 +298,7 @@ const SystemCharts = ({
              <CombinedNetworkTrafficChart
                usageOverTime={networkItems}
                hasShadow={options.hasShadow}
-                labelDisplayMode={options.labelDisplayMode}
+                labelDisplayMode={labelDisplayMode}
              />
            </Box>
          ))}
@@ -9,8 +9,10 @@ import { formatNumber } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";

 import { WidgetEmptyState } from "../common/empty-state";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
 import { aggregateUptimeKumaDashboards } from "./aggregate";
@@ -128,12 +130,16 @@ interface UptimeKumaContentProps {

 function UptimeKumaContent({ integrationIds, options, width, height, displayMode }: UptimeKumaContentProps) {
  const t = useScopedI18n("widget.uptimeKuma");
-  const dashboardData = getUsableWidgetQueryData(clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds }));
+  const dashboardQuery = clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds });
+  const dashboardData = getUsableWidgetQueryData(dashboardQuery);

  if (!dashboardData) return <WidgetEmptyState />;
+  const successfulDashboardData = dashboardData.flatMap((item) =>
+    item.dashboard === null ? [] : [{ ...item, dashboard: item.dashboard }],
+  );

-  const combined = aggregateUptimeKumaDashboards(dashboardData.map((item) => item.dashboard));
-  const monitors = dashboardData.flatMap((result) =>
+  const combined = aggregateUptimeKumaDashboards(successfulDashboardData.map((item) => item.dashboard));
+  const monitors = successfulDashboardData.flatMap((result) =>
    result.dashboard.monitors.map((monitor) => ({
      ...monitor,
      key: `${result.integrationId}:${monitor.id}`,
@@ -145,25 +151,22 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
  const ringSize = getRingSize(width);
  const iconSize = getIconSize(width);
  const gridCols = getGridCols(width);
+  const isAdvanced = displayMode === "advanced";

  const enabledStatKeys = Object.entries(statVisibilityByOption)
-    .filter(([optionKey]) => options[optionKey as keyof typeof options])
+    .filter(([optionKey]) => isAdvanced || options[optionKey as keyof typeof options])
    .map(([, statKey]) => statKey);

-  const showHero = options.showAverageUptime;
-  const showRing = options.showUptimeRing && (displayMode === "advanced" || (width >= 170 && height >= 110));
-  const prioritizedStatKeys =
-    displayMode === "advanced"
-      ? enabledStatKeys
-      : enabledStatKeys.toSorted(
-          (left, right) =>
-            getCompactStatPriority(left, combined[left]) - getCompactStatPriority(right, combined[right]),
-        );
+  const showHero = isAdvanced || options.showAverageUptime;
+  const showRing = isAdvanced || (options.showUptimeRing && width >= 170 && height >= 110);
+  const prioritizedStatKeys = isAdvanced
+    ? enabledStatKeys
+    : enabledStatKeys.toSorted(
+        (left, right) => getCompactStatPriority(left, combined[left]) - getCompactStatPriority(right, combined[right]),
+      );
  const visibleStatKeys = prioritizedStatKeys.slice(
    0,
-    displayMode === "advanced"
-      ? prioritizedStatKeys.length
-      : getCompactStatLimit(height, showHero, prioritizedStatKeys.length),
+    isAdvanced ? prioritizedStatKeys.length : getCompactStatLimit(height, showHero, prioritizedStatKeys.length),
  );
  const hasContent = showHero || visibleStatKeys.length > 0;

@@ -245,7 +248,17 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
    </div>
  );

-  if (displayMode === "compact") return summaryContent;
+  if (displayMode === "compact") {
+    return (
+      <Box h="100%" pos="relative">
+        <Group pos="absolute" top={4} right={8} gap={0} style={{ zIndex: 2 }}>
+          <IntegrationErrorIndicator results={dashboardData} />
+          <WidgetQueryErrorIndicator error={dashboardQuery.error} label={t("name")} />
+        </Group>
+        {summaryContent}
+      </Box>
+    );
+  }

  const monitorList = (
    <Stack gap="xs">
@@ -257,7 +270,7 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
              <Text size="sm" fw={600} truncate>
                {monitor.name}
              </Text>
-              {dashboardData.length > 1 && (
+              {(isAdvanced || successfulDashboardData.length > 1) && (
                <Text size="xs" c="dimmed">
                  {monitor.integrationName}
                </Text>
@@ -274,20 +287,32 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode

  if (width < 760) {
    return (
-      <ScrollArea h="100%">
-        <Stack gap="lg" p="md">
-          <Box h={Math.max(280, Math.min(420, height - 120))}>{summaryContent}</Box>
-          {monitorList}
-        </Stack>
-      </ScrollArea>
+      <Box h="100%" pos="relative">
+        <Group pos="absolute" top={4} right={8} gap={0} style={{ zIndex: 2 }}>
+          <IntegrationErrorIndicator results={dashboardData} />
+          <WidgetQueryErrorIndicator error={dashboardQuery.error} label={t("name")} />
+        </Group>
+        <ScrollArea h="100%">
+          <Stack gap="lg" p="md">
+            <Box h={Math.max(280, Math.min(420, height - 120))}>{summaryContent}</Box>
+            {monitorList}
+          </Stack>
+        </ScrollArea>
+      </Box>
    );
  }

  return (
-    <SimpleGrid cols={2} spacing="lg" h="100%" p="md" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
-      {summaryContent}
-      <ScrollArea h="100%">{monitorList}</ScrollArea>
-    </SimpleGrid>
+    <Box h="100%" pos="relative">
+      <Group pos="absolute" top={4} right={8} gap={0} style={{ zIndex: 2 }}>
+        <IntegrationErrorIndicator results={dashboardData} />
+        <WidgetQueryErrorIndicator error={dashboardQuery.error} label={t("name")} />
+      </Group>
+      <SimpleGrid cols={2} spacing="lg" h="100%" p="md" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+        {summaryContent}
+        <ScrollArea h="100%">{monitorList}</ScrollArea>
+      </SimpleGrid>
+    </Box>
  );
 }
				`@@ -1 +0,0 @@`
				ALTER TABLE `layout` ADD `role` text DEFAULT 'custom' NOT NULL;