refactor(widgets): use shared relative time hook

- Add fallbackToStaleOnError option to createRequestHandler to serve
  stale cached data when upstream APIs fail transiently
- Set cacheTtlMs: 60_000 and fallbackToStaleOnError: true on
  mediaRequestListRequestHandler to restore pre-v1.69.0 cache duration
- Add response.ok check in OverseerrIntegration.getItemInformationAsync
- Change Promise.all to Promise.allSettled in getRequestsAsync so a
  single failing media detail fetch skips that item instead of crashing
- Replace WidgetCacheAge with WidgetQueryStatus in the right-click
  context menu, showing error/success/loading state with age and
  error message tooltip

Fixes #6329

.github/workflows/autofix.yml

@@ -23,6 +23,7 @@ jobs:
         with:
           fetch-depth: 0
           ref: ${{ github.head_ref }}
+          persist-credentials: false
 
       - name: Setup
         uses: ./tooling/github/setup

apps/docs/package.json

@@ -43,7 +43,7 @@
     "random-word-slugs": "^0.1.7",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "swiper": "^14.0.5",
+    "swiper": "^14.0.2",
     "tailwindcss": "^4.3.2"
   },
   "devDependencies": {

apps/nextjs/src/components/board/items/widget-context-menu.tsx

@@ -1,9 +1,17 @@
 "use client";
 
 import type { MutableRefObject, ReactNode } from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Group, Loader, Menu, Switch, Text } from "@mantine/core";
-import { IconCopy, IconLayoutKanban, IconRefresh, IconSettings, IconTrash } from "@tabler/icons-react";
+import { useCallback, useMemo } from "react";
+import { Group, Loader, Menu, Switch, Text, Tooltip } from "@mantine/core";
+import {
+  IconAlertTriangle,
+  IconCircleCheck,
+  IconCopy,
+  IconLayoutKanban,
+  IconRefresh,
+  IconSettings,
+  IconTrash,
+} from "@tabler/icons-react";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
 import { useIsFetching, useQueryClient } from "@tanstack/react-query";
 
@@ -11,10 +19,12 @@ import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
+import { useTimeAgo } from "@homarr/common";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { TranslationFunction } from "@homarr/translation";
 import type { WidgetContextMenuAction } from "@homarr/widgets";
 import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";
@@ -232,11 +242,14 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
             onClick={handleRefetch}
             disabled={isWidgetFetching}
           >
-            <Group justify="space-between" wrap="nowrap">
+            <Group justify="space-between" wrap="nowrap" gap="sm">
               {tMenu("refresh")}
-              <Text size="xs" c="dimmed">
-                <WidgetCacheAge queryClient={queryClient} queryKey={widgetQueryKey} isFetching={isWidgetFetching} />
-              </Text>
+              <WidgetQueryStatus
+                queryClient={queryClient}
+                queryKey={widgetQueryKey}
+                isFetching={isWidgetFetching}
+                t={t}
+              />
             </Group>
           </Menu.Item>
           <Menu.Item
@@ -273,34 +286,65 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
   );
 };
 
-const WidgetCacheAge = ({
-  queryClient,
-  queryKey,
-  isFetching,
-}: {
+interface WidgetQueryStatusProps {
   queryClient: QueryClient;
   queryKey: QueryKey;
   isFetching: boolean;
-}) => {
-  // 1s tick for "just now" → "1s ago" label transition; isFetching prop handles refetch reactivity
-  const [, setTick] = useState(0);
-  useEffect(() => {
-    const id = setInterval(() => setTick((n) => n + 1), 1000);
-    return () => clearInterval(id);
-  }, []);
+  t: TranslationFunction;
+}
 
-  if (isFetching) return <Loader size={12} />;
+const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQueryStatusProps) => {
+  const queries = queryClient.getQueryCache().findAll({ queryKey });
+  const timestamps = queries.map((query) => query.state.dataUpdatedAt).filter(Boolean);
+  const latest = timestamps.length > 0 ? Math.max(...timestamps) : 0;
+  const ageLabel = useTimeAgo(new Date(latest));
 
-  const timestamps = queryClient
-    .getQueryCache()
-    .findAll({ queryKey })
-    .map((q) => q.state.dataUpdatedAt)
-    .filter(Boolean);
-  if (timestamps.length === 0) return null;
+  if (isFetching) {
+    return (
+      <Group gap={4} wrap="nowrap">
+        <Loader size={12} />
+        <Text size="xs" c="dimmed">
+          {t("item.menu.status.loading")}
+        </Text>
+      </Group>
+    );
+  }
 
-  const latest = Math.max(...timestamps);
-  const seconds = Math.floor((Date.now() - latest) / 1000);
-  if (seconds < 5) return "just now";
-  if (seconds < 60) return `${seconds}s ago`;
-  return `${Math.floor(seconds / 60)}m ago`;
+  if (queries.length === 0) {
+    return (
+      <Text size="xs" c="dimmed">
+        {t("item.menu.status.idle")}
+      </Text>
+    );
+  }
+
+  const hasError = queries.some((q) => q.state.status === "error");
+
+  if (hasError) {
+    const errorQuery = queries.find((q) => q.state.status === "error");
+    const errorMessage =
+      errorQuery?.state.error instanceof Error
+        ? errorQuery.state.error.message
+        : String(errorQuery?.state.error ?? "Unknown error");
+
+    return (
+      <Tooltip label={errorMessage} multiline position="left" w={250}>
+        <Group gap={4} wrap="nowrap">
+          <IconAlertTriangle size={12} color="var(--mantine-color-red-6)" />
+          <Text size="xs" c="red.6">
+            {t("item.menu.status.error")} · {ageLabel}
+          </Text>
+        </Group>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Group gap={4} wrap="nowrap">
+      <IconCircleCheck size={12} color="var(--mantine-color-green-6)" />
+      <Text size="xs" c="dimmed">
+        {t("item.menu.status.success")} · {ageLabel}
+      </Text>
+    </Group>
+  );
 };

deployments/prebuilt-debian/package.json

@@ -6,7 +6,7 @@
   },
   "engines": {
     "node": ">=24.18.0",
-    "pnpm": ">=11.11.0"
+    "pnpm": ">=11.10.0"
   },
-  "packageManager": "pnpm@11.11.0"
+  "packageManager": "pnpm@11.10.0"
 }

package.json

@@ -69,7 +69,7 @@
   },
   "engines": {
     "node": ">=24.18.0",
-    "pnpm": ">=11.11.0"
+    "pnpm": ">=11.10.0"
   },
-  "packageManager": "pnpm@11.11.0"
+  "packageManager": "pnpm@11.10.0"
 }

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

@@ -153,9 +153,9 @@ export class OverseerrIntegration
       );
     } else if (pendingResults.length > 0) requests = pendingResults;
     else if (allResults.length > 0) requests = allResults;
-    else return Promise.all([]);
+    else return [];
 
-    return await Promise.all(
+    const settled = await Promise.allSettled(
       requests.map(async (request): Promise<MediaRequest> => {
         const information = await this.getItemInformationAsync(request.media.tmdbId, request.type);
 
@@ -184,6 +184,10 @@ export class OverseerrIntegration
         };
       }),
     );
+
+    return settled
+      .filter((result): result is PromiseFulfilledResult<MediaRequest> => result.status === "fulfilled")
+      .map((result) => result.value);
   }
 
   protected mapRequestStatus(status: UpstreamMediaRequestStatus): MediaRequestStatus {
@@ -301,6 +305,10 @@ export class OverseerrIntegration
       },
     });
 
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${type} information for id ${id}: ${response.status} ${response.statusText}`);
+    }
+
     if (type === "tv") {
       const series = (await response.json()) as TvInformation;
       return {

packages/request-handler/src/lib/integration-request-handler.ts

@@ -13,6 +13,7 @@ type IntegrationOfKind<TKind extends IntegrationKind> = Omit<Integration, "kind"
 interface Options<TData, TKind extends IntegrationKind, TInput extends Record<string, unknown>> {
   requestAsync: (integration: IntegrationOfKind<TKind>, input: TInput) => Promise<TData>;
   cacheTtlMs?: number;
+  fallbackToStaleOnError?: boolean;
 }
 
 export const createIntegrationRequestHandler = <
@@ -32,6 +33,7 @@ export const createIntegrationRequestHandler = <
       return options.requestAsync(integration, input.options);
     },
     cacheTtlMs: options.cacheTtlMs,
+    fallbackToStaleOnError: options.fallbackToStaleOnError,
   });
 
   return {

packages/request-handler/src/lib/request-handler.ts

@@ -1,6 +1,7 @@
 interface Options<TData, TInput extends Record<string, unknown>> {
   requestAsync: (input: TInput) => Promise<TData>;
   cacheTtlMs?: number;
+  fallbackToStaleOnError?: boolean;
 }
 
 type CacheEntry<TData> = { data: TData; timestamp: Date; expiresAt: number };
@@ -35,7 +36,6 @@ export const createRequestHandler = <TData, TInput extends Record<string, unknow
         if (cached && Date.now() < cached.expiresAt) {
           return { data: cached.data, timestamp: cached.timestamp };
         }
-        if (cached) cache.delete(key);
 
         const existing = inflight.get(key);
         if (existing) return existing;
@@ -55,6 +55,9 @@ export const createRequestHandler = <TData, TInput extends Record<string, unknow
           })
           .catch((err) => {
             inflight.delete(key);
+            if (options.fallbackToStaleOnError && cached) {
+              return cached;
+            }
             throw err;
           });
 

packages/request-handler/src/media-request-list.ts

@@ -13,4 +13,6 @@ export const mediaRequestListRequestHandler = createIntegrationRequestHandler<
     const integrationInstance = await createIntegrationAsync(integration);
     return await integrationInstance.getRequestsAsync();
   },
+  cacheTtlMs: 60_000,
+  fallbackToStaleOnError: true,
 });

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

@@ -1598,10 +1598,16 @@
     },
     "menu": {
       "label": {
-        "settings": "Settings",
+        "settings": "",
         "refresh": "",
         "options": "",
         "actions": ""
+      },
+      "status": {
+        "success": "",
+        "error": "",
+        "loading": "",
+        "idle": ""
       }
     },
     "create": {

packages/translation/src/lang/en.json

@@ -1622,6 +1622,12 @@
         "refresh": "Refresh",
         "options": "Options",
         "actions": "Actions"
+      },
+      "status": {
+        "success": "OK",
+        "error": "Error",
+        "loading": "Loading",
+        "idle": "Idle"
       }
     },
     "create": {

pnpm-lock.yaml

@@ -442,8 +442,8 @@ catalogs:
       specifier: ^1.18.0
       version: 1.18.0
     posthog-js:
-      specifier: ^1.399.1
-      version: 1.399.2
+      specifier: ^1.399.0
+      version: 1.399.0
     posthog-node:
       specifier: ^5.40.0
       version: 5.41.0
@@ -743,8 +743,8 @@ importers:
         specifier: 'catalog:'
         version: 19.2.7(react@19.2.7)
       swiper:
-        specifier: ^14.0.5
-        version: 14.0.5
+        specifier: ^14.0.2
+        version: 14.0.2
       tailwindcss:
         specifier: ^4.3.2
         version: 4.3.2
@@ -1012,7 +1012,7 @@ importers:
         version: 1.18.0(postcss@8.5.16)
       posthog-js:
         specifier: 'catalog:'
-        version: 1.399.2(preact-render-to-string@6.5.11)
+        version: 1.399.0(preact-render-to-string@6.5.11)
       prismjs:
         specifier: 'catalog:'
         version: 1.30.0
@@ -6404,6 +6404,9 @@ packages:
   '@polka/url@1.0.0-next.25':
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
 
+  '@posthog/core@1.40.0':
+    resolution: {integrity: sha512-oGDbIwlTquNwdHbEL5ZLEkuW4UFkkEanfx3QAxDgyVbISv+OAA6YGQwrvo0JD3MUJEbJZvyh8XsX+WYDGw9XHw==}
+
   '@posthog/core@1.40.2':
     resolution: {integrity: sha512-H12j7O9iHGvpK9t2ko8W4pvfbV1pBDxrsWC1LA6yp2RhzwvC4T3sWhu+AekDQJSRSrJEWlB0t/Ueq9QhPSq7FQ==}
 
@@ -13136,8 +13139,8 @@ packages:
     resolution: {integrity: sha512-Ray65LYEJrMMqDtsBUBXunEVP/g4wtATvq/xz9rchUoLy/9mSkkFgUko/8DVtGxgiP3vivpFMgfb9HpCuDrBHg==}
     engines: {node: '>=10.15.1'}
 
-  posthog-js@1.399.2:
-    resolution: {integrity: sha512-xcvrGEgUYtIVcWPRlVfc/NkMo0IP9nwnM/dzJIAzjDOSewkdDk/9T4Vz1+gooEhXdQCPfG44jSK95mVJsoySqA==}
+  posthog-js@1.399.0:
+    resolution: {integrity: sha512-8l+uZJZM3+OAc0D0+iLBMDRVfWF9s26Rt0jv8EC3kMJcA/9oyOets0zDgqIZk2TTfUs3H96ycLE6Lwj1wWG16Q==}
 
   posthog-node@5.41.0:
     resolution: {integrity: sha512-jOkX6THOr5WD+FGUEaTxekas8c7NOC3TqJ2Byfe2KMimQdL/F/osz17uSbkNzR4V9WFZoe8YaGP3Xp0EUpPKGg==}
@@ -14306,8 +14309,8 @@ packages:
       '@swc/core': ^1.2.147
       webpack: '>=2'
 
-  swiper@14.0.5:
-    resolution: {integrity: sha512-SMSKS0sj+lPIFzngfIKb5cyBtzmAuJw7rXgXdyYiDReb+pSpJXuNljHYgT4DXa5Stnl2Ew2/Lam5ipv4PIqZ7A==}
+  swiper@14.0.2:
+    resolution: {integrity: sha512-KRFQZP0zXUh6MEmSQOJKSw27ARqS884OX/dfBz4i2/It9aixL7svh7/Ng0yZ0FE+PrjrW5vzBcjCfmNnq109XQ==}
     engines: {node: '>= 4.7.0'}
 
   swrv@1.2.0:
@@ -19904,6 +19907,10 @@ snapshots:
 
   '@polka/url@1.0.0-next.25': {}
 
+  '@posthog/core@1.40.0':
+    dependencies:
+      '@posthog/types': 1.393.0
+
   '@posthog/core@1.40.2':
     dependencies:
       '@posthog/types': 1.393.0
@@ -27467,9 +27474,9 @@ snapshots:
 
   posthog-docusaurus@2.0.5: {}
 
-  posthog-js@1.399.2(preact-render-to-string@6.5.11):
+  posthog-js@1.399.0(preact-render-to-string@6.5.11):
     dependencies:
-      '@posthog/core': 1.40.2
+      '@posthog/core': 1.40.0
       '@posthog/types': 1.393.0
       core-js: 3.49.0
       dompurify: 3.4.11
@@ -28973,7 +28980,7 @@ snapshots:
       '@swc/counter': 0.1.3
       webpack: 5.107.1(@swc/core@1.15.3(@swc/helpers@0.5.15))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)
 
-  swiper@14.0.5: {}
+  swiper@14.0.2: {}
 
   swrv@1.2.0(vue@3.5.35(@typescript/typescript6@6.0.2)):
     dependencies:

pnpm-workspace.yaml

@@ -93,7 +93,7 @@ catalog:
   "@types/video.js": ^7.3.58
   "@types/ws": ^8.18.1
   "@types/xml2js": ^0.4.14
-  posthog-js: ^1.399.1
+  posthog-js: ^1.399.0
   posthog-node: ^5.40.0
   "@vitejs/plugin-react": ^6.0.3
   "@vitest/coverage-v8": ^4.1.10