react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,497 +1,161 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const i18n_1 = require("../../i18n");
-const react_native_1 = require("react-native");
-const InspectorContext_1 = require("./InspectorContext");
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const SegmentedTabs_1 = __importDefault(require("../SegmentedTabs"));
-const MetaAccordion_1 = __importDefault(require("../MetaAccordion"));
-const HeadersSection_1 = __importDefault(require("../HeadersSection"));
-const SourcePageCard_1 = __importDefault(require("../SourcePageCard"));
-const SectionHeader_1 = __importDefault(require("../SectionHeader"));
-const JsonViewer_1 = __importDefault(require("../JsonViewer"));
-const DiffViewer_1 = __importDefault(require("../DiffViewer"));
-const CopyButton_1 = __importDefault(require("../CopyButton"));
-const styles_1 = __importDefault(require("../../styles"));
-const AppColors_1 = require("../../styles/AppColors");
-const AppFonts_1 = require("../../styles/AppFonts");
-const constants_1 = require("../../constants");
-const helpers_1 = require("../../helpers");
-const NetworkIcons_1 = require("../NetworkIcons");
-const NetworkDetail = react_1.default.memo(() => {
-    const { t } = (0, i18n_1.useTranslation)();
-    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}`, [
-            { text: t('common.cancel') || 'Cancel', style: 'cancel' },
-            {
-                text: t('common.open') || 'Open',
-                onPress: () => {
-                    react_native_1.Linking.canOpenURL(detailDisplayUrl)
-                        .then(supported => {
-                        if (supported) {
-                            react_native_1.Linking.openURL(detailDisplayUrl);
-                        }
-                        else {
-                            react_native_1.Linking.openURL(detailDisplayUrl).catch(() => { });
-                        }
-                    })
-                        .catch(() => { });
-                },
-            },
-        ]);
-    };
-    if (!selected)
-        return null;
-    return (<react_native_1.View style={{ flex: 1 }}>
+"use strict";var __importDefault=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importDefault(require("react")),i18n_1=require("../../i18n"),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),SegmentedTabs_1=__importDefault(require("../SegmentedTabs")),MetaAccordion_1=__importDefault(require("../MetaAccordion")),HeadersSection_1=__importDefault(require("../HeadersSection")),SourcePageCard_1=__importDefault(require("../SourcePageCard")),SectionHeader_1=__importDefault(require("../SectionHeader")),JsonViewer_1=__importDefault(require("../JsonViewer")),DiffViewer_1=__importDefault(require("../DiffViewer")),CopyButton_1=__importDefault(require("../CopyButton")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),NetworkDetail=react_1.default.memo(()=>{const{t:o}=(0,i18n_1.useTranslation)(),{selected:e,detailDisplayUrl:r,apiDetailActiveTab:p,setApiDetailActiveTab:A,detailSearch:a,setDetailSearch:s,reqExpanded:c,setReqExpanded:h,resExpanded:d,setResExpanded:w,showReqDiff:g,setShowReqDiff:m,showResDiff:C,setShowResDiff:V,prevRequestData:x,prevResponseData:T,logRouteMapRef:S}=(0,InspectorContext_1.useInspector)(),b=()=>{react_native_1.Alert.alert(o("common.openInBrowser")||"Open in Browser",`${o("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
+
+${r}`,[{text:o("common.cancel")||"Cancel",style:"cancel"},{text:o("common.open")||"Open",onPress:()=>{react_native_1.Linking.canOpenURL(r).then(t=>{t?react_native_1.Linking.openURL(r):react_native_1.Linking.openURL(r).catch(()=>{})}).catch(()=>{})}}])};return e?<react_native_1.View style={{flex:1}}>
       
-      <react_native_1.View style={{ paddingHorizontal: 8, paddingTop: 4 }}>
+      <react_native_1.View style={{paddingHorizontal:8,paddingTop:4}}>
         <react_native_1.View style={styles_1.default.detailInfoBar}>
-          {(() => {
-            let schemeStr = '';
-            let hostStr = '';
-            let pathStr = detailDisplayUrl;
-            let queryStr = '';
-            try {
-                const qIndex = detailDisplayUrl.indexOf('?');
-                let cleanUrlForParsing = detailDisplayUrl;
-                if (qIndex !== -1) {
-                    pathStr = detailDisplayUrl.substring(0, qIndex);
-                    queryStr = detailDisplayUrl.substring(qIndex);
-                    cleanUrlForParsing = pathStr;
-                }
-                const schemeIndex = cleanUrlForParsing.indexOf('://');
-                if (schemeIndex !== -1) {
-                    schemeStr = cleanUrlForParsing.substring(0, schemeIndex + 3);
-                    const withoutScheme = cleanUrlForParsing.substring(schemeIndex + 3);
-                    const firstSlash = withoutScheme.indexOf('/');
-                    if (firstSlash !== -1) {
-                        hostStr = withoutScheme.substring(0, firstSlash);
-                        pathStr = withoutScheme.substring(firstSlash);
-                    }
-                    else {
-                        hostStr = withoutScheme;
-                        pathStr = '/';
-                    }
-                }
-                else {
-                    const firstSlash = cleanUrlForParsing.indexOf('/');
-                    if (firstSlash !== -1) {
-                        hostStr = cleanUrlForParsing.substring(0, firstSlash);
-                        pathStr = cleanUrlForParsing.substring(firstSlash);
-                    }
-                    else if (cleanUrlForParsing) {
-                        hostStr = cleanUrlForParsing;
-                        pathStr = '/';
-                    }
-                }
-            }
-            catch (e) { }
-            return (<>
-                <react_native_1.View style={styles_1.default.detailInfoTop}>
-                  <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                    flexWrap: 'wrap',
-                    flex: 1,
-                    minWidth: 0,
-                }}>
+          {(()=>{let t="",u="",i=r,v="";try{const f=r.indexOf("?");let l=r;f!==-1&&(i=r.substring(0,f),v=r.substring(f),l=i);const y=l.indexOf("://");if(y!==-1){t=l.substring(0,y+3);const n=l.substring(y+3),_=n.indexOf("/");_!==-1?(u=n.substring(0,_),i=n.substring(_)):(u=n,i="/")}else{const n=l.indexOf("/");n!==-1?(u=l.substring(0,n),i=l.substring(n)):l&&(u=l,i="/")}}catch{}return<>
+                
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,paddingBottom:8,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor}}>
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5,flexWrap:"wrap",flex:1}}>
                     
-                    <react_native_1.View style={[
-                    styles_1.default.methodBadge,
-                    {
-                        backgroundColor: constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL,
-                        paddingHorizontal: 8,
-                        paddingVertical: 4,
-                        borderRadius: 7,
-                    },
-                ]}>
-                      <react_native_1.Text style={[
-                    styles_1.default.methodBadgeText,
-                    {
-                        color: AppColors_1.AppColors.white,
-                        fontSize: 10.5,
-                    },
-                ]}>
-                        {selected.method}
+                    <react_native_1.View style={[styles_1.default.methodBadge,{backgroundColor:constants_1.METHOD_COLORS[e.method]??constants_1.METHOD_COLORS.ALL,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6}]}>
+                      <react_native_1.Text style={[styles_1.default.methodBadgeText,{color:AppColors_1.AppColors.white,fontSize:10.5,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                        {e.method}
                       </react_native_1.Text>
                     </react_native_1.View>
 
                     
-                    {selected.client && (<react_native_1.View style={[
-                        styles_1.default.chip,
-                        {
-                            backgroundColor: selected.client === 'axios'
-                                ? `${AppColors_1.AppColors.purple}14`
-                                : selected.client === 'apollo' || selected.client === 'graphql'
-                                    ? `${AppColors_1.AppColors.pink500}14`
-                                    : selected.client === 'xhr'
-                                        ? `${AppColors_1.AppColors.amber500}14`
-                                        : `${AppColors_1.AppColors.sky500}14`,
-                            borderColor: selected.client === 'axios'
-                                ? `${AppColors_1.AppColors.purple}30`
-                                : selected.client === 'apollo' || selected.client === 'graphql'
-                                    ? `${AppColors_1.AppColors.pink500}30`
-                                    : selected.client === 'xhr'
-                                        ? `${AppColors_1.AppColors.amber500}30`
-                                        : `${AppColors_1.AppColors.sky500}30`,
-                            paddingHorizontal: 6,
-                            paddingVertical: 3,
-                            borderRadius: 6,
-                        },
-                    ]}>
-                        <react_native_1.Text style={[
-                        styles_1.default.chipText,
-                        {
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: selected.client === 'axios'
-                                ? AppColors_1.AppColors.purple
-                                : selected.client === 'apollo' || selected.client === 'graphql'
-                                    ? AppColors_1.AppColors.pink500
-                                    : selected.client === 'xhr'
-                                        ? AppColors_1.AppColors.amber700
-                                        : AppColors_1.AppColors.sky600,
-                        },
-                    ]}>
-                          {selected.client.toUpperCase()}
+                    {e.client&&<react_native_1.View style={[styles_1.default.chip,{backgroundColor:e.client==="axios"?`${AppColors_1.AppColors.purple}14`:e.client==="apollo"||e.client==="graphql"?`${AppColors_1.AppColors.pink500}14`:e.client==="xhr"?`${AppColors_1.AppColors.amber500}14`:`${AppColors_1.AppColors.sky500}14`,borderColor:e.client==="axios"?`${AppColors_1.AppColors.purple}30`:e.client==="apollo"||e.client==="graphql"?`${AppColors_1.AppColors.pink500}30`:e.client==="xhr"?`${AppColors_1.AppColors.amber500}30`:`${AppColors_1.AppColors.sky500}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
+                        <react_native_1.Text style={[styles_1.default.chipText,{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:e.client==="axios"?AppColors_1.AppColors.purple:e.client==="apollo"||e.client==="graphql"?AppColors_1.AppColors.pink500:e.client==="xhr"?AppColors_1.AppColors.amber700:AppColors_1.AppColors.sky600}]}>
+                          {e.client.toUpperCase()}
                         </react_native_1.Text>
-                      </react_native_1.View>)}
+                      </react_native_1.View>}
 
                     
-                    {selected.status != null && (<react_native_1.View style={[
-                        styles_1.default.chip,
-                        {
-                            backgroundColor: selected.status === 0
-                                ? `${AppColors_1.AppColors.errorColor}18`
-                                : `${(0, helpers_1.getStatusColor)(selected.status)}18`,
-                            borderColor: selected.status === 0
-                                ? `${AppColors_1.AppColors.errorColor}40`
-                                : `${(0, helpers_1.getStatusColor)(selected.status)}40`,
-                            paddingHorizontal: 7,
-                            paddingVertical: 3.5,
-                            borderRadius: 7,
-                        },
-                    ]}>
-                        {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_1.View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
-                        }}/>)}
-                        <react_native_1.Text style={[
-                        styles_1.default.chipText,
-                        {
-                            color: selected.status === 0
-                                ? AppColors_1.AppColors.errorColor
-                                : (0, helpers_1.getStatusColor)(selected.status),
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 10.5,
-                        },
-                    ]}>
-                          {selected.status === 0
-                        ? 'Failed'
-                        : `${selected.status} ${selected.status === 200 ? 'OK' : ''}`}
+                    {e.status!=null&&<react_native_1.View style={[styles_1.default.chip,{backgroundColor:e.status===0?`${AppColors_1.AppColors.errorColor}18`:`${(0,helpers_1.getStatusColor)(e.status)}18`,borderColor:e.status===0?`${AppColors_1.AppColors.errorColor}40`:`${(0,helpers_1.getStatusColor)(e.status)}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
+                        {e.status===0?<NetworkIcons_1.FailIcon size={8}color={AppColors_1.AppColors.errorColor}/>:<react_native_1.View style={{width:6,height:6,borderRadius:3,backgroundColor:(0,helpers_1.getStatusColor)(e.status)}}/>}
+                        <react_native_1.Text style={[styles_1.default.chipText,{color:e.status===0?AppColors_1.AppColors.errorColor:(0,helpers_1.getStatusColor)(e.status),fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
+                          {e.status===0?"Failed":`${e.status} ${e.status===200?"OK":""}`}
                         </react_native_1.Text>
-                      </react_native_1.View>)}
+                      </react_native_1.View>}
 
                     
-                    {selected.duration != null && (<react_native_1.View style={[
-                        styles_1.default.chip,
-                        {
-                            backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
-                            borderColor: `${AppColors_1.AppColors.brandPurple}30`,
-                            paddingHorizontal: 7,
-                            paddingVertical: 3.5,
-                            borderRadius: 7,
-                            gap: 4,
-                        },
-                    ]}>
-                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
-                        <react_native_1.Text style={[
-                        styles_1.default.chipText,
-                        {
-                            color: AppColors_1.AppColors.brandPurple,
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 10.5,
-                        },
-                    ]}>
-                          {selected.duration}ms
+                    {e.duration!=null&&<react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${AppColors_1.AppColors.brandPurple}14`,borderColor:`${AppColors_1.AppColors.brandPurple}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.brandPurple}size={10}/>
+                        <react_native_1.Text style={[styles_1.default.chipText,{color:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
+                          {e.duration}ms
                         </react_native_1.Text>
-                      </react_native_1.View>)}
+                      </react_native_1.View>}
 
                     
-                    {selected.response != null && (<react_native_1.View style={[
-                        styles_1.default.chip,
-                        {
-                            backgroundColor: `${AppColors_1.AppColors.sky600}14`,
-                            borderColor: `${AppColors_1.AppColors.sky600}30`,
-                            paddingHorizontal: 7,
-                            paddingVertical: 3.5,
-                            borderRadius: 7,
-                            gap: 4,
-                        },
-                    ]}>
-                        <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.sky600} size={10}/>
-                        <react_native_1.Text style={[
-                        styles_1.default.chipText,
-                        {
-                            color: AppColors_1.AppColors.sky600,
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 10.5,
-                        },
-                    ]}>
-                          {(0, helpers_1.getSize)(selected.response)}
+                    {e.response!=null&&<react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${AppColors_1.AppColors.sky600}14`,borderColor:`${AppColors_1.AppColors.sky600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                        <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.sky600}size={10}/>
+                        <react_native_1.Text style={[styles_1.default.chipText,{color:AppColors_1.AppColors.sky600,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
+                          {(0,helpers_1.getSize)(e.response)}
                         </react_native_1.Text>
-                      </react_native_1.View>)}
-                  </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.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
-                      <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={14}/>
-                    </TouchableScale_1.default>
-                    <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
-                    <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
-                    <CopyButton_1.default value={detailDisplayUrl} label="URL"/>
+                      </react_native_1.View>}
                   </react_native_1.View>
                 </react_native_1.View>
 
                 
-                <react_native_1.Pressable style={{
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                    padding: 10,
-                    marginTop: 8,
-                    gap: 6,
-                }} onPress={handleOpenUrl}>
-                  <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }}>
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                      {schemeStr ? (<react_native_1.View style={{
-                        backgroundColor: schemeStr.startsWith('https')
-                            ? `${AppColors_1.AppColors.green600}18`
-                            : `${AppColors_1.AppColors.amber500}18`,
-                        paddingHorizontal: 6,
-                        paddingVertical: 2,
-                        borderRadius: 4,
-                    }}>
-                          <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 9,
-                        color: schemeStr.startsWith('https')
-                            ? AppColors_1.AppColors.green600
-                            : AppColors_1.AppColors.amber500,
-                    }}>
-                            {schemeStr.replace('://', '').toUpperCase()}
+                <react_native_1.View style={{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,padding:10,marginTop:8,gap:8}}>
+                  
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"nowrap",gap:6}}>
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1,minWidth:0}}>
+                      {t?<react_native_1.View style={{backgroundColor:t.startsWith("https")?`${AppColors_1.AppColors.green600}18`:`${AppColors_1.AppColors.amber500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4}}>
+                          <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:t.startsWith("https")?AppColors_1.AppColors.green600:AppColors_1.AppColors.amber500}}>
+                            {t.replace("://","").toUpperCase()}
                           </react_native_1.Text>
-                        </react_native_1.View>) : null}
+                        </react_native_1.View>:null}
 
-                      <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    letterSpacing: 0.4,
-                    textTransform: 'uppercase',
-                }}>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
                         ENDPOINT URL
                       </react_native_1.Text>
                     </react_native_1.View>
 
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                      {queryStr ? (<react_native_1.View style={{
-                        backgroundColor: `${AppColors_1.AppColors.purple}14`,
-                        paddingHorizontal: 6,
-                        paddingVertical: 2,
-                        borderRadius: 4,
-                    }}>
-                          <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 8.5,
-                        color: AppColors_1.AppColors.purple,
-                    }}>
-                            {t('network.queryParams')}
-                          </react_native_1.Text>
-                        </react_native_1.View>) : null}
-
-                      <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    backgroundColor: `${AppColors_1.AppColors.sky600}14`,
-                    paddingHorizontal: 6,
-                    paddingVertical: 2,
-                    borderRadius: 4,
-                }}>
-                        <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={10}/>
-                        <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9,
-                    color: AppColors_1.AppColors.sky600,
-                }}>
-                          Open
-                        </react_native_1.Text>
-                      </react_native_1.View>
+                    
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0}}>
+                      <CopyButton_1.default value={(0,helpers_1.getCurlCommand)(e)}label="cURL"iconType="terminal"/>
+                      <CopyButton_1.default value={(0,helpers_1.getFetchCommand)(e)}label="fetch()"iconType="fetch"/>
+                      <CopyButton_1.default value={r}label="URL"iconType="copy"/>
+                      <TouchableScale_1.default style={[styles_1.default.iconSquareBtn,{backgroundColor:`${AppColors_1.AppColors.sky600}15`,borderColor:`${AppColors_1.AppColors.sky600}35`}]}onPress={b}hitSlop={10}accessibilityLabel="Open in Browser">
+                        <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600}size={13}/>
+                      </TouchableScale_1.default>
                     </react_native_1.View>
                   </react_native_1.View>
 
                   
-                  <react_native_1.Text selectable={true} style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 12.5,
-                    color: AppColors_1.AppColors.skyBlue,
-                    textDecorationLine: 'underline',
-                    lineHeight: 18,
-                }}>
-                    {detailDisplayUrl}
-                  </react_native_1.Text>
-                </react_native_1.Pressable>
-              </>);
-        })()}
+                  <react_native_1.Pressable onPress={b}>
+                    <react_native_1.Text selectable={!0}style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12.5,color:AppColors_1.AppColors.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
+                      {r}
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>
+              </>})()}
         </react_native_1.View>
       </react_native_1.View>
 
       
-      <SegmentedTabs_1.default tabs={[
-            {
-                key: 'metadata',
-                label: t('network.detailTabs.metadata'),
-                icon: (isActive) => (<NetworkIcons_1.StatusIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
-            },
-            {
-                key: 'headers',
-                label: t('network.detailTabs.headers'),
-                icon: (isActive) => (<NetworkIcons_1.HeadersIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
-            },
-            ...(selected.request != null
-                ? [
-                    {
-                        key: 'request',
-                        label: t('network.detailTabs.request'),
-                        icon: (isActive) => (<NetworkIcons_1.RequestIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
-                    },
-                ]
-                : []),
-            {
-                key: 'response',
-                label: t('network.detailTabs.response'),
-                icon: (isActive) => (<NetworkIcons_1.ResponseIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
-            },
-        ]} activeKey={apiDetailActiveTab} onChange={tab => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setApiDetailActiveTab(tab);
-        }} style={{ marginHorizontal: 6, marginBottom: 10, marginTop: 6 }}/>
+      <SegmentedTabs_1.default tabs={[{key:"metadata",label:o("network.detailTabs.metadata"),icon:t=><NetworkIcons_1.StatusIcon color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>},{key:"headers",label:o("network.detailTabs.headers"),icon:t=><NetworkIcons_1.HeadersIcon color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>},...e.request!=null?[{key:"request",label:o("network.detailTabs.request"),icon:t=><NetworkIcons_1.RequestIcon color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>}]:[],{key:"response",label:o("network.detailTabs.response"),icon:t=><NetworkIcons_1.ResponseIcon color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>}]}activeKey={p}onChange={t=>{(0,InspectorContext_1.animateNextLayout)(),A(t)}}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
 
       
-      <react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{
-            paddingHorizontal: 6,
-            paddingBottom: 24,
-        }} showsVerticalScrollIndicator={true}>
-        {apiDetailActiveTab === 'metadata' && (<>
-            <MetaAccordion_1.default status={selected.status} statusColor={(0, helpers_1.getStatusColor)(selected.status)} duration={selected.duration} size={(0, helpers_1.getSize)(selected.response)} triggeredAt={(0, helpers_1.formatDateTime)(selected.startTime)} method={selected.method} contentType={selected.responseHeaders?.['content-type'] ||
-                selected.responseHeaders?.['Content-Type']} url={selected.url}/>
+      <react_native_1.ScrollView style={styles_1.default.detailScroll}contentContainerStyle={{paddingHorizontal:6,paddingBottom:24}}showsVerticalScrollIndicator={!0}>
+        {p==="metadata"&&<>
+            <MetaAccordion_1.default status={e.status}statusColor={(0,helpers_1.getStatusColor)(e.status)}duration={e.duration}size={(0,helpers_1.getSize)(e.response)}triggeredAt={(0,helpers_1.formatDateTime)(e.startTime)}method={e.method}contentType={e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"]}url={e.url}/>
 
-            {(() => {
-                const routeInfo = logRouteMapRef.current.get(selected.id) ||
-                    selected?.routeInfo;
-                if (!routeInfo || !routeInfo.path || routeInfo.path === 'Navigators')
-                    return null;
-                return <SourcePageCard_1.default routeInfo={routeInfo}/>;
-            })()}
+            {(()=>{const t=S.current.get(e.id)||e?.routeInfo;return!t||!t.path||t.path==="Navigators"?null:<SourcePageCard_1.default routeInfo={t}/>})()}
 
-            {(() => {
-                const cType = selected.responseHeaders?.['content-type'] ||
-                    selected.responseHeaders?.['Content-Type'];
-                if (cType?.includes('image/')) {
-                    return (<react_native_1.View style={styles_1.default.imagePreviewWrapper}>
-                    <react_native_1.Image source={{ uri: selected.url }} style={styles_1.default.imagePreview} resizeMode="contain"/>
-                    <TouchableScale_1.default style={styles_1.default.imageDownloadBtn} onPress={() => react_native_1.Linking.openURL(selected.url)} hitSlop={10}>
-                      <NetworkIcons_1.DownloadIcon color={AppColors_1.AppColors.purple} size={18}/>
+            {(e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"])?.includes("image/")?<react_native_1.View style={styles_1.default.imagePreviewWrapper}>
+                    <react_native_1.Image source={{uri:e.url}}style={styles_1.default.imagePreview}resizeMode="contain"/>
+                    <TouchableScale_1.default style={styles_1.default.imageDownloadBtn}onPress={()=>react_native_1.Linking.openURL(e.url)}hitSlop={10}>
+                      <NetworkIcons_1.DownloadIcon color={AppColors_1.AppColors.purple}size={18}/>
                     </TouchableScale_1.default>
-                  </react_native_1.View>);
-                }
-                return null;
-            })()}
-          </>)}
+                  </react_native_1.View>:null}
+          </>}
 
-        {apiDetailActiveTab === 'headers' && (<>
+        {p==="headers"&&<>
             <react_native_1.View style={styles_1.default.detailSearchRow}>
               <react_native_1.View style={styles_1.default.detailSearchBox}>
-                <react_native_1.TextInput placeholder={t('network.searchHeaders')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                  </react_native_1.Pressable>)}
+                <react_native_1.TextInput placeholder={o("network.searchHeaders")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={a}onChangeText={s}style={styles_1.default.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                {a.length>0&&<react_native_1.Pressable onPress={()=>s("")}hitSlop={10}style={{padding:8}}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={14}/>
+                  </react_native_1.Pressable>}
               </react_native_1.View>
             </react_native_1.View>
 
-            <HeadersSection_1.default title="Request Headers" headers={selected.requestHeaders} search={detailSearch} resetKey={selected.id}/>
-            <HeadersSection_1.default title="Response Headers" headers={selected.responseHeaders} search={detailSearch} resetKey={selected.id}/>
-          </>)}
+            <HeadersSection_1.default title="Request Headers"headers={e.requestHeaders}search={a}resetKey={e.id}/>
+            <HeadersSection_1.default title="Response Headers"headers={e.responseHeaders}search={a}resetKey={e.id}/>
+          </>}
 
-        {apiDetailActiveTab === 'request' &&
-            selected.request != null && (<>
+        {p==="request"&&e.request!=null&&<>
               <react_native_1.View style={styles_1.default.detailSearchRow}>
                 <react_native_1.View style={styles_1.default.detailSearchBox}>
-                  <react_native_1.TextInput placeholder={t('network.searchRequest')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                  {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                    </react_native_1.Pressable>)}
+                  <react_native_1.TextInput placeholder={o("network.searchRequest")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={a}onChangeText={s}style={styles_1.default.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                  {a.length>0&&<react_native_1.Pressable onPress={()=>s("")}hitSlop={10}style={{padding:8}}>
+                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={14}/>
+                    </react_native_1.Pressable>}
                 </react_native_1.View>
               </react_native_1.View>
 
               <react_native_1.View style={styles_1.default.sectionContainer}>
-                <SectionHeader_1.default title={t('network.requestTitle')} value={selected.request} expanded={reqExpanded} onToggleExpand={() => setReqExpanded(v => !v)} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={() => {
-                setShowReqDiff(v => !v);
-                if (!reqExpanded && !showReqDiff)
-                    setReqExpanded(true);
-            }}/>
-                {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer_1.default data={selected.request} search={detailSearch}/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
-                    <react_native_1.Text style={[
-                    styles_1.default.codeText,
-                    { color: AppColors_1.AppColors.grayTextWeak },
-                ]}>
-                      {t('network.bodyHidden')}
+                <SectionHeader_1.default title={o("network.requestTitle")}value={e.request}expanded={c}onToggleExpand={()=>h(t=>!t)}showDiff={x!=null}isDiffing={g}onToggleDiff={()=>{m(t=>!t),!c&&!g&&h(!0)}}/>
+                {g?<DiffViewer_1.default oldData={x}newData={e.request}forceOpen={c}/>:c?<JsonViewer_1.default data={e.request}search={a}/>:<react_native_1.View style={styles_1.default.codeBlock}>
+                    <react_native_1.Text style={[styles_1.default.codeText,{color:AppColors_1.AppColors.grayTextWeak}]}>
+                      {o("network.bodyHidden")}
                     </react_native_1.Text>
-                  </react_native_1.View>)}
+                  </react_native_1.View>}
               </react_native_1.View>
-            </>)}
+            </>}
 
-        {apiDetailActiveTab === 'response' && (<>
+        {p==="response"&&<>
             <react_native_1.View style={styles_1.default.detailSearchRow}>
               <react_native_1.View style={styles_1.default.detailSearchBox}>
-                <react_native_1.TextInput placeholder={t('network.searchResponse')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                  </react_native_1.Pressable>)}
+                <react_native_1.TextInput placeholder={o("network.searchResponse")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={a}onChangeText={s}style={styles_1.default.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                {a.length>0&&<react_native_1.Pressable onPress={()=>s("")}hitSlop={10}style={{padding:8}}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={14}/>
+                  </react_native_1.Pressable>}
               </react_native_1.View>
             </react_native_1.View>
 
             <react_native_1.View style={styles_1.default.sectionContainer}>
-              <SectionHeader_1.default title={t('network.responseTitle')} value={selected.response} expanded={resExpanded} onToggleExpand={() => setResExpanded(v => !v)} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={() => {
-                setShowResDiff(v => !v);
-                if (!resExpanded && !showResDiff)
-                    setResExpanded(true);
-            }}/>
-              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer_1.default data={selected.response} search={detailSearch} wrap/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
-                  <react_native_1.Text style={[
-                    styles_1.default.codeText,
-                    { color: AppColors_1.AppColors.grayTextWeak },
-                ]}>
-                    {t('network.bodyHidden')}
+              <SectionHeader_1.default title={o("network.responseTitle")}value={e.response}expanded={d}onToggleExpand={()=>w(t=>!t)}showDiff={T!=null}isDiffing={C}onToggleDiff={()=>{V(t=>!t),!d&&!C&&w(!0)}}/>
+              {C?<DiffViewer_1.default oldData={T}newData={e.response}forceOpen={d}/>:d?<JsonViewer_1.default data={e.response}search={a}wrap/>:<react_native_1.View style={styles_1.default.codeBlock}>
+                  <react_native_1.Text style={[styles_1.default.codeText,{color:AppColors_1.AppColors.grayTextWeak}]}>
+                    {o("network.bodyHidden")}
                   </react_native_1.Text>
-                </react_native_1.View>)}
+                </react_native_1.View>}
             </react_native_1.View>
-          </>)}
+          </>}
       </react_native_1.ScrollView>
-    </react_native_1.View>);
-});
-exports.default = NetworkDetail;
+    </react_native_1.View>:null});exports.default=NetworkDetail;