fix: add play functions to ensure Chromatic captures scrolled state

- Add waitForChatScroll play function that waits for messages to load
  and scroll to complete before Chromatic takes screenshots
- Add data-testid="message-window" to scroll container in AIView
- Add data-testid="chat-message" to message wrappers for test queries
- Apply play function to ActiveWorkspaceWithChat and MarkdownTables stories
- Fix ProviderIcon lint error: remove redundant "mux-gateway" union type
  (already included in ProviderName)

Author: ThomasK33

src/browser/App.stories.tsx

@@ -1,12 +1,49 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useMemo } from "react";
+import { waitFor, within } from "@storybook/test";
 import { AppLoader } from "./components/AppLoader";
 import type { ProjectConfig } from "@/node/config";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import type { WorkspaceChatMessage } from "@/common/orpc/types";
 import { DEFAULT_RUNTIME_CONFIG } from "@/common/constants/workspace";
 import { createMockORPCClient, type MockORPCClientOptions } from "../../.storybook/mocks/orpc";
 
+/**
+ * Play function that waits for chat messages to load and scroll to complete.
+ * Used by Chromatic to ensure screenshots capture the final scrolled state.
+ */
+async function waitForChatScroll({ canvasElement }: { canvasElement: HTMLElement }) {
+  const canvas = within(canvasElement);
+
+  // Wait for messages to appear (they load via setTimeout in mock)
+  await waitFor(
+    () => {
+      const messages = canvas.queryAllByTestId("chat-message");
+      if (messages.length === 0) {
+        throw new Error("No messages yet");
+      }
+    },
+    { timeout: 2000 }
+  );
+
+  // Wait for scroll to be at or near bottom
+  await waitFor(
+    () => {
+      const messageWindow = canvasElement.querySelector('[data-testid="message-window"]');
+      if (!messageWindow) {
+        throw new Error("Message window not found");
+      }
+      const { scrollTop, scrollHeight, clientHeight } = messageWindow;
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+      // Allow 50px tolerance for "at bottom"
+      if (distanceFromBottom > 50) {
+        throw new Error(`Not scrolled to bottom yet (${distanceFromBottom}px from bottom)`);
+      }
+    },
+    { timeout: 2000 }
+  );
+}
+
 // Stable timestamp for testing active states (use fixed time minus small offsets)
 // This ensures workspaces don't show as "Older than 1 day" and keeps stories deterministic
 const NOW = 1700000000000; // Fixed timestamp: Nov 14, 2023
@@ -1093,6 +1130,7 @@ main
       />
     );
   },
+  play: waitForChatScroll,
 };
 
 /**
@@ -1234,4 +1272,5 @@ These tables should render cleanly without any disruptive copy or download actio
 
     return <AppWithMocks projects={projects} workspaces={workspaces} onChat={onChat} />;
   },
+  play: waitForChatScroll,
 };

src/browser/components/AIView.tsx

@@ -437,6 +437,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
             aria-busy={canInterrupt}
             aria-label="Conversation transcript"
             tabIndex={0}
+            data-testid="message-window"
             className="h-full overflow-y-auto p-[15px] leading-[1.5] break-words whitespace-pre-wrap"
           >
             <div className={cn("max-w-4xl mx-auto", mergedMessages.length === 0 && "h-full")}>
@@ -466,6 +467,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
                     return (
                       <React.Fragment key={msg.id}>
                         <div
+                          data-testid="chat-message"
                           data-message-id={
                             msg.type !== "history-hidden" && msg.type !== "workspace-init"
                               ? msg.historyId

src/browser/components/ProviderIcon.tsx

@@ -8,7 +8,7 @@ import MuxIcon from "@/browser/assets/icons/mux.svg?react";
 import { PROVIDER_DISPLAY_NAMES, type ProviderName } from "@/common/constants/providers";
 import { cn } from "@/common/lib/utils";
 
-const PROVIDER_ICONS: Partial<Record<ProviderName | "mux-gateway", React.FC>> = {
+const PROVIDER_ICONS: Partial<Record<ProviderName, React.FC>> = {
   anthropic: AnthropicIcon,
   openai: OpenAIIcon,
   google: GoogleIcon,