react-native-inapp-inspector 1.1.0 → 1.1.2

package/dist/commonjs/index.js

@@ -153,6 +153,12 @@ const animateNextLayout = () => {
 const NetworkInspector = ({ enabled = true, }) => {
     const [isDark, setIsDark] = (0, react_1.useState)(false);
     const [reduxState, setReduxState] = (0, react_1.useState)(null);
+    // Action timeline + per-reducer last action are kept in component state so the
+    // Redux tab re-renders live on every dispatch, independent of the state tree ref.
+    const [reduxActionHistory, setReduxActionHistory] = (0, react_1.useState)([]);
+    const [reduxLastActionMap, setReduxLastActionMap] = (0, react_1.useState)({});
+    // Inspector panel height as a percentage of the screen (configurable in Settings).
+    const [modalHeightPercent, setModalHeightPercent] = (0, react_1.useState)(90);
     const [expandedReducers, setExpandedReducers] = (0, react_1.useState)({});
     const [logs, setLogs] = (0, react_1.useState)([]);
     const [visible, setVisible] = (0, react_1.useState)(false);
@@ -183,6 +189,8 @@ const NetworkInspector = ({ enabled = true, }) => {
     const [showNetworkMenu, setShowNetworkMenu] = (0, react_1.useState)(false);
     const [showUiMenu, setShowUiMenu] = (0, react_1.useState)(false);
     const [sortOrder, setSortOrder] = (0, react_1.useState)('newest');
+    // #7 — sort order for the Logs (console) tab
+    const [logSortOrder, setLogSortOrder] = (0, react_1.useState)('newest');
     const [reqExpanded, setReqExpanded] = (0, react_1.useState)(undefined);
     const [resExpanded, setResExpanded] = (0, react_1.useState)(undefined);
     const [showReqDiff, setShowReqDiff] = (0, react_1.useState)(false);
@@ -362,6 +370,66 @@ const NetworkInspector = ({ enabled = true, }) => {
     const badgeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const activePulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.4)).current;
     const unreadPulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    // #11 — header "clear all" icon spin/scale animation
+    const clearAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    // #4 — draggable floating launcher (drag anywhere on screen)
+    const fabPan = (0, react_1.useRef)(new react_native_1.Animated.ValueXY({ x: 0, y: 0 })).current;
+    const fabPanRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    (0, react_1.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 = (0, react_1.useRef)(false);
+    const fabPanResponder = (0, react_1.useRef)(react_native_1.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: react_native_1.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;
+    // #10 — scroll-to-top affordance for the main APIs list
+    const apisListRef = (0, react_1.useRef)(null);
+    const [showScrollTop, setShowScrollTop] = (0, react_1.useState)(false);
+    const runClearAllWithAnimation = (0, react_1.useCallback)(() => {
+        react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(clearAnim, {
+                toValue: 1,
+                duration: 320,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(clearAnim, {
+                toValue: 0,
+                duration: 0,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        handleClearAll();
+    }, [clearAnim]);
     (0, react_1.useEffect)(() => {
         if (react_native_1.Platform.OS === 'android') {
             react_native_1.UIManager.setLayoutAnimationEnabledExperimental?.(true);
@@ -519,8 +587,14 @@ const NetworkInspector = ({ enabled = true, }) => {
             }, 200);
         });
         setReduxState((0, reduxLogger_1.getReduxState)());
+        setReduxActionHistory([...(0, reduxLogger_1.getActionHistory)()]);
+        setReduxLastActionMap({ ...(0, reduxLogger_1.getLastActionForReducer)() });
         const unsubscribeRedux = (0, reduxLogger_1.subscribeReduxState)(() => {
+            // New references each time guarantee the Redux tab updates live, even when
+            // the root state object reference is unchanged or auto-refresh is paused.
             setReduxState((0, reduxLogger_1.getReduxState)());
+            setReduxActionHistory([...(0, reduxLogger_1.getActionHistory)()]);
+            setReduxLastActionMap({ ...(0, reduxLogger_1.getLastActionForReducer)() });
         });
         return () => {
             unsubscribe();
@@ -780,8 +854,12 @@ 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);
         return result;
-    }, [visibleConsoleLogs, logFilters, logSearch]);
+    }, [visibleConsoleLogs, logFilters, logSearch, logSortOrder]);
     const filteredWebViewLogs = (0, react_1.useMemo)(() => {
         let result = webViewLogs;
         if (webViewSearch) {
@@ -907,6 +985,22 @@ const NetworkInspector = ({ enabled = true, }) => {
             ]);
             return;
         }
+        if (activeTab === 'redux') {
+            react_native_1.Alert.alert('Clear Redux Timeline', 'Are you sure you want to clear the dispatched action history?', [
+                { text: 'Cancel', style: 'cancel' },
+                {
+                    text: 'Clear All',
+                    onPress: () => {
+                        (0, reduxLogger_1.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());
@@ -914,10 +1008,22 @@ const NetworkInspector = ({ enabled = true, }) => {
         else {
             react_native_1.Alert.alert('Clear Logs', 'Are you sure you want to clear all network logs?', [
                 { text: 'Cancel', style: 'cancel' },
-                { text: 'Clear All', onPress: handleClearAll, style: 'destructive' },
+                { text: 'Clear All', onPress: clearNetworkOnly, style: 'destructive' },
             ]);
         }
     }
+    // Clears ONLY network logs + their derived selection/filter state.
+    function clearNetworkOnly() {
+        (0, networkLogger_1.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 = (0, react_1.useMemo)(() => {
         if (!selected)
             return '';
@@ -1034,7 +1140,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                     fontSize: 10.5,
                     color: '#FFFFFF',
                 }}>
-                  v1.0.13
+                  v{constants_1.LIB_VERSION}
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
@@ -1202,30 +1308,56 @@ const NetworkInspector = ({ enabled = true, }) => {
                             width: 38,
                             height: 22,
                             borderRadius: 11,
-                            backgroundColor: isVisible
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayBorderSecondary,
+                            backgroundColor: isLocked
+                                ? AppColors_1.AppColors.grayBackground
+                                : isVisible
+                                    ? AppColors_1.AppColors.purple
+                                    : AppColors_1.AppColors.grayBorderSecondary,
+                            borderWidth: isLocked ? 1.5 : 0,
+                            borderColor: isLocked
+                                ? AppColors_1.AppColors.grayBorderSecondary
+                                : 'transparent',
+                            borderStyle: isLocked ? 'dashed' : 'solid',
                             padding: 2,
                             justifyContent: 'center',
                             alignItems: isVisible ? 'flex-end' : 'flex-start',
+                            opacity: isLocked ? 0.9 : 1,
                         }}>
                         <react_native_1.View style={{
                             width: 18,
                             height: 18,
                             borderRadius: 9,
-                            backgroundColor: '#FFFFFF',
+                            backgroundColor: isLocked
+                                ? AppColors_1.AppColors.grayBorderSecondary
+                                : '#FFFFFF',
+                            alignItems: 'center',
+                            justifyContent: 'center',
                             shadowColor: '#000',
-                            shadowOpacity: 0.15,
+                            shadowOpacity: isLocked ? 0 : 0.15,
                             shadowRadius: 1.5,
                             shadowOffset: { width: 0, height: 1 },
-                        }}/>
+                        }}>
+                          {isLocked && (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
+                              <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
+                              <react_native_svg_1.Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors_1.AppColors.grayText}/>
+                            </react_native_svg_1.default>)}
+                        </react_native_1.View>
                       </TouchableScale_1.default>
+                      {isLocked && (<react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8,
+                                color: AppColors_1.AppColors.grayTextWeak,
+                                letterSpacing: 0.4,
+                                marginTop: 3,
+                            }}>
+                          REQUIRED
+                        </react_native_1.Text>)}
                     </react_native_1.View>
                   </react_native_1.View>);
                 })}
             </react_native_1.View>
 
-            {/* Preferences Section */}
+            {/* UI Preferences Section */}
             <react_native_1.View style={{ marginTop: 8 }}>
               <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -1234,7 +1366,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                     letterSpacing: 0.6,
                     marginBottom: 8,
                 }}>
-                PREFERENCES
+                UI PREFERENCES
               </react_native_1.Text>
               <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
@@ -1308,6 +1440,86 @@ const NetworkInspector = ({ enabled = true, }) => {
                 }}/>
                   </TouchableScale_1.default>
                 </react_native_1.View>
+
+                {/* Divider */}
+                <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+                {/* Modal Height */}
+                <react_native_1.View style={{
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                }}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                    <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: 'rgba(104,75,155,0.2)',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={11}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                        Modal Height
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Height of the inspector panel relative to the screen
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  {/* Segmented picker */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 2.5,
+                    marginTop: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+                    {[50, 70, 90, 100].map(opt => {
+                    const isActive = modalHeightPercent === opt;
+                    return (<TouchableScale_1.default key={opt} onPress={() => setModalHeightPercent(opt)} style={{
+                            flex: 1,
+                            paddingVertical: 6,
+                            alignItems: 'center',
+                            borderRadius: 6,
+                            backgroundColor: isActive
+                                ? AppColors_1.AppColors.purple
+                                : 'transparent',
+                        }}>
+                          <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+                        }}>
+                            {opt}%
+                          </react_native_1.Text>
+                        </TouchableScale_1.default>);
+                })}
+                  </react_native_1.View>
+                </react_native_1.View>
               </react_native_1.View>
             </react_native_1.View>
           </react_native_1.ScrollView>
@@ -1442,11 +1654,13 @@ const NetworkInspector = ({ enabled = true, }) => {
                             fontSize: 11,
                             color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
                         }}>
-                    {typeof opt === 'number' &&
-                            opt >= 500 &&
-                            settingsPage === 'insights'
-                            ? `${opt}ms`
-                            : opt}
+                    {opts.picker.formatLabel
+                            ? opts.picker.formatLabel(opt)
+                            : typeof opt === 'number' &&
+                                opt >= 500 &&
+                                settingsPage === 'insights'
+                                ? `${opt}ms`
+                                : opt}
                   </react_native_1.Text>
                 </TouchableScale_1.default>);
                 })}
@@ -1911,7 +2125,187 @@ const NetworkInspector = ({ enabled = true, }) => {
             e.name === 'page_view' ||
             e.name === 'firebase_screen_class').length;
         const webviewTotal = webViewNavHistory.length;
+        // --- Richer insights metrics ---
+        const slowestTime = durations.length > 0 ? Math.max(...durations) : null;
+        const fastestTime = durations.length > 0 ? Math.min(...durations) : null;
+        const slowCount = durations.filter(d => d >= slowRequestThreshold).length;
+        const status2xx = logs.filter(l => l.status != null && l.status >= 200 && l.status < 300).length;
+        const status3xx = logs.filter(l => l.status != null && l.status >= 300 && l.status < 400).length;
+        const status4xx = logs.filter(l => l.status != null && l.status >= 400 && l.status < 500).length;
+        const status5xx = logs.filter(l => l.status != null && l.status >= 500).length;
+        const totalSignals = apiTotal + logTotal + analyticsTotal + webviewTotal;
+        const totalIssues = apiErrors + logErrors;
+        const activeModules = [
+            tabVisibility.apis,
+            tabVisibility.logs,
+            tabVisibility.analytics,
+            tabVisibility.webview,
+            tabVisibility.redux,
+        ].filter(Boolean).length;
+        // Composite health score: success rate penalised by error volume and slow requests.
+        const healthScore = totalSignals === 0
+            ? 100
+            : Math.max(0, Math.min(100, Math.round(apiSuccessRate -
+                (logErrors > 0 ? Math.min(15, logErrors * 3) : 0) -
+                (slowCount > 0 ? Math.min(10, slowCount * 2) : 0))));
+        const healthColor = healthScore >= 90
+            ? AppColors_1.AppColors.greenColor
+            : healthScore >= 70
+                ? AppColors_1.AppColors.warningIconGold
+                : AppColors_1.AppColors.errorColor;
+        const healthLabel = healthScore >= 90
+            ? 'Healthy'
+            : healthScore >= 70
+                ? 'Needs attention'
+                : 'Degraded';
         return (<react_native_1.View style={styles_1.default.dashboardContainer}>
+        {/* Overview hero card */}
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+                marginBottom: 12,
+            }}>
+          <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 14,
+            }}>
+            {/* Health ring stand-in */}
+            <react_native_1.View style={{
+                width: 64,
+                height: 64,
+                borderRadius: 32,
+                borderWidth: 4,
+                borderColor: healthColor,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 18,
+                color: healthColor,
+            }}>
+                {healthScore}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontSize: 7.5,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.4,
+            }}>
+                HEALTH
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 15,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                Session Overview
+              </react_native_1.Text>
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                marginTop: 3,
+            }}>
+                <react_native_1.View style={{
+                width: 7,
+                height: 7,
+                borderRadius: 3.5,
+                backgroundColor: healthColor,
+            }}/>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontSize: 11.5,
+                color: healthColor,
+            }}>
+                  {healthLabel}
+                </react_native_1.Text>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.grayTextWeak,
+            }}>
+                  • {activeModules} modules active
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          {/* Quick totals strip */}
+          <react_native_1.View style={{
+                flexDirection: 'row',
+                marginTop: 14,
+                borderTopWidth: 1,
+                borderTopColor: AppColors_1.AppColors.dividerColor,
+                paddingTop: 12,
+            }}>
+            <react_native_1.View style={{ flex: 1, alignItems: 'center' }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 16,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                {totalSignals}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10,
+                color: AppColors_1.AppColors.grayTextWeak,
+                marginTop: 1,
+            }}>
+                Signals
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={{ width: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+            <react_native_1.View style={{ flex: 1, alignItems: 'center' }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 16,
+                color: totalIssues > 0
+                    ? AppColors_1.AppColors.errorColor
+                    : AppColors_1.AppColors.primaryBlack,
+            }}>
+                {totalIssues}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10,
+                color: AppColors_1.AppColors.grayTextWeak,
+                marginTop: 1,
+            }}>
+                Issues
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={{ width: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+            <react_native_1.View style={{ flex: 1, alignItems: 'center' }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 16,
+                color: slowCount > 0
+                    ? AppColors_1.AppColors.warningIconGold
+                    : AppColors_1.AppColors.primaryBlack,
+            }}>
+                {slowCount}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10,
+                color: AppColors_1.AppColors.grayTextWeak,
+                marginTop: 1,
+            }}>
+                Slow ({slowRequestThreshold}ms+)
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
         {/* Module 1: APIs */}
         {tabVisibility.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
@@ -1951,9 +2345,75 @@ const NetworkInspector = ({ enabled = true, }) => {
                 <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Avg Latency</react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
-          </TouchableScale_1.default>)}
 
-        {/* Module 2: Logs */}
+            {/* Status-class breakdown + latency range */}
+            <react_native_1.View style={{
+                    marginTop: 10,
+                    paddingTop: 10,
+                    borderTopWidth: 1,
+                    borderTopColor: AppColors_1.AppColors.dividerColor,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    gap: 6,
+                }}>
+              {[
+                    { label: '2xx', value: status2xx, color: AppColors_1.AppColors.greenColor },
+                    { label: '3xx', value: status3xx, color: AppColors_1.AppColors.skyBlue },
+                    {
+                        label: '4xx',
+                        value: status4xx,
+                        color: AppColors_1.AppColors.warningIconGold,
+                    },
+                    { label: '5xx', value: status5xx, color: AppColors_1.AppColors.errorColor },
+                ].map(s => (<react_native_1.View key={s.label} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderRadius: 6,
+                        borderWidth: 1,
+                        borderColor: AppColors_1.AppColors.dividerColor,
+                        paddingHorizontal: 7,
+                        paddingVertical: 3,
+                    }}>
+                  <react_native_1.View style={{
+                        width: 6,
+                        height: 6,
+                        borderRadius: 3,
+                        backgroundColor: s.color,
+                    }}/>
+                  <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors_1.AppColors.grayTextStrong,
+                    }}>
+                    {s.label} {s.value}
+                  </react_native_1.Text>
+                </react_native_1.View>))}
+              {slowestTime != null && (<react_native_1.View style={{
+                        marginLeft: 'auto',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                    }}>
+                  <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 10,
+                        color: AppColors_1.AppColors.grayTextWeak,
+                    }}>
+                    Range
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors_1.AppColors.grayTextStrong,
+                    }}>
+                    {fastestTime}–{slowestTime}ms
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </TouchableScale_1.default>)}
         {tabVisibility.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
@@ -2157,54 +2617,11 @@ const NetworkInspector = ({ enabled = true, }) => {
           <react_native_1.Text style={styles_1.default.emptySub}>Connected store state is empty.</react_native_1.Text>
         </react_native_1.View>);
         }
-        // Build hierarchical tree: Store -> Reducers -> Action -> Data
-        const lastActionMap = (0, reduxLogger_1.getLastActionForReducer)();
-        const actionHistory = (0, reduxLogger_1.getActionHistory)();
+        // Build hierarchical tree: Store -> Reducers -> Action -> Data.
+        // These come from component state (refreshed on every dispatch) so the view stays live.
+        const lastActionMap = reduxLastActionMap;
+        const actionHistory = reduxActionHistory;
         return (<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
-        {/* Top Summary Card */}
-        <react_native_1.View style={{
-                backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                padding: 14,
-                marginHorizontal: 16,
-                marginTop: 12,
-                marginBottom: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 12,
-            }}>
-          <react_native_1.View style={{
-                width: 44,
-                height: 44,
-                borderRadius: 10,
-                backgroundColor: AppColors_1.AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-            <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={20}/>
-          </react_native_1.View>
-          <react_native_1.View style={{ flex: 1 }}>
-            <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 13,
-                color: AppColors_1.AppColors.primaryBlack,
-            }}>
-              Redux Store Snapshot
-            </react_native_1.Text>
-            <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 11,
-                color: AppColors_1.AppColors.grayText,
-                marginTop: 2,
-            }}>
-              Total size: {(0, helpers_1.getSize)(reduxState)} • {reducerKeys.length} Reducers
-            </react_native_1.Text>
-          </react_native_1.View>
-          <CopyButton_1.default value={() => reduxState} label="Overall Store"/>
-        </react_native_1.View>
-
         {/* Tab View Selection Segments */}
         <react_native_1.View style={{
                 flexDirection: 'row',
@@ -2212,6 +2629,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                 borderRadius: 10,
                 padding: 3,
                 marginHorizontal: 16,
+                marginTop: 12,
                 marginBottom: 12,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.dividerColor,
@@ -2229,15 +2647,46 @@ const NetworkInspector = ({ enabled = true, }) => {
                     ? AppColors_1.AppColors.purple
                     : 'transparent',
             }}>
-            <react_native_1.Text style={{
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+            }}>
+              <ReduxTreeView_1.ReduxTimelineIcon color={reduxActiveSubTab === 'timeline'
+                ? '#FFFFFF'
+                : AppColors_1.AppColors.grayText} size={13}/>
+              <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 11,
                 color: reduxActiveSubTab === 'timeline'
                     ? '#FFFFFF'
                     : AppColors_1.AppColors.grayText,
             }}>
-              ⚡ Action Timeline
-            </react_native_1.Text>
+                Action Timeline
+              </react_native_1.Text>
+              <react_native_1.View style={{
+                minWidth: 18,
+                paddingHorizontal: 5,
+                height: 16,
+                borderRadius: 8,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: reduxActiveSubTab === 'timeline'
+                    ? 'rgba(255,255,255,0.28)'
+                    : AppColors_1.AppColors.dividerColor,
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9,
+                color: reduxActiveSubTab === 'timeline'
+                    ? '#FFFFFF'
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                  {actionHistory.length}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
           </react_native_1.TouchableOpacity>
           <react_native_1.TouchableOpacity onPress={() => {
                 animateNextLayout();
@@ -2250,13 +2699,44 @@ const NetworkInspector = ({ enabled = true, }) => {
                 borderRadius: 8,
                 backgroundColor: reduxActiveSubTab === 'tree' ? AppColors_1.AppColors.purple : 'transparent',
             }}>
-            <react_native_1.Text style={{
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+            }}>
+              <ReduxTreeView_1.ReduxTreeIcon color={reduxActiveSubTab === 'tree' ? '#FFFFFF' : AppColors_1.AppColors.grayText} size={13}/>
+              <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 11,
-                color: reduxActiveSubTab === 'tree' ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+                color: reduxActiveSubTab === 'tree'
+                    ? '#FFFFFF'
+                    : AppColors_1.AppColors.grayText,
             }}>
-              🏪 Store Tree
-            </react_native_1.Text>
+                Store Tree
+              </react_native_1.Text>
+              <react_native_1.View style={{
+                minWidth: 18,
+                paddingHorizontal: 5,
+                height: 16,
+                borderRadius: 8,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: reduxActiveSubTab === 'tree'
+                    ? 'rgba(255,255,255,0.28)'
+                    : AppColors_1.AppColors.dividerColor,
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9,
+                color: reduxActiveSubTab === 'tree'
+                    ? '#FFFFFF'
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                  {reducerKeys.length}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
           </react_native_1.TouchableOpacity>
         </react_native_1.View>
 
@@ -2302,27 +2782,36 @@ const NetworkInspector = ({ enabled = true, }) => {
     };
     return (<>
       {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
-      <TouchableScale_1.default style={styles_1.default.fabWrapper} onPress={() => setVisible(true)} hitSlop={10}>
-        <react_native_1.Animated.View style={[styles_1.default.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
-        <NetworkIcons_1.BrandCircleIcon size={62}/>
-        {(logs.length > 0 || analyticsEvents.length > 0) && (<react_native_1.Animated.View style={[
+      <react_native_1.Animated.View style={[styles_1.default.fabWrapper, { transform: fabPan.getTranslateTransform() }]} {...fabPanResponder.panHandlers}>
+        <TouchableScale_1.default style={{ alignItems: 'center', justifyContent: 'center' }} onPress={() => {
+            if (fabDraggedRef.current)
+                return;
+            setVisible(true);
+        }} hitSlop={10}>
+          <react_native_1.Animated.View style={[styles_1.default.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
+          <NetworkIcons_1.BrandCircleIcon size={62}/>
+          {(logs.length > 0 || analyticsEvents.length > 0) && (<react_native_1.Animated.View style={[
                 styles_1.default.fabBadge,
                 hasErrors ? styles_1.default.fabBadgeError : styles_1.default.fabBadgeNormal,
                 { transform: [{ scale: badgeAnim }] },
             ]}>
-            <react_native_1.Text style={styles_1.default.fabBadgeText}>
-              {logs.length + analyticsEvents.length > 99
+              <react_native_1.Text style={styles_1.default.fabBadgeText}>
+                {logs.length + analyticsEvents.length > 99
                 ? '99+'
                 : logs.length + analyticsEvents.length}
-            </react_native_1.Text>
-          </react_native_1.Animated.View>)}
-      </TouchableScale_1.default>
+              </react_native_1.Text>
+            </react_native_1.Animated.View>)}
+        </TouchableScale_1.default>
+      </react_native_1.Animated.View>
 
       <react_native_1.Modal visible={visible} animationType="slide" transparent>
         {visible && (<ErrorBoundary_1.default onClose={closeModal}>
             <react_native_1.View style={styles_1.default.modalBackdrop}>
               <react_native_1.Pressable style={styles_1.default.modalBackdropPressable} onPress={closeModal}/>
-              <react_native_1.View style={styles_1.default.modalContentCard}>
+              <react_native_1.View style={[
+                styles_1.default.modalContentCard,
+                { height: `${modalHeightPercent}%` },
+            ]}>
                 <react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
                 <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} style={styles_1.default.headerGradient}>
@@ -2343,10 +2832,27 @@ const NetworkInspector = ({ enabled = true, }) => {
                     setSelectedEvent(null);
                 });
             }} hitSlop={15} style={[
-                styles_1.default.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 */}
+                        <react_native_1.View style={{
+                position: 'absolute',
+                width: 48,
+                height: 48,
+                borderRadius: 24,
+                backgroundColor: 'rgba(255,255,255,0.10)',
+            }}/>
                         <NetworkIcons_1.WhiteBackNavigation />
                       </TouchableScale_1.default>
 
@@ -2357,8 +2863,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                     flex: 1,
                 }}>
                           <react_native_1.View style={{
-                    width: 42,
-                    height: 42,
+                    width: 50,
+                    height: 50,
                     borderRadius: 10,
                     backgroundColor: 'rgba(255,255,255,0.13)',
                     borderWidth: 1.5,
@@ -2370,37 +2876,92 @@ const NetworkInspector = ({ enabled = true, }) => {
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
                 }}>
-                            <NetworkIcons_1.BrandSquareIcon size={36}/>
+                            <NetworkIcons_1.BrandSquareIcon size={45}/>
                           </react_native_1.View>
                           <react_native_1.View style={{ gap: 3 }}>
-                            <react_native_1.Text style={[
-                    styles_1.default.headerTitle,
-                    { fontSize: 17, letterSpacing: 0.2 },
-                ]}>
+                            <react_native_1.Text style={[styles_1.default.headerTitle]}>
                               RN InApp Inspector
                             </react_native_1.Text>
                             <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
+                    gap: 6,
                 }}>
-                              <react_native_1.Animated.View style={{
-                    width: 6,
-                    height: 6,
-                    borderRadius: 3,
-                    backgroundColor: '#4ADE80',
-                    opacity: activePulseAnim,
-                }}/>
-                              <react_native_1.Text style={{
+                              {/* OS chip */}
+                              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    borderRadius: 6,
+                    overflow: 'hidden',
+                    borderWidth: 1,
+                    borderColor: 'rgba(255,255,255,0.18)',
+                }}>
+                                <react_native_1.View style={{
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    backgroundColor: 'rgba(255,255,255,0.28)',
+                }}>
+                                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#FFFFFF',
+                    letterSpacing: 0.3,
+                }}>
+                                    {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'}
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                                <react_native_1.View style={{
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    backgroundColor: 'rgba(255,255,255,0.12)',
+                }}>
+                                  <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 10,
-                    color: 'rgba(255,255,255,0.78)',
+                    fontSize: 9.5,
+                    color: 'rgba(255,255,255,0.92)',
+                }}>
+                                    {String(react_native_1.Platform.Version)}
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </react_native_1.View>
+
+                              {/* npm chip */}
+                              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    borderRadius: 6,
+                    overflow: 'hidden',
+                    borderWidth: 1,
+                    borderColor: 'rgba(255,255,255,0.18)',
+                }}>
+                                <react_native_1.View style={{
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    backgroundColor: 'rgba(255,255,255,0.28)',
+                }}>
+                                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#FFFFFF',
                     letterSpacing: 0.3,
                 }}>
-                                Active •{' '}
-                                {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'}{' '}
-                                (v1.0.13)
-                              </react_native_1.Text>
+                                    npm
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                                <react_native_1.View style={{
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    backgroundColor: 'rgba(255,255,255,0.12)',
+                }}>
+                                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 9.5,
+                    color: 'rgba(255,255,255,0.92)',
+                }}>
+                                    v{constants_1.LIB_VERSION}
+                                  </react_native_1.Text>
+                                </react_native_1.View>
+                              </react_native_1.View>
                             </react_native_1.View>
                           </react_native_1.View>
                         </react_native_1.View>) : null}
@@ -2425,21 +2986,48 @@ const NetworkInspector = ({ enabled = true, }) => {
                             </react_native_1.Text>
                           </react_native_1.View>
                           <react_native_1.View style={styles_1.default.headerDetailSubRow}>
-                            <react_native_1.View style={[
+                            <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: `${(0, helpers_1.getStatusColor)(selected.status)}26`,
+                    borderWidth: 1,
+                    borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}55`,
+                }}>
+                              <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
                     },
                 ]}/>
-                            <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                              {selected.status === 0
+                              <react_native_1.Text style={[
+                    styles_1.default.headerSubTitle,
+                    { fontFamily: AppFonts_1.AppFonts.interBold },
+                ]}>
+                                {selected.status === 0
                     ? 'Failed'
-                    : selected.status ?? 'Pending'}{' '}
-                              •{' '}
-                              {selected.duration != null
+                    : selected.status ?? 'Pending'}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                            <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: 'rgba(255,255,255,0.16)',
+                }}>
+                              <NetworkIcons_1.ClockIcon color="#FFFFFF" size={11}/>
+                              <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                                {selected.duration != null
                     ? `${selected.duration}ms`
-                    : '-'}
-                            </react_native_1.Text>
+                    : '—'}
+                              </react_native_1.Text>
+                            </react_native_1.View>
                           </react_native_1.View>
                         </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                           <react_native_1.View style={styles_1.default.headerDetailRow}>
@@ -2482,7 +3070,50 @@ const NetworkInspector = ({ enabled = true, }) => {
                         </react_native_1.View>) : null}
                     </react_native_1.View>
 
-                    <react_native_1.View style={styles_1.default.headerRight}>
+                    <react_native_1.View style={[
+                styles_1.default.headerRight,
+                selected == null &&
+                    selectedEvent == null && {
+                    flexShrink: 0,
+                    minWidth: 116,
+                },
+            ]}>
+                      {selected == null && selectedEvent == null && (<TouchableScale_1.default onPress={() => {
+                    react_native_1.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_1.default.closeButtonSquare,
+                    {
+                        marginRight: 8,
+                        backgroundColor: 'rgba(255,255,255,0.15)',
+                    },
+                ]}>
+                          <react_native_1.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],
+                            }),
+                        },
+                    ],
+                }}>
+                            <NetworkIcons_1.TrashIcon color="#FFFFFF" size={15}/>
+                          </react_native_1.Animated.View>
+                        </TouchableScale_1.default>)}
+
                       {selected == null && selectedEvent == null && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[
                     styles_1.default.closeButtonSquare,
                     {
@@ -2817,50 +3448,53 @@ const NetworkInspector = ({ enabled = true, }) => {
                     filteredAnalyticsEvents.length === 0 && {
                         flexGrow: 1,
                     },
-                ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<react_native_1.FlatList data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
-                          <react_native_1.View style={styles_1.default.toolbarRow}>
-                            <react_native_1.View style={styles_1.default.searchContainer}>
-                              <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-                              <react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                              {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                                  <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                                </react_native_1.Pressable>)}
-                            </react_native_1.View>
+                ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.FlatList ref={apisListRef} onScroll={e => setShowScrollTop(e.nativeEvent.contentOffset.y > 320)} scrollEventThrottle={16} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
+                            <react_native_1.View style={styles_1.default.toolbarRow}>
+                              <react_native_1.View style={styles_1.default.searchContainer}>
+                                <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                                <react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                                {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                                  </react_native_1.Pressable>)}
+                              </react_native_1.View>
 
-                            <react_native_1.View style={styles_1.default.toolbarRight}>
-                              <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                                <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
-                                {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
-                                    <react_native_1.Text style={styles_1.default.trashBadgeText}>
-                                      {selectedLogs.size}
-                                    </react_native_1.Text>
-                                  </react_native_1.View>)}
-                              </TouchableScale_1.default>
+                              <react_native_1.View style={styles_1.default.toolbarRight}>
+                                <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
+                                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                                  {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
+                                      <react_native_1.Text style={styles_1.default.trashBadgeText}>
+                                        {selectedLogs.size}
+                                      </react_native_1.Text>
+                                    </react_native_1.View>)}
+                                </TouchableScale_1.default>
 
-                              <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
-                                <NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
-                              </TouchableScale_1.default>
+                                <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+                                  <NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                                </TouchableScale_1.default>
 
-                              <TouchableScale_1.default style={[
+                                <TouchableScale_1.default style={[
                         styles_1.default.toolbarBtn,
                         filtersAccordion.isOpen &&
                             styles_1.default.toolbarBtnActive,
                     ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
-                                <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
+                                  <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
                         ? AppColors_1.AppColors.purple
                         : AppColors_1.AppColors.grayTextStrong} size={18}/>
-                              </TouchableScale_1.default>
+                                </TouchableScale_1.default>
+                              </react_native_1.View>
                             </react_native_1.View>
-                          </react_native_1.View>
 
-                          <react_native_1.Animated.View style={[
+                            <react_native_1.Animated.View style={[
                         filtersAccordion.bodyStyle,
                         { overflow: 'hidden' },
                     ]}>
-                            <react_native_1.View style={styles_1.default.filtersContainer}>
-                              <react_native_1.Text style={styles_1.default.filtersHeading}>STATUS</react_native_1.Text>
-                              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                                {constants_1.STATUS_FILTERS.map(filter => {
+                              <react_native_1.View style={styles_1.default.filtersContainer}>
+                                <react_native_1.Text style={styles_1.default.filtersHeading}>
+                                  STATUS
+                                </react_native_1.Text>
+                                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                                  {constants_1.STATUS_FILTERS.map(filter => {
                         const isAll = filter === 'ALL';
                         const active = isAll
                             ? statusFilters.size === 0
@@ -2879,38 +3513,38 @@ const NetworkInspector = ({ enabled = true, }) => {
                                     });
                                 }
                             }} hitSlop={10}>
-                                      {active ? (<react_native_1.View style={[
+                                        {active ? (<react_native_1.View style={[
                                     styles_1.default.statusFilterChip,
                                     styles_1.default.statusFilterActive,
                                     { overflow: 'hidden' },
                                 ]}>
-                                          <react_native_linear_gradient_1.default colors={[
+                                            <react_native_linear_gradient_1.default colors={[
                                     AppColors_1.AppColors.purpleShade50,
                                     '#EAE5FF',
                                 ]} style={react_native_1.StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
-                                          <react_native_1.Text style={[
+                                            <react_native_1.Text style={[
                                     styles_1.default.statusFilterText,
                                     { color: AppColors_1.AppColors.purple },
                                 ]}>
-                                            {filter}
-                                          </react_native_1.Text>
-                                        </react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
-                                          <react_native_1.Text style={styles_1.default.statusFilterText}>
-                                            {filter}
-                                          </react_native_1.Text>
-                                        </react_native_1.View>)}
-                                    </TouchableScale_1.default>);
+                                              {filter}
+                                            </react_native_1.Text>
+                                          </react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
+                                            <react_native_1.Text style={styles_1.default.statusFilterText}>
+                                              {filter}
+                                            </react_native_1.Text>
+                                          </react_native_1.View>)}
+                                      </TouchableScale_1.default>);
                     })}
-                              </react_native_1.ScrollView>
+                                </react_native_1.ScrollView>
 
-                              <react_native_1.Text style={[
+                                <react_native_1.Text style={[
                         styles_1.default.filtersHeading,
                         { marginTop: 16 },
                     ]}>
-                                METHOD
-                              </react_native_1.Text>
-                              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                                {availableMethods.map(filter => {
+                                  METHOD
+                                </react_native_1.Text>
+                                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                                  {availableMethods.map(filter => {
                         const isAll = filter === 'ALL';
                         const active = isAll
                             ? methodFilters.size === 0
@@ -2929,43 +3563,55 @@ const NetworkInspector = ({ enabled = true, }) => {
                                     });
                                 }
                             }} hitSlop={10}>
-                                      {active ? (<react_native_1.View style={[
+                                        {active ? (<react_native_1.View style={[
                                     styles_1.default.statusFilterChip,
                                     styles_1.default.statusFilterActive,
                                     { overflow: 'hidden' },
                                 ]}>
-                                          <react_native_linear_gradient_1.default colors={[
+                                            <react_native_linear_gradient_1.default colors={[
                                     AppColors_1.AppColors.purpleShade50,
                                     '#EAE5FF',
                                 ]} style={react_native_1.StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
-                                          <react_native_1.Text style={[
+                                            <react_native_1.Text style={[
                                     styles_1.default.statusFilterText,
                                     { color: AppColors_1.AppColors.purple },
                                 ]}>
-                                            {filter}
-                                          </react_native_1.Text>
-                                        </react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
-                                          <react_native_1.Text style={styles_1.default.statusFilterText}>
-                                            {filter}
-                                          </react_native_1.Text>
-                                        </react_native_1.View>)}
-                                    </TouchableScale_1.default>);
+                                              {filter}
+                                            </react_native_1.Text>
+                                          </react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
+                                            <react_native_1.Text style={styles_1.default.statusFilterText}>
+                                              {filter}
+                                            </react_native_1.Text>
+                                          </react_native_1.View>)}
+                                      </TouchableScale_1.default>);
                     })}
-                              </react_native_1.ScrollView>
-                            </react_native_1.View>
-                          </react_native_1.Animated.View>
+                                </react_native_1.ScrollView>
+                              </react_native_1.View>
+                            </react_native_1.Animated.View>
 
-                          {(search ||
+                            {(search ||
                         statusFilters.size > 0 ||
                         methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
-                              {filteredLogs.length === logs.length
+                                {filteredLogs.length === logs.length
                             ? `${logs.length} requests`
                             : `${filteredLogs.length} of ${logs.length} filtered requests`}
-                            </react_native_1.Text>)}
-                        </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
+                              </react_native_1.Text>)}
+                          </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
                     styles_1.default.listContent,
                     filteredLogs.length === 0 && { flexGrow: 1 },
-                ]} keyboardShouldPersistTaps="handled"/>) : activeTab === 'logs' ? (<react_native_1.View style={{ flex: 1 }}>
+                ]} keyboardShouldPersistTaps="handled"/>
+                      {showScrollTop && (<TouchableScale_1.default onPress={() => {
+                        apisListRef.current?.scrollToOffset({
+                            offset: 0,
+                            animated: true,
+                        });
+                        setShowScrollTop(false);
+                    }} hitSlop={10} style={styles_1.default.scrollTopBtn}>
+                          <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
+                            <NetworkIcons_1.ChevronIcon color="#FFFFFF" size={18}/>
+                          </react_native_1.View>
+                        </TouchableScale_1.default>)}
+                    </react_native_1.View>) : activeTab === 'logs' ? (<react_native_1.View style={{ flex: 1 }}>
                       <react_native_1.View style={{
                     backgroundColor: '#FFFFFF',
                     borderBottomWidth: 1,
@@ -2985,6 +3631,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                           </react_native_1.View>
 
                           <react_native_1.View style={styles_1.default.toolbarRight}>
+                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+                              <NetworkIcons_1.SortArrowIcon color={AppColors_1.AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
+                            </TouchableScale_1.default>
                             <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
                               <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
                             </TouchableScale_1.default>
@@ -4224,7 +4873,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                         if (!resExpanded && !showResDiff)
                             setResExpanded(true);
                     }}/>
-                              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen={resExpanded}/>)}
+                              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen={resExpanded} wrap/>)}
                             </react_native_1.View>
                           </>)}
                       </react_native_1.ScrollView>