From ecfc71626a908596b362a778a3b41b95ee89fc6b Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 2 Nov 2026 07:04:12 +0000
Subject: [PATCH 1/2] fix(web,mobile): grouped subagent headers keep every
 account badge visible

In the grouped subagent header, each avatar overlapped the next and the
later avatar painted over the earlier one's bottom-right account badge,
so "CC" read as "CL". Earlier avatars now stack above later ones (web:
descending z-index inside an isolated stack; mobile: descending zIndex),
and the last avatar stays above the "+N" chip.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../mobile/src/features/threads/thread-subagent-group.tsx | 5 ++++-
 apps/web/src/components/chat/TimelineV2EventRow.tsx       | 8 ++++++--
 apps/web/src/components/chat/V2LifecycleRow.tsx           | 3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/mobile/src/features/threads/thread-subagent-group.tsx b/apps/mobile/src/features/threads/thread-subagent-group.tsx
index 4a42a83c9a371..b816727379bff 100644
--- a/apps/mobile/src/features/threads/thread-subagent-group.tsx
+++ b/apps/mobile/src/features/threads/thread-subagent-group.tsx
@@ -150,7 +150,10 @@ export function ThreadSubagentGroup(props: {
         >
           <View className="flex-row items-center">
             {agents.slice(0, 3).map((agent, index) => (
-              <View key={agent.item.id} style={{ marginLeft: index === 0 ? 0 : -7 }}>
+              <View
+                key={agent.item.id}
+                style={{ marginLeft: index === 0 ? 0 : -7, zIndex: 3 - index }}
+              >
                 <SubagentAvatar item={agent.item} config={configOf(agent.item)} />
               </View>
             ))}
diff --git a/apps/web/src/components/chat/TimelineV2EventRow.tsx b/apps/web/src/components/chat/TimelineV2EventRow.tsx
index e69ffdbaffdd4..fcd6fd6d19bd8 100644
--- a/apps/web/src/components/chat/TimelineV2EventRow.tsx
+++ b/apps/web/src/components/chat/TimelineV2EventRow.tsx
@@ -51,6 +51,9 @@ export function V2EventTimelineRow({ row }: { row: Extract<TimelineRow, { kind:
   );
 }
 
+// Earlier avatars sit above later ones so each bottom-right account badge stays visible.
+const STACKED_AVATAR_Z_INDEX = ["z-3", "z-2", "z-1"] as const;
+
 const V2SubagentGroup = memo(function V2SubagentGroup({
   row,
 }: {
@@ -102,10 +105,11 @@ const V2SubagentGroup = memo(function V2SubagentGroup({
               : "text-muted-foreground opacity-55",
           )}
         >
-          <span className="flex shrink-0 items-center -space-x-1.5" aria-hidden>
-            {agents.slice(0, 3).map(({ item, status }) => (
+          <span className="isolate flex shrink-0 items-center -space-x-1.5" aria-hidden>
+            {agents.slice(0, 3).map(({ item, status }, index) => (
               <EnvironmentSubagentAvatar
                 key={item.id}
+                className={STACKED_AVATAR_Z_INDEX[index]}
                 environmentId={ctx.activeThreadEnvironmentId}
                 providerInstanceId={item.providerInstanceId}
                 driver={item.driver}
diff --git a/apps/web/src/components/chat/V2LifecycleRow.tsx b/apps/web/src/components/chat/V2LifecycleRow.tsx
index c0dd0e0900d37..3c7adf671e52d 100644
--- a/apps/web/src/components/chat/V2LifecycleRow.tsx
+++ b/apps/web/src/components/chat/V2LifecycleRow.tsx
@@ -226,7 +226,7 @@ function SubagentAvatar({
   accentColor?: string | undefined;
   showBadge: boolean;
   status?: OrchestrationV2TurnItem["status"] | undefined;
-  className?: string;
+  className?: string | undefined;
 }) {
   return (
     <span
@@ -277,6 +277,7 @@ export function EnvironmentSubagentAvatar({
   /** A task in a linked environment runs a provider instance there; its driver here is only a label. */
   remote?: OrchestrationV2RemoteTaskChild | undefined;
   status?: OrchestrationV2TurnItem["status"] | undefined;
+  className?: string | undefined;
 }) {
   const providerEnvironmentId = remote?.environmentId ?? environmentId;
   const providersAtom = serverEnvironment.providersValueAtom(providerEnvironmentId);

From 84d919931052d718cd8151a9583cd560d01aacaf Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 11 Nov 2026 11:14:20 +0000
Subject: [PATCH 2/2] fix(web): grouped subagent account badges paint above
 every avatar

Paint order alone left the middle badge clipped: a two-letter compact
badge is wider than the part of its circle the neighbours leave
uncovered. Badges now escape the icon's stacking context and sit above
all circles in the header, and the overlap drops from 6px to 4px so
wide initials no longer touch the next badge.

AI-assisted; verified with the tests and tools listed above.
---
 apps/web/src/components/chat/TimelineV2EventRow.tsx | 8 ++------
 apps/web/src/components/chat/V2LifecycleRow.tsx     | 7 ++++---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/chat/TimelineV2EventRow.tsx b/apps/web/src/components/chat/TimelineV2EventRow.tsx
index fcd6fd6d19bd8..0d3234dc1abb6 100644
--- a/apps/web/src/components/chat/TimelineV2EventRow.tsx
+++ b/apps/web/src/components/chat/TimelineV2EventRow.tsx
@@ -51,9 +51,6 @@ export function V2EventTimelineRow({ row }: { row: Extract<TimelineRow, { kind:
   );
 }
 
-// Earlier avatars sit above later ones so each bottom-right account badge stays visible.
-const STACKED_AVATAR_Z_INDEX = ["z-3", "z-2", "z-1"] as const;
-
 const V2SubagentGroup = memo(function V2SubagentGroup({
   row,
 }: {
@@ -105,11 +102,10 @@ const V2SubagentGroup = memo(function V2SubagentGroup({
               : "text-muted-foreground opacity-55",
           )}
         >
-          <span className="isolate flex shrink-0 items-center -space-x-1.5" aria-hidden>
-            {agents.slice(0, 3).map(({ item, status }, index) => (
+          <span className="isolate flex shrink-0 items-center -space-x-1" aria-hidden>
+            {agents.slice(0, 3).map(({ item, status }) => (
               <EnvironmentSubagentAvatar
                 key={item.id}
-                className={STACKED_AVATAR_Z_INDEX[index]}
                 environmentId={ctx.activeThreadEnvironmentId}
                 providerInstanceId={item.providerInstanceId}
                 driver={item.driver}
diff --git a/apps/web/src/components/chat/V2LifecycleRow.tsx b/apps/web/src/components/chat/V2LifecycleRow.tsx
index c64ead31bbdc8..e73a981dd1641 100644
--- a/apps/web/src/components/chat/V2LifecycleRow.tsx
+++ b/apps/web/src/components/chat/V2LifecycleRow.tsx
@@ -227,7 +227,7 @@ function SubagentAvatar({
   accentColor?: string | undefined;
   showBadge: boolean;
   status?: OrchestrationV2TurnItem["status"] | undefined;
-  className?: string | undefined;
+  className?: string;
 }) {
   return (
     <span
@@ -245,8 +245,10 @@ function SubagentAvatar({
           acpRegistryIconUrl={iconUrl}
           showBadge={showBadge}
           size="compact"
-          className="z-auto"
+          // Account badges are wider than an overlapped avatar edge, so they paint above every circle.
+          className="z-auto isolation-auto"
           iconClassName="size-3.5"
+          badgeClassName="z-1"
         />
       ) : (
         <BotIcon className="size-3.5 text-muted-foreground" />
@@ -278,7 +280,6 @@ export function EnvironmentSubagentAvatar({
   /** A task in a linked environment runs a provider instance there; its driver here is only a label. */
   remote?: OrchestrationV2RemoteTaskChild | undefined;
   status?: OrchestrationV2TurnItem["status"] | undefined;
-  className?: string | undefined;
 }) {
   const providerEnvironmentId = remote?.environmentId ?? environmentId;
   const providersAtom = serverEnvironment.providersValueAtom(providerEnvironmentId);