react-native-inapp-inspector 1.0.14 → 1.0.16

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Alert, Animated, StyleSheet, FlatList, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, LogBox, } from 'react-native';
+import { Alert, Animated, StyleSheet, FlatList, LayoutAnimation, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, UIManager, LogBox, } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 import LinearGradient from 'react-native-linear-gradient';
 import { useNavigationState, NavigationContext } from '@react-navigation/native';
@@ -20,6 +20,7 @@ import SourcePageCard from './components/SourcePageCard';
 import { ConsoleLogCard } from './components/ConsoleLogCard';
 import HighlightText from './components/HighlightText';
 import CodeSnippet from './components/CodeSnippet';
+import AnimatedEntrance from './components/AnimatedEntrance';
 // Helpers
 import { formatDateTime, getStatusColor, getNavigationInfo, deduplicateLogs, getDomainColor, formatDisplayUrl, getFetchCommand, getCurlCommand, getSize, } from './helpers';
 // Assets
@@ -34,7 +35,7 @@ import { setupNetworkLogger, clearNetworkLogs, subscribeNetworkLogs, } from './c
 // Console
 import { setupConsoleLogger, clearConsoleLogs, subscribeConsoleLogs, } from './customHooks/consoleLogger';
 import { IGNORED_LOG_PREFIXES } from './customHooks/logFilters';
-import { subscribeAnalyticsEvents, clearAnalyticsEvents, } from './customHooks/analyticsLogger';
+import { subscribeAnalyticsEvents, clearAnalyticsEvents, autoSetupAnalyticsLogger, } from './customHooks/analyticsLogger';
 import AnalyticsEventCard, { getEventColor, } from './components/AnalyticsEventCard';
 import AnalyticsDetail from './components/AnalyticsDetail';
 import { getWebViewLogs, getWebViewNavHistory, getWebViewHtml, getWebViewCss, getWebViewJs, getWebViewHtmlUrl, clearWebViewData, subscribeWebView, } from './customHooks/webViewLogger';
@@ -107,7 +108,10 @@ const NavigationTracker = ({ onStateChange }) => {
     }, [navState, onStateChange]);
     return null;
 };
-const NetworkInspector = ({ enabled = true }) => {
+const animateNextLayout = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+};
+const NetworkInspector = ({ enabled = true, }) => {
     const [isDark, setIsDark] = useState(false);
     const [reduxState, setReduxState] = useState(null);
     const [expandedReducers, setExpandedReducers] = useState({});
@@ -122,16 +126,11 @@ const NetworkInspector = ({ enabled = true }) => {
     const [reduxActiveSubTab, setReduxActiveSubTab] = useState('timeline');
     const [apiDetailActiveTab, setApiDetailActiveTab] = useState('response');
     useEffect(() => {
-        if (enabled && visible) {
-            LogBox.ignoreAllLogs(true);
-        }
-        else {
-            LogBox.ignoreAllLogs(false);
-        }
+        LogBox.ignoreAllLogs(enabled);
         return () => {
             LogBox.ignoreAllLogs(false);
         };
-    }, [enabled, visible]);
+    }, [enabled]);
     useEffect(() => {
         if (selected) {
             setApiDetailActiveTab('response');
@@ -240,12 +239,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 = useCallback((key) => {
+        animateNextLayout();
+        setActiveTab(key);
+    }, []);
     const navigateFromDashboard = (key) => {
+        animateNextLayout();
         setTabVisibility(prev => ({ ...prev, [key]: true }));
         setActiveTab(key);
     };
@@ -318,6 +323,11 @@ const NetworkInspector = ({ enabled = true }) => {
     const badgeAnim = useRef(new Animated.Value(1)).current;
     const activePulseAnim = useRef(new Animated.Value(0.4)).current;
     const unreadPulseAnim = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        if (Platform.OS === 'android') {
+            UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
     useEffect(() => {
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(pulseAnim, {
@@ -393,7 +403,7 @@ const NetworkInspector = ({ enabled = true }) => {
         setupNetworkLogger();
         clearNetworkLogs();
         setupConsoleLogger();
-        // Note: setupAnalyticsLogger(analytics()) is called by the consumer at app startup
+        autoSetupAnalyticsLogger();
         let timeoutId;
         const unsubscribe = subscribeNetworkLogs((raw) => {
             clearTimeout(timeoutId);
@@ -777,6 +787,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);
@@ -894,12 +905,14 @@ const NetworkInspector = ({ enabled = true }) => {
             return next;
         });
     }, []);
-    const renderItem = useCallback(({ item }) => {
+    const renderItem = useCallback(({ item, index }) => {
         if (item.type === 'header') {
-            return (<DomainHeader 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 index={index} distance={8}>
+            <DomainHeader 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>);
         }
         const { log, isLast, color } = item;
-        return (<View style={styles.treeNodeRow}>
+        return (<AnimatedEntrance index={index} distance={8} style={styles.treeNodeRow}>
           <View style={styles.treeLines}>
             <View style={[
                 styles.modernTreeLine,
@@ -909,9 +922,12 @@ const NetworkInspector = ({ enabled = true }) => {
             {!isLast && (<View style={[styles.modernTreeBranch, { borderColor: color }]}/>)}
           </View>
           <View style={styles.treeCardWrapper}>
-            <LogCard item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => setSelected(log)} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
+            <LogCard item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => {
+                animateNextLayout();
+                setSelected(log);
+            }} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
           </View>
-        </View>);
+        </AnimatedEntrance>);
     }, [
         minStart,
         totalRange,
@@ -937,8 +953,9 @@ const NetworkInspector = ({ enabled = true }) => {
           <LinearGradient colors={[AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.headerGradient}>
             <View style={[styles.header, { paddingHorizontal: 16, gap: 12 }]}>
               <TouchableScale onPress={() => {
+                    animateNextLayout();
                     setSettingsPage(null);
-                    setActiveTab('apis');
+                    switchActiveTab('apis');
                 }} hitSlop={12} style={{
                     padding: 8,
                     borderRadius: 10,
@@ -949,8 +966,21 @@ const NetworkInspector = ({ enabled = true }) => {
                 <WhiteBackNavigation color="#FFFFFF" size={16}/>
               </TouchableScale>
               <View style={{ flex: 1 }}>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 17, color: '#FFFFFF' }}>Settings</Text>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: 'rgba(255,255,255,0.75)', marginTop: 1 }}>Manage modules and preferences</Text>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 17,
+                    color: '#FFFFFF',
+                }}>
+                  Settings
+                </Text>
+                <Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    color: 'rgba(255,255,255,0.75)',
+                    marginTop: 1,
+                }}>
+                  Manage modules and preferences
+                </Text>
               </View>
               <View style={{
                     backgroundColor: 'rgba(255, 255, 255, 0.15)',
@@ -958,17 +988,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)',
                 }}>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: '#FFFFFF' }}>v1.0.13</Text>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: '#FFFFFF',
+                }}>
+                  v1.0.13
+                </Text>
               </View>
             </View>
           </LinearGradient>
 
           <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
-
             {/* Tab list */}
-            <View style={{ backgroundColor: AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, overflow: 'hidden' }}>
+            <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                }}>
               {/* Table Header */}
               <View style={{
                     flexDirection: 'row',
@@ -980,8 +1021,26 @@ const NetworkInspector = ({ enabled = true }) => {
                     borderBottomColor: AppColors.dividerColor,
                     gap: 12,
                 }}>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10, color: AppColors.grayTextWeak, letterSpacing: 0.6, flex: 1 }}>MODULE</Text>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10, color: AppColors.grayTextWeak, letterSpacing: 0.6, width: 90, textAlign: 'right', paddingRight: 4 }}>VISIBILITY</Text>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors.grayTextWeak,
+                    letterSpacing: 0.6,
+                    flex: 1,
+                }}>
+                  MODULE
+                </Text>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors.grayTextWeak,
+                    letterSpacing: 0.6,
+                    width: 90,
+                    textAlign: 'right',
+                    paddingRight: 4,
+                }}>
+                  VISIBILITY
+                </Text>
               </View>
 
               {settingsTabs.map((tab, idx) => {
@@ -998,27 +1057,53 @@ const NetworkInspector = ({ enabled = true }) => {
                             gap: 12,
                         }}>
                     {/* Icon + Label — fills remaining space */}
-                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <View style={{
+                            flex: 1,
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 8,
+                        }}>
                       {/* Small icon tile */}
                       <View style={{
-                            width: 20, height: 20, borderRadius: 6,
-                            backgroundColor: isLocked ? AppColors.grayBorderSecondary : AppColors.purpleShade50,
+                            width: 20,
+                            height: 20,
+                            borderRadius: 6,
+                            backgroundColor: isLocked
+                                ? AppColors.grayBorderSecondary
+                                : AppColors.purpleShade50,
                             borderWidth: 1,
-                            borderColor: isLocked ? AppColors.dividerColor : 'rgba(104,75,155,0.2)',
-                            alignItems: 'center', justifyContent: 'center',
+                            borderColor: isLocked
+                                ? AppColors.dividerColor
+                                : 'rgba(104,75,155,0.2)',
+                            alignItems: 'center',
+                            justifyContent: 'center',
                         }}>
-                        {tab.icon === 'insights' && <InsightsIcon color={isLocked ? AppColors.grayTextWeak : AppColors.purple} size={11}/>}
-                        {tab.icon === 'apis' && <SignalIcon color={isLocked ? AppColors.grayTextWeak : AppColors.purple} size={11}/>}
-                        {tab.icon === 'logs' && <TerminalIcon color={isLocked ? AppColors.grayTextWeak : AppColors.purple} size={11}/>}
-                        {tab.icon === 'analytics' && <AnalyticsIcon color={isLocked ? AppColors.grayTextWeak : AppColors.purple} size={11}/>}
-                        {tab.icon === 'webview' && <GlobeIcon color={isLocked ? AppColors.grayTextWeak : AppColors.purple} size={11}/>}
-                        {tab.icon === 'redux' && <TerminalIcon color={isLocked ? AppColors.grayTextWeak : AppColors.purple} size={11}/>}
+                        {tab.icon === 'insights' && (<InsightsIcon color={isLocked
+                                ? AppColors.grayTextWeak
+                                : AppColors.purple} size={11}/>)}
+                        {tab.icon === 'apis' && (<SignalIcon color={isLocked
+                                ? AppColors.grayTextWeak
+                                : AppColors.purple} size={11}/>)}
+                        {tab.icon === 'logs' && (<TerminalIcon color={isLocked
+                                ? AppColors.grayTextWeak
+                                : AppColors.purple} size={11}/>)}
+                        {tab.icon === 'analytics' && (<AnalyticsIcon color={isLocked
+                                ? AppColors.grayTextWeak
+                                : AppColors.purple} size={11}/>)}
+                        {tab.icon === 'webview' && (<GlobeIcon color={isLocked
+                                ? AppColors.grayTextWeak
+                                : AppColors.purple} size={11}/>)}
+                        {tab.icon === 'redux' && (<TerminalIcon color={isLocked
+                                ? AppColors.grayTextWeak
+                                : AppColors.purple} size={11}/>)}
                       </View>
                       {/* Label + Required badge */}
                       <Text style={{
                             fontFamily: AppFonts.interBold,
                             fontSize: 13,
-                            color: isLocked ? AppColors.grayText : AppColors.primaryBlack,
+                            color: isLocked
+                                ? AppColors.grayText
+                                : AppColors.primaryBlack,
                         }}>
                         {tab.label}
                       </Text>
@@ -1033,14 +1118,28 @@ const NetworkInspector = ({ enabled = true }) => {
                                 borderColor: 'rgba(104,75,155,0.18)',
                                 gap: 3,
                             }}>
-                          <View style={{ width: 4, height: 4, borderRadius: 2, backgroundColor: AppColors.purple, opacity: 0.7 }}/>
-                          <Text style={{ fontFamily: AppFonts.interBold, fontSize: 8.5, color: AppColors.purple, letterSpacing: 0.4 }}>
+                          <View style={{
+                                width: 4,
+                                height: 4,
+                                borderRadius: 2,
+                                backgroundColor: AppColors.purple,
+                                opacity: 0.7,
+                            }}/>
+                          <Text style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 8.5,
+                                color: AppColors.purple,
+                                letterSpacing: 0.4,
+                            }}>
                             DEFAULT
                           </Text>
                         </View>)}
 
                       {/* Settings gear icon next to label */}
-                      <TouchableScale onPress={() => setSettingsPage(tab.key)} hitSlop={8} style={{
+                      <TouchableScale onPress={() => {
+                            animateNextLayout();
+                            setSettingsPage(tab.key);
+                        }} hitSlop={8} style={{
                             marginLeft: 4,
                             padding: 4,
                             borderRadius: 6,
@@ -1055,12 +1154,18 @@ const NetworkInspector = ({ enabled = true }) => {
                     </View>
 
                     {/* Visibility Switch in VISIBILITY column */}
-                    <View style={{ width: 90, alignItems: 'flex-end', justifyContent: 'center' }}>
+                    <View style={{
+                            width: 90,
+                            alignItems: 'flex-end',
+                            justifyContent: 'center',
+                        }}>
                       <TouchableScale disabled={isLocked} onPress={() => toggleTabVisibility(tab.key)} style={{
                             width: 38,
                             height: 22,
                             borderRadius: 11,
-                            backgroundColor: isVisible ? AppColors.purple : AppColors.grayBorderSecondary,
+                            backgroundColor: isVisible
+                                ? AppColors.purple
+                                : AppColors.grayBorderSecondary,
                             padding: 2,
                             justifyContent: 'center',
                             alignItems: isVisible ? 'flex-end' : 'flex-start',
@@ -1083,8 +1188,22 @@ const NetworkInspector = ({ enabled = true }) => {
 
             {/* Preferences Section */}
             <View style={{ marginTop: 8 }}>
-              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10, color: AppColors.grayTextWeak, letterSpacing: 0.6, marginBottom: 8 }}>PREFERENCES</Text>
-              <View style={{ backgroundColor: AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, overflow: 'hidden' }}>
+              <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors.grayTextWeak,
+                    letterSpacing: 0.6,
+                    marginBottom: 8,
+                }}>
+                PREFERENCES
+              </Text>
+              <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                }}>
                 <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -1093,13 +1212,21 @@ const NetworkInspector = ({ enabled = true }) => {
                     gap: 12,
                 }}>
                   {/* Icon + Label */}
-                  <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                  <View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
                     <View style={{
-                    width: 20, height: 20, borderRadius: 6,
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
                     backgroundColor: AppColors.purpleShade50,
                     borderWidth: 1,
                     borderColor: 'rgba(104,75,155,0.2)',
-                    alignItems: 'center', justifyContent: 'center',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                 }}>
                       {isDark ? (<SunIcon color={AppColors.purple} size={11}/>) : (<MoonIcon color={AppColors.purple} size={11}/>)}
                     </View>
@@ -1123,7 +1250,9 @@ const NetworkInspector = ({ enabled = true }) => {
                     width: 38,
                     height: 22,
                     borderRadius: 11,
-                    backgroundColor: isDark ? AppColors.purple : AppColors.grayBorderSecondary,
+                    backgroundColor: isDark
+                        ? AppColors.purple
+                        : AppColors.grayBorderSecondary,
                     padding: 2,
                     justifyContent: 'center',
                     alignItems: isDark ? 'flex-end' : 'flex-start',
@@ -1145,7 +1274,10 @@ const NetworkInspector = ({ enabled = true }) => {
           </ScrollView>
         </View>);
         }
-        const goBackToMain = () => setSettingsPage('main');
+        const goBackToMain = () => {
+            animateNextLayout();
+            setSettingsPage('main');
+        };
         const renderSubHeader = (title, icon, rightInfo) => (<View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -1168,14 +1300,23 @@ const NetworkInspector = ({ enabled = true }) => {
           <WhiteBackNavigation color={AppColors.purple} size={16}/>
         </TouchableScale>
         {icon && (<View style={{
-                    width: 36, height: 36, borderRadius: 10,
+                    width: 36,
+                    height: 36,
+                    borderRadius: 10,
                     backgroundColor: 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}
           </View>)}
-        <Text style={{ fontFamily: AppFonts.interBold, fontSize: 18, color: AppColors.primaryBlack, flex: 1 }}>
+        <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 18,
+                color: AppColors.primaryBlack,
+                flex: 1,
+            }}>
           {title}
         </Text>
         {rightInfo ? (<View style={{
@@ -1186,7 +1327,11 @@ const NetworkInspector = ({ enabled = true }) => {
                     borderWidth: 1,
                     borderColor: 'rgba(104,75,155,0.15)',
                 }}>
-            <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11, color: AppColors.purple }}>
+            <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors.purple,
+                }}>
               {rightInfo}
             </Text>
           </View>) : null}
@@ -1203,18 +1348,31 @@ const NetworkInspector = ({ enabled = true }) => {
                 gap: 12,
             }}>
           <View style={{
-                width: 36, height: 36, borderRadius: 10,
+                width: 36,
+                height: 36,
+                borderRadius: 10,
                 backgroundColor: 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}
           </View>
           <View style={{ flex: 1 }}>
-            <Text style={{ fontFamily: AppFonts.interBold, fontSize: 14, color: AppColors.primaryBlack }}>
+            <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 14,
+                color: AppColors.primaryBlack,
+            }}>
               {opts.label}
             </Text>
-            {opts.description ? (<Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: AppColors.grayText, marginTop: 1 }}>
+            {opts.description ? (<Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors.grayText,
+                    marginTop: 1,
+                }}>
                 {opts.description}
               </Text>) : null}
           </View>
@@ -1236,14 +1394,20 @@ const NetworkInspector = ({ enabled = true }) => {
                             paddingVertical: 6,
                             alignItems: 'center',
                             borderRadius: 6,
-                            backgroundColor: isActive ? AppColors.purple : 'transparent',
+                            backgroundColor: isActive
+                                ? AppColors.purple
+                                : 'transparent',
                         }}>
                   <Text style={{
                             fontFamily: AppFonts.interBold,
                             fontSize: 11,
                             color: isActive ? '#FFFFFF' : AppColors.grayText,
                         }}>
-                    {typeof opt === 'number' && opt >= 500 && settingsPage === 'insights' ? `${opt}ms` : opt}
+                    {typeof opt === 'number' &&
+                            opt >= 500 &&
+                            settingsPage === 'insights'
+                            ? `${opt}ms`
+                            : opt}
                   </Text>
                 </TouchableScale>);
                 })}
@@ -1252,7 +1416,14 @@ const NetworkInspector = ({ enabled = true }) => {
         if (settingsPage === 'apis') {
             return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
           {renderSubHeader('APIs Settings', <SignalIcon color={AppColors.purple} size={16}/>, `Total: ${logs.length}`)}
-          <View style={{ backgroundColor: AppColors.primaryLight, padding: 16, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, gap: 4 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    padding: 16,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    gap: 4,
+                }}>
             {renderSettingRow({
                     icon: <SignalIcon color={AppColors.purple} size={16}/>,
                     label: 'Max Request Logs',
@@ -1266,7 +1437,14 @@ const NetworkInspector = ({ enabled = true }) => {
                 })}
           </View>
 
-          <View style={{ backgroundColor: AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    padding: 16,
+                    marginTop: 12,
+                }}>
             {renderSettingRow({
                     icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
                     label: 'Clear Network Logs',
@@ -1277,8 +1455,21 @@ const NetworkInspector = ({ enabled = true }) => {
                         setSelected(null);
                         Alert.alert('Success', 'Network logs cleared.');
                     },
-                    right: (<View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11, color: AppColors.errorColor }}>Clear</Text>
+                    right: (<View style={{
+                            paddingHorizontal: 10,
+                            paddingVertical: 5,
+                            borderRadius: 7,
+                            backgroundColor: 'rgba(255,46,87,0.08)',
+                            borderWidth: 1,
+                            borderColor: 'rgba(255,46,87,0.2)',
+                        }}>
+                  <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            color: AppColors.errorColor,
+                        }}>
+                    Clear
+                  </Text>
                 </View>),
                 })}
           </View>
@@ -1287,7 +1478,14 @@ const NetworkInspector = ({ enabled = true }) => {
         if (settingsPage === 'logs') {
             return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
           {renderSubHeader('Logs Settings', <TerminalIcon color={AppColors.purple} size={16}/>, `Total: ${consoleLogs.length}`)}
-          <View style={{ backgroundColor: AppColors.primaryLight, padding: 16, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, gap: 4 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    padding: 16,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    gap: 4,
+                }}>
             {renderSettingRow({
                     icon: <TerminalIcon color={AppColors.purple} size={16}/>,
                     label: 'Max Console Logs',
@@ -1299,30 +1497,67 @@ const NetworkInspector = ({ enabled = true }) => {
                     },
                 })}
             <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
-            <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.primaryBlack, paddingTop: 4 }}>Log Levels</Text>
+            <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors.primaryBlack,
+                    paddingTop: 4,
+                }}>
+              Log Levels
+            </Text>
             {['info', 'warn', 'error'].map((level, li) => {
                     const isLvlActive = showConsoleLevels[level];
-                    const levelColor = level === 'error' ? AppColors.errorColor : level === 'warn' ? AppColors.warningIconGold : AppColors.skyBlue;
+                    const levelColor = level === 'error'
+                        ? AppColors.errorColor
+                        : level === 'warn'
+                            ? AppColors.warningIconGold
+                            : AppColors.skyBlue;
                     return renderSettingRow({
-                        icon: <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: levelColor }}/>,
+                        icon: (<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: (<View style={{
-                                width: 22, height: 22, borderRadius: 6,
+                                width: 22,
+                                height: 22,
+                                borderRadius: 6,
                                 borderWidth: 2,
-                                borderColor: isLvlActive ? AppColors.purple : AppColors.grayTextWeak,
-                                backgroundColor: isLvlActive ? 'rgba(104, 75, 155, 0.1)' : 'transparent',
-                                alignItems: 'center', justifyContent: 'center',
+                                borderColor: isLvlActive
+                                    ? AppColors.purple
+                                    : AppColors.grayTextWeak,
+                                backgroundColor: isLvlActive
+                                    ? 'rgba(104, 75, 155, 0.1)'
+                                    : 'transparent',
+                                alignItems: 'center',
+                                justifyContent: 'center',
                             }}>
-                    {isLvlActive && <CheckIcon size={12} color={AppColors.purple}/>}
+                    {isLvlActive && (<CheckIcon size={12} color={AppColors.purple}/>)}
                   </View>),
                     });
                 })}
           </View>
 
-          <View style={{ backgroundColor: AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    padding: 16,
+                    marginTop: 12,
+                }}>
             {renderSettingRow({
                     icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
                     label: 'Clear Console Logs',
@@ -1332,8 +1567,21 @@ const NetworkInspector = ({ enabled = true }) => {
                         clearConsoleLogs();
                         Alert.alert('Success', 'Console logs cleared.');
                     },
-                    right: (<View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11, color: AppColors.errorColor }}>Clear</Text>
+                    right: (<View style={{
+                            paddingHorizontal: 10,
+                            paddingVertical: 5,
+                            borderRadius: 7,
+                            backgroundColor: 'rgba(255,46,87,0.08)',
+                            borderWidth: 1,
+                            borderColor: 'rgba(255,46,87,0.2)',
+                        }}>
+                  <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            color: AppColors.errorColor,
+                        }}>
+                    Clear
+                  </Text>
                 </View>),
                 })}
           </View>
@@ -1342,7 +1590,14 @@ const NetworkInspector = ({ enabled = true }) => {
         if (settingsPage === 'analytics') {
             return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
           {renderSubHeader('Analytics Settings', <AnalyticsIcon color={AppColors.purple} size={16}/>, `Events: ${analyticsEvents.length}`)}
-          <View style={{ backgroundColor: AppColors.primaryLight, padding: 16, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, gap: 4 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    padding: 16,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    gap: 4,
+                }}>
             {renderSettingRow({
                     icon: <AnalyticsIcon color={AppColors.purple} size={16}/>,
                     label: 'Events Captured',
@@ -1350,7 +1605,14 @@ const NetworkInspector = ({ enabled = true }) => {
                     isLast: true,
                 })}
           </View>
-          <View style={{ backgroundColor: AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    padding: 16,
+                    marginTop: 12,
+                }}>
             {renderSettingRow({
                     icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
                     label: 'Clear Analytics History',
@@ -1361,8 +1623,21 @@ const NetworkInspector = ({ enabled = true }) => {
                         setSelectedEvent(null);
                         Alert.alert('Success', 'Analytics events cleared.');
                     },
-                    right: (<View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11, color: AppColors.errorColor }}>Clear</Text>
+                    right: (<View style={{
+                            paddingHorizontal: 10,
+                            paddingVertical: 5,
+                            borderRadius: 7,
+                            backgroundColor: 'rgba(255,46,87,0.08)',
+                            borderWidth: 1,
+                            borderColor: 'rgba(255,46,87,0.2)',
+                        }}>
+                  <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            color: AppColors.errorColor,
+                        }}>
+                    Clear
+                  </Text>
                 </View>),
                 })}
           </View>
@@ -1371,25 +1646,46 @@ const NetworkInspector = ({ enabled = true }) => {
         if (settingsPage === 'webview') {
             return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
           {renderSubHeader('WebView Settings', <GlobeIcon color={AppColors.purple} size={16}/>, `History: ${webViewNavHistory.length}`)}
-          <View style={{ backgroundColor: AppColors.primaryLight, padding: 16, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, gap: 4 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    padding: 16,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    gap: 4,
+                }}>
             {renderSettingRow({
                     icon: <GlobeIcon color={AppColors.purple} size={16}/>,
                     label: 'Capture CSS & JavaScript',
                     description: 'Extract stylesheet and script source from pages',
                     onPress: () => setWebViewCaptureCssJs(prev => !prev),
                     right: (<View style={{
-                            width: 22, height: 22, borderRadius: 6,
+                            width: 22,
+                            height: 22,
+                            borderRadius: 6,
                             borderWidth: 2,
-                            borderColor: webViewCaptureCssJs ? AppColors.purple : AppColors.grayTextWeak,
-                            backgroundColor: webViewCaptureCssJs ? 'rgba(104, 75, 155, 0.1)' : 'transparent',
-                            alignItems: 'center', justifyContent: 'center',
+                            borderColor: webViewCaptureCssJs
+                                ? AppColors.purple
+                                : AppColors.grayTextWeak,
+                            backgroundColor: webViewCaptureCssJs
+                                ? 'rgba(104, 75, 155, 0.1)'
+                                : 'transparent',
+                            alignItems: 'center',
+                            justifyContent: 'center',
                         }}>
-                  {webViewCaptureCssJs && <CheckIcon size={12} color={AppColors.purple}/>}
+                  {webViewCaptureCssJs && (<CheckIcon size={12} color={AppColors.purple}/>)}
                 </View>),
                     isLast: true,
                 })}
           </View>
-          <View style={{ backgroundColor: AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    padding: 16,
+                    marginTop: 12,
+                }}>
             {renderSettingRow({
                     icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
                     label: 'Clear WebView Data',
@@ -1399,8 +1695,21 @@ const NetworkInspector = ({ enabled = true }) => {
                         clearWebViewData();
                         Alert.alert('Success', 'WebView source history cleared.');
                     },
-                    right: (<View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11, color: AppColors.errorColor }}>Clear</Text>
+                    right: (<View style={{
+                            paddingHorizontal: 10,
+                            paddingVertical: 5,
+                            borderRadius: 7,
+                            backgroundColor: 'rgba(255,46,87,0.08)',
+                            borderWidth: 1,
+                            borderColor: 'rgba(255,46,87,0.2)',
+                        }}>
+                  <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            color: AppColors.errorColor,
+                        }}>
+                    Clear
+                  </Text>
                 </View>),
                 })}
           </View>
@@ -1409,20 +1718,34 @@ const NetworkInspector = ({ enabled = true }) => {
         if (settingsPage === 'redux') {
             return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
           {renderSubHeader('Redux Settings', <TerminalIcon color={AppColors.purple} size={16}/>, `Reducers: ${Object.keys(reduxState || {}).length}`)}
-          <View style={{ backgroundColor: AppColors.primaryLight, padding: 16, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, gap: 4 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    padding: 16,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    gap: 4,
+                }}>
             {renderSettingRow({
                     icon: <TerminalIcon color={AppColors.purple} size={16}/>,
                     label: 'Auto-refresh Store',
                     description: 'Automatically capture Redux store state updates',
                     onPress: () => setReduxAutoRefreshState(prev => !prev),
                     right: (<View style={{
-                            width: 22, height: 22, borderRadius: 6,
+                            width: 22,
+                            height: 22,
+                            borderRadius: 6,
                             borderWidth: 2,
-                            borderColor: reduxAutoRefresh ? AppColors.purple : AppColors.grayTextWeak,
-                            backgroundColor: reduxAutoRefresh ? 'rgba(104, 75, 155, 0.1)' : 'transparent',
-                            alignItems: 'center', justifyContent: 'center',
+                            borderColor: reduxAutoRefresh
+                                ? AppColors.purple
+                                : AppColors.grayTextWeak,
+                            backgroundColor: reduxAutoRefresh
+                                ? 'rgba(104, 75, 155, 0.1)'
+                                : 'transparent',
+                            alignItems: 'center',
+                            justifyContent: 'center',
                         }}>
-                  {reduxAutoRefresh && <CheckIcon size={12} color={AppColors.purple}/>}
+                  {reduxAutoRefresh && (<CheckIcon size={12} color={AppColors.purple}/>)}
                 </View>),
                 })}
             <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
@@ -1439,18 +1762,40 @@ const NetworkInspector = ({ enabled = true }) => {
                 })}
           </View>
 
-          <View style={{ backgroundColor: AppColors.primaryLight, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, padding: 16, marginTop: 12 }}>
+          <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    padding: 16,
+                    marginTop: 12,
+                }}>
             {renderSettingRow({
                     icon: <TrashIcon color={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);
                         Alert.alert('Success', 'Redux state snapshot cleared.');
                     },
-                    right: (<View style={{ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 7, backgroundColor: 'rgba(255,46,87,0.08)', borderWidth: 1, borderColor: 'rgba(255,46,87,0.2)' }}>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11, color: AppColors.errorColor }}>Clear</Text>
+                    right: (<View style={{
+                            paddingHorizontal: 10,
+                            paddingVertical: 5,
+                            borderRadius: 7,
+                            backgroundColor: 'rgba(255,46,87,0.08)',
+                            borderWidth: 1,
+                            borderColor: 'rgba(255,46,87,0.2)',
+                        }}>
+                  <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            color: AppColors.errorColor,
+                        }}>
+                    Clear
+                  </Text>
                 </View>),
                 })}
           </View>
@@ -1459,7 +1804,14 @@ const NetworkInspector = ({ enabled = true }) => {
         // Default return page is Insights settings
         return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
         {renderSubHeader('Insights Settings', <InsightsIcon color={AppColors.purple} size={16}/>)}
-        <View style={{ backgroundColor: AppColors.primaryLight, padding: 16, borderRadius: 12, borderWidth: 1, borderColor: AppColors.grayBorderSecondary, gap: 4 }}>
+        <View style={{
+                backgroundColor: AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
           {renderSettingRow({
                 icon: <SignalIcon color={AppColors.purple} size={16}/>,
                 label: 'Slow Latency Warning',
@@ -1478,13 +1830,20 @@ const NetworkInspector = ({ enabled = true }) => {
                 isLast: true,
                 onPress: () => setInsightsShowConsoleAlerts(prev => !prev),
                 right: (<View style={{
-                        width: 22, height: 22, borderRadius: 6,
+                        width: 22,
+                        height: 22,
+                        borderRadius: 6,
                         borderWidth: 2,
-                        borderColor: insightsShowConsoleAlerts ? AppColors.purple : AppColors.grayTextWeak,
-                        backgroundColor: insightsShowConsoleAlerts ? 'rgba(104, 75, 155, 0.1)' : 'transparent',
-                        alignItems: 'center', justifyContent: 'center',
+                        borderColor: insightsShowConsoleAlerts
+                            ? AppColors.purple
+                            : AppColors.grayTextWeak,
+                        backgroundColor: insightsShowConsoleAlerts
+                            ? 'rgba(104, 75, 155, 0.1)'
+                            : 'transparent',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                     }}>
-                {insightsShowConsoleAlerts && <CheckIcon size={12} color={AppColors.purple}/>}
+                {insightsShowConsoleAlerts && (<CheckIcon size={12} color={AppColors.purple}/>)}
               </View>),
             })}
         </View>
@@ -1492,10 +1851,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;
@@ -1505,11 +1868,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 (<View style={styles.dashboardContainer}>
         {/* Module 1: APIs */}
-        {tabVisibility.apis && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('apis')}>
+        {tabVisibility.apis && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <SignalIcon color={AppColors.purple} size={18}/>
@@ -1523,13 +1888,19 @@ const NetworkInspector = ({ enabled = true }) => {
                 <Text style={styles.dashboardGridLbl}>Requests</Text>
               </View>
               <View style={styles.dashboardGridItem}>
-                <Text style={[styles.dashboardGridVal, apiSuccessRate < 90 && { color: AppColors.warningIconGold }]}>
+                <Text style={[
+                    styles.dashboardGridVal,
+                    apiSuccessRate < 90 && { color: AppColors.warningIconGold },
+                ]}>
                   {apiSuccessRate}%
                 </Text>
                 <Text style={styles.dashboardGridLbl}>Success Rate</Text>
               </View>
               <View style={styles.dashboardGridItem}>
-                <Text style={[styles.dashboardGridVal, apiErrors > 0 && { color: AppColors.errorColor }]}>
+                <Text style={[
+                    styles.dashboardGridVal,
+                    apiErrors > 0 && { color: AppColors.errorColor },
+                ]}>
                   {apiErrors}
                 </Text>
                 <Text style={styles.dashboardGridLbl}>Errors</Text>
@@ -1544,7 +1915,7 @@ const NetworkInspector = ({ enabled = true }) => {
           </TouchableScale>)}
 
         {/* Module 2: Logs */}
-        {tabVisibility.logs && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('logs')}>
+        {tabVisibility.logs && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <TerminalIcon color="#0D9488" size={18}/>
@@ -1558,17 +1929,25 @@ const NetworkInspector = ({ enabled = true }) => {
                 <Text style={styles.dashboardGridLbl}>Total Logs</Text>
               </View>
               <View style={styles.dashboardGridItem}>
-                <Text style={[styles.dashboardGridVal, { color: '#0D9488' }]}>{logInfos}</Text>
+                <Text style={[styles.dashboardGridVal, { color: '#0D9488' }]}>
+                  {logInfos}
+                </Text>
                 <Text style={styles.dashboardGridLbl}>Info</Text>
               </View>
               <View style={styles.dashboardGridItem}>
-                <Text style={[styles.dashboardGridVal, logWarns > 0 && { color: AppColors.warningIconGold }]}>
+                <Text style={[
+                    styles.dashboardGridVal,
+                    logWarns > 0 && { color: AppColors.warningIconGold },
+                ]}>
                   {logWarns}
                 </Text>
                 <Text style={styles.dashboardGridLbl}>Warnings</Text>
               </View>
               <View style={styles.dashboardGridItem}>
-                <Text style={[styles.dashboardGridVal, logErrors > 0 && { color: AppColors.errorColor }]}>
+                <Text style={[
+                    styles.dashboardGridVal,
+                    logErrors > 0 && { color: AppColors.errorColor },
+                ]}>
                   {logErrors}
                 </Text>
                 <Text style={styles.dashboardGridLbl}>Errors</Text>
@@ -1577,11 +1956,13 @@ const NetworkInspector = ({ enabled = true }) => {
           </TouchableScale>)}
 
         {/* Module 3: Analytics */}
-        {tabVisibility.analytics && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('analytics')}>
+        {tabVisibility.analytics && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <AnalyticsIcon color="#EA580C" size={18}/>
-                <Text style={styles.dashboardModuleTitle}>Analytics Events</Text>
+                <Text style={styles.dashboardModuleTitle}>
+                  Analytics Events
+                </Text>
               </View>
               <Text style={styles.dashboardModuleGoText}>View Details →</Text>
             </View>
@@ -1591,7 +1972,9 @@ const NetworkInspector = ({ enabled = true }) => {
                 <Text style={styles.dashboardGridLbl}>Total Events</Text>
               </View>
               <View style={styles.dashboardGridItem}>
-                <Text style={[styles.dashboardGridVal, { color: '#EA580C' }]}>{uniqueEvents}</Text>
+                <Text style={[styles.dashboardGridVal, { color: '#EA580C' }]}>
+                  {uniqueEvents}
+                </Text>
                 <Text style={styles.dashboardGridLbl}>Unique Names</Text>
               </View>
               <View style={styles.dashboardGridItem}>
@@ -1600,7 +1983,9 @@ const NetworkInspector = ({ enabled = true }) => {
               </View>
               <View style={styles.dashboardGridItem}>
                 <Text style={styles.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}
                 </Text>
                 <Text style={styles.dashboardGridLbl}>Events Ratio</Text>
               </View>
@@ -1608,11 +1993,13 @@ const NetworkInspector = ({ enabled = true }) => {
           </TouchableScale>)}
 
         {/* Module 4: WebView */}
-        {tabVisibility.webview && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('webview')}>
+        {tabVisibility.webview && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <GlobeIcon color="#2563EB" size={18}/>
-                <Text style={styles.dashboardModuleTitle}>WebView Captures</Text>
+                <Text style={styles.dashboardModuleTitle}>
+                  WebView Captures
+                </Text>
               </View>
               <Text style={styles.dashboardModuleGoText}>View Details →</Text>
             </View>
@@ -1622,12 +2009,16 @@ const NetworkInspector = ({ enabled = true }) => {
                 <Text style={styles.dashboardGridLbl}>History Size</Text>
               </View>
               <View style={styles.dashboardGridItem}>
-                <Text style={[styles.dashboardGridVal, { color: '#16A34A' }]}>Active</Text>
+                <Text style={[styles.dashboardGridVal, { color: '#16A34A' }]}>
+                  Active
+                </Text>
                 <Text style={styles.dashboardGridLbl}>Status</Text>
               </View>
               <View style={styles.dashboardGridItem}>
                 <Text numberOfLines={1} style={styles.dashboardGridVal}>
-                  {webviewTotal > 0 ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...` : '—'}
+                  {webviewTotal > 0
+                    ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...`
+                    : '—'}
                 </Text>
                 <Text style={styles.dashboardGridLbl}>Last URL</Text>
               </View>
@@ -1635,38 +2026,73 @@ const NetworkInspector = ({ enabled = true }) => {
           </TouchableScale>)}
 
         {/* Module 5: Redux Store */}
-        {tabVisibility.redux && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('redux')}>
+        {tabVisibility.redux && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <TerminalIcon color={AppColors.purple} size={18}/>
-                <Text style={styles.dashboardModuleTitle}>Redux Store State</Text>
+                <Text style={styles.dashboardModuleTitle}>
+                  Redux Store State
+                </Text>
               </View>
               <Text style={styles.dashboardModuleGoText}>View Details →</Text>
             </View>
             {reduxState ? (<View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 }}>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10, color: AppColors.grayTextWeak, letterSpacing: 0.5 }}>
+                <View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        marginBottom: 4,
+                    }}>
+                  <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors.grayTextWeak,
+                        letterSpacing: 0.5,
+                    }}>
                     REDUCER NAME
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10, color: AppColors.grayTextWeak, letterSpacing: 0.5 }}>
+                  <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors.grayTextWeak,
+                        letterSpacing: 0.5,
+                    }}>
                     SIZE / FIELDS
                   </Text>
                 </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 = getSize(val);
-                        return (<View key={key} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 2 }}>
-                      <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 12, color: AppColors.grayTextStrong }}>
+                        return (<View key={key} style={{
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                paddingVertical: 2,
+                            }}>
+                      <Text style={{
+                                fontFamily: AppFonts.interMedium,
+                                fontSize: 12,
+                                color: AppColors.grayTextStrong,
+                            }}>
                         {key}
                       </Text>
-                      <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: AppColors.grayTextWeak }}>
+                      <Text style={{
+                                fontFamily: AppFonts.interRegular,
+                                fontSize: 11,
+                                color: AppColors.grayTextWeak,
+                            }}>
                         {sizeStr} ({fieldsCount} fields)
                       </Text>
                     </View>);
                     })}
               </View>) : (<View style={{ padding: 12, alignItems: 'center' }}>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 12, color: AppColors.grayTextWeak }}>
+                <Text style={{
+                        fontFamily: AppFonts.interRegular,
+                        fontSize: 12,
+                        color: AppColors.grayTextWeak,
+                    }}>
                   No connected Redux store.
                 </Text>
               </View>)}
@@ -1721,10 +2147,19 @@ const NetworkInspector = ({ enabled = true }) => {
             <TerminalIcon color={AppColors.purple} size={20}/>
           </View>
           <View style={{ flex: 1 }}>
-            <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.primaryBlack }}>
+            <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 13,
+                color: AppColors.primaryBlack,
+            }}>
               Redux Store Snapshot
             </Text>
-            <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: AppColors.grayText, marginTop: 2 }}>
+            <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                color: AppColors.grayText,
+                marginTop: 2,
+            }}>
               Total size: {getSize(reduxState)} • {reducerKeys.length} Reducers
             </Text>
           </View>
@@ -1742,23 +2177,33 @@ const NetworkInspector = ({ enabled = true }) => {
                 borderWidth: 1,
                 borderColor: AppColors.dividerColor,
             }}>
-          <TouchableOpacity onPress={() => setReduxActiveSubTab('timeline')} style={{
+          <TouchableOpacity onPress={() => {
+                animateNextLayout();
+                setReduxActiveSubTab('timeline');
+            }} style={{
                 flex: 1,
                 paddingVertical: 6,
                 alignItems: 'center',
                 justifyContent: 'center',
                 borderRadius: 8,
-                backgroundColor: reduxActiveSubTab === 'timeline' ? AppColors.purple : 'transparent',
+                backgroundColor: reduxActiveSubTab === 'timeline'
+                    ? AppColors.purple
+                    : 'transparent',
             }}>
             <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 11,
-                color: reduxActiveSubTab === 'timeline' ? '#FFFFFF' : AppColors.grayText,
+                color: reduxActiveSubTab === 'timeline'
+                    ? '#FFFFFF'
+                    : AppColors.grayText,
             }}>
               ⚡ Action Timeline
             </Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => setReduxActiveSubTab('tree')} style={{
+          <TouchableOpacity onPress={() => {
+                animateNextLayout();
+                setReduxActiveSubTab('tree');
+            }} style={{
                 flex: 1,
                 paddingVertical: 6,
                 alignItems: 'center',
@@ -1789,7 +2234,9 @@ const NetworkInspector = ({ enabled = true }) => {
                 borderColor: AppColors.dividerColor,
                 height: 36,
             }}>
-          <TextInput placeholder={reduxActiveSubTab === 'timeline' ? "Search actions or payloads..." : "Search Redux keys or values..."} placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
+          <TextInput placeholder={reduxActiveSubTab === 'timeline'
+                ? 'Search actions or payloads...'
+                : 'Search Redux keys or values...'} placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
                 flex: 1,
                 fontFamily: AppFonts.interRegular,
                 fontSize: 12,
@@ -1835,23 +2282,24 @@ const NetworkInspector = ({ enabled = true }) => {
       <Modal visible={visible} animationType="slide" transparent>
         {visible && (<ErrorBoundary onClose={closeModal}>
             <View style={styles.modalBackdrop}>
-            <Pressable style={styles.modalBackdropPressable} onPress={closeModal}/>
-            <View style={styles.modalContentCard}>
-              <StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
+              <Pressable style={styles.modalBackdropPressable} onPress={closeModal}/>
+              <View style={styles.modalContentCard}>
+                <StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
-              <LinearGradient colors={[AppColors.purple, '#6B4EFF']} style={styles.headerGradient}>
-                <View style={styles.header}>
-                  <View style={[
+                <LinearGradient colors={[AppColors.purple, '#6B4EFF']} style={styles.headerGradient}>
+                  <View style={styles.header}>
+                    <View style={[
                 styles.headerLeft,
                 {
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 16,
-                    flex: (selected == null && selectedEvent == null) ? 5 : 1,
+                    flex: selected == null && selectedEvent == null ? 5 : 1,
                 },
             ]}>
-                    <TouchableScale onPress={() => {
+                      <TouchableScale onPress={() => {
                 requestAnimationFrame(() => {
+                    animateNextLayout();
                     setSelected(null);
                     setSelectedEvent(null);
                 });
@@ -1860,14 +2308,19 @@ const NetworkInspector = ({ enabled = true }) => {
                 selected == null &&
                     selectedEvent == null && { display: 'none' },
             ]}>
-                      <WhiteBackNavigation />
-                    </TouchableScale>
+                        <WhiteBackNavigation />
+                      </TouchableScale>
 
-                    {selected == null && selectedEvent == null ? (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 14, flex: 1 }}>
-                        <View style={{
-                    width: 42,
-                    height: 42,
-                    borderRadius: 10,
+                      {selected == null && selectedEvent == null ? (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 14,
+                    flex: 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)',
@@ -1878,56 +2331,80 @@ const NetworkInspector = ({ enabled = true }) => {
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
                 }}>
-                          <BrandSquareIcon size={36}/>
-                        </View>
-                        <View style={{ gap: 3 }}>
-                          <Text style={[styles.headerTitle, { fontSize: 17, letterSpacing: 0.2 }]}>RN InApp Inspector</Text>
-                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                            <Animated.View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#4ADE80', opacity: activePulseAnim }}/>
-                            <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 10, color: 'rgba(255,255,255,0.78)', letterSpacing: 0.3 }}>
-                              Active • {Platform.OS === 'ios' ? 'iOS' : 'Android'} (v1.0.13)
+                            <BrandSquareIcon size={36}/>
+                          </View>
+                          <View style={{ gap: 3 }}>
+                            <Text style={[
+                    styles.headerTitle,
+                    { fontSize: 17, letterSpacing: 0.2 },
+                ]}>
+                              RN InApp Inspector
                             </Text>
+                            <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                              <Animated.View style={{
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    backgroundColor: '#4ADE80',
+                    opacity: activePulseAnim,
+                }}/>
+                              <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 10,
+                    color: 'rgba(255,255,255,0.78)',
+                    letterSpacing: 0.3,
+                }}>
+                                Active •{' '}
+                                {Platform.OS === 'ios' ? 'iOS' : 'Android'}{' '}
+                                (v1.0.13)
+                              </Text>
+                            </View>
                           </View>
-                        </View>
-                      </View>) : null}
-                  </View>
+                        </View>) : null}
+                    </View>
 
-                  <View style={styles.headerCenter}>
-                    {selected != null ? (<View style={styles.headerDetailCenter}>
-                        <View style={styles.headerDetailRow}>
-                          <View style={[
+                    <View style={styles.headerCenter}>
+                      {selected != null ? (<View style={styles.headerDetailCenter}>
+                          <View style={styles.headerDetailRow}>
+                            <View style={[
                     styles.headerMethodBadge,
                     {
                         backgroundColor: METHOD_COLORS[selected.method] ??
                             AppColors.grayText,
                     },
                 ]}>
-                            <Text style={styles.headerMethodText}>
-                              {selected.method}
+                              <Text style={styles.headerMethodText}>
+                                {selected.method}
+                              </Text>
+                            </View>
+                            <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                              {detailTitle}
                             </Text>
                           </View>
-                          <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                            {detailTitle}
-                          </Text>
-                        </View>
-                        <View style={styles.headerDetailSubRow}>
-                          <View style={[
+                          <View style={styles.headerDetailSubRow}>
+                            <View style={[
                     styles.headerStatusDot,
-                    { backgroundColor: getStatusColor(selected.status) },
+                    {
+                        backgroundColor: getStatusColor(selected.status),
+                    },
                 ]}/>
-                          <Text style={styles.headerSubTitle}>
-                            {selected.status === 0
+                            <Text style={styles.headerSubTitle}>
+                              {selected.status === 0
                     ? 'Failed'
                     : selected.status ?? 'Pending'}{' '}
-                            •{' '}
-                            {selected.duration != null
+                              •{' '}
+                              {selected.duration != null
                     ? `${selected.duration}ms`
                     : '-'}
-                          </Text>
-                        </View>
-                      </View>) : selectedEvent != null ? (<View style={styles.headerDetailCenter}>
-                        <View style={styles.headerDetailRow}>
-                          <View style={[
+                            </Text>
+                          </View>
+                        </View>) : selectedEvent != null ? (<View style={styles.headerDetailCenter}>
+                          <View style={styles.headerDetailRow}>
+                            <View style={[
                     styles.headerMethodBadge,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -1935,16 +2412,18 @@ const NetworkInspector = ({ enabled = true }) => {
                             : 'rgba(124,92,191,0.3)',
                     },
                 ]}>
-                            <Text style={styles.headerMethodText}>
-                              {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                              <Text style={styles.headerMethodText}>
+                                {selectedEvent.source === 'firebase'
+                    ? 'FB'
+                    : 'MAN'}
+                              </Text>
+                            </View>
+                            <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                              {selectedEvent.name}
                             </Text>
                           </View>
-                          <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                            {selectedEvent.name}
-                          </Text>
-                        </View>
-                        <View style={styles.headerDetailSubRow}>
-                          <View style={[
+                          <View style={styles.headerDetailSubRow}>
+                            <View style={[
                     styles.headerStatusDot,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -1952,68 +2431,119 @@ const NetworkInspector = ({ enabled = true }) => {
                             : AppColors.purple,
                     },
                 ]}/>
-                          <Text style={styles.headerSubTitle}>
-                            {Object.keys(selectedEvent.params).length} param
-                            {Object.keys(selectedEvent.params).length !== 1
+                            <Text style={styles.headerSubTitle}>
+                              {Object.keys(selectedEvent.params).length} param
+                              {Object.keys(selectedEvent.params).length !== 1
                     ? 's'
                     : ''}
-                            {' · '}
-                            {selectedEvent.source}
-                          </Text>
-                        </View>
-                      </View>) : null}
-                  </View>
+                              {' · '}
+                              {selectedEvent.source}
+                            </Text>
+                          </View>
+                        </View>) : null}
+                    </View>
 
-                  <View style={styles.headerRight}>
-                    {selected == null && selectedEvent == null && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={[styles.closeButtonSquare, { marginRight: 8, backgroundColor: 'rgba(255,255,255,0.15)' }]}>
-                        <SettingsIcon color="#FFFFFF" size={16}/>
-                      </TouchableScale>)}
+                    <View style={styles.headerRight}>
+                      {selected == null && selectedEvent == null && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={[
+                    styles.closeButtonSquare,
+                    {
+                        marginRight: 8,
+                        backgroundColor: 'rgba(255,255,255,0.15)',
+                    },
+                ]}>
+                          <SettingsIcon color="#FFFFFF" size={16}/>
+                        </TouchableScale>)}
 
-                    <TouchableScale onPress={closeModal} hitSlop={15} style={styles.closeButtonSquare}>
-                      <CloseWhite size={16}/>
-                    </TouchableScale>
+                      <TouchableScale onPress={closeModal} hitSlop={15} style={styles.closeButtonSquare}>
+                        <CloseWhite size={16}/>
+                      </TouchableScale>
+                    </View>
                   </View>
-                </View>
-              </LinearGradient>
-
-              {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-              {selected == null && selectedEvent == null && settingsPage === null ? (<View style={styles.tabBarContainer}>
-                  <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 => {
+                </LinearGradient>
+
+                {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
+                {selected == null &&
+                selectedEvent == null &&
+                settingsPage === null ? (<View style={styles.tabBarContainer}>
+                    <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.grayText;
+                    const iconColor = isActive
+                        ? '#FFFFFF'
+                        : 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 key={tab.key} onPress={() => {
                             requestAnimationFrame(() => {
-                                setActiveTab(tab.key);
+                                switchActiveTab(tab.key);
                             });
                         }} style={[
                             styles.contentTabButton,
                             isActive && styles.contentTabButtonActive,
                         ]}>
-                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                            {tab.icon === 'insights' && <InsightsIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'apis' && <SignalIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'logs' && <TerminalIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'analytics' && <AnalyticsIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'webview' && <GlobeIcon color={iconColor} size={14}/>}
-                            {tab.icon === 'redux' && <TerminalIcon color={iconColor} size={14}/>}
-                            <Text numberOfLines={1} ellipsizeMode="tail" style={[
+                              <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                        }}>
+                                {tab.icon === 'insights' && (<InsightsIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'apis' && (<SignalIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'logs' && (<TerminalIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'analytics' && (<AnalyticsIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'webview' && (<GlobeIcon color={iconColor} size={14}/>)}
+                                {tab.icon === 'redux' && (<TerminalIcon color={iconColor} size={14}/>)}
+                                <Text numberOfLines={1} ellipsizeMode="tail" style={[
                             styles.contentTabButtonText,
-                            isActive && styles.contentTabButtonTextActive,
+                            isActive &&
+                                styles.contentTabButtonTextActive,
                         ]}>
-                              {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
-                            </Text>
-                            {((tab.key === 'apis' && hasUnreadApis) || (tab.key === 'logs' && hasUnreadLogs)) && (<Animated.View style={{
+                                  {tab.label}{' '}
+                                  {tab.count > 0 ? `(${countLabel})` : ''}
+                                </Text>
+                                {((tab.key === 'apis' && hasUnreadApis) ||
+                            (tab.key === 'logs' && hasUnreadLogs)) && (<Animated.View style={{
                                 width: 6,
                                 height: 6,
                                 borderRadius: 3,
@@ -2022,42 +2552,45 @@ const NetworkInspector = ({ enabled = true }) => {
                                 alignSelf: 'center',
                                 transform: [{ scale: unreadPulseAnim }],
                             }}/>)}
-                          </View>
-                        </TouchableScale>);
+                              </View>
+                            </TouchableScale>);
                 })}
-                  </ScrollView>
-                </View>) : null}
-
-
+                    </ScrollView>
+                  </View>) : null}
 
-            {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
-            {isReady && activeTab === 'analytics' && selectedEvent == null && (<View>
-                {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
-                <View style={[styles.toolbarRow, { marginTop: 12, marginBottom: 4 }]}>
-                  <View style={styles.searchContainer}>
-                    <SearchIcon color={AppColors.grayTextWeak} size={16}/>
-                    <TextInput placeholder="Search events..." placeholderTextColor={AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                    {analyticsSearch.length > 0 && (<Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
-                        <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                      </Pressable>)}
-                  </View>
-                  {analyticsSubTab === 'ga_events' && (<View style={styles.toolbarRight}>
-                      <TouchableScale style={[
+                {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
+                {isReady &&
+                activeTab === 'analytics' &&
+                selectedEvent == null && (<View>
+                      {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
+                      <View style={[
+                    styles.toolbarRow,
+                    { marginTop: 12, marginBottom: 4 },
+                ]}>
+                        <View style={styles.searchContainer}>
+                          <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+                          <TextInput placeholder="Search events..." placeholderTextColor={AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                          {analyticsSearch.length > 0 && (<Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
+                              <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                            </Pressable>)}
+                        </View>
+                        {analyticsSubTab === 'ga_events' && (<View style={styles.toolbarRight}>
+                            <TouchableScale style={[
                         styles.toolbarBtn,
                         !hideScreenView && styles.toolbarBtnActive,
                     ]} onPress={() => setHideScreenView(prev => !prev)} hitSlop={10}>
-                        <ScreenIcon color={!hideScreenView
+                              <ScreenIcon color={!hideScreenView
                         ? AppColors.purple
                         : AppColors.grayTextStrong} size={18}/>
-                      </TouchableScale>
-                      <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                        <TrashIcon color={AppColors.grayTextStrong} size={18}/>
-                      </TouchableScale>
-                    </View>)}
-                </View>
+                            </TouchableScale>
+                            <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
+                              <TrashIcon color={AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale>
+                          </View>)}
+                      </View>
 
-                {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
-                <View style={{
+                      {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
+                      <View style={{
                     marginHorizontal: 16,
                     marginTop: 4,
                     marginBottom: 8,
@@ -2068,7 +2601,7 @@ const NetworkInspector = ({ enabled = true }) => {
                     borderWidth: 1,
                     borderColor: AppColors.grayBorderSecondary,
                 }}>
-                  <Pressable style={[
+                        <Pressable style={[
                     {
                         flex: 1,
                         paddingVertical: 8,
@@ -2083,8 +2616,11 @@ const NetworkInspector = ({ enabled = true }) => {
                         shadowOffset: { width: 0, height: 1 },
                         elevation: 2,
                     },
-                ]} onPress={() => setAnalyticsSubTab('ga_events')}>
-                    <Text style={[
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setAnalyticsSubTab('ga_events');
+                }}>
+                          <Text style={[
                     {
                         fontFamily: AppFonts.interMedium,
                         fontSize: 13,
@@ -2095,14 +2631,14 @@ const NetworkInspector = ({ enabled = true }) => {
                         color: AppColors.purple,
                     },
                 ]}>
-                      GA Events (
-                      {analyticsSearch
+                            GA Events (
+                            {analyticsSearch
                     ? filteredAnalyticsEvents.length
                     : analyticsEvents.length}
-                      )
-                    </Text>
-                  </Pressable>
-                  <Pressable style={[
+                            )
+                          </Text>
+                        </Pressable>
+                        <Pressable style={[
                     {
                         flex: 1,
                         paddingVertical: 8,
@@ -2117,8 +2653,11 @@ const NetworkInspector = ({ enabled = true }) => {
                         shadowOffset: { width: 0, height: 1 },
                         elevation: 2,
                     },
-                ]} onPress={() => setAnalyticsSubTab('top_events')}>
-                    <Text style={[
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setAnalyticsSubTab('top_events');
+                }}>
+                          <Text style={[
                     {
                         fontFamily: AppFonts.interMedium,
                         fontSize: 13,
@@ -2129,63 +2668,63 @@ const NetworkInspector = ({ enabled = true }) => {
                         color: AppColors.purple,
                     },
                 ]}>
-                      Top Events ({topEventsArray.length})
-                    </Text>
-                  </Pressable>
-                </View>
-              </View>)}
+                            Top Events ({topEventsArray.length})
+                          </Text>
+                        </Pressable>
+                      </View>
+                    </View>)}
 
-            {isReady ? (activeTab === 'insights' ? (<ScrollView style={styles.insightsContainer} contentContainerStyle={styles.insightsContent} showsVerticalScrollIndicator={false}>
-                  {renderInsightsDashboard()}
-                </ScrollView>) : activeTab === 'analytics' ? (selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
+                {isReady ? (activeTab === 'insights' ? (<ScrollView style={styles.insightsContainer} contentContainerStyle={styles.insightsContent} showsVerticalScrollIndicator={false}>
+                      {renderInsightsDashboard()}
+                    </ScrollView>) : activeTab === 'analytics' ? (selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
                     styles.listContent,
                     { paddingHorizontal: 16, paddingTop: 16 },
-                ]} renderItem={({ item: [name, count] }) => {
+                ]} renderItem={({ item: [name, count], index }) => {
                     const maxCount = topEventsArray[0]?.[1] || 1;
                     const color = getEventColor(name);
-                    return (<View style={[
+                    return (<AnimatedEntrance index={index} distance={8} style={[
                             styles.analyticsTopEventsCard,
                             { marginBottom: 12, paddingVertical: 16 },
                         ]}>
-                          <View style={styles.analyticsTopEventRow}>
-                            <View style={{
+                              <View style={styles.analyticsTopEventRow}>
+                                <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 8,
                             flex: 1,
                         }}>
-                              <View style={[
+                                  <View style={[
                             styles.analyticsIconCircle,
                             { backgroundColor: `${color}1A` },
                         ]}>
-                                <Svg width={14} height={14} viewBox="0 0 24 24" fill={color}>
-                                  <Circle cx="12" cy="12" r="10" opacity="0.3"/>
-                                  <Path d="M7 14l3-3 4 4 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
-                                </Svg>
-                              </View>
-                              <Text style={styles.analyticsTopEventName} numberOfLines={2}>
-                                {name}
-                              </Text>
-                            </View>
-                            <View style={styles.analyticsTopEventBarWrap}>
-                              <LinearGradient colors={[color, `${color}99`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[
+                                    <Svg width={14} height={14} viewBox="0 0 24 24" fill={color}>
+                                      <Circle cx="12" cy="12" r="10" opacity="0.3"/>
+                                      <Path d="M7 14l3-3 4 4 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+                                    </Svg>
+                                  </View>
+                                  <Text style={styles.analyticsTopEventName} numberOfLines={2}>
+                                    {name}
+                                  </Text>
+                                </View>
+                                <View style={styles.analyticsTopEventBarWrap}>
+                                  <LinearGradient colors={[color, `${color}99`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[
                             styles.analyticsTopEventBar,
                             {
                                 width: `${Math.max(6, (count / maxCount) * 100)}%`,
                             },
                         ]}/>
-                            </View>
-                            <Text style={styles.analyticsTopEventCount}>
-                              {count}
-                            </Text>
-                          </View>
-                        </View>);
+                                </View>
+                                <Text style={styles.analyticsTopEventCount}>
+                                  {count}
+                                </Text>
+                              </View>
+                            </AnimatedEntrance>);
                 }} ListEmptyComponent={<View style={styles.emptyContainer}>
-                        <View style={styles.emptyIconWrap}>
-                          <EmptyRadarIcon color={AppColors.purple} size={32}/>
-                        </View>
-                        <Text style={styles.emptyTitle}>No Top Events</Text>
-                      </View>}/>) : (<FlatList data={filteredAnalyticsEvents} keyExtractor={item => item.id.toString()} renderItem={({ item, index }) => {
+                            <View style={styles.emptyIconWrap}>
+                              <EmptyRadarIcon color={AppColors.purple} size={32}/>
+                            </View>
+                            <Text style={styles.emptyTitle}>No Top Events</Text>
+                          </View>}/>) : (<FlatList data={filteredAnalyticsEvents} keyExtractor={item => item.id.toString()} renderItem={({ item, index }) => {
                     const prev = filteredAnalyticsEvents[index + 1];
                     const next = filteredAnalyticsEvents[index - 1];
                     const msSincePrev = prev
@@ -2196,7 +2735,11 @@ const NetworkInspector = ({ enabled = true }) => {
                         ? Math.floor(next.timestamp / 60000)
                         : -1;
                     const showTimestamp = index === 0 || thisMin !== nextMin;
-                    return (<AnalyticsEventCard 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 index={index} distance={8}>
+                              <AnalyticsEventCard 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 ||
@@ -2214,69 +2757,71 @@ const NetworkInspector = ({ enabled = true }) => {
                                 }
                             }
                             return screenName;
-                        })()}/>);
+                        })()}/>
+                            </AnimatedEntrance>);
                 }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews ListEmptyComponent={<View style={styles.emptyContainer}>
-                        <View style={styles.emptyIconWrap}>
-                          <EmptyRadarIcon color={AppColors.purple} size={32}/>
-                        </View>
-                        <Text style={styles.emptyTitle}>
-                          {analyticsSearch.length > 0
+                            <View style={styles.emptyIconWrap}>
+                              <EmptyRadarIcon color={AppColors.purple} size={32}/>
+                            </View>
+                            <Text style={styles.emptyTitle}>
+                              {analyticsSearch.length > 0
                         ? 'No matching events'
                         : 'No analytics events yet'}
-                        </Text>
-                        <Text style={styles.emptySub}>
-                          {analyticsSearch.length > 0
+                            </Text>
+                            <Text style={styles.emptySub}>
+                              {analyticsSearch.length > 0
                         ? 'Try adjusting your search.'
                         : 'Call setupAnalyticsLogger(analytics()) at app start.'}
-                        </Text>
-                      </View>} contentContainerStyle={[
+                            </Text>
+                          </View>} contentContainerStyle={[
                     styles.listContent,
-                    filteredAnalyticsEvents.length === 0 && { flexGrow: 1 },
+                    filteredAnalyticsEvents.length === 0 && {
+                        flexGrow: 1,
+                    },
                 ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<FlatList data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<View style={{ marginTop: 8 }}>
-                        <View style={styles.toolbarRow}>
-                          <View style={styles.searchContainer}>
-                            <SearchIcon color={AppColors.grayTextWeak} size={16}/>
-                            <TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                            {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={10} style={styles.clearBtn}>
-                                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                              </Pressable>)}
-                          </View>
-
-                          <View style={styles.toolbarRight}>
-                            <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                              <TrashIcon color={AppColors.grayTextStrong} size={18}/>
-                              {selectedLogs.size > 0 && (<View style={styles.trashBadge}>
-                                  <Text style={styles.trashBadgeText}>
-                                    {selectedLogs.size}
-                                  </Text>
-                                </View>)}
-                            </TouchableScale>
+                          <View style={styles.toolbarRow}>
+                            <View style={styles.searchContainer}>
+                              <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+                              <TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                              {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={10} style={styles.clearBtn}>
+                                  <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                                </Pressable>)}
+                            </View>
 
+                            <View style={styles.toolbarRight}>
+                              <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
+                                <TrashIcon color={AppColors.grayTextStrong} size={18}/>
+                                {selectedLogs.size > 0 && (<View style={styles.trashBadge}>
+                                    <Text style={styles.trashBadgeText}>
+                                      {selectedLogs.size}
+                                    </Text>
+                                  </View>)}
+                              </TouchableScale>
 
-                            <TouchableScale style={styles.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
-                              <SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors.grayTextStrong} size={18}/>
-                            </TouchableScale>
+                              <TouchableScale style={styles.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+                                <SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors.grayTextStrong} size={18}/>
+                              </TouchableScale>
 
-                            <TouchableScale style={[
+                              <TouchableScale style={[
                         styles.toolbarBtn,
                         filtersAccordion.isOpen &&
                             styles.toolbarBtnActive,
                     ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
-                              <FilterIcon color={filtersAccordion.isOpen
+                                <FilterIcon color={filtersAccordion.isOpen
                         ? AppColors.purple
                         : AppColors.grayTextStrong} size={18}/>
-                            </TouchableScale>
+                              </TouchableScale>
+                            </View>
                           </View>
-                        </View>
 
-                        <Animated.View style={[
+                          <Animated.View style={[
                         filtersAccordion.bodyStyle,
                         { overflow: 'hidden' },
                     ]}>
-                          <View style={styles.filtersContainer}>
-                            <Text style={styles.filtersHeading}>STATUS</Text>
-                            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
-                              {STATUS_FILTERS.map(filter => {
+                            <View style={styles.filtersContainer}>
+                              <Text style={styles.filtersHeading}>STATUS</Text>
+                              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
+                                {STATUS_FILTERS.map(filter => {
                         const isAll = filter === 'ALL';
                         const active = isAll
                             ? statusFilters.size === 0
@@ -2295,35 +2840,38 @@ const NetworkInspector = ({ enabled = true }) => {
                                     });
                                 }
                             }} hitSlop={10}>
-                                    {active ? (<View style={[
+                                      {active ? (<View style={[
                                     styles.statusFilterChip,
                                     styles.statusFilterActive,
                                     { overflow: 'hidden' },
                                 ]}>
-                                        <LinearGradient colors={[
+                                          <LinearGradient colors={[
                                     AppColors.purpleShade50,
                                     '#EAE5FF',
                                 ]} style={StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
-                                        <Text style={[
+                                          <Text style={[
                                     styles.statusFilterText,
                                     { color: AppColors.purple },
                                 ]}>
-                                          {filter}
-                                        </Text>
-                                      </View>) : (<View style={styles.statusFilterChip}>
-                                        <Text style={styles.statusFilterText}>
-                                          {filter}
-                                        </Text>
-                                      </View>)}
-                                  </TouchableScale>);
+                                            {filter}
+                                          </Text>
+                                        </View>) : (<View style={styles.statusFilterChip}>
+                                          <Text style={styles.statusFilterText}>
+                                            {filter}
+                                          </Text>
+                                        </View>)}
+                                    </TouchableScale>);
                     })}
-                            </ScrollView>
+                              </ScrollView>
 
-                            <Text style={[styles.filtersHeading, { marginTop: 16 }]}>
-                              METHOD
-                            </Text>
-                            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
-                              {availableMethods.map(filter => {
+                              <Text style={[
+                        styles.filtersHeading,
+                        { marginTop: 16 },
+                    ]}>
+                                METHOD
+                              </Text>
+                              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
+                                {availableMethods.map(filter => {
                         const isAll = filter === 'ALL';
                         const active = isAll
                             ? methodFilters.size === 0
@@ -2342,101 +2890,101 @@ const NetworkInspector = ({ enabled = true }) => {
                                     });
                                 }
                             }} hitSlop={10}>
-                                    {active ? (<View style={[
+                                      {active ? (<View style={[
                                     styles.statusFilterChip,
                                     styles.statusFilterActive,
                                     { overflow: 'hidden' },
                                 ]}>
-                                        <LinearGradient colors={[
+                                          <LinearGradient colors={[
                                     AppColors.purpleShade50,
                                     '#EAE5FF',
                                 ]} style={StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
-                                        <Text style={[
+                                          <Text style={[
                                     styles.statusFilterText,
                                     { color: AppColors.purple },
                                 ]}>
-                                          {filter}
-                                        </Text>
-                                      </View>) : (<View style={styles.statusFilterChip}>
-                                        <Text style={styles.statusFilterText}>
-                                          {filter}
-                                        </Text>
-                                      </View>)}
-                                  </TouchableScale>);
+                                            {filter}
+                                          </Text>
+                                        </View>) : (<View style={styles.statusFilterChip}>
+                                          <Text style={styles.statusFilterText}>
+                                            {filter}
+                                          </Text>
+                                        </View>)}
+                                    </TouchableScale>);
                     })}
-                            </ScrollView>
-                          </View>
-                        </Animated.View>
+                              </ScrollView>
+                            </View>
+                          </Animated.View>
 
-                        {(search ||
+                          {(search ||
                         statusFilters.size > 0 ||
                         methodFilters.size > 0) && (<Text style={styles.resultCount}>
-                            {filteredLogs.length === logs.length
+                              {filteredLogs.length === logs.length
                             ? `${logs.length} requests`
                             : `${filteredLogs.length} of ${logs.length} filtered requests`}
-                          </Text>)}
-                      </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
+                            </Text>)}
+                        </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
                     styles.listContent,
                     filteredLogs.length === 0 && { flexGrow: 1 },
                 ]} keyboardShouldPersistTaps="handled"/>) : activeTab === 'logs' ? (<View style={{ flex: 1 }}>
-                  <View style={{
+                      <View style={{
                     backgroundColor: '#FFFFFF',
                     borderBottomWidth: 1,
                     borderBottomColor: AppColors.dividerColor,
                     paddingBottom: 6,
                 }}>
-                    <View style={[
+                        <View style={[
                     styles.toolbarRow,
                     { marginTop: 12, marginBottom: 8 },
                 ]}>
-                      <View style={styles.searchContainer}>
-                        <SearchIcon color={AppColors.grayTextWeak} size={16}/>
-                        <TextInput placeholder="Search logs..." placeholderTextColor={AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                        {logSearch.length > 0 && (<Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles.clearBtn}>
-                            <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                          </Pressable>)}
-                      </View>
+                          <View style={styles.searchContainer}>
+                            <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+                            <TextInput placeholder="Search logs..." placeholderTextColor={AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                            {logSearch.length > 0 && (<Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles.clearBtn}>
+                                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                              </Pressable>)}
+                          </View>
 
-                      <View style={styles.toolbarRight}>
-                        <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                          <TrashIcon color={AppColors.grayTextStrong} size={18}/>
-                        </TouchableScale>
-                      </View>
-                    </View>
+                          <View style={styles.toolbarRight}>
+                            <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
+                              <TrashIcon color={AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale>
+                          </View>
+                        </View>
 
-                    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+                        <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 onPress={() => {
                             setLogFilters(new Set(['all']));
                         }}>
-                            <View style={[
+                                <View style={[
                             styles.statusFilterChip,
                             active && {
                                 borderColor: AppColors.purpleShade700,
                                 backgroundColor: '#F4EBFF',
                             },
                         ]}>
-                              <Text numberOfLines={1} style={[
+                                  <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.purpleShade700,
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                All ({logCounts.all})
-                              </Text>
-                            </View>
-                          </TouchableScale>);
+                                    All ({logCounts.all})
+                                  </Text>
+                                </View>
+                              </TouchableScale>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('user-log');
                     return (<TouchableScale onPress={() => {
                             setLogFilters(prev => {
@@ -2450,27 +2998,27 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <View style={[
+                                <View style={[
                             styles.statusFilterChip,
                             active && {
                                 borderColor: '#64748B',
                                 backgroundColor: '#F1F5F9',
                             },
                         ]}>
-                              <Text numberOfLines={1} style={[
+                                  <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: '#334155',
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                User Log ({logCounts['user-log']})
-                              </Text>
-                            </View>
-                          </TouchableScale>);
+                                    User Log ({logCounts['user-log']})
+                                  </Text>
+                                </View>
+                              </TouchableScale>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('info');
                     return (<TouchableScale onPress={() => {
                             setLogFilters(prev => {
@@ -2484,27 +3032,27 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <View style={[
+                                <View style={[
                             styles.statusFilterChip,
                             active && {
                                 borderColor: AppColors.purple,
                                 backgroundColor: AppColors.purpleShade50,
                             },
                         ]}>
-                              <Text numberOfLines={1} style={[
+                                  <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.purple,
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                Info ({logCounts.info})
-                              </Text>
-                            </View>
-                          </TouchableScale>);
+                                    Info ({logCounts.info})
+                                  </Text>
+                                </View>
+                              </TouchableScale>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('warn');
                     return (<TouchableScale onPress={() => {
                             setLogFilters(prev => {
@@ -2518,14 +3066,14 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <View style={[
+                                <View style={[
                             styles.statusFilterChip,
                             active && {
                                 borderColor: AppColors.lightOrange,
                                 backgroundColor: '#FFFDF6',
                             },
                         ]}>
-                              <Text numberOfLines={1} style={[
+                                  <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.darkOrange ||
@@ -2533,13 +3081,13 @@ const NetworkInspector = ({ enabled = true }) => {
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                Warning ({logCounts.warn})
-                              </Text>
-                            </View>
-                          </TouchableScale>);
+                                    Warning ({logCounts.warn})
+                                  </Text>
+                                </View>
+                              </TouchableScale>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('error');
                     return (<TouchableScale onPress={() => {
                             setLogFilters(prev => {
@@ -2553,27 +3101,27 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <View style={[
+                                <View style={[
                             styles.statusFilterChip,
                             active && {
                                 borderColor: AppColors.errorColor,
                                 backgroundColor: '#FFF5F6',
                             },
                         ]}>
-                              <Text numberOfLines={1} style={[
+                                  <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.errorColor,
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                Error ({logCounts.error})
-                              </Text>
-                            </View>
-                          </TouchableScale>);
+                                    Error ({logCounts.error})
+                                  </Text>
+                                </View>
+                              </TouchableScale>);
                 })()}
 
-                      {(() => {
+                          {(() => {
                     const active = logFilters.has('analytics');
                     return (<TouchableScale onPress={() => {
                             setLogFilters(prev => {
@@ -2587,29 +3135,29 @@ const NetworkInspector = ({ enabled = true }) => {
                                 return next;
                             });
                         }}>
-                            <View style={[
+                                <View style={[
                             styles.statusFilterChip,
                             active && {
                                 borderColor: AppColors.skyBlue,
                                 backgroundColor: `${AppColors.skyBlue}15`,
                             },
                         ]}>
-                              <Text numberOfLines={1} style={[
+                                  <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.skyBlue,
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                Analytics ({logCounts.analytics})
-                              </Text>
-                            </View>
-                          </TouchableScale>);
+                                    Analytics ({logCounts.analytics})
+                                  </Text>
+                                </View>
+                              </TouchableScale>);
                 })()}
-                    </ScrollView>
-                  </View>
+                        </ScrollView>
+                      </View>
 
-                  <FlatList data={filteredConsoleLogs} keyExtractor={item => item.id.toString()} ListHeaderComponent={(() => {
+                      <FlatList data={filteredConsoleLogs} keyExtractor={item => item.id.toString()} ListHeaderComponent={(() => {
                     const total = visibleConsoleLogs.length;
                     const filtered = filteredConsoleLogs.length;
                     const isAllSelected = logFilters.has('all') ||
@@ -2619,8 +3167,8 @@ const NetworkInspector = ({ enabled = true }) => {
                                 styles.resultCount,
                                 { marginBottom: 4, marginTop: 12 },
                             ]}>
-                            Showing ({filtered}/{total}) logs showing
-                          </Text>);
+                                Showing ({filtered}/{total}) logs showing
+                              </Text>);
                     }
                     else {
                         const activeFilterNames = Array.from(logFilters)
@@ -2630,31 +3178,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 (<Text style={[
                                 styles.resultCount,
                                 { marginBottom: 4, marginTop: 12 },
                             ]}>
-                            Filtering with {activeFilterNames.join(', ')} (
-                            {filtered}/{total}) logs is showing
-                          </Text>);
+                                Filtering with {activeFilterNames.join(', ')} (
+                                {filtered}/{total}) logs is showing
+                              </Text>);
                     }
-                })()} renderItem={({ item }) => (<ConsoleLogCard item={item} searchStr={logSearch}/>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
+                })()} renderItem={({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
+                            <ConsoleLogCard item={item} searchStr={logSearch}/>
+                          </AnimatedEntrance>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
                     styles.listContent,
                     filteredConsoleLogs.length === 0 && { flexGrow: 1 },
                 ]} keyboardShouldPersistTaps="handled"/>
-                </View>) : activeTab === 'webview' ? (webViewNavHistory.length === 0 ? (<View style={styles.emptyContainer}>
-                    <View style={styles.emptyIconWrap}>
-                      <GlobeIcon color={AppColors.purple} size={32}/>
-                    </View>
-                    <Text style={styles.emptyTitle}>No WebView Activity</Text>
-                    <Text style={styles.emptySub}>
-                      Load a webpage within a connected WebView component to inspect pages, page source, and console logs.
-                    </Text>
-                  </View>) : (<View style={{ flex: 1 }}>
-                    {/* ─── Current Page Address Bar (Now on top) ─── */}
-                  {(() => {
+                    </View>) : activeTab === 'webview' ? (webViewNavHistory.length === 0 ? (<View style={styles.emptyContainer}>
+                        <View style={styles.emptyIconWrap}>
+                          <GlobeIcon color={AppColors.purple} size={32}/>
+                        </View>
+                        <Text style={styles.emptyTitle}>
+                          No WebView Activity
+                        </Text>
+                        <Text style={styles.emptySub}>
+                          Load a webpage within a connected WebView component to
+                          inspect pages, page source, and console logs.
+                        </Text>
+                      </View>) : (<View style={{ flex: 1 }}>
+                        {/* ─── Current Page Address Bar (Now on top) ─── */}
+                        {(() => {
                     const currentUrl = webViewNavHistory[0]?.url;
                     if (!currentUrl)
                         return null;
@@ -2666,7 +3220,7 @@ const NetworkInspector = ({ enabled = true }) => {
                             borderBottomWidth: 1,
                             borderBottomColor: AppColors.dividerColor,
                         }}>
-                        <View style={{
+                              <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             backgroundColor: AppColors.grayBackground,
@@ -2677,27 +3231,42 @@ const NetworkInspector = ({ enabled = true }) => {
                             paddingVertical: 5,
                             gap: 8,
                         }}>
-                          {/* Left: Lock and HTTPS label */}
-                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                            <Text style={{ fontSize: 11 }}>🔒</Text>
-                            <Text style={{ fontFamily: AppFonts.interBold, fontSize: 9.5, color: AppColors.greenColor, letterSpacing: 0.5 }}>HTTPS</Text>
-                          </View>
-                          <View style={{ width: 1.5, height: 12, backgroundColor: AppColors.grayBorderSecondary }}/>
+                                {/* Left: Lock and HTTPS label */}
+                                <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                        }}>
+                                  <Text style={{ fontSize: 11 }}>🔒</Text>
+                                  <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 9.5,
+                            color: AppColors.greenColor,
+                            letterSpacing: 0.5,
+                        }}>
+                                    HTTPS
+                                  </Text>
+                                </View>
+                                <View style={{
+                            width: 1.5,
+                            height: 12,
+                            backgroundColor: AppColors.grayBorderSecondary,
+                        }}/>
 
-                          {/* Middle: URL text (Address style) */}
-                          <View style={{ flex: 1 }}>
-                            <HighlightText text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
+                                {/* Middle: URL text (Address style) */}
+                                <View style={{ flex: 1 }}>
+                                  <HighlightText text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
                             fontFamily: AppFonts.interMedium,
                             fontSize: 11.5,
                             color: AppColors.primaryBlack,
                         }} highlightStyle={styles.highlight} detectLinks={false}/>
-                          </View>
+                                </View>
 
-                          {/* Right: Copy Button */}
-                          <CopyButton value={currentUrl} label="URL"/>
+                                {/* Right: Copy Button */}
+                                <CopyButton value={currentUrl} label="URL"/>
 
-                          {/* Right: Globe Icon button to open browser */}
-                          <TouchableScale onPress={() => Linking.openURL(currentUrl)} hitSlop={8} style={{
+                                {/* Right: Globe Icon button to open browser */}
+                                <TouchableScale onPress={() => Linking.openURL(currentUrl)} hitSlop={8} style={{
                             width: 26,
                             height: 26,
                             borderRadius: 13,
@@ -2707,26 +3276,26 @@ const NetworkInspector = ({ enabled = true }) => {
                             alignItems: 'center',
                             justifyContent: 'center',
                         }}>
-                            <GlobeIcon size={11} color={AppColors.purple}/>
-                          </TouchableScale>
-                        </View>
-                      </View>);
+                                  <GlobeIcon size={11} color={AppColors.purple}/>
+                                </TouchableScale>
+                              </View>
+                            </View>);
                 })()}
 
-                  {/* ─── WebView Sub-Tabs (Now below Address Bar) ─── */}
-                  <View style={{
+                        {/* ─── WebView Sub-Tabs (Now below Address Bar) ─── */}
+                        <View style={{
                     backgroundColor: AppColors.primaryLight,
                     borderBottomWidth: 1,
                     borderBottomColor: AppColors.dividerColor,
                     paddingVertical: 6,
                 }}>
-                    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
                     paddingHorizontal: 12,
                     flexDirection: 'row',
                     gap: 8,
                 }}>
-                      {/* Sub-tab 1: Preview */}
-                      <Pressable style={[
+                            {/* Sub-tab 1: Preview */}
+                            <Pressable style={[
                     {
                         paddingVertical: 6,
                         paddingHorizontal: 14,
@@ -2742,19 +3311,28 @@ const NetworkInspector = ({ enabled = true }) => {
                         backgroundColor: AppColors.purple,
                         borderColor: AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('preview')}>
-                        <EyeIcon color={webViewSubTab === 'preview' ? '#FFFFFF' : AppColors.grayTextWeak} size={13}/>
-                        <Text style={{
-                    fontFamily: webViewSubTab === 'preview' ? AppFonts.interBold : AppFonts.interMedium,
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('preview');
+                }}>
+                              <EyeIcon color={webViewSubTab === 'preview'
+                    ? '#FFFFFF'
+                    : AppColors.grayTextWeak} size={13}/>
+                              <Text style={{
+                    fontFamily: webViewSubTab === 'preview'
+                        ? AppFonts.interBold
+                        : AppFonts.interMedium,
                     fontSize: 12,
-                    color: webViewSubTab === 'preview' ? '#FFFFFF' : AppColors.grayTextStrong,
+                    color: webViewSubTab === 'preview'
+                        ? '#FFFFFF'
+                        : AppColors.grayTextStrong,
                 }}>
-                          Preview
-                        </Text>
-                      </Pressable>
+                                Preview
+                              </Text>
+                            </Pressable>
 
-                      {/* Sub-tab 2: Page Source */}
-                      <Pressable style={[
+                            {/* Sub-tab 2: Page Source */}
+                            <Pressable style={[
                     {
                         paddingVertical: 6,
                         paddingHorizontal: 14,
@@ -2770,19 +3348,28 @@ const NetworkInspector = ({ enabled = true }) => {
                         backgroundColor: AppColors.purple,
                         borderColor: AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('html')}>
-                        <HtmlIcon color={webViewSubTab === 'html' ? '#FFFFFF' : AppColors.grayTextWeak} size={13}/>
-                        <Text style={{
-                    fontFamily: webViewSubTab === 'html' ? AppFonts.interBold : AppFonts.interMedium,
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('html');
+                }}>
+                              <HtmlIcon color={webViewSubTab === 'html'
+                    ? '#FFFFFF'
+                    : AppColors.grayTextWeak} size={13}/>
+                              <Text style={{
+                    fontFamily: webViewSubTab === 'html'
+                        ? AppFonts.interBold
+                        : AppFonts.interMedium,
                     fontSize: 12,
-                    color: webViewSubTab === 'html' ? '#FFFFFF' : AppColors.grayTextStrong,
+                    color: webViewSubTab === 'html'
+                        ? '#FFFFFF'
+                        : AppColors.grayTextStrong,
                 }}>
-                          Page Source
-                        </Text>
-                      </Pressable>
+                                Page Source
+                              </Text>
+                            </Pressable>
 
-                      {/* Sub-tab 3: History */}
-                      <Pressable style={[
+                            {/* Sub-tab 3: History */}
+                            <Pressable style={[
                     {
                         paddingVertical: 6,
                         paddingHorizontal: 14,
@@ -2798,19 +3385,28 @@ const NetworkInspector = ({ enabled = true }) => {
                         backgroundColor: AppColors.purple,
                         borderColor: AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('navigation')}>
-                        <ClockIcon color={webViewSubTab === 'navigation' ? '#FFFFFF' : AppColors.grayTextWeak} size={13}/>
-                        <Text style={{
-                    fontFamily: webViewSubTab === 'navigation' ? AppFonts.interBold : AppFonts.interMedium,
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('navigation');
+                }}>
+                              <ClockIcon color={webViewSubTab === 'navigation'
+                    ? '#FFFFFF'
+                    : AppColors.grayTextWeak} size={13}/>
+                              <Text style={{
+                    fontFamily: webViewSubTab === 'navigation'
+                        ? AppFonts.interBold
+                        : AppFonts.interMedium,
                     fontSize: 12,
-                    color: webViewSubTab === 'navigation' ? '#FFFFFF' : AppColors.grayTextStrong,
+                    color: webViewSubTab === 'navigation'
+                        ? '#FFFFFF'
+                        : AppColors.grayTextStrong,
                 }}>
-                          History ({webViewNavHistory.length})
-                        </Text>
-                      </Pressable>
+                                History ({webViewNavHistory.length})
+                              </Text>
+                            </Pressable>
 
-                      {/* Sub-tab 4: Console */}
-                      <Pressable style={[
+                            {/* Sub-tab 4: Console */}
+                            <Pressable style={[
                     {
                         paddingVertical: 6,
                         paddingHorizontal: 14,
@@ -2826,23 +3422,32 @@ const NetworkInspector = ({ enabled = true }) => {
                         backgroundColor: AppColors.purple,
                         borderColor: AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('console')}>
-                        <TerminalIcon color={webViewSubTab === 'console' ? '#FFFFFF' : AppColors.grayTextWeak} size={13}/>
-                        <Text style={{
-                    fontFamily: webViewSubTab === 'console' ? AppFonts.interBold : AppFonts.interMedium,
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('console');
+                }}>
+                              <TerminalIcon color={webViewSubTab === 'console'
+                    ? '#FFFFFF'
+                    : AppColors.grayTextWeak} size={13}/>
+                              <Text style={{
+                    fontFamily: webViewSubTab === 'console'
+                        ? AppFonts.interBold
+                        : AppFonts.interMedium,
                     fontSize: 12,
-                    color: webViewSubTab === 'console' ? '#FFFFFF' : AppColors.grayTextStrong,
+                    color: webViewSubTab === 'console'
+                        ? '#FFFFFF'
+                        : AppColors.grayTextStrong,
                 }}>
-                          Console ({webViewLogs.length})
-                        </Text>
-                      </Pressable>
-                    </ScrollView>
-                  </View>
+                                Console ({webViewLogs.length})
+                              </Text>
+                            </Pressable>
+                          </ScrollView>
+                        </View>
 
-                  {webViewSubTab === 'html' ? (<View style={{ flex: 1 }}>
-                      {webViewHtml || webViewCss || webViewJs ? (<View style={{ flex: 1 }}>
-                          {/* Clear Inspect Banner */}
-                          {inspectedElement && (<View style={{
+                        {webViewSubTab === 'html' ? (<View style={{ flex: 1 }}>
+                            {webViewHtml || webViewCss || webViewJs ? (<View style={{ flex: 1 }}>
+                                {/* Clear Inspect Banner */}
+                                {inspectedElement && (<View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 justifyContent: 'space-between',
@@ -2852,36 +3457,44 @@ const NetworkInspector = ({ enabled = true }) => {
                                 borderBottomWidth: 1,
                                 borderBottomColor: AppColors.dividerColor,
                             }}>
-                              <Text style={{
+                                    <Text style={{
                                 fontFamily: AppFonts.interMedium,
                                 fontSize: 11.5,
                                 color: AppColors.purple,
                                 flex: 1,
                             }}>
-                                Inspecting element:{' '}
-                                <Text style={{ fontFamily: AppFonts.interBold }}>
-                                  &lt;{inspectedElement.tagName}
-                                  {inspectedElement.id ? ` id="${inspectedElement.id}"` : ''}
-                                  {inspectedElement.className ? ` class="${inspectedElement.className.trim().split(/\s+/)[0]}"` : ''}
-                                  &gt;
-                                </Text>
-                              </Text>
-                              <Pressable onPress={() => setInspectedElement(null)} style={{
+                                      Inspecting element:{' '}
+                                      <Text style={{
+                                fontFamily: AppFonts.interBold,
+                            }}>
+                                        &lt;{inspectedElement.tagName}
+                                        {inspectedElement.id
+                                ? ` id="${inspectedElement.id}"`
+                                : ''}
+                                        {inspectedElement.className
+                                ? ` class="${inspectedElement.className
+                                    .trim()
+                                    .split(/\s+/)[0]}"`
+                                : ''}
+                                        &gt;
+                                      </Text>
+                                    </Text>
+                                    <Pressable onPress={() => setInspectedElement(null)} style={{
                                 paddingHorizontal: 8,
                                 paddingVertical: 4,
                             }}>
-                                <Text style={{
+                                      <Text style={{
                                 fontFamily: AppFonts.interBold,
                                 fontSize: 11,
                                 color: AppColors.purple,
                             }}>
-                                  Clear Inspect
-                                </Text>
-                              </Pressable>
-                            </View>)}
+                                        Clear Inspect
+                                      </Text>
+                                    </Pressable>
+                                  </View>)}
 
-                          {/* Inner sub-tabs inside HTML source view */}
-                          <View style={{
+                                {/* Inner sub-tabs inside HTML source view */}
+                                <View style={{
                             flexDirection: 'row',
                             borderBottomWidth: 1,
                             borderBottomColor: AppColors.dividerColor,
@@ -2889,7 +3502,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'
@@ -2901,7 +3514,10 @@ const NetworkInspector = ({ enabled = true }) => {
                                 : tab === 'css'
                                     ? '#2563EB' // Blue
                                     : '#D97706'; // Dark Yellow/Amber
-                            return (<Pressable key={tab} onPress={() => setHtmlSubTab(tab)} style={{
+                            return (<Pressable key={tab} onPress={() => {
+                                    animateNextLayout();
+                                    setHtmlSubTab(tab);
+                                }} style={{
                                     paddingVertical: 8,
                                     paddingHorizontal: 4,
                                     borderBottomWidth: 2,
@@ -2912,10 +3528,16 @@ const NetworkInspector = ({ enabled = true }) => {
                                     alignItems: 'center',
                                     gap: 4,
                                 }}>
-                                    {tab === 'html' && (<HtmlIcon color={active ? activeColor : AppColors.grayTextWeak} size={14}/>)}
-                                    {tab === 'css' && (<CssIcon color={active ? activeColor : AppColors.grayTextWeak} size={14}/>)}
-                                    {tab === 'javascript' && (<JsIcon color={active ? activeColor : AppColors.grayTextWeak} size={14}/>)}
-                                    <Text style={{
+                                          {tab === 'html' && (<HtmlIcon color={active
+                                        ? activeColor
+                                        : AppColors.grayTextWeak} size={14}/>)}
+                                          {tab === 'css' && (<CssIcon color={active
+                                        ? activeColor
+                                        : AppColors.grayTextWeak} size={14}/>)}
+                                          {tab === 'javascript' && (<JsIcon color={active
+                                        ? activeColor
+                                        : AppColors.grayTextWeak} size={14}/>)}
+                                          <Text style={{
                                     fontFamily: active
                                         ? AppFonts.interBold
                                         : AppFonts.interMedium,
@@ -2924,70 +3546,81 @@ const NetworkInspector = ({ enabled = true }) => {
                                         ? activeColor
                                         : AppColors.grayTextWeak,
                                 }}>
-                                      {label}
-                                    </Text>
-                                  </Pressable>);
+                                            {label}
+                                          </Text>
+                                        </Pressable>);
                         })}
-                          </View>
-                          <View style={{ flex: 1, padding: 12 }}>
-                            {!isHtmlTabReady ? (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
-                                <ActivityIndicator size="large" color={AppColors.purple}/>
-                              </View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet code={webViewHtml} language="html" search={getSearchTermForTab()}/>) : (<Text style={{
+                                </View>
+                                <View style={{ flex: 1, padding: 12 }}>
+                                  {!isHtmlTabReady ? (<View style={{
+                                flex: 1,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                minHeight: 200,
+                            }}>
+                                      <ActivityIndicator size="large" color={AppColors.purple}/>
+                                    </View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet code={webViewHtml} language="html" search={getSearchTermForTab()}/>) : (<Text style={{
                                 fontFamily: 'monospace',
                                 fontSize: 11,
                                 color: '#94A3B8',
                                 padding: 12,
                             }}>
-                                  No HTML content captured.
-                                </Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet code={webViewCss} language="css" search={getSearchTermForTab()}/>) : (<Text style={{
+                                        No HTML content captured.
+                                      </Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet code={webViewCss} language="css" search={getSearchTermForTab()}/>) : (<Text style={{
                                 fontFamily: 'monospace',
                                 fontSize: 11,
                                 color: '#94A3B8',
                                 padding: 12,
                             }}>
-                                  No CSS styles detected on this page.
-                                </Text>)) : webViewJs ? (<CodeSnippet code={webViewJs} language="javascript" search={getSearchTermForTab()}/>) : (<Text style={{
+                                        No CSS styles detected on this page.
+                                      </Text>)) : webViewJs ? (<CodeSnippet code={webViewJs} language="javascript" search={getSearchTermForTab()}/>) : (<Text style={{
                                 fontFamily: 'monospace',
                                 fontSize: 11,
                                 color: '#94A3B8',
                                 padding: 12,
                             }}>
-                                No scripts detected on this page.
-                              </Text>)}
-                          </View>
-                        </View>) : (<View style={styles.emptyContainer}>
-                          <View style={styles.emptyIconWrap}>
-                            <GlobeIcon color={AppColors.purple} size={32}/>
-                          </View>
-                          <Text style={styles.emptyTitle}>
-                            No Page Source Captured
-                          </Text>
-                          <Text style={styles.emptySub}>
-                            Load a page in the WebView to inspect its HTML, CSS,
-                            or Javascript source.
-                          </Text>
-                        </View>)}
-                    </View>) : webViewSubTab === 'navigation' ? (<FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} style={{ flex: 1, backgroundColor: AppColors.grayBackground }} ListHeaderComponent={<View style={{
+                                      No scripts detected on this page.
+                                    </Text>)}
+                                </View>
+                              </View>) : (<View style={styles.emptyContainer}>
+                                <View style={styles.emptyIconWrap}>
+                                  <GlobeIcon color={AppColors.purple} size={32}/>
+                                </View>
+                                <Text style={styles.emptyTitle}>
+                                  No Page Source Captured
+                                </Text>
+                                <Text style={styles.emptySub}>
+                                  Load a page in the WebView to inspect its
+                                  HTML, CSS, or Javascript source.
+                                </Text>
+                              </View>)}
+                          </View>) : webViewSubTab === 'navigation' ? (<FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} style={{
+                        flex: 1,
+                        backgroundColor: AppColors.grayBackground,
+                    }} ListHeaderComponent={<View style={{
                             paddingHorizontal: 16,
                             paddingTop: 12,
                             paddingBottom: 8,
                         }}>
-                          <Text style={styles.resultCount}>
-                            Navigation History ({webViewNavHistory.length})
-                          </Text>
-                        </View>} renderItem={({ item, index, }) => {
+                                <Text style={styles.resultCount}>
+                                  Navigation History ({webViewNavHistory.length}
+                                  )
+                                </Text>
+                              </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 (<View style={{
+                        return (<AnimatedEntrance index={index} distance={8} style={{
                                 marginHorizontal: 16,
                                 marginVertical: 6,
                                 borderRadius: 12,
                                 borderWidth: 1,
                                 borderColor: AppColors.grayBorderSecondary,
-                                backgroundColor: isLatest ? AppColors.purpleShade50 : AppColors.primaryLight,
+                                backgroundColor: isLatest
+                                    ? AppColors.purpleShade50
+                                    : AppColors.primaryLight,
                                 padding: 14,
                                 flexDirection: 'row',
                                 alignItems: 'center',
@@ -2999,23 +3632,23 @@ const NetworkInspector = ({ enabled = true }) => {
                                 shadowRadius: 4,
                                 elevation: 2,
                             }}>
-                            <View style={{ flex: 1, gap: 8 }}>
-                              {/* Top row: Title and Badge */}
-                              <View style={{
+                                  <View style={{ flex: 1, gap: 8 }}>
+                                    {/* Top row: Title and Badge */}
+                                    <View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 gap: 8,
                                 flexWrap: 'wrap',
                             }}>
-                                <Text numberOfLines={1} ellipsizeMode="tail" style={{
+                                      <Text numberOfLines={1} ellipsizeMode="tail" style={{
                                 fontFamily: AppFonts.interBold,
                                 fontSize: 14,
                                 color: AppColors.primaryBlack,
                                 flexShrink: 1,
                             }}>
-                                  {item.title || 'Untitled Page'}
-                                </Text>
-                                {isLatest && (<View style={{
+                                        {item.title || 'Untitled Page'}
+                                      </Text>
+                                      {isLatest && (<View style={{
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: 4,
@@ -3024,65 +3657,100 @@ const NetworkInspector = ({ enabled = true }) => {
                                     paddingVertical: 3,
                                     borderRadius: 12,
                                 }}>
-                                    <View style={{
+                                          <View style={{
                                     width: 6,
                                     height: 6,
                                     borderRadius: 3,
                                     backgroundColor: AppColors.greenBaggageText,
                                 }}/>
-                                    <Text style={{
+                                          <Text style={{
                                     fontFamily: AppFonts.interBold,
                                     fontSize: 9.5,
                                     color: AppColors.greenBaggageText,
                                 }}>
-                                      Active
-                                    </Text>
-                                  </View>)}
-                              </View>
+                                            Active
+                                          </Text>
+                                        </View>)}
+                                    </View>
 
-                              {/* Middle row: URL with Globe Icon */}
-                              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                                <GlobeIcon size={12} color={AppColors.grayTextWeak}/>
-                                <HighlightText text={item.url} search={webViewSearch} numberOfLines={2} ellipsizeMode="tail" style={{
+                                    {/* Middle row: URL with Globe Icon */}
+                                    <View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 6,
+                            }}>
+                                      <GlobeIcon size={12} color={AppColors.grayTextWeak}/>
+                                      <HighlightText text={item.url} search={webViewSearch} numberOfLines={2} ellipsizeMode="tail" style={{
                                 fontFamily: AppFonts.interRegular,
                                 fontSize: 12,
                                 color: AppColors.grayText,
                                 flex: 1,
                             }} highlightStyle={styles.highlight} detectLinks={true}/>
-                              </View>
+                                    </View>
 
-                              {/* Bottom row: Time */}
-                              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                                <ClockIcon size={11} color={AppColors.grayTextWeak}/>
-                                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: AppColors.grayTextWeak }}>
-                                  {formatNavTime(item.timestamp)}
-                                </Text>
-                              </View>
-                            </View>
-                            <CopyButton value={item.url} label="URL"/>
-                          </View>);
+                                    {/* Bottom row: Time */}
+                                    <View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 6,
+                            }}>
+                                      <ClockIcon size={11} color={AppColors.grayTextWeak}/>
+                                      <Text style={{
+                                fontFamily: AppFonts.interRegular,
+                                fontSize: 11,
+                                color: AppColors.grayTextWeak,
+                            }}>
+                                        {formatNavTime(item.timestamp)}
+                                      </Text>
+                                    </View>
+                                  </View>
+                                  <CopyButton value={item.url} label="URL"/>
+                                </AnimatedEntrance>);
                     }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={webViewSearch.length > 0}/>} contentContainerStyle={[
                         styles.listContent,
-                        filteredNavHistory.length === 0 && { flexGrow: 1 },
-                    ]} keyboardShouldPersistTaps="handled"/>) : webViewSubTab === 'console' ? (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
-                      {webViewLogs.length > 0 ? (<FlatList data={webViewLogs} keyExtractor={(item) => String(item.id)} style={{ flex: 1 }} ListHeaderComponent={<View style={{ paddingHorizontal: 16, paddingTop: 12, paddingBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                              <Text style={styles.resultCount}>
-                                Console Logs ({webViewLogs.length})
-                              </Text>
-                              <TouchableScale onPress={() => clearWebViewData()} style={{ padding: 6, borderRadius: 6, backgroundColor: AppColors.primaryLight, borderWidth: 1, borderColor: AppColors.grayBorderSecondary }}>
-                                <TrashIcon color={AppColors.errorColor} size={14}/>
-                              </TouchableScale>
-                            </View>} renderItem={({ item }) => {
-                            const logColor = item.type === 'error' ? AppColors.errorColor :
-                                item.type === 'warn' ? AppColors.warningIconGold :
-                                    item.type === 'info' ? AppColors.skyBlue :
-                                        AppColors.grayTextWeak;
-                            const bgColor = item.type === 'error' ? 'rgba(255, 46, 87, 0.06)' :
-                                item.type === 'warn' ? 'rgba(191, 162, 82, 0.08)' :
-                                    AppColors.primaryLight;
+                        filteredNavHistory.length === 0 && {
+                            flexGrow: 1,
+                        },
+                    ]} keyboardShouldPersistTaps="handled"/>) : webViewSubTab === 'console' ? (<View style={{
+                        flex: 1,
+                        backgroundColor: AppColors.grayBackground,
+                    }}>
+                            {webViewLogs.length > 0 ? (<FlatList data={webViewLogs} keyExtractor={(item) => String(item.id)} style={{ flex: 1 }} ListHeaderComponent={<View style={{
+                                paddingHorizontal: 16,
+                                paddingTop: 12,
+                                paddingBottom: 8,
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                            }}>
+                                    <Text style={styles.resultCount}>
+                                      Console Logs ({webViewLogs.length})
+                                    </Text>
+                                    <TouchableScale onPress={() => clearWebViewData()} style={{
+                                padding: 6,
+                                borderRadius: 6,
+                                backgroundColor: AppColors.primaryLight,
+                                borderWidth: 1,
+                                borderColor: AppColors.grayBorderSecondary,
+                            }}>
+                                      <TrashIcon color={AppColors.errorColor} size={14}/>
+                                    </TouchableScale>
+                                  </View>} renderItem={({ item }) => {
+                            const logColor = item.type === 'error'
+                                ? AppColors.errorColor
+                                : item.type === 'warn'
+                                    ? AppColors.warningIconGold
+                                    : item.type === 'info'
+                                        ? AppColors.skyBlue
+                                        : AppColors.grayTextWeak;
+                            const bgColor = item.type === 'error'
+                                ? 'rgba(255, 46, 87, 0.06)'
+                                : item.type === 'warn'
+                                    ? 'rgba(191, 162, 82, 0.08)'
+                                    : 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 (<View style={{
+                            return (<AnimatedEntrance index={item.id} distance={8} style={{
                                     marginHorizontal: 12,
                                     marginVertical: 3,
                                     borderRadius: 8,
@@ -3096,34 +3764,65 @@ const NetworkInspector = ({ enabled = true }) => {
                                     gap: 8,
                                     alignItems: 'flex-start',
                                 }}>
-                                <View style={{ paddingTop: 1 }}>
-                                  <TerminalIcon color={logColor} size={11}/>
-                                </View>
-                                <View style={{ flex: 1, gap: 3 }}>
-                                  <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                                    <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10, color: logColor, textTransform: 'uppercase', letterSpacing: 0.5 }}>
-                                      {item.type}
-                                    </Text>
-                                    <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10, color: AppColors.grayTextWeak }}>
-                                      {timeStr}
-                                    </Text>
-                                  </View>
-                                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 12, color: AppColors.primaryBlack, lineHeight: 16 }}>
-                                    {item.message}
-                                  </Text>
+                                      <View style={{ paddingTop: 1 }}>
+                                        <TerminalIcon color={logColor} size={11}/>
+                                      </View>
+                                      <View style={{ flex: 1, gap: 3 }}>
+                                        <View style={{
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                }}>
+                                          <Text style={{
+                                    fontFamily: AppFonts.interBold,
+                                    fontSize: 10,
+                                    color: logColor,
+                                    textTransform: 'uppercase',
+                                    letterSpacing: 0.5,
+                                }}>
+                                            {item.type}
+                                          </Text>
+                                          <Text style={{
+                                    fontFamily: AppFonts.interRegular,
+                                    fontSize: 10,
+                                    color: AppColors.grayTextWeak,
+                                }}>
+                                            {timeStr}
+                                          </Text>
+                                        </View>
+                                        <Text style={{
+                                    fontFamily: AppFonts.interRegular,
+                                    fontSize: 12,
+                                    color: AppColors.primaryBlack,
+                                    lineHeight: 16,
+                                }}>
+                                          {item.message}
+                                        </Text>
+                                      </View>
+                                    </AnimatedEntrance>);
+                        }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[
+                            styles.listContent,
+                            webViewLogs.length === 0 && { flexGrow: 1 },
+                        ]}/>) : (<View style={styles.emptyContainer}>
+                                <View style={styles.emptyIconWrap}>
+                                  <TerminalIcon color={AppColors.purple} size={32}/>
                                 </View>
-                              </View>);
-                        }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[styles.listContent, webViewLogs.length === 0 && { flexGrow: 1 }]}/>) : (<View style={styles.emptyContainer}>
-                          <View style={styles.emptyIconWrap}>
-                            <TerminalIcon color={AppColors.purple} size={32}/>
-                          </View>
-                          <Text style={styles.emptyTitle}>No Console Logs</Text>
-                          <Text style={styles.emptySub}>
-                            Console logs from the WebView will appear here.
-                          </Text>
-                        </View>)}
-                    </View>) : (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
-                      {webViewHtml ? (OriginalWebView ? (<OriginalWebView source={{ html: webViewHtml, baseUrl: webViewHtmlUrl }} injectedJavaScript={previewInspectScript} onMessage={(event) => {
+                                <Text style={styles.emptyTitle}>
+                                  No Console Logs
+                                </Text>
+                                <Text style={styles.emptySub}>
+                                  Console logs from the WebView will appear
+                                  here.
+                                </Text>
+                              </View>)}
+                          </View>) : (<View style={{
+                        flex: 1,
+                        backgroundColor: 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') {
@@ -3138,27 +3837,39 @@ const NetworkInspector = ({ enabled = true }) => {
                                 }
                             }
                             catch (err) { }
-                        }} style={{ flex: 1 }}/>) : (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
-                            <Text style={{ color: AppColors.grayText, textAlign: 'center', fontFamily: AppFonts.interMedium }}>
-                              react-native-webview is not installed in the target project. Install it to enable Preview mode.
-                            </Text>
-                          </View>)) : (<View style={styles.emptyContainer}>
-                          <View style={styles.emptyIconWrap}>
-                            <GlobeIcon color={AppColors.purple} size={32}/>
-                          </View>
-                          <Text style={styles.emptyTitle}>
-                            No Preview Available
-                          </Text>
-                          <Text style={styles.emptySub}>
-                            Load a page in the WebView to see its visual preview.
-                          </Text>
-                        </View>)}
-                    </View>)}
-                </View>)) : activeTab === 'redux' ? (renderReduxTab()) : (<View style={{ flex: 1 }}>
-                  {/* Non-scrollable details header */}
-                  <View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
-                    <View style={styles.detailInfoBar}>
-                      {(() => {
+                        }} style={{ flex: 1 }}/>) : (<View style={{
+                            flex: 1,
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            padding: 20,
+                        }}>
+                                  <Text style={{
+                            color: AppColors.grayText,
+                            textAlign: 'center',
+                            fontFamily: AppFonts.interMedium,
+                        }}>
+                                    react-native-webview is not installed in the
+                                    target project. Install it to enable Preview
+                                    mode.
+                                  </Text>
+                                </View>)) : (<View style={styles.emptyContainer}>
+                                <View style={styles.emptyIconWrap}>
+                                  <GlobeIcon color={AppColors.purple} size={32}/>
+                                </View>
+                                <Text style={styles.emptyTitle}>
+                                  No Preview Available
+                                </Text>
+                                <Text style={styles.emptySub}>
+                                  Load a page in the WebView to see its visual
+                                  preview.
+                                </Text>
+                              </View>)}
+                          </View>)}
+                      </View>)) : activeTab === 'redux' ? (renderReduxTab()) : (<View style={{ flex: 1 }}>
+                      {/* Non-scrollable details header */}
+                      <View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
+                        <View style={styles.detailInfoBar}>
+                          {(() => {
                     let hostStr = '';
                     let pathStr = detailDisplayUrl;
                     let queryStr = '';
@@ -3187,31 +3898,29 @@ const NetworkInspector = ({ enabled = true }) => {
                     }
                     catch (e) { }
                     return (<>
-                            <View style={styles.detailInfoTop}>
-                              <View style={{
+                                <View style={styles.detailInfoTop}>
+                                  <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 8,
                         }}>
-                                <View style={[
+                                    <View style={[
                             styles.methodBadge,
                             {
-                                backgroundColor: `${METHOD_COLORS[selected.method] ??
-                                    METHOD_COLORS.ALL}15`,
+                                backgroundColor: `${METHOD_COLORS[selected.method] ?? METHOD_COLORS.ALL}15`,
                             },
                         ]}>
-                                  <Text style={[
+                                      <Text style={[
                             styles.methodBadgeText,
                             {
-                                color: METHOD_COLORS[selected.method] ??
-                                    METHOD_COLORS.ALL,
+                                color: METHOD_COLORS[selected.method] ?? METHOD_COLORS.ALL,
                             },
                         ]}>
-                                    {selected.method}
-                                  </Text>
-                                </View>
+                                        {selected.method}
+                                      </Text>
+                                    </View>
 
-                                {selected.status != null && (<View style={[
+                                    {selected.status != null && (<View style={[
                                 styles.chip,
                                 {
                                     backgroundColor: selected.status === 0
@@ -3222,10 +3931,10 @@ const NetworkInspector = ({ enabled = true }) => {
                                         : `${getStatusColor(selected.status)}40`,
                                 },
                             ]}>
-                                    {selected.status === 0 ? (<FailIcon size={8} color={AppColors.errorColor}/>) : (<Svg width={6} height={6} viewBox="0 0 10 10" fill="none">
-                                        <Circle cx="5" cy="5" r="5" fill={getStatusColor(selected.status)}/>
-                                      </Svg>)}
-                                    <Text style={[
+                                        {selected.status === 0 ? (<FailIcon size={8} color={AppColors.errorColor}/>) : (<Svg width={6} height={6} viewBox="0 0 10 10" fill="none">
+                                            <Circle cx="5" cy="5" r="5" fill={getStatusColor(selected.status)}/>
+                                          </Svg>)}
+                                        <Text style={[
                                 styles.chipText,
                                 {
                                     color: selected.status === 0
@@ -3233,29 +3942,38 @@ const NetworkInspector = ({ enabled = true }) => {
                                         : getStatusColor(selected.status),
                                 },
                             ]}>
-                                      {selected.status === 0
+                                          {selected.status === 0
                                 ? 'Failed'
                                 : String(selected.status)}
-                                    </Text>
-                                  </View>)}
+                                        </Text>
+                                      </View>)}
 
-                                {selected.duration != null && (<View style={[styles.chip, { backgroundColor: 'rgba(104,75,155,0.08)', borderColor: 'rgba(104,75,155,0.18)' }]}>
-                                    <Text style={[styles.chipText, { color: AppColors.purple }]}>
-                                      {selected.duration}ms
-                                    </Text>
-                                  </View>)}
-                              </View>
-                              <View style={styles.detailInfoRight}>
-                                <TouchableScale style={styles.iconSquareBtn} onPress={() => Linking.openURL(detailDisplayUrl)} hitSlop={12}>
-                                  <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
-                                </TouchableScale>
-                                <CopyButton value={getFetchCommand(selected)} label="fetch()" iconType="fetch"/>
-                                <CopyButton value={getCurlCommand(selected)} label="cURL" iconType="terminal"/>
-                                <CopyButton value={detailDisplayUrl} label="URL"/>
-                              </View>
-                            </View>
+                                    {selected.duration != null && (<View style={[
+                                styles.chip,
+                                {
+                                    backgroundColor: 'rgba(104,75,155,0.08)',
+                                    borderColor: 'rgba(104,75,155,0.18)',
+                                },
+                            ]}>
+                                        <Text style={[
+                                styles.chipText,
+                                { color: AppColors.purple },
+                            ]}>
+                                          {selected.duration}ms
+                                        </Text>
+                                      </View>)}
+                                  </View>
+                                  <View style={styles.detailInfoRight}>
+                                    <TouchableScale style={styles.iconSquareBtn} onPress={() => Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                                      <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
+                                    </TouchableScale>
+                                    <CopyButton value={getFetchCommand(selected)} label="fetch()" iconType="fetch"/>
+                                    <CopyButton value={getCurlCommand(selected)} label="cURL" iconType="terminal"/>
+                                    <CopyButton value={detailDisplayUrl} label="URL"/>
+                                  </View>
+                                </View>
 
-                            <Pressable style={{
+                                <Pressable style={{
                             backgroundColor: AppColors.grayBackground,
                             borderRadius: 10,
                             borderWidth: 1,
@@ -3263,28 +3981,59 @@ const NetworkInspector = ({ enabled = true }) => {
                             padding: 10,
                             marginTop: 6,
                         }} onPress={() => Linking.openURL(detailDisplayUrl)}>
-                              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 2 }}>
-                                <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 10, color: AppColors.grayTextWeak, flex: 1 }} numberOfLines={1}>
-                                  {hostStr || 'API Endpoint'}
-                                </Text>
-                                {queryStr ? (<View style={{ backgroundColor: 'rgba(104,75,155,0.08)', paddingHorizontal: 5, paddingVertical: 1, borderRadius: 4 }}>
-                                    <Text style={{ fontFamily: AppFonts.interBold, fontSize: 8.5, color: AppColors.purple }}>Query Params</Text>
-                                  </View>) : null}
-                              </View>
-                              <Text selectable={true} style={{ fontFamily: AppFonts.interBold, fontSize: 12, color: AppColors.primaryBlack, marginTop: 2 }} numberOfLines={2}>
-                                {pathStr}
-                              </Text>
-                              {queryStr ? (<Text selectable={true} style={{ fontFamily: AppFonts.interRegular, fontSize: 10, color: AppColors.grayTextWeak, marginTop: 4 }} numberOfLines={1}>
-                                  {queryStr}
-                                </Text>) : null}
-                            </Pressable>
-                          </>);
+                                  <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            marginBottom: 2,
+                        }}>
+                                    <Text style={{
+                            fontFamily: AppFonts.interMedium,
+                            fontSize: 10,
+                            color: AppColors.grayTextWeak,
+                            flex: 1,
+                        }} numberOfLines={1}>
+                                      {hostStr || 'API Endpoint'}
+                                    </Text>
+                                    {queryStr ? (<View style={{
+                                backgroundColor: 'rgba(104,75,155,0.08)',
+                                paddingHorizontal: 5,
+                                paddingVertical: 1,
+                                borderRadius: 4,
+                            }}>
+                                        <Text style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 8.5,
+                                color: AppColors.purple,
+                            }}>
+                                          Query Params
+                                        </Text>
+                                      </View>) : null}
+                                  </View>
+                                  <Text selectable={true} style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 12,
+                            color: AppColors.primaryBlack,
+                            marginTop: 2,
+                        }} numberOfLines={2}>
+                                    {pathStr}
+                                  </Text>
+                                  {queryStr ? (<Text selectable={true} style={{
+                                fontFamily: AppFonts.interRegular,
+                                fontSize: 10,
+                                color: AppColors.grayTextWeak,
+                                marginTop: 4,
+                            }} numberOfLines={1}>
+                                      {queryStr}
+                                    </Text>) : null}
+                                </Pressable>
+                              </>);
                 })()}
-                    </View>
-                  </View>
+                        </View>
+                      </View>
 
-                  {/* Sticky Segment Control */}
-                  <View style={{
+                      {/* Sticky Segment Control */}
+                      <View style={{
                     flexDirection: 'row',
                     backgroundColor: AppColors.grayBackground,
                     borderRadius: 10,
@@ -3295,7 +4044,12 @@ const NetworkInspector = ({ enabled = true }) => {
                     borderWidth: 1,
                     borderColor: 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;
@@ -3309,7 +4063,9 @@ const NetworkInspector = ({ enabled = true }) => {
                         return 'Response';
                     };
                     const getIcon = () => {
-                        const iconColor = isActive ? '#FFFFFF' : AppColors.grayText;
+                        const iconColor = isActive
+                            ? '#FFFFFF'
+                            : AppColors.grayText;
                         if (tab === 'metadata')
                             return <StatusIcon color={iconColor}/>;
                         if (tab === 'headers')
@@ -3318,122 +4074,139 @@ const NetworkInspector = ({ enabled = true }) => {
                             return <RequestIcon color={iconColor}/>;
                         return <ResponseIcon color={iconColor}/>;
                     };
-                    return (<TouchableOpacity key={tab} onPress={() => setApiDetailActiveTab(tab)} style={{
+                    return (<TouchableOpacity key={tab} onPress={() => {
+                            animateNextLayout();
+                            setApiDetailActiveTab(tab);
+                        }} style={{
                             flex: 1,
                             paddingVertical: 6,
                             flexDirection: 'row',
                             alignItems: 'center',
                             justifyContent: 'center',
                             borderRadius: 8,
-                            backgroundColor: isActive ? AppColors.purple : 'transparent',
+                            backgroundColor: isActive
+                                ? AppColors.purple
+                                : 'transparent',
                             gap: 4,
                         }}>
-                          {getIcon()}
-                          <Text style={{
+                              {getIcon()}
+                              <Text style={{
                             fontFamily: AppFonts.interBold,
                             fontSize: 10,
-                            color: isActive ? '#FFFFFF' : AppColors.grayText,
+                            color: isActive
+                                ? '#FFFFFF'
+                                : AppColors.grayText,
                         }}>
-                            {getLabel()}
-                          </Text>
-                        </TouchableOpacity>);
+                                {getLabel()}
+                              </Text>
+                            </TouchableOpacity>);
                 })}
-                  </View>
+                      </View>
 
-                  {/* Scrollable Tab Content */}
-                  <ScrollView style={styles.detailScroll} contentContainerStyle={{ paddingHorizontal: 6, paddingBottom: 24 }} showsVerticalScrollIndicator={true}>
-                    {apiDetailActiveTab === 'metadata' && (<>
-                        <MetaAccordion status={selected.status} statusColor={getStatusColor(selected.status)} duration={selected.duration} size={getSize(selected.response)} triggeredAt={formatDateTime(selected.startTime)} method={selected.method} contentType={selected.responseHeaders?.['content-type'] ||
+                      {/* Scrollable Tab Content */}
+                      <ScrollView style={styles.detailScroll} contentContainerStyle={{
+                    paddingHorizontal: 6,
+                    paddingBottom: 24,
+                }} showsVerticalScrollIndicator={true}>
+                        {apiDetailActiveTab === 'metadata' && (<>
+                            <MetaAccordion status={selected.status} statusColor={getStatusColor(selected.status)} duration={selected.duration} size={getSize(selected.response)} triggeredAt={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 routeInfo={routeInfo}/>;
                     })()}
 
-                        {(() => {
+                            {(() => {
                         const cType = selected.responseHeaders?.['content-type'] ||
                             selected.responseHeaders?.['Content-Type'];
                         if (cType?.includes('image/')) {
                             return (<View style={styles.imagePreviewWrapper}>
-                                <Image source={{ uri: selected.url }} style={styles.imagePreview} resizeMode="contain"/>
-                                <TouchableScale style={styles.imageDownloadBtn} onPress={() => Linking.openURL(selected.url)} hitSlop={10}>
-                                  <DownloadIcon color={AppColors.purple} size={18}/>
-                                </TouchableScale>
-                              </View>);
+                                    <Image source={{ uri: selected.url }} style={styles.imagePreview} resizeMode="contain"/>
+                                    <TouchableScale style={styles.imageDownloadBtn} onPress={() => Linking.openURL(selected.url)} hitSlop={10}>
+                                      <DownloadIcon color={AppColors.purple} size={18}/>
+                                    </TouchableScale>
+                                  </View>);
                         }
                         return null;
                     })()}
-                      </>)}
+                          </>)}
 
-                    {apiDetailActiveTab === 'headers' && (<>
-                        <View style={styles.detailSearchRow}>
-                          <View style={styles.detailSearchBox}>
-                            <TextInput placeholder="Search headers..." placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                            {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                              </Pressable>)}
-                          </View>
-                        </View>
+                        {apiDetailActiveTab === 'headers' && (<>
+                            <View style={styles.detailSearchRow}>
+                              <View style={styles.detailSearchBox}>
+                                <TextInput placeholder="Search headers..." placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                                {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                                    <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                                  </Pressable>)}
+                              </View>
+                            </View>
 
-                        <HeadersSection title="Request Headers" headers={selected.requestHeaders} search={detailSearch} resetKey={selected.id}/>
-                        <HeadersSection title="Response Headers" headers={selected.responseHeaders} search={detailSearch} resetKey={selected.id}/>
-                      </>)}
+                            <HeadersSection title="Request Headers" headers={selected.requestHeaders} search={detailSearch} resetKey={selected.id}/>
+                            <HeadersSection title="Response Headers" headers={selected.responseHeaders} search={detailSearch} resetKey={selected.id}/>
+                          </>)}
 
-                    {apiDetailActiveTab === 'request' && selected.request != null && (<>
-                        <View style={styles.detailSearchRow}>
-                          <View style={styles.detailSearchBox}>
-                            <TextInput placeholder="Search request..." placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                            {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                              </Pressable>)}
-                          </View>
-                        </View>
+                        {apiDetailActiveTab === 'request' &&
+                    selected.request != null && (<>
+                              <View style={styles.detailSearchRow}>
+                                <View style={styles.detailSearchBox}>
+                                  <TextInput placeholder="Search request..." placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                                  {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                                      <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                                    </Pressable>)}
+                                </View>
+                              </View>
 
-                        <View style={styles.sectionContainer}>
-                          <SectionHeader title="Request" value={selected.request} expanded={reqExpanded} onToggleExpand={() => setReqExpanded(v => !v)} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={() => {
+                              <View style={styles.sectionContainer}>
+                                <SectionHeader 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 oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : (<JsonViewer data={selected.request} search={detailSearch} forceOpen={reqExpanded}/>)}
-                        </View>
-                      </>)}
+                                {showReqDiff ? (<DiffViewer oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : (<JsonViewer data={selected.request} search={detailSearch} forceOpen={reqExpanded}/>)}
+                              </View>
+                            </>)}
 
-                    {apiDetailActiveTab === 'response' && (<>
-                        <View style={styles.detailSearchRow}>
-                          <View style={styles.detailSearchBox}>
-                            <TextInput placeholder="Search response..." placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                            {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                              </Pressable>)}
-                          </View>
-                        </View>
+                        {apiDetailActiveTab === 'response' && (<>
+                            <View style={styles.detailSearchRow}>
+                              <View style={styles.detailSearchBox}>
+                                <TextInput placeholder="Search response..." placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                                {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                                    <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                                  </Pressable>)}
+                              </View>
+                            </View>
 
-                        <View style={styles.sectionContainer}>
-                          <SectionHeader title="Response" value={selected.response} expanded={resExpanded} onToggleExpand={() => setResExpanded(v => !v)} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={() => {
+                            <View style={styles.sectionContainer}>
+                              <SectionHeader 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 oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer data={selected.response} search={detailSearch} forceOpen={resExpanded}/>)}
-                        </View>
-                      </>)}
-                  </ScrollView>
-                </View>)) : (<View style={styles.empty}>
-                <ActivityIndicator size="large" color={AppColors.purple}/>
-                <Text style={[styles.emptySub, { marginTop: 12 }]}>
-                  Loading logs...
-                </Text>
-              </View>)}
+                              {showResDiff ? (<DiffViewer oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer data={selected.response} search={detailSearch} forceOpen={resExpanded}/>)}
+                            </View>
+                          </>)}
+                      </ScrollView>
+                    </View>)) : (<View style={styles.empty}>
+                    <ActivityIndicator size="large" color={AppColors.purple}/>
+                    <Text style={[styles.emptySub, { marginTop: 12 }]}>
+                      Loading logs...
+                    </Text>
+                  </View>)}
 
-            {settingsPage !== null && (<View style={[StyleSheet.absoluteFill, { backgroundColor: AppColors.grayBackground, zIndex: 99999 }]}>
-                {renderSettings()}
-              </View>)}
+                {settingsPage !== null && (<View style={[
+                    StyleSheet.absoluteFill,
+                    {
+                        backgroundColor: AppColors.grayBackground,
+                        zIndex: 99999,
+                    },
+                ]}>
+                    {renderSettings()}
+                  </View>)}
+              </View>
             </View>
-          </View>
           </ErrorBoundary>)}
       </Modal>
     </>);