feat: refresh the runtime runner screen

packages/bundler-metro/tsconfig.json

@@ -12,9 +12,6 @@
     {
       "path": "../tools"
     },
-    {
-      "path": "../bridge"
-    },
     {
       "path": "../babel-preset"
     },

packages/bundler-metro/tsconfig.lib.json

@@ -21,9 +21,6 @@
     {
       "path": "../tools/tsconfig.lib.json"
     },
-    {
-      "path": "../bridge/tsconfig.lib.json"
-    },
     {
       "path": "../babel-preset/tsconfig.lib.json"
     }

packages/runtime/src/react-native.d.ts

@@ -16,3 +16,17 @@ declare module 'react-native/Libraries/Core/Devtools/parseErrorStack' {
   };
   export default function parseErrorStack(errorStack?: string): StackFrame[];
 }
+
+declare module '*.png' {
+  import type { ImageSourcePropType } from 'react-native';
+
+  const value: ImageSourcePropType;
+  export default value;
+}
+
+declare module '*.jpg' {
+  import type { ImageSourcePropType } from 'react-native';
+
+  const value: ImageSourcePropType;
+  export default value;
+}

packages/runtime/src/ui/ReadyScreen.tsx

@@ -1,142 +1,22 @@
-import {
-  View,
-  Text,
-  StyleSheet,
-  ActivityIndicator,
-  StatusBar,
-  Platform,
-} from 'react-native';
 import { useRunnerStatus } from './state.js';
 import { TestComponentOverlay } from '../render/TestComponentOverlay.js';
+import { RunnerScreen } from './RunnerScreen.js';
 
 require('../initialize.js');
 
 export const ReadyScreen = () => {
   const status = useRunnerStatus();
+  const statusText =
+    status === 'loading'
+      ? 'Loading...'
+      : status === 'idle'
+      ? 'Idle'
+      : 'Running...';
 
   return (
-    <View style={styles.container}>
-      <StatusBar hidden={true} />
-      <View style={styles.contentContainer}>
-        <Text style={styles.title}>React Native Harness</Text>
-
-        {status === 'idle' ? (
-          <View style={styles.statusIndicator}>
-            <View style={styles.statusDot} />
-            <Text style={styles.statusText}>Idle</Text>
-          </View>
-        ) : status === 'loading' ? (
-          <View style={styles.loadingContainer}>
-            <ActivityIndicator
-              size="small"
-              color="#3b82f6"
-              style={styles.loadingSpinner}
-            />
-            <Text style={styles.loadingText}>Loading...</Text>
-          </View>
-        ) : (
-          <View style={styles.statusIndicator}>
-            <View style={styles.statusDot} />
-            <Text style={styles.statusText}>Running...</Text>
-          </View>
-        )}
-      </View>
+    <>
+      <RunnerScreen title="Harness" statusText={statusText} />
       <TestComponentOverlay />
-    </View>
+    </>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#0a1628',
-    position: 'relative',
-  },
-  safeArea: {
-    flex: 1,
-    backgroundColor: 'transparent',
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
-  },
-  contentContainer: {
-    alignItems: 'center',
-    padding: 24,
-    borderRadius: 24,
-    backgroundColor: 'rgba(59, 130, 246, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(59, 130, 246, 0.2)',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 20,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 30,
-    maxWidth: 350,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: '700',
-    color: '#38bdf8',
-    textAlign: 'center',
-    letterSpacing: 1,
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-    fontWeight: '400',
-    color: 'rgba(255, 255, 255, 0.7)',
-    textAlign: 'center',
-    letterSpacing: 0.5,
-    marginBottom: 24,
-  },
-  statusIndicator: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(34, 211, 238, 0.15)',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    height: 36,
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: 'rgba(34, 211, 238, 0.4)',
-  },
-  statusDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: '#22d3ee',
-    marginRight: 8,
-    shadowColor: '#22d3ee',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.8,
-    shadowRadius: 4,
-  },
-  statusText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#22d3ee',
-    letterSpacing: 0.5,
-  },
-  loadingContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(59, 130, 246, 0.15)',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    height: 36,
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: 'rgba(59, 130, 246, 0.4)',
-  },
-  loadingSpinner: {
-    marginRight: 8,
-  },
-  loadingText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#3b82f6',
-    letterSpacing: 0.5,
-  },
-});

packages/runtime/src/ui/RunnerScreen.tsx

@@ -0,0 +1,93 @@
+import {
+  Image,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { CK_LOGO, POWERED_BY } from './images.js';
+
+type RunnerScreenProps = {
+  title: string;
+  statusText: string;
+  message?: string;
+};
+
+export const RunnerScreen = ({
+  title,
+  statusText,
+  message,
+}: RunnerScreenProps) => {
+  return (
+    <View style={styles.container}>
+      <StatusBar hidden={true} />
+      <View style={styles.topSpacer} />
+      <View style={styles.content}>
+        <Image source={{ uri: CK_LOGO }} style={styles.logo} resizeMode="cover" />
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.statusText}>{statusText}</Text>
+        {message ? <Text style={styles.message}>{message}</Text> : null}
+      </View>
+      <View style={styles.footer}>
+        <Image
+          source={{ uri: POWERED_BY }}
+          style={styles.poweredBy}
+          resizeMode="contain"
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    paddingVertical: 16,
+  },
+  topSpacer: {
+    minHeight: 16,
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  logo: {
+    width: 64,
+    height: 64,
+    borderRadius: 14,
+  },
+  title: {
+    marginTop: 16,
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#000',
+    textAlign: 'center',
+  },
+  statusText: {
+    marginTop: 12,
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
+    textAlign: 'center',
+  },
+  message: {
+    marginTop: 12,
+    maxWidth: 320,
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#000',
+    textAlign: 'center',
+  },
+  footer: {
+    padding: 16,
+  },
+  poweredBy: {
+    width: 180,
+    height: 44,
+    opacity: 0.8,
+  },
+});

packages/runtime/src/ui/WrongEnvironmentScreen.tsx

@@ -1,95 +1,11 @@
-import { View, Text, StyleSheet, Platform, StatusBar } from 'react-native';
+import { RunnerScreen } from './RunnerScreen.js';
 
 export const WrongEnvironmentScreen = () => {
   return (
-    <View style={styles.container}>
-      <View style={styles.contentContainer}>
-        <Text style={styles.title}>React Native Harness</Text>
-
-        <View style={styles.errorIndicator}>
-          <View style={styles.errorDot} />
-          <Text style={styles.errorText}>Environment Error</Text>
-        </View>
-        <Text style={styles.submessage}>
-          Please double-check that you followed the installation documentation
-          carefully.
-        </Text>
-      </View>
-    </View>
+    <RunnerScreen
+      title="Harness"
+      statusText="Environment Error"
+      message="Please double-check that you followed the installation documentation carefully."
+    />
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#0a1628',
-    position: 'relative',
-  },
-  safeArea: {
-    flex: 1,
-    backgroundColor: 'transparent',
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
-  },
-  contentContainer: {
-    alignItems: 'center',
-    padding: 24,
-    borderRadius: 24,
-    backgroundColor: 'rgba(239, 68, 68, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(239, 68, 68, 0.2)',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 20,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 30,
-    maxWidth: 350,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: '700',
-    color: '#38bdf8',
-    textAlign: 'center',
-    letterSpacing: 1,
-    marginBottom: 8,
-  },
-  errorIndicator: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(239, 68, 68, 0.15)',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    height: 36,
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: 'rgba(239, 68, 68, 0.4)',
-    marginBottom: 24,
-  },
-  errorDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: '#ef4444',
-    marginRight: 8,
-    shadowColor: '#ef4444',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.8,
-    shadowRadius: 4,
-  },
-  errorText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#ef4444',
-    letterSpacing: 0.5,
-  },
-  submessage: {
-    fontSize: 14,
-    fontWeight: '400',
-    color: 'rgba(255, 255, 255, 0.6)',
-    textAlign: 'center',
-    letterSpacing: 0.5,
-  },
-});