@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/screens/karma/KarmaCenterScreen.tsx

@@ -11,7 +11,6 @@ import {
     Platform,
 } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
-import { fontFamilies } from '../../styles/fonts';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -40,8 +39,8 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     const themeColors = Colors[normalizedColorScheme];
     // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
-    const dangerColor = bloomTheme.colors.error || '#D32F2F';
-    const mutedTextColor = bloomTheme.isDark ? '#BBBBBB' : '#888888';
+    const dangerColor = bloomTheme.colors.error;
+    const mutedTextColor = bloomTheme.colors.textTertiary;
 
     // Icon colors from theme
     const iconLeaderboard = themeColors.iconPayments;
@@ -89,7 +88,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
                 <View style={styles.walletHeader}>
                     <Text style={[styles.karmaAmount, { color: primaryColor }]}>{karmaTotal ?? 0}</Text>
-                    <Text style={[styles.karmaLabel, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
+                    <Text style={[styles.karmaLabel, { color: bloomTheme.colors.textTertiary }]}>
                         {t('karma.center.balance') || 'Karma Balance'}
                     </Text>
                     <View style={styles.actionContainer}>
@@ -149,7 +148,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                                 <Text style={[styles.historyDesc, { color: bloomTheme.colors.text }]}>
                                     {entry.reason || (t('karma.center.noDescription') || 'No description')}
                                 </Text>
-                                <Text style={[styles.historyDate, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
+                                <Text style={[styles.historyDate, { color: bloomTheme.colors.textTertiary }]}>
                                     {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''}
                                 </Text>
                             </View>
@@ -183,13 +182,11 @@ const styles = StyleSheet.create({
     karmaLabel: {
         fontSize: 16,
         marginBottom: 18,
-        fontFamily: fontFamilies.inter,
     },
     karmaAmount: {
         fontSize: 48,
         fontWeight: 'bold',
         marginBottom: 4,
-        fontFamily: fontFamilies.inter,
     },
     actionContainer: {
         marginBottom: 18,
@@ -228,7 +225,6 @@ const styles = StyleSheet.create({
     sectionTitle: {
         fontSize: 18,
         fontWeight: Platform.OS === 'web' ? '600' : undefined,
-        fontFamily: fontFamilies.interSemiBold,
         marginTop: 8,
         alignSelf: 'flex-start',
         marginLeft: 24,

package/src/ui/screens/karma/KarmaFAQScreen.tsx

@@ -2,7 +2,8 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform, TextInput, LayoutAnimation } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
 import { Ionicons } from '@expo/vector-icons';
-import { Header, GroupedItem } from '../../components';
+import { Header } from '../../components';
+import { SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { normalizeColorScheme } from '../../utils/themeUtils';
@@ -72,7 +73,7 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     <TextInput
                         style={[styles.searchInput, { color: bloomTheme.colors.text }]}
                         placeholder={t('karma.faq.search') || 'Search FAQ...'}
-                        placeholderTextColor={bloomTheme.isDark ? '#BBBBBB' : '#888888'}
+                        placeholderTextColor={bloomTheme.colors.textTertiary}
                         value={search}
                         onChangeText={setSearch}
                         returnKeyType="search"
@@ -86,18 +87,15 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     <View style={styles.groupedSectionContainer}>
                         {filteredFaqs.map((faq, idx) => {
                             const isExpanded = expanded === faq.id;
-                            const isFirst = idx === 0;
                             const isLast = idx === filteredFaqs.length - 1;
 
                             return (
                                 <View key={faq.id} style={[styles.faqItemWrapper, { marginBottom: idx < filteredFaqs.length - 1 ? 4 : 0 }]}>
-                                    <GroupedItem
+                                    <SettingsListItem
                                         title={faq.q}
                                         onPress={() => handleToggle(faq.id)}
-                                        isFirst={isFirst}
-                                        isLast={isLast && !isExpanded}
                                         showChevron={false}
-                                        customContent={
+                                        rightElement={
                                             <Ionicons
                                                 name={isExpanded ? 'chevron-up' : 'chevron-down'}
                                                 size={20}

package/src/ui/screens/karma/KarmaLeaderboardScreen.tsx

@@ -41,7 +41,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
             {isLoading ? (
                 <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
             ) : error ? (
-                <Text style={[styles.error, { color: '#D32F2F' }]}>{error}</Text>
+                <Text style={[styles.error, { color: bloomTheme.colors.error }]}>{error}</Text>
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {leaderboard.length === 0 ? (
@@ -50,7 +50,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
                         leaderboard.map((entry, idx) => (
                             <TouchableOpacity
                                 key={entry.userId}
-                                style={[styles.row, idx < 3 && { backgroundColor: '#f7eaff' }]}
+                                style={[styles.row, { borderColor: bloomTheme.colors.border }, idx < 3 && { backgroundColor: bloomTheme.colors.primarySubtle }]}
                                 onPress={() => navigate?.('Profile', { userId: entry.userId, username: entry.username })}
                                 activeOpacity={0.7}
                             >
@@ -76,13 +76,12 @@ const styles = StyleSheet.create({
         paddingVertical: 12,
         paddingHorizontal: 20,
         borderBottomWidth: 1,
-        borderColor: '#eee',
     },
     rank: { fontSize: 20, width: 32, textAlign: 'center', fontWeight: 'bold' },
     avatar: { marginHorizontal: 8 },
     username: { flex: 1, fontSize: 16, marginLeft: 8 },
     karma: { fontSize: 18, fontWeight: 'bold', marginLeft: 12 },
-    placeholder: { fontSize: 16, color: '#888', textAlign: 'center', marginTop: 40 },
+    placeholder: { fontSize: 16, textAlign: 'center', marginTop: 40 },
     error: { fontSize: 16, textAlign: 'center', marginTop: 40 },
 });
 

package/src/ui/screens/karma/KarmaRewardsScreen.tsx

@@ -11,7 +11,6 @@ import { useColorScheme } from '../../hooks/useColorScheme';
 import { Colors } from '../../constants/theme';
 import { useOxy } from '../../context/OxyContext';
 import { darkenColor, lightenColor } from '../../utils/colorUtils';
-import { fontFamilies } from '../../styles/fonts';
 
 interface Achievement {
     id: string;
@@ -153,7 +152,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             category: 'contribution',
             icon: 'bug',
             iconColor: '#FF9500',
-            unlocked: false, // TODO: Check actual bug reports
+            unlocked: false,
             rarity: 'rare',
         },
         {
@@ -163,7 +162,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             category: 'contribution',
             icon: 'hand-left',
             iconColor: '#34C759',
-            unlocked: false, // TODO: Check help actions
+            unlocked: false,
             rarity: 'common',
         },
         {
@@ -173,7 +172,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             category: 'streak',
             icon: 'flash',
             iconColor: '#FFD700',
-            unlocked: false, // TODO: Check streak
+            unlocked: false,
             rarity: 'epic',
         },
     ], [t, karmaTotal, colors]);
@@ -190,7 +189,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             case 'rare':
                 return '#007AFF';
             default:
-                return '#8E8E93';
+                return bloomTheme.colors.textTertiary;
         }
     };
 
@@ -219,7 +218,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
         // Two-tone colors: darker for borders/shadow, lighter for highlights
         // Use achievement iconColor for unlocked badges, gray for locked
-        const baseColor = isLocked ? '#8E8E93' : (achievement.iconColor || '#8E8E93');
+        const baseColor = isLocked ? bloomTheme.colors.textTertiary : (achievement.iconColor || bloomTheme.colors.textTertiary);
         const darkTone = darkenColor(baseColor, 0.45); // Darker border/shadow (more contrast)
         const lightTone = lightenColor(baseColor, 0.25); // Lighter highlight
         const mediumTone = baseColor; // Base color
@@ -255,7 +254,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                             styles.badgeMain,
                             styles.badgeOrganic,
                             {
-                                backgroundColor: isLocked ? '#E5E5EA' : mediumTone,
+                                backgroundColor: isLocked ? bloomTheme.colors.border : mediumTone,
                                 borderColor: darkTone,
                                 borderWidth: 5,
                                 shadowColor: darkTone,
@@ -288,9 +287,9 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                         {/* Icon container - positioned in upper area */}
                         <View style={styles.badgeIconContainer}>
                             {isLocked ? (
-                                <Ionicons name="lock-closed" size={40} color="#8E8E93" />
+                                <Ionicons name="lock-closed" size={40} color={bloomTheme.colors.textTertiary} />
                             ) : (
-                                <Ionicons name={achievement.icon as React.ComponentProps<typeof Ionicons>['name']} size={40} color="#FFFFFF" />
+                                <Ionicons name={achievement.icon as React.ComponentProps<typeof Ionicons>['name']} size={40} color={bloomTheme.colors.negativeForeground} />
                             )}
                         </View>
 
@@ -315,7 +314,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     {/* Rarity badge - small accent in corner */}
                     {achievement.unlocked && (
                         <View style={[styles.rarityBadge, { backgroundColor: rarityColor, borderColor: darkenColor(rarityColor, 0.4) }]}>
-                            <Text style={styles.rarityText}>{achievement.rarity[0].toUpperCase()}</Text>
+                            <Text style={[styles.rarityText, { color: bloomTheme.colors.negativeForeground }]}>{achievement.rarity[0].toUpperCase()}</Text>
                         </View>
                     )}
                 </View>
@@ -323,7 +322,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 <Text style={[styles.achievementName, { color: bloomTheme.colors.text, opacity: isLocked ? 0.5 : 1 }]}>
                     {achievement.name}
                 </Text>
-                <Text style={[styles.achievementDescription, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888', opacity: isLocked ? 0.5 : 1 }]}>
+                <Text style={[styles.achievementDescription, { color: bloomTheme.colors.textTertiary, opacity: isLocked ? 0.5 : 1 }]}>
                     {achievement.description}
                 </Text>
             </View>
@@ -367,7 +366,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                             <Text style={[styles.currentKarma, { color: themeStyles.primaryColor }]}>
                                 {karmaTotal}
                             </Text>
-                            <Text style={[styles.karmaLabel, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
+                            <Text style={[styles.karmaLabel, { color: bloomTheme.colors.textTertiary }]}>
                                 {t('karma.center.balance') || 'Karma Points'}
                             </Text>
                         </View>
@@ -375,7 +374,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                             <Text style={[styles.achievementCount, { color: themeStyles.primaryColor }]}>
                                 {unlockedAchievements.length}
                             </Text>
-                            <Text style={[styles.achievementCountLabel, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
+                            <Text style={[styles.achievementCountLabel, { color: bloomTheme.colors.textTertiary }]}>
                                 {t('karma.achievements.unlocked') || 'Achievements'}
                             </Text>
                         </View>
@@ -392,7 +391,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                                 ]}
                             />
                         </View>
-                        <Text style={[styles.progressText, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
+                        <Text style={[styles.progressText, { color: bloomTheme.colors.textTertiary }]}>
                             {unlockedAchievements.length} / {achievements.length}
                         </Text>
                     </View>
@@ -456,7 +455,6 @@ const styles = StyleSheet.create({
     currentKarma: {
         fontSize: 36,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontFamily: fontFamilies.interBold,
         marginBottom: 4,
     },
     achievementStats: {
@@ -465,7 +463,6 @@ const styles = StyleSheet.create({
     achievementCount: {
         fontSize: 36,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontFamily: fontFamilies.interBold,
         marginBottom: 4,
     },
     achievementCountLabel: {
@@ -494,7 +491,6 @@ const styles = StyleSheet.create({
     sectionTitle: {
         fontSize: 20,
         fontWeight: Platform.OS === 'web' ? '600' : undefined,
-        fontFamily: fontFamilies.interSemiBold,
         marginTop: 8,
     },
     achievementsGrid: {
@@ -613,7 +609,6 @@ const styles = StyleSheet.create({
     rarityText: {
         fontSize: 14,
         fontWeight: 'bold',
-        color: '#FFFFFF',
     },
     achievementName: {
         fontSize: 15,

package/src/ui/screens/karma/KarmaRulesScreen.tsx

@@ -40,14 +40,14 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             {isLoading ? (
                 <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
             ) : error ? (
-                <Text style={[styles.error, { color: '#D32F2F' }]}>{error}</Text>
+                <Text style={[styles.error, { color: bloomTheme.colors.error }]}>{error}</Text>
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {rules.length === 0 ? (
                         <Text style={[styles.placeholder, { color: bloomTheme.colors.text }]}>{t('karma.rules.empty') || 'No rules found.'}</Text>
                     ) : (
                         rules.map((rule, idx) => (
-                            <View key={rule.id || idx} style={styles.ruleRow}>
+                            <View key={rule.id || idx} style={[styles.ruleRow, { borderColor: bloomTheme.colors.border }]}>
                                 <Text style={[styles.ruleDesc, { color: bloomTheme.colors.text }]}>{rule.description}</Text>
                             </View>
                         ))
@@ -65,10 +65,9 @@ const styles = StyleSheet.create({
         paddingVertical: 14,
         paddingHorizontal: 24,
         borderBottomWidth: 1,
-        borderColor: '#eee',
     },
     ruleDesc: { fontSize: 16 },
-    placeholder: { fontSize: 16, color: '#888', textAlign: 'center', marginTop: 40 },
+    placeholder: { fontSize: 16, textAlign: 'center', marginTop: 40 },
     error: { fontSize: 16, textAlign: 'center', marginTop: 40 },
 });
 

package/src/ui/server.ts

@@ -39,10 +39,6 @@ export const ProfileScreen = noopComponent;
 export const useAuthStore = noopHook;
 export const useAccountStore = noopHook;
 
-// Styles (empty objects)
-export const fontFamilies = {};
-export const fontStyles = {};
-
 // Toast (noop)
 export const toast = Object.assign(
     () => {},

package/src/ui/styles/authStyles.ts

@@ -1,5 +1,4 @@
 import { Platform, StyleSheet, TextStyle } from 'react-native';
-import { fontFamilies } from './fonts';
 
 export interface AuthThemeColors {
   text: string;
@@ -32,7 +31,6 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     marginBottom: 24,
   },
   modernTitle: {
-    fontFamily: fontFamilies.interBold,
     fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
     fontSize: 62,
     lineHeight: 74.4, // 62 * 1.2
@@ -47,7 +45,6 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     opacity: 0.8,
   },
   welcomeTitle: {
-    fontFamily: fontFamilies.interBold,
     fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
     fontSize: 42,
     lineHeight: 50.4, // 42 * 1.2
@@ -56,7 +53,6 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     letterSpacing: -1,
   },
   stepTitle: {
-    fontFamily: fontFamilies.interBold,
     fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
     fontSize: 42,
     lineHeight: 50.4, // 42 * 1.2
@@ -257,7 +253,6 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     borderColor: colors.background,
   },
   modernUserDisplayName: {
-    fontFamily: fontFamilies.interBold,
     fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
     fontSize: 42,
     marginBottom: 4,

package/src/ui/styles/index.ts

@@ -1,4 +1,3 @@
-export * from './fonts';
 export * from './theme';
 export * from './authStyles';
 export * from './spacing';

package/src/ui/styles/spacing.ts

@@ -1,5 +1,3 @@
-import { StyleSheet } from 'react-native';
-
 /**
  * Shared spacing constants for authentication screens
  * These values ensure consistent vertical spacing across all step components
@@ -22,44 +20,3 @@ export {
     HEADER_PADDING_TOP_OVERVIEW,
     HEADER_PADDING_TOP_SETTINGS,
 } from '../constants/spacing';
-
-/**
- * Reusable stylesheet for step components
- * NOTE: Layout styles (container, sectionSpacing) removed - all layout is handled by BottomSheetRouter
- * Step components should NOT use these for layout, only for content-specific styling
- */
-export const stepStyles = StyleSheet.create({
-    container: {
-        // Layout removed - use only for content width constraints if needed
-        width: '100%',
-        maxWidth: 420,
-        alignSelf: 'center',
-    },
-    sectionSpacing: {
-        // Layout removed - do NOT use for spacing, use explicit marginBottom: 0
-        // This is kept for backward compatibility but should not add margins
-        marginBottom: 0,
-    },
-    header: {
-        alignItems: 'flex-start',
-        width: '100%',
-        gap: STEP_INNER_GAP,
-    },
-    title: {
-        textAlign: 'left',
-        marginBottom: 0,
-        marginTop: 0,
-    },
-    subtitle: {
-        textAlign: 'left',
-        maxWidth: 320,
-        alignSelf: 'flex-start',
-        marginBottom: 0,
-        marginTop: 0,
-    },
-    buttonContainer: {
-        marginTop: 0,
-        marginBottom: 0,
-    },
-});
-

package/src/ui/styles/theme.ts

@@ -1,6 +1,5 @@
 import { Platform, StyleSheet, type TextStyle } from 'react-native';
 import { useTheme as useBloomThemeHook, type ThemeColors as BloomThemeColors } from '@oxyhq/bloom';
-import { fontFamilies } from './fonts';
 
 /**
  * ThemeColors used by services style files.
@@ -81,7 +80,6 @@ const createTheme = (isDark: boolean, colors?: ThemeColors): Theme => {
     colors: themeColors,
     fonts: {
       title: {
-        fontFamily: fontFamilies.interBold,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
         fontSize: 34,
       },
@@ -90,7 +88,6 @@ const createTheme = (isDark: boolean, colors?: ThemeColors): Theme => {
         lineHeight: 24,
       },
       button: {
-        fontFamily: fontFamilies.interSemiBold,
         fontSize: 16,
         fontWeight: '600',
         color: themeColors.background,
@@ -153,7 +150,6 @@ export const createCommonStyles = (theme: 'light' | 'dark') => {
       marginTop: 24,
     },
     buttonText: {
-      fontFamily: fontFamilies.interSemiBold,
       fontSize: 16,
       fontWeight: '600',
       color: colors.background,

package/src/ui/utils/fileManagement.ts

@@ -1,6 +1,7 @@
-import type { FileMetadata } from '@oxyhq/core';
+import type { AssetUploadInput, FileMetadata, RNFileDescriptor } from '@oxyhq/core';
 import { File as ExpoFile } from 'expo-file-system';
-import { toast } from '../../lib/sonner';
+import { Platform } from 'react-native';
+import { toast } from '@oxyhq/bloom';
 import type { RouteName } from '../navigation/routes';
 import { updateAvatarVisibility } from '@oxyhq/core';
 
@@ -13,6 +14,32 @@ interface FileWithUri extends File {
   uri?: string;
 }
 
+/**
+ * Picker descriptor as returned by expo-document-picker / expo-image-picker.
+ * Carries enough info to either build a web `File` from the URI or pass the
+ * descriptor straight to FormData on React Native.
+ */
+export interface PickerAsset {
+  file?: File | Blob;
+  uri?: string;
+  name?: string | null;
+  mimeType?: string | null;
+  size?: number | null;
+}
+
+/**
+ * Type guard — returns true if the input is a React Native file descriptor
+ * (carries a URI but is not a real DOM `File` / `Blob` instance).
+ */
+export function isRNFileDescriptor(input: unknown): input is RNFileDescriptor {
+  if (!input || typeof input !== 'object') return false;
+  const obj = input as Record<string, unknown>;
+  if (typeof obj.uri !== 'string') return false;
+  if (typeof File !== 'undefined' && input instanceof File) return false;
+  if (typeof Blob !== 'undefined' && input instanceof Blob) return false;
+  return true;
+}
+
 /**
  * Format file size in bytes to human-readable string
  */
@@ -39,65 +66,66 @@ export function getFileIcon(contentType: string): string {
 }
 
 /**
- * Convert DocumentPicker asset to File object
- * Handles both web (native File API) and mobile (URI-based) file sources
- * Expo 54 compatible - works across all platforms
+ * Convert a document/image picker asset into a value that
+ * `OxyServices.assetUpload` can accept.
+ *
+ * - On the web, builds a real `File` (with the `uri` field preserved for
+ *   preview rendering) by fetching the asset as a Blob.
+ * - On React Native (iOS/Android), returns the picker descriptor directly
+ *   ({ uri, type, name, size }). RN's `FormData` reads the file from disk
+ *   during the multipart upload — no in-JS Blob conversion needed. Attempting
+ *   to wrap an ArrayBuffer in a Blob fails on Hermes ("Creating blobs from
+ *   'ArrayBuffer' and 'ArrayBufferView' are not supported").
  */
 export async function convertDocumentPickerAssetToFile(
-    doc: { file?: File | Blob; uri?: string; name?: string | null; mimeType?: string | null; size?: number | null },
+    doc: PickerAsset,
     index: number
-): Promise<File | null> {
+): Promise<FileWithUri | RNFileDescriptor | null> {
+    const fileName = doc.name || `file-${index + 1}`;
+    const fileType = doc.mimeType || 'application/octet-stream';
+
+    // React Native path — return the descriptor as-is. FormData handles it.
+    if (Platform.OS !== 'web') {
+        if (!doc.uri) {
+            throw new Error('Missing file data (no uri property)');
+        }
+        return {
+            uri: doc.uri,
+            type: fileType,
+            name: fileName,
+            size: typeof doc.size === 'number' ? doc.size : undefined,
+        };
+    }
+
     try {
         let file: FileWithUri | null = null;
 
-        // Priority 1: Use doc.file if available (web native File API)
-        // This is the most efficient path as it doesn't require fetching
-        if (doc.file && doc.file instanceof globalThis.File) {
+        // Priority 1: Use doc.file if available (web native File API).
+        // This is the most efficient path as it doesn't require fetching.
+        if (doc.file && typeof globalThis.File !== 'undefined' && doc.file instanceof globalThis.File) {
             file = doc.file as FileWithUri;
             // Ensure file has required properties
             if (!file.name && doc.name) {
                 // Create new File with proper name if missing
-                file = new globalThis.File([file], doc.name, { type: file.type || doc.mimeType || 'application/octet-stream' });
+                file = new globalThis.File([file], doc.name, { type: file.type || fileType });
             }
-            // Preserve URI for preview if available (useful for mobile previews)
+            // Preserve URI for preview if available
             if (doc.uri) {
                 file.uri = doc.uri;
             }
             return file;
         }
 
-        // Priority 2: Use uri to create File using Expo 54 FileSystem API
-        // This path handles mobile file URIs (file://, content://) and web blob URLs
+        // Priority 2: Build File from URI (web blob URLs or http(s) URLs).
         if (doc.uri) {
             try {
-                // Check if it's a web blob URL - use fetch for those
-                if (doc.uri.startsWith('blob:') || doc.uri.startsWith('http://') || doc.uri.startsWith('https://')) {
-                    const response = await fetch(doc.uri);
-                    if (!response.ok) {
-                        throw new Error(`Failed to fetch file: ${response.statusText}`);
-                    }
-                    const blob = await response.blob();
-                    const fileName = doc.name || `file-${index + 1}`;
-                    const fileType = doc.mimeType || blob.type || 'application/octet-stream';
-                    file = new globalThis.File([blob], fileName, { type: fileType }) as FileWithUri;
-                    // Preserve URI for preview
-                    file.uri = doc.uri;
-                    return file;
-                }
-
-                // For mobile file URIs (file://, content://), use fetch to get blob
-                // React Native's Blob doesn't support Uint8Array directly, so we use fetch
-                const fileName = doc.name || `file-${index + 1}`;
-                const fileType = doc.mimeType || 'application/octet-stream';
-
-                // Use fetch to get the file as a blob (works with file:// and content:// URIs in React Native)
                 const response = await fetch(doc.uri);
                 if (!response.ok) {
                     throw new Error(`Failed to fetch file: ${response.statusText}`);
                 }
                 const blob = await response.blob();
-                file = new globalThis.File([blob], fileName, { type: fileType }) as FileWithUri;
-                // Preserve URI for preview (especially important for mobile)
+                const resolvedType = doc.mimeType || blob.type || 'application/octet-stream';
+                file = new globalThis.File([blob], fileName, { type: resolvedType }) as FileWithUri;
                 file.uri = doc.uri;
                 return file;
             } catch (error: unknown) {
@@ -162,7 +190,7 @@ export function getSafeDownloadUrl(
  * Upload file raw - helper function for file uploads
  */
 export async function uploadFileRaw(
-    file: File | Blob,
+    file: AssetUploadInput,
     userId: string,
     // biome-ignore lint/suspicious/noExplicitAny: OxyServices type cannot be fully resolved due to mixin composition pattern
     oxyServices: any,

package/src/ui/utils/sessionHelpers.ts

@@ -69,7 +69,9 @@ export const mapSessionsToClient = (
 };
 
 /**
- * Fetch device sessions with fallback to the legacy session endpoint when needed.
+ * Fetch device sessions, falling back to the per-user session endpoint
+ * if the device endpoint is unavailable (older API versions or disabled
+ * device-grouping feature flag).
  *
  * @param oxyServices - Oxy service instance
  * @param sessionId - Session identifier to fetch