clawdex-mobile 1.3.2 → 2.0.1

package/apps/mobile/src/hooks/useVoiceRecorder.ts

@@ -0,0 +1,264 @@
+import {
+  type AudioRecorder,
+  type RecordingOptions,
+  AudioQuality,
+  IOSOutputFormat,
+  requestRecordingPermissionsAsync,
+  setAudioModeAsync,
+  useAudioRecorder,
+} from 'expo-audio';
+import * as FileSystem from 'expo-file-system/legacy';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform } from 'react-native';
+
+export type VoiceState = 'idle' | 'recording' | 'transcribing';
+
+interface UseVoiceRecorderOptions {
+  transcribe: (
+    dataBase64: string,
+    prompt?: string,
+    options?: {
+      fileName?: string;
+      mimeType?: string;
+    }
+  ) => Promise<{ text: string }>;
+  composerContext?: string;
+  onTranscript: (text: string) => void;
+  onError: (message: string) => void;
+}
+
+const MIN_RECORDING_DURATION_MS = 1_000;
+const MAX_RECORDING_FILE_BYTES = 20 * 1024 * 1024;
+const MAX_RECORDING_FILE_MB = MAX_RECORDING_FILE_BYTES / (1024 * 1024);
+
+const RECORDING_OPTIONS: RecordingOptions = {
+  isMeteringEnabled: false,
+  extension: '.m4a',
+  sampleRate: 16_000,
+  numberOfChannels: 1,
+  bitRate: 256_000,
+  android: {
+    extension: '.m4a',
+    outputFormat: 'mpeg4',
+    audioEncoder: 'aac',
+    sampleRate: 16_000,
+  },
+  ios: {
+    extension: '.wav',
+    outputFormat: IOSOutputFormat.LINEARPCM,
+    audioQuality: AudioQuality.HIGH,
+    sampleRate: 16_000,
+    linearPCMBitDepth: 16,
+    linearPCMIsBigEndian: false,
+    linearPCMIsFloat: false,
+  },
+  web: {
+    mimeType: 'audio/webm',
+    bitsPerSecond: 256_000,
+  },
+};
+
+function estimateBase64DecodedSize(base64: string): number {
+  const payload = base64.split(',').pop()?.trim() ?? '';
+  if (!payload) {
+    return 0;
+  }
+
+  const padding = payload.endsWith('==') ? 2 : payload.endsWith('=') ? 1 : 0;
+  const blockCount = Math.ceil(payload.length / 4);
+  return Math.max(0, blockCount * 3 - padding);
+}
+
+function getTranscriptionUploadMetadata(): { fileName: string; mimeType: string } {
+  if (Platform.OS === 'ios') {
+    return { fileName: 'audio.wav', mimeType: 'audio/wav' };
+  }
+  if (Platform.OS === 'android') {
+    return { fileName: 'audio.m4a', mimeType: 'audio/mp4' };
+  }
+  return { fileName: 'audio.webm', mimeType: 'audio/webm' };
+}
+
+async function deleteRecordingFile(uri: string | null | undefined): Promise<void> {
+  const normalized = uri?.trim();
+  if (!normalized) {
+    return;
+  }
+  await FileSystem.deleteAsync(normalized, { idempotent: true }).catch(() => {});
+}
+
+function safeGetRecorderUri(recorder: AudioRecorder): string | null {
+  try {
+    return recorder.uri ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function safeIsRecording(recorder: AudioRecorder): boolean {
+  try {
+    return recorder.isRecording;
+  } catch {
+    return false;
+  }
+}
+
+async function safeStopRecorder(recorder: AudioRecorder): Promise<void> {
+  try {
+    await recorder.stop();
+  } catch {
+    // Ignore stale/released recorder objects and already-stopped recordings.
+  }
+}
+
+export function useVoiceRecorder({
+  transcribe,
+  composerContext,
+  onTranscript,
+  onError,
+}: UseVoiceRecorderOptions) {
+  const [voiceState, setVoiceState] = useState<VoiceState>('idle');
+  const recorder = useAudioRecorder(RECORDING_OPTIONS);
+  const startTimeRef = useRef<number>(0);
+  const recorderRef = useRef<AudioRecorder>(recorder);
+  recorderRef.current = recorder;
+
+  const startRecording = useCallback(async () => {
+    try {
+      const permission = await requestRecordingPermissionsAsync();
+      if (!permission.granted) {
+        onError('Microphone permission is required for voice input.');
+        return;
+      }
+
+      await setAudioModeAsync({
+        allowsRecording: true,
+        playsInSilentMode: true,
+      });
+
+      await recorderRef.current.prepareToRecordAsync();
+      recorderRef.current.record();
+      startTimeRef.current = Date.now();
+      setVoiceState('recording');
+    } catch (err) {
+      await setAudioModeAsync({
+        allowsRecording: false,
+      }).catch(() => {});
+      onError(`Failed to start recording: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }, [onError]);
+
+  const stopRecordingAndTranscribe = useCallback(async () => {
+    const currentRecorder = recorderRef.current;
+    if (!safeIsRecording(currentRecorder)) {
+      setVoiceState('idle');
+      return;
+    }
+
+    let recordingUriToClean: string | null = null;
+
+    try {
+      const elapsed = Date.now() - startTimeRef.current;
+      await safeStopRecorder(currentRecorder);
+
+      await setAudioModeAsync({
+        allowsRecording: false,
+      });
+
+      if (elapsed < MIN_RECORDING_DURATION_MS) {
+        onError('Recording too short — hold longer to record.');
+        setVoiceState('idle');
+        return;
+      }
+
+      const uri = safeGetRecorderUri(currentRecorder);
+      if (!uri) {
+        onError('Recording failed — no audio file produced.');
+        setVoiceState('idle');
+        return;
+      }
+      recordingUriToClean = uri;
+
+      const fileInfo = await FileSystem.getInfoAsync(uri);
+      if (!fileInfo.exists || fileInfo.isDirectory) {
+        onError('Recording failed — audio file is unavailable.');
+        setVoiceState('idle');
+        return;
+      }
+      if (fileInfo.size > MAX_RECORDING_FILE_BYTES) {
+        onError(`Recording too long — maximum size is ${String(MAX_RECORDING_FILE_MB)}MB.`);
+        setVoiceState('idle');
+        return;
+      }
+
+      setVoiceState('transcribing');
+
+      const base64 = await FileSystem.readAsStringAsync(uri, {
+        encoding: FileSystem.EncodingType.Base64,
+      });
+      if (estimateBase64DecodedSize(base64) > MAX_RECORDING_FILE_BYTES) {
+        onError(`Recording too long — maximum size is ${String(MAX_RECORDING_FILE_MB)}MB.`);
+        setVoiceState('idle');
+        return;
+      }
+
+      const prompt = composerContext?.trim() || undefined;
+      const result = await transcribe(base64, prompt, getTranscriptionUploadMetadata());
+
+      const text = result.text.trim();
+      if (text) {
+        onTranscript(text);
+      }
+    } catch (err) {
+      onError(
+        `Transcription failed: ${err instanceof Error ? err.message : String(err)}`
+      );
+    } finally {
+      await deleteRecordingFile(recordingUriToClean);
+      setVoiceState('idle');
+    }
+  }, [composerContext, onError, onTranscript, transcribe]);
+
+  const cancelRecording = useCallback(async () => {
+    const currentRecorder = recorderRef.current;
+    const recordingUri = safeGetRecorderUri(currentRecorder);
+    await safeStopRecorder(currentRecorder);
+
+    await setAudioModeAsync({
+      allowsRecording: false,
+    }).catch(() => {});
+    await deleteRecordingFile(recordingUri);
+
+    setVoiceState('idle');
+  }, []);
+
+  const toggleRecording = useCallback(() => {
+    if (voiceState === 'recording') {
+      void stopRecordingAndTranscribe();
+    } else if (voiceState === 'idle') {
+      void startRecording();
+    }
+  }, [voiceState, startRecording, stopRecordingAndTranscribe]);
+
+  useEffect(() => {
+    return () => {
+      const currentRecorder = recorderRef.current;
+      void (async () => {
+        const recordingUri = safeGetRecorderUri(currentRecorder);
+        await safeStopRecorder(currentRecorder);
+        await deleteRecordingFile(recordingUri);
+      })();
+      void setAudioModeAsync({
+        allowsRecording: false,
+      }).catch(() => {});
+    };
+  }, []);
+
+  return {
+    voiceState,
+    startRecording,
+    stopRecordingAndTranscribe,
+    cancelRecording,
+    toggleRecording,
+  };
+}

package/apps/mobile/src/navigation/DrawerContent.tsx

@@ -6,20 +6,22 @@ import {
   Modal,
   Pressable,
   RefreshControl,
-  SafeAreaView,
   SectionList,
   ScrollView,
+  type StyleProp,
   StyleSheet,
   Text,
+  type ViewStyle,
   View,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import type { HostBridgeApiClient } from '../api/client';
 import type { ChatSummary, RpcNotification } from '../api/types';
 import type { HostBridgeWsClient } from '../api/ws';
 import { BrandMark } from '../components/BrandMark';
 import { colors, spacing, typography } from '../theme';
 
-type Screen = 'Main' | 'Terminal' | 'Settings' | 'Privacy' | 'Terms';
+type Screen = 'Main' | 'Settings' | 'Privacy' | 'Terms';
 
 interface DrawerContentProps {
   api: HostBridgeApiClient;
@@ -319,9 +321,6 @@ export function DrawerContent({
             </Pressable>
           </View>
 
-          {/* Nav items */}
-          <NavItem icon="terminal-outline" label="Terminal" onPress={() => onNavigate('Terminal')} />
-
           {/* Chats section */}
           <View style={styles.sectionHeader}>
             <Text style={styles.sectionTitle}>Chats</Text>
@@ -423,6 +422,7 @@ export function DrawerContent({
             label="Settings"
             onPress={() => onNavigate('Settings')}
             style={styles.settingsItem}
+            pressableStyle={styles.footerNavItem}
           />
         </View>
       </SafeAreaView>
@@ -482,16 +482,22 @@ function NavItem({
   label,
   onPress,
   style,
+  pressableStyle,
 }: {
   icon: keyof typeof Ionicons.glyphMap;
   label: string;
   onPress: () => void;
-  style?: object;
+  style?: StyleProp<ViewStyle>;
+  pressableStyle?: StyleProp<ViewStyle>;
 }) {
   return (
     <View style={style}>
       <Pressable
-        style={({ pressed }) => [styles.navItem, pressed && styles.navItemPressed]}
+        style={({ pressed }) => [
+          styles.navItem,
+          pressableStyle,
+          pressed && styles.navItemPressed,
+        ]}
         onPress={onPress}
       >
         <Ionicons name={icon} size={18} color={colors.textPrimary} />
@@ -890,11 +896,15 @@ const styles = StyleSheet.create({
   settingsItem: {
     marginBottom: 0,
   },
+  footerNavItem: {
+    marginBottom: 0,
+  },
   footer: {
+    marginTop: 'auto',
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: colors.borderLight,
     paddingTop: spacing.md,
-    paddingBottom: spacing.md,
+    paddingBottom: 0,
   },
   workspaceModalBackdrop: {
     flex: 1,

package/apps/mobile/src/screens/GitScreen.tsx

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   Pressable,
-  SafeAreaView,
   ScrollView,
   StyleSheet,
   Text,
@@ -11,6 +10,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { HostBridgeApiClient } from '../api/client';
 import type {