react-native-inapp-inspector 2.4.1 → 2.5.0

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SocketCardProps } from '../../types';
+declare function SocketCard({ item, onPress, searchStr, isNew, isSelected, onToggleSelect, serialNumber, }: SocketCardProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SocketCard>;
+export default _default;

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

@@ -0,0 +1,116 @@
+import te,{useMemo as O,useRef as le,useEffect as ae}from"react";import{Alert as ie,Animated as K,Linking as E,Pressable as X,StyleSheet as ne,Text as S,View as C}from"react-native";import Ce,{Path as Se}from"react-native-svg";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{formatDateTime as Te,formatTime as ke}from"../../helpers";import{CalendarIcon as Be,ClockIcon as J,CircleCheckIcon as Re,CircleXIcon as $e,ForwardChevronIcon as Ie,GlobeIcon as Q,LockIcon as Ve,ReceiveFrameIcon as We,SendFrameIcon as Pe,SizeIcon as De}from"../NetworkIcons";import Le from"../HighlightText";import Oe from"../TouchableScale";import{useTranslation as Fe}from"../../i18n";function He(o){return!o||o<=0?"0 B":o<1024?`${o} B`:o<1024*1024?`${(o/1024).toFixed(1)} KB`:`${(o/(1024*1024)).toFixed(2)} MB`}function ve({item:o,onPress:T,searchStr:Y,isNew:W,isSelected:M,onToggleSelect:N,serialNumber:A}){const{t:P}=Fe(),$=o.url.startsWith("wss://")||o.url.startsWith("https://"),F=o.client==="socket.io"||o.url.includes("/socket.io"),D=O(()=>F?{label:"SIO",color:e.violet600,bg:`${e.violet600}14`,border:`${e.violet600}35`}:$?{label:"WSS",color:e.emerald600,bg:`${e.emerald600}14`,border:`${e.emerald600}35`}:{label:"WS",color:e.blue600,bg:`${e.blue600}14`,border:`${e.blue600}35`},[F,$]),H=o.status||"open",k=H==="open",V=H==="connecting",z=H==="error",Z=O(()=>k?e.greenColor:V?e.amber600:z?e.errorColor:e.slate400,[k,V,z]),L=O(()=>k?{label:"OPEN",color:e.greenColor,bg:`${e.greenColor}15`,border:`${e.greenColor}40`}:V?{label:"CONNECTING",color:e.amber600,bg:`${e.amber600}15`,border:`${e.amber600}40`}:z?{label:o.closeCode?`ERR ${o.closeCode}`:"ERROR",color:e.errorColor,bg:`${e.errorColor}15`,border:`${e.errorColor}40`}:{label:o.closeCode?`CLOSED (${o.closeCode})`:"CLOSED",color:e.slate500,bg:`${e.slate500}15`,border:`${e.slate500}40`},[k,V,z,o.closeCode]),U=O(()=>{try{const I=o.url.replace(/^(wss?|https?):\/\//,""),R=I.indexOf("/");if(R>=0){const v=I.substring(0,R),re=I.substring(R);return{host:v,path:re}}return{host:I,path:"/"}}catch{return{host:o.url,path:"/"}}},[o.url]),_=I=>{I?.stopPropagation?.();const R=o.url.replace(/^wss:\/\//i,"https://").replace(/^ws:\/\//i,"http://");ie.alert(P("common.openInBrowser","Open in Browser"),`${P("common.openInBrowserPrompt","Are you sure you want to open this URL in your external browser?")}
+
+${R}`,[{text:P("common.cancel","Cancel"),style:"cancel"},{text:P("common.open","Open"),onPress:()=>{E.canOpenURL(R).then(v=>{v?E.openURL(R):E.openURL(R).catch(()=>{})}).catch(()=>{})}}])},j=le(new K.Value(W?.35:0)).current;ae(()=>{W&&K.timing(j,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[W,j]);const G=(o.totalBytesSent||0)+(o.totalBytesReceived||0),ee=o.duration!=null?`${o.duration}ms`:"Active",oe=Te(o.startTime);return<C style={r.container}>
+      <Oe onPress={T}style={[r.card,{borderLeftWidth:3.5,borderLeftColor:Z,backgroundColor:z?e.errorCardBg:e.white},W&&r.cardNew]}>
+        <C style={r.cardBody}>
+          
+          <C style={r.cardHeaderRow}>
+            <C style={r.cardHeaderLeft}>
+              {N&&<X onPress={()=>N(o.id)}hitSlop={12}style={[r.smallCheckbox,M&&r.smallCheckboxChecked]}>
+                  {M&&<Ce width={9}height={9}viewBox="0 0 24 24"fill="none">
+                      <Se d="M20 6L9 17l-5-5"stroke={e.white}strokeWidth="4"strokeLinecap="round"strokeLinejoin="round"/>
+                    </Ce>}
+                </X>}
+
+              {A!=null&&<S style={r.serialNumber}>#{A}</S>}
+
+              
+              <C style={[r.protocolBadge,{backgroundColor:D.bg,borderColor:D.border}]}>
+                <S style={[r.protocolBadgeText,{color:D.color}]}>
+                  {D.label}
+                </S>
+              </C>
+
+              
+              {F&&<C style={[r.chip,{backgroundColor:`${e.violet600}12`,borderColor:`${e.violet600}2B`}]}>
+                  <S style={[r.chipText,{color:e.violet600}]}>
+                    SOCKET.IO
+                  </S>
+                </C>}
+            </C>
+
+            <C style={r.cardHeaderRight}>
+              
+              <C style={[r.statusPill,{backgroundColor:L.bg,borderColor:L.border}]}>
+                {k?<C style={r.pulsingDot}/>:V?<J color={e.amber600}size={9}/>:z?<$e color={e.errorColor}size={9}/>:<Re color={e.slate500}size={9}/>}
+                <S style={[r.statusPillText,{color:L.color}]}>
+                  {L.label}
+                </S>
+              </C>
+
+              <X onPress={_}hitSlop={8}style={r.globeBtn}accessibilityRole="button"accessibilityLabel="Open in Browser">
+                <Q color={e.grayTextWeak}size={12}/>
+              </X>
+
+              <Ie color={e.grayTextWeak}size={13}/>
+            </C>
+          </C>
+
+          
+          <C style={r.urlBox}>
+            <C style={r.urlMainRow}>
+              <Le text={U.path}search={Y}style={r.pathText}highlightStyle={r.highlight}numberOfLines={1}ellipsizeMode="middle"/>
+            </C>
+
+            <C style={r.hostRow}>
+              <C style={[r.protoBadge,{backgroundColor:$?`${e.emerald600}12`:`${e.blue600}12`,borderColor:$?`${e.emerald600}2B`:`${e.blue600}2B`}]}>
+                {$?<Ve size={9}color={e.emerald600}/>:<Q size={9}color={e.blue600}/>}
+                <S style={[r.protoBadgeText,{color:$?e.emerald600:e.blue600}]}>
+                  {$?"WSS":"WS"}
+                </S>
+              </C>
+
+              <S style={r.hostText}numberOfLines={1}ellipsizeMode="tail">
+                {U.host}
+              </S>
+            </C>
+          </C>
+
+          
+          <C style={r.cardFooterRow}>
+            <C style={r.footerLeft}>
+              <C style={r.cardDateRow}>
+                <Be color={e.grayTextWeak}size={10}/>
+                <S style={r.cardDateText}numberOfLines={1}>
+                  {oe||ke(o.startTime)}
+                </S>
+              </C>
+            </C>
+
+            <C style={r.footerRight}>
+              
+              <C style={[r.metaStatChip,{backgroundColor:`${e.blue600}10`,borderColor:`${e.blue600}26`}]}>
+                <Pe size={9}color={e.blue600}/>
+                <S style={[r.metaStatText,{color:e.blue600}]}>
+                  {o.sentCount||0}
+                </S>
+              </C>
+
+              
+              <C style={[r.metaStatChip,{backgroundColor:`${e.emerald600}10`,borderColor:`${e.emerald600}26`}]}>
+                <We size={9}color={e.emerald600}/>
+                <S style={[r.metaStatText,{color:e.emerald600}]}>
+                  {o.receivedCount||0}
+                </S>
+              </C>
+
+              
+              {G>0&&<C style={[r.metaStatChip,{backgroundColor:`${e.purple}10`,borderColor:`${e.purple}26`}]}>
+                  <De size={9}color={e.purple}/>
+                  <S style={[r.metaStatText,{color:e.purple}]}>
+                    {He(G)}
+                  </S>
+                </C>}
+
+              
+              <C style={[r.metaStatChip,{backgroundColor:k?`${e.greenColor}10`:`${e.slate400}10`,borderColor:k?`${e.greenColor}26`:`${e.slate400}26`}]}>
+                <J size={9}color={k?e.greenColor:e.grayTextWeak}/>
+                <S style={[r.metaStatText,{color:k?e.greenColor:e.grayTextWeak}]}>
+                  {ee}
+                </S>
+              </C>
+            </C>
+          </C>
+        </C>
+      </Oe>
+    </C>}const r=ne.create({container:{marginHorizontal:4,marginBottom:6},card:{borderRadius:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2,elevation:1,overflow:"hidden"},cardNew:{borderColor:`${e.brandPurple}66`,backgroundColor:`${e.brandPurple}05`},cardBody:{paddingHorizontal:8,paddingVertical:8},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:5},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:4.5,flex:1,minWidth:0},smallCheckbox:{width:15,height:15,borderRadius:3.5,borderWidth:1.2,borderColor:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white,marginRight:2},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.grayTextWeak},protocolBadge:{paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1},protocolBadgeText:{fontFamily:B.interBold,fontSize:9.5,letterSpacing:.3},chip:{paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:9,letterSpacing:.2},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6},statusPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:6,paddingVertical:2,borderRadius:5,borderWidth:1},statusPillText:{fontFamily:B.interBold,fontSize:9.5,letterSpacing:.3},pulsingDot:{width:6,height:6,borderRadius:3,backgroundColor:e.greenColor},globeBtn:{padding:3,borderRadius:4,backgroundColor:`${e.grayTextWeak}12`},urlBox:{marginBottom:8},urlMainRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6,marginBottom:3},pathText:{flex:1,fontFamily:B.interBold,fontSize:12.5,color:e.grayTextStrong,lineHeight:17},highlight:{backgroundColor:"rgba(250, 204, 21, 0.40)",color:e.grayTextStrong,borderRadius:2},hostRow:{flexDirection:"row",alignItems:"center",gap:5},protoBadge:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:4.5,paddingVertical:1,borderRadius:4,borderWidth:1},protoBadgeText:{fontFamily:B.interBold,fontSize:8.5,letterSpacing:.2},hostText:{flex:1,fontFamily:B.interMedium,fontSize:11,color:e.grayTextWeak},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingTop:6,borderTopWidth:1,borderTopColor:e.dividerColor},footerLeft:{flexDirection:"row",alignItems:"center",flex:1,minWidth:0,marginRight:6},cardDateRow:{flexDirection:"row",alignItems:"center",gap:4},cardDateText:{fontFamily:B.interMedium,fontSize:10,color:e.grayTextWeak},footerRight:{flexDirection:"row",alignItems:"center",gap:4},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1},metaStatText:{fontFamily:B.interSemiBold,fontSize:9.5}});function Ee(o,T){return o.item===T.item&&o.isSelected===T.isSelected&&o.isNew===T.isNew&&o.searchStr===T.searchStr&&o.serialNumber===T.serialNumber&&o.onPress===T.onPress&&o.onToggleSelect===T.onToggleSelect}export default te.memo(ve,Ee);

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

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

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

@@ -0,0 +1,327 @@
+import{useMemo as E,useState as H}from"react";import{Alert as $e,Linking as Z,Pressable as M,ScrollView as F,StyleSheet as Ne,Text as T,TextInput as De,TouchableOpacity as W,View as S}from"react-native";import B from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as h}from"../../styles/AppFonts";import{useTranslation as Le}from"../../i18n";import{animateNextLayout as Ee,useInspector as Me}from"./InspectorContext";import Ke from"../SourcePageCard";import Ue from"../HeadersSection";import Je from"../SegmentedTabs";import _ from"../JsonViewer";import O from"../CopyButton";import Ge from"../ShareButton";import Te from"../CodeSnippet";import Qe from"../HighlightText";import Ye from"../TouchableScale";import{formatDateTime as Se,formatByteSize as Ce}from"../../helpers";import{shareSocketReport as Xe}from"../../helpers/shareFormatter";import{ClockIcon as Ze,ChevronIcon as _e,GlobeIcon as Tt,SendFrameIcon as $,ReceiveFrameIcon as Ve,ClearIcon as St,SearchIcon as Ct,ExternalLinkIcon as Vt,LayersIcon as Bt,TerminalIcon as Rt,SizeIcon as It,FailIcon as Pt,HeadersIcon as Ft}from"../NetworkIcons";const Wt=({item:Be})=>{const{t:C}=Le(),{selectedSocket:ve,logRouteMapRef:j}=Me(),o=Be||ve,[I,ze]=H("messages"),[z,K]=H(""),[v,N]=H("all"),[Re,D]=H(new Set);if(!o)return null;const U=o.url.startsWith("wss://")||o.url.startsWith("https://"),R=o.client==="socket.io"||o.url.includes("/socket.io"),A=E(()=>{const r=(o.status||"open").toLowerCase();return r==="open"?e.greenColor:r==="connecting"?e.amber600:r==="error"?e.errorColor:e.slate500},[o.status]),q=()=>{const r=o.url.replace(/^wss:\/\//,"https://").replace(/^ws:\/\//,"http://");$e.alert(C("common.openInBrowser")||"Open in Browser",`${C("common.openInBrowserPrompt")||"Open URL in browser?"}
+
+${r}`,[{text:C("common.cancel")||"Cancel",style:"cancel"},{text:C("common.open")||"Open",onPress:()=>{Z.canOpenURL(r).then(V=>{V&&Z.openURL(r).catch(()=>{})})}}])},Ie=async()=>{await Xe(o)},Pe=r=>{D(V=>{const k=new Set(V);return k.has(r)?k.delete(r):k.add(r),k})},Fe=()=>{const r=new Set((o.frames||[]).map(V=>V.id));D(r)},We=()=>{D(new Set)},J=E(()=>{let r=o.frames||[];if(v!=="all"&&(r=r.filter(V=>V.direction===v)),z.trim()){const V=z.trim().toLowerCase();r=r.filter(k=>!!(k.eventName&&k.eventName.toLowerCase().includes(V)||k.type&&k.type.toLowerCase().includes(V)||typeof k.data=="string"&&k.data.toLowerCase().includes(V)||k.data&&typeof k.data=="object"&&JSON.stringify(k.data).toLowerCase().includes(V)))}return r},[o.frames,v,z]),Oe=(o.totalBytesSent||0)+(o.totalBytesReceived||0),G=E(()=>R?`import { io } from 'socket.io-client';
+
+const socket = io('${o.url}', {
+  transports: ['websocket'],
+  query: ${JSON.stringify(o.query||{},null,2)}
+});
+
+socket.on('connect', () => {
+  console.log('Connected with socket ID:', socket.id);
+});
+
+socket.on('message', (data) => {
+  console.log('Received:', data);
+});`:`// Standard JavaScript WebSocket
+const ws = new WebSocket('${o.url}'${o.protocols?`, ${JSON.stringify(o.protocols)}`:""});
+
+ws.onopen = () => {
+  console.log('WebSocket connection opened');
+  ws.send(JSON.stringify({ type: 'ping' }));
+};
+
+ws.onmessage = (event) => {
+  console.log('Message from server:', event.data);
+};
+
+ws.onerror = (error) => {
+  console.error('WebSocket Error:', error);
+};
+
+ws.onclose = (event) => {
+  console.log('WebSocket closed:', event.code, event.reason);
+};`,[o.url,o.protocols,o.query,R]),Q=`wscat -c "${o.url}"`,Y=o.url.indexOf("://"),P=Y!==-1?o.url.substring(0,Y+3):"";return<S style={{flex:1,backgroundColor:e.contentBg}}>
+      
+      <S style={{paddingHorizontal:8,paddingTop:4}}>
+        <S style={B.detailInfoBar}>
+          
+          <S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,paddingBottom:8,borderBottomWidth:1,borderBottomColor:e.dividerColor}}>
+            <S style={{flexDirection:"row",alignItems:"center",gap:5,flexWrap:"wrap",flex:1}}>
+              
+              <S style={[B.methodBadge,{backgroundColor:R?e.violet600:U?e.emerald600:e.blue600,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6}]}>
+                <T style={[B.methodBadgeText,{color:e.white,fontSize:10.5,fontFamily:h.interBold}]}>
+                  {R?"SIO":U?"WSS":"WS"}
+                </T>
+              </S>
+
+              
+              <S style={[B.chip,{backgroundColor:R?`${e.violet600}14`:`${e.sky500}14`,borderColor:R?`${e.violet600}30`:`${e.sky500}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
+                <T style={[B.chipText,{fontFamily:h.interBold,fontSize:9.5,color:R?e.violet600:e.sky600}]}>
+                  {(o.client||"WEBSOCKET").toUpperCase()}
+                </T>
+              </S>
+
+              
+              <S style={[B.chip,{backgroundColor:`${A}18`,borderColor:`${A}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
+                {o.status==="error"?<Pt size={8}color={e.errorColor}/>:<S style={{width:6,height:6,borderRadius:3,backgroundColor:A}}/>}
+                <T style={[B.chipText,{color:A,fontFamily:h.interBold,fontSize:10.5}]}>
+                  {(o.status||"open").toUpperCase()}
+                </T>
+              </S>
+
+              
+              <S style={[B.chip,{backgroundColor:`${e.brandPurple}14`,borderColor:`${e.brandPurple}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                <Ze color={e.brandPurple}size={10}/>
+                <T style={[B.chipText,{color:e.brandPurple,fontFamily:h.interBold,fontSize:10.5}]}>
+                  {o.duration!=null?`${o.duration}ms`:"Active"}
+                </T>
+              </S>
+
+              
+              <S style={[B.chip,{backgroundColor:`${e.teal600}14`,borderColor:`${e.teal600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                <$ color={e.teal600}size={10}/>
+                <T style={[B.chipText,{color:e.teal600,fontFamily:h.interBold,fontSize:10.5}]}>
+                  {o.frames?.length||0} frames
+                </T>
+              </S>
+
+              
+              <S style={[B.chip,{backgroundColor:`${e.sky600}14`,borderColor:`${e.sky600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                <It color={e.sky600}size={10}/>
+                <T style={[B.chipText,{color:e.sky600,fontFamily:h.interBold,fontSize:10.5}]}>
+                  {Ce(Oe)}
+                </T>
+              </S>
+            </S>
+          </S>
+
+          
+          <S style={{backgroundColor:e.grayBackground,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,padding:10,marginTop:8,gap:8}}>
+            
+            <S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"nowrap",gap:6}}>
+              <S style={{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1,minWidth:0}}>
+                {P?<S style={{backgroundColor:P.startsWith("wss")||P.startsWith("https")?`${e.green600}18`:`${e.amber500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4}}>
+                    <T style={{fontFamily:h.interBold,fontSize:9,color:P.startsWith("wss")||P.startsWith("https")?e.green600:e.amber500}}>
+                      {P.replace("://","").toUpperCase()}
+                    </T>
+                  </S>:null}
+
+                <T style={{fontFamily:h.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
+                  ENDPOINT URL
+                </T>
+              </S>
+
+              
+              <S style={{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0}}>
+                <O value={Q}label="wscat"iconType="terminal"/>
+                <Ge onShare={Ie}/>
+                <O value={G}label="JS"iconType="fetch"/>
+                <O value={o.url}label="URL"iconType="copy"/>
+                <Ye style={[B.iconSquareBtn,{backgroundColor:`${e.sky600}15`,borderColor:`${e.sky600}35`}]}onPress={q}hitSlop={10}accessibilityLabel="Open in Browser">
+                  <Vt color={e.sky600}size={13}/>
+                </Ye>
+              </S>
+            </S>
+
+            
+            <M onPress={q}>
+              <T selectable={!0}style={{fontFamily:h.interMedium,fontSize:12.5,color:e.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
+                {o.url}
+              </T>
+            </M>
+          </S>
+        </S>
+      </S>
+
+      
+      <Je tabs={[{key:"messages",label:`${C("socket.messages","Messages")} (${o.frames?.length||0})`,themeColor:e.violet600,icon:r=><$ size={12}color={r?e.white:e.grayText}/>},{key:"overview",label:C("socket.overview","Overview"),themeColor:e.sky600,icon:r=><Tt size={12}color={r?e.white:e.grayText}/>},...o.headers&&Object.keys(o.headers).length>0?[{key:"headers",label:`${C("network.detailTabs.headers","Headers")} (${Object.keys(o.headers).length})`,themeColor:e.purple,icon:r=><Ft size={12}color={r?e.white:e.grayText}/>}]:[],{key:"params",label:`${C("socket.params","Params")} (${Object.keys(o.query||{}).length})`,themeColor:e.teal600,icon:r=><Bt size={12}color={r?e.white:e.grayText}/>},{key:"raw",label:C("socket.rawAndCode","Raw & Code"),themeColor:e.amber600,icon:r=><Rt size={12}color={r?e.white:e.grayText}/>}]}activeKey={I}onChange={r=>{Ee(),ze(r)}}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
+
+      
+      {I==="messages"&&<S style={{flex:1}}>
+          
+          <S style={t.frameControlBar}>
+            <S style={t.frameSearchBar}>
+              <Ct size={13}color={e.grayTextWeak}/>
+              <De style={t.frameSearchInput}placeholder={C("socket.searchFramesPlaceholder","Search frame payloads or event names...")}placeholderTextColor={e.grayTextWeak}value={z}onChangeText={K}clearButtonMode="while-editing"/>
+              {z.length>0&&<M onPress={()=>K("")}>
+                  <St size={12}color={e.grayTextWeak}/>
+                </M>}
+            </S>
+
+            
+            <S style={t.frameFilterRow}>
+              <S style={t.dirPillGroup}>
+                <W onPress={()=>N("all")}style={[t.dirPill,v==="all"&&t.dirPillActive]}>
+                  <T style={[t.dirPillText,v==="all"&&t.dirPillTextActive]}>
+                    {C("common.all","All")}
+                  </T>
+                </W>
+
+                <W onPress={()=>N("send")}style={[t.dirPill,v==="send"&&t.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
+                  <$ size={10}color={v==="send"?e.white:e.emerald600}/>
+                  <T style={[t.dirPillText,v==="send"&&t.dirPillTextActive]}>
+                    {C("socket.sent","Sent")}
+                  </T>
+                </W>
+
+                <W onPress={()=>N("receive")}style={[t.dirPill,v==="receive"&&t.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
+                  <Ve size={10}color={v==="receive"?e.white:e.sky600}/>
+                  <T style={[t.dirPillText,v==="receive"&&t.dirPillTextActive]}>
+                    {C("socket.recv","Recv")}
+                  </T>
+                </W>
+              </S>
+
+              <S style={t.expandGroup}>
+                <W onPress={Fe}style={t.textBtn}>
+                  <T style={t.textBtnLabel}>{C("common.expandAll","Expand All")}</T>
+                </W>
+                <T style={t.textBtnSep}>•</T>
+                <W onPress={We}style={t.textBtn}>
+                  <T style={t.textBtnLabel}>{C("common.collapseAll","Collapse All")}</T>
+                </W>
+              </S>
+            </S>
+          </S>
+
+          
+          <F style={t.framesScrollView}contentContainerStyle={{padding:12}}>
+            {J.length===0?<S style={t.emptyFrames}>
+                <T style={t.emptyFramesText}>
+                  {o.frames?.length===0?"No messages transferred on this connection yet":"No frames match the active search or direction filter"}
+                </T>
+              </S>:J.map((r,V)=>{const k=r.direction==="send",X=Re.has(r.id),L=k?e.blue600:e.emerald600,Ae=k?`${e.blue600}12`:`${e.emerald600}12`,He=r.timestamp-o.startTime;return<S key={r.id}style={t.frameCard}>
+                    
+                    <M onPress={()=>Pe(r.id)}style={t.frameCardHeader}>
+                      <S style={t.frameHeaderLeft}>
+                        <S style={[t.dirBadge,{backgroundColor:Ae}]}>
+                          {k?<$ size={10}color={L}/>:<Ve size={10}color={L}/>}
+                          <T style={[t.dirBadgeText,{color:L}]}>
+                            {k?"SENT":"RECV"}
+                          </T>
+                        </S>
+
+                        {r.eventName&&<S style={t.eventBadge}>
+                            <T style={t.eventBadgeText}numberOfLines={1}>
+                              {r.eventName}
+                            </T>
+                          </S>}
+
+                        <T style={t.frameIndexText}>#{V+1}</T>
+                      </S>
+
+                      <S style={t.frameHeaderRight}>
+                        <T style={t.frameOffsetTime}>
+                          +{He}ms
+                        </T>
+                        <S style={t.frameSizePill}>
+                          <T style={t.frameSizeText}>
+                            {Ce(r.size||0)}
+                          </T>
+                        </S>
+                        <O value={r.raw??r.data}label="Frame"/>
+                        <_e direction={X?"up":"down"}size={12}color={e.grayTextWeak}/>
+                      </S>
+                    </M>
+
+                    
+                    <S style={t.frameBody}>
+                      {typeof r.data=="object"&&r.data!==null?<_ data={r.data}search={z}forceOpen={X}/>:<T style={t.frameRawText}>
+                          <Qe text={String(r.data)}search={z}/>
+                        </T>}
+                    </S>
+                  </S>})}
+          </F>
+        </S>}
+
+      
+      {I==="overview"&&<F style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <S style={t.sectionCard}>
+            <T style={t.sectionHeading}>{C("socket.connectionDetails","CONNECTION DETAILS")}</T>
+
+            <S style={t.infoRow}>
+              <T style={t.infoKey}>{C("socket.url","URL")}</T>
+              <T style={t.infoVal}selectable>{o.url}</T>
+            </S>
+
+            <S style={t.infoRow}>
+              <T style={t.infoKey}>{C("socket.clientEngine","Client Engine")}</T>
+              <T style={t.infoVal}>{o.client?.toUpperCase()||"WEBSOCKET"}</T>
+            </S>
+
+            <S style={t.infoRow}>
+              <T style={t.infoKey}>{C("socket.readyState","Ready State")}</T>
+              <T style={t.infoVal}>
+                {o.readyState===1?"1 (OPEN)":o.readyState===0?"0 (CONNECTING)":o.readyState===2?"2 (CLOSING)":"3 (CLOSED)"}
+              </T>
+            </S>
+
+            <S style={t.infoRow}>
+              <T style={t.infoKey}>{C("socket.connectedAt","Connected At")}</T>
+              <T style={t.infoVal}>{Se(o.startTime)}</T>
+            </S>
+
+            {o.endTime&&<S style={t.infoRow}>
+                <T style={t.infoKey}>{C("socket.closedAt","Closed At")}</T>
+                <T style={t.infoVal}>{Se(o.endTime)}</T>
+              </S>}
+
+            {o.closeCode!=null&&<S style={t.infoRow}>
+                <T style={t.infoKey}>{C("socket.closeCodeReason","Close Code & Reason")}</T>
+                <T style={t.infoVal}>{o.closeCode} ({o.closeReason||"N/A"})</T>
+              </S>}
+
+            {o.protocols&&<S style={t.infoRow}>
+                <T style={t.infoKey}>{C("socket.subprotocols","Subprotocols")}</T>
+                <T style={t.infoVal}>
+                  {Array.isArray(o.protocols)?o.protocols.join(", "):o.protocols}
+                </T>
+              </S>}
+
+            {o.caller&&<S style={t.infoRow}>
+                <T style={t.infoKey}>{C("socket.callerStack","Caller Stack")}</T>
+                <T style={[t.infoVal,{fontFamily:h.interMedium,color:e.brandPurple}]}selectable>
+                  {o.caller}
+                </T>
+              </S>}
+
+            {o.error&&<S style={t.infoRow}>
+                <T style={t.infoKey}>{C("socket.error","Error")}</T>
+                <T style={[t.infoVal,{color:e.errorColor}]}selectable>
+                  {o.error}
+                </T>
+              </S>}
+          </S>
+
+          
+          {(()=>{const r=o.routeInfo||j?.current&&j.current.get(o.id);return!r||!r.path||r.path==="Navigators"?null:<S style={{marginTop:12}}>
+                <Ke routeInfo={r}/>
+              </S>})()}
+        </F>}
+
+      
+      {I==="headers"&&o.headers&&<F style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <Ue title={C("socket.handshakeHeaders","Handshake Headers")}headers={o.headers}search=""resetKey={o.id}/>
+        </F>}
+
+      
+      {I==="params"&&<F style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <S style={t.sectionCard}>
+            <T style={t.sectionHeading}>{C("socket.handshakeParams","HANDSHAKE QUERY PARAMETERS")}</T>
+            {!o.query||Object.keys(o.query).length===0?<T style={t.emptySectionText}>{C("socket.noQueryParams","No query parameters passed in connection URL")}</T>:Object.entries(o.query).map(([r,V])=><S key={r}style={t.paramRow}>
+                  <T style={t.paramKey}selectable>{r}</T>
+                  <T style={t.paramVal}selectable>{V}</T>
+                  <O value={V}label={r}/>
+                </S>)}
+          </S>
+        </F>}
+
+      
+      {I==="raw"&&<F style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <S style={t.sectionCard}>
+            <T style={t.sectionHeading}>{C("socket.jsClientCode","JAVASCRIPT CLIENT CODE")}</T>
+            <Te code={G}language="javascript"/>
+          </S>
+
+          <S style={[t.sectionCard,{marginTop:14}]}>
+            <T style={t.sectionHeading}>{C("socket.terminalWscat","TERMINAL WSCAT COMMAND")}</T>
+            <Te code={Q}language="javascript"/>
+          </S>
+
+          <S style={[t.sectionCard,{marginTop:14}]}>
+            <T style={t.sectionHeading}>{C("socket.rawDump","RAW CONNECTION JSON DUMP")}</T>
+            <_ data={o}/>
+          </S>
+        </F>}
+    </S>};export default Wt;const t=Ne.create({frameControlBar:{padding:10,backgroundColor:e.graySurface,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:8},frameSearchBar:{flexDirection:"row",alignItems:"center",backgroundColor:e.contentBg,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:8,height:34,gap:6},frameSearchInput:{flex:1,fontFamily:h.interRegular,fontSize:12,color:e.grayTextStrong,paddingVertical:0},frameFilterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},dirPillGroup:{flexDirection:"row",gap:6},dirPill:{paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:e.dividerColor,backgroundColor:e.contentBg},dirPillActive:{backgroundColor:`${e.brandPurple}18`,borderColor:e.brandPurple},dirPillText:{fontFamily:h.interMedium,fontSize:11,color:e.grayTextWeak},dirPillTextActive:{color:e.brandPurple,fontFamily:h.interBold},expandGroup:{flexDirection:"row",alignItems:"center",gap:4},textBtn:{paddingVertical:2,paddingHorizontal:4},textBtnLabel:{fontFamily:h.interMedium,fontSize:11,color:e.brandPurple},textBtnSep:{color:e.grayTextWeak,fontSize:10},framesScrollView:{flex:1},emptyFrames:{padding:32,alignItems:"center"},emptyFramesText:{fontFamily:h.interMedium,fontSize:12.5,color:e.grayTextWeak,textAlign:"center"},frameCard:{backgroundColor:e.contentBg,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,marginBottom:8,overflow:"hidden"},frameCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:10,paddingVertical:7,backgroundColor:e.graySurface,borderBottomWidth:1,borderBottomColor:e.dividerColor},frameHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},dirBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:5,paddingVertical:2,borderRadius:4,gap:3},dirBadgeText:{fontFamily:h.interBold,fontSize:9.5},eventBadge:{backgroundColor:`${e.violet600}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4,maxWidth:130},eventBadgeText:{fontFamily:h.interBold,fontSize:10,color:e.violet600},frameIndexText:{fontFamily:h.interMedium,fontSize:10,color:e.grayTextWeak},frameHeaderRight:{flexDirection:"row",alignItems:"center",gap:6},frameOffsetTime:{fontFamily:h.interRegular,fontSize:10,color:e.grayTextWeak},frameSizePill:{backgroundColor:`${e.slate400}18`,paddingHorizontal:4,paddingVertical:1,borderRadius:4},frameSizeText:{fontFamily:h.interMedium,fontSize:9.5,color:e.grayTextStrong},frameBody:{padding:8},frameRawText:{fontFamily:h.interRegular,fontSize:12,color:e.grayTextStrong,lineHeight:16},tabContentScroll:{flex:1},sectionCard:{backgroundColor:e.contentBg,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,padding:12},sectionHeading:{fontFamily:h.interBold,fontSize:11,color:e.grayTextWeak,letterSpacing:.6,marginBottom:10},infoRow:{paddingVertical:8,borderBottomWidth:1,borderBottomColor:e.dividerColor},infoKey:{fontFamily:h.interMedium,fontSize:11,color:e.grayTextWeak,marginBottom:2},infoVal:{fontFamily:h.interSemiBold,fontSize:12.5,color:e.grayTextStrong,lineHeight:18},emptySectionText:{fontFamily:h.interRegular,fontSize:12,color:e.grayTextWeak,fontStyle:"italic",paddingVertical:8},paramRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:8,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:8},paramKey:{fontFamily:h.interBold,fontSize:12,color:e.brandPurple,width:"30%"},paramVal:{flex:1,fontFamily:h.interMedium,fontSize:12,color:e.grayTextStrong}});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SocketConnectionRecord, SocketFilterState } from '../../types';
+export declare const DEFAULT_SOCKET_FILTERS: SocketFilterState;
+export declare const isSocketFiltersDefault: (f: SocketFilterState) => boolean;
+interface SocketFilterModalProps {
+    visible: boolean;
+    onClose: () => void;
+    filters: SocketFilterState;
+    onApply: (filters: SocketFilterState) => void;
+    records: SocketConnectionRecord[];
+}
+export declare const SocketFilterModal: React.FC<SocketFilterModalProps>;
+export default SocketFilterModal;

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

@@ -0,0 +1,69 @@
+import{useEffect as j,useMemo as N,useState as U}from"react";import{Modal as K,Pressable as Y,ScrollView as G,StyleSheet as _,Text as T,TouchableOpacity as V,View as S}from"react-native";import{AppColors as l}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{FilterIcon as J,CloseWhite as Q}from"../NetworkIcons";import X from"../TouchableScale";export const DEFAULT_SOCKET_FILTERS={search:"",status:new Set(["all"]),types:new Set(["all"]),sortBy:"time_desc"},isSocketFiltersDefault=k=>(k.status.has("all")||k.status.size===0)&&(k.types.has("all")||k.types.size===0)&&k.sortBy==="time_desc",SocketFilterModal=({visible:k,onClose:O,filters:B,onApply:E,records:W})=>{const[P,F]=U(()=>({...B,status:new Set(B.status),types:new Set(B.types)}));j(()=>{k&&F({...B,status:new Set(B.status),types:new Set(B.types)})},[k,B]);const x=N(()=>{let e=0,o=0,m=0,A=0,I=0,v=0,D=0;return W.forEach(z=>{const R=z.status||"open";R==="open"?e++:R==="closed"?o++:R==="connecting"?m++:R==="error"&&A++,z.client==="socket.io"||z.url.includes("/socket.io")?D++:z.url.startsWith("wss://")?I++:v++}),{all:W.length,open:e,closed:o,connecting:m,error:A,wss:I,ws:v,sio:D}},[W]),L=e=>{const o=new Set(P.status);e==="all"?(o.clear(),o.add("all")):(o.delete("all"),o.has(e)?o.delete(e):o.add(e),o.size===0&&o.add("all")),F(m=>({...m,status:o}))},H=e=>{const o=new Set(P.types);e==="all"?(o.clear(),o.add("all")):(o.delete("all"),o.has(e)?o.delete(e):o.add(e),o.size===0&&o.add("all")),F(m=>({...m,types:o}))},M=()=>{F({search:P.search,status:new Set(["all"]),types:new Set(["all"]),sortBy:"time_desc"})},$=()=>{E(P),O()};return<K visible={k}transparent animationType="fade"onRequestClose={O}>
+      <S style={t.backdrop}>
+        <Y style={t.backdropPress}onPress={O}/>
+        <S style={t.container}>
+          
+          <S style={t.header}>
+            <S style={t.headerLeft}>
+              <J size={18}color={l.brandPurple}/>
+              <T style={t.headerTitle}>Filter WebSockets</T>
+            </S>
+            <V onPress={O}hitSlop={{top:8,bottom:8,left:8,right:8}}style={t.closeBtn}>
+              <Q size={14}color={l.grayTextWeak}/>
+            </V>
+          </S>
+
+          <G style={t.content}showsVerticalScrollIndicator={!1}>
+            
+            <T style={t.sectionTitle}>CONNECTION STATUS</T>
+            <S style={t.chipRow}>
+              {[{key:"all",label:"All",count:x.all,color:l.brandPurple},{key:"open",label:"Open",count:x.open,color:l.greenColor},{key:"closed",label:"Closed",count:x.closed,color:l.slate500},{key:"connecting",label:"Connecting",count:x.connecting,color:l.amber600},{key:"error",label:"Error",count:x.error,color:l.errorColor}].map(e=>{const o=P.status.has(e.key);return<V key={e.key}onPress={()=>L(e.key)}style={[t.chip,o&&{backgroundColor:`${e.color}18`,borderColor:e.color}]}>
+                    <T style={[t.chipText,o&&{color:e.color,fontFamily:C.interBold}]}>
+                      {e.label}
+                    </T>
+                    <S style={[t.countPill,o&&{backgroundColor:`${e.color}30`}]}>
+                      <T style={[t.countText,o&&{color:e.color}]}>
+                        {e.count}
+                      </T>
+                    </S>
+                  </V>})}
+            </S>
+
+            
+            <T style={t.sectionTitle}>PROTOCOL & CLIENT</T>
+            <S style={t.chipRow}>
+              {[{key:"all",label:"All Protocols",count:x.all,color:l.brandPurple},{key:"wss",label:"Secure (WSS)",count:x.wss,color:l.emerald600},{key:"ws",label:"Standard (WS)",count:x.ws,color:l.blue600},{key:"sio",label:"Socket.IO",count:x.sio,color:l.violet600}].map(e=>{const o=P.types.has(e.key);return<V key={e.key}onPress={()=>H(e.key)}style={[t.chip,o&&{backgroundColor:`${e.color}18`,borderColor:e.color}]}>
+                    <T style={[t.chipText,o&&{color:e.color,fontFamily:C.interBold}]}>
+                      {e.label}
+                    </T>
+                    <S style={[t.countPill,o&&{backgroundColor:`${e.color}30`}]}>
+                      <T style={[t.countText,o&&{color:e.color}]}>
+                        {e.count}
+                      </T>
+                    </S>
+                  </V>})}
+            </S>
+
+            
+            <T style={t.sectionTitle}>SORT BY</T>
+            <S style={t.chipRow}>
+              {[{key:"time_desc",label:"Newest First"},{key:"time_asc",label:"Oldest First"},{key:"frames_desc",label:"Most Frames"},{key:"duration_desc",label:"Longest Duration"}].map(e=>{const o=P.sortBy===e.key;return<V key={e.key}onPress={()=>F(m=>({...m,sortBy:e.key}))}style={[t.chip,o&&t.chipActiveSort]}>
+                    <T style={[t.chipText,o&&t.chipTextActiveSort]}>
+                      {e.label}
+                    </T>
+                  </V>})}
+            </S>
+          </G>
+
+          
+          <S style={t.footer}>
+            <V onPress={M}style={t.resetBtn}>
+              <T style={t.resetBtnText}>Reset</T>
+            </V>
+            <X onPress={$}style={t.applyBtn}>
+              <T style={t.applyBtnText}>Apply Filters</T>
+            </X>
+          </S>
+        </S>
+      </S>
+    </K>};export default SocketFilterModal;const t=_.create({backdrop:{flex:1,backgroundColor:"rgba(0,0,0,0.5)",justifyContent:"center",alignItems:"center",padding:16},backdropPress:{..._.absoluteFillObject},container:{width:"100%",maxHeight:"80%",backgroundColor:l.contentBg,borderRadius:16,overflow:"hidden",shadowColor:l.black,shadowOffset:{width:0,height:4},shadowOpacity:.25,shadowRadius:10,elevation:8},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:14,borderBottomWidth:1,borderBottomColor:l.dividerColor},headerLeft:{flexDirection:"row",alignItems:"center",gap:8},headerTitle:{fontFamily:C.interBold,fontSize:16,color:l.grayTextStrong},closeBtn:{padding:4},content:{padding:16},sectionTitle:{fontFamily:C.interBold,fontSize:11,color:l.grayTextWeak,letterSpacing:.6,marginBottom:8,marginTop:10},chipRow:{flexDirection:"row",flexWrap:"wrap",gap:8,marginBottom:12},chip:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:6,borderRadius:8,borderWidth:1,borderColor:l.dividerColor,backgroundColor:l.graySurface,gap:6},chipActiveSort:{backgroundColor:`${l.brandPurple}18`,borderColor:l.brandPurple},chipText:{fontFamily:C.interMedium,fontSize:12,color:l.grayTextStrong},chipTextActiveSort:{color:l.brandPurple,fontFamily:C.interBold},countPill:{backgroundColor:`${l.slate500}18`,paddingHorizontal:5,paddingVertical:1,borderRadius:10},countText:{fontFamily:C.interBold,fontSize:10,color:l.grayTextWeak},footer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:12,borderTopWidth:1,borderTopColor:l.dividerColor,gap:12},resetBtn:{paddingVertical:10,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderColor:l.dividerColor},resetBtnText:{fontFamily:C.interSemiBold,fontSize:13,color:l.grayTextWeak},applyBtn:{flex:1,backgroundColor:l.brandPurple,paddingVertical:11,borderRadius:8,alignItems:"center",justifyContent:"center"},applyBtnText:{fontFamily:C.interBold,fontSize:13,color:l.white}});

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SocketTab: React.MemoExoticComponent<() => React.JSX.Element>;
+export default SocketTab;