fix(messages): immediate re-pin auto-scroll on thread switch

Author: Dimillian

memory/decisions.md

@@ -281,3 +281,10 @@ Type: preference
 Event: User requested both TCP and Orbit provider options be visibly marked as in progress.
 Action: Updated provider selector labels to `TCP (wip)` and `Orbit (wip)` in settings.
 Rule: Keep both remote provider labels marked `(wip)` until user requests removal after production-readiness.
+
+## 2026-02-07 21:06
+Context: Conversation auto-scroll regression (jump before re-pin)
+Type: decision
+Event: Smooth, delayed auto-scroll on streaming/appended messages caused visible upward jump then repin in the conversation view.
+Action: Updated `Messages` auto-scroll paths to immediate container-bottom pinning (`scrollTop = scrollHeight`) and removed delayed smooth auto-scroll behavior for automatic updates.
+Rule: Automatic message pinning should be immediate and non-animated; reserve smooth scrolling for explicit user-initiated navigation only.

memory/mistakes.md

@@ -111,3 +111,13 @@ Rule: Do not auto-run desktop-only diagnostics on mobile surfaces; gate by platf
 Root cause: Auto-refresh effect was scoped by provider/mode only and assumed desktop capabilities.
 Fix applied: Updated `src/features/settings/components/SettingsView.tsx` effect logic and added `src/utils/platformPaths.test.ts` coverage for mobile detection.
 Prevention rule: For any auto-run settings helper, explicitly classify desktop-only vs cross-platform behavior before wiring useEffect refreshes.
+
+## 2026-02-07 21:09
+Context: Messages auto-scroll regression follow-up (thread switch)
+Type: mistake
+Event: Converting the auto-scroll effect to `useLayoutEffect` introduced an ordering bug where thread switches could skip initial re-pin if the previous thread was scrolled up.
+Action: Switched thread-change `autoScrollRef` reset to `useLayoutEffect`, added `threadId` to auto-scroll layout effect dependencies, and added a regression test for thread-switch re-pin behavior.
+Rule: When converting effects between `useEffect` and `useLayoutEffect`, preserve ordering guarantees for dependent refs across thread/navigation boundaries.
+Root cause: `autoScrollRef.current = true` still ran in `useEffect` after the new layout scroll pass, so first render on thread switch could evaluate stale `false`.
+Fix applied: Updated `src/features/messages/components/Messages.tsx` hook ordering/dependencies and added `re-pins to bottom on thread switch even when previous thread was scrolled up` in `src/features/messages/components/Messages.test.tsx`.
+Prevention rule: For scroll/anchor refs, pair layout-timing ref resets with layout-timing consumers and add regression coverage for cross-thread transitions.

src/features/messages/components/Messages.test.tsx

@@ -716,4 +716,59 @@ describe("Messages", () => {
       expect(screen.getByText("5 tool calls")).toBeTruthy();
     });
   });
+
+  it("re-pins to bottom on thread switch even when previous thread was scrolled up", () => {
+    const items: ConversationItem[] = [
+      {
+        id: "msg-shared",
+        kind: "message",
+        role: "assistant",
+        text: "Shared tail",
+      },
+    ];
+
+    const { container, rerender } = render(
+      <Messages
+        items={items}
+        threadId="thread-1"
+        workspaceId="ws-1"
+        isThinking={false}
+        openTargets={[]}
+        selectedOpenAppId=""
+      />,
+    );
+
+    const messagesNode = container.querySelector(".messages.messages-full");
+    expect(messagesNode).toBeTruthy();
+    const scrollNode = messagesNode as HTMLDivElement;
+
+    Object.defineProperty(scrollNode, "clientHeight", {
+      configurable: true,
+      value: 200,
+    });
+    Object.defineProperty(scrollNode, "scrollHeight", {
+      configurable: true,
+      value: 600,
+    });
+    scrollNode.scrollTop = 100;
+    fireEvent.scroll(scrollNode);
+
+    Object.defineProperty(scrollNode, "scrollHeight", {
+      configurable: true,
+      value: 900,
+    });
+
+    rerender(
+      <Messages
+        items={items}
+        threadId="thread-2"
+        workspaceId="ws-1"
+        isThinking={false}
+        openTargets={[]}
+        selectedOpenAppId=""
+      />,
+    );
+
+    expect(scrollNode.scrollTop).toBe(900);
+  });
 });

src/features/messages/components/Messages.tsx

@@ -1,4 +1,12 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import Brain from "lucide-react/dist/esm/icons/brain";
@@ -1161,19 +1169,20 @@ export const Messages = memo(function Messages({
   };
 
   const requestAutoScroll = useCallback(() => {
-    if (!bottomRef.current) {
-      return;
-    }
     const container = containerRef.current;
     const shouldScroll =
       autoScrollRef.current || (container ? isNearBottom(container) : true);
     if (!shouldScroll) {
       return;
     }
-    bottomRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+      return;
+    }
+    bottomRef.current?.scrollIntoView({ block: "end" });
   }, [isNearBottom]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     autoScrollRef.current = true;
   }, [threadId]);
   const toggleExpanded = useCallback((id: string) => {
@@ -1289,34 +1298,20 @@ export const Messages = memo(function Messages({
     [],
   );
 
-  useEffect(() => {
-    if (!bottomRef.current) {
-      return undefined;
-    }
+  useLayoutEffect(() => {
     const container = containerRef.current;
     const shouldScroll =
       autoScrollRef.current ||
       (container ? isNearBottom(container) : true);
     if (!shouldScroll) {
-      return undefined;
+      return;
     }
-    let raf1 = 0;
-    let raf2 = 0;
-    const target = bottomRef.current;
-    raf1 = window.requestAnimationFrame(() => {
-      raf2 = window.requestAnimationFrame(() => {
-        target.scrollIntoView({ behavior: "smooth", block: "end" });
-      });
-    });
-    return () => {
-      if (raf1) {
-        window.cancelAnimationFrame(raf1);
-      }
-      if (raf2) {
-        window.cancelAnimationFrame(raf2);
-      }
-    };
-  }, [scrollKey, isThinking, isNearBottom]);
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+      return;
+    }
+    bottomRef.current?.scrollIntoView({ block: "end" });
+  }, [scrollKey, isThinking, isNearBottom, threadId]);
 
   const groupedItems = useMemo(() => buildToolGroups(visibleItems), [visibleItems]);