Use FlatList for home agent list

packages/app/src/components/agent-list.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Pressable, ScrollView, Modal } from "react-native";
+import { View, Text, Pressable, FlatList, Modal, type ListRenderItem } from "react-native";
 import { useCallback, useState } from "react";
 import { router } from "expo-router";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -56,10 +56,8 @@ export function AgentList({ agents }: AgentListProps) {
     setActionAgent(null);
   }, [actionAgent, deleteAgent]);
 
-  return (
-    <>
-      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
-        {agents.map((agent) => {
+  const renderAgentItem = useCallback<ListRenderItem<AggregatedAgent>>(
+    ({ item: agent }) => {
         const statusColor = getAgentStatusColor(agent.status);
         const statusLabel = getAgentStatusLabel(agent.status);
         const timeAgo = formatTimeAgo(agent.lastActivityAt);
@@ -67,7 +65,6 @@ export function AgentList({ agents }: AgentListProps) {
 
         return (
           <Pressable
-              key={`${agent.serverId}:${agent.id}`}
             style={({ pressed }) => [
               styles.agentItem,
               pressed && styles.agentItemPressed,
@@ -127,8 +124,26 @@ export function AgentList({ agents }: AgentListProps) {
             </View>
           </Pressable>
         );
-        })}
-      </ScrollView>
+      },
+    [handleAgentLongPress, handleAgentPress, theme.colors.muted, theme.colors.mutedForeground]
+  );
+
+  const keyExtractor = useCallback(
+    (agent: AggregatedAgent) => `${agent.serverId}:${agent.id}`,
+    []
+  );
+
+  return (
+    <>
+      <FlatList
+        data={agents}
+        style={styles.list}
+        contentContainerStyle={styles.listContent}
+        keyExtractor={keyExtractor}
+        renderItem={renderAgentItem}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      />
 
       <Modal
         visible={isActionSheetVisible}
@@ -176,10 +191,13 @@ export function AgentList({ agents }: AgentListProps) {
 }
 
 const styles = StyleSheet.create((theme) => ({
-  container: {
+  list: {
     flex: 1,
+  },
+  listContent: {
     paddingHorizontal: theme.spacing[4],
     paddingTop: theme.spacing[4],
+    paddingBottom: theme.spacing[4],
   },
   agentItem: {
     paddingVertical: theme.spacing[4],