revert: "fix(web): keep subagent links visible in long background-work banners" (#20054)

apps/web/src/components/ChatView.tsx

@@ -5408,7 +5408,6 @@ export default function ChatView(props: ChatViewProps) {
         />
       ),
       title: presentation.title,
-      descriptionPlacement: "below",
       description:
         presentation.items.length === 1 && presentation.items[0]?.childThreadId === undefined
           ? undefined
@@ -5424,7 +5423,7 @@ export default function ChatView(props: ChatViewProps) {
                       {separator}
                     </>
                   ) : (
-                    <span>
+                    <span className="whitespace-nowrap">
                       <InlineButton
                         tone="muted"
                         aria-label={`${presentation.items.length === 1 ? "Show" : "Open"} subagent ${item.label}`}

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

@@ -5,8 +5,6 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vite-plus/test";
 import { page, userEvent } from "vite-plus/test/browser";
 
-import { Button, InlineButton } from "../ui/button";
-
 import { ComposerBannerStack } from "./ComposerBannerStack";
 
 let root: Root;
@@ -62,94 +60,6 @@ it("only offers notice details when the description cannot fit", async () => {
   expect(hasDetails()).toBe(true);
 });
 
-it.each([320, 800])(
-  "keeps long background-work links reachable beside Stop in a %ipx composer",
-  async (width) => {
-    await page.viewport(width + 32, 800);
-    container.style.width = `${width}px`;
-    const openThread = vi.fn();
-    const label = "Review the background task layout and child-thread navigation ".repeat(6);
-    await act(async () =>
-      root.render(
-        <ComposerBannerStack
-          items={[
-            {
-              id: "background-work",
-              variant: "default",
-              priority: "activity",
-              icon: null,
-              title: "12 background tasks",
-              descriptionPlacement: "below",
-              description: Array.from({ length: 12 }, (_, index) => (
-                <span key={index}>
-                  {index > 0 ? " " : null}
-                  <InlineButton
-                    tone="muted"
-                    aria-label={`Open subagent ${index + 1}`}
-                    onClick={() => openThread(index + 1)}
-                  >
-                    {label}
-                  </InlineButton>
-                  {index < 11 ? "," : null}
-                </span>
-              )),
-              actions: (
-                <Button size="xs" variant="ghost">
-                  Stop
-                </Button>
-              ),
-            },
-          ]}
-        />,
-      ),
-    );
-    await nextFrame();
-
-    const firstLink = page.getByRole("button", { name: "Open subagent 1", exact: true });
-    const lastLink = page.getByRole("button", { name: "Open subagent 12", exact: true });
-    const stop = page.getByRole("button", { name: "Stop", exact: true });
-    expect(firstLink.element().getBoundingClientRect().height).toBeGreaterThan(
-      Number.parseFloat(getComputedStyle(firstLink.element()).lineHeight) * 2,
-    );
-    const viewport = container.querySelector<HTMLElement>('[data-slot="scroll-area-viewport"]')!;
-    expect(viewport).not.toBeNull();
-    expect(viewport.clientHeight).toBeGreaterThan(0);
-    expect(viewport.clientHeight).toBeLessThanOrEqual(window.innerHeight / 2);
-    expect(viewport.scrollHeight).toBeGreaterThan(viewport.clientHeight);
-    expect(viewport.scrollWidth).toBeLessThanOrEqual(viewport.clientWidth + 1);
-
-    const scrollBounds = viewport.getBoundingClientRect();
-    const stopBounds = stop.element().getBoundingClientRect();
-    expect(stopBounds.top).toBe(
-      page.getByText("12 background tasks", { exact: true }).element().getBoundingClientRect().top,
-    );
-    expect(scrollBounds.right).toBeLessThanOrEqual(stopBounds.left);
-    expect(stopBounds.right).toBeLessThanOrEqual(container.getBoundingClientRect().right);
-    expect(stopBounds.bottom).toBeLessThanOrEqual(scrollBounds.bottom);
-    expect(lastLink.element().getBoundingClientRect().top).toBeGreaterThan(scrollBounds.bottom);
-    await firstLink.click();
-    expect(openThread).toHaveBeenLastCalledWith(1);
-
-    viewport.scrollTop = viewport.scrollHeight;
-    await nextFrame();
-    expect(viewport.scrollTop).toBeGreaterThan(0);
-    const lastBounds = lastLink.element().getBoundingClientRect();
-    expect(lastBounds.top).toBeGreaterThanOrEqual(scrollBounds.top);
-    expect(lastBounds.bottom).toBeLessThanOrEqual(scrollBounds.bottom + 1);
-    expect(stop.element().getBoundingClientRect().top).toBe(stopBounds.top);
-    for (const control of [lastLink.element(), stop.element()]) {
-      const bounds = control.getBoundingClientRect();
-      expect(
-        control.contains(
-          document.elementFromPoint(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2),
-        ),
-      ).toBe(true);
-    }
-    await lastLink.click();
-    expect(openThread).toHaveBeenLastCalledWith(12);
-  },
-);
-
 it("keeps only the usage limit attached while an active goal waits in the collapsible stack", async () => {
   await act(async () =>
     root.render(

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

@@ -17,7 +17,6 @@ export interface ComposerBannerStackItem {
   readonly icon: ReactNode;
   readonly title: ReactNode;
   readonly description?: ReactNode;
-  readonly descriptionPlacement?: "inline" | "below";
   readonly children?: ReactNode;
   readonly actions?: ReactNode;
   readonly dismissLabel?: string;
@@ -348,46 +347,35 @@ function ComposerBannerStackAlert({
       </ComposerBanner.Root>
     );
   }
-  const descriptionBelow = item.descriptionPlacement === "below";
   return (
     <ComposerBanner.Root
       role="alert"
       placement={attached ? "attached" : "floating"}
       variant={item.variant}
       density="comfortable"
     >
-      <ComposerBanner.Row
-        layout={descriptionBelow || item.priority === "activity" ? "inline" : "wrap-actions"}
-      >
+      <ComposerBanner.Row layout={item.priority === "activity" ? "inline" : "wrap-actions"}>
         <ComposerBanner.Icon className="h-(--composer-banner-icon-column) self-start">
           {item.icon}
         </ComposerBanner.Icon>
-        <ComposerBanner.Content
-          className={descriptionBelow ? "flex-col items-stretch gap-0" : "whitespace-nowrap"}
-        >
+        <ComposerBanner.Content className="whitespace-nowrap">
           <NoticeText
             detailsLabel="Show title details"
             className="min-w-0 truncate font-medium leading-7 sm:leading-6"
           >
             {item.title}
           </NoticeText>
           {item.description ? (
-            descriptionBelow ? (
-              <ComposerBanner.Scroll className="text-muted-foreground whitespace-normal wrap-anywhere [--inline-button-text-align:start] [--inline-button-white-space:normal] [&_[data-slot=inline-button]]:max-w-full">
-                <span className="block pb-1">{item.description}</span>
-              </ComposerBanner.Scroll>
-            ) : (
-              <NoticeText
-                detailsLabel="Show notice details"
-                className="w-0 min-w-0 grow truncate text-muted-foreground @max-[400px]:sr-only"
-              >
-                {item.description}
-              </NoticeText>
-            )
+            <NoticeText
+              detailsLabel="Show notice details"
+              className="w-0 min-w-0 grow truncate text-muted-foreground @max-[400px]:sr-only"
+            >
+              {item.description}
+            </NoticeText>
           ) : null}
         </ComposerBanner.Content>
         {item.actions || item.onDismiss ? (
-          <ComposerBanner.Actions className={descriptionBelow ? "self-start" : undefined}>
+          <ComposerBanner.Actions>
             {item.actions}
             {item.onDismiss ? (
               <ComposerBanner.Dismiss