react-native-inapp-inspector 1.1.24 → 1.1.26

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

@@ -73,6 +73,7 @@ const LogDetail = react_1.default.memo(() => {
     const jsonContent = (0, react_1.useMemo)(() => (selectedLog ? (0, helpers_1.getJsonContent)(selectedLog.message) : null), [selectedLog]);
     const [stackViewMode, setStackViewMode] = (0, react_1.useState)('structured');
     const [stackSource, setStackSource] = (0, react_1.useState)('caller');
+    const [stackFilter, setStackFilter] = (0, react_1.useState)('app');
     const activeStackString = (0, react_1.useMemo)(() => {
         if (!selectedLog)
             return '';
@@ -81,21 +82,6 @@ const LogDetail = react_1.default.memo(() => {
         }
         return selectedLog.stack || selectedLog.caller || '';
     }, [selectedLog, stackSource]);
-    const originFrame = (0, react_1.useMemo)(() => {
-        if (!selectedLog)
-            return null;
-        if (selectedLog.caller && selectedLog.caller !== 'Unknown') {
-            return (0, helpers_1.parseStackLine)(selectedLog.caller, true);
-        }
-        if (selectedLog.stack) {
-            const firstLine = selectedLog.stack
-                .split('\n')
-                .find(l => l.trim().length > 0);
-            if (firstLine)
-                return (0, helpers_1.parseStackLine)(firstLine, true);
-        }
-        return null;
-    }, [selectedLog]);
     const parsedStackFrames = (0, react_1.useMemo)(() => {
         if (!activeStackString)
             return [];
@@ -105,6 +91,29 @@ const LogDetail = react_1.default.memo(() => {
             .filter(l => l.length > 0)
             .map((line, idx) => (0, helpers_1.parseStackLine)(line, idx === 0));
     }, [activeStackString]);
+    const appStackFrames = (0, react_1.useMemo)(() => {
+        return parsedStackFrames.filter(f => f.frameType === 'app' || !f.isRuntimeNoise);
+    }, [parsedStackFrames]);
+    const displayedFrames = (0, react_1.useMemo)(() => {
+        if (stackFilter === 'app' && appStackFrames.length > 0) {
+            return appStackFrames;
+        }
+        return parsedStackFrames;
+    }, [stackFilter, appStackFrames, parsedStackFrames]);
+    const originFrame = (0, react_1.useMemo)(() => {
+        if (!selectedLog)
+            return null;
+        if (appStackFrames.length > 0) {
+            return appStackFrames[0];
+        }
+        if (selectedLog.caller && selectedLog.caller !== 'Unknown') {
+            return (0, helpers_1.parseStackLine)(selectedLog.caller, true);
+        }
+        if (parsedStackFrames.length > 0) {
+            return parsedStackFrames[0];
+        }
+        return null;
+    }, [selectedLog, appStackFrames, parsedStackFrames]);
     if (!selectedLog)
         return null;
     const isDark = AppColors_1.AppColors.primaryLight !== AppColors_1.AppColors.white;
@@ -138,14 +147,14 @@ const LogDetail = react_1.default.memo(() => {
     const subTabs = [
         {
             key: 'output',
-            label: 'Output',
+            label: t('console.tabOutput'),
             icon: (isActive) => (<NetworkIcons_1.TerminalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
         },
         ...(hasMultipleArgs
             ? [
                 {
                     key: 'arguments',
-                    label: `Args (${selectedLog.rawArgs?.length})`,
+                    label: t('console.tabArgs', { count: selectedLog.rawArgs?.length }),
                     icon: (isActive) => (<NetworkIcons_1.RequestIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
                 },
             ]
@@ -154,14 +163,14 @@ const LogDetail = react_1.default.memo(() => {
             ? [
                 {
                     key: 'stack',
-                    label: 'Stack Trace',
+                    label: t('console.tabStack'),
                     icon: (isActive) => (<NetworkIcons_1.LayersIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
                 },
             ]
             : []),
         {
             key: 'metadata',
-            label: 'Metadata',
+            label: t('console.tabMetadata'),
             icon: (isActive) => (<NetworkIcons_1.InfoCircleIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
         },
     ];
@@ -291,7 +300,8 @@ const LogDetail = react_1.default.memo(() => {
             fontSize: 13,
             color: AppColors_1.AppColors.primaryBlack,
             lineHeight: 18,
-        }} numberOfLines={1}>
+            flexShrink: 1,
+        }}>
                 {originFrame?.functionName && originFrame.functionName !== '<anonymous>'
             ? `${originFrame.functionName}()`
             : originFrame?.fileName || t('console.consoleLog')}
@@ -306,11 +316,11 @@ const LogDetail = react_1.default.memo(() => {
                     paddingVertical: 2,
                 },
             ]}>
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexWrap: 'wrap', flexShrink: 1 }}>
                     <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
                     <react_native_1.Text style={[
                 styles_1.default.metaChipText,
-                { color: AppColors_1.AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts_1.AppFonts.interBold },
+                { color: AppColors_1.AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts_1.AppFonts.interBold, flexShrink: 1 },
             ]}>
                       {originFrame.fileName}
                       {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
@@ -613,10 +623,12 @@ const LogDetail = react_1.default.memo(() => {
                     ? AppColors_1.AppColors.primaryLight
                     : AppColors_1.AppColors.grayBackground,
             }}>
+              {/* Header Top Row: Title, Mode switcher & Full copy */}
               <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
+                gap: 8,
             }}>
                 <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
@@ -625,156 +637,257 @@ const LogDetail = react_1.default.memo(() => {
                 textTransform: 'uppercase',
                 letterSpacing: 0.4,
             }}>
-                  {stackSource === 'error' ? 'Error Exception Stack' : 'Call Stack'} ({parsedStackFrames.length} frames)
+                  {stackSource === 'error'
+                ? t('console.errorStack', { count: parsedStackFrames.length })
+                : t('console.callStack', { count: parsedStackFrames.length })}
                 </react_native_1.Text>
-                <CopyButton_1.default value={activeStackString} label="Full Stack Trace"/>
+
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                backgroundColor: isDark ? AppColors_1.AppColors.primaryLight : AppColors_1.AppColors.white,
+                borderRadius: 7,
+                padding: 2,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            }}>
+                    <react_native_1.Pressable onPress={() => setStackViewMode('structured')} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                paddingVertical: 3.5,
+                paddingHorizontal: 7,
+                borderRadius: 5,
+                backgroundColor: stackViewMode === 'structured'
+                    ? AppColors_1.AppColors.brandPurple
+                    : 'transparent',
+            }}>
+                      <NetworkIcons_1.LayersIcon color={stackViewMode === 'structured'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.grayTextWeak} size={11}/>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10,
+                color: stackViewMode === 'structured'
+                    ? AppColors_1.AppColors.white
+                    : AppColors_1.AppColors.grayTextStrong,
+            }}>
+                        {t('console.cardsView')}
+                      </react_native_1.Text>
+                    </react_native_1.Pressable>
+
+                    <react_native_1.Pressable onPress={() => setStackViewMode('raw')} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                paddingVertical: 3.5,
+                paddingHorizontal: 7,
+                borderRadius: 5,
+                backgroundColor: stackViewMode === 'raw'
+                    ? AppColors_1.AppColors.brandPurple
+                    : 'transparent',
+            }}>
+                      <NetworkIcons_1.RawIcon color={stackViewMode === 'raw'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.grayTextWeak} size={11}/>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10,
+                color: stackViewMode === 'raw'
+                    ? AppColors_1.AppColors.white
+                    : AppColors_1.AppColors.grayTextStrong,
+            }}>
+                        {t('console.rawTraceView')}
+                      </react_native_1.Text>
+                    </react_native_1.Pressable>
+                  </react_native_1.View>
+
+                  <CopyButton_1.default value={activeStackString} label={t('console.fullStackTrace')}/>
+                </react_native_1.View>
               </react_native_1.View>
 
               {/* Source Switcher if Error Stack exists */}
               {selectedLog.errorStack && (<SegmentedTabs_1.default tabs={[
                     {
                         key: 'caller',
-                        label: 'Call Origin Stack',
+                        label: t('console.callOriginStack'),
                     },
                     {
                         key: 'error',
-                        label: 'Error Thrown Stack',
+                        label: t('console.errorThrownStack'),
                     },
                 ]} activeKey={stackSource} onChange={key => setStackSource(key)}/>)}
 
-              {/* Structured vs Raw View Mode Tabs */}
+              {/* Scope Filter Tabs (Full Width) */}
               <SegmentedTabs_1.default tabs={[
                 {
-                    key: 'structured',
-                    label: 'Structured Cards',
-                    icon: (isActive) => (<NetworkIcons_1.LayersIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                    key: 'app',
+                    label: t('console.appCodeScope', { count: appStackFrames.length }),
                 },
                 {
-                    key: 'raw',
-                    label: 'Raw Trace',
-                    icon: (isActive) => (<NetworkIcons_1.RawIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                    key: 'all',
+                    label: t('console.allFramesScope', { count: parsedStackFrames.length }),
                 },
-            ]} activeKey={stackViewMode} onChange={key => setStackViewMode(key)}/>
+            ]} activeKey={stackFilter} onChange={key => setStackFilter(key)}/>
             </react_native_1.View>
 
             {/* Stack Content: Structured Cards or Raw Full Trace */}
             {stackViewMode === 'structured' ? (<react_native_1.View style={{ padding: 12, gap: 10 }}>
-                {parsedStackFrames.length > 0 ? (parsedStackFrames.map((frame, frameIdx) => {
+                {displayedFrames.length > 0 ? (displayedFrames.map((frame, frameIdx) => {
                     const isTopFrame = frameIdx === 0;
+                    const frameBadgeBg = frame.frameType === 'app'
+                        ? `${AppColors_1.AppColors.brandPurple}15`
+                        : frame.frameType === 'dependency'
+                            ? `${AppColors_1.AppColors.amber500}18`
+                            : frame.frameType === 'native'
+                                ? `${AppColors_1.AppColors.sky500}18`
+                                : AppColors_1.AppColors.grayBorderSecondary;
+                    const frameBadgeText = frame.frameType === 'app'
+                        ? AppColors_1.AppColors.brandPurple
+                        : frame.frameType === 'dependency'
+                            ? AppColors_1.AppColors.amber700
+                            : frame.frameType === 'native'
+                                ? AppColors_1.AppColors.sky500
+                                : AppColors_1.AppColors.grayTextWeak;
                     return (<react_native_1.View key={frameIdx} style={{
                             backgroundColor: isTopFrame
                                 ? `${AppColors_1.AppColors.brandPurple}0A`
                                 : AppColors_1.AppColors.primaryLight,
-                            borderRadius: 8,
+                            borderRadius: 10,
                             borderWidth: 1,
                             borderColor: isTopFrame
-                                ? `${AppColors_1.AppColors.brandPurple}30`
+                                ? `${AppColors_1.AppColors.brandPurple}35`
                                 : AppColors_1.AppColors.dividerColor,
-                            padding: 10,
-                            gap: 5,
+                            padding: 11,
+                            gap: 6,
                         }}>
-                        {/* Frame Header Row */}
+                        {/* Frame Top Row: Origin / Category, File, Line badge, Copy */}
                         <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             justifyContent: 'space-between',
                             gap: 6,
                         }}>
-                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1 }}>
-                            <react_native_1.View style={{
-                            backgroundColor: isTopFrame
-                                ? AppColors_1.AppColors.brandPurple
-                                : AppColors_1.AppColors.grayBorderSecondary,
-                            borderRadius: 4,
-                            paddingHorizontal: 5,
-                            paddingVertical: 1.5,
-                        }}>
-                              <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 9,
-                            color: isTopFrame
-                                ? AppColors_1.AppColors.white
-                                : AppColors_1.AppColors.grayTextStrong,
-                        }}>
-                                #{frameIdx + 1}
-                                {isTopFrame ? ' ORIGIN' : ''}
-                              </react_native_1.Text>
-                            </react_native_1.View>
-
-                            <HighlightText_1.default text={frame.functionName !== '<anonymous>' ? `${frame.functionName}()` : '<anonymous>'} search={detailSearch} style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 12,
-                            color: isTopFrame
-                                ? AppColors_1.AppColors.primaryBlack
-                                : AppColors_1.AppColors.grayTextStrong,
-                        }} highlightStyle={{
-                            backgroundColor: AppColors_1.AppColors.yellowHighlight,
-                            color: AppColors_1.AppColors.primaryBlack,
-                        }}/>
-                          </react_native_1.View>
-
-                          {frame.lineNumber && (<react_native_1.View style={{
-                                backgroundColor: `${AppColors_1.AppColors.teal600}15`,
-                                borderColor: `${AppColors_1.AppColors.teal600}30`,
-                                borderWidth: 1,
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, flexWrap: 'wrap' }}>
+                            {isTopFrame && (<react_native_1.View style={{
+                                backgroundColor: AppColors_1.AppColors.brandPurple,
                                 borderRadius: 4,
-                                paddingHorizontal: 6,
+                                paddingHorizontal: 5,
                                 paddingVertical: 1.5,
                             }}>
-                              <react_native_1.Text style={{
+                                <react_native_1.Text style={{
                                 fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 9.5,
-                                color: AppColors_1.AppColors.teal600,
+                                fontSize: 8.5,
+                                color: AppColors_1.AppColors.white,
                             }}>
-                                L{frame.lineNumber}
-                                {frame.columnNumber ? `:C${frame.columnNumber}` : ''}
-                              </react_native_1.Text>
-                            </react_native_1.View>)}
-                        </react_native_1.View>
+                                  {t('console.originBadge')}
+                                </react_native_1.Text>
+                              </react_native_1.View>)}
 
-                        {/* File Path Row */}
-                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                          {frame.fileExt && frame.fileExt !== 'other' && (<react_native_1.View style={{
+                            {frame.fileExt && frame.fileExt !== 'other' && (<react_native_1.View style={{
                                 backgroundColor: frame.fileExt === 'tsx' || frame.fileExt === 'ts'
                                     ? `${AppColors_1.AppColors.brandPurple}18`
                                     : `${AppColors_1.AppColors.teal600}18`,
-                                borderRadius: 3,
-                                paddingHorizontal: 4,
-                                paddingVertical: 1,
+                                borderRadius: 4,
+                                paddingHorizontal: 4.5,
+                                paddingVertical: 1.5,
                             }}>
-                              <react_native_1.Text style={{
+                                <react_native_1.Text style={{
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                                 fontSize: 8.5,
                                 color: frame.fileExt === 'tsx' || frame.fileExt === 'ts'
                                     ? AppColors_1.AppColors.brandPurple
                                     : AppColors_1.AppColors.teal600,
                             }}>
-                                {frame.fileExt.toUpperCase()}
-                              </react_native_1.Text>
-                            </react_native_1.View>)}
-                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
-                          <NetworkIcons_1.DocIcon color={isTopFrame ? AppColors_1.AppColors.brandPurple : AppColors_1.AppColors.grayTextWeak} size={10}/>
-                          <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interMedium,
-                            fontSize: 10.5,
+                                  {frame.fileExt.toUpperCase()}
+                                </react_native_1.Text>
+                              </react_native_1.View>)}
+
+                            <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11.5,
                             color: isTopFrame
                                 ? AppColors_1.AppColors.brandPurple
-                                : AppColors_1.AppColors.grayTextWeak,
+                                : AppColors_1.AppColors.primaryBlack,
                         }}>
-                            {frame.fileName}
-                          </react_native_1.Text>
+                              {frame.fileName}
+                            </react_native_1.Text>
+                          </react_native_1.View>
+
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                            {frame.lineNumber && (<react_native_1.View style={{
+                                backgroundColor: `${AppColors_1.AppColors.teal600}15`,
+                                borderColor: `${AppColors_1.AppColors.teal600}30`,
+                                borderWidth: 1,
+                                borderRadius: 4,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
+                            }}>
+                                <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 9.5,
+                                color: AppColors_1.AppColors.teal600,
+                            }}>
+                                  L{frame.lineNumber}{frame.columnNumber ? `:C${frame.columnNumber}` : ''}
+                                </react_native_1.Text>
+                              </react_native_1.View>)}
+                            <CopyButton_1.default value={frame.copyableLocation} label={frame.fileName}/>
+                          </react_native_1.View>
                         </react_native_1.View>
+
+                        {/* Middle Row: Function / Symbol Invocation */}
+                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                          <HighlightText_1.default text={frame.functionName !== '<anonymous>' ? `${frame.functionName}()` : '<anonymous>'} search={detailSearch} style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 12.5,
+                            color: AppColors_1.AppColors.primaryBlack,
+                        }} highlightStyle={{
+                            backgroundColor: AppColors_1.AppColors.yellowHighlight,
+                            color: AppColors_1.AppColors.primaryBlack,
+                        }}/>
                         </react_native_1.View>
 
-                        {/* Full path */}
-                        {frame.fullPath && frame.fullPath !== frame.fileName && (<react_native_1.Text selectable style={{
-                                fontFamily: AppFonts_1.AppFonts.interRegular,
-                                fontSize: 9.5,
-                                color: AppColors_1.AppColors.grayTextWeak,
-                                lineHeight: 14,
-                            }} numberOfLines={2}>
-                            {frame.fullPath}
-                          </react_native_1.Text>)}
+                        {/* Bottom Row: Clean Relative Path & Execution Scope Tag */}
+                        <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            backgroundColor: isDark ? `${AppColors_1.AppColors.primaryBlack}25` : AppColors_1.AppColors.grayBackground,
+                            borderRadius: 6,
+                            paddingHorizontal: 8,
+                            paddingVertical: 4.5,
+                            gap: 6,
+                        }}>
+                          <react_native_1.Text selectable style={{
+                            fontFamily: AppFonts_1.AppFonts.interRegular,
+                            fontSize: 9.5,
+                            color: AppColors_1.AppColors.grayTextStrong,
+                            flex: 1,
+                        }} numberOfLines={1}>
+                            📂 {frame.fullPath}
+                          </react_native_1.Text>
+
+                          <react_native_1.View style={{
+                            backgroundColor: frameBadgeBg,
+                            borderRadius: 4,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                        }}>
+                            <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 8.5,
+                            color: frameBadgeText,
+                        }}>
+                              {frame.frameType === 'app'
+                            ? t('console.appCodeBadge')
+                            : frame.frameType === 'dependency'
+                                ? t('console.dependencyBadge')
+                                : frame.frameType === 'native'
+                                    ? t('console.nativeBadge')
+                                    : t('console.hermesVmBadge')}
+                            </react_native_1.Text>
+                          </react_native_1.View>
+                        </react_native_1.View>
                       </react_native_1.View>);
                 })) : (<react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interRegular,
@@ -783,7 +896,7 @@ const LogDetail = react_1.default.memo(() => {
                         textAlign: 'center',
                         paddingVertical: 16,
                     }}>
-                    No call stack trace available for this log.
+                    {t('console.noStackAvailable')}
                   </react_native_1.Text>)}
               </react_native_1.View>) : (
             /* Raw Full Trace Monospace Block */

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

@@ -53,12 +53,14 @@ const ReduxTab_1 = __importDefault(require("./ReduxTab"));
 const ReduxDetail_1 = __importDefault(require("./ReduxDetail"));
 const BundleTab_1 = __importDefault(require("./BundleTab"));
 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 styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
     const [mountedTabs, setMountedTabs] = (0, react_1.useState)({
         [activeTab]: true,
@@ -73,9 +75,10 @@ const MainScreen = () => {
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'crash' && selectedCrash != null);
     return (<>
-      {isEnabled && <FabLauncher_1.default />}
+      {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') && isEnabled && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent>
       {visible && (<ErrorBoundary_1.default onClose={closeModal}>
           <react_native_1.View style={styles_1.default.modalBackdrop}>
@@ -91,7 +94,7 @@ const MainScreen = () => {
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
               {!isDetailActive && settingsPage === null ? (<TabBar_1.default />) : null}
 
-              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : null) : (<>
+              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail_1.default />) : null) : (<>
                     <react_native_1.View style={{
                     flex: 1,
                     display: activeTab === 'apis' ? 'flex' : 'none',
@@ -128,6 +131,12 @@ const MainScreen = () => {
                 }}>
                       {mountedTabs.performance && <PerformanceTab_1.default />}
                     </react_native_1.View>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'crash' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.crash && <CrashTab_1.default />}
+                    </react_native_1.View>
                   </>)) : (<react_native_1.View style={styles_1.default.empty}>
                   <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
                   <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>