react-native-inapp-inspector 1.1.2 → 1.1.4

package/dist/commonjs/index.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.subscribeReduxState = exports.getReduxState = exports.connectReduxStore = exports.ErrorBoundary = exports.subscribeWebView = exports.clearWebViewData = exports.getWebViewHtmlUrl = exports.getWebViewJs = exports.getWebViewCss = exports.getWebViewHtml = exports.getWebViewNavHistory = exports.getWebViewLogs = exports.WebView = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
+exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.ErrorBoundary = exports.subscribeWebView = exports.clearWebViewData = exports.getWebViewHtmlUrl = exports.getWebViewJs = exports.getWebViewCss = exports.getWebViewHtml = exports.getWebViewNavHistory = exports.getWebViewLogs = exports.WebView = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
@@ -62,6 +62,8 @@ const CodeSnippet_1 = __importDefault(require("./components/CodeSnippet"));
 const AnimatedEntrance_1 = __importDefault(require("./components/AnimatedEntrance"));
 // Helpers
 const helpers_1 = require("./helpers");
+// #5 — settings persistence
+const settingsStore_1 = require("./helpers/settingsStore");
 // Assets
 const NetworkIcons_1 = require("./components/NetworkIcons");
 const ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
@@ -150,7 +152,9 @@ const NavigationTracker = ({ onStateChange }) => {
 const animateNextLayout = () => {
     react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
 };
-const NetworkInspector = ({ enabled = true, }) => {
+const NetworkInspector = ({ enabled = true, storage, }) => {
+    // Set custom storage synchronously during render phase
+    (0, settingsStore_1.setCustomStorage)(storage || null);
     const [isDark, setIsDark] = (0, react_1.useState)(false);
     const [reduxState, setReduxState] = (0, react_1.useState)(null);
     // Action timeline + per-reducer last action are kept in component state so the
@@ -232,11 +236,11 @@ const NetworkInspector = ({ enabled = true, }) => {
     const visibleConsoleLogs = (0, react_1.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 = [
@@ -266,9 +270,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] = (0, react_1.useState)(100);
     const [webViewCaptureCssJs, setWebViewCaptureCssJs] = (0, react_1.useState)(true);
@@ -276,6 +280,168 @@ const NetworkInspector = ({ enabled = true, }) => {
     const [reduxExpandDepth, setReduxExpandDepth] = (0, react_1.useState)(1);
     const [slowRequestThreshold, setSlowRequestThreshold] = (0, react_1.useState)(1000);
     const [insightsShowConsoleAlerts, setInsightsShowConsoleAlerts] = (0, react_1.useState)(true);
+    // #6 — tab the inspector opens on. Shown with a DEFAULT badge in Settings.
+    const [defaultTab, setDefaultTab] = (0, react_1.useState)('apis');
+    const [showDuplicateLogs, setShowDuplicateLogs] = (0, react_1.useState)(false);
+    const resetToDefaults = async () => {
+        await (0, settingsStore_1.clearPersistedSettings)();
+        setIsDark(false);
+        (0, styles_1.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);
+        react_native_1.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 = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (0, settingsStore_1.loadSettings)().then(saved => {
+            if (cancelled)
+                return;
+            if (saved.isDark != null) {
+                setIsDark(saved.isDark);
+                (0, styles_1.toggleGlobalTheme)(saved.isDark);
+            }
+            if (saved.modalHeightPercent != null)
+                setModalHeightPercent(saved.modalHeightPercent);
+            if (saved.tabVisibility)
+                setTabVisibility(prev => ({
+                    ...prev,
+                    ...saved.tabVisibility,
+                    apis: true, // APIs is always required
+                }));
+            if (saved.defaultTab)
+                setDefaultTab(saved.defaultTab);
+            if (saved.maxNetworkLogs != null)
+                setMaxNetworkLogs(saved.maxNetworkLogs);
+            if (saved.maxConsoleLogs != null)
+                setMaxConsoleLogs(saved.maxConsoleLogs);
+            if (saved.showConsoleLevels)
+                setShowConsoleLevels(saved.showConsoleLevels);
+            if (saved.webViewCaptureCssJs != null)
+                setWebViewCaptureCssJs(saved.webViewCaptureCssJs);
+            if (saved.reduxAutoRefresh != null)
+                setReduxAutoRefreshState(saved.reduxAutoRefresh);
+            if (saved.reduxExpandDepth != null)
+                setReduxExpandDepth(saved.reduxExpandDepth);
+            if (saved.slowRequestThreshold != null)
+                setSlowRequestThreshold(saved.slowRequestThreshold);
+            if (saved.insightsShowConsoleAlerts != null)
+                setInsightsShowConsoleAlerts(saved.insightsShowConsoleAlerts);
+            if (saved.showDuplicateLogs != null)
+                setShowDuplicateLogs(saved.showDuplicateLogs);
+            if (saved.defaultTab) {
+                const dt = saved.defaultTab;
+                const vis = {
+                    ...{
+                        insights: true,
+                        apis: true,
+                        logs: true,
+                        analytics: false,
+                        webview: false,
+                        redux: false,
+                    },
+                    ...(saved.tabVisibility || {}),
+                    apis: true,
+                };
+                setActiveTab(vis[dt] ? dt : 'apis');
+            }
+            settingsHydratedRef.current = true;
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!settingsHydratedRef.current)
+            return;
+        (0, settingsStore_1.saveSettings)({
+            isDark,
+            modalHeightPercent,
+            tabVisibility,
+            defaultTab,
+            maxNetworkLogs,
+            maxConsoleLogs,
+            showConsoleLevels,
+            webViewCaptureCssJs,
+            reduxAutoRefresh,
+            reduxExpandDepth,
+            slowRequestThreshold,
+            insightsShowConsoleAlerts,
+            showDuplicateLogs,
+        });
+    }, [
+        isDark,
+        modalHeightPercent,
+        tabVisibility,
+        defaultTab,
+        maxNetworkLogs,
+        maxConsoleLogs,
+        showConsoleLevels,
+        webViewCaptureCssJs,
+        reduxAutoRefresh,
+        reduxExpandDepth,
+        slowRequestThreshold,
+        insightsShowConsoleAlerts,
+        showDuplicateLogs,
+    ]);
+    // #1 — check NPM for a newer published version; surfaces an animated dot
+    // in the header next to the npm chip when an update is available.
+    const [latestNpmVersion, setLatestNpmVersion] = (0, react_1.useState)(null);
+    const updateAvailable = (0, react_1.useMemo)(() => {
+        if (!latestNpmVersion)
+            return false;
+        const parse = (v) => v
+            .replace(/^v/, '')
+            .split('.')
+            .map(n => parseInt(n, 10) || 0);
+        const cur = parse(constants_1.LIB_VERSION);
+        const latest = parse(latestNpmVersion);
+        for (let i = 0; i < 3; i++) {
+            if ((latest[i] || 0) > (cur[i] || 0))
+                return true;
+            if ((latest[i] || 0) < (cur[i] || 0))
+                return false;
+        }
+        return false;
+    }, [latestNpmVersion]);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        fetch('https://registry.npmjs.org/react-native-inapp-inspector/latest')
+            .then(res => (res.ok ? res.json() : null))
+            .then(data => {
+            if (!cancelled && data && typeof data.version === 'string') {
+                setLatestNpmVersion(data.version);
+            }
+        })
+            .catch(() => {
+            // Offline / blocked — silently skip the update check.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         (0, reduxLogger_1.setReduxAutoRefresh)(reduxAutoRefresh);
     }, [reduxAutoRefresh]);
@@ -289,6 +455,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                 animateNextLayout();
                 setActiveTab('apis');
             }
+            // #6 — a hidden module can't be the default landing tab.
+            if (!nextVal && defaultTab === key) {
+                setDefaultTab('apis');
+            }
             return newVisibility;
         });
     };
@@ -370,6 +540,8 @@ const NetworkInspector = ({ enabled = true, }) => {
     const badgeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const activePulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.4)).current;
     const unreadPulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    // #4 — diagonal light streak sweeping across the floating launcher
+    const fabShineAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     // #11 — header "clear all" icon spin/scale animation
     const clearAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     // #4 — draggable floating launcher (drag anywhere on screen)
@@ -412,9 +584,9 @@ const NetworkInspector = ({ enabled = true, }) => {
             fabDraggedRef.current = false;
         },
     })).current;
-    // #10 — scroll-to-top affordance for the main APIs list
+    // #2 — scroll-to-top button for the main APIs list, always visible at the
+    // bottom right of the list.
     const apisListRef = (0, react_1.useRef)(null);
-    const [showScrollTop, setShowScrollTop] = (0, react_1.useState)(false);
     const runClearAllWithAnimation = (0, react_1.useCallback)(() => {
         react_native_1.Animated.sequence([
             react_native_1.Animated.timing(clearAnim, {
@@ -451,6 +623,24 @@ const NetworkInspector = ({ enabled = true, }) => {
         loop.start();
         return () => loop.stop();
     }, [pulseAnim]);
+    // #4 — sweep the shine streak across the launcher, pause, repeat.
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(fabShineAnim, {
+                toValue: 1,
+                duration: 1100,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.delay(1600),
+            react_native_1.Animated.timing(fabShineAnim, {
+                toValue: 0,
+                duration: 0,
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [fabShineAnim]);
     (0, react_1.useEffect)(() => {
         const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
             react_native_1.Animated.timing(activePulseAnim, {
@@ -494,6 +684,16 @@ const NetworkInspector = ({ enabled = true, }) => {
             }).start();
         }
     }, [newLogIds]);
+    // #6 — every time the inspector is opened, land on the chosen default tab.
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            const target = defaultTab === 'apis' || tabVisibility?.[defaultTab]
+                ? defaultTab
+                : 'apis';
+            setActiveTab(target);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
     (0, react_1.useEffect)(() => {
         if (visible) {
             const task = react_native_1.InteractionManager.runAfterInteractions(() => {
@@ -647,8 +847,38 @@ const NetworkInspector = ({ enabled = true, }) => {
         if (sortOrder === 'oldest') {
             result = [...result].reverse();
         }
+        // #9 — collapse consecutive identical requests (same method + url +
+        // status) into one row carrying a ×N counter, unless the user opted in
+        // to seeing every duplicate via Settings → "Show Duplicate Logs".
+        if (!showDuplicateLogs) {
+            const collapsed = [];
+            for (const log of result) {
+                const last = collapsed[collapsed.length - 1];
+                if (last &&
+                    last.method === log.method &&
+                    last.url === log.url &&
+                    last.status === log.status) {
+                    collapsed[collapsed.length - 1] = {
+                        ...last,
+                        duplicateCount: (last.duplicateCount || 1) + 1,
+                    };
+                }
+                else {
+                    collapsed.push({ ...log, duplicateCount: 1 });
+                }
+            }
+            result = collapsed;
+        }
         return result.slice(0, maxNetworkLogs);
-    }, [logs, search, statusFilters, methodFilters, sortOrder, maxNetworkLogs]);
+    }, [
+        logs,
+        search,
+        statusFilters,
+        methodFilters,
+        sortOrder,
+        maxNetworkLogs,
+        showDuplicateLogs,
+    ]);
     const availableMethods = (0, react_1.useMemo)(() => {
         const methods = new Set();
         logs.forEach(log => {
@@ -858,8 +1088,35 @@ const NetworkInspector = ({ enabled = true, }) => {
         result = [...result].sort((a, b) => logSortOrder === 'newest'
             ? b.timestamp - a.timestamp
             : a.timestamp - b.timestamp);
+        // #9 — collapse consecutive identical messages into one row with a ×N
+        // counter unless duplicates are explicitly enabled in Settings.
+        if (!showDuplicateLogs) {
+            const collapsed = [];
+            for (const log of result) {
+                const last = collapsed[collapsed.length - 1];
+                if (last &&
+                    last.type === log.type &&
+                    last.sourceMethod === log.sourceMethod &&
+                    last.message === log.message) {
+                    collapsed[collapsed.length - 1] = {
+                        ...last,
+                        duplicateCount: (last.duplicateCount || 1) + 1,
+                    };
+                }
+                else {
+                    collapsed.push({ ...log, duplicateCount: 1 });
+                }
+            }
+            result = collapsed;
+        }
         return result;
-    }, [visibleConsoleLogs, logFilters, logSearch, logSortOrder]);
+    }, [
+        visibleConsoleLogs,
+        logFilters,
+        logSearch,
+        logSortOrder,
+        showDuplicateLogs,
+    ]);
     const filteredWebViewLogs = (0, react_1.useMemo)(() => {
         let result = webViewLogs;
         if (webViewSearch) {
@@ -1008,7 +1265,11 @@ const NetworkInspector = ({ enabled = true, }) => {
         else {
             react_native_1.Alert.alert('Clear Logs', 'Are you sure you want to clear all network logs?', [
                 { text: 'Cancel', style: 'cancel' },
-                { text: 'Clear All', onPress: clearNetworkOnly, style: 'destructive' },
+                {
+                    text: 'Clear All',
+                    onPress: clearNetworkOnly,
+                    style: 'destructive',
+                },
             ]);
         }
     }
@@ -1096,7 +1357,8 @@ const NetworkInspector = ({ enabled = true, }) => {
             return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
           {/* Settings Header with back button */}
           <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
-            <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
+            <react_native_1.SafeAreaView style={{ width: '100%' }}>
+              <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
               <TouchableScale_1.default onPress={() => {
                     animateNextLayout();
                     setSettingsPage(null);
@@ -1144,7 +1406,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
-          </react_native_linear_gradient_1.default>
+          </react_native_1.SafeAreaView>
+        </react_native_linear_gradient_1.default>
 
           <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
             {/* Tab list */}
@@ -1189,7 +1452,7 @@ const NetworkInspector = ({ enabled = true, }) => {
               </react_native_1.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 (<react_native_1.View key={tab.key} style={{
@@ -1252,7 +1515,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                         }}>
                         {tab.label}
                       </react_native_1.Text>
-                      {isLocked && (<react_native_1.View style={{
+                      {/* #6 — badge marks the configured default tab */}
+                      {tab.key === defaultTab && (<react_native_1.View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 backgroundColor: 'rgba(104,75,155,0.08)',
@@ -1520,73 +1784,316 @@ const NetworkInspector = ({ enabled = true, }) => {
                 })}
                   </react_native_1.View>
                 </react_native_1.View>
-              </react_native_1.View>
-            </react_native_1.View>
-          </react_native_1.ScrollView>
-        </react_native_1.View>);
-        }
-        const goBackToMain = () => {
-            animateNextLayout();
-            setSettingsPage('main');
-        };
-        const renderSubHeader = (title, icon, rightInfo) => (<react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 12,
-                paddingBottom: 16,
-                borderBottomWidth: 1,
-                borderBottomColor: AppColors_1.AppColors.dividerColor,
-                marginBottom: 16,
-            }}>
-        <TouchableScale_1.default onPress={goBackToMain} style={{
-                width: 36,
-                height: 36,
-                borderRadius: 10,
-                backgroundColor: AppColors_1.AppColors.purpleShade50,
-                borderWidth: 1,
-                borderColor: 'rgba(104,75,155,0.2)',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-          <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.purple} size={16}/>
-        </TouchableScale_1.default>
-        {icon && (<react_native_1.View style={{
-                    width: 36,
-                    height: 36,
-                    borderRadius: 10,
+
+                {/* Divider */}
+                <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+                {/* #6 — Default Tab */}
+                <react_native_1.View style={{
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                }}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                    <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
                     borderWidth: 1,
                     borderColor: 'rgba(104,75,155,0.2)',
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-            {icon}
-          </react_native_1.View>)}
-        <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 18,
-                color: AppColors_1.AppColors.primaryBlack,
-                flex: 1,
-            }}>
-          {title}
-        </react_native_1.Text>
-        {rightInfo ? (<react_native_1.View style={{
-                    backgroundColor: 'rgba(104,75,155,0.08)',
+                      <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={11}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                        Default Tab
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Tab shown when the inspector opens
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  {/* Grid of Default Tab Cards */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    gap: 8,
+                    marginTop: 12,
+                }}>
+                    {settingsTabs
+                    .filter(tab => tab.key === 'apis' || tabVisibility?.[tab.key])
+                    .map(tab => {
+                    const isActive = defaultTab === tab.key;
+                    return (<TouchableScale_1.default key={tab.key} onPress={() => setDefaultTab(tab.key)} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 8,
+                            paddingVertical: 10,
+                            paddingHorizontal: 12,
+                            borderRadius: 10,
+                            borderWidth: 1.5,
+                            borderColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayBorderSecondary,
+                            backgroundColor: isActive ? 'rgba(104,75,155,0.06)' : AppColors_1.AppColors.primaryLight,
+                            minWidth: '47%',
+                            flex: 1,
+                        }}>
+                            <react_native_1.View style={{
+                            width: 22,
+                            height: 22,
+                            borderRadius: 6,
+                            backgroundColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.purpleShade50,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                              {tab.icon === 'insights' && (<NetworkIcons_1.InsightsIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
+                              {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
+                              {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
+                              {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
+                              {tab.icon === 'webview' && (<NetworkIcons_1.GlobeIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
+                              {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
+                            </react_native_1.View>
+                            <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 13,
+                            color: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.primaryBlack,
+                            flex: 1,
+                        }}>
+                                {tab.label}
+                            </react_native_1.Text>
+                            {isActive && (<react_native_1.View style={{
+                                width: 14,
+                                height: 14,
+                                borderRadius: 7,
+                                backgroundColor: AppColors_1.AppColors.purple,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}>
+                                <NetworkIcons_1.CheckIcon size={8} color="#FFFFFF"/>
+                              </react_native_1.View>)}
+                          </TouchableScale_1.default>);
+                })}
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                {/* Divider */}
+                <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+                {/* #9 — Show Duplicate Logs */}
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                    gap: 12,
+                }}>
+                  <react_native_1.View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                    <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: 'rgba(104,75,155,0.2)',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      <NetworkIcons_1.EyeIcon color={AppColors_1.AppColors.purple} size={11}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                        Show Duplicate Logs
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Off: repeated identical entries collapse into one row
+                        with a ×N count
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  {/* Toggle Switch */}
+                  <TouchableScale_1.default onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
+                    width: 38,
+                    height: 22,
+                    borderRadius: 11,
+                    backgroundColor: showDuplicateLogs
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayBorderSecondary,
+                    padding: 2,
+                    justifyContent: 'center',
+                    alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
+                }}>
+                    <react_native_1.View style={{
+                    width: 18,
+                    height: 18,
+                    borderRadius: 9,
+                    backgroundColor: '#FFFFFF',
+                    shadowColor: '#000',
+                    shadowOpacity: 0.15,
+                    shadowRadius: 1.5,
+                    shadowOffset: { width: 0, height: 1 },
+                }}/>
+                  </TouchableScale_1.default>
+                </react_native_1.View>
+
+                {/* Divider */}
+                <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+                {/* Reset Settings */}
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                    gap: 12,
+                }}>
+                  <react_native_1.View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                    <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: 'rgba(239,68,68,0.08)',
+                    borderWidth: 1,
+                    borderColor: 'rgba(239,68,68,0.2)',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={11}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                        Reset Settings
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Wipe custom configurations and load package defaults
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  <TouchableScale_1.default 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)',
                 }}>
-            <react_native_1.Text style={{
+                    <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 11,
-                    color: AppColors_1.AppColors.purple,
+                    color: AppColors_1.AppColors.errorColor,
                 }}>
-              {rightInfo}
-            </react_native_1.Text>
-          </react_native_1.View>) : null}
-      </react_native_1.View>);
+                      Reset
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Storage Status */}
+            <react_native_1.View style={{
+                    backgroundColor: (0, settingsStore_1.isPersistentStorageAvailable)()
+                        ? 'rgba(74,222,128,0.08)'
+                        : 'rgba(234,179,8,0.08)',
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: (0, settingsStore_1.isPersistentStorageAvailable)()
+                        ? 'rgba(74,222,128,0.2)'
+                        : 'rgba(234,179,8,0.2)',
+                    padding: 12,
+                    marginTop: 16,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                }}>
+              <react_native_1.View style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 4,
+                    backgroundColor: (0, settingsStore_1.isPersistentStorageAvailable)() ? '#22C55E' : '#EAB308',
+                }}/>
+              <react_native_1.View style={{ flex: 1 }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 12,
+                    color: (0, settingsStore_1.isPersistentStorageAvailable)() ? '#15803D' : '#854D0E',
+                }}>
+                  {(0, settingsStore_1.isPersistentStorageAvailable)()
+                    ? `Storage: Persistent (${storage ? 'Custom' : 'iOS Settings'})`
+                    : 'Storage: Temporary (In-Memory)'}
+                </react_native_1.Text>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 10.5,
+                    color: (0, settingsStore_1.isPersistentStorageAvailable)() ? '#166534' : '#854D0E',
+                    marginTop: 2,
+                    opacity: 0.8,
+                }}>
+                  {(0, settingsStore_1.isPersistentStorageAvailable)()
+                    ? 'Your settings are saved across app restarts.'
+                    : 'Settings reset when closed. To persist settings, pass a storage object to <NetworkInspector storage={...} />.'}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.ScrollView>
+        </react_native_1.View>);
+        }
+        const goBackToMain = () => {
+            animateNextLayout();
+            setSettingsPage('main');
+        };
         // Helper: settings row with icon + label + optional description
         const renderSettingRow = (opts) => (<react_native_1.View style={{
                 paddingVertical: 12,
@@ -1666,9 +2173,15 @@ const NetworkInspector = ({ enabled = true, }) => {
                 })}
           </react_native_1.View>)}
       </react_native_1.View>);
+        let content = null;
+        let title = '';
+        let icon = null;
+        let rightInfo = '';
         if (settingsPage === 'apis') {
-            return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('APIs Settings', <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>, `Total: ${logs.length}`)}
+            title = 'APIs Settings';
+            icon = <NetworkIcons_1.SignalIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `Total: ${logs.length}`;
+            content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
                     padding: 16,
@@ -1728,9 +2241,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           </react_native_1.View>
         </react_native_1.ScrollView>);
         }
-        if (settingsPage === 'logs') {
-            return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('Logs Settings', <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>, `Total: ${consoleLogs.length}`)}
+        else if (settingsPage === 'logs') {
+            title = 'Logs Settings';
+            icon = <NetworkIcons_1.TerminalIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `Total: ${consoleLogs.length}`;
+            content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
                     padding: 16,
@@ -1759,7 +2274,7 @@ const NetworkInspector = ({ enabled = true, }) => {
               Log Levels
             </react_native_1.Text>
             {['info', 'warn', 'error'].map((level, li) => {
-                    const isLvlActive = showConsoleLevels[level];
+                    const isLvlActive = showConsoleLevels?.[level];
                     const levelColor = level === 'error'
                         ? AppColors_1.AppColors.errorColor
                         : level === 'warn'
@@ -1840,9 +2355,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           </react_native_1.View>
         </react_native_1.ScrollView>);
         }
-        if (settingsPage === 'analytics') {
-            return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('Analytics Settings', <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>, `Events: ${analyticsEvents.length}`)}
+        else if (settingsPage === 'analytics') {
+            title = 'Analytics Settings';
+            icon = <NetworkIcons_1.AnalyticsIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `Events: ${analyticsEvents.length}`;
+            content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
                     padding: 16,
@@ -1896,9 +2413,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           </react_native_1.View>
         </react_native_1.ScrollView>);
         }
-        if (settingsPage === 'webview') {
-            return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('WebView Settings', <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={16}/>, `History: ${webViewNavHistory.length}`)}
+        else if (settingsPage === 'webview') {
+            title = 'WebView Settings';
+            icon = <NetworkIcons_1.GlobeIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `History: ${webViewNavHistory.length}`;
+            content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
                     padding: 16,
@@ -1968,9 +2487,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           </react_native_1.View>
         </react_native_1.ScrollView>);
         }
-        if (settingsPage === 'redux') {
-            return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-          {renderSubHeader('Redux Settings', <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>, `Reducers: ${Object.keys(reduxState || {}).length}`)}
+        else if (settingsPage === 'redux') {
+            title = 'Redux Settings';
+            icon = <NetworkIcons_1.TerminalIcon color="#FFFFFF" size={16}/>;
+            rightInfo = `Reducers: ${Object.keys(reduxState || {}).length}`;
+            content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
           <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
                     padding: 16,
@@ -2054,53 +2575,108 @@ const NetworkInspector = ({ enabled = true, }) => {
           </react_native_1.View>
         </react_native_1.ScrollView>);
         }
-        // Default return page is Insights settings
-        return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
-        {renderSubHeader('Insights Settings', <NetworkIcons_1.InsightsIcon color={AppColors_1.AppColors.purple} size={16}/>)}
-        <react_native_1.View style={{
-                backgroundColor: AppColors_1.AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 12,
+        else {
+            title = 'Insights Settings';
+            icon = <NetworkIcons_1.InsightsIcon color="#FFFFFF" size={16}/>;
+            content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+          <react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    padding: 16,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    gap: 4,
+                }}>
+            {renderSettingRow({
+                    icon: <NetworkIcons_1.SignalIcon color={AppColors_1.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,
+                    },
+                })}
+            <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+            {renderSettingRow({
+                    icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                    label: 'Show Console Alerts',
+                    description: 'Flags critical warnings or crash events on dashboard',
+                    isLast: true,
+                    onPress: () => setInsightsShowConsoleAlerts(prev => !prev),
+                    right: (<react_native_1.View style={{
+                            width: 22,
+                            height: 22,
+                            borderRadius: 6,
+                            borderWidth: 2,
+                            borderColor: insightsShowConsoleAlerts
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak,
+                            backgroundColor: insightsShowConsoleAlerts
+                                ? 'rgba(104, 75, 155, 0.1)'
+                                : 'transparent',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                  {insightsShowConsoleAlerts && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
+                </react_native_1.View>),
+                })}
+          </react_native_1.View>
+        </react_native_1.ScrollView>);
+        }
+        return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+        <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
+          <react_native_1.SafeAreaView style={{ width: '100%' }}>
+            <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
+            <TouchableScale_1.default onPress={goBackToMain} hitSlop={12} style={{
+                padding: 8,
+                borderRadius: 10,
+                backgroundColor: 'rgba(255, 255, 255, 0.15)',
                 borderWidth: 1,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                gap: 4,
+                borderColor: 'rgba(255, 255, 255, 0.08)',
             }}>
-          {renderSettingRow({
-                icon: <NetworkIcons_1.SignalIcon color={AppColors_1.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,
-                },
-            })}
-          <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
-          {renderSettingRow({
-                icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
-                label: 'Show Console Alerts',
-                description: 'Flags critical warnings or crash events on dashboard',
-                isLast: true,
-                onPress: () => setInsightsShowConsoleAlerts(prev => !prev),
-                right: (<react_native_1.View style={{
-                        width: 22,
-                        height: 22,
-                        borderRadius: 6,
-                        borderWidth: 2,
-                        borderColor: insightsShowConsoleAlerts
-                            ? AppColors_1.AppColors.purple
-                            : AppColors_1.AppColors.grayTextWeak,
-                        backgroundColor: insightsShowConsoleAlerts
-                            ? 'rgba(104, 75, 155, 0.1)'
-                            : 'transparent',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}>
-                {insightsShowConsoleAlerts && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
-              </react_native_1.View>),
-            })}
-        </react_native_1.View>
-      </react_native_1.ScrollView>);
+              <NetworkIcons_1.WhiteBackNavigation color="#FFFFFF" size={16}/>
+            </TouchableScale_1.default>
+            {icon && (<react_native_1.View style={{
+                    width: 30,
+                    height: 30,
+                    borderRadius: 8,
+                    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                {icon}
+              </react_native_1.View>)}
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 17,
+                color: '#FFFFFF',
+            }}>
+                {title}
+              </react_native_1.Text>
+            </react_native_1.View>
+            {rightInfo ? (<react_native_1.View style={{
+                    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                    paddingHorizontal: 8,
+                    paddingVertical: 4,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: 'rgba(255, 255, 255, 0.1)',
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    color: '#FFFFFF',
+                }}>
+                  {rightInfo}
+                </react_native_1.Text>
+              </react_native_1.View>) : null}
+          </react_native_1.View>
+        </react_native_1.SafeAreaView>
+      </react_native_linear_gradient_1.default>
+        {content}
+      </react_native_1.View>);
     };
     const renderInsightsDashboard = () => {
         const apiTotal = logs.length;
@@ -2136,11 +2712,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
@@ -2307,7 +2883,7 @@ const NetworkInspector = ({ enabled = true, }) => {
         </react_native_1.View>
 
         {/* Module 1: APIs */}
-        {tabVisibility.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
+        {tabVisibility?.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={18}/>
@@ -2414,7 +2990,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                 </react_native_1.View>)}
             </react_native_1.View>
           </TouchableScale_1.default>)}
-        {tabVisibility.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
+        {tabVisibility?.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.TerminalIcon color="#0D9488" size={18}/>
@@ -2455,7 +3031,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 3: Analytics */}
-        {tabVisibility.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
+        {tabVisibility?.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.AnalyticsIcon color="#EA580C" size={18}/>
@@ -2492,7 +3068,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 4: WebView */}
-        {tabVisibility.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
+        {tabVisibility?.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.GlobeIcon color="#2563EB" size={18}/>
@@ -2525,7 +3101,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 5: Redux Store */}
-        {tabVisibility.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
+        {tabVisibility?.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={18}/>
@@ -2790,6 +3366,29 @@ const NetworkInspector = ({ enabled = true, }) => {
         }} hitSlop={10}>
           <react_native_1.Animated.View style={[styles_1.default.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
           <NetworkIcons_1.BrandCircleIcon size={62}/>
+          {/* #4 — shining sweep, clipped inside the circular launcher */}
+          <react_native_1.View pointerEvents="none" style={styles_1.default.fabShineClip}>
+            <react_native_1.Animated.View style={[
+            styles_1.default.fabShineStreak,
+            {
+                transform: [
+                    {
+                        translateX: fabShineAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-48, 96],
+                        }),
+                    },
+                    { rotate: '25deg' },
+                ],
+            },
+        ]}>
+              <react_native_linear_gradient_1.default colors={[
+            'rgba(255,255,255,0)',
+            'rgba(255,255,255,0.55)',
+            'rgba(255,255,255,0)',
+        ]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
+            </react_native_1.Animated.View>
+          </react_native_1.View>
           {(logs.length > 0 || analyticsEvents.length > 0) && (<react_native_1.Animated.View style={[
                 styles_1.default.fabBadge,
                 hasErrors ? styles_1.default.fabBadgeError : styles_1.default.fabBadgeNormal,
@@ -2815,7 +3414,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                 <react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
                 <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} style={styles_1.default.headerGradient}>
-                  <react_native_1.View style={styles_1.default.header}>
+                  <react_native_1.SafeAreaView style={{ width: '100%' }}>
+                    <react_native_1.View style={styles_1.default.header}>
                     <react_native_1.View style={[
                 styles_1.default.headerLeft,
                 {
@@ -2962,6 +3562,29 @@ const NetworkInspector = ({ enabled = true, }) => {
                                   </react_native_1.Text>
                                 </react_native_1.View>
                               </react_native_1.View>
+
+                              {/* #1 — pulsing dot when a newer version is on NPM */}
+                              {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => react_native_1.Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${constants_1.LIB_VERSION}).`, [
+                        { text: 'Later', style: 'cancel' },
+                        {
+                            text: 'View on NPM',
+                            onPress: () => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
+                        },
+                    ])} style={{
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                                  <react_native_1.Animated.View style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: 4,
+                        backgroundColor: '#4ADE80',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,255,255,0.9)',
+                        opacity: activePulseAnim,
+                        transform: [{ scale: unreadPulseAnim }],
+                    }}/>
+                                </react_native_1.Pressable>)}
                             </react_native_1.View>
                           </react_native_1.View>
                         </react_native_1.View>) : null}
@@ -3110,7 +3733,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                         },
                     ],
                 }}>
-                            <NetworkIcons_1.TrashIcon color="#FFFFFF" size={15}/>
+                            <NetworkIcons_1.WipeIcon color="#FFFFFF" size={16}/>
                           </react_native_1.Animated.View>
                         </TouchableScale_1.default>)}
 
@@ -3129,7 +3752,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                       </TouchableScale_1.default>
                     </react_native_1.View>
                   </react_native_1.View>
-                </react_native_linear_gradient_1.default>
+                </react_native_1.SafeAreaView>
+              </react_native_linear_gradient_1.default>
 
                 {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
                 {selected == null &&
@@ -3174,7 +3798,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
@@ -3290,7 +3914,16 @@ const NetworkInspector = ({ enabled = true, }) => {
                     animateNextLayout();
                     setAnalyticsSubTab('ga_events');
                 }}>
-                          <react_native_1.Text style={[
+                          <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                            {/* #7 */}
+                            <NetworkIcons_1.AnalyticsIcon size={13} color={analyticsSubTab === 'ga_events'
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                            <react_native_1.Text style={[
                     {
                         fontFamily: AppFonts_1.AppFonts.interMedium,
                         fontSize: 13,
@@ -3301,12 +3934,13 @@ const NetworkInspector = ({ enabled = true, }) => {
                         color: AppColors_1.AppColors.purple,
                     },
                 ]}>
-                            GA Events (
-                            {analyticsSearch
+                              GA Events (
+                              {analyticsSearch
                     ? filteredAnalyticsEvents.length
                     : analyticsEvents.length}
-                            )
-                          </react_native_1.Text>
+                              )
+                            </react_native_1.Text>
+                          </react_native_1.View>
                         </react_native_1.Pressable>
                         <react_native_1.Pressable style={[
                     {
@@ -3327,7 +3961,16 @@ const NetworkInspector = ({ enabled = true, }) => {
                     animateNextLayout();
                     setAnalyticsSubTab('top_events');
                 }}>
-                          <react_native_1.Text style={[
+                          <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                            {/* #7 */}
+                            <NetworkIcons_1.TrendingUpIcon size={13} color={analyticsSubTab === 'top_events'
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                            <react_native_1.Text style={[
                     {
                         fontFamily: AppFonts_1.AppFonts.interMedium,
                         fontSize: 13,
@@ -3338,8 +3981,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                         color: AppColors_1.AppColors.purple,
                     },
                 ]}>
-                            Top Events ({topEventsArray.length})
-                          </react_native_1.Text>
+                              Top Events ({topEventsArray.length})
+                            </react_native_1.Text>
+                          </react_native_1.View>
                         </react_native_1.Pressable>
                       </react_native_1.View>
                     </react_native_1.View>)}
@@ -3449,7 +4093,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                         flexGrow: 1,
                     },
                 ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<react_native_1.View style={{ flex: 1 }}>
-                      <react_native_1.FlatList ref={apisListRef} onScroll={e => setShowScrollTop(e.nativeEvent.contentOffset.y > 320)} scrollEventThrottle={16} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
+                      <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
                             <react_native_1.View style={styles_1.default.toolbarRow}>
                               <react_native_1.View style={styles_1.default.searchContainer}>
                                 <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
@@ -3600,17 +4244,17 @@ const NetworkInspector = ({ enabled = true, }) => {
                     styles_1.default.listContent,
                     filteredLogs.length === 0 && { flexGrow: 1 },
                 ]} keyboardShouldPersistTaps="handled"/>
-                      {showScrollTop && (<TouchableScale_1.default onPress={() => {
-                        apisListRef.current?.scrollToOffset({
-                            offset: 0,
-                            animated: true,
-                        });
-                        setShowScrollTop(false);
-                    }} hitSlop={10} style={styles_1.default.scrollTopBtn}>
-                          <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
-                            <NetworkIcons_1.ChevronIcon color="#FFFFFF" size={18}/>
-                          </react_native_1.View>
-                        </TouchableScale_1.default>)}
+                      {/* #2 — always-visible scroll-to-top, bottom right */}
+                      <TouchableScale_1.default onPress={() => {
+                    apisListRef.current?.scrollToOffset({
+                        offset: 0,
+                        animated: true,
+                    });
+                }} hitSlop={10} style={styles_1.default.scrollTopBtn}>
+                        <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
+                          <NetworkIcons_1.ChevronIcon color="#FFFFFF" size={18}/>
+                        </react_native_1.View>
+                      </TouchableScale_1.default>
                     </react_native_1.View>) : activeTab === 'logs' ? (<react_native_1.View style={{ flex: 1 }}>
                       <react_native_1.View style={{
                     backgroundColor: '#FFFFFF',
@@ -3659,15 +4303,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: '#F4EBFF',
                             },
                         ]}>
-                                  <react_native_1.Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <NetworkIcons_1.LayersIcon size={12} color={active
+                            ? AppColors_1.AppColors.purpleShade700
+                            : AppColors_1.AppColors.grayTextStrong}/>
+                                    <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.purpleShade700,
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                    All ({logCounts.all})
-                                  </react_native_1.Text>
+                                      All ({logCounts.all})
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
                                 </react_native_1.View>
                               </TouchableScale_1.default>);
                 })()}
@@ -3693,15 +4347,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: '#F1F5F9',
                             },
                         ]}>
-                                  <react_native_1.Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <NetworkIcons_1.UserIcon size={12} color={active
+                            ? '#334155'
+                            : AppColors_1.AppColors.grayTextStrong}/>
+                                    <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: '#334155',
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                    User Log ({logCounts['user-log']})
-                                  </react_native_1.Text>
+                                      User Log ({logCounts['user-log']})
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
                                 </react_native_1.View>
                               </TouchableScale_1.default>);
                 })()}
@@ -3727,15 +4391,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: AppColors_1.AppColors.purpleShade50,
                             },
                         ]}>
-                                  <react_native_1.Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <NetworkIcons_1.InfoCircleIcon size={12} color={active
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextStrong}/>
+                                    <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.purple,
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                    Info ({logCounts.info})
-                                  </react_native_1.Text>
+                                      Info ({logCounts.info})
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
                                 </react_native_1.View>
                               </TouchableScale_1.default>);
                 })()}
@@ -3761,7 +4435,17 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: '#FFFDF6',
                             },
                         ]}>
-                                  <react_native_1.Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <NetworkIcons_1.WarningTriangleIcon size={12} color={active
+                            ? AppColors_1.AppColors.darkOrange ||
+                                AppColors_1.AppColors.lightOrange
+                            : AppColors_1.AppColors.grayTextStrong}/>
+                                    <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.darkOrange ||
@@ -3769,8 +4453,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                    Warning ({logCounts.warn})
-                                  </react_native_1.Text>
+                                      Warning ({logCounts.warn})
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
                                 </react_native_1.View>
                               </TouchableScale_1.default>);
                 })()}
@@ -3796,15 +4481,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: '#FFF5F6',
                             },
                         ]}>
-                                  <react_native_1.Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <NetworkIcons_1.ErrorCircleIcon size={12} color={active
+                            ? AppColors_1.AppColors.errorColor
+                            : AppColors_1.AppColors.grayTextStrong}/>
+                                    <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.errorColor,
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                    Error ({logCounts.error})
-                                  </react_native_1.Text>
+                                      Error ({logCounts.error})
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
                                 </react_native_1.View>
                               </TouchableScale_1.default>);
                 })()}
@@ -3830,15 +4525,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: `${AppColors_1.AppColors.skyBlue}15`,
                             },
                         ]}>
-                                  <react_native_1.Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <NetworkIcons_1.AnalyticsIcon size={12} color={active
+                            ? AppColors_1.AppColors.skyBlue
+                            : AppColors_1.AppColors.grayTextStrong}/>
+                                    <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.skyBlue,
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                    Analytics ({logCounts.analytics})
-                                  </react_native_1.Text>
+                                      Analytics ({logCounts.analytics})
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
                                 </react_native_1.View>
                               </TouchableScale_1.default>);
                 })()}
@@ -4595,13 +5300,13 @@ const NetworkInspector = ({ enabled = true, }) => {
                                     <react_native_1.View style={[
                             styles_1.default.methodBadge,
                             {
-                                backgroundColor: `${constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL}15`,
+                                backgroundColor: constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL,
                             },
                         ]}>
                                       <react_native_1.Text style={[
                             styles_1.default.methodBadgeText,
                             {
-                                color: constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL,
+                                color: '#FFFFFF',
                             },
                         ]}>
                                         {selected.method}
@@ -4934,5 +5639,8 @@ var ErrorBoundary_2 = require("./components/ErrorBoundary");
 Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_2).default; } });
 var reduxLogger_2 = require("./customHooks/reduxLogger");
 Object.defineProperty(exports, "connectReduxStore", { enumerable: true, get: function () { return reduxLogger_2.connectReduxStore; } });
+Object.defineProperty(exports, "inspectorReduxMiddleware", { enumerable: true, get: function () { return reduxLogger_2.inspectorReduxMiddleware; } });
 Object.defineProperty(exports, "getReduxState", { enumerable: true, get: function () { return reduxLogger_2.getReduxState; } });
 Object.defineProperty(exports, "subscribeReduxState", { enumerable: true, get: function () { return reduxLogger_2.subscribeReduxState; } });
+Object.defineProperty(exports, "getActionHistory", { enumerable: true, get: function () { return reduxLogger_2.getActionHistory; } });
+Object.defineProperty(exports, "clearActionHistory", { enumerable: true, get: function () { return reduxLogger_2.clearActionHistory; } });