Sort and scroll sub-agent list

packages/app/src/app/agent/[serverId]/[agentId].tsx

@@ -7,6 +7,7 @@ import {
   Modal,
   useWindowDimensions,
   LayoutChangeEvent,
+  ScrollView,
 } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useFocusEffect } from "@react-navigation/native";
@@ -180,12 +181,13 @@ 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 }> = [];
+    const children: Array<{ id: string; title: string | null; createdAt: Date }> = [];
     for (const [id, a] of allAgents) {
       if (a.parentAgentId === resolvedAgentId) {
-        children.push({ id, title: a.title });
+        children.push({ id, title: a.title, createdAt: a.createdAt });
       }
     }
+    children.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
     return children;
   }, [allAgents, resolvedAgentId]);
 
@@ -644,22 +646,28 @@ function AgentScreenContent({ serverId, agentId, onBack }: AgentScreenContentPro
                 {childAgents.length === 0 ? (
                   <Text style={styles.menuSubAgentsEmpty}>No sub-agents</Text>
                 ) : (
-                  childAgents.map((child) => (
+                  <ScrollView
-                    <Pressable
+                    style={styles.menuSubAgentsList}
-                      key={child.id}
+                    contentContainerStyle={styles.menuSubAgentsListContent}
-                      onPress={() => handleNavigateToChildAgent(child.id)}
+                    showsVerticalScrollIndicator={childAgents.length > 3}
-                      style={styles.menuSubAgentItem}
+                  >
-                    >
+                    {childAgents.map((child) => (
-                      <Text
+                      <Pressable
-                        style={styles.menuSubAgentText}
+                        key={child.id}
-                        numberOfLines={1}
+                        onPress={() => handleNavigateToChildAgent(child.id)}
-                        ellipsizeMode="tail"
+                        style={styles.menuSubAgentItem}
                       >
-                        {child.title || "Untitled Agent"}
+                        <Text
-                      </Text>
+                          style={styles.menuSubAgentText}
-                      <ChevronRight size={16} color={theme.colors.mutedForeground} />
+                          numberOfLines={1}
-                    </Pressable>
+                          ellipsizeMode="tail"
-                  ))
+                        >
+                          {child.title || "Untitled Agent"}
+                        </Text>
+                        <ChevronRight size={16} color={theme.colors.mutedForeground} />
+                      </Pressable>
+                    ))}
+                  </ScrollView>
                 )}
               </View>
 
@@ -932,6 +940,12 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
   },
+  menuSubAgentsList: {
+    maxHeight: (theme.spacing[2] * 2 + theme.fontSize.sm) * 3,
+  },
+  menuSubAgentsListContent: {
+    gap: theme.spacing[1],
+  },
   menuSubAgentItem: {
     flexDirection: "row",
     alignItems: "center",