react-native-inapp-inspector 1.1.28 → 1.1.31

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

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const i18n_1 = require("../../i18n");
 const InspectorContext_1 = require("./InspectorContext");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
@@ -48,46 +49,224 @@ const helpers_1 = require("../../helpers");
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
+const reduxLogger_1 = require("../../customHooks/reduxLogger");
 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 getKeyChipStyle = (key) => {
+    const k = key.toLowerCase();
+    if (k.includes('load') || k.includes('pend') || k.includes('status')) {
+        return {
+            bg: AppColors_1.AppColors.amber100,
+            border: AppColors_1.AppColors.amber200,
+            text: AppColors_1.AppColors.amber800Warm,
+            dot: AppColors_1.AppColors.darkOrange,
+        };
+    }
+    if (k.includes('err') || k.includes('fail') || k.includes('reject')) {
+        return {
+            bg: AppColors_1.AppColors.red100,
+            border: AppColors_1.AppColors.errorBorder,
+            text: AppColors_1.AppColors.red600,
+            dot: AppColors_1.AppColors.errorColor,
+        };
+    }
+    if (k.includes('user') || k.includes('auth') || k.includes('token') || k.includes('profile')) {
+        return {
+            bg: AppColors_1.AppColors.indigo50,
+            border: AppColors_1.AppColors.indigo400,
+            text: AppColors_1.AppColors.indigo600Alt,
+            dot: AppColors_1.AppColors.indigo500,
+        };
+    }
+    if (k.includes('item') || k.includes('data') || k.includes('list') || k.includes('entit') || k.includes('count')) {
+        return {
+            bg: AppColors_1.AppColors.emeraldBg,
+            border: AppColors_1.AppColors.emeraldBorder,
+            text: AppColors_1.AppColors.emerald700,
+            dot: AppColors_1.AppColors.emerald500,
+        };
+    }
+    return {
+        bg: AppColors_1.AppColors.slate100,
+        border: AppColors_1.AppColors.slate200,
+        text: AppColors_1.AppColors.slate700,
+        dot: AppColors_1.AppColors.slate400,
+    };
+};
 const ReduxTab = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.useTranslation)();
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = (0, InspectorContext_1.useInspector)();
     // Sort mode: 'latest' (newest updated first) vs 'alpha' (A-Z)
     const [sortMode, setSortMode] = (0, react_1.useState)('latest');
+    // Pause / Live Auto-Refresh State
+    const [isReduxPaused, setIsReduxPaused] = (0, react_1.useState)(!(0, reduxLogger_1.getReduxAutoRefresh)());
+    const handleTogglePause = (0, react_1.useCallback)(() => {
+        setIsReduxPaused(prev => {
+            const next = !prev;
+            (0, reduxLogger_1.setReduxAutoRefresh)(!next);
+            return next;
+        });
+    }, []);
     // Total state size calculation
     const totalStateSize = (0, react_1.useMemo)(() => {
         return (0, helpers_1.getSize)(reduxState);
     }, [reduxState]);
-    // Compute slice items with exact timestamps
+    // Fetch full action history for timeline counts
+    const allActions = (0, react_1.useMemo)(() => {
+        return (0, reduxLogger_1.getActionHistory)();
+    }, [reduxLastActionMap]);
+    // Compute slice items with exact timestamps & rich details
     const sliceItems = (0, react_1.useMemo)(() => {
         if (!reduxState || typeof reduxState !== 'object')
             return [];
         const keys = Object.keys(reduxState);
         return keys.map(key => {
             const sliceVal = reduxState[key];
-            const keysCount = sliceVal && typeof sliceVal === 'object'
-                ? Object.keys(sliceVal).length
-                : typeof sliceVal !== 'undefined'
-                    ? 1
-                    : 0;
-            const lastAction = reduxLastActionMap[key];
-            const updatedAt = lastAction?.updatedAt || 0;
+            const isArray = Array.isArray(sliceVal);
+            const isObject = sliceVal && typeof sliceVal === 'object';
+            let typeLabel = 'Primitive';
+            let keysCount = 0;
+            let topKeys = [];
+            let totalKeysCount = 0;
+            if (isArray) {
+                keysCount = sliceVal.length;
+                typeLabel = `Array [${keysCount}]`;
+            }
+            else if (isObject) {
+                const objKeys = Object.keys(sliceVal);
+                totalKeysCount = objKeys.length;
+                keysCount = totalKeysCount;
+                topKeys = objKeys.slice(0, 4);
+                typeLabel = `Object {${keysCount}}`;
+            }
+            else if (typeof sliceVal !== 'undefined') {
+                keysCount = 1;
+                typeLabel = typeof sliceVal;
+            }
+            // Determine state status
+            let status = 'live';
+            let statusMessage;
+            if (isObject) {
+                if (sliceVal.loading === true ||
+                    sliceVal.isLoading === true ||
+                    sliceVal.status === 'loading' ||
+                    sliceVal.status === 'pending') {
+                    status = 'loading';
+                    statusMessage = 'Loading';
+                }
+                else if (sliceVal.error ||
+                    sliceVal.hasError ||
+                    sliceVal.status === 'error' ||
+                    sliceVal.status === 'failed') {
+                    status = 'error';
+                    statusMessage = typeof sliceVal.error === 'string' ? sliceVal.error : 'Error';
+                }
+                else if (keysCount === 0) {
+                    status = 'empty';
+                    statusMessage = 'Empty';
+                }
+            }
+            const lastActionRaw = reduxLastActionMap[key];
+            const updatedAt = lastActionRaw?.updatedAt || 0;
+            // Count actions affecting this slice in timeline
+            const timelineCount = allActions.filter(action => {
+                if (!action.affectedSlices || action.affectedSlices.length === 0)
+                    return true;
+                return action.affectedSlices.includes(key);
+            }).length;
+            let lastAction = undefined;
+            if (lastActionRaw) {
+                let payloadPreview;
+                if (lastActionRaw.payload !== undefined && lastActionRaw.payload !== null) {
+                    try {
+                        if (typeof lastActionRaw.payload === 'object') {
+                            const pKeys = Object.keys(lastActionRaw.payload);
+                            payloadPreview = `{ ${pKeys.slice(0, 3).join(', ')}${pKeys.length > 3 ? '...' : ''} }`;
+                        }
+                        else {
+                            payloadPreview = String(lastActionRaw.payload);
+                        }
+                    }
+                    catch { }
+                }
+                lastAction = {
+                    type: lastActionRaw.type,
+                    timestamp: lastActionRaw.timestamp,
+                    updatedAt: lastActionRaw.updatedAt,
+                    payloadPreview,
+                    originType: lastActionRaw.originType,
+                    callerFile: lastActionRaw.callerFile,
+                    callerLine: lastActionRaw.callerLine,
+                    callerCol: lastActionRaw.callerCol,
+                };
+            }
             return {
                 id: `slice-${key}`,
                 name: key,
                 keysCount,
                 sizeStr: (0, helpers_1.getSize)(sliceVal),
+                typeLabel,
+                topKeys,
+                totalKeysCount,
+                status,
+                statusMessage,
+                timelineCount,
                 lastAction,
                 updatedAt,
             };
         });
-    }, [reduxState, reduxLastActionMap]);
+    }, [reduxState, reduxLastActionMap, allActions]);
     // Filter & Sort slices: by default, the most recently updated item is at the FIRST position
     const filteredSlices = (0, react_1.useMemo)(() => {
         let list = sliceItems;
         if (reduxSearch.trim().length > 0) {
             const q = reduxSearch.toLowerCase();
             list = list.filter(item => item.name.toLowerCase().includes(q) ||
-                (item.lastAction && item.lastAction.type.toLowerCase().includes(q)));
+                (item.lastAction && item.lastAction.type.toLowerCase().includes(q)) ||
+                item.topKeys.some(k => k.toLowerCase().includes(q)));
         }
         return [...list].sort((a, b) => {
             if (sortMode === 'latest') {
@@ -120,7 +299,7 @@ const ReduxTab = react_1.default.memo(() => {
                 reduxTabStyles.card,
                 isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
             ]}>
-            {/* Top row: Badge + Slice Name + Timestamp + Chevron */}
+            {/* Top row: Badge + Slice Name + Status + Timestamp + Chevron */}
             <react_native_1.View style={reduxTabStyles.cardHeader}>
               <react_native_1.View style={reduxTabStyles.sliceBadge}>
                 <react_native_1.Text style={reduxTabStyles.sliceBadgeText}>SLICE</react_native_1.Text>
@@ -128,6 +307,18 @@ const ReduxTab = react_1.default.memo(() => {
 
               <HighlightText_1.default text={item.name} search={reduxSearch} style={reduxTabStyles.sliceName} highlightStyle={reduxTabStyles.highlight}/>
 
+              {/* Status Badge */}
+              {item.status === 'loading' ? (<react_native_1.View style={reduxTabStyles.loadingPill}>
+                  <react_native_1.Text style={reduxTabStyles.loadingPillText}>⏳ Loading</react_native_1.Text>
+                </react_native_1.View>) : item.status === 'error' ? (<react_native_1.View style={reduxTabStyles.errorPill}>
+                  <react_native_1.Text style={reduxTabStyles.errorPillText}>⚠️ Error</react_native_1.Text>
+                </react_native_1.View>) : item.status === 'empty' ? (<react_native_1.View style={reduxTabStyles.emptyPill}>
+                  <react_native_1.Text style={reduxTabStyles.emptyPillText}>Empty</react_native_1.Text>
+                </react_native_1.View>) : (<react_native_1.View style={reduxTabStyles.livePill}>
+                  <react_native_1.View style={reduxTabStyles.liveDot}/>
+                  <react_native_1.Text style={reduxTabStyles.livePillText}>Live</react_native_1.Text>
+                </react_native_1.View>)}
+
               {item.lastAction?.timestamp && (<react_native_1.View style={reduxTabStyles.timePill}>
                   <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple} size={10}/>
                   <react_native_1.Text style={reduxTabStyles.timeText}>
@@ -141,27 +332,116 @@ const ReduxTab = react_1.default.memo(() => {
             {/* Middle row: Stats pills */}
             <react_native_1.View style={reduxTabStyles.statsRow}>
               <react_native_1.View style={reduxTabStyles.pill}>
-                <react_native_1.Text style={reduxTabStyles.pillLabel}>Keys:</react_native_1.Text>
-                <react_native_1.Text style={reduxTabStyles.pillValue}>{item.keysCount}</react_native_1.Text>
+                <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>
+                <react_native_1.Text style={reduxTabStyles.pillValue}>{item.typeLabel}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={reduxTabStyles.pill}>
                 <react_native_1.Text style={reduxTabStyles.pillLabel}>Size:</react_native_1.Text>
                 <react_native_1.Text style={reduxTabStyles.pillValue}>{item.sizeStr}</react_native_1.Text>
               </react_native_1.View>
-              <react_native_1.View style={reduxTabStyles.livePill}>
-                <react_native_1.View style={reduxTabStyles.liveDot}/>
-                <react_native_1.Text style={reduxTabStyles.livePillText}>Live</react_native_1.Text>
-              </react_native_1.View>
+              {item.timelineCount > 0 && (<react_native_1.View style={reduxTabStyles.pill}>
+                  <react_native_1.Text style={reduxTabStyles.pillLabel}>Actions:</react_native_1.Text>
+                  <react_native_1.Text style={reduxTabStyles.pillValue}>{item.timelineCount}</react_native_1.Text>
+                </react_native_1.View>)}
             </react_native_1.View>
 
-            {/* Bottom row: Last Dispatched Action */}
+            {/* Keys Preview Chips (if object has keys) */}
+            {item.topKeys.length > 0 && (<react_native_1.View style={reduxTabStyles.keysContainer}>
+                <react_native_1.Text style={reduxTabStyles.keysHeading}>Keys:</react_native_1.Text>
+                <react_native_1.View style={reduxTabStyles.keysWrap}>
+                  {item.topKeys.map((k, kIdx) => {
+                    const chipStyle = getKeyChipStyle(k);
+                    return (<react_native_1.View key={kIdx} style={[
+                            reduxTabStyles.keyChip,
+                            {
+                                backgroundColor: chipStyle.bg,
+                                borderColor: chipStyle.border,
+                            },
+                        ]}>
+                        <react_native_1.View style={{
+                            width: 5,
+                            height: 5,
+                            borderRadius: 2.5,
+                            backgroundColor: chipStyle.dot,
+                        }}/>
+                        <react_native_1.Text style={[
+                            reduxTabStyles.keyChipText,
+                            { color: chipStyle.text },
+                        ]} numberOfLines={1}>
+                          {k}
+                        </react_native_1.Text>
+                      </react_native_1.View>);
+                })}
+                  {item.totalKeysCount > item.topKeys.length && (<react_native_1.View style={reduxTabStyles.keyMoreChip}>
+                      <react_native_1.Text style={reduxTabStyles.keyMoreChipText}>
+                        +{item.totalKeysCount - item.topKeys.length}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+              </react_native_1.View>)}
+
+            {/* Bottom row: Last Dispatched Action with Origin & Trigger Line */}
             {item.lastAction && (<react_native_1.View style={reduxTabStyles.lastActionRow}>
-                <react_native_1.Text style={reduxTabStyles.lastActionLabel}>Last Action:</react_native_1.Text>
-                <HighlightText_1.default text={item.lastAction.type} search={reduxSearch} style={reduxTabStyles.lastActionValue} highlightStyle={reduxTabStyles.highlight} numberOfLines={1}/>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
+                  <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple} size={12}/>
+                  <react_native_1.Text style={reduxTabStyles.lastActionLabel}>{t('redux.last', 'Last')}:</react_native_1.Text>
+
+                  {/* Origin Badge */}
+                  {item.lastAction.originType && (<react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 2.5,
+                        backgroundColor: getOriginBadge(item.lastAction.originType).bg,
+                        paddingHorizontal: 4.5,
+                        paddingVertical: 1.5,
+                        borderRadius: 3.5,
+                        borderWidth: 1,
+                        borderColor: getOriginBadge(item.lastAction.originType).border,
+                    }}>
+                      <react_native_1.Text style={{ fontSize: 8.5 }}>
+                        {getOriginBadge(item.lastAction.originType).icon}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 8,
+                        color: getOriginBadge(item.lastAction.originType).text,
+                        letterSpacing: 0.3,
+                    }}>
+                        {getOriginBadge(item.lastAction.originType).label}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+
+                  <HighlightText_1.default text={item.lastAction.type} search={reduxSearch} style={reduxTabStyles.lastActionValue} highlightStyle={reduxTabStyles.highlight} numberOfLines={1}/>
+
+                  {/* Triggered from file preview */}
+                  {item.lastAction.callerFile && (<react_native_1.Pressable onPress={() => (0, helpers_1.openInVSCode)(item.lastAction.callerFile, item.lastAction.callerLine, item.lastAction.callerCol)} hitSlop={6} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 2,
+                        backgroundColor: AppColors_1.AppColors.sky100,
+                        paddingHorizontal: 4.5,
+                        paddingVertical: 1.5,
+                        borderRadius: 3,
+                        borderWidth: 0.5,
+                        borderColor: AppColors_1.AppColors.sky400,
+                    }}>
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 8.5,
+                        color: AppColors_1.AppColors.sky600,
+                    }}>
+                        📄 {item.lastAction.callerFile.split('/').pop()}:{item.lastAction.callerLine || 1}
+                      </react_native_1.Text>
+                    </react_native_1.Pressable>)}
+
+                  {item.lastAction.payloadPreview && (<react_native_1.Text style={reduxTabStyles.payloadPreviewText} numberOfLines={1}>
+                      {item.lastAction.payloadPreview}
+                    </react_native_1.Text>)}
+                </react_native_1.View>
               </react_native_1.View>)}
           </TouchableScale_1.default>
         </AnimatedEntrance_1.default>);
-    }, [reduxSearch, setSelectedReduxSlice]);
+    }, [reduxSearch, setSelectedReduxSlice, t]);
     if (!reduxState) {
         return (<react_native_1.View style={styles_1.default.emptyContainer}>
         <react_native_1.View style={styles_1.default.emptyIconWrap}>
@@ -186,8 +466,24 @@ const ReduxTab = react_1.default.memo(() => {
           <react_native_1.Text style={reduxTabStyles.statBigVal}>{totalStateSize}</react_native_1.Text>
         </react_native_1.View>
         <react_native_1.View style={reduxTabStyles.statDivider}/>
-        <react_native_1.View style={[reduxTabStyles.statCol, { flex: 1.5 }]}>
-          <react_native_1.Text style={reduxTabStyles.statHeading}>LAST ACTION</react_native_1.Text>
+        <react_native_1.View style={[reduxTabStyles.statCol, { flex: 1.6 }]}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+            <react_native_1.Text style={reduxTabStyles.statHeading}>LAST ACTION</react_native_1.Text>
+            {lastGlobalAction?.originType && (<react_native_1.View style={{
+                backgroundColor: getOriginBadge(lastGlobalAction.originType).bg,
+                paddingHorizontal: 4,
+                paddingVertical: 1,
+                borderRadius: 3,
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 7.5,
+                color: getOriginBadge(lastGlobalAction.originType).text,
+            }}>
+                  {getOriginBadge(lastGlobalAction.originType).label}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>
           <react_native_1.Text style={reduxTabStyles.statLastAction} numberOfLines={1}>
             {lastGlobalAction ? lastGlobalAction.type : 'Initial'}
           </react_native_1.Text>
@@ -208,6 +504,19 @@ const ReduxTab = react_1.default.memo(() => {
               </react_native_1.Pressable>)}
           </react_native_1.View>
 
+          {/* Pause / Resume Live Updates Button */}
+          <react_native_1.TouchableOpacity style={[
+            styles_1.default.toolbarBtn,
+            isReduxPaused && {
+                backgroundColor: `${AppColors_1.AppColors.darkOrange}1F`,
+                borderColor: AppColors_1.AppColors.darkOrange,
+            },
+        ]} onPress={handleTogglePause} hitSlop={6}>
+            <NetworkIcons_1.HeaderPauseIcon isPaused={isReduxPaused} color={isReduxPaused
+            ? AppColors_1.AppColors.darkOrange
+            : AppColors_1.AppColors.grayTextStrong} size={16}/>
+          </react_native_1.TouchableOpacity>
+
           {/* Sort Button */}
           <react_native_1.TouchableOpacity style={[
             styles_1.default.toolbarBtn,
@@ -221,11 +530,16 @@ const ReduxTab = react_1.default.memo(() => {
           <react_native_1.Text style={reduxTabStyles.resultCount}>
             Showing {filteredSlices.length} of {sliceItems.length} state slices
           </react_native_1.Text>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-            {sortMode === 'latest' ? (<NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple} size={11}/>) : (<NetworkIcons_1.TextAaIcon color={AppColors_1.AppColors.brandPurple} size={11}/>)}
-            <react_native_1.Text style={reduxTabStyles.sortLabel}>
-              {sortMode === 'latest' ? 'Newest Updates First' : 'Alphabetical (A-Z)'}
-            </react_native_1.Text>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            {isReduxPaused && (<react_native_1.View style={reduxTabStyles.pausedBannerPill}>
+                <react_native_1.Text style={reduxTabStyles.pausedBannerText}>PAUSED</react_native_1.Text>
+              </react_native_1.View>)}
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              {sortMode === 'latest' ? (<NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple} size={11}/>) : (<NetworkIcons_1.TextAaIcon color={AppColors_1.AppColors.brandPurple} size={11}/>)}
+              <react_native_1.Text style={reduxTabStyles.sortLabel}>
+                {sortMode === 'latest' ? 'Newest Updates First' : 'Alphabetical (A-Z)'}
+              </react_native_1.Text>
+            </react_native_1.View>
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.View>
@@ -428,17 +742,104 @@ const reduxTabStyles = react_native_1.StyleSheet.create({
     livePillText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 10,
-        color: '#047857',
+        color: AppColors_1.AppColors.emerald700,
     },
-    lastActionRow: {
+    loadingPill: {
+        backgroundColor: AppColors_1.AppColors.amber100,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.amber200,
+    },
+    loadingPillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.amber800Warm,
+    },
+    errorPill: {
+        backgroundColor: AppColors_1.AppColors.red100,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.errorBorder,
+    },
+    errorPillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.red600,
+    },
+    emptyPill: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    emptyPillText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    keysContainer: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 6,
+        marginTop: 4,
+        marginBottom: 4,
+    },
+    keysHeading: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    keysWrap: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 4,
+        flex: 1,
+    },
+    keyChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.slate100,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.slate200,
+        maxWidth: 120,
+    },
+    keyChipText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.slate700,
+    },
+    keyMoreChip: {
+        backgroundColor: AppColors_1.AppColors.purple100,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.purple200,
+    },
+    keyMoreChipText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.brandPurple,
+    },
+    lastActionRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
         backgroundColor: AppColors_1.AppColors.grayBackground,
         borderRadius: 6,
         paddingHorizontal: 8,
-        paddingVertical: 4,
-        marginTop: 2,
+        paddingVertical: 5,
+        marginTop: 4,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.dividerColor,
     },
@@ -448,15 +849,35 @@ const reduxTabStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayTextWeak,
     },
     lastActionValue: {
-        flex: 1,
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 11,
         color: AppColors_1.AppColors.primaryBlack,
     },
+    payloadPreviewText: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        marginLeft: 4,
+    },
     highlight: {
-        backgroundColor: '#FEF08A',
-        color: '#854D0E',
+        backgroundColor: AppColors_1.AppColors.yellow200,
+        color: AppColors_1.AppColors.yellow800,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
+    pausedBannerPill: {
+        backgroundColor: AppColors_1.AppColors.amber100,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.amber200,
+    },
+    pausedBannerText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.amber800Warm,
+        letterSpacing: 0.5,
     },
 });
 exports.default = ReduxTab;