refactor: standardize footer height calculations and alignment across components

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

@@ -11,6 +11,7 @@ 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 { FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
 
 interface AgentInputAreaProps {
   agentId: string;
@@ -18,6 +19,7 @@ interface AgentInputAreaProps {
 
 const MIN_INPUT_HEIGHT = 40;
 const MAX_INPUT_HEIGHT = 160;
+const BASE_VERTICAL_PADDING = (FOOTER_HEIGHT - MIN_INPUT_HEIGHT) / 2;
 
 export function AgentInputArea({ agentId }: AgentInputAreaProps) {
   const { theme } = useUnistyles();
@@ -177,11 +179,11 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
 const styles = StyleSheet.create((theme) => ({
   container: {
     flexDirection: "row",
-    alignItems: "flex-end",
+    alignItems: "center",
     paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[4],
+    paddingVertical: BASE_VERTICAL_PADDING,
     gap: theme.spacing[3],
-    minHeight: 88,
+    minHeight: FOOTER_HEIGHT,
   },
   textInput: {
     flex: 1,

packages/app/src/components/realtime-controls.tsx

@@ -4,6 +4,10 @@ import { MicOff, Square } from "lucide-react-native";
 import { VolumeMeter } from "./volume-meter";
 import { useRealtime } from "@/contexts/realtime-context";
 import { useSession } from "@/contexts/session-context";
+import { FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
+
+const CONTROL_BUTTON_SIZE = 48;
+const VERTICAL_PADDING = (FOOTER_HEIGHT - CONTROL_BUTTON_SIZE) / 2;
 
 export function RealtimeControls() {
   const { theme } = useUnistyles();
@@ -70,8 +74,8 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     justifyContent: "space-between",
     paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[4],
-    height: 88,
+    paddingVertical: VERTICAL_PADDING,
+    height: FOOTER_HEIGHT,
   },
   volumeContainer: {
     flex: 1,

packages/app/src/contexts/footer-controls-context.tsx

@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 
-export const FOOTER_HEIGHT = 88;
+export const FOOTER_HEIGHT = 75;
 
 interface FooterControlsContextValue {
   controls: ReactNode | null;

packages/server/agents.json

@@ -10,5 +10,29 @@
     "createdAt": "2025-10-25T19:50:58.711Z",
     "lastActivityAt": "2025-10-25T19:50:58.711Z",
     "cwd": "/Users/moboudra/dev/voice-dev"
+  },
+  {
+    "id": "1f1a734d-58f2-466e-8887-a3185e489dd9",
+    "title": "Standardize Footer Height to 75",
+    "sessionId": "fd0f63c2-8ab2-44a3-9b7c-7709bf339807",
+    "options": {
+      "type": "claude",
+      "sessionId": "fd0f63c2-8ab2-44a3-9b7c-7709bf339807"
+    },
+    "createdAt": "2025-10-25T20:00:32.595Z",
+    "lastActivityAt": "2025-10-25T20:00:32.595Z",
+    "cwd": "/Users/moboudra/dev/voice-dev"
+  },
+  {
+    "id": "41833717-74f8-496e-ac4b-399e96121777",
+    "title": "Implement Image Upload in Chat",
+    "sessionId": "aad97d76-78d0-43c2-b853-e43825987dd3",
+    "options": {
+      "type": "claude",
+      "sessionId": "aad97d76-78d0-43c2-b853-e43825987dd3"
+    },
+    "createdAt": "2025-10-25T20:12:17.214Z",
+    "lastActivityAt": "2025-10-25T20:12:17.214Z",
+    "cwd": "/Users/moboudra/dev/voice-dev"
   }
 ]