clawdex-mobile 1.0.0

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

@@ -0,0 +1,76 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+
+import { colors, spacing, typography } from '../theme';
+
+export type ActivityTone = 'running' | 'complete' | 'error' | 'idle';
+
+interface ActivityBarProps {
+  title: string;
+  detail?: string | null;
+  tone: ActivityTone;
+}
+
+const ICON_BY_TONE: Record<ActivityTone, keyof typeof Ionicons.glyphMap> = {
+  running: 'sparkles-outline',
+  complete: 'checkmark-circle-outline',
+  error: 'close-circle-outline',
+  idle: 'ellipse-outline',
+};
+
+const COLOR_BY_TONE: Record<ActivityTone, string> = {
+  running: colors.statusRunning,
+  complete: colors.statusComplete,
+  error: colors.statusError,
+  idle: colors.statusIdle,
+};
+
+export function ActivityBar({ title, detail, tone }: ActivityBarProps) {
+  const color = COLOR_BY_TONE[tone];
+  const [dotFrame, setDotFrame] = useState(0);
+
+  useEffect(() => {
+    setDotFrame(0);
+    if (tone !== 'running') {
+      return;
+    }
+    const timer = setInterval(() => {
+      setDotFrame((prev) => (prev + 1) % 4);
+    }, 450);
+    return () => clearInterval(timer);
+  }, [tone]);
+
+  const dots = tone === 'running' ? '.'.repeat(dotFrame) : '';
+  const suffix = detail ? ` · ${detail}` : '';
+  const text = `${title}${suffix}${dots}`;
+
+  return (
+    <View style={styles.container}>
+      {tone === 'running' ? (
+        <ActivityIndicator size="small" color={color} />
+      ) : (
+        <Ionicons name={ICON_BY_TONE[tone]} size={14} color={color} />
+      )}
+      <Text style={styles.text} numberOfLines={1}>
+        {text}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    marginHorizontal: spacing.lg,
+    paddingVertical: spacing.xs,
+  },
+  text: {
+    ...typography.caption,
+    fontWeight: '600',
+    color: colors.textPrimary,
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,207 @@
+import { Ionicons } from '@expo/vector-icons';
+import { ActivityIndicator, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { useState } from 'react';
+
+import type { ApprovalDecision, PendingApproval } from '../api/types';
+import { colors, radius, spacing, typography } from '../theme';
+
+interface ApprovalBannerProps {
+  approval: PendingApproval;
+  onResolve: (id: string, decision: ApprovalDecision) => void;
+}
+
+export function ApprovalBanner({ approval, onResolve }: ApprovalBannerProps) {
+  const [resolving, setResolving] = useState<string | null>(null);
+
+  const handleResolve = (decision: ApprovalDecision) => {
+    setResolving(decisionKey(decision));
+    onResolve(approval.id, decision);
+  };
+
+  const label = approval.kind === 'commandExecution'
+    ? approval.command ?? 'Run command'
+    : 'File change';
+  const canAllowSimilar =
+    approval.kind === 'commandExecution' &&
+    Array.isArray(approval.proposedExecpolicyAmendment) &&
+    approval.proposedExecpolicyAmendment.length > 0;
+
+  const monoFont = Platform.select({ ios: 'Menlo', default: 'monospace' });
+
+  return (
+    <Animated.View entering={FadeInDown.duration(250)} style={styles.container}>
+      <View style={styles.header}>
+        <Ionicons name="shield-checkmark-outline" size={16} color={colors.accent} />
+        <Text style={styles.title}>Approval requested</Text>
+      </View>
+
+      <Text style={[styles.command, { fontFamily: monoFont }]} numberOfLines={3}>
+        {label}
+      </Text>
+
+      {approval.reason ? (
+        <Text style={styles.reason} numberOfLines={2}>{approval.reason}</Text>
+      ) : null}
+
+      <View style={styles.actions}>
+        <Pressable
+          style={({ pressed }) => [styles.btn, styles.denyBtn, pressed && styles.btnPressed]}
+          onPress={() => handleResolve('decline')}
+          disabled={resolving !== null}
+        >
+          {resolving === 'decline' ? (
+            <ActivityIndicator size="small" color={colors.error} />
+          ) : (
+            <>
+              <Ionicons name="close" size={14} color={colors.error} />
+              <Text style={[styles.btnText, { color: colors.error }]}>Deny</Text>
+            </>
+          )}
+        </Pressable>
+
+        <Pressable
+          style={({ pressed }) => [styles.btn, styles.acceptBtn, pressed && styles.btnPressed]}
+          onPress={() => handleResolve('accept')}
+          disabled={resolving !== null}
+        >
+          {resolving === 'accept' ? (
+            <ActivityIndicator size="small" color={colors.textPrimary} />
+          ) : (
+            <>
+              <Ionicons name="checkmark" size={14} color={colors.textPrimary} />
+              <Text style={[styles.btnText, { color: colors.textPrimary }]}>Allow once</Text>
+            </>
+          )}
+        </Pressable>
+
+        <Pressable
+          style={({ pressed }) => [styles.btn, styles.acceptBtn, pressed && styles.btnPressed]}
+          onPress={() => handleResolve('acceptForSession')}
+          disabled={resolving !== null}
+        >
+          {resolving === 'acceptForSession' ? (
+            <ActivityIndicator size="small" color={colors.textPrimary} />
+          ) : (
+            <>
+              <Ionicons name="time-outline" size={14} color={colors.textPrimary} />
+              <Text style={[styles.btnText, { color: colors.textPrimary }]}>Session</Text>
+            </>
+          )}
+        </Pressable>
+
+        {canAllowSimilar ? (
+          <Pressable
+            style={({ pressed }) => [
+              styles.btn,
+              styles.acceptBtn,
+              styles.allowSimilarBtn,
+              pressed && styles.btnPressed,
+            ]}
+            onPress={() =>
+              handleResolve({
+                acceptWithExecpolicyAmendment: {
+                  execpolicy_amendment: approval.proposedExecpolicyAmendment ?? [],
+                },
+              })
+            }
+            disabled={resolving !== null}
+          >
+            {resolving === 'acceptWithExecpolicyAmendment' ? (
+              <ActivityIndicator size="small" color={colors.textPrimary} />
+            ) : (
+              <>
+                <Ionicons name="flash-outline" size={14} color={colors.textPrimary} />
+                <Text style={[styles.btnText, { color: colors.textPrimary }]}>Allow similar</Text>
+              </>
+            )}
+          </Pressable>
+        ) : null}
+      </View>
+    </Animated.View>
+  );
+}
+
+function decisionKey(decision: ApprovalDecision): string {
+  if (typeof decision === 'string') {
+    return decision;
+  }
+
+  if ('acceptWithExecpolicyAmendment' in decision) {
+    return 'acceptWithExecpolicyAmendment';
+  }
+
+  return 'unknown';
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: spacing.lg,
+    marginBottom: spacing.sm,
+    backgroundColor: colors.bgItem,
+    borderWidth: 1,
+    borderColor: colors.borderHighlight,
+    borderRadius: radius.md,
+    padding: spacing.md,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    marginBottom: spacing.sm,
+  },
+  title: {
+    ...typography.headline,
+    color: colors.accent,
+    fontSize: 13,
+  },
+  command: {
+    fontSize: 12,
+    color: colors.textPrimary,
+    lineHeight: 18,
+    backgroundColor: colors.bgItem,
+    borderRadius: radius.sm,
+    padding: spacing.sm,
+    marginBottom: spacing.sm,
+    overflow: 'hidden',
+  },
+  reason: {
+    ...typography.caption,
+    color: colors.textSecondary,
+    marginBottom: spacing.sm,
+  },
+  actions: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.sm,
+  },
+  btn: {
+    flexGrow: 1,
+    minWidth: 112,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.sm,
+    borderWidth: 1,
+  },
+  btnPressed: {
+    opacity: 0.7,
+  },
+  denyBtn: {
+    borderColor: 'rgba(239, 68, 68, 0.3)',
+    backgroundColor: 'rgba(239, 68, 68, 0.08)',
+  },
+  acceptBtn: {
+    borderColor: colors.borderHighlight,
+    backgroundColor: colors.bgInput,
+  },
+  allowSimilarBtn: {
+    flexBasis: '100%',
+  },
+  btnText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+});

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

@@ -0,0 +1,43 @@
+import { Image, StyleSheet, View } from 'react-native';
+import { colors } from '../theme';
+import brandMarkPng from '../../assets/brand/mark.png';
+
+interface BrandMarkProps {
+  size?: number;
+}
+
+export function BrandMark({ size = 18 }: BrandMarkProps) {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: size,
+          height: size,
+          borderRadius: Math.round(size * 0.28),
+        },
+      ]}
+    >
+      <Image
+        source={brandMarkPng}
+        resizeMode="contain"
+        style={styles.image}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.bgItem,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: colors.borderLight,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  image: {
+    width: '80%',
+    height: '80%',
+  },
+});

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

@@ -0,0 +1,106 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { BrandMark } from './BrandMark';
+import { colors, spacing, typography } from '../theme';
+
+interface ChatHeaderProps {
+  onOpenDrawer: () => void;
+  title: string;
+  onOpenTitleMenu?: () => void;
+  rightIconName?: keyof typeof Ionicons.glyphMap;
+  onRightActionPress?: () => void;
+}
+
+export function ChatHeader({
+  onOpenDrawer,
+  title,
+  onOpenTitleMenu,
+  rightIconName = 'sparkles-outline',
+  onRightActionPress,
+}: ChatHeaderProps) {
+  const titleDisplay = title.trim() || 'New chat';
+
+  return (
+    <View style={styles.headerContainer}>
+      <SafeAreaView>
+        <View style={styles.header}>
+          <Pressable onPress={onOpenDrawer} hitSlop={8} style={styles.menuBtn}>
+            <Ionicons name="menu" size={22} color={colors.textPrimary} />
+          </Pressable>
+          <BrandMark size={22} />
+          {onOpenTitleMenu ? (
+            <Pressable
+              onPress={onOpenTitleMenu}
+              hitSlop={8}
+              style={({ pressed }) => [styles.titleButton, pressed && styles.titleButtonPressed]}
+            >
+              <Text numberOfLines={1} style={styles.modelName}>
+                {titleDisplay}
+              </Text>
+              <Ionicons name="chevron-down" size={14} color={colors.textMuted} />
+            </Pressable>
+          ) : (
+            <View style={styles.modelNameRow}>
+              <Text numberOfLines={1} style={styles.modelName}>
+                {titleDisplay}
+              </Text>
+            </View>
+          )}
+          <View style={{ flex: 1 }} />
+          {onRightActionPress ? (
+            <Pressable onPress={onRightActionPress} hitSlop={8} style={styles.rightBtn}>
+              <Ionicons name={rightIconName} size={20} color={colors.textMuted} />
+            </Pressable>
+          ) : (
+            <Ionicons name={rightIconName} size={20} color={colors.textMuted} />
+          )}
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    backgroundColor: colors.bgMain,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.borderLight,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+  },
+  menuBtn: {
+    padding: spacing.xs,
+  },
+  rightBtn: {
+    padding: spacing.xs,
+  },
+  modelNameRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    flexShrink: 1,
+  },
+  titleButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    borderRadius: 8,
+    paddingHorizontal: spacing.xs,
+    paddingVertical: 2,
+    flexShrink: 1,
+  },
+  titleButtonPressed: {
+    backgroundColor: colors.bgItem,
+  },
+  modelName: {
+    ...typography.largeTitle,
+    fontSize: 20,
+    color: colors.textPrimary,
+    flexShrink: 1,
+  },
+});

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

@@ -0,0 +1,236 @@
+import { Ionicons } from '@expo/vector-icons';
+import {
+  ActivityIndicator,
+  type NativeSyntheticEvent,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  type TextInputKeyPressEventData,
+  View,
+} from 'react-native';
+
+import { colors, radius, spacing } from '../theme';
+
+interface ChatInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onFocus?: () => void;
+  onSubmit: () => void;
+  onStop?: () => void;
+  onAttachPress: () => void;
+  attachments?: Array<{ id: string; label: string }>;
+  onRemoveAttachment?: (id: string) => void;
+  isLoading: boolean;
+  showStopButton?: boolean;
+  isStopping?: boolean;
+  placeholder?: string;
+}
+
+export function ChatInput({
+  value,
+  onChangeText,
+  onFocus,
+  onSubmit,
+  onStop,
+  onAttachPress,
+  attachments = [],
+  onRemoveAttachment,
+  isLoading,
+  showStopButton = false,
+  isStopping = false,
+  placeholder = 'Message Codex...',
+}: ChatInputProps) {
+  const canSend = value.trim().length > 0 && !isLoading;
+  const canStop = Boolean(showStopButton && onStop);
+  const shouldShowActionButton = canStop || canSend || isLoading;
+
+  return (
+    <View style={styles.container}>
+      {attachments.length > 0 ? (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.attachmentListContent}
+          style={styles.attachmentList}
+        >
+          {attachments.map((attachment, index) => (
+            <Pressable
+              key={`${attachment.id}-${String(index)}`}
+              onPress={
+                onRemoveAttachment
+                  ? () => onRemoveAttachment(attachment.id)
+                  : undefined
+              }
+              style={({ pressed }) => [
+                styles.attachmentChip,
+                pressed && styles.attachmentChipPressed,
+              ]}
+            >
+              <Ionicons name="attach-outline" size={12} color={colors.textMuted} />
+              <Text style={styles.attachmentChipText} numberOfLines={1}>
+                {attachment.label}
+              </Text>
+              {onRemoveAttachment ? (
+                <Ionicons name="close-outline" size={12} color={colors.textMuted} />
+              ) : null}
+            </Pressable>
+          ))}
+        </ScrollView>
+      ) : null}
+
+      <View style={styles.row}>
+        <Pressable
+          onPress={onAttachPress}
+          style={({ pressed }) => [styles.plusBtn, pressed && styles.plusBtnPressed]}
+        >
+          <Ionicons name="add" size={20} color={colors.textMuted} />
+        </Pressable>
+
+        <View style={styles.inputWrapper}>
+          <TextInput
+            style={styles.input}
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={onFocus}
+            placeholder={placeholder}
+            placeholderTextColor={colors.textMuted}
+            multiline
+            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 ? (
+            <Pressable
+              onPress={canStop ? onStop : canSend ? onSubmit : undefined}
+              style={styles.sendBtn}
+              disabled={canStop ? isStopping : !canSend}
+            >
+              {canStop ? (
+                <View style={styles.stopButtonContent}>
+                  <Ionicons name="square" size={10} color={colors.textPrimary} />
+                  <ActivityIndicator
+                    size="small"
+                    color={colors.textMuted}
+                    style={styles.stopButtonSpinner}
+                  />
+                </View>
+              ) : isLoading ? (
+                <ActivityIndicator size="small" color={colors.textMuted} />
+              ) : (
+                <Ionicons name="arrow-up" size={14} color={colors.textPrimary} />
+              )}
+            </Pressable>
+          ) : null}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xs,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    paddingBottom: Platform.OS === 'ios' ? spacing.lg : spacing.md,
+    backgroundColor: colors.bgMain,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: colors.borderLight,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  attachmentList: {
+    maxHeight: 34,
+  },
+  attachmentListContent: {
+    gap: spacing.xs,
+    paddingRight: spacing.sm,
+  },
+  attachmentChip: {
+    height: 28,
+    borderRadius: 14,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: colors.borderHighlight,
+    backgroundColor: colors.bgInput,
+    paddingHorizontal: spacing.sm,
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: spacing.xs,
+    maxWidth: 260,
+  },
+  attachmentChipPressed: {
+    backgroundColor: colors.bgItem,
+  },
+  attachmentChipText: {
+    color: colors.textSecondary,
+    fontSize: 12,
+    flexShrink: 1,
+  },
+  plusBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  plusBtnPressed: {
+    backgroundColor: colors.bgItem,
+  },
+  inputWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.bgInput,
+    borderWidth: 1,
+    borderColor: colors.borderHighlight,
+    borderRadius: radius.lg,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.xs,
+    minHeight: 40,
+    maxHeight: 120,
+  },
+  input: {
+    flex: 1,
+    color: colors.textPrimary,
+    fontSize: 14,
+    lineHeight: 20,
+    paddingVertical: Platform.OS === 'ios' ? 2 : 0,
+    textAlignVertical: 'center',
+  },
+  sendBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: colors.bgItem,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: spacing.xs,
+  },
+  stopButtonContent: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stopButtonSpinner: {
+    position: 'absolute',
+  },
+});