feat: add home screen with agent list and orchestrator navigation

.claude/CLAUDE.md

@@ -36,3 +36,5 @@ Set a high timeout, like 2 minutes.
 Try not to bias it, state the problem clearly and let it work it out.
 
 `codex exec "prompt"`
+
+**CRITICAL: ALWAYS RUN TYPECHECK AFTER EVERY CHANGE.**

packages/app/src/app/_layout.tsx

@@ -1,18 +1,61 @@
-import { Stack } from 'expo-router';
+import { Stack } from "expo-router";
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from "react-native-safe-area-context";
-import { KeyboardProvider } from 'react-native-keyboard-controller';
+import { KeyboardProvider } from "react-native-keyboard-controller";
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SessionProvider } from "@/contexts/session-context";
+import { RealtimeProvider } from "@/contexts/realtime-context";
+import { useSettings } from "@/hooks/use-settings";
+import { View, ActivityIndicator } from "react-native";
+
+function ProvidersWrapper({ children }: { children: React.ReactNode }) {
+  const { settings, isLoading } = useSettings();
+
+  if (isLoading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "#09090b",
+        }}
+      >
+        <ActivityIndicator size="large" color="#fafafa" />
+      </View>
+    );
+  }
+
+  return (
+    <SessionProvider serverUrl={settings.serverUrl}>
+      <RealtimeProvider>{children}</RealtimeProvider>
+    </SessionProvider>
+  );
+}
 
 export default function RootLayout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider>
         <KeyboardProvider>
-          <Stack screenOptions={{ headerShown: false }}>
+          <ProvidersWrapper>
-            <Stack.Screen name="index" />
+            <Stack
-            <Stack.Screen name="settings" />
+              screenOptions={{
-            <Stack.Screen name="audio-test" />
+                headerShown: false,
-          </Stack>
+                animation: "slide_from_right",
+                animationDuration: 250,
+                gestureEnabled: true,
+                gestureDirection: "horizontal",
+                fullScreenGestureEnabled: true,
+                animationMatchesGesture: true,
+              }}
+            >
+              <Stack.Screen name="index" />
+              <Stack.Screen name="orchestrator" />
+              <Stack.Screen name="agent/[id]" />
+              <Stack.Screen name="settings" />
+              <Stack.Screen name="audio-test" />
+            </Stack>
+          </ProvidersWrapper>
         </KeyboardProvider>
       </SafeAreaProvider>
     </GestureHandlerRootView>

packages/app/src/app/agent/[id].tsx

@@ -0,0 +1,87 @@
+import { View, Text } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
+import ReanimatedAnimated, { useAnimatedStyle } from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { BackHeader } from "@/components/headers/back-header";
+import { AgentStreamView } from "@/components/agent-stream-view";
+import { GlobalFooter } from "@/components/global-footer";
+import { useSession } from "@/contexts/session-context";
+
+export default function AgentScreen() {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const { agents, agentStreamState, pendingPermissions, respondToPermission } = useSession();
+
+  // Keyboard animation
+  const { height: keyboardHeight } = useReanimatedKeyboardAnimation();
+  const animatedKeyboardStyle = useAnimatedStyle(() => {
+    "worklet";
+    const absoluteHeight = Math.abs(keyboardHeight.value);
+    const padding = Math.max(0, absoluteHeight - insets.bottom);
+    return {
+      paddingBottom: padding,
+    };
+  });
+
+  const agent = id ? agents.get(id) : undefined;
+  const streamItems = id ? agentStreamState.get(id) || [] : [];
+  const agentPermissions = new Map(
+    Array.from(pendingPermissions.entries()).filter(([_, perm]) => perm.agentId === id)
+  );
+
+  if (!agent) {
+    return (
+      <View style={styles.container}>
+        <BackHeader />
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>Agent not found</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <BackHeader title={agent.title || "Agent"} />
+
+      {/* Content Area with Keyboard Animation */}
+      <ReanimatedAnimated.View style={[styles.content, animatedKeyboardStyle]}>
+        <AgentStreamView
+          agentId={id!}
+          agent={agent}
+          streamItems={streamItems}
+          pendingPermissions={agentPermissions}
+          onPermissionResponse={(requestId, optionId) =>
+            respondToPermission(requestId, id!, agent.sessionId || "", [optionId])
+          }
+        />
+
+        {/* Footer */}
+        <GlobalFooter agentId={id} />
+      </ReanimatedAnimated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  content: {
+    flex: 1,
+  },
+  errorContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  errorText: {
+    fontSize: theme.fontSize.lg,
+    color: theme.colors.mutedForeground,
+  },
+}));

packages/app/src/app/orchestrator.tsx

@@ -0,0 +1,66 @@
+import { View } from "react-native";
+import { useRef, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
+import ReanimatedAnimated, { useAnimatedStyle } from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { BackHeader } from "@/components/headers/back-header";
+import { OrchestratorMessagesView } from "@/components/orchestrator-messages-view";
+import { GlobalFooter } from "@/components/global-footer";
+import { useSession } from "@/contexts/session-context";
+import type { ScrollView } from "react-native";
+import type { Artifact } from "@/components/artifact-drawer";
+
+export default function OrchestratorScreen() {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+  const { messages, currentAssistantMessage } = useSession();
+  const scrollViewRef = useRef<ScrollView>(null);
+  const [currentArtifact, setCurrentArtifact] = useState<Artifact | null>(null);
+
+  // Keyboard animation
+  const { height: keyboardHeight } = useReanimatedKeyboardAnimation();
+  const animatedKeyboardStyle = useAnimatedStyle(() => {
+    "worklet";
+    const absoluteHeight = Math.abs(keyboardHeight.value);
+    const padding = Math.max(0, absoluteHeight - insets.bottom);
+    return {
+      paddingBottom: padding,
+    };
+  });
+
+  function handleArtifactClick(artifactId: string) {
+    // TODO: Implement artifact drawer
+    console.log("[Orchestrator] Artifact clicked:", artifactId);
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <BackHeader title="Activity" />
+
+      {/* Content Area with Keyboard Animation */}
+      <ReanimatedAnimated.View style={[styles.content, animatedKeyboardStyle]}>
+        <OrchestratorMessagesView
+          ref={scrollViewRef}
+          messages={messages}
+          currentAssistantMessage={currentAssistantMessage}
+          onArtifactClick={handleArtifactClick}
+        />
+
+        {/* Footer */}
+        <GlobalFooter />
+      </ReanimatedAnimated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  content: {
+    flex: 1,
+  },
+}));

packages/app/src/app/settings.tsx

@@ -10,10 +10,10 @@ import {
   ActivityIndicator,
 } from "react-native";
 import { router } from "expo-router";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet } from "react-native-unistyles";
 import { useSettings } from "@/hooks/use-settings";
 import { theme as defaultTheme } from "@/styles/theme";
+import { BackHeader } from "@/components/headers/back-header";
 
 const styles = StyleSheet.create((theme) => ({
   loadingContainer: {
@@ -30,27 +30,6 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     backgroundColor: theme.colors.background,
   },
-  header: {
-    paddingHorizontal: theme.spacing[6],
-    paddingBottom: theme.spacing[4],
-    borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.border,
-  },
-  headerRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  headerTitle: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize["3xl"],
-    fontWeight: theme.fontWeight.bold,
-  },
-  cancelButton: {
-    color: theme.colors.palette.blue[500],
-    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.semibold,
-  },
   scrollView: {
     flex: 1,
   },
@@ -233,7 +212,6 @@ const styles = StyleSheet.create((theme) => ({
 
 export default function SettingsScreen() {
   const { settings, isLoading, updateSettings, resetSettings } = useSettings();
-  const insets = useSafeAreaInsets();
 
   const [serverUrl, setServerUrl] = useState(settings.serverUrl);
   const [useSpeaker, setUseSpeaker] = useState(settings.useSpeaker);
@@ -337,24 +315,6 @@ export default function SettingsScreen() {
     );
   }
 
-  function handleCancel() {
-    if (hasChanges) {
-      Alert.alert(
-        "Discard Changes",
-        "You have unsaved changes. Are you sure you want to go back?",
-        [
-          { text: "Stay", style: "cancel" },
-          {
-            text: "Discard",
-            style: "destructive",
-            onPress: () => router.back(),
-          },
-        ]
-      );
-    } else {
-      router.back();
-    }
-  }
 
   async function handleTestConnection() {
     if (!validateServerUrl(serverUrl)) {
@@ -418,15 +378,7 @@ export default function SettingsScreen() {
 
   return (
     <View style={styles.container}>
-      {/* Header */}
+      <BackHeader title="Settings" />
-      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
-        <View style={styles.headerRow}>
-          <Text style={styles.headerTitle}>Settings</Text>
-          <Pressable onPress={handleCancel}>
-            <Text style={styles.cancelButton}>Cancel</Text>
-          </Pressable>
-        </View>
-      </View>
 
       <ScrollView style={styles.scrollView}>
         <View style={styles.content}>

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

@@ -0,0 +1,246 @@
+import { View, TextInput, Pressable, Text } from "react-native";
+import { useState } from "react";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Mic, ArrowUp, AudioLines, Square, ChevronDown } from "lucide-react-native";
+import { useSession } from "@/contexts/session-context";
+import { useRealtime } from "@/contexts/realtime-context";
+import { useAudioRecorder } from "@/hooks/use-audio-recorder";
+import { ModeSelectorModal } from "./mode-selector-modal";
+
+interface AgentInputAreaProps {
+  agentId: string;
+}
+
+export function AgentInputArea({ agentId }: AgentInputAreaProps) {
+  const { theme } = useUnistyles();
+  const { agents, ws, sendAgentMessage, setAgentMode } = useSession();
+  const { startRealtime } = useRealtime();
+  const audioRecorder = useAudioRecorder();
+
+  const [userInput, setUserInput] = useState("");
+  const [isRecording, setIsRecording] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [showModeSelector, setShowModeSelector] = useState(false);
+
+  const agent = agents.get(agentId);
+
+  async function handleSendMessage() {
+    if (!userInput.trim() || !ws.isConnected) return;
+
+    const message = userInput.trim();
+    setUserInput("");
+    setIsProcessing(true);
+
+    try {
+      sendAgentMessage(agentId, message);
+    } catch (error) {
+      console.error("[AgentInput] Failed to send message:", error);
+    } finally {
+      setIsProcessing(false);
+    }
+  }
+
+  async function handleVoicePress() {
+    if (isRecording) {
+      // Stop recording
+      try {
+        setIsRecording(false);
+        const audioData = await audioRecorder.stop();
+
+        if (audioData) {
+          setIsProcessing(true);
+          // TODO: Send audio to agent
+          // For now, just log it
+          console.log("[AgentInput] Audio recorded:", audioData.size, "bytes");
+          setIsProcessing(false);
+        }
+      } catch (error) {
+        console.error("[AgentInput] Failed to stop recording:", error);
+        setIsRecording(false);
+        setIsProcessing(false);
+      }
+    } else {
+      // Start recording
+      try {
+        await audioRecorder.start();
+        setIsRecording(true);
+      } catch (error) {
+        console.error("[AgentInput] Failed to start recording:", error);
+      }
+    }
+  }
+
+  function handleModeChange(modeId: string) {
+    setAgentMode(agentId, modeId);
+  }
+
+  const hasText = userInput.trim().length > 0;
+
+  return (
+    <View style={styles.container}>
+      {/* Text input */}
+      <TextInput
+        value={userInput}
+        onChangeText={setUserInput}
+        placeholder="Message agent..."
+        placeholderTextColor={theme.colors.mutedForeground}
+        style={styles.textInput}
+        multiline
+        editable={!isRecording && ws.isConnected}
+      />
+
+      {/* Controls row */}
+      <View style={styles.controlsRow}>
+        {/* Mode badge - only show if agent has modes */}
+        {agent && 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>
+        )}
+
+        {/* Buttons */}
+        <View style={styles.buttonRow}>
+          {hasText ? (
+            // Send button when text is entered
+            <Pressable
+              onPress={handleSendMessage}
+              disabled={!ws.isConnected || isProcessing}
+              style={[
+                styles.sendButton,
+                (!ws.isConnected || isProcessing) && styles.buttonDisabled,
+              ]}
+            >
+              <ArrowUp size={20} color="white" />
+            </Pressable>
+          ) : (
+            // Voice and Realtime buttons when no text
+            <>
+              {/* Voice recording button */}
+              <Pressable
+                onPress={handleVoicePress}
+                disabled={!ws.isConnected}
+                style={[
+                  styles.voiceButton,
+                  !ws.isConnected && styles.buttonDisabled,
+                  isRecording && styles.voiceButtonRecording,
+                ]}
+              >
+                {isRecording ? (
+                  <Square size={14} color="white" fill="white" />
+                ) : (
+                  <Mic size={20} color={theme.colors.foreground} />
+                )}
+              </Pressable>
+
+              {/* Realtime button */}
+              <Pressable
+                onPress={startRealtime}
+                disabled={!ws.isConnected}
+                style={[
+                  styles.realtimeButton,
+                  !ws.isConnected && styles.buttonDisabled,
+                ]}
+              >
+                <AudioLines size={20} color={theme.colors.background} />
+              </Pressable>
+            </>
+          )}
+        </View>
+      </View>
+
+      {/* Mode selector modal */}
+      <ModeSelectorModal
+        visible={showModeSelector}
+        agent={agent || null}
+        onModeChange={handleModeChange}
+        onClose={() => setShowModeSelector(false)}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    padding: theme.spacing[4],
+    gap: theme.spacing[3],
+  },
+  textInput: {
+    minHeight: 44,
+    maxHeight: 120,
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+    backgroundColor: theme.colors.muted,
+    borderRadius: theme.borderRadius.lg,
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+  },
+  controlsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing[2],
+  },
+  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",
+  },
+  buttonRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    marginLeft: "auto",
+  },
+  sendButton: {
+    width: 40,
+    height: 40,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.palette.blue[600],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  voiceButton: {
+    width: 40,
+    height: 40,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  voiceButtonRecording: {
+    backgroundColor: theme.colors.destructive,
+  },
+  realtimeButton: {
+    width: 40,
+    height: 40,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.accentForeground,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+}));

packages/app/src/components/agent-list.tsx

@@ -0,0 +1,148 @@
+import { View, Text, Pressable, ScrollView } from "react-native";
+import { router } from "expo-router";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import type { Agent } from "@/contexts/session-context";
+import type { AgentStatus } from "@server/server/acp/types";
+
+interface AgentListProps {
+  agents: Map<string, Agent>;
+}
+
+function getStatusColor(status: AgentStatus): string {
+  switch (status) {
+    case "initializing":
+      return "#FFA500";
+    case "ready":
+      return "#2563EB";
+    case "processing":
+      return "#FACC15";
+    case "completed":
+      return "#10B981";
+    case "failed":
+      return "#EF4444";
+    case "killed":
+      return "#6B7280";
+    default:
+      return "#6B7280";
+  }
+}
+
+function getStatusLabel(status: AgentStatus): string {
+  switch (status) {
+    case "initializing":
+      return "Initializing";
+    case "ready":
+      return "Ready";
+    case "processing":
+      return "Processing";
+    case "completed":
+      return "Completed";
+    case "failed":
+      return "Failed";
+    case "killed":
+      return "Killed";
+    default:
+      return "Unknown";
+  }
+}
+
+export function AgentList({ agents }: AgentListProps) {
+  const { theme } = useUnistyles();
+  const agentArray = Array.from(agents.values());
+
+  function handleAgentPress(agentId: string) {
+    router.push(`/agent/${agentId}`);
+  }
+
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      {agentArray.map((agent) => {
+        const statusColor = getStatusColor(agent.status);
+        const statusLabel = getStatusLabel(agent.status);
+
+        return (
+          <Pressable
+            key={agent.id}
+            style={styles.agentItem}
+            onPress={() => handleAgentPress(agent.id)}
+          >
+            <View style={styles.agentContent}>
+              <Text
+                style={styles.agentTitle}
+                numberOfLines={1}
+              >
+                {agent.title || "New Agent"}
+              </Text>
+
+              <View style={styles.directoryRow}>
+                <Text
+                  style={styles.agentDirectory}
+                  numberOfLines={1}
+                >
+                  {agent.cwd}
+                </Text>
+
+                <View style={styles.statusBadge}>
+                  <View
+                    style={[styles.statusDot, { backgroundColor: statusColor }]}
+                  />
+                  <Text style={[styles.statusText, { color: statusColor }]}>
+                    {statusLabel}
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    paddingHorizontal: theme.spacing[4],
+    paddingTop: theme.spacing[4],
+  },
+  agentItem: {
+    paddingVertical: theme.spacing[4],
+    paddingHorizontal: theme.spacing[4],
+    borderRadius: theme.borderRadius.lg,
+    marginBottom: theme.spacing[2],
+    backgroundColor: theme.colors.muted,
+  },
+  agentContent: {
+    flex: 1,
+  },
+  agentTitle: {
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.colors.foreground,
+    marginBottom: theme.spacing[1],
+  },
+  directoryRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  agentDirectory: {
+    flex: 1,
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.mutedForeground,
+  },
+  statusBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+  },
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: theme.borderRadius.full,
+  },
+  statusText: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+  },
+}));

packages/app/src/components/agent-sidebar.tsx

@@ -11,6 +11,7 @@ import Animated, {
   cancelAnimation,
   runOnJS,
   Easing,
+  type SharedValue,
 } from "react-native-reanimated";
 import type { AgentStatus } from "@server/server/acp/types";
 
@@ -28,7 +29,7 @@ interface AgentSidebarProps {
   onClose: () => void;
   onSelectAgent: (agentId: string) => void;
   onNewAgent: () => void;
-  edgeSwipeTranslateX?: Animated.SharedValue<number> | null;
+  edgeSwipeTranslateX?: SharedValue<number> | null;
 }
 
 function getStatusColor(status: AgentStatus): string {
@@ -50,6 +51,25 @@ function getStatusColor(status: AgentStatus): string {
   }
 }
 
+function getStatusLabel(status: AgentStatus): string {
+  switch (status) {
+    case "initializing":
+      return "Initializing";
+    case "ready":
+      return "Ready";
+    case "processing":
+      return "Processing";
+    case "completed":
+      return "Completed";
+    case "failed":
+      return "Failed";
+    case "killed":
+      return "Killed";
+    default:
+      return "Unknown";
+  }
+}
+
 export function AgentSidebar({
   isOpen,
   agents,
@@ -202,6 +222,7 @@ export function AgentSidebar({
             {agents.map((agent) => {
               const isActive = agent.id === activeAgentId;
               const statusColor = getStatusColor(agent.status);
+              const statusLabel = getStatusLabel(agent.status);
 
               return (
                 <Pressable
@@ -212,31 +233,33 @@ export function AgentSidebar({
                   ]}
                   onPress={() => handleAgentSelect(agent.id)}
                 >
-                  <View style={styles.agentInfo}>
+                  <View style={styles.agentContent}>
-                    {/* Status Indicator */}
+                    <Text
-                    <View
+                      style={[
-                      style={[styles.statusDot, { backgroundColor: statusColor }]}
+                        styles.agentTitle,
-                    />
+                        { color: theme.colors.foreground },
+                      ]}
+                      numberOfLines={1}
+                    >
+                      {agent.title || "New Agent"}
+                    </Text>
 
-                    {/* Agent Title */}
+                    <View style={styles.directoryRow}>
-                    <View style={styles.agentContent}>
-                      <Text
-                        style={[
-                          styles.agentTitle,
-                          { color: theme.colors.foreground },
-                        ]}
-                        numberOfLines={1}
-                      >
-                        {agent.title || "New Agent"}
-                      </Text>
-
-                      {/* Agent Directory */}
                       <Text
                         style={[styles.agentDirectory, { color: theme.colors.mutedForeground }]}
                         numberOfLines={1}
                       >
                         {agent.cwd}
                       </Text>
+
+                      <View style={styles.statusBadge}>
+                        <View
+                          style={[styles.statusDot, { backgroundColor: statusColor }]}
+                        />
+                        <Text style={[styles.statusText, { color: statusColor }]}>
+                          {statusLabel}
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </Pressable>
@@ -308,16 +331,6 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     marginBottom: 4,
   },
-  agentInfo: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-  },
-  statusDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-  },
   agentContent: {
     flex: 1,
   },
@@ -326,9 +339,29 @@ const styles = StyleSheet.create({
     fontWeight: "500",
     marginBottom: 2,
   },
+  directoryRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
   agentDirectory: {
+    flex: 1,
     fontSize: 12,
   },
+  statusBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  statusText: {
+    fontSize: 11,
+    fontWeight: "500",
+  },
   emptyState: {
     paddingVertical: 32,
     alignItems: "center",

packages/app/src/components/empty-state.tsx

@@ -0,0 +1,59 @@
+import { View, Text, Pressable } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Plus } from "lucide-react-native";
+
+interface EmptyStateProps {
+  onCreateAgent: () => void;
+}
+
+export function EmptyState({ onCreateAgent }: EmptyStateProps) {
+  const { theme } = useUnistyles();
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Hammock</Text>
+      <Text style={styles.subtitle}>
+        What would you like to work on?
+      </Text>
+      <Pressable onPress={onCreateAgent} style={styles.button}>
+        <Plus size={20} color={theme.colors.foreground} />
+        <Text style={styles.buttonText}>New agent</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.spacing[6],
+  },
+  title: {
+    fontSize: theme.fontSize["4xl"],
+    fontWeight: "700",
+    color: theme.colors.foreground,
+    marginBottom: theme.spacing[2],
+  },
+  subtitle: {
+    fontSize: theme.fontSize.lg,
+    color: theme.colors.mutedForeground,
+    textAlign: "center",
+    marginBottom: theme.spacing[8],
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    paddingVertical: theme.spacing[3],
+    paddingHorizontal: theme.spacing[6],
+    backgroundColor: theme.colors.primary,
+    borderRadius: theme.borderRadius.lg,
+  },
+  buttonText: {
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.colors.primaryForeground,
+  },
+}));

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

@@ -0,0 +1,86 @@
+import { View, Pressable } 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 { RealtimeControls } from "./realtime-controls";
+import { AgentInputArea } from "./agent-input-area";
+
+interface GlobalFooterProps {
+  agentId?: string;
+}
+
+export function GlobalFooter({ agentId }: GlobalFooterProps) {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+  const pathname = usePathname();
+  const { isRealtimeMode, startRealtime } = useRealtime();
+  const { ws } = useSession();
+
+  // Determine current screen type
+  const isAgentScreen = pathname?.startsWith("/agent/");
+  const isOrchestratorScreen = pathname === "/orchestrator";
+  const isHomeScreen = pathname === "/";
+
+  // If realtime is active, always show realtime controls
+  if (isRealtimeMode) {
+    return (
+      <View style={[styles.container, { paddingBottom: insets.bottom }]}>
+        <RealtimeControls />
+      </View>
+    );
+  }
+
+  // If on agent screen, show full input area
+  if (isAgentScreen && agentId) {
+    return (
+      <View style={[styles.container, { paddingBottom: insets.bottom }]}>
+        <AgentInputArea agentId={agentId} />
+      </View>
+    );
+  }
+
+  // For home and orchestrator screens, show centered realtime button
+  return (
+    <View style={[styles.container, { paddingBottom: insets.bottom }]}>
+      <View style={styles.centeredButtonContainer}>
+        <Pressable
+          onPress={startRealtime}
+          disabled={!ws.isConnected}
+          style={[
+            styles.centeredRealtimeButton,
+            !ws.isConnected && styles.buttonDisabled,
+          ]}
+        >
+          <AudioLines size={24} color="white" />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    backgroundColor: theme.colors.background,
+    borderTopWidth: theme.borderWidth[1],
+    borderTopColor: theme.colors.border,
+  },
+  centeredButtonContainer: {
+    padding: theme.spacing[6],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  centeredRealtimeButton: {
+    width: 56,
+    height: 56,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.palette.blue[600],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+}));

packages/app/src/components/headers/back-header.tsx

@@ -0,0 +1,76 @@
+import { View, Pressable, Text } from "react-native";
+import { router } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { ArrowLeft } from "lucide-react-native";
+
+interface BackHeaderProps {
+  title?: string;
+}
+
+export function BackHeader({ title }: BackHeaderProps) {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={styles.header}>
+      <View style={{ paddingTop: insets.top + 12 }}>
+        <View style={styles.headerRow}>
+          {/* Left side - Back button */}
+          <View style={styles.headerLeft}>
+            <Pressable
+              onPress={() => router.back()}
+              style={styles.backButton}
+            >
+              <ArrowLeft size={20} color={theme.colors.foreground} />
+            </Pressable>
+            {title && (
+              <Text style={styles.title} numberOfLines={1}>
+                {title}
+              </Text>
+            )}
+          </View>
+
+          {/* Right side - Empty for now */}
+          <View style={styles.headerRight} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  header: {
+    backgroundColor: theme.colors.background,
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.spacing[3],
+    paddingBottom: theme.spacing[2],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.border,
+  },
+  headerLeft: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+  },
+  headerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  backButton: {
+    padding: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+  },
+  title: {
+    flex: 1,
+    fontSize: theme.fontSize.lg,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.colors.foreground,
+  },
+}));

packages/app/src/components/headers/home-header.tsx

@@ -0,0 +1,79 @@
+import { View, Pressable } from "react-native";
+import { router } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Settings, MessageSquare, Plus } from "lucide-react-native";
+
+interface HomeHeaderProps {
+  onCreateAgent: () => void;
+}
+
+export function HomeHeader({ onCreateAgent }: HomeHeaderProps) {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={styles.header}>
+      <View style={{ paddingTop: insets.top + 12 }}>
+        <View style={styles.headerRow}>
+          {/* Left side - Settings */}
+          <View style={styles.headerLeft}>
+            <Pressable
+              onPress={() => router.push("/settings")}
+              style={styles.iconButton}
+            >
+              <Settings size={20} color={theme.colors.foreground} />
+            </Pressable>
+          </View>
+
+          {/* Right side - Activity and New Agent */}
+          <View style={styles.headerRight}>
+            <Pressable
+              onPress={() => router.push("/orchestrator")}
+              style={styles.iconButton}
+            >
+              <MessageSquare size={20} color={theme.colors.foreground} />
+            </Pressable>
+            <Pressable
+              onPress={onCreateAgent}
+              style={styles.iconButton}
+            >
+              <Plus size={20} color={theme.colors.foreground} />
+            </Pressable>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  header: {
+    backgroundColor: theme.colors.background,
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.spacing[3],
+    paddingBottom: theme.spacing[2],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.border,
+  },
+  headerLeft: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  headerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  iconButton: {
+    padding: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.muted,
+  },
+}));

packages/app/src/components/mode-selector-modal.tsx

@@ -0,0 +1,110 @@
+import { View, Text, Modal, Pressable } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import type { Agent } from "@/contexts/session-context";
+
+interface ModeSelectorModalProps {
+  visible: boolean;
+  agent: Agent | null;
+  onModeChange: (modeId: string) => void;
+  onClose: () => void;
+}
+
+export function ModeSelectorModal({
+  visible,
+  agent,
+  onModeChange,
+  onClose,
+}: ModeSelectorModalProps) {
+  const { theme } = useUnistyles();
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      transparent={true}
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.modalOverlay} onPress={onClose}>
+        <View style={styles.modeSelectorContent}>
+          {agent?.availableModes?.map((mode) => {
+            const isActive = mode.id === agent.currentModeId;
+            return (
+              <Pressable
+                key={mode.id}
+                onPress={() => {
+                  onModeChange(mode.id);
+                  onClose();
+                }}
+                style={[
+                  styles.modeItem,
+                  isActive && styles.modeItemActive,
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.modeName,
+                    isActive && styles.modeNameActive,
+                  ]}
+                >
+                  {mode.name}
+                </Text>
+                {mode.description && (
+                  <Text
+                    style={[
+                      styles.modeDescription,
+                      isActive && styles.modeDescriptionActive,
+                    ]}
+                  >
+                    {mode.description}
+                  </Text>
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      </Pressable>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modeSelectorContent: {
+    backgroundColor: theme.colors.card,
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing[4],
+    minWidth: 280,
+    maxWidth: 320,
+  },
+  modeItem: {
+    padding: theme.spacing[4],
+    borderRadius: theme.borderRadius.md,
+    marginBottom: theme.spacing[2],
+    backgroundColor: theme.colors.muted,
+  },
+  modeItemActive: {
+    backgroundColor: theme.colors.primary,
+  },
+  modeName: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.semibold,
+    marginBottom: theme.spacing[1],
+  },
+  modeNameActive: {
+    color: theme.colors.primaryForeground,
+  },
+  modeDescription: {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.sm,
+  },
+  modeDescriptionActive: {
+    color: theme.colors.primaryForeground,
+    opacity: 0.8,
+  },
+}));

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

@@ -0,0 +1,117 @@
+import { View, ScrollView } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { forwardRef } from "react";
+import {
+  UserMessage,
+  AssistantMessage,
+  ActivityLog,
+  ToolCall,
+} from "@/components/message";
+import type { MessageEntry } from "@/contexts/session-context";
+
+interface OrchestratorMessagesViewProps {
+  messages: MessageEntry[];
+  currentAssistantMessage: string;
+  onArtifactClick: (artifactId: string) => void;
+}
+
+export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessagesViewProps>(
+  function OrchestratorMessagesView({ messages, currentAssistantMessage, onArtifactClick }, ref) {
+    const { theme } = useUnistyles();
+
+    return (
+      <ScrollView
+        ref={ref}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
+      >
+        {messages.map((msg) => {
+          if (msg.type === "user") {
+            return (
+              <UserMessage
+                key={msg.id}
+                message={msg.message}
+                timestamp={msg.timestamp}
+              />
+            );
+          }
+
+          if (msg.type === "assistant") {
+            return (
+              <AssistantMessage
+                key={msg.id}
+                message={msg.message}
+                timestamp={msg.timestamp}
+              />
+            );
+          }
+
+          if (msg.type === "activity") {
+            return (
+              <ActivityLog
+                key={msg.id}
+                type={msg.activityType}
+                message={msg.message}
+                timestamp={msg.timestamp}
+                metadata={msg.metadata}
+                onArtifactClick={onArtifactClick}
+              />
+            );
+          }
+
+          if (msg.type === "artifact") {
+            return (
+              <ActivityLog
+                key={msg.id}
+                type="artifact"
+                message=""
+                timestamp={msg.timestamp}
+                artifactId={msg.artifactId}
+                artifactType={msg.artifactType}
+                title={msg.title}
+                onArtifactClick={onArtifactClick}
+              />
+            );
+          }
+
+          if (msg.type === "tool_call") {
+            return (
+              <ToolCall
+                key={msg.id}
+                toolName={msg.toolName}
+                args={msg.args}
+                result={msg.result}
+                error={msg.error}
+                status={msg.status}
+              />
+            );
+          }
+
+          return null;
+        })}
+
+        {/* Streaming assistant message */}
+        {currentAssistantMessage && (
+          <AssistantMessage
+            message={currentAssistantMessage}
+            timestamp={Date.now()}
+            isStreaming={true}
+          />
+        )}
+      </ScrollView>
+    );
+  }
+);
+
+const styles = StyleSheet.create((theme) => ({
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: theme.spacing[4],
+    paddingTop: theme.spacing[4],
+    paddingBottom: theme.spacing[6],
+  },
+}));

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

@@ -0,0 +1,110 @@
+import { View, Text, Pressable } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { MicOff, Square } from "lucide-react-native";
+import { VolumeMeter } from "./volume-meter";
+import { useRealtime } from "@/contexts/realtime-context";
+
+export function RealtimeControls() {
+  const { theme } = useUnistyles();
+  const {
+    volume,
+    isMuted,
+    isDetecting,
+    isSpeaking,
+    segmentDuration,
+    stopRealtime,
+    toggleMute,
+  } = useRealtime();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.volumeContainer}>
+        <VolumeMeter
+          volume={volume}
+          isMuted={isMuted}
+          isDetecting={isDetecting}
+          isSpeaking={isSpeaking}
+        />
+        {/* Debug timer */}
+        {(isDetecting || isSpeaking) && (
+          <Text style={styles.debugTimer}>
+            {(segmentDuration / 1000).toFixed(1)}s
+          </Text>
+        )}
+      </View>
+      <View style={styles.buttons}>
+        {/* Mute button */}
+        <Pressable
+          onPress={toggleMute}
+          style={[
+            styles.muteButton,
+            isMuted && styles.muteButtonActive,
+          ]}
+        >
+          <MicOff
+            size={20}
+            color={
+              isMuted
+                ? theme.colors.background
+                : theme.colors.foreground
+            }
+          />
+        </Pressable>
+        {/* Stop button */}
+        <Pressable
+          onPress={stopRealtime}
+          style={styles.stopButton}
+        >
+          <Square size={18} color="white" fill="white" />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    minHeight: 200,
+    padding: theme.spacing[4],
+  },
+  volumeContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttons: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[3],
+    paddingTop: theme.spacing[4],
+  },
+  muteButton: {
+    width: 48,
+    height: 48,
+    borderRadius: theme.borderRadius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.colors.muted,
+    borderWidth: theme.borderWidth[2],
+    borderColor: theme.colors.border,
+  },
+  muteButtonActive: {
+    backgroundColor: theme.colors.palette.red[500],
+    borderColor: theme.colors.palette.red[600],
+  },
+  stopButton: {
+    width: 48,
+    height: 48,
+    borderRadius: theme.borderRadius.full,
+    alignItems: "center",
+    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/contexts/realtime-context.tsx

@@ -0,0 +1,144 @@
+import { createContext, useContext, useState, ReactNode, useCallback } from "react";
+import { useSpeechmaticsAudio } from "@/hooks/use-speechmatics-audio";
+import { useSession } from "./session-context";
+import { generateMessageId } from "@/types/stream";
+import type { WSInboundMessage } from "@server/server/messages";
+
+interface RealtimeContextValue {
+  isRealtimeMode: boolean;
+  volume: number;
+  isMuted: boolean;
+  isDetecting: boolean;
+  isSpeaking: boolean;
+  segmentDuration: number;
+  startRealtime: () => Promise<void>;
+  stopRealtime: () => Promise<void>;
+  toggleMute: () => void;
+}
+
+const RealtimeContext = createContext<RealtimeContextValue | null>(null);
+
+export function useRealtime() {
+  const context = useContext(RealtimeContext);
+  if (!context) {
+    throw new Error("useRealtime must be used within RealtimeProvider");
+  }
+  return context;
+}
+
+interface RealtimeProviderProps {
+  children: ReactNode;
+}
+
+export function RealtimeProvider({ children }: RealtimeProviderProps) {
+  const { ws, audioPlayer, isPlayingAudio, setMessages } = useSession();
+  const [isRealtimeMode, setIsRealtimeMode] = useState(false);
+
+  const realtimeAudio = useSpeechmaticsAudio({
+    onSpeechStart: () => {
+      console.log("[Realtime] Speech detected");
+      // Stop audio playback if playing
+      if (isPlayingAudio) {
+        audioPlayer.stop();
+      }
+    },
+    onSpeechEnd: () => {
+      console.log("[Realtime] Speech ended");
+    },
+    onAudioSegment: (base64Audio: string) => {
+      console.log("[Realtime] Sending audio segment, length:", base64Audio.length);
+
+      // Send audio segment to server (realtime always goes to orchestrator)
+      try {
+        ws.send({
+          type: "session",
+          message: {
+            type: "realtime_audio_chunk",
+            audio: base64Audio,
+            format: "audio/wav",
+            isLast: true, // Complete segment
+          },
+        });
+      } catch (error) {
+        console.error("[Realtime] Failed to send audio segment:", error);
+      }
+    },
+    onError: (error) => {
+      console.error("[Realtime] Audio error:", error);
+      setMessages((prev) => [
+        ...prev,
+        {
+          type: "activity",
+          id: generateMessageId(),
+          timestamp: Date.now(),
+          activityType: "error",
+          message: `Realtime audio error: ${error.message}`,
+        },
+      ]);
+    },
+    volumeThreshold: 0.3,
+    silenceDuration: 2000,
+    speechConfirmationDuration: 300,
+    detectionGracePeriod: 200,
+  });
+
+  const startRealtime = useCallback(async () => {
+    try {
+      await realtimeAudio.start();
+      setIsRealtimeMode(true);
+      console.log("[Realtime] Mode enabled");
+
+      // Notify server
+      const modeMessage: WSInboundMessage = {
+        type: "session",
+        message: {
+          type: "set_realtime_mode",
+          enabled: true,
+        },
+      };
+      ws.send(modeMessage);
+    } catch (error: any) {
+      console.error("[Realtime] Failed to start:", error);
+      throw error;
+    }
+  }, [realtimeAudio, ws]);
+
+  const stopRealtime = useCallback(async () => {
+    try {
+      await realtimeAudio.stop();
+      setIsRealtimeMode(false);
+      console.log("[Realtime] Mode disabled");
+
+      // Notify server
+      const modeMessage: WSInboundMessage = {
+        type: "session",
+        message: {
+          type: "set_realtime_mode",
+          enabled: false,
+        },
+      };
+      ws.send(modeMessage);
+    } catch (error: any) {
+      console.error("[Realtime] Failed to stop:", error);
+      throw error;
+    }
+  }, [realtimeAudio, ws]);
+
+  const value: RealtimeContextValue = {
+    isRealtimeMode,
+    volume: realtimeAudio.volume,
+    isMuted: realtimeAudio.isMuted,
+    isDetecting: realtimeAudio.isDetecting,
+    isSpeaking: realtimeAudio.isSpeaking,
+    segmentDuration: realtimeAudio.segmentDuration,
+    startRealtime,
+    stopRealtime,
+    toggleMute: realtimeAudio.toggleMute,
+  };
+
+  return (
+    <RealtimeContext.Provider value={value}>
+      {children}
+    </RealtimeContext.Provider>
+  );
+}

packages/app/src/contexts/session-context.tsx

@@ -0,0 +1,391 @@
+import { createContext, useContext, useState, useRef, ReactNode, useCallback, useEffect } from "react";
+import { useWebSocket, type UseWebSocketReturn } from "@/hooks/use-websocket";
+import { useAudioPlayer } from "@/hooks/use-audio-player";
+import { reduceStreamUpdate, generateMessageId, type StreamItem } from "@/types/stream";
+import type {
+  ActivityLogPayload,
+  SessionInboundMessage,
+  WSInboundMessage,
+} from "@server/server/messages";
+import type { AgentStatus, AgentUpdate, AgentNotification } from "@server/server/acp/types";
+import { parseSessionUpdate } from "@/types/agent-activity";
+import { ScrollView } from "react-native";
+
+export type MessageEntry =
+  | {
+      type: "user";
+      id: string;
+      timestamp: number;
+      message: string;
+    }
+  | {
+      type: "assistant";
+      id: string;
+      timestamp: number;
+      message: string;
+    }
+  | {
+      type: "activity";
+      id: string;
+      timestamp: number;
+      activityType: "system" | "info" | "success" | "error";
+      message: string;
+      metadata?: Record<string, unknown>;
+    }
+  | {
+      type: "artifact";
+      id: string;
+      timestamp: number;
+      artifactId: string;
+      artifactType: string;
+      title: string;
+    }
+  | {
+      type: "tool_call";
+      id: string;
+      timestamp: number;
+      toolName: string;
+      args: any;
+      result?: any;
+      error?: any;
+      status: "executing" | "completed" | "failed";
+    };
+
+export interface Agent {
+  id: string;
+  status: AgentStatus;
+  createdAt: Date;
+  type: "claude";
+  sessionId?: string;
+  error?: string;
+  currentModeId?: string;
+  availableModes?: Array<{
+    id: string;
+    name: string;
+    description?: string | null;
+  }>;
+  title?: string;
+  cwd: string;
+}
+
+export interface Command {
+  id: string;
+  name: string;
+  workingDirectory: string;
+  currentCommand: string;
+  isDead: boolean;
+  exitCode: number | null;
+}
+
+export interface PendingPermission {
+  agentId: string;
+  requestId: string;
+  sessionId: string;
+  toolCall: any;
+  options: Array<{
+    kind: string;
+    name: string;
+    optionId: string;
+  }>;
+}
+
+interface SessionContextValue {
+  // WebSocket
+  ws: UseWebSocketReturn;
+
+  // Audio
+  audioPlayer: ReturnType<typeof useAudioPlayer>;
+  isPlayingAudio: boolean;
+  setIsPlayingAudio: (playing: boolean) => void;
+
+  // Messages and stream state
+  messages: MessageEntry[];
+  setMessages: (messages: MessageEntry[] | ((prev: MessageEntry[]) => MessageEntry[])) => void;
+  currentAssistantMessage: string;
+  setCurrentAssistantMessage: (message: string) => void;
+  agentStreamState: Map<string, StreamItem[]>;
+  setAgentStreamState: (state: Map<string, StreamItem[]> | ((prev: Map<string, StreamItem[]>) => Map<string, StreamItem[]>)) => void;
+
+  // Agents and commands
+  agents: Map<string, Agent>;
+  setAgents: (agents: Map<string, Agent> | ((prev: Map<string, Agent>) => Map<string, Agent>)) => void;
+  commands: Map<string, Command>;
+  setCommands: (commands: Map<string, Command> | ((prev: Map<string, Command>) => Map<string, Command>)) => void;
+  agentUpdates: Map<string, AgentUpdate[]>;
+  setAgentUpdates: (updates: Map<string, AgentUpdate[]> | ((prev: Map<string, AgentUpdate[]>) => Map<string, AgentUpdate[]>)) => void;
+
+  // Permissions
+  pendingPermissions: Map<string, PendingPermission>;
+  setPendingPermissions: (perms: Map<string, PendingPermission> | ((prev: Map<string, PendingPermission>) => Map<string, PendingPermission>)) => void;
+
+  // Helpers
+  sendAgentMessage: (agentId: string, message: string) => void;
+  createAgent: (options: { cwd: string; autoStart?: boolean }) => void;
+  setAgentMode: (agentId: string, modeId: string) => void;
+  respondToPermission: (requestId: string, agentId: string, sessionId: string, selectedOptionIds: string[]) => void;
+}
+
+const SessionContext = createContext<SessionContextValue | null>(null);
+
+export function useSession() {
+  const context = useContext(SessionContext);
+  if (!context) {
+    throw new Error("useSession must be used within SessionProvider");
+  }
+  return context;
+}
+
+interface SessionProviderProps {
+  children: ReactNode;
+  serverUrl: string;
+}
+
+export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
+  const ws = useWebSocket(serverUrl);
+  const audioPlayer = useAudioPlayer();
+
+  const [isPlayingAudio, setIsPlayingAudio] = useState(false);
+  const [messages, setMessages] = useState<MessageEntry[]>([]);
+  const [currentAssistantMessage, setCurrentAssistantMessage] = useState("");
+  const [agentStreamState, setAgentStreamState] = useState<Map<string, StreamItem[]>>(new Map());
+
+  const [agents, setAgents] = useState<Map<string, Agent>>(new Map());
+  const [commands, setCommands] = useState<Map<string, Command>>(new Map());
+  const [agentUpdates, setAgentUpdates] = useState<Map<string, AgentUpdate[]>>(new Map());
+  const [pendingPermissions, setPendingPermissions] = useState<Map<string, PendingPermission>>(new Map());
+
+  // WebSocket message handlers
+  useEffect(() => {
+    // Session state - initial agents/commands
+    const unsubSessionState = ws.on("session_state", (message) => {
+      if (message.type !== "session_state") return;
+      const { agents: agentsList, commands: commandsList } = message.payload;
+
+      console.log("[Session] Session state:", agentsList.length, "agents,", commandsList.length, "commands");
+
+      setAgents(new Map(agentsList.map((a) => [a.id, {
+        ...a,
+        createdAt: new Date(a.createdAt),
+      } as Agent])));
+
+      setCommands(new Map(commandsList.map((c) => [c.id, c as Command])));
+    });
+
+    // Agent created
+    const unsubAgentCreated = ws.on("agent_created", (message) => {
+      if (message.type !== "agent_created") return;
+      const { agentId, status, type, currentModeId, availableModes, title, cwd } = message.payload;
+
+      console.log("[Session] Agent created:", agentId);
+
+      const agent: Agent = {
+        id: agentId,
+        status: status as AgentStatus,
+        type,
+        createdAt: new Date(),
+        title,
+        cwd,
+        currentModeId,
+        availableModes,
+      };
+
+      setAgents((prev) => new Map(prev).set(agentId, agent));
+      setAgentStreamState((prev) => new Map(prev).set(agentId, []));
+    });
+
+    // Agent status update (mode changes, title changes, etc.)
+    const unsubAgentStatus = ws.on("agent_status", (message) => {
+      if (message.type !== "agent_status") return;
+      const { agentId, info } = message.payload;
+
+      console.log("[Session] Agent status update:", agentId, "mode:", info.currentModeId);
+
+      setAgents((prev) => {
+        const existingAgent = prev.get(agentId);
+        if (!existingAgent) return prev;
+
+        const updatedAgent: Agent = {
+          ...existingAgent,
+          status: info.status as AgentStatus,
+          sessionId: info.sessionId,
+          error: info.error,
+          currentModeId: info.currentModeId,
+          availableModes: info.availableModes,
+          title: info.title,
+          cwd: info.cwd,
+        };
+
+        return new Map(prev).set(agentId, updatedAgent);
+      });
+    });
+
+    // Agent update
+    const unsubAgentUpdate = ws.on("agent_update", (message) => {
+      if (message.type !== "agent_update") return;
+      const { agentId, notification } = message.payload;
+
+      const update: AgentUpdate = {
+        agentId,
+        timestamp: new Date(),
+        notification,
+      };
+
+      setAgentUpdates((prev) => {
+        const agentHistory = prev.get(agentId) || [];
+        return new Map(prev).set(agentId, [...agentHistory, update]);
+      });
+
+      // Update stream state using reducer
+      setAgentStreamState((prev) => {
+        const currentStream = prev.get(agentId) || [];
+        const newStream = reduceStreamUpdate(currentStream, notification, new Date());
+        return new Map(prev).set(agentId, newStream);
+      });
+    });
+
+    // Permission request
+    const unsubPermissionRequest = ws.on("agent_permission_request", (message) => {
+      if (message.type !== "agent_permission_request") return;
+      const { agentId, requestId, sessionId, toolCall, options } = message.payload;
+
+      console.log("[Session] Permission request:", requestId, "for agent:", agentId);
+
+      setPendingPermissions((prev) => new Map(prev).set(requestId, {
+        agentId,
+        requestId,
+        sessionId,
+        toolCall,
+        options,
+      }));
+    });
+
+    return () => {
+      unsubSessionState();
+      unsubAgentCreated();
+      unsubAgentStatus();
+      unsubAgentUpdate();
+      unsubPermissionRequest();
+    };
+  }, [ws]);
+
+  const sendAgentMessage = useCallback((agentId: string, message: string) => {
+    // Generate unique message ID for deduplication
+    const messageId = generateMessageId();
+
+    // Optimistically add user message to stream
+    setAgentStreamState((prev) => {
+      const currentStream = prev.get(agentId) || [];
+
+      // Create AgentNotification structure that matches server format
+      const notification: AgentNotification = {
+        type: 'session',
+        notification: {
+          sessionId: '',
+          update: {
+            sessionUpdate: "user_message_chunk",
+            content: { type: 'text', text: message },
+            messageId,
+          },
+        },
+      };
+
+      // Use reduceStreamUpdate to properly create the StreamItem
+      const newStream = reduceStreamUpdate(currentStream, notification, new Date());
+
+      const updated = new Map(prev);
+      updated.set(agentId, newStream);
+      return updated;
+    });
+
+    // Send to agent with messageId
+    const msg: WSInboundMessage = {
+      type: "session",
+      message: {
+        type: "send_agent_message",
+        agentId,
+        text: message,
+        messageId,
+      },
+    };
+    ws.send(msg);
+  }, [ws]);
+
+  const createAgent = useCallback((options: { cwd: string; autoStart?: boolean }) => {
+    const msg: WSInboundMessage = {
+      type: "session",
+      message: {
+        type: "create_agent_request",
+        ...options,
+      },
+    };
+    ws.send(msg);
+  }, [ws]);
+
+  const setAgentMode = useCallback((agentId: string, modeId: string) => {
+    const msg: WSInboundMessage = {
+      type: "session",
+      message: {
+        type: "set_agent_mode",
+        agentId,
+        modeId,
+      },
+    };
+    ws.send(msg);
+  }, [ws]);
+
+  const respondToPermission = useCallback((
+    requestId: string,
+    agentId: string,
+    sessionId: string,
+    selectedOptionIds: string[]
+  ) => {
+    const msg: WSInboundMessage = {
+      type: "session",
+      message: {
+        type: "agent_permission_response",
+        agentId,
+        requestId,
+        optionId: selectedOptionIds[0],
+      },
+    };
+    ws.send(msg);
+
+    // Remove from pending
+    setPendingPermissions((prev) => {
+      const next = new Map(prev);
+      next.delete(requestId);
+      return next;
+    });
+  }, [ws]);
+
+  const value: SessionContextValue = {
+    ws,
+    audioPlayer,
+    isPlayingAudio,
+    setIsPlayingAudio,
+    messages,
+    setMessages,
+    currentAssistantMessage,
+    setCurrentAssistantMessage,
+    agentStreamState,
+    setAgentStreamState,
+    agents,
+    setAgents,
+    commands,
+    setCommands,
+    agentUpdates,
+    setAgentUpdates,
+    pendingPermissions,
+    setPendingPermissions,
+    sendAgentMessage,
+    createAgent,
+    setAgentMode,
+    respondToPermission,
+  };
+
+  return (
+    <SessionContext.Provider value={value}>
+      {children}
+    </SessionContext.Provider>
+  );
+}

packages/app/src/types/stream.ts

@@ -1,4 +1,4 @@
-import type { SessionNotification } from '@agentclientprotocol/sdk';
+import type { AgentNotification } from '@server/server/acp/types';
 
 /**
  * Simple hash function for deterministic ID generation
@@ -147,10 +147,16 @@ type ParsedNotification =
   | null;
 
 /**
- * Parse SessionNotification into typed ParsedNotification
+ * Parse AgentNotification into typed ParsedNotification
+ * Only processes session notifications, ignoring permission and status notifications
  */
-function parseNotification(notification: SessionNotification | any): ParsedNotification {
+function parseNotification(notification: AgentNotification): ParsedNotification {
-  const update = (notification as any).update;
+  // Only process session notifications (discriminated union)
+  if (notification.type !== 'session') {
+    return null;
+  }
+
+  const update = notification.notification.update;
 
   if (!update || !update.sessionUpdate) {
     return null;
@@ -159,26 +165,38 @@ function parseNotification(notification: SessionNotification | any): ParsedNotif
   const kind = update.sessionUpdate;
 
   switch (kind) {
-    case 'user_message_chunk':
+    case 'user_message_chunk': {
+      const content = update.content;
+      const text = content && content.type === 'text' ? content.text : '';
+      const messageId = 'messageId' in update ? update.messageId : undefined;
       return {
         kind: 'user_message_chunk',
-        text: update.content?.text || '',
+        text,
-        messageId: update.messageId,
+        messageId,
       };
+    }
 
-    case 'agent_message_chunk':
+    case 'agent_message_chunk': {
+      const content = update.content;
+      const text = content && content.type === 'text' ? content.text : '';
+      const messageId = 'messageId' in update ? update.messageId : undefined;
       return {
         kind: 'agent_message_chunk',
-        text: update.content?.text || '',
+        text,
-        messageId: update.messageId,
+        messageId,
       };
+    }
 
-    case 'agent_thought_chunk':
+    case 'agent_thought_chunk': {
+      const content = update.content;
+      const text = content && content.type === 'text' ? content.text : '';
+      const messageId = 'messageId' in update ? update.messageId : undefined;
       return {
         kind: 'agent_thought_chunk',
-        text: update.content?.text || '',
+        text,
-        messageId: update.messageId,
+        messageId,
       };
+    }
 
     case 'tool_call':
       return {
@@ -243,7 +261,7 @@ function parseNotification(notification: SessionNotification | any): ParsedNotif
  */
 export function reduceStreamUpdate(
   state: StreamItem[],
-  notification: SessionNotification | any,
+  notification: AgentNotification,
   timestamp: Date
 ): StreamItem[] {
   const parsed = parseNotification(notification);
@@ -407,7 +425,7 @@ export function reduceStreamUpdate(
  * Hydrate stream state from batch of notifications
  */
 export function hydrateStreamState(
-  notifications: Array<{ timestamp: Date; notification: SessionNotification }>
+  notifications: Array<{ timestamp: Date; notification: AgentNotification }>
 ): StreamItem[] {
   return notifications.reduce(
     (state, { notification, timestamp }) => reduceStreamUpdate(state, notification, timestamp),

packages/server/src/server/acp/types.ts

@@ -2,14 +2,17 @@ import type { SessionNotification, RequestPermissionRequest } from "@agentclient
 
 /**
  * Extended update types with messageId for proper deduplication
+ * messageId is optional since some sources may not provide it
  */
-type AgentMessageChunkWithId = Extract<SessionNotification['update'], { sessionUpdate: 'agent_message_chunk' }> & { messageId: string };
+type UserMessageChunkWithId = Extract<SessionNotification['update'], { sessionUpdate: 'user_message_chunk' }> & { messageId?: string };
-type AgentThoughtChunkWithId = Extract<SessionNotification['update'], { sessionUpdate: 'agent_thought_chunk' }> & { messageId: string };
+type AgentMessageChunkWithId = Extract<SessionNotification['update'], { sessionUpdate: 'agent_message_chunk' }> & { messageId?: string };
+type AgentThoughtChunkWithId = Extract<SessionNotification['update'], { sessionUpdate: 'agent_thought_chunk' }> & { messageId?: string };
 
 export type EnrichedSessionUpdate =
+  | UserMessageChunkWithId
   | AgentMessageChunkWithId
   | AgentThoughtChunkWithId
-  | Exclude<SessionNotification['update'], { sessionUpdate: 'agent_message_chunk' | 'agent_thought_chunk' }>;
+  | Exclude<SessionNotification['update'], { sessionUpdate: 'user_message_chunk' | 'agent_message_chunk' | 'agent_thought_chunk' }>;
 
 export interface EnrichedSessionNotification extends Omit<SessionNotification, 'update'> {
   update: EnrichedSessionUpdate;

packages/server/src/server/messages.ts

@@ -196,7 +196,8 @@ export const AgentUpdateMessageSchema = z.object({
   payload: z.object({
     agentId: z.string(),
     timestamp: z.date(),
-    notification: z.any(), // SessionNotification from ACP - complex type, using any for simplicity
+    // Runtime validation with z.any(), TypeScript enforces AgentNotification type
+    notification: z.any(),
   }),
 });