Optimize WebUI streaming and long history rendering

Batch stream deltas, window long transcripts, lazy-load syntax highlighting, and refine activity/composer interactions.

Add title refresh retries plus tests for streaming, windowing, code blocks, and live activity behavior.

webui/src/components/thread/ThreadViewport.tsx

@@ -1,8 +1,17 @@
-import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ArrowDown } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { ThreadMessages } from "@/components/thread/ThreadMessages";
+import { isAgentActivityMember } from "@/components/thread/AgentActivityCluster";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { UIMessage } from "@/lib/types";
@@ -14,9 +23,27 @@ interface ThreadViewportProps {
   emptyState?: ReactNode;
   scrollToBottomSignal?: number;
   conversationKey?: string | null;
+  showScrollToBottomButton?: boolean;
 }
 
 const NEAR_BOTTOM_PX = 48;
+const DEFAULT_SCROLL_BUTTON_BOTTOM_PX = 192;
+const SCROLL_BUTTON_COMPOSER_GAP_PX = 16;
+export const INITIAL_HISTORY_WINDOW = 160;
+export const HISTORY_WINDOW_INCREMENT = 120;
+
+export function windowMessages(messages: UIMessage[], visibleCount: number): UIMessage[] {
+  if (messages.length <= visibleCount) return messages;
+  let start = Math.max(0, messages.length - visibleCount);
+  while (
+    start > 0
+    && isAgentActivityMember(messages[start])
+    && isAgentActivityMember(messages[start - 1])
+  ) {
+    start -= 1;
+  }
+  return messages.slice(start);
+}
 
 export function ThreadViewport({
   messages,
@@ -25,18 +52,33 @@ export function ThreadViewport({
   emptyState,
   scrollToBottomSignal = 0,
   conversationKey = null,
+  showScrollToBottomButton = true,
 }: ThreadViewportProps) {
   const { t } = useTranslation();
   const scrollRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const composerDockRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const lastConversationKeyRef = useRef<string | null>(conversationKey);
   const pendingConversationScrollRef = useRef(true);
   const scrollFrameIdsRef = useRef<number[]>([]);
+  const restoreScrollAfterPrependRef =
+    useRef<{ height: number; top: number } | null>(null);
   /** User scrolled away from the bottom; do not auto-yank until they return or we reset (new chat / send). */
   const userReadingHistoryRef = useRef(false);
   const [atBottom, setAtBottom] = useState(true);
+  const [composerDockHeight, setComposerDockHeight] = useState(0);
+  const [visibleMessageCount, setVisibleMessageCount] =
+    useState(INITIAL_HISTORY_WINDOW);
   const hasMessages = messages.length > 0;
+  const visibleMessages = useMemo(
+    () => windowMessages(messages, visibleMessageCount),
+    [messages, visibleMessageCount],
+  );
+  const hiddenMessageCount = messages.length - visibleMessages.length;
+  const scrollButtonBottom = composerDockHeight > 0
+    ? composerDockHeight + SCROLL_BUTTON_COMPOSER_GAP_PX
+    : DEFAULT_SCROLL_BUTTON_BOTTOM_PX;
 
   const cancelScheduledBottomScroll = useCallback(() => {
     for (const id of scrollFrameIdsRef.current) {
@@ -77,6 +119,30 @@ export function ThreadViewport({
     [cancelScheduledBottomScroll, scrollToBottomNow],
   );
 
+  const loadEarlierMessages = useCallback(() => {
+    const el = scrollRef.current;
+    if (el) {
+      restoreScrollAfterPrependRef.current = {
+        height: el.scrollHeight,
+        top: el.scrollTop,
+      };
+    }
+    userReadingHistoryRef.current = true;
+    setAtBottom(false);
+    setVisibleMessageCount((count) =>
+      Math.min(messages.length, count + HISTORY_WINDOW_INCREMENT),
+    );
+  }, [messages.length]);
+
+  const measureComposerDock = useCallback(() => {
+    const el = composerDockRef.current;
+    if (!el) return;
+    const height = el.getBoundingClientRect().height || el.offsetHeight;
+    setComposerDockHeight((current) =>
+      Math.abs(current - height) < 1 ? current : height,
+    );
+  }, []);
+
   useEffect(() => {
     if (!atBottom) return;
     // Instant jump: CSS scroll-smooth + behavior "auto" still animates in some
@@ -96,8 +162,19 @@ export function ThreadViewport({
     pendingConversationScrollRef.current = true;
     userReadingHistoryRef.current = false;
     setAtBottom(true);
+    setVisibleMessageCount(INITIAL_HISTORY_WINDOW);
   }, [conversationKey]);
 
+  useLayoutEffect(() => {
+    const pending = restoreScrollAfterPrependRef.current;
+    if (!pending) return;
+    const el = scrollRef.current;
+    restoreScrollAfterPrependRef.current = null;
+    if (!el) return;
+    const delta = el.scrollHeight - pending.height;
+    el.scrollTop = pending.top + delta;
+  }, [visibleMessages.length]);
+
   useLayoutEffect(() => {
     if (!pendingConversationScrollRef.current) return;
     if (!conversationKey) {
@@ -110,6 +187,10 @@ export function ThreadViewport({
     pendingConversationScrollRef.current = false;
   }, [conversationKey, hasMessages, messages, scrollToBottom]);
 
+  useLayoutEffect(() => {
+    measureComposerDock();
+  }, [composer, hasMessages, measureComposerDock]);
+
   useEffect(() => cancelScheduledBottomScroll, [cancelScheduledBottomScroll]);
 
   useEffect(() => {
@@ -123,6 +204,14 @@ export function ThreadViewport({
     return () => observer.disconnect();
   }, [hasMessages, scrollToBottom]);
 
+  useEffect(() => {
+    const target = composerDockRef.current;
+    if (!target || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => measureComposerDock());
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [hasMessages, measureComposerDock]);
+
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -155,11 +244,20 @@ export function ThreadViewport({
           <div ref={contentRef} className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col">
             <div className="flex-1 px-4 pb-20 pt-4">
               <div className="mx-auto w-full max-w-[49.5rem]">
-                <ThreadMessages messages={messages} isStreaming={isStreaming} />
+                <ThreadMessages
+                  messages={visibleMessages}
+                  isStreaming={isStreaming}
+                  hiddenMessageCount={hiddenMessageCount}
+                  onLoadEarlier={loadEarlierMessages}
+                />
               </div>
             </div>
 
-            <div className="sticky bottom-0 z-10 mt-auto bg-background">
+            <div
+              ref={composerDockRef}
+              data-testid="thread-composer-dock"
+              className="sticky bottom-0 z-10 mt-auto bg-background"
+            >
               <div className="px-4 pb-3">
                 {composer}
               </div>
@@ -183,17 +281,18 @@ export function ThreadViewport({
         className="pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-background to-transparent"
       />
 
-      {!atBottom && (
+      {showScrollToBottomButton && !atBottom && (
         <Button
           variant="outline"
           size="icon"
           onClick={() => scrollToBottom(true, 1, { force: true })}
           className={cn(
             /* Keep clear of sticky composer (textarea + toolbar + optional goal strip). */
-            "absolute bottom-48 left-1/2 z-20 h-8 w-8 -translate-x-1/2 rounded-full shadow-md",
+            "absolute left-1/2 z-20 h-8 w-8 -translate-x-1/2 rounded-full shadow-md",
             "bg-background/90 backdrop-blur",
             "animate-in fade-in-0 zoom-in-95",
           )}
+          style={{ bottom: scrollButtonBottom }}
           aria-label={t("thread.scrollToBottom")}
         >
           <ArrowDown className="h-4 w-4" />