react-native-inapp-inspector 2.5.13 → 2.5.14

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

@@ -1,4 +1,4 @@
-import{useCallback as de,useEffect as Oe,useMemo as G,useRef as We,useState as R}from"react";import{Modal as Ct,View as T,Text as C,TextInput as Ne,StyleSheet as Me,Pressable as Tt,Animated as N,Easing as _,ScrollView as St,Share as qe}from"react-native";import D from"../TouchableScale";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{ExportIcon as Te,ShareIcon as Bt,SaveIcon as Rt,CopyIcon as Ft,CloseWhite as It,CircleCheckIcon as $e,CircleXIcon as Vt,ClockIcon as At,RequestIcon as zt,ResponseIcon as Dt,LayersIcon as Ue,FilterIcon as Ht,CheckIcon as Pt,ZapIcon as Et,PenIcon as Lt}from"../NetworkIcons";import{triggerNativeHaptic as L,writeNativeExportFile as Ge,shareNativeFile as Ke}from"../../native/NativeInspector";import{copyToClipboard as Ot,showToast as X}from"../../helpers";import{formatNetworkLogsExport as Wt,estimateNetworkLogsExportSize as Nt,generateNetworkLogsFilename as Mt}from"../../helpers/shareFormatter";import{useTranslation as qt}from"../../i18n";export const NetworkExportModal=({visible:ce,onClose:ee,filteredLogs:te,allLogs:oe})=>{const{t:k}=qt(),[$,re]=R("config"),[M,Se]=R("filtered"),[q,ke]=R("all"),[H,ge]=R("all"),[ue,Be]=R("50"),[U,Re]=R(""),[P,ve]=R("txt"),[pe,Fe]=R(!1),[me,Ie]=R(!1),[ye,Ve]=R(!1),[fe,Ae]=R(!1),[he,ze]=R(!1),[xe,De]=R(!1),[we,He]=R(!1),[Qe,be]=R(0),[Je,Ce]=R(0),[O,Pe]=R(""),[E,Ee]=R(""),[Xe,Le]=R(0),K=We(new N.Value(0)).current,ie=We(new N.Value(1)).current,j=G(()=>{if(!U||U.trim().length===0)return{isValid:!0,error:null,regex:null};try{return{isValid:!0,error:null,regex:new RegExp(U.trim(),"i")}}catch(o){return{isValid:!1,error:o?.message||"Invalid pattern",regex:null}}},[U]),ne=G(()=>({includeRequestHeaders:pe,includeRequestBody:me,includeResponseHeaders:ye,includeResponseBody:fe,includeCurlCommand:he,includeTimestamps:xe,includeAppInfo:we,ignorePattern:H==="custom"&&j.isValid?U.trim():void 0}),[pe,me,ye,fe,he,xe,we,H,j.isValid,U]);Oe(()=>{if($==="progress"){const o=N.loop(N.sequence([N.timing(ie,{toValue:1.05,duration:600,easing:_.inOut(_.ease),useNativeDriver:!0}),N.timing(ie,{toValue:1,duration:600,easing:_.inOut(_.ease),useNativeDriver:!0})]));return o.start(),()=>o.stop()}},[$,ie]),Oe(()=>{ce&&(re("config"),ge("all"),ke("all"),ve("txt"),Be("50"),Re(""),Fe(!1),Ie(!1),Ve(!1),Ae(!1),ze(!1),De(!1),He(!1),be(0),Ce(0),Pe(""),Ee(""),Le(0),K.setValue(0))},[ce,K]);const Q=G(()=>M==="filtered"?te:oe,[M,te,oe]),J=G(()=>{let o=0,B=0,F=0,W=0,I=0;return Q.forEach(V=>{const A=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(A)&&A>=400?B++:!isNaN(A)&&A>=200&&A<400&&o++,(V.duration||0)>=500&&F++;const se=(V.method||"").toUpperCase();se==="POST"&&W++,se==="GET"&&I++}),{all:Q.length,success:o,error:B,slow:F,post:W,get:I}},[Q]),Y=G(()=>q==="all"?Q:Q.filter(o=>{const B=typeof o.status=="number"?o.status:parseInt(String(o.status),10),F=o.status===0||o.status==null||!isNaN(B)&&B>=400,W=!isNaN(B)&&B>=200&&B<400,I=(o.duration||0)>=500,V=(o.method||"").toUpperCase();return q==="success"?W:q==="error"?F:q==="slow"?I:q==="POST"?V==="POST":q==="GET"?V==="GET":!0}),[Q,q]),{selectedLogs:z,ignoredCount:le}=G(()=>{if(Y.length===0)return{selectedLogs:[],ignoredCount:0};let B=Y,F=0;if(H==="custom"&&j.regex){const I=j.regex,V=B.length;B=B.filter(A=>{const se=A.url||"",ot=A.method||"",rt=A.client||"",it=A.request?JSON.stringify(A.request):"",nt=A.response?JSON.stringify(A.response):"";return!I.test(se)&&!I.test(ot)&&!I.test(rt)&&!I.test(it)&&!I.test(nt)}),F=V-B.length}let W=B.length;if(H==="all")W=B.length;else if(H==="custom"){const I=parseInt(ue,10);W=isNaN(I)||I<=0?B.length:Math.min(I,B.length)}return{selectedLogs:B.slice(-W),ignoredCount:F}},[Y,H,ue,j.regex]),ae=G(()=>Nt(z,P,ne),[z,P,ne]),Z=o=>o<=0?"0 KB":o<1024?`${(o/1024).toFixed(2)} KB`:o<1024*1024?`${(o/1024).toFixed(1)} KB`:`${(o/(1024*1024)).toFixed(2)} MB`,Ye=de(()=>{if(z.length===0){X(k("network.noLogsToExport","No API requests available to export"));return}L("medium"),re("progress"),be(0),Ce(0),K.setValue(0);const o=z.length,B=Math.max(1,Math.floor(o/10));let F=0;const W=setInterval(()=>{F=Math.min(F+B,o);const I=F/o;be(Math.round(I*100)),Ce(F),N.timing(K,{toValue:I,duration:120,easing:_.linear,useNativeDriver:!1}).start(),F>=o&&(clearInterval(W),setTimeout(()=>{const V=Wt(z,P,ne),A=Mt(P);Pe(V),Ee(A),Le(V.length),re("complete"),L("heavy")},180))},45)},[z,P,ne,K,k]),Ze=de(async()=>{if(O){L("light");try{const o=await Ge(E,O);if(o&&await Ke(o,P==="json"?"application/json":"text/plain",E))return;await qe.share({title:E,message:O,url:o||void 0},{dialogTitle:`Share ${E}`,subject:E})}catch(o){o?.message!=="User did not share"&&X(o?.message||"Failed to open share sheet")}}},[O,E,P]),_e=de(async()=>{if(O){L("medium");try{const o=await Ge(E,O);if(o&&await Ke(o,P==="json"?"application/json":"text/plain",`Save ${E}`)){X(k("network.savePromptOpened","Opened save to disk dialog"));return}await qe.share({title:`Save ${E}`,message:O,url:o||void 0},{dialogTitle:`Save to Disk (${E})`,subject:E}),X(k("network.savePromptOpened","Opened save to disk dialog"))}catch(o){o?.message!=="User did not share"&&X(o?.message||"Save error")}}},[O,E,P,k]),et=de(()=>{O&&(L("light"),Ot(O,"API Network Logs"),X(k("network.copiedLogs","API requests copied to clipboard!")))},[O,k]),tt=te.length!==oe.length;return<Ct visible={ce}transparent animationType="slide"onRequestClose={ee}>
+import{useCallback as de,useEffect as Oe,useMemo as G,useRef as We,useState as R}from"react";import{Modal as Ct,View as T,Text as C,TextInput as Ne,StyleSheet as Me,Pressable as Tt,Animated as N,Easing as _,ScrollView as St,Share as qe}from"react-native";import D from"../TouchableScale";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{ExportIcon as Te,ShareIcon as Bt,SaveIcon as Rt,CopyIcon as Ft,CloseWhite as It,CircleCheckIcon as $e,CircleXIcon as Vt,ClockIcon as At,RequestIcon as zt,ResponseIcon as Dt,LayersIcon as Ue,FilterIcon as Ht,CheckIcon as Pt,ZapIcon as Et,PenIcon as Lt}from"../NetworkIcons";import{triggerNativeHaptic as L,writeNativeExportFile as Ge,shareNativeFile as Ke}from"../../native/NativeInspector";import{copyToClipboard as Ot,showToast as X}from"../../helpers";import{formatNetworkLogsExport as Wt,estimateNetworkLogsExportSize as Nt,generateNetworkLogsFilename as Mt}from"../../helpers/shareFormatter";import{useTranslation as qt}from"../../i18n";export const NetworkExportModal=({visible:ce,onClose:ee,filteredLogs:te,allLogs:oe})=>{const{t:k}=qt(),[$,re]=R("config"),[M,Se]=R("filtered"),[q,ke]=R("all"),[H,ge]=R("all"),[ue,Be]=R("50"),[U,Re]=R(""),[P,ve]=R("txt"),[pe,Fe]=R(!0),[me,Ie]=R(!0),[ye,Ve]=R(!0),[fe,Ae]=R(!0),[he,ze]=R(!0),[xe,De]=R(!0),[we,He]=R(!0),[Qe,be]=R(0),[Je,Ce]=R(0),[O,Pe]=R(""),[E,Ee]=R(""),[Xe,Le]=R(0),K=We(new N.Value(0)).current,ie=We(new N.Value(1)).current,j=G(()=>{if(!U||U.trim().length===0)return{isValid:!0,error:null,regex:null};try{return{isValid:!0,error:null,regex:new RegExp(U.trim(),"i")}}catch(o){return{isValid:!1,error:o?.message||"Invalid pattern",regex:null}}},[U]),ne=G(()=>({includeRequestHeaders:pe,includeRequestBody:me,includeResponseHeaders:ye,includeResponseBody:fe,includeCurlCommand:he,includeTimestamps:xe,includeAppInfo:we,ignorePattern:H==="custom"&&j.isValid?U.trim():void 0}),[pe,me,ye,fe,he,xe,we,H,j.isValid,U]);Oe(()=>{if($==="progress"){const o=N.loop(N.sequence([N.timing(ie,{toValue:1.05,duration:600,easing:_.inOut(_.ease),useNativeDriver:!0}),N.timing(ie,{toValue:1,duration:600,easing:_.inOut(_.ease),useNativeDriver:!0})]));return o.start(),()=>o.stop()}},[$,ie]),Oe(()=>{ce&&(re("config"),ge("all"),ke("all"),ve("txt"),Be("50"),Re(""),Fe(!1),Ie(!1),Ve(!1),Ae(!1),ze(!1),De(!1),He(!1),be(0),Ce(0),Pe(""),Ee(""),Le(0),K.setValue(0))},[ce,K]);const Q=G(()=>M==="filtered"?te:oe,[M,te,oe]),J=G(()=>{let o=0,B=0,F=0,W=0,I=0;return Q.forEach(V=>{const A=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(A)&&A>=400?B++:!isNaN(A)&&A>=200&&A<400&&o++,(V.duration||0)>=500&&F++;const se=(V.method||"").toUpperCase();se==="POST"&&W++,se==="GET"&&I++}),{all:Q.length,success:o,error:B,slow:F,post:W,get:I}},[Q]),Y=G(()=>q==="all"?Q:Q.filter(o=>{const B=typeof o.status=="number"?o.status:parseInt(String(o.status),10),F=o.status===0||o.status==null||!isNaN(B)&&B>=400,W=!isNaN(B)&&B>=200&&B<400,I=(o.duration||0)>=500,V=(o.method||"").toUpperCase();return q==="success"?W:q==="error"?F:q==="slow"?I:q==="POST"?V==="POST":q==="GET"?V==="GET":!0}),[Q,q]),{selectedLogs:z,ignoredCount:le}=G(()=>{if(Y.length===0)return{selectedLogs:[],ignoredCount:0};let B=Y,F=0;if(H==="custom"&&j.regex){const I=j.regex,V=B.length;B=B.filter(A=>{const se=A.url||"",ot=A.method||"",rt=A.client||"",it=A.request?JSON.stringify(A.request):"",nt=A.response?JSON.stringify(A.response):"";return!I.test(se)&&!I.test(ot)&&!I.test(rt)&&!I.test(it)&&!I.test(nt)}),F=V-B.length}let W=B.length;if(H==="all")W=B.length;else if(H==="custom"){const I=parseInt(ue,10);W=isNaN(I)||I<=0?B.length:Math.min(I,B.length)}return{selectedLogs:B.slice(-W),ignoredCount:F}},[Y,H,ue,j.regex]),ae=G(()=>Nt(z,P,ne),[z,P,ne]),Z=o=>o<=0?"0 KB":o<1024?`${(o/1024).toFixed(2)} KB`:o<1024*1024?`${(o/1024).toFixed(1)} KB`:`${(o/(1024*1024)).toFixed(2)} MB`,Ye=de(()=>{if(z.length===0){X(k("network.noLogsToExport","No API requests available to export"));return}L("medium"),re("progress"),be(0),Ce(0),K.setValue(0);const o=z.length,B=Math.max(1,Math.floor(o/10));let F=0;const W=setInterval(()=>{F=Math.min(F+B,o);const I=F/o;be(Math.round(I*100)),Ce(F),N.timing(K,{toValue:I,duration:120,easing:_.linear,useNativeDriver:!1}).start(),F>=o&&(clearInterval(W),setTimeout(()=>{const V=Wt(z,P,ne),A=Mt(P);Pe(V),Ee(A),Le(V.length),re("complete"),L("heavy")},180))},45)},[z,P,ne,K,k]),Ze=de(async()=>{if(O){L("light");try{const o=await Ge(E,O);if(o&&await Ke(o,P==="json"?"application/json":"text/plain",E))return;await qe.share({title:E,message:O,url:o||void 0},{dialogTitle:`Share ${E}`,subject:E})}catch(o){o?.message!=="User did not share"&&X(o?.message||"Failed to open share sheet")}}},[O,E,P]),_e=de(async()=>{if(O){L("medium");try{const o=await Ge(E,O);if(o&&await Ke(o,P==="json"?"application/json":"text/plain",`Save ${E}`)){X(k("network.savePromptOpened","Opened save to disk dialog"));return}await qe.share({title:`Save ${E}`,message:O,url:o||void 0},{dialogTitle:`Save to Disk (${E})`,subject:E}),X(k("network.savePromptOpened","Opened save to disk dialog"))}catch(o){o?.message!=="User did not share"&&X(o?.message||"Save error")}}},[O,E,P,k]),et=de(()=>{O&&(L("light"),Ot(O,"API Network Logs"),X(k("network.copiedLogs","API requests copied to clipboard!")))},[O,k]),tt=te.length!==oe.length;return<Ct visible={ce}transparent animationType="slide"onRequestClose={ee}>
       <T style={e.overlay}>
         <Tt style={e.backdrop}onPress={ee}/>
 

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

@@ -1,99 +1,99 @@
-import H,{useCallback as ge,useMemo as D,useRef as We}from"react";import{FlatList as _e,Pressable as Qe,ScrollView as Ue,Text as I,TextInput as Ke,View as S}from"react-native";import{useInspector as Xe}from"./InspectorContext";import $ from"../TouchableScale";import Le from"../AnimatedEntrance";import Je from"../DomainHeader";import Ye from"../LogCard";import Ze from"../EmptyState";import So from"../EndOfListFooter";import Co from"./NetworkFilterModal";import To from"./NetworkExportModal";import C from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Re}from"../../constants";import{isUrlHidden as xo}from"../../helpers";import{useTranslation as zo}from"../../i18n";import{SearchIcon as Io,ClearIcon as Vo,TrashIcon as Fo,SortArrowIcon as Lo,FilterIcon as Ro,ChevronIcon as Bo,CheckIcon as Po,CircleCheckIcon as Eo,CircleXIcon as $o,LayersIcon as Be,ClockIcon as Mo,RequestIcon as Ao,ResponseIcon as Do,AtomIcon as No,ExportIcon as Oo}from"../NetworkIcons";const vo=H.memo(()=>{const{groupedData:U,loadMoreSection:me,search:F,setSearch:K,setSearchScope:he,quickFilter:X,setQuickFilter:de,handleDelete:Pe,isGroupByPageEnabled:q,setIsGroupByPageEnabled:Ee,selectedLogs:J,sortOrder:$e,setSortOrder:Y,statusFilters:L,setStatusFilters:G,methodFilters:R,setMethodFilters:W,latencyFilter:N,setLatencyFilter:Z,protocolFilter:O,setProtocolFilter:ee,networkSortBy:v,setNetworkSortBy:oe,filteredLogs:B,logs:te,hiddenUrlPatterns:re,toggleSectionFilter:fe,toggleSectionCollapse:ye,minStart:we,totalRange:Se,newLogIds:Ce,toggleSelect:be,setSelected:Te,maxNetworkLogs:ce}=Xe(),{t:_}=zo(),xe=We(null),[Me,ze]=H.useState(!1),[Ae,Ie]=H.useState(!1),[Ve,ke]=H.useState(!1),[le,Fe]=H.useState(ce||50),ie=!!(F&&F.trim().length>0),P=q&&!ie;H.useEffect(()=>{Fe(ce||50),ie&&xe.current?.scrollToOffset({offset:0,animated:!1})},[F,X,ce,ie]);const ue=D(()=>P?U:U.slice(0,le),[P,U,le]),De=ge(e=>e?.id?String(e.id):"",[]),M=D(()=>L.size>0&&!L.has("all")||R.size>0&&!R.has("all")||N!=="all"||O!=="all"||v!=="time_desc",[L,R,N,O,v]),Ne=D(()=>{let e=0;return L.size>0&&!L.has("all")&&(e+=L.size),R.size>0&&!R.has("all")&&(e+=R.size),N!=="all"&&e++,O!=="all"&&e++,v!=="time_desc"&&e++,e},[L,R,N,O,v]),Oe=D(()=>({statusCodes:L.size>0?new Set(L):new Set(["all"]),methods:R.size>0?new Set(R):new Set(["all"]),latency:N,protocol:O,sortBy:v}),[L,R,N,O,v]),ve=ge(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?G(new Set):G(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?W(new Set):W(new Set([...e.methods].map(T=>T))),Z(e.latency||"all"),ee(e.protocol||"all"),oe(e.sortBy||"time_desc"),e.sortBy==="time_asc"?Y("oldest"):Y("newest")},[G,W,Z,ee,oe,Y]),j=D(()=>!re||re.length===0?te:te.filter(e=>!xo(e.url,re)),[te,re]),E=D(()=>{let e=0,T=0,x=0,z=0,Q=0,ae=0;return j.forEach(V=>{const b=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(b)&&b>=400?e++:!isNaN(b)&&b>=200&&b<400&&T++,(V.duration||0)>=500&&x++;const se=(V.method||"").toUpperCase();se==="POST"&&z++,se==="GET"&&Q++;const A=(V.url||"").toLowerCase(),ne=(V.client||"").toLowerCase();(A.includes("graphql")||ne.includes("graphql")||ne.includes("apollo"))&&ae++}),{all:j.length,errors:e,success:T,slow:x,post:z,get:Q,graphql:ae}},[j]),He=D(()=>[{id:"all",label:"All",count:E.all,color:o.purple},{id:"errors",label:"Errors",count:E.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:E.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:E.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:E.post,color:Re.POST||o.blue500},{id:"GET",label:"GET",count:E.get,color:Re.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:E.graphql,color:o.graphqlPink}],[E]),qe=ge(({item:e,index:T})=>{if(e.type==="header")return<Le index={T}distance={8}>
-            <Je pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={fe}isCollapsed={e.isCollapsed}onToggleCollapse={ye}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </Le>;if(e.type==="loadMore"){const{pageName:V,color:b,remainingCount:se,totalCount:A,loadedCount:ne,loadMoreStep:pe,hasMore:Ge}=e;return<S style={[C.treeNodeRow,C.treeNodeRowLast]}>
-            <S style={C.treeLines}>
-              <S style={[C.modernTreeLine,{borderColor:b},C.modernTreeLineLast]}/>
+import q,{useCallback as ne,useMemo as D,useRef as We}from"react";import{FlatList as _e,Pressable as Qe,ScrollView as Ue,Text as V,TextInput as Ke,View as S}from"react-native";import{useInspector as Xe}from"./InspectorContext";import $ from"../TouchableScale";import Fe from"../AnimatedEntrance";import Je from"../DomainHeader";import Ye from"../LogCard";import Ze from"../EmptyState";import So from"../EndOfListFooter";import Co from"./NetworkFilterModal";import To from"./NetworkExportModal";import b from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Le}from"../../constants";import{isUrlHidden as xo}from"../../helpers";import{useTranslation as zo}from"../../i18n";import{SearchIcon as Vo,ClearIcon as Io,TrashIcon as Fo,SortArrowIcon as Lo,FilterIcon as Ro,ChevronIcon as Bo,CheckIcon as Po,CircleCheckIcon as Eo,CircleXIcon as $o,LayersIcon as Re,ClockIcon as Mo,RequestIcon as Ao,ResponseIcon as Do,AtomIcon as No,ExportIcon as Oo}from"../NetworkIcons";const vo=q.memo(()=>{const{groupedData:K,loadMoreSection:pe,search:I,setSearch:X,setSearchScope:ge,quickFilter:J,setQuickFilter:de,handleDelete:Be,isGroupByPageEnabled:G,setIsGroupByPageEnabled:Pe,selectedLogs:Y,sortOrder:Ee,setSortOrder:Z,statusFilters:F,setStatusFilters:W,methodFilters:L,setMethodFilters:_,latencyFilter:N,setLatencyFilter:ee,protocolFilter:O,setProtocolFilter:oe,networkSortBy:v,setNetworkSortBy:te,filteredLogs:R,logs:re,hiddenUrlPatterns:le,toggleSectionFilter:he,toggleSectionCollapse:me,minStart:fe,totalRange:ye,newLogIds:we,toggleSelect:Se,setSelected:Ce,maxNetworkLogs:ce}=Xe(),{t:j}=zo(),be=We(null),[$e,Te]=q.useState(!1),[Me,xe]=q.useState(!1),[ze,Ve]=q.useState(!1),[ie,ke]=q.useState(ce||50),ae=!!(I&&I.trim().length>0),B=G&&!ae;q.useEffect(()=>{ke(ce||50),ae&&be.current?.scrollToOffset({offset:0,animated:!1})},[I,J,ce,ae]);const Ae=D(()=>B?K:K.slice(0,ie),[B,K,ie]),De=ne(e=>e?.id?String(e.id):"",[]),M=D(()=>F.size>0&&!F.has("all")||L.size>0&&!L.has("all")||N!=="all"||O!=="all"||v!=="time_desc",[F,L,N,O,v]),Ne=D(()=>{let e=0;return F.size>0&&!F.has("all")&&(e+=F.size),L.size>0&&!L.has("all")&&(e+=L.size),N!=="all"&&e++,O!=="all"&&e++,v!=="time_desc"&&e++,e},[F,L,N,O,v]),Oe=D(()=>({statusCodes:F.size>0?new Set(F):new Set(["all"]),methods:L.size>0?new Set(L):new Set(["all"]),latency:N,protocol:O,sortBy:v}),[F,L,N,O,v]),ve=ne(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?W(new Set):W(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?_(new Set):_(new Set([...e.methods].map(T=>T))),ee(e.latency||"all"),oe(e.protocol||"all"),te(e.sortBy||"time_desc"),e.sortBy==="time_asc"?Z("oldest"):Z("newest")},[W,_,ee,oe,te,Z]),Q=D(()=>!le||le.length===0?re:re.filter(e=>!xo(e.url,le)),[re,le]),P=D(()=>{let e=0,T=0,x=0,z=0,U=0,se=0;return Q.forEach(C=>{const A=typeof C.status=="number"?C.status:parseInt(String(C.status),10);C.status===0||C.status==null||!isNaN(A)&&A>=400?e++:!isNaN(A)&&A>=200&&A<400&&T++,(C.duration||0)>=500&&x++;const E=(C.method||"").toUpperCase();E==="POST"&&z++,E==="GET"&&U++;const ue=(C.url||"").toLowerCase(),H=(C.client||"").toLowerCase();(ue.includes("graphql")||H.includes("graphql")||H.includes("apollo"))&&se++}),{all:Q.length,errors:e,success:T,slow:x,post:z,get:U,graphql:se}},[Q]),He=D(()=>[{id:"all",label:"All",count:P.all,color:o.purple},{id:"errors",label:"Errors",count:P.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:P.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:P.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:P.post,color:Le.POST||o.blue500},{id:"GET",label:"GET",count:P.get,color:Le.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:P.graphql,color:o.graphqlPink}],[P]),Ie=ne(e=>{e&&Ce(e)},[Ce]),qe=ne(({item:e,index:T})=>{if(e.type==="header")return<Fe index={T}distance={8}>
+            <Je pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={he}isCollapsed={e.isCollapsed}onToggleCollapse={me}isFirst={e.isFirst}timestamp={e.timestamp}/>
+          </Fe>;if(e.type==="loadMore"){const{pageName:se,color:C,remainingCount:A,totalCount:E,loadedCount:ue,loadMoreStep:H,hasMore:Ge}=e;return<S style={[b.treeNodeRow,b.treeNodeRowLast]}>
+            <S style={b.treeLines}>
+              <S style={[b.modernTreeLine,{borderColor:C},b.modernTreeLineLast]}/>
             </S>
-            <S style={C.treeCardWrapper}>
-              {Ge?<$ onPress={()=>me(V,pe||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${b}14`,borderWidth:1.5,borderColor:`${b}40`,shadowColor:b,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+            <S style={b.treeCardWrapper}>
+              {Ge?<$ onPress={()=>pe(se,H||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${C}14`,borderWidth:1.5,borderColor:`${C}40`,shadowColor:C,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:8}}>
-                    <S style={{width:22,height:22,borderRadius:11,backgroundColor:b,alignItems:"center",justifyContent:"center",shadowColor:b,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
+                    <S style={{width:22,height:22,borderRadius:11,backgroundColor:C,alignItems:"center",justifyContent:"center",shadowColor:C,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
                       <Bo color={o.white}size={9}direction="down"/>
                     </S>
                     <S>
-                      <I style={{fontFamily:k.interBold,fontSize:12,color:b}}>
-                        {_("footer.loadMoreRequests",{count:pe,defaultValue:`Load ${pe} More Requests`})}
-                      </I>
-                      <I style={{fontFamily:k.interRegular,fontSize:9.5,color:o.grayTextWeak,marginTop:1}}>
-                        Showing {ne} of {A} requests
-                      </I>
+                      <V style={{fontFamily:k.interBold,fontSize:12,color:C}}>
+                        {j("footer.loadMoreRequests",{count:H,defaultValue:`Load ${H} More Requests`})}
+                      </V>
+                      <V style={{fontFamily:k.interRegular,fontSize:9.5,color:o.grayTextWeak,marginTop:1}}>
+                        Showing {ue} of {E} requests
+                      </V>
                     </S>
                   </S>
 
-                  <S style={{flexDirection:"row",alignItems:"center",backgroundColor:`${b}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${b}40`,gap:3}}>
-                    <I style={{fontFamily:k.interBold,fontSize:10.5,color:b}}>
-                      +{se}
-                    </I>
-                    <I style={{fontFamily:k.interRegular,fontSize:9,color:b}}>
+                  <S style={{flexDirection:"row",alignItems:"center",backgroundColor:`${C}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${C}40`,gap:3}}>
+                    <V style={{fontFamily:k.interBold,fontSize:10.5,color:C}}>
+                      +{A}
+                    </V>
+                    <V style={{fontFamily:k.interRegular,fontSize:9,color:C}}>
                       more
-                    </I>
+                    </V>
                   </S>
-                </$>:<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${b}0A`,borderWidth:1,borderColor:`${b}25`}}>
+                </$>:<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${C}0A`,borderWidth:1,borderColor:`${C}25`}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:7}}>
-                    <S style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${b}25`,alignItems:"center",justifyContent:"center"}}>
-                      <Po color={b}size={8}/>
+                    <S style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${C}25`,alignItems:"center",justifyContent:"center"}}>
+                      <Po color={C}size={8}/>
                     </S>
-                    <I style={{fontFamily:k.interMedium,fontSize:11,color:o.grayTextStrong}}>
-                      {_("footer.allLoaded",{count:A,defaultValue:`All ${A} requests loaded`})}
-                    </I>
+                    <V style={{fontFamily:k.interMedium,fontSize:11,color:o.grayTextStrong}}>
+                      {j("footer.allLoaded",{count:E,defaultValue:`All ${E} requests loaded`})}
+                    </V>
                   </S>
 
-                  <S style={{backgroundColor:`${b}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
-                    <I style={{fontFamily:k.interBold,fontSize:9.5,color:b}}>
-                      {A}/{A}
-                    </I>
+                  <S style={{backgroundColor:`${C}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
+                    <V style={{fontFamily:k.interBold,fontSize:9.5,color:C}}>
+                      {E}/{E}
+                    </V>
                   </S>
                 </S>}
             </S>
-          </S>}const{log:x,isLast:z,color:Q}=e,ae=ue.slice(0,T).filter(V=>!V.type).length;return<Le index={T}distance={8}style={P?[C.treeNodeRow,z&&C.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
-          {P&&<S style={C.treeLines}>
-              <S style={[C.modernTreeLine,{borderColor:Q},z&&C.modernTreeLineLast]}/>
-              {!z&&<S style={[C.modernTreeBranch,{borderColor:Q}]}/>}
+          </S>}const{log:x,isLast:z,color:U}=e;return<Fe index={T}distance={8}style={B?[b.treeNodeRow,z&&b.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
+          {B&&<S style={b.treeLines}>
+              <S style={[b.modernTreeLine,{borderColor:U},z&&b.modernTreeLineLast]}/>
+              {!z&&<S style={[b.modernTreeBranch,{borderColor:U}]}/>}
             </S>}
-          <S style={P?C.treeCardWrapper:{flex:1}}>
-            <Ye testID={`inspector.network.item.${ae}`}item={x}isSelected={J.has(x.id)}onToggleSelect={be}onPress={()=>{Te(x)}}timelineMinStart={we}timelineTotalRange={Se}isNew={Ce.has(x.id)}searchStr={F}/>
+          <S style={B?b.treeCardWrapper:{flex:1}}>
+            <Ye testID={`inspector.network.item.${x.id}`}item={x}isSelected={Y.has(x.id)}onToggleSelect={Se}onPress={Ie}timelineMinStart={fe}timelineTotalRange={ye}isNew={we.has(x.id)}searchStr={I}/>
           </S>
-        </Le>},[ue,P,we,Se,Ce,J,be,F,fe,ye,me,Te,_]);return<S style={{flex:1}}>
+        </Fe>},[B,fe,ye,we,Y,Se,Ie,I,he,me,pe,j]);return<S style={{flex:1}}>
       <S style={{marginTop:6}}>
             
-            <S style={C.toolbarRow}>
-              <S style={[C.searchContainer,Ve&&{borderColor:o.purple,borderWidth:1.5}]}>
-                <Io color={Ve?o.purple:o.grayTextWeak}size={15}/>
-                <Ke placeholder={_("network.searchPlaceholder","Search APIs...")}placeholderTextColor={o.grayTextWeak}value={F}onChangeText={K}onFocus={()=>ke(!0)}onBlur={()=>ke(!1)}style={C.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            <S style={b.toolbarRow}>
+              <S style={[b.searchContainer,ze&&{borderColor:o.purple,borderWidth:1.5}]}>
+                <Vo color={ze?o.purple:o.grayTextWeak}size={15}/>
+                <Ke placeholder={j("network.searchPlaceholder","Search APIs...")}placeholderTextColor={o.grayTextWeak}value={I}onChangeText={X}onFocus={()=>Ve(!0)}onBlur={()=>Ve(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-                {F.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                {I.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
                     <S style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                      <I style={{color:o.purple,fontSize:9.5,fontFamily:k.interBold}}>
-                        {B.length}
-                      </I>
+                      <V style={{color:o.purple,fontSize:9.5,fontFamily:k.interBold}}>
+                        {R.length}
+                      </V>
                     </S>
-                    <Qe onPress={()=>K("")}hitSlop={10}style={C.clearBtn}>
-                      <Vo color={o.grayTextWeak}size={13}/>
+                    <Qe onPress={()=>X("")}hitSlop={10}style={b.clearBtn}>
+                      <Io color={o.grayTextWeak}size={13}/>
                     </Qe>
                   </S>}
               </S>
 
-              <S style={C.toolbarRight}>
-                <$ style={[C.toolbarBtn,{borderColor:`${o.purple}38`,backgroundColor:`${o.purple}0F`}]}onPress={()=>Ie(!0)}hitSlop={6}testID="inspector.network.exportBtn">
+              <S style={b.toolbarRight}>
+                <$ style={[b.toolbarBtn,{borderColor:`${o.purple}38`,backgroundColor:`${o.purple}0F`}]}onPress={()=>xe(!0)}hitSlop={6}testID="inspector.network.exportBtn">
                   <Oo color={o.purple}size={15}/>
                 </$>
 
-                <$ style={[C.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Pe}hitSlop={6}>
+                <$ style={[b.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Be}hitSlop={6}>
                   <Fo color={o.errorColor}size={15}/>
-                  {J.size>0&&<S style={C.trashBadge}>
-                      <I style={C.trashBadgeText}>
-                        {J.size}
-                      </I>
+                  {Y.size>0&&<S style={b.trashBadge}>
+                      <V style={b.trashBadgeText}>
+                        {Y.size}
+                      </V>
                     </S>}
                 </$>
 
-                <$ style={[C.toolbarBtn,q&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>Ee(e=>!e)}hitSlop={6}accessibilityLabel={ie?"Page Accordion Grouping Preserved (Temporarily in List View for Search Results)":q?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
-                  <Be color={q?o.purple:o.grayTextStrong}size={16}/>
-                  {q&&<S style={C.activeFilterDot}/>}
+                <$ style={[b.toolbarBtn,G&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>Pe(e=>!e)}hitSlop={6}accessibilityLabel={ae?"Page Accordion Grouping Preserved (Temporarily in List View for Search Results)":G?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
+                  <Re color={G?o.purple:o.grayTextStrong}size={16}/>
+                  {G&&<S style={b.activeFilterDot}/>}
                 </$>
 
-                <$ style={C.toolbarBtn}onPress={()=>Y(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <Lo direction={$e==="newest"?"down":"up"}color={o.grayTextStrong}size={18}/>
+                <$ style={b.toolbarBtn}onPress={()=>Z(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <Lo direction={Ee==="newest"?"down":"up"}color={o.grayTextStrong}size={18}/>
                 </$>
               </S>
             </S>
@@ -101,62 +101,62 @@ import H,{useCallback as ge,useMemo as D,useRef as We}from"react";import{FlatLis
             
             <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
               <Ue horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {He.map(e=>{const T=X===e.id,x=e.color||o.purple,z=T?o.white:x;return<$ testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{de(T?"all":e.id)}}>
+                {He.map(e=>{const T=J===e.id,x=e.color||o.purple,z=T?o.white:x;return<$ testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{de(T?"all":e.id)}}>
                       <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:T?x:`${x}12`,borderWidth:1,borderColor:T?x:`${x}30`,gap:5}}>
-                        {e.id==="all"&&<Be size={11}color={z}/>}
+                        {e.id==="all"&&<Re size={11}color={z}/>}
                         {e.id==="errors"&&<$o size={11}color={z}/>}
                         {e.id==="success"&&<Eo size={11}color={z}/>}
                         {e.id==="slow"&&<Mo size={11}color={z}/>}
                         {e.id==="POST"&&<Ao size={11}color={z}/>}
                         {e.id==="GET"&&<Do size={11}color={z}/>}
                         {e.id==="graphql"&&<No size={11}color={z}/>}
-                        <I style={{fontFamily:k.interBold,fontSize:10.5,color:T?o.white:o.primaryBlack}}>
+                        <V style={{fontFamily:k.interBold,fontSize:10.5,color:T?o.white:o.primaryBlack}}>
                           {e.label}
-                        </I>
+                        </V>
                         <S style={{backgroundColor:T?"rgba(255,255,255,0.25)":`${x}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                          <I style={{fontFamily:k.interBold,fontSize:9,color:T?o.white:x}}>
+                          <V style={{fontFamily:k.interBold,fontSize:9,color:T?o.white:x}}>
                             {e.count}
-                          </I>
+                          </V>
                         </S>
                       </S>
                     </$>})}
               </Ue>
 
-              <$ onPress={()=>ze(!0)}style={{flexShrink:0}}>
+              <$ onPress={()=>Te(!0)}style={{flexShrink:0}}>
                 <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:M?`${o.purple}20`:o.grayBackground,borderWidth:1,borderColor:M?o.purple:o.grayBorderSecondary,gap:5,shadowColor:o.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
                   <Ro size={11}color={M?o.purple:o.grayText}/>
-                  <I style={{fontFamily:k.interBold,fontSize:10.5,color:M?o.purple:o.grayText}}>
-                    {_("network.moreFilters","More Filters")}
-                  </I>
+                  <V style={{fontFamily:k.interBold,fontSize:10.5,color:M?o.purple:o.grayText}}>
+                    {j("network.moreFilters","More Filters")}
+                  </V>
                   {M&&<S style={{backgroundColor:o.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
-                      <I style={{fontFamily:k.interBold,fontSize:8.5,color:o.white}}>
+                      <V style={{fontFamily:k.interBold,fontSize:8.5,color:o.white}}>
                         {Ne}
-                      </I>
+                      </V>
                     </S>}
                 </S>
               </$>
             </S>
 
             
-            {(X!=="all"||F.trim().length>0||M||B.length!==te.length)&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
-                <I style={{fontFamily:k.interMedium,fontSize:10.5,color:o.purple}}>
-                  Showing {B.length} of {j.length} requests
-                </I>
-                <$ onPress={()=>{K(""),de("all"),G(new Set),W(new Set),Z("all"),ee("all"),oe("time_desc"),he("all")}}>
-                  <I style={{fontFamily:k.interBold,fontSize:10.5,color:o.errorColor}}>
+            {(J!=="all"||I.trim().length>0||M||R.length!==re.length)&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
+                <V style={{fontFamily:k.interMedium,fontSize:10.5,color:o.purple}}>
+                  Showing {R.length} of {Q.length} requests
+                </V>
+                <$ onPress={()=>{X(""),de("all"),W(new Set),_(new Set),ee("all"),oe("all"),te("time_desc"),ge("all")}}>
+                  <V style={{fontFamily:k.interBold,fontSize:10.5,color:o.errorColor}}>
                     Clear All Filters
-                  </I>
+                  </V>
                 </$>
               </S>}
           </S>
 
-        <_e ref={xe}data={ue}keyExtractor={De}renderItem={qe}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Ze isSearch={F.length>0||M||X!=="all"}searchQuery={F}customTitle={F.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{K(""),G(new Set),W(new Set),Z("all"),ee("all"),oe("time_desc"),de("all"),he("all")}}/>}ListFooterComponent={U.length>0?<S style={{paddingBottom:24}}>
-              <So count={P?B.length:Math.min(le,B.length)}totalCount={B.length}label="requests"hasMore={!P&&B.length>le}loadMoreStep={30}onLoadMore={()=>Fe(e=>e+30)}/>
-            </S>:null}style={{flex:1}}contentContainerStyle={[C.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <_e ref={be}data={Ae}keyExtractor={De}renderItem={qe}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Ze isSearch={I.length>0||M||J!=="all"}searchQuery={I}customTitle={I.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{X(""),W(new Set),_(new Set),ee("all"),oe("all"),te("time_desc"),de("all"),ge("all")}}/>}ListFooterComponent={K.length>0?<S style={{paddingBottom:24}}>
+              <So count={B?R.length:Math.min(ie,R.length)}totalCount={R.length}label="requests"hasMore={!B&&R.length>ie}loadMoreStep={30}onLoadMore={()=>ke(e=>e+30)}/>
+            </S>:null}style={{flex:1}}contentContainerStyle={[b.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <Co visible={Me}onClose={()=>ze(!1)}filters={Oe}onApply={ve}searchQuery={F}/>
+      <Co visible={$e}onClose={()=>Te(!1)}filters={Oe}onApply={ve}searchQuery={I}/>
 
       
-      <To visible={Ae}onClose={()=>Ie(!1)}filteredLogs={B}allLogs={j}/>
+      <To visible={Me}onClose={()=>xe(!1)}filteredLogs={R}allLogs={Q}/>
     </S>});export default vo;

package/dist/esm/components/Inspector/SecondaryTelemetryStrip.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
 export declare const SecondaryTelemetryStrip: React.FC;
+export default SecondaryTelemetryStrip;

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

@@ -1,43 +1,44 @@
-import{useEffect as H,useMemo as X,useRef as A,useState as q}from"react";import{StyleSheet as V,Text as F,TouchableOpacity as Y,View as M}from"react-native";import Z from"react-native-linear-gradient";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as J}from"../../styles/AppFonts";import{ActivityIcon as _,BatteryChargingIcon as Me,BatteryFullIcon as Se,BoltIcon as Be,SpeedIcon as Ae}from"../NetworkIcons";import{getNativeDeviceMetrics as Fe}from"../../native/NativeInspector";import{subscribeNetworkLogs as Ie}from"../../customHooks/networkLogger";import{useInspector as Re}from"./InspectorContext";import{useTranslation as Ge}from"../../i18n";export const SecondaryTelemetryStrip=()=>{const{t:K}=Ge(),{switchActiveTab:L,peekMode:Te}=Re(),[I,j]=q(60),[n,U]=q(null),[B,v]=q(0),R=A(0),$=A(Date.now());H(()=>{let r;const i=()=>{R.current++;const s=Date.now(),a=s-$.current;if(a>=1e3){const C=Math.min(60,Math.round(R.current*1e3/a));j(C),R.current=0,$.current=s}r=requestAnimationFrame(i)};return r=requestAnimationFrame(i),()=>cancelAnimationFrame(r)},[]);const S=A(0),G=A(Date.now());H(()=>{const r=Ie(s=>{if(!s||s.length===0){v(0);return}const a=Date.now(),C=s.slice(0,10);let k=0,D=0,x=0;for(const o of C){let P=0,W=0;o.request&&(P=typeof o.request=="string"?o.request.length:JSON.stringify(o.request).length),o.response&&(W=typeof o.response=="string"?o.response.length:JSON.stringify(o.response).length);const z=P+W;if(z>0&&o.duration&&o.duration>0){const E=z*8/(o.duration/1e3)/1e3;E>0&&x===0&&(x=E),k+=z,D+=o.duration}}let w=0;D>0&&k>0?w=k*8/(D/1e3)/1e3:x>0&&(w=x),w>0?(S.current=w,G.current=a,v(Math.round(w*10)/10)):S.current>0&&a-G.current<12e3&&v(Math.round(S.current*10)/10)}),i=setInterval(()=>{Date.now()-G.current>15e3&&S.current>0&&(S.current=0,v(0))},3e3);return()=>{r(),clearInterval(i)}},[]),H(()=>{let r=!0;const i=async()=>{try{const a=await Fe();r&&a&&U(a)}catch{}};i();const s=setInterval(i,4e3);return()=>{r=!1,clearInterval(s)}},[]);const N=I>=55?e.emerald400:I>=30?e.amber400:e.rose400,O=X(()=>{if(n?.usedRAM&&n?.totalRAM){const r=(n.usedRAM/1073741824).toFixed(2),i=(n.totalRAM/(1024*1024*1024)).toFixed(1);return`${r} / ${i} GB RAM`}return n?.residentMemory?`${(n.residentMemory/1073741824).toFixed(2)} GB RAM`:n?.usedRAM?`${(n.usedRAM/1073741824).toFixed(2)} GB RAM`:null},[n]),T=n?.batteryPercent,Q=n?.isCharging;return<Z colors={[e.telemetrySubHeaderGradStart,e.telemetrySubHeaderGradMid,e.telemetrySubHeaderGradEnd]}start={{x:0,y:0}}end={{x:1,y:0}}style={t.container}>
-      <Y activeOpacity={.8}onPress={()=>L?.("device")}style={t.inner}>
+import _,{useEffect as T,useMemo as ee,useRef as B,useState as k}from"react";import{Animated as v,StyleSheet as P,Text as C,TouchableOpacity as Me,View as M}from"react-native";import Se from"react-native-linear-gradient";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as Fe}from"../../styles/AppFonts";import{ActivityIcon as Be,BatteryChargingIcon as Ae,BatteryFullIcon as Ie,BoltIcon as Re,SpeedIcon as De}from"../NetworkIcons";import{getNativeDeviceMetrics as Te,getNativeFpsMetrics as ke,startNativeFpsMonitoring as Ce,stopNativeFpsMonitoring as Ne}from"../../native/NativeInspector";import{subscribeNetworkLogs as Ve}from"../../customHooks/networkLogger";import{useInspector as $e}from"./InspectorContext";import{useTranslation as He}from"../../i18n";export const SecondaryTelemetryStrip=_.memo(()=>{const{t:U}=He(),{switchActiveTab:Q}=$e(),[A,O]=k(60),[N,X]=k(60),[s,Y]=k(null),[w,I]=k(0),R=B(new v.Value(.4)).current;T(()=>{const r=v.loop(v.sequence([v.timing(R,{toValue:1,duration:900,useNativeDriver:!0}),v.timing(R,{toValue:.4,duration:900,useNativeDriver:!0})]));return r.start(),()=>r.stop()},[R]);const V=B(0),W=B(Date.now());T(()=>{Ce().catch(()=>{});const r=setInterval(async()=>{try{const o=await ke();if(o&&typeof o.fps=="number"&&o.fps>0){O(Math.round(o.fps)),o.targetFps&&X(Math.round(o.targetFps));return}}catch{}const c=Date.now(),x=c-W.current;if(x>=1e3){const o=Math.min(60,Math.round(V.current*1e3/x));O(o),V.current=0,W.current=c}},1e3);let i;const a=()=>{V.current++,i=requestAnimationFrame(a)};return i=requestAnimationFrame(a),()=>{clearInterval(r),cancelAnimationFrame(i),Ne().catch(()=>{})}},[]);const S=B(0),$=B(Date.now());T(()=>{const r=Ve(a=>{if(!a||a.length===0){I(0);return}const c=Date.now(),x=a.slice(0,10);let o=0,G=0,D=0;for(const n of x){let J=0,K=0;n.request&&(J=typeof n.request=="string"?n.request.length:JSON.stringify(n.request).length),n.response&&(K=typeof n.response=="string"?n.response.length:JSON.stringify(n.response).length);const L=J+K;if(L>0&&n.duration&&n.duration>0){const j=L*8/(n.duration/1e3)/1e3;j>0&&D===0&&(D=j),o+=L,G+=n.duration}}let F=0;G>0&&o>0?F=o*8/(G/1e3)/1e3:D>0&&(F=D),F>0?(S.current=F,$.current=c,I(Math.round(F*10)/10)):S.current>0&&c-$.current<12e3&&I(Math.round(S.current*10)/10)}),i=setInterval(()=>{Date.now()-$.current>15e3&&S.current>0&&(S.current=0,I(0))},3e3);return()=>{r(),clearInterval(i)}},[]),T(()=>{let r=!0;const i=async()=>{try{const c=await Te();r&&c&&Y(c)}catch{}};i();const a=setInterval(i,4e3);return()=>{r=!1,clearInterval(a)}},[]);const H=A>=N-5?e.emerald400:A>=N/2?e.amber400:e.rose400,q=ee(()=>{if(s?.usedRAM&&s?.totalRAM){const r=(s.usedRAM/1073741824).toFixed(2),i=(s.totalRAM/(1024*1024*1024)).toFixed(1);return`${r} / ${i} GB`}return s?.residentMemory?`${Math.round(s.residentMemory/1048576)} MB RAM`:s?.usedRAM?`${Math.round(s.usedRAM/1048576)} MB RAM`:null},[s]),z=s?.batteryPercent,E=s?.isCharging,Z=`Telemetry: ${A} FPS of ${N}, Network speed ${w} kbps, ${q||""}`;return<Se colors={[e.telemetrySubHeaderGradStart,e.telemetrySubHeaderGradMid,e.telemetrySubHeaderGradEnd]}start={{x:0,y:0}}end={{x:1,y:0}}style={t.container}>
+      <Me activeOpacity={.75}onPress={()=>Q?.("device")}accessible={!0}accessibilityRole="summary"accessibilityLabel={Z}accessibilityHint="Double tap to open Device Diagnostics tab"style={t.inner}>
         
         <M style={t.item}>
-          <_ size={11.5}color={N}/>
-          <F style={[t.label,{color:N,fontFamily:J.interBold}]}>
-            {I} {K("telemetry.fps","FPS")}
-          </F>
+          <v.View style={[t.pulseDot,{backgroundColor:H,opacity:R}]}/>
+          <Be size={11}color={H}/>
+          <C style={[t.monoLabel,{color:H}]}>
+            {A} {U("telemetry.fps","FPS")}
+          </C>
         </M>
 
         <M style={t.divider}/>
 
         
         <M style={t.item}>
-          <Ae size={11.5}color={e.sky300}/>
-          <F style={[t.label,{color:e.sky300}]}>
-            {B>=1e3?`${(B/1e3).toFixed(2)} Mbps`:B>0?`${B.toFixed(1)} kbps`:"0.0 kbps"}
-          </F>
+          <De size={11}color={e.sky400}/>
+          <C style={[t.monoLabel,{color:e.sky400}]}>
+            {w>=1e3?`${(w/1e3).toFixed(2)} Mbps`:w>0?`${w.toFixed(1)} kbps`:"0.0 kbps"}
+          </C>
         </M>
 
         
-        {O&&<>
+        {q&&<>
             <M style={t.divider}/>
             <M style={t.item}>
-              <Be size={11}color={e.purple400}/>
-              <F style={[t.label,{color:e.purple400}]}>
-                {O}
-              </F>
+              <Re size={11}color={e.purple400}/>
+              <C style={[t.monoLabel,{color:e.purple400}]}>
+                {q}
+              </C>
             </M>
           </>}
 
         
-        {T!==void 0&&T>=0&&<>
+        {z!==void 0&&z>=0&&<>
             <M style={t.divider}/>
             <M style={t.item}>
-              {Q?<Me size={11.5}color={e.emerald400}/>:<Se size={11.5}color={e.slate400}/>}
-              <F style={t.label}>
-                {Math.round(T)}%
-              </F>
+              {E?<Ae size={11}color={e.emerald400}/>:<Ie size={11}color={e.slate400}/>}
+              <C style={[t.monoLabel,{color:E?e.emerald400:e.slate400}]}>
+                {Math.round(z)}%
+              </C>
             </M>
           </>}
-      </Y>
-    </Z>};const t=V.create({container:{width:"100%",borderBottomWidth:V.hairlineWidth,borderBottomColor:e.telemetrySubHeaderBorder,borderTopWidth:V.hairlineWidth,borderTopColor:e.telemetrySubHeaderBorder,zIndex:9},inner:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:3.5,minHeight:23},item:{flexDirection:"row",alignItems:"center",gap:4},divider:{width:1,height:10,backgroundColor:e.borderSubtle},label:{fontFamily:J.interMedium,fontSize:9,lineHeight:11.5,color:e.textPrimary,letterSpacing:.1}});
+      </Me>
+    </Se>});const t=P.create({container:{width:"100%",borderBottomWidth:P.hairlineWidth,borderBottomColor:e.telemetrySubHeaderBorder,borderTopWidth:P.hairlineWidth,borderTopColor:e.telemetrySubHeaderBorder,zIndex:9},inner:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:4.5,minHeight:25},item:{flexDirection:"row",alignItems:"center",gap:4},pulseDot:{width:5,height:5,borderRadius:2.5,marginRight:1},divider:{width:1,height:10,backgroundColor:e.borderSubtle},monoLabel:{fontFamily:Fe.monoFont,fontSize:9.5,lineHeight:12,letterSpacing:.2,fontVariant:["tabular-nums"]}});export default SecondaryTelemetryStrip;