react-native-inapp-inspector 1.1.34 → 1.1.35

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

@@ -50,6 +50,7 @@ const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
+const i18n_1 = require("../../i18n");
 const NetworkIcons_1 = require("../NetworkIcons");
 const STATUS_META = {
     ALL: { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon },
@@ -96,8 +97,43 @@ const FilterChip = react_1.default.memo(({ label, color, Icon, badge, active, on
 });
 const NetworkTab = react_1.default.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, } = (0, InspectorContext_1.useInspector)();
+    const { t } = (0, i18n_1.useTranslation)();
     const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
     const apisListRef = (0, react_1.useRef)(null);
+    const networkMetrics = (0, react_1.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 = (0, react_1.useCallback)(({ item, index }) => {
         if (item.type === 'header') {
             return (<AnimatedEntrance_1.default index={index} distance={8}>
@@ -136,7 +172,67 @@ const NetworkTab = react_1.default.memo(() => {
         setSelected,
     ]);
     return (<react_native_1.View style={{ flex: 1 }}>
-      <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
+      <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 6 }}>
+            {/* Network Health & Telemetry Strip */}
+            {networkMetrics != null && networkMetrics.totalCount > 0 && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    paddingHorizontal: 10,
+                    paddingVertical: 5.5,
+                    marginHorizontal: 12,
+                    marginBottom: 6,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+                {/* Success Rate */}
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4.5 }}>
+                  <react_native_1.View style={{
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    backgroundColor: networkMetrics.successRate >= 95
+                        ? AppColors_1.AppColors.greenColor
+                        : networkMetrics.successRate >= 80
+                            ? AppColors_1.AppColors.amber500
+                            : AppColors_1.AppColors.errorColor,
+                }}/>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {networkMetrics.successRate}%
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak }}>
+                    {t('network.successRate')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ width: 1, height: 11, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+
+                {/* Avg Latency */}
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                  <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple} size={10}/>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: AppColors_1.AppColors.purple }}>
+                    {networkMetrics.avgDuration}ms
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak }}>
+                    {t('network.avgLatency')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ width: 1, height: 11, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+
+                {/* P95 Latency */}
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {networkMetrics.p95}ms
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak }}>
+                    P95
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>)}
+
             <react_native_1.View style={styles_1.default.toolbarRow}>
               <react_native_1.View style={styles_1.default.searchContainer}>
                 <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>

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

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

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

@@ -425,14 +425,16 @@ const ReduxTab = react_1.default.memo(() => {
         <react_native_1.View style={reduxTabStyles.searchRow}>
           <react_native_1.View style={styles_1.default.searchContainer}>
             <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
-            <react_native_1.TextInput placeholder="Search Redux slices or actions..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {reduxSearch.length > 0 && (<react_native_1.Pressable onPress={() => setReduxSearch('')} hitSlop={10}>
+            <react_native_1.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_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {reduxSearch.length > 0 && (<react_native_1.Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
                 <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
               </react_native_1.Pressable>)}
           </react_native_1.View>
 
           {/* Pause / Resume Live Updates Button */}
-          <react_native_1.TouchableOpacity style={[
+          <react_native_1.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_1.default.toolbarBtn,
             isReduxPaused && {
                 backgroundColor: `${AppColors_1.AppColors.darkOrange}1F`,
@@ -445,7 +447,9 @@ const ReduxTab = react_1.default.memo(() => {
           </react_native_1.TouchableOpacity>
 
           {/* Sort Button */}
-          <react_native_1.TouchableOpacity style={[
+          <react_native_1.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_1.default.toolbarBtn,
             sortMode === 'latest' && { backgroundColor: `${AppColors_1.AppColors.brandPurple}1F`, borderColor: AppColors_1.AppColors.brandPurple },
         ]} onPress={() => setSortMode(prev => (prev === 'latest' ? 'alpha' : 'latest'))} hitSlop={6}>
@@ -577,7 +581,7 @@ const reduxTabStyles = react_native_1.StyleSheet.create({
     },
     cardRecentlyUpdated: {
         borderColor: `${AppColors_1.AppColors.brandPurple}66`,
-        backgroundColor: '#FAFAFF',
+        backgroundColor: AppColors_1.AppColors.purpleTintBg,
     },
     cardHeader: {
         flexDirection: 'row',
@@ -586,17 +590,17 @@ const reduxTabStyles = react_native_1.StyleSheet.create({
         marginBottom: 8,
     },
     sliceBadge: {
-        backgroundColor: '#EDE9FE',
+        backgroundColor: AppColors_1.AppColors.violetSoftBg,
         paddingHorizontal: 6,
         paddingVertical: 3,
         borderRadius: 5,
         borderWidth: 1,
-        borderColor: '#DDD6FE',
+        borderColor: AppColors_1.AppColors.violetSoftBorder,
     },
     sliceBadgeText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 9.5,
-        color: '#6D28D9',
+        color: AppColors_1.AppColors.purple700,
         letterSpacing: 0.4,
     },
     sliceName: {