fix: migrate to @boudra/expo-two-way-audio and add tool call details bottom sheet

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

@@ -1,12 +1,14 @@
 import { View, ScrollView } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { forwardRef } from "react";
+import { forwardRef, useRef, useState } from "react";
+import { BottomSheetModal } from "@gorhom/bottom-sheet";
 import {
   UserMessage,
   AssistantMessage,
   ActivityLog,
   ToolCall,
 } from "@/components/message";
+import { ToolCallBottomSheet } from "./tool-call-bottom-sheet";
 import type { MessageEntry } from "@/contexts/session-context";
 
 interface OrchestratorMessagesViewProps {
@@ -18,15 +20,35 @@ interface OrchestratorMessagesViewProps {
 export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessagesViewProps>(
   function OrchestratorMessagesView({ messages, currentAssistantMessage, onArtifactClick }, ref) {
     const { theme } = useUnistyles();
+    const bottomSheetRef = useRef<BottomSheetModal>(null);
+    const [selectedToolCall, setSelectedToolCall] = useState<{
+      toolName: string;
+      status: 'executing' | 'completed' | 'failed';
+      args: any;
+      result?: any;
+      error?: any;
+    } | null>(null);
+
+    function handleOpenToolCallDetails(toolCall: {
+      toolName: string;
+      status: 'executing' | 'completed' | 'failed';
+      args: any;
+      result?: any;
+      error?: any;
+    }) {
+      setSelectedToolCall(toolCall);
+      bottomSheetRef.current?.present();
+    }
 
     return (
-      <ScrollView
-        ref={ref}
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        keyboardShouldPersistTaps="handled"
-        keyboardDismissMode="on-drag"
-      >
+      <>
+        <ScrollView
+          ref={ref}
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag"
+        >
         {messages.map((msg) => {
           if (msg.type === "user") {
             return (
@@ -85,6 +107,13 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
                 result={msg.result}
                 error={msg.error}
                 status={msg.status}
+                onOpenDetails={() => handleOpenToolCallDetails({
+                  toolName: msg.toolName,
+                  status: msg.status,
+                  args: msg.args,
+                  result: msg.result,
+                  error: msg.error,
+                })}
               />
             );
           }
@@ -101,6 +130,16 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
           />
         )}
       </ScrollView>
+
+      <ToolCallBottomSheet
+        bottomSheetRef={bottomSheetRef}
+        toolName={selectedToolCall?.toolName}
+        status={selectedToolCall?.status}
+        args={selectedToolCall?.args}
+        result={selectedToolCall?.result}
+        error={selectedToolCall?.error}
+      />
+    </>
     );
   }
 );