Merge branch 'dev' into feat/havpe-refresh

Author: AnkushMalaker

app/app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
     "name": "chronicle",
-    "slug": "chronicle",
+    "slug": "friend-lite-app",
     "version": "1.0.0",
     "scheme": "chronicle",
     "orientation": "portrait",
@@ -19,11 +19,13 @@
       "supportsTablet": true,
       "bundleIdentifier": "com.cupbearer5517.chronicle",
       "infoPlist": {
+        "NSCameraUsageDescription": "Chronicle uses the camera to scan QR codes for backend connection setup.",
         "NSMicrophoneUsageDescription": "Chronicle needs access to your microphone to stream audio to the backend for processing.",
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true,
           "NSAllowsLocalNetworking": true
-        }
+        },
+        "ITSAppUsesNonExemptEncryption": false
       }
     },
     "android": {
@@ -40,7 +42,8 @@
         "android.permission.FOREGROUND_SERVICE",
         "android.permission.FOREGROUND_SERVICE_DATA_SYNC",
         "android.permission.POST_NOTIFICATIONS",
-        "android.permission.RECORD_AUDIO"
+        "android.permission.RECORD_AUDIO",
+        "android.permission.CAMERA"
       ],
       "usesCleartextTraffic": true
     },
@@ -53,7 +56,9 @@
           "enableNotifications": true,
           "enableBackgroundAudio": true,
           "enableDeviceDetection": true,
-          "iosBackgroundModes": { "useProcessing": true },
+          "iosBackgroundModes": {
+            "useProcessing": true
+          },
           "iosConfig": {
             "microphoneUsageDescription": "We use the mic for live audio streaming"
           }
@@ -96,12 +101,20 @@
           }
         }
       ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Chronicle uses the camera to scan QR codes for backend connection setup."
+        }
+      ],
+      "expo-image-picker",
       "./plugins/with-ats"
     ],
+    "owner": "cupbearer5517",
     "extra": {
       "eas": {
         "projectId": "05d8598e-6fe7-4373-81e4-1654f3d8e181"
       }
     }
   }
-}
+}

app/app/diagnostics.tsx

@@ -17,6 +17,7 @@ const EVENT_BADGE_COLORS: Record<ConnectionEventType, string> = {
   error: '#FF3B30',
   health_ping: '#34C759',
   reconnect_attempt: '#FF9500',
+  reconnect_backoff: '#FF9500',
   bt_state_change: '#5856D6',
 };
 

app/app/index.tsx

@@ -117,16 +117,17 @@ export default function App() {
 
   const canScan = React.useMemo(() => (
     permissionGranted && bluetoothState === BluetoothState.PoweredOn &&
-    !autoReconnect.isAttemptingAutoReconnect && !deviceConnection.isConnecting &&
+    !autoReconnect.isAttemptingAutoReconnect && !autoReconnect.isRetryingConnection &&
+    !deviceConnection.isConnecting &&
     !deviceConnection.connectedDeviceId &&
     (autoReconnect.triedAutoReconnectForCurrentId || !autoReconnect.lastKnownDeviceId)
-  ), [permissionGranted, bluetoothState, autoReconnect.isAttemptingAutoReconnect, deviceConnection.isConnecting, deviceConnection.connectedDeviceId, autoReconnect.triedAutoReconnectForCurrentId, autoReconnect.lastKnownDeviceId]);
+  ), [permissionGranted, bluetoothState, autoReconnect.isAttemptingAutoReconnect, autoReconnect.isRetryingConnection, deviceConnection.isConnecting, deviceConnection.connectedDeviceId, autoReconnect.triedAutoReconnectForCurrentId, autoReconnect.lastKnownDeviceId]);
 
   const filteredDevices = React.useMemo(() => {
     if (!showOnlyOmi) return scannedDevices;
     return scannedDevices.filter(d => {
       const name = d.name?.toLowerCase() || '';
-      return name.includes('omi') || name.includes('friend');
+      return name.includes('omi') || name.includes('friend') || name.includes('neo');
     });
   }, [scannedDevices, showOnlyOmi]);
 
@@ -190,6 +191,21 @@ export default function App() {
           <BluetoothStatusBanner bluetoothState={bluetoothState} isPermissionsLoading={isPermissionsLoading} permissionGranted={permissionGranted} onRequestPermission={requestBluetoothPermission} />
           <ScanControls scanning={scanning} onScanPress={startScan} onStopScanPress={stopDeviceScanAction} canScan={canScan} />
 
+          {autoReconnect.isRetryingConnection && (
+            <View style={s.retryBanner}>
+              <ActivityIndicator size="small" color={colors.warning} />
+              <Text style={s.retryBannerText}>
+                Reconnecting in {autoReconnect.retryBackoffSeconds}s... (attempt {autoReconnect.connectionRetryCount})
+              </Text>
+              <TouchableOpacity
+                style={[s.button, { backgroundColor: colors.danger, paddingVertical: 6, paddingHorizontal: 10 }]}
+                onPress={autoReconnect.handleCancelAutoReconnect}
+              >
+                <Text style={s.buttonText}>Cancel</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+
           {!settings.isAuthenticated && (
             <View style={s.authWarning}>
               <Text style={s.authWarningText}>Login is required for advanced backend features. Simple backend can be used without authentication.</Text>
@@ -201,7 +217,7 @@ export default function App() {
               <View style={s.sectionHeaderWithFilter}>
                 <Text style={s.sectionTitle}>Found Devices</Text>
                 <View style={s.filterContainer}>
-                  <Text style={s.filterText}>Show only OMI/Friend</Text>
+                  <Text style={s.filterText}>Show only OMI/Friend/Neo</Text>
                   <Switch
                     trackColor={{ false: colors.disabled, true: colors.primary }}
                     thumbColor={showOnlyOmi ? colors.warning : colors.card}
@@ -222,7 +238,7 @@ export default function App() {
               ) : (
                 <View style={s.noDevicesContainer}>
                   <Text style={s.noDevicesText}>
-                    {showOnlyOmi ? `No OMI/Friend devices found. ${scannedDevices.length} other device(s) hidden by filter.` : 'No devices found.'}
+                    {showOnlyOmi ? `No OMI/Friend/Neo devices found. ${scannedDevices.length} other device(s) hidden by filter.` : 'No devices found.'}
                   </Text>
                 </View>
               )}
@@ -408,6 +424,23 @@ const createStyles = (colors: ThemeColors) => StyleSheet.create({
     textAlign: 'center',
     fontStyle: 'italic',
   },
+  retryBanner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    marginBottom: 15,
+    backgroundColor: colors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.warning,
+  },
+  retryBannerText: {
+    flex: 1,
+    marginLeft: 10,
+    fontSize: 14,
+    color: colors.warning,
+    fontWeight: '500',
+  },
   authWarning: {
     marginBottom: 20,
     padding: 15,

app/package-lock.json

@@ -30,7 +30,9 @@
     "setimmediate": "^1.0.5",
     "webidl-conversions": "^7.0.0",
     "react-native-screens": "~4.11.1",
-    "react-native-safe-area-context": "5.4.0"
+    "react-native-safe-area-context": "5.4.0",
+    "expo-camera": "~16.1.11",
+    "expo-image-picker": "~16.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

app/package.json

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, ActivityIndicator } from 'react-native';
 import { useTheme, ThemeColors } from '../theme';
+import { QRScanner } from './QRScanner';
+import { httpUrlToWebSocketUrl } from '../utils/urlConversion';
 
 interface BackendStatusProps {
   backendUrl: string;
@@ -26,6 +28,7 @@ export const BackendStatus: React.FC<BackendStatusProps> = ({
     status: 'unknown',
     message: 'Not checked',
   });
+  const [showQRScanner, setShowQRScanner] = useState(false);
 
   const checkBackendHealth = async (showAlert: boolean = false) => {
     if (!backendUrl.trim()) {
@@ -130,6 +133,13 @@ export const BackendStatus: React.FC<BackendStatusProps> = ({
         )}
       </View>
 
+      <TouchableOpacity
+        style={s.qrButton}
+        onPress={() => setShowQRScanner(true)}
+      >
+        <Text style={s.qrButtonText}>Scan QR Code</Text>
+      </TouchableOpacity>
+
       <TouchableOpacity
         style={[s.button, healthStatus.status === 'checking' ? s.buttonDisabled : null]}
         onPress={() => checkBackendHealth(true)}
@@ -139,8 +149,17 @@ export const BackendStatus: React.FC<BackendStatusProps> = ({
       </TouchableOpacity>
 
       <Text style={s.helpText}>
-        Enter the WebSocket URL of your backend server. Status is automatically checked.
+        Enter the WebSocket URL or scan a QR code from the Chronicle dashboard.
       </Text>
+
+      <QRScanner
+        visible={showQRScanner}
+        onScanned={(httpUrl) => {
+          const wsUrl = httpUrlToWebSocketUrl(httpUrl);
+          onBackendUrlChange(wsUrl);
+        }}
+        onClose={() => setShowQRScanner(false)}
+      />
     </View>
   );
 };
@@ -215,6 +234,21 @@ const createStyles = (colors: ThemeColors) => StyleSheet.create({
     textAlign: 'center',
     fontStyle: 'italic',
   },
+  qrButton: {
+    backgroundColor: colors.card,
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginBottom: 10,
+    borderWidth: 1,
+    borderColor: colors.primary,
+  },
+  qrButtonText: {
+    color: colors.primary,
+    fontSize: 16,
+    fontWeight: '600',
+  },
   button: {
     backgroundColor: colors.primary,
     paddingVertical: 12,

app/src/components/BackendStatus.tsx

@@ -3,6 +3,7 @@ import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { OmiDevice } from 'friend-lite-react-native';
 import { useTheme, ThemeColors } from '../theme';
 import SignalStrength from './SignalStrength';
+import { detectDeviceType } from '../utils/deviceType';
 
 interface DeviceListItemProps {
   device: OmiDevice;
@@ -23,12 +24,18 @@ export const DeviceListItem: React.FC<DeviceListItemProps> = ({
   const s = createStyles(colors);
   const isThisDeviceConnected = connectedDeviceId === device.id;
   const isAnotherDeviceConnected = connectedDeviceId !== null && connectedDeviceId !== device.id;
+  const deviceType = detectDeviceType(device.name);
 
   return (
     <View style={s.deviceItem}>
       <View style={s.deviceInfoContainer}>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           <Text style={s.deviceName}>{device.name || 'Unknown Device'}</Text>
+          {deviceType !== 'unknown' && (
+            <View style={[s.deviceTypeBadge, { backgroundColor: deviceType === 'neo' ? colors.warning : colors.primary }]}>
+              <Text style={s.deviceTypeBadgeText}>{deviceType === 'neo' ? 'Neo' : 'OMI'}</Text>
+            </View>
+          )}
           <SignalStrength rssi={device.rssi} />
         </View>
         <Text style={s.deviceInfo}>ID: {device.id}</Text>
@@ -85,6 +92,17 @@ const createStyles = (colors: ThemeColors) => StyleSheet.create({
     color: colors.textSecondary,
     marginTop: 2,
   },
+  deviceTypeBadge: {
+    marginLeft: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  deviceTypeBadgeText: {
+    color: 'white',
+    fontSize: 10,
+    fontWeight: '700',
+  },
   button: {
     backgroundColor: colors.primary,
     paddingVertical: 12,