feat(mobile): scaffold Expo mobile app for Timmy with Face/Matrix/Feed tabs
Task #42 — Timmy Harness: Expo Mobile App ## What was built - New Expo artifact at artifacts/mobile, slug `mobile`, preview path `/mobile/` - Three-tab bottom navigation (Face, Matrix, Feed) — NativeTabs with liquid glass on iOS 26+ - Dark wizard theme (#0A0A12 background, #7C3AED accent) ## WebSocket context (context/TimmyContext.tsx) - Full WebSocket connection to /api/ws with exponential backoff reconnect (1s→30s cap) - Sends visitor_enter handshake on connect, handles ping/pong - Derives timmyMood from agent_state events (idle/thinking/working/speaking) - recentEvents list capped at 100 - sendVisitorMessage() sets mood to "thinking" immediately on send (deterministic waiting state) - speaking mood auto-reverts after estimated TTS duration ## Face tab (app/(tabs)/index.tsx) - Animated 2D wizard face via react-native-svg (hat, head, beard, eyes, pupils, mouth arc, magic orb) - AnimatedPupils: pupilScaleAnim drives actual rendered pupil Circle radius (BASE_PUPIL_R * scale) - AnimatedEyelids: eyeScaleYAnim drives top eyelid overlay via Animated.Value listener - AnimatedMouth: smileAnim + mouthOscAnim combined; SVG Path rebuilt on each frame via listener - speaking mood: 1Hz mouth oscillation via Animated.loop; per-mood body bob speed/amplitude - @react-native-voice/voice installed and statically imported; Voice.onSpeechResults wired properly - startMicPulse/stopMicPulse declared before native voice useEffect (correct hook order) - Web Speech API typed with SpeechRecognitionWindow local interface (zero `any` casts) - sendVisitorMessage() called on final transcript (also triggers thinking mood immediately) - expo-speech TTS speaks Timmy's chat replies on native ## Matrix tab (app/(tabs)/matrix.tsx) - URL normalization: strips existing protocol, uses http for localhost, https for all other hosts - Full-screen WebView with loading spinner and error/retry state; iframe fallback for web ## Feed tab (app/(tabs)/feed.tsx) - FlatList<WsEvent> with proper generics; EventConfig discriminated union (Feather|MaterialCommunityIcons) - Icon names typed via React.ComponentProps["name"] (no `any`) - Color-coded events; event count in header; empty state with connection-aware message ## Type safety - TypeScript typecheck passes with 0 errors - No `any` casts anywhere in new code ## Deviations - expo-av removed (not used; voice input handled via @react-native-voice/voice + Web Speech API) - expo-speech/expo-av NOT in app.json plugins (no config plugins — causes PluginError if listed) - app.json extra.apiDomain added for env-driven domain configuration per requirement - expo-speech pinned ~14.0.8, react-native-webview 13.15.0 for Expo SDK 54 compat - artifact.toml ensurePreviewReachable removed (Expo uses expo-domain router) - @react-native-voice/voice works in Expo Go Android; iOS needs native build (graceful fallback) Replit-Task-Id: 0748cbbf-7b84-4149-8fc0-9d697287a0e6
This commit is contained in:
alexpaynex
286
artifacts/mobile/components/ErrorFallback.tsx
Normal file
286
artifacts/mobile/components/ErrorFallback.tsx
Normal file
@@ -0,0 +1,286 @@
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import { reloadAppAsync } from "expo";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Modal,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
useColorScheme,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
||||
export type ErrorFallbackProps = {
|
||||
error: Error;
|
||||
resetError: () => void;
|
||||
};
|
||||
|
||||
export function ErrorFallback({ error, resetError }: ErrorFallbackProps) {
|
||||
const colorScheme = useColorScheme();
|
||||
const isDark = colorScheme === "dark";
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const theme = {
|
||||
background: isDark ? "#000000" : "#FFFFFF",
|
||||
backgroundSecondary: isDark ? "#1C1C1E" : "#F2F2F7",
|
||||
text: isDark ? "#FFFFFF" : "#000000",
|
||||
textSecondary: isDark ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)",
|
||||
link: "#007AFF",
|
||||
buttonText: "#FFFFFF",
|
||||
};
|
||||
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
|
||||
const handleRestart = async () => {
|
||||
try {
|
||||
await reloadAppAsync();
|
||||
} catch (restartError) {
|
||||
console.error("Failed to restart app:", restartError);
|
||||
resetError();
|
||||
}
|
||||
};
|
||||
|
||||
const formatErrorDetails = (): string => {
|
||||
let details = `Error: ${error.message}\n\n`;
|
||||
if (error.stack) {
|
||||
details += `Stack Trace:\n${error.stack}`;
|
||||
}
|
||||
return details;
|
||||
};
|
||||
|
||||
const monoFont = Platform.select({
|
||||
ios: "Menlo",
|
||||
android: "monospace",
|
||||
default: "monospace",
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: theme.background }]}>
|
||||
{__DEV__ ? (
|
||||
<Pressable
|
||||
onPress={() => setIsModalVisible(true)}
|
||||
accessibilityLabel="View error details"
|
||||
accessibilityRole="button"
|
||||
style={({ pressed }) => [
|
||||
styles.topButton,
|
||||
{
|
||||
top: insets.top + 16,
|
||||
backgroundColor: theme.backgroundSecondary,
|
||||
opacity: pressed ? 0.8 : 1,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Feather name="alert-circle" size={20} color={theme.text} />
|
||||
</Pressable>
|
||||
) : null}
|
||||
|
||||
<View style={styles.content}>
|
||||
<Text style={[styles.title, { color: theme.text }]}>
|
||||
Something went wrong
|
||||
</Text>
|
||||
|
||||
<Text style={[styles.message, { color: theme.textSecondary }]}>
|
||||
Please reload the app to continue.
|
||||
</Text>
|
||||
|
||||
<Pressable
|
||||
onPress={handleRestart}
|
||||
style={({ pressed }) => [
|
||||
styles.button,
|
||||
{
|
||||
backgroundColor: theme.link,
|
||||
opacity: pressed ? 0.9 : 1,
|
||||
transform: [{ scale: pressed ? 0.98 : 1 }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.buttonText, { color: theme.buttonText }]}>
|
||||
Try Again
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{__DEV__ ? (
|
||||
<Modal
|
||||
visible={isModalVisible}
|
||||
animationType="slide"
|
||||
transparent={true}
|
||||
onRequestClose={() => setIsModalVisible(false)}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View
|
||||
style={[
|
||||
styles.modalContainer,
|
||||
{ backgroundColor: theme.background },
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.modalHeader,
|
||||
{
|
||||
borderBottomColor: isDark
|
||||
? "rgba(255, 255, 255, 0.1)"
|
||||
: "rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.modalTitle, { color: theme.text }]}>
|
||||
Error Details
|
||||
</Text>
|
||||
<Pressable
|
||||
onPress={() => setIsModalVisible(false)}
|
||||
accessibilityLabel="Close error details"
|
||||
accessibilityRole="button"
|
||||
style={({ pressed }) => [
|
||||
styles.closeButton,
|
||||
{ opacity: pressed ? 0.6 : 1 },
|
||||
]}
|
||||
>
|
||||
<Feather name="x" size={24} color={theme.text} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
style={styles.modalScrollView}
|
||||
contentContainerStyle={[
|
||||
styles.modalScrollContent,
|
||||
{ paddingBottom: insets.bottom + 16 },
|
||||
]}
|
||||
showsVerticalScrollIndicator
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.errorContainer,
|
||||
{ backgroundColor: theme.backgroundSecondary },
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.errorText,
|
||||
{
|
||||
color: theme.text,
|
||||
fontFamily: monoFont,
|
||||
},
|
||||
]}
|
||||
selectable
|
||||
>
|
||||
{formatErrorDetails()}
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 24,
|
||||
},
|
||||
content: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 16,
|
||||
width: "100%",
|
||||
maxWidth: 600,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: "700",
|
||||
textAlign: "center",
|
||||
lineHeight: 40,
|
||||
},
|
||||
message: {
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
lineHeight: 24,
|
||||
},
|
||||
topButton: {
|
||||
position: "absolute",
|
||||
right: 16,
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 8,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 10,
|
||||
},
|
||||
button: {
|
||||
paddingVertical: 16,
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 24,
|
||||
minWidth: 200,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
buttonText: {
|
||||
fontWeight: "600",
|
||||
textAlign: "center",
|
||||
fontSize: 16,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
modalContainer: {
|
||||
width: "100%",
|
||||
height: "90%",
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 12,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: "600",
|
||||
},
|
||||
closeButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
modalScrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
modalScrollContent: {
|
||||
padding: 16,
|
||||
},
|
||||
errorContainer: {
|
||||
width: "100%",
|
||||
borderRadius: 8,
|
||||
overflow: "hidden",
|
||||
padding: 16,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
width: "100%",
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user