react-native-inapp-inspector 2.4.0 → 2.4.2

package/dist/commonjs/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/commonjs/components/Inspector/SocketCard.js

@@ -0,0 +1,116 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(e,o,l,r){r===void 0&&(r=l);var t=Object.getOwnPropertyDescriptor(o,l);(!t||("get"in t?!o.__esModule:t.writable||t.configurable))&&(t={enumerable:!0,get:function(){return o[l]}}),Object.defineProperty(e,r,t)}):(function(e,o,l,r){r===void 0&&(r=l),e[r]=o[l]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(e,o){Object.defineProperty(e,"default",{enumerable:!0,value:o})}):function(e,o){e.default=o}),__importStar=this&&this.__importStar||(function(){var e=function(o){return e=Object.getOwnPropertyNames||function(l){var r=[];for(var t in l)Object.prototype.hasOwnProperty.call(l,t)&&(r[r.length]=t);return r},e(o)};return function(o){if(o&&o.__esModule)return o;var l={};if(o!=null)for(var r=e(o),t=0;t<r.length;t++)r[t]!=="default"&&__createBinding(l,o,r[t]);return __setModuleDefault(l,o),l}})(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),HighlightText_1=__importDefault(require("../HighlightText")),TouchableScale_1=__importDefault(require("../TouchableScale")),i18n_1=require("../../i18n");function formatByteSize(e){return!e||e<=0?"0 B":e<1024?`${e} B`:e<1024*1024?`${(e/1024).toFixed(1)} KB`:`${(e/(1024*1024)).toFixed(2)} MB`}function SocketCard({item:e,onPress:o,searchStr:l,isNew:r,isSelected:t,onToggleSelect:f,serialNumber:_}){const{t:d}=(0,i18n_1.useTranslation)(),n=e.url.startsWith("wss://")||e.url.startsWith("https://"),g=e.client==="socket.io"||e.url.includes("/socket.io"),u=(0,react_1.useMemo)(()=>g?{label:"SIO",color:AppColors_1.AppColors.violet600,bg:`${AppColors_1.AppColors.violet600}14`,border:`${AppColors_1.AppColors.violet600}35`}:n?{label:"WSS",color:AppColors_1.AppColors.emerald600,bg:`${AppColors_1.AppColors.emerald600}14`,border:`${AppColors_1.AppColors.emerald600}35`}:{label:"WS",color:AppColors_1.AppColors.blue600,bg:`${AppColors_1.AppColors.blue600}14`,border:`${AppColors_1.AppColors.blue600}35`},[g,n]),b=e.status||"open",a=b==="open",p=b==="connecting",s=b==="error",m=(0,react_1.useMemo)(()=>a?AppColors_1.AppColors.greenColor:p?AppColors_1.AppColors.amber600:s?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.slate400,[a,p,s]),C=(0,react_1.useMemo)(()=>a?{label:"OPEN",color:AppColors_1.AppColors.greenColor,bg:`${AppColors_1.AppColors.greenColor}15`,border:`${AppColors_1.AppColors.greenColor}40`}:p?{label:"CONNECTING",color:AppColors_1.AppColors.amber600,bg:`${AppColors_1.AppColors.amber600}15`,border:`${AppColors_1.AppColors.amber600}40`}:s?{label:e.closeCode?`ERR ${e.closeCode}`:"ERROR",color:AppColors_1.AppColors.errorColor,bg:`${AppColors_1.AppColors.errorColor}15`,border:`${AppColors_1.AppColors.errorColor}40`}:{label:e.closeCode?`CLOSED (${e.closeCode})`:"CLOSED",color:AppColors_1.AppColors.slate500,bg:`${AppColors_1.AppColors.slate500}15`,border:`${AppColors_1.AppColors.slate500}40`},[a,p,s,e.closeCode]),w=(0,react_1.useMemo)(()=>{try{const c=e.url.replace(/^(wss?|https?):\/\//,""),i=c.indexOf("/");if(i>=0){const h=c.substring(0,i),S=c.substring(i);return{host:h,path:S}}return{host:c,path:"/"}}catch{return{host:e.url,path:"/"}}},[e.url]),x=c=>{c?.stopPropagation?.();const i=e.url.replace(/^wss:\/\//i,"https://").replace(/^ws:\/\//i,"http://");react_native_1.Alert.alert(d("common.openInBrowser","Open in Browser"),`${d("common.openInBrowserPrompt","Are you sure you want to open this URL in your external browser?")}
+
+${i}`,[{text:d("common.cancel","Cancel"),style:"cancel"},{text:d("common.open","Open"),onPress:()=>{react_native_1.Linking.canOpenURL(i).then(h=>{h?react_native_1.Linking.openURL(i):react_native_1.Linking.openURL(i).catch(()=>{})}).catch(()=>{})}}])},A=(0,react_1.useRef)(new react_native_1.Animated.Value(r?.35:0)).current;(0,react_1.useEffect)(()=>{r&&react_native_1.Animated.timing(A,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[r,A]);const y=(e.totalBytesSent||0)+(e.totalBytesReceived||0),T=e.duration!=null?`${e.duration}ms`:"Active",v=(0,helpers_1.formatDateTime)(e.startTime);return<react_native_1.View style={styles.container}>
+      <TouchableScale_1.default onPress={o}style={[styles.card,{borderLeftWidth:3.5,borderLeftColor:m,backgroundColor:s?AppColors_1.AppColors.errorCardBg:AppColors_1.AppColors.white},r&&styles.cardNew]}>
+        <react_native_1.View style={styles.cardBody}>
+          
+          <react_native_1.View style={styles.cardHeaderRow}>
+            <react_native_1.View style={styles.cardHeaderLeft}>
+              {f&&<react_native_1.Pressable onPress={()=>f(e.id)}hitSlop={12}style={[styles.smallCheckbox,t&&styles.smallCheckboxChecked]}>
+                  {t&&<react_native_svg_1.default width={9}height={9}viewBox="0 0 24 24"fill="none">
+                      <react_native_svg_1.Path d="M20 6L9 17l-5-5"stroke={AppColors_1.AppColors.white}strokeWidth="4"strokeLinecap="round"strokeLinejoin="round"/>
+                    </react_native_svg_1.default>}
+                </react_native_1.Pressable>}
+
+              {_!=null&&<react_native_1.Text style={styles.serialNumber}>#{_}</react_native_1.Text>}
+
+              
+              <react_native_1.View style={[styles.protocolBadge,{backgroundColor:u.bg,borderColor:u.border}]}>
+                <react_native_1.Text style={[styles.protocolBadgeText,{color:u.color}]}>
+                  {u.label}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              {g&&<react_native_1.View style={[styles.chip,{backgroundColor:`${AppColors_1.AppColors.violet600}12`,borderColor:`${AppColors_1.AppColors.violet600}2B`}]}>
+                  <react_native_1.Text style={[styles.chipText,{color:AppColors_1.AppColors.violet600}]}>
+                    SOCKET.IO
+                  </react_native_1.Text>
+                </react_native_1.View>}
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.cardHeaderRight}>
+              
+              <react_native_1.View style={[styles.statusPill,{backgroundColor:C.bg,borderColor:C.border}]}>
+                {a?<react_native_1.View style={styles.pulsingDot}/>:p?<NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.amber600}size={9}/>:s?<NetworkIcons_1.CircleXIcon color={AppColors_1.AppColors.errorColor}size={9}/>:<NetworkIcons_1.CircleCheckIcon color={AppColors_1.AppColors.slate500}size={9}/>}
+                <react_native_1.Text style={[styles.statusPillText,{color:C.color}]}>
+                  {C.label}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.Pressable onPress={x}hitSlop={8}style={styles.globeBtn}accessibilityRole="button"accessibilityLabel="Open in Browser">
+                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
+              </react_native_1.Pressable>
+
+              <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.grayTextWeak}size={13}/>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <react_native_1.View style={styles.urlBox}>
+            <react_native_1.View style={styles.urlMainRow}>
+              <HighlightText_1.default text={w.path}search={l}style={styles.pathText}highlightStyle={styles.highlight}numberOfLines={1}ellipsizeMode="middle"/>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.hostRow}>
+              <react_native_1.View style={[styles.protoBadge,{backgroundColor:n?`${AppColors_1.AppColors.emerald600}12`:`${AppColors_1.AppColors.blue600}12`,borderColor:n?`${AppColors_1.AppColors.emerald600}2B`:`${AppColors_1.AppColors.blue600}2B`}]}>
+                {n?<NetworkIcons_1.LockIcon size={9}color={AppColors_1.AppColors.emerald600}/>:<NetworkIcons_1.GlobeIcon size={9}color={AppColors_1.AppColors.blue600}/>}
+                <react_native_1.Text style={[styles.protoBadgeText,{color:n?AppColors_1.AppColors.emerald600:AppColors_1.AppColors.blue600}]}>
+                  {n?"WSS":"WS"}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.Text style={styles.hostText}numberOfLines={1}ellipsizeMode="tail">
+                {w.host}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <react_native_1.View style={styles.cardFooterRow}>
+            <react_native_1.View style={styles.footerLeft}>
+              <react_native_1.View style={styles.cardDateRow}>
+                <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak}size={10}/>
+                <react_native_1.Text style={styles.cardDateText}numberOfLines={1}>
+                  {v||(0,helpers_1.formatTime)(e.startTime)}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.footerRight}>
+              
+              <react_native_1.View style={[styles.metaStatChip,{backgroundColor:`${AppColors_1.AppColors.blue600}10`,borderColor:`${AppColors_1.AppColors.blue600}26`}]}>
+                <NetworkIcons_1.SendFrameIcon size={9}color={AppColors_1.AppColors.blue600}/>
+                <react_native_1.Text style={[styles.metaStatText,{color:AppColors_1.AppColors.blue600}]}>
+                  {e.sentCount||0}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={[styles.metaStatChip,{backgroundColor:`${AppColors_1.AppColors.emerald600}10`,borderColor:`${AppColors_1.AppColors.emerald600}26`}]}>
+                <NetworkIcons_1.ReceiveFrameIcon size={9}color={AppColors_1.AppColors.emerald600}/>
+                <react_native_1.Text style={[styles.metaStatText,{color:AppColors_1.AppColors.emerald600}]}>
+                  {e.receivedCount||0}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              {y>0&&<react_native_1.View style={[styles.metaStatChip,{backgroundColor:`${AppColors_1.AppColors.purple}10`,borderColor:`${AppColors_1.AppColors.purple}26`}]}>
+                  <NetworkIcons_1.SizeIcon size={9}color={AppColors_1.AppColors.purple}/>
+                  <react_native_1.Text style={[styles.metaStatText,{color:AppColors_1.AppColors.purple}]}>
+                    {formatByteSize(y)}
+                  </react_native_1.Text>
+                </react_native_1.View>}
+
+              
+              <react_native_1.View style={[styles.metaStatChip,{backgroundColor:a?`${AppColors_1.AppColors.greenColor}10`:`${AppColors_1.AppColors.slate400}10`,borderColor:a?`${AppColors_1.AppColors.greenColor}26`:`${AppColors_1.AppColors.slate400}26`}]}>
+                <NetworkIcons_1.ClockIcon size={9}color={a?AppColors_1.AppColors.greenColor:AppColors_1.AppColors.grayTextWeak}/>
+                <react_native_1.Text style={[styles.metaStatText,{color:a?AppColors_1.AppColors.greenColor:AppColors_1.AppColors.grayTextWeak}]}>
+                  {T}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+      </TouchableScale_1.default>
+    </react_native_1.View>}const styles=react_native_1.StyleSheet.create({container:{marginHorizontal:4,marginBottom:6},card:{borderRadius:12,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,shadowColor:AppColors_1.AppColors.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2,elevation:1,overflow:"hidden"},cardNew:{borderColor:`${AppColors_1.AppColors.brandPurple}66`,backgroundColor:`${AppColors_1.AppColors.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:AppColors_1.AppColors.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:AppColors_1.AppColors.white,marginRight:2},smallCheckboxChecked:{backgroundColor:AppColors_1.AppColors.purple,borderColor:AppColors_1.AppColors.purple},serialNumber:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:10.5,color:AppColors_1.AppColors.grayTextWeak},protocolBadge:{paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1},protocolBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,letterSpacing:.3},chip:{paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.interBold,fontSize:9.5,letterSpacing:.3},pulsingDot:{width:6,height:6,borderRadius:3,backgroundColor:AppColors_1.AppColors.greenColor},globeBtn:{padding:3,borderRadius:4,backgroundColor:`${AppColors_1.AppColors.grayTextWeak}12`},urlBox:{marginBottom:8},urlMainRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6,marginBottom:3},pathText:{flex:1,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12.5,color:AppColors_1.AppColors.grayTextStrong,lineHeight:17},highlight:{backgroundColor:"rgba(250, 204, 21, 0.40)",color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interBold,fontSize:8.5,letterSpacing:.2},hostText:{flex:1,fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextWeak},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingTop:6,borderTopWidth:1,borderTopColor:AppColors_1.AppColors.dividerColor},footerLeft:{flexDirection:"row",alignItems:"center",flex:1,minWidth:0,marginRight:6},cardDateRow:{flexDirection:"row",alignItems:"center",gap:4},cardDateText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interSemiBold,fontSize:9.5}});function areSocketPropsEqual(e,o){return e.item===o.item&&e.isSelected===o.isSelected&&e.isNew===o.isNew&&e.searchStr===o.searchStr&&e.serialNumber===o.serialNumber&&e.onPress===o.onPress&&e.onToggleSelect===o.onToggleSelect}exports.default=react_1.default.memo(SocketCard,areSocketPropsEqual);

package/dist/commonjs/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/commonjs/components/Inspector/SocketDetail.js

@@ -0,0 +1,317 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(e,o,a,l){l===void 0&&(l=a);var r=Object.getOwnPropertyDescriptor(o,a);(!r||("get"in r?!o.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return o[a]}}),Object.defineProperty(e,l,r)}):(function(e,o,a,l){l===void 0&&(l=a),e[l]=o[a]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(e,o){Object.defineProperty(e,"default",{enumerable:!0,value:o})}):function(e,o){e.default=o}),__importStar=this&&this.__importStar||(function(){var e=function(o){return e=Object.getOwnPropertyNames||function(a){var l=[];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(l[l.length]=r);return l},e(o)};return function(o){if(o&&o.__esModule)return o;var a={};if(o!=null)for(var l=e(o),r=0;r<l.length;r++)l[r]!=="default"&&__createBinding(a,o,l[r]);return __setModuleDefault(a,o),a}})(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),SegmentedTabs_1=__importDefault(require("../SegmentedTabs")),JsonViewer_1=__importDefault(require("../JsonViewer")),CopyButton_1=__importDefault(require("../CopyButton")),ShareButton_1=__importDefault(require("../ShareButton")),CodeSnippet_1=__importDefault(require("../CodeSnippet")),HighlightText_1=__importDefault(require("../HighlightText")),TouchableScale_1=__importDefault(require("../TouchableScale")),helpers_1=require("../../helpers"),shareFormatter_1=require("../../helpers/shareFormatter"),NetworkIcons_1=require("../NetworkIcons");function formatByteSize(e){return!e||e<=0?"0 B":e<1024?`${e} B`:e<1024*1024?`${(e/1024).toFixed(1)} KB`:`${(e/(1024*1024)).toFixed(2)} MB`}const SocketDetail=({item:e})=>{const{t:o}=(0,i18n_1.useTranslation)(),[a,l]=(0,react_1.useState)("messages"),[r,f]=(0,react_1.useState)(""),[s,u]=(0,react_1.useState)("all"),[m,y]=(0,react_1.useState)(new Set);if(!e)return null;const C=e.url.startsWith("wss://")||e.url.startsWith("https://"),c=e.client==="socket.io"||e.url.includes("/socket.io"),d=(0,react_1.useMemo)(()=>{const t=(e.status||"open").toLowerCase();return t==="open"?AppColors_1.AppColors.greenColor:t==="connecting"?AppColors_1.AppColors.amber600:t==="error"?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.slate500},[e.status]),g=()=>{const t=e.url.replace(/^wss:\/\//,"https://").replace(/^ws:\/\//,"http://");react_native_1.Alert.alert(o("common.openInBrowser")||"Open in Browser",`${o("common.openInBrowserPrompt")||"Open URL in browser?"}
+
+${t}`,[{text:o("common.cancel")||"Cancel",style:"cancel"},{text:o("common.open")||"Open",onPress:()=>{react_native_1.Linking.canOpenURL(t).then(i=>{i&&react_native_1.Linking.openURL(t).catch(()=>{})})}}])},b=async()=>{await(0,shareFormatter_1.shareSocketReport)(e)},S=t=>{y(i=>{const n=new Set(i);return n.has(t)?n.delete(t):n.add(t),n})},h=()=>{const t=new Set((e.frames||[]).map(i=>i.id));y(t)},V=()=>{y(new Set)},x=(0,react_1.useMemo)(()=>{let t=e.frames||[];if(s!=="all"&&(t=t.filter(i=>i.direction===s)),r.trim()){const i=r.trim().toLowerCase();t=t.filter(n=>!!(n.eventName&&n.eventName.toLowerCase().includes(i)||n.type&&n.type.toLowerCase().includes(i)||typeof n.data=="string"&&n.data.toLowerCase().includes(i)||n.data&&typeof n.data=="object"&&JSON.stringify(n.data).toLowerCase().includes(i)))}return t},[e.frames,s,r]),F=(e.totalBytesSent||0)+(e.totalBytesReceived||0),w=(0,react_1.useMemo)(()=>c?`import { io } from 'socket.io-client';
+
+const socket = io('${e.url}', {
+  transports: ['websocket'],
+  query: ${JSON.stringify(e.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('${e.url}'${e.protocols?`, ${JSON.stringify(e.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);
+};`,[e.url,e.protocols,e.query,c]),T=`wscat -c "${e.url}"`,v=e.url.indexOf("://"),p=v!==-1?e.url.substring(0,v+3):"";return<react_native_1.View style={{flex:1,backgroundColor:AppColors_1.AppColors.contentBg}}>
+      
+      <react_native_1.View style={{paddingHorizontal:8,paddingTop:4}}>
+        <react_native_1.View style={styles_1.default.detailInfoBar}>
+          
+          <react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,paddingBottom:8,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor}}>
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5,flexWrap:"wrap",flex:1}}>
+              
+              <react_native_1.View style={[styles_1.default.methodBadge,{backgroundColor:c?AppColors_1.AppColors.violet600:C?AppColors_1.AppColors.emerald600:AppColors_1.AppColors.blue600,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6}]}>
+                <react_native_1.Text style={[styles_1.default.methodBadgeText,{color:AppColors_1.AppColors.white,fontSize:10.5,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                  {c?"SIO":C?"WSS":"WS"}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:c?`${AppColors_1.AppColors.violet600}14`:`${AppColors_1.AppColors.sky500}14`,borderColor:c?`${AppColors_1.AppColors.violet600}30`:`${AppColors_1.AppColors.sky500}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
+                <react_native_1.Text style={[styles_1.default.chipText,{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:c?AppColors_1.AppColors.violet600:AppColors_1.AppColors.sky600}]}>
+                  {(e.client||"WEBSOCKET").toUpperCase()}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${d}18`,borderColor:`${d}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
+                {e.status==="error"?<NetworkIcons_1.FailIcon size={8}color={AppColors_1.AppColors.errorColor}/>:<react_native_1.View style={{width:6,height:6,borderRadius:3,backgroundColor:d}}/>}
+                <react_native_1.Text style={[styles_1.default.chipText,{color:d,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
+                  {(e.status||"open").toUpperCase()}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${AppColors_1.AppColors.brandPurple}14`,borderColor:`${AppColors_1.AppColors.brandPurple}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.brandPurple}size={10}/>
+                <react_native_1.Text style={[styles_1.default.chipText,{color:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
+                  {e.duration!=null?`${e.duration}ms`:"Active"}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${AppColors_1.AppColors.teal600}14`,borderColor:`${AppColors_1.AppColors.teal600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                <NetworkIcons_1.SendFrameIcon color={AppColors_1.AppColors.teal600}size={10}/>
+                <react_native_1.Text style={[styles_1.default.chipText,{color:AppColors_1.AppColors.teal600,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
+                  {e.frames?.length||0} frames
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${AppColors_1.AppColors.sky600}14`,borderColor:`${AppColors_1.AppColors.sky600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.sky600}size={10}/>
+                <react_native_1.Text style={[styles_1.default.chipText,{color:AppColors_1.AppColors.sky600,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
+                  {formatByteSize(F)}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <react_native_1.View style={{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,padding:10,marginTop:8,gap:8}}>
+            
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"nowrap",gap:6}}>
+              <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1,minWidth:0}}>
+                {p?<react_native_1.View style={{backgroundColor:p.startsWith("wss")||p.startsWith("https")?`${AppColors_1.AppColors.green600}18`:`${AppColors_1.AppColors.amber500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:p.startsWith("wss")||p.startsWith("https")?AppColors_1.AppColors.green600:AppColors_1.AppColors.amber500}}>
+                      {p.replace("://","").toUpperCase()}
+                    </react_native_1.Text>
+                  </react_native_1.View>:null}
+
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
+                  ENDPOINT URL
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0}}>
+                <CopyButton_1.default value={T}label="wscat"iconType="terminal"/>
+                <ShareButton_1.default onShare={b}/>
+                <CopyButton_1.default value={w}label="JS"iconType="fetch"/>
+                <CopyButton_1.default value={e.url}label="URL"iconType="copy"/>
+                <TouchableScale_1.default style={[styles_1.default.iconSquareBtn,{backgroundColor:`${AppColors_1.AppColors.sky600}15`,borderColor:`${AppColors_1.AppColors.sky600}35`}]}onPress={g}hitSlop={10}accessibilityLabel="Open in Browser">
+                  <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600}size={13}/>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.Pressable onPress={g}>
+              <react_native_1.Text selectable={!0}style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12.5,color:AppColors_1.AppColors.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
+                {e.url}
+              </react_native_1.Text>
+            </react_native_1.Pressable>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <SegmentedTabs_1.default tabs={[{key:"messages",label:`${o("socket.messages","Messages")} (${e.frames?.length||0})`,themeColor:AppColors_1.AppColors.violet600,icon:t=><NetworkIcons_1.SendFrameIcon size={12}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>},{key:"overview",label:o("socket.overview","Overview"),themeColor:AppColors_1.AppColors.sky600,icon:t=><NetworkIcons_1.GlobeIcon size={12}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>},{key:"params",label:`${o("socket.params","Params")} (${Object.keys(e.query||{}).length})`,themeColor:AppColors_1.AppColors.teal600,icon:t=><NetworkIcons_1.LayersIcon size={12}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>},{key:"raw",label:o("socket.rawAndCode","Raw & Code"),themeColor:AppColors_1.AppColors.amber600,icon:t=><NetworkIcons_1.TerminalIcon size={12}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>}]}activeKey={a}onChange={l}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
+
+      
+      {a==="messages"&&<react_native_1.View style={{flex:1}}>
+          
+          <react_native_1.View style={socketDetailStyles.frameControlBar}>
+            <react_native_1.View style={socketDetailStyles.frameSearchBar}>
+              <NetworkIcons_1.SearchIcon size={13}color={AppColors_1.AppColors.grayTextWeak}/>
+              <react_native_1.TextInput style={socketDetailStyles.frameSearchInput}placeholder={o("socket.searchFramesPlaceholder","Search frame payloads or event names...")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={r}onChangeText={f}clearButtonMode="while-editing"/>
+              {r.length>0&&<react_native_1.Pressable onPress={()=>f("")}>
+                  <NetworkIcons_1.ClearIcon size={12}color={AppColors_1.AppColors.grayTextWeak}/>
+                </react_native_1.Pressable>}
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={socketDetailStyles.frameFilterRow}>
+              <react_native_1.View style={socketDetailStyles.dirPillGroup}>
+                <react_native_1.TouchableOpacity onPress={()=>u("all")}style={[socketDetailStyles.dirPill,s==="all"&&socketDetailStyles.dirPillActive]}>
+                  <react_native_1.Text style={[socketDetailStyles.dirPillText,s==="all"&&socketDetailStyles.dirPillTextActive]}>
+                    {o("common.all","All")}
+                  </react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+
+                <react_native_1.TouchableOpacity onPress={()=>u("send")}style={[socketDetailStyles.dirPill,s==="send"&&socketDetailStyles.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
+                  <NetworkIcons_1.SendFrameIcon size={10}color={s==="send"?AppColors_1.AppColors.white:AppColors_1.AppColors.emerald600}/>
+                  <react_native_1.Text style={[socketDetailStyles.dirPillText,s==="send"&&socketDetailStyles.dirPillTextActive]}>
+                    {o("socket.sent","Sent")}
+                  </react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+
+                <react_native_1.TouchableOpacity onPress={()=>u("receive")}style={[socketDetailStyles.dirPill,s==="receive"&&socketDetailStyles.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
+                  <NetworkIcons_1.ReceiveFrameIcon size={10}color={s==="receive"?AppColors_1.AppColors.white:AppColors_1.AppColors.sky600}/>
+                  <react_native_1.Text style={[socketDetailStyles.dirPillText,s==="receive"&&socketDetailStyles.dirPillTextActive]}>
+                    {o("socket.recv","Recv")}
+                  </react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>
+
+              <react_native_1.View style={socketDetailStyles.expandGroup}>
+                <react_native_1.TouchableOpacity onPress={h}style={socketDetailStyles.textBtn}>
+                  <react_native_1.Text style={socketDetailStyles.textBtnLabel}>{o("common.expandAll","Expand All")}</react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+                <react_native_1.Text style={socketDetailStyles.textBtnSep}>•</react_native_1.Text>
+                <react_native_1.TouchableOpacity onPress={V}style={socketDetailStyles.textBtn}>
+                  <react_native_1.Text style={socketDetailStyles.textBtnLabel}>{o("common.collapseAll","Collapse All")}</react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <react_native_1.ScrollView style={socketDetailStyles.framesScrollView}contentContainerStyle={{padding:12}}>
+            {x.length===0?<react_native_1.View style={socketDetailStyles.emptyFrames}>
+                <react_native_1.Text style={socketDetailStyles.emptyFramesText}>
+                  {e.frames?.length===0?"No messages transferred on this connection yet":"No frames match the active search or direction filter"}
+                </react_native_1.Text>
+              </react_native_1.View>:x.map((t,i)=>{const n=t.direction==="send",A=m.has(t.id),_=n?AppColors_1.AppColors.blue600:AppColors_1.AppColors.emerald600,B=n?`${AppColors_1.AppColors.blue600}12`:`${AppColors_1.AppColors.emerald600}12`,k=t.timestamp-e.startTime;return<react_native_1.View key={t.id}style={socketDetailStyles.frameCard}>
+                    
+                    <react_native_1.Pressable onPress={()=>S(t.id)}style={socketDetailStyles.frameCardHeader}>
+                      <react_native_1.View style={socketDetailStyles.frameHeaderLeft}>
+                        <react_native_1.View style={[socketDetailStyles.dirBadge,{backgroundColor:B}]}>
+                          {n?<NetworkIcons_1.SendFrameIcon size={10}color={_}/>:<NetworkIcons_1.ReceiveFrameIcon size={10}color={_}/>}
+                          <react_native_1.Text style={[socketDetailStyles.dirBadgeText,{color:_}]}>
+                            {n?"SENT":"RECV"}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+
+                        {t.eventName&&<react_native_1.View style={socketDetailStyles.eventBadge}>
+                            <react_native_1.Text style={socketDetailStyles.eventBadgeText}numberOfLines={1}>
+                              {t.eventName}
+                            </react_native_1.Text>
+                          </react_native_1.View>}
+
+                        <react_native_1.Text style={socketDetailStyles.frameIndexText}>#{i+1}</react_native_1.Text>
+                      </react_native_1.View>
+
+                      <react_native_1.View style={socketDetailStyles.frameHeaderRight}>
+                        <react_native_1.Text style={socketDetailStyles.frameOffsetTime}>
+                          +{k}ms
+                        </react_native_1.Text>
+                        <react_native_1.View style={socketDetailStyles.frameSizePill}>
+                          <react_native_1.Text style={socketDetailStyles.frameSizeText}>
+                            {formatByteSize(t.size||0)}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <CopyButton_1.default value={t.raw??t.data}label="Frame"/>
+                        <NetworkIcons_1.ChevronIcon direction={A?"up":"down"}size={12}color={AppColors_1.AppColors.grayTextWeak}/>
+                      </react_native_1.View>
+                    </react_native_1.Pressable>
+
+                    
+                    <react_native_1.View style={socketDetailStyles.frameBody}>
+                      {typeof t.data=="object"&&t.data!==null?<JsonViewer_1.default data={t.data}search={r}forceOpen={A}/>:<react_native_1.Text style={socketDetailStyles.frameRawText}>
+                          <HighlightText_1.default text={String(t.data)}search={r}/>
+                        </react_native_1.Text>}
+                    </react_native_1.View>
+                  </react_native_1.View>})}
+          </react_native_1.ScrollView>
+        </react_native_1.View>}
+
+      
+      {a==="overview"&&<react_native_1.ScrollView style={socketDetailStyles.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <react_native_1.View style={socketDetailStyles.sectionCard}>
+            <react_native_1.Text style={socketDetailStyles.sectionHeading}>CONNECTION DETAILS</react_native_1.Text>
+
+            <react_native_1.View style={socketDetailStyles.infoRow}>
+              <react_native_1.Text style={socketDetailStyles.infoKey}>URL</react_native_1.Text>
+              <react_native_1.Text style={socketDetailStyles.infoVal}selectable>{e.url}</react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.View style={socketDetailStyles.infoRow}>
+              <react_native_1.Text style={socketDetailStyles.infoKey}>Client Engine</react_native_1.Text>
+              <react_native_1.Text style={socketDetailStyles.infoVal}>{e.client?.toUpperCase()||"WEBSOCKET"}</react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.View style={socketDetailStyles.infoRow}>
+              <react_native_1.Text style={socketDetailStyles.infoKey}>Ready State</react_native_1.Text>
+              <react_native_1.Text style={socketDetailStyles.infoVal}>
+                {e.readyState===1?"1 (OPEN)":e.readyState===0?"0 (CONNECTING)":e.readyState===2?"2 (CLOSING)":"3 (CLOSED)"}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.View style={socketDetailStyles.infoRow}>
+              <react_native_1.Text style={socketDetailStyles.infoKey}>Connected At</react_native_1.Text>
+              <react_native_1.Text style={socketDetailStyles.infoVal}>{(0,helpers_1.formatDateTime)(e.startTime)}</react_native_1.Text>
+            </react_native_1.View>
+
+            {e.endTime&&<react_native_1.View style={socketDetailStyles.infoRow}>
+                <react_native_1.Text style={socketDetailStyles.infoKey}>Closed At</react_native_1.Text>
+                <react_native_1.Text style={socketDetailStyles.infoVal}>{(0,helpers_1.formatDateTime)(e.endTime)}</react_native_1.Text>
+              </react_native_1.View>}
+
+            {e.closeCode!=null&&<react_native_1.View style={socketDetailStyles.infoRow}>
+                <react_native_1.Text style={socketDetailStyles.infoKey}>Close Code & Reason</react_native_1.Text>
+                <react_native_1.Text style={socketDetailStyles.infoVal}>{e.closeCode} ({e.closeReason||"N/A"})</react_native_1.Text>
+              </react_native_1.View>}
+
+            {e.protocols&&<react_native_1.View style={socketDetailStyles.infoRow}>
+                <react_native_1.Text style={socketDetailStyles.infoKey}>Subprotocols</react_native_1.Text>
+                <react_native_1.Text style={socketDetailStyles.infoVal}>
+                  {Array.isArray(e.protocols)?e.protocols.join(", "):e.protocols}
+                </react_native_1.Text>
+              </react_native_1.View>}
+
+            {e.caller&&<react_native_1.View style={socketDetailStyles.infoRow}>
+                <react_native_1.Text style={socketDetailStyles.infoKey}>Caller Stack</react_native_1.Text>
+                <react_native_1.Text style={[socketDetailStyles.infoVal,{fontFamily:AppFonts_1.AppFonts.interMedium,color:AppColors_1.AppColors.brandPurple}]}selectable>
+                  {e.caller}
+                </react_native_1.Text>
+              </react_native_1.View>}
+
+            {e.error&&<react_native_1.View style={socketDetailStyles.infoRow}>
+                <react_native_1.Text style={socketDetailStyles.infoKey}>Error</react_native_1.Text>
+                <react_native_1.Text style={[socketDetailStyles.infoVal,{color:AppColors_1.AppColors.errorColor}]}selectable>
+                  {e.error}
+                </react_native_1.Text>
+              </react_native_1.View>}
+          </react_native_1.View>
+        </react_native_1.ScrollView>}
+
+      
+      {a==="params"&&<react_native_1.ScrollView style={socketDetailStyles.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <react_native_1.View style={socketDetailStyles.sectionCard}>
+            <react_native_1.Text style={socketDetailStyles.sectionHeading}>HANDSHAKE QUERY PARAMETERS</react_native_1.Text>
+            {!e.query||Object.keys(e.query).length===0?<react_native_1.Text style={socketDetailStyles.emptySectionText}>No query parameters passed in connection URL</react_native_1.Text>:Object.entries(e.query).map(([t,i])=><react_native_1.View key={t}style={socketDetailStyles.paramRow}>
+                  <react_native_1.Text style={socketDetailStyles.paramKey}selectable>{t}</react_native_1.Text>
+                  <react_native_1.Text style={socketDetailStyles.paramVal}selectable>{i}</react_native_1.Text>
+                  <CopyButton_1.default value={i}label={t}/>
+                </react_native_1.View>)}
+          </react_native_1.View>
+        </react_native_1.ScrollView>}
+
+      
+      {a==="raw"&&<react_native_1.ScrollView style={socketDetailStyles.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <react_native_1.View style={socketDetailStyles.sectionCard}>
+            <react_native_1.Text style={socketDetailStyles.sectionHeading}>JAVASCRIPT CLIENT CODE</react_native_1.Text>
+            <CodeSnippet_1.default code={w}language="javascript"/>
+          </react_native_1.View>
+
+          <react_native_1.View style={[socketDetailStyles.sectionCard,{marginTop:14}]}>
+            <react_native_1.Text style={socketDetailStyles.sectionHeading}>TERMINAL WSCAT COMMAND</react_native_1.Text>
+            <CodeSnippet_1.default code={T}language="javascript"/>
+          </react_native_1.View>
+
+          <react_native_1.View style={[socketDetailStyles.sectionCard,{marginTop:14}]}>
+            <react_native_1.Text style={socketDetailStyles.sectionHeading}>RAW CONNECTION JSON DUMP</react_native_1.Text>
+            <JsonViewer_1.default data={e}/>
+          </react_native_1.View>
+        </react_native_1.ScrollView>}
+    </react_native_1.View>};exports.default=SocketDetail;const socketDetailStyles=react_native_1.StyleSheet.create({frameControlBar:{padding:10,backgroundColor:AppColors_1.AppColors.graySurface,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,gap:8},frameSearchBar:{flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.contentBg,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,paddingHorizontal:8,height:34,gap:6},frameSearchInput:{flex:1,fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12,color:AppColors_1.AppColors.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:AppColors_1.AppColors.dividerColor,backgroundColor:AppColors_1.AppColors.contentBg},dirPillActive:{backgroundColor:`${AppColors_1.AppColors.brandPurple}18`,borderColor:AppColors_1.AppColors.brandPurple},dirPillText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextWeak},dirPillTextActive:{color:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.interBold},expandGroup:{flexDirection:"row",alignItems:"center",gap:4},textBtn:{paddingVertical:2,paddingHorizontal:4},textBtnLabel:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.brandPurple},textBtnSep:{color:AppColors_1.AppColors.grayTextWeak,fontSize:10},framesScrollView:{flex:1},emptyFrames:{padding:32,alignItems:"center"},emptyFramesText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12.5,color:AppColors_1.AppColors.grayTextWeak,textAlign:"center"},frameCard:{backgroundColor:AppColors_1.AppColors.contentBg,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,marginBottom:8,overflow:"hidden"},frameCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:10,paddingVertical:7,backgroundColor:AppColors_1.AppColors.graySurface,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor},frameHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},dirBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:5,paddingVertical:2,borderRadius:4,gap:3},dirBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5},eventBadge:{backgroundColor:`${AppColors_1.AppColors.violet600}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4,maxWidth:130},eventBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.violet600},frameIndexText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},frameHeaderRight:{flexDirection:"row",alignItems:"center",gap:6},frameOffsetTime:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},frameSizePill:{backgroundColor:`${AppColors_1.AppColors.slate400}18`,paddingHorizontal:4,paddingVertical:1,borderRadius:4},frameSizeText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:9.5,color:AppColors_1.AppColors.grayTextStrong},frameBody:{padding:8},frameRawText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12,color:AppColors_1.AppColors.grayTextStrong,lineHeight:16},tabContentScroll:{flex:1},sectionCard:{backgroundColor:AppColors_1.AppColors.contentBg,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,padding:12},sectionHeading:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.6,marginBottom:10},infoRow:{paddingVertical:8,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor},infoKey:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextWeak,marginBottom:2},infoVal:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:12.5,color:AppColors_1.AppColors.grayTextStrong,lineHeight:18},emptySectionText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12,color:AppColors_1.AppColors.grayTextWeak,fontStyle:"italic",paddingVertical:8},paramRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:8,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,gap:8},paramKey:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.brandPurple,width:"30%"},paramVal:{flex:1,fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12,color:AppColors_1.AppColors.grayTextStrong}});

package/dist/commonjs/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/commonjs/components/Inspector/SocketFilterModal.js

@@ -0,0 +1,69 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(o,r,l,n){n===void 0&&(n=l);var a=Object.getOwnPropertyDescriptor(r,l);(!a||("get"in a?!r.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return r[l]}}),Object.defineProperty(o,n,a)}):(function(o,r,l,n){n===void 0&&(n=l),o[n]=r[l]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(o,r){Object.defineProperty(o,"default",{enumerable:!0,value:r})}):function(o,r){o.default=r}),__importStar=this&&this.__importStar||(function(){var o=function(r){return o=Object.getOwnPropertyNames||function(l){var n=[];for(var a in l)Object.prototype.hasOwnProperty.call(l,a)&&(n[n.length]=a);return n},o(r)};return function(r){if(r&&r.__esModule)return r;var l={};if(r!=null)for(var n=o(r),a=0;a<n.length;a++)n[a]!=="default"&&__createBinding(l,r,n[a]);return __setModuleDefault(l,r),l}})(),__importDefault=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SocketFilterModal=exports.isSocketFiltersDefault=exports.DEFAULT_SOCKET_FILTERS=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),NetworkIcons_1=require("../NetworkIcons"),TouchableScale_1=__importDefault(require("../TouchableScale"));exports.DEFAULT_SOCKET_FILTERS={search:"",status:new Set(["all"]),types:new Set(["all"]),sortBy:"time_desc"};const isSocketFiltersDefault=o=>(o.status.has("all")||o.status.size===0)&&(o.types.has("all")||o.types.size===0)&&o.sortBy==="time_desc";exports.isSocketFiltersDefault=isSocketFiltersDefault;const SocketFilterModal=({visible:o,onClose:r,filters:l,onApply:n,records:a})=>{const[c,p]=(0,react_1.useState)(()=>({...l,status:new Set(l.status),types:new Set(l.types)}));(0,react_1.useEffect)(()=>{o&&p({...l,status:new Set(l.status),types:new Set(l.types)})},[o,l]);const s=(0,react_1.useMemo)(()=>{let e=0,t=0,i=0,y=0,_=0,b=0,f=0;return a.forEach(d=>{const u=d.status||"open";u==="open"?e++:u==="closed"?t++:u==="connecting"?i++:u==="error"&&y++,d.client==="socket.io"||d.url.includes("/socket.io")?f++:d.url.startsWith("wss://")?_++:b++}),{all:a.length,open:e,closed:t,connecting:i,error:y,wss:_,ws:b,sio:f}},[a]),h=e=>{const t=new Set(c.status);e==="all"?(t.clear(),t.add("all")):(t.delete("all"),t.has(e)?t.delete(e):t.add(e),t.size===0&&t.add("all")),p(i=>({...i,status:t}))},T=e=>{const t=new Set(c.types);e==="all"?(t.clear(),t.add("all")):(t.delete("all"),t.has(e)?t.delete(e):t.add(e),t.size===0&&t.add("all")),p(i=>({...i,types:t}))},g=()=>{p({search:c.search,status:new Set(["all"]),types:new Set(["all"]),sortBy:"time_desc"})},w=()=>{n(c),r()};return<react_native_1.Modal visible={o}transparent animationType="fade"onRequestClose={r}>
+      <react_native_1.View style={styles.backdrop}>
+        <react_native_1.Pressable style={styles.backdropPress}onPress={r}/>
+        <react_native_1.View style={styles.container}>
+          
+          <react_native_1.View style={styles.header}>
+            <react_native_1.View style={styles.headerLeft}>
+              <NetworkIcons_1.FilterIcon size={18}color={AppColors_1.AppColors.brandPurple}/>
+              <react_native_1.Text style={styles.headerTitle}>Filter WebSockets</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.TouchableOpacity onPress={r}hitSlop={{top:8,bottom:8,left:8,right:8}}style={styles.closeBtn}>
+              <NetworkIcons_1.CloseWhite size={14}color={AppColors_1.AppColors.grayTextWeak}/>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          <react_native_1.ScrollView style={styles.content}showsVerticalScrollIndicator={!1}>
+            
+            <react_native_1.Text style={styles.sectionTitle}>CONNECTION STATUS</react_native_1.Text>
+            <react_native_1.View style={styles.chipRow}>
+              {[{key:"all",label:"All",count:s.all,color:AppColors_1.AppColors.brandPurple},{key:"open",label:"Open",count:s.open,color:AppColors_1.AppColors.greenColor},{key:"closed",label:"Closed",count:s.closed,color:AppColors_1.AppColors.slate500},{key:"connecting",label:"Connecting",count:s.connecting,color:AppColors_1.AppColors.amber600},{key:"error",label:"Error",count:s.error,color:AppColors_1.AppColors.errorColor}].map(e=>{const t=c.status.has(e.key);return<react_native_1.TouchableOpacity key={e.key}onPress={()=>h(e.key)}style={[styles.chip,t&&{backgroundColor:`${e.color}18`,borderColor:e.color}]}>
+                    <react_native_1.Text style={[styles.chipText,t&&{color:e.color,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                      {e.label}
+                    </react_native_1.Text>
+                    <react_native_1.View style={[styles.countPill,t&&{backgroundColor:`${e.color}30`}]}>
+                      <react_native_1.Text style={[styles.countText,t&&{color:e.color}]}>
+                        {e.count}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.TouchableOpacity>})}
+            </react_native_1.View>
+
+            
+            <react_native_1.Text style={styles.sectionTitle}>PROTOCOL & CLIENT</react_native_1.Text>
+            <react_native_1.View style={styles.chipRow}>
+              {[{key:"all",label:"All Protocols",count:s.all,color:AppColors_1.AppColors.brandPurple},{key:"wss",label:"Secure (WSS)",count:s.wss,color:AppColors_1.AppColors.emerald600},{key:"ws",label:"Standard (WS)",count:s.ws,color:AppColors_1.AppColors.blue600},{key:"sio",label:"Socket.IO",count:s.sio,color:AppColors_1.AppColors.violet600}].map(e=>{const t=c.types.has(e.key);return<react_native_1.TouchableOpacity key={e.key}onPress={()=>T(e.key)}style={[styles.chip,t&&{backgroundColor:`${e.color}18`,borderColor:e.color}]}>
+                    <react_native_1.Text style={[styles.chipText,t&&{color:e.color,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                      {e.label}
+                    </react_native_1.Text>
+                    <react_native_1.View style={[styles.countPill,t&&{backgroundColor:`${e.color}30`}]}>
+                      <react_native_1.Text style={[styles.countText,t&&{color:e.color}]}>
+                        {e.count}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.TouchableOpacity>})}
+            </react_native_1.View>
+
+            
+            <react_native_1.Text style={styles.sectionTitle}>SORT BY</react_native_1.Text>
+            <react_native_1.View style={styles.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 t=c.sortBy===e.key;return<react_native_1.TouchableOpacity key={e.key}onPress={()=>p(i=>({...i,sortBy:e.key}))}style={[styles.chip,t&&styles.chipActiveSort]}>
+                    <react_native_1.Text style={[styles.chipText,t&&styles.chipTextActiveSort]}>
+                      {e.label}
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>})}
+            </react_native_1.View>
+          </react_native_1.ScrollView>
+
+          
+          <react_native_1.View style={styles.footer}>
+            <react_native_1.TouchableOpacity onPress={g}style={styles.resetBtn}>
+              <react_native_1.Text style={styles.resetBtnText}>Reset</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <TouchableScale_1.default onPress={w}style={styles.applyBtn}>
+              <react_native_1.Text style={styles.applyBtnText}>Apply Filters</react_native_1.Text>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>};exports.SocketFilterModal=SocketFilterModal,exports.default=exports.SocketFilterModal;const styles=react_native_1.StyleSheet.create({backdrop:{flex:1,backgroundColor:"rgba(0,0,0,0.5)",justifyContent:"center",alignItems:"center",padding:16},backdropPress:{...react_native_1.StyleSheet.absoluteFillObject},container:{width:"100%",maxHeight:"80%",backgroundColor:AppColors_1.AppColors.contentBg,borderRadius:16,overflow:"hidden",shadowColor:AppColors_1.AppColors.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:AppColors_1.AppColors.dividerColor},headerLeft:{flexDirection:"row",alignItems:"center",gap:8},headerTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:16,color:AppColors_1.AppColors.grayTextStrong},closeBtn:{padding:4},content:{padding:16},sectionTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.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:AppColors_1.AppColors.dividerColor,backgroundColor:AppColors_1.AppColors.graySurface,gap:6},chipActiveSort:{backgroundColor:`${AppColors_1.AppColors.brandPurple}18`,borderColor:AppColors_1.AppColors.brandPurple},chipText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:12,color:AppColors_1.AppColors.grayTextStrong},chipTextActiveSort:{color:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.interBold},countPill:{backgroundColor:`${AppColors_1.AppColors.slate500}18`,paddingHorizontal:5,paddingVertical:1,borderRadius:10},countText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},footer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:12,borderTopWidth:1,borderTopColor:AppColors_1.AppColors.dividerColor,gap:12},resetBtn:{paddingVertical:10,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},resetBtnText:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:13,color:AppColors_1.AppColors.grayTextWeak},applyBtn:{flex:1,backgroundColor:AppColors_1.AppColors.brandPurple,paddingVertical:11,borderRadius:8,alignItems:"center",justifyContent:"center"},applyBtnText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.white}});

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

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