@opengeni/react 3.3.2-canary.1 → 3.4.0

package/src/components/message-timeline.tsx

@@ -1,3 +1,35 @@
+import { QUESTION_NAV_MARGIN_PX, questionNavTarget } from "../timeline/question-nav-model";
+import { timelineGroupIndexAtSequence } from "../timeline/focus-sequence";
+import { RollingActivity } from "../timeline/rolling-activity";
+import {
+  clusterIsSettled,
+  compactedLandmarkCount,
+  durationBetween,
+  flattenActivityItems,
+  isPreparingWork,
+  readableWorkDefaultOpen,
+  readableWorkHasDetails,
+  readableWorkShowsPreview,
+  readableWorkStatus,
+} from "../timeline/work-presentation";
+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 {
+  compactionFailureDetails,
+  compactionSkipSubtitle,
+  compactionSkipTitle,
+} from "../timeline/compaction-copy";
 import type {
   DraftTimelineAnnotation,
   MediaGenerationResult,
@@ -8,10 +40,13 @@ import { dequal } from "dequal/lite";
 import {
   ArrowDownIcon,
   ArrowRightIcon,
+  ArrowUpIcon,
   BotIcon,
   CheckCircle2Icon,
   CheckIcon,
+  ChevronDownIcon,
   ChevronRightIcon,
+  CornerDownRightIcon,
   PauseCircleIcon,
   PauseIcon,
   MessageCircleQuestionIcon,
@@ -24,16 +59,19 @@ import {
   TriangleAlertIcon,
   XCircleIcon,
 } from "lucide-react";
-import type { ComponentType } from "react";
-import { AnimatePresence, motion } from "motion/react";
-import { Collapsible } from "radix-ui";
+import type { ComponentType, CSSProperties } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import {
   Component,
+  Fragment,
   Suspense,
+  createContext,
   lazy,
   memo,
   useCallback,
+  useContext,
   useEffect,
+  useId,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -41,6 +79,11 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../lib/cn";
+import {
+  MessageSenderContext,
+  MessageSenderSlot,
+  type RenderMessageSender,
+} from "../timeline/message-sender";
 import { formatClockTime, formatRelativeTime, truncate } from "../lib/format";
 import { prefersReducedMotion } from "../lib/motion";
 import {
@@ -48,11 +91,27 @@ import {
   type OlderHistoryLoadReceipt,
   type OlderHistoryLoader,
 } from "../older-history";
-import { Markdown } from "./markdown";
+import { Markdown, type MarkdownProps } from "./markdown";
+import { linkifyText } from "./linkified-text";
+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,
@@ -89,6 +148,7 @@ import {
   type VideoArtifactPlaybackLoader,
   type ToolRegistry,
   type TurnSummaryOptions,
+  type TurnSummaryStatus,
   type UserMessageItem,
   type FoldRestingState,
   type WorkerCompletionItem,
@@ -99,42 +159,104 @@ import {
   useTurnSettleOpen,
 } from "../timeline";
 import { CopyHoverFrame } from "./copy-button";
+import { SecretAnswerChip } from "./secret-ref-chip";
+import { secretAnswerLabel } from "../human-input-model";
+import { TimelineAnnotationSourceRootContext } from "./timeline-annotation-reveal-context";
 import { GeneratedVideoPlayer } from "./generated-video-player";
 import {
   MACHINE_INPUT_META,
+  agentMemberSessionId,
+  agentMemberText,
+  agentMemberTitle,
   cleanMachineInputSummary,
+  isAgentMember,
   machineInputBatchLabel,
   machineInputSummaryIsUseful,
   readableMachineInputSource,
 } from "./machine-input-display";
+import { AgentRow, AgentRowSection, AgentRowText } from "../timeline/agent-row";
+import {
+  AgentIdentityProvider,
+  useAgentIdentity,
+  type ResolveSessionTitle,
+} from "../timeline/agent-identity";
+import { namedAgentTitle, type AgentTitleParts } from "../timeline/platform-activity-presentation";
 import { SESSION_STATUS_META, StatusDot } from "./session-status";
+import {
+  noticeDisplayText,
+  noticeIsResolvedApproval,
+  noticeTone,
+} from "../timeline/notice-presentation";
 import { TimelineComputeLabelProvider } from "../timeline/compute-label";
+import { ProviderLogoProvider } from "../timeline/provider-logo";
 import { EntranceAnimationProvider, useEntranceAnimation } from "../timeline/entrance";
+import {
+  AllowanceExhaustedRow,
+  AllowancePresentationProvider,
+  type RenderAllowanceExhausted,
+} from "../timeline/allowance-exhausted-row";
+import { SessionUsageLimitRow } from "../timeline/session-usage-limit-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;
+  /**
+   * A durable event sequence to open on once (an inbox item's or notification's
+   * moment): the timeline lands on the row that holds it, or the nearest row
+   * before it, instead of the latest message. Load the window around it first.
+   */
+  focusSequence?: number | 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;
+  /**
+   * Who sent a person's message, drawn above its bubble. Called only for
+   * messages that carry a sender; return null for the viewer's own messages
+   * or when the host has no identity to show. Omit to show no senders.
+   */
+  renderMessageSender?: RenderMessageSender | 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;
+  /**
+   * Name the agents this session spawns, messages, and hears from. Return the
+   * current display title for a session id, or null when unknown; the
+   * timeline falls back to the title given at spawn, then to generic copy.
+   * Keep the function identity stable across renders.
+   */
+  resolveSessionTitle?: ResolveSessionTitle | undefined;
   /**
    * Deep-link a memory row (a `memory.saved` / `memory.corrected` step) to its
    * record in the host's memory pane. Opt-in, exactly like `onReconnect`: the
    * library draws no "View in memory" affordance without a handler — the memory
    * row is then non-interactive rich content. This is the switch that makes the
-   * deep-link a first-party OpenGeni capability without other SDK consumers
+   * deep-link a first-party Opengeni capability without other SDK consumers
    * opting into it. The app supplies it (it owns routing to the memory pane).
    */
   onMemoryClick?: ((memoryId: string) => void) | undefined;
@@ -146,6 +268,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
@@ -166,6 +299,16 @@ 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 workspace image/file receipts through the authenticated host SDK. */
@@ -178,11 +321,22 @@ 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. */
@@ -201,13 +355,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;
@@ -246,6 +403,24 @@ const PIN_THRESHOLD_PX = 48;
  * line-sized streaming movement.
  */
 const JUMP_TO_LATEST_CATCHUP_DEBT_PX = 240;
+/**
+ * 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
@@ -254,13 +429,21 @@ const JUMP_TO_LATEST_CATCHUP_DEBT_PX = 240;
 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 bg-og-accent px-3 py-1.5 text-og-menu font-medium text-og-accent-fg sm:w-auto";
+  "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";
+/** How long live progress notes take to fold into (or out of) their work row. */
+const LIVE_NOTE_FOLD_MS = 220;
+/** The timeline list's `gap-5`; a folded note gives it back with `-mt-5`. */
+const LIVE_NOTE_GAP_PX = 20;
+/** Longest a bottom-space loan waits for an opening work list to grow into it. */
+const LIVE_NOTE_RESERVE_MS = 700;
+/** Lets a live work disclosure report whether it is open (see `reportLiveFold`). */
+const LiveNoteFoldContext = createContext<((workId: string, open: boolean) => void) | null>(null);
 
 // State: 0 underfill retry, 1 prefetch pending, 2 compatibility-settled,
 // 3 explicit no-progress waiting to become an underfill retry.
@@ -278,13 +461,18 @@ 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;
-    }) as OlderHistoryLoadReceipt | PromiseLike<unknown> | unknown;
+    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"
@@ -364,6 +552,49 @@ 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 };
+
+function readQuestionNav(node: HTMLElement): QuestionNav | null {
+  const view = node.getBoundingClientRect();
+  const prompts = [...node.querySelectorAll<HTMLElement>("[data-og-prompt]")].flatMap((prompt) => {
+    const key = prompt.dataset.ogGroupKey;
+    if (!key) return [];
+    const bounds = prompt.getBoundingClientRect();
+    return [{ key, top: bounds.top, bottom: bounds.bottom }];
+  });
+  const key = questionNavTarget(prompts, { top: view.top, height: view.height });
+  return key ? { key, belowHeader: workHeaderPinned(node, view) } : null;
+}
+
+/** 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") {
@@ -379,13 +610,24 @@ function cssEscapeAttribute(value: string): string {
  * with a "jump to latest" affordance when the reader scrolls back.
  */
 export function MessageTimeline({
+  resolveLink,
+  renderInteractiveBlock,
+  userMessageDisclosureLabels,
+  searchTarget,
+  focusSequence,
   events,
   items,
   status: _status,
+  renderMessageActions,
+  renderMessageSender,
   renderMessageText,
   onOpenSession,
+  resolveSessionTitle,
   onMemoryClick,
   onReconnect,
+  renderAuthNeeded,
+  renderAllowanceExhausted,
+  allowanceExhaustedLabels,
   shouldRenderAuthNeeded,
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
@@ -393,9 +635,13 @@ export function MessageTimeline({
   loadRetainedArtifact,
   loadVideoArtifactPlayback,
   computeLabel = null,
+  genieLoading,
   turnSummary,
   autoFollow = true,
   onAnnotate,
+  questionNavMinViewportHeight = 0,
+  draftAnnotations,
+  onDraftAnnotationSelect,
   hasOlder = false,
   loadingOlder = false,
   onLoadOlder,
@@ -409,6 +655,7 @@ export function MessageTimeline({
   emptyState,
   className,
 }: MessageTimelineProps) {
+  const formatError = useErrorMessage();
   const resolvedItems = useMemo(() => {
     const projectedItems = items ?? buildTimeline(events ?? []);
     if (!shouldRenderAuthNeeded) {
@@ -418,9 +665,134 @@ export function MessageTimeline({
       (item) => item.kind !== "auth-needed" || shouldRenderAuthNeeded(item),
     );
   }, [items, events, shouldRenderAuthNeeded]);
-  const sourceItems = items || events;
+  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}
+                softLineBreaks
+                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 allGroups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
+  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) {
@@ -440,6 +812,11 @@ export function MessageTimeline({
   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);
@@ -461,6 +838,17 @@ export function MessageTimeline({
   );
   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
@@ -507,7 +895,7 @@ export function MessageTimeline({
    * jumps (Vimium) settle via scrollend while the camera is idle.
    */
   const readerIntentArmRef = useRef(false);
-  /** Gesture-start geometry; cumulative tiny pointer scrolls share one budget. */
+  /** 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
@@ -533,6 +921,191 @@ export function MessageTimeline({
   // deliberate chip remounts (activity→turn wrap, nested key flips) so a fold
   // that already settled closed — or that the reader closed — never reopens.
   const foldMemoryRef = useRef<Map<string, FoldRestingState>>(new Map());
+  // Live work disclosures that are open. While open, that turn's progress
+  // notes read inside the disclosure, so their copies above it fold away.
+  const [openLiveFolds, setOpenLiveFolds] = useState<ReadonlySet<string>>(() => new Set());
+  const openLiveFoldsRef = useRef<ReadonlySet<string>>(openLiveFolds);
+  const liveNoteIdsByWorkRef = useRef<ReadonlyMap<string, readonly string[]>>(new Map());
+  const liveFoldMotionRef = useRef<{ frame: number | null; finish: () => void } | null>(null);
+  // The bottom-space loan currently on the scroller, by owner.
+  const liveFoldReserveRef = useRef<object | null>(null);
+  // writeScrollTop is declared further down; the fold reaches it through this.
+  const writeScrollTopRef = useRef<(node: HTMLElement, top: number) => void>(() => {});
+  const reportLiveFold = useCallback((workId: string, open: boolean) => {
+    const current = openLiveFoldsRef.current;
+    if (current.has(workId) === open) return;
+    const next = new Set(current);
+    if (open) next.add(workId);
+    else next.delete(workId);
+    openLiveFoldsRef.current = next;
+    liveFoldMotionRef.current?.finish();
+    const scroller = scrollRef.current;
+    const rows = (liveNoteIdsByWorkRef.current.get(workId) ?? []).flatMap((id) => {
+      const row = scroller?.querySelector<HTMLElement>(
+        `[data-og-live-note-id="${cssEscapeAttribute(id)}"]`,
+      );
+      return row ? [row] : [];
+    });
+    if (!scroller || rows.length === 0) {
+      setOpenLiveFolds(next);
+      return;
+    }
+    const header = scroller.querySelector<HTMLElement>(
+      `[data-og-work-id="${cssEscapeAttribute(workId)}"] [data-og-work-header="outer"]`,
+    );
+    const viewTop = scroller.getBoundingClientRect().top;
+    const headerTop = header?.getBoundingClientRect().top;
+    if (
+      !open &&
+      header &&
+      headerTop !== undefined &&
+      (headerTop < viewTop || headerTop > viewTop + scroller.clientHeight)
+    ) {
+      // Closed from the row's sticky header after reading down the list: the
+      // row is no longer where the reader is. Like any big collapse, land on
+      // it in one step — the notes return above and the closed row rests at
+      // the bottom edge — rather than animating content the reader can't see.
+      setOpenLiveFolds(next);
+      requestFrame(() =>
+        requestFrame(() => {
+          const row = header.closest<HTMLElement>("[data-og-timeline-group-anchor]");
+          if (!row?.isConnected) return;
+          const box = row.getBoundingClientRect();
+          const top = scroller.getBoundingClientRect().top;
+          const bottom = top + scroller.clientHeight;
+          // + the scroller's pb-6, as at the true end.
+          if (box.bottom > bottom || box.top < top)
+            writeScrollTopRef.current(scroller, scroller.scrollTop + box.bottom - bottom + 24);
+          scheduleQuestionNavRef.current();
+        }),
+      );
+      return;
+    }
+    // Opening a live row near the bottom drops its one-line preview while its
+    // list grows from nothing; closing shrinks the list before the notes have
+    // grown back. For that moment the page is shorter than where the reader
+    // is, so the browser would clamp the scroll and everything would drop.
+    // This runs before that frame paints: keep the reader's position and lend
+    // one screen of space at the bottom (the shortfall keeps changing through
+    // the commit) until the content has grown back into it.
+    const readerTop = lastScrollTopRef.current;
+    const reserve = readerTop > 0.5 ? scroller.clientHeight : 0;
+    const loan = {};
+    if (reserve > 0) {
+      liveFoldReserveRef.current = loan;
+      scroller.style.paddingBottom = `calc(1.5rem + ${reserve}px)`;
+      if (Math.abs(scroller.scrollTop - readerTop) > 0.5)
+        writeScrollTopRef.current(scroller, readerTop);
+    }
+    const releaseReserve = (deadline: number) => {
+      // Only this motion's loan; a newer toggle may have replaced it.
+      if (reserve === 0 || liveFoldReserveRef.current !== loan) return;
+      const needed = scroller.scrollTop + scroller.clientHeight - (scroller.scrollHeight - reserve);
+      if (needed > 0.5 && performance.now() < deadline && scroller.isConnected) {
+        requestFrame(() => releaseReserve(deadline));
+        return;
+      }
+      liveFoldReserveRef.current = null;
+      scroller.style.removeProperty("padding-bottom");
+    };
+    // The notes fold into (or out of) the work row in one short motion. The
+    // row glides to where it should rest: opening, into the first note's place
+    // (or the top edge, when that note was above view) so its list starts just
+    // beneath; closing, down below its returning notes but never past the
+    // bottom edge. When everything is in view that is exactly what happens on
+    // its own; otherwise the scroll is written in the same frame as the
+    // heights, so it cannot lag. Native scroll anchoring is suspended for the
+    // motion; inline styles pin the current look across the state commit, end
+    // exactly at the classes' resting geometry, and are then removed.
+    const workRow = header?.closest<HTMLElement>("[data-og-timeline-group-anchor]") ?? null;
+    const rowStart = workRow?.getBoundingClientRect().top;
+    const viewBottom = viewTop + scroller.clientHeight;
+    let landing =
+      open && rowStart !== undefined
+        ? Math.max(rows[0]!.getBoundingClientRect().top, viewTop)
+        : null;
+    const heights = rows.map((row) => (open ? row.offsetHeight : 0));
+    const apply = (progress: number) => {
+      const shown = open ? 1 - progress : progress;
+      rows.forEach((note, index) => {
+        // The list gap travels inside the row as padding (margin cancels it),
+        // so a shrinking row never overlaps the one above it mid-motion.
+        note.style.marginTop = `${-LIVE_NOTE_GAP_PX}px`;
+        note.style.paddingTop = `${LIVE_NOTE_GAP_PX * shown}px`;
+        note.style.height = `${(heights[index]! + LIVE_NOTE_GAP_PX) * shown}px`;
+        note.style.opacity = String(shown);
+      });
+      if (workRow && rowStart !== undefined && landing !== null) {
+        const drift =
+          workRow.getBoundingClientRect().top - (rowStart + (landing - rowStart) * progress);
+        if (Math.abs(drift) > 0.5) writeScrollTopRef.current(scroller, scroller.scrollTop + drift);
+      }
+    };
+    for (const row of rows) {
+      row.style.boxSizing = "border-box";
+      row.style.overflow = "hidden";
+      row.style.overflowAnchor = "none";
+    }
+    scroller.style.overflowAnchor = "none";
+    apply(0);
+    const fold: { frame: number | null; finish: () => void } = {
+      frame: null,
+      finish: () => {
+        if (fold.frame != null) cancelFrame(fold.frame);
+        for (const row of rows) {
+          for (const property of [
+            "height",
+            "margin-top",
+            "padding-top",
+            "opacity",
+            "overflow",
+            "overflow-anchor",
+            "box-sizing",
+          ])
+            row.style.removeProperty(property);
+        }
+        scroller.style.removeProperty("overflow-anchor");
+        releaseReserve(performance.now() + LIVE_NOTE_RESERVE_MS);
+        // The row may now be pinned to the top without any scroll: re-place
+        // the up arrow (it sits below a pinned work header).
+        scheduleQuestionNavRef.current();
+        if (liveFoldMotionRef.current === fold) liveFoldMotionRef.current = null;
+      },
+    };
+    liveFoldMotionRef.current = fold;
+    const duration = prefersReducedMotion() ? 0 : LIVE_NOTE_FOLD_MS;
+    let began: number | null = null;
+    const step = (now: number) => {
+      fold.frame = null;
+      if (!rows.every((row) => row.isConnected)) return fold.finish();
+      if (!open && began === null) {
+        // Unfolding: the natural heights are known only once the folded
+        // class is gone; the inline styles still hold them at zero.
+        rows.forEach((note, index) => (heights[index] = note.scrollHeight));
+        if (workRow && rowStart !== undefined) {
+          const returning = heights.reduce((sum, height) => sum + height + LIVE_NOTE_GAP_PX, 0);
+          // The closed row is its header plus one preview line (its list is
+          // still collapsing now, so the row's own height is not final yet).
+          const closedRow = 2 * (header?.getBoundingClientRect().height ?? 0);
+          const lowest = viewBottom - closedRow - 24;
+          landing = Math.min(rowStart + returning, Math.max(lowest, rowStart));
+        }
+      }
+      began ??= now;
+      const linear = duration === 0 ? 1 : Math.min(1, (now - began) / duration);
+      apply(1 - (1 - linear) ** 3);
+      if (linear < 1) fold.frame = requestFrame(step);
+      else fold.finish();
+    };
+    fold.frame = requestFrame(step);
+    setOpenLiveFolds(next);
+  }, []);
+  useEffect(
+    () => () => {
+      liveFoldMotionRef.current?.finish();
+    },
+    [],
+  );
   const userMessageDisclosureMemoryRef = useRef<Map<string, boolean>>(new Map());
   const seenActivityIdsRef = useRef<Set<string>>(new Set());
   const firstItemGroupKeyRef = useRef<string | null>(null);
@@ -557,6 +1130,34 @@ export function MessageTimeline({
     previousBulkFirstKeyRef.current !== firstGroupKey;
   const bulkRender = allGroups.length > 0 && (bulkActive || firstKeyChangedForBulk);
   const groups = useStableTimelineGroupKeys(allGroups, !bulkRender);
+  // Each live progress note → whether its turn's work disclosure is open.
+  const [liveNoteFolds, liveNoteIdsByWork] = useMemo(() => {
+    const folds = new Map<string, boolean>();
+    const byWork = new Map<string, readonly string[]>();
+    for (const { group } of groups) {
+      if (group.kind !== "activity" || !group.work?.liveNoteIds) continue;
+      byWork.set(group.id, group.work.liveNoteIds);
+      for (const id of group.work.liveNoteIds) folds.set(id, openLiveFolds.has(group.id));
+    }
+    return [folds, byWork] as const;
+  }, [groups, openLiveFolds]);
+  useLayoutEffect(() => {
+    liveNoteIdsByWorkRef.current = liveNoteIdsByWork;
+  }, [liveNoteIdsByWork]);
+  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) {
@@ -611,6 +1212,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) {
@@ -620,6 +1224,7 @@ export function MessageTimeline({
       programmaticScrollRef.current -= 1;
     }
   }, []);
+  writeScrollTopRef.current = writeScrollTop;
 
   const cancelLeaveFallback = useCallback(() => {
     if (leaveFallbackRafRef.current != null) {
@@ -648,29 +1253,43 @@ export function MessageTimeline({
   }, []);
 
   /** 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;
-      }
-      clearReaderIntent();
-      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, clearReaderIntent, 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
@@ -691,7 +1310,7 @@ export function MessageTimeline({
         clearPendingReaderLeave();
         return;
       }
-      releasePinFromReader(node);
+      releasePinFromReader();
       rearmOlderPrefetchAfterLeavingTop(node);
     },
     [autoFollow, clearPendingReaderLeave, rearmOlderPrefetchAfterLeavingTop, releasePinFromReader],
@@ -712,6 +1331,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;
@@ -728,13 +1363,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). */
@@ -748,6 +1387,7 @@ export function MessageTimeline({
     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 (
@@ -757,6 +1397,7 @@ export function MessageTimeline({
       return;
     }
     disclosureKeepsUnpinnedRef.current = false;
+    programmaticScrollRef.current = 0;
     const node =
       event.currentTarget instanceof HTMLElement ? event.currentTarget : scrollRef.current;
     readerIntentArmRef.current = true;
@@ -774,14 +1415,20 @@ 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(
@@ -864,22 +1511,33 @@ 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: {
-        renderMessageText,
+        renderMessageActions,
+        renderMessageText: renderSearchableMessageText,
         onOpenSession,
         onMemoryClick,
         onReconnect,
+        renderAuthNeeded,
         resolveProviderLogo,
         toolRegistry,
         loadRetainedScreenshot,
         loadRetainedArtifact,
         loadVideoArtifactPlayback,
+        genieLoading,
         turnSummary,
       },
     }),
@@ -890,14 +1548,30 @@ export function MessageTimeline({
       onMemoryClick,
       onOpenSession,
       onReconnect,
-      renderMessageText,
+      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;
@@ -947,10 +1621,78 @@ export function MessageTimeline({
       // 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);
+      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();
+  };
+
+  // Land once on the moment an inbox item or a notification points at.
+  // Deliberately dependency-free: it retries after every commit until the
+  // target row is laid out, and the ref guard makes the state update run once
+  // per focus sequence, so it cannot chain renders.
+  const focusedSequenceRef = useRef<number | null>(null);
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- retries each commit; ref-guarded to run once
+  useLayoutEffect(() => {
+    if (!focusSequence || focusedSequenceRef.current === focusSequence) return;
+    const index = timelineGroupIndexAtSequence(
+      groups.map((entry) => entry.group),
+      focusSequence,
+    );
+    const key = index >= 0 ? groups[index]?.key : undefined;
+    const node = scrollRef.current;
+    if (!key || !node || contentTopOf(node, key) === null) return;
+    focusedSequenceRef.current = focusSequence;
+    setRevealed(true);
+    jumpToQuestion(key);
+  });
+
   const driveFollowRef = useRef<(node: HTMLElement, now?: number) => void>(
     requestOlderIfUnderfilled as (node: HTMLElement, now?: number) => void,
   );
@@ -1103,15 +1845,28 @@ export function MessageTimeline({
       previousMaxScroll <= 1 ||
       previousMaxScroll - previousScrollTop < Math.min(PIN_THRESHOLD_PX, previousMaxScroll);
     const firstItemChanged = !!previousFirstItemId && firstItemId !== previousFirstItemId;
-    const prepended =
-      firstItemChanged && resolvedItems.some((item) => item.id === 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 &&
-      firstItemChanged &&
-      !prepended
+      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.
@@ -1183,17 +1938,23 @@ export function MessageTimeline({
         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 || olderLoadAttemptRef.current)
+        (wasAtLiveTailBeforeCommit || underfillOwned)
       ) {
-        // A pending short-window load owns the prepend even when live growth
-        // has left its still-pinned camera with raw geometry debt. Unrelated
-        // prepends retain the prior-tip fallback so a stale pin after an
-        // extension/programmatic history jump still restores its row anchor.
+        // 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 {
@@ -1206,6 +1967,22 @@ export function MessageTimeline({
           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).
@@ -1227,6 +2004,7 @@ export function MessageTimeline({
     if (prepended && !pinnedRef.current && node.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
       rearmOlderPrefetchAfterLeavingTop(node);
     }
+    scheduleQuestionNav();
     previousFirstItemIdRef.current = firstItemId;
     previousScrollHeightRef.current = node.scrollHeight;
     syncScrollBaseline(node);
@@ -1257,6 +2035,8 @@ export function MessageTimeline({
           : 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
@@ -1283,6 +2063,19 @@ export function MessageTimeline({
     // 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);
   });
@@ -1453,6 +2246,7 @@ export function MessageTimeline({
     loadingOlder,
     olderBoundaryKey,
     olderPrefetchArmed,
+    olderDemand,
     onLoadOlder,
     requestOlderIfUnderfilled,
   ]);
@@ -1474,15 +2268,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;
@@ -1504,6 +2300,9 @@ 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;
@@ -1535,6 +2334,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);
@@ -1557,6 +2358,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.
@@ -1565,6 +2375,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;
@@ -1598,6 +2411,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
@@ -1632,7 +2458,7 @@ export function MessageTimeline({
       // Pointer-dragged scroll-up away from tip. Layout churn never arms this.
       if (readerArmed && cumulativeReaderUp > TIP_FOLLOW_READER_UP_EPS_PX && !nearBottomPinned) {
         clearReaderIntent();
-        releasePinFromReader(node);
+        requestEarlierFromReader();
         rearmOlderPrefetchAfterLeavingTop(node);
         return;
       }
@@ -1657,15 +2483,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
@@ -1676,8 +2533,15 @@ 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);
@@ -1693,6 +2557,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();
@@ -1707,263 +2574,486 @@ export function MessageTimeline({
     }
     releasePinAfterScrollSettled(node);
   };
+  // React 18 has no `onScrollEnd` prop: it warns and never calls it, while
+  // `supportsScrollEndEvent()` still makes the camera wait for scrollend. A
+  // native listener (re-bound each commit, so it always sees this render's
+  // handler and scroller) works on every supported React version.
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (!node) return;
+    node.addEventListener("scrollend", onScrollEnd);
+    return () => node.removeEventListener("scrollend", onScrollEnd);
+  });
 
-  return (
-    <LightboxProvider>
-      <FoldMemoryProvider value={foldMemoryRef.current}>
-        <SeenActivityIdsProvider value={seenActivityIdsRef.current}>
-          <TimelineComputeLabelProvider value={computeLabel ?? null}>
-            <EntranceAnimationProvider value={false}>
-              <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.
+  const timeline = (
+    <AllowancePresentationProvider
+      render={renderAllowanceExhausted}
+      labels={allowanceExhaustedLabels}
+    >
+      <LightboxProvider>
+        <FoldMemoryProvider value={foldMemoryRef.current}>
+          <LiveNoteFoldContext.Provider value={reportLiveFold}>
+            <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}
+                        {/* 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
-                        ? (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, entranceEnabled }, index) => {
-                        return (
-                          <TimelineGroupEntry
-                            key={key}
-                            groupKey={key}
-                            group={group}
-                            nextGroup={groups[index + 1]?.group}
-                            entranceEnabled={entranceEnabled}
-                            liveEntranceEnabled={
-                              group.kind === "activity" ? !bulkRender : undefined
+                          ref={scrollRef}
+                          data-og-timeline-scroller=""
+                          data-og-bottom-follow={
+                            autoFollow && pinned && !hasNewer ? "true" : "false"
+                          }
+                          tabIndex={-1}
+                          onScroll={onScroll}
+                          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;
                             }
-                            context={timelineGroupEntryContext}
-                          />
-                        );
-                      })}
-                      {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"
-                        />
-                      ) : null}
-                    </div>
-                  </div>
-                  <AnimatePresence>
-                    {loadingOlder ||
-                    loadingOldest ||
-                    (hasOlder && onJumpToStart && olderPrefetchArmed) ||
-                    underfillRetryReady ? (
-                      // 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"
-                      >
-                        {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;
+                            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,
+                                );
                               }
-                              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;
-                                  }
-                                },
-                              );
+                              releasePinFromReader();
+                              disclosureKeepsUnpinnedRef.current = true;
+                            }
+                          }}
+                          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(
+                            // 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]",
+                          )}
+                        >
+                          <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;
                             }}
-                            className="rounded-full border border-og-border px-3 py-1.5 text-og-control"
                           >
-                            {underfillRetryReady ? "Retry earlier activity" : "Jump to start"}
-                          </button>
+                            <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
+                                      }
+                                      noteFolded={
+                                        group.kind === "item"
+                                          ? liveNoteFolds.get(group.item.id)
+                                          : 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}
-                      </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={LOADING_CHIP_CLASS}>
-                          <span className="og-shimmer-text">Loading later activity…</span>
-                        </span>
-                      </motion.div>
-                    ) : null}
-                  </AnimatePresence>
-                  <AnimatePresence>
-                    {((!pinned && autoFollow) || hasNewer || canSkipTipCatchup) && autoFollow ? (
-                      <motion.button
-                        type="button"
-                        data-og-jump-to-latest=""
-                        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;
+
+                        <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(current);
+                                    snapToBottom(node);
                                   }
-                                },
-                                () => {
-                                  // The tip reload failed (ordinary network error):
-                                  // an armed latch would fire a surprise snap when
-                                  // the reader later pages to the tip themselves.
-                                  wantPinRef.current = false;
-                                },
-                              );
-                            } else if (node) {
-                              // No tip reload available: jump within the in-memory
-                              // window so the newer sentinel can page forward; the
-                              // latch pins if the tip window eventually lands.
-                              snapToBottom(node);
-                            }
-                            return;
-                          }
-                          const node = scrollRef.current;
-                          if (node) {
-                            applyPinned(true);
-                            snapToBottom(node);
-                          }
-                        }}
-                        className={cn(
-                          "absolute 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",
-                        )}
-                      >
-                        <ArrowDownIcon className="size-3.5" />
-                        Jump to latest
-                      </motion.button>
-                    ) : null}
-                  </AnimatePresence>
-                </div>
-              </TooltipProvider>
-            </EntranceAnimationProvider>
-          </TimelineComputeLabelProvider>
-        </SeenActivityIdsProvider>
-      </FoldMemoryProvider>
-    </LightboxProvider>
+                                }}
+                                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>
+          </LiveNoteFoldContext.Provider>
+        </FoldMemoryProvider>
+      </LightboxProvider>
+    </AllowancePresentationProvider>
+  );
+  // Agent-authored object links resolve through the host, never the console.
+  return (
+    <OpenGeniLinkProvider resolveLink={resolveLink}>
+      <MessageSenderContext.Provider value={renderMessageSender}>
+        <AgentIdentityProvider
+          items={resolvedItems}
+          resolveSessionTitle={resolveSessionTitle}
+          onOpenSession={onOpenSession}
+        >
+          <ProviderLogoProvider value={resolveProviderLogo}>{timeline}</ProviderLogoProvider>
+        </AgentIdentityProvider>
+      </MessageSenderContext.Provider>
+    </OpenGeniLinkProvider>
   );
 }
 
@@ -2001,7 +3091,11 @@ function useStableTimelineGroupKeys(
     const previousByItemId = new Map<string, KeyedTimelineGroup>();
     for (const previous of previousRef.current) {
       for (const itemId of timelineGroupItemIds(previous.group)) {
-        previousByItemId.set(itemId, previous);
+        // A live progress note is both its own row and listed in its work
+        // history. Its own row owns the id, so the note keeps its identity.
+        if (previous.group.kind === "item" || !previousByItemId.has(itemId)) {
+          previousByItemId.set(itemId, previous);
+        }
       }
     }
 
@@ -2014,7 +3108,24 @@ function useStableTimelineGroupKeys(
         // 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)) {
+        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;
         }
@@ -2134,8 +3245,14 @@ type TimelineGroupEntryProps = {
   groupKey: string;
   group: TimelineGroup;
   nextGroup?: TimelineGroup | undefined;
+  startupDismissed: boolean;
   entranceEnabled: boolean;
   liveEntranceEnabled?: boolean | undefined;
+  /**
+   * Present for a live progress note: true while its turn's work disclosure is
+   * open (the note then reads inside it), false while it reads here.
+   */
+  noteFolded?: boolean | undefined;
   context: TimelineGroupEntryContext;
 };
 
@@ -2145,15 +3262,20 @@ type TimelineGroupEntryContext = {
 };
 
 type TimelineGroupBehaviorProps = {
-  renderMessageText: MessageTimelineProps["renderMessageText"];
+  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"];
 };
 
@@ -2166,10 +3288,13 @@ const TimelineGroupEntry = memo(function TimelineGroupEntry({
   groupKey,
   group,
   nextGroup,
+  startupDismissed,
   entranceEnabled,
   liveEntranceEnabled,
+  noteFolded,
   context,
 }: TimelineGroupEntryProps) {
+  const reducedMotion = useReducedMotion();
   const { behavior, userMessageDisclosureContext } = context;
   const contextCompactionCount =
     group.kind === "turn"
@@ -2180,38 +3305,91 @@ const TimelineGroupEntry = memo(function TimelineGroupEntry({
           nextGroup.item.phase === "compacted"
         ? 1
         : 0;
-  return (
-    <div data-og-timeline-group-anchor="" data-og-group-key={groupKey}>
-      <EntranceAnimationProvider value={entranceEnabled} liveValue={liveEntranceEnabled}>
-        <TimelineGroupRenderBoundary resetKeys={[group, behavior]}>
-          <UserMessageDisclosureProvider value={userMessageDisclosureContext}>
-            <TimelineGroupView
-              {...behavior}
-              group={group}
-              foldLiveCluster={isAgentProgress(nextGroup)}
-              trailingAgentText={trailingAgentTextAfterTurn(group, nextGroup)}
-              contextCompactionCount={
-                contextCompactionCount > 0 ? contextCompactionCount : undefined
-              }
-            />
-          </UserMessageDisclosureProvider>
-        </TimelineGroupRenderBoundary>
-      </EntranceAnimationProvider>
-    </div>
+  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>
   );
-});
-
-// The full loaded window stays mounted, so settled history rows must be cheap
-// on every commit: the stable-key projection reuses render-equivalent group
+  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}
+        // A live progress note reads inside its open work row instead; folded,
+        // it takes no space and also gives back the list's gap-5 above it.
+        data-og-live-note={noteFolded === undefined ? undefined : noteFolded ? "folded" : "shown"}
+        data-og-live-note-id={
+          noteFolded !== undefined && group.kind === "item" ? group.item.id : undefined
+        }
+        aria-hidden={noteFolded || undefined}
+        inert={noteFolded || undefined}
+        className={
+          noteFolded ? "-mt-5 h-0 overflow-hidden opacity-0 [overflow-anchor:none]" : 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: 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,
@@ -2221,16 +3399,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;
@@ -2241,6 +3423,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. */
@@ -2261,15 +3444,29 @@ 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();
+  const reportLiveFold = useContext(LiveNoteFoldContext);
   // 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" && !!(group.outcome || (foldLiveCluster && clusterIsSettled(group)));
-  const containsGeneratedImage = timelineGroupContainsGeneratedImage(group);
+    group.kind === "activity" &&
+    !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);
@@ -2278,7 +3475,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) {
@@ -2289,9 +3486,167 @@ const TimelineGroupView = memo(function TimelineGroupView({
     );
   }
   const settleFold =
-    group.kind === "turn" ? !!(enter && !insideTurn && !turnDefaultOpen) : liveActivitySettle;
+    !turnSummary?.rolling &&
+    (group.kind === "turn" ? !!(enter && !insideTurn && !turnDefaultOpen) : liveActivitySettle);
   switch (group.kind) {
     case "activity":
+      if (group.work) {
+        const preparing = isPreparingWork(group, { startupDetails, startupDismissed });
+        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 workStatus = readableWorkStatus({ ...group, work: group.work });
+        const status: TurnSummaryStatus =
+          workStatus.kind === "working"
+            ? {
+                ...workStatus,
+                preview: readableWorkShowsPreview(group) ? (
+                  <RollingActivity
+                    items={group.items}
+                    toolRegistry={toolRegistry}
+                    showCount={false}
+                  />
+                ) : undefined,
+              }
+            : workStatus.kind === "waiting"
+              ? {
+                  kind: "waiting",
+                  label: workStatus.label,
+                  since: workStatus.since,
+                  // One quiet line under the row saying what the wait needs,
+                  // kept visible when the work is expanded; never a second
+                  // warning banner.
+                  guidance: workStatus.detail ? (
+                    <span
+                      data-og-exchange-wait-detail=""
+                      className="block text-og-sm text-og-fg-subtle"
+                    >
+                      {workStatus.detail}
+                    </span>
+                  ) : undefined,
+                }
+              : group.work.cycles?.summary
+                ? {
+                    ...workStatus,
+                    // Folded quiet cycles say what the agent is waiting on.
+                    preview: (
+                      <p
+                        data-og-cycles-summary=""
+                        className="truncate text-og-sm text-og-fg-subtle"
+                        title={group.work.cycles.summary}
+                      >
+                        {group.work.cycles.summary}
+                      </p>
+                    ),
+                  }
+                : workStatus;
+        return (
+          // Marks this work row for the live-note fold (list keys can be carried
+          // over from an earlier row, so they are not the work id).
+          <div className="contents" data-og-work-id={group.id}>
+            <TurnSummary
+              key="work"
+              items={group.items}
+              bare={insideTurn || undefined}
+              status={status}
+              // A wait before any visible work has nothing to reveal.
+              expandable={readableWorkHasDetails(
+                { ...group, work: group.work },
+                { startupDetails },
+              )}
+              outcome={group.outcome}
+              failureText={group.failureText}
+              foldKey={group.id}
+              defaultOpen={readableWorkDefaultOpen(group)}
+              facets={turnSummary?.facets}
+              contextCompactionCount={compactedLandmarkCount(group.work.details)}
+              onOpenStateChange={
+                group.work.liveNoteIds?.length && reportLiveFold
+                  ? (open) => reportLiveFold(group.id, open)
+                  : undefined
+              }
+            >
+              <TurnRailFrame compact>
+                {renderFoldedGroups(
+                  group.work.details,
+                  {
+                    renderMessageActions,
+                    renderMessageText,
+                    onOpenSession,
+                    onMemoryClick,
+                    onReconnect,
+                    renderAuthNeeded,
+                    resolveProviderLogo,
+                    toolRegistry,
+                    loadRetainedScreenshot,
+                    loadRetainedArtifact,
+                    loadVideoArtifactPlayback,
+                    turnSummary,
+                  },
+                  true,
+                )}
+              </TurnRailFrame>
+            </TurnSummary>
+          </div>
+        );
+      }
+      // 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
@@ -2303,11 +3658,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}
@@ -2345,10 +3711,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}
@@ -2371,54 +3758,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}
@@ -2443,8 +3816,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}
@@ -2453,6 +3828,94 @@ 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;
+};
+
+/**
+ * A search hit inside a nested work row opens that row only. The reveal key
+ * is provided per top-level group, so without narrowing every nested row of
+ * a folded quiet-cycle run would open at once.
+ */
+function NestedSearchReveal({ group, children }: { group: TimelineGroup; children: ReactNode }) {
+  const revealKey = useContext(TimelineSearchRevealContext);
+  const itemId = useMemo(() => {
+    if (!revealKey) return null;
+    try {
+      const [id] = JSON.parse(revealKey) as unknown[];
+      return typeof id === "string" ? id : null;
+    } catch {
+      return null;
+    }
+  }, [revealKey]);
+  const value = itemId && timelineGroupItemIds(group).includes(itemId) ? revealKey : null;
+  return (
+    <TimelineSearchRevealContext.Provider value={value}>
+      {children}
+    </TimelineSearchRevealContext.Provider>
+  );
+}
+
+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
+          }
+        >
+          <NestedSearchReveal group={child}>
+            <TimelineGroupView {...behavior} group={child} insideTurn startupDismissed />
+          </NestedSearchReveal>
+        </div>
+      ) : (
+        <TimelineGroupView {...behavior} group={child} insideTurn nestClusterChips={nestClusters} />
+      )}
+    </TimelineGroupRenderBoundary>
+  ));
+}
+
 /**
  * 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
@@ -2464,9 +3927,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>
   );
 }
 
@@ -2513,26 +3983,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);
   }
@@ -2550,25 +4009,13 @@ 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)
   );
 }
 
 /** No item still running or streaming — the only state safe to fold live.
     Position alone is a broken proxy: a pending queued message (or any trailing
     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") {
-      return !item.streaming;
-    }
-    // Memory writes and fleet observations are discrete, already-settled events.
-    if (item.kind === "memory" || item.kind === "fleet-decision") {
-      return true;
-    }
-    return item.status !== "running";
-  });
-}
 
 /** Settled activity clusters that could become nested chips under a turn. */
 function foldableActivityClusterCount(groups: readonly TimelineGroup[]): number {
@@ -2581,18 +4028,6 @@ function foldableActivityClusterCount(groups: readonly TimelineGroup[]): number
   return count;
 }
 
-function flattenActivityItems(groups: TimelineGroup[]): ActivityItem[] {
-  const items: ActivityItem[] = [];
-  for (const group of groups) {
-    if (group.kind === "activity") {
-      items.push(...group.items);
-    } else if (group.kind === "turn") {
-      items.push(...flattenActivityItems(group.groups));
-    }
-  }
-  return items;
-}
-
 /** Assistant prose inside a turn fold (mid-turn narration), joined for copy. */
 function collectAgentMessageText(groups: readonly TimelineGroup[]): string {
   const parts: string[] = [];
@@ -2602,6 +4037,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) {
@@ -2622,6 +4069,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);
@@ -2676,15 +4126,6 @@ function collectTurnCopyText(
   return parts.join("\n\n");
 }
 
-function durationBetween(startedAt: string, endedAt: string): number | undefined {
-  const started = Date.parse(startedAt);
-  const ended = Date.parse(endedAt);
-  if (!Number.isFinite(started) || !Number.isFinite(ended) || ended < started) {
-    return undefined;
-  }
-  return ended - started;
-}
-
 /* --- single rows ------------------------------------------------------------ */
 
 /**
@@ -2694,28 +4135,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":
@@ -2724,7 +4182,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} />;
@@ -2732,11 +4194,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;
@@ -2752,6 +4216,8 @@ const COMPACTION_TRIGGER_LABEL: Record<NonNullable<ContextCompactionItem["trigge
 
 function CompactionRow({ item }: { item: ContextCompactionItem }) {
   const enter = useEntranceAnimation();
+  const detailsId = useId();
+  const [detailsOpen, setDetailsOpen] = useState(false);
   const trigger =
     item.trigger && item.phase !== "started" ? COMPACTION_TRIGGER_LABEL[item.trigger] : null;
   const before =
@@ -2769,56 +4235,97 @@ function CompactionRow({ item }: { item: ContextCompactionItem }) {
         ? before && after
           ? `Conversation history compacted · ~${before} → ~${after} estimated history tokens`
           : "Conversation history compacted"
-        : "Couldn’t compact conversation history";
+        : compactionSkipTitle(item.skipReason);
   const subtitle =
     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"
-        ? WAITING_PILL_CLASS
-        : "border-og-border bg-og-surface-1 text-og-fg-muted";
+  // Provider identifiers are diagnostics: one short line up front, the rest on demand.
+  const details = compactionFailureDetails(item);
+  const failed = item.phase === "skipped" && item.skipReason === "summarization_failed";
+  const pill = failed
+    ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed"
+    : item.phase === "started"
+      ? WAITING_PILL_CLASS
+      : NEUTRAL_PILL;
   return (
-    <div className={cn(enter && "animate-og-enter", "flex justify-center")}>
+    <div className={cn(enter && "animate-og-enter", "flex min-w-0 flex-col items-center gap-1.5")}>
       <div
         className={cn(
-          "inline-flex max-w-full flex-col items-center gap-0.5 rounded-full border px-3 py-1.5 text-og-sm",
+          "inline-flex min-w-0 max-w-full flex-col items-center gap-0.5 border px-3 py-1.5 text-og-sm",
+          // A failure's recovery step may wrap on narrow screens; a full pill
+          // radius would pinch its second line.
+          failed ? "rounded-og-lg" : "rounded-full",
           pill,
         )}
         role="status"
       >
-        <span className="inline-flex max-w-full items-center gap-1.5">
+        <span className="inline-flex min-w-0 max-w-full items-center gap-1.5">
           <ShrinkIcon className="size-3.5 shrink-0" />
-          <span className="truncate">
+          <span className="min-w-0 truncate">
             {title}
             {trigger ? ` · ${trigger}` : ""}
           </span>
         </span>
-        {subtitle ? <span className="truncate text-og-xs opacity-80">{subtitle}</span> : null}
+        {subtitle || details ? (
+          <span
+            className={cn(
+              "min-w-0 max-w-full text-og-xs",
+              failed ? "text-balance text-center" : "inline-flex items-center gap-1",
+            )}
+          >
+            {subtitle ? (
+              <span className={cn("opacity-80", !failed && "min-w-0 truncate")}>{subtitle}</span>
+            ) : null}
+            {subtitle && details && failed ? " " : null}
+            {details ? (
+              <button
+                type="button"
+                aria-expanded={detailsOpen}
+                aria-controls={detailsId}
+                onClick={() => setDetailsOpen((open) => !open)}
+                className={cn(
+                  "inline-flex shrink-0 items-center gap-0.5 whitespace-nowrap rounded-og-sm align-baseline font-medium underline-offset-2",
+                  "hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-current/40",
+                  "pointer-coarse:-my-2 pointer-coarse:px-1 pointer-coarse:py-2",
+                )}
+              >
+                Details
+                <ChevronDownIcon
+                  aria-hidden
+                  className={cn("size-3 transition-transform", detailsOpen && "rotate-180")}
+                />
+              </button>
+            ) : null}
+          </span>
+        ) : null}
       </div>
+      {details ? (
+        <div
+          id={detailsId}
+          hidden={!detailsOpen}
+          data-og-compaction-details=""
+          className="w-full max-w-md rounded-og-md border border-og-border bg-og-surface-1 px-3 py-2 text-left text-og-xs text-og-fg-muted"
+        >
+          {details.note ? <p className="mb-2">{details.note}</p> : null}
+          <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1">
+            {details.facts.map((fact) => (
+              <Fragment key={fact.label}>
+                <dt className="text-og-fg-subtle">{fact.label}</dt>
+                <dd className="max-h-40 min-w-0 overflow-auto whitespace-pre-wrap break-words font-mono">
+                  {fact.value}
+                </dd>
+              </Fragment>
+            ))}
+          </dl>
+        </div>
+      ) : null}
     </div>
   );
 }
 
-function compactionSkipSubtitle(reason: string | null): string {
-  switch (reason) {
-    case "no_history":
-      return "No active history to compact";
-    case "replacement_not_smaller":
-      return "Checkpoint would not reduce memory size";
-    case "replacement_unchanged":
-      return "Checkpoint made no progress";
-    case "summarization_failed":
-      return "Request it again to retry. Chat history is unchanged.";
-    default:
-      return "Compaction was not needed. Chat history is unchanged.";
-  }
-}
-
 /** Hover-reveal clock beside the copy control (sent / finished). */
 function MessageFooterTime({ occurredAt }: { occurredAt: string }) {
   return (
@@ -2837,9 +4344,11 @@ 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;
@@ -2849,6 +4358,7 @@ function UserMessageRow({
   return (
     <div className={cn(enter && "animate-og-enter", "flex justify-end")}>
       <div className="flex max-w-[85%] min-w-0 flex-col items-end gap-1">
+        <MessageSenderSlot item={item} />
         <CopyHoverFrame
           copyText={
             item.text ||
@@ -2858,22 +4368,30 @@ 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={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)
                 ) : (
                   <UserMessageBody messageId={item.id} text={item.text}>
-                    <Markdown>{item.text}</Markdown>
+                    <Markdown softLineBreaks>{item.text}</Markdown>
                   </UserMessageBody>
                 )}
               </div>
             ) : null}
             {(item.annotations?.length ?? 0) > 0 ? (
-              <TimelineAnnotationsChip
+              <TimelineAnnotationCards
                 annotations={item.annotations ?? []}
                 className={item.text ? "mt-2" : undefined}
               />
@@ -2883,30 +4401,43 @@ function UserMessageRow({
         {deliveryFailed ? (
           <div
             role="status"
-            className="flex max-w-full items-center gap-2 px-1 text-og-xs text-og-status-failed"
+            className="flex max-w-full flex-col items-start gap-1 px-1 text-og-xs text-og-status-failed"
           >
-            <span className="inline-flex items-center gap-1" title={item.delivery?.error}>
+            <span className="flex min-w-0 items-start gap-1">
               <TriangleAlertIcon className="size-3.5 shrink-0" aria-hidden="true" />
-              <span>Message not sent</span>
+              <span className="min-w-0 break-words">
+                {item.delivery?.error || "Message not sent"}
+              </span>
             </span>
-            {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 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>
@@ -2946,7 +4477,7 @@ function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
               item.questions.map((question, index) => (
                 <div key={question.id}>
                   {question.label ? (
-                    <p className="text-og-sm font-semibold text-og-fg">
+                    <p className="text-og-sm font-semibold text-og-fg [overflow-wrap:anywhere]">
                       {multipleQuestions ? (
                         <span className="mr-1.5 tabular-nums text-og-fg-muted">{index + 1}.</span>
                       ) : null}
@@ -2956,7 +4487,7 @@ function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
                   ) : null}
                   <p
                     className={cn(
-                      "text-og-md leading-6 text-og-fg",
+                      "text-og-md leading-6 text-og-fg [overflow-wrap:anywhere]",
                       question.label && "mt-0.5 text-og-sm text-og-fg-muted",
                     )}
                   >
@@ -2964,7 +4495,7 @@ function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
                       <span className="mr-1.5 tabular-nums text-og-fg-muted">{index + 1}.</span>
                     ) : null}
                     {!question.label && multipleQuestions ? " " : null}
-                    {question.prompt}
+                    {linkifyText(question.prompt)}
                   </p>
                 </div>
               ))
@@ -2998,7 +4529,12 @@ function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
                         </p>
                       ) : null}
                       <div className={cn("text-og-md text-og-fg", multipleQuestions && "mt-0.5")}>
-                        {answer.values.length > 1 ? (
+                        {answer.secret ? (
+                          <SecretAnswerChip
+                            result={answer.secret}
+                            label={secretAnswerLabel(answer.secret)}
+                          />
+                        ) : 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>
@@ -3039,7 +4575,11 @@ function humanInputConversationCopyText(item: HumanInputItem, settledLabel: stri
           item.questions.length > 1
             ? `${questionNumberById.get(answer.questionId) ?? index + 1}. `
             : ""
-        }${answer.label}: ${answer.values.join(", ") || "Answered"}`,
+        }${answer.label}: ${
+          answer.secret
+            ? `${secretAnswerLabel(answer.secret)} (${answer.secret.reference})`
+            : answer.values.join(", ") || "Answered"
+        }`,
     )
     .join("\n\n");
   return [questions, `${settledLabel}${answers ? `\n\n${answers}` : ""}`]
@@ -3049,9 +4589,11 @@ function humanInputConversationCopyText(item: HumanInputItem, settledLabel: stri
 
 function AgentMessageRow({
   item,
+  renderMessageActions,
   renderMessageText,
 }: {
   item: AgentMessageItem;
+  renderMessageActions?: ((item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
   renderMessageText?:
     | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
     | undefined;
@@ -3062,76 +4604,80 @@ function AgentMessageRow({
   const body = renderMessageText ? (
     renderMessageText(item.text, item)
   ) : (
-    <Markdown streaming={item.streaming}>{item.text}</Markdown>
+    <Markdown softLineBreaks streaming={item.streaming}>
+      {item.text}
+    </Markdown>
   );
   // 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>
   );
 }
 
 /**
- * A worker session reporting back to its manager. The child's completion arrives
- * as a `user.message` carrying a `childCompletion` payload (the raw message text
- * used to render as an "ugly" user bubble); it projects to a `worker-completion`
- * item and draws here as a quietly-confident card — an inbound result, not
- * something the human said. One glyph + one line carry the outcome; the worker's
- * full report, evidence, and any paused reason live behind a collapsed
- * disclosure, and a "View session" affordance deep-links into the child.
- *
- * Color follows the timeline's restraint: green only for a completed goal, the
- * waiting hue only for a paused one, red only for a failed child — everything
- * else is a neutral inbound card.
+ * A worker session reporting back to its manager in older history: the child's
+ * completion arrived as a `user.message` carrying a `childCompletion` payload.
+ * It draws as the same named agent row as every other inbound agent update:
+ * the outcome and goal on the row, the report, evidence, and any paused
+ * reason behind the disclosure, and a deep link into the child.
  */
 type WorkerCompletionMeta = {
-  label: string;
+  title: AgentTitleParts;
   icon: ComponentType<{ className?: string }>;
-  iconClass: string;
-  /** The 2px left-accent hue — color spent only on the exceptional outcomes. */
-  accentClass: string;
+  failed: boolean;
 };
 
-function workerCompletionMeta(item: WorkerCompletionItem): WorkerCompletionMeta {
+function workerCompletionMeta(
+  item: WorkerCompletionItem,
+  name: string | null,
+): WorkerCompletionMeta {
   if (item.childStatus === "failed") {
     return {
-      label: "Worker failed",
+      title: namedAgentTitle(name, "", " failed", "Worker failed"),
       icon: XCircleIcon,
-      iconClass: "text-og-status-failed",
-      accentClass: "border-og-status-failed/60",
+      failed: true,
     };
   }
   if (item.goalStatus === "paused") {
     return {
-      label: "Worker paused",
+      title: namedAgentTitle(name, "", " paused", "Worker paused"),
       icon: PauseCircleIcon,
-      iconClass: "text-og-status-waiting",
-      accentClass: "border-og-status-waiting/50",
+      failed: false,
     };
   }
   if (item.goalStatus === "completed") {
     return {
-      label: "Worker completed",
+      title: namedAgentTitle(name, "", " completed its goal", "Worker completed"),
       icon: CheckCircle2Icon,
-      iconClass: "text-og-status-idle",
-      accentClass: "border-og-status-idle/45",
+      failed: false,
     };
   }
   return {
-    label: "Worker reported back",
+    title: namedAgentTitle(name, "Result from ", "", "Worker reported back"),
     icon: BotIcon,
-    iconClass: "text-og-accent",
-    accentClass: "border-og-border-strong",
+    failed: false,
   };
 }
 
@@ -3143,14 +4689,12 @@ function WorkerCompletionRow({
   onOpenSession?: ((sessionId: string) => void) | undefined;
 }) {
   const enter = useEntranceAnimation();
-  const [open, setOpen] = useState(false);
-  const meta = workerCompletionMeta(item);
+  const identity = useAgentIdentity();
+  const meta = workerCompletionMeta(item, identity.titleFor(item.childSessionId));
   const Icon = meta.icon;
-  // The worker's own report is the substance behind the fold; evidence and any
-  // paused reason sit alongside it as quieter, labelled context.
   // "Paused because" only when the outcome actually IS a pause — completion
   // 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.
+  // worker's life, and a completed row must not show a pause section.
   const showPausedReason =
     item.childStatus !== "failed" && item.goalStatus === "paused" && !!item.pausedReason?.trim();
   const details: { label: string; value: string; muted?: boolean }[] = [
@@ -3162,82 +4706,44 @@ function WorkerCompletionRow({
       ? [{ label: "Paused because", value: item.pausedReason!.trim(), muted: true }]
       : []),
   ];
-  const hasDetails = details.length > 0;
   return (
     <div className={cn(enter && "animate-og-enter", "min-w-0")}>
-      {/* An inbound result, not a bubble: a 2px left accent carries the outcome —
-          no full frame, no surface fill. The report unfolds flush beneath. */}
-      <div className={cn("flex flex-col gap-2 border-l-2 pl-3", meta.accentClass)}>
-        <div className="flex items-start gap-2.5">
-          <span className={cn("mt-0.5 shrink-0", meta.iconClass)}>
-            <Icon className="size-4" />
-          </span>
-          <div className="min-w-0 flex-1">
-            <p className="text-og-base leading-5 text-og-fg">
-              <span className="font-medium">{meta.label}</span>
-              {item.goalText ? (
-                <span className="text-og-fg-muted"> · {truncate(item.goalText, 90)}</span>
-              ) : null}
-            </p>
-          </div>
-          {item.childSessionId && onOpenSession ? (
-            <button
-              type="button"
-              onClick={() => onOpenSession(item.childSessionId)}
-              className={cn(
-                "-my-0.5 -mr-1 inline-flex shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-sm font-medium text-og-fg-muted pointer-coarse:py-2",
-                "outline-hidden transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
-                "focus-visible:ring-2 focus-visible:ring-og-accent",
-              )}
-            >
-              View session
-              <ArrowRightIcon className="size-3.5" />
-            </button>
-          ) : null}
-        </div>
-        {hasDetails ? (
-          <Collapsible.Root open={open} onOpenChange={setOpen}>
-            <Collapsible.Trigger asChild>
-              <button
-                type="button"
-                className={cn(
-                  "group/wc -mx-1 inline-flex w-fit items-center gap-1 rounded-og-sm px-1 py-0.5 text-og-xs font-medium text-og-fg-subtle",
-                  "outline-hidden transition-colors duration-150 hover:text-og-fg-muted focus-visible:ring-2 focus-visible:ring-og-accent",
-                )}
-              >
-                <ChevronRightIcon className="size-3 transition-transform duration-150 ease-og-in-out group-data-[state=open]/wc:rotate-90" />
-                {open ? "Hide details" : "Show details"}
-              </button>
-            </Collapsible.Trigger>
-            <Collapsible.Content className="overflow-hidden data-[state=closed]:animate-og-collapse data-[state=open]:animate-og-expand">
-              <div className="ml-1 mt-1.5 flex flex-col gap-2.5">
-                {details.map((detail) => (
-                  <div key={detail.label} className="min-w-0">
-                    <p className="mb-1 text-og-xs font-medium uppercase tracking-[0.08em] text-og-fg-subtle">
-                      {detail.label}
-                    </p>
-                    <p
-                      className={cn(
-                        "whitespace-pre-wrap break-words text-og-sm leading-6",
-                        detail.muted ? "text-og-fg-subtle" : "text-og-fg-muted",
-                      )}
-                    >
-                      {detail.value}
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </Collapsible.Content>
-          </Collapsible.Root>
-        ) : null}
-      </div>
+      <AgentRow
+        icon={<Icon />}
+        title={meta.title}
+        preview={item.goalText ? truncate(item.goalText, 240) : null}
+        previewLines={2}
+        sessionId={item.childSessionId}
+        onOpenSession={onOpenSession ?? identity.onOpenSession}
+        failed={meta.failed}
+      >
+        {details.length > 0 ? (
+          <>
+            {details.map((detail) => (
+              <AgentRowSection key={detail.label} label={detail.label} muted={detail.muted}>
+                {detail.value}
+              </AgentRowSection>
+            ))}
+          </>
+        ) : undefined}
+      </AgentRow>
     </div>
   );
 }
 
-function SessionStatusRow({ item }: { item: { status: SessionStatus; occurredAt: string } }) {
+function SessionStatusRow({
+  item,
+}: {
+  item: {
+    status: SessionStatus;
+    blocked?: true;
+    occurredAt: string;
+    resolvedAt?: string;
+  };
+}) {
   const enter = useEntranceAnimation();
-  const meta = SESSION_STATUS_META[item.status];
+  const status = item.blocked ? "blocked" : item.status;
+  const meta = SESSION_STATUS_META[status];
   return (
     <div
       className={cn(
@@ -3248,8 +4754,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={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>
@@ -3277,41 +4784,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: 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 },
-};
+// 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
@@ -3332,13 +4844,16 @@ function GoalRow({ item }: { item: GoalItem }) {
 
 function MachineInputBatchRow({
   item,
+  onOpenSession,
   loadVideoArtifactPlayback,
 }: {
   item: MachineInputBatchItem;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
 }) {
   const enter = useEntranceAnimation();
-  const label = machineInputBatchLabel(item.members);
+  const identity = useAgentIdentity();
+  const label = machineInputBatchLabel(item.members, identity.titleFor);
   const single = item.members.length === 1 ? item.members[0]! : null;
   if (single?.kind === "media_generation_result" && single.result) {
     return (
@@ -3349,12 +4864,21 @@ function MachineInputBatchRow({
     );
   }
   const singleSummary = single ? cleanMachineInputSummary(single.summary) : "";
+  // An agent's words live in its named row behind the pill; the pill already
+  // says who it is from, so nothing repeats beneath it.
   const showCollapsedSummary =
-    single != null && machineInputSummaryIsUseful(single.kind, singleSummary);
+    !item.compact &&
+    single != null &&
+    !isAgentMember(single) &&
+    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(
@@ -3369,14 +4893,26 @@ function MachineInputBatchRow({
             <span className="truncate">{label}</span>
           </span>
         </summary>
-        <div className="mx-auto mt-2 w-full max-w-lg space-y-2 border-t border-og-border/50 pt-2">
-          {item.members.map((member) => (
-            <MachineInputRow
-              key={member.id}
-              member={member}
-              loadVideoArtifactPlayback={loadVideoArtifactPlayback}
-            />
-          ))}
+        <div className="mx-auto mt-2 w-full max-w-lg space-y-1.5 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>
+          {groupMachineInputMembers(item.members).map((group) =>
+            group.kind === "agent" ? (
+              <AgentMemberRow
+                key={group.members[0]!.id}
+                members={group.members}
+                onOpenSession={onOpenSession}
+              />
+            ) : (
+              <MachineInputRow
+                key={group.member.id}
+                member={group.member}
+                onOpenSession={onOpenSession}
+                loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+              />
+            ),
+          )}
         </div>
       </details>
       {showCollapsedSummary ? (
@@ -3388,11 +4924,94 @@ function MachineInputBatchRow({
   );
 }
 
+type MachineInputMemberGroup =
+  | { kind: "agent"; members: MachineInputBatchItem["members"] }
+  | { kind: "other"; member: MachineInputBatchItem["members"][number] };
+
+/**
+ * Agent members get named rows; repeated progress notes from one agent fold
+ * into its single row (latest note shown, earlier ones behind the disclosure).
+ */
+function groupMachineInputMembers(
+  members: MachineInputBatchItem["members"],
+): MachineInputMemberGroup[] {
+  const groups: MachineInputMemberGroup[] = [];
+  const progressBySource = new Map<string, MachineInputBatchItem["members"]>();
+  for (const member of members) {
+    if (!isAgentMember(member)) {
+      groups.push({ kind: "other", member });
+      continue;
+    }
+    if (member.kind === "child_progress") {
+      const existing = progressBySource.get(member.sourceId);
+      if (existing) {
+        existing.push(member);
+        continue;
+      }
+      const bucket = [member];
+      progressBySource.set(member.sourceId, bucket);
+      groups.push({ kind: "agent", members: bucket });
+      continue;
+    }
+    groups.push({ kind: "agent", members: [member] });
+  }
+  return groups;
+}
+
+function agentMemberIcon(member: MachineInputBatchItem["members"][number]): ReactNode {
+  if (member.kind === "child_terminal_result" && member.classification === "failure") {
+    return <XCircleIcon />;
+  }
+  if (member.kind === "child_paused") return <PauseCircleIcon />;
+  return <CornerDownRightIcon />;
+}
+
+/** One named row for an update sent by (or about) another agent. */
+function AgentMemberRow({
+  members,
+  onOpenSession,
+}: {
+  members: MachineInputBatchItem["members"];
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+}) {
+  const identity = useAgentIdentity();
+  const latest = members[members.length - 1]!;
+  const sessionId = agentMemberSessionId(latest);
+  const title = agentMemberTitle(latest, identity.titleFor(sessionId));
+  const texts = members.map((member) => agentMemberText(member));
+  const latestText = texts[texts.length - 1]!;
+  const bodies = texts
+    .map((text, index) => ({ id: members[index]!.id, body: text.body }))
+    .filter((entry) => entry.body.length > 0);
+  return (
+    <AgentRow
+      icon={agentMemberIcon(latest)}
+      title={title}
+      preview={latestText.preview ? truncate(latestText.preview, 320) : null}
+      previewLines={2}
+      meta={members.length > 1 ? `+${members.length - 1} earlier` : null}
+      sessionId={sessionId}
+      onOpenSession={onOpenSession ?? identity.onOpenSession}
+      failed={latest.kind === "child_terminal_result" && latest.classification === "failure"}
+    >
+      {bodies.length > 0 ? (
+        <>
+          {bodies.map((entry) => (
+            <AgentRowText key={entry.id}>{entry.body}</AgentRowText>
+          ))}
+        </>
+      ) : undefined}
+    </AgentRow>
+  );
+}
+
 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) {
@@ -3419,6 +5038,11 @@ function MachineInputRow({
             {truncate(summary, 320)}
           </p>
         ) : null}
+        <ChildSessionLink
+          kind={member.kind}
+          sourceId={member.sourceId}
+          onOpenSession={onOpenSession}
+        />
       </div>
     </div>
   );
@@ -3492,12 +5116,36 @@ function formatVideoDuration(seconds: number): string {
 
 function NoticeRow({ item }: { item: NoticeItem }) {
   const enter = useEntranceAnimation();
+  if (item.allowance) return <AllowanceExhaustedRow refusal={item.allowance} />;
+  if (item.sessionUsageLimit) return <SessionUsageLimitRow stop={item.sessionUsageLimit} />;
+  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 presentedTone = noticeTone(item);
+  const resolvedApproval = noticeIsResolvedApproval(item);
   const tone =
-    item.tone === "failed"
+    presentedTone === "failed"
       ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed"
-      : item.tone === "waiting"
+      : presentedTone === "waiting"
         ? WAITING_PILL_CLASS
-        : "border-og-border bg-og-surface-1 text-og-fg-muted";
+        : NEUTRAL_PILL;
   return (
     <div
       className={cn(
@@ -3507,16 +5155,22 @@ 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">{noticeDisplayText(item)}</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">
-              {JSON.stringify(item.details.value, null, 2)}
+            <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">
+              {typeof item.details.value === "string"
+                ? item.details.value
+                : JSON.stringify(item.details.value, null, 2)}
             </pre>
           </details>
         ) : null}
@@ -3535,6 +5189,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`
@@ -3581,6 +5270,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) {
@@ -3623,27 +5313,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(
               PRIMARY_ACTION_CLASS,
-              "transition-colors hover:bg-og-accent-strong disabled:opacity-70 pointer-coarse:min-h-9",
+              "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(
               PRIMARY_ACTION_CLASS,
-              "transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-9",
+              "transition-colors hover:bg-og-primary-hover pointer-coarse:min-h-9",
             )}
           >
             <RefreshCwIcon className="size-3.5" aria-hidden />