From 3eacf6030c2001929e76c7b0dc02a2967a777390 Mon Sep 17 00:00:00 2001
From: JeroenBolhuis <jeroen.bolhuis@hotmail.com>
Date: Mon, 9 Nov 2026 16:11:28 +0100
Subject: [PATCH] fix(clients): show all four subagent avatars

---
 .../src/features/threads/thread-subagent-group.tsx       | 9 ++++++---
 apps/web/src/components/chat/TimelineV2EventRow.tsx      | 7 ++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/mobile/src/features/threads/thread-subagent-group.tsx b/apps/mobile/src/features/threads/thread-subagent-group.tsx
index f3d3f3b5252b6..877dc361188a5 100644
--- a/apps/mobile/src/features/threads/thread-subagent-group.tsx
+++ b/apps/mobile/src/features/threads/thread-subagent-group.tsx
@@ -132,6 +132,7 @@ export function ThreadSubagentGroup(props: {
     };
   });
   const grouped = agents.length > 1;
+  const visibleAvatarCount = agents.length <= 4 ? agents.length : 3;
   const label = `${agents.length} subagents`;
   const summary = summarizeSubagentStatuses(agents.map((agent) => agent.status));
   const expanded = props.expandedRows[props.anchorKey] ?? false;
@@ -150,14 +151,16 @@ export function ThreadSubagentGroup(props: {
           className="min-h-14 flex-row items-center gap-3 rounded-lg py-2 active:bg-subtle"
         >
           <View className="flex-row items-center">
-            {agents.slice(0, 3).map((agent, index) => (
+            {agents.slice(0, visibleAvatarCount).map((agent, index) => (
               <View key={agent.item.id} style={{ marginLeft: index === 0 ? 0 : -7 }}>
                 <SubagentAvatar item={agent.item} config={configOf(agent.item)} />
               </View>
             ))}
-            {agents.length > 3 ? (
+            {agents.length > visibleAvatarCount ? (
               <View className="-ml-2 h-7 w-7 items-center justify-center rounded-full border border-border bg-card">
-                <Text className="text-2xs text-foreground-muted">+{agents.length - 3}</Text>
+                <Text className="text-2xs text-foreground-muted">
+                  +{agents.length - visibleAvatarCount}
+                </Text>
               </View>
             ) : null}
           </View>
diff --git a/apps/web/src/components/chat/TimelineV2EventRow.tsx b/apps/web/src/components/chat/TimelineV2EventRow.tsx
index e69ffdbaffdd4..57e4bcaecb56f 100644
--- a/apps/web/src/components/chat/TimelineV2EventRow.tsx
+++ b/apps/web/src/components/chat/TimelineV2EventRow.tsx
@@ -80,6 +80,7 @@ const V2SubagentGroup = memo(function V2SubagentGroup({
     };
   });
   const summary = subagentGroupSummary(agents);
+  const visibleAvatarCount = agents.length <= 4 ? agents.length : 3;
   const label = `${members.length} ${members.length === 1 ? "subagent" : "subagents"}`;
   const statusSummary = summarizeSubagentStatuses(agents.map(({ status }) => status));
   const toggleExpanded = (open: boolean) => {
@@ -103,7 +104,7 @@ const V2SubagentGroup = memo(function V2SubagentGroup({
           )}
         >
           <span className="flex shrink-0 items-center -space-x-1.5" aria-hidden>
-            {agents.slice(0, 3).map(({ item, status }) => (
+            {agents.slice(0, visibleAvatarCount).map(({ item, status }) => (
               <EnvironmentSubagentAvatar
                 key={item.id}
                 environmentId={ctx.activeThreadEnvironmentId}
@@ -113,9 +114,9 @@ const V2SubagentGroup = memo(function V2SubagentGroup({
                 status={agents.length === 1 ? status : undefined}
               />
             ))}
-            {agents.length > 3 ? (
+            {agents.length > visibleAvatarCount ? (
               <span className="relative inline-flex size-6 items-center justify-center rounded-full bg-muted text-3xs font-medium text-muted-foreground ring-2 ring-background">
-                +{agents.length - 3}
+                +{agents.length - visibleAvatarCount}
               </span>
             ) : null}
           </span>