react-native-inapp-inspector 1.1.28 → 1.1.31

package/dist/esm/components/Inspector/LogDetail.js

@@ -6,11 +6,11 @@ import HighlightText from '../HighlightText';
 import JsonViewer from '../JsonViewer';
 import CopyButton from '../CopyButton';
 import SegmentedTabs from '../SegmentedTabs';
-import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, DocIcon, } from '../NetworkIcons';
+import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, DocIcon, ExternalLinkIcon, } from '../NetworkIcons';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import styles from '../../styles';
-import { getJsonContent, getSize, formatDateTime, parseStackLine, } from '../../helpers';
+import { getJsonContent, getSize, formatDateTime, parseStackLine, openInVSCode, } from '../../helpers';
 const getRelativeTime = (timestamp) => {
     const now = Date.now();
     const diff = now - timestamp;
@@ -80,27 +80,60 @@ const LogDetail = React.memo(() => {
         return null;
     const isDark = AppColors.primaryLight !== AppColors.white;
     const getTypeColors = () => {
-        if (selectedLog.type === 'error') {
+        const type = (selectedLog.type || 'log').toLowerCase();
+        const method = (selectedLog.sourceMethod || type).toLowerCase();
+        if (type === 'error' || method === 'error') {
             return {
-                border: AppColors.errorColor,
-                badgeBg: `${AppColors.errorColor}15`,
-                badgeText: AppColors.errorColor,
+                border: AppColors.red500,
+                badgeBg: AppColors.red100,
+                badgeText: AppColors.redErrorText,
                 label: 'ERROR',
+                methodBorder: AppColors.errorBorder,
+                methodBg: AppColors.red100,
+                methodText: AppColors.redErrorText,
             };
         }
-        if (selectedLog.type === 'warn') {
+        if (type === 'warn' || method === 'warn') {
             return {
-                border: AppColors.lightOrange,
-                badgeBg: `${AppColors.lightOrange}15`,
-                badgeText: AppColors.darkOrange || AppColors.lightOrange,
+                border: AppColors.amber500,
+                badgeBg: AppColors.amber100,
+                badgeText: AppColors.amber800Warm,
                 label: 'WARN',
+                methodBorder: AppColors.amber200,
+                methodBg: AppColors.amber100,
+                methodText: AppColors.amber800Warm,
+            };
+        }
+        if (type === 'debug' || method === 'debug') {
+            return {
+                border: AppColors.violet500,
+                badgeBg: AppColors.purple100,
+                badgeText: AppColors.violet600,
+                label: 'DEBUG',
+                methodBorder: AppColors.purple200,
+                methodBg: AppColors.purple100,
+                methodText: AppColors.violet600,
+            };
+        }
+        if (type === 'info' || method === 'info') {
+            return {
+                border: AppColors.sky500,
+                badgeBg: AppColors.sky100,
+                badgeText: AppColors.sky600,
+                label: 'INFO',
+                methodBorder: AppColors.sky400,
+                methodBg: AppColors.sky100,
+                methodText: AppColors.sky600,
             };
         }
         return {
-            border: AppColors.purple,
-            badgeBg: `${AppColors.purple}15`,
-            badgeText: AppColors.purple,
-            label: 'INFO',
+            border: AppColors.indigo500,
+            badgeBg: AppColors.indigo50,
+            badgeText: AppColors.indigo600Alt,
+            label: 'LOG',
+            methodBorder: AppColors.indigo400,
+            methodBg: AppColors.indigo50,
+            methodText: AppColors.indigo600Alt,
         };
     };
     const typeColors = getTypeColors();
@@ -269,16 +302,18 @@ const LogDetail = React.memo(() => {
             : originFrame?.fileName || t('console.consoleLog')}
               </Text>
 
-              {originFrame?.fileName && (<View style={[
+              {originFrame?.fileName && (<Pressable onPress={() => openInVSCode(originFrame.rawFilePath ||
+                originFrame.fullPath ||
+                originFrame.fileName, originFrame.lineNumber, originFrame.columnNumber)} hitSlop={8} style={[
                 styles.metaChip,
                 {
-                    backgroundColor: `${AppColors.brandPurple}12`,
-                    borderColor: `${AppColors.brandPurple}30`,
+                    backgroundColor: `${AppColors.brandPurple}15`,
+                    borderColor: `${AppColors.brandPurple}40`,
                     paddingHorizontal: 7,
                     paddingVertical: 2,
                 },
             ]}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexWrap: 'wrap', flexShrink: 1 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flexShrink: 1 }}>
                     <DocIcon color={AppColors.brandPurple} size={10}/>
                     <Text style={[
                 styles.metaChipText,
@@ -288,8 +323,9 @@ const LogDetail = React.memo(() => {
                       {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
                       {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
                     </Text>
+                    <ExternalLinkIcon color={AppColors.brandPurple} size={9}/>
                   </View>
-                </View>)}
+                </Pressable>)}
             </View>
 
             {/* Enhanced metadata metrics row */}

package/dist/esm/components/Inspector/MainScreen.js

@@ -18,6 +18,7 @@ import PerformanceTab from './PerformanceTab';
 import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
 import SettingsPanel from './SettingsPanel';
+import Toast from '../Toast';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
@@ -115,6 +116,9 @@ const MainScreen = () => {
                 ]}>
                   <SettingsPanel />
                 </View>)}
+
+              {/* Bottom floating toast notification */}
+              <Toast />
             </View>
           </View>
         </ErrorBoundary>)}

package/dist/esm/components/Inspector/NetworkDetail.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from '../../i18n';
-import { Image, Linking, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { Alert, Image, Linking, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import SegmentedTabs from '../SegmentedTabs';
@@ -20,6 +20,26 @@ import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadI
 const NetworkDetail = React.memo(() => {
     const { t } = useTranslation();
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = useInspector();
+    const handleOpenUrl = () => {
+        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${detailDisplayUrl}`, [
+            { text: t('common.cancel') || 'Cancel', style: 'cancel' },
+            {
+                text: t('common.open') || 'Open',
+                onPress: () => {
+                    Linking.canOpenURL(detailDisplayUrl)
+                        .then(supported => {
+                        if (supported) {
+                            Linking.openURL(detailDisplayUrl);
+                        }
+                        else {
+                            Linking.openURL(detailDisplayUrl).catch(() => { });
+                        }
+                    })
+                        .catch(() => { });
+                },
+            },
+        ]);
+    };
     if (!selected)
         return null;
     return (<View style={{ flex: 1 }}>
@@ -227,7 +247,7 @@ const NetworkDetail = React.memo(() => {
                   </View>
 
                   <View style={styles.detailInfoRight}>
-                    <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={() => Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                    <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
                       <ExternalLinkIcon color={AppColors.sky600} size={14}/>
                     </TouchableScale>
                     <CopyButton value={getFetchCommand(selected)} label="fetch()" iconType="fetch"/>
@@ -245,7 +265,7 @@ const NetworkDetail = React.memo(() => {
                     padding: 10,
                     marginTop: 8,
                     gap: 6,
-                }} onPress={() => Linking.openURL(detailDisplayUrl)}>
+                }} onPress={handleOpenUrl}>
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -428,7 +448,7 @@ const NetworkDetail = React.memo(() => {
                 if (!reqExpanded && !showReqDiff)
                     setReqExpanded(true);
             }}/>
-                {showReqDiff ? (<DiffViewer oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer data={selected.request} search={detailSearch} forceOpen/>) : (<View style={styles.codeBlock}>
+                {showReqDiff ? (<DiffViewer oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer data={selected.request} search={detailSearch}/>) : (<View style={styles.codeBlock}>
                     <Text style={[
                     styles.codeText,
                     { color: AppColors.grayTextWeak },
@@ -447,26 +467,6 @@ const NetworkDetail = React.memo(() => {
                     <ClearIcon color={AppColors.grayTextWeak} size={14}/>
                   </Pressable>)}
               </View>
-              {selected.response != null && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 10,
-                    height: 34,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.purple}30`,
-                    backgroundColor: `${AppColors.purple}10`,
-                }}>
-                  <SizeIcon color={AppColors.purple} size={12}/>
-                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors.purple,
-                }}>
-                    {getSize(selected.response)}
-                  </Text>
-                </View>)}
             </View>
 
             <View style={styles.sectionContainer}>
@@ -475,7 +475,7 @@ const NetworkDetail = React.memo(() => {
                 if (!resExpanded && !showResDiff)
                     setResExpanded(true);
             }}/>
-              {showResDiff ? (<DiffViewer oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer data={selected.response} search={detailSearch} forceOpen wrap/>) : (<View style={styles.codeBlock}>
+              {showResDiff ? (<DiffViewer oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer data={selected.response} search={detailSearch} wrap/>) : (<View style={styles.codeBlock}>
                   <Text style={[
                     styles.codeText,
                     { color: AppColors.grayTextWeak },

package/dist/esm/components/Inspector/NetworkTab.js

@@ -67,7 +67,10 @@ const NetworkTab = React.memo(() => {
           </AnimatedEntrance>);
         }
         const { log, isLast, color } = item;
-        return (<AnimatedEntrance index={index} distance={8} style={styles.treeNodeRow}>
+        return (<AnimatedEntrance index={index} distance={8} style={[
+                styles.treeNodeRow,
+                isLast && styles.treeNodeRowLast,
+            ]}>
           <View style={styles.treeLines}>
             <View style={[
                 styles.modernTreeLine,

package/dist/esm/components/Inspector/ReduxDetail.js

@@ -10,11 +10,55 @@ import TouchableScale from '../TouchableScale';
 import HighlightText from '../HighlightText';
 import AnimatedEntrance from '../AnimatedEntrance';
 import { getActionHistory } from '../../customHooks/reduxLogger';
-import { getSize } from '../../helpers';
+import { getSize, openInVSCode, parseStackLine } from '../../helpers';
 import { getCustomStorage } from '../../helpers/settingsStore';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { SearchIcon, ClearIcon, ClockIcon, TrashIcon, ForwardChevronIcon, LiveStateIcon, TimelineIcon, StorageIcon, MetadataIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, ClockIcon, LayersIcon, TrashIcon, ForwardChevronIcon, LiveStateIcon, TimelineIcon, StorageIcon, MetadataIcon, BoltIcon, ExternalLinkIcon, } from '../NetworkIcons';
+const getOriginBadge = (originType) => {
+    switch (originType) {
+        case 'saga':
+            return {
+                label: 'SAGA',
+                icon: '⚡',
+                bg: AppColors.purple100,
+                text: AppColors.brandPurple,
+                border: AppColors.purple200,
+            };
+        case 'thunk':
+            return {
+                label: 'THUNK',
+                icon: '⚛️',
+                bg: AppColors.amber100,
+                text: AppColors.amber800Warm,
+                border: AppColors.amber200,
+            };
+        case 'ui':
+            return {
+                label: 'UI',
+                icon: '📱',
+                bg: AppColors.sky100,
+                text: AppColors.sky600,
+                border: AppColors.sky400,
+            };
+        case 'listener':
+            return {
+                label: 'LISTENER',
+                icon: '👂',
+                bg: AppColors.teal100,
+                text: AppColors.teal700,
+                border: AppColors.teal400,
+            };
+        default:
+            return {
+                label: 'DIRECT',
+                icon: '⚡',
+                bg: AppColors.slate100,
+                text: AppColors.slate700,
+                border: AppColors.slate200,
+            };
+    }
+};
 const ReduxDetail = React.memo(() => {
     const { t } = useTranslation();
     const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, setSelectedReduxAction, } = useInspector();
@@ -136,29 +180,46 @@ const ReduxDetail = React.memo(() => {
                 : 0;
         const lastAction = reduxLastActionMap[selectedReduxSlice];
         const sliceTabs = [
-            { key: 'live', label: 'Live State', icon: () => <LiveStateIcon color={AppColors.purple} size={11}/> },
-            { key: 'timeline', label: `Timeline (${sliceActions.length})`, icon: () => <TimelineIcon color={AppColors.purple} size={11}/> },
-            { key: 'persisted', label: isPersisted ? 'Persisted' : 'Storage', icon: () => <StorageIcon color={AppColors.purple} size={11}/> },
-            { key: 'metadata', label: 'Metadata', icon: () => <MetadataIcon color={AppColors.purple} size={11}/> },
+            {
+                key: 'live',
+                label: t('redux.liveState'),
+                icon: (isActive) => (<LiveStateIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'timeline',
+                label: `${t('redux.timeline')} (${sliceActions.length})`,
+                icon: (isActive) => (<TimelineIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'persisted',
+                label: isPersisted ? t('redux.persisted') : t('redux.storage'),
+                icon: (isActive) => (<StorageIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'metadata',
+                label: t('redux.metadata'),
+                icon: (isActive) => (<MetadataIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
+            },
         ];
         return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
         {/* Info Header Bar */}
         <View style={reduxDetailStyles.infoBar}>
           <View style={reduxDetailStyles.infoTopRow}>
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap', flex: 1 }}>
-              <View style={[reduxDetailStyles.methodBadge, { backgroundColor: AppColors.purple }]}>
-                <Text style={reduxDetailStyles.methodBadgeText}>SLICE</Text>
+              <View style={[reduxDetailStyles.methodBadge, { backgroundColor: AppColors.indigo600Alt }]}>
+                <Text style={reduxDetailStyles.methodBadgeText}>{t('redux.slice')}</Text>
               </View>
               <Text style={reduxDetailStyles.sliceNameText}>
                 {selectedReduxSlice}
               </Text>
               {isPersisted ? (<View style={reduxDetailStyles.persistedChip}>
-                  <Text style={reduxDetailStyles.persistedChipText}>PERSISTED</Text>
+                  <StorageIcon color={AppColors.emerald700} size={10}/>
+                  <Text style={reduxDetailStyles.persistedChipText}>{t('redux.persisted').toUpperCase()}</Text>
                 </View>) : (<View style={reduxDetailStyles.inMemoryChip}>
-                  <Text style={reduxDetailStyles.inMemoryChipText}>IN-MEMORY</Text>
+                  <Text style={reduxDetailStyles.inMemoryChipText}>{t('redux.inMemory').toUpperCase()}</Text>
                 </View>)}
               {lastAction?.timestamp && (<View style={reduxDetailStyles.timePill}>
-                  <ClockIcon color={AppColors.purple} size={10}/>
+                  <ClockIcon color={AppColors.violet600} size={10}/>
                   <Text style={reduxDetailStyles.timeText}>
                     {lastAction.timestamp}
                   </Text>
@@ -166,26 +227,29 @@ const ReduxDetail = React.memo(() => {
             </View>
 
             {/* Copy Button */}
-            <CopyButton value={() => (sliceTab === 'live' ? sliceData : persistedData)} label="Slice JSON"/>
+            <CopyButton value={() => (sliceTab === 'live' ? sliceData : persistedData)} label={t('redux.sliceJson')}/>
           </View>
 
           {/* Sub Stats Row */}
           <View style={reduxDetailStyles.subStatsRow}>
-            <View style={reduxDetailStyles.statPill}>
-              <Text style={reduxDetailStyles.statLabel}>Root Keys:</Text>
-              <Text style={reduxDetailStyles.statValue}>{fieldsCount}</Text>
+            <View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors.indigo50, borderColor: AppColors.indigo400 }]}>
+              <LayersIcon color={AppColors.indigo600Alt} size={11}/>
+              <Text style={[reduxDetailStyles.statLabel, { color: AppColors.indigo600Alt }]}>{t('redux.keys')}:</Text>
+              <Text style={[reduxDetailStyles.statValue, { color: AppColors.indigo600Alt }]}>{fieldsCount}</Text>
             </View>
-            <View style={reduxDetailStyles.statPill}>
-              <Text style={reduxDetailStyles.statLabel}>Size:</Text>
-              <Text style={reduxDetailStyles.statValue}>{getSize(sliceData)}</Text>
+            <View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors.sky100, borderColor: AppColors.sky400 }]}>
+              <Text style={[reduxDetailStyles.statLabel, { color: AppColors.sky600 }]}>{t('redux.size')}:</Text>
+              <Text style={[reduxDetailStyles.statValue, { color: AppColors.sky600 }]}>{getSize(sliceData)}</Text>
             </View>
-            <View style={reduxDetailStyles.statPill}>
-              <Text style={reduxDetailStyles.statLabel}>Timeline:</Text>
-              <Text style={reduxDetailStyles.statValue}>{sliceActions.length} actions</Text>
+            <View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors.purple100, borderColor: AppColors.purple200 }]}>
+              <TimelineIcon color={AppColors.violet600} size={11}/>
+              <Text style={[reduxDetailStyles.statLabel, { color: AppColors.brandPurple }]}>{t('redux.timeline')}:</Text>
+              <Text style={[reduxDetailStyles.statValue, { color: AppColors.brandPurple }]}>{sliceActions.length}</Text>
             </View>
-            {lastAction && (<View style={[reduxDetailStyles.statPill, { flex: 1, minWidth: 140 }]}>
-                <Text style={reduxDetailStyles.statLabel}>Last Action:</Text>
-                <Text style={reduxDetailStyles.statValue} numberOfLines={1}>
+            {lastAction && (<View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors.amber100, borderColor: AppColors.amber200, flex: 1, minWidth: 140 }]}>
+                <BoltIcon color={AppColors.amber800Warm} size={11}/>
+                <Text style={[reduxDetailStyles.statLabel, { color: AppColors.amber800Warm }]}>{t('redux.last')}:</Text>
+                <Text style={[reduxDetailStyles.statValue, { color: AppColors.amber800Warm }]} numberOfLines={1}>
                   {lastAction.type}
                 </Text>
               </View>)}
@@ -212,15 +276,45 @@ const ReduxDetail = React.memo(() => {
                 </Text>
               </View>) : (sliceActions.map((action, aIdx) => {
                     const isExpanded = expandedActionId === action.id;
+                    const originMeta = getOriginBadge(action.originType);
+                    const callerBasename = action.callerFile
+                        ? action.callerFile.split('/').pop()
+                        : null;
                     return (<AnimatedEntrance key={action.id} index={aIdx} distance={6}>
                     <TouchableScale onPress={() => setExpandedActionId(isExpanded ? null : action.id)} style={reduxDetailStyles.timelineCard}>
                       <View style={reduxDetailStyles.timelineHeader}>
-                        <View style={reduxDetailStyles.actionBadge}>
-                          <Text style={reduxDetailStyles.actionBadgeText}>
-                            #{action.id}
-                          </Text>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
+                          <View style={reduxDetailStyles.actionBadge}>
+                            <Text style={reduxDetailStyles.actionBadgeText}>
+                              #{action.id}
+                            </Text>
+                          </View>
+                          {/* Origin Badge */}
+                          <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 3,
+                            backgroundColor: originMeta.bg,
+                            paddingHorizontal: 6,
+                            paddingVertical: 2,
+                            borderRadius: 4,
+                            borderWidth: 1,
+                            borderColor: originMeta.border,
+                        }}>
+                            <Text style={{ fontSize: 9 }}>{originMeta.icon}</Text>
+                            <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 8.5,
+                            color: originMeta.text,
+                            letterSpacing: 0.3,
+                        }}>
+                              {originMeta.label}
+                            </Text>
+                          </View>
+
+                          <HighlightText text={action.type} search={detailSearch} style={reduxDetailStyles.actionTitle} highlightStyle={reduxDetailStyles.highlight}/>
                         </View>
-                        <HighlightText text={action.type} search={detailSearch} style={reduxDetailStyles.actionTitle} highlightStyle={reduxDetailStyles.highlight}/>
+
                         <View style={reduxDetailStyles.timePill}>
                           <ClockIcon color={AppColors.purple} size={10}/>
                           <Text style={reduxDetailStyles.timeText}>
@@ -229,22 +323,120 @@ const ReduxDetail = React.memo(() => {
                         </View>
                       </View>
 
-                      {/* Expanded Payload & Diff Viewer */}
+                      {/* Trigger caller preview row */}
+                      {action.callerFile && (<View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                marginTop: 5,
+                                marginBottom: 2,
+                                paddingHorizontal: 7,
+                                paddingVertical: 3,
+                                backgroundColor: AppColors.grayBackground,
+                                borderRadius: 5,
+                                borderWidth: 1,
+                                borderColor: AppColors.dividerColor,
+                            }}>
+                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flex: 1, minWidth: 0 }}>
+                            <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 9.5, color: AppColors.grayTextWeak }}>
+                              {t('redux.triggeredFrom')}
+                            </Text>
+                            <Text style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 9.5,
+                                color: AppColors.sky600,
+                            }} numberOfLines={1}>
+                              {callerBasename}:{action.callerLine || 1}
+                            </Text>
+                          </View>
+
+                          <Pressable onPress={() => openInVSCode(action.callerFile, action.callerLine, action.callerCol)} hitSlop={8} style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 3,
+                                backgroundColor: AppColors.sky100,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
+                                borderRadius: 3,
+                            }}>
+                            <ExternalLinkIcon color={AppColors.sky600} size={9}/>
+                            <Text style={{ fontFamily: AppFonts.interBold, fontSize: 8.5, color: AppColors.sky600 }}>
+                              {t('redux.openInEditor')}
+                            </Text>
+                          </Pressable>
+                        </View>)}
+
+                      {/* Expanded Payload, Diff Viewer & Call Stack */}
                       {isExpanded ? (<View style={reduxDetailStyles.expandedContent}>
+                          {/* Call Stack Trace Box */}
+                          {action.stack ? (<View style={{ marginBottom: 10 }}>
+                              <Text style={reduxDetailStyles.expandedSectionTitle}>
+                                {t('redux.callStack')}:
+                              </Text>
+                              <View style={{
+                                    backgroundColor: AppColors.grayBackground,
+                                    borderRadius: 8,
+                                    padding: 8,
+                                    borderWidth: 1,
+                                    borderColor: AppColors.dividerColor,
+                                    gap: 4,
+                                }}>
+                                {action.stack
+                                    .split('\n')
+                                    .map(l => l.trim())
+                                    .filter(l => l.length > 0 && !l.includes('reduxLogger') && !l.includes('inspectorReduxMiddleware'))
+                                    .slice(0, 8)
+                                    .map((frameLine, fIdx) => {
+                                    const parsed = parseStackLine(frameLine, fIdx === 0);
+                                    const isApp = parsed.frameType === 'app';
+                                    return (<Pressable key={fIdx} onPress={() => {
+                                            if (parsed.fileName !== 'Unknown') {
+                                                openInVSCode(parsed.fullPath || parsed.fileName, parsed.lineNumber, parsed.columnNumber);
+                                            }
+                                        }} style={{
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                            paddingVertical: 2.5,
+                                            borderBottomWidth: fIdx < 7 ? 0.5 : 0,
+                                            borderBottomColor: AppColors.dividerColor,
+                                        }}>
+                                        <View style={{ flex: 1, minWidth: 0 }}>
+                                          <Text style={{
+                                            fontFamily: isApp ? AppFonts.interBold : AppFonts.interRegular,
+                                            fontSize: 9.5,
+                                            color: isApp ? AppColors.primaryBlack : AppColors.grayTextWeak,
+                                        }} numberOfLines={1}>
+                                            {parsed.functionName || 'anonymous'}
+                                          </Text>
+                                          <Text style={{
+                                            fontFamily: AppFonts.interRegular,
+                                            fontSize: 8.5,
+                                            color: isApp ? AppColors.sky600 : AppColors.grayTextWeak,
+                                        }} numberOfLines={1}>
+                                            {parsed.fileName}:{parsed.lineNumber || 1}:{parsed.columnNumber || 1}
+                                          </Text>
+                                        </View>
+                                        {isApp && (<ExternalLinkIcon color={AppColors.sky600} size={10}/>)}
+                                      </Pressable>);
+                                })}
+                              </View>
+                            </View>) : null}
+
                           {action.payload !== undefined && (<View style={{ marginBottom: 10 }}>
                               <Text style={reduxDetailStyles.expandedSectionTitle}>
-                                Action Payload:
+                                {t('redux.actionPayload')}
                               </Text>
                               <JsonViewer data={action.payload} search={detailSearch} forceOpen={true}/>
                             </View>)}
 
                           <Text style={reduxDetailStyles.expandedSectionTitle}>
-                            State Changes (Diff):
+                            {t('redux.stateChangesDiff')}
                           </Text>
                           <DiffViewer oldData={action.prevState?.[selectedReduxSlice] || {}} newData={action.nextState?.[selectedReduxSlice] || {}} forceOpen={true}/>
                         </View>) : (<View style={reduxDetailStyles.collapsedPrompt}>
                           <Text style={reduxDetailStyles.collapsedPromptText}>
-                            Tap to inspect action payload & diff changes
+                            {t('redux.tapToInspectAction')}
                           </Text>
                           <ForwardChevronIcon color={AppColors.grayTextWeak} size={12}/>
                         </View>)}
@@ -327,12 +519,15 @@ const reduxDetailStyles = StyleSheet.create({
         color: AppColors.primaryBlack,
     },
     persistedChip: {
-        backgroundColor: '#D1FAE5',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3.5,
+        backgroundColor: '#ECFDF5',
         paddingHorizontal: 6,
         paddingVertical: 2,
         borderRadius: 4,
         borderWidth: 1,
-        borderColor: AppColors.emeraldBorder,
+        borderColor: '#A7F3D0',
     },
     persistedChipText: {
         fontFamily: AppFonts.interBold,
@@ -340,22 +535,22 @@ const reduxDetailStyles = StyleSheet.create({
         color: '#047857',
     },
     inMemoryChip: {
-        backgroundColor: '#F3E8FF',
+        backgroundColor: '#EEF2FF',
         paddingHorizontal: 6,
         paddingVertical: 2,
         borderRadius: 4,
         borderWidth: 1,
-        borderColor: '#E9D5FF',
+        borderColor: '#C7D2FE',
     },
     inMemoryChipText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9,
-        color: '#7E22CE',
+        color: '#4338CA',
     },
     subStatsRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 8,
+        gap: 6,
         flexWrap: 'wrap',
     },
     statPill: {
@@ -363,20 +558,20 @@ const reduxDetailStyles = StyleSheet.create({
         alignItems: 'center',
         gap: 4,
         backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
+        paddingHorizontal: 7,
+        paddingVertical: 3.5,
         borderRadius: 6,
         borderWidth: 1,
         borderColor: AppColors.dividerColor,
     },
     statLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
         color: AppColors.grayTextWeak,
     },
     statValue: {
         fontFamily: AppFonts.interBold,
-        fontSize: 11,
+        fontSize: 10.5,
         color: AppColors.primaryBlack,
     },
     searchContainer: {