react-native-inapp-inspector 1.1.28 → 1.1.31

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

@@ -118,27 +118,60 @@ const LogDetail = react_1.default.memo(() => {
         return null;
     const isDark = AppColors_1.AppColors.primaryLight !== AppColors_1.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_1.AppColors.errorColor,
-                badgeBg: `${AppColors_1.AppColors.errorColor}15`,
-                badgeText: AppColors_1.AppColors.errorColor,
+                border: AppColors_1.AppColors.red500,
+                badgeBg: AppColors_1.AppColors.red100,
+                badgeText: AppColors_1.AppColors.redErrorText,
                 label: 'ERROR',
+                methodBorder: AppColors_1.AppColors.errorBorder,
+                methodBg: AppColors_1.AppColors.red100,
+                methodText: AppColors_1.AppColors.redErrorText,
             };
         }
-        if (selectedLog.type === 'warn') {
+        if (type === 'warn' || method === 'warn') {
             return {
-                border: AppColors_1.AppColors.lightOrange,
-                badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
-                badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange,
+                border: AppColors_1.AppColors.amber500,
+                badgeBg: AppColors_1.AppColors.amber100,
+                badgeText: AppColors_1.AppColors.amber800Warm,
                 label: 'WARN',
+                methodBorder: AppColors_1.AppColors.amber200,
+                methodBg: AppColors_1.AppColors.amber100,
+                methodText: AppColors_1.AppColors.amber800Warm,
+            };
+        }
+        if (type === 'debug' || method === 'debug') {
+            return {
+                border: AppColors_1.AppColors.violet500,
+                badgeBg: AppColors_1.AppColors.purple100,
+                badgeText: AppColors_1.AppColors.violet600,
+                label: 'DEBUG',
+                methodBorder: AppColors_1.AppColors.purple200,
+                methodBg: AppColors_1.AppColors.purple100,
+                methodText: AppColors_1.AppColors.violet600,
+            };
+        }
+        if (type === 'info' || method === 'info') {
+            return {
+                border: AppColors_1.AppColors.sky500,
+                badgeBg: AppColors_1.AppColors.sky100,
+                badgeText: AppColors_1.AppColors.sky600,
+                label: 'INFO',
+                methodBorder: AppColors_1.AppColors.sky400,
+                methodBg: AppColors_1.AppColors.sky100,
+                methodText: AppColors_1.AppColors.sky600,
             };
         }
         return {
-            border: AppColors_1.AppColors.purple,
-            badgeBg: `${AppColors_1.AppColors.purple}15`,
-            badgeText: AppColors_1.AppColors.purple,
-            label: 'INFO',
+            border: AppColors_1.AppColors.indigo500,
+            badgeBg: AppColors_1.AppColors.indigo50,
+            badgeText: AppColors_1.AppColors.indigo600Alt,
+            label: 'LOG',
+            methodBorder: AppColors_1.AppColors.indigo400,
+            methodBg: AppColors_1.AppColors.indigo50,
+            methodText: AppColors_1.AppColors.indigo600Alt,
         };
     };
     const typeColors = getTypeColors();
@@ -307,16 +340,18 @@ const LogDetail = react_1.default.memo(() => {
             : originFrame?.fileName || t('console.consoleLog')}
               </react_native_1.Text>
 
-              {originFrame?.fileName && (<react_native_1.View style={[
+              {originFrame?.fileName && (<react_native_1.Pressable onPress={() => (0, helpers_1.openInVSCode)(originFrame.rawFilePath ||
+                originFrame.fullPath ||
+                originFrame.fileName, originFrame.lineNumber, originFrame.columnNumber)} hitSlop={8} style={[
                 styles_1.default.metaChip,
                 {
-                    backgroundColor: `${AppColors_1.AppColors.brandPurple}12`,
-                    borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
+                    borderColor: `${AppColors_1.AppColors.brandPurple}40`,
                     paddingHorizontal: 7,
                     paddingVertical: 2,
                 },
             ]}>
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexWrap: 'wrap', flexShrink: 1 }}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flexShrink: 1 }}>
                     <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
                     <react_native_1.Text style={[
                 styles_1.default.metaChipText,
@@ -326,8 +361,9 @@ const LogDetail = react_1.default.memo(() => {
                       {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
                       {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
                     </react_native_1.Text>
+                    <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.brandPurple} size={9}/>
                   </react_native_1.View>
-                </react_native_1.View>)}
+                </react_native_1.Pressable>)}
             </react_native_1.View>
 
             {/* Enhanced metadata metrics row */}

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

@@ -56,6 +56,7 @@ const PerformanceTab_1 = __importDefault(require("./PerformanceTab"));
 const CrashTab_1 = __importDefault(require("./CrashTab"));
 const CrashDetail_1 = __importDefault(require("./CrashDetail"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
+const Toast_1 = __importDefault(require("../Toast"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
@@ -153,6 +154,9 @@ const MainScreen = () => {
                 ]}>
                   <SettingsPanel_1.default />
                 </react_native_1.View>)}
+
+              {/* Bottom floating toast notification */}
+              <Toast_1.default />
             </react_native_1.View>
           </react_native_1.View>
         </ErrorBoundary_1.default>)}

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

@@ -25,6 +25,26 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const NetworkDetail = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = (0, InspectorContext_1.useInspector)();
+    const handleOpenUrl = () => {
+        react_native_1.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: () => {
+                    react_native_1.Linking.canOpenURL(detailDisplayUrl)
+                        .then(supported => {
+                        if (supported) {
+                            react_native_1.Linking.openURL(detailDisplayUrl);
+                        }
+                        else {
+                            react_native_1.Linking.openURL(detailDisplayUrl).catch(() => { });
+                        }
+                    })
+                        .catch(() => { });
+                },
+            },
+        ]);
+    };
     if (!selected)
         return null;
     return (<react_native_1.View style={{ flex: 1 }}>
@@ -232,7 +252,7 @@ const NetworkDetail = react_1.default.memo(() => {
                   </react_native_1.View>
 
                   <react_native_1.View style={styles_1.default.detailInfoRight}>
-                    <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                    <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
                       <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={14}/>
                     </TouchableScale_1.default>
                     <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
@@ -250,7 +270,7 @@ const NetworkDetail = react_1.default.memo(() => {
                     padding: 10,
                     marginTop: 8,
                     gap: 6,
-                }} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
+                }} onPress={handleOpenUrl}>
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -433,7 +453,7 @@ const NetworkDetail = react_1.default.memo(() => {
                 if (!reqExpanded && !showReqDiff)
                     setReqExpanded(true);
             }}/>
-                {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
+                {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer_1.default data={selected.request} search={detailSearch}/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
                     <react_native_1.Text style={[
                     styles_1.default.codeText,
                     { color: AppColors_1.AppColors.grayTextWeak },
@@ -452,26 +472,6 @@ const NetworkDetail = react_1.default.memo(() => {
                     <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
                   </react_native_1.Pressable>)}
               </react_native_1.View>
-              {selected.response != null && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 10,
-                    height: 34,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}30`,
-                    backgroundColor: `${AppColors_1.AppColors.purple}10`,
-                }}>
-                  <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.purple} size={12}/>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors_1.AppColors.purple,
-                }}>
-                    {(0, helpers_1.getSize)(selected.response)}
-                  </react_native_1.Text>
-                </react_native_1.View>)}
             </react_native_1.View>
 
             <react_native_1.View style={styles_1.default.sectionContainer}>
@@ -480,7 +480,7 @@ const NetworkDetail = react_1.default.memo(() => {
                 if (!resExpanded && !showResDiff)
                     setResExpanded(true);
             }}/>
-              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen wrap/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
+              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer_1.default data={selected.response} search={detailSearch} wrap/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
                   <react_native_1.Text style={[
                     styles_1.default.codeText,
                     { color: AppColors_1.AppColors.grayTextWeak },

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

@@ -105,7 +105,10 @@ const NetworkTab = react_1.default.memo(() => {
           </AnimatedEntrance_1.default>);
         }
         const { log, isLast, color } = item;
-        return (<AnimatedEntrance_1.default index={index} distance={8} style={styles_1.default.treeNodeRow}>
+        return (<AnimatedEntrance_1.default index={index} distance={8} style={[
+                styles_1.default.treeNodeRow,
+                isLast && styles_1.default.treeNodeRowLast,
+            ]}>
           <react_native_1.View style={styles_1.default.treeLines}>
             <react_native_1.View style={[
                 styles_1.default.modernTreeLine,

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

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