react-native-inapp-inspector 1.1.27 → 1.1.29

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

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { ActivityIndicator, Image, Linking, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { ActivityIndicator, Image, Linking, Platform, Pressable, ScrollView, Share, StyleSheet, Text, TextInput, View, } from 'react-native';
 import { useTranslation, t } from '../../i18n';
 import TouchableScale from '../TouchableScale';
 import CopyButton from '../CopyButton';
 import HighlightText from '../HighlightText';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, } from '../NetworkIcons';
+import { copyToClipboard } from '../../helpers';
+import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, DownloadIcon, } from '../NetworkIcons';
 import Svg, { Path, Rect, Circle, Ellipse, G, Defs, LinearGradient, Stop, } from 'react-native-svg';
 import { analyzeHostAppBundle, getCachedBundleAnalysis, } from '../../customHooks/bundleAnalyzer';
 // ─── High-Fidelity Vector Package & NPM Logos ────────────────────────────────
@@ -304,7 +305,72 @@ function buildBundleFileTree(files) {
     }
     return convertMapToNodes(rootMap);
 }
-const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolders, toggleFolder, isLastChild, }) => {
+export const downloadBundleFile = async (file, scriptURL) => {
+    let content = '';
+    // 1. Attempt to fetch real source code from Metro dev server if available
+    try {
+        let devServerOrigin = 'http://localhost:8081';
+        if (scriptURL && scriptURL.startsWith('http')) {
+            const match = scriptURL.match(/^(https?:\/\/[^/]+)/);
+            if (match) {
+                devServerOrigin = match[1];
+            }
+        }
+        const cleanPath = file.path.replace(/^\/+/, '');
+        const url = `${devServerOrigin}/${cleanPath}`;
+        const res = await fetch(url);
+        if (res.ok) {
+            const text = await res.text();
+            if (text && text.length > 0) {
+                content = text;
+            }
+        }
+    }
+    catch { }
+    // 2. If dev server direct fetch is unavailable, provide structured module descriptor with full path
+    if (!content) {
+        content = `// ─────────────────────────────────────────────────────────────
+// File: ${file.name}
+// Path: ${file.path}
+// Category: ${file.category.toUpperCase()}
+// Size: ${file.sizeKb} KB
+// Status: ${file.status === 'optimal' ? 'Active in Dependency Graph' : 'Not consumed / Static'}
+// Meta: ${file.meta}
+// ─────────────────────────────────────────────────────────────
+
+export default {
+  id: ${JSON.stringify(file.id)},
+  name: ${JSON.stringify(file.name)},
+  path: ${JSON.stringify(file.path)},
+  category: ${JSON.stringify(file.category)},
+  sizeKb: ${file.sizeKb},
+  meta: ${JSON.stringify(file.meta)},
+  status: ${JSON.stringify(file.status || 'optimal')},
+};
+`;
+    }
+    // 3. Trigger native Share / Download sheet
+    try {
+        await Share.share(Platform.OS === 'ios'
+            ? {
+                title: file.name,
+                message: content,
+            }
+            : {
+                title: `Download ${file.name}`,
+                message: content,
+            }, {
+            dialogTitle: `Download / Save ${file.name}`,
+        });
+    }
+    catch { }
+    // 4. Also copy directly to clipboard for quick paste in VS Code or external editor
+    try {
+        copyToClipboard(content, file.name);
+    }
+    catch { }
+};
+const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolders, toggleFolder, isLastChild, onDownload, }) => {
     const isExpanded = search ? true : !!expandedFolders[node.fullPath];
     const isCollapsed = !isExpanded;
     const indentLeft = level * 16 + 10;
@@ -342,7 +408,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
         </TouchableScale>
 
         {!isCollapsed && (<View style={bundleStyles.treeChildrenContainer}>
-            {node.children.map((child, cIdx) => (<BundleTreeNodeView key={child.id} node={child} level={level + 1} search={search} totalBundleKb={totalBundleKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={cIdx === node.children.length - 1}/>))}
+            {node.children.map((child, cIdx) => (<BundleTreeNodeView key={child.id} node={child} level={level + 1} search={search} totalBundleKb={totalBundleKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={cIdx === node.children.length - 1} onDownload={onDownload}/>))}
           </View>)}
       </View>);
     }
@@ -383,7 +449,13 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
           <Text style={bundleStyles.treeFilePctText}>{pctOfTotal}%</Text>
         </View>
 
-        <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+          {onDownload && (<TouchableScale onPress={() => onDownload(file)} style={bundleStyles.treeActionBtn} hitSlop={8}>
+              <DownloadIcon size={13} color={AppColors.sky500}/>
+            </TouchableScale>)}
+
+          <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
+        </View>
       </View>
     </View>);
 };
@@ -560,12 +632,28 @@ const BundleTab = React.memo(() => {
     const filteredTotalKb = useMemo(() => {
         return filteredFiles.reduce((acc, f) => acc + f.sizeKb, 0);
     }, [filteredFiles]);
-    // Tree View State & Node Generation (Collapsed by default)
+    // Tree View State & Node Generation (Top folders expanded by default)
     const [filesViewMode, setFilesViewMode] = useState('tree');
     const [expandedFolders, setExpandedFolders] = useState({});
     const fileTreeNodes = useMemo(() => {
         return buildBundleFileTree(filteredFiles);
     }, [filteredFiles]);
+    useEffect(() => {
+        if (fileTreeNodes.length > 0 && Object.keys(expandedFolders).length === 0) {
+            const initial = {};
+            fileTreeNodes.forEach(node => {
+                if (node.isFolder) {
+                    initial[node.fullPath] = true;
+                    node.children.forEach(child => {
+                        if (child.isFolder) {
+                            initial[child.fullPath] = true;
+                        }
+                    });
+                }
+            });
+            setExpandedFolders(initial);
+        }
+    }, [fileTreeNodes]);
     const toggleFolder = useCallback((path) => {
         setExpandedFolders(prev => ({
             ...prev,
@@ -1318,7 +1406,7 @@ const BundleTab = React.memo(() => {
 
             {/* ── MODE 1: DIRECTORY TREE VIEW ── */}
             {filesViewMode === 'tree' ? (<View style={bundleStyles.treeRootCard}>
-                {fileTreeNodes.map((node, nIdx) => (<BundleTreeNodeView key={node.id} node={node} level={0} search={search} totalBundleKb={summary.totalKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={nIdx === fileTreeNodes.length - 1}/>))}
+                {fileTreeNodes.map((node, nIdx) => (<BundleTreeNodeView key={node.id} node={node} level={0} search={search} totalBundleKb={summary.totalKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={nIdx === fileTreeNodes.length - 1} onDownload={f => downloadBundleFile(f, analysis?.scriptURL)}/>))}
               </View>) : (
             /* ── MODE 2: FLAT LIST VIEW ── */
             filteredFiles.map((file, index) => {
@@ -1354,6 +1442,9 @@ const BundleTab = React.memo(() => {
                           </Text>
                           <Text style={bundleStyles.filePercent}>{pctOfTotal}%</Text>
                         </View>
+                        <TouchableScale onPress={() => downloadBundleFile(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                          <DownloadIcon size={14} color={AppColors.sky500}/>
+                        </TouchableScale>
                         <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
                       </View>
                     </View>
@@ -1372,21 +1463,25 @@ const BundleTab = React.memo(() => {
                       <Text style={bundleStyles.fileMetaText}>{file.meta}</Text>
                       {file.advice && (<View style={[
                             bundleStyles.adviceBadge,
-                            file.status === 'warning' && bundleStyles.adviceWarning,
-                            file.status === 'optimal' && bundleStyles.adviceOptimal,
+                            file.status === 'warning' &&
+                                bundleStyles.adviceWarning,
+                            file.status === 'optimal' &&
+                                bundleStyles.adviceOptimal,
                             isUnused && bundleStyles.adviceUnused,
                         ]}>
-                          <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
                           {isUnused ? (<TrashIcon color={AppColors.red600} size={12}/>) : file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
                           <Text style={[
                             bundleStyles.adviceText,
-                            file.status === 'warning' && { color: AppColors.amber800Warm },
-                            file.status === 'optimal' && { color: AppColors.emerald700 },
+                            file.status === 'warning' && {
+                                color: AppColors.amber800Warm,
+                            },
+                            file.status === 'optimal' && {
+                                color: AppColors.emerald700,
+                            },
                             isUnused && { color: AppColors.red600 },
                         ]}>
                             {file.advice}
                           </Text>
-                        </View>
                         </View>)}
                     </View>
                   </View>);
@@ -1617,6 +1712,9 @@ const BundleTab = React.memo(() => {
                         {t('bundle.fileSizeKb', { size: file.sizeKb })}
                       </Text>
                     </View>
+                    <TouchableScale onPress={() => downloadBundleFile(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                      <DownloadIcon size={14} color={AppColors.sky500}/>
+                    </TouchableScale>
                     <CopyButton value={() => file} label={t('bundle.mediaItemJson')}/>
                   </View>
                 </View>
@@ -1628,16 +1726,18 @@ const BundleTab = React.memo(() => {
                         file.status === 'warning' && bundleStyles.adviceWarning,
                         file.status === 'optimal' && bundleStyles.adviceOptimal,
                     ]}>
-                      <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
-                        {file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
-                        <Text style={[
+                      {file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
+                      <Text style={[
                         bundleStyles.adviceText,
-                        file.status === 'warning' && { color: AppColors.amber800Warm },
-                        file.status === 'optimal' && { color: AppColors.emerald700 },
+                        file.status === 'warning' && {
+                            color: AppColors.amber800Warm,
+                        },
+                        file.status === 'optimal' && {
+                            color: AppColors.emerald700,
+                        },
                     ]}>
-                          {file.advice}
-                        </Text>
-                      </View>
+                        {file.advice}
+                      </Text>
                     </View>)}
                 </View>
               </View>))}
@@ -2408,6 +2508,24 @@ const bundleStyles = StyleSheet.create({
     fileSizeBox: {
         alignItems: 'flex-end',
     },
+    downloadFileBtn: {
+        padding: 6,
+        borderRadius: 6,
+        backgroundColor: `${AppColors.sky500}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${AppColors.sky500}28`,
+    },
+    treeActionBtn: {
+        padding: 4,
+        borderRadius: 4,
+        backgroundColor: `${AppColors.sky500}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${AppColors.sky500}28`,
+    },
     fileSizeKb: {
         fontFamily: AppFonts.interBold,
         fontSize: 12,
@@ -2579,10 +2697,13 @@ const bundleStyles = StyleSheet.create({
         color: AppColors.amber800Warm,
     },
     adviceBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
         paddingHorizontal: 8,
-        paddingVertical: 4,
+        paddingVertical: 5,
         borderRadius: 6,
-        marginTop: 2,
+        marginTop: 4,
+        gap: 6,
     },
     adviceWarning: {
         backgroundColor: AppColors.amber100,
@@ -2598,6 +2719,7 @@ const bundleStyles = StyleSheet.create({
         fontFamily: AppFonts.interMedium,
         fontSize: 10.5,
         lineHeight: 14,
+        flex: 1,
     },
     impactBadge: {
         paddingHorizontal: 6,

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

@@ -34,14 +34,6 @@ const CrashTab = React.memo(() => {
     const [crashFilters, setCrashFilters] = useState(DEFAULT_CRASH_FILTERS);
     const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
     const [detailSubTab, setDetailSubTab] = useState('stack');
-    // Auto-open the latest crash detail on first visit if crashes exist
-    const hasAutoOpened = React.useRef(false);
-    React.useEffect(() => {
-        if (!hasAutoOpened.current && !selectedCrash && crashRecords.length > 0) {
-            setSelectedCrash(crashRecords[0]);
-            hasAutoOpened.current = true;
-        }
-    }, [crashRecords, selectedCrash, setSelectedCrash]);
     // Calculate statistics
     const stats = useMemo(() => {
         const total = crashRecords.length;

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 }}>
@@ -97,6 +117,47 @@ const NetworkDetail = React.memo(() => {
                       </Text>
                     </View>
 
+                    {/* Client Chip (AXIOS / FETCH / XHR) */}
+                    {selected.client && (<View style={[
+                        styles.chip,
+                        {
+                            backgroundColor: selected.client === 'axios'
+                                ? `${AppColors.purple}14`
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? `${AppColors.pink500}14`
+                                    : selected.client === 'xhr'
+                                        ? `${AppColors.amber500}14`
+                                        : `${AppColors.sky500}14`,
+                            borderColor: selected.client === 'axios'
+                                ? `${AppColors.purple}30`
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? `${AppColors.pink500}30`
+                                    : selected.client === 'xhr'
+                                        ? `${AppColors.amber500}30`
+                                        : `${AppColors.sky500}30`,
+                            paddingHorizontal: 6,
+                            paddingVertical: 3,
+                            borderRadius: 6,
+                        },
+                    ]}>
+                        <Text style={[
+                        styles.chipText,
+                        {
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 9.5,
+                            color: selected.client === 'axios'
+                                ? AppColors.purple
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? AppColors.pink500
+                                    : selected.client === 'xhr'
+                                        ? AppColors.amber700
+                                        : AppColors.sky600,
+                        },
+                    ]}>
+                          {selected.client.toUpperCase()}
+                        </Text>
+                      </View>)}
+
                     {/* Status Pill */}
                     {selected.status != null && (<View style={[
                         styles.chip,
@@ -186,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"/>
@@ -204,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',
@@ -387,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 },
@@ -406,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}>
@@ -434,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/Inspector/PerformanceTab.d.ts

@@ -6,6 +6,11 @@ export interface PerformanceEvent {
     category: 'render' | 'navigation' | 'memory' | 'io' | 'bridge';
     fps: number;
     durationMs: number;
+    droppedFrames?: number;
+    frameTimeMs?: number;
+    frameBudgetPct?: number;
+    bottleneckThread?: 'JS Thread' | 'UI Thread' | 'Bridge' | 'Balanced';
+    screenName?: string;
     label: string;
     detail: string;
     source?: string;