react-native-inapp-inspector 2.3.16 → 2.3.18

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Alert, Animated, Linking, Platform, Pressable, ScrollView, Text, TouchableOpacity, useWindowDimensions, View, } from 'react-native';
+import { Alert, Animated, Linking, Platform, Pressable, Text, TouchableOpacity, useWindowDimensions, View, } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
@@ -10,10 +10,15 @@ import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, formatTime, getSize, getAppVersionAndBuild, } from '../../helpers';
-import { getNativeDeviceMetrics } from '../../native/NativeInspector';
+import { triggerNativeHaptic, } from '../../native/NativeInspector';
+import { ScreenCapture } from '../../capture';
+import { showToast } from '../../helpers/toast';
 import { UpdateAvailableModal } from './UpdateAvailableModal';
-import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, InfoCircleIcon, } from '../NetworkIcons';
+import { MediaPreviewModal } from './MediaPreviewModal';
+import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, InfoCircleIcon, CameraIcon, VideoCameraIcon, } from '../NetworkIcons';
+import { useTranslation } from '../../i18n';
 const InspectorHeader = React.memo(() => {
+    const { t } = useTranslation();
     const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, setSettingsActiveSubTab, isFeedbackOpen, setIsFeedbackOpen, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
     const { width: windowWidth } = useWindowDimensions();
     const isNarrow = windowWidth < 360;
@@ -23,17 +28,124 @@ const InspectorHeader = React.memo(() => {
     const [appVersionString, setAppVersionString] = React.useState(() => {
         return getAppVersionAndBuild().formatted;
     });
+    const [isRecording, setIsRecording] = React.useState(false);
+    const [recordingSeconds, setRecordingSeconds] = React.useState(0);
+    const recordingTimerRef = React.useRef(null);
     React.useEffect(() => {
-        getNativeDeviceMetrics()
-            .then(metrics => {
-            if (metrics?.appVersion) {
-                const v = metrics.appVersion;
-                const b = metrics.appBuild || '1';
-                setAppVersionString(`${v} (${b})`);
-            }
+        ScreenCapture.isRecording()
+            .then(active => {
+            setIsRecording(active);
         })
             .catch(() => { });
     }, []);
+    React.useEffect(() => {
+        if (isRecording) {
+            setRecordingSeconds(0);
+            recordingTimerRef.current = setInterval(() => {
+                setRecordingSeconds(s => s + 1);
+            }, 1000);
+        }
+        else {
+            if (recordingTimerRef.current) {
+                clearInterval(recordingTimerRef.current);
+                recordingTimerRef.current = null;
+            }
+            setRecordingSeconds(0);
+        }
+        return () => {
+            if (recordingTimerRef.current) {
+                clearInterval(recordingTimerRef.current);
+            }
+        };
+    }, [isRecording]);
+    const [previewMediaItem, setPreviewMediaItem] = React.useState(null);
+    const handleTakeScreenshot = React.useCallback(async () => {
+        try {
+            triggerNativeHaptic('light');
+            const result = await ScreenCapture.takeScreenshot({
+                format: 'png',
+                quality: 0.9,
+                hideInspector: true,
+            });
+            if (result) {
+                triggerNativeHaptic('success');
+                const newItem = {
+                    id: `screenshot_${result.timestamp}.png`,
+                    type: 'image',
+                    format: result.format,
+                    uri: result.uri,
+                    filename: result.uri.split('/').pop() || `screenshot_${result.timestamp}.png`,
+                    sizeBytes: result.sizeBytes,
+                    timestamp: result.timestamp,
+                    width: result.width,
+                    height: result.height,
+                };
+                setPreviewMediaItem(newItem);
+                showToast(t('header.screenshotCaptured'));
+            }
+            else {
+                showToast(t('header.screenshotFailed'));
+            }
+        }
+        catch {
+            showToast(t('header.screenshotError'));
+        }
+    }, [t]);
+    const handleToggleVideoRecording = React.useCallback(async () => {
+        try {
+            if (isRecording) {
+                triggerNativeHaptic('medium');
+                const result = await ScreenCapture.stopRecording();
+                setIsRecording(false);
+                if (result) {
+                    triggerNativeHaptic('success');
+                    const newItem = {
+                        id: `video_${result.timestamp}.${result.format}`,
+                        type: result.format === 'gif' ? 'gif' : 'video',
+                        format: result.format,
+                        uri: result.uri,
+                        filename: result.uri.split('/').pop() ||
+                            `video_${result.timestamp}.${result.format}`,
+                        sizeBytes: result.sizeBytes,
+                        timestamp: result.timestamp,
+                        durationMs: result.durationMs,
+                        width: result.width,
+                        height: result.height,
+                        hasAudio: result.hasAudio,
+                    };
+                    setPreviewMediaItem(newItem);
+                    showToast(t('header.recordingSaved', {
+                        duration: (result.durationMs / 1000).toFixed(1),
+                    }));
+                }
+            }
+            else {
+                triggerNativeHaptic('medium');
+                const started = await ScreenCapture.startRecording({
+                    fps: 24,
+                    audioSource: 'none',
+                });
+                if (started) {
+                    setIsRecording(true);
+                    showToast(t('header.recordingStarted'));
+                }
+                else {
+                    showToast(t('header.recordingStartFailed'));
+                }
+            }
+        }
+        catch {
+            showToast(t('header.recordingError'));
+            setIsRecording(false);
+        }
+    }, [isRecording, t]);
+    const formatTimer = (totalSeconds) => {
+        const mins = Math.floor(totalSeconds / 60);
+        const secs = totalSeconds % 60;
+        return `${mins.toString().padStart(2, '0')}:${secs
+            .toString()
+            .padStart(2, '0')}`;
+    };
     const envConfig = useMemo(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -100,50 +212,60 @@ const InspectorHeader = React.memo(() => {
     const buttonSize = isNarrow ? 28 : isCompact ? 30 : 32;
     const logoSize = isNarrow ? 36 : isCompact ? 40 : 44;
     return (<>
-      <LinearGradient colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.headerGradient}>
-      <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-        <View style={[
-            styles.header,
+      <View style={[
+            styles.headerGradient,
             {
-                paddingHorizontal: isNarrow ? 8 : 12,
-                paddingVertical: isNarrow ? 6 : 8,
-                minHeight: isNarrow ? 48 : 52,
+                minHeight: (isNarrow ? 48 : 52) + headerTopPadding,
             },
         ]}>
+        
+        <LinearGradient colors={[AppColors.indigo600, AppColors.violet600]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderTopLeftRadius: 20,
+            borderTopRightRadius: 20,
+        }} pointerEvents="none"/>
+        <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
           <View style={[
-            styles.headerLeft,
+            styles.header,
             {
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: isNarrow ? 6 : 8,
-                flex: !isDetailView ? 1 : 0,
-                minWidth: 0,
+                paddingHorizontal: isNarrow ? 8 : 12,
+                paddingVertical: isNarrow ? 6 : 8,
+                minHeight: isNarrow ? 48 : 52,
             },
         ]}>
-            <TouchableScale onPress={() => {
-            if (isFeedbackOpen) {
-                setIsFeedbackOpen(false);
-                return;
-            }
-            if (isSettingsView) {
-                if (settingsPage === 'main') {
-                    setSettingsPage(null);
+            <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: isNarrow ? 6 : 8,
+            flexShrink: 0,
+            flex: isAnySelected ? undefined : 1,
+            minWidth: isAnySelected ? (isNarrow ? 32 : 36) : 0,
+        }}>
+              {isAnySelected && (<TouchableScale onPress={() => {
+                if (isFeedbackOpen) {
+                    setIsFeedbackOpen(false);
+                    return;
                 }
-                else {
-                    setSettingsPage('main');
+                if (isSettingsView) {
+                    if (settingsPage === 'main') {
+                        setSettingsPage(null);
+                    }
+                    else {
+                        setSettingsPage('main');
+                    }
+                    return;
                 }
-                return;
-            }
-            requestAnimationFrame(() => {
                 setSelected(null);
                 setSelectedEvent(null);
                 setSelectedLog(null);
                 setSelectedReduxSlice(null);
                 setSelectedReduxAction(null);
                 setSelectedCrash(null);
-            });
-        }} hitSlop={15} style={[
-            {
+            }} hitSlop={15} style={{
                 width: isNarrow ? 32 : 36,
                 height: isNarrow ? 32 : 36,
                 borderRadius: isNarrow ? 16 : 18,
@@ -152,30 +274,32 @@ const InspectorHeader = React.memo(() => {
                 backgroundColor: `${AppColors.white}2E`,
                 borderWidth: 1,
                 borderColor: `${AppColors.white}4D`,
-            },
-            !isAnySelected && { display: 'none' },
-        ]}>
-              <View style={{
-            position: 'absolute',
-            width: isNarrow ? 40 : 44,
-            height: isNarrow ? 40 : 44,
-            borderRadius: 22,
-            backgroundColor: `${AppColors.white}1A`,
-        }}/>
-              <WhiteBackNavigation />
-            </TouchableScale>
+            }}>
+                  <View style={{
+                position: 'absolute',
+                width: isNarrow ? 40 : 44,
+                height: isNarrow ? 40 : 44,
+                borderRadius: 22,
+                backgroundColor: `${AppColors.white}1A`,
+            }}/>
+                  <WhiteBackNavigation />
+                </TouchableScale>)}
 
-            {isFeedbackOpen ? (<View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <Text style={{
+              {isFeedbackOpen ? (<View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                    <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: isNarrow ? 14 : 16,
                 color: AppColors.white,
                 letterSpacing: -0.2,
             }} numberOfLines={1}>
-                    Support & Feedback
-                  </Text>
-                  <View style={{
+                      Support & Feedback
+                    </Text>
+                    <View style={{
                 backgroundColor: `${AppColors.white}26`,
                 paddingHorizontal: isNarrow ? 4 : 6,
                 paddingVertical: 1.5,
@@ -183,33 +307,37 @@ const InspectorHeader = React.memo(() => {
                 borderWidth: 1,
                 borderColor: `${AppColors.white}20`,
             }}>
-                    <Text style={{
+                      <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: isNarrow ? 8 : 9,
                 color: AppColors.white,
             }}>
-                      v{LIB_VERSION}
-                    </Text>
+                        v{LIB_VERSION}
+                      </Text>
+                    </View>
                   </View>
-                </View>
-                <Text style={{
+                  <Text style={{
                 fontFamily: AppFonts.interRegular,
                 fontSize: isNarrow ? 9.5 : 10.5,
                 color: `${AppColors.white}CC`,
             }} numberOfLines={1}>
-                  Direct line to maintainers & developers
-                </Text>
-              </View>) : isSettingsView ? (<View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <Text style={{
+                    Direct line to maintainers & developers
+                  </Text>
+                </View>) : isSettingsView ? (<View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                    <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: isNarrow ? 14 : 16,
                 color: AppColors.white,
                 letterSpacing: -0.2,
             }} numberOfLines={1}>
-                    {settingsModuleTitle}
-                  </Text>
-                  {settingsPage === 'main' && (<View style={{
+                      {settingsModuleTitle}
+                    </Text>
+                    {settingsPage === 'main' && (<View style={{
                     backgroundColor: `${AppColors.white}26`,
                     paddingHorizontal: isNarrow ? 4 : 6,
                     paddingVertical: 1.5,
@@ -217,25 +345,25 @@ const InspectorHeader = React.memo(() => {
                     borderWidth: 1,
                     borderColor: `${AppColors.white}20`,
                 }}>
-                      <Text style={{
+                        <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: isNarrow ? 8 : 9,
                     color: AppColors.white,
                 }}>
-                        v{LIB_VERSION}
-                      </Text>
-                    </View>)}
-                </View>
-                <Text style={{
+                          v{LIB_VERSION}
+                        </Text>
+                      </View>)}
+                  </View>
+                  <Text style={{
                 fontFamily: AppFonts.interRegular,
                 fontSize: isNarrow ? 9.5 : 10.5,
                 color: `${AppColors.white}CC`,
             }} numberOfLines={1}>
-                  {settingsPage === 'main'
+                    {settingsPage === 'main'
                 ? 'Manage modules and preferences'
                 : 'Configure module parameters'}
-                </Text>
-              </View>) : !isAnySelected ? (<View style={{
+                  </Text>
+                </View>) : !isAnySelected ? (<View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: isNarrow ? 6 : 8,
@@ -243,15 +371,15 @@ const InspectorHeader = React.memo(() => {
                 minWidth: 0,
                 marginRight: 4,
             }}>
-                <AppHeaderLogo size={logoSize} customIcon={appIcon}/>
-                <View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                  <View style={{
+                  <AppHeaderLogo size={logoSize} customIcon={appIcon}/>
+                  <View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                    <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: isNarrow ? 4 : 6,
                 minWidth: 0,
             }}>
-                    <Text style={[
+                      <Text style={[
                 styles.headerTitle,
                 {
                     fontSize: isNarrow ? 13.5 : isCompact ? 14.5 : 15.5,
@@ -259,9 +387,9 @@ const InspectorHeader = React.memo(() => {
                     paddingBottom: 0,
                 },
             ]} numberOfLines={1} ellipsizeMode="tail">
-                      {getAppName()}
-                    </Text>
-                    <View style={[
+                        {getAppName()}
+                      </Text>
+                      <View style={[
                 styles.envBadge,
                 {
                     backgroundColor: envConfig.bg,
@@ -272,59 +400,59 @@ const InspectorHeader = React.memo(() => {
                     marginBottom: 0,
                 },
             ]}>
-                      <Text style={[
+                        <Text style={[
                 styles.envBadgeText,
                 {
                     color: envConfig.text,
                     fontSize: isNarrow ? 8.5 : 9.5,
                 },
             ]}>
-                        {envConfig.label}
-                      </Text>
-                    </View>
-                    {updateAvailable && (<Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
+                          {envConfig.label}
+                        </Text>
+                      </View>
+                      {updateAvailable && (<Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    backgroundColor: '#F59E0B',
+                    backgroundColor: AppColors.warningAmber,
                     borderRadius: 5,
                     paddingHorizontal: isNarrow ? 4 : 5.5,
                     paddingVertical: 1.5,
                     gap: 3,
-                    shadowColor: '#F59E0B',
+                    shadowColor: AppColors.warningAmber,
                     shadowOffset: { width: 0, height: 1.5 },
                     shadowOpacity: 0.35,
                     shadowRadius: 3,
                     elevation: 3,
                     flexShrink: 0,
                 }}>
-                        <Animated.View style={{
+                          <Animated.View style={{
                     width: 5,
                     height: 5,
                     borderRadius: 2.5,
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: AppColors.white,
                     opacity: activePulseAnim,
                     transform: [{ scale: unreadPulseAnim }],
                 }}/>
-                        {!isNarrow && (<Text style={{
+                          {!isNarrow && (<Text style={{
                         fontFamily: AppFonts.interBold,
                         fontSize: 8.5,
-                        color: '#FFFFFF',
+                        color: AppColors.white,
                         letterSpacing: 0.3,
                     }}>
-                            UPDATE
-                          </Text>)}
-                        <BoltIcon size={isNarrow ? 8 : 9} color="#FFFFFF"/>
-                      </Pressable>)}
-                  </View>
+                              UPDATE
+                            </Text>)}
+                          <BoltIcon size={isNarrow ? 8 : 9} color={AppColors.white}/>
+                        </Pressable>)}
+                    </View>
 
-                  
-                  <View style={{
+                    
+                    <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: isNarrow ? 4 : 5,
                 minWidth: 0,
             }}>
-                    <View style={{
+                      <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 backgroundColor: `${AppColors.white}1F`,
@@ -337,18 +465,18 @@ const InspectorHeader = React.memo(() => {
                 flexShrink: 1,
                 minWidth: 0,
             }}>
-                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={isNarrow ? 9 : 10}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={isNarrow ? 9 : 10}/>)}
-                      <Text style={{
+                        {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={isNarrow ? 9 : 10}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={isNarrow ? 9 : 10}/>)}
+                        <Text style={{
                 fontFamily: AppFonts.interMedium,
                 fontSize: isNarrow ? 8.5 : 9.5,
                 color: `${AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1} ellipsizeMode="tail">
-                        {appVersionString}
-                      </Text>
-                    </View>
+                          {appVersionString}
+                        </Text>
+                      </View>
 
-                    <Pressable onPress={() => {
+                      <Pressable onPress={() => {
                 if (updateAvailable) {
                     setShowUpdateModal(true);
                 }
@@ -367,32 +495,35 @@ const InspectorHeader = React.memo(() => {
                 borderColor: `${AppColors.white}2E`,
                 flexShrink: 0,
             }}>
-                      <NpmIcon size={isNarrow ? 9 : 10} color="#FF6B6B"/>
-                      <Text style={{
+                        <NpmIcon size={isNarrow ? 9 : 10} color={AppColors.npmRedLight}/>
+                        <Text style={{
                 fontFamily: AppFonts.interMedium,
                 fontSize: isNarrow ? 8.5 : 9.5,
                 color: `${AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
-                        v{LIB_VERSION}
-                      </Text>
-                      {updateAvailable && (<Text style={{
+                          v{LIB_VERSION}
+                        </Text>
+                        {updateAvailable && (<Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 8.5,
-                    color: '#F59E0B',
+                    color: AppColors.warningAmber,
                 }}>
-                          ●
-                        </Text>)}
-                    </Pressable>
+                            ●
+                          </Text>)}
+                      </Pressable>
+                    </View>
                   </View>
-                </View>
-              </View>) : null}
-          </View>
+                </View>) : null}
+            </View>
 
-          {isDetailView && (<View style={[styles.headerCenter, { paddingHorizontal: isNarrow ? 2 : 6 }]}>
-              {activeTab === 'apis' && selected != null ? (<View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View style={[
+            {isDetailView && (<View style={[
+                styles.headerCenter,
+                { paddingHorizontal: isNarrow ? 2 : 6 },
+            ]}>
+                {activeTab === 'apis' && selected != null ? (<View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
+                      <View style={[
                     styles.headerMethodBadge,
                     {
                         backgroundColor: METHOD_COLORS[selected.method] ??
@@ -401,22 +532,28 @@ const InspectorHeader = React.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
-                        {selected.method}
+                        <Text style={[
+                    styles.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          {selected.method}
+                        </Text>
+                      </View>
+                      <Text style={[
+                    styles.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        {detailTitle}
                       </Text>
                     </View>
-                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      {detailTitle}
-                    </Text>
-                  </View>
-                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <View style={{
+                      <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
@@ -427,7 +564,7 @@ const InspectorHeader = React.memo(() => {
                     borderWidth: 1,
                     borderColor: `${getStatusColor(selected.status)}55`,
                 }}>
-                      <View style={[
+                        <View style={[
                     styles.headerStatusDot,
                     {
                         backgroundColor: getStatusColor(selected.status),
@@ -435,16 +572,19 @@ const InspectorHeader = React.memo(() => {
                         height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                      <Text style={[
+                        <Text style={[
                     styles.headerSubTitle,
-                    { fontFamily: AppFonts.interBold, fontSize: isNarrow ? 10 : 11 },
+                    {
+                        fontFamily: AppFonts.interBold,
+                        fontSize: isNarrow ? 10 : 11,
+                    },
                 ]}>
-                        {selected.status === 0
+                          {selected.status === 0
                     ? 'Failed'
                     : selected.status ?? 'Pending'}
-                      </Text>
-                    </View>
-                    <View style={{
+                        </Text>
+                      </View>
+                      <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
@@ -453,14 +593,17 @@ const InspectorHeader = React.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors.white}29`,
                 }}>
-                      <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
-                      <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                        {selected.duration != null
+                        <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
+                        <Text style={[
+                    styles.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                          {selected.duration != null
                     ? `${selected.duration}ms`
                     : '—'}
-                      </Text>
-                    </View>
-                    {selected.response != null && (<View style={{
+                        </Text>
+                      </View>
+                      {selected.response != null && (<View style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 4,
@@ -469,15 +612,18 @@ const InspectorHeader = React.memo(() => {
                         borderRadius: 20,
                         backgroundColor: `${AppColors.white}29`,
                     }}>
-                        <SizeIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
-                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                          {getSize(selected.response)}
-                        </Text>
-                      </View>)}
-                  </ScrollView>
-                </View>) : activeTab === 'analytics' && selectedEvent != null ? (<View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View style={[
+                          <SizeIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
+                          <Text style={[
+                        styles.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            {getSize(selected.response)}
+                          </Text>
+                        </View>)}
+                    </View>
+                  </View>) : activeTab === 'analytics' && selectedEvent != null ? (<View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
+                      <View style={[
                     styles.headerMethodBadge,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -487,22 +633,28 @@ const InspectorHeader = React.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
-                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                        <Text style={[
+                    styles.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                        </Text>
+                      </View>
+                      <Text style={[
+                    styles.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        {selectedEvent.name}
                       </Text>
                     </View>
-                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      {selectedEvent.name}
-                    </Text>
-                  </View>
-                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <View style={[
+                      <View style={[
                     styles.headerStatusDot,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -512,18 +664,21 @@ const InspectorHeader = React.memo(() => {
                         height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                      {Object.keys(selectedEvent.params).length} param
-                      {Object.keys(selectedEvent.params).length !== 1
+                      <Text style={[
+                    styles.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                        {Object.keys(selectedEvent.params).length} param
+                        {Object.keys(selectedEvent.params).length !== 1
                     ? 's'
                     : ''}
-                      {' · '}
-                      {selectedEvent.source}
-                    </Text>
-                  </ScrollView>
-                </View>) : activeTab === 'logs' && selectedLog != null ? (<View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View style={[
+                        {' · '}
+                        {selectedEvent.source}
+                      </Text>
+                    </View>
+                  </View>) : activeTab === 'logs' && selectedLog != null ? (<View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
+                      <View style={[
                     styles.headerMethodBadge,
                     {
                         backgroundColor: selectedLog.type === 'error'
@@ -535,23 +690,29 @@ const InspectorHeader = React.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
-                        {selectedLog.type.toUpperCase()}
+                        <Text style={[
+                    styles.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          {selectedLog.type.toUpperCase()}
+                        </Text>
+                      </View>
+                      <Text style={[
+                    styles.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        console.
+                        {selectedLog.sourceMethod || selectedLog.type || 'log'}
                       </Text>
                     </View>
-                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      console.
-                      {selectedLog.sourceMethod || selectedLog.type || 'log'}
-                    </Text>
-                  </View>
-                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <View style={{
+                      <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
@@ -560,13 +721,16 @@ const InspectorHeader = React.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors.white}29`,
                 }}>
-                      <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
-                      <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                        {formatTime(selectedLog.timestamp)}
-                      </Text>
+                        <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
+                        <Text style={[
+                    styles.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                          {formatTime(selectedLog.timestamp)}
+                        </Text>
+                      </View>
                     </View>
-                  </ScrollView>
-                </View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
+                  </View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
                 const sliceData = reduxState?.[selectedReduxSlice];
                 const keyCount = sliceData && typeof sliceData === 'object'
                     ? Object.keys(sliceData).length
@@ -576,8 +740,8 @@ const InspectorHeader = React.memo(() => {
                 const sliceSize = getSize(sliceData);
                 const lastAction = reduxLastActionMap[selectedReduxSlice];
                 return (<View style={styles.headerDetailCenter}>
-                      <View style={styles.headerDetailRow}>
-                        <View style={[
+                        <View style={styles.headerDetailRow}>
+                          <View style={[
                         styles.headerMethodBadge,
                         {
                             backgroundColor: `${AppColors.purple}4D`,
@@ -585,20 +749,28 @@ const InspectorHeader = React.memo(() => {
                             paddingVertical: isNarrow ? 2 : 3,
                         },
                     ]}>
-                          <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>SLICE</Text>
+                            <Text style={[
+                        styles.headerMethodText,
+                        { fontSize: isNarrow ? 9 : 10 },
+                    ]}>
+                              SLICE
+                            </Text>
+                          </View>
+                          <Text style={[
+                        styles.headerDetailTitle,
+                        { fontSize: isNarrow ? 13.5 : 15 },
+                    ]} numberOfLines={1} ellipsizeMode="middle">
+                            {selectedReduxSlice}
+                          </Text>
                         </View>
-                        <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                          {selectedReduxSlice}
-                        </Text>
-                      </View>
-                      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                        <View style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: isNarrow ? 4 : 6,
                         marginTop: 3,
                         paddingVertical: 1,
                     }}>
-                        <View style={[
+                          <View style={[
                         styles.headerStatusDot,
                         {
                             backgroundColor: AppColors.liveGreen,
@@ -606,37 +778,62 @@ const InspectorHeader = React.memo(() => {
                             height: isNarrow ? 6 : 7,
                         },
                     ]}/>
-                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>Live</Text>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
-                          •
-                        </Text>
-                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                          {keyCount} keys
-                        </Text>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
-                          •
-                        </Text>
-                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>{sliceSize}</Text>
-                        {lastAction?.timestamp && (<>
-                            <Text style={[styles.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
-                              •
-                            </Text>
-                            <View style={{
+                          <Text style={[
+                        styles.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            Live
+                          </Text>
+                          <Text style={[
+                        styles.headerSubTitle,
+                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            •
+                          </Text>
+                          <Text style={[
+                        styles.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            {keyCount} keys
+                          </Text>
+                          <Text style={[
+                        styles.headerSubTitle,
+                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            •
+                          </Text>
+                          <Text style={[
+                        styles.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            {sliceSize}
+                          </Text>
+                          {lastAction?.timestamp && (<>
+                              <Text style={[
+                            styles.headerSubTitle,
+                            { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
+                        ]}>
+                                •
+                              </Text>
+                              <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 3,
                         }}>
-                              <ClockIcon color={AppColors.white} size={isNarrow ? 9 : 10}/>
-                              <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                                {lastAction.timestamp}
-                              </Text>
-                            </View>
-                          </>)}
-                      </ScrollView>
-                    </View>);
+                                <ClockIcon color={AppColors.white} size={isNarrow ? 9 : 10}/>
+                                <Text style={[
+                            styles.headerSubTitle,
+                            { fontSize: isNarrow ? 10 : 11 },
+                        ]}>
+                                  {lastAction.timestamp}
+                                </Text>
+                              </View>
+                            </>)}
+                        </View>
+                      </View>);
             })()) : activeTab === 'redux' && selectedReduxAction != null ? (<View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View style={[
+                    <View style={styles.headerDetailRow}>
+                      <View style={[
                     styles.headerMethodBadge,
                     {
                         backgroundColor: `${AppColors.brandPurple}4D`,
@@ -644,20 +841,28 @@ const InspectorHeader = React.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>ACTION</Text>
+                        <Text style={[
+                    styles.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          ACTION
+                        </Text>
+                      </View>
+                      <Text style={[
+                    styles.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        {selectedReduxAction.type}
+                      </Text>
                     </View>
-                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      {selectedReduxAction.type}
-                    </Text>
-                  </View>
-                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <View style={[
+                      <View style={[
                     styles.headerStatusDot,
                     {
                         backgroundColor: AppColors.purple,
@@ -665,13 +870,16 @@ const InspectorHeader = React.memo(() => {
                         height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                      {selectedReduxAction.timestamp || 'Dispatched'}
-                    </Text>
-                  </ScrollView>
-                </View>) : activeTab === 'crash' && selectedCrash != null ? (<View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View style={[
+                      <Text style={[
+                    styles.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                        {selectedReduxAction.timestamp || 'Dispatched'}
+                      </Text>
+                    </View>
+                  </View>) : activeTab === 'crash' && selectedCrash != null ? (<View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
+                      <View style={[
                     styles.headerMethodBadge,
                     {
                         backgroundColor: selectedCrash.isFatal
@@ -681,24 +889,30 @@ const InspectorHeader = React.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
-                        {selectedCrash.isFatal
+                        <Text style={[
+                    styles.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          {selectedCrash.isFatal
                     ? 'FATAL'
                     : selectedCrash.type.toUpperCase()}
+                        </Text>
+                      </View>
+                      <Text style={[
+                    styles.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        {selectedCrash.name || selectedCrash.message}
                       </Text>
                     </View>
-                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      {selectedCrash.name || selectedCrash.message}
-                    </Text>
-                  </View>
-                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <View style={[
+                      <View style={[
                     styles.headerStatusDot,
                     {
                         backgroundColor: selectedCrash.isFatal
@@ -708,23 +922,32 @@ const InspectorHeader = React.memo(() => {
                         height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                      {selectedCrash.timeStr ||
+                      <Text style={[
+                    styles.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                        {selectedCrash.timeStr ||
                     new Date(selectedCrash.timestamp).toLocaleTimeString()}
-                    </Text>
-                    {selectedCrash.deviceInfo?.platform && (<>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
-                          •
-                        </Text>
-                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                          {selectedCrash.deviceInfo.platform.toUpperCase()}
-                        </Text>
-                      </>)}
-                  </ScrollView>
-                </View>) : null}
-            </View>)}
+                      </Text>
+                      {selectedCrash.deviceInfo?.platform && (<>
+                          <Text style={[
+                        styles.headerSubTitle,
+                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            •
+                          </Text>
+                          <Text style={[
+                        styles.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            {selectedCrash.deviceInfo.platform.toUpperCase()}
+                          </Text>
+                        </>)}
+                    </View>
+                  </View>) : null}
+              </View>)}
 
-          <View style={[
+            <View style={[
             styles.headerRight,
             {
                 flexDirection: 'row',
@@ -734,7 +957,7 @@ const InspectorHeader = React.memo(() => {
                 gap: isNarrow ? 5 : 7,
             },
         ]}>
-            {isSettingsView && (<TouchableScale onPress={() => {
+              {isSettingsView && (<TouchableScale onPress={() => {
                 Alert.alert('Reset All Settings', 'This restores all module visibility and UI preferences to defaults. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
                     {
@@ -751,19 +974,10 @@ const InspectorHeader = React.memo(() => {
                     borderRadius: isNarrow ? 6 : 7,
                 },
             ]}>
-                <ResetIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
-              </TouchableScale>)}
+                  <ResetIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
+                </TouchableScale>)}
 
-            {!isAnySelected && (<TouchableScale onPress={() => {
-                Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?', [
-                    { text: 'Cancel', style: 'cancel' },
-                    {
-                        text: 'Clear All',
-                        onPress: runClearAllWithAnimation,
-                        style: 'destructive',
-                    },
-                ]);
-            }} hitSlop={15} style={[
+              {!isAnySelected && (<TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Settings" onPress={() => setSettingsPage('main')} hitSlop={15} style={[
                 styles.closeButtonSquare,
                 {
                     width: buttonSize,
@@ -771,7 +985,112 @@ const InspectorHeader = React.memo(() => {
                     borderRadius: isNarrow ? 6 : 7,
                 },
             ]}>
-                <Animated.View style={{
+                  <SettingsIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
+                </TouchableScale>)}
+
+              <TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
+            styles.closeButtonSquare,
+            {
+                width: buttonSize,
+                height: buttonSize,
+                borderRadius: isNarrow ? 6 : 7,
+            },
+        ]}>
+                <CloseWhite size={isNarrow ? 12 : 14}/>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          
+          {!isAnySelected && (<View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingHorizontal: isNarrow ? 8 : 12,
+                paddingBottom: isNarrow ? 6 : 8,
+                paddingTop: 0,
+                gap: 6,
+            }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                
+                <TouchableScale onPress={handleTakeScreenshot} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4.5,
+                backgroundColor: `${AppColors.white}24`,
+                paddingHorizontal: isNarrow ? 8 : 10,
+                paddingVertical: isNarrow ? 4 : 5,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: `${AppColors.white}33`,
+            }}>
+                  <CameraIcon size={isNarrow ? 12 : 13} color={AppColors.white}/>
+                  <Text style={{
+                fontFamily: AppFonts.interSemiBold,
+                fontSize: isNarrow ? 10 : 11,
+                color: AppColors.white,
+            }}>
+                    {t('header.photo')}
+                  </Text>
+                </TouchableScale>
+
+                
+                <TouchableScale onPress={handleToggleVideoRecording} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4.5,
+                backgroundColor: isRecording
+                    ? `${AppColors.red500}33`
+                    : `${AppColors.white}24`,
+                paddingHorizontal: isNarrow ? 8 : 10,
+                paddingVertical: isNarrow ? 4 : 5,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: isRecording
+                    ? AppColors.red500
+                    : `${AppColors.white}33`,
+            }}>
+                  {isRecording ? (<Animated.View style={{
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    backgroundColor: AppColors.red500,
+                }}/>) : (<VideoCameraIcon size={isNarrow ? 12 : 13} color={AppColors.white}/>)}
+                  <Text style={{
+                fontFamily: AppFonts.interSemiBold,
+                fontSize: isNarrow ? 10 : 11,
+                color: isRecording ? AppColors.red300 : AppColors.white,
+            }}>
+                    {isRecording
+                ? `${t('header.rec')} ${formatTimer(recordingSeconds)}`
+                : t('header.record')}
+                  </Text>
+                </TouchableScale>
+              </View>
+
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                
+                <TouchableScale onPress={() => {
+                Alert.alert(t('header.clearEverythingTitle'), t('header.clearEverythingMessage'), [
+                    { text: t('common.cancel'), style: 'cancel' },
+                    {
+                        text: t('common.clearAll'),
+                        onPress: runClearAllWithAnimation,
+                        style: 'destructive',
+                    },
+                ]);
+            }} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+                backgroundColor: `${AppColors.white}1A`,
+                paddingHorizontal: isNarrow ? 7 : 9,
+                paddingVertical: isNarrow ? 4 : 5,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: `${AppColors.white}26`,
+            }}>
+                  <Animated.View style={{
                 transform: [
                     {
                         rotate: clearAnim.interpolate({
@@ -787,52 +1106,71 @@ const InspectorHeader = React.memo(() => {
                     },
                 ],
             }}>
-                  <TrashIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
-                </Animated.View>
-              </TouchableScale>)}
-
-            {!isAnySelected && (<TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Settings" onPress={() => setSettingsPage('main')} hitSlop={15} style={[
-                styles.closeButtonSquare,
-                {
-                    width: buttonSize,
-                    height: buttonSize,
-                    borderRadius: isNarrow ? 6 : 7,
-                },
-            ]}>
-                <SettingsIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
-              </TouchableScale>)}
+                    <TrashIcon color={AppColors.white} size={isNarrow ? 11 : 12}/>
+                  </Animated.View>
+                  <Text style={{
+                fontFamily: AppFonts.interMedium,
+                fontSize: isNarrow ? 10 : 11,
+                color: `${AppColors.white}E6`,
+            }}>
+                    {t('header.clear')}
+                  </Text>
+                </TouchableScale>
 
-            {!isAnySelected && (<TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="About and System Specifications" onPress={() => {
+                
+                <TouchableScale onPress={() => {
                 setSettingsActiveSubTab('about');
                 setSettingsPage('main');
-            }} hitSlop={15} style={[
-                styles.closeButtonSquare,
-                {
-                    width: buttonSize,
-                    height: buttonSize,
-                    borderRadius: isNarrow ? 6 : 7,
-                },
-            ]}>
-                <InfoCircleIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
-              </TouchableScale>)}
-
-            <TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
-            styles.closeButtonSquare,
-            {
-                width: buttonSize,
-                height: buttonSize,
-                borderRadius: isNarrow ? 6 : 7,
-            },
-        ]}>
-              <CloseWhite size={isNarrow ? 12 : 14}/>
-            </TouchableOpacity>
-          </View>
+            }} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+                backgroundColor: `${AppColors.white}1A`,
+                paddingHorizontal: isNarrow ? 7 : 9,
+                paddingVertical: isNarrow ? 4 : 5,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: `${AppColors.white}26`,
+            }}>
+                  <InfoCircleIcon color={AppColors.white} size={isNarrow ? 11 : 12}/>
+                  <Text style={{
+                fontFamily: AppFonts.interMedium,
+                fontSize: isNarrow ? 10 : 11,
+                color: `${AppColors.white}E6`,
+            }}>
+                    {t('header.about')}
+                  </Text>
+                </TouchableScale>
+              </View>
+            </View>)}
         </View>
       </View>
-    </LinearGradient>
 
-    
-    <UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+      
+      <UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+
+      
+      <MediaPreviewModal item={previewMediaItem} visible={!!previewMediaItem} onClose={() => setPreviewMediaItem(null)} onDelete={async (item) => {
+            await ScreenCapture.deleteMedia(item.uri);
+            setPreviewMediaItem(null);
+        }} onConvertToGif={async (item) => {
+            const gif = await ScreenCapture.convertToGif(item.uri, {
+                fps: 12,
+                width: 480,
+            });
+            if (gif) {
+                setPreviewMediaItem({
+                    id: `anim_${gif.timestamp}.gif`,
+                    type: 'gif',
+                    format: 'gif',
+                    uri: gif.uri,
+                    filename: gif.uri.split('/').pop() || `anim_${gif.timestamp}.gif`,
+                    sizeBytes: gif.sizeBytes,
+                    timestamp: gif.timestamp,
+                    durationMs: gif.durationMs,
+                });
+            }
+        }}/>
     </>);
 });
 export default InspectorHeader;