@opengeni/react 0.20.0 → 0.23.0

package/dist/index.js

@@ -36,7 +36,7 @@ import {
   useChatComposerController,
   useSlashCommands,
   useTranscription
-} from "./chunk-LAZ2A743.js";
+} from "./chunk-CATATY77.js";
 import {
   CONNECTION_STATUS_META,
   ConnectionDot,
@@ -64,7 +64,7 @@ import {
   healthPulses,
   pointsFor,
   useMachines
-} from "./chunk-6BXBGJ3B.js";
+} from "./chunk-6XUS5VFM.js";
 import {
   cn
 } from "./chunk-TK7G6XLT.js";
@@ -82,6 +82,7 @@ import {
   groupTimeline,
   humanInputRequestFromEvent,
   isHumanInputEvent,
+  isSessionMcpApprovalPolicyEvent,
   isTurnQueueEvent,
   projectPendingApprovals,
   projectPendingHumanInputRequests,
@@ -90,15 +91,16 @@ import {
   useHumanInputRequests,
   useSessionControl,
   useSessionEvents,
+  useSessionMcpApprovalPolicy,
   useTurnQueue
-} from "./chunk-6UT5OC3P.js";
+} from "./chunk-UAHPKLB6.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,
   shouldSteerOnKey,
   shouldSubmitOnKey,
   useComposer
-} from "./chunk-MRSECXRP.js";
+} from "./chunk-UQS7OQDE.js";
 import {
   CREDIT_EXHAUSTION_MESSAGE,
   formatBytes,
@@ -114,10 +116,10 @@ import {
   useOpenGeniClient,
   usePolledValue,
   useSessionEventTrigger
-} from "./chunk-HHFA4AFX.js";
+} from "./chunk-I3BJZIG5.js";
 import {
   EmptyQueueStateSurface
-} from "./chunk-EBTT3MYN.js";
+} from "./chunk-YDNWMKXO.js";
 
 // src/hooks/use-session.ts
 import { useCallback, useEffect, useState } from "react";
@@ -328,7 +330,7 @@ function useFileAttachments(options = {}) {
 import { Loader2Icon } from "lucide-react";
 import { lazy, Suspense } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var loadQueueSurface = () => import("./queue-surface-implementation-NQMV2ML3.js");
+var loadQueueSurface = () => import("./queue-surface-implementation-3UW3MIIR.js");
 var QueueSurface = createQueueSurface(loadQueueSurface);
 function createQueueSurface(loadImplementation) {
   const LazyQueueSurface = lazy(async () => ({
@@ -6147,6 +6149,7 @@ import {
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion/react";
 import { Collapsible as Collapsible3 } from "radix-ui";
 import {
+  memo as memo2,
   useCallback as useCallback20,
   useEffect as useEffect17,
   useLayoutEffect,
@@ -6389,6 +6392,7 @@ function StatusDot({ status, className }) {
 
 // src/components/message-timeline.tsx
 import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var INITIAL_MOUNTED_GROUPS = 1;
 function MessageTimeline({
   events,
   items,
@@ -6407,8 +6411,10 @@ function MessageTimeline({
   className
 }) {
   const resolvedItems = useMemo7(() => items ?? buildTimeline(events ?? []), [items, events]);
-  const groups = useMemo7(() => groupTimeline(resolvedItems), [resolvedItems]);
-  const firstGroupKey = groups[0] ? timelineGroupKey(groups[0]) : null;
+  const allGroups = useMemo7(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const keyedGroups = useStableTimelineGroupKeys(allGroups);
+  const { mountedGroups: groups, mountingOlderGroups } = useProgressivelyMountedGroups(keyedGroups);
+  const firstGroupKey = allGroups[0] ? timelineGroupKey(allGroups[0]) : null;
   const scrollRef = useRef16(null);
   const topSentinelRef = useRef16(null);
   const previousBulkFirstKeyRef = useRef16(void 0);
@@ -6430,7 +6436,7 @@ function MessageTimeline({
   const streaming = lastItem !== void 0 && (lastItem.kind === "agent-message" || lastItem.kind === "reasoning") && lastItem.streaming;
   const working = status === "running" && !streaming;
   const firstKeyChangedForBulk = previousBulkFirstKeyRef.current !== void 0 && previousBulkFirstKeyRef.current !== firstGroupKey;
-  const bulkRender = groups.length > 0 && (bulkActive || firstKeyChangedForBulk);
+  const bulkRender = allGroups.length > 0 && (bulkActive || firstKeyChangedForBulk || mountingOlderGroups);
   const captureAnchor = useCallback20(() => {
     const node = scrollRef.current;
     const inner = node?.firstElementChild;
@@ -6461,23 +6467,26 @@ function MessageTimeline({
     }
   }, [resolvedItems, working, autoFollow, pinned, revealed, groups.length, assignScrollTop]);
   useLayoutEffect(() => {
-    if (groups.length === 0 && revealed) {
+    if (allGroups.length === 0 && revealed) {
       setRevealed(false);
     }
-  }, [groups.length, revealed]);
+  }, [allGroups.length, revealed]);
   useLayoutEffect(() => {
     previousBulkFirstKeyRef.current = firstGroupKey;
     if (!bulkRender) {
       return;
     }
     setBulkActive(true);
+    if (mountingOlderGroups) {
+      return;
+    }
     const frame = requestFrame(() => setBulkActive(false));
     return () => cancelFrame(frame);
-  }, [bulkRender, firstGroupKey]);
+  }, [bulkRender, firstGroupKey, mountingOlderGroups]);
   useEffect17(() => {
     const root = scrollRef.current;
     const target = topSentinelRef.current;
-    if (!root || !target || !hasOlder || loadingOlder || !onLoadOlder || typeof IntersectionObserver === "undefined") {
+    if (!root || !target || mountingOlderGroups || !hasOlder || loadingOlder || !onLoadOlder || typeof IntersectionObserver === "undefined") {
       return;
     }
     const observer = new IntersectionObserver(
@@ -6490,7 +6499,7 @@ function MessageTimeline({
     );
     observer.observe(target);
     return () => observer.disconnect();
-  }, [hasOlder, loadingOlder, onLoadOlder, firstGroupKey]);
+  }, [hasOlder, loadingOlder, onLoadOlder, firstGroupKey, mountingOlderGroups]);
   useEffect17(() => {
     const node = scrollRef.current;
     const inner = node?.firstElementChild;
@@ -6544,7 +6553,7 @@ function MessageTimeline({
         className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 [overflow-anchor:none] sm:px-6",
         children: /* @__PURE__ */ jsxs12("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5", children: [
           groups.length === 0 && !working ? emptyState ?? /* @__PURE__ */ jsx15("p", { className: "py-10 text-center text-sm text-og-fg-subtle", children: "No activity yet." }) : null,
-          hasOlder ? /* @__PURE__ */ jsx15(
+          hasOlder && !mountingOlderGroups ? /* @__PURE__ */ jsx15(
             "div",
             {
               ref: topSentinelRef,
@@ -6555,7 +6564,7 @@ function MessageTimeline({
             }
           ) : null,
           loadingOlder ? /* @__PURE__ */ jsx15("div", { "data-og-timeline-chrome": "", className: "flex items-center gap-2 text-sm", children: /* @__PURE__ */ jsx15("span", { className: "og-shimmer-text font-medium", children: "Loading earlier activity\u2026" }) }) : null,
-          groups.map((group, index) => /* @__PURE__ */ jsx15(
+          groups.map(({ group, key }, index) => /* @__PURE__ */ jsx15(
             TimelineGroupView,
             {
               group,
@@ -6565,9 +6574,9 @@ function MessageTimeline({
               onReconnect,
               resolveProviderLogo,
               toolRegistry,
-              foldLiveCluster: isAgentProgress(groups[index + 1])
+              foldLiveCluster: isAgentProgress(groups[index + 1]?.group)
             },
-            timelineGroupKey(group)
+            key
           )),
           working ? /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2 text-sm", children: /* @__PURE__ */ jsx15("span", { className: "og-shimmer-text font-medium", children: "Working\u2026" }) }) : null
         ] })
@@ -6603,6 +6612,90 @@ function MessageTimeline({
     ) : null })
   ] }) }) });
 }
+function useStableTimelineGroupKeys(allGroups) {
+  const previousRef = useRef16([]);
+  const keyedGroups = useMemo7(() => {
+    const previousByItemId = /* @__PURE__ */ new Map();
+    for (const previous of previousRef.current) {
+      for (const itemId of timelineGroupItemIds(previous.group)) {
+        previousByItemId.set(itemId, previous);
+      }
+    }
+    const usedKeys = /* @__PURE__ */ new Set();
+    return allGroups.map((group, index) => {
+      const itemIds = timelineGroupItemIds(group);
+      let retainedKey;
+      for (const itemId of itemIds) {
+        const previous = previousByItemId.get(itemId);
+        if (previous && !usedKeys.has(previous.key)) {
+          retainedKey = previous.key;
+          break;
+        }
+      }
+      const canonicalKey = timelineGroupKey(group);
+      let key = retainedKey ?? canonicalKey;
+      let collision = 0;
+      while (usedKeys.has(key)) {
+        key = `${canonicalKey}:${index}:${collision}`;
+        collision += 1;
+      }
+      usedKeys.add(key);
+      return { group, key };
+    });
+  }, [allGroups]);
+  useLayoutEffect(() => {
+    previousRef.current = keyedGroups;
+  }, [keyedGroups]);
+  return keyedGroups;
+}
+function useProgressivelyMountedGroups(allGroups) {
+  const previousGroupKeysRef = useRef16([]);
+  const groupKeys = useMemo7(() => {
+    const nextKeys = allGroups.map((group) => group.key);
+    const previousKeys = previousGroupKeysRef.current;
+    return nextKeys.length === previousKeys.length && nextKeys.every((key, index) => key === previousKeys[index]) ? previousKeys : nextKeys;
+  }, [allGroups]);
+  useLayoutEffect(() => {
+    previousGroupKeysRef.current = groupKeys;
+  }, [groupKeys]);
+  const [window2, setWindow] = useState21(() => ({
+    groupKeys,
+    visibleStart: Math.max(0, allGroups.length - INITIAL_MOUNTED_GROUPS)
+  }));
+  const lastPossibleStart = Math.max(0, allGroups.length - INITIAL_MOUNTED_GROUPS);
+  let visibleStart = 0;
+  if (allGroups.length > 0) {
+    const currentIndexByKey = new Map(groupKeys.map((key, index) => [key, index]));
+    let retainedStart;
+    for (const key of window2.groupKeys.slice(window2.visibleStart)) {
+      const index = currentIndexByKey.get(key);
+      if (index !== void 0) {
+        retainedStart = index;
+        break;
+      }
+    }
+    visibleStart = retainedStart === void 0 ? lastPossibleStart : Math.min(retainedStart, lastPossibleStart);
+  }
+  useEffect17(() => {
+    if (window2.groupKeys !== groupKeys || window2.visibleStart !== visibleStart) {
+      setWindow({ groupKeys, visibleStart });
+      return;
+    }
+    if (visibleStart === 0) {
+      return;
+    }
+    const frame = requestFrame(() => {
+      setWindow(
+        (current) => current.groupKeys === groupKeys && current.visibleStart > 0 ? { ...current, visibleStart: current.visibleStart - 1 } : current
+      );
+    });
+    return () => cancelFrame(frame);
+  }, [groupKeys, visibleStart, window2.groupKeys, window2.visibleStart]);
+  return {
+    mountedGroups: allGroups.slice(visibleStart),
+    mountingOlderGroups: visibleStart > 0
+  };
+}
 function requestFrame(callback) {
   if (typeof requestAnimationFrame === "function") {
     return requestAnimationFrame(callback);
@@ -6616,7 +6709,7 @@ function cancelFrame(id) {
   }
   window.clearTimeout(id);
 }
-function TimelineGroupView({
+var TimelineGroupView = memo2(function TimelineGroupView2({
   group,
   renderMessageText,
   onOpenSession,
@@ -6665,7 +6758,7 @@ function TimelineGroupView({
     case "turn": {
       const activityItems = flattenActivityItems(group.groups);
       const body = group.groups.map((child) => /* @__PURE__ */ jsx15(
-        TimelineGroupView,
+        TimelineGroupView2,
         {
           group: child,
           renderMessageText,
@@ -6711,7 +6804,7 @@ function TimelineGroupView({
         }
       );
   }
-}
+});
 function timelineGroupKey(group) {
   switch (group.kind) {
     case "item":
@@ -6722,6 +6815,16 @@ function timelineGroupKey(group) {
       return group.id;
   }
 }
+function timelineGroupItemIds(group) {
+  switch (group.kind) {
+    case "item":
+      return [group.item.id];
+    case "activity":
+      return group.items.map((item) => item.id);
+    case "turn":
+      return group.groups.flatMap(timelineGroupItemIds);
+  }
+}
 function isAgentProgress(next) {
   if (!next) {
     return false;
@@ -7044,6 +7147,8 @@ function AuthNeededRow({
   const [failed, setFailed] = useState21(false);
   const provider = providerLabel(item.providerDomain);
   const unavailable = item.reason === "unsupported_auth" || item.reason === "resource_scope_unavailable";
+  const missing = item.reason === "missing_connection";
+  const actionLabel = missing ? "Connect" : "Reconnect";
   const start = async () => {
     if (!onReconnect || busy) {
       return;
@@ -7069,7 +7174,7 @@ function AuthNeededRow({
           }
         ),
         /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx15("p", { className: "truncate text-og-md font-medium text-og-fg", children: unavailable ? `${provider} tools unavailable` : `Reconnect ${provider}` }),
+          /* @__PURE__ */ jsx15("p", { className: "truncate text-og-md font-medium text-og-fg", children: unavailable ? `${provider} tools unavailable` : `${actionLabel} ${provider}` }),
           /* @__PURE__ */ jsx15("p", { className: "truncate text-og-sm text-og-fg-subtle", children: authReasonLine(item.reason) })
         ] })
       ] }),
@@ -7085,7 +7190,7 @@ function AuthNeededRow({
           ),
           children: [
             /* @__PURE__ */ jsx15(RefreshCwIcon, { className: cn("size-3.5", busy && "animate-og-spin"), "aria-hidden": true }),
-            busy ? "Reconnecting\u2026" : "Reconnect"
+            busy ? "Opening\u2026" : actionLabel
           ]
         }
       ) : !unavailable && item.authorizationUrl ? /* @__PURE__ */ jsxs12(
@@ -7100,13 +7205,20 @@ function AuthNeededRow({
           ),
           children: [
             /* @__PURE__ */ jsx15(RefreshCwIcon, { className: "size-3.5", "aria-hidden": true }),
-            "Reconnect"
+            actionLabel
           ]
         }
       ) : null
     ] }),
+    !unavailable ? /* @__PURE__ */ jsxs12("p", { className: "px-1 text-og-xs text-og-fg-subtle", children: [
+      "This tool call wasn't replayed. After ",
+      missing ? "connecting" : "reconnecting",
+      ", send a new message to try again."
+    ] }) : null,
     failed ? /* @__PURE__ */ jsxs12("p", { className: "px-1 text-og-xs text-og-status-failed", children: [
-      "Couldn't start reconnecting ",
+      "Couldn't start ",
+      missing ? "connecting" : "reconnecting",
+      " ",
       provider,
       ". Try again."
     ] }) : null
@@ -12317,6 +12429,7 @@ export {
   isGoalEvent,
   isHumanInputEvent,
   isLineageRefreshEvent,
+  isSessionMcpApprovalPolicyEvent,
   isTitleEvent,
   isTurnQueueEvent,
   languageForPath,
@@ -12374,6 +12487,7 @@ export {
   useSessionControl,
   useSessionEvents,
   useSessionLineage,
+  useSessionMcpApprovalPolicy,
   useSlashCommands,
   useTerminalStream,
   useTranscription,