react-native-inapp-inspector 1.1.0 → 1.1.2

package/README.md

@@ -2,9 +2,9 @@
 
 <p align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg">
     <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_light.svg">
-    <img alt="React Native In-App Inspector Banner" src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_light.svg" width="100%">
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg">
+    <img alt="React Native In-App Inspector Banner" src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg" width="100%">
   </picture>
 </p>
 
@@ -20,15 +20,15 @@ A self-contained in-app debugging overlay for React Native. Inspect network traf
 
 ## Features
 
-| Feature | Description |
-|---|---|
-| Network inspector | Captures `fetch` and axios `GET`, `POST`, `PUT`, `PATCH`, and `DELETE` calls with URL, method, status, headers, body, response, duration, caller, cURL, and fetch snippets. |
-| Insights dashboard | Shows request totals, status breakdowns, latency, payload size, slow requests, and recent activity charts. |
-| Console logger | Captures `console.log`, `console.info`, `console.warn`, and `console.error` with source method and caller details. |
-| Analytics tracker | Captures manual analytics events and patched `@react-native-firebase/analytics` calls including `logEvent`, `logScreenView`, user properties, and user id. |
-| Redux inspector | Connects to a Redux store, displays the live state tree, tracks dispatched actions, affected slices, and action history. |
-| WebView inspector | Provides an instrumented `WebView` with console capture, navigation history, HTML/CSS/JS snapshots, and optional loading overlay. |
-| Error boundary | Exports an `ErrorBoundary` for catching React errors and wrapping the inspector safely. |
+| Feature            | Description                                                                                                                                                                 |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Network inspector  | Captures `fetch` and axios `GET`, `POST`, `PUT`, `PATCH`, and `DELETE` calls with URL, method, status, headers, body, response, duration, caller, cURL, and fetch snippets. |
+| Insights dashboard | Shows request totals, status breakdowns, latency, payload size, slow requests, and recent activity charts.                                                                  |
+| Console logger     | Captures `console.log`, `console.info`, `console.warn`, and `console.error` with source method and caller details.                                                          |
+| Analytics tracker  | Captures manual analytics events and patched `@react-native-firebase/analytics` calls including `logEvent`, `logScreenView`, user properties, and user id.                  |
+| Redux inspector    | Connects to a Redux store, displays the live state tree, tracks dispatched actions, affected slices, and action history.                                                    |
+| WebView inspector  | Provides an instrumented `WebView` with console capture, navigation history, HTML/CSS/JS snapshots, and optional loading overlay.                                           |
+| Error boundary     | Exports an `ErrorBoundary` for catching React errors and wrapping the inspector safely.                                                                                     |
 
 ---
 
@@ -90,7 +90,9 @@ When mounted, the inspector sets up network logging, clears previous network log
 If you need to capture requests that happen before the component mounts, call `setupNetworkLogger()` at module level in your app entry file.
 
 ```tsx
-import NetworkInspector, {setupNetworkLogger} from 'react-native-inapp-inspector';
+import NetworkInspector, {
+  setupNetworkLogger,
+} from 'react-native-inapp-inspector';
 
 setupNetworkLogger();
 ```
@@ -214,40 +216,40 @@ import {ErrorBoundary} from 'react-native-inapp-inspector';
 
 <ErrorBoundary>
   <YourComponent />
-</ErrorBoundary>
+</ErrorBoundary>;
 ```
 
 ---
 
 ## Public API
 
-| Export | Type | Description |
-|---|---|---|
-| `NetworkInspector` | default component | Floating inspector overlay. Mount once near the root of the app. |
-| `setupNetworkLogger()` | function | Patches `fetch`, default axios, and future `axios.create()` instances. |
-| `addAxiosInterceptors(instance)` | function | Manually attaches axios interceptors to an existing instance. |
-| `clearNetworkLogs()` | function | Clears captured network logs. |
-| `subscribeNetworkLogs(callback)` | function | Subscribes to network log updates and returns an unsubscribe function. |
-| `setupConsoleLogger()` | function | Patches console methods. |
-| `clearConsoleLogs()` | function | Clears captured console logs. |
-| `subscribeConsoleLogs(callback)` | function | Subscribes to console log updates and returns an unsubscribe function. |
-| `setupAnalyticsLogger(instance)` | function | Patches a Firebase Analytics instance. |
-| `logAnalyticsEvent(name, params?, userProperties?)` | function | Adds a manual analytics event to the inspector. |
-| `clearAnalyticsEvents()` | function | Clears captured analytics events. |
-| `subscribeAnalyticsEvents(callback)` | function | Subscribes to analytics event updates and returns an unsubscribe function. |
-| `connectReduxStore(store)` | function | Connects a Redux store for live state and action inspection. |
-| `getReduxState()` | function | Returns the latest captured Redux state. |
-| `subscribeReduxState(callback)` | function | Subscribes to Redux state updates and returns an unsubscribe function. |
-| `WebView` | component | Instrumented WebView wrapper. |
-| `getWebViewLogs()` | function | Returns captured WebView console logs. |
-| `getWebViewNavHistory()` | function | Returns captured WebView navigation history. |
-| `getWebViewHtml()` | function | Returns the latest captured WebView HTML. |
-| `getWebViewCss()` | function | Returns the latest captured WebView CSS. |
-| `getWebViewJs()` | function | Returns the latest captured WebView JavaScript. |
-| `getWebViewHtmlUrl()` | function | Returns the URL for the latest captured WebView source snapshot. |
-| `clearWebViewData()` | function | Clears captured WebView logs, navigation, and source data. |
-| `subscribeWebView(callback)` | function | Subscribes to WebView data changes and returns an unsubscribe function. |
-| `ErrorBoundary` | component | React error boundary component. |
+| Export                                              | Type              | Description                                                                |
+| --------------------------------------------------- | ----------------- | -------------------------------------------------------------------------- |
+| `NetworkInspector`                                  | default component | Floating inspector overlay. Mount once near the root of the app.           |
+| `setupNetworkLogger()`                              | function          | Patches `fetch`, default axios, and future `axios.create()` instances.     |
+| `addAxiosInterceptors(instance)`                    | function          | Manually attaches axios interceptors to an existing instance.              |
+| `clearNetworkLogs()`                                | function          | Clears captured network logs.                                              |
+| `subscribeNetworkLogs(callback)`                    | function          | Subscribes to network log updates and returns an unsubscribe function.     |
+| `setupConsoleLogger()`                              | function          | Patches console methods.                                                   |
+| `clearConsoleLogs()`                                | function          | Clears captured console logs.                                              |
+| `subscribeConsoleLogs(callback)`                    | function          | Subscribes to console log updates and returns an unsubscribe function.     |
+| `setupAnalyticsLogger(instance)`                    | function          | Patches a Firebase Analytics instance.                                     |
+| `logAnalyticsEvent(name, params?, userProperties?)` | function          | Adds a manual analytics event to the inspector.                            |
+| `clearAnalyticsEvents()`                            | function          | Clears captured analytics events.                                          |
+| `subscribeAnalyticsEvents(callback)`                | function          | Subscribes to analytics event updates and returns an unsubscribe function. |
+| `connectReduxStore(store)`                          | function          | Connects a Redux store for live state and action inspection.               |
+| `getReduxState()`                                   | function          | Returns the latest captured Redux state.                                   |
+| `subscribeReduxState(callback)`                     | function          | Subscribes to Redux state updates and returns an unsubscribe function.     |
+| `WebView`                                           | component         | Instrumented WebView wrapper.                                              |
+| `getWebViewLogs()`                                  | function          | Returns captured WebView console logs.                                     |
+| `getWebViewNavHistory()`                            | function          | Returns captured WebView navigation history.                               |
+| `getWebViewHtml()`                                  | function          | Returns the latest captured WebView HTML.                                  |
+| `getWebViewCss()`                                   | function          | Returns the latest captured WebView CSS.                                   |
+| `getWebViewJs()`                                    | function          | Returns the latest captured WebView JavaScript.                            |
+| `getWebViewHtmlUrl()`                               | function          | Returns the URL for the latest captured WebView source snapshot.           |
+| `clearWebViewData()`                                | function          | Clears captured WebView logs, navigation, and source data.                 |
+| `subscribeWebView(callback)`                        | function          | Subscribes to WebView data changes and returns an unsubscribe function.    |
+| `ErrorBoundary`                                     | component         | React error boundary component.                                            |
 
 ---
 

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

@@ -1,8 +1,9 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
     defaultExpandDepth?: number;
+    wrap?: boolean;
 }) => React.JSX.Element;
 export default JsonViewer;

package/dist/commonjs/components/JsonViewer.js

@@ -9,11 +9,13 @@ const react_native_1 = require("react-native");
 const TreeNode_1 = __importDefault(require("./TreeNode"));
 // Stylesheet
 const styles_1 = __importDefault(require("../styles"));
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, }) => {
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, }) => {
+    const tree = (<TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
+    if (wrap) {
+        return <react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>;
+    }
     return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
-      <react_native_1.View style={styles_1.default.codeBlock}>
-        <TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>
-      </react_native_1.View>
+      <react_native_1.View style={styles_1.default.codeBlock}>{tree}</react_native_1.View>
     </react_native_1.ScrollView>);
 };
 exports.default = JsonViewer;

package/dist/commonjs/components/MetaAccordion.js

@@ -45,7 +45,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
-          
+
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
@@ -56,9 +56,12 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             {
                 borderColor: 'rgba(107, 78, 255, 0.25)',
                 backgroundColor: 'rgba(107, 78, 255, 0.08)',
-            }
+            },
+        ]}>
+              <react_native_1.Text style={[
+            styles_1.default.statusText,
+            { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold },
         ]}>
-              <react_native_1.Text style={[styles_1.default.statusText, { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                 {method || 'GET'}
               </react_native_1.Text>
             </react_native_1.View>
@@ -96,7 +99,9 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
               <react_native_1.Text style={styles_1.default.metaLabel}>Content Type</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text style={styles_1.default.metaValue}>{contentType || 'application/json'}</react_native_1.Text>
+            <react_native_1.Text style={styles_1.default.metaValue}>
+              {contentType || 'application/json'}
+            </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
 
@@ -130,7 +135,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </react_native_1.View>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
-          
+
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.grayTextWeak}/>
@@ -145,7 +150,22 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
               <react_native_1.Text style={styles_1.default.metaLabel}>Full URL</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text selectable={true} numberOfLines={3} ellipsizeMode="tail" style={[styles_1.default.metaValue, { fontSize: 11.5, color: AppColors_1.AppColors.grayTextWeak, flex: 1, textAlign: 'right', lineHeight: 16 }]}>
+            <react_native_1.Text selectable={true} numberOfLines={3} ellipsizeMode="tail" onPress={() => {
+            if (url) {
+                react_native_1.Linking.openURL(url).catch(() => { });
+            }
+        }} style={[
+            styles_1.default.metaValue,
+            {
+                fontSize: 11.5,
+                color: url ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak,
+                textDecorationLine: url ? 'underline' : 'none',
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                flex: 1,
+                textAlign: 'right',
+                lineHeight: 16,
+            },
+        ]}>
               {url || '—'}
             </react_native_1.Text>
           </react_native_1.View>

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

@@ -1,4 +1,8 @@
 import React from 'react';
+export declare const ReduxStoreIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ReduxBoltIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ReduxTimelineIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ReduxTreeIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
     state: any;
     lastActionMap: Record<string, any>;

package/dist/commonjs/components/ReduxTreeView.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.ReduxActionTimeline = exports.ReduxTreeView = void 0;
+exports.ReduxActionTimeline = exports.ReduxTreeView = exports.ReduxTreeIcon = exports.ReduxTimelineIcon = exports.ReduxBoltIcon = exports.ReduxStoreIcon = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
@@ -44,6 +44,44 @@ const AppFonts_1 = require("../styles/AppFonts");
 const NetworkIcons_1 = require("./NetworkIcons");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
+const helpers_1 = require("../helpers");
+// #15 — copy-to-clipboard control for a single dispatched action
+const ActionCopyButton = ({ value }) => {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    return (<react_native_1.Pressable hitSlop={10} onPress={() => {
+            (0, helpers_1.copyToClipboard)(value(), 'Action');
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+        }} style={{
+            width: 26,
+            height: 26,
+            borderRadius: 7,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: copied
+                ? `${AppColors_1.AppColors.greenColor}1A`
+                : AppColors_1.AppColors.grayBackground,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.dividerColor,
+        }}>
+      {copied ? (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.greenColor} size={13}/>) : (<NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>)}
+    </react_native_1.Pressable>);
+};
+// #15 — derive the redux module / folder name from an action type.
+// Supports RTK slice convention ("booking/setDate" -> "Booking") and
+// falls back to the first affected slice.
+const getActionModule = (type, affectedSlices) => {
+    if (type && type.includes('/')) {
+        const prefix = type.split('/')[0];
+        if (prefix)
+            return prefix.charAt(0).toUpperCase() + prefix.slice(1);
+    }
+    if (affectedSlices && affectedSlices.length > 0) {
+        const s = affectedSlices[0];
+        return s.charAt(0).toUpperCase() + s.slice(1);
+    }
+    return null;
+};
 // Custom icons
 const DatabaseIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M12 2C6.5 2 2 4.2 2 7v10c0 2.8 4.5 5 10 5s10-2.2 10-5V7c0-2.8-4.5-5-10-5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -56,6 +94,30 @@ const BoltIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) =>
 const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<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>);
+// Exported icons so the Redux tab's section headers and sub-tab buttons can
+// render real vector icons instead of emoji (which fail to render on some
+// Android/font setups).
+const ReduxStoreIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M3 9l1.5-5h15L21 9M3 9v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9M3 9h18M7 9v3a2 2 0 0 0 4 0V9m2 0v3a2 2 0 0 0 4 0V9" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ReduxStoreIcon = ReduxStoreIcon;
+const ReduxBoltIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ReduxBoltIcon = ReduxBoltIcon;
+// Action Timeline — a history/clock icon reads as "sequence over time".
+const ReduxTimelineIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M3 3v5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M12 7v5l3 2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ReduxTimelineIcon = ReduxTimelineIcon;
+// Store Tree — a node hierarchy icon reads as "nested tree structure".
+const ReduxTreeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M9 4h6v4H9zM3 16h6v4H3zm12 0h6v4h-6z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M12 8v4M6 16v-2h12v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ReduxTreeIcon = ReduxTreeIcon;
 const animateTreeLayout = () => {
     react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
 };
@@ -181,7 +243,10 @@ const ReduxTreeView = ({ state, lastActionMap, search, }) => {
             setStoreExpanded(!storeExpanded);
         }} style={styles.storeHeader}>
         <AnimatedChevron color="#FFFFFF" expanded={storeExpanded} size={12} style={styles.chevronWrap}/>
-        <react_native_1.Text style={styles.storeTitle}>🏪 Redux Store</react_native_1.Text>
+        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          <exports.ReduxStoreIcon color="#FFFFFF" size={14}/>
+          <react_native_1.Text style={styles.storeTitle}>Redux Store</react_native_1.Text>
+        </react_native_1.View>
         <react_native_1.View style={styles.badge}>
           <react_native_1.Text style={styles.badgeText}>{reducers.length} Reducers</react_native_1.Text>
         </react_native_1.View>
@@ -286,9 +351,12 @@ const ReduxActionTimeline = ({ history, onClear, search, }) => {
     });
     return (<react_native_1.View style={timelineStyles.container}>
       <react_native_1.View style={timelineStyles.headerRow}>
-        <react_native_1.Text style={timelineStyles.headerTitle}>
-          ⚡ Dispatched Actions ({filteredHistory.length})
-        </react_native_1.Text>
+        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          <exports.ReduxBoltIcon color={AppColors_1.AppColors.purple} size={15}/>
+          <react_native_1.Text style={timelineStyles.headerTitle}>
+            Dispatched Actions ({filteredHistory.length})
+          </react_native_1.Text>
+        </react_native_1.View>
         {history.length > 0 && (<react_native_1.Pressable onPress={onClear} style={timelineStyles.clearBtn}>
             <react_native_1.Text style={timelineStyles.clearBtnText}>Clear Log</react_native_1.Text>
           </react_native_1.Pressable>)}
@@ -323,12 +391,49 @@ const ReduxActionTimeline = ({ history, onClear, search, }) => {
                         },
                     ]}>
                   <react_native_1.View style={timelineStyles.cardHeader}>
-                    <react_native_1.View style={timelineStyles.typeBadge}>
-                      <react_native_1.Text style={timelineStyles.typeText}>{item.type}</react_native_1.Text>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        flex: 1,
+                    }}>
+                      {(() => {
+                        const moduleName = getActionModule(item.type, item.affectedSlices);
+                        return moduleName ? (<react_native_1.View style={{
+                                paddingHorizontal: 7,
+                                paddingVertical: 2,
+                                borderRadius: 6,
+                                backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                                borderWidth: 1,
+                                borderColor: `${AppColors_1.AppColors.purple}33`,
+                            }}>
+                            <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 9.5,
+                                color: AppColors_1.AppColors.purple,
+                                letterSpacing: 0.2,
+                            }}>
+                              {moduleName}
+                            </react_native_1.Text>
+                          </react_native_1.View>) : null;
+                    })()}
+                      <react_native_1.View style={timelineStyles.typeBadge}>
+                        <react_native_1.Text style={timelineStyles.typeText}>{item.type}</react_native_1.Text>
+                      </react_native_1.View>
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
+                      <react_native_1.Text style={timelineStyles.timestamp}>
+                        {item.timestamp}
+                      </react_native_1.Text>
+                      <ActionCopyButton value={() => ({
+                        type: item.type,
+                        payload: item.payload,
+                    })}/>
                     </react_native_1.View>
-                    <react_native_1.Text style={timelineStyles.timestamp}>
-                      {item.timestamp}
-                    </react_native_1.Text>
                   </react_native_1.View>
 
                   {item.affectedSlices.length > 0 && (<react_native_1.View style={timelineStyles.slicesRow}>

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

@@ -5,3 +5,4 @@ export declare const METHOD_COLORS: Record<Method, string>;
 export declare const DOMAIN_COLORS: string[];
 export declare const DURATION_FAST_MS = 200;
 export declare const DURATION_SLOW_MS = 800;
+export { LIB_VERSION } from './version';

package/dist/commonjs/constants/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DURATION_SLOW_MS = exports.DURATION_FAST_MS = exports.DOMAIN_COLORS = exports.METHOD_COLORS = exports.STATUS_FILTERS = void 0;
+exports.LIB_VERSION = exports.DURATION_SLOW_MS = exports.DURATION_FAST_MS = exports.DOMAIN_COLORS = exports.METHOD_COLORS = exports.STATUS_FILTERS = void 0;
 // Styles
 const AppColors_1 = require("../styles/AppColors");
 exports.STATUS_FILTERS = [
@@ -33,3 +33,7 @@ exports.DOMAIN_COLORS = [
 ];
 exports.DURATION_FAST_MS = 200;
 exports.DURATION_SLOW_MS = 800;
+// Package version — auto-generated from package.json at build time.
+// See scripts/gen-version.js (wired to the "prebuild" npm script).
+var version_1 = require("./version");
+Object.defineProperty(exports, "LIB_VERSION", { enumerable: true, get: function () { return version_1.LIB_VERSION; } });

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

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

package/dist/commonjs/constants/version.js

@@ -0,0 +1,6 @@
+"use strict";
+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';

package/dist/commonjs/customHooks/reduxLogger.js

@@ -41,7 +41,9 @@ const subscribeReduxState = (cb) => {
 };
 exports.subscribeReduxState = subscribeReduxState;
 const connectReduxStore = (store) => {
-    if (!store || typeof store.getState !== 'function' || typeof store.subscribe !== 'function') {
+    if (!store ||
+        typeof store.getState !== 'function' ||
+        typeof store.subscribe !== 'function') {
         console.warn('[NetworkInspector] Invalid Redux store passed to connectReduxStore.');
         return;
     }
@@ -84,8 +86,14 @@ const connectReduxStore = (store) => {
             }
         }
         if (globalReduxAutoRefresh) {
+            // Refresh the displayed state tree snapshot.
             (0, exports.setReduxState)(nextState);
         }
+        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());
+        }
         return result;
     };
     (0, exports.setReduxState)(store.getState());