react-native-inapp-inspector 2.0.4 → 2.0.6

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

@@ -57,9 +57,12 @@ const analyticsLogger_2 = require("../../customHooks/analyticsLogger");
 const i18n_1 = require("../../i18n");
 const telemetry_1 = require("../../helpers/telemetry");
 const NetworkIcons_1 = require("../NetworkIcons");
+const constants_1 = require("../../constants");
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
 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, } = (0, InspectorContext_1.useInspector)();
+    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, isPerformanceHudEnabled, setIsPerformanceHudEnabled, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, } = (0, InspectorContext_1.useInspector)();
     const [stagedHeight, setStagedHeight] = (0, react_1.useState)(modalHeightPercent);
     const [telemetryConsent, setTelemetryConsentState] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
@@ -98,6 +101,27 @@ const SettingsPanel = () => {
             icon: 'logs',
             desc: 'Terminal console logs, warnings, errors & stack traces',
         },
+        {
+            key: 'storage',
+            label: 'Storage (AsyncStorage)',
+            category: 'core',
+            icon: 'storage',
+            desc: 'Browse, edit, create and delete local key-value storage & JSON',
+        },
+        {
+            key: 'device',
+            label: 'Device & System Info',
+            category: 'diagnostic',
+            icon: 'device',
+            desc: 'Hermes runtime, Fabric New Arch, screen metrics & build info',
+        },
+        {
+            key: 'audit',
+            label: 'Code Quality & Package Audit',
+            category: 'diagnostic',
+            icon: 'audit',
+            desc: 'Audit dependencies, peer conflicts, TS schema errors & React Native anti-patterns',
+        },
         {
             key: 'performance',
             label: 'Performance Tracker',
@@ -140,6 +164,9 @@ const SettingsPanel = () => {
         logs: Boolean(tabVisibility?.logs),
         analytics: Boolean(tabVisibility?.analytics),
         redux: Boolean(tabVisibility?.redux),
+        storage: Boolean(tabVisibility?.storage),
+        device: Boolean(tabVisibility?.device),
+        audit: Boolean(tabVisibility?.audit),
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
         crash: Boolean(tabVisibility?.crash),
@@ -151,6 +178,9 @@ const SettingsPanel = () => {
             logs: Boolean(tabVisibility?.logs),
             analytics: Boolean(tabVisibility?.analytics),
             redux: Boolean(tabVisibility?.redux),
+            storage: Boolean(tabVisibility?.storage),
+            device: Boolean(tabVisibility?.device),
+            audit: Boolean(tabVisibility?.audit),
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
             crash: Boolean(tabVisibility?.crash),
@@ -258,13 +288,15 @@ const SettingsPanel = () => {
                 MAX
               </react_native_1.Text>
             </react_native_1.View>
-            {opts.numericInput.min !== undefined || opts.numericInput.max !== undefined ? (<react_native_1.Text style={{
+            {opts.numericInput.min !== undefined ||
+                    opts.numericInput.max !== undefined ? (<react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interRegular,
                         fontSize: 10,
                         lineHeight: 13,
                         color: AppColors_1.AppColors.grayTextWeak,
                     }}>
-                Range: {opts.numericInput.min ?? 1} - {opts.numericInput.max ?? '∞'}
+                Range: {opts.numericInput.min ?? 1} -{' '}
+                {opts.numericInput.max ?? '∞'}
               </react_native_1.Text>) : null}
           </react_native_1.View>)}
         {opts.picker && (<react_native_1.View style={{
@@ -307,8 +339,8 @@ const SettingsPanel = () => {
             backgroundColor: AppColors_1.AppColors.grayBackground,
         }}>
       <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 14 }} showsVerticalScrollIndicator={false}>
-          {/* Segmented Top Navigation Sub-Tabs */}
-          <react_native_1.View style={{
+        {/* Segmented Top Navigation Sub-Tabs */}
+        <react_native_1.View style={{
             flexDirection: 'row',
             backgroundColor: AppColors_1.AppColors.primaryLight,
             borderRadius: 12,
@@ -320,71 +352,104 @@ const SettingsPanel = () => {
             shadowRadius: 4,
             shadowOffset: { width: 0, height: 2 },
         }}>
-            <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.modulesAndTools')} accessibilityState={{ selected: settingsActiveSubTab === 'module' }} onPress={() => {
+          {/* Tab 1: Modules & Tabs */}
+          <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.modulesAndTools')} accessibilityState={{ selected: settingsActiveSubTab === 'module' }} onPress={() => {
             (0, InspectorContext_1.animateNextLayout)();
             setSettingsActiveSubTab('module');
         }} style={{
             flex: 1,
-            paddingVertical: 9,
+            paddingVertical: 8,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: 6,
+            gap: 5,
             borderRadius: 9,
             backgroundColor: settingsActiveSubTab === 'module'
                 ? AppColors_1.AppColors.purple
                 : 'transparent',
         }}>
-              <NetworkIcons_1.LayersIcon color={settingsActiveSubTab === 'module'
+            <NetworkIcons_1.LayersIcon color={settingsActiveSubTab === 'module'
             ? AppColors_1.AppColors.white
-            : AppColors_1.AppColors.grayText} size={13}/>
-              <react_native_1.Text style={{
+            : AppColors_1.AppColors.grayText} size={12.5}/>
+            <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12.5,
-            lineHeight: 16,
+            fontSize: 11.5,
+            lineHeight: 15,
             color: settingsActiveSubTab === 'module'
                 ? AppColors_1.AppColors.white
                 : AppColors_1.AppColors.grayText,
         }}>
-                {t('settings.modulesAndTools')}
-              </react_native_1.Text>
-            </TouchableScale_1.default>
+              {t('settings.modulesAndTools')}
+            </react_native_1.Text>
+          </TouchableScale_1.default>
+
+          {/* Tab 2: RAM & Limits */}
+          <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: 8,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 5,
+            borderRadius: 9,
+            backgroundColor: settingsActiveSubTab === 'limits'
+                ? AppColors_1.AppColors.purple
+                : 'transparent',
+        }}>
+            <NetworkIcons_1.CpuIcon color={settingsActiveSubTab === 'limits'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayText} size={12.5}/>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 11.5,
+            lineHeight: 15,
+            color: settingsActiveSubTab === 'limits'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.grayText,
+        }}>
+              {t('settings.ramLimits')}
+            </react_native_1.Text>
+          </TouchableScale_1.default>
 
-            <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.uiPreferences')} accessibilityState={{ selected: settingsActiveSubTab === 'ui' }} onPress={() => {
+          {/* Tab 3: UI & Appearance */}
+          <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.uiPreferences')} accessibilityState={{ selected: settingsActiveSubTab === 'ui' }} onPress={() => {
             (0, InspectorContext_1.animateNextLayout)();
             setSettingsActiveSubTab('ui');
         }} style={{
             flex: 1,
-            paddingVertical: 9,
+            paddingVertical: 8,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: 6,
+            gap: 5,
             borderRadius: 9,
             backgroundColor: settingsActiveSubTab === 'ui'
                 ? AppColors_1.AppColors.purple
                 : 'transparent',
         }}>
-              <NetworkIcons_1.ScreenIcon color={settingsActiveSubTab === 'ui'
+            <NetworkIcons_1.ScreenIcon color={settingsActiveSubTab === 'ui'
             ? AppColors_1.AppColors.white
-            : AppColors_1.AppColors.grayText} size={13}/>
-              <react_native_1.Text style={{
+            : AppColors_1.AppColors.grayText} size={12.5}/>
+            <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12.5,
-            lineHeight: 16,
+            fontSize: 11.5,
+            lineHeight: 15,
             color: settingsActiveSubTab === 'ui'
                 ? AppColors_1.AppColors.white
                 : AppColors_1.AppColors.grayText,
         }}>
-                {t('settings.uiPreferences')}
-              </react_native_1.Text>
-            </TouchableScale_1.default>
-          </react_native_1.View>
+              {t('settings.uiPreferences')}
+            </react_native_1.Text>
+          </TouchableScale_1.default>
+        </react_native_1.View>
 
-          {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 => {
+        {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 => {
                 const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
                 const isAnalyticsAvail = (0, analyticsLogger_2.isAnalyticsConnected)();
                 const isUnavailable = (moduleItem.key === 'redux' && !isReduxAvail) ||
@@ -422,14 +487,14 @@ const SettingsPanel = () => {
                         shadowRadius: 5,
                         shadowOffset: { width: 0, height: 2 },
                     }}>
-                      {/* Top Row: [Checkbox] -> [Icon Tile] -> [Title & Subtitle] */}
-                      <react_native_1.View style={{
+                    {/* Top Row: [Checkbox] -> [Icon Tile] -> [Title & Subtitle] */}
+                    <react_native_1.View style={{
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         gap: 10,
                     }}>
-                        {/* 1. Checkbox on the Left */}
-                        <TouchableScale_1.default accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
+                      {/* 1. Checkbox on the Left */}
+                      <TouchableScale_1.default accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
                         checked: isChecked,
                         disabled: isLocked,
                     }} disabled={isLocked} onPress={() => {
@@ -462,14 +527,14 @@ const SettingsPanel = () => {
                         shadowRadius: 2,
                         elevation: isChecked ? 2 : 0,
                     }}>
-                          {moduleItem.key === 'apis' ? (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.blue500}/>) : isChecked ? (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.white}/>) : isLocked ? (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
-                              <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
-                              <react_native_svg_1.Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors_1.AppColors.grayText}/>
-                            </react_native_svg_1.default>) : null}
-                        </TouchableScale_1.default>
+                        {moduleItem.key === 'apis' ? (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.blue500}/>) : isChecked ? (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.white}/>) : isLocked ? (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
+                            <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
+                            <react_native_svg_1.Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors_1.AppColors.grayText}/>
+                          </react_native_svg_1.default>) : null}
+                      </TouchableScale_1.default>
 
-                        {/* 2. Middle Tap Zone: Icon + Title & Desc */}
-                        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
+                      {/* 2. Middle Tap Zone: Icon + Title & Desc */}
+                      <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
                         (0, InspectorContext_1.animateNextLayout)();
                         setSettingsPage(moduleItem.key);
                     }} style={{
@@ -478,8 +543,8 @@ const SettingsPanel = () => {
                         alignItems: 'flex-start',
                         gap: 10,
                     }}>
-                          {/* Icon Tile */}
-                          <react_native_1.View style={{
+                        {/* Icon Tile */}
+                        <react_native_1.View style={{
                         width: 36,
                         height: 36,
                         borderRadius: 10,
@@ -498,38 +563,47 @@ const SettingsPanel = () => {
                         justifyContent: 'center',
                         marginTop: 1,
                     }}>
-                            {moduleItem.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isChecked
+                          {moduleItem.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
-                            {moduleItem.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isChecked
+                          {moduleItem.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
-                            {moduleItem.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isChecked
+                          {moduleItem.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
-                            {moduleItem.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isChecked
+                          {moduleItem.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
-                            {moduleItem.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isChecked
+                          {moduleItem.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
-                            {moduleItem.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isChecked
+                          {moduleItem.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
-                            {moduleItem.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isChecked
+                          {moduleItem.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
-                          </react_native_1.View>
+                          {moduleItem.icon === 'device' && (<NetworkIcons_1.DevicePhoneIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'audit' && (<NetworkIcons_1.ShieldCheckIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                        </react_native_1.View>
 
-                          {/* Titles & Status Pill */}
-                          <react_native_1.View style={{ flex: 1, gap: 2 }}>
-                            <react_native_1.View style={{
+                        {/* Titles & Status Pill */}
+                        <react_native_1.View style={{ flex: 1, gap: 2 }}>
+                          <react_native_1.View style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 6,
                         flexWrap: 'wrap',
                     }}>
-                              <react_native_1.Text style={{
+                            <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 14,
                         lineHeight: 18,
@@ -537,11 +611,11 @@ const SettingsPanel = () => {
                             ? AppColors_1.AppColors.grayText
                             : AppColors_1.AppColors.primaryBlack,
                     }}>
-                                {moduleItem.label}
-                              </react_native_1.Text>
+                              {moduleItem.label}
+                            </react_native_1.Text>
 
-                              {/* Default Startup Tab Badge */}
-                              {moduleItem.key === defaultTab &&
+                            {/* Default Startup Tab Badge */}
+                            {moduleItem.key === defaultTab &&
                         !isUnavailable && (<react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -553,25 +627,25 @@ const SettingsPanel = () => {
                             borderColor: `${AppColors_1.AppColors.purple}2E`,
                             gap: 3,
                         }}>
-                                    <react_native_1.View style={{
+                                  <react_native_1.View style={{
                             width: 4,
                             height: 4,
                             borderRadius: 2,
                             backgroundColor: AppColors_1.AppColors.purple,
                         }}/>
-                                    <react_native_1.Text style={{
+                                  <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 8,
                             lineHeight: 11,
                             color: AppColors_1.AppColors.purple,
                             letterSpacing: 0.4,
                         }}>
-                                      {t('settings.defaultBadge')}
-                                    </react_native_1.Text>
-                                  </react_native_1.View>)}
+                                    {t('settings.defaultBadge')}
+                                  </react_native_1.Text>
+                                </react_native_1.View>)}
 
-                              {/* Status Pill */}
-                              {moduleItem.key === 'apis' ? (<react_native_1.View style={{
+                            {/* Status Pill */}
+                            {moduleItem.key === 'apis' ? (<react_native_1.View style={{
                             backgroundColor: `${AppColors_1.AppColors.blue500}14`,
                             borderRadius: 4,
                             paddingHorizontal: 5,
@@ -579,16 +653,16 @@ const SettingsPanel = () => {
                             borderWidth: 1,
                             borderColor: `${AppColors_1.AppColors.blue500}33`,
                         }}>
-                                  <react_native_1.Text style={{
+                                <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 8,
                             lineHeight: 11,
                             color: AppColors_1.AppColors.blue500,
                             letterSpacing: 0.3,
                         }}>
-                                    {t('settings.coreBadge')}
-                                  </react_native_1.Text>
-                                </react_native_1.View>) : isUnavailable ? (<react_native_1.View style={{
+                                  {t('settings.coreBadge')}
+                                </react_native_1.Text>
+                              </react_native_1.View>) : isUnavailable ? (<react_native_1.View style={{
                             backgroundColor: `${AppColors_1.AppColors.amber500}18`,
                             borderRadius: 4,
                             paddingHorizontal: 5,
@@ -596,18 +670,18 @@ const SettingsPanel = () => {
                             borderWidth: 1,
                             borderColor: `${AppColors_1.AppColors.amber500}35`,
                         }}>
-                                  <react_native_1.Text style={{
+                                <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 8,
                             lineHeight: 11,
                             color: AppColors_1.AppColors.amber700,
                             letterSpacing: 0.3,
                         }}>
-                                    {moduleItem.key === 'redux'
+                                  {moduleItem.key === 'redux'
                             ? t('settings.notConnectedBadge')
                             : t('settings.notDetectedBadge')}
-                                  </react_native_1.Text>
-                                </react_native_1.View>) : isChecked ? (<react_native_1.View style={{
+                                </react_native_1.Text>
+                              </react_native_1.View>) : isChecked ? (<react_native_1.View style={{
                             backgroundColor: `${AppColors_1.AppColors.liveGreen}18`,
                             borderRadius: 4,
                             paddingHorizontal: 5,
@@ -615,16 +689,16 @@ const SettingsPanel = () => {
                             borderWidth: 1,
                             borderColor: `${AppColors_1.AppColors.liveGreen}38`,
                         }}>
-                                  <react_native_1.Text style={{
+                                <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 8,
                             lineHeight: 11,
                             color: AppColors_1.AppColors.green700,
                             letterSpacing: 0.3,
                         }}>
-                                    {t('settings.activeBadge')}
-                                  </react_native_1.Text>
-                                </react_native_1.View>) : (<react_native_1.View style={{
+                                  {t('settings.activeBadge')}
+                                </react_native_1.Text>
+                              </react_native_1.View>) : (<react_native_1.View style={{
                             backgroundColor: `${AppColors_1.AppColors.grayTextWeak}18`,
                             borderRadius: 4,
                             paddingHorizontal: 5,
@@ -632,33 +706,33 @@ const SettingsPanel = () => {
                             borderWidth: 1,
                             borderColor: `${AppColors_1.AppColors.grayTextWeak}2E`,
                         }}>
-                                  <react_native_1.Text style={{
+                                <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 8,
                             lineHeight: 11,
                             color: AppColors_1.AppColors.grayTextWeak,
                             letterSpacing: 0.3,
                         }}>
-                                    {t('settings.dormantBadge')}
-                                  </react_native_1.Text>
-                                </react_native_1.View>)}
-                            </react_native_1.View>
+                                  {t('settings.dormantBadge')}
+                                </react_native_1.Text>
+                              </react_native_1.View>)}
+                          </react_native_1.View>
 
-                            <react_native_1.Text style={{
+                          <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interRegular,
                         fontSize: 11,
                         color: AppColors_1.AppColors.grayText,
                         lineHeight: 15,
                         marginTop: 1,
                     }}>
-                              {moduleItem.desc}
-                            </react_native_1.Text>
-                          </react_native_1.View>
-                        </TouchableScale_1.default>
-                      </react_native_1.View>
+                            {moduleItem.desc}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </TouchableScale_1.default>
+                    </react_native_1.View>
 
-                      {/* Card Footer: Live Stats + Configure Button */}
-                      {!isUnavailable && (<react_native_1.View style={{
+                    {/* Card Footer: Live Stats + Configure Button */}
+                    {!isUnavailable && (<react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -666,14 +740,14 @@ const SettingsPanel = () => {
                             borderTopWidth: 1,
                             borderTopColor: AppColors_1.AppColors.dividerColor,
                         }}>
-                          {/* Live Info Pill */}
-                          <react_native_1.View style={{
+                        {/* Live Info Pill */}
+                        <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 6,
                             flex: 1,
                         }}>
-                            <react_native_1.View style={{
+                          <react_native_1.View style={{
                             width: 6,
                             height: 6,
                             borderRadius: 3,
@@ -681,18 +755,18 @@ const SettingsPanel = () => {
                                 ? AppColors_1.AppColors.liveGreen
                                 : AppColors_1.AppColors.grayTextWeak,
                         }}/>
-                            <react_native_1.Text style={{
+                          <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interMedium,
                             fontSize: 11,
                             color: AppColors_1.AppColors.grayText,
                             lineHeight: 14,
                         }}>
-                              {liveStats}
-                            </react_native_1.Text>
-                          </react_native_1.View>
+                            {liveStats}
+                          </react_native_1.Text>
+                        </react_native_1.View>
 
-                          {/* Sleek Configure Button */}
-                          <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
+                        {/* Sleek Configure Button */}
+                        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
                             (0, InspectorContext_1.animateNextLayout)();
                             setSettingsPage(moduleItem.key);
                         }} style={{
@@ -706,24 +780,27 @@ const SettingsPanel = () => {
                             borderWidth: 1,
                             borderColor: `${AppColors_1.AppColors.purple}26`,
                         }}>
-                            <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={11}/>
-                            <react_native_1.Text style={{
+                          <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={11}/>
+                          <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 11,
                             lineHeight: 14,
                             color: AppColors_1.AppColors.purple,
                         }}>
-                              {t('settings.configure')}
-                            </react_native_1.Text>
-                            <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.purple} size={9}/>
-                          </TouchableScale_1.default>
-                        </react_native_1.View>)}
-                    </react_native_1.View>);
+                            {t('settings.configure')}
+                          </react_native_1.Text>
+                          <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.purple} size={9}/>
+                        </TouchableScale_1.default>
+                      </react_native_1.View>)}
+                  </react_native_1.View>);
             })}
-              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>)}
 
-              {/* Section 3.5: RAM-Based Auto Limits */}
-              <react_native_1.View style={{
+        {/* ─── TAB 2: RAM & RESOURCE LIMITS ──────────────────────────────────── */}
+        {settingsActiveSubTab === 'limits' && (<react_native_1.View style={{ gap: 14 }}>
+            {/* Section 1: RAM-Based Auto Limits */}
+            <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 14,
                 borderWidth: 1,
@@ -732,29 +809,29 @@ const SettingsPanel = () => {
                 padding: 14,
                 gap: 12,
             }}>
-                <react_native_1.Text style={{
+              <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>
+                RAM-BASED AUTO TUNING
+              </react_native_1.Text>
 
-                {/* Auto RAM Limit Toggle */}
-                <react_native_1.View style={{
+              {/* Auto RAM Limit Toggle */}
+              <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
             }}>
-                  <react_native_1.View style={{
+                <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
                 flex: 1,
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 32,
                 height: 32,
                 borderRadius: 8,
@@ -762,30 +839,31 @@ const SettingsPanel = () => {
                 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={{
+                    <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={{
+                      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>
+                      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={{
+                <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,
@@ -794,9 +872,11 @@ const SettingsPanel = () => {
                     : AppColors_1.AppColors.grayBorderSecondary,
                 padding: 2,
                 justifyContent: 'center',
-                alignItems: isAutoRamLimitEnabled ? 'flex-end' : 'flex-start',
+                alignItems: isAutoRamLimitEnabled
+                    ? 'flex-end'
+                    : 'flex-start',
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 20,
                 height: 20,
                 borderRadius: 10,
@@ -806,14 +886,14 @@ const SettingsPanel = () => {
                 shadowRadius: 2,
                 shadowOffset: { width: 0, height: 1 },
             }}/>
-                  </TouchableScale_1.default>
-                </react_native_1.View>
+                </TouchableScale_1.default>
+              </react_native_1.View>
 
-                <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+              <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={{
+              {/* 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,
@@ -823,10 +903,12 @@ const SettingsPanel = () => {
                 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={{
+                  <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,
@@ -834,19 +916,19 @@ const SettingsPanel = () => {
                     ? AppColors_1.AppColors.primaryBlack
                     : AppColors_1.AppColors.grayText,
             }}>
-                      Detected Free RAM
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{
+                    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={{
+                    {deviceFreeRamMb} MB available
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={{
                 paddingHorizontal: 10,
                 paddingVertical: 5,
                 borderRadius: 8,
@@ -858,7 +940,7 @@ const SettingsPanel = () => {
                     ? `${AppColors_1.AppColors.purple}26`
                     : AppColors_1.AppColors.dividerColor,
             }}>
-                    <react_native_1.Text style={{
+                  <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 12,
                 lineHeight: 15,
@@ -866,27 +948,49 @@ const SettingsPanel = () => {
                     ? AppColors_1.AppColors.purple
                     : AppColors_1.AppColors.grayText,
             }}>
-                      {deviceFreeRamMb} MB
-                    </react_native_1.Text>
-                  </react_native_1.View>
+                    {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={{
+              {/* 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 },
+                    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',
@@ -898,29 +1002,63 @@ const SettingsPanel = () => {
                         borderWidth: 1,
                         borderColor: `${item.color}33`,
                     }}>
-                          <react_native_1.Text style={{
+                        <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={{
+                          {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 }}>
-              {/* Section 1: Appearance */}
-              <react_native_1.View style={{
+                          {item.value}
+                        </react_native_1.Text>
+                      </react_native_1.View>))}
+                  </react_native_1.View>
+                </react_native_1.View>)}
+
+              <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+
+              {/* Floating Mini Performance HUD Toggle */}
+              {renderSettingRow({
+                icon: <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Show Mini Performance HUD Overlay',
+                description: 'Floating on-screen real-time FPS and Memory/Heap widget',
+                right: (<TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle mini performance HUD overlay" accessibilityState={{ checked: isPerformanceHudEnabled }} onPress={() => setIsPerformanceHudEnabled(prev => !prev)} style={{
+                        width: 42,
+                        height: 24,
+                        borderRadius: 12,
+                        backgroundColor: isPerformanceHudEnabled
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                        padding: 2,
+                        justifyContent: 'center',
+                        alignItems: isPerformanceHudEnabled
+                            ? '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>),
+                isLast: true,
+            })}
+            </react_native_1.View>
+
+            {/* Section 2: Fine-Tuned Resource Limits */}
+            <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 14,
                 borderWidth: 1,
@@ -929,28 +1067,233 @@ const SettingsPanel = () => {
                 padding: 14,
                 gap: 12,
             }}>
-                <react_native_1.Text style={{
+              <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 11,
                 lineHeight: 14,
                 color: AppColors_1.AppColors.grayTextWeak,
                 letterSpacing: 0.8,
             }}>
-                  {t('settings.appearanceTheme')}
-                </react_native_1.Text>
+                MANUAL RESOURCE THRESHOLDS
+              </react_native_1.Text>
 
-                <react_native_1.View style={{
+              {renderSettingRow({
+                icon: <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Network / API Logs',
+                description: 'Maximum in-memory API requests tracked before rotation',
+                numericInput: {
+                    value: maxNetworkLogs,
+                    onChange: setMaxNetworkLogs,
+                    min: 10,
+                    max: 100,
+                    placeholder: '10 - 100',
+                },
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Console Logs',
+                description: 'Maximum log entries kept across info/warn/error streams',
+                numericInput: {
+                    value: maxConsoleLogs,
+                    onChange: setMaxConsoleLogs,
+                    min: 20,
+                    max: 300,
+                    placeholder: '20 - 300',
+                },
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Analytics Events',
+                description: 'Capacity for captured analytics payloads & telemetry pings',
+                numericInput: {
+                    value: maxAnalyticsEventsLimit,
+                    onChange: setMaxAnalyticsEventsLimit,
+                    min: 20,
+                    max: 200,
+                    placeholder: '20 - 200',
+                },
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.CrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Max Crash Records',
+                description: 'Stored fatal exceptions and crash diagnostics logs',
+                numericInput: {
+                    value: maxCrashLogs,
+                    onChange: setMaxCrashLogs,
+                    min: 5,
+                    max: 50,
+                    placeholder: '5 - 50',
+                },
+                isLast: true,
+            })}
+            </react_native_1.View>
+
+            {/* Section 3: Storage & Cache Cleansing */}
+            <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,
+            }}>
+                STORAGE & CACHE CLEANSING
+              </react_native_1.Text>
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear All Network Logs',
+                description: `${logs.length} requests in memory`,
+                onPress: () => {
+                    (0, networkLogger_1.clearNetworkLogs)();
+                    setSelected(null);
+                    react_native_1.Alert.alert(t('common.success'), 'Network logs cleared successfully.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                      Clear ({logs.length})
+                    </react_native_1.Text>
+                  </react_native_1.View>),
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear All Console Logs',
+                description: `${consoleLogs.length} logs in memory`,
+                onPress: () => {
+                    (0, consoleLogger_1.clearConsoleLogs)();
+                    react_native_1.Alert.alert(t('common.success'), 'Console logs cleared successfully.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                      Clear ({consoleLogs.length})
+                    </react_native_1.Text>
+                  </react_native_1.View>),
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Analytics Events',
+                description: `${analyticsEvents.length} events recorded`,
+                onPress: () => {
+                    (0, analyticsLogger_1.clearAnalyticsEvents)();
+                    setSelectedEvent(null);
+                    react_native_1.Alert.alert(t('common.success'), 'Analytics events cleared successfully.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                      Clear ({analyticsEvents.length})
+                    </react_native_1.Text>
+                  </react_native_1.View>),
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Crash Logs',
+                description: `${crashRecords.length} crash dumps recorded`,
+                onPress: () => {
+                    (0, crashHandler_1.clearCrashRecords)();
+                    react_native_1.Alert.alert(t('common.success'), 'Crash records cleared successfully.');
+                },
+                isLast: true,
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                      Clear ({crashRecords.length})
+                    </react_native_1.Text>
+                  </react_native_1.View>),
+            })}
+            </react_native_1.View>
+          </react_native_1.View>)}
+
+        {/* ─── TAB 3: UI & APPEARANCE ────────────────────────────────────────── */}
+        {settingsActiveSubTab === 'ui' && (<react_native_1.View style={{ gap: 14 }}>
+            {/* Section 1: Appearance */}
+            <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,
+            }}>
+                {t('settings.appearanceTheme')}
+              </react_native_1.Text>
+
+              <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
             }}>
-                  <react_native_1.View style={{
+                <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
                 flex: 1,
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 32,
                 height: 32,
                 borderRadius: 8,
@@ -958,30 +1301,30 @@ const SettingsPanel = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
             }}>
-                      {isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={15}/>) : (<NetworkIcons_1.MoonIcon color={AppColors_1.AppColors.purple} size={15}/>)}
-                    </react_native_1.View>
-                    <react_native_1.View style={{ flex: 1 }}>
-                      <react_native_1.Text style={{
+                    {isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={15}/>) : (<NetworkIcons_1.MoonIcon 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,
             }}>
-                        {t('settings.general.darkMode')}
-                      </react_native_1.Text>
-                      <react_native_1.Text style={{
+                      {t('settings.general.darkMode')}
+                    </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,
             }}>
-                        {t('settings.general.darkModeDescription')}
-                      </react_native_1.Text>
-                    </react_native_1.View>
+                      {t('settings.general.darkModeDescription')}
+                    </react_native_1.Text>
                   </react_native_1.View>
+                </react_native_1.View>
 
-                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Dark Theme" accessibilityState={{ checked: isDark }} onPress={() => {
+                <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Dark Theme" accessibilityState={{ checked: isDark }} onPress={() => {
                 const newTheme = !isDark;
                 setIsDark(newTheme);
                 (0, styles_1.toggleGlobalTheme)(newTheme);
@@ -996,7 +1339,7 @@ const SettingsPanel = () => {
                 justifyContent: 'center',
                 alignItems: isDark ? 'flex-end' : 'flex-start',
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 20,
                 height: 20,
                 borderRadius: 10,
@@ -1006,12 +1349,12 @@ const SettingsPanel = () => {
                 shadowRadius: 2,
                 shadowOffset: { width: 0, height: 1 },
             }}/>
-                  </TouchableScale_1.default>
-                </react_native_1.View>
+                </TouchableScale_1.default>
               </react_native_1.View>
+            </react_native_1.View>
 
-              {/* Section 2: Window & Layout */}
-              <react_native_1.View style={{
+            {/* Section 2: Window & Layout */}
+            <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 14,
                 borderWidth: 1,
@@ -1020,31 +1363,31 @@ const SettingsPanel = () => {
                 padding: 14,
                 gap: 14,
             }}>
-                <react_native_1.Text style={{
+              <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 11,
                 lineHeight: 14,
                 color: AppColors_1.AppColors.grayTextWeak,
                 letterSpacing: 0.8,
             }}>
-                  {t('settings.windowLayout')}
-                </react_native_1.Text>
+                {t('settings.windowLayout')}
+              </react_native_1.Text>
 
-                {/* Modal Height */}
-                <react_native_1.View style={{ gap: 8 }}>
-                  <react_native_1.View style={{
+              {/* Modal Height */}
+              <react_native_1.View style={{ gap: 8 }}>
+                <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
                 gap: 10,
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
                 flex: 1,
             }}>
-                      <react_native_1.View style={{
+                    <react_native_1.View style={{
                 width: 32,
                 height: 32,
                 borderRadius: 8,
@@ -1052,30 +1395,30 @@ const SettingsPanel = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
             }}>
-                        <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={15}/>
-                      </react_native_1.View>
-                      <react_native_1.View style={{ flex: 1 }}>
-                        <react_native_1.Text style={{
+                      <NetworkIcons_1.ScreenIcon 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,
             }}>
-                          {t('settings.general.modalHeight')}
-                        </react_native_1.Text>
-                        <react_native_1.Text style={{
+                        {t('settings.general.modalHeight')}
+                      </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,
             }}>
-                          {t('settings.general.modalHeightDescription')}
-                        </react_native_1.Text>
-                      </react_native_1.View>
+                        {t('settings.general.modalHeightDescription')}
+                      </react_native_1.Text>
                     </react_native_1.View>
+                  </react_native_1.View>
 
-                    {stagedHeight !== modalHeightPercent && (<TouchableScale_1.default onPress={() => {
+                  {stagedHeight !== modalHeightPercent && (<TouchableScale_1.default onPress={() => {
                     setModalHeightPercent(stagedHeight);
                 }} style={{
                     flexDirection: 'row',
@@ -1091,32 +1434,32 @@ const SettingsPanel = () => {
                     shadowRadius: 2,
                     elevation: 2,
                 }}>
-                        <NetworkIcons_1.CheckIcon size={11} color={AppColors_1.AppColors.white}/>
-                        <react_native_1.Text style={{
+                      <NetworkIcons_1.CheckIcon size={11} color={AppColors_1.AppColors.white}/>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 11,
                     color: AppColors_1.AppColors.white,
-                }}>
-                          Save ({stagedHeight}%)
-                        </react_native_1.Text>
-                      </TouchableScale_1.default>)}
-                  </react_native_1.View>
+                }}>
+                        Save ({stagedHeight}%)
+                      </react_native_1.Text>
+                    </TouchableScale_1.default>)}
+                </react_native_1.View>
 
-                  <react_native_1.View style={{ marginTop: 6 }}>
-                    <Slider_1.default value={stagedHeight} onValueChange={setStagedHeight} min={50} max={90} step={5} quickPresets={[50, 60, 70, 80, 90]} formatLabel={val => `${Math.round(val)}%`}/>
-                  </react_native_1.View>
+                <react_native_1.View style={{ marginTop: 6 }}>
+                  <Slider_1.default value={stagedHeight} onValueChange={setStagedHeight} min={50} max={90} step={5} quickPresets={[50, 60, 70, 80, 90]} formatLabel={val => `${Math.round(val)}%`}/>
                 </react_native_1.View>
+              </react_native_1.View>
 
-                <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+              <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
 
-                {/* Modal Animation */}
-                <react_native_1.View style={{ gap: 8 }}>
-                  <react_native_1.View style={{
+              {/* Modal Animation */}
+              <react_native_1.View style={{ gap: 8 }}>
+                <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 32,
                 height: 32,
                 borderRadius: 8,
@@ -1124,30 +1467,30 @@ const SettingsPanel = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
             }}>
-                      <NetworkIcons_1.MotionIcon color={AppColors_1.AppColors.purple} size={15}/>
-                    </react_native_1.View>
-                    <react_native_1.View style={{ flex: 1 }}>
-                      <react_native_1.Text style={{
+                    <NetworkIcons_1.MotionIcon 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,
             }}>
-                        {t('settings.general.modalAnimation')}
-                      </react_native_1.Text>
-                      <react_native_1.Text style={{
+                      {t('settings.general.modalAnimation')}
+                    </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,
             }}>
-                        {t('settings.general.modalAnimationDescription')}
-                      </react_native_1.Text>
-                    </react_native_1.View>
+                      {t('settings.general.modalAnimationDescription')}
+                    </react_native_1.Text>
                   </react_native_1.View>
+                </react_native_1.View>
 
-                  <react_native_1.View style={{
+                <react_native_1.View style={{
                 flexDirection: 'row',
                 backgroundColor: AppColors_1.AppColors.grayBackground,
                 borderRadius: 10,
@@ -1155,7 +1498,7 @@ const SettingsPanel = () => {
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.dividerColor,
             }}>
-                    {[
+                  {[
                 { key: 'slide', label: 'Slide Up' },
                 { key: 'fade', label: 'Fade' },
                 { key: 'none', label: 'None' },
@@ -1170,7 +1513,7 @@ const SettingsPanel = () => {
                             ? AppColors_1.AppColors.purple
                             : 'transparent',
                     }}>
-                          <react_native_1.Text style={{
+                        <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 11.5,
                         lineHeight: 15,
@@ -1178,16 +1521,16 @@ const SettingsPanel = () => {
                             ? AppColors_1.AppColors.white
                             : AppColors_1.AppColors.grayText,
                     }}>
-                            {opt.label}
-                          </react_native_1.Text>
-                        </TouchableScale_1.default>);
+                          {opt.label}
+                        </react_native_1.Text>
+                      </TouchableScale_1.default>);
             })}
-                  </react_native_1.View>
                 </react_native_1.View>
               </react_native_1.View>
+            </react_native_1.View>
 
-              {/* Section 3: Default Startup Tab */}
-              <react_native_1.View style={{
+            {/* Section 3: Default Startup Tab */}
+            <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 14,
                 borderWidth: 1,
@@ -1196,22 +1539,22 @@ const SettingsPanel = () => {
                 padding: 14,
                 gap: 12,
             }}>
-                <react_native_1.Text style={{
+              <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 11,
                 lineHeight: 14,
                 color: AppColors_1.AppColors.grayTextWeak,
                 letterSpacing: 0.8,
             }}>
-                  {t('settings.startupDefault')}
-                </react_native_1.Text>
+                {t('settings.startupDefault')}
+              </react_native_1.Text>
 
-                <react_native_1.View style={{
+              <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
             }}>
-                  <react_native_1.View style={{
+                <react_native_1.View style={{
                 width: 32,
                 height: 32,
                 borderRadius: 8,
@@ -1219,32 +1562,32 @@ const SettingsPanel = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
             }}>
-                    <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={15}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.Text style={{
+                  <NetworkIcons_1.LayersIcon 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,
             }}>
-                      {t('settings.general.defaultOpeningTab')}
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{
+                    {t('settings.general.defaultOpeningTab')}
+                  </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,
             }}>
-                      {t('settings.general.defaultOpeningTabDesc')}
-                    </react_native_1.Text>
-                  </react_native_1.View>
+                    {t('settings.general.defaultOpeningTabDesc')}
+                  </react_native_1.Text>
                 </react_native_1.View>
+              </react_native_1.View>
 
-                {/* Sleek Interactive Dropdown Picker */}
-                <react_native_1.View style={{ marginTop: 6, gap: 6 }}>
-                  <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Default opening tab: ${allModules.find(m => m.key === defaultTab)?.label || 'APIs'}`} onPress={() => setIsDefaultTabDropdownOpen(prev => !prev)} style={{
+              {/* Sleek Interactive Dropdown Picker */}
+              <react_native_1.View style={{ marginTop: 6, gap: 6 }}>
+                <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Default opening tab: ${allModules.find(m => m.key === defaultTab)?.label || 'APIs'}`} onPress={() => setIsDefaultTabDropdownOpen(prev => !prev)} style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
@@ -1257,53 +1600,54 @@ const SettingsPanel = () => {
                 paddingHorizontal: 14,
                 paddingVertical: 11,
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
                 flex: 1,
             }}>
-                      <react_native_1.View style={{
+                    <react_native_1.View style={{
                 width: 8,
                 height: 8,
                 borderRadius: 4,
                 backgroundColor: AppColors_1.AppColors.purple,
             }}/>
-                      <react_native_1.Text style={{
+                    <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 13.5,
                 lineHeight: 18,
                 color: AppColors_1.AppColors.primaryBlack,
             }}>
-                        {allModules.find(m => m.key === defaultTab)?.label || 'APIs (Network)'}
-                      </react_native_1.Text>
-                      <react_native_1.View style={{
+                      {allModules.find(m => m.key === defaultTab)?.label ||
+                'APIs (Network)'}
+                    </react_native_1.Text>
+                    <react_native_1.View style={{
                 backgroundColor: `${AppColors_1.AppColors.purple}14`,
                 paddingHorizontal: 6,
                 paddingVertical: 1.5,
                 borderRadius: 6,
             }}>
-                        <react_native_1.Text style={{
+                      <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 8.5,
                 color: AppColors_1.AppColors.purple,
             }}>
-                          DEFAULT
-                        </react_native_1.Text>
-                      </react_native_1.View>
+                        DEFAULT
+                      </react_native_1.Text>
                     </react_native_1.View>
+                  </react_native_1.View>
 
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 transform: [
                     { rotate: isDefaultTabDropdownOpen ? '180deg' : '0deg' },
                 ],
             }}>
-                      <NetworkIcons_1.ChevronDownIcon color={AppColors_1.AppColors.grayText} size={15}/>
-                    </react_native_1.View>
-                  </TouchableScale_1.default>
+                    <NetworkIcons_1.ChevronDownIcon color={AppColors_1.AppColors.grayText} size={15}/>
+                  </react_native_1.View>
+                </TouchableScale_1.default>
 
-                  {/* Dropdown Options List */}
-                  {isDefaultTabDropdownOpen && (<react_native_1.View style={{
+                {/* Dropdown Options List */}
+                {isDefaultTabDropdownOpen && (<react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
                     borderRadius: 10,
                     borderWidth: 1,
@@ -1315,7 +1659,7 @@ const SettingsPanel = () => {
                     shadowOffset: { width: 0, height: 3 },
                     elevation: 4,
                 }}>
-                      {allModules
+                    {allModules
                     .filter(tab => tab.key === 'apis' ||
                     stagedTabVisibility?.[tab.key] ||
                     tabVisibility?.[tab.key])
@@ -1337,12 +1681,12 @@ const SettingsPanel = () => {
                             borderBottomWidth: isLast ? 0 : 1,
                             borderBottomColor: AppColors_1.AppColors.dividerColor,
                         }}>
-                              <react_native_1.View style={{
+                            <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 10,
                         }}>
-                                <react_native_1.View style={{
+                              <react_native_1.View style={{
                             width: 6,
                             height: 6,
                             borderRadius: 3,
@@ -1350,7 +1694,7 @@ const SettingsPanel = () => {
                                 ? AppColors_1.AppColors.purple
                                 : AppColors_1.AppColors.grayTextWeak,
                         }}/>
-                                <react_native_1.Text style={{
+                              <react_native_1.Text style={{
                             fontFamily: isActive
                                 ? AppFonts_1.AppFonts.interBold
                                 : AppFonts_1.AppFonts.interMedium,
@@ -1359,18 +1703,18 @@ const SettingsPanel = () => {
                                 ? AppColors_1.AppColors.purple
                                 : AppColors_1.AppColors.primaryBlack,
                         }}>
-                                  {tab.label}
-                                </react_native_1.Text>
-                              </react_native_1.View>
-                              {isActive && (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.purple}/>)}
-                            </TouchableScale_1.default>);
+                                {tab.label}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                            {isActive && (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.purple}/>)}
+                          </TouchableScale_1.default>);
                 })}
-                    </react_native_1.View>)}
-                </react_native_1.View>
+                  </react_native_1.View>)}
               </react_native_1.View>
+            </react_native_1.View>
 
-              {/* Section 4: Privacy & Diagnostics */}
-              <react_native_1.View style={{
+            {/* Section 4: Privacy & Diagnostics */}
+            <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 14,
                 borderWidth: 1,
@@ -1379,29 +1723,29 @@ const SettingsPanel = () => {
                 padding: 14,
                 gap: 12,
             }}>
-                <react_native_1.Text style={{
+              <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 11,
                 lineHeight: 14,
                 color: AppColors_1.AppColors.grayTextWeak,
                 letterSpacing: 0.8,
             }}>
-                  PRIVACY & ANONYMOUS DIAGNOSTICS
-                </react_native_1.Text>
+                PRIVACY & ANONYMOUS DIAGNOSTICS
+              </react_native_1.Text>
 
-                <react_native_1.View style={{
+              <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
             }}>
-                  <react_native_1.View style={{
+                <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
                 flex: 1,
                 marginRight: 10,
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 32,
                 height: 32,
                 borderRadius: 8,
@@ -1409,30 +1753,32 @@ const SettingsPanel = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
             }}>
-                      <NetworkIcons_1.ShieldAlertIcon color={AppColors_1.AppColors.purple} size={15}/>
-                    </react_native_1.View>
-                    <react_native_1.View style={{ flex: 1 }}>
-                      <react_native_1.Text style={{
+                    <NetworkIcons_1.ShieldAlertIcon 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,
             }}>
-                        Help Improve In-App Inspector
-                      </react_native_1.Text>
-                      <react_native_1.Text style={{
+                      Help Improve In-App Inspector
+                    </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,
             }}>
-                        Share non-identifiable technical metrics (RN version, JS engine, device model). No user data or network payloads are captured.
-                      </react_native_1.Text>
-                    </react_native_1.View>
+                      Share non-identifiable technical metrics (RN version, JS
+                      engine, device model). No user data or network payloads
+                      are captured.
+                    </react_native_1.Text>
                   </react_native_1.View>
+                </react_native_1.View>
 
-                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Anonymous Telemetry" accessibilityState={{ checked: telemetryConsent }} onPress={handleToggleTelemetry} style={{
+                <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Anonymous Telemetry" accessibilityState={{ checked: telemetryConsent }} onPress={handleToggleTelemetry} style={{
                 width: 42,
                 height: 24,
                 borderRadius: 12,
@@ -1443,7 +1789,7 @@ const SettingsPanel = () => {
                 justifyContent: 'center',
                 alignItems: telemetryConsent ? 'flex-end' : 'flex-start',
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 20,
                 height: 20,
                 borderRadius: 10,
@@ -1453,12 +1799,12 @@ const SettingsPanel = () => {
                 shadowRadius: 2,
                 shadowOffset: { width: 0, height: 1 },
             }}/>
-                  </TouchableScale_1.default>
-                </react_native_1.View>
+                </TouchableScale_1.default>
               </react_native_1.View>
+            </react_native_1.View>
 
-              {/* Section 5: Notifications & Toasts */}
-              <react_native_1.View style={{
+            {/* Section 5: Notifications & Toasts */}
+            <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 14,
                 borderWidth: 1,
@@ -1467,29 +1813,29 @@ const SettingsPanel = () => {
                 padding: 14,
                 gap: 12,
             }}>
-                <react_native_1.Text style={{
+              <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 11,
                 lineHeight: 14,
                 color: AppColors_1.AppColors.grayTextWeak,
                 letterSpacing: 0.8,
             }}>
-                  NOTIFICATIONS & TOASTS
-                </react_native_1.Text>
+                NOTIFICATIONS & TOASTS
+              </react_native_1.Text>
 
-                <react_native_1.View style={{
+              <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
             }}>
-                  <react_native_1.View style={{
+                <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
                 flex: 1,
                 marginRight: 10,
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 32,
                 height: 32,
                 borderRadius: 8,
@@ -1497,30 +1843,31 @@ const SettingsPanel = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
             }}>
-                      <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.purple} size={15}/>
-                    </react_native_1.View>
-                    <react_native_1.View style={{ flex: 1 }}>
-                      <react_native_1.Text style={{
+                    <NetworkIcons_1.PackageIcon 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,
             }}>
-                        NPM Update Toast
-                      </react_native_1.Text>
-                      <react_native_1.Text style={{
+                      NPM Update Toast
+                    </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,
             }}>
-                        Show a floating toast banner with countdown progress when a newer release is published on npm.
-                      </react_native_1.Text>
-                    </react_native_1.View>
+                      Show a floating toast banner with countdown progress when
+                      a newer release is published on npm.
+                    </react_native_1.Text>
                   </react_native_1.View>
+                </react_native_1.View>
 
-                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle NPM Update Toast" accessibilityState={{ checked: showUpdateToast }} onPress={() => setShowUpdateToast(prev => !prev)} style={{
+                <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle NPM Update Toast" accessibilityState={{ checked: showUpdateToast }} onPress={() => setShowUpdateToast(prev => !prev)} style={{
                 width: 42,
                 height: 24,
                 borderRadius: 12,
@@ -1531,7 +1878,7 @@ const SettingsPanel = () => {
                 justifyContent: 'center',
                 alignItems: showUpdateToast ? 'flex-end' : 'flex-start',
             }}>
-                    <react_native_1.View style={{
+                  <react_native_1.View style={{
                 width: 20,
                 height: 20,
                 borderRadius: 10,
@@ -1541,15 +1888,137 @@ const SettingsPanel = () => {
                 shadowRadius: 2,
                 shadowOffset: { width: 0, height: 1 },
             }}/>
-                  </TouchableScale_1.default>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Section 6: NPM Package & Updates */}
+            <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,
+            }}>
+                PACKAGE VERSION & UPDATES
+              </react_native_1.Text>
+
+              <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,
+                marginRight: 8,
+            }}>
+                  <react_native_1.View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: '#CB383715',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                    <NetworkIcons_1.NpmIcon color="#CB3837" size={16}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                        v{constants_1.LIB_VERSION}
+                      </react_native_1.Text>
+                      {updateAvailable ? (<react_native_1.View style={{
+                    backgroundColor: '#F59E0B20',
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                    borderRadius: 5,
+                    borderWidth: 1,
+                    borderColor: '#F59E0B60',
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: '#D97706',
+                }}>
+                            v{latestNpmVersion} Available ⚡
+                          </react_native_1.Text>
+                        </react_native_1.View>) : (<react_native_1.View style={{
+                    backgroundColor: `${AppColors_1.AppColors.emerald500}20`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                    borderRadius: 5,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.emerald500}50`,
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors_1.AppColors.emerald600,
+                }}>
+                            Up to date
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                      {updateAvailable
+                ? `A newer version (v${latestNpmVersion}) is available on npm registry.`
+                : 'You are running the latest version from npm registry.'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
                 </react_native_1.View>
+
+                {updateAvailable && (<TouchableScale_1.default onPress={() => {
+                    (0, helpers_1.copyToClipboard)('npm install react-native-inapp-inspector@latest', 'Install Command');
+                    (0, toast_1.showToast)('Copied npm install command!');
+                }} style={{
+                    backgroundColor: AppColors_1.AppColors.purple,
+                    paddingVertical: 6,
+                    paddingHorizontal: 10,
+                    borderRadius: 8,
+                }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                      Copy Upgrade
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>)}
               </react_native_1.View>
-            </react_native_1.View>)}
-          <react_native_1.View style={{ height: 48 }}/>
-        </react_native_1.ScrollView>
+            </react_native_1.View>
+          </react_native_1.View>)}
+        <react_native_1.View style={{ height: 48 }}/>
+      </react_native_1.ScrollView>
 
-        {/* Bottom Sticky Action Bar for Save Changes */}
-        {settingsActiveSubTab === 'module' && (<react_native_1.View style={{
+      {/* Bottom Sticky Action Bar for Save Changes */}
+      {settingsActiveSubTab === 'module' && (<react_native_1.View style={{
                 paddingHorizontal: 16,
                 paddingTop: 12,
                 paddingBottom: react_native_1.Platform.OS === 'ios' ? 36 : 24,
@@ -1565,16 +2034,16 @@ const SettingsPanel = () => {
                 shadowOffset: { width: 0, height: -3 },
                 elevation: 8,
             }}>
-            <react_native_1.View style={{ flex: 1 }}>
-              <react_native_1.Text style={{
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 13,
                 lineHeight: 17,
                 color: AppColors_1.AppColors.primaryBlack,
             }}>
-                {stagedActiveCount} of {allModules.length} Modules Active
-              </react_native_1.Text>
-              <react_native_1.Text style={{
+              {stagedActiveCount} of {allModules.length} Modules Active
+            </react_native_1.Text>
+            <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: 11,
                 lineHeight: 15,
@@ -1583,13 +2052,13 @@ const SettingsPanel = () => {
                     : AppColors_1.AppColors.grayText,
                 marginTop: 1,
             }}>
-                {hasUnsavedChanges
+              {hasUnsavedChanges
                 ? t('settings.unsavedPending')
                 : t('settings.allSynchronized')}
-              </react_native_1.Text>
-            </react_native_1.View>
+            </react_native_1.Text>
+          </react_native_1.View>
 
-            <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Save Changes" onPress={handleSaveChanges} style={{
+          <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Save Changes" onPress={handleSaveChanges} style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 6,
@@ -1600,18 +2069,18 @@ const SettingsPanel = () => {
                 paddingVertical: 10,
                 borderRadius: 10,
             }}>
-              <NetworkIcons_1.CheckIcon size={14} color={hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple}/>
-              <react_native_1.Text style={{
+            <NetworkIcons_1.CheckIcon size={14} color={hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple}/>
+            <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 13,
                 lineHeight: 17,
                 color: hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
             }}>
-                {t('settings.saveChanges')}
-              </react_native_1.Text>
-            </TouchableScale_1.default>
-          </react_native_1.View>)}
-      </react_native_1.View>);
+              {t('settings.saveChanges')}
+            </react_native_1.Text>
+          </TouchableScale_1.default>
+        </react_native_1.View>)}
+    </react_native_1.View>);
     let content = null;
     let title = '';
     let icon = null;
@@ -1653,7 +2122,9 @@ const SettingsPanel = () => {
           {renderSettingRow({
                 icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
                 label: t('settings.apis.clearNetworkLogs'),
-                description: t('settings.apis.clearNetworkLogsDescription', { count: logs.length }),
+                description: t('settings.apis.clearNetworkLogsDescription', {
+                    count: logs.length,
+                }),
                 isLast: true,
                 onPress: () => {
                     (0, networkLogger_1.clearNetworkLogs)();
@@ -1840,9 +2311,7 @@ const SettingsPanel = () => {
                     : AppColors_1.AppColors.grayBorderSecondary,
                 padding: 2,
                 justifyContent: 'center',
-                alignItems: showDuplicateLogs
-                    ? 'flex-end'
-                    : 'flex-start',
+                alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
             }}>
               <react_native_1.View style={{
                 width: 20,
@@ -1868,7 +2337,9 @@ const SettingsPanel = () => {
           {renderSettingRow({
                 icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
                 label: t('settings.logs.clearConsoleLogs'),
-                description: t('settings.logs.clearConsoleLogsDescription', { count: consoleLogs.length }),
+                description: t('settings.logs.clearConsoleLogsDescription', {
+                    count: consoleLogs.length,
+                }),
                 isLast: true,
                 onPress: () => {
                     (0, consoleLogger_1.clearConsoleLogs)();
@@ -1911,7 +2382,9 @@ const SettingsPanel = () => {
           {renderSettingRow({
                 icon: <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>,
                 label: t('settings.analytics.maxAnalyticsEvents'),
-                description: t('settings.analytics.maxAnalyticsEventsDescription', { count: analyticsEvents.length }),
+                description: t('settings.analytics.maxAnalyticsEventsDescription', {
+                    count: analyticsEvents.length,
+                }),
                 numericInput: {
                     value: maxAnalyticsEventsLimit,
                     onChange: setMaxAnalyticsEventsLimit,
@@ -1964,7 +2437,9 @@ const SettingsPanel = () => {
     else if (settingsPage === 'redux') {
         title = t('settings.redux.title');
         icon = <NetworkIcons_1.ReduxIcon color={AppColors_1.AppColors.white} size={16}/>;
-        rightInfo = t('settings.redux.reducers', { count: Object.keys(reduxState || {}).length });
+        rightInfo = t('settings.redux.reducers', {
+            count: Object.keys(reduxState || {}).length,
+        });
         content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
@@ -2109,7 +2584,9 @@ const SettingsPanel = () => {
           {renderSettingRow({
                 icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
                 label: t('settings.crash.clearHistory'),
-                description: t('settings.crash.clearHistoryDesc', { count: crashRecords?.length || 0 }),
+                description: t('settings.crash.clearHistoryDesc', {
+                    count: crashRecords?.length || 0,
+                }),
                 isLast: true,
                 onPress: () => {
                     (0, crashHandler_1.clearCrashRecords)();