fix(webui): stabilize live thread rendering and navigation

webui/src/components/thread/ThreadShell.tsx

@@ -81,19 +81,33 @@ export function ThreadShell({
   const { t } = useTranslation();
   const chatId = session?.chatId ?? null;
   const historyKey = session?.key ?? null;
-  const { messages: historical, loading, hasPendingToolCalls } = useSessionHistory(historyKey);
-  const { modelName, token } = useClient();
+  const {
+    messages: historical,
+    loading,
+    hasPendingToolCalls,
+    refresh: refreshHistory,
+    version: historyVersion,
+  } = useSessionHistory(historyKey);
+  const { client, modelName, token } = useClient();
   const [booting, setBooting] = useState(false);
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
   const [heroImageMode, setHeroImageMode] = useState(false);
+  const [scrollToBottomSignal, setScrollToBottomSignal] = useState(0);
   const pendingFirstRef = useRef<PendingFirstMessage | null>(null);
   const messageCacheRef = useRef<Map<string, UIMessage[]>>(new Map());
   const lastCachedChatIdRef = useRef<string | null>(null);
+  const appliedHistoryVersionRef = useRef<Map<string, number>>(new Map());
+  const pendingCanonicalHydrateRef = useRef<Set<string>>(new Set());
 
   const initial = useMemo(() => {
     if (!chatId) return historical;
     return messageCacheRef.current.get(chatId) ?? historical;
   }, [chatId, historical]);
+  const handleTurnEnd = useCallback(() => {
+    if (chatId) pendingCanonicalHydrateRef.current.add(chatId);
+    refreshHistory();
+    onTurnEnd?.();
+  }, [chatId, onTurnEnd, refreshHistory]);
   const {
     messages,
     isStreaming,
@@ -102,22 +116,48 @@ export function ThreadShell({
     setMessages,
     streamError,
     dismissStreamError,
-  } = useNanobotStream(chatId, initial, hasPendingToolCalls, onTurnEnd);
+  } = useNanobotStream(chatId, initial, hasPendingToolCalls, handleTurnEnd);
   const showHeroComposer = messages.length === 0 && !loading;
 
   useEffect(() => {
     if (!chatId || loading) return;
     const cached = messageCacheRef.current.get(chatId);
+    const appliedVersion = appliedHistoryVersionRef.current.get(chatId) ?? 0;
+    const hasPendingCanonicalHydrate = pendingCanonicalHydrateRef.current.has(chatId);
+    const hasNewCanonicalHistory = hasPendingCanonicalHydrate && historyVersion > appliedVersion;
     // When the user switches away and back, keep the local in-memory thread
     // state (including not-yet-persisted messages) instead of replacing it with
-    // whatever the history endpoint currently knows about.
+    // whatever the history endpoint currently knows about. Once a fresh
+    // canonical replay arrives after turn_end, prefer it so live Markdown/tool
+    // rendering converges to the same shape as a manual refresh.
     setMessages((prev) => {
+      if (hasNewCanonicalHistory && historical.length > 0) {
+        pendingCanonicalHydrateRef.current.delete(chatId);
+        appliedHistoryVersionRef.current.set(chatId, historyVersion);
+        messageCacheRef.current.set(chatId, historical);
+        return historical;
+      }
       if (cached && cached.length > 0) return cached;
       if (historical.length === 0 && prev.length > 0) return prev;
+      appliedHistoryVersionRef.current.set(chatId, historyVersion);
       return historical;
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loading, chatId, historical]);
+  }, [loading, chatId, historical, historyVersion]);
+
+  useEffect(() => {
+    if (!chatId) return;
+    return client.onSessionUpdate((updatedChatId) => {
+      if (updatedChatId !== chatId) return;
+      pendingCanonicalHydrateRef.current.add(chatId);
+      refreshHistory();
+    });
+  }, [chatId, client, refreshHistory]);
+
+  useEffect(() => {
+    if (!chatId || loading) return;
+    setScrollToBottomSignal((value) => value + 1);
+  }, [chatId, loading, historical]);
 
   useEffect(() => {
     if (chatId) return;
@@ -148,6 +188,7 @@ export function ThreadShell({
     const pending = pendingFirstRef.current;
     if (!pending) return;
     pendingFirstRef.current = null;
+    setScrollToBottomSignal((value) => value + 1);
     send(pending.content, pending.images, pending.options);
     setBooting(false);
   }, [chatId, send]);
@@ -181,18 +222,26 @@ export function ThreadShell({
     [booting, onCreateChat],
   );
 
+  const handleThreadSend = useCallback(
+    (content: string, images?: SendImage[], options?: SendOptions) => {
+      setScrollToBottomSignal((value) => value + 1);
+      send(content, images, options);
+    },
+    [send],
+  );
+
   const handleQuickAction = useCallback(
     (prompt: string) => {
       const options: SendOptions | undefined = heroImageMode
         ? { imageGeneration: { enabled: true, aspect_ratio: null } }
         : undefined;
       if (session) {
-        send(prompt, undefined, options);
+        handleThreadSend(prompt, undefined, options);
         return;
       }
       void handleWelcomeSend(prompt, undefined, options);
     },
-    [handleWelcomeSend, heroImageMode, send, session],
+    [handleThreadSend, handleWelcomeSend, heroImageMode, session],
   );
 
   const quickActionItems = heroImageMode ? IMAGE_QUICK_ACTION_KEYS : QUICK_ACTION_KEYS;
@@ -233,7 +282,7 @@ export function ThreadShell({
       ) : null}
       {session ? (
         <ThreadComposer
-          onSend={send}
+          onSend={handleThreadSend}
           disabled={!chatId}
           isStreaming={isStreaming}
           placeholder={
@@ -296,6 +345,8 @@ export function ThreadShell({
         isStreaming={isStreaming}
         emptyState={emptyState}
         composer={composer}
+        scrollToBottomSignal={scrollToBottomSignal}
+        conversationKey={historyKey}
       />
     </section>
   );