@manta-eu/react 0.4.0 → 0.5.1

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