react-native-inapp-inspector 2.4.2 → 2.5.1

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

@@ -113,4 +113,4 @@ ${i}`,[{text:d("common.cancel","Cancel"),style:"cancel"},{text:d("common.open","
           </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);
+    </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:{paddingHorizontal:8,paddingVertical:8},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:5},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:4.5,flex:1,minWidth:0},smallCheckbox:{width:15,height:15,borderRadius:3.5,borderWidth:1.2,borderColor: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.js

@@ -1,6 +1,6 @@
-"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?"}
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(a,o,l,i){i===void 0&&(i=l);var e=Object.getOwnPropertyDescriptor(o,l);(!e||("get"in e?!o.__esModule:e.writable||e.configurable))&&(e={enumerable:!0,get:function(){return o[l]}}),Object.defineProperty(a,i,e)}):(function(a,o,l,i){i===void 0&&(i=l),a[i]=o[l]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(a,o){Object.defineProperty(a,"default",{enumerable:!0,value:o})}):function(a,o){a.default=o}),__importStar=this&&this.__importStar||(function(){var a=function(o){return a=Object.getOwnPropertyNames||function(l){var i=[];for(var e in l)Object.prototype.hasOwnProperty.call(l,e)&&(i[i.length]=e);return i},a(o)};return function(o){if(o&&o.__esModule)return o;var l={};if(o!=null)for(var i=a(o),e=0;e<i.length;e++)i[e]!=="default"&&__createBinding(l,o,i[e]);return __setModuleDefault(l,o),l}})(),__importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};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"),InspectorContext_1=require("./InspectorContext"),SourcePageCard_1=__importDefault(require("../SourcePageCard")),HeadersSection_1=__importDefault(require("../HeadersSection")),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"),SocketDetail=({item:a})=>{const{t:o}=(0,i18n_1.useTranslation)(),{selectedSocket:l,logRouteMapRef:i}=(0,InspectorContext_1.useInspector)(),e=a||l,[d,h]=(0,react_1.useState)("messages"),[c,g]=(0,react_1.useState)(""),[s,_]=(0,react_1.useState)("all"),[S,f]=(0,react_1.useState)(new Set);if(!e)return null;const m=e.url.startsWith("wss://")||e.url.startsWith("https://"),p=e.client==="socket.io"||e.url.includes("/socket.io"),y=(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]),x=()=>{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';
+${t}`,[{text:o("common.cancel")||"Cancel",style:"cancel"},{text:o("common.open")||"Open",onPress:()=>{react_native_1.Linking.canOpenURL(t).then(n=>{n&&react_native_1.Linking.openURL(t).catch(()=>{})})}}])},V=async()=>{await(0,shareFormatter_1.shareSocketReport)(e)},k=t=>{f(n=>{const r=new Set(n);return r.has(t)?r.delete(t):r.add(t),r})},F=()=>{const t=new Set((e.frames||[]).map(n=>n.id));f(t)},B=()=>{f(new Set)},w=(0,react_1.useMemo)(()=>{let t=e.frames||[];if(s!=="all"&&(t=t.filter(n=>n.direction===s)),c.trim()){const n=c.trim().toLowerCase();t=t.filter(r=>!!(r.eventName&&r.eventName.toLowerCase().includes(n)||r.type&&r.type.toLowerCase().includes(n)||typeof r.data=="string"&&r.data.toLowerCase().includes(n)||r.data&&typeof r.data=="object"&&JSON.stringify(r.data).toLowerCase().includes(n)))}return t},[e.frames,s,c]),z=(e.totalBytesSent||0)+(e.totalBytesReceived||0),T=(0,react_1.useMemo)(()=>p?`import { io } from 'socket.io-client';
 
 const socket = io('${e.url}', {
   transports: ['websocket'],
@@ -31,7 +31,7 @@ ws.onerror = (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}}>
+};`,[e.url,e.protocols,e.query,p]),v=`wscat -c "${e.url}"`,A=e.url.indexOf("://"),u=A!==-1?e.url.substring(0,A+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}>
@@ -39,23 +39,23 @@ ws.onclose = (event) => {
           <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.View style={[styles_1.default.methodBadge,{backgroundColor:p?AppColors_1.AppColors.violet600:m?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"}
+                  {p?"SIO":m?"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}]}>
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:p?`${AppColors_1.AppColors.violet600}14`:`${AppColors_1.AppColors.sky500}14`,borderColor:p?`${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:p?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}]}>
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${y}18`,borderColor:`${y}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:y}}/>}
+                <react_native_1.Text style={[styles_1.default.chipText,{color:y,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
                   {(e.status||"open").toUpperCase()}
                 </react_native_1.Text>
               </react_native_1.View>
@@ -80,7 +80,7 @@ ws.onclose = (event) => {
               <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)}
+                  {(0,helpers_1.formatByteSize)(z)}
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
@@ -91,9 +91,9 @@ ws.onclose = (event) => {
             
             <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()}
+                {u?<react_native_1.View style={{backgroundColor:u.startsWith("wss")||u.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:u.startsWith("wss")||u.startsWith("https")?AppColors_1.AppColors.green600:AppColors_1.AppColors.amber500}}>
+                      {u.replace("://","").toUpperCase()}
                     </react_native_1.Text>
                   </react_native_1.View>:null}
 
@@ -104,18 +104,18 @@ ws.onclose = (event) => {
 
               
               <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={v}label="wscat"iconType="terminal"/>
+                <ShareButton_1.default onShare={V}/>
+                <CopyButton_1.default value={T}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">
+                <TouchableScale_1.default style={[styles_1.default.iconSquareBtn,{backgroundColor:`${AppColors_1.AppColors.sky600}15`,borderColor:`${AppColors_1.AppColors.sky600}35`}]}onPress={x}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.Pressable onPress={x}>
               <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>
@@ -125,16 +125,16 @@ ws.onclose = (event) => {
       </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}}/>
+      <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}/>},...e.headers&&Object.keys(e.headers).length>0?[{key:"headers",label:`${o("network.detailTabs.headers","Headers")} (${Object.keys(e.headers).length})`,themeColor:AppColors_1.AppColors.purple,icon:t=><NetworkIcons_1.HeadersIcon 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={d}onChange={t=>{(0,InspectorContext_1.animateNextLayout)(),h(t)}}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
 
       
-      {a==="messages"&&<react_native_1.View style={{flex:1}}>
+      {d==="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("")}>
+              <react_native_1.TextInput style={socketDetailStyles.frameSearchInput}placeholder={o("socket.searchFramesPlaceholder","Search frame payloads or event names...")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={c}onChangeText={g}clearButtonMode="while-editing"/>
+              {c.length>0&&<react_native_1.Pressable onPress={()=>g("")}>
                   <NetworkIcons_1.ClearIcon size={12}color={AppColors_1.AppColors.grayTextWeak}/>
                 </react_native_1.Pressable>}
             </react_native_1.View>
@@ -142,20 +142,20 @@ ws.onclose = (event) => {
             
             <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.TouchableOpacity onPress={()=>_("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}]}>
+                <react_native_1.TouchableOpacity onPress={()=>_("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}]}>
+                <react_native_1.TouchableOpacity onPress={()=>_("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")}
@@ -164,11 +164,11 @@ ws.onclose = (event) => {
               </react_native_1.View>
 
               <react_native_1.View style={socketDetailStyles.expandGroup}>
-                <react_native_1.TouchableOpacity onPress={h}style={socketDetailStyles.textBtn}>
+                <react_native_1.TouchableOpacity onPress={F}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.TouchableOpacity onPress={B}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>
@@ -177,18 +177,18 @@ ws.onclose = (event) => {
 
           
           <react_native_1.ScrollView style={socketDetailStyles.framesScrollView}contentContainerStyle={{padding:12}}>
-            {x.length===0?<react_native_1.View style={socketDetailStyles.emptyFrames}>
+            {w.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.View>:w.map((t,n)=>{const r=t.direction==="send",b=S.has(t.id),C=r?AppColors_1.AppColors.blue600:AppColors_1.AppColors.emerald600,R=r?`${AppColors_1.AppColors.blue600}12`:`${AppColors_1.AppColors.emerald600}12`,P=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.Pressable onPress={()=>k(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.View style={[socketDetailStyles.dirBadge,{backgroundColor:R}]}>
+                          {r?<NetworkIcons_1.SendFrameIcon size={10}color={C}/>:<NetworkIcons_1.ReceiveFrameIcon size={10}color={C}/>}
+                          <react_native_1.Text style={[socketDetailStyles.dirBadgeText,{color:C}]}>
+                            {r?"SENT":"RECV"}
                           </react_native_1.Text>
                         </react_native_1.View>
 
@@ -198,27 +198,27 @@ ws.onclose = (event) => {
                             </react_native_1.Text>
                           </react_native_1.View>}
 
-                        <react_native_1.Text style={socketDetailStyles.frameIndexText}>#{i+1}</react_native_1.Text>
+                        <react_native_1.Text style={socketDetailStyles.frameIndexText}>#{n+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
+                          +{P}ms
                         </react_native_1.Text>
                         <react_native_1.View style={socketDetailStyles.frameSizePill}>
                           <react_native_1.Text style={socketDetailStyles.frameSizeText}>
-                            {formatByteSize(t.size||0)}
+                            {(0,helpers_1.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}/>
+                        <NetworkIcons_1.ChevronIcon direction={b?"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}/>
+                      {typeof t.data=="object"&&t.data!==null?<JsonViewer_1.default data={t.data}search={c}forceOpen={b}/>:<react_native_1.Text style={socketDetailStyles.frameRawText}>
+                          <HighlightText_1.default text={String(t.data)}search={c}/>
                         </react_native_1.Text>}
                     </react_native_1.View>
                   </react_native_1.View>})}
@@ -226,91 +226,101 @@ ws.onclose = (event) => {
         </react_native_1.View>}
 
       
-      {a==="overview"&&<react_native_1.ScrollView style={socketDetailStyles.tabContentScroll}contentContainerStyle={{padding:12}}>
+      {d==="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.Text style={socketDetailStyles.sectionHeading}>{o("socket.connectionDetails","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.infoKey}>{o("socket.url","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.infoKey}>{o("socket.clientEngine","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.infoKey}>{o("socket.readyState","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.infoKey}>{o("socket.connectedAt","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.infoKey}>{o("socket.closedAt","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.infoKey}>{o("socket.closeCodeReason","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.infoKey}>{o("socket.subprotocols","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.infoKey}>{o("socket.callerStack","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.infoKey}>{o("socket.error","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>
+
+          
+          {(()=>{const t=e.routeInfo||i?.current&&i.current.get(e.id);return!t||!t.path||t.path==="Navigators"?null:<react_native_1.View style={{marginTop:12}}>
+                <SourcePageCard_1.default routeInfo={t}/>
+              </react_native_1.View>})()}
         </react_native_1.ScrollView>}
 
       
-      {a==="params"&&<react_native_1.ScrollView style={socketDetailStyles.tabContentScroll}contentContainerStyle={{padding:12}}>
+      {d==="headers"&&e.headers&&<react_native_1.ScrollView style={socketDetailStyles.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <HeadersSection_1.default title={o("socket.handshakeHeaders","Handshake Headers")}headers={e.headers}search=""resetKey={e.id}/>
+        </react_native_1.ScrollView>}
+
+      
+      {d==="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.sectionHeading}>{o("socket.handshakeParams","HANDSHAKE QUERY PARAMETERS")}</react_native_1.Text>
+            {!e.query||Object.keys(e.query).length===0?<react_native_1.Text style={socketDetailStyles.emptySectionText}>{o("socket.noQueryParams","No query parameters passed in connection URL")}</react_native_1.Text>:Object.entries(e.query).map(([t,n])=><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.Text style={socketDetailStyles.paramVal}selectable>{n}</react_native_1.Text>
+                  <CopyButton_1.default value={n}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}}>
+      {d==="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.Text style={socketDetailStyles.sectionHeading}>{o("socket.jsClientCode","JAVASCRIPT CLIENT CODE")}</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}>TERMINAL WSCAT COMMAND</react_native_1.Text>
-            <CodeSnippet_1.default code={T}language="javascript"/>
+            <react_native_1.Text style={socketDetailStyles.sectionHeading}>{o("socket.terminalWscat","TERMINAL WSCAT COMMAND")}</react_native_1.Text>
+            <CodeSnippet_1.default code={v}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>
+            <react_native_1.Text style={socketDetailStyles.sectionHeading}>{o("socket.rawDump","RAW CONNECTION JSON DUMP")}</react_native_1.Text>
             <JsonViewer_1.default data={e}/>
           </react_native_1.View>
         </react_native_1.ScrollView>}

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

@@ -1,5 +1,5 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,r,i,l){l===void 0&&(l=i);var a=Object.getOwnPropertyDescriptor(r,i);(!a||("get"in a?!r.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return r[i]}}),Object.defineProperty(t,l,a)}):(function(t,r,i,l){l===void 0&&(l=i),t[l]=r[i]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,r){Object.defineProperty(t,"default",{enumerable:!0,value:r})}):function(t,r){t.default=r}),__importStar=this&&this.__importStar||(function(){var t=function(r){return t=Object.getOwnPropertyNames||function(i){var l=[];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(l[l.length]=a);return l},t(r)};return function(r){if(r&&r.__esModule)return r;var i={};if(r!=null)for(var l=t(r),a=0;a<l.length;a++)l[a]!=="default"&&__createBinding(i,r,l[a]);return __setModuleDefault(i,r),i}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),SocketCard_1=__importDefault(require("./SocketCard")),SocketFilterModal_1=__importStar(require("./SocketFilterModal")),ConfirmationModal_1=require("./ConfirmationModal"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),NetworkIcons_1=require("../NetworkIcons"),LOAD_MORE_STEP=10,SocketTab=react_1.default.memo(()=>{const{t}=(0,i18n_1.useTranslation)(),{socketRecords:r,filteredSocketRecords:i,socketSearch:l,setSocketSearch:a,socketQuickFilter:p,setSocketQuickFilter:_,setSelectedSocket:T,clearAllSocketLogs:w,deleteMultipleSocketRecords:k,simulateSocket:A,maxSocketLogs:m}=(0,InspectorContext_1.useInspector)(),L=m||50,x=(0,react_1.useRef)(null),[v,E]=(0,react_1.useState)(0),[b,B]=(0,react_1.useState)(L),[q,I]=(0,react_1.useState)(!1),[d,$]=(0,react_1.useState)(SocketFilterModal_1.DEFAULT_SOCKET_FILTERS),[c,C]=(0,react_1.useState)(new Set),[F,V]=(0,react_1.useState)(!1),[f,h]=(0,react_1.useState)({visible:!1,title:"",message:"",onConfirm:()=>{}});react_1.default.useEffect(()=>{B(m||50),x.current?.scrollToOffset({offset:0,animated:!1})},[l,p,m]);const z=["chat","crypto","socketio","echo"],O=(0,react_1.useCallback)(()=>{const e=z[v%z.length];A(e),E(o=>o+1),(0,toast_1.showToast)(`Simulated ${e.toUpperCase()} WebSocket`)},[v,A]),u=(0,react_1.useMemo)(()=>{let e=0,o=0,s=0,D=0,M=0,P=0;return r.forEach(S=>{const y=(S.status||"open").toLowerCase();y==="open"?e++:y==="closed"?o++:y==="error"&&s++,S.client==="socket.io"||S.url.includes("/socket.io")?P++:S.url.startsWith("wss://")?D++:M++}),{all:r.length,open:e,closed:o,error:s,wss:D,ws:M,sio:P}},[r]),n=(0,react_1.useMemo)(()=>{let e=i;return(0,SocketFilterModal_1.isSocketFiltersDefault)(d)||(d.status.has("all")||(e=e.filter(o=>d.status.has(o.status||"open"))),d.types.has("all")||(e=e.filter(o=>!!(d.types.has("sio")&&(o.client==="socket.io"||o.url.includes("/socket.io"))||d.types.has("wss")&&o.url.startsWith("wss://")||d.types.has("ws")&&o.url.startsWith("ws://")))),d.sortBy==="time_asc"?e=[...e].sort((o,s)=>o.startTime-s.startTime):d.sortBy==="frames_desc"?e=[...e].sort((o,s)=>(s.frames?.length||0)-(o.frames?.length||0)):d.sortBy==="duration_desc"&&(e=[...e].sort((o,s)=>(s.duration||0)-(o.duration||0)))),e},[i,d]),g=(0,react_1.useMemo)(()=>n.slice(0,b),[n,b]),R=(0,react_1.useCallback)(e=>{C(o=>{const s=new Set(o);return s.has(e)?s.delete(e):s.add(e),s})},[]),j=(0,react_1.useCallback)(()=>{c.size===n.length?C(new Set):C(new Set(n.map(e=>e.id)))},[c.size,n]),H=(0,react_1.useCallback)(()=>{const e=n.filter(s=>c.has(s.id));if(e.length===0)return;const o=e.map(s=>s.url).join(`
-`);(0,helpers_1.copyToClipboard)(o,`${e.length} WebSocket URLs`),(0,toast_1.showToast)(`${e.length} URLs copied to clipboard`)},[n,c]),N=(0,react_1.useCallback)(async()=>{const e=n.filter(o=>c.has(o.id));if(e.length!==0)try{const o=JSON.stringify(e.map(s=>({url:s.url,status:s.status,startTime:new Date(s.startTime).toISOString(),duration:s.duration,framesCount:s.frames?.length||0,totalBytesSent:s.totalBytesSent,totalBytesReceived:s.totalBytesReceived})),null,2);await react_native_1.Share.share({message:o,title:`WebSocket Traffic (${e.length} connections)`})}catch{}},[n,c]),U=(0,react_1.useCallback)(()=>{c.size!==0&&h({visible:!0,title:t("socket.deleteSelectedTitle","Delete Selected WebSockets"),message:t("socket.deleteSelectedMsg",{count:c.size,defaultValue:`Are you sure you want to delete ${c.size} selected WebSocket logs?`}),confirmText:t("common.delete","Delete"),cancelText:t("common.cancel","Cancel"),onConfirm:()=>{h(o=>({...o,visible:!1}));const e=Array.from(c);k?.(e),C(new Set),(0,toast_1.showToast)(`Deleted ${e.length} WebSocket logs`)}})},[c,k,t]),K=(0,react_1.useCallback)(()=>{h({visible:!0,title:t("socket.clearTitle","Clear All WebSocket Logs"),message:t("socket.clearMessage","Are you sure you want to delete all recorded WebSocket sessions?"),confirmText:t("common.clear","Clear All"),cancelText:t("common.cancel","Cancel"),onConfirm:()=>{h(e=>({...e,visible:!1})),w(),C(new Set),(0,toast_1.showToast)(t("socket.cleared","All WebSocket logs cleared"))}})},[w,t]),Q=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:u.all,color:AppColors_1.AppColors.purple,icon:e=><NetworkIcons_1.WebsocketIcon size={12}color={e}/>},{id:"open",label:"Open",count:u.open,color:AppColors_1.AppColors.greenColor,icon:e=><react_native_1.View style={{width:6,height:6,borderRadius:3,backgroundColor:e}}/>},{id:"closed",label:"Closed",count:u.closed,color:AppColors_1.AppColors.slate500,icon:e=><NetworkIcons_1.ClockIcon size={11}color={e}/>},{id:"error",label:"Error",count:u.error,color:AppColors_1.AppColors.errorColor,icon:e=><NetworkIcons_1.FailIcon size={9}color={e}/>},{id:"sio",label:"Socket.IO",count:u.sio,color:AppColors_1.AppColors.violet600,icon:e=><NetworkIcons_1.BoltIcon size={11}color={e}/>},{id:"wss",label:"WSS",count:u.wss,color:AppColors_1.AppColors.emerald600,icon:e=><NetworkIcons_1.LockIcon size={11}color={e}/>},{id:"ws",label:"WS",count:u.ws,color:AppColors_1.AppColors.blue600,icon:e=><NetworkIcons_1.GlobeIcon size={11}color={e}/>}],[u]),G=(0,react_1.useCallback)(()=>{b<n.length&&B(e=>Math.min(e+LOAD_MORE_STEP,n.length))},[b,n.length]),W=(0,react_1.useCallback)(e=>{T(e)},[T]),J=(0,react_1.useCallback)(e=>e?.id?String(e.id):"",[]),X=(0,react_1.useCallback)(({item:e,index:o})=><AnimatedEntrance_1.default index={o}distance={8}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,r,i,l){l===void 0&&(l=i);var a=Object.getOwnPropertyDescriptor(r,i);(!a||("get"in a?!r.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return r[i]}}),Object.defineProperty(t,l,a)}):(function(t,r,i,l){l===void 0&&(l=i),t[l]=r[i]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,r){Object.defineProperty(t,"default",{enumerable:!0,value:r})}):function(t,r){t.default=r}),__importStar=this&&this.__importStar||(function(){var t=function(r){return t=Object.getOwnPropertyNames||function(i){var l=[];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(l[l.length]=a);return l},t(r)};return function(r){if(r&&r.__esModule)return r;var i={};if(r!=null)for(var l=t(r),a=0;a<l.length;a++)l[a]!=="default"&&__createBinding(i,r,l[a]);return __setModuleDefault(i,r),i}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),SocketCard_1=__importDefault(require("./SocketCard")),SocketFilterModal_1=__importStar(require("./SocketFilterModal")),ConfirmationModal_1=require("./ConfirmationModal"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),NetworkIcons_1=require("../NetworkIcons"),LOAD_MORE_STEP=10,SocketTab=react_1.default.memo(()=>{const{t}=(0,i18n_1.useTranslation)(),{socketRecords:r,filteredSocketRecords:i,socketSearch:l,setSocketSearch:a,socketQuickFilter:p,setSocketQuickFilter:_,setSelectedSocket:T,clearAllSocketLogs:w,deleteMultipleSocketRecords:k,simulateSocket:A,maxSocketLogs:m}=(0,InspectorContext_1.useInspector)(),L=m||50,x=(0,react_1.useRef)(null),[v,E]=(0,react_1.useState)(0),[g,B]=(0,react_1.useState)(L),[q,I]=(0,react_1.useState)(!1),[d,$]=(0,react_1.useState)(SocketFilterModal_1.DEFAULT_SOCKET_FILTERS),[c,C]=(0,react_1.useState)(new Set),[F,V]=(0,react_1.useState)(!1),[f,h]=(0,react_1.useState)({visible:!1,title:"",message:"",onConfirm:()=>{}});react_1.default.useEffect(()=>{B(m||50),x.current?.scrollToOffset({offset:0,animated:!1})},[l,p,m]);const z=["chat","crypto","socketio","echo"],O=(0,react_1.useCallback)(()=>{const e=z[v%z.length];A(e),E(o=>o+1),(0,toast_1.showToast)(`Simulated ${e.toUpperCase()} WebSocket`)},[v,A]),u=(0,react_1.useMemo)(()=>{let e=0,o=0,s=0,D=0,M=0,P=0;return r.forEach(S=>{const y=(S.status||"open").toLowerCase();y==="open"?e++:y==="closed"?o++:y==="error"&&s++,S.client==="socket.io"||S.url.includes("/socket.io")?P++:S.url.startsWith("wss://")?D++:M++}),{all:r.length,open:e,closed:o,error:s,wss:D,ws:M,sio:P}},[r]),n=(0,react_1.useMemo)(()=>{let e=i;return(0,SocketFilterModal_1.isSocketFiltersDefault)(d)||(d.status.has("all")||(e=e.filter(o=>d.status.has(o.status||"open"))),d.types.has("all")||(e=e.filter(o=>!!(d.types.has("sio")&&(o.client==="socket.io"||o.url.includes("/socket.io"))||d.types.has("wss")&&o.url.startsWith("wss://")||d.types.has("ws")&&o.url.startsWith("ws://")))),d.sortBy==="time_asc"?e=[...e].sort((o,s)=>o.startTime-s.startTime):d.sortBy==="frames_desc"?e=[...e].sort((o,s)=>(s.frames?.length||0)-(o.frames?.length||0)):d.sortBy==="duration_desc"&&(e=[...e].sort((o,s)=>(s.duration||0)-(o.duration||0)))),e},[i,d]),b=(0,react_1.useMemo)(()=>n.slice(0,g),[n,g]),R=(0,react_1.useCallback)(e=>{C(o=>{const s=new Set(o);return s.has(e)?s.delete(e):s.add(e),s})},[]),j=(0,react_1.useCallback)(()=>{c.size===n.length?C(new Set):C(new Set(n.map(e=>e.id)))},[c.size,n]),H=(0,react_1.useCallback)(()=>{const e=n.filter(s=>c.has(s.id));if(e.length===0)return;const o=e.map(s=>s.url).join(`
+`);(0,helpers_1.copyToClipboard)(o,`${e.length} WebSocket URLs`),(0,toast_1.showToast)(`${e.length} URLs copied to clipboard`)},[n,c]),N=(0,react_1.useCallback)(async()=>{const e=n.filter(o=>c.has(o.id));if(e.length!==0)try{const o=JSON.stringify(e.map(s=>({url:s.url,status:s.status,startTime:new Date(s.startTime).toISOString(),duration:s.duration,framesCount:s.frames?.length||0,totalBytesSent:s.totalBytesSent,totalBytesReceived:s.totalBytesReceived})),null,2);await react_native_1.Share.share({message:o,title:`WebSocket Traffic (${e.length} connections)`})}catch{}},[n,c]),U=(0,react_1.useCallback)(()=>{c.size!==0&&h({visible:!0,title:t("socket.deleteSelectedTitle","Delete Selected WebSockets"),message:t("socket.deleteSelectedMsg",{count:c.size,defaultValue:`Are you sure you want to delete ${c.size} selected WebSocket logs?`}),confirmText:t("common.delete","Delete"),cancelText:t("common.cancel","Cancel"),onConfirm:()=>{h(o=>({...o,visible:!1}));const e=Array.from(c);k?.(e),C(new Set),(0,toast_1.showToast)(`Deleted ${e.length} WebSocket logs`)}})},[c,k,t]),K=(0,react_1.useCallback)(()=>{h({visible:!0,title:t("socket.clearTitle","Clear All WebSocket Logs"),message:t("socket.clearMessage","Are you sure you want to delete all recorded WebSocket sessions?"),confirmText:t("common.clear","Clear All"),cancelText:t("common.cancel","Cancel"),onConfirm:()=>{h(e=>({...e,visible:!1})),w(),C(new Set),(0,toast_1.showToast)(t("socket.cleared","All WebSocket logs cleared"))}})},[w,t]),Q=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:u.all,color:AppColors_1.AppColors.purple,icon:e=><NetworkIcons_1.WebsocketIcon size={12}color={e}/>},{id:"open",label:"Open",count:u.open,color:AppColors_1.AppColors.greenColor,icon:e=><react_native_1.View style={{width:6,height:6,borderRadius:3,backgroundColor:e}}/>},{id:"closed",label:"Closed",count:u.closed,color:AppColors_1.AppColors.slate500,icon:e=><NetworkIcons_1.ClockIcon size={11}color={e}/>},{id:"error",label:"Error",count:u.error,color:AppColors_1.AppColors.errorColor,icon:e=><NetworkIcons_1.FailIcon size={9}color={e}/>},{id:"sio",label:"Socket.IO",count:u.sio,color:AppColors_1.AppColors.violet600,icon:e=><NetworkIcons_1.BoltIcon size={11}color={e}/>},{id:"wss",label:"WSS",count:u.wss,color:AppColors_1.AppColors.emerald600,icon:e=><NetworkIcons_1.LockIcon size={11}color={e}/>},{id:"ws",label:"WS",count:u.ws,color:AppColors_1.AppColors.blue600,icon:e=><NetworkIcons_1.GlobeIcon size={11}color={e}/>}],[u]),G=(0,react_1.useCallback)(()=>{g<n.length&&B(e=>Math.min(e+LOAD_MORE_STEP,n.length))},[g,n.length]),W=(0,react_1.useCallback)(e=>{T(e)},[T]),J=(0,react_1.useCallback)(e=>e?.id?String(e.id):"",[]),X=(0,react_1.useCallback)(({item:e,index:o})=><AnimatedEntrance_1.default index={o}distance={8}>
         <SocketCard_1.default item={e}onPress={()=>W(e)}searchStr={l}isSelected={c.has(e.id)}onToggleSelect={R}serialNumber={o+1}/>
       </AnimatedEntrance_1.default>,[l,c,R,W]);return<react_native_1.View style={{flex:1,backgroundColor:AppColors_1.AppColors.primaryLight}}>
       
@@ -95,7 +95,7 @@
         </react_native_1.View>}
 
       
-      <react_native_1.FlatList ref={x}data={g}keyExtractor={J}renderItem={X}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}contentContainerStyle={[socketTabStyles.listContent,g.length===0&&{flex:1}]}showsVerticalScrollIndicator={!1}ListEmptyComponent={<react_native_1.View style={socketTabStyles.emptyWrapper}>
+      <react_native_1.FlatList ref={x}data={b}keyExtractor={J}renderItem={X}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}style={{flex:1}}contentContainerStyle={[socketTabStyles.listContent,{flexGrow:1}]}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}keyboardShouldPersistTaps="handled"ListEmptyComponent={<react_native_1.View style={socketTabStyles.emptyWrapper}>
             <EmptyState_1.default isSearch={!!(l||p!=="all")}searchQuery={l}customTitle={l||p!=="all"?t("socket.noMatching","No matching WebSockets"):t("socket.noSockets","No WebSockets recorded yet")}customSub={l||p!=="all"?t("socket.adjustSearchFilter","Try adjusting your search query or filter chips."):t("socket.noSocketsDesc","WebSocket connections and Socket.IO messages will appear here in real-time.")}onClearSearch={()=>{a(""),_("all")}}showReload={!1}/>
             {!l&&p==="all"&&<TouchableScale_1.default onPress={O}style={socketTabStyles.simulateEmptyBtn}>
                 <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.white}size={14}/>
@@ -103,7 +103,7 @@
                   {t("socket.simulateTraffic","Simulate Demo WebSocket Traffic")}
                 </react_native_1.Text>
               </TouchableScale_1.default>}
-          </react_native_1.View>}ListFooterComponent={g.length>0?<EndOfListFooter_1.default totalCount={n.length}count={g.length}hasMore={g.length<n.length}onLoadMore={G}/>:null}/>
+          </react_native_1.View>}ListFooterComponent={b.length>0?<EndOfListFooter_1.default totalCount={n.length}count={b.length}hasMore={b.length<n.length}onLoadMore={G}/>:null}/>
 
       
       <SocketFilterModal_1.default visible={q}onClose={()=>I(!1)}filters={d}onApply={$}records={r}/>