fix: batch async message yields to prevent scroll issues

The oRPC async generator was yielding messages one at a time with async
boundaries, causing premature React renders during history replay. This
led to scroll-to-bottom firing before all messages loaded.

Extract createAsyncMessageQueue utility that yields all queued messages
synchronously (no async pauses within a batch). Used by both the real
router and storybook mocks to match original IPC callback behavior.

Author: ThomasK33

.storybook/mocks/orpc.ts

@@ -9,6 +9,7 @@ import type { ProjectConfig } from "@/node/config";
 import type { WorkspaceChatMessage } from "@/common/orpc/types";
 import type { ChatStats } from "@/common/types/chatStats";
 import { DEFAULT_RUNTIME_CONFIG } from "@/common/constants/workspace";
+import { createAsyncMessageQueue } from "@/common/utils/asyncMessageQueue";
 
 export interface MockORPCClientOptions {
   projects?: Map<string, ProjectConfig>;
@@ -136,38 +137,15 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): ORPCC
           return;
         }
 
-        // Create a queue-based async iterator
-        const queue: WorkspaceChatMessage[] = [];
-        let resolveNext: ((msg: WorkspaceChatMessage) => void) | null = null;
-        let ended = false;
-
-        const emit = (msg: WorkspaceChatMessage) => {
-          if (ended) return;
-          if (resolveNext) {
-            const resolve = resolveNext;
-            resolveNext = null;
-            resolve(msg);
-          } else {
-            queue.push(msg);
-          }
-        };
+        const { push, iterate, end } = createAsyncMessageQueue<WorkspaceChatMessage>();
 
         // Call the user's onChat handler
-        const cleanup = onChat(input.workspaceId, emit);
+        const cleanup = onChat(input.workspaceId, push);
 
         try {
-          while (!ended) {
-            if (queue.length > 0) {
-              yield queue.shift()!;
-            } else {
-              const msg = await new Promise<WorkspaceChatMessage>((resolve) => {
-                resolveNext = resolve;
-              });
-              yield msg;
-            }
-          }
+          yield* iterate();
         } finally {
-          ended = true;
+          end();
           cleanup?.();
         }
       },

src/common/utils/asyncMessageQueue.ts

@@ -0,0 +1,72 @@
+/**
+ * Creates a queue-based async message stream.
+ *
+ * Messages pushed to the queue are yielded in batches (all queued messages
+ * at once without async boundaries). This prevents premature React renders
+ * when loading many messages quickly (e.g., history replay).
+ *
+ * Usage:
+ * ```ts
+ * const { push, iterate, end } = createAsyncMessageQueue<MyMessage>();
+ *
+ * // Push messages from any source
+ * eventEmitter.on('message', push);
+ *
+ * // Consume as async generator
+ * for await (const msg of iterate()) {
+ *   handleMessage(msg);
+ * }
+ *
+ * // Clean up
+ * end();
+ * ```
+ */
+export function createAsyncMessageQueue<T>(): {
+  push: (msg: T) => void;
+  iterate: () => AsyncGenerator<T>;
+  end: () => void;
+} {
+  const queue: T[] = [];
+  let resolveNext: (() => void) | null = null;
+  let ended = false;
+
+  const push = (msg: T) => {
+    if (ended) return;
+    queue.push(msg);
+    // Signal that new messages are available
+    if (resolveNext) {
+      const resolve = resolveNext;
+      resolveNext = null;
+      resolve();
+    }
+  };
+
+  async function* iterate(): AsyncGenerator<T> {
+    while (!ended) {
+      // Yield all queued messages synchronously (no async boundaries)
+      // This ensures all messages from a batch are processed in the same
+      // event loop tick, preventing premature renders
+      while (queue.length > 0) {
+        yield queue.shift()!;
+      }
+      // Wait for more messages
+      await new Promise<void>((resolve) => {
+        resolveNext = resolve;
+      });
+    }
+    // Yield any remaining messages after end() is called
+    while (queue.length > 0) {
+      yield queue.shift()!;
+    }
+  }
+
+  const end = () => {
+    ended = true;
+    // Wake up the iterator so it can exit
+    if (resolveNext) {
+      resolveNext();
+    }
+  };
+
+  return { push, iterate, end };
+}

src/node/orpc/router.ts

@@ -8,6 +8,7 @@ import type {
   FrontendWorkspaceMetadataSchemaType,
 } from "@/common/orpc/types";
 import { createAuthMiddleware } from "./authMiddleware";
+import { createAsyncMessageQueue } from "@/common/utils/asyncMessageQueue";
 
 export const router = (authToken?: string) => {
   const t = os.$context<ORPCContext>().use(createAuthMiddleware(authToken));
@@ -321,21 +322,7 @@ export const router = (authToken?: string) => {
         .output(schemas.workspace.onChat.output)
         .handler(async function* ({ context, input }) {
           const session = context.workspaceService.getOrCreateSession(input.workspaceId);
-
-          let resolveNext: ((value: WorkspaceChatMessage) => void) | null = null;
-          const queue: WorkspaceChatMessage[] = [];
-          let ended = false;
-
-          const push = (msg: WorkspaceChatMessage) => {
-            if (ended) return;
-            if (resolveNext) {
-              const resolve = resolveNext;
-              resolveNext = null;
-              resolve(msg);
-            } else {
-              queue.push(msg);
-            }
-          };
+          const { push, iterate, end } = createAsyncMessageQueue<WorkspaceChatMessage>();
 
           // 1. Subscribe to new events (including those triggered by replay)
           const unsubscribe = session.onChatEvent(({ message }) => {
@@ -353,18 +340,9 @@ export const router = (authToken?: string) => {
           push({ type: "caught-up" });
 
           try {
-            while (!ended) {
-              if (queue.length > 0) {
-                yield queue.shift()!;
-              } else {
-                const msg = await new Promise<WorkspaceChatMessage>((resolve) => {
-                  resolveNext = resolve;
-                });
-                yield msg;
-              }
-            }
+            yield* iterate();
           } finally {
-            ended = true;
+            end();
             unsubscribe();
           }
         }),