react-native-inapp-inspector 1.1.2 → 1.1.3

package/README.md

@@ -185,6 +185,20 @@ import store from './store';
 connectReduxStore(store);
 ```
 
+**Recommended:** if you use thunks, sagas or RTK Query, also add the inspector middleware so actions dispatched from inside them are captured with full type/payload attribution (they bypass the wrapped outer dispatch otherwise):
+
+```tsx
+import {inspectorReduxMiddleware} from 'react-native-inapp-inspector';
+
+const store = configureStore({
+  reducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware().concat(inspectorReduxMiddleware),
+});
+```
+
+Using both together is safe — they de-duplicate automatically.
+
 The Redux tab shows the latest state tree, recent dispatches, payloads, and changed top-level state slices. Action history is capped at 50 entries.
 
 ---

package/dist/commonjs/components/ConsoleLogCard.js

@@ -320,6 +320,24 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 : `Object{${Object.keys(jsonContent.data).length}}`}
                   </react_native_1.Text>
                 </react_native_1.View>)}
+              {/* #9 — collapsed duplicate counter */}
+              {'duplicateCount' in item &&
+            item.duplicateCount != null &&
+            item.duplicateCount > 1 && (<react_native_1.View style={[
+                styles.badge,
+                {
+                    backgroundColor: 'rgba(104, 75, 155, 0.1)',
+                    borderColor: 'rgba(104, 75, 155, 0.25)',
+                    borderWidth: 1,
+                },
+            ]}>
+                    <react_native_1.Text style={[
+                styles.badgeText,
+                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
+            ]}>
+                      ×{item.duplicateCount}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
               {isAnalyticsError && (<react_native_1.View style={[
                 styles.badge,
                 { backgroundColor: `${AppColors_1.AppColors.skyBlue}15` },

package/dist/commonjs/components/LogCard.js

@@ -116,6 +116,23 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                 .json
               </react_native_1.Text>
             </react_native_1.View>)}
+
+          {/* #9 — collapsed duplicate counter */}
+          {item.duplicateCount != null && item.duplicateCount > 1 && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                    borderColor: `${AppColors_1.AppColors.purple}30`,
+                    marginLeft: 6,
+                },
+            ]}>
+              <react_native_1.Text style={[
+                styles_1.default.chipText,
+                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
+            ]}>
+                ×{item.duplicateCount}
+              </react_native_1.Text>
+            </react_native_1.View>)}
         </react_native_1.View>
 
         <react_native_1.View style={styles_1.default.cardBottomRow}>

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -40,5 +40,12 @@ export declare const HtmlIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const CssIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const JsIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const EyeIcon: ({ color, size }: any) => React.JSX.Element;
-export declare const SettingsIcon: ({ color, size }: any) => React.JSX.Element;
-export declare const FolderIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SettingsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const FolderIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const WipeIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const LayersIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const UserIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const InfoCircleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const WarningTriangleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
+exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -317,16 +317,72 @@ const EyeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
     </react_native_svg_1.default>);
 };
 exports.EyeIcon = EyeIcon;
-const SettingsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+const SettingsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       <react_native_svg_1.Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2"/>
     </react_native_svg_1.default>);
 };
 exports.SettingsIcon = SettingsIcon;
-const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </react_native_svg_1.default>);
 };
 exports.FolderIcon = FolderIcon;
+// #3 — Broom/sweep "wipe" icon used by the header Clear-Everything button.
+const WipeIcon = ({ color = '#FFFFFF', size = 16 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {/* Handle */}
+      <react_native_svg_1.Path d="M19.5 3.5L12.7 10.3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      {/* Brush head */}
+      <react_native_svg_1.Path d="M13.5 9.5l1.5 1.5c.8.8.8 2 0 2.8L10 19l-5-5 5.2-5.5c.8-.8 2-.8 2.8 0z" stroke={color} strokeWidth="2" strokeLinejoin="round"/>
+      {/* Bristle strokes */}
+      <react_native_svg_1.Path d="M7.5 16.5L5.5 18.5M10 19l-1.5 1.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      {/* Dust sparks */}
+      <react_native_svg_1.Path d="M3 11.5h.01M5.5 8.5h.01" stroke={color} strokeWidth="2.4" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.WipeIcon = WipeIcon;
+// #7 — Icons for the inner filter chips / sub tabs.
+const LayersIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.LayersIcon = LayersIcon;
+const UserIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Circle cx="12" cy="7" r="4" stroke={color} strokeWidth="2"/>
+    </react_native_svg_1.default>);
+};
+exports.UserIcon = UserIcon;
+const InfoCircleIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M12 16v-4M12 8h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.InfoCircleIcon = InfoCircleIcon;
+const WarningTriangleIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M12 9v4M12 17h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.WarningTriangleIcon = WarningTriangleIcon;
+const ErrorCircleIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M15 9l-6 6M9 9l6 6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ErrorCircleIcon = ErrorCircleIcon;
+const TrendingUpIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M23 6l-9.5 9.5-5-5L1 18" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M17 6h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.TrendingUpIcon = TrendingUpIcon;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.2";
+export declare const LIB_VERSION = "1.1.3";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '1.1.2';
+exports.LIB_VERSION = '1.1.3';

package/dist/commonjs/customHooks/reduxLogger.d.ts

@@ -1,16 +1,30 @@
-export declare const getReduxState: () => any;
-export declare const setReduxAutoRefresh: (val: boolean) => void;
-export declare const getReduxAutoRefresh: () => boolean;
-export declare const getLastActionForReducer: () => Record<string, any>;
-export declare const clearLastActionForReducer: () => void;
-export declare const getActionHistory: () => {
+export interface ReduxHistoryEntry {
     id: number;
     type: string;
     payload: any;
     timestamp: string;
     affectedSlices: string[];
-}[];
+}
+export declare const getReduxState: () => any;
+export declare const setReduxAutoRefresh: (val: boolean) => void;
+export declare const getReduxAutoRefresh: () => boolean;
+export declare const getLastActionForReducer: () => Record<string, any>;
+export declare const clearLastActionForReducer: () => void;
+export declare const getActionHistory: () => ReduxHistoryEntry[];
 export declare const clearActionHistory: () => void;
 export declare const setReduxState: (state: any) => void;
 export declare const subscribeReduxState: (cb: () => void) => () => void;
+/**
+ * Standard Redux middleware — add it to your store to capture every action,
+ * including those dispatched from thunks, sagas and RTK Query:
+ *
+ *   const store = configureStore({
+ *     reducer,
+ *     middleware: gDM => gDM().concat(inspectorReduxMiddleware),
+ *   });
+ *
+ * Pair with `connectReduxStore(store)` (safe — they de-duplicate) or rely on
+ * the middleware alone; the initial snapshot is taken on the first action.
+ */
+export declare const inspectorReduxMiddleware: (storeApi: any) => (next: (action: any) => any) => (action: any) => any;
 export declare const connectReduxStore: (store: any) => void;

package/dist/commonjs/customHooks/reduxLogger.js

@@ -1,11 +1,31 @@
 "use strict";
+// #8 — Redux inspector module.
+//
+// Two integration paths, both feeding the same timeline/state snapshot:
+//
+//   1. `inspectorReduxMiddleware` (recommended) — a standard Redux middleware.
+//      Because it sits inside the middleware chain it sees EVERY action,
+//      including ones dispatched from thunks, sagas, listeners and RTK Query.
+//
+//   2. `connectReduxStore(store)` — zero-config fallback. It wraps the outer
+//      `store.dispatch` AND diffs state on `store.subscribe`, so even actions
+//      that bypass the wrapped dispatch (thunk/saga internals capture the raw
+//      dispatch reference at store-creation time) still update the state tree
+//      and per-reducer "last action" consistently.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.connectReduxStore = exports.subscribeReduxState = exports.setReduxState = exports.clearActionHistory = exports.getActionHistory = exports.clearLastActionForReducer = exports.getLastActionForReducer = exports.getReduxAutoRefresh = exports.setReduxAutoRefresh = exports.getReduxState = void 0;
+exports.connectReduxStore = exports.inspectorReduxMiddleware = exports.subscribeReduxState = exports.setReduxState = exports.clearActionHistory = exports.getActionHistory = exports.clearLastActionForReducer = exports.getLastActionForReducer = exports.getReduxAutoRefresh = exports.setReduxAutoRefresh = exports.getReduxState = void 0;
 let currentReduxState = null;
 const listeners = new Set();
 let globalReduxAutoRefresh = true;
 let lastActionForReducer = {};
 let actionHistory = [];
+const MAX_HISTORY = 50;
+let historyIdSeq = 0;
+// Guards against double-instrumentation (e.g. connectReduxStore called twice,
+// or middleware + connect used together) which previously produced duplicate
+// timeline entries and inconsistent counts.
+const connectedStores = new WeakSet();
+let middlewareAttached = false;
 const getReduxState = () => currentReduxState;
 exports.getReduxState = getReduxState;
 const setReduxAutoRefresh = (val) => {
@@ -18,19 +38,19 @@ const getLastActionForReducer = () => lastActionForReducer;
 exports.getLastActionForReducer = getLastActionForReducer;
 const clearLastActionForReducer = () => {
     lastActionForReducer = {};
-    listeners.forEach(cb => cb());
+    notify();
 };
 exports.clearLastActionForReducer = clearLastActionForReducer;
 const getActionHistory = () => actionHistory;
 exports.getActionHistory = getActionHistory;
 const clearActionHistory = () => {
     actionHistory = [];
-    listeners.forEach(cb => cb());
+    notify();
 };
 exports.clearActionHistory = clearActionHistory;
 const setReduxState = (state) => {
     currentReduxState = state;
-    listeners.forEach(cb => cb());
+    notify();
 };
 exports.setReduxState = setReduxState;
 const subscribeReduxState = (cb) => {
@@ -40,6 +60,83 @@ const subscribeReduxState = (cb) => {
     };
 };
 exports.subscribeReduxState = subscribeReduxState;
+function notify() {
+    listeners.forEach(cb => cb());
+}
+function actionTypeOf(action) {
+    if (typeof action === 'string')
+        return action;
+    if (action && typeof action === 'object' && action.type != null) {
+        return String(action.type);
+    }
+    if (typeof action === 'function') {
+        return action.name ? `thunk: ${action.name}` : 'thunk';
+    }
+    return 'UNKNOWN_ACTION';
+}
+function recordAction(action, prevState, nextState) {
+    const type = actionTypeOf(action);
+    const payload = action && typeof action === 'object' && action.payload !== undefined
+        ? action.payload
+        : null;
+    const timestamp = new Date().toLocaleTimeString();
+    const affectedSlices = [];
+    if (prevState &&
+        nextState &&
+        typeof prevState === 'object' &&
+        typeof nextState === 'object') {
+        Object.keys(nextState).forEach(key => {
+            if (prevState[key] !== nextState[key]) {
+                lastActionForReducer[key] = { type, payload, timestamp };
+                affectedSlices.push(key);
+            }
+        });
+    }
+    actionHistory.unshift({
+        id: ++historyIdSeq,
+        type,
+        payload,
+        timestamp,
+        affectedSlices,
+    });
+    if (actionHistory.length > MAX_HISTORY) {
+        actionHistory.length = MAX_HISTORY;
+    }
+    if (globalReduxAutoRefresh) {
+        currentReduxState = nextState;
+    }
+    // Timeline / last-action map always changed — notify even when the state
+    // tree snapshot is paused so those panels stay live.
+    notify();
+}
+/**
+ * Standard Redux middleware — add it to your store to capture every action,
+ * including those dispatched from thunks, sagas and RTK Query:
+ *
+ *   const store = configureStore({
+ *     reducer,
+ *     middleware: gDM => gDM().concat(inspectorReduxMiddleware),
+ *   });
+ *
+ * Pair with `connectReduxStore(store)` (safe — they de-duplicate) or rely on
+ * the middleware alone; the initial snapshot is taken on the first action.
+ */
+const inspectorReduxMiddleware = (storeApi) => (next) => (action) => {
+    middlewareAttached = true;
+    // Thunks are functions — let them run; their inner plain-action dispatches
+    // pass back through this same middleware, so nothing is lost.
+    if (typeof action === 'function') {
+        return next(action);
+    }
+    const prevState = storeApi.getState();
+    const result = next(action);
+    const nextState = storeApi.getState();
+    if (currentReduxState == null)
+        currentReduxState = nextState;
+    recordAction(action, prevState, nextState);
+    return result;
+};
+exports.inspectorReduxMiddleware = inspectorReduxMiddleware;
 const connectReduxStore = (store) => {
     if (!store ||
         typeof store.getState !== 'function' ||
@@ -47,61 +144,63 @@ const connectReduxStore = (store) => {
         console.warn('[NetworkInspector] Invalid Redux store passed to connectReduxStore.');
         return;
     }
-    // Intercept dispatch calls to log actions and tie them to modified state slices
+    // Idempotent — connecting the same store twice must not double-wrap
+    // dispatch or double-record the timeline.
+    if (connectedStores.has(store)) {
+        return;
+    }
+    connectedStores.add(store);
+    // Wrap the outer dispatch so directly dispatched actions get full
+    // type/payload attribution. Skipped when the middleware is already
+    // attached, otherwise every direct dispatch would be recorded twice.
     const originalDispatch = store.dispatch.bind(store);
+    let inWrappedDispatch = false;
     store.dispatch = (action) => {
-        const prevState = store.getState();
-        const result = originalDispatch(action);
-        const nextState = store.getState();
-        // Map the dispatched action to state slices that actually changed
-        const affectedSlices = [];
-        if (prevState &&
-            nextState &&
-            typeof prevState === 'object' &&
-            typeof nextState === 'object' &&
-            action &&
-            typeof action === 'object') {
-            Object.keys(nextState).forEach(key => {
-                if (prevState[key] !== nextState[key]) {
-                    const actionObj = {
-                        type: action.type || 'UNKNOWN_ACTION',
-                        payload: action.payload !== undefined ? action.payload : null,
-                        timestamp: new Date().toLocaleTimeString(),
-                    };
-                    lastActionForReducer[key] = actionObj;
-                    affectedSlices.push(key);
-                }
-            });
-            // Push to history
-            actionHistory.unshift({
-                id: Date.now() + Math.random(),
-                type: action.type || 'UNKNOWN_ACTION',
-                payload: action.payload !== undefined ? action.payload : null,
-                timestamp: new Date().toLocaleTimeString(),
-                affectedSlices,
-            });
-            // Cap size at 50
-            if (actionHistory.length > 50) {
-                actionHistory.pop();
+        if (middlewareAttached || typeof action === 'function') {
+            // Middleware handles recording, or it's a thunk whose inner dispatches
+            // will be picked up individually.
+            inWrappedDispatch = true;
+            try {
+                return originalDispatch(action);
+            }
+            finally {
+                inWrappedDispatch = false;
             }
         }
-        if (globalReduxAutoRefresh) {
-            // Refresh the displayed state tree snapshot.
-            (0, exports.setReduxState)(nextState);
+        const prevState = store.getState();
+        inWrappedDispatch = true;
+        let result;
+        try {
+            result = originalDispatch(action);
         }
-        else {
-            // Tree is paused, but the action timeline / last-action map still changed,
-            // so notify subscribers to re-render those without moving the tree snapshot.
-            listeners.forEach(cb => cb());
+        finally {
+            inWrappedDispatch = false;
         }
+        recordAction(action, prevState, store.getState());
         return result;
     };
     (0, exports.setReduxState)(store.getState());
-    // Listen to subscription for devtools updates or any other state changes
+    // Subscribe-diff fallback: catches state changes whose dispatch bypassed
+    // the wrapper above (thunk/saga internals hold the raw dispatch reference).
+    // Without this, the tree and per-reducer last-action drifted out of sync.
+    let lastSeenState = store.getState();
     store.subscribe(() => {
-        if (globalReduxAutoRefresh) {
-            (0, exports.setReduxState)(store.getState());
+        const nextState = store.getState();
+        if (nextState === lastSeenState)
+            return;
+        const prevState = lastSeenState;
+        lastSeenState = nextState;
+        if (inWrappedDispatch || middlewareAttached) {
+            // Already recorded with proper attribution; just refresh the snapshot.
+            if (globalReduxAutoRefresh) {
+                currentReduxState = nextState;
+                notify();
+            }
+            return;
         }
+        // Change arrived outside the wrapped dispatch — record it so the
+        // timeline stays consistent, even without the original action type.
+        recordAction({ type: '@@inspector/EXTERNAL_STATE_CHANGE' }, prevState, nextState);
     });
 };
 exports.connectReduxStore = connectReduxStore;

package/dist/commonjs/customHooks/webViewLogger.js

@@ -323,14 +323,19 @@ exports.WebView = (0, react_1.forwardRef)((props, ref) => {
         onNavigationStateChange: handleNavigationStateChange,
         onLoadStart: handleLoadStart,
         onLoadEnd: handleLoadEnd,
-    }), loading && showLoader && react_1.default.createElement(react_native_1.View, {
-        style: {
-            ...react_native_1.StyleSheet.absoluteFill,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: 'rgba(255, 255, 255, 0.4)',
-        },
-    }, react_1.default.createElement(react_native_1.ActivityIndicator, { size: 'large', color: '#684B9B' })));
+    }), loading &&
+        showLoader &&
+        react_1.default.createElement(react_native_1.View, {
+            style: {
+                ...react_native_1.StyleSheet.absoluteFill,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'rgba(255, 255, 255, 0.4)',
+            },
+        }, react_1.default.createElement(react_native_1.ActivityIndicator, {
+            size: 'large',
+            color: '#684B9B',
+        })));
 });
 // Perform monkey-patching to intercept react-native-webview exports globally
 try {

package/dist/commonjs/helpers/settingsStore.d.ts

@@ -0,0 +1,24 @@
+export interface PersistedSettings {
+    isDark?: boolean;
+    modalHeightPercent?: number;
+    tabVisibility?: Record<string, boolean>;
+    defaultTab?: string;
+    maxNetworkLogs?: number;
+    maxConsoleLogs?: number;
+    showConsoleLevels?: {
+        info: boolean;
+        warn: boolean;
+        error: boolean;
+    };
+    webViewCaptureCssJs?: boolean;
+    reduxAutoRefresh?: boolean;
+    reduxExpandDepth?: number;
+    slowRequestThreshold?: number;
+    insightsShowConsoleAlerts?: boolean;
+    showDuplicateLogs?: boolean;
+}
+export declare function loadSettings(): Promise<PersistedSettings>;
+/** Debounced save so rapid toggling doesn't hammer storage. */
+export declare function saveSettings(settings: PersistedSettings): void;
+export declare function clearPersistedSettings(): Promise<void>;
+export declare const isPersistentStorageAvailable: () => boolean;

package/dist/commonjs/helpers/settingsStore.js

@@ -0,0 +1,74 @@
+"use strict";
+// #5 — Persistence layer for the inspector's settings selections.
+//
+// Backed by @react-native-async-storage/async-storage when the host app has it
+// installed (most RN apps do), with a transparent in-memory fallback so this
+// library never crashes and never forces a new native dependency.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isPersistentStorageAvailable = void 0;
+exports.loadSettings = loadSettings;
+exports.saveSettings = saveSettings;
+exports.clearPersistedSettings = clearPersistedSettings;
+let storage = null;
+try {
+    // Optional dependency — resolved only if the host app already ships it.
+    const mod = require('@react-native-async-storage/async-storage');
+    storage = mod?.default ?? mod ?? null;
+    if (storage && typeof storage.getItem !== 'function')
+        storage = null;
+}
+catch {
+    storage = null;
+}
+// In-memory fallback (settings survive for the app session only).
+const memory = new Map();
+const SETTINGS_KEY = 'rn-inapp-inspector.settings.v1';
+async function loadSettings() {
+    try {
+        const raw = storage
+            ? await storage.getItem(SETTINGS_KEY)
+            : memory.get(SETTINGS_KEY) ?? null;
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        return parsed && typeof parsed === 'object' ? parsed : {};
+    }
+    catch {
+        return {};
+    }
+}
+let saveTimer = null;
+/** Debounced save so rapid toggling doesn't hammer storage. */
+function saveSettings(settings) {
+    if (saveTimer)
+        clearTimeout(saveTimer);
+    saveTimer = setTimeout(async () => {
+        try {
+            const raw = JSON.stringify(settings);
+            if (storage) {
+                await storage.setItem(SETTINGS_KEY, raw);
+            }
+            else {
+                memory.set(SETTINGS_KEY, raw);
+            }
+        }
+        catch {
+            // Persistence is best-effort — never crash the host app over it.
+        }
+    }, 250);
+}
+async function clearPersistedSettings() {
+    try {
+        if (storage) {
+            await storage.removeItem(SETTINGS_KEY);
+        }
+        else {
+            memory.delete(SETTINGS_KEY);
+        }
+    }
+    catch {
+        // ignore
+    }
+}
+const isPersistentStorageAvailable = () => storage != null;
+exports.isPersistentStorageAvailable = isPersistentStorageAvailable;

package/dist/commonjs/index.d.ts

@@ -6,4 +6,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';