@opengeni/react 0.20.0 → 0.23.0

package/src/components/message-timeline.tsx

@@ -20,6 +20,7 @@ import type { ComponentType } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { Collapsible } from "radix-ui";
 import {
+  memo,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -108,6 +109,8 @@ export type MessageTimelineProps = {
   className?: string | undefined;
 };
 
+const INITIAL_MOUNTED_GROUPS = 1;
+
 /**
  * The session timeline: chat messages with streaming deltas, collapsed
  * activity clusters (reasoning, tool calls, sandbox work), spawned-worker
@@ -132,8 +135,10 @@ export function MessageTimeline({
   className,
 }: MessageTimelineProps) {
   const resolvedItems = useMemo(() => items ?? buildTimeline(events ?? []), [items, events]);
-  const groups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
-  const firstGroupKey = groups[0] ? timelineGroupKey(groups[0]) : null;
+  const allGroups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const keyedGroups = useStableTimelineGroupKeys(allGroups);
+  const { mountedGroups: groups, mountingOlderGroups } = useProgressivelyMountedGroups(keyedGroups);
+  const firstGroupKey = allGroups[0] ? timelineGroupKey(allGroups[0]) : null;
 
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const topSentinelRef = useRef<HTMLDivElement | null>(null);
@@ -178,7 +183,8 @@ export function MessageTimeline({
   const firstKeyChangedForBulk =
     previousBulkFirstKeyRef.current !== undefined &&
     previousBulkFirstKeyRef.current !== firstGroupKey;
-  const bulkRender = groups.length > 0 && (bulkActive || firstKeyChangedForBulk);
+  const bulkRender =
+    allGroups.length > 0 && (bulkActive || firstKeyChangedForBulk || mountingOlderGroups);
 
   // Snapshot the topmost visible element and where it sits in the viewport, so a
   // later reflow can restore it to the same spot. Transient chrome (the backfill
@@ -221,10 +227,10 @@ export function MessageTimeline({
   // A cleared timeline (stream identity change) re-arms the reveal so the next
   // session also first paints at its bottom.
   useLayoutEffect(() => {
-    if (groups.length === 0 && revealed) {
+    if (allGroups.length === 0 && revealed) {
       setRevealed(false);
     }
-  }, [groups.length, revealed]);
+  }, [allGroups.length, revealed]);
 
   // Clear the bulk-paint marker a frame after it renders, so rows appended
   // live (streams, new turns) animate exactly as before.
@@ -234,9 +240,15 @@ export function MessageTimeline({
       return;
     }
     setBulkActive(true);
+    // Initial tails and prepended history mount from newest to oldest across
+    // frames. Keep every row born during that bulk window animation-free; only
+    // clear the marker after the authoritative group list is fully mounted.
+    if (mountingOlderGroups) {
+      return;
+    }
     const frame = requestFrame(() => setBulkActive(false));
     return () => cancelFrame(frame);
-  }, [bulkRender, firstGroupKey]);
+  }, [bulkRender, firstGroupKey, mountingOlderGroups]);
 
   // Prefetch older history well before the reader reaches the top: the
   // sentinel sits above the first group and trips 1600px early, so backfill
@@ -248,6 +260,7 @@ export function MessageTimeline({
     if (
       !root ||
       !target ||
+      mountingOlderGroups ||
       !hasOlder ||
       loadingOlder ||
       !onLoadOlder ||
@@ -265,7 +278,7 @@ export function MessageTimeline({
     );
     observer.observe(target);
     return () => observer.disconnect();
-  }, [hasOlder, loadingOlder, onLoadOlder, firstGroupKey]);
+  }, [hasOlder, loadingOlder, onLoadOlder, firstGroupKey, mountingOlderGroups]);
 
   // Scroll anchoring: when the content reflows (a fold expands/collapses, a
   // stream appends), keep following the bottom if pinned; otherwise pin the
@@ -338,7 +351,7 @@ export function MessageTimeline({
                     <p className="py-10 text-center text-sm text-og-fg-subtle">No activity yet.</p>
                   ))
                 : null}
-              {hasOlder ? (
+              {hasOlder && !mountingOlderGroups ? (
                 <div
                   ref={topSentinelRef}
                   data-og-top-sentinel=""
@@ -352,9 +365,9 @@ export function MessageTimeline({
                   <span className="og-shimmer-text font-medium">Loading earlier activity…</span>
                 </div>
               ) : null}
-              {groups.map((group, index) => (
+              {groups.map(({ group, key }, index) => (
                 <TimelineGroupView
-                  key={timelineGroupKey(group)}
+                  key={key}
                   group={group}
                   renderMessageText={renderMessageText}
                   onOpenSession={onOpenSession}
@@ -362,7 +375,7 @@ export function MessageTimeline({
                   onReconnect={onReconnect}
                   resolveProviderLogo={resolveProviderLogo}
                   toolRegistry={toolRegistry}
-                  foldLiveCluster={isAgentProgress(groups[index + 1])}
+                  foldLiveCluster={isAgentProgress(groups[index + 1]?.group)}
                 />
               ))}
               {working ? (
@@ -406,6 +419,141 @@ export function MessageTimeline({
   );
 }
 
+type MountedGroupWindow = {
+  groupKeys: string[];
+  visibleStart: number;
+};
+
+type KeyedTimelineGroup = {
+  group: TimelineGroup;
+  key: string;
+};
+
+/**
+ * Projection can legitimately change a group's content-derived key while
+ * retaining its existing rows. The common pagination case is an older activity
+ * item merging into the first activity group; live appends grow the same group
+ * from the other side. Match the new authoritative groups to the previous
+ * committed groups by their durable item IDs so both the React key and the
+ * progressive-window anchor survive either change.
+ */
+function useStableTimelineGroupKeys(allGroups: TimelineGroup[]): KeyedTimelineGroup[] {
+  const previousRef = useRef<KeyedTimelineGroup[]>([]);
+  const keyedGroups = useMemo(() => {
+    const previousByItemId = new Map<string, KeyedTimelineGroup>();
+    for (const previous of previousRef.current) {
+      for (const itemId of timelineGroupItemIds(previous.group)) {
+        previousByItemId.set(itemId, previous);
+      }
+    }
+
+    const usedKeys = new Set<string>();
+    return allGroups.map((group, index) => {
+      const itemIds = timelineGroupItemIds(group);
+      let retainedKey: string | undefined;
+      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;
+}
+
+/**
+ * Bulk history is already projected into its authoritative order before this
+ * hook runs. Mount its newest group first, then prepend one older group per
+ * animation frame so low-end browsers can paint and service input between
+ * React/Markdown commits instead of doing the entire tail in one long task.
+ *
+ * A live append does not move the first mounted key, so it is included
+ * immediately in the mounted suffix. A history prepend moves that key deeper
+ * in the array; shifting `visibleStart` by that exact prefix keeps every
+ * existing row mounted while the new prefix is revealed. If projection
+ * coalesces the seam item itself away, the earliest surviving mounted key
+ * provides the same anchor. Replacements with no shared mounted key (for
+ * example a session switch or clear-view) start a fresh suffix.
+ */
+function useProgressivelyMountedGroups(allGroups: KeyedTimelineGroup[]): {
+  mountedGroups: KeyedTimelineGroup[];
+  mountingOlderGroups: boolean;
+} {
+  const previousGroupKeysRef = useRef<string[]>([]);
+  const groupKeys = useMemo(() => {
+    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 [window, setWindow] = useState<MountedGroupWindow>(() => ({
+    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: number | undefined;
+    for (const key of window.groupKeys.slice(window.visibleStart)) {
+      const index = currentIndexByKey.get(key);
+      if (index !== undefined) {
+        retainedStart = index;
+        break;
+      }
+    }
+    visibleStart =
+      retainedStart === undefined ? lastPossibleStart : Math.min(retainedStart, lastPossibleStart);
+  }
+
+  useEffect(() => {
+    // Synchronize a prepend/replacement before scheduling its first reveal.
+    if (window.groupKeys !== groupKeys || window.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, window.groupKeys, window.visibleStart]);
+
+  return {
+    mountedGroups: allGroups.slice(visibleStart),
+    mountingOlderGroups: visibleStart > 0,
+  };
+}
+
 function requestFrame(callback: FrameRequestCallback): number {
   if (typeof requestAnimationFrame === "function") {
     return requestAnimationFrame(callback);
@@ -421,7 +569,11 @@ function cancelFrame(id: number): void {
   window.clearTimeout(id);
 }
 
-function TimelineGroupView({
+// Progressive history mounting reuses the exact group objects from `allGroups`.
+// Skip repainting those stable rows on every prefix reveal; live projection
+// creates a new group object, and behavior/callback changes are separate props,
+// so ordinary streaming and host updates still invalidate immediately.
+const TimelineGroupView = memo(function TimelineGroupView({
   group,
   renderMessageText,
   onOpenSession,
@@ -531,7 +683,7 @@ function TimelineGroupView({
         />
       );
   }
-}
+});
 
 function timelineGroupKey(group: TimelineGroup): string {
   switch (group.kind) {
@@ -544,6 +696,17 @@ function timelineGroupKey(group: TimelineGroup): string {
   }
 }
 
+function timelineGroupItemIds(group: TimelineGroup): string[] {
+  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);
+  }
+}
+
 /** The agent has moved PAST a cluster only when what follows is more agent
     progress — new activity, a settled turn, or narration. A waiting notice
     (approval pause), a pending queued message, a goal pill, or nothing at all
@@ -998,12 +1161,12 @@ function NoticeRow({ item }: { item: NoticeItem }) {
 }
 
 /**
- * The inline connection card: a lapsed connection surfaces as a calm, tappable
- * reconnect affordance, while an incompatible host-owned endpoint/resource
- * contract remains informative and non-actionable. The `reason` only shapes
- * the helper copy; no domain or enum code is shown as a label.
- * `onReconnect` (from the app, which owns the SDK client) runs the flow; without
- * it, a pre-minted authorization link is offered, or the card stays informative.
+ * The inline connection-recovery card: missing or lapsed access surfaces as a
+ * calm, tappable affordance instead of a raw provider-domain error. The `reason`
+ * only shapes human copy; no domain or enum code is shown as a label.
+ * `onReconnect` (from the app, which owns the SDK client) starts the flow;
+ * without it, a pre-minted authorization link is offered, or the card stays
+ * informative. Recovery never claims to resume/replay the failed tool call.
  */
 function AuthNeededRow({
   item,
@@ -1020,6 +1183,8 @@ function AuthNeededRow({
   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) {
@@ -1030,6 +1195,7 @@ function AuthNeededRow({
     try {
       // On success the app redirects to consent (or routes to credential entry),
       // so this row unmounts; a resolve without navigation just relaxes the button.
+      // The callback starts authorization only. It never resumes this tool call.
       await onReconnect(item);
       setBusy(false);
     } catch {
@@ -1048,7 +1214,7 @@ function AuthNeededRow({
           />
           <div className="min-w-0">
             <p className="truncate text-og-md font-medium text-og-fg">
-              {unavailable ? `${provider} tools unavailable` : `Reconnect ${provider}`}
+              {unavailable ? `${provider} tools unavailable` : `${actionLabel} ${provider}`}
             </p>
             <p className="truncate text-og-sm text-og-fg-subtle">{authReasonLine(item.reason)}</p>
           </div>
@@ -1064,7 +1230,7 @@ function AuthNeededRow({
             )}
           >
             <RefreshCwIcon className={cn("size-3.5", busy && "animate-og-spin")} aria-hidden />
-            {busy ? "Reconnecting…" : "Reconnect"}
+            {busy ? "Opening…" : actionLabel}
           </button>
         ) : !unavailable && item.authorizationUrl ? (
           <a
@@ -1077,13 +1243,19 @@ function AuthNeededRow({
             )}
           >
             <RefreshCwIcon className="size-3.5" aria-hidden />
-            Reconnect
+            {actionLabel}
           </a>
         ) : null}
       </div>
+      {!unavailable ? (
+        <p className="px-1 text-og-xs text-og-fg-subtle">
+          This tool call wasn't replayed. After {missing ? "connecting" : "reconnecting"}, send a
+          new message to try again.
+        </p>
+      ) : null}
       {failed ? (
         <p className="px-1 text-og-xs text-og-status-failed">
-          Couldn't start reconnecting {provider}. Try again.
+          Couldn't start {missing ? "connecting" : "reconnecting"} {provider}. Try again.
         </p>
       ) : null}
     </div>

package/src/components/queue-draft-policy.ts

@@ -0,0 +1,18 @@
+import type { ComposerState } from "../hooks/use-composer";
+
+/**
+ * Decide whether checking out a queued prompt would replace current composer
+ * content. `hasDraftContent` reads the synchronous draft refs, so this stays
+ * correct even when a controlled input update has not rendered yet.
+ */
+export function requestQueueDraftEdit(
+  composer: Pick<ComposerState, "hasDraftContent">,
+  confirmReplacement: () => void,
+  editImmediately: () => void,
+): void {
+  if (composer.hasDraftContent()) {
+    confirmReplacement();
+  } else {
+    editImmediately();
+  }
+}

package/src/components/queue-surface-implementation.tsx

@@ -40,6 +40,7 @@ import {
 import { DropdownMenu } from "radix-ui";
 import type { ComposerState } from "../hooks/use-composer";
 import type { QueueMutationKind, UseTurnQueueResult } from "../hooks/use-turn-queue";
+import { requestQueueDraftEdit } from "./queue-draft-policy";
 import { QueueErrorAlert, QueueStoppingStatus } from "./queue-surface-state";
 
 /** The sole human prompt queue: compact above Goal, Agents, and composer. */
@@ -217,16 +218,11 @@ export function QueueSurface({
   const requestEdit = useCallback(
     (turn: SessionTurn) => {
       if (!composer || !canEditInComposer) return;
-      const draftDirty =
-        composer.value.length > 0 ||
-        composer.restoredResources.length > 0 ||
-        (composer.draft?.tools.length ?? 0) > 0 ||
-        (composer.draft?.sourceTurnId !== null && composer.draft?.sourceTurnId !== undefined);
-      if (draftDirty) {
-        setReplaceDraftFor(turn.id);
-      } else {
-        void edit(turn, false);
-      }
+      requestQueueDraftEdit(
+        composer,
+        () => setReplaceDraftFor(turn.id),
+        () => void edit(turn, false),
+      );
     },
     [canEditInComposer, composer, edit],
   );

package/src/components/queue-surface.tsx

@@ -2,6 +2,7 @@ import { Loader2Icon } from "lucide-react";
 import { lazy, Suspense, type ComponentType } from "react";
 
 import type { QueueSurfaceProps } from "./queue-surface-implementation";
+export { requestQueueDraftEdit } from "./queue-draft-policy";
 import { EmptyQueueStateSurface } from "./queue-surface-state";
 
 export type { QueueSurfaceProps } from "./queue-surface-implementation";