@manta-eu/react 0.12.0 → 0.13.0

package/src/components/planning/PlanLimitsAction.tsx

@@ -0,0 +1,44 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { SlidersHorizontal } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button } from "#components/button/index";
+import { PlanLimitsDialog } from "#components/plan-limits/index";
+import { buildPlanLimitsModel } from "#components/plan-limits/plan-limits-model";
+import { usePlanLimits } from "#hooks/usePlanLimits";
+
+export type PlanLimitsActionProps = {
+  planGraphIri: string;
+};
+
+/** The "Edit limits" button and its dialog, fed by the plan's own rules; nothing for a plan with no value to edit. */
+export function PlanLimitsAction(props: PlanLimitsActionProps) {
+  const { planGraphIri } = props;
+  const [open, setOpen] = useState(false);
+  const limits = usePlanLimits({ planGraphIri });
+  const hasValues = useMemo(() => isPresent(buildPlanLimitsModel(limits.rules).rows), [limits.rules]);
+
+  if (limits.isLoading || (!isPresent(limits.error) && !hasValues)) return null;
+
+  return (
+    <>
+      <Button
+        variant="secondary"
+        size="sm"
+        icon={SlidersHorizontal}
+        label="Edit limits"
+        rounded="md"
+        className="text-nowrap"
+        onClick={() => setOpen(true)}
+      />
+      <PlanLimitsDialog
+        open={open}
+        onOpenChange={setOpen}
+        rules={limits.rules}
+        isSaving={limits.isSaving}
+        error={limits.error}
+        omittedRules={limits.omittedRules}
+        onSave={limits.save}
+      />
+    </>
+  );
+}

package/src/components/slider/index.tsx

@@ -21,7 +21,8 @@ const sliderVariants = tv({
     ],
     range: ["absolute bg-primary", "data-[orientation=horizontal]:h-full", "data-[orientation=vertical]:w-full"],
     thumb: [
-      "block size-4 shrink-0 rounded-full bg-secondary shadow-sm transition-[box-shadow,background-color]",
+      "block size-4 shrink-0 cursor-grab rounded-full bg-secondary shadow-sm transition-[box-shadow,background-color]",
+      "active:cursor-grabbing",
       "hover:ring-4 hover:ring-active-border/25",
       "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-active-border/25",
       "group-data-[disabled]:pointer-events-none group-data-[disabled]:bg-disabled",

package/src/datastore-picker/datastore-picker-rows.ts

@@ -47,23 +47,29 @@ const operatorUnprovisionedNote = "No datastore yet - add one from Datastores.";
 const removedDatastoreNote = "This datastore has been removed.";
 const aliasedDatastoreNote = "This datastore is already listed above.";
 
+export function datastoreOfTreeNode(node: DatastoreTreeNode) {
+  const { id, name, depth, datastoreId, removed } = node;
+
+  return { id: datastoreId ?? id, name, depth, selectable: isPresent(datastoreId) && !removed };
+}
+
 function operatorCandidate(node: DatastoreTreeNode, currentDatastoreId?: string): Candidate {
-  const datastoreId = node.datastoreId ?? undefined;
-  const selectable = isPresent(datastoreId) && !node.removed;
-  const unprovisioned = !isPresent(datastoreId);
+  const { id: headingId, datastoreId, removed } = node;
+
+  const { id, name, depth, selectable } = datastoreOfTreeNode(node);
 
   return {
     selectable,
-    headingId: node.id,
+    headingId,
     item: {
-      id: datastoreId ?? node.id,
-      name: node.name,
-      depth: pickerDepth(node.depth),
-      treeDepth: node.depth ?? 0,
-      active: selectable && datastoreId === currentDatastoreId,
+      id,
+      name,
+      depth: pickerDepth(depth),
+      treeDepth: depth ?? 0,
+      active: selectable && id === currentDatastoreId,
       heading: !selectable,
-      ...(unprovisioned ? { note: operatorUnprovisionedNote } : {}),
-      ...(node.removed ? { note: removedDatastoreNote } : {}),
+      ...(!isPresent(datastoreId) && { note: operatorUnprovisionedNote }),
+      ...(removed && { note: removedDatastoreNote }),
     },
   };
 }
@@ -85,22 +91,32 @@ function userCandidate(datastore: Datastore, currentDatastoreId?: string): Candi
   };
 }
 
+function rowsUnderGroup<T>(entries: readonly T[], index: number, depthOf: (entry: T) => number): T[] {
+  const head = entries[index];
+
+  if (head === undefined) return [];
+
+  const headDepth = depthOf(head);
+  const end = entries.findIndex((entry, at) => at > index && depthOf(entry) <= headDepth);
+
+  return entries.slice(index + 1, end === -1 ? entries.length : end);
+}
+
 function headsGroupWhere<T>(
   entries: readonly T[],
   index: number,
   depthOf: (entry: T) => number,
   predicate: (entry: T) => boolean,
 ): boolean {
-  const head = entries[index];
-  if (!head) return false;
-  const headDepth = depthOf(head);
+  return rowsUnderGroup(entries, index, depthOf).some(predicate);
+}
+
+export function groupMembers(datastores: readonly Datastore[], groupId: string): Datastore[] {
+  const groupIndex = datastores.findIndex(({ id }) => id === groupId);
 
-  for (let next = index + 1; next < entries.length; next++) {
-    const entry = entries[next];
-    if (!entry || depthOf(entry) <= headDepth) return false;
-    if (predicate(entry)) return true;
-  }
-  return false;
+  return rowsUnderGroup(datastores, groupIndex, ({ depth }) => depth ?? 0).filter(
+    ({ selectable }) => selectable !== false,
+  );
 }
 
 const candidateDepth = (candidate: Candidate) => candidate.item.treeDepth ?? 0;

package/src/hooks/use-action-plans-list.ts

@@ -5,6 +5,7 @@ import type { QueryContext } from "ldkit";
 import type { RDF } from "ldkit/rdf";
 import { DataFactory } from "ldkit/rdf";
 import { SELECT, sparql } from "ldkit/sparql";
+import pLimit from "p-limit";
 import { clamp, splitEvery } from "ramda";
 import { match, P } from "ts-pattern";
 import {
@@ -69,6 +70,7 @@ const defaultLimit = 10;
 const maxLimit = 50;
 const detailTripleLimit = 1000;
 const detailGraphBatchSize = 6;
+const detailBatchConcurrency = 3;
 const actionPlanStates: readonly ActionPlanDetailState[] = ["DRAFT", "RUNNING", "COMPLETED", "FAILED", "TIMED_OUT"];
 
 function clampLimit(value: number | null | undefined): number {
@@ -501,21 +503,27 @@ async function fetchPageBindings(
   });
 }
 
-async function fetchDetailsForPage(
-  engine: ReturnType<typeof useSparqlEngine>,
+export async function fetchDetailsForPage(
+  engine: Pick<ReturnType<typeof useSparqlEngine>, "queryBindings">,
   context: QueryContext,
-  pageBindings: PageBinding[],
+  pageBindings: Pick<PageBinding, "graph">[],
 ): Promise<Map<string, RdfGraph>> {
-  if (pageBindings.length === 0) return new Map();
-
-  const bindingGroups: RDF.Bindings[][] = [];
-  for (const batch of splitEvery(detailGraphBatchSize, pageBindings)) {
-    const stream = await engine.queryBindings(buildDetailBatchQuery(batch.map((binding) => binding.graph)), context);
-    bindingGroups.push(await collectBindings(stream));
-  }
+  const limit = pLimit(detailBatchConcurrency);
+
+  const bindingGroups = await Promise.all(
+    splitEvery(detailGraphBatchSize, pageBindings).map((batch) =>
+      limit(async () => {
+        const stream = await engine.queryBindings(
+          buildDetailBatchQuery(batch.map((binding) => binding.graph)),
+          context,
+        );
+
+        return collectBindings(stream);
+      }),
+    ),
+  );
 
-  const bindings = bindingGroups.flat();
-  return groupDetailBindings(bindings);
+  return groupDetailBindings(bindingGroups.flat());
 }
 
 export const actionPlansListQueryKeyRoot = ["ldo-ui", "action-plans-list"] as const;

package/src/hooks/use-activity-feed.ts

@@ -1,6 +1,6 @@
 import { humanCount } from "@manta-eu/lib/humanize";
 import { prependMissingSparqlPrefixes, prov } from "@manta-eu/rdf-lib/namespaces";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
 import type { RDF } from "ldkit/rdf";
 import { SELECT } from "ldkit/sparql";
 import { match } from "ts-pattern";
@@ -232,28 +232,44 @@ export function processActivityFeedBindings(bindings: RDF.Bindings[], pageSize:
     });
 }
 
-export function useActivityFeed(config: UseActivityFeedOptions = {}) {
-  const { page = 1, pageSize = 10, enabled = true, filters } = config;
+async function countActivities(
+  engine: ReturnType<typeof useSparqlEngine>,
+  context: ReturnType<typeof optionsToContext>,
+  filters: ActivityFeedFilters | undefined,
+): Promise<number> {
+  const [countBinding] = await collectBindings(
+    await engine.queryBindings(buildActivityFeedCountQuery(filters), context),
+  );
+
+  return countBinding ? (bindingCount(countBinding, "count") ?? 0) : 0;
+}
+
+export function useActivityFeed(
+  config?: UseActivityFeedOptions & { includeTotal?: true },
+): UseQueryResult<ActivityFeedResult>;
+export function useActivityFeed(
+  config: UseActivityFeedOptions & { includeTotal: false },
+): UseQueryResult<Pick<ActivityFeedResult, "activities">>;
+export function useActivityFeed(
+  config: UseActivityFeedOptions & { includeTotal?: boolean },
+): UseQueryResult<Pick<ActivityFeedResult, "activities"> & Partial<Pick<ActivityFeedResult, "totalCount">>>;
+export function useActivityFeed(config: UseActivityFeedOptions & { includeTotal?: boolean } = {}) {
+  const { page = 1, pageSize = 10, enabled = true, filters, includeTotal = true } = config;
+
   const engine = useSparqlEngine();
   const options = useSparqlOptions();
   const offset = Math.max(0, (page - 1) * pageSize);
 
-  return useQuery<ActivityFeedResult>({
-    queryKey: ["ldo-ui", "activity-feed", page, pageSize, filters, engine, options],
+  return useQuery<ActivityFeedResult | Pick<ActivityFeedResult, "activities">>({
+    queryKey: ["ldo-ui", "activity-feed", page, pageSize, filters, includeTotal, engine, options],
     queryFn: async () => {
       const context = optionsToContext(options);
-      const [pageStream, countStream] = await Promise.all([
-        engine.queryBindings(buildActivityFeedQuery(pageSize, offset, filters), context),
-        engine.queryBindings(buildActivityFeedCountQuery(filters), context),
-      ]);
-      const [pageBindings, countBindings] = await Promise.all([
-        collectBindings(pageStream),
-        collectBindings(countStream),
+      const [pageBindings, totalCount] = await Promise.all([
+        engine.queryBindings(buildActivityFeedQuery(pageSize, offset, filters), context).then(collectBindings),
+        includeTotal ? countActivities(engine, context, filters) : undefined,
       ]);
 
       const activities = processActivityFeedBindings(pageBindings, pageSize);
-      const countBinding = countBindings[0];
-      const totalCount = countBinding ? (bindingCount(countBinding, "count") ?? 0) : 0;
 
       return { activities, totalCount };
     },

package/src/hooks/use-entity.ts

@@ -1,7 +1,7 @@
 import { isQueryableTermIri } from "@manta-eu/datalog-parser";
 import { isPresent } from "@manta-eu/lib/present";
 import { useQuery, type UseQueryResult } from "@tanstack/react-query";
-import { createLens, type Options, type Schema, type SchemaInterface } from "ldkit";
+import { createLens, type Lens, type Options, type Schema, type SchemaInterface } from "ldkit";
 import { useSparqlOptions } from "./use-sparql-options";
 
 type Batch = { iris: Set<string>; result: Promise<Map<string, unknown>> };
@@ -73,7 +73,8 @@ export function loadEntities<S extends Schema>(schema: S, iris: readonly string[
 }
 
 export const entityQueryKey = <S extends Schema>(iri: string, schema: S) => ["ldo-ui", "entity", iri, schema] as const;
-export const entitiesQueryKey = <S extends Schema>(schema: S) => ["ldo-ui", "entities", schema] as const;
+export const entitiesQueryKey = <S extends Schema>(schema: S, page: EntitiesPage) =>
+  ["ldo-ui", "entities", schema, page] as const;
 export const entitiesByIrisQueryKey = <S extends Schema>(iris: readonly string[], schema: S) =>
   ["ldo-ui", "entities-by-iris", iris, schema] as const;
 
@@ -122,7 +123,9 @@ export function useEntitiesByIris<S extends Schema>(config: UseEntitiesByIrisOpt
   });
 }
 
-export type UseEntitiesOptions<S extends Schema> = {
+export type EntitiesPage = Pick<NonNullable<Parameters<Lens<Schema>["find"]>[0]>, "take" | "skip">;
+
+export type UseEntitiesOptions<S extends Schema> = EntitiesPage & {
   schema: S;
   enabled?: boolean;
 };
@@ -134,14 +137,16 @@ export type Entity<T> = T extends Record<string, unknown> ? { [Key in keyof T]:
 export function useEntities<S extends Schema>(
   config: UseEntitiesOptions<S>,
 ): UseQueryResult<Entity<SchemaInterface<S>>[], Error> {
-  const { schema, enabled = true } = config;
+  const { schema, enabled = true, take, skip } = config;
+
   const options = useSparqlOptions();
 
   return useQuery({
-    queryKey: entitiesQueryKey(schema),
+    queryKey: entitiesQueryKey(schema, { take, skip }),
     queryFn: async () => {
       const lens = createLens(schema, options);
-      return lens.find();
+
+      return lens.find({ ...(take !== undefined && { take }), ...(skip !== undefined && { skip }) });
     },
     staleTime: entityStaleTime,
     enabled,

package/src/hooks/use-manual-actions.ts

@@ -127,27 +127,32 @@ export function useInvalidateManualActions() {
   return (planGraphIri: string) => queryClient.invalidateQueries({ queryKey: manualActionsQueryKey(planGraphIri) });
 }
 
-export type UseManualActionsForPlansOptions = {
+export type UseManualActionsForPlansOptions = ManualActionReadOptions & {
   planGraphIris: string[];
   enabled?: boolean;
   refetchIntervalMs?: number | false;
 };
 
-async function findManualActionsForPlans(options: Options, planGraphIris: string[]) {
+async function findManualActionsForPlans(
+  options: Options,
+  planGraphIris: string[],
+  readOptions: ManualActionReadOptions,
+) {
   const perGraph = await Promise.all(
-    planGraphIris.map(async (iri) => [iri, await findManualActionsInGraph(options, iri)] as const),
+    planGraphIris.map(async (iri) => [iri, await findManualActionsInGraph(options, iri, readOptions)] as const),
   );
   return new Map(perGraph.filter(([, actions]) => isPresent(actions)));
 }
 
 export function useManualActionsForPlans(config: UseManualActionsForPlansOptions) {
-  const { planGraphIris, enabled = true, refetchIntervalMs = false } = config;
+  const { planGraphIris, enabled = true, refetchIntervalMs = false, includeUnstarted = false } = config;
+
   const options = useSparqlOptions();
   const sortedIris = [...planGraphIris].sort();
 
   return useQuery<Map<string, ManualAction[]>>({
-    queryKey: ["ldo-ui", "manual-actions-for-plans", sortedIris, options],
-    queryFn: () => findManualActionsForPlans(options, sortedIris),
+    queryKey: ["ldo-ui", "manual-actions-for-plans", sortedIris, options, { includeUnstarted }],
+    queryFn: () => findManualActionsForPlans(options, sortedIris, { includeUnstarted }),
     enabled: enabled && isPresent(sortedIris),
     refetchInterval: refetchIntervalMs,
     refetchIntervalInBackground: true,

package/src/hooks/use-unsaved-changes-warning.ts

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+
+export function useUnsavedChangesWarning(active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+    function warn(event: BeforeUnloadEvent) {
+      event.preventDefault();
+    }
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [active]);
+}

package/src/hooks/useAuth.ts

@@ -1,7 +1,8 @@
 import { SessionContextDocument } from "@manta-eu/client";
-import { loginStatusPollMs } from "@manta-eu/client/shared/constants";
+import { loginStatusPollMs, mantaGQLPath } from "@manta-eu/client/shared/constants";
 import { datastoreHeader } from "@manta-eu/client/shared/datastore-path";
 import { createHttpError, isHttpError } from "@manta-eu/client/shared/error-utils";
+import { signedOutLoginStatus } from "@manta-eu/client/shared/login-status";
 import { isValidModelId, type MantaModelId } from "@manta-eu/client/shared/model";
 import type { OrgRoleDefinition } from "@manta-eu/client/shared/org-roles";
 import { isCapability } from "@manta-eu/client/shared/permissions";
@@ -133,9 +134,10 @@ function sessionDatastore(datastore: z.infer<typeof datastoreSchema> | null | un
 async function tokenLoginStatus(getAccessToken: () => Promise<string>): Promise<z.infer<typeof loginStatusSchema>> {
   try {
     await getAccessToken();
+
     return { valid: true, canSwitchDatastore: true, allowedModels: [] };
   } catch {
-    return { valid: false, canSwitchDatastore: false, allowedModels: [] };
+    return signedOutLoginStatus;
   }
 }
 
@@ -204,7 +206,7 @@ export function useAuth(): UseAuthResult {
   } = useQuery({
     queryKey: [...userContextQueryKey, datastoreId],
     queryFn: async ({ signal }) => {
-      const res = await authorizedFetch(new URL("/graphql", mantaBaseUrl), {
+      const res = await authorizedFetch(new URL(mantaGQLPath, mantaBaseUrl), {
         method: "POST",
         headers: {
           ...datastoreHeader(datastoreId),

package/src/hooks/useChatPanelSync.ts

@@ -1,6 +1,5 @@
 import { buildPlanIri } from "@manta-eu/client/shared/agent-mode";
 import { ChatContextKind, isDraftChatContext, type ChatContext } from "@manta-eu/client/shared/agent-types";
-import { expandPrefix } from "@manta-eu/client/shared/rdf-namespaces";
 import { isPresent } from "@manta-eu/lib/present";
 import { equals } from "ramda";
 import { useEffect, useMemo, useRef } from "react";
@@ -9,7 +8,7 @@ import { toast } from "sonner";
 import { useChatManagerConnection } from "../providers/ChatManagerProvider";
 import { useChatPanel } from "../providers/ChatPanelContext";
 import { useActionPlanRouteState } from "../routes/plans/index";
-import { decodeRuleRouteName } from "../routes/rules/components/rules.utils";
+import { ruleIriFromRouteName } from "../routes/rules/components/rules.utils";
 import { computePlanSplitSidebarSync } from "./plan-split-sidebar-sync";
 import { useSidebar } from "#components/sidebar/index";
 
@@ -27,7 +26,7 @@ function routeChatContext(planName?: string, ruleName?: string): ChatContext | u
   if (isPresent(ruleName)) {
     return {
       kind: ChatContextKind.RuleEdit,
-      ruleIri: expandPrefix(`:${decodeRuleRouteName(ruleName)}`),
+      ruleIri: ruleIriFromRouteName(ruleName),
     };
   }
 

package/src/hooks/useDatastoreSelection.ts

@@ -1,10 +1,11 @@
+import { switchDatastoreRoutePath } from "@manta-eu/client/shared/constants";
 import { isPresent } from "@manta-eu/lib/present";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useState } from "react";
 import { useLocation } from "react-router";
 import { toast } from "sonner";
 import { datastoreSwitchFallbackPath } from "../lib/datastore-route-paths";
-import { useActiveDatastore, useMantaClient } from "../providers/index";
+import { useActiveDatastore, useLeaveConfirmation, useMantaClient } from "../providers/index";
 
 const switchDatastoreToastId = "switch-datastore" as const;
 
@@ -43,6 +44,7 @@ export function useDatastoreSelection(args: UseDatastoreSelectionArgs = {}) {
   const { mantaBaseUrl, getAccessToken } = useMantaClient();
   const queryClient = useQueryClient();
   const { datastoreId: activeDatastoreId, enterDatastore } = useActiveDatastore();
+  const { confirmLeave, bypass } = useLeaveConfirmation();
   const { pathname, search, hash } = useLocation();
   const [isSwitching, setIsSwitching] = useState(false);
 
@@ -56,13 +58,15 @@ export function useDatastoreSelection(args: UseDatastoreSelectionArgs = {}) {
         toast.error(`No ${kind} selected.`);
         return false;
       }
+      // The switch moves the session itself, so unsaved work is settled first rather than when the route changes.
+      if (!(await confirmLeave())) return false;
 
       setIsSwitching(true);
       toast.loading(`Switching ${kind}...`, { id: switchDatastoreToastId });
 
       try {
         if (!getAccessToken) {
-          const response = await fetch(new URL("/api/switch-datastore", mantaBaseUrl), {
+          const response = await fetch(new URL(switchDatastoreRoutePath, mantaBaseUrl), {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ datastoreId }),
@@ -81,10 +85,10 @@ export function useDatastoreSelection(args: UseDatastoreSelectionArgs = {}) {
         if (activeDatastoreId) {
           const fallback = datastoreSwitchFallbackPath(pathname);
 
-          enterDatastore(datastoreId, { path: fallback ?? `${pathname}${search}${hash}`, replace: true });
+          bypass(() => enterDatastore(datastoreId, { path: fallback ?? `${pathname}${search}${hash}`, replace: true }));
         } else if (getAccessToken) {
           // A token host has no session datastore to switch, so the route is the only place the choice lives.
-          enterDatastore(datastoreId);
+          bypass(() => enterDatastore(datastoreId));
         } else {
           // Entering rotates the QueryClient; on the global tree nothing rotates, so the cache has to go.
           await queryClient.invalidateQueries();
@@ -103,7 +107,9 @@ export function useDatastoreSelection(args: UseDatastoreSelectionArgs = {}) {
     },
     [
       activeDatastoreId,
+      bypass,
       canSwitchDatastore,
+      confirmLeave,
       enterDatastore,
       getAccessToken,
       hash,

package/src/hooks/useExecuteAction.ts

@@ -11,6 +11,8 @@ import { actionDocumentIssue, buildActionDocument, type ExecuteActionTarget } fr
 import { useMantaClient } from "#providers/MantaClientProvider";
 import { invalidateActionPlanQueries } from "#shared/query-keys";
 
+export type { ExecuteActionTarget };
+
 export type ExecuteActionResult =
   | { success: true; workflowId: string; namedGraphIri: string }
   | { success: false; error: string; code: GQLExecuteActionErrorCode };

package/src/hooks/useLoginRedirect.ts

@@ -0,0 +1,66 @@
+import type { UseAuthResult } from "./useAuth";
+import { authErrorParam } from "@manta-eu/client/shared/constants";
+import { isPresent } from "@manta-eu/lib/present";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import { useEffect, useState } from "react";
+
+function redirectTarget(mantaBaseUrl: URL): string | null {
+  const { origin, pathname, search, href } = window.location;
+
+  const requested = new URLSearchParams(search).get("redirect");
+
+  if (isPresent(requested)) return requested;
+
+  if (pathname === "/") return null;
+
+  return origin === mantaBaseUrl.origin ? `${pathname}${search}` : href;
+}
+
+export function buildLoginUrl(mantaBaseUrl: URL): string {
+  const loginUrl = new URL("/login", mantaBaseUrl);
+
+  const redirect = redirectTarget(mantaBaseUrl);
+
+  if (isPresent(redirect)) loginUrl.searchParams.set("redirect", redirect);
+
+  return loginUrl.toString();
+}
+
+export function useLoginRedirect(auth: UseAuthResult) {
+  const { isLoading, error, isSessionValid, contextFailed, user, isOperator, datastore, refetchLoginStatus } = auth;
+
+  const { mantaBaseUrl } = useMantaClient();
+
+  const [authError] = useState(() => {
+    const returned = new URLSearchParams(window.location.search).get(authErrorParam);
+
+    return isPresent(returned) ? returned : null;
+  });
+
+  useEffect(() => {
+    if (isPresent(authError)) window.history.replaceState({}, "", window.location.pathname);
+  }, [authError]);
+
+  const isMissingContext = !isPresent(user) || (!isOperator && !isPresent(datastore));
+  const needsRedirect =
+    !isLoading && !isPresent(error) && !isPresent(authError) && !isSessionValid && !contextFailed && isMissingContext;
+
+  useEffect(() => {
+    if (!needsRedirect) return;
+
+    const checkAndRedirect = () => {
+      if (document.visibilityState !== "visible") return;
+
+      void refetchLoginStatus().then(({ isSessionValid: stillValid }) => {
+        if (!stillValid) window.location.replace(buildLoginUrl(mantaBaseUrl));
+      });
+    };
+
+    checkAndRedirect();
+    document.addEventListener("visibilitychange", checkAndRedirect);
+
+    return () => document.removeEventListener("visibilitychange", checkAndRedirect);
+  }, [needsRedirect, mantaBaseUrl, refetchLoginStatus]);
+
+  return { authError };
+}

package/src/hooks/usePlanLimits.ts

@@ -0,0 +1,97 @@
+import {
+  useActionPlanRulesQuery,
+  useClearStagedRulesMutation,
+  useCommitStagedRulesMutation,
+  useStageRuleOperationMutation,
+  useValidateStagedRulesMutation,
+} from "@manta-eu/client";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { toast } from "sonner";
+import { planLimitRuleOf, planLimitsSaveClient } from "#components/plan-limits/plan-limits-client";
+import type { PlanLimitChange, PlanLimitRule } from "#components/plan-limits/plan-limits-model";
+import { messageOf, type PlanLimitsSaveResult, savePlanLimits } from "#components/plan-limits/plan-limits-save";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import { invalidateGraphDerivedQueries } from "#shared/graph-derived-queries";
+import { invalidateActionPlanQueries } from "#shared/query-keys";
+
+/** The most rules read for one plan; a plan with more shows the first page and says so. */
+export const planLimitsRuleLimit = 100;
+
+export type UsePlanLimitsOptions = {
+  planGraphIri: string | undefined;
+};
+
+export type PlanLimitsHandle = {
+  rules: PlanLimitRule[];
+  /** Rules beyond the first page, left out of the dialog. */
+  omittedRules: number;
+  isLoading: boolean;
+  error: string | null;
+  save: (changes: readonly PlanLimitChange[]) => Promise<PlanLimitsSaveResult>;
+  isSaving: boolean;
+};
+
+export function usePlanLimits(options: UsePlanLimitsOptions): PlanLimitsHandle {
+  const { planGraphIri } = options;
+  const { mantaClient } = useMantaClient();
+  const queryClient = useQueryClient();
+
+  const query = useActionPlanRulesQuery(
+    mantaClient,
+    { namedGraph: planGraphIri ?? "", limit: planLimitsRuleLimit, offset: 0 },
+    { enabled: isPresent(planGraphIri) },
+  );
+  const stageMutation = useStageRuleOperationMutation(mantaClient);
+  const validateMutation = useValidateStagedRulesMutation(mantaClient);
+  const commitMutation = useCommitStagedRulesMutation(mantaClient);
+  const clearMutation = useClearStagedRulesMutation(mantaClient);
+
+  const rules = useMemo(() => (query.data?.rules.rules ?? []).map(planLimitRuleOf), [query.data]);
+  const totalCount = query.data?.rules.count ?? 0;
+  const { refetch } = query;
+  const error =
+    query.data?.rules.error ?? (query.error ? messageOf(query.error, "Failed to load the plan's rules") : null);
+
+  const save = useCallback(
+    async (changes: readonly PlanLimitChange[]): Promise<PlanLimitsSaveResult> => {
+      const result = await savePlanLimits(
+        planLimitsSaveClient(
+          {
+            stage: stageMutation.mutateAsync,
+            validate: validateMutation.mutateAsync,
+            commit: commitMutation.mutateAsync,
+            clear: clearMutation.mutateAsync,
+          },
+          planGraphIri,
+        ),
+        changes,
+      );
+
+      if (result.ok) {
+        toast.success("Limits saved", {
+          description: `${humanCount(result.rulesUpdated, "rule")} updated. Recommended changes refresh now; Manta acts on them at the plan's next run.`,
+        });
+        await invalidateGraphDerivedQueries(queryClient);
+        await invalidateActionPlanQueries(queryClient, planGraphIri);
+      } else {
+        toast.error("Limits not saved", { description: result.error });
+        await refetch();
+      }
+      return result;
+    },
+    [stageMutation, validateMutation, commitMutation, clearMutation, planGraphIri, queryClient, refetch],
+  );
+
+  return {
+    rules,
+    omittedRules: Math.max(0, totalCount - rules.length),
+    isLoading: query.isLoading,
+    error,
+    save,
+    isSaving:
+      stageMutation.isPending || validateMutation.isPending || commitMutation.isPending || clearMutation.isPending,
+  };
+}

package/src/ldo-ui.ts

@@ -22,6 +22,7 @@ export {
   useEntity,
   useEntities,
   useEntitiesByIris,
+  type EntitiesPage,
   type Entity,
   type UseEntitiesByIrisOptions,
   type UseEntitiesOptions,