feat: support every widget in the demo dashboard (#6696)

packages/api/src/router/widgets/anchor-notes.ts

@@ -3,7 +3,12 @@ import { z } from "zod/v4";
 
 import { ResponseError } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
-import { anchorNotesListInputSchema, anchorNoteUpdateInputSchema, createIntegrationAsync } from "@homarr/integrations";
+import {
+  anchorNotesListInputSchema,
+  anchorNoteUpdateInputSchema,
+  createIntegrationAsync,
+  mockWidgetData,
+} from "@homarr/integrations";
 import { anchorNoteRequestHandler, anchorNotesListRequestHandler } from "@homarr/request-handler/anchor-notes";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
@@ -15,6 +20,12 @@ const noteIdInput = z.object({
 
 const logger = createLogger({ module: "anchorNotesRouter" });
 
+const assertMockNoteExists = (noteId: string) => {
+  if (noteId === mockWidgetData.anchorNote.id) return;
+
+  throw new TRPCError({ code: "NOT_FOUND", message: "Note not found" });
+};
+
 const isJsonDeltaString = (value: string) => {
   try {
     const parsed: unknown = JSON.parse(value);
@@ -40,34 +51,64 @@ const normalizeAnchorContent = (content: string | undefined) => {
 
 export const anchorNotesRouter = createTRPCRouter({
   listNotes: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "anchor"))
+    .concat(createOneIntegrationMiddleware("query", "anchor", "mock"))
     .input(anchorNotesListInputSchema)
     .query(async ({ ctx, input }) => {
-      const handler = anchorNotesListRequestHandler.handler(ctx.integration, { ...input, limit: input.limit ?? 50 });
+      if (ctx.integration.kind === "mock") {
+        const search = input.search?.toLowerCase();
+        const notes = mockWidgetData.anchorNotes.filter((note) => !search || note.title.toLowerCase().includes(search));
+        return notes.slice(0, input.limit ?? 50);
+      }
+
+      const handler = anchorNotesListRequestHandler.handler(
+        { ...ctx.integration, kind: "anchor" },
+        {
+          ...input,
+          limit: input.limit ?? 50,
+        },
+      );
 
       const { data } = await handler.getDataAsync();
 
       return data;
     }),
   getNote: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "anchor"))
+    .concat(createOneIntegrationMiddleware("query", "anchor", "mock"))
     .input(noteIdInput)
     .query(async ({ ctx, input }) => {
-      const handler = anchorNoteRequestHandler.handler(ctx.integration, { noteId: input.noteId });
+      if (ctx.integration.kind === "mock") {
+        assertMockNoteExists(input.noteId);
+        return mockWidgetData.anchorNote;
+      }
+
+      const handler = anchorNoteRequestHandler.handler(
+        { ...ctx.integration, kind: "anchor" },
+        { noteId: input.noteId },
+      );
 
       const { data } = await handler.getDataAsync();
 
       return data;
     }),
   updateNote: protectedProcedure
-    .concat(createOneIntegrationMiddleware("interact", "anchor"))
+    .concat(createOneIntegrationMiddleware("interact", "anchor", "mock"))
     .input(anchorNoteUpdateInputSchema)
     .mutation(async ({ ctx, input }) => {
-      const integrationInstance = await createIntegrationAsync(ctx.integration);
       const normalizedContent = normalizeAnchorContent(input.content);
       const isContentNormalized =
         input.content !== undefined && normalizedContent !== undefined && input.content !== normalizedContent;
 
+      if (ctx.integration.kind === "mock") {
+        assertMockNoteExists(input.noteId);
+        return {
+          ...mockWidgetData.anchorNote,
+          ...(input.title !== undefined ? { title: input.title } : {}),
+          ...(normalizedContent !== undefined ? { content: normalizedContent } : {}),
+        };
+      }
+
+      const integrationInstance = await createIntegrationAsync({ ...ctx.integration, kind: "anchor" });
+
       try {
         const updatedNote = await integrationInstance.updateNoteAsync({
           noteId: input.noteId,

packages/api/src/router/widgets/archive-team-warrior.ts

@@ -1,13 +1,18 @@
 import { archiveTeamWarriorRequestHandler } from "@homarr/request-handler/archive-team-warrior";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const archiveTeamWarriorRouter = createTRPCRouter({
   getStatus: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "archiveTeamWarrior"))
+    .concat(createOneIntegrationMiddleware("query", "archiveTeamWarrior", "mock"))
     .query(async ({ ctx }) => {
-      const handler = archiveTeamWarriorRequestHandler.handler(ctx.integration, {});
+      if (ctx.integration.kind === "mock") {
+        return { status: mockWidgetData.archiveTeamWarrior, updatedAt: new Date(mockWidgetData.timestamp) };
+      }
+
+      const handler = archiveTeamWarriorRequestHandler.handler({ ...ctx.integration, kind: "archiveTeamWarrior" }, {});
       const { data, timestamp } = await handler.getDataAsync();
 
       return {

packages/api/src/router/widgets/audio-stats.ts

@@ -1,14 +1,16 @@
 import { audiobookshelfRequestHandler } from "@homarr/request-handler/audiobookshelf";
 import { navidromeRequestHandler } from "@homarr/request-handler/navidrome";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const audioStatsRouter = createTRPCRouter({
   getStats: publicProcedure
-    .concat(createOneIntegrationMiddleware("query", "navidrome", "audiobookshelf"))
+    .concat(createOneIntegrationMiddleware("query", "navidrome", "audiobookshelf", "mock"))
     .query(async ({ ctx }) => {
       const { kind } = ctx.integration;
+      if (kind === "mock") return { kind: "navidrome" as const, data: mockWidgetData.audioStats };
 
       const fetchByKind = {
         navidrome: async () => {

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

@@ -1,4 +1,5 @@
 import { bazarrBadgesRequestHandler } from "@homarr/request-handler/bazarr";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
@@ -12,9 +13,11 @@ export const bazarrRouter = createTRPCRouter({
           "Get missing subtitle counts, provider issues, and health warnings for a Bazarr integration. REQUIRED: integrationId from integration_all",
       },
     })
-    .concat(createOneIntegrationMiddleware("query", "bazarr"))
+    .concat(createOneIntegrationMiddleware("query", "bazarr", "mock"))
     .query(async ({ ctx }) => {
-      const innerHandler = bazarrBadgesRequestHandler.handler(ctx.integration, {});
+      if (ctx.integration.kind === "mock") return mockWidgetData.bazarr;
+
+      const innerHandler = bazarrBadgesRequestHandler.handler({ ...ctx.integration, kind: "bazarr" }, {});
       const data = await innerHandler.getDataAsync();
       return data.data;
     }),

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

@@ -1,4 +1,5 @@
 import type { CoolifyInstanceInfo } from "@homarr/integrations/types";
+import { mockWidgetData } from "@homarr/integrations";
 import { coolifyRequestHandler } from "@homarr/request-handler/coolify";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
@@ -16,12 +17,22 @@ interface CoolifyInstanceResult {
 
 export const coolifyRouter = createTRPCRouter({
   getInstancesInfo: publicProcedure
-    .concat(createManyIntegrationMiddleware("query", "coolify"))
+    .concat(createManyIntegrationMiddleware("query", "coolify", "mock"))
     .query(async ({ ctx }) => {
       return await settleIntegrationQueries(
         ctx.integrations,
         async (integration): Promise<CoolifyInstanceResult> => {
-          const innerHandler = coolifyRequestHandler.handler(integration, {});
+          if (integration.kind === "mock") {
+            return {
+              integrationId: integration.id,
+              integrationName: integration.name,
+              integrationUrl: integration.url,
+              instanceInfo: mockWidgetData.coolify,
+              updatedAt: new Date(mockWidgetData.timestamp),
+            };
+          }
+
+          const innerHandler = coolifyRequestHandler.handler({ ...integration, kind: "coolify" }, {});
           const { data, timestamp } = await innerHandler.getDataAsync();
 
           return {

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

@@ -1,4 +1,6 @@
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
+import type { IntegrationKind } from "@homarr/definitions";
+import { mockWidgetData } from "@homarr/integrations";
 import {
   firewallCpuRequestHandler,
   firewallInterfacesRequestHandler,
@@ -10,29 +12,53 @@ import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
-const firewallMiddleware = createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("firewall"));
+const firewallMiddleware = createManyIntegrationMiddleware(
+  "query",
+  ...getIntegrationKindsByCategory("firewall"),
+  "mock",
+);
 
-const queryFirewall = <
-  THandler extends {
-    handler: (integration: any, input: any) => { getDataAsync: () => Promise<{ data: any; timestamp: Date }> };
+interface FirewallResult<TSummary> {
+  integration: { id: string; name: string; kind: IntegrationKind; updatedAt: Date };
+  summary: TSummary;
+  error?: string;
+}
+
+const queryFirewall = <TSummary>(
+  handler: {
+    handler: (
+      integration: any,
+      input: Record<string, never>,
+    ) => { getDataAsync: () => Promise<{ data: TSummary; timestamp: Date }> };
   },
->(
-  handler: THandler,
-  createFallback: () => Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
+  createFallback: () => TSummary,
+  getMockData: () => TSummary,
 ) =>
   publicProcedure.concat(firewallMiddleware).query(async ({ ctx }) =>
     settleIntegrationQueries(
       ctx.integrations,
-      async (integration) => {
-        const { data, timestamp } = await handler.handler(integration, {}).getDataAsync();
+      async (integration): Promise<FirewallResult<TSummary>> => {
+        if (integration.kind === "mock") {
+          return {
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: new Date(mockWidgetData.timestamp),
+            },
+            summary: getMockData(),
+            error: undefined,
+          };
+        }
+        const { data, timestamp } = await handler.handler({ ...integration, kind: "opnsense" }, {}).getDataAsync();
         return {
           integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: timestamp },
-          summary: data as Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
-          error: undefined as string | undefined,
+          summary: data,
+          error: undefined,
         };
       },
       {
-        fallback: (integration, error) => ({
+        fallback: (integration, error): FirewallResult<TSummary> => ({
           integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: new Date(0) },
           summary: createFallback(),
           error: toPublicIntegrationError(error),
@@ -43,8 +69,24 @@ const queryFirewall = <
   );
 
 export const firewallRouter = createTRPCRouter({
-  getFirewallCpuStatus: queryFirewall(firewallCpuRequestHandler, () => ({ total: 0 })),
-  getFirewallInterfacesStatus: queryFirewall(firewallInterfacesRequestHandler, () => []),
-  getFirewallVersionStatus: queryFirewall(firewallVersionRequestHandler, () => ({ version: "Unknown" })),
-  getFirewallMemoryStatus: queryFirewall(firewallMemoryRequestHandler, () => ({ used: 0, total: 0, percent: 0 })),
+  getFirewallCpuStatus: queryFirewall(
+    firewallCpuRequestHandler,
+    () => ({ total: 0 }),
+    () => mockWidgetData.firewallCpu,
+  ),
+  getFirewallInterfacesStatus: queryFirewall(
+    firewallInterfacesRequestHandler,
+    () => [],
+    () => mockWidgetData.firewallInterfaces,
+  ),
+  getFirewallVersionStatus: queryFirewall(
+    firewallVersionRequestHandler,
+    () => ({ version: "Unknown" }),
+    () => mockWidgetData.firewallVersion,
+  ),
+  getFirewallMemoryStatus: queryFirewall(
+    firewallMemoryRequestHandler,
+    () => ({ used: 0, total: 0, percent: 0 }),
+    () => mockWidgetData.firewallMemory,
+  ),
 });

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

@@ -1,6 +1,7 @@
 import { z } from "zod/v4";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
+import { mockWidgetData } from "@homarr/integrations";
 import {
   immichAlbumRequestHandler,
   immichAlbumsRequestHandler,
@@ -12,11 +13,12 @@ import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const createImmichIntegrationMiddleware = (action: IntegrationAction) =>
-  createOneIntegrationMiddleware(action, ...getIntegrationKindsByCategory("photoService"));
+  createOneIntegrationMiddleware(action, ...getIntegrationKindsByCategory("photoService"), "mock");
 
 export const immichRouter = createTRPCRouter({
   getServerStats: publicProcedure.concat(createImmichIntegrationMiddleware("query")).query(async ({ ctx }) => {
-    const innerHandler = immichStatsRequestHandler.handler(ctx.integration, {});
+    if (ctx.integration.kind === "mock") return mockWidgetData.immichStats;
+    const innerHandler = immichStatsRequestHandler.handler({ ...ctx.integration, kind: "immich" }, {});
     const data = await innerHandler.getDataAsync();
     return data.data;
   }),
@@ -29,7 +31,13 @@ export const immichRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      const innerHandler = immichAlbumRequestHandler.handler(ctx.integration, { albumId: input.albumId });
+      if (ctx.integration.kind === "mock") return mockWidgetData.immichAlbum;
+      const innerHandler = immichAlbumRequestHandler.handler(
+        { ...ctx.integration, kind: "immich" },
+        {
+          albumId: input.albumId,
+        },
+      );
       const data = await innerHandler.getDataAsync();
       return data.data;
     }),
@@ -42,7 +50,13 @@ export const immichRouter = createTRPCRouter({
     )
     .concat(createImmichIntegrationMiddleware("query"))
     .query(async ({ ctx, input }) => {
-      const innerHandler = immichAlbumsRequestHandler.handler(ctx.integration, { limit: input.limit });
+      if (ctx.integration.kind === "mock") return mockWidgetData.immichAlbums.slice(0, input.limit);
+      const innerHandler = immichAlbumsRequestHandler.handler(
+        { ...ctx.integration, kind: "immich" },
+        {
+          limit: input.limit,
+        },
+      );
       const data = await innerHandler.getDataAsync();
       return data.data;
     }),

packages/api/src/router/widgets/paperless-ngx.ts

@@ -1,12 +1,16 @@
 import { paperlessNgxStatsRequestHandler } from "@homarr/request-handler/paperless-ngx";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const paperlessNgxRouter = createTRPCRouter({
-  getStats: publicProcedure.concat(createOneIntegrationMiddleware("query", "paperlessNgx")).query(async ({ ctx }) => {
-    const innerHandler = paperlessNgxStatsRequestHandler.handler(ctx.integration, {});
-    const data = await innerHandler.getDataAsync();
-    return data.data;
-  }),
+  getStats: publicProcedure
+    .concat(createOneIntegrationMiddleware("query", "paperlessNgx", "mock"))
+    .query(async ({ ctx }) => {
+      if (ctx.integration.kind === "mock") return mockWidgetData.paperlessNgx;
+      const innerHandler = paperlessNgxStatsRequestHandler.handler({ ...ctx.integration, kind: "paperlessNgx" }, {});
+      const data = await innerHandler.getDataAsync();
+      return data.data;
+    }),
 });

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

@@ -1,4 +1,5 @@
 import { patchmonStatsRequestHandler } from "@homarr/request-handler/patchmon";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, protectedProcedure } from "../../trpc";
@@ -12,9 +13,10 @@ export const patchmonRouter = createTRPCRouter({
           "Get PatchMon host patch statistics including total hosts, hosts needing updates, security update counts, up-to-date hosts, outdated packages, repositories, and OS distribution. REQUIRED: integrationId (single PatchMon integration ID from integration_all). Requires authenticated session (API key or browser login) and integration query access.",
       },
     })
-    .concat(createOneIntegrationMiddleware("query", "patchmon"))
+    .concat(createOneIntegrationMiddleware("query", "patchmon", "mock"))
     .query(async ({ ctx }) => {
-      const innerHandler = patchmonStatsRequestHandler.handler(ctx.integration, {});
+      if (ctx.integration.kind === "mock") return mockWidgetData.patchmon;
+      const innerHandler = patchmonStatsRequestHandler.handler({ ...ctx.integration, kind: "patchmon" }, {});
       const { data } = await innerHandler.getDataAsync();
       return data;
     }),

packages/api/src/router/widgets/speedtest-tracker.ts

@@ -1,4 +1,5 @@
 import { speedtestTrackerRequestHandler } from "@homarr/request-handler/speedtest-tracker";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
@@ -6,12 +7,22 @@ import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const speedtestTrackerRouter = createTRPCRouter({
   getDashboard: publicProcedure
-    .concat(createManyIntegrationMiddleware("query", "speedtestTracker"))
+    .concat(createManyIntegrationMiddleware("query", "speedtestTracker", "mock"))
     .query(async ({ ctx }) => {
       return await settleIntegrationQueries(
         ctx.integrations,
         async (integration) => {
-          const innerHandler = speedtestTrackerRequestHandler.handler(integration, {});
+          if (integration.kind === "mock") {
+            return {
+              integrationId: integration.id,
+              integrationName: integration.name,
+              integrationUrl: integration.url,
+              dashboard: mockWidgetData.speedtestTracker,
+              updatedAt: new Date(mockWidgetData.timestamp),
+              error: undefined,
+            };
+          }
+          const innerHandler = speedtestTrackerRequestHandler.handler({ ...integration, kind: "speedtestTracker" }, {});
           const { data, timestamp } = await innerHandler.getDataAsync();
 
           return {

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

@@ -1,37 +1,50 @@
 import { tracearrRequestHandler } from "@homarr/request-handler/tracearr";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const tracearrRouter = createTRPCRouter({
-  getDashboard: publicProcedure.concat(createManyIntegrationMiddleware("query", "tracearr")).query(async ({ ctx }) => {
-    return await settleIntegrationQueries(
-      ctx.integrations,
-      async (integration) => {
-        const innerHandler = tracearrRequestHandler.handler(integration, {});
-        const { data, timestamp } = await innerHandler.getDataAsync();
+  getDashboard: publicProcedure
+    .concat(createManyIntegrationMiddleware("query", "tracearr", "mock"))
+    .query(async ({ ctx }) => {
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          if (integration.kind === "mock") {
+            return {
+              integrationId: integration.id,
+              integrationName: integration.name,
+              integrationUrl: integration.url,
+              dashboard: mockWidgetData.tracearr,
+              updatedAt: new Date(mockWidgetData.timestamp),
+              error: undefined,
+            };
+          }
+          const innerHandler = tracearrRequestHandler.handler({ ...integration, kind: "tracearr" }, {});
+          const { data, timestamp } = await innerHandler.getDataAsync();
 
-        return {
-          integrationId: integration.id,
-          integrationName: integration.name,
-          integrationUrl: integration.url,
-          dashboard: data as typeof data | null,
-          updatedAt: timestamp,
-          error: undefined as string | undefined,
-        };
-      },
-      {
-        fallback: (integration, error) => ({
-          integrationId: integration.id,
-          integrationName: integration.name,
-          integrationUrl: integration.url,
-          dashboard: null,
-          updatedAt: new Date(0),
-          error: toPublicIntegrationError(error),
-        }),
-        throwOnAllFailures: true,
-      },
-    );
-  }),
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationUrl: integration.url,
+            dashboard: data as typeof data | null,
+            updatedAt: timestamp,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationUrl: integration.url,
+            dashboard: null,
+            updatedAt: new Date(0),
+            error: toPublicIntegrationError(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
+    }),
 });

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

@@ -1,4 +1,5 @@
 import { traefikRequestHandler } from "@homarr/request-handler/traefik";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
@@ -13,12 +14,22 @@ export const traefikRouter = createTRPCRouter({
           "Retrieve Traefik dashboard data, including routers, services, middlewares, and entry points, for the given integration IDs.",
       },
     })
-    .concat(createManyIntegrationMiddleware("query", "traefik"))
+    .concat(createManyIntegrationMiddleware("query", "traefik", "mock"))
     .query(async ({ ctx }) => {
       return await settleIntegrationQueries(
         ctx.integrations,
         async (integration) => {
-          const innerHandler = traefikRequestHandler.handler(integration, {});
+          if (integration.kind === "mock") {
+            return {
+              integrationId: integration.id,
+              integrationName: integration.name,
+              integrationUrl: integration.url,
+              dashboard: mockWidgetData.traefik,
+              updatedAt: new Date(mockWidgetData.timestamp),
+              error: undefined,
+            };
+          }
+          const innerHandler = traefikRequestHandler.handler({ ...integration, kind: "traefik" }, {});
           const { data, timestamp } = await innerHandler.getDataAsync();
 
           return {

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

@@ -2,7 +2,7 @@ import { z } from "zod/v4";
 
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
-import { createIntegrationAsync } from "@homarr/integrations";
+import { createIntegrationAsync, mockWidgetData } from "@homarr/integrations";
 import {
   umamiActiveVisitorsRequestHandler,
   umamiEventNamesRequestHandler,
@@ -19,15 +19,18 @@ import { createTRPCRouter, publicProcedure } from "../../trpc";
 const logger = createLogger({ module: "umami-router" });
 
 export const umamiRouter = createTRPCRouter({
-  getWebsites: publicProcedure.concat(createOneIntegrationMiddleware("query", "umami")).query(async ({ ctx }) => {
-    try {
-      const instance = await createIntegrationAsync(ctx.integration);
-      return await instance.getWebsitesAsync();
-    } catch (error) {
-      logger.warn(new Error("Failed to load websites", { cause: error }));
-      return [];
-    }
-  }),
+  getWebsites: publicProcedure
+    .concat(createOneIntegrationMiddleware("query", "umami", "mock"))
+    .query(async ({ ctx }) => {
+      if (ctx.integration.kind === "mock") return mockWidgetData.umamiWebsites;
+      try {
+        const instance = await createIntegrationAsync({ ...ctx.integration, kind: "umami" });
+        return await instance.getWebsitesAsync();
+      } catch (error) {
+        logger.warn(new Error("Failed to load websites", { cause: error }));
+        return [];
+      }
+    }),
 
   getVisitorStats: publicProcedure
     .input(
@@ -37,14 +40,26 @@ export const umamiRouter = createTRPCRouter({
         eventName: z.string().optional(),
       }),
     )
-    .concat(createManyIntegrationMiddleware("query", "umami"))
+    .concat(createManyIntegrationMiddleware("query", "umami", "mock"))
     .query(async ({ ctx, input }) => {
       return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const innerHandler = umamiRequestHandler.handler(integration, {
-          websiteId: input.websiteId,
-          timeFrame: input.timeFrame,
-          eventName: input.eventName,
-        });
+        if (integration.kind === "mock") {
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationUrl: integration.url,
+            visitorStats: { ...mockWidgetData.umamiVisitorStats, timeFrame: input.timeFrame },
+            updatedAt: new Date(mockWidgetData.timestamp),
+          };
+        }
+        const innerHandler = umamiRequestHandler.handler(
+          { ...integration, kind: "umami" },
+          {
+            websiteId: input.websiteId,
+            timeFrame: input.timeFrame,
+            eventName: input.eventName,
+          },
+        );
         const { data, timestamp } = await innerHandler.getDataAsync();
 
         return {
@@ -59,10 +74,16 @@ export const umamiRouter = createTRPCRouter({
 
   getEventNames: publicProcedure
     .input(z.object({ websiteId: z.string() }))
-    .concat(createOneIntegrationMiddleware("query", "umami"))
+    .concat(createOneIntegrationMiddleware("query", "umami", "mock"))
     .query(async ({ ctx, input }) => {
+      if (ctx.integration.kind === "mock") return mockWidgetData.umamiEventNames;
       try {
-        const innerHandler = umamiEventNamesRequestHandler.handler(ctx.integration, { websiteId: input.websiteId });
+        const innerHandler = umamiEventNamesRequestHandler.handler(
+          { ...ctx.integration, kind: "umami" },
+          {
+            websiteId: input.websiteId,
+          },
+        );
         const { data } = await innerHandler.getDataAsync();
         return data;
       } catch (error) {
@@ -81,14 +102,18 @@ export const umamiRouter = createTRPCRouter({
         limit: z.number().int().min(1).max(500),
       }),
     )
-    .concat(createOneIntegrationMiddleware("query", "umami"))
+    .concat(createOneIntegrationMiddleware("query", "umami", "mock"))
     .query(async ({ ctx, input }) => {
+      if (ctx.integration.kind === "mock") return mockWidgetData.umamiTopPages.slice(0, input.limit);
       try {
-        const innerHandler = umamiTopPagesRequestHandler.handler(ctx.integration, {
-          websiteId: input.websiteId,
-          timeFrame: input.timeFrame,
-          limit: input.limit,
-        });
+        const innerHandler = umamiTopPagesRequestHandler.handler(
+          { ...ctx.integration, kind: "umami" },
+          {
+            websiteId: input.websiteId,
+            timeFrame: input.timeFrame,
+            limit: input.limit,
+          },
+        );
         const { data } = await innerHandler.getDataAsync();
         return data;
       } catch (error) {
@@ -111,14 +136,18 @@ export const umamiRouter = createTRPCRouter({
         limit: z.number().int().min(1).max(500),
       }),
     )
-    .concat(createOneIntegrationMiddleware("query", "umami"))
+    .concat(createOneIntegrationMiddleware("query", "umami", "mock"))
     .query(async ({ ctx, input }) => {
+      if (ctx.integration.kind === "mock") return mockWidgetData.umamiTopReferrers.slice(0, input.limit);
       try {
-        const innerHandler = umamiTopReferrersRequestHandler.handler(ctx.integration, {
-          websiteId: input.websiteId,
-          timeFrame: input.timeFrame,
-          limit: input.limit,
-        });
+        const innerHandler = umamiTopReferrersRequestHandler.handler(
+          { ...ctx.integration, kind: "umami" },
+          {
+            websiteId: input.websiteId,
+            timeFrame: input.timeFrame,
+            limit: input.limit,
+          },
+        );
         const { data } = await innerHandler.getDataAsync();
         return data;
       } catch (error) {
@@ -141,15 +170,21 @@ export const umamiRouter = createTRPCRouter({
         eventNames: z.array(z.string()),
       }),
     )
-    .concat(createOneIntegrationMiddleware("query", "umami"))
+    .concat(createOneIntegrationMiddleware("query", "umami", "mock"))
     .query(async ({ ctx, input }) => {
+      if (ctx.integration.kind === "mock") {
+        return mockWidgetData.umamiEventSeries.filter((series) => input.eventNames.includes(series.eventName));
+      }
       try {
         const sortedNames = [...input.eventNames].toSorted();
-        const innerHandler = umamiMultiEventRequestHandler.handler(ctx.integration, {
-          websiteId: input.websiteId,
-          timeFrame: input.timeFrame,
-          eventNames: sortedNames,
-        });
+        const innerHandler = umamiMultiEventRequestHandler.handler(
+          { ...ctx.integration, kind: "umami" },
+          {
+            websiteId: input.websiteId,
+            timeFrame: input.timeFrame,
+            eventNames: sortedNames,
+          },
+        );
         const { data } = await innerHandler.getDataAsync();
         return data;
       } catch (error) {
@@ -166,12 +201,16 @@ export const umamiRouter = createTRPCRouter({
 
   getActiveVisitors: publicProcedure
     .input(z.object({ websiteId: z.string() }))
-    .concat(createOneIntegrationMiddleware("query", "umami"))
+    .concat(createOneIntegrationMiddleware("query", "umami", "mock"))
     .query(async ({ ctx, input }) => {
+      if (ctx.integration.kind === "mock") return 7;
       try {
-        const innerHandler = umamiActiveVisitorsRequestHandler.handler(ctx.integration, {
-          websiteId: input.websiteId,
-        });
+        const innerHandler = umamiActiveVisitorsRequestHandler.handler(
+          { ...ctx.integration, kind: "umami" },
+          {
+            websiteId: input.websiteId,
+          },
+        );
         const { data } = await innerHandler.getDataAsync();
         return data;
       } catch (error) {

packages/api/src/router/widgets/uptime-kuma.ts

@@ -1,4 +1,5 @@
 import { uptimeKumaRequestHandler } from "@homarr/request-handler/uptime-kuma";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
@@ -6,12 +7,22 @@ import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const uptimeKumaRouter = createTRPCRouter({
   getDashboard: publicProcedure
-    .concat(createManyIntegrationMiddleware("query", "uptimeKuma"))
+    .concat(createManyIntegrationMiddleware("query", "uptimeKuma", "mock"))
     .query(async ({ ctx }) => {
       return await settleIntegrationQueries(
         ctx.integrations,
         async (integration) => {
-          const innerHandler = uptimeKumaRequestHandler.handler(integration, {});
+          if (integration.kind === "mock") {
+            return {
+              integrationId: integration.id,
+              integrationName: integration.name,
+              integrationUrl: integration.url,
+              dashboard: mockWidgetData.uptimeKuma,
+              updatedAt: new Date(mockWidgetData.timestamp),
+              error: undefined,
+            };
+          }
+          const innerHandler = uptimeKumaRequestHandler.handler({ ...integration, kind: "uptimeKuma" }, {});
           const { data, timestamp } = await innerHandler.getDataAsync();
 
           return {

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

@@ -1,18 +1,41 @@
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
+import type { IntegrationKind } from "@homarr/definitions";
+import { mockWidgetData } from "@homarr/integrations";
+import type { VpnSummary } from "@homarr/integrations/types";
 import { vpnSummaryHandler } from "@homarr/request-handler/vpn";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
+interface VpnResult {
+  integration: { id: string; name: string; kind: IntegrationKind; updatedAt: Date };
+  summary: VpnSummary | null;
+  error?: string;
+}
+
 export const vpnRouter = createTRPCRouter({
   getSummaries: publicProcedure
-    .unstable_concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("vpn")))
+    .unstable_concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("vpn"), "mock"))
     .query(async ({ ctx }) => {
       return await settleIntegrationQueries(
         ctx.integrations,
-        async (integration) => {
-          const { data, timestamp } = await vpnSummaryHandler.handler(integration, {}).getDataAsync();
+        async (integration): Promise<VpnResult> => {
+          if (integration.kind === "mock") {
+            return {
+              integration: {
+                id: integration.id,
+                name: integration.name,
+                kind: integration.kind,
+                updatedAt: new Date(mockWidgetData.timestamp),
+              },
+              summary: mockWidgetData.vpn,
+              error: undefined,
+            };
+          }
+          const { data, timestamp } = await vpnSummaryHandler
+            .handler({ ...integration, kind: "gluetun" }, {})
+            .getDataAsync();
           return {
             integration: {
               id: integration.id,
@@ -25,7 +48,7 @@ export const vpnRouter = createTRPCRouter({
           };
         },
         {
-          fallback: (integration, error) => ({
+          fallback: (integration, error): VpnResult => ({
             integration: {
               id: integration.id,
               name: integration.name,

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

@@ -1,4 +1,5 @@
 import { wudStatsRequestHandler } from "@homarr/request-handler/wud";
+import { mockWidgetData } from "@homarr/integrations";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
@@ -9,12 +10,15 @@ export const wudRouter = createTRPCRouter({
       mcp: {
         enabled: true,
         description:
-          "Returns monitored-container counts and available updates from a What's Up Docker integration. REQUIRED: integrationId from integration_all. The caller needs query permission for that integration.",
+          "Returns monitored-container counts and available updates from a What's Up Docker integration, or mock statistics from a mock integration. REQUIRED: integrationId from integration_all. The caller needs query permission for that integration.",
       },
     })
-    .concat(createOneIntegrationMiddleware("query", "wud"))
+    .concat(createOneIntegrationMiddleware("query", "wud", "mock"))
     .query(async ({ ctx }) => {
-      const handler = wudStatsRequestHandler.handler(ctx.integration, {});
+      if (ctx.integration.kind === "mock") {
+        return { stats: mockWidgetData.wud, updatedAt: new Date(mockWidgetData.timestamp) };
+      }
+      const handler = wudStatsRequestHandler.handler({ ...ctx.integration, kind: "wud" }, {});
       const { data, timestamp } = await handler.getDataAsync();
 
       return {