react-native-inapp-inspector 1.0.14 → 1.0.16

package/dist/commonjs/index.js

@@ -59,6 +59,7 @@ const SourcePageCard_1 = __importDefault(require("./components/SourcePageCard"))
 const ConsoleLogCard_1 = require("./components/ConsoleLogCard");
 const HighlightText_1 = __importDefault(require("./components/HighlightText"));
 const CodeSnippet_1 = __importDefault(require("./components/CodeSnippet"));
+const AnimatedEntrance_1 = __importDefault(require("./components/AnimatedEntrance"));
 // Helpers
 const helpers_1 = require("./helpers");
 // Assets
@@ -146,7 +147,10 @@ const NavigationTracker = ({ onStateChange }) => {
     }, [navState, onStateChange]);
     return null;
 };
-const NetworkInspector = ({ enabled = true }) => {
+const animateNextLayout = () => {
+    react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+};
+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)({});
@@ -161,16 +165,11 @@ const NetworkInspector = ({ enabled = true }) => {
     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);
-        }
+        react_native_1.LogBox.ignoreAllLogs(enabled);
         return () => {
             react_native_1.LogBox.ignoreAllLogs(false);
         };
-    }, [enabled, visible]);
+    }, [enabled]);
     (0, react_1.useEffect)(() => {
         if (selected) {
             setApiDetailActiveTab('response');
@@ -279,12 +278,18 @@ const NetworkInspector = ({ enabled = true }) => {
             const nextVal = !prev[key];
             const newVisibility = { ...prev, [key]: nextVal };
             if (!nextVal && activeTab === key) {
+                animateNextLayout();
                 setActiveTab('apis');
             }
             return newVisibility;
         });
     };
+    const switchActiveTab = (0, react_1.useCallback)((key) => {
+        animateNextLayout();
+        setActiveTab(key);
+    }, []);
     const navigateFromDashboard = (key) => {
+        animateNextLayout();
         setTabVisibility(prev => ({ ...prev, [key]: true }));
         setActiveTab(key);
     };
@@ -357,6 +362,11 @@ const NetworkInspector = ({ enabled = true }) => {
     const badgeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const activePulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.4)).current;
     const unreadPulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS === 'android') {
+            react_native_1.UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
             react_native_1.Animated.timing(pulseAnim, {
@@ -432,7 +442,7 @@ const NetworkInspector = ({ enabled = true }) => {
         (0, networkLogger_1.setupNetworkLogger)();
         (0, networkLogger_1.clearNetworkLogs)();
         (0, consoleLogger_1.setupConsoleLogger)();
-        // Note: setupAnalyticsLogger(analytics()) is called by the consumer at app startup
+        (0, analyticsLogger_1.autoSetupAnalyticsLogger)();
         let timeoutId;
         const unsubscribe = (0, networkLogger_1.subscribeNetworkLogs)((raw) => {
             clearTimeout(timeoutId);
@@ -816,6 +826,7 @@ const NetworkInspector = ({ enabled = true }) => {
         return Object.entries(freq).sort((a, b) => b[1] - a[1]);
     }, [filteredAnalyticsEvents]);
     function closeModal() {
+        animateNextLayout();
         setVisible(false);
         setSelected(null);
         setSelectedEvent(null);
@@ -933,12 +944,14 @@ const NetworkInspector = ({ enabled = true }) => {
             return next;
         });
     }, []);
-    const renderItem = (0, react_1.useCallback)(({ item }) => {
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => {
         if (item.type === 'header') {
-            return (<DomainHeader_1.default pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>);
+            return (<AnimatedEntrance_1.default index={index} distance={8}>
+            <DomainHeader_1.default pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>
+          </AnimatedEntrance_1.default>);
         }
         const { log, isLast, color } = item;
-        return (<react_native_1.View style={styles_1.default.treeNodeRow}>
+        return (<AnimatedEntrance_1.default index={index} distance={8} style={styles_1.default.treeNodeRow}>
           <react_native_1.View style={styles_1.default.treeLines}>
             <react_native_1.View style={[
                 styles_1.default.modernTreeLine,
@@ -948,9 +961,12 @@ const NetworkInspector = ({ enabled = true }) => {
             {!isLast && (<react_native_1.View style={[styles_1.default.modernTreeBranch, { borderColor: color }]}/>)}
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.treeCardWrapper}>
-            <LogCard_1.default item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => setSelected(log)} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
+            <LogCard_1.default item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => {
+                animateNextLayout();
+                setSelected(log);
+            }} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
           </react_native_1.View>
-        </react_native_1.View>);
+        </AnimatedEntrance_1.default>);
     }, [
         minStart,
         totalRange,
@@ -976,8 +992,9 @@ const NetworkInspector = ({ enabled = true }) => {
           <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={() => {
+                    animateNextLayout();
                     setSettingsPage(null);
-                    setActiveTab('apis');
+                    switchActiveTab('apis');
                 }} hitSlop={12} style={{
                     padding: 8,
                     borderRadius: 10,
@@ -988,8 +1005,21 @@ const NetworkInspector = ({ enabled = true }) => {
                 <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.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)',
@@ -997,17 +1027,28 @@ const NetworkInspector = ({ enabled = true }) => {
                     paddingVertical: 4,
                     borderRadius: 8,
                     borderWidth: 1,
-                    borderColor: 'rgba(255, 255, 255, 0.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.13</react_native_1.Text>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: '#FFFFFF',
+                }}>
+                  v1.0.13
+                </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' }}>
+            <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',
@@ -1019,8 +1060,26 @@ const NetworkInspector = ({ enabled = true }) => {
                     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.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) => {
@@ -1037,27 +1096,53 @@ const NetworkInspector = ({ enabled = true }) => {
                             gap: 12,
                         }}>
                     {/* Icon + Label — fills remaining space */}
-                    <react_native_1.View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <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,
+                            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',
+                            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}/>}
+                        {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,
+                            color: isLocked
+                                ? AppColors_1.AppColors.grayText
+                                : AppColors_1.AppColors.primaryBlack,
                         }}>
                         {tab.label}
                       </react_native_1.Text>
@@ -1072,14 +1157,28 @@ const NetworkInspector = ({ enabled = true }) => {
                                 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 }}>
+                          <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={{
+                      <TouchableScale_1.default onPress={() => {
+                            animateNextLayout();
+                            setSettingsPage(tab.key);
+                        }} hitSlop={8} style={{
                             marginLeft: 4,
                             padding: 4,
                             borderRadius: 6,
@@ -1094,12 +1193,18 @@ const NetworkInspector = ({ enabled = true }) => {
                     </react_native_1.View>
 
                     {/* Visibility Switch in VISIBILITY column */}
-                    <react_native_1.View style={{ width: 90, alignItems: 'flex-end', justifyContent: 'center' }}>
+                    <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,
+                            backgroundColor: isVisible
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayBorderSecondary,
                             padding: 2,
                             justifyContent: 'center',
                             alignItems: isVisible ? 'flex-end' : 'flex-start',
@@ -1122,8 +1227,22 @@ const NetworkInspector = ({ enabled = true }) => {
 
             {/* 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.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',
@@ -1132,13 +1251,21 @@ const NetworkInspector = ({ enabled = true }) => {
                     gap: 12,
                 }}>
                   {/* Icon + Label */}
-                  <react_native_1.View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                  <react_native_1.View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
                     <react_native_1.View style={{
-                    width: 20, height: 20, borderRadius: 6,
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
                     borderWidth: 1,
                     borderColor: 'rgba(104,75,155,0.2)',
-                    alignItems: 'center', justifyContent: 'center',
+                    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>
@@ -1162,7 +1289,9 @@ const NetworkInspector = ({ enabled = true }) => {
                     width: 38,
                     height: 22,
                     borderRadius: 11,
-                    backgroundColor: isDark ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayBorderSecondary,
+                    backgroundColor: isDark
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayBorderSecondary,
                     padding: 2,
                     justifyContent: 'center',
                     alignItems: isDark ? 'flex-end' : 'flex-start',
@@ -1184,7 +1313,10 @@ const NetworkInspector = ({ enabled = true }) => {
           </react_native_1.ScrollView>
         </react_native_1.View>);
         }
-        const goBackToMain = () => setSettingsPage('main');
+        const goBackToMain = () => {
+            animateNextLayout();
+            setSettingsPage('main');
+        };
         const renderSubHeader = (title, icon, rightInfo) => (<react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -1207,14 +1339,23 @@ const NetworkInspector = ({ enabled = true }) => {
           <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,
+                    width: 36,
+                    height: 36,
+                    borderRadius: 10,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    borderWidth: 1, borderColor: 'rgba(104,75,155,0.2)',
-                    alignItems: 'center', justifyContent: 'center',
+                    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 }}>
+        <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={{
@@ -1225,7 +1366,11 @@ const NetworkInspector = ({ enabled = true }) => {
                     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 }}>
+            <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}
@@ -1242,18 +1387,31 @@ const NetworkInspector = ({ enabled = true }) => {
                 gap: 12,
             }}>
           <react_native_1.View style={{
-                width: 36, height: 36, borderRadius: 10,
+                width: 36,
+                height: 36,
+                borderRadius: 10,
                 backgroundColor: AppColors_1.AppColors.purpleShade50,
-                borderWidth: 1, borderColor: 'rgba(104,75,155,0.18)',
-                alignItems: 'center', justifyContent: 'center',
+                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 }}>
+            <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 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>
@@ -1275,14 +1433,20 @@ const NetworkInspector = ({ enabled = true }) => {
                             paddingVertical: 6,
                             alignItems: 'center',
                             borderRadius: 6,
-                            backgroundColor: isActive ? AppColors_1.AppColors.purple : 'transparent',
+                            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}
+                    {typeof opt === 'number' &&
+                            opt >= 500 &&
+                            settingsPage === 'insights'
+                            ? `${opt}ms`
+                            : opt}
                   </react_native_1.Text>
                 </TouchableScale_1.default>);
                 })}
@@ -1291,7 +1455,14 @@ const NetworkInspector = ({ enabled = true }) => {
         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 }}>
+          <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',
@@ -1305,7 +1476,14 @@ const NetworkInspector = ({ enabled = 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 }}>
+          <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',
@@ -1316,8 +1494,21 @@ const NetworkInspector = ({ enabled = true }) => {
                         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>
+                    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>
@@ -1326,7 +1517,14 @@ const NetworkInspector = ({ enabled = true }) => {
         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 }}>
+          <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',
@@ -1338,30 +1536,67 @@ const NetworkInspector = ({ enabled = true }) => {
                     },
                 })}
             <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>
+            <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;
+                    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 }}/>,
+                        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',
+                        description: level === 'info'
+                            ? 'Informational messages'
+                            : level === 'warn'
+                                ? 'Warning messages'
+                                : 'Error messages',
                         isLast: level === 'error',
-                        onPress: () => setShowConsoleLevels(prev => ({ ...prev, [level]: !prev[level] })),
+                        onPress: () => setShowConsoleLevels(prev => ({
+                            ...prev,
+                            [level]: !prev[level],
+                        })),
                         right: (<react_native_1.View style={{
-                                width: 22, height: 22, borderRadius: 6,
+                                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',
+                                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}/>}
+                    {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 }}>
+          <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',
@@ -1371,8 +1606,21 @@ const NetworkInspector = ({ enabled = true }) => {
                         (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>
+                    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>
@@ -1381,7 +1629,14 @@ const NetworkInspector = ({ enabled = true }) => {
         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 }}>
+          <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',
@@ -1389,7 +1644,14 @@ const NetworkInspector = ({ enabled = true }) => {
                     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 }}>
+          <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',
@@ -1400,8 +1662,21 @@ const NetworkInspector = ({ enabled = true }) => {
                         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>
+                    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>
@@ -1410,25 +1685,46 @@ const NetworkInspector = ({ enabled = true }) => {
         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 }}>
+          <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,
+                            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',
+                            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}/>}
+                  {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 }}>
+          <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',
@@ -1438,8 +1734,21 @@ const NetworkInspector = ({ enabled = true }) => {
                         (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>
+                    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>
@@ -1448,20 +1757,34 @@ const NetworkInspector = ({ enabled = true }) => {
         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 }}>
+          <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,
+                            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',
+                            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}/>}
+                  {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 }}/>
@@ -1478,18 +1801,40 @@ const NetworkInspector = ({ enabled = 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 }}>
+          <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',
+                    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>
+                    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>
@@ -1498,7 +1843,14 @@ const NetworkInspector = ({ enabled = true }) => {
         // 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 }}>
+        <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',
@@ -1517,13 +1869,20 @@ const NetworkInspector = ({ enabled = true }) => {
                 isLast: true,
                 onPress: () => setInsightsShowConsoleAlerts(prev => !prev),
                 right: (<react_native_1.View style={{
-                        width: 22, height: 22, borderRadius: 6,
+                        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',
+                        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}/>}
+                {insightsShowConsoleAlerts && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
               </react_native_1.View>),
             })}
         </react_native_1.View>
@@ -1531,10 +1890,14 @@ const NetworkInspector = ({ enabled = true }) => {
     };
     const renderInsightsDashboard = () => {
         const apiTotal = logs.length;
-        const apiErrors = logs.filter(l => (l.status != null && l.status >= 400) || l.status === 0 || l.status == null).length;
+        const apiErrors = logs.filter(l => (l.status != null && l.status >= 400) ||
+            l.status === 0 ||
+            l.status == null).length;
         const apiSuccess = apiTotal - apiErrors;
         const apiSuccessRate = apiTotal > 0 ? Math.round((apiSuccess / apiTotal) * 100) : 100;
-        const durations = logs.filter(l => l.duration != null).map(l => l.duration);
+        const durations = logs
+            .filter(l => l.duration != null)
+            .map(l => l.duration);
         const avgTime = durations.length > 0
             ? Math.round(durations.reduce((a, b) => a + b, 0) / durations.length)
             : null;
@@ -1544,11 +1907,13 @@ const NetworkInspector = ({ enabled = true }) => {
         const logInfos = visibleConsoleLogs.filter(l => l.type === 'info').length;
         const analyticsTotal = analyticsEvents.length;
         const uniqueEvents = new Set(analyticsEvents.map(e => e.name)).size;
-        const screenViews = analyticsEvents.filter(e => e.name === 'screen_view' || e.name === 'page_view' || e.name === 'firebase_screen_class').length;
+        const screenViews = analyticsEvents.filter(e => e.name === 'screen_view' ||
+            e.name === 'page_view' ||
+            e.name === 'firebase_screen_class').length;
         const webviewTotal = webViewNavHistory.length;
         return (<react_native_1.View style={styles_1.default.dashboardContainer}>
         {/* Module 1: APIs */}
-        {tabVisibility.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('apis')}>
+        {tabVisibility.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={18}/>
@@ -1562,13 +1927,19 @@ const NetworkInspector = ({ enabled = true }) => {
                 <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 }]}>
+                <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 }]}>
+                <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>
@@ -1583,7 +1954,7 @@ const NetworkInspector = ({ enabled = true }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 2: Logs */}
-        {tabVisibility.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('logs')}>
+        {tabVisibility.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.TerminalIcon color="#0D9488" size={18}/>
@@ -1597,17 +1968,25 @@ const NetworkInspector = ({ enabled = true }) => {
                 <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.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 }]}>
+                <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 }]}>
+                <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>
@@ -1616,11 +1995,13 @@ const NetworkInspector = ({ enabled = true }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 3: Analytics */}
-        {tabVisibility.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('analytics')}>
+        {tabVisibility.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.AnalyticsIcon color="#EA580C" size={18}/>
-                <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Analytics Events</react_native_1.Text>
+                <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>
@@ -1630,7 +2011,9 @@ const NetworkInspector = ({ enabled = true }) => {
                 <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.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}>
@@ -1639,7 +2022,9 @@ const NetworkInspector = ({ enabled = true }) => {
               </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}
+                  {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>
@@ -1647,11 +2032,13 @@ const NetworkInspector = ({ enabled = true }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 4: WebView */}
-        {tabVisibility.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('webview')}>
+        {tabVisibility.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.GlobeIcon color="#2563EB" size={18}/>
-                <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>WebView Captures</react_native_1.Text>
+                <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>
@@ -1661,12 +2048,16 @@ const NetworkInspector = ({ enabled = true }) => {
                 <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.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) ?? ''}...` : '—'}
+                  {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>
@@ -1674,38 +2065,73 @@ const NetworkInspector = ({ enabled = true }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 5: Redux Store */}
-        {tabVisibility.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('redux')}>
+        {tabVisibility.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={18}/>
-                <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Redux Store State</react_native_1.Text>
+                <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>
             {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 }}>
+                <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 }}>
+                  <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 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 }}>
+                        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 }}>
+                      <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 }}>
+                <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>)}
@@ -1760,10 +2186,19 @@ const NetworkInspector = ({ enabled = true }) => {
             <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 }}>
+            <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 }}>
+            <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>
@@ -1781,23 +2216,33 @@ const NetworkInspector = ({ enabled = true }) => {
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.dividerColor,
             }}>
-          <react_native_1.TouchableOpacity onPress={() => setReduxActiveSubTab('timeline')} style={{
+          <react_native_1.TouchableOpacity onPress={() => {
+                animateNextLayout();
+                setReduxActiveSubTab('timeline');
+            }} style={{
                 flex: 1,
                 paddingVertical: 6,
                 alignItems: 'center',
                 justifyContent: 'center',
                 borderRadius: 8,
-                backgroundColor: reduxActiveSubTab === 'timeline' ? AppColors_1.AppColors.purple : 'transparent',
+                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,
+                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={{
+          <react_native_1.TouchableOpacity onPress={() => {
+                animateNextLayout();
+                setReduxActiveSubTab('tree');
+            }} style={{
                 flex: 1,
                 paddingVertical: 6,
                 alignItems: 'center',
@@ -1828,7 +2273,9 @@ const NetworkInspector = ({ enabled = true }) => {
                 borderColor: AppColors_1.AppColors.dividerColor,
                 height: 36,
             }}>
-          <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={{
+          <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,
@@ -1874,23 +2321,24 @@ const NetworkInspector = ({ enabled = true }) => {
       <react_native_1.Modal visible={visible} animationType="slide" transparent>
         {visible && (<ErrorBoundary_1.default onClose={closeModal}>
             <react_native_1.View style={styles_1.default.modalBackdrop}>
-            <react_native_1.Pressable style={styles_1.default.modalBackdropPressable} onPress={closeModal}/>
-            <react_native_1.View style={styles_1.default.modalContentCard}>
-              <react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
+              <react_native_1.Pressable style={styles_1.default.modalBackdropPressable} onPress={closeModal}/>
+              <react_native_1.View style={styles_1.default.modalContentCard}>
+                <react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
-              <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} style={styles_1.default.headerGradient}>
-                <react_native_1.View style={styles_1.default.header}>
-                  <react_native_1.View style={[
+                <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} style={styles_1.default.headerGradient}>
+                  <react_native_1.View style={styles_1.default.header}>
+                    <react_native_1.View style={[
                 styles_1.default.headerLeft,
                 {
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 16,
-                    flex: (selected == null && selectedEvent == null) ? 5 : 1,
+                    flex: selected == null && selectedEvent == null ? 5 : 1,
                 },
             ]}>
-                    <TouchableScale_1.default onPress={() => {
+                      <TouchableScale_1.default onPress={() => {
                 requestAnimationFrame(() => {
+                    animateNextLayout();
                     setSelected(null);
                     setSelectedEvent(null);
                 });
@@ -1899,14 +2347,19 @@ const NetworkInspector = ({ enabled = true }) => {
                 selected == null &&
                     selectedEvent == null && { display: 'none' },
             ]}>
-                      <NetworkIcons_1.WhiteBackNavigation />
-                    </TouchableScale_1.default>
+                        <NetworkIcons_1.WhiteBackNavigation />
+                      </TouchableScale_1.default>
 
-                    {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,
+                      {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)',
@@ -1917,56 +2370,80 @@ const NetworkInspector = ({ enabled = true }) => {
                     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.13)
+                            <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.13)
+                              </react_native_1.Text>
+                            </react_native_1.View>
                           </react_native_1.View>
-                        </react_native_1.View>
-                      </react_native_1.View>) : null}
-                  </react_native_1.View>
+                        </react_native_1.View>) : null}
+                    </react_native_1.View>
 
-                  <react_native_1.View style={styles_1.default.headerCenter}>
-                    {selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                        <react_native_1.View style={styles_1.default.headerDetailRow}>
-                          <react_native_1.View style={[
+                    <react_native_1.View style={styles_1.default.headerCenter}>
+                      {selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                          <react_native_1.View style={styles_1.default.headerDetailRow}>
+                            <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
                             AppColors_1.AppColors.grayText,
                     },
                 ]}>
-                            <react_native_1.Text style={styles_1.default.headerMethodText}>
-                              {selected.method}
+                              <react_native_1.Text style={styles_1.default.headerMethodText}>
+                                {selected.method}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                            <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                              {detailTitle}
                             </react_native_1.Text>
                           </react_native_1.View>
-                          <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                            {detailTitle}
-                          </react_native_1.Text>
-                        </react_native_1.View>
-                        <react_native_1.View style={styles_1.default.headerDetailSubRow}>
-                          <react_native_1.View style={[
+                          <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                            <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
-                    { backgroundColor: (0, helpers_1.getStatusColor)(selected.status) },
+                    {
+                        backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
+                    },
                 ]}/>
-                          <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                            {selected.status === 0
+                            <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                              {selected.status === 0
                     ? 'Failed'
                     : selected.status ?? 'Pending'}{' '}
-                            •{' '}
-                            {selected.duration != null
+                              •{' '}
+                              {selected.duration != null
                     ? `${selected.duration}ms`
                     : '-'}
-                          </react_native_1.Text>
-                        </react_native_1.View>
-                      </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                        <react_native_1.View style={styles_1.default.headerDetailRow}>
-                          <react_native_1.View style={[
+                            </react_native_1.Text>
+                          </react_native_1.View>
+                        </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                          <react_native_1.View style={styles_1.default.headerDetailRow}>
+                            <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -1974,16 +2451,18 @@ const NetworkInspector = ({ enabled = true }) => {
                             : 'rgba(124,92,191,0.3)',
                     },
                 ]}>
-                            <react_native_1.Text style={styles_1.default.headerMethodText}>
-                              {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                              <react_native_1.Text style={styles_1.default.headerMethodText}>
+                                {selectedEvent.source === 'firebase'
+                    ? 'FB'
+                    : 'MAN'}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                            <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                              {selectedEvent.name}
                             </react_native_1.Text>
                           </react_native_1.View>
-                          <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                            {selectedEvent.name}
-                          </react_native_1.Text>
-                        </react_native_1.View>
-                        <react_native_1.View style={styles_1.default.headerDetailSubRow}>
-                          <react_native_1.View style={[
+                          <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                            <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -1991,68 +2470,119 @@ const NetworkInspector = ({ enabled = true }) => {
                             : AppColors_1.AppColors.purple,
                     },
                 ]}/>
-                          <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                            {Object.keys(selectedEvent.params).length} param
-                            {Object.keys(selectedEvent.params).length !== 1
+                            <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                              {Object.keys(selectedEvent.params).length} param
+                              {Object.keys(selectedEvent.params).length !== 1
                     ? 's'
                     : ''}
-                            {' · '}
-                            {selectedEvent.source}
-                          </react_native_1.Text>
-                        </react_native_1.View>
-                      </react_native_1.View>) : null}
-                  </react_native_1.View>
+                              {' · '}
+                              {selectedEvent.source}
+                            </react_native_1.Text>
+                          </react_native_1.View>
+                        </react_native_1.View>) : null}
+                    </react_native_1.View>
 
-                  <react_native_1.View style={styles_1.default.headerRight}>
-                    {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>)}
+                    <react_native_1.View style={styles_1.default.headerRight}>
+                      {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.closeButtonSquare}>
-                      <NetworkIcons_1.CloseWhite size={16}/>
-                    </TouchableScale_1.default>
+                      <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonSquare}>
+                        <NetworkIcons_1.CloseWhite size={16}/>
+                      </TouchableScale_1.default>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
-              </react_native_linear_gradient_1.default>
-
-              {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-              {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' },
-                    { key: 'apis', label: 'APIs', count: logs.length, icon: 'apis' },
-                    { key: 'logs', label: 'Logs', count: consoleLogs.length, icon: 'logs' },
-                    { 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' },
-                ].filter(tab => tabVisibility[tab.key]).map(tab => {
+                </react_native_linear_gradient_1.default>
+
+                {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
+                {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',
+                    },
+                    {
+                        key: 'apis',
+                        label: 'APIs',
+                        count: logs.length,
+                        icon: 'apis',
+                    },
+                    {
+                        key: 'logs',
+                        label: 'Logs',
+                        count: consoleLogs.length,
+                        icon: 'logs',
+                    },
+                    {
+                        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',
+                    },
+                ]
+                    .filter(tab => tabVisibility[tab.key])
+                    .map(tab => {
                     const isActive = activeTab === tab.key;
-                    const iconColor = isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText;
+                    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;
+                    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);
+                                switchActiveTab(tab.key);
                             });
                         }} style={[
                             styles_1.default.contentTabButton,
                             isActive && styles_1.default.contentTabButtonActive,
                         ]}>
-                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                            {tab.icon === 'insights' && <NetworkIcons_1.InsightsIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'apis' && <NetworkIcons_1.SignalIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'logs' && <NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'analytics' && <NetworkIcons_1.AnalyticsIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'webview' && <NetworkIcons_1.GlobeIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'redux' && <NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>}
-                            <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
+                              <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                        }}>
+                                {tab.icon === 'insights' && (<NetworkIcons_1.InsightsIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'webview' && (<NetworkIcons_1.GlobeIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>)}
+                                <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                             styles_1.default.contentTabButtonText,
-                            isActive && styles_1.default.contentTabButtonTextActive,
+                            isActive &&
+                                styles_1.default.contentTabButtonTextActive,
                         ]}>
-                              {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
-                            </react_native_1.Text>
-                            {((tab.key === 'apis' && hasUnreadApis) || (tab.key === 'logs' && hasUnreadLogs)) && (<react_native_1.Animated.View style={{
+                                  {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,
@@ -2061,42 +2591,45 @@ const NetworkInspector = ({ enabled = true }) => {
                                 alignSelf: 'center',
                                 transform: [{ scale: unreadPulseAnim }],
                             }}/>)}
-                          </react_native_1.View>
-                        </TouchableScale_1.default>);
+                              </react_native_1.View>
+                            </TouchableScale_1.default>);
                 })}
-                  </react_native_1.ScrollView>
-                </react_native_1.View>) : null}
-
-
+                    </react_native_1.ScrollView>
+                  </react_native_1.View>) : null}
 
-            {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
-            {isReady && activeTab === 'analytics' && selectedEvent == null && (<react_native_1.View>
-                {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
-                <react_native_1.View style={[styles_1.default.toolbarRow, { marginTop: 12, marginBottom: 4 }]}>
-                  <react_native_1.View style={styles_1.default.searchContainer}>
-                    <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-                    <react_native_1.TextInput placeholder="Search events..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                    {analyticsSearch.length > 0 && (<react_native_1.Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                        <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                      </react_native_1.Pressable>)}
-                  </react_native_1.View>
-                  {analyticsSubTab === 'ga_events' && (<react_native_1.View style={styles_1.default.toolbarRight}>
-                      <TouchableScale_1.default style={[
+                {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
+                {isReady &&
+                activeTab === 'analytics' &&
+                selectedEvent == null && (<react_native_1.View>
+                      {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
+                      <react_native_1.View style={[
+                    styles_1.default.toolbarRow,
+                    { marginTop: 12, marginBottom: 4 },
+                ]}>
+                        <react_native_1.View style={styles_1.default.searchContainer}>
+                          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                          <react_native_1.TextInput placeholder="Search events..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                          {analyticsSearch.length > 0 && (<react_native_1.Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                              <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                            </react_native_1.Pressable>)}
+                        </react_native_1.View>
+                        {analyticsSubTab === 'ga_events' && (<react_native_1.View style={styles_1.default.toolbarRight}>
+                            <TouchableScale_1.default style={[
                         styles_1.default.toolbarBtn,
                         !hideScreenView && styles_1.default.toolbarBtnActive,
                     ]} onPress={() => setHideScreenView(prev => !prev)} hitSlop={10}>
-                        <NetworkIcons_1.ScreenIcon color={!hideScreenView
+                              <NetworkIcons_1.ScreenIcon color={!hideScreenView
                         ? AppColors_1.AppColors.purple
                         : AppColors_1.AppColors.grayTextStrong} size={18}/>
-                      </TouchableScale_1.default>
-                      <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                        <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
-                      </TouchableScale_1.default>
-                    </react_native_1.View>)}
-                </react_native_1.View>
+                            </TouchableScale_1.default>
+                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
+                              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale_1.default>
+                          </react_native_1.View>)}
+                      </react_native_1.View>
 
-                {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
-                <react_native_1.View style={{
+                      {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
+                      <react_native_1.View style={{
                     marginHorizontal: 16,
                     marginTop: 4,
                     marginBottom: 8,
@@ -2107,7 +2640,7 @@ const NetworkInspector = ({ enabled = true }) => {
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 }}>
-                  <react_native_1.Pressable style={[
+                        <react_native_1.Pressable style={[
                     {
                         flex: 1,
                         paddingVertical: 8,
@@ -2122,8 +2655,11 @@ const NetworkInspector = ({ enabled = true }) => {
                         shadowOffset: { width: 0, height: 1 },
                         elevation: 2,
                     },
-                ]} onPress={() => setAnalyticsSubTab('ga_events')}>
-                    <react_native_1.Text style={[
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setAnalyticsSubTab('ga_events');
+                }}>
+                          <react_native_1.Text style={[
                     {
                         fontFamily: AppFonts_1.AppFonts.interMedium,
                         fontSize: 13,
@@ -2134,14 +2670,14 @@ const NetworkInspector = ({ enabled = true }) => {
                         color: AppColors_1.AppColors.purple,
                     },
                 ]}>
-                      GA Events (
-                      {analyticsSearch
+                            GA Events (
+                            {analyticsSearch
                     ? filteredAnalyticsEvents.length
                     : analyticsEvents.length}
-                      )
-                    </react_native_1.Text>
-                  </react_native_1.Pressable>
-                  <react_native_1.Pressable style={[
+                            )
+                          </react_native_1.Text>
+                        </react_native_1.Pressable>
+                        <react_native_1.Pressable style={[
                     {
                         flex: 1,
                         paddingVertical: 8,
@@ -2156,8 +2692,11 @@ const NetworkInspector = ({ enabled = true }) => {
                         shadowOffset: { width: 0, height: 1 },
                         elevation: 2,
                     },
-                ]} onPress={() => setAnalyticsSubTab('top_events')}>
-                    <react_native_1.Text style={[
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setAnalyticsSubTab('top_events');
+                }}>
+                          <react_native_1.Text style={[
                     {
                         fontFamily: AppFonts_1.AppFonts.interMedium,
                         fontSize: 13,
@@ -2168,63 +2707,63 @@ const NetworkInspector = ({ enabled = true }) => {
                         color: AppColors_1.AppColors.purple,
                     },
                 ]}>
-                      Top Events ({topEventsArray.length})
-                    </react_native_1.Text>
-                  </react_native_1.Pressable>
-                </react_native_1.View>
-              </react_native_1.View>)}
+                            Top Events ({topEventsArray.length})
+                          </react_native_1.Text>
+                        </react_native_1.Pressable>
+                      </react_native_1.View>
+                    </react_native_1.View>)}
 
-            {isReady ? (activeTab === 'insights' ? (<react_native_1.ScrollView style={styles_1.default.insightsContainer} contentContainerStyle={styles_1.default.insightsContent} showsVerticalScrollIndicator={false}>
-                  {renderInsightsDashboard()}
-                </react_native_1.ScrollView>) : activeTab === 'analytics' ? (selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<react_native_1.FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
+                {isReady ? (activeTab === 'insights' ? (<react_native_1.ScrollView style={styles_1.default.insightsContainer} contentContainerStyle={styles_1.default.insightsContent} showsVerticalScrollIndicator={false}>
+                      {renderInsightsDashboard()}
+                    </react_native_1.ScrollView>) : activeTab === 'analytics' ? (selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<react_native_1.FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
                     styles_1.default.listContent,
                     { paddingHorizontal: 16, paddingTop: 16 },
-                ]} renderItem={({ item: [name, count] }) => {
+                ]} renderItem={({ item: [name, count], index }) => {
                     const maxCount = topEventsArray[0]?.[1] || 1;
                     const color = (0, AnalyticsEventCard_1.getEventColor)(name);
-                    return (<react_native_1.View style={[
+                    return (<AnimatedEntrance_1.default index={index} distance={8} style={[
                             styles_1.default.analyticsTopEventsCard,
                             { marginBottom: 12, paddingVertical: 16 },
                         ]}>
-                          <react_native_1.View style={styles_1.default.analyticsTopEventRow}>
-                            <react_native_1.View style={{
+                              <react_native_1.View style={styles_1.default.analyticsTopEventRow}>
+                                <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 8,
                             flex: 1,
                         }}>
-                              <react_native_1.View style={[
+                                  <react_native_1.View style={[
                             styles_1.default.analyticsIconCircle,
                             { backgroundColor: `${color}1A` },
                         ]}>
-                                <react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill={color}>
-                                  <react_native_svg_1.Circle cx="12" cy="12" r="10" opacity="0.3"/>
-                                  <react_native_svg_1.Path d="M7 14l3-3 4 4 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
-                                </react_native_svg_1.default>
-                              </react_native_1.View>
-                              <react_native_1.Text style={styles_1.default.analyticsTopEventName} numberOfLines={2}>
-                                {name}
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                            <react_native_1.View style={styles_1.default.analyticsTopEventBarWrap}>
-                              <react_native_linear_gradient_1.default colors={[color, `${color}99`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[
+                                    <react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill={color}>
+                                      <react_native_svg_1.Circle cx="12" cy="12" r="10" opacity="0.3"/>
+                                      <react_native_svg_1.Path d="M7 14l3-3 4 4 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+                                    </react_native_svg_1.default>
+                                  </react_native_1.View>
+                                  <react_native_1.Text style={styles_1.default.analyticsTopEventName} numberOfLines={2}>
+                                    {name}
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                                <react_native_1.View style={styles_1.default.analyticsTopEventBarWrap}>
+                                  <react_native_linear_gradient_1.default colors={[color, `${color}99`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[
                             styles_1.default.analyticsTopEventBar,
                             {
                                 width: `${Math.max(6, (count / maxCount) * 100)}%`,
                             },
                         ]}/>
-                            </react_native_1.View>
-                            <react_native_1.Text style={styles_1.default.analyticsTopEventCount}>
-                              {count}
-                            </react_native_1.Text>
-                          </react_native_1.View>
-                        </react_native_1.View>);
+                                </react_native_1.View>
+                                <react_native_1.Text style={styles_1.default.analyticsTopEventCount}>
+                                  {count}
+                                </react_native_1.Text>
+                              </react_native_1.View>
+                            </AnimatedEntrance_1.default>);
                 }} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
-                        <react_native_1.View style={styles_1.default.emptyIconWrap}>
-                          <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
-                        </react_native_1.View>
-                        <react_native_1.Text style={styles_1.default.emptyTitle}>No Top Events</react_native_1.Text>
-                      </react_native_1.View>}/>) : (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={item => item.id.toString()} renderItem={({ item, index }) => {
+                            <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                              <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
+                            </react_native_1.View>
+                            <react_native_1.Text style={styles_1.default.emptyTitle}>No Top Events</react_native_1.Text>
+                          </react_native_1.View>}/>) : (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={item => item.id.toString()} renderItem={({ item, index }) => {
                     const prev = filteredAnalyticsEvents[index + 1];
                     const next = filteredAnalyticsEvents[index - 1];
                     const msSincePrev = prev
@@ -2235,7 +2774,11 @@ const NetworkInspector = ({ enabled = true }) => {
                         ? Math.floor(next.timestamp / 60000)
                         : -1;
                     const showTimestamp = index === 0 || thisMin !== nextMin;
-                    return (<AnalyticsEventCard_1.default event={item} onPress={() => setSelectedEvent(item)} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
+                    return (<AnimatedEntrance_1.default index={index} distance={8}>
+                              <AnalyticsEventCard_1.default event={item} onPress={() => {
+                            animateNextLayout();
+                            setSelectedEvent(item);
+                        }} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
                             let screenName = item.screenName ||
                                 item.screenClass ||
                                 item.pageTitle ||
@@ -2253,69 +2796,71 @@ const NetworkInspector = ({ enabled = true }) => {
                                 }
                             }
                             return screenName;
-                        })()}/>);
+                        })()}/>
+                            </AnimatedEntrance_1.default>);
                 }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
-                        <react_native_1.View style={styles_1.default.emptyIconWrap}>
-                          <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
-                        </react_native_1.View>
-                        <react_native_1.Text style={styles_1.default.emptyTitle}>
-                          {analyticsSearch.length > 0
+                            <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                              <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
+                            </react_native_1.View>
+                            <react_native_1.Text style={styles_1.default.emptyTitle}>
+                              {analyticsSearch.length > 0
                         ? 'No matching events'
                         : 'No analytics events yet'}
-                        </react_native_1.Text>
-                        <react_native_1.Text style={styles_1.default.emptySub}>
-                          {analyticsSearch.length > 0
+                            </react_native_1.Text>
+                            <react_native_1.Text style={styles_1.default.emptySub}>
+                              {analyticsSearch.length > 0
                         ? 'Try adjusting your search.'
                         : 'Call setupAnalyticsLogger(analytics()) at app start.'}
-                        </react_native_1.Text>
-                      </react_native_1.View>} contentContainerStyle={[
+                            </react_native_1.Text>
+                          </react_native_1.View>} contentContainerStyle={[
                     styles_1.default.listContent,
-                    filteredAnalyticsEvents.length === 0 && { flexGrow: 1 },
+                    filteredAnalyticsEvents.length === 0 && {
+                        flexGrow: 1,
+                    },
                 ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<react_native_1.FlatList data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
-                        <react_native_1.View style={styles_1.default.toolbarRow}>
-                          <react_native_1.View style={styles_1.default.searchContainer}>
-                            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-                            <react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                            {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                              </react_native_1.Pressable>)}
-                          </react_native_1.View>
-
-                          <react_native_1.View style={styles_1.default.toolbarRight}>
-                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
-                              {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
-                                  <react_native_1.Text style={styles_1.default.trashBadgeText}>
-                                    {selectedLogs.size}
-                                  </react_native_1.Text>
-                                </react_native_1.View>)}
-                            </TouchableScale_1.default>
+                          <react_native_1.View style={styles_1.default.toolbarRow}>
+                            <react_native_1.View style={styles_1.default.searchContainer}>
+                              <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                              <react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                              {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                                  <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                                </react_native_1.Pressable>)}
+                            </react_native_1.View>
 
+                            <react_native_1.View style={styles_1.default.toolbarRight}>
+                              <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
+                                <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                                {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
+                                    <react_native_1.Text style={styles_1.default.trashBadgeText}>
+                                      {selectedLogs.size}
+                                    </react_native_1.Text>
+                                  </react_native_1.View>)}
+                              </TouchableScale_1.default>
 
-                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
-                              <NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
-                            </TouchableScale_1.default>
+                              <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+                                <NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                              </TouchableScale_1.default>
 
-                            <TouchableScale_1.default style={[
+                              <TouchableScale_1.default style={[
                         styles_1.default.toolbarBtn,
                         filtersAccordion.isOpen &&
                             styles_1.default.toolbarBtnActive,
                     ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
-                              <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
+                                <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
                         ? AppColors_1.AppColors.purple
                         : AppColors_1.AppColors.grayTextStrong} size={18}/>
-                            </TouchableScale_1.default>
+                              </TouchableScale_1.default>
+                            </react_native_1.View>
                           </react_native_1.View>
-                        </react_native_1.View>
 
-                        <react_native_1.Animated.View style={[
+                          <react_native_1.Animated.View style={[
                         filtersAccordion.bodyStyle,
                         { overflow: 'hidden' },
                     ]}>
-                          <react_native_1.View style={styles_1.default.filtersContainer}>
-                            <react_native_1.Text style={styles_1.default.filtersHeading}>STATUS</react_native_1.Text>
-                            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                              {constants_1.STATUS_FILTERS.map(filter => {
+                            <react_native_1.View style={styles_1.default.filtersContainer}>
+                              <react_native_1.Text style={styles_1.default.filtersHeading}>STATUS</react_native_1.Text>
+                              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                                {constants_1.STATUS_FILTERS.map(filter => {
                         const isAll = filter === 'ALL';
                         const active = isAll
                             ? statusFilters.size === 0
@@ -2334,35 +2879,38 @@ const NetworkInspector = ({ enabled = true }) => {
                                     });
                                 }
                             }} hitSlop={10}>
-                                    {active ? (<react_native_1.View style={[
+                                      {active ? (<react_native_1.View style={[
                                     styles_1.default.statusFilterChip,
                                     styles_1.default.statusFilterActive,
                                     { overflow: 'hidden' },
                                 ]}>
-                                        <react_native_linear_gradient_1.default colors={[
+                                          <react_native_linear_gradient_1.default colors={[
                                     AppColors_1.AppColors.purpleShade50,
                                     '#EAE5FF',
                                 ]} style={react_native_1.StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
-                                        <react_native_1.Text style={[
+                                          <react_native_1.Text style={[
                                     styles_1.default.statusFilterText,
                                     { color: AppColors_1.AppColors.purple },
                                 ]}>
-                                          {filter}
-                                        </react_native_1.Text>
-                                      </react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
-                                        <react_native_1.Text style={styles_1.default.statusFilterText}>
-                                          {filter}
-                                        </react_native_1.Text>
-                                      </react_native_1.View>)}
-                                  </TouchableScale_1.default>);
+                                            {filter}
+                                          </react_native_1.Text>
+                                        </react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
+                                          <react_native_1.Text style={styles_1.default.statusFilterText}>
+                                            {filter}
+                                          </react_native_1.Text>
+                                        </react_native_1.View>)}
+                                    </TouchableScale_1.default>);
                     })}
-                            </react_native_1.ScrollView>
+                              </react_native_1.ScrollView>
 
-                            <react_native_1.Text style={[styles_1.default.filtersHeading, { marginTop: 16 }]}>
-                              METHOD
-                            </react_native_1.Text>
-                            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                              {availableMethods.map(filter => {
+                              <react_native_1.Text style={[
+                        styles_1.default.filtersHeading,
+                        { marginTop: 16 },
+                    ]}>
+                                METHOD
+                              </react_native_1.Text>
+                              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                                {availableMethods.map(filter => {
                         const isAll = filter === 'ALL';
                         const active = isAll
                             ? methodFilters.size === 0
@@ -2381,101 +2929,101 @@ const NetworkInspector = ({ enabled = true }) => {
                                     });
                                 }
                             }} hitSlop={10}>
-                                    {active ? (<react_native_1.View style={[
+                                      {active ? (<react_native_1.View style={[
                                     styles_1.default.statusFilterChip,
                                     styles_1.default.statusFilterActive,
                                     { overflow: 'hidden' },
                                 ]}>
-                                        <react_native_linear_gradient_1.default colors={[
+                                          <react_native_linear_gradient_1.default colors={[
                                     AppColors_1.AppColors.purpleShade50,
                                     '#EAE5FF',
                                 ]} style={react_native_1.StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
-                                        <react_native_1.Text style={[
+                                          <react_native_1.Text style={[
                                     styles_1.default.statusFilterText,
                                     { color: AppColors_1.AppColors.purple },
                                 ]}>
-                                          {filter}
-                                        </react_native_1.Text>
-                                      </react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
-                                        <react_native_1.Text style={styles_1.default.statusFilterText}>
-                                          {filter}
-                                        </react_native_1.Text>
-                                      </react_native_1.View>)}
-                                  </TouchableScale_1.default>);
+                                            {filter}
+                                          </react_native_1.Text>
+                                        </react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
+                                          <react_native_1.Text style={styles_1.default.statusFilterText}>
+                                            {filter}
+                                          </react_native_1.Text>
+                                        </react_native_1.View>)}
+                                    </TouchableScale_1.default>);
                     })}
-                            </react_native_1.ScrollView>
-                          </react_native_1.View>
-                        </react_native_1.Animated.View>
+                              </react_native_1.ScrollView>
+                            </react_native_1.View>
+                          </react_native_1.Animated.View>
 
-                        {(search ||
+                          {(search ||
                         statusFilters.size > 0 ||
                         methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
-                            {filteredLogs.length === logs.length
+                              {filteredLogs.length === logs.length
                             ? `${logs.length} requests`
                             : `${filteredLogs.length} of ${logs.length} filtered requests`}
-                          </react_native_1.Text>)}
-                      </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
+                            </react_native_1.Text>)}
+                        </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
                     styles_1.default.listContent,
                     filteredLogs.length === 0 && { flexGrow: 1 },
                 ]} keyboardShouldPersistTaps="handled"/>) : activeTab === 'logs' ? (<react_native_1.View style={{ flex: 1 }}>
-                  <react_native_1.View style={{
+                      <react_native_1.View style={{
                     backgroundColor: '#FFFFFF',
                     borderBottomWidth: 1,
                     borderBottomColor: AppColors_1.AppColors.dividerColor,
                     paddingBottom: 6,
                 }}>
-                    <react_native_1.View style={[
+                        <react_native_1.View style={[
                     styles_1.default.toolbarRow,
                     { marginTop: 12, marginBottom: 8 },
                 ]}>
-                      <react_native_1.View style={styles_1.default.searchContainer}>
-                        <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-                        <react_native_1.TextInput placeholder="Search logs..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                        {logSearch.length > 0 && (<react_native_1.Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                            <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                          </react_native_1.Pressable>)}
-                      </react_native_1.View>
+                          <react_native_1.View style={styles_1.default.searchContainer}>
+                            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                            <react_native_1.TextInput placeholder="Search logs..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                            {logSearch.length > 0 && (<react_native_1.Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                              </react_native_1.Pressable>)}
+                          </react_native_1.View>
 
-                      <react_native_1.View style={styles_1.default.toolbarRight}>
-                        <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                          <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
-                        </TouchableScale_1.default>
-                      </react_native_1.View>
-                    </react_native_1.View>
+                          <react_native_1.View style={styles_1.default.toolbarRight}>
+                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
+                              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale_1.default>
+                          </react_native_1.View>
+                        </react_native_1.View>
 
-                    <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+                        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
                     paddingHorizontal: 16,
                     paddingBottom: 4,
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 8,
                 }}>
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('all');
                     return (<TouchableScale_1.default onPress={() => {
                             setLogFilters(new Set(['all']));
                         }}>
-                            <react_native_1.View style={[
+                                <react_native_1.View style={[
                             styles_1.default.statusFilterChip,
                             active && {
                                 borderColor: AppColors_1.AppColors.purpleShade700,
                                 backgroundColor: '#F4EBFF',
                             },
                         ]}>
-                              <react_native_1.Text numberOfLines={1} style={[
+                                  <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.purpleShade700,
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                All ({logCounts.all})
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                          </TouchableScale_1.default>);
+                                    All ({logCounts.all})
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </TouchableScale_1.default>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('user-log');
                     return (<TouchableScale_1.default onPress={() => {
                             setLogFilters(prev => {
@@ -2489,27 +3037,27 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <react_native_1.View style={[
+                                <react_native_1.View style={[
                             styles_1.default.statusFilterChip,
                             active && {
                                 borderColor: '#64748B',
                                 backgroundColor: '#F1F5F9',
                             },
                         ]}>
-                              <react_native_1.Text numberOfLines={1} style={[
+                                  <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: '#334155',
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                User Log ({logCounts['user-log']})
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                          </TouchableScale_1.default>);
+                                    User Log ({logCounts['user-log']})
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </TouchableScale_1.default>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('info');
                     return (<TouchableScale_1.default onPress={() => {
                             setLogFilters(prev => {
@@ -2523,27 +3071,27 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <react_native_1.View style={[
+                                <react_native_1.View style={[
                             styles_1.default.statusFilterChip,
                             active && {
                                 borderColor: AppColors_1.AppColors.purple,
                                 backgroundColor: AppColors_1.AppColors.purpleShade50,
                             },
                         ]}>
-                              <react_native_1.Text numberOfLines={1} style={[
+                                  <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.purple,
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                Info ({logCounts.info})
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                          </TouchableScale_1.default>);
+                                    Info ({logCounts.info})
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </TouchableScale_1.default>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('warn');
                     return (<TouchableScale_1.default onPress={() => {
                             setLogFilters(prev => {
@@ -2557,14 +3105,14 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <react_native_1.View style={[
+                                <react_native_1.View style={[
                             styles_1.default.statusFilterChip,
                             active && {
                                 borderColor: AppColors_1.AppColors.lightOrange,
                                 backgroundColor: '#FFFDF6',
                             },
                         ]}>
-                              <react_native_1.Text numberOfLines={1} style={[
+                                  <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.darkOrange ||
@@ -2572,13 +3120,13 @@ const NetworkInspector = ({ enabled = true }) => {
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                Warning ({logCounts.warn})
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                          </TouchableScale_1.default>);
+                                    Warning ({logCounts.warn})
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </TouchableScale_1.default>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('error');
                     return (<TouchableScale_1.default onPress={() => {
                             setLogFilters(prev => {
@@ -2592,27 +3140,27 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <react_native_1.View style={[
+                                <react_native_1.View style={[
                             styles_1.default.statusFilterChip,
                             active && {
                                 borderColor: AppColors_1.AppColors.errorColor,
                                 backgroundColor: '#FFF5F6',
                             },
                         ]}>
-                              <react_native_1.Text numberOfLines={1} style={[
+                                  <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.errorColor,
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                Error ({logCounts.error})
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                          </TouchableScale_1.default>);
+                                    Error ({logCounts.error})
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </TouchableScale_1.default>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('analytics');
                     return (<TouchableScale_1.default onPress={() => {
                             setLogFilters(prev => {
@@ -2626,29 +3174,29 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <react_native_1.View style={[
+                                <react_native_1.View style={[
                             styles_1.default.statusFilterChip,
                             active && {
                                 borderColor: AppColors_1.AppColors.skyBlue,
                                 backgroundColor: `${AppColors_1.AppColors.skyBlue}15`,
                             },
                         ]}>
-                              <react_native_1.Text numberOfLines={1} style={[
+                                  <react_native_1.Text numberOfLines={1} style={[
                             styles_1.default.statusFilterText,
                             active && {
                                 color: AppColors_1.AppColors.skyBlue,
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                             },
                         ]}>
-                                Analytics ({logCounts.analytics})
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                          </TouchableScale_1.default>);
+                                    Analytics ({logCounts.analytics})
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </TouchableScale_1.default>);
                 })()}
-                    </react_native_1.ScrollView>
-                  </react_native_1.View>
+                        </react_native_1.ScrollView>
+                      </react_native_1.View>
 
-                  <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={item => item.id.toString()} ListHeaderComponent={(() => {
+                      <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={item => item.id.toString()} ListHeaderComponent={(() => {
                     const total = visibleConsoleLogs.length;
                     const filtered = filteredConsoleLogs.length;
                     const isAllSelected = logFilters.has('all') ||
@@ -2658,8 +3206,8 @@ const NetworkInspector = ({ enabled = true }) => {
                                 styles_1.default.resultCount,
                                 { marginBottom: 4, marginTop: 12 },
                             ]}>
-                            Showing ({filtered}/{total}) logs showing
-                          </react_native_1.Text>);
+                                Showing ({filtered}/{total}) logs showing
+                              </react_native_1.Text>);
                     }
                     else {
                         const activeFilterNames = Array.from(logFilters)
@@ -2669,31 +3217,37 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return 'User Log';
                             if (f === 'analytics')
                                 return 'Analytics';
-                            return f.charAt(0).toUpperCase() + f.slice(1);
+                            return (f.charAt(0).toUpperCase() +
+                                f.slice(1));
                         });
                         return (<react_native_1.Text style={[
                                 styles_1.default.resultCount,
                                 { marginBottom: 4, marginTop: 12 },
                             ]}>
-                            Filtering with {activeFilterNames.join(', ')} (
-                            {filtered}/{total}) logs is showing
-                          </react_native_1.Text>);
+                                Filtering with {activeFilterNames.join(', ')} (
+                                {filtered}/{total}) logs is showing
+                              </react_native_1.Text>);
                     }
-                })()} renderItem={({ item }) => (<ConsoleLogCard_1.ConsoleLogCard item={item} searchStr={logSearch}/>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
+                })()} renderItem={({ item, index }) => (<AnimatedEntrance_1.default index={index} distance={8}>
+                            <ConsoleLogCard_1.ConsoleLogCard item={item} searchStr={logSearch}/>
+                          </AnimatedEntrance_1.default>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
                     styles_1.default.listContent,
                     filteredConsoleLogs.length === 0 && { flexGrow: 1 },
                 ]} keyboardShouldPersistTaps="handled"/>
-                </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) ─── */}
-                  {(() => {
+                    </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;
@@ -2705,7 +3259,7 @@ const NetworkInspector = ({ enabled = true }) => {
                             borderBottomWidth: 1,
                             borderBottomColor: AppColors_1.AppColors.dividerColor,
                         }}>
-                        <react_native_1.View style={{
+                              <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             backgroundColor: AppColors_1.AppColors.grayBackground,
@@ -2716,27 +3270,42 @@ const NetworkInspector = ({ enabled = true }) => {
                             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 }}/>
+                                {/* 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={{
+                                {/* 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>
+                                </react_native_1.View>
 
-                          {/* Right: Copy Button */}
-                          <CopyButton_1.default value={currentUrl} label="URL"/>
+                                {/* 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={{
+                                {/* 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,
@@ -2746,26 +3315,26 @@ const NetworkInspector = ({ enabled = true }) => {
                             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>);
+                                  <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={{
+                        {/* ─── WebView Sub-Tabs (Now below Address Bar) ─── */}
+                        <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
                     borderBottomWidth: 1,
                     borderBottomColor: AppColors_1.AppColors.dividerColor,
                     paddingVertical: 6,
                 }}>
-                    <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                          <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
                     paddingHorizontal: 12,
                     flexDirection: 'row',
                     gap: 8,
                 }}>
-                      {/* Sub-tab 1: Preview */}
-                      <react_native_1.Pressable style={[
+                            {/* Sub-tab 1: Preview */}
+                            <react_native_1.Pressable style={[
                     {
                         paddingVertical: 6,
                         paddingHorizontal: 14,
@@ -2781,19 +3350,28 @@ const NetworkInspector = ({ enabled = true }) => {
                         backgroundColor: AppColors_1.AppColors.purple,
                         borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} 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,
+                ]} onPress={() => {
+                    animateNextLayout();
+                    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,
+                    color: webViewSubTab === 'preview'
+                        ? '#FFFFFF'
+                        : AppColors_1.AppColors.grayTextStrong,
                 }}>
-                          Preview
-                        </react_native_1.Text>
-                      </react_native_1.Pressable>
+                                Preview
+                              </react_native_1.Text>
+                            </react_native_1.Pressable>
 
-                      {/* Sub-tab 2: Page Source */}
-                      <react_native_1.Pressable style={[
+                            {/* Sub-tab 2: Page Source */}
+                            <react_native_1.Pressable style={[
                     {
                         paddingVertical: 6,
                         paddingHorizontal: 14,
@@ -2809,19 +3387,28 @@ const NetworkInspector = ({ enabled = true }) => {
                         backgroundColor: AppColors_1.AppColors.purple,
                         borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} 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,
+                ]} onPress={() => {
+                    animateNextLayout();
+                    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,
+                    color: webViewSubTab === 'html'
+                        ? '#FFFFFF'
+                        : AppColors_1.AppColors.grayTextStrong,
                 }}>
-                          Page Source
-                        </react_native_1.Text>
-                      </react_native_1.Pressable>
+                                Page Source
+                              </react_native_1.Text>
+                            </react_native_1.Pressable>
 
-                      {/* Sub-tab 3: History */}
-                      <react_native_1.Pressable style={[
+                            {/* Sub-tab 3: History */}
+                            <react_native_1.Pressable style={[
                     {
                         paddingVertical: 6,
                         paddingHorizontal: 14,
@@ -2837,19 +3424,28 @@ const NetworkInspector = ({ enabled = true }) => {
                         backgroundColor: AppColors_1.AppColors.purple,
                         borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('navigation')}>
-                        <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,
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('navigation');
+                }}>
+                              <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,
+                    color: webViewSubTab === 'navigation'
+                        ? '#FFFFFF'
+                        : AppColors_1.AppColors.grayTextStrong,
                 }}>
-                          History ({webViewNavHistory.length})
-                        </react_native_1.Text>
-                      </react_native_1.Pressable>
+                                History ({webViewNavHistory.length})
+                              </react_native_1.Text>
+                            </react_native_1.Pressable>
 
-                      {/* Sub-tab 4: Console */}
-                      <react_native_1.Pressable style={[
+                            {/* Sub-tab 4: Console */}
+                            <react_native_1.Pressable style={[
                     {
                         paddingVertical: 6,
                         paddingHorizontal: 14,
@@ -2865,23 +3461,32 @@ const NetworkInspector = ({ enabled = true }) => {
                         backgroundColor: AppColors_1.AppColors.purple,
                         borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} 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,
+                ]} onPress={() => {
+                    animateNextLayout();
+                    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,
+                    color: webViewSubTab === 'console'
+                        ? '#FFFFFF'
+                        : AppColors_1.AppColors.grayTextStrong,
                 }}>
-                          Console ({webViewLogs.length})
-                        </react_native_1.Text>
-                      </react_native_1.Pressable>
-                    </react_native_1.ScrollView>
-                  </react_native_1.View>
+                                Console ({webViewLogs.length})
+                              </react_native_1.Text>
+                            </react_native_1.Pressable>
+                          </react_native_1.ScrollView>
+                        </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={{
+                        {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',
@@ -2891,36 +3496,44 @@ const NetworkInspector = ({ enabled = true }) => {
                                 borderBottomWidth: 1,
                                 borderBottomColor: AppColors_1.AppColors.dividerColor,
                             }}>
-                              <react_native_1.Text style={{
+                                    <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={{
+                                      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={{
+                                      <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>)}
+                                        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={{
+                                {/* Inner sub-tabs inside HTML source view */}
+                                <react_native_1.View style={{
                             flexDirection: 'row',
                             borderBottomWidth: 1,
                             borderBottomColor: AppColors_1.AppColors.dividerColor,
@@ -2928,7 +3541,7 @@ const NetworkInspector = ({ enabled = true }) => {
                             paddingHorizontal: 12,
                             gap: 12,
                         }}>
-                            {['html', 'css', 'javascript'].map(tab => {
+                                  {['html', 'css', 'javascript'].map(tab => {
                             const active = htmlSubTab === tab;
                             const label = tab === 'html'
                                 ? 'HTML'
@@ -2940,7 +3553,10 @@ const NetworkInspector = ({ enabled = true }) => {
                                 : tab === 'css'
                                     ? '#2563EB' // Blue
                                     : '#D97706'; // Dark Yellow/Amber
-                            return (<react_native_1.Pressable key={tab} onPress={() => setHtmlSubTab(tab)} style={{
+                            return (<react_native_1.Pressable key={tab} onPress={() => {
+                                    animateNextLayout();
+                                    setHtmlSubTab(tab);
+                                }} style={{
                                     paddingVertical: 8,
                                     paddingHorizontal: 4,
                                     borderBottomWidth: 2,
@@ -2951,10 +3567,16 @@ const NetworkInspector = ({ enabled = true }) => {
                                     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={{
+                                          {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,
@@ -2963,70 +3585,81 @@ const NetworkInspector = ({ enabled = true }) => {
                                         ? activeColor
                                         : AppColors_1.AppColors.grayTextWeak,
                                 }}>
-                                      {label}
-                                    </react_native_1.Text>
-                                  </react_native_1.Pressable>);
+                                            {label}
+                                          </react_native_1.Text>
+                                        </react_native_1.Pressable>);
                         })}
-                          </react_native_1.View>
-                          <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" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
+                                </react_native_1.View>
+                                <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" 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" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
+                                        No HTML content captured.
+                                      </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" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
+                                        No CSS styles detected on this page.
+                                      </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',
                                 padding: 12,
                             }}>
-                                No scripts detected on this page.
-                              </react_native_1.Text>)}
-                          </react_native_1.View>
-                        </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 Page Source Captured
-                          </react_native_1.Text>
-                          <react_native_1.Text style={styles_1.default.emptySub}>
-                            Load a page in the WebView to inspect its HTML, CSS,
-                            or Javascript source.
-                          </react_native_1.Text>
-                        </react_native_1.View>)}
-                    </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={{
+                                      No scripts detected on this page.
+                                    </react_native_1.Text>)}
+                                </react_native_1.View>
+                              </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 Page Source Captured
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.emptySub}>
+                                  Load a page in the WebView to inspect its
+                                  HTML, CSS, or Javascript source.
+                                </react_native_1.Text>
+                              </react_native_1.View>)}
+                          </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,
                         }}>
-                          <react_native_1.Text style={styles_1.default.resultCount}>
-                            Navigation History ({webViewNavHistory.length})
-                          </react_native_1.Text>
-                        </react_native_1.View>} renderItem={({ item, index, }) => {
+                                <react_native_1.Text style={styles_1.default.resultCount}>
+                                  Navigation History ({webViewNavHistory.length}
+                                  )
+                                </react_native_1.Text>
+                              </react_native_1.View>} renderItem={({ item, index, }) => {
                         const isLatest = index === 0;
                         const formatNavTime = (ts) => {
                             const d = new Date(ts);
                             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={{
+                        return (<AnimatedEntrance_1.default index={index} distance={8} style={{
                                 marginHorizontal: 16,
                                 marginVertical: 6,
                                 borderRadius: 12,
                                 borderWidth: 1,
                                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                                backgroundColor: isLatest ? AppColors_1.AppColors.purpleShade50 : AppColors_1.AppColors.primaryLight,
+                                backgroundColor: isLatest
+                                    ? AppColors_1.AppColors.purpleShade50
+                                    : AppColors_1.AppColors.primaryLight,
                                 padding: 14,
                                 flexDirection: 'row',
                                 alignItems: 'center',
@@ -3038,23 +3671,23 @@ const NetworkInspector = ({ enabled = true }) => {
                                 shadowRadius: 4,
                                 elevation: 2,
                             }}>
-                            <react_native_1.View style={{ flex: 1, gap: 8 }}>
-                              {/* Top row: Title and Badge */}
-                              <react_native_1.View style={{
+                                  <react_native_1.View style={{ flex: 1, gap: 8 }}>
+                                    {/* Top row: Title and Badge */}
+                                    <react_native_1.View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 gap: 8,
                                 flexWrap: 'wrap',
                             }}>
-                                <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={{
+                                      <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={{
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                                 fontSize: 14,
                                 color: AppColors_1.AppColors.primaryBlack,
                                 flexShrink: 1,
                             }}>
-                                  {item.title || 'Untitled Page'}
-                                </react_native_1.Text>
-                                {isLatest && (<react_native_1.View style={{
+                                        {item.title || 'Untitled Page'}
+                                      </react_native_1.Text>
+                                      {isLatest && (<react_native_1.View style={{
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: 4,
@@ -3063,65 +3696,100 @@ const NetworkInspector = ({ enabled = true }) => {
                                     paddingVertical: 3,
                                     borderRadius: 12,
                                 }}>
-                                    <react_native_1.View style={{
+                                          <react_native_1.View style={{
                                     width: 6,
                                     height: 6,
                                     borderRadius: 3,
                                     backgroundColor: AppColors_1.AppColors.greenBaggageText,
                                 }}/>
-                                    <react_native_1.Text style={{
+                                          <react_native_1.Text style={{
                                     fontFamily: AppFonts_1.AppFonts.interBold,
                                     fontSize: 9.5,
                                     color: AppColors_1.AppColors.greenBaggageText,
                                 }}>
-                                      Active
-                                    </react_native_1.Text>
-                                  </react_native_1.View>)}
-                              </react_native_1.View>
+                                            Active
+                                          </react_native_1.Text>
+                                        </react_native_1.View>)}
+                                    </react_native_1.View>
 
-                              {/* 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={{
+                                    {/* 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: 12,
                                 color: AppColors_1.AppColors.grayText,
                                 flex: 1,
                             }} highlightStyle={styles_1.default.highlight} detectLinks={true}/>
-                              </react_native_1.View>
+                                    </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="URL"/>
-                          </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="URL"/>
+                                </AnimatedEntrance_1.default>);
                     }} 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"/>) : 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;
+                        filteredNavHistory.length === 0 && {
+                            flexGrow: 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={{
+                            return (<AnimatedEntrance_1.default index={item.id} distance={8} style={{
                                     marginHorizontal: 12,
                                     marginVertical: 3,
                                     borderRadius: 8,
@@ -3135,34 +3803,65 @@ const NetworkInspector = ({ enabled = true }) => {
                                     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 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>
+                                    </AnimatedEntrance_1.default>);
+                        }} 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.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) => {
+                                <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') {
@@ -3177,27 +3876,39 @@ const NetworkInspector = ({ enabled = true }) => {
                                 }
                             }
                             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 }}>
-                    <react_native_1.View style={styles_1.default.detailInfoBar}>
-                      {(() => {
+                        }} 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 }}>
+                        <react_native_1.View style={styles_1.default.detailInfoBar}>
+                          {(() => {
                     let hostStr = '';
                     let pathStr = detailDisplayUrl;
                     let queryStr = '';
@@ -3226,31 +3937,29 @@ const NetworkInspector = ({ enabled = true }) => {
                     }
                     catch (e) { }
                     return (<>
-                            <react_native_1.View style={styles_1.default.detailInfoTop}>
-                              <react_native_1.View style={{
+                                <react_native_1.View style={styles_1.default.detailInfoTop}>
+                                  <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 8,
                         }}>
-                                <react_native_1.View style={[
+                                    <react_native_1.View style={[
                             styles_1.default.methodBadge,
                             {
-                                backgroundColor: `${constants_1.METHOD_COLORS[selected.method] ??
-                                    constants_1.METHOD_COLORS.ALL}15`,
+                                backgroundColor: `${constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL}15`,
                             },
                         ]}>
-                                  <react_native_1.Text style={[
+                                      <react_native_1.Text style={[
                             styles_1.default.methodBadgeText,
                             {
-                                color: constants_1.METHOD_COLORS[selected.method] ??
-                                    constants_1.METHOD_COLORS.ALL,
+                                color: constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL,
                             },
                         ]}>
-                                    {selected.method}
-                                  </react_native_1.Text>
-                                </react_native_1.View>
+                                        {selected.method}
+                                      </react_native_1.Text>
+                                    </react_native_1.View>
 
-                                {selected.status != null && (<react_native_1.View style={[
+                                    {selected.status != null && (<react_native_1.View style={[
                                 styles_1.default.chip,
                                 {
                                     backgroundColor: selected.status === 0
@@ -3261,10 +3970,10 @@ const NetworkInspector = ({ enabled = true }) => {
                                         : `${(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={[
+                                        {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
@@ -3272,29 +3981,38 @@ const NetworkInspector = ({ enabled = true }) => {
                                         : (0, helpers_1.getStatusColor)(selected.status),
                                 },
                             ]}>
-                                      {selected.status === 0
+                                          {selected.status === 0
                                 ? 'Failed'
                                 : String(selected.status)}
-                                    </react_native_1.Text>
-                                  </react_native_1.View>)}
+                                        </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.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>
 
-                            <react_native_1.Pressable style={{
+                                <react_native_1.Pressable style={{
                             backgroundColor: AppColors_1.AppColors.grayBackground,
                             borderRadius: 10,
                             borderWidth: 1,
@@ -3302,28 +4020,59 @@ const NetworkInspector = ({ enabled = true }) => {
                             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>
-                              {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 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>
+                                  {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>
+                        </react_native_1.View>
+                      </react_native_1.View>
 
-                  {/* Sticky Segment Control */}
-                  <react_native_1.View style={{
+                      {/* Sticky Segment Control */}
+                      <react_native_1.View style={{
                     flexDirection: 'row',
                     backgroundColor: AppColors_1.AppColors.grayBackground,
                     borderRadius: 10,
@@ -3334,7 +4083,12 @@ const NetworkInspector = ({ enabled = true }) => {
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.dividerColor,
                 }}>
-                    {['metadata', 'headers', 'request', 'response'].map(tab => {
+                        {[
+                    'metadata',
+                    'headers',
+                    'request',
+                    'response',
+                ].map(tab => {
                     const isActive = apiDetailActiveTab === tab;
                     if (tab === 'request' && selected.request == null)
                         return null;
@@ -3348,7 +4102,9 @@ const NetworkInspector = ({ enabled = true }) => {
                         return 'Response';
                     };
                     const getIcon = () => {
-                        const iconColor = isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText;
+                        const iconColor = isActive
+                            ? '#FFFFFF'
+                            : AppColors_1.AppColors.grayText;
                         if (tab === 'metadata')
                             return <NetworkIcons_1.StatusIcon color={iconColor}/>;
                         if (tab === 'headers')
@@ -3357,122 +4113,139 @@ const NetworkInspector = ({ enabled = true }) => {
                             return <NetworkIcons_1.RequestIcon color={iconColor}/>;
                         return <NetworkIcons_1.ResponseIcon color={iconColor}/>;
                     };
-                    return (<react_native_1.TouchableOpacity key={tab} onPress={() => setApiDetailActiveTab(tab)} style={{
+                    return (<react_native_1.TouchableOpacity key={tab} onPress={() => {
+                            animateNextLayout();
+                            setApiDetailActiveTab(tab);
+                        }} style={{
                             flex: 1,
                             paddingVertical: 6,
                             flexDirection: 'row',
                             alignItems: 'center',
                             justifyContent: 'center',
                             borderRadius: 8,
-                            backgroundColor: isActive ? AppColors_1.AppColors.purple : 'transparent',
+                            backgroundColor: isActive
+                                ? AppColors_1.AppColors.purple
+                                : 'transparent',
                             gap: 4,
                         }}>
-                          {getIcon()}
-                          <react_native_1.Text style={{
+                              {getIcon()}
+                              <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 10,
-                            color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+                            color: isActive
+                                ? '#FFFFFF'
+                                : AppColors_1.AppColors.grayText,
                         }}>
-                            {getLabel()}
-                          </react_native_1.Text>
-                        </react_native_1.TouchableOpacity>);
+                                {getLabel()}
+                              </react_native_1.Text>
+                            </react_native_1.TouchableOpacity>);
                 })}
-                  </react_native_1.View>
+                      </react_native_1.View>
 
-                  {/* 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)} method={selected.method} contentType={selected.responseHeaders?.['content-type'] ||
+                      {/* 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)} method={selected.method} contentType={selected.responseHeaders?.['content-type'] ||
                         selected.responseHeaders?.['Content-Type']} url={selected.url}/>
 
-                        {(() => {
+                            {(() => {
                         const routeInfo = logRouteMapRef.current.get(selected.id);
                         if (!routeInfo || routeInfo.path === 'Navigators')
                             return null;
                         return <SourcePageCard_1.default routeInfo={routeInfo}/>;
                     })()}
 
-                        {(() => {
+                            {(() => {
                         const cType = selected.responseHeaders?.['content-type'] ||
                             selected.responseHeaders?.['Content-Type'];
                         if (cType?.includes('image/')) {
                             return (<react_native_1.View style={styles_1.default.imagePreviewWrapper}>
-                                <react_native_1.Image source={{ uri: selected.url }} style={styles_1.default.imagePreview} resizeMode="contain"/>
-                                <TouchableScale_1.default style={styles_1.default.imageDownloadBtn} onPress={() => react_native_1.Linking.openURL(selected.url)} hitSlop={10}>
-                                  <NetworkIcons_1.DownloadIcon color={AppColors_1.AppColors.purple} size={18}/>
-                                </TouchableScale_1.default>
-                              </react_native_1.View>);
+                                    <react_native_1.Image source={{ uri: selected.url }} style={styles_1.default.imagePreview} resizeMode="contain"/>
+                                    <TouchableScale_1.default style={styles_1.default.imageDownloadBtn} onPress={() => react_native_1.Linking.openURL(selected.url)} hitSlop={10}>
+                                      <NetworkIcons_1.DownloadIcon color={AppColors_1.AppColors.purple} size={18}/>
+                                    </TouchableScale_1.default>
+                                  </react_native_1.View>);
                         }
                         return null;
                     })()}
-                      </>)}
+                          </>)}
 
-                    {apiDetailActiveTab === 'headers' && (<>
-                        <react_native_1.View style={styles_1.default.detailSearchRow}>
-                          <react_native_1.View style={styles_1.default.detailSearchBox}>
-                            <react_native_1.TextInput placeholder="Search headers..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                            {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                              </react_native_1.Pressable>)}
-                          </react_native_1.View>
-                        </react_native_1.View>
+                        {apiDetailActiveTab === 'headers' && (<>
+                            <react_native_1.View style={styles_1.default.detailSearchRow}>
+                              <react_native_1.View style={styles_1.default.detailSearchBox}>
+                                <react_native_1.TextInput placeholder="Search headers..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                                  </react_native_1.Pressable>)}
+                              </react_native_1.View>
+                            </react_native_1.View>
 
-                        <HeadersSection_1.default title="Request Headers" headers={selected.requestHeaders} search={detailSearch} resetKey={selected.id}/>
-                        <HeadersSection_1.default title="Response Headers" headers={selected.responseHeaders} search={detailSearch} resetKey={selected.id}/>
-                      </>)}
+                            <HeadersSection_1.default title="Request Headers" headers={selected.requestHeaders} search={detailSearch} resetKey={selected.id}/>
+                            <HeadersSection_1.default title="Response Headers" headers={selected.responseHeaders} search={detailSearch} resetKey={selected.id}/>
+                          </>)}
 
-                    {apiDetailActiveTab === 'request' && selected.request != null && (<>
-                        <react_native_1.View style={styles_1.default.detailSearchRow}>
-                          <react_native_1.View style={styles_1.default.detailSearchBox}>
-                            <react_native_1.TextInput placeholder="Search request..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                            {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                              </react_native_1.Pressable>)}
-                          </react_native_1.View>
-                        </react_native_1.View>
+                        {apiDetailActiveTab === 'request' &&
+                    selected.request != null && (<>
+                              <react_native_1.View style={styles_1.default.detailSearchRow}>
+                                <react_native_1.View style={styles_1.default.detailSearchBox}>
+                                  <react_native_1.TextInput placeholder="Search request..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                                  {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                                    </react_native_1.Pressable>)}
+                                </react_native_1.View>
+                              </react_native_1.View>
 
-                        <react_native_1.View style={styles_1.default.sectionContainer}>
-                          <SectionHeader_1.default title="Request" value={selected.request} expanded={reqExpanded} onToggleExpand={() => setReqExpanded(v => !v)} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={() => {
+                              <react_native_1.View style={styles_1.default.sectionContainer}>
+                                <SectionHeader_1.default title="Request" value={selected.request} expanded={reqExpanded} onToggleExpand={() => setReqExpanded(v => !v)} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={() => {
                         setShowReqDiff(v => !v);
                         if (!reqExpanded && !showReqDiff)
                             setReqExpanded(true);
                     }}/>
-                          {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen={reqExpanded}/>)}
-                        </react_native_1.View>
-                      </>)}
+                                {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen={reqExpanded}/>)}
+                              </react_native_1.View>
+                            </>)}
 
-                    {apiDetailActiveTab === 'response' && (<>
-                        <react_native_1.View style={styles_1.default.detailSearchRow}>
-                          <react_native_1.View style={styles_1.default.detailSearchBox}>
-                            <react_native_1.TextInput placeholder="Search response..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                            {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                              </react_native_1.Pressable>)}
-                          </react_native_1.View>
-                        </react_native_1.View>
+                        {apiDetailActiveTab === 'response' && (<>
+                            <react_native_1.View style={styles_1.default.detailSearchRow}>
+                              <react_native_1.View style={styles_1.default.detailSearchBox}>
+                                <react_native_1.TextInput placeholder="Search response..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                                  </react_native_1.Pressable>)}
+                              </react_native_1.View>
+                            </react_native_1.View>
 
-                        <react_native_1.View style={styles_1.default.sectionContainer}>
-                          <SectionHeader_1.default title="Response" value={selected.response} expanded={resExpanded} onToggleExpand={() => setResExpanded(v => !v)} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={() => {
+                            <react_native_1.View style={styles_1.default.sectionContainer}>
+                              <SectionHeader_1.default title="Response" value={selected.response} expanded={resExpanded} onToggleExpand={() => setResExpanded(v => !v)} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={() => {
                         setShowResDiff(v => !v);
                         if (!resExpanded && !showResDiff)
                             setResExpanded(true);
                     }}/>
-                          {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen={resExpanded}/>)}
-                        </react_native_1.View>
-                      </>)}
-                  </react_native_1.ScrollView>
-                </react_native_1.View>)) : (<react_native_1.View style={styles_1.default.empty}>
-                <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
-                <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
-                  Loading logs...
-                </react_native_1.Text>
-              </react_native_1.View>)}
+                              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen={resExpanded}/>)}
+                            </react_native_1.View>
+                          </>)}
+                      </react_native_1.ScrollView>
+                    </react_native_1.View>)) : (<react_native_1.View style={styles_1.default.empty}>
+                    <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
+                    <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
+                      Loading logs...
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
 
-            {settingsPage !== null && (<react_native_1.View style={[react_native_1.StyleSheet.absoluteFill, { backgroundColor: AppColors_1.AppColors.grayBackground, zIndex: 99999 }]}>
-                {renderSettings()}
-              </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>
-          </react_native_1.View>
           </ErrorBoundary_1.default>)}
       </react_native_1.Modal>
     </>);