From d2d90aa67df549754baacf23906bdb4dbb770d9e Mon Sep 17 00:00:00 2001
From: PR Batch Tester <agent@local.test>
Date: Thu, 22 Oct 2026 09:08:20 +0000
Subject: [PATCH 1/2] fix(web): subagent bar keeps model and status readable in
 narrow chat columns

The bar was one row that only dropped "Runs on its own" below a 640px
viewport. A narrow chat column squeezed the model and status down to a few
letters on phones, and to nothing on desktop with the right panel docked.
It now sizes from the composer: "Runs on its own" goes below 640px, the
status moves under the model below 560px, and "Open parent" keeps only its
icon below 320px.

Closes #23474

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/chat/ProviderSubagentBar.tsx   | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/chat/ProviderSubagentBar.tsx b/apps/web/src/components/chat/ProviderSubagentBar.tsx
index 61d84314049a5..415bae9cd7336 100644
--- a/apps/web/src/components/chat/ProviderSubagentBar.tsx
+++ b/apps/web/src/components/chat/ProviderSubagentBar.tsx
@@ -42,40 +42,47 @@ export function ProviderSubagentBar(props: {
     return () => clearInterval(id);
   }, [live, status]);
 
+  // Sized by the composer, not the viewport: a docked side panel narrows the
+  // chat column on a wide window, and one row there squeezes out the model
+  // and status, so the status drops to its own line instead.
   return (
     <div className="flex min-h-12 items-center gap-3 rounded-3xl py-2 ps-5 pe-2 text-sm">
-      <span className="flex min-w-0 items-center gap-2">
-        {props.provider ? (
-          <ProviderInstanceIcon
-            driverKind={props.provider.driverKind}
-            displayName={props.provider.displayName}
-            accentColor={props.provider.accentColor}
-            acpRegistryAgentId={props.provider.acpRegistryAgentId}
-            acpRegistryIconUrl={props.provider.acpRegistryIconUrl}
-            showBadge={props.showInstanceBadge}
-            className="size-4 shrink-0"
-            iconClassName="size-4"
-            badgeClassName="right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-5xs"
-          />
-        ) : null}
-        <span className="min-w-0 truncate font-medium text-foreground">{props.modelLabel}</span>
-        {props.effortLabel === null ? null : (
-          <span className="shrink-0 text-muted-foreground">{props.effortLabel}</span>
-        )}
-      </span>
-      <span
-        ref={statusRef}
-        aria-hidden
-        className="min-w-0 truncate text-muted-foreground tabular-nums"
-      />
+      <div className="flex min-w-0 flex-1 items-center gap-3 @max-[560px]/composer-surface:flex-col @max-[560px]/composer-surface:items-start @max-[560px]/composer-surface:gap-0.5">
+        <span className="flex min-w-0 max-w-full items-center gap-2">
+          {props.provider ? (
+            <ProviderInstanceIcon
+              driverKind={props.provider.driverKind}
+              displayName={props.provider.displayName}
+              accentColor={props.provider.accentColor}
+              acpRegistryAgentId={props.provider.acpRegistryAgentId}
+              acpRegistryIconUrl={props.provider.acpRegistryIconUrl}
+              showBadge={props.showInstanceBadge}
+              className="size-4 shrink-0"
+              iconClassName="size-4"
+              badgeClassName="right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-5xs"
+            />
+          ) : null}
+          <span className="min-w-0 truncate font-medium text-foreground">{props.modelLabel}</span>
+          {props.effortLabel === null ? null : (
+            <span className="shrink-0 text-muted-foreground">{props.effortLabel}</span>
+          )}
+        </span>
+        <span
+          ref={statusRef}
+          aria-hidden
+          className="min-w-0 max-w-full truncate text-muted-foreground tabular-nums @max-[560px]/composer-surface:text-xs"
+        />
+      </div>
       <span role="status" className="sr-only">
         {`${modelDescription} subagent: ${announcement}`}
       </span>
-      <span className="ms-auto shrink-0 text-muted-foreground max-sm:hidden">Runs on its own</span>
+      <span className="shrink-0 text-muted-foreground @max-[640px]/composer-surface:hidden">
+        Runs on its own
+      </span>
       {props.onOpenParent ? (
         <Button size="sm" variant="ghost" onClick={props.onOpenParent}>
           <ArrowUpLeftIcon />
-          Open parent
+          <span className="@max-[320px]/composer-surface:sr-only">Open parent</span>
         </Button>
       ) : null}
     </div>

From 3e443d4555b14b1556ef575552c35145f0d7a75e Mon Sep 17 00:00:00 2001
From: PR Batch Tester <agent@local.test>
Date: Thu, 22 Oct 2026 09:17:52 +0000
Subject: [PATCH 2/2] fix(web): keep "Runs on its own" for screen readers in
 narrow subagent bars

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ProviderSubagentBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ProviderSubagentBar.tsx b/apps/web/src/components/chat/ProviderSubagentBar.tsx
index 415bae9cd7336..da3777dba1f48 100644
--- a/apps/web/src/components/chat/ProviderSubagentBar.tsx
+++ b/apps/web/src/components/chat/ProviderSubagentBar.tsx
@@ -76,7 +76,7 @@ export function ProviderSubagentBar(props: {
       <span role="status" className="sr-only">
         {`${modelDescription} subagent: ${announcement}`}
       </span>
-      <span className="shrink-0 text-muted-foreground @max-[640px]/composer-surface:hidden">
+      <span className="shrink-0 text-muted-foreground @max-[640px]/composer-surface:sr-only">
         Runs on its own
       </span>
       {props.onOpenParent ? (