react-native-inapp-inspector 2.2.2 → 2.2.4

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

@@ -60,6 +60,7 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const constants_1 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
+const memoryManager_1 = require("../../helpers/memoryManager");
 const SettingsPanel = () => {
     const { t } = (0, i18n_1.useTranslation)();
     const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, } = (0, InspectorContext_1.useInspector)();
@@ -136,6 +137,20 @@ const SettingsPanel = () => {
             icon: 'redux',
             desc: 'Store state diffing, action history & reducer timeline',
         },
+        {
+            key: 'device',
+            label: 'Device Info',
+            category: 'diagnostic',
+            icon: 'device',
+            desc: 'Hardware specs, IP address, screen metrics, UDID & runtime stats',
+        },
+        {
+            key: 'storage',
+            label: 'Storage Inspector',
+            category: 'telemetry',
+            icon: 'storage',
+            desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
+        },
     ];
     // Staged selection state for checkboxes before clicking "Save Changes"
     const [stagedTabVisibility, setStagedTabVisibility] = (0, react_1.useState)(() => ({
@@ -146,6 +161,8 @@ const SettingsPanel = () => {
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
         crash: Boolean(tabVisibility?.crash),
+        device: Boolean(tabVisibility?.device ?? true),
+        storage: Boolean(tabVisibility?.storage ?? true),
     }));
     // Synchronize staged state with tabVisibility when tabVisibility updates
     (0, react_1.useEffect)(() => {
@@ -157,6 +174,8 @@ const SettingsPanel = () => {
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
             crash: Boolean(tabVisibility?.crash),
+            device: Boolean(tabVisibility?.device ?? true),
+            storage: Boolean(tabVisibility?.storage ?? true),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = (0, react_1.useMemo)(() => {
@@ -364,7 +383,7 @@ const SettingsPanel = () => {
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: 6,
+            gap: 5,
             borderRadius: 9,
             backgroundColor: settingsActiveSubTab === 'ui'
                 ? AppColors_1.AppColors.purple
@@ -373,9 +392,9 @@ const SettingsPanel = () => {
             <NetworkIcons_1.ScreenIcon color={settingsActiveSubTab === 'ui'
             ? AppColors_1.AppColors.white
             : AppColors_1.AppColors.grayText} size={13}/>
-            <react_native_1.Text style={{
+            <react_native_1.Text numberOfLines={1} style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12.5,
+            fontSize: 12,
             lineHeight: 16,
             color: settingsActiveSubTab === 'ui'
                 ? AppColors_1.AppColors.white
@@ -384,9 +403,39 @@ const SettingsPanel = () => {
               {t('settings.uiPreferences')}
             </react_native_1.Text>
           </TouchableScale_1.default>
+
+          <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.ramLimits')} accessibilityState={{ selected: settingsActiveSubTab === 'limits' }} onPress={() => {
+            (0, InspectorContext_1.animateNextLayout)();
+            setSettingsActiveSubTab('limits');
+        }} style={{
+            flex: 1,
+            paddingVertical: 9,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 5,
+            borderRadius: 9,
+            backgroundColor: settingsActiveSubTab === 'limits'
+                ? AppColors_1.AppColors.purple
+                : 'transparent',
+        }}>
+            <NetworkIcons_1.BrainIcon color={settingsActiveSubTab === 'limits'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayText} size={13}/>
+            <react_native_1.Text numberOfLines={1} style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 12,
+            lineHeight: 16,
+            color: settingsActiveSubTab === 'limits'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.grayText,
+        }}>
+              {t('settings.ramLimits')}
+            </react_native_1.Text>
+          </TouchableScale_1.default>
         </react_native_1.View>
 
-        {settingsActiveSubTab === 'module' ? (<react_native_1.View style={{ gap: 12 }}>
+        {settingsActiveSubTab === 'module' && (<react_native_1.View style={{ gap: 12 }}>
             {/* Individual Module Cards with Left Checkboxes */}
             <react_native_1.View style={{ gap: 10 }}>
               {allModules.map(moduleItem => {
@@ -524,6 +573,12 @@ const SettingsPanel = () => {
                           {moduleItem.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'device' && (<NetworkIcons_1.SmartphoneIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                         </react_native_1.View>
 
                         {/* Titles & Status Pill */}
@@ -726,231 +781,9 @@ const SettingsPanel = () => {
                   </react_native_1.View>);
             })}
             </react_native_1.View>
+          </react_native_1.View>)}
 
-            {/* Section 3.5: RAM-Based Auto Limits */}
-            <react_native_1.View style={{
-                backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors_1.AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                RAM-Based Auto Limits
-              </react_native_1.Text>
-
-              {/* Auto RAM Limit Toggle */}
-              <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-                <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-            }}>
-                  <react_native_1.View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: AppColors_1.AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                    <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={15}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors_1.AppColors.primaryBlack,
-            }}>
-                      Auto-Calculate Limits from Device RAM
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors_1.AppColors.grayText,
-                marginTop: 1,
-            }}>
-                      Automatically set API, Logs, Analytics & Crash limits
-                      based on available memory
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                </react_native_1.View>
-
-                <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle auto RAM limit calculation" accessibilityState={{ checked: isAutoRamLimitEnabled }} onPress={() => setIsAutoRamLimitEnabled(prev => !prev)} style={{
-                width: 42,
-                height: 24,
-                borderRadius: 12,
-                backgroundColor: isAutoRamLimitEnabled
-                    ? AppColors_1.AppColors.purple
-                    : AppColors_1.AppColors.grayBorderSecondary,
-                padding: 2,
-                justifyContent: 'center',
-                alignItems: isAutoRamLimitEnabled
-                    ? 'flex-end'
-                    : 'flex-start',
-            }}>
-                  <react_native_1.View style={{
-                width: 20,
-                height: 20,
-                borderRadius: 10,
-                backgroundColor: AppColors_1.AppColors.white,
-                shadowColor: AppColors_1.AppColors.black,
-                shadowOpacity: 0.18,
-                shadowRadius: 2,
-                shadowOffset: { width: 0, height: 1 },
-            }}/>
-                </TouchableScale_1.default>
-              </react_native_1.View>
-
-              <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
-
-              {/* Device Free RAM Display */}
-              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-                <react_native_1.View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: isAutoRamLimitEnabled
-                    ? `${AppColors_1.AppColors.purple}14`
-                    : AppColors_1.AppColors.grayBackground,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                  <NetworkIcons_1.SignalIcon color={isAutoRamLimitEnabled
-                ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayTextWeak} size={15}/>
-                </react_native_1.View>
-                <react_native_1.View style={{ flex: 1 }}>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: isAutoRamLimitEnabled
-                    ? AppColors_1.AppColors.primaryBlack
-                    : AppColors_1.AppColors.grayText,
-            }}>
-                    Detected Free RAM
-                  </react_native_1.Text>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors_1.AppColors.grayText,
-                marginTop: 1,
-            }}>
-                    {deviceFreeRamMb} MB available
-                  </react_native_1.Text>
-                </react_native_1.View>
-                <react_native_1.View style={{
-                paddingHorizontal: 10,
-                paddingVertical: 5,
-                borderRadius: 8,
-                backgroundColor: isAutoRamLimitEnabled
-                    ? `${AppColors_1.AppColors.purple}12`
-                    : AppColors_1.AppColors.grayBackground,
-                borderWidth: 1,
-                borderColor: isAutoRamLimitEnabled
-                    ? `${AppColors_1.AppColors.purple}26`
-                    : AppColors_1.AppColors.dividerColor,
-            }}>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 12,
-                lineHeight: 15,
-                color: isAutoRamLimitEnabled
-                    ? AppColors_1.AppColors.purple
-                    : AppColors_1.AppColors.grayText,
-            }}>
-                    {deviceFreeRamMb} MB
-                  </react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>
-
-              {/* Current Auto-Calculated Limits Preview */}
-              {isAutoRamLimitEnabled && (<react_native_1.View style={{
-                    marginTop: 8,
-                    paddingTop: 8,
-                    borderTopWidth: 1,
-                    borderTopColor: AppColors_1.AppColors.dividerColor,
-                    gap: 6,
-                }}>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11.5,
-                    lineHeight: 15,
-                    color: AppColors_1.AppColors.purple,
-                }}>
-                    Auto Profile: {autoRamProfile.profileName}
-                  </react_native_1.Text>
-                  <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
-                    {[
-                    {
-                        label: 'APIs',
-                        value: autoRamProfile.maxNetworkLogs,
-                        color: AppColors_1.AppColors.blue500,
-                    },
-                    {
-                        label: 'Logs',
-                        value: autoRamProfile.maxConsoleLogs,
-                        color: AppColors_1.AppColors.sky500,
-                    },
-                    {
-                        label: 'Analytics',
-                        value: autoRamProfile.maxAnalyticsEvents,
-                        color: AppColors_1.AppColors.purple,
-                    },
-                    {
-                        label: 'Crash',
-                        value: autoRamProfile.maxCrashRecords,
-                        color: AppColors_1.AppColors.errorColor,
-                    },
-                ].map(item => (<react_native_1.View key={item.label} style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4,
-                        paddingHorizontal: 8,
-                        paddingVertical: 4,
-                        borderRadius: 6,
-                        backgroundColor: `${item.color}14`,
-                        borderWidth: 1,
-                        borderColor: `${item.color}33`,
-                    }}>
-                        <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 10.5,
-                        lineHeight: 14,
-                        color: item.color,
-                    }}>
-                          {item.label}
-                        </react_native_1.Text>
-                        <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 10.5,
-                        lineHeight: 14,
-                        color: item.color,
-                    }}>
-                          {item.value}
-                        </react_native_1.Text>
-                      </react_native_1.View>))}
-                  </react_native_1.View>
-                </react_native_1.View>)}
-            </react_native_1.View>
-          </react_native_1.View>) : (<react_native_1.View style={{ gap: 14 }}>
+        {settingsActiveSubTab === 'ui' && (<react_native_1.View style={{ gap: 14 }}>
             {/* Section 1: Appearance */}
             <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
@@ -1638,6 +1471,9 @@ const SettingsPanel = () => {
                         v{constants_1.LIB_VERSION}
                       </react_native_1.Text>
                       {updateAvailable ? (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
                     backgroundColor: '#F59E0B20',
                     paddingHorizontal: 6,
                     paddingVertical: 1.5,
@@ -1650,8 +1486,9 @@ const SettingsPanel = () => {
                     fontSize: 9.5,
                     color: '#D97706',
                 }}>
-                            v{latestNpmVersion} Available ⚡
+                            v{latestNpmVersion} Available
                           </react_native_1.Text>
+                          <NetworkIcons_1.BoltIcon size={9} color="#D97706"/>
                         </react_native_1.View>) : (<react_native_1.View style={{
                     backgroundColor: `${AppColors_1.AppColors.emerald500}20`,
                     paddingHorizontal: 6,
@@ -1703,6 +1540,380 @@ const SettingsPanel = () => {
               </react_native_1.View>
             </react_native_1.View>
           </react_native_1.View>)}
+
+        {settingsActiveSubTab === 'limits' && (<react_native_1.View style={{ gap: 14 }}>
+            {/* Section 1: Device RAM & Auto Profile */}
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                DEVICE MEMORY & AUTO PROFILES
+              </react_native_1.Text>
+
+              {/* Auto RAM Limit Toggle */}
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+                  <react_native_1.View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                    <NetworkIcons_1.BrainIcon color={AppColors_1.AppColors.purple} size={16}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                      Auto-Calculate Limits from RAM
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                      Dynamically sets log limits according to available device memory
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle auto RAM limit calculation" accessibilityState={{ checked: isAutoRamLimitEnabled }} onPress={() => setIsAutoRamLimitEnabled(prev => !prev)} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: isAutoRamLimitEnabled
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: isAutoRamLimitEnabled
+                    ? 'flex-end'
+                    : 'flex-start',
+            }}>
+                  <react_native_1.View style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.white,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+
+              <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+
+              {/* Device Free RAM Display */}
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                <react_native_1.View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: isAutoRamLimitEnabled
+                    ? `${AppColors_1.AppColors.purple}14`
+                    : AppColors_1.AppColors.grayBackground,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                  <NetworkIcons_1.SignalIcon color={isAutoRamLimitEnabled
+                ? AppColors_1.AppColors.purple
+                : AppColors_1.AppColors.grayTextWeak} size={15}/>
+                </react_native_1.View>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: isAutoRamLimitEnabled
+                    ? AppColors_1.AppColors.primaryBlack
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                    Detected Available RAM
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                    {deviceFreeRamMb} MB available on device
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={{
+                paddingHorizontal: 10,
+                paddingVertical: 5,
+                borderRadius: 8,
+                backgroundColor: isAutoRamLimitEnabled
+                    ? `${AppColors_1.AppColors.purple}12`
+                    : AppColors_1.AppColors.grayBackground,
+                borderWidth: 1,
+                borderColor: isAutoRamLimitEnabled
+                    ? `${AppColors_1.AppColors.purple}26`
+                    : AppColors_1.AppColors.dividerColor,
+            }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 12,
+                lineHeight: 15,
+                color: isAutoRamLimitEnabled
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                    {deviceFreeRamMb} MB
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              {/* Profile Overview */}
+              <react_native_1.View style={{
+                marginTop: 4,
+                paddingTop: 8,
+                borderTopWidth: 1,
+                borderTopColor: AppColors_1.AppColors.dividerColor,
+                gap: 6,
+            }}>
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                    Profile: {autoRamProfile.profileName}
+                  </react_native_1.Text>
+                  <react_native_1.View style={{
+                backgroundColor: isAutoRamLimitEnabled
+                    ? `${AppColors_1.AppColors.emerald500}18`
+                    : `${AppColors_1.AppColors.purple}18`,
+                paddingHorizontal: 7,
+                paddingVertical: 2.5,
+                borderRadius: 4,
+            }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9.5,
+                color: isAutoRamLimitEnabled
+                    ? AppColors_1.AppColors.emerald500
+                    : AppColors_1.AppColors.purple,
+            }}>
+                      {isAutoRamLimitEnabled ? 'AUTO-TUNED' : 'MANUAL'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 4 }}>
+                  {[
+                {
+                    label: 'APIs',
+                    value: isAutoRamLimitEnabled
+                        ? autoRamProfile.maxNetworkLogs
+                        : maxNetworkLogs,
+                    color: AppColors_1.AppColors.blue500,
+                },
+                {
+                    label: 'Logs',
+                    value: isAutoRamLimitEnabled
+                        ? autoRamProfile.maxConsoleLogs
+                        : maxConsoleLogs,
+                    color: AppColors_1.AppColors.sky500,
+                },
+                {
+                    label: 'Analytics',
+                    value: isAutoRamLimitEnabled
+                        ? autoRamProfile.maxAnalyticsEvents
+                        : maxAnalyticsEventsLimit,
+                    color: AppColors_1.AppColors.purple,
+                },
+                {
+                    label: 'Crash',
+                    value: isAutoRamLimitEnabled
+                        ? autoRamProfile.maxCrashRecords
+                        : maxCrashLogs,
+                    color: AppColors_1.AppColors.errorColor,
+                },
+            ].map(item => (<react_native_1.View key={item.label} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 8,
+                    paddingVertical: 4,
+                    borderRadius: 6,
+                    backgroundColor: `${item.color}14`,
+                    borderWidth: 1,
+                    borderColor: `${item.color}33`,
+                }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    lineHeight: 14,
+                    color: item.color,
+                }}>
+                        {item.label}:
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    lineHeight: 14,
+                    color: item.color,
+                }}>
+                        {item.value} max
+                      </react_native_1.Text>
+                    </react_native_1.View>))}
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Section 2: Memory-Safe OS Pruning Shield */}
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                LOW MEMORY PRESSURE PROTECTION
+              </react_native_1.Text>
+
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                <react_native_1.View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: `${AppColors_1.AppColors.emerald500}14`,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                  <NetworkIcons_1.ShieldAlertIcon color={AppColors_1.AppColors.emerald500} size={15}/>
+                </react_native_1.View>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                    OS Memory Warning Guard
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                    Automatically prunes in-memory buffers by 50% when the OS signals low memory
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={{
+                paddingHorizontal: 8,
+                paddingVertical: 3,
+                borderRadius: 6,
+                backgroundColor: `${AppColors_1.AppColors.emerald500}18`,
+            }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10,
+                color: AppColors_1.AppColors.emerald500,
+            }}>
+                    ACTIVE
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+
+              {/* Instant Prune Button */}
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 10,
+            }}>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                    Manual Memory Cleanup
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                    Prune older entries across all log stores and free RAM
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <TouchableScale_1.default onPress={() => {
+                const summary = (0, memoryManager_1.pruneAllLogs)('manual', 0.5);
+                (0, toast_1.showToast)(`Pruned ${summary.totalPruned} items from memory`);
+            }} style={{
+                backgroundColor: AppColors_1.AppColors.purple,
+                paddingHorizontal: 12,
+                paddingVertical: 8,
+                borderRadius: 8,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+            }}>
+                  <NetworkIcons_1.TrashIcon size={13} color={AppColors_1.AppColors.white}/>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.white,
+            }}>
+                    Prune Now
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>)}
         <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>