@runtypelabs/persona 4.33.0 → 4.34.0

package/src/ui.ts

@@ -203,7 +203,6 @@ import {
   createFollowStateController,
   getScrollBottomOffset,
   hasSelectionWithin,
-  isAttentionWorthyMessage,
   isElementNearBottom,
   resolveFollowStateFromScroll,
   resolveFollowStateFromWheel
@@ -272,6 +271,17 @@ import { buildHeaderWithLayout } from "./components/header-layouts";
 import { positionMap } from "./utils/positioning";
 import type { HeaderElements as _HeaderElements, ComposerElements as _ComposerElements } from "./components/panel";
 import { MessageTransform, MessageActionCallbacks, MessageActionEligibility } from "./components/message-bubble";
+import {
+  applyUserCollapseState,
+  isUserMessageCollapseEnabled,
+  resolveUserMessageCollapseLabels,
+  resolveUserMessageCollapseMaxHeight,
+  userMessageOverflows,
+  USER_COLLAPSE_REGION_ATTR,
+  USER_COLLAPSE_TOGGLE_ATTR,
+  type UserMessageCollapseRender,
+  type UserMessageCollapseState,
+} from "./components/user-message-collapse";
 import {
   createStandardBubble,
   createTypingIndicator,
@@ -972,6 +982,31 @@ export const createAgentExperience = (
   const toolExpansionState = new Set<string>();
   const reasoningExpansionState = new Set<string>();
   const approvalDetailsExpansionState = new Map<string, boolean>();
+  // Long user message collapse, per message id: the measured overflow and the
+  // reader's own toggle (true = expanded). Render state derives from both, so
+  // re-renders and morphs never re-collapse or re-expand a toggled bubble.
+  const userCollapseOverflow = new Map<string, boolean>();
+  const userCollapseToggled = new Map<string, boolean>();
+  // Voice transcripts rendered while interim. Their final render stays
+  // expanded ("settling") so the post-morph sync applies the collapse with
+  // the viewport held, rather than the morph collapsing it underneath.
+  const userCollapseLive = new Set<string>();
+  const resolveUserCollapse = (message: AgentWidgetMessage): UserMessageCollapseRender | undefined => {
+    if (message.role !== "user" || !isUserMessageCollapseEnabled(config)) return undefined;
+    if (message.voiceProcessing) userCollapseLive.add(message.id);
+    const state: UserMessageCollapseState = message.voiceProcessing
+      ? "live"
+      : userCollapseLive.has(message.id)
+        ? "settling"
+        : !userCollapseOverflow.get(message.id)
+          ? "fit"
+          : userCollapseToggled.get(message.id) ? "expanded" : "collapsed";
+    return {
+      state,
+      maxHeight: resolveUserMessageCollapseMaxHeight(config),
+      ...resolveUserMessageCollapseLabels(config),
+    };
+  };
   const applyTooltipTiming = (): void => {
     configureTooltipTiming({
       delayMs: config.tooltip?.delayMs ?? DEFAULT_TOOLTIP_DELAY_MS,
@@ -2864,6 +2899,40 @@ export const createAgentExperience = (
     }
   }, { capture: true });
 
+  // "Show more" / "Show less" on a long user message. Toggling is reading
+  // intent like a tool disclosure: it pauses follow and never re-anchors.
+  const setUserCollapseExpanded = (bubble: HTMLElement, expanded: boolean) => {
+    const region = bubble.querySelector<HTMLElement>(`[${USER_COLLAPSE_REGION_ATTR}]`);
+    const messageId = bubble.getAttribute("data-message-id");
+    if (!region || !messageId) return;
+    markReaderEngaged();
+    pauseAutoScroll();
+    userCollapseToggled.set(messageId, expanded);
+    applyUserCollapseChange(bubble, region, messageId, {
+      state: expanded ? "expanded" : "collapsed",
+      maxHeight: resolveUserMessageCollapseMaxHeight(config),
+      ...resolveUserMessageCollapseLabels(config),
+    }, "toggle");
+  };
+  messagesWrapper.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const toggle = target.closest<HTMLButtonElement>(`button[${USER_COLLAPSE_TOGGLE_ATTR}]`);
+    const bubble = toggle?.closest<HTMLElement>("[data-message-id]");
+    if (!toggle || !bubble) return;
+    event.preventDefault();
+    setUserCollapseExpanded(bubble, toggle.getAttribute("aria-expanded") !== "true");
+  });
+  // Keyboard focus landing on a link or control inside the clipped part
+  // expands the message, so a focused element is never hidden behind the clip.
+  messagesWrapper.addEventListener("focusin", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const region = target.closest(`[${USER_COLLAPSE_REGION_ATTR}="collapsed"]`);
+    const bubble = region?.closest<HTMLElement>("[data-message-id]");
+    if (bubble) setUserCollapseExpanded(bubble, true);
+  });
+
   // Add event delegation for reasoning and tool bubble expansion
   // This handles clicks even after idiomorph morphs the DOM
   const handleBubbleExpansion = (event: Event) => {
@@ -5120,14 +5189,13 @@ export const createAgentExperience = (
   // pinned and never re-arms the fallback, so a late-loading embed can't yank
   // the viewport down to the bottom.
   let currentTurnAnchored = false;
-  // Which message the anchor is currently parked on. Starts as the sent user
-  // message and moves once to the turn's first attention-worthy block (see
-  // `maybeAnchorToFirstUnread`).
+  // The sent user message the anchor is parked on. It holds for the whole
+  // reply, however tall the message or its tool prelude: the jump-to-latest
+  // control is how the reader reaches output below the fold.
   let anchoredMessageId: string | null = null;
-  // Has the reader taken over positioning this turn? First-unread anchoring is
-  // a guess about where someone who ISN'T watching wants to land; the moment
-  // they demonstrably are watching, the guess stands down and never moves the
-  // viewport under them. Reset on each user send (an explicit "take me along").
+  // Has the reader taken over positioning this turn? Layout re-pins (a host
+  // move) stand down once they demonstrably are, and never move the viewport
+  // under them. Reset on each user send (an explicit "take me along").
   //
   // Driven by real INPUT (wheel, touch drag, pointer press, transcript
   // keyboard nav, focus, selection) rather than by scroll deltas: streaming
@@ -5488,9 +5556,9 @@ export const createAgentExperience = (
     (getScrollMode() !== "anchor-top" || isActivityWhilePinnedEnabled());
 
   const updateScrollToBottomCountBadge = () => {
-    scrollToBottomControl.update(config,
-      scrollToBottomButton.getAttribute("data-persona-scroll-to-bottom-visible") === "true",
-      isStreamingOutOfView(), newMessagesSincePause);
+    const visible = scrollToBottomButton.getAttribute("data-persona-scroll-to-bottom-visible") === "true";
+    scrollToBottomControl.update(config, visible, isStreamingOutOfView(), newMessagesSincePause,
+      visible && isApprovalBelow());
   };
 
   const resetNewMessagesCount = () => {
@@ -5502,14 +5570,42 @@ export const createAgentExperience = (
   // Spacer air and composer reserve are scrollable, but aren't unread content.
   // Compare the real content bottom with the readable viewport instead. An
   // overlay footer clips that viewport; a block footer sits below it.
-  const isNearLatestContent = () => {
-    const contentHeight = measureContentHeight(anchorState?.spacerHeight ?? 0, false);
+  const readableViewportHeight = () => {
     const bodyRect = body.getBoundingClientRect();
     const footerRect = footer.getBoundingClientRect();
-    const readableHeight = footerRect.height > 0 && footerRect.bottom > bodyRect.top
+    return footerRect.height > 0 && footerRect.bottom > bodyRect.top
       ? Math.min(body.clientHeight, Math.max(0, footerRect.top - bodyRect.top - body.clientTop))
       : body.clientHeight;
-    return contentHeight - body.scrollTop - readableHeight <= BOTTOM_THRESHOLD;
+  };
+  const isNearLatestContent = () => {
+    const contentHeight = measureContentHeight(anchorState?.spacerHeight ?? 0, false);
+    return contentHeight - body.scrollTop - readableViewportHeight() <= BOTTOM_THRESHOLD;
+  };
+
+  // A pending approval whose card starts below the readable viewport. The
+  // anchor never scrolls the reader to it, so the jump control names it.
+  const isBelowFold = (element: HTMLElement) =>
+    offsetTopWithinBody(element) > body.scrollTop + readableViewportHeight() - BOTTOM_THRESHOLD;
+  const pendingApprovalBubbles = () => (session?.getMessages() ?? [])
+    .filter((message) => message.variant === "approval" && message.approval?.status === "pending")
+    .map((message) => queryMessageBubble(message.id))
+    .filter((bubble): bubble is HTMLElement => Boolean(bubble?.isConnected));
+  const isApprovalBelow = () => pendingApprovalBubbles().some(isBelowFold);
+  const isFullyInView = (element: HTMLElement) => {
+    const top = offsetTopWithinBody(element);
+    return top >= body.scrollTop && top + element.offsetHeight <= body.scrollTop + readableViewportHeight();
+  };
+  // The approvals a jump from the "Approval needed" control was taken for.
+  // Once it lands, focus moves to the first of them whose primary action is
+  // fully in view, and never to one the reader can't see.
+  let approvalJumpTargets: string[] = [];
+  const focusApprovalJumpTarget = () => {
+    const targets = approvalJumpTargets;
+    approvalJumpTargets = [];
+    for (const id of targets) {
+      const allow = queryMessageBubble(id)?.querySelector<HTMLButtonElement>('[data-action="allow"]');
+      if (allow && isFullyInView(allow)) { allow.focus({ preventScroll: true }); return; }
+    }
   };
 
   // Whether the user is currently away from the latest content: drives both
@@ -5541,7 +5637,7 @@ export const createAgentExperience = (
     const hasOverflow = getScrollBottomOffset(body) > 0;
     const show = !latestScroll.active && hasOverflow && isAwayFromLatest() && transcriptHasMessages();
     if (!show) newMessagesSincePause = 0;
-    scrollToBottomControl.update(config, show, isStreamingOutOfView(), newMessagesSincePause);
+    scrollToBottomControl.update(config, show, isStreamingOutOfView(), newMessagesSincePause, show && isApprovalBelow());
   };
 
   const pauseAutoScroll = () => {
@@ -5611,8 +5707,8 @@ export const createAgentExperience = (
 
   const latestScroll = createScrollToLatest(body, container,
     () => { lastScrollTop = body.scrollTop; },
-    () => { resumeAutoScroll(); scheduleAutoScroll(true); syncScrollToBottomButton(); },
-    () => { autoFollow.pause(); syncScrollToBottomButton(); });
+    () => { resumeAutoScroll(); scheduleAutoScroll(true); syncScrollToBottomButton(); focusApprovalJumpTarget(); },
+    () => { approvalJumpTargets = []; autoFollow.pause(); syncScrollToBottomButton(); });
 
   // Custom smooth scroll animation with easing
   const smoothScrollToBottom = (element: HTMLElement, duration = 500) => {
@@ -5659,9 +5755,6 @@ export const createAgentExperience = (
     syncScrollToBottomButton();
   };
 
-  // Defined here (rather than beside the scroll listeners) because
-  // `maybeAnchorToFirstUnread` runs on every render and would otherwise hit
-  // these consts in their temporal dead zone on a synchronous first paint.
   const getTranscriptSelection = (): Selection | null => {
     // Selections inside a shadow root are not always reflected by
     // document.getSelection(); prefer the shadow root's view when available
@@ -5795,14 +5888,6 @@ export const createAgentExperience = (
       `[data-message-id="${escapeMessageId(messageId)}"]`
     );
 
-  // Progress inside a turn disclosure belongs to its visible header. Pinning
-  // the nested prose instead clips that header, and leaves a hidden anchor
-  // when the completed turn folds away. Keep ordinary message lookups intact.
-  const queryScrollAnchor = (messageId: string): HTMLElement | null => {
-    const bubble = queryMessageBubble(messageId);
-    return bubble?.closest<HTMLElement>("[data-persona-turn-activity]") ?? bubble;
-  };
-
   // Anchor-top mode: scroll `messageId` to rest `anchorTopOffset` px below the
   // viewport top and hold it there while the response streams in beneath it.
   // Deferred one frame so the message bubble has been rendered and laid out.
@@ -5812,7 +5897,7 @@ export const createAgentExperience = (
     }
     anchorRAF = requestAnimationFrame(() => {
       anchorRAF = null;
-      const bubble = queryScrollAnchor(messageId);
+      const bubble = queryMessageBubble(messageId);
       if (!bubble) return;
 
       // Bubble top relative to the scroll content. offsetTop is used instead
@@ -5866,7 +5951,7 @@ export const createAgentExperience = (
   const repinAnchoredMessage = () => {
     if (getScrollMode() !== "anchor-top") return;
     if (!anchorState || !anchoredMessageId) return;
-    const bubble = queryScrollAnchor(anchoredMessageId);
+    const bubble = queryMessageBubble(anchoredMessageId);
     if (!bubble) return;
     cancelSmoothScroll();
     const previousSpacerHeight = anchorState.spacerHeight;
@@ -5920,6 +6005,94 @@ export const createAgentExperience = (
     syncScrollToBottomButton();
   };
 
+  // Re-applies a user bubble's collapse state in place, holding the viewport.
+  // A toggle holds the bubble's top (a collapse whose top scrolled out of view
+  // brings it back to the anchor offset, so the toggle stays in view). A measurement
+  // change holds what the reader sees: the top when it is in view, otherwise
+  // the bubble's bottom edge, so the content below never moves. While
+  // anchored, the spacer is re-reserved first so a shrink can't clamp
+  // scrollTop, then trimmed to the held position with a fresh drain baseline.
+  const applyUserCollapseChange = (
+    bubble: HTMLElement,
+    region: HTMLElement,
+    messageId: string,
+    render: UserMessageCollapseRender,
+    intent: "toggle" | "measure"
+  ) => {
+    messageCache.delete(messageId);
+    const holdViewport = intent === "toggle" || !(isFollowEffective() && autoFollow.isFollowing());
+    if (!holdViewport) {
+      applyUserCollapseState(bubble, region, messageId, render);
+      return;
+    }
+    const bodyTop = body.getBoundingClientRect().top;
+    const before = bubble.getBoundingClientRect();
+    const anchor = anchorState;
+    if (anchor) {
+      cancelSmoothScroll();
+      setAnchorSpacerHeight(anchor.spacerHeight + bubble.offsetHeight);
+    }
+    applyUserCollapseState(bubble, region, messageId, render);
+    const after = bubble.getBoundingClientRect();
+    const prevTop = before.top - bodyTop;
+    const shift = intent === "toggle"
+      ? after.top - bodyTop - (render.state === "collapsed" && prevTop < 0 ? getAnchorTopOffset() : prevTop)
+      : prevTop >= 0 ? after.top - before.top : after.bottom - before.bottom;
+    const target = Math.max(0, body.scrollTop + shift);
+    if (anchor && anchorState === anchor) {
+      setAnchorSpacerHeight(target + body.clientHeight + BOTTOM_THRESHOLD - measureContentHeight(anchor.spacerHeight));
+      anchor.initialSpacerHeight = anchor.spacerHeight;
+      anchor.contentHeightAtAnchor = body.scrollHeight - anchor.spacerHeight;
+    }
+    if (Math.abs(target - body.scrollTop) >= 1) {
+      isAutoScrolling = true;
+      body.scrollTop = target;
+      lastScrollTop = body.scrollTop;
+      isAutoScrolling = false;
+    }
+    syncScrollToBottomButton();
+  };
+
+  // Measures every built-in user bubble's real rendered height (markdown,
+  // code, wrapping, attachments) after a morph or resize and collapses the
+  // ones that overflow. Unlaid regions (a closed panel, jsdom) measure 0 and
+  // keep their state until a later pass can measure them.
+  const syncUserMessageCollapse = () => {
+    if (!isUserMessageCollapseEnabled(config)) return;
+    const maxHeight = resolveUserMessageCollapseMaxHeight(config);
+    for (const region of Array.from(
+      messagesWrapper.querySelectorAll<HTMLElement>(`[${USER_COLLAPSE_REGION_ATTR}]`)
+    )) {
+      const bubble = region.closest<HTMLElement>("[data-message-id]");
+      const messageId = bubble?.getAttribute("data-message-id");
+      if (!bubble || !messageId) continue;
+      const naturalHeight = region.scrollHeight;
+      if (naturalHeight > 0) {
+        userCollapseOverflow.set(messageId, userMessageOverflows(naturalHeight, maxHeight));
+      }
+      const overflows = userCollapseOverflow.get(messageId) ?? false;
+      const current = region.getAttribute(USER_COLLAPSE_REGION_ATTR);
+      // An interim voice transcript stays expanded so the speaker can watch it.
+      if (current === "live") continue;
+      if (current === "settling") userCollapseLive.delete(messageId);
+      const state: UserMessageCollapseState = !overflows
+        ? "fit"
+        : userCollapseToggled.get(messageId) ? "expanded" : "collapsed";
+      if (state === current) continue;
+      applyUserCollapseChange(bubble, region, messageId, {
+        state, maxHeight, ...resolveUserMessageCollapseLabels(config),
+      }, "measure");
+    }
+  };
+
+  const pruneUserMessageCollapse = (messages: AgentWidgetMessage[]) => {
+    if (userCollapseOverflow.size === 0 && userCollapseToggled.size === 0 && userCollapseLive.size === 0) return;
+    const ids = new Set(messages.map((message) => message.id));
+    for (const map of [userCollapseOverflow, userCollapseToggled, userCollapseLive]) {
+      for (const id of map.keys()) if (!ids.has(id)) map.delete(id);
+    }
+  };
+
   // Reacts to a user message the user just sent (seeded so restored history
   // never triggers it). Follow mode re-sticks to the bottom even if the user
   // had scrolled up: sending is an unambiguous "take me to the latest"
@@ -5935,8 +6108,8 @@ export const createAgentExperience = (
       // next user send.
       followFallbackActive = false;
       currentTurnAnchored = true;
-      // A send is an explicit "take me along": it re-arms first-unread
-      // positioning even if the reader had scrolled away during the last turn.
+      // A send is an explicit "take me along": it re-arms anchoring even if
+      // the reader had scrolled away during the last turn.
       readerEngagedThisTurn = false;
       anchoredMessageId = messageId;
       scheduleAnchorToMessage(messageId);
@@ -5962,75 +6135,6 @@ export const createAgentExperience = (
     scheduleAutoScroll(true);
   };
 
-  // Anchor-top positioning: park on the turn's FIRST UNREAD attention-worthy
-  // block.
-  //
-  // The read boundary is the last user send — the reader wrote it, so it (and
-  // everything above) is read; every attention-worthy block after it is not.
-  // Tool calls and reasoning are chrome and never targeted, so they scroll
-  // past underneath rather than parking the reader on progress output.
-  //
-  // The policy assumes the reader is NOT watching the stream, and picks the
-  // best place for them to land when they look back: the start of what they
-  // haven't seen. `readerEngagedThisTurn` is the escape hatch — once someone
-  // is demonstrably driving, their position wins and this stands down until
-  // the next send.
-  //
-  // Anchoring to the first unread (not the newest) block means this fires at
-  // most once per turn in practice, and later blocks stream in below the
-  // anchor exactly as they do today.
-
-  // Minimum readable slice of the first unread block that must fit under the
-  // pinned user message for the anchor to stay put. Below this, the block is
-  // "stranded" and the anchor hands off to it.
-  const ANCHOR_HANDOFF_MIN_VISIBLE = 96;
-
-  // Market pattern (ChatGPT/Claude/Gemini): the sent user message stays
-  // pinned at the top as the visible header of the streaming reply. The
-  // handoff to the first unread block exists for the stranded case — a long
-  // user message or a tall tool-call prelude pushing the reply below the
-  // fold — so it only fires when the block's start is not readably within
-  // the viewport while the user message holds the anchor.
-  const isFirstUnreadStranded = (messageId: string): boolean => {
-    if (lastSentUserMessageId === null) return true;
-    const userBubble = queryMessageBubble(lastSentUserMessageId);
-    const blockBubble = queryScrollAnchor(messageId);
-    // Unmeasurable geometry: fall back to handing off (pre-conditional
-    // behavior) rather than risking an answer parked below the fold.
-    if (!userBubble || !blockBubble) return true;
-    const delta =
-      offsetTopWithinBody(blockBubble) - offsetTopWithinBody(userBubble);
-    return (
-      getAnchorTopOffset() + delta >
-      body.clientHeight - ANCHOR_HANDOFF_MIN_VISIBLE
-    );
-  };
-
-  const maybeAnchorToFirstUnread = (messages: AgentWidgetMessage[]) => {
-    if (getScrollMode() !== "anchor-top") return;
-    if (!currentTurnAnchored) return;
-    if (readerEngagedThisTurn) return;
-    if (hasActiveTranscriptSelection()) return;
-
-    let pastReadBoundary = lastSentUserMessageId === null;
-    for (const message of messages) {
-      if (!pastReadBoundary) {
-        if (message.id === lastSentUserMessageId) pastReadBoundary = true;
-        continue;
-      }
-      if (!isAttentionWorthyMessage(message)) continue;
-      // Already parked on it: hold still while it streams.
-      if (message.id === anchoredMessageId) return;
-      // Block starts within view under the pinned user message: keep the
-      // user message anchored. Re-evaluated every render, so a tool prelude
-      // that later pushes the block below the fold still hands off.
-      if (!isFirstUnreadStranded(message.id)) return;
-      anchoredMessageId = message.id;
-      scheduleAnchorToMessage(message.id);
-      return;
-    }
-  };
-
   const trackMessages = (messages: AgentWidgetMessage[]) => {
     const nextState = new Map<
       string,
@@ -6392,8 +6496,10 @@ export const createAgentExperience = (
           ? { toolCallId: linkedTool.id, status: linkedTool.status === "running"
               ? "running" : linkedTool.success === false || linkedTool.error ? "failed" : "completed" }
           : undefined;
+      const userCollapse = resolveUserCollapse(message);
       const fingerprint =
         computeMessageFingerprint(message, configVersion) + askMeta + `:${eligibilityKey}` +
+        (userCollapse ? `:uc-${userCollapse.state}` : "") +
         (approvalWithPlugin ? `:${message.approval?.toolCallId ?? ""}:${JSON.stringify(execution)}` : "");
       const cachedWrapper = (askWithPlugin || approvalWithPlugin || hasDirectiveBubble ||
         (message.dispatchError && config.errorDisplay === "block" && !approvalUi))
@@ -6442,7 +6548,8 @@ export const createAgentExperience = (
         // Keep the detail readable even while the secondary UI chunk loads.
         const bubble = createStandardBubble(message, transform, config.layout?.messages,
           config.messageActions, messageActionCallbacks, {
-            loadingIndicatorRenderer: inlineLoadingRenderer, widgetConfig: config, actionEligibility
+            loadingIndicatorRenderer: inlineLoadingRenderer, widgetConfig: config, actionEligibility,
+            userCollapse
           });
         bubble.dataset.personaDefaultMessage = "true";
         return bubble;
@@ -7227,7 +7334,12 @@ export const createAgentExperience = (
         wrapper.replaceChildren(bubble);
         wrapper.setAttribute("data-bubble-fp", fingerprint);
         lastApprovalBubbleFingerprint.set(messageId, fingerprint);
-        if (focusDefault) bubble.querySelector<HTMLButtonElement>('[data-action="allow"]')?.focus();
+        // Never park focus (and Enter-to-allow) on a card the reader can't
+        // see: a paused reader below the fold gets the "Approval needed" jump.
+        const following = isFollowEffective() && autoFollow.isFollowing();
+        if (focusDefault && (following || !isBelowFold(wrapper))) {
+          bubble.querySelector<HTMLButtonElement>('[data-action="allow"]')?.focus();
+        }
       }
     }
 
@@ -7255,6 +7367,8 @@ export const createAgentExperience = (
   ) => {
     if (messages.length > 0) warmClientStream();
     renderMessagesWithPluginsImpl(container, messages, transform);
+    pruneUserMessageCollapse(messages);
+    syncUserMessageCollapse();
     refreshReadAloudButtons();
     if (revealedToolCalls.size > 0) {
       for (const [id, timer] of revealedToolCalls) {
@@ -8705,7 +8819,6 @@ export const createAgentExperience = (
       handleAssistantTurnStarted();
     }
     if (lastAssistantMessage) lastHandledAssistantId = lastAssistantMessage.id;
-    maybeAnchorToFirstUnread(messages);
 
     const prevLastUserMessageId = voiceState.lastUserMessageId;
     if (lastUserMessage && lastUserMessage.id !== prevLastUserMessageId) {
@@ -11170,6 +11283,8 @@ export const createAgentExperience = (
   // (viewport resize) so the pin survives all of them.
   if (typeof ResizeObserver !== "undefined") {
     const contentResizeObserver = new ResizeObserver(() => {
+      // Width changes rewrap text and late images grow attachments.
+      syncUserMessageCollapse();
       handleContentResize();
       syncTranscriptEdgeFades();
       // A resize can start or stop a table overflowing without a render or a
@@ -11215,7 +11330,7 @@ export const createAgentExperience = (
   ]);
   const handleTranscriptKeydown = (event: KeyboardEvent) => {
     if (!NAV_KEYS.has(event.key)) return;
-    // Reader intent for first-unread anchoring is tracked unconditionally;
+    // Reader intent for anchor re-pins is tracked unconditionally;
     // only the follow-mode *pause* below stays behind the opt-in flag.
     markReaderEngaged();
     if (!isPauseOnInteractionEnabled()) return;
@@ -11269,10 +11384,13 @@ export const createAgentExperience = (
   });
   destroyCallbacks.push(() => body.removeEventListener("wheel", handleWheel));
   scrollToBottomButton.addEventListener("click", () => {
+    const targets = pendingApprovalBubbles().filter(isBelowFold)
+      .map((bubble) => bubble.getAttribute("data-message-id")!);
     // Jumping to the latest abandons the current anchor: drop the spacer
     // first so "bottom" means the real end of content, not spacer padding
     // that would keep shrinking underneath the reader.
     resetAnchorState();
+    approvalJumpTargets = targets;
     cancelAutoScroll();
     autoFollow.pause();
     latestScroll.start(config);
@@ -11810,6 +11928,10 @@ export const createAgentExperience = (
       const previousShowToolCalls = config.features?.showToolCalls;
       const previousToolCallDisplay = config.features?.toolCallDisplay;
       const previousReasoningDisplay = config.features?.reasoningDisplay;
+      const userCollapseConfigKey = () => JSON.stringify([
+        config.features?.userMessageCollapse, config.copy?.showMoreLabel, config.copy?.showLessLabel,
+      ]);
+      const previousUserCollapseConfig = userCollapseConfigKey();
       const previousStreamAnimationType = config.features?.streamAnimation?.type;
       // History provider identity: enablement, eligibility, and advertised
       // scopes are all resolved at construction, so a change rebuilds it.
@@ -12067,7 +12189,8 @@ export const createAgentExperience = (
       const featuresChanged = (config.features?.showReasoning ?? true) !== (previousShowReasoning ?? true)
         || (config.features?.showToolCalls ?? true) !== (previousShowToolCalls ?? true)
         || JSON.stringify(config.features?.toolCallDisplay) !== JSON.stringify(previousToolCallDisplay)
-        || JSON.stringify(config.features?.reasoningDisplay) !== JSON.stringify(previousReasoningDisplay);
+        || JSON.stringify(config.features?.reasoningDisplay) !== JSON.stringify(previousReasoningDisplay)
+        || userCollapseConfigKey() !== previousUserCollapseConfig;
       const messagesConfigChanged = (config.future?.v5Defaults === true) !== previousDefaultsVersion
         || "toolCall" in nextConfig || messageActionsChanged || layoutMessagesChanged
         || "loadingIndicator" in nextConfig || iterationDisplayChanged || featuresChanged

package/src/ui.turn-activity.test.ts

@@ -72,7 +72,7 @@ it("keeps a manual close/open choice through streaming and completion", async ()
 
 it.each([
   ["instant", false], ["height", false], ["instant", true], ["height", true],
-] as const)("anchors the turn header through %s collapse (reader scrolled: %s)", async (animation, readerScrolled) => {
+] as const)("keeps a long user prompt anchored through %s collapse (reader scrolled: %s)", async (animation, readerScrolled) => {
   // Vitest's global performance and JSDOM frame timestamps can have different
   // origins. Match the browser's shared clock so the 220ms ease stays bounded.
   const requestFrame = globalThis.requestAnimationFrame;
@@ -83,9 +83,9 @@ it.each([
     scrollHeight: { configurable: true, get: () => 3000 },
     clientHeight: { configurable: true, get: () => 400 },
   });
-  // A long user prompt strands the first progress block below the viewport.
-  // Its text is inset from the disclosure header by 44px. Anchoring the text
-  // would put the header 28px above the viewport (644 - 16 vs 600).
+  // A long user prompt puts the first progress block below the viewport. The
+  // prompt keeps the anchor (100 - 16): the disclosure streaming in and
+  // folding away below the fold never moves the reader to its header.
   vi.spyOn(HTMLElement.prototype, "offsetTop", "get").mockImplementation(function (this: HTMLElement) {
     if (this.hasAttribute("data-persona-turn-activity")) return 600;
     if (this.closest("[data-persona-turn-activity]")) return 644;
@@ -93,7 +93,7 @@ it.each([
     return 0;
   });
   await start(); await text("p", "Investigating the issue.");
-  await vi.waitFor(() => expect(body.scrollTop).toBe(584));
+  await vi.waitFor(() => expect(body.scrollTop).toBe(84));
   if (readerScrolled) {
     body.dispatchEvent(new WheelEvent("wheel", { deltaY: 120, bubbles: true }));
     body.scrollTop = 800;
@@ -101,9 +101,9 @@ it.each([
   await text("answer", "The answer stays below the header.", "final");
   push("execution_complete", { kind: "agent", success: true }); close();
   await vi.waitFor(() => expect(header().getAttribute("aria-expanded")).toBe("false"));
-  expect(body.scrollTop).toBe(readerScrolled ? 800 : 584);
+  expect(body.scrollTop).toBe(readerScrolled ? 800 : 84);
 
-  // Later render/resize passes must not pull a reader back to the header.
+  // Later render/resize passes must not pull a reader back to the prompt.
   body.dispatchEvent(new WheelEvent("wheel", { deltaY: 120, bubbles: true }));
   body.scrollTop = 800;
   controller.update({ expansion: { animation, duration: 120 } });