From 8a06b378d8ecd18598e91418f42cf284f7f7a45c Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Tue, 23 Dec 2025 23:19:26 +0700
Subject: [PATCH] Add running dot to sub-agent list

---
 .../src/app/agent/[serverId]/[agentId].tsx    | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/app/agent/[serverId]/[agentId].tsx b/packages/app/src/app/agent/[serverId]/[agentId].tsx
index 6518ca364..560ea427a 100644
--- a/packages/app/src/app/agent/[serverId]/[agentId].tsx
+++ b/packages/app/src/app/agent/[serverId]/[agentId].tsx
@@ -181,10 +181,15 @@ function AgentScreenContent({ serverId, agentId, onBack }: AgentScreenContentPro
   // This prevents infinite loops caused by useShallow not doing deep equality on object arrays
   const childAgents = useMemo(() => {
     if (!resolvedAgentId || !allAgents) return [];
-    const children: Array<{ id: string; title: string | null; createdAt: Date }> = [];
+    const children: Array<{
+      id: string;
+      title: string | null;
+      createdAt: Date;
+      status: Agent["status"];
+    }> = [];
     for (const [id, a] of allAgents) {
       if (a.parentAgentId === resolvedAgentId) {
-        children.push({ id, title: a.title, createdAt: a.createdAt });
+        children.push({ id, title: a.title, createdAt: a.createdAt, status: a.status });
       }
     }
     children.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
@@ -664,7 +669,12 @@ function AgentScreenContent({ serverId, agentId, onBack }: AgentScreenContentPro
                         >
                           {child.title || "Untitled Agent"}
                         </Text>
-                        <ChevronRight size={16} color={theme.colors.mutedForeground} />
+                        <View style={styles.menuSubAgentMeta}>
+                          {child.status === "running" ? (
+                            <View style={styles.menuSubAgentDot} />
+                          ) : null}
+                          <ChevronRight size={16} color={theme.colors.mutedForeground} />
+                        </View>
                       </Pressable>
                     ))}
                   </ScrollView>
@@ -960,4 +970,15 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     marginRight: theme.spacing[2],
   },
+  menuSubAgentMeta: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+  },
+  menuSubAgentDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 999,
+    backgroundColor: "#3b82f6",
+  },
 }));