@opengeni/react 0.34.2 → 0.35.2

package/src/components/message-timeline.tsx

@@ -22,6 +22,7 @@ import type { ComponentType } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { Collapsible } from "radix-ui";
 import {
+  Component,
   memo,
   useCallback,
   useEffect,
@@ -32,7 +33,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../lib/cn";
-import { formatRelativeTime, truncate } from "../lib/format";
+import { formatClockTime, formatRelativeTime, truncate } from "../lib/format";
 import { prefersReducedMotion } from "../lib/motion";
 import { Markdown } from "./markdown";
 import {
@@ -41,6 +42,7 @@ import {
   tipFollowCancel,
   tipFollowCompensateShrink,
   tipFollowStep,
+  supportsScrollEndEvent,
   TIP_FOLLOW_READER_UP_EPS_PX,
   TIP_FOLLOW_SHRINK_EPS_PX,
   type TipFollowState,
@@ -158,12 +160,16 @@ export type MessageTimelineProps = {
  * replaces was the "content is hidden, then pops in in batches" wobble.)
  *
  * Scroll invariant (tip-follow camera — see `./tip-follow.ts`):
- * - DOM truth mounts immediately; the camera eases down to the tip (not
+ * - Load/remount: hidden until tip is hard-snapped across a short settle; then
+ *   reveal. Live tip: DOM grows immediately; the camera eases down (not
  *   tip-glued feed-forward — that is the one-line yank).
  * - One continuous follow while hot (faster τ when behind); sleeps when cold.
  * - While pinned, tip-debt from growth/collapse must NEVER unpin — only
- *   wheel/keys/pointer-armed scroll-up. Height shrink compensates scrollTop
- *   by Δh (collapse owns motion); tip-ease pauses briefly so the two don't fight.
+ *   wheel/keys/pointer-armed scroll-up, or a settled scrollend away from the
+ *   tip while the tip-follow camera is idle (Vimium / unfocused PageUp).
+ *   Height shrink compensates scrollTop by Δh (collapse owns motion); tip-ease
+ *   pauses briefly so the two don't fight. Programmatic camera writes are
+ *   tagged so their scroll echoes never count as leave.
  * - overflow-anchor off while pinned so the browser cannot instant-correct.
  * - Scrolled up → history prepends restore via the retained group anchor
  *   (offsetTop delta); loadOlder can truncate the tip, so scrollHeight delta
@@ -288,9 +294,10 @@ export function MessageTimeline({
   const olderLoadGateRef = useRef<"armed" | "cooling">("armed");
   const resizeFollowRafRef = useRef<number | null>(null);
   const firstGroupKey = allGroups[0] ? timelineGroupKey(allGroups[0]) : null;
-  // Content stays invisible until its first bottom-anchored frame, so a flash
-  // of the window's TOP while a large timeline lays out is structurally
-  // impossible — the reader only ever sees it already at the bottom.
+  // Content stays invisible until the tip is hard-parked across a short
+  // post-commit settle (two rAFs). That absorbs sync late layout while hidden
+  // so load/remount does not ease into the tip — live tip-follow is unchanged
+  // once revealed. A flash of the window's TOP is still structurally impossible.
   const [revealed, setRevealed] = useState(false);
   // Mirror `pinned` into a ref, written ONLY by applyPinned, so the
   // ResizeObserver rAF (a stable closure) reads the live value and a snap can
@@ -325,11 +332,24 @@ export function MessageTimeline({
   const lastScrollHeightRef = useRef(0);
   const lastClientHeightRef = useRef(0);
   /**
-   * Armed by pointerdown on the scroller. Geometric scroll-up only unpins
-   * while armed — mid-turn fold+growth also drops scrollTop with a flat
-   * maxScroll and must NOT count as leave. Wheel/keys unpin directly.
+   * Armed by pointerdown on the scroller. Immediate geometric scroll-up unpins
+   * while armed (scrollbar / touch drag). Wheel/keys unpin directly. Extension
+   * jumps (Vimium) settle via scrollend while the camera is idle.
    */
   const readerIntentArmRef = useRef(false);
+  /**
+   * Count of camera/snap scrollTop writes whose scroll echoes are not yet
+   * consumed. A boolean was wrong when the browser coalesced two writes into
+   * one scroll event (or fired two) — use a count, and clear to 0 on echo.
+   */
+  const programmaticScrollRef = useRef(0);
+  /**
+   * Unarmed scroll-away observed; waiting for scrollend (or rAF fallback).
+   * Blocks layout tip-follow so a stream token cannot yank before leave settles.
+   */
+  const pendingReaderLeaveRef = useRef(false);
+  /** Fallback leave check when `scrollend` is missing (one rAF, not a timer). */
+  const leaveFallbackRafRef = useRef<number | null>(null);
   // Resting fold state per durable group id (see fold-memory.ts). Outlives the
   // deliberate chip remounts (activity→turn wrap, nested key flips) so a fold
   // that already settled closed — or that the reader closed — never reopens.
@@ -369,6 +389,27 @@ export function MessageTimeline({
     lastClientHeightRef.current = node.clientHeight;
   }, []);
 
+  const writeScrollTop = useCallback((node: HTMLElement, top: number) => {
+    const next = Math.max(0, top);
+    if (node.scrollTop === next) {
+      return;
+    }
+    programmaticScrollRef.current += 1;
+    node.scrollTop = next;
+  }, []);
+
+  const cancelLeaveFallback = useCallback(() => {
+    if (leaveFallbackRafRef.current !== null) {
+      cancelFrame(leaveFallbackRafRef.current);
+      leaveFallbackRafRef.current = null;
+    }
+  }, []);
+
+  const clearPendingReaderLeave = useCallback(() => {
+    pendingReaderLeaveRef.current = false;
+    cancelLeaveFallback();
+  }, [cancelLeaveFallback]);
+
   const stopFollow = useCallback(() => {
     followRef.current = tipFollowCancel(followRef.current);
     if (followFrameRef.current !== null) {
@@ -377,7 +418,7 @@ export function MessageTimeline({
     }
   }, []);
 
-  /** Reader left the tip — wheel, keyboard, or pointer-armed scroll-up. */
+  /** Reader left the tip — wheel, keyboard, pointer-armed scroll-up, or scrollend. */
   const releasePinFromReader = useCallback(
     (node?: HTMLElement | null) => {
       if (!autoFollow || !pinnedRef.current || hasNewerRef.current) {
@@ -388,6 +429,7 @@ export function MessageTimeline({
         return;
       }
       readerIntentArmRef.current = false;
+      clearPendingReaderLeave();
       stopFollow();
       applyPinned(false);
       if (wantPinRef.current) {
@@ -398,9 +440,51 @@ export function MessageTimeline({
         setOlderPrefetchArmed(true);
       }
     },
-    [autoFollow, applyPinned, stopFollow],
+    [autoFollow, applyPinned, clearPendingReaderLeave, stopFollow],
   );
 
+  /**
+   * Settled away from the tip while the camera is idle — Vimium / unfocused
+   * PageUp. Folds are recovered by layout tip-follow before this fires at tip.
+   */
+  const releasePinAfterScrollSettled = useCallback(
+    (node: HTMLElement) => {
+      if (!autoFollow || !pinnedRef.current || hasNewerRef.current) {
+        return;
+      }
+      if (programmaticScrollRef.current > 0) {
+        return;
+      }
+      if (followRef.current.running || followFrameRef.current !== null) {
+        return;
+      }
+      if (isNearBottom(node) || maxScrollOf(node) <= 1) {
+        clearPendingReaderLeave();
+        return;
+      }
+      releasePinFromReader(node);
+      if (olderLoadGateRef.current === "cooling" && node.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
+        olderLoadGateRef.current = "armed";
+      }
+    },
+    [autoFollow, clearPendingReaderLeave, releasePinFromReader],
+  );
+
+  const scheduleLeaveFallback = useCallback(() => {
+    // Prefer scrollend when the engine supports it.
+    if (supportsScrollEndEvent()) {
+      return;
+    }
+    cancelLeaveFallback();
+    leaveFallbackRafRef.current = requestFrame(() => {
+      leaveFallbackRafRef.current = null;
+      const current = scrollRef.current;
+      if (current) {
+        releasePinAfterScrollSettled(current);
+      }
+    });
+  }, [cancelLeaveFallback, releasePinAfterScrollSettled]);
+
   const onWheel = (event: {
     deltaY: number;
     deltaX: number;
@@ -455,14 +539,15 @@ export function MessageTimeline({
   const snapToBottom = useCallback(
     (node: HTMLElement) => {
       stopFollow();
-      node.scrollTop = Math.max(0, node.scrollHeight - node.clientHeight);
+      cancelLeaveFallback();
+      writeScrollTop(node, Math.max(0, node.scrollHeight - node.clientHeight));
       syncScrollBaseline(node);
       followRef.current = {
         ...followRef.current,
         lastHeight: node.scrollHeight,
       };
     },
-    [stopFollow, syncScrollBaseline],
+    [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
   );
 
   const driveFollowRef = useRef<(node: HTMLElement, now?: number) => void>(() => undefined);
@@ -472,6 +557,12 @@ export function MessageTimeline({
         stopFollow();
         return;
       }
+      // Reader/extension leave in flight — do not yank back before scrollend.
+      if (pendingReaderLeaveRef.current) {
+        stopFollow();
+        return;
+      }
+      cancelLeaveFallback();
       // Prefer the rAF timestamp so ease integrates against vsync (and tests
       // can advance a synthetic clock via requestAnimationFrame callbacks).
       const now =
@@ -493,9 +584,7 @@ export function MessageTimeline({
           node.scrollHeight,
           node.clientHeight,
         );
-        if (node.scrollTop !== nextTop) {
-          node.scrollTop = nextTop;
-        }
+        writeScrollTop(node, nextTop);
         syncScrollBaseline(node);
         followRef.current = {
           ...followRef.current,
@@ -531,11 +620,10 @@ export function MessageTimeline({
         revealed: revealedRef.current,
       });
       followRef.current = result.state;
-      if (node.scrollTop !== result.scrollTop) {
-        node.scrollTop = result.scrollTop;
-      }
+      writeScrollTop(node, result.scrollTop);
       syncScrollBaseline(node);
       if (result.state.running) {
+        cancelLeaveFallback();
         if (followFrameRef.current === null) {
           followFrameRef.current = requestFrame((frameNow) => {
             followFrameRef.current = null;
@@ -550,11 +638,12 @@ export function MessageTimeline({
         followFrameRef.current = null;
       }
     },
-    [stopFollow, syncScrollBaseline],
+    [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
   );
   driveFollowRef.current = driveFollow;
 
   useEffect(() => stopFollow, [stopFollow]);
+  useEffect(() => () => cancelLeaveFallback(), [cancelLeaveFallback]);
 
   // The single post-commit scroll authority. Runs after EVERY commit (no dep
   // list): any commit may change content height, and the decision is cheap.
@@ -578,7 +667,7 @@ export function MessageTimeline({
       // prepend correction (it would shift the reader away from the top).
       pendingJumpToStartRef.current = false;
       stopFollow();
-      node.scrollTop = 0;
+      writeScrollTop(node, 0);
     } else if (wantPinRef.current && !hasNewer) {
       // Jump-to-latest was pressed on a history window and the tip window is
       // in THIS commit — consume pre-paint so the first tip frame is already
@@ -589,8 +678,19 @@ export function MessageTimeline({
         snapToBottom(node);
       }
     } else if (autoFollow && pinnedRef.current && !hasNewer) {
-      // Live tip: tip-follow camera eases down (snap only first paint / jumps).
-      driveFollow(node);
+      // Load/remount (still hidden): hard-park. Live tip after reveal: ease.
+      // Pending unarmed leave: tip *growth* must not yank (Vimium during stream).
+      // Flat/shrink commits (fold) still recover — height did not grow under us.
+      if (!revealedRef.current) {
+        snapToBottom(node);
+      } else if (pendingReaderLeaveRef.current) {
+        if (node.scrollHeight <= lastScrollHeightRef.current) {
+          clearPendingReaderLeave();
+          driveFollow(node);
+        }
+      } else {
+        driveFollow(node);
+      }
     } else if (prepended) {
       // Keep the reader on the same retained rows. Prefer the offsetTop delta
       // of the group that still holds the previous first item — that stays
@@ -622,7 +722,7 @@ export function MessageTimeline({
       if (delta !== null) {
         const expected = previousScrollTop + delta;
         if (Math.abs(node.scrollTop - expected) > 2) {
-          node.scrollTop = expected;
+          writeScrollTop(node, expected);
         }
       }
     }
@@ -661,11 +761,46 @@ export function MessageTimeline({
       }
       groupOffsetByKeyRef.current = nextOffsetByKey;
     }
-    if (!revealed && groups.length > 0) {
-      setRevealed(true);
-    }
   });
 
+  // First paint / session remount: keep the scroller hidden, snap to tip for
+  // two animation frames (late sync layout), then reveal. Does not change the
+  // tip-follow ease law used once `revealed` is true.
+  useLayoutEffect(() => {
+    if (revealed || allGroups.length === 0) {
+      return;
+    }
+    let cancelled = false;
+    let frame2 = 0;
+    const park = () => {
+      const node = scrollRef.current;
+      if (node && autoFollow && pinnedRef.current && !hasNewerRef.current) {
+        snapToBottom(node);
+      }
+    };
+    park();
+    const frame1 = requestFrame(() => {
+      if (cancelled) {
+        return;
+      }
+      park();
+      frame2 = requestFrame(() => {
+        if (cancelled) {
+          return;
+        }
+        park();
+        setRevealed(true);
+      });
+    });
+    return () => {
+      cancelled = true;
+      cancelFrame(frame1);
+      if (frame2 !== 0) {
+        cancelFrame(frame2);
+      }
+    };
+  }, [revealed, allGroups.length, autoFollow, snapToBottom]);
+
   // A cleared timeline (stream identity change) re-arms the reveal + prefetch
   // gate and returns to bottom-follow for the next session's first paint.
   useLayoutEffect(() => {
@@ -792,9 +927,15 @@ export function MessageTimeline({
         if (!current) {
           return;
         }
-        if (autoFollow && pinnedRef.current && !hasNewerRef.current) {
-          driveFollow(current);
+        if (!autoFollow || !pinnedRef.current || hasNewerRef.current) {
+          return;
         }
+        // Still unveiling the first tip frame: hard-park (no ease settle).
+        if (!revealedRef.current) {
+          snapToBottom(current);
+          return;
+        }
+        driveFollow(current);
       });
     });
     observer.observe(inner);
@@ -808,7 +949,7 @@ export function MessageTimeline({
         resizeFollowRafRef.current = null;
       }
     };
-  }, [autoFollow, driveFollow]);
+  }, [autoFollow, driveFollow, snapToBottom]);
 
   // Entering a non-tip history window: drop any live pin so the page bottom
   // cannot re-stick follow across loadNewer. Leaving it (the tip window
@@ -838,9 +979,9 @@ export function MessageTimeline({
     }
   }, [hasNewer, autoFollow, applyPinned, snapToBottom, stopFollow]);
 
-  // Unpin: wheel / keys always; pointer-armed geometric scroll-up only.
-  // Mid-turn fold + narration drops scrollTop while maxScroll stays flat —
-  // treating that as reader-up was the Jump-to-latest bug on soft-follow.
+  // Pinned: layout/camera recover tip debt; wheel/keys/pointer-arm unpin
+  // immediately; extension jumps settle via scrollend (or one-rAF fallback).
+  // Do not tip-follow-yank an in-flight unarmed scroll-away — that ate Vimium.
   const onScroll = () => {
     const node = scrollRef.current;
     if (!node) {
@@ -857,17 +998,34 @@ export function MessageTimeline({
     const heightShrunk =
       followRef.current.lastHeight > 0 &&
       nextHeight < followRef.current.lastHeight - TIP_FOLLOW_SHRINK_EPS_PX;
+    // Consume all pending camera-write echoes (browsers may coalesce writes).
+    const programmatic = programmaticScrollRef.current > 0;
+    if (programmatic) {
+      programmaticScrollRef.current = 0;
+    }
 
     if (autoFollow && pinnedRef.current && !hasNewer) {
       // Fold / composer shrink: compensate before baseline sync so driveFollow
       // still sees the pre-shrink scrollTop (avoid double-subtract after clamp).
       if (heightShrunk || maxFell) {
         readerIntentArmRef.current = false;
+        clearPendingReaderLeave();
         driveFollow(node);
         return;
       }
+      if (programmatic) {
+        syncScrollBaseline(node);
+        followRef.current = {
+          ...followRef.current,
+          lastHeight: nextHeight,
+        };
+        return;
+      }
       syncScrollBaseline(node);
       const nearBottomPinned = isNearBottom(node);
+      if (nearBottomPinned) {
+        clearPendingReaderLeave();
+      }
       // Pointer-dragged scroll-up away from tip. Layout churn never arms this.
       if (readerArmed && readerUp > TIP_FOLLOW_READER_UP_EPS_PX && !nearBottomPinned) {
         readerIntentArmRef.current = false;
@@ -877,9 +1035,15 @@ export function MessageTimeline({
         }
         return;
       }
-      // Growth debt / fold noise / camera echo: stay pinned and recover tip.
-      if (!nearBottomPinned || readerUp > TIP_FOLLOW_READER_UP_EPS_PX) {
-        driveFollow(node);
+      // Tip grew under a still viewport (no reader-up): ease back to the tip.
+      // Reader/extension scroll-up in progress: do not yank — scrollend decides.
+      if (!nearBottomPinned && readerUp <= TIP_FOLLOW_READER_UP_EPS_PX) {
+        if (!pendingReaderLeaveRef.current) {
+          driveFollow(node);
+        }
+      } else if (!nearBottomPinned && readerUp > TIP_FOLLOW_READER_UP_EPS_PX) {
+        pendingReaderLeaveRef.current = true;
+        scheduleLeaveFallback();
       } else {
         followRef.current = {
           ...followRef.current,
@@ -922,6 +1086,20 @@ export function MessageTimeline({
     }
   };
 
+  const onScrollEnd = () => {
+    const node = scrollRef.current;
+    if (!node) {
+      return;
+    }
+    cancelLeaveFallback();
+    if (programmaticScrollRef.current > 0) {
+      programmaticScrollRef.current = 0;
+      syncScrollBaseline(node);
+      return;
+    }
+    releasePinAfterScrollSettled(node);
+  };
+
   return (
     <LightboxProvider>
       <FoldMemoryProvider value={foldMemoryRef.current}>
@@ -935,6 +1113,7 @@ export function MessageTimeline({
                   ref={scrollRef}
                   tabIndex={-1}
                   onScroll={onScroll}
+                  onScrollEnd={onScrollEnd}
                   onWheel={onWheel}
                   onPointerDown={onPointerDown}
                   onKeyDown={onKeyDown}
@@ -980,21 +1159,34 @@ export function MessageTimeline({
                             : 0;
                       return (
                         <div key={key} data-og-timeline-group-anchor="" data-og-group-key={key}>
-                          <TimelineGroupView
-                            group={group}
-                            renderMessageText={renderMessageText}
-                            onOpenSession={onOpenSession}
-                            onMemoryClick={onMemoryClick}
-                            onReconnect={onReconnect}
-                            resolveProviderLogo={resolveProviderLogo}
-                            toolRegistry={toolRegistry}
-                            turnSummary={turnSummary}
-                            foldLiveCluster={isAgentProgress(next)}
-                            trailingAgentText={trailingAgentTextAfterTurn(group, next)}
-                            contextCompactionCount={
-                              contextCompactionCount > 0 ? contextCompactionCount : undefined
-                            }
-                          />
+                          <TimelineGroupRenderBoundary
+                            resetKeys={[
+                              group,
+                              renderMessageText,
+                              onOpenSession,
+                              onMemoryClick,
+                              onReconnect,
+                              resolveProviderLogo,
+                              toolRegistry,
+                              turnSummary,
+                            ]}
+                          >
+                            <TimelineGroupView
+                              group={group}
+                              renderMessageText={renderMessageText}
+                              onOpenSession={onOpenSession}
+                              onMemoryClick={onMemoryClick}
+                              onReconnect={onReconnect}
+                              resolveProviderLogo={resolveProviderLogo}
+                              toolRegistry={toolRegistry}
+                              turnSummary={turnSummary}
+                              foldLiveCluster={isAgentProgress(next)}
+                              trailingAgentText={trailingAgentTextAfterTurn(group, next)}
+                              contextCompactionCount={
+                                contextCompactionCount > 0 ? contextCompactionCount : undefined
+                              }
+                            />
+                          </TimelineGroupRenderBoundary>
                         </div>
                       );
                     })}
@@ -1242,6 +1434,75 @@ function cancelFrame(id: number): void {
   window.clearTimeout(id);
 }
 
+type TimelineGroupRenderBoundaryProps = {
+  children: ReactNode;
+  resetKeys: readonly unknown[];
+};
+
+type TimelineGroupRenderBoundaryState = {
+  failed: boolean;
+  resetKeys: readonly unknown[];
+};
+
+function timelineRenderResetKeysChanged(
+  previous: readonly unknown[],
+  next: readonly unknown[],
+): boolean {
+  return (
+    previous.length !== next.length || previous.some((key, index) => !Object.is(key, next[index]))
+  );
+}
+
+/**
+ * A malformed historical payload or consumer renderer must not take down the
+ * entire conversation. Keep the boundary outside the row component so React
+ * can replace an invalid element type (error #130) with a bounded fallback.
+ */
+class TimelineGroupRenderBoundary extends Component<
+  TimelineGroupRenderBoundaryProps,
+  TimelineGroupRenderBoundaryState
+> {
+  state: TimelineGroupRenderBoundaryState = {
+    failed: false,
+    resetKeys: this.props.resetKeys,
+  };
+
+  static getDerivedStateFromError(): Partial<TimelineGroupRenderBoundaryState> {
+    return { failed: true };
+  }
+
+  static getDerivedStateFromProps(
+    props: TimelineGroupRenderBoundaryProps,
+    state: TimelineGroupRenderBoundaryState,
+  ): Partial<TimelineGroupRenderBoundaryState> | null {
+    if (timelineRenderResetKeysChanged(state.resetKeys, props.resetKeys)) {
+      return { failed: false, resetKeys: props.resetKeys };
+    }
+    return null;
+  }
+
+  render(): ReactNode {
+    if (this.state.failed) {
+      return (
+        <div
+          data-testid="timeline-group-render-error"
+          role="status"
+          className="flex items-start gap-2 rounded-lg border border-og-border bg-og-surface-muted px-3 py-2 text-sm text-og-fg-muted"
+        >
+          <TriangleAlertIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+          <div>
+            <p className="font-medium text-og-fg">Timeline item unavailable</p>
+            <p>
+              This item could not be displayed. The rest of the conversation is still available.
+            </p>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 // The full loaded window stays mounted, so settled history rows must be cheap
 // on every commit: projection reuses group objects for unchanged groups, so
 // memo skips them. Live projection creates a new group object, and
@@ -1308,7 +1569,10 @@ const TimelineGroupView = memo(function TimelineGroupView({
   // Latch live→folded so a top-level shell that was already mounted open can
   // start the settle beat without remounting bare rail → wrapper.
   const liveActivitySettle = useLiveSettleFold(activityShouldFold && !insideTurn);
-  const turnDefaultOpen = !insideTurn && group.kind === "turn" && group.outcome === "failed";
+  const turnDefaultOpen =
+    !insideTurn &&
+    group.kind === "turn" &&
+    (group.outcome === "failed" || timelineGroupContainsAuthNeeded(group));
   // activity-* → turn-* remount: carry resting state so settleFold does not
   // re-open a chip the reader already watched collapse.
   if (group.kind === "turn" && foldMemory && !insideTurn) {
@@ -1400,21 +1664,37 @@ const TimelineGroupView = memo(function TimelineGroupView({
       // more "N steps" was the redundant double fold).
       const nestClusters = foldableActivityClusterCount(group.groups) >= 2;
       const turnCopyText = collectTurnCopyText(group.groups, trailingAgentText);
-      const body = group.groups.map((child) => (
-        <TimelineGroupView
-          key={timelineGroupKey(child)}
-          group={child}
-          renderMessageText={renderMessageText}
-          onOpenSession={onOpenSession}
-          onMemoryClick={onMemoryClick}
-          onReconnect={onReconnect}
-          resolveProviderLogo={resolveProviderLogo}
-          toolRegistry={toolRegistry}
-          turnSummary={turnSummary}
-          insideTurn
-          nestClusterChips={nestClusters}
-        />
-      ));
+      const body = group.groups.map((child) => {
+        const key = timelineGroupKey(child);
+        return (
+          <TimelineGroupRenderBoundary
+            key={key}
+            resetKeys={[
+              child,
+              renderMessageText,
+              onOpenSession,
+              onMemoryClick,
+              onReconnect,
+              resolveProviderLogo,
+              toolRegistry,
+              turnSummary,
+            ]}
+          >
+            <TimelineGroupView
+              group={child}
+              renderMessageText={renderMessageText}
+              onOpenSession={onOpenSession}
+              onMemoryClick={onMemoryClick}
+              onReconnect={onReconnect}
+              resolveProviderLogo={resolveProviderLogo}
+              toolRegistry={toolRegistry}
+              turnSummary={turnSummary}
+              insideTurn
+              nestClusterChips={nestClusters}
+            />
+          </TimelineGroupRenderBoundary>
+        );
+      });
       return (
         <TurnSummary
           items={activityItems}
@@ -1501,6 +1781,17 @@ function timelineGroupKey(group: TimelineGroup): string {
   }
 }
 
+function timelineGroupContainsAuthNeeded(group: TimelineGroup): boolean {
+  switch (group.kind) {
+    case "item":
+      return group.item.kind === "auth-needed";
+    case "activity":
+      return false;
+    case "turn":
+      return group.groups.some(timelineGroupContainsAuthNeeded);
+  }
+}
+
 function timelineGroupItemIds(group: TimelineGroup): string[] {
   switch (group.kind) {
     case "item":
@@ -1787,6 +2078,22 @@ function compactionSkipSubtitle(reason: string | null): string {
   }
 }
 
+/** Hover-reveal clock beside the copy control (sent / finished). */
+function MessageFooterTime({ occurredAt }: { occurredAt: string }) {
+  return (
+    <time
+      dateTime={occurredAt}
+      className={cn(
+        "shrink-0 tabular-nums text-og-xs text-og-fg-subtle",
+        "opacity-0 transition-opacity duration-150",
+        "group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 pointer-coarse:opacity-70",
+      )}
+    >
+      {formatClockTime(occurredAt)}
+    </time>
+  );
+}
+
 function UserMessageRow({
   item,
   renderMessageText,
@@ -1804,6 +2111,7 @@ function UserMessageRow({
           copyText={item.text}
           label="Copy message"
           className="w-fit max-w-full min-w-0"
+          trailing={<MessageFooterTime occurredAt={item.occurredAt} />}
         >
           <div className="w-fit max-w-full min-w-0 rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-og-md leading-6 text-og-fg">
             {renderMessageText ? (
@@ -1835,13 +2143,15 @@ function AgentMessageRow({
   ) : (
     <Markdown streaming={item.streaming}>{item.text}</Markdown>
   );
-  // While streaming, copy is still useful (current text) but keep chrome calm.
+  // While streaming, copy is still useful (current text) but keep chrome calm —
+  // stamp only after the message finishes (occurredAt tracks completion).
   return (
     <CopyHoverFrame
       copyText={item.text}
       label="Copy message"
-      align="end"
+      align="start"
       className={cn(enter && "animate-og-enter", "min-w-0 text-og-md leading-7 text-og-fg")}
+      trailing={item.streaming ? null : <MessageFooterTime occurredAt={item.occurredAt} />}
     >
       {body}
     </CopyHoverFrame>
@@ -2236,7 +2546,9 @@ function AuthNeededRow({
   const [failed, setFailed] = useState(false);
   const provider = providerLabel(item.providerDomain);
   const unavailable =
-    item.reason === "unsupported_auth" || item.reason === "resource_scope_unavailable";
+    item.reason === "personal_authority_unavailable" ||
+    item.reason === "unsupported_auth" ||
+    item.reason === "resource_scope_unavailable";
   const missing = item.reason === "missing_connection";
   const actionLabel = missing ? "Connect" : "Reconnect";
 
@@ -2390,6 +2702,8 @@ function authReasonLine(reason: AuthNeededItem["reason"]): string {
     case "expired":
     case "refresh_failed":
       return "Its access expired.";
+    case "personal_authority_unavailable":
+      return "This automation was not granted access to your personal connection.";
     case "unsupported_auth":
       return "This connection cannot authenticate the configured tool endpoint.";
     case "resource_scope_unavailable":