Improve startup provider snapshots and dev harness

packages/app/src/screens/sessions-screen.tsx

@@ -2,12 +2,13 @@ import { useMemo, useState, useCallback, useEffect } from "react";
 import { View, Text } from "react-native";
 import { useIsFocused } from "@react-navigation/native";
 import { router } from "expo-router";
-import { StyleSheet } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { ChevronLeft } from "lucide-react-native";
 import { MenuHeader } from "@/components/headers/menu-header";
 import { Button } from "@/components/ui/button";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { AgentList } from "@/components/agent-list";
-import { useAllAgentsList } from "@/hooks/use-all-agents-list";
+import { useAgentHistory } from "@/hooks/use-agent-history";
 import { buildHostOpenProjectRoute } from "@/utils/host-routes";
 
 export function SessionsScreen({ serverId }: { serverId: string }) {
@@ -21,10 +22,11 @@ export function SessionsScreen({ serverId }: { serverId: string }) {
 }
 
 function SessionsScreenContent({ serverId }: { serverId: string }) {
-  const { agents, isRevalidating, refreshAll } = useAllAgentsList({
-    serverId,
-    includeArchived: true,
-  });
+  const { theme } = useUnistyles();
+  const { agents, hasMore, isInitialLoad, isLoadingMore, isRevalidating, loadMore, refreshAll } =
+    useAgentHistory({
+      serverId,
+    });
 
   // Track user-initiated refresh to avoid showing spinner on background revalidation
   const [isManualRefresh, setIsManualRefresh] = useState(false);
@@ -48,7 +50,11 @@ function SessionsScreenContent({ serverId }: { serverId: string }) {
   return (
     <View style={styles.container}>
       <MenuHeader title="Sessions" />
-      {sortedAgents.length === 0 ? (
+      {isInitialLoad ? (
+        <View style={styles.loadingContainer}>
+          <LoadingSpinner size="large" color={theme.colors.foregroundMuted} />
+        </View>
+      ) : sortedAgents.length === 0 ? (
         <View style={styles.emptyContainer}>
           <Text style={styles.emptyText}>No sessions yet</Text>
           <Button
@@ -65,6 +71,15 @@ function SessionsScreenContent({ serverId }: { serverId: string }) {
           showCheckoutInfo={false}
           isRefreshing={isManualRefresh && isRevalidating}
           onRefresh={handleRefresh}
+          listFooterComponent={
+            hasMore ? (
+              <View style={styles.footer}>
+                <Button variant="ghost" onPress={loadMore} disabled={isLoadingMore}>
+                  {isLoadingMore ? "Loading..." : "Load more"}
+                </Button>
+              </View>
+            ) : null
+          }
           showAttentionIndicator={false}
         />
       )}
@@ -88,4 +103,13 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.lg,
   },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  footer: {
+    alignItems: "center",
+    paddingVertical: theme.spacing[4],
+  },
 }));