Add error boundary and OAuth callback timeout to agents-mobile

Two robustness fixes for flows a store reviewer is likely to hit:

- Wrap the app provider tree in Sentry.ErrorBoundary (inside
  ThemeProvider so the fallback is themed) with a "Try again" screen.
  An uncaught render error otherwise shows a blank/native crash screen,
  which is an automatic review rejection. Sentry still reports the error.
- Give the /oauth/callback route a 10s escape hatch. A cold start onto
  the callback with no pending request could spin on "Finishing
  sign-in…" forever; now it surfaces a "Back to sign-in" action.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: msfstef

packages/agents-mobile/app/_layout.tsx

@@ -1,12 +1,13 @@
 import { Redirect, Stack, usePathname } from 'expo-router'
 import { StatusBar } from 'expo-status-bar'
-import { ActivityIndicator, StyleSheet, View } from 'react-native'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import {
   SafeAreaProvider,
   initialWindowMetrics,
 } from 'react-native-safe-area-context'
 import { AgentsProvider } from '../src/lib/AgentsProvider'
+import { PrimaryButton } from '../src/components/PrimaryButton'
 import {
   ThemeProvider,
   useColorSchemeMode,
@@ -18,6 +19,7 @@ import {
 } from '../src/lib/MobileAppState'
 import { CloudAuthProvider } from '../src/lib/CloudAuthContext'
 import { isCallbackUrl } from '../src/lib/cloudAuth'
+import { fontSize, lineHeight, spacing } from '../src/lib/theme'
 import { Sentry, initSentry } from '../src/lib/sentry'
 
 // Initialize early so startup crashes are captured (no-op in dev).
@@ -28,17 +30,48 @@ function RootLayout(): React.ReactElement {
     <GestureHandlerRootView style={styles.root}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
         <ThemeProvider>
-          <MobileAppStateProvider>
-            <CloudAuthProvider>
-              <RootNavigator />
-            </CloudAuthProvider>
-          </MobileAppStateProvider>
+          {/* Inside ThemeProvider so the themed fallback turns an uncaught
+              render error into a recoverable screen, not a blank crash. */}
+          <Sentry.ErrorBoundary
+            fallback={({ resetError }) => (
+              <RootErrorFallback onRetry={resetError} />
+            )}
+          >
+            <MobileAppStateProvider>
+              <CloudAuthProvider>
+                <RootNavigator />
+              </CloudAuthProvider>
+            </MobileAppStateProvider>
+          </Sentry.ErrorBoundary>
         </ThemeProvider>
       </SafeAreaProvider>
     </GestureHandlerRootView>
   )
 }
 
+function RootErrorFallback({
+  onRetry,
+}: {
+  onRetry: () => void
+}): React.ReactElement {
+  const tokens = useTokens()
+  return (
+    <View style={[styles.fallback, { backgroundColor: tokens.bg }]}>
+      <StatusBar style="light" />
+      <Text style={[styles.fallbackTitle, { color: tokens.text1 }]}>
+        Something went wrong
+      </Text>
+      <Text style={[styles.fallbackBody, { color: tokens.text2 }]}>
+        The app hit an unexpected error. You can try again — if it keeps
+        happening, reopen the app.
+      </Text>
+      <View style={styles.fallbackAction}>
+        <PrimaryButton title="Try again" onPress={onRetry} />
+      </View>
+    </View>
+  )
+}
+
 export default Sentry.wrap(RootLayout)
 
 function RootNavigator(): React.ReactElement {
@@ -115,4 +148,26 @@ const styles = StyleSheet.create({
     alignItems: `center`,
     justifyContent: `center`,
   },
+  fallback: {
+    flex: 1,
+    alignItems: `center`,
+    justifyContent: `center`,
+    paddingHorizontal: spacing.xl,
+    gap: spacing.md,
+  },
+  fallbackTitle: {
+    fontSize: fontSize.xl,
+    fontWeight: `600`,
+    lineHeight: lineHeight.xl,
+    textAlign: `center`,
+  },
+  fallbackBody: {
+    fontSize: fontSize.sm,
+    lineHeight: lineHeight.sm,
+    textAlign: `center`,
+  },
+  fallbackAction: {
+    alignSelf: `stretch`,
+    marginTop: spacing.sm,
+  },
 })

packages/agents-mobile/app/oauth/callback.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import * as Linking from 'expo-linking'
-import { Redirect, useLocalSearchParams } from 'expo-router'
+import { Redirect, useLocalSearchParams, useRouter } from 'expo-router'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import {
   cloudAuth,
   isCallbackUrl,
   type CloudAuthState,
 } from '../../src/lib/cloudAuth'
+import { PrimaryButton } from '../../src/components/PrimaryButton'
 import { useMobileAppState } from '../../src/lib/MobileAppState'
 import { useTokens } from '../../src/lib/ThemeProvider'
 import { fontSize, lineHeight, spacing } from '../../src/lib/theme'
@@ -50,6 +51,7 @@ type RouteStatus =
 
 export default function OAuthCallbackRoute(): React.ReactElement {
   const params = useLocalSearchParams()
+  const router = useRouter()
   const tokens = useTokens()
   const styles = useMemo(() => createStyles(tokens), [tokens])
   const { serverUrl, onboardingDismissed } = useMobileAppState()
@@ -63,6 +65,17 @@ export default function OAuthCallbackRoute(): React.ReactElement {
     deriveStatus(cloudAuth.getState())
   )
 
+  // Escape hatch: a cold start onto `/oauth/callback` with no pending
+  // request (or a redirect that never arrives) would otherwise spin on
+  // "Finishing sign-in…" forever. After a grace period, surface a way
+  // back to the sign-in screen.
+  const [tookTooLong, setTookTooLong] = useState(false)
+  useEffect(() => {
+    if (status.kind !== `working`) return
+    const timer = setTimeout(() => setTookTooLong(true), 10_000)
+    return () => clearTimeout(timer)
+  }, [status.kind])
+
   useEffect(() => {
     // Sync once on mount in case the state changed between the
     // `useState` initializer and this effect attaching (very narrow
@@ -137,6 +150,18 @@ export default function OAuthCallbackRoute(): React.ReactElement {
     <View style={styles.root}>
       <ActivityIndicator color={tokens.accent11} />
       <Text style={styles.text}>Finishing sign-in…</Text>
+      {tookTooLong ? (
+        <View style={styles.escape}>
+          <Text style={styles.subtext}>
+            This is taking longer than expected.
+          </Text>
+          <PrimaryButton
+            title="Back to sign-in"
+            variant="soft"
+            onPress={() => router.replace(`/onboarding`)}
+          />
+        </View>
+      ) : null}
     </View>
   )
 }
@@ -191,5 +216,17 @@ function createStyles(tokens: Tokens) {
       lineHeight: lineHeight.base,
       textAlign: `center`,
     },
+    escape: {
+      alignSelf: `stretch`,
+      alignItems: `center`,
+      gap: spacing.sm,
+      marginTop: spacing.lg,
+    },
+    subtext: {
+      color: tokens.text3,
+      fontSize: fontSize.sm,
+      lineHeight: lineHeight.sm,
+      textAlign: `center`,
+    },
   })
 }