react-native-inapp-inspector 1.1.27 → 1.1.29

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

@@ -36,6 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadBundleFile = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const i18n_1 = require("../../i18n");
@@ -44,6 +45,7 @@ const CopyButton_1 = __importDefault(require("../CopyButton"));
 const HighlightText_1 = __importDefault(require("../HighlightText"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
+const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const bundleAnalyzer_1 = require("../../customHooks/bundleAnalyzer");
@@ -342,7 +344,73 @@ function buildBundleFileTree(files) {
     }
     return convertMapToNodes(rootMap);
 }
-const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolders, toggleFolder, isLastChild, }) => {
+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 react_native_1.Share.share(react_native_1.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 {
+        (0, helpers_1.copyToClipboard)(content, file.name);
+    }
+    catch { }
+};
+exports.downloadBundleFile = downloadBundleFile;
+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;
@@ -380,7 +448,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
         </TouchableScale_1.default>
 
         {!isCollapsed && (<react_native_1.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}/>))}
           </react_native_1.View>)}
       </react_native_1.View>);
     }
@@ -421,7 +489,13 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
           <react_native_1.Text style={bundleStyles.treeFilePctText}>{pctOfTotal}%</react_native_1.Text>
         </react_native_1.View>
 
-        <CopyButton_1.default value={() => file} label={(0, i18n_1.t)('bundle.fileDetailsJson')}/>
+        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+          {onDownload && (<TouchableScale_1.default onPress={() => onDownload(file)} style={bundleStyles.treeActionBtn} hitSlop={8}>
+              <NetworkIcons_1.DownloadIcon size={13} color={AppColors_1.AppColors.sky500}/>
+            </TouchableScale_1.default>)}
+
+          <CopyButton_1.default value={() => file} label={(0, i18n_1.t)('bundle.fileDetailsJson')}/>
+        </react_native_1.View>
       </react_native_1.View>
     </react_native_1.View>);
 };
@@ -598,12 +672,28 @@ const BundleTab = react_1.default.memo(() => {
     const filteredTotalKb = (0, react_1.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] = (0, react_1.useState)('tree');
     const [expandedFolders, setExpandedFolders] = (0, react_1.useState)({});
     const fileTreeNodes = (0, react_1.useMemo)(() => {
         return buildBundleFileTree(filteredFiles);
     }, [filteredFiles]);
+    (0, react_1.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 = (0, react_1.useCallback)((path) => {
         setExpandedFolders(prev => ({
             ...prev,
@@ -1356,7 +1446,7 @@ const BundleTab = react_1.default.memo(() => {
 
             {/* ── MODE 1: DIRECTORY TREE VIEW ── */}
             {filesViewMode === 'tree' ? (<react_native_1.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 => (0, exports.downloadBundleFile)(f, analysis?.scriptURL)}/>))}
               </react_native_1.View>) : (
             /* ── MODE 2: FLAT LIST VIEW ── */
             filteredFiles.map((file, index) => {
@@ -1392,6 +1482,9 @@ const BundleTab = react_1.default.memo(() => {
                           </react_native_1.Text>
                           <react_native_1.Text style={bundleStyles.filePercent}>{pctOfTotal}%</react_native_1.Text>
                         </react_native_1.View>
+                        <TouchableScale_1.default onPress={() => (0, exports.downloadBundleFile)(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                          <NetworkIcons_1.DownloadIcon size={14} color={AppColors_1.AppColors.sky500}/>
+                        </TouchableScale_1.default>
                         <CopyButton_1.default value={() => file} label={t('bundle.fileDetailsJson')}/>
                       </react_native_1.View>
                     </react_native_1.View>
@@ -1410,21 +1503,25 @@ const BundleTab = react_1.default.memo(() => {
                       <react_native_1.Text style={bundleStyles.fileMetaText}>{file.meta}</react_native_1.Text>
                       {file.advice && (<react_native_1.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,
                         ]}>
-                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
                           {isUnused ? (<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.red600} size={12}/>) : file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
                           <react_native_1.Text style={[
                             bundleStyles.adviceText,
-                            file.status === 'warning' && { color: AppColors_1.AppColors.amber800Warm },
-                            file.status === 'optimal' && { color: AppColors_1.AppColors.emerald700 },
+                            file.status === 'warning' && {
+                                color: AppColors_1.AppColors.amber800Warm,
+                            },
+                            file.status === 'optimal' && {
+                                color: AppColors_1.AppColors.emerald700,
+                            },
                             isUnused && { color: AppColors_1.AppColors.red600 },
                         ]}>
                             {file.advice}
                           </react_native_1.Text>
-                        </react_native_1.View>
                         </react_native_1.View>)}
                     </react_native_1.View>
                   </react_native_1.View>);
@@ -1655,6 +1752,9 @@ const BundleTab = react_1.default.memo(() => {
                         {t('bundle.fileSizeKb', { size: file.sizeKb })}
                       </react_native_1.Text>
                     </react_native_1.View>
+                    <TouchableScale_1.default onPress={() => (0, exports.downloadBundleFile)(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                      <NetworkIcons_1.DownloadIcon size={14} color={AppColors_1.AppColors.sky500}/>
+                    </TouchableScale_1.default>
                     <CopyButton_1.default value={() => file} label={t('bundle.mediaItemJson')}/>
                   </react_native_1.View>
                 </react_native_1.View>
@@ -1666,16 +1766,18 @@ const BundleTab = react_1.default.memo(() => {
                         file.status === 'warning' && bundleStyles.adviceWarning,
                         file.status === 'optimal' && bundleStyles.adviceOptimal,
                     ]}>
-                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
-                        {file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
-                        <react_native_1.Text style={[
+                      {file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
+                      <react_native_1.Text style={[
                         bundleStyles.adviceText,
-                        file.status === 'warning' && { color: AppColors_1.AppColors.amber800Warm },
-                        file.status === 'optimal' && { color: AppColors_1.AppColors.emerald700 },
+                        file.status === 'warning' && {
+                            color: AppColors_1.AppColors.amber800Warm,
+                        },
+                        file.status === 'optimal' && {
+                            color: AppColors_1.AppColors.emerald700,
+                        },
                     ]}>
-                          {file.advice}
-                        </react_native_1.Text>
-                      </react_native_1.View>
+                        {file.advice}
+                      </react_native_1.Text>
                     </react_native_1.View>)}
                 </react_native_1.View>
               </react_native_1.View>))}
@@ -2446,6 +2548,24 @@ const bundleStyles = react_native_1.StyleSheet.create({
     fileSizeBox: {
         alignItems: 'flex-end',
     },
+    downloadFileBtn: {
+        padding: 6,
+        borderRadius: 6,
+        backgroundColor: `${AppColors_1.AppColors.sky500}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.sky500}28`,
+    },
+    treeActionBtn: {
+        padding: 4,
+        borderRadius: 4,
+        backgroundColor: `${AppColors_1.AppColors.sky500}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.sky500}28`,
+    },
     fileSizeKb: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 12,
@@ -2617,10 +2737,13 @@ const bundleStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.amber800Warm,
     },
     adviceBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
         paddingHorizontal: 8,
-        paddingVertical: 4,
+        paddingVertical: 5,
         borderRadius: 6,
-        marginTop: 2,
+        marginTop: 4,
+        gap: 6,
     },
     adviceWarning: {
         backgroundColor: AppColors_1.AppColors.amber100,
@@ -2636,6 +2759,7 @@ const bundleStyles = react_native_1.StyleSheet.create({
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 10.5,
         lineHeight: 14,
+        flex: 1,
     },
     impactBadge: {
         paddingHorizontal: 6,

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

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

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

@@ -146,9 +146,9 @@ const InspectorHeader = react_1.default.memo(() => {
                 flex: 1,
             }}>
                 <AppHeaderLogo_1.default size={46} customIcon={appIcon}/>
-                <react_native_1.View style={{ gap: 2, flex: 1 }}>
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                    <react_native_1.Text style={[styles_1.default.headerTitle]} numberOfLines={1}>
+                <react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'nowrap', minWidth: 0 }}>
+                    <react_native_1.Text style={[styles_1.default.headerTitle, { flexShrink: 1 }]} numberOfLines={1}>
                       {(0, helpers_1.getAppName)()}
                     </react_native_1.Text>
                     <react_native_1.View style={[
@@ -372,6 +372,20 @@ const InspectorHeader = react_1.default.memo(() => {
                     : '—'}
                       </react_native_1.Text>
                     </react_native_1.View>
+                    {selected.response != null && (<react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        borderRadius: 20,
+                        backgroundColor: `${AppColors_1.AppColors.white}29`,
+                    }}>
+                        <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.white} size={11}/>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          {(0, helpers_1.getSize)(selected.response)}
+                        </react_native_1.Text>
+                      </react_native_1.View>)}
                   </react_native_1.View>
                 </react_native_1.View>) : activeTab === 'analytics' && selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>

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

@@ -307,16 +307,18 @@ const LogDetail = react_1.default.memo(() => {
             : originFrame?.fileName || t('console.consoleLog')}
               </react_native_1.Text>
 
-              {originFrame?.fileName && (<react_native_1.View style={[
+              {originFrame?.fileName && (<react_native_1.Pressable onPress={() => (0, helpers_1.openInVSCode)(originFrame.rawFilePath ||
+                originFrame.fullPath ||
+                originFrame.fileName, originFrame.lineNumber, originFrame.columnNumber)} hitSlop={8} style={[
                 styles_1.default.metaChip,
                 {
-                    backgroundColor: `${AppColors_1.AppColors.brandPurple}12`,
-                    borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
+                    borderColor: `${AppColors_1.AppColors.brandPurple}40`,
                     paddingHorizontal: 7,
                     paddingVertical: 2,
                 },
             ]}>
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexWrap: 'wrap', flexShrink: 1 }}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flexShrink: 1 }}>
                     <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
                     <react_native_1.Text style={[
                 styles_1.default.metaChipText,
@@ -326,8 +328,9 @@ const LogDetail = react_1.default.memo(() => {
                       {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
                       {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
                     </react_native_1.Text>
+                    <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.brandPurple} size={9}/>
                   </react_native_1.View>
-                </react_native_1.View>)}
+                </react_native_1.Pressable>)}
             </react_native_1.View>
 
             {/* Enhanced metadata metrics row */}

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

@@ -56,6 +56,7 @@ const PerformanceTab_1 = __importDefault(require("./PerformanceTab"));
 const CrashTab_1 = __importDefault(require("./CrashTab"));
 const CrashDetail_1 = __importDefault(require("./CrashDetail"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
+const Toast_1 = __importDefault(require("../Toast"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
@@ -153,6 +154,9 @@ const MainScreen = () => {
                 ]}>
                   <SettingsPanel_1.default />
                 </react_native_1.View>)}
+
+              {/* Bottom floating toast notification */}
+              <Toast_1.default />
             </react_native_1.View>
           </react_native_1.View>
         </ErrorBoundary_1.default>)}

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

@@ -25,6 +25,26 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const NetworkDetail = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = (0, InspectorContext_1.useInspector)();
+    const handleOpenUrl = () => {
+        react_native_1.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: () => {
+                    react_native_1.Linking.canOpenURL(detailDisplayUrl)
+                        .then(supported => {
+                        if (supported) {
+                            react_native_1.Linking.openURL(detailDisplayUrl);
+                        }
+                        else {
+                            react_native_1.Linking.openURL(detailDisplayUrl).catch(() => { });
+                        }
+                    })
+                        .catch(() => { });
+                },
+            },
+        ]);
+    };
     if (!selected)
         return null;
     return (<react_native_1.View style={{ flex: 1 }}>
@@ -102,6 +122,47 @@ const NetworkDetail = react_1.default.memo(() => {
                       </react_native_1.Text>
                     </react_native_1.View>
 
+                    {/* Client Chip (AXIOS / FETCH / XHR) */}
+                    {selected.client && (<react_native_1.View style={[
+                        styles_1.default.chip,
+                        {
+                            backgroundColor: selected.client === 'axios'
+                                ? `${AppColors_1.AppColors.purple}14`
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? `${AppColors_1.AppColors.pink500}14`
+                                    : selected.client === 'xhr'
+                                        ? `${AppColors_1.AppColors.amber500}14`
+                                        : `${AppColors_1.AppColors.sky500}14`,
+                            borderColor: selected.client === 'axios'
+                                ? `${AppColors_1.AppColors.purple}30`
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? `${AppColors_1.AppColors.pink500}30`
+                                    : selected.client === 'xhr'
+                                        ? `${AppColors_1.AppColors.amber500}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: selected.client === 'axios'
+                                ? AppColors_1.AppColors.purple
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? AppColors_1.AppColors.pink500
+                                    : selected.client === 'xhr'
+                                        ? AppColors_1.AppColors.amber700
+                                        : AppColors_1.AppColors.sky600,
+                        },
+                    ]}>
+                          {selected.client.toUpperCase()}
+                        </react_native_1.Text>
+                      </react_native_1.View>)}
+
                     {/* Status Pill */}
                     {selected.status != null && (<react_native_1.View style={[
                         styles_1.default.chip,
@@ -191,7 +252,7 @@ const NetworkDetail = react_1.default.memo(() => {
                   </react_native_1.View>
 
                   <react_native_1.View style={styles_1.default.detailInfoRight}>
-                    <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                    <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
                       <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={14}/>
                     </TouchableScale_1.default>
                     <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
@@ -209,7 +270,7 @@ const NetworkDetail = react_1.default.memo(() => {
                     padding: 10,
                     marginTop: 8,
                     gap: 6,
-                }} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
+                }} onPress={handleOpenUrl}>
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -392,7 +453,7 @@ const NetworkDetail = react_1.default.memo(() => {
                 if (!reqExpanded && !showReqDiff)
                     setReqExpanded(true);
             }}/>
-                {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
+                {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer_1.default data={selected.request} search={detailSearch}/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
                     <react_native_1.Text style={[
                     styles_1.default.codeText,
                     { color: AppColors_1.AppColors.grayTextWeak },
@@ -411,26 +472,6 @@ const NetworkDetail = react_1.default.memo(() => {
                     <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
                   </react_native_1.Pressable>)}
               </react_native_1.View>
-              {selected.response != null && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 10,
-                    height: 34,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}30`,
-                    backgroundColor: `${AppColors_1.AppColors.purple}10`,
-                }}>
-                  <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.purple} size={12}/>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors_1.AppColors.purple,
-                }}>
-                    {(0, helpers_1.getSize)(selected.response)}
-                  </react_native_1.Text>
-                </react_native_1.View>)}
             </react_native_1.View>
 
             <react_native_1.View style={styles_1.default.sectionContainer}>
@@ -439,7 +480,7 @@ const NetworkDetail = react_1.default.memo(() => {
                 if (!resExpanded && !showResDiff)
                     setResExpanded(true);
             }}/>
-              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen wrap/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
+              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer_1.default data={selected.response} search={detailSearch} wrap/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
                   <react_native_1.Text style={[
                     styles_1.default.codeText,
                     { color: AppColors_1.AppColors.grayTextWeak },

package/dist/commonjs/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;