react-native-inapp-inspector 2.0.4 → 2.0.6

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

@@ -49,9 +49,11 @@ const constants_1 = require("../../constants");
 const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const telemetry_1 = require("../../helpers/telemetry");
+const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.memo(() => {
-    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, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
+    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, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, deviceInfo, } = (0, InspectorContext_1.useInspector)();
+    const [showUpdateModal, setShowUpdateModal] = react_1.default.useState(false);
     const [isTelemetryActive, setIsTelemetryActive] = react_1.default.useState(false);
     const telemetryPulseAnim = react_1.default.useRef(new react_native_1.Animated.Value(1)).current;
     react_1.default.useEffect(() => {
@@ -115,7 +117,8 @@ const InspectorHeader = react_1.default.memo(() => {
     const isDetailView = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'redux' &&
+            (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     const isSettingsView = settingsPage !== null;
     const isAnySelected = isDetailView || isSettingsView;
@@ -140,7 +143,8 @@ const InspectorHeader = react_1.default.memo(() => {
         }
     }, [settingsPage]);
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
-    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}>
+    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={[
@@ -241,7 +245,12 @@ const InspectorHeader = react_1.default.memo(() => {
             }}>
                 <AppHeaderLogo_1.default size={46} customIcon={appIcon}/>
                 <react_native_1.View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                minWidth: 0,
+            }}>
                     <react_native_1.Text style={[styles_1.default.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
                       {(0, helpers_1.getAppName)()}
                     </react_native_1.Text>
@@ -255,93 +264,117 @@ const InspectorHeader = react_1.default.memo(() => {
                     marginBottom: 0,
                 },
             ]}>
-                      <react_native_1.Text style={[
-                styles_1.default.envBadgeText,
-                { color: envConfig.text },
-            ]}>
+                      <react_native_1.Text style={[styles_1.default.envBadgeText, { color: envConfig.text }]}>
                         {envConfig.label}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => react_native_1.Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${constants_2.LIB_VERSION}).`, [
-                    { text: 'Later', style: 'cancel' },
-                    {
-                        text: 'View on NPM',
-                        onPress: () => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
-                    },
-                ])} style={{
+                    {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
+                    flexDirection: 'row',
                     alignItems: 'center',
-                    justifyContent: 'center',
+                    backgroundColor: '#F59E0B',
+                    borderRadius: 5,
+                    paddingHorizontal: 5.5,
+                    paddingVertical: 1.5,
+                    gap: 3.5,
+                    shadowColor: '#F59E0B',
+                    shadowOffset: { width: 0, height: 1.5 },
+                    shadowOpacity: 0.35,
+                    shadowRadius: 3,
+                    elevation: 3,
                     flexShrink: 0,
                 }}>
                         <react_native_1.Animated.View style={{
-                    width: 8,
-                    height: 8,
-                    borderRadius: 4,
-                    backgroundColor: AppColors_1.AppColors.liveGreen,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.white}E6`,
+                    width: 5,
+                    height: 5,
+                    borderRadius: 2.5,
+                    backgroundColor: '#FFFFFF',
                     opacity: activePulseAnim,
                     transform: [{ scale: unreadPulseAnim }],
                 }}/>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#FFFFFF',
+                    letterSpacing: 0.3,
+                }}>
+                          UPDATE ⚡
+                        </react_native_1.Text>
                       </react_native_1.Pressable>)}
                   </react_native_1.View>
 
-                  {/* OS & NPM Version Representation */}
+                  {/* OS & NPM Version Common Chip Bar */}
                   <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 5,
                 minWidth: 0,
             }}>
+                    {/* Unified Platform & Build Chip */}
                     <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                backgroundColor: `${AppColors_1.AppColors.white}1F`,
-                borderRadius: 5,
-                paddingHorizontal: 6,
-                paddingVertical: 2,
-                gap: 4,
+                backgroundColor: 'rgba(255, 255, 255, 0.16)',
+                borderRadius: 6,
+                paddingHorizontal: 6.5,
+                paddingVertical: 2.5,
+                gap: 4.5,
                 borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}2E`,
+                borderColor: 'rgba(255, 255, 255, 0.28)',
                 flexShrink: 0,
             }}>
-                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`} size={10}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`} size={10}/>)}
+                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color="#FFFFFF" size={10.5}/>) : (<NetworkIcons_1.AndroidIcon color="#FFFFFF" size={10.5}/>)}
                       <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 9.5,
-                color: `${AppColors_1.AppColors.white}EB`,
+                color: '#FFFFFF',
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
                         {react_native_1.Platform.OS === 'ios'
-                ? `iOS ${react_native_1.Platform.Version}`
-                : `Android ${react_native_1.Platform.Version}`}
+                ? `iOS ${String(deviceInfo?.osVersion || react_native_1.Platform.Version).replace(/^(ios\s*)+/i, '').trim()}${deviceInfo?.buildNumber || deviceInfo?.appVersion
+                    ? ` (${deviceInfo.buildNumber || deviceInfo.appVersion})`
+                    : ''}`
+                : `Android ${String(deviceInfo?.osVersion || react_native_1.Platform.Version).replace(/^(android\s*)+/i, '').trim()}${deviceInfo?.buildNumber || deviceInfo?.appVersion
+                    ? ` (${deviceInfo.buildNumber || deviceInfo.appVersion})`
+                    : ''}`}
                       </react_native_1.Text>
                     </react_native_1.View>
 
-                    <react_native_1.Pressable onPress={() => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { })} style={{
-                backgroundColor: '#FFFFFF',
-                borderRadius: 5,
-                paddingHorizontal: 6,
-                paddingVertical: 2,
+                    {/* Unified NPM Version Chip */}
+                    <react_native_1.Pressable onPress={() => {
+                if (updateAvailable) {
+                    setShowUpdateModal(true);
+                }
+                else {
+                    react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
+                }
+            }} style={{
+                backgroundColor: 'rgba(255, 255, 255, 0.16)',
+                borderRadius: 6,
+                paddingHorizontal: 6.5,
+                paddingVertical: 2.5,
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 4,
+                borderWidth: 1,
+                borderColor: 'rgba(255, 255, 255, 0.28)',
                 flexShrink: 0,
-                shadowColor: '#000000',
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.15,
-                shadowRadius: 2,
-                elevation: 2,
             }}>
-                      <NetworkIcons_1.NpmIcon size={11} color="#CB3837"/>
+                      <NetworkIcons_1.NpmIcon size={11} color="#FF6B6B"/>
                       <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 9.5,
-                color: '#CB3837',
-                letterSpacing: 0.2,
+                color: '#FFFFFF',
+                letterSpacing: 0.15,
             }} numberOfLines={1}>
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>
+                      {updateAvailable && (<react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#F59E0B',
+                }}>
+                          ↑
+                        </react_native_1.Text>)}
                     </react_native_1.Pressable>
 
                     {isTelemetryActive && (<react_native_1.Pressable onPress={() => react_native_1.Alert.alert('Anonymous Telemetry Active', 'Anonymous diagnostics (such as React Native version, JavaScript engine, and device model) are currently enabled to help improve library tooling.\n\nNo user data or network payloads are captured. You can toggle this anytime in Settings.', [{ text: 'Got it' }])} style={{
@@ -482,9 +515,7 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ]}>
                       <react_native_1.Text style={styles_1.default.headerMethodText}>
-                        {selectedEvent.source === 'firebase'
-                    ? 'FB'
-                    : 'MAN'}
+                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
                       </react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
@@ -527,9 +558,7 @@ const InspectorHeader = react_1.default.memo(() => {
                     </react_native_1.View>
                     <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                       console.
-                      {(selectedLog.sourceMethod) ||
-                    selectedLog.type ||
-                    'log'}
+                      {selectedLog.sourceMethod || selectedLog.type || 'log'}
                     </react_native_1.Text>
                   </react_native_1.View>
                   <react_native_1.View style={styles_1.default.headerDetailSubRow}>
@@ -542,10 +571,10 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors_1.AppColors.white}29`,
                 }}>
-                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                          {(0, helpers_1.formatTime)(selectedLog.timestamp)}
-                        </react_native_1.Text>
+                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
+                      <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                        {(0, helpers_1.formatTime)(selectedLog.timestamp)}
+                      </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
                 </react_native_1.View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
@@ -565,9 +594,7 @@ const InspectorHeader = react_1.default.memo(() => {
                             backgroundColor: `${AppColors_1.AppColors.purple}4D`,
                         },
                     ]}>
-                          <react_native_1.Text style={styles_1.default.headerMethodText}>
-                            SLICE
-                          </react_native_1.Text>
+                          <react_native_1.Text style={styles_1.default.headerMethodText}>SLICE</react_native_1.Text>
                         </react_native_1.View>
                         <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                           {selectedReduxSlice}
@@ -578,20 +605,26 @@ const InspectorHeader = react_1.default.memo(() => {
                         styles_1.default.headerStatusDot,
                         { backgroundColor: AppColors_1.AppColors.liveGreen },
                     ]}/>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                          Live
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>Live</react_native_1.Text>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                          •
                         </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
                         <react_native_1.Text style={styles_1.default.headerSubTitle}>
                           {keyCount} keys
                         </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                          {sliceSize}
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                          •
                         </react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>{sliceSize}</react_native_1.Text>
                         {lastAction?.timestamp && (<>
-                            <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
-                            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                            <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                              •
+                            </react_native_1.Text>
+                            <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 3,
+                        }}>
                               <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={10}/>
                               <react_native_1.Text style={styles_1.default.headerSubTitle}>
                                 {lastAction.timestamp}
@@ -608,9 +641,7 @@ const InspectorHeader = react_1.default.memo(() => {
                         backgroundColor: `${AppColors_1.AppColors.brandPurple}4D`,
                     },
                 ]}>
-                      <react_native_1.Text style={styles_1.default.headerMethodText}>
-                        ACTION
-                      </react_native_1.Text>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>ACTION</react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                       {selectedReduxAction.type}
@@ -636,7 +667,9 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ]}>
                       <react_native_1.Text style={styles_1.default.headerMethodText}>
-                        {selectedCrash.isFatal ? 'FATAL' : selectedCrash.type.toUpperCase()}
+                        {selectedCrash.isFatal
+                    ? 'FATAL'
+                    : selectedCrash.type.toUpperCase()}
                       </react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
@@ -653,10 +686,13 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ]}/>
                     <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                      {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                      {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 }]}>•</react_native_1.Text>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                          •
+                        </react_native_1.Text>
                         <react_native_1.Text style={styles_1.default.headerSubTitle}>
                           {selectedCrash.deviceInfo.platform.toUpperCase()}
                         </react_native_1.Text>
@@ -728,6 +764,10 @@ const InspectorHeader = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.View>
-    </react_native_linear_gradient_1.default>);
+    </react_native_linear_gradient_1.default>
+
+    {/* Dedicated Update Available Details Modal */}
+    <UpdateAvailableModal_1.UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+    </>);
 });
 exports.default = InspectorHeader;

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

@@ -55,6 +55,9 @@ const BundleTab_1 = __importDefault(require("./BundleTab"));
 const PerformanceTab_1 = __importDefault(require("./PerformanceTab"));
 const CrashTab_1 = __importDefault(require("./CrashTab"));
 const CrashDetail_1 = __importDefault(require("./CrashDetail"));
+const StorageTab_1 = __importDefault(require("./StorageTab"));
+const DeviceTab_1 = __importDefault(require("./DeviceTab"));
+const AuditTab_1 = __importDefault(require("./AuditTab"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const TelemetryConsentModal_1 = __importDefault(require("./TelemetryConsentModal"));
 const NpmUpdateToast_1 = __importDefault(require("./NpmUpdateToast"));
@@ -62,8 +65,9 @@ const Toast_1 = __importDefault(require("../Toast"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
+const PerformanceHud_1 = __importDefault(require("./PerformanceHud"));
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, setVisible, switchActiveTab, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, isPerformanceHudEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -104,9 +108,16 @@ const MainScreen = () => {
         }).start();
     }, [activeTab]);
     return (<>
-      {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
+      <react_native_1.View pointerEvents="box-none" style={react_native_1.StyleSheet.absoluteFillObject}>
+        {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
             isEnabled &&
+            !visible &&
             !useNativeFab && <FabLauncher_1.default />}
+        {isEnabled && !visible && isPerformanceHudEnabled && (<PerformanceHud_1.default visible={true} onPress={() => {
+                setVisible(true);
+                switchActiveTab('performance');
+            }}/>)}
+      </react_native_1.View>
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary_1.default onClose={closeModal}>
           <react_native_1.View style={styles_1.default.modalBackdrop}>
@@ -150,6 +161,9 @@ const MainScreen = () => {
                       {activeTab === 'logs' && <ConsoleTab_1.default />}
                       {activeTab === 'analytics' && <AnalyticsTab_1.default />}
                       {activeTab === 'redux' && <ReduxTab_1.default />}
+                      {activeTab === 'storage' && <StorageTab_1.default />}
+                      {activeTab === 'device' && <DeviceTab_1.default />}
+                      {activeTab === 'audit' && <AuditTab_1.default />}
                       {activeTab === 'bundle' && <BundleTab_1.default />}
                       {activeTab === 'performance' && <PerformanceTab_1.default />}
                       {activeTab === 'crash' && <CrashTab_1.default />}

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

@@ -22,8 +22,10 @@ const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
+const RequestReplayView_1 = __importDefault(require("./RequestReplayView"));
 const NetworkDetail = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
+    const [isReplayScreenActive, setIsReplayScreenActive] = react_1.default.useState(false);
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = (0, InspectorContext_1.useInspector)();
     const handleOpenUrl = () => {
         react_native_1.Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${detailDisplayUrl}`, [
@@ -47,6 +49,9 @@ const NetworkDetail = react_1.default.memo(() => {
     };
     if (!selected)
         return null;
+    if (isReplayScreenActive) {
+        return (<RequestReplayView_1.default request={selected} onBack={() => setIsReplayScreenActive(false)}/>);
+    }
     return (<react_native_1.View style={{ flex: 1 }}>
       {/* Non-scrollable details header */}
       <react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
@@ -252,6 +257,16 @@ const NetworkDetail = react_1.default.memo(() => {
                   </react_native_1.View>
 
                   <react_native_1.View style={styles_1.default.detailInfoRight}>
+                    <TouchableScale_1.default style={[
+                    styles_1.default.iconSquareBtn,
+                    {
+                        backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                        borderColor: `${AppColors_1.AppColors.purple}30`,
+                        borderWidth: 1,
+                    },
+                ]} onPress={() => setIsReplayScreenActive(true)} accessible={true} accessibilityRole="button" accessibilityLabel="Edit & Resend Request" hitSlop={12}>
+                      <NetworkIcons_1.ReplayIcon color={AppColors_1.AppColors.purple} size={14}/>
+                    </TouchableScale_1.default>
                     <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
                       <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={14}/>
                     </TouchableScale_1.default>