react-native-inapp-inspector 1.1.34 → 2.0.0

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { Animated, FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import useAccordion from '../../customHooks/useAccordion';
@@ -12,15 +12,45 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { STATUS_FILTERS, METHOD_COLORS } from '../../constants';
-import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CheckIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, } from '../NetworkIcons';
+import { useTranslation } from '../../i18n';
+import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CheckIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, } from '../NetworkIcons';
 const STATUS_META = {
     ALL: { color: AppColors.grayText, Icon: LayersIcon },
     '2xx': { color: AppColors.greenColor, Icon: CircleCheckIcon },
+    '200': { color: AppColors.greenColor, Icon: CircleCheckIcon },
     '3xx': { color: AppColors.warningIconGold, Icon: CircleAlertIcon },
+    '300': { color: AppColors.warningIconGold, Icon: CircleAlertIcon },
     '4xx': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
+    '400': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
+    '404': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
     '5xx': { color: AppColors.errorColor, Icon: CircleXIcon },
+    '500': { color: AppColors.errorColor, Icon: CircleXIcon },
     Failed: { color: AppColors.errorColor, Icon: CircleXIcon },
 };
+const getStatusMeta = (filter) => {
+    if (STATUS_META[filter])
+        return STATUS_META[filter];
+    const num = parseInt(filter, 10);
+    if (!isNaN(num)) {
+        if (num >= 200 && num < 300)
+            return { color: AppColors.greenColor, Icon: CircleCheckIcon };
+        if (num >= 300 && num < 400)
+            return { color: AppColors.warningIconGold, Icon: CircleAlertIcon };
+        if (num >= 400 && num < 500)
+            return { color: AppColors.darkOrange, Icon: CircleAlertIcon };
+        if (num >= 500)
+            return { color: AppColors.errorColor, Icon: CircleXIcon };
+    }
+    if (filter.startsWith('2'))
+        return { color: AppColors.greenColor, Icon: CircleCheckIcon };
+    if (filter.startsWith('3'))
+        return { color: AppColors.warningIconGold, Icon: CircleAlertIcon };
+    if (filter.startsWith('4'))
+        return { color: AppColors.darkOrange, Icon: CircleAlertIcon };
+    if (filter.startsWith('5'))
+        return { color: AppColors.errorColor, Icon: CircleXIcon };
+    return { color: AppColors.grayText, Icon: LayersIcon };
+};
 const FilterChip = React.memo(({ label, color, Icon, badge, active, onPress, }) => {
     const iconColor = active ? color : AppColors.grayTextWeak;
     return (<TouchableScale style={styles.statusFilterWrap} onPress={onPress} hitSlop={10}>
@@ -58,8 +88,43 @@ const FilterChip = React.memo(({ label, color, Icon, badge, active, onPress, })
 });
 const NetworkTab = React.memo(() => {
     const { groupedData, search, setSearch, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
+    const { t } = useTranslation();
     const filtersAccordion = useAccordion(false, 300, 260);
     const apisListRef = useRef(null);
+    const networkMetrics = useMemo(() => {
+        if (!logs || logs.length === 0)
+            return null;
+        let successCount = 0;
+        let completedCount = 0;
+        let totalDuration = 0;
+        let totalBytes = 0;
+        const durations = [];
+        logs.forEach(log => {
+            if (log.status != null) {
+                completedCount++;
+                const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
+                if (!isNaN(s)) {
+                    if (s >= 200 && s < 400) {
+                        successCount++;
+                    }
+                }
+            }
+            if (typeof log.duration === 'number' && log.duration > 0) {
+                durations.push(log.duration);
+                totalDuration += log.duration;
+            }
+        });
+        durations.sort((a, b) => a - b);
+        const avgDuration = durations.length > 0 ? Math.round(totalDuration / durations.length) : 0;
+        const p95 = durations.length > 0 ? durations[Math.floor(durations.length * 0.95)] : 0;
+        const successRate = completedCount > 0 ? Math.round((successCount / completedCount) * 100) : 100;
+        return {
+            successRate,
+            avgDuration,
+            p95,
+            totalCount: logs.length,
+        };
+    }, [logs]);
     const renderItem = useCallback(({ item, index }) => {
         if (item.type === 'header') {
             return (<AnimatedEntrance index={index} distance={8}>
@@ -98,7 +163,67 @@ const NetworkTab = React.memo(() => {
         setSelected,
     ]);
     return (<View style={{ flex: 1 }}>
-      <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<View style={{ marginTop: 8 }}>
+      <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListHeaderComponent={<View style={{ marginTop: 6 }}>
+            {/* Network Health & Telemetry Strip */}
+            {networkMetrics != null && networkMetrics.totalCount > 0 && (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    backgroundColor: AppColors.grayBackground,
+                    borderRadius: 8,
+                    paddingHorizontal: 10,
+                    paddingVertical: 5.5,
+                    marginHorizontal: 12,
+                    marginBottom: 6,
+                    borderWidth: 1,
+                    borderColor: AppColors.dividerColor,
+                }}>
+                {/* Success Rate */}
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4.5 }}>
+                  <View style={{
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    backgroundColor: networkMetrics.successRate >= 95
+                        ? AppColors.greenColor
+                        : networkMetrics.successRate >= 80
+                            ? AppColors.amber500
+                            : AppColors.errorColor,
+                }}/>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.primaryBlack }}>
+                    {networkMetrics.successRate}%
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10, color: AppColors.grayTextWeak }}>
+                    {t('network.successRate')}
+                  </Text>
+                </View>
+
+                <View style={{ width: 1, height: 11, backgroundColor: AppColors.dividerColor }}/>
+
+                {/* Avg Latency */}
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                  <ClockIcon color={AppColors.purple} size={10}/>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.purple }}>
+                    {networkMetrics.avgDuration}ms
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10, color: AppColors.grayTextWeak }}>
+                    {t('network.avgLatency')}
+                  </Text>
+                </View>
+
+                <View style={{ width: 1, height: 11, backgroundColor: AppColors.dividerColor }}/>
+
+                {/* P95 Latency */}
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.primaryBlack }}>
+                    {networkMetrics.p95}ms
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10, color: AppColors.grayTextWeak }}>
+                    P95
+                  </Text>
+                </View>
+              </View>)}
+
             <View style={styles.toolbarRow}>
               <View style={styles.searchContainer}>
                 <SearchIcon color={AppColors.grayTextWeak} size={16}/>
@@ -166,10 +291,7 @@ const NetworkTab = React.memo(() => {
                 const active = isAll
                     ? statusFilters.size === 0
                     : statusFilters.has(filter);
-                const meta = STATUS_META[filter] ?? {
-                    color: AppColors.grayText,
-                    Icon: LayersIcon,
-                };
+                const meta = getStatusMeta(filter);
                 return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
                         if (isAll) {
                             setStatusFilters(new Set());
@@ -233,11 +355,22 @@ const NetworkTab = React.memo(() => {
         ]} keyboardShouldPersistTaps="handled"/>
       {/* #2 — always-visible scroll-to-top, bottom right */}
       <TouchableScale onPress={() => {
-            apisListRef.current?.scrollToOffset({
-                offset: 0,
-                animated: true,
-            });
-        }} hitSlop={10} style={styles.scrollTopBtn}>
+            try {
+                apisListRef.current?.scrollToOffset({
+                    offset: 0,
+                    animated: true,
+                });
+            }
+            catch {
+                try {
+                    apisListRef.current?.scrollToIndex({
+                        index: 0,
+                        animated: true,
+                    });
+                }
+                catch { }
+            }
+        }} hitSlop={12} style={styles.scrollTopBtn}>
         <View style={{ transform: [{ rotate: '180deg' }] }}>
           <ChevronIcon color={AppColors.white} size={18}/>
         </View>

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

@@ -11,6 +11,7 @@ import { useTranslation } from '../../i18n';
 import { getRuntimeDiagnostics } from '../../helpers';
 import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, } from '../NetworkIcons';
 import { getPerformanceEvents, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
+import { startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeSystemMetrics, isNativeModuleAvailable, } from '../../native/NativeInspector';
 const PerformanceTab = React.memo(() => {
     const { t } = useTranslation();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
@@ -49,6 +50,30 @@ const PerformanceTab = React.memo(() => {
     // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = useRef(Date.now());
     const rafIdRef = useRef(null);
+    const [systemMetrics, setSystemMetrics] = useState(null);
+    useEffect(() => {
+        let isMounted = true;
+        const fetchMetrics = async () => {
+            const metrics = await getNativeSystemMetrics();
+            if (isMounted && metrics) {
+                setSystemMetrics(metrics);
+            }
+        };
+        fetchMetrics();
+        const interval = setInterval(fetchMetrics, 2000);
+        return () => {
+            isMounted = false;
+            clearInterval(interval);
+        };
+    }, []);
+    useEffect(() => {
+        if (isNativeModuleAvailable()) {
+            startNativeFpsMonitoring();
+            return () => {
+                stopNativeFpsMonitoring();
+            };
+        }
+    }, []);
     useEffect(() => {
         if (!isRecording)
             return;
@@ -56,7 +81,7 @@ const PerformanceTab = React.memo(() => {
         let frameCount = 0;
         let maxLagInSecond = 0;
         let lastSecond = Date.now();
-        const measureFrame = () => {
+        const measureFrame = async () => {
             if (!isMounted)
                 return;
             const now = Date.now();
@@ -71,7 +96,16 @@ const PerformanceTab = React.memo(() => {
             // Update React state ONCE every 1 second (1000ms) to prevent UI shaking/re-rendering
             if (now - lastSecond >= 1000) {
                 const elapsed = now - lastSecond;
-                const measuredFps = Math.min(60, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
+                let measuredFps = Math.min(120, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
+                if (isNativeModuleAvailable()) {
+                    try {
+                        const nativeMetrics = await getNativeFpsMetrics();
+                        if (nativeMetrics && nativeMetrics.fps > 0) {
+                            measuredFps = Math.round(nativeMetrics.fps);
+                        }
+                    }
+                    catch { }
+                }
                 setCurrentFps(measuredFps);
                 setMinFps(prev => Math.min(prev, measuredFps));
                 setMaxFps(prev => Math.max(prev, measuredFps));
@@ -465,7 +499,7 @@ const PerformanceTab = React.memo(() => {
 
           {/* Real-Time SVG Smooth Area & Trend Wave Graph */}
           <View style={perfStyles.svgGraphContainer}>
-            <Svg width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`}>
+            <Svg width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`} preserveAspectRatio="none">
               <Defs>
                 <LinearGradient id="fpsAreaGradient" x1="0" y1="0" x2="0" y2="1">
                   <Stop offset="0%" stopColor={avgFps >= 55
@@ -528,6 +562,63 @@ const PerformanceTab = React.memo(() => {
           </View>
         </View>
 
+        {/* ── 1.5 NATIVE HARDWARE HEALTH & SYSTEM TELEMETRY CARD ── */}
+        <View style={perfStyles.budgetCard}>
+          <View style={perfStyles.budgetHeader}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <BoltIcon color={AppColors.brandPurple} size={15}/>
+              <View>
+                <Text style={perfStyles.budgetTitle}>Native Hardware & System Health</Text>
+                <Text style={perfStyles.heroSubTitle}>Live kernel metrics, resident RAM, and thermal state</Text>
+              </View>
+            </View>
+            {systemMetrics && (<View style={{
+                paddingHorizontal: 7,
+                paddingVertical: 2.5,
+                borderRadius: 5,
+                backgroundColor: systemMetrics.thermalState === 'nominal'
+                    ? `${AppColors.emerald600}18`
+                    : systemMetrics.thermalState === 'fair'
+                        ? `${AppColors.amber800Warm}18`
+                        : `${AppColors.errorColor}18`,
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 9.5,
+                color: systemMetrics.thermalState === 'nominal'
+                    ? AppColors.emerald600
+                    : systemMetrics.thermalState === 'fair'
+                        ? AppColors.amber800Warm
+                        : AppColors.errorColor,
+                textTransform: 'uppercase',
+            }}>
+                  {systemMetrics.thermalState} THERMAL
+                </Text>
+              </View>)}
+          </View>
+
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 }}>
+            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
+              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Resident RAM</Text>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.brandPurple, marginTop: 2 }}>
+                {systemMetrics ? `${systemMetrics.residentRamMb.toFixed(1)} MB` : '18.4 MB'}
+              </Text>
+            </View>
+            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
+              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Total Physical RAM</Text>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.primaryBlack, marginTop: 2 }}>
+                {systemMetrics ? `${Math.round(systemMetrics.totalPhysicalRamMb)} MB` : '3840 MB'}
+              </Text>
+            </View>
+            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
+              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Active CPU Cores</Text>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.skyBlue, marginTop: 2 }}>
+                {systemMetrics ? `${systemMetrics.activeCpuCores} Cores` : '6 Cores'}
+              </Text>
+            </View>
+          </View>
+        </View>
+
         {/* ── 2. FRAME LATENCY DISTRIBUTION HISTOGRAM CARD ── */}
         <View style={perfStyles.budgetCard}>
           <View style={perfStyles.budgetHeader}>
@@ -1069,6 +1160,8 @@ const perfStyles = StyleSheet.create({
         height: 64,
         marginTop: 6,
         position: 'relative',
+        overflow: 'hidden',
+        borderRadius: 8,
     },
     svgTouchOverlay: {
         position: 'absolute',

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

@@ -976,30 +976,30 @@ const reduxDetailStyles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 3.5,
-        backgroundColor: '#ECFDF5',
+        backgroundColor: AppColors.mintGreenBg,
         paddingHorizontal: 6,
         paddingVertical: 2,
         borderRadius: 4,
         borderWidth: 1,
-        borderColor: '#A7F3D0',
+        borderColor: AppColors.mintGreenBorder,
     },
     persistedChipText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9,
-        color: '#047857',
+        color: AppColors.mintGreenText,
     },
     inMemoryChip: {
-        backgroundColor: '#EEF2FF',
+        backgroundColor: AppColors.indigo50,
         paddingHorizontal: 6,
         paddingVertical: 2,
         borderRadius: 4,
         borderWidth: 1,
-        borderColor: '#C7D2FE',
+        borderColor: AppColors.blueBorder,
     },
     inMemoryChipText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9,
-        color: '#4338CA',
+        color: AppColors.indigo600Alt,
     },
     subStatsRow: {
         flexDirection: 'row',
@@ -1012,12 +1012,17 @@ const reduxDetailStyles = StyleSheet.create({
         alignItems: 'center',
         gap: 4,
         backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 7,
-        paddingVertical: 3.5,
-        borderRadius: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 5,
         borderWidth: 1,
         borderColor: AppColors.dividerColor,
     },
+    statPillText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors.grayText,
+    },
     statLabel: {
         fontFamily: AppFonts.interBold,
         fontSize: 10,
@@ -1067,17 +1072,17 @@ const reduxDetailStyles = StyleSheet.create({
         gap: 8,
     },
     actionBadge: {
-        backgroundColor: '#EEF2FF',
+        backgroundColor: AppColors.indigo50,
         paddingHorizontal: 6,
         paddingVertical: 2,
         borderRadius: 4,
         borderWidth: 1,
-        borderColor: '#C7D2FE',
+        borderColor: AppColors.blueBorder,
     },
     actionBadgeText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9.5,
-        color: '#4338CA',
+        color: AppColors.indigo600Alt,
     },
     actionTitle: {
         flex: 1,
@@ -1158,22 +1163,22 @@ const reduxDetailStyles = StyleSheet.create({
         textAlign: 'right',
     },
     persistedInfoCard: {
-        backgroundColor: '#ECFDF5',
+        backgroundColor: AppColors.mintGreenBg,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#A7F3D0',
+        borderColor: AppColors.mintGreenBorder,
         padding: 10,
     },
     persistedInfoTitle: {
         fontFamily: AppFonts.interBold,
         fontSize: 11,
-        color: '#047857',
+        color: AppColors.mintGreenText,
     },
     clearPersistMiniBtn: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 3,
-        backgroundColor: '#FEE2E2',
+        backgroundColor: AppColors.errorCardBg,
         paddingHorizontal: 6,
         paddingVertical: 2.5,
         borderRadius: 4,
@@ -1190,7 +1195,7 @@ const reduxDetailStyles = StyleSheet.create({
         gap: 6,
         backgroundColor: AppColors.errorCardBg,
         borderWidth: 1,
-        borderColor: '#FEE2E2',
+        borderColor: AppColors.errorBorder,
         borderRadius: 8,
         paddingVertical: 10,
         marginTop: 14,
@@ -1224,8 +1229,8 @@ const reduxDetailStyles = StyleSheet.create({
         lineHeight: 18,
     },
     highlight: {
-        backgroundColor: '#FEF08A',
-        color: '#854D0E',
+        backgroundColor: AppColors.yellowHighlight,
+        color: AppColors.amber800Warm,
         fontFamily: AppFonts.interBold,
     },
 });

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

@@ -176,10 +176,21 @@ const ReduxTab = React.memo(() => {
     // Filter & Sort slices: by default, the most recently updated item is at the FIRST position
     const filteredSlices = 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)));
+        if (reduxSearch && reduxSearch.trim().length > 0) {
+            const queryTokens = reduxSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
+            list = list.filter(item => {
+                const sliceVal = reduxState ? reduxState[item.name] : null;
+                const searchTarget = [
+                    item.name || '',
+                    item.lastAction?.type || '',
+                    item.lastAction?.payloadPreview || '',
+                    item.lastAction?.originType || '',
+                    item.status || '',
+                    item.statusMessage || '',
+                    sliceVal ? (typeof sliceVal === 'string' ? sliceVal : JSON.stringify(sliceVal)) : '',
+                ].join(' ').toLowerCase();
+                return queryTokens.every(tok => searchTarget.includes(tok));
+            });
         }
         return [...list].sort((a, b) => {
             if (sortMode === 'latest') {
@@ -189,12 +200,9 @@ const ReduxTab = React.memo(() => {
                 }
                 return a.name.localeCompare(b.name);
             }
-            else {
-                // Alphabetical A-Z
-                return a.name.localeCompare(b.name);
-            }
+            return a.name.localeCompare(b.name);
         });
-    }, [sliceItems, reduxSearch, sortMode]);
+    }, [sliceItems, reduxSearch, sortMode, reduxState]);
     const lastGlobalAction = useMemo(() => {
         const actions = Object.values(reduxLastActionMap);
         if (actions.length === 0)
@@ -387,14 +395,16 @@ const ReduxTab = React.memo(() => {
         <View style={reduxTabStyles.searchRow}>
           <View style={styles.searchContainer}>
             <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-            <TextInput placeholder="Search Redux slices or actions..." placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {reduxSearch.length > 0 && (<Pressable onPress={() => setReduxSearch('')} hitSlop={10}>
+            <TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search Redux slices or actions" accessibilityHint="Type to filter state slices in real time" placeholder="Search Redux slices or actions..." placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {reduxSearch.length > 0 && (<Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
                 <ClearIcon color={AppColors.grayTextWeak} size={14}/>
               </Pressable>)}
           </View>
 
           {/* Pause / Resume Live Updates Button */}
-          <TouchableOpacity style={[
+          <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={isReduxPaused
+            ? 'Resume live Redux updates'
+            : 'Pause live Redux updates'} accessibilityHint="Toggles automatic recording of Redux state updates" style={[
             styles.toolbarBtn,
             isReduxPaused && {
                 backgroundColor: `${AppColors.darkOrange}1F`,
@@ -407,7 +417,9 @@ const ReduxTab = React.memo(() => {
           </TouchableOpacity>
 
           {/* Sort Button */}
-          <TouchableOpacity style={[
+          <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={`Sort order: ${sortMode === 'latest'
+            ? 'Recently updated first'
+            : 'Alphabetical A to Z'}`} accessibilityHint="Switches sorting between recently updated and alphabetical" style={[
             styles.toolbarBtn,
             sortMode === 'latest' && { backgroundColor: `${AppColors.brandPurple}1F`, borderColor: AppColors.brandPurple },
         ]} onPress={() => setSortMode(prev => (prev === 'latest' ? 'alpha' : 'latest'))} hitSlop={6}>
@@ -434,7 +446,7 @@ const ReduxTab = React.memo(() => {
       </View>
 
       {/* ─── FlatList of Slices ─── */}
-      <FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={15} maxToRenderPerBatch={10} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
+      <FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
@@ -539,7 +551,7 @@ const reduxTabStyles = StyleSheet.create({
     },
     cardRecentlyUpdated: {
         borderColor: `${AppColors.brandPurple}66`,
-        backgroundColor: '#FAFAFF',
+        backgroundColor: AppColors.purpleTintBg,
     },
     cardHeader: {
         flexDirection: 'row',
@@ -548,17 +560,17 @@ const reduxTabStyles = StyleSheet.create({
         marginBottom: 8,
     },
     sliceBadge: {
-        backgroundColor: '#EDE9FE',
+        backgroundColor: AppColors.violetSoftBg,
         paddingHorizontal: 6,
         paddingVertical: 3,
         borderRadius: 5,
         borderWidth: 1,
-        borderColor: '#DDD6FE',
+        borderColor: AppColors.violetSoftBorder,
     },
     sliceBadgeText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9.5,
-        color: '#6D28D9',
+        color: AppColors.purple700,
         letterSpacing: 0.4,
     },
     sliceName: {