fix(webui): stabilize live thread rendering and navigation

webui/src/components/thread/ThreadViewport.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ArrowDown } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
@@ -12,6 +12,8 @@ interface ThreadViewportProps {
   isStreaming: boolean;
   composer: ReactNode;
   emptyState?: ReactNode;
+  scrollToBottomSignal?: number;
+  conversationKey?: string | null;
 }
 
 const NEAR_BOTTOM_PX = 48;
@@ -21,26 +23,92 @@ export function ThreadViewport({
   isStreaming,
   composer,
   emptyState,
+  scrollToBottomSignal = 0,
+  conversationKey = null,
 }: ThreadViewportProps) {
   const { t } = useTranslation();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const lastConversationKeyRef = useRef<string | null>(conversationKey);
+  const pendingConversationScrollRef = useRef(true);
+  const scrollFrameIdsRef = useRef<number[]>([]);
+  const forceBottomUntilRef = useRef(0);
   const [atBottom, setAtBottom] = useState(true);
   const hasMessages = messages.length > 0;
 
-  const scrollToBottom = useCallback((smooth = false) => {
-    const el = scrollRef.current;
-    if (!el) return;
-    el.scrollTo({
-      top: el.scrollHeight,
-      behavior: smooth ? "smooth" : "auto",
-    });
+  const cancelScheduledBottomScroll = useCallback(() => {
+    for (const id of scrollFrameIdsRef.current) {
+      window.cancelAnimationFrame(id);
+    }
+    scrollFrameIdsRef.current = [];
   }, []);
 
+  const scrollToBottomNow = useCallback((smooth = false) => {
+    const el = scrollRef.current;
+    const marker = bottomRef.current;
+    const behavior: ScrollBehavior = smooth ? "smooth" : "auto";
+    if (marker) {
+      marker.scrollIntoView({ block: "end", behavior });
+    } else if (el) {
+      el.scrollTo({ top: el.scrollHeight, behavior });
+    }
+    setAtBottom(true);
+  }, []);
+
+  const scrollToBottom = useCallback((smooth = false, frames = 1) => {
+    cancelScheduledBottomScroll();
+    scrollToBottomNow(smooth);
+    for (let i = 1; i < frames; i += 1) {
+      const id = window.requestAnimationFrame(() => scrollToBottomNow(smooth));
+      scrollFrameIdsRef.current.push(id);
+    }
+  }, [cancelScheduledBottomScroll, scrollToBottomNow]);
+
   useEffect(() => {
     if (!atBottom) return;
     scrollToBottom(!isStreaming);
   }, [messages, isStreaming, atBottom, scrollToBottom]);
 
+  useEffect(() => {
+    if (scrollToBottomSignal <= 0) return;
+    forceBottomUntilRef.current = Date.now() + 2_000;
+    scrollToBottom(true, 8);
+  }, [scrollToBottomSignal, scrollToBottom]);
+
+  useLayoutEffect(() => {
+    if (lastConversationKeyRef.current === conversationKey) return;
+    lastConversationKeyRef.current = conversationKey;
+    pendingConversationScrollRef.current = true;
+    forceBottomUntilRef.current = Date.now() + 2_000;
+    setAtBottom(true);
+  }, [conversationKey]);
+
+  useLayoutEffect(() => {
+    if (!pendingConversationScrollRef.current) return;
+    if (!conversationKey) {
+      pendingConversationScrollRef.current = false;
+      scrollToBottom(false, 4);
+      return;
+    }
+    scrollToBottom(false, 8);
+    if (!hasMessages) return;
+    pendingConversationScrollRef.current = false;
+  }, [conversationKey, hasMessages, messages, scrollToBottom]);
+
+  useEffect(() => cancelScheduledBottomScroll, [cancelScheduledBottomScroll]);
+
+  useEffect(() => {
+    const target = contentRef.current;
+    if (!target || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (!atBottom && Date.now() > forceBottomUntilRef.current) return;
+      scrollToBottom(false, 4);
+    });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [atBottom, hasMessages, scrollToBottom]);
+
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -68,7 +136,7 @@ export function ThreadViewport({
         )}
       >
         {hasMessages ? (
-          <div className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col">
+          <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} />
@@ -82,7 +150,7 @@ export function ThreadViewport({
             </div>
           </div>
         ) : (
-          <div className="mx-auto flex min-h-full w-full max-w-[72rem] flex-col px-4">
+          <div ref={contentRef} className="mx-auto flex min-h-full w-full max-w-[72rem] flex-col px-4">
             <div className="flex w-full flex-1 items-center justify-center pb-[7vh] pt-8">
               <div className="flex w-full max-w-[58rem] flex-col gap-6">
                 {emptyState}
@@ -91,6 +159,7 @@ export function ThreadViewport({
             </div>
           </div>
         )}
+        <div ref={bottomRef} aria-hidden className="h-px" />
       </div>
 
       <div