@antelopejs/dms 0.7.8 → 0.7.10

package/frontend-vue/layers/dms-core/app/composables/user/usePreferences.ts

@@ -1,74 +1,106 @@
-import { isObject } from "../../utils/type-check";
+import {
+  decodePreferencesTree,
+  encodePreferencesTree,
+  fitPreferencesBudget,
+  isBranch,
+  markWritten,
+  PREFERENCES_COOKIE_NAME,
+  readAt,
+  writeAt,
+} from "../../build/composables/user/preferencesCookie";
+import { clearLocalTableEntries } from "../../build/composables/user/tablePreferences";
 
 export interface UserPreferences {
   [key: string]: unknown;
 }
 
-const COOKIE_NAME = "user-preferences";
 const COOKIE_MAX_AGE_ONE_YEAR = 60 * 60 * 24 * 365;
 
+/**
+ * The cookie the preferences were kept in up to `@antelopejs/dms` 0.7.9, as
+ * URI-encoded JSON that grew with every table the user opened. It is not
+ * read: the browser deletes it, so that it stops weighing on every request.
+ */
+const LEGACY_COOKIE_NAME = "user-preferences";
+
+/**
+ * The most the preferences cookie may weigh, name and value together.
+ * Browsers drop a cookie over 4 KB, and every request carries it next to the
+ * session cookies under the server's 16 KB header limit.
+ */
+export const MAX_PREFERENCES_COOKIE_BYTES = 3 * 1024;
+
+// A plain copy, as the cookie will read it back: the refs hand out reactive
+// proxies, which a caller may keep mutating after the write.
+const toPlain = <T>(value: T): T =>
+  value === undefined ? value : (JSON.parse(JSON.stringify(value)) as T);
+
+const expireLegacyCookie = (): void => {
+  if (typeof document === "undefined") return;
+  const isPresent = document.cookie
+    .split(/;\s*/)
+    .some((entry) => entry.startsWith(`${LEGACY_COOKIE_NAME}=`));
+  if (isPresent) document.cookie = `${LEGACY_COOKIE_NAME}=; path=/; max-age=0`;
+};
+
+/**
+ * The user's preferences, kept in the `dms-preferences` cookie so that a
+ * server render reads them too: a tree addressed by dotted paths, stored as
+ * base64url JSON. The cookie is bounded by `MAX_PREFERENCES_COOKIE_BYTES`:
+ * past it, the table view states, then the remembered periods, written least
+ * recently are dropped, and a write that would not fit even then is refused.
+ */
 export const usePreferences = () => {
-  const preferenceCookie = useDmsCookie<UserPreferences>(COOKIE_NAME, {
-    default: () => ({}),
+  const preferenceCookie = useDmsCookie<string>(PREFERENCES_COOKIE_NAME, {
+    default: () => "",
     maxAge: COOKIE_MAX_AGE_ONE_YEAR,
     sameSite: "lax",
     secure: true,
   });
-
-  const preferences = ref<UserPreferences>(preferenceCookie.value);
-
-  const getPreference = <T = unknown>(keyPath: string, defaultValue?: T): T => {
-    const keys = keyPath.split(".");
-    let current: unknown = preferences.value;
-
-    for (const key of keys) {
-      if (current && isObject(current) && key in current) {
-        current = (current as Record<string, unknown>)[key];
-      } else {
-        return defaultValue as T;
+  expireLegacyCookie();
+
+  // The cookie ref is shared by name, so every caller decodes the same value.
+  const tree = computed<UserPreferences>(() =>
+    typeof preferenceCookie.value === "string"
+      ? decodePreferencesTree(preferenceCookie.value)
+      : {},
+  );
+
+  const commit = (next: UserPreferences): boolean => {
+    if (!fitPreferencesBudget(next, MAX_PREFERENCES_COOKIE_BYTES)) {
+      if (import.meta.env.DEV) {
+        console.warn(
+          `[DMS] A preference was not saved: the "${PREFERENCES_COOKIE_NAME}" cookie would exceed ${MAX_PREFERENCES_COOKIE_BYTES} bytes.`,
+        );
       }
+      return false;
     }
+    preferenceCookie.value = encodePreferencesTree(next);
+    return true;
+  };
 
-    return current as T;
+  const getPreference = <T = unknown>(keyPath: string, defaultValue?: T): T => {
+    const value = readAt(tree.value, keyPath.split("."));
+    return (value === undefined ? defaultValue : value) as T;
   };
 
   const setPreference = (keyPath: string, value: unknown): void => {
     const keys = keyPath.split(".");
-    const lastKey = keys.pop()!;
-
-    let current = preferences.value;
-
-    for (const key of keys) {
-      if (!current[key] || !isObject(current[key])) {
-        current[key] = {};
-      }
-      current = current[key] as UserPreferences;
-    }
-
-    (current as Record<string, unknown>)[lastKey] = value;
-
-    preferenceCookie.value = preferences.value;
+    const next = toPlain(tree.value);
+    writeAt(next, keys, toPlain(value));
+    markWritten(next, keys);
+    commit(next);
   };
 
   const removePreference = (keyPath: string): void => {
     const keys = keyPath.split(".");
     const lastKey = keys.pop()!;
+    const next = toPlain(tree.value);
+    const parent = keys.length === 0 ? next : readAt(next, keys);
+    if (!isBranch(parent) || !(lastKey in parent)) return;
 
-    let current = preferences.value;
-
-    for (const key of keys) {
-      if (!current[key] || !isObject(current[key])) {
-        return;
-      }
-      current = current[key] as UserPreferences;
-    }
-
-    if (lastKey in current) {
-      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete (current as Record<string, unknown>)[lastKey];
-    }
-
-    preferenceCookie.value = preferences.value;
+    Reflect.deleteProperty(parent, lastKey);
+    commit(next);
   };
 
   const updatePreference = <T = unknown>(
@@ -81,12 +113,12 @@ export const usePreferences = () => {
   };
 
   const clearAllPreferences = (): void => {
-    preferences.value = {};
-    preferenceCookie.value = {};
+    preferenceCookie.value = "";
+    clearLocalTableEntries();
   };
 
   return {
-    preferences: readonly(computed(() => preferences.value)),
+    preferences: readonly(tree),
 
     getPreference,
     setPreference,

package/frontend-vue/layers/dms-core/app/types/confirm-dialog.ts

@@ -30,6 +30,39 @@ export type ConfirmDialogColor =
   | "info"
   | "neutral";
 
+/**
+ * A file a dialog's secondary action downloads (backend
+ * `ConfirmDialogDownloadTarget`), fetched with the user's session.
+ */
+export interface ConfirmDialogDownloadTarget {
+  type: "download";
+  url: string;
+  /** Saved under; the response's `Content-Disposition` name, else the URL's. */
+  filename?: string;
+}
+
+/** A link opened by a dialog's secondary action. */
+export interface ConfirmDialogLinkTarget {
+  type: "external";
+  url: string;
+  newTab?: boolean;
+}
+
+/** Where a dialog's secondary action leads (backend `ConfirmDialogSecondaryTarget`). */
+export type ConfirmDialogSecondaryTarget =
+  | ConfirmDialogLinkTarget
+  | ConfirmDialogDownloadTarget;
+
+/**
+ * A button next to cancel and confirm, running its target with the dialog
+ * left open (backend `ConfirmDialogSecondaryAction`).
+ */
+export interface ConfirmDialogSecondaryAction {
+  label: string;
+  icon?: string;
+  target: ConfirmDialogSecondaryTarget;
+}
+
 /**
  * The dialog an action asks in before it runs (backend `ConfirmDialog`),
  * the same for every action. Texts are i18n keys (with `$`) or literals,
@@ -44,6 +77,8 @@ export interface ConfirmDialog {
   confirmLabel?: string;
   cancelLabel?: string;
   impact?: ConfirmDialogImpact[];
+  /** A button next to cancel and confirm, leaving the dialog open. */
+  secondaryAction?: ConfirmDialogSecondaryAction;
   /** The action cannot run: the dialog only explains why. */
   blocked?: boolean;
   /** Text the user must type to confirm. */

package/frontend-vue/layers/dms-core/i18n/locales/core-en-GB.json

@@ -445,6 +445,7 @@
       "preset_aria": "Preset",
       "comparison_aria": "Comparison",
       "custom_range_aria": "Custom range",
+      "since": "since {from}",
       "presets": {
         "last-hour": "Last hour",
         "last-24h": "Last 24 hours",
@@ -459,6 +460,7 @@
         "last-quarter": "Last quarter",
         "ytd": "Year to date",
         "last-year": "Last year",
+        "all": "All time",
         "custom": "Custom"
       },
       "comparisons": {

package/frontend-vue/layers/dms-core/i18n/locales/core-fr-FR.json

@@ -445,6 +445,7 @@
       "preset_aria": "Préréglage",
       "comparison_aria": "Comparaison",
       "custom_range_aria": "Plage personnalisée",
+      "since": "depuis {from}",
       "presets": {
         "last-hour": "Dernière heure",
         "last-24h": "24 dernières heures",
@@ -459,6 +460,7 @@
         "last-quarter": "Trimestre dernier",
         "ytd": "Année en cours",
         "last-year": "Année dernière",
+        "all": "Toute la période",
         "custom": "Personnalisé"
       },
       "comparisons": {

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardPageBody.vue

@@ -13,6 +13,11 @@ interface Props {
   description?: string;
   /** Header buttons declared by the backend page (`headerActions`). */
   headerActions?: LayoutHeaderAction[];
+  /**
+   * The page query the server resolved the buttons' availability for, set
+   * when one declares an `availability` (`headerActionsQuery`).
+   */
+  headerActionsQuery?: Record<string, string>;
   /** Space between the page header and the page. */
   headerClass?: string;
 }
@@ -23,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   description: undefined,
   headerActions: () => [],
+  headerActionsQuery: undefined,
   headerClass: "pb-6",
 });
 
@@ -58,7 +64,10 @@ const PAGE_SLOT_CLASS =
     :class="props.headerClass"
   >
     <template #actions>
-      <PageHeaderActionsOutlet :actions="props.headerActions" />
+      <PageHeaderActionsOutlet
+        :actions="props.headerActions"
+        :served-query="props.headerActionsQuery"
+      />
     </template>
   </PageHeader>
   <div :class="isPageLoading ? 'hidden' : PAGE_SLOT_CLASS">

package/frontend-vue/layers/dms-layout/app/build/components/layout/PageHeaderActionBar.vue

@@ -15,6 +15,10 @@ import { PREVIEW_LOCK_ICON } from "#dms-ui/app/build/utils/permissionPreview";
 import { runMountedQuickAction } from "#dms-ui/app/build/utils/quickActionTargets";
 import { useActionTargets } from "#dms-ui/app/build/composables/actions/useActionTargets";
 import { refreshPageBlocks } from "#dms-ui/app/utils/blockRefresh";
+import {
+  hasUrlVariables,
+  resolveLinkVariables,
+} from "#dms-ui/app/build/utils/urlVariables";
 import {
   dispatchQuickActionTarget,
   findServedQuickAction,
@@ -111,6 +115,32 @@ function baseButton(action: LayoutHeaderAction): ButtonProps {
 }
 
 type LinkTarget = Extract<ActionTarget, { type: "page" | "external" }>;
+type UrlTarget = Extract<ActionTarget, { url: string }>;
+
+const hasTargetUrl = (target: ActionTarget): target is UrlTarget =>
+  typeof (target as Partial<UrlTarget>).url === "string";
+
+// The values of the page a target's URL may name: a button declared once on
+// the page leads to the record the page shows (`{{params.id}}`) or keeps its
+// scope (`?workspace={{query.workspace}}`), following the URL as it changes.
+const pageUrlValues = computed(() => ({
+  routeParams: siteLayout.findMatchingRoute(route.path)?.params,
+  routeQuery: route.query as Record<string, unknown>,
+}));
+
+function withPageValues(action: LayoutHeaderAction): LayoutHeaderAction {
+  const { target } = action;
+  if (!target || !hasTargetUrl(target) || !hasUrlVariables(target.url)) {
+    return action;
+  }
+  return {
+    ...action,
+    target: {
+      ...target,
+      url: resolveLinkVariables(target.url, pageUrlValues.value),
+    },
+  };
+}
 
 // A link target (without a confirmation) renders as a link: middle click and
 // "open in a new tab" keep working.
@@ -157,8 +187,9 @@ function resolveQuickActionButton(
 }
 
 function resolveAction(
-  action: LayoutHeaderAction,
+  declared: LayoutHeaderAction,
 ): ResolvedHeaderAction | null {
+  const action = withPageValues(declared);
   const base = baseButton(action);
   const disabledReason =
     action.disabled && action.disabledReason

package/frontend-vue/layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue

@@ -4,13 +4,23 @@ import PageHeaderActionBar, {
   type LayoutHeaderAction,
 } from "./PageHeaderActionBar.vue";
 import { injectPageHeaderActionsHost } from "../../../composables/layout/usePageHeaderActions";
+import { useServedHeaderActions } from "../../../composables/layout/useServedHeaderActions";
 
 interface PageHeaderActionsOutletProps {
   /** Header buttons declared by the backend page (`headerActions`). */
   actions: LayoutHeaderAction[];
+  /** The page query the server resolved their availability for. */
+  servedQuery?: Record<string, string>;
 }
 
-const props = defineProps<PageHeaderActionsOutletProps>();
+const props = withDefaults(defineProps<PageHeaderActionsOutletProps>(), {
+  servedQuery: undefined,
+});
+
+const actions = useServedHeaderActions({
+  actions: () => props.actions,
+  servedQuery: () => props.servedQuery,
+});
 
 const ROOT_SELECTOR = "[data-dms-page-header-actions]";
 // The actions take their own full-width row below `md`, the end of the
@@ -26,7 +36,7 @@ onServerPrefetch(() => host?.whenReady());
 
 const pageActions = computed(() => host?.actions.value ?? null);
 const hasActions = computed(
-  () => props.actions.length > 0 || !!pageActions.value,
+  () => actions.value.length > 0 || !!pageActions.value,
 );
 
 // Hydrating before the page has set up: its actions are not known yet, but
@@ -56,7 +66,7 @@ const showsServerMarkup = computed(
     data-dms-page-header-actions
     :class="ROOT_CLASS"
   >
-    <PageHeaderActionBar :actions="props.actions" />
+    <PageHeaderActionBar :actions="actions" />
     <component :is="pageActions" v-if="pageActions" />
   </div>
 </template>

package/frontend-vue/layers/dms-layout/app/build/components/layout/RowSidePanel.vue

@@ -5,9 +5,12 @@
  * among the rows the table shows, previous and next (J and K too) and close
  * (Escape too). Below it, the module's component receives the row as a
  * drawer's component does, mounted anew on each row. The position follows the
- * table: a refresh that moves or drops the row updates it.
+ * table: a refresh that moves or drops the row updates it. A row the link
+ * names but its route answered 404 for shows the "not found" state instead,
+ * with a close button.
  */
 import { computed, onBeforeUnmount, onMounted } from "vue";
+import DmsEmptyState from "#dms-ui/app/components/empty-state/EmptyState.vue";
 import {
   listenRowPanelClose,
   listenRowSteps,
@@ -46,8 +49,20 @@ const componentProps = computed(() => ({
   navigation: navigation.value,
 }));
 
+const heading = computed(() => content.value?.rowTitle || content.value?.title);
+
 const close = () => closeRowSidePanel();
 
+const notFoundActions = computed(() => [
+  {
+    label: t("side_panel.close"),
+    icon: "i-ph-x",
+    color: "neutral" as const,
+    variant: "outline" as const,
+    onClick: close,
+  },
+]);
+
 let stopKeys: Array<() => void> = [];
 
 onMounted(() => {
@@ -74,7 +89,7 @@ onBeforeUnmount(() => {
         <h2
           class="text-highlighted truncate text-[15px] leading-[1.3] font-[650] tracking-[-0.015em]"
         >
-          {{ content.title }}
+          {{ heading }}
         </h2>
         <p
           v-if="position"
@@ -122,7 +137,16 @@ onBeforeUnmount(() => {
       </div>
     </header>
     <div class="min-h-0 flex-1 overflow-y-auto p-4">
-      <Suspense>
+      <DmsEmptyState
+        v-if="content.notFound"
+        data-dms-row-side-panel-not-found
+        variant="no-result"
+        :title="content.notFound.title"
+        :description="content.notFound.description"
+        :actions="notFoundActions"
+        class="py-10"
+      />
+      <Suspense v-else>
         <component
           :is="content.component"
           :key="content.rowKey"

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

@@ -21,6 +21,17 @@ export const ROW_SIDE_PANEL_ID = "dms:row-side-panel";
 /** Registered name of `RowSidePanel.vue` (the layer's `Dms` prefix applied). */
 const ROW_SIDE_PANEL_COMPONENT = "DmsRowSidePanel";
 
+/**
+ * The state the panel draws in place of the component on a row that is gone,
+ * its texts translated.
+ *
+ * @internal
+ */
+export interface RowSidePanelNotFound {
+  title: string;
+  description: string;
+}
+
 /**
  * What the row side panel shows: the header the DMS draws, the module's
  * component and the row it receives.
@@ -32,7 +43,12 @@ export interface RowSidePanelContent {
   session: symbol;
   /** The table (or button bar) that opened the panel; see {@link rowSidePanelOwnerKey}. */
   ownerKey: string;
+  /** The panel's title: its accessible name, and its header without a row. */
   title: string;
+  /** The header's title while `row` is open (the target's `rowTitle`). */
+  rowTitle?: string;
+  /** The row the link names is gone: this state replaces the component. */
+  notFound?: RowSidePanelNotFound;
   /** i18n key (`$`-prefixed) of the position, receiving `{ index, total }`. */
   positionLabel?: string;
   component: Component;

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

@@ -0,0 +1,75 @@
+import { computed, shallowRef, watch, type ComputedRef } from "vue";
+import type { LayoutHeaderAction } from "../../build/components/layout/PageHeaderActionBar.vue";
+import type { PageLayout } from "../../types/page";
+import {
+  isSamePageQuery,
+  layoutUrlWithQuery,
+  pageQueryValues,
+} from "../../utils/pageQuery";
+
+interface ServedHeaderActionsOptions {
+  /** The buttons the page layout was served with. */
+  actions: () => LayoutHeaderAction[];
+  /**
+   * The page query their availability was resolved for, set when one of them
+   * declares an `availability` (`headerActionsQuery`).
+   */
+  servedQuery: () => Record<string, string> | undefined;
+}
+
+/**
+ * The page header's buttons for the page query of the moment. A button whose
+ * `availability` depends on the query (`?workspace=` names the record the
+ * page acts on) was resolved for the query the layout was loaded with: when
+ * the URL's query moves away from it, the header asks the page layout again
+ * for that query and takes its buttons, keeping the last ones meanwhile.
+ * Buttons without an availability never cause a request.
+ */
+export function useServedHeaderActions({
+  actions,
+  servedQuery,
+}: ServedHeaderActionsOptions): ComputedRef<LayoutHeaderAction[]> {
+  const route = useDmsRoute();
+  const siteLayout = useSiteLayout();
+  const refreshed = shallowRef<LayoutHeaderAction[] | null>(null);
+  let latestRequest = 0;
+
+  const layoutUrl = () =>
+    siteLayout.findMatchingRoute(route.path)?.metadata?.layoutUrl;
+
+  async function askFor(url: string, query: Record<string, string>) {
+    const request = ++latestRequest;
+    const { $authFetch } = useAuthFetch();
+    try {
+      const layout = await $authFetch<PageLayout>(
+        layoutUrlWithQuery(url, query),
+      );
+      if (request !== latestRequest) return;
+      const options = layout.layout.options as
+        | { headerActions?: LayoutHeaderAction[] }
+        | undefined;
+      refreshed.value = options?.headerActions ?? [];
+    } catch {
+      // The buttons resolved for the previous query stay: the operation
+      // behind each one still refuses on its own.
+    }
+  }
+
+  function follow() {
+    const served = servedQuery();
+    const current = pageQueryValues(route.query as Record<string, unknown>);
+    const url = layoutUrl();
+    if (!served || !url || isSamePageQuery(served, current)) {
+      latestRequest++;
+      refreshed.value = null;
+      return;
+    }
+    void askFor(url, current);
+  }
+
+  if (!import.meta.env.SSR) {
+    watch([() => route.query, servedQuery], follow, { immediate: true });
+  }
+
+  return computed(() => refreshed.value ?? actions());
+}

package/frontend-vue/layers/dms-layout/app/composables/page/usePageLayout.ts

@@ -1,3 +1,5 @@
+import { pageQueryValues } from "../../utils/pageQuery";
+
 /**
  * Reads the same page cache that Inertia hydrates before navigation. Missing
  * layouts (including newly registered dev pages) use the shared deduped loader.
@@ -17,7 +19,12 @@ export async function usePageLayout() {
   );
   const load = async () => {
     if (layoutUrl.value && !pageLayout.value) {
-      await siteLayout.loadPageLayout(layoutUrl.value);
+      // Asked with the page query, for the header buttons whose availability
+      // depends on it; cached for the page whatever its query.
+      await siteLayout.loadPageLayout(
+        layoutUrl.value,
+        pageQueryValues(route.query),
+      );
     }
   };
   watch([layoutUrl, () => siteLayout.pageLayouts.value], load);

package/frontend-vue/layers/dms-layout/app/composables/page/useSiteLayout.ts

@@ -1,3 +1,4 @@
+import { layoutUrlWithQuery } from "../../utils/pageQuery";
 import { withoutTrailingSlash } from "ufo";
 
 const STALE_THRESHOLD_MS = 300_000;
@@ -282,7 +283,15 @@ export const useSiteLayout = () => {
     await refresh();
   };
 
-  const loadPageLayout = async (slug: string): Promise<PageLayout> => {
+  /**
+   * The layout of a page, cached by its layout URL. `query` is the page
+   * URL's, which the first request carries for the header buttons whose
+   * availability reads it (the header asks again for another query).
+   */
+  const loadPageLayout = async (
+    slug: string,
+    query?: Record<string, string>,
+  ): Promise<PageLayout> => {
     if (pageLayouts.value[slug]) {
       return pageLayouts.value[slug];
     }
@@ -294,7 +303,9 @@ export const useSiteLayout = () => {
     }
 
     const { $authFetch } = useAuthFetch();
-    const request = $authFetch<PageLayout>(slug).then((result) => {
+    const request = $authFetch<PageLayout>(
+      layoutUrlWithQuery(slug, query ?? {}),
+    ).then((result) => {
       if (pageLayouts.value === cache) cache[slug] = result;
       return result;
     });

package/frontend-vue/layers/dms-layout/app/custom-layouts/DefaultLayout.vue

@@ -12,6 +12,11 @@ interface Props {
   description?: string;
   /** Header buttons declared by the backend page (`headerActions`). */
   headerActions?: LayoutHeaderAction[];
+  /**
+   * The page query the server resolved the buttons' availability for, set
+   * when one declares an `availability` (`headerActionsQuery`).
+   */
+  headerActionsQuery?: Record<string, string>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   description: undefined,
   headerActions: () => [],
+  headerActionsQuery: undefined,
 });
 </script>
 
@@ -33,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
       :title="props.title"
       :description="props.description"
       :header-actions="props.headerActions"
+      :header-actions-query="props.headerActionsQuery"
     >
       <slot />
     </DashboardPageBody>

package/frontend-vue/layers/dms-layout/app/custom-layouts/SettingsLayout.vue

@@ -12,6 +12,11 @@ interface Props {
   description?: string;
   /** Header buttons declared by the backend page (`headerActions`). */
   headerActions?: LayoutHeaderAction[];
+  /**
+   * The page query the server resolved the buttons' availability for, set
+   * when one declares an `availability` (`headerActionsQuery`).
+   */
+  headerActionsQuery?: Record<string, string>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   description: undefined,
   headerActions: () => [],
+  headerActionsQuery: undefined,
 });
 </script>
 
@@ -33,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
         :title="props.title"
         :description="props.description"
         :header-actions="props.headerActions"
+        :header-actions-query="props.headerActionsQuery"
         header-class="pb-5"
       >
         <slot />

package/frontend-vue/layers/dms-layout/app/pages/[...slug].vue

@@ -218,10 +218,13 @@ const realtimePageId = computed(() => pagelayoutMetadata.value?.fullId ?? "");
 const realtime = usePageRealtime(realtimePageId);
 providePageRealtime(realtime);
 // Before the blocks set up: their refetches go through the page's live gate.
-usePageLiveHost(() => ({
-  pageId: pagelayoutMetadata.value?.fullId,
-  live: pagelayoutMetadata.value?.live,
-}));
+usePageLiveHost(
+  () => ({
+    pageId: pagelayoutMetadata.value?.fullId,
+    live: pagelayoutMetadata.value?.live,
+  }),
+  { isStreamConnected: () => !!realtime.sessionId.value },
+);
 
 function buildPageSetupContext(
   pageInfo: PageInfo,