react-native-inapp-inspector 2.2.9 → 2.3.1

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

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

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

@@ -48,11 +48,26 @@ const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
+const NativeInspector_1 = require("../../native/NativeInspector");
 const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.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, } = (0, InspectorContext_1.useInspector)();
     const [showUpdateModal, setShowUpdateModal] = react_1.default.useState(false);
+    const [appVersionString, setAppVersionString] = react_1.default.useState(() => {
+        return (0, helpers_1.getAppVersionAndBuild)().formatted;
+    });
+    react_1.default.useEffect(() => {
+        (0, NativeInspector_1.getNativeDeviceMetrics)()
+            .then(metrics => {
+            if (metrics?.appVersion) {
+                const v = metrics.appVersion;
+                const b = metrics.appBuild || '1';
+                setAppVersionString(`${v} (${b})`);
+            }
+        })
+            .catch(() => { });
+    }, []);
     const envConfig = (0, react_1.useMemo)(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -303,9 +318,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 color: `${AppColors_1.AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
-                        {react_native_1.Platform.OS === 'ios'
-                ? `iOS ${react_native_1.Platform.Version}`
-                : `Android ${react_native_1.Platform.Version}`}
+                        {appVersionString}
                       </react_native_1.Text>
                     </react_native_1.View>
 

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

@@ -49,6 +49,7 @@ const LogDetail_1 = __importDefault(require("./LogDetail"));
 const ConsoleTab_1 = __importDefault(require("./ConsoleTab"));
 const AnalyticsTab_1 = __importDefault(require("./AnalyticsTab"));
 const AnalyticsDetail_1 = __importDefault(require("../AnalyticsDetail"));
+const SkeletonPlaceholder_1 = __importDefault(require("../SkeletonPlaceholder"));
 const ReduxTab_1 = __importDefault(require("./ReduxTab"));
 const ReduxDetail_1 = __importDefault(require("./ReduxDetail"));
 const BundleTab_1 = __importDefault(require("./BundleTab"));
@@ -64,7 +65,7 @@ const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -106,7 +107,7 @@ const MainScreen = () => {
     }, [activeTab]);
     return (<>
       {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
-            isEnabled &&
+            enabled &&
             !visible &&
             !useNativeFab && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
@@ -126,10 +127,10 @@ const MainScreen = () => {
               <InspectorHeader_1.default />
 
               <react_native_1.View style={{ flex: 1 }}>
-                {isReady ? (<react_native_1.View style={{ flex: 1 }}>
-                    {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-                    {!isDetailActive && <TabBar_1.default />}
+                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible) ─── */}
+                {!isDetailActive && <TabBar_1.default />}
 
+                {isReady ? (<react_native_1.View style={{ flex: 1 }}>
                     {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
                     <react_native_1.Animated.View style={[
                     {
@@ -181,12 +182,7 @@ const MainScreen = () => {
                         {activeTab === 'redux' && <ReduxDetail_1.default />}
                         {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
                       </react_native_1.Animated.View>)}
-                  </react_native_1.View>) : (<react_native_1.View style={styles_1.default.empty}>
-                    <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
-                    <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
-                      Loading logs...
-                    </react_native_1.Text>
-                  </react_native_1.View>)}
+                  </react_native_1.View>) : (<SkeletonPlaceholder_1.default />)}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
                 {settingsPage !== null && (<react_native_1.Animated.View style={[

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

@@ -401,8 +401,9 @@ const NetworkDetail = react_1.default.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_1.default routeInfo={routeInfo}/>;
             })()}

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

@@ -507,7 +507,7 @@ const NetworkTab = react_1.default.memo(() => {
                     <react_native_1.View style={{
                     backgroundColor: `${AppColors_1.AppColors.purple}20`,
                     borderRadius: 10,
-                    paddingHorizontal: 5,
+                    paddingHorizontal: 6,
                     paddingVertical: 1.5,
                 }}>
                       <react_native_1.Text style={{
@@ -560,14 +560,104 @@ const NetworkTab = react_1.default.memo(() => {
                 styles_1.default.toolbarBtn,
                 filtersAccordion.isOpen &&
                     styles_1.default.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
+            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
                   <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
                 ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                : AppColors_1.AppColors.grayTextStrong} size={16}/>
+                  {(statusFilters.size > 0 ||
+                methodFilters.size > 0) && (<react_native_1.View style={styles_1.default.activeFilterDot}/>)}
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>
 
+            {/* Quick Search Scope & Filter Tags Row */}
+            <react_native_1.View style={{ paddingBottom: 4 }}>
+              <react_native_1.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_1.default 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_1.AppColors.purple
+                            : AppColors_1.AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                    }}>
+                      {s.icon(isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak)}
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10,
+                        color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                    }}>
+                        {s.label}
+                      </react_native_1.Text>
+                    </TouchableScale_1.default>);
+            })}
+
+                <react_native_1.View style={{
+                width: 1,
+                height: 14,
+                backgroundColor: AppColors_1.AppColors.dividerColor,
+                marginHorizontal: 3,
+            }}/>
+
+                {/* Quick Query Suggestions */}
+                {QUICK_API_QUERY_TAGS.map(q => {
+                const isActive = search.includes(q.query);
+                return (<TouchableScale_1.default 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_1.AppColors.purple}20`
+                            : AppColors_1.AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                    }}>
+                      {q.icon(isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak)}
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 10,
+                        color: isActive
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayText,
+                    }}>
+                        {q.label}
+                      </react_native_1.Text>
+                    </TouchableScale_1.default>);
+            })}
+              </react_native_1.ScrollView>
+            </react_native_1.View>
+
             {/* Quick Filter Horizontal Chips Bar with Live Counts */}
             <react_native_1.View style={{ marginBottom: 8 }}>
               <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
@@ -853,7 +943,16 @@ const NetworkTab = react_1.default.memo(() => {
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </react_native_1.Text>)}
-          </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
+          </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default 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_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles_1.default.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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

@@ -434,9 +434,25 @@ const ReduxTab = react_1.default.memo(() => {
           <react_native_1.View style={styles_1.default.searchContainer}>
             <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
             <react_native_1.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_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {reduxSearch.length > 0 && (<react_native_1.Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
-                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              </react_native_1.Pressable>)}
+            {reduxSearch.length > 0 && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
+                  <react_native_1.Text style={{
+                color: AppColors_1.AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            }}>
+                    {filteredSlices.length}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
+                  <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                </react_native_1.Pressable>
+              </react_native_1.View>)}
           </react_native_1.View>
 
           {/* Pause / Resume Live Updates Button */}

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

@@ -146,8 +146,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
     (0, react_1.useEffect)(() => {
@@ -159,8 +159,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 = (0, react_1.useMemo)(() => {