react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,49 +1,49 @@
-import He from"react";import{useTranslation as qe}from"../../i18n";import{Alert as $e,Image as Pe,Linking as L,Pressable as O,ScrollView as We,Text as V,TextInput as M,View as T}from"react-native";import{animateNextLayout as Le,useInspector as Oe}from"./InspectorContext";import X from"../TouchableScale";import Fe from"../SegmentedTabs";import Ue from"../MetaAccordion";import Y from"../HeadersSection";import Ae from"../SourcePageCard";import Z from"../SectionHeader";import Te from"../JsonViewer";import Ce from"../DiffViewer";import N from"../CopyButton";import r from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import{METHOD_COLORS as Se}from"../../constants";import{getStatusColor as q,getSize as Ve,formatDateTime as Ee,getFetchCommand as Me,getCurlCommand as Ne}from"../../helpers";import{FailIcon as Ke,StatusIcon as Je,HeadersIcon as _e,RequestIcon as Ge,ResponseIcon as Qe,DownloadIcon as Xe,ClearIcon as K,SizeIcon as Ye,ExternalLinkIcon as Ze,ClockIcon as Tt}from"../NetworkIcons";const kt=He.memo(()=>{const{t:k}=qe(),{selected:e,detailDisplayUrl:C,apiDetailActiveTab:H,setApiDetailActiveTab:Re,detailSearch:S,setDetailSearch:I,reqExpanded:$,setReqExpanded:j,resExpanded:P,setResExpanded:J,showReqDiff:F,setShowReqDiff:De,showResDiff:U,setShowResDiff:ze,prevRequestData:_,prevResponseData:G,logRouteMapRef:Ie}=Oe(),Q=()=>{$e.alert(k("common.openInBrowser")||"Open in Browser",`${k("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
+import re from"react";import{useTranslation as ae}from"../../i18n";import{Alert as le,Image as Te,Linking as $,Pressable as P,ScrollView as Ce,Text as C,TextInput as L,View as T}from"react-native";import{animateNextLayout as Se,useInspector as Re}from"./InspectorContext";import K from"../TouchableScale";import Ve from"../SegmentedTabs";import De from"../MetaAccordion";import J from"../HeadersSection";import Be from"../SourcePageCard";import _ from"../SectionHeader";import G from"../JsonViewer";import Q from"../DiffViewer";import O from"../CopyButton";import Ie from"../ShareButton";import o from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as R}from"../../styles/AppFonts";import{METHOD_COLORS as X}from"../../constants";import{getStatusColor as z,getSize as Y,formatDateTime as He,getFetchCommand as $e,getCurlCommand as qe}from"../../helpers";import{shareApiReport as Pe}from"../../helpers/shareFormatter";import{FailIcon as We,StatusIcon as Le,HeadersIcon as Oe,RequestIcon as Fe,ResponseIcon as Ue,DownloadIcon as Ae,ClearIcon as F,SizeIcon as Ee,ExternalLinkIcon as Me,ClockIcon as Ne}from"../NetworkIcons";const Ke=re.memo(()=>{const{t:b}=ae(),{selected:e,detailDisplayUrl:S,apiDetailActiveTab:D,setApiDetailActiveTab:Z,detailSearch:k,setDetailSearch:V,reqExpanded:B,setReqExpanded:U,resExpanded:I,setResExpanded:A,showReqDiff:v,setShowReqDiff:ee,showResDiff:W,setShowResDiff:te,prevRequestData:E,prevResponseData:M,logRouteMapRef:oe}=Re(),N=()=>{le.alert(b("common.openInBrowser")||"Open in Browser",`${b("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
 
-${C}`,[{text:k("common.cancel")||"Cancel",style:"cancel"},{text:k("common.open")||"Open",onPress:()=>{L.canOpenURL(C).then(o=>{o?L.openURL(C):L.openURL(C).catch(()=>{})}).catch(()=>{})}}])};return e?<T style={{flex:1}}>
+${S}`,[{text:b("common.cancel")||"Cancel",style:"cancel"},{text:b("common.open")||"Open",onPress:()=>{$.canOpenURL(S).then(r=>{r?$.openURL(S):$.openURL(S).catch(()=>{})}).catch(()=>{})}}])};return e?<T style={{flex:1}}>
       
       <T style={{paddingHorizontal:8,paddingTop:4}}>
-        <T style={r.detailInfoBar}>
-          {(()=>{let o="",v="",B=C,Be="";try{const W=C.indexOf("?");let R=C;W!==-1&&(B=C.substring(0,W),Be=C.substring(W),R=B);const A=R.indexOf("://");if(A!==-1){o=R.substring(0,A+3);const D=R.substring(A+3),E=D.indexOf("/");E!==-1?(v=D.substring(0,E),B=D.substring(E)):(v=D,B="/")}else{const D=R.indexOf("/");D!==-1?(v=R.substring(0,D),B=R.substring(D)):R&&(v=R,B="/")}}catch{}return<>
+        <T style={o.detailInfoBar}>
+          {(()=>{const r=S.indexOf("://"),H=r!==-1?S.substring(0,r+3):"";return<>
                 
                 <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,paddingBottom:8,borderBottomWidth:1,borderBottomColor:t.dividerColor}}>
                   <T style={{flexDirection:"row",alignItems:"center",gap:5,flexWrap:"wrap",flex:1}}>
                     
-                    <T style={[r.methodBadge,{backgroundColor:Se[e.method]??Se.ALL,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6}]}>
-                      <V style={[r.methodBadgeText,{color:t.white,fontSize:10.5,fontFamily:z.interBold}]}>
+                    <T style={[o.methodBadge,{backgroundColor:X[e.method]??X.ALL,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6}]}>
+                      <C style={[o.methodBadgeText,{color:t.white,fontSize:10.5,fontFamily:R.interBold}]}>
                         {e.method}
-                      </V>
+                      </C>
                     </T>
 
                     
-                    {e.client&&<T style={[r.chip,{backgroundColor:e.client==="axios"?`${t.purple}14`:e.client==="apollo"||e.client==="graphql"?`${t.pink500}14`:e.client==="xhr"?`${t.amber500}14`:`${t.sky500}14`,borderColor:e.client==="axios"?`${t.purple}30`:e.client==="apollo"||e.client==="graphql"?`${t.pink500}30`:e.client==="xhr"?`${t.amber500}30`:`${t.sky500}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
-                        <V style={[r.chipText,{fontFamily:z.interBold,fontSize:9.5,color:e.client==="axios"?t.purple:e.client==="apollo"||e.client==="graphql"?t.pink500:e.client==="xhr"?t.amber700:t.sky600}]}>
+                    {e.client&&<T style={[o.chip,{backgroundColor:e.client==="axios"?`${t.purple}14`:e.client==="apollo"||e.client==="graphql"?`${t.pink500}14`:e.client==="xhr"?`${t.amber500}14`:`${t.sky500}14`,borderColor:e.client==="axios"?`${t.purple}30`:e.client==="apollo"||e.client==="graphql"?`${t.pink500}30`:e.client==="xhr"?`${t.amber500}30`:`${t.sky500}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
+                        <C style={[o.chipText,{fontFamily:R.interBold,fontSize:9.5,color:e.client==="axios"?t.purple:e.client==="apollo"||e.client==="graphql"?t.pink500:e.client==="xhr"?t.amber700:t.sky600}]}>
                           {e.client.toUpperCase()}
-                        </V>
+                        </C>
                       </T>}
 
                     
-                    {e.status!=null&&<T style={[r.chip,{backgroundColor:e.status===0?`${t.errorColor}18`:`${q(e.status)}18`,borderColor:e.status===0?`${t.errorColor}40`:`${q(e.status)}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
-                        {e.status===0?<Ke size={8}color={t.errorColor}/>:<T style={{width:6,height:6,borderRadius:3,backgroundColor:q(e.status)}}/>}
-                        <V style={[r.chipText,{color:e.status===0?t.errorColor:q(e.status),fontFamily:z.interBold,fontSize:10.5}]}>
+                    {e.status!=null&&<T style={[o.chip,{backgroundColor:e.status===0?`${t.errorColor}18`:`${z(e.status)}18`,borderColor:e.status===0?`${t.errorColor}40`:`${z(e.status)}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
+                        {e.status===0?<We size={8}color={t.errorColor}/>:<T style={{width:6,height:6,borderRadius:3,backgroundColor:z(e.status)}}/>}
+                        <C style={[o.chipText,{color:e.status===0?t.errorColor:z(e.status),fontFamily:R.interBold,fontSize:10.5}]}>
                           {e.status===0?"Failed":`${e.status} ${e.status===200?"OK":""}`}
-                        </V>
+                        </C>
                       </T>}
 
                     
-                    {e.duration!=null&&<T style={[r.chip,{backgroundColor:`${t.brandPurple}14`,borderColor:`${t.brandPurple}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
-                        <Tt color={t.brandPurple}size={10}/>
-                        <V style={[r.chipText,{color:t.brandPurple,fontFamily:z.interBold,fontSize:10.5}]}>
+                    {e.duration!=null&&<T style={[o.chip,{backgroundColor:`${t.brandPurple}14`,borderColor:`${t.brandPurple}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                        <Ne color={t.brandPurple}size={10}/>
+                        <C style={[o.chipText,{color:t.brandPurple,fontFamily:R.interBold,fontSize:10.5}]}>
                           {e.duration}ms
-                        </V>
+                        </C>
                       </T>}
 
                     
-                    {e.response!=null&&<T style={[r.chip,{backgroundColor:`${t.sky600}14`,borderColor:`${t.sky600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
-                        <Ye color={t.sky600}size={10}/>
-                        <V style={[r.chipText,{color:t.sky600,fontFamily:z.interBold,fontSize:10.5}]}>
-                          {Ve(e.response)}
-                        </V>
+                    {e.response!=null&&<T style={[o.chip,{backgroundColor:`${t.sky600}14`,borderColor:`${t.sky600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                        <Ee color={t.sky600}size={10}/>
+                        <C style={[o.chipText,{color:t.sky600,fontFamily:R.interBold,fontSize:10.5}]}>
+                          {Y(e.response)}
+                        </C>
                       </T>}
                   </T>
                 </T>
@@ -53,109 +53,110 @@ ${C}`,[{text:k("common.cancel")||"Cancel",style:"cancel"},{text:k("common.open")
                   
                   <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"nowrap",gap:6}}>
                     <T style={{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1,minWidth:0}}>
-                      {o?<T style={{backgroundColor:o.startsWith("https")?`${t.green600}18`:`${t.amber500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4}}>
-                          <V style={{fontFamily:z.interBold,fontSize:9,color:o.startsWith("https")?t.green600:t.amber500}}>
-                            {o.replace("://","").toUpperCase()}
-                          </V>
+                      {H?<T style={{backgroundColor:H.startsWith("https")?`${t.green600}18`:`${t.amber500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4}}>
+                          <C style={{fontFamily:R.interBold,fontSize:9,color:H.startsWith("https")?t.green600:t.amber500}}>
+                            {H.replace("://","").toUpperCase()}
+                          </C>
                         </T>:null}
 
-                      <V style={{fontFamily:z.interBold,fontSize:10,color:t.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
+                      <C style={{fontFamily:R.interBold,fontSize:10,color:t.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
                         ENDPOINT URL
-                      </V>
+                      </C>
                     </T>
 
                     
                     <T style={{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0}}>
-                      <N value={Ne(e)}label="cURL"iconType="terminal"/>
-                      <N value={Me(e)}label="fetch()"iconType="fetch"/>
-                      <N value={C}label="URL"iconType="copy"/>
-                      <X style={[r.iconSquareBtn,{backgroundColor:`${t.sky600}15`,borderColor:`${t.sky600}35`}]}onPress={Q}hitSlop={10}accessibilityLabel="Open in Browser">
-                        <Ze color={t.sky600}size={13}/>
-                      </X>
+                      <O value={qe(e)}label="cURL"iconType="terminal"/>
+                      <Ie onShare={()=>Pe(e)}/>
+                      <O value={$e(e)}label="fetch()"iconType="fetch"/>
+                      <O value={S}label="URL"iconType="copy"/>
+                      <K style={[o.iconSquareBtn,{backgroundColor:`${t.sky600}15`,borderColor:`${t.sky600}35`}]}onPress={N}hitSlop={10}accessibilityLabel="Open in Browser">
+                        <Me color={t.sky600}size={13}/>
+                      </K>
                     </T>
                   </T>
 
                   
-                  <O onPress={Q}>
-                    <V selectable={!0}style={{fontFamily:z.interMedium,fontSize:12.5,color:t.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
-                      {C}
-                    </V>
-                  </O>
+                  <P onPress={N}>
+                    <C selectable={!0}style={{fontFamily:R.interMedium,fontSize:12.5,color:t.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
+                      {S}
+                    </C>
+                  </P>
                 </T>
               </>})()}
         </T>
       </T>
 
       
-      <Fe tabs={[{key:"metadata",label:k("network.detailTabs.metadata"),icon:o=><Je color={o?t.white:t.grayText}/>},{key:"headers",label:k("network.detailTabs.headers"),icon:o=><_e color={o?t.white:t.grayText}/>},...e.request!=null?[{key:"request",label:k("network.detailTabs.request"),icon:o=><Ge color={o?t.white:t.grayText}/>}]:[],{key:"response",label:k("network.detailTabs.response"),icon:o=><Qe color={o?t.white:t.grayText}/>}]}activeKey={H}onChange={o=>{Le(),Re(o)}}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
+      <Ve tabs={[{key:"metadata",label:b("network.detailTabs.metadata"),icon:r=><Le color={r?t.white:t.grayText}/>},{key:"headers",label:b("network.detailTabs.headers"),icon:r=><Oe color={r?t.white:t.grayText}/>},...e.request!=null?[{key:"request",label:b("network.detailTabs.request"),icon:r=><Fe color={r?t.white:t.grayText}/>}]:[],{key:"response",label:b("network.detailTabs.response"),icon:r=><Ue color={r?t.white:t.grayText}/>}]}activeKey={D}onChange={r=>{Se(),Z(r)}}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
 
       
-      <We style={r.detailScroll}contentContainerStyle={{paddingHorizontal:6,paddingBottom:24}}showsVerticalScrollIndicator={!0}>
-        {H==="metadata"&&<>
-            <Ue status={e.status}statusColor={q(e.status)}duration={e.duration}size={Ve(e.response)}triggeredAt={Ee(e.startTime)}method={e.method}contentType={e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"]}url={e.url}/>
+      <Ce style={o.detailScroll}contentContainerStyle={{paddingHorizontal:6,paddingBottom:24}}showsVerticalScrollIndicator={!0}>
+        {D==="metadata"&&<>
+            <De status={e.status}statusColor={z(e.status)}duration={e.duration}size={Y(e.response)}triggeredAt={He(e.startTime)}method={e.method}contentType={e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"]}url={e.url}/>
 
-            {(()=>{const o=Ie.current.get(e.id)||e?.routeInfo;return!o||!o.path||o.path==="Navigators"?null:<Ae routeInfo={o}/>})()}
+            {(()=>{const r=oe.current.get(e.id)||e?.routeInfo;return!r||!r.path||r.path==="Navigators"?null:<Be routeInfo={r}/>})()}
 
-            {(e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"])?.includes("image/")?<T style={r.imagePreviewWrapper}>
-                    <Pe source={{uri:e.url}}style={r.imagePreview}resizeMode="contain"/>
-                    <X style={r.imageDownloadBtn}onPress={()=>L.openURL(e.url)}hitSlop={10}>
-                      <Xe color={t.purple}size={18}/>
-                    </X>
+            {(e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"])?.includes("image/")?<T style={o.imagePreviewWrapper}>
+                    <Te source={{uri:e.url}}style={o.imagePreview}resizeMode="contain"/>
+                    <K style={o.imageDownloadBtn}onPress={()=>$.openURL(e.url)}hitSlop={10}>
+                      <Ae color={t.purple}size={18}/>
+                    </K>
                   </T>:null}
           </>}
 
-        {H==="headers"&&<>
-            <T style={r.detailSearchRow}>
-              <T style={r.detailSearchBox}>
-                <M placeholder={k("network.searchHeaders")}placeholderTextColor={t.grayTextWeak}value={S}onChangeText={I}style={r.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
-                {S.length>0&&<O onPress={()=>I("")}hitSlop={10}style={{padding:8}}>
-                    <K color={t.grayTextWeak}size={14}/>
-                  </O>}
+        {D==="headers"&&<>
+            <T style={o.detailSearchRow}>
+              <T style={o.detailSearchBox}>
+                <L placeholder={b("network.searchHeaders")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={V}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                {k.length>0&&<P onPress={()=>V("")}hitSlop={10}style={{padding:8}}>
+                    <F color={t.grayTextWeak}size={14}/>
+                  </P>}
               </T>
             </T>
 
-            <Y title="Request Headers"headers={e.requestHeaders}search={S}resetKey={e.id}/>
-            <Y title="Response Headers"headers={e.responseHeaders}search={S}resetKey={e.id}/>
+            <J title="Request Headers"headers={e.requestHeaders}search={k}resetKey={e.id}/>
+            <J title="Response Headers"headers={e.responseHeaders}search={k}resetKey={e.id}/>
           </>}
 
-        {H==="request"&&e.request!=null&&<>
-              <T style={r.detailSearchRow}>
-                <T style={r.detailSearchBox}>
-                  <M placeholder={k("network.searchRequest")}placeholderTextColor={t.grayTextWeak}value={S}onChangeText={I}style={r.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
-                  {S.length>0&&<O onPress={()=>I("")}hitSlop={10}style={{padding:8}}>
-                      <K color={t.grayTextWeak}size={14}/>
-                    </O>}
+        {D==="request"&&e.request!=null&&<>
+              <T style={o.detailSearchRow}>
+                <T style={o.detailSearchBox}>
+                  <L placeholder={b("network.searchRequest")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={V}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                  {k.length>0&&<P onPress={()=>V("")}hitSlop={10}style={{padding:8}}>
+                      <F color={t.grayTextWeak}size={14}/>
+                    </P>}
                 </T>
               </T>
 
-              <T style={r.sectionContainer}>
-                <Z title={k("network.requestTitle")}value={e.request}expanded={$}onToggleExpand={()=>j(o=>!o)}showDiff={_!=null}isDiffing={F}onToggleDiff={()=>{De(o=>!o),!$&&!F&&j(!0)}}/>
-                {F?<Ce oldData={_}newData={e.request}forceOpen={$}/>:$?<Te data={e.request}search={S}/>:<T style={r.codeBlock}>
-                    <V style={[r.codeText,{color:t.grayTextWeak}]}>
-                      {k("network.bodyHidden")}
-                    </V>
+              <T style={o.sectionContainer}>
+                <_ title={b("network.requestTitle")}value={e.request}expanded={B}onToggleExpand={()=>U(r=>!r)}showDiff={E!=null}isDiffing={v}onToggleDiff={()=>{ee(r=>!r),!B&&!v&&U(!0)}}/>
+                {v?<Q oldData={E}newData={e.request}forceOpen={B}/>:B?<G data={e.request}search={k}/>:<T style={o.codeBlock}>
+                    <C style={[o.codeText,{color:t.grayTextWeak}]}>
+                      {b("network.bodyHidden")}
+                    </C>
                   </T>}
               </T>
             </>}
 
-        {H==="response"&&<>
-            <T style={r.detailSearchRow}>
-              <T style={r.detailSearchBox}>
-                <M placeholder={k("network.searchResponse")}placeholderTextColor={t.grayTextWeak}value={S}onChangeText={I}style={r.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
-                {S.length>0&&<O onPress={()=>I("")}hitSlop={10}style={{padding:8}}>
-                    <K color={t.grayTextWeak}size={14}/>
-                  </O>}
+        {D==="response"&&<>
+            <T style={o.detailSearchRow}>
+              <T style={o.detailSearchBox}>
+                <L placeholder={b("network.searchResponse")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={V}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                {k.length>0&&<P onPress={()=>V("")}hitSlop={10}style={{padding:8}}>
+                    <F color={t.grayTextWeak}size={14}/>
+                  </P>}
               </T>
             </T>
 
-            <T style={r.sectionContainer}>
-              <Z title={k("network.responseTitle")}value={e.response}expanded={P}onToggleExpand={()=>J(o=>!o)}showDiff={G!=null}isDiffing={U}onToggleDiff={()=>{ze(o=>!o),!P&&!U&&J(!0)}}/>
-              {U?<Ce oldData={G}newData={e.response}forceOpen={P}/>:P?<Te data={e.response}search={S}wrap/>:<T style={r.codeBlock}>
-                  <V style={[r.codeText,{color:t.grayTextWeak}]}>
-                    {k("network.bodyHidden")}
-                  </V>
+            <T style={o.sectionContainer}>
+              <_ title={b("network.responseTitle")}value={e.response}expanded={I}onToggleExpand={()=>A(r=>!r)}showDiff={M!=null}isDiffing={W}onToggleDiff={()=>{te(r=>!r),!I&&!W&&A(!0)}}/>
+              {W?<Q oldData={M}newData={e.response}forceOpen={I}/>:I?<G data={e.response}search={k}wrap/>:<T style={o.codeBlock}>
+                  <C style={[o.codeText,{color:t.grayTextWeak}]}>
+                    {b("network.bodyHidden")}
+                  </C>
                 </T>}
             </T>
           </>}
-      </We>
-    </T>:null});export default kt;
+      </Ce>
+    </T>:null});export default Ke;

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

@@ -1,11 +1,11 @@
-import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as Ce,Pressable as Y,ScrollView as Te,StyleSheet as we,Text as S,TouchableOpacity as L,View as T}from"react-native";import{useInspector as me}from"./InspectorContext";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{useTranslation as ke}from"../../i18n";import{METHOD_COLORS as Se}from"../../constants";import{FilterIcon as Be,CloseWhite as Pe,ClockIcon as K,CircleCheckIcon as Ie,CircleAlertIcon as X,CircleXIcon as Oe,LayersIcon as A,RepeatIcon as ze,ShieldAlertIcon as Ve,BoltIcon as Re,GlobeIcon as Fe,LockIcon as Le,UnlockIcon as We,RocketIcon as Ee,TurtleIcon as Me,HourglassIcon as Ne,PackageIcon as Ae}from"../NetworkIcons";import J from"../TouchableScale";export const DEFAULT_NETWORK_FILTERS={statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"},isNetworkFiltersDefault=I=>(I.statusCodes.has("all")||I.statusCodes.size===0)&&(I.methods.has("all")||I.methods.size===0)&&I.latency==="all"&&I.protocol==="all"&&I.sortBy==="time_desc",NetworkFilterModal=({visible:I,onClose:E,filters:R,onApply:Z,searchQuery:M=""})=>{const{t:De}=ke(),{logs:W}=me(),[r,F]=le(()=>({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)}));te(()=>{I&&F({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)})},[I,R]);const P=N(()=>{const e={all:W.length,"2xx":0,"3xx":0,"4xx":0,"5xx":0,failed:0},l={all:W.length};let C=0,g=0,O=0,v=0,_=0;for(const z of W){const V=typeof z.status=="number"?z.status:parseInt(String(z.status),10);z.status===0||z.status==null?e.failed=(e.failed||0)+1:isNaN(V)||(V>=200&&V<300?e["2xx"]=(e["2xx"]||0)+1:V>=300&&V<400?e["3xx"]=(e["3xx"]||0)+1:V>=400&&V<500?e["4xx"]=(e["4xx"]||0)+1:V>=500&&(e["5xx"]=(e["5xx"]||0)+1));const U=(z.method||"GET").toUpperCase();l[U]=(l[U]||0)+1;const G=z.duration||0;G<200?C++:G<=500?g++:O++,(z.url||"").toLowerCase().startsWith("https")?v++:_++}return{statusMap:e,methodMap:l,fastCount:C,normalCount:g,slowCount:O,httpsCount:v,httpCount:_}},[W]),D=N(()=>W.filter(e=>{if(!r.statusCodes.has("all")&&r.statusCodes.size>0){const g=typeof e.status=="number"?e.status:parseInt(String(e.status),10);let O=!1;if(r.statusCodes.has("failed")&&(e.status===0||e.status==null)&&(O=!0),r.statusCodes.has("2xx")&&!isNaN(g)&&g>=200&&g<300&&(O=!0),r.statusCodes.has("3xx")&&!isNaN(g)&&g>=300&&g<400&&(O=!0),r.statusCodes.has("4xx")&&!isNaN(g)&&g>=400&&g<500&&(O=!0),r.statusCodes.has("5xx")&&!isNaN(g)&&g>=500&&(O=!0),!O)return!1}if(!r.methods.has("all")&&r.methods.size>0){const g=(e.method||"GET").toUpperCase();if(!r.methods.has(g))return!1}const l=e.duration||0;if(r.latency==="fast"&&l>=200||r.latency==="normal"&&(l<200||l>500)||r.latency==="slow"&&l<=500)return!1;const C=(e.url||"").toLowerCase().startsWith("https");if(r.protocol==="https"&&!C||r.protocol==="http"&&C)return!1;if(M.trim().length>0){const g=M.toLowerCase();if(!(e.url||"").toLowerCase().includes(g))return!1}return!0}).length,[W,r,M]),Q=e=>{F(l=>{const C=new Set(l.statusCodes);return e==="all"?{...l,statusCodes:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,statusCodes:C})})},H=e=>{F(l=>{const C=new Set(l.methods);return e==="all"?{...l,methods:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,methods:C})})},ee=()=>{F({statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"})},oe=()=>{Z(r),E()},$=N(()=>{let e=0;return!r.statusCodes.has("all")&&r.statusCodes.size>0&&(e+=r.statusCodes.size),!r.methods.has("all")&&r.methods.size>0&&(e+=r.methods.size),r.latency!=="all"&&e++,r.protocol!=="all"&&e++,r.sortBy!=="time_desc"&&e++,e},[r]);return<Ce visible={I}transparent animationType="fade"onRequestClose={E}>
+import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as Ce,Pressable as Y,ScrollView as Te,StyleSheet as we,Text as S,TouchableOpacity as L,View as T}from"react-native";import{useInspector as ke}from"./InspectorContext";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{METHOD_COLORS as me}from"../../constants";import{FilterIcon as Se,CloseWhite as Be,ClockIcon as K,CircleCheckIcon as Pe,CircleAlertIcon as X,CircleXIcon as Ie,LayersIcon as A,RepeatIcon as Oe,ShieldAlertIcon as ze,BoltIcon as Ve,GlobeIcon as Re,LockIcon as Fe,UnlockIcon as Le,RocketIcon as We,TurtleIcon as Ee,HourglassIcon as Me,PackageIcon as Ne}from"../NetworkIcons";import J from"../TouchableScale";export const DEFAULT_NETWORK_FILTERS={statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"},isNetworkFiltersDefault=I=>(I.statusCodes.has("all")||I.statusCodes.size===0)&&(I.methods.has("all")||I.methods.size===0)&&I.latency==="all"&&I.protocol==="all"&&I.sortBy==="time_desc",NetworkFilterModal=({visible:I,onClose:E,filters:R,onApply:Z,searchQuery:M=""})=>{const{logs:W}=ke(),[r,F]=le(()=>({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)}));te(()=>{I&&F({...R,statusCodes:new Set(R.statusCodes),methods:new Set(R.methods)})},[I,R]);const P=N(()=>{const e={all:W.length,"2xx":0,"3xx":0,"4xx":0,"5xx":0,failed:0},l={all:W.length};let C=0,g=0,O=0,v=0,_=0;for(const z of W){const V=typeof z.status=="number"?z.status:parseInt(String(z.status),10);z.status===0||z.status==null?e.failed=(e.failed||0)+1:isNaN(V)||(V>=200&&V<300?e["2xx"]=(e["2xx"]||0)+1:V>=300&&V<400?e["3xx"]=(e["3xx"]||0)+1:V>=400&&V<500?e["4xx"]=(e["4xx"]||0)+1:V>=500&&(e["5xx"]=(e["5xx"]||0)+1));const U=(z.method||"GET").toUpperCase();l[U]=(l[U]||0)+1;const G=z.duration||0;G<200?C++:G<=500?g++:O++,(z.url||"").toLowerCase().startsWith("https")?v++:_++}return{statusMap:e,methodMap:l,fastCount:C,normalCount:g,slowCount:O,httpsCount:v,httpCount:_}},[W]),D=N(()=>W.filter(e=>{if(!r.statusCodes.has("all")&&r.statusCodes.size>0){const g=typeof e.status=="number"?e.status:parseInt(String(e.status),10);let O=!1;if(r.statusCodes.has("failed")&&(e.status===0||e.status==null)&&(O=!0),r.statusCodes.has("2xx")&&!isNaN(g)&&g>=200&&g<300&&(O=!0),r.statusCodes.has("3xx")&&!isNaN(g)&&g>=300&&g<400&&(O=!0),r.statusCodes.has("4xx")&&!isNaN(g)&&g>=400&&g<500&&(O=!0),r.statusCodes.has("5xx")&&!isNaN(g)&&g>=500&&(O=!0),!O)return!1}if(!r.methods.has("all")&&r.methods.size>0){const g=(e.method||"GET").toUpperCase();if(!r.methods.has(g))return!1}const l=e.duration||0;if(r.latency==="fast"&&l>=200||r.latency==="normal"&&(l<200||l>500)||r.latency==="slow"&&l<=500)return!1;const C=(e.url||"").toLowerCase().startsWith("https");if(r.protocol==="https"&&!C||r.protocol==="http"&&C)return!1;if(M.trim().length>0){const g=M.toLowerCase();if(!(e.url||"").toLowerCase().includes(g))return!1}return!0}).length,[W,r,M]),Q=e=>{F(l=>{const C=new Set(l.statusCodes);return e==="all"?{...l,statusCodes:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,statusCodes:C})})},H=e=>{F(l=>{const C=new Set(l.methods);return e==="all"?{...l,methods:new Set(["all"])}:(C.delete("all"),C.has(e)?(C.delete(e),C.size===0&&C.add("all")):C.add(e),{...l,methods:C})})},ee=()=>{F({statusCodes:new Set(["all"]),methods:new Set(["all"]),latency:"all",protocol:"all",sortBy:"time_desc"})},oe=()=>{Z(r),E()},$=N(()=>{let e=0;return!r.statusCodes.has("all")&&r.statusCodes.size>0&&(e+=r.statusCodes.size),!r.methods.has("all")&&r.methods.size>0&&(e+=r.methods.size),r.latency!=="all"&&e++,r.protocol!=="all"&&e++,r.sortBy!=="time_desc"&&e++,e},[r]);return<Ce visible={I}transparent animationType="fade"onRequestClose={E}>
       <Y style={o.overlay}onPress={E}>
         <Y style={o.modalCard}onPress={e=>e.stopPropagation()}>
           
           <T style={o.header}>
             <T style={o.headerLeft}>
               <T style={o.iconCircle}>
-                <Be size={16}color={t.purple}/>
+                <Se size={16}color={t.purple}/>
               </T>
               <T>
                 <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
@@ -18,7 +18,7 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
               </T>
             </T>
             <L onPress={E}hitSlop={10}style={o.closeBtn}>
-              <Pe size={14}color={t.grayText}/>
+              <Be size={14}color={t.grayText}/>
             </L>
           </T>
 
@@ -27,7 +27,7 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
             <T style={o.section}>
               <S style={o.sectionTitle}>HTTP STATUS CODE</S>
               <T style={o.chipsWrap}>
-                {[{key:"all",label:"All Statuses",color:t.purple,icon:A,count:P.statusMap.all},{key:"2xx",label:"2xx Success",color:t.greenColor,icon:Ie,count:P.statusMap["2xx"]||0},{key:"3xx",label:"3xx Redirect",color:t.warningIconGold,icon:ze,count:P.statusMap["3xx"]||0},{key:"4xx",label:"4xx Client Error",color:t.darkOrange,icon:X,count:P.statusMap["4xx"]||0},{key:"5xx",label:"5xx Server Error",color:t.errorColor,icon:Oe,count:P.statusMap["5xx"]||0},{key:"failed",label:"Network Failed / 0",color:t.errorColor,icon:Ve,count:P.statusMap.failed||0}].map(e=>{const l=r.statusCodes.has(e.key),C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>Q(e.key)}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                {[{key:"all",label:"All Statuses",color:t.purple,icon:A,count:P.statusMap.all},{key:"2xx",label:"2xx Success",color:t.greenColor,icon:Pe,count:P.statusMap["2xx"]||0},{key:"3xx",label:"3xx Redirect",color:t.warningIconGold,icon:Oe,count:P.statusMap["3xx"]||0},{key:"4xx",label:"4xx Client Error",color:t.darkOrange,icon:X,count:P.statusMap["4xx"]||0},{key:"5xx",label:"5xx Server Error",color:t.errorColor,icon:Ie,count:P.statusMap["5xx"]||0},{key:"failed",label:"Network Failed / 0",color:t.errorColor,icon:ze,count:P.statusMap.failed||0}].map(e=>{const l=r.statusCodes.has(e.key),C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>Q(e.key)}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
                       <C size={13}color={l?e.color:t.grayTextWeak}/>
                       <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
                         {e.label}
@@ -57,7 +57,7 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
                   </T>
                 </L>
 
-                {["GET","POST","PUT","DELETE","PATCH","QUERY","OPTIONS","HEAD"].map(e=>{const l=r.methods.has(e),C=Se[e]||t.grayText,g=P.methodMap[e]||0;return<L key={e}activeOpacity={.7}onPress={()=>H(e)}style={[o.chip,l&&{backgroundColor:`${C}18`,borderColor:C}]}>
+                {["GET","POST","PUT","DELETE","PATCH","QUERY","OPTIONS","HEAD"].map(e=>{const l=r.methods.has(e),C=me[e]||t.grayText,g=P.methodMap[e]||0;return<L key={e}activeOpacity={.7}onPress={()=>H(e)}style={[o.chip,l&&{backgroundColor:`${C}18`,borderColor:C}]}>
                       <T style={[o.methodDot,{backgroundColor:C}]}/>
                       <S style={[o.chipLabel,l&&{color:C,fontFamily:B.interBold}]}>
                         {e}
@@ -75,7 +75,7 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
             <T style={o.section}>
               <S style={o.sectionTitle}>LATENCY & SPEED</S>
               <T style={o.chipsWrap}>
-                {[{key:"all",label:"All Speeds",color:t.purple,icon:A},{key:"fast",label:"Fast (<200ms)",color:t.greenColor,icon:Re,count:P.fastCount},{key:"normal",label:"Normal (200-500ms)",color:t.skyBlue,icon:K,count:P.normalCount},{key:"slow",label:"Slow (>500ms)",color:t.errorColor,icon:X,count:P.slowCount}].map(e=>{const l=r.latency===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,latency:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                {[{key:"all",label:"All Speeds",color:t.purple,icon:A},{key:"fast",label:"Fast (<200ms)",color:t.greenColor,icon:Ve,count:P.fastCount},{key:"normal",label:"Normal (200-500ms)",color:t.skyBlue,icon:K,count:P.normalCount},{key:"slow",label:"Slow (>500ms)",color:t.errorColor,icon:X,count:P.slowCount}].map(e=>{const l=r.latency===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,latency:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
                       <C size={13}color={l?e.color:t.grayTextWeak}/>
                       <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
                         {e.label}
@@ -93,7 +93,7 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
             <T style={o.section}>
               <S style={o.sectionTitle}>PROTOCOL</S>
               <T style={o.chipsWrap}>
-                {[{key:"all",label:"All Protocols",color:t.purple,icon:Fe},{key:"https",label:"HTTPS Secure",color:t.mintGreenText,icon:Le,count:P.httpsCount},{key:"http",label:"HTTP Insecure",color:t.amber700,icon:We,count:P.httpCount}].map(e=>{const l=r.protocol===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,protocol:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
+                {[{key:"all",label:"All Protocols",color:t.purple,icon:Re},{key:"https",label:"HTTPS Secure",color:t.mintGreenText,icon:Fe,count:P.httpsCount},{key:"http",label:"HTTP Insecure",color:t.amber700,icon:Le,count:P.httpCount}].map(e=>{const l=r.protocol===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,protocol:e.key}))}style={[o.chip,l&&{backgroundColor:`${e.color}15`,borderColor:e.color}]}>
                       <C size={13}color={l?e.color:t.grayTextWeak}/>
                       <S style={[o.chipLabel,l&&{color:e.color,fontFamily:B.interBold}]}>
                         {e.label}
@@ -111,7 +111,7 @@ import{useEffect as te,useMemo as N,useState as le}from"react";import{Modal as C
             <T style={o.section}>
               <S style={o.sectionTitle}>SORT BY</S>
               <T style={o.chipsWrap}>
-                {[{key:"time_desc",label:"Newest First (Default)",icon:K},{key:"time_asc",label:"Oldest First",icon:Ne},{key:"duration_desc",label:"Slowest Response",icon:Me},{key:"duration_asc",label:"Fastest Response",icon:Ee},{key:"size_desc",label:"Largest Response Size",icon:Ae}].map(e=>{const l=r.sortBy===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,sortBy:e.key}))}style={[o.chip,l&&{backgroundColor:`${t.purple}15`,borderColor:t.purple}]}>
+                {[{key:"time_desc",label:"Newest First (Default)",icon:K},{key:"time_asc",label:"Oldest First",icon:Me},{key:"duration_desc",label:"Slowest Response",icon:Ee},{key:"duration_asc",label:"Fastest Response",icon:We},{key:"size_desc",label:"Largest Response Size",icon:Ne}].map(e=>{const l=r.sortBy===e.key,C=e.icon;return<L key={e.key}activeOpacity={.7}onPress={()=>F(g=>({...g,sortBy:e.key}))}style={[o.chip,l&&{backgroundColor:`${t.purple}15`,borderColor:t.purple}]}>
                       <C size={13}color={l?t.purple:t.grayTextWeak}/>
                       <S style={[o.chipLabel,l&&{color:t.purple,fontFamily:B.interBold}]}>
                         {e.label}