@antelopejs/dms 0.8.3 → 0.9.1

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecuritySessions.vue

@@ -23,6 +23,12 @@ interface SessionInfo {
   isCurrent: boolean;
 }
 
+/** The sessions, and when they were read: what "active 5 minutes ago" counts from. */
+interface SessionsRead {
+  sessions: SessionInfo[];
+  readAt: number;
+}
+
 interface SessionsRevokedResponse {
   count: number;
   sessionHandoff?: SessionHandoff;
@@ -47,10 +53,25 @@ const adoptSessionHandoff = useSessionHandoff();
 const { overview, refresh: refreshOverview } = useSecurityOverview();
 const { formatDate, formatRelative, errorMessage } = useSecurityFormat();
 
-const isLoading = ref(true);
-// The list could not be loaded: shown as such, never as "no sessions".
-const hasLoadError = ref(false);
-const sessions = ref<SessionInfo[]>([]);
+// Read with the page: the server renders the list and hands it over, and
+// the browser says "active 5 minutes ago" as of the same read.
+const list = useApiData<SessionsRead>(SESSIONS_URL, {
+  transform: (sessions) => ({
+    sessions: sessions as SessionInfo[],
+    readAt: Date.now(),
+  }),
+});
+const sessions = computed(() => list.data.value?.sessions ?? []);
+const readAt = computed(() => list.data.value?.readAt);
+// The list could not be loaded: shown as such, never as "no sessions". A
+// failed reload keeps the list on screen.
+const hasLoadError = computed(
+  () =>
+    !list.data.value &&
+    !!list.error.value &&
+    list.status.value !== "pending",
+);
+const isLoading = computed(() => !list.data.value && !hasLoadError.value);
 const revokingId = ref<string | null>(null);
 const isConfirmOpen = ref(false);
 const isSigningOutOthers = ref(false);
@@ -73,18 +94,17 @@ const sessionName = (session: SessionInfo): string =>
 const sessionPlace = (session: SessionInfo): string =>
   session.location || t("page.settings.sessions.unknown_location");
 
-async function fetchSessions(): Promise<void> {
-  sessions.value = await $authFetch<SessionInfo[]>(SESSIONS_URL);
-  hasLoadError.value = false;
-}
+const fetchSessions = (): Promise<void> => list.refresh({ dedupe: "defer" });
 
 async function revoke(session: SessionInfo): Promise<void> {
   revokingId.value = session._id;
   try {
     await $authFetch(`${SESSIONS_URL}/${session._id}`, { method: "DELETE" });
-    sessions.value = sessions.value.filter(
-      (entry) => entry._id !== session._id,
-    );
+    if (list.data.value)
+      list.data.value = {
+        ...list.data.value,
+        sessions: sessions.value.filter((entry) => entry._id !== session._id),
+      };
     toast.add({ title: t("page.settings.sessions.revoked"), color: "success" });
     await refreshOverview();
   } catch (error) {
@@ -131,34 +151,21 @@ watch(
   () => overview.value?.activeSessions,
   (count, previous) => {
     if (previous !== undefined && count !== sessions.value.length) {
-      // A failed reload keeps the list on screen.
-      fetchSessions().catch(() => {});
+      void fetchSessions();
     }
   },
 );
 
-async function loadSessions(): Promise<void> {
-  isLoading.value = true;
-  try {
-    await fetchSessions();
-  } catch {
-    hasLoadError.value = true;
-  } finally {
-    isLoading.value = false;
-  }
-}
-
 const retryActions = computed(() => [
   {
     label: t("dms.table.load_error_retry"),
     icon: "i-ph-arrows-clockwise",
     color: "neutral" as const,
     variant: "outline" as const,
-    onClick: () => void loadSessions(),
+    onClick: () => void fetchSessions(),
   },
 ]);
 
-onMounted(loadSessions);
 </script>
 
 <template>
@@ -249,7 +256,7 @@ onMounted(loadSessions);
           <span v-else>
             {{
               t("page.settings.security.sessions.active_ago", {
-                time: formatRelative(session.lastActiveAt),
+                time: formatRelative(session.lastActiveAt, readAt),
               })
             }}
           </span>
@@ -323,7 +330,7 @@ onMounted(loadSessions);
                 {{
                   session.isCurrent
                     ? t("page.settings.security.sessions.active_now_lower")
-                    : formatRelative(session.lastActiveAt)
+                    : formatRelative(session.lastActiveAt, readAt)
                 }}
               </small>
             </span>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityStatus.vue

@@ -152,7 +152,6 @@ const retryActions = computed(() => [
   },
 ]);
 
-onMounted(refresh);
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityTwoFactor.vue

@@ -73,7 +73,7 @@ const { formatDate, errorMessage } = useSecurityFormat();
 const isProcessing = ref(false);
 const isTotpOpen = ref(false);
 const totpSetup = ref<TotpSetup | null>(null);
-const { user } = useUserSession<User>();
+const { user } = useDmsUserSession<User>();
 const {
   codes,
   isRegenerated,

package/frontend-vue/layers/dms-layout/app/build/composables/dev-reload/useDevReloadHolder.ts

@@ -256,7 +256,8 @@ async function awaitRoute(
   }
 
   // Deadline spent waiting on someone else's pass.
-  if (state.refreshing || deps.now() >= deadline) return deps.isRouteKnown(path);
+  if (state.refreshing || deps.now() >= deadline)
+    return deps.isRouteKnown(path);
 
   const committed = await runRefresh(state, path, deadline);
   // A trailing re-run booked over ours may be the one that brought the route
@@ -293,14 +294,14 @@ export function createDevReloadCoordinator(
 // has been (re)committed for the current route. Kept separate from the layout
 // commit so the commit can stay atomic with its route check (see
 // probeAndCommitRoute) — the 404-prone part was committing the layout, not this.
-async function postLayoutRefresh(currentRoutePath: string): Promise<void> {
+// The page layouts reload with the layout commit, which empties their cache:
+// no async data key holds them.
+async function postLayoutRefresh(): Promise<void> {
   const permissions = usePermissions();
   // fetchPermissions() refetches and swaps the set atomically, so there is no
   // need to clear() first — clearing would briefly empty permissions and flash
   // permission-gated UI.
   await permissions.fetchPermissions();
-  await refreshDmsData(currentRoutePath);
-  await refreshDmsData(`layout-${currentRoutePath}`);
 }
 
 interface DevReloadHolder {
@@ -326,7 +327,7 @@ export function useDevReloadHolder(): DevReloadHolder {
   const reloading = import.meta.env.DEV ? useDevReloading() : ref(false);
   const siteLayout = useSiteLayout();
   const router = useDmsRouter();
-  const currentError = useError();
+  const currentError = useDmsError();
 
   const coordinator = createDevReloadCoordinator({
     isDev: import.meta.env.DEV,
@@ -343,7 +344,7 @@ export function useDevReloadHolder(): DevReloadHolder {
       if (router.currentRoute.value.path !== recoveredPath) return;
       const err = currentError.value;
       if (!err || err.statusCode !== HTTP_NOT_FOUND) return;
-      void clearError();
+      void clearDmsError();
     },
     setReloading: (value) => {
       reloading.value = value;

package/frontend-vue/layers/dms-layout/app/build/composables/layout/sidePanelState.ts

@@ -172,7 +172,7 @@ export function useActiveSidePanel(): ActiveSidePanel {
   const { panels } = useAppSidePanels();
   const preferences = useSidePanelPreferences();
   const dragWidth = useSidePanelDragWidth();
-  const { loggedIn } = useUserSession();
+  const { loggedIn } = useDmsUserSession();
   const panel = computed(() => {
     if (!loggedIn.value) return null;
     const { openId } = readSidePanelPreferences(preferences.value);

package/frontend-vue/layers/dms-layout/app/build/composables/navigation/useVisitNavBadges.ts

@@ -0,0 +1,26 @@
+import { watch } from "vue";
+import { useDmsInertiaPage } from "#dms/frontend-module";
+import {
+  type CountedNavBadge,
+  useNavBadges,
+} from "#dms-ui/app/build/composables/navigation/useNavBadges";
+
+interface CountedPage {
+  navBadges?: Record<string, CountedNavBadge>;
+}
+
+/**
+ * Draws the navigation badges each page visit carries (`navBadges`): they
+ * are counted for the visit and travel with the page, not with the site
+ * layout a browser keeps for minutes. The dashboard frame calls it, so the
+ * server render draws them as the browser does.
+ */
+export function useVisitNavBadges(): void {
+  const inertiaPage = useDmsInertiaPage();
+  const { applyCountedNavBadges } = useNavBadges();
+  watch(
+    () => (inertiaPage.props.page as CountedPage | undefined)?.navBadges,
+    applyCountedNavBadges,
+    { immediate: true },
+  );
+}

package/frontend-vue/layers/dms-layout/app/build/composables/notification/useNotificationCatalog.ts

@@ -1,3 +1,4 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 export type NotificationTogglePermission = "allowed" | "forbidden" | "default";
 
 export interface NotificationCategory {
@@ -32,34 +33,34 @@ export const buildPreferenceKey = (categoryId: string, subjectId: string) =>
 export const subjectPreferenceKey = (subject: NotificationSubject) =>
   buildPreferenceKey(subject.category.id, subject.id);
 
+const CATALOG_URL = pageRoutePath(
+  "/settings/user/notifications",
+  "/categories",
+);
+
+/** Whether a read has answered with a failure, and no retry is running. */
+export const hasFailed = (read: ApiDataResult<unknown>): boolean =>
+  !!read.error.value && read.status.value !== "pending";
+
 /**
- * The registered notification categories and subjects, loaded once and
- * shared by the preferences matrix and the inbox (which tags each
+ * The registered notification categories and subjects, read once with the
+ * page and shared by the preferences matrix and the inbox (which tags each
  * notification with its source).
+ *
+ * @param enabled Whether the page shows them: nothing is read otherwise
  */
-export const useNotificationCatalog = () => {
-  const { $authFetch } = useAuthFetch();
-  const categories = useDmsState<NotificationCategory[]>(
-    "notification-catalog-categories",
-    () => [],
-  );
-  const subjects = useDmsState<NotificationSubject[]>(
-    "notification-catalog-subjects",
-    () => [],
-  );
-  const isLoaded = useDmsState<boolean>(
-    "notification-catalog-loaded",
-    () => false,
+export const useNotificationCatalog = (enabled: () => boolean = () => true) => {
+  const catalog = useApiData<NotificationCatalogResponse>(() =>
+    enabled() ? CATALOG_URL : null,
   );
+  const categories = computed(() => catalog.data.value?.categories ?? []);
+  const subjects = computed(() => catalog.data.value?.subjects ?? []);
+  const isLoaded = computed(() => !!catalog.data.value);
+  const loadFailed = computed(() => !isLoaded.value && hasFailed(catalog));
 
-  const loadCatalog = async () => {
-    const response = await $authFetch<NotificationCatalogResponse>(
-      "/settings/user/notifications/categories",
-    );
-    categories.value = response.categories;
-    subjects.value = response.subjects;
-    isLoaded.value = true;
-  };
+  /** Reads the catalog again (a retry). */
+  const loadCatalog = (): Promise<void> =>
+    catalog.refresh({ dedupe: "defer" });
 
   const subjectsOf = (categoryId: string) =>
     subjects.value.filter((subject) => subject.category.id === categoryId);
@@ -77,6 +78,7 @@ export const useNotificationCatalog = () => {
     categories,
     subjects,
     isLoaded,
+    loadFailed,
     loadCatalog,
     subjectsOf,
     findCategory,

package/frontend-vue/layers/dms-layout/app/build/composables/notification/useNotificationPreferences.ts

@@ -1,6 +1,8 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 import type { SaveStatusState } from "#dms-ui/app/components/save-bar/SaveStatus.vue";
 import { useInstantSave } from "#dms-ui/app/build/composables/instant-save/useInstantSave";
 import {
+  hasFailed,
   type NotificationCategory,
   type NotificationSubject,
   subjectPreferenceKey,
@@ -9,19 +11,45 @@ import {
 
 type PreferenceMap = Record<string, boolean>;
 
-const PREFERENCES_URL = "/settings/user/notifications/preferences";
+const PREFERENCES_URL = pageRoutePath(
+  "/settings/user/notifications",
+  "/preferences",
+);
 
 /**
- * State of the notification preferences matrix. Each switch saves on its
- * own through the shared instant save (a PATCH of the keys it changes); a
- * failed save puts the switches back and keeps the change for a retry.
+ * State of the notification preferences matrix, read with the page (the
+ * stored preferences and the catalog). Each switch saves on its own through
+ * the shared instant save (a PATCH of the keys it changes); a failed save
+ * puts the switches back and keeps the change for a retry.
+ *
+ * @param enabled Whether the page shows them: nothing is read otherwise
  */
-export const useNotificationPreferences = () => {
+export const useNotificationPreferences = (
+  enabled: () => boolean = () => true,
+) => {
   const { $authFetch } = useAuthFetch();
-  const catalog = useNotificationCatalog();
-  const preferences = ref<PreferenceMap>({});
-  const isLoading = ref(true);
-  const loadFailed = ref(false);
+  const catalog = useNotificationCatalog(enabled);
+  const stored = useApiData<PreferenceMap>(() =>
+    enabled() ? PREFERENCES_URL : null,
+  );
+  // The switches edit the read's data in place.
+  const preferences = computed<PreferenceMap>({
+    get: () => stored.data.value ?? {},
+    set: (value) => {
+      stored.data.value = value;
+    },
+  });
+  // A user who never changed a switch has no stored preferences (null).
+  const isStoredRead = computed(
+    () => stored.status.value === "success" || stored.data.value != null,
+  );
+  const loadFailed = computed(
+    () => (!isStoredRead.value && hasFailed(stored)) || catalog.loadFailed.value,
+  );
+  const isLoading = computed(
+    () =>
+      !(isStoredRead.value && catalog.isLoaded.value) && !loadFailed.value,
+  );
 
   const instant = useInstantSave<PreferenceMap>({
     read: (key) => preferences.value[key] ?? true,
@@ -54,21 +82,14 @@ export const useNotificationPreferences = () => {
       ),
     );
 
+  /** Reads the preferences and the catalog again (a retry). */
   const load = async () => {
-    isLoading.value = true;
-    loadFailed.value = false;
-    try {
-      const [stored] = await Promise.all([
-        $authFetch<PreferenceMap>(PREFERENCES_URL),
-        catalog.loadCatalog(),
-      ]);
-      preferences.value = stored ?? {};
-      instant.confirm(preferences.value);
-    } catch {
-      loadFailed.value = true;
-    } finally {
-      isLoading.value = false;
-    }
+    await Promise.all([
+      stored.refresh({ dedupe: "defer" }),
+      catalog.loadCatalog(),
+    ]);
+    // A failed save then puts back what the server holds now.
+    if (stored.status.value === "success") instant.confirm(preferences.value);
   };
 
   return {

package/frontend-vue/layers/dms-layout/app/build/composables/security/useSessionHandoff.ts

@@ -28,7 +28,7 @@ interface BrowserSession {
  * account entry, and the old entry — holding a dead refresh token — is dropped.
  */
 export function useSessionHandoff() {
-  const { session, fetch: refreshUser } = useUserSession<
+  const { session, fetch: refreshUser } = useDmsUserSession<
     unknown,
     BrowserSession
   >();

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/preferencesSummary.ts

@@ -59,7 +59,7 @@ export function resolvePreferenceRows(
   };
 }
 
-/** What `GET /settings/user/profile/access` answers. */
+/** What `GET /dms/pages/settings/user/profile/access` answers. */
 export interface ProfileAccess {
   roles: string[];
   workspaceOwner: boolean;

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/useAccountData.ts

@@ -1,3 +1,4 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 import UFormField from "@nuxt/ui/components/FormField.vue";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
@@ -12,7 +13,7 @@ import { resolveFieldErrors } from "#dms-core/app/composables/useFieldErrors";
 import { REQUIRED_MESSAGE } from "#dms-core/app/composables/useFormValidation";
 import { useSecurityFormat } from "../security/useSecurityFormat";
 
-const PROFILE_ENDPOINT = "/settings/user/profile";
+const PROFILE_ENDPOINT = pageRoutePath("/settings/user/profile");
 const EXPORT_ENDPOINT = `${PROFILE_ENDPOINT}/account-export`;
 const DELETION_ENDPOINT = `${PROFILE_ENDPOINT}/account-deletion`;
 const EXPORT_FILE_PREFIX = "dms-account-export";
@@ -64,7 +65,7 @@ export function accountExportFilename(at: Date = new Date()): string {
 export function useAccountData() {
   const { $authFetch } = useAuthFetch();
   const { confirm } = useConfirm();
-  const { user, clear } = useUserSession<User>();
+  const { user, clear } = useDmsUserSession<User>();
   const { removeAccount } = useMultiAccount();
   const { processI18n, processApiMessage } = useTranslation();
   const { errorMessage, errorCode } = useSecurityFormat();

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/useProfileAvatar.ts

@@ -12,7 +12,6 @@ import {
 } from "#dms-ui/app/utils/imageResize";
 
 const PRESIGN_URL = "/api/files/presign";
-const METADATA_URL = "/api/files/metadata";
 
 /** Upload options the backend serialized for the avatar image field. */
 export interface AvatarFieldOptions {
@@ -25,10 +24,6 @@ export interface AvatarFieldOptions {
 /** Why a picked file was refused before any upload. */
 export type AvatarRejection = "mimetype" | "size";
 
-interface FileMetadataResponse {
-  url: string;
-}
-
 /** Outcome of an avatar upload: a staged key, or why it was refused. */
 export interface AvatarUploadResult {
   key?: string;
@@ -79,17 +74,5 @@ export function useProfileAvatar(options: () => AvatarFieldOptions) {
     return { key: presign.resourceKey };
   }
 
-  /** @returns A short-lived URL to display a stored avatar */
-  async function resolveUrl(key: string): Promise<string | null> {
-    try {
-      const metadata = await $authFetch<FileMetadataResponse>(METADATA_URL, {
-        query: { resourceKey: key, storage: options().storage },
-      });
-      return metadata.url;
-    } catch {
-      return null;
-    }
-  }
-
-  return { progress, upload, resolveUrl };
+  return { progress, upload };
 }

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/useProfilePreferences.ts

@@ -1,3 +1,4 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 import { usePreferredDark } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 import { useUserRegionalPreferences } from "#dms-core/app/composables/user/useUserRegionalPreferences";
@@ -24,7 +25,10 @@ import {
   tallySubjects,
 } from "./preferencesSummary";
 
-export const PROFILE_ACCESS_ENDPOINT = "/settings/user/profile/access";
+export const PROFILE_ACCESS_ENDPOINT = pageRoutePath(
+  "/settings/user/profile",
+  "/access",
+);
 // Sample values the skeletons are shaped from.
 const SAMPLE_ACCESS: ProfileAccess = {
   roles: ["Admin", "Finance"],
@@ -50,16 +54,15 @@ const MONDAY = 1;
  * and each one's sentence, `undefined` while it is not known yet (the row
  * shows a skeleton then, never a made-up "0 unread").
  *
- * Nothing is awaited before render. The roles and the notification
- * preferences are fetched after mount; the unread count is the header bell's
- * own; the regional and appearance sentences, which depend on the browser
- * (time zone, today's date, the system theme), are written after mount so
- * the server and the hydrating browser render the same skeleton.
+ * The roles and the notification preferences are read with the page (a
+ * server render shows them and hands them over); the unread count is the
+ * header bell's own; the regional and appearance sentences, which depend on
+ * the browser (time zone, today's date, the system theme), are written after
+ * mount so the server and the hydrating browser render the same skeleton.
  */
 export function useProfilePreferences() {
   const { t: translate, locale } = useI18n();
   const t = translate as SummaryTranslate;
-  const { $authFetch } = useAuthFetch();
   const { groups } = useSettingsNavigation();
   const isOwner = useIsOwner();
   const isMounted = ref(false);
@@ -76,23 +79,14 @@ export function useProfilePreferences() {
     ),
   );
 
-  const access = ref<ProfileAccess>();
-  const accessFailed = ref(false);
+  const access = useApiData<ProfileAccess>(PROFILE_ACCESS_ENDPOINT);
   const accessSummary = computed(() => {
-    if (access.value) return buildAccessSummary(t, access.value);
-    return accessFailed.value
+    if (access.data.value) return buildAccessSummary(t, access.data.value);
+    return access.error.value
       ? t("page.settings.profile.preferences.access_unavailable")
       : undefined;
   });
 
-  async function loadAccess(): Promise<void> {
-    try {
-      access.value = await $authFetch<ProfileAccess>(PROFILE_ACCESS_ENDPOINT);
-    } catch {
-      accessFailed.value = true;
-    }
-  }
-
   const { uniqueLocales } = useUniqueLocales();
   const regional = useUserRegionalPreferences();
   // Frozen at mount: the row shows formats, not a ticking clock.
@@ -117,8 +111,12 @@ export function useProfilePreferences() {
     });
   });
 
-  const notificationPreferences = useNotificationPreferences();
-  const { subjects } = useNotificationCatalog();
+  const notificationPreferences = useNotificationPreferences(
+    () => rows.value.notifications.visible,
+  );
+  const { subjects } = useNotificationCatalog(
+    () => rows.value.notifications.visible,
+  );
   const { unreadCount, unreadTone, areCountsLoaded } = useNotifications();
   const isNotificationsLoading = computed(
     () => notificationPreferences.isLoading.value || !areCountsLoaded.value,
@@ -188,8 +186,6 @@ export function useProfilePreferences() {
   onMounted(() => {
     today = new Date();
     isMounted.value = true;
-    void loadAccess();
-    if (rows.value.notifications.visible) void notificationPreferences.load();
   });
 
   return {

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useSecurityFormat.ts

@@ -53,9 +53,12 @@ export function useSecurityFormat() {
       Math.floor((Date.now() - new Date(value).getTime()) / MS_PER_DAY),
     );
 
-  /** "3 days ago", "in an hour"… or "now" under a minute. */
-  const formatRelative = (value: DateInput): string => {
-    const elapsed = new Date(value).getTime() - Date.now();
+  /**
+   * "3 days ago", "in an hour"… or "now" under a minute, as of `now` (a
+   * list's read time, which the server and the hydrating browser share).
+   */
+  const formatRelative = (value: DateInput, now = Date.now()): string => {
+    const elapsed = new Date(value).getTime() - now;
     const formatter = new Intl.RelativeTimeFormat(locale.value, {
       numeric: "auto",
     });

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useSecurityOverview.ts

@@ -1,8 +1,9 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
 import type { Tone } from "#dms-ui/app/types/tone";
 
 /** Base URL of the Security page API. */
-export const SECURITY_ENDPOINT = "/settings/user/security";
+export const SECURITY_ENDPOINT = pageRoutePath("/settings/user/security");
 /** Route of the Security page. */
 export const SECURITY_PAGE_PATH = "/settings/user/security";
 const SECURITY_PAGE_ID = "settings.user.security";
@@ -68,21 +69,19 @@ const ATTENTION_TONE_ORDER: Tone[] = [
 
 /**
  * Shared Security summary: the status strip, every Security block and the
- * profile pointer card read the same state, and any change refreshes it for
- * all of them. It also keeps the navigation badge of the Security page, the
+ * profile pointer card read the same request, with the page (a server
+ * render shows it and hands it over), and any change refreshes it for all
+ * of them. It also keeps the navigation badge of the Security page, the
  * count of what needs attention in the tone the server gives it, in sync
  * after a change.
  */
 export function useSecurityOverview() {
-  const overview = useDmsState<SecurityOverview | null>(
-    "dms-security-overview",
-    () => null,
+  const summary = useApiData<SecurityOverview>(SECURITY_ENDPOINT);
+  const overview = computed(() => summary.data.value ?? null);
+  // A retry in progress is not a failure to show.
+  const isUnavailable = computed(
+    () => !!summary.error.value && summary.status.value !== "pending",
   );
-  const isUnavailable = useDmsState<boolean>(
-    "dms-security-overview-unavailable",
-    () => false,
-  );
-  const { $authFetch } = useAuthFetch();
   const { setNavBadge } = useNavBadges();
 
   const attention = computed<SecurityAttention[]>(
@@ -105,14 +104,10 @@ export function useSecurityOverview() {
     return ATTENTION_TONE_ORDER.find((tone) => present.includes(tone));
   }
 
+  /** Reads the summary again after a change: every block follows. */
   async function refresh(): Promise<void> {
-    try {
-      overview.value = await $authFetch<SecurityOverview>(SECURITY_ENDPOINT);
-      isUnavailable.value = false;
-    } catch {
-      isUnavailable.value = true;
-      return;
-    }
+    await summary.refresh({ dedupe: "defer" });
+    if (summary.error.value) return;
     const count = attention.value.length;
     setNavBadge(
       SECURITY_PAGE_ID,