@@ -549,11 +549,34 @@ export const AutoCompactWarning: AppStory = {
549549 canvas.getByText(/access token expires in 15 minutes/);
550550 });
551551
552- // Wait a bit for auto-scroll to settle, then scroll up
553- await new Promise((r) => setTimeout(r, 100));
554- const messageWindow = canvasElement.querySelector('[data-testid="message-window"]');
552+ // Wait for initial auto-scroll and all ResizeObserver callbacks to complete
553+ await new Promise((r) => setTimeout(r, 500));
554+
555+ const messageWindow = canvasElement.querySelector(
556+ '[data-testid="message-window"]'
557+ ) as HTMLElement | null;
555558 if (messageWindow) {
556- messageWindow.scrollTop = messageWindow.scrollHeight - messageWindow.clientHeight - 150;
559+ // Simulate user scroll interaction multiple times to ensure auto-scroll is disabled.
560+ // The useAutoScroll hook only processes scroll as "user-initiated" if it happens
561+ // within 100ms of a wheel/touch event. We need to:
562+ // 1. Mark user interaction via wheel event
563+ // 2. Scroll up (which disables auto-scroll)
564+ // 3. Wait and repeat to ensure the state sticks
565+ for (let i = 0; i < 3; i++) {
566+ messageWindow.dispatchEvent(new WheelEvent("wheel", { bubbles: true, deltaY: -100 }));
567+ // Scroll to show ~200px of content above the input area
568+ const targetScroll = Math.max(0, messageWindow.scrollHeight - messageWindow.clientHeight - 200);
569+ messageWindow.scrollTop = targetScroll;
570+ messageWindow.dispatchEvent(new Event("scroll", { bubbles: true }));
571+ await new Promise((r) => setTimeout(r, 50));
572+ }
573+
574+ // Final wait to let any pending ResizeObserver callbacks fire and see disabled auto-scroll
575+ await new Promise((r) => setTimeout(r, 200));
576+
577+ // Set final scroll position
578+ const finalScroll = Math.max(0, messageWindow.scrollHeight - messageWindow.clientHeight - 200);
579+ messageWindow.scrollTop = finalScroll;
557580 }
558581 },
559582 parameters: {
0 commit comments