feat: add Timmy Chat mobile app (Expo/React Native)

- Single-screen chat interface with Timmy's sovereign AI personality
- Text messaging with real-time AI responses via server chat API
- Voice recording and playback with waveform visualization
- Image sharing (camera + photo library) with full-screen viewer
- File attachments via document picker
- Dark arcane theme matching the Timmy Time dashboard
- Custom app icon with glowing T circuit design
- Timmy system prompt ported from dashboard prompts.py
- Unit tests for chat utilities and message types

mobile-app/components/chat-bubble.tsx

@@ -0,0 +1,214 @@
+import { useMemo } from "react";
+import { Text, View, StyleSheet, Image, Platform } from "react-native";
+import Pressable from "@/components/ui/pressable-fix";
+import { useColors } from "@/hooks/use-colors";
+import type { ChatMessage } from "@/shared/types";
+import { formatBytes, formatDuration } from "@/lib/chat-store";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+
+interface ChatBubbleProps {
+  message: ChatMessage;
+  onImagePress?: (uri: string) => void;
+  onPlayVoice?: (message: ChatMessage) => void;
+  isPlayingVoice?: boolean;
+}
+
+export function ChatBubble({ message, onImagePress, onPlayVoice, isPlayingVoice }: ChatBubbleProps) {
+  const colors = useColors();
+  const isUser = message.role === "user";
+
+  // Stable waveform bar heights based on message id
+  const waveHeights = useMemo(() => {
+    let seed = 0;
+    for (let i = 0; i < message.id.length; i++) seed = (seed * 31 + message.id.charCodeAt(i)) | 0;
+    return Array.from({ length: 12 }, (_, i) => {
+      seed = (seed * 16807 + i * 1013) % 2147483647;
+      return 4 + (seed % 15);
+    });
+  }, [message.id]);
+
+  const bubbleStyle = [
+    styles.bubble,
+    {
+      backgroundColor: isUser ? colors.primary : colors.surface,
+      borderColor: isUser ? colors.primary : colors.border,
+      alignSelf: isUser ? "flex-end" as const : "flex-start" as const,
+    },
+  ];
+
+  const textColor = isUser ? "#fff" : colors.foreground;
+  const mutedColor = isUser ? "rgba(255,255,255,0.6)" : colors.muted;
+
+  const timeStr = new Date(message.timestamp).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  return (
+    <View style={[styles.row, isUser ? styles.rowUser : styles.rowAssistant]}>
+      {!isUser && (
+        <View style={[styles.avatar, { backgroundColor: colors.primary }]}>
+          <Text style={styles.avatarText}>T</Text>
+        </View>
+      )}
+      <View style={bubbleStyle}>
+        {message.contentType === "text" && (
+          <Text style={[styles.text, { color: textColor }]}>{message.text}</Text>
+        )}
+
+        {message.contentType === "image" && (
+          <Pressable
+            onPress={() => message.uri && onImagePress?.(message.uri)}
+            style={({ pressed }) => [pressed && { opacity: 0.8 }]}
+          >
+            <Image
+              source={{ uri: message.uri }}
+              style={styles.image}
+              resizeMode="cover"
+            />
+            {message.text ? (
+              <Text style={[styles.text, { color: textColor, marginTop: 6 }]}>
+                {message.text}
+              </Text>
+            ) : null}
+          </Pressable>
+        )}
+
+        {message.contentType === "voice" && (
+          <Pressable
+            onPress={() => onPlayVoice?.(message)}
+            style={({ pressed }) => [styles.voiceRow, pressed && { opacity: 0.7 }]}
+          >
+            <MaterialIcons
+              name={isPlayingVoice ? "pause" : "play-arrow"}
+              size={24}
+              color={textColor}
+            />
+            <View style={[styles.waveform, { backgroundColor: isUser ? "rgba(255,255,255,0.3)" : colors.border }]}>
+              {waveHeights.map((h, i) => (
+                <View
+                  key={i}
+                  style={[
+                    styles.waveBar,
+                    {
+                      height: h,
+                      backgroundColor: textColor,
+                      opacity: 0.6,
+                    },
+                  ]}
+                />
+              ))}
+            </View>
+            <Text style={[styles.duration, { color: mutedColor }]}>
+              {formatDuration(message.duration ?? 0)}
+            </Text>
+          </Pressable>
+        )}
+
+        {message.contentType === "file" && (
+          <View style={styles.fileRow}>
+            <MaterialIcons name="insert-drive-file" size={28} color={textColor} />
+            <View style={styles.fileInfo}>
+              <Text style={[styles.fileName, { color: textColor }]} numberOfLines={1}>
+                {message.fileName ?? "File"}
+              </Text>
+              <Text style={[styles.fileSize, { color: mutedColor }]}>
+                {formatBytes(message.fileSize ?? 0)}
+              </Text>
+            </View>
+          </View>
+        )}
+
+        <Text style={[styles.time, { color: mutedColor }]}>{timeStr}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    marginBottom: 8,
+    paddingHorizontal: 12,
+    alignItems: "flex-end",
+  },
+  rowUser: {
+    justifyContent: "flex-end",
+  },
+  rowAssistant: {
+    justifyContent: "flex-start",
+  },
+  avatar: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 8,
+  },
+  avatarText: {
+    color: "#fff",
+    fontWeight: "700",
+    fontSize: 14,
+  },
+  bubble: {
+    maxWidth: "78%",
+    borderRadius: 16,
+    borderWidth: 1,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 21,
+  },
+  time: {
+    fontSize: 10,
+    marginTop: 4,
+    textAlign: "right",
+  },
+  image: {
+    width: 220,
+    height: 180,
+    borderRadius: 10,
+  },
+  voiceRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    minWidth: 160,
+  },
+  waveform: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    height: 24,
+    borderRadius: 4,
+    paddingHorizontal: 4,
+  },
+  waveBar: {
+    width: 3,
+    borderRadius: 1.5,
+  },
+  duration: {
+    fontSize: 12,
+    minWidth: 32,
+  },
+  fileRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  fileInfo: {
+    flex: 1,
+  },
+  fileName: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  fileSize: {
+    fontSize: 11,
+    marginTop: 2,
+  },
+});

mobile-app/components/chat-header.tsx

@@ -0,0 +1,69 @@
+import { View, Text, StyleSheet } from "react-native";
+import Pressable from "@/components/ui/pressable-fix";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { useColors } from "@/hooks/use-colors";
+import { useChat } from "@/lib/chat-store";
+
+export function ChatHeader() {
+  const colors = useColors();
+  const { clearChat } = useChat();
+
+  return (
+    <View style={[styles.header, { backgroundColor: colors.background, borderBottomColor: colors.border }]}>
+      <View style={styles.left}>
+        <View style={[styles.statusDot, { backgroundColor: colors.success }]} />
+        <Text style={[styles.title, { color: colors.foreground }]}>TIMMY</Text>
+        <Text style={[styles.subtitle, { color: colors.muted }]}>SOVEREIGN AI</Text>
+      </View>
+      <Pressable
+        onPress={clearChat}
+        style={({ pressed }: { pressed: boolean }) => [
+          styles.clearBtn,
+          { borderColor: colors.border },
+          pressed && { opacity: 0.6 },
+        ]}
+      >
+        <MaterialIcons name="delete-outline" size={16} color={colors.muted} />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+  },
+  left: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "700",
+    letterSpacing: 2,
+  },
+  subtitle: {
+    fontSize: 9,
+    letterSpacing: 1.5,
+    fontWeight: "600",
+  },
+  clearBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

mobile-app/components/chat-input.tsx

@@ -0,0 +1,301 @@
+import { useCallback, useRef, useState } from "react";
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  Platform,
+  ActionSheetIOS,
+  Alert,
+  Keyboard,
+} from "react-native";
+import Pressable from "@/components/ui/pressable-fix";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { useColors } from "@/hooks/use-colors";
+import { useChat } from "@/lib/chat-store";
+import * as ImagePicker from "expo-image-picker";
+import * as DocumentPicker from "expo-document-picker";
+import {
+  useAudioRecorder,
+  useAudioRecorderState,
+  RecordingPresets,
+  requestRecordingPermissionsAsync,
+  setAudioModeAsync,
+} from "expo-audio";
+import * as Haptics from "expo-haptics";
+
+export function ChatInput() {
+  const colors = useColors();
+  const { sendTextMessage, sendAttachment, isTyping } = useChat();
+  const [text, setText] = useState("");
+  const [isRecording, setIsRecording] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
+  const recorderState = useAudioRecorderState(audioRecorder);
+
+  const handleSend = useCallback(() => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    setText("");
+    Keyboard.dismiss();
+    if (Platform.OS !== "web") {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    }
+    sendTextMessage(trimmed);
+  }, [text, sendTextMessage]);
+
+  // ── Attachment sheet ────────────────────────────────────────────────────
+
+  const handleAttachment = useCallback(() => {
+    if (Platform.OS !== "web") {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    }
+
+    const options = ["Take Photo", "Choose from Library", "Choose File", "Cancel"];
+    const cancelIndex = 3;
+
+    if (Platform.OS === "ios") {
+      ActionSheetIOS.showActionSheetWithOptions(
+        { options, cancelButtonIndex: cancelIndex },
+        (idx) => {
+          if (idx === 0) takePhoto();
+          else if (idx === 1) pickImage();
+          else if (idx === 2) pickFile();
+        },
+      );
+    } else {
+      // Android / Web fallback
+      Alert.alert("Attach", "Choose an option", [
+        { text: "Take Photo", onPress: takePhoto },
+        { text: "Choose from Library", onPress: pickImage },
+        { text: "Choose File", onPress: pickFile },
+        { text: "Cancel", style: "cancel" },
+      ]);
+    }
+  }, []);
+
+  const takePhoto = async () => {
+    const { status } = await ImagePicker.requestCameraPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert("Permission needed", "Camera access is required to take photos.");
+      return;
+    }
+    const result = await ImagePicker.launchCameraAsync({
+      quality: 0.8,
+      allowsEditing: false,
+    });
+    if (!result.canceled && result.assets[0]) {
+      const asset = result.assets[0];
+      sendAttachment({
+        contentType: "image",
+        uri: asset.uri,
+        fileName: asset.fileName ?? "photo.jpg",
+        fileSize: asset.fileSize,
+        mimeType: asset.mimeType ?? "image/jpeg",
+      });
+    }
+  };
+
+  const pickImage = async () => {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images"],
+      quality: 0.8,
+      allowsEditing: false,
+    });
+    if (!result.canceled && result.assets[0]) {
+      const asset = result.assets[0];
+      sendAttachment({
+        contentType: "image",
+        uri: asset.uri,
+        fileName: asset.fileName ?? "image.jpg",
+        fileSize: asset.fileSize,
+        mimeType: asset.mimeType ?? "image/jpeg",
+      });
+    }
+  };
+
+  const pickFile = async () => {
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        type: "*/*",
+        copyToCacheDirectory: true,
+      });
+      if (!result.canceled && result.assets[0]) {
+        const asset = result.assets[0];
+        sendAttachment({
+          contentType: "file",
+          uri: asset.uri,
+          fileName: asset.name,
+          fileSize: asset.size,
+          mimeType: asset.mimeType ?? "application/octet-stream",
+        });
+      }
+    } catch (err) {
+      console.warn("Document picker error:", err);
+    }
+  };
+
+  // ── Voice recording ───────────────────────────────────────────────────
+
+  const startRecording = async () => {
+    try {
+      const { granted } = await requestRecordingPermissionsAsync();
+      if (!granted) {
+        Alert.alert("Permission needed", "Microphone access is required for voice messages.");
+        return;
+      }
+      await setAudioModeAsync({ playsInSilentMode: true, allowsRecording: true });
+      await audioRecorder.prepareToRecordAsync();
+      audioRecorder.record();
+      setIsRecording(true);
+      if (Platform.OS !== "web") {
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+      }
+    } catch (err) {
+      console.warn("Recording start error:", err);
+    }
+  };
+
+  const stopRecording = async () => {
+    try {
+      await audioRecorder.stop();
+      setIsRecording(false);
+      if (Platform.OS !== "web") {
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      }
+      const uri = audioRecorder.uri;
+      if (uri) {
+        const duration = recorderState.durationMillis ? recorderState.durationMillis / 1000 : 0;
+        sendAttachment({
+          contentType: "voice",
+          uri,
+          fileName: "voice_message.m4a",
+          mimeType: "audio/m4a",
+          duration,
+        });
+      }
+    } catch (err) {
+      console.warn("Recording stop error:", err);
+      setIsRecording(false);
+    }
+  };
+
+  const handleMicPress = useCallback(() => {
+    if (isRecording) {
+      stopRecording();
+    } else {
+      startRecording();
+    }
+  }, [isRecording]);
+
+  const hasText = text.trim().length > 0;
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background, borderTopColor: colors.border }]}>
+      {/* Attachment button */}
+      <Pressable
+        onPress={handleAttachment}
+        style={({ pressed }: { pressed: boolean }) => [
+          styles.iconBtn,
+          { backgroundColor: colors.surface },
+          pressed && { opacity: 0.6 },
+        ]}
+        disabled={isTyping}
+      >
+        <MaterialIcons name="add" size={22} color={colors.muted} />
+      </Pressable>
+
+      {/* Text input */}
+      <TextInput
+        ref={inputRef}
+        value={text}
+        onChangeText={setText}
+        placeholder={isRecording ? "Recording..." : "Message Timmy..."}
+        placeholderTextColor={colors.muted}
+        style={[
+          styles.input,
+          {
+            backgroundColor: colors.surface,
+            color: colors.foreground,
+            borderColor: colors.border,
+          },
+        ]}
+        multiline
+        maxLength={4000}
+        returnKeyType="default"
+        editable={!isRecording && !isTyping}
+        onSubmitEditing={handleSend}
+        blurOnSubmit={false}
+      />
+
+      {/* Send or Mic button */}
+      {hasText ? (
+        <Pressable
+          onPress={handleSend}
+          style={({ pressed }: { pressed: boolean }) => [
+            styles.sendBtn,
+            { backgroundColor: colors.primary },
+            pressed && { transform: [{ scale: 0.95 }], opacity: 0.9 },
+          ]}
+          disabled={isTyping}
+        >
+          <MaterialIcons name="send" size={20} color="#fff" />
+        </Pressable>
+      ) : (
+        <Pressable
+          onPress={handleMicPress}
+          style={({ pressed }: { pressed: boolean }) => [
+            styles.sendBtn,
+            {
+              backgroundColor: isRecording ? colors.error : colors.surface,
+            },
+            pressed && { transform: [{ scale: 0.95 }], opacity: 0.9 },
+          ]}
+          disabled={isTyping}
+        >
+          <MaterialIcons
+            name={isRecording ? "stop" : "mic"}
+            size={20}
+            color={isRecording ? "#fff" : colors.primary}
+          />
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    gap: 8,
+    borderTopWidth: 1,
+  },
+  iconBtn: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  input: {
+    flex: 1,
+    minHeight: 38,
+    maxHeight: 120,
+    borderRadius: 19,
+    borderWidth: 1,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    fontSize: 15,
+    lineHeight: 20,
+  },
+  sendBtn: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

mobile-app/components/empty-chat.tsx

@@ -0,0 +1,55 @@
+import { View, Text, StyleSheet } from "react-native";
+import { useColors } from "@/hooks/use-colors";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+
+export function EmptyChat() {
+  const colors = useColors();
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.iconCircle, { backgroundColor: colors.surface, borderColor: colors.border }]}>
+        <MaterialIcons name="chat-bubble-outline" size={40} color={colors.primary} />
+      </View>
+      <Text style={[styles.title, { color: colors.foreground }]}>TIMMY</Text>
+      <Text style={[styles.subtitle, { color: colors.muted }]}>SOVEREIGN AI AGENT</Text>
+      <Text style={[styles.hint, { color: colors.muted }]}>
+        Send a message, voice note, image, or file to get started.
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 40,
+    gap: 8,
+  },
+  iconCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+    letterSpacing: 4,
+  },
+  subtitle: {
+    fontSize: 11,
+    letterSpacing: 2,
+    fontWeight: "600",
+  },
+  hint: {
+    fontSize: 13,
+    textAlign: "center",
+    marginTop: 12,
+    lineHeight: 19,
+  },
+});

mobile-app/components/haptic-tab.tsx

@@ -0,0 +1,18 @@
+import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
+import { PlatformPressable } from "@react-navigation/elements";
+import * as Haptics from "expo-haptics";
+
+export function HapticTab(props: BottomTabBarButtonProps) {
+  return (
+    <PlatformPressable
+      {...props}
+      onPressIn={(ev) => {
+        if (process.env.EXPO_OS === "ios") {
+          // Add a soft haptic feedback when pressing down on the tabs.
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+        props.onPressIn?.(ev);
+      }}
+    />
+  );
+}

mobile-app/components/image-viewer.tsx

@@ -0,0 +1,54 @@
+import { Modal, View, Image, StyleSheet, StatusBar } from "react-native";
+import Pressable from "@/components/ui/pressable-fix";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+
+interface ImageViewerProps {
+  uri: string | null;
+  onClose: () => void;
+}
+
+export function ImageViewer({ uri, onClose }: ImageViewerProps) {
+  if (!uri) return null;
+
+  return (
+    <Modal visible animationType="fade" transparent statusBarTranslucent>
+      <View style={styles.overlay}>
+        <StatusBar barStyle="light-content" />
+        <Image source={{ uri }} style={styles.image} resizeMode="contain" />
+        <Pressable
+          onPress={onClose}
+          style={({ pressed }: { pressed: boolean }) => [
+            styles.closeBtn,
+            pressed && { opacity: 0.6 },
+          ]}
+        >
+          <MaterialIcons name="close" size={28} color="#fff" />
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.95)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    width: "100%",
+    height: "80%",
+  },
+  closeBtn: {
+    position: "absolute",
+    top: 50,
+    right: 20,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "rgba(255,255,255,0.15)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

mobile-app/components/screen-container.tsx

@@ -0,0 +1,68 @@
+import { View, type ViewProps } from "react-native";
+import { SafeAreaView, type Edge } from "react-native-safe-area-context";
+
+import { cn } from "@/lib/utils";
+
+export interface ScreenContainerProps extends ViewProps {
+  /**
+   * SafeArea edges to apply. Defaults to ["top", "left", "right"].
+   * Bottom is typically handled by Tab Bar.
+   */
+  edges?: Edge[];
+  /**
+   * Tailwind className for the content area.
+   */
+  className?: string;
+  /**
+   * Additional className for the outer container (background layer).
+   */
+  containerClassName?: string;
+  /**
+   * Additional className for the SafeAreaView (content layer).
+   */
+  safeAreaClassName?: string;
+}
+
+/**
+ * A container component that properly handles SafeArea and background colors.
+ *
+ * The outer View extends to full screen (including status bar area) with the background color,
+ * while the inner SafeAreaView ensures content is within safe bounds.
+ *
+ * Usage:
+ * ```tsx
+ * <ScreenContainer className="p-4">
+ *   <Text className="text-2xl font-bold text-foreground">
+ *     Welcome
+ *   </Text>
+ * </ScreenContainer>
+ * ```
+ */
+export function ScreenContainer({
+  children,
+  edges = ["top", "left", "right"],
+  className,
+  containerClassName,
+  safeAreaClassName,
+  style,
+  ...props
+}: ScreenContainerProps) {
+  return (
+    <View
+      className={cn(
+        "flex-1",
+        "bg-background",
+        containerClassName
+      )}
+      {...props}
+    >
+      <SafeAreaView
+        edges={edges}
+        className={cn("flex-1", safeAreaClassName)}
+        style={style}
+      >
+        <View className={cn("flex-1", className)}>{children}</View>
+      </SafeAreaView>
+    </View>
+  );
+}

mobile-app/components/themed-view.tsx

@@ -0,0 +1,15 @@
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+export interface ThemedViewProps extends ViewProps {
+  className?: string;
+}
+
+/**
+ * A View component with automatic theme-aware background.
+ * Uses NativeWind for styling - pass className for additional styles.
+ */
+export function ThemedView({ className, ...otherProps }: ThemedViewProps) {
+  return <View className={cn("bg-background", className)} {...otherProps} />;
+}

mobile-app/components/typing-indicator.tsx

@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  withDelay,
+  withSequence,
+} from "react-native-reanimated";
+import { useColors } from "@/hooks/use-colors";
+
+export function TypingIndicator() {
+  const colors = useColors();
+  const dot1 = useSharedValue(0.3);
+  const dot2 = useSharedValue(0.3);
+  const dot3 = useSharedValue(0.3);
+
+  useEffect(() => {
+    const anim = (sv: { value: number }, delay: number) => {
+      sv.value = withDelay(
+        delay,
+        withRepeat(
+          withSequence(
+            withTiming(1, { duration: 400 }),
+            withTiming(0.3, { duration: 400 }),
+          ),
+          -1,
+        ),
+      );
+    };
+    anim(dot1, 0);
+    anim(dot2, 200);
+    anim(dot3, 400);
+  }, []);
+
+  const style1 = useAnimatedStyle(() => ({ opacity: dot1.value }));
+  const style2 = useAnimatedStyle(() => ({ opacity: dot2.value }));
+  const style3 = useAnimatedStyle(() => ({ opacity: dot3.value }));
+
+  const dotBase = [styles.dot, { backgroundColor: colors.primary }];
+
+  return (
+    <View style={[styles.row, { alignItems: "flex-end" }]}>
+      <View style={[styles.avatar, { backgroundColor: colors.primary }]}>
+        <Animated.Text style={styles.avatarText}>T</Animated.Text>
+      </View>
+      <View style={[styles.bubble, { backgroundColor: colors.surface, borderColor: colors.border }]}>
+        <Animated.View style={[dotBase, style1]} />
+        <Animated.View style={[dotBase, style2]} />
+        <Animated.View style={[dotBase, style3]} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    paddingHorizontal: 12,
+    marginBottom: 8,
+  },
+  avatar: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 8,
+  },
+  avatarText: {
+    color: "#fff",
+    fontWeight: "700",
+    fontSize: 14,
+  },
+  bubble: {
+    flexDirection: "row",
+    gap: 5,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderRadius: 16,
+    borderWidth: 1,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+});

mobile-app/components/ui/icon-symbol.tsx

@@ -0,0 +1,41 @@
+// Fallback for using MaterialIcons on Android and web.
+
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { SymbolWeight, SymbolViewProps } from "expo-symbols";
+import { ComponentProps } from "react";
+import { OpaqueColorValue, type StyleProp, type TextStyle } from "react-native";
+
+type IconMapping = Record<SymbolViewProps["name"], ComponentProps<typeof MaterialIcons>["name"]>;
+type IconSymbolName = keyof typeof MAPPING;
+
+/**
+ * Add your SF Symbols to Material Icons mappings here.
+ * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
+ * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
+ */
+const MAPPING = {
+  "house.fill": "home",
+  "paperplane.fill": "send",
+  "chevron.left.forwardslash.chevron.right": "code",
+  "chevron.right": "chevron-right",
+} as IconMapping;
+
+/**
+ * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
+ * This ensures a consistent look across platforms, and optimal resource usage.
+ * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
+ */
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+}: {
+  name: IconSymbolName;
+  size?: number;
+  color: string | OpaqueColorValue;
+  style?: StyleProp<TextStyle>;
+  weight?: SymbolWeight;
+}) {
+  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
+}

mobile-app/components/ui/pressable-fix.tsx

@@ -0,0 +1,6 @@
+/**
+ * Re-export Pressable with proper typing for style callbacks.
+ * NativeWind disables className on Pressable, so we always use the style prop.
+ */
+import { Pressable } from "react-native";
+export default Pressable;