feat(web): attach composer state drawers

Author: maria-rcks

apps/web/src/components/ChatView.tsx

@@ -4457,19 +4457,20 @@ function ChatViewContent(props: ChatViewProps) {
       ),
       title: working
         ? liveCount > 0
-          ? `${liveCount} ${liveCount === 1 ? "agent" : "agents"} working in the background`
-          : "Background work running"
-        : "Monitoring in the background",
+          ? `${liveCount} ${liveCount === 1 ? "agent" : "agents"} working`
+          : "Background work"
+        : "Monitoring",
       actions: (
         <Button
-          size="xs"
-          variant="outline"
+          size="micro"
+          variant="ghost-muted"
           disabled={isStoppingBackgroundWork}
           onClick={() => void handleStopBackgroundWork()}
         >
           {isStoppingBackgroundWork ? "Stopping..." : "Stop"}
         </Button>
       ),
+      className: "px-3 pt-1.5 pb-[1.375rem] text-xs",
     };
   }, [
     activeBackgroundLiveness,
@@ -6398,10 +6399,18 @@ function ChatViewContent(props: ChatViewProps) {
                           activeProjectTitle={activeProject?.title ?? null}
                         />
                       </div>
-                      <ComposerBannerStack className="relative z-0" items={composerBannerItems} />
+                      <ComposerBannerStack
+                        attached={!threadSyncPhase || activeEnvironmentUnavailable}
+                        className="relative z-0"
+                        items={composerBannerItems}
+                      />
                     </div>
                   ) : (
-                    <ComposerBannerStack className="relative z-0" items={composerBannerItems} />
+                    <ComposerBannerStack
+                      attached={!threadSyncPhase || activeEnvironmentUnavailable}
+                      className="relative z-0"
+                      items={composerBannerItems}
+                    />
                   )}
                   {threadSyncPhase && !activeEnvironmentUnavailable ? (
                     <ThreadSyncStatusPill phase={threadSyncPhase} />

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

@@ -49,12 +49,24 @@ describe("ComposerBannerStack", () => {
     const markup = renderToStaticMarkup(<ComposerBannerStack items={[banner("front")]} />);
 
     expect(markup).not.toContain("data-composer-banner-stack-expanded-items");
-    expect(markup).toContain("alert-glass");
+    expect(markup).toContain("chat-composer-drawer-surface");
+    expect(markup).toContain("chat-composer-drawer-attached");
+    expect(markup).toContain('data-composer-banner-drawer="true"');
     expect(markup).toContain('data-variant="warning"');
     expect(markup).toContain("transform:none");
     expect(markup).not.toContain("will-change:transform");
   });
 
+  it("renders a detached banner when another composer status sits below it", () => {
+    const markup = renderToStaticMarkup(
+      <ComposerBannerStack attached={false} items={[banner("front")]} />,
+    );
+
+    expect(markup).toContain("alert-glass");
+    expect(markup).not.toContain("chat-composer-drawer-slot");
+    expect(markup).not.toContain("chat-composer-drawer-attached");
+  });
+
   it("applies item-specific surface and action layout classes", () => {
     const markup = renderToStaticMarkup(
       <ComposerBannerStack

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

@@ -50,11 +50,16 @@ export interface ComposerBannerStackItem {
 }
 
 interface ComposerBannerStackProps {
+  readonly attached?: boolean;
   readonly className?: string;
   readonly items: ReadonlyArray<ComposerBannerStackItem>;
 }
 
-export function ComposerBannerStack({ className, items }: ComposerBannerStackProps) {
+export function ComposerBannerStack({
+  attached = true,
+  className,
+  items,
+}: ComposerBannerStackProps) {
   const [requestedExitingItemId, setExitingItemId] = useState<string | null>(null);
   const dismissTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const exitingItemId =
@@ -98,7 +103,14 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
   };
 
   return (
-    <div className={cn("group/banner-stack mx-auto mb-2 max-w-3xl", className)}>
+    <div
+      className={cn(
+        "group/banner-stack max-w-[calc(48rem-2.75rem)]",
+        attached ? "chat-composer-drawer-slot" : "mx-auto mb-2 w-[calc(100%-2.75rem)]",
+        className,
+      )}
+      data-composer-banner-drawer="true"
+    >
       <div
         className={cn(
           "relative flex flex-col-reverse",
@@ -108,7 +120,7 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
         {showCollapsedStackCap && firstStackedItem ? (
           <div
             className={cn(
-              "pointer-events-none absolute inset-x-0 -top-3 z-0 mx-auto h-3 rounded-t-[22px]",
+              "pointer-events-none absolute inset-x-0 -top-3 z-0 mx-auto h-3 rounded-t-2xl",
               "border border-b-0 bg-background/96 shadow-[0_6px_18px_rgba(0,0,0,0.06)]",
               stackCapBorderClass[firstStackedItem.variant],
               "transition-opacity duration-150 ease-out",
@@ -130,6 +142,7 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
         >
           <ComposerBannerStackAlert
             item={frontItem}
+            attached={attached}
             exiting={exitingItemId === frontItem.id}
             onDismissRequest={() => requestDismiss(frontItem)}
           />
@@ -162,6 +175,7 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
                   >
                     <ComposerBannerStackAlert
                       item={item}
+                      attached={false}
                       exiting={exitingItemId === item.id}
                       onDismissRequest={() => requestDismiss(item)}
                     />
@@ -178,10 +192,12 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
 
 function ComposerBannerStackAlert({
   item,
+  attached,
   exiting,
   onDismissRequest,
 }: {
   readonly item: ComposerBannerStackItem;
+  readonly attached: boolean;
   readonly exiting: boolean;
   readonly onDismissRequest: () => void;
 }) {
@@ -190,7 +206,12 @@ function ComposerBannerStackAlert({
   return (
     <Alert
       variant={item.variant}
-      className={cn("alert-glass rounded-[22px]", item.className)}
+      className={cn(
+        attached
+          ? "chat-composer-drawer-surface chat-composer-drawer-attached px-3 pt-2"
+          : "alert-glass rounded-[22px]",
+        item.className,
+      )}
       data-variant={item.variant}
     >
       {item.icon}

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

@@ -0,0 +1,55 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { ComposerCommandMenu } from "./ComposerCommandMenu";
+
+describe("ComposerCommandMenu", () => {
+  it("renders slash-command results as an attached composer drawer", () => {
+    const markup = renderToStaticMarkup(
+      <ComposerCommandMenu
+        items={[]}
+        resolvedTheme="dark"
+        isLoading={false}
+        triggerKind="slash-command"
+        activeItemId={null}
+        onHighlightedItemChange={() => {}}
+        onSelect={() => {}}
+      />,
+    );
+
+    expect(markup).toContain('data-composer-command-drawer="true"');
+    expect(markup).toContain("chat-composer-drawer-surface");
+    expect(markup).toContain("chat-composer-drawer-attached");
+    expect(markup).not.toContain("dropdown-glass");
+  });
+
+  it("renders commands without a category heading or invented icons", () => {
+    const markup = renderToStaticMarkup(
+      <ComposerCommandMenu
+        items={[
+          {
+            id: "slash:model",
+            type: "slash-command",
+            command: "model",
+            label: "/model",
+            description: "Switch response model for this thread",
+          },
+        ]}
+        resolvedTheme="dark"
+        isLoading={false}
+        triggerKind="slash-command"
+        activeItemId="slash:model"
+        onHighlightedItemChange={() => {}}
+        onSelect={() => {}}
+      />,
+    );
+
+    expect(markup).toContain("/model");
+    expect(markup).toContain("Switch response model for this thread");
+    expect(markup).not.toContain("Built-in");
+    expect(markup).not.toContain("<svg");
+    expect(markup).toContain("font-sans text-xs font-medium");
+    expect(markup).not.toContain("font-mono");
+    expect(markup).toContain("text-right");
+  });
+});