fix chat follow-up auto-scroll (#1177)

src/hooks/use-stick-to-bottom-instant.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
 
 const ESCAPE_FROM_LOCK_OFFSET_PX = 70;
@@ -31,7 +31,7 @@ export function useStickToBottomInstant(resetKey?: string, active = false) {
   // callback without re-creating the observer on every render.
   const activeRef = useRef(active);
   const escapedRef = useRef(escapedFromLock);
-  useEffect(() => {
+  useLayoutEffect(() => {
     activeRef.current = active;
     escapedRef.current = escapedFromLock;
   }, [active, escapedFromLock]);

src/pages/Chat/index.tsx

@@ -427,12 +427,16 @@ export function Chat() {
                 }
                 if (!loaded) return;
               }
-              await sendAcpPrompt({
+              const sendPromise = sendAcpPrompt({
                 sessionKey,
                 cwd: promptCwd,
                 message: text,
                 media,
               });
+              requestAnimationFrame(() => {
+                void scrollToBottom({ animation: 'instant', ignoreEscapes: true });
+              });
+              await sendPromise;
             })();
           }}
           onStop={() => void cancelAcp()}

tests/e2e/chat-scroll-pin-bottom.spec.ts

@@ -168,9 +168,17 @@ test.describe('ClawX chat scroll pin-to-bottom during runs', () => {
 
       // Start a run so pinning becomes active (sending === true).
       await expect(page.getByTestId('chat-composer-input')).toBeEnabled({ timeout: 30_000 });
+      await scrollContainer.evaluate((el) => {
+        const element = el as HTMLElement;
+        element.scrollTop = 0;
+        element.dispatchEvent(new Event('scroll', { bubbles: true }));
+      });
+      await expect(page.getByTestId('chat-scroll-to-latest')).toBeVisible();
       await page.getByTestId('chat-composer-input').fill('do a multi-tool task');
       await page.getByTestId('chat-composer-send').click();
       await expect(page.getByTestId('chat-composer-send')).toHaveAttribute('title', 'Stop');
+      await expect(page.getByText('do a multi-tool task')).toBeInViewport();
+      await expectPinnedToBottom();
 
       // Growing text stream -> height keeps increasing; bar must stay at bottom.
       await emitDelta({ sessionUpdate: 'agent_message', messageId: 'streaming-assistant', content: [{ type: 'text', text: streamingText(3) }] });