refactor: implement footer controls context for smooth transitions

Codex implemented a portal/context architecture to eliminate layout jank:

- Created FooterControlsProvider context with register/unregister methods
- GlobalFooter now reserves fixed height (88px + insets) for all modes
- Both AgentInputArea and RealtimeControls stack absolutely in same space
- Single shared Reanimated value drives cross-fade (250ms)
- Agent screen registers controls via context instead of rendering inline
- Content padding adjusted to account for footer height
- Borders and safe area moved to shared container
- AgentInputArea simplified to pure component (no internal animations)

This guarantees:
- No layout shifts during transitions
- Smooth cross-fade between control modes
- No gaps or double borders
- Both controls never occupy layout space simultaneously

Implementation by OpenAI Codex per architectural recommendation.

🤖 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,22 +1,16 @@
 import { View, TextInput, Pressable } from "react-native";
-import { useState, useEffect } from "react";
+import { useState } 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, isRealtimeMode }: AgentInputAreaProps) {
+export function AgentInputArea({ agentId }: AgentInputAreaProps) {
   const { theme } = useUnistyles();
   const { ws, sendAgentMessage, sendAgentAudio } = useSession();
   const { startRealtime } = useRealtime();
@@ -26,23 +20,6 @@ export function AgentInputArea({ agentId, isRealtimeMode }: 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, use absolute positioning to remove from layout flow
-      position: opacity.value < 0.5 ? ("absolute" as const) : ("relative" as const),
-      // 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;
 
@@ -99,7 +76,7 @@ export function AgentInputArea({ agentId, isRealtimeMode }: AgentInputAreaProps)
   const hasText = userInput.trim().length > 0;
 
   return (
-    <Animated.View style={[styles.container, animatedStyle]}>
+    <View style={styles.container}>
       {/* Text input */}
       <TextInput
         value={userInput}
@@ -159,7 +136,7 @@ export function AgentInputArea({ agentId, isRealtimeMode }: AgentInputAreaProps)
             </>
           )}
       </View>
-    </Animated.View>
+    </View>
   );
 }
 

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

@@ -1,14 +1,15 @@
 import { useEffect } from "react";
-import { View, Pressable } from "react-native";
+import { View, Pressable, StyleSheet as RNStyleSheet } from "react-native";
 import { usePathname } 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 { 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 Animated, { 
-  FadeIn, 
+import Animated, {
+  FadeIn,
   FadeOut,
   useAnimatedStyle,
   withTiming,
@@ -21,44 +22,80 @@ export function GlobalFooter() {
   const pathname = usePathname();
   const { isRealtimeMode, startRealtime } = useRealtime();
   const { ws } = useSession();
+  const { controls } = useFooterControls();
 
   // Determine current screen type
   const isAgentScreen = pathname?.startsWith("/agent/");
 
-  // Determine if footer should be visible
-  // Hidden when: on agent screen AND realtime is off
-  const shouldHide = isAgentScreen && !isRealtimeMode;
+  const hasRegisteredControls = !!controls;
+  const showAgentControls = isAgentScreen && hasRegisteredControls;
 
-  // Controlled opacity for agent screen transitions (synced with AgentInputArea)
-  const realtimeOpacity = useSharedValue(isRealtimeMode ? 1 : 0);
+  const transition = useSharedValue(isRealtimeMode ? 1 : 0);
 
   useEffect(() => {
-    if (isAgentScreen) {
-      // On agent screen, use controlled animation for smooth cross-fade
-      realtimeOpacity.value = withTiming(isRealtimeMode ? 1 : 0, { duration: 250 });
+    if (showAgentControls) {
+      transition.value = withTiming(isRealtimeMode ? 1 : 0, { duration: 250 });
     }
-  }, [isRealtimeMode, isAgentScreen]);
+  }, [isRealtimeMode, showAgentControls]);
 
   const realtimeAnimatedStyle = useAnimatedStyle(() => {
     return {
-      opacity: realtimeOpacity.value,
-      pointerEvents: realtimeOpacity.value > 0.5 ? ("auto" as const) : ("none" as const),
+      opacity: transition.value,
+      pointerEvents: transition.value > 0.5 ? ("auto" as const) : ("none" as const),
     };
   });
 
-  // If realtime is active, show realtime controls
+  const agentControlsAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: 1 - transition.value,
+      pointerEvents: transition.value < 0.5 ? ("auto" as const) : ("none" as const),
+    };
+  });
+
+  if (showAgentControls) {
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            paddingBottom: insets.bottom,
+            height: FOOTER_HEIGHT + insets.bottom,
+          },
+        ]}
+      >
+        <View style={styles.content}>
+          <Animated.View
+            style={[RNStyleSheet.absoluteFillObject, agentControlsAnimatedStyle]}
+          >
+            {controls}
+          </Animated.View>
+          <Animated.View
+            style={[RNStyleSheet.absoluteFillObject, realtimeAnimatedStyle]}
+          >
+            <RealtimeControls />
+          </Animated.View>
+        </View>
+      </View>
+    );
+  }
+
+  if (isAgentScreen) {
+    return null;
+  }
+
+  // Determine if realtime is active on non-agent screens
   if (isRealtimeMode) {
     return (
       <Animated.View
         style={[
-          styles.container, 
-          { paddingBottom: insets.bottom },
-          // Use controlled opacity on agent screen for smooth transition
-          isAgentScreen && realtimeAnimatedStyle
+          styles.container,
+          {
+            paddingBottom: insets.bottom,
+            height: FOOTER_HEIGHT + insets.bottom,
+          },
         ]}
-        // Keep FadeIn/FadeOut for non-agent screens (home, orchestrator, etc)
-        entering={!isAgentScreen ? FadeIn.duration(400) : undefined}
-        exiting={!isAgentScreen ? FadeOut.duration(250) : undefined}
+        entering={FadeIn.duration(400)}
+        exiting={FadeOut.duration(250)}
       >
         <RealtimeControls />
       </Animated.View>
@@ -66,18 +103,16 @@ export function GlobalFooter() {
   }
 
   // For home and orchestrator screens, show centered realtime button
-  // On agent screens, don't render at all
-  if (shouldHide) {
-    return null;
-  }
-
   return (
     <Animated.View
       entering={FadeIn.duration(250)}
       exiting={FadeOut.duration(250)}
       style={[
         styles.container,
-        { paddingBottom: insets.bottom }
+        {
+          paddingBottom: insets.bottom,
+          height: FOOTER_HEIGHT + insets.bottom,
+        },
       ]}
     >
       <View style={styles.centeredButtonContainer}>
@@ -102,8 +137,9 @@ const styles = StyleSheet.create((theme) => ({
     borderTopWidth: theme.borderWidth[1],
     borderTopColor: theme.colors.border,
   },
-  realtimeContainer: {
-    backgroundColor: theme.colors.background,
+  content: {
+    flex: 1,
+    height: FOOTER_HEIGHT,
   },
   centeredButtonContainer: {
     padding: theme.spacing[6],