react-native-inapp-inspector 2.5.13 → 2.5.14

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

@@ -1,70 +1,70 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(l,r,t,a){a===void 0&&(a=t);var i=Object.getOwnPropertyDescriptor(r,t);(!i||("get"in i?!r.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(l,a,i)}):(function(l,r,t,a){a===void 0&&(a=t),l[a]=r[t]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(l,r){Object.defineProperty(l,"default",{enumerable:!0,value:r})}):function(l,r){l.default=r}),__importStar=this&&this.__importStar||(function(){var l=function(r){return l=Object.getOwnPropertyNames||function(t){var a=[];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(a[a.length]=i);return a},l(r)};return function(r){if(r&&r.__esModule)return r;var t={};if(r!=null)for(var a=l(r),i=0;i<a.length;i++)a[i]!=="default"&&__createBinding(t,r,a[i]);return __setModuleDefault(t,r),t}})(),__importDefault=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),NetworkExportModal_1=__importDefault(require("./NetworkExportModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),helpers_1=require("../../helpers"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:l,loadMoreSection:r,search:t,setSearch:a,setSearchScope:i,quickFilter:x,setQuickFilter:D,handleDelete:re,isGroupByPageEnabled:S,setIsGroupByPageEnabled:le,selectedLogs:z,sortOrder:ae,setSortOrder:F,statusFilters:u,setStatusFilters:m,methodFilters:p,setMethodFilters:T,latencyFilter:h,setLatencyFilter:I,protocolFilter:y,setProtocolFilter:k,networkSortBy:b,setNetworkSortBy:L,filteredLogs:f,logs:P,hiddenUrlPatterns:R,toggleSectionFilter:j,toggleSectionCollapse:G,minStart:W,totalRange:Q,newLogIds:U,toggleSelect:K,setSelected:X,maxNetworkLogs:N}=(0,InspectorContext_1.useInspector)(),{t:A}=(0,i18n_1.useTranslation)(),J=(0,react_1.useRef)(null),[ie,Y]=react_1.default.useState(!1),[se,Z]=react_1.default.useState(!1),[ee,te]=react_1.default.useState(!1),[B,oe]=react_1.default.useState(N||50),M=!!(t&&t.trim().length>0),g=S&&!M;react_1.default.useEffect(()=>{oe(N||50),M&&J.current?.scrollToOffset({offset:0,animated:!1})},[t,x,N,M]);const $=(0,react_1.useMemo)(()=>g?l:l.slice(0,B),[g,l,B]),ne=(0,react_1.useCallback)(e=>e?.id?String(e.id):"",[]),C=(0,react_1.useMemo)(()=>u.size>0&&!u.has("all")||p.size>0&&!p.has("all")||h!=="all"||y!=="all"||b!=="time_desc",[u,p,h,y,b]),ce=(0,react_1.useMemo)(()=>{let e=0;return u.size>0&&!u.has("all")&&(e+=u.size),p.size>0&&!p.has("all")&&(e+=p.size),h!=="all"&&e++,y!=="all"&&e++,b!=="time_desc"&&e++,e},[u,p,h,y,b]),de=(0,react_1.useMemo)(()=>({statusCodes:u.size>0?new Set(u):new Set(["all"]),methods:p.size>0?new Set(p):new Set(["all"]),latency:h,protocol:y,sortBy:b}),[u,p,h,y,b]),ue=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?m(new Set):m(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?T(new Set):T(new Set([...e.methods].map(s=>s))),I(e.latency||"all"),k(e.protocol||"all"),L(e.sortBy||"time_desc"),e.sortBy==="time_asc"?F("oldest"):F("newest")},[m,T,I,k,L,F]),V=(0,react_1.useMemo)(()=>!R||R.length===0?P:P.filter(e=>!(0,helpers_1.isUrlHidden)(e.url,R)),[P,R]),w=(0,react_1.useMemo)(()=>{let e=0,s=0,n=0,c=0,v=0,q=0;return V.forEach(d=>{const o=typeof d.status=="number"?d.status:parseInt(String(d.status),10);d.status===0||d.status==null||!isNaN(o)&&o>=400?e++:!isNaN(o)&&o>=200&&o<400&&s++,(d.duration||0)>=500&&n++;const O=(d.method||"").toUpperCase();O==="POST"&&c++,O==="GET"&&v++;const _=(d.url||"").toLowerCase(),E=(d.client||"").toLowerCase();(_.includes("graphql")||E.includes("graphql")||E.includes("apollo"))&&q++}),{all:V.length,errors:e,success:s,slow:n,post:c,get:v,graphql:q}},[V]),pe=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:w.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:w.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:w.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:w.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:w.post,color:constants_1.METHOD_COLORS.POST||AppColors_1.AppColors.blue500},{id:"GET",label:"GET",count:w.get,color:constants_1.METHOD_COLORS.GET||AppColors_1.AppColors.emerald500},{id:"graphql",label:"GraphQL",count:w.graphql,color:AppColors_1.AppColors.graphqlPink}],[w]),fe=(0,react_1.useCallback)(({item:e,index:s})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={s}distance={8}>
-            <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={j}isCollapsed={e.isCollapsed}onToggleCollapse={G}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </AnimatedEntrance_1.default>;if(e.type==="loadMore"){const{pageName:d,color:o,remainingCount:O,totalCount:_,loadedCount:E,loadMoreStep:H,hasMore:ge}=e;return<react_native_1.View style={[styles_1.default.treeNodeRow,styles_1.default.treeNodeRowLast]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(l,r,o,a){a===void 0&&(a=o);var i=Object.getOwnPropertyDescriptor(r,o);(!i||("get"in i?!r.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return r[o]}}),Object.defineProperty(l,a,i)}):(function(l,r,o,a){a===void 0&&(a=o),l[a]=r[o]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(l,r){Object.defineProperty(l,"default",{enumerable:!0,value:r})}):function(l,r){l.default=r}),__importStar=this&&this.__importStar||(function(){var l=function(r){return l=Object.getOwnPropertyNames||function(o){var a=[];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(a[a.length]=i);return a},l(r)};return function(r){if(r&&r.__esModule)return r;var o={};if(r!=null)for(var a=l(r),i=0;i<a.length;i++)a[i]!=="default"&&__createBinding(o,r,a[i]);return __setModuleDefault(o,r),o}})(),__importDefault=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),NetworkExportModal_1=__importDefault(require("./NetworkExportModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),helpers_1=require("../../helpers"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:l,loadMoreSection:r,search:o,setSearch:a,setSearchScope:i,quickFilter:z,setQuickFilter:E,handleDelete:oe,isGroupByPageEnabled:m,setIsGroupByPageEnabled:re,selectedLogs:F,sortOrder:le,setSortOrder:I,statusFilters:d,setStatusFilters:T,methodFilters:u,setMethodFilters:A,latencyFilter:h,setLatencyFilter:k,protocolFilter:y,setProtocolFilter:L,networkSortBy:b,setNetworkSortBy:P,filteredLogs:p,logs:R,hiddenUrlPatterns:B,toggleSectionFilter:$,toggleSectionCollapse:H,minStart:j,totalRange:G,newLogIds:W,toggleSelect:Q,setSelected:U,maxNetworkLogs:D}=(0,InspectorContext_1.useInspector)(),{t:V}=(0,i18n_1.useTranslation)(),K=(0,react_1.useRef)(null),[ae,X]=react_1.default.useState(!1),[ie,J]=react_1.default.useState(!1),[Y,Z]=react_1.default.useState(!1),[M,ee]=react_1.default.useState(D||50),q=!!(o&&o.trim().length>0),f=m&&!q;react_1.default.useEffect(()=>{ee(D||50),q&&K.current?.scrollToOffset({offset:0,animated:!1})},[o,z,D,q]);const se=(0,react_1.useMemo)(()=>f?l:l.slice(0,M),[f,l,M]),ne=(0,react_1.useCallback)(e=>e?.id?String(e.id):"",[]),C=(0,react_1.useMemo)(()=>d.size>0&&!d.has("all")||u.size>0&&!u.has("all")||h!=="all"||y!=="all"||b!=="time_desc",[d,u,h,y,b]),ce=(0,react_1.useMemo)(()=>{let e=0;return d.size>0&&!d.has("all")&&(e+=d.size),u.size>0&&!u.has("all")&&(e+=u.size),h!=="all"&&e++,y!=="all"&&e++,b!=="time_desc"&&e++,e},[d,u,h,y,b]),de=(0,react_1.useMemo)(()=>({statusCodes:d.size>0?new Set(d):new Set(["all"]),methods:u.size>0?new Set(u):new Set(["all"]),latency:h,protocol:y,sortBy:b}),[d,u,h,y,b]),ue=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?T(new Set):T(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?A(new Set):A(new Set([...e.methods].map(s=>s))),k(e.latency||"all"),L(e.protocol||"all"),P(e.sortBy||"time_desc"),e.sortBy==="time_asc"?I("oldest"):I("newest")},[T,A,k,L,P,I]),v=(0,react_1.useMemo)(()=>!B||B.length===0?R:R.filter(e=>!(0,helpers_1.isUrlHidden)(e.url,B)),[R,B]),g=(0,react_1.useMemo)(()=>{let e=0,s=0,n=0,c=0,x=0,O=0;return v.forEach(t=>{const _=typeof t.status=="number"?t.status:parseInt(String(t.status),10);t.status===0||t.status==null||!isNaN(_)&&_>=400?e++:!isNaN(_)&&_>=200&&_<400&&s++,(t.duration||0)>=500&&n++;const w=(t.method||"").toUpperCase();w==="POST"&&c++,w==="GET"&&x++;const N=(t.url||"").toLowerCase(),S=(t.client||"").toLowerCase();(N.includes("graphql")||S.includes("graphql")||S.includes("apollo"))&&O++}),{all:v.length,errors:e,success:s,slow:n,post:c,get:x,graphql:O}},[v]),pe=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:g.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:g.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:g.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:g.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:g.post,color:constants_1.METHOD_COLORS.POST||AppColors_1.AppColors.blue500},{id:"GET",label:"GET",count:g.get,color:constants_1.METHOD_COLORS.GET||AppColors_1.AppColors.emerald500},{id:"graphql",label:"GraphQL",count:g.graphql,color:AppColors_1.AppColors.graphqlPink}],[g]),te=(0,react_1.useCallback)(e=>{e&&U(e)},[U]),fe=(0,react_1.useCallback)(({item:e,index:s})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={s}distance={8}>
+            <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={$}isCollapsed={e.isCollapsed}onToggleCollapse={H}isFirst={e.isFirst}timestamp={e.timestamp}/>
+          </AnimatedEntrance_1.default>;if(e.type==="loadMore"){const{pageName:O,color:t,remainingCount:_,totalCount:w,loadedCount:N,loadMoreStep:S,hasMore:ge}=e;return<react_native_1.View style={[styles_1.default.treeNodeRow,styles_1.default.treeNodeRowLast]}>
             <react_native_1.View style={styles_1.default.treeLines}>
-              <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:o},styles_1.default.modernTreeLineLast]}/>
+              <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:t},styles_1.default.modernTreeLineLast]}/>
             </react_native_1.View>
             <react_native_1.View style={styles_1.default.treeCardWrapper}>
-              {ge?<TouchableScale_1.default onPress={()=>r(d,H||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${o}14`,borderWidth:1.5,borderColor:`${o}40`,shadowColor:o,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+              {ge?<TouchableScale_1.default onPress={()=>r(O,S||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${t}14`,borderWidth:1.5,borderColor:`${t}40`,shadowColor:t,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
                   <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:8}}>
-                    <react_native_1.View style={{width:22,height:22,borderRadius:11,backgroundColor:o,alignItems:"center",justifyContent:"center",shadowColor:o,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
+                    <react_native_1.View style={{width:22,height:22,borderRadius:11,backgroundColor:t,alignItems:"center",justifyContent:"center",shadowColor:t,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
                       <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white}size={9}direction="down"/>
                     </react_native_1.View>
                     <react_native_1.View>
-                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:o}}>
-                        {A("footer.loadMoreRequests",{count:H,defaultValue:`Load ${H} More Requests`})}
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:t}}>
+                        {V("footer.loadMoreRequests",{count:S,defaultValue:`Load ${S} More Requests`})}
                       </react_native_1.Text>
                       <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,marginTop:1}}>
-                        Showing {E} of {_} requests
+                        Showing {N} of {w} requests
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
 
-                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",backgroundColor:`${o}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${o}40`,gap:3}}>
-                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:o}}>
-                      +{O}
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${t}40`,gap:3}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:t}}>
+                      +{_}
                     </react_native_1.Text>
-                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9,color:o}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9,color:t}}>
                       more
                     </react_native_1.Text>
                   </react_native_1.View>
-                </TouchableScale_1.default>:<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${o}0A`,borderWidth:1,borderColor:`${o}25`}}>
+                </TouchableScale_1.default>:<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${t}0A`,borderWidth:1,borderColor:`${t}25`}}>
                   <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:7}}>
-                    <react_native_1.View style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${o}25`,alignItems:"center",justifyContent:"center"}}>
-                      <NetworkIcons_1.CheckIcon color={o}size={8}/>
+                    <react_native_1.View style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${t}25`,alignItems:"center",justifyContent:"center"}}>
+                      <NetworkIcons_1.CheckIcon color={t}size={8}/>
                     </react_native_1.View>
                     <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextStrong}}>
-                      {A("footer.allLoaded",{count:_,defaultValue:`All ${_} requests loaded`})}
+                      {V("footer.allLoaded",{count:w,defaultValue:`All ${w} requests loaded`})}
                     </react_native_1.Text>
                   </react_native_1.View>
 
-                  <react_native_1.View style={{backgroundColor:`${o}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
-                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:o}}>
-                      {_}/{_}
+                  <react_native_1.View style={{backgroundColor:`${t}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:t}}>
+                      {w}/{w}
                     </react_native_1.Text>
                   </react_native_1.View>
                 </react_native_1.View>}
             </react_native_1.View>
-          </react_native_1.View>}const{log:n,isLast:c,color:v}=e,q=$.slice(0,s).filter(d=>!d.type).length;return<AnimatedEntrance_1.default index={s}distance={8}style={g?[styles_1.default.treeNodeRow,c&&styles_1.default.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
-          {g&&<react_native_1.View style={styles_1.default.treeLines}>
-              <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:v},c&&styles_1.default.modernTreeLineLast]}/>
-              {!c&&<react_native_1.View style={[styles_1.default.modernTreeBranch,{borderColor:v}]}/>}
+          </react_native_1.View>}const{log:n,isLast:c,color:x}=e;return<AnimatedEntrance_1.default index={s}distance={8}style={f?[styles_1.default.treeNodeRow,c&&styles_1.default.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
+          {f&&<react_native_1.View style={styles_1.default.treeLines}>
+              <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:x},c&&styles_1.default.modernTreeLineLast]}/>
+              {!c&&<react_native_1.View style={[styles_1.default.modernTreeBranch,{borderColor:x}]}/>}
             </react_native_1.View>}
-          <react_native_1.View style={g?styles_1.default.treeCardWrapper:{flex:1}}>
-            <LogCard_1.default testID={`inspector.network.item.${q}`}item={n}isSelected={z.has(n.id)}onToggleSelect={K}onPress={()=>{X(n)}}timelineMinStart={W}timelineTotalRange={Q}isNew={U.has(n.id)}searchStr={t}/>
+          <react_native_1.View style={f?styles_1.default.treeCardWrapper:{flex:1}}>
+            <LogCard_1.default testID={`inspector.network.item.${n.id}`}item={n}isSelected={F.has(n.id)}onToggleSelect={Q}onPress={te}timelineMinStart={j}timelineTotalRange={G}isNew={W.has(n.id)}searchStr={o}/>
           </react_native_1.View>
-        </AnimatedEntrance_1.default>},[$,g,W,Q,U,z,K,t,j,G,r,X,A]);return<react_native_1.View style={{flex:1}}>
+        </AnimatedEntrance_1.default>},[f,j,G,W,F,Q,te,o,$,H,r,V]);return<react_native_1.View style={{flex:1}}>
       <react_native_1.View style={{marginTop:6}}>
             
             <react_native_1.View style={styles_1.default.toolbarRow}>
-              <react_native_1.View style={[styles_1.default.searchContainer,ee&&{borderColor:AppColors_1.AppColors.purple,borderWidth:1.5}]}>
-                <NetworkIcons_1.SearchIcon color={ee?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextWeak}size={15}/>
-                <react_native_1.TextInput placeholder={A("network.searchPlaceholder","Search APIs...")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={t}onChangeText={a}onFocus={()=>te(!0)}onBlur={()=>te(!1)}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              <react_native_1.View style={[styles_1.default.searchContainer,Y&&{borderColor:AppColors_1.AppColors.purple,borderWidth:1.5}]}>
+                <NetworkIcons_1.SearchIcon color={Y?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextWeak}size={15}/>
+                <react_native_1.TextInput placeholder={V("network.searchPlaceholder","Search APIs...")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={o}onChangeText={a}onFocus={()=>Z(!0)}onBlur={()=>Z(!1)}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-                {t.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                {o.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
                     <react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
                       <react_native_1.Text style={{color:AppColors_1.AppColors.purple,fontSize:9.5,fontFamily:AppFonts_1.AppFonts.interBold}}>
-                        {f.length}
+                        {p.length}
                       </react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Pressable onPress={()=>a("")}hitSlop={10}style={styles_1.default.clearBtn}>
@@ -74,26 +74,26 @@
               </react_native_1.View>
 
               <react_native_1.View style={styles_1.default.toolbarRight}>
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.purple}38`,backgroundColor:`${AppColors_1.AppColors.purple}0F`}]}onPress={()=>Z(!0)}hitSlop={6}testID="inspector.network.exportBtn">
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.purple}38`,backgroundColor:`${AppColors_1.AppColors.purple}0F`}]}onPress={()=>J(!0)}hitSlop={6}testID="inspector.network.exportBtn">
                   <NetworkIcons_1.ExportIcon color={AppColors_1.AppColors.purple}size={15}/>
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={re}hitSlop={6}>
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={oe}hitSlop={6}>
                   <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor}size={15}/>
-                  {z.size>0&&<react_native_1.View style={styles_1.default.trashBadge}>
+                  {F.size>0&&<react_native_1.View style={styles_1.default.trashBadge}>
                       <react_native_1.Text style={styles_1.default.trashBadgeText}>
-                        {z.size}
+                        {F.size}
                       </react_native_1.Text>
                     </react_native_1.View>}
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,S&&{borderColor:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}15`}]}onPress={()=>le(e=>!e)}hitSlop={6}accessibilityLabel={M?"Page Accordion Grouping Preserved (Temporarily in List View for Search Results)":S?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
-                  <NetworkIcons_1.LayersIcon color={S?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextStrong}size={16}/>
-                  {S&&<react_native_1.View style={styles_1.default.activeFilterDot}/>}
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,m&&{borderColor:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}15`}]}onPress={()=>re(e=>!e)}hitSlop={6}accessibilityLabel={q?"Page Accordion Grouping Preserved (Temporarily in List View for Search Results)":m?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
+                  <NetworkIcons_1.LayersIcon color={m?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextStrong}size={16}/>
+                  {m&&<react_native_1.View style={styles_1.default.activeFilterDot}/>}
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={styles_1.default.toolbarBtn}onPress={()=>F(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <NetworkIcons_1.SortArrowIcon direction={ae==="newest"?"down":"up"}color={AppColors_1.AppColors.grayTextStrong}size={18}/>
+                <TouchableScale_1.default style={styles_1.default.toolbarBtn}onPress={()=>I(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <NetworkIcons_1.SortArrowIcon direction={le==="newest"?"down":"up"}color={AppColors_1.AppColors.grayTextStrong}size={18}/>
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>
@@ -101,7 +101,7 @@
             
             <react_native_1.View style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
               <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {pe.map(e=>{const s=x===e.id,n=e.color||AppColors_1.AppColors.purple,c=s?AppColors_1.AppColors.white:n;return<TouchableScale_1.default testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{D(s?"all":e.id)}}>
+                {pe.map(e=>{const s=z===e.id,n=e.color||AppColors_1.AppColors.purple,c=s?AppColors_1.AppColors.white:n;return<TouchableScale_1.default testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{E(s?"all":e.id)}}>
                       <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:s?n:`${n}12`,borderWidth:1,borderColor:s?n:`${n}30`,gap:5}}>
                         {e.id==="all"&&<NetworkIcons_1.LayersIcon size={11}color={c}/>}
                         {e.id==="errors"&&<NetworkIcons_1.CircleXIcon size={11}color={c}/>}
@@ -122,11 +122,11 @@
                     </TouchableScale_1.default>})}
               </react_native_1.ScrollView>
 
-              <TouchableScale_1.default onPress={()=>Y(!0)}style={{flexShrink:0}}>
+              <TouchableScale_1.default onPress={()=>X(!0)}style={{flexShrink:0}}>
                 <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:C?`${AppColors_1.AppColors.purple}20`:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:C?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayBorderSecondary,gap:5,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
                   <NetworkIcons_1.FilterIcon size={11}color={C?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}/>
                   <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:C?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}}>
-                    {A("network.moreFilters","More Filters")}
+                    {V("network.moreFilters","More Filters")}
                   </react_native_1.Text>
                   {C&&<react_native_1.View style={{backgroundColor:AppColors_1.AppColors.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
                       <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.white}}>
@@ -138,11 +138,11 @@
             </react_native_1.View>
 
             
-            {(x!=="all"||t.trim().length>0||C||f.length!==P.length)&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${AppColors_1.AppColors.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
+            {(z!=="all"||o.trim().length>0||C||p.length!==R.length)&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${AppColors_1.AppColors.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
                 <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.purple}}>
-                  Showing {f.length} of {V.length} requests
+                  Showing {p.length} of {v.length} requests
                 </react_native_1.Text>
-                <TouchableScale_1.default onPress={()=>{a(""),D("all"),m(new Set),T(new Set),I("all"),k("all"),L("time_desc"),i("all")}}>
+                <TouchableScale_1.default onPress={()=>{a(""),E("all"),T(new Set),A(new Set),k("all"),L("all"),P("time_desc"),i("all")}}>
                   <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.errorColor}}>
                     Clear All Filters
                   </react_native_1.Text>
@@ -150,13 +150,13 @@
               </react_native_1.View>}
           </react_native_1.View>
 
-        <react_native_1.FlatList ref={J}data={$}keyExtractor={ne}renderItem={fe}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<EmptyState_1.default isSearch={t.length>0||C||x!=="all"}searchQuery={t}customTitle={t.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{a(""),m(new Set),T(new Set),I("all"),k("all"),L("time_desc"),D("all"),i("all")}}/>}ListFooterComponent={l.length>0?<react_native_1.View style={{paddingBottom:24}}>
-              <EndOfListFooter_1.default count={g?f.length:Math.min(B,f.length)}totalCount={f.length}label="requests"hasMore={!g&&f.length>B}loadMoreStep={30}onLoadMore={()=>oe(e=>e+30)}/>
+        <react_native_1.FlatList ref={K}data={se}keyExtractor={ne}renderItem={fe}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<EmptyState_1.default isSearch={o.length>0||C||z!=="all"}searchQuery={o}customTitle={o.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{a(""),T(new Set),A(new Set),k("all"),L("all"),P("time_desc"),E("all"),i("all")}}/>}ListFooterComponent={l.length>0?<react_native_1.View style={{paddingBottom:24}}>
+              <EndOfListFooter_1.default count={f?p.length:Math.min(M,p.length)}totalCount={p.length}label="requests"hasMore={!f&&p.length>M}loadMoreStep={30}onLoadMore={()=>ee(e=>e+30)}/>
             </react_native_1.View>:null}style={{flex:1}}contentContainerStyle={[styles_1.default.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <NetworkFilterModal_1.default visible={ie}onClose={()=>Y(!1)}filters={de}onApply={ue}searchQuery={t}/>
+      <NetworkFilterModal_1.default visible={ae}onClose={()=>X(!1)}filters={de}onApply={ue}searchQuery={o}/>
 
       
-      <NetworkExportModal_1.default visible={se}onClose={()=>Z(!1)}filteredLogs={f}allLogs={V}/>
+      <NetworkExportModal_1.default visible={ie}onClose={()=>J(!1)}filteredLogs={p}allLogs={v}/>
     </react_native_1.View>});exports.default=NetworkTab;

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

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

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

@@ -1,10 +1,11 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(r,e,o,t){t===void 0&&(t=o);var n=Object.getOwnPropertyDescriptor(e,o);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[o]}}),Object.defineProperty(r,t,n)}):(function(r,e,o,t){t===void 0&&(t=o),r[t]=e[o]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(r,e){Object.defineProperty(r,"default",{enumerable:!0,value:e})}):function(r,e){r.default=e}),__importStar=this&&this.__importStar||(function(){var r=function(e){return r=Object.getOwnPropertyNames||function(o){var t=[];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[t.length]=n);return t},r(e)};return function(e){if(e&&e.__esModule)return e;var o={};if(e!=null)for(var t=r(e),n=0;n<t.length;n++)t[n]!=="default"&&__createBinding(o,e,t[n]);return __setModuleDefault(o,e),o}})(),__importDefault=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SecondaryTelemetryStrip=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_linear_gradient_1=__importDefault(require("react-native-linear-gradient")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),NetworkIcons_1=require("../NetworkIcons"),NativeInspector_1=require("../../native/NativeInspector"),networkLogger_1=require("../../customHooks/networkLogger"),InspectorContext_1=require("./InspectorContext"),i18n_1=require("../../i18n"),SecondaryTelemetryStrip=()=>{const{t:r}=(0,i18n_1.useTranslation)(),{switchActiveTab:e,peekMode:o}=(0,InspectorContext_1.useInspector)(),[t,n]=(0,react_1.useState)(60),[a,F]=(0,react_1.useState)(null),[f,y]=(0,react_1.useState)(0),v=(0,react_1.useRef)(0),S=(0,react_1.useRef)(Date.now());(0,react_1.useEffect)(()=>{let s;const c=()=>{v.current++;const l=Date.now(),u=l-S.current;if(u>=1e3){const h=Math.min(60,Math.round(v.current*1e3/u));n(h),v.current=0,S.current=l}s=requestAnimationFrame(c)};return s=requestAnimationFrame(c),()=>cancelAnimationFrame(s)},[]);const p=(0,react_1.useRef)(0),g=(0,react_1.useRef)(Date.now());(0,react_1.useEffect)(()=>{const s=(0,networkLogger_1.subscribeNetworkLogs)(l=>{if(!l||l.length===0){y(0);return}const u=Date.now(),h=l.slice(0,10);let m=0,w=0,_=0;for(const i of h){let x=0,B=0;i.request&&(x=typeof i.request=="string"?i.request.length:JSON.stringify(i.request).length),i.response&&(B=typeof i.response=="string"?i.response.length:JSON.stringify(i.response).length);const A=x+B;if(A>0&&i.duration&&i.duration>0){const I=A*8/(i.duration/1e3)/1e3;I>0&&_===0&&(_=I),m+=A,w+=i.duration}}let d=0;w>0&&m>0?d=m*8/(w/1e3)/1e3:_>0&&(d=_),d>0?(p.current=d,g.current=u,y(Math.round(d*10)/10)):p.current>0&&u-g.current<12e3&&y(Math.round(p.current*10)/10)}),c=setInterval(()=>{Date.now()-g.current>15e3&&p.current>0&&(p.current=0,y(0))},3e3);return()=>{s(),clearInterval(c)}},[]),(0,react_1.useEffect)(()=>{let s=!0;const c=async()=>{try{const u=await(0,NativeInspector_1.getNativeDeviceMetrics)();s&&u&&F(u)}catch{}};c();const l=setInterval(c,4e3);return()=>{s=!1,clearInterval(l)}},[]);const M=t>=55?AppColors_1.AppColors.emerald400:t>=30?AppColors_1.AppColors.amber400:AppColors_1.AppColors.rose400,C=(0,react_1.useMemo)(()=>{if(a?.usedRAM&&a?.totalRAM){const s=(a.usedRAM/1073741824).toFixed(2),c=(a.totalRAM/(1024*1024*1024)).toFixed(1);return`${s} / ${c} GB RAM`}return a?.residentMemory?`${(a.residentMemory/1073741824).toFixed(2)} GB RAM`:a?.usedRAM?`${(a.usedRAM/1073741824).toFixed(2)} GB RAM`:null},[a]),b=a?.batteryPercent,T=a?.isCharging;return<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.telemetrySubHeaderGradStart,AppColors_1.AppColors.telemetrySubHeaderGradMid,AppColors_1.AppColors.telemetrySubHeaderGradEnd]}start={{x:0,y:0}}end={{x:1,y:0}}style={stripStyles.container}>
-      <react_native_1.TouchableOpacity activeOpacity={.8}onPress={()=>e?.("device")}style={stripStyles.inner}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,r,n){n===void 0&&(n=r);var o=Object.getOwnPropertyDescriptor(e,r);(!o||("get"in o?!e.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(t,n,o)}):(function(t,e,r,n){n===void 0&&(n=r),t[n]=e[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(r){var n=[];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[n.length]=o);return n},t(e)};return function(e){if(e&&e.__esModule)return e;var r={};if(e!=null)for(var n=t(e),o=0;o<n.length;o++)n[o]!=="default"&&__createBinding(r,e,n[o]);return __setModuleDefault(r,e),r}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SecondaryTelemetryStrip=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_linear_gradient_1=__importDefault(require("react-native-linear-gradient")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),NetworkIcons_1=require("../NetworkIcons"),NativeInspector_1=require("../../native/NativeInspector"),networkLogger_1=require("../../customHooks/networkLogger"),InspectorContext_1=require("./InspectorContext"),i18n_1=require("../../i18n");exports.SecondaryTelemetryStrip=react_1.default.memo(()=>{const{t}=(0,i18n_1.useTranslation)(),{switchActiveTab:e}=(0,InspectorContext_1.useInspector)(),[r,n]=(0,react_1.useState)(60),[o,T]=(0,react_1.useState)(60),[c,R]=(0,react_1.useState)(null),[d,m]=(0,react_1.useState)(0),g=(0,react_1.useRef)(new react_native_1.Animated.Value(.4)).current;(0,react_1.useEffect)(()=>{const s=react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(g,{toValue:1,duration:900,useNativeDriver:!0}),react_native_1.Animated.timing(g,{toValue:.4,duration:900,useNativeDriver:!0})]));return s.start(),()=>s.stop()},[g]);const b=(0,react_1.useRef)(0),F=(0,react_1.useRef)(Date.now());(0,react_1.useEffect)(()=>{(0,NativeInspector_1.startNativeFpsMonitoring)().catch(()=>{});const s=setInterval(async()=>{try{const i=await(0,NativeInspector_1.getNativeFpsMetrics)();if(i&&typeof i.fps=="number"&&i.fps>0){n(Math.round(i.fps)),i.targetFps&&T(Math.round(i.targetFps));return}}catch{}const p=Date.now(),v=p-F.current;if(v>=1e3){const i=Math.min(60,Math.round(b.current*1e3/v));n(i),b.current=0,F.current=p}},1e3);let l;const u=()=>{b.current++,l=requestAnimationFrame(u)};return l=requestAnimationFrame(u),()=>{clearInterval(s),cancelAnimationFrame(l),(0,NativeInspector_1.stopNativeFpsMonitoring)().catch(()=>{})}},[]);const f=(0,react_1.useRef)(0),h=(0,react_1.useRef)(Date.now());(0,react_1.useEffect)(()=>{const s=(0,networkLogger_1.subscribeNetworkLogs)(u=>{if(!u||u.length===0){m(0);return}const p=Date.now(),v=u.slice(0,10);let i=0,S=0,_=0;for(const a of v){let I=0,B=0;a.request&&(I=typeof a.request=="string"?a.request.length:JSON.stringify(a.request).length),a.response&&(B=typeof a.response=="string"?a.response.length:JSON.stringify(a.response).length);const C=I+B;if(C>0&&a.duration&&a.duration>0){const D=C*8/(a.duration/1e3)/1e3;D>0&&_===0&&(_=D),i+=C,S+=a.duration}}let y=0;S>0&&i>0?y=i*8/(S/1e3)/1e3:_>0&&(y=_),y>0?(f.current=y,h.current=p,m(Math.round(y*10)/10)):f.current>0&&p-h.current<12e3&&m(Math.round(f.current*10)/10)}),l=setInterval(()=>{Date.now()-h.current>15e3&&f.current>0&&(f.current=0,m(0))},3e3);return()=>{s(),clearInterval(l)}},[]),(0,react_1.useEffect)(()=>{let s=!0;const l=async()=>{try{const p=await(0,NativeInspector_1.getNativeDeviceMetrics)();s&&p&&R(p)}catch{}};l();const u=setInterval(l,4e3);return()=>{s=!1,clearInterval(u)}},[]);const w=r>=o-5?AppColors_1.AppColors.emerald400:r>=o/2?AppColors_1.AppColors.amber400:AppColors_1.AppColors.rose400,A=(0,react_1.useMemo)(()=>{if(c?.usedRAM&&c?.totalRAM){const s=(c.usedRAM/1073741824).toFixed(2),l=(c.totalRAM/(1024*1024*1024)).toFixed(1);return`${s} / ${l} GB`}return c?.residentMemory?`${Math.round(c.residentMemory/1048576)} MB RAM`:c?.usedRAM?`${Math.round(c.usedRAM/1048576)} MB RAM`:null},[c]),M=c?.batteryPercent,x=c?.isCharging,q=`Telemetry: ${r} FPS of ${o}, Network speed ${d} kbps, ${A||""}`;return<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.telemetrySubHeaderGradStart,AppColors_1.AppColors.telemetrySubHeaderGradMid,AppColors_1.AppColors.telemetrySubHeaderGradEnd]}start={{x:0,y:0}}end={{x:1,y:0}}style={stripStyles.container}>
+      <react_native_1.TouchableOpacity activeOpacity={.75}onPress={()=>e?.("device")}accessible={!0}accessibilityRole="summary"accessibilityLabel={q}accessibilityHint="Double tap to open Device Diagnostics tab"style={stripStyles.inner}>
         
         <react_native_1.View style={stripStyles.item}>
-          <NetworkIcons_1.ActivityIcon size={11.5}color={M}/>
-          <react_native_1.Text style={[stripStyles.label,{color:M,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-            {t} {r("telemetry.fps","FPS")}
+          <react_native_1.Animated.View style={[stripStyles.pulseDot,{backgroundColor:w,opacity:g}]}/>
+          <NetworkIcons_1.ActivityIcon size={11}color={w}/>
+          <react_native_1.Text style={[stripStyles.monoLabel,{color:w}]}>
+            {r} {t("telemetry.fps","FPS")}
           </react_native_1.Text>
         </react_native_1.View>
 
@@ -12,32 +13,32 @@
 
         
         <react_native_1.View style={stripStyles.item}>
-          <NetworkIcons_1.SpeedIcon size={11.5}color={AppColors_1.AppColors.sky300}/>
-          <react_native_1.Text style={[stripStyles.label,{color:AppColors_1.AppColors.sky300}]}>
-            {f>=1e3?`${(f/1e3).toFixed(2)} Mbps`:f>0?`${f.toFixed(1)} kbps`:"0.0 kbps"}
+          <NetworkIcons_1.SpeedIcon size={11}color={AppColors_1.AppColors.sky400}/>
+          <react_native_1.Text style={[stripStyles.monoLabel,{color:AppColors_1.AppColors.sky400}]}>
+            {d>=1e3?`${(d/1e3).toFixed(2)} Mbps`:d>0?`${d.toFixed(1)} kbps`:"0.0 kbps"}
           </react_native_1.Text>
         </react_native_1.View>
 
         
-        {C&&<>
+        {A&&<>
             <react_native_1.View style={stripStyles.divider}/>
             <react_native_1.View style={stripStyles.item}>
               <NetworkIcons_1.BoltIcon size={11}color={AppColors_1.AppColors.purple400}/>
-              <react_native_1.Text style={[stripStyles.label,{color:AppColors_1.AppColors.purple400}]}>
-                {C}
+              <react_native_1.Text style={[stripStyles.monoLabel,{color:AppColors_1.AppColors.purple400}]}>
+                {A}
               </react_native_1.Text>
             </react_native_1.View>
           </>}
 
         
-        {b!==void 0&&b>=0&&<>
+        {M!==void 0&&M>=0&&<>
             <react_native_1.View style={stripStyles.divider}/>
             <react_native_1.View style={stripStyles.item}>
-              {T?<NetworkIcons_1.BatteryChargingIcon size={11.5}color={AppColors_1.AppColors.emerald400}/>:<NetworkIcons_1.BatteryFullIcon size={11.5}color={AppColors_1.AppColors.slate400}/>}
-              <react_native_1.Text style={stripStyles.label}>
-                {Math.round(b)}%
+              {x?<NetworkIcons_1.BatteryChargingIcon size={11}color={AppColors_1.AppColors.emerald400}/>:<NetworkIcons_1.BatteryFullIcon size={11}color={AppColors_1.AppColors.slate400}/>}
+              <react_native_1.Text style={[stripStyles.monoLabel,{color:x?AppColors_1.AppColors.emerald400:AppColors_1.AppColors.slate400}]}>
+                {Math.round(M)}%
               </react_native_1.Text>
             </react_native_1.View>
           </>}
       </react_native_1.TouchableOpacity>
-    </react_native_linear_gradient_1.default>};exports.SecondaryTelemetryStrip=SecondaryTelemetryStrip;const stripStyles=react_native_1.StyleSheet.create({container:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth,borderBottomColor:AppColors_1.AppColors.telemetrySubHeaderBorder,borderTopWidth:react_native_1.StyleSheet.hairlineWidth,borderTopColor:AppColors_1.AppColors.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:AppColors_1.AppColors.borderSubtle},label:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:9,lineHeight:11.5,color:AppColors_1.AppColors.textPrimary,letterSpacing:.1}});
+    </react_native_linear_gradient_1.default>});const stripStyles=react_native_1.StyleSheet.create({container:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth,borderBottomColor:AppColors_1.AppColors.telemetrySubHeaderBorder,borderTopWidth:react_native_1.StyleSheet.hairlineWidth,borderTopColor:AppColors_1.AppColors.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:AppColors_1.AppColors.borderSubtle},monoLabel:{fontFamily:AppFonts_1.AppFonts.monoFont,fontSize:9.5,lineHeight:12,letterSpacing:.2,fontVariant:["tabular-nums"]}});exports.default=exports.SecondaryTelemetryStrip;