react-native-inapp-inspector 1.1.32 → 1.1.34

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

@@ -14,13 +14,13 @@ 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, LayersIcon, TrashIcon, ForwardChevronIcon, LiveStateIcon, TimelineIcon, StorageIcon, MetadataIcon, BoltIcon, ExternalLinkIcon, } from '../NetworkIcons';
+import { TerminalIcon, SearchIcon, ClearIcon, ClockIcon, LayersIcon, TrashIcon, ForwardChevronIcon, LiveStateIcon, TimelineIcon, StorageIcon, MetadataIcon, BoltIcon, AtomIcon, ScreenIcon, ListenerIcon, DocIcon, ExternalLinkIcon, CodeBracketsIcon, } from '../NetworkIcons';
 const getOriginBadge = (originType) => {
     switch (originType) {
         case 'saga':
             return {
                 label: 'SAGA',
-                icon: '⚡',
+                renderIcon: (color, size = 9) => (<BoltIcon color={color} size={size}/>),
                 bg: AppColors.purple100,
                 text: AppColors.brandPurple,
                 border: AppColors.purple200,
@@ -28,7 +28,7 @@ const getOriginBadge = (originType) => {
         case 'thunk':
             return {
                 label: 'THUNK',
-                icon: '⚛️',
+                renderIcon: (color, size = 9) => (<AtomIcon color={color} size={size}/>),
                 bg: AppColors.amber100,
                 text: AppColors.amber800Warm,
                 border: AppColors.amber200,
@@ -36,7 +36,7 @@ const getOriginBadge = (originType) => {
         case 'ui':
             return {
                 label: 'UI',
-                icon: '📱',
+                renderIcon: (color, size = 9) => (<ScreenIcon color={color} size={size}/>),
                 bg: AppColors.sky100,
                 text: AppColors.sky600,
                 border: AppColors.sky400,
@@ -44,7 +44,7 @@ const getOriginBadge = (originType) => {
         case 'listener':
             return {
                 label: 'LISTENER',
-                icon: '👂',
+                renderIcon: (color, size = 9) => (<ListenerIcon color={color} size={size}/>),
                 bg: AppColors.teal100,
                 text: AppColors.teal700,
                 border: AppColors.teal400,
@@ -52,7 +52,7 @@ const getOriginBadge = (originType) => {
         default:
             return {
                 label: 'DIRECT',
-                icon: '⚡',
+                renderIcon: (color, size = 9) => (<BoltIcon color={color} size={size}/>),
                 bg: AppColors.slate100,
                 text: AppColors.slate700,
                 border: AppColors.slate200,
@@ -61,11 +61,12 @@ const getOriginBadge = (originType) => {
 };
 const ReduxDetail = React.memo(() => {
     const { t } = useTranslation();
-    const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, setSelectedReduxAction, } = useInspector();
+    const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, } = useInspector();
     // Search filter within details
     const [detailSearch, setDetailSearch] = useState('');
-    // Sub-tabs for Slice
+    // Sub-tabs for Slice & Action
     const [sliceTab, setSliceTab] = useState('live');
+    const [actionTab, setActionTab] = useState('payload');
     const [viewMode, setViewMode] = useState('pretty');
     // Selected Action inside Timeline
     const [expandedActionId, setExpandedActionId] = useState(null);
@@ -86,6 +87,18 @@ const ReduxDetail = React.memo(() => {
             return action.affectedSlices.includes(selectedReduxSlice);
         });
     }, [allActionHistory, selectedReduxSlice]);
+    // Filtered slice actions by search query in timeline tab
+    const filteredTimelineActions = useMemo(() => {
+        if (!detailSearch.trim())
+            return sliceActions;
+        const q = detailSearch.toLowerCase();
+        return sliceActions.filter(action => {
+            return (action.type.toLowerCase().includes(q) ||
+                (action.callerFile && action.callerFile.toLowerCase().includes(q)) ||
+                (action.payload &&
+                    JSON.stringify(action.payload).toLowerCase().includes(q)));
+        });
+    }, [sliceActions, detailSearch]);
     useEffect(() => {
         if (!selectedReduxSlice)
             return;
@@ -182,22 +195,24 @@ const ReduxDetail = React.memo(() => {
         const sliceTabs = [
             {
                 key: 'live',
-                label: t('redux.liveState'),
+                label: t('redux.liveState', 'Live State'),
                 icon: (isActive) => (<LiveStateIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
             },
             {
                 key: 'timeline',
-                label: `${t('redux.timeline')} (${sliceActions.length})`,
+                label: `${t('redux.timeline', 'Timeline')} (${sliceActions.length})`,
                 icon: (isActive) => (<TimelineIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
             },
             {
                 key: 'persisted',
-                label: isPersisted ? t('redux.persisted') : t('redux.storage'),
+                label: isPersisted
+                    ? t('redux.persisted', 'Persisted')
+                    : t('redux.storage', 'Storage'),
                 icon: (isActive) => (<StorageIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
             },
             {
                 key: 'metadata',
-                label: t('redux.metadata'),
+                label: t('redux.metadata', 'Metadata'),
                 icon: (isActive) => (<MetadataIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
             },
         ];
@@ -205,18 +220,34 @@ const ReduxDetail = React.memo(() => {
         {/* 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.indigo600Alt }]}>
-                <Text style={reduxDetailStyles.methodBadgeText}>{t('redux.slice')}</Text>
+            <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                flexWrap: 'wrap',
+                flex: 1,
+                minWidth: 0,
+            }}>
+              <View style={[
+                reduxDetailStyles.methodBadge,
+                { backgroundColor: AppColors.indigo600Alt },
+            ]}>
+                <Text style={reduxDetailStyles.methodBadgeText}>
+                  {t('redux.slice', 'SLICE')}
+                </Text>
               </View>
-              <Text style={reduxDetailStyles.sliceNameText}>
+              <Text style={reduxDetailStyles.sliceNameText} numberOfLines={1}>
                 {selectedReduxSlice}
               </Text>
               {isPersisted ? (<View style={reduxDetailStyles.persistedChip}>
                   <StorageIcon color={AppColors.emerald700} size={10}/>
-                  <Text style={reduxDetailStyles.persistedChipText}>{t('redux.persisted').toUpperCase()}</Text>
+                  <Text style={reduxDetailStyles.persistedChipText}>
+                    {t('redux.persisted', 'Persisted').toUpperCase()}
+                  </Text>
                 </View>) : (<View style={reduxDetailStyles.inMemoryChip}>
-                  <Text style={reduxDetailStyles.inMemoryChipText}>{t('redux.inMemory').toUpperCase()}</Text>
+                  <Text style={reduxDetailStyles.inMemoryChipText}>
+                    {t('redux.inMemory', 'In-Memory').toUpperCase()}
+                  </Text>
                 </View>)}
               {lastAction?.timestamp && (<View style={reduxDetailStyles.timePill}>
                   <ClockIcon color={AppColors.violet600} size={10}/>
@@ -227,29 +258,93 @@ const ReduxDetail = React.memo(() => {
             </View>
 
             {/* Copy Button */}
-            <CopyButton value={() => (sliceTab === 'live' ? sliceData : persistedData)} label={t('redux.sliceJson')}/>
+            <CopyButton value={() => (sliceTab === 'live' ? sliceData : persistedData)} label={t('redux.sliceJson', 'Slice JSON')}/>
           </View>
 
           {/* Sub Stats Row */}
           <View style={reduxDetailStyles.subStatsRow}>
-            <View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors.indigo50, borderColor: AppColors.indigo400 }]}>
+            <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>
+              <Text style={[
+                reduxDetailStyles.statLabel,
+                { color: AppColors.indigo600Alt },
+            ]}>
+                {t('redux.keys', 'Keys')}:
+              </Text>
+              <Text style={[
+                reduxDetailStyles.statValue,
+                { color: AppColors.indigo600Alt },
+            ]}>
+                {fieldsCount}
+              </Text>
             </View>
-            <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 style={[
+                reduxDetailStyles.statPill,
+                {
+                    backgroundColor: AppColors.sky100,
+                    borderColor: AppColors.sky400,
+                },
+            ]}>
+              <Text style={[
+                reduxDetailStyles.statLabel,
+                { color: AppColors.sky600 },
+            ]}>
+                {t('redux.size', 'Size')}:
+              </Text>
+              <Text style={[
+                reduxDetailStyles.statValue,
+                { color: AppColors.sky600 },
+            ]}>
+                {getSize(sliceData)}
+              </Text>
             </View>
-            <View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors.purple100, borderColor: AppColors.purple200 }]}>
+            <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>
+              <Text style={[
+                reduxDetailStyles.statLabel,
+                { color: AppColors.brandPurple },
+            ]}>
+                {t('redux.timeline', 'Timeline')}:
+              </Text>
+              <Text style={[
+                reduxDetailStyles.statValue,
+                { color: AppColors.brandPurple },
+            ]}>
+                {sliceActions.length}
+              </Text>
             </View>
-            {lastAction && (<View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors.amber100, borderColor: AppColors.amber200, flex: 1, minWidth: 140 }]}>
+            {lastAction && (<View style={[
+                    reduxDetailStyles.statPill,
+                    {
+                        backgroundColor: AppColors.amber100,
+                        borderColor: AppColors.amber200,
+                        flexShrink: 1,
+                        maxWidth: 160,
+                    },
+                ]}>
                 <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}>
+                <Text style={[
+                    reduxDetailStyles.statLabel,
+                    { color: AppColors.amber800Warm },
+                ]}>
+                  {t('redux.last', 'Last')}:
+                </Text>
+                <Text style={[
+                    reduxDetailStyles.statValue,
+                    { color: AppColors.amber800Warm, flexShrink: 1 },
+                ]} numberOfLines={1}>
                   {lastAction.type}
                 </Text>
               </View>)}
@@ -259,10 +354,12 @@ const ReduxDetail = React.memo(() => {
           <SegmentedTabs tabs={sliceTabs} activeKey={sliceTab} onChange={key => setSliceTab(key)} style={{ marginTop: 10 }}/>
         </View>
 
-        {/* Search Bar within slice */}
+        {/* Search Bar within slice (for Live, Timeline, Persisted) */}
         {sliceTab !== 'metadata' && (<View style={reduxDetailStyles.searchContainer}>
             <SearchIcon color={AppColors.grayTextWeak} size={14}/>
-            <TextInput placeholder="Search keys, values, or action types..." placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={reduxDetailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            <TextInput placeholder={sliceTab === 'timeline'
+                    ? 'Search action type, file, or payload...'
+                    : 'Search keys or values...'} placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={reduxDetailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
             {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10}>
                 <ClearIcon color={AppColors.grayTextWeak} size={14}/>
               </Pressable>)}
@@ -270,11 +367,14 @@ const ReduxDetail = React.memo(() => {
 
         {/* Content Body */}
         {sliceTab === 'timeline' ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
-            {sliceActions.length === 0 ? (<View style={reduxDetailStyles.emptyBox}>
+            {filteredTimelineActions.length === 0 ? (<View style={reduxDetailStyles.emptyBox}>
+                <TimelineIcon color={AppColors.grayTextWeak} size={28}/>
                 <Text style={reduxDetailStyles.emptyBoxText}>
-                  No dispatched actions recorded for this slice yet.
+                  {detailSearch.trim()
+                        ? 'No actions matching your search query.'
+                        : 'No dispatched actions recorded for this slice yet.'}
                 </Text>
-              </View>) : (sliceActions.map((action, aIdx) => {
+              </View>) : (filteredTimelineActions.map((action, aIdx) => {
                     const isExpanded = expandedActionId === action.id;
                     const originMeta = getOriginBadge(action.originType);
                     const callerBasename = action.callerFile
@@ -283,7 +383,14 @@ const ReduxDetail = React.memo(() => {
                     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={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
+                        <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                            flex: 1,
+                            minWidth: 0,
+                            flexWrap: 'wrap',
+                        }}>
                           <View style={reduxDetailStyles.actionBadge}>
                             <Text style={reduxDetailStyles.actionBadgeText}>
                               #{action.id}
@@ -295,13 +402,13 @@ const ReduxDetail = React.memo(() => {
                             alignItems: 'center',
                             gap: 3,
                             backgroundColor: originMeta.bg,
-                            paddingHorizontal: 6,
+                            paddingHorizontal: 5,
                             paddingVertical: 2,
                             borderRadius: 4,
                             borderWidth: 1,
                             borderColor: originMeta.border,
                         }}>
-                            <Text style={{ fontSize: 9 }}>{originMeta.icon}</Text>
+                            {originMeta.renderIcon(originMeta.text, 8.5)}
                             <Text style={{
                             fontFamily: AppFonts.interBold,
                             fontSize: 8.5,
@@ -328,18 +435,29 @@ const ReduxDetail = React.memo(() => {
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 justifyContent: 'space-between',
-                                marginTop: 5,
+                                marginTop: 6,
                                 marginBottom: 2,
-                                paddingHorizontal: 7,
-                                paddingVertical: 3,
+                                paddingHorizontal: 8,
+                                paddingVertical: 4,
                                 backgroundColor: AppColors.grayBackground,
-                                borderRadius: 5,
+                                borderRadius: 6,
                                 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')}
+                          <View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 5,
+                                flex: 1,
+                                minWidth: 0,
+                            }}>
+                            <DocIcon color={AppColors.sky600} size={10}/>
+                            <Text style={{
+                                fontFamily: AppFonts.interMedium,
+                                fontSize: 9.5,
+                                color: AppColors.grayTextWeak,
+                            }}>
+                              {t('redux.triggeredFrom', 'Triggered From:')}
                             </Text>
                             <Text style={{
                                 fontFamily: AppFonts.interBold,
@@ -356,12 +474,16 @@ const ReduxDetail = React.memo(() => {
                                 gap: 3,
                                 backgroundColor: AppColors.sky100,
                                 paddingHorizontal: 5,
-                                paddingVertical: 1.5,
-                                borderRadius: 3,
+                                paddingVertical: 2,
+                                borderRadius: 4,
                             }}>
                             <ExternalLinkIcon color={AppColors.sky600} size={9}/>
-                            <Text style={{ fontFamily: AppFonts.interBold, fontSize: 8.5, color: AppColors.sky600 }}>
-                              {t('redux.openInEditor')}
+                            <Text style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 8.5,
+                                color: AppColors.sky600,
+                            }}>
+                              {t('redux.openInEditor', 'Open in Editor')}
                             </Text>
                           </Pressable>
                         </View>)}
@@ -369,9 +491,9 @@ const ReduxDetail = React.memo(() => {
                       {/* Expanded Payload, Diff Viewer & Call Stack */}
                       {isExpanded ? (<View style={reduxDetailStyles.expandedContent}>
                           {/* Call Stack Trace Box */}
-                          {action.stack ? (<View style={{ marginBottom: 10 }}>
+                          {action.stack ? (<View style={{ marginBottom: 12 }}>
                               <Text style={reduxDetailStyles.expandedSectionTitle}>
-                                {t('redux.callStack')}:
+                                {t('redux.callStack', 'Call Stack Trace')}:
                               </Text>
                               <View style={{
                                     backgroundColor: AppColors.grayBackground,
@@ -384,37 +506,48 @@ const ReduxDetail = React.memo(() => {
                                 {action.stack
                                     .split('\n')
                                     .map(l => l.trim())
-                                    .filter(l => l.length > 0 && !l.includes('reduxLogger') && !l.includes('inspectorReduxMiddleware'))
+                                    .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);
+                                                openInVSCode(parsed.fullPath ||
+                                                    parsed.fileName, parsed.lineNumber, parsed.columnNumber);
                                             }
                                         }} style={{
                                             flexDirection: 'row',
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
-                                            paddingVertical: 2.5,
+                                            paddingVertical: 3,
                                             borderBottomWidth: fIdx < 7 ? 0.5 : 0,
                                             borderBottomColor: AppColors.dividerColor,
                                         }}>
                                         <View style={{ flex: 1, minWidth: 0 }}>
                                           <Text style={{
-                                            fontFamily: isApp ? AppFonts.interBold : AppFonts.interRegular,
+                                            fontFamily: isApp
+                                                ? AppFonts.interBold
+                                                : AppFonts.interRegular,
                                             fontSize: 9.5,
-                                            color: isApp ? AppColors.primaryBlack : AppColors.grayTextWeak,
+                                            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,
+                                            color: isApp
+                                                ? AppColors.sky600
+                                                : AppColors.grayTextWeak,
                                         }} numberOfLines={1}>
-                                            {parsed.fileName}:{parsed.lineNumber || 1}:{parsed.columnNumber || 1}
+                                            {parsed.fileName}:
+                                            {parsed.lineNumber || 1}:
+                                            {parsed.columnNumber || 1}
                                           </Text>
                                         </View>
                                         {isApp && (<ExternalLinkIcon color={AppColors.sky600} size={10}/>)}
@@ -423,20 +556,20 @@ const ReduxDetail = React.memo(() => {
                               </View>
                             </View>) : null}
 
-                          {action.payload !== undefined && (<View style={{ marginBottom: 10 }}>
+                          {action.payload !== undefined && (<View style={{ marginBottom: 12 }}>
                               <Text style={reduxDetailStyles.expandedSectionTitle}>
-                                {t('redux.actionPayload')}
+                                {t('redux.actionPayload', 'Action Payload:')}
                               </Text>
-                              <JsonViewer data={action.payload} search={detailSearch} forceOpen={true}/>
+                              <JsonViewer data={action.payload} search={detailSearch} forceOpen={true} wrap={true}/>
                             </View>)}
 
                           <Text style={reduxDetailStyles.expandedSectionTitle}>
-                            {t('redux.stateChangesDiff')}
+                            {t('redux.stateChangesDiff', 'State Changes (Diff):')}
                           </Text>
                           <DiffViewer oldData={action.prevState?.[selectedReduxSlice] || {}} newData={action.nextState?.[selectedReduxSlice] || {}} forceOpen={true}/>
                         </View>) : (<View style={reduxDetailStyles.collapsedPrompt}>
                           <Text style={reduxDetailStyles.collapsedPromptText}>
-                            {t('redux.tapToInspectAction')}
+                            {t('redux.tapToInspectAction', 'Tap to inspect action payload & diff changes')}
                           </Text>
                           <ForwardChevronIcon color={AppColors.grayTextWeak} size={12}/>
                         </View>)}
@@ -451,7 +584,9 @@ const ReduxDetail = React.memo(() => {
                     { label: 'In-Memory State Size', value: getSize(sliceData) },
                     {
                         label: 'Persistence Status',
-                        value: isPersisted ? `Persisted (${getSize(persistedData)})` : 'Not Persisted',
+                        value: isPersisted
+                            ? `Persisted (${getSize(persistedData)})`
+                            : 'Not Persisted (In-Memory)',
                     },
                     {
                         label: 'Dispatched Actions History',
@@ -482,12 +617,330 @@ const ReduxDetail = React.memo(() => {
                   </Text>
                 </TouchableOpacity>)}
             </View>
-          </ScrollView>) : (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
-            <JsonViewer data={sliceTab === 'live' ? sliceData : persistedData ?? 'No persisted state stored.'} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode}/>
-          </ScrollView>)}
+          </ScrollView>) : sliceTab === 'persisted' ? (<View style={{ flex: 1, padding: 10 }}>
+            {isPersisted ? (<View style={{ flex: 1 }}>
+                <View style={reduxDetailStyles.persistedInfoCard}>
+                  <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }}>
+                    <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
+                      <StorageIcon color={AppColors.emerald700} size={14}/>
+                      <Text style={reduxDetailStyles.persistedInfoTitle}>
+                        Stored in persistent storage ({getSize(persistedData)})
+                      </Text>
+                    </View>
+                    <TouchableOpacity style={reduxDetailStyles.clearPersistMiniBtn} onPress={handleClearPersistence}>
+                      <TrashIcon color={AppColors.errorColor} size={12}/>
+                      <Text style={reduxDetailStyles.clearPersistMiniText}>
+                        Clear
+                      </Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+                <View style={{ flex: 1, marginTop: 8 }}>
+                  <JsonViewer data={persistedData} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode} fullHeight={true} wrap={true}/>
+                </View>
+              </View>) : (<View style={reduxDetailStyles.emptyBox}>
+                <StorageIcon color={AppColors.grayTextWeak} size={32}/>
+                <Text style={reduxDetailStyles.emptyBoxTitle}>
+                  Not Persisted in Storage
+                </Text>
+                <Text style={reduxDetailStyles.emptyBoxText}>
+                  This slice is not stored in AsyncStorage or redux-persist.
+                  State exists purely in active JavaScript memory.
+                </Text>
+              </View>)}
+          </View>) : (
+            /* Live State JsonViewer: Direct flex: 1 with fullHeight to prevent nested scroll conflicts */
+            <View style={{ flex: 1, padding: 10 }}>
+            <JsonViewer data={sliceData} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode} fullHeight={true} wrap={true}/>
+          </View>)}
+      </View>);
+    }
+    // ══════════════════════════════════════════════════════════════════════════
+    // ── 2. RENDER ACTION DETAIL VIEW (when an action is selected directly) ────
+    // ══════════════════════════════════════════════════════════════════════════
+    if (selectedReduxAction != null) {
+        const originMeta = getOriginBadge(selectedReduxAction.originType);
+        const callerBasename = selectedReduxAction.callerFile
+            ? selectedReduxAction.callerFile.split('/').pop()
+            : null;
+        const actionTabs = [
+            {
+                key: 'payload',
+                label: t('redux.payload', 'Payload'),
+                icon: (isActive) => (<CodeBracketsIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'diff',
+                label: t('redux.diff', 'State Diff'),
+                icon: (isActive) => (<TimelineIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'stack',
+                label: t('redux.callStack', 'Call Stack'),
+                icon: (isActive) => (<DocIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'raw',
+                label: 'Raw Action',
+                icon: (isActive) => (<LiveStateIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
+            },
+        ];
+        return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
+        {/* Top Info Bar */}
+        <View style={reduxDetailStyles.infoBar}>
+          <View style={reduxDetailStyles.infoTopRow}>
+            <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                flexWrap: 'wrap',
+                flex: 1,
+                minWidth: 0,
+            }}>
+              <View style={reduxDetailStyles.actionBadge}>
+                <Text style={reduxDetailStyles.actionBadgeText}>
+                  #{selectedReduxAction.id}
+                </Text>
+              </View>
+              {/* Origin Badge */}
+              <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                backgroundColor: originMeta.bg,
+                paddingHorizontal: 5,
+                paddingVertical: 2,
+                borderRadius: 4,
+                borderWidth: 1,
+                borderColor: originMeta.border,
+            }}>
+                {originMeta.renderIcon(originMeta.text, 8.5)}
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 8.5,
+                color: originMeta.text,
+                letterSpacing: 0.3,
+            }}>
+                  {originMeta.label}
+                </Text>
+              </View>
+              <Text style={reduxDetailStyles.sliceNameText} numberOfLines={1}>
+                {selectedReduxAction.type}
+              </Text>
+              {selectedReduxAction.timestamp && (<View style={reduxDetailStyles.timePill}>
+                  <ClockIcon color={AppColors.purple} size={10}/>
+                  <Text style={reduxDetailStyles.timeText}>
+                    {selectedReduxAction.timestamp}
+                  </Text>
+                </View>)}
+            </View>
+
+            {/* Copy Button */}
+            <CopyButton value={() => selectedReduxAction} label="Copy Action"/>
+          </View>
+
+          {/* Sub Stats Row */}
+          <View style={reduxDetailStyles.subStatsRow}>
+            {selectedReduxAction.affectedSlices &&
+                selectedReduxAction.affectedSlices.length > 0 && (<View style={[
+                    reduxDetailStyles.statPill,
+                    {
+                        backgroundColor: AppColors.indigo50,
+                        borderColor: AppColors.indigo400,
+                    },
+                ]}>
+                  <LayersIcon color={AppColors.indigo600Alt} size={11}/>
+                  <Text style={[
+                    reduxDetailStyles.statLabel,
+                    { color: AppColors.indigo600Alt },
+                ]}>
+                    Slices:
+                  </Text>
+                  <Text style={[
+                    reduxDetailStyles.statValue,
+                    { color: AppColors.indigo600Alt },
+                ]}>
+                    {selectedReduxAction.affectedSlices.join(', ')}
+                  </Text>
+                </View>)}
+            <View style={[
+                reduxDetailStyles.statPill,
+                {
+                    backgroundColor: AppColors.sky100,
+                    borderColor: AppColors.sky400,
+                },
+            ]}>
+              <Text style={[
+                reduxDetailStyles.statLabel,
+                { color: AppColors.sky600 },
+            ]}>
+                Payload Size:
+              </Text>
+              <Text style={[
+                reduxDetailStyles.statValue,
+                { color: AppColors.sky600 },
+            ]}>
+                {getSize(selectedReduxAction.payload)}
+              </Text>
+            </View>
+          </View>
+
+          {/* Triggered from caller preview row */}
+          {selectedReduxAction.callerFile && (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginTop: 8,
+                    paddingHorizontal: 8,
+                    paddingVertical: 4,
+                    backgroundColor: AppColors.grayBackground,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: AppColors.dividerColor,
+                }}>
+              <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                    flex: 1,
+                    minWidth: 0,
+                }}>
+                <DocIcon color={AppColors.sky600} size={10}/>
+                <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 9.5,
+                    color: AppColors.grayTextWeak,
+                }}>
+                  Triggered from:
+                </Text>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors.sky600,
+                }} numberOfLines={1}>
+                  {callerBasename}:{selectedReduxAction.callerLine || 1}
+                </Text>
+              </View>
+
+              <Pressable onPress={() => openInVSCode(selectedReduxAction.callerFile, selectedReduxAction.callerLine, selectedReduxAction.callerCol)} hitSlop={8} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: AppColors.sky100,
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    borderRadius: 4,
+                }}>
+                <ExternalLinkIcon color={AppColors.sky600} size={9}/>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: AppColors.sky600,
+                }}>
+                  Open in Editor
+                </Text>
+              </Pressable>
+            </View>)}
+
+          {/* Sub-Tabs */}
+          <SegmentedTabs tabs={actionTabs} activeKey={actionTab} onChange={key => setActionTab(key)} style={{ marginTop: 10 }}/>
+        </View>
+
+        {/* Content Body */}
+        {actionTab === 'payload' ? (<View style={{ flex: 1, padding: 10 }}>
+            {selectedReduxAction.payload !== undefined ? (<JsonViewer data={selectedReduxAction.payload} search={detailSearch} forceOpen={true} fullHeight={true} wrap={true}/>) : (<View style={reduxDetailStyles.emptyBox}>
+                <Text style={reduxDetailStyles.emptyBoxText}>
+                  This action has no payload dispatched.
+                </Text>
+              </View>)}
+          </View>) : actionTab === 'diff' ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+            <DiffViewer oldData={selectedReduxAction.prevState || {}} newData={selectedReduxAction.nextState || {}} forceOpen={true}/>
+          </ScrollView>) : actionTab === 'stack' ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+            {selectedReduxAction.stack ? (<View style={{
+                        backgroundColor: AppColors.white,
+                        borderRadius: 10,
+                        padding: 10,
+                        borderWidth: 1,
+                        borderColor: AppColors.dividerColor,
+                    }}>
+                <Text style={reduxDetailStyles.expandedSectionTitle}>
+                  Dispatched from call stack:
+                </Text>
+                {selectedReduxAction.stack
+                        .split('\n')
+                        .map(l => l.trim())
+                        .filter(l => l.length > 0 &&
+                        !l.includes('reduxLogger') &&
+                        !l.includes('inspectorReduxMiddleware'))
+                        .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: 5,
+                                borderBottomWidth: 0.5,
+                                borderBottomColor: AppColors.dividerColor,
+                            }}>
+                        <View style={{ flex: 1, minWidth: 0 }}>
+                          <Text style={{
+                                fontFamily: isApp
+                                    ? AppFonts.interBold
+                                    : AppFonts.interRegular,
+                                fontSize: 10.5,
+                                color: isApp
+                                    ? AppColors.primaryBlack
+                                    : AppColors.grayTextWeak,
+                            }} numberOfLines={1}>
+                            {parsed.functionName || 'anonymous'}
+                          </Text>
+                          <Text style={{
+                                fontFamily: AppFonts.interRegular,
+                                fontSize: 9,
+                                color: isApp
+                                    ? AppColors.sky600
+                                    : AppColors.grayTextWeak,
+                            }} numberOfLines={1}>
+                            {parsed.fileName}:{parsed.lineNumber || 1}:
+                            {parsed.columnNumber || 1}
+                          </Text>
+                        </View>
+                        {isApp && (<ExternalLinkIcon color={AppColors.sky600} size={11}/>)}
+                      </Pressable>);
+                    })}
+              </View>) : (<View style={reduxDetailStyles.emptyBox}>
+                <Text style={reduxDetailStyles.emptyBoxText}>
+                  No call stack trace captured for this action.
+                </Text>
+              </View>)}
+          </ScrollView>) : (<View style={{ flex: 1, padding: 10 }}>
+            <JsonViewer data={selectedReduxAction} forceOpen={true} fullHeight={true} wrap={true}/>
+          </View>)}
       </View>);
     }
-    return null;
+    return (<View style={reduxDetailStyles.emptyBox}>
+      <TerminalIcon color={AppColors.purple} size={32}/>
+      <Text style={reduxDetailStyles.emptyBoxTitle}>
+        No Redux Slice Selected
+      </Text>
+      <Text style={reduxDetailStyles.emptyBoxText}>
+        Select a slice from the Redux tab to inspect its state and dispatched
+        actions.
+      </Text>
+    </View>);
 });
 const reduxDetailStyles = StyleSheet.create({
     infoBar: {
@@ -503,20 +956,21 @@ const reduxDetailStyles = StyleSheet.create({
         marginBottom: 8,
     },
     methodBadge: {
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 6,
+        paddingHorizontal: 7,
+        paddingVertical: 2.5,
+        borderRadius: 5,
     },
     methodBadgeText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 10,
+        fontSize: 9.5,
         color: AppColors.white,
-        letterSpacing: 0.5,
+        letterSpacing: 0.4,
     },
     sliceNameText: {
         fontFamily: AppFonts.interBold,
         fontSize: 14,
         color: AppColors.primaryBlack,
+        flexShrink: 1,
     },
     persistedChip: {
         flexDirection: 'row',
@@ -601,6 +1055,11 @@ const reduxDetailStyles = StyleSheet.create({
         marginBottom: 8,
         borderWidth: 1,
         borderColor: AppColors.dividerColor,
+        shadowColor: AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        elevation: 1,
     },
     timelineHeader: {
         flexDirection: 'row',
@@ -664,7 +1123,7 @@ const reduxDetailStyles = StyleSheet.create({
         fontFamily: AppFonts.interBold,
         fontSize: 11,
         color: AppColors.grayTextStrong,
-        marginBottom: 4,
+        marginBottom: 6,
     },
     metadataCard: {
         backgroundColor: AppColors.white,
@@ -672,6 +1131,11 @@ const reduxDetailStyles = StyleSheet.create({
         padding: 12,
         borderWidth: 1,
         borderColor: AppColors.dividerColor,
+        shadowColor: AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        elevation: 1,
     },
     metaRow: {
         flexDirection: 'row',
@@ -693,6 +1157,32 @@ const reduxDetailStyles = StyleSheet.create({
         maxWidth: '60%',
         textAlign: 'right',
     },
+    persistedInfoCard: {
+        backgroundColor: '#ECFDF5',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#A7F3D0',
+        padding: 10,
+    },
+    persistedInfoTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: '#047857',
+    },
+    clearPersistMiniBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: '#FEE2E2',
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 4,
+    },
+    clearPersistMiniText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.errorColor,
+    },
     clearPersistBtn: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -718,11 +1208,20 @@ const reduxDetailStyles = StyleSheet.create({
         justifyContent: 'center',
         borderWidth: 1,
         borderColor: AppColors.dividerColor,
+        margin: 12,
+        gap: 8,
+    },
+    emptyBoxTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors.primaryBlack,
     },
     emptyBoxText: {
         fontFamily: AppFonts.interMedium,
-        fontSize: 12.5,
+        fontSize: 12,
         color: AppColors.grayTextWeak,
+        textAlign: 'center',
+        lineHeight: 18,
     },
     highlight: {
         backgroundColor: '#FEF08A',