@opengeni/react 7.4.0 → 7.5.0-canary.36927100590001

package/src/components/message-timeline.tsx

@@ -63,7 +63,7 @@ import {
   type OlderHistoryLoadReceipt,
   type OlderHistoryLoader,
 } from "../older-history";
-import { Markdown } from "./markdown";
+import { Markdown, type MarkdownProps } from "./markdown";
 import { OpenGeniLinkProvider, type OpenGeniLinkResolver } from "./open-geni-links";
 import {
   TimelineBeforeLayout,
@@ -73,6 +73,7 @@ import {
   type TimelineAnchor,
 } from "./timeline-anchor";
 import { useReadingProgress } from "./timeline-reading-progress";
+import { type TimelinePillPlacement, useTimelinePillPlacement } from "./timeline-pill-placement";
 import {
   animateTimelineSettlement,
   captureTimelineSettlement,
@@ -142,6 +143,12 @@ import {
 import { SESSION_STATUS_META, StatusDot } from "./session-status";
 import { TimelineComputeLabelProvider } from "../timeline/compute-label";
 import { EntranceAnimationProvider, useEntranceAnimation } from "../timeline/entrance";
+import {
+  AllowanceExhaustedRow,
+  AllowancePresentationProvider,
+  type RenderAllowanceExhausted,
+} from "../timeline/allowance-exhausted-row";
+import type { AllowanceLabels } from "../usage/allowance-copy";
 import { SeenActivityIdsProvider } from "../timeline/seen-activity-ids";
 import { TimelineAnnotationCards } from "./timeline-annotations";
 import { TooltipProvider } from "./tooltip";
@@ -170,6 +177,11 @@ export type MessageTimelineProps = {
         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;
   /**
@@ -191,6 +203,15 @@ export type MessageTimelineProps = {
   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
@@ -268,8 +289,8 @@ export type MessageTimelineProps = {
    * scrolls the in-memory window.
    */
   onJumpToLatest?: (() => void | Promise<void>) | undefined;
-  /** Resolve the newest durable user message and load its bounded window.
-   * Wire useSessionEvents().jumpToLatestQuestion for unloaded history. */
+  /** @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;
@@ -311,6 +332,20 @@ const PIN_THRESHOLD_PX = 48;
 const JUMP_TO_LATEST_CATCHUP_DEBT_PX = 240;
 /** Breathing room above the question when following stops at an answer. */
 const QUESTION_NAV_MARGIN_PX = 12;
+// Floating pills rest at these spots and slide sideways, in this order, when
+// their resting spot would cover a control (see useTimelinePillPlacement).
+const JUMP_PILL_PLACEMENTS: readonly TimelinePillPlacement[] = ["center", "end", "start"];
+const QUESTION_PILL_PLACEMENTS: readonly TimelinePillPlacement[] = ["end", "center", "start"];
+const JUMP_PILL_PLACEMENT_CLASS: Record<TimelinePillPlacement, string> = {
+  center: "inset-x-0 mx-auto",
+  end: "right-4 sm:right-6",
+  start: "left-4 sm:left-6",
+};
+const QUESTION_PILL_PLACEMENT_CLASS: Record<TimelinePillPlacement, string> = {
+  center: "justify-center",
+  end: "justify-end",
+  start: "justify-start",
+};
 /**
  * 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
@@ -444,7 +479,7 @@ function contentTopOf(node: HTMLElement, groupKey: string): number | null {
 }
 
 /** The question the reader is inside of, once its start has scrolled out of view. */
-type QuestionNav = { key: string | null };
+type QuestionNav = { key: string };
 
 /** How far a question's start must be above the viewport before navigation shows. */
 const QUESTION_NAV_HIDDEN_PX = 24;
@@ -452,11 +487,16 @@ const QUESTION_NAV_HIDDEN_PX = 24;
 function readQuestionNav(node: HTMLElement): QuestionNav | null {
   const view = node.getBoundingClientRect();
   const prompts = [...node.querySelectorAll<HTMLElement>("[data-og-prompt]")];
-  const prompt = prompts.at(-1);
+  // The last prompt before the reading position owns the response/work in view.
+  // A newer prompt farther down the conversation is not a navigation target.
+  const middle = view.top + view.height / 2;
+  const prompt = prompts
+    .reverse()
+    .find((candidate) => candidate.getBoundingClientRect().top <= middle);
   const key = prompt?.dataset.ogGroupKey;
   if (!prompt || !key) return null;
-  const top = prompt.getBoundingClientRect().top;
-  if (top >= view.top - QUESTION_NAV_HIDDEN_PX && top < view.bottom) {
+  const bounds = prompt.getBoundingClientRect();
+  if (bounds.top >= view.top - QUESTION_NAV_HIDDEN_PX || bounds.bottom > view.top) {
     return null;
   }
   return { key };
@@ -482,6 +522,7 @@ function cssEscapeAttribute(value: string): string {
  */
 export function MessageTimeline({
   resolveLink,
+  renderInteractiveBlock,
   userMessageDisclosureLabels,
   searchTarget,
   events,
@@ -493,6 +534,8 @@ export function MessageTimeline({
   onMemoryClick,
   onReconnect,
   renderAuthNeeded,
+  renderAllowanceExhausted,
+  allowanceExhaustedLabels,
   shouldRenderAuthNeeded,
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
@@ -515,7 +558,6 @@ export function MessageTimeline({
   loadingNewer = false,
   onLoadNewer,
   onJumpToLatest,
-  onJumpToLatestQuestion,
   trailingState,
   emptyState,
   className,
@@ -555,6 +597,9 @@ export function MessageTimeline({
               <Markdown
                 searchTarget={searchItem?.id === item.id ? searchTarget : null}
                 streaming={item.kind === "agent-message" && item.streaming}
+                renderInteractiveBlock={
+                  item.kind === "agent-message" ? renderInteractiveBlock : undefined
+                }
               >
                 {text}
               </Markdown>
@@ -567,7 +612,7 @@ export function MessageTimeline({
               body
             );
           },
-    [renderMessageText, searchItem?.id, searchTarget],
+    [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).
@@ -700,10 +745,22 @@ export function MessageTimeline({
   const resizeFollowRafRef = useRef<number | null>(null);
   const questionNavFrameRef = useRef<number | null>(null);
   const [questionNav, setQuestionNav] = useState<QuestionNav | null>(null);
-  const [questionTarget, setQuestionTarget] = useState<number | null>(null);
-  const [questionPending, setQuestionPending] = useState(false);
-  const [questionError, setQuestionError] = useState<string | null>(null);
-  const questionRequestRef = useRef(0);
+  const jumpPillRef = useRef<HTMLButtonElement | null>(null);
+  const questionPillRef = useRef<HTMLDivElement | null>(null);
+  const jumpPillShown = autoFollow && (!pinned || hasNewer || canSkipTipCatchup);
+  const jumpPillPlacement = useTimelinePillPlacement({
+    pillRef: jumpPillRef,
+    scrollerRef: scrollRef,
+    active: jumpPillShown,
+    preference: JUMP_PILL_PLACEMENTS,
+  });
+  const questionPillPlacement = useTimelinePillPlacement({
+    pillRef: questionPillRef,
+    scrollerRef: scrollRef,
+    active: questionNav !== null,
+    preference: QUESTION_PILL_PLACEMENTS,
+    allowDownwardFallback: true,
+  });
   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
@@ -1270,19 +1327,10 @@ export function MessageTimeline({
     questionNavFrameRef.current = requestFrame(() => {
       questionNavFrameRef.current = null;
       const node = scrollRef.current;
-      const next = hasNewer
-        ? onJumpToLatestQuestion
-          ? { key: null }
-          : null
-        : node
-          ? (readQuestionNav(node) ??
-            (onJumpToLatestQuestion && !node.querySelector("[data-og-prompt]")
-              ? { key: null }
-              : null))
-          : null;
+      const next = node ? readQuestionNav(node) : null;
       setQuestionNav((current) => (sameQuestionNav(current, next) ? current : next));
     });
-  }, [readableTurns, hasNewer, onJumpToLatestQuestion]);
+  }, [readableTurns]);
   useEffect(
     () => () => {
       if (questionNavFrameRef.current != null) {
@@ -1312,30 +1360,6 @@ export function MessageTimeline({
     syncScrollBaseline(node);
     scheduleQuestionNav();
   };
-  const jumpToLatestQuestion = async () => {
-    if (!onJumpToLatestQuestion) {
-      if (!hasNewer && questionNav?.key) jumpToQuestion(questionNav.key);
-      return;
-    }
-    const request = ++questionRequestRef.current;
-    releasePinFromReader();
-    wantPinRef.current = false;
-    setQuestionPending(true);
-    setQuestionError(null);
-    try {
-      const sequence = await onJumpToLatestQuestion();
-      if (request === questionRequestRef.current) setQuestionTarget(sequence);
-    } catch (reason) {
-      if (request === questionRequestRef.current)
-        setQuestionError(
-          reason instanceof Error && reason.name === "LatestQuestionQueuedError"
-            ? "The latest question is in the prompt queue."
-            : "Could not load the latest question. Try again.",
-        );
-    } finally {
-      if (request === questionRequestRef.current) setQuestionPending(false);
-    }
-  };
 
   const driveFollowRef = useRef<(node: HTMLElement, now?: number) => void>(
     requestOlderIfUnderfilled as (node: HTMLElement, now?: number) => void,
@@ -1554,21 +1578,7 @@ export function MessageTimeline({
         }
       }
     };
-    const questionGroup =
-      questionTarget === null
-        ? undefined
-        : groups.find(
-            ({ group }) =>
-              group.kind === "item" &&
-              group.item.kind === "user-message" &&
-              (group.item.sourceEvents?.some((source) => source.sequence === questionTarget) ||
-                group.item.annotationSource?.sequence === questionTarget),
-          );
-    if (questionGroup) {
-      // Exact navigation wins over prepend correction on the same commit.
-      jumpToQuestion(questionGroup.key);
-      setQuestionTarget(null);
-    } else if (pendingJumpToStartRef.current && firstItemChanged) {
+    if (pendingJumpToStartRef.current && firstItemChanged) {
       // The oldest window landed — jump against the NEW DOM, and skip the
       // prepend correction (it would shift the reader away from the top).
       pendingJumpToStartRef.current = false;
@@ -2187,460 +2197,477 @@ export function MessageTimeline({
   };
 
   const timeline = (
-    <LightboxProvider>
-      <FoldMemoryProvider value={foldMemoryRef.current}>
-        <SeenActivityIdsProvider value={seenActivityIdsRef.current}>
-          <TimelineComputeLabelProvider value={computeLabel ?? null}>
-            <EntranceAnimationProvider value={false}>
-              <TooltipProvider delayDuration={400}>
-                <TimelineAnnotationSourceRootContext.Provider value={scrollRef}>
-                  <div
-                    className={cn("og-root relative flex min-h-0 flex-col", className)}
-                    // Sticky insets start at the scroller's padded content edge
-                    // (pt-16). Subtract exactly that padding so an expanded work
-                    // header pins flush to the scrollport. Pinning it lower left a
-                    // band of scrolling rows visible above the header, which then
-                    // looked like it floated over the middle of the timeline. The
-                    // floating question action sits below this strip instead.
-                    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. */}
+    <AllowancePresentationProvider
+      render={renderAllowanceExhausted}
+      labels={allowanceExhaustedLabels}
+    >
+      <LightboxProvider>
+        <FoldMemoryProvider value={foldMemoryRef.current}>
+          <SeenActivityIdsProvider value={seenActivityIdsRef.current}>
+            <TimelineComputeLabelProvider value={computeLabel ?? null}>
+              <EntranceAnimationProvider value={false}>
+                <TooltipProvider delayDuration={400}>
+                  <TimelineAnnotationSourceRootContext.Provider value={scrollRef}>
                     <div
-                      ref={scrollRef}
-                      data-og-timeline-scroller=""
-                      data-og-bottom-follow={autoFollow && pinned && !hasNewer ? "true" : "false"}
-                      tabIndex={-1}
-                      onScroll={onScroll}
-                      onScrollEnd={onScrollEnd}
-                      onWheel={onWheel}
-                      onTouchStart={(event) => {
-                        stopSettlement();
-                        const touch = event.touches.length === 1 ? event.touches[0] : undefined;
-                        touchPositionRef.current = touch
-                          ? { x: touch.clientX, y: touch.clientY }
-                          : null;
-                      }}
-                      onTouchMove={(event) => {
-                        const touch = event.touches[0];
-                        const previous = touchPositionRef.current;
-                        if (!touch || !previous || event.touches.length !== 1) {
-                          touchPositionRef.current = null;
-                          return;
-                        }
-                        const deltaX = previous.x - touch.clientX;
-                        const deltaY = previous.y - touch.clientY;
-                        if (Math.max(Math.abs(deltaX), Math.abs(deltaY)) < 4) return;
-                        touchPositionRef.current = { x: touch.clientX, y: touch.clientY };
-                        onWheel({
-                          deltaX,
-                          deltaY,
-                          target: event.target,
-                          currentTarget: event.currentTarget,
-                        });
-                      }}
-                      onTouchEnd={() => {
-                        touchPositionRef.current = null;
-                      }}
-                      onTouchCancel={() => {
-                        touchPositionRef.current = null;
-                      }}
-                      onClickCapture={(event) => {
-                        const target =
-                          event.target instanceof Element
-                            ? event.target.closest("button[aria-expanded]")
+                      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. The
+                      // floating question action sits below this strip instead.
+                      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}
+                        onTouchStart={(event) => {
+                          stopSettlement();
+                          const touch = event.touches.length === 1 ? event.touches[0] : undefined;
+                          touchPositionRef.current = touch
+                            ? { x: touch.clientX, y: touch.clientY }
                             : null;
-                        if (target) {
-                          if (target.hasAttribute("data-og-work-header")) {
-                            releaseProgress(
-                              target
-                                .closest("[data-og-group-key]")
-                                ?.getAttribute("data-og-group-key") ?? null,
-                            );
+                        }}
+                        onTouchMove={(event) => {
+                          const touch = event.touches[0];
+                          const previous = touchPositionRef.current;
+                          if (!touch || !previous || event.touches.length !== 1) {
+                            touchPositionRef.current = null;
+                            return;
                           }
-                          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)) {
+                          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,
+                              );
+                            }
                             releasePinFromReader();
+                            disclosureKeepsUnpinnedRef.current = true;
                           }
-                          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;
                         }}
+                        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]",
+                        )}
                       >
-                        <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={cn(
-                                  "pointer-events-none absolute inset-x-0 -top-11 z-10 flex",
-                                  // The scrolling history control and fixed question
-                                  // action must never share the same pointer region.
-                                  questionNav
-                                    ? "max-w-[calc(50%-0.5rem)] justify-start"
-                                    : "justify-center",
-                                )}
-                              >
-                                {loadingOlder || loadingOldest ? (
-                                  <span className={LOADING_CHIP_CLASS}>
-                                    <span className="og-shimmer-text">
-                                      {loadingOldest
-                                        ? "Jumping to start…"
-                                        : "Loading earlier activity…"}
+                        <TimelineBeforeLayout
+                          capture={() => {
+                            if (readableTurns && timelineHasReader(scrollRef.current)) {
+                              releasePinFromReader();
+                            }
+                            readingAnchorRef.current =
+                              !pinnedRef.current && scrollRef.current
+                                ? captureTimelineAnchor(scrollRef.current)
+                                : null;
+                            settlementRef.current =
+                              readableTurns &&
+                              autoFollow &&
+                              pinnedRef.current &&
+                              revealedRef.current &&
+                              !hasNewer &&
+                              !pendingReaderLeaveRef.current &&
+                              !disclosureKeepsUnpinnedRef.current &&
+                              !prefersReducedMotion() &&
+                              scrollRef.current
+                                ? captureTimelineSettlement(scrollRef.current, groups)
+                                : null;
+                          }}
+                        >
+                          <div className="relative mx-auto flex w-full max-w-3xl flex-col gap-5">
+                            <AnimatePresence>
+                              {loadingOlder ||
+                              loadingOldest ||
+                              (hasOlder && onJumpToStart && olderPrefetchArmed) ||
+                              underfillRetryReady ? (
+                                // Reserved top gutter: controls scroll with history and cannot
+                                // cover a disclosure. Visibility never changes content height.
+                                <motion.div
+                                  initial={{ opacity: 0, y: -6 }}
+                                  animate={{ opacity: 1, y: 0 }}
+                                  exit={{ opacity: 0, y: -6 }}
+                                  transition={{ duration: 0.15, ease: "easeOut" }}
+                                  data-og-loading-older=""
+                                  aria-live="polite"
+                                  className={cn(
+                                    "pointer-events-none absolute inset-x-0 -top-11 z-10 flex",
+                                    // The scrolling history control and fixed question
+                                    // action must never share the same pointer region.
+                                    questionNav
+                                      ? "max-w-[calc(50%-0.5rem)] justify-start"
+                                      : "justify-center",
+                                  )}
+                                >
+                                  {loadingOlder || loadingOldest ? (
+                                    <span className={LOADING_CHIP_CLASS}>
+                                      <span className="og-shimmer-text">
+                                        {loadingOldest
+                                          ? "Jumping to start…"
+                                          : "Loading earlier activity…"}
+                                      </span>
                                     </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;
+                                  ) : 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!,
+                                            );
                                           }
-                                          // 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(() => {
+                                          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;
                                             }
-                                          });
-                                        },
-                                        () => {
-                                          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>
+                                          },
+                                        );
+                                      }}
+                                      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}
-                          </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
+                            {groups.map(({ group, key, entranceEnabled }, index) => {
+                              return (
+                                <TimelineSearchRevealContext.Provider
+                                  key={key}
+                                  value={
+                                    searchItem &&
+                                    timelineGroupItemIds(group).includes(searchItem.id)
+                                      ? searchRevealKey
+                                      : null
                                   }
-                                  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"
+                                >
+                                  <TimelineGroupEntry
+                                    groupKey={key}
+                                    group={group}
+                                    nextGroup={groups[index + 1]?.group}
+                                    startupDismissed={
+                                      group.kind === "activity" &&
+                                      group.items.some(
+                                        (item) => item.turnId && turnsWithOutput.has(item.turnId),
+                                      )
+                                    }
+                                    entranceEnabled={entranceEnabled}
+                                    liveEntranceEnabled={
+                                      group.kind === "activity" ? !bulkRender : undefined
+                                    }
+                                    context={timelineGroupEntryContext}
+                                  />
+                                </TimelineSearchRevealContext.Provider>
+                              );
+                            })}
+                            {groups.length > 0 && trailingState ? (
+                              <div data-og-timeline-trailing-state="">{trailingState}</div>
+                            ) : null}
+                            {hasNewer && newerFailure?.key === newerBoundaryKey ? (
+                              <div
+                                data-og-newer-error=""
+                                className="flex flex-col items-center gap-2 px-4 py-3 text-center text-og-menu text-og-fg-muted"
+                              >
+                                <p role="status" className="max-w-prose [overflow-wrap:anywhere]">
+                                  Couldn’t load later activity. {newerFailure.message}
+                                </p>
+                                <button
+                                  ref={newerRetryButtonRef}
+                                  type="button"
+                                  data-og-retry-newer=""
+                                  className="min-h-11 rounded-og-md border border-og-border px-3 py-2 text-og-fg hover:bg-og-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent"
+                                  aria-disabled={loadingNewer || newerRetryPending}
+                                  aria-busy={newerRetryPending}
+                                  onClick={() => requestNewer(true)}
+                                >
+                                  {newerRetryPending
+                                    ? "Retrying later activity…"
+                                    : "Retry later activity"}
+                                </button>
+                              </div>
+                            ) : null}
+                            {hasNewer ? (
+                              <div
+                                ref={bottomSentinelRef}
+                                data-og-bottom-sentinel=""
+                                data-og-timeline-chrome=""
+                                aria-hidden="true"
+                                className="h-px w-full"
+                              />
+                            ) : null}
+                          </div>
+                        </TimelineBeforeLayout>
+                      </div>
+                      {draftAnnotations && draftAnnotations.length > 0 ? (
+                        <Suspense fallback={null}>
+                          <TimelineAnnotationMarkers
+                            rootRef={scrollRef}
+                            annotations={draftAnnotations}
+                            onSelect={onDraftAnnotationSelect}
+                          />
+                        </Suspense>
+                      ) : null}
+
+                      <AnimatePresence>
+                        {questionNav ? (
+                          <motion.div
+                            key="question-nav"
+                            initial={{ opacity: 0, y: -6 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -6 }}
+                            transition={{ duration: 0.15, ease: "easeOut" }}
+                            data-og-question-nav=""
+                            // Below the pinned work-header strip (py-1.5 row, 44px on coarse
+                            // pointers), never over it: the header stays a full-width target.
+                            data-og-pill-placement={questionPillPlacement.placement}
+                            style={{ marginTop: questionPillPlacement.offsetY }}
+                            className={cn(
+                              "pointer-events-none absolute inset-x-0 top-11 z-10 flex px-4 sm:px-6 pointer-coarse:top-14",
+                              QUESTION_PILL_PLACEMENT_CLASS[questionPillPlacement.placement],
+                            )}
+                          >
+                            <motion.div
+                              ref={questionPillRef}
+                              layout="position"
+                              transition={{ duration: 0.18, ease: "easeOut" }}
+                              className="pointer-events-auto inline-flex max-w-full items-center rounded-full border border-og-border bg-og-surface-3/90 text-og-control font-medium text-og-fg shadow-og-md backdrop-blur"
                             >
-                              <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)}
+                                data-og-jump-to-question=""
+                                onClick={() => jumpToQuestion(questionNav.key)}
+                                className="inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap px-3 py-1.5 hover:text-og-fg pointer-coarse:min-h-11"
                               >
-                                {newerRetryPending
-                                  ? "Retrying later activity…"
-                                  : "Retry later activity"}
+                                <ArrowUpIcon aria-hidden className="size-3.5" />
+                                Back to your message
                               </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}
-
-                    <AnimatePresence>
-                      {questionNav ? (
-                        <motion.div
-                          key="question-nav"
-                          initial={{ opacity: 0, y: -6 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          exit={{ opacity: 0, y: -6 }}
-                          transition={{ duration: 0.15, ease: "easeOut" }}
-                          data-og-question-nav=""
-                          // Below the pinned work-header strip (py-1.5 row, 44px on coarse
-                          // pointers), never over it: the header stays a full-width target.
-                          className="pointer-events-none absolute inset-x-0 top-11 z-10 flex justify-end px-4 sm:px-6 pointer-coarse:top-14"
-                        >
-                          <div className="pointer-events-auto inline-flex max-w-[calc(50%-0.5rem)] items-center rounded-full border border-og-border bg-og-surface-3/90 text-og-control font-medium text-og-fg shadow-og-md backdrop-blur">
-                            <button
-                              type="button"
-                              data-og-jump-to-question=""
-                              onClick={() => void jumpToLatestQuestion()}
-                              disabled={questionPending}
-                              aria-busy={questionPending}
-                              title={questionError ?? undefined}
-                              className="inline-flex min-w-0 items-center gap-1.5 px-3 py-1.5 hover:text-og-fg pointer-coarse:min-h-11"
-                            >
-                              <ArrowUpIcon aria-hidden className="size-3.5" />
-                              Latest question
-                            </button>
-                            {questionError && (
-                              <span role="status" className="px-2 text-og-xs">
-                                {questionError}
-                              </span>
-                            )}
-                          </div>
-                        </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={() => {
-                            // 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) {
+                            </motion.div>
+                          </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>
+                        {jumpPillShown ? (
+                          <motion.button
+                            ref={jumpPillRef}
+                            type="button"
+                            data-og-jump-to-latest=""
+                            data-og-pill-placement={jumpPillPlacement.placement}
+                            layout="position"
+                            initial={{ opacity: 0, y: 8 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: 8 }}
+                            transition={{ duration: 0.15, ease: "easeOut" }}
+                            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;
-                                      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.
+                                    },
+                                  );
+                                } 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);
                               }
-                              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>
-                </TimelineAnnotationSourceRootContext.Provider>
-              </TooltipProvider>
-            </EntranceAnimationProvider>
-          </TimelineComputeLabelProvider>
-        </SeenActivityIdsProvider>
-      </FoldMemoryProvider>
-    </LightboxProvider>
+                            }}
+                            className={cn(
+                              "absolute bottom-4 w-fit",
+                              JUMP_PILL_PLACEMENT_CLASS[jumpPillPlacement.placement],
+                              "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>
+                  </TimelineAnnotationSourceRootContext.Provider>
+                </TooltipProvider>
+              </EntranceAnimationProvider>
+            </TimelineComputeLabelProvider>
+          </SeenActivityIdsProvider>
+        </FoldMemoryProvider>
+      </LightboxProvider>
+    </AllowancePresentationProvider>
   );
   // Agent-authored object links resolve through the host, never the console.
   return <OpenGeniLinkProvider resolveLink={resolveLink}>{timeline}</OpenGeniLinkProvider>;
@@ -3899,30 +3926,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>
@@ -4548,6 +4588,7 @@ function formatVideoDuration(seconds: number): string {
 
 function NoticeRow({ item }: { item: NoticeItem }) {
   const enter = useEntranceAnimation();
+  if (item.allowance) return <AllowanceExhaustedRow refusal={item.allowance} />;
   if (item.recordedOutcome) {
     return (
       <details