react-native-inapp-inspector 2.3.15 → 2.3.17

package/src/components/Inspector/InspectorHeader.tsx

@@ -28,8 +28,14 @@ import {
   getSize,
   getAppVersionAndBuild,
 } from '../../helpers';
-import {getNativeDeviceMetrics} from '../../native/NativeInspector';
+import {
+  getNativeDeviceMetrics,
+  triggerNativeHaptic,
+} from '../../native/NativeInspector';
+import {ScreenCapture, CapturedMediaItem} from '../../capture';
+import {showToast} from '../../helpers/toast';
 import {UpdateAvailableModal} from './UpdateAvailableModal';
+import {MediaPreviewModal} from './MediaPreviewModal';
 import {
   WhiteBackNavigation,
   TrashIcon,
@@ -42,9 +48,14 @@ import {
   NpmIcon,
   ResetIcon,
   BoltIcon,
+  InfoCircleIcon,
+  CameraIcon,
+  VideoCameraIcon,
 } from '../NetworkIcons';
+import {useTranslation} from '../../i18n';
 
 const InspectorHeader = React.memo(() => {
+  const {t} = useTranslation();
   const {
     modalHeightPercent,
     appIcon,
@@ -70,6 +81,9 @@ const InspectorHeader = React.memo(() => {
     runClearAllWithAnimation,
     settingsPage,
     setSettingsPage,
+    setSettingsActiveSubTab,
+    isFeedbackOpen,
+    setIsFeedbackOpen,
     resetToDefaults,
     closeModal,
     detailTitle,
@@ -90,18 +104,130 @@ const InspectorHeader = React.memo(() => {
     return getAppVersionAndBuild().formatted;
   });
 
+  const [isRecording, setIsRecording] = React.useState<boolean>(false);
+  const [recordingSeconds, setRecordingSeconds] = React.useState<number>(0);
+  const recordingTimerRef = React.useRef<any>(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<CapturedMediaItem | null>(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: CapturedMediaItem = {
+          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: CapturedMediaItem = {
+            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: number) => {
+    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();
@@ -147,7 +273,7 @@ const InspectorHeader = React.memo(() => {
     (activeTab === 'crash' && selectedCrash != null);
 
   const isSettingsView = settingsPage !== null;
-  const isAnySelected = isDetailView || isSettingsView;
+  const isAnySelected = isDetailView || isSettingsView || isFeedbackOpen;
 
   const settingsModuleTitle = useMemo(() => {
     switch (settingsPage) {
@@ -178,92 +304,114 @@ const InspectorHeader = React.memo(() => {
 
   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,
-            {
-              paddingHorizontal: isNarrow ? 8 : 12,
-              paddingVertical: isNarrow ? 6 : 8,
-              minHeight: isNarrow ? 48 : 52,
-            },
-          ]}>
+      <View
+        style={[
+          styles.headerGradient,
+          {
+            minHeight: (isNarrow ? 48 : 52) + headerTopPadding,
+          },
+        ]}>
+        {/* LinearGradient as absolute background layer to avoid Fabric view recycling crash.
+            BVLinearGradient as a direct parent of conditionally-mounted children triggers
+            RCTComponentViewRegistry 'Attempt to recycle a mounted view' assertion. */}
+        <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,
               {
+                paddingHorizontal: isNarrow ? 8 : 12,
+                paddingVertical: isNarrow ? 6 : 8,
+                minHeight: isNarrow ? 48 : 52,
+              },
+            ]}>
+            <View
+              style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: isNarrow ? 6 : 8,
-                flex: !isDetailView ? 1 : 0,
-                minWidth: 0,
-              },
-            ]}>
-            <TouchableScale
-              onPress={() => {
-                if (isSettingsView) {
-                  if (settingsPage === 'main') {
-                    setSettingsPage(null);
-                  } else {
-                    setSettingsPage('main');
-                  }
-                  return;
-                }
-                requestAnimationFrame(() => {
-                  setSelected(null);
-                  setSelectedEvent(null);
-                  setSelectedLog(null);
-                  setSelectedReduxSlice(null);
-                  setSelectedReduxAction(null);
-                  setSelectedCrash(null);
-                });
-              }}
-              hitSlop={15}
-              style={[
-                {
-                  width: isNarrow ? 32 : 36,
-                  height: isNarrow ? 32 : 36,
-                  borderRadius: isNarrow ? 16 : 18,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  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>
-
-            {isSettingsView ? (
-              <View style={{gap: 2, flex: 1, minWidth: 0}}>
-                <View
-                  style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
-                  <Text
+                flexShrink: 0,
+                flex: isAnySelected ? undefined : 1,
+                minWidth: isAnySelected ? (isNarrow ? 32 : 36) : 0,
+              }}>
+              {isAnySelected && (
+                <TouchableScale
+                  onPress={() => {
+                    if (isFeedbackOpen) {
+                      setIsFeedbackOpen(false);
+                      return;
+                    }
+                    if (isSettingsView) {
+                      if (settingsPage === 'main') {
+                        setSettingsPage(null);
+                      } else {
+                        setSettingsPage('main');
+                      }
+                      return;
+                    }
+                    setSelected(null);
+                    setSelectedEvent(null);
+                    setSelectedLog(null);
+                    setSelectedReduxSlice(null);
+                    setSelectedReduxAction(null);
+                    setSelectedCrash(null);
+                  }}
+                  hitSlop={15}
+                  style={{
+                    width: isNarrow ? 32 : 36,
+                    height: isNarrow ? 32 : 36,
+                    borderRadius: isNarrow ? 16 : 18,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: `${AppColors.white}2E`,
+                    borderWidth: 1,
+                    borderColor: `${AppColors.white}4D`,
+                  }}>
+                  <View
                     style={{
-                      fontFamily: AppFonts.interBold,
-                      fontSize: isNarrow ? 14 : 16,
-                      color: AppColors.white,
-                      letterSpacing: -0.2,
+                      position: 'absolute',
+                      width: isNarrow ? 40 : 44,
+                      height: isNarrow ? 40 : 44,
+                      borderRadius: 22,
+                      backgroundColor: `${AppColors.white}1A`,
                     }}
-                    numberOfLines={1}>
-                    {settingsModuleTitle}
-                  </Text>
-                  {settingsPage === 'main' && (
+                  />
+                  <WhiteBackNavigation />
+                </TouchableScale>
+              )}
+
+              {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={{
                         backgroundColor: `${AppColors.white}26`,
@@ -282,297 +430,316 @@ const InspectorHeader = React.memo(() => {
                         v{LIB_VERSION}
                       </Text>
                     </View>
-                  )}
+                  </View>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interRegular,
+                      fontSize: isNarrow ? 9.5 : 10.5,
+                      color: `${AppColors.white}CC`,
+                    }}
+                    numberOfLines={1}>
+                    Direct line to maintainers & developers
+                  </Text>
                 </View>
-                <Text
-                  style={{
-                    fontFamily: AppFonts.interRegular,
-                    fontSize: isNarrow ? 9.5 : 10.5,
-                    color: `${AppColors.white}CC`,
-                  }}
-                  numberOfLines={1}>
-                  {settingsPage === 'main'
-                    ? 'Manage modules and preferences'
-                    : 'Configure module parameters'}
-                </Text>
-              </View>
-            ) : !isAnySelected ? (
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  gap: isNarrow ? 6 : 8,
-                  flex: 1,
-                  minWidth: 0,
-                  marginRight: 4,
-                }}>
-                <AppHeaderLogo size={logoSize} customIcon={appIcon} />
+              ) : isSettingsView ? (
                 <View style={{gap: 2, flex: 1, minWidth: 0}}>
                   <View
                     style={{
                       flexDirection: 'row',
                       alignItems: 'center',
-                      gap: isNarrow ? 4 : 6,
-                      minWidth: 0,
+                      gap: 6,
                     }}>
                     <Text
-                      style={[
-                        styles.headerTitle,
-                        {
-                          fontSize: isNarrow ? 13.5 : isCompact ? 14.5 : 15.5,
-                          flexShrink: 1,
-                          paddingBottom: 0,
-                        },
-                      ]}
-                      numberOfLines={1}
-                      ellipsizeMode="tail">
-                      {getAppName()}
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: isNarrow ? 14 : 16,
+                        color: AppColors.white,
+                        letterSpacing: -0.2,
+                      }}
+                      numberOfLines={1}>
+                      {settingsModuleTitle}
                     </Text>
-                    <View
-                      style={[
-                        styles.envBadge,
-                        {
-                          backgroundColor: envConfig.bg,
-                          borderColor: envConfig.border,
-                          flexShrink: 0,
-                          paddingHorizontal: isNarrow ? 4.5 : 6,
-                          paddingVertical: 1.5,
-                          marginBottom: 0,
-                        },
-                      ]}>
-                      <Text
-                        style={[
-                          styles.envBadgeText,
-                          {
-                            color: envConfig.text,
-                            fontSize: isNarrow ? 8.5 : 9.5,
-                          },
-                        ]}>
-                        {envConfig.label}
-                      </Text>
-                    </View>
-                    {updateAvailable && (
-                      <Pressable
-                        hitSlop={10}
-                        onPress={() => setShowUpdateModal(true)}
+                    {settingsPage === 'main' && (
+                      <View
                         style={{
-                          flexDirection: 'row',
-                          alignItems: 'center',
-                          backgroundColor: '#F59E0B',
-                          borderRadius: 5,
-                          paddingHorizontal: isNarrow ? 4 : 5.5,
+                          backgroundColor: `${AppColors.white}26`,
+                          paddingHorizontal: isNarrow ? 4 : 6,
                           paddingVertical: 1.5,
-                          gap: 3,
-                          shadowColor: '#F59E0B',
-                          shadowOffset: {width: 0, height: 1.5},
-                          shadowOpacity: 0.35,
-                          shadowRadius: 3,
-                          elevation: 3,
-                          flexShrink: 0,
+                          borderRadius: 10,
+                          borderWidth: 1,
+                          borderColor: `${AppColors.white}20`,
                         }}>
-                        <Animated.View
+                        <Text
                           style={{
-                            width: 5,
-                            height: 5,
-                            borderRadius: 2.5,
-                            backgroundColor: '#FFFFFF',
-                            opacity: activePulseAnim,
-                            transform: [{scale: unreadPulseAnim}],
-                          }}
-                        />
-                        {!isNarrow && (
-                          <Text
-                            style={{
-                              fontFamily: AppFonts.interBold,
-                              fontSize: 8.5,
-                              color: '#FFFFFF',
-                              letterSpacing: 0.3,
-                            }}>
-                            UPDATE
-                          </Text>
-                        )}
-                        <BoltIcon size={isNarrow ? 8 : 9} color="#FFFFFF" />
-                      </Pressable>
+                            fontFamily: AppFonts.interBold,
+                            fontSize: isNarrow ? 8 : 9,
+                            color: AppColors.white,
+                          }}>
+                          v{LIB_VERSION}
+                        </Text>
+                      </View>
                     )}
                   </View>
-
-                  {/* OS & NPM Version Representation */}
-                  <View
+                  <Text
                     style={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      gap: isNarrow ? 4 : 5,
-                      minWidth: 0,
-                    }}>
+                      fontFamily: AppFonts.interRegular,
+                      fontSize: isNarrow ? 9.5 : 10.5,
+                      color: `${AppColors.white}CC`,
+                    }}
+                    numberOfLines={1}>
+                    {settingsPage === 'main'
+                      ? 'Manage modules and preferences'
+                      : 'Configure module parameters'}
+                  </Text>
+                </View>
+              ) : !isAnySelected ? (
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 6 : 8,
+                    flex: 1,
+                    minWidth: 0,
+                    marginRight: 4,
+                  }}>
+                  <AppHeaderLogo size={logoSize} customIcon={appIcon} />
+                  <View style={{gap: 2, flex: 1, minWidth: 0}}>
                     <View
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        backgroundColor: `${AppColors.white}1F`,
-                        borderRadius: 5,
-                        paddingHorizontal: isNarrow ? 4.5 : 6,
-                        paddingVertical: 2,
-                        gap: 3.5,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.white}2E`,
-                        flexShrink: 1,
+                        gap: isNarrow ? 4 : 6,
                         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={{
-                          fontFamily: AppFonts.interMedium,
-                          fontSize: isNarrow ? 8.5 : 9.5,
-                          color: `${AppColors.white}EB`,
-                          letterSpacing: 0.1,
-                        }}
+                        style={[
+                          styles.headerTitle,
+                          {
+                            fontSize: isNarrow ? 13.5 : isCompact ? 14.5 : 15.5,
+                            flexShrink: 1,
+                            paddingBottom: 0,
+                          },
+                        ]}
                         numberOfLines={1}
                         ellipsizeMode="tail">
-                        {appVersionString}
+                        {getAppName()}
                       </Text>
+                      <View
+                        style={[
+                          styles.envBadge,
+                          {
+                            backgroundColor: envConfig.bg,
+                            borderColor: envConfig.border,
+                            flexShrink: 0,
+                            paddingHorizontal: isNarrow ? 4.5 : 6,
+                            paddingVertical: 1.5,
+                            marginBottom: 0,
+                          },
+                        ]}>
+                        <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={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            backgroundColor: AppColors.warningAmber,
+                            borderRadius: 5,
+                            paddingHorizontal: isNarrow ? 4 : 5.5,
+                            paddingVertical: 1.5,
+                            gap: 3,
+                            shadowColor: AppColors.warningAmber,
+                            shadowOffset: {width: 0, height: 1.5},
+                            shadowOpacity: 0.35,
+                            shadowRadius: 3,
+                            elevation: 3,
+                            flexShrink: 0,
+                          }}>
+                          <Animated.View
+                            style={{
+                              width: 5,
+                              height: 5,
+                              borderRadius: 2.5,
+                              backgroundColor: AppColors.white,
+                              opacity: activePulseAnim,
+                              transform: [{scale: unreadPulseAnim}],
+                            }}
+                          />
+                          {!isNarrow && (
+                            <Text
+                              style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 8.5,
+                                color: AppColors.white,
+                                letterSpacing: 0.3,
+                              }}>
+                              UPDATE
+                            </Text>
+                          )}
+                          <BoltIcon
+                            size={isNarrow ? 8 : 9}
+                            color={AppColors.white}
+                          />
+                        </Pressable>
+                      )}
                     </View>
 
-                    <Pressable
-                      onPress={() => {
-                        if (updateAvailable) {
-                          setShowUpdateModal(true);
-                        } else {
-                          Linking.openURL(
-                            'https://www.npmjs.com/package/react-native-inapp-inspector',
-                          ).catch(() => {});
-                        }
-                      }}
+                    {/* OS & NPM Version Representation */}
+                    <View
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        backgroundColor: `${AppColors.white}1F`,
-                        borderRadius: 5,
-                        paddingHorizontal: isNarrow ? 4.5 : 6,
-                        paddingVertical: 2,
-                        gap: 3.5,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.white}2E`,
-                        flexShrink: 0,
+                        gap: isNarrow ? 4 : 5,
+                        minWidth: 0,
                       }}>
-                      <NpmIcon size={isNarrow ? 9 : 10} color="#FF6B6B" />
-                      <Text
+                      <View
                         style={{
-                          fontFamily: AppFonts.interMedium,
-                          fontSize: isNarrow ? 8.5 : 9.5,
-                          color: `${AppColors.white}EB`,
-                          letterSpacing: 0.1,
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          backgroundColor: `${AppColors.white}1F`,
+                          borderRadius: 5,
+                          paddingHorizontal: isNarrow ? 4.5 : 6,
+                          paddingVertical: 2,
+                          gap: 3.5,
+                          borderWidth: 1,
+                          borderColor: `${AppColors.white}2E`,
+                          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={{
+                            fontFamily: AppFonts.interMedium,
+                            fontSize: isNarrow ? 8.5 : 9.5,
+                            color: `${AppColors.white}EB`,
+                            letterSpacing: 0.1,
+                          }}
+                          numberOfLines={1}
+                          ellipsizeMode="tail">
+                          {appVersionString}
+                        </Text>
+                      </View>
+
+                      <Pressable
+                        onPress={() => {
+                          if (updateAvailable) {
+                            setShowUpdateModal(true);
+                          } else {
+                            Linking.openURL(
+                              'https://www.npmjs.com/package/react-native-inapp-inspector',
+                            ).catch(() => {});
+                          }
                         }}
-                        numberOfLines={1}>
-                        v{LIB_VERSION}
-                      </Text>
-                      {updateAvailable && (
+                        style={{
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          backgroundColor: `${AppColors.white}1F`,
+                          borderRadius: 5,
+                          paddingHorizontal: isNarrow ? 4.5 : 6,
+                          paddingVertical: 2,
+                          gap: 3.5,
+                          borderWidth: 1,
+                          borderColor: `${AppColors.white}2E`,
+                          flexShrink: 0,
+                        }}>
+                        <NpmIcon
+                          size={isNarrow ? 9 : 10}
+                          color={AppColors.npmRedLight}
+                        />
                         <Text
                           style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8.5,
-                            color: '#F59E0B',
-                          }}>
-                          ●
+                            fontFamily: AppFonts.interMedium,
+                            fontSize: isNarrow ? 8.5 : 9.5,
+                            color: `${AppColors.white}EB`,
+                            letterSpacing: 0.1,
+                          }}
+                          numberOfLines={1}>
+                          v{LIB_VERSION}
                         </Text>
-                      )}
-                    </Pressable>
+                        {updateAvailable && (
+                          <Text
+                            style={{
+                              fontFamily: AppFonts.interBold,
+                              fontSize: 8.5,
+                              color: AppColors.warningAmber,
+                            }}>
+                            ●
+                          </Text>
+                        )}
+                      </Pressable>
+                    </View>
                   </View>
                 </View>
-              </View>
-            ) : null}
-          </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={[
-                        styles.headerMethodBadge,
-                        {
-                          backgroundColor:
-                            METHOD_COLORS[selected.method as Method] ??
-                            AppColors.grayText,
-                          paddingHorizontal: isNarrow ? 5 : 6,
-                          paddingVertical: isNarrow ? 2 : 3,
-                        },
-                      ]}>
-                      <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>
-                  <ScrollView
-                    horizontal
-                    showsHorizontalScrollIndicator={false}
-                    contentContainerStyle={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      gap: isNarrow ? 4 : 6,
-                      marginTop: 3,
-                      paddingVertical: 1,
-                    }}>
-                    <View
-                      style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4,
-                        paddingHorizontal: isNarrow ? 6 : 8,
-                        paddingVertical: 2.5,
-                        borderRadius: 20,
-                        backgroundColor: `${getStatusColor(selected.status)}26`,
-                        borderWidth: 1,
-                        borderColor: `${getStatusColor(selected.status)}55`,
-                      }}>
+            {isDetailView && (
+              <View
+                style={[
+                  styles.headerCenter,
+                  {paddingHorizontal: isNarrow ? 2 : 6},
+                ]}>
+                {activeTab === 'apis' && selected != null ? (
+                  <View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
                       <View
                         style={[
-                          styles.headerStatusDot,
+                          styles.headerMethodBadge,
                           {
-                            backgroundColor: getStatusColor(selected.status),
-                            width: isNarrow ? 6 : 7,
-                            height: isNarrow ? 6 : 7,
+                            backgroundColor:
+                              METHOD_COLORS[selected.method as Method] ??
+                              AppColors.grayText,
+                            paddingHorizontal: isNarrow ? 5 : 6,
+                            paddingVertical: isNarrow ? 2 : 3,
                           },
-                        ]}
-                      />
+                        ]}>
+                        <Text
+                          style={[
+                            styles.headerMethodText,
+                            {fontSize: isNarrow ? 9 : 10},
+                          ]}>
+                          {selected.method}
+                        </Text>
+                      </View>
                       <Text
                         style={[
-                          styles.headerSubTitle,
-                          {fontFamily: AppFonts.interBold, fontSize: isNarrow ? 10 : 11},
-                        ]}>
-                        {selected.status === 0
-                          ? 'Failed'
-                          : selected.status ?? 'Pending'}
+                          styles.headerDetailTitle,
+                          {fontSize: isNarrow ? 13.5 : 15},
+                        ]}
+                        numberOfLines={1}
+                        ellipsizeMode="middle">
+                        {detailTitle}
                       </Text>
                     </View>
                     <View
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        gap: 4,
-                        paddingHorizontal: isNarrow ? 6 : 8,
-                        paddingVertical: 2.5,
-                        borderRadius: 20,
-                        backgroundColor: `${AppColors.white}29`,
+                        gap: isNarrow ? 4 : 6,
+                        marginTop: 3,
+                        paddingVertical: 1,
                       }}>
-                      <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={{
                           flexDirection: 'row',
@@ -581,390 +748,563 @@ const InspectorHeader = React.memo(() => {
                           paddingHorizontal: isNarrow ? 6 : 8,
                           paddingVertical: 2.5,
                           borderRadius: 20,
-                          backgroundColor: `${AppColors.white}29`,
+                          backgroundColor: `${getStatusColor(
+                            selected.status,
+                          )}26`,
+                          borderWidth: 1,
+                          borderColor: `${getStatusColor(selected.status)}55`,
                         }}>
-                        <SizeIcon color={AppColors.white} size={isNarrow ? 10 : 11} />
-                        <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
-                          {getSize(selected.response)}
+                        <View
+                          style={[
+                            styles.headerStatusDot,
+                            {
+                              backgroundColor: getStatusColor(selected.status),
+                              width: isNarrow ? 6 : 7,
+                              height: isNarrow ? 6 : 7,
+                            },
+                          ]}
+                        />
+                        <Text
+                          style={[
+                            styles.headerSubTitle,
+                            {
+                              fontFamily: AppFonts.interBold,
+                              fontSize: isNarrow ? 10 : 11,
+                            },
+                          ]}>
+                          {selected.status === 0
+                            ? 'Failed'
+                            : selected.status ?? 'Pending'}
                         </Text>
                       </View>
-                    )}
-                  </ScrollView>
-                </View>
-              ) : activeTab === 'analytics' && selectedEvent != null ? (
-                <View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View
-                      style={[
-                        styles.headerMethodBadge,
-                        {
-                          backgroundColor:
-                            selectedEvent.source === 'firebase'
-                              ? `${AppColors.firebaseOrange}4D`
-                              : `${AppColors.purple}4D`,
-                          paddingHorizontal: isNarrow ? 5 : 6,
-                          paddingVertical: isNarrow ? 2 : 3,
-                        },
-                      ]}>
-                      <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
+                        style={{
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          gap: 4,
+                          paddingHorizontal: isNarrow ? 6 : 8,
+                          paddingVertical: 2.5,
+                          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
+                            ? `${selected.duration}ms`
+                            : '—'}
+                        </Text>
+                      </View>
+                      {selected.response != null && (
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                            paddingHorizontal: isNarrow ? 6 : 8,
+                            paddingVertical: 2.5,
+                            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>
+                      )}
+                    </View>
                   </View>
-                  <ScrollView
-                    horizontal
-                    showsHorizontalScrollIndicator={false}
-                    contentContainerStyle={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      gap: isNarrow ? 4 : 6,
-                      marginTop: 3,
-                      paddingVertical: 1,
-                    }}>
-                    <View
-                      style={[
-                        styles.headerStatusDot,
-                        {
-                          backgroundColor:
-                            selectedEvent.source === 'firebase'
-                              ? AppColors.firebaseOrange
-                              : AppColors.purple,
-                          width: isNarrow ? 6 : 7,
-                          height: isNarrow ? 6 : 7,
-                        },
-                      ]}
-                    />
-                    <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={[
-                        styles.headerMethodBadge,
-                        {
-                          backgroundColor:
-                            selectedLog.type === 'error'
-                              ? `${AppColors.errorColor}4D`
-                              : selectedLog.type === 'warn'
-                              ? `${AppColors.lightOrange}4D`
-                              : `${AppColors.purple}4D`,
-                          paddingHorizontal: isNarrow ? 5 : 6,
-                          paddingVertical: isNarrow ? 2 : 3,
-                        },
-                      ]}>
-                      <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>
-                        {selectedLog.type.toUpperCase()}
+                ) : activeTab === 'analytics' && selectedEvent != null ? (
+                  <View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
+                      <View
+                        style={[
+                          styles.headerMethodBadge,
+                          {
+                            backgroundColor:
+                              selectedEvent.source === 'firebase'
+                                ? `${AppColors.firebaseOrange}4D`
+                                : `${AppColors.purple}4D`,
+                            paddingHorizontal: isNarrow ? 5 : 6,
+                            paddingVertical: isNarrow ? 2 : 3,
+                          },
+                        ]}>
+                        <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">
-                      console.
-                      {selectedLog.sourceMethod || selectedLog.type || 'log'}
-                    </Text>
-                  </View>
-                  <ScrollView
-                    horizontal
-                    showsHorizontalScrollIndicator={false}
-                    contentContainerStyle={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      gap: isNarrow ? 4 : 6,
-                      marginTop: 3,
-                      paddingVertical: 1,
-                    }}>
                     <View
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        gap: 4,
-                        paddingHorizontal: isNarrow ? 6 : 8,
-                        paddingVertical: 2.5,
-                        borderRadius: 20,
-                        backgroundColor: `${AppColors.white}29`,
+                        gap: isNarrow ? 4 : 6,
+                        marginTop: 3,
+                        paddingVertical: 1,
                       }}>
-                      <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11} />
-                      <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
-                        {formatTime(selectedLog.timestamp)}
+                      <View
+                        style={[
+                          styles.headerStatusDot,
+                          {
+                            backgroundColor:
+                              selectedEvent.source === 'firebase'
+                                ? AppColors.firebaseOrange
+                                : AppColors.purple,
+                            width: isNarrow ? 6 : 7,
+                            height: isNarrow ? 6 : 7,
+                          },
+                        ]}
+                      />
+                      <Text
+                        style={[
+                          styles.headerSubTitle,
+                          {fontSize: isNarrow ? 10 : 11},
+                        ]}>
+                        {Object.keys(selectedEvent.params).length} param
+                        {Object.keys(selectedEvent.params).length !== 1
+                          ? 's'
+                          : ''}
+                        {' · '}
+                        {selectedEvent.source}
                       </Text>
                     </View>
-                  </ScrollView>
-                </View>
-              ) : activeTab === 'redux' && selectedReduxSlice != null ? (
-                (() => {
-                  const sliceData = reduxState?.[selectedReduxSlice];
-                  const keyCount =
-                    sliceData && typeof sliceData === 'object'
-                      ? Object.keys(sliceData).length
-                      : typeof sliceData !== 'undefined'
-                      ? 1
-                      : 0;
-                  const sliceSize = getSize(sliceData);
-                  const lastAction = reduxLastActionMap[selectedReduxSlice];
-
-                  return (
-                    <View style={styles.headerDetailCenter}>
-                      <View style={styles.headerDetailRow}>
-                        <View
+                  </View>
+                ) : activeTab === 'logs' && selectedLog != null ? (
+                  <View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
+                      <View
+                        style={[
+                          styles.headerMethodBadge,
+                          {
+                            backgroundColor:
+                              selectedLog.type === 'error'
+                                ? `${AppColors.errorColor}4D`
+                                : selectedLog.type === 'warn'
+                                ? `${AppColors.lightOrange}4D`
+                                : `${AppColors.purple}4D`,
+                            paddingHorizontal: isNarrow ? 5 : 6,
+                            paddingVertical: isNarrow ? 2 : 3,
+                          },
+                        ]}>
+                        <Text
                           style={[
-                            styles.headerMethodBadge,
-                            {
-                              backgroundColor: `${AppColors.purple}4D`,
-                              paddingHorizontal: isNarrow ? 5 : 6,
-                              paddingVertical: isNarrow ? 2 : 3,
-                            },
+                            styles.headerMethodText,
+                            {fontSize: isNarrow ? 9 : 10},
                           ]}>
-                          <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}
+                          {selectedLog.type.toUpperCase()}
                         </Text>
                       </View>
-                      <ScrollView
-                        horizontal
-                        showsHorizontalScrollIndicator={false}
-                        contentContainerStyle={{
+                      <Text
+                        style={[
+                          styles.headerDetailTitle,
+                          {fontSize: isNarrow ? 13.5 : 15},
+                        ]}
+                        numberOfLines={1}
+                        ellipsizeMode="middle">
+                        console.
+                        {selectedLog.sourceMethod || selectedLog.type || 'log'}
+                      </Text>
+                    </View>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: isNarrow ? 4 : 6,
+                        marginTop: 3,
+                        paddingVertical: 1,
+                      }}>
+                      <View
+                        style={{
                           flexDirection: 'row',
                           alignItems: 'center',
-                          gap: isNarrow ? 4 : 6,
-                          marginTop: 3,
-                          paddingVertical: 1,
+                          gap: 4,
+                          paddingHorizontal: isNarrow ? 6 : 8,
+                          paddingVertical: 2.5,
+                          borderRadius: 20,
+                          backgroundColor: `${AppColors.white}29`,
                         }}>
-                        <View
-                          style={[
-                            styles.headerStatusDot,
-                            {
-                              backgroundColor: AppColors.liveGreen,
-                              width: isNarrow ? 6 : 7,
-                              height: isNarrow ? 6 : 7,
-                            },
-                          ]}
+                        <ClockIcon
+                          color={AppColors.white}
+                          size={isNarrow ? 10 : 11}
                         />
-                        <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
+                          style={[
+                            styles.headerSubTitle,
+                            {fontSize: isNarrow ? 10 : 11},
+                          ]}>
+                          {formatTime(selectedLog.timestamp)}
                         </Text>
-                        <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>{sliceSize}</Text>
-                        {lastAction?.timestamp && (
-                          <>
+                      </View>
+                    </View>
+                  </View>
+                ) : activeTab === 'redux' && selectedReduxSlice != null ? (
+                  (() => {
+                    const sliceData = reduxState?.[selectedReduxSlice];
+                    const keyCount =
+                      sliceData && typeof sliceData === 'object'
+                        ? Object.keys(sliceData).length
+                        : typeof sliceData !== 'undefined'
+                        ? 1
+                        : 0;
+                    const sliceSize = getSize(sliceData);
+                    const lastAction = reduxLastActionMap[selectedReduxSlice];
+
+                    return (
+                      <View style={styles.headerDetailCenter}>
+                        <View style={styles.headerDetailRow}>
+                          <View
+                            style={[
+                              styles.headerMethodBadge,
+                              {
+                                backgroundColor: `${AppColors.purple}4D`,
+                                paddingHorizontal: isNarrow ? 5 : 6,
+                                paddingVertical: isNarrow ? 2 : 3,
+                              },
+                            ]}>
                             <Text
-                              style={[styles.headerSubTitle, {opacity: 0.6, fontSize: isNarrow ? 10 : 11}]}>
-                              •
+                              style={[
+                                styles.headerMethodText,
+                                {fontSize: isNarrow ? 9 : 10},
+                              ]}>
+                              SLICE
                             </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}
+                          </View>
+                          <Text
+                            style={[
+                              styles.headerDetailTitle,
+                              {fontSize: isNarrow ? 13.5 : 15},
+                            ]}
+                            numberOfLines={1}
+                            ellipsizeMode="middle">
+                            {selectedReduxSlice}
+                          </Text>
+                        </View>
+                        <View
+                          style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: isNarrow ? 4 : 6,
+                            marginTop: 3,
+                            paddingVertical: 1,
+                          }}>
+                          <View
+                            style={[
+                              styles.headerStatusDot,
+                              {
+                                backgroundColor: AppColors.liveGreen,
+                                width: isNarrow ? 6 : 7,
+                                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>
-                          </>
-                        )}
-                      </ScrollView>
+                              <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>
+                            </>
+                          )}
+                        </View>
+                      </View>
+                    );
+                  })()
+                ) : activeTab === 'redux' && selectedReduxAction != null ? (
+                  <View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
+                      <View
+                        style={[
+                          styles.headerMethodBadge,
+                          {
+                            backgroundColor: `${AppColors.brandPurple}4D`,
+                            paddingHorizontal: isNarrow ? 5 : 6,
+                            paddingVertical: isNarrow ? 2 : 3,
+                          },
+                        ]}>
+                        <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>
-                  );
-                })()
-              ) : activeTab === 'redux' && selectedReduxAction != null ? (
-                <View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
                     <View
-                      style={[
-                        styles.headerMethodBadge,
-                        {
-                          backgroundColor: `${AppColors.brandPurple}4D`,
-                          paddingHorizontal: isNarrow ? 5 : 6,
-                          paddingVertical: isNarrow ? 2 : 3,
-                        },
-                      ]}>
-                      <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>ACTION</Text>
+                      style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: isNarrow ? 4 : 6,
+                        marginTop: 3,
+                        paddingVertical: 1,
+                      }}>
+                      <View
+                        style={[
+                          styles.headerStatusDot,
+                          {
+                            backgroundColor: AppColors.purple,
+                            width: isNarrow ? 6 : 7,
+                            height: isNarrow ? 6 : 7,
+                          },
+                        ]}
+                      />
+                      <Text
+                        style={[
+                          styles.headerSubTitle,
+                          {fontSize: isNarrow ? 10 : 11},
+                        ]}>
+                        {selectedReduxAction.timestamp || 'Dispatched'}
+                      </Text>
                     </View>
-                    <Text
-                      style={[styles.headerDetailTitle, {fontSize: isNarrow ? 13.5 : 15}]}
-                      numberOfLines={1}
-                      ellipsizeMode="middle">
-                      {selectedReduxAction.type}
-                    </Text>
                   </View>
-                  <ScrollView
-                    horizontal
-                    showsHorizontalScrollIndicator={false}
-                    contentContainerStyle={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      gap: isNarrow ? 4 : 6,
-                      marginTop: 3,
-                      paddingVertical: 1,
-                    }}>
-                    <View
-                      style={[
-                        styles.headerStatusDot,
-                        {
-                          backgroundColor: AppColors.purple,
-                          width: isNarrow ? 6 : 7,
-                          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}>
+                ) : activeTab === 'crash' && selectedCrash != null ? (
+                  <View style={styles.headerDetailCenter}>
+                    <View style={styles.headerDetailRow}>
+                      <View
+                        style={[
+                          styles.headerMethodBadge,
+                          {
+                            backgroundColor: selectedCrash.isFatal
+                              ? AppColors.red600
+                              : AppColors.amber600,
+                            paddingHorizontal: isNarrow ? 5 : 6,
+                            paddingVertical: isNarrow ? 2 : 3,
+                          },
+                        ]}>
+                        <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>
                     <View
-                      style={[
-                        styles.headerMethodBadge,
-                        {
-                          backgroundColor: selectedCrash.isFatal
-                            ? AppColors.red600
-                            : AppColors.amber600,
-                          paddingHorizontal: isNarrow ? 5 : 6,
-                          paddingVertical: isNarrow ? 2 : 3,
-                        },
-                      ]}>
-                      <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>
-                        {selectedCrash.isFatal
-                          ? 'FATAL'
-                          : selectedCrash.type.toUpperCase()}
+                      style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: isNarrow ? 4 : 6,
+                        marginTop: 3,
+                        paddingVertical: 1,
+                      }}>
+                      <View
+                        style={[
+                          styles.headerStatusDot,
+                          {
+                            backgroundColor: selectedCrash.isFatal
+                              ? AppColors.red600
+                              : AppColors.amber500,
+                            width: isNarrow ? 6 : 7,
+                            height: isNarrow ? 6 : 7,
+                          },
+                        ]}
+                      />
+                      <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>
+                        </>
+                      )}
                     </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={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      gap: isNarrow ? 4 : 6,
-                      marginTop: 3,
-                      paddingVertical: 1,
-                    }}>
-                    <View
-                      style={[
-                        styles.headerStatusDot,
+                ) : null}
+              </View>
+            )}
+
+            <View
+              style={[
+                styles.headerRight,
+                {
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'flex-end',
+                  flexShrink: 0,
+                  gap: isNarrow ? 5 : 7,
+                },
+              ]}>
+              {isSettingsView && (
+                <TouchableScale
+                  onPress={() => {
+                    Alert.alert(
+                      'Reset All Settings',
+                      'This restores all module visibility and UI preferences to defaults. Continue?',
+                      [
+                        {text: 'Cancel', style: 'cancel'},
                         {
-                          backgroundColor: selectedCrash.isFatal
-                            ? AppColors.red600
-                            : AppColors.amber500,
-                          width: isNarrow ? 6 : 7,
-                          height: isNarrow ? 6 : 7,
+                          text: 'Reset',
+                          style: 'destructive',
+                          onPress: resetToDefaults,
                         },
-                      ]}
-                    />
-                    <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>
-          )}
+                      ],
+                    );
+                  }}
+                  hitSlop={15}
+                  style={[
+                    styles.closeButtonSquare,
+                    {
+                      width: buttonSize,
+                      height: buttonSize,
+                      borderRadius: isNarrow ? 6 : 7,
+                    },
+                  ]}>
+                  <ResetIcon
+                    color={AppColors.white}
+                    size={isNarrow ? 12 : 14}
+                  />
+                </TouchableScale>
+              )}
 
-          <View
-            style={[
-              styles.headerRight,
-              {
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                flexShrink: 0,
-                gap: isNarrow ? 5 : 7,
-              },
-            ]}>
-            {isSettingsView && (
-              <TouchableScale
-                onPress={() => {
-                  Alert.alert(
-                    'Reset All Settings',
-                    'This restores all module visibility and UI preferences to defaults. Continue?',
-                    [
-                      {text: 'Cancel', style: 'cancel'},
-                      {
-                        text: 'Reset',
-                        style: 'destructive',
-                        onPress: resetToDefaults,
-                      },
-                    ],
-                  );
-                }}
-                hitSlop={15}
-                style={[
-                  styles.closeButtonSquare,
-                  {
-                    width: buttonSize,
-                    height: buttonSize,
-                    borderRadius: isNarrow ? 6 : 7,
-                  },
-                ]}>
-                <ResetIcon color={AppColors.white} size={isNarrow ? 12 : 14} />
-              </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>
+              )}
 
-            {!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}
+              <TouchableOpacity
+                onPress={closeModal}
+                hitSlop={{top: 12, bottom: 12, left: 12, right: 12}}
+                activeOpacity={0.6}
                 style={[
                   styles.closeButtonSquare,
                   {
@@ -973,69 +1313,231 @@ const InspectorHeader = React.memo(() => {
                     borderRadius: isNarrow ? 6 : 7,
                   },
                 ]}>
-                <Animated.View
+                <CloseWhite size={isNarrow ? 12 : 14} />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* Secondary Action Header (Sub-Toolbar) */}
+          {!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}}>
+                {/* Photo Capture Button */}
+                <TouchableScale
+                  onPress={handleTakeScreenshot}
                   style={{
-                    transform: [
-                      {
-                        rotate: clearAnim.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: ['0deg', '-25deg'],
-                        }),
-                      },
-                      {
-                        scale: clearAnim.interpolate({
-                          inputRange: [0, 0.5, 1],
-                          outputRange: [1, 1.25, 1],
-                        }),
-                      },
-                    ],
+                    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`,
                   }}>
-                  <TrashIcon color={AppColors.white} size={isNarrow ? 12 : 14} />
-                </Animated.View>
-              </TouchableScale>
-            )}
+                  <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>
 
-            {!isAnySelected && (
-              <TouchableScale
-                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>
-            )}
+                {/* Video / GIF Record Button */}
+                <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>
 
-            <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
+                style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
+                {/* Clear All Action */}
+                <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({
+                            inputRange: [0, 1],
+                            outputRange: ['0deg', '-25deg'],
+                          }),
+                        },
+                        {
+                          scale: clearAnim.interpolate({
+                            inputRange: [0, 0.5, 1],
+                            outputRange: [1, 1.25, 1],
+                          }),
+                        },
+                      ],
+                    }}>
+                    <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>
+
+                {/* About Action */}
+                <TouchableScale
+                  onPress={() => {
+                    setSettingsActiveSubTab('about');
+                    setSettingsPage('main');
+                  }}
+                  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>
 
-    {/* Dedicated Update Available Details Modal */}
-    <UpdateAvailableModal
-      visible={showUpdateModal}
-      latestVersion={latestNpmVersion}
-      onClose={() => setShowUpdateModal(false)}
-    />
+      {/* Dedicated Update Available Details Modal */}
+      <UpdateAvailableModal
+        visible={showUpdateModal}
+        latestVersion={latestNpmVersion}
+        onClose={() => setShowUpdateModal(false)}
+      />
+
+      {/* Instant Media Preview Modal for Screenshots and Video Recordings */}
+      <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,
+            });
+          }
+        }}
+      />
     </>
   );
 });