react-native-inapp-inspector 2.3.15 → 2.3.17

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
-import { Alert, Animated, Platform, ScrollView, StatusBar, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { Alert, Animated, DevSettings, Dimensions, Linking, PixelRatio, Platform, ScrollView, StatusBar, StyleSheet, Text, TextInput, View, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
@@ -17,14 +17,15 @@ import { clearPerformanceEvents } from '../../customHooks/performanceTracker';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, GitHubIcon, InfoCircleIcon, CopyIcon, FilmIcon, CameraIcon, VideoCameraIcon, MicrophoneIcon, GifIcon, ImageIcon, } from '../NetworkIcons';
+import { ScreenCapture } from '../../capture';
 import { LIB_VERSION } from '../../constants';
-import { copyToClipboard, isLocalDebugEnvironment } from '../../helpers';
+import { copyToClipboard, isLocalDebugEnvironment, getAppName, getBundleIdentifier, getAppVersionAndBuild, } from '../../helpers';
 import { showToast } from '../../helpers/toast';
 import { pruneAllLogs } from '../../helpers/memoryManager';
 const SettingsPanel = () => {
     const { t } = useTranslation();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, } = useInspector();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, closeModal, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, } = useInspector();
     const [stagedHeight, setStagedHeight] = useState(modalHeightPercent);
     useEffect(() => {
         setStagedHeight(modalHeightPercent);
@@ -35,6 +36,7 @@ const SettingsPanel = () => {
     const headerTopPadding = modalHeightPercent >= 95 ? statusBarHeight : 0;
     const allModules = useMemo(() => [
         {
+            id: 1,
             key: 'apis',
             label: 'APIs (Network)',
             category: 'core',
@@ -42,6 +44,7 @@ const SettingsPanel = () => {
             desc: 'HTTP/HTTPS requests, GraphQL, Axios & WebSocket inspector',
         },
         {
+            id: 2,
             key: 'logs',
             label: 'Console Logs',
             category: 'core',
@@ -49,27 +52,7 @@ const SettingsPanel = () => {
             desc: 'Terminal console logs, warnings, errors & stack traces',
         },
         {
-            key: 'performance',
-            label: 'Performance Tracker',
-            category: 'diagnostic',
-            icon: 'performance',
-            desc: '60 FPS monitor, Hermes memory telemetry & re-render profiler',
-        },
-        {
-            key: 'bundle',
-            label: 'Bundle Analyzer',
-            category: 'diagnostic',
-            icon: 'bundle',
-            desc: 'Metro packager dependencies, source maps & asset breakdown',
-        },
-        {
-            key: 'crash',
-            label: 'Crash Protection',
-            category: 'diagnostic',
-            icon: 'crash',
-            desc: 'Runtime exception guard, breadcrumbs & memory snapshot',
-        },
-        {
+            id: 3,
             key: 'analytics',
             label: 'Analytics Logger',
             category: 'telemetry',
@@ -77,6 +60,7 @@ const SettingsPanel = () => {
             desc: 'Firebase & custom analytics events, user properties & params',
         },
         {
+            id: 4,
             key: 'redux',
             label: 'Redux Inspector',
             category: 'telemetry',
@@ -84,6 +68,15 @@ const SettingsPanel = () => {
             desc: 'Store state diffing, action history & reducer timeline',
         },
         {
+            id: 5,
+            key: 'storage',
+            label: 'Storage Inspector',
+            category: 'telemetry',
+            icon: 'storage',
+            desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
+        },
+        {
+            id: 6,
             key: 'device',
             label: 'Device Info',
             category: 'diagnostic',
@@ -91,13 +84,31 @@ const SettingsPanel = () => {
             desc: 'Hardware specs, IP address, screen metrics, UDID & runtime stats',
         },
         {
-            key: 'storage',
-            label: 'Storage Inspector',
-            category: 'telemetry',
-            icon: 'storage',
-            desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
+            id: 7,
+            key: 'crash',
+            label: 'Crash Protection',
+            category: 'diagnostic',
+            icon: 'crash',
+            desc: 'Runtime exception guard, breadcrumbs & memory snapshot',
+        },
+        {
+            id: 8,
+            key: 'bundle',
+            label: 'Bundle Analyzer',
+            category: 'diagnostic',
+            icon: 'bundle',
+            desc: 'Metro packager dependencies, source maps & asset breakdown',
+        },
+        {
+            id: 9,
+            key: 'performance',
+            label: 'Performance & Tracker',
+            category: 'diagnostic',
+            icon: 'performance',
+            desc: '60 FPS monitor, Hermes memory telemetry & re-render profiler',
         },
         {
+            id: 10,
             key: 'debugging',
             label: 'Multi-Device Debugging',
             category: 'diagnostic',
@@ -112,11 +123,11 @@ const SettingsPanel = () => {
         logs: Boolean(tabVisibility?.logs),
         analytics: Boolean(tabVisibility?.analytics),
         redux: Boolean(tabVisibility?.redux),
+        storage: Boolean(tabVisibility?.storage),
+        device: Boolean(tabVisibility?.device),
+        crash: Boolean(tabVisibility?.crash),
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
-        crash: Boolean(tabVisibility?.crash),
-        device: Boolean(tabVisibility?.device),
-        storage: Boolean(tabVisibility?.storage),
         debugging: Boolean(tabVisibility?.debugging),
     }));
     useEffect(() => {
@@ -125,11 +136,11 @@ const SettingsPanel = () => {
             logs: Boolean(tabVisibility?.logs),
             analytics: Boolean(tabVisibility?.analytics),
             redux: Boolean(tabVisibility?.redux),
+            storage: Boolean(tabVisibility?.storage),
+            device: Boolean(tabVisibility?.device),
+            crash: Boolean(tabVisibility?.crash),
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
-            crash: Boolean(tabVisibility?.crash),
-            device: Boolean(tabVisibility?.device),
-            storage: Boolean(tabVisibility?.storage),
             debugging: Boolean(tabVisibility?.debugging),
         });
     }, [tabVisibility]);
@@ -139,17 +150,50 @@ const SettingsPanel = () => {
     }, [stagedTabVisibility, tabVisibility, allModules]);
     const stagedActiveCount = allModules.filter(m => m.key === 'apis' || Boolean(stagedTabVisibility[m.key])).length;
     const handleSaveChanges = () => {
-        animateNextLayout();
-        allModules.forEach(m => {
-            if (m.key !== 'apis') {
-                const isStagedOn = Boolean(stagedTabVisibility[m.key]);
-                const isCurrentOn = Boolean(tabVisibility?.[m.key]);
-                if (isStagedOn !== isCurrentOn) {
-                    toggleTabVisibility(m.key);
-                }
-            }
-        });
-        Alert.alert(t('settings.settingsSaved'), t('settings.settingsSavedDesc'));
+        if (!hasUnsavedChanges)
+            return;
+        Alert.alert('Apply Changes & Reload', 'Are you sure you want to save module changes? The inspector will close and reload the app to apply the new configuration.', [
+            {
+                text: 'Cancel',
+                style: 'cancel',
+                onPress: () => {
+                    setStagedTabVisibility({
+                        apis: true,
+                        logs: Boolean(tabVisibility?.logs),
+                        analytics: Boolean(tabVisibility?.analytics),
+                        redux: Boolean(tabVisibility?.redux),
+                        storage: Boolean(tabVisibility?.storage),
+                        device: Boolean(tabVisibility?.device),
+                        crash: Boolean(tabVisibility?.crash),
+                        bundle: Boolean(tabVisibility?.bundle),
+                        performance: Boolean(tabVisibility?.performance),
+                        debugging: Boolean(tabVisibility?.debugging),
+                    });
+                },
+            },
+            {
+                text: 'Save & Reload',
+                style: 'default',
+                onPress: () => {
+                    animateNextLayout();
+                    allModules.forEach(m => {
+                        if (m.key !== 'apis') {
+                            const isStagedOn = Boolean(stagedTabVisibility[m.key]);
+                            const isCurrentOn = Boolean(tabVisibility?.[m.key]);
+                            if (isStagedOn !== isCurrentOn) {
+                                toggleTabVisibility(m.key);
+                            }
+                        }
+                    });
+                    closeModal();
+                    setTimeout(() => {
+                        if (__DEV__ && DevSettings && DevSettings.reload) {
+                            DevSettings.reload();
+                        }
+                    }, 350);
+                },
+            },
+        ]);
     };
     const [isDefaultTabDropdownOpen, setIsDefaultTabDropdownOpen] = useState(false);
     const goBackToMain = () => {
@@ -322,6 +366,16 @@ const SettingsPanel = () => {
                 label: t('settings.ramLimits', 'RAM & Limits'),
                 Icon: BrainIcon,
             },
+            {
+                key: 'capture',
+                label: t('settings.screenVideoCapture', 'Screen & Video Capture'),
+                Icon: CameraIcon,
+            },
+            {
+                key: 'about',
+                label: t('settings.aboutAndSpecs', 'About & Specs'),
+                Icon: InfoCircleIcon,
+            },
         ].map(tab => {
             const isActive = settingsActiveSubTab === tab.key;
             const IconComp = tab.Icon;
@@ -531,6 +585,32 @@ const SettingsPanel = () => {
                         gap: 6,
                         flexWrap: 'wrap',
                     }}>
+                            <View style={{
+                        minWidth: 22,
+                        height: 22,
+                        paddingHorizontal: 5,
+                        borderRadius: 11,
+                        backgroundColor: isChecked
+                            ? `${AppColors.purple}1C`
+                            : `${AppColors.grayBorderSecondary}80`,
+                        borderWidth: 1,
+                        borderColor: isChecked
+                            ? `${AppColors.purple}44`
+                            : AppColors.grayBorderSecondary,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                              <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        lineHeight: 13,
+                        color: isChecked
+                            ? AppColors.purple
+                            : AppColors.grayText,
+                    }}>
+                                #{moduleItem.id}
+                              </Text>
+                            </View>
                             <Text style={{
                         fontFamily: AppFonts.interBold,
                         fontSize: 14,
@@ -1082,8 +1162,9 @@ const SettingsPanel = () => {
                 lineHeight: 18,
                 color: AppColors.primaryBlack,
             }}>
-                      {allModules.find(m => m.key === defaultTab)?.label ||
-                'APIs (Network)'}
+                      {allModules.find(m => m.key === defaultTab)
+                ? `#${allModules.find(m => m.key === defaultTab)?.id} ${allModules.find(m => m.key === defaultTab)?.label}`
+                : '#1 APIs (Network)'}
                     </Text>
                     <View style={{
                 backgroundColor: `${AppColors.purple}14`,
@@ -1167,7 +1248,7 @@ const SettingsPanel = () => {
                                 ? AppColors.purple
                                 : AppColors.primaryBlack,
                         }}>
-                                {tab.label}
+                                #{tab.id} {tab.label}
                               </Text>
                             </View>
                             {isActive && (<CheckIcon size={14} color={AppColors.purple}/>)}
@@ -1265,132 +1346,6 @@ const SettingsPanel = () => {
                 </TouchableScale>
               </View>
             </View>
-
-            
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                PACKAGE VERSION & UPDATES
-              </Text>
-
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-                marginRight: 8,
-            }}>
-                  <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: '#CB383715',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                    <NpmIcon color="#CB3837" size={16}/>
-                  </View>
-                  <View style={{ flex: 1 }}>
-                    <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-            }}>
-                      <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                        v{LIB_VERSION}
-                      </Text>
-                      {updateAvailable ? (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    backgroundColor: '#F59E0B20',
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                    borderRadius: 5,
-                    borderWidth: 1,
-                    borderColor: '#F59E0B60',
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: '#D97706',
-                }}>
-                            v{latestNpmVersion} Available
-                          </Text>
-                          <BoltIcon size={9} color="#D97706"/>
-                        </View>) : (<View style={{
-                    backgroundColor: `${AppColors.emerald500}20`,
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                    borderRadius: 5,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.emerald500}50`,
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.emerald600,
-                }}>
-                            Up to date
-                          </Text>
-                        </View>)}
-                    </View>
-                    <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                      {updateAvailable
-                ? `A newer version (v${latestNpmVersion}) is available on npm registry.`
-                : 'You are running the latest version from npm registry.'}
-                    </Text>
-                  </View>
-                </View>
-
-                {updateAvailable && (<TouchableScale onPress={() => {
-                    copyToClipboard('npm install react-native-inapp-inspector@latest', 'Install Command');
-                    showToast('Copied npm install command!');
-                }} style={{
-                    backgroundColor: AppColors.purple,
-                    paddingVertical: 6,
-                    paddingHorizontal: 10,
-                    borderRadius: 8,
-                }}>
-                    <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors.white,
-                }}>
-                      Copy Upgrade
-                    </Text>
-                  </TouchableScale>)}
-              </View>
-            </View>
           </View>)}
 
         {settingsActiveSubTab === 'limits' && (<View style={{ gap: 14 }}>
@@ -1766,6 +1721,1158 @@ const SettingsPanel = () => {
               </View>
             </View>
           </View>)}
+        {settingsActiveSubTab === 'capture' && (<View style={{ gap: 12 }}>
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                gap: 12,
+            }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                <View style={{
+                width: 36,
+                height: 36,
+                borderRadius: 10,
+                backgroundColor: AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                  <CameraIcon color={AppColors.purple} size={16}/>
+                </View>
+                <View style={{ flex: 1 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+                    {t('settings.media.screenshotCardTitle', 'Screenshot Capture Settings')}
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors.grayText,
+                marginTop: 1,
+            }}>
+                    {t('settings.media.screenshotCardDesc', 'Image encoding format, compression quality and overlay auto-hide')}
+                  </Text>
+                </View>
+              </View>
+
+              {renderSettingRow({
+                icon: <ImageIcon color={AppColors.purple} size={16}/>,
+                label: t('settings.media.imageFormat', 'Image Format'),
+                description: t('settings.media.imageFormatDesc', 'Export formats (PNG lossless, JPEG lossy, WebP)'),
+                right: (<View style={{ flexDirection: 'row', gap: 4 }}>
+                    {['PNG', 'JPEG', 'WEBP'].map(fmt => (<View key={fmt} style={{
+                            paddingHorizontal: 8,
+                            paddingVertical: 4,
+                            borderRadius: 6,
+                            backgroundColor: fmt === 'PNG' ? AppColors.purple : `${AppColors.purple}1A`,
+                        }}>
+                        <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: fmt === 'PNG' ? AppColors.white : AppColors.purple,
+                        }}>
+                          {fmt}
+                        </Text>
+                      </View>))}
+                  </View>),
+            })}
+
+              {renderSettingRow({
+                icon: <EyeIcon color={AppColors.purple} size={16}/>,
+                label: t('settings.media.autoHide', 'Auto-Hide Inspector During Capture'),
+                description: t('settings.media.autoHideDesc', 'Temporarily hides the inspector overlay during screen capture'),
+                isLast: true,
+                right: (<View style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors.emerald500}26`,
+                    }}>
+                    <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors.emerald500,
+                    }}>
+                      {t('settings.media.enabled', 'ON')}
+                    </Text>
+                  </View>),
+            })}
+            </View>
+
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                gap: 12,
+            }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                <View style={{
+                width: 36,
+                height: 36,
+                borderRadius: 10,
+                backgroundColor: AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                  <VideoCameraIcon color={AppColors.purple} size={16}/>
+                </View>
+                <View style={{ flex: 1 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+                    {t('settings.media.videoCardTitle', 'Video Recording & GIF Conversion')}
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors.grayText,
+                marginTop: 1,
+            }}>
+                    {t('settings.media.videoCardDesc', 'ReplayKit hardware encoding, frame capture fallback and GIF generation')}
+                  </Text>
+                </View>
+              </View>
+
+              {renderSettingRow({
+                icon: <MicrophoneIcon color={AppColors.purple} size={16}/>,
+                label: t('settings.media.audioMode', 'Audio Source'),
+                description: t('settings.media.audioModeDesc', 'Record video with muted, app audio, or microphone commentary'),
+                right: (<View style={{ flexDirection: 'row', gap: 4 }}>
+                    {['Muted', 'App', 'Mic'].map((aud, i) => (<View key={aud} style={{
+                            paddingHorizontal: 7,
+                            paddingVertical: 4,
+                            borderRadius: 6,
+                            backgroundColor: i === 0 ? AppColors.purple : `${AppColors.purple}1A`,
+                        }}>
+                        <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: i === 0 ? AppColors.white : AppColors.purple,
+                        }}>
+                          {aud}
+                        </Text>
+                      </View>))}
+                  </View>),
+            })}
+
+              {renderSettingRow({
+                icon: <FilmIcon color={AppColors.purple} size={16}/>,
+                label: t('settings.media.frameRate', 'Recording Frame Rate (FPS)'),
+                description: t('settings.media.frameRateDesc', 'Target video smoothness: 15, 24, 30, or 60 FPS'),
+                right: (<View style={{ flexDirection: 'row', gap: 4 }}>
+                    {['15', '24', '30', '60'].map(fps => (<View key={fps} style={{
+                            paddingHorizontal: 6,
+                            paddingVertical: 4,
+                            borderRadius: 6,
+                            backgroundColor: fps === '24' ? AppColors.purple : `${AppColors.purple}1A`,
+                        }}>
+                        <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: fps === '24' ? AppColors.white : AppColors.purple,
+                        }}>
+                          {fps}fps
+                        </Text>
+                      </View>))}
+                  </View>),
+            })}
+
+              {renderSettingRow({
+                icon: <GifIcon color={AppColors.purple} size={16}/>,
+                label: t('settings.media.gifAutoOpt', 'Auto GIF Optimization'),
+                description: t('settings.media.gifAutoOptDesc', 'Automatic palette reduction and frame skip for lightweight animated GIFs'),
+                isLast: true,
+                right: (<View style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors.emerald500}26`,
+                    }}>
+                    <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors.emerald500,
+                    }}>
+                      ON
+                    </Text>
+                  </View>),
+            })}
+            </View>
+
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 16,
+            }}>
+              {renderSettingRow({
+                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
+                label: t('settings.media.purgeAll', 'Purge Captured Media Cache'),
+                description: t('settings.media.purgeAllDesc', 'Delete all local screenshots, screen recordings and converted GIFs'),
+                isLast: true,
+                onPress: () => {
+                    Alert.alert(t('settings.media.purgeConfirmTitle', 'Purge Media Storage?'), t('settings.media.purgeConfirmMessage', 'This will permanently delete all captured screenshots and videos from disk.'), [
+                        { text: t('common.cancel', 'Cancel'), style: 'cancel' },
+                        {
+                            text: t('settings.media.purgeCacheBtn', 'Purge All'),
+                            style: 'destructive',
+                            onPress: async () => {
+                                await ScreenCapture.clearAllMedia();
+                                showToast(t('settings.media.purgedSuccess', 'Media cache cleared successfully'));
+                            },
+                        },
+                    ]);
+                },
+                right: (<View style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 8,
+                        backgroundColor: `${AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors.errorColor}33`,
+                    }}>
+                    <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 11,
+                        lineHeight: 14,
+                        color: AppColors.errorColor,
+                    }}>
+                      {t('settings.media.purgeCacheBtn', 'Purge All')}
+                    </Text>
+                  </View>),
+            })}
+            </View>
+          </View>)}
+        {settingsActiveSubTab === 'about' && (<View style={{ gap: 14 }}>
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 16,
+                gap: 12,
+            }}>
+              <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                flex: 1,
+            }}>
+                  <View style={{
+                width: 44,
+                height: 44,
+                borderRadius: 12,
+                backgroundColor: `${AppColors.purple}1A`,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 1,
+                borderColor: `${AppColors.purple}33`,
+            }}>
+                    <PackageIcon color={AppColors.purple} size={22}/>
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                flexWrap: 'wrap',
+            }}>
+                      <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 15,
+                lineHeight: 20,
+                color: AppColors.primaryBlack,
+            }}>
+                        In-App Inspector
+                      </Text>
+                      <View style={{
+                backgroundColor: `${AppColors.purple}18`,
+                paddingHorizontal: 7,
+                paddingVertical: 2,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: `${AppColors.purple}33`,
+            }}>
+                        <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10,
+                color: AppColors.purple,
+            }}>
+                          v{LIB_VERSION}
+                        </Text>
+                      </View>
+                      {updateAvailable ? (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: '#F59E0B20',
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: '#F59E0B60',
+                }}>
+                          <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: '#D97706',
+                }}>
+                            v{latestNpmVersion} Available
+                          </Text>
+                          <BoltIcon size={9} color="#D97706"/>
+                        </View>) : (<View style={{
+                    backgroundColor: `${AppColors.emerald500}20`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: `${AppColors.emerald500}50`,
+                }}>
+                          <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors.emerald600,
+                }}>
+                            Up to date
+                          </Text>
+                        </View>)}
+                    </View>
+                    <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors.grayText,
+                marginTop: 2,
+            }}>
+                      react-native-inapp-inspector
+                    </Text>
+                  </View>
+                </View>
+              </View>
+
+              <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                lineHeight: 16,
+                color: AppColors.grayText,
+            }}>
+                High-performance in-app debugging, network logging, console inspection, performance profiling, storage viewer & telemetry diagnostics for React Native.
+              </Text>
+
+              {updateAvailable && (<TouchableScale onPress={() => {
+                    copyToClipboard('npm install react-native-inapp-inspector@latest', 'Install Command');
+                    showToast('Copied npm upgrade command!');
+                }} style={{
+                    backgroundColor: AppColors.purple,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderRadius: 8,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 6,
+                }}>
+                  <BoltIcon size={12} color={AppColors.white}/>
+                  <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 12,
+                    color: AppColors.white,
+                }}>
+                    Copy Upgrade Command (v{latestNpmVersion})
+                  </Text>
+                </TouchableScale>)}
+            </View>
+
+            
+            <View style={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                gap: 8,
+            }}>
+              <TouchableScale onPress={() => {
+                Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: `${AppColors.purple}0F`,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: `${AppColors.purple}30`,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <GitHubIcon color={AppColors.purple} size={18}/>
+                <View style={{ flex: 1 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    ⭐ Star on GitHub
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors.grayText,
+            }}>
+                    Support open source
+                  </Text>
+                </View>
+              </TouchableScale>
+
+              <TouchableScale onPress={() => {
+                Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <NpmIcon color="#CB3837" size={18}/>
+                <View style={{ flex: 1 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    NPM Registry
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors.grayText,
+            }}>
+                    Package repository
+                  </Text>
+                </View>
+              </TouchableScale>
+
+              <TouchableScale onPress={() => {
+                Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector#readme').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <Text style={{ fontSize: 16 }}>📖</Text>
+                <View style={{ flex: 1 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    Documentation
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors.grayText,
+            }}>
+                    Setup & API guide
+                  </Text>
+                </View>
+              </TouchableScale>
+
+              <TouchableScale onPress={() => {
+                Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector/issues').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <Text style={{ fontSize: 16 }}>🐞</Text>
+                <View style={{ flex: 1 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    Report Issue
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors.grayText,
+            }}>
+                    Bugs & feature requests
+                  </Text>
+                </View>
+              </TouchableScale>
+
+              <TouchableScale onPress={() => {
+                Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector/releases').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <Text style={{ fontSize: 16 }}>🏷️</Text>
+                <View style={{ flex: 1 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    Release Notes
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors.grayText,
+            }}>
+                    Version changelog
+                  </Text>
+                </View>
+              </TouchableScale>
+
+              <TouchableScale onPress={() => {
+                const win = Dimensions.get('window');
+                const scr = Dimensions.get('screen');
+                const rnVer = Platform.constants?.reactNativeVersion;
+                const specsPayload = {
+                    package: {
+                        name: 'react-native-inapp-inspector',
+                        version: `v${LIB_VERSION}`,
+                        latestNpmVersion: latestNpmVersion ? `v${latestNpmVersion}` : 'Checking...',
+                        license: 'MIT',
+                        repository: 'https://github.com/vengatmacuser/react-native-inapp-inspector',
+                    },
+                    hostApp: {
+                        name: getAppName(),
+                        bundleId: getBundleIdentifier(),
+                        versionAndBuild: getAppVersionAndBuild().formatted,
+                        buildVariant: __DEV__ ? 'Development (Debug)' : 'Production (Release)',
+                        metroConnected: isLocalDebugEnvironment(),
+                    },
+                    runtime: {
+                        reactNativeVersion: rnVer ? `${rnVer.major}.${rnVer.minor}.${rnVer.patch}` : '0.74+',
+                        reactVersion: React.version,
+                        jsEngine: Boolean(global?.HermesInternal) ? 'Hermes' : 'JavaScriptCore (JSC)',
+                        architecture: Boolean(global?.nativeFabricUIManager) ? 'Fabric (New Architecture)' : 'Paper (Legacy Bridge)',
+                        turboModules: Boolean(global?.__turboModuleProxy || global?.TurboModuleRegistry),
+                    },
+                    device: {
+                        platform: Platform.OS,
+                        osVersion: Platform.Version,
+                        deviceModel: Platform.constants?.Model || 'Unknown Device',
+                        windowDimensions: `${Math.round(win.width)}x${Math.round(win.height)} pt`,
+                        screenDimensions: `${Math.round(scr.width)}x${Math.round(scr.height)} pt`,
+                        pixelRatio: PixelRatio.get(),
+                        fontScale: PixelRatio.getFontScale(),
+                        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'Unknown',
+                        locale: Intl.DateTimeFormat().resolvedOptions().locale || 'en',
+                    },
+                    storageAndCapabilities: {
+                        storageEngine: isPersistentStorageAvailable() ? 'MMKV (Fast Native Storage)' : 'In-Memory State',
+                        hasNativeModule: Boolean(global?.NativeInspectorModule || global?.__IN_APP_INSPECTOR_NATIVE__),
+                        reduxConnected: isReduxConnected(),
+                        analyticsConnected: isAnalyticsConnected(),
+                    },
+                };
+                copyToClipboard(JSON.stringify(specsPayload, null, 2), 'Diagnostic Specifications');
+                showToast('Copied full diagnostic specs to clipboard!');
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <CopyIcon color={AppColors.purple} size={16}/>
+                <View style={{ flex: 1 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    Copy Specs JSON
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors.grayText,
+            }}>
+                    Diagnostics payload
+                  </Text>
+                </View>
+              </TouchableScale>
+            </View>
+
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                PACKAGE VERSION & UPGRADES
+              </Text>
+
+              <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+                marginRight: 8,
+            }}>
+                  <View style={{
+                width: 34,
+                height: 34,
+                borderRadius: 9,
+                backgroundColor: '#CB383715',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                    <NpmIcon color="#CB3837" size={17}/>
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                      <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+                        v{LIB_VERSION}
+                      </Text>
+                      {updateAvailable ? (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: '#F59E0B20',
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                    borderRadius: 5,
+                    borderWidth: 1,
+                    borderColor: '#F59E0B60',
+                }}>
+                          <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: '#D97706',
+                }}>
+                            v{latestNpmVersion} Available
+                          </Text>
+                          <BoltIcon size={9} color="#D97706"/>
+                        </View>) : (<View style={{
+                    backgroundColor: `${AppColors.emerald500}20`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                    borderRadius: 5,
+                    borderWidth: 1,
+                    borderColor: `${AppColors.emerald500}50`,
+                }}>
+                          <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors.emerald600,
+                }}>
+                            Up to date
+                          </Text>
+                        </View>)}
+                    </View>
+                    <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors.grayText,
+                marginTop: 1,
+            }}>
+                      {updateAvailable
+                ? `A newer release (v${latestNpmVersion}) is available on npm registry.`
+                : 'You are running the latest version from npm registry.'}
+                    </Text>
+                  </View>
+                </View>
+
+                <TouchableScale onPress={() => {
+                copyToClipboard('npm install react-native-inapp-inspector@latest', 'Install Command');
+                showToast('Copied npm install command!');
+            }} style={{
+                backgroundColor: updateAvailable ? AppColors.purple : `${AppColors.purple}18`,
+                paddingVertical: 7,
+                paddingHorizontal: 11,
+                borderRadius: 8,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+            }}>
+                  <CopyIcon color={updateAvailable ? AppColors.white : AppColors.purple} size={12}/>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                color: updateAvailable ? AppColors.white : AppColors.purple,
+            }}>
+                    {updateAvailable ? 'Copy Upgrade' : 'Copy Install'}
+                  </Text>
+                </TouchableScale>
+              </View>
+            </View>
+
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 10,
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                HOST APPLICATION & BUILD
+              </Text>
+
+              <View style={{ gap: 8 }}>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Application Name
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {getAppName()}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Bundle ID / Package
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: AppColors.primaryBlack }}>
+                    {getBundleIdentifier()}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Version & Build Number
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {getAppVersionAndBuild().formatted}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Build Variant
+                  </Text>
+                  <View style={{
+                backgroundColor: __DEV__ ? `${AppColors.amber500}20` : `${AppColors.emerald500}20`,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+                borderRadius: 5,
+                borderWidth: 1,
+                borderColor: __DEV__ ? `${AppColors.amber500}50` : `${AppColors.emerald500}50`,
+            }}>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10,
+                color: __DEV__ ? AppColors.amber500 : AppColors.emerald600,
+            }}>
+                      {__DEV__ ? 'Development (Debug)' : 'Production (Release)'}
+                    </Text>
+                  </View>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Metro Bundler Connection
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: isLocalDebugEnvironment() ? AppColors.emerald600 : AppColors.grayText,
+            }}>
+                    {isLocalDebugEnvironment() ? 'Connected (Hot Reload Active)' : 'Offline / Standalone'}
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 10,
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                FRAMEWORK & RUNTIME ENGINE
+              </Text>
+
+              <View style={{ gap: 8 }}>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    React Native Version
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    v{(Platform.constants?.reactNativeVersion?.major != null)
+                ? `${Platform.constants.reactNativeVersion.major}.${Platform.constants.reactNativeVersion.minor}.${Platform.constants.reactNativeVersion.patch}`
+                : '0.74+'}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    React Core Version
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    v{React.version}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    JavaScript Engine
+                  </Text>
+                  <View style={{
+                backgroundColor: `${AppColors.purple}15`,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+                borderRadius: 5,
+                borderWidth: 1,
+                borderColor: `${AppColors.purple}40`,
+            }}>
+                    <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.purple }}>
+                      {Boolean(global?.HermesInternal) ? 'Hermes Engine (Active)' : 'JavaScriptCore (JSC)'}
+                    </Text>
+                  </View>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Rendering Architecture
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {Boolean(global?.nativeFabricUIManager) ? 'Fabric (New Architecture)' : 'Paper (Legacy Bridge)'}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    TurboModules Support
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {Boolean(global?.__turboModuleProxy || global?.TurboModuleRegistry)
+                ? 'Enabled (C++ JSI)'
+                : 'Standard Bridge'}
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 10,
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                DEVICE & DISPLAY METRICS
+              </Text>
+
+              <View style={{ gap: 8 }}>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Operating System
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {Platform.OS === 'ios' ? 'Apple iOS' : Platform.OS === 'android' ? 'Google Android' : Platform.OS}{' '}
+                    {Platform.Version}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Device Hardware Model
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {Platform.constants?.Model ||
+                (Platform.OS === 'ios' ? 'Apple Device' : 'Android Device')}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Window Viewport (Points)
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {Math.round(Dimensions.get('window').width)} × {Math.round(Dimensions.get('window').height)} pt
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Native Physical Resolution
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {Math.round(Dimensions.get('screen').width * PixelRatio.get())} × {Math.round(Dimensions.get('screen').height * PixelRatio.get())} px
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Pixel Density & Font Scale
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {PixelRatio.get().toFixed(1)}x ({PixelRatio.get() >= 3 ? '@3x' : PixelRatio.get() >= 2 ? '@2x' : '@1x'}) • Font: {PixelRatio.getFontScale().toFixed(2)}x
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Timezone & Locale
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    {Intl.DateTimeFormat().resolvedOptions().timeZone || 'System'} ({Intl.DateTimeFormat().resolvedOptions().locale || 'en'})
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 10,
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                INSPECTOR STORAGE & CAPABILITIES
+              </Text>
+
+              <View style={{ gap: 8 }}>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Storage Persistence Engine
+                  </Text>
+                  <View style={{
+                backgroundColor: isPersistentStorageAvailable() ? `${AppColors.emerald500}18` : `${AppColors.amber500}18`,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+                borderRadius: 5,
+                borderWidth: 1,
+                borderColor: isPersistentStorageAvailable() ? `${AppColors.emerald500}50` : `${AppColors.amber500}50`,
+            }}>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10.5,
+                color: isPersistentStorageAvailable() ? AppColors.emerald600 : AppColors.amber500,
+            }}>
+                      {isPersistentStorageAvailable() ? 'MMKV Fast Native Storage' : 'In-Memory State'}
+                    </Text>
+                  </View>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Native Module Status
+                  </Text>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: Boolean(global?.NativeInspectorModule) ? AppColors.emerald600 : AppColors.grayText,
+            }}>
+                    {Boolean(global?.NativeInspectorModule) ? 'Linked & Active' : 'JavaScript Only'}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Network Logger Interceptor
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.emerald600 }}>
+                    Active (XMLHttpRequest & Fetch Hooked)
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Redux & Analytics Watchers
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                    Redux: {isReduxConnected() ? 'Connected' : 'Listening'} • Analytics: {isAnalyticsConnected() ? 'Connected' : 'Listening'}
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Crash & Exception Boundary
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.emerald600 }}>
+                    Global JS Exception Handler Active
+                  </Text>
+                </View>
+
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                    Memory Management
+                  </Text>
+                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.emerald600 }}>
+                    Dynamic Auto RAM Tiering Active
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 8,
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                LICENSE & CREDITS
+              </Text>
+
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                  License
+                </Text>
+                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.emerald600 }}>
+                  MIT Permissive Open Source
+                </Text>
+              </View>
+
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                  Created & Maintained By
+                </Text>
+                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                  Vengateswaran
+                </Text>
+              </View>
+
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                  Repository
+                </Text>
+                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: AppColors.purple }}>
+                  github.com/vengatmacuser/react-native-inapp-inspector
+                </Text>
+              </View>
+            </View>
+          </View>)}
         <View style={{ height: 48 }}/>
       </ScrollView>