clawdex-mobile 2.0.0 → 3.0.0

package/apps/mobile/src/api/types.ts

@@ -2,11 +2,21 @@ export type ChatStatus = 'idle' | 'running' | 'error' | 'complete';
 
 export type ChatMessageRole = 'user' | 'assistant' | 'system';
 
+export interface ChatMessageSubAgentMeta {
+  tool?: string;
+  prompt?: string;
+  senderThreadId?: string;
+  receiverThreadIds?: string[];
+  agentStatus?: string;
+}
+
 export interface ChatMessage {
   id: string;
   role: ChatMessageRole;
   content: string;
   createdAt: string;
+  systemKind?: 'tool' | 'subAgent';
+  subAgentMeta?: ChatMessageSubAgentMeta;
 }
 
 export interface ChatSummary {
@@ -19,7 +29,11 @@ export interface ChatSummary {
   lastMessagePreview: string;
   cwd?: string;
   modelProvider?: string;
+  agentNickname?: string;
+  agentRole?: string;
   sourceKind?: string;
+  parentThreadId?: string;
+  subAgentDepth?: number;
   lastRunStartedAt?: string;
   lastRunFinishedAt?: string;
   lastRunDurationMs?: number;
@@ -28,8 +42,18 @@ export interface ChatSummary {
   lastError?: string;
 }
 
+export interface ChatPlanSnapshot {
+  threadId: string;
+  turnId: string;
+  explanation: string | null;
+  steps: TurnPlanStep[];
+}
+
 export interface Chat extends ChatSummary {
   messages: ChatMessage[];
+  latestPlan?: ChatPlanSnapshot | null;
+  latestTurnPlan?: ChatPlanSnapshot | null;
+  latestTurnStatus?: string | null;
 }
 
 export interface CreateChatRequest {
@@ -38,6 +62,7 @@ export interface CreateChatRequest {
   cwd?: string;
   model?: string;
   effort?: ReasoningEffort;
+  serviceTier?: ServiceTier;
   approvalPolicy?: ApprovalPolicy;
 }
 
@@ -49,12 +74,19 @@ export interface SendChatMessageRequest {
   cwd?: string;
   model?: string;
   effort?: ReasoningEffort;
+  serviceTier?: ServiceTier;
   approvalPolicy?: ApprovalPolicy;
   collaborationMode?: CollaborationMode;
   mentions?: MentionInput[];
   localImages?: LocalImageInput[];
 }
 
+export interface SteerChatTurnRequest {
+  content: string;
+  mentions?: MentionInput[];
+  localImages?: LocalImageInput[];
+}
+
 export interface MentionInput {
   path: string;
   name?: string;
@@ -82,6 +114,39 @@ export interface UploadAttachmentResponse {
   kind: AttachmentUploadKind;
 }
 
+export interface WorkspaceSummary {
+  path: string;
+  chatCount: number;
+}
+
+export interface WorkspaceListResponse {
+  bridgeRoot: string;
+  allowOutsideRootCwd: boolean;
+  workspaces: WorkspaceSummary[];
+}
+
+export interface FileSystemListRequest {
+  path?: string | null;
+  includeHidden?: boolean;
+  directoriesOnly?: boolean;
+}
+
+export interface FileSystemEntry {
+  name: string;
+  path: string;
+  kind: string;
+  hidden: boolean;
+  selectable: boolean;
+  isGitRepo: boolean;
+}
+
+export interface FileSystemListResponse {
+  bridgeRoot: string;
+  path: string;
+  parentPath: string | null;
+  entries: FileSystemEntry[];
+}
+
 export type ReasoningEffort =
   | 'none'
   | 'minimal'
@@ -90,6 +155,47 @@ export type ReasoningEffort =
   | 'high'
   | 'xhigh';
 
+export type ServiceTier = 'flex' | 'fast';
+
+export type PlanType =
+  | 'free'
+  | 'go'
+  | 'plus'
+  | 'pro'
+  | 'team'
+  | 'business'
+  | 'enterprise'
+  | 'edu'
+  | 'unknown';
+
+export interface AccountCreditsSnapshot {
+  hasCredits: boolean;
+  unlimited: boolean;
+  balance: string | null;
+}
+
+export interface AccountRateLimitWindow {
+  usedPercent: number;
+  windowDurationMins: number | null;
+  resetsAt: number | null;
+}
+
+export interface AccountRateLimitSnapshot {
+  limitId: string | null;
+  limitName: string | null;
+  primary: AccountRateLimitWindow | null;
+  secondary: AccountRateLimitWindow | null;
+  credits: AccountCreditsSnapshot | null;
+  planType: PlanType | null;
+}
+
+export interface AccountSnapshot {
+  type: 'apiKey' | 'chatgpt' | null;
+  email: string | null;
+  planType: PlanType | null;
+  requiresOpenaiAuth: boolean;
+}
+
 export type ApprovalPolicy =
   | 'untrusted'
   | 'on-request'

package/apps/mobile/src/api/ws.ts

@@ -778,9 +778,13 @@ function extractNotificationThreadId(
     toRecord(params?.threadState) ??
     toRecord(params?.thread_state) ??
     toRecord(msg?.thread);
+  const threadSourceRecord = toRecord(threadRecord?.source);
   const sourceRecord = toRecord(params?.source) ?? toRecord(msg?.source);
   const subagentThreadSpawnRecord = toRecord(
-    toRecord(sourceRecord?.subagent)?.thread_spawn
+    toRecord(sourceRecord?.subagent ?? sourceRecord?.subAgent)?.thread_spawn
+  );
+  const threadSubagentThreadSpawnRecord = toRecord(
+    toRecord(threadSourceRecord?.subagent ?? threadSourceRecord?.subAgent)?.thread_spawn
   );
 
   return (
@@ -804,6 +808,11 @@ function extractNotificationThreadId(
     readString(sourceRecord?.parent_thread_id) ??
     readString(sourceRecord?.parentThreadId) ??
     readString(subagentThreadSpawnRecord?.parent_thread_id) ??
+    readString(subagentThreadSpawnRecord?.parentThreadId) ??
+    readString(threadSourceRecord?.parent_thread_id) ??
+    readString(threadSourceRecord?.parentThreadId) ??
+    readString(threadSubagentThreadSpawnRecord?.parent_thread_id) ??
+    readString(threadSubagentThreadSpawnRecord?.parentThreadId) ??
     null
   );
 }

package/apps/mobile/src/components/ChatHeader.tsx

@@ -26,9 +26,9 @@ export function ChatHeader({
       <SafeAreaView edges={['top', 'left', 'right']}>
         <View style={styles.header}>
           <Pressable onPress={onOpenDrawer} hitSlop={8} style={styles.menuBtn}>
-            <Ionicons name="menu" size={22} color={colors.textPrimary} />
+            <Ionicons name="menu" size={20} color={colors.textPrimary} />
           </Pressable>
-          <BrandMark size={22} />
+          <BrandMark size={18} />
           {onOpenTitleMenu ? (
             <Pressable
               onPress={onOpenTitleMenu}
@@ -38,7 +38,7 @@ export function ChatHeader({
               <Text numberOfLines={1} style={styles.modelName}>
                 {titleDisplay}
               </Text>
-              <Ionicons name="chevron-down" size={14} color={colors.textMuted} />
+              <Ionicons name="chevron-down" size={12} color={colors.textMuted} />
             </Pressable>
           ) : (
             <View style={styles.modelNameRow}>
@@ -50,10 +50,10 @@ export function ChatHeader({
           <View style={{ flex: 1 }} />
           {onRightActionPress ? (
             <Pressable onPress={onRightActionPress} hitSlop={8} style={styles.rightBtn}>
-              <Ionicons name={rightIconName} size={20} color={colors.textMuted} />
+              <Ionicons name={rightIconName} size={18} color={colors.textMuted} />
             </Pressable>
           ) : (
-            <Ionicons name={rightIconName} size={20} color={colors.textMuted} />
+            <Ionicons name={rightIconName} size={18} color={colors.textMuted} />
           )}
         </View>
       </SafeAreaView>
@@ -72,13 +72,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: spacing.sm,
     paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.md,
+    paddingVertical: spacing.sm,
   },
   menuBtn: {
-    padding: spacing.xs,
+    padding: 2,
   },
   rightBtn: {
-    padding: spacing.xs,
+    padding: 2,
   },
   modelNameRow: {
     flexDirection: 'row',
@@ -91,16 +91,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: spacing.xs,
     borderRadius: 8,
-    paddingHorizontal: spacing.xs,
-    paddingVertical: 2,
+    paddingHorizontal: 2,
+    paddingVertical: 1,
     flexShrink: 1,
   },
   titleButtonPressed: {
     backgroundColor: colors.bgItem,
   },
   modelName: {
-    ...typography.largeTitle,
-    fontSize: 20,
+    ...typography.headline,
+    fontSize: 17,
     color: colors.textPrimary,
     flexShrink: 1,
   },

package/apps/mobile/src/components/ChatInput.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from '@expo/vector-icons';
-import { BlurView } from 'expo-blur';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import {
   ActivityIndicator,
   type NativeSyntheticEvent,
@@ -16,6 +15,8 @@ import {
 } from 'react-native';
 
 import type { VoiceState } from '../hooks/useVoiceRecorder';
+import { resolveComposerBottomSpacing } from './chat-input-layout';
+import { VoiceRecordingWaveform } from './VoiceRecordingWaveform';
 import { colors, radius, spacing } from '../theme';
 
 interface ChatInputProps {
@@ -25,6 +26,7 @@ interface ChatInputProps {
   onSubmit: () => void;
   onStop?: () => void;
   onAttachPress: () => void;
+  attachDisabled?: boolean;
   attachments?: Array<{ id: string; label: string }>;
   onRemoveAttachment?: (id: string) => void;
   isLoading: boolean;
@@ -33,8 +35,11 @@ interface ChatInputProps {
   placeholder?: string;
   onVoiceToggle?: () => void;
   voiceState?: VoiceState;
+  voiceRecordingDurationMillis?: number;
+  voiceMetering?: number | null;
   safeAreaBottomInset?: number;
   keyboardVisible?: boolean;
+  footer?: ReactNode;
 }
 
 export function ChatInput({
@@ -44,6 +49,7 @@ export function ChatInput({
   onSubmit,
   onStop,
   onAttachPress,
+  attachDisabled = false,
   attachments = [],
   onRemoveAttachment,
   isLoading,
@@ -52,8 +58,11 @@ export function ChatInput({
   placeholder = 'Message Codex...',
   onVoiceToggle,
   voiceState = 'idle',
+  voiceRecordingDurationMillis = 0,
+  voiceMetering = null,
   safeAreaBottomInset = 0,
   keyboardVisible = false,
+  footer = null,
 }: ChatInputProps) {
   const INPUT_TEXT_LINE_HEIGHT = 20;
   const INPUT_TEXT_VERTICAL_PADDING = Platform.OS === 'ios' ? 2 : 0;
@@ -82,30 +91,24 @@ export function ChatInput({
   const showVoiceButton = Boolean(onVoiceToggle);
   const showSendButton = canSend || isLoading;
   const inputScrollEnabled = inputHeight >= INPUT_TEXT_MAX_HEIGHT;
+  const showVoiceRecordingUi = voiceState === 'recording';
+  const showVoiceTranscribingUi = voiceState === 'transcribing';
+  const showVoiceStatusUi = showVoiceRecordingUi || showVoiceTranscribingUi;
   const shouldShowActionButton =
     canStop || showSendButton || showVoiceButton || voiceState !== 'idle';
-  const baseBottomPadding =
-    Platform.OS === 'ios'
-      ? keyboardVisible
-        ? spacing.sm
-        : spacing.lg
-      : spacing.md;
-  const extraBottomInset = keyboardVisible ? 0 : safeAreaBottomInset;
+  const composerBottomSpacing = resolveComposerBottomSpacing(
+    Platform.OS,
+    safeAreaBottomInset,
+    keyboardVisible
+  );
 
   return (
     <View style={styles.shell}>
-      <BlurView
-        intensity={26}
-        tint={Platform.OS === 'ios' ? 'systemUltraThinMaterialDark' : 'dark'}
-        blurMethod="dimezisBlurViewSdk31Plus"
-        style={StyleSheet.absoluteFill}
-      />
       <View
         style={[
           styles.container,
           {
-            paddingBottom:
-              baseBottomPadding + extraBottomInset,
+            paddingBottom: composerBottomSpacing.totalBottomPadding,
           },
         ]}
       >
@@ -143,78 +146,102 @@ export function ChatInput({
 
         <View style={styles.row}>
           <Pressable
+            disabled={attachDisabled}
             onPress={onAttachPress}
-            style={({ pressed }) => [styles.plusBtn, pressed && styles.plusBtnPressed]}
+            style={({ pressed }) => [
+              styles.plusBtn,
+              attachDisabled && styles.plusBtnDisabled,
+              pressed && !attachDisabled && styles.plusBtnPressed,
+            ]}
           >
             <Ionicons name="add" size={20} color={colors.textMuted} />
           </Pressable>
 
-          <View style={styles.inputWrapper}>
-            <Text
-              pointerEvents="none"
-              accessibilityElementsHidden
-              importantForAccessibility="no-hide-descendants"
-              style={[
-                styles.inputMeasure,
-                {
-                  width: inputWidth,
-                  lineHeight: INPUT_TEXT_LINE_HEIGHT,
-                  paddingVertical: INPUT_TEXT_VERTICAL_PADDING,
-                },
-              ]}
-              onTextLayout={(event: NativeSyntheticEvent<TextLayoutEventData>) => {
-                if (inputWidth <= 0) {
-                  return;
-                }
-                const lineCount = Math.max(1, event.nativeEvent.lines.length);
-                const measuredHeight =
-                  lineCount * INPUT_TEXT_LINE_HEIGHT + INPUT_TEXT_VERTICAL_PADDING * 2;
-                updateInputHeight(measuredHeight);
-              }}
-            >
-              {value.length > 0 ? `${value}\u200b` : ' '}
-            </Text>
-            <TextInput
-              style={[styles.input, { height: inputHeight }]}
-              value={value}
-              onChangeText={onChangeText}
-              onLayout={(event) => {
-                const nextWidth = Math.floor(event.nativeEvent.layout.width);
-                setInputWidth((previousWidth) =>
-                  previousWidth === nextWidth ? previousWidth : nextWidth
-                );
-              }}
-              onChange={(event: NativeSyntheticEvent<unknown>) => {
-                const nativeEvent = event.nativeEvent as {
-                  contentSize?: { height?: number };
-                };
-                const contentHeight = nativeEvent.contentSize?.height;
-                if (typeof contentHeight === 'number' && Number.isFinite(contentHeight)) {
-                  updateInputHeight(contentHeight);
-                }
-              }}
-              onFocus={onFocus}
-              placeholder={placeholder}
-              placeholderTextColor={colors.textMuted}
-              multiline
-              scrollEnabled={inputScrollEnabled}
-              onContentSizeChange={(event) => {
-                updateInputHeight(event.nativeEvent.contentSize.height);
-              }}
-              onKeyPress={(e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-                const keyEvent = e.nativeEvent as TextInputKeyPressEventData & {
-                  shiftKey?: boolean;
-                };
-                if (
-                  Platform.OS === 'web' &&
-                  keyEvent.key === 'Enter' &&
-                  !keyEvent.shiftKey
-                ) {
-                  e.preventDefault();
-                  if (canSend) onSubmit();
-                }
-              }}
-            />
+          <View
+            style={[
+              styles.inputWrapper,
+              showVoiceStatusUi && styles.inputWrapperVoiceActive,
+            ]}
+          >
+            {showVoiceStatusUi ? (
+              showVoiceRecordingUi ? (
+                <VoiceRecordingWaveform
+                  durationMillis={voiceRecordingDurationMillis}
+                  metering={voiceMetering}
+                />
+              ) : (
+                <View
+                  accessible
+                  accessibilityLabel="Transcribing recorded audio into text"
+                  style={styles.voiceStatusContent}
+                >
+                  <View style={styles.voiceStatusLabelRow}>
+                    <View style={[styles.voiceStatusDot, styles.voiceStatusDotBusy]} />
+                    <Text style={styles.voiceStatusTitle}>Transcribing audio</Text>
+                  </View>
+                  <Text style={styles.voiceStatusHint}>
+                    Converting your latest recording into text.
+                  </Text>
+                </View>
+              )
+            ) : (
+              <>
+                <Text
+                  pointerEvents="none"
+                  accessibilityElementsHidden
+                  importantForAccessibility="no-hide-descendants"
+                  style={[
+                    styles.inputMeasure,
+                    {
+                      width: inputWidth,
+                      lineHeight: INPUT_TEXT_LINE_HEIGHT,
+                      paddingVertical: INPUT_TEXT_VERTICAL_PADDING,
+                    },
+                  ]}
+                  onTextLayout={(event: NativeSyntheticEvent<TextLayoutEventData>) => {
+                    if (inputWidth <= 0) {
+                      return;
+                    }
+                    const lineCount = Math.max(1, event.nativeEvent.lines.length);
+                    const measuredHeight =
+                      lineCount * INPUT_TEXT_LINE_HEIGHT + INPUT_TEXT_VERTICAL_PADDING * 2;
+                    updateInputHeight(measuredHeight);
+                  }}
+                >
+                  {value.length > 0 ? `${value}\u200b` : ' '}
+                </Text>
+                <TextInput
+                  style={[styles.input, { height: inputHeight }]}
+                  value={value}
+                  onChangeText={onChangeText}
+                  keyboardAppearance="dark"
+                  onLayout={(event) => {
+                    const nextWidth = Math.floor(event.nativeEvent.layout.width);
+                    setInputWidth((previousWidth) =>
+                      previousWidth === nextWidth ? previousWidth : nextWidth
+                    );
+                  }}
+                  onFocus={onFocus}
+                  placeholder={placeholder}
+                  placeholderTextColor={colors.textMuted}
+                  multiline
+                  scrollEnabled={inputScrollEnabled}
+                  onKeyPress={(e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+                    const keyEvent = e.nativeEvent as TextInputKeyPressEventData & {
+                      shiftKey?: boolean;
+                    };
+                    if (
+                      Platform.OS === 'web' &&
+                      keyEvent.key === 'Enter' &&
+                      !keyEvent.shiftKey
+                    ) {
+                      e.preventDefault();
+                      if (canSend) onSubmit();
+                    }
+                  }}
+                />
+              </>
+            )}
             {shouldShowActionButton ? (
               <View style={styles.actionButtons}>
                 {showVoiceButton || voiceState !== 'idle' ? (
@@ -271,6 +298,7 @@ export function ChatInput({
             ) : null}
           </View>
         </View>
+        {footer ? <View style={styles.footer}>{footer}</View> : null}
       </View>
     </View>
   );
@@ -279,20 +307,21 @@ export function ChatInput({
 const styles = StyleSheet.create({
   shell: {
     overflow: 'hidden',
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: colors.borderLight,
   },
   container: {
     gap: spacing.xs,
     paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.md,
-    backgroundColor: 'rgba(6, 9, 13, 0.42)',
+    paddingTop: spacing.sm,
   },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: spacing.sm,
   },
+  footer: {
+    alignItems: 'flex-start',
+    marginTop: 2,
+  },
   attachmentList: {
     maxHeight: 34,
   },
@@ -332,6 +361,9 @@ const styles = StyleSheet.create({
   plusBtnPressed: {
     backgroundColor: colors.bgItem,
   },
+  plusBtnDisabled: {
+    opacity: 0.45,
+  },
   inputWrapper: {
     flex: 1,
     flexDirection: 'row',
@@ -345,6 +377,10 @@ const styles = StyleSheet.create({
     minHeight: 40,
     maxHeight: 120,
   },
+  inputWrapperVoiceActive: {
+    minHeight: 58,
+    paddingVertical: spacing.sm,
+  },
   input: {
     flex: 1,
     color: colors.textPrimary,
@@ -361,6 +397,36 @@ const styles = StyleSheet.create({
     left: spacing.md,
     top: spacing.xs,
   },
+  voiceStatusContent: {
+    flex: 1,
+    gap: 2,
+    justifyContent: 'center',
+    minHeight: 40,
+  },
+  voiceStatusLabelRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: spacing.xs,
+  },
+  voiceStatusDot: {
+    backgroundColor: colors.error,
+    borderRadius: 4,
+    height: 8,
+    width: 8,
+  },
+  voiceStatusDotBusy: {
+    opacity: 0.82,
+  },
+  voiceStatusTitle: {
+    color: colors.textPrimary,
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  voiceStatusHint: {
+    color: colors.textMuted,
+    fontSize: 12,
+    lineHeight: 16,
+  },
   actionButtons: {
     flexDirection: 'row',
     alignItems: 'center',