fix(web): composer banners, menus and pickers act in their handlers

apps/web/src/components/chat/ChatComposer.tsx

@@ -2277,34 +2277,33 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     stashQueue,
     isStashMenuOpen,
     setIsStashMenuOpen,
-    stashPulse,
+    stashPulseKey,
     restoreStashEntryStable,
     deleteStashEntryStable,
     toggleStashMenuStable,
   } = useComposerStash({
     environmentId,
     composerDraftTarget,
     promptRef,
-    composerImagesRef,
-    composerFilesRef,
-    composerTerminalContextsRef,
-    keybindings,
-    terminalOpen,
+    readAttachmentDraft: () => ({
+      images: composerImagesRef.current,
+      files: composerFilesRef.current,
+    }),
+    readTerminalContexts: () => composerTerminalContextsRef.current,
+    routeThreadRef,
     projectSelectionRequired,
-    isRevertingCheckpoint,
     pendingUserInputs,
     activePendingProgress,
     prompt,
     composerMenuOpen,
-    isComposerModelPickerOpen,
     isComposerCollapsedMobile,
     composerPreviewAnnotations,
     composerReviewComments,
     composerThreadContexts,
-    attachmentTargetKeyRef,
-    composerDraftTargetKeyRef,
+    attachmentTargetKey,
+    isComposerDraftTargetOpen: (key) => composerDraftTargetKeyRef.current === key,
     composerEditorRef,
-    isRevertingCheckpointRef,
+    isRevertingCheckpoint: () => isRevertingCheckpointRef.current,
     pendingThreadImportsRef,
     setComposerCursor,
     setComposerTrigger,
@@ -3578,8 +3577,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         <ComposerStashBadge
           count={stashQueue.length}
           menuOpen={isStashMenuOpen}
-          pulseKey={stashPulse.key}
-          pulsing={stashPulse.active}
+          pulseKey={stashPulseKey}
           onToggleMenu={toggleStashMenuStable}
         />
       </ComposerBanner.Dock>

apps/web/src/components/chat/ComposerBannerStack.browser.test.tsx

@@ -0,0 +1,25 @@
+import { InfoIcon } from "lucide-react";
+import { expect, it, vi } from "vite-plus/test";
+import { userEvent } from "vite-plus/test/browser";
+
+import { render } from "../../../test/render";
+import { ComposerBannerStack, type ComposerBannerStackItem } from "./ComposerBannerStack";
+
+it("commits a dismissal when the thread switches during the exit transition", async () => {
+  const onDismiss = vi.fn();
+  const item: ComposerBannerStackItem = {
+    id: "notice",
+    variant: "info",
+    icon: <InfoIcon />,
+    title: "Thread A notice",
+    dismissLabel: "Dismiss notice",
+    onDismiss,
+  };
+  await using screen = await render(<ComposerBannerStack key="thread-a" items={[item]} />);
+
+  await userEvent.click(screen.getByRole("button", { name: "Dismiss notice" }));
+  // The composer keys the stack by thread, so switching threads remounts it mid-exit.
+  await screen.rerender(<ComposerBannerStack key="thread-b" items={[]} />);
+
+  await vi.waitFor(() => expect(onDismiss).toHaveBeenCalledTimes(1));
+});

apps/web/src/components/chat/ComposerBannerStack.tsx

@@ -1,5 +1,6 @@
 import { InfoIcon } from "lucide-react";
-import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { flushSync } from "react-dom";
 
 import { cn } from "~/lib/utils";
 import { Button } from "../ui/button";
@@ -51,39 +52,25 @@ export function ComposerBannerStack({ className, items, attachedAbove }: Compose
   const noticesRef = useRef<HTMLDivElement>(null);
   const peekRef = useRef<HTMLButtonElement>(null);
   const expandedItemsRef = useRef<HTMLDivElement>(null);
-  const pendingFocusRef = useRef<"peek" | "notice" | null>(null);
   const expandedItemsId = useId();
   const [requestedExitingItemId, setExitingItemId] = useState<string | null>(null);
-  const dismissTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const exitingItemId =
     requestedExitingItemId !== null && items.some((item) => item.id === requestedExitingItemId)
       ? requestedExitingItemId
       : null;
 
-  useEffect(() => {
-    return () => {
-      if (dismissTimeoutRef.current) {
-        clearTimeout(dismissTimeoutRef.current);
-      }
-    };
-  }, []);
-
   if (items.length < 2 && stackExpanded) {
     setStackExpanded(false);
   }
 
-  useLayoutEffect(() => {
-    if (stackExpanded && pendingFocusRef.current === "notice") {
-      pendingFocusRef.current = null;
-      const firstControl = expandedItemsRef.current?.querySelector<HTMLElement>(
-        'button:not(:disabled), a[href], input:not(:disabled), [tabindex="0"]',
-      );
-      (firstControl ?? expandedItemsRef.current)?.focus({ preventScroll: true });
-    } else if (!stackExpanded && pendingFocusRef.current === "peek") {
-      pendingFocusRef.current = null;
-      peekRef.current?.focus({ preventScroll: true });
-    }
-  }, [stackExpanded]);
+  const expandAndFocusNotice = () => {
+    flushSync(() => setStackExpanded(true));
+    const container = expandedItemsRef.current;
+    const firstControl = container?.querySelector<HTMLElement>(
+      'button:not(:disabled), a[href], input:not(:disabled), [tabindex="0"]',
+    );
+    (firstControl ?? container)?.focus({ preventScroll: true });
+  };
 
   const orderedItems = items.toSorted((a, b) => bannerPriority(a) - bannerPriority(b));
   const frontItem = orderedItems[0];
@@ -106,13 +93,9 @@ export function ComposerBannerStack({ className, items, attachedAbove }: Compose
       return;
     }
     setExitingItemId(item.id);
-    if (dismissTimeoutRef.current) {
-      clearTimeout(dismissTimeoutRef.current);
-    }
-    dismissTimeoutRef.current = setTimeout(() => {
-      dismissTimeoutRef.current = null;
-      item.onDismiss?.();
-    }, DISMISS_TRANSITION_MS);
+    // A timer, not transitionend: the dismissal must commit even when the stack unmounts
+    // (thread switch) or a collapsed composer hides it mid-exit, and transitionend never fires then.
+    setTimeout(() => item.onDismiss?.(), DISMISS_TRANSITION_MS);
   };
 
   return (
@@ -126,7 +109,8 @@ export function ComposerBannerStack({ className, items, attachedAbove }: Compose
           onPointerEnter={(event) => {
             if (event.pointerType === "touch") return;
             if (document.activeElement === peekRef.current) {
-              pendingFocusRef.current = "notice";
+              expandAndFocusNotice();
+              return;
             }
             setStackExpanded(true);
           }}
@@ -145,8 +129,8 @@ export function ComposerBannerStack({ className, items, attachedAbove }: Compose
             if (event.key !== "Escape" || !stackExpanded) return;
             event.preventDefault();
             event.stopPropagation();
-            pendingFocusRef.current = "peek";
-            setStackExpanded(false);
+            flushSync(() => setStackExpanded(false));
+            peekRef.current?.focus({ preventScroll: true });
           }}
         >
           {showCollapsedStackCap && firstStackedItem ? (
@@ -160,8 +144,7 @@ export function ComposerBannerStack({ className, items, attachedAbove }: Compose
               tabIndex={stackExpanded ? -1 : 0}
               onClick={(event) => {
                 event.currentTarget.focus({ preventScroll: true });
-                pendingFocusRef.current = "notice";
-                setStackExpanded(true);
+                expandAndFocusNotice();
               }}
               className={cn(stackExpanded && "pointer-events-none invisible opacity-0")}
             />

apps/web/src/components/chat/ComposerImageThumbnail.tsx

@@ -1,11 +1,24 @@
-import { memo, useEffect, useState, type ReactNode } from "react";
+import { memo, Suspense, use, type ReactNode } from "react";
 
 import {
   createComposerImageThumbnail,
   readComposerImageThumbnail,
 } from "../../lib/imageCompression";
 
-export const ComposerImageThumbnail = memo(function ComposerImageThumbnail({
+export const ComposerImageThumbnail = memo(function ComposerImageThumbnail(props: {
+  file: File;
+  alt: string;
+  className: string;
+  fallback: ReactNode;
+}) {
+  return (
+    <Suspense fallback={props.fallback}>
+      <ThumbnailImage {...props} />
+    </Suspense>
+  );
+});
+
+function ThumbnailImage({
   file,
   alt,
   className,
@@ -16,16 +29,8 @@ export const ComposerImageThumbnail = memo(function ComposerImageThumbnail({
   className: string;
   fallback: ReactNode;
 }) {
-  const [preview, setPreview] = useState<{ file: File; src: string | null } | null>(null);
-  useEffect(() => {
-    let active = true;
-    void createComposerImageThumbnail(file).then((src) => {
-      if (active) setPreview({ file, src });
-    });
-    return () => {
-      active = false;
-    };
-  }, [file]);
-  const src = preview?.file === file ? preview.src : (readComposerImageThumbnail(file) ?? null);
+  // A settled thumbnail paints synchronously instead of suspending for a tick.
+  const settled = readComposerImageThumbnail(file);
+  const src = settled === undefined ? use(createComposerImageThumbnail(file)) : settled;
   return src ? <img src={src} alt={alt} className={className} /> : fallback;
-});
+}

apps/web/src/components/chat/ComposerStashBadge.tsx

@@ -7,18 +7,20 @@ import { ComposerBanner } from "./ComposerBanner";
 export const ComposerStashBadge = memo(function ComposerStashBadge(props: {
   count: number;
   menuOpen: boolean;
+  /** Bumped per stash; each new key replays the pulse. 0 means never pulsed. */
   pulseKey: number;
-  pulsing: boolean;
   onToggleMenu: () => void;
 }) {
   if (props.count === 0) return null;
+  const pulsed = props.pulseKey > 0;
   const count = (
     <ComposerBanner.Count
+      // Remounting the count per stash restarts its CSS pulse; no timer has to end it.
       key={props.pulseKey}
       className={cn(
-        props.pulsing
-          ? "text-primary transition-[opacity,translate] duration-180 ease-out starting:translate-y-0.5 starting:opacity-0 motion-reduce:transition-none"
-          : "text-muted-foreground",
+        "text-muted-foreground",
+        pulsed &&
+          "animate-stash-pulse-count transition-[opacity,translate] duration-180 ease-out starting:translate-y-0.5 starting:opacity-0 motion-reduce:transition-none",
       )}
     >
       {props.count}
@@ -40,9 +42,11 @@ export const ComposerStashBadge = memo(function ComposerStashBadge(props: {
         className={cn(
           "transition-colors duration-200",
           props.menuOpen && "pointer-events-none",
-          props.menuOpen || props.pulsing
-            ? "text-foreground"
-            : "text-muted-foreground hover:text-foreground",
+          props.menuOpen ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+          // The button keeps its identity (focus, hover) across stashes. Swapping between two
+          // identical keyframes restarts the row's animation instead.
+          pulsed &&
+            (props.pulseKey % 2 === 0 ? "animate-stash-pulse-row-alt" : "animate-stash-pulse-row"),
         )}
         onPointerDown={(event) => event.preventDefault()}
         onClick={props.onToggleMenu}