style: auto-fix lint and format

Resolves conflict in integrations page: keep TourTarget wrapper from
app-tour while using the new /manage/integrations/new page link from dev
(replaces the old IntegrationSelectMenu dropdown).

.mise.toml

@@ -1,3 +0,0 @@
-[tools]
-node = "24.16.0"
-pnpm = "10.33.4"

apps/nextjs/package.json

@@ -57,7 +57,6 @@
     "@mantine/modals": "catalog:",
     "@mantine/tiptap": "catalog:",
     "@tabler/icons-react": "catalog:",
-    "@tanstack/query-persist-client-core": "catalog:",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-query-devtools": "catalog:",
     "@tanstack/react-query-next-experimental": "catalog:",

apps/nextjs/src/app/[locale]/_client-providers/query-cache-persister.ts

@@ -1,49 +0,0 @@
-import type { AsyncStorage, PersistedQuery } from "@tanstack/query-persist-client-core";
-import { experimental_createQueryPersister } from "@tanstack/query-persist-client-core";
-import { parse, stringify } from "superjson";
-
-import { fetchApi } from "@homarr/api/client";
-import {
-  getActiveQueryCacheBoardId,
-  isPersistableWidgetQueryKey,
-  queryCacheStoragePrefix,
-} from "@homarr/api/query-cache";
-
-const queryCacheStorage = {
-  async getItem(_key) {
-    return null;
-  },
-  async setItem(key, value) {
-    const boardId = getActiveQueryCacheBoardId();
-    if (!boardId) return;
-
-    try {
-      await fetchApi.queryCache.setItem.mutate({ boardId, key, value });
-    } catch {
-      // Query persistence is best-effort; failed writes should not affect widget rendering.
-    }
-  },
-  async removeItem(key) {
-    const boardId = getActiveQueryCacheBoardId();
-    if (!boardId) return;
-
-    try {
-      await fetchApi.queryCache.removeItem.mutate({ boardId, key });
-    } catch {
-      // Query persistence is best-effort; failed removals should not affect widget rendering.
-    }
-  },
-} satisfies AsyncStorage<string>;
-
-export const createWidgetQueryPersister = () =>
-  experimental_createQueryPersister<string>({
-    storage: typeof window === "undefined" ? undefined : queryCacheStorage,
-    maxAge: Number.POSITIVE_INFINITY,
-    prefix: queryCacheStoragePrefix,
-    refetchOnRestore: true,
-    serialize: (query) => stringify(query),
-    deserialize: (value) => parse<PersistedQuery>(value),
-    filters: {
-      predicate: (query) => isPersistableWidgetQueryKey(query.queryKey),
-    },
-  });

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -17,13 +17,13 @@ import {
 import superjson from "superjson";
 import type { SuperJSONResult } from "superjson";
 
+import { TRPCClientError } from "@trpc/client";
+
 import type { AppRouter } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { queryCacheDefaultStaleTimeMs } from "@homarr/api/query-cache";
 import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 import { env } from "@homarr/common/env";
-
-import { createWidgetQueryPersister } from "./query-cache-persister";
+import { showWarningNotification } from "@homarr/notifications";
 
 const getWebSocketProtocol = () => {
   // window is not defined on server side
@@ -52,14 +52,26 @@ const wsClient = createWSClient({
 });
 
 export function TRPCReactProvider(props: PropsWithChildren) {
-  const [queryPersister] = useState(() => createWidgetQueryPersister());
   const [queryClient] = useState(
     () =>
       new QueryClient({
         defaultOptions: {
           queries: {
-            persister: queryPersister.persisterFn,
-            staleTime: queryCacheDefaultStaleTimeMs,
+            staleTime: 5 * 1000,
+          },
+          mutations: {
+            onError(error) {
+              if (
+                error instanceof TRPCClientError &&
+                error.data?.code === "FORBIDDEN" &&
+                error.message === "Mutations are disabled in demo mode"
+              ) {
+                showWarningNotification({
+                  title: "Demo mode",
+                  message: "This action is disabled in demo mode.",
+                });
+              }
+            },
           },
         },
       }),

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -1,11 +1,14 @@
 import { redirect } from "next/navigation";
-import { Card, Center, Stack, Text, Title } from "@mantine/core";
+import { Alert, Card, Center, Code, Stack, Text, Title } from "@mantine/core";
+import { IconLogin } from "@tabler/icons-react";
 
 import { env } from "@homarr/auth/env";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
 import { sanitizeRedirectionUrl } from "@homarr/validation/redirection-url";
 
+import { env as appEnv } from "~/env";
+
 import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
 import { LoginForm } from "./_login-form";
 
@@ -37,6 +40,13 @@ export default async function Login(props: LoginProps) {
             {t("subtitle")}
           </Text>
         </Stack>
+        {appEnv.DEMO_MODE && (
+          <Alert icon={<IconLogin size={18} />} color="blue" variant="light" w={64 * 6} maw="90vw">
+            <Text size="sm" fw={500}>
+              Demo mode is enabled. Sign in with username <Code>demo</Code> and password <Code>demo</Code>
+            </Text>
+          </Alert>
+        )}
         <Card w={64 * 6} maw="90vw">
           <LoginForm
             providers={env.AUTH_PROVIDERS}

apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx

@@ -1,14 +1,10 @@
-import { cache } from "react";
 import type { Metadata } from "next";
-import { Suspense } from "react";
 import { TRPCError } from "@trpc/server";
 
 // Placed here because gridstack styles are used for board content
 import "~/styles/gridstack.scss";
 
-import type { DehydratedState } from "@tanstack/react-query";
 import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
-import { parse } from "superjson";
 
 import { getQueryClient } from "@homarr/api/server";
 import { IntegrationProvider } from "@homarr/auth/client";
@@ -18,7 +14,6 @@ import { isNullOrWhitespace } from "@homarr/common";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 import type { WidgetKind } from "@homarr/definitions";
-import { getAllQueryCacheAsync } from "@homarr/redis";
 import { getI18n } from "@homarr/translation/server";
 import { prefetchForKindAsync } from "@homarr/widgets/prefetch";
 
@@ -39,13 +34,10 @@ interface Props<TParams extends Params> {
 export const createBoardContentPage = <TParams extends Record<string, unknown>>({
   getInitialBoardAsync: getInitialBoard,
 }: Props<TParams>) => {
-  const getCachedBoard = cache((_paramsKey: string, params: TParams) => getInitialBoard(params));
-  const getBoardForParams = (params: TParams) => getCachedBoard(JSON.stringify(params), params);
-
   return {
     layout: createBoardLayout({
       headerActions: <BoardContentHeaderActions />,
-      getInitialBoardAsync: getBoardForParams,
+      getInitialBoardAsync: getInitialBoard,
       withTour: true,
     }),
     // eslint-disable-next-line no-restricted-syntax
@@ -53,7 +45,7 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
       const resolvedParams = await params;
       const queryClient = getQueryClient();
 
-      const [board, session] = await Promise.all([getBoardForParams(resolvedParams), auth()]);
+      const [board, session] = await Promise.all([getInitialBoard(resolvedParams), auth()]);
 
       const itemsMap = board.items.reduce((acc, item) => {
         const existing = acc.get(item.kind);
@@ -80,14 +72,9 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
         ),
       ]);
 
-      const userId = session?.user.id ?? "anonymous";
-
       return (
         <HydrationBoundary state={dehydrate(queryClient)}>
           <IntegrationProvider integrations={integrations}>
-            <Suspense>
-              <QueryCacheHydration userId={userId} boardId={board.id} />
-            </Suspense>
             <DynamicClientBoard />
           </IntegrationProvider>
         </HydrationBoundary>
@@ -95,7 +82,7 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
     },
     generateMetadataAsync: async ({ params }: { params: Promise<TParams> }): Promise<Metadata> => {
       try {
-        const board = await getBoardForParams(await params);
+        const board = await getInitialBoard(await params);
         const t = await getI18n();
 
         return {
@@ -111,6 +98,7 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
           },
         };
       } catch (error) {
+        // Ignore not found errors and return empty metadata
         if (error instanceof TRPCError && error.code === "NOT_FOUND") {
           return {};
         }
@@ -120,37 +108,3 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
     },
   };
 };
-
-interface PersistedEntry {
-  state: { data: unknown; dataUpdatedAt: number; status: string };
-  queryKey: unknown[];
-  queryHash: string;
-}
-
-async function QueryCacheHydration({ userId, boardId }: { userId: string; boardId: string }) {
-  try {
-    const entries = await getAllQueryCacheAsync(userId, boardId);
-    const queries: DehydratedState["queries"] = [];
-
-    for (const serialized of Object.values(entries)) {
-      try {
-        const persisted = parse<PersistedEntry>(serialized);
-        if (persisted.state.status !== "success") continue;
-
-        queries.push({
-          state: persisted.state as DehydratedState["queries"][number]["state"],
-          queryKey: persisted.queryKey,
-          queryHash: persisted.queryHash,
-        });
-      } catch {
-        // skip malformed entries
-      }
-    }
-
-    if (queries.length === 0) return null;
-
-    return <HydrationBoundary state={{ mutations: [], queries }} />;
-  } catch {
-    return null;
-  }
-}

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -45,8 +45,9 @@ export const BoardContentHeaderActions = () => {
   const [isEditMode] = useEditMode();
   const board = useRequiredBoard();
   const { hasChangeAccess } = useBoardPermissions(board);
+  const { data: demoMode, isLoading } = clientApi.info.isDemoMode.useQuery();
 
-  if (!hasChangeAccess) {
+  if (!hasChangeAccess || isLoading) {
     return <SelectBoardsMenu />;
   }
 
@@ -54,13 +55,15 @@ export const BoardContentHeaderActions = () => {
     <>
       {isEditMode && <AddMenu />}
 
-      <EditModeMenu />
+      <EditModeMenu demoMode={demoMode ?? false} />
 
-      <OnboardingTour.Target id="board-settings">
-        <HeaderButton href={`/boards/${board.name}/settings`}>
-          <IconSettings stroke={1.5} />
-        </HeaderButton>
-      </OnboardingTour.Target>
+      {!demoMode && (
+        <OnboardingTour.Target id="board-settings">
+          <HeaderButton href={`/boards/${board.name}/settings`}>
+            <IconSettings stroke={1.5} />
+          </HeaderButton>
+        </OnboardingTour.Target>
+      )}
 
       <SelectBoardsMenu />
     </>
@@ -155,7 +158,7 @@ const AddMenu = () => {
   );
 };
 
-const EditModeMenu = () => {
+const EditModeMenu = ({ demoMode }: { demoMode: boolean }) => {
   const [isEditMode, { open, close }] = useEditMode();
   const board = useRequiredBoard();
   const utils = clientApi.useUtils();
@@ -178,10 +181,18 @@ const EditModeMenu = () => {
     },
   });
 
+  const discardDemoChanges = useCallback(() => {
+    void utils.board.getBoardByName.invalidate({ name: board.name });
+    close();
+  }, [utils, board.name, close]);
+
   const toggle = useCallback(() => {
-    if (isEditMode) return saveBoard(board);
+    if (isEditMode) {
+      if (demoMode) return discardDemoChanges();
+      return saveBoard(board);
+    }
     open();
-  }, [board, isEditMode, saveBoard, open]);
+  }, [board, isEditMode, demoMode, saveBoard, open, discardDemoChanges]);
 
   useHotkeys([[hotkeys.toggleBoardEdit, toggle]]);
   usePreventLeaveWithDirty(isEditMode);

apps/nextjs/src/app/[locale]/init/_steps/integrations/init-integrations.tsx

@@ -78,10 +78,7 @@ export const InitIntegrations = () => {
   const dockerApps = dockerData?.status === "success" ? dockerData.apps : [];
   const totalDetected = dockerIntegrations.length + dockerApps.length;
 
-  const detectedKinds = useMemo(
-    () => new Set(dockerIntegrations.map((i) => i.kind)),
-    [dockerIntegrations],
-  );
+  const detectedKinds = useMemo(() => new Set(dockerIntegrations.map((i) => i.kind)), [dockerIntegrations]);
 
   const [selectedAppIds, setSelectedAppIds] = useState<Set<string>>(new Set());
   const [appsExpanded, setAppsExpanded] = useState(false);

apps/nextjs/src/app/[locale]/layout.tsx

@@ -26,6 +26,7 @@ import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
 
 import { Analytics } from "~/components/layout/analytics";
 import { CrowdinLiveTranslation } from "~/components/layout/crowdin-live-translation";
+
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
 import { ServiceWorkerRegistration } from "~/components/layout/service-worker-registration";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx

@@ -1,26 +1,23 @@
 "use client";
 
-import { useRouter } from "next/navigation";
 import type { MantineColor } from "@mantine/core";
-import { ActionIcon, Avatar, Badge, Box, Button, Group, Menu, Text, Tooltip } from "@mantine/core";
+import { Avatar, Badge, Box, Button, Group, Text } from "@mantine/core";
 import {
   IconCategoryPlus,
-  IconDots,
-  IconFileText,
   IconPlayerPlay,
   IconPlayerStop,
   IconRefresh,
   IconRotateClockwise,
   IconTrash,
 } from "@tabler/icons-react";
-import type { MRT_ColumnDef, MRT_Row } from "mantine-react-table";
+import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { humanFileSize, useTimeAgo } from "@homarr/common";
+import { useTimeAgo } from "@homarr/common";
 import type { ContainerState } from "@homarr/docker";
-import { containerStateColorMap, cpuUsageColor, memoryUsageColor, safeValue } from "@homarr/docker/shared";
+import { containerStateColorMap } from "@homarr/docker/shared";
 import { useModalAction } from "@homarr/modals";
 import { AddDockerAppToHomarr } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
@@ -30,30 +27,25 @@ import type { TablerIcon } from "@homarr/ui";
 import { OverflowBadge } from "@homarr/ui";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
-type DockerContainer = RouterOutputs["docker"]["getContainers"]["containers"][number];
-
-const createContainerLogsPath = (container: Pick<DockerContainer, "id" | "name">) =>
-  `/manage/tools/docker/logs/${container.id}?name=${encodeURIComponent(container.name)}`;
-
-const createColumns = (t: TranslationFunction): MRT_ColumnDef<DockerContainer>[] => [
+const createColumns = (
+  t: TranslationFunction,
+): MRT_ColumnDef<RouterOutputs["docker"]["getContainers"]["containers"][number]>[] => [
   {
     accessorKey: "name",
     header: t("docker.field.name.label"),
     Cell({ renderedCellValue, row }) {
       return (
-        <Group gap="xs" wrap="nowrap">
+        <Group gap="xs">
           <Avatar
             variant="outline"
-            radius="sm"
+            radius="lg"
             size="md"
             styles={{ image: { objectFit: "contain" } }}
             src={row.original.iconUrl}
           >
             {row.original.name.at(0)?.toUpperCase()}
           </Avatar>
-          <Text truncate="end" maw={500}>
-            {renderedCellValue}
-          </Text>
+          <Text>{renderedCellValue}</Text>
         </Group>
       );
     },
@@ -84,11 +76,11 @@ const createColumns = (t: TranslationFunction): MRT_ColumnDef<DockerContainer>[]
     maxSize: 200,
     Cell({ renderedCellValue, cell }) {
       return (
-        <Tooltip label={cell.row.original.image} multiline maw={400}>
-          <Box maw={200}>
-            <Text truncate="end">{renderedCellValue}</Text>
-          </Box>
-        </Tooltip>
+        <Box maw={200}>
+          <Text truncate="end" title={cell.row.original.image}>
+            {renderedCellValue}
+          </Text>
+        </Box>
       );
     },
   },
@@ -103,57 +95,13 @@ const createColumns = (t: TranslationFunction): MRT_ColumnDef<DockerContainer>[]
       );
     },
   },
-  {
-    id: "cpuUsage",
-    accessorKey: "cpuUsage",
-    size: 120,
-    header: t("docker.field.stats.cpu.label"),
-    enableHiding: true,
-    sortingFn: (rowA, rowB) => {
-      const cpuUsageA = safeValue(rowA.original.cpuUsage);
-      const cpuUsageB = safeValue(rowB.original.cpuUsage);
-
-      return cpuUsageA - cpuUsageB;
-    },
-    Cell({ row }) {
-      const cpuUsage = safeValue(row.original.cpuUsage);
-
-      return (
-        <Text size="sm" c={cpuUsageColor(cpuUsage, row.original.state)}>
-          {cpuUsage.toFixed(2)}%
-        </Text>
-      );
-    },
-  },
-  {
-    id: "memoryUsage",
-    accessorKey: "memoryUsage",
-    size: 140,
-    header: t("docker.field.stats.memory.label"),
-    enableHiding: true,
-    sortingFn: (rowA, rowB) => {
-      const memoryUsageA = safeValue(rowA.original.memoryUsage);
-      const memoryUsageB = safeValue(rowB.original.memoryUsage);
-
-      return memoryUsageA - memoryUsageB;
-    },
-    Cell({ row }) {
-      const bytesUsage = safeValue(row.original.memoryUsage);
-
-      return (
-        <Text size="sm" c={memoryUsageColor(bytesUsage, row.original.state)}>
-          {humanFileSize(bytesUsage)}
-        </Text>
-      );
-    },
-  },
 ];
 
-export function DockerTable({ containers, timestamp }: RouterOutputs["docker"]["getContainers"]) {
+export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"]) {
   const t = useI18n();
   const tDocker = useScopedI18n("docker");
   const { data } = clientApi.docker.getContainers.useQuery(undefined, {
-    initialData: { containers, timestamp },
+    initialData,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
@@ -183,8 +131,6 @@ export function DockerTable({ containers, timestamp }: RouterOutputs["docker"]["
     enableColumnFilters: false,
     enablePagination: false,
     enableRowSelection: true,
-    enableRowActions: true,
-    positionActionsColumn: "last",
     positionToolbarAlertBanner: "top",
     enableTableFooter: false,
     enableBottomToolbar: false,
@@ -195,10 +141,7 @@ export function DockerTable({ containers, timestamp }: RouterOutputs["docker"]["
       autoFocus: true,
     },
 
-    initialState: { density: "xs", showGlobalFilter: true, columnVisibility: { cpuUsage: false, memoryUsage: false } },
-    mantineTableBodyCellProps: { style: { padding: "4px 8px" } },
-    mantineTableHeadCellProps: { style: { padding: "4px 8px" } },
-    renderRowActions: ({ row }: { row: MRT_Row<DockerContainer> }) => <ContainerRowMenu container={row.original} />,
+    initialState: { density: "xs", showGlobalFilter: true },
     renderTopToolbarCustomActions: () => (
       <Button variant="default" rightSection={<IconRefresh size="1rem" />} onClick={() => mutate()} loading={isPending}>
         {tDocker("action.refresh.label")}
@@ -231,104 +174,28 @@ export function DockerTable({ containers, timestamp }: RouterOutputs["docker"]["
   );
 }
 
-const containerActions: { action: "start" | "stop" | "restart" | "remove"; icon: TablerIcon; color: MantineColor }[] = [
-  { action: "start", icon: IconPlayerPlay, color: "green" },
-  { action: "stop", icon: IconPlayerStop, color: "red" },
-  { action: "restart", icon: IconRotateClockwise, color: "orange" },
-  { action: "remove", icon: IconTrash, color: "red" },
-];
-
-const ContainerRowMenu = ({ container }: { container: DockerContainer }) => {
-  const t = useScopedI18n("docker.action");
-  const router = useRouter();
-  const utils = clientApi.useUtils();
-  const { openModal } = useModalAction(AddDockerAppToHomarr);
-
-  const useContainerAction = (action: "start" | "stop" | "restart" | "remove") =>
-    clientApi.docker[`${action}All`].useMutation({
-      async onSettled() {
-        await utils.docker.getContainers.invalidate();
-      },
-      onSuccess() {
-        showSuccessNotification({
-          title: t(`${action}.notification.success.title`),
-          message: t(`${action}.notification.success.message`),
-        });
-      },
-      onError() {
-        showErrorNotification({
-          title: t(`${action}.notification.error.title`),
-          message: t(`${action}.notification.error.message`),
-        });
-      },
-    });
-
-  const mutations = {
-    start: useContainerAction("start"),
-    stop: useContainerAction("stop"),
-    restart: useContainerAction("restart"),
-    remove: useContainerAction("remove"),
-  };
-
-  return (
-    <Menu withinPortal position="bottom-end" shadow="sm">
-      <Menu.Target>
-        <ActionIcon variant="subtle" color="gray" onClick={(e) => e.stopPropagation()}>
-          <IconDots size="1rem" />
-        </ActionIcon>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Item
-          leftSection={<IconFileText size="1rem" />}
-          onClick={() => router.push(createContainerLogsPath(container))}
-        >
-          {t("logs.label")}
-        </Menu.Item>
-        <Menu.Divider />
-        {containerActions.map(({ action, icon: Icon, color }) => (
-          <Menu.Item
-            key={action}
-            leftSection={<Icon size="1rem" />}
-            color={color}
-            onClick={() => mutations[action].mutate({ ids: [container.id] })}
-          >
-            {t(`${action}.label`)}
-          </Menu.Item>
-        ))}
-        <Menu.Divider />
-        <Menu.Item
-          leftSection={<IconCategoryPlus size="1rem" />}
-          color="red"
-          onClick={() => openModal({ selectedContainers: [container] })}
-        >
-          {t("addToHomarr.label")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};
-
 interface ContainerActionBarProps {
-  selectedContainers: DockerContainer[];
+  selectedContainers: RouterOutputs["docker"]["getContainers"]["containers"];
 }
 
 const ContainerActionBar = ({ selectedContainers }: ContainerActionBarProps) => {
   const t = useScopedI18n("docker.action");
   const { openModal } = useModalAction(AddDockerAppToHomarr);
+  const handleClick = () => {
+    openModal({
+      selectedContainers,
+    });
+  };
 
   const selectedIds = selectedContainers.map((container) => container.id);
 
   return (
     <Group gap="xs">
-      {containerActions.map(({ action, icon, color }) => (
-        <ContainerActionBarButton key={action} icon={icon} color={color} action={action} selectedIds={selectedIds} />
-      ))}
-      <Button
-        leftSection={<IconCategoryPlus />}
-        color="red"
-        onClick={() => openModal({ selectedContainers })}
-        variant="light"
-      >
+      <ContainerActionBarButton icon={IconPlayerPlay} color="green" action="start" selectedIds={selectedIds} />
+      <ContainerActionBarButton icon={IconPlayerStop} color="red" action="stop" selectedIds={selectedIds} />
+      <ContainerActionBarButton icon={IconRotateClockwise} color="orange" action="restart" selectedIds={selectedIds} />
+      <ContainerActionBarButton icon={IconTrash} color="red" action="remove" selectedIds={selectedIds} />
+      <Button leftSection={<IconCategoryPlus />} color={"red"} onClick={handleClick} variant="light">
         {t("addToHomarr.label")}
       </Button>
     </Group>

apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/client.tsx

@@ -1,10 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-
-export const ClientSideDockerLogsTerminal = dynamic(
-  () => import("./terminal").then(({ DockerLogsTerminal }) => DockerLogsTerminal),
-  {
-    ssr: false,
-  },
-);

apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/page.tsx

@@ -1,47 +0,0 @@
-import { notFound } from "next/navigation";
-import { Box, Group } from "@mantine/core";
-
-import { api } from "@homarr/api/server";
-import { auth } from "@homarr/auth/next";
-import { env } from "@homarr/docker/env";
-
-import "@xterm/xterm/css/xterm.css";
-
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { fullHeightWithoutHeaderAndFooter } from "~/constants";
-import { ClientSideDockerLogsTerminal } from "./client";
-
-interface DockerContainerLogsPageProps {
-  params: Promise<{ containerId: string }>;
-  searchParams: Promise<{ name?: string }>;
-}
-
-export default async function DockerContainerLogsPage({ params, searchParams }: DockerContainerLogsPageProps) {
-  const session = await auth();
-  if (!(session?.user.permissions.includes("admin") && env.ENABLE_DOCKER)) {
-    notFound();
-  }
-
-  const { containerId } = await params;
-  const { name } = await searchParams;
-
-  try {
-    await api.docker.logs({ id: containerId, tail: 1 });
-  } catch {
-    notFound();
-  }
-
-  return (
-    <>
-      <Group justify="space-between" align="center" wrap="nowrap">
-        <DynamicBreadcrumb
-          dynamicMappings={new Map([[containerId, name ?? containerId]])}
-          nonInteractable={[containerId]}
-        />
-      </Group>
-      <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
-        <ClientSideDockerLogsTerminal containerId={containerId} />
-      </Box>
-    </>
-  );
-}

apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/terminal.module.css

@@ -1,3 +0,0 @@
-.outerTerminal > div {
-  height: 100%;
-}

apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/terminal.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef } from "react";
-import { Box } from "@mantine/core";
-import { CanvasAddon } from "@xterm/addon-canvas";
-import { FitAddon } from "@xterm/addon-fit";
-import { Terminal } from "@xterm/xterm";
-
-import { clientApi } from "@homarr/api/client";
-
-import classes from "./terminal.module.css";
-
-interface DockerLogsTerminalProps {
-  containerId: string;
-}
-
-export const DockerLogsTerminal = ({ containerId }: DockerLogsTerminalProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const terminalRef = useRef<Terminal | null>(null);
-  const pendingLogsRef = useRef<string[]>([]);
-  const isTerminalReadyRef = useRef(false);
-
-  const writeToTerminal = useCallback((data: string) => {
-    if (!isTerminalReadyRef.current || !terminalRef.current) {
-      pendingLogsRef.current.push(data);
-      return;
-    }
-
-    terminalRef.current.write(data);
-    terminalRef.current.refresh(0, terminalRef.current.rows - 1);
-  }, []);
-
-  clientApi.docker.subscribeLogs.useSubscription(
-    { id: containerId, tail: 200 },
-    {
-      onData: writeToTerminal,
-      onError(err) {
-        writeToTerminal(`\r\n\x1b[31m${err.message}\x1b[0m`);
-      },
-    },
-  );
-
-  useEffect(() => {
-    if (!ref.current) {
-      return () => undefined;
-    }
-
-    const canvasAddon = new CanvasAddon();
-
-    terminalRef.current = new Terminal({
-      cursorBlink: false,
-      disableStdin: true,
-      convertEol: true,
-      fontSize: 14,
-    });
-    terminalRef.current.open(ref.current);
-    terminalRef.current.loadAddon(canvasAddon);
-
-    isTerminalReadyRef.current = true;
-    const terminal = terminalRef.current;
-    pendingLogsRef.current.forEach((data) => terminal.write(data));
-    pendingLogsRef.current = [];
-    terminal.refresh(0, terminal.rows - 1);
-
-    setTimeout(() => {
-      const fitAddon = new FitAddon();
-      terminalRef.current?.loadAddon(fitAddon);
-      fitAddon.fit();
-    });
-
-    return () => {
-      isTerminalReadyRef.current = false;
-      pendingLogsRef.current = [];
-      canvasAddon.dispose();
-      terminalRef.current?.dispose();
-      terminalRef.current = null;
-    };
-  }, [writeToTerminal]);
-
-  return <Box ref={ref} className={classes.outerTerminal} h="100%" />;
-};

apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx

@@ -57,9 +57,8 @@ export const TerminalComponent = () => {
     });
 
     return () => {
-      canvasAddon.dispose();
       terminalRef.current?.dispose();
-      terminalRef.current = null;
+      canvasAddon.dispose();
     };
   }, []);
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { Button, Group, Stack } from "@mantine/core";
-import type { z } from "zod/v4";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import { userChangeHomeBoardsSchema } from "@homarr/validation/user";
-
-import type { Board } from "~/app/[locale]/boards/_types";
-import { BoardSelect } from "~/components/board/board-select";
-
-interface ChangeHomeBoardFormProps {
-  user: RouterOutputs["user"]["getById"];
-  boardsData: Pick<Board, "id" | "name" | "logoImageUrl">[];
-}
-
-export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormProps) => {
-  const t = useI18n();
-  const { mutate, isPending } = clientApi.user.changeHomeBoards.useMutation({
-    async onSettled() {
-      await revalidatePathActionAsync(`/manage/users/${user.id}`);
-    },
-    onSuccess(_, variables) {
-      form.setInitialValues({
-        homeBoardId: variables.homeBoardId,
-        mobileHomeBoardId: variables.mobileHomeBoardId,
-      });
-      showSuccessNotification({
-        message: t("user.action.changeHomeBoard.notification.success.message"),
-      });
-    },
-    onError() {
-      showErrorNotification({
-        message: t("user.action.changeHomeBoard.notification.error.message"),
-      });
-    },
-  });
-  const form = useZodForm(userChangeHomeBoardsSchema, {
-    initialValues: {
-      homeBoardId: user.homeBoardId,
-      mobileHomeBoardId: user.mobileHomeBoardId,
-    },
-  });
-
-  const handleSubmit = (values: FormType) => {
-    mutate({
-      userId: user.id,
-      ...values,
-    });
-  };
-
-  return (
-    <form onSubmit={form.onSubmit(handleSubmit)}>
-      <Stack gap="md">
-        <BoardSelect
-          label={t("management.page.user.setting.general.item.board.type.general")}
-          clearable
-          boards={boardsData}
-          w="100%"
-          {...form.getInputProps("homeBoardId")}
-        />
-        <BoardSelect
-          label={t("management.page.user.setting.general.item.board.type.mobile")}
-          clearable
-          boards={boardsData}
-          w="100%"
-          {...form.getInputProps("mobileHomeBoardId")}
-        />
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.save")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-};
-
-type FormType = z.infer<typeof userChangeHomeBoardsSchema>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-search-preferences.tsx

@@ -1,84 +0,0 @@
-"use client";
-
-import { Button, Group, Select, Stack, Switch } from "@mantine/core";
-import type { z } from "zod/v4";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import { userChangeSearchPreferencesSchema } from "@homarr/validation/user";
-
-interface ChangeSearchPreferencesFormProps {
-  user: RouterOutputs["user"]["getById"];
-  searchEnginesData: { value: string; label: string }[];
-}
-
-export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeSearchPreferencesFormProps) => {
-  const t = useI18n();
-  const { mutate, isPending } = clientApi.user.changeSearchPreferences.useMutation({
-    async onSettled() {
-      await revalidatePathActionAsync(`/manage/users/${user.id}`);
-    },
-    onSuccess(_, variables) {
-      form.setInitialValues({
-        defaultSearchEngineId: variables.defaultSearchEngineId,
-        openInNewTab: variables.openInNewTab,
-        ddgBangsEnabled: variables.ddgBangsEnabled,
-      });
-      showSuccessNotification({
-        message: t("user.action.changeSearchPreferences.notification.success.message"),
-      });
-    },
-    onError() {
-      showErrorNotification({
-        message: t("user.action.changeSearchPreferences.notification.error.message"),
-      });
-    },
-  });
-  const form = useZodForm(userChangeSearchPreferencesSchema, {
-    initialValues: {
-      defaultSearchEngineId: user.defaultSearchEngineId,
-      openInNewTab: user.openSearchInNewTab,
-      ddgBangsEnabled: user.ddgBangs,
-    },
-  });
-
-  const handleSubmit = (values: FormType) => {
-    mutate({
-      userId: user.id,
-      ...values,
-    });
-  };
-
-  return (
-    <form onSubmit={form.onSubmit(handleSubmit)}>
-      <Stack gap="md">
-        <Select
-          label={t("user.field.defaultSearchEngine.label")}
-          w="100%"
-          data={searchEnginesData}
-          {...form.getInputProps("defaultSearchEngineId")}
-        />
-        <Switch
-          label={t("user.field.openSearchInNewTab.label")}
-          {...form.getInputProps("openInNewTab", { type: "checkbox" })}
-        />
-        <Switch
-          label={t("user.field.ddgBangs.label")}
-          {...form.getInputProps("ddgBangsEnabled", { type: "checkbox" })}
-        />
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.save")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-};
-
-type FormType = z.infer<typeof userChangeSearchPreferencesSchema>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_first-day-of-week.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { Button, Group, Radio, Stack } from "@mantine/core";
-import type { DayOfWeek } from "@mantine/dates";
-import dayjs from "dayjs";
-import localeData from "dayjs/plugin/localeData";
-import type { z } from "zod/v4";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import { userFirstDayOfWeekSchema } from "@homarr/validation/user";
-
-dayjs.extend(localeData);
-
-interface FirstDayOfWeekProps {
-  user: RouterOutputs["user"]["getById"];
-}
-
-const weekDays = dayjs.weekdays(false);
-
-export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
-  const t = useI18n();
-  const { mutate, isPending } = clientApi.user.changeFirstDayOfWeek.useMutation({
-    async onSettled() {
-      await revalidatePathActionAsync(`/manage/users/${user.id}`);
-    },
-    onSuccess(_, variables) {
-      form.setInitialValues({
-        firstDayOfWeek: variables.firstDayOfWeek as DayOfWeek,
-      });
-      showSuccessNotification({
-        message: t("user.action.changeFirstDayOfWeek.notification.success.message"),
-      });
-    },
-    onError() {
-      showErrorNotification({
-        message: t("user.action.changeFirstDayOfWeek.notification.error.message"),
-      });
-    },
-  });
-  const form = useZodForm(userFirstDayOfWeekSchema, {
-    initialValues: {
-      firstDayOfWeek: user.firstDayOfWeek as DayOfWeek,
-    },
-  });
-
-  const handleSubmit = (values: FormType) => {
-    mutate({
-      id: user.id,
-      ...values,
-    });
-  };
-
-  const inputProps = form.getInputProps("firstDayOfWeek");
-  const onChange = inputProps.onChange as (value: number) => void;
-  const value = (inputProps.value as number).toString();
-
-  return (
-    <form onSubmit={form.onSubmit(handleSubmit)}>
-      <Stack gap="md">
-        <Radio.Group {...inputProps} value={value} onChange={(nextValue: string) => onChange(parseInt(nextValue, 10))}>
-          <Group mt="xs">
-            <Radio value="1" label={weekDays[1]} />
-            <Radio value="6" label={weekDays[6]} />
-            <Radio value="0" label={weekDays[0]} />
-          </Group>
-        </Radio.Group>
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.save")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-};
-
-type FormType = z.infer<typeof userFirstDayOfWeekSchema>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_ping-icons-enabled.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import { Button, Group, Stack, Switch } from "@mantine/core";
-import type { z } from "zod/v4";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import { userPingIconsEnabledSchema } from "@homarr/validation/user";
-
-interface PingIconsEnabledProps {
-  user: RouterOutputs["user"]["getById"];
-}
-
-export const PingIconsEnabled = ({ user }: PingIconsEnabledProps) => {
-  const t = useI18n();
-  const { mutate, isPending } = clientApi.user.changePingIconsEnabled.useMutation({
-    async onSettled() {
-      await revalidatePathActionAsync(`/manage/users/${user.id}`);
-    },
-    onSuccess(_, variables) {
-      form.setInitialValues({
-        pingIconsEnabled: variables.pingIconsEnabled,
-      });
-      showSuccessNotification({
-        message: t("user.action.changePingIconsEnabled.notification.success.message"),
-      });
-    },
-    onError() {
-      showErrorNotification({
-        message: t("user.action.changePingIconsEnabled.notification.error.message"),
-      });
-    },
-  });
-  const form = useZodForm(userPingIconsEnabledSchema, {
-    initialValues: {
-      pingIconsEnabled: user.pingIconsEnabled,
-    },
-  });
-
-  const handleSubmit = (values: FormType) => {
-    mutate({
-      id: user.id,
-      ...values,
-    });
-  };
-
-  return (
-    <form onSubmit={form.onSubmit(handleSubmit)}>
-      <Stack gap="md">
-        <Switch
-          {...form.getInputProps("pingIconsEnabled", { type: "checkbox" })}
-          label={t("user.field.pingIconsEnabled.label")}
-        />
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.save")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-};
-
-type FormType = z.infer<typeof userPingIconsEnabledSchema>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import { useCallback } from "react";
-import { Button, Group, Stack, TextInput } from "@mantine/core";
-
-import type { RouterInputs, RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import { userEditProfileSchema } from "@homarr/validation/user";
-
-interface UserProfileFormProps {
-  user: RouterOutputs["user"]["getById"];
-}
-
-export const UserProfileForm = ({ user }: UserProfileFormProps) => {
-  const t = useI18n();
-  const { mutate, isPending } = clientApi.user.editProfile.useMutation({
-    async onSettled() {
-      await revalidatePathActionAsync("/manage/users");
-    },
-    onSuccess(_, variables) {
-      // Reset form initial values to reset dirty state
-      form.setInitialValues({
-        name: variables.name,
-        email: variables.email ?? "",
-      });
-      showSuccessNotification({
-        title: t("common.notification.update.success"),
-        message: t("user.action.editProfile.notification.success.message"),
-      });
-    },
-    onError(error) {
-      const message =
-        error.data?.code === "CONFLICT"
-          ? t("user.error.usernameTaken")
-          : t("user.action.editProfile.notification.error.message");
-      showErrorNotification({
-        title: t("common.notification.update.error"),
-        message,
-      });
-    },
-  });
-  const form = useZodForm(userEditProfileSchema.omit({ id: true }), {
-    initialValues: {
-      name: user.name ?? "",
-      email: user.email ?? "",
-    },
-  });
-
-  // Only credentials users can edit their profile
-  const isProviderCredentials = user.provider === "credentials";
-
-  const handleSubmit = useCallback(
-    (values: FormType) => {
-      if (!isProviderCredentials) return;
-      mutate({
-        ...values,
-        id: user.id,
-      });
-    },
-    [isProviderCredentials, mutate, user.id],
-  );
-
-  return (
-    <form onSubmit={form.onSubmit(handleSubmit)}>
-      <Stack>
-        <TextInput
-          disabled={!isProviderCredentials}
-          label={t("user.field.username.label")}
-          withAsterisk
-          {...form.getInputProps("name")}
-        />
-        <TextInput
-          disabled={!isProviderCredentials}
-          label={t("user.field.email.label")}
-          {...form.getInputProps("email")}
-        />
-
-        {isProviderCredentials && (
-          <Group justify="end">
-            <Button type="submit" disabled={!form.isDirty()} loading={isPending}>
-              {t("common.action.saveChanges")}
-            </Button>
-          </Group>
-        )}
-      </Stack>
-    </form>
-  );
-};
-
-type FormType = Omit<RouterInputs["user"]["editProfile"], "id">;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx

@@ -6,18 +6,13 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
-import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
 import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
 import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { createMetaTitle } from "~/metadata";
 import { canAccessUserEditPage } from "../access";
-import { ChangeHomeBoardForm } from "./_components/_change-home-board";
-import { ChangeSearchPreferencesForm } from "./_components/_change-search-preferences";
 import { DeleteUserButton } from "./_components/_delete-user-button";
-import { FirstDayOfWeek } from "./_components/_first-day-of-week";
-import { PingIconsEnabled } from "./_components/_ping-icons-enabled";
+import { UserGeneralSettingsForm } from "./_components/_general-settings-form";
 import { UserProfileAvatarForm } from "./_components/_profile-avatar-form";
-import { UserProfileForm } from "./_components/_profile-form";
 import { ResetTours } from "./_components/_reset-tours";
 
 interface Props {
@@ -64,7 +59,7 @@ export default async function EditUserPage(props: Props) {
 
   const boards = await api.board.getAllBoards();
   const searchEngines = await api.searchEngine.getSelectable();
-
+  const isSelf = session?.user.id === user.id;
   const isCredentialsUser = user.provider === "credentials";
 
   return (
@@ -74,51 +69,25 @@ export default async function EditUserPage(props: Props) {
           {t("management.page.user.fieldsDisabledExternalProvider")}
         </Alert>
       )}
-
       <Title>{tGeneral("title")}</Title>
-      <Group gap="xl">
-        <Box flex={1}>
-          <UserProfileForm user={user} />
+      <Group gap="xl" align="flex-start" wrap="wrap">
+        <Box flex={1} miw={{ base: "100%", md: 540 }}>
+          <UserGeneralSettingsForm
+            user={user}
+            boardsData={boards.map((board) => ({
+              id: board.id,
+              name: board.name,
+              logoImageUrl: board.logoImageUrl,
+            }))}
+            searchEnginesData={searchEngines}
+            showLanguageSelector={isSelf}
+          />
         </Box>
-        <Box w={{ base: "100%", lg: 200 }}>
+        <Box w={{ base: "100%", lg: 260 }}>
           <UserProfileAvatarForm user={user} />
         </Box>
       </Group>
 
-      {session?.user.id === user.id && (
-        <Stack mb="lg">
-          <Title order={2}>{tGeneral("item.language")}</Title>
-          <CurrentLanguageCombobox />
-        </Stack>
-      )}
-
-      <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.board.title")}</Title>
-        <ChangeHomeBoardForm
-          user={user}
-          boardsData={boards.map((board) => ({
-            id: board.id,
-            name: board.name,
-            logoImageUrl: board.logoImageUrl,
-          }))}
-        />
-      </Stack>
-
-      <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.search")}</Title>
-        <ChangeSearchPreferencesForm user={user} searchEnginesData={searchEngines} />
-      </Stack>
-
-      <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.firstDayOfWeek")}</Title>
-        <FirstDayOfWeek user={user} />
-      </Stack>
-
-      <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.accessibility")}</Title>
-        <PingIconsEnabled user={user} />
-      </Stack>
-
       {session?.user.id === user.id && (
         <Stack mb="lg">
           <Title order={2}>{tGeneral("item.onboardingTours.title")}</Title>

apps/nextjs/src/components/layout/navigation-link.tsx

@@ -26,7 +26,7 @@ const NavLinkHref = (props: NavigationLinkHref) => {
       label={props.label}
       leftSection={props.icon}
       href={props.href}
-      active={pathname === props.href || pathname.startsWith(`${props.href}/`)}
+      active={pathname === props.href}
     />
   );
   return <TourTarget id={tourId}>{link}</TourTarget>;
@@ -34,7 +34,7 @@ const NavLinkHref = (props: NavigationLinkHref) => {
 
 const NavLinkWithItems = (props: NavigationLinkWithItems) => {
   const pathname = usePathname();
-  const isActive = props.items.some((item) => pathname === item.href || pathname.startsWith(`${item.href}/`));
+  const isActive = props.items.some((item) => item.href === pathname);
   const nav = (
     <NavLink label={props.label} leftSection={props.icon} defaultOpened={isActive}>
       {props.items.map((item) => (

apps/nextjs/src/components/navigation/dynamic-breadcrumb.tsx

@@ -58,23 +58,19 @@ export const DynamicBreadcrumb = ({
         }
         const href = `/${pathnameParts.slice(0, index + 1).join("/")}`;
         const translationKey = `${pathnameParts.slice(0, index + 1).join(".")}`;
-        const mappedValue = dynamicMappings?.get(pathnamePart);
-
-        if (mappedValue) {
-          if (nonInteractable?.includes(pathnamePart)) {
-            return <Text key={href}>{mappedValue}</Text>;
-          }
-          return (
-            <Anchor key={href} href={href}>
-              {mappedValue}
-            </Anchor>
-          );
-        }
 
         if (nonInteractable?.includes(pathnamePart)) {
           return <Text key={href}>{t(`${translationKey}.label` as TranslationKeys)}</Text>;
         }
 
+        if (dynamicMappings?.has(pathnamePart)) {
+          return (
+            <Anchor key={href} href={href}>
+              {dynamicMappings.get(pathnamePart)}
+            </Anchor>
+          );
+        }
+
         return (
           <Anchor key={href} href={href}>
             {t(`${translationKey}.label` as TranslationKeys)}

apps/nextjs/src/env.ts

@@ -3,6 +3,7 @@ import { createBooleanSchema, createEnv } from "@homarr/core/infrastructure/env"
 export const env = createEnv({
   server: {
     UNSAFE_ENABLE_MOCK_INTEGRATION: createBooleanSchema(false),
+    DEMO_MODE: createBooleanSchema(false),
   },
   experimental__runtimeEnv: process.env,
 });

docs/README.md

@@ -19,6 +19,9 @@
 
 <!-- Links -->
 <p align="center">
+  <a href="https://demo.homarr.dev">
+    <strong>Live Demo 🎮</strong>
+  </a> •
   <a href="https://homarr.dev/docs/category/installation-1/">
     <strong>Install 💻</strong>
   </a> •

packages/api/package.json

@@ -9,7 +9,6 @@
   "exports": {
     ".": "./src/index.ts",
     "./client": "./src/client.ts",
-    "./query-cache": "./src/query-cache.ts",
     "./server": "./src/server.ts",
     "./websocket": "./src/websocket.ts",
     "./shared": "./src/shared.ts",

packages/api/src/env.ts

@@ -1,12 +1,14 @@
 import { z } from "zod/v4";
 
-import { createEnv } from "@homarr/core/infrastructure/env";
+import { createBooleanSchema, createEnv } from "@homarr/core/infrastructure/env";
 
 export const env = createEnv({
   server: {
     KUBERNETES_SERVICE_ACCOUNT_NAME: z.string().optional(),
+    DEMO_MODE: createBooleanSchema(false),
   },
   runtimeEnv: {
     KUBERNETES_SERVICE_ACCOUNT_NAME: process.env.KUBERNETES_SERVICE_ACCOUNT_NAME,
+    DEMO_MODE: process.env.DEMO_MODE,
   },
 });

packages/api/src/middlewares/docker.ts

@@ -2,11 +2,11 @@ import { TRPCError } from "@trpc/server";
 
 import { env } from "@homarr/docker/env";
 
-import { publicProcedure } from "../trpc";
+import { isDemoMode, publicProcedure } from "../trpc";
 
 export const dockerMiddleware = () => {
   return publicProcedure.use(async ({ next }) => {
-    if (env.ENABLE_DOCKER) {
+    if (env.ENABLE_DOCKER || isDemoMode) {
       return await next();
     }
     throw new TRPCError({

packages/api/src/query-cache.ts

@@ -1,34 +0,0 @@
-import type { QueryKey } from "@tanstack/react-query";
-
-export const queryCacheRetentionMs = 1000 * 60 * 60 * 24;
-export const queryCacheDefaultStaleTimeMs = 1000 * 60 * 5;
-export const queryCacheMaxValueBytes = 1024 * 1024;
-export const queryCacheStoragePrefix = "homarr-widget-query";
-
-let activeQueryCacheBoardId: string | null = null;
-
-export const setActiveQueryCacheBoardId = (boardId: string | null) => {
-  activeQueryCacheBoardId = boardId;
-};
-
-export const getActiveQueryCacheBoardId = () => activeQueryCacheBoardId;
-
-const persistableQueryPaths = new Set(["app.byId", "app.byIds", "docker.getContainers", "integration.byIds"]);
-const excludedWidgetPaths = new Set(["widget.app.ping"]);
-
-const getTrpcPathFromQueryKey = (queryKey: QueryKey) => {
-  const first = queryKey[0];
-  if (!Array.isArray(first)) return null;
-
-  const parts = first.filter((part): part is string => typeof part === "string");
-  return parts.length > 0 ? parts : null;
-};
-
-export const isPersistableWidgetQueryKey = (queryKey: QueryKey) => {
-  const path = getTrpcPathFromQueryKey(queryKey);
-  if (!path) return false;
-
-  if (path[0] === "widget") return !excludedWidgetPaths.has(path.join("."));
-
-  return persistableQueryPaths.has(path.join("."));
-};

packages/api/src/root.ts

@@ -24,7 +24,6 @@ export const appRouter = createTRPCRouter({
   cronJobs: lazy(() => import("./router/cron-jobs").then((mod) => mod.cronJobsRouter)),
   apiKeys: lazy(() => import("./router/apiKeys").then((mod) => mod.apiKeysRouter)),
   media: lazy(() => import("./router/medias/media-router").then((mod) => mod.mediaRouter)),
-  queryCache: lazy(() => import("./router/query-cache").then((mod) => mod.queryCacheRouter)),
   updateChecker: lazy(() => import("./router/update-checker").then((mod) => mod.updateCheckerRouter)),
   certificates: lazy(() => import("./router/certificates/certificate-router").then((mod) => mod.certificateRouter)),
   bangs: lazy(() => import("./router/bangs/bangs-router").then((mod) => mod.bangsRouter)),

packages/api/src/router/docker/docker-router.ts

@@ -4,11 +4,7 @@ import { z } from "zod/v4";
 
 import type { Container, ContainerState, Docker, Port } from "@homarr/docker";
 import { DockerSingleton } from "@homarr/docker";
-import {
-  dockerContainersRequestHandler,
-  getContainerLogsAsync,
-  streamContainerLogsAsync,
-} from "@homarr/request-handler/docker";
+import { dockerContainersRequestHandler } from "@homarr/request-handler/docker";
 
 import { dockerMiddleware } from "../../middlewares/docker";
 import { createTRPCRouter, permissionRequiredProcedure } from "../../trpc";
@@ -108,84 +104,6 @@ export const dockerRouter = createTRPCRouter({
       const innerHandler = dockerContainersRequestHandler.handler({});
       await innerHandler.invalidateAsync();
     }),
-  logs: permissionRequiredProcedure
-    .requiresPermission("admin")
-    .concat(dockerMiddleware())
-    .input(
-      z.object({
-        id: z.string(),
-        tail: z.number().min(1).max(1000).optional(),
-      }),
-    )
-    .query(async ({ input }) => {
-      const logs = await getContainerLogsAsync(input.id, input.tail ?? 200);
-
-      if (!logs) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "Container not found",
-        });
-      }
-
-      return {
-        logs,
-      };
-    }),
-  subscribeLogs: permissionRequiredProcedure
-    .requiresPermission("admin")
-    .concat(dockerMiddleware())
-    .input(
-      z.object({
-        id: z.string(),
-        tail: z.number().min(1).max(1000).optional(),
-      }),
-    )
-    .subscription(({ input }) => {
-      return observable<string>((emit) => {
-        let cleanupFn: (() => void) | undefined;
-        let isSubscribed = true;
-
-        const initializeStreamAsync = async () => {
-          try {
-            cleanupFn = await streamContainerLogsAsync(
-              input.id,
-              input.tail ?? 200,
-              (data) => {
-                if (isSubscribed) {
-                  emit.next(data);
-                }
-              },
-              (err) => {
-                if (isSubscribed) {
-                  emit.error(
-                    new TRPCError({
-                      code: "INTERNAL_SERVER_ERROR",
-                      message: err.message,
-                    }),
-                  );
-                }
-              },
-            );
-          } catch (err) {
-            if (isSubscribed) {
-              emit.error(
-                new TRPCError({
-                  code: "NOT_FOUND",
-                  message: err instanceof Error ? err.message : "Container not found",
-                }),
-              );
-            }
-          }
-        };
-
-        void initializeStreamAsync();
-
-        return () => {
-          isSubscribed = false;
-          cleanupFn?.();
-        };
-      });
-    }),
 });
 
 const getContainerOrDefaultAsync = async (instance: Docker, id: string) => {

packages/api/src/router/info.ts

@@ -1,7 +1,7 @@
 import z from "zod/v4";
 
 import packageJson from "../../../../package.json";
-import { createTRPCRouter, protectedProcedure } from "../trpc";
+import { createTRPCRouter, isDemoMode, publicProcedure, protectedProcedure } from "../trpc";
 
 export const infoRouter = createTRPCRouter({
   getInfo: protectedProcedure
@@ -13,4 +13,5 @@ export const infoRouter = createTRPCRouter({
         version: packageJson.version,
       };
     }),
+  isDemoMode: publicProcedure.query(() => isDemoMode),
 });

packages/api/src/router/query-cache.ts

@@ -1,54 +0,0 @@
-import { z } from "zod/v4";
-
-import { eq } from "@homarr/db";
-import { boards } from "@homarr/db/schema";
-import { createQueryCacheChannel } from "@homarr/redis";
-
-import { queryCacheMaxValueBytes, queryCacheRetentionMs } from "../query-cache";
-import { createTRPCRouter, publicProcedure } from "../trpc";
-import { throwIfActionForbiddenAsync } from "./board/board-access";
-
-const queryCacheKeyInput = z.object({
-  boardId: z.string().min(1),
-  key: z.string().min(1).max(4096),
-});
-
-const queryCacheSetInput = queryCacheKeyInput.extend({
-  value: z.string().max(queryCacheMaxValueBytes * 2),
-});
-
-const createChannel = (input: z.infer<typeof queryCacheKeyInput>, userId: string) =>
-  createQueryCacheChannel({
-    userId,
-    boardId: input.boardId,
-    key: input.key,
-    ttlMs: queryCacheRetentionMs,
-    maxValueBytes: queryCacheMaxValueBytes,
-  });
-
-const validateBoardAccessAsync = async (ctx: Parameters<typeof throwIfActionForbiddenAsync>[0], boardId: string) => {
-  await throwIfActionForbiddenAsync(ctx, eq(boards.id, boardId), "view");
-};
-
-export const queryCacheRouter = createTRPCRouter({
-  getItem: publicProcedure.input(queryCacheKeyInput).query(async ({ ctx, input }) => {
-    await validateBoardAccessAsync(ctx, input.boardId);
-
-    const channel = createChannel(input, ctx.session?.user.id ?? "anonymous");
-    return await channel.getAsync();
-  }),
-  setItem: publicProcedure.input(queryCacheSetInput).mutation(async ({ ctx, input }) => {
-    await validateBoardAccessAsync(ctx, input.boardId);
-
-    const channel = createChannel(input, ctx.session?.user.id ?? "anonymous");
-    return {
-      stored: await channel.setAsync(input.value),
-    };
-  }),
-  removeItem: publicProcedure.input(queryCacheKeyInput).mutation(async ({ ctx, input }) => {
-    await validateBoardAccessAsync(ctx, input.boardId);
-
-    const channel = createChannel(input, ctx.session?.user.id ?? "anonymous");
-    await channel.removeAsync();
-  }),
-});

packages/api/src/router/test/docker/docker-router.spec.ts

@@ -13,14 +13,6 @@ import { dockerRouter } from "../../docker/docker-router";
 // Mock the auth module to return an empty session
 vi.mock("@homarr/auth", () => ({ auth: () => ({}) as Session }));
 vi.mock("@homarr/request-handler/docker", () => ({
-  getContainerLogsAsync: async () => {
-    await Promise.resolve();
-    return "logs";
-  },
-  streamContainerLogsAsync: async () => {
-    await Promise.resolve();
-    return () => undefined;
-  },
   dockerContainersRequestHandler: {
     handler: () => ({
       getCachedOrUpdatedDataAsync: async () => {
@@ -73,8 +65,6 @@ const validInputs: {
   restartAll: { ids: ["1"] },
   removeAll: { ids: ["1"] },
   invalidate: undefined,
-  logs: { id: "1", tail: 200 },
-  subscribeLogs: { id: "1", tail: 200 },
 };
 
 describe("All procedures should only be accessible for users with admin permission", () => {

packages/api/src/router/widgets/index.ts

@@ -31,4 +31,5 @@ export const widgetRouter = createTRPCRouter({
   tracearr: lazy(() => import("./tracearr").then((mod) => mod.tracearrRouter)),
   speedtestTracker: lazy(() => import("./speedtest-tracker").then((mod) => mod.speedtestTrackerRouter)),
   umami: lazy(() => import("./umami").then((mod) => mod.umamiRouter)),
+  ups: lazy(() => import("./ups").then((mod) => mod.upsRouter)),
 });

packages/api/src/router/widgets/ups.ts

@@ -0,0 +1,51 @@
+import { observable } from "@trpc/server/observable";
+
+import { getIntegrationKindsByCategory } from "@homarr/definitions";
+import type { UpsSummary } from "@homarr/integrations/types";
+import { upsSummariesRequestHandler } from "@homarr/request-handler/ups";
+
+import { createManyIntegrationMiddleware } from "../../middlewares/integration";
+import { createTRPCRouter, publicProcedure } from "../../trpc";
+
+export const upsRouter = createTRPCRouter({
+  getSummaries: publicProcedure
+    .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("ups")))
+    .query(async ({ ctx }) => {
+      const results = await Promise.all(
+        ctx.integrations.map(async (integration) => {
+          const innerHandler = upsSummariesRequestHandler.handler(integration, {});
+          const { data, timestamp } = await innerHandler.getCachedOrUpdatedDataAsync({ forceUpdate: false });
+
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationUrl: integration.url,
+            summaries: data,
+            updatedAt: timestamp,
+          };
+        }),
+      );
+
+      return results;
+    }),
+  subscribeSummaries: publicProcedure
+    .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("ups")))
+    .subscription(({ ctx }) => {
+      return observable<{ integrationId: string; summaries: UpsSummary[]; timestamp: Date }>((emit) => {
+        const unsubscribes = ctx.integrations.map((integration) => {
+          const innerHandler = upsSummariesRequestHandler.handler(integration, {});
+          return innerHandler.subscribe((summaries) => {
+            emit.next({
+              integrationId: integration.id,
+              summaries,
+              timestamp: new Date(),
+            });
+          });
+        });
+
+        return () => {
+          unsubscribes.forEach((unsubscribe) => unsubscribe());
+        };
+      });
+    }),
+});

packages/api/src/shared.ts

@@ -1,7 +1,5 @@
 import { defaultShouldDehydrateQuery, QueryClient } from "@tanstack/react-query";
 
-import { queryCacheDefaultStaleTimeMs } from "./query-cache";
-
 /**
  * Creates a headers callback for a given source
  * It will set the x-trpc-source header and cookies if needed
@@ -60,7 +58,7 @@ export const makeQueryClient = () => {
   return new QueryClient({
     defaultOptions: {
       queries: {
-        staleTime: queryCacheDefaultStaleTimeMs,
+        staleTime: 5 * 1000,
       },
       dehydrate: {
         shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === "pending",

packages/api/src/test/query-cache.spec.ts

@@ -1,224 +0,0 @@
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { QueryClient } from "@tanstack/react-query";
-
-import type { Session } from "@homarr/auth";
-import { createId } from "@homarr/common";
-import type { Database } from "@homarr/db";
-import { boards, users } from "@homarr/db/schema";
-import { createDb } from "@homarr/db/test";
-import {
-  isPersistableWidgetQueryKey,
-  queryCacheDefaultStaleTimeMs,
-  queryCacheMaxValueBytes,
-  queryCacheRetentionMs,
-} from "@homarr/api/query-cache";
-
-import { queryCacheRouter } from "../router/query-cache";
-
-const redisMock = vi.hoisted(() => {
-  const values = new Map<string, { value: string; expiresAt: number }>();
-  const calls: {
-    userId: string;
-    boardId: string;
-    key: string;
-    ttlMs: number;
-    maxValueBytes: number;
-  }[] = [];
-
-  return {
-    values,
-    calls,
-    createQueryCacheChannel: vi.fn(
-      (options: { userId: string; boardId: string; key: string; ttlMs: number; maxValueBytes: number }) => {
-        calls.push(options);
-        const storageKey = `${options.userId}:${options.boardId}:${options.key}`;
-
-        return {
-          getAsync: async () => {
-            const item = values.get(storageKey);
-            if (!item) return null;
-            if (Date.now() > item.expiresAt) {
-              values.delete(storageKey);
-              return null;
-            }
-
-            return item.value;
-          },
-          setAsync: async (value: string) => {
-            if (Buffer.byteLength(value, "utf8") > options.maxValueBytes) {
-              return false;
-            }
-
-            values.set(storageKey, { value, expiresAt: Date.now() + options.ttlMs });
-            return true;
-          },
-          removeAsync: async () => {
-            values.delete(storageKey);
-          },
-        };
-      },
-    ),
-  };
-});
-
-vi.mock("@homarr/redis", () => ({
-  createQueryCacheChannel: redisMock.createQueryCacheChannel,
-}));
-
-vi.mock("@homarr/auth", () => ({ auth: () => ({}) as Session }));
-
-afterEach(() => {
-  vi.useRealTimers();
-  redisMock.values.clear();
-  redisMock.calls.length = 0;
-  redisMock.createQueryCacheChannel.mockClear();
-});
-
-const createSession = (userId = createId()): Session => ({
-  user: {
-    id: userId,
-    permissions: [],
-    colorScheme: "light",
-  },
-  expires: new Date().toISOString(),
-});
-
-const insertUserAsync = async (db: Database, id: string) => {
-  await db.insert(users).values({ id });
-};
-
-describe("isPersistableWidgetQueryKey", () => {
-  test.each([
-    [[["widget", "calendar", "findAllEvents"], { type: "query" }], true],
-    [[["app", "byId"], { type: "query" }], true],
-    [[["app", "byIds"], { type: "query" }], true],
-    [[["docker", "getContainers"], { type: "query" }], true],
-    [[["integration", "byIds"], { type: "query" }], true],
-    [[["widget", "app", "ping"], { type: "query", input: { id: "abc" } }], false],
-    [[["app", "selectable"], { type: "query" }], false],
-    [[["board", "getBoardByName"], { type: "query" }], false],
-    [["widget"], false],
-  ])("matches persist filter for %j", (queryKey, expected) => {
-    expect(isPersistableWidgetQueryKey(queryKey)).toBe(expected);
-  });
-});
-
-describe("queryCacheRouter", () => {
-  test("stores, reads, and removes data for a board viewer", async () => {
-    const db = createDb();
-    const session = createSession();
-    await insertUserAsync(db, session.user.id);
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: session.user.id, isPublic: false });
-
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session });
-
-    await expect(caller.setItem({ boardId: "board-1", key: "query-key", value: "cached-value" })).resolves.toEqual({
-      stored: true,
-    });
-    await expect(caller.getItem({ boardId: "board-1", key: "query-key" })).resolves.toBe("cached-value");
-
-    await caller.removeItem({ boardId: "board-1", key: "query-key" });
-
-    await expect(caller.getItem({ boardId: "board-1", key: "query-key" })).resolves.toBeNull();
-  });
-
-  test("does not touch Redis when board access is denied", async () => {
-    const db = createDb();
-    await insertUserAsync(db, "owner");
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: "owner", isPublic: false });
-
-    redisMock.createQueryCacheChannel.mockClear();
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session: createSession("other-user") });
-
-    await expect(caller.getItem({ boardId: "board-1", key: "query-key" })).rejects.toThrow("Board not found");
-    expect(redisMock.createQueryCacheChannel).not.toHaveBeenCalled();
-  });
-
-  test("scopes anonymous public-board cache entries by anonymous user and board", async () => {
-    const db = createDb();
-    await insertUserAsync(db, "owner");
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: "owner", isPublic: true });
-
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session: null });
-
-    await caller.setItem({ boardId: "board-1", key: "query-key", value: "cached-value" });
-
-    expect(redisMock.calls.at(-1)).toMatchObject({
-      userId: "anonymous",
-      boardId: "board-1",
-      key: "query-key",
-      ttlMs: queryCacheRetentionMs,
-      maxValueBytes: queryCacheMaxValueBytes,
-    });
-  });
-
-  test("scopes signed-in cache entries by user and rejects oversized values", async () => {
-    const db = createDb();
-    const session = createSession("user-1");
-    await insertUserAsync(db, session.user.id);
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: session.user.id, isPublic: false });
-
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session });
-    const value = "x".repeat(queryCacheMaxValueBytes + 1);
-
-    await expect(caller.setItem({ boardId: "board-1", key: "query-key", value })).resolves.toEqual({
-      stored: false,
-    });
-    expect(redisMock.calls.at(-1)).toMatchObject({
-      userId: "user-1",
-      boardId: "board-1",
-      ttlMs: queryCacheRetentionMs,
-      maxValueBytes: queryCacheMaxValueBytes,
-    });
-  });
-
-  test("expires values through the Redis TTL path", async () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-01-01T00:00:00.000Z"));
-
-    const db = createDb();
-    const session = createSession("user-1");
-    await insertUserAsync(db, session.user.id);
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: session.user.id, isPublic: false });
-
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session });
-
-    await caller.setItem({ boardId: "board-1", key: "query-key", value: "cached-value" });
-    await expect(caller.getItem({ boardId: "board-1", key: "query-key" })).resolves.toBe("cached-value");
-
-    await vi.advanceTimersByTimeAsync(queryCacheRetentionMs + 1);
-
-    await expect(caller.getItem({ boardId: "board-1", key: "query-key" })).resolves.toBeNull();
-  });
-});
-
-describe("query cache stale handling", () => {
-  test("uses TanStack Query dataUpdatedAt and staleTime to decide when cached data refetches", async () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-01-01T00:10:00.000Z"));
-
-    const queryClient = new QueryClient({
-      defaultOptions: {
-        queries: {
-          retry: false,
-          staleTime: queryCacheDefaultStaleTimeMs,
-        },
-      },
-    });
-    const queryKey = [["widget", "example"], { input: { integrationIds: ["integration-1"] }, type: "query" }];
-    const queryFn = vi.fn().mockResolvedValue("fresh");
-
-    queryClient.setQueryData(queryKey, "cached", {
-      updatedAt: Date.now() - queryCacheDefaultStaleTimeMs - 1,
-    });
-
-    await expect(
-      queryClient.fetchQuery({
-        queryKey,
-        queryFn,
-      }),
-    ).resolves.toBe("fresh");
-
-    expect(queryFn).toHaveBeenCalledOnce();
-  });
-});

packages/api/src/trpc.ts

@@ -18,6 +18,7 @@ import { createLogger } from "@homarr/core/infrastructure/logs";
 import { db } from "@homarr/db";
 import type { GroupPermissionKey, OnboardingStep } from "@homarr/definitions";
 
+import { env } from "./env";
 import { getOnboardingOrFallbackAsync } from "./router/onboard/onboard-queries";
 
 const logger = createLogger({ module: "trpc" });
@@ -87,6 +88,20 @@ export const createCallerFactory = t.createCallerFactory;
  */
 export const createTRPCRouter = t.router;
 
+export const isDemoMode = env.DEMO_MODE;
+
+const enforceDemoModeReadOnly = t.middleware(({ ctx, next, type }) => {
+  if (env.DEMO_MODE && type === "mutation") {
+    throw new TRPCError({
+      code: "FORBIDDEN",
+      message: "Mutations are disabled in demo mode",
+    });
+  }
+  return next({ ctx });
+});
+
+const baseProcedure = env.DEMO_MODE ? t.procedure.use(enforceDemoModeReadOnly) : t.procedure;
+
 /**
  * Public (unauthed) procedure
  *
@@ -94,19 +109,14 @@ export const createTRPCRouter = t.router;
  * tRPC API. It does not guarantee that a user querying is authorized, but you
  * can still access user session data if they are logged in
  */
-export const publicProcedure = t.procedure;
+export const publicProcedure = baseProcedure;
 
-/**
- * Reusable middleware that enforces users are logged in before running the
- * procedure
- */
 const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
   if (!ctx.session?.user) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
   return next({
     ctx: {
-      // infers the `session` as non-nullable
       session: { ...ctx.session, user: ctx.session.user },
     },
   });
@@ -121,7 +131,7 @@ const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  *
  * @see https://trpc.io/docs/procedures
  */
-export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);
+export const protectedProcedure = baseProcedure.use(enforceUserIsAuthed);
 
 /**
  * Procedure that requires a specific permission

packages/boards/src/context.tsx

@@ -6,7 +6,6 @@ import { usePathname } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { getActiveQueryCacheBoardId, setActiveQueryCacheBoardId } from "@homarr/api/query-cache";
 
 import { updateBoardName } from "./updater";
 
@@ -29,8 +28,6 @@ export const BoardProvider = ({
     },
   );
 
-  setActiveQueryCacheBoardId(data.id);
-
   // Update the board name so it can be used within updateBoard method
   updateBoardName(initialBoard.name);
 
@@ -45,16 +42,6 @@ export const BoardProvider = ({
     };
   }, [pathname, utils, initialBoard.name]);
 
-  useEffect(() => {
-    setActiveQueryCacheBoardId(data.id);
-
-    return () => {
-      if (getActiveQueryCacheBoardId() === data.id) {
-        setActiveQueryCacheBoardId(null);
-      }
-    };
-  }, [data.id]);
-
   return (
     <BoardContext.Provider
       value={{
@@ -86,7 +73,7 @@ export const getCurrentLayout = (board: RouterOutputs["board"]["getBoardByName"]
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   if (typeof window === "undefined") return board.layouts.at(0)!.id;
 
-  const sortedLayouts = board.layouts.toSorted((layoutA, layoutB) => layoutB.breakpoint - layoutA.breakpoint);
+  const sortedLayouts = board.layouts.sort((layoutA, layoutB) => layoutB.breakpoint - layoutA.breakpoint);
 
   // Fallback to smallest if none exists with breakpoint smaller than window width
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

packages/db/migrations/seed.ts

@@ -1,3 +1,5 @@
+import SuperJSON from "superjson";
+
 import { createId, objectKeys } from "@homarr/common";
 import {
   createDocumentationLink,
@@ -9,6 +11,7 @@ import {
   integrationDefs,
   integrationKinds,
 } from "@homarr/definitions";
+import type { WidgetKind } from "@homarr/definitions";
 import { defaultServerSettings, defaultServerSettingsKeys } from "@homarr/server-settings";
 
 import type { Database } from "..";
@@ -19,13 +22,16 @@ import {
   insertServerSettingByKeyAsync,
   updateServerSettingByKeyAsync,
 } from "../queries/server-setting";
+
 import {
   apps,
   boards,
   groupMembers,
   groupPermissions,
   groups,
+  integrationItems,
   integrations,
+  itemLayouts,
   items,
   layouts,
   onboarding,
@@ -45,7 +51,7 @@ export const seedDataAsync = async (db: Database) => {
   await seedDefaultBoardAsync(db);
   await seedBoardWidgetsAsync(db);
 
-  if (process.env.DEMO_MODE === "true") {
+  if (["1", "yes", "t", "true"].includes((process.env.DEMO_MODE ?? "").toLowerCase())) {
     await seedDemoUserAsync(db);
   }
 };
@@ -273,6 +279,134 @@ const seedDefaultBoardAsync = async (db: Database) => {
   console.log("Created default board 'dashboard' through seed");
 };
 
+interface DemoWidget {
+  kind: WidgetKind;
+  width: number;
+  height: number;
+  needsIntegration: boolean;
+  options?: Record<string, unknown>;
+}
+
+const demoApps = [
+  {
+    name: "Sonarr",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/sonarr.svg",
+    href: "https://sonarr.tv",
+  },
+  {
+    name: "Radarr",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/radarr.svg",
+    href: "https://radarr.video",
+  },
+  {
+    name: "Plex",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/plex.svg",
+    href: "https://plex.tv",
+  },
+  {
+    name: "Jellyfin",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/jellyfin.svg",
+    href: "https://jellyfin.org",
+  },
+  {
+    name: "Proxmox",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/proxmox.svg",
+    href: "https://proxmox.com",
+  },
+  {
+    name: "Pi-hole",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pi-hole.svg",
+    href: "https://pi-hole.net",
+  },
+  {
+    name: "Grafana",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/grafana.svg",
+    href: "https://grafana.com",
+  },
+  {
+    name: "Portainer",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/portainer.svg",
+    href: "https://portainer.io",
+  },
+  {
+    name: "Home Assistant",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/home-assistant.svg",
+    href: "https://home-assistant.io",
+  },
+  {
+    name: "Nextcloud",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/nextcloud.svg",
+    href: "https://nextcloud.com",
+  },
+  {
+    name: "qBittorrent",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/qbittorrent.svg",
+    href: "https://qbittorrent.org",
+  },
+  {
+    name: "Overseerr",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/overseerr.svg",
+    href: "https://overseerr.dev",
+  },
+] as const;
+
+const buildDemoWidgets = (appIds: string[]): DemoWidget[] => [
+  // Row 1: calendar + downloads + clock = 12
+  { kind: "calendar", width: 5, height: 3, needsIntegration: true },
+  { kind: "downloads", width: 5, height: 3, needsIntegration: true },
+  { kind: "clock", width: 2, height: 1, needsIntegration: false },
+  // Row 2: healthMonitoring + bookmarks = 12
+  { kind: "healthMonitoring", width: 6, height: 3, needsIntegration: true },
+  {
+    kind: "bookmarks",
+    width: 6,
+    height: 3,
+    needsIntegration: false,
+    options: { title: "Homelab", items: appIds, layout: "grid", openNewTab: true },
+  },
+  // Row 3: mediaServer + mediaTranscoding + dnsHoleSummary = 12
+  { kind: "mediaServer", width: 3, height: 2, needsIntegration: true },
+  { kind: "mediaTranscoding", width: 3, height: 2, needsIntegration: true },
+  { kind: "dnsHoleSummary", width: 6, height: 2, needsIntegration: true },
+  // Row 4: dnsHoleControls + mediaReleases + notifications = 12
+  { kind: "dnsHoleControls", width: 2, height: 1, needsIntegration: true },
+  { kind: "mediaReleases", width: 4, height: 2, needsIntegration: true },
+  { kind: "notifications", width: 6, height: 2, needsIntegration: true },
+  // Row 5: requestList + requestStats + indexerManager = 12
+  { kind: "mediaRequests-requestList", width: 4, height: 3, needsIntegration: true },
+  { kind: "mediaRequests-requestStats", width: 4, height: 2, needsIntegration: true },
+  { kind: "indexerManager", width: 4, height: 2, needsIntegration: true },
+  // Row 6: networkControllerSummary + networkControllerStatus + rssFeed = 12
+  { kind: "networkControllerSummary", width: 3, height: 2, needsIntegration: true },
+  { kind: "networkControllerStatus", width: 3, height: 2, needsIntegration: true },
+  {
+    kind: "rssFeed",
+    width: 6,
+    height: 2,
+    needsIntegration: false,
+    options: {
+      feedUrls: ["https://selfh.st/rss/", "https://hnrss.org/newest?q=self-hosted"],
+      maximumAmountPosts: 20,
+      textLinesClamp: 2,
+      hideDescription: false,
+    },
+  },
+  // Row 7-8: app widgets (2x1 each, 6 per row = 12)
+  ...appIds.map(
+    (appId): DemoWidget => ({
+      kind: "app",
+      width: 2,
+      height: 1,
+      needsIntegration: false,
+      options: { appId, openInNewTab: true, showTitle: true, pingEnabled: false },
+    }),
+  ),
+  // Row 9: notebook + dockerContainers + weather = 12
+  { kind: "notebook", width: 4, height: 4, needsIntegration: false },
+  { kind: "dockerContainers", width: 6, height: 2, needsIntegration: false },
+  { kind: "weather", width: 2, height: 1, needsIntegration: false },
+];
+
 const seedDemoUserAsync = async (db: Database) => {
   const existingUser = await db.query.users.findFirst({
     where: eq(users.name, "demo"),
@@ -289,7 +423,7 @@ const seedDemoUserAsync = async (db: Database) => {
     id: userId,
     name: "demo",
     email: "demo@example.com",
-    password: "$2b$10$c5AaQb0oj32/bui5Z55PyOb7pY.iEkXYqgdD8MjS9LjSjLMeOkZu2",
+    password: "$2b$10$odRXt5e95kSQV5Axmk/FeO6GVOxuRQQ8NnRcBA78Wg4V3kZxPY68u",
   });
 
   const maxPosition = await getMaxGroupPositionAsync(db);
@@ -314,13 +448,93 @@ const seedDemoUserAsync = async (db: Database) => {
     previousStep: "settings",
   });
 
-  const board = await db.query.boards.findFirst();
-  if (board) {
-    await db.update(users).set({ homeBoardId: board.id }).where(eq(users.id, userId));
+  const integrationId = createId();
+  await db.insert(integrations).values({
+    id: integrationId,
+    name: "Demo Integration",
+    url: "https://demo.homarr.dev",
+    kind: "mock",
+    appId: null,
+  });
+
+  const appIds: string[] = [];
+  for (const app of demoApps) {
+    const appId = createId();
+    appIds.push(appId);
+    await db.insert(apps).values({
+      id: appId,
+      name: app.name,
+      iconUrl: app.iconUrl,
+      href: app.href,
+    });
   }
 
+  const boardId = createId();
+  await db.insert(boards).values({
+    id: boardId,
+    name: "default",
+    isPublic: false,
+    creatorId: userId,
+  });
+
+  const sectionId = createId();
+  await db.insert(sections).values({
+    id: sectionId,
+    kind: "empty",
+    xOffset: 0,
+    yOffset: 0,
+    boardId,
+  });
+
+  const layoutId = createId();
+  await db.insert(layouts).values({
+    id: layoutId,
+    name: "Base",
+    columnCount: 12,
+    breakpoint: 0,
+    boardId,
+  });
+
+  const demoWidgets = buildDemoWidgets(appIds);
+  let xOffset = 0;
+  let yOffset = 0;
+  let rowMaxHeight = 0;
+  for (const widget of demoWidgets) {
+    if (xOffset + widget.width > 12) {
+      xOffset = 0;
+      yOffset += rowMaxHeight;
+      rowMaxHeight = 0;
+    }
+    rowMaxHeight = Math.max(rowMaxHeight, widget.height);
+    const itemId = createId();
+    await db.insert(items).values({
+      id: itemId,
+      boardId,
+      kind: widget.kind,
+      ...(widget.options ? { options: SuperJSON.stringify(widget.options) } : {}),
+    });
+    await db.insert(itemLayouts).values({
+      itemId,
+      sectionId,
+      layoutId,
+      xOffset,
+      yOffset,
+      width: widget.width,
+      height: widget.height,
+    });
+    if (widget.needsIntegration) {
+      await db.insert(integrationItems).values({
+        itemId,
+        integrationId,
+      });
+    }
+    xOffset += widget.width;
+  }
+
+  await db.update(users).set({ homeBoardId: boardId }).where(eq(users.id, userId));
+
   console.log(
-    "Your instance has enabled demo mode. Homarr therefore created example data for your demo. You can disable demo mode anytime by setting the env 'DEMO_MODE' to 'false' or unset it.",
+    "Demo mode enabled: created demo user, mock integration, and sample board with widgets. Disable by setting DEMO_MODE=false.",
   );
 };
 

packages/definitions/src/integration.ts

@@ -427,6 +427,13 @@ export const integrationDefs = {
     documentationUrl: createDocumentationLink("/docs/integrations/umami"),
     defaultPort: 3000,
   },
+  peaNut: {
+    name: "PeaNUT",
+    secretKinds: [["username", "password"], []],
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/peanut.svg",
+    category: ["ups"],
+    documentationUrl: null,
+  },
   // This integration only returns mock data, it is used during development (but can also be used in production by directly going to the create page)
   mock: {
     name: "Mock",
@@ -445,6 +452,7 @@ export const integrationDefs = {
       "networkController",
       "notifications",
       "smartHomeServer",
+      "ups",
     ],
     documentationUrl: null,
   },
@@ -532,6 +540,7 @@ export const integrationCategories = [
   "mediaMonitoring",
   "speedtest",
   "analytics",
+  "ups",
 ] as const;
 
 export type IntegrationCategory = (typeof integrationCategories)[number];

packages/definitions/src/widget.ts

@@ -38,5 +38,6 @@ export const widgetKinds = [
   "tracearr",
   "speedtestTracker",
   "umami",
+  "ups",
 ] as const;
 export type WidgetKind = (typeof widgetKinds)[number];

packages/docker/src/shared.ts

@@ -11,23 +11,3 @@ export const containerStateColorMap = {
   removing: "pink",
   dead: "dark",
 } satisfies Record<ContainerState, MantineColor>;
-
-export const memoryUsageColor = (number: number, state: string): MantineColor => {
-  const mbUsage = number / 1024 / 1024;
-  if (mbUsage === 0 && state !== "running") return "red";
-  if (mbUsage < 128) return "green";
-  if (mbUsage < 256) return "yellow";
-  if (mbUsage < 512) return "orange";
-  return "red";
-};
-
-export const cpuUsageColor = (number: number, state: string): MantineColor => {
-  if (number === 0 && state !== "running") return "red";
-  if (number < 40) return "green";
-  if (number < 60) return "yellow";
-  if (number < 90) return "orange";
-  return "red";
-};
-
-export const safeValue = (value?: number, fallback = 0): number =>
-  value !== undefined && !isNaN(value) ? value : fallback;

packages/integrations/src/base/creator.ts

@@ -36,6 +36,7 @@ import { NTFYIntegration } from "../ntfy/ntfy-integration";
 import { OpenMediaVaultIntegration } from "../openmediavault/openmediavault-integration";
 import { OPNsenseIntegration } from "../opnsense/opnsense-integration";
 import { OverseerrIntegration } from "../overseerr/overseerr-integration";
+import { PeaNutIntegration } from "../peanut/peanut-integration";
 import { createPiHoleIntegrationAsync } from "../pi-hole/pi-hole-integration-factory";
 import { PlexIntegration } from "../plex/plex-integration";
 import { ProwlarrIntegration } from "../prowlarr/prowlarr-integration";
@@ -123,6 +124,7 @@ export const integrationCreators = {
   immich: ImmichIntegration,
   speedtestTracker: SpeedtestTrackerIntegration,
   umami: UmamiIntegration,
+  peaNut: PeaNutIntegration,
 } satisfies Record<IntegrationKind, IntegrationInstance | [(input: IntegrationInput) => Promise<Integration>]>;
 
 type IntegrationInstanceOfKind<TKind extends keyof typeof integrationCreators> = {

packages/integrations/src/index.ts

@@ -34,6 +34,7 @@ export { ImmichIntegration } from "./immich/immich-integration";
 export { TracearrIntegration } from "./tracearr/tracearr-integration";
 export { SpeedtestTrackerIntegration } from "./speedtest-tracker/speedtest-tracker-integration";
 export { UmamiIntegration } from "./umami/umami-integration";
+export { PeaNutIntegration } from "./peanut/peanut-integration";
 
 // Types
 export type { IntegrationInput } from "./base/integration";

packages/integrations/src/interfaces/ups-summary/ups-summary-integration.ts

@@ -0,0 +1,5 @@
+import type { UpsSummary } from "./ups-summary-types";
+
+export interface IUpsSummaryIntegration {
+  getUpsSummariesAsync(): Promise<UpsSummary[]>;
+}

packages/integrations/src/interfaces/ups-summary/ups-summary-types.ts

@@ -0,0 +1,32 @@
+/**
+ * Normalized UPS status, resolved from the raw NUT status flags by the integration so that
+ * widgets and future UPS integrations share a single, typed vocabulary.
+ */
+export const upsStatuses = ["online", "charging", "onBattery", "lowBattery", "unknown"] as const;
+
+export type UpsStatus = (typeof upsStatuses)[number];
+
+export interface UpsSummary {
+  /** Stable identifier of the UPS device on the NUT server */
+  id: string;
+  /** Human readable name, derived from the manufacturer and model */
+  name: string;
+  manufacturer: string | null;
+  model: string | null;
+  serial: string | null;
+  /** Normalized status, resolved from the raw NUT `ups.status` flags */
+  status: UpsStatus;
+  /** Battery charge in percent */
+  batteryCharge: number | null;
+  /** Estimated remaining runtime on battery, in seconds */
+  batteryRuntime: number | null;
+  batteryVoltage: number | null;
+  /** UPS load in percent */
+  load: number | null;
+  inputVoltage: number | null;
+  outputVoltage: number | null;
+  /** Real power drawn by the load, in watts */
+  power: number | null;
+  /** UPS temperature in degrees celsius */
+  temperature: number | null;
+}

packages/integrations/src/mock/data/calendar.ts

@@ -1,24 +1,130 @@
 import type { ICalendarIntegration } from "../../interfaces/calendar/calendar-integration";
 import type { CalendarEvent } from "../../interfaces/calendar/calendar-types";
 
-export class CalendarMockService implements ICalendarIntegration {
-  public async getCalendarEventsAsync(start: Date, end: Date, _includeUnmonitored: boolean): Promise<CalendarEvent[]> {
-    const result = [homarrMeetup(start, end), titanicRelease(start, end), seriesRelease(start, end)];
-    return await Promise.resolve(result);
-  }
+interface EventTemplate {
+  title: string;
+  subTitle: string;
+  description: string;
+  dayOffset: number;
+  hours: number;
+  image: CalendarEvent["image"];
+  indicatorColor: string;
+  metadata?: CalendarEvent["metadata"];
+  location?: string;
+  links: CalendarEvent["links"];
 }
 
-const homarrMeetup = (start: Date, end: Date): CalendarEvent => {
-  const startDate = randomDateBetween(start, end);
-  const endDate = new Date(startDate.getTime() + 2 * 60 * 60 * 1000); // 2 hours later
-  return {
+const eventTemplates: EventTemplate[] = [
+  {
+    title: "The Mandalorian",
+    subTitle: "Season 4",
+    description: "A lone bounty hunter in the outer reaches of the galaxy.",
+    dayOffset: 0,
+    hours: 20,
+    image: {
+      src: "https://image.tmdb.org/t/p/w300/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg",
+      aspectRatio: { width: 7, height: 12 },
+      badge: { content: "S4/E3", color: "red" },
+    },
+    indicatorColor: "blue",
+    links: [
+      {
+        href: "https://www.imdb.com/title/tt8111088/",
+        name: "IMDb",
+        color: "#f5c518",
+        isDark: false,
+        logo: "/images/apps/imdb.svg",
+      },
+    ],
+  },
+  {
+    title: "Silo",
+    subTitle: "Season 2",
+    description: "In a ruined and toxic future, thousands live in a giant underground silo.",
+    dayOffset: 3,
+    hours: 21,
+    image: {
+      src: "https://image.tmdb.org/t/p/w300/2xSzAuKMhERTcPA19SpFQtVrMC0.jpg",
+      aspectRatio: { width: 7, height: 12 },
+      badge: { content: "S2/E8", color: "teal" },
+    },
+    indicatorColor: "teal",
+    links: [
+      {
+        href: "https://www.imdb.com/title/tt14688458/",
+        name: "IMDb",
+        color: "#f5c518",
+        isDark: false,
+        logo: "/images/apps/imdb.svg",
+      },
+    ],
+  },
+  {
+    title: "Dune: Part Two",
+    subTitle: "Digital Release",
+    description: "Paul Atreides unites with the Fremen to seek revenge against the conspirators.",
+    dayOffset: 5,
+    hours: 0,
+    image: {
+      src: "https://image.tmdb.org/t/p/w300/8b8R8l88Qje9dn9OE8PY05Nez7.jpg",
+      aspectRatio: { width: 7, height: 12 },
+    },
+    metadata: { type: "radarr", releaseType: "digitalRelease" },
+    indicatorColor: "cyan",
+    links: [
+      {
+        href: "https://www.imdb.com/title/tt15239678/",
+        name: "IMDb",
+        color: "#f5c518",
+        isDark: false,
+        logo: "/images/apps/imdb.svg",
+      },
+    ],
+  },
+  {
+    title: "Severance",
+    subTitle: "Season 2",
+    description: "Mark leads a team of office workers whose memories are surgically divided.",
+    dayOffset: 7,
+    hours: 22,
+    image: {
+      src: "https://image.tmdb.org/t/p/w300/pJAtR4gMFnalHCmT9cByPFgkZ6B.jpg",
+      aspectRatio: { width: 7, height: 12 },
+      badge: { content: "S2/E5", color: "violet" },
+    },
+    indicatorColor: "violet",
+    links: [],
+  },
+  {
+    title: "Oppenheimer",
+    subTitle: "Physical Release",
+    description: "The story of the development of the atomic bomb.",
+    dayOffset: 10,
+    hours: 0,
+    image: {
+      src: "https://image.tmdb.org/t/p/w300/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg",
+      aspectRatio: { width: 7, height: 12 },
+    },
+    metadata: { type: "radarr", releaseType: "physicalRelease" },
+    indicatorColor: "orange",
+    links: [
+      {
+        href: "https://www.imdb.com/title/tt15398776/",
+        name: "IMDb",
+        color: "#f5c518",
+        isDark: false,
+        logo: "/images/apps/imdb.svg",
+      },
+    ],
+  },
+  {
     title: "Homarr Meetup",
     subTitle: "",
     description: "Yearly meetup of the Homarr community",
-    startDate,
-    endDate,
-    image: null,
+    dayOffset: 14,
+    hours: 14,
     location: "Mountains",
+    image: null,
     indicatorColor: "#fa5252",
     links: [
       {
@@ -29,63 +135,79 @@ const homarrMeetup = (start: Date, end: Date): CalendarEvent => {
         isDark: true,
       },
     ],
-  };
+  },
+  {
+    title: "The Bear",
+    subTitle: "Season 3",
+    description: "A young chef fights to transform a sandwich shop.",
+    dayOffset: 18,
+    hours: 3,
+    image: {
+      src: "https://image.tmdb.org/t/p/w300/sHFlYJhNbmpMOkr7JKGxFAnMPFm.jpg",
+      aspectRatio: { width: 7, height: 12 },
+      badge: { content: "S3/E1", color: "yellow" },
+    },
+    indicatorColor: "yellow",
+    links: [],
+  },
+  {
+    title: "Foundation",
+    subTitle: "Season 3",
+    description: "A band of exiles discovers that the only way to save the Galactic Empire is to defy it.",
+    dayOffset: 21,
+    hours: 20,
+    image: {
+      src: "https://image.tmdb.org/t/p/w300/wSByZTwCPVYAjlqcVCBTCLZchkC.jpg",
+      aspectRatio: { width: 7, height: 12 },
+      badge: { content: "S3/E1", color: "indigo" },
+    },
+    indicatorColor: "indigo",
+    links: [],
+  },
+  {
+    title: "Blade Runner 2099",
+    subTitle: "Premiere",
+    description: "A new chapter in the Blade Runner universe.",
+    dayOffset: 25,
+    hours: 21,
+    image: {
+      src: "https://image.tmdb.org/t/p/w300/63UMsIFOlCSz3uCPKtbgOdUr4pE.jpg",
+      aspectRatio: { width: 7, height: 12 },
+    },
+    metadata: { type: "radarr", releaseType: "digitalRelease" },
+    indicatorColor: "grape",
+    links: [],
+  },
+];
+
+const buildEventsForRange = (start: Date, end: Date): CalendarEvent[] => {
+  const rangeStart = new Date(start);
+  rangeStart.setDate(rangeStart.getDate() - 3);
+
+  return eventTemplates
+    .map((tpl) => {
+      const startDate = new Date(rangeStart);
+      startDate.setDate(startDate.getDate() + tpl.dayOffset);
+      startDate.setHours(tpl.hours, 0, 0, 0);
+
+      return {
+        title: tpl.title,
+        subTitle: tpl.subTitle,
+        description: tpl.description,
+        startDate,
+        endDate: tpl.location ? new Date(startDate.getTime() + 2 * 60 * 60 * 1000) : null,
+        image: tpl.image,
+        location: tpl.location ?? null,
+        indicatorColor: tpl.indicatorColor,
+        links: tpl.links,
+        ...(tpl.metadata ? { metadata: tpl.metadata } : {}),
+      };
+    })
+    .filter((event) => event.startDate >= start && event.startDate <= end);
 };
 
-const titanicRelease = (start: Date, end: Date): CalendarEvent => ({
-  title: "Titanic",
-  subTitle: "A classic movie",
-  description: "A tragic love story set on the ill-fated RMS Titanic.",
-  startDate: randomDateBetween(start, end),
-  endDate: null,
-  image: {
-    src: "https://image.tmdb.org/t/p/original/5bTWA20cL9LCIGNpde4Epc2Ijzn.jpg",
-    aspectRatio: { width: 7, height: 12 },
-  },
-  location: null,
-  metadata: {
-    type: "radarr",
-    releaseType: "inCinemas",
-  },
-  indicatorColor: "cyan",
-  links: [
-    {
-      href: "https://www.imdb.com/title/tt0120338/",
-      name: "IMDb",
-      color: "#f5c518",
-      isDark: false,
-      logo: "/images/apps/imdb.svg",
-    },
-  ],
-});
-
-const seriesRelease = (start: Date, end: Date): CalendarEvent => ({
-  title: "The Mandalorian",
-  subTitle: "A Star Wars Series",
-  description: "A lone bounty hunter in the outer reaches of the galaxy.",
-  startDate: randomDateBetween(start, end),
-  endDate: null,
-  image: {
-    src: "https://image.tmdb.org/t/p/original/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg",
-    aspectRatio: { width: 7, height: 12 },
-    badge: {
-      content: "S1/E1",
-      color: "red",
-    },
-  },
-  location: null,
-  indicatorColor: "blue",
-  links: [
-    {
-      href: "https://www.imdb.com/title/tt8111088/",
-      name: "IMDb",
-      color: "#f5c518",
-      isDark: false,
-      logo: "/images/apps/imdb.svg",
-    },
-  ],
-});
-
-function randomDateBetween(start: Date, end: Date): Date {
-  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+export class CalendarMockService implements ICalendarIntegration {
+  public async getCalendarEventsAsync(start: Date, end: Date, _includeUnmonitored: boolean): Promise<CalendarEvent[]> {
+    return await Promise.resolve(buildEventsForRange(start, end));
+  }
 }

packages/integrations/src/mock/data/download.ts

@@ -2,57 +2,163 @@ import type { DownloadClientJobsAndStatus } from "../../interfaces/downloads/dow
 import type { IDownloadClientIntegration } from "../../interfaces/downloads/download-client-integration";
 import type { DownloadClientItem } from "../../interfaces/downloads/download-client-items";
 
+const mockItems: Omit<DownloadClientItem, "id" | "index">[] = [
+  {
+    name: "Big.Buck.Bunny.2008.1080p.BluRay.x264",
+    type: "torrent",
+    size: 4_700_000_000,
+    progress: 0.47,
+    state: "leeching",
+    downSpeed: 12_400_000,
+    upSpeed: 890_000,
+    sent: 420_000_000,
+    received: 2_209_000_000,
+    time: 201_000,
+    category: "movies",
+  },
+  {
+    name: "Ubuntu.24.04.1.LTS.Desktop.amd64.iso",
+    type: "torrent",
+    size: 5_800_000_000,
+    progress: 0.82,
+    state: "leeching",
+    downSpeed: 34_500_000,
+    upSpeed: 2_100_000,
+    sent: 1_200_000_000,
+    received: 4_756_000_000,
+    time: 30_000,
+    category: "iso",
+  },
+  {
+    name: "Sintel.2010.4K.DTS-HD.MA.5.1.mkv",
+    type: "torrent",
+    size: 18_200_000_000,
+    progress: 0.03,
+    state: "leeching",
+    downSpeed: 1_200_000,
+    upSpeed: 50_000,
+    sent: 30_000_000,
+    received: 546_000_000,
+    time: 14_880_000,
+    category: "movies",
+  },
+  {
+    name: "Arch.Linux.2024.12.01.x86_64.iso",
+    type: "torrent",
+    size: 1_100_000_000,
+    progress: 1,
+    state: "seeding",
+    downSpeed: 0,
+    upSpeed: 4_500_000,
+    sent: 3_300_000_000,
+    received: 1_100_000_000,
+    time: -7_200_000,
+    category: "iso",
+  },
+  {
+    name: "Tears.of.Steel.2012.1080p.DTS.mkv",
+    type: "torrent",
+    size: 7_340_000_000,
+    progress: 0,
+    state: "paused",
+    downSpeed: 0,
+    upSpeed: 0,
+    time: 0,
+    category: "movies",
+  },
+  {
+    name: "Cosmos.Laundromat.First.Cycle.2015.4K.mkv",
+    type: "torrent",
+    size: 12_000_000_000,
+    progress: 0.65,
+    state: "stalled",
+    downSpeed: 0,
+    upSpeed: 0,
+    sent: 200_000_000,
+    received: 7_800_000_000,
+    time: 0,
+    category: "movies",
+  },
+  {
+    name: "Spring.2019.4K.HDR.mkv",
+    type: "usenet",
+    size: 3_200_000_000,
+    progress: 0.91,
+    state: "downloading",
+    downSpeed: 45_000_000,
+    time: 6_500,
+    category: "movies",
+  },
+  {
+    name: "Agent.327.Operation.Barbershop.2017.1080p.mkv",
+    type: "usenet",
+    size: 1_800_000_000,
+    progress: 1,
+    state: "completed",
+    time: -3_600_000,
+    category: "movies",
+  },
+  {
+    name: "Caminandes.3.Llamigos.2016.1080p.mkv",
+    type: "torrent",
+    size: 890_000_000,
+    progress: 1,
+    state: "seeding",
+    downSpeed: 0,
+    upSpeed: 1_800_000,
+    sent: 2_670_000_000,
+    received: 890_000_000,
+    time: -86_400_000,
+    category: "movies",
+  },
+  {
+    name: "Hero.2024.S01.1080p.WEB-DL.DDP5.1",
+    type: "usenet",
+    size: 9_400_000_000,
+    progress: 0.22,
+    state: "downloading",
+    downSpeed: 28_000_000,
+    time: 244_000,
+    category: "tv",
+  },
+];
+
 export class DownloadClientMockService implements IDownloadClientIntegration {
   public async getClientJobsAndStatusAsync(input: { limit: number }): Promise<DownloadClientJobsAndStatus> {
     return await Promise.resolve({
       status: {
-        paused: Math.random() < 0.5,
+        paused: false,
         rates: {
-          down: Math.floor(Math.random() * 5000),
-          up: Math.floor(Math.random() * 5000),
+          down: 121_100_000,
+          up: 9_340_000,
         },
-        types: ["torrent", "usenet"],
+        types: ["torrent", "usenet"] as const,
       },
-      items: Array.from({ length: 20 }, (_, index) => DownloadClientMockService.createItem(index)).slice(
-        0,
-        input.limit,
-      ),
+      items: mockItems.slice(0, input.limit).map((item, index) => ({
+        ...item,
+        id: `mock-${index}`,
+        index,
+      })),
     });
   }
 
   public async pauseQueueAsync(): Promise<void> {
-    return await Promise.resolve();
+    await Promise.resolve();
   }
 
   public async pauseItemAsync(_item: DownloadClientItem): Promise<void> {
-    return await Promise.resolve();
+    await Promise.resolve();
   }
 
   public async resumeQueueAsync(): Promise<void> {
-    return Promise.resolve();
+    await Promise.resolve();
   }
 
   public async resumeItemAsync(_item: DownloadClientItem): Promise<void> {
-    return await Promise.resolve();
+    await Promise.resolve();
   }
 
   public async deleteItemAsync(_item: DownloadClientItem, _fromDisk: boolean): Promise<void> {
-    return await Promise.resolve();
-  }
-
-  private static createItem(index: number): DownloadClientItem {
-    const progress = Math.random() < 0.5 ? Math.random() : 1;
-    return {
-      id: `item-${index}`,
-      index,
-      name: `Item ${index}`,
-      type: Math.random() > 0.5 ? "torrent" : "usenet",
-      progress,
-      size: Math.floor(Math.random() * 10000) + 1,
-      downSpeed: Math.floor(Math.random() * 5000),
-      upSpeed: Math.floor(Math.random() * 5000),
-      state: progress >= 1 ? "completed" : "downloading",
-      time: 0,
-    };
+    await Promise.resolve();
   }
 }

packages/integrations/src/mock/data/media-releases.ts

@@ -13,17 +13,17 @@ export const mockMediaReleases: MediaRelease[] = [
     title: "Inception",
     subtitle: "A mind-bending thriller",
     description:
-      "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a CEO.",
+      "A thief who steals corporate secrets through dream-sharing technology is given the task of planting an idea into the mind of a CEO.",
     releaseDate: new Date("2010-07-16"),
     imageUrls: {
-      poster: "https://media.outnow.ch/Movies/Bilder/2025/MinecraftMovie/015.jpg",
-      backdrop: "https://example.com/inception_backdrop.jpg",
+      poster: "https://image.tmdb.org/t/p/w300/ljsZTbVsrQSqZgWeep2B1QiDKuh.jpg",
+      backdrop: "https://image.tmdb.org/t/p/w780/8ZTVqvKDQ8emSGUEMjsS4yHAwrp.jpg",
     },
     producer: "Warner Bros.",
     price: 14.99,
     rating: "8.8/10",
     tags: ["Sci-Fi", "Thriller"],
-    href: "https://example.com/inception",
+    href: "https://www.themoviedb.org/movie/27205-inception",
     length: 148,
   },
   {
@@ -34,13 +34,13 @@ export const mockMediaReleases: MediaRelease[] = [
     description: "When Walter White's secret is revealed, he must face the consequences of his actions.",
     releaseDate: new Date("2013-09-15"),
     imageUrls: {
-      poster: "https://media.outnow.ch/Movies/Bilder/2025/MinecraftMovie/015.jpg",
-      backdrop: "https://example.com/breaking_bad_backdrop.jpg",
+      poster: "https://image.tmdb.org/t/p/w300/ztkUQFLlC19CCMYHW73GM9hBNRh.jpg",
+      backdrop: "https://image.tmdb.org/t/p/w780/tsRy63Mu5cu8etL1X7ZLyf7UP1M.jpg",
     },
     producer: "AMC",
     rating: "9.5/10",
     tags: ["Crime", "Drama"],
-    href: "https://example.com/breaking_bad",
+    href: "https://www.themoviedb.org/tv/1396-breaking-bad",
   },
   {
     id: "3",
@@ -50,79 +50,86 @@ export const mockMediaReleases: MediaRelease[] = [
     description: "The fourth studio album by French electronic music duo Daft Punk.",
     releaseDate: new Date("2013-05-17"),
     imageUrls: {
-      poster: "https://media.outnow.ch/Movies/Bilder/2025/MinecraftMovie/015.jpg",
-      backdrop: "https://example.com/ram_backdrop.jpg",
+      poster: "https://image.tmdb.org/t/p/w300/mIfBmEBqA1ddSMFyMAvACvOQ6cL.jpg",
+      backdrop: "https://image.tmdb.org/t/p/w780/mIfBmEBqA1ddSMFyMAvACvOQ6cL.jpg",
     },
     producer: "Columbia Records",
     price: 9.99,
     rating: "8.5/10",
-    tags: ["Electronic", "Dance", "Pop", "Funk"],
-    href: "https://example.com/ram",
+    tags: ["Electronic", "Funk"],
+    href: "https://www.daftpunk.com",
   },
   {
     id: "4",
-    type: "book",
-    title: "The Great Gatsby",
-    subtitle: "F. Scott Fitzgerald",
-    description: "A novel about the American dream and the disillusionment that comes with it.",
-    releaseDate: new Date("1925-04-10"),
+    type: "movie",
+    title: "The Dark Knight",
+    subtitle: "Theatrical Release",
+    description:
+      "Batman raises the stakes in his war on crime. With the help of Lt. Gordon and DA Harvey Dent, Batman sets out to dismantle organized crime.",
+    releaseDate: new Date("2008-07-18"),
     imageUrls: {
-      poster: "https://media.outnow.ch/Movies/Bilder/2025/MinecraftMovie/015.jpg",
-      backdrop: "https://example.com/gatsby_backdrop.jpg",
+      poster: "https://image.tmdb.org/t/p/w300/qJ2tW6WMUDux911BTUgMe1nV8Is.jpg",
+      backdrop: "https://image.tmdb.org/t/p/w780/nMKdUUepR0i5zn0y1T4CsSB5ez.jpg",
     },
-    producer: "Scribner",
-    price: 10.99,
-    rating: "4.2/5",
-    tags: ["Classic", "Fiction"],
-    href: "https://example.com/gatsby",
+    producer: "Warner Bros.",
+    price: 12.99,
+    rating: "9.0/10",
+    tags: ["Action", "Crime", "Drama"],
+    href: "https://www.themoviedb.org/movie/155-the-dark-knight",
+    length: 152,
   },
   {
     id: "5",
-    type: "game",
-    title: "The Legend of Zelda: Breath of the Wild",
-    subtitle: "Nintendo Switch",
-    description: "An open-world action-adventure game set in the fantasy land of Hyrule.",
-    releaseDate: new Date("2017-03-03"),
+    type: "movie",
+    title: "Interstellar",
+    subtitle: "Digital Release",
+    description: "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
+    releaseDate: new Date("2014-11-07"),
     imageUrls: {
-      poster: "https://media.outnow.ch/Movies/Bilder/2025/MinecraftMovie/015.jpg",
-      backdrop: "https://example.com/zelda_backdrop.jpg",
+      poster: "https://image.tmdb.org/t/p/w300/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg",
+      backdrop: "https://image.tmdb.org/t/p/w780/xJHokMbljXjADYdit5fK1DVfjko.jpg",
     },
-    producer: "Nintendo",
-    price: 59.99,
-    rating: "10/10",
-    tags: ["Action", "Adventure"],
-    href: "https://example.com/zelda",
+    producer: "Paramount",
+    price: 14.99,
+    rating: "8.7/10",
+    tags: ["Sci-Fi", "Adventure"],
+    href: "https://www.themoviedb.org/movie/157336-interstellar",
+    length: 169,
   },
   {
     id: "6",
-    type: "article",
-    title: "The Rise of AI in Healthcare",
-    subtitle: "Tech Innovations",
-    description: "Exploring the impact of artificial intelligence on the healthcare industry.",
-    releaseDate: new Date("2023-10-01"),
+    type: "tv",
+    title: "Severance",
+    subtitle: "S2E1 - Premiere",
+    description:
+      "Mark leads a team of office workers whose memories are surgically divided between work and personal lives.",
+    releaseDate: new Date("2025-01-17"),
     imageUrls: {
-      poster: "https://media.outnow.ch/Movies/Bilder/2025/MinecraftMovie/015.jpg",
-      backdrop: "https://example.com/ai_healthcare_backdrop.jpg",
+      poster: "https://image.tmdb.org/t/p/w300/pJAtR4gMFnalHCmT9cByPFgkZ6B.jpg",
+      backdrop: "https://image.tmdb.org/t/p/w780/gvaAaDUbF41Z1NLuJsHPRHkv1Ie.jpg",
     },
-    producer: "Tech Innovations",
-    rating: "4.8/5",
-    tags: ["Technology", "Healthcare"],
-    href: "https://example.com/ai_healthcare",
+    producer: "Apple TV+",
+    rating: "8.7/10",
+    tags: ["Thriller", "Sci-Fi"],
+    href: "https://www.themoviedb.org/tv/95396-severance",
   },
   {
     id: "7",
-    type: "video",
-    title: "Wir LIEBEN unsere MAMAS | 50 Fragen zu Mamas",
-    releaseDate: new Date("2024-05-18T17:00:00Z"),
+    type: "movie",
+    title: "Dune: Part Two",
+    subtitle: "Theatrical Release",
+    description:
+      "Paul Atreides unites with the Fremen to seek revenge against the conspirators who destroyed his family.",
+    releaseDate: new Date("2024-03-01"),
     imageUrls: {
-      poster:
-        "https://i.ytimg.com/vi/a3qyfXc1Pfg/hq720.jpg?sqp=-oaymwEnCNAFEJQDSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLBQKm0viRlfRjTV-V24vGO83rPaVw",
-      backdrop:
-        "https://i.ytimg.com/vi/a3qyfXc1Pfg/hq720.jpg?sqp=-oaymwEnCNAFEJQDSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLBQKm0viRlfRjTV-V24vGO83rPaVw",
+      poster: "https://image.tmdb.org/t/p/w300/8b8R8l88Qje9dn9OE8PY05Nez7.jpg",
+      backdrop: "https://image.tmdb.org/t/p/w780/xOMo8BRK7PfcJv9JCnx7s5hj0PX.jpg",
     },
-    producer: "PietSmiet",
-    rating: "1K",
-    tags: [],
-    href: "https://www.youtube.com/watch?v=a3qyfXc1Pfg",
+    producer: "Warner Bros.",
+    price: 19.99,
+    rating: "8.5/10",
+    tags: ["Sci-Fi", "Adventure"],
+    href: "https://www.themoviedb.org/movie/693134-dune-part-two",
+    length: 166,
   },
 ];

packages/integrations/src/mock/data/media-server.ts

@@ -1,36 +1,95 @@
 import type { IMediaServerIntegration } from "../../interfaces/media-server/media-server-integration";
 import type { CurrentSessionsInput, StreamSession } from "../../interfaces/media-server/media-server-types";
 
-export class MediaServerMockService implements IMediaServerIntegration {
-  public async getCurrentSessionsAsync(options: CurrentSessionsInput): Promise<StreamSession[]> {
-    return await Promise.resolve(
-      Array.from({ length: 10 }, (_, index) => MediaServerMockService.createSession(index)).filter(
-        (session) => !options.showOnlyPlaying || session.currentlyPlaying !== null,
-      ),
-    );
-  }
+const sessions: StreamSession[] = [
+  {
+    sessionId: "s-0",
+    sessionName: "Living Room TV",
+    user: { userId: "u-0", username: "thomas", profilePictureUrl: null },
+    currentlyPlaying: {
+      type: "movie",
+      name: "Interstellar",
+      seasonName: undefined,
+      episodeName: null,
+      albumName: null,
+      episodeCount: null,
+      metadata: null,
+    },
+  },
+  {
+    sessionId: "s-1",
+    sessionName: "Bedroom Chromecast",
+    user: { userId: "u-1", username: "sarah", profilePictureUrl: null },
+    currentlyPlaying: {
+      type: "video",
+      name: "Breaking Bad",
+      seasonName: "Season 5",
+      episodeName: "Ozymandias",
+      albumName: null,
+      episodeCount: null,
+      metadata: null,
+    },
+  },
+  {
+    sessionId: "s-2",
+    sessionName: "Office Desktop",
+    user: { userId: "u-2", username: "mike", profilePictureUrl: null },
+    currentlyPlaying: {
+      type: "movie",
+      name: "The Dark Knight",
+      seasonName: undefined,
+      episodeName: null,
+      albumName: null,
+      episodeCount: null,
+      metadata: null,
+    },
+  },
+  {
+    sessionId: "s-3",
+    sessionName: "iPad",
+    user: { userId: "u-3", username: "emily", profilePictureUrl: null },
+    currentlyPlaying: {
+      type: "video",
+      name: "Severance",
+      seasonName: "Season 2",
+      episodeName: "The We We Are",
+      albumName: null,
+      episodeCount: null,
+      metadata: null,
+    },
+  },
+  {
+    sessionId: "s-4",
+    sessionName: "Mobile",
+    user: { userId: "u-4", username: "alex", profilePictureUrl: null },
+    currentlyPlaying: {
+      type: "audio",
+      name: "Daft Punk",
+      seasonName: undefined,
+      episodeName: null,
+      albumName: "Random Access Memories",
+      episodeCount: null,
+      metadata: null,
+    },
+  },
+  {
+    sessionId: "s-5",
+    sessionName: "Guest Room",
+    user: { userId: "u-5", username: "guest", profilePictureUrl: null },
+    currentlyPlaying: {
+      type: "movie",
+      name: "Oppenheimer",
+      seasonName: undefined,
+      episodeName: null,
+      albumName: null,
+      episodeCount: null,
+      metadata: null,
+    },
+  },
+];
 
-  private static createSession(index: number): StreamSession {
-    return {
-      sessionId: `session-${index}`,
-      sessionName: `Session ${index}`,
-      user: {
-        userId: `user-${index}`,
-        username: `User${index}`,
-        profilePictureUrl: "/images/mock/avatar.jpg",
-      },
-      currentlyPlaying:
-        Math.random() > 0.9 // 10% chance of being null (not currently playing)
-          ? {
-              type: "movie",
-              name: `Movie ${index}`,
-              seasonName: undefined,
-              episodeName: null,
-              albumName: null,
-              episodeCount: null,
-              metadata: null,
-            }
-          : null,
-    };
+export class MediaServerMockService implements IMediaServerIntegration {
+  public async getCurrentSessionsAsync(_options: CurrentSessionsInput): Promise<StreamSession[]> {
+    return await Promise.resolve(sessions);
   }
 }

packages/integrations/src/mock/data/network-controller-summary.ts

@@ -4,27 +4,11 @@ import type { NetworkControllerSummary } from "../../types";
 export class NetworkControllerSummaryMockService implements NetworkControllerSummaryIntegration {
   public async getNetworkSummaryAsync(): Promise<NetworkControllerSummary> {
     return await Promise.resolve({
-      lan: {
-        guests: 5,
-        users: 10,
-        status: "enabled",
-      },
-      vpn: {
-        users: 3,
-        status: "enabled",
-      },
-      wanStatus: "disabled",
-      wifi: {
-        status: "disabled",
-        guests: 0,
-        users: 0,
-      },
-      www: {
-        latency: 22,
-        status: "enabled",
-        ping: 32,
-        uptime: 3600,
-      },
+      lan: { guests: 5, users: 18, status: "enabled" },
+      vpn: { users: 3, status: "enabled" },
+      wanStatus: "enabled",
+      wifi: { status: "enabled", guests: 2, users: 12 },
+      www: { latency: 22, status: "enabled", ping: 14, uptime: 864000 },
     });
   }
 }

packages/integrations/src/mock/data/ups-summary.ts

@@ -0,0 +1,41 @@
+import type { IUpsSummaryIntegration } from "../../interfaces/ups-summary/ups-summary-integration";
+import type { UpsSummary } from "../../types";
+
+export class UpsSummaryMockService implements IUpsSummaryIntegration {
+  public async getUpsSummariesAsync(): Promise<UpsSummary[]> {
+    return await Promise.resolve([
+      {
+        id: "ups-rack-1",
+        name: "CyberPower OR1500",
+        manufacturer: "CyberPower",
+        model: "OR1500LCDRM1U",
+        serial: "CPS1500-001",
+        status: "online",
+        batteryCharge: 100,
+        batteryRuntime: 2280,
+        batteryVoltage: 27.3,
+        load: 42,
+        inputVoltage: 230,
+        outputVoltage: 230,
+        power: 315,
+        temperature: 29,
+      },
+      {
+        id: "ups-rack-2",
+        name: "APC Back-UPS Pro",
+        manufacturer: "APC",
+        model: "BR1500G",
+        serial: "APC1500-002",
+        status: "onBattery",
+        batteryCharge: 64,
+        batteryRuntime: 840,
+        batteryVoltage: 25.1,
+        load: 58,
+        inputVoltage: 0,
+        outputVoltage: 229,
+        power: 410,
+        temperature: 31,
+      },
+    ]);
+  }
+}

packages/integrations/src/mock/mock-integration.ts

@@ -15,6 +15,7 @@ import type { IMediaServerIntegration } from "../interfaces/media-server/media-s
 import type { IMediaTranscodingIntegration } from "../interfaces/media-transcoding/media-transcoding-integration";
 import type { NetworkControllerSummaryIntegration } from "../interfaces/network-controller-summary/network-controller-summary-integration";
 import type { ISmartHomeIntegration } from "../interfaces/smart-home/smart-home-integration";
+import type { IUpsSummaryIntegration } from "../interfaces/ups-summary/ups-summary-integration";
 import { CalendarMockService } from "./data/calendar";
 import { ClusterHealthMonitoringMockService } from "./data/cluster-health-monitoring";
 import { DnsHoleMockService } from "./data/dns-hole";
@@ -28,6 +29,7 @@ import { NetworkControllerSummaryMockService } from "./data/network-controller-s
 import { NotificationsMockService } from "./data/notifications";
 import { SmartHomeMockService } from "./data/smart-home";
 import { SystemHealthMonitoringMockService } from "./data/system-health-monitoring";
+import { UpsSummaryMockService } from "./data/ups-summary";
 
 export class MockIntegration
   extends Integration
@@ -43,7 +45,8 @@ export class MockIntegration
     IMediaServerIntegration,
     IMediaTranscodingIntegration,
     NetworkControllerSummaryIntegration,
-    ISmartHomeIntegration
+    ISmartHomeIntegration,
+    IUpsSummaryIntegration
 {
   private static readonly dnsHole = new DnsHoleMockService();
   private static readonly calendar = new CalendarMockService();
@@ -58,6 +61,7 @@ export class MockIntegration
   private static readonly networkController = new NetworkControllerSummaryMockService();
   private static readonly notifications = new NotificationsMockService();
   private static readonly smartHome = new SmartHomeMockService();
+  private static readonly upsSummary = new UpsSummaryMockService();
 
   protected async testingAsync(_: IntegrationTestingInput): Promise<TestingResult> {
     return await Promise.resolve({
@@ -85,7 +89,7 @@ export class MockIntegration
 
   // Health Monitoring Integrations
   getSystemInfoAsync = MockIntegration.systemMonitoring.getSystemInfoAsync.bind(MockIntegration.systemMonitoring);
-  getClusterInfoAsync = MockIntegration.clusterMonitoring.getClusterInfoAsync.bind(MockIntegration.downloadClient);
+  getClusterInfoAsync = MockIntegration.clusterMonitoring.getClusterInfoAsync.bind(MockIntegration.clusterMonitoring);
 
   // IndexerManagerIntegration
   getIndexersAsync = MockIntegration.indexerManager.getIndexersAsync.bind(MockIntegration.indexerManager);
@@ -104,7 +108,7 @@ export class MockIntegration
   declineRequestAsync = MockIntegration.mediaRequest.declineRequestAsync.bind(MockIntegration.mediaRequest);
 
   // MediaServerIntegration
-  getCurrentSessionsAsync = MockIntegration.mediaServer.getCurrentSessionsAsync.bind(MockIntegration.mediaRequest);
+  getCurrentSessionsAsync = MockIntegration.mediaServer.getCurrentSessionsAsync.bind(MockIntegration.mediaServer);
 
   // MediaTranscodingIntegration
   getStatisticsAsync = MockIntegration.mediaTranscoding.getStatisticsAsync.bind(MockIntegration.mediaTranscoding);
@@ -123,4 +127,7 @@ export class MockIntegration
   getEntityStateAsync = MockIntegration.smartHome.getEntityStateAsync.bind(MockIntegration.smartHome);
   triggerAutomationAsync = MockIntegration.smartHome.triggerAutomationAsync.bind(MockIntegration.smartHome);
   triggerToggleAsync = MockIntegration.smartHome.triggerToggleAsync.bind(MockIntegration.smartHome);
+
+  // UpsSummaryIntegration
+  getUpsSummariesAsync = MockIntegration.upsSummary.getUpsSummariesAsync.bind(MockIntegration.upsSummary);
 }

packages/integrations/src/peanut/peanut-integration.ts

@@ -0,0 +1,103 @@
+import { ResponseError } from "@homarr/common/server";
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import type { IntegrationTestingInput } from "../base/integration";
+import { Integration } from "../base/integration";
+import { TestConnectionError } from "../base/test-connection/test-connection-error";
+import type { TestingResult } from "../base/test-connection/test-connection-service";
+import type { IUpsSummaryIntegration } from "../interfaces/ups-summary/ups-summary-integration";
+import type { UpsStatus, UpsSummary } from "../interfaces/ups-summary/ups-summary-types";
+import type { PeaNutDevice } from "./peanut-types";
+import { peaNutDevicesSchema } from "./peanut-types";
+
+export class PeaNutIntegration extends Integration implements IUpsSummaryIntegration {
+  protected async testingAsync(input: IntegrationTestingInput): Promise<TestingResult> {
+    const response = await input.fetchAsync(this.url("/api/v1/devices"), {
+      headers: this.getAuthHeaders(),
+    });
+
+    if (!response.ok) return TestConnectionError.StatusResult(response);
+
+    await response.json();
+
+    return { success: true };
+  }
+
+  public async getUpsSummariesAsync(): Promise<UpsSummary[]> {
+    const response = await fetchWithTrustedCertificatesAsync(this.url("/api/v1/devices", { meta: true }), {
+      headers: this.getAuthHeaders(),
+    });
+
+    if (!response.ok) {
+      throw new ResponseError(response);
+    }
+
+    const devices = peaNutDevicesSchema.parse(await response.json());
+    return devices.map((device, index) => this.mapDeviceToSummary(device, index));
+  }
+
+  private mapDeviceToSummary(device: PeaNutDevice, index: number): UpsSummary {
+    const manufacturer = this.readString(device, "device.mfr") ?? this.readString(device, "ups.mfr");
+    const model = this.readString(device, "device.model") ?? this.readString(device, "ups.model");
+    const id = this.readString(device, "peanut.device_id") ?? `ups-${index}`;
+    const name = [manufacturer, model].filter(Boolean).join(" ") || id;
+
+    return {
+      id,
+      name,
+      manufacturer,
+      model,
+      serial: this.readString(device, "device.serial"),
+      status: this.parseStatus(this.readString(device, "ups.status")),
+      batteryCharge: this.readNumber(device, "battery.charge"),
+      batteryRuntime: this.readNumber(device, "battery.runtime"),
+      batteryVoltage: this.readNumber(device, "battery.voltage"),
+      load: this.readNumber(device, "ups.load"),
+      inputVoltage: this.readNumber(device, "input.voltage"),
+      outputVoltage: this.readNumber(device, "output.voltage"),
+      power: this.readNumber(device, "ups.realpower") ?? this.readNumber(device, "ups.power"),
+      temperature: this.readNumber(device, "ups.temperature"),
+    };
+  }
+
+  /**
+   * Resolves the raw NUT `ups.status` flags (e.g. "OL CHRG", "OB DISCHRG LB") into a single
+   * normalized status. The flags are checked in priority order so the most critical state wins.
+   */
+  private parseStatus(rawStatus: string | null): UpsStatus {
+    const flags = (rawStatus ?? "").toUpperCase().split(/\s+/).filter(Boolean);
+
+    if (flags.includes("LB")) return "lowBattery";
+    if (flags.includes("OB")) return "onBattery";
+    if (flags.includes("OL")) {
+      return flags.includes("CHRG") ? "charging" : "online";
+    }
+
+    return "unknown";
+  }
+
+  private readString(device: PeaNutDevice, key: string): string | null {
+    const value = device[key];
+    if (value === undefined || value === null) return null;
+    const stringValue = String(value).trim();
+    return stringValue.length > 0 ? stringValue : null;
+  }
+
+  private readNumber(device: PeaNutDevice, key: string): number | null {
+    const value = device[key];
+    if (value === undefined || value === null || value === "") return null;
+    const numberValue = typeof value === "number" ? value : Number(value);
+    return Number.isFinite(numberValue) ? numberValue : null;
+  }
+
+  private getAuthHeaders(): Record<string, string> {
+    if (this.hasSecretValue("username") && this.hasSecretValue("password")) {
+      const credentials = Buffer.from(`${this.getSecretValue("username")}:${this.getSecretValue("password")}`).toString(
+        "base64",
+      );
+      return { Authorization: `Basic ${credentials}` };
+    }
+
+    return {};
+  }
+}

packages/integrations/src/peanut/peanut-types.ts

@@ -0,0 +1,10 @@
+import { z } from "zod/v4";
+
+// PeaNUT returns each device as a flat map of NUT variables (e.g. "ups.status",
+// "battery.charge"). Values are either strings or numbers depending on the
+// variable, so we accept both and coerce them when mapping to a UpsSummary.
+export const peaNutDeviceSchema = z.record(z.string(), z.union([z.string(), z.number()]));
+
+export const peaNutDevicesSchema = z.array(peaNutDeviceSchema);
+
+export type PeaNutDevice = z.infer<typeof peaNutDeviceSchema>;

packages/integrations/src/peanut/test/peanut-integration.spec.ts

@@ -0,0 +1,166 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import type { IntegrationSecret } from "../../base/types";
+import { PeaNutIntegration } from "../peanut-integration";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  fetchWithTrustedCertificatesAsync: vi.fn(),
+}));
+
+const TEST_URL = "https://peanut.example.com";
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+
+const mockDevicesResponse = (devices: Record<string, string | number>[]) => {
+  mockFetch.mockImplementation(
+    () =>
+      Promise.resolve(
+        new Response(JSON.stringify(devices), {
+          status: 200,
+          headers: { "content-type": "application/json" },
+        }),
+      ) as unknown as ReturnType<typeof fetchWithTrustedCertificatesAsync>,
+  );
+};
+
+const createIntegration = (decryptedSecrets: IntegrationSecret[] = []) =>
+  new PeaNutIntegration({
+    id: "test-peanut",
+    name: "Test PeaNUT",
+    url: TEST_URL,
+    externalUrl: null,
+    decryptedSecrets,
+  });
+
+beforeEach(() => {
+  mockFetch.mockReset();
+});
+
+describe("PeaNutIntegration getUpsSummariesAsync", () => {
+  test("maps NUT variables to a UPS summary and coerces string values to numbers", async () => {
+    mockDevicesResponse([
+      {
+        "device.mfr": "CyberPower",
+        "device.model": "CP1500EPFCLCD",
+        "device.serial": "ABC123",
+        "ups.status": "OL CHRG",
+        "ups.load": "23",
+        "ups.realpower": "120",
+        "ups.temperature": "31.5",
+        "battery.charge": "100",
+        "battery.runtime": "3720",
+        "battery.voltage": "27.3",
+        "input.voltage": "230",
+        "output.voltage": "229",
+        "peanut.device_id": "ups",
+        "peanut.server": "localhost:3493",
+      },
+    ]);
+
+    const [summary] = await createIntegration().getUpsSummariesAsync();
+
+    expect(summary).toStrictEqual({
+      id: "ups",
+      name: "CyberPower CP1500EPFCLCD",
+      manufacturer: "CyberPower",
+      model: "CP1500EPFCLCD",
+      serial: "ABC123",
+      status: "charging",
+      batteryCharge: 100,
+      batteryRuntime: 3720,
+      batteryVoltage: 27.3,
+      load: 23,
+      inputVoltage: 230,
+      outputVoltage: 229,
+      power: 120,
+      temperature: 31.5,
+    });
+  });
+
+  test("falls back when optional variables are missing", async () => {
+    mockDevicesResponse([
+      {
+        "ups.status": "OB DISCHRG LB",
+        "ups.power": "90",
+        "battery.charge": "15",
+      },
+    ]);
+
+    const [summary] = await createIntegration().getUpsSummariesAsync();
+
+    expect(summary).toMatchObject({
+      id: "ups-0",
+      name: "ups-0",
+      manufacturer: null,
+      model: null,
+      status: "lowBattery",
+      batteryCharge: 15,
+      batteryRuntime: null,
+      load: null,
+      inputVoltage: null,
+      outputVoltage: null,
+      power: 90,
+      temperature: null,
+    });
+  });
+
+  test("returns a summary per device", async () => {
+    mockDevicesResponse([
+      { "peanut.device_id": "ups-a", "ups.status": "OL" },
+      { "peanut.device_id": "ups-b", "ups.status": "OB" },
+    ]);
+
+    const summaries = await createIntegration().getUpsSummariesAsync();
+
+    expect(summaries.map((summary) => summary.id)).toStrictEqual(["ups-a", "ups-b"]);
+  });
+
+  test("normalizes NUT status flags into a typed status", async () => {
+    mockDevicesResponse([
+      { "ups.status": "OL" },
+      { "ups.status": "OL CHRG" },
+      { "ups.status": "OB DISCHRG" },
+      { "ups.status": "OB DISCHRG LB" },
+      { "ups.status": "OL LB" },
+      { "ups.status": "" },
+    ]);
+
+    const summaries = await createIntegration().getUpsSummariesAsync();
+
+    expect(summaries.map((summary) => summary.status)).toStrictEqual([
+      "online",
+      "charging",
+      "onBattery",
+      "lowBattery",
+      "lowBattery",
+      "unknown",
+    ]);
+  });
+});
+
+describe("PeaNutIntegration authentication", () => {
+  test("sends a Basic auth header when username and password are configured", async () => {
+    mockDevicesResponse([]);
+
+    await createIntegration([
+      { kind: "username", value: "admin" },
+      { kind: "password", value: "secret" },
+    ]).getUpsSummariesAsync();
+
+    const expected = `Basic ${Buffer.from("admin:secret").toString("base64")}`;
+    const [, requestInit] = mockFetch.mock.calls[0] ?? [];
+    expect(requestInit?.headers).toMatchObject({ Authorization: expected });
+  });
+
+  test("omits the auth header when no credentials are configured", async () => {
+    mockDevicesResponse([]);
+
+    await createIntegration().getUpsSummariesAsync();
+
+    const [, requestInit] = mockFetch.mock.calls[0] ?? [];
+    expect(requestInit?.headers).toStrictEqual({});
+  });
+});

packages/integrations/src/types.ts

@@ -3,6 +3,7 @@ export * from "./interfaces/dns-hole-summary/dns-hole-summary-types";
 export * from "./interfaces/network-controller-summary/network-controller-summary-types";
 export * from "./interfaces/firewall-summary/firewall-summary-types";
 export * from "./interfaces/health-monitoring/health-monitoring-types";
+export * from "./interfaces/ups-summary/ups-summary-types";
 export * from "./interfaces/indexer-manager/indexer-manager-types";
 export * from "./interfaces/media-requests/media-request-types";
 export * from "./base/searchable-integration";

packages/notifications/src/index.tsx

@@ -1,6 +1,6 @@
 import type { NotificationData } from "@mantine/notifications";
 import { notifications } from "@mantine/notifications";
-import { IconCheck, IconX } from "@tabler/icons-react";
+import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
 
 export const showSuccessNotification = (props: NotificationData) =>
   notifications.show({
@@ -15,3 +15,10 @@ export const showErrorNotification = (props: NotificationData) =>
     color: "red",
     icon: <IconX size={20} />,
   });
+
+export const showWarningNotification = (props: NotificationData) =>
+  notifications.show({
+    ...props,
+    color: "yellow",
+    icon: <IconInfoCircle size={20} />,
+  });

packages/redis/src/index.ts

@@ -13,8 +13,6 @@ export {
   handshakeAsync,
   createSubPubChannel,
   createGetSetChannel,
-  createQueryCacheChannel,
-  getAllQueryCacheAsync,
 } from "./lib/channel";
 
 export { createIntegrationHistoryChannel } from "./lib/channels/history-channel";

packages/redis/src/lib/channel.ts

@@ -125,49 +125,6 @@ export const createGetSetChannel = <TData>(name: string) => {
   };
 };
 
-interface QueryCacheChannelOptions {
-  userId: string;
-  boardId: string;
-  key: string;
-  ttlMs: number;
-  maxValueBytes: number;
-}
-
-const queryCacheHashKey = (userId: string, boardId: string) => `qc:${userId}:${boardId}`;
-
-export const createQueryCacheChannel = ({ userId, boardId, key, ttlMs, maxValueBytes }: QueryCacheChannelOptions) => {
-  const hkey = queryCacheHashKey(userId, boardId);
-
-  return {
-    name: `${hkey}:${key}`,
-    getAsync: async () => {
-      return await getSetClient.hget(hkey, key);
-    },
-    setAsync: async (value: string) => {
-      if (Buffer.byteLength(value, "utf8") > maxValueBytes) {
-        logger.warn("Query cache value exceeded maximum size", {
-          channel: hkey,
-          valueBytes: Buffer.byteLength(value, "utf8"),
-          maxValueBytes,
-        });
-        return false;
-      }
-
-      await getSetClient.hset(hkey, key, value);
-      await getSetClient.pexpire(hkey, ttlMs);
-      return true;
-    },
-    removeAsync: async () => {
-      await getSetClient.hdel(hkey, key);
-    },
-  };
-};
-
-export const getAllQueryCacheAsync = async (userId: string, boardId: string): Promise<Record<string, string>> => {
-  const hkey = queryCacheHashKey(userId, boardId);
-  return await getSetClient.hgetall(hkey);
-};
-
 /**
  * Creates a new cache channel.
  * @param name name of the channel

packages/request-handler/src/docker-log-decode.spec.ts

@@ -1,53 +0,0 @@
-import { describe, expect, test } from "vitest";
-
-import { createDockerLogStreamProcessor, decodeDockerLogs } from "./docker-log-decode";
-
-const encodeDockerLogFrame = (streamType: number, message: string) => {
-  const payload = Buffer.from(message, "utf-8");
-  const header = Buffer.alloc(8);
-  header.writeUInt8(streamType, 0);
-  header.writeUInt32BE(payload.length, 4);
-  return Buffer.concat([header, payload]);
-};
-
-describe("decodeDockerLogs", () => {
-  test("decodes multiplexed docker log frames", () => {
-    const logs = Buffer.concat([encodeDockerLogFrame(1, "hello "), encodeDockerLogFrame(2, "world")]);
-
-    expect(decodeDockerLogs(logs)).toBe("hello world");
-  });
-
-  test("returns plain text logs unchanged", () => {
-    expect(decodeDockerLogs("plain text log")).toBe("plain text log");
-  });
-
-  test("falls back to raw buffer text for non-multiplexed output", () => {
-    expect(decodeDockerLogs(Buffer.from("raw docker output", "utf-8"))).toBe("raw docker output");
-  });
-});
-
-describe("createDockerLogStreamProcessor", () => {
-  test("emits decoded chunks from a stream", () => {
-    const messages: string[] = [];
-    const processChunk = createDockerLogStreamProcessor(
-      (data) => messages.push(data),
-      () => undefined,
-      1024,
-    );
-
-    const chunk = encodeDockerLogFrame(1, "streamed log");
-    expect(processChunk(chunk)).toBe(true);
-    expect(messages).toEqual(["streamed log"]);
-  });
-
-  test("returns false when message size exceeds limit", () => {
-    const processChunk = createDockerLogStreamProcessor(
-      () => undefined,
-      () => undefined,
-      4,
-    );
-
-    const chunk = encodeDockerLogFrame(1, "this message is too long");
-    expect(processChunk(chunk)).toBe(false);
-  });
-});

packages/request-handler/src/docker-log-decode.ts

@@ -1,89 +0,0 @@
-const DOCKER_STREAM_HEADER_SIZE = 8;
-const DOCKER_STREAM_TYPES = new Set([1, 2]);
-
-export const decodeDockerLogs = (logs: Buffer | string) => {
-  if (typeof logs === "string") {
-    return logs;
-  }
-
-  if (logs.length === 0) {
-    return "";
-  }
-
-  let cursor = 0;
-  const parts: string[] = [];
-
-  while (cursor < logs.length) {
-    if (cursor + DOCKER_STREAM_HEADER_SIZE > logs.length) {
-      break;
-    }
-
-    const streamType = logs.readUInt8(cursor);
-    if (!DOCKER_STREAM_TYPES.has(streamType)) {
-      return logs.toString("utf-8");
-    }
-
-    const length = logs.readUInt32BE(cursor + 4);
-    const start = cursor + DOCKER_STREAM_HEADER_SIZE;
-    const end = start + length;
-    if (end > logs.length) {
-      break;
-    }
-
-    parts.push(logs.subarray(start, end).toString("utf-8"));
-    cursor = end;
-  }
-
-  const decoded = parts.join("");
-  if (decoded.length === 0) {
-    return logs.toString("utf-8");
-  }
-
-  return decoded;
-};
-
-export const createDockerLogStreamProcessor = (
-  onData: (data: string) => void,
-  onError: (err: Error) => void,
-  maxMessageSize: number,
-) => {
-  let buffer = Buffer.alloc(0);
-
-  const processChunk = (chunk: Buffer) => {
-    buffer = Buffer.concat([buffer, chunk]);
-
-    while (buffer.length > 0) {
-      if (buffer.length < DOCKER_STREAM_HEADER_SIZE) {
-        break;
-      }
-
-      const streamType = buffer.readUInt8(0);
-      if (!DOCKER_STREAM_TYPES.has(streamType)) {
-        onData(buffer.toString("utf-8"));
-        buffer = Buffer.alloc(0);
-        break;
-      }
-
-      const length = buffer.readUInt32BE(4);
-      if (length > maxMessageSize) {
-        onError(
-          new Error(`Docker log message size (${length} bytes) exceeds maximum allowed (${maxMessageSize} bytes)`),
-        );
-        return false;
-      }
-
-      const fullMessageSize = DOCKER_STREAM_HEADER_SIZE + length;
-      if (buffer.length < fullMessageSize) {
-        break;
-      }
-
-      const payload = buffer.subarray(DOCKER_STREAM_HEADER_SIZE, fullMessageSize);
-      onData(payload.toString("utf-8"));
-      buffer = buffer.subarray(fullMessageSize);
-    }
-
-    return true;
-  };
-
-  return processChunk;
-};

packages/request-handler/src/docker.ts

@@ -1,6 +1,5 @@
-import type { Readable } from "node:stream";
 import dayjs from "dayjs";
-import type { Container, ContainerInfo, ContainerStats } from "dockerode";
+import type { ContainerInfo, ContainerStats } from "dockerode";
 import type Dockerode from "dockerode";
 
 import { bestMatch } from "@homarr/common";
@@ -9,18 +8,174 @@ import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 import { db, like, or } from "@homarr/db";
 import { icons } from "@homarr/db/schema";
 import { extractContainerImageName } from "@homarr/definitions";
-import type { ContainerState } from "@homarr/docker";
+import type { ContainerState, Port } from "@homarr/docker";
 import { dockerLabels, DockerSingleton } from "@homarr/docker";
 
-import { createDockerLogStreamProcessor, decodeDockerLogs } from "./docker-log-decode";
 import { createCachedWidgetRequestHandler } from "./lib/cached-widget-request-handler";
 
 const logger = createLogger({ module: "dockerRequestHandler" });
 
+const isDemoMode = ["1", "yes", "t", "true"].includes((process.env.DEMO_MODE ?? "").toLowerCase());
+
+const port = (privatePort: number, publicPort: number, type: string): Port => ({
+  IP: "0.0.0.0",
+  PrivatePort: privatePort,
+  PublicPort: publicPort,
+  Type: type,
+});
+
+const mockContainers: {
+  id: string;
+  name: string;
+  host: string;
+  state: ContainerState;
+  image: string;
+  iconUrl: string;
+  cpuUsage: number;
+  memoryUsage: number;
+  ports: Port[];
+}[] = [
+  {
+    id: "a1b2c3d4e5f6",
+    name: "sonarr",
+    host: "local",
+    state: "running",
+    image: "lscr.io/linuxserver/sonarr:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/sonarr.svg",
+    cpuUsage: 2.3,
+    memoryUsage: 256 * 1024 * 1024,
+    ports: [port(8989, 8989, "tcp")],
+  },
+  {
+    id: "b2c3d4e5f6a7",
+    name: "radarr",
+    host: "local",
+    state: "running",
+    image: "lscr.io/linuxserver/radarr:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/radarr.svg",
+    cpuUsage: 1.8,
+    memoryUsage: 220 * 1024 * 1024,
+    ports: [port(7878, 7878, "tcp")],
+  },
+  {
+    id: "c3d4e5f6a7b8",
+    name: "plex",
+    host: "local",
+    state: "running",
+    image: "lscr.io/linuxserver/plex:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/plex.svg",
+    cpuUsage: 12.5,
+    memoryUsage: 1024 * 1024 * 1024,
+    ports: [port(32400, 32400, "tcp")],
+  },
+  {
+    id: "d4e5f6a7b8c9",
+    name: "qbittorrent",
+    host: "local",
+    state: "running",
+    image: "lscr.io/linuxserver/qbittorrent:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/qbittorrent.svg",
+    cpuUsage: 5.1,
+    memoryUsage: 380 * 1024 * 1024,
+    ports: [port(8080, 8080, "tcp")],
+  },
+  {
+    id: "e5f6a7b8c9d0",
+    name: "prowlarr",
+    host: "local",
+    state: "running",
+    image: "lscr.io/linuxserver/prowlarr:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/prowlarr.svg",
+    cpuUsage: 0.8,
+    memoryUsage: 120 * 1024 * 1024,
+    ports: [port(9696, 9696, "tcp")],
+  },
+  {
+    id: "f6a7b8c9d0e1",
+    name: "overseerr",
+    host: "local",
+    state: "running",
+    image: "lscr.io/linuxserver/overseerr:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/overseerr.svg",
+    cpuUsage: 1.2,
+    memoryUsage: 180 * 1024 * 1024,
+    ports: [port(5055, 5055, "tcp")],
+  },
+  {
+    id: "a7b8c9d0e1f2",
+    name: "homarr",
+    host: "local",
+    state: "running",
+    image: "ghcr.io/homarr-labs/homarr:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg",
+    cpuUsage: 3.4,
+    memoryUsage: 290 * 1024 * 1024,
+    ports: [port(7575, 7575, "tcp")],
+  },
+  {
+    id: "b8c9d0e1f2a3",
+    name: "pihole",
+    host: "local",
+    state: "running",
+    image: "pihole/pihole:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pi-hole.svg",
+    cpuUsage: 0.5,
+    memoryUsage: 95 * 1024 * 1024,
+    ports: [port(80, 80, "tcp"), port(53, 53, "udp")],
+  },
+  {
+    id: "c9d0e1f2a3b4",
+    name: "nginx-proxy",
+    host: "local",
+    state: "running",
+    image: "jc21/nginx-proxy-manager:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/nginx-proxy-manager.svg",
+    cpuUsage: 0.3,
+    memoryUsage: 65 * 1024 * 1024,
+    ports: [port(443, 443, "tcp"), port(81, 81, "tcp")],
+  },
+  {
+    id: "d0e1f2a3b4c5",
+    name: "watchtower",
+    host: "local",
+    state: "running",
+    image: "containrrr/watchtower:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/watchtower.svg",
+    cpuUsage: 0.1,
+    memoryUsage: 30 * 1024 * 1024,
+    ports: [],
+  },
+  {
+    id: "e1f2a3b4c5d6",
+    name: "tdarr",
+    host: "local",
+    state: "exited",
+    image: "ghcr.io/haveagitgat/tdarr:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/tdarr.svg",
+    cpuUsage: 0,
+    memoryUsage: 0,
+    ports: [],
+  },
+  {
+    id: "f2a3b4c5d6e7",
+    name: "bazarr",
+    host: "local",
+    state: "running",
+    image: "lscr.io/linuxserver/bazarr:latest",
+    iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/bazarr.svg",
+    cpuUsage: 0.6,
+    memoryUsage: 110 * 1024 * 1024,
+    ports: [port(6767, 6767, "tcp")],
+  },
+];
+
 export const dockerContainersRequestHandler = createCachedWidgetRequestHandler({
   queryKey: "dockerContainersResult",
   widgetKind: "dockerContainers",
   async requestAsync() {
+    if (isDemoMode) {
+      return mockContainers;
+    }
     return await getContainersWithStatsAsync();
   },
   cacheDuration: dayjs.duration(20, "seconds"),
@@ -28,84 +183,6 @@ export const dockerContainersRequestHandler = createCachedWidgetRequestHandler({
 
 const extractImage = (container: ContainerInfo) => extractContainerImageName(container.Image);
 
-const findContainerByIdAsync = async (id: string) => {
-  const dockerInstances = DockerSingleton.getInstances();
-  const containers = await Promise.all(
-    dockerInstances.map(async ({ instance }) => {
-      const container = instance.getContainer(id);
-
-      return await new Promise<Container | null>((resolve) => {
-        container.inspect((err, data) => {
-          if (err || !data) {
-            resolve(null);
-          } else {
-            resolve(container);
-          }
-        });
-      });
-    }),
-  );
-
-  return containers.find((container) => container) ?? null;
-};
-
-export const getContainerLogsAsync = async (id: string, tail = 200) => {
-  const container = await findContainerByIdAsync(id);
-  if (!container) {
-    return null;
-  }
-
-  const rawLogs = await container.logs({
-    tail,
-    stdout: true,
-    stderr: true,
-    follow: false,
-  });
-
-  return decodeDockerLogs(rawLogs);
-};
-
-export const streamContainerLogsAsync = async (
-  id: string,
-  tail: number,
-  onData: (data: string) => void,
-  onError: (err: Error) => void,
-) => {
-  const container = await findContainerByIdAsync(id);
-  if (!container) {
-    onError(new Error("Container not found"));
-    return () => undefined;
-  }
-
-  const stream = (await container.logs({
-    tail,
-    stdout: true,
-    stderr: true,
-    follow: true,
-  })) as Readable;
-
-  const MAX_MESSAGE_SIZE = 1024 * 1024;
-  const processChunk = createDockerLogStreamProcessor(onData, onError, MAX_MESSAGE_SIZE);
-
-  const handleChunk = (chunk: Buffer) => {
-    const shouldContinue = processChunk(chunk);
-    if (!shouldContinue) {
-      stream.removeListener("data", handleChunk);
-      stream.removeListener("error", onError);
-      stream.destroy();
-    }
-  };
-
-  stream.on("data", handleChunk);
-  stream.on("error", onError);
-
-  return () => {
-    stream.removeListener("data", handleChunk);
-    stream.removeListener("error", onError);
-    stream.destroy();
-  };
-};
-
 async function getContainersWithStatsAsync() {
   const dockerInstances = DockerSingleton.getInstances();
   const results = await Promise.allSettled(
@@ -198,6 +275,8 @@ export function calculateMemoryUsage(stats: ContainerStats): number {
     return 0;
   }
 
+  // memory usage by default includes cache, which should not be shown as it is also not shown with docker stats command
+  // See https://docs.docker.com/reference/cli/docker/container/stats/ how it is / was calculated
   return (
     stats.memory_stats.usage -
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

packages/request-handler/src/ups.ts

@@ -0,0 +1,20 @@
+import dayjs from "dayjs";
+
+import type { IntegrationKindByCategory } from "@homarr/definitions";
+import { createIntegrationAsync } from "@homarr/integrations";
+import type { UpsSummary } from "@homarr/integrations/types";
+
+import { createCachedIntegrationRequestHandler } from "./lib/cached-integration-request-handler";
+
+export const upsSummariesRequestHandler = createCachedIntegrationRequestHandler<
+  UpsSummary[],
+  IntegrationKindByCategory<"ups">,
+  Record<string, never>
+>({
+  async requestAsync(integration, _input) {
+    const integrationInstance = await createIntegrationAsync(integration);
+    return await integrationInstance.getUpsSummariesAsync();
+  },
+  cacheDuration: dayjs.duration(1, "minute"),
+  queryKey: "upsSummaries",
+});

packages/spotlight/src/components/spotlight.tsx

@@ -88,7 +88,7 @@ const SpotlightWithActiveMode = ({ modeState, queryState, activeMode }: Spotligh
       const { integrationIds, query } = (event as CustomEvent<OpenMediaRequestSearchOptions>).detail ?? {};
       setMediaRequestSearchScope({ integrationIds });
       setMode("media");
-      setChildrenStack([]);
+      clearChildrenStack();
       setQuery(query ?? "");
       spotlightActions.open();
       setTimeout(() => selectAction(0, spotlightStore));
@@ -98,7 +98,7 @@ const SpotlightWithActiveMode = ({ modeState, queryState, activeMode }: Spotligh
     return () => {
       window.removeEventListener(mediaRequestSearchEvent, handleMediaRequestSearch);
     };
-  }, [setMediaRequestSearchScope, setMode, setQuery]);
+  }, [setMediaRequestSearchScope, setMode, setQuery, clearChildrenStack]);
 
   useEffect(() => {
     if (mode !== "media") {

packages/spotlight/src/modes/media/media-request-search-group.tsx

@@ -55,8 +55,7 @@ export const mediaRequestSearchGroup = createGroup<MediaRequestSearchOption>({
 
     const { result } = option;
     const hasAvailabilityLabel =
-      result.availability &&
-      (availabilityLabelKeys as readonly string[]).includes(result.availability);
+      result.availability && (availabilityLabelKeys as readonly string[]).includes(result.availability);
     const badgeLabel = hasAvailabilityLabel
       ? tMedia(`availability.${result.availability as AvailabilityWithLabel}`)
       : undefined;

packages/translation/src/lang/ca.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Contrasenya",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Inclou com a mínim 8 caràcters",
           "lowercase": "Inclou minúscules",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/cn.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "密码",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "至少包含 8 个字符",
           "lowercase": "包含小写字母",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "在新标签页中打开"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "书签",
           "add": "添加书签"

packages/translation/src/lang/cr.json

@@ -132,12 +132,13 @@
       },
       "password": {
         "label": "crwdns26:0crwdne26:0",
+        "suggestionsTitle": "crwdns4261:0crwdne4261:0",
         "suggestion": {
-          "length": "crwdns28:0crwdne28:0",
-          "lowercase": "crwdns30:0crwdne30:0",
-          "uppercase": "crwdns32:0crwdne32:0",
-          "number": "crwdns34:0crwdne34:0",
-          "special": "crwdns36:0crwdne36:0"
+          "length": "crwdns4263:0crwdne4263:0",
+          "lowercase": "crwdns4265:0crwdne4265:0",
+          "uppercase": "crwdns4267:0crwdne4267:0",
+          "number": "crwdns4269:0crwdne4269:0",
+          "special": "crwdns4271:0crwdne4271:0"
         }
       },
       "passwordConfirm": {
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "crwdns2686:0crwdne2686:0"
         },
+        "withBorder": {
+          "label": "crwdns4273:0crwdne4273:0"
+        },
         "items": {
           "label": "crwdns764:0crwdne764:0",
           "add": "crwdns766:0crwdne766:0"

packages/translation/src/lang/cs.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Heslo",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Obsahuje alespoň 8 znaků",
           "lowercase": "Obsahuje malé písmeno",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/da.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Adgangskode",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Inkluderer mindst 8 tegn",
           "lowercase": "Inkluderer små bogstaver",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Åbn i nyt faneblad"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Bogmærker",
           "add": "Tilføj bogmærke"

packages/translation/src/lang/de-CH.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Passwort",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Enthält mindestens 8 Zeichen",
           "lowercase": "Enthält Kleinbuchstaben",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "In neuem Tab öffnen"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Lesezeichen",
           "add": "Lesezeichen hinzufügen"

packages/translation/src/lang/de.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Passwort",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Enthält mindestens 8 Zeichen",
           "lowercase": "Enthält Kleinbuchstaben",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "In neuem Tab öffnen"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Lesezeichen",
           "add": "Lesezeichen hinzufügen"

packages/translation/src/lang/el.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Κωδικός",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "Περιλαμβάνει πεζό γράμμα",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/en-gb.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Password",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Includes a minimum of 8 characters",
           "lowercase": "Includes a lower-case letter",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Open in new tab"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Bookmarks",
           "add": "Add bookmark"

packages/translation/src/lang/en.json

@@ -2150,6 +2150,37 @@
         "title": "Instances"
       }
     },
+    "ups": {
+      "name": "UPS",
+      "description": "Monitor the status of your UPS devices through a NUT server",
+      "option": {
+        "showBattery": {
+          "label": "Show battery"
+        },
+        "showLoad": {
+          "label": "Show load"
+        },
+        "showVoltage": {
+          "label": "Show voltage"
+        }
+      },
+      "status": {
+        "online": "Online",
+        "onBattery": "On battery",
+        "lowBattery": "Low battery",
+        "charging": "Charging",
+        "unknown": "Unknown"
+      },
+      "field": {
+        "runtime": "Runtime",
+        "load": "Load",
+        "input": "Input",
+        "output": "Output"
+      },
+      "error": {
+        "internalServerError": "Failed to fetch UPS data"
+      }
+    },
     "tracearr": {
       "name": "Tracearr",
       "description": "Enhanced media server monitoring with detailed stream and transcoding data",
@@ -4092,12 +4123,6 @@
     },
     "action": {
       "title": "Actions",
-      "logs": {
-        "label": "View logs",
-        "page": {
-          "title": "{name} logs"
-        }
-      },
       "start": {
         "label": "Start",
         "notification": {
@@ -4510,10 +4535,7 @@
           "label": "Tasks"
         },
         "docker": {
-          "label": "Docker",
-          "logs": {
-            "label": "Logs"
-          }
+          "label": "Docker"
         },
         "kubernetes": {
           "label": "Kubernetes",

packages/translation/src/lang/es.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Contraseña",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Incluye al menos 8 caracteres",
           "lowercase": "Incluye al menos una letra minúscula",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Abrir en una nueva pestaña"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Marcadores",
           "add": "Añadir marcador"

packages/translation/src/lang/et.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/fr.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Mot de passe",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Contient au moins 8 caractères",
           "lowercase": "Inclut une lettre minuscule",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Ouvrir dans un nouvel onglet"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Signets",
           "add": "Ajouter un signet"
@@ -2088,7 +2092,7 @@
         "empty": "",
         "user": "Utilisateur",
         "media": "Média",
-        "state": "",
+        "state": "État",
         "quality": "Qualité",
         "device": "Appareil",
         "progress": "Progression",

packages/translation/src/lang/he.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "סיסמה",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "כולל לפחות 8 תווים",
           "lowercase": "אפשר אותיות קטנות",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "פתיחה בכרטיסיה חדשה"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "סימניות",
           "add": "הוסף סימניה"

packages/translation/src/lang/hr.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Lozinka",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "Uključuje mala slova",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/hu.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Jelszó",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Tartalmazzon legalább 8 karaktert",
           "lowercase": "Tartalmazzon kisbetűt",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Megnyitás új lapon"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Könyjelzők",
           "add": "Könyvjelző hozzáadása"

packages/translation/src/lang/it.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Password",
+        "suggestionsTitle": "Suggerimenti password",
         "suggestion": {
           "length": "Include almeno 8 caratteri",
           "lowercase": "Include lettera minuscola",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Apri in una nuova scheda"
         },
+        "withBorder": {
+          "label": "Mostra bordo"
+        },
         "items": {
           "label": "Segnalibri",
           "add": "Aggiungi segnalibro"

packages/translation/src/lang/ja.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "パスワード",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "少なくとも 8 文字以上を含む",
           "lowercase": "小文字を含む",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "新しいタブで開く"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "ブックマーク",
           "add": "ブックマークに追加"

packages/translation/src/lang/ko.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "비밀번호",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "소문자 포함",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/lt.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Slaptažodis",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/lv.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Parole",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "Ietver mazo burtu",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/nl.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Wachtwoord",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Bevat ten minste 8 tekens",
           "lowercase": "Inclusief kleine letter",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "In nieuw tabblad openen"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Bladwijzers",
           "add": "Bladwijzer toevoegen"

packages/translation/src/lang/no.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Passord",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Inkluderer minst 8 tegn",
           "lowercase": "Inkluderer liten bokstav",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Åpne i ny fane"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Bokmerke",
           "add": "Legg til bokmerke"

packages/translation/src/lang/pl.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Hasło",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Zawiera co najmniej 8 znaków",
           "lowercase": "Zawiera małą literę",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Otwórz w nowej karcie"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Zakładki",
           "add": "Dodaj zakładkę"

packages/translation/src/lang/pt-br.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Senha",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Inclua pelo menos 8 caracteres",
           "lowercase": "Inclui letras minúsculas",
@@ -1056,7 +1057,7 @@
       }
     },
     "noResults": {
-      "title": ""
+      "title": "Nenhuma mídia enviada"
     }
   },
   "common": {
@@ -1088,8 +1089,8 @@
       "checkLogs": "Verifique os logs para mais detalhes",
       "tryAgain": "Tente novamente",
       "loading": "Carregando",
-      "show": "",
-      "hide": ""
+      "show": "Mostrar",
+      "hide": "Esconder"
     },
     "here": "aqui",
     "iconPicker": {
@@ -1255,7 +1256,7 @@
         "label": {
           "create": "Nova categoria",
           "changePosition": "Mudar de posição",
-          "settings": ""
+          "settings": "Configurações"
         }
       },
       "openAllInNewTabs": {
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Abrir em nova guia"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Marcadores",
           "add": "Adicionar marcador"
@@ -3459,7 +3463,7 @@
           "private": "Este quadro é privado"
         },
         "noResults": {
-          "title": ""
+          "title": "Nenhum painel ainda"
         },
         "modal": {
           "createBoard": {

packages/translation/src/lang/pt.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/ro.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Parola",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "Să includă litere mici",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/ru.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Пароль",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Содержит не менее 8 символов",
           "lowercase": "Содержит строчную букву",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Открывать в новой вкладке"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Закладки",
           "add": "Добавить закладку"

packages/translation/src/lang/sk.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Heslo",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Obsahuje aspoň 8 znakov",
           "lowercase": "Zahŕňa malé písmeno",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Otvoriť na novej karte"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Záložky",
           "add": "Pridať záložku"

packages/translation/src/lang/sl.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Geslo",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "",
           "lowercase": "Vključuje male črke",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": ""
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "",
           "add": ""

packages/translation/src/lang/sv.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Lösenord",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "Använd minst 8 tecken",
           "lowercase": "Använd liten bokstav",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Öppna i en ny flik"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Bokmärken",
           "add": "Addera bokmärke"

packages/translation/src/lang/tr.json

@@ -132,6 +132,7 @@
       },
       "password": {
         "label": "Şifre",
+        "suggestionsTitle": "",
         "suggestion": {
           "length": "En az 8 karakter içermeli",
           "lowercase": "Küçük harf içermeli",
@@ -1405,6 +1406,9 @@
         "openNewTab": {
           "label": "Yeni sekmede aç"
         },
+        "withBorder": {
+          "label": ""
+        },
         "items": {
           "label": "Yer İmleri",
           "add": "Yer imi ekle"