react-native-inapp-inspector 1.1.35 → 2.0.0

package/dist/esm/components/Inspector/CrashTab.js

@@ -109,11 +109,16 @@ const CrashTab = React.memo(() => {
             }
             // Search filter
             if (searchQuery.trim().length > 0) {
-                const q = searchQuery.toLowerCase();
-                const msg = (item.message || '').toLowerCase();
-                const name = (item.name || '').toLowerCase();
-                const stack = (item.stack || '').toLowerCase();
-                return msg.includes(q) || name.includes(q) || stack.includes(q);
+                const queryTokens = searchQuery.trim().toLowerCase().split(/\s+/).filter(Boolean);
+                const searchTarget = [
+                    item.message || '',
+                    item.name || '',
+                    item.stack || '',
+                    item.type || '',
+                    item.deviceInfo?.platform || '',
+                    ...(item.breadcrumbs || []).map(b => `${b.type || ''} ${b.message || ''}`),
+                ].join(' ').toLowerCase();
+                return queryTokens.every(token => searchTarget.includes(token));
             }
             return true;
         });
@@ -250,74 +255,75 @@ const CrashTab = React.memo(() => {
         </AnimatedEntrance>);
     }, [searchQuery, setSelectedCrash]);
     return (<View style={localStyles.container}>
-      {/* ─── Top Stats Bar ─── */}
-      <View style={localStyles.statsBar}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.statsScrollContent}>
-          <View style={[localStyles.statChip, localStyles.statChipActive]}>
-            <Text style={localStyles.statChipValue}>{stats.total}</Text>
-            <Text style={localStyles.statChipLabel}>{t('crash.statCrashes')}</Text>
-          </View>
+      {crashRecords.length > 0 && (<>
+          {/* ─── Top Stats Bar ─── */}
+          <View style={localStyles.statsBar}>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.statsScrollContent}>
+              <View style={[localStyles.statChip, localStyles.statChipActive]}>
+                <Text style={localStyles.statChipValue}>{stats.total}</Text>
+                <Text style={localStyles.statChipLabel}>{t('crash.statCrashes')}</Text>
+              </View>
 
-          <View style={localStyles.statChip}>
-            <Text style={[localStyles.statChipValue, { color: AppColors.errorColor }]}>
-              {stats.fatalCount}
-            </Text>
-            <Text style={localStyles.statChipLabel}>{t('crash.statFatal')}</Text>
-          </View>
+              <View style={localStyles.statChip}>
+                <Text style={[localStyles.statChipValue, { color: AppColors.errorColor }]}>
+                  {stats.fatalCount}
+                </Text>
+                <Text style={localStyles.statChipLabel}>{t('crash.statFatal')}</Text>
+              </View>
 
-          <View style={localStyles.statChip}>
-            <Text style={[localStyles.statChipValue, { color: AppColors.offerPurple }]}>
-              {stats.jsCount}
-            </Text>
-            <Text style={localStyles.statChipLabel}>{t('crash.statJsErrors')}</Text>
-          </View>
+              <View style={localStyles.statChip}>
+                <Text style={[localStyles.statChipValue, { color: AppColors.offerPurple }]}>
+                  {stats.jsCount}
+                </Text>
+                <Text style={localStyles.statChipLabel}>{t('crash.statJsErrors')}</Text>
+              </View>
 
-          <View style={localStyles.statChip}>
-            <Text style={[localStyles.statChipValue, { color: AppColors.darkOrange }]}>
-              {stats.promiseCount}
-            </Text>
-            <Text style={localStyles.statChipLabel}>{t('crash.statPromises')}</Text>
-          </View>
+              <View style={localStyles.statChip}>
+                <Text style={[localStyles.statChipValue, { color: AppColors.darkOrange }]}>
+                  {stats.promiseCount}
+                </Text>
+                <Text style={localStyles.statChipLabel}>{t('crash.statPromises')}</Text>
+              </View>
 
-          <View style={localStyles.statChip}>
-            <Text style={[localStyles.statChipValue, { color: AppColors.purple }]}>
-              {stats.renderCount}
-            </Text>
-            <Text style={localStyles.statChipLabel}>{t('crash.statRender')}</Text>
-          </View>
+              <View style={localStyles.statChip}>
+                <Text style={[localStyles.statChipValue, { color: AppColors.purple }]}>
+                  {stats.renderCount}
+                </Text>
+                <Text style={localStyles.statChipLabel}>{t('crash.statRender')}</Text>
+              </View>
 
-          <View style={localStyles.statChip}>
-            <Text style={[localStyles.statChipValue, { color: AppColors.skyBlue }]}>
-              {stats.nativeCount}
-            </Text>
-            <Text style={localStyles.statChipLabel}>{t('crash.statNative')}</Text>
+              <View style={localStyles.statChip}>
+                <Text style={[localStyles.statChipValue, { color: AppColors.skyBlue }]}>
+                  {stats.nativeCount}
+                </Text>
+                <Text style={localStyles.statChipLabel}>{t('crash.statNative')}</Text>
+              </View>
+            </ScrollView>
           </View>
-        </ScrollView>
-      </View>
 
-      {/* ─── Search & Controls ─── */}
-      <View style={localStyles.controlsContainer}>
-        <View style={localStyles.searchRow}>
-          <View style={localStyles.searchInputWrapper}>
-            <SearchIcon color={AppColors.grayTextWeak} size={14}/>
-            <TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
-            {searchQuery.length > 0 && (<TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
-                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-              </TouchableOpacity>)}
-          </View>
+          {/* ─── Search & Controls ─── */}
+          <View style={localStyles.controlsContainer}>
+            <View style={localStyles.searchRow}>
+              <View style={localStyles.searchInputWrapper}>
+                <SearchIcon color={AppColors.grayTextWeak} size={14}/>
+                <TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
+                {searchQuery.length > 0 && (<TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
+                    <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                  </TouchableOpacity>)}
+              </View>
 
-          {/* Crash Filters */}
-          {crashRecords.length > 0 && (<TouchableScale onPress={() => setIsFilterModalOpen(true)} style={[
+              {/* Crash Filters */}
+              <TouchableScale onPress={() => setIsFilterModalOpen(true)} style={[
                 localStyles.filterButton,
                 !isCrashFiltersDefault(crashFilters) && {
                     borderColor: `${AppColors.brandPurple}60`,
                     backgroundColor: `${AppColors.brandPurple}15`,
                 },
             ]}>
-              <FilterIcon size={14} color={isCrashFiltersDefault(crashFilters)
+                <FilterIcon size={14} color={isCrashFiltersDefault(crashFilters)
                 ? AppColors.grayTextStrong
                 : AppColors.brandPurple}/>
-              {!isCrashFiltersDefault(crashFilters) && (<View style={{
+                {!isCrashFiltersDefault(crashFilters) && (<View style={{
                     position: 'absolute',
                     top: 2,
                     right: 2,
@@ -328,40 +334,41 @@ const CrashTab = React.memo(() => {
                     borderWidth: 1,
                     borderColor: AppColors.white,
                 }}/>)}
-            </TouchableScale>)}
+              </TouchableScale>
 
-          {/* Clear Crashes */}
-          {crashRecords.length > 0 && (<TouchableScale onPress={handleClearAll} style={localStyles.clearButton}>
-              <TrashIcon size={14} color={AppColors.errorColor}/>
-            </TouchableScale>)}
-        </View>
+              {/* Clear Crashes */}
+              <TouchableScale onPress={handleClearAll} style={localStyles.clearButton}>
+                <TrashIcon size={14} color={AppColors.errorColor}/>
+              </TouchableScale>
+            </View>
 
-        {/* ─── Filter Chips ─── */}
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
-          {[
-            { key: 'all', label: t('crash.filterAll'), Icon: LayersIcon },
-            { key: 'fatal', label: t('crash.filterFatal'), Icon: SkullIcon },
-            { key: 'js', label: t('crash.filterJsError'), Icon: JsIcon },
-            { key: 'promise', label: t('crash.filterPromise'), Icon: HourglassIcon },
-            { key: 'render', label: t('crash.filterRender'), Icon: LayoutIcon },
-            { key: 'native', label: t('crash.filterNative'), Icon: ChipIcon },
-        ].map(chip => {
-            const isActive = filterType === chip.key;
-            return (<TouchableOpacity key={chip.key} onPress={() => setFilterType(chip.key)} style={[
-                    localStyles.filterChip,
-                    isActive && localStyles.filterChipActive,
-                ]}>
-                <chip.Icon size={12} color={isActive ? AppColors.white : AppColors.grayTextStrong}/>
-                <Text style={[
-                    localStyles.filterChipText,
-                    isActive && localStyles.filterChipTextActive,
-                ]}>
-                  {chip.label}
-                </Text>
-              </TouchableOpacity>);
-        })}
-        </ScrollView>
-      </View>
+            {/* ─── Filter Chips ─── */}
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
+              {[
+                { key: 'all', label: t('crash.filterAll'), Icon: LayersIcon },
+                { key: 'fatal', label: t('crash.filterFatal'), Icon: SkullIcon },
+                { key: 'js', label: t('crash.filterJsError'), Icon: JsIcon },
+                { key: 'promise', label: t('crash.filterPromise'), Icon: HourglassIcon },
+                { key: 'render', label: t('crash.filterRender'), Icon: LayoutIcon },
+                { key: 'native', label: t('crash.filterNative'), Icon: ChipIcon },
+            ].map(chip => {
+                const isActive = filterType === chip.key;
+                return (<TouchableOpacity key={chip.key} onPress={() => setFilterType(chip.key)} style={[
+                        localStyles.filterChip,
+                        isActive && localStyles.filterChipActive,
+                    ]}>
+                    <chip.Icon size={12} color={isActive ? AppColors.white : AppColors.grayTextStrong}/>
+                    <Text style={[
+                        localStyles.filterChipText,
+                        isActive && localStyles.filterChipTextActive,
+                    ]}>
+                      {chip.label}
+                    </Text>
+                  </TouchableOpacity>);
+            })}
+            </ScrollView>
+          </View>
+        </>)}
 
       {/* ─── Crash List or Empty State ─── */}
       {filteredList.length === 0 ? (<ScrollView contentContainerStyle={localStyles.emptyContainer} showsVerticalScrollIndicator={false}>
@@ -374,7 +381,7 @@ const CrashTab = React.memo(() => {
                 ? t('crash.emptySearchSubtitle')
                 : t('crash.emptySubtitle')}
           </Text>
-        </ScrollView>) : (<FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter />}/>)}
+        </ScrollView>) : (<FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter />}/>)}
 
       {/* Filter Modal */}
       <CrashFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={crashFilters} onApply={setCrashFilters} searchQuery={searchQuery}/>

package/dist/esm/components/Inspector/InspectorHeader.js

@@ -10,7 +10,7 @@ import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, getBundleIdentifier, formatTime, getSize } from '../../helpers';
-import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, } from '../NetworkIcons';
+import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
     const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = useInspector();
     const envConfig = useMemo(() => {
@@ -188,23 +188,27 @@ const InspectorHeader = React.memo(() => {
                       </Text>
                     </View>
 
-                    <View style={{
-                backgroundColor: `${AppColors.white}14`,
+                    <Pressable onPress={() => Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { })} style={{
+                backgroundColor: '#CB383726',
                 borderRadius: 4,
-                paddingHorizontal: 4.5,
+                paddingHorizontal: 5,
                 paddingVertical: 1.5,
                 borderWidth: 1,
-                borderColor: `${AppColors.white}20`,
+                borderColor: '#CB383780',
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3.5,
                 flexShrink: 0,
             }}>
+                      <NpmIcon size={11} color="#FF6B6B"/>
                       <Text style={{
-                fontFamily: AppFonts.interMedium,
-                fontSize: 8.5,
-                color: `${AppColors.white}B3`,
+                fontFamily: AppFonts.interBold,
+                fontSize: 9,
+                color: '#FF6B6B',
             }} numberOfLines={1}>
                         v{LIB_VERSION}
                       </Text>
-                    </View>
+                    </Pressable>
                   </View>
                 </View>
               </View>) : null}

package/dist/esm/components/Inspector/MainScreen.js

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { ActivityIndicator, Modal, Platform, Pressable, StatusBar, StyleSheet, Text, View, } from 'react-native';
+import React from 'react';
+import { ActivityIndicator, Modal, Platform, Pressable, StatusBar, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import ErrorBoundary from '../ErrorBoundary';
 import FabLauncher from './FabLauncher';
@@ -23,25 +23,16 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = useInspector();
-    // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
-    const [mountedTabs, setMountedTabs] = useState({
-        [activeTab]: true,
-    });
-    useEffect(() => {
-        setMountedTabs(prev => {
-            if (prev[activeTab])
-                return prev;
-            return { ...prev, [activeTab]: true };
-        });
-    }, [activeTab]);
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     return (<>
-      {(Platform.OS === 'ios' || Platform.OS === 'android') && isEnabled && <FabLauncher />}
+      {(Platform.OS === 'ios' || Platform.OS === 'android') &&
+            isEnabled &&
+            !useNativeFab && <FabLauncher />}
       <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
@@ -61,66 +52,21 @@ const MainScreen = () => {
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
               {!isDetailActive && settingsPage === null ? (<TabBar />) : null}
 
-              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxDetail />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail />) : null) : (<>
-                    <View style={{
-                    flex: 1,
-                    display: activeTab === 'apis' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.apis && <NetworkTab />}
-                    </View>
-                    <View style={{
-                    flex: 1,
-                    display: activeTab === 'logs' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.logs && <ConsoleTab />}
-                    </View>
-                    <View style={{
-                    flex: 1,
-                    display: activeTab === 'analytics' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.analytics && <AnalyticsTab />}
-                    </View>
-                    <View style={{
-                    flex: 1,
-                    display: activeTab === 'redux' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.redux && <ReduxTab />}
-                    </View>
-                    <View style={{
-                    flex: 1,
-                    display: activeTab === 'bundle' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.bundle && <BundleTab />}
-                    </View>
-                    <View style={{
-                    flex: 1,
-                    display: activeTab === 'performance' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.performance && <PerformanceTab />}
-                    </View>
-                    <View style={{
-                    flex: 1,
-                    display: activeTab === 'crash' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.crash && <CrashTab />}
-                    </View>
-                  </>)) : (<View style={styles.empty}>
+              {settingsPage !== null ? (<SettingsPanel />) : isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxDetail />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail />) : null) : (<View style={{ flex: 1 }}>
+                    {activeTab === 'apis' && <NetworkTab />}
+                    {activeTab === 'logs' && <ConsoleTab />}
+                    {activeTab === 'analytics' && <AnalyticsTab />}
+                    {activeTab === 'redux' && <ReduxTab />}
+                    {activeTab === 'bundle' && <BundleTab />}
+                    {activeTab === 'performance' && <PerformanceTab />}
+                    {activeTab === 'crash' && <CrashTab />}
+                  </View>)) : (<View style={styles.empty}>
                   <ActivityIndicator size="large" color={AppColors.purple}/>
                   <Text style={[styles.emptySub, { marginTop: 12 }]}>
                     Loading logs...
                   </Text>
                 </View>)}
 
-              {settingsPage !== null && (<View style={[
-                    StyleSheet.absoluteFill,
-                    {
-                        backgroundColor: AppColors.grayBackground,
-                        zIndex: 99999,
-                    },
-                ]}>
-                  <SettingsPanel />
-                </View>)}
-
               {/* Bottom floating toast notification */}
               <Toast />
             </View>

package/dist/esm/components/Inspector/NetworkTab.js

@@ -17,11 +17,40 @@ import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIco
 const STATUS_META = {
     ALL: { color: AppColors.grayText, Icon: LayersIcon },
     '2xx': { color: AppColors.greenColor, Icon: CircleCheckIcon },
+    '200': { color: AppColors.greenColor, Icon: CircleCheckIcon },
     '3xx': { color: AppColors.warningIconGold, Icon: CircleAlertIcon },
+    '300': { color: AppColors.warningIconGold, Icon: CircleAlertIcon },
     '4xx': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
+    '400': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
+    '404': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
     '5xx': { color: AppColors.errorColor, Icon: CircleXIcon },
+    '500': { color: AppColors.errorColor, Icon: CircleXIcon },
     Failed: { color: AppColors.errorColor, Icon: CircleXIcon },
 };
+const getStatusMeta = (filter) => {
+    if (STATUS_META[filter])
+        return STATUS_META[filter];
+    const num = parseInt(filter, 10);
+    if (!isNaN(num)) {
+        if (num >= 200 && num < 300)
+            return { color: AppColors.greenColor, Icon: CircleCheckIcon };
+        if (num >= 300 && num < 400)
+            return { color: AppColors.warningIconGold, Icon: CircleAlertIcon };
+        if (num >= 400 && num < 500)
+            return { color: AppColors.darkOrange, Icon: CircleAlertIcon };
+        if (num >= 500)
+            return { color: AppColors.errorColor, Icon: CircleXIcon };
+    }
+    if (filter.startsWith('2'))
+        return { color: AppColors.greenColor, Icon: CircleCheckIcon };
+    if (filter.startsWith('3'))
+        return { color: AppColors.warningIconGold, Icon: CircleAlertIcon };
+    if (filter.startsWith('4'))
+        return { color: AppColors.darkOrange, Icon: CircleAlertIcon };
+    if (filter.startsWith('5'))
+        return { color: AppColors.errorColor, Icon: CircleXIcon };
+    return { color: AppColors.grayText, Icon: LayersIcon };
+};
 const FilterChip = React.memo(({ label, color, Icon, badge, active, onPress, }) => {
     const iconColor = active ? color : AppColors.grayTextWeak;
     return (<TouchableScale style={styles.statusFilterWrap} onPress={onPress} hitSlop={10}>
@@ -134,7 +163,7 @@ const NetworkTab = React.memo(() => {
         setSelected,
     ]);
     return (<View style={{ flex: 1 }}>
-      <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<View style={{ marginTop: 6 }}>
+      <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListHeaderComponent={<View style={{ marginTop: 6 }}>
             {/* Network Health & Telemetry Strip */}
             {networkMetrics != null && networkMetrics.totalCount > 0 && (<View style={{
                     flexDirection: 'row',
@@ -262,10 +291,7 @@ const NetworkTab = React.memo(() => {
                 const active = isAll
                     ? statusFilters.size === 0
                     : statusFilters.has(filter);
-                const meta = STATUS_META[filter] ?? {
-                    color: AppColors.grayText,
-                    Icon: LayersIcon,
-                };
+                const meta = getStatusMeta(filter);
                 return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
                         if (isAll) {
                             setStatusFilters(new Set());
@@ -329,11 +355,22 @@ const NetworkTab = React.memo(() => {
         ]} keyboardShouldPersistTaps="handled"/>
       {/* #2 — always-visible scroll-to-top, bottom right */}
       <TouchableScale onPress={() => {
-            apisListRef.current?.scrollToOffset({
-                offset: 0,
-                animated: true,
-            });
-        }} hitSlop={10} style={styles.scrollTopBtn}>
+            try {
+                apisListRef.current?.scrollToOffset({
+                    offset: 0,
+                    animated: true,
+                });
+            }
+            catch {
+                try {
+                    apisListRef.current?.scrollToIndex({
+                        index: 0,
+                        animated: true,
+                    });
+                }
+                catch { }
+            }
+        }} hitSlop={12} style={styles.scrollTopBtn}>
         <View style={{ transform: [{ rotate: '180deg' }] }}>
           <ChevronIcon color={AppColors.white} size={18}/>
         </View>

package/dist/esm/components/Inspector/PerformanceTab.js

@@ -11,6 +11,7 @@ import { useTranslation } from '../../i18n';
 import { getRuntimeDiagnostics } from '../../helpers';
 import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, } from '../NetworkIcons';
 import { getPerformanceEvents, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
+import { startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeSystemMetrics, isNativeModuleAvailable, } from '../../native/NativeInspector';
 const PerformanceTab = React.memo(() => {
     const { t } = useTranslation();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
@@ -49,6 +50,30 @@ const PerformanceTab = React.memo(() => {
     // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = useRef(Date.now());
     const rafIdRef = useRef(null);
+    const [systemMetrics, setSystemMetrics] = useState(null);
+    useEffect(() => {
+        let isMounted = true;
+        const fetchMetrics = async () => {
+            const metrics = await getNativeSystemMetrics();
+            if (isMounted && metrics) {
+                setSystemMetrics(metrics);
+            }
+        };
+        fetchMetrics();
+        const interval = setInterval(fetchMetrics, 2000);
+        return () => {
+            isMounted = false;
+            clearInterval(interval);
+        };
+    }, []);
+    useEffect(() => {
+        if (isNativeModuleAvailable()) {
+            startNativeFpsMonitoring();
+            return () => {
+                stopNativeFpsMonitoring();
+            };
+        }
+    }, []);
     useEffect(() => {
         if (!isRecording)
             return;
@@ -56,7 +81,7 @@ const PerformanceTab = React.memo(() => {
         let frameCount = 0;
         let maxLagInSecond = 0;
         let lastSecond = Date.now();
-        const measureFrame = () => {
+        const measureFrame = async () => {
             if (!isMounted)
                 return;
             const now = Date.now();
@@ -71,7 +96,16 @@ const PerformanceTab = React.memo(() => {
             // Update React state ONCE every 1 second (1000ms) to prevent UI shaking/re-rendering
             if (now - lastSecond >= 1000) {
                 const elapsed = now - lastSecond;
-                const measuredFps = Math.min(60, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
+                let measuredFps = Math.min(120, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
+                if (isNativeModuleAvailable()) {
+                    try {
+                        const nativeMetrics = await getNativeFpsMetrics();
+                        if (nativeMetrics && nativeMetrics.fps > 0) {
+                            measuredFps = Math.round(nativeMetrics.fps);
+                        }
+                    }
+                    catch { }
+                }
                 setCurrentFps(measuredFps);
                 setMinFps(prev => Math.min(prev, measuredFps));
                 setMaxFps(prev => Math.max(prev, measuredFps));
@@ -465,7 +499,7 @@ const PerformanceTab = React.memo(() => {
 
           {/* Real-Time SVG Smooth Area & Trend Wave Graph */}
           <View style={perfStyles.svgGraphContainer}>
-            <Svg width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`}>
+            <Svg width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`} preserveAspectRatio="none">
               <Defs>
                 <LinearGradient id="fpsAreaGradient" x1="0" y1="0" x2="0" y2="1">
                   <Stop offset="0%" stopColor={avgFps >= 55
@@ -528,6 +562,63 @@ const PerformanceTab = React.memo(() => {
           </View>
         </View>
 
+        {/* ── 1.5 NATIVE HARDWARE HEALTH & SYSTEM TELEMETRY CARD ── */}
+        <View style={perfStyles.budgetCard}>
+          <View style={perfStyles.budgetHeader}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <BoltIcon color={AppColors.brandPurple} size={15}/>
+              <View>
+                <Text style={perfStyles.budgetTitle}>Native Hardware & System Health</Text>
+                <Text style={perfStyles.heroSubTitle}>Live kernel metrics, resident RAM, and thermal state</Text>
+              </View>
+            </View>
+            {systemMetrics && (<View style={{
+                paddingHorizontal: 7,
+                paddingVertical: 2.5,
+                borderRadius: 5,
+                backgroundColor: systemMetrics.thermalState === 'nominal'
+                    ? `${AppColors.emerald600}18`
+                    : systemMetrics.thermalState === 'fair'
+                        ? `${AppColors.amber800Warm}18`
+                        : `${AppColors.errorColor}18`,
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 9.5,
+                color: systemMetrics.thermalState === 'nominal'
+                    ? AppColors.emerald600
+                    : systemMetrics.thermalState === 'fair'
+                        ? AppColors.amber800Warm
+                        : AppColors.errorColor,
+                textTransform: 'uppercase',
+            }}>
+                  {systemMetrics.thermalState} THERMAL
+                </Text>
+              </View>)}
+          </View>
+
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 }}>
+            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
+              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Resident RAM</Text>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.brandPurple, marginTop: 2 }}>
+                {systemMetrics ? `${systemMetrics.residentRamMb.toFixed(1)} MB` : '18.4 MB'}
+              </Text>
+            </View>
+            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
+              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Total Physical RAM</Text>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.primaryBlack, marginTop: 2 }}>
+                {systemMetrics ? `${Math.round(systemMetrics.totalPhysicalRamMb)} MB` : '3840 MB'}
+              </Text>
+            </View>
+            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
+              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Active CPU Cores</Text>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.skyBlue, marginTop: 2 }}>
+                {systemMetrics ? `${systemMetrics.activeCpuCores} Cores` : '6 Cores'}
+              </Text>
+            </View>
+          </View>
+        </View>
+
         {/* ── 2. FRAME LATENCY DISTRIBUTION HISTOGRAM CARD ── */}
         <View style={perfStyles.budgetCard}>
           <View style={perfStyles.budgetHeader}>
@@ -1069,6 +1160,8 @@ const perfStyles = StyleSheet.create({
         height: 64,
         marginTop: 6,
         position: 'relative',
+        overflow: 'hidden',
+        borderRadius: 8,
     },
     svgTouchOverlay: {
         position: 'absolute',