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
226
artifacts/mobile/app/(tabs)/matrix.tsx
Normal file
226
artifacts/mobile/app/(tabs)/matrix.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import React, { useRef, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Platform,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { WebView } from "react-native-webview";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
||||
import { Colors } from "@/constants/colors";
|
||||
|
||||
const C = Colors.dark;
|
||||
|
||||
function getMatrixUrl(): string {
|
||||
const domain = process.env.EXPO_PUBLIC_DOMAIN ?? "";
|
||||
if (!domain) return "http://localhost:8080/";
|
||||
const stripped = domain.replace(/^https?:\/\//, "").replace(/\/$/, "");
|
||||
const proto = stripped.startsWith("localhost") ? "http" : "https";
|
||||
return `${proto}://${stripped}/`;
|
||||
}
|
||||
|
||||
export default function MatrixScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const topPad = Platform.OS === "web" ? 67 : insets.top;
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(false);
|
||||
const webviewRef = useRef<WebView | null>(null);
|
||||
const matrixUrl = getMatrixUrl();
|
||||
|
||||
if (Platform.OS === "web") {
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: topPad }]}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>The Matrix</Text>
|
||||
<Text style={styles.subtitle}>Timmy's 3D command center</Text>
|
||||
</View>
|
||||
<View style={styles.webContainer}>
|
||||
<iframe
|
||||
src={matrixUrl}
|
||||
style={{ width: "100%", height: "100%", border: "none", borderRadius: 12 }}
|
||||
allow="autoplay"
|
||||
title="The Matrix"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: topPad }]}>
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={styles.title}>The Matrix</Text>
|
||||
<Text style={styles.subtitle}>Timmy's 3D command center</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setError(false);
|
||||
setLoading(true);
|
||||
webviewRef.current?.reload();
|
||||
}}
|
||||
style={styles.reloadBtn}
|
||||
>
|
||||
<Feather name="refresh-cw" size={18} color={C.textSecondary} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View style={styles.webContainer}>
|
||||
{loading && !error ? (
|
||||
<View style={styles.loadingOverlay}>
|
||||
<ActivityIndicator size="large" color={C.matrixGreen} />
|
||||
<Text style={styles.loadingText}>Loading The Matrix</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{error ? (
|
||||
<View style={styles.errorContainer}>
|
||||
<Feather name="wifi-off" size={40} color={C.textMuted} />
|
||||
<Text style={styles.errorTitle}>Matrix Unreachable</Text>
|
||||
<Text style={styles.errorSubtitle}>
|
||||
The API server may not be running
|
||||
</Text>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setError(false);
|
||||
setLoading(true);
|
||||
webviewRef.current?.reload();
|
||||
}}
|
||||
style={styles.retryBtn}
|
||||
>
|
||||
<Text style={styles.retryText}>Retry</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
) : (
|
||||
<WebView
|
||||
ref={webviewRef}
|
||||
source={{ uri: matrixUrl }}
|
||||
style={[styles.webview, loading && styles.hidden]}
|
||||
onLoadEnd={() => setLoading(false)}
|
||||
onError={() => {
|
||||
setLoading(false);
|
||||
setError(true);
|
||||
}}
|
||||
onHttpError={() => {
|
||||
setLoading(false);
|
||||
setError(true);
|
||||
}}
|
||||
javaScriptEnabled
|
||||
allowsInlineMediaPlayback
|
||||
mediaPlaybackRequiresUserAction={false}
|
||||
startInLoadingState={false}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: C.background,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 16,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontFamily: "Inter_700Bold",
|
||||
color: C.text,
|
||||
letterSpacing: -0.5,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 13,
|
||||
fontFamily: "Inter_400Regular",
|
||||
color: C.textSecondary,
|
||||
marginTop: 2,
|
||||
},
|
||||
reloadBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 20,
|
||||
backgroundColor: C.surface,
|
||||
borderWidth: 1,
|
||||
borderColor: C.border,
|
||||
marginTop: 4,
|
||||
},
|
||||
webContainer: {
|
||||
flex: 1,
|
||||
marginHorizontal: 16,
|
||||
marginBottom: 16,
|
||||
borderRadius: 16,
|
||||
overflow: "hidden",
|
||||
backgroundColor: "#000",
|
||||
borderWidth: 1,
|
||||
borderColor: C.border,
|
||||
},
|
||||
webview: {
|
||||
flex: 1,
|
||||
backgroundColor: "#000",
|
||||
},
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
position: "absolute",
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
loadingOverlay: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 16,
|
||||
backgroundColor: "#000",
|
||||
},
|
||||
loadingText: {
|
||||
fontSize: 14,
|
||||
fontFamily: "Inter_400Regular",
|
||||
color: C.matrixGreen,
|
||||
letterSpacing: 1,
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 12,
|
||||
backgroundColor: "#000",
|
||||
paddingHorizontal: 32,
|
||||
},
|
||||
errorTitle: {
|
||||
fontSize: 20,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
color: C.text,
|
||||
marginTop: 8,
|
||||
},
|
||||
errorSubtitle: {
|
||||
fontSize: 14,
|
||||
fontFamily: "Inter_400Regular",
|
||||
color: C.textSecondary,
|
||||
textAlign: "center",
|
||||
},
|
||||
retryBtn: {
|
||||
marginTop: 8,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
backgroundColor: C.surface,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: C.border,
|
||||
},
|
||||
retryText: {
|
||||
fontSize: 14,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
color: C.text,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user