react-native-inapp-inspector 2.4.0 → 2.4.2

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 We,ReceiveFrameIcon as Ve,SendFrameIcon as Pe,SizeIcon as De}from"../NetworkIcons";import Le from"../HighlightText";import Oe from"../TouchableScale";import{useTranslation as Fe}from"../../i18n";function ve(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 He({item:o,onPress:T,searchStr:Y,isNew:V,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,$]),v=o.status||"open",k=v==="open",W=v==="connecting",z=v==="error",Z=O(()=>k?e.greenColor:W?e.amber600:z?e.errorColor:e.slate400,[k,W,z]),L=O(()=>k?{label:"OPEN",color:e.greenColor,bg:`${e.greenColor}15`,border:`${e.greenColor}40`}:W?{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,W,z,o.closeCode]),U=O(()=>{try{const I=o.url.replace(/^(wss?|https?):\/\//,""),R=I.indexOf("/");if(R>=0){const H=I.substring(0,R),re=I.substring(R);return{host:H,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(H=>{H?E.openURL(R):E.openURL(R).catch(()=>{})}).catch(()=>{})}}])},j=le(new K.Value(V?.35:0)).current;ae(()=>{V&&K.timing(j,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[V,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},V&&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}/>:W?<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`}]}>
+                {$?<We 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`}]}>
+                <Ve 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}]}>
+                    {ve(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:{padding:10},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:6},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6,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(He,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,317 @@
+import{useMemo as E,useState as A}from"react";import{Alert as Pe,Linking as X,Pressable as M,ScrollView as $,StyleSheet as Fe,Text as T,TextInput as Ie,TouchableOpacity as I,View as S}from"react-native";import B from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{useTranslation as We}from"../../i18n";import Oe from"../SegmentedTabs";import Z from"../JsonViewer";import W from"../CopyButton";import Ae from"../ShareButton";import _ from"../CodeSnippet";import $e from"../HighlightText";import He from"../TouchableScale";import{formatDateTime as ee}from"../../helpers";import{shareSocketReport as Ne}from"../../helpers/shareFormatter";import{ClockIcon as De,ChevronIcon as Le,GlobeIcon as Ee,SendFrameIcon as H,ReceiveFrameIcon as Te,ClearIcon as Me,SearchIcon as Ke,ExternalLinkIcon as Ue,LayersIcon as Je,TerminalIcon as Ge,SizeIcon as Qe,FailIcon as Ye}from"../NetworkIcons";function be(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`}const Xe=({item:o})=>{const{t:V}=We(),[F,Se]=A("messages"),[z,K]=A(""),[v,N]=A("all"),[Ce,D]=A(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"),O=E(()=>{const b=(o.status||"open").toLowerCase();return b==="open"?e.greenColor:b==="connecting"?e.amber600:b==="error"?e.errorColor:e.slate500},[o.status]),j=()=>{const b=o.url.replace(/^wss:\/\//,"https://").replace(/^ws:\/\//,"http://");Pe.alert(V("common.openInBrowser")||"Open in Browser",`${V("common.openInBrowserPrompt")||"Open URL in browser?"}
+
+${b}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.open")||"Open",onPress:()=>{X.canOpenURL(b).then(k=>{k&&X.openURL(b).catch(()=>{})})}}])},he=async()=>{await Ne(o)},ke=b=>{D(k=>{const h=new Set(k);return h.has(b)?h.delete(b):h.add(b),h})},Ve=()=>{const b=new Set((o.frames||[]).map(k=>k.id));D(b)},Be=()=>{D(new Set)},q=E(()=>{let b=o.frames||[];if(v!=="all"&&(b=b.filter(k=>k.direction===v)),z.trim()){const k=z.trim().toLowerCase();b=b.filter(h=>!!(h.eventName&&h.eventName.toLowerCase().includes(k)||h.type&&h.type.toLowerCase().includes(k)||typeof h.data=="string"&&h.data.toLowerCase().includes(k)||h.data&&typeof h.data=="object"&&JSON.stringify(h.data).toLowerCase().includes(k)))}return b},[o.frames,v,z]),ve=(o.totalBytesSent||0)+(o.totalBytesReceived||0),J=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]),G=`wscat -c "${o.url}"`,Q=o.url.indexOf("://"),P=Q!==-1?o.url.substring(0,Q+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:C.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:C.interBold,fontSize:9.5,color:R?e.violet600:e.sky600}]}>
+                  {(o.client||"WEBSOCKET").toUpperCase()}
+                </T>
+              </S>
+
+              
+              <S style={[B.chip,{backgroundColor:`${O}18`,borderColor:`${O}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
+                {o.status==="error"?<Ye size={8}color={e.errorColor}/>:<S style={{width:6,height:6,borderRadius:3,backgroundColor:O}}/>}
+                <T style={[B.chipText,{color:O,fontFamily:C.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}]}>
+                <De color={e.brandPurple}size={10}/>
+                <T style={[B.chipText,{color:e.brandPurple,fontFamily:C.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}]}>
+                <H color={e.teal600}size={10}/>
+                <T style={[B.chipText,{color:e.teal600,fontFamily:C.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}]}>
+                <Qe color={e.sky600}size={10}/>
+                <T style={[B.chipText,{color:e.sky600,fontFamily:C.interBold,fontSize:10.5}]}>
+                  {be(ve)}
+                </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:C.interBold,fontSize:9,color:P.startsWith("wss")||P.startsWith("https")?e.green600:e.amber500}}>
+                      {P.replace("://","").toUpperCase()}
+                    </T>
+                  </S>:null}
+
+                <T style={{fontFamily:C.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}}>
+                <W value={G}label="wscat"iconType="terminal"/>
+                <Ae onShare={he}/>
+                <W value={J}label="JS"iconType="fetch"/>
+                <W value={o.url}label="URL"iconType="copy"/>
+                <He style={[B.iconSquareBtn,{backgroundColor:`${e.sky600}15`,borderColor:`${e.sky600}35`}]}onPress={j}hitSlop={10}accessibilityLabel="Open in Browser">
+                  <Ue color={e.sky600}size={13}/>
+                </He>
+              </S>
+            </S>
+
+            
+            <M onPress={j}>
+              <T selectable={!0}style={{fontFamily:C.interMedium,fontSize:12.5,color:e.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
+                {o.url}
+              </T>
+            </M>
+          </S>
+        </S>
+      </S>
+
+      
+      <Oe tabs={[{key:"messages",label:`${V("socket.messages","Messages")} (${o.frames?.length||0})`,themeColor:e.violet600,icon:b=><H size={12}color={b?e.white:e.grayText}/>},{key:"overview",label:V("socket.overview","Overview"),themeColor:e.sky600,icon:b=><Ee size={12}color={b?e.white:e.grayText}/>},{key:"params",label:`${V("socket.params","Params")} (${Object.keys(o.query||{}).length})`,themeColor:e.teal600,icon:b=><Je size={12}color={b?e.white:e.grayText}/>},{key:"raw",label:V("socket.rawAndCode","Raw & Code"),themeColor:e.amber600,icon:b=><Ge size={12}color={b?e.white:e.grayText}/>}]}activeKey={F}onChange={Se}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
+
+      
+      {F==="messages"&&<S style={{flex:1}}>
+          
+          <S style={t.frameControlBar}>
+            <S style={t.frameSearchBar}>
+              <Ke size={13}color={e.grayTextWeak}/>
+              <Ie style={t.frameSearchInput}placeholder={V("socket.searchFramesPlaceholder","Search frame payloads or event names...")}placeholderTextColor={e.grayTextWeak}value={z}onChangeText={K}clearButtonMode="while-editing"/>
+              {z.length>0&&<M onPress={()=>K("")}>
+                  <Me size={12}color={e.grayTextWeak}/>
+                </M>}
+            </S>
+
+            
+            <S style={t.frameFilterRow}>
+              <S style={t.dirPillGroup}>
+                <I onPress={()=>N("all")}style={[t.dirPill,v==="all"&&t.dirPillActive]}>
+                  <T style={[t.dirPillText,v==="all"&&t.dirPillTextActive]}>
+                    {V("common.all","All")}
+                  </T>
+                </I>
+
+                <I onPress={()=>N("send")}style={[t.dirPill,v==="send"&&t.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
+                  <H size={10}color={v==="send"?e.white:e.emerald600}/>
+                  <T style={[t.dirPillText,v==="send"&&t.dirPillTextActive]}>
+                    {V("socket.sent","Sent")}
+                  </T>
+                </I>
+
+                <I onPress={()=>N("receive")}style={[t.dirPill,v==="receive"&&t.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
+                  <Te size={10}color={v==="receive"?e.white:e.sky600}/>
+                  <T style={[t.dirPillText,v==="receive"&&t.dirPillTextActive]}>
+                    {V("socket.recv","Recv")}
+                  </T>
+                </I>
+              </S>
+
+              <S style={t.expandGroup}>
+                <I onPress={Ve}style={t.textBtn}>
+                  <T style={t.textBtnLabel}>{V("common.expandAll","Expand All")}</T>
+                </I>
+                <T style={t.textBtnSep}>•</T>
+                <I onPress={Be}style={t.textBtn}>
+                  <T style={t.textBtnLabel}>{V("common.collapseAll","Collapse All")}</T>
+                </I>
+              </S>
+            </S>
+          </S>
+
+          
+          <$ style={t.framesScrollView}contentContainerStyle={{padding:12}}>
+            {q.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>:q.map((b,k)=>{const h=b.direction==="send",Y=Ce.has(b.id),L=h?e.blue600:e.emerald600,ze=h?`${e.blue600}12`:`${e.emerald600}12`,Re=b.timestamp-o.startTime;return<S key={b.id}style={t.frameCard}>
+                    
+                    <M onPress={()=>ke(b.id)}style={t.frameCardHeader}>
+                      <S style={t.frameHeaderLeft}>
+                        <S style={[t.dirBadge,{backgroundColor:ze}]}>
+                          {h?<H size={10}color={L}/>:<Te size={10}color={L}/>}
+                          <T style={[t.dirBadgeText,{color:L}]}>
+                            {h?"SENT":"RECV"}
+                          </T>
+                        </S>
+
+                        {b.eventName&&<S style={t.eventBadge}>
+                            <T style={t.eventBadgeText}numberOfLines={1}>
+                              {b.eventName}
+                            </T>
+                          </S>}
+
+                        <T style={t.frameIndexText}>#{k+1}</T>
+                      </S>
+
+                      <S style={t.frameHeaderRight}>
+                        <T style={t.frameOffsetTime}>
+                          +{Re}ms
+                        </T>
+                        <S style={t.frameSizePill}>
+                          <T style={t.frameSizeText}>
+                            {be(b.size||0)}
+                          </T>
+                        </S>
+                        <W value={b.raw??b.data}label="Frame"/>
+                        <Le direction={Y?"up":"down"}size={12}color={e.grayTextWeak}/>
+                      </S>
+                    </M>
+
+                    
+                    <S style={t.frameBody}>
+                      {typeof b.data=="object"&&b.data!==null?<Z data={b.data}search={z}forceOpen={Y}/>:<T style={t.frameRawText}>
+                          <$e text={String(b.data)}search={z}/>
+                        </T>}
+                    </S>
+                  </S>})}
+          </$>
+        </S>}
+
+      
+      {F==="overview"&&<$ style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <S style={t.sectionCard}>
+            <T style={t.sectionHeading}>CONNECTION DETAILS</T>
+
+            <S style={t.infoRow}>
+              <T style={t.infoKey}>URL</T>
+              <T style={t.infoVal}selectable>{o.url}</T>
+            </S>
+
+            <S style={t.infoRow}>
+              <T style={t.infoKey}>Client Engine</T>
+              <T style={t.infoVal}>{o.client?.toUpperCase()||"WEBSOCKET"}</T>
+            </S>
+
+            <S style={t.infoRow}>
+              <T style={t.infoKey}>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}>Connected At</T>
+              <T style={t.infoVal}>{ee(o.startTime)}</T>
+            </S>
+
+            {o.endTime&&<S style={t.infoRow}>
+                <T style={t.infoKey}>Closed At</T>
+                <T style={t.infoVal}>{ee(o.endTime)}</T>
+              </S>}
+
+            {o.closeCode!=null&&<S style={t.infoRow}>
+                <T style={t.infoKey}>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}>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}>Caller Stack</T>
+                <T style={[t.infoVal,{fontFamily:C.interMedium,color:e.brandPurple}]}selectable>
+                  {o.caller}
+                </T>
+              </S>}
+
+            {o.error&&<S style={t.infoRow}>
+                <T style={t.infoKey}>Error</T>
+                <T style={[t.infoVal,{color:e.errorColor}]}selectable>
+                  {o.error}
+                </T>
+              </S>}
+          </S>
+        </$>}
+
+      
+      {F==="params"&&<$ style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <S style={t.sectionCard}>
+            <T style={t.sectionHeading}>HANDSHAKE QUERY PARAMETERS</T>
+            {!o.query||Object.keys(o.query).length===0?<T style={t.emptySectionText}>No query parameters passed in connection URL</T>:Object.entries(o.query).map(([b,k])=><S key={b}style={t.paramRow}>
+                  <T style={t.paramKey}selectable>{b}</T>
+                  <T style={t.paramVal}selectable>{k}</T>
+                  <W value={k}label={b}/>
+                </S>)}
+          </S>
+        </$>}
+
+      
+      {F==="raw"&&<$ style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <S style={t.sectionCard}>
+            <T style={t.sectionHeading}>JAVASCRIPT CLIENT CODE</T>
+            <_ code={J}language="javascript"/>
+          </S>
+
+          <S style={[t.sectionCard,{marginTop:14}]}>
+            <T style={t.sectionHeading}>TERMINAL WSCAT COMMAND</T>
+            <_ code={G}language="javascript"/>
+          </S>
+
+          <S style={[t.sectionCard,{marginTop:14}]}>
+            <T style={t.sectionHeading}>RAW CONNECTION JSON DUMP</T>
+            <Z data={o}/>
+          </S>
+        </$>}
+    </S>};export default Xe;const t=Fe.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:C.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:C.interMedium,fontSize:11,color:e.grayTextWeak},dirPillTextActive:{color:e.brandPurple,fontFamily:C.interBold},expandGroup:{flexDirection:"row",alignItems:"center",gap:4},textBtn:{paddingVertical:2,paddingHorizontal:4},textBtnLabel:{fontFamily:C.interMedium,fontSize:11,color:e.brandPurple},textBtnSep:{color:e.grayTextWeak,fontSize:10},framesScrollView:{flex:1},emptyFrames:{padding:32,alignItems:"center"},emptyFramesText:{fontFamily:C.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:C.interBold,fontSize:9.5},eventBadge:{backgroundColor:`${e.violet600}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4,maxWidth:130},eventBadgeText:{fontFamily:C.interBold,fontSize:10,color:e.violet600},frameIndexText:{fontFamily:C.interMedium,fontSize:10,color:e.grayTextWeak},frameHeaderRight:{flexDirection:"row",alignItems:"center",gap:6},frameOffsetTime:{fontFamily:C.interRegular,fontSize:10,color:e.grayTextWeak},frameSizePill:{backgroundColor:`${e.slate400}18`,paddingHorizontal:4,paddingVertical:1,borderRadius:4},frameSizeText:{fontFamily:C.interMedium,fontSize:9.5,color:e.grayTextStrong},frameBody:{padding:8},frameRawText:{fontFamily:C.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:C.interBold,fontSize:11,color:e.grayTextWeak,letterSpacing:.6,marginBottom:10},infoRow:{paddingVertical:8,borderBottomWidth:1,borderBottomColor:e.dividerColor},infoKey:{fontFamily:C.interMedium,fontSize:11,color:e.grayTextWeak,marginBottom:2},infoVal:{fontFamily:C.interSemiBold,fontSize:12.5,color:e.grayTextStrong,lineHeight:18},emptySectionText:{fontFamily:C.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:C.interBold,fontSize:12,color:e.brandPurple,width:"30%"},paramVal:{flex:1,fontFamily:C.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;