refactor: add dynamic input height, agent sorting, and last activity tracking

packages/app/src/components/global-footer.tsx

@@ -1,13 +1,14 @@
-import { useEffect } from "react";
-import { View, Pressable, StyleSheet as RNStyleSheet } from "react-native";
-import { usePathname } from "expo-router";
+import { useEffect, useState } from "react";
+import { View, Pressable, Text } from "react-native";
+import { usePathname, useRouter } from "expo-router";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { AudioLines } from "lucide-react-native";
+import { AudioLines, Users, Plus } from "lucide-react-native";
 import { useRealtime } from "@/contexts/realtime-context";
 import { useSession } from "@/contexts/session-context";
 import { useFooterControls, FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
 import { RealtimeControls } from "./realtime-controls";
+import { CreateAgentModal } from "./create-agent-modal";
 import Animated, {
   FadeIn,
   FadeOut,
@@ -21,13 +22,17 @@ export function GlobalFooter() {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
   const pathname = usePathname();
+  const router = useRouter();
   const { isRealtimeMode, startRealtime } = useRealtime();
   const { ws } = useSession();
   const { controls } = useFooterControls();
+  const [showCreateModal, setShowCreateModal] = useState(false);
 
   // Determine current screen type
   const isAgentScreen = pathname?.startsWith("/agent/");
 
+  const agentControlsHeight = useSharedValue(FOOTER_HEIGHT);
+
   const hasRegisteredControls = !!controls;
   const showAgentControls = isAgentScreen && hasRegisteredControls;
 
@@ -53,6 +58,19 @@ export function GlobalFooter() {
     [bottomInset],
   );
 
+  const containerAnimatedStyle = useAnimatedStyle(
+    () => {
+      "worklet";
+      const agentHeight = Math.max(agentControlsHeight.value, FOOTER_HEIGHT);
+      const expandedHeight = agentHeight - (agentHeight - FOOTER_HEIGHT) * transition.value;
+
+      return {
+        height: expandedHeight + bottomInset,
+      };
+    },
+    [bottomInset],
+  );
+
   const realtimeAnimatedStyle = useAnimatedStyle(() => {
     return {
       opacity: transition.value,
@@ -74,19 +92,22 @@ export function GlobalFooter() {
           styles.container,
           {
             paddingBottom: insets.bottom,
-            height: FOOTER_HEIGHT + insets.bottom,
           },
+          containerAnimatedStyle,
           keyboardAnimatedStyle,
         ]}
       >
         <View style={styles.content}>
           <Animated.View
-            style={[RNStyleSheet.absoluteFillObject, agentControlsAnimatedStyle]}
+            onLayout={(event) => {
+              agentControlsHeight.value = Math.max(event.nativeEvent.layout.height, FOOTER_HEIGHT);
+            }}
+            style={[styles.absoluteBottomFill, agentControlsAnimatedStyle]}
           >
             {controls}
           </Animated.View>
           <Animated.View
-            style={[RNStyleSheet.absoluteFillObject, realtimeAnimatedStyle]}
+            style={[styles.absoluteBottomFill, realtimeAnimatedStyle]}
           >
             <RealtimeControls />
           </Animated.View>
@@ -157,7 +178,13 @@ const styles = StyleSheet.create((theme) => ({
   },
   content: {
     flex: 1,
-    height: FOOTER_HEIGHT,
+    minHeight: FOOTER_HEIGHT,
+  },
+  absoluteBottomFill: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
   },
   centeredButtonContainer: {
     padding: theme.spacing[6],