react-native-inapp-inspector 1.1.3 → 1.1.4

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Alert, Animated, StyleSheet, FlatList, LayoutAnimation, Modal, PanResponder, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, UIManager, LogBox, } from 'react-native';
+import { Alert, Animated, StyleSheet, FlatList, LayoutAnimation, Modal, PanResponder, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, UIManager, LogBox, SafeAreaView, } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 import LinearGradient from 'react-native-linear-gradient';
 import { useNavigationState, NavigationContext } from '@react-navigation/native';
@@ -24,7 +24,7 @@ import AnimatedEntrance from './components/AnimatedEntrance';
 // Helpers
 import { formatDateTime, getStatusColor, getNavigationInfo, deduplicateLogs, getDomainColor, formatDisplayUrl, getFetchCommand, getCurlCommand, getSize, } from './helpers';
 // #5 — settings persistence
-import { loadSettings, saveSettings } from './helpers/settingsStore';
+import { loadSettings, saveSettings, setCustomStorage, isPersistentStorageAvailable, clearPersistedSettings, } from './helpers/settingsStore';
 // Assets
 import { EmptyRadarIcon, FailIcon, SearchIcon, ScreenIcon, ClearIcon, SortArrowIcon, FilterIcon, InsightsIcon, GlobeIcon, DownloadIcon, CloseWhite, TrashIcon, WhiteBackNavigation, TerminalIcon, SignalIcon, AnalyticsIcon, SunIcon, MoonIcon, BrandCircleIcon, BrandSquareIcon, HtmlIcon, CssIcon, JsIcon, ClockIcon, EyeIcon, CheckIcon, SettingsIcon, RequestIcon, ResponseIcon, HeadersIcon, StatusIcon, ChevronIcon, WipeIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, TrendingUpIcon, } from './components/NetworkIcons';
 import ErrorBoundary from './components/ErrorBoundary';
@@ -113,7 +113,9 @@ const NavigationTracker = ({ onStateChange }) => {
 const animateNextLayout = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
 };
-const NetworkInspector = ({ enabled = true, }) => {
+const NetworkInspector = ({ enabled = true, storage, }) => {
+    // Set custom storage synchronously during render phase
+    setCustomStorage(storage || null);
     const [isDark, setIsDark] = useState(false);
     const [reduxState, setReduxState] = useState(null);
     // Action timeline + per-reducer last action are kept in component state so the
@@ -195,11 +197,11 @@ const NetworkInspector = ({ enabled = true, }) => {
     const visibleConsoleLogs = useMemo(() => {
         const filtered = consoleLogs.filter(log => {
             const type = log.type;
-            if (type === 'info' && !showConsoleLevels.info)
+            if (type === 'info' && !showConsoleLevels?.info)
                 return false;
-            if (type === 'warn' && !showConsoleLevels.warn)
+            if (type === 'warn' && !showConsoleLevels?.warn)
                 return false;
-            if (type === 'error' && !showConsoleLevels.error)
+            if (type === 'error' && !showConsoleLevels?.error)
                 return false;
             const message = log.message || '';
             const allPrefixes = [
@@ -229,9 +231,9 @@ const NetworkInspector = ({ enabled = true, }) => {
         insights: true,
         apis: true,
         logs: true,
-        analytics: true,
-        webview: true,
-        redux: true,
+        analytics: false,
+        webview: false,
+        redux: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = useState(100);
     const [webViewCaptureCssJs, setWebViewCaptureCssJs] = useState(true);
@@ -241,9 +243,36 @@ const NetworkInspector = ({ enabled = true, }) => {
     const [insightsShowConsoleAlerts, setInsightsShowConsoleAlerts] = useState(true);
     // #6 — tab the inspector opens on. Shown with a DEFAULT badge in Settings.
     const [defaultTab, setDefaultTab] = useState('apis');
-    // #9 — when false (default), consecutive identical entries in the API and
-    // Console lists are collapsed into one row with a ×N counter.
     const [showDuplicateLogs, setShowDuplicateLogs] = useState(false);
+    const resetToDefaults = async () => {
+        await clearPersistedSettings();
+        setIsDark(false);
+        toggleGlobalTheme(false);
+        setModalHeightPercent(90);
+        setTabVisibility({
+            insights: true,
+            apis: true,
+            logs: true,
+            analytics: false,
+            webview: false,
+            redux: false,
+        });
+        setDefaultTab('apis');
+        setMaxNetworkLogs(100);
+        setMaxConsoleLogs(200);
+        setShowConsoleLevels({
+            info: true,
+            warn: true,
+            error: true,
+        });
+        setWebViewCaptureCssJs(true);
+        setReduxAutoRefreshState(true);
+        setReduxExpandDepth(1);
+        setSlowRequestThreshold(1000);
+        setInsightsShowConsoleAlerts(true);
+        setShowDuplicateLogs(false);
+        Alert.alert('Settings Reset', 'All settings have been reset to default values.');
+    };
     // #5 — hydrate persisted settings once, then auto-save on any change.
     const settingsHydratedRef = useRef(false);
     useEffect(() => {
@@ -290,9 +319,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                         insights: true,
                         apis: true,
                         logs: true,
-                        analytics: true,
-                        webview: true,
-                        redux: true,
+                        analytics: false,
+                        webview: false,
+                        redux: false,
                     },
                     ...(saved.tabVisibility || {}),
                     apis: true,
@@ -619,7 +648,7 @@ const NetworkInspector = ({ enabled = true, }) => {
     // #6 — every time the inspector is opened, land on the chosen default tab.
     useEffect(() => {
         if (visible) {
-            const target = defaultTab === 'apis' || tabVisibility[defaultTab]
+            const target = defaultTab === 'apis' || tabVisibility?.[defaultTab]
                 ? defaultTab
                 : 'apis';
             setActiveTab(target);
@@ -1289,7 +1318,8 @@ const NetworkInspector = ({ enabled = true, }) => {
             return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
           {/* Settings Header with back button */}
           <LinearGradient colors={[AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.headerGradient}>
-            <View style={[styles.header, { paddingHorizontal: 16, gap: 12 }]}>
+            <SafeAreaView style={{ width: '100%' }}>
+              <View style={[styles.header, { paddingHorizontal: 16, gap: 12 }]}>
               <TouchableScale onPress={() => {
                     animateNextLayout();
                     setSettingsPage(null);
@@ -1337,7 +1367,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                 </Text>
               </View>
             </View>
-          </LinearGradient>
+          </SafeAreaView>
+        </LinearGradient>
 
           <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
             {/* Tab list */}
@@ -1382,7 +1413,7 @@ const NetworkInspector = ({ enabled = true, }) => {
               </View>
 
               {settingsTabs.map((tab, idx) => {
-                    const isVisible = tab.key === 'apis' || tabVisibility[tab.key];
+                    const isVisible = tab.key === 'apis' || tabVisibility?.[tab.key];
                     const isLast = idx === settingsTabs.length - 1;
                     const isLocked = tab.key === 'apis';
                     return (<View key={tab.key} style={{
@@ -1762,40 +1793,63 @@ const NetworkInspector = ({ enabled = true, }) => {
                     </View>
                   </View>
 
-                  {/* Segmented picker — only visible tabs are offered */}
+                  {/* Grid of Default Tab Cards */}
                   <View style={{
                     flexDirection: 'row',
                     flexWrap: 'wrap',
-                    backgroundColor: AppColors.grayBackground,
-                    borderRadius: 8,
-                    padding: 2.5,
-                    marginTop: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                    gap: 2,
+                    gap: 8,
+                    marginTop: 12,
                 }}>
                     {settingsTabs
-                    .filter(tab => tab.key === 'apis' || tabVisibility[tab.key])
+                    .filter(tab => tab.key === 'apis' || tabVisibility?.[tab.key])
                     .map(tab => {
                     const isActive = defaultTab === tab.key;
                     return (<TouchableScale key={tab.key} onPress={() => setDefaultTab(tab.key)} style={{
-                            paddingVertical: 6,
-                            paddingHorizontal: 10,
+                            flexDirection: 'row',
                             alignItems: 'center',
+                            gap: 8,
+                            paddingVertical: 10,
+                            paddingHorizontal: 12,
+                            borderRadius: 10,
+                            borderWidth: 1.5,
+                            borderColor: isActive ? AppColors.purple : AppColors.grayBorderSecondary,
+                            backgroundColor: isActive ? 'rgba(104,75,155,0.06)' : AppColors.primaryLight,
+                            minWidth: '47%',
+                            flex: 1,
+                        }}>
+                            <View style={{
+                            width: 22,
+                            height: 22,
                             borderRadius: 6,
-                            backgroundColor: isActive
-                                ? AppColors.purple
-                                : 'transparent',
+                            backgroundColor: isActive ? AppColors.purple : AppColors.purpleShade50,
+                            alignItems: 'center',
+                            justifyContent: 'center',
                         }}>
+                              {tab.icon === 'insights' && (<InsightsIcon color={isActive ? '#FFFFFF' : AppColors.purple} size={11}/>)}
+                              {tab.icon === 'apis' && (<SignalIcon color={isActive ? '#FFFFFF' : AppColors.purple} size={11}/>)}
+                              {tab.icon === 'logs' && (<TerminalIcon color={isActive ? '#FFFFFF' : AppColors.purple} size={11}/>)}
+                              {tab.icon === 'analytics' && (<AnalyticsIcon color={isActive ? '#FFFFFF' : AppColors.purple} size={11}/>)}
+                              {tab.icon === 'webview' && (<GlobeIcon color={isActive ? '#FFFFFF' : AppColors.purple} size={11}/>)}
+                              {tab.icon === 'redux' && (<TerminalIcon color={isActive ? '#FFFFFF' : AppColors.purple} size={11}/>)}
+                            </View>
                             <Text style={{
                             fontFamily: AppFonts.interBold,
-                            fontSize: 11,
-                            color: isActive
-                                ? '#FFFFFF'
-                                : AppColors.grayText,
+                            fontSize: 13,
+                            color: isActive ? AppColors.purple : AppColors.primaryBlack,
+                            flex: 1,
                         }}>
-                              {tab.label}
+                                {tab.label}
                             </Text>
+                            {isActive && (<View style={{
+                                width: 14,
+                                height: 14,
+                                borderRadius: 7,
+                                backgroundColor: AppColors.purple,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}>
+                                <CheckIcon size={8} color="#FFFFFF"/>
+                              </View>)}
                           </TouchableScale>);
                 })}
                   </View>
@@ -1877,73 +1931,130 @@ const NetworkInspector = ({ enabled = true, }) => {
                 }}/>
                   </TouchableScale>
                 </View>
-              </View>
-            </View>
-          </ScrollView>
-        </View>);
-        }
-        const goBackToMain = () => {
-            animateNextLayout();
-            setSettingsPage('main');
-        };
-        const renderSubHeader = (title, icon, rightInfo) => (<View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 12,
-                paddingBottom: 16,
-                borderBottomWidth: 1,
-                borderBottomColor: AppColors.dividerColor,
-                marginBottom: 16,
-            }}>
-        <TouchableScale onPress={goBackToMain} style={{
-                width: 36,
-                height: 36,
-                borderRadius: 10,
-                backgroundColor: AppColors.purpleShade50,
-                borderWidth: 1,
-                borderColor: 'rgba(104,75,155,0.2)',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-          <WhiteBackNavigation color={AppColors.purple} size={16}/>
-        </TouchableScale>
-        {icon && (<View style={{
-                    width: 36,
-                    height: 36,
-                    borderRadius: 10,
-                    backgroundColor: AppColors.purpleShade50,
+
+                {/* Divider */}
+                <View style={{
+                    height: 1,
+                    backgroundColor: AppColors.dividerColor,
+                }}/>
+
+                {/* Reset Settings */}
+                <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                    gap: 12,
+                }}>
+                  <View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                    <View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: 'rgba(239,68,68,0.08)',
                     borderWidth: 1,
-                    borderColor: 'rgba(104,75,155,0.2)',
+                    borderColor: 'rgba(239,68,68,0.2)',
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-            {icon}
-          </View>)}
-        <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 18,
-                color: AppColors.primaryBlack,
-                flex: 1,
-            }}>
-          {title}
-        </Text>
-        {rightInfo ? (<View style={{
-                    backgroundColor: 'rgba(104,75,155,0.08)',
+                      <TrashIcon color={AppColors.errorColor} size={11}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors.primaryBlack,
+                }}>
+                        Reset Settings
+                      </Text>
+                      <Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Wipe custom configurations and load package defaults
+                      </Text>
+                    </View>
+                  </View>
+
+                  <TouchableScale onPress={resetToDefaults} style={{
                     paddingHorizontal: 10,
                     paddingVertical: 5,
-                    borderRadius: 8,
+                    borderRadius: 7,
+                    backgroundColor: 'rgba(255,46,87,0.08)',
                     borderWidth: 1,
-                    borderColor: 'rgba(104,75,155,0.15)',
+                    borderColor: 'rgba(255,46,87,0.2)',
                 }}>
-            <Text style={{
+                    <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 11,
-                    color: AppColors.purple,
+                    color: AppColors.errorColor,
                 }}>
-              {rightInfo}
-            </Text>
-          </View>) : null}
-      </View>);
+                      Reset
+                    </Text>
+                  </TouchableScale>
+                </View>
+              </View>
+            </View>
+
+            {/* Storage Status */}
+            <View style={{
+                    backgroundColor: isPersistentStorageAvailable()
+                        ? 'rgba(74,222,128,0.08)'
+                        : 'rgba(234,179,8,0.08)',
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: isPersistentStorageAvailable()
+                        ? 'rgba(74,222,128,0.2)'
+                        : 'rgba(234,179,8,0.2)',
+                    padding: 12,
+                    marginTop: 16,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                }}>
+              <View style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 4,
+                    backgroundColor: isPersistentStorageAvailable() ? '#22C55E' : '#EAB308',
+                }}/>
+              <View style={{ flex: 1 }}>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 12,
+                    color: isPersistentStorageAvailable() ? '#15803D' : '#854D0E',
+                }}>
+                  {isPersistentStorageAvailable()
+                    ? `Storage: Persistent (${storage ? 'Custom' : 'iOS Settings'})`
+                    : 'Storage: Temporary (In-Memory)'}
+                </Text>
+                <Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 10.5,
+                    color: isPersistentStorageAvailable() ? '#166534' : '#854D0E',
+                    marginTop: 2,
+                    opacity: 0.8,
+                }}>
+                  {isPersistentStorageAvailable()
+                    ? 'Your settings are saved across app restarts.'
+                    : 'Settings reset when closed. To persist settings, pass a storage object to <NetworkInspector storage={...} />.'}
+                </Text>
+              </View>
+            </View>
+          </ScrollView>
+        </View>);
+        }
+        const goBackToMain = () => {
+            animateNextLayout();
+            setSettingsPage('main');
+        };
         // Helper: settings row with icon + label + optional description
         const renderSettingRow = (opts) => (<View style={{
                 paddingVertical: 12,
@@ -2023,9 +2134,15 @@ const NetworkInspector = ({ enabled = true, }) => {
                 })}
           </View>)}
       </View>);
+        let content = null;
+        let title = '';
+        let icon = null;
+        let rightInfo = '';
         if (settingsPage === 'apis') {
-            return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('APIs Settings', <SignalIcon color={AppColors.purple} size={16}/>, `Total: ${logs.length}`)}
+            title = 'APIs Settings';
+            icon = <SignalIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `Total: ${logs.length}`;
+            content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <View style={{
                     backgroundColor: AppColors.primaryLight,
                     padding: 16,
@@ -2085,9 +2202,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           </View>
         </ScrollView>);
         }
-        if (settingsPage === 'logs') {
-            return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('Logs Settings', <TerminalIcon color={AppColors.purple} size={16}/>, `Total: ${consoleLogs.length}`)}
+        else if (settingsPage === 'logs') {
+            title = 'Logs Settings';
+            icon = <TerminalIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `Total: ${consoleLogs.length}`;
+            content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <View style={{
                     backgroundColor: AppColors.primaryLight,
                     padding: 16,
@@ -2116,7 +2235,7 @@ const NetworkInspector = ({ enabled = true, }) => {
               Log Levels
             </Text>
             {['info', 'warn', 'error'].map((level, li) => {
-                    const isLvlActive = showConsoleLevels[level];
+                    const isLvlActive = showConsoleLevels?.[level];
                     const levelColor = level === 'error'
                         ? AppColors.errorColor
                         : level === 'warn'
@@ -2197,9 +2316,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           </View>
         </ScrollView>);
         }
-        if (settingsPage === 'analytics') {
-            return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('Analytics Settings', <AnalyticsIcon color={AppColors.purple} size={16}/>, `Events: ${analyticsEvents.length}`)}
+        else if (settingsPage === 'analytics') {
+            title = 'Analytics Settings';
+            icon = <AnalyticsIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `Events: ${analyticsEvents.length}`;
+            content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <View style={{
                     backgroundColor: AppColors.primaryLight,
                     padding: 16,
@@ -2253,9 +2374,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           </View>
         </ScrollView>);
         }
-        if (settingsPage === 'webview') {
-            return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('WebView Settings', <GlobeIcon color={AppColors.purple} size={16}/>, `History: ${webViewNavHistory.length}`)}
+        else if (settingsPage === 'webview') {
+            title = 'WebView Settings';
+            icon = <GlobeIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `History: ${webViewNavHistory.length}`;
+            content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <View style={{
                     backgroundColor: AppColors.primaryLight,
                     padding: 16,
@@ -2325,9 +2448,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           </View>
         </ScrollView>);
         }
-        if (settingsPage === 'redux') {
-            return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('Redux Settings', <TerminalIcon color={AppColors.purple} size={16}/>, `Reducers: ${Object.keys(reduxState || {}).length}`)}
+        else if (settingsPage === 'redux') {
+            title = 'Redux Settings';
+            icon = <TerminalIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `Reducers: ${Object.keys(reduxState || {}).length}`;
+            content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <View style={{
                     backgroundColor: AppColors.primaryLight,
                     padding: 16,
@@ -2411,53 +2536,108 @@ const NetworkInspector = ({ enabled = true, }) => {
           </View>
         </ScrollView>);
         }
-        // Default return page is Insights settings
-        return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-        {renderSubHeader('Insights Settings', <InsightsIcon color={AppColors.purple} size={16}/>)}
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 12,
+        else {
+            title = 'Insights Settings';
+            icon = <InsightsIcon color="#FFFFFF" size={16}/>;
+            content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    padding: 16,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    gap: 4,
+                }}>
+            {renderSettingRow({
+                    icon: <SignalIcon color={AppColors.purple} size={16}/>,
+                    label: 'Slow Latency Warning',
+                    description: 'Alert threshold for slow API request duration',
+                    picker: {
+                        options: [500, 1000, 2000],
+                        selectedValue: slowRequestThreshold,
+                        onSelect: setSlowRequestThreshold,
+                    },
+                })}
+            <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
+            {renderSettingRow({
+                    icon: <TerminalIcon color={AppColors.purple} size={16}/>,
+                    label: 'Show Console Alerts',
+                    description: 'Flags critical warnings or crash events on dashboard',
+                    isLast: true,
+                    onPress: () => setInsightsShowConsoleAlerts(prev => !prev),
+                    right: (<View style={{
+                            width: 22,
+                            height: 22,
+                            borderRadius: 6,
+                            borderWidth: 2,
+                            borderColor: insightsShowConsoleAlerts
+                                ? AppColors.purple
+                                : AppColors.grayTextWeak,
+                            backgroundColor: insightsShowConsoleAlerts
+                                ? 'rgba(104, 75, 155, 0.1)'
+                                : 'transparent',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                  {insightsShowConsoleAlerts && (<CheckIcon size={12} color={AppColors.purple}/>)}
+                </View>),
+                })}
+          </View>
+        </ScrollView>);
+        }
+        return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
+        <LinearGradient colors={[AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.headerGradient}>
+          <SafeAreaView style={{ width: '100%' }}>
+            <View style={[styles.header, { paddingHorizontal: 16, gap: 12 }]}>
+            <TouchableScale onPress={goBackToMain} hitSlop={12} style={{
+                padding: 8,
+                borderRadius: 10,
+                backgroundColor: 'rgba(255, 255, 255, 0.15)',
                 borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                gap: 4,
+                borderColor: 'rgba(255, 255, 255, 0.08)',
             }}>
-          {renderSettingRow({
-                icon: <SignalIcon color={AppColors.purple} size={16}/>,
-                label: 'Slow Latency Warning',
-                description: 'Alert threshold for slow API request duration',
-                picker: {
-                    options: [500, 1000, 2000],
-                    selectedValue: slowRequestThreshold,
-                    onSelect: setSlowRequestThreshold,
-                },
-            })}
-          <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
-          {renderSettingRow({
-                icon: <TerminalIcon color={AppColors.purple} size={16}/>,
-                label: 'Show Console Alerts',
-                description: 'Flags critical warnings or crash events on dashboard',
-                isLast: true,
-                onPress: () => setInsightsShowConsoleAlerts(prev => !prev),
-                right: (<View style={{
-                        width: 22,
-                        height: 22,
-                        borderRadius: 6,
-                        borderWidth: 2,
-                        borderColor: insightsShowConsoleAlerts
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak,
-                        backgroundColor: insightsShowConsoleAlerts
-                            ? 'rgba(104, 75, 155, 0.1)'
-                            : 'transparent',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}>
-                {insightsShowConsoleAlerts && (<CheckIcon size={12} color={AppColors.purple}/>)}
-              </View>),
-            })}
-        </View>
-      </ScrollView>);
+              <WhiteBackNavigation color="#FFFFFF" size={16}/>
+            </TouchableScale>
+            {icon && (<View style={{
+                    width: 30,
+                    height: 30,
+                    borderRadius: 8,
+                    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                {icon}
+              </View>)}
+            <View style={{ flex: 1 }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 17,
+                color: '#FFFFFF',
+            }}>
+                {title}
+              </Text>
+            </View>
+            {rightInfo ? (<View style={{
+                    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                    paddingHorizontal: 8,
+                    paddingVertical: 4,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: 'rgba(255, 255, 255, 0.1)',
+                }}>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11,
+                    color: '#FFFFFF',
+                }}>
+                  {rightInfo}
+                </Text>
+              </View>) : null}
+          </View>
+        </SafeAreaView>
+      </LinearGradient>
+        {content}
+      </View>);
     };
     const renderInsightsDashboard = () => {
         const apiTotal = logs.length;
@@ -2493,11 +2673,11 @@ const NetworkInspector = ({ enabled = true, }) => {
         const totalSignals = apiTotal + logTotal + analyticsTotal + webviewTotal;
         const totalIssues = apiErrors + logErrors;
         const activeModules = [
-            tabVisibility.apis,
-            tabVisibility.logs,
-            tabVisibility.analytics,
-            tabVisibility.webview,
-            tabVisibility.redux,
+            tabVisibility?.apis,
+            tabVisibility?.logs,
+            tabVisibility?.analytics,
+            tabVisibility?.webview,
+            tabVisibility?.redux,
         ].filter(Boolean).length;
         // Composite health score: success rate penalised by error volume and slow requests.
         const healthScore = totalSignals === 0
@@ -2664,7 +2844,7 @@ const NetworkInspector = ({ enabled = true, }) => {
         </View>
 
         {/* Module 1: APIs */}
-        {tabVisibility.apis && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
+        {tabVisibility?.apis && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <SignalIcon color={AppColors.purple} size={18}/>
@@ -2771,7 +2951,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                 </View>)}
             </View>
           </TouchableScale>)}
-        {tabVisibility.logs && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
+        {tabVisibility?.logs && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <TerminalIcon color="#0D9488" size={18}/>
@@ -2812,7 +2992,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale>)}
 
         {/* Module 3: Analytics */}
-        {tabVisibility.analytics && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
+        {tabVisibility?.analytics && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <AnalyticsIcon color="#EA580C" size={18}/>
@@ -2849,7 +3029,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale>)}
 
         {/* Module 4: WebView */}
-        {tabVisibility.webview && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
+        {tabVisibility?.webview && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <GlobeIcon color="#2563EB" size={18}/>
@@ -2882,7 +3062,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale>)}
 
         {/* Module 5: Redux Store */}
-        {tabVisibility.redux && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
+        {tabVisibility?.redux && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <TerminalIcon color={AppColors.purple} size={18}/>
@@ -3195,7 +3375,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                 <StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
                 <LinearGradient colors={[AppColors.purple, '#6B4EFF']} style={styles.headerGradient}>
-                  <View style={styles.header}>
+                  <SafeAreaView style={{ width: '100%' }}>
+                    <View style={styles.header}>
                     <View style={[
                 styles.headerLeft,
                 {
@@ -3532,7 +3713,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                       </TouchableScale>
                     </View>
                   </View>
-                </LinearGradient>
+                </SafeAreaView>
+              </LinearGradient>
 
                 {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
                 {selected == null &&
@@ -3577,7 +3759,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                         icon: 'redux',
                     },
                 ]
-                    .filter(tab => tabVisibility[tab.key])
+                    .filter(tab => tabVisibility?.[tab.key])
                     .map(tab => {
                     const isActive = activeTab === tab.key;
                     const iconColor = isActive
@@ -5079,13 +5261,13 @@ const NetworkInspector = ({ enabled = true, }) => {
                                     <View style={[
                             styles.methodBadge,
                             {
-                                backgroundColor: `${METHOD_COLORS[selected.method] ?? METHOD_COLORS.ALL}15`,
+                                backgroundColor: METHOD_COLORS[selected.method] ?? METHOD_COLORS.ALL,
                             },
                         ]}>
                                       <Text style={[
                             styles.methodBadgeText,
                             {
-                                color: METHOD_COLORS[selected.method] ?? METHOD_COLORS.ALL,
+                                color: '#FFFFFF',
                             },
                         ]}>
                                         {selected.method}