@manta-eu/react 0.2.0 → 0.3.0

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/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/find-latest-staged-rule.ts

@@ -3,5 +3,5 @@ import { isStagedManageRulesResult } from "../components/tool-invocation-card/ty
 import { findLatestToolOutput } from "./find-latest-tool-output";
 
 export function findLatestStagedRuleIri(messages: ChatUIMessage[]): string | null {
-  return findLatestToolOutput(messages, "tool-manageRDFoxRules", isStagedManageRulesResult)?.ruleIri ?? null;
+  return findLatestToolOutput(messages, "tool-manageRules", isStagedManageRulesResult)?.ruleIri ?? null;
 }

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/lib/tool-icons.ts

@@ -27,12 +27,12 @@ import {
 import { match } from "ts-pattern";
 
 const toolIconMap: Record<ToolName, LucideIcon> = {
-  getRDFoxFacts: Database,
-  addRDFoxFacts: Database,
-  manageRDFoxFacts: Database,
-  getRDFoxRules: Brain,
-  explainRDFoxRules: Brain,
-  manageRDFoxRules: Brain,
+  queryKnowledgeGraph: Database,
+  addFacts: Database,
+  manageFacts: Database,
+  getRules: Brain,
+  explainFact: Brain,
+  manageRules: Brain,
   generateChart: TrendingUp,
   scheduleTask: Clock,
   listScheduledTasks: Clock,

package/src/lib/tool-names.ts

@@ -1,7 +1,6 @@
 export function formatToolName(toolType: string): string {
   const name = toolType.replace("tool-", "");
   return name
-    .replace(/RDFox/gi, "")
     .replace(/([A-Z])/g, " $1")
     .replace(/^./, (str) => str.toUpperCase())
     .replace(/\s+/g, " ")

package/src/ontology/skolem.ts

@@ -5,7 +5,7 @@ export type SkolemPart = { type: "iri"; value: string } | { type: "literal"; val
 const blankNodePrefixes = ["_:", "_."];
 const segmentTagLength = 2;
 
-// RDFox datatype tags: "02" = IRI, "05" = string; other datatypes are binary-encoded.
+// The datastore datatype tags: "02" = IRI, "05" = string; other datatypes are binary-encoded.
 const segmentTypeByTag: Record<string, SkolemPart["type"]> = {
   "02": "iri",
   "05": "literal",
@@ -29,7 +29,7 @@ function decodeSegment(segment: string): string | undefined {
   }
 }
 
-// RDFox skolem labels: dot-separated base64 segments, each prefixed with a 2-char type tag.
+// The datastore skolem labels: dot-separated base64 segments, each prefixed with a 2-char type tag.
 export function decodeSkolem(term: string): SkolemPart[] | undefined {
   const prefix = blankNodePrefixes.find((candidate) => term.startsWith(candidate));
 

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/ChatManagerProvider.tsx

@@ -97,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(

package/src/providers/KnowledgeGraphStateProvider.tsx

@@ -135,7 +135,7 @@ export function KnowledgeGraphStateProvider(props: KnowledgeGraphStateProviderPr
 
     if (currentDataVersion && isPresent(previousDataVersion) && previousDataVersion !== currentDataVersion) {
       void invalidateGraphDerivedQueries(queryClient);
-      console.debug("Knowledge graph dataVersion changed, invalidating RDFox-related queries");
+      console.debug("Knowledge graph dataVersion changed, invalidating the knowledge graph queries");
     }
 
     if (currentDataVersion && currentDataVersion !== previousDataVersion) {

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>
     );
   }

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

@@ -42,7 +42,7 @@ export function ActivityTimeline(props: ActivityTimelineProps) {
 
   if (!isPresent(bars)) {
     return (
-      <div className="rounded-xl border border-muted-border bg-card px-5 py-4">
+      <div className="shrink-0 rounded-xl border border-muted-border bg-card px-5 py-4">
         <p className="typography-small text-muted-foreground">No timestamps to plot.</p>
       </div>
     );
@@ -57,7 +57,7 @@ export function ActivityTimeline(props: ActivityTimelineProps) {
   const trackHeightPx = Math.max(laneCount, 1) * rowHeightPx;
 
   return (
-    <div className="overflow-auto rounded-xl border border-muted-border bg-card">
+    <div className="shrink-0 overflow-auto rounded-xl border border-muted-border bg-card">
       <div className="px-5 pb-3 pt-3" style={{ minWidth: `${trackMinWidthPx}px` }}>
         <div className="relative h-4">
           {ticks.map((tick, index) => (

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

@@ -0,0 +1,20 @@
+import { Loader } from "#components/loader/index";
+
+type NoChangesMessageProps = {
+  running?: boolean;
+};
+
+export function NoChangesMessage(props: NoChangesMessageProps) {
+  const { running = false } = props;
+
+  if (!running) {
+    return <p className="typography-small text-muted-foreground">No recorded changes.</p>;
+  }
+
+  return (
+    <p role="status" className="flex items-center gap-2 typography-small text-muted-foreground">
+      <Loader className="size-4 shrink-0" />
+      Running. Changes appear as each step completes.
+    </p>
+  );
+}

package/src/routes/data-explorer/class-properties.ts

@@ -1,4 +1,4 @@
-import { ontologyGraphIri, shaclGraphIri } from "@manta-eu/client/shared/rdf-namespaces";
+import { ontologyGraphIri, shaclGraph } from "@manta-eu/client/shared/rdf-namespaces";
 import { isPresent } from "@manta-eu/lib/present";
 import { DataFactory } from "ldkit/rdf";
 import { SELECT } from "ldkit/sparql";
@@ -32,7 +32,7 @@ function classPropertiesQuery(classIri: string): string {
 
 function shapeConstraintsQuery(classIri: string): string {
   return `${prefixes}${SELECT`?path ?minCount ?allowedValue`.WHERE`
-  VALUES ?shapeGraph { ${df.namedNode(ontologyGraphIri)} ${df.namedNode(shaclGraphIri)} }
+  VALUES ?shapeGraph { ${df.namedNode(ontologyGraphIri)} ${df.namedNode(shaclGraph)} }
   GRAPH ?shapeGraph {
     ?shape sh:targetClass ${df.namedNode(safeIri(classIri))} ; sh:property ?propertyShape .
     ?propertyShape sh:path ?path .