react-native-inapp-inspector 2.0.6 → 2.1.0

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

@@ -16,11 +16,9 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { getStatusColor, getSize, formatDateTime, getFetchCommand, getCurlCommand, } from '../../helpers';
-import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, ExternalLinkIcon, ClockIcon, ReplayIcon, } from '../NetworkIcons';
-import RequestReplayView from './RequestReplayView';
+import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, ExternalLinkIcon, ClockIcon, } from '../NetworkIcons';
 const NetworkDetail = React.memo(() => {
     const { t } = useTranslation();
-    const [isReplayScreenActive, setIsReplayScreenActive] = React.useState(false);
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = useInspector();
     const handleOpenUrl = () => {
         Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${detailDisplayUrl}`, [
@@ -44,9 +42,6 @@ const NetworkDetail = React.memo(() => {
     };
     if (!selected)
         return null;
-    if (isReplayScreenActive) {
-        return (<RequestReplayView request={selected} onBack={() => setIsReplayScreenActive(false)}/>);
-    }
     return (<View style={{ flex: 1 }}>
       {/* Non-scrollable details header */}
       <View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
@@ -252,16 +247,6 @@ const NetworkDetail = React.memo(() => {
                   </View>
 
                   <View style={styles.detailInfoRight}>
-                    <TouchableScale style={[
-                    styles.iconSquareBtn,
-                    {
-                        backgroundColor: `${AppColors.purple}15`,
-                        borderColor: `${AppColors.purple}30`,
-                        borderWidth: 1,
-                    },
-                ]} onPress={() => setIsReplayScreenActive(true)} accessible={true} accessibilityRole="button" accessibilityLabel="Edit & Resend Request" hitSlop={12}>
-                      <ReplayIcon color={AppColors.purple} size={14}/>
-                    </TouchableScale>
                     <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
                       <ExternalLinkIcon color={AppColors.sky600} size={14}/>
                     </TouchableScale>

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

@@ -9,7 +9,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
 import { getRuntimeDiagnostics } from '../../helpers';
-import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, WarningTriangleIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, SparklesIcon, } from '../NetworkIcons';
+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(() => {
@@ -373,33 +373,24 @@ const PerformanceTab = React.memo(() => {
       <View style={perfStyles.categoryScrollWrapper}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>
           {[
-            { key: 'ALL', label: t('performance.catAll'), icon: 'all' },
-            { key: 'JANKY', label: t('performance.catJanky'), icon: 'janky' },
-            { key: 'NAVIGATION', label: t('performance.catNavigation'), icon: 'nav' },
-            { key: 'RENDER', label: t('performance.catRender'), icon: 'render' },
-            { key: 'MEMORY', label: t('performance.catMemory'), icon: 'memory' },
-            { key: 'IO', label: t('performance.catIo'), icon: 'io' },
+            { key: 'ALL', label: t('performance.catAll') },
+            { key: 'JANKY', label: t('performance.catJanky') },
+            { key: 'NAVIGATION', label: t('performance.catNavigation') },
+            { key: 'RENDER', label: t('performance.catRender') },
+            { key: 'MEMORY', label: t('performance.catMemory') },
+            { key: 'IO', label: t('performance.catIo') },
         ].map(cat => {
             const isSelected = filterCategory === cat.key;
-            const iconColor = isSelected ? AppColors.white : AppColors.grayText;
             return (<TouchableScale key={cat.key} onPress={() => setFilterCategory(cat.key)} style={[
                     perfStyles.categoryChip,
                     isSelected && perfStyles.categoryChipActive,
                 ]}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                  {cat.icon === 'all' && <SparklesIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'janky' && <WarningTriangleIcon size={12} color={isSelected ? AppColors.white : AppColors.errorColor}/>}
-                  {cat.icon === 'nav' && <MapIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'render' && <AtomIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'memory' && <BrainIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'io' && <GlobeIcon size={12} color={iconColor}/>}
-                  <Text style={[
+                <Text style={[
                     perfStyles.categoryChipText,
                     isSelected && perfStyles.categoryChipTextActive,
                 ]}>
-                    {cat.label}
-                  </Text>
-                </View>
+                  {cat.label}
+                </Text>
               </TouchableScale>);
         })}
         </ScrollView>
@@ -410,13 +401,13 @@ const PerformanceTab = React.memo(() => {
         {/* ── 1. REAL-TIME FPS SCORECARD & SMOOTH AREA GRAPH ── */}
         <View style={perfStyles.heroCard}>
           <View style={perfStyles.heroHeaderRow}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1 }}>
-              <PerformanceIcon color={AppColors.purple} size={18}/>
-              <View style={{ flex: 1 }}>
-                <Text style={perfStyles.heroTitle} numberOfLines={1}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <PerformanceIcon color={AppColors.purple} size={17}/>
+              <View>
+                <Text style={perfStyles.heroTitle}>
                   {t('performance.fpsAreaChartTitle')}
                 </Text>
-                <Text style={perfStyles.heroSubTitle} numberOfLines={1}>
+                <Text style={perfStyles.heroSubTitle}>
                   {t('performance.fpsAreaChartSub')}
                 </Text>
               </View>
@@ -1131,21 +1122,18 @@ const perfStyles = StyleSheet.create({
         color: AppColors.grayTextWeak,
     },
     fpsStatsGrid: {
-        flex: 1,
         flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'space-around',
-        marginLeft: 8,
+        gap: 8,
     },
     statItem: {
         alignItems: 'center',
-        flex: 1,
+        minWidth: 50,
     },
     statLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9.5,
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
         color: AppColors.grayTextWeak,
-        textAlign: 'center',
     },
     statValue: {
         fontFamily: AppFonts.interBold,

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

@@ -18,13 +18,13 @@ import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
 import { getTelemetryConsentStatus, setTelemetryConsent, sendSessionTelemetryPing, } from '../../helpers/telemetry';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, DatabaseIcon, DevicePhoneIcon, ShieldCheckIcon, CpuIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, } from '../NetworkIcons';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
 const SettingsPanel = () => {
     const { t } = useTranslation();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, isPerformanceHudEnabled, setIsPerformanceHudEnabled, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, } = useInspector();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, } = useInspector();
     const [stagedHeight, setStagedHeight] = useState(modalHeightPercent);
     const [telemetryConsent, setTelemetryConsentState] = useState(true);
     useEffect(() => {
@@ -63,27 +63,6 @@ const SettingsPanel = () => {
             icon: 'logs',
             desc: 'Terminal console logs, warnings, errors & stack traces',
         },
-        {
-            key: 'storage',
-            label: 'Storage (AsyncStorage)',
-            category: 'core',
-            icon: 'storage',
-            desc: 'Browse, edit, create and delete local key-value storage & JSON',
-        },
-        {
-            key: 'device',
-            label: 'Device & System Info',
-            category: 'diagnostic',
-            icon: 'device',
-            desc: 'Hermes runtime, Fabric New Arch, screen metrics & build info',
-        },
-        {
-            key: 'audit',
-            label: 'Code Quality & Package Audit',
-            category: 'diagnostic',
-            icon: 'audit',
-            desc: 'Audit dependencies, peer conflicts, TS schema errors & React Native anti-patterns',
-        },
         {
             key: 'performance',
             label: 'Performance Tracker',
@@ -126,9 +105,6 @@ const SettingsPanel = () => {
         logs: Boolean(tabVisibility?.logs),
         analytics: Boolean(tabVisibility?.analytics),
         redux: Boolean(tabVisibility?.redux),
-        storage: Boolean(tabVisibility?.storage),
-        device: Boolean(tabVisibility?.device),
-        audit: Boolean(tabVisibility?.audit),
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
         crash: Boolean(tabVisibility?.crash),
@@ -140,9 +116,6 @@ const SettingsPanel = () => {
             logs: Boolean(tabVisibility?.logs),
             analytics: Boolean(tabVisibility?.analytics),
             redux: Boolean(tabVisibility?.redux),
-            storage: Boolean(tabVisibility?.storage),
-            device: Boolean(tabVisibility?.device),
-            audit: Boolean(tabVisibility?.audit),
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
             crash: Boolean(tabVisibility?.crash),
@@ -314,17 +287,16 @@ const SettingsPanel = () => {
             shadowRadius: 4,
             shadowOffset: { width: 0, height: 2 },
         }}>
-          {/* Tab 1: Modules & Tabs */}
           <TouchableScale accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.modulesAndTools')} accessibilityState={{ selected: settingsActiveSubTab === 'module' }} onPress={() => {
             animateNextLayout();
             setSettingsActiveSubTab('module');
         }} style={{
             flex: 1,
-            paddingVertical: 8,
+            paddingVertical: 9,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: 5,
+            gap: 6,
             borderRadius: 9,
             backgroundColor: settingsActiveSubTab === 'module'
                 ? AppColors.purple
@@ -332,11 +304,11 @@ const SettingsPanel = () => {
         }}>
             <LayersIcon color={settingsActiveSubTab === 'module'
             ? AppColors.white
-            : AppColors.grayText} size={12.5}/>
+            : AppColors.grayText} size={13}/>
             <Text style={{
             fontFamily: AppFonts.interBold,
-            fontSize: 11.5,
-            lineHeight: 15,
+            fontSize: 12.5,
+            lineHeight: 16,
             color: settingsActiveSubTab === 'module'
                 ? AppColors.white
                 : AppColors.grayText,
@@ -345,48 +317,16 @@ const SettingsPanel = () => {
             </Text>
           </TouchableScale>
 
-          {/* Tab 2: RAM & Limits */}
-          <TouchableScale accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.ramLimits')} accessibilityState={{ selected: settingsActiveSubTab === 'limits' }} onPress={() => {
-            animateNextLayout();
-            setSettingsActiveSubTab('limits');
-        }} style={{
-            flex: 1,
-            paddingVertical: 8,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 5,
-            borderRadius: 9,
-            backgroundColor: settingsActiveSubTab === 'limits'
-                ? AppColors.purple
-                : 'transparent',
-        }}>
-            <CpuIcon color={settingsActiveSubTab === 'limits'
-            ? AppColors.white
-            : AppColors.grayText} size={12.5}/>
-            <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 11.5,
-            lineHeight: 15,
-            color: settingsActiveSubTab === 'limits'
-                ? AppColors.white
-                : AppColors.grayText,
-        }}>
-              {t('settings.ramLimits')}
-            </Text>
-          </TouchableScale>
-
-          {/* Tab 3: UI & Appearance */}
           <TouchableScale accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.uiPreferences')} accessibilityState={{ selected: settingsActiveSubTab === 'ui' }} onPress={() => {
             animateNextLayout();
             setSettingsActiveSubTab('ui');
         }} style={{
             flex: 1,
-            paddingVertical: 8,
+            paddingVertical: 9,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: 5,
+            gap: 6,
             borderRadius: 9,
             backgroundColor: settingsActiveSubTab === 'ui'
                 ? AppColors.purple
@@ -394,11 +334,11 @@ const SettingsPanel = () => {
         }}>
             <ScreenIcon color={settingsActiveSubTab === 'ui'
             ? AppColors.white
-            : AppColors.grayText} size={12.5}/>
+            : AppColors.grayText} size={13}/>
             <Text style={{
             fontFamily: AppFonts.interBold,
-            fontSize: 11.5,
-            lineHeight: 15,
+            fontSize: 12.5,
+            lineHeight: 16,
             color: settingsActiveSubTab === 'ui'
                 ? AppColors.white
                 : AppColors.grayText,
@@ -408,7 +348,7 @@ const SettingsPanel = () => {
           </TouchableScale>
         </View>
 
-        {settingsActiveSubTab === 'module' && (<View style={{ gap: 12 }}>
+        {settingsActiveSubTab === 'module' ? (<View style={{ gap: 12 }}>
             {/* Individual Module Cards with Left Checkboxes */}
             <View style={{ gap: 10 }}>
               {allModules.map(moduleItem => {
@@ -543,15 +483,6 @@ const SettingsPanel = () => {
                           {moduleItem.icon === 'analytics' && (<AnalyticsIcon color={isChecked
                             ? AppColors.purple
                             : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'storage' && (<DatabaseIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'device' && (<DevicePhoneIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'audit' && (<ShieldCheckIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
                           {moduleItem.icon === 'redux' && (<ReduxIcon color={isChecked
                             ? AppColors.purple
                             : AppColors.grayTextWeak} size={16}/>)}
@@ -757,11 +688,8 @@ const SettingsPanel = () => {
                   </View>);
             })}
             </View>
-          </View>)}
 
-        {/* ─── TAB 2: RAM & RESOURCE LIMITS ──────────────────────────────────── */}
-        {settingsActiveSubTab === 'limits' && (<View style={{ gap: 14 }}>
-            {/* Section 1: RAM-Based Auto Limits */}
+            {/* Section 3.5: RAM-Based Auto Limits */}
             <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -778,7 +706,7 @@ const SettingsPanel = () => {
                 color: AppColors.grayTextWeak,
                 letterSpacing: 0.8,
             }}>
-                RAM-BASED AUTO TUNING
+                RAM-Based Auto Limits
               </Text>
 
               {/* Auto RAM Limit Toggle */}
@@ -983,247 +911,8 @@ const SettingsPanel = () => {
                       </View>))}
                   </View>
                 </View>)}
-
-              <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
-
-              {/* Floating Mini Performance HUD Toggle */}
-              {renderSettingRow({
-                icon: <PerformanceIcon color={AppColors.purple} size={16}/>,
-                label: 'Show Mini Performance HUD Overlay',
-                description: 'Floating on-screen real-time FPS and Memory/Heap widget',
-                right: (<TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle mini performance HUD overlay" accessibilityState={{ checked: isPerformanceHudEnabled }} onPress={() => setIsPerformanceHudEnabled(prev => !prev)} style={{
-                        width: 42,
-                        height: 24,
-                        borderRadius: 12,
-                        backgroundColor: isPerformanceHudEnabled
-                            ? AppColors.purple
-                            : AppColors.grayBorderSecondary,
-                        padding: 2,
-                        justifyContent: 'center',
-                        alignItems: isPerformanceHudEnabled
-                            ? 'flex-end'
-                            : 'flex-start',
-                    }}>
-                    <View style={{
-                        width: 20,
-                        height: 20,
-                        borderRadius: 10,
-                        backgroundColor: AppColors.white,
-                        shadowColor: AppColors.black,
-                        shadowOpacity: 0.18,
-                        shadowRadius: 2,
-                        shadowOffset: { width: 0, height: 1 },
-                    }}/>
-                  </TouchableScale>),
-                isLast: true,
-            })}
-            </View>
-
-            {/* Section 2: Fine-Tuned Resource Limits */}
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                MANUAL RESOURCE THRESHOLDS
-              </Text>
-
-              {renderSettingRow({
-                icon: <SignalIcon color={AppColors.purple} size={16}/>,
-                label: 'Max Network / API Logs',
-                description: 'Maximum in-memory API requests tracked before rotation',
-                numericInput: {
-                    value: maxNetworkLogs,
-                    onChange: setMaxNetworkLogs,
-                    min: 10,
-                    max: 100,
-                    placeholder: '10 - 100',
-                },
-            })}
-
-              {renderSettingRow({
-                icon: <TerminalIcon color={AppColors.purple} size={16}/>,
-                label: 'Max Console Logs',
-                description: 'Maximum log entries kept across info/warn/error streams',
-                numericInput: {
-                    value: maxConsoleLogs,
-                    onChange: setMaxConsoleLogs,
-                    min: 20,
-                    max: 300,
-                    placeholder: '20 - 300',
-                },
-            })}
-
-              {renderSettingRow({
-                icon: <AnalyticsIcon color={AppColors.purple} size={16}/>,
-                label: 'Max Analytics Events',
-                description: 'Capacity for captured analytics payloads & telemetry pings',
-                numericInput: {
-                    value: maxAnalyticsEventsLimit,
-                    onChange: setMaxAnalyticsEventsLimit,
-                    min: 20,
-                    max: 200,
-                    placeholder: '20 - 200',
-                },
-            })}
-
-              {renderSettingRow({
-                icon: <CrashIcon color={AppColors.errorColor} size={16}/>,
-                label: 'Max Crash Records',
-                description: 'Stored fatal exceptions and crash diagnostics logs',
-                numericInput: {
-                    value: maxCrashLogs,
-                    onChange: setMaxCrashLogs,
-                    min: 5,
-                    max: 50,
-                    placeholder: '5 - 50',
-                },
-                isLast: true,
-            })}
             </View>
-
-            {/* Section 3: Storage & Cache Cleansing */}
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                STORAGE & CACHE CLEANSING
-              </Text>
-
-              {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: 'Clear All Network Logs',
-                description: `${logs.length} requests in memory`,
-                onPress: () => {
-                    clearNetworkLogs();
-                    setSelected(null);
-                    Alert.alert(t('common.success'), 'Network logs cleared successfully.');
-                },
-                right: (<View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 4,
-                        borderRadius: 6,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        color: AppColors.errorColor,
-                    }}>
-                      Clear ({logs.length})
-                    </Text>
-                  </View>),
-            })}
-
-              {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: 'Clear All Console Logs',
-                description: `${consoleLogs.length} logs in memory`,
-                onPress: () => {
-                    clearConsoleLogs();
-                    Alert.alert(t('common.success'), 'Console logs cleared successfully.');
-                },
-                right: (<View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 4,
-                        borderRadius: 6,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        color: AppColors.errorColor,
-                    }}>
-                      Clear ({consoleLogs.length})
-                    </Text>
-                  </View>),
-            })}
-
-              {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: 'Clear Analytics Events',
-                description: `${analyticsEvents.length} events recorded`,
-                onPress: () => {
-                    clearAnalyticsEvents();
-                    setSelectedEvent(null);
-                    Alert.alert(t('common.success'), 'Analytics events cleared successfully.');
-                },
-                right: (<View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 4,
-                        borderRadius: 6,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        color: AppColors.errorColor,
-                    }}>
-                      Clear ({analyticsEvents.length})
-                    </Text>
-                  </View>),
-            })}
-
-              {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: 'Clear Crash Logs',
-                description: `${crashRecords.length} crash dumps recorded`,
-                onPress: () => {
-                    clearCrashRecords();
-                    Alert.alert(t('common.success'), 'Crash records cleared successfully.');
-                },
-                isLast: true,
-                right: (<View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 4,
-                        borderRadius: 6,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        color: AppColors.errorColor,
-                    }}>
-                      Clear ({crashRecords.length})
-                    </Text>
-                  </View>),
-            })}
-            </View>
-          </View>)}
-
-        {/* ─── TAB 3: UI & APPEARANCE ────────────────────────────────────────── */}
-        {settingsActiveSubTab === 'ui' && (<View style={{ gap: 14 }}>
+          </View>) : (<View style={{ gap: 14 }}>
             {/* Section 1: Appearance */}
             <View style={{
                 backgroundColor: AppColors.primaryLight,

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

@@ -4,11 +4,11 @@ import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import TouchableScale from '../TouchableScale';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, DatabaseIcon, DevicePhoneIcon, ShieldCheckIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 const TabBar = React.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, storageEntries, auditReport, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
     const isReduxAvail = isReduxConnected();
     const isAnalyticsAvail = isAnalyticsConnected();
     return (<View style={styles.tabBarContainer}>
@@ -38,24 +38,6 @@ const TabBar = React.memo(() => {
                 count: 0,
                 icon: 'redux',
             },
-            {
-                key: 'storage',
-                label: 'Storage',
-                count: storageEntries.length,
-                icon: 'storage',
-            },
-            {
-                key: 'device',
-                label: 'Device',
-                count: 0,
-                icon: 'device',
-            },
-            {
-                key: 'audit',
-                label: 'Audit',
-                count: auditReport?.totalIssues || 0,
-                icon: 'audit',
-            },
             {
                 key: 'bundle',
                 label: 'Bundle',
@@ -76,7 +58,7 @@ const TabBar = React.memo(() => {
             },
         ]
             .filter(tab => {
-            if (!tabVisibility?.[tab.key] && activeTab !== tab.key)
+            if (!tabVisibility?.[tab.key])
                 return false;
             if (tab.key === 'redux' && !isReduxAvail)
                 return false;
@@ -113,9 +95,6 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'logs' && (<TerminalIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'analytics' && (<AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<ReduxIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'device' && (<DevicePhoneIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'audit' && (<ShieldCheckIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}