fix: smooth transition between text and realtime controls with coordinated animations

- Keep AgentInputArea always mounted, animate opacity (0→1 / 1→0) instead of unmounting
- Use controlled opacity animation for GlobalFooter's RealtimeControls on agent screen
- Both controls fade in/out over 250ms, synchronized for smooth cross-fade
- Disable pointer events on hidden controls to prevent interaction issues
- Keep FadeIn/FadeOut behavior on non-agent screens (home, orchestrator) unchanged

This eliminates the layout "push" effect where GlobalFooter would take up space
while fading in, causing visible jank. Now both controls overlay and cross-fade
smoothly without affecting layout.

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

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

packages/app/src/components/agent-input-area.tsx

@@ -1,16 +1,22 @@
 import { View, TextInput, Pressable } from "react-native";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Mic, ArrowUp, AudioLines, Square } from "lucide-react-native";
 import { useSession } from "@/contexts/session-context";
 import { useRealtime } from "@/contexts/realtime-context";
 import { useAudioRecorder } from "@/hooks/use-audio-recorder";
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+  useSharedValue,
+} from "react-native-reanimated";
 
 interface AgentInputAreaProps {
   agentId: string;
+  isRealtimeMode: boolean;
 }
 
-export function AgentInputArea({ agentId }: AgentInputAreaProps) {
+export function AgentInputArea({ agentId, isRealtimeMode }: AgentInputAreaProps) {
   const { theme } = useUnistyles();
   const { ws, sendAgentMessage, sendAgentAudio } = useSession();
   const { startRealtime } = useRealtime();
@@ -20,6 +26,21 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
   const [isRecording, setIsRecording] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
 
+  // Animated opacity for smooth transitions
+  const opacity = useSharedValue(isRealtimeMode ? 0 : 1);
+
+  useEffect(() => {
+    opacity.value = withTiming(isRealtimeMode ? 0 : 1, { duration: 250 });
+  }, [isRealtimeMode]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      // When hidden, disable pointer events so GlobalFooter's controls are interactive
+      pointerEvents: opacity.value < 0.5 ? ("none" as const) : ("auto" as const),
+    };
+  });
+
   async function handleSendMessage() {
     if (!userInput.trim() || !ws.isConnected) return;
 
@@ -76,7 +97,7 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
   const hasText = userInput.trim().length > 0;
 
   return (
-    <View style={styles.container}>
+    <Animated.View style={[styles.container, animatedStyle]}>
       {/* Text input */}
       <TextInput
         value={userInput}
@@ -136,7 +157,7 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
             </>
           )}
       </View>
-    </View>
+    </Animated.View>
   );
 }