From 4980ba282eb313b3be87a6b7df28f3b42dcb4ce9 Mon Sep 17 00:00:00 2001
From: Tristan Manchester
 <108270628+tristanmanchester@users.noreply.github.com>
Date: Tue, 6 Oct 2026 11:26:57 +0200
Subject: [PATCH] fix(web): queued messages no longer split the composer notice
 stack (#16400)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-authored-by: Yash Singh <saiansh2525@gmail.com>
---
 apps/web/src/components/chat/ChatComposer.tsx |   2 +-
 .../components/chat/ComposerBannerStack.tsx   | 217 +++++++++---------
 2 files changed, 113 insertions(+), 106 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 0ee5a5fc14021e5544766b51956ef7d7cc0237ca..ee9c313cbec740e8c4ee9bf763bc22185b73d9bf 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -6613,11 +6613,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         : null}
       <ComposerBanner.Dock>
         <ComposerBanner.Column>
-          {props.queuedRunsControl}
           <ComposerBannerStack
             key={activeThreadId}
             className="relative z-0"
             items={bannerStackItems}
+            attachedAbove={props.queuedRunsControl}
           />
           {!activityStackItem && (shownSyncPhase || inlineTasksBadge) ? (
             <ComposerBanner.Attachment>
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 0cf3e8d05ab0d9d509b50c5137f5887e2378d0f4..ff66869a9ec86dfb800b6f6a7355843d8eb093ee 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -43,9 +43,12 @@ function bannerPriority(item: ComposerBannerStackEntry) {
 interface ComposerBannerStackProps {
   readonly className?: string;
   readonly items: ReadonlyArray<ComposerBannerStackEntry>;
+  /** Attachments that sit between the stacked notices and the front item, such as the queue.
+      The stacked notices peek above the whole column, never from between two attachments. */
+  readonly attachedAbove?: ReactNode;
 }
 
-export function ComposerBannerStack({ className, items }: ComposerBannerStackProps) {
+export function ComposerBannerStack({ className, items, attachedAbove }: ComposerBannerStackProps) {
   const [stackExpanded, setStackExpanded] = useState(false);
   const noticesRef = useRef<HTMLDivElement>(null);
   const peekRef = useRef<HTMLButtonElement>(null);
@@ -84,15 +87,17 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
     }
   }, [stackExpanded]);
 
-  if (items.length === 0) {
-    return null;
-  }
-
   // Activity stays attached. Urgency and severity only order the notices behind it.
   const orderedItems = items.toSorted((a, b) => bannerPriority(a) - bannerPriority(b));
   const frontItem = orderedItems[0];
   if (!frontItem) {
-    return null;
+    return (
+      <>
+        {null}
+        {attachedAbove}
+        {null}
+      </>
+    );
   }
   const stackedItems = orderedItems.slice(1);
   const hasStack = stackedItems.length > 0;
@@ -114,12 +119,105 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
   };
 
   return (
-    <ComposerBanner.Attachment
-      className={className}
-      data-composer-banner-drawer="true"
-      data-chat-composer-collapsed-controls="true"
-    >
-      <div className={cn("relative flex flex-col-reverse", hasStack && stackExpanded && "z-50")}>
+    <>
+      {hasStack ? (
+        <div
+          ref={noticesRef}
+          data-chat-composer-collapsed-controls="true"
+          className={cn("relative z-20 min-h-3", stackExpanded && "z-50")}
+          onPointerEnter={(event) => {
+            if (event.pointerType === "touch") return;
+            if (document.activeElement === peekRef.current) {
+              pendingFocusRef.current = "notice";
+            }
+            setStackExpanded(true);
+          }}
+          onPointerLeave={(event) => {
+            if (!event.currentTarget.contains(document.activeElement)) setStackExpanded(false);
+          }}
+          onBlurCapture={(event) => {
+            if (
+              !event.currentTarget.contains(event.relatedTarget) &&
+              !event.currentTarget.matches(":hover")
+            ) {
+              setStackExpanded(false);
+            }
+          }}
+          onKeyDown={(event) => {
+            if (event.key !== "Escape" || !stackExpanded) return;
+            event.preventDefault();
+            event.stopPropagation();
+            pendingFocusRef.current = "peek";
+            setStackExpanded(false);
+          }}
+        >
+          {showCollapsedStackCap && firstStackedItem ? (
+            <ComposerBanner.Peek
+              ref={peekRef}
+              variant={firstStackedItem.variant}
+              aria-label="Show other notices"
+              aria-expanded={stackExpanded}
+              aria-controls={expandedItemsId}
+              aria-hidden={stackExpanded || undefined}
+              tabIndex={stackExpanded ? -1 : 0}
+              onClick={(event) => {
+                event.currentTarget.focus({ preventScroll: true });
+                pendingFocusRef.current = "notice";
+                setStackExpanded(true);
+              }}
+              className={cn(stackExpanded && "pointer-events-none invisible opacity-0")}
+            />
+          ) : null}
+          <div
+            id={expandedItemsId}
+            ref={expandedItemsRef}
+            role="group"
+            aria-label="Other notices"
+            tabIndex={-1}
+            data-composer-banner-stack-expanded-items="true"
+            className={cn(
+              "grid transition-[grid-template-rows] duration-150 ease-out focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+              stackExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+            )}
+          >
+            <div className="min-h-0 overflow-hidden">
+              <div
+                className={cn(
+                  "transform-gpu space-y-2 pb-2 transition-[opacity,transform] duration-150 ease-out will-change-[opacity,transform]",
+                  stackExpanded
+                    ? "pointer-events-auto visible translate-y-0 opacity-100"
+                    : "pointer-events-none invisible translate-y-1 opacity-0",
+                )}
+              >
+                {stackedItems.map((item) => (
+                  <div
+                    key={item.id}
+                    className={cn(
+                      "transition-[opacity,translate] duration-220 ease-in",
+                      exitingItemId === item.id
+                        ? "pointer-events-none translate-y-28 opacity-0"
+                        : "opacity-100",
+                    )}
+                  >
+                    <ComposerBannerStackAlert
+                      item={item}
+                      attached={false}
+                      exiting={exitingItemId === item.id}
+                      onDismissRequest={() => requestDismiss(item)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+      {attachedAbove}
+      <ComposerBanner.Attachment
+        className={className}
+        data-composer-banner-drawer="true"
+        data-chat-composer-collapsed-controls="true"
+      >
         <div
           key={frontItem.id}
           className={cn(
@@ -146,99 +244,8 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
             onDismissRequest={() => requestDismiss(frontItem)}
           />
         </div>
-        {hasStack ? (
-          <div
-            ref={noticesRef}
-            className="relative z-20 min-h-3"
-            onPointerEnter={(event) => {
-              if (event.pointerType === "touch") return;
-              if (document.activeElement === peekRef.current) {
-                pendingFocusRef.current = "notice";
-              }
-              setStackExpanded(true);
-            }}
-            onPointerLeave={(event) => {
-              if (!event.currentTarget.contains(document.activeElement)) setStackExpanded(false);
-            }}
-            onBlurCapture={(event) => {
-              if (
-                !event.currentTarget.contains(event.relatedTarget) &&
-                !event.currentTarget.matches(":hover")
-              ) {
-                setStackExpanded(false);
-              }
-            }}
-            onKeyDown={(event) => {
-              if (event.key !== "Escape" || !stackExpanded) return;
-              event.preventDefault();
-              event.stopPropagation();
-              pendingFocusRef.current = "peek";
-              setStackExpanded(false);
-            }}
-          >
-            {showCollapsedStackCap && firstStackedItem ? (
-              <ComposerBanner.Peek
-                ref={peekRef}
-                variant={firstStackedItem.variant}
-                aria-label="Show other notices"
-                aria-expanded={stackExpanded}
-                aria-controls={expandedItemsId}
-                aria-hidden={stackExpanded || undefined}
-                tabIndex={stackExpanded ? -1 : 0}
-                onClick={(event) => {
-                  event.currentTarget.focus({ preventScroll: true });
-                  pendingFocusRef.current = "notice";
-                  setStackExpanded(true);
-                }}
-                className={cn(stackExpanded && "pointer-events-none invisible opacity-0")}
-              />
-            ) : null}
-            <div
-              id={expandedItemsId}
-              ref={expandedItemsRef}
-              role="group"
-              aria-label="Other notices"
-              tabIndex={-1}
-              data-composer-banner-stack-expanded-items="true"
-              className={cn(
-                "grid transition-[grid-template-rows] duration-150 ease-out focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
-                stackExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
-              )}
-            >
-              <div className="min-h-0 overflow-hidden">
-                <div
-                  className={cn(
-                    "transform-gpu space-y-2 pb-2 transition-[opacity,transform] duration-150 ease-out will-change-[opacity,transform]",
-                    stackExpanded
-                      ? "pointer-events-auto visible translate-y-0 opacity-100"
-                      : "pointer-events-none invisible translate-y-1 opacity-0",
-                  )}
-                >
-                  {stackedItems.map((item) => (
-                    <div
-                      key={item.id}
-                      className={cn(
-                        "transition-[opacity,translate] duration-220 ease-in",
-                        exitingItemId === item.id
-                          ? "pointer-events-none translate-y-28 opacity-0"
-                          : "opacity-100",
-                      )}
-                    >
-                      <ComposerBannerStackAlert
-                        item={item}
-                        attached={false}
-                        exiting={exitingItemId === item.id}
-                        onDismissRequest={() => requestDismiss(item)}
-                      />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </div>
-    </ComposerBanner.Attachment>
+      </ComposerBanner.Attachment>
+    </>
   );
 }
 
-- 
2.54.0