feat: replace single realtime button with three-button footer navigation

Replace the centered realtime button in the global footer with three buttons:
- Agents: Navigate to home screen
- New Agent: Open create agent modal
- Realtime: Start realtime mode (existing functionality)

This provides easier access to core navigation actions from any non-agent screen.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -140,33 +140,57 @@ export function GlobalFooter() {
     );
   }
 
-  // For home and orchestrator screens, show centered realtime button
+  // For home and orchestrator screens, show three buttons
   return (
-    <Animated.View
+    <>
-      entering={FadeIn.duration(250)}
+      <Animated.View
-      exiting={FadeOut.duration(250)}
+        entering={FadeIn.duration(250)}
-      style={[
+        exiting={FadeOut.duration(250)}
-        styles.container,
+        style={[
-        {
+          styles.container,
-          paddingBottom: insets.bottom,
+          {
-          height: FOOTER_HEIGHT + insets.bottom,
+            paddingBottom: insets.bottom,
-        },
+            height: FOOTER_HEIGHT + insets.bottom,
-        keyboardAnimatedStyle,
+          },
-      ]}
+          keyboardAnimatedStyle,
-    >
+        ]}
-      <View style={styles.centeredButtonContainer}>
+      >
-        <Pressable
+        <View style={styles.threeButtonContainer}>
-          onPress={startRealtime}
+          <Pressable
-          disabled={!ws.isConnected}
+            onPress={() => router.push("/")}
-          style={[
+            style={styles.footerButton}
-            styles.centeredRealtimeButton,
+          >
-            !ws.isConnected && styles.buttonDisabled,
+            <Users size={20} color={theme.colors.foreground} />
-          ]}
+            <Text style={styles.footerButtonText}>Agents</Text>
-        >
+          </Pressable>
-          <AudioLines size={24} color="white" />
+
-        </Pressable>
+          <Pressable
-      </View>
+            onPress={() => setShowCreateModal(true)}
-    </Animated.View>
+            style={styles.footerButton}
+          >
+            <Plus size={20} color={theme.colors.foreground} />
+            <Text style={styles.footerButtonText}>New Agent</Text>
+          </Pressable>
+
+          <Pressable
+            onPress={startRealtime}
+            disabled={!ws.isConnected}
+            style={[
+              styles.footerButton,
+              !ws.isConnected && styles.buttonDisabled,
+            ]}
+          >
+            <AudioLines size={20} color={theme.colors.foreground} />
+            <Text style={styles.footerButtonText}>Realtime</Text>
+          </Pressable>
+        </View>
+      </Animated.View>
+
+      <CreateAgentModal
+        isVisible={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+      />
+    </>
   );
 }
 
@@ -186,18 +210,23 @@ const styles = StyleSheet.create((theme) => ({
     right: 0,
     bottom: 0,
   },
-  centeredButtonContainer: {
+  threeButtonContainer: {
-    padding: theme.spacing[6],
+    flexDirection: "row",
-    alignItems: "center",
+    padding: theme.spacing[4],
-    justifyContent: "center",
+    gap: theme.spacing[3],
   },
-  centeredRealtimeButton: {
+  footerButton: {
-    width: 56,
+    flex: 1,
-    height: 56,
+    flexDirection: "column",
-    borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.colors.palette.blue[600],
     alignItems: "center",
     justifyContent: "center",
+    paddingVertical: theme.spacing[3],
+    gap: theme.spacing[1],
+  },
+  footerButtonText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
   },
   buttonDisabled: {
     opacity: 0.5,