@oxyhq/services 22.6.4 → 22.7.0

package/src/ui/boot/runProviderColdBoot.ts

@@ -18,6 +18,59 @@ import type { CommitInput } from '../context/oxyContextTypes';
 /** How long the cold boot waits for the post-boot SessionClient handoff (ms). */
 export const SESSION_HANDOFF_DEADLINE_MS = 6000;
 
+/**
+ * HARD overall deadline (ms) for the whole `runSessionColdBoot` step chain.
+ *
+ * Bounds time-to-route: routing gates on `isAuthResolved`, which resolves when
+ * the cold boot finishes, so a network step that never settles (a black-hole
+ * network that neither connects nor rejects) would otherwise hang routing
+ * indefinitely. 12s comfortably exceeds the healthy worst case of the
+ * sequential, single-attempt (`retry:false`), 5s-capped network steps, so it is
+ * INERT on healthy loads and only trips on a pathological network. Offline
+ * devices short-circuit far sooner via the connectivity hint below.
+ */
+export const COLD_BOOT_OVERALL_DEADLINE_MS = 12_000;
+
+/**
+ * Timeout (ms) for the best-effort native connectivity probe. Kept tight so the
+ * probe never itself adds meaningful latency to a healthy boot — an unknown
+ * result within this window is treated as "online".
+ */
+const OFFLINE_PROBE_TIMEOUT_MS = 500;
+
+/**
+ * Best-effort, FAST connectivity probe run once before the cold boot.
+ *
+ * Returns `true` ONLY on an EXPLICIT disconnected verdict; every ambiguous
+ * outcome (probe timeout, unknown/`null` state, NetInfo unavailable, a thrown
+ * error) resolves to `false` (assume online) so a flaky probe can never falsely
+ * skip a real sign-in. Never rejects. On web it reads `navigator.onLine`; on
+ * native it races `NetInfo.fetch()` against {@link OFFLINE_PROBE_TIMEOUT_MS},
+ * mirroring the existing NetInfo dynamic-import pattern in `OxyProvider`.
+ */
+async function detectOfflineHint(): Promise<boolean> {
+  try {
+    if (isWebBrowser()) {
+      const online = (globalThis as { navigator?: { onLine?: boolean } }).navigator?.onLine;
+      // Only an explicit `false` is an offline verdict; `undefined` ⇒ assume online.
+      return online === false;
+    }
+    const NetInfo = await import('@react-native-community/netinfo');
+    const state = await Promise.race([
+      NetInfo.default.fetch(),
+      new Promise<null>((resolve) => {
+        setTimeout(() => resolve(null), OFFLINE_PROBE_TIMEOUT_MS);
+      }),
+    ]);
+    // `null` ⇒ the probe timed out (unknown → assume online). Only an explicit
+    // `isConnected === false` disables the network steps.
+    return state?.isConnected === false;
+  } catch {
+    // NetInfo missing / probe threw — never block sign-in on a probe failure.
+    return false;
+  }
+}
+
 export interface RunProviderColdBootOptions {
   oxyServices: OxyServices;
   authStore: AuthStateStore;
@@ -79,10 +132,24 @@ export async function runProviderColdBoot(opts: RunProviderColdBootOptions): Pro
       return;
     }
 
+    // Best-effort connectivity probe up front: an EXPLICIT offline verdict skips
+    // the two doomed network steps so routing settles immediately instead of
+    // burning the overall deadline on a mint that cannot succeed. Any ambiguity
+    // resolves to "online" — the network steps still run.
+    const offline = await detectOfflineHint();
+
     const outcome = await runSessionColdBoot({
       oxy: oxyServices,
       store: authStore,
       platform: { isWeb: isWebBrowser(), isNative: !isWebBrowser() },
+      overallDeadlineMs: COLD_BOOT_OVERALL_DEADLINE_MS,
+      isOffline: () => offline,
+      onStepDeadline: (stepId) => {
+        loggerUtil.warn(
+          `Cold-boot step "${stepId}" exceeded the ${COLD_BOOT_OVERALL_DEADLINE_MS}ms overall deadline — abandoned; routing proceeds signed-out`,
+          { component: 'runProviderColdBoot', method: 'onStepDeadline' },
+        );
+      },
       onSession: async (session) => {
         // Mint already persisted `{deviceId, deviceSecret}` to the store; sync the
         // in-memory SessionClient host so sockets + tab-focus re-mint can use it.

package/src/ui/components/fileManagement/AnimatedButton.tsx

@@ -10,6 +10,7 @@ interface AnimatedButtonProps {
   primaryColor: string;
   textColor: string;
   style: Record<string, unknown>;
+  accessibilityLabel: string;
 }
 
 /**
@@ -23,6 +24,7 @@ export const AnimatedButton: React.FC<AnimatedButtonProps> = ({
   primaryColor,
   textColor,
   style,
+  accessibilityLabel,
 }) => {
   const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
 
@@ -41,7 +43,13 @@ export const AnimatedButton: React.FC<AnimatedButtonProps> = ({
   });
 
   return (
-    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ selected: isSelected }}
+    >
       <Animated.View style={[style, { backgroundColor }]}>
         <Animated.View>
           <MaterialCommunityIcons

package/src/ui/context/OxyContext.tsx

@@ -45,7 +45,7 @@ import { useDeviceManagement } from '../hooks/useDeviceManagement';
 import { getStorageKeys, createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
 import type { RouteName } from '../navigation/routes';
 import { showBottomSheet as globalShowBottomSheet } from '../navigation/bottomSheetManager';
-import { useQueryClient } from '@tanstack/react-query';
+import { useQueryClient, onlineManager } from '@tanstack/react-query';
 import { clearQueryCache } from '../hooks/queryClient';
 import { useAvatarPicker } from '../hooks/useAvatarPicker';
 import { useAccountStore } from '../stores/accountStore';
@@ -848,6 +848,41 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     return () => document.removeEventListener('visibilitychange', onVisibility);
   }, [oxyServices, sessionClient, sessionClientHost, syncFromClient]);
 
+  // Reconnect heal: when connectivity transitions offline→online while there is
+  // no live access token but a persisted device credential exists, re-mint ONCE
+  // through the SAME shared single-flight lane the scheduler / tab-focus
+  // reconcile / 401 path use — never a private mint lane, so this can't
+  // double-rotate the device secret against them. A device that cold-booted
+  // OFFLINE skipped the network mint step, so its session is otherwise only
+  // recovered by the next scheduled re-mint; healing on the reconnect edge makes
+  // recovery immediate. `onlineManager` is fed by OxyProvider's existing NetInfo
+  // (native) / `navigator.onLine` (web) listener, so this reuses the one
+  // connectivity signal instead of opening a second NetInfo subscription. Works
+  // on native and web alike.
+  useEffect(() => {
+    // Seed from the current verdict so the first callback heals only on a
+    // genuine offline→online edge, never an initial subscribe fan-out.
+    let previousOnline = onlineManager.isOnline();
+    return onlineManager.subscribe((online: boolean) => {
+      const wasOffline = previousOnline === false;
+      previousOnline = online;
+      if (!online || !wasOffline) {
+        return;
+      }
+      void (async () => {
+        if (oxyServices.getAccessToken() || !sessionClientHost.getDeviceCredential()) {
+          return;
+        }
+        await oxyServices.httpService.refreshAccessToken('preflight');
+        if (!oxyServices.getAccessToken()) {
+          return;
+        }
+        await sessionClient.bootstrap();
+        await syncFromClient();
+      })().catch(() => undefined);
+    });
+  }, [oxyServices, sessionClient, sessionClientHost, syncFromClient]);
+
   // Exposed `refreshSessions`: re-bootstrap the server-authoritative device
   // state and reproject — the manual counterpart to the realtime socket.
   const refreshSessionsForContext = useCallback(async (): Promise<void> => {
@@ -877,6 +912,13 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     [sessionClient, syncFromClient],
   );
 
+  // Thin passthroughs to the platform-agnostic KeyManager. NOTE: both now THROW
+  // `IdentityUnavailableError` (from `@oxyhq/core`) when identity storage is
+  // locked/unreadable, instead of flattening that into `false`/`null`. We keep
+  // the signatures and deliberately let the typed error PROPAGATE to the caller
+  // — a locked keychain must never be misreported as "no identity". `hasIdentity`
+  // still resolves `false` and `getPublicKey` still resolves `null` for a genuine
+  // absence.
   const hasIdentity = useCallback(async (): Promise<boolean> => KeyManager.hasIdentity(), []);
   const getPublicKey = useCallback(async (): Promise<string | null> => KeyManager.getPublicKey(), []);
 

package/src/ui/screens/FileManagementScreen.tsx

@@ -40,6 +40,7 @@ import { useFileUploadState } from './fileManagement/hooks/useFileUploadState';
 import PhotoPickerView from './fileManagement/PhotoPickerSection';
 import FileListSection, { type FileListItem } from './fileManagement/FileListSection';
 import UploadBar from './fileManagement/UploadBar';
+import { AnimatedButton } from '../components/fileManagement/AnimatedButton';
 
 // Genuinely-inline-only styles: `viewModeButton` is spread into an Animated.View
 // style array (interpolated backgroundColor), and the photo tiles are
@@ -58,60 +59,6 @@ const screenStyles = StyleSheet.create({
     justifiedPhotoImage: { width: '100%', height: '100%', borderRadius: 6 },
 });
 
-// Animated button component for smooth transitions
-const AnimatedButton: React.FC<{
-    isSelected: boolean;
-    onPress: () => void;
-    icon: string;
-    primaryColor: string;
-    textColor: string;
-    style: Record<string, unknown>;
-    accessibilityLabel: string;
-}> = ({ isSelected, onPress, icon, primaryColor, textColor, style, accessibilityLabel }) => {
-    const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
-
-    useEffect(() => {
-        Animated.timing(animatedValue, {
-            toValue: isSelected ? 1 : 0,
-            duration: 200,
-            easing: Easing.out(Easing.ease),
-            useNativeDriver: false,
-        }).start();
-    }, [isSelected, animatedValue]);
-
-    const backgroundColor = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['transparent', primaryColor],
-    });
-
-    return (
-        <TouchableOpacity
-            onPress={onPress}
-            activeOpacity={0.7}
-            accessibilityRole="button"
-            accessibilityLabel={accessibilityLabel}
-            accessibilityState={{ selected: isSelected }}
-        >
-            <Animated.View
-                style={[
-                    style,
-                    {
-                        backgroundColor,
-                    },
-                ]}
-            >
-                <Animated.View>
-                    <MaterialCommunityIcons
-                        name={icon as React.ComponentProps<typeof MaterialCommunityIcons>['name']}
-                        size={16}
-                        color={isSelected ? '#FFFFFF' : textColor}
-                    />
-                </Animated.View>
-            </Animated.View>
-        </TouchableOpacity>
-    );
-};
-
 const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     onClose,
     theme,

package/src/ui/screens/fileManagement/PhotoPickerSection.tsx

@@ -151,14 +151,61 @@ export interface PhotoPickerViewProps {
  * Apple Photos pattern: when any cell is selected, *non-selected* siblings
  * fade to 0.6 opacity to focus attention on the active selection.
  */
-const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
+/**
+ * Shared cell chrome (image, dim, badge). Ring border is injected by the
+ * static vs animated wrappers so web never touches Reanimated worklets.
+ */
+function PhotoPickerCellContent(props: {
+    photo: FileMetadata;
+    dim: boolean;
+    isSelected: boolean;
+    selectionIndex: number;
+    primaryColor: string;
+    thumbUrl: string | undefined;
+    ring: React.ReactNode;
+}) {
+    const {
+        photo, dim, isSelected, selectionIndex, primaryColor, thumbUrl, ring,
+    } = props;
+
+    return (
+        <>
+            <View
+                className={`flex-1 rounded-radius-8 overflow-hidden bg-[#111111]${dim ? ' opacity-60' : ''}`}
+            >
+                <ExpoImage
+                    source={{ uri: thumbUrl }}
+                    style={{ width: '100%', height: '100%' }}
+                    contentFit="cover"
+                    transition={120}
+                    cachePolicy="memory-disk"
+                    accessibilityLabel={photo.filename}
+                />
+            </View>
+            {ring}
+            {isSelected && (
+                <View
+                    pointerEvents="none"
+                    className="absolute top-1.5 right-1.5 min-w-[22px] h-[22px] px-1.5 rounded-full items-center justify-center"
+                    style={{ backgroundColor: primaryColor }}
+                >
+                    <Text className="text-white text-[12px] font-bold leading-[14px]">
+                        {selectionIndex > 0 ? String(selectionIndex) : ''}
+                    </Text>
+                </View>
+            )}
+        </>
+    );
+}
+
+type PhotoPickerCellProps = {
     photo: FileMetadata;
     size: number;
     marginRight: number;
     marginBottom: number;
     isSelected: boolean;
-    selectionIndex: number; // 1-based for badge; 0 if not selected
-    dim: boolean; // any selection exists and this cell is not selected
+    selectionIndex: number;
+    dim: boolean;
     primaryColor: string;
     thumbUrl: string | undefined;
     enterIndex: number;
@@ -166,21 +213,64 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
     onPress: () => void;
     onLongPress: () => void;
     a11yLabel: string;
-}) {
+};
+
+const PhotoPickerCellStatic = React.memo(function PhotoPickerCellStatic(props: PhotoPickerCellProps) {
+    const {
+        photo, size, marginRight, marginBottom, isSelected, selectionIndex,
+        dim, primaryColor, thumbUrl, onPress, onLongPress, a11yLabel,
+    } = props;
+
+    const cellWrapperStyle = {
+        width: size,
+        height: size,
+        marginRight,
+        marginBottom,
+    };
+
+    const ring = isSelected ? (
+        <View
+            pointerEvents="none"
+            className="absolute inset-0 rounded-radius-8 border-[3px]"
+            style={{ borderColor: primaryColor }}
+        />
+    ) : null;
+
+    return (
+        <TouchableOpacity
+            activeOpacity={0.85}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            className="relative"
+            style={cellWrapperStyle}
+            accessibilityRole="button"
+            accessibilityLabel={a11yLabel}
+            accessibilityState={{ selected: isSelected }}
+        >
+            <PhotoPickerCellContent
+                photo={photo}
+                dim={dim}
+                isSelected={isSelected}
+                selectionIndex={selectionIndex}
+                primaryColor={primaryColor}
+                thumbUrl={thumbUrl}
+                ring={ring}
+            />
+        </TouchableOpacity>
+    );
+});
+
+const PhotoPickerCellAnimated = React.memo(function PhotoPickerCellAnimated(props: PhotoPickerCellProps) {
     const {
         photo, size, marginRight, marginBottom, isSelected, selectionIndex,
         dim, primaryColor, thumbUrl, enterIndex, reduceMotion, onPress,
         onLongPress, a11yLabel,
     } = props;
 
-    // Cap the cumulative stagger at ~800ms total so the very long grid does
-    // not keep fading in late tiles. Beyond ~53 tiles the delay maxes out.
     const STAGGER_PER_CELL_MS = 15;
     const MAX_TOTAL_STAGGER_MS = 800;
     const delay = Math.min(enterIndex * STAGGER_PER_CELL_MS, MAX_TOTAL_STAGGER_MS);
 
-    // Selection ring pulse animation: 1.0 → 1.05 → 1.0 on transition to
-    // selected. Plays at most once per selection change; reduce-motion skips.
     const ringScale = useSharedValue(1);
     const prevSelected = useRef(isSelected);
     useEffect(() => {
@@ -204,8 +294,6 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
         transform: [{ scale: ringScale.value }],
     }));
 
-    // Per-tile pixel geometry is derived from the measured grid width, so it
-    // stays an inline `style` — NativeWind cannot express a runtime pixel size.
     const cellWrapperStyle = {
         width: size,
         height: size,
@@ -213,49 +301,15 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
         marginBottom,
     };
 
-    const inner = (
-        <>
-            <View
-                className={`flex-1 rounded-radius-8 overflow-hidden bg-[#111111]${dim ? ' opacity-60' : ''}`}
-            >
-                <ExpoImage
-                    source={{ uri: thumbUrl }}
-                    // expo-image is a third-party component (no NativeWind
-                    // className remap), so fill via inline style.
-                    style={{ width: '100%', height: '100%' }}
-                    contentFit="cover"
-                    transition={120}
-                    cachePolicy="memory-disk"
-                    accessibilityLabel={photo.filename}
-                />
-            </View>
-            {isSelected && (
-                <Reanimated.View
-                    pointerEvents="none"
-                    className="absolute inset-0 rounded-radius-8 border-[3px]"
-                    // borderColor is the theme primary (dynamic); the animated
-                    // scale transform must ride on `style` too.
-                    style={[{ borderColor: primaryColor }, ringAnimatedStyle]}
-                />
-            )}
-            {isSelected && (
-                <View
-                    pointerEvents="none"
-                    className="absolute top-1.5 right-1.5 min-w-[22px] h-[22px] px-1.5 rounded-full items-center justify-center"
-                    style={{ backgroundColor: primaryColor }}
-                >
-                    <Text className="text-white text-[12px] font-bold leading-[14px]">
-                        {selectionIndex > 0 ? String(selectionIndex) : ''}
-                    </Text>
-                </View>
-            )}
-        </>
-    );
+    const ring = isSelected ? (
+        <Reanimated.View
+            pointerEvents="none"
+            className="absolute inset-0 rounded-radius-8 border-[3px]"
+            style={[{ borderColor: primaryColor }, ringAnimatedStyle]}
+        />
+    ) : null;
 
-    // Reanimated layout `entering` animations don't load on web (no worklets
-    // babel plugin in the RN-Web build) — they warn and no-op. So on web (and
-    // when reduce-motion is set) render the plain cell with no entering stagger.
-    if (reduceMotion || Platform.OS === 'web') {
+    if (reduceMotion) {
         return (
             <TouchableOpacity
                 activeOpacity={0.85}
@@ -267,7 +321,15 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
                 accessibilityLabel={a11yLabel}
                 accessibilityState={{ selected: isSelected }}
             >
-                {inner}
+                <PhotoPickerCellContent
+                    photo={photo}
+                    dim={dim}
+                    isSelected={isSelected}
+                    selectionIndex={selectionIndex}
+                    primaryColor={primaryColor}
+                    thumbUrl={thumbUrl}
+                    ring={ring}
+                />
             </TouchableOpacity>
         );
     }
@@ -287,12 +349,27 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
                 accessibilityLabel={a11yLabel}
                 accessibilityState={{ selected: isSelected }}
             >
-                {inner}
+                <PhotoPickerCellContent
+                    photo={photo}
+                    dim={dim}
+                    isSelected={isSelected}
+                    selectionIndex={selectionIndex}
+                    primaryColor={primaryColor}
+                    thumbUrl={thumbUrl}
+                    ring={ring}
+                />
             </TouchableOpacity>
         </Reanimated.View>
     );
 });
 
+const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCellProps) {
+    if (Platform.OS === 'web') {
+        return <PhotoPickerCellStatic {...props} />;
+    }
+    return <PhotoPickerCellAnimated {...props} />;
+});
+
 const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     photos,
     selectedIds,