react-native-inapp-inspector 2.3.5 → 2.3.6

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

@@ -170,10 +170,10 @@ const LogDetail = React.memo(() => {
         },
     ];
     return (<View style={{ flex: 1 }}>
-      {/* Enhanced details header bar */}
+      
       <View style={styles.detailInfoBar}>
         <View style={{ flexDirection: 'column', gap: 10 }}>
-          {/* Top Row: Type badge, method, content pill & Copy button */}
+          
           <View style={{
             flexDirection: 'row',
             alignItems: 'center',
@@ -187,7 +187,7 @@ const LogDetail = React.memo(() => {
             flex: 1,
             flexWrap: 'wrap',
         }}>
-              {/* Type Badge */}
+              
               <View style={[
             styles.typeChip,
             {
@@ -210,7 +210,7 @@ const LogDetail = React.memo(() => {
                 </Text>
               </View>
 
-              {/* Method chip */}
+              
               <View style={[
             styles.metaChip,
             {
@@ -227,7 +227,7 @@ const LogDetail = React.memo(() => {
                 </Text>
               </View>
 
-              {/* JSON content type chip */}
+              
               {jsonContent && (<View style={[
                 styles.metaChip,
                 {
@@ -245,7 +245,7 @@ const LogDetail = React.memo(() => {
                   </Text>
                 </View>)}
 
-              {/* Duplicate count chip */}
+              
               {selectedLog.duplicateCount != null &&
             selectedLog.duplicateCount > 1 && (<View style={[
                 styles.metaChip,
@@ -265,11 +265,11 @@ const LogDetail = React.memo(() => {
                   </View>)}
             </View>
 
-            {/* Quick Copy button */}
+            
             <CopyButton value={selectedLog.message} label={t('console.logMessage')}/>
           </View>
 
-          {/* Caller & Trace origin info */}
+          
           <View style={{ gap: 4 }}>
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
               {originFrame?.fileExt && originFrame.fileExt !== 'other' && (<View style={{
@@ -328,7 +328,7 @@ const LogDetail = React.memo(() => {
                 </Pressable>)}
             </View>
 
-            {/* Enhanced metadata metrics row */}
+            
             <View style={{
             flexDirection: 'row',
             alignItems: 'center',
@@ -363,12 +363,12 @@ const LogDetail = React.memo(() => {
         </View>
       </View>
 
-      {/* Sub-tabs header */}
+      
       <View style={detailStyles.tabsHeaderWrap}>
         <SegmentedTabs tabs={subTabs} activeKey={activeTab} onChange={key => setActiveTab(key)}/>
       </View>
 
-      {/* Search row (only for output/arguments/stack tabs) */}
+      
       {activeTab !== 'metadata' && (<View style={{ paddingHorizontal: 12, paddingTop: 6, paddingBottom: 4 }}>
           <View style={[styles.detailSearchRow, { marginBottom: 0 }]}>
             <View style={[
@@ -390,14 +390,14 @@ const LogDetail = React.memo(() => {
           </View>
         </View>)}
 
-      {/* Tab Content Container */}
+      
       <ScrollView style={{ flex: 1 }} contentContainerStyle={{
             paddingHorizontal: 12,
             paddingTop: 6,
             paddingBottom: 28,
             flexGrow: 1,
         }} showsVerticalScrollIndicator={true} keyboardShouldPersistTaps="handled">
-        {/* Tab 1: Output / Message */}
+        
         {activeTab === 'output' && (<View style={[
                 styles.sectionContainer,
                 {
@@ -411,7 +411,7 @@ const LogDetail = React.memo(() => {
                     flex: 1,
                 },
             ]}>
-            {/* Section Header with View Modes */}
+            
             <View style={{
                 flexDirection: 'column',
                 gap: 8,
@@ -467,7 +467,7 @@ const LogDetail = React.memo(() => {
                 ]} activeKey={viewMode} onChange={key => setViewMode(key)}/>)}
             </View>
 
-            {/* Content Body */}
+            
             <View style={{ padding: 12, flex: 1 }}>
               {jsonContent ? (<>
                   {jsonContent.header ? (<View style={{
@@ -514,7 +514,7 @@ const LogDetail = React.memo(() => {
             </View>
           </View>)}
 
-        {/* Tab 2: Individual Arguments */}
+        
         {activeTab === 'arguments' && selectedLog.rawArgs && (<View style={{ gap: 10 }}>
             {selectedLog.rawArgs.map((arg, idx) => {
                 const argType = arg === null
@@ -596,7 +596,7 @@ const LogDetail = React.memo(() => {
             })}
           </View>)}
 
-        {/* Tab 3: Call Stack Trace */}
+        
         {activeTab === 'stack' && (<View style={[
                 styles.sectionContainer,
                 {
@@ -609,7 +609,7 @@ const LogDetail = React.memo(() => {
                     overflow: 'hidden',
                 },
             ]}>
-            {/* Section Header with Mode Switch */}
+            
             <View style={{
                 flexDirection: 'column',
                 gap: 8,
@@ -621,7 +621,7 @@ const LogDetail = React.memo(() => {
                     ? AppColors.primaryLight
                     : AppColors.grayBackground,
             }}>
-              {/* Header Top Row: Title, Mode switcher & Full copy */}
+              
               <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -704,7 +704,7 @@ const LogDetail = React.memo(() => {
                 </View>
               </View>
 
-              {/* Source Switcher if Error Stack exists */}
+              
               {selectedLog.errorStack && (<SegmentedTabs tabs={[
                     {
                         key: 'caller',
@@ -716,7 +716,7 @@ const LogDetail = React.memo(() => {
                     },
                 ]} activeKey={stackSource} onChange={key => setStackSource(key)}/>)}
 
-              {/* Scope Filter Tabs (Full Width) */}
+              
               <SegmentedTabs tabs={[
                 {
                     key: 'app',
@@ -729,7 +729,7 @@ const LogDetail = React.memo(() => {
             ]} activeKey={stackFilter} onChange={key => setStackFilter(key)}/>
             </View>
 
-            {/* Stack Content: Structured Cards or Raw Full Trace */}
+            
             {stackViewMode === 'structured' ? (<View style={{ padding: 12, gap: 10 }}>
                 {displayedFrames.length > 0 ? (displayedFrames.map((frame, frameIdx) => {
                     const isTopFrame = frameIdx === 0;
@@ -759,7 +759,7 @@ const LogDetail = React.memo(() => {
                             padding: 11,
                             gap: 6,
                         }}>
-                        {/* Frame Top Row: Origin / Category, File, Line badge, Copy */}
+                        
                         <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -833,7 +833,7 @@ const LogDetail = React.memo(() => {
                           </View>
                         </View>
 
-                        {/* Middle Row: Function / Symbol Invocation */}
+                        
                         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                           <HighlightText text={frame.functionName !== '<anonymous>' ? `${frame.functionName}()` : '<anonymous>'} search={detailSearch} style={{
                             fontFamily: AppFonts.interBold,
@@ -845,7 +845,7 @@ const LogDetail = React.memo(() => {
                         }}/>
                         </View>
 
-                        {/* Bottom Row: Clean Relative Path & Execution Scope Tag */}
+                        
                         <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -899,9 +899,7 @@ const LogDetail = React.memo(() => {
                     }}>
                     {t('console.noStackAvailable')}
                   </Text>)}
-              </View>) : (
-            /* Raw Full Trace Monospace Block */
-            <View style={{
+              </View>) : (<View style={{
                     backgroundColor: AppColors.primaryLight,
                     padding: 12,
                 }}>
@@ -935,7 +933,7 @@ const LogDetail = React.memo(() => {
               </View>)}
           </View>)}
 
-        {/* Tab 4: Structured Metadata */}
+        
         {activeTab === 'metadata' && (<View style={[
                 styles.sectionContainer,
                 {

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

@@ -32,7 +32,6 @@ const MainScreen = () => {
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
-    // ─── 60 FPS Transition Animations ──────────────────────────────────────────
     const detailAnim = useRef(new Animated.Value(0)).current;
     useEffect(() => {
         if (isDetailActive) {
@@ -88,11 +87,11 @@ const MainScreen = () => {
               <InspectorHeader />
 
               <View style={{ flex: 1 }}>
-                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible) ─── */}
+                
                 {!isDetailActive && <TabBar />}
 
                 {isReady ? (<View style={{ flex: 1 }}>
-                    {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
+                    
                     <Animated.View style={[
                     {
                         flex: 1,
@@ -121,7 +120,7 @@ const MainScreen = () => {
                       {activeTab === 'storage' && <StorageTab />}
                     </Animated.View>
 
-                    {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}
+                    
                     {isDetailActive && (<Animated.View style={[
                         StyleSheet.absoluteFill,
                         {
@@ -145,7 +144,7 @@ const MainScreen = () => {
                       </Animated.View>)}
                   </View>) : (<MainScreenSkeleton />)}
 
-                {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
+                
                 {settingsPage !== null && (<Animated.View style={[
                     StyleSheet.absoluteFill,
                     {
@@ -165,10 +164,10 @@ const MainScreen = () => {
                   </Animated.View>)}
               </View>
 
-              {/* Bottom floating toast notification */}
+              
               <Toast />
 
-              {/* NPM Version Update Toast with timeout progress bar */}
+              
               <NpmUpdateToast />
             </View>
           </View>
@@ -196,7 +195,7 @@ const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
         return () => animation.stop();
     }, [shimmerAnim]);
     return (<View style={skeletonStyles.container}>
-      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      
       <View style={skeletonStyles.toolbarSkeleton}>
         <Animated.View style={[skeletonStyles.searchBarSkeleton, { opacity: shimmerAnim }]}/>
         <View style={skeletonStyles.actionButtonsRow}>
@@ -205,7 +204,7 @@ const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
         </View>
       </View>
 
-      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      
       <View style={skeletonStyles.chipStripSkeleton}>
         <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
         <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
@@ -213,7 +212,7 @@ const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
         <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
       </View>
 
-      {/* ─── List Cards Skeleton ─── */}
+      
       {[0, 1, 2, 3].map(i => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
           <View style={skeletonStyles.cardTopRow}>
             <View style={skeletonStyles.badgeGroup}>

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

@@ -43,7 +43,7 @@ const NetworkDetail = React.memo(() => {
     if (!selected)
         return null;
     return (<View style={{ flex: 1 }}>
-      {/* Non-scrollable details header */}
+      
       <View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
         <View style={styles.detailInfoBar}>
           {(() => {
@@ -52,7 +52,6 @@ const NetworkDetail = React.memo(() => {
             let pathStr = detailDisplayUrl;
             let queryStr = '';
             try {
-                // Simple parsing fallback for React Native environments
                 const qIndex = detailDisplayUrl.indexOf('?');
                 let cleanUrlForParsing = detailDisplayUrl;
                 if (qIndex !== -1) {
@@ -96,7 +95,7 @@ const NetworkDetail = React.memo(() => {
                     flexWrap: 'wrap',
                     flex: 1,
                 }}>
-                    {/* Method Chip */}
+                    
                     <View style={[
                     styles.methodBadge,
                     {
@@ -117,7 +116,7 @@ const NetworkDetail = React.memo(() => {
                       </Text>
                     </View>
 
-                    {/* Client Chip (AXIOS / FETCH / XHR) */}
+                    
                     {selected.client && (<View style={[
                         styles.chip,
                         {
@@ -158,7 +157,7 @@ const NetworkDetail = React.memo(() => {
                         </Text>
                       </View>)}
 
-                    {/* Status Pill */}
+                    
                     {selected.status != null && (<View style={[
                         styles.chip,
                         {
@@ -195,7 +194,7 @@ const NetworkDetail = React.memo(() => {
                         </Text>
                       </View>)}
 
-                    {/* Duration Pill */}
+                    
                     {selected.duration != null && (<View style={[
                         styles.chip,
                         {
@@ -220,7 +219,7 @@ const NetworkDetail = React.memo(() => {
                         </Text>
                       </View>)}
 
-                    {/* Size Pill */}
+                    
                     {selected.response != null && (<View style={[
                         styles.chip,
                         {
@@ -256,7 +255,7 @@ const NetworkDetail = React.memo(() => {
                   </View>
                 </View>
 
-                {/* Full Live URL Analysis Card */}
+                
                 <Pressable style={{
                     backgroundColor: AppColors.grayBackground,
                     borderRadius: 10,
@@ -339,7 +338,7 @@ const NetworkDetail = React.memo(() => {
                     </View>
                   </View>
 
-                  {/* Full Clickable Hyperlink */}
+                  
                   <Text selectable={true} style={{
                     fontFamily: AppFonts.interMedium,
                     fontSize: 12.5,
@@ -355,7 +354,7 @@ const NetworkDetail = React.memo(() => {
         </View>
       </View>
 
-      {/* Sticky Segment Control */}
+      
       <SegmentedTabs tabs={[
             {
                 key: 'metadata',
@@ -386,7 +385,7 @@ const NetworkDetail = React.memo(() => {
             setApiDetailActiveTab(tab);
         }} style={{ marginHorizontal: 6, marginBottom: 10, marginTop: 6 }}/>
 
-      {/* Scrollable Tab Content */}
+      
       <ScrollView style={styles.detailScroll} contentContainerStyle={{
             paddingHorizontal: 6,
             paddingBottom: 24,

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

@@ -333,7 +333,7 @@ const NetworkTab = React.memo(() => {
     ]);
     return (<View style={{ flex: 1 }}>
       <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListHeaderComponent={<View style={{ marginTop: 6 }}>
-            {/* Network Health & Telemetry Strip */}
+            
             {networkMetrics != null && networkMetrics.totalCount > 0 && (<View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -347,7 +347,7 @@ const NetworkTab = React.memo(() => {
                     borderWidth: 1,
                     borderColor: AppColors.dividerColor,
                 }}>
-                {/* Success Rate */}
+                
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4.5 }}>
                   <View style={{
                     width: 6,
@@ -369,7 +369,7 @@ const NetworkTab = React.memo(() => {
 
                 <View style={{ width: 1, height: 11, backgroundColor: AppColors.dividerColor }}/>
 
-                {/* Avg Latency */}
+                
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
                   <ClockIcon color={AppColors.purple} size={10}/>
                   <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.purple }}>
@@ -382,7 +382,7 @@ const NetworkTab = React.memo(() => {
 
                 <View style={{ width: 1, height: 11, backgroundColor: AppColors.dividerColor }}/>
 
-                {/* P95 Latency */}
+                
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
                   <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.primaryBlack }}>
                     {networkMetrics.p95}ms
@@ -393,7 +393,7 @@ const NetworkTab = React.memo(() => {
                 </View>
               </View>)}
 
-            {/* Toolbar Row with Search & Actions */}
+            
             <View style={styles.toolbarRow}>
               <View style={[
                 styles.searchContainer,
@@ -407,7 +407,7 @@ const NetworkTab = React.memo(() => {
                 : AppColors.grayTextWeak} size={15}/>
                 <TextInput placeholder="Search url, body, is:error, slow:>1s..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
 
-                {/* Match Case (Aa) & Regex (.*) Quick Toggles */}
+                
                 <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -532,7 +532,7 @@ const NetworkTab = React.memo(() => {
               </View>
             </View>
 
-            {/* Quick Search Scope & Filter Tags Row */}
+            
             <View style={{ paddingBottom: 4 }}>
               <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
                 paddingHorizontal: 12,
@@ -541,7 +541,7 @@ const NetworkTab = React.memo(() => {
                 gap: 5,
                 paddingVertical: 2,
             }}>
-                {/* Search Scopes */}
+                
                 {SEARCH_SCOPES.map(s => {
                 const isActive = searchScope === s.id;
                 return (<TouchableScale key={`scope_${s.id}`} onPress={() => setSearchScope(s.id)} hitSlop={6} style={{
@@ -577,7 +577,7 @@ const NetworkTab = React.memo(() => {
                 marginHorizontal: 3,
             }}/>
 
-                {/* Quick Query Suggestions */}
+                
                 {QUICK_API_QUERY_TAGS.map(q => {
                 const isActive = search.includes(q.query);
                 return (<TouchableScale key={`quick_${q.query}`} onPress={() => {
@@ -620,7 +620,7 @@ const NetworkTab = React.memo(() => {
               </ScrollView>
             </View>
 
-            {/* Quick Filter Horizontal Chips Bar with Live Counts */}
+            
             <View style={{ marginBottom: 8 }}>
               <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
                 paddingHorizontal: 12,
@@ -688,7 +688,7 @@ const NetworkTab = React.memo(() => {
               </ScrollView>
             </View>
 
-            {/* Search Scope Selector Bar (Visible on search or focus) */}
+            
             {(isSearchFocused || search.length > 0) && (<View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -745,7 +745,7 @@ const NetworkTab = React.memo(() => {
                 </ScrollView>
               </View>)}
 
-            {/* Advanced Search Quick Query Suggestions Bar */}
+            
             {(isSearchFocused || search.length > 0) && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 8, maxHeight: 28 }} contentContainerStyle={{
                     paddingHorizontal: 12,
                     flexDirection: 'row',
@@ -792,7 +792,7 @@ const NetworkTab = React.memo(() => {
                 })}
               </ScrollView>)}
 
-            {/* Active Filter Helper Status Bar */}
+            
             {(quickFilter !== 'all' ||
                 search.trim().length > 0 ||
                 statusFilters.size > 0 ||
@@ -918,7 +918,7 @@ const NetworkTab = React.memo(() => {
             styles.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
-      {/* #2 — always-visible scroll-to-top, bottom right */}
+      
       <TouchableScale onPress={() => {
             try {
                 apisListRef.current?.scrollToOffset({

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

@@ -34,7 +34,6 @@ export const NpmUpdateToast = () => {
     useEffect(() => {
         if (showUpdateToast && updateAvailable && latestNpmVersion && !dismissed) {
             setVisible(true);
-            // Slide and fade in
             Animated.parallel([
                 Animated.spring(translateYAnim, {
                     toValue: 0,
@@ -48,14 +47,12 @@ export const NpmUpdateToast = () => {
                     useNativeDriver: true,
                 }),
             ]).start();
-            // Progress bar countdown from 1 to 0
             progressAnim.setValue(1);
             Animated.timing(progressAnim, {
                 toValue: 0,
                 duration: TOAST_TIMEOUT_MS,
                 useNativeDriver: false,
             }).start();
-            // Auto-hide after timeout
             timerRef.current = setTimeout(() => {
                 handleDismiss();
             }, TOAST_TIMEOUT_MS);
@@ -109,12 +106,12 @@ export const NpmUpdateToast = () => {
             },
         ]}>
       <View style={styles.contentRow}>
-        {/* Left NPM Badge Icon */}
+        
         <View style={styles.npmIconContainer}>
           <NpmIcon size={15} color="#CB3837"/>
         </View>
 
-        {/* Text Details */}
+        
         <View style={styles.textContainer}>
           <View style={styles.titleRow}>
             <Text style={styles.titleText}>Update Available</Text>
@@ -127,7 +124,7 @@ export const NpmUpdateToast = () => {
           </Text>
         </View>
 
-        {/* Copy command quick button */}
+        
         <TouchableOpacity style={styles.copyButton} onPress={handleCopyCommand} hitSlop={6} activeOpacity={0.75}>
           {copied ? <CheckSvg size={11} color="#10B981"/> : <CopySvg size={11} color="#94A3B8"/>}
           <Text style={[styles.copyButtonText, copied && { color: '#10B981' }]}>
@@ -135,19 +132,19 @@ export const NpmUpdateToast = () => {
           </Text>
         </TouchableOpacity>
 
-        {/* Action Button: View */}
+        
         <TouchableOpacity style={styles.actionButton} onPress={handleOpenNpm} activeOpacity={0.8}>
           <Text style={styles.actionButtonText}>View</Text>
           <ExternalLinkSvg size={10} color="#FFFFFF"/>
         </TouchableOpacity>
 
-        {/* Close Button */}
+        
         <TouchableOpacity style={styles.closeButton} onPress={handleDismiss} hitSlop={8} activeOpacity={0.7}>
           <CloseSvg size={12} color="#94A3B8"/>
         </TouchableOpacity>
       </View>
 
-      {/* Animated Linear Timeout Progress Bar */}
+      
       <View style={styles.progressBarTrack}>
         <Animated.View style={[styles.progressBarFill, { width: progressWidth }]}/>
       </View>