react-native-inapp-inspector 1.0.9 → 1.0.11

package/dist/commonjs/index.js

@@ -50,6 +50,7 @@ const CopyButton_1 = __importDefault(require("./components/CopyButton"));
 const SectionHeader_1 = __importDefault(require("./components/SectionHeader"));
 const EmptyState_1 = __importDefault(require("./components/EmptyState"));
 const JsonViewer_1 = __importDefault(require("./components/JsonViewer"));
+const ReduxTreeView_1 = require("./components/ReduxTreeView");
 const DomainHeader_1 = __importDefault(require("./components/DomainHeader"));
 const DiffViewer_1 = __importDefault(require("./components/DiffViewer"));
 const LogCard_1 = __importDefault(require("./components/LogCard"));
@@ -75,8 +76,67 @@ const logFilters_1 = require("./customHooks/logFilters");
 const analyticsLogger_1 = require("./customHooks/analyticsLogger");
 const AnalyticsEventCard_1 = __importStar(require("./components/AnalyticsEventCard"));
 const AnalyticsDetail_1 = __importDefault(require("./components/AnalyticsDetail"));
-// WebView
 const webViewLogger_1 = require("./customHooks/webViewLogger");
+let OriginalWebView = null;
+try {
+    const RNWebView = require('react-native-webview');
+    OriginalWebView = RNWebView.WebView || RNWebView.default;
+}
+catch (e) {
+    // Silent fail
+}
+const previewInspectScript = `
+(function() {
+  var style = document.createElement('style');
+  style.innerHTML = '* { cursor: pointer !important; }';
+  document.head.appendChild(style);
+
+  document.addEventListener('click', function(e) {
+    var el = e.target;
+    if (!el) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    var oldOutline = el.style.outline;
+    var oldTransition = el.style.transition;
+    el.style.transition = 'outline 0.15s ease';
+    el.style.outline = '3px solid #684B9B';
+    setTimeout(function() {
+      el.style.outline = oldOutline;
+      el.style.transition = oldTransition;
+    }, 600);
+
+    var tagName = el.tagName.toLowerCase();
+    var searchStr = '<' + tagName;
+    
+    if (el.id) {
+      searchStr += ' id="' + el.id + '"';
+    } else if (el.className && typeof el.className === 'string') {
+      var firstClass = el.className.trim().split(/\\s+/)[0];
+      if (firstClass) {
+        searchStr += ' class="' + firstClass;
+      }
+    } else {
+      var text = (el.textContent || '').trim().substring(0, 25);
+      if (text) {
+        searchStr = text;
+      }
+    }
+
+    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'preview-inspect',
+        tagName: tagName,
+        id: el.id || '',
+        className: typeof el.className === 'string' ? el.className : '',
+        searchStr: searchStr
+      }));
+    }
+  }, true);
+})();
+true;
+`;
 const reduxLogger_1 = require("./customHooks/reduxLogger");
 const constants_1 = require("./constants");
 const NavigationTracker = ({ onStateChange }) => {
@@ -86,7 +146,7 @@ const NavigationTracker = ({ onStateChange }) => {
     }, [navState, onStateChange]);
     return null;
 };
-const NetworkInspector = () => {
+const NetworkInspector = ({ enabled = true }) => {
     const [isDark, setIsDark] = (0, react_1.useState)(false);
     const [reduxState, setReduxState] = (0, react_1.useState)(null);
     const [expandedReducers, setExpandedReducers] = (0, react_1.useState)({});
@@ -98,10 +158,22 @@ const NetworkInspector = () => {
     const [search, setSearch] = (0, react_1.useState)('');
     const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
     const [reduxSearch, setReduxSearch] = (0, react_1.useState)('');
-    const [apiDetailActiveTab, setApiDetailActiveTab] = (0, react_1.useState)('metadata');
+    const [reduxActiveSubTab, setReduxActiveSubTab] = (0, react_1.useState)('timeline');
+    const [apiDetailActiveTab, setApiDetailActiveTab] = (0, react_1.useState)('response');
+    (0, react_1.useEffect)(() => {
+        if (enabled && visible) {
+            react_native_1.LogBox.ignoreAllLogs(true);
+        }
+        else {
+            react_native_1.LogBox.ignoreAllLogs(false);
+        }
+        return () => {
+            react_native_1.LogBox.ignoreAllLogs(false);
+        };
+    }, [enabled, visible]);
     (0, react_1.useEffect)(() => {
         if (selected) {
-            setApiDetailActiveTab('metadata');
+            setApiDetailActiveTab('response');
             setDetailSearch('');
         }
     }, [selected]);
@@ -122,9 +194,43 @@ const NetworkInspector = () => {
     const [analyticsEvents, setAnalyticsEvents] = (0, react_1.useState)([]);
     // ─── Logs state ────────────────────────────────────────────────────────────
     const [consoleLogs, setConsoleLogs] = (0, react_1.useState)([]);
+    const [lastReadLogsCount, setLastReadLogsCount] = (0, react_1.useState)(0);
+    const [lastReadApisCount, setLastReadApisCount] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            if (activeTab === 'apis') {
+                setLastReadApisCount(logs.length);
+            }
+            if (activeTab === 'logs') {
+                setLastReadLogsCount(consoleLogs.length);
+            }
+        }
+    }, [visible]);
+    (0, react_1.useEffect)(() => {
+        if (activeTab === 'apis') {
+            setLastReadApisCount(logs.length);
+        }
+    }, [activeTab, logs.length]);
+    (0, react_1.useEffect)(() => {
+        if (activeTab === 'logs') {
+            setLastReadLogsCount(consoleLogs.length);
+        }
+    }, [activeTab, consoleLogs.length]);
+    const [maxConsoleLogs, setMaxConsoleLogs] = (0, react_1.useState)(200);
+    const [showConsoleLevels, setShowConsoleLevels] = (0, react_1.useState)({
+        info: true,
+        warn: true,
+        error: true,
+    });
     const visibleConsoleLogs = (0, react_1.useMemo)(() => {
-        return consoleLogs.filter(log => {
+        const filtered = consoleLogs.filter(log => {
             const type = log.type;
+            if (type === 'info' && !showConsoleLevels.info)
+                return false;
+            if (type === 'warn' && !showConsoleLevels.warn)
+                return false;
+            if (type === 'error' && !showConsoleLevels.error)
+                return false;
             const message = log.message || '';
             const allPrefixes = [
                 ...((logFilters_1.IGNORED_LOG_PREFIXES && logFilters_1.IGNORED_LOG_PREFIXES.info) || []),
@@ -138,13 +244,79 @@ const NetworkInspector = () => {
                 message.toLowerCase().trim().includes(prefix.toLowerCase().trim()));
             return !isIgnored;
         });
-    }, [consoleLogs]);
+        return filtered.slice(0, maxConsoleLogs);
+    }, [consoleLogs, showConsoleLevels, maxConsoleLogs]);
     const [logSearch, setLogSearch] = (0, react_1.useState)('');
     const [logFilters, setLogFilters] = (0, react_1.useState)(new Set(['user-log']));
     // ─── WebView state ─────────────────────────────────────────────────────────
     const [webViewLogs, setWebViewLogs] = (0, react_1.useState)([]);
     const [webViewNavHistory, setWebViewNavHistory] = (0, react_1.useState)([]);
     const [webViewSubTab, setWebViewSubTab] = (0, react_1.useState)('html');
+    const [inspectedElement, setInspectedElement] = (0, react_1.useState)(null);
+    // ─── Settings state ──────────────────────────────────────────────────────────
+    const [settingsPage, setSettingsPage] = (0, react_1.useState)(null);
+    const [tabVisibility, setTabVisibility] = (0, react_1.useState)({
+        insights: true,
+        apis: true,
+        logs: true,
+        analytics: true,
+        webview: true,
+        redux: true,
+    });
+    const [maxNetworkLogs, setMaxNetworkLogs] = (0, react_1.useState)(100);
+    const [webViewCaptureCssJs, setWebViewCaptureCssJs] = (0, react_1.useState)(true);
+    const [reduxAutoRefresh, setReduxAutoRefreshState] = (0, react_1.useState)(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);
+    (0, react_1.useEffect)(() => {
+        (0, reduxLogger_1.setReduxAutoRefresh)(reduxAutoRefresh);
+    }, [reduxAutoRefresh]);
+    const toggleTabVisibility = (key) => {
+        if (key === 'apis')
+            return;
+        setTabVisibility(prev => {
+            const nextVal = !prev[key];
+            const newVisibility = { ...prev, [key]: nextVal };
+            if (!nextVal && activeTab === key) {
+                setActiveTab('apis');
+            }
+            return newVisibility;
+        });
+    };
+    const navigateFromDashboard = (key) => {
+        setTabVisibility(prev => ({ ...prev, [key]: true }));
+        setActiveTab(key);
+    };
+    const getSearchTermForTab = () => {
+        if (!inspectedElement)
+            return '';
+        const { tagName, id, className, searchStr } = inspectedElement;
+        if (htmlSubTab === 'html') {
+            return searchStr;
+        }
+        if (htmlSubTab === 'css') {
+            if (className) {
+                const firstClass = className.trim().split(/\s+/)[0];
+                if (firstClass)
+                    return `.${firstClass}`;
+            }
+            if (id)
+                return `#${id}`;
+            return tagName;
+        }
+        if (htmlSubTab === 'javascript') {
+            if (id)
+                return id;
+            if (className) {
+                const firstClass = className.trim().split(/\s+/)[0];
+                if (firstClass)
+                    return firstClass;
+            }
+            return tagName;
+        }
+        return '';
+    };
     const [webViewSearch, setWebViewSearch] = (0, react_1.useState)('');
     const [webViewHtml, setWebViewHtml] = (0, react_1.useState)('');
     const [webViewCss, setWebViewCss] = (0, react_1.useState)('');
@@ -183,6 +355,8 @@ const NetworkInspector = () => {
     const [newLogIds, setNewLogIds] = (0, react_1.useState)(new Set());
     const pulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     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;
     (0, react_1.useEffect)(() => {
         const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
             react_native_1.Animated.timing(pulseAnim, {
@@ -199,6 +373,38 @@ const NetworkInspector = () => {
         loop.start();
         return () => loop.stop();
     }, [pulseAnim]);
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(activePulseAnim, {
+                toValue: 1,
+                duration: 1200,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(activePulseAnim, {
+                toValue: 0.4,
+                duration: 1200,
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [activePulseAnim]);
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(unreadPulseAnim, {
+                toValue: 1.3,
+                duration: 800,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(unreadPulseAnim, {
+                toValue: 0.8,
+                duration: 800,
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [unreadPulseAnim]);
     (0, react_1.useEffect)(() => {
         if ((logs.length > 0 || analyticsEvents.length > 0) && newLogIds.size > 0) {
             badgeAnim.setValue(0.8);
@@ -357,8 +563,8 @@ const NetworkInspector = () => {
         if (sortOrder === 'oldest') {
             result = [...result].reverse();
         }
-        return result;
-    }, [logs, search, statusFilters, methodFilters, sortOrder]);
+        return result.slice(0, maxNetworkLogs);
+    }, [logs, search, statusFilters, methodFilters, sortOrder, maxNetworkLogs]);
     const availableMethods = (0, react_1.useMemo)(() => {
         const methods = new Set();
         logs.forEach(log => {
@@ -755,6 +961,574 @@ const NetworkInspector = () => {
         toggleSectionFilter,
         toggleSectionCollapse,
     ]);
+    const renderSettings = () => {
+        if (settingsPage === 'main') {
+            const settingsTabs = [
+                { key: 'insights', label: 'Insights', icon: 'insights' },
+                { key: 'apis', label: 'APIs', icon: 'apis' },
+                { key: 'logs', label: 'Logs', icon: 'logs' },
+                { key: 'analytics', label: 'Analytics', icon: 'analytics' },
+                { key: 'webview', label: 'WebView', icon: 'webview' },
+                { key: 'redux', label: 'Redux', icon: 'redux' },
+            ];
+            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 }]}>
+              <TouchableScale_1.default onPress={() => {
+                    setSettingsPage(null);
+                    setActiveTab('apis');
+                }} hitSlop={12} style={{
+                    padding: 8,
+                    borderRadius: 10,
+                    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                    borderWidth: 1,
+                    borderColor: 'rgba(255, 255, 255, 0.08)',
+                }}>
+                <NetworkIcons_1.WhiteBackNavigation color="#FFFFFF" size={16}/>
+              </TouchableScale_1.default>
+              <react_native_1.View style={{ flex: 1 }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 17, color: '#FFFFFF' }}>Settings</react_native_1.Text>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: 'rgba(255,255,255,0.75)', marginTop: 1 }}>Manage modules and preferences</react_native_1.Text>
+              </react_native_1.View>
+              <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: 10.5, color: '#FFFFFF' }}>v1.0.11</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_linear_gradient_1.default>
+
+          <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+
+            {/* Tab list */}
+            <react_native_1.View style={{ backgroundColor: AppColors_1.AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors_1.AppColors.grayBorderSecondary, overflow: 'hidden' }}>
+              {/* Table Header */}
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 8,
+                    paddingHorizontal: 14,
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderBottomWidth: 1,
+                    borderBottomColor: AppColors_1.AppColors.dividerColor,
+                    gap: 12,
+                }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.6, flex: 1 }}>MODULE</react_native_1.Text>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.6, width: 90, textAlign: 'right', paddingRight: 4 }}>VISIBILITY</react_native_1.Text>
+              </react_native_1.View>
+
+              {settingsTabs.map((tab, idx) => {
+                    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={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingVertical: 10,
+                            paddingHorizontal: 14,
+                            borderBottomWidth: isLast ? 0 : 1,
+                            borderBottomColor: AppColors_1.AppColors.dividerColor,
+                            gap: 12,
+                        }}>
+                    {/* Icon + Label — fills remaining space */}
+                    <react_native_1.View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                      {/* Small icon tile */}
+                      <react_native_1.View style={{
+                            width: 20, height: 20, borderRadius: 6,
+                            backgroundColor: isLocked ? AppColors_1.AppColors.grayBorderSecondary : AppColors_1.AppColors.purpleShade50,
+                            borderWidth: 1,
+                            borderColor: isLocked ? AppColors_1.AppColors.dividerColor : 'rgba(104,75,155,0.2)',
+                            alignItems: 'center', justifyContent: 'center',
+                        }}>
+                        {tab.icon === 'insights' && <NetworkIcons_1.InsightsIcon color={isLocked ? AppColors_1.AppColors.grayTextWeak : AppColors_1.AppColors.purple} size={11}/>}
+                        {tab.icon === 'apis' && <NetworkIcons_1.SignalIcon color={isLocked ? AppColors_1.AppColors.grayTextWeak : AppColors_1.AppColors.purple} size={11}/>}
+                        {tab.icon === 'logs' && <NetworkIcons_1.TerminalIcon color={isLocked ? AppColors_1.AppColors.grayTextWeak : AppColors_1.AppColors.purple} size={11}/>}
+                        {tab.icon === 'analytics' && <NetworkIcons_1.AnalyticsIcon color={isLocked ? AppColors_1.AppColors.grayTextWeak : AppColors_1.AppColors.purple} size={11}/>}
+                        {tab.icon === 'webview' && <NetworkIcons_1.GlobeIcon color={isLocked ? AppColors_1.AppColors.grayTextWeak : AppColors_1.AppColors.purple} size={11}/>}
+                        {tab.icon === 'redux' && <NetworkIcons_1.TerminalIcon color={isLocked ? AppColors_1.AppColors.grayTextWeak : AppColors_1.AppColors.purple} size={11}/>}
+                      </react_native_1.View>
+                      {/* Label + Required badge */}
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 13,
+                            color: isLocked ? AppColors_1.AppColors.grayText : AppColors_1.AppColors.primaryBlack,
+                        }}>
+                        {tab.label}
+                      </react_native_1.Text>
+                      {isLocked && (<react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(104,75,155,0.08)',
+                                borderRadius: 20,
+                                paddingHorizontal: 6,
+                                paddingVertical: 2,
+                                borderWidth: 1,
+                                borderColor: 'rgba(104,75,155,0.18)',
+                                gap: 3,
+                            }}>
+                          <react_native_1.View style={{ width: 4, height: 4, borderRadius: 2, backgroundColor: AppColors_1.AppColors.purple, opacity: 0.7 }}/>
+                          <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 8.5, color: AppColors_1.AppColors.purple, letterSpacing: 0.4 }}>
+                            DEFAULT
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+
+                      {/* Settings gear icon next to label */}
+                      <TouchableScale_1.default onPress={() => setSettingsPage(tab.key)} hitSlop={8} style={{
+                            marginLeft: 4,
+                            padding: 4,
+                            borderRadius: 6,
+                            backgroundColor: AppColors_1.AppColors.purpleShade50,
+                            borderWidth: 1,
+                            borderColor: 'rgba(104,75,155,0.15)',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                        <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={10}/>
+                      </TouchableScale_1.default>
+                    </react_native_1.View>
+
+                    {/* Visibility Switch in VISIBILITY column */}
+                    <react_native_1.View style={{ width: 90, alignItems: 'flex-end', justifyContent: 'center' }}>
+                      <TouchableScale_1.default disabled={isLocked} onPress={() => toggleTabVisibility(tab.key)} style={{
+                            width: 38,
+                            height: 22,
+                            borderRadius: 11,
+                            backgroundColor: isVisible ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayBorderSecondary,
+                            padding: 2,
+                            justifyContent: 'center',
+                            alignItems: isVisible ? '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>
+                  </react_native_1.View>);
+                })}
+            </react_native_1.View>
+
+            {/* Preferences Section */}
+            <react_native_1.View style={{ marginTop: 8 }}>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.6, marginBottom: 8 }}>PREFERENCES</react_native_1.Text>
+              <react_native_1.View style={{ backgroundColor: AppColors_1.AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors_1.AppColors.grayBorderSecondary, overflow: 'hidden' }}>
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                    gap: 12,
+                }}>
+                  {/* Icon + Label */}
+                  <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',
+                }}>
+                      {isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={11}/>) : (<NetworkIcons_1.MoonIcon 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,
+                }}>
+                        Dark Theme
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  {/* Toggle Switch */}
+                  <TouchableScale_1.default onPress={() => {
+                    const newTheme = !isDark;
+                    setIsDark(newTheme);
+                    (0, styles_1.toggleGlobalTheme)(newTheme);
+                }} style={{
+                    width: 38,
+                    height: 22,
+                    borderRadius: 11,
+                    backgroundColor: isDark ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayBorderSecondary,
+                    padding: 2,
+                    justifyContent: 'center',
+                    alignItems: isDark ? '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>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.ScrollView>
+        </react_native_1.View>);
+        }
+        const goBackToMain = () => 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,
+                    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)',
+                    paddingHorizontal: 10,
+                    paddingVertical: 5,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: 'rgba(104,75,155,0.15)',
+                }}>
+            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11, color: AppColors_1.AppColors.purple }}>
+              {rightInfo}
+            </react_native_1.Text>
+          </react_native_1.View>) : null}
+      </react_native_1.View>);
+        // Helper: settings row with icon + label + optional description
+        const renderSettingRow = (opts) => (<react_native_1.View style={{
+                paddingVertical: 12,
+                borderBottomWidth: opts.isLast ? 0 : 1,
+                borderBottomColor: AppColors_1.AppColors.dividerColor,
+            }}>
+        <TouchableScale_1.default disabled={!opts.onPress} onPress={opts.onPress} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+            }}>
+          <react_native_1.View style={{
+                width: 36, height: 36, borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                borderWidth: 1, borderColor: 'rgba(104,75,155,0.18)',
+                alignItems: 'center', justifyContent: 'center',
+            }}>
+            {opts.icon}
+          </react_native_1.View>
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 14, color: AppColors_1.AppColors.primaryBlack }}>
+              {opts.label}
+            </react_native_1.Text>
+            {opts.description ? (<react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: AppColors_1.AppColors.grayText, marginTop: 1 }}>
+                {opts.description}
+              </react_native_1.Text>) : null}
+          </react_native_1.View>
+          {opts.right || null}
+        </TouchableScale_1.default>
+        {opts.picker && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 2.5,
+                    marginTop: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+            {opts.picker.options.map(opt => {
+                    const isActive = opts.picker.selectedValue === opt;
+                    return (<TouchableScale_1.default key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
+                            flex: 1,
+                            paddingVertical: 6,
+                            alignItems: 'center',
+                            borderRadius: 6,
+                            backgroundColor: isActive ? AppColors_1.AppColors.purple : 'transparent',
+                        }}>
+                  <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+                        }}>
+                    {typeof opt === 'number' && opt >= 500 && settingsPage === 'insights' ? `${opt}ms` : opt}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>);
+                })}
+          </react_native_1.View>)}
+      </react_native_1.View>);
+        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}`)}
+          <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: 'Max Request Logs',
+                    description: 'How many network requests to keep in memory',
+                    picker: {
+                        options: [50, 100, 200, 500],
+                        selectedValue: maxNetworkLogs,
+                        onSelect: setMaxNetworkLogs,
+                    },
+                    isLast: true,
+                })}
+          </react_native_1.View>
+
+          <react_native_1.View style={{ backgroundColor: AppColors_1.AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors_1.AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+            {renderSettingRow({
+                    icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                    label: 'Clear Network Logs',
+                    description: `${logs.length} requests stored`,
+                    isLast: true,
+                    onPress: () => {
+                        (0, networkLogger_1.clearNetworkLogs)();
+                        setSelected(null);
+                        react_native_1.Alert.alert('Success', 'Network logs cleared.');
+                    },
+                    right: (<react_native_1.View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11, color: AppColors_1.AppColors.errorColor }}>Clear</react_native_1.Text>
+                </react_native_1.View>),
+                })}
+          </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}`)}
+          <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.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                    label: 'Max Console Logs',
+                    description: 'How many console messages to retain',
+                    picker: {
+                        options: [100, 200, 500, 1000],
+                        selectedValue: maxConsoleLogs,
+                        onSelect: setMaxConsoleLogs,
+                    },
+                })}
+            <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 13, color: AppColors_1.AppColors.primaryBlack, paddingTop: 4 }}>Log Levels</react_native_1.Text>
+            {['info', 'warn', 'error'].map((level, li) => {
+                    const isLvlActive = showConsoleLevels[level];
+                    const levelColor = level === 'error' ? AppColors_1.AppColors.errorColor : level === 'warn' ? AppColors_1.AppColors.warningIconGold : AppColors_1.AppColors.skyBlue;
+                    return renderSettingRow({
+                        icon: <react_native_1.View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: levelColor }}/>,
+                        label: `Show ${level.charAt(0).toUpperCase() + level.slice(1)} logs`,
+                        description: level === 'info' ? 'Informational messages' : level === 'warn' ? 'Warning messages' : 'Error messages',
+                        isLast: level === 'error',
+                        onPress: () => setShowConsoleLevels(prev => ({ ...prev, [level]: !prev[level] })),
+                        right: (<react_native_1.View style={{
+                                width: 22, height: 22, borderRadius: 6,
+                                borderWidth: 2,
+                                borderColor: isLvlActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak,
+                                backgroundColor: isLvlActive ? 'rgba(104, 75, 155, 0.1)' : 'transparent',
+                                alignItems: 'center', justifyContent: 'center',
+                            }}>
+                    {isLvlActive && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>}
+                  </react_native_1.View>),
+                    });
+                })}
+          </react_native_1.View>
+
+          <react_native_1.View style={{ backgroundColor: AppColors_1.AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors_1.AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+            {renderSettingRow({
+                    icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                    label: 'Clear Console Logs',
+                    description: `${consoleLogs.length} logs stored`,
+                    isLast: true,
+                    onPress: () => {
+                        (0, consoleLogger_1.clearConsoleLogs)();
+                        react_native_1.Alert.alert('Success', 'Console logs cleared.');
+                    },
+                    right: (<react_native_1.View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11, color: AppColors_1.AppColors.errorColor }}>Clear</react_native_1.Text>
+                </react_native_1.View>),
+                })}
+          </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}`)}
+          <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.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                    label: 'Events Captured',
+                    description: `${analyticsEvents.length} analytics events stored`,
+                    isLast: true,
+                })}
+          </react_native_1.View>
+          <react_native_1.View style={{ backgroundColor: AppColors_1.AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors_1.AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+            {renderSettingRow({
+                    icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                    label: 'Clear Analytics History',
+                    description: 'Remove all captured events',
+                    isLast: true,
+                    onPress: () => {
+                        (0, analyticsLogger_1.clearAnalyticsEvents)();
+                        setSelectedEvent(null);
+                        react_native_1.Alert.alert('Success', 'Analytics events cleared.');
+                    },
+                    right: (<react_native_1.View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11, color: AppColors_1.AppColors.errorColor }}>Clear</react_native_1.Text>
+                </react_native_1.View>),
+                })}
+          </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}`)}
+          <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.GlobeIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                    label: 'Capture CSS & JavaScript',
+                    description: 'Extract stylesheet and script source from pages',
+                    onPress: () => setWebViewCaptureCssJs(prev => !prev),
+                    right: (<react_native_1.View style={{
+                            width: 22, height: 22, borderRadius: 6,
+                            borderWidth: 2,
+                            borderColor: webViewCaptureCssJs ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak,
+                            backgroundColor: webViewCaptureCssJs ? 'rgba(104, 75, 155, 0.1)' : 'transparent',
+                            alignItems: 'center', justifyContent: 'center',
+                        }}>
+                  {webViewCaptureCssJs && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>}
+                </react_native_1.View>),
+                    isLast: true,
+                })}
+          </react_native_1.View>
+          <react_native_1.View style={{ backgroundColor: AppColors_1.AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors_1.AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+            {renderSettingRow({
+                    icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                    label: 'Clear WebView Data',
+                    description: 'Remove all captured source & navigation history',
+                    isLast: true,
+                    onPress: () => {
+                        (0, webViewLogger_1.clearWebViewData)();
+                        react_native_1.Alert.alert('Success', 'WebView source history cleared.');
+                    },
+                    right: (<react_native_1.View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11, color: AppColors_1.AppColors.errorColor }}>Clear</react_native_1.Text>
+                </react_native_1.View>),
+                })}
+          </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}`)}
+          <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.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                    label: 'Auto-refresh Store',
+                    description: 'Automatically capture Redux store state updates',
+                    onPress: () => setReduxAutoRefreshState(prev => !prev),
+                    right: (<react_native_1.View style={{
+                            width: 22, height: 22, borderRadius: 6,
+                            borderWidth: 2,
+                            borderColor: reduxAutoRefresh ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak,
+                            backgroundColor: reduxAutoRefresh ? 'rgba(104, 75, 155, 0.1)' : 'transparent',
+                            alignItems: 'center', justifyContent: 'center',
+                        }}>
+                  {reduxAutoRefresh && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>}
+                </react_native_1.View>),
+                })}
+            <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+            {renderSettingRow({
+                    icon: <NetworkIcons_1.InsightsIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                    label: 'Default JSON Expand Depth',
+                    description: 'Initial depth of Redux state tree to auto-expand',
+                    picker: {
+                        options: [1, 2, 3, 5],
+                        selectedValue: reduxExpandDepth,
+                        onSelect: setReduxExpandDepth,
+                    },
+                    isLast: true,
+                })}
+          </react_native_1.View>
+
+          <react_native_1.View style={{ backgroundColor: AppColors_1.AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors_1.AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+            {renderSettingRow({
+                    icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                    label: 'Clear Redux State',
+                    description: reduxState ? 'Reset state snapshot in inspector' : 'No store snapshot stored',
+                    isLast: true,
+                    onPress: () => {
+                        setReduxState(null);
+                        react_native_1.Alert.alert('Success', 'Redux state snapshot cleared.');
+                    },
+                    right: (<react_native_1.View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11, color: AppColors_1.AppColors.errorColor }}>Clear</react_native_1.Text>
+                </react_native_1.View>),
+                })}
+          </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, 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>);
+    };
     const renderInsightsDashboard = () => {
         const apiTotal = logs.length;
         const apiErrors = logs.filter(l => (l.status != null && l.status >= 400) || l.status === 0 || l.status == null).length;
@@ -774,168 +1548,168 @@ const NetworkInspector = () => {
         const webviewTotal = webViewNavHistory.length;
         return (<react_native_1.View style={styles_1.default.dashboardContainer}>
         {/* Module 1: APIs */}
-        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
-              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>APIs & Network</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{apiTotal}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Requests</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={[styles_1.default.dashboardGridVal, apiSuccessRate < 90 && { color: AppColors_1.AppColors.warningIconGold }]}>
-                {apiSuccessRate}%
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Success Rate</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={[styles_1.default.dashboardGridVal, apiErrors > 0 && { color: AppColors_1.AppColors.errorColor }]}>
-                {apiErrors}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
+        {tabVisibility.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
+                <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>APIs & Network</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={styles_1.default.dashboardGridVal}>
-                {avgTime != null ? `${avgTime}ms` : '—'}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Avg Latency</react_native_1.Text>
+            <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={styles_1.default.dashboardGridVal}>{apiTotal}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Requests</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={[styles_1.default.dashboardGridVal, apiSuccessRate < 90 && { color: AppColors_1.AppColors.warningIconGold }]}>
+                  {apiSuccessRate}%
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Success Rate</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={[styles_1.default.dashboardGridVal, apiErrors > 0 && { color: AppColors_1.AppColors.errorColor }]}>
+                  {apiErrors}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={styles_1.default.dashboardGridVal}>
+                  {avgTime != null ? `${avgTime}ms` : '—'}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Avg Latency</react_native_1.Text>
+              </react_native_1.View>
             </react_native_1.View>
-          </react_native_1.View>
-        </TouchableScale_1.default>
+          </TouchableScale_1.default>)}
 
         {/* Module 2: Logs */}
-        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
-              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Console Logs</react_native_1.Text>
+        {tabVisibility.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
+                <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Console Logs</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{logTotal}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Logs</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#0D9488' }]}>{logInfos}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Info</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={[styles_1.default.dashboardGridVal, logWarns > 0 && { color: AppColors_1.AppColors.warningIconGold }]}>
-                {logWarns}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Warnings</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={[styles_1.default.dashboardGridVal, logErrors > 0 && { color: AppColors_1.AppColors.errorColor }]}>
-                {logErrors}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
+            <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={styles_1.default.dashboardGridVal}>{logTotal}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Logs</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#0D9488' }]}>{logInfos}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Info</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={[styles_1.default.dashboardGridVal, logWarns > 0 && { color: AppColors_1.AppColors.warningIconGold }]}>
+                  {logWarns}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Warnings</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={[styles_1.default.dashboardGridVal, logErrors > 0 && { color: AppColors_1.AppColors.errorColor }]}>
+                  {logErrors}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
+              </react_native_1.View>
             </react_native_1.View>
-          </react_native_1.View>
-        </TouchableScale_1.default>
+          </TouchableScale_1.default>)}
 
         {/* Module 3: Analytics */}
-        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
-              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Analytics Events</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{analyticsTotal}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Events</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#EA580C' }]}>{uniqueEvents}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Unique Names</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{screenViews}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Screen Views</react_native_1.Text>
+        {tabVisibility.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
+                <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Analytics Events</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={styles_1.default.dashboardGridVal}>
-                {analyticsTotal > 0 ? Math.round(analyticsTotal / Math.max(1, logs.length / 5)) : 0}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Events Ratio</react_native_1.Text>
+            <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={styles_1.default.dashboardGridVal}>{analyticsTotal}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Events</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#EA580C' }]}>{uniqueEvents}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Unique Names</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={styles_1.default.dashboardGridVal}>{screenViews}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Screen Views</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={styles_1.default.dashboardGridVal}>
+                  {analyticsTotal > 0 ? Math.round(analyticsTotal / Math.max(1, logs.length / 5)) : 0}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Events Ratio</react_native_1.Text>
+              </react_native_1.View>
             </react_native_1.View>
-          </react_native_1.View>
-        </TouchableScale_1.default>
+          </TouchableScale_1.default>)}
 
         {/* Module 4: WebView */}
-        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
-              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>WebView Captures</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{webviewTotal}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>History Size</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#16A34A' }]}>Active</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Status</react_native_1.Text>
+        {tabVisibility.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
+                <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>WebView Captures</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.View style={styles_1.default.dashboardGridItem}>
-              <react_native_1.Text numberOfLines={1} style={styles_1.default.dashboardGridVal}>
-                {webviewTotal > 0 ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...` : '—'}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Last URL</react_native_1.Text>
+            <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={styles_1.default.dashboardGridVal}>{webviewTotal}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>History Size</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#16A34A' }]}>Active</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Status</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.dashboardGridItem}>
+                <react_native_1.Text numberOfLines={1} style={styles_1.default.dashboardGridVal}>
+                  {webviewTotal > 0 ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...` : '—'}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Last URL</react_native_1.Text>
+              </react_native_1.View>
             </react_native_1.View>
-          </react_native_1.View>
-        </TouchableScale_1.default>
+          </TouchableScale_1.default>)}
 
         {/* Module 5: Redux Store */}
-        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
-              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Redux Store State</react_native_1.Text>
+        {tabVisibility.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('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}/>
+                <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Redux Store State</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
-          </react_native_1.View>
-          {reduxState ? (<react_native_1.View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
-              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 }}>
-                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.5 }}>
-                  REDUCER NAME
-                </react_native_1.Text>
-                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.5 }}>
-                  SIZE / FIELDS
+            {reduxState ? (<react_native_1.View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.5 }}>
+                    REDUCER NAME
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.5 }}>
+                    SIZE / FIELDS
+                  </react_native_1.Text>
+                </react_native_1.View>
+                {Object.keys(reduxState).map(key => {
+                        const val = reduxState[key];
+                        const fieldsCount = typeof val === 'object' && val !== null ? Object.keys(val).length : 0;
+                        const sizeStr = (0, helpers_1.getSize)(val);
+                        return (<react_native_1.View key={key} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 2 }}>
+                      <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 12, color: AppColors_1.AppColors.grayTextStrong }}>
+                        {key}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: AppColors_1.AppColors.grayTextWeak }}>
+                        {sizeStr} ({fieldsCount} fields)
+                      </react_native_1.Text>
+                    </react_native_1.View>);
+                    })}
+              </react_native_1.View>) : (<react_native_1.View style={{ padding: 12, alignItems: 'center' }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 12, color: AppColors_1.AppColors.grayTextWeak }}>
+                  No connected Redux store.
                 </react_native_1.Text>
-              </react_native_1.View>
-              {Object.keys(reduxState).map(key => {
-                    const val = reduxState[key];
-                    const fieldsCount = typeof val === 'object' && val !== null ? Object.keys(val).length : 0;
-                    const sizeStr = (0, helpers_1.getSize)(val);
-                    return (<react_native_1.View key={key} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 2 }}>
-                    <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 12, color: AppColors_1.AppColors.grayTextStrong }}>
-                      {key}
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: AppColors_1.AppColors.grayTextWeak }}>
-                      {sizeStr} ({fieldsCount} fields)
-                    </react_native_1.Text>
-                  </react_native_1.View>);
-                })}
-            </react_native_1.View>) : (<react_native_1.View style={{ padding: 12, alignItems: 'center' }}>
-              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 12, color: AppColors_1.AppColors.grayTextWeak }}>
-                No connected Redux store.
-              </react_native_1.Text>
-            </react_native_1.View>)}
-        </TouchableScale_1.default>
+              </react_native_1.View>)}
+          </TouchableScale_1.default>)}
       </react_native_1.View>);
     };
     const renderReduxTab = () => {
@@ -957,43 +1731,104 @@ const NetworkInspector = () => {
           <react_native_1.Text style={styles_1.default.emptySub}>Connected store state is empty.</react_native_1.Text>
         </react_native_1.View>);
         }
+        // Build hierarchical tree: Store -> Reducers -> Action -> Data
+        const lastActionMap = (0, reduxLogger_1.getLastActionForReducer)();
+        const actionHistory = (0, reduxLogger_1.getActionHistory)();
         return (<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
+        {/* Top Summary Card */}
         <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 14,
+                marginHorizontal: 16,
+                marginTop: 12,
+                marginBottom: 12,
                 flexDirection: 'row',
                 alignItems: 'center',
-                justifyContent: 'space-between',
-                paddingHorizontal: 16,
-                paddingVertical: 12,
-                borderBottomWidth: 1,
-                borderBottomColor: AppColors_1.AppColors.dividerColor,
-                backgroundColor: AppColors_1.AppColors.primaryLight,
+                gap: 12,
             }}>
-          <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                color: AppColors_1.AppColors.grayTextStrong,
-                fontSize: 12,
-                textTransform: 'uppercase',
-                letterSpacing: 0.6,
+          <react_native_1.View style={{
+                width: 44,
+                height: 44,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
             }}>
-            Redux Store ({reducerKeys.length} Reducers)
-          </react_native_1.Text>
+            <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={20}/>
+          </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 }}>
+              Redux Store Snapshot
+            </react_native_1.Text>
+            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: AppColors_1.AppColors.grayText, marginTop: 2 }}>
+              Total size: {(0, helpers_1.getSize)(reduxState)} • {reducerKeys.length} Reducers
+            </react_native_1.Text>
+          </react_native_1.View>
           <CopyButton_1.default value={() => reduxState} label="Overall Store"/>
         </react_native_1.View>
 
+        {/* Tab View Selection Segments */}
+        <react_native_1.View style={{
+                flexDirection: 'row',
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderRadius: 10,
+                padding: 3,
+                marginHorizontal: 16,
+                marginBottom: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            }}>
+          <react_native_1.TouchableOpacity onPress={() => setReduxActiveSubTab('timeline')} style={{
+                flex: 1,
+                paddingVertical: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 8,
+                backgroundColor: reduxActiveSubTab === 'timeline' ? AppColors_1.AppColors.purple : 'transparent',
+            }}>
+            <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                color: reduxActiveSubTab === 'timeline' ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+            }}>
+              ⚡ Action Timeline
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+          <react_native_1.TouchableOpacity onPress={() => setReduxActiveSubTab('tree')} style={{
+                flex: 1,
+                paddingVertical: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 8,
+                backgroundColor: reduxActiveSubTab === 'tree' ? AppColors_1.AppColors.purple : 'transparent',
+            }}>
+            <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                color: reduxActiveSubTab === 'tree' ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+            }}>
+              🏪 Store Tree
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
+        {/* Search Bar */}
         <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 backgroundColor: AppColors_1.AppColors.grayBackground,
                 borderRadius: 8,
                 marginHorizontal: 16,
-                marginTop: 12,
-                marginBottom: 8,
+                marginBottom: 12,
                 paddingHorizontal: 10,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.dividerColor,
                 height: 36,
             }}>
-          <react_native_1.TextInput placeholder="Search Redux keys or values..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
+          <react_native_1.TextInput placeholder={reduxActiveSubTab === 'timeline' ? "Search actions or payloads..." : "Search Redux keys or values..."} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
                 flex: 1,
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: 12,
@@ -1005,66 +1840,24 @@ const NetworkInspector = () => {
             </react_native_1.Pressable>)}
         </react_native_1.View>
 
-        {reducerKeys.map(key => {
-                const isExpanded = expandedReducers[key];
-                const val = reduxState[key];
-                return (<react_native_1.View key={key} style={{
-                        backgroundColor: AppColors_1.AppColors.primaryLight,
-                        borderBottomWidth: 1,
-                        borderBottomColor: AppColors_1.AppColors.dividerColor,
-                    }}>
-              <react_native_1.Pressable onPress={() => {
-                        setExpandedReducers(prev => ({
-                            ...prev,
-                            [key]: !prev[key],
-                        }));
-                    }} style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        paddingHorizontal: 16,
-                        paddingVertical: 12,
-                    }}>
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1 }}>
-                  <react_native_1.Animated.View style={{ transform: [{ rotate: isExpanded ? '0deg' : '-90deg' }] }}>
-                    <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                  </react_native_1.Animated.View>
-                  <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 13,
-                        color: AppColors_1.AppColors.purple,
-                    }}>
-                    {key}
-                  </react_native_1.Text>
-                  <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interRegular,
-                        fontSize: 11,
-                        color: AppColors_1.AppColors.grayTextWeak,
-                    }}>
-                    ({typeof val === 'object' && val !== null ? `${Object.keys(val).length} fields` : typeof val})
-                  </react_native_1.Text>
-                </react_native_1.View>
-                <CopyButton_1.default value={() => val} label={`${key} Reducer`}/>
-              </react_native_1.Pressable>
-
-              {isExpanded && (<react_native_1.View style={{
-                            backgroundColor: AppColors_1.AppColors.grayBackground,
-                            paddingHorizontal: 12,
-                            paddingVertical: 8,
-                            borderTopWidth: 1,
-                            borderTopColor: AppColors_1.AppColors.dividerColor,
-                        }}>
-                  <JsonViewer_1.default data={val} search={reduxSearch}/>
-                </react_native_1.View>)}
-            </react_native_1.View>);
-            })}
+        {/* Main Content Card */}
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                marginHorizontal: 16,
+                padding: 12,
+            }}>
+          {reduxActiveSubTab === 'timeline' ? (<ReduxTreeView_1.ReduxActionTimeline history={actionHistory} onClear={reduxLogger_1.clearActionHistory} search={reduxSearch}/>) : (<ReduxTreeView_1.ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>)}
+        </react_native_1.View>
       </react_native_1.ScrollView>);
     };
     return (<>
       {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
       <TouchableScale_1.default style={styles_1.default.fabWrapper} onPress={() => setVisible(true)} hitSlop={10}>
         <react_native_1.Animated.View style={[styles_1.default.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
-        <NetworkIcons_1.BrandCircleIcon size={56}/>
+        <NetworkIcons_1.BrandCircleIcon size={62}/>
         {(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,
@@ -1109,7 +1902,33 @@ const NetworkInspector = () => {
                       <NetworkIcons_1.WhiteBackNavigation />
                     </TouchableScale_1.default>
 
-                    {selected == null && selectedEvent == null ? (<react_native_1.Text style={styles_1.default.headerTitle}>RN-InApp-Inspector</react_native_1.Text>) : null}
+                    {selected == null && selectedEvent == null ? (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 14, flex: 1 }}>
+                        <react_native_1.View style={{
+                    width: 42,
+                    height: 42,
+                    borderRadius: 10,
+                    backgroundColor: 'rgba(255,255,255,0.13)',
+                    borderWidth: 1.5,
+                    borderColor: 'rgba(255,255,255,0.25)',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    shadowColor: '#000',
+                    shadowOpacity: 0.15,
+                    shadowRadius: 4,
+                    shadowOffset: { width: 0, height: 2 },
+                }}>
+                          <NetworkIcons_1.BrandSquareIcon size={36}/>
+                        </react_native_1.View>
+                        <react_native_1.View style={{ gap: 3 }}>
+                          <react_native_1.Text style={[styles_1.default.headerTitle, { fontSize: 17, letterSpacing: 0.2 }]}>RN InApp Inspector</react_native_1.Text>
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                            <react_native_1.Animated.View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#4ADE80', opacity: activePulseAnim }}/>
+                            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 10, color: 'rgba(255,255,255,0.78)', letterSpacing: 0.3 }}>
+                              Active • {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'} (v1.0.11)
+                            </react_native_1.Text>
+                          </react_native_1.View>
+                        </react_native_1.View>
+                      </react_native_1.View>) : null}
                   </react_native_1.View>
 
                   <react_native_1.View style={styles_1.default.headerCenter}>
@@ -1185,15 +2004,11 @@ const NetworkInspector = () => {
                   </react_native_1.View>
 
                   <react_native_1.View style={styles_1.default.headerRight}>
-                    <TouchableScale_1.default onPress={() => {
-                const newTheme = !isDark;
-                setIsDark(newTheme);
-                (0, styles_1.toggleGlobalTheme)(newTheme);
-            }} hitSlop={15} style={[styles_1.default.closeButtonCircle, { marginRight: 8 }]}>
-                      {isDark ? (<NetworkIcons_1.SunIcon color="#FFFFFF" size={16}/>) : (<NetworkIcons_1.MoonIcon color="#FFFFFF" size={16}/>)}
-                    </TouchableScale_1.default>
+                    {selected == null && selectedEvent == null && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[styles_1.default.closeButtonSquare, { marginRight: 8, backgroundColor: 'rgba(255,255,255,0.15)' }]}>
+                        <NetworkIcons_1.SettingsIcon color="#FFFFFF" size={16}/>
+                      </TouchableScale_1.default>)}
 
-                    <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonCircle}>
+                    <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonSquare}>
                       <NetworkIcons_1.CloseWhite size={16}/>
                     </TouchableScale_1.default>
                   </react_native_1.View>
@@ -1201,7 +2016,7 @@ const NetworkInspector = () => {
               </react_native_linear_gradient_1.default>
 
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-              {selected == null && selectedEvent == null ? (<react_native_1.View style={styles_1.default.tabBarContainer}>
+              {selected == null && selectedEvent == null && settingsPage === null ? (<react_native_1.View style={styles_1.default.tabBarContainer}>
                   <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
                     {[
                     { key: 'insights', label: 'Insights', count: 0, icon: 'insights' },
@@ -1210,10 +2025,12 @@ const NetworkInspector = () => {
                     { key: 'analytics', label: 'Analytics', count: analyticsEvents.length, icon: 'analytics' },
                     { key: 'webview', label: 'WebView', count: webViewNavHistory.length, icon: 'webview' },
                     { key: 'redux', label: 'Redux', count: 0, icon: 'redux' },
-                ].map(tab => {
+                ].filter(tab => tabVisibility[tab.key]).map(tab => {
                     const isActive = activeTab === tab.key;
                     const iconColor = isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText;
                     const countLabel = tab.count > 9 ? '9+' : String(tab.count);
+                    const hasUnreadApis = activeTab !== 'apis' && logs.length > lastReadApisCount;
+                    const hasUnreadLogs = activeTab !== 'logs' && consoleLogs.length > lastReadLogsCount;
                     return (<TouchableScale_1.default key={tab.key} onPress={() => {
                             requestAnimationFrame(() => {
                                 setActiveTab(tab.key);
@@ -1235,6 +2052,15 @@ const NetworkInspector = () => {
                         ]}>
                               {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
                             </react_native_1.Text>
+                            {((tab.key === 'apis' && hasUnreadApis) || (tab.key === 'logs' && hasUnreadLogs)) && (<react_native_1.Animated.View style={{
+                                width: 6,
+                                height: 6,
+                                borderRadius: 3,
+                                backgroundColor: AppColors_1.AppColors.errorColor,
+                                marginLeft: 4,
+                                alignSelf: 'center',
+                                transform: [{ scale: unreadPulseAnim }],
+                            }}/>)}
                           </react_native_1.View>
                         </TouchableScale_1.default>);
                 })}
@@ -1857,156 +2683,250 @@ const NetworkInspector = () => {
                     styles_1.default.listContent,
                     filteredConsoleLogs.length === 0 && { flexGrow: 1 },
                 ]} keyboardShouldPersistTaps="handled"/>
-                </react_native_1.View>) : activeTab === 'webview' ? (<react_native_1.View style={{ flex: 1 }}>
+                </react_native_1.View>) : activeTab === 'webview' ? (webViewNavHistory.length === 0 ? (<react_native_1.View style={styles_1.default.emptyContainer}>
+                    <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                      <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.emptyTitle}>No WebView Activity</react_native_1.Text>
+                    <react_native_1.Text style={styles_1.default.emptySub}>
+                      Load a webpage within a connected WebView component to inspect pages, page source, and console logs.
+                    </react_native_1.Text>
+                  </react_native_1.View>) : (<react_native_1.View style={{ flex: 1 }}>
+                    {/* ─── Current Page Address Bar (Now on top) ─── */}
+                  {(() => {
+                    const currentUrl = webViewNavHistory[0]?.url;
+                    if (!currentUrl)
+                        return null;
+                    return (<react_native_1.View style={{
+                            paddingHorizontal: 12,
+                            paddingTop: 6,
+                            paddingBottom: 6,
+                            backgroundColor: AppColors_1.AppColors.primaryLight,
+                            borderBottomWidth: 1,
+                            borderBottomColor: AppColors_1.AppColors.dividerColor,
+                        }}>
+                        <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            backgroundColor: AppColors_1.AppColors.grayBackground,
+                            borderRadius: 8,
+                            borderWidth: 1.5,
+                            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                            paddingHorizontal: 10,
+                            paddingVertical: 5,
+                            gap: 8,
+                        }}>
+                          {/* Left: Lock and HTTPS label */}
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                            <react_native_1.Text style={{ fontSize: 11 }}>🔒</react_native_1.Text>
+                            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 9.5, color: AppColors_1.AppColors.greenColor, letterSpacing: 0.5 }}>HTTPS</react_native_1.Text>
+                          </react_native_1.View>
+                          <react_native_1.View style={{ width: 1.5, height: 12, backgroundColor: AppColors_1.AppColors.grayBorderSecondary }}/>
+
+                          {/* Middle: URL text (Address style) */}
+                          <react_native_1.View style={{ flex: 1 }}>
+                            <HighlightText_1.default text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
+                            fontFamily: AppFonts_1.AppFonts.interMedium,
+                            fontSize: 11.5,
+                            color: AppColors_1.AppColors.primaryBlack,
+                        }} highlightStyle={styles_1.default.highlight} detectLinks={false}/>
+                          </react_native_1.View>
+
+                          {/* Right: Copy Button */}
+                          <CopyButton_1.default value={currentUrl} label="URL"/>
+
+                          {/* Right: Globe Icon button to open browser */}
+                          <TouchableScale_1.default onPress={() => react_native_1.Linking.openURL(currentUrl)} hitSlop={8} style={{
+                            width: 26,
+                            height: 26,
+                            borderRadius: 13,
+                            backgroundColor: AppColors_1.AppColors.grayBackground,
+                            borderWidth: 1,
+                            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                            <NetworkIcons_1.GlobeIcon size={11} color={AppColors_1.AppColors.purple}/>
+                          </TouchableScale_1.default>
+                        </react_native_1.View>
+                      </react_native_1.View>);
+                })()}
+
+                  {/* ─── WebView Sub-Tabs (Now below Address Bar) ─── */}
                   <react_native_1.View style={{
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
                     borderBottomWidth: 1,
                     borderBottomColor: AppColors_1.AppColors.dividerColor,
-                    paddingBottom: 6,
+                    paddingVertical: 6,
                 }}>
-                    {/* ─── WebView Sub-Tabs ─────────────────────────────────────── */}
-                    <react_native_1.View style={{
-                    marginHorizontal: 16,
-                    marginTop: webViewSubTab === 'navigation' ? 12 : 4,
-                    marginBottom: 8,
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 8,
-                    padding: 4,
+                    <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    paddingHorizontal: 12,
                     flexDirection: 'row',
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    gap: 8,
                 }}>
+                      {/* Sub-tab 1: Preview */}
                       <react_native_1.Pressable style={[
                     {
-                        flex: 1,
-                        paddingVertical: 8,
-                        borderRadius: 6,
+                        paddingVertical: 6,
+                        paddingHorizontal: 14,
+                        borderRadius: 8,
                         alignItems: 'center',
+                        flexDirection: 'row',
+                        gap: 6,
+                        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                        borderWidth: 1,
+                        borderColor: 'transparent',
                     },
-                    webViewSubTab === 'html' && {
-                        backgroundColor: AppColors_1.AppColors.primaryLight,
-                        shadowColor: '#000',
-                        shadowOpacity: 0.1,
-                        shadowRadius: 3,
-                        shadowOffset: { width: 0, height: 1 },
-                        elevation: 2,
+                    webViewSubTab === 'preview' && {
+                        backgroundColor: AppColors_1.AppColors.purple,
+                        borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('html')}>
-                        <react_native_1.Text style={[
+                ]} onPress={() => setWebViewSubTab('preview')}>
+                        <NetworkIcons_1.EyeIcon color={webViewSubTab === 'preview' ? '#FFFFFF' : AppColors_1.AppColors.grayTextWeak} size={13}/>
+                        <react_native_1.Text style={{
+                    fontFamily: webViewSubTab === 'preview' ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
+                    fontSize: 12,
+                    color: webViewSubTab === 'preview' ? '#FFFFFF' : AppColors_1.AppColors.grayTextStrong,
+                }}>
+                          Preview
+                        </react_native_1.Text>
+                      </react_native_1.Pressable>
+
+                      {/* Sub-tab 2: Page Source */}
+                      <react_native_1.Pressable style={[
                     {
-                        fontFamily: AppFonts_1.AppFonts.interMedium,
-                        fontSize: 12,
-                        color: AppColors_1.AppColors.grayTextStrong,
+                        paddingVertical: 6,
+                        paddingHorizontal: 14,
+                        borderRadius: 8,
+                        alignItems: 'center',
+                        flexDirection: 'row',
+                        gap: 6,
+                        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                        borderWidth: 1,
+                        borderColor: 'transparent',
                     },
                     webViewSubTab === 'html' && {
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        color: '#475569',
+                        backgroundColor: AppColors_1.AppColors.purple,
+                        borderColor: AppColors_1.AppColors.purple,
                     },
-                ]}>
-                          HTML Source
+                ]} onPress={() => setWebViewSubTab('html')}>
+                        <NetworkIcons_1.HtmlIcon color={webViewSubTab === 'html' ? '#FFFFFF' : AppColors_1.AppColors.grayTextWeak} size={13}/>
+                        <react_native_1.Text style={{
+                    fontFamily: webViewSubTab === 'html' ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
+                    fontSize: 12,
+                    color: webViewSubTab === 'html' ? '#FFFFFF' : AppColors_1.AppColors.grayTextStrong,
+                }}>
+                          Page Source
                         </react_native_1.Text>
                       </react_native_1.Pressable>
+
+                      {/* Sub-tab 3: History */}
                       <react_native_1.Pressable style={[
                     {
-                        flex: 1,
-                        paddingVertical: 8,
-                        borderRadius: 6,
+                        paddingVertical: 6,
+                        paddingHorizontal: 14,
+                        borderRadius: 8,
                         alignItems: 'center',
+                        flexDirection: 'row',
+                        gap: 6,
+                        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                        borderWidth: 1,
+                        borderColor: 'transparent',
                     },
                     webViewSubTab === 'navigation' && {
-                        backgroundColor: AppColors_1.AppColors.primaryLight,
-                        shadowColor: '#000',
-                        shadowOpacity: 0.1,
-                        shadowRadius: 3,
-                        shadowOffset: { width: 0, height: 1 },
-                        elevation: 2,
+                        backgroundColor: AppColors_1.AppColors.purple,
+                        borderColor: AppColors_1.AppColors.purple,
                     },
                 ]} onPress={() => setWebViewSubTab('navigation')}>
-                        <react_native_1.Text style={[
+                        <NetworkIcons_1.ClockIcon color={webViewSubTab === 'navigation' ? '#FFFFFF' : AppColors_1.AppColors.grayTextWeak} size={13}/>
+                        <react_native_1.Text style={{
+                    fontFamily: webViewSubTab === 'navigation' ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
+                    fontSize: 12,
+                    color: webViewSubTab === 'navigation' ? '#FFFFFF' : AppColors_1.AppColors.grayTextStrong,
+                }}>
+                          History ({webViewNavHistory.length})
+                        </react_native_1.Text>
+                      </react_native_1.Pressable>
+
+                      {/* Sub-tab 4: Console */}
+                      <react_native_1.Pressable style={[
                     {
-                        fontFamily: AppFonts_1.AppFonts.interMedium,
-                        fontSize: 12,
-                        color: AppColors_1.AppColors.grayTextStrong,
+                        paddingVertical: 6,
+                        paddingHorizontal: 14,
+                        borderRadius: 8,
+                        alignItems: 'center',
+                        flexDirection: 'row',
+                        gap: 6,
+                        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                        borderWidth: 1,
+                        borderColor: 'transparent',
                     },
-                    webViewSubTab === 'navigation' && {
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        color: '#475569',
+                    webViewSubTab === 'console' && {
+                        backgroundColor: AppColors_1.AppColors.purple,
+                        borderColor: AppColors_1.AppColors.purple,
                     },
-                ]}>
-                          Nav History ({webViewNavHistory.length})
+                ]} onPress={() => setWebViewSubTab('console')}>
+                        <NetworkIcons_1.TerminalIcon color={webViewSubTab === 'console' ? '#FFFFFF' : AppColors_1.AppColors.grayTextWeak} size={13}/>
+                        <react_native_1.Text style={{
+                    fontFamily: webViewSubTab === 'console' ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
+                    fontSize: 12,
+                    color: webViewSubTab === 'console' ? '#FFFFFF' : AppColors_1.AppColors.grayTextStrong,
+                }}>
+                          Console ({webViewLogs.length})
                         </react_native_1.Text>
                       </react_native_1.Pressable>
-                    </react_native_1.View>
+                    </react_native_1.ScrollView>
                   </react_native_1.View>
 
-                  {/* ─── Current Page Address Bar (Always visible at the top) ─── */}
-                  {(() => {
-                    const currentUrl = webViewNavHistory[0]?.url;
-                    if (!currentUrl)
-                        return null;
-                    return (<react_native_1.View style={{
-                            paddingHorizontal: 16,
-                            paddingTop: 10,
-                            paddingBottom: 10,
-                            backgroundColor: '#FFFFFF',
-                            borderBottomWidth: 1,
-                            borderBottomColor: AppColors_1.AppColors.dividerColor,
-                        }}>
-                        <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 10,
-                            color: '#64748B',
-                            textTransform: 'uppercase',
-                            letterSpacing: 0.5,
-                            marginBottom: 6,
-                        }}>
-                          Currently debugging for URL
-                        </react_native_1.Text>
-                        <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            backgroundColor: '#F1F5F9',
-                            borderRadius: 20,
-                            borderWidth: 1,
-                            borderColor: '#E2E8F0',
-                            paddingHorizontal: 12,
-                            paddingVertical: 6,
-                            gap: 8,
-                        }}>
-                          {/* Left: Clickable Globe Icon to open browser */}
-                          <TouchableScale_1.default onPress={() => react_native_1.Linking.openURL(currentUrl)} hitSlop={8} style={{
-                            width: 24,
-                            height: 24,
-                            borderRadius: 12,
-                            backgroundColor: '#E2E8F0',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }} children={<NetworkIcons_1.GlobeIcon size={12} color="#475569"/>}/>
-
-                          {/* Middle: URL text (Address style) */}
-                          <react_native_1.View style={{ flex: 1 }}>
-                            <HighlightText_1.default text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
-                            fontFamily: AppFonts_1.AppFonts.interMedium,
-                            fontSize: 11,
-                            color: '#475569',
-                        }} highlightStyle={styles_1.default.highlight} detectLinks={false}/>
-                          </react_native_1.View>
-
-                          {/* Right: Copy Button */}
-                          <CopyButton_1.default value={currentUrl} label="URL"/>
-                        </react_native_1.View>
-                      </react_native_1.View>);
-                })()}
-
                   {webViewSubTab === 'html' ? (<react_native_1.View style={{ flex: 1 }}>
                       {webViewHtml || webViewCss || webViewJs ? (<react_native_1.View style={{ flex: 1 }}>
+                          {/* Clear Inspect Banner */}
+                          {inspectedElement && (<react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                                paddingHorizontal: 12,
+                                paddingVertical: 6,
+                                borderBottomWidth: 1,
+                                borderBottomColor: AppColors_1.AppColors.dividerColor,
+                            }}>
+                              <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interMedium,
+                                fontSize: 11.5,
+                                color: AppColors_1.AppColors.purple,
+                                flex: 1,
+                            }}>
+                                Inspecting element:{' '}
+                                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold }}>
+                                  &lt;{inspectedElement.tagName}
+                                  {inspectedElement.id ? ` id="${inspectedElement.id}"` : ''}
+                                  {inspectedElement.className ? ` class="${inspectedElement.className.trim().split(/\s+/)[0]}"` : ''}
+                                  &gt;
+                                </react_native_1.Text>
+                              </react_native_1.Text>
+                              <react_native_1.Pressable onPress={() => setInspectedElement(null)} style={{
+                                paddingHorizontal: 8,
+                                paddingVertical: 4,
+                            }}>
+                                <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 11,
+                                color: AppColors_1.AppColors.purple,
+                            }}>
+                                  Clear Inspect
+                                </react_native_1.Text>
+                              </react_native_1.Pressable>
+                            </react_native_1.View>)}
+
                           {/* Inner sub-tabs inside HTML source view */}
                           <react_native_1.View style={{
                             flexDirection: 'row',
                             borderBottomWidth: 1,
-                            borderBottomColor: '#E2E8F0',
-                            backgroundColor: '#FFFFFF',
-                            paddingHorizontal: 16,
+                            borderBottomColor: AppColors_1.AppColors.dividerColor,
+                            backgroundColor: AppColors_1.AppColors.primaryLight,
+                            paddingHorizontal: 12,
+                            gap: 12,
                         }}>
                             {['html', 'css', 'javascript'].map(tab => {
                             const active = htmlSubTab === tab;
@@ -2014,23 +2934,34 @@ const NetworkInspector = () => {
                                 ? 'HTML'
                                 : tab === 'css'
                                     ? 'CSS'
-                                    : 'Javascript';
+                                    : 'JavaScript';
+                            const activeColor = tab === 'html'
+                                ? '#EA580C' // Orange
+                                : tab === 'css'
+                                    ? '#2563EB' // Blue
+                                    : '#D97706'; // Dark Yellow/Amber
                             return (<react_native_1.Pressable key={tab} onPress={() => setHtmlSubTab(tab)} style={{
-                                    paddingVertical: 10,
-                                    marginRight: 16,
+                                    paddingVertical: 8,
+                                    paddingHorizontal: 4,
                                     borderBottomWidth: 2,
                                     borderBottomColor: active
-                                        ? AppColors_1.AppColors.purple
+                                        ? activeColor
                                         : 'transparent',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 4,
                                 }}>
+                                    {tab === 'html' && (<NetworkIcons_1.HtmlIcon color={active ? activeColor : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
+                                    {tab === 'css' && (<NetworkIcons_1.CssIcon color={active ? activeColor : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
+                                    {tab === 'javascript' && (<NetworkIcons_1.JsIcon color={active ? activeColor : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
                                     <react_native_1.Text style={{
                                     fontFamily: active
                                         ? AppFonts_1.AppFonts.interBold
                                         : AppFonts_1.AppFonts.interMedium,
-                                    fontSize: 12,
+                                    fontSize: 13,
                                     color: active
-                                        ? AppColors_1.AppColors.purple
-                                        : '#64748B',
+                                        ? activeColor
+                                        : AppColors_1.AppColors.grayTextWeak,
                                 }}>
                                       {label}
                                     </react_native_1.Text>
@@ -2040,21 +2971,21 @@ const NetworkInspector = () => {
                           <react_native_1.View style={{ flex: 1, padding: 12 }}>
                             {!isHtmlTabReady ? (<react_native_1.View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
                                 <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
-                              </react_native_1.View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet_1.default code={webViewHtml} language="html"/>) : (<react_native_1.Text style={{
+                              </react_native_1.View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet_1.default code={webViewHtml} language="html" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
                                 fontFamily: 'monospace',
                                 fontSize: 11,
                                 color: '#94A3B8',
                                 padding: 12,
                             }}>
                                   No HTML content captured.
-                                </react_native_1.Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet_1.default code={webViewCss} language="css"/>) : (<react_native_1.Text style={{
+                                </react_native_1.Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet_1.default code={webViewCss} language="css" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
                                 fontFamily: 'monospace',
                                 fontSize: 11,
                                 color: '#94A3B8',
                                 padding: 12,
                             }}>
                                   No CSS styles detected on this page.
-                                </react_native_1.Text>)) : webViewJs ? (<CodeSnippet_1.default code={webViewJs} language="javascript"/>) : (<react_native_1.Text style={{
+                                </react_native_1.Text>)) : webViewJs ? (<CodeSnippet_1.default code={webViewJs} language="javascript" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
                                 fontFamily: 'monospace',
                                 fontSize: 11,
                                 color: '#94A3B8',
@@ -2075,7 +3006,7 @@ const NetworkInspector = () => {
                             or Javascript source.
                           </react_native_1.Text>
                         </react_native_1.View>)}
-                    </react_native_1.View>) : (<react_native_1.FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} ListHeaderComponent={<react_native_1.View style={{
+                    </react_native_1.View>) : webViewSubTab === 'navigation' ? (<react_native_1.FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} ListHeaderComponent={<react_native_1.View style={{
                             paddingHorizontal: 16,
                             paddingTop: 12,
                             paddingBottom: 8,
@@ -2090,191 +3021,304 @@ const NetworkInspector = () => {
                             return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
                         };
                         return (<react_native_1.View style={{
-                                paddingHorizontal: 16,
-                                paddingVertical: 8,
-                                backgroundColor: isLatest ? '#F1F5F9' : '#FFFFFF',
-                                borderBottomWidth: 1,
-                                borderBottomColor: '#E2E8F0',
+                                marginHorizontal: 16,
+                                marginVertical: 6,
+                                borderRadius: 12,
+                                borderWidth: 1,
+                                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                                backgroundColor: isLatest ? AppColors_1.AppColors.purpleShade50 : AppColors_1.AppColors.primaryLight,
+                                padding: 14,
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 justifyContent: 'space-between',
                                 gap: 12,
+                                shadowColor: '#000000',
+                                shadowOffset: { width: 0, height: 2 },
+                                shadowOpacity: isDark ? 0.2 : 0.04,
+                                shadowRadius: 4,
+                                elevation: 2,
                             }}>
-                            <react_native_1.View style={{ flex: 1, gap: 2 }}>
+                            <react_native_1.View style={{ flex: 1, gap: 8 }}>
+                              {/* Top row: Title and Badge */}
                               <react_native_1.View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
-                                gap: 6,
+                                gap: 8,
                                 flexWrap: 'wrap',
                             }}>
                                 <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={{
                                 fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 13,
-                                color: '#334155',
+                                fontSize: 14,
+                                color: AppColors_1.AppColors.primaryBlack,
                                 flexShrink: 1,
                             }}>
                                   {item.title || 'Untitled Page'}
                                 </react_native_1.Text>
                                 {isLatest && (<react_native_1.View style={{
-                                    backgroundColor: '#E2E8F0',
-                                    paddingHorizontal: 6,
-                                    paddingVertical: 2,
-                                    borderRadius: 4,
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 4,
+                                    backgroundColor: AppColors_1.AppColors.greenStatus,
+                                    paddingHorizontal: 8,
+                                    paddingVertical: 3,
+                                    borderRadius: 12,
                                 }}>
+                                    <react_native_1.View style={{
+                                    width: 6,
+                                    height: 6,
+                                    borderRadius: 3,
+                                    backgroundColor: AppColors_1.AppColors.greenBaggageText,
+                                }}/>
                                     <react_native_1.Text style={{
                                     fontFamily: AppFonts_1.AppFonts.interBold,
-                                    fontSize: 9,
-                                    color: '#475569',
+                                    fontSize: 9.5,
+                                    color: AppColors_1.AppColors.greenBaggageText,
                                 }}>
                                       Active
                                     </react_native_1.Text>
                                   </react_native_1.View>)}
                               </react_native_1.View>
-                              <HighlightText_1.default text={item.url} search={webViewSearch} numberOfLines={3} ellipsizeMode="tail" style={{
+
+                              {/* Middle row: URL with Globe Icon */}
+                              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                                <NetworkIcons_1.GlobeIcon size={12} color={AppColors_1.AppColors.grayTextWeak}/>
+                                <HighlightText_1.default text={item.url} search={webViewSearch} numberOfLines={2} ellipsizeMode="tail" style={{
                                 fontFamily: AppFonts_1.AppFonts.interRegular,
-                                fontSize: 11,
-                                color: '#64748B',
-                                flexShrink: 1,
+                                fontSize: 12,
+                                color: AppColors_1.AppColors.grayText,
+                                flex: 1,
                             }} highlightStyle={styles_1.default.highlight} detectLinks={true}/>
-                              <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interRegular,
-                                fontSize: 10,
-                                color: '#94A3B8',
-                            }}>
-                                {formatNavTime(item.timestamp)}
-                              </react_native_1.Text>
+                              </react_native_1.View>
+
+                              {/* Bottom row: Time */}
+                              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                                <NetworkIcons_1.ClockIcon size={11} color={AppColors_1.AppColors.grayTextWeak}/>
+                                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: AppColors_1.AppColors.grayTextWeak }}>
+                                  {formatNavTime(item.timestamp)}
+                                </react_native_1.Text>
+                              </react_native_1.View>
                             </react_native_1.View>
-                            <CopyButton_1.default value={item.url} label="Copy URL"/>
+                            <CopyButton_1.default value={item.url} label="URL"/>
                           </react_native_1.View>);
-                    }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={false}/>} contentContainerStyle={[
+                    }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={webViewSearch.length > 0}/>} contentContainerStyle={[
                         styles_1.default.listContent,
                         filteredNavHistory.length === 0 && { flexGrow: 1 },
-                    ]} keyboardShouldPersistTaps="handled"/>)}
-                </react_native_1.View>) : activeTab === 'redux' ? (renderReduxTab()) : (<react_native_1.View style={{ flex: 1 }}>
+                    ]} keyboardShouldPersistTaps="handled"/>) : webViewSubTab === 'console' ? (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+                      {webViewLogs.length > 0 ? (<react_native_1.FlatList data={webViewLogs} keyExtractor={(item) => String(item.id)} style={{ flex: 1 }} ListHeaderComponent={<react_native_1.View style={{ paddingHorizontal: 16, paddingTop: 12, paddingBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                              <react_native_1.Text style={styles_1.default.resultCount}>
+                                Console Logs ({webViewLogs.length})
+                              </react_native_1.Text>
+                              <TouchableScale_1.default onPress={() => (0, webViewLogger_1.clearWebViewData)()} style={{ padding: 6, borderRadius: 6, backgroundColor: AppColors_1.AppColors.primaryLight, borderWidth: 1, borderColor: AppColors_1.AppColors.grayBorderSecondary }}>
+                                <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={14}/>
+                              </TouchableScale_1.default>
+                            </react_native_1.View>} renderItem={({ item }) => {
+                            const logColor = item.type === 'error' ? AppColors_1.AppColors.errorColor :
+                                item.type === 'warn' ? AppColors_1.AppColors.warningIconGold :
+                                    item.type === 'info' ? AppColors_1.AppColors.skyBlue :
+                                        AppColors_1.AppColors.grayTextWeak;
+                            const bgColor = item.type === 'error' ? 'rgba(255, 46, 87, 0.06)' :
+                                item.type === 'warn' ? 'rgba(191, 162, 82, 0.08)' :
+                                    AppColors_1.AppColors.primaryLight;
+                            const d = new Date(item.timestamp);
+                            const timeStr = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+                            return (<react_native_1.View style={{
+                                    marginHorizontal: 12,
+                                    marginVertical: 3,
+                                    borderRadius: 8,
+                                    borderWidth: 1,
+                                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                                    borderLeftWidth: 3,
+                                    borderLeftColor: logColor,
+                                    backgroundColor: bgColor,
+                                    padding: 10,
+                                    flexDirection: 'row',
+                                    gap: 8,
+                                    alignItems: 'flex-start',
+                                }}>
+                                <react_native_1.View style={{ paddingTop: 1 }}>
+                                  <NetworkIcons_1.TerminalIcon color={logColor} size={11}/>
+                                </react_native_1.View>
+                                <react_native_1.View style={{ flex: 1, gap: 3 }}>
+                                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                                    <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: logColor, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                                      {item.type}
+                                    </react_native_1.Text>
+                                    <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak }}>
+                                      {timeStr}
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
+                                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 12, color: AppColors_1.AppColors.primaryBlack, lineHeight: 16 }}>
+                                    {item.message}
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </react_native_1.View>);
+                        }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[styles_1.default.listContent, webViewLogs.length === 0 && { flexGrow: 1 }]}/>) : (<react_native_1.View style={styles_1.default.emptyContainer}>
+                          <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                            <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={32}/>
+                          </react_native_1.View>
+                          <react_native_1.Text style={styles_1.default.emptyTitle}>No Console Logs</react_native_1.Text>
+                          <react_native_1.Text style={styles_1.default.emptySub}>
+                            Console logs from the WebView will appear here.
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>) : (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+                      {webViewHtml ? (OriginalWebView ? (<OriginalWebView source={{ html: webViewHtml, baseUrl: webViewHtmlUrl }} injectedJavaScript={previewInspectScript} onMessage={(event) => {
+                            try {
+                                const data = JSON.parse(event.nativeEvent.data);
+                                if (data.type === 'preview-inspect') {
+                                    setInspectedElement({
+                                        tagName: data.tagName,
+                                        id: data.id,
+                                        className: data.className,
+                                        searchStr: data.searchStr,
+                                    });
+                                    setWebViewSubTab('html');
+                                    setHtmlSubTab('html');
+                                }
+                            }
+                            catch (err) { }
+                        }} style={{ flex: 1 }}/>) : (<react_native_1.View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+                            <react_native_1.Text style={{ color: AppColors_1.AppColors.grayText, textAlign: 'center', fontFamily: AppFonts_1.AppFonts.interMedium }}>
+                              react-native-webview is not installed in the target project. Install it to enable Preview mode.
+                            </react_native_1.Text>
+                          </react_native_1.View>)) : (<react_native_1.View style={styles_1.default.emptyContainer}>
+                          <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                            <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
+                          </react_native_1.View>
+                          <react_native_1.Text style={styles_1.default.emptyTitle}>
+                            No Preview Available
+                          </react_native_1.Text>
+                          <react_native_1.Text style={styles_1.default.emptySub}>
+                            Load a page in the WebView to see its visual preview.
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>)}
+                </react_native_1.View>)) : activeTab === 'redux' ? (renderReduxTab()) : (<react_native_1.View style={{ flex: 1 }}>
                   {/* Non-scrollable details header */}
                   <react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
-                    {(() => {
-                    const routeInfo = logRouteMapRef.current.get(selected.id);
-                    const screenPath = routeInfo && routeInfo.path !== 'Navigators'
-                        ? routeInfo.path.split(' ➔ ')
-                        : [];
-                    const parts = ['APIs', ...screenPath];
-                    return (<react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            backgroundColor: AppColors_1.AppColors.primaryLight,
-                            borderRadius: 8,
-                            paddingVertical: 8,
-                            paddingHorizontal: 12,
-                            borderWidth: 1,
-                            borderColor: AppColors_1.AppColors.dividerColor,
-                            marginBottom: 12,
-                            marginTop: 4,
-                        }}>
-                          <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <react_native_1.View style={styles_1.default.detailInfoBar}>
+                      {(() => {
+                    let hostStr = '';
+                    let pathStr = detailDisplayUrl;
+                    let queryStr = '';
+                    try {
+                        // Simple parsing fallback for React Native environments
+                        const qIndex = detailDisplayUrl.indexOf('?');
+                        let cleanUrlForParsing = detailDisplayUrl;
+                        if (qIndex !== -1) {
+                            pathStr = detailDisplayUrl.substring(0, qIndex);
+                            queryStr = detailDisplayUrl.substring(qIndex);
+                            cleanUrlForParsing = pathStr;
+                        }
+                        const schemeIndex = cleanUrlForParsing.indexOf('://');
+                        if (schemeIndex !== -1) {
+                            const withoutScheme = cleanUrlForParsing.substring(schemeIndex + 3);
+                            const firstSlash = withoutScheme.indexOf('/');
+                            if (firstSlash !== -1) {
+                                hostStr = withoutScheme.substring(0, firstSlash);
+                                pathStr = withoutScheme.substring(firstSlash);
+                            }
+                            else {
+                                hostStr = withoutScheme;
+                                pathStr = '/';
+                            }
+                        }
+                    }
+                    catch (e) { }
+                    return (<>
+                            <react_native_1.View style={styles_1.default.detailInfoTop}>
+                              <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
-                            gap: 6,
+                            gap: 8,
                         }}>
-                            {parts.map((part, index) => {
-                            const isLast = index === parts.length - 1;
-                            return (<react_1.default.Fragment key={index}>
-                                  {index > 0 && (<react_native_1.Text style={{ color: AppColors_1.AppColors.grayTextWeak, fontSize: 11, marginHorizontal: 2 }}>
-                                      /
-                                    </react_native_1.Text>)}
-                                  <react_native_1.View style={isLast
-                                    ? {
-                                        backgroundColor: `${AppColors_1.AppColors.purple}12`,
-                                        paddingHorizontal: 8,
-                                        paddingVertical: 3,
-                                        borderRadius: 6,
-                                    }
-                                    : {
-                                        paddingHorizontal: 4,
-                                        paddingVertical: 2,
-                                    }}>
-                                    <react_native_1.Text style={{
-                                    fontFamily: isLast ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
-                                    fontSize: 11.5,
-                                    color: isLast ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayText,
-                                }}>
-                                      {part}
+                                <react_native_1.View style={[
+                            styles_1.default.methodBadge,
+                            {
+                                backgroundColor: `${constants_1.METHOD_COLORS[selected.method] ??
+                                    constants_1.METHOD_COLORS.ALL}15`,
+                            },
+                        ]}>
+                                  <react_native_1.Text style={[
+                            styles_1.default.methodBadgeText,
+                            {
+                                color: constants_1.METHOD_COLORS[selected.method] ??
+                                    constants_1.METHOD_COLORS.ALL,
+                            },
+                        ]}>
+                                    {selected.method}
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+
+                                {selected.status != null && (<react_native_1.View style={[
+                                styles_1.default.chip,
+                                {
+                                    backgroundColor: selected.status === 0
+                                        ? `${AppColors_1.AppColors.errorColor}15`
+                                        : `${(0, helpers_1.getStatusColor)(selected.status)}15`,
+                                    borderColor: selected.status === 0
+                                        ? `${AppColors_1.AppColors.errorColor}40`
+                                        : `${(0, helpers_1.getStatusColor)(selected.status)}40`,
+                                },
+                            ]}>
+                                    {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_svg_1.default width={6} height={6} viewBox="0 0 10 10" fill="none">
+                                        <react_native_svg_1.Circle cx="5" cy="5" r="5" fill={(0, helpers_1.getStatusColor)(selected.status)}/>
+                                      </react_native_svg_1.default>)}
+                                    <react_native_1.Text style={[
+                                styles_1.default.chipText,
+                                {
+                                    color: selected.status === 0
+                                        ? AppColors_1.AppColors.errorColor
+                                        : (0, helpers_1.getStatusColor)(selected.status),
+                                },
+                            ]}>
+                                      {selected.status === 0
+                                ? 'Failed'
+                                : String(selected.status)}
                                     </react_native_1.Text>
-                                  </react_native_1.View>
-                                </react_1.default.Fragment>);
-                        })}
-                          </react_native_1.ScrollView>
-                        </react_native_1.View>);
-                })()}
+                                  </react_native_1.View>)}
 
-                    <react_native_1.View style={styles_1.default.detailInfoBar}>
-                      <react_native_1.View style={styles_1.default.detailInfoTop}>
-                        <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                }}>
-                          <react_native_1.View style={[
-                    styles_1.default.methodBadge,
-                    {
-                        backgroundColor: `${constants_1.METHOD_COLORS[selected.method] ??
-                            constants_1.METHOD_COLORS.ALL}15`,
-                    },
-                ]}>
-                            <react_native_1.Text style={[
-                    styles_1.default.methodBadgeText,
-                    {
-                        color: constants_1.METHOD_COLORS[selected.method] ??
-                            constants_1.METHOD_COLORS.ALL,
-                    },
-                ]}>
-                              {selected.method}
-                            </react_native_1.Text>
-                          </react_native_1.View>
+                                {selected.duration != null && (<react_native_1.View style={[styles_1.default.chip, { backgroundColor: 'rgba(104,75,155,0.08)', borderColor: 'rgba(104,75,155,0.18)' }]}>
+                                    <react_native_1.Text style={[styles_1.default.chipText, { color: AppColors_1.AppColors.purple }]}>
+                                      {selected.duration}ms
+                                    </react_native_1.Text>
+                                  </react_native_1.View>)}
+                              </react_native_1.View>
+                              <react_native_1.View style={styles_1.default.detailInfoRight}>
+                                <TouchableScale_1.default style={styles_1.default.iconSquareBtn} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                                  <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                                </TouchableScale_1.default>
+                                <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
+                                <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
+                                <CopyButton_1.default value={detailDisplayUrl} label="URL"/>
+                              </react_native_1.View>
+                            </react_native_1.View>
 
-                          {selected.status != null && (<react_native_1.View style={[
-                        styles_1.default.chip,
-                        {
-                            backgroundColor: selected.status === 0
-                                ? `${AppColors_1.AppColors.errorColor}15`
-                                : `${(0, helpers_1.getStatusColor)(selected.status)}15`,
-                            borderColor: selected.status === 0
-                                ? `${AppColors_1.AppColors.errorColor}40`
-                                : `${(0, helpers_1.getStatusColor)(selected.status)}40`,
-                        },
-                    ]}>
-                              {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_svg_1.default width={6} height={6} viewBox="0 0 10 10" fill="none">
-                                  <react_native_svg_1.Circle cx="5" cy="5" r="5" fill={(0, helpers_1.getStatusColor)(selected.status)}/>
-                                </react_native_svg_1.default>)}
-                              <react_native_1.Text style={[
-                        styles_1.default.chipText,
-                        {
-                            color: selected.status === 0
-                                ? AppColors_1.AppColors.errorColor
-                                : (0, helpers_1.getStatusColor)(selected.status),
-                        },
-                    ]}>
-                                {selected.status === 0
-                        ? 'Failed'
-                        : String(selected.status)}
+                            <react_native_1.Pressable style={{
+                            backgroundColor: AppColors_1.AppColors.grayBackground,
+                            borderRadius: 10,
+                            borderWidth: 1,
+                            borderColor: AppColors_1.AppColors.dividerColor,
+                            padding: 10,
+                            marginTop: 6,
+                        }} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
+                              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 2 }}>
+                                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, flex: 1 }} numberOfLines={1}>
+                                  {hostStr || 'API Endpoint'}
+                                </react_native_1.Text>
+                                {queryStr ? (<react_native_1.View style={{ backgroundColor: 'rgba(104,75,155,0.08)', paddingHorizontal: 5, paddingVertical: 1, borderRadius: 4 }}>
+                                    <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 8.5, color: AppColors_1.AppColors.purple }}>Query Params</react_native_1.Text>
+                                  </react_native_1.View>) : null}
+                              </react_native_1.View>
+                              <react_native_1.Text selectable={true} style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 12, color: AppColors_1.AppColors.primaryBlack, marginTop: 2 }} numberOfLines={2}>
+                                {pathStr}
                               </react_native_1.Text>
-                            </react_native_1.View>)}
-                        </react_native_1.View>
-                        <react_native_1.View style={styles_1.default.detailInfoRight}>
-                          <TouchableScale_1.default style={styles_1.default.iconSquareBtn} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
-                            <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                          </TouchableScale_1.default>
-                          <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
-                          <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
-                          <CopyButton_1.default value={detailDisplayUrl} label="URL"/>
-                        </react_native_1.View>
-                      </react_native_1.View>
-
-                      <react_native_1.Pressable style={styles_1.default.detailUrlContainer} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
-                        <react_native_1.Text selectable={true} style={styles_1.default.detailUrl}>
-                          {detailDisplayUrl}
-                        </react_native_1.Text>
-                      </react_native_1.Pressable>
+                              {queryStr ? (<react_native_1.Text selectable={true} style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, marginTop: 4 }} numberOfLines={1}>
+                                  {queryStr}
+                                </react_native_1.Text>) : null}
+                            </react_native_1.Pressable>
+                          </>);
+                })()}
                     </react_native_1.View>
                   </react_native_1.View>
 
@@ -2303,16 +3347,30 @@ const NetworkInspector = () => {
                             return 'Request';
                         return 'Response';
                     };
+                    const getIcon = () => {
+                        const iconColor = isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText;
+                        if (tab === 'metadata')
+                            return <NetworkIcons_1.StatusIcon color={iconColor}/>;
+                        if (tab === 'headers')
+                            return <NetworkIcons_1.HeadersIcon color={iconColor}/>;
+                        if (tab === 'request')
+                            return <NetworkIcons_1.RequestIcon color={iconColor}/>;
+                        return <NetworkIcons_1.ResponseIcon color={iconColor}/>;
+                    };
                     return (<react_native_1.TouchableOpacity key={tab} onPress={() => setApiDetailActiveTab(tab)} style={{
                             flex: 1,
                             paddingVertical: 6,
+                            flexDirection: 'row',
                             alignItems: 'center',
+                            justifyContent: 'center',
                             borderRadius: 8,
                             backgroundColor: isActive ? AppColors_1.AppColors.purple : 'transparent',
+                            gap: 4,
                         }}>
+                          {getIcon()}
                           <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 11,
+                            fontSize: 10,
                             color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
                         }}>
                             {getLabel()}
@@ -2324,7 +3382,8 @@ const NetworkInspector = () => {
                   {/* Scrollable Tab Content */}
                   <react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingHorizontal: 6, paddingBottom: 24 }} showsVerticalScrollIndicator={true}>
                     {apiDetailActiveTab === 'metadata' && (<>
-                        <MetaAccordion_1.default status={selected.status} statusColor={(0, helpers_1.getStatusColor)(selected.status)} duration={selected.duration} size={(0, helpers_1.getSize)(selected.response)} triggeredAt={(0, helpers_1.formatDateTime)(selected.startTime)}/>
+                        <MetaAccordion_1.default status={selected.status} statusColor={(0, helpers_1.getStatusColor)(selected.status)} duration={selected.duration} size={(0, helpers_1.getSize)(selected.response)} triggeredAt={(0, helpers_1.formatDateTime)(selected.startTime)} method={selected.method} contentType={selected.responseHeaders?.['content-type'] ||
+                        selected.responseHeaders?.['Content-Type']} url={selected.url}/>
 
                         {(() => {
                         const routeInfo = logRouteMapRef.current.get(selected.id);
@@ -2408,6 +3467,10 @@ const NetworkInspector = () => {
                   Loading logs...
                 </react_native_1.Text>
               </react_native_1.View>)}
+
+            {settingsPage !== null && (<react_native_1.View style={[react_native_1.StyleSheet.absoluteFill, { backgroundColor: AppColors_1.AppColors.grayBackground, zIndex: 99999 }]}>
+                {renderSettings()}
+              </react_native_1.View>)}
             </react_native_1.View>
           </react_native_1.View>
           </ErrorBoundary_1.default>)}