react-native-inapp-inspector 2.2.8 → 2.3.0

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

@@ -4,6 +4,7 @@ import { animateNextLayout, useInspector } from './InspectorContext';
 import AnalyticsEventCard from '../AnalyticsEventCard';
 import AnalyticsFilterModal from './AnalyticsFilterModal';
 import EndOfListFooter from '../EndOfListFooter';
+import EmptyState from '../EmptyState';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
@@ -12,7 +13,7 @@ import Svg, { Path, Rect, Line, Circle, G, Defs, LinearGradient as SvgLinearGrad
 import TouchableScale from '../TouchableScale';
 import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
 import { getEventCategory, } from '../../helpers';
-import { LayersIcon, SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
+import { LayersIcon, SearchIcon, ClearIcon, TrashIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
 const AnalyticsHeader = React.memo(() => {
     const { t } = useTranslation();
     const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = useInspector();
@@ -850,9 +851,29 @@ const AnalyticsTab = React.memo(() => {
         <View style={styles.searchContainer}>
           <SearchIcon color={AppColors.grayTextWeak} size={16}/>
           <TextInput placeholder="Search events..." placeholderTextColor={AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-          {analyticsSearch.length > 0 && (<Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
-              <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-            </Pressable>)}
+          {analyticsSearch.length > 0 && (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                }}>
+              <View style={{
+                    backgroundColor: `${AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                }}>
+                <Text style={{
+                    color: AppColors.purple,
+                    fontSize: 9.5,
+                    fontFamily: AppFonts.interBold,
+                }}>
+                  {filteredAnalyticsEvents.length}
+                </Text>
+              </View>
+              <Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
+                <ClearIcon color={AppColors.grayTextWeak} size={13}/>
+              </Pressable>
+            </View>)}
         </View>
         <View style={styles.toolbarRight}>
           <TouchableOpacity style={[
@@ -907,21 +928,11 @@ const AnalyticsTab = React.memo(() => {
       <AnalyticsFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<View style={styles.emptyContainer}>
-                <View style={styles.emptyIconWrap}>
-                  <EmptyRadarIcon color={AppColors.purple} size={32}/>
-                </View>
-                <Text style={styles.emptyTitle}>
-                  {analyticsSearch.length > 0
-                    ? 'No matching events'
-                    : 'No analytics events yet'}
-                </Text>
-                <Text style={styles.emptySub}>
-                  {analyticsSearch.length > 0
-                    ? 'Try adjusting your search.'
-                    : 'Call setupAnalyticsLogger(analytics()) at app start.'}
-                </Text>
-              </View>} ListFooterComponent={filteredAnalyticsEvents.length > 0 ? (<EndOfListFooter count={filteredAnalyticsEvents.length} label="events"/>) : null} contentContainerStyle={[
+        {isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0} searchQuery={analyticsSearch} customTitle={analyticsSearch.length > 0
+                    ? 'No matching analytics events'
+                    : 'No analytics events yet'} customSub={analyticsSearch.length > 0
+                    ? `No events matched "${analyticsSearch}"`
+                    : 'Call setupAnalyticsLogger(analytics()) at app start.'} onClearSearch={() => setAnalyticsSearch('')}/>} ListFooterComponent={filteredAnalyticsEvents.length > 0 ? (<EndOfListFooter count={filteredAnalyticsEvents.length} label="events"/>) : null} contentContainerStyle={[
                 styles.listContent,
                 filteredAnalyticsEvents.length === 0 && {
                     flexGrow: 1,

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

@@ -480,7 +480,12 @@ const ConsoleTab = React.memo(() => {
         </ScrollView>
       </View>
 
-      <FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
+      <FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0} searchQuery={logSearch} customTitle={logSearch.length > 0
+                ? 'No matching console logs'
+                : 'No console logs'} onClearSearch={() => {
+                setLogSearch('');
+                setLogFilters(new Set());
+            }}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
             styles.listContent,
             filteredConsoleLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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

@@ -6,6 +6,7 @@ import TouchableScale from '../TouchableScale';
 import SegmentedTabs from '../SegmentedTabs';
 import HighlightText from '../HighlightText';
 import JsonViewer from '../JsonViewer';
+import CopyButton from '../CopyButton';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { exportCrashReport, parseCrashStackTrace, } from '../../customHooks/crashHandler';
@@ -328,9 +329,20 @@ const CrashDetail = React.memo(() => {
         {activeSubTab === 'diagnostics' && (<View style={{ gap: 12 }}>
             {/* Device & OS Diagnostics Card */}
             <View style={localStyles.sectionCard}>
-              <View style={localStyles.sectionCardHeader}>
-                <GlobeIcon color={AppColors.purple} size={14}/>
-                <Text style={localStyles.sectionCardTitle}>{t('crash.deviceEnvironment')}</Text>
+              <View style={[
+                localStyles.sectionCardHeader,
+                { justifyContent: 'space-between' },
+            ]}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <GlobeIcon color={AppColors.purple} size={14}/>
+                  <Text style={localStyles.sectionCardTitle}>
+                    {t('crash.deviceEnvironment')}
+                  </Text>
+                </View>
+                <CopyButton value={selectedCrash.deviceInfo || {
+                platform: Platform.OS,
+                osVersion: String(Platform.Version),
+            }} label="Diagnostics"/>
               </View>
 
               <View style={localStyles.diagGrid}>
@@ -380,9 +392,17 @@ const CrashDetail = React.memo(() => {
 
             {/* Memory Metrics Card */}
             {selectedCrash.memoryInfo && (<View style={localStyles.sectionCard}>
-                <View style={localStyles.sectionCardHeader}>
-                  <LayersIcon color={AppColors.purple} size={14}/>
-                  <Text style={localStyles.sectionCardTitle}>{t('crash.jsHeapMemory')}</Text>
+                <View style={[
+                    localStyles.sectionCardHeader,
+                    { justifyContent: 'space-between' },
+                ]}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                    <LayersIcon color={AppColors.purple} size={14}/>
+                    <Text style={localStyles.sectionCardTitle}>
+                      {t('crash.jsHeapMemory')}
+                    </Text>
+                  </View>
+                  <CopyButton value={selectedCrash.memoryInfo} label="Memory Info"/>
                 </View>
 
                 <View style={localStyles.diagGrid}>
@@ -405,6 +425,13 @@ const CrashDetail = React.memo(() => {
 
         {/* 3. BREADCRUMBS TAB */}
         {activeSubTab === 'breadcrumbs' && (<View style={{ gap: 10 }}>
+            {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 && (<View style={{
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                    marginBottom: 2,
+                }}>
+                <CopyButton value={selectedCrash.breadcrumbs} label="All Breadcrumbs"/>
+              </View>)}
             {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 ? (selectedCrash.breadcrumbs.map((b, idx) => (<View key={`crumb_${idx}`} style={localStyles.breadcrumbCard}>
                   <View style={localStyles.breadcrumbHeader}>
                     <View style={localStyles.breadcrumbTag}>
@@ -412,9 +439,16 @@ const CrashDetail = React.memo(() => {
                         {b.type.toUpperCase()}
                       </Text>
                     </View>
-                    <Text style={localStyles.breadcrumbTime}>
-                      {new Date(b.timestamp).toLocaleTimeString()}
-                    </Text>
+                    <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                      <Text style={localStyles.breadcrumbTime}>
+                        {new Date(b.timestamp).toLocaleTimeString()}
+                      </Text>
+                      <CopyButton value={`${new Date(b.timestamp).toLocaleTimeString()} [${b.type.toUpperCase()}] ${b.message}${b.data ? ' ' + JSON.stringify(b.data) : ''}`} label="Breadcrumb"/>
+                    </View>
                   </View>
                   <Text style={localStyles.breadcrumbMessage}>{b.message}</Text>
                   {b.data && (<View style={{ marginTop: 6 }}>

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

@@ -307,9 +307,25 @@ const CrashTab = React.memo(() => {
               <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>)}
+                {searchQuery.length > 0 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                    <View style={{
+                    backgroundColor: `${AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                }}>
+                      <Text style={{
+                    color: AppColors.purple,
+                    fontSize: 9.5,
+                    fontFamily: AppFonts.interBold,
+                }}>
+                        {filteredList.length}
+                      </Text>
+                    </View>
+                    <TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
+                      <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                    </TouchableOpacity>
+                  </View>)}
               </View>
 
               {/* Crash Filters */}
@@ -381,6 +397,21 @@ const CrashTab = React.memo(() => {
                 ? t('crash.emptySearchSubtitle')
                 : t('crash.emptySubtitle')}
           </Text>
+          {searchQuery.length > 0 && (<TouchableScale onPress={() => setSearchQuery('')} style={{
+                    marginTop: 10,
+                    paddingHorizontal: 14,
+                    paddingVertical: 7,
+                    borderRadius: 8,
+                    backgroundColor: AppColors.purple,
+                }}>
+              <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11.5,
+                    color: AppColors.white,
+                }}>
+                Clear Search
+              </Text>
+            </TouchableScale>)}
         </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 */}

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

@@ -21,9 +21,9 @@ const InfoRow = React.memo(({ label, value, copyable = true, badge, subtext, isL
             styles.infoRow,
             isLast && { borderBottomWidth: 0 },
         ]}>
-        <View style={{ flex: 1, paddingRight: 8 }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <Text style={styles.infoLabel}>{label}</Text>
+        <View style={{ flex: 1, paddingRight: 8, minWidth: 0 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
+            <Text style={styles.infoLabel} numberOfLines={2}>{label}</Text>
             {badge && (<View style={[
                 styles.infoBadge,
                 { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
@@ -33,15 +33,22 @@ const InfoRow = React.memo(({ label, value, copyable = true, badge, subtext, isL
                 </Text>
               </View>)}
           </View>
-          {subtext && <Text style={styles.infoSubtext}>{subtext}</Text>}
+          {subtext && <Text style={styles.infoSubtext} numberOfLines={2}>{subtext}</Text>}
         </View>
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            flexShrink: 0,
+            maxWidth: '58%',
+            justifyContent: 'flex-end',
+        }}>
           <Text style={[
             styles.infoValue,
             typeof value === 'boolean' && {
                 color: value ? AppColors.emerald500 : AppColors.errorColor,
             },
-        ]} numberOfLines={2} selectable>
+        ]} numberOfLines={3} selectable>
             {displayValue}
           </Text>
           {copyable && value !== null && value !== undefined && (<TouchableScale hitSlop={8} onPress={() => {
@@ -348,6 +355,14 @@ export const DeviceInfoTab = React.memo(() => {
             return true;
         return text.toLowerCase().includes(search.toLowerCase().trim());
     };
+    const hasAnyMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        const query = search.toLowerCase().trim();
+        return (JSON.stringify(fullDeviceData).toLowerCase().includes(query) ||
+            ipAddress.toLowerCase().includes(query) ||
+            pseudoUDID.toLowerCase().includes(query));
+    }, [search, fullDeviceData, ipAddress, pseudoUDID]);
     return (<View style={styles.container}>
       {/* ─── Top Sub-Tabs Navigation Bar ─── */}
       <View style={styles.subTabsWrapper}>
@@ -397,11 +412,11 @@ export const DeviceInfoTab = React.memo(() => {
             <View style={styles.heroIconWrap}>
               {Platform.OS === 'ios' ? (<AppleIcon size={20} color={AppColors.white}/>) : (<AndroidIcon size={20} color={AppColors.white}/>)}
             </View>
-            <View style={{ flex: 1 }}>
-              <Text style={styles.heroTitle}>
+            <View style={{ flex: 1, minWidth: 0 }}>
+              <Text style={styles.heroTitle} numberOfLines={1} ellipsizeMode="tail">
                 {deviceMetrics?.deviceModel || Platform.constants?.Model || (Platform.OS === 'ios' ? 'Apple iPhone' : 'Android Device')}
               </Text>
-              <Text style={styles.heroSubtitle}>
+              <Text style={styles.heroSubtitle} numberOfLines={1} ellipsizeMode="tail">
                 {Platform.OS === 'ios' ? `iOS ${Platform.Version}` : `Android ${Platform.Version} (API ${deviceMetrics?.apiLevel || Platform.Version})`}
               </Text>
             </View>
@@ -414,22 +429,22 @@ export const DeviceInfoTab = React.memo(() => {
           {/* Quick Metrics Strip */}
           <View style={styles.heroMetricsStrip}>
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>IP ADDRESS</Text>
-              <Text style={styles.heroMetricValue} numberOfLines={1}>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">IP ADDRESS</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
                 {ipAddress}
               </Text>
             </View>
             <View style={styles.heroMetricDivider}/>
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>RAM (USED/TOTAL)</Text>
-              <Text style={styles.heroMetricValue}>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">RAM (USED/TOTAL)</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
                 {usedRamMb}/{totalRamMb} MB
               </Text>
             </View>
             <View style={styles.heroMetricDivider}/>
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>UPTIME</Text>
-              <Text style={styles.heroMetricValue}>{deviceUptime}</Text>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">UPTIME</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">{deviceUptime}</Text>
             </View>
           </View>
         </View>
@@ -542,6 +557,18 @@ export const DeviceInfoTab = React.memo(() => {
             {isMatch('Sandbox Integrity') && (<InfoRow label="App Sandbox File Isolation" value="Enforced by OS Kernel" isLast/>)}
           </View>)}
 
+        {/* Empty search results state */}
+        {search.trim().length > 0 && !hasAnyMatch && (<View style={styles.emptySearchCard}>
+            <SearchIcon size={26} color={AppColors.grayTextWeak}/>
+            <Text style={styles.emptySearchTitle}>No matching device specifications</Text>
+            <Text style={styles.emptySearchSubtitle}>
+              No properties matched &ldquo;{search}&rdquo;
+            </Text>
+            <TouchableScale onPress={() => setSearch('')} style={styles.clearSearchBtn}>
+              <Text style={styles.clearSearchBtnText}>Clear Search</Text>
+            </TouchableScale>
+          </View>)}
+
         <View style={{ height: 48 }}/>
       </ScrollView>
     </View>);
@@ -713,6 +740,8 @@ const styles = StyleSheet.create({
     heroMetricItem: {
         flex: 1,
         alignItems: 'center',
+        paddingHorizontal: 2,
+        minWidth: 0,
     },
     heroMetricLabel: {
         fontFamily: AppFonts.interBold,
@@ -784,7 +813,7 @@ const styles = StyleSheet.create({
         fontFamily: AppFonts.interBold,
         fontSize: 12,
         color: AppColors.primaryBlack,
-        maxWidth: 180,
+        flexShrink: 1,
         textAlign: 'right',
     },
     rowCopyBtn: {
@@ -792,5 +821,40 @@ const styles = StyleSheet.create({
         borderRadius: 4,
         backgroundColor: AppColors.grayBackground,
     },
+    emptySearchCard: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        marginTop: 8,
+    },
+    emptySearchTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors.primaryBlack,
+        textAlign: 'center',
+    },
+    emptySearchSubtitle: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors.grayTextWeak,
+        textAlign: 'center',
+    },
+    clearSearchBtn: {
+        marginTop: 6,
+        paddingHorizontal: 14,
+        paddingVertical: 6.5,
+        borderRadius: 8,
+        backgroundColor: AppColors.purple,
+    },
+    clearSearchBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.white,
+    },
 });
 export default DeviceInfoTab;

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

@@ -9,12 +9,27 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
-import { getStatusColor, getAppName, formatTime, getSize } from '../../helpers';
+import { getStatusColor, getAppName, formatTime, getSize, getAppVersionAndBuild, } from '../../helpers';
+import { getNativeDeviceMetrics } from '../../native/NativeInspector';
 import { UpdateAvailableModal } from './UpdateAvailableModal';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, } 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, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
     const [showUpdateModal, setShowUpdateModal] = React.useState(false);
+    const [appVersionString, setAppVersionString] = React.useState(() => {
+        return getAppVersionAndBuild().formatted;
+    });
+    React.useEffect(() => {
+        getNativeDeviceMetrics()
+            .then(metrics => {
+            if (metrics?.appVersion) {
+                const v = metrics.appVersion;
+                const b = metrics.appBuild || '1';
+                setAppVersionString(`${v} (${b})`);
+            }
+        })
+            .catch(() => { });
+    }, []);
     const envConfig = useMemo(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -265,9 +280,7 @@ const InspectorHeader = React.memo(() => {
                 color: `${AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
-                        {Platform.OS === 'ios'
-                ? `iOS ${Platform.Version}`
-                : `Android ${Platform.Version}`}
+                        {appVersionString}
                       </Text>
                     </View>
 

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

@@ -396,8 +396,9 @@ const NetworkDetail = React.memo(() => {
                 selected.responseHeaders?.['Content-Type']} url={selected.url}/>
 
             {(() => {
-                const routeInfo = logRouteMapRef.current.get(selected.id);
-                if (!routeInfo || routeInfo.path === 'Navigators')
+                const routeInfo = logRouteMapRef.current.get(selected.id) ||
+                    selected?.routeInfo;
+                if (!routeInfo || !routeInfo.path || routeInfo.path === 'Navigators')
                     return null;
                 return <SourcePageCard routeInfo={routeInfo}/>;
             })()}

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

@@ -469,7 +469,7 @@ const NetworkTab = React.memo(() => {
                     <View style={{
                     backgroundColor: `${AppColors.purple}20`,
                     borderRadius: 10,
-                    paddingHorizontal: 5,
+                    paddingHorizontal: 6,
                     paddingVertical: 1.5,
                 }}>
                       <Text style={{
@@ -522,14 +522,104 @@ const NetworkTab = React.memo(() => {
                 styles.toolbarBtn,
                 filtersAccordion.isOpen &&
                     styles.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
+            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
                   <FilterIcon color={filtersAccordion.isOpen
                 ? AppColors.purple
-                : AppColors.grayTextStrong} size={18}/>
+                : AppColors.grayTextStrong} size={16}/>
+                  {(statusFilters.size > 0 ||
+                methodFilters.size > 0) && (<View style={styles.activeFilterDot}/>)}
                 </TouchableScale>
               </View>
             </View>
 
+            {/* Quick Search Scope & Filter Tags Row */}
+            <View style={{ paddingBottom: 4 }}>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+                paddingVertical: 2,
+            }}>
+                {/* Search Scopes */}
+                {SEARCH_SCOPES.map(s => {
+                const isActive = searchScope === s.id;
+                return (<TouchableScale key={`scope_${s.id}`} onPress={() => setSearchScope(s.id)} hitSlop={6} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 3.5,
+                        paddingHorizontal: 7.5,
+                        paddingVertical: 3.5,
+                        borderRadius: 6,
+                        backgroundColor: isActive
+                            ? AppColors.purple
+                            : AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? AppColors.purple
+                            : AppColors.grayBorderSecondary,
+                    }}>
+                      {s.icon(isActive ? AppColors.white : AppColors.grayTextWeak)}
+                      <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: isActive ? AppColors.white : AppColors.grayText,
+                    }}>
+                        {s.label}
+                      </Text>
+                    </TouchableScale>);
+            })}
+
+                <View style={{
+                width: 1,
+                height: 14,
+                backgroundColor: AppColors.dividerColor,
+                marginHorizontal: 3,
+            }}/>
+
+                {/* Quick Query Suggestions */}
+                {QUICK_API_QUERY_TAGS.map(q => {
+                const isActive = search.includes(q.query);
+                return (<TouchableScale key={`quick_${q.query}`} onPress={() => {
+                        setSearch(prev => {
+                            if (prev.includes(q.query)) {
+                                return prev
+                                    .replace(q.query, '')
+                                    .replace(/\s+/g, ' ')
+                                    .trim();
+                            }
+                            return `${prev} ${q.query}`.trim();
+                        });
+                    }} hitSlop={6} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 3.5,
+                        paddingHorizontal: 7.5,
+                        paddingVertical: 3.5,
+                        borderRadius: 6,
+                        backgroundColor: isActive
+                            ? `${AppColors.purple}20`
+                            : AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? AppColors.purple
+                            : AppColors.grayBorderSecondary,
+                    }}>
+                      {q.icon(isActive ? AppColors.purple : AppColors.grayTextWeak)}
+                      <Text style={{
+                        fontFamily: AppFonts.interMedium,
+                        fontSize: 10,
+                        color: isActive
+                            ? AppColors.purple
+                            : AppColors.grayText,
+                    }}>
+                        {q.label}
+                      </Text>
+                    </TouchableScale>);
+            })}
+              </ScrollView>
+            </View>
+
             {/* Quick Filter Horizontal Chips Bar with Live Counts */}
             <View style={{ marginBottom: 8 }}>
               <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
@@ -815,7 +905,16 @@ const NetworkTab = React.memo(() => {
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </Text>)}
-          </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 || statusFilters.size > 0}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
+          </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
+                statusFilters.size > 0 ||
+                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                ? 'No matching API requests'
+                : 'No network activity'} onClearSearch={() => {
+                setSearch('');
+                setStatusFilters(new Set());
+                setMethodFilters(new Set());
+                setSearchScope('all');
+            }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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

@@ -396,9 +396,25 @@ const ReduxTab = React.memo(() => {
           <View style={styles.searchContainer}>
             <SearchIcon color={AppColors.grayTextWeak} size={15}/>
             <TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search Redux slices or actions" accessibilityHint="Type to filter state slices in real time" placeholder="Search Redux slices or actions..." placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {reduxSearch.length > 0 && (<Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
-                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-              </Pressable>)}
+            {reduxSearch.length > 0 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                <View style={{
+                backgroundColor: `${AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
+                  <Text style={{
+                color: AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts.interBold,
+            }}>
+                    {filteredSlices.length}
+                  </Text>
+                </View>
+                <Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
+                  <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                </Pressable>
+              </View>)}
           </View>
 
           {/* Pause / Resume Live Updates Button */}

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

@@ -108,8 +108,8 @@ const SettingsPanel = () => {
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
         crash: Boolean(tabVisibility?.crash),
-        device: Boolean(tabVisibility?.device ?? true),
-        storage: Boolean(tabVisibility?.storage ?? true),
+        device: Boolean(tabVisibility?.device),
+        storage: Boolean(tabVisibility?.storage),
     }));
     // Synchronize staged state with tabVisibility when tabVisibility updates
     useEffect(() => {
@@ -121,8 +121,8 @@ const SettingsPanel = () => {
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
             crash: Boolean(tabVisibility?.crash),
-            device: Boolean(tabVisibility?.device ?? true),
-            storage: Boolean(tabVisibility?.storage ?? true),
+            device: Boolean(tabVisibility?.device),
+            storage: Boolean(tabVisibility?.storage),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = useMemo(() => {