@manta-eu/react 0.5.0 → 0.6.0

package/src/components/chat-view/Chat.tsx

@@ -16,7 +16,7 @@ import { humanCount } from "@manta-eu/lib/humanize";
 import { isPresent } from "@manta-eu/lib/present";
 import type { ChatStatus, FileUIPart } from "ai";
 import { ArrowUp } from "lucide-react";
-import type { ReactNode } from "react";
+import type { ChangeEvent, ReactNode, RefObject } from "react";
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { match, P } from "ts-pattern";
@@ -138,9 +138,41 @@ export function useInitialPrompt(initialPrompt: string | undefined, submit: (pro
   }, [initialPrompt, isConversationLoading, activeConversation, submit]);
 }
 
+export type ComposerCarryOver = { conversationId: string | undefined; text: string };
+
+/** The unsent text a remounted composer starts with: its own chat's, or that of the blank chat it just became. */
+export function carriedComposerText(
+  carryOver: ComposerCarryOver,
+  conversationId: string | undefined,
+  hasPendingMessage: boolean,
+): string {
+  if (carryOver.conversationId === conversationId) return carryOver.text;
+  return carryOver.conversationId === undefined && hasPendingMessage ? carryOver.text : "";
+}
+
+function useComposerCarryOver(
+  carryOverRef: RefObject<ComposerCarryOver>,
+  conversationId: string | undefined,
+  hasPendingMessage: boolean,
+) {
+  const [initialText] = useState(() => carriedComposerText(carryOverRef.current, conversationId, hasPendingMessage));
+  const rememberText = useCallback(
+    (text: string) => {
+      carryOverRef.current = { conversationId, text };
+    },
+    [carryOverRef, conversationId],
+  );
+
+  useEffect(() => rememberText(initialText), [rememberText, initialText]);
+
+  return { initialText: isPresent(initialText) ? initialText : undefined, rememberText };
+}
+
 export function Chat(props: ChatProps) {
   const turnState = useChatTurnState();
-  const content = <ChatContent {...props} turnState={turnState} />;
+  // ChatContent remounts when a blank chat becomes a conversation; the composer's unsent text outlives it here.
+  const composerCarryOver = useRef<ComposerCarryOver>({ conversationId: undefined, text: "" });
+  const content = <ChatContent {...props} turnState={turnState} composerCarryOver={composerCarryOver} />;
 
   return <ActiveChatProvider>{props.isEmbedded ? <Suspense>{content}</Suspense> : content}</ActiveChatProvider>;
 }
@@ -208,7 +240,12 @@ export function chatIsConnectingOrSyncing(args: ChatConnectingArgs): boolean {
   return !args.isBlankChat && !args.hasMessages && (!args.isSocketOpen || !args.isTranscriptSynced);
 }
 
-function ChatContent(props: ChatProps & { turnState: ChatTurnState }) {
+type ChatContentProps = ChatProps & {
+  turnState: ChatTurnState;
+  composerCarryOver: RefObject<ComposerCarryOver>;
+};
+
+function ChatContent(props: ChatContentProps) {
   const {
     datastore,
     user,
@@ -225,6 +262,7 @@ function ChatContent(props: ChatProps & { turnState: ChatTurnState }) {
     mark,
     renderMenuItems,
     turnState,
+    composerCarryOver,
   } = props;
 
   const assistantName = useAssistantName();
@@ -377,6 +415,22 @@ function ChatContent(props: ChatProps & { turnState: ChatTurnState }) {
   );
 
   const composerDraft = useComposerDraft(initialDraft, handleAgentSubmit);
+  const { initialText: carriedText, rememberText } = useComposerCarryOver(
+    composerCarryOver,
+    activeConversation?.id,
+    hasPendingMessage,
+  );
+  const submitComposer = useCallback(
+    (value: string, files: File[]) => {
+      rememberText("");
+      return composerDraft.onSubmit(value, files);
+    },
+    [composerDraft, rememberText],
+  );
+  const rememberComposerText = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => rememberText(event.target.value),
+    [rememberText],
+  );
 
   const handleConversationStarterSubmit = useCallback(
     (value: string) => {
@@ -584,9 +638,9 @@ function ChatContent(props: ChatProps & { turnState: ChatTurnState }) {
 
               <ChatInput
                 key={composerDraft.key}
-                initialValue={composerDraft.initialValue}
+                initialValue={composerDraft.initialValue ?? carriedText}
                 dropTargetRef={dropZoneRef}
-                onSubmit={isComposerBusy ? undefined : composerDraft.onSubmit}
+                onSubmit={isComposerBusy ? undefined : submitComposer}
                 onRejected={handleFilesRejected}
                 topContent={<ChatInputFilePreview progress={uploadProgress} />}
               >
@@ -596,6 +650,7 @@ function ChatContent(props: ChatProps & { turnState: ChatTurnState }) {
                   className="pl-5"
                   autoFocus={shouldAutoFocusInput}
                   disabled={hasPendingQuestionnaire}
+                  onChange={rememberComposerText}
                   data-chat-input
                 />
                 <ChatInputSubmit

package/src/components/chat-view/ToolApprovalPart.tsx

@@ -0,0 +1,27 @@
+import { getToolUIPartLabel } from "@manta-eu/client/shared/tools";
+import type { ToolUIPart } from "ai";
+import { Card } from "#components/card/index";
+import { ToolActions } from "#components/tool-invocation-card/ToolActions";
+
+type ToolApprovalResponse = { id: string; approved: boolean };
+
+type ToolApprovalPartProps = {
+  part: ToolUIPart;
+  onRespond: (response: ToolApprovalResponse) => void;
+};
+
+export function ToolApprovalPart(props: ToolApprovalPartProps) {
+  const { part, onRespond } = props;
+  const id = part.approval?.id;
+  if (id === undefined) return null;
+
+  return (
+    <Card padding="md" className="my-3 w-full max-w-2xl card-base gap-3">
+      <h4 className="typography-small-medium">{getToolUIPartLabel(part)}</h4>
+      <ToolActions
+        onApprove={() => onRespond({ id, approved: true })}
+        onReject={() => onRespond({ id, approved: false })}
+      />
+    </Card>
+  );
+}

package/src/components/chat-view/ToolMessagePart.tsx

@@ -7,7 +7,9 @@ import { ActionPlanShowcaseCard } from "../tool-invocation-card/ActionPlanShowca
 import { ToolInvocationCard } from "../tool-invocation-card/ToolInvocationCard";
 import { isErrorToolResult, isShowcaseToolResult } from "../tool-invocation-card/types";
 import { RequestUserInputToolPart } from "./RequestUserInputToolPart";
+import { ToolApprovalPart } from "./ToolApprovalPart";
 import { Banner } from "#components/banner/index";
+import { useActiveChatConnection } from "#providers/ActiveChatProvider";
 import { useChatManagerConnection } from "#providers/ChatManagerProvider";
 
 type ActionPlanShowcaseToolPartProps = {
@@ -67,11 +69,16 @@ export function ToolMessagePart(props: ToolMessagePartProps) {
   const { part, toolsUsedInSession, onAddToolResult } = props;
   const toolCallId = part.toolCallId;
   const toolName = part.type.replace("tool-", "");
+  const chatData = useActiveChatConnection()?.chatData;
 
   if (toolName === "actionPlanShowcase") {
     return <ActionPlanShowcaseToolPart part={part} />;
   }
 
+  if (part.state === "approval-requested") {
+    return <ToolApprovalPart part={part} onRespond={(response) => chatData?.addToolApprovalResponse(response)} />;
+  }
+
   if (toolName === requestUserInputToolName) {
     return (
       <RequestUserInputToolPart
@@ -84,29 +91,5 @@ export function ToolMessagePart(props: ToolMessagePartProps) {
     );
   }
 
-  return (
-    <ToolInvocationCard
-      toolUIPart={part}
-      toolCallId={toolCallId}
-      needsConfirmation={false}
-      onSubmit={({ toolCallId, result }) => {
-        toolsUsedInSession.current.add(toolName);
-
-        onAddToolResult({
-          tool: toolName,
-          toolCallId,
-          output: result,
-        });
-      }}
-      addToolResult={(toolCallId, result) => {
-        toolsUsedInSession.current.add(toolName);
-
-        onAddToolResult({
-          tool: toolName,
-          toolCallId,
-          output: result,
-        });
-      }}
-    />
-  );
+  return <ToolInvocationCard toolUIPart={part} />;
 }

package/src/components/chat-view/tool-part-rendering.ts

@@ -17,7 +17,7 @@ function isFailedRequestUserInputPart(part: UIMessage["parts"][number]): boolean
 }
 
 export function isStandaloneToolPart(part: ToolUIPart): boolean {
-  return standaloneToolPartTypes.has(part.type);
+  return standaloneToolPartTypes.has(part.type) || part.state === "approval-requested";
 }
 
 export function isPendingRequestUserInputPart(part: UIMessage["parts"][number]): boolean {

package/src/components/layouts/Sidebar.tsx

@@ -107,6 +107,7 @@ export function Sidebar(props: SidebarProps) {
   const canManageTeam = authContext?.canManageTeam ?? false;
   const canManageCustomApps = authContext?.canManageCustomApps ?? false;
   const canDisconnectCustomApps = authContext?.canDisconnectCustomApps ?? false;
+  const hasProfilePage = authContext?.hasProfilePage ?? false;
   const canManageStreams = authContext?.canManageStreams ?? isOperator ?? false;
 
   const { state: sidebarState, isMobile, toggleSidebar, setOpenMobile } = useSidebar();
@@ -467,11 +468,11 @@ export function Sidebar(props: SidebarProps) {
             }
             onCloseAutoFocus={handleProfileMenuCloseAutoFocus}
             onNavigateToAccount={() => {
-              // TODO: Implement account navigation when account page is available
+              if (hasProfilePage) pendingMenuNavigateRef.current = "/profile";
             }}
             onLogout={onLogout}
           >
-            <DropdownGroup className="p-2">
+            <DropdownGroup className="px-2 pb-2">
               <ThemeSelectorDropdown />
               {canManageDatastores && (
                 <ManageDatastoresMenuItem onSelect={() => (pendingMenuNavigateRef.current = "/datastores")} />

package/src/components/planning/ActionPlanDetailView.tsx

@@ -25,6 +25,7 @@ export type ActionPlanDetailViewProps = {
   issueCount?: number;
   isValidating?: boolean;
   isDryRun?: boolean;
+  pendingApprovalCount?: number;
   hideTopBar?: boolean;
   hideChanges?: boolean;
   fitContent?: boolean;
@@ -51,6 +52,7 @@ export function ActionPlanDetailView(props: ActionPlanDetailViewProps) {
     issueCount = 0,
     isValidating = false,
     isDryRun = false,
+    pendingApprovalCount,
     hideTopBar = false,
     hideChanges = false,
     fitContent = false,
@@ -122,6 +124,7 @@ export function ActionPlanDetailView(props: ActionPlanDetailViewProps) {
           issueCount={issueCount}
           isValidating={isValidating}
           isDryRun={isDryRun}
+          pendingApprovalCount={pendingApprovalCount}
           planName={planName}
           status={status}
           hasCurrentFacts={plan.hasCurrentFacts}

package/src/components/planning/ConnectedPlanDetailView.tsx

@@ -24,6 +24,7 @@ export type ConnectedPlanDetailViewProps = {
   viewMode?: PlanViewMode;
   stateOverride?: GQLActionPlanState;
   isDryRun?: boolean;
+  pendingApprovalCount?: number;
   ref?: Ref<ConnectedPlanDetailViewHandle>;
   onViewModeChange?: (viewMode: PlanViewMode) => void;
   onExecute?: (planIri: string) => void;

package/src/components/planning/TopBar.tsx

@@ -3,7 +3,7 @@ import { CircleStop, Eye, History, List, Play, RotateCcw } from "lucide-react";
 import type { ReactNode } from "react";
 import { match } from "ts-pattern";
 import { ChatToggleButton } from "../layouts/ChatToggleButton";
-import { isTerminalActionPlanState, type ActionPlanStatus } from "./plan-detail-utils";
+import { isTerminalActionPlanState, needsApproval, type ActionPlanStatus } from "./plan-detail-utils";
 import { Button } from "#components/button/index";
 import { Tabs, TabsList, TabsTrigger } from "#components/tabs/index";
 
@@ -32,13 +32,23 @@ export type TopBarProps = {
   onModify?: (planIri: string) => void;
   topBarActions?: ReactNode;
   leadingAction?: ReactNode;
+  pendingApprovalCount?: number;
 };
 
 function isPlanViewMode(value: string): value is PlanViewMode {
   return value === "overview" || value === "visual" || value === "history";
 }
 
-function statusSubtitle(status: ActionPlanStatus, isDryRun: boolean, hasCurrentFacts: boolean): string | null {
+function statusSubtitle(
+  status: ActionPlanStatus,
+  isDryRun: boolean,
+  hasCurrentFacts: boolean,
+  pendingApprovalCount: number,
+): string | null {
+  if (!isDryRun && needsApproval(status, pendingApprovalCount)) {
+    return "Needs approval";
+  }
+
   return match(status)
     .with(GQLActionPlanState.Draft, () => (hasCurrentFacts ? "Plan is ready to run" : "Not currently executable"))
     .with(GQLActionPlanState.Running, () => (isDryRun ? "Dry run in progress" : "Plan is running"))
@@ -65,6 +75,7 @@ export function TopBar(props: TopBarProps) {
     onRerun,
     topBarActions,
     leadingAction,
+    pendingApprovalCount = 0,
   } = props;
   const isDraft = status === GQLActionPlanState.Draft;
   const isRunning = status === GQLActionPlanState.Running;
@@ -77,7 +88,7 @@ export function TopBar(props: TopBarProps) {
     }
   }
 
-  const subtitle = statusSubtitle(status, isDryRun, hasCurrentFacts);
+  const subtitle = statusSubtitle(status, isDryRun, hasCurrentFacts, pendingApprovalCount);
 
   return (
     <div className="shrink-0 flex h-16 items-center justify-between gap-2 border-b border-default-border px-3 sm:px-6">

package/src/components/planning/plan-detail-utils.tsx

@@ -77,8 +77,12 @@ export function statusLabel(status: ActionPlanStatus): string {
     .exhaustive();
 }
 
+export function canNeedApproval(state: ActionPlanStatus): boolean {
+  return state === GQLActionPlanState.Running || state === GQLActionPlanState.Completed;
+}
+
 export function needsApproval(state: ActionPlanStatus, pendingApprovalCount: number): boolean {
-  return pendingApprovalCount > 0 && (state === GQLActionPlanState.Running || state === GQLActionPlanState.Completed);
+  return pendingApprovalCount > 0 && canNeedApproval(state);
 }
 
 export function planStateVariant(state: ActionPlanStatus, pendingApprovalCount = 0): BadgeVariant {

package/src/components/sidebar/nav-user.tsx

@@ -83,7 +83,7 @@ export function NavUser(args: NavUserArgs) {
             {pickerSlot}
             {topSlot}
             {(pickerSlot || topSlot) && <DropdownSeparator />}
-            <DropdownGroup className="p-2">
+            <DropdownGroup className={children ? "px-2 pt-2" : "p-2"}>
               <DropdownItem
                 className="p-1.5 flex flex-row items-center gap-1.5 typography-caption h-11"
                 onClick={onNavigateToAccount}

package/src/components/tool-invocation-card/ToolActions.tsx

@@ -1,30 +1,19 @@
-import { APPROVAL } from "@manta-eu/client/shared/index";
-import { type ToolInvocationCardProps } from "./ToolInvocationCard";
 import { Button } from "#components/button/index";
 
 type ToolActionsProps = {
-  toolCallId: string;
-  toolName: string;
-  onSubmit: ToolInvocationCardProps["onSubmit"];
+  onApprove: () => void;
+  onReject: () => void;
 };
 
 export function ToolActions(props: ToolActionsProps) {
-  const { toolCallId, toolName: _toolName, onSubmit } = props;
-
-  function handleReject() {
-    onSubmit({ toolCallId, result: APPROVAL.NO });
-  }
-
-  function handleApprove() {
-    onSubmit({ toolCallId, result: APPROVAL.YES });
-  }
+  const { onApprove, onReject } = props;
 
   return (
     <div className="flex gap-2 justify-end">
-      <Button variant="destructive" size="sm" onClick={handleReject}>
+      <Button variant="destructive" size="sm" onClick={onReject}>
         Reject
       </Button>
-      <Button size="sm" onClick={handleApprove}>
+      <Button size="sm" onClick={onApprove}>
         Approve
       </Button>
     </div>

package/src/components/tool-invocation-card/ToolHeader.tsx

@@ -1,18 +1,24 @@
 import { getToolUIPartLabel } from "@manta-eu/client/shared/tools";
 import type { ToolUIPart } from "ai";
-import { CheckCircle2, ChevronDown, Loader2 } from "lucide-react";
+import { AlertTriangle, CheckCircle2, ChevronDown, Loader2, XCircle } from "lucide-react";
+import { match } from "ts-pattern";
 
 type ToolHeaderProps = {
   toolUIPart: ToolUIPart;
-  needsConfirmation: boolean;
   isExpanded: boolean;
   onToggle: () => void;
 };
 
-export function ToolHeader(props: ToolHeaderProps) {
-  const { toolUIPart, isExpanded, onToggle, needsConfirmation } = props;
+function StateIcon(props: { state: ToolUIPart["state"] }) {
+  return match(props.state)
+    .with("output-available", () => <CheckCircle2 size={16} />)
+    .with("output-denied", () => <XCircle size={16} />)
+    .with("output-error", () => <AlertTriangle size={16} />)
+    .otherwise(() => <Loader2 size={16} className="animate-spin" />);
+}
 
-  const isComplete = !needsConfirmation && toolUIPart.state === "output-available";
+export function ToolHeader(props: ToolHeaderProps) {
+  const { toolUIPart, isExpanded, onToggle } = props;
 
   const humanToolName = getToolUIPartLabel(toolUIPart);
 
@@ -23,8 +29,9 @@ export function ToolHeader(props: ToolHeaderProps) {
   return (
     <button type="button" onClick={handleToggle} className="w-full flex items-center gap-2 cursor-pointer">
       <h4 className="typography-small-medium flex items-center gap-2 flex-1 text-left">
-        {isComplete ? <CheckCircle2 size={16} /> : <Loader2 size={16} className="animate-spin" />}
+        <StateIcon state={toolUIPart.state} />
         {humanToolName}
+        {toolUIPart.state === "output-denied" && <span className="text-muted-foreground">Rejected</span>}
       </h4>
       <ChevronDown
         size={16}

package/src/components/tool-invocation-card/ToolInvocationCard.tsx

@@ -2,7 +2,6 @@ import { getToolUIPartLabel } from "@manta-eu/client/shared/tools";
 import type { ToolUIPart } from "ai";
 import { useCallback, useState } from "react";
 import { match } from "ts-pattern";
-import { ToolActions } from "./ToolActions";
 import { ToolArgumentsDisplay } from "./ToolArgumentsDisplay";
 import { ToolHeader } from "./ToolHeader";
 import { ToolLoadingState } from "./ToolLoadingState";
@@ -12,30 +11,21 @@ import { cn } from "#lib/utils";
 
 export type ToolInvocationCardProps = {
   toolUIPart: ToolUIPart;
-  toolCallId: string;
-  needsConfirmation: boolean;
-  onSubmit: ({ toolCallId, result }: { toolCallId: string; result: string }) => void;
-  addToolResult: (toolCallId: string, result: string) => void;
 };
 
 export function ToolInvocationCard(props: ToolInvocationCardProps) {
-  const { toolUIPart, toolCallId, needsConfirmation, onSubmit } = props;
+  const { toolUIPart } = props;
   const [isExpanded, setIsExpanded] = useState(false);
   const loadingLabel = getToolUIPartLabel(toolUIPart);
   const [executionStartTime] = useState(Date.now());
 
   const handleToggle = useCallback(() => {
-    setIsExpanded(!isExpanded);
+    setIsExpanded((expanded) => !expanded);
   }, []);
 
   return (
     <Card className="my-3 w-full max-w-2xl card-base overflow-hidden">
-      <ToolHeader
-        toolUIPart={toolUIPart}
-        needsConfirmation={needsConfirmation}
-        isExpanded={isExpanded}
-        onToggle={handleToggle}
-      />
+      <ToolHeader toolUIPart={toolUIPart} isExpanded={isExpanded} onToggle={handleToggle} />
 
       <div
         className={cn([
@@ -46,22 +36,15 @@ export function ToolInvocationCard(props: ToolInvocationCardProps) {
         <div className="overflow-y-auto" style={{ maxHeight: isExpanded ? "580px" : "0px" }}>
           <ToolArgumentsDisplay toolUIPart={toolUIPart} />
 
-          {match({ needsConfirmation, state: toolUIPart.state })
-            .with({ needsConfirmation: true, state: "input-available" }, () => (
-              <ToolActions
-                toolCallId={toolCallId}
-                toolName={toolUIPart.type.replace("tool-", "")}
-                onSubmit={onSubmit}
-              />
-            ))
-            .with({ needsConfirmation: false, state: "output-available" }, () => (
+          {match(toolUIPart.state)
+            .with("output-available", () => (
               <ToolResultDisplay
                 result={toolUIPart.output}
                 executionStartTime={executionStartTime}
                 toolUIPart={toolUIPart}
               />
             ))
-            .with({ state: "input-streaming" }, () => <ToolLoadingState label={loadingLabel} />)
+            .with("input-streaming", () => <ToolLoadingState label={loadingLabel} />)
             .otherwise(() => null)}
         </div>
       </div>

package/src/explain-fact/rule-presentation.ts

@@ -20,6 +20,7 @@ import { isPresent } from "@manta-eu/lib/present";
 import { match, P } from "ts-pattern";
 import { parseDatalogRuleCached, parseGroundedDatalogRuleCached } from "../rules/datalog-cache";
 import {
+  explainRuleAst,
   getRuleBodyTerms,
   kindForBodyFormula,
   kindForSyntheticTerm,
@@ -362,12 +363,6 @@ function ruleNameTermFromHeadText(headText: string): string {
   return predicate.trim();
 }
 
-// Explain payloads echo rules as the datastore serializes them (bare ON, atom-free aggregates),
-// so authored text falls through to the expanded grammar when the strict parse fails.
-function explainRuleAst(rule: string): DatalogRule | undefined {
-  return parseDatalogRuleCached(rule).ast ?? parseGroundedDatalogRuleCached(rule).ast ?? undefined;
-}
-
 function collectBindings(ast: DatalogRule, groundedAst: DatalogRule): VariableBinding[] {
   const bindings = new Map<string, GroundedBinding>();
   const predicates = new Map<string, string>();

package/src/explain-fact/tree-model.ts

@@ -1,5 +1,6 @@
 import {
   classAssertionFromAtom,
+  formulaSourceTexts,
   isDatalogAtom,
   isLiteralTerm,
   isVariableTerm,
@@ -11,6 +12,7 @@ import {
   type DatalogAtom,
   type DatalogBodyFormula,
   type DatalogExpression,
+  type DatalogRule,
 } from "@manta-eu/datalog-parser";
 import { isPresent } from "@manta-eu/lib/present";
 import { countBy } from "ramda";
@@ -472,13 +474,33 @@ export function ruleHeadText(rule: string): string {
   );
 }
 
+// Explain payloads echo rules as the datastore serializes them (bare ON, atom-free aggregates),
+// so authored text falls through to the expanded grammar when the strict parse fails.
+export function explainRuleAst(rule: string): DatalogRule | undefined {
+  return parseDatalogRuleCached(rule).ast ?? parseGroundedDatalogRuleCached(rule).ast ?? undefined;
+}
+
+function parsedSourceTexts(rule: string) {
+  const parsed = explainRuleAst(rule);
+
+  return parsed ? formulaSourceTexts(parsed) : undefined;
+}
+
 export function ruleHeadTerms(rule: string): string[] {
+  const parsed = parsedSourceTexts(rule);
+
+  if (parsed) return parsed.head;
+
   return splitTopLevel(ruleHeadText(rule), ",")
     .map((part) => part.trim())
     .filter(isPresent);
 }
 
 export function getRuleBodyTerms(rule: string): string[] {
+  const parsed = parsedSourceTexts(rule);
+
+  if (parsed) return parsed.body;
+
   const body = bodyText(rule);
 
   if (!body) return [];
@@ -624,7 +646,7 @@ function aggregateOutputsOf(
 }
 
 function ruleBodyFormulas(rule: string, expectedCount: number): DatalogBodyFormula[] | undefined {
-  const ast = parseDatalogRuleCached(rule).ast ?? parseGroundedDatalogRuleCached(rule).ast ?? undefined;
+  const ast = explainRuleAst(rule);
 
   if (!ast || ast.body.length !== expectedCount) return undefined;
 

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

@@ -74,7 +74,7 @@ export function toManualAction(entity: ManualActionEntity, options: ManualAction
     assignees: entity.assignee.map(String),
     label: entity.label || null,
     description: entity.description || null,
-    observedValue: entity.observedValue || null,
+    observedValue: typeof entity.observedValue === "string" ? entity.observedValue || null : null,
     aboutIri: entity.about ?? null,
     retryable: String(entity.retryable) === "true",
     defaultResolution: normalizeResolution(entity.defaultResolution ?? undefined),

package/src/hooks/useActionGraph.ts

@@ -0,0 +1,41 @@
+import {
+  runActionGraph,
+  type ActionGraphql,
+  type GraphOp,
+  type GraphRun,
+  type GraphRunOptions,
+} from "@manta-eu/client/shared/action-graph";
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { uniq } from "ramda";
+import { useSparqlOptions } from "#hooks/use-sparql-options";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import { invalidateActionPlanQueries } from "#shared/query-keys";
+
+export type UseActionGraphOptions = Omit<GraphRunOptions, "graphql" | "readOptions">;
+
+export const actionGraphMutationKey = ["ExecuteActionGraph"] as const;
+
+const planGraphIris = ({ results }: GraphRun): string[] =>
+  uniq(results.flatMap((result) => ("planGraphIri" in result ? [result.planGraphIri] : [])));
+
+/** Sends a change of several entities as one plan and reads back what each op did; `results[i]` is `ops[i]`. */
+export function useActionGraph(
+  options: UseActionGraphOptions = {},
+): UseMutationResult<GraphRun, Error, readonly GraphOp[]> {
+  const { mantaClient } = useMantaClient();
+  const readOptions = useSparqlOptions();
+  const queryClient = useQueryClient();
+
+  const graphql: ActionGraphql = (document, variables, request) =>
+    mantaClient.request({ document, variables, signal: request?.signal });
+
+  return useMutation<GraphRun, Error, readonly GraphOp[]>({
+    mutationKey: actionGraphMutationKey,
+    mutationFn: (ops) => runActionGraph(ops, { ...options, graphql, readOptions }),
+    onSuccess: async (run) => {
+      await Promise.all(
+        planGraphIris(run).map((planGraphIri) => invalidateActionPlanQueries(queryClient, planGraphIri)),
+      );
+    },
+  });
+}

package/src/hooks/useAuth.ts

@@ -65,6 +65,8 @@ const orgRoleSchema = z.object({
   capabilities: z.array(z.string()).transform((values) => values.filter(isCapability)),
 });
 
+export const userContextQueryKey = ["user-context"] as const;
+
 export const contextResponseSchema = z.object({
   datastoreAccessGranted: z.boolean().default(true),
   user: z.object({
@@ -197,7 +199,7 @@ export function useAuth(): UseAuthResult {
     isLoading: isContextLoading,
     error: contextError,
   } = useQuery({
-    queryKey: ["user-context", datastoreId],
+    queryKey: [...userContextQueryKey, datastoreId],
     queryFn: async ({ signal }) => {
       const res = await authorizedFetch(new URL("/graphql", mantaBaseUrl), {
         method: "POST",

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

@@ -19,6 +19,7 @@ export type RouteElements = {
   Team?: ReactNode;
   CustomApps?: ReactNode;
   CustomAppUsers?: ReactNode;
+  Profile?: ReactNode;
   DataExplorerLayout?: ReactNode;
   DataExplorerIndex?: ReactNode;
   DataExplorerRecent?: ReactNode;
@@ -48,6 +49,7 @@ export const globalRoutes: RouteDefinition[] = [
   { path: "/shopify/connect", render: (e) => e.ShopifyConnect || notFoundElement(e) },
   { path: "/custom-apps", render: (e) => e.CustomApps || notFoundElement(e) },
   { path: "/custom-apps/:clientId/users", render: (e) => e.CustomAppUsers || notFoundElement(e) },
+  { path: "/profile", render: (e) => e.Profile || notFoundElement(e) },
 ];
 
 export const datastoreRoutes: RouteDefinition[] = [

package/src/lib/tool-icons.ts

@@ -44,6 +44,7 @@ const toolIconMap: Record<ToolName, LucideIcon> = {
   setDailyChangeLimit: DollarSign,
   markAsLowRisk: CheckCircle2,
   readUploadedFile: Paperclip,
+  requestBudgetChange: DollarSign,
 };
 
 type StepIconName =