@opengeni/react 0.29.0 → 0.32.1

package/src/components/message-timeline.tsx

@@ -2,6 +2,7 @@ import type { SessionEvent, SessionStatus } from "@opengeni/sdk";
 import {
   ArrowDownIcon,
   ArrowRightIcon,
+  ArrowUpToLineIcon,
   BotIcon,
   CheckCircle2Icon,
   CheckIcon,
@@ -11,6 +12,7 @@ import {
   PencilLineIcon,
   PlayIcon,
   RefreshCwIcon,
+  ShrinkIcon,
   TargetIcon,
   Trash2Icon,
   TriangleAlertIcon,
@@ -31,7 +33,18 @@ import {
 } from "react";
 import { cn } from "../lib/cn";
 import { formatRelativeTime, truncate } from "../lib/format";
+import { prefersReducedMotion } from "../lib/motion";
 import { Markdown } from "./markdown";
+import {
+  createTipFollowState,
+  readerScrollUpPx,
+  tipFollowCancel,
+  tipFollowCompensateShrink,
+  tipFollowStep,
+  TIP_FOLLOW_READER_UP_EPS_PX,
+  TIP_FOLLOW_SHRINK_EPS_PX,
+  type TipFollowState,
+} from "./tip-follow";
 import {
   ActivityRail,
   buildTimeline,
@@ -41,6 +54,7 @@ import {
   type ActivityItem,
   type AgentMessageItem,
   type AuthNeededItem,
+  type ContextCompactionItem,
   type GoalItem,
   type MachineInputBatchItem,
   type NoticeItem,
@@ -49,18 +63,26 @@ import {
   type ToolRegistry,
   type TurnSummaryOptions,
   type UserMessageItem,
+  type FoldRestingState,
   type WorkerCompletionItem,
+  FoldMemoryProvider,
+  inheritFoldRestingState,
   TurnSummary,
+  useFoldMemory,
+  useTurnSettleOpen,
 } from "../timeline";
+import { CopyHoverFrame } from "./copy-button";
 import { SESSION_STATUS_META, StatusDot } from "./session-status";
 import { EntranceAnimationProvider, useEntranceAnimation } from "../timeline/entrance";
+import { SeenActivityIdsProvider } from "../timeline/seen-activity-ids";
+import { TooltipProvider } from "./tooltip";
 
 export type MessageTimelineProps = {
   /** Raw session events (projected internally) … */
   events?: SessionEvent[] | undefined;
   /** … or pre-projected items (e.g. from `useSessionEvents().timeline`). */
   items?: TimelineItem[] | undefined;
-  /** Current session status; drives the live "working" indicator. */
+  /** Current session status (reserved; tip "Working…" chrome removed for now). */
   status?: SessionStatus | null | undefined;
   /** Plug a markdown renderer for message bodies (e.g. streamdown). */
   renderMessageText?:
@@ -109,11 +131,112 @@ export type MessageTimelineProps = {
   loadingOlder?: boolean | undefined;
   /** Called when the reader nears the top and older history should backfill. */
   onLoadOlder?: (() => void) | undefined;
+  /** Jump to the durable session start (bounded oldest window, no middle). */
+  onJumpToStart?: (() => void | Promise<void>) | undefined;
+  /** True while the oldest window is loading. */
+  loadingOldest?: boolean | undefined;
+  /** Newer durable history exists below the current (history) window. */
+  hasNewer?: boolean | undefined;
+  /** A newer history page is being fetched. */
+  loadingNewer?: boolean | undefined;
+  /** Page forward through history without loading the whole gap to the tip. */
+  onLoadNewer?: (() => void) | undefined;
+  /**
+   * Reload the live tip window. When omitted, Jump to latest only re-pins and
+   * scrolls the in-memory window.
+   */
+  onJumpToLatest?: (() => void | Promise<void>) | undefined;
   emptyState?: ReactNode | undefined;
   className?: string | undefined;
 };
 
-const INITIAL_MOUNTED_GROUPS = 1;
+/**
+ * Scroll ownership, from first principles. Everything the events hook has
+ * loaded is mounted — no tip-lock window, no per-frame progressive reveal.
+ * (The in-memory window is already byte/count-bounded by useSessionEvents, and
+ * rows are memoized, so a full mount is cheap; the drip-feed machinery this
+ * 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
+ *   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.
+ * - 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
+ *   alone is wrong. Late layout while unpinned stays browser-owned.
+ */
+const PIN_THRESHOLD_PX = 48;
+/**
+ * Prefetch older history when the top sentinel is this far from the viewport.
+ * After a page loads we stay cool until the reader leaves this band (scrolls
+ * down into content) — never re-fire from continued scroll toward y=0.
+ */
+const OLDER_PREFETCH_MARGIN_PX = 400;
+const OLDER_PREFETCH_ROOT_MARGIN = `${OLDER_PREFETCH_MARGIN_PX}px 0px 0px 0px`;
+
+/**
+ * Pinned = the viewport bottom is within PIN_THRESHOLD_PX of the content
+ * bottom. When the scroll range itself is shorter than the threshold, the
+ * whole range would count as "at the bottom" and the reader could never unpin
+ * to reach older history — so the effective threshold shrinks to the range,
+ * making the very top of a short window count as scrolled up. A window that
+ * cannot scroll at all is always pinned.
+ */
+function maxScrollOf(node: HTMLElement): number {
+  return Math.max(0, node.scrollHeight - node.clientHeight);
+}
+
+/**
+ * Wheel bubbled from a nested overflow scroller that can still move up — not
+ * timeline intent (code blocks / notice `<pre>`).
+ */
+function wheelConsumedByNestedScrollable(event: {
+  deltaY: number;
+  target: EventTarget | null;
+  currentTarget: EventTarget | null;
+}): boolean {
+  if (event.deltaY >= 0) {
+    return false;
+  }
+  let el = event.target instanceof Element ? event.target : null;
+  const root = event.currentTarget instanceof Element ? event.currentTarget : null;
+  while (el && el !== root) {
+    if (el instanceof HTMLElement) {
+      const style = getComputedStyle(el);
+      const overflowY = style.overflowY;
+      if (
+        (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") &&
+        el.scrollHeight > el.clientHeight + 1 &&
+        el.scrollTop > 0
+      ) {
+        return true;
+      }
+    }
+    el = el.parentElement;
+  }
+  return false;
+}
+
+function isNearBottom(node: HTMLElement): boolean {
+  const maxScroll = maxScrollOf(node);
+  if (maxScroll <= 1) {
+    return true;
+  }
+  const gap = maxScroll - node.scrollTop;
+  return gap < Math.min(PIN_THRESHOLD_PX, maxScroll);
+}
+
+/** Escape a value for use inside a CSS attribute selector. */
+function cssEscapeAttribute(value: string): string {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
 
 /**
  * The session timeline: chat messages with streaming deltas, collapsed
@@ -124,7 +247,7 @@ const INITIAL_MOUNTED_GROUPS = 1;
 export function MessageTimeline({
   events,
   items,
-  status,
+  status: _status,
   renderMessageText,
   onOpenSession,
   onMemoryClick,
@@ -136,146 +259,441 @@ export function MessageTimeline({
   hasOlder = false,
   loadingOlder = false,
   onLoadOlder,
+  onJumpToStart,
+  loadingOldest = false,
+  hasNewer = false,
+  loadingNewer = false,
+  onLoadNewer,
+  onJumpToLatest,
   emptyState,
   className,
 }: MessageTimelineProps) {
   const resolvedItems = useMemo(() => items ?? buildTimeline(events ?? []), [items, events]);
   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 groups = useStableTimelineGroupKeys(allGroups);
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const topSentinelRef = useRef<HTMLDivElement | null>(null);
+  const bottomSentinelRef = useRef<HTMLDivElement | null>(null);
   const previousBulkFirstKeyRef = useRef<string | null | undefined>(undefined);
   const [pinned, setPinned] = useState(true);
   const [bulkActive, setBulkActive] = useState(true);
+  // Older history prefetch is user-driven: a window shorter than the viewport
+  // + rootMargin would otherwise keep the top sentinel intersecting and fetch
+  // history forever while the reader sits at the tip. Arm on first scroll-up.
+  const olderPrefetchArmedRef = useRef(false);
+  const [olderPrefetchArmed, setOlderPrefetchArmed] = useState(false);
+  // One loadOlder per visit to the top band. Re-arm only after the reader
+  // leaves that band (scrolls down / sentinel exits) — never from scrolling
+  // further toward y=0 (that was the batch-top load loop).
+  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 across commits is
-  // structurally impossible — the reader only ever sees it already at the
-  // bottom. An empty timeline reveals immediately (there is nothing to anchor).
+  // of the window's TOP while a large timeline lays out is structurally
+  // impossible — the reader only ever sees it already at the bottom.
   const [revealed, setRevealed] = useState(false);
-  // Our own scrollTop assignments echo back as delayed scroll events. Keep the
-  // ordered, clamped targets rather than only the latest one: successive
-  // ResizeObserver corrections can queue several echoes before the browser
-  // dispatches them. If reader input lands at a different position, its value
-  // wins and clears the pending echoes. A matching echo must not recapture the
-  // visual anchor while progressive prepend is still mounting older rows.
-  const programmaticScrollTargetsRef = useRef<number[]>([]);
-  const assignScrollTop = useCallback((node: HTMLElement, value: number) => {
-    const previous = node.scrollTop;
-    node.scrollTop = value;
-    if (node.scrollTop === previous) {
-      return;
-    }
-    const pending = programmaticScrollTargetsRef.current;
-    pending.push(node.scrollTop);
-    if (pending.length > 32) {
-      pending.splice(0, pending.length - 32);
-    }
-  }, []);
-  // Mirror `pinned` into a ref so the ResizeObserver callback (a stable closure)
-  // always reads the live value without re-subscribing on every scroll.
+  // Mirror `pinned` into a ref, written ONLY by applyPinned, so the
+  // ResizeObserver rAF (a stable closure) reads the live value and a snap can
+  // never race a just-unpinned reader across a pending React commit.
   const pinnedRef = useRef(true);
-  // The reader's visual anchor: the topmost still-visible timeline element and
-  // its offset from the viewport top. Recaptured on scroll and after every
-  // height change, it lets us hold the reader's position when content above the
-  // viewport expands or collapses (e.g. a turn folds when it settles).
-  const anchorRef = useRef<{ el: Element; top: number } | null>(null);
-  const lastItem = resolvedItems[resolvedItems.length - 1];
-  const streaming =
-    lastItem !== undefined &&
-    (lastItem.kind === "agent-message" || lastItem.kind === "reasoning") &&
-    lastItem.streaming;
-  const working = status === "running" && !streaming;
+  // History windows (`hasNewer`) have a bottom that is not the live tip.
+  // Pin/follow must ignore that floor — otherwise loadNewer appends yank the
+  // reader to the new page bottom. LoadOlder prepends already stay put because
+  // the reader is unpinned and scroll anchoring / delta correction owns place.
+  const hasNewerRef = useRef(hasNewer);
+  hasNewerRef.current = hasNewer;
+  // Jump-to-latest pressed while a history window is showing: the pin must
+  // wait for the tip window to actually land (`hasNewer` → false) — pinning
+  // immediately would snap to the bottom of the CURRENT history page and
+  // page-crawl forward through the gap.
+  const wantPinRef = useRef(false);
+  // Jump-to-start pressed: consume on the commit that swaps the window so the
+  // scroll-to-top write races neither the old DOM nor the prepend correction.
+  const pendingJumpToStartRef = useRef(false);
+  // Identifies the newest Jump-to-start click so a settling promise callback
+  // from an earlier click can never clear a re-click's pending flag.
+  const jumpToStartSeqRef = useRef(0);
+  // Prepend detection: the oldest loaded item's id changes exactly when older
+  // history lands (including the merge-into-first-group case where the first
+  // GROUP key is retained). Item ids, not group keys, are the durable signal.
+  const previousFirstItemIdRef = useRef<string | null>(null);
+  const previousScrollHeightRef = useRef(0);
+  // Per-commit place memory for unpinned prepend restore (see layout effect).
+  // Paired with max/height/client for clamp-conservation reader-intent math.
+  const lastScrollTopRef = useRef(0);
+  const lastMaxScrollRef = useRef(0);
+  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.
+   */
+  const readerIntentArmRef = useRef(false);
+  // 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.
+  const foldMemoryRef = useRef<Map<string, FoldRestingState>>(new Map());
+  const seenActivityIdsRef = useRef<Set<string>>(new Set());
+  const groupKeyByItemIdRef = useRef<Map<string, string>>(new Map());
+  const groupOffsetByKeyRef = useRef<Map<string, number>>(new Map());
+  const firstItemId = resolvedItems[0]?.id ?? null;
   // Bulk paints (the initial tail window, a prepended older window — detected
   // by the first group key changing) must not run per-row entrance animations.
   const firstKeyChangedForBulk =
     previousBulkFirstKeyRef.current !== undefined &&
     previousBulkFirstKeyRef.current !== firstGroupKey;
-  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. Prefer durable row wrappers
-  // over their containing group: an older activity item can merge into the
-  // existing group, leaving that outer group in place while shifting every row
-  // after the insertion. Transient chrome (the backfill sentinel and shimmer) is
-  // skipped — anchoring to a row that unmounts when the older window lands would
-  // drop the correction mid-prepend.
-  const captureAnchor = useCallback(() => {
-    const node = scrollRef.current;
-    const inner = node?.firstElementChild;
-    if (!node || !inner) {
-      anchorRef.current = null;
-      return;
+  const bulkRender = allGroups.length > 0 && (bulkActive || firstKeyChangedForBulk);
+
+  // The ONLY writer of the pinned flag. Ref and state move together, so
+  // behavior (refs read by rAF callbacks) and rendering (the anchor class,
+  // the Jump-to-latest button) can never desync.
+  const applyPinned = useCallback((value: boolean) => {
+    if (pinnedRef.current !== value) {
+      pinnedRef.current = value;
+      setPinned(value);
     }
-    const containerTop = node.getBoundingClientRect().top;
-    const findVisible = (selector: string): Element | null => {
-      for (const candidate of inner.querySelectorAll(selector)) {
-        if (candidate instanceof HTMLElement && candidate.dataset.ogTimelineChrome !== undefined) {
-          continue;
-        }
-        const rect = candidate.getBoundingClientRect();
-        if (rect.bottom > containerTop + 1 && rect.height > 0) {
-          return candidate;
-        }
+  }, []);
+
+  const revealedRef = useRef(revealed);
+  revealedRef.current = revealed;
+
+  // Pure tip-follow camera. Pin intent uses clamp conservation, not timers.
+  const followRef = useRef<TipFollowState>(createTipFollowState());
+  const followFrameRef = useRef<number | null>(null);
+
+  const syncScrollBaseline = useCallback((node: HTMLElement) => {
+    lastScrollTopRef.current = node.scrollTop;
+    lastMaxScrollRef.current = maxScrollOf(node);
+    lastScrollHeightRef.current = node.scrollHeight;
+    lastClientHeightRef.current = node.clientHeight;
+  }, []);
+
+  const stopFollow = useCallback(() => {
+    followRef.current = tipFollowCancel(followRef.current);
+    if (followFrameRef.current !== null) {
+      cancelFrame(followFrameRef.current);
+      followFrameRef.current = null;
+    }
+  }, []);
+
+  /** Reader left the tip — wheel, keyboard, or pointer-armed scroll-up. */
+  const releasePinFromReader = useCallback(
+    (node?: HTMLElement | null) => {
+      if (!autoFollow || !pinnedRef.current || hasNewerRef.current) {
+        return;
       }
-      return null;
-    };
-    const anchor =
-      findVisible("[data-og-timeline-row-anchor]") ??
-      findVisible("[data-og-timeline-group-anchor]");
-    if (anchor) {
-      const rect = anchor.getBoundingClientRect();
-      anchorRef.current = { el: anchor, top: rect.top - containerTop };
+      // Unscrollable window: unpin strands Jump-to-latest with no way back.
+      if (node && maxScrollOf(node) <= 1) {
+        return;
+      }
+      readerIntentArmRef.current = false;
+      stopFollow();
+      applyPinned(false);
+      if (wantPinRef.current) {
+        wantPinRef.current = false;
+      }
+      if (!olderPrefetchArmedRef.current) {
+        olderPrefetchArmedRef.current = true;
+        setOlderPrefetchArmed(true);
+      }
+    },
+    [autoFollow, applyPinned, stopFollow],
+  );
+
+  const onWheel = (event: {
+    deltaY: number;
+    deltaX: number;
+    target: EventTarget | null;
+    currentTarget: EventTarget | null;
+  }) => {
+    // Nested overflow (code / notice pre) or mostly-horizontal pan: not tip leave.
+    if (event.deltaY >= 0) {
       return;
     }
-    anchorRef.current = null;
-  }, []);
+    if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+      return;
+    }
+    if (wheelConsumedByNestedScrollable(event)) {
+      return;
+    }
+    const node =
+      event.currentTarget instanceof HTMLElement ? event.currentTarget : scrollRef.current;
+    releasePinFromReader(node);
+  };
+
+  /** Touch / stylus / mouse drag on the scroller — explicit leave (not layout). */
+  const onPointerDown = (event: {
+    button: number;
+    pointerType: string;
+    target: EventTarget | null;
+  }) => {
+    // Primary button / touch / pen only. Ignore right-click etc.
+    if (event.button !== 0 && event.pointerType === "mouse") {
+      return;
+    }
+    // Clicks on chips/buttons/links must not arm — their settle collapse
+    // also drops scrollTop and would false-unpin. Drag on prose/scroller may.
+    if (
+      event.target instanceof Element &&
+      event.target.closest("button, a, input, textarea, select, [role='button']")
+    ) {
+      return;
+    }
+    readerIntentArmRef.current = true;
+  };
+
+  const onKeyDown = (event: { key: string; currentTarget: EventTarget | null }) => {
+    if (event.key !== "ArrowUp" && event.key !== "PageUp" && event.key !== "Home") {
+      return;
+    }
+    const node =
+      event.currentTarget instanceof HTMLElement ? event.currentTarget : scrollRef.current;
+    releasePinFromReader(node);
+  };
 
-  // Restore the user-owned anchor synchronously after React commits a frame.
-  // ResizeObserver remains a late-measurement fallback, but progressive history
-  // frames must be corrected before the browser can paint an intermediate jump.
-  const restoreAnchor = useCallback(
+  const snapToBottom = useCallback(
     (node: HTMLElement) => {
-      if (autoFollow && pinnedRef.current) {
-        assignScrollTop(node, node.scrollHeight);
+      stopFollow();
+      node.scrollTop = Math.max(0, node.scrollHeight - node.clientHeight);
+      syncScrollBaseline(node);
+      followRef.current = {
+        ...followRef.current,
+        lastHeight: node.scrollHeight,
+      };
+    },
+    [stopFollow, syncScrollBaseline],
+  );
+
+  const driveFollowRef = useRef<(node: HTMLElement, now?: number) => void>(() => undefined);
+  const driveFollow = useCallback(
+    (node: HTMLElement, nowMs?: number) => {
+      if (!pinnedRef.current || hasNewerRef.current) {
+        stopFollow();
         return;
       }
-      const anchor = anchorRef.current;
-      if (!anchor || !anchor.el.isConnected) {
+      // Prefer the rAF timestamp so ease integrates against vsync (and tests
+      // can advance a synthetic clock via requestAnimationFrame callbacks).
+      const now =
+        typeof nowMs === "number"
+          ? nowMs
+          : typeof performance !== "undefined"
+            ? performance.now()
+            : Date.now();
+      const previousHeight = followRef.current.lastHeight;
+      // Settle-collapse: compensate Δh from the pre-shrink baseline (browser
+      // may already have clamped — don't double-subtract). Keep the follow rAF
+      // alive so when collapse ends (or stream resumes) we ease instead of a
+      // hard stop → flick. Do NOT tip-ease on the same frame as a real shrink
+      // (that fight was the top-of-viewport flicker).
+      if (previousHeight > 0 && node.scrollHeight < previousHeight - TIP_FOLLOW_SHRINK_EPS_PX) {
+        const nextTop = tipFollowCompensateShrink(
+          lastScrollTopRef.current,
+          previousHeight,
+          node.scrollHeight,
+          node.clientHeight,
+        );
+        if (node.scrollTop !== nextTop) {
+          node.scrollTop = nextTop;
+        }
+        syncScrollBaseline(node);
+        followRef.current = {
+          ...followRef.current,
+          lastHeight: node.scrollHeight,
+          running: true,
+          lastTs: now,
+        };
+        if (followFrameRef.current === null) {
+          followFrameRef.current = requestFrame((frameNow) => {
+            followFrameRef.current = null;
+            const current = scrollRef.current;
+            if (current) {
+              driveFollowRef.current(current, frameNow);
+            }
+          });
+        }
         return;
       }
-      const containerTop = node.getBoundingClientRect().top;
-      const now = anchor.el.getBoundingClientRect().top - containerTop;
-      const diff = now - anchor.top;
-      if (diff !== 0) {
-        assignScrollTop(node, node.scrollTop + diff);
+      // Sub-eps height noise: adopt height without moving the camera.
+      if (previousHeight > 0 && node.scrollHeight < previousHeight) {
+        followRef.current = {
+          ...followRef.current,
+          lastHeight: node.scrollHeight,
+        };
+      }
+      const result = tipFollowStep(followRef.current, {
+        scrollTop: node.scrollTop,
+        scrollHeight: node.scrollHeight,
+        clientHeight: node.clientHeight,
+        now,
+        pinned: true,
+        reducedMotion: prefersReducedMotion(),
+        revealed: revealedRef.current,
+      });
+      followRef.current = result.state;
+      if (node.scrollTop !== result.scrollTop) {
+        node.scrollTop = result.scrollTop;
+      }
+      syncScrollBaseline(node);
+      if (result.state.running) {
+        if (followFrameRef.current === null) {
+          followFrameRef.current = requestFrame((frameNow) => {
+            followFrameRef.current = null;
+            const current = scrollRef.current;
+            if (current) {
+              driveFollowRef.current(current, frameNow);
+            }
+          });
+        }
+      } else if (followFrameRef.current !== null) {
+        cancelFrame(followFrameRef.current);
+        followFrameRef.current = null;
       }
     },
-    [assignScrollTop, autoFollow],
+    [stopFollow, syncScrollBaseline],
   );
+  driveFollowRef.current = driveFollow;
 
-  // A LAYOUT effect so the very first paint of a freshly loaded session is
-  // already anchored at the bottom — no visible traversal down the history.
+  useEffect(() => stopFollow, [stopFollow]);
+
+  // The single post-commit scroll authority. Runs after EVERY commit (no dep
+  // list): any commit may change content height, and the decision is cheap.
+  // Also the ONLY writer of the prepend-correction baselines
+  // (previousFirstItemIdRef / previousScrollHeightRef / group offset maps).
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- Deliberately runs after every commit.
   useLayoutEffect(() => {
     const node = scrollRef.current;
-    if (node) {
-      restoreAnchor(node);
+    if (!node) {
+      return;
+    }
+    const previousFirstItemId = previousFirstItemIdRef.current;
+    const previousGroupKeyByItemId = groupKeyByItemIdRef.current;
+    const previousGroupOffsetByKey = groupOffsetByKeyRef.current;
+    const previousScrollTop = lastScrollTopRef.current;
+    const firstItemChanged = previousFirstItemId !== null && firstItemId !== previousFirstItemId;
+    const prepended =
+      firstItemChanged && resolvedItems.some((item) => item.id === previousFirstItemId);
+    if (pendingJumpToStartRef.current && firstItemChanged) {
+      // The oldest window landed — jump against the NEW DOM, and skip the
+      // prepend correction (it would shift the reader away from the top).
+      pendingJumpToStartRef.current = false;
+      stopFollow();
+      node.scrollTop = 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
+      // at the bottom (post-paint consumption flashed one clamped frame).
+      wantPinRef.current = false;
+      if (autoFollow) {
+        applyPinned(true);
+        snapToBottom(node);
+      }
+    } else if (autoFollow && pinnedRef.current && !hasNewer) {
+      // Live tip: tip-follow camera eases down (snap only first paint / jumps).
+      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
+      // correct when loadOlder also truncates the tip (height delta then lies).
+      // If native anchoring already applied the same shift, leave scrollTop.
+      const anchorKey =
+        previousFirstItemId !== null
+          ? previousGroupKeyByItemId.get(previousFirstItemId)
+          : undefined;
+      const previousAnchorTop =
+        anchorKey !== undefined ? previousGroupOffsetByKey.get(anchorKey) : undefined;
+      const anchorEl =
+        anchorKey !== undefined
+          ? node.querySelector(`[data-og-group-key="${cssEscapeAttribute(anchorKey)}"]`)
+          : null;
+      let delta: number | null = null;
+      if (anchorEl instanceof HTMLElement && previousAnchorTop !== undefined) {
+        const moved = Math.round(anchorEl.offsetTop - previousAnchorTop);
+        if (moved !== 0) {
+          delta = moved;
+        }
+      }
+      if (delta === null) {
+        const heightDelta = Math.round(node.scrollHeight - previousScrollHeightRef.current);
+        if (heightDelta > 0) {
+          delta = heightDelta;
+        }
+      }
+      if (delta !== null) {
+        const expected = previousScrollTop + delta;
+        if (Math.abs(node.scrollTop - expected) > 2) {
+          node.scrollTop = expected;
+        }
+      }
+    }
+    // After a prepend, if restore left us below the top prefetch band,
+    // re-arm so a later approach can load again. Still cooling while parked
+    // inside the band (short pages) — that stops the y=0 load loop.
+    if (
+      prepended &&
+      !pinnedRef.current &&
+      olderLoadGateRef.current === "cooling" &&
+      node.scrollTop > OLDER_PREFETCH_MARGIN_PX
+    ) {
+      olderLoadGateRef.current = "armed";
+    }
+    previousFirstItemIdRef.current = firstItemId;
+    previousScrollHeightRef.current = node.scrollHeight;
+    syncScrollBaseline(node);
+    // Item→group keys are cheap (data only). offsetTop queries are O(groups)
+    // layout reads — skip while pinned at the live tip (every stream token
+    // used to remeasure the whole timeline; that was the long-run lag).
+    const nextKeyByItemId = new Map<string, string>();
+    for (const { group, key } of groups) {
+      for (const itemId of timelineGroupItemIds(group)) {
+        nextKeyByItemId.set(itemId, key);
+      }
+    }
+    groupKeyByItemIdRef.current = nextKeyByItemId;
+    const needOffsets = prepended || firstItemChanged || !pinnedRef.current || Boolean(hasNewer);
+    if (needOffsets) {
+      const nextOffsetByKey = new Map<string, number>();
+      for (const { key } of groups) {
+        const el = node.querySelector(`[data-og-group-key="${cssEscapeAttribute(key)}"]`);
+        if (el instanceof HTMLElement) {
+          nextOffsetByKey.set(key, el.offsetTop);
+        }
+      }
+      groupOffsetByKeyRef.current = nextOffsetByKey;
     }
     if (!revealed && groups.length > 0) {
       setRevealed(true);
     }
-  }, [resolvedItems, working, revealed, groups.length, restoreAnchor]);
+  });
 
-  // A cleared timeline (stream identity change) re-arms the reveal so the next
-  // session also first paints at its bottom.
+  // 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(() => {
-    if (allGroups.length === 0 && revealed) {
+    if (allGroups.length > 0) {
+      return;
+    }
+    if (revealed) {
       setRevealed(false);
     }
-  }, [allGroups.length, revealed]);
+    if (olderPrefetchArmedRef.current) {
+      olderPrefetchArmedRef.current = false;
+      setOlderPrefetchArmed(false);
+    }
+    olderLoadGateRef.current = "armed";
+    wantPinRef.current = false;
+    pendingJumpToStartRef.current = false;
+    previousFirstItemIdRef.current = null;
+    previousScrollHeightRef.current = 0;
+    lastScrollTopRef.current = 0;
+    lastMaxScrollRef.current = 0;
+    lastScrollHeightRef.current = 0;
+    lastClientHeightRef.current = 0;
+    groupKeyByItemIdRef.current = new Map();
+    groupOffsetByKeyRef.current = new Map();
+    foldMemoryRef.current.clear();
+    seenActivityIdsRef.current.clear();
+    applyPinned(true);
+  }, [allGroups.length, revealed, applyPinned]);
 
   // Clear the bulk-paint marker a frame after it renders, so rows appended
   // live (streams, new turns) animate exactly as before.
@@ -285,27 +703,21 @@ 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, mountingOlderGroups]);
+  }, [bulkRender, firstGroupKey]);
 
-  // Prefetch older history well before the reader reaches the top: the
-  // sentinel sits above the first group and trips 1600px early, so backfill
-  // is usually rendered (and anchored by the ResizeObserver below) before the
-  // top of the window ever becomes visible.
+  // Prefetch older history only after the reader scrolls up from the tip.
+  // Once armed, the sentinel trips early so backfill is usually rendered
+  // (and its scroll delta corrected) before the reader reaches it. Gated so
+  // a short prepend that leaves the sentinel intersecting cannot loop.
   useEffect(() => {
     const root = scrollRef.current;
     const target = topSentinelRef.current;
     if (
       !root ||
       !target ||
-      mountingOlderGroups ||
+      !olderPrefetchArmed ||
       !hasOlder ||
       loadingOlder ||
       !onLoadOlder ||
@@ -313,24 +725,57 @@ export function MessageTimeline({
     ) {
       return;
     }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const intersecting = entries.some((entry) => entry.isIntersecting);
+        if (!intersecting) {
+          // Left the top band — next approach may load once.
+          olderLoadGateRef.current = "armed";
+          return;
+        }
+        if (olderLoadGateRef.current !== "armed") {
+          return;
+        }
+        olderLoadGateRef.current = "cooling";
+        onLoadOlder();
+      },
+      { root, rootMargin: OLDER_PREFETCH_ROOT_MARGIN },
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [olderPrefetchArmed, hasOlder, loadingOlder, onLoadOlder, firstGroupKey]);
+
+  // History view: page forward when the reader nears the bottom of the current
+  // non-tip window. Does not pull the whole gap — one density-bounded page.
+  useEffect(() => {
+    const root = scrollRef.current;
+    const target = bottomSentinelRef.current;
+    if (
+      !root ||
+      !target ||
+      !hasNewer ||
+      loadingNewer ||
+      !onLoadNewer ||
+      typeof IntersectionObserver === "undefined"
+    ) {
+      return;
+    }
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries.some((entry) => entry.isIntersecting)) {
-          onLoadOlder();
+          onLoadNewer();
         }
       },
-      { root, rootMargin: "1600px 0px 0px 0px" },
+      { root, rootMargin: "0px 0px 1200px 0px" },
     );
     observer.observe(target);
     return () => observer.disconnect();
-  }, [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
-  // reader's anchor in place. A change ABOVE the anchor shifts its viewport
-  // offset — we correct scrollTop by that shift so the reader never gets yanked.
-  // A change BELOW the anchor (a bottom append while scrolled up) leaves the
-  // anchor put, so `diff` is 0 and we leave scrollTop alone.
+  }, [hasNewer, loadingNewer, onLoadNewer, firstGroupKey]);
+
+  // Late layout that React commits cannot see (images decoding, fonts, code
+  // blocks) grows content without a commit. While pinned, soft-follow the tip;
+  // unpinned: do nothing — chasing those shifts was the wobble. Coalesce RO
+  // into one rAF.
   useEffect(() => {
     const node = scrollRef.current;
     const inner = node?.firstElementChild;
@@ -338,138 +783,393 @@ export function MessageTimeline({
       return;
     }
     const observer = new ResizeObserver(() => {
-      const current = scrollRef.current;
-      if (!current) {
+      if (resizeFollowRafRef.current !== null) {
         return;
       }
-      restoreAnchor(current);
+      resizeFollowRafRef.current = requestFrame(() => {
+        resizeFollowRafRef.current = null;
+        const current = scrollRef.current;
+        if (!current) {
+          return;
+        }
+        if (autoFollow && pinnedRef.current && !hasNewerRef.current) {
+          driveFollow(current);
+        }
+      });
     });
     observer.observe(inner);
-    return () => observer.disconnect();
-  }, [restoreAnchor]);
+    // The scroller's own box moves the bottom too (window resize, composer
+    // growing): clientHeight changes with no inner resize and no commit.
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+      if (resizeFollowRafRef.current !== null) {
+        cancelFrame(resizeFollowRafRef.current);
+        resizeFollowRafRef.current = null;
+      }
+    };
+  }, [autoFollow, driveFollow]);
 
+  // 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
+  // landed): honor a pending Jump-to-latest, or re-pin a reader already parked
+  // at what just became the live bottom — paging forward to the tip must not
+  // strand them unpinned watching new content grow below.
+  useEffect(() => {
+    if (hasNewer) {
+      stopFollow();
+      applyPinned(false);
+      return;
+    }
+    const node = scrollRef.current;
+    if (!node) {
+      return;
+    }
+    if (wantPinRef.current) {
+      wantPinRef.current = false;
+      if (autoFollow) {
+        applyPinned(true);
+        snapToBottom(node);
+      }
+      return;
+    }
+    if (autoFollow && !pinnedRef.current && isNearBottom(node)) {
+      applyPinned(true);
+    }
+  }, [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.
   const onScroll = () => {
     const node = scrollRef.current;
     if (!node) {
       return;
     }
-    const pending = programmaticScrollTargetsRef.current;
-    const programmaticIndex = pending.findIndex((target) => Math.abs(node.scrollTop - target) <= 1);
-    const programmatic = programmaticIndex >= 0;
-    if (programmatic) {
-      pending.splice(0, programmaticIndex + 1);
-    } else {
-      // A real reader scroll supersedes every delayed programmatic echo.
-      pending.length = 0;
+    const previousTop = lastScrollTopRef.current;
+    const previousMaxScroll = lastMaxScrollRef.current;
+    const nextTop = node.scrollTop;
+    const nextMaxScroll = maxScrollOf(node);
+    const nextHeight = node.scrollHeight;
+    const readerUp = readerScrollUpPx(previousTop, nextTop, previousMaxScroll, nextMaxScroll);
+    const maxFell = nextMaxScroll < previousMaxScroll - 1;
+    const readerArmed = readerIntentArmRef.current;
+    const heightShrunk =
+      followRef.current.lastHeight > 0 &&
+      nextHeight < followRef.current.lastHeight - TIP_FOLLOW_SHRINK_EPS_PX;
+
+    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;
+        driveFollow(node);
+        return;
+      }
+      syncScrollBaseline(node);
+      const nearBottomPinned = isNearBottom(node);
+      // 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;
+        releasePinFromReader(node);
+        if (olderLoadGateRef.current === "cooling" && node.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
+          olderLoadGateRef.current = "armed";
+        }
+        return;
+      }
+      // Growth debt / fold noise / camera echo: stay pinned and recover tip.
+      if (!nearBottomPinned || readerUp > TIP_FOLLOW_READER_UP_EPS_PX) {
+        driveFollow(node);
+      } else {
+        followRef.current = {
+          ...followRef.current,
+          lastHeight: nextHeight,
+        };
+      }
+      return;
+    }
+
+    syncScrollBaseline(node);
+    const nearBottom = isNearBottom(node);
+
+    // Re-pin only when the reader moved toward/at the tip — not when a fold
+    // clamp dragged scrollTop down onto nearBottom.
+    const nextPinned =
+      !hasNewer && nearBottom && nextTop >= previousTop - TIP_FOLLOW_READER_UP_EPS_PX;
+    if (!nextPinned) {
+      stopFollow();
+    }
+    applyPinned(nextPinned);
+    // A far-from-bottom scroll while a Jump-to-latest is pending is the reader
+    // changing their mind: drop the latch, or a stale one (host rejected or
+    // never flipped hasNewer) would fire a surprise pin + snap whenever the
+    // reader later pages to the tip themselves. Our own snaps land AT the
+    // bottom, so their echoes read nearBottom and keep a live latch.
+    if (wantPinRef.current && !nearBottom) {
+      wantPinRef.current = false;
     }
-    const nextPinned = node.scrollHeight - node.scrollTop - node.clientHeight < 48;
-    // Echoes of our own assignments may PIN but never UNPIN — only the reader
-    // scrolling away releases the bottom-follow.
-    if (nextPinned || !programmatic) {
-      pinnedRef.current = nextPinned;
-      setPinned(nextPinned);
+    if (nextPinned) {
+      return;
     }
-    // The assignment site already captured the corrected anchor. Recapturing
-    // it from a delayed echo can observe the next prepended row before that
-    // row's ResizeObserver correction and make the viewport walk up the page.
-    if (!programmatic) {
-      captureAnchor();
+    if (!olderPrefetchArmedRef.current) {
+      olderPrefetchArmedRef.current = true;
+      setOlderPrefetchArmed(true);
+    }
+    // Re-arm older prefetch only after leaving the top band (scroll down into
+    // content). Never re-arm/load from continued scroll toward y=0.
+    if (olderLoadGateRef.current === "cooling" && node.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
+      olderLoadGateRef.current = "armed";
     }
   };
 
   return (
     <LightboxProvider>
-      <EntranceAnimationProvider value={!bulkRender}>
-        <div className={cn("og-root relative flex min-h-0 flex-col", className)}>
-          {/* overflow-anchor off: the browser's native scroll anchoring would fight
-          the ResizeObserver corrections above — one authority only. */}
-          <div
-            ref={scrollRef}
-            onScroll={onScroll}
-            style={groups.length > 0 && !revealed ? { visibility: "hidden" } : undefined}
-            className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 [overflow-anchor:none] sm:px-6"
-          >
-            <div className="mx-auto flex w-full max-w-3xl flex-col gap-5">
-              {groups.length === 0 && !working
-                ? (emptyState ?? (
-                    <p className="py-10 text-center text-sm text-og-fg-subtle">No activity yet.</p>
-                  ))
-                : null}
-              {hasOlder && !mountingOlderGroups ? (
+      <FoldMemoryProvider value={foldMemoryRef.current}>
+        <SeenActivityIdsProvider value={seenActivityIdsRef.current}>
+          <EntranceAnimationProvider value={!bulkRender}>
+            <TooltipProvider delayDuration={400}>
+              <div className={cn("og-root relative flex min-h-0 flex-col", className)}>
+                {/* Pinned: anchoring off so the tip-follow camera owns the motion.
+          Unpinned: native scroll anchoring holds the reader's place. */}
                 <div
-                  ref={topSentinelRef}
-                  data-og-top-sentinel=""
-                  data-og-timeline-chrome=""
-                  aria-hidden="true"
-                  className="h-px w-full shrink-0"
-                />
-              ) : null}
-              {loadingOlder ? (
-                <div data-og-timeline-chrome="" className="flex items-center gap-2 text-sm">
-                  <span className="og-shimmer-text font-medium">Loading earlier activity…</span>
-                </div>
-              ) : null}
-              {groups.map(({ group, key }, index) => (
-                <div key={key} data-og-timeline-group-anchor="">
-                  <TimelineGroupView
-                    group={group}
-                    renderMessageText={renderMessageText}
-                    onOpenSession={onOpenSession}
-                    onMemoryClick={onMemoryClick}
-                    onReconnect={onReconnect}
-                    resolveProviderLogo={resolveProviderLogo}
-                    toolRegistry={toolRegistry}
-                    turnSummary={turnSummary}
-                    foldLiveCluster={isAgentProgress(groups[index + 1]?.group)}
-                  />
-                </div>
-              ))}
-              {working ? (
-                <div className="flex items-center gap-2 text-sm">
-                  <span className="og-shimmer-text font-medium">Working…</span>
+                  ref={scrollRef}
+                  tabIndex={-1}
+                  onScroll={onScroll}
+                  onWheel={onWheel}
+                  onPointerDown={onPointerDown}
+                  onKeyDown={onKeyDown}
+                  style={groups.length > 0 && !revealed ? { visibility: "hidden" } : undefined}
+                  className={cn(
+                    // tabIndex=-1 is programmatic only — never paint a focus ring on
+                    // the whole scroller (click + Shift used to flash a blue outline).
+                    "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 sm:px-6 outline-none",
+                    autoFollow && pinned && !hasNewer
+                      ? "[overflow-anchor:none]"
+                      : "[overflow-anchor:auto]",
+                  )}
+                >
+                  <div className="relative mx-auto flex w-full max-w-3xl flex-col gap-5">
+                    {groups.length === 0
+                      ? (emptyState ?? (
+                          <p className="py-10 text-center text-sm text-og-fg-subtle">
+                            No activity yet.
+                          </p>
+                        ))
+                      : null}
+                    {hasOlder && olderPrefetchArmed ? (
+                      // Overlaid, not a layout row: mounting/unmounting the sentinel
+                      // must never shift content (that shift was itself a wobble).
+                      <div
+                        ref={topSentinelRef}
+                        data-og-top-sentinel=""
+                        data-og-timeline-chrome=""
+                        aria-hidden="true"
+                        className="pointer-events-none absolute inset-x-0 top-0 h-px"
+                      />
+                    ) : null}
+                    {groups.map(({ group, key }, index) => {
+                      const next = groups[index + 1]?.group;
+                      const contextCompactionCount =
+                        group.kind === "turn"
+                          ? (group.contextCompactionCount ?? 0)
+                          : group.kind === "activity" &&
+                              next?.kind === "item" &&
+                              next.item.kind === "context-compaction" &&
+                              next.item.phase === "compacted"
+                            ? 1
+                            : 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
+                            }
+                          />
+                        </div>
+                      );
+                    })}
+                    {hasNewer ? (
+                      <div
+                        ref={bottomSentinelRef}
+                        data-og-bottom-sentinel=""
+                        data-og-timeline-chrome=""
+                        aria-hidden="true"
+                        className="h-px w-full"
+                      />
+                    ) : null}
+                  </div>
                 </div>
-              ) : null}
-            </div>
-          </div>
-          <AnimatePresence>
-            {!pinned && autoFollow ? (
-              <motion.button
-                type="button"
-                initial={{ opacity: 0, y: 8 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 8 }}
-                transition={{ duration: 0.15, ease: "easeOut" }}
-                onClick={() => {
-                  const node = scrollRef.current;
-                  if (node) {
-                    node.scrollTo({ top: node.scrollHeight, behavior: "smooth" });
-                  }
-                  pinnedRef.current = true;
-                  setPinned(true);
-                }}
-                className={cn(
-                  "absolute bottom-4 left-1/2 -translate-x-1/2",
-                  "inline-flex items-center gap-1.5 rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1.5",
-                  "text-xs font-medium text-og-fg shadow-og-md backdrop-blur",
-                  "hover:border-og-border-strong",
-                )}
-              >
-                <ArrowDownIcon className="size-3.5" />
-                Jump to latest
-              </motion.button>
-            ) : null}
-          </AnimatePresence>
-        </div>
-      </EntranceAnimationProvider>
+                <AnimatePresence>
+                  {loadingOlder ||
+                  loadingOldest ||
+                  (hasOlder && onJumpToStart && olderPrefetchArmed) ? (
+                    // Floating over the scroller (not a timeline row) so showing and
+                    // hiding it never reflows history under the reader.
+                    <motion.div
+                      initial={{ opacity: 0, y: -6 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -6 }}
+                      transition={{ duration: 0.15, ease: "easeOut" }}
+                      data-og-loading-older=""
+                      aria-live="polite"
+                      className="absolute inset-x-0 top-3 z-10 flex justify-center gap-2"
+                    >
+                      {loadingOlder || loadingOldest ? (
+                        <span className="pointer-events-none inline-flex items-center rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1 text-xs font-medium shadow-og-md backdrop-blur">
+                          <span className="og-shimmer-text">
+                            {loadingOldest ? "Jumping to start…" : "Loading earlier activity…"}
+                          </span>
+                        </span>
+                      ) : null}
+                      {hasOlder && onJumpToStart && !loadingOldest ? (
+                        <button
+                          type="button"
+                          data-og-jump-to-start=""
+                          disabled={loadingOlder}
+                          onClick={() => {
+                            applyPinned(false);
+                            pendingJumpToStartRef.current = true;
+                            const seq = ++jumpToStartSeqRef.current;
+                            const node = scrollRef.current;
+                            void Promise.resolve(onJumpToStart()).then(
+                              () => {
+                                // The commit that swaps in the oldest window consumes
+                                // the flag against the new DOM; this write covers the
+                                // already-committed order and the no-window-change
+                                // case (jumping within the current window).
+                                const scroller = scrollRef.current ?? node;
+                                if (scroller) {
+                                  scroller.scrollTop = 0;
+                                }
+                                // A host may resolve without ever changing the
+                                // window (already on the oldest page). Any swap
+                                // commit runs its layout effect before the next
+                                // frame, so a flag still armed by then is the
+                                // no-change case — clear it, or a LATER prepend
+                                // would spuriously jump the reader to the top.
+                                requestFrame(() => {
+                                  if (jumpToStartSeqRef.current === seq) {
+                                    pendingJumpToStartRef.current = false;
+                                  }
+                                });
+                              },
+                              () => {
+                                if (jumpToStartSeqRef.current === seq) {
+                                  pendingJumpToStartRef.current = false;
+                                }
+                              },
+                            );
+                          }}
+                          className={cn(
+                            "inline-flex items-center gap-1.5 rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1.5",
+                            "text-xs font-medium text-og-fg shadow-og-md backdrop-blur",
+                            "hover:border-og-border-strong disabled:opacity-60",
+                          )}
+                        >
+                          <ArrowUpToLineIcon className="size-3.5" />
+                          Jump to start
+                        </button>
+                      ) : null}
+                    </motion.div>
+                  ) : null}
+                </AnimatePresence>
+                <AnimatePresence>
+                  {loadingNewer ? (
+                    <motion.div
+                      initial={{ opacity: 0, y: 6 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 6 }}
+                      transition={{ duration: 0.15, ease: "easeOut" }}
+                      data-og-loading-newer=""
+                      aria-live="polite"
+                      className="pointer-events-none absolute inset-x-0 bottom-14 z-10 flex justify-center"
+                    >
+                      <span className="inline-flex items-center rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1 text-xs font-medium shadow-og-md backdrop-blur">
+                        <span className="og-shimmer-text">Loading later activity…</span>
+                      </span>
+                    </motion.div>
+                  ) : null}
+                </AnimatePresence>
+                <AnimatePresence>
+                  {((!pinned && autoFollow) || hasNewer) && autoFollow ? (
+                    <motion.button
+                      type="button"
+                      initial={{ opacity: 0, y: 8 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 8 }}
+                      transition={{ duration: 0.15, ease: "easeOut" }}
+                      onClick={() => {
+                        if (hasNewer) {
+                          // Do not pin against the current history page — its bottom
+                          // is not the tip. The pin + snap run when the tip window
+                          // actually lands (`hasNewer` flips false).
+                          wantPinRef.current = true;
+                          const node = scrollRef.current;
+                          if (onJumpToLatest) {
+                            void Promise.resolve(onJumpToLatest()).then(
+                              () => {
+                                // Covers a host that flipped hasNewer before
+                                // resolving; otherwise the tip-window commit
+                                // consumes the flag.
+                                const current = scrollRef.current;
+                                if (current && wantPinRef.current && !hasNewerRef.current) {
+                                  wantPinRef.current = false;
+                                  applyPinned(true);
+                                  snapToBottom(current);
+                                }
+                              },
+                              () => {
+                                // The tip reload failed (ordinary network error):
+                                // an armed latch would fire a surprise snap when
+                                // the reader later pages to the tip themselves.
+                                wantPinRef.current = false;
+                              },
+                            );
+                          } else if (node) {
+                            // No tip reload available: jump within the in-memory
+                            // window so the newer sentinel can page forward; the
+                            // latch pins if the tip window eventually lands.
+                            snapToBottom(node);
+                          }
+                          return;
+                        }
+                        const node = scrollRef.current;
+                        if (node) {
+                          applyPinned(true);
+                          snapToBottom(node);
+                        }
+                      }}
+                      className={cn(
+                        "absolute bottom-4 left-1/2 -translate-x-1/2",
+                        "inline-flex items-center gap-1.5 rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1.5",
+                        "text-xs font-medium text-og-fg shadow-og-md backdrop-blur",
+                        "hover:border-og-border-strong",
+                      )}
+                    >
+                      <ArrowDownIcon className="size-3.5" />
+                      Jump to latest
+                    </motion.button>
+                  ) : null}
+                </AnimatePresence>
+              </div>
+            </TooltipProvider>
+          </EntranceAnimationProvider>
+        </SeenActivityIdsProvider>
+      </FoldMemoryProvider>
     </LightboxProvider>
   );
 }
 
-type MountedGroupWindow = {
-  groupKeys: string[];
-  visibleStart: number;
-};
-
 type KeyedTimelineGroup = {
   group: TimelineGroup;
   key: string;
@@ -499,7 +1199,10 @@ function useStableTimelineGroupKeys(allGroups: TimelineGroup[]): KeyedTimelineGr
       let retainedKey: string | undefined;
       for (const itemId of itemIds) {
         const previous = previousByItemId.get(itemId);
-        if (previous && !usedKeys.has(previous.key)) {
+        // Retain only same-kind matches. Activity → turn wrap must NOT keep the
+        // activity chip's React key: that reused a collapsed TurnSummary and
+        // skipped the settle beat (insta-collapse / content flash).
+        if (previous && previous.group.kind === group.kind && !usedKeys.has(previous.key)) {
           retainedKey = previous.key;
           break;
         }
@@ -524,82 +1227,6 @@ function useStableTimelineGroupKeys(allGroups: TimelineGroup[]): KeyedTimelineGr
   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);
@@ -615,10 +1242,11 @@ function cancelFrame(id: number): void {
   window.clearTimeout(id);
 }
 
-// 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.
+// 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
+// behavior/callback changes are separate props, so ordinary streaming and host
+// updates still invalidate immediately.
 const TimelineGroupView = memo(function TimelineGroupView({
   group,
   renderMessageText,
@@ -629,7 +1257,10 @@ const TimelineGroupView = memo(function TimelineGroupView({
   toolRegistry,
   turnSummary,
   insideTurn = false,
+  nestClusterChips = false,
   foldLiveCluster = false,
+  trailingAgentText,
+  contextCompactionCount,
 }: {
   group: TimelineGroup;
   renderMessageText?:
@@ -649,39 +1280,126 @@ const TimelineGroupView = memo(function TimelineGroupView({
       failure surface, so nested chips stay tinted but quiet (no repeated
       failure text, no auto-open) — one loud error, N calm sub-expands. */
   insideTurn?: boolean;
+  /**
+   * Parent turn has ≥2 foldable activity clusters. Only then do we wrap settled
+   * clusters in nested chips — a single cluster under "N steps" is redundant.
+   * During outer settle chrome, nested chips stay force-open (structure kept,
+   * height stable) instead of flat-mapping to bare rails.
+   */
+  nestClusterChips?: boolean;
+  /**
+   * Final agent answer extracted as a sibling after a settled turn — folded
+   * into "Copy turn" so the chip copies the whole assistant reply, not only
+   * mid-turn narration still inside the fold.
+   */
+  trailingAgentText?: string | undefined;
+  /** Secondary chip facet when this fold sits next to a compaction landmark. */
+  contextCompactionCount?: number | undefined;
 }) {
+  const enter = useEntranceAnimation();
+  const settleChrome = useTurnSettleOpen();
+  const foldMemory = useFoldMemory();
+  // Settled (or live-fold) activity clusters get a chip. Inside an expanded
+  // turn that is the second layer — quiet nested chips under the outer turn
+  // summary when contiguous activity naturally clusters (≥2 only).
+  const activityShouldFold =
+    group.kind === "activity" &&
+    Boolean(group.outcome || (foldLiveCluster && clusterIsSettled(group)));
+  // 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";
+  // 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) {
+    inheritFoldRestingState(
+      foldMemory,
+      group.id,
+      group.groups.flatMap((child) => (child.kind === "activity" ? [child.id] : [])),
+    );
+  }
+  const settleFold =
+    group.kind === "turn" ? Boolean(enter && !insideTurn && !turnDefaultOpen) : liveActivitySettle;
   switch (group.kind) {
     case "activity":
-      return group.outcome || (foldLiveCluster && clusterIsSettled(group)) ? (
+      if (insideTurn) {
+        // Nested chips whenever the parent has ≥2 clusters. During outer settle
+        // chrome they stay force-open so structure is visible and height stays
+        // stable through collapse — never flat-map to bare rails (that flash
+        // was the "inner steps vanish then reappear nested" bug). Key flips
+        // when chrome clears so they remount closed inside the already-hidden
+        // parent (safe; mid-collapse remount of closed chips was the snap).
+        // foldKey memory overrides the force-open: a cluster that already
+        // settled closed pre-wrap was showing as a CHIP, so mounting it closed
+        // is both the stable height and the honest state — force-opening it
+        // was the "already-collapsed cluster auto-expands at the end" reopen.
+        const useNestedChip = nestClusterChips && activityShouldFold;
+        if (!useNestedChip) {
+          return (
+            <ActivityRail
+              items={group.items}
+              onOpenSession={onOpenSession}
+              onMemoryClick={onMemoryClick}
+              toolRegistry={toolRegistry}
+              bare
+            />
+          );
+        }
+        return (
+          <TurnSummary
+            key={settleChrome ? "settle" : "rest"}
+            items={group.items}
+            outcome={group.outcome}
+            failureText={undefined}
+            bare
+            defaultOpen={settleChrome ? true : undefined}
+            foldKey={group.id}
+            facets={turnSummary?.facets}
+            contextCompactionCount={contextCompactionCount}
+          >
+            <ActivityRail
+              items={group.items}
+              onOpenSession={onOpenSession}
+              onMemoryClick={onMemoryClick}
+              toolRegistry={toolRegistry}
+              bare
+            />
+          </TurnSummary>
+        );
+      }
+      // Always the same TurnSummary shell while live so mid-turn fold only
+      // flips settleFold (collapse) instead of remounting bare rail → wrapper.
+      return (
         <TurnSummary
           items={group.items}
           outcome={group.outcome}
-          failureText={insideTurn ? undefined : group.failureText}
-          defaultOpen={!insideTurn && group.outcome === "failed" ? true : undefined}
-          bare={insideTurn}
+          failureText={group.failureText}
+          defaultOpen={!activityShouldFold || group.outcome === "failed" ? true : undefined}
+          foldKey={group.id}
           facets={turnSummary?.facets}
+          settleFold={settleFold}
+          contextCompactionCount={contextCompactionCount}
         >
-          <ActivityRail
-            items={group.items}
-            onOpenSession={onOpenSession}
-            onMemoryClick={onMemoryClick}
-            toolRegistry={toolRegistry}
-            bare={insideTurn}
-          />
+          <FoldBody>
+            <TurnRailFrame>
+              <ActivityRail
+                items={group.items}
+                onOpenSession={onOpenSession}
+                onMemoryClick={onMemoryClick}
+                toolRegistry={toolRegistry}
+                bare
+              />
+            </TurnRailFrame>
+          </FoldBody>
         </TurnSummary>
-      ) : (
-        // A nested live cluster hangs on the turn's rail (bare); a top-level one
-        // owns its own rail.
-        <ActivityRail
-          items={group.items}
-          onOpenSession={onOpenSession}
-          onMemoryClick={onMemoryClick}
-          toolRegistry={toolRegistry}
-          bare={insideTurn}
-        />
       );
     case "turn": {
       const activityItems = flattenActivityItems(group.groups);
+      // Second-layer chips only when there are natural multi-cluster seams —
+      // otherwise the outer turn chip alone is enough ("N steps" wrapping one
+      // 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)}
@@ -694,32 +1412,32 @@ const TimelineGroupView = memo(function TimelineGroupView({
           toolRegistry={toolRegistry}
           turnSummary={turnSummary}
           insideTurn
+          nestClusterChips={nestClusters}
         />
       ));
       return (
         <TurnSummary
           items={activityItems}
           outcome={group.outcome}
-          // One loud error at the top; nested sub-turn chips stay calm — the
-          // parent already renders the failure reason, so clear it here exactly
-          // as the nested activity-cluster case does.
           failureText={insideTurn ? undefined : group.failureText}
           durationMs={durationBetween(group.startedAt, group.endedAt)}
-          defaultOpen={!insideTurn && group.outcome === "failed" ? true : undefined}
+          defaultOpen={turnDefaultOpen ? true : undefined}
           bare={insideTurn}
+          foldKey={group.id}
           facets={turnSummary?.facets}
+          settleFold={settleFold}
+          copyText={insideTurn ? undefined : turnCopyText}
+          contextCompactionCount={contextCompactionCount ?? group.contextCompactionCount}
         >
-          {insideTurn ? (
-            // A nested turn is already on an ancestor rail — its body just stacks
-            // flush (the bare-node body already indents it), so no second rule.
-            <div className="flex flex-col gap-4">{body}</div>
-          ) : (
-            // The top-level turn draws THE rail: one thin continuous rule that
-            // every nested node and step hangs off of.
-            <div className="flex flex-col gap-4 border-l-2 border-og-border pl-3 sm:pl-4">
-              {body}
-            </div>
-          )}
+          <FoldBody>
+            {insideTurn ? (
+              // A nested turn is already on an ancestor rail — its body just stacks
+              // flush (the bare-node body already indents it), so no second rule.
+              <div className="flex flex-col gap-4">{body}</div>
+            ) : (
+              <TurnRailFrame>{body}</TurnRailFrame>
+            )}
+          </FoldBody>
         </TurnSummary>
       );
     }
@@ -736,6 +1454,42 @@ const TimelineGroupView = memo(function TimelineGroupView({
   }
 });
 
+/**
+ * Body under a turn/activity chip. Remount flashes are gated by the timeline
+ * seen-activity-id map (not by killing entrance): FoldBody used to force
+ * entrance off, which made every live tool pop with no fade.
+ */
+function FoldBody({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
+
+/** Stable left rule for turn/activity bodies — always present so settle wrap
+    never inserts or removes the rail chrome. */
+function TurnRailFrame({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-4 border-l-2 border-og-border pl-3 sm:pl-4">{children}</div>
+  );
+}
+
+/**
+ * True once THIS component instance has seen its group transition from
+ * unfolded to folded — i.e. the reader watched the rows live and the fold is
+ * new information worth choreographing. Latched: TurnSummary captures the flag
+ * at its own mount (the flip render), so later prop churn is inert. History
+ * that mounts already folded initializes folded and never latches.
+ */
+function useLiveSettleFold(folded: boolean): boolean {
+  const previousFoldedRef = useRef(folded);
+  const latchedRef = useRef(false);
+  if (!previousFoldedRef.current && folded) {
+    latchedRef.current = true;
+  }
+  useLayoutEffect(() => {
+    previousFoldedRef.current = folded;
+  });
+  return latchedRef.current;
+}
+
 function timelineGroupKey(group: TimelineGroup): string {
   switch (group.kind) {
     case "item":
@@ -790,6 +1544,17 @@ function clusterIsSettled(group: Extract<TimelineGroup, { kind: "activity" }>):
   });
 }
 
+/** Settled activity clusters that could become nested chips under a turn. */
+function foldableActivityClusterCount(groups: readonly TimelineGroup[]): number {
+  let count = 0;
+  for (const child of groups) {
+    if (child.kind === "activity" && (child.outcome || clusterIsSettled(child))) {
+      count += 1;
+    }
+  }
+  return count;
+}
+
 function flattenActivityItems(groups: TimelineGroup[]): ActivityItem[] {
   const items: ActivityItem[] = [];
   for (const group of groups) {
@@ -802,6 +1567,89 @@ function flattenActivityItems(groups: TimelineGroup[]): ActivityItem[] {
   return items;
 }
 
+/** Assistant prose inside a turn fold (mid-turn narration), joined for copy. */
+function collectAgentMessageText(groups: readonly TimelineGroup[]): string {
+  const parts: string[] = [];
+  for (const group of groups) {
+    if (group.kind === "item" && group.item.kind === "agent-message") {
+      const text = group.item.text.trim();
+      if (text.length > 0) {
+        parts.push(text);
+      }
+    } else if (group.kind === "turn") {
+      const nested = collectAgentMessageText(group.groups);
+      if (nested.length > 0) {
+        parts.push(nested);
+      }
+    }
+  }
+  return parts.join("\n\n");
+}
+
+/** Non-null turnIds projected into a turn body (activity + nested messages). */
+function collectTurnIdsFromGroups(groups: readonly TimelineGroup[]): Set<string> {
+  const ids = new Set<string>();
+  for (const group of groups) {
+    if (group.kind === "item") {
+      const turnId = "turnId" in group.item ? group.item.turnId : null;
+      if (typeof turnId === "string" && turnId.length > 0) {
+        ids.add(turnId);
+      }
+    } else if (group.kind === "activity") {
+      for (const item of group.items) {
+        if (item.turnId) {
+          ids.add(item.turnId);
+        }
+      }
+    } else if (group.kind === "turn") {
+      for (const nested of collectTurnIdsFromGroups(group.groups)) {
+        ids.add(nested);
+      }
+    }
+  }
+  return ids;
+}
+
+/**
+ * Settled turns lift the final agent answer out as a sibling group. Include it
+ * in "Copy turn" when present so the chip copies the full assistant reply.
+ * Fenced by turnId so the next turn's answer is never stolen.
+ */
+export function trailingAgentTextAfterTurn(
+  group: TimelineGroup,
+  next: TimelineGroup | undefined,
+): string | undefined {
+  if (group.kind !== "turn") {
+    return undefined;
+  }
+  if (next?.kind === "item" && next.item.kind === "agent-message") {
+    const turnIds = collectTurnIdsFromGroups(group.groups);
+    // Degenerate body with no turnIds: do not guess — safer than lifting wrong.
+    if (turnIds.size === 0) {
+      return undefined;
+    }
+    if (!next.item.turnId || !turnIds.has(next.item.turnId)) {
+      return undefined;
+    }
+    const text = next.item.text.trim();
+    return text.length > 0 ? text : undefined;
+  }
+  return undefined;
+}
+
+function collectTurnCopyText(
+  groups: readonly TimelineGroup[],
+  trailingAgentText: string | undefined,
+): string | undefined {
+  const parts = [collectAgentMessageText(groups), trailingAgentText?.trim() ?? ""].filter(
+    (part) => part.length > 0,
+  );
+  if (parts.length === 0) {
+    return undefined;
+  }
+  return parts.join("\n\n");
+}
+
 function durationBetween(startedAt: string, endedAt: string): number | undefined {
   const started = Date.parse(startedAt);
   const ended = Date.parse(endedAt);
@@ -848,6 +1696,8 @@ export function TimelineRow({
       return <MachineInputBatchRow item={item} />;
     case "notice":
       return <NoticeRow item={item} />;
+    case "context-compaction":
+      return <CompactionRow item={item} />;
     case "auth-needed":
       return (
         <AuthNeededRow
@@ -861,6 +1711,82 @@ export function TimelineRow({
   }
 }
 
+const COMPACTION_TRIGGER_LABEL: Record<NonNullable<ContextCompactionItem["trigger"]>, string> = {
+  auto: "Auto",
+  operator: "Manual",
+  proactive: "Auto",
+  overflow: "Overflow",
+};
+
+function CompactionRow({ item }: { item: ContextCompactionItem }) {
+  const enter = useEntranceAnimation();
+  const trigger =
+    item.trigger && item.phase !== "started" ? COMPACTION_TRIGGER_LABEL[item.trigger] : null;
+  const before =
+    item.estimatedTokensBefore !== null
+      ? Math.round(item.estimatedTokensBefore).toLocaleString("en-US")
+      : null;
+  const after =
+    item.estimatedTokensAfter !== null
+      ? Math.round(item.estimatedTokensAfter).toLocaleString("en-US")
+      : null;
+  const title =
+    item.phase === "started"
+      ? "Compacting conversation memory…"
+      : item.phase === "compacted"
+        ? before && after
+          ? `Conversation memory compacted · ~${before} → ~${after} tokens`
+          : "Conversation memory compacted"
+        : "Couldn’t compact conversation memory";
+  const subtitle =
+    item.phase === "compacted"
+      ? "Chat history above is unchanged"
+      : item.phase === "skipped"
+        ? compactionSkipSubtitle(item.skipReason)
+        : null;
+  const pill =
+    item.phase === "skipped" && item.skipReason === "summarization_failed"
+      ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed"
+      : item.phase === "started"
+        ? "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting"
+        : "border-og-border bg-og-surface-1 text-og-fg-muted";
+  return (
+    <div className={cn(enter && "animate-og-enter", "flex justify-center")}>
+      <div
+        className={cn(
+          "inline-flex max-w-full flex-col items-center gap-0.5 rounded-full border px-3 py-1.5 text-og-sm",
+          pill,
+        )}
+        role="status"
+      >
+        <span className="inline-flex max-w-full items-center gap-1.5">
+          <ShrinkIcon className="size-3.5 shrink-0" />
+          <span className="truncate">
+            {title}
+            {trigger ? ` · ${trigger}` : ""}
+          </span>
+        </span>
+        {subtitle ? <span className="truncate text-og-xs opacity-80">{subtitle}</span> : null}
+      </div>
+    </div>
+  );
+}
+
+function compactionSkipSubtitle(reason: string | null): string {
+  switch (reason) {
+    case "no_history":
+      return "No active history to compact";
+    case "replacement_not_smaller":
+      return "Checkpoint would not reduce memory size";
+    case "replacement_unchanged":
+      return "Checkpoint made no progress";
+    case "summarization_failed":
+      return "Request it again to retry. Chat history is unchanged.";
+    default:
+      return "Compaction was not needed. Chat history is unchanged.";
+  }
+}
+
 function UserMessageRow({
   item,
   renderMessageText,
@@ -874,13 +1800,19 @@ function UserMessageRow({
   return (
     <div className={cn(enter && "animate-og-enter", "flex justify-end")}>
       <div className="flex max-w-[85%] min-w-0 flex-col items-end gap-1">
-        <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 ? (
-            renderMessageText(item.text, item)
-          ) : (
-            <Markdown>{item.text}</Markdown>
-          )}
-        </div>
+        <CopyHoverFrame
+          copyText={item.text}
+          label="Copy message"
+          className="w-fit max-w-full min-w-0"
+        >
+          <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 ? (
+              renderMessageText(item.text, item)
+            ) : (
+              <Markdown>{item.text}</Markdown>
+            )}
+          </div>
+        </CopyHoverFrame>
       </div>
     </div>
   );
@@ -896,29 +1828,23 @@ function AgentMessageRow({
     | undefined;
 }) {
   const enter = useEntranceAnimation();
-  const caret = item.streaming ? (
-    <span
-      className="ml-0.5 inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-og-blink rounded-full bg-og-accent"
-      aria-hidden
-    />
-  ) : null;
+  // No streaming caret: it fought the trailing block layout (inline ↔ block)
+  // and snapped on exit. Live text carries the stream via tip ink.
+  const body = renderMessageText ? (
+    renderMessageText(item.text, item)
+  ) : (
+    <Markdown streaming={item.streaming}>{item.text}</Markdown>
+  );
+  // While streaming, copy is still useful (current text) but keep chrome calm.
   return (
-    <div className={cn(enter && "animate-og-enter", "min-w-0 text-og-md leading-7 text-og-fg")}>
-      {renderMessageText ? (
-        <>
-          {renderMessageText(item.text, item)}
-          {caret}
-        </>
-      ) : (
-        // While streaming, let the caret ride the end of the last rendered line:
-        // the trailing block (usually a <p>) flows inline so the caret sits on
-        // its baseline instead of dropping to a new line.
-        <div className={item.streaming ? "[&_>div>:last-child]:inline" : undefined}>
-          <Markdown>{item.text}</Markdown>
-          {caret}
-        </div>
-      )}
-    </div>
+    <CopyHoverFrame
+      copyText={item.text}
+      label="Copy message"
+      align="end"
+      className={cn(enter && "animate-og-enter", "min-w-0 text-og-md leading-7 text-og-fg")}
+    >
+      {body}
+    </CopyHoverFrame>
   );
 }