@opengeni/react 1.0.1 → 1.0.2-canary.37191796234001

package/src/components/message-timeline.tsx

@@ -1,19 +1,36 @@
+import { RollingActivity } from "../timeline/rolling-activity";
+import { useErrorMessage } from "../lib/error-message";
+import { formatElapsed } from "../timeline/turn-summary";
+import { ActivityNoteTextContext } from "../timeline/activity-rail";
+import { timelineGroupContainsPresentedImage } from "../timeline/presented-image";
+import {
+  isTimelineSearchTarget,
+  TimelineSearchRevealContext,
+  useTimelineSearchNavigation,
+  type TimelineSearchTarget,
+} from "./timeline-search";
+import { GenieLoadingOptionsContext, type GenieLoadingOptions } from "../timeline/genie-loading";
+import { ChildSessionLink } from "./child-session-link";
+import { useStartupDetails } from "../timeline/startup-preference";
+import { compactionSkipSubtitle } from "../timeline/compaction-copy";
 import type {
   DraftTimelineAnnotation,
   MediaGenerationResult,
   SessionEvent,
   SessionStatus,
 } from "@opengeni/sdk";
+import { dequal } from "dequal/lite";
 import {
   ArrowDownIcon,
   ArrowRightIcon,
-  ArrowUpToLineIcon,
+  ArrowUpIcon,
   BotIcon,
   CheckCircle2Icon,
   CheckIcon,
   ChevronRightIcon,
   PauseCircleIcon,
   PauseIcon,
+  MessageCircleQuestionIcon,
   PencilLineIcon,
   PlayIcon,
   RefreshCwIcon,
@@ -23,8 +40,8 @@ import {
   TriangleAlertIcon,
   XCircleIcon,
 } from "lucide-react";
-import type { ComponentType } from "react";
-import { AnimatePresence, motion } from "motion/react";
+import type { ComponentType, CSSProperties } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { Collapsible } from "radix-ui";
 import {
   Component,
@@ -42,22 +59,43 @@ import {
 import { cn } from "../lib/cn";
 import { formatClockTime, formatRelativeTime, truncate } from "../lib/format";
 import { prefersReducedMotion } from "../lib/motion";
-import { Markdown } from "./markdown";
+import {
+  invokeOlderHistoryLoaderWithReceiptCapture,
+  type OlderHistoryLoadReceipt,
+  type OlderHistoryLoader,
+} from "../older-history";
+import { Markdown, type MarkdownProps } from "./markdown";
+import { OpenGeniLinkProvider, type OpenGeniLinkResolver } from "./open-geni-links";
+import {
+  TimelineBeforeLayout,
+  captureTimelineAnchor,
+  timelineAnchorCorrection,
+  timelineHasReader,
+  type TimelineAnchor,
+} from "./timeline-anchor";
+import { useReadingProgress } from "./timeline-reading-progress";
+import {
+  animateTimelineSettlement,
+  captureTimelineSettlement,
+  type TimelineSettlement,
+} from "./timeline-settlement";
 import {
   UserMessageBody,
   UserMessageDisclosureProvider,
   type UserMessageDisclosureContextValue,
+  type UserMessageDisclosureLabels,
 } from "./user-message-body";
 import {
   createTipFollowState,
   readerScrollUpPx,
   tipFollowCancel,
-  tipFollowCompensateShrink,
   tipFollowCompensateViewportShrink,
+  tipFollowObserveContentShrink,
   tipFollowStep,
   supportsScrollEndEvent,
   TIP_FOLLOW_READER_UP_EPS_PX,
   TIP_FOLLOW_SHRINK_EPS_PX,
+  type TipFollowContentShrinkBaseline,
   type TipFollowState,
 } from "./tip-follow";
 import {
@@ -71,6 +109,7 @@ import {
   type AuthNeededItem,
   type ContextCompactionItem,
   type GoalItem,
+  type HumanInputItem,
   type MachineInputBatchItem,
   type NoticeItem,
   type TimelineGroup,
@@ -81,6 +120,7 @@ import {
   type VideoArtifactPlaybackLoader,
   type ToolRegistry,
   type TurnSummaryOptions,
+  type TurnSummaryStatus,
   type UserMessageItem,
   type FoldRestingState,
   type WorkerCompletionItem,
@@ -91,6 +131,7 @@ import {
   useTurnSettleOpen,
 } from "../timeline";
 import { CopyHoverFrame } from "./copy-button";
+import { TimelineAnnotationSourceRootContext } from "./timeline-annotation-reveal-context";
 import { GeneratedVideoPlayer } from "./generated-video-player";
 import {
   MACHINE_INPUT_META,
@@ -102,23 +143,45 @@ import {
 import { SESSION_STATUS_META, StatusDot } from "./session-status";
 import { TimelineComputeLabelProvider } from "../timeline/compute-label";
 import { EntranceAnimationProvider, useEntranceAnimation } from "../timeline/entrance";
+import {
+  AllowanceExhaustedRow,
+  AllowancePresentationProvider,
+  type RenderAllowanceExhausted,
+} from "../timeline/allowance-exhausted-row";
+import type { AllowanceLabels } from "../usage/allowance-copy";
 import { SeenActivityIdsProvider } from "../timeline/seen-activity-ids";
-import { TimelineAnnotationsChip } from "./timeline-annotations";
+import { TimelineAnnotationCards } from "./timeline-annotations";
 import { TooltipProvider } from "./tooltip";
 
 const TimelineAnnotationSelection = lazy(() => import("./timeline-annotation-selection"));
+const TimelineAnnotationMarkers = lazy(() => import("./timeline-annotation-markers"));
 
 export type MessageTimelineProps = {
+  /** Exact durable search hit; clearing it removes highlighting without moving the reader. */
+  searchTarget?: TimelineSearchTarget | null | undefined;
+  /** Localized user-message disclosure actions, including custom UserMessageBody renderers. */
+  userMessageDisclosureLabels?: UserMessageDisclosureLabels | undefined;
   /** Raw session events (projected internally) … */
   events?: SessionEvent[] | undefined;
   /** … or pre-projected items (e.g. from `useSessionEvents().timeline`). */
   items?: TimelineItem[] | undefined;
   /** Current session status (reserved; tip "Working…" chrome removed for now). */
   status?: SessionStatus | null | undefined;
+  /** Host-owned controls beside Copy and the timestamp on settled message rows. */
+  renderMessageActions?: ((item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
   /** Plug a markdown renderer for message bodies (e.g. streamdown). */
   renderMessageText?:
-    | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
+    | ((
+        text: string,
+        item: AgentMessageItem | UserMessageItem,
+        context: { searchTarget: TimelineSearchTarget | null },
+      ) => ReactNode)
     | undefined;
+  /**
+   * Render assistant `opengeni-html` / `opengeni-site` fences in the default
+   * message renderer (`SessionConversation` supplies the inline Site preview).
+   */
+  renderInteractiveBlock?: MarkdownProps["renderInteractiveBlock"];
   /** Drill into a spawned worker session. */
   onOpenSession?: ((sessionId: string) => void) | undefined;
   /**
@@ -138,6 +201,17 @@ export type MessageTimelineProps = {
    * a Reconnect button without a handler to run it.
    */
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  /** Host-owned inline connection setup. Return undefined to use the default recovery card. */
+  renderAuthNeeded?: ((item: AuthNeededItem) => ReactNode | undefined) | undefined;
+  /**
+   * Replace the "usage limit reached" row shown when a workspace or member
+   * usage allowance stops work (an `allowance_exhausted` refusal). Receives the
+   * typed refusal (scope, reset time) and the default row; return undefined to
+   * keep the default. Use it to point people at your own plan or admin page.
+   */
+  renderAllowanceExhausted?: RenderAllowanceExhausted | undefined;
+  /** Replace the words of the default "usage limit reached" row. */
+  allowanceExhaustedLabels?: Partial<AllowanceLabels> | undefined;
   /**
    * Decide which durable authentication notices this timeline presents.
    * Defaults to showing every notice. Embedded hosts can suppress notices for
@@ -158,9 +232,19 @@ export type MessageTimelineProps = {
    * `createDefaultToolRegistry({ entries })` to add custom tool renderers.
    */
   toolRegistry?: ToolRegistry | undefined;
+  /**
+   * Open OpenGeni object links the agent writes in replies and progress notes:
+   * `artifact:<file>`, `sandbox:<path>`, editable artifacts, and Sites. Return
+   * a host URL (`{ href }`) or action (`{ open }`); unhandled targets render as
+   * unavailable text instead of a console link that 404s inside the host.
+   * Applies to the default message renderer and to any `Markdown` a custom
+   * `renderMessageText` renders. `SessionConversation` supplies file and
+   * sandbox downloads by default.
+   */
+  resolveLink?: OpenGeniLinkResolver | undefined;
   /** Resolve opaque retained screenshot receipts through the authenticated host SDK. */
   loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
-  /** Resolve permanent generated-image receipts through the authenticated host SDK. */
+  /** Resolve permanent workspace image/file receipts through the authenticated host SDK. */
   loadRetainedArtifact?: RetainedArtifactLoader | undefined;
   /** Mint short-lived native playback sources for retained generated videos. */
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
@@ -170,17 +254,32 @@ export type MessageTimelineProps = {
    */
   computeLabel?: string | null | undefined;
   /** Customize collapsed turn facets for this timeline instance. */
+  genieLoading?: GenieLoadingOptions | undefined;
   turnSummary?: TurnSummaryOptions | undefined;
   /** Follow new events when pinned to the bottom. Defaults to true. */
   autoFollow?: boolean | undefined;
   /** Capture a same-row text selection into the host's canonical composer draft. */
   onAnnotate?: ((annotation: DraftTimelineAnnotation) => void) | undefined;
+  /**
+   * Hide the floating "Back to your message" pill while the timeline viewport
+   * is shorter than this (px), e.g. a narrow embed above a decision card.
+   * Defaults to 0 (always available).
+   */
+  questionNavMinViewportHeight?: number | undefined;
+  /** Composer draft quotes currently attached to the next send. */
+  draftAnnotations?: readonly DraftTimelineAnnotation[] | undefined;
+  /** Open the composer review list for one numbered draft badge. */
+  onDraftAnnotationSelect?: ((id: string) => void) | undefined;
   /** Older durable history exists above the current window (see useSessionEvents). */
   hasOlder?: boolean | undefined;
   /** An older window is being fetched; shows the quiet top shimmer. */
   loadingOlder?: boolean | undefined;
-  /** Called when the reader nears the top and older history should backfill. */
-  onLoadOlder?: (() => void) | undefined;
+  /**
+   * Called when older history should backfill. Existing void, synchronous-value,
+   * and arbitrary-promise callbacks remain supported. Receipt-aware loaders
+   * preserve committed-page direction through wrappers and bounded windows.
+   */
+  onLoadOlder?: OlderHistoryLoader | undefined;
   /** Jump to the durable session start (bounded oldest window, no middle). */
   onJumpToStart?: (() => void | Promise<void>) | undefined;
   /** True while the oldest window is loading. */
@@ -189,13 +288,16 @@ export type MessageTimelineProps = {
   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;
+  /** Page forward through history. Return the request promise to enable inline error/retry. */
+  onLoadNewer?: (() => unknown) | 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;
+  /** @deprecated Retained for source compatibility; contextual prompt navigation
+   * uses only mounted prompts and never invokes this global resolver. */
+  onJumpToLatestQuestion?: (() => Promise<number | null>) | undefined;
   /** Host-owned content appended after timeline groups, such as startup progress. */
   trailingState?: ReactNode | undefined;
   emptyState?: ReactNode | undefined;
@@ -211,8 +313,9 @@ export type MessageTimelineProps = {
  *
  * Scroll invariant (tip-follow camera — see `./tip-follow.ts`):
  * - 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).
+ *   reveal. Live tip: DOM growth advances the pinned viewport by the same
+ *   amount, so rendered content is visible immediately. Only debt that already
+ *   existed before the growth goes through the camera ease.
  * - 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, or a settled scrollend away from the
@@ -226,6 +329,33 @@ export type MessageTimelineProps = {
  *   alone is wrong. Late layout while unpinned stays browser-owned.
  */
 const PIN_THRESHOLD_PX = 48;
+/**
+ * A pinned timeline can still have meaningful pre-existing debt while the
+ * tip-follow camera catches up. Surface the existing explicit jump once that
+ * debt is large enough to be useful, without flashing the control for ordinary
+ * line-sized streaming movement.
+ */
+const JUMP_TO_LATEST_CATCHUP_DEBT_PX = 240;
+/** Breathing room above the question when following stops at an answer. */
+const QUESTION_NAV_MARGIN_PX = 12;
+/**
+ * Floating timeline navigation: two identical small round arrow buttons at fixed
+ * spots, centered on the conversation. Back to your message floats 12px below
+ * the top edge, or just below an expanded work-header strip while that strip is
+ * pinned (32px, 44px on coarse pointers) so the strip stays a full-width
+ * target. Jump to latest floats 12px above the bottom edge. They never dodge
+ * the content beneath them (floating over a sliver of text is fine), so they
+ * cannot wander as rows stream in or the host resizes. Coarse pointers get a
+ * larger invisible hit area instead of a larger button.
+ */
+const NAV_BUTTON_CLASS =
+  "pointer-events-auto relative inline-flex size-8 items-center justify-center rounded-full border border-og-border bg-og-surface-3/90 text-og-fg-muted shadow-og-md backdrop-blur hover:border-og-border-strong hover:text-og-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent pointer-coarse:before:absolute pointer-coarse:before:-inset-1.5 pointer-coarse:before:content-['']";
+const NAV_FADE = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.15, ease: "easeOut" },
+} as const;
 /**
  * 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
@@ -233,6 +363,68 @@ const PIN_THRESHOLD_PX = 48;
  */
 const OLDER_PREFETCH_MARGIN_PX = 400;
 const OLDER_PREFETCH_ROOT_MARGIN = `${OLDER_PREFETCH_MARGIN_PX}px 0px 0px 0px`;
+const PRIMARY_ACTION_CLASS =
+  "inline-flex w-full shrink-0 items-center justify-center gap-1.5 rounded-og-md border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-menu font-medium sm:w-auto";
+const MESSAGE_BUBBLE_CLASS =
+  "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";
+const WAITING_PILL_CLASS =
+  "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting";
+const LOADING_CHIP_CLASS =
+  "pointer-events-none inline-flex items-center rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1 text-og-control font-medium shadow-og-md backdrop-blur";
+
+// State: 0 underfill retry, 1 prefetch pending, 2 compatibility-settled,
+// 3 explicit no-progress waiting to become an underfill retry.
+// The tuple identity is the exact request ownership fence. The boundary may rebase
+// forward while that request is pending when a bounded live-tail append evicts
+// its former oldest row. First-party loaders mark the exact owner when their
+// older page commits; retained direction is the fallback for other hosts.
+type OlderLoadAttempt = [
+  boundary: string | undefined,
+  state?: number,
+  receipt?: OlderHistoryLoadReceipt,
+];
+
+function invokeOlderLoad(
+  load: OlderHistoryLoader,
+  noProgress: () => void,
+  attempt: OlderLoadAttempt,
+  preserveTail = false,
+): 1 | undefined {
+  try {
+    // Receipt creation is captured synchronously through legacy wrappers such
+    // as `() => void loadOlder()`, even when the wrapper discards the return.
+    const result = invokeOlderHistoryLoaderWithReceiptCapture(
+      load,
+      (receipt) => {
+        attempt[2] = receipt;
+      },
+      preserveTail,
+    ) as OlderHistoryLoadReceipt | PromiseLike<unknown> | unknown;
+    const receipt =
+      attempt[2] ??
+      (typeof (result as { committed?: unknown } | undefined)?.committed === "boolean"
+        ? (result as OlderHistoryLoadReceipt)
+        : undefined);
+    if (receipt) {
+      attempt[2] = receipt;
+      void receipt.then(
+        (value) => value === false && !receipt.committed && noProgress(),
+        noProgress,
+      );
+      return 1;
+    }
+    if (typeof (result as PromiseLike<unknown> | undefined)?.then != "function") {
+      return;
+    }
+    void (result as PromiseLike<unknown>).then(
+      (value) => value === false && noProgress(),
+      noProgress,
+    );
+  } catch {
+    noProgress();
+  }
+  return 1;
+}
 
 /**
  * Pinned = the viewport bottom is within PIN_THRESHOLD_PX of the content
@@ -243,7 +435,8 @@ const OLDER_PREFETCH_ROOT_MARGIN = `${OLDER_PREFETCH_MARGIN_PX}px 0px 0px 0px`;
  * cannot scroll at all is always pinned.
  */
 function maxScrollOf(node: HTMLElement): number {
-  return Math.max(0, node.scrollHeight - node.clientHeight);
+  // Browser layout guarantees scrollHeight is at least clientHeight.
+  return node.scrollHeight - node.clientHeight;
 }
 
 /**
@@ -286,6 +479,58 @@ function isNearBottom(node: HTMLElement): boolean {
   return gap < Math.min(PIN_THRESHOLD_PX, maxScroll);
 }
 
+/** Content-space top of a timeline group, or null when it is not mounted. */
+function contentTopOf(node: HTMLElement, groupKey: string): number | null {
+  const element = node.querySelector(`[data-og-group-key="${cssEscapeAttribute(groupKey)}"]`);
+  if (!(element instanceof HTMLElement)) {
+    return null;
+  }
+  return element.getBoundingClientRect().top - node.getBoundingClientRect().top + node.scrollTop;
+}
+
+/** The question the reader is inside of, once its start has scrolled out of view. */
+/**
+ * `belowHeader`: an expanded work header is pinned to the top of the scrollport,
+ * so the up arrow sits just below that strip instead of covering it.
+ */
+type QuestionNav = { key: string; belowHeader: boolean };
+
+/** How far a question's start must be above the viewport before navigation shows. */
+const QUESTION_NAV_HIDDEN_PX = 24;
+
+function readQuestionNav(node: HTMLElement): QuestionNav | null {
+  const view = node.getBoundingClientRect();
+  const prompts = [...node.querySelectorAll<HTMLElement>("[data-og-prompt]")];
+  // The last prompt before the reading position owns the response/work in view.
+  // A newer prompt farther down the conversation is not a navigation target.
+  const middle = view.top + view.height / 2;
+  const prompt = prompts
+    .reverse()
+    .find((candidate) => candidate.getBoundingClientRect().top <= middle);
+  const key = prompt?.dataset.ogGroupKey;
+  if (!prompt || !key) return null;
+  const bounds = prompt.getBoundingClientRect();
+  if (bounds.top >= view.top - QUESTION_NAV_HIDDEN_PX || bounds.bottom > view.top) {
+    return null;
+  }
+  return { key, belowHeader: workHeaderPinned(node, view) };
+}
+
+/** True while an expanded outer work header is stuck to the scrollport's top edge. */
+function workHeaderPinned(node: HTMLElement, view: DOMRect): boolean {
+  for (const header of node.querySelectorAll<HTMLElement>(
+    '[data-og-work-header="outer"][data-state="open"]',
+  )) {
+    const box = header.getBoundingClientRect();
+    if (Math.abs(box.top - view.top) <= 1 && box.bottom > view.top) return true;
+  }
+  return false;
+}
+
+function sameQuestionNav(a: QuestionNav | null, b: QuestionNav | null): boolean {
+  return a === b || (!!a && !!b && a.key === b.key && a.belowHeader === b.belowHeader);
+}
+
 /** Escape a value for use inside a CSS attribute selector. */
 function cssEscapeAttribute(value: string): string {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
@@ -301,13 +546,21 @@ function cssEscapeAttribute(value: string): string {
  * with a "jump to latest" affordance when the reader scrolls back.
  */
 export function MessageTimeline({
+  resolveLink,
+  renderInteractiveBlock,
+  userMessageDisclosureLabels,
+  searchTarget,
   events,
   items,
   status: _status,
+  renderMessageActions,
   renderMessageText,
   onOpenSession,
   onMemoryClick,
   onReconnect,
+  renderAuthNeeded,
+  renderAllowanceExhausted,
+  allowanceExhaustedLabels,
   shouldRenderAuthNeeded,
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
@@ -315,9 +568,13 @@ export function MessageTimeline({
   loadRetainedArtifact,
   loadVideoArtifactPlayback,
   computeLabel = null,
+  genieLoading,
   turnSummary,
   autoFollow = true,
   onAnnotate,
+  questionNavMinViewportHeight = 0,
+  draftAnnotations,
+  onDraftAnnotationSelect,
   hasOlder = false,
   loadingOlder = false,
   onLoadOlder,
@@ -331,14 +588,143 @@ export function MessageTimeline({
   emptyState,
   className,
 }: MessageTimelineProps) {
+  const formatError = useErrorMessage();
   const resolvedItems = useMemo(() => {
-    const projected = items ?? buildTimeline(events ?? []);
+    const projectedItems = items ?? buildTimeline(events ?? []);
     if (!shouldRenderAuthNeeded) {
-      return projected;
+      return projectedItems;
     }
-    return projected.filter((item) => item.kind !== "auth-needed" || shouldRenderAuthNeeded(item));
+    return projectedItems.filter(
+      (item) => item.kind !== "auth-needed" || shouldRenderAuthNeeded(item),
+    );
   }, [items, events, shouldRenderAuthNeeded]);
-  const allGroups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const searchItem = searchTarget
+    ? resolvedItems.find((item) => isTimelineSearchTarget(item, searchTarget))
+    : undefined;
+  const searchRevealKey =
+    searchItem && searchTarget
+      ? JSON.stringify([
+          searchItem.id,
+          searchTarget.query,
+          searchTarget.occurrence ?? 0,
+          searchTarget.offset ?? null,
+        ])
+      : null;
+  const searchTargetRef = useRef(searchTarget);
+  searchTargetRef.current = searchTarget;
+  const renderSearchableMessageText = useMemo(
+    () =>
+      renderMessageText
+        ? (text: string, item: AgentMessageItem | UserMessageItem) =>
+            renderMessageText(text, item, {
+              searchTarget: searchItem?.id === item.id ? (searchTarget ?? null) : null,
+            })
+        : (text: string, item: AgentMessageItem | UserMessageItem) => {
+            const body = (
+              <Markdown
+                searchTarget={searchItem?.id === item.id ? searchTarget : null}
+                streaming={item.kind === "agent-message" && item.streaming}
+                renderInteractiveBlock={
+                  item.kind === "agent-message" ? renderInteractiveBlock : undefined
+                }
+              >
+                {text}
+              </Markdown>
+            );
+            return item.kind === "user-message" ? (
+              <UserMessageBody messageId={item.id} text={text}>
+                {body}
+              </UserMessageBody>
+            ) : (
+              body
+            );
+          },
+    [renderInteractiveBlock, renderMessageText, searchItem?.id, searchTarget],
+  );
+  // Event-window identity is independent of projected rows (partial messages
+  // can acquire a different first-delta id when older text arrives).
+  const sourceItems = events ?? items;
+  const olderBoundaryKey = sourceItems?.[0]?.id;
+  const newerBoundaryKey = `${events?.[0]?.sessionId ?? ""}:${olderBoundaryKey ?? ""}`;
+  const newerScopeRef = useRef(newerBoundaryKey);
+  newerScopeRef.current = newerBoundaryKey;
+  const newerAttemptRef = useRef<{ pending: boolean } | null>(null);
+  const newerRetryButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [newerRetryPending, setNewerRetryPending] = useState(false);
+  const [newerFailure, setNewerFailure] = useState<{ key: string; message: string } | null>(null);
+  useEffect(() => {
+    newerScopeRef.current = newerBoundaryKey;
+    newerAttemptRef.current = null;
+    setNewerFailure(null);
+    setNewerRetryPending(false);
+    return () => {
+      newerScopeRef.current = "";
+      newerAttemptRef.current = null;
+    };
+  }, [newerBoundaryKey]);
+  const requestNewer = useCallback(
+    (explicitRetry = false) => {
+      if (
+        newerScopeRef.current !== newerBoundaryKey ||
+        !onLoadNewer ||
+        loadingNewer ||
+        (newerAttemptRef.current && (!explicitRetry || newerAttemptRef.current.pending))
+      ) {
+        return;
+      }
+      const attempt = { pending: true };
+      newerAttemptRef.current = attempt;
+      if (explicitRetry) setNewerRetryPending(true);
+      const isCurrent = () =>
+        newerAttemptRef.current === attempt && newerScopeRef.current === newerBoundaryKey;
+      // Both synchronous host errors and rejected promises belong to this
+      // boundary. Retain the failed attempt so observers cannot hot-retry it.
+      void Promise.resolve()
+        .then(() => (isCurrent() ? onLoadNewer() : undefined))
+        .then(
+          () => {
+            if (!isCurrent()) return;
+            newerAttemptRef.current = null;
+            // The successful page removes the recovery control. Return focus
+            // to the reading surface without moving the reader's viewport.
+            if (document.activeElement === newerRetryButtonRef.current) {
+              scrollRef.current?.focus({ preventScroll: true });
+            }
+            setNewerFailure(null);
+            setNewerRetryPending(false);
+          },
+          (reason: unknown) => {
+            if (!isCurrent()) return;
+            attempt.pending = false;
+            setNewerRetryPending(false);
+            setNewerFailure({
+              key: newerBoundaryKey,
+              message: formatError(reason),
+            });
+          },
+        );
+    },
+    [onLoadNewer, loadingNewer, newerBoundaryKey, formatError],
+  );
+  const previousSourceIdsRef = useRef(new Set<string>());
+  const previousSourceBoundaryRef = useRef<string | undefined>(undefined);
+  const readingAnchorRef = useRef<TimelineAnchor | null>(null);
+  const settlementRef = useRef<TimelineSettlement | null>(null);
+  const settlementAnimationRef = useRef<Animation | null>(null);
+  const stopSettlement = useCallback(() => {
+    settlementAnimationRef.current?.cancel();
+    settlementAnimationRef.current = null;
+  }, []);
+  const olderPageBudgetRef = useRef(0);
+  const [olderDemand, setOlderDemand] = useState(0);
+  const readableTurns = turnSummary?.rolling === true;
+  const projectedGroups = useMemo(
+    () => groupTimeline(resolvedItems, { readableTurns }),
+    [resolvedItems, readableTurns],
+  );
+  // A new timeline revision (including session/turn replacement) owns layout.
+  // Never leave an old decorative transform running on its retained rows.
+  useLayoutEffect(() => stopSettlement, [projectedGroups, stopSettlement]);
   const annotationSources = useMemo(() => {
     const sources = new Map<string, TimelineAnnotationSourceDescriptor>();
     for (const item of resolvedItems) {
@@ -353,29 +739,56 @@ export function MessageTimeline({
     }
     return sources;
   }, [resolvedItems]);
-  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 { groups: allGroups, release: releaseProgress } = useReadingProgress(
+    projectedGroups,
+    autoFollow && pinned && !hasNewer,
+    scrollRef.current,
+  );
+  const [canSkipTipCatchup, setCanSkipTipCatchup] = useState(false);
+  const canSkipTipCatchupRef = useRef(false);
   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");
+  // A collapsed history tail can be shorter than the viewport. In that state
+  // there is no upward scroll range, so reader intent can never arm the top
+  // sentinel. Request one older page per loaded window until history either
+  // fills the viewport or the host reports that no older rows remain. Each
+  // attempt owns the oldest loaded item boundary across BOTH the automatic
+  // underfill and reader-driven sentinel paths. Live-tail appends do not
+  // advance older pagination or release that exact owner.
+  const olderLoadAttemptRef = useRef<OlderLoadAttempt | null>(null);
+  const [underfillSettledAttempt, setUnderfillSettledAttempt] = useState<OlderLoadAttempt | null>(
+    null,
+  );
+  const underfillRetryReadyRef = useRef(false);
   const resizeFollowRafRef = useRef<number | null>(null);
+  const questionNavFrameRef = useRef<number | null>(null);
+  const [questionNav, setQuestionNav] = useState<QuestionNav | null>(null);
+  const questionNavMinViewportRef = useRef(questionNavMinViewportHeight);
+  questionNavMinViewportRef.current = questionNavMinViewportHeight;
+  const scheduleQuestionNavRef = useRef<() => void>(() => {});
+  // Unpinned is not the same as away from the tip: focusing a control in the
+  // conversation (Copy, a connection card) hands the view to the reader while
+  // they are still at the bottom. Offer the jump only once there is something
+  // below them, or a newer window / catch-up to skip.
+  const [awayFromTip, setAwayFromTip] = useState(false);
+  const jumpPillShown = autoFollow && ((!pinned && awayFromTip) || hasNewer || canSkipTipCatchup);
   const firstGroupKey = allGroups[0] ? timelineGroupKey(allGroups[0]) : null;
   // 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);
+  // The accepted-create handoff uses the reserved local id "c" so its known
+  // first message is visible immediately; loaded histories still park first.
+  const [revealed, setRevealed] = useState(resolvedItems[0]?.id === "c");
   // 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.
@@ -414,6 +827,8 @@ export function MessageTimeline({
    * jumps (Vimium) settle via scrollend while the camera is idle.
    */
   const readerIntentArmRef = useRef(false);
+  /** Gesture-start geometry survives commits before the native scroll event. */
+  const readerIntentStartRef = useRef<{ scrollTop: number; maxScroll: number } | null>(null);
   /**
    * Count of camera/snap scrollTop writes whose scroll echoes are not yet
    * consumed. A boolean was wrong when the browser coalesced two writes into
@@ -440,23 +855,72 @@ export function MessageTimeline({
   const foldMemoryRef = useRef<Map<string, FoldRestingState>>(new Map());
   const userMessageDisclosureMemoryRef = useRef<Map<string, boolean>>(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 firstItemGroupKeyRef = useRef<string | null>(null);
+  const firstItemGroupOffsetTopRef = useRef<number | null>(null);
+  const firstItemContentTopRef = useRef<number | null>(null);
   const firstItemId = resolvedItems[0]?.id ?? null;
+  // Pagination ownership follows the oldest committed input, before host
+  // filtering and grouping. A page containing only suppressed auth notices
+  // still advances this receipt, while live-tail appends leave it unchanged.
+  // Promise fulfillment alone does neither, so delayed prepends stay fenced.
+  const underfillRetryReady = (underfillRetryReadyRef.current = !!(
+    underfillSettledAttempt &&
+    underfillSettledAttempt === olderLoadAttemptRef.current &&
+    hasOlder &&
+    onLoadOlder &&
+    !loadingOlder
+  ));
   // 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);
+  const groups = useStableTimelineGroupKeys(allGroups, !bulkRender);
+  const turnsWithOutput = useMemo(
+    () =>
+      new Set(
+        resolvedItems.flatMap((item) =>
+          "turnId" in item &&
+          item.turnId &&
+          (item.kind === "tool-call" ||
+            ((item.kind === "agent-message" || item.kind === "reasoning") && item.text.trim()))
+            ? [item.turnId]
+            : [],
+        ),
+      ),
+    [resolvedItems],
+  );
+
+  const applyCanSkipTipCatchup = useCallback((value: boolean) => {
+    if (canSkipTipCatchupRef.current !== value) {
+      canSkipTipCatchupRef.current = value;
+      setCanSkipTipCatchup(value);
+    }
+  }, []);
 
   // 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 applyPinned = useCallback(
+    (value: boolean) => {
+      if (pinnedRef.current !== value) {
+        pinnedRef.current = value;
+        setPinned(value);
+      }
+      if (!value) {
+        applyCanSkipTipCatchup(false);
+      }
+    },
+    [applyCanSkipTipCatchup],
+  );
+
+  const rearmOlderPrefetchAfterLeavingTop = useCallback((node: HTMLElement) => {
+    if (node.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
+      const state = olderLoadAttemptRef.current?.[1];
+      if (state === 2 || state === 3) {
+        olderLoadAttemptRef.current = null;
+      }
     }
   }, []);
 
@@ -466,6 +930,7 @@ export function MessageTimeline({
   // Pure tip-follow camera. Pin intent uses clamp conservation, not timers.
   const followRef = useRef<TipFollowState>(createTipFollowState());
   const followFrameRef = useRef<number | null>(null);
+  const contentShrinkBaselineRef = useRef<TipFollowContentShrinkBaseline | null>(null);
 
   const syncScrollBaseline = useCallback((node: HTMLElement) => {
     lastScrollTopRef.current = node.scrollTop;
@@ -480,6 +945,9 @@ export function MessageTimeline({
     if (before === next) {
       return;
     }
+    // Unpinned camera/anchor writes invalidate return intent. A pinned
+    // pointer gesture still needs its cumulative leave budget across writes.
+    if (!pinnedRef.current || !readerIntentArmRef.current) readerIntentStartRef.current = null;
     programmaticScrollRef.current += 1;
     node.scrollTop = next;
     if (node.scrollTop === before) {
@@ -491,7 +959,7 @@ export function MessageTimeline({
   }, []);
 
   const cancelLeaveFallback = useCallback(() => {
-    if (leaveFallbackRafRef.current !== null) {
+    if (leaveFallbackRafRef.current != null) {
       cancelFrame(leaveFallbackRafRef.current);
       leaveFallbackRafRef.current = null;
     }
@@ -502,38 +970,58 @@ export function MessageTimeline({
     cancelLeaveFallback();
   }, [cancelLeaveFallback]);
 
+  const clearReaderIntent = useCallback(() => {
+    readerIntentArmRef.current = false;
+    readerIntentStartRef.current = null;
+  }, []);
+
   const stopFollow = useCallback(() => {
+    contentShrinkBaselineRef.current = null;
     followRef.current = tipFollowCancel(followRef.current);
-    if (followFrameRef.current !== null) {
+    if (followFrameRef.current != null) {
       cancelFrame(followFrameRef.current);
       followFrameRef.current = null;
     }
   }, []);
 
   /** Reader left the tip — wheel, keyboard, pointer-armed scroll-up, or scrollend. */
-  const releasePinFromReader = useCallback(
-    (node?: HTMLElement | null) => {
-      if (!autoFollow || !pinnedRef.current || hasNewerRef.current) {
-        return;
-      }
-      // Unscrollable window: unpin strands Jump-to-latest with no way back.
-      if (node && maxScrollOf(node) <= 1) {
-        return;
-      }
-      readerIntentArmRef.current = false;
-      clearPendingReaderLeave();
-      stopFollow();
-      applyPinned(false);
-      if (wantPinRef.current) {
-        wantPinRef.current = false;
-      }
-      if (!olderPrefetchArmedRef.current) {
-        olderPrefetchArmedRef.current = true;
-        setOlderPrefetchArmed(true);
+  const releasePinFromReader = useCallback(() => {
+    if (!autoFollow || !pinnedRef.current || hasNewerRef.current) {
+      return;
+    }
+    clearReaderIntent();
+    clearPendingReaderLeave();
+    stopFollow();
+    applyPinned(false);
+    if (wantPinRef.current) {
+      wantPinRef.current = false;
+    }
+    if (!olderPrefetchArmedRef.current) {
+      olderPrefetchArmedRef.current = true;
+      setOlderPrefetchArmed(true);
+    }
+  }, [autoFollow, applyPinned, clearPendingReaderLeave, clearReaderIntent, stopFollow]);
+
+  useEffect(() => {
+    if (!readableTurns) return;
+    const node = scrollRef.current;
+    if (!node) return;
+    const onSelection = () => {
+      const selection = node.ownerDocument.getSelection();
+      if (
+        selection &&
+        !selection.isCollapsed &&
+        node.contains(selection.anchorNode) &&
+        node.contains(selection.focusNode)
+      ) {
+        stopSettlement();
+        releasePinFromReader();
+        disclosureKeepsUnpinnedRef.current = true;
       }
-    },
-    [autoFollow, applyPinned, clearPendingReaderLeave, stopFollow],
-  );
+    };
+    node.ownerDocument.addEventListener("selectionchange", onSelection);
+    return () => node.ownerDocument.removeEventListener("selectionchange", onSelection);
+  }, [readableTurns, releasePinFromReader, stopSettlement]);
 
   /**
    * Settled away from the tip while the camera is idle — Vimium / unfocused
@@ -547,19 +1035,17 @@ export function MessageTimeline({
       if (programmaticScrollRef.current > 0) {
         return;
       }
-      if (followRef.current.running || followFrameRef.current !== null) {
+      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";
-      }
+      releasePinFromReader();
+      rearmOlderPrefetchAfterLeavingTop(node);
     },
-    [autoFollow, clearPendingReaderLeave, releasePinFromReader],
+    [autoFollow, clearPendingReaderLeave, rearmOlderPrefetchAfterLeavingTop, releasePinFromReader],
   );
 
   const scheduleLeaveFallback = useCallback(() => {
@@ -577,6 +1063,22 @@ export function MessageTimeline({
     });
   }, [cancelLeaveFallback, releasePinAfterScrollSettled]);
 
+  const requestEarlierFromReader = () => {
+    // Upward navigation replaces any earlier downward gesture, even when
+    // already unpinned and the engine never delivered scrollend.
+    clearReaderIntent();
+    releasePinFromReader();
+    wantPinRef.current = false;
+    // A stationary upward gesture is still demand. Successful short/folded
+    // pages may never create enough range to leave the prefetch band.
+    olderPageBudgetRef.current = 8;
+    if (olderLoadAttemptRef.current?.[1] === 2) {
+      olderLoadAttemptRef.current = null;
+      setOlderDemand((value) => value + 1);
+    }
+  };
+  const touchPositionRef = useRef<{ x: number; y: number } | null>(null);
+
   const onWheel = (event: {
     deltaY: number;
     deltaX: number;
@@ -593,13 +1095,17 @@ export function MessageTimeline({
     if (wheelConsumedByNestedScrollable(event)) {
       return;
     }
+    stopSettlement();
     disclosureKeepsUnpinnedRef.current = false;
+    programmaticScrollRef.current = 0;
     if (event.deltaY >= 0) {
+      const node = scrollRef.current;
+      readerIntentStartRef.current = node
+        ? { scrollTop: node.scrollTop, maxScroll: maxScrollOf(node) }
+        : null;
       return;
     }
-    const node =
-      event.currentTarget instanceof HTMLElement ? event.currentTarget : scrollRef.current;
-    releasePinFromReader(node);
+    requestEarlierFromReader();
   };
 
   /** Touch / stylus / mouse drag on the scroller — explicit leave (not layout). */
@@ -607,11 +1113,13 @@ export function MessageTimeline({
     button: number;
     pointerType: string;
     target: EventTarget | null;
+    currentTarget: EventTarget | null;
   }) => {
     // Primary button / touch / pen only. Ignore right-click etc.
-    if (event.button !== 0 && event.pointerType === "mouse") {
+    if (event.button && event.pointerType === "mouse") {
       return;
     }
+    stopSettlement();
     // Clicks on chips/buttons/links must not arm — their settle collapse
     // also drops scrollTop and would false-unpin. Drag on prose/scroller may.
     if (
@@ -621,7 +1129,13 @@ export function MessageTimeline({
       return;
     }
     disclosureKeepsUnpinnedRef.current = false;
+    programmaticScrollRef.current = 0;
+    const node =
+      event.currentTarget instanceof HTMLElement ? event.currentTarget : scrollRef.current;
     readerIntentArmRef.current = true;
+    readerIntentStartRef.current = node
+      ? { scrollTop: node.scrollTop, maxScroll: maxScrollOf(node) }
+      : null;
   };
 
   const onKeyDown = (event: { key: string; currentTarget: EventTarget | null }) => {
@@ -633,18 +1147,25 @@ export function MessageTimeline({
       event.key === "Home" ||
       event.key === "End"
     ) {
+      stopSettlement();
       disclosureKeepsUnpinnedRef.current = false;
+      // Reader navigation supersedes a pending camera/anchor scroll echo,
+      // including downward keys that do not explicitly release the pin.
+      programmaticScrollRef.current = 0;
+      const node = scrollRef.current;
+      readerIntentStartRef.current = node
+        ? { scrollTop: node.scrollTop, maxScroll: maxScrollOf(node) }
+        : null;
     }
     if (event.key !== "ArrowUp" && event.key !== "PageUp" && event.key !== "Home") {
       return;
     }
-    const node =
-      event.currentTarget instanceof HTMLElement ? event.currentTarget : scrollRef.current;
-    releasePinFromReader(node);
+    requestEarlierFromReader();
   };
 
   const snapToBottom = useCallback(
     (node: HTMLElement) => {
+      clearReaderIntent();
       stopFollow();
       cancelLeaveFallback();
       writeScrollTop(node, Math.max(0, node.scrollHeight - node.clientHeight));
@@ -655,8 +1176,16 @@ export function MessageTimeline({
         lastClientHeight: node.clientHeight,
         cameraTop: null,
       };
+      applyCanSkipTipCatchup(false);
     },
-    [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
+    [
+      applyCanSkipTipCatchup,
+      cancelLeaveFallback,
+      clearReaderIntent,
+      stopFollow,
+      syncScrollBaseline,
+      writeScrollTop,
+    ],
   );
 
   const beginUserMessageDisclosureChange = useCallback(
@@ -714,11 +1243,171 @@ export function MessageTimeline({
     () => ({
       expandedByMessageId: userMessageDisclosureMemoryRef.current,
       beginChange: beginUserMessageDisclosureChange,
+      labels: {
+        showMore: userMessageDisclosureLabels?.showMore,
+        showLess: userMessageDisclosureLabels?.showLess,
+      },
     }),
-    [beginUserMessageDisclosureChange],
+    [
+      beginUserMessageDisclosureChange,
+      userMessageDisclosureLabels?.showMore,
+      userMessageDisclosureLabels?.showLess,
+    ],
+  );
+  const timelineGroupEntryContext = useMemo<TimelineGroupEntryContext>(
+    () => ({
+      userMessageDisclosureContext,
+      behavior: {
+        renderMessageActions,
+        renderMessageText: renderSearchableMessageText,
+        onOpenSession,
+        onMemoryClick,
+        onReconnect,
+        renderAuthNeeded,
+        resolveProviderLogo,
+        toolRegistry,
+        loadRetainedScreenshot,
+        loadRetainedArtifact,
+        loadVideoArtifactPlayback,
+        genieLoading,
+        turnSummary,
+      },
+    }),
+    [
+      loadRetainedArtifact,
+      loadRetainedScreenshot,
+      loadVideoArtifactPlayback,
+      onMemoryClick,
+      onOpenSession,
+      onReconnect,
+      renderAuthNeeded,
+      renderMessageActions,
+      renderSearchableMessageText,
+      resolveProviderLogo,
+      toolRegistry,
+      genieLoading,
+      turnSummary,
+      userMessageDisclosureContext,
+    ],
+  );
+
+  const releaseSearchPin = useCallback(() => {
+    applyPinned(false);
+    stopFollow();
+    setRevealed(true);
+  }, [applyPinned, stopFollow]);
+  useTimelineSearchNavigation(
+    scrollRef,
+    searchItem?.id,
+    searchTarget,
+    releaseSearchPin,
+    resolvedItems,
+  );
+
+  const requestOlderIfUnderfilled = useCallback(
+    (node: HTMLElement, retry?: OlderLoadAttempt) => {
+      let currentAttempt = olderLoadAttemptRef.current;
+      if (retry && (currentAttempt !== retry || retry[0] !== olderBoundaryKey)) {
+        // AnimatePresence may retain the exiting button briefly. Its stale
+        // handler cannot replace a newer exact owner.
+        return;
+      }
+      const underfilled = maxScrollOf(node) <= 1;
+      if (!retry && underfilled && currentAttempt?.[1] === 3) {
+        // A receipted prefetch already declined or failed while the viewport
+        // was still scrollable. Collapse may later remove the scroll range;
+        // promote that exact owner to Retry without issuing another request.
+        currentAttempt[1] = 0;
+        setUnderfillSettledAttempt(currentAttempt);
+        return;
+      }
+      if (!retry && underfilled && currentAttempt?.[1] === 2) {
+        // A settled ordinary prefetch owns only this visit to the top band.
+        // If its resulting window cannot scroll, yield to automatic underfill
+        // so the reader is not stranded behind a cooldown they cannot exit.
+        currentAttempt = olderLoadAttemptRef.current = null;
+      }
+      // clientHeight=0 is pre-layout/headless, not evidence that the rendered
+      // history underfills a real viewport.
+      if (
+        node.clientHeight <= 1 ||
+        (!retry && !underfilled) ||
+        !hasOlder ||
+        loadingOlder ||
+        !onLoadOlder ||
+        (currentAttempt && !retry)
+      ) {
+        return;
+      }
+      const attempt: OlderLoadAttempt = (olderLoadAttemptRef.current = [olderBoundaryKey]);
+      setUnderfillSettledAttempt(null);
+      // Every underfill request owns the ordinary sentinel too, even if reader
+      // intent had not armed it yet when this short-window request began.
+      const noProgress = () => {
+        if (scrollRef.current && olderLoadAttemptRef.current === attempt) {
+          setUnderfillSettledAttempt(attempt);
+        }
+      };
+      // Legacy fire-and-forget callbacks keep the one-shot behavior. Hosts
+      // that return the real promise opt into safe rejection/no-progress retry;
+      // exact `false` is the first-party request-not-accepted receipt.
+      // All other fulfillment retains this exact owner until its prepend
+      // boundary commits; promise settlement alone cannot prove progress.
+      invokeOlderLoad(onLoadOlder, noProgress, attempt, !retry);
+    },
+    [hasOlder, loadingOlder, olderBoundaryKey, onLoadOlder],
   );
+  const scheduleQuestionNav = useCallback(() => {
+    if (!readableTurns || questionNavFrameRef.current != null) {
+      return;
+    }
+    questionNavFrameRef.current = requestFrame(() => {
+      questionNavFrameRef.current = null;
+      const node = scrollRef.current;
+      // A short viewport (a narrow embed above a decision card) has no room
+      // for a floating pill that would cover the very rows being read.
+      // clientHeight <= 1 is pre-layout/headless, not a short viewport.
+      const roomy =
+        node !== null &&
+        (node.clientHeight <= 1 || node.clientHeight >= questionNavMinViewportRef.current);
+      const next = node && roomy ? readQuestionNav(node) : null;
+      setQuestionNav((current) => (sameQuestionNav(current, next) ? current : next));
+    });
+  }, [readableTurns]);
+  scheduleQuestionNavRef.current = scheduleQuestionNav;
+  useEffect(
+    () => () => {
+      if (questionNavFrameRef.current != null) {
+        cancelFrame(questionNavFrameRef.current);
+        questionNavFrameRef.current = null;
+      }
+    },
+    [],
+  );
+  const jumpToQuestion = (key: string) => {
+    const node = scrollRef.current;
+    const top = node ? contentTopOf(node, key) : null;
+    if (!node || top === null) {
+      return;
+    }
+    // Explicit reader navigation: leave the tip and park the question on top.
+    releasePinFromReader();
+    wantPinRef.current = false;
+    disclosureKeepsUnpinnedRef.current = false;
+    writeScrollTop(node, Math.max(0, top - QUESTION_NAV_MARGIN_PX));
+    // Hand keyboard/accessibility focus to the actual destination. This also
+    // gives native scroll anchoring the new question rather than an old work
+    // row when the bounded context subsequently gains a later history page.
+    node
+      .querySelector<HTMLElement>(`[data-og-group-key="${cssEscapeAttribute(key)}"]`)
+      ?.focus({ preventScroll: true });
+    syncScrollBaseline(node);
+    scheduleQuestionNav();
+  };
 
-  const driveFollowRef = useRef<(node: HTMLElement, now?: number) => void>(() => undefined);
+  const driveFollowRef = useRef<(node: HTMLElement, now?: number) => void>(
+    requestOlderIfUnderfilled as (node: HTMLElement, now?: number) => void,
+  );
   const driveFollow = useCallback(
     (node: HTMLElement, nowMs?: number) => {
       if (!pinnedRef.current || hasNewerRef.current) {
@@ -739,19 +1428,41 @@ export function MessageTimeline({
           : typeof performance !== "undefined"
             ? performance.now()
             : Date.now();
-      const previousHeight = followRef.current.lastHeight;
+      let previousHeight = followRef.current.lastHeight;
+      const previousObservedHeight = lastScrollHeightRef.current;
+      if (
+        contentShrinkBaselineRef.current &&
+        previousObservedHeight > 0 &&
+        node.scrollHeight > previousObservedHeight
+      ) {
+        // A reversal ends the collapse sequence. If it remains below the held
+        // baseline, adopt the recovered height; if it grew beyond the baseline,
+        // leave that baseline for tipFollowStep to observe as real growth.
+        contentShrinkBaselineRef.current = null;
+        if (node.scrollHeight < previousHeight) {
+          followRef.current = {
+            ...followRef.current,
+            lastHeight: node.scrollHeight,
+            cameraTop: null,
+          };
+          previousHeight = node.scrollHeight;
+        }
+      }
+      const shrinkObservation = tipFollowObserveContentShrink(
+        contentShrinkBaselineRef.current,
+        previousHeight,
+        lastScrollTopRef.current,
+        node.scrollHeight,
+        node.clientHeight,
+      );
+      contentShrinkBaselineRef.current = shrinkObservation.baseline;
       // 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) {
-        let nextTop = tipFollowCompensateShrink(
-          lastScrollTopRef.current,
-          previousHeight,
-          node.scrollHeight,
-          node.clientHeight,
-        );
+      if (shrinkObservation.compensatedScrollTop !== null) {
+        let nextTop = shrinkObservation.compensatedScrollTop;
         // A chrome/composer dock can land on the same frame as a settle-fold
         // (the "turn blocked" moment). Compensate BOTH in one write — adopting
         // the shrunk clientHeight below without gluing left the chrome height
@@ -776,7 +1487,7 @@ export function MessageTimeline({
           // A direct glue write re-based the camera — drop any stale fraction.
           cameraTop: null,
         };
-        if (followFrameRef.current === null) {
+        if (followFrameRef.current == null) {
           followFrameRef.current = requestFrame((frameNow) => {
             followFrameRef.current = null;
             const current = scrollRef.current;
@@ -787,15 +1498,6 @@ export function MessageTimeline({
         }
         return;
       }
-      // Sub-eps height noise: adopt height without moving the camera. Do NOT
-      // adopt clientHeight here — tipFollowStep (next line) owns that baseline
-      // and must still see a same-frame viewport shrink to glue it.
-      if (previousHeight > 0 && node.scrollHeight < previousHeight) {
-        followRef.current = {
-          ...followRef.current,
-          lastHeight: node.scrollHeight,
-        };
-      }
       const result = tipFollowStep(followRef.current, {
         scrollTop: node.scrollTop,
         scrollHeight: node.scrollHeight,
@@ -808,9 +1510,13 @@ export function MessageTimeline({
       followRef.current = result.state;
       writeScrollTop(node, result.scrollTop);
       syncScrollBaseline(node);
+      applyCanSkipTipCatchup(
+        result.state.running &&
+          maxScrollOf(node) - node.scrollTop >= JUMP_TO_LATEST_CATCHUP_DEBT_PX,
+      );
       if (result.state.running) {
         cancelLeaveFallback();
-        if (followFrameRef.current === null) {
+        if (followFrameRef.current == null) {
           followFrameRef.current = requestFrame((frameNow) => {
             followFrameRef.current = null;
             const current = scrollRef.current;
@@ -819,12 +1525,12 @@ export function MessageTimeline({
             }
           });
         }
-      } else if (followFrameRef.current !== null) {
+      } else if (followFrameRef.current != null) {
         cancelFrame(followFrameRef.current);
         followFrameRef.current = null;
       }
     },
-    [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
+    [applyCanSkipTipCatchup, cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
   );
   driveFollowRef.current = driveFollow;
 
@@ -842,12 +1548,80 @@ export function MessageTimeline({
       return;
     }
     const previousFirstItemId = previousFirstItemIdRef.current;
-    const previousGroupKeyByItemId = groupKeyByItemIdRef.current;
-    const previousGroupOffsetByKey = groupOffsetByKeyRef.current;
+    const previousFirstItemGroupKey = firstItemGroupKeyRef.current;
+    const previousFirstItemGroupOffsetTop = firstItemGroupOffsetTopRef.current;
+    const previousItemContentTop = firstItemContentTopRef.current;
     const previousScrollTop = lastScrollTopRef.current;
-    const firstItemChanged = previousFirstItemId !== null && firstItemId !== previousFirstItemId;
-    const prepended =
-      firstItemChanged && resolvedItems.some((item) => item.id === previousFirstItemId);
+    const previousMaxScroll = lastMaxScrollRef.current;
+    const wasAtLiveTailBeforeCommit =
+      previousMaxScroll <= 1 ||
+      previousMaxScroll - previousScrollTop < Math.min(PIN_THRESHOLD_PX, previousMaxScroll);
+    const firstItemChanged = !!previousFirstItemId && firstItemId !== previousFirstItemId;
+    const sourceChanged = olderBoundaryKey !== previousSourceBoundaryRef.current;
+    const retainedSource =
+      sourceItems?.some((item) => previousSourceIdsRef.current.has(item.id)) ?? false;
+    const prepended = sourceChanged && retainedSource;
+    previousSourceBoundaryRef.current = olderBoundaryKey;
+    previousSourceIdsRef.current = new Set(sourceItems?.map((item) => item.id));
+    const readingAnchor = readingAnchorRef.current;
+    readingAnchorRef.current = null;
+    const settlement = settlementRef.current;
+    settlementRef.current = null;
+    const attempt = olderLoadAttemptRef.current;
+    const committedZeroOverlapOlderReplacement = !!(
+      attempt?.[2]?.committed &&
+      sourceChanged &&
+      !retainedSource
+    );
+    const restorePrependAnchor = () => {
+      const correction = readingAnchor && timelineAnchorCorrection(node, readingAnchor);
+      if (correction != null) {
+        if (Math.abs(correction) > 1) writeScrollTop(node, node.scrollTop + correction);
+        return;
+      }
+      // Keep the reader on the same retained rows. Prefer the exact first-item
+      // content coordinate (needed when a prepend merges inside one group),
+      // then the retained group offset, then scrollHeight as a final fallback.
+      // If native anchoring already applied the same shift, leave scrollTop.
+      let delta: number | null = null;
+      if (previousFirstItemId && previousItemContentTop != null) {
+        const itemEl = node.querySelector(
+          `[data-og-item="${cssEscapeAttribute(previousFirstItemId)}"]`,
+        );
+        if (itemEl instanceof HTMLElement) {
+          const scrollerTop = node.getBoundingClientRect().top;
+          const currentItemTop = itemEl.getBoundingClientRect().top - scrollerTop + node.scrollTop;
+          delta = Math.round(currentItemTop - previousItemContentTop);
+        }
+      }
+      const anchorKey = previousFirstItemGroupKey;
+      const anchorEl =
+        anchorKey != null
+          ? node.querySelector(`[data-og-group-key="${cssEscapeAttribute(anchorKey)}"]`)
+          : null;
+      if (
+        delta == null &&
+        anchorEl instanceof HTMLElement &&
+        previousFirstItemGroupOffsetTop != null
+      ) {
+        const moved = Math.round(anchorEl.offsetTop - previousFirstItemGroupOffsetTop);
+        if (moved) {
+          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) {
+          writeScrollTop(node, expected);
+        }
+      }
+    };
     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).
@@ -863,6 +1637,64 @@ export function MessageTimeline({
         applyPinned(true);
         snapToBottom(node);
       }
+    } else if (committedZeroOverlapOlderReplacement) {
+      // An oldest-directed bounded page can replace every previously mounted
+      // row. Its receipt is the only causal proof that this is backward
+      // progress rather than live-tail forward eviction. Anchor at the bottom
+      // seam before recording this window's scroll baselines so an unpinned
+      // reader stays adjacent to the history they were reading.
+      clearPendingReaderLeave();
+      stopFollow();
+      writeScrollTop(node, maxScrollOf(node));
+      if (attempt?.[1] === 1 && pinnedRef.current) {
+        applyPinned(false);
+      }
+    } else if (prepended) {
+      const olderAttemptState = olderLoadAttemptRef.current?.[1];
+      const underfillOwned =
+        !!olderLoadAttemptRef.current &&
+        olderAttemptState !== 1 &&
+        olderAttemptState !== 2 &&
+        olderAttemptState !== 3;
+      if (
+        autoFollow &&
+        pinnedRef.current &&
+        !hasNewer &&
+        !pendingReaderLeaveRef.current &&
+        (wasAtLiveTailBeforeCommit || underfillOwned)
+      ) {
+        // Still following the live tip: underfill, or a prefetch the reader
+        // started and then returned from. Park at the new tip. A stale pin
+        // while they are actually up in a short window (gap is not inside
+        // PIN_THRESHOLD of maxScroll, so wasAtLiveTail is false) restores.
+        clearPendingReaderLeave();
+        snapToBottom(node);
+      } else {
+        restorePrependAnchor();
+        if (autoFollow && pinnedRef.current && !hasNewer) {
+          // Geometry or a pending extension/programmatic leave proves the
+          // reader was browsing history even if the pin ref has not settled.
+          stopFollow();
+          clearPendingReaderLeave();
+          applyPinned(false);
+        }
+      }
+    } else if (!pinnedRef.current && readingAnchor && readableTurns) {
+      // A live work row moves behind newly streamed prose. Correct only the
+      // residual movement native anchoring did not absorb, using the reader's
+      // retained paragraph/control rather than the moving row's outer box.
+      const correction = timelineAnchorCorrection(node, readingAnchor);
+      if (correction !== null && Math.abs(correction) > 1) {
+        writeScrollTop(node, node.scrollTop + correction);
+      }
+      const focused = readingAnchor.find((anchor) => anchor.focused)?.element;
+      if (
+        focused &&
+        node.contains(focused) &&
+        node.ownerDocument.activeElement === node.ownerDocument.body
+      ) {
+        focused.focus({ preventScroll: true });
+      }
     } else if (autoFollow && pinnedRef.current && !hasNewer) {
       // Load/remount (still hidden): hard-park. Live tip after reveal: ease.
       // Pending unarmed leave: tip *growth* must not yank (Vimium during stream).
@@ -877,83 +1709,94 @@ export function MessageTimeline({
       } 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
-      // 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) {
-          writeScrollTop(node, 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";
+    if (prepended && !pinnedRef.current && node.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
+      rearmOlderPrefetchAfterLeavingTop(node);
     }
+    scheduleQuestionNav();
     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);
+    // offsetTop queries are O(groups); skip while pinned at the live tip
+    // (every stream token used to remeasure the whole timeline).
+    firstItemGroupKeyRef.current = groups[0]?.key ?? null;
+    const needOffsets =
+      prepended ||
+      firstItemChanged ||
+      !pinnedRef.current ||
+      hasNewer ||
+      firstItemContentTopRef.current == null;
     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;
+      const committedFirstGroupKey = firstItemGroupKeyRef.current;
+      const firstGroupEl = committedFirstGroupKey
+        ? node.querySelector(`[data-og-group-key="${cssEscapeAttribute(committedFirstGroupKey)}"]`)
+        : null;
+      firstItemGroupOffsetTopRef.current =
+        firstGroupEl instanceof HTMLElement ? firstGroupEl.offsetTop : null;
+      const firstItemEl = firstItemId
+        ? node.querySelector(`[data-og-item="${cssEscapeAttribute(firstItemId)}"]`)
+        : null;
+      firstItemContentTopRef.current =
+        firstItemId && firstItemEl instanceof HTMLElement
+          ? firstItemEl.getBoundingClientRect().top -
+            node.getBoundingClientRect().top +
+            node.scrollTop
+          : null;
+    }
+
+    if (settlement) settlementAnimationRef.current = animateTimelineSettlement(settlement);
+
+    // Promise settlement is not itself permission to retry. A receipt-marked
+    // accepted page retires its exact owner on this commit even when projection
+    // is empty or merges into the same first item. Without that mark, retain
+    // the compatibility fallback: a retained prior boundary proves prepend,
+    // while a missing prior boundary is forward eviction and merely rebases.
+    if (!attempt) {
+      return;
+    }
+    if (!attempt[2]?.committed && attempt[0] === olderBoundaryKey) {
+      return;
+    }
+    if (
+      !attempt[2]?.committed &&
+      attempt[0] &&
+      !sourceItems?.find((entry) => entry.id === attempt[0])
+    ) {
+      attempt[0] = olderBoundaryKey;
+      return;
+    }
+    if (!attempt[1] || !hasOlder) {
+      setUnderfillSettledAttempt((olderLoadAttemptRef.current = null));
+      return;
+    }
+    // Boundary progress retires the request owner. A late settlement from
+    // that completed prefetch cannot mutate the new window's cooldown owner.
+    olderLoadAttemptRef.current = [olderBoundaryKey, 2];
+    // Bound automatic work, but let continued upward input replenish demand.
+    // Only a committed first-party receipt proves that another page is safe.
+    if (
+      attempt[2]?.committed &&
+      !pinnedRef.current &&
+      hasOlder &&
+      node.scrollTop <= OLDER_PREFETCH_MARGIN_PX &&
+      olderPageBudgetRef.current > 0
+    ) {
+      olderPageBudgetRef.current -= 1;
+      olderLoadAttemptRef.current = null;
+      setOlderDemand((value) => value + 1);
     }
+    rearmOlderPrefetchAfterLeavingTop(node);
+    requestOlderIfUnderfilled(node);
   });
 
   // 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.
+  // live tip-follow law used once `revealed` is true.
   useLayoutEffect(() => {
-    if (revealed || allGroups.length === 0) {
+    if (revealed || !allGroups.length) {
       return;
     }
     let cancelled = false;
@@ -981,7 +1824,7 @@ export function MessageTimeline({
     return () => {
       cancelled = true;
       cancelFrame(frame1);
-      if (frame2 !== 0) {
+      if (frame2) {
         cancelFrame(frame2);
       }
     };
@@ -1000,7 +1843,6 @@ export function MessageTimeline({
       olderPrefetchArmedRef.current = false;
       setOlderPrefetchArmed(false);
     }
-    olderLoadGateRef.current = "armed";
     wantPinRef.current = false;
     pendingJumpToStartRef.current = false;
     previousFirstItemIdRef.current = null;
@@ -1009,14 +1851,27 @@ export function MessageTimeline({
     lastMaxScrollRef.current = 0;
     lastScrollHeightRef.current = 0;
     lastClientHeightRef.current = 0;
-    groupKeyByItemIdRef.current = new Map();
-    groupOffsetByKeyRef.current = new Map();
+    firstItemGroupKeyRef.current = null;
+    firstItemGroupOffsetTopRef.current = null;
+    firstItemContentTopRef.current = null;
     foldMemoryRef.current.clear();
     userMessageDisclosureMemoryRef.current.clear();
     disclosureKeepsUnpinnedRef.current = false;
+    clearReaderIntent();
+    contentShrinkBaselineRef.current = null;
     seenActivityIdsRef.current.clear();
     applyPinned(true);
-  }, [allGroups.length, revealed, applyPinned]);
+  }, [allGroups.length, revealed, applyPinned, clearReaderIntent]);
+
+  // Parent commits cover the initial/history-loading cases. Disclosure state
+  // changes are child-local, so the ResizeObserver below owns dynamic collapse
+  // and expansion after mount.
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (node) {
+      requestOlderIfUnderfilled(node);
+    }
+  });
 
   // Clear the bulk-paint marker a frame after it renders, so rows appended
   // live (streams, new turns) animate exactly as before.
@@ -1052,21 +1907,61 @@ export function MessageTimeline({
       (entries) => {
         const intersecting = entries.some((entry) => entry.isIntersecting);
         if (!intersecting) {
-          // Left the top band — next approach may load once.
-          olderLoadGateRef.current = "armed";
+          // Left the top band. A settled ordinary prefetch releases its exact
+          // owner here; a still-pending request remains cooling so a quick
+          // leave/re-enter cannot overlap it.
+          const attempt = olderLoadAttemptRef.current;
+          if (attempt?.[1] === 2 || attempt?.[1] === 3) {
+            olderLoadAttemptRef.current = null;
+          }
           return;
         }
-        if (olderLoadGateRef.current !== "armed") {
+        // Both automatic underfill and ordinary prefetch use one boundary
+        // owner. In particular, live growth cannot arm a second sentinel load
+        // while the short-window request that preceded it is still pending.
+        if (olderLoadAttemptRef.current) {
           return;
         }
-        olderLoadGateRef.current = "cooling";
-        onLoadOlder();
+        const attempt: OlderLoadAttempt = (olderLoadAttemptRef.current = [olderBoundaryKey, 1]);
+        const noProgress = () => {
+          if (!scrollRef.current || olderLoadAttemptRef.current !== attempt) {
+            return;
+          }
+          attempt[1] = 3;
+          if (root.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
+            olderLoadAttemptRef.current = null;
+          } else if (maxScrollOf(root) <= 1) {
+            attempt[1] = 0;
+            setUnderfillSettledAttempt(attempt);
+          }
+        };
+        // Preserve legacy fire-and-forget top-band retries: the callback has
+        // synchronously returned, but this visit remains cooling until exit.
+        // Only rejection/throw/exact `false` is a no-progress receipt. Other
+        // fulfillment retains the pending owner until boundary commit;
+        // otherwise a delayed prepend could overlap a same-boundary request.
+        if (
+          !invokeOlderLoad(onLoadOlder, noProgress, attempt) &&
+          olderLoadAttemptRef.current === attempt
+        ) {
+          olderLoadAttemptRef.current[1] = 2;
+          requestOlderIfUnderfilled(root);
+        }
       },
       { root, rootMargin: OLDER_PREFETCH_ROOT_MARGIN },
     );
     observer.observe(target);
     return () => observer.disconnect();
-  }, [olderPrefetchArmed, hasOlder, loadingOlder, onLoadOlder, firstGroupKey]);
+  }, [
+    firstGroupKey,
+    hasOlder,
+    loadingOlder,
+    olderBoundaryKey,
+    olderPrefetchArmed,
+    olderDemand,
+    onLoadOlder,
+    requestOlderIfUnderfilled,
+  ]);
 
   // 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.
@@ -1085,15 +1980,17 @@ export function MessageTimeline({
     }
     const observer = new IntersectionObserver(
       (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
-          onLoadNewer();
+        // An underfilled history window has both sentinels visible. Advancing
+        // it automatically would undo an explicit older-page navigation.
+        if (maxScrollOf(root) > 1 && entries.some((entry) => entry.isIntersecting)) {
+          requestNewer();
         }
       },
       { root, rootMargin: "0px 0px 1200px 0px" },
     );
     observer.observe(target);
     return () => observer.disconnect();
-  }, [hasNewer, loadingNewer, onLoadNewer, firstGroupKey]);
+  }, [hasNewer, loadingNewer, onLoadNewer, requestNewer, firstGroupKey]);
 
   // Late layout that React commits cannot see (images decoding, fonts, code
   // blocks) grows content without a commit. While pinned, soft-follow the tip;
@@ -1106,7 +2003,7 @@ export function MessageTimeline({
       return;
     }
     const observer = new ResizeObserver(() => {
-      if (resizeFollowRafRef.current !== null) {
+      if (resizeFollowRafRef.current != null) {
         return;
       }
       resizeFollowRafRef.current = requestFrame(() => {
@@ -1115,6 +2012,10 @@ export function MessageTimeline({
         if (!current) {
           return;
         }
+        // A viewport that shrank below the pill's minimum hides it now, not
+        // on the next scroll.
+        if (questionNavMinViewportRef.current > 0) scheduleQuestionNavRef.current();
+        requestOlderIfUnderfilled(current);
         if (!autoFollow || !pinnedRef.current || hasNewerRef.current) {
           return;
         }
@@ -1132,12 +2033,12 @@ export function MessageTimeline({
     observer.observe(node);
     return () => {
       observer.disconnect();
-      if (resizeFollowRafRef.current !== null) {
+      if (resizeFollowRafRef.current != null) {
         cancelFrame(resizeFollowRafRef.current);
         resizeFollowRafRef.current = null;
       }
     };
-  }, [autoFollow, driveFollow, snapToBottom]);
+  }, [autoFollow, driveFollow, requestOlderIfUnderfilled, 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
@@ -1145,6 +2046,8 @@ export function MessageTimeline({
   // at what just became the live bottom — paging forward to the tip must not
   // strand them unpinned watching new content grow below.
   useEffect(() => {
+    // Closing find is paint-only; it must not trigger this history-to-tip rule.
+    if (searchTargetRef.current) return;
     if (hasNewer) {
       stopFollow();
       applyPinned(false);
@@ -1167,6 +2070,15 @@ export function MessageTimeline({
     }
   }, [hasNewer, autoFollow, applyPinned, snapToBottom, stopFollow]);
 
+  // After the scroll authority above has settled each commit, record whether
+  // the reader is away from the tip (content can land below an unpinned
+  // reader without any scroll event).
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- Deliberately runs after every commit.
+  useLayoutEffect(() => {
+    const node = scrollRef.current;
+    if (node && !pinnedRef.current) setAwayFromTip(!isNearBottom(node));
+  });
+
   // 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.
@@ -1175,6 +2087,9 @@ export function MessageTimeline({
     if (!node) {
       return;
     }
+    // Only an unpinned reader's distance matters for the jump.
+    if (!pinnedRef.current) setAwayFromTip(!isNearBottom(node));
+    scheduleQuestionNav();
     const previousTop = lastScrollTopRef.current;
     const previousMaxScroll = lastMaxScrollRef.current;
     const nextTop = node.scrollTop;
@@ -1183,6 +2098,16 @@ export function MessageTimeline({
     const readerUp = readerScrollUpPx(previousTop, nextTop, previousMaxScroll, nextMaxScroll);
     const maxFell = nextMaxScroll < previousMaxScroll - 1;
     const readerArmed = readerIntentArmRef.current;
+    const readerIntentStart = readerIntentStartRef.current;
+    const cumulativeReaderUp =
+      readerArmed && readerIntentStart
+        ? readerScrollUpPx(
+            readerIntentStart.scrollTop,
+            nextTop,
+            readerIntentStart.maxScroll,
+            nextMaxScroll,
+          )
+        : readerUp;
     const heightShrunk =
       followRef.current.lastHeight > 0 &&
       nextHeight < followRef.current.lastHeight - TIP_FOLLOW_SHRINK_EPS_PX;
@@ -1198,6 +2123,19 @@ export function MessageTimeline({
       return;
     }
 
+    if (programmatic && !pinnedRef.current) {
+      // Restore/camera writes while reading history are not a return to the tip.
+      // Still expire a pending Jump-to-latest latch: the in-window jump itself
+      // is a programmatic snap, and a later reader scroll-away can arrive
+      // before that echo is consumed. Skipping this left the latch armed and
+      // snapped the reader when hasNewer later flipped false.
+      syncScrollBaseline(node);
+      if (wantPinRef.current && !isNearBottom(node)) {
+        wantPinRef.current = false;
+      }
+      return;
+    }
+
     if (autoFollow && pinnedRef.current && !hasNewer) {
       // Fold / composer / SessionChrome: viewport shrink raises maxScroll without
       // growing content. Must hit tipFollow before we adopt the new clientHeight
@@ -1208,7 +2146,7 @@ export function MessageTimeline({
       // Fold / composer content shrink: compensate before baseline sync so
       // driveFollow still sees the pre-shrink scrollTop (avoid double-subtract).
       if (heightShrunk || maxFell || viewportShrunk) {
-        readerIntentArmRef.current = false;
+        clearReaderIntent();
         clearPendingReaderLeave();
         driveFollow(node);
         return;
@@ -1230,15 +2168,14 @@ export function MessageTimeline({
         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;
-        releasePinFromReader(node);
-        if (olderLoadGateRef.current === "cooling" && node.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
-          olderLoadGateRef.current = "armed";
-        }
+      if (readerArmed && cumulativeReaderUp > TIP_FOLLOW_READER_UP_EPS_PX && !nearBottomPinned) {
+        clearReaderIntent();
+        requestEarlierFromReader();
+        rearmOlderPrefetchAfterLeavingTop(node);
         return;
       }
-      // Tip grew under a still viewport (no reader-up): ease back to the tip.
+      // Tip grew under a still viewport (no reader-up): track the new growth
+      // immediately and ease only any debt that already existed.
       // Reader/extension scroll-up in progress: do not yank — scrollend decides.
       // Near-bottom with tipDebt≈0 stays the quiet path (do not broaden follow
       // inside PIN_THRESHOLD — that fights small intentional scroll-ups).
@@ -1258,15 +2195,46 @@ export function MessageTimeline({
     }
 
     syncScrollBaseline(node);
+    if (programmatic) {
+      // Anchor restoration is never permission to resume tip-follow.
+      return;
+    }
     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.
+    // Re-pin only when the reader moved toward/at the tip. Prepend restore
+    // and overflow-anchor raise scrollTop by roughly the same amount as
+    // maxScroll; treating that as a scroll-down
+    // re-pinned a compact-tail history reader (their preserved gap falls
+    // inside PIN_THRESHOLD once the window is tall) and snapped them back.
+    // A commit may already have adopted this scroll position into the layout
+    // baseline. Explicit wheel/key/pointer intent retains its own start so
+    // returning to the tip still re-pins after that interleaving.
+    // Passive wheel handlers may run after compositor scrolling; retain the
+    // earlier layout baseline when it still contains that reader movement.
+    const returnStart =
+      readerIntentStart && readerIntentStart.scrollTop <= previousTop ? readerIntentStart : null;
+    const inserted = Math.max(0, nextMaxScroll - (returnStart?.maxScroll ?? previousMaxScroll));
+    const towardTip = nextTop - (returnStart?.scrollTop ?? previousTop) - inserted;
+    // Explicit intent may reach the exact live bottom despite intervening
+    // streaming growth. Keep subtracting that growth: native anchoring alone
+    // conserves the gap and must never qualify as reader movement.
+    const explicitReturnToBottom = returnStart !== null && nextMaxScroll - nextTop <= 1;
     const nextPinned =
-      !hasNewer && nearBottom && nextTop >= previousTop - TIP_FOLLOW_READER_UP_EPS_PX;
+      !hasNewer && nearBottom && towardTip > 0.5 && (inserted <= 1 || explicitReturnToBottom);
     if (!nextPinned) {
       stopFollow();
     }
+    const focused = node.ownerDocument.activeElement;
+    if (
+      nextPinned &&
+      focused instanceof HTMLElement &&
+      focused.hasAttribute("data-og-prompt") &&
+      node.contains(focused)
+    ) {
+      // Question navigation focuses its destination. Returning to the live
+      // tip releases that stale reader ownership before the commit snapshot.
+      node.focus({ preventScroll: true });
+    }
     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
@@ -1277,17 +2245,22 @@ export function MessageTimeline({
       wantPinRef.current = false;
     }
     if (nextPinned) {
+      clearReaderIntent();
       return;
     }
+    if (readerIntentStart) {
+      // This scroll already accounted for the gesture's movement. Retain a
+      // fresh start for continuous input across the next commit, not stale
+      // movement that could turn a later native clamp into a return to tip.
+      readerIntentStartRef.current = { scrollTop: nextTop, maxScroll: nextMaxScroll };
+    }
     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";
-    }
+    rearmOlderPrefetchAfterLeavingTop(node);
   };
 
   const onScrollEnd = () => {
@@ -1296,6 +2269,9 @@ export function MessageTimeline({
       return;
     }
     cancelLeaveFallback();
+    // Engines can emit scrollend between tiny pointer steps. Keep the pinned
+    // gesture's cumulative leave budget until it actually leaves the tip.
+    if (!pinnedRef.current || !readerIntentArmRef.current) clearReaderIntent();
     if (disclosureKeepsUnpinnedRef.current) {
       programmaticScrollRef.current = 0;
       stopFollow();
@@ -1311,298 +2287,471 @@ export function MessageTimeline({
     releasePinAfterScrollSettled(node);
   };
 
-  return (
-    <LightboxProvider>
-      <FoldMemoryProvider value={foldMemoryRef.current}>
-        <SeenActivityIdsProvider value={seenActivityIdsRef.current}>
-          <TimelineComputeLabelProvider value={computeLabel ?? null}>
-            <EntranceAnimationProvider value={!bulkRender}>
-              <TooltipProvider delayDuration={400}>
-                <div className={cn("og-root relative flex min-h-0 flex-col", className)}>
-                  {onAnnotate ? (
-                    <Suspense fallback={null}>
-                      <TimelineAnnotationSelection
-                        rootRef={scrollRef}
-                        sources={annotationSources}
-                        onAnnotate={onAnnotate}
-                      />
-                    </Suspense>
-                  ) : null}
-                  {/* Pinned: anchoring off so the tip-follow camera owns the motion.
-          Unpinned: native scroll anchoring holds the reader's place. */}
-                  <div
-                    ref={scrollRef}
-                    data-og-timeline-scroller=""
-                    data-og-bottom-follow={autoFollow && pinned && !hasNewer ? "true" : "false"}
-                    tabIndex={-1}
-                    onScroll={onScroll}
-                    onScrollEnd={onScrollEnd}
-                    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-hidden",
-                      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-og-menu 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}>
-                            <TimelineGroupRenderBoundary
-                              resetKeys={[
-                                group,
-                                renderMessageText,
-                                onOpenSession,
-                                onMemoryClick,
-                                onReconnect,
-                                resolveProviderLogo,
-                                toolRegistry,
-                                loadRetainedScreenshot,
-                                loadRetainedArtifact,
-                                loadVideoArtifactPlayback,
-                                turnSummary,
-                              ]}
-                            >
-                              <UserMessageDisclosureProvider value={userMessageDisclosureContext}>
-                                <TimelineGroupView
-                                  group={group}
-                                  renderMessageText={renderMessageText}
-                                  onOpenSession={onOpenSession}
-                                  onMemoryClick={onMemoryClick}
-                                  onReconnect={onReconnect}
-                                  resolveProviderLogo={resolveProviderLogo}
-                                  toolRegistry={toolRegistry}
-                                  loadRetainedScreenshot={loadRetainedScreenshot}
-                                  loadRetainedArtifact={loadRetainedArtifact}
-                                  loadVideoArtifactPlayback={loadVideoArtifactPlayback}
-                                  turnSummary={turnSummary}
-                                  foldLiveCluster={isAgentProgress(next)}
-                                  trailingAgentText={trailingAgentTextAfterTurn(group, next)}
-                                  contextCompactionCount={
-                                    contextCompactionCount > 0 ? contextCompactionCount : undefined
-                                  }
-                                />
-                              </UserMessageDisclosureProvider>
-                            </TimelineGroupRenderBoundary>
-                          </div>
-                        );
-                      })}
-                      {groups.length > 0 && trailingState ? (
-                        <div data-og-timeline-trailing-state="">{trailingState}</div>
-                      ) : null}
-                      {hasNewer ? (
-                        <div
-                          ref={bottomSentinelRef}
-                          data-og-bottom-sentinel=""
-                          data-og-timeline-chrome=""
-                          aria-hidden="true"
-                          className="h-px w-full"
-                        />
+  const timeline = (
+    <AllowancePresentationProvider
+      render={renderAllowanceExhausted}
+      labels={allowanceExhaustedLabels}
+    >
+      <LightboxProvider>
+        <FoldMemoryProvider value={foldMemoryRef.current}>
+          <SeenActivityIdsProvider value={seenActivityIdsRef.current}>
+            <TimelineComputeLabelProvider value={computeLabel ?? null}>
+              <EntranceAnimationProvider value={false}>
+                <TooltipProvider delayDuration={400}>
+                  <TimelineAnnotationSourceRootContext.Provider value={scrollRef}>
+                    <div
+                      className={cn("og-root relative flex min-h-0 flex-col", className)}
+                      // Sticky insets start at the scroller's padded content edge
+                      // (pt-16). Subtract exactly that padding so an expanded work
+                      // header pins flush to the scrollport. Pinning it lower left a
+                      // band of scrolling rows visible above the header, which then
+                      // looked like it floated over the middle of the timeline.
+                      style={{ "--og-work-header-top": "-4rem" } as CSSProperties}
+                    >
+                      {onAnnotate ? (
+                        <Suspense fallback={null}>
+                          <TimelineAnnotationSelection
+                            rootRef={scrollRef}
+                            sources={annotationSources}
+                            onAnnotate={onAnnotate}
+                          />
+                        </Suspense>
                       ) : null}
-                    </div>
-                  </div>
-                  <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-og-control 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-og-control 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-og-control 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={() => {
-                          disclosureKeepsUnpinnedRef.current = false;
-                          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;
-                                },
+                      {/* Pinned: anchoring off so the tip-follow camera owns the motion.
+          Unpinned: native scroll anchoring holds the reader's place. */}
+                      <div
+                        ref={scrollRef}
+                        data-og-timeline-scroller=""
+                        data-og-bottom-follow={autoFollow && pinned && !hasNewer ? "true" : "false"}
+                        tabIndex={-1}
+                        onScroll={onScroll}
+                        onScrollEnd={onScrollEnd}
+                        onWheel={onWheel}
+                        onTouchStart={(event) => {
+                          stopSettlement();
+                          const touch = event.touches.length === 1 ? event.touches[0] : undefined;
+                          touchPositionRef.current = touch
+                            ? { x: touch.clientX, y: touch.clientY }
+                            : null;
+                        }}
+                        onTouchMove={(event) => {
+                          const touch = event.touches[0];
+                          const previous = touchPositionRef.current;
+                          if (!touch || !previous || event.touches.length !== 1) {
+                            touchPositionRef.current = null;
+                            return;
+                          }
+                          const deltaX = previous.x - touch.clientX;
+                          const deltaY = previous.y - touch.clientY;
+                          if (Math.max(Math.abs(deltaX), Math.abs(deltaY)) < 4) return;
+                          touchPositionRef.current = { x: touch.clientX, y: touch.clientY };
+                          onWheel({
+                            deltaX,
+                            deltaY,
+                            target: event.target,
+                            currentTarget: event.currentTarget,
+                          });
+                        }}
+                        onTouchEnd={() => {
+                          touchPositionRef.current = null;
+                        }}
+                        onTouchCancel={() => {
+                          touchPositionRef.current = null;
+                        }}
+                        onClickCapture={(event) => {
+                          const target =
+                            event.target instanceof Element
+                              ? event.target.closest("button[aria-expanded]")
+                              : null;
+                          if (target) {
+                            if (target.hasAttribute("data-og-work-header")) {
+                              releaseProgress(
+                                target
+                                  .closest("[data-og-group-key]")
+                                  ?.getAttribute("data-og-group-key") ?? null,
                               );
-                            } 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;
+                            releasePinFromReader();
+                            disclosureKeepsUnpinnedRef.current = true;
                           }
-                          const node = scrollRef.current;
-                          if (node) {
-                            applyPinned(true);
-                            snapToBottom(node);
+                        }}
+                        onFocusCapture={(event) => {
+                          if (readableTurns && event.target !== event.currentTarget) {
+                            stopSettlement();
+                            releasePinFromReader();
+                            disclosureKeepsUnpinnedRef.current = true;
                           }
                         }}
+                        onPointerDown={onPointerDown}
+                        onKeyDown={onKeyDown}
+                        style={
+                          groups.length > 0 && !revealed ? { visibility: "hidden" } : undefined
+                        }
                         className={cn(
-                          "absolute inset-x-0 bottom-4 mx-auto w-fit",
-                          "inline-flex items-center gap-1.5 rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1.5",
-                          "text-og-control font-medium text-og-fg shadow-og-md backdrop-blur",
-                          "hover:border-og-border-strong",
+                          // 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 pt-16 pb-6 sm:px-6 outline-hidden",
+                          autoFollow && pinned && !hasNewer
+                            ? "[overflow-anchor:none]"
+                            : "[overflow-anchor:auto]",
                         )}
                       >
-                        <ArrowDownIcon className="size-3.5" />
-                        Jump to latest
-                      </motion.button>
-                    ) : null}
-                  </AnimatePresence>
-                </div>
-              </TooltipProvider>
-            </EntranceAnimationProvider>
-          </TimelineComputeLabelProvider>
-        </SeenActivityIdsProvider>
-      </FoldMemoryProvider>
-    </LightboxProvider>
+                        <TimelineBeforeLayout
+                          capture={() => {
+                            if (readableTurns && timelineHasReader(scrollRef.current)) {
+                              releasePinFromReader();
+                            }
+                            readingAnchorRef.current =
+                              !pinnedRef.current && scrollRef.current
+                                ? captureTimelineAnchor(scrollRef.current)
+                                : null;
+                            settlementRef.current =
+                              readableTurns &&
+                              autoFollow &&
+                              pinnedRef.current &&
+                              revealedRef.current &&
+                              !hasNewer &&
+                              !pendingReaderLeaveRef.current &&
+                              !disclosureKeepsUnpinnedRef.current &&
+                              !prefersReducedMotion() &&
+                              scrollRef.current
+                                ? captureTimelineSettlement(scrollRef.current, groups)
+                                : null;
+                          }}
+                        >
+                          <div className="relative mx-auto flex w-full max-w-3xl flex-col gap-5">
+                            <AnimatePresence>
+                              {loadingOlder ||
+                              loadingOldest ||
+                              (hasOlder && onJumpToStart && olderPrefetchArmed) ||
+                              underfillRetryReady ? (
+                                // Reserved top gutter: controls scroll with history and cannot
+                                // cover a disclosure. Visibility never changes content height.
+                                <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="pointer-events-none absolute inset-x-0 -top-11 z-10 flex justify-center"
+                                >
+                                  {loadingOlder || loadingOldest ? (
+                                    <span className={LOADING_CHIP_CLASS}>
+                                      <span className="og-shimmer-text">
+                                        {loadingOldest
+                                          ? "Jumping to start…"
+                                          : "Loading earlier activity…"}
+                                      </span>
+                                    </span>
+                                  ) : null}
+                                  {hasOlder &&
+                                  !loadingOlder &&
+                                  !loadingOldest &&
+                                  (underfillRetryReady || onJumpToStart) ? (
+                                    <button
+                                      type="button"
+                                      data-og-retry={underfillRetryReady || undefined}
+                                      data-og-jump-to-start={!underfillRetryReady || undefined}
+                                      onClick={() => {
+                                        const node = scrollRef.current;
+                                        if (underfillRetryReady) {
+                                          if (node && underfillRetryReadyRef.current) {
+                                            // AnimatePresence retains this handler during
+                                            // exit. Current authorization plus the exact
+                                            // attempt check prevent stale dispatch.
+                                            requestOlderIfUnderfilled(
+                                              node,
+                                              underfillSettledAttempt!,
+                                            );
+                                          }
+                                          return;
+                                        }
+                                        applyPinned(false);
+                                        pendingJumpToStartRef.current = true;
+                                        const seq = ++jumpToStartSeqRef.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="pointer-events-auto rounded-full border border-og-border px-3 py-1.5 text-og-control"
+                                    >
+                                      {underfillRetryReady
+                                        ? underfillSettledAttempt?.[2]?.tailPreserved
+                                          ? "Load earlier activity"
+                                          : "Retry earlier activity"
+                                        : "Jump to start"}
+                                    </button>
+                                  ) : null}
+                                </motion.div>
+                              ) : null}
+                            </AnimatePresence>
+                            {!groups.length
+                              ? (emptyState ?? (
+                                  <p className="py-10 text-center text-og-menu 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).
+                              // End at the scroll origin above the pt-16 gutter so the
+                              // observer and scrollTop cooldown share the same 400px band.
+                              <div
+                                ref={topSentinelRef}
+                                data-og-top-sentinel=""
+                                data-og-timeline-chrome=""
+                                aria-hidden="true"
+                                className="pointer-events-none absolute inset-x-0 -top-16 h-px -translate-y-full"
+                              />
+                            ) : null}
+                            {groups.map(({ group, key, entranceEnabled }, index) => {
+                              return (
+                                <TimelineSearchRevealContext.Provider
+                                  key={key}
+                                  value={
+                                    searchItem &&
+                                    timelineGroupItemIds(group).includes(searchItem.id)
+                                      ? searchRevealKey
+                                      : null
+                                  }
+                                >
+                                  <TimelineGroupEntry
+                                    groupKey={key}
+                                    group={group}
+                                    nextGroup={groups[index + 1]?.group}
+                                    startupDismissed={
+                                      group.kind === "activity" &&
+                                      group.items.some(
+                                        (item) => item.turnId && turnsWithOutput.has(item.turnId),
+                                      )
+                                    }
+                                    entranceEnabled={entranceEnabled}
+                                    liveEntranceEnabled={
+                                      group.kind === "activity" ? !bulkRender : undefined
+                                    }
+                                    context={timelineGroupEntryContext}
+                                  />
+                                </TimelineSearchRevealContext.Provider>
+                              );
+                            })}
+                            {groups.length > 0 && trailingState ? (
+                              <div data-og-timeline-trailing-state="">{trailingState}</div>
+                            ) : null}
+                            {hasNewer && newerFailure?.key === newerBoundaryKey ? (
+                              <div
+                                data-og-newer-error=""
+                                className="flex flex-col items-center gap-2 px-4 py-3 text-center text-og-menu text-og-fg-muted"
+                              >
+                                <p role="status" className="max-w-prose [overflow-wrap:anywhere]">
+                                  Couldn’t load later activity. {newerFailure.message}
+                                </p>
+                                <button
+                                  ref={newerRetryButtonRef}
+                                  type="button"
+                                  data-og-retry-newer=""
+                                  className="min-h-11 rounded-og-md border border-og-border px-3 py-2 text-og-fg hover:bg-og-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent"
+                                  aria-disabled={loadingNewer || newerRetryPending}
+                                  aria-busy={newerRetryPending}
+                                  onClick={() => requestNewer(true)}
+                                >
+                                  {newerRetryPending
+                                    ? "Retrying later activity…"
+                                    : "Retry later activity"}
+                                </button>
+                              </div>
+                            ) : null}
+                            {hasNewer ? (
+                              <div
+                                ref={bottomSentinelRef}
+                                data-og-bottom-sentinel=""
+                                data-og-timeline-chrome=""
+                                aria-hidden="true"
+                                className="h-px w-full"
+                              />
+                            ) : null}
+                          </div>
+                        </TimelineBeforeLayout>
+                      </div>
+                      {draftAnnotations && draftAnnotations.length > 0 ? (
+                        <Suspense fallback={null}>
+                          <TimelineAnnotationMarkers
+                            rootRef={scrollRef}
+                            annotations={draftAnnotations}
+                            onSelect={onDraftAnnotationSelect}
+                          />
+                        </Suspense>
+                      ) : null}
+
+                      <div
+                        data-og-timeline-nav="top"
+                        className={cn(
+                          "pointer-events-none absolute inset-x-0 z-10 flex justify-center",
+                          questionNav?.belowHeader ? "top-10 pointer-coarse:top-13" : "top-3",
+                        )}
+                      >
+                        <AnimatePresence>
+                          {questionNav ? (
+                            <motion.button
+                              key="question-nav"
+                              {...NAV_FADE}
+                              type="button"
+                              data-og-question-nav=""
+                              data-og-jump-to-question=""
+                              title="Back to your message"
+                              onClick={() => jumpToQuestion(questionNav.key)}
+                              className={NAV_BUTTON_CLASS}
+                            >
+                              <ArrowUpIcon aria-hidden className="size-4" />
+                              <span className="sr-only">Back to your message</span>
+                            </motion.button>
+                          ) : null}
+                        </AnimatePresence>
+                      </div>
+                      <div
+                        data-og-timeline-nav="bottom"
+                        className="pointer-events-none absolute inset-x-0 bottom-3 z-10 flex flex-col items-center gap-2"
+                      >
+                        <AnimatePresence>
+                          {loadingNewer ? (
+                            <motion.div
+                              key="loading-newer"
+                              {...NAV_FADE}
+                              data-og-loading-newer=""
+                              aria-live="polite"
+                              className="flex max-w-full justify-center"
+                            >
+                              <span className={LOADING_CHIP_CLASS}>
+                                <span className="og-shimmer-text">Loading later activity…</span>
+                              </span>
+                            </motion.div>
+                          ) : null}
+                          {jumpPillShown ? (
+                            <motion.button
+                              key="jump-to-latest"
+                              {...NAV_FADE}
+                              type="button"
+                              data-og-jump-to-latest=""
+                              title="Jump to latest"
+                              onClick={() => {
+                                // Returning to the tip explicitly releases reader-owned
+                                // prose. Clear only this timeline's selection before the
+                                // synchronous ownership check on the next commit.
+                                const viewport = scrollRef.current;
+                                const selection = viewport?.ownerDocument.getSelection();
+                                if (
+                                  selection &&
+                                  !selection.isCollapsed &&
+                                  (viewport?.contains(selection.anchorNode) ||
+                                    viewport?.contains(selection.focusNode))
+                                )
+                                  selection.removeAllRanges();
+                                disclosureKeepsUnpinnedRef.current = false;
+                                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={NAV_BUTTON_CLASS}
+                            >
+                              <ArrowDownIcon aria-hidden className="size-4" />
+                              <span className="sr-only">Jump to latest</span>
+                            </motion.button>
+                          ) : null}
+                        </AnimatePresence>
+                      </div>
+                    </div>
+                  </TimelineAnnotationSourceRootContext.Provider>
+                </TooltipProvider>
+              </EntranceAnimationProvider>
+            </TimelineComputeLabelProvider>
+          </SeenActivityIdsProvider>
+        </FoldMemoryProvider>
+      </LightboxProvider>
+    </AllowancePresentationProvider>
   );
+  // Agent-authored object links resolve through the host, never the console.
+  return <OpenGeniLinkProvider resolveLink={resolveLink}>{timeline}</OpenGeniLinkProvider>;
 }
 
 type KeyedTimelineGroup = {
   group: TimelineGroup;
   key: string;
+  entranceEnabled: boolean;
 };
 
+function timelineGroupsRenderEqual(previous: TimelineGroup, next: TimelineGroup): boolean {
+  try {
+    return dequal(previous, next);
+  } catch {
+    // Consumer-owned `unknown` payloads may be proxies/getters. Equality is an
+    // optimization only; a hostile comparator surface must fall back to the
+    // authoritative new group rather than taking down the timeline render.
+    return false;
+  }
+}
+
 /**
  * Projection can legitimately change a group's content-derived key while
  * retaining its existing rows. The common pagination case is an older activity
@@ -1611,7 +2760,10 @@ type KeyedTimelineGroup = {
  * committed groups by their durable item IDs so both the React key and the
  * progressive-window anchor survive either change.
  */
-function useStableTimelineGroupKeys(allGroups: TimelineGroup[]): KeyedTimelineGroup[] {
+function useStableTimelineGroupKeys(
+  allGroups: TimelineGroup[],
+  entranceEnabled: boolean,
+): KeyedTimelineGroup[] {
   const previousRef = useRef<KeyedTimelineGroup[]>([]);
   const keyedGroups = useMemo(() => {
     const previousByItemId = new Map<string, KeyedTimelineGroup>();
@@ -1624,29 +2776,53 @@ function useStableTimelineGroupKeys(allGroups: TimelineGroup[]): KeyedTimelineGr
     const usedKeys = new Set<string>();
     return allGroups.map((group, index) => {
       const itemIds = timelineGroupItemIds(group);
-      let retainedKey: string | undefined;
+      let retainedGroup: KeyedTimelineGroup | undefined;
       for (const itemId of itemIds) {
         const previous = previousByItemId.get(itemId);
         // 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;
+        const startupCompletion =
+          previous?.group.kind === "activity" &&
+          previous.group.items.every(
+            (item) =>
+              item.kind === "startup-phase" || (item.kind === "reasoning" && !item.text.trim()),
+          ) &&
+          group.kind === "turn" &&
+          group.outcome === "complete" &&
+          group.groups.every(
+            (child) =>
+              child.kind === "activity" &&
+              child.items.every((item) => item.kind === "startup-phase"),
+          );
+        if (
+          previous &&
+          (previous.group.kind === group.kind || startupCompletion) &&
+          !usedKeys.has(previous.key)
+        ) {
+          retainedGroup = previous;
           break;
         }
       }
 
       const canonicalKey = timelineGroupKey(group);
-      let key = retainedKey ?? canonicalKey;
+      let key = retainedGroup?.key ?? canonicalKey;
       let collision = 0;
       while (usedKeys.has(key)) {
         key = `${canonicalKey}:${index}:${collision}`;
         collision += 1;
       }
       usedKeys.add(key);
-      return { group, key };
+      return {
+        group:
+          retainedGroup && timelineGroupsRenderEqual(retainedGroup.group, group)
+            ? retainedGroup.group
+            : group,
+        key,
+        entranceEnabled: retainedGroup?.entranceEnabled ?? entranceEnabled,
+      };
     });
-  }, [allGroups]);
+  }, [allGroups, entranceEnabled]);
 
   useLayoutEffect(() => {
     previousRef.current = keyedGroups;
@@ -1739,17 +2915,138 @@ class TimelineGroupRenderBoundary extends Component<
   }
 }
 
+type TimelineGroupEntryProps = {
+  groupKey: string;
+  group: TimelineGroup;
+  nextGroup?: TimelineGroup | undefined;
+  startupDismissed: boolean;
+  entranceEnabled: boolean;
+  liveEntranceEnabled?: boolean | undefined;
+  context: TimelineGroupEntryContext;
+};
+
+type TimelineGroupEntryContext = {
+  userMessageDisclosureContext: UserMessageDisclosureContextValue;
+  behavior: TimelineGroupBehaviorProps;
+};
+
+type TimelineGroupBehaviorProps = {
+  renderMessageActions: MessageTimelineProps["renderMessageActions"];
+  renderMessageText:
+    | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
+    | undefined;
+  onOpenSession: MessageTimelineProps["onOpenSession"];
+  onMemoryClick: MessageTimelineProps["onMemoryClick"];
+  onReconnect: MessageTimelineProps["onReconnect"];
+  renderAuthNeeded: MessageTimelineProps["renderAuthNeeded"];
+  resolveProviderLogo: MessageTimelineProps["resolveProviderLogo"];
+  toolRegistry: ToolRegistry;
+  loadRetainedScreenshot: MessageTimelineProps["loadRetainedScreenshot"];
+  loadRetainedArtifact: MessageTimelineProps["loadRetainedArtifact"];
+  loadVideoArtifactPlayback: MessageTimelineProps["loadVideoArtifactPlayback"];
+  genieLoading: MessageTimelineProps["genieLoading"];
+  turnSummary: MessageTimelineProps["turnSummary"];
+};
+
+/**
+ * Keep the complete settled-row shell behind one shallow memo boundary. A
+ * prepend still reconciles the keyed list, but render-equivalent suffix groups
+ * skip their providers, error boundaries, disclosure wrappers, and row trees.
+ */
+const TimelineGroupEntry = memo(function TimelineGroupEntry({
+  groupKey,
+  group,
+  nextGroup,
+  startupDismissed,
+  entranceEnabled,
+  liveEntranceEnabled,
+  context,
+}: TimelineGroupEntryProps) {
+  const reducedMotion = useReducedMotion();
+  const { behavior, userMessageDisclosureContext } = context;
+  const contextCompactionCount =
+    group.kind === "turn"
+      ? (group.contextCompactionCount ?? 0)
+      : group.kind === "activity" &&
+          nextGroup?.kind === "item" &&
+          nextGroup.item.kind === "context-compaction" &&
+          nextGroup.item.phase === "compacted"
+        ? 1
+        : 0;
+  const content = (
+    <ActivityNoteTextContext.Provider value={behavior.renderMessageText ?? null}>
+      <TimelineGroupView
+        {...behavior}
+        group={group}
+        foldLiveCluster={isAgentProgress(nextGroup)}
+        startupDismissed={startupDismissed}
+        trailingAgentText={trailingAgentTextAfterTurn(group, nextGroup)}
+        contextCompactionCount={contextCompactionCount > 0 ? contextCompactionCount : undefined}
+      />
+    </ActivityNoteTextContext.Provider>
+  );
+  return (
+    <GenieLoadingOptionsContext.Provider value={behavior.genieLoading}>
+      <div
+        data-og-timeline-group-anchor=""
+        data-og-group-key={groupKey}
+        data-og-prompt={
+          group.kind === "item" && group.item.kind === "user-message" ? "" : undefined
+        }
+        tabIndex={group.kind === "item" && group.item.kind === "user-message" ? -1 : undefined}
+      >
+        <EntranceAnimationProvider value={entranceEnabled} liveValue={liveEntranceEnabled}>
+          <TimelineGroupRenderBoundary resetKeys={[group, behavior]}>
+            <UserMessageDisclosureProvider value={userMessageDisclosureContext}>
+              {/* Item groups never switch the preparation/content key. Keep their
+                  DOM shell without mounting inert presence and motion lifecycles
+                  for every historical message in a prepend. */}
+              {group.kind === "item" ? (
+                <div>{content}</div>
+              ) : (
+                <AnimatePresence initial={false}>
+                  <motion.div
+                    key={
+                      !startupDismissed &&
+                      group.kind === "activity" &&
+                      !group.work &&
+                      group.items.every(
+                        (item) =>
+                          item.kind === "startup-phase" ||
+                          (item.kind === "reasoning" && !item.text.trim()),
+                      )
+                        ? "preparation"
+                        : "content"
+                    }
+                    initial={false}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: reducedMotion ? 0 : 0.2 }}
+                  >
+                    {content}
+                  </motion.div>
+                </AnimatePresence>
+              )}
+            </UserMessageDisclosureProvider>
+          </TimelineGroupRenderBoundary>
+        </EntranceAnimationProvider>
+      </div>
+    </GenieLoadingOptionsContext.Provider>
+  );
+});
+
 // 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.
+// on every commit: the stable-key projection reuses render-equivalent group
+// objects, so memo skips them. Changed projection content receives 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,
+  renderMessageActions,
   renderMessageText,
   onOpenSession,
   onMemoryClick,
   onReconnect,
+  renderAuthNeeded,
   resolveProviderLogo,
   toolRegistry,
   loadRetainedScreenshot,
@@ -1759,16 +3056,20 @@ const TimelineGroupView = memo(function TimelineGroupView({
   insideTurn = false,
   nestClusterChips = false,
   foldLiveCluster = false,
+  startupDismissed = false,
   trailingAgentText,
   contextCompactionCount,
 }: {
   group: TimelineGroup;
+  renderMessageActions?: ((item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
   renderMessageText?:
     | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
     | undefined;
   onOpenSession?: ((sessionId: string) => void) | undefined;
   onMemoryClick?: ((memoryId: string) => void) | undefined;
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  /** Host-owned inline connection setup. Return undefined to use the default recovery card. */
+  renderAuthNeeded?: ((item: AuthNeededItem) => ReactNode | undefined) | undefined;
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   toolRegistry: ToolRegistry;
   loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
@@ -1779,6 +3080,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
       behind a neutral chip — the one place activity without an outcome still
       folds, bounding the DOM of days-long autonomous turns. */
   foldLiveCluster?: boolean;
+  startupDismissed?: boolean;
   /** Rendering inside an expanded turn group: the outer chip already owns the
       failure surface, so nested chips stay tinted but quiet (no repeated
       failure text, no auto-open) — one loud error, N calm sub-expands. */
@@ -1799,16 +3101,28 @@ const TimelineGroupView = memo(function TimelineGroupView({
   /** Secondary chip facet when this fold sits next to a compaction landmark. */
   contextCompactionCount?: number | undefined;
 }) {
+  const startupDetails = useStartupDetails();
   const enter = useEntranceAnimation();
   const settleChrome = useTurnSettleOpen();
+  const previousSingleActivity = useRef<ActivityItem | undefined>(undefined);
+  useLayoutEffect(() => {
+    const work =
+      group.kind === "activity" ? group.items.filter((item) => item.kind !== "startup-phase") : [];
+    previousSingleActivity.current = work.length === 1 ? work[0] : undefined;
+  }, [group]);
   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 containsPresentedImage = timelineGroupContainsPresentedImage(group);
+  const hasRememberedImageFold =
+    group.kind === "activity" && containsPresentedImage && foldMemory?.has(group.id);
+  // Primary images stay visible through live narration and the turn wrap.
+  // Manual collapse still belongs to TurnSummary's existing fold memory.
   const activityShouldFold =
     group.kind === "activity" &&
-    Boolean(group.outcome || (foldLiveCluster && clusterIsSettled(group)));
-  const containsGeneratedImage = timelineGroupContainsGeneratedImage(group);
+    !containsPresentedImage &&
+    !!(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);
@@ -1817,7 +3131,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
     group.kind === "turn" &&
     (group.outcome === "failed" ||
       timelineGroupContainsAuthNeeded(group) ||
-      containsGeneratedImage);
+      containsPresentedImage);
   // 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) {
@@ -1828,9 +3142,140 @@ const TimelineGroupView = memo(function TimelineGroupView({
     );
   }
   const settleFold =
-    group.kind === "turn" ? Boolean(enter && !insideTurn && !turnDefaultOpen) : liveActivitySettle;
+    !turnSummary?.rolling &&
+    (group.kind === "turn" ? !!(enter && !insideTurn && !turnDefaultOpen) : liveActivitySettle);
   switch (group.kind) {
     case "activity":
+      if (group.work) {
+        const phases = group.items.filter((item) => item.kind === "startup-phase");
+        const preparing =
+          !startupDetails &&
+          !startupDismissed &&
+          !group.work.endedAt &&
+          !group.work.waiting &&
+          phases.length > 0 &&
+          group.items.every(
+            (item) =>
+              item.kind === "startup-phase" || (item.kind === "reasoning" && !item.text.trim()),
+          ) &&
+          !phases.some((item) => item.status === "failed" || item.status === "cancelled");
+        if (preparing) {
+          // Preparation is primary, never hidden in an activity disclosure.
+          // Keep work.startedAt unchanged for the handoff and settled duration.
+          return (
+            <ActivityRail
+              items={group.items}
+              startupActive
+              bare
+              toolRegistry={toolRegistry}
+              onOpenSession={onOpenSession}
+              onMemoryClick={onMemoryClick}
+              loadRetainedScreenshot={loadRetainedScreenshot}
+              loadRetainedArtifact={loadRetainedArtifact}
+            />
+          );
+        }
+        const end = group.work.endedAt;
+        const status: TurnSummaryStatus = end
+          ? { kind: "worked", durationMs: durationBetween(group.work.startedAt, end) }
+          : group.work.waiting
+            ? { kind: "waiting", ...group.work.waiting }
+            : {
+                kind: "working",
+                since: group.work.startedAt,
+                preview: containsPresentedImage ? undefined : (
+                  <RollingActivity
+                    items={group.items}
+                    toolRegistry={toolRegistry}
+                    showCount={false}
+                  />
+                ),
+              };
+        return (
+          <TurnSummary
+            key="work"
+            items={group.items}
+            status={status}
+            outcome={group.outcome}
+            failureText={group.failureText}
+            foldKey={group.id}
+            defaultOpen={
+              containsPresentedImage ||
+              group.outcome === "failed" ||
+              phases.some((item) => item.status === "failed" || item.status === "cancelled")
+                ? true
+                : undefined
+            }
+            facets={turnSummary?.facets}
+            contextCompactionCount={compactedLandmarkCount(group.work.details)}
+          >
+            <TurnRailFrame compact>
+              {renderFoldedGroups(
+                group.work.details,
+                {
+                  renderMessageActions,
+                  renderMessageText,
+                  onOpenSession,
+                  onMemoryClick,
+                  onReconnect,
+                  renderAuthNeeded,
+                  resolveProviderLogo,
+                  toolRegistry,
+                  loadRetainedScreenshot,
+                  loadRetainedArtifact,
+                  loadVideoArtifactPlayback,
+                  turnSummary,
+                },
+                true,
+              )}
+            </TurnRailFrame>
+          </TurnSummary>
+        );
+      }
+      // Preparation is one quiet surface, not a fold with eight technical steps.
+      // A later turn of the same exchange keeps its status row instead.
+      if (
+        !startupDetails &&
+        !insideTurn &&
+        !group.outcome &&
+        group.items.every(
+          (item) =>
+            item.kind === "startup-phase" || (item.kind === "reasoning" && !item.text.trim()),
+        )
+      ) {
+        return (
+          <ActivityRail
+            items={group.items}
+            startupActive={!startupDismissed && !foldLiveCluster}
+            bare
+            toolRegistry={toolRegistry}
+            onOpenSession={onOpenSession}
+            onMemoryClick={onMemoryClick}
+            loadRetainedScreenshot={loadRetainedScreenshot}
+            loadRetainedArtifact={loadRetainedArtifact}
+          />
+        );
+      }
+      if (
+        turnSummary?.rolling &&
+        insideTurn &&
+        !startupDetails &&
+        !hasRememberedImageFold &&
+        group.items.filter((item) => item.kind !== "startup-phase").length === 1
+      ) {
+        return (
+          <ActivityRail
+            items={group.items}
+            startupActive={false}
+            bare
+            toolRegistry={toolRegistry}
+            onOpenSession={onOpenSession}
+            onMemoryClick={onMemoryClick}
+            loadRetainedScreenshot={loadRetainedScreenshot}
+            loadRetainedArtifact={loadRetainedArtifact}
+          />
+        );
+      }
       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
@@ -1842,11 +3287,22 @@ const TimelineGroupView = memo(function TimelineGroupView({
         // 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 && !containsGeneratedImage;
+        const visibleActivity = group.items.filter((item) => item.kind !== "startup-phase");
+        const singleThought =
+          !startupDetails &&
+          visibleActivity.length === 1 &&
+          visibleActivity[0]?.kind === "reasoning";
+        // Untouched images stay primary output, but a reader-owned image fold
+        // must keep its shell across a multi-cluster wrap. A bare rail would
+        // bypass the remembered choice; retaining either state also lets the
+        // reader reopen and close the same chip after settlement.
+        const useNestedChip =
+          nestClusterChips && (activityShouldFold || hasRememberedImageFold) && !singleThought;
         if (!useNestedChip) {
           return (
             <ActivityRail
               items={group.items}
+              {...(startupDismissed ? { startupActive: false } : {})}
               onOpenSession={onOpenSession}
               onMemoryClick={onMemoryClick}
               toolRegistry={toolRegistry}
@@ -1884,10 +3340,31 @@ const TimelineGroupView = memo(function TimelineGroupView({
       // flips settleFold (collapse) instead of remounting bare rail → wrapper.
       return (
         <TurnSummary
+          // Apply the primary-output default when a rolling activity first
+          // produces an image; the stable foldKey still preserves user choices.
+          key={containsPresentedImage ? "primary-image" : "activity"}
           items={group.items}
           outcome={group.outcome}
           failureText={group.failureText}
-          defaultOpen={!activityShouldFold || group.outcome === "failed" ? true : undefined}
+          defaultOpen={
+            group.outcome === "failed" ||
+            containsPresentedImage ||
+            (!turnSummary?.rolling && !activityShouldFold)
+              ? true
+              : undefined
+          }
+          liveHeader={
+            turnSummary?.rolling &&
+            !containsPresentedImage &&
+            !group.outcome &&
+            !foldLiveCluster ? (
+              <RollingActivity
+                items={group.items}
+                toolRegistry={toolRegistry}
+                previousItem={previousSingleActivity.current}
+              />
+            ) : undefined
+          }
           foldKey={group.id}
           facets={turnSummary?.facets}
           settleFold={settleFold}
@@ -1910,54 +3387,40 @@ const TimelineGroupView = memo(function TimelineGroupView({
       );
     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;
+      if (
+        !startupDetails &&
+        group.outcome === "complete" &&
+        group.groups.every(
+          (child) =>
+            child.kind === "activity" &&
+            child.items.every(
+              (item) => item.kind === "startup-phase" && item.status === "complete",
+            ),
+        )
+      )
+        return <ActivityRail items={activityItems} startupActive={false} bare />;
       const turnCopyText = collectTurnCopyText(group.groups, trailingAgentText);
-      const body = group.groups.map((child) => {
-        const key = timelineGroupKey(child);
-        return (
-          <TimelineGroupRenderBoundary
-            key={key}
-            resetKeys={[
-              child,
-              renderMessageText,
-              onOpenSession,
-              onMemoryClick,
-              onReconnect,
-              resolveProviderLogo,
-              toolRegistry,
-              loadRetainedScreenshot,
-              loadRetainedArtifact,
-              loadVideoArtifactPlayback,
-              turnSummary,
-            ]}
-          >
-            <TimelineGroupView
-              group={child}
-              renderMessageText={renderMessageText}
-              onOpenSession={onOpenSession}
-              onMemoryClick={onMemoryClick}
-              onReconnect={onReconnect}
-              resolveProviderLogo={resolveProviderLogo}
-              toolRegistry={toolRegistry}
-              loadRetainedScreenshot={loadRetainedScreenshot}
-              loadRetainedArtifact={loadRetainedArtifact}
-              loadVideoArtifactPlayback={loadVideoArtifactPlayback}
-              turnSummary={turnSummary}
-              insideTurn
-              nestClusterChips={nestClusters}
-            />
-          </TimelineGroupRenderBoundary>
-        );
+      const body = renderFoldedGroups(group.groups, {
+        renderMessageActions,
+        renderMessageText,
+        onOpenSession,
+        onMemoryClick,
+        onReconnect,
+        renderAuthNeeded,
+        resolveProviderLogo,
+        toolRegistry,
+        loadRetainedScreenshot,
+        loadRetainedArtifact,
+        loadVideoArtifactPlayback,
+        turnSummary,
       });
+      const durationMs = durationBetween(group.startedAt, group.endedAt);
       return (
         <TurnSummary
           items={activityItems}
           outcome={group.outcome}
           failureText={insideTurn ? undefined : group.failureText}
-          durationMs={durationBetween(group.startedAt, group.endedAt)}
+          durationMs={durationMs}
           defaultOpen={turnDefaultOpen ? true : undefined}
           bare={insideTurn}
           foldKey={group.id}
@@ -1982,8 +3445,10 @@ const TimelineGroupView = memo(function TimelineGroupView({
       return (
         <TimelineRow
           item={group.item}
+          renderMessageActions={renderMessageActions}
           renderMessageText={renderMessageText}
           onReconnect={onReconnect}
+          renderAuthNeeded={renderAuthNeeded}
           resolveProviderLogo={resolveProviderLogo}
           onOpenSession={onOpenSession}
           loadVideoArtifactPlayback={loadVideoArtifactPlayback}
@@ -1992,6 +3457,78 @@ const TimelineGroupView = memo(function TimelineGroupView({
   }
 });
 
+type FoldedGroupBehavior = {
+  renderMessageActions?: ((item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
+  renderMessageText?:
+    | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
+    | undefined;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+  onMemoryClick?: ((memoryId: string) => void) | undefined;
+  onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  renderAuthNeeded?: ((item: AuthNeededItem) => ReactNode | undefined) | undefined;
+  resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
+  toolRegistry: ToolRegistry;
+  loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
+  loadRetainedArtifact?: RetainedArtifactLoader | undefined;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
+  turnSummary?: TurnSummaryOptions | undefined;
+};
+
+/** Children of a folded turn or exchange, each on the shared rail. */
+function renderFoldedGroups(
+  groups: readonly TimelineGroup[],
+  behavior: FoldedGroupBehavior,
+  readableWork = false,
+) {
+  // 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(groups) >= 2;
+  return groups.map((child, index) => (
+    <TimelineGroupRenderBoundary
+      key={timelineGroupKey(child)}
+      resetKeys={[
+        child,
+        behavior.renderMessageActions,
+        behavior.renderMessageText,
+        behavior.onOpenSession,
+        behavior.onMemoryClick,
+        behavior.onReconnect,
+        behavior.renderAuthNeeded,
+        behavior.resolveProviderLogo,
+        behavior.toolRegistry,
+        behavior.loadRetainedScreenshot,
+        behavior.loadRetainedArtifact,
+        behavior.loadVideoArtifactPlayback,
+        behavior.turnSummary,
+      ]}
+    >
+      {readableWork ? (
+        <div
+          className={
+            index > 0 && (child.kind !== "activity" || groups[index - 1]?.kind !== "activity")
+              ? "mt-3"
+              : undefined
+          }
+        >
+          <TimelineGroupView {...behavior} group={child} insideTurn startupDismissed />
+        </div>
+      ) : (
+        <TimelineGroupView {...behavior} group={child} insideTurn nestClusterChips={nestClusters} />
+      )}
+    </TimelineGroupRenderBoundary>
+  ));
+}
+
+function compactedLandmarkCount(groups: readonly TimelineGroup[]): number {
+  return groups.filter(
+    (group) =>
+      group.kind === "item" &&
+      group.item.kind === "context-compaction" &&
+      group.item.phase === "compacted",
+  ).length;
+}
+
 /**
  * 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
@@ -2003,9 +3540,16 @@ function FoldBody({ children }: { children: ReactNode }) {
 
 /** Stable left rule for turn/activity bodies — always present so settle wrap
     never inserts or removes the rail chrome. */
-function TurnRailFrame({ children }: { children: ReactNode }) {
+function TurnRailFrame({ children, compact = false }: { children: ReactNode; compact?: boolean }) {
   return (
-    <div className="flex flex-col gap-4 border-l-2 border-og-border pl-3 sm:pl-4">{children}</div>
+    <div
+      className={cn(
+        "flex flex-col border-l-2 border-og-border pl-3 sm:pl-4",
+        compact ? "gap-0.5" : "gap-4",
+      )}
+    >
+      {children}
+    </div>
   );
 }
 
@@ -2031,7 +3575,9 @@ function useLiveSettleFold(folded: boolean): boolean {
 function timelineGroupKey(group: TimelineGroup): string {
   switch (group.kind) {
     case "item":
-      return group.item.id;
+      return group.item.kind === "user-message" && group.item.reconciliationKey
+        ? group.item.reconciliationKey
+        : group.item.id;
     case "activity":
       return group.id;
     case "turn":
@@ -2050,26 +3596,15 @@ function timelineGroupContainsAuthNeeded(group: TimelineGroup): boolean {
   }
 }
 
-/** Generated images are primary user-visible output, not incidental activity. */
-function timelineGroupContainsGeneratedImage(group: TimelineGroup): boolean {
-  switch (group.kind) {
-    case "item":
-      return false;
-    case "activity":
-      return group.items.some(
-        (item) => item.kind === "tool-call" && item.name === "generate_image",
-      );
-    case "turn":
-      return group.groups.some(timelineGroupContainsGeneratedImage);
-  }
-}
-
 function timelineGroupItemIds(group: TimelineGroup): string[] {
   switch (group.kind) {
     case "item":
       return [group.item.id];
     case "activity":
-      return group.items.map((item) => item.id);
+      return [
+        ...(group.work?.details ?? []).flatMap(timelineGroupItemIds),
+        ...group.items.map((item) => item.id),
+      ];
     case "turn":
       return group.groups.flatMap(timelineGroupItemIds);
   }
@@ -2087,7 +3622,7 @@ function isAgentProgress(next: TimelineGroup | undefined): boolean {
   return (
     next.kind === "activity" ||
     next.kind === "turn" ||
-    (next.kind === "item" && next.item.kind === "agent-message")
+    (next.kind === "item" && next.item.kind === "agent-message" && next.item.text.trim().length > 0)
   );
 }
 
@@ -2096,7 +3631,7 @@ function isAgentProgress(next: TimelineGroup | undefined): boolean {
     item) can sit after the ACTIVE cluster, which must never fold mid-work. */
 function clusterIsSettled(group: Extract<TimelineGroup, { kind: "activity" }>): boolean {
   return group.items.every((item) => {
-    if (item.kind === "reasoning") {
+    if (item.kind === "reasoning" || item.kind === "agent-message") {
       return !item.streaming;
     }
     // Memory writes and fleet observations are discrete, already-settled events.
@@ -2118,11 +3653,11 @@ function foldableActivityClusterCount(groups: readonly TimelineGroup[]): number
   return count;
 }
 
-function flattenActivityItems(groups: TimelineGroup[]): ActivityItem[] {
+function flattenActivityItems(groups: readonly TimelineGroup[]): ActivityItem[] {
   const items: ActivityItem[] = [];
   for (const group of groups) {
     if (group.kind === "activity") {
-      items.push(...group.items);
+      items.push(...flattenActivityItems(group.work?.details ?? []), ...group.items);
     } else if (group.kind === "turn") {
       items.push(...flattenActivityItems(group.groups));
     }
@@ -2139,6 +3674,18 @@ function collectAgentMessageText(groups: readonly TimelineGroup[]): string {
       if (text.length > 0) {
         parts.push(text);
       }
+    } else if (group.kind === "activity") {
+      // Commentary folded into clusters is still the assistant's own prose.
+      const nested = collectAgentMessageText(group.work?.details ?? []);
+      if (nested.length > 0) {
+        parts.push(nested);
+      }
+      for (const item of group.items) {
+        const text = item.kind === "agent-message" ? item.text.trim() : "";
+        if (text.length > 0) {
+          parts.push(text);
+        }
+      }
     } else if (group.kind === "turn") {
       const nested = collectAgentMessageText(group.groups);
       if (nested.length > 0) {
@@ -2159,6 +3706,9 @@ function collectTurnIdsFromGroups(groups: readonly TimelineGroup[]): Set<string>
         ids.add(turnId);
       }
     } else if (group.kind === "activity") {
+      for (const nested of collectTurnIdsFromGroups(group.work?.details ?? [])) {
+        ids.add(nested);
+      }
       for (const item of group.items) {
         if (item.turnId) {
           ids.add(item.turnId);
@@ -2188,7 +3738,7 @@ export function trailingAgentTextAfterTurn(
   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) {
+    if (!turnIds.size) {
       return undefined;
     }
     if (!next.item.turnId || !turnIds.has(next.item.turnId)) {
@@ -2207,7 +3757,7 @@ function collectTurnCopyText(
   const parts = [collectAgentMessageText(groups), trailingAgentText?.trim() ?? ""].filter(
     (part) => part.length > 0,
   );
-  if (parts.length === 0) {
+  if (!parts.length) {
     return undefined;
   }
   return parts.join("\n\n");
@@ -2231,26 +3781,45 @@ function durationBetween(startedAt: string, endedAt: string): number | undefined
  */
 export function TimelineRow({
   item,
+  renderMessageActions,
   renderMessageText,
   onReconnect,
+  renderAuthNeeded,
   resolveProviderLogo,
   onOpenSession,
   loadVideoArtifactPlayback,
 }: {
   item: TimelineItem;
+  renderMessageActions?: ((item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
   renderMessageText?:
     | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
     | undefined;
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  /** Host-owned inline connection setup. Return undefined to use the default recovery card. */
+  renderAuthNeeded?: ((item: AuthNeededItem) => ReactNode | undefined) | undefined;
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   onOpenSession?: ((sessionId: string) => void) | undefined;
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
 }) {
   switch (item.kind) {
     case "user-message":
-      return <UserMessageRow item={item} renderMessageText={renderMessageText} />;
+      return (
+        <UserMessageRow
+          item={item}
+          renderMessageActions={renderMessageActions}
+          renderMessageText={renderMessageText}
+        />
+      );
+    case "human-input":
+      return <HumanInputConversationRow item={item} />;
     case "agent-message":
-      return <AgentMessageRow item={item} renderMessageText={renderMessageText} />;
+      return (
+        <AgentMessageRow
+          item={item}
+          renderMessageActions={renderMessageActions}
+          renderMessageText={renderMessageText}
+        />
+      );
     case "worker-completion":
       return <WorkerCompletionRow item={item} onOpenSession={onOpenSession} />;
     case "session-status":
@@ -2259,7 +3828,11 @@ export function TimelineRow({
       return <GoalRow item={item} />;
     case "machine-input-batch":
       return (
-        <MachineInputBatchRow item={item} loadVideoArtifactPlayback={loadVideoArtifactPlayback} />
+        <MachineInputBatchRow
+          item={item}
+          onOpenSession={onOpenSession}
+          loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+        />
       );
     case "notice":
       return <NoticeRow item={item} />;
@@ -2267,11 +3840,13 @@ export function TimelineRow({
       return <CompactionRow item={item} />;
     case "auth-needed":
       return (
-        <AuthNeededRow
-          item={item}
-          onReconnect={onReconnect}
-          resolveProviderLogo={resolveProviderLogo}
-        />
+        renderAuthNeeded?.(item) ?? (
+          <AuthNeededRow
+            item={item}
+            onReconnect={onReconnect}
+            resolveProviderLogo={resolveProviderLogo}
+          />
+        )
       );
     default:
       return null;
@@ -2290,11 +3865,11 @@ function CompactionRow({ item }: { item: ContextCompactionItem }) {
   const trigger =
     item.trigger && item.phase !== "started" ? COMPACTION_TRIGGER_LABEL[item.trigger] : null;
   const before =
-    item.estimatedTokensBefore !== null
+    item.estimatedTokensBefore != null
       ? Math.round(item.estimatedTokensBefore).toLocaleString("en-US")
       : null;
   const after =
-    item.estimatedTokensAfter !== null
+    item.estimatedTokensAfter != null
       ? Math.round(item.estimatedTokensAfter).toLocaleString("en-US")
       : null;
   const title =
@@ -2309,14 +3884,14 @@ function CompactionRow({ item }: { item: ContextCompactionItem }) {
     item.phase === "compacted"
       ? "Chat history above is unchanged"
       : item.phase === "skipped"
-        ? compactionSkipSubtitle(item.skipReason)
+        ? compactionSkipSubtitle(item.skipReason, item.providerRejection)
         : 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";
+        ? WAITING_PILL_CLASS
+        : NEUTRAL_PILL;
   return (
     <div className={cn(enter && "animate-og-enter", "flex justify-center")}>
       <div
@@ -2339,21 +3914,6 @@ function CompactionRow({ item }: { item: ContextCompactionItem }) {
   );
 }
 
-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.";
-  }
-}
-
 /** Hover-reveal clock beside the copy control (sent / finished). */
 function MessageFooterTime({ occurredAt }: { occurredAt: string }) {
   return (
@@ -2372,22 +3932,17 @@ function MessageFooterTime({ occurredAt }: { occurredAt: string }) {
 
 function UserMessageRow({
   item,
+  renderMessageActions,
   renderMessageText,
 }: {
   item: UserMessageItem;
+  renderMessageActions?: ((item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
   renderMessageText?:
     | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
     | undefined;
 }) {
   const enter = useEntranceAnimation();
-  const deliveryLabel =
-    item.delivery?.state === "sending"
-      ? "Sending…"
-      : item.delivery?.state === "queued"
-        ? "Queued"
-        : item.delivery?.state === "failed"
-          ? "Not sent"
-          : null;
+  const deliveryFailed = item.delivery?.state === "failed";
   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">
@@ -2400,11 +3955,19 @@ function UserMessageRow({
           }
           label="Copy message"
           className="w-fit max-w-full min-w-0"
-          trailing={<MessageFooterTime occurredAt={item.occurredAt} />}
+          trailing={
+            <>
+              {renderMessageActions?.(item)}
+              <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">
+          <div className={MESSAGE_BUBBLE_CLASS}>
             {item.text ? (
-              <div data-og-annotation-source-key={item.annotationSource?.eventId}>
+              <div
+                data-og-search-item={item.id}
+                data-og-annotation-source-key={item.annotationSource?.eventId}
+              >
                 {renderMessageText ? (
                   renderMessageText(item.text, item)
                 ) : (
@@ -2415,34 +3978,53 @@ function UserMessageRow({
               </div>
             ) : null}
             {(item.annotations?.length ?? 0) > 0 ? (
-              <TimelineAnnotationsChip
+              <TimelineAnnotationCards
                 annotations={item.annotations ?? []}
                 className={item.text ? "mt-2" : undefined}
               />
             ) : null}
           </div>
         </CopyHoverFrame>
-        {deliveryLabel ? (
-          <div className="flex max-w-full items-center gap-2 px-1 text-og-xs text-og-fg-subtle">
-            <span title={item.delivery?.error}>{deliveryLabel}</span>
-            {item.delivery?.state === "failed" && item.delivery.onRetry ? (
-              <button
-                type="button"
-                className="font-medium text-og-fg underline decoration-og-border underline-offset-2 hover:text-og-fg-strong"
-                onClick={item.delivery.onRetry}
-              >
-                Retry
-              </button>
-            ) : null}
-            {item.delivery?.state === "failed" && item.delivery.onRemove ? (
-              <button
-                type="button"
-                className="font-medium text-og-fg-subtle underline decoration-og-border underline-offset-2 hover:text-og-fg"
-                onClick={item.delivery.onRemove}
-              >
-                Remove
-              </button>
-            ) : null}
+        {deliveryFailed ? (
+          <div
+            role="status"
+            className="flex max-w-full flex-col items-start gap-1 px-1 text-og-xs text-og-status-failed"
+          >
+            <span className="flex min-w-0 items-start gap-1">
+              <TriangleAlertIcon className="size-3.5 shrink-0" aria-hidden="true" />
+              <span className="min-w-0 break-words">
+                {item.delivery?.error || "Message not sent"}
+              </span>
+            </span>
+            <div className="flex flex-wrap items-center gap-2">
+              {item.delivery?.onEdit ? (
+                <button
+                  type="button"
+                  className="font-medium text-og-status-failed underline decoration-og-status-failed/50 underline-offset-2 hover:text-og-fg"
+                  onClick={item.delivery.onEdit}
+                >
+                  Edit message
+                </button>
+              ) : null}
+              {item.delivery?.onRetry ? (
+                <button
+                  type="button"
+                  className="font-medium text-og-status-failed underline decoration-og-status-failed/50 underline-offset-2 hover:text-og-fg"
+                  onClick={item.delivery.onRetry}
+                >
+                  Retry
+                </button>
+              ) : null}
+              {item.delivery?.onRemove ? (
+                <button
+                  type="button"
+                  className="font-medium text-og-fg-subtle underline decoration-og-border underline-offset-2 hover:text-og-fg"
+                  onClick={item.delivery.onRemove}
+                >
+                  Remove
+                </button>
+              ) : null}
+            </div>
           </div>
         ) : null}
       </div>
@@ -2450,11 +4032,146 @@ function UserMessageRow({
   );
 }
 
+function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
+  const enter = useEntranceAnimation();
+  const multipleQuestions = Math.max(item.questions.length, item.answers.length) > 1;
+  const questionNumberById = new Map(
+    item.questions.map((question, index) => [question.id, index + 1]),
+  );
+  const settledLabel =
+    item.response.outcome === "answered"
+      ? "You answered"
+      : item.response.outcome === "skipped"
+        ? "Skipped"
+        : item.response.outcome === "expired"
+          ? "Expired"
+          : "Cancelled";
+  const copyText = humanInputConversationCopyText(item, settledLabel);
+
+  return (
+    <div
+      className={cn(enter && "animate-og-enter", "flex w-full flex-col gap-2.5")}
+      data-human-input-history={item.requestId}
+    >
+      <div className="flex max-w-[90%] items-start gap-3 rounded-og-lg rounded-bl-og-xs border border-og-border bg-og-surface-1 px-3.5 py-3 sm:max-w-[82%]">
+        <span className="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-og-md bg-og-status-waiting/10 text-og-status-waiting">
+          <MessageCircleQuestionIcon aria-hidden="true" className="size-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="text-og-xs font-medium text-og-fg-subtle">Agent asked</p>
+          <div className="mt-1.5 space-y-3">
+            {item.questions.length > 0 ? (
+              item.questions.map((question, index) => (
+                <div key={question.id}>
+                  {question.label ? (
+                    <p className="text-og-sm font-semibold text-og-fg">
+                      {multipleQuestions ? (
+                        <span className="mr-1.5 tabular-nums text-og-fg-muted">{index + 1}.</span>
+                      ) : null}
+                      {multipleQuestions ? " " : null}
+                      {question.label}
+                    </p>
+                  ) : null}
+                  <p
+                    className={cn(
+                      "text-og-md leading-6 text-og-fg",
+                      question.label && "mt-0.5 text-og-sm text-og-fg-muted",
+                    )}
+                  >
+                    {!question.label && multipleQuestions ? (
+                      <span className="mr-1.5 tabular-nums text-og-fg-muted">{index + 1}.</span>
+                    ) : null}
+                    {!question.label && multipleQuestions ? " " : null}
+                    {question.prompt}
+                  </p>
+                </div>
+              ))
+            ) : (
+              <p className="text-og-sm text-og-fg-muted">The agent requested structured input.</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <CopyHoverFrame
+          copyText={copyText}
+          label="Copy answer"
+          className="w-fit max-w-[90%] min-w-0 sm:max-w-[82%]"
+          trailing={<MessageFooterTime occurredAt={item.occurredAt} />}
+        >
+          <div className={MESSAGE_BUBBLE_CLASS}>
+            <p className="text-og-xs font-medium text-og-fg-subtle">{settledLabel}</p>
+            {item.response.outcome === "answered" ? (
+              <div className="mt-1.5 space-y-3">
+                {item.answers.length > 0 ? (
+                  item.answers.map((answer, answerIndex) => (
+                    <div key={answer.questionId}>
+                      {multipleQuestions ? (
+                        <p className="text-og-sm font-semibold text-og-fg">
+                          <span className="mr-1.5 tabular-nums text-og-fg-muted">
+                            {questionNumberById.get(answer.questionId) ?? answerIndex + 1}.
+                          </span>{" "}
+                          {answer.label}
+                        </p>
+                      ) : null}
+                      <div className={cn("text-og-md text-og-fg", multipleQuestions && "mt-0.5")}>
+                        {answer.values.length > 1 ? (
+                          <ul className="list-disc space-y-0.5 pl-5">
+                            {answer.values.map((value) => (
+                              <li key={`${answer.questionId}-${value}`}>{value}</li>
+                            ))}
+                          </ul>
+                        ) : (
+                          <p>{answer.values[0] || "Answered"}</p>
+                        )}
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <p>Answered</p>
+                )}
+              </div>
+            ) : null}
+          </div>
+        </CopyHoverFrame>
+      </div>
+    </div>
+  );
+}
+
+function humanInputConversationCopyText(item: HumanInputItem, settledLabel: string): string {
+  const questions = item.questions
+    .map(
+      (question, index) =>
+        `${item.questions.length > 1 ? `${index + 1}. ` : ""}${question.label || "Question"}: ${question.prompt}`,
+    )
+    .join("\n\n");
+  const questionNumberById = new Map(
+    item.questions.map((question, index) => [question.id, index + 1]),
+  );
+  const answers = item.answers
+    .map(
+      (answer, index) =>
+        `${
+          item.questions.length > 1
+            ? `${questionNumberById.get(answer.questionId) ?? index + 1}. `
+            : ""
+        }${answer.label}: ${answer.values.join(", ") || "Answered"}`,
+    )
+    .join("\n\n");
+  return [questions, `${settledLabel}${answers ? `\n\n${answers}` : ""}`]
+    .filter(Boolean)
+    .join("\n\n");
+}
+
 function AgentMessageRow({
   item,
+  renderMessageActions,
   renderMessageText,
 }: {
   item: AgentMessageItem;
+  renderMessageActions?: ((item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
   renderMessageText?:
     | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
     | undefined;
@@ -2470,17 +4187,28 @@ function AgentMessageRow({
   // While streaming, copy is still useful (current text) but keep chrome calm —
   // stamp only after the message finishes (occurredAt tracks completion).
   return (
-    <div data-og-annotation-source-key={item.annotationSource?.eventId}>
-      <CopyHoverFrame
-        copyText={item.text}
-        label="Copy message"
-        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} />}
+    <CopyHoverFrame
+      copyText={item.text}
+      label="Copy message"
+      align="start"
+      className={cn(enter && "animate-og-enter", "min-w-0 text-og-md leading-7 text-og-fg")}
+      trailing={
+        item.streaming ? null : (
+          <>
+            {renderMessageActions?.(item)}
+            <MessageFooterTime occurredAt={item.occurredAt} />
+          </>
+        )
+      }
+    >
+      <div
+        data-og-wide-table-message=""
+        data-og-search-item={item.id}
+        data-og-annotation-source-key={item.annotationSource?.eventId}
       >
         {body}
-      </CopyHoverFrame>
-    </div>
+      </div>
+    </CopyHoverFrame>
   );
 }
 
@@ -2555,9 +4283,7 @@ function WorkerCompletionRow({
   // payloads can carry a leftover pausedReason/rationale from earlier in the
   // worker's life, and a "Worker completed" card must not show a pause section.
   const showPausedReason =
-    item.childStatus !== "failed" &&
-    item.goalStatus === "paused" &&
-    Boolean(item.pausedReason?.trim());
+    item.childStatus !== "failed" && item.goalStatus === "paused" && !!item.pausedReason?.trim();
   const details: { label: string; value: string; muted?: boolean }[] = [
     ...(item.text.trim() ? [{ label: "Report", value: item.text.trim() }] : []),
     ...(item.evidence?.trim()
@@ -2640,7 +4366,11 @@ function WorkerCompletionRow({
   );
 }
 
-function SessionStatusRow({ item }: { item: { status: SessionStatus; occurredAt: string } }) {
+function SessionStatusRow({
+  item,
+}: {
+  item: { status: SessionStatus; occurredAt: string; resolvedAt?: string };
+}) {
   const enter = useEntranceAnimation();
   const meta = SESSION_STATUS_META[item.status];
   return (
@@ -2653,8 +4383,9 @@ function SessionStatusRow({ item }: { item: { status: SessionStatus; occurredAt:
     >
       <span className="h-px flex-1 bg-og-border" />
       <span className="inline-flex items-center gap-1.5">
-        <StatusDot status={item.status} className="size-1" />
-        {meta.label.toLowerCase()} · {formatRelativeTime(item.occurredAt)}
+        {item.resolvedAt ? null : <StatusDot status={item.status} className="size-1" />}
+        {item.resolvedAt ? "work resumed" : meta.label.toLowerCase()} ·{" "}
+        {formatRelativeTime(item.resolvedAt ?? item.occurredAt)}
       </span>
       <span className="h-px flex-1 bg-og-border" />
     </div>
@@ -2682,36 +4413,46 @@ type GoalMeta = { label: string; pill: string; icon: ComponentType<{ className?:
 
 const NEUTRAL_PILL = "border-og-border bg-og-surface-1 text-og-fg-muted";
 
-const GOAL_META: Record<GoalItem["action"], GoalMeta> = {
-  set: {
-    label: "Goal set",
-    pill: "border-og-accent/30 bg-og-accent/10 text-og-accent",
-    icon: TargetIcon,
-  },
-  updated: { label: "Goal updated", pill: NEUTRAL_PILL, icon: PencilLineIcon },
-  completed: {
-    label: "Goal completed",
-    pill: "border-og-status-idle/30 bg-og-status-idle/10 text-og-status-idle",
-    icon: CheckIcon,
-  },
-  paused: {
-    label: "Goal paused",
-    pill: "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting",
-    icon: PauseIcon,
-  },
-  resumed: { label: "Goal resumed", pill: NEUTRAL_PILL, icon: PlayIcon },
-  cleared: { label: "Goal cleared", pill: NEUTRAL_PILL, icon: Trash2Icon },
-  continuation: { label: "Continuing toward the goal", pill: NEUTRAL_PILL, icon: ArrowRightIcon },
-};
+// Shared production chunks can be cyclic. Resolve icon bindings during render,
+// after their modules initialize, rather than permanently capturing undefined.
+function goalMeta(action: GoalItem["action"]): GoalMeta {
+  const metadata: Record<GoalItem["action"], GoalMeta> = {
+    set: {
+      label: "Goal set",
+      pill: "border-og-accent/30 bg-og-accent/10 text-og-accent",
+      icon: TargetIcon,
+    },
+    updated: { label: "Goal updated", pill: NEUTRAL_PILL, icon: PencilLineIcon },
+    completed: {
+      label: "Goal completed",
+      pill: "border-og-status-idle/30 bg-og-status-idle/10 text-og-status-idle",
+      icon: CheckIcon,
+    },
+    paused: {
+      label: "Goal paused",
+      pill: WAITING_PILL_CLASS,
+      icon: PauseIcon,
+    },
+    resumed: { label: "Goal resumed", pill: NEUTRAL_PILL, icon: PlayIcon },
+    cleared: { label: "Goal cleared", pill: NEUTRAL_PILL, icon: Trash2Icon },
+    held: {
+      label: "Goal held",
+      pill: WAITING_PILL_CLASS,
+      icon: PauseCircleIcon,
+    },
+    continuation: { label: "Continuing toward the goal", pill: NEUTRAL_PILL, icon: ArrowRightIcon },
+  };
+  return metadata[action];
+}
 
 /**
  * A goal landmark pill. Resolves its label, accent/tone, and glyph from
- * {@link GOAL_META} so all six actions are visually distinguishable while the
+ * {@link goalMeta} so all six actions are visually distinguishable while the
  * palette stays restrained — see that table for the per-action rationale.
  */
 function GoalRow({ item }: { item: GoalItem }) {
   const enter = useEntranceAnimation();
-  const { label, pill, icon: Icon } = GOAL_META[item.action];
+  const { label, pill, icon: Icon } = goalMeta(item.action);
   return (
     <div className={cn(enter && "animate-og-enter", "flex justify-center")}>
       <span
@@ -2732,9 +4473,11 @@ function GoalRow({ item }: { item: GoalItem }) {
 
 function MachineInputBatchRow({
   item,
+  onOpenSession,
   loadVideoArtifactPlayback,
 }: {
   item: MachineInputBatchItem;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
 }) {
   const enter = useEntranceAnimation();
@@ -2750,11 +4493,15 @@ function MachineInputBatchRow({
   }
   const singleSummary = single ? cleanMachineInputSummary(single.summary) : "";
   const showCollapsedSummary =
-    single != null && machineInputSummaryIsUseful(single.kind, singleSummary);
+    !item.compact && single != null && machineInputSummaryIsUseful(single.kind, singleSummary);
 
   return (
     <div className={cn(enter && "animate-og-enter", "flex flex-col items-center gap-1.5")}>
-      <details className="group w-full max-w-full" data-og-machine-input-batch="">
+      <details
+        className="group w-full max-w-full"
+        data-og-machine-input-batch=""
+        title={`Received ${formatClockTime(item.occurredAt)}`}
+      >
         <summary className="flex cursor-pointer list-none justify-center [&::-webkit-details-marker]:hidden">
           <span
             className={cn(
@@ -2770,10 +4517,14 @@ function MachineInputBatchRow({
           </span>
         </summary>
         <div className="mx-auto mt-2 w-full max-w-lg space-y-2 border-t border-og-border/50 pt-2">
+          <p className="text-og-xs text-og-fg-subtle">
+            Received <time dateTime={item.occurredAt}>{formatClockTime(item.occurredAt)}</time>
+          </p>
           {item.members.map((member) => (
             <MachineInputRow
               key={member.id}
               member={member}
+              onOpenSession={onOpenSession}
               loadVideoArtifactPlayback={loadVideoArtifactPlayback}
             />
           ))}
@@ -2790,9 +4541,11 @@ function MachineInputBatchRow({
 
 function MachineInputRow({
   member,
+  onOpenSession,
   loadVideoArtifactPlayback,
 }: {
   member: MachineInputBatchItem["members"][number];
+  onOpenSession?: ((sessionId: string) => void) | undefined;
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
 }) {
   if (member.kind === "media_generation_result" && member.result) {
@@ -2819,6 +4572,11 @@ function MachineInputRow({
             {truncate(summary, 320)}
           </p>
         ) : null}
+        <ChildSessionLink
+          kind={member.kind}
+          sourceId={member.sourceId}
+          onOpenSession={onOpenSession}
+        />
       </div>
     </div>
   );
@@ -2892,12 +4650,34 @@ function formatVideoDuration(seconds: number): string {
 
 function NoticeRow({ item }: { item: NoticeItem }) {
   const enter = useEntranceAnimation();
+  if (item.allowance) return <AllowanceExhaustedRow refusal={item.allowance} />;
+  if (item.recordedOutcome) {
+    return (
+      <details
+        className="group text-og-sm text-og-fg-muted"
+        role="note"
+        data-og-recorded-outcome="wait"
+      >
+        <summary className="flex cursor-pointer list-none items-center gap-2 py-1 [&::-webkit-details-marker]:hidden">
+          <ChevronRightIcon
+            aria-hidden
+            className="size-3.5 transition-transform group-open:rotate-90"
+          />
+          <span title={new Date(item.occurredAt).toLocaleString()}>
+            {recordedWaitSummary(item)}
+          </span>
+        </summary>
+        <p className="mt-1 whitespace-pre-wrap break-words pl-5 text-og-fg-muted">{item.text}</p>
+      </details>
+    );
+  }
+  const resolvedApproval = Boolean(item.resolvedAt && item.text.startsWith("Approval needed"));
   const tone =
     item.tone === "failed"
       ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed"
-      : item.tone === "waiting"
-        ? "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";
+      : item.tone === "waiting" && !item.resolvedAt
+        ? WAITING_PILL_CLASS
+        : NEUTRAL_PILL;
   return (
     <div
       className={cn(
@@ -2907,15 +4687,21 @@ function NoticeRow({ item }: { item: NoticeItem }) {
       )}
       role="status"
     >
-      <TriangleAlertIcon
-        className={cn("mt-0.5 size-4 shrink-0", item.tone === "cancelled" && "opacity-60")}
-      />
+      {resolvedApproval ? (
+        <CheckIcon className="mt-0.5 size-4 shrink-0 opacity-70" aria-hidden="true" />
+      ) : (
+        <TriangleAlertIcon
+          className={cn("mt-0.5 size-4 shrink-0", item.tone === "cancelled" && "opacity-60")}
+        />
+      )}
       <div className="min-w-0 flex-1">
-        <span className="whitespace-pre-wrap break-words">{item.text}</span>
+        <span className="whitespace-pre-wrap break-words">
+          {resolvedApproval ? "You responded to this approval." : item.text}
+        </span>
         {item.details ? (
           <details className="mt-2 text-og-control">
             <summary className="cursor-pointer font-medium">{item.details.label}</summary>
-            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-og-sm bg-black/5 p-2 font-mono dark:bg-white/5">
+            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-og-sm bg-og-fg/5 p-2 font-mono">
               {JSON.stringify(item.details.value, null, 2)}
             </pre>
           </details>
@@ -2935,6 +4721,41 @@ function NoticeRow({ item }: { item: NoticeItem }) {
   );
 }
 
+/**
+ * "Waited for 2 agents · 3m 5s" once later input ended the wait, otherwise
+ * "Waiting for 2 agents · since 10:32" (with the date on a later day). The
+ * reason stays behind the disclosure.
+ */
+function recordedWaitSummary(item: NoticeItem): ReactNode {
+  const agents = item.waitingAgents ?? 0;
+  const target = agents > 0 ? ` for ${agents} ${agents === 1 ? "agent" : "agents"}` : "";
+  const waitedMs = item.waitEndedAt
+    ? durationBetween(item.occurredAt, item.waitEndedAt)
+    : undefined;
+  if (waitedMs !== undefined) {
+    return (
+      <>
+        Waited{target} ·{" "}
+        <time dateTime={`PT${Math.floor(waitedMs / 1000)}S`}>{formatElapsed(waitedMs)}</time>
+      </>
+    );
+  }
+  // An open wait is historical once its day has passed; keep its date visible.
+  const started = new Date(item.occurredAt);
+  const sameDay = started.toDateString() === new Date().toDateString();
+  return (
+    <>
+      {item.waitEndedAt ? "Waited" : "Waiting"}
+      {target} · since{" "}
+      <time dateTime={item.occurredAt}>
+        {sameDay
+          ? formatClockTime(item.occurredAt)
+          : started.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}
+      </time>
+    </>
+  );
+}
+
 /**
  * The inline connection-recovery card: missing or lapsed access surfaces as a
  * calm, tappable affordance instead of a raw provider-domain error. The `reason`
@@ -2981,6 +4802,7 @@ function AuthNeededRow({
       ? `${provider} tools unavailable`
       : `${actionLabel} ${provider}`;
   const reasonLine = recommendation?.rationale ?? authReasonLine(item.reason);
+  const hostAuthorizationUrl = item.authoritySource === "host" ? item.authorizationUrl : null;
 
   const start = async () => {
     if (!onReconnect || busy) {
@@ -3023,27 +4845,40 @@ function AuthNeededRow({
             ) : null}
           </div>
         </div>
-        {!unavailable && onReconnect ? (
+        {hostAuthorizationUrl ? (
+          <a
+            href={hostAuthorizationUrl}
+            rel="noreferrer"
+            target="_blank"
+            className={cn(
+              PRIMARY_ACTION_CLASS,
+              "transition-colors hover:bg-og-primary-hover pointer-coarse:min-h-9",
+            )}
+          >
+            <RefreshCwIcon className="size-3.5" aria-hidden />
+            {actionLabel}
+          </a>
+        ) : item.authoritySource !== "host" && !unavailable && onReconnect ? (
           <button
             type="button"
             onClick={() => void start()}
             disabled={busy}
             className={cn(
-              "inline-flex w-full shrink-0 items-center justify-center gap-1.5 rounded-og-md bg-og-accent px-3 py-1.5 text-og-menu font-medium text-og-accent-fg sm:w-auto",
-              "transition-colors hover:bg-og-accent-strong disabled:opacity-70 pointer-coarse:min-h-9",
+              PRIMARY_ACTION_CLASS,
+              "transition-colors hover:bg-og-primary-hover disabled:opacity-50 pointer-coarse:min-h-9",
             )}
           >
             <RefreshCwIcon className={cn("size-3.5", busy && "animate-og-spin")} aria-hidden />
             {busy ? "Opening…" : actionLabel}
           </button>
-        ) : !unavailable && item.authorizationUrl ? (
+        ) : item.authoritySource !== "host" && !unavailable && item.authorizationUrl ? (
           <a
             href={item.authorizationUrl}
             rel="noreferrer"
             target="_blank"
             className={cn(
-              "inline-flex w-full shrink-0 items-center justify-center gap-1.5 rounded-og-md bg-og-accent px-3 py-1.5 text-og-menu font-medium text-og-accent-fg sm:w-auto",
-              "transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-9",
+              PRIMARY_ACTION_CLASS,
+              "transition-colors hover:bg-og-primary-hover pointer-coarse:min-h-9",
             )}
           >
             <RefreshCwIcon className="size-3.5" aria-hidden />
@@ -3105,7 +4940,7 @@ function AuthProviderLogo({ src, label }: { src: string | null; label: string })
     `capabilityMonogram` so the reconnect tile reads like every other logo tile. */
 function monogram(label: string): string {
   const words = label.trim().split(/\s+/).filter(Boolean);
-  if (words.length === 0) {
+  if (!words.length) {
     return "?";
   }
   if (words.length === 1) {