react-native-inapp-inspector 1.1.24 → 1.1.26

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

@@ -1,37 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const i18n_1 = require("../../i18n");
 const react_native_1 = require("react-native");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
 const InspectorContext_1 = require("./InspectorContext");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const SegmentedTabs_1 = __importDefault(require("../SegmentedTabs"));
@@ -111,70 +77,122 @@ const NetworkDetail = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 6,
+                    flexWrap: 'wrap',
+                    flex: 1,
                 }}>
+                    {/* Method Chip */}
                     <react_native_1.View style={[
                     styles_1.default.methodBadge,
                     {
                         backgroundColor: constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL,
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 7,
                     },
                 ]}>
                       <react_native_1.Text style={[
                     styles_1.default.methodBadgeText,
                     {
                         color: AppColors_1.AppColors.white,
+                        fontSize: 10.5,
                     },
                 ]}>
                         {selected.method}
                       </react_native_1.Text>
                     </react_native_1.View>
 
+                    {/* Status Pill */}
                     {selected.status != null && (<react_native_1.View style={[
                         styles_1.default.chip,
                         {
                             backgroundColor: selected.status === 0
-                                ? `${AppColors_1.AppColors.errorColor}15`
-                                : `${(0, helpers_1.getStatusColor)(selected.status)}15`,
+                                ? `${AppColors_1.AppColors.errorColor}18`
+                                : `${(0, helpers_1.getStatusColor)(selected.status)}18`,
                             borderColor: selected.status === 0
                                 ? `${AppColors_1.AppColors.errorColor}40`
                                 : `${(0, helpers_1.getStatusColor)(selected.status)}40`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
                         },
                     ]}>
-                        {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_svg_1.default width={6} height={6} viewBox="0 0 10 10" fill="none">
-                            <react_native_svg_1.Circle cx="5" cy="5" r="5" fill={(0, helpers_1.getStatusColor)(selected.status)}/>
-                          </react_native_svg_1.default>)}
+                        {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_1.View style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
+                            backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
+                        }}/>)}
                         <react_native_1.Text style={[
                         styles_1.default.chipText,
                         {
                             color: selected.status === 0
                                 ? AppColors_1.AppColors.errorColor
                                 : (0, helpers_1.getStatusColor)(selected.status),
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10.5,
                         },
                     ]}>
                           {selected.status === 0
                         ? 'Failed'
-                        : String(selected.status)}
+                        : `${selected.status} ${selected.status === 200 ? 'OK' : ''}`}
                         </react_native_1.Text>
                       </react_native_1.View>)}
 
+                    {/* Duration Pill */}
                     {selected.duration != null && (<react_native_1.View style={[
                         styles_1.default.chip,
                         {
-                            backgroundColor: `${AppColors_1.AppColors.purple}14`,
-                            borderColor: `${AppColors_1.AppColors.purple}2E`,
+                            backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
+                            borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
+                            gap: 4,
                         },
                     ]}>
+                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
                         <react_native_1.Text style={[
                         styles_1.default.chipText,
-                        { color: AppColors_1.AppColors.purple },
+                        {
+                            color: AppColors_1.AppColors.brandPurple,
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10.5,
+                        },
                     ]}>
                           {selected.duration}ms
                         </react_native_1.Text>
                       </react_native_1.View>)}
+
+                    {/* Size Pill */}
+                    {selected.response != null && (<react_native_1.View style={[
+                        styles_1.default.chip,
+                        {
+                            backgroundColor: `${AppColors_1.AppColors.sky600}14`,
+                            borderColor: `${AppColors_1.AppColors.sky600}30`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
+                            gap: 4,
+                        },
+                    ]}>
+                        <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.sky600} size={10}/>
+                        <react_native_1.Text style={[
+                        styles_1.default.chipText,
+                        {
+                            color: AppColors_1.AppColors.sky600,
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10.5,
+                        },
+                    ]}>
+                          {(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.detailInfoRight}>
-                    <TouchableScale_1.default style={styles_1.default.iconSquareBtn} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
-                      <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                    <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} 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"/>
                     <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
@@ -182,67 +200,99 @@ const NetworkDetail = react_1.default.memo(() => {
                   </react_native_1.View>
                 </react_native_1.View>
 
+                {/* Full Live URL Analysis Card */}
                 <react_native_1.Pressable style={{
                     backgroundColor: AppColors_1.AppColors.grayBackground,
                     borderRadius: 10,
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.dividerColor,
                     padding: 10,
-                    marginTop: 6,
+                    marginTop: 8,
+                    gap: 6,
                 }} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                    marginBottom: 2,
                 }}>
-                    <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    flex: 1,
-                }} numberOfLines={1}>
-                      {schemeStr ? (<>
+                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      {schemeStr ? (<react_native_1.View style={{
+                        backgroundColor: schemeStr.startsWith('https')
+                            ? `${AppColors_1.AppColors.green600}18`
+                            : `${AppColors_1.AppColors.amber500}18`,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
+                        borderRadius: 4,
+                    }}>
                           <react_native_1.Text style={{
-                        color: AppColors_1.AppColors.slate400,
-                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 9,
+                        color: schemeStr.startsWith('https')
+                            ? AppColors_1.AppColors.green600
+                            : AppColors_1.AppColors.amber500,
                     }}>
-                            {schemeStr}
+                            {schemeStr.replace('://', '').toUpperCase()}
                           </react_native_1.Text>
-                          {hostStr}
-                        </>) : (hostStr || 'API Endpoint')}
-                    </react_native_1.Text>
-                    {queryStr ? (<react_native_1.View style={{
+                        </react_native_1.View>) : null}
+
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.4,
+                    textTransform: 'uppercase',
+                }}>
+                        ENDPOINT URL ↗
+                      </react_native_1.Text>
+                    </react_native_1.View>
+
+                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                      {queryStr ? (<react_native_1.View style={{
                         backgroundColor: `${AppColors_1.AppColors.purple}14`,
-                        paddingHorizontal: 5,
-                        paddingVertical: 1,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
                         borderRadius: 4,
                     }}>
-                        <react_native_1.Text style={{
+                          <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 8.5,
                         color: AppColors_1.AppColors.purple,
                     }}>
-                          {t('network.queryParams')}
+                            {t('network.queryParams')}
+                          </react_native_1.Text>
+                        </react_native_1.View>) : null}
+
+                      <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: `${AppColors_1.AppColors.sky600}14`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 4,
+                }}>
+                        <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={10}/>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors_1.AppColors.sky600,
+                }}>
+                          Open ↗
                         </react_native_1.Text>
-                      </react_native_1.View>) : null}
+                      </react_native_1.View>
+                    </react_native_1.View>
                   </react_native_1.View>
+
+                  {/* Full Clickable Hyperlink */}
                   <react_native_1.Text selectable={true} style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 12,
-                    color: AppColors_1.AppColors.primaryBlack,
-                    marginTop: 2,
-                }} numberOfLines={2}>
-                    {pathStr}
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 12.5,
+                    color: AppColors_1.AppColors.skyBlue,
+                    textDecorationLine: 'underline',
+                    lineHeight: 18,
+                }}>
+                    {detailDisplayUrl}
                   </react_native_1.Text>
-                  {queryStr ? (<react_native_1.Text selectable={true} style={{
-                        fontFamily: AppFonts_1.AppFonts.interRegular,
-                        fontSize: 10,
-                        color: AppColors_1.AppColors.grayTextWeak,
-                        marginTop: 4,
-                    }} numberOfLines={1}>
-                      {queryStr}
-                    </react_native_1.Text>) : null}
                 </react_native_1.Pressable>
               </>);
         })()}

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

@@ -47,6 +47,7 @@ const AppFonts_1 = require("../../styles/AppFonts");
 const i18n_1 = require("../../i18n");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
+const performanceTracker_1 = require("../../customHooks/performanceTracker");
 const PerformanceTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
@@ -72,10 +73,16 @@ const PerformanceTab = react_1.default.memo(() => {
     const [fpsHistory, setFpsHistory] = (0, react_1.useState)([
         60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
     ]);
-    // Performance Log Events
-    const [events, setEvents] = (0, react_1.useState)([]);
+    // Performance Log Events (Initialized with benchmark & diagnostics events)
+    const [events, setEvents] = (0, react_1.useState)(performanceTracker_1.INITIAL_EVENTS);
     const [filterCategory, setFilterCategory] = (0, react_1.useState)('ALL');
     const [search, setSearch] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        const unsub = (0, performanceTracker_1.subscribePerformanceEvents)(liveEvents => {
+            setEvents(liveEvents);
+        });
+        return unsub;
+    }, []);
     // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = (0, react_1.useRef)(Date.now());
     const rafIdRef = (0, react_1.useRef)(null);
@@ -119,9 +126,7 @@ const PerformanceTab = react_1.default.memo(() => {
                 // Trigger log if noticeable frame drop
                 if (measuredFps < 50) {
                     const durationStr = (1000 / measuredFps).toFixed(1);
-                    const newEvent = {
-                        id: `drop-${Date.now()}`,
-                        timestamp: Date.now(),
+                    (0, performanceTracker_1.logPerformanceEvent)({
                         type: 'fps_drop',
                         category: 'render',
                         fps: measuredFps,
@@ -135,8 +140,7 @@ const PerformanceTab = react_1.default.memo(() => {
                         },
                         advice: t('performance.liveFpsDipAdvice'),
                         severity: measuredFps < 30 ? 'critical' : 'warning',
-                    };
-                    setEvents(prev => [newEvent, ...prev.slice(0, 49)]);
+                    });
                 }
                 frameCount = 0;
                 maxLagInSecond = 0;
@@ -246,7 +250,7 @@ const PerformanceTab = react_1.default.memo(() => {
         };
     }, [avgFps, jsLagMs]);
     const clearEvents = () => {
-        setEvents([]);
+        (0, performanceTracker_1.clearPerformanceEvents)();
     };
     return (<react_native_1.View style={perfStyles.container}>
       {/* Search & Live Control Header */}
@@ -291,9 +295,9 @@ const PerformanceTab = react_1.default.memo(() => {
         </react_native_1.View>
       </react_native_1.View>
 
-      {/* Filter Tabs */}
+      {/* ─── Frozen Interactive Filter Tabs Under Search Component ─── */}
       <react_native_1.View style={perfStyles.filterRow}>
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6, paddingHorizontal: 12, paddingVertical: 4 }}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={perfStyles.filterScrollContent}>
           {[
             { key: 'ALL', label: t('performance.allLogs'), Icon: NetworkIcons_1.BoltIcon, count: events.length },
             {
@@ -690,6 +694,12 @@ const perfStyles = react_native_1.StyleSheet.create({
         backgroundColor: AppColors_1.AppColors.white,
         borderBottomWidth: 1,
         borderBottomColor: AppColors_1.AppColors.dividerColor,
+        paddingVertical: 5,
+    },
+    filterScrollContent: {
+        gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 2,
     },
     filterPill: {
         flexDirection: 'row',

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

@@ -50,9 +50,10 @@ const settingsStore_1 = require("../../helpers/settingsStore");
 const networkLogger_1 = require("../../customHooks/networkLogger");
 const consoleLogger_1 = require("../../customHooks/consoleLogger");
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
+const crashHandler_1 = require("../../customHooks/crashHandler");
 const NetworkIcons_1 = require("../NetworkIcons");
 const SettingsPanel = () => {
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, } = (0, InspectorContext_1.useInspector)();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = (0, InspectorContext_1.useInspector)();
     const isPersistent = (0, settingsStore_1.isPersistentStorageAvailable)();
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     if (settingsPage === 'main') {
@@ -63,6 +64,7 @@ const SettingsPanel = () => {
             { key: 'redux', label: 'Redux', icon: 'redux' },
             { key: 'bundle', label: 'Bundle', icon: 'bundle' },
             { key: 'performance', label: 'Performance', icon: 'performance' },
+            { key: 'crash', label: 'Crash', icon: 'crash' },
         ];
         return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
         {/* Settings Header with back button */}
@@ -273,6 +275,9 @@ const SettingsPanel = () => {
                         {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isLocked
                                 ? AppColors_1.AppColors.grayTextWeak
                                 : AppColors_1.AppColors.purple} size={11}/>)}
+                        {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
                       </react_native_1.View>
                       {/* Label + Required badge */}
                       <react_native_1.Text style={{
@@ -712,6 +717,7 @@ const SettingsPanel = () => {
                             {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                             {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                             {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                           </react_native_1.View>
                           <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
@@ -1430,6 +1436,89 @@ const SettingsPanel = () => {
         </react_native_1.View>
       </react_native_1.ScrollView>);
     }
+    else if (settingsPage === 'crash') {
+        title = 'Crash Settings';
+        icon = <NetworkIcons_1.CrashIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = `Total: ${crashRecords?.length || 0}`;
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Crash Logs',
+                description: 'How many crash records to preserve in history',
+                picker: {
+                    options: [25, 50, 100, 200],
+                    selectedValue: maxCrashLogs || 100,
+                    onSelect: val => setMaxCrashLogs(val),
+                },
+            })}
+          <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.ShieldAlertIcon color={AppColors_1.AppColors.greenColor} size={16}/>,
+                label: 'Global Crash Guard',
+                description: 'Intercepts native, JS, and render errors directly',
+                isLast: true,
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.greenColor}1F`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors_1.AppColors.greenColor,
+                    }}>
+                  PROTECTED
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+                marginTop: 12,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Crash History',
+                description: `${crashRecords?.length || 0} crash logs stored`,
+                isLast: true,
+                onPress: () => {
+                    (0, crashHandler_1.clearCrashRecords)();
+                    react_native_1.Alert.alert('Success', 'Crash logs cleared.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                  Clear
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+      </react_native_1.ScrollView>);
+    }
     return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
       <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
         <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>

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

@@ -11,7 +11,7 @@ const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NetworkIcons_1 = require("../NetworkIcons");
 const TabBar = react_1.default.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, lastReadApisCount, lastReadLogsCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
     return (<react_native_1.View style={styles_1.default.tabBarContainer}>
       <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
@@ -51,18 +51,28 @@ const TabBar = react_1.default.memo(() => {
                 count: 0,
                 icon: 'performance',
             },
+            {
+                key: 'crash',
+                label: 'Crash',
+                count: crashRecords?.length || 0,
+                icon: 'crash',
+            },
         ]
             .filter(tab => tabVisibility?.[tab.key])
             .map(tab => {
             const isActive = activeTab === tab.key;
             const iconColor = isActive
                 ? AppColors_1.AppColors.white
-                : AppColors_1.AppColors.grayText;
+                : tab.key === 'crash' && tab.count > 0
+                    ? AppColors_1.AppColors.errorColor
+                    : AppColors_1.AppColors.grayText;
             const countLabel = tab.count > 9 ? '9+' : String(tab.count);
             const hasUnreadApis = activeTab !== 'apis' &&
                 logs.length > lastReadApisCount;
             const hasUnreadLogs = activeTab !== 'logs' &&
                 consoleLogs.length > lastReadLogsCount;
+            const hasUnreadCrashes = activeTab !== 'crash' &&
+                (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
             return (<TouchableScale_1.default key={tab.key} onPress={() => switchActiveTab(tab.key)} style={[
                     styles_1.default.contentTabButton,
                     isActive && styles_1.default.contentTabButtonActive,
@@ -78,6 +88,7 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
                     isActive &&
@@ -87,7 +98,8 @@ const TabBar = react_1.default.memo(() => {
                     {tab.count > 0 ? `(${countLabel})` : ''}
                   </react_native_1.Text>
                   {((tab.key === 'apis' && hasUnreadApis) ||
-                    (tab.key === 'logs' && hasUnreadLogs)) && (<react_native_1.Animated.View style={{
+                    (tab.key === 'logs' && hasUnreadLogs) ||
+                    (tab.key === 'crash' && hasUnreadCrashes)) && (<react_native_1.Animated.View style={{
                         width: 6,
                         height: 6,
                         borderRadius: 3,

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -62,6 +62,7 @@ export declare const ForwardChevronIcon: ({ color, size, }: any) => React.JSX.El
 export declare const BundleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const LiveStateIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TimelineIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RefreshCcwIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const StorageIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MetadataIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ReduxIcon: ({ color, size, }: any) => React.JSX.Element;
@@ -78,3 +79,27 @@ export declare const BrainIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const TextAaIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const CartIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const MoneyIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const ExternalLinkIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PackageBoxIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const GitHubIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const LinkChainIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AppleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AndroidIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CodeBracketsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const FlameIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const HourglassIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PinIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RepeatIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TargetGoalIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const UserCheckIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CrashIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ShieldAlertIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const SkullIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ChipIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const LayoutIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const StackTraceIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DiagnosticsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TrailIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RawJsonIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AppFramesIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AllFramesIcon: ({ color, size, }: any) => React.JSX.Element;