react-native-inapp-inspector 1.1.28 → 1.1.29

package/dist/esm/components/ConsoleLogCard.js

@@ -3,10 +3,10 @@ import { useTranslation } from '../i18n';
 import { Pressable, StyleSheet, Text, View, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
-import { formatTime, getJsonContent, getJsonPreviewText, parseStackLine, } from '../helpers';
+import { formatTime, getJsonContent, getJsonPreviewText, parseStackLine, openInVSCode, } from '../helpers';
 import HighlightText from './HighlightText';
 import CopyButton from './CopyButton';
-import { ChevronIcon } from './NetworkIcons';
+import { ChevronIcon, ExternalLinkIcon } from './NetworkIcons';
 import { useInspector } from './Inspector/InspectorContext';
 const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
     if (!message)
@@ -226,18 +226,34 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
             <Text style={styles.footerText}>{formatTime(item.timestamp)}</Text>
             {parsedCaller && (<>
                 <View style={styles.footerDot}/>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, maxWidth: 170 }}>
+                <Pressable onPress={e => {
+                e.stopPropagation?.();
+                openInVSCode(parsedCaller.rawFilePath ||
+                    parsedCaller.fullPath ||
+                    parsedCaller.fileName, parsedCaller.lineNumber, parsedCaller.columnNumber);
+            }} hitSlop={8} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+                maxWidth: 185,
+                backgroundColor: `${AppColors.sky600}10`,
+                borderColor: `${AppColors.sky600}2B`,
+                borderWidth: 1,
+                borderRadius: 5,
+                paddingHorizontal: 5,
+                paddingVertical: 1.5,
+            }}>
                   {parsedCaller.fileExt && parsedCaller.fileExt !== 'other' && (<View style={{
                     backgroundColor: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
-                        ? `${AppColors.brandPurple}18`
-                        : `${AppColors.teal600}18`,
+                        ? `${AppColors.brandPurple}22`
+                        : `${AppColors.teal600}22`,
                     borderRadius: 3,
                     paddingHorizontal: 3.5,
-                    paddingVertical: 1,
+                    paddingVertical: 0.5,
                 }}>
                       <Text style={{
                     fontFamily: AppFonts.interBold,
-                    fontSize: 8.5,
+                    fontSize: 8,
                     color: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
                         ? AppColors.brandPurple
                         : AppColors.teal600,
@@ -245,11 +261,19 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                         {parsedCaller.fileExt.toUpperCase()}
                       </Text>
                     </View>)}
-                  <Text style={[styles.footerText, styles.footerCaller]} numberOfLines={1} ellipsizeMode="middle">
+                  <Text style={[
+                styles.footerText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    color: AppColors.sky600,
+                    fontSize: 9.5,
+                },
+            ]} numberOfLines={1} ellipsizeMode="middle">
                     {parsedCaller.fileName}
                     {parsedCaller.lineNumber ? `:${parsedCaller.lineNumber}` : ''}
                   </Text>
-                </View>
+                  <ExternalLinkIcon color={AppColors.sky600} size={8.5}/>
+                </Pressable>
               </>)}
           </View>
 

package/dist/esm/components/CopyButton.js

@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react';
+import { Share } from 'react-native';
 // Components
 import TouchableScale from './TouchableScale';
 // Helpers
@@ -16,6 +17,19 @@ const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
         setCopied(true);
         setTimeout(() => setCopied(false), 1200);
     }, [value, label]);
+    const handleLongPress = useCallback(() => {
+        try {
+            const resolvedValue = typeof value === 'function' ? value() : value;
+            const textToShare = typeof resolvedValue === 'string'
+                ? resolvedValue
+                : JSON.stringify(resolvedValue, null, 2);
+            Share.share({
+                message: textToShare,
+                title: label,
+            });
+        }
+        catch { }
+    }, [value, label]);
     const containerStyle = [
         styles.iconSquareBtn,
         copied && styles.iconSquareBtnSuccess,
@@ -25,7 +39,7 @@ const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
         : iconType === 'fetch'
             ? FetchIcon
             : CopyIcon;
-    return (<TouchableScale onPress={handlePress} hitSlop={12} style={containerStyle}>
+    return (<TouchableScale onPress={handlePress} onLongPress={handleLongPress} hitSlop={12} style={containerStyle}>
       {copied ? (<CheckIcon color={AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors.grayTextWeak} size={14}/>)}
     </TouchableScale>);
 });

package/dist/esm/components/DomainHeader.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, Pressable, View, Text } from 'react-native';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
 // Helpers
 import { formatDateTime } from '../helpers';
 // Assets
@@ -35,10 +36,61 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
           <View style={[styles.domainIconWrap, { backgroundColor: `${color}18` }]}>
             <ScreenIcon color={color} size={14}/>
           </View>
-          <View style={{ flex: 1, justifyContent: 'center' }}>
-            <Text style={styles.domainTitleText} numberOfLines={1}>
-              {pageName}
-            </Text>
+          <View style={{ flex: 1, justifyContent: 'center', minWidth: 0 }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <Text style={[styles.domainTitleText, { flexShrink: 1 }]} numberOfLines={1}>
+                {pageName}
+              </Text>
+              {total > 0 && (<View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+                backgroundColor: stats.failed > 0
+                    ? '#FEE2E2'
+                    : stats.loading > 0
+                        ? '#FEF3C7'
+                        : '#D1FAE5',
+                paddingHorizontal: 5,
+                paddingVertical: 1.5,
+                borderRadius: 4,
+            }}>
+                  <View style={{
+                width: 24,
+                height: 3.5,
+                borderRadius: 2,
+                backgroundColor: '#E5E7EB',
+                flexDirection: 'row',
+                overflow: 'hidden',
+            }}>
+                    {pctSuccess > 0 && (<View style={{
+                    width: `${pctSuccess}%`,
+                    height: '100%',
+                    backgroundColor: '#10B981',
+                }}/>)}
+                    {pctFailed > 0 && (<View style={{
+                    width: `${pctFailed}%`,
+                    height: '100%',
+                    backgroundColor: '#EF4444',
+                }}/>)}
+                    {pctLoading > 0 && (<View style={{
+                    width: `${pctLoading}%`,
+                    height: '100%',
+                    backgroundColor: '#F59E0B',
+                }}/>)}
+                  </View>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 8.5,
+                color: stats.failed > 0
+                    ? '#991B1B'
+                    : stats.loading > 0
+                        ? '#92400E'
+                        : '#065F46',
+            }}>
+                    {pctSuccess}%
+                  </Text>
+                </View>)}
+            </View>
             <Text style={styles.domainSummaryText} numberOfLines={1}>
               {formatDateTime(timestamp)}
             </Text>
@@ -94,30 +146,6 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
         })}
         </View>
       </View>
-
-      {total > 0 && (<View style={styles.domainProgressTrack}>
-          {pctSuccess > 0 && (<View style={[
-                    styles.domainProgressSegment,
-                    {
-                        width: `${pctSuccess}%`,
-                        backgroundColor: AppColors.greenColor,
-                    },
-                ]}/>)}
-          {pctFailed > 0 && (<View style={[
-                    styles.domainProgressSegment,
-                    {
-                        width: `${pctFailed}%`,
-                        backgroundColor: AppColors.errorColor,
-                    },
-                ]}/>)}
-          {pctLoading > 0 && (<View style={[
-                    styles.domainProgressSegment,
-                    {
-                        width: `${pctLoading}%`,
-                        backgroundColor: AppColors.darkOrange,
-                    },
-                ]}/>)}
-        </View>)}
     </Pressable>);
 };
 export default DomainHeader;

package/dist/esm/components/HighlightText.js

@@ -3,6 +3,12 @@ import { Text } from 'react-native';
 // Helpers
 import { escapeRegex, handleOpenExternalLink } from '../helpers';
 const HighlightText = React.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
+    // Optimization: For huge strings (> 20KB) with no active search, bypass all splitting/regex overhead
+    if (!text || (text.length > 20000 && !search && !detectLinks)) {
+        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
+        {text}
+      </Text>);
+    }
     // Regex to detect absolute URLs
     const URL_REGEX = /(https?:\/\/[^\s]+)/g;
     const renderNormalOrHighlighted = (subText, keyPrefix) => {
@@ -17,7 +23,7 @@ const HighlightText = React.memo(function HighlightText({ text, search, style, h
             </Text>) : (<Text key={i}>{part}</Text>))}
       </Text>);
     };
-    if (detectLinks && text) {
+    if (detectLinks && text && text.length < 20000) {
         const parts = text.split(URL_REGEX);
         return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
         {parts.map((part, i) => {

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

@@ -9,7 +9,7 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
-import Svg, { Path, Line, Circle, G, Defs, LinearGradient as SvgLinearGradient, Stop, } from 'react-native-svg';
+import Svg, { Path, Rect, Line, Circle, G, Defs, LinearGradient as SvgLinearGradient, Stop, } from 'react-native-svg';
 import TouchableScale from '../TouchableScale';
 import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
 import { getEventCategory, } from '../../helpers';
@@ -299,41 +299,55 @@ const AnalyticsHeader = React.memo(() => {
           </View>
         </View>
 
-        {/* ── High Precision SVG Spline Area Graph ── */}
+        {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
         <View style={{ height: chartHeight, position: 'relative' }}>
           <Svg width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
             <Defs>
-              <SvgLinearGradient id="telemetryAreaGrad" x1="0" y1="0" x2="0" y2="1">
-                <Stop offset="0%" stopColor={AppColors.brandPurple} stopOpacity="0.4"/>
-                <Stop offset="80%" stopColor={AppColors.brandPurple} stopOpacity="0.05"/>
-                <Stop offset="100%" stopColor={AppColors.brandPurple} stopOpacity="0.0"/>
+              <SvgLinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
+                <Stop offset="100%" stopColor="#6366F1" stopOpacity="0.6"/>
+              </SvgLinearGradient>
+              <SvgLinearGradient id="crashlyticsAreaGrad" x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.25"/>
+                <Stop offset="80%" stopColor="#8B5CF6" stopOpacity="0.04"/>
+                <Stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.0"/>
               </SvgLinearGradient>
             </Defs>
 
-            {/* Baseline & Grid lines */}
-            <Line x1="8" y1={chartHeight - 6} x2={svgWidth - 8} y2={chartHeight - 6} stroke={AppColors.dividerColor} strokeWidth="1"/>
-            <Line x1="8" y1={chartHeight / 2} x2={svgWidth - 8} y2={chartHeight / 2} stroke={AppColors.dividerColor} strokeWidth="0.8" strokeDasharray="3,3"/>
-
-            {/* Glowing Area Fill */}
-            <Path d={histogramData.areaPath} fill="url(#telemetryAreaGrad)"/>
+            {/* Subtle Grid Guidelines */}
+            <Line x1="6" y1={chartHeight - 6} x2={svgWidth - 6} y2={chartHeight - 6} stroke="#E2E8F0" strokeWidth="1"/>
+            <Line x1="6" y1={chartHeight / 2} x2={svgWidth - 6} y2={chartHeight / 2} stroke="#F1F5F9" strokeWidth="1" strokeDasharray="4,4"/>
 
-            {/* Smooth Spline Wave Stroke */}
-            <Path d={histogramData.linePath} fill="none" stroke={AppColors.brandPurple} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+            {/* Glowing Area Underlay */}
+            <Path d={histogramData.areaPath} fill="url(#crashlyticsAreaGrad)"/>
 
-            {/* Data Points & Active Bucket Indicators */}
+            {/* Vertical Crashlytics Histogram Bars */}
             {histogramData.buckets.map((b, idx) => {
             const isSelected = selectedBucketIdx === idx;
-            return (<G key={b.index}>
-                  {isSelected && (<Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke={AppColors.brandPurple} strokeWidth="1.2" strokeDasharray="2,2"/>)}
+            const barWidth = 10;
+            const barX = b.x - barWidth / 2;
+            const barHeight = Math.max(3, chartHeight - 8 - b.y);
+            const barY = chartHeight - 8 - barHeight;
+            return (<G key={`bar-${b.index}`}>
+                  {/* Background slot */}
+                  <Rect x={barX} y={6} width={barWidth} height={chartHeight - 14} rx={3} fill={isSelected ? '#EDE9FE' : '#F8FAFC'}/>
 
-                  {b.total > 0 && (<Circle cx={b.x} cy={b.y} r={isSelected ? 4.5 : 2.8} fill={isSelected ? AppColors.brandPurple : AppColors.white} stroke={AppColors.brandPurple} strokeWidth={isSelected ? 2 : 1.5}/>)}
+                  {/* Active Event Bar */}
+                  {b.total > 0 && (<Rect x={barX} y={barY} width={barWidth} height={barHeight} rx={3} fill="url(#crashlyticsBarGrad)"/>)}
 
-                  {b.isLatest && (<G>
-                      <Circle cx={b.x} cy={b.y} r="6.5" fill={AppColors.brandPurple} opacity="0.22"/>
-                      <Circle cx={b.x} cy={b.y} r="3" fill={AppColors.brandPurple}/>
-                    </G>)}
+                  {/* Selected Cursor Line */}
+                  {isSelected && (<Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke="#8B5CF6" strokeWidth="1.5" strokeDasharray="2,2"/>)}
                 </G>);
         })}
+
+            {/* Crashlytics Apex Trendline */}
+            <Path d={histogramData.linePath} fill="none" stroke="#8B5CF6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+
+            {/* Pulsing Dot on Current Active Time Bucket */}
+            {histogramData.buckets.length > 0 && (<G>
+                <Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="5.5" fill="#8B5CF6" opacity="0.25"/>
+                <Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="3" fill="#7C3AED"/>
+              </G>)}
           </Svg>
 
           {/* Invisible Touch Columns for Interactive Bucket Selection */}

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

@@ -10,7 +10,7 @@ import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, getBundleIdentifier, formatTime, getSize } from '../../helpers';
-import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronIcon, ClockIcon, AppleIcon, AndroidIcon, PackageBoxIcon, } from '../NetworkIcons';
+import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronIcon, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, PackageBoxIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
     const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = useInspector();
     const envConfig = useMemo(() => {
@@ -108,9 +108,9 @@ const InspectorHeader = React.memo(() => {
                 flex: 1,
             }}>
                 <AppHeaderLogo size={46} customIcon={appIcon}/>
-                <View style={{ gap: 2, flex: 1 }}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                    <Text style={[styles.headerTitle]} numberOfLines={1}>
+                <View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'nowrap', minWidth: 0 }}>
+                    <Text style={[styles.headerTitle, { flexShrink: 1 }]} numberOfLines={1}>
                       {getAppName()}
                     </Text>
                     <View style={[
@@ -334,6 +334,20 @@ const InspectorHeader = React.memo(() => {
                     : '—'}
                       </Text>
                     </View>
+                    {selected.response != null && (<View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        borderRadius: 20,
+                        backgroundColor: `${AppColors.white}29`,
+                    }}>
+                        <SizeIcon color={AppColors.white} size={11}/>
+                        <Text style={styles.headerSubTitle}>
+                          {getSize(selected.response)}
+                        </Text>
+                      </View>)}
                   </View>
                 </View>) : activeTab === 'analytics' && selectedEvent != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>

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

@@ -6,11 +6,11 @@ import HighlightText from '../HighlightText';
 import JsonViewer from '../JsonViewer';
 import CopyButton from '../CopyButton';
 import SegmentedTabs from '../SegmentedTabs';
-import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, DocIcon, } from '../NetworkIcons';
+import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, DocIcon, ExternalLinkIcon, } from '../NetworkIcons';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import styles from '../../styles';
-import { getJsonContent, getSize, formatDateTime, parseStackLine, } from '../../helpers';
+import { getJsonContent, getSize, formatDateTime, parseStackLine, openInVSCode, } from '../../helpers';
 const getRelativeTime = (timestamp) => {
     const now = Date.now();
     const diff = now - timestamp;
@@ -269,16 +269,18 @@ const LogDetail = React.memo(() => {
             : originFrame?.fileName || t('console.consoleLog')}
               </Text>
 
-              {originFrame?.fileName && (<View style={[
+              {originFrame?.fileName && (<Pressable onPress={() => openInVSCode(originFrame.rawFilePath ||
+                originFrame.fullPath ||
+                originFrame.fileName, originFrame.lineNumber, originFrame.columnNumber)} hitSlop={8} style={[
                 styles.metaChip,
                 {
-                    backgroundColor: `${AppColors.brandPurple}12`,
-                    borderColor: `${AppColors.brandPurple}30`,
+                    backgroundColor: `${AppColors.brandPurple}15`,
+                    borderColor: `${AppColors.brandPurple}40`,
                     paddingHorizontal: 7,
                     paddingVertical: 2,
                 },
             ]}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexWrap: 'wrap', flexShrink: 1 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flexShrink: 1 }}>
                     <DocIcon color={AppColors.brandPurple} size={10}/>
                     <Text style={[
                 styles.metaChipText,
@@ -288,8 +290,9 @@ const LogDetail = React.memo(() => {
                       {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
                       {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
                     </Text>
+                    <ExternalLinkIcon color={AppColors.brandPurple} size={9}/>
                   </View>
-                </View>)}
+                </Pressable>)}
             </View>
 
             {/* Enhanced metadata metrics row */}

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

@@ -18,6 +18,7 @@ import PerformanceTab from './PerformanceTab';
 import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
 import SettingsPanel from './SettingsPanel';
+import Toast from '../Toast';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
@@ -115,6 +116,9 @@ const MainScreen = () => {
                 ]}>
                   <SettingsPanel />
                 </View>)}
+
+              {/* Bottom floating toast notification */}
+              <Toast />
             </View>
           </View>
         </ErrorBoundary>)}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from '../../i18n';
-import { Image, Linking, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { Alert, Image, Linking, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import SegmentedTabs from '../SegmentedTabs';
@@ -20,6 +20,26 @@ import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadI
 const NetworkDetail = React.memo(() => {
     const { t } = useTranslation();
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = useInspector();
+    const handleOpenUrl = () => {
+        Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${detailDisplayUrl}`, [
+            { text: t('common.cancel') || 'Cancel', style: 'cancel' },
+            {
+                text: t('common.open') || 'Open',
+                onPress: () => {
+                    Linking.canOpenURL(detailDisplayUrl)
+                        .then(supported => {
+                        if (supported) {
+                            Linking.openURL(detailDisplayUrl);
+                        }
+                        else {
+                            Linking.openURL(detailDisplayUrl).catch(() => { });
+                        }
+                    })
+                        .catch(() => { });
+                },
+            },
+        ]);
+    };
     if (!selected)
         return null;
     return (<View style={{ flex: 1 }}>
@@ -227,7 +247,7 @@ const NetworkDetail = React.memo(() => {
                   </View>
 
                   <View style={styles.detailInfoRight}>
-                    <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={() => Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                    <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
                       <ExternalLinkIcon color={AppColors.sky600} size={14}/>
                     </TouchableScale>
                     <CopyButton value={getFetchCommand(selected)} label="fetch()" iconType="fetch"/>
@@ -245,7 +265,7 @@ const NetworkDetail = React.memo(() => {
                     padding: 10,
                     marginTop: 8,
                     gap: 6,
-                }} onPress={() => Linking.openURL(detailDisplayUrl)}>
+                }} onPress={handleOpenUrl}>
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -428,7 +448,7 @@ const NetworkDetail = React.memo(() => {
                 if (!reqExpanded && !showReqDiff)
                     setReqExpanded(true);
             }}/>
-                {showReqDiff ? (<DiffViewer oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer data={selected.request} search={detailSearch} forceOpen/>) : (<View style={styles.codeBlock}>
+                {showReqDiff ? (<DiffViewer oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer data={selected.request} search={detailSearch}/>) : (<View style={styles.codeBlock}>
                     <Text style={[
                     styles.codeText,
                     { color: AppColors.grayTextWeak },
@@ -447,26 +467,6 @@ const NetworkDetail = React.memo(() => {
                     <ClearIcon color={AppColors.grayTextWeak} size={14}/>
                   </Pressable>)}
               </View>
-              {selected.response != null && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 10,
-                    height: 34,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.purple}30`,
-                    backgroundColor: `${AppColors.purple}10`,
-                }}>
-                  <SizeIcon color={AppColors.purple} size={12}/>
-                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors.purple,
-                }}>
-                    {getSize(selected.response)}
-                  </Text>
-                </View>)}
             </View>
 
             <View style={styles.sectionContainer}>
@@ -475,7 +475,7 @@ const NetworkDetail = React.memo(() => {
                 if (!resExpanded && !showResDiff)
                     setResExpanded(true);
             }}/>
-              {showResDiff ? (<DiffViewer oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer data={selected.response} search={detailSearch} forceOpen wrap/>) : (<View style={styles.codeBlock}>
+              {showResDiff ? (<DiffViewer oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer data={selected.response} search={detailSearch} wrap/>) : (<View style={styles.codeBlock}>
                   <Text style={[
                     styles.codeText,
                     { color: AppColors.grayTextWeak },

package/dist/esm/components/JsonViewer.js

@@ -57,7 +57,7 @@ const JsonTableRow = React.memo(({ itemKey, val, search, }) => {
 // ── JsonViewer Component ─────────────────────────────────────────────────────
 const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
     const { t } = useTranslation();
-    const [internalMode, setInternalMode] = useState('pretty');
+    const [internalMode, setInternalMode] = useState('raw');
     const mode = externalMode ?? internalMode;
     const setMode = (newMode) => {
         if (onModeChange) {
@@ -78,6 +78,10 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
             return String(data);
         }
     }, [data]);
+    const [showFullRaw, setShowFullRaw] = useState(false);
+    const RAW_LIMIT = 50000;
+    const isTruncated = rawText.length > RAW_LIMIT && !showFullRaw;
+    const displayRawText = isTruncated ? rawText.slice(0, RAW_LIMIT) : rawText;
     useEffect(() => {
         if (externalMode) {
             setInternalMode(externalMode);
@@ -148,7 +152,7 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
       <View style={contentWrapperStyle}>
         {mode === 'pretty' && (isEmpty ? (<View style={localStyles.emptyTable}>
               <Text style={localStyles.emptyTableText}>
-                {t('network.emptyResponse')}
+                {t('network.jsonViewer.emptyPayload')}
               </Text>
             </View>) : (wrap ? (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
                 <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
@@ -163,12 +167,30 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
               </ScrollView>))))}
 
         {mode === 'raw' && (<ScrollView style={scrollStyle} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true} nestedScrollEnabled={true}>
-            <HighlightText text={rawText} search={search} detectLinks={true} style={localStyles.rawPlainText} highlightStyle={{
+            <HighlightText text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
                 backgroundColor: AppColors.yellowHighlight,
                 color: AppColors.primaryBlack,
                 borderRadius: 3,
                 paddingHorizontal: 2,
             }}/>
+            {isTruncated && (<TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
+                    marginTop: 10,
+                    backgroundColor: `${AppColors.brandPurple}15`,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    borderWidth: 1,
+                    borderColor: `${AppColors.brandPurple}30`,
+                }}>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors.brandPurple,
+                }}>
+                  Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+                </Text>
+              </TouchableOpacity>)}
           </ScrollView>)}
 
         {mode === 'table' && (fullHeight ? (<ScrollView style={scrollStyle}>