@manta-eu/react 0.1.10 → 0.2.1

package/src/hooks/use-approve-anyway.ts

@@ -0,0 +1,100 @@
+import { useExecuteAgentActionAdditionMutation } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { isValidFullIri, namespaces } from "@manta-eu/rdf-lib/namespaces";
+import { useQueryClient } from "@tanstack/react-query";
+import { DataFactory } from "ldkit/rdf";
+import { sparql } from "ldkit/sparql";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import type { ManualAction } from "./use-manual-actions";
+import { useSparqlSelect } from "./use-sparql-construct";
+import { buildActionDocument, mintSubjectIri } from "#lib/action-document";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import { invalidateActionPlanQueries } from "#shared/query-keys";
+
+const df = new DataFactory();
+const assetAnalysis = `${namespaces.brand}AssetAnalysis`;
+const assetDecision = `${namespaces.brand}AssetDecision`;
+const decideAssetShape = `${namespaces.brand}DecideAssetShape`;
+
+export type ApproveAnywayHandle = {
+  /** Sends the approval; `reviewKey` names the review it answers, so a later review of the same analysis asks again. */
+  approve: (analysisIri: string, reviewKey: string) => void;
+  approving: ReadonlySet<string>;
+  approved: ReadonlySet<string>;
+};
+
+/** Maps each manual action about a brand analysis to that analysis, the one a person can approve anyway. */
+export function useApprovableAnalyses(actions: readonly ManualAction[]): Map<string, string> {
+  const aboutIris = useMemo(() => {
+    const iris = actions.flatMap(({ aboutIri }) => (isPresent(aboutIri) && isValidFullIri(aboutIri) ? [aboutIri] : []));
+    return [...new Set(iris)].sort();
+  }, [actions]);
+
+  const values = aboutIris.map((iri) => sparql`${df.namedNode(iri)}`).join(" ");
+  const query = isPresent(aboutIris)
+    ? `SELECT ?about WHERE { VALUES ?about { ${values} } ?about a ${sparql`${df.namedNode(assetAnalysis)}`} . }`
+    : "";
+
+  const { data } = useSparqlSelect({
+    query,
+    queryKey: ["ldo-ui", "approvable-analyses", aboutIris],
+    enabled: isPresent(aboutIris),
+  });
+
+  return useMemo(() => {
+    const analyses = new Set((data ?? []).flatMap((row) => row.get("about")?.value ?? []));
+    const approvable = new Map<string, string>();
+    for (const action of actions) {
+      if (isPresent(action.aboutIri) && analyses.has(action.aboutIri)) {
+        approvable.set(action.subjectIri, action.aboutIri);
+      }
+    }
+    return approvable;
+  }, [actions, data]);
+}
+
+/** Records a person's approval of an analysis that was not confirmed on-brand, so the rules publish it anyway. */
+export function useApproveAnyway(planGraphIri: string): ApproveAnywayHandle {
+  const queryClient = useQueryClient();
+  const { mantaClient } = useMantaClient();
+  const { mutateAsync: startAddition } = useExecuteAgentActionAdditionMutation(mantaClient);
+  const inFlight = useRef(new Set<string>());
+  const [approving, setApproving] = useState<ReadonlySet<string>>(() => new Set());
+  const [approved, setApproved] = useState<ReadonlySet<string>>(() => new Set());
+
+  const approve = useCallback(
+    (analysisIri: string, reviewKey: string) => {
+      if (inFlight.current.has(analysisIri)) return;
+      inFlight.current.add(analysisIri);
+      setApproving(new Set(inFlight.current));
+      const subjectIri = mintSubjectIri(assetDecision);
+      const properties = buildActionDocument(
+        { subjectIri, rdfType: assetDecision },
+        {
+          [`${namespaces.brand}decisionOnAsset`]: { "@id": analysisIri },
+          [`${namespaces.brand}decision`]: "approved",
+        },
+      );
+      void startAddition({
+        input: { subjectIri, rdfType: assetDecision, actionShape: decideAssetShape, properties },
+      })
+        .then(({ executeActionAddition }) => {
+          if (!executeActionAddition.success) throw new Error(executeActionAddition.error ?? "The approval failed");
+          setApproved((previous) => new Set(previous).add(reviewKey));
+          toast.success("Approved. It is uploaded, and this review closes, when the plan next runs.");
+          void invalidateActionPlanQueries(queryClient, planGraphIri);
+        })
+        .catch((error: unknown) => {
+          toast.error(error instanceof Error ? error.message : "The approval failed");
+        })
+        .finally(() => {
+          inFlight.current.delete(analysisIri);
+          setApproving(new Set(inFlight.current));
+        });
+    },
+    [startAddition, queryClient, planGraphIri],
+  );
+
+  return { approve, approving, approved };
+}

package/src/hooks/useAuth.ts

@@ -26,7 +26,7 @@ export type UseAuthResult = {
   isAuthenticated: boolean;
   isOperator: boolean;
   canManageTeam: boolean;
-  canManageExternalApps: boolean;
+  canManageCustomApps: boolean;
   orgRoles: OrgRoleDefinition[];
   canManageIntegrations: boolean;
   canManageStreams: boolean;
@@ -79,7 +79,7 @@ export const contextResponseSchema = z.object({
     canManageStreams: z.boolean().optional().default(false),
     canManageSharedMemories: z.boolean().optional().default(false),
     canManageTeam: z.boolean().optional().default(false),
-    canManageExternalApps: z.boolean().optional().default(false),
+    canManageCustomApps: z.boolean().optional().default(false),
     datastore: datastoreSchema.nullish(),
   }),
   datastores: z.array(datastoreSchema),
@@ -297,7 +297,7 @@ export function useAuth(): UseAuthResult {
     datastoreAccessGranted: contextData?.datastoreAccessGranted ?? true,
     isOperator: contextData?.user?.isOperator ?? false,
     canManageTeam: contextData?.user?.canManageTeam ?? false,
-    canManageExternalApps: contextData?.user?.canManageExternalApps ?? false,
+    canManageCustomApps: contextData?.user?.canManageCustomApps ?? false,
     orgRoles: contextData?.orgRoles ?? [],
     canManageIntegrations: contextData?.user?.canManageIntegrations ?? false,
     canManageStreams: contextData?.user?.canManageStreams ?? false,

package/src/hooks/useOnboardingState.ts

@@ -1,7 +1,7 @@
+import { onboardingCompletedCookieName as onboardingCookieName } from "@manta-eu/client/shared/constants";
 import Cookies from "js-cookie";
 import { useCallback, useState } from "react";
 
-const onboardingCookieName = "manta-onboarding-completed";
 const onboardingCookieExpiryDays = 365;
 
 type OnboardingState = {

package/src/ldo-ui.ts

@@ -268,6 +268,7 @@ export type {
   EntityView,
   EntityViewProps,
   LayoutDirection,
+  NodeRelation,
   OnNodeContextMenu,
   RDFNode,
   RDFNodeData,
@@ -275,6 +276,13 @@ export type {
   SampleInstance,
 } from "./graph/types";
 export { jsonLdToRdfGraph } from "./graph/jsonld-bridge";
+export {
+  EntityLinkProvider,
+  useEntityLink,
+  type EntityLinkComponent,
+  type EntityLinkProps,
+  type EntityLinkProviderProps,
+} from "./graph/entity-link";
 export { rdfGraphToNodesAndEdges, rdfGraphToSummaryNodesAndEdges } from "./graph/graph-model";
 export {
   applyDagreLayout,

package/src/lib/datastore-route-table.ts

@@ -17,7 +17,8 @@ export type RouteElements = {
   Integrations?: ReactNode;
   ShopifyConnect?: ReactNode;
   Team?: ReactNode;
-  ExternalApps?: ReactNode;
+  CustomApps?: ReactNode;
+  CustomAppUsers?: ReactNode;
   DataExplorerLayout?: ReactNode;
   DataExplorerIndex?: ReactNode;
   DataExplorerRecent?: ReactNode;
@@ -45,7 +46,8 @@ export const globalRoutes: RouteDefinition[] = [
   { path: "/datastores", render: (e) => e.Datastores || notFoundElement(e) },
   // Global, not datastore-scoped: Shopify sends the merchant here before any datastore is known.
   { path: "/shopify/connect", render: (e) => e.ShopifyConnect || notFoundElement(e) },
-  { path: "/custom-apps", render: (e) => e.ExternalApps || notFoundElement(e) },
+  { path: "/custom-apps", render: (e) => e.CustomApps || notFoundElement(e) },
+  { path: "/custom-apps/:clientId/users", render: (e) => e.CustomAppUsers || notFoundElement(e) },
 ];
 
 export const datastoreRoutes: RouteDefinition[] = [

package/src/lib/manual-actions.ts

@@ -16,6 +16,7 @@ export function getPendingManualActions(actions: readonly ManualAction[] | undef
   return (actions ?? []).filter(isPendingManualAction);
 }
 
-export function getResolvedManualActions(actions: readonly ManualAction[] | undefined): ManualAction[] {
-  return (actions ?? []).filter(isResolvedManualAction);
+/** Names the review an approval answers: the step, as of the analysis it currently reports. */
+export function approvalReviewKey(action: Pick<ManualAction, "subjectIri" | "observedValue">): string {
+  return `${action.subjectIri}|${action.observedValue ?? ""}`;
 }

package/src/providers/ActiveChatProvider.tsx

@@ -109,7 +109,9 @@ function ThinkChatSession(props: ThinkChatSessionProps) {
     sub: [{ agent: "ThinkChat", name: conversationId }],
     host,
     query: socketAuth.query,
-    ...("cacheTtl" in socketAuth ? { cacheTtl: socketAuth.cacheTtl } : {}),
+    ...("enabled" in socketAuth
+      ? { enabled: socketAuth.enabled, shouldReconnectOnClose: socketAuth.shouldReconnectOnClose }
+      : {}),
     onClose: handleAgentClose,
     onMessage: handleAgentMessage,
   });

package/src/providers/AuthContext.ts

@@ -9,7 +9,7 @@ export type AuthContextValue = Pick<
   | "logout"
   | "isOperator"
   | "canManageTeam"
-  | "canManageExternalApps"
+  | "canManageCustomApps"
   | "orgRoles"
   | "canManageIntegrations"
   | "canManageStreams"
@@ -18,6 +18,8 @@ export type AuthContextValue = Pick<
   | "allowedModels"
 > & {
   user: User;
+  // Only Manta's own web app may list the apps connected to someone; any other host's token is refused.
+  canDisconnectCustomApps?: boolean;
 };
 
 export const AuthContext = createContext<AuthContextValue | undefined>(undefined);

package/src/providers/ChatManagerProvider.tsx

@@ -80,6 +80,7 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
   const conversationSelectionRef = useRef(conversationSelection);
   const pathnameRef = useRef(location.pathname);
   const routedConversationIdRef = useRef(routedConversationId);
+  const pendingPlanNavigationRef = useRef<{ pathname: string } | undefined>(undefined);
 
   // Where navigate() was last sent, which react-router's deferred location has not reached yet.
   const requestedPathRef = useRef(location.pathname);
@@ -96,7 +97,9 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
     basePath: chatManagerBasePath,
     host: mantaBaseUrl.host,
     query: socketAuth.query,
-    ...("cacheTtl" in socketAuth ? { cacheTtl: socketAuth.cacheTtl } : {}),
+    ...("enabled" in socketAuth
+      ? { enabled: socketAuth.enabled, shouldReconnectOnClose: socketAuth.shouldReconnectOnClose }
+      : {}),
   });
 
   const listConversations = useCallback(
@@ -351,7 +354,11 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
   );
 
   const selectContext = useCallback(
-    (context: ChatContext): Promise<void> => transitionContext({ kind: "select", context }).then(() => undefined),
+    (context: ChatContext): Promise<void> => {
+      // The current page may synchronize its old context while an explicit plan selection is waiting.
+      if (pendingPlanNavigationRef.current?.pathname === pathnameRef.current) return Promise.resolve();
+      return transitionContext({ kind: "select", context }).then(() => undefined);
+    },
     [transitionContext],
   );
 
@@ -390,17 +397,20 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
 
       const context = { kind: ChatContextKind.Plan, planGraphIri: planIri } as const;
       const source = activeConversationFromSelection(conversationSelectionRef.current);
-      if (source) {
-        try {
+      const navigation = { pathname: pathnameRef.current };
+      pendingPlanNavigationRef.current = navigation;
+      try {
+        if (source) {
           const transitioned = await reassignCurrentConversation(context);
           if (!transitioned) return;
-        } catch {
-          toast.error("Couldn't move this chat to the plan. Please try again.");
-          return;
         }
-      }
 
-      void navigate(buildPlanHref(planIri), { state: { fromChat: true } });
+        void navigate(buildPlanHref(planIri), { state: { fromChat: true } });
+      } catch {
+        toast.error("Couldn't move this chat to the plan. Please try again.");
+      } finally {
+        if (pendingPlanNavigationRef.current === navigation) pendingPlanNavigationRef.current = undefined;
+      }
     },
     [navigate, onSelectPlan, reassignCurrentConversation],
   );

package/src/providers/chat-socket-auth.ts

@@ -1,44 +1,123 @@
 import { chatTicketPath, chatTicketQueryParam } from "@manta-eu/client/shared/chat-manager";
 import { datastoreHeader, datastoreQueryParam } from "@manta-eu/client/shared/datastore-path";
 import { isPresent } from "@manta-eu/lib/present";
-import { useCallback, useEffect, useMemo } from "react";
+import { isTerminalCloseEvent } from "agents/client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { providerFetch } from "./manta-client-context";
 import { useMantaClient } from "./MantaClientProvider";
 
-// A reconnect always fetches a new ticket, and an expiring cache entry would replace a live socket.
-const ticketCacheTtlMs = 24 * 60 * 60 * 1000;
 const tokenRefreshCheckMs = 30_000;
+const reconnectDelaysMs = [0, 1_000, 2_000, 5_000, 10_000];
+const dropCountResetMs = 60_000;
+const stableConnectionMs = 5_000;
+// Any other 4xx is Manta refusing this person or datastore for good, so asking again cannot help.
+const retriedRefusals = new Set([401, 408, 429]);
 
 export type ChatSocketAuth =
   | { query: Record<string, string>; credentials: "include" }
-  | { query: () => Promise<Record<string, string>>; cacheTtl: number; credentials: "omit" };
+  | {
+      query: Record<string, string>;
+      enabled: boolean;
+      shouldReconnectOnClose: (event: CloseEvent) => boolean;
+      credentials: "omit";
+    };
+
+type Ticketed = { datastoreKey: string; query: Record<string, string> };
 
 function ticketFrom(body: unknown): string | undefined {
   if (typeof body !== "object" || body === null || !("ticket" in body)) return undefined;
   return typeof body.ticket === "string" ? body.ticket : undefined;
 }
 
+// partysocket clears shouldReconnect before a close it was asked for: an unmount, or a socket being replaced.
+function isRequestedClose(event: CloseEvent): boolean {
+  const target: unknown = event.target;
+  return typeof target === "object" && target !== null && "shouldReconnect" in target && !target.shouldReconnect;
+}
+
+/**
+ * A ticket is spent on its first connect, and partysocket would reconnect to the same URL, so the socket never
+ * reconnects by itself: each connect waits for a new ticket, and a dropped socket asks for one.
+ */
 export function useChatSocketAuth(datastoreQuery: Record<string, string>): ChatSocketAuth {
   const client = useMantaClient();
   const { getAccessToken, mantaBaseUrl } = client;
   const authorizedFetch = providerFetch(client);
+  const authorizedFetchRef = useRef(authorizedFetch);
+  authorizedFetchRef.current = authorizedFetch;
+  const hasAccessToken = getAccessToken !== undefined;
+  const datastoreKey = JSON.stringify(datastoreQuery);
+  const datastoreQueryRef = useRef(datastoreQuery);
+  datastoreQueryRef.current = datastoreQuery;
+  const [ticketed, setTicketed] = useState<Ticketed>();
+  const [connectRequest, setConnectRequest] = useState(0);
+  const drops = useRef({ count: 0, lastAt: 0 });
+  const ticketedAt = useRef<number>(undefined);
 
-  const ticketQuery = useCallback(async () => {
-    const response = await authorizedFetch(new URL(`/${chatTicketPath}`, mantaBaseUrl), {
-      method: "POST",
-      headers: datastoreHeader(datastoreQuery[datastoreQueryParam]),
-    });
-    const ticket = response.ok ? ticketFrom(await response.json()) : undefined;
-    if (!isPresent(ticket)) throw new Error(`Manta refused a chat ticket (${response.status})`);
-    return { ...datastoreQuery, [chatTicketQueryParam]: ticket };
-  }, [authorizedFetch, mantaBaseUrl, datastoreQuery]);
+  // A socket that stayed up starts the backoff over; one dropped at once, as a server refusing it would, does not.
+  const recordDrop = useCallback((socketClosed = false) => {
+    const now = Date.now();
+    const stayedUp = socketClosed && ticketedAt.current !== undefined && now - ticketedAt.current >= stableConnectionMs;
+    const fresh = stayedUp || now - drops.current.lastAt > dropCountResetMs;
+    drops.current = { count: fresh ? 1 : drops.current.count + 1, lastAt: now };
+    setConnectRequest((request) => request + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!hasAccessToken) return;
+    setTicketed((held) => (held?.datastoreKey === datastoreKey ? held : undefined));
+    let cancelled = false;
+    const delay = reconnectDelaysMs[Math.min(Math.max(drops.current.count - 1, 0), reconnectDelaysMs.length - 1)];
+    const timer = setTimeout(() => {
+      const query = datastoreQueryRef.current;
+      authorizedFetchRef
+        .current(new URL(`/${chatTicketPath}`, mantaBaseUrl), {
+          method: "POST",
+          headers: datastoreHeader(query[datastoreQueryParam]),
+        })
+        .then(async (response) => {
+          if (response.status >= 400 && response.status < 500 && !retriedRefusals.has(response.status)) {
+            if (!cancelled) console.warn(`Manta refused a chat ticket (${response.status}); not asking again`);
+            return;
+          }
+          const ticket = response.ok ? ticketFrom(await response.json()) : undefined;
+          if (!isPresent(ticket)) throw new Error(`Manta refused a chat ticket (${response.status})`);
+          if (cancelled) return;
+          ticketedAt.current = Date.now();
+          setTicketed({ datastoreKey, query: { ...query, [chatTicketQueryParam]: ticket } });
+        })
+        .catch((error: unknown) => {
+          if (cancelled) return;
+          console.warn("Could not get a chat ticket", error);
+          recordDrop();
+        });
+    }, delay);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [hasAccessToken, mantaBaseUrl, datastoreKey, connectRequest, recordDrop]);
+
+  const shouldReconnectOnClose = useCallback(
+    (event: CloseEvent) => {
+      if (!isRequestedClose(event) && !isTerminalCloseEvent(event)) recordDrop(true);
+      return false;
+    },
+    [recordDrop],
+  );
 
+  const ticketQuery = ticketed?.datastoreKey === datastoreKey ? ticketed.query : undefined;
   return useMemo(
     () =>
-      getAccessToken
-        ? { query: ticketQuery, cacheTtl: ticketCacheTtlMs, credentials: "omit" as const }
+      hasAccessToken
+        ? {
+            query: ticketQuery ?? datastoreQuery,
+            enabled: ticketQuery !== undefined,
+            shouldReconnectOnClose,
+            credentials: "omit" as const,
+          }
         : { query: datastoreQuery, credentials: "include" as const },
-    [getAccessToken, ticketQuery, datastoreQuery],
+    [hasAccessToken, ticketQuery, datastoreQuery, shouldReconnectOnClose],
   );
 }
 

package/src/providers/index.tsx

@@ -1,9 +1,12 @@
 import { defaultDeployment } from "@manta-eu/auth/default-deployment";
 import type { AccessTokenSource } from "@manta-eu/client";
+import { entityPath } from "@manta-eu/client/shared/explorer-paths";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
 import type { ReactNode } from "react";
 import { useState } from "react";
+import { Link } from "react-router";
+import { EntityLinkProvider, type EntityLinkProps } from "../graph/entity-link";
 import { ActiveDatastoreProvider, ActiveDatastoreRouter, useActiveDatastore } from "./ActiveDatastoreProvider";
 import { GenerateStructuredDataProvider } from "./GenerateStructuredDataProvider";
 import { KnowledgeGraphPollingProvider } from "./KnowledgeGraphPollingProvider";
@@ -89,6 +92,16 @@ function CoreProviders(props: ProvidersProps) {
   );
 }
 
+function RecordEntityLink(props: EntityLinkProps) {
+  const { iri, className, children } = props;
+
+  return (
+    <Link to={entityPath(iri)} className={className} onClick={(event) => event.stopPropagation()}>
+      {children}
+    </Link>
+  );
+}
+
 export function Providers(props: ProvidersProps) {
   const { children, ...coreProps } = props;
 
@@ -97,7 +110,9 @@ export function Providers(props: ProvidersProps) {
       <ThemeProvider>
         <CoreProviders {...coreProps}>
           <ActiveDatastoreRouter>
-            <NuqsAdapter>{children}</NuqsAdapter>
+            <NuqsAdapter>
+              <EntityLinkProvider component={RecordEntityLink}>{children}</EntityLinkProvider>
+            </NuqsAdapter>
           </ActiveDatastoreRouter>
         </CoreProviders>
       </ThemeProvider>

package/src/routes/activity/detail/ActivityChanges.tsx

@@ -8,6 +8,7 @@ import { useIntersectionObserver } from "usehooks-ts";
 import { DiffRow } from "../change-display";
 import { EntityNodeView, subsumesChangeRows } from "./EntityNodeView";
 import { LazyMount, viewportOverscan } from "./LazyMount";
+import { NoChangesMessage } from "./NoChangesMessage";
 import { useEntityNodes, type ActivityChangeGroup, type EntityNode } from "#ldo-ui";
 import { cn } from "#lib/utils";
 import { entityPath } from "#routes/data-explorer/namespaces";
@@ -52,10 +53,11 @@ type ChangeGroupProps = {
   node?: EntityNode;
   nodesLoading: boolean;
   scrollRoot: HTMLElement | null;
+  showLinks: boolean;
 };
 
 function ChangeGroup(props: ChangeGroupProps) {
-  const { group, selected, onJumpTo, node, nodesLoading, scrollRoot } = props;
+  const { group, selected, onJumpTo, node, nodesLoading, scrollRoot, showLinks } = props;
 
   // Answered from the change's own triples until the fetch lands, so the rows do not show then vanish.
   const typedCard = useMemo(
@@ -87,7 +89,7 @@ function ChangeGroup(props: ChangeGroupProps) {
           >
             {group.entityLabel}
           </button>
-          {isFullIri(group.entityIri) && (
+          {showLinks && isFullIri(group.entityIri) && (
             <Link
               to={entityPath(group.entityIri)}
               aria-label={`Open ${group.entityLabel} in the data explorer`}
@@ -145,10 +147,11 @@ type ChangeBlockProps = {
   activeIri: string | null;
   onJumpTo: (entityIri: string) => void;
   scrollRoot: HTMLElement | null;
+  showLinks: boolean;
 };
 
 function ChangeBlock(props: ChangeBlockProps) {
-  const { groups, activeIri, onJumpTo, scrollRoot } = props;
+  const { groups, activeIri, onJumpTo, scrollRoot, showLinks } = props;
 
   const { ref, isIntersecting } = useIntersectionObserver({
     root: scrollRoot,
@@ -173,6 +176,7 @@ function ChangeBlock(props: ChangeBlockProps) {
             .find(isPresent)}
           nodesLoading={isLoading}
           scrollRoot={scrollRoot}
+          showLinks={showLinks}
         />
       ))}
     </div>
@@ -188,10 +192,21 @@ export type ActivityChangesProps = {
   scrollTarget: { iri: string; nonce: number } | null;
   // Embedded runs in a short box, where the full-page scroll-room spacer would over-scroll.
   inline?: boolean;
+  running?: boolean;
+  showLinks?: boolean;
 };
 
 export function ActivityChanges(props: ActivityChangesProps) {
-  const { groups, activeIri, onActivate, onJumpTo, scrollTarget, inline = false } = props;
+  const {
+    groups,
+    activeIri,
+    onActivate,
+    onJumpTo,
+    scrollTarget,
+    inline = false,
+    running = false,
+    showLinks = true,
+  } = props;
 
   const blocks = useMemo(
     () =>
@@ -260,7 +275,7 @@ export function ActivityChanges(props: ActivityChangesProps) {
   if (!isPresent(groups)) {
     return (
       <div className="rounded-xl border border-muted-border bg-card p-5">
-        <p className="typography-small text-muted-foreground">No recorded changes.</p>
+        <NoChangesMessage running={running} />
       </div>
     );
   }
@@ -291,6 +306,7 @@ export function ActivityChanges(props: ActivityChangesProps) {
             activeIri={activeIri}
             onJumpTo={onJumpTo}
             scrollRoot={scrollRoot}
+            showLinks={showLinks}
           />
         ))}
 

package/src/routes/activity/detail/ActivityDetail.tsx

@@ -41,10 +41,20 @@ export type ActivityDetailProps = {
   variant?: "page" | "embedded";
   // Embedded only — lead-in above the run, rendered after it loads.
   caption?: ReactNode;
+  // Off when the host has no route for the run page or the data explorer.
+  showLinks?: boolean;
 };
 
 export function ActivityDetail(props: ActivityDetailProps) {
-  const { activityIri, leading, layout: controlledLayout, onLayoutChange, variant = "page", caption } = props;
+  const {
+    activityIri,
+    leading,
+    layout: controlledLayout,
+    onLayoutChange,
+    variant = "page",
+    caption,
+    showLinks = true,
+  } = props;
   const embedded = variant === "embedded";
 
   const [internalLayout, setInternalLayout] = useState<ActivityLayout>("timeline");
@@ -107,9 +117,13 @@ export function ActivityDetail(props: ActivityDetailProps) {
       />
     ) : null;
 
+  const isRunning = activity?.status === "running";
+
   const changes = (
     <ActivityChanges
       inline={embedded}
+      running={isRunning}
+      showLinks={showLinks}
       groups={groups}
       activeIri={activeIri}
       onActivate={activate}
@@ -140,7 +154,7 @@ export function ActivityDetail(props: ActivityDetailProps) {
       <div className="flex h-full min-h-0 flex-col gap-3">
         {isPresent(caption) && <p className="typography-small text-muted-foreground shrink-0">{caption}</p>}
         <div className="flex shrink-0 flex-wrap items-center gap-2">
-          {isPresent(activityIri) ? (
+          {showLinks && isPresent(activityIri) ? (
             <Link
               to={buildActivityHref(activityIri)}
               title={`Open ${activity.planLabel} run detail`}
@@ -160,7 +174,7 @@ export function ActivityDetail(props: ActivityDetailProps) {
           <Banner label={activity.errorMessage} className="max-h-40 shrink-0 overflow-y-auto" />
         )}
 
-        {isChangeSetLoading ? (
+        {isChangeSetLoading && !isRunning ? (
           <div className="flex items-center justify-center py-10">
             <Loader className="size-5" />
           </div>
@@ -234,7 +248,7 @@ export function ActivityDetail(props: ActivityDetailProps) {
           ) : layout === "steps" ? (
             <>
               <div className="min-h-0 flex-1 overflow-y-auto sm:hidden">
-                <ActivityStepsRail groups={groups} activeIri={activeIri} onSelect={activate} />
+                <ActivityStepsRail groups={groups} activeIri={activeIri} onSelect={activate} running={isRunning} />
                 <div className="border-t border-muted-border">
                   <ActivityStepDetail group={activeGroup} />
                 </div>
@@ -243,7 +257,12 @@ export function ActivityDetail(props: ActivityDetailProps) {
                 <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
                   <ResizablePanel defaultSize={26} minSize={18} maxSize={50} className="min-h-0">
                     <div className="h-full overflow-y-auto">
-                      <ActivityStepsRail groups={groups} activeIri={activeIri} onSelect={activate} />
+                      <ActivityStepsRail
+                        groups={groups}
+                        activeIri={activeIri}
+                        onSelect={activate}
+                        running={isRunning}
+                      />
                     </div>
                   </ResizablePanel>
 

package/src/routes/activity/detail/ActivityStepsRail.tsx

@@ -1,6 +1,7 @@
 import { humanCount } from "@manta-eu/lib/humanize";
 import { isPresent } from "@manta-eu/lib/present";
 import { formatStepTime } from "../format";
+import { NoChangesMessage } from "./NoChangesMessage";
 import type { ActivityChangeGroup } from "#ldo-ui";
 import { cn } from "#lib/utils";
 
@@ -8,15 +9,16 @@ export type ActivityStepsRailProps = {
   groups: ActivityChangeGroup[];
   activeIri: string | null;
   onSelect: (entityIri: string) => void;
+  running?: boolean;
 };
 
 export function ActivityStepsRail(props: ActivityStepsRailProps) {
-  const { groups, activeIri, onSelect } = props;
+  const { groups, activeIri, onSelect, running = false } = props;
 
   if (!isPresent(groups)) {
     return (
       <div className="p-4">
-        <p className="typography-small text-muted-foreground">No recorded changes.</p>
+        <NoChangesMessage running={running} />
       </div>
     );
   }