feat(mobile): add React Native (Expo) companion app

Makefile

@@ -1,4 +1,4 @@
-.PHONY: test lint format dev build-ui start
+.PHONY: test lint format dev build-ui start mobile-dev
 
 ## Run Python tests
 test:
@@ -19,6 +19,10 @@ format:
 dev:
 	scripts/start-kiosk.sh --mock
 
+## Start the Expo dev server for the mobile app (run `cd mobile && npm install` once first)
+mobile-dev:
+	cd mobile && npx expo start
+
 ## Build the React UI
 build-ui:
 	cd ui && npm install && npm run build

mobile/.claude/settings.json

@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "expo@claude-plugins-official": true
+  }
+}

mobile/.gitignore

@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# generated native folders
+/ios
+/android

mobile/AGENTS.md

@@ -0,0 +1,5 @@
+# Expo HAS CHANGED
+
+Read the exact versioned docs at https://docs.expo.dev/versions/v54.0.0/ before writing any code.
+
+This project targets **Expo SDK 54** (pinned to match the Expo Go version available on the maintainer's device). Do not upgrade the SDK without confirming the target Expo Go / development-build story first.

mobile/App.tsx

@@ -0,0 +1,230 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import { io, type Socket } from 'socket.io-client';
+import type { ConnectionState, Shot } from './types';
+import { CurrentShotView } from './components/CurrentShotView';
+
+const STATUS_LABEL: Record<ConnectionState, string> = {
+  disconnected: 'Disconnected',
+  connecting: 'Connecting…',
+  connected: 'Connected',
+  error: 'Connection failed',
+};
+
+const STATUS_COLOR: Record<ConnectionState, string> = {
+  disconnected: '#999',
+  connecting: '#b5820a',
+  connected: '#1a7f37',
+  error: '#c0392b',
+};
+
+export default function App() {
+  const [serverUrl, setServerUrl] = useState('http://192.168.1.100:8080');
+  const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
+  const [shots, setShots] = useState<Shot[]>([]);
+  const socketRef = useRef<Socket | null>(null);
+
+  const latestShot = shots[0] ?? null;
+  const isConnected = connectionState === 'connected';
+
+  const disconnect = useCallback(() => {
+    socketRef.current?.close();
+    socketRef.current = null;
+    setConnectionState('disconnected');
+  }, []);
+
+  const connect = useCallback(() => {
+    if (socketRef.current) return;
+
+    setConnectionState('connecting');
+    const socket = io(serverUrl, { transports: ['websocket', 'polling'] });
+    socketRef.current = socket;
+
+    socket.on('connect', () => {
+      setConnectionState('connected');
+      socket.emit('get_session');
+    });
+
+    socket.on('disconnect', () => {
+      setConnectionState('disconnected');
+    });
+
+    socket.on('connect_error', () => {
+      setConnectionState('error');
+    });
+
+    socket.on('session_state', (data: { shots: Shot[] }) => {
+      setShots([...data.shots].reverse());
+    });
+
+    socket.on('shot', (data: { shot: Shot }) => {
+      setShots((prev) => [data.shot, ...prev]);
+    });
+  }, [serverUrl]);
+
+  // Close the socket if the component unmounts while connected.
+  useEffect(() => {
+    return () => {
+      socketRef.current?.close();
+    };
+  }, []);
+
+  const simulateShot = useCallback(() => {
+    socketRef.current?.emit('simulate_shot');
+  }, []);
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      {/* Tapping any non-interactive area dismisses the keyboard -- RN does not
+          do this by default, so the URL field's keyboard would otherwise stay
+          open until the return key is pressed. */}
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View style={styles.inner}>
+          <View style={styles.header}>
+            <Text style={styles.title}>OpenFlight</Text>
+            <View style={styles.statusPill}>
+              <View style={[styles.statusDot, { backgroundColor: STATUS_COLOR[connectionState] }]} />
+              <Text style={styles.statusText}>{STATUS_LABEL[connectionState]}</Text>
+            </View>
+          </View>
+
+          {isConnected ? (
+            <View style={styles.connectedBar}>
+              <TouchableOpacity style={styles.simulateButton} onPress={simulateShot}>
+                <Text style={styles.simulateButtonText}>Simulate Shot</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.disconnectButton} onPress={disconnect}>
+                <Text style={styles.disconnectButtonText}>Disconnect</Text>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <View style={styles.connectRow}>
+              <TextInput
+                style={styles.input}
+                value={serverUrl}
+                onChangeText={setServerUrl}
+                placeholder="http://<pi-ip>:8080"
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="url"
+                returnKeyType="done"
+                onSubmitEditing={Keyboard.dismiss}
+              />
+              <TouchableOpacity style={styles.connectButton} onPress={connect}>
+                <Text style={styles.connectButtonText}>Connect</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+
+          <CurrentShotView shot={latestShot} />
+        </View>
+      </TouchableWithoutFeedback>
+
+      <StatusBar style="auto" />
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  inner: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    paddingTop: 60,
+    paddingHorizontal: 16,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1a1a1a',
+  },
+  statusPill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  statusText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  connectRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 12,
+    marginBottom: 4,
+  },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  connectButton: {
+    backgroundColor: '#1a7f37',
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    justifyContent: 'center',
+  },
+  connectButtonText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  connectedBar: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 12,
+    marginBottom: 4,
+  },
+  simulateButton: {
+    flex: 1,
+    backgroundColor: '#0969da',
+    borderRadius: 8,
+    paddingVertical: 10,
+    alignItems: 'center',
+  },
+  simulateButtonText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  disconnectButton: {
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+  disconnectButtonText: {
+    color: '#666',
+    fontWeight: '600',
+  },
+});

mobile/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md