@manta-eu/react 0.4.0 → 0.5.0

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 {

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

@@ -1,9 +1,10 @@
-import { chatTicketPath, chatTicketQueryParam } from "@manta-eu/client/shared/chat-manager";
+import { bearerFetch } from "@manta-eu/client";
+import { chatModeQueryParam, 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 { isTerminalCloseEvent } from "agents/client";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { providerFetch } from "./manta-client-context";
+import type { ChatSocketAuthPhase } from "./chat-startup-timing";
 import { useMantaClient } from "./MantaClientProvider";
 
 const tokenRefreshCheckMs = 30_000;
@@ -30,7 +31,7 @@ function ticketFrom(body: unknown): string | undefined {
 }
 
 // partysocket clears shouldReconnect before a close it was asked for: an unmount, or a socket being replaced.
-function isRequestedClose(event: CloseEvent): boolean {
+export function isRequestedClose(event: CloseEvent): boolean {
   const target: unknown = event.target;
   return typeof target === "object" && target !== null && "shouldReconnect" in target && !target.shouldReconnect;
 }
@@ -39,12 +40,16 @@ function isRequestedClose(event: CloseEvent): boolean {
  * 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 {
+export function useChatSocketAuth(
+  datastoreQuery: Record<string, string>,
+  onPhase?: (phase: ChatSocketAuthPhase) => void,
+): ChatSocketAuth {
   const client = useMantaClient();
   const { getAccessToken, mantaBaseUrl } = client;
-  const authorizedFetch = providerFetch(client);
-  const authorizedFetchRef = useRef(authorizedFetch);
-  authorizedFetchRef.current = authorizedFetch;
+  const onPhaseRef = useRef(onPhase);
+  onPhaseRef.current = onPhase;
+  const getAccessTokenRef = useRef(getAccessToken);
+  getAccessTokenRef.current = getAccessToken;
   const hasAccessToken = getAccessToken !== undefined;
   const datastoreKey = JSON.stringify(datastoreQuery);
   const datastoreQueryRef = useRef(datastoreQuery);
@@ -70,11 +75,24 @@ export function useChatSocketAuth(datastoreQuery: Record<string, string>): ChatS
     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]),
-        })
+      const getToken = getAccessTokenRef.current;
+      if (!getToken) return;
+      let sends = 0;
+      const requestTicket = bearerFetch(getToken, async (input, init) => {
+        sends += 1;
+        onPhaseRef.current?.("ticket-requested");
+        const response = await fetch(input, init);
+        if (response.status === 401 && sends === 1) onPhaseRef.current?.("token-requested");
+        return response;
+      });
+      const ticketUrl = new URL(`/${chatTicketPath}`, mantaBaseUrl);
+      const mode = query[chatModeQueryParam];
+      if (isPresent(mode)) ticketUrl.searchParams.set(chatModeQueryParam, mode);
+      onPhaseRef.current?.("token-requested");
+      requestTicket(ticketUrl, {
+        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`);
@@ -84,6 +102,7 @@ export function useChatSocketAuth(datastoreQuery: Record<string, string>): ChatS
           if (!isPresent(ticket)) throw new Error(`Manta refused a chat ticket (${response.status})`);
           if (cancelled) return;
           ticketedAt.current = Date.now();
+          onPhaseRef.current?.("ticket-received");
           setTicketed({ datastoreKey, query: { ...query, [chatTicketQueryParam]: ticket } });
         })
         .catch((error: unknown) => {

package/src/providers/chat-startup-timing.ts

@@ -0,0 +1,89 @@
+import type { ChatStartupReport } from "../lib/chat-types";
+
+export type ChatSocketAuthPhase = "token-requested" | "ticket-requested" | "ticket-received";
+
+export type ChatViewStartupPhase = "chat-mounted" | "first-paint" | "interactive";
+
+export type ChatStartupPhase = ChatSocketAuthPhase | "socket-enabled" | "socket-open" | ChatViewStartupPhase;
+
+export type ChatStartupTimeline = {
+  startedAt: number;
+  marks: Partial<Record<ChatStartupPhase, number>>;
+  ticketAttempts: number;
+  socketAttempts: number;
+};
+
+export function createChatStartupTimeline(): ChatStartupTimeline {
+  return { startedAt: performance.now(), marks: {}, ticketAttempts: 0, socketAttempts: 0 };
+}
+
+const attemptEnds: Partial<Record<ChatStartupPhase, ChatStartupPhase>> = {
+  "token-requested": "socket-open",
+  "ticket-requested": "socket-open",
+  "ticket-received": "socket-open",
+  "socket-enabled": "socket-open",
+  "chat-mounted": "interactive",
+};
+
+const measures: Partial<Record<ChatStartupPhase, { name: string; from: ChatStartupPhase | "start" }>> = {
+  "ticket-requested": { name: "host-token", from: "token-requested" },
+  "ticket-received": { name: "ticket", from: "ticket-requested" },
+  "socket-open": { name: "socket", from: "socket-enabled" },
+  "chat-mounted": { name: "until-chat-mount", from: "start" },
+  "first-paint": { name: "until-first-paint", from: "chat-mounted" },
+  interactive: { name: "until-interactive", from: "chat-mounted" },
+};
+
+export function markChatStartup(timeline: ChatStartupTimeline, phase: ChatStartupPhase): boolean {
+  const attemptEnd = attemptEnds[phase];
+  if (timeline.marks[attemptEnd ?? phase] !== undefined) return false;
+  const now = performance.now();
+  timeline.marks[phase] = now - timeline.startedAt;
+  if (phase === "chat-mounted") delete timeline.marks["first-paint"];
+  if (phase === "token-requested") timeline.ticketAttempts += 1;
+  if (phase === "socket-enabled") timeline.socketAttempts += 1;
+  const measure = measures[phase];
+  const from = measure && (measure.from === "start" ? 0 : timeline.marks[measure.from]);
+  try {
+    performance.mark(`manta-chat:${phase}`);
+    if (measure && from !== undefined) {
+      performance.measure(`manta-chat:${measure.name}`, { start: timeline.startedAt + from, end: now });
+    }
+  } catch {}
+  return true;
+}
+
+function elapsed(from: number, to: number): number {
+  return Math.max(0, Math.round(to - from));
+}
+
+export function chatStartupReport(
+  timeline: ChatStartupTimeline,
+  input: Pick<ChatStartupReport, "surface" | "mode" | "openIndex">,
+): ChatStartupReport | undefined {
+  const { marks } = timeline;
+  const socketOpen = marks["socket-open"];
+  const chatMounted = marks["chat-mounted"];
+  const firstPaint = marks["first-paint"];
+  const interactive = marks.interactive;
+  if (socketOpen === undefined || chatMounted === undefined || firstPaint === undefined || interactive === undefined) {
+    return undefined;
+  }
+  const tokenRequested = marks["token-requested"];
+  const ticketRequested = marks["ticket-requested"];
+  const ticketReceived = marks["ticket-received"];
+  const ticketed = input.mode === "ticket" && ticketRequested !== undefined && ticketReceived !== undefined;
+  return {
+    ...input,
+    ...(ticketed && tokenRequested !== undefined ? { hostTokenMs: elapsed(tokenRequested, ticketRequested) } : {}),
+    ...(ticketed
+      ? { ticketMs: elapsed(ticketRequested, ticketReceived), ticketAttempts: Math.max(1, timeline.ticketAttempts) }
+      : {}),
+    socketMs: elapsed(marks["socket-enabled"] ?? 0, socketOpen),
+    socketAttempts: Math.max(1, timeline.socketAttempts),
+    chatMountMs: elapsed(0, chatMounted),
+    socketReadyAtOpen: socketOpen <= chatMounted,
+    firstPaintMs: elapsed(chatMounted, firstPaint),
+    interactiveMs: elapsed(chatMounted, interactive),
+  };
+}

package/src/routes/plans/components/ActionPlansTableColumns.tsx

@@ -16,6 +16,7 @@ import {
   IntegrationIcon,
   integrationToChannel,
   isTerminalActionPlanState,
+  needsApproval,
   planStateVariant,
   statusLabel,
 } from "#components/planning/plan-detail-utils";
@@ -38,9 +39,9 @@ function planStateLabel(plan: ActionPlan, pendingApprovalCount: number): string
   return match({
     state: plan.state,
     hasCurrentFacts: plan.hasCurrentFacts,
-    hasPendingApproval: pendingApprovalCount > 0,
+    needsApproval: needsApproval(plan.state, pendingApprovalCount),
   })
-    .with({ state: GQLActionPlanState.Running, hasPendingApproval: true }, () => "Needs approval")
+    .with({ needsApproval: true }, () => "Needs approval")
     .with({ state: GQLActionPlanState.Draft, hasCurrentFacts: false }, () => "Not currently executable")
     .with({ state: GQLActionPlanState.Draft }, () => "Ready to launch")
     .otherwise(({ state: matchedState }) => statusLabel(matchedState));