Merge pull request #722 from aj47/feature/696-mobile-tunnel-persistence

feat(mobile): add tunnel persistence and reconnection reliability

Author: aj47

apps/mobile/App.tsx

@@ -8,12 +8,15 @@ import { ConfigContext, useConfig, saveConfig } from './src/store/config';
 import { SessionContext, useSessions } from './src/store/sessions';
 import { MessageQueueContext, useMessageQueue } from './src/store/message-queue';
 import { ConnectionManagerContext, useConnectionManagerProvider } from './src/store/connectionManager';
+import { TunnelConnectionContext, useTunnelConnectionProvider } from './src/store/tunnelConnection';
 import { View, Image, Text, StyleSheet } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { ThemeProvider, useTheme } from './src/ui/ThemeProvider';
+import { ConnectionStatusIndicator } from './src/ui/ConnectionStatusIndicator';
 import * as Linking from 'expo-linking';
 import { useEffect, useMemo } from 'react';
 
+
 const speakMCPIcon = require('./assets/speakmcp-icon.png');
 const darkSpinner = require('./assets/loading-spinner.gif');
 const lightSpinner = require('./assets/light-spinner.gif');
@@ -47,6 +50,9 @@ function Navigation() {
   const sessionStore = useSessions();
   const messageQueueStore = useMessageQueue();
 
+  // Initialize tunnel connection manager for persistence and auto-reconnection
+  const tunnelConnection = useTunnelConnectionProvider();
+
   // Create connection manager config from app config
   const clientConfig = useMemo(() => ({
     baseUrl: cfg.config.baseUrl,
@@ -125,36 +131,45 @@ function Navigation() {
       <SessionContext.Provider value={sessionStore}>
         <MessageQueueContext.Provider value={messageQueueStore}>
           <ConnectionManagerContext.Provider value={connectionManager}>
-            <NavigationContainer theme={navTheme}>
-              <Stack.Navigator
-                initialRouteName="Settings"
-                screenOptions={{
-                  headerTitleStyle: { ...theme.typography.h2 },
-                  headerStyle: { backgroundColor: theme.colors.card },
-                  headerTintColor: theme.colors.foreground,
-                  contentStyle: { backgroundColor: theme.colors.background },
-                  headerLeft: () => (
-                    <Image
-                      source={speakMCPIcon}
-                      style={{ width: 28, height: 28, marginLeft: 12, marginRight: 8 }}
-                      resizeMode="contain"
-                    />
-                  ),
-                }}
-              >
-                <Stack.Screen
-                  name="Settings"
-                  component={SettingsScreen}
-                  options={{ title: 'SpeakMCP' }}
-                />
-                <Stack.Screen
-                  name="Sessions"
-                  component={SessionListScreen}
-                  options={{ title: 'Chats' }}
-                />
-                <Stack.Screen name="Chat" component={ChatScreen} />
-              </Stack.Navigator>
-            </NavigationContainer>
+            <TunnelConnectionContext.Provider value={tunnelConnection}>
+              <NavigationContainer theme={navTheme}>
+                <Stack.Navigator
+                  initialRouteName="Settings"
+                  screenOptions={{
+                    headerTitleStyle: { ...theme.typography.h2 },
+                    headerStyle: { backgroundColor: theme.colors.card },
+                    headerTintColor: theme.colors.foreground,
+                    contentStyle: { backgroundColor: theme.colors.background },
+                    headerLeft: () => (
+                      <Image
+                        source={speakMCPIcon}
+                        style={{ width: 28, height: 28, marginLeft: 12, marginRight: 8 }}
+                        resizeMode="contain"
+                      />
+                    ),
+                    headerRight: () => (
+                      <ConnectionStatusIndicator
+                        state={tunnelConnection.connectionInfo.state}
+                        retryCount={tunnelConnection.connectionInfo.retryCount}
+                        compact
+                      />
+                    ),
+                  }}
+                >
+                  <Stack.Screen
+                    name="Settings"
+                    component={SettingsScreen}
+                    options={{ title: 'SpeakMCP' }}
+                  />
+                  <Stack.Screen
+                    name="Sessions"
+                    component={SessionListScreen}
+                    options={{ title: 'Chats' }}
+                  />
+                  <Stack.Screen name="Chat" component={ChatScreen} />
+                </Stack.Navigator>
+              </NavigationContainer>
+            </TunnelConnectionContext.Provider>
           </ConnectionManagerContext.Provider>
         </MessageQueueContext.Provider>
       </SessionContext.Provider>

apps/mobile/package.json

@@ -16,6 +16,7 @@
     "@speakmcp/shared": "workspace:^",
     "expo": "~54.0.6",
     "expo-camera": "^17.0.9",
+    "expo-crypto": "~15.0.8",
     "expo-linking": "^8.0.9",
     "expo-speech": "~14.0.7",
     "expo-speech-recognition": "^2.1.2",

apps/mobile/src/lib/deviceIdentity.ts

@@ -0,0 +1,70 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as Crypto from 'expo-crypto';
+
+const DEVICE_ID_KEY = 'speakmcp_device_id_v1';
+
+/**
+ * Device identity for stable tunnel identification.
+ * This ID persists across app restarts (but not reinstalls, as AsyncStorage is cleared on uninstall).
+ */
+export interface DeviceIdentity {
+  deviceId: string;
+  createdAt: number;
+}
+
+/**
+ * Generate a cryptographically random device ID.
+ * Uses UUID v4 format for compatibility.
+ */
+async function generateDeviceId(): Promise<string> {
+  const randomBytes = await Crypto.getRandomBytesAsync(16);
+  const hex = Array.from(randomBytes, (byte) => byte.toString(16).padStart(2, '0')).join('');
+  // Format as UUID v4
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-4${hex.slice(13, 16)}-${(parseInt(hex.slice(16, 18), 16) & 0x3f | 0x80).toString(16)}${hex.slice(18, 20)}-${hex.slice(20, 32)}`;
+}
+
+/**
+ * Get or create a persistent device identity.
+ * The device ID is generated once and stored in AsyncStorage.
+ */
+export async function getDeviceIdentity(): Promise<DeviceIdentity> {
+  try {
+    const stored = await AsyncStorage.getItem(DEVICE_ID_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      if (parsed.deviceId && typeof parsed.deviceId === 'string') {
+        return parsed as DeviceIdentity;
+      }
+    }
+  } catch (error) {
+    console.warn('[DeviceIdentity] Error reading stored identity:', error);
+  }
+
+  // Generate new device identity
+  const identity: DeviceIdentity = {
+    deviceId: await generateDeviceId(),
+    createdAt: Date.now(),
+  };
+
+  try {
+    await AsyncStorage.setItem(DEVICE_ID_KEY, JSON.stringify(identity));
+    console.log('[DeviceIdentity] Created new device identity:', identity.deviceId);
+  } catch (error) {
+    console.error('[DeviceIdentity] Failed to persist device identity:', error);
+  }
+
+  return identity;
+}
+
+/**
+ * Clear the device identity (for testing or reset scenarios).
+ */
+export async function clearDeviceIdentity(): Promise<void> {
+  try {
+    await AsyncStorage.removeItem(DEVICE_ID_KEY);
+    console.log('[DeviceIdentity] Cleared device identity');
+  } catch (error) {
+    console.error('[DeviceIdentity] Failed to clear device identity:', error);
+  }
+}
+