fix: use useLayoutEffect for initial scroll to fix Chromatic snapshots

The scroll-to-bottom when workspace loads was using useEffect with
requestAnimationFrame, which runs asynchronously after browser paint.
Chromatic could capture the snapshot before scroll completed.

Switch to useLayoutEffect which runs synchronously after DOM mutations
but before paint, ensuring scroll happens before Chromatic captures.
This also removes the need for the RAF wrapper since useLayoutEffect
already guarantees DOM is ready.

Author: ThomasK33

src/browser/components/AIView.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
+import React, { useState, useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { cn } from "@/common/lib/utils";
 import { MessageRenderer } from "./Messages/MessageRenderer";
 import { InterruptedBarrier } from "./Messages/ChatBarrier/InterruptedBarrier";
@@ -262,12 +262,11 @@ const AIViewInner: React.FC<AIViewProps> = ({
   ]);
 
   // Scroll to bottom when workspace loads or changes
-  useEffect(() => {
+  // useLayoutEffect ensures scroll happens synchronously after DOM mutations
+  // but before browser paint - critical for Chromatic snapshot consistency
+  useLayoutEffect(() => {
     if (workspaceState && !workspaceState.loading && workspaceState.messages.length > 0) {
-      // Give React time to render messages before scrolling
-      requestAnimationFrame(() => {
-        jumpToBottom();
-      });
+      jumpToBottom();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workspaceId, workspaceState?.loading]);