react-native-inapp-inspector 2.3.16 → 2.3.17

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

@@ -49,9 +49,14 @@ const constants_1 = require("../../constants");
 const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const NativeInspector_1 = require("../../native/NativeInspector");
+const capture_1 = require("../../capture");
+const toast_1 = require("../../helpers/toast");
 const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
+const MediaPreviewModal_1 = require("./MediaPreviewModal");
 const NetworkIcons_1 = require("../NetworkIcons");
+const i18n_1 = require("../../i18n");
 const InspectorHeader = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.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, } = (0, InspectorContext_1.useInspector)();
     const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
     const isNarrow = windowWidth < 360;
@@ -61,17 +66,124 @@ const InspectorHeader = react_1.default.memo(() => {
     const [appVersionString, setAppVersionString] = react_1.default.useState(() => {
         return (0, helpers_1.getAppVersionAndBuild)().formatted;
     });
+    const [isRecording, setIsRecording] = react_1.default.useState(false);
+    const [recordingSeconds, setRecordingSeconds] = react_1.default.useState(0);
+    const recordingTimerRef = react_1.default.useRef(null);
     react_1.default.useEffect(() => {
-        (0, NativeInspector_1.getNativeDeviceMetrics)()
-            .then(metrics => {
-            if (metrics?.appVersion) {
-                const v = metrics.appVersion;
-                const b = metrics.appBuild || '1';
-                setAppVersionString(`${v} (${b})`);
-            }
+        capture_1.ScreenCapture.isRecording()
+            .then(active => {
+            setIsRecording(active);
         })
             .catch(() => { });
     }, []);
+    react_1.default.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_1.default.useState(null);
+    const handleTakeScreenshot = react_1.default.useCallback(async () => {
+        try {
+            (0, NativeInspector_1.triggerNativeHaptic)('light');
+            const result = await capture_1.ScreenCapture.takeScreenshot({
+                format: 'png',
+                quality: 0.9,
+                hideInspector: true,
+            });
+            if (result) {
+                (0, NativeInspector_1.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);
+                (0, toast_1.showToast)(t('header.screenshotCaptured'));
+            }
+            else {
+                (0, toast_1.showToast)(t('header.screenshotFailed'));
+            }
+        }
+        catch {
+            (0, toast_1.showToast)(t('header.screenshotError'));
+        }
+    }, [t]);
+    const handleToggleVideoRecording = react_1.default.useCallback(async () => {
+        try {
+            if (isRecording) {
+                (0, NativeInspector_1.triggerNativeHaptic)('medium');
+                const result = await capture_1.ScreenCapture.stopRecording();
+                setIsRecording(false);
+                if (result) {
+                    (0, NativeInspector_1.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);
+                    (0, toast_1.showToast)(t('header.recordingSaved', {
+                        duration: (result.durationMs / 1000).toFixed(1),
+                    }));
+                }
+            }
+            else {
+                (0, NativeInspector_1.triggerNativeHaptic)('medium');
+                const started = await capture_1.ScreenCapture.startRecording({
+                    fps: 24,
+                    audioSource: 'none',
+                });
+                if (started) {
+                    setIsRecording(true);
+                    (0, toast_1.showToast)(t('header.recordingStarted'));
+                }
+                else {
+                    (0, toast_1.showToast)(t('header.recordingStartFailed'));
+                }
+            }
+        }
+        catch {
+            (0, toast_1.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 = (0, react_1.useMemo)(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -138,50 +250,60 @@ const InspectorHeader = react_1.default.memo(() => {
     const buttonSize = isNarrow ? 28 : isCompact ? 30 : 32;
     const logoSize = isNarrow ? 36 : isCompact ? 40 : 44;
     return (<>
-      <react_native_linear_gradient_1.default colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles_1.default.headerGradient}>
-      <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-        <react_native_1.View style={[
-            styles_1.default.header,
+      <react_native_1.View style={[
+            styles_1.default.headerGradient,
             {
-                paddingHorizontal: isNarrow ? 8 : 12,
-                paddingVertical: isNarrow ? 6 : 8,
-                minHeight: isNarrow ? 48 : 52,
+                minHeight: (isNarrow ? 48 : 52) + headerTopPadding,
             },
         ]}>
+        
+        <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.indigo600, AppColors_1.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"/>
+        <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
           <react_native_1.View style={[
-            styles_1.default.headerLeft,
+            styles_1.default.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_1.default onPress={() => {
-            if (isFeedbackOpen) {
-                setIsFeedbackOpen(false);
-                return;
-            }
-            if (isSettingsView) {
-                if (settingsPage === 'main') {
-                    setSettingsPage(null);
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: isNarrow ? 6 : 8,
+            flexShrink: 0,
+            flex: isAnySelected ? undefined : 1,
+            minWidth: isAnySelected ? (isNarrow ? 32 : 36) : 0,
+        }}>
+              {isAnySelected && (<TouchableScale_1.default 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,
@@ -190,30 +312,32 @@ const InspectorHeader = react_1.default.memo(() => {
                 backgroundColor: `${AppColors_1.AppColors.white}2E`,
                 borderWidth: 1,
                 borderColor: `${AppColors_1.AppColors.white}4D`,
-            },
-            !isAnySelected && { display: 'none' },
-        ]}>
-              <react_native_1.View style={{
-            position: 'absolute',
-            width: isNarrow ? 40 : 44,
-            height: isNarrow ? 40 : 44,
-            borderRadius: 22,
-            backgroundColor: `${AppColors_1.AppColors.white}1A`,
-        }}/>
-              <NetworkIcons_1.WhiteBackNavigation />
-            </TouchableScale_1.default>
+            }}>
+                  <react_native_1.View style={{
+                position: 'absolute',
+                width: isNarrow ? 40 : 44,
+                height: isNarrow ? 40 : 44,
+                borderRadius: 22,
+                backgroundColor: `${AppColors_1.AppColors.white}1A`,
+            }}/>
+                  <NetworkIcons_1.WhiteBackNavigation />
+                </TouchableScale_1.default>)}
 
-            {isFeedbackOpen ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <react_native_1.Text style={{
+              {isFeedbackOpen ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                    <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: isNarrow ? 14 : 16,
                 color: AppColors_1.AppColors.white,
                 letterSpacing: -0.2,
             }} numberOfLines={1}>
-                    Support & Feedback
-                  </react_native_1.Text>
-                  <react_native_1.View style={{
+                      Support & Feedback
+                    </react_native_1.Text>
+                    <react_native_1.View style={{
                 backgroundColor: `${AppColors_1.AppColors.white}26`,
                 paddingHorizontal: isNarrow ? 4 : 6,
                 paddingVertical: 1.5,
@@ -221,33 +345,37 @@ const InspectorHeader = react_1.default.memo(() => {
                 borderWidth: 1,
                 borderColor: `${AppColors_1.AppColors.white}20`,
             }}>
-                    <react_native_1.Text style={{
+                      <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: isNarrow ? 8 : 9,
                 color: AppColors_1.AppColors.white,
             }}>
-                      v{constants_2.LIB_VERSION}
-                    </react_native_1.Text>
+                        v{constants_2.LIB_VERSION}
+                      </react_native_1.Text>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
-                <react_native_1.Text style={{
+                  <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: isNarrow ? 9.5 : 10.5,
                 color: `${AppColors_1.AppColors.white}CC`,
             }} numberOfLines={1}>
-                  Direct line to maintainers & developers
-                </react_native_1.Text>
-              </react_native_1.View>) : isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <react_native_1.Text style={{
+                    Direct line to maintainers & developers
+                  </react_native_1.Text>
+                </react_native_1.View>) : isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                    <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: isNarrow ? 14 : 16,
                 color: AppColors_1.AppColors.white,
                 letterSpacing: -0.2,
             }} numberOfLines={1}>
-                    {settingsModuleTitle}
-                  </react_native_1.Text>
-                  {settingsPage === 'main' && (<react_native_1.View style={{
+                      {settingsModuleTitle}
+                    </react_native_1.Text>
+                    {settingsPage === 'main' && (<react_native_1.View style={{
                     backgroundColor: `${AppColors_1.AppColors.white}26`,
                     paddingHorizontal: isNarrow ? 4 : 6,
                     paddingVertical: 1.5,
@@ -255,25 +383,25 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderWidth: 1,
                     borderColor: `${AppColors_1.AppColors.white}20`,
                 }}>
-                      <react_native_1.Text style={{
+                        <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: isNarrow ? 8 : 9,
                     color: AppColors_1.AppColors.white,
                 }}>
-                        v{constants_2.LIB_VERSION}
-                      </react_native_1.Text>
-                    </react_native_1.View>)}
-                </react_native_1.View>
-                <react_native_1.Text style={{
+                          v{constants_2.LIB_VERSION}
+                        </react_native_1.Text>
+                      </react_native_1.View>)}
+                  </react_native_1.View>
+                  <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: isNarrow ? 9.5 : 10.5,
                 color: `${AppColors_1.AppColors.white}CC`,
             }} numberOfLines={1}>
-                  {settingsPage === 'main'
+                    {settingsPage === 'main'
                 ? 'Manage modules and preferences'
                 : 'Configure module parameters'}
-                </react_native_1.Text>
-              </react_native_1.View>) : !isAnySelected ? (<react_native_1.View style={{
+                  </react_native_1.Text>
+                </react_native_1.View>) : !isAnySelected ? (<react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: isNarrow ? 6 : 8,
@@ -281,15 +409,15 @@ const InspectorHeader = react_1.default.memo(() => {
                 minWidth: 0,
                 marginRight: 4,
             }}>
-                <AppHeaderLogo_1.default size={logoSize} customIcon={appIcon}/>
-                <react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                  <react_native_1.View style={{
+                  <AppHeaderLogo_1.default size={logoSize} customIcon={appIcon}/>
+                  <react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                    <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: isNarrow ? 4 : 6,
                 minWidth: 0,
             }}>
-                    <react_native_1.Text style={[
+                      <react_native_1.Text style={[
                 styles_1.default.headerTitle,
                 {
                     fontSize: isNarrow ? 13.5 : isCompact ? 14.5 : 15.5,
@@ -297,9 +425,9 @@ const InspectorHeader = react_1.default.memo(() => {
                     paddingBottom: 0,
                 },
             ]} numberOfLines={1} ellipsizeMode="tail">
-                      {(0, helpers_1.getAppName)()}
-                    </react_native_1.Text>
-                    <react_native_1.View style={[
+                        {(0, helpers_1.getAppName)()}
+                      </react_native_1.Text>
+                      <react_native_1.View style={[
                 styles_1.default.envBadge,
                 {
                     backgroundColor: envConfig.bg,
@@ -310,59 +438,59 @@ const InspectorHeader = react_1.default.memo(() => {
                     marginBottom: 0,
                 },
             ]}>
-                      <react_native_1.Text style={[
+                        <react_native_1.Text style={[
                 styles_1.default.envBadgeText,
                 {
                     color: envConfig.text,
                     fontSize: isNarrow ? 8.5 : 9.5,
                 },
             ]}>
-                        {envConfig.label}
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                    {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
+                          {envConfig.label}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    backgroundColor: '#F59E0B',
+                    backgroundColor: AppColors_1.AppColors.warningAmber,
                     borderRadius: 5,
                     paddingHorizontal: isNarrow ? 4 : 5.5,
                     paddingVertical: 1.5,
                     gap: 3,
-                    shadowColor: '#F59E0B',
+                    shadowColor: AppColors_1.AppColors.warningAmber,
                     shadowOffset: { width: 0, height: 1.5 },
                     shadowOpacity: 0.35,
                     shadowRadius: 3,
                     elevation: 3,
                     flexShrink: 0,
                 }}>
-                        <react_native_1.Animated.View style={{
+                          <react_native_1.Animated.View style={{
                     width: 5,
                     height: 5,
                     borderRadius: 2.5,
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: AppColors_1.AppColors.white,
                     opacity: activePulseAnim,
                     transform: [{ scale: unreadPulseAnim }],
                 }}/>
-                        {!isNarrow && (<react_native_1.Text style={{
+                          {!isNarrow && (<react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 8.5,
-                        color: '#FFFFFF',
+                        color: AppColors_1.AppColors.white,
                         letterSpacing: 0.3,
                     }}>
-                            UPDATE
-                          </react_native_1.Text>)}
-                        <NetworkIcons_1.BoltIcon size={isNarrow ? 8 : 9} color="#FFFFFF"/>
-                      </react_native_1.Pressable>)}
-                  </react_native_1.View>
+                              UPDATE
+                            </react_native_1.Text>)}
+                          <NetworkIcons_1.BoltIcon size={isNarrow ? 8 : 9} color={AppColors_1.AppColors.white}/>
+                        </react_native_1.Pressable>)}
+                    </react_native_1.View>
 
-                  
-                  <react_native_1.View style={{
+                    
+                    <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: isNarrow ? 4 : 5,
                 minWidth: 0,
             }}>
-                    <react_native_1.View style={{
+                      <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 backgroundColor: `${AppColors_1.AppColors.white}1F`,
@@ -375,18 +503,18 @@ const InspectorHeader = react_1.default.memo(() => {
                 flexShrink: 1,
                 minWidth: 0,
             }}>
-                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`} size={isNarrow ? 9 : 10}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`} size={isNarrow ? 9 : 10}/>)}
-                      <react_native_1.Text style={{
+                        {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`} size={isNarrow ? 9 : 10}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`} size={isNarrow ? 9 : 10}/>)}
+                        <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interMedium,
                 fontSize: isNarrow ? 8.5 : 9.5,
                 color: `${AppColors_1.AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1} ellipsizeMode="tail">
-                        {appVersionString}
-                      </react_native_1.Text>
-                    </react_native_1.View>
+                          {appVersionString}
+                        </react_native_1.Text>
+                      </react_native_1.View>
 
-                    <react_native_1.Pressable onPress={() => {
+                      <react_native_1.Pressable onPress={() => {
                 if (updateAvailable) {
                     setShowUpdateModal(true);
                 }
@@ -405,32 +533,35 @@ const InspectorHeader = react_1.default.memo(() => {
                 borderColor: `${AppColors_1.AppColors.white}2E`,
                 flexShrink: 0,
             }}>
-                      <NetworkIcons_1.NpmIcon size={isNarrow ? 9 : 10} color="#FF6B6B"/>
-                      <react_native_1.Text style={{
+                        <NetworkIcons_1.NpmIcon size={isNarrow ? 9 : 10} color={AppColors_1.AppColors.npmRedLight}/>
+                        <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interMedium,
                 fontSize: isNarrow ? 8.5 : 9.5,
                 color: `${AppColors_1.AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
-                        v{constants_2.LIB_VERSION}
-                      </react_native_1.Text>
-                      {updateAvailable && (<react_native_1.Text style={{
+                          v{constants_2.LIB_VERSION}
+                        </react_native_1.Text>
+                        {updateAvailable && (<react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 8.5,
-                    color: '#F59E0B',
+                    color: AppColors_1.AppColors.warningAmber,
                 }}>
-                          ●
-                        </react_native_1.Text>)}
-                    </react_native_1.Pressable>
+                            ●
+                          </react_native_1.Text>)}
+                      </react_native_1.Pressable>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
-              </react_native_1.View>) : null}
-          </react_native_1.View>
+                </react_native_1.View>) : null}
+            </react_native_1.View>
 
-          {isDetailView && (<react_native_1.View style={[styles_1.default.headerCenter, { paddingHorizontal: isNarrow ? 2 : 6 }]}>
-              {activeTab === 'apis' && selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                  <react_native_1.View style={styles_1.default.headerDetailRow}>
-                    <react_native_1.View style={[
+            {isDetailView && (<react_native_1.View style={[
+                styles_1.default.headerCenter,
+                { paddingHorizontal: isNarrow ? 2 : 6 },
+            ]}>
+                {activeTab === 'apis' && selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                    <react_native_1.View style={styles_1.default.headerDetailRow}>
+                      <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
@@ -439,22 +570,28 @@ const InspectorHeader = react_1.default.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
-                        {selected.method}
+                        <react_native_1.Text style={[
+                    styles_1.default.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          {selected.method}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.Text style={[
+                    styles_1.default.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        {detailTitle}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      {detailTitle}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <react_native_1.View style={{
+                      <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
@@ -465,7 +602,7 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderWidth: 1,
                     borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}55`,
                 }}>
-                      <react_native_1.View style={[
+                        <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
@@ -473,16 +610,19 @@ const InspectorHeader = react_1.default.memo(() => {
                         height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                      <react_native_1.Text style={[
+                        <react_native_1.Text style={[
                     styles_1.default.headerSubTitle,
-                    { fontFamily: AppFonts_1.AppFonts.interBold, fontSize: isNarrow ? 10 : 11 },
+                    {
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: isNarrow ? 10 : 11,
+                    },
                 ]}>
-                        {selected.status === 0
+                          {selected.status === 0
                     ? 'Failed'
                     : selected.status ?? 'Pending'}
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                    <react_native_1.View style={{
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
@@ -491,14 +631,17 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors_1.AppColors.white}29`,
                 }}>
-                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
-                      <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                        {selected.duration != null
+                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
+                        <react_native_1.Text style={[
+                    styles_1.default.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                          {selected.duration != null
                     ? `${selected.duration}ms`
                     : '—'}
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                    {selected.response != null && (<react_native_1.View style={{
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      {selected.response != null && (<react_native_1.View style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 4,
@@ -507,15 +650,18 @@ const InspectorHeader = react_1.default.memo(() => {
                         borderRadius: 20,
                         backgroundColor: `${AppColors_1.AppColors.white}29`,
                     }}>
-                        <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                          {(0, helpers_1.getSize)(selected.response)}
-                        </react_native_1.Text>
-                      </react_native_1.View>)}
-                  </react_native_1.ScrollView>
-                </react_native_1.View>) : activeTab === 'analytics' && selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                  <react_native_1.View style={styles_1.default.headerDetailRow}>
-                    <react_native_1.View style={[
+                          <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
+                          <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            {(0, helpers_1.getSize)(selected.response)}
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>
+                  </react_native_1.View>) : activeTab === 'analytics' && selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                    <react_native_1.View style={styles_1.default.headerDetailRow}>
+                      <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -525,22 +671,28 @@ const InspectorHeader = react_1.default.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
-                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                        <react_native_1.Text style={[
+                    styles_1.default.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.Text style={[
+                    styles_1.default.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        {selectedEvent.name}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      {selectedEvent.name}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <react_native_1.View style={[
+                      <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -550,18 +702,21 @@ const InspectorHeader = react_1.default.memo(() => {
                         height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                      {Object.keys(selectedEvent.params).length} param
-                      {Object.keys(selectedEvent.params).length !== 1
+                      <react_native_1.Text style={[
+                    styles_1.default.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                        {Object.keys(selectedEvent.params).length} param
+                        {Object.keys(selectedEvent.params).length !== 1
                     ? 's'
                     : ''}
-                      {' · '}
-                      {selectedEvent.source}
-                    </react_native_1.Text>
-                  </react_native_1.ScrollView>
-                </react_native_1.View>) : activeTab === 'logs' && selectedLog != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                  <react_native_1.View style={styles_1.default.headerDetailRow}>
-                    <react_native_1.View style={[
+                        {' · '}
+                        {selectedEvent.source}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>) : activeTab === 'logs' && selectedLog != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                    <react_native_1.View style={styles_1.default.headerDetailRow}>
+                      <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: selectedLog.type === 'error'
@@ -573,23 +728,29 @@ const InspectorHeader = react_1.default.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
-                        {selectedLog.type.toUpperCase()}
+                        <react_native_1.Text style={[
+                    styles_1.default.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          {selectedLog.type.toUpperCase()}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.Text style={[
+                    styles_1.default.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        console.
+                        {selectedLog.sourceMethod || selectedLog.type || 'log'}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      console.
-                      {selectedLog.sourceMethod || selectedLog.type || 'log'}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <react_native_1.View style={{
+                      <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
@@ -598,13 +759,16 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors_1.AppColors.white}29`,
                 }}>
-                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
-                      <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                        {(0, helpers_1.formatTime)(selectedLog.timestamp)}
-                      </react_native_1.Text>
+                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
+                        <react_native_1.Text style={[
+                    styles_1.default.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                          {(0, helpers_1.formatTime)(selectedLog.timestamp)}
+                        </react_native_1.Text>
+                      </react_native_1.View>
                     </react_native_1.View>
-                  </react_native_1.ScrollView>
-                </react_native_1.View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
+                  </react_native_1.View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
                 const sliceData = reduxState?.[selectedReduxSlice];
                 const keyCount = sliceData && typeof sliceData === 'object'
                     ? Object.keys(sliceData).length
@@ -614,8 +778,8 @@ const InspectorHeader = react_1.default.memo(() => {
                 const sliceSize = (0, helpers_1.getSize)(sliceData);
                 const lastAction = reduxLastActionMap[selectedReduxSlice];
                 return (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                      <react_native_1.View style={styles_1.default.headerDetailRow}>
-                        <react_native_1.View style={[
+                        <react_native_1.View style={styles_1.default.headerDetailRow}>
+                          <react_native_1.View style={[
                         styles_1.default.headerMethodBadge,
                         {
                             backgroundColor: `${AppColors_1.AppColors.purple}4D`,
@@ -623,20 +787,28 @@ const InspectorHeader = react_1.default.memo(() => {
                             paddingVertical: isNarrow ? 2 : 3,
                         },
                     ]}>
-                          <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>SLICE</react_native_1.Text>
+                            <react_native_1.Text style={[
+                        styles_1.default.headerMethodText,
+                        { fontSize: isNarrow ? 9 : 10 },
+                    ]}>
+                              SLICE
+                            </react_native_1.Text>
+                          </react_native_1.View>
+                          <react_native_1.Text style={[
+                        styles_1.default.headerDetailTitle,
+                        { fontSize: isNarrow ? 13.5 : 15 },
+                    ]} numberOfLines={1} ellipsizeMode="middle">
+                            {selectedReduxSlice}
+                          </react_native_1.Text>
                         </react_native_1.View>
-                        <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                          {selectedReduxSlice}
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                      <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                        <react_native_1.View style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: isNarrow ? 4 : 6,
                         marginTop: 3,
                         paddingVertical: 1,
                     }}>
-                        <react_native_1.View style={[
+                          <react_native_1.View style={[
                         styles_1.default.headerStatusDot,
                         {
                             backgroundColor: AppColors_1.AppColors.liveGreen,
@@ -644,37 +816,62 @@ const InspectorHeader = react_1.default.memo(() => {
                             height: isNarrow ? 6 : 7,
                         },
                     ]}/>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>Live</react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
-                          •
-                        </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                          {keyCount} keys
-                        </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
-                          •
-                        </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>{sliceSize}</react_native_1.Text>
-                        {lastAction?.timestamp && (<>
-                            <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
-                              •
-                            </react_native_1.Text>
-                            <react_native_1.View style={{
+                          <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            Live
+                          </react_native_1.Text>
+                          <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            •
+                          </react_native_1.Text>
+                          <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            {keyCount} keys
+                          </react_native_1.Text>
+                          <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            •
+                          </react_native_1.Text>
+                          <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            {sliceSize}
+                          </react_native_1.Text>
+                          {lastAction?.timestamp && (<>
+                              <react_native_1.Text style={[
+                            styles_1.default.headerSubTitle,
+                            { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
+                        ]}>
+                                •
+                              </react_native_1.Text>
+                              <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 3,
                         }}>
-                              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 9 : 10}/>
-                              <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                                {lastAction.timestamp}
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                          </>)}
-                      </react_native_1.ScrollView>
-                    </react_native_1.View>);
+                                <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 9 : 10}/>
+                                <react_native_1.Text style={[
+                            styles_1.default.headerSubTitle,
+                            { fontSize: isNarrow ? 10 : 11 },
+                        ]}>
+                                  {lastAction.timestamp}
+                                </react_native_1.Text>
+                              </react_native_1.View>
+                            </>)}
+                        </react_native_1.View>
+                      </react_native_1.View>);
             })()) : activeTab === 'redux' && selectedReduxAction != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                  <react_native_1.View style={styles_1.default.headerDetailRow}>
-                    <react_native_1.View style={[
+                    <react_native_1.View style={styles_1.default.headerDetailRow}>
+                      <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: `${AppColors_1.AppColors.brandPurple}4D`,
@@ -682,20 +879,28 @@ const InspectorHeader = react_1.default.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>ACTION</react_native_1.Text>
+                        <react_native_1.Text style={[
+                    styles_1.default.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          ACTION
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.Text style={[
+                    styles_1.default.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        {selectedReduxAction.type}
+                      </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      {selectedReduxAction.type}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <react_native_1.View style={[
+                      <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: AppColors_1.AppColors.purple,
@@ -703,13 +908,16 @@ const InspectorHeader = react_1.default.memo(() => {
                         height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                      {selectedReduxAction.timestamp || 'Dispatched'}
-                    </react_native_1.Text>
-                  </react_native_1.ScrollView>
-                </react_native_1.View>) : activeTab === 'crash' && selectedCrash != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                  <react_native_1.View style={styles_1.default.headerDetailRow}>
-                    <react_native_1.View style={[
+                      <react_native_1.Text style={[
+                    styles_1.default.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                        {selectedReduxAction.timestamp || 'Dispatched'}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>) : activeTab === 'crash' && selectedCrash != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                    <react_native_1.View style={styles_1.default.headerDetailRow}>
+                      <react_native_1.View style={[
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: selectedCrash.isFatal
@@ -719,24 +927,30 @@ const InspectorHeader = react_1.default.memo(() => {
                         paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
-                        {selectedCrash.isFatal
+                        <react_native_1.Text style={[
+                    styles_1.default.headerMethodText,
+                    { fontSize: isNarrow ? 9 : 10 },
+                ]}>
+                          {selectedCrash.isFatal
                     ? 'FATAL'
                     : selectedCrash.type.toUpperCase()}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.Text style={[
+                    styles_1.default.headerDetailTitle,
+                    { fontSize: isNarrow ? 13.5 : 15 },
+                ]} numberOfLines={1} ellipsizeMode="middle">
+                        {selectedCrash.name || selectedCrash.message}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
-                      {selectedCrash.name || selectedCrash.message}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: isNarrow ? 4 : 6,
                     marginTop: 3,
                     paddingVertical: 1,
                 }}>
-                    <react_native_1.View style={[
+                      <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: selectedCrash.isFatal
@@ -746,23 +960,32 @@ const InspectorHeader = react_1.default.memo(() => {
                         height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                      {selectedCrash.timeStr ||
+                      <react_native_1.Text style={[
+                    styles_1.default.headerSubTitle,
+                    { fontSize: isNarrow ? 10 : 11 },
+                ]}>
+                        {selectedCrash.timeStr ||
                     new Date(selectedCrash.timestamp).toLocaleTimeString()}
-                    </react_native_1.Text>
-                    {selectedCrash.deviceInfo?.platform && (<>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
-                          •
-                        </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
-                          {selectedCrash.deviceInfo.platform.toUpperCase()}
-                        </react_native_1.Text>
-                      </>)}
-                  </react_native_1.ScrollView>
-                </react_native_1.View>) : null}
-            </react_native_1.View>)}
+                      </react_native_1.Text>
+                      {selectedCrash.deviceInfo?.platform && (<>
+                          <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            •
+                          </react_native_1.Text>
+                          <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { fontSize: isNarrow ? 10 : 11 },
+                    ]}>
+                            {selectedCrash.deviceInfo.platform.toUpperCase()}
+                          </react_native_1.Text>
+                        </>)}
+                    </react_native_1.View>
+                  </react_native_1.View>) : null}
+              </react_native_1.View>)}
 
-          <react_native_1.View style={[
+            <react_native_1.View style={[
             styles_1.default.headerRight,
             {
                 flexDirection: 'row',
@@ -772,7 +995,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 gap: isNarrow ? 5 : 7,
             },
         ]}>
-            {isSettingsView && (<TouchableScale_1.default onPress={() => {
+              {isSettingsView && (<TouchableScale_1.default onPress={() => {
                 react_native_1.Alert.alert('Reset All Settings', 'This restores all module visibility and UI preferences to defaults. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
                     {
@@ -789,19 +1012,10 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderRadius: isNarrow ? 6 : 7,
                 },
             ]}>
-                <NetworkIcons_1.ResetIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
-              </TouchableScale_1.default>)}
+                  <NetworkIcons_1.ResetIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
+                </TouchableScale_1.default>)}
 
-            {!isAnySelected && (<TouchableScale_1.default onPress={() => {
-                react_native_1.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_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Settings" onPress={() => setSettingsPage('main')} hitSlop={15} style={[
                 styles_1.default.closeButtonSquare,
                 {
                     width: buttonSize,
@@ -809,7 +1023,112 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderRadius: isNarrow ? 6 : 7,
                 },
             ]}>
-                <react_native_1.Animated.View style={{
+                  <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
+                </TouchableScale_1.default>)}
+
+              <react_native_1.TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
+            styles_1.default.closeButtonSquare,
+            {
+                width: buttonSize,
+                height: buttonSize,
+                borderRadius: isNarrow ? 6 : 7,
+            },
+        ]}>
+                <NetworkIcons_1.CloseWhite size={isNarrow ? 12 : 14}/>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          {!isAnySelected && (<react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingHorizontal: isNarrow ? 8 : 12,
+                paddingBottom: isNarrow ? 6 : 8,
+                paddingTop: 0,
+                gap: 6,
+            }}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                
+                <TouchableScale_1.default onPress={handleTakeScreenshot} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4.5,
+                backgroundColor: `${AppColors_1.AppColors.white}24`,
+                paddingHorizontal: isNarrow ? 8 : 10,
+                paddingVertical: isNarrow ? 4 : 5,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}33`,
+            }}>
+                  <NetworkIcons_1.CameraIcon size={isNarrow ? 12 : 13} color={AppColors_1.AppColors.white}/>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interSemiBold,
+                fontSize: isNarrow ? 10 : 11,
+                color: AppColors_1.AppColors.white,
+            }}>
+                    {t('header.photo')}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                
+                <TouchableScale_1.default onPress={handleToggleVideoRecording} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4.5,
+                backgroundColor: isRecording
+                    ? `${AppColors_1.AppColors.red500}33`
+                    : `${AppColors_1.AppColors.white}24`,
+                paddingHorizontal: isNarrow ? 8 : 10,
+                paddingVertical: isNarrow ? 4 : 5,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: isRecording
+                    ? AppColors_1.AppColors.red500
+                    : `${AppColors_1.AppColors.white}33`,
+            }}>
+                  {isRecording ? (<react_native_1.Animated.View style={{
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    backgroundColor: AppColors_1.AppColors.red500,
+                }}/>) : (<NetworkIcons_1.VideoCameraIcon size={isNarrow ? 12 : 13} color={AppColors_1.AppColors.white}/>)}
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interSemiBold,
+                fontSize: isNarrow ? 10 : 11,
+                color: isRecording ? AppColors_1.AppColors.red300 : AppColors_1.AppColors.white,
+            }}>
+                    {isRecording
+                ? `${t('header.rec')} ${formatTimer(recordingSeconds)}`
+                : t('header.record')}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                
+                <TouchableScale_1.default onPress={() => {
+                react_native_1.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_1.AppColors.white}1A`,
+                paddingHorizontal: isNarrow ? 7 : 9,
+                paddingVertical: isNarrow ? 4 : 5,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}26`,
+            }}>
+                  <react_native_1.Animated.View style={{
                 transform: [
                     {
                         rotate: clearAnim.interpolate({
@@ -825,52 +1144,71 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ],
             }}>
-                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
-                </react_native_1.Animated.View>
-              </TouchableScale_1.default>)}
-
-            {!isAnySelected && (<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Settings" onPress={() => setSettingsPage('main')} hitSlop={15} style={[
-                styles_1.default.closeButtonSquare,
-                {
-                    width: buttonSize,
-                    height: buttonSize,
-                    borderRadius: isNarrow ? 6 : 7,
-                },
-            ]}>
-                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
-              </TouchableScale_1.default>)}
+                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={isNarrow ? 11 : 12}/>
+                  </react_native_1.Animated.View>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontSize: isNarrow ? 10 : 11,
+                color: `${AppColors_1.AppColors.white}E6`,
+            }}>
+                    {t('header.clear')}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
 
-            {!isAnySelected && (<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="About and System Specifications" onPress={() => {
+                
+                <TouchableScale_1.default onPress={() => {
                 setSettingsActiveSubTab('about');
                 setSettingsPage('main');
-            }} hitSlop={15} style={[
-                styles_1.default.closeButtonSquare,
-                {
-                    width: buttonSize,
-                    height: buttonSize,
-                    borderRadius: isNarrow ? 6 : 7,
-                },
-            ]}>
-                <NetworkIcons_1.InfoCircleIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
-              </TouchableScale_1.default>)}
-
-            <react_native_1.TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
-            styles_1.default.closeButtonSquare,
-            {
-                width: buttonSize,
-                height: buttonSize,
-                borderRadius: isNarrow ? 6 : 7,
-            },
-        ]}>
-              <NetworkIcons_1.CloseWhite size={isNarrow ? 12 : 14}/>
-            </react_native_1.TouchableOpacity>
-          </react_native_1.View>
+            }} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+                backgroundColor: `${AppColors_1.AppColors.white}1A`,
+                paddingHorizontal: isNarrow ? 7 : 9,
+                paddingVertical: isNarrow ? 4 : 5,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}26`,
+            }}>
+                  <NetworkIcons_1.InfoCircleIcon color={AppColors_1.AppColors.white} size={isNarrow ? 11 : 12}/>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontSize: isNarrow ? 10 : 11,
+                color: `${AppColors_1.AppColors.white}E6`,
+            }}>
+                    {t('header.about')}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>)}
         </react_native_1.View>
       </react_native_1.View>
-    </react_native_linear_gradient_1.default>
 
-    
-    <UpdateAvailableModal_1.UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+      
+      <UpdateAvailableModal_1.UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+
+      
+      <MediaPreviewModal_1.MediaPreviewModal item={previewMediaItem} visible={!!previewMediaItem} onClose={() => setPreviewMediaItem(null)} onDelete={async (item) => {
+            await capture_1.ScreenCapture.deleteMedia(item.uri);
+            setPreviewMediaItem(null);
+        }} onConvertToGif={async (item) => {
+            const gif = await capture_1.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,
+                });
+            }
+        }}/>
     </>);
 });
 exports.default = InspectorHeader;