🤖 refactor: dedupe Storybook autofocus waits

Author: ammar-agent

src/browser/stories/App.bash.stories.tsx

@@ -17,6 +17,7 @@ import {
   createBashBackgroundTerminateTool,
 } from "./mockFactory";
 import { setupSimpleChatStory } from "./storyHelpers";
+import { blurActiveElement, waitForChatInputAutofocusDone } from "./storyPlayHelpers.js";
 import { userEvent, waitFor } from "@storybook/test";
 
 /**
@@ -64,20 +65,8 @@ async function expandAllBashTools(canvasElement: HTMLElement) {
   }
 
   // Avoid leaving focus on a tool header.
-  // Wait for ChatInput's auto-focus attempt to finish (no timing-based sleeps).
-  await waitFor(
-    () => {
-      const state = canvasElement
-        .querySelector('[data-component="ChatInputSection"]')
-        ?.getAttribute("data-autofocus-state");
-      if (state !== "done") {
-        throw new Error("ChatInput auto-focus not finished");
-      }
-    },
-    { timeout: 5000 }
-  );
-
-  (document.activeElement as HTMLElement | null)?.blur?.();
+  await waitForChatInputAutofocusDone(canvasElement);
+  blurActiveElement();
 }
 
 export default {

src/browser/stories/App.chat.stories.tsx

@@ -16,6 +16,7 @@ import {
 } from "./mockFactory";
 import { updatePersistedState } from "@/browser/hooks/usePersistedState";
 import { getModelKey } from "@/common/constants/storage";
+import { blurActiveElement, waitForChatInputAutofocusDone } from "./storyPlayHelpers.js";
 import { setupSimpleChatStory, setupStreamingChatStory } from "./storyHelpers";
 import { within, userEvent, waitFor } from "@storybook/test";
 
@@ -330,19 +331,9 @@ export const GenericTool: AppStory = {
       },
       { timeout: 5000 }
     );
-    // Wait for ChatInput's auto-focus attempt to finish (no timing-based sleeps), then blur
-    await waitFor(
-      () => {
-        const state = canvasElement
-          .querySelector('[data-component="ChatInputSection"]')
-          ?.getAttribute("data-autofocus-state");
-        if (state !== "done") {
-          throw new Error("ChatInput auto-focus not finished");
-        }
-      },
-      { timeout: 5000 }
-    );
-    (document.activeElement as HTMLElement)?.blur();
+    // Wait for ChatInput's auto-focus attempt to finish, then blur
+    await waitForChatInputAutofocusDone(canvasElement);
+    blurActiveElement();
   },
 };
 

src/browser/stories/App.reviews.stories.tsx

@@ -4,6 +4,7 @@
 
 import { appMeta, AppWithMocks, type AppStory } from "./meta.js";
 import { setupSimpleChatStory, setReviews, createReview } from "./storyHelpers";
+import { blurActiveElement, waitForChatInputAutofocusDone } from "./storyPlayHelpers.js";
 import { createUserMessage, createAssistantMessage } from "./mockFactory";
 import { within, userEvent, waitFor } from "@storybook/test";
 
@@ -273,18 +274,8 @@ export const BulkReviewActions: AppStory = {
       await userEvent.click(bannerButton);
     });
 
-    // Wait for ChatInput's auto-focus attempt to finish (no timing-based sleeps), then blur
-    await waitFor(
-      () => {
-        const state = canvasElement
-          .querySelector('[data-component="ChatInputSection"]')
-          ?.getAttribute("data-autofocus-state");
-        if (state !== "done") {
-          throw new Error("ChatInput auto-focus not finished");
-        }
-      },
-      { timeout: 5000 }
-    );
-    (document.activeElement as HTMLElement)?.blur();
+    // Wait for ChatInput's auto-focus attempt to finish, then blur
+    await waitForChatInputAutofocusDone(canvasElement);
+    blurActiveElement();
   },
 };

src/browser/stories/storyPlayHelpers.ts

@@ -0,0 +1,24 @@
+/**
+ * Helpers intended for Storybook play() functions only.
+ * Keeping these separate avoids pulling @storybook/test into render-time story setup helpers.
+ */
+
+import { waitFor } from "@storybook/test";
+
+export async function waitForChatInputAutofocusDone(canvasElement: HTMLElement): Promise<void> {
+  await waitFor(
+    () => {
+      const state = canvasElement
+        .querySelector('[data-component="ChatInputSection"]')
+        ?.getAttribute("data-autofocus-state");
+      if (state !== "done") {
+        throw new Error("ChatInput auto-focus not finished");
+      }
+    },
+    { timeout: 5000 }
+  );
+}
+
+export function blurActiveElement(): void {
+  (document.activeElement as HTMLElement | null)?.blur?.();
+}