fix: use queueMicrotask instead of setTimeout in story mocks

Replace setTimeout(..., 100) with queueMicrotask() for message delivery
in Storybook mocks. This ensures messages arrive synchronously (in the
microtask queue) rather than 100ms later, eliminating timing races with
Chromatic's screenshot capture.

- All onChat mock callbacks now use queueMicrotask for message delivery
- Add chromatic: { delay: 500 } as backup for ActiveWorkspaceWithChat
  and MarkdownTables stories
- Fix import: use storybook/test instead of @storybook/test (Storybook 10)

Author: ThomasK33

src/browser/App.stories.tsx

@@ -15,7 +15,7 @@ import { createMockORPCClient, type MockORPCClientOptions } from "../../.storybo
 async function waitForChatScroll({ canvasElement }: { canvasElement: HTMLElement }) {
   const canvas = within(canvasElement);
 
-  // Wait for messages to appear (they load via setTimeout in mock)
+  // Wait for messages to appear (they load via queueMicrotask in mock)
   await waitFor(
     () => {
       const messages = canvas.queryAllByTestId("chat-message");
@@ -319,6 +319,10 @@ export const ManyWorkspaces: Story = {
  * Use this story to test sidebar redesigns and ensure all data is visible.
  */
 export const ActiveWorkspaceWithChat: Story = {
+  parameters: {
+    // Give Chromatic extra time for messages to load and scroll to complete
+    chromatic: { delay: 500 },
+  },
   render: () => {
     const workspaceId = "demo-workspace";
 
@@ -563,7 +567,7 @@ main
     const onChat = (wsId: string, callback: (msg: WorkspaceChatMessage) => void) => {
       // Active workspace with complete chat history
       if (wsId === workspaceId) {
-        setTimeout(() => {
+        queueMicrotask(() => {
           // User message
           callback({
             type: "message",
@@ -978,7 +982,7 @@ main
             tokens: 65,
             timestamp: STABLE_TIMESTAMP - 140000,
           });
-        }, 100);
+        });
 
         // Keep sending reasoning deltas to maintain streaming state
         // tokens: 0 to avoid flaky token counts in visual tests
@@ -998,7 +1002,7 @@ main
         };
       } else if (wsId === streamingWorkspaceId) {
         // Streaming workspace - show active work in progress
-        setTimeout(() => {
+        queueMicrotask(() => {
           const now = NOW; // Use stable timestamp
 
           // Previous completed message with status_set (MUST be sent BEFORE caught-up)
@@ -1092,7 +1096,7 @@ main
             tokens: 8,
             timestamp: now - 500, // 0.5 seconds ago
           });
-        }, 100);
+        });
 
         // Keep sending deltas to maintain streaming state
         // tokens: 0 to avoid flaky token counts in visual tests
@@ -1111,9 +1115,9 @@ main
         return () => clearInterval(intervalId);
       } else {
         // Other workspaces - send caught-up immediately
-        setTimeout(() => {
+        queueMicrotask(() => {
           callback({ type: "caught-up" });
-        }, 100);
+        });
 
         return () => {
           // Cleanup
@@ -1138,6 +1142,10 @@ main
  * Shows various table formats without disruptive copy/download actions
  */
 export const MarkdownTables: Story = {
+  parameters: {
+    // Give Chromatic extra time for messages to load and scroll to complete
+    chromatic: { delay: 500 },
+  },
   render: () => {
     const workspaceId = "my-app-feature";
 
@@ -1175,7 +1183,7 @@ export const MarkdownTables: Story = {
     );
 
     const onChat = (_wsId: string, emit: (msg: WorkspaceChatMessage) => void) => {
-      setTimeout(() => {
+      queueMicrotask(() => {
         // User message
         emit({
           type: "message",
@@ -1267,7 +1275,7 @@ These tables should render cleanly without any disruptive copy or download actio
 
         // Mark as caught up
         emit({ type: "caught-up" });
-      }, 100);
+      });
     };
 
     return <AppWithMocks projects={projects} workspaces={workspaces} onChat={onChat} />;