react-native-inapp-inspector 1.1.29 → 1.1.32

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();

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: {