clawdex-mobile 2.0.1 → 3.0.0

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

@@ -419,6 +419,7 @@ export function OnboardingScreen({
                       setFormError(null);
                       setConnectionCheck({ kind: 'idle' });
                     }}
+                    keyboardAppearance="dark"
                     autoCapitalize="none"
                     autoCorrect={false}
                     keyboardType="url"
@@ -441,6 +442,7 @@ export function OnboardingScreen({
                         setTokenInput(value);
                         setConnectionCheck({ kind: 'idle' });
                       }}
+                      keyboardAppearance="dark"
                       autoCapitalize="none"
                       autoCorrect={false}
                       keyboardType="default"

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

@@ -4,18 +4,25 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
-  Modal,
   Pressable,
   ScrollView,
   StyleSheet,
+  Switch,
   Text,
   View,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { HostBridgeApiClient } from '../api/client';
-import type { ApprovalMode, ModelOption, ReasoningEffort } from '../api/types';
+import type {
+  AccountSnapshot,
+  ApprovalMode,
+  ModelOption,
+  PlanType,
+  ReasoningEffort,
+} from '../api/types';
 import type { HostBridgeWsClient } from '../api/ws';
+import { SelectionSheet, type SelectionSheetOption } from '../components/SelectionSheet';
 import { colors, radius, spacing, typography } from '../theme';
 
 interface SettingsScreenProps {
@@ -25,11 +32,13 @@ interface SettingsScreenProps {
   defaultModelId?: string | null;
   defaultReasoningEffort?: ReasoningEffort | null;
   approvalMode?: ApprovalMode;
+  showToolCalls?: boolean;
   onDefaultModelSettingsChange?: (
     modelId: string | null,
     effort: ReasoningEffort | null
   ) => void;
   onApprovalModeChange?: (mode: ApprovalMode) => void;
+  onShowToolCallsChange?: (value: boolean) => void;
   onEditBridgeUrl?: () => void;
   onResetOnboarding?: () => void;
   onOpenDrawer: () => void;
@@ -44,8 +53,10 @@ export function SettingsScreen({
   defaultModelId,
   defaultReasoningEffort,
   approvalMode,
+  showToolCalls = false,
   onDefaultModelSettingsChange,
   onApprovalModeChange,
+  onShowToolCallsChange,
   onEditBridgeUrl,
   onResetOnboarding,
   onOpenDrawer,
@@ -61,6 +72,9 @@ export function SettingsScreen({
   const [modelModalVisible, setModelModalVisible] = useState(false);
   const [effortModalVisible, setEffortModalVisible] = useState(false);
   const [approvalModeModalVisible, setApprovalModeModalVisible] = useState(false);
+  const [account, setAccount] = useState<AccountSnapshot | null>(null);
+  const [accountLoading, setAccountLoading] = useState(false);
+  const [accountError, setAccountError] = useState<string | null>(null);
 
   const normalizedDefaultModelId = normalizeModelId(defaultModelId);
   const normalizedDefaultEffort = normalizeReasoningEffort(defaultReasoningEffort);
@@ -115,15 +129,48 @@ export function SettingsScreen({
     }
   }, [api]);
 
+  const loadAccount = useCallback(async () => {
+    setAccountLoading(true);
+    try {
+      const snapshot = await api.readAccount();
+      setAccount(snapshot);
+      setAccountError(null);
+    } catch (err) {
+      setAccountError((err as Error).message);
+    } finally {
+      setAccountLoading(false);
+    }
+  }, [api]);
+
   useEffect(() => {
     const t = setTimeout(() => {
       void checkHealth();
       void refreshModelOptions();
+      void loadAccount();
     }, 0);
     return () => clearTimeout(t);
-  }, [checkHealth, refreshModelOptions]);
+  }, [checkHealth, loadAccount, refreshModelOptions]);
 
-  useEffect(() => ws.onStatus(setWsConnected), [ws]);
+  useEffect(
+    () =>
+      ws.onStatus((connected) => {
+        setWsConnected(connected);
+        if (connected) {
+          void loadAccount();
+        }
+      }),
+    [loadAccount, ws]
+  );
+
+  useEffect(
+    () =>
+      ws.onEvent((event) => {
+        if (event.method === 'account/updated') {
+          void loadAccount();
+        }
+      }),
+    [loadAccount, ws]
+  );
 
   const openModelModal = useCallback(() => {
     setModelModalVisible(true);
@@ -223,6 +270,88 @@ export function SettingsScreen({
     [onApprovalModeChange]
   );
 
+  const approvalModeOptions = useMemo<SelectionSheetOption[]>(
+    () => [
+      {
+        key: 'normal',
+        title: 'Normal approvals',
+        description: 'Ask before commands and file-changing actions run.',
+        icon: 'shield-checkmark-outline',
+        selected: normalizedApprovalMode === 'normal',
+        onPress: () => selectApprovalMode('normal'),
+      },
+      {
+        key: 'yolo',
+        title: 'YOLO approvals',
+        description: 'Run commands without prompting for approval.',
+        icon: 'flash-outline',
+        meta: 'Unsafe',
+        selected: normalizedApprovalMode === 'yolo',
+        onPress: () => selectApprovalMode('yolo'),
+      },
+    ],
+    [normalizedApprovalMode, selectApprovalMode]
+  );
+
+  const modelPickerOptions = useMemo<SelectionSheetOption[]>(
+    () => [
+      {
+        key: 'server-default',
+        title: 'Use server default',
+        description: 'Follow the bridge default model for new chats.',
+        icon: 'sparkles-outline',
+        badge: 'Auto',
+        selected: normalizedDefaultModelId === null,
+        onPress: () => selectDefaultModel(null),
+      },
+      ...modelOptions.map((model) => ({
+        key: model.id,
+        title: model.displayName,
+        description: model.description?.trim() || model.id,
+        icon: 'hardware-chip-outline' as const,
+        badge: model.isDefault ? 'Default' : undefined,
+        meta: model.defaultReasoningEffort
+          ? formatReasoningEffort(model.defaultReasoningEffort)
+          : undefined,
+        selected: model.id === normalizedDefaultModelId,
+        onPress: () => selectDefaultModel(model.id),
+      })),
+    ],
+    [modelOptions, normalizedDefaultModelId, selectDefaultModel]
+  );
+
+  const effortPickerOptions = useMemo<SelectionSheetOption[]>(
+    () => [
+      {
+        key: 'model-default',
+        title: 'Use model default',
+        description: selectedDefaultModel
+          ? `Follow ${selectedDefaultModel.displayName}'s default reasoning.`
+          : 'Follow the model default reasoning level.',
+        icon: 'sparkles-outline',
+        badge: 'Auto',
+        selected: normalizedDefaultEffort === null,
+        onPress: () => selectDefaultEffort(null),
+      },
+      ...selectedDefaultModelEfforts.map((option) => ({
+        key: option.effort,
+        title: formatReasoningEffort(option.effort),
+        description:
+          option.description?.trim() ||
+          'Override the default reasoning depth for new chats.',
+        icon: 'pulse-outline' as const,
+        selected: option.effort === normalizedDefaultEffort,
+        onPress: () => selectDefaultEffort(option.effort),
+      })),
+    ],
+    [
+      normalizedDefaultEffort,
+      selectDefaultEffort,
+      selectedDefaultModel,
+      selectedDefaultModelEfforts,
+    ]
+  );
+
   return (
     <View style={styles.container}>
       <LinearGradient
@@ -297,9 +426,68 @@ export function SettingsScreen({
           </BlurView>
           <Text style={styles.subtleHintText}>
             This controls command/file-change approvals only. It does not affect
-            request_user_input questions.
+            request_user_input questions. Mobile chats request full Codex sandbox
+            access by default.
           </Text>
 
+          <Text style={[styles.sectionLabel, styles.sectionLabelGap]}>Transcript</Text>
+          <BlurView intensity={50} tint="dark" style={styles.card}>
+            <View style={[styles.settingRow, styles.settingRowLast]}>
+              <View style={styles.settingRowLeft}>
+                <Text style={styles.rowLabel}>Show tool calls</Text>
+                <Text style={styles.settingValue} numberOfLines={2}>
+                  Show web searches, MCP/OpenAI docs calls, commands, and file changes.
+                </Text>
+              </View>
+              <Switch
+                value={showToolCalls}
+                onValueChange={(value) => onShowToolCallsChange?.(value)}
+                trackColor={{ false: colors.borderLight, true: colors.accent }}
+                thumbColor={colors.textPrimary}
+                ios_backgroundColor={colors.borderLight}
+              />
+            </View>
+          </BlurView>
+          <Text style={styles.subtleHintText}>
+            Live tool activity stays in a capped panel so the chat list does not
+            start jumping while a turn is running.
+          </Text>
+
+          <Text style={[styles.sectionLabel, styles.sectionLabelGap]}>Account & Auth</Text>
+          <BlurView intensity={50} tint="dark" style={styles.card}>
+            {accountLoading ? (
+              <View style={styles.accountLoadingState}>
+                <ActivityIndicator color={colors.textPrimary} />
+                <Text style={styles.settingValue}>Loading account details…</Text>
+              </View>
+            ) : (
+              <>
+                <Row
+                  label="Status"
+                  value={formatAccountType(account)}
+                  valueColor={account?.type ? colors.statusComplete : colors.textMuted}
+                />
+                {account?.email ? (
+                  <Row label="Email" value={account.email} />
+                ) : null}
+                {account?.planType ? (
+                  <Row label="Plan" value={formatPlanType(account.planType)} />
+                ) : null}
+                <Row
+                  label="Bridge auth"
+                  value={account?.requiresOpenaiAuth ? 'Required' : 'Optional'}
+                  isLast
+                />
+              </>
+            )}
+          </BlurView>
+          {account?.type === null && account?.requiresOpenaiAuth ? (
+            <Text style={styles.subtleHintText}>
+              The bridge expects OpenAI auth, but mobile does not expose a login flow yet.
+            </Text>
+          ) : null}
+          {accountError ? <Text style={styles.errorText}>{accountError}</Text> : null}
+
           <Text style={[styles.sectionLabel, styles.sectionLabelGap]}>Bridge</Text>
           <BlurView intensity={50} tint="dark" style={styles.card}>
             <Text selectable style={styles.valueText}>
@@ -348,11 +536,12 @@ export function SettingsScreen({
             onPress={() => {
               void checkHealth();
               void refreshModelOptions();
+              void loadAccount();
             }}
             style={({ pressed }) => [styles.refreshBtn, pressed && styles.refreshBtnPressed]}
           >
             <Ionicons name="refresh" size={16} color={colors.white} />
-            <Text style={styles.refreshBtnText}>Refresh health</Text>
+            <Text style={styles.refreshBtnText}>Refresh settings</Text>
           </Pressable>
 
           <Text style={[styles.sectionLabel, styles.sectionLabelGap]}>Legal</Text>
@@ -383,127 +572,40 @@ export function SettingsScreen({
         </ScrollView>
       </SafeAreaView>
 
-      <Modal
+      <SelectionSheet
         visible={approvalModeModalVisible}
-        transparent
-        animationType="fade"
-        onRequestClose={() => setApprovalModeModalVisible(false)}
-      >
-        <View style={styles.modalBackdrop}>
-          <View style={styles.modalCard}>
-            <Text style={styles.modalTitle}>Execution approval mode</Text>
-            <ScrollView style={styles.modalList} contentContainerStyle={styles.modalListContent}>
-              <OptionRow
-                label="Normal — Ask for approvals"
-                selected={normalizedApprovalMode === 'normal'}
-                onPress={() => selectApprovalMode('normal')}
-              />
-              <OptionRow
-                label="YOLO — Do not ask approvals"
-                selected={normalizedApprovalMode === 'yolo'}
-                onPress={() => selectApprovalMode('yolo')}
-              />
-            </ScrollView>
-            <View style={styles.modalActions}>
-              <Pressable
-                onPress={() => setApprovalModeModalVisible(false)}
-                style={({ pressed }) => [
-                  styles.modalCloseBtn,
-                  pressed && styles.workspaceModalCloseBtnPressed,
-                ]}
-              >
-                <Text style={styles.modalCloseText}>Close</Text>
-              </Pressable>
-            </View>
-          </View>
-        </View>
-      </Modal>
+        eyebrow="Approvals"
+        title="Execution approval mode"
+        subtitle="This only affects command and file-change approvals."
+        options={approvalModeOptions}
+        onClose={() => setApprovalModeModalVisible(false)}
+      />
 
-      <Modal
+      <SelectionSheet
         visible={modelModalVisible}
-        transparent
-        animationType="fade"
-        onRequestClose={closeModelModal}
-      >
-        <View style={styles.modalBackdrop}>
-          <View style={styles.modalCard}>
-            <Text style={styles.modalTitle}>Default model</Text>
-            {loadingModels ? (
-              <ActivityIndicator color={colors.textPrimary} style={styles.modalLoader} />
-            ) : (
-              <ScrollView style={styles.modalList} contentContainerStyle={styles.modalListContent}>
-                <OptionRow
-                  label="Server default"
-                  selected={normalizedDefaultModelId === null}
-                  onPress={() => selectDefaultModel(null)}
-                />
-                {modelOptions.map((model) => (
-                  <OptionRow
-                    key={model.id}
-                    label={`${model.displayName} (${model.id})`}
-                    selected={model.id === normalizedDefaultModelId}
-                    onPress={() => selectDefaultModel(model.id)}
-                  />
-                ))}
-              </ScrollView>
-            )}
-            <View style={styles.modalActions}>
-              <Pressable
-                onPress={closeModelModal}
-                style={({ pressed }) => [
-                  styles.modalCloseBtn,
-                  pressed && styles.workspaceModalCloseBtnPressed,
-                ]}
-              >
-                <Text style={styles.modalCloseText}>Close</Text>
-              </Pressable>
-            </View>
-          </View>
-        </View>
-      </Modal>
+        eyebrow="Defaults"
+        title="Default model"
+        subtitle="Pick the model new chats should start with."
+        options={modelPickerOptions}
+        loading={loadingModels}
+        loadingLabel="Refreshing available models…"
+        presentation="expanded"
+        onClose={closeModelModal}
+      />
 
-      <Modal
+      <SelectionSheet
         visible={effortModalVisible}
-        transparent
-        animationType="fade"
-        onRequestClose={() => setEffortModalVisible(false)}
-      >
-        <View style={styles.modalBackdrop}>
-          <View style={styles.modalCard}>
-            <Text style={styles.modalTitle}>Default reasoning</Text>
-            <ScrollView style={styles.modalList} contentContainerStyle={styles.modalListContent}>
-              <OptionRow
-                label="Model default"
-                selected={normalizedDefaultEffort === null}
-                onPress={() => selectDefaultEffort(null)}
-              />
-              {selectedDefaultModelEfforts.map((option) => (
-                <OptionRow
-                  key={option.effort}
-                  label={
-                    option.description
-                      ? `${formatReasoningEffort(option.effort)} — ${option.description}`
-                      : formatReasoningEffort(option.effort)
-                  }
-                  selected={option.effort === normalizedDefaultEffort}
-                  onPress={() => selectDefaultEffort(option.effort)}
-                />
-              ))}
-            </ScrollView>
-            <View style={styles.modalActions}>
-              <Pressable
-                onPress={() => setEffortModalVisible(false)}
-                style={({ pressed }) => [
-                  styles.modalCloseBtn,
-                  pressed && styles.workspaceModalCloseBtnPressed,
-                ]}
-              >
-                <Text style={styles.modalCloseText}>Close</Text>
-              </Pressable>
-            </View>
-          </View>
-        </View>
-      </Modal>
+        eyebrow="Defaults"
+        title="Default reasoning"
+        subtitle={
+          selectedDefaultModel
+            ? `Current model: ${selectedDefaultModel.displayName}`
+            : 'Choose the default reasoning depth for new chats.'
+        }
+        options={effortPickerOptions}
+        presentation="expanded"
+        onClose={() => setEffortModalVisible(false)}
+      />
     </View>
   );
 }
@@ -529,30 +631,6 @@ function Row({
   );
 }
 
-function OptionRow({
-  label,
-  selected,
-  onPress,
-}: {
-  label: string;
-  selected: boolean;
-  onPress: () => void;
-}) {
-  return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => [
-        styles.optionRow,
-        selected && styles.optionRowSelected,
-        pressed && styles.optionRowPressed,
-      ]}
-    >
-      <Text style={[styles.optionRowText, selected && styles.optionRowTextSelected]}>{label}</Text>
-      {selected ? <Ionicons name="checkmark" size={16} color={colors.textPrimary} /> : null}
-    </Pressable>
-  );
-}
-
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: colors.bgMain },
   safeArea: { flex: 1 },
@@ -674,6 +752,12 @@ const styles = StyleSheet.create({
     marginTop: spacing.xs,
     marginHorizontal: spacing.xs,
   },
+  accountLoadingState: {
+    minHeight: 88,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
   refreshBtn: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -684,11 +768,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     backgroundColor: colors.accent,
     borderRadius: radius.md,
-    shadowColor: colors.accent,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 4,
+    boxShadow: `0px 4px 8px ${colors.accent}4D`,
   },
   refreshBtnPressed: { backgroundColor: colors.accentPressed },
   refreshBtnText: { ...typography.headline, color: colors.white, fontSize: 15 },
@@ -711,81 +791,6 @@ const styles = StyleSheet.create({
     color: colors.textPrimary,
     fontWeight: '600',
   },
-  modalBackdrop: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.55)',
-    justifyContent: 'center',
-    paddingHorizontal: spacing.lg,
-  },
-  modalCard: {
-    backgroundColor: colors.bgItem,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: colors.border,
-    padding: spacing.lg,
-    gap: spacing.md,
-    maxHeight: '74%',
-  },
-  modalTitle: {
-    ...typography.headline,
-    color: colors.textPrimary,
-  },
-  modalLoader: {
-    marginVertical: spacing.lg,
-  },
-  modalList: {
-    maxHeight: 320,
-  },
-  modalListContent: {
-    gap: spacing.xs,
-  },
-  optionRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: spacing.sm,
-    borderRadius: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.borderLight,
-    backgroundColor: colors.bgMain,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-  },
-  optionRowSelected: {
-    borderColor: colors.borderHighlight,
-    backgroundColor: 'rgba(255, 255, 255, 0.08)',
-  },
-  optionRowPressed: {
-    opacity: 0.86,
-  },
-  optionRowText: {
-    ...typography.caption,
-    color: colors.textSecondary,
-    flex: 1,
-  },
-  optionRowTextSelected: {
-    color: colors.textPrimary,
-    fontWeight: '600',
-  },
-  modalActions: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  modalCloseBtn: {
-    borderRadius: 10,
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.sm,
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.bgMain,
-  },
-  workspaceModalCloseBtnPressed: {
-    opacity: 0.85,
-  },
-  modalCloseText: {
-    ...typography.body,
-    color: colors.textPrimary,
-  },
   errorText: {
     ...typography.caption,
     color: colors.error,
@@ -838,3 +843,28 @@ function formatReasoningEffort(effort: ReasoningEffort): string {
 
   return effort.charAt(0).toUpperCase() + effort.slice(1);
 }
+
+function formatAccountType(account: AccountSnapshot | null): string {
+  if (!account?.type) {
+    return 'Signed out';
+  }
+
+  return account.type === 'chatgpt' ? 'ChatGPT' : 'API key';
+}
+
+function formatPlanType(planType: PlanType): string {
+  if (planType === 'pro') {
+    return 'Pro';
+  }
+  if (planType === 'plus') {
+    return 'Plus';
+  }
+  if (planType === 'go') {
+    return 'Go';
+  }
+  if (planType === 'edu') {
+    return 'Edu';
+  }
+
+  return planType.charAt(0).toUpperCase() + planType.slice(1);
+}

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

@@ -127,6 +127,7 @@ export function TerminalScreen({ api, ws, onOpenDrawer }: TerminalScreenProps) {
             style={styles.input}
             value={command}
             onChangeText={setCommand}
+            keyboardAppearance="dark"
             autoCapitalize="none"
             autoCorrect={false}
             returnKeyType="send"
@@ -171,11 +172,7 @@ const styles = StyleSheet.create({
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: 'rgba(255,255,255,0.1)',
     overflow: 'hidden',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 10 },
-    shadowOpacity: 0.5,
-    shadowRadius: 20,
-    elevation: 8,
+    boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.5)',
   },
   windowHeader: {
     flexDirection: 'row',