@manta-eu/react 0.4.0 → 0.5.1

package/src/components/planning/ExecutionTopBar.tsx

@@ -6,6 +6,7 @@ import { cn } from "#lib/utils";
 type ExecutionTopBarProps = {
   planName: string;
   status: ExecutionStatus;
+  pendingManualActionCount: number;
   workflowId: string | null;
   triggerError: string | null;
   onExecute?: (dryRun: boolean) => void;
@@ -38,8 +39,19 @@ const statusConfig: Record<
 };
 
 export function ExecutionTopBar(props: ExecutionTopBarProps) {
-  const { planName, status, onExecute, onRerun, isExecuteDialogOpen, onExecuteDialogOpenChange, isDryRun } = props;
-  const config = statusConfig[status];
+  const {
+    planName,
+    status,
+    pendingManualActionCount,
+    onExecute,
+    onRerun,
+    isExecuteDialogOpen,
+    onExecuteDialogOpenChange,
+    isDryRun,
+  } = props;
+
+  const shownStatus = status === "completed" && !isDryRun && pendingManualActionCount > 0 ? "needs-approval" : status;
+  const config = statusConfig[shownStatus];
   const isTerminal = status === "completed" || status === "failed";
   const displayLabel = (isDryRun && config.dryRunLabel) || config.label;
 

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

@@ -77,10 +77,14 @@ export function statusLabel(status: ActionPlanStatus): string {
     .exhaustive();
 }
 
+export function needsApproval(state: ActionPlanStatus, pendingApprovalCount: number): boolean {
+  return pendingApprovalCount > 0 && (state === GQLActionPlanState.Running || state === GQLActionPlanState.Completed);
+}
+
 export function planStateVariant(state: ActionPlanStatus, pendingApprovalCount = 0): BadgeVariant {
-  return match({ state, hasPendingApproval: pendingApprovalCount > 0 })
+  return match({ state, needsApproval: needsApproval(state, pendingApprovalCount) })
     .returnType<BadgeVariant>()
-    .with({ state: GQLActionPlanState.Running, hasPendingApproval: true }, () => "warning")
+    .with({ needsApproval: true }, () => "warning")
     .with({ state: GQLActionPlanState.Running }, () => "info")
     .with({ state: GQLActionPlanState.Completed }, () => "success")
     .with({ state: GQLActionPlanState.Failed }, () => "destructive")

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

@@ -1,3 +1,4 @@
+import { withChatModeQueryParam } from "@manta-eu/client/shared/chat-manager";
 import { withDatastoreQueryParam } from "@manta-eu/client/shared/datastore-path";
 import { isShowEntitiesResult } from "@manta-eu/client/shared/tools";
 import {
@@ -5,7 +6,7 @@ import {
   type WorkspaceArtifact,
 } from "@manta-eu/client/shared/workspace-artifacts";
 import type { ToolUIPart } from "ai";
-import { useCallback } from "react";
+import { useCallback, useContext } from "react";
 import { match } from "ts-pattern";
 import { FileMessagePart } from "../chat-view/FileMessagePart";
 import { ActionPlanShowcaseCard } from "./ActionPlanShowcaseCard";
@@ -45,6 +46,7 @@ import {
 } from "#components/chart/index";
 import { decodeChartEntities } from "#lib/decode-chart-entities";
 import { cn } from "#lib/utils";
+import { ChatManagerContext } from "#providers/chat-connection-context";
 import { useChatManagerConnection } from "#providers/ChatManagerProvider";
 import { useMantaClient } from "#providers/MantaClientProvider";
 
@@ -129,12 +131,13 @@ function WorkspaceArtifactResultDisplay(props: WorkspaceArtifactResultDisplayPro
   const { result } = props;
 
   const { datastoreId } = useMantaClient();
+  const mode = useContext(ChatManagerContext)?.managerConnection.mode;
 
   return (
     <FileMessagePart
       part={{
         type: "file",
-        url: withDatastoreQueryParam(result.url, datastoreId),
+        url: withChatModeQueryParam(withDatastoreQueryParam(result.url, datastoreId), mode),
         mediaType: result.mediaType,
         filename: result.filename,
       }}

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/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/chat-types.ts

@@ -1,5 +1,6 @@
 /* eslint-disable import/order -- each type is imported beside the re-export it exists for, which is
    how this file is organized; they are type-only, so the positions have no runtime meaning. */
+import type { ConversationMode } from "@manta-eu/client/shared/chat-manager";
 import type { MantaModelId } from "@manta-eu/client/shared/model";
 import type { ReactNode } from "react";
 import type { Datastore } from "#ldo-ui";
@@ -26,6 +27,21 @@ export type CopilotMenuDefaults = {
 
 export type ChatDraft = { id: string; text: string };
 
+export type ChatStartupReport = {
+  surface: "embedded" | "app";
+  mode: "ticket" | "cookie";
+  openIndex: number;
+  hostTokenMs?: number;
+  ticketMs?: number;
+  ticketAttempts?: number;
+  socketMs: number;
+  socketAttempts: number;
+  chatMountMs: number;
+  socketReadyAtOpen: boolean;
+  firstPaintMs: number;
+  interactiveMs: number;
+};
+
 // NOTE: Adding to this is a breaking change to library clients
 export type AuthenticatedChatProps = {
   datastore?: Datastore;
@@ -39,6 +55,7 @@ export type AuthenticatedChatProps = {
   collapsible?: boolean;
   isCollapsed?: boolean;
   pageContext?: PageContext;
+  mode?: ConversationMode;
   allowedModels?: MantaModelId[];
   initialPrompt?: string;
   initialDraft?: ChatDraft;
@@ -48,6 +65,7 @@ export type AuthenticatedChatProps = {
   assistantIcon?: AssistantIcon;
   mark?: ReactNode;
   renderMenuItems?: (defaults: CopilotMenuDefaults) => ReactNode[];
+  onStartupTiming?: (report: ChatStartupReport) => void;
 };
 
 export type ResolvedChatProps = AuthenticatedChatProps & {

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/providers/AuthContext.ts

@@ -20,6 +20,7 @@ export type AuthContextValue = Pick<
   user: User;
   // Only Manta's own web app may list the apps connected to someone; any other host's token is refused.
   canDisconnectCustomApps?: boolean;
+  hasProfilePage?: boolean;
 };
 
 export const AuthContext = createContext<AuthContextValue | undefined>(undefined);

package/src/providers/ChatManagerProvider.tsx

@@ -3,35 +3,55 @@ import { ChatContextKind, type ChatContext } from "@manta-eu/client/shared/agent
 import {
   chatIdSchema,
   chatManagerBasePath,
+  chatModeQuery,
   type ChatManagerClient,
+  type ConversationMode,
   type ConversationSummary,
   type DeleteConversationResult,
   type ListConversationsInput,
 } from "@manta-eu/client/shared/chat-manager";
 import { datastoreSocketQuery } from "@manta-eu/client/shared/datastore-path";
 import { chatIdToPath, newChatPath, type ChatUIMessage } from "@manta-eu/client/shared/index";
+import { DEFAULT_CALL_TIMEOUT_MS } from "agents/client";
 import { useAgent } from "agents/react";
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { matchPath, useLocation, useMatch, useNavigate } from "react-router";
 import { toast } from "sonner";
 import { match } from "ts-pattern";
+import type { ChatStartupReport } from "../lib/chat-types";
 import { ChatManagerContext, type ChatManagerContextValue, type MessageHandoff } from "./chat-connection-context";
 import {
   createBlankConversationLifecycle,
   mapManagerConnectionState,
   type BlankConversationLifecycle,
 } from "./chat-connection-lifecycle";
-import { useChatSocketAuth } from "./chat-socket-auth";
+import { isRequestedClose, useChatSocketAuth } from "./chat-socket-auth";
+import {
+  chatStartupReport,
+  createChatStartupTimeline,
+  markChatStartup,
+  type ChatViewStartupPhase,
+} from "./chat-startup-timing";
 import { useMantaClient } from "./index";
 
 export { useChatManagerConnection, type ChatManagerConnectionContextValue } from "./chat-connection-context";
 
+export type { ChatStartupReport } from "../lib/chat-types";
+
+export type { ChatViewStartupPhase } from "./chat-startup-timing";
+
 export type ChatManagerProviderProps = {
   onSelectPlan?: (planIri: string) => void;
   datastoreId: string | undefined;
+  // Fixed for the provider's lifetime: it picks the manager, so key the provider on it.
+  mode?: ConversationMode;
+  surface?: "embedded" | "app";
+  onStartupTiming?: (report: ChatStartupReport) => void;
   children: ReactNode;
 };
 
+let chatStartupReports = 0;
+
 type ContextTransition =
   | { kind: "select"; context: ChatContext }
   | { kind: "start"; context: ChatContext; message: ChatUIMessage }
@@ -45,6 +65,20 @@ type ExpectedConversationClose = {
   conversationId: string;
 };
 
+type ManagerOpenWaiter = {
+  resolve: () => void;
+  reject: (error: Error) => void;
+  timer: ReturnType<typeof setTimeout>;
+};
+
+function settleManagerOpenWaiters(waiters: Set<ManagerOpenWaiter>, settle: (waiter: ManagerOpenWaiter) => void) {
+  for (const waiter of waiters) {
+    clearTimeout(waiter.timer);
+    settle(waiter);
+  }
+  waiters.clear();
+}
+
 function activeConversationFromSelection(selection: ConversationSelection | undefined) {
   return selection?.kind === "active" ? selection.conversation : undefined;
 }
@@ -57,9 +91,13 @@ function clearExpectedConversationClose(
 }
 
 export function ChatManagerProvider(props: ChatManagerProviderProps) {
-  const { onSelectPlan, datastoreId, children } = props;
+  const { onSelectPlan, datastoreId, surface = "app", onStartupTiming, children } = props;
+  const [mode] = useState<ConversationMode>(props.mode ?? "datastore");
   const { mantaBaseUrl } = useMantaClient();
-  const datastoreQuery = useMemo(() => datastoreSocketQuery(datastoreId), [datastoreId]);
+  const datastoreQuery = useMemo(
+    () => ({ ...datastoreSocketQuery(datastoreId), ...chatModeQuery(mode) }),
+    [datastoreId, mode],
+  );
   const navigate = useNavigate();
   const location = useLocation();
   const chatMatch = useMatch("/chat/:chatId");
@@ -91,7 +129,35 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
   pathnameRef.current = location.pathname;
   routedConversationIdRef.current = routedConversationId;
 
-  const socketAuth = useChatSocketAuth(datastoreQuery);
+  const [timeline] = useState(createChatStartupTimeline);
+  const onStartupTimingRef = useRef(onStartupTiming);
+  onStartupTimingRef.current = onStartupTiming;
+  const socketAuth = useChatSocketAuth(datastoreQuery, (phase) => markChatStartup(timeline, phase));
+  const authMode = "enabled" in socketAuth ? "ticket" : "cookie";
+  const socketKey = "enabled" in socketAuth && !socketAuth.enabled ? undefined : JSON.stringify(socketAuth.query);
+  const enabledSocketKeyRef = useRef<string>(undefined);
+  useEffect(() => {
+    if (socketKey === undefined || enabledSocketKeyRef.current === socketKey) return;
+    enabledSocketKeyRef.current = socketKey;
+    markChatStartup(timeline, "socket-enabled");
+  }, [socketKey, timeline]);
+
+  const reportedStartupRef = useRef(false);
+  const reportStartup = useCallback(() => {
+    if (reportedStartupRef.current) return;
+    const report = chatStartupReport(timeline, { surface, mode: authMode, openIndex: chatStartupReports + 1 });
+    if (!report) return;
+    reportedStartupRef.current = true;
+    chatStartupReports += 1;
+    try {
+      onStartupTimingRef.current?.(report);
+    } catch (error) {
+      console.error("onStartupTiming threw", error);
+    }
+  }, [surface, authMode, timeline]);
+
+  const managerOpenWaitersRef = useRef(new Set<ManagerOpenWaiter>());
+
   const managerAgent = useAgent<ChatManagerClient, ChatManagerClient["state"]>({
     agent: "ChatManager",
     basePath: chatManagerBasePath,
@@ -100,8 +166,56 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
     ...("enabled" in socketAuth
       ? { enabled: socketAuth.enabled, shouldReconnectOnClose: socketAuth.shouldReconnectOnClose }
       : {}),
+    onOpen: () => {
+      markChatStartup(timeline, "socket-open");
+      reportStartup();
+      settleManagerOpenWaiters(managerOpenWaitersRef.current, (waiter) => waiter.resolve());
+    },
+    onClose: (event) => {
+      if (authMode === "cookie" && !isRequestedClose(event) && timeline.marks["socket-open"] === undefined) {
+        timeline.socketAttempts += 1;
+      }
+    },
   });
 
+  const managerAgentRef = useRef(managerAgent);
+  managerAgentRef.current = managerAgent;
+
+  const disposedRef = useRef(false);
+  useEffect(() => {
+    disposedRef.current = false;
+    return () => {
+      disposedRef.current = true;
+    };
+  }, []);
+
+  const waitForManagerOpen = useCallback((): Promise<void> => {
+    const agent = managerAgentRef.current;
+    if (agent.readyState === WebSocket.OPEN) return Promise.resolve();
+    if (agent.connectionError !== null && agent.readyState === WebSocket.CLOSED) {
+      return Promise.reject(new Error("The chat connection closed."));
+    }
+    return new Promise((resolve, reject) => {
+      const waiters = managerOpenWaitersRef.current;
+      const waiter: ManagerOpenWaiter = {
+        resolve,
+        reject,
+        timer: setTimeout(() => {
+          waiters.delete(waiter);
+          if (!disposedRef.current) reject(new Error("The chat connection did not open."));
+        }, DEFAULT_CALL_TIMEOUT_MS),
+      };
+      waiters.add(waiter);
+    });
+  }, []);
+
+  const markStartup = useCallback(
+    (phase: ChatViewStartupPhase) => {
+      if (markChatStartup(timeline, phase) && phase === "interactive") reportStartup();
+    },
+    [reportStartup, timeline],
+  );
+
   const listConversations = useCallback(
     (input: ListConversationsInput = {}): Promise<ConversationSummary[]> => managerAgent.stub.listConversations(input),
     [managerAgent],
@@ -166,10 +280,14 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
 
   const sendBlankConversationMessage = useCallback(
     (message: ChatUIMessage): Promise<void> => {
-      const lifecycle = blankConversationRef.current;
-      if (lifecycle.materialization || lifecycle.conversationId) {
+      let lifecycle = blankConversationRef.current;
+      if (lifecycle.conversationId || lifecycle.creating) {
         return Promise.reject(new Error("A new chat is already starting."));
       }
+      if (lifecycle.materialization) {
+        lifecycle = createBlankConversationLifecycle();
+        blankConversationRef.current = lifecycle;
+      }
 
       setMessageHandoff({ message });
       function clearMessageHandoff() {
@@ -187,13 +305,23 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
       }
       const materialization = (async () => {
         try {
-          const conversation = await managerAgent.stub.createConversation({
-            idempotencyKey: lifecycle.idempotencyKey,
-          });
+          const deadline = performance.now() + DEFAULT_CALL_TIMEOUT_MS;
+          await waitForManagerOpen();
+          if (!isCurrentLifecycle()) {
+            clearMessageHandoff();
+            return;
+          }
+
+          lifecycle.creating = true;
+          const conversation = await managerAgentRef.current.call(
+            "createConversation",
+            [{ idempotencyKey: lifecycle.idempotencyKey }],
+            { timeout: Math.max(deadline - performance.now(), 1) },
+          );
 
           if (!isCurrentLifecycle()) {
             clearMessageHandoff();
-            await managerAgent.stub.deleteConversation({ id: conversation.id });
+            await managerAgentRef.current.stub.deleteConversation({ id: conversation.id });
             return;
           }
 
@@ -213,13 +341,14 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
           throw error;
         } finally {
           lifecycle.materialization = undefined;
+          lifecycle.creating = false;
         }
       })();
 
       lifecycle.materialization = materialization;
       return materialization;
     },
-    [managerAgent, navigate],
+    [navigate, waitForManagerOpen],
   );
 
   const startNewChat = useCallback(() => {
@@ -234,8 +363,13 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
     }
   }, [onNewChatPath, navigate]);
 
+  const handledPathnameRef = useRef(location.pathname);
+
   // `/` is still a blank chat in an app that gives its datastores no home page.
-  useEffect(() => {
+  useLayoutEffect(() => {
+    if (handledPathnameRef.current === location.pathname) return;
+    handledPathnameRef.current = location.pathname;
+
     if (onNewChatPath || location.pathname === "/") {
       const preserveBlankLifecycle = preserveBlankLifecycleOnNextBlankChatRef.current;
       if (!preserveBlankLifecycle) {
@@ -247,6 +381,7 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
       setConversationSelection(undefined);
     } else {
       preserveBlankLifecycleOnNextBlankChatRef.current = false;
+      setMessageHandoff((current) => (current?.conversationId ? current : undefined));
     }
   }, [location.pathname, onNewChatPath]);
 
@@ -394,6 +529,10 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
         onSelectPlan(planIri);
         return;
       }
+      if (mode === "group") {
+        toast.info("Open this plan from its own datastore.");
+        return;
+      }
 
       const context = { kind: ChatContextKind.Plan, planGraphIri: planIri } as const;
       const source = activeConversationFromSelection(conversationSelectionRef.current);
@@ -412,12 +551,20 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
         if (pendingPlanNavigationRef.current === navigation) pendingPlanNavigationRef.current = undefined;
       }
     },
-    [navigate, onSelectPlan, reassignCurrentConversation],
+    [mode, navigate, onSelectPlan, reassignCurrentConversation],
   );
 
   const managerConnectionState = mapManagerConnectionState(managerAgent);
+
+  useEffect(() => {
+    if (managerAgent.connectionError === null) return;
+    const error = new Error("The chat connection closed.");
+    settleManagerOpenWaiters(managerOpenWaitersRef.current, (waiter) => waiter.reject(error));
+  }, [managerAgent.connectionError]);
+
   const selectedContext = activeConversation?.context ?? pendingContext;
-  const isConversationLoading = routedConversationId !== undefined && activeConversation?.id !== routedConversationId;
+  const isConversationLoading =
+    invalidConversationRoute || (routedConversationId !== undefined && activeConversation?.id !== routedConversationId);
   const context = useMemo<ChatManagerContextValue>(
     () => ({
       managerConnection: {
@@ -428,6 +575,7 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
         pendingMessage: messageHandoff?.message,
         isConversationLoading,
         connectionState: managerConnectionState,
+        mode,
         listConversations,
         deleteConversation,
         openConversation,
@@ -437,6 +585,7 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
         startContextConversation,
         reassignCurrentConversation,
         handleSelectPlan,
+        markStartup,
       },
       session: {
         activeConversationId: activeConversation?.id,
@@ -451,11 +600,13 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
     [
       activeConversation,
       deleteConversation,
+      mode,
       handleSelectPlan,
       isConversationLoading,
       listConversations,
       managerAgent,
       managerAgent.state,
+      markStartup,
       managerConnectionState,
       mantaBaseUrl.host,
       datastoreQuery,

package/src/providers/chat-connection-context.ts

@@ -1,6 +1,7 @@
 import type { ChatContext, SendAgentMessage } from "@manta-eu/client/shared/agent-types";
 import type {
   ChatManagerState,
+  ConversationMode,
   ConversationSummary,
   DeleteConversationResult,
   ListConversationsInput,
@@ -8,6 +9,7 @@ import type {
 import type { ChatUIMessage } from "@manta-eu/client/shared/index";
 import { createContext, useContext } from "react";
 import type { ConnectionState } from "../lib/chat-types";
+import type { ChatViewStartupPhase } from "./chat-startup-timing";
 
 export type ChatManagerConnectionContextValue = {
   agent: { readyState: number; reconnect: () => void };
@@ -17,6 +19,7 @@ export type ChatManagerConnectionContextValue = {
   pendingMessage?: ChatUIMessage;
   isConversationLoading: boolean;
   connectionState: ConnectionState;
+  mode: ConversationMode;
   listConversations(input?: ListConversationsInput): Promise<ConversationSummary[]>;
   deleteConversation(id: string): Promise<DeleteConversationResult>;
   openConversation(id: string): void;
@@ -26,6 +29,7 @@ export type ChatManagerConnectionContextValue = {
   startContextConversation: (context: ChatContext, message: ChatUIMessage) => Promise<ConversationSummary | undefined>;
   reassignCurrentConversation: (context: ChatContext) => Promise<ConversationSummary | undefined>;
   handleSelectPlan: (planIri: string) => Promise<void>;
+  markStartup: (phase: ChatViewStartupPhase) => void;
 };
 
 export type MessageHandoff = {

package/src/providers/chat-connection-lifecycle.ts

@@ -40,6 +40,7 @@ export type BlankConversationLifecycle = {
   idempotencyKey: string;
   conversationId?: string;
   materialization?: Promise<void>;
+  creating?: boolean;
 };
 
 export function createBlankConversationLifecycle(): BlankConversationLifecycle {