react-native-inapp-inspector 1.1.1 → 1.1.3

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Alert, Animated, StyleSheet, FlatList, LayoutAnimation, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, UIManager, LogBox, } from 'react-native';
+import { Alert, Animated, StyleSheet, FlatList, LayoutAnimation, Modal, PanResponder, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, UIManager, LogBox, } 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';
@@ -23,8 +23,10 @@ import CodeSnippet from './components/CodeSnippet';
 import AnimatedEntrance from './components/AnimatedEntrance';
 // Helpers
 import { formatDateTime, getStatusColor, getNavigationInfo, deduplicateLogs, getDomainColor, formatDisplayUrl, getFetchCommand, getCurlCommand, getSize, } from './helpers';
+// #5 — settings persistence
+import { loadSettings, saveSettings } from './helpers/settingsStore';
 // Assets
-import { EmptyRadarIcon, FailIcon, SearchIcon, ScreenIcon, ClearIcon, SortArrowIcon, FilterIcon, InsightsIcon, GlobeIcon, DownloadIcon, CloseWhite, TrashIcon, WhiteBackNavigation, TerminalIcon, SignalIcon, AnalyticsIcon, SunIcon, MoonIcon, BrandCircleIcon, BrandSquareIcon, HtmlIcon, CssIcon, JsIcon, ClockIcon, EyeIcon, CheckIcon, SettingsIcon, RequestIcon, ResponseIcon, HeadersIcon, StatusIcon, } from './components/NetworkIcons';
+import { EmptyRadarIcon, FailIcon, SearchIcon, ScreenIcon, ClearIcon, SortArrowIcon, FilterIcon, InsightsIcon, GlobeIcon, DownloadIcon, CloseWhite, TrashIcon, WhiteBackNavigation, TerminalIcon, SignalIcon, AnalyticsIcon, SunIcon, MoonIcon, BrandCircleIcon, BrandSquareIcon, HtmlIcon, CssIcon, JsIcon, ClockIcon, EyeIcon, CheckIcon, SettingsIcon, RequestIcon, ResponseIcon, HeadersIcon, StatusIcon, ChevronIcon, WipeIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, TrendingUpIcon, } from './components/NetworkIcons';
 import ErrorBoundary from './components/ErrorBoundary';
 // Stylesheet
 import { AppColors } from './styles/AppColors';
@@ -150,6 +152,8 @@ const NetworkInspector = ({ enabled = true, }) => {
     const [showNetworkMenu, setShowNetworkMenu] = useState(false);
     const [showUiMenu, setShowUiMenu] = useState(false);
     const [sortOrder, setSortOrder] = useState('newest');
+    // #7 — sort order for the Logs (console) tab
+    const [logSortOrder, setLogSortOrder] = useState('newest');
     const [reqExpanded, setReqExpanded] = useState(undefined);
     const [resExpanded, setResExpanded] = useState(undefined);
     const [showReqDiff, setShowReqDiff] = useState(false);
@@ -235,6 +239,141 @@ const NetworkInspector = ({ enabled = true, }) => {
     const [reduxExpandDepth, setReduxExpandDepth] = useState(1);
     const [slowRequestThreshold, setSlowRequestThreshold] = useState(1000);
     const [insightsShowConsoleAlerts, setInsightsShowConsoleAlerts] = useState(true);
+    // #6 — tab the inspector opens on. Shown with a DEFAULT badge in Settings.
+    const [defaultTab, setDefaultTab] = useState('apis');
+    // #9 — when false (default), consecutive identical entries in the API and
+    // Console lists are collapsed into one row with a ×N counter.
+    const [showDuplicateLogs, setShowDuplicateLogs] = useState(false);
+    // #5 — hydrate persisted settings once, then auto-save on any change.
+    const settingsHydratedRef = useRef(false);
+    useEffect(() => {
+        let cancelled = false;
+        loadSettings().then(saved => {
+            if (cancelled)
+                return;
+            if (saved.isDark != null) {
+                setIsDark(saved.isDark);
+                toggleGlobalTheme(saved.isDark);
+            }
+            if (saved.modalHeightPercent != null)
+                setModalHeightPercent(saved.modalHeightPercent);
+            if (saved.tabVisibility)
+                setTabVisibility(prev => ({
+                    ...prev,
+                    ...saved.tabVisibility,
+                    apis: true, // APIs is always required
+                }));
+            if (saved.defaultTab)
+                setDefaultTab(saved.defaultTab);
+            if (saved.maxNetworkLogs != null)
+                setMaxNetworkLogs(saved.maxNetworkLogs);
+            if (saved.maxConsoleLogs != null)
+                setMaxConsoleLogs(saved.maxConsoleLogs);
+            if (saved.showConsoleLevels)
+                setShowConsoleLevels(saved.showConsoleLevels);
+            if (saved.webViewCaptureCssJs != null)
+                setWebViewCaptureCssJs(saved.webViewCaptureCssJs);
+            if (saved.reduxAutoRefresh != null)
+                setReduxAutoRefreshState(saved.reduxAutoRefresh);
+            if (saved.reduxExpandDepth != null)
+                setReduxExpandDepth(saved.reduxExpandDepth);
+            if (saved.slowRequestThreshold != null)
+                setSlowRequestThreshold(saved.slowRequestThreshold);
+            if (saved.insightsShowConsoleAlerts != null)
+                setInsightsShowConsoleAlerts(saved.insightsShowConsoleAlerts);
+            if (saved.showDuplicateLogs != null)
+                setShowDuplicateLogs(saved.showDuplicateLogs);
+            if (saved.defaultTab) {
+                const dt = saved.defaultTab;
+                const vis = {
+                    ...{
+                        insights: true,
+                        apis: true,
+                        logs: true,
+                        analytics: true,
+                        webview: true,
+                        redux: true,
+                    },
+                    ...(saved.tabVisibility || {}),
+                    apis: true,
+                };
+                setActiveTab(vis[dt] ? dt : 'apis');
+            }
+            settingsHydratedRef.current = true;
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => {
+        if (!settingsHydratedRef.current)
+            return;
+        saveSettings({
+            isDark,
+            modalHeightPercent,
+            tabVisibility,
+            defaultTab,
+            maxNetworkLogs,
+            maxConsoleLogs,
+            showConsoleLevels,
+            webViewCaptureCssJs,
+            reduxAutoRefresh,
+            reduxExpandDepth,
+            slowRequestThreshold,
+            insightsShowConsoleAlerts,
+            showDuplicateLogs,
+        });
+    }, [
+        isDark,
+        modalHeightPercent,
+        tabVisibility,
+        defaultTab,
+        maxNetworkLogs,
+        maxConsoleLogs,
+        showConsoleLevels,
+        webViewCaptureCssJs,
+        reduxAutoRefresh,
+        reduxExpandDepth,
+        slowRequestThreshold,
+        insightsShowConsoleAlerts,
+        showDuplicateLogs,
+    ]);
+    // #1 — check NPM for a newer published version; surfaces an animated dot
+    // in the header next to the npm chip when an update is available.
+    const [latestNpmVersion, setLatestNpmVersion] = useState(null);
+    const updateAvailable = useMemo(() => {
+        if (!latestNpmVersion)
+            return false;
+        const parse = (v) => v
+            .replace(/^v/, '')
+            .split('.')
+            .map(n => parseInt(n, 10) || 0);
+        const cur = parse(LIB_VERSION);
+        const latest = parse(latestNpmVersion);
+        for (let i = 0; i < 3; i++) {
+            if ((latest[i] || 0) > (cur[i] || 0))
+                return true;
+            if ((latest[i] || 0) < (cur[i] || 0))
+                return false;
+        }
+        return false;
+    }, [latestNpmVersion]);
+    useEffect(() => {
+        let cancelled = false;
+        fetch('https://registry.npmjs.org/react-native-inapp-inspector/latest')
+            .then(res => (res.ok ? res.json() : null))
+            .then(data => {
+            if (!cancelled && data && typeof data.version === 'string') {
+                setLatestNpmVersion(data.version);
+            }
+        })
+            .catch(() => {
+            // Offline / blocked — silently skip the update check.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
     useEffect(() => {
         setReduxAutoRefresh(reduxAutoRefresh);
     }, [reduxAutoRefresh]);
@@ -248,6 +387,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                 animateNextLayout();
                 setActiveTab('apis');
             }
+            // #6 — a hidden module can't be the default landing tab.
+            if (!nextVal && defaultTab === key) {
+                setDefaultTab('apis');
+            }
             return newVisibility;
         });
     };
@@ -329,6 +472,68 @@ 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;
+    // #4 — diagonal light streak sweeping across the floating launcher
+    const fabShineAnim = useRef(new Animated.Value(0)).current;
+    // #11 — header "clear all" icon spin/scale animation
+    const clearAnim = useRef(new Animated.Value(0)).current;
+    // #4 — draggable floating launcher (drag anywhere on screen)
+    const fabPan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+    const fabPanRef = useRef({ x: 0, y: 0 });
+    useEffect(() => {
+        const idX = fabPan.x.addListener(v => (fabPanRef.current.x = v.value));
+        const idY = fabPan.y.addListener(v => (fabPanRef.current.y = v.value));
+        return () => {
+            fabPan.x.removeListener(idX);
+            fabPan.y.removeListener(idY);
+        };
+    }, [fabPan]);
+    const fabDraggedRef = useRef(false);
+    const fabPanResponder = useRef(PanResponder.create({
+        // Let taps fall through to the launcher; only hijack once the
+        // finger actually moves, so onPress still fires on a tap.
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 4 || Math.abs(g.dy) > 4,
+        onPanResponderGrant: () => {
+            fabDraggedRef.current = true;
+            fabPan.setOffset({
+                x: fabPanRef.current.x,
+                y: fabPanRef.current.y,
+            });
+            fabPan.setValue({ x: 0, y: 0 });
+        },
+        onPanResponderMove: Animated.event([null, { dx: fabPan.x, dy: fabPan.y }], {
+            useNativeDriver: false,
+        }),
+        onPanResponderRelease: () => {
+            fabPan.flattenOffset();
+            // small delay so the trailing tap (if any) is ignored
+            setTimeout(() => {
+                fabDraggedRef.current = false;
+            }, 50);
+        },
+        onPanResponderTerminate: () => {
+            fabPan.flattenOffset();
+            fabDraggedRef.current = false;
+        },
+    })).current;
+    // #2 — scroll-to-top button for the main APIs list, always visible at the
+    // bottom right of the list.
+    const apisListRef = useRef(null);
+    const runClearAllWithAnimation = useCallback(() => {
+        Animated.sequence([
+            Animated.timing(clearAnim, {
+                toValue: 1,
+                duration: 320,
+                useNativeDriver: true,
+            }),
+            Animated.timing(clearAnim, {
+                toValue: 0,
+                duration: 0,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        handleClearAll();
+    }, [clearAnim]);
     useEffect(() => {
         if (Platform.OS === 'android') {
             UIManager.setLayoutAnimationEnabledExperimental?.(true);
@@ -350,6 +555,24 @@ const NetworkInspector = ({ enabled = true, }) => {
         loop.start();
         return () => loop.stop();
     }, [pulseAnim]);
+    // #4 — sweep the shine streak across the launcher, pause, repeat.
+    useEffect(() => {
+        const loop = Animated.loop(Animated.sequence([
+            Animated.timing(fabShineAnim, {
+                toValue: 1,
+                duration: 1100,
+                useNativeDriver: true,
+            }),
+            Animated.delay(1600),
+            Animated.timing(fabShineAnim, {
+                toValue: 0,
+                duration: 0,
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [fabShineAnim]);
     useEffect(() => {
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(activePulseAnim, {
@@ -393,6 +616,16 @@ const NetworkInspector = ({ enabled = true, }) => {
             }).start();
         }
     }, [newLogIds]);
+    // #6 — every time the inspector is opened, land on the chosen default tab.
+    useEffect(() => {
+        if (visible) {
+            const target = defaultTab === 'apis' || tabVisibility[defaultTab]
+                ? defaultTab
+                : 'apis';
+            setActiveTab(target);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
     useEffect(() => {
         if (visible) {
             const task = InteractionManager.runAfterInteractions(() => {
@@ -546,8 +779,38 @@ const NetworkInspector = ({ enabled = true, }) => {
         if (sortOrder === 'oldest') {
             result = [...result].reverse();
         }
+        // #9 — collapse consecutive identical requests (same method + url +
+        // status) into one row carrying a ×N counter, unless the user opted in
+        // to seeing every duplicate via Settings → "Show Duplicate Logs".
+        if (!showDuplicateLogs) {
+            const collapsed = [];
+            for (const log of result) {
+                const last = collapsed[collapsed.length - 1];
+                if (last &&
+                    last.method === log.method &&
+                    last.url === log.url &&
+                    last.status === log.status) {
+                    collapsed[collapsed.length - 1] = {
+                        ...last,
+                        duplicateCount: (last.duplicateCount || 1) + 1,
+                    };
+                }
+                else {
+                    collapsed.push({ ...log, duplicateCount: 1 });
+                }
+            }
+            result = collapsed;
+        }
         return result.slice(0, maxNetworkLogs);
-    }, [logs, search, statusFilters, methodFilters, sortOrder, maxNetworkLogs]);
+    }, [
+        logs,
+        search,
+        statusFilters,
+        methodFilters,
+        sortOrder,
+        maxNetworkLogs,
+        showDuplicateLogs,
+    ]);
     const availableMethods = useMemo(() => {
         const methods = new Set();
         logs.forEach(log => {
@@ -753,8 +1016,39 @@ const NetworkInspector = ({ enabled = true, }) => {
             result = result.filter(log => log.message.toLowerCase().includes(s) ||
                 (log.caller ?? '').toLowerCase().includes(s));
         }
+        // #7 — apply sort order (newest/oldest first)
+        result = [...result].sort((a, b) => logSortOrder === 'newest'
+            ? b.timestamp - a.timestamp
+            : a.timestamp - b.timestamp);
+        // #9 — collapse consecutive identical messages into one row with a ×N
+        // counter unless duplicates are explicitly enabled in Settings.
+        if (!showDuplicateLogs) {
+            const collapsed = [];
+            for (const log of result) {
+                const last = collapsed[collapsed.length - 1];
+                if (last &&
+                    last.type === log.type &&
+                    last.sourceMethod === log.sourceMethod &&
+                    last.message === log.message) {
+                    collapsed[collapsed.length - 1] = {
+                        ...last,
+                        duplicateCount: (last.duplicateCount || 1) + 1,
+                    };
+                }
+                else {
+                    collapsed.push({ ...log, duplicateCount: 1 });
+                }
+            }
+            result = collapsed;
+        }
         return result;
-    }, [visibleConsoleLogs, logFilters, logSearch]);
+    }, [
+        visibleConsoleLogs,
+        logFilters,
+        logSearch,
+        logSortOrder,
+        showDuplicateLogs,
+    ]);
     const filteredWebViewLogs = useMemo(() => {
         let result = webViewLogs;
         if (webViewSearch) {
@@ -880,6 +1174,22 @@ const NetworkInspector = ({ enabled = true, }) => {
             ]);
             return;
         }
+        if (activeTab === 'redux') {
+            Alert.alert('Clear Redux Timeline', 'Are you sure you want to clear the dispatched action history?', [
+                { text: 'Cancel', style: 'cancel' },
+                {
+                    text: 'Clear All',
+                    onPress: () => {
+                        clearActionHistory();
+                        setReduxActionHistory([]);
+                        setReduxLastActionMap({});
+                    },
+                    style: 'destructive',
+                },
+            ]);
+            return;
+        }
+        // Default: APIs tab. Only clears NETWORK logs — never touches the other tabs.
         if (selectedLogs.size > 0) {
             setLogs(prev => prev.filter(l => !selectedLogs.has(l.id)));
             setSelectedLogs(new Set());
@@ -887,10 +1197,26 @@ const NetworkInspector = ({ enabled = true, }) => {
         else {
             Alert.alert('Clear Logs', 'Are you sure you want to clear all network logs?', [
                 { text: 'Cancel', style: 'cancel' },
-                { text: 'Clear All', onPress: handleClearAll, style: 'destructive' },
+                {
+                    text: 'Clear All',
+                    onPress: clearNetworkOnly,
+                    style: 'destructive',
+                },
             ]);
         }
     }
+    // Clears ONLY network logs + their derived selection/filter state.
+    function clearNetworkOnly() {
+        clearNetworkLogs();
+        setLogs([]);
+        setSelectedLogs(new Set());
+        setSectionFilters({});
+        setCollapsedSections(new Set());
+        setStatusFilters(new Set());
+        setMethodFilters(new Set());
+        prevLogIdsRef.current = new Set();
+        logRouteMapRef.current = new Map();
+    }
     const detailTitle = useMemo(() => {
         if (!selected)
             return '';
@@ -1119,7 +1445,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                         }}>
                         {tab.label}
                       </Text>
-                      {isLocked && (<View style={{
+                      {/* #6 — badge marks the configured default tab */}
+                      {tab.key === defaultTab && (<View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 backgroundColor: 'rgba(104,75,155,0.08)',
@@ -1224,7 +1551,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                 })}
             </View>
 
-            {/* Preferences Section */}
+            {/* UI Preferences Section */}
             <View style={{ marginTop: 8 }}>
               <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -1233,7 +1560,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                     letterSpacing: 0.6,
                     marginBottom: 8,
                 }}>
-                PREFERENCES
+                UI PREFERENCES
               </Text>
               <View style={{
                     backgroundColor: AppColors.primaryLight,
@@ -1387,6 +1714,169 @@ const NetworkInspector = ({ enabled = true, }) => {
                 })}
                   </View>
                 </View>
+
+                {/* Divider */}
+                <View style={{
+                    height: 1,
+                    backgroundColor: AppColors.dividerColor,
+                }}/>
+
+                {/* #6 — Default Tab */}
+                <View style={{
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                }}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                    <View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: 'rgba(104,75,155,0.2)',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      <LayersIcon color={AppColors.purple} size={11}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors.primaryBlack,
+                }}>
+                        Default Tab
+                      </Text>
+                      <Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Tab shown when the inspector opens
+                      </Text>
+                    </View>
+                  </View>
+
+                  {/* Segmented picker — only visible tabs are offered */}
+                  <View style={{
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    backgroundColor: AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 2.5,
+                    marginTop: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors.dividerColor,
+                    gap: 2,
+                }}>
+                    {settingsTabs
+                    .filter(tab => tab.key === 'apis' || tabVisibility[tab.key])
+                    .map(tab => {
+                    const isActive = defaultTab === tab.key;
+                    return (<TouchableScale key={tab.key} onPress={() => setDefaultTab(tab.key)} style={{
+                            paddingVertical: 6,
+                            paddingHorizontal: 10,
+                            alignItems: 'center',
+                            borderRadius: 6,
+                            backgroundColor: isActive
+                                ? AppColors.purple
+                                : 'transparent',
+                        }}>
+                            <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            color: isActive
+                                ? '#FFFFFF'
+                                : AppColors.grayText,
+                        }}>
+                              {tab.label}
+                            </Text>
+                          </TouchableScale>);
+                })}
+                  </View>
+                </View>
+
+                {/* Divider */}
+                <View style={{
+                    height: 1,
+                    backgroundColor: AppColors.dividerColor,
+                }}/>
+
+                {/* #9 — Show Duplicate Logs */}
+                <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                    gap: 12,
+                }}>
+                  <View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                    <View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: 'rgba(104,75,155,0.2)',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      <EyeIcon color={AppColors.purple} size={11}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors.primaryBlack,
+                }}>
+                        Show Duplicate Logs
+                      </Text>
+                      <Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Off: repeated identical entries collapse into one row
+                        with a ×N count
+                      </Text>
+                    </View>
+                  </View>
+
+                  {/* Toggle Switch */}
+                  <TouchableScale onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
+                    width: 38,
+                    height: 22,
+                    borderRadius: 11,
+                    backgroundColor: showDuplicateLogs
+                        ? AppColors.purple
+                        : AppColors.grayBorderSecondary,
+                    padding: 2,
+                    justifyContent: 'center',
+                    alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
+                }}>
+                    <View style={{
+                    width: 18,
+                    height: 18,
+                    borderRadius: 9,
+                    backgroundColor: '#FFFFFF',
+                    shadowColor: '#000',
+                    shadowOpacity: 0.15,
+                    shadowRadius: 1.5,
+                    shadowOffset: { width: 0, height: 1 },
+                }}/>
+                  </TouchableScale>
+                </View>
               </View>
             </View>
           </ScrollView>
@@ -2489,50 +2979,6 @@ const NetworkInspector = ({ enabled = true, }) => {
         const lastActionMap = reduxLastActionMap;
         const actionHistory = reduxActionHistory;
         return (<ScrollView style={styles.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
-        {/* Top Summary Card */}
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 14,
-                marginHorizontal: 16,
-                marginTop: 12,
-                marginBottom: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 12,
-            }}>
-          <View style={{
-                width: 44,
-                height: 44,
-                borderRadius: 10,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-            <TerminalIcon color={AppColors.purple} size={20}/>
-          </View>
-          <View style={{ flex: 1 }}>
-            <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,
-            }}>
-              Total size: {getSize(reduxState)} • {reducerKeys.length} Reducers
-            </Text>
-          </View>
-          <CopyButton value={() => reduxState} label="Overall Store"/>
-        </View>
-
         {/* Tab View Selection Segments */}
         <View style={{
                 flexDirection: 'row',
@@ -2540,6 +2986,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                 borderRadius: 10,
                 padding: 3,
                 marginHorizontal: 16,
+                marginTop: 12,
                 marginBottom: 12,
                 borderWidth: 1,
                 borderColor: AppColors.dividerColor,
@@ -2575,6 +3022,27 @@ const NetworkInspector = ({ enabled = true, }) => {
             }}>
                 Action Timeline
               </Text>
+              <View style={{
+                minWidth: 18,
+                paddingHorizontal: 5,
+                height: 16,
+                borderRadius: 8,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: reduxActiveSubTab === 'timeline'
+                    ? 'rgba(255,255,255,0.28)'
+                    : AppColors.dividerColor,
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 9,
+                color: reduxActiveSubTab === 'timeline'
+                    ? '#FFFFFF'
+                    : AppColors.grayText,
+            }}>
+                  {actionHistory.length}
+                </Text>
+              </View>
             </View>
           </TouchableOpacity>
           <TouchableOpacity onPress={() => {
@@ -2604,6 +3072,27 @@ const NetworkInspector = ({ enabled = true, }) => {
             }}>
                 Store Tree
               </Text>
+              <View style={{
+                minWidth: 18,
+                paddingHorizontal: 5,
+                height: 16,
+                borderRadius: 8,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: reduxActiveSubTab === 'tree'
+                    ? 'rgba(255,255,255,0.28)'
+                    : AppColors.dividerColor,
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 9,
+                color: reduxActiveSubTab === 'tree'
+                    ? '#FFFFFF'
+                    : AppColors.grayText,
+            }}>
+                  {reducerKeys.length}
+                </Text>
+              </View>
             </View>
           </TouchableOpacity>
         </View>
@@ -2650,21 +3139,50 @@ const NetworkInspector = ({ enabled = true, }) => {
     };
     return (<>
       {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
-      <TouchableScale style={styles.fabWrapper} onPress={() => setVisible(true)} hitSlop={10}>
-        <Animated.View style={[styles.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
-        <BrandCircleIcon size={62}/>
-        {(logs.length > 0 || analyticsEvents.length > 0) && (<Animated.View style={[
+      <Animated.View style={[styles.fabWrapper, { transform: fabPan.getTranslateTransform() }]} {...fabPanResponder.panHandlers}>
+        <TouchableScale style={{ alignItems: 'center', justifyContent: 'center' }} onPress={() => {
+            if (fabDraggedRef.current)
+                return;
+            setVisible(true);
+        }} hitSlop={10}>
+          <Animated.View style={[styles.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
+          <BrandCircleIcon size={62}/>
+          {/* #4 — shining sweep, clipped inside the circular launcher */}
+          <View pointerEvents="none" style={styles.fabShineClip}>
+            <Animated.View style={[
+            styles.fabShineStreak,
+            {
+                transform: [
+                    {
+                        translateX: fabShineAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-48, 96],
+                        }),
+                    },
+                    { rotate: '25deg' },
+                ],
+            },
+        ]}>
+              <LinearGradient colors={[
+            'rgba(255,255,255,0)',
+            'rgba(255,255,255,0.55)',
+            'rgba(255,255,255,0)',
+        ]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
+            </Animated.View>
+          </View>
+          {(logs.length > 0 || analyticsEvents.length > 0) && (<Animated.View style={[
                 styles.fabBadge,
                 hasErrors ? styles.fabBadgeError : styles.fabBadgeNormal,
                 { transform: [{ scale: badgeAnim }] },
             ]}>
-            <Text style={styles.fabBadgeText}>
-              {logs.length + analyticsEvents.length > 99
+              <Text style={styles.fabBadgeText}>
+                {logs.length + analyticsEvents.length > 99
                 ? '99+'
                 : logs.length + analyticsEvents.length}
-            </Text>
-          </Animated.View>)}
-      </TouchableScale>
+              </Text>
+            </Animated.View>)}
+        </TouchableScale>
+      </Animated.View>
 
       <Modal visible={visible} animationType="slide" transparent>
         {visible && (<ErrorBoundary onClose={closeModal}>
@@ -2694,10 +3212,27 @@ const NetworkInspector = ({ enabled = true, }) => {
                     setSelectedEvent(null);
                 });
             }} hitSlop={15} style={[
-                styles.iconBtnMinimal,
+                {
+                    width: 38,
+                    height: 38,
+                    borderRadius: 19,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: 'rgba(255,255,255,0.18)',
+                    borderWidth: 1,
+                    borderColor: 'rgba(255,255,255,0.30)',
+                },
                 selected == null &&
                     selectedEvent == null && { display: 'none' },
             ]}>
+                        {/* Soft outer glow to fake a blurred circle */}
+                        <View style={{
+                position: 'absolute',
+                width: 48,
+                height: 48,
+                borderRadius: 24,
+                backgroundColor: 'rgba(255,255,255,0.10)',
+            }}/>
                         <WhiteBackNavigation />
                       </TouchableScale>
 
@@ -2708,8 +3243,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                     flex: 1,
                 }}>
                           <View style={{
-                    width: 42,
-                    height: 42,
+                    width: 50,
+                    height: 50,
                     borderRadius: 10,
                     backgroundColor: 'rgba(255,255,255,0.13)',
                     borderWidth: 1.5,
@@ -2721,13 +3256,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
                 }}>
-                            <BrandSquareIcon size={36}/>
+                            <BrandSquareIcon size={45}/>
                           </View>
                           <View style={{ gap: 3 }}>
-                            <Text style={[
-                    styles.headerTitle,
-                    { fontSize: 17, letterSpacing: 0.2 },
-                ]}>
+                            <Text style={[styles.headerTitle]}>
                               RN InApp Inspector
                             </Text>
                             <View style={{
@@ -2810,6 +3342,29 @@ const NetworkInspector = ({ enabled = true, }) => {
                                   </Text>
                                 </View>
                               </View>
+
+                              {/* #1 — pulsing dot when a newer version is on NPM */}
+                              {updateAvailable && (<Pressable hitSlop={10} onPress={() => Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${LIB_VERSION}).`, [
+                        { text: 'Later', style: 'cancel' },
+                        {
+                            text: 'View on NPM',
+                            onPress: () => Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
+                        },
+                    ])} style={{
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                                  <Animated.View style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: 4,
+                        backgroundColor: '#4ADE80',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,255,255,0.9)',
+                        opacity: activePulseAnim,
+                        transform: [{ scale: unreadPulseAnim }],
+                    }}/>
+                                </Pressable>)}
                             </View>
                           </View>
                         </View>) : null}
@@ -2834,21 +3389,48 @@ const NetworkInspector = ({ enabled = true, }) => {
                             </Text>
                           </View>
                           <View style={styles.headerDetailSubRow}>
-                            <View style={[
+                            <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: `${getStatusColor(selected.status)}26`,
+                    borderWidth: 1,
+                    borderColor: `${getStatusColor(selected.status)}55`,
+                }}>
+                              <View style={[
                     styles.headerStatusDot,
                     {
                         backgroundColor: getStatusColor(selected.status),
                     },
                 ]}/>
-                            <Text style={styles.headerSubTitle}>
-                              {selected.status === 0
+                              <Text style={[
+                    styles.headerSubTitle,
+                    { fontFamily: AppFonts.interBold },
+                ]}>
+                                {selected.status === 0
                     ? 'Failed'
-                    : selected.status ?? 'Pending'}{' '}
-                              •{' '}
-                              {selected.duration != null
+                    : selected.status ?? 'Pending'}
+                              </Text>
+                            </View>
+                            <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: 'rgba(255,255,255,0.16)',
+                }}>
+                              <ClockIcon color="#FFFFFF" size={11}/>
+                              <Text style={styles.headerSubTitle}>
+                                {selected.duration != null
                     ? `${selected.duration}ms`
-                    : '-'}
-                            </Text>
+                    : '—'}
+                              </Text>
+                            </View>
                           </View>
                         </View>) : selectedEvent != null ? (<View style={styles.headerDetailCenter}>
                           <View style={styles.headerDetailRow}>
@@ -2891,7 +3473,50 @@ const NetworkInspector = ({ enabled = true, }) => {
                         </View>) : null}
                     </View>
 
-                    <View style={styles.headerRight}>
+                    <View style={[
+                styles.headerRight,
+                selected == null &&
+                    selectedEvent == null && {
+                    flexShrink: 0,
+                    minWidth: 116,
+                },
+            ]}>
+                      {selected == null && selectedEvent == null && (<TouchableScale onPress={() => {
+                    Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics, WebView and Redux timeline. Continue?', [
+                        { text: 'Cancel', style: 'cancel' },
+                        {
+                            text: 'Clear All',
+                            onPress: runClearAllWithAnimation,
+                            style: 'destructive',
+                        },
+                    ]);
+                }} hitSlop={15} style={[
+                    styles.closeButtonSquare,
+                    {
+                        marginRight: 8,
+                        backgroundColor: 'rgba(255,255,255,0.15)',
+                    },
+                ]}>
+                          <Animated.View style={{
+                    transform: [
+                        {
+                            rotate: clearAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: ['0deg', '-25deg'],
+                            }),
+                        },
+                        {
+                            scale: clearAnim.interpolate({
+                                inputRange: [0, 0.5, 1],
+                                outputRange: [1, 1.25, 1],
+                            }),
+                        },
+                    ],
+                }}>
+                            <WipeIcon color="#FFFFFF" size={16}/>
+                          </Animated.View>
+                        </TouchableScale>)}
+
                       {selected == null && selectedEvent == null && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={[
                     styles.closeButtonSquare,
                     {
@@ -3068,7 +3693,16 @@ const NetworkInspector = ({ enabled = true, }) => {
                     animateNextLayout();
                     setAnalyticsSubTab('ga_events');
                 }}>
-                          <Text style={[
+                          <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                            {/* #7 */}
+                            <AnalyticsIcon size={13} color={analyticsSubTab === 'ga_events'
+                    ? AppColors.purple
+                    : AppColors.grayTextStrong}/>
+                            <Text style={[
                     {
                         fontFamily: AppFonts.interMedium,
                         fontSize: 13,
@@ -3079,12 +3713,13 @@ const NetworkInspector = ({ enabled = true, }) => {
                         color: AppColors.purple,
                     },
                 ]}>
-                            GA Events (
-                            {analyticsSearch
+                              GA Events (
+                              {analyticsSearch
                     ? filteredAnalyticsEvents.length
                     : analyticsEvents.length}
-                            )
-                          </Text>
+                              )
+                            </Text>
+                          </View>
                         </Pressable>
                         <Pressable style={[
                     {
@@ -3105,7 +3740,16 @@ const NetworkInspector = ({ enabled = true, }) => {
                     animateNextLayout();
                     setAnalyticsSubTab('top_events');
                 }}>
-                          <Text style={[
+                          <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                            {/* #7 */}
+                            <TrendingUpIcon size={13} color={analyticsSubTab === 'top_events'
+                    ? AppColors.purple
+                    : AppColors.grayTextStrong}/>
+                            <Text style={[
                     {
                         fontFamily: AppFonts.interMedium,
                         fontSize: 13,
@@ -3116,8 +3760,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                         color: AppColors.purple,
                     },
                 ]}>
-                            Top Events ({topEventsArray.length})
-                          </Text>
+                              Top Events ({topEventsArray.length})
+                            </Text>
+                          </View>
                         </Pressable>
                       </View>
                     </View>)}
@@ -3226,50 +3871,53 @@ const NetworkInspector = ({ enabled = true, }) => {
                     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>
+                ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<View style={{ flex: 1 }}>
+                      <FlatList ref={apisListRef} 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.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
@@ -3288,38 +3936,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={[
+                                <Text style={[
                         styles.filtersHeading,
                         { marginTop: 16 },
                     ]}>
-                                METHOD
-                              </Text>
-                              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
-                                {availableMethods.map(filter => {
+                                  METHOD
+                                </Text>
+                                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
+                                  {availableMethods.map(filter => {
                         const isAll = filter === 'ALL';
                         const active = isAll
                             ? methodFilters.size === 0
@@ -3338,43 +3986,55 @@ 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 }}>
+                ]} keyboardShouldPersistTaps="handled"/>
+                      {/* #2 — always-visible scroll-to-top, bottom right */}
+                      <TouchableScale onPress={() => {
+                    apisListRef.current?.scrollToOffset({
+                        offset: 0,
+                        animated: true,
+                    });
+                }} hitSlop={10} style={styles.scrollTopBtn}>
+                        <View style={{ transform: [{ rotate: '180deg' }] }}>
+                          <ChevronIcon color="#FFFFFF" size={18}/>
+                        </View>
+                      </TouchableScale>
+                    </View>) : activeTab === 'logs' ? (<View style={{ flex: 1 }}>
                       <View style={{
                     backgroundColor: '#FFFFFF',
                     borderBottomWidth: 1,
@@ -3394,6 +4054,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                           </View>
 
                           <View style={styles.toolbarRight}>
+                            <TouchableScale style={styles.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+                              <SortArrowIcon color={AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
+                            </TouchableScale>
                             <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
                               <TrashIcon color={AppColors.grayTextStrong} size={18}/>
                             </TouchableScale>
@@ -3419,15 +4082,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: '#F4EBFF',
                             },
                         ]}>
-                                  <Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <LayersIcon size={12} color={active
+                            ? AppColors.purpleShade700
+                            : AppColors.grayTextStrong}/>
+                                    <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.purpleShade700,
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                    All ({logCounts.all})
-                                  </Text>
+                                      All ({logCounts.all})
+                                    </Text>
+                                  </View>
                                 </View>
                               </TouchableScale>);
                 })()}
@@ -3453,15 +4126,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: '#F1F5F9',
                             },
                         ]}>
-                                  <Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <UserIcon size={12} color={active
+                            ? '#334155'
+                            : AppColors.grayTextStrong}/>
+                                    <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: '#334155',
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                    User Log ({logCounts['user-log']})
-                                  </Text>
+                                      User Log ({logCounts['user-log']})
+                                    </Text>
+                                  </View>
                                 </View>
                               </TouchableScale>);
                 })()}
@@ -3487,15 +4170,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: AppColors.purpleShade50,
                             },
                         ]}>
-                                  <Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <InfoCircleIcon size={12} color={active
+                            ? AppColors.purple
+                            : AppColors.grayTextStrong}/>
+                                    <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.purple,
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                    Info ({logCounts.info})
-                                  </Text>
+                                      Info ({logCounts.info})
+                                    </Text>
+                                  </View>
                                 </View>
                               </TouchableScale>);
                 })()}
@@ -3521,7 +4214,17 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: '#FFFDF6',
                             },
                         ]}>
-                                  <Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <WarningTriangleIcon size={12} color={active
+                            ? AppColors.darkOrange ||
+                                AppColors.lightOrange
+                            : AppColors.grayTextStrong}/>
+                                    <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.darkOrange ||
@@ -3529,8 +4232,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                    Warning ({logCounts.warn})
-                                  </Text>
+                                      Warning ({logCounts.warn})
+                                    </Text>
+                                  </View>
                                 </View>
                               </TouchableScale>);
                 })()}
@@ -3556,15 +4260,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: '#FFF5F6',
                             },
                         ]}>
-                                  <Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <ErrorCircleIcon size={12} color={active
+                            ? AppColors.errorColor
+                            : AppColors.grayTextStrong}/>
+                                    <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.errorColor,
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                    Error ({logCounts.error})
-                                  </Text>
+                                      Error ({logCounts.error})
+                                    </Text>
+                                  </View>
                                 </View>
                               </TouchableScale>);
                 })()}
@@ -3590,15 +4304,25 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 backgroundColor: `${AppColors.skyBlue}15`,
                             },
                         ]}>
-                                  <Text numberOfLines={1} style={[
+                                  {/* #7 */}
+                                  <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
+                                    <AnalyticsIcon size={12} color={active
+                            ? AppColors.skyBlue
+                            : AppColors.grayTextStrong}/>
+                                    <Text numberOfLines={1} style={[
                             styles.statusFilterText,
                             active && {
                                 color: AppColors.skyBlue,
                                 fontFamily: AppFonts.interBold,
                             },
                         ]}>
-                                    Analytics ({logCounts.analytics})
-                                  </Text>
+                                      Analytics ({logCounts.analytics})
+                                    </Text>
+                                  </View>
                                 </View>
                               </TouchableScale>);
                 })()}
@@ -4633,7 +5357,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                         if (!resExpanded && !showResDiff)
                             setResExpanded(true);
                     }}/>
-                              {showResDiff ? (<DiffViewer oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer data={selected.response} search={detailSearch} forceOpen={resExpanded}/>)}
+                              {showResDiff ? (<DiffViewer oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer data={selected.response} search={detailSearch} forceOpen={resExpanded} wrap/>)}
                             </View>
                           </>)}
                       </ScrollView>
@@ -4671,4 +5395,4 @@ export { setupConsoleLogger, clearConsoleLogs, subscribeConsoleLogs, } from './c
 export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clearAnalyticsEvents, } from './customHooks/analyticsLogger';
 export { WebView, getWebViewLogs, getWebViewNavHistory, getWebViewHtml, getWebViewCss, getWebViewJs, getWebViewHtmlUrl, clearWebViewData, subscribeWebView, } from './customHooks/webViewLogger';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
-export { connectReduxStore, getReduxState, subscribeReduxState, } from './customHooks/reduxLogger';
+export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, } from './customHooks/reduxLogger';