react-native-inapp-inspector 2.3.25 → 2.4.0

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

@@ -1,151 +1,153 @@
-import U,{useCallback as ue,useMemo as A,useRef as Ee}from"react";import{FlatList as He,Platform as qe,Pressable as Ae,ScrollView as We,Text as I,TextInput as $e,View as S}from"react-native";import{useInspector as Ge}from"./InspectorContext";import M from"../TouchableScale";import Se from"../AnimatedEntrance";import Qe from"../DomainHeader";import _e from"../LogCard";import Ue from"../EmptyState";import Ke from"../EndOfListFooter";import Xe from"./NetworkFilterModal";import b from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{METHOD_COLORS as Ce}from"../../constants";import{useTranslation as Je}from"../../i18n";import{SearchIcon as Ye,ClearIcon as Ze,TrashIcon as St,SortArrowIcon as Ct,FilterIcon as Te,CircleCheckIcon as Tt,CircleXIcon as It,LayersIcon as Ft,HeaderPauseIcon as Rt,ClockIcon as Ie,RequestIcon as Bt,ResponseIcon as Vt,AtomIcon as Pt}from"../NetworkIcons";const Lt=U.memo(()=>{const{groupedData:j,search:L,setSearch:W,searchScope:Dt,setSearchScope:Fe,isRegexSearch:Ot,setIsRegexSearch:vt,isCaseSensitive:Nt,setIsCaseSensitive:Mt,quickFilter:K,setQuickFilter:X,handleDelete:Re,selectedLogs:$,sortOrder:J,setSortOrder:G,statusFilters:T,setStatusFilters:H,methodFilters:x,setMethodFilters:q,availableMethods:Et,filteredLogs:O,logs:P,toggleSectionFilter:ee,toggleSectionCollapse:te,minStart:oe,totalRange:re,newLogIds:le,toggleSelect:se,setSelected:ae,isNetworkPaused:Y,setIsNetworkPaused:Be}=Ge(),{t:ie}=Je(),Ve=Ee(null),[Q,Pe]=U.useState(100),Le=A(()=>{let t=0;const C=[];for(const w of j)w.type==="header"?C.push(w):w.type==="log"&&t<Q&&(C.push(w),t++);return C},[j,Q]),[De,Z]=U.useState(!1),[ne,ce]=U.useState(!1),Oe=A(()=>({statusCodes:T.size>0?new Set(T):new Set(["all"]),methods:x.size>0?new Set(x):new Set(["all"]),latency:"all",protocol:"all",sortBy:J==="newest"?"time_desc":"time_asc"}),[T,x,J]),ve=ue(t=>{t.statusCodes.has("all")||t.statusCodes.size===0?H(new Set):H(new Set(t.statusCodes)),t.methods.has("all")||t.methods.size===0?q(new Set):q(new Set([...t.methods].map(C=>C))),t.sortBy==="time_asc"?G("oldest"):G("newest")},[H,q,G]),D=A(()=>{let t=0,C=0,w=0,z=0,F=0,_=0;return P.forEach(V=>{const E=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(E)&&E>=400?t++:!isNaN(E)&&E>=200&&E<400&&C++,(V.duration||0)>=500&&w++;const R=(V.method||"").toUpperCase();R==="POST"&&z++,R==="GET"&&F++;const N=(V.url||"").toLowerCase(),de=(V.client||"").toLowerCase();(N.includes("graphql")||de.includes("graphql")||de.includes("apollo"))&&_++}),{all:P.length,errors:t,success:C,slow:w,post:z,get:F,graphql:_}},[P]),Ne=A(()=>[{id:"all",label:"All",count:D.all,color:e.purple},{id:"errors",label:"Errors",count:D.errors,color:e.errorColor},{id:"success",label:"2xx OK",count:D.success,color:e.greenColor},{id:"slow",label:"Slow >500ms",count:D.slow,color:e.warningIconGold},{id:"POST",label:"POST",count:D.post,color:Ce.POST||"#3B82F6"},{id:"GET",label:"GET",count:D.get,color:Ce.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:D.graphql,color:e.graphqlPink}],[D]),v=A(()=>{if(!P||P.length===0)return null;let t=0,C=0,w=0,z=0;const F=[];P.forEach(R=>{if(R.status!=null){C++;const N=typeof R.status=="number"?R.status:parseInt(String(R.status),10);isNaN(N)||N>=200&&N<400&&t++}typeof R.duration=="number"&&R.duration>0&&(F.push(R.duration),w+=R.duration)}),F.sort((R,N)=>R-N);const _=F.length>0?Math.round(w/F.length):0,V=F.length>0?F[Math.floor(F.length*.95)]:0;return{successRate:C>0?Math.round(t/C*100):100,avgDuration:_,p95:V,totalCount:P.length}},[P]),Me=ue(({item:t,index:C})=>{if(t.type==="header")return<Se index={C}distance={8}>
-            <Qe pageName={t.pageName}color={t.color}stats={t.stats}activeFilters={t.activeFilters}onToggleFilter={ee}isCollapsed={t.isCollapsed}onToggleCollapse={te}isFirst={t.isFirst}timestamp={t.timestamp}/>
-          </Se>;const{log:w,isLast:z,color:F}=t;return<Se index={C}distance={8}style={[b.treeNodeRow,z&&b.treeNodeRowLast]}>
-          <S style={b.treeLines}>
-            <S style={[b.modernTreeLine,{borderColor:F},z&&b.modernTreeLineLast]}/>
-            {!z&&<S style={[b.modernTreeBranch,{borderColor:F}]}/>}
-          </S>
-          <S style={b.treeCardWrapper}>
-            <_e item={w}isSelected={$.has(w.id)}onToggleSelect={se}onPress={()=>{ae(w)}}timelineMinStart={oe}timelineTotalRange={re}isNew={le.has(w.id)}searchStr={L}/>
-          </S>
-        </Se>},[oe,re,le,$,se,L,ee,te,ae]);return<S style={{flex:1}}>
-      <S style={{marginTop:6}}>
-            
-            {v!=null&&v.totalCount>0&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:5.5,marginHorizontal:12,marginBottom:6,borderWidth:1,borderColor:e.dividerColor}}>
-                
-                <S style={{flexDirection:"row",alignItems:"center",gap:4.5}}>
-                  <S style={{width:6,height:6,borderRadius:3,backgroundColor:v.successRate>=95?e.greenColor:v.successRate>=80?e.amber500:e.errorColor}}/>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.primaryBlack}}>
-                    {v.successRate}%
-                  </I>
-                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
-                    {ie("network.successRate")}
-                  </I>
-                </S>
-
-                <S style={{width:1,height:11,backgroundColor:e.dividerColor}}/>
-
-                
-                <S style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <Ie color={e.purple}size={10}/>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.purple}}>
-                    {v.avgDuration}ms
-                  </I>
-                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
-                    {ie("network.avgLatency")}
-                  </I>
-                </S>
+import X,{useCallback as de,useMemo as J,useRef as Oe}from"react";import{FlatList as $e,Platform as qe,Pressable as Ne,ScrollView as He,Text as R,TextInput as Ae,View as C}from"react-native";import{useInspector as De}from"./InspectorContext";import O from"../TouchableScale";import Ce from"../AnimatedEntrance";import Me from"../DomainHeader";import Ee from"../LogCard";import We from"../EmptyState";import Ge from"../EndOfListFooter";import Qe from"./NetworkFilterModal";import b from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Se}from"../../constants";import{useTranslation as _e}from"../../i18n";import{SearchIcon as Ue,ClearIcon as Ke,TrashIcon as Xe,SortArrowIcon as Je,FilterIcon as Te,ChevronIcon as Ye,CheckIcon as Ze,CircleCheckIcon as Co,CircleXIcon as So,LayersIcon as To,ClockIcon as Vo,RequestIcon as Io,ResponseIcon as Ro,AtomIcon as Fo}from"../NetworkIcons";const Lo=X.memo(()=>{const{groupedData:Y,loadMoreSection:Z,search:F,setSearch:M,setSearchScope:xe,quickFilter:G,setQuickFilter:j,handleDelete:Ve,selectedLogs:E,sortOrder:Q,setSortOrder:v,statusFilters:x,setStatusFilters:q,methodFilters:V,setMethodFilters:N,filteredLogs:$,logs:H,toggleSectionFilter:ee,toggleSectionCollapse:oe,minStart:te,totalRange:re,newLogIds:le,toggleSelect:ie,setSelected:se}=De(),{t:_}=_e(),Ie=Oe(null),[Re,U]=X.useState(!1),[ae,ne]=X.useState(!1),ke=J(()=>({statusCodes:x.size>0?new Set(x):new Set(["all"]),methods:V.size>0?new Set(V):new Set(["all"]),latency:"all",protocol:"all",sortBy:Q==="newest"?"time_desc":"time_asc"}),[x,V,Q]),Fe=de(o=>{o.statusCodes.has("all")||o.statusCodes.size===0?q(new Set):q(new Set(o.statusCodes)),o.methods.has("all")||o.methods.size===0?N(new Set):N(new Set([...o.methods].map(z=>z))),o.sortBy==="time_asc"?v("oldest"):v("newest")},[q,N,v]),L=J(()=>{let o=0,z=0,T=0,I=0,A=0,W=0;return H.forEach(S=>{const P=typeof S.status=="number"?S.status:parseInt(String(S.status),10);S.status===0||S.status==null||!isNaN(P)&&P>=400?o++:!isNaN(P)&&P>=200&&P<400&&z++,(S.duration||0)>=500&&T++;const B=(S.method||"").toUpperCase();B==="POST"&&I++,B==="GET"&&A++;const K=(S.url||"").toLowerCase(),D=(S.client||"").toLowerCase();(K.includes("graphql")||D.includes("graphql")||D.includes("apollo"))&&W++}),{all:H.length,errors:o,success:z,slow:T,post:I,get:A,graphql:W}},[H]),Le=J(()=>[{id:"all",label:"All",count:L.all,color:e.purple},{id:"errors",label:"Errors",count:L.errors,color:e.errorColor},{id:"success",label:"2xx OK",count:L.success,color:e.greenColor},{id:"slow",label:"Slow >500ms",count:L.slow,color:e.warningIconGold},{id:"POST",label:"POST",count:L.post,color:Se.POST||"#3B82F6"},{id:"GET",label:"GET",count:L.get,color:Se.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:L.graphql,color:e.graphqlPink}],[L]),Be=de(({item:o,index:z})=>{if(o.type==="header")return<Ce index={z}distance={8}>
+            <Me pageName={o.pageName}color={o.color}stats={o.stats}activeFilters={o.activeFilters}onToggleFilter={ee}isCollapsed={o.isCollapsed}onToggleCollapse={oe}isFirst={o.isFirst}timestamp={o.timestamp}/>
+          </Ce>;if(o.type==="loadMore"){const{pageName:W,color:S,remainingCount:P,totalCount:B,loadedCount:K,loadMoreStep:D,hasMore:Pe}=o;return<C style={[b.treeNodeRow,b.treeNodeRowLast]}>
+            <C style={b.treeLines}>
+              <C style={[b.modernTreeLine,{borderColor:S},b.modernTreeLineLast]}/>
+            </C>
+            <C style={b.treeCardWrapper}>
+              {Pe?<O onPress={()=>Z(W,50)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${S}14`,borderWidth:1.5,borderColor:`${S}40`,shadowColor:S,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+                  <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                    <C style={{width:22,height:22,borderRadius:11,backgroundColor:S,alignItems:"center",justifyContent:"center",shadowColor:S,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
+                      <Ye color={e.white}size={9}direction="down"/>
+                    </C>
+                    <C>
+                      <R style={{fontFamily:k.interBold,fontSize:12,color:S}}>
+                        {_("footer.loadMoreRequests",{count:D,defaultValue:`Load ${D} More Requests`})}
+                      </R>
+                      <R style={{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak,marginTop:1}}>
+                        Showing {K} of {B} requests
+                      </R>
+                    </C>
+                  </C>
 
-                <S style={{width:1,height:11,backgroundColor:e.dividerColor}}/>
-
-                
-                <S style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.primaryBlack}}>
-                    {v.p95}ms
-                  </I>
-                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
-                    P95
-                  </I>
-                </S>
-              </S>}
+                  <C style={{flexDirection:"row",alignItems:"center",backgroundColor:`${S}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${S}40`,gap:3}}>
+                    <R style={{fontFamily:k.interBold,fontSize:10.5,color:S}}>
+                      +{P}
+                    </R>
+                    <R style={{fontFamily:k.interRegular,fontSize:9,color:S}}>
+                      more
+                    </R>
+                  </C>
+                </O>:<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${S}0A`,borderWidth:1,borderColor:`${S}25`}}>
+                  <C style={{flexDirection:"row",alignItems:"center",gap:7}}>
+                    <C style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${S}25`,alignItems:"center",justifyContent:"center"}}>
+                      <Ze color={S}size={8}/>
+                    </C>
+                    <R style={{fontFamily:k.interMedium,fontSize:11,color:e.grayTextStrong}}>
+                      {_("footer.allLoaded",{count:B,defaultValue:`All ${B} requests loaded`})}
+                    </R>
+                  </C>
 
+                  <C style={{backgroundColor:`${S}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
+                    <R style={{fontFamily:k.interBold,fontSize:9.5,color:S}}>
+                      {B}/{B}
+                    </R>
+                  </C>
+                </C>}
+            </C>
+          </C>}const{log:T,isLast:I,color:A}=o;return<Ce index={z}distance={8}style={[b.treeNodeRow,I&&b.treeNodeRowLast]}>
+          <C style={b.treeLines}>
+            <C style={[b.modernTreeLine,{borderColor:A},I&&b.modernTreeLineLast]}/>
+            {!I&&<C style={[b.modernTreeBranch,{borderColor:A}]}/>}
+          </C>
+          <C style={b.treeCardWrapper}>
+            <Ee item={T}isSelected={E.has(T.id)}onToggleSelect={ie}onPress={()=>{se(T)}}timelineMinStart={te}timelineTotalRange={re}isNew={le.has(T.id)}searchStr={F}/>
+          </C>
+        </Ce>},[te,re,le,E,ie,F,ee,oe,Z,se,_]);return<C style={{flex:1}}>
+      <C style={{marginTop:6}}>
             
-            <S style={b.toolbarRow}>
-              <S style={[b.searchContainer,ne&&{borderColor:e.purple,borderWidth:1.5}]}>
-                <Ye color={ne?e.purple:e.grayTextWeak}size={15}/>
-                <$e placeholder="Search URL, status, method, headers, body..."placeholderTextColor={e.grayTextWeak}value={L}onChangeText={W}onFocus={()=>ce(!0)}onBlur={()=>ce(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
-
-                {L.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                    <S style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                      <I style={{color:e.purple,fontSize:9.5,fontFamily:B.interBold}}>
-                        {O.length}
-                      </I>
-                    </S>
-                    <Ae onPress={()=>W("")}hitSlop={10}style={b.clearBtn}>
-                      <Ze color={e.grayTextWeak}size={13}/>
-                    </Ae>
-                  </S>}
-              </S>
+            <C style={b.toolbarRow}>
+              <C style={[b.searchContainer,ae&&{borderColor:e.purple,borderWidth:1.5}]}>
+                <Ue color={ae?e.purple:e.grayTextWeak}size={15}/>
+                <Ae placeholder="Search URL, status, method, headers, body..."placeholderTextColor={e.grayTextWeak}value={F}onChangeText={M}onFocus={()=>ne(!0)}onBlur={()=>ne(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-              <S style={b.toolbarRight}>
-                <M style={[b.toolbarBtn,Y&&{borderColor:`${e.darkOrange}50`,backgroundColor:`${e.darkOrange}18`}]}onPress={()=>Be(t=>!t)}hitSlop={6}>
-                  <Rt isPaused={Y}color={Y?e.darkOrange:e.grayTextStrong}size={16}/>
-                </M>
+                {F.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                    <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                      <R style={{color:e.purple,fontSize:9.5,fontFamily:k.interBold}}>
+                        {$.length}
+                      </R>
+                    </C>
+                    <Ne onPress={()=>M("")}hitSlop={10}style={b.clearBtn}>
+                      <Ke color={e.grayTextWeak}size={13}/>
+                    </Ne>
+                  </C>}
+              </C>
 
-                <M style={[b.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={Re}hitSlop={6}>
-                  <St color={e.errorColor}size={15}/>
-                  {$.size>0&&<S style={b.trashBadge}>
-                      <I style={b.trashBadgeText}>
-                        {$.size}
-                      </I>
-                    </S>}
-                </M>
+              <C style={b.toolbarRight}>
+                <O style={[b.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={Ve}hitSlop={6}>
+                  <Xe color={e.errorColor}size={15}/>
+                  {E.size>0&&<C style={b.trashBadge}>
+                      <R style={b.trashBadgeText}>
+                        {E.size}
+                      </R>
+                    </C>}
+                </O>
 
-                <M style={b.toolbarBtn}onPress={()=>G(t=>t==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <Ct direction={J==="newest"?"down":"up"}color={e.grayTextStrong}size={18}/>
-                </M>
+                <O style={b.toolbarBtn}onPress={()=>v(o=>o==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <Je direction={Q==="newest"?"down":"up"}color={e.grayTextStrong}size={18}/>
+                </O>
 
-                <M style={[b.toolbarBtn,(T.size>0||x.size>0)&&{borderColor:e.purple,backgroundColor:`${e.purple}15`}]}onPress={()=>Z(!0)}hitSlop={6}>
-                  <Te color={T.size>0||x.size>0?e.purple:e.grayTextStrong}size={16}/>
-                  {(T.size>0||x.size>0)&&<S style={b.activeFilterDot}/>}
-                </M>
-              </S>
-            </S>
+                <O style={[b.toolbarBtn,(x.size>0||V.size>0)&&{borderColor:e.purple,backgroundColor:`${e.purple}15`}]}onPress={()=>U(!0)}hitSlop={6}>
+                  <Te color={x.size>0||V.size>0?e.purple:e.grayTextStrong}size={16}/>
+                  {(x.size>0||V.size>0)&&<C style={b.activeFilterDot}/>}
+                </O>
+              </C>
+            </C>
 
             
-            <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
-              <We horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {Ne.map(t=>{const C=K===t.id,w=t.color||e.purple,z=C?e.white:w;return<M key={t.id}onPress={()=>{X(C?"all":t.id)}}>
-                      <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:C?w:`${w}12`,borderWidth:1,borderColor:C?w:`${w}30`,gap:5}}>
-                        {t.id==="all"&&<Ft size={11}color={z}/>}
-                        {t.id==="errors"&&<It size={11}color={z}/>}
-                        {t.id==="success"&&<Tt size={11}color={z}/>}
-                        {t.id==="slow"&&<Ie size={11}color={z}/>}
-                        {t.id==="POST"&&<Bt size={11}color={z}/>}
-                        {t.id==="GET"&&<Vt size={11}color={z}/>}
-                        {t.id==="graphql"&&<Pt size={11}color={z}/>}
-                        <I style={{fontFamily:B.interBold,fontSize:10.5,color:C?e.white:e.primaryBlack}}>
-                          {t.label}
-                        </I>
-                        <S style={{backgroundColor:C?"rgba(255,255,255,0.25)":`${w}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                          <I style={{fontFamily:B.interBold,fontSize:9,color:C?e.white:w}}>
-                            {t.count}
-                          </I>
-                        </S>
-                      </S>
-                    </M>})}
-              </We>
+            <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
+              <He horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+                {Le.map(o=>{const z=G===o.id,T=o.color||e.purple,I=z?e.white:T;return<O key={o.id}onPress={()=>{j(z?"all":o.id)}}>
+                      <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:z?T:`${T}12`,borderWidth:1,borderColor:z?T:`${T}30`,gap:5}}>
+                        {o.id==="all"&&<To size={11}color={I}/>}
+                        {o.id==="errors"&&<So size={11}color={I}/>}
+                        {o.id==="success"&&<Co size={11}color={I}/>}
+                        {o.id==="slow"&&<Vo size={11}color={I}/>}
+                        {o.id==="POST"&&<Io size={11}color={I}/>}
+                        {o.id==="GET"&&<Ro size={11}color={I}/>}
+                        {o.id==="graphql"&&<Fo size={11}color={I}/>}
+                        <R style={{fontFamily:k.interBold,fontSize:10.5,color:z?e.white:e.primaryBlack}}>
+                          {o.label}
+                        </R>
+                        <C style={{backgroundColor:z?"rgba(255,255,255,0.25)":`${T}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                          <R style={{fontFamily:k.interBold,fontSize:9,color:z?e.white:T}}>
+                            {o.count}
+                          </R>
+                        </C>
+                      </C>
+                    </O>})}
+              </He>
 
-              <M onPress={()=>Z(!0)}style={{flexShrink:0}}>
-                <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:T.size>0||x.size>0?`${e.purple}20`:e.grayBackground,borderWidth:1,borderColor:T.size>0||x.size>0?e.purple:e.grayBorderSecondary,gap:5,shadowColor:e.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
-                  <Te size={11}color={T.size>0||x.size>0?e.purple:e.grayText}/>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:T.size>0||x.size>0?e.purple:e.grayText}}>
+              <O onPress={()=>U(!0)}style={{flexShrink:0}}>
+                <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:x.size>0||V.size>0?`${e.purple}20`:e.grayBackground,borderWidth:1,borderColor:x.size>0||V.size>0?e.purple:e.grayBorderSecondary,gap:5,shadowColor:e.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
+                  <Te size={11}color={x.size>0||V.size>0?e.purple:e.grayText}/>
+                  <R style={{fontFamily:k.interBold,fontSize:10.5,color:x.size>0||V.size>0?e.purple:e.grayText}}>
                     More Filters
-                  </I>
-                  {(T.size>0||x.size>0)&&<S style={{backgroundColor:e.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
-                      <I style={{fontFamily:B.interBold,fontSize:8.5,color:e.white}}>
-                        {T.size+x.size}
-                      </I>
-                    </S>}
-                </S>
-              </M>
-            </S>
+                  </R>
+                  {(x.size>0||V.size>0)&&<C style={{backgroundColor:e.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
+                      <R style={{fontFamily:k.interBold,fontSize:8.5,color:e.white}}>
+                        {x.size+V.size}
+                      </R>
+                    </C>}
+                </C>
+              </O>
+            </C>
 
             
-            {(K!=="all"||L.trim().length>0||T.size>0||x.size>0||O.length!==P.length)&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${e.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${e.purple}25`}}>
-                <I style={{fontFamily:B.interMedium,fontSize:10.5,color:e.purple}}>
-                  Showing {O.length} of {P.length} requests
-                </I>
-                <M onPress={()=>{W(""),X("all"),H(new Set),q(new Set)}}>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.errorColor}}>
+            {(G!=="all"||F.trim().length>0||x.size>0||V.size>0||$.length!==H.length)&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${e.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${e.purple}25`}}>
+                <R style={{fontFamily:k.interMedium,fontSize:10.5,color:e.purple}}>
+                  Showing {$.length} of {H.length} requests
+                </R>
+                <O onPress={()=>{M(""),j("all"),q(new Set),N(new Set)}}>
+                  <R style={{fontFamily:k.interBold,fontSize:10.5,color:e.errorColor}}>
                     Clear All Filters
-                  </I>
-                </M>
-              </S>}
-          </S>
+                  </R>
+                </O>
+              </C>}
+          </C>
 
-        <He ref={Ve}data={Le}keyExtractor={t=>t?.id?.toString()}renderItem={Me}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={qe.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ue isSearch={L.length>0||T.size>0||x.size>0||K!=="all"}searchQuery={L}customTitle={L.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{W(""),H(new Set),q(new Set),X("all"),Fe("all")}}/>}ListFooterComponent={j.length>0?<Ke count={Math.min(Q,O.length)}totalCount={O.length}label="requests"hasMore={O.length>Q}onLoadMore={()=>Pe(t=>t+10)}/>:null}contentContainerStyle={[b.listContent,O.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <$e ref={Ie}data={Y}keyExtractor={o=>o?.id?.toString()}renderItem={Be}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={qe.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<We isSearch={F.length>0||x.size>0||V.size>0||G!=="all"}searchQuery={F}customTitle={F.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{M(""),q(new Set),N(new Set),j("all"),xe("all")}}/>}ListFooterComponent={Y.length>0?<Ge count={$.length}totalCount={$.length}label="requests"/>:null}contentContainerStyle={[b.listContent,$.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <Xe visible={De}onClose={()=>Z(!1)}filters={Oe}onApply={ve}searchQuery={L}/>
-    </S>});export default Lt;
+      <Qe visible={Re}onClose={()=>U(!1)}filters={ke}onApply={Fe}searchQuery={F}/>
+    </C>});export default Lo;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PushCardProps } from '../../types';
+declare const PushCard: React.NamedExoticComponent<PushCardProps>;
+export default PushCard;

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

@@ -0,0 +1,89 @@
+import O,{useMemo as $}from"react";import{StyleSheet as F,Text as T,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{formatTime as W}from"../../helpers";import{BellIcon as N,ClockIcon as E,ForwardChevronIcon as A,KeyIcon as U,SunIcon as M,MoonIcon as G,ExternalLinkIcon as K,CloudPushIcon as _}from"../NetworkIcons";import D from"../HighlightText";import X from"../TouchableScale";const q=B=>{const r=(B||"").toLowerCase();return r.includes("salesforce")||r==="sfmc"?{badgeColor:e.sky600,border:e.sky600,cardBg:`${e.sky600}04`,label:"SALESFORCE"}:r.includes("fcm")||r.includes("firebase")?{badgeColor:e.firebaseOrange,border:e.firebaseOrange,cardBg:`${e.firebaseOrange}04`,label:"FCM"}:r.includes("apns")||r.includes("apple")?{badgeColor:e.slate700,border:e.slate700,cardBg:`${e.slate700}04`,label:"APNS"}:r.includes("expo")?{badgeColor:e.brandPurple,border:e.brandPurple,cardBg:`${e.brandPurple}04`,label:"EXPO"}:r.includes("notifee")?{badgeColor:e.pink500,border:e.pink500,cardBg:`${e.pink500}04`,label:"NOTIFEE"}:r.includes("onesignal")?{badgeColor:e.errorColor,border:e.errorColor,cardBg:`${e.errorColor}04`,label:"ONESIGNAL"}:{badgeColor:e.purple,border:e.purple,cardBg:`${e.purple}04`,label:(B||"PUSH").toUpperCase()}},J=(B,r)=>{if(r==="opened")return{label:"OPENED",text:e.brandPurple,bg:`${e.brandPurple}14`,border:`${e.brandPurple}30`,Icon:K};const P=(B||"").toLowerCase();return P==="foreground"?{label:"FOREGROUND",text:e.greenColor,bg:`${e.greenColor}14`,border:`${e.greenColor}30`,Icon:M}:P==="background"?{label:"BACKGROUND",text:e.amber600,bg:`${e.amber600}14`,border:`${e.amber600}30`,Icon:G}:{label:(B||"RECEIVED").toUpperCase(),text:e.grayTextWeak,bg:`${e.grayTextWeak}14`,border:`${e.grayTextWeak}30`,Icon:_}},V=O.memo(function({item:r,onPress:P,searchStr:R=""}){const S=$(()=>q(r.source),[r.source]),H=$(()=>J(r.appState,r.action),[r.appState,r.action]),I=$(()=>r.data?Object.keys(r.data).length:0,[r.data]),z=$(()=>!!(r.data?.deepLink||r.data?.openDirectUrl||r.data?._od||r.customDomainAttributes?.openDirectUrl),[r.data,r.customDomainAttributes]),L=H.Icon;return<X onPress={P}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:S.border,backgroundColor:S.cardBg}]}accessibilityRole="button"accessibilityLabel={`Push Notification: ${r.title||"Notification"}`}>
+      <C style={o.cardBody}>
+        
+        <C style={o.cardHeaderRow}>
+          <C style={o.cardHeaderLeft}>
+            <T style={o.serialNumber}>
+              #{r.id?r.id.replace(/^push_/,"").slice(-4):"1"}
+            </T>
+
+            
+            <C style={[o.methodBadge,{backgroundColor:S.badgeColor}]}>
+              <T style={o.methodBadgeText}>{S.label}</T>
+            </C>
+
+            
+            <C style={[o.chip,{backgroundColor:`${S.badgeColor}12`,borderColor:`${S.badgeColor}2E`}]}>
+              <T style={[o.chipText,{color:S.badgeColor}]}numberOfLines={1}>
+                push.{(r.source||"remote").toLowerCase()}
+              </T>
+            </C>
+
+            
+            {I>0&&<C style={[o.chip,{backgroundColor:`${e.teal600}14`,borderColor:`${e.teal600}33`}]}>
+                <T style={[o.chipText,{color:e.teal600}]}>
+                  Payload{`{${I}}`}
+                </T>
+              </C>}
+
+            
+            {z&&<C style={[o.chip,{backgroundColor:`${e.brandPurple}14`,borderColor:`${e.brandPurple}33`}]}>
+                <T style={[o.chipText,{color:e.brandPurple}]}>
+                  🔗 Link
+                </T>
+              </C>}
+          </C>
+
+          
+          <C style={o.cardHeaderRight}>
+            <C style={[o.statusPill,{backgroundColor:H.bg,borderColor:H.border}]}>
+              <L color={H.text}size={9.5}/>
+              <T style={[o.statusPillText,{color:H.text}]}>
+                {H.label}
+              </T>
+            </C>
+            <A color={e.grayTextWeak}size={13}/>
+          </C>
+        </C>
+
+        
+        <C style={o.messageBox}>
+          <D text={r.title||"(No Title)"}searchWords={R?[R]:[]}numberOfLines={1}style={o.messageTitle}highlightStyle={o.highlight}/>
+          <D text={r.body||"(No message body)"}searchWords={R?[R]:[]}numberOfLines={2}style={o.messageBody}highlightStyle={o.highlight}/>
+        </C>
+
+        
+        <C style={o.cardFooterRow}>
+          <C style={o.footerLeft}>
+            <C style={o.cardDateRow}>
+              <E color={e.slate400}size={10}/>
+              <T style={o.cardDateText}numberOfLines={1}>
+                {W(r.timestamp)}
+              </T>
+            </C>
+
+            {r.channelId?<C style={o.callerChip}>
+                <N color={e.skySoftText}size={8.5}/>
+                <T style={o.callerChipText}numberOfLines={1}ellipsizeMode="middle">
+                  {r.channelId}
+                </T>
+              </C>:null}
+
+            {r.customDomainAttributes?.journeyName?<C style={[o.callerChip,{backgroundColor:`${e.brandPurple}14`,borderColor:`${e.brandPurple}30`}]}>
+                <T style={[o.callerChipText,{color:e.brandPurple}]}numberOfLines={1}ellipsizeMode="middle">
+                  {r.customDomainAttributes.journeyName}
+                </T>
+              </C>:null}
+          </C>
+
+          <C style={o.footerRight}>
+            {I>0&&<C style={o.metaStatChip}>
+                <U color={e.purple}size={8.5}/>
+                <T style={o.metaStatText}>
+                  {I} {I===1?"key":"keys"}
+                </T>
+              </C>}
+          </C>
+        </C>
+      </C>
+    </X>}),o=F.create({card:{height:140,alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString,marginBottom:6},cardBody:{height:"100%",paddingHorizontal:12,paddingTop:10,paddingBottom:8,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:8,gap:6,minWidth:0,overflow:"hidden"},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},serialNumber:{fontFamily:k.interBold,color:e.grayTextWeak,fontSize:10},methodBadge:{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:k.interBold,fontSize:9.5,lineHeight:12,letterSpacing:.5,color:e.white},chip:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},chipText:{fontFamily:k.interBold,fontSize:9,lineHeight:12},statusPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:2.5,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:k.interBold,fontSize:10,lineHeight:13},messageBox:{backgroundColor:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:10,paddingVertical:6,height:68,minHeight:68,maxHeight:68,justifyContent:"center",gap:2,overflow:"hidden"},messageTitle:{fontFamily:k.interBold,fontSize:12,color:e.primaryBlack,lineHeight:16},messageBody:{fontFamily:k.interRegular,fontSize:11,color:e.grayText,lineHeight:15},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3.5},cardDateText:{fontFamily:k.interRegular,fontSize:10,lineHeight:13,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.skySoftBg,borderColor:e.skySoftBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:e.skySoftText,fontSize:9,lineHeight:12,fontFamily:k.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2B`,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{color:e.purple,fontSize:9,lineHeight:12,fontFamily:k.interBold}});V.displayName="PushCard";export default V;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PushDetailProps } from '../../types';
+declare const PushDetail: React.NamedExoticComponent<PushDetailProps>;
+export default PushDetail;