react-native-inapp-inspector 1.1.28 → 1.1.31

package/dist/esm/components/LogCard.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, View, Pressable, Text, StyleSheet } from 'react-native';
+import { Alert, Animated, Linking, View, Pressable, Text, StyleSheet, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
-import { getStatusColor, getDurationColor, getPath, getBaseUrl, formatDateTime, getSize, } from '../helpers';
+import { getStatusColor, getDurationColor, formatDateTime, getSize, } from '../helpers';
 import { CalendarIcon, ClockIcon, SizeIcon } from './NetworkIcons';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
@@ -13,6 +13,27 @@ import { useTranslation } from '../i18n';
 const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
     const { t } = useTranslation();
     const methodColor = METHOD_COLORS[item.method] ?? METHOD_COLORS.ALL;
+    const handleOpenUrl = (e) => {
+        e?.stopPropagation?.();
+        Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${item.url}`, [
+            { text: t('common.cancel') || 'Cancel', style: 'cancel' },
+            {
+                text: t('common.open') || 'Open',
+                onPress: () => {
+                    Linking.canOpenURL(item.url)
+                        .then(supported => {
+                        if (supported) {
+                            Linking.openURL(item.url);
+                        }
+                        else {
+                            Linking.openURL(item.url).catch(() => { });
+                        }
+                    })
+                        .catch(() => { });
+                },
+            },
+        ]);
+    };
     const isFailed = item.status === 0 || (item.status != null && item.status >= 400);
     const isLoading = item.status == null;
     const statusColor = getStatusColor(item.status);
@@ -38,10 +59,6 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             }).start();
         }
     }, [isNew]);
-    const path = getPath(item.url);
-    const baseUrl = getBaseUrl(item.url) || item.url;
-    const slug = path && path !== '/' ? path : item.url;
-    const showSlug = slug !== baseUrl && slug !== item.url;
     const triggeredAt = formatDateTime(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale onPress={onPress} style={[
@@ -52,7 +69,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             },
         ]}>
       <View style={styles.cardBody}>
-        {/* Row 1: Header (Checkbox, Serial, Method Badge, Base URL / Host with HTTPS, Status Pill) */}
+        {/* Row 1: Header (Checkbox, Serial, Method Badge, Client Tag, Status Pill) */}
         <View style={styles.cardHeaderRow}>
           <View style={styles.cardHeaderLeft}>
             <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
@@ -112,7 +129,82 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                 </Text>
               </View>)}
 
-            <HighlightText text={baseUrl || item.url} search={searchStr} style={styles.cardHostText} highlightStyle={styles.highlight} numberOfLines={1} ellipsizeMode="tail"/>
+            {/* Protocol / HTTPS Badge */}
+            <View style={[
+            styles.chip,
+            {
+                backgroundColor: item.url.toLowerCase().startsWith('https')
+                    ? '#ECFDF5'
+                    : '#FFFBEB',
+                borderColor: item.url.toLowerCase().startsWith('https')
+                    ? '#A7F3D0'
+                    : '#FDE68A',
+                paddingHorizontal: 4,
+                paddingVertical: 1,
+                borderRadius: 4,
+            },
+        ]}>
+              <Text style={[
+            styles.chipText,
+            {
+                fontFamily: AppFonts.interBold,
+                fontSize: 8,
+                color: item.url.toLowerCase().startsWith('https')
+                    ? '#059669'
+                    : '#D97706',
+            },
+        ]}>
+                {item.url.toLowerCase().startsWith('https') ? 'HTTPS' : 'HTTP'}
+              </Text>
+            </View>
+
+            {/* GraphQL Indicator */}
+            {(item.url.toLowerCase().includes('graphql') ||
+            item.client === 'apollo' ||
+            item.client === 'graphql') && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: '#FDF2F8',
+                    borderColor: '#FBCFE8',
+                    paddingHorizontal: 4,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <Text style={[
+                styles.chipText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8,
+                    color: '#DB2777',
+                },
+            ]}>
+                  GQL
+                </Text>
+              </View>)}
+
+            {/* In-Line Duration / Latency Pill */}
+            {item.duration != null && !isFailed && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: `${durationColor}12`,
+                    borderColor: `${durationColor}2E`,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <Text style={[
+                styles.chipText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: durationColor,
+                },
+            ]}>
+                  {item.duration}ms
+                </Text>
+              </View>)}
           </View>
 
           <View style={[
@@ -149,12 +241,12 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
           </View>
         </View>
 
-        {/* Row 2: Full URL Capsule Container */}
+        {/* Row 2: Full URL Capsule Container (Clickable with link prompt) */}
         <View style={styles.cardSlugBox}>
-          <View style={styles.slugLeft}>
-            <Text style={styles.slugTag}>URL</Text>
-            <HighlightText text={item.url} search={searchStr} style={styles.slugText} highlightStyle={styles.highlight} numberOfLines={2} ellipsizeMode="middle"/>
-          </View>
+          <Pressable onPress={handleOpenUrl} style={styles.slugLeft} hitSlop={6}>
+            <Text style={styles.slugTag}>URL ↗</Text>
+            <HighlightText text={item.url} search={searchStr} style={[styles.slugText, { color: AppColors.skyBlue, textDecorationLine: 'underline' }]} highlightStyle={styles.highlight} numberOfLines={2} ellipsizeMode="middle"/>
+          </Pressable>
 
           <View style={styles.slugRight}>
             {isJson && (<View style={[

package/dist/esm/components/NetworkIcons.js

@@ -362,15 +362,21 @@ export const ForwardChevronIcon = ({ color = AppColors.grayTextWeak, size = 14,
 export const BundleIcon = PackageIcon;
 export const LiveStateIcon = ({ color = AppColors.purple, size = 14, }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Circle cx="12" cy="12" r="3.5" stroke={color} strokeWidth="1.8" fill={`${color}22`}/>
-      <Circle cx="12" cy="12" r="1.5" fill={color}/>
+      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="1.8" strokeDasharray="3 3" opacity={0.6}/>
+      <Circle cx="12" cy="12" r="4.5" stroke={color} strokeWidth="1.8"/>
+      <Circle cx="12" cy="12" r="2" fill={color}/>
+      <Path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
     </Svg>);
 };
 export const TimelineIcon = ({ color = AppColors.purple, size = 14, }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
-      <Path d="M12 7.5v4.5l3 2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M6 3v18" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Circle cx="6" cy="6" r="2.5" stroke={color} strokeWidth="1.8" fill={`${color}25`}/>
+      <Path d="M6 12h5a3 3 0 0 0 3-3V6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Circle cx="14" cy="6" r="2.5" stroke={color} strokeWidth="1.8" fill={color}/>
+      <Circle cx="6" cy="18" r="2.5" stroke={color} strokeWidth="1.8" fill={color}/>
+      <Path d="M6 18h8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Circle cx="17" cy="18" r="2.5" stroke={color} strokeWidth="1.8" fill={`${color}25`}/>
     </Svg>);
 };
 export const RefreshCcwIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
@@ -380,15 +386,18 @@ export const RefreshCcwIcon = ({ color = AppColors.grayTextWeak, size = 14, }) =
 };
 export const StorageIcon = ({ color = AppColors.purple, size = 14, }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Ellipse cx="12" cy="6" rx="8" ry="2.8" stroke={color} strokeWidth="1.8"/>
-      <Path d="M20 12c0 1.55-3.58 2.8-8 2.8s-8-1.25-8-2.8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Path d="M4 6v12c0 1.55 3.58 2.8 8 2.8s8-1.25 8-2.8V6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Ellipse cx="12" cy="5" rx="8" ry="2.5" stroke={color} strokeWidth="1.8"/>
+      <Path d="M4 5v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5V5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Path d="M4 9.5v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5v-4.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Path d="M4 14v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5V14" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
     </Svg>);
 };
 export const MetadataIcon = ({ color = AppColors.purple, size = 14, }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
-      <Path d="M12 16v-4M12 8.2h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Rect x="3" y="3" width="18" height="18" rx="4" stroke={color} strokeWidth="1.8"/>
+      <Path d="M7 8h10M7 12h6M7 16h7" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Circle cx="16.5" cy="12" r="1.5" fill={color}/>
+      <Circle cx="16.5" cy="16" r="1.5" fill={color}/>
     </Svg>);
 };
 export const ReduxIcon = ({ color = AppColors.purple, size = 14, }) => {

package/dist/esm/components/Toast.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Toast: React.MemoExoticComponent<() => React.JSX.Element>;
+export default Toast;

package/dist/esm/components/Toast.js

@@ -0,0 +1,117 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Animated, StyleSheet, Text, View, Platform } from 'react-native';
+import { subscribeToast } from '../helpers/toast';
+import { CheckIcon } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+const Toast = React.memo(() => {
+    const [toastMessage, setToastMessage] = useState(null);
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const translateYAnim = useRef(new Animated.Value(20)).current;
+    const hideTimerRef = useRef(null);
+    useEffect(() => {
+        const unsubscribe = subscribeToast((message) => {
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+            }
+            setToastMessage(message);
+            Animated.parallel([
+                Animated.timing(opacityAnim, {
+                    toValue: 1,
+                    duration: 180,
+                    useNativeDriver: true,
+                }),
+                Animated.spring(translateYAnim, {
+                    toValue: 0,
+                    tension: 80,
+                    friction: 8,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            hideTimerRef.current = setTimeout(() => {
+                Animated.parallel([
+                    Animated.timing(opacityAnim, {
+                        toValue: 0,
+                        duration: 200,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(translateYAnim, {
+                        toValue: 20,
+                        duration: 200,
+                        useNativeDriver: true,
+                    }),
+                ]).start(() => {
+                    setToastMessage(null);
+                });
+            }, 2000);
+        });
+        return () => {
+            unsubscribe();
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+            }
+        };
+    }, [opacityAnim, translateYAnim]);
+    if (!toastMessage) {
+        return null;
+    }
+    return (<Animated.View pointerEvents="none" style={[
+            styles.toastContainer,
+            {
+                opacity: opacityAnim,
+                transform: [{ translateY: translateYAnim }],
+            },
+        ]}>
+      <View style={styles.toastCard}>
+        <View style={styles.iconCircle}>
+          <CheckIcon color={AppColors.white} size={11}/>
+        </View>
+        <Text style={styles.toastText} numberOfLines={2}>
+          {toastMessage}
+        </Text>
+      </View>
+    </Animated.View>);
+});
+const styles = StyleSheet.create({
+    toastContainer: {
+        position: 'absolute',
+        bottom: Platform.OS === 'ios' ? 44 : 28,
+        left: 20,
+        right: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 999999,
+    },
+    toastCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#0F172AEE', // dark slate glass
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 24,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 0.28,
+        shadowRadius: 10,
+        elevation: 8,
+        borderWidth: 1,
+        borderColor: '#33415588',
+        maxWidth: '90%',
+        gap: 9,
+    },
+    iconCircle: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        backgroundColor: AppColors.greenColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    toastText: {
+        color: AppColors.white,
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        letterSpacing: -0.1,
+    },
+});
+export default Toast;

package/dist/esm/components/TouchableScale.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 declare const TouchableScale: React.NamedExoticComponent<{
     onPress?: () => void;
+    onLongPress?: () => void;
     style?: any;
     children?: React.ReactNode;
     hitSlop?: any;

package/dist/esm/components/TouchableScale.js

@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Platform } from 'react-native';
-const TouchableScale = React.memo(function TouchableScale({ onPress, style, children, hitSlop, disabled, }) {
+const TouchableScale = React.memo(function TouchableScale({ onPress, onLongPress, style, children, hitSlop, disabled, }) {
     if (Platform.OS === 'android') {
-        return (<Pressable disabled={disabled} onPress={onPress} hitSlop={hitSlop} style={({ pressed }) => [
+        return (<Pressable disabled={disabled} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} style={({ pressed }) => [
                 style,
                 { opacity: pressed ? 0.75 : 1 },
             ]}>
@@ -38,7 +38,7 @@ const TouchableScale = React.memo(function TouchableScale({ onPress, style, chil
         flexShrink: flattenedStyle.flexShrink,
         gap: flattenedStyle.gap,
     };
-    return (<Pressable disabled={disabled} style={style} onPressIn={() => animatePress(true)} onPressOut={() => animatePress(false)} onPress={onPress} hitSlop={hitSlop}>
+    return (<Pressable disabled={disabled} style={style} onPressIn={() => animatePress(true)} onPressOut={() => animatePress(false)} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop}>
       <Animated.View style={[{ opacity, transform: [{ scale }] }, layoutStyle]}>
         {children}
       </Animated.View>

package/dist/esm/components/TreeNode.js

@@ -7,9 +7,19 @@ import { ChevronIcon, DocIcon } from './NetworkIcons';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
-const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, forceOpen, defaultExpandDepth, }) {
-    const [localOpen, setLocalOpen] = useState(forceOpen || level < (defaultExpandDepth ?? 1));
+const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, forceOpen, defaultExpandDepth = 1, }) {
+    const [localOpen, setLocalOpen] = useState(() => {
+        if (forceOpen !== undefined) {
+            return forceOpen;
+        }
+        return defaultExpandDepth !== undefined ? level < defaultExpandDepth : level < 1;
+    });
     const open = localOpen;
+    useEffect(() => {
+        if (forceOpen !== undefined) {
+            setLocalOpen(forceOpen);
+        }
+    }, [forceOpen]);
     const isObject = typeof data === 'object' && data !== null;
     const isArray = Array.isArray(data);
     // Declare all hooks at the top unconditionally (prevents "Rendered fewer hooks than expected" error)

package/dist/esm/constants/index.js

@@ -9,12 +9,12 @@ export const STATUS_FILTERS = [
     'Failed',
 ];
 export const METHOD_COLORS = {
-    ALL: AppColors.grayText,
-    GET: AppColors.purple,
-    POST: AppColors.greenColor,
-    PUT: AppColors.lightOrange,
-    PATCH: AppColors.offerPurple,
-    DELETE: AppColors.errorColor,
+    ALL: '#64748B', // Slate
+    GET: '#059669', // Emerald
+    POST: '#2563EB', // Royal Blue
+    PUT: '#D97706', // Amber Gold
+    PATCH: '#7C3AED', // Rich Violet
+    DELETE: '#DC2626', // Crimson Red
 };
 export const DOMAIN_COLORS = AppColors.domainColors;
 export const DURATION_FAST_MS = 200;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.28";
+export declare const LIB_VERSION = "1.1.31";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '1.1.28';
+export const LIB_VERSION = '1.1.31';

package/dist/esm/customHooks/reduxLogger.js

@@ -11,6 +11,7 @@
 //      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.
+import { parseStackLine } from '../helpers';
 let currentReduxState = null;
 const listeners = new Set();
 let globalReduxAutoRefresh = true;
@@ -63,7 +64,106 @@ function actionTypeOf(action) {
     }
     return 'UNKNOWN_ACTION';
 }
-function recordAction(action, prevState, nextState) {
+function detectActionOrigin(stack, actionType, actionObj) {
+    const stackLower = (stack || '').toLowerCase();
+    const typeLower = (actionType || '').toLowerCase();
+    // Explicit hint on action if developer tagged it
+    if (actionObj && actionObj.__origin) {
+        const raw = String(actionObj.__origin).toLowerCase();
+        if (raw.includes('saga'))
+            return { originType: 'saga' };
+        if (raw.includes('thunk'))
+            return { originType: 'thunk' };
+        if (raw.includes('ui'))
+            return { originType: 'ui' };
+    }
+    // 1. Saga Detection (Stack + Action naming conventions)
+    const isSaga = stackLower.includes('redux-saga') ||
+        stackLower.includes('runputeffect') ||
+        stackLower.includes('proc.js') ||
+        stackLower.includes('effects.js') ||
+        stackLower.includes('sagamiddleware') ||
+        stackLower.includes('saga.ts') ||
+        stackLower.includes('saga.js') ||
+        stackLower.includes('sagas') ||
+        typeLower.includes('saga') ||
+        typeLower.startsWith('saga/') ||
+        typeLower.startsWith('@saga/');
+    // 2. Thunk / RTK Query Detection
+    const isThunk = stackLower.includes('createasyncthunk') ||
+        stackLower.includes('redux-thunk') ||
+        stackLower.includes('rtk-query') ||
+        stackLower.includes('thunkmiddleware') ||
+        stackLower.includes('actioncreator') ||
+        typeLower.includes('thunk') ||
+        typeLower.endsWith('/pending') ||
+        typeLower.endsWith('/fulfilled') ||
+        typeLower.endsWith('/rejected');
+    // 3. Parse Stack Frames to find best application caller
+    const lines = (stack || '').split('\n').map(l => l.trim()).filter(Boolean);
+    let bestFrame = null;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Ignore logger / middleware lines inside inspector
+        if (line.includes('reduxLogger') ||
+            line.includes('inspectorReduxMiddleware') ||
+            line.includes('recordAction') ||
+            line.includes('redux.js') ||
+            line.includes('redux.cjs')) {
+            continue;
+        }
+        const parsed = parseStackLine(line, false);
+        if (parsed.frameType === 'app' || (!parsed.isRuntimeNoise && parsed.fileName !== 'Unknown')) {
+            bestFrame = parsed;
+            break;
+        }
+    }
+    if (!bestFrame && lines.length > 0) {
+        for (let i = 0; i < lines.length; i++) {
+            if (!lines[i].includes('reduxLogger') && !lines[i].includes('inspectorReduxMiddleware')) {
+                bestFrame = parseStackLine(lines[i], false);
+                break;
+            }
+        }
+    }
+    let originType = 'direct';
+    if (isSaga || (bestFrame && bestFrame.fileName?.toLowerCase().includes('saga'))) {
+        originType = 'saga';
+    }
+    else if (isThunk || (bestFrame && bestFrame.fileName?.toLowerCase().includes('thunk'))) {
+        originType = 'thunk';
+    }
+    else if (bestFrame &&
+        (bestFrame.fileName?.endsWith('.tsx') ||
+            bestFrame.functionName?.includes('onPress') ||
+            bestFrame.functionName?.includes('touchable') ||
+            bestFrame.functionName?.includes('Effect'))) {
+        originType = 'ui';
+    }
+    else if (stackLower.includes('listener') || stackLower.includes('subscribe')) {
+        originType = 'listener';
+    }
+    return {
+        originType,
+        caller: bestFrame?.copyableLocation || bestFrame?.raw || undefined,
+        callerFile: bestFrame?.fullPath || bestFrame?.fileName || undefined,
+        callerLine: bestFrame?.lineNumber ? Number(bestFrame.lineNumber) : undefined,
+        callerCol: bestFrame?.columnNumber ? Number(bestFrame.columnNumber) : undefined,
+    };
+}
+function extractSliceName(actionType, affectedSlices) {
+    if (affectedSlices && affectedSlices.length > 0) {
+        return affectedSlices[0];
+    }
+    // If Redux Toolkit action format: e.g. "users/fetchById" -> "users"
+    const match = actionType.match(/^([a-zA-Z0-9_\-]+)\//);
+    if (match && match[1] && !match[1].startsWith('@@')) {
+        return match[1];
+    }
+    return undefined;
+}
+function recordAction(action, prevState, nextState, rawStack) {
+    const stack = rawStack || new Error().stack || '';
     const type = actionTypeOf(action);
     const payload = action && typeof action === 'object' && action.payload !== undefined
         ? action.payload
@@ -71,13 +171,26 @@ function recordAction(action, prevState, nextState) {
     const now = Date.now();
     const timestamp = new Date(now).toLocaleTimeString();
     const affectedSlices = [];
+    const origin = detectActionOrigin(stack, type, action);
+    const sliceName = extractSliceName(type, 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, updatedAt: now };
+                lastActionForReducer[key] = {
+                    type,
+                    payload,
+                    timestamp,
+                    updatedAt: now,
+                    originType: origin.originType,
+                    callerFile: origin.callerFile,
+                    callerLine: origin.callerLine,
+                    callerCol: origin.callerCol,
+                    caller: origin.caller,
+                    stack,
+                };
                 affectedSlices.push(key);
             }
         });
@@ -91,6 +204,13 @@ function recordAction(action, prevState, nextState) {
         affectedSlices,
         prevState,
         nextState,
+        stack,
+        caller: origin.caller,
+        callerFile: origin.callerFile,
+        callerLine: origin.callerLine,
+        callerCol: origin.callerCol,
+        originType: origin.originType,
+        sliceName,
     });
     if (actionHistory.length > MAX_HISTORY) {
         actionHistory.length = MAX_HISTORY;
@@ -116,6 +236,7 @@ function recordAction(action, prevState, nextState) {
  */
 export const inspectorReduxMiddleware = (storeApi) => (next) => (action) => {
     middlewareAttached = true;
+    const capturedStack = new Error().stack || '';
     // 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') {
@@ -126,7 +247,7 @@ export const inspectorReduxMiddleware = (storeApi) => (next) => (action) => {
     const nextState = storeApi.getState();
     if (currentReduxState == null)
         currentReduxState = nextState;
-    recordAction(action, prevState, nextState);
+    recordAction(action, prevState, nextState, capturedStack);
     return result;
 };
 export const connectReduxStore = (store) => {
@@ -148,6 +269,7 @@ export const connectReduxStore = (store) => {
     const originalDispatch = store.dispatch.bind(store);
     let inWrappedDispatch = false;
     store.dispatch = (action) => {
+        const capturedStack = new Error().stack || '';
         if (middlewareAttached || typeof action === 'function') {
             // Middleware handles recording, or it's a thunk whose inner dispatches
             // will be picked up individually.
@@ -168,7 +290,7 @@ export const connectReduxStore = (store) => {
         finally {
             inWrappedDispatch = false;
         }
-        recordAction(action, prevState, store.getState());
+        recordAction(action, prevState, store.getState(), capturedStack);
         return result;
     };
     setReduxState(store.getState());
@@ -192,6 +314,7 @@ export const connectReduxStore = (store) => {
         }
         // 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);
+        const subStack = new Error().stack || '';
+        recordAction({ type: '@@inspector/EXTERNAL_STATE_CHANGE' }, prevState, nextState, subStack);
     });
 };

package/dist/esm/helpers/index.d.ts

@@ -1,6 +1,7 @@
 import { NetworkLog, RouteInfo, DiffResult, JsonContent, StackFrameType } from '../types';
 export declare const getDomainColor: (domain: string) => string;
 export declare const formatDateTime: (timestamp: number) => string;
+export declare const formatTimestamp: (timestamp: number) => string;
 export declare const getStatusColor: (status: number | null) => string;
 export declare const getDurationColor: (duration: number | null) => string;
 export declare const getSize: (data: unknown) => string;
@@ -44,6 +45,7 @@ export interface ParsedStackFrame {
     frameType: StackFrameType | 'app' | 'dependency' | 'runtime' | 'native';
     isUserCode: boolean;
     isRuntimeNoise: boolean;
+    rawFilePath?: string;
     lineNumber?: string;
     columnNumber?: string;
     isOrigin?: boolean;
@@ -51,6 +53,8 @@ export interface ParsedStackFrame {
 }
 /** Parses a stack trace line to extract function name, file name, extension (.tsx/.jsx/.ts), line, and column numbers */
 export declare const parseStackLine: (rawLine: string, isOrigin?: boolean) => ParsedStackFrame;
+/** Opens a file and line number directly in VS Code / system editor */
+export declare const openInVSCode: (filePath: string, lineNumber?: string | number, columnNumber?: string | number) => void;
 export declare const ANALYTICS_EVENT_PALETTE: string[];
 export declare const getEventColor: (name: string) => string;
 export { getEventCategory, registerGAPlugin, type GAEventCategory, type GAPlugin, } from './gaAnalyticsRegistry';