fix: improve realtime controls layout and add agent status bar

- Change realtime controls to horizontal layout with fixed height (88px)
- Add orientation prop to VolumeMeter for horizontal/vertical modes
- Create AgentStatusBar component showing mode badge and agent status
- Add agent persistence system for managing agent state across restarts
- Fix bottom sheet dismiss handling to clear state properly
- Remove debug timer from realtime controls

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

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

packages/app/src/components/agent-status-bar.tsx

@@ -0,0 +1,145 @@
+import { View, Text, Pressable } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { ChevronDown } from "lucide-react-native";
+import { useSession } from "@/contexts/session-context";
+import { useState } from "react";
+import { ModeSelectorModal } from "./mode-selector-modal";
+
+interface AgentStatusBarProps {
+  agentId: string;
+}
+
+export function AgentStatusBar({ agentId }: AgentStatusBarProps) {
+  const { theme } = useUnistyles();
+  const { agents, setAgentMode } = useSession();
+  const [showModeSelector, setShowModeSelector] = useState(false);
+
+  const agent = agents.get(agentId);
+
+  if (!agent) {
+    return null;
+  }
+
+  function handleModeChange(modeId: string) {
+    setAgentMode(agentId, modeId);
+  }
+
+  function getStatusLabel(status: string): string {
+    switch (status) {
+      case "ready":
+        return "Ready";
+      case "processing":
+        return "Working";
+      case "completed":
+        return "Completed";
+      case "failed":
+        return "Failed";
+      case "killed":
+        return "Stopped";
+      default:
+        return status;
+    }
+  }
+
+  function getStatusColor(status: string): string {
+    switch (status) {
+      case "ready":
+        return theme.colors.palette.green[500];
+      case "processing":
+        return theme.colors.palette.blue[500];
+      case "completed":
+        return theme.colors.palette.gray[500];
+      case "failed":
+        return theme.colors.palette.red[500];
+      case "killed":
+        return theme.colors.palette.orange[500];
+      default:
+        return theme.colors.mutedForeground;
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Agent Mode Badge */}
+      {agent.availableModes && agent.availableModes.length > 0 && (
+        <Pressable
+          onPress={() => setShowModeSelector(true)}
+          style={({ pressed }) => [
+            styles.modeBadge,
+            pressed && styles.modeBadgePressed,
+          ]}
+        >
+          <Text style={styles.modeBadgeText}>
+            {agent.availableModes?.find((m) => m.id === agent.currentModeId)?.name ||
+              agent.currentModeId ||
+              "default"}
+          </Text>
+          <ChevronDown size={14} color={theme.colors.mutedForeground} />
+        </Pressable>
+      )}
+
+      {/* Agent Status Indicator */}
+      <View style={styles.statusIndicator}>
+        <View
+          style={[
+            styles.statusDot,
+            { backgroundColor: getStatusColor(agent.status) },
+          ]}
+        />
+        <Text style={styles.statusText}>{getStatusLabel(agent.status)}</Text>
+      </View>
+
+      {/* Mode selector modal */}
+      <ModeSelectorModal
+        visible={showModeSelector}
+        agent={agent}
+        onModeChange={handleModeChange}
+        onClose={() => setShowModeSelector(false)}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+    paddingHorizontal: theme.spacing[4],
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[1],
+  },
+  modeBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+    backgroundColor: theme.colors.muted,
+    borderRadius: theme.borderRadius.full,
+  },
+  modeBadgePressed: {
+    backgroundColor: theme.colors.accent,
+  },
+  modeBadgeText: {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+    textTransform: "capitalize",
+  },
+  statusIndicator: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  statusText: {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+  },
+}));

packages/app/src/components/agent-stream-view.tsx

@@ -45,7 +45,14 @@ export function AgentStreamView({
 
   function handleOpenToolCallDetails(toolCall: SelectedToolCall) {
     setSelectedToolCall(toolCall);
-    bottomSheetRef.current?.present();
+    // Delay present to next frame to ensure component is mounted
+    setTimeout(() => {
+      bottomSheetRef.current?.present();
+    }, 0);
+  }
+
+  function handleBottomSheetDismiss() {
+    setSelectedToolCall(null);
   }
 
   return (
@@ -171,6 +178,7 @@ export function AgentStreamView({
       <ToolCallBottomSheet
         bottomSheetRef={bottomSheetRef}
         selectedToolCall={selectedToolCall}
+        onDismiss={handleBottomSheetDismiss}
       />
     </View>
   );

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

@@ -72,6 +72,9 @@ const styles = StyleSheet.create((theme) => ({
     borderTopWidth: theme.borderWidth[1],
     borderTopColor: theme.colors.border,
   },
+  realtimeContainer: {
+    backgroundColor: theme.colors.background,
+  },
   centeredButtonContainer: {
     padding: theme.spacing[6],
     alignItems: "center",

packages/app/src/components/orchestrator-messages-view.tsx

@@ -23,6 +23,7 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
     const { theme } = useUnistyles();
     const bottomSheetRef = useRef<BottomSheetModal | null>(null);
     const [selectedToolCall, setSelectedToolCall] = useState<SelectedToolCall | null>(null);
+    const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
 
     function handleOpenToolCallDetails(toolCall: {
       toolName: string;
@@ -45,7 +46,16 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
           },
         },
       });
-      bottomSheetRef.current?.present();
+      setIsBottomSheetVisible(true);
+      // Delay present to next frame to ensure component is mounted
+      setTimeout(() => {
+        bottomSheetRef.current?.present();
+      }, 0);
+    }
+
+    function handleBottomSheetDismiss() {
+      setIsBottomSheetVisible(false);
+      setSelectedToolCall(null);
     }
 
     return (
@@ -139,10 +149,13 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
         )}
       </ScrollView>
 
-      <ToolCallBottomSheet
-        bottomSheetRef={bottomSheetRef}
-        selectedToolCall={selectedToolCall}
-      />
+      {isBottomSheetVisible && (
+        <ToolCallBottomSheet
+          bottomSheetRef={bottomSheetRef}
+          selectedToolCall={selectedToolCall}
+          onDismiss={handleBottomSheetDismiss}
+        />
+      )}
     </>
     );
   }

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

@@ -31,13 +31,8 @@ export function RealtimeControls() {
           isMuted={isMuted}
           isDetecting={isDetecting}
           isSpeaking={isSpeaking}
+          orientation="horizontal"
         />
-        {/* Debug timer */}
-        {(isDetecting || isSpeaking) && (
-          <Text style={styles.debugTimer}>
-            {(segmentDuration / 1000).toFixed(1)}s
-          </Text>
-        )}
       </View>
       <View style={styles.buttons}>
         {/* Mute button */}
@@ -71,20 +66,23 @@ export function RealtimeControls() {
 
 const styles = StyleSheet.create((theme) => ({
   container: {
-    minHeight: 200,
-    padding: theme.spacing[4],
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[4],
+    height: 88,
   },
   volumeContainer: {
     flex: 1,
     justifyContent: "center",
-    alignItems: "center",
+    alignItems: "flex-start",
   },
   buttons: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     gap: theme.spacing[3],
-    paddingTop: theme.spacing[4],
   },
   muteButton: {
     width: 48,
@@ -108,10 +106,4 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "center",
     backgroundColor: theme.colors.palette.red[600],
   },
-  debugTimer: {
-    marginTop: theme.spacing[2],
-    color: theme.colors.mutedForeground,
-    fontSize: theme.fontSize.sm,
-    fontFamily: "monospace",
-  },
 }));

packages/app/src/components/tool-call-bottom-sheet.tsx

@@ -15,11 +15,13 @@ import type { SelectedToolCall } from "@/types/shared";
 interface ToolCallBottomSheetProps {
   bottomSheetRef: React.RefObject<BottomSheetModal | null>;
   selectedToolCall: SelectedToolCall | null;
+  onDismiss: () => void;
 }
 
 export function ToolCallBottomSheet({
   bottomSheetRef,
   selectedToolCall,
+  onDismiss,
 }: ToolCallBottomSheetProps) {
   const insets = useSafeAreaInsets();
   const snapPoints = useMemo(() => ["80%"], []);
@@ -88,6 +90,7 @@ export function ToolCallBottomSheet({
       handleIndicatorStyle={styles.handleIndicator}
       backgroundStyle={styles.background}
       topInset={insets.top}
+      onDismiss={onDismiss}
     >
       {/* Header */}
       <View style={styles.header}>

packages/app/src/components/volume-meter.tsx

@@ -16,15 +16,16 @@ interface VolumeMeterProps {
   isMuted?: boolean;
   isDetecting?: boolean;
   isSpeaking?: boolean;
+  orientation?: "vertical" | "horizontal";
 }
 
-export function VolumeMeter({ volume, isMuted = false, isDetecting = false, isSpeaking = false }: VolumeMeterProps) {
+export function VolumeMeter({ volume, isMuted = false, isDetecting = false, isSpeaking = false, orientation = "vertical" }: VolumeMeterProps) {
   const { theme } = useUnistyles();
 
   // Base dimensions
   const LINE_SPACING = 8;
-  const MAX_HEIGHT = 50;
-  const MIN_HEIGHT = 20;
+  const MAX_HEIGHT = orientation === "horizontal" ? 30 : 50;
+  const MIN_HEIGHT = orientation === "horizontal" ? 12 : 20;
 
   // Shared values for each line's height
   const line1Height = useSharedValue(MIN_HEIGHT);
@@ -162,8 +163,10 @@ export function VolumeMeter({ volume, isMuted = false, isDetecting = false, isSp
   const lineColor = "#FFFFFF";
   const lineWidth = 8;
 
+  const containerHeight = orientation === "horizontal" ? 60 : 100;
+
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { height: containerHeight }]}>
       <ReanimatedAnimated.View
         style={[
           styles.line,
@@ -205,7 +208,6 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    height: 100,
   },
   line: {
     borderRadius: theme.borderRadius.full,