react-native-inapp-inspector 1.1.23 → 1.1.25

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

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+export { ModalAnimationType, SettingsPage, SettingsSubTab, LogFilter, } from '../../types';
 export const InspectorContext = createContext(null);
 export const useInspector = () => {
     const ctx = useContext(InspectorContext);

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

@@ -10,7 +10,7 @@ import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, getBundleIdentifier, formatTime, getSize } from '../../helpers';
-import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronIcon, ClockIcon, } from '../NetworkIcons';
+import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronIcon, ClockIcon, AppleIcon, AndroidIcon, PackageBoxIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
     const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, } = useInspector();
     const envConfig = useMemo(() => {
@@ -194,10 +194,14 @@ const InspectorHeader = React.memo(() => {
                     borderColor: `${AppColors.white}2E`,
                 }}>
                         <View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3.5,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2.5,
                     backgroundColor: `${AppColors.white}47`,
                 }}>
+                          {Platform.OS === 'ios' ? (<AppleIcon color={AppColors.white} size={10}/>) : (<AndroidIcon color={AppColors.white} size={10}/>)}
                           <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 9,
@@ -209,7 +213,7 @@ const InspectorHeader = React.memo(() => {
                         </View>
                         <View style={{
                     paddingHorizontal: 5,
-                    paddingVertical: 2,
+                    paddingVertical: 2.5,
                     backgroundColor: `${AppColors.white}1F`,
                 }}>
                           <Text style={{
@@ -230,10 +234,14 @@ const InspectorHeader = React.memo(() => {
                     borderColor: `${AppColors.white}2E`,
                 }}>
                         <View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3.5,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2.5,
                     backgroundColor: `${AppColors.white}47`,
                 }}>
+                          <PackageBoxIcon color={AppColors.white} size={10}/>
                           <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 9,

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

@@ -35,6 +35,7 @@ const LogDetail = React.memo(() => {
     const jsonContent = useMemo(() => (selectedLog ? getJsonContent(selectedLog.message) : null), [selectedLog]);
     const [stackViewMode, setStackViewMode] = useState('structured');
     const [stackSource, setStackSource] = useState('caller');
+    const [stackFilter, setStackFilter] = useState('app');
     const activeStackString = useMemo(() => {
         if (!selectedLog)
             return '';
@@ -43,21 +44,6 @@ const LogDetail = React.memo(() => {
         }
         return selectedLog.stack || selectedLog.caller || '';
     }, [selectedLog, stackSource]);
-    const originFrame = useMemo(() => {
-        if (!selectedLog)
-            return null;
-        if (selectedLog.caller && selectedLog.caller !== 'Unknown') {
-            return parseStackLine(selectedLog.caller, true);
-        }
-        if (selectedLog.stack) {
-            const firstLine = selectedLog.stack
-                .split('\n')
-                .find(l => l.trim().length > 0);
-            if (firstLine)
-                return parseStackLine(firstLine, true);
-        }
-        return null;
-    }, [selectedLog]);
     const parsedStackFrames = useMemo(() => {
         if (!activeStackString)
             return [];
@@ -67,6 +53,29 @@ const LogDetail = React.memo(() => {
             .filter(l => l.length > 0)
             .map((line, idx) => parseStackLine(line, idx === 0));
     }, [activeStackString]);
+    const appStackFrames = useMemo(() => {
+        return parsedStackFrames.filter(f => f.frameType === 'app' || !f.isRuntimeNoise);
+    }, [parsedStackFrames]);
+    const displayedFrames = useMemo(() => {
+        if (stackFilter === 'app' && appStackFrames.length > 0) {
+            return appStackFrames;
+        }
+        return parsedStackFrames;
+    }, [stackFilter, appStackFrames, parsedStackFrames]);
+    const originFrame = useMemo(() => {
+        if (!selectedLog)
+            return null;
+        if (appStackFrames.length > 0) {
+            return appStackFrames[0];
+        }
+        if (selectedLog.caller && selectedLog.caller !== 'Unknown') {
+            return parseStackLine(selectedLog.caller, true);
+        }
+        if (parsedStackFrames.length > 0) {
+            return parsedStackFrames[0];
+        }
+        return null;
+    }, [selectedLog, appStackFrames, parsedStackFrames]);
     if (!selectedLog)
         return null;
     const isDark = AppColors.primaryLight !== AppColors.white;
@@ -100,14 +109,14 @@ const LogDetail = React.memo(() => {
     const subTabs = [
         {
             key: 'output',
-            label: 'Output',
+            label: t('console.tabOutput'),
             icon: (isActive) => (<TerminalIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
         },
         ...(hasMultipleArgs
             ? [
                 {
                     key: 'arguments',
-                    label: `Args (${selectedLog.rawArgs?.length})`,
+                    label: t('console.tabArgs', { count: selectedLog.rawArgs?.length }),
                     icon: (isActive) => (<RequestIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
                 },
             ]
@@ -116,14 +125,14 @@ const LogDetail = React.memo(() => {
             ? [
                 {
                     key: 'stack',
-                    label: 'Stack Trace',
+                    label: t('console.tabStack'),
                     icon: (isActive) => (<LayersIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
                 },
             ]
             : []),
         {
             key: 'metadata',
-            label: 'Metadata',
+            label: t('console.tabMetadata'),
             icon: (isActive) => (<InfoCircleIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
         },
     ];
@@ -575,10 +584,12 @@ const LogDetail = React.memo(() => {
                     ? AppColors.primaryLight
                     : AppColors.grayBackground,
             }}>
+              {/* Header Top Row: Title, Mode switcher & Full copy */}
               <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
+                gap: 8,
             }}>
                 <Text style={{
                 fontFamily: AppFonts.interBold,
@@ -587,156 +598,257 @@ const LogDetail = React.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 })}
                 </Text>
-                <CopyButton value={activeStackString} label="Full Stack Trace"/>
+
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                  <View style={{
+                flexDirection: 'row',
+                backgroundColor: isDark ? AppColors.primaryLight : AppColors.white,
+                borderRadius: 7,
+                padding: 2,
+                borderWidth: 1,
+                borderColor: AppColors.dividerColor,
+            }}>
+                    <Pressable onPress={() => setStackViewMode('structured')} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                paddingVertical: 3.5,
+                paddingHorizontal: 7,
+                borderRadius: 5,
+                backgroundColor: stackViewMode === 'structured'
+                    ? AppColors.brandPurple
+                    : 'transparent',
+            }}>
+                      <LayersIcon color={stackViewMode === 'structured'
+                ? AppColors.white
+                : AppColors.grayTextWeak} size={11}/>
+                      <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10,
+                color: stackViewMode === 'structured'
+                    ? AppColors.white
+                    : AppColors.grayTextStrong,
+            }}>
+                        {t('console.cardsView')}
+                      </Text>
+                    </Pressable>
+
+                    <Pressable onPress={() => setStackViewMode('raw')} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                paddingVertical: 3.5,
+                paddingHorizontal: 7,
+                borderRadius: 5,
+                backgroundColor: stackViewMode === 'raw'
+                    ? AppColors.brandPurple
+                    : 'transparent',
+            }}>
+                      <RawIcon color={stackViewMode === 'raw'
+                ? AppColors.white
+                : AppColors.grayTextWeak} size={11}/>
+                      <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10,
+                color: stackViewMode === 'raw'
+                    ? AppColors.white
+                    : AppColors.grayTextStrong,
+            }}>
+                        {t('console.rawTraceView')}
+                      </Text>
+                    </Pressable>
+                  </View>
+
+                  <CopyButton value={activeStackString} label={t('console.fullStackTrace')}/>
+                </View>
               </View>
 
               {/* Source Switcher if Error Stack exists */}
               {selectedLog.errorStack && (<SegmentedTabs 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 tabs={[
                 {
-                    key: 'structured',
-                    label: 'Structured Cards',
-                    icon: (isActive) => (<LayersIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
+                    key: 'app',
+                    label: t('console.appCodeScope', { count: appStackFrames.length }),
                 },
                 {
-                    key: 'raw',
-                    label: 'Raw Trace',
-                    icon: (isActive) => (<RawIcon color={isActive ? AppColors.white : 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)}/>
             </View>
 
             {/* Stack Content: Structured Cards or Raw Full Trace */}
             {stackViewMode === 'structured' ? (<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.brandPurple}15`
+                        : frame.frameType === 'dependency'
+                            ? `${AppColors.amber500}18`
+                            : frame.frameType === 'native'
+                                ? `${AppColors.sky500}18`
+                                : AppColors.grayBorderSecondary;
+                    const frameBadgeText = frame.frameType === 'app'
+                        ? AppColors.brandPurple
+                        : frame.frameType === 'dependency'
+                            ? AppColors.amber700
+                            : frame.frameType === 'native'
+                                ? AppColors.sky500
+                                : AppColors.grayTextWeak;
                     return (<View key={frameIdx} style={{
                             backgroundColor: isTopFrame
                                 ? `${AppColors.brandPurple}0A`
                                 : AppColors.primaryLight,
-                            borderRadius: 8,
+                            borderRadius: 10,
                             borderWidth: 1,
                             borderColor: isTopFrame
-                                ? `${AppColors.brandPurple}30`
+                                ? `${AppColors.brandPurple}35`
                                 : AppColors.dividerColor,
-                            padding: 10,
-                            gap: 5,
+                            padding: 11,
+                            gap: 6,
                         }}>
-                        {/* Frame Header Row */}
+                        {/* Frame Top Row: Origin / Category, File, Line badge, Copy */}
                         <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             justifyContent: 'space-between',
                             gap: 6,
                         }}>
-                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1 }}>
-                            <View style={{
-                            backgroundColor: isTopFrame
-                                ? AppColors.brandPurple
-                                : AppColors.grayBorderSecondary,
-                            borderRadius: 4,
-                            paddingHorizontal: 5,
-                            paddingVertical: 1.5,
-                        }}>
-                              <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 9,
-                            color: isTopFrame
-                                ? AppColors.white
-                                : AppColors.grayTextStrong,
-                        }}>
-                                #{frameIdx + 1}
-                                {isTopFrame ? ' ORIGIN' : ''}
-                              </Text>
-                            </View>
-
-                            <HighlightText text={frame.functionName !== '<anonymous>' ? `${frame.functionName}()` : '<anonymous>'} search={detailSearch} style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 12,
-                            color: isTopFrame
-                                ? AppColors.primaryBlack
-                                : AppColors.grayTextStrong,
-                        }} highlightStyle={{
-                            backgroundColor: AppColors.yellowHighlight,
-                            color: AppColors.primaryBlack,
-                        }}/>
-                          </View>
-
-                          {frame.lineNumber && (<View style={{
-                                backgroundColor: `${AppColors.teal600}15`,
-                                borderColor: `${AppColors.teal600}30`,
-                                borderWidth: 1,
+                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, flexWrap: 'wrap' }}>
+                            {isTopFrame && (<View style={{
+                                backgroundColor: AppColors.brandPurple,
                                 borderRadius: 4,
-                                paddingHorizontal: 6,
+                                paddingHorizontal: 5,
                                 paddingVertical: 1.5,
                             }}>
-                              <Text style={{
+                                <Text style={{
                                 fontFamily: AppFonts.interBold,
-                                fontSize: 9.5,
-                                color: AppColors.teal600,
+                                fontSize: 8.5,
+                                color: AppColors.white,
                             }}>
-                                L{frame.lineNumber}
-                                {frame.columnNumber ? `:C${frame.columnNumber}` : ''}
-                              </Text>
-                            </View>)}
-                        </View>
+                                  {t('console.originBadge')}
+                                </Text>
+                              </View>)}
 
-                        {/* File Path Row */}
-                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                          {frame.fileExt && frame.fileExt !== 'other' && (<View style={{
+                            {frame.fileExt && frame.fileExt !== 'other' && (<View style={{
                                 backgroundColor: frame.fileExt === 'tsx' || frame.fileExt === 'ts'
                                     ? `${AppColors.brandPurple}18`
                                     : `${AppColors.teal600}18`,
-                                borderRadius: 3,
-                                paddingHorizontal: 4,
-                                paddingVertical: 1,
+                                borderRadius: 4,
+                                paddingHorizontal: 4.5,
+                                paddingVertical: 1.5,
                             }}>
-                              <Text style={{
+                                <Text style={{
                                 fontFamily: AppFonts.interBold,
                                 fontSize: 8.5,
                                 color: frame.fileExt === 'tsx' || frame.fileExt === 'ts'
                                     ? AppColors.brandPurple
                                     : AppColors.teal600,
                             }}>
-                                {frame.fileExt.toUpperCase()}
-                              </Text>
-                            </View>)}
-                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
-                          <DocIcon color={isTopFrame ? AppColors.brandPurple : AppColors.grayTextWeak} size={10}/>
-                          <Text style={{
-                            fontFamily: AppFonts.interMedium,
-                            fontSize: 10.5,
+                                  {frame.fileExt.toUpperCase()}
+                                </Text>
+                              </View>)}
+
+                            <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11.5,
                             color: isTopFrame
                                 ? AppColors.brandPurple
-                                : AppColors.grayTextWeak,
+                                : AppColors.primaryBlack,
                         }}>
-                            {frame.fileName}
-                          </Text>
+                              {frame.fileName}
+                            </Text>
+                          </View>
+
+                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                            {frame.lineNumber && (<View style={{
+                                backgroundColor: `${AppColors.teal600}15`,
+                                borderColor: `${AppColors.teal600}30`,
+                                borderWidth: 1,
+                                borderRadius: 4,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
+                            }}>
+                                <Text style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 9.5,
+                                color: AppColors.teal600,
+                            }}>
+                                  L{frame.lineNumber}{frame.columnNumber ? `:C${frame.columnNumber}` : ''}
+                                </Text>
+                              </View>)}
+                            <CopyButton value={frame.copyableLocation} label={frame.fileName}/>
+                          </View>
                         </View>
+
+                        {/* Middle Row: Function / Symbol Invocation */}
+                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                          <HighlightText text={frame.functionName !== '<anonymous>' ? `${frame.functionName}()` : '<anonymous>'} search={detailSearch} style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 12.5,
+                            color: AppColors.primaryBlack,
+                        }} highlightStyle={{
+                            backgroundColor: AppColors.yellowHighlight,
+                            color: AppColors.primaryBlack,
+                        }}/>
                         </View>
 
-                        {/* Full path */}
-                        {frame.fullPath && frame.fullPath !== frame.fileName && (<Text selectable style={{
-                                fontFamily: AppFonts.interRegular,
-                                fontSize: 9.5,
-                                color: AppColors.grayTextWeak,
-                                lineHeight: 14,
-                            }} numberOfLines={2}>
-                            {frame.fullPath}
-                          </Text>)}
+                        {/* Bottom Row: Clean Relative Path & Execution Scope Tag */}
+                        <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            backgroundColor: isDark ? `${AppColors.primaryBlack}25` : AppColors.grayBackground,
+                            borderRadius: 6,
+                            paddingHorizontal: 8,
+                            paddingVertical: 4.5,
+                            gap: 6,
+                        }}>
+                          <Text selectable style={{
+                            fontFamily: AppFonts.interRegular,
+                            fontSize: 9.5,
+                            color: AppColors.grayTextStrong,
+                            flex: 1,
+                        }} numberOfLines={1}>
+                            📂 {frame.fullPath}
+                          </Text>
+
+                          <View style={{
+                            backgroundColor: frameBadgeBg,
+                            borderRadius: 4,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                        }}>
+                            <Text style={{
+                            fontFamily: 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')}
+                            </Text>
+                          </View>
+                        </View>
                       </View>);
                 })) : (<Text style={{
                         fontFamily: AppFonts.interRegular,
@@ -745,7 +857,7 @@ const LogDetail = React.memo(() => {
                         textAlign: 'center',
                         paddingVertical: 16,
                     }}>
-                    No call stack trace available for this log.
+                    {t('console.noStackAvailable')}
                   </Text>)}
               </View>) : (
             /* Raw Full Trace Monospace Block */

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ActivityIndicator, Modal, Pressable, StatusBar, StyleSheet, Text, View, } from 'react-native';
+import { ActivityIndicator, Modal, Platform, Pressable, StatusBar, StyleSheet, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import ErrorBoundary from '../ErrorBoundary';
 import FabLauncher from './FabLauncher';
@@ -37,7 +37,7 @@ const MainScreen = () => {
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
     return (<>
-      {isEnabled && <FabLauncher />}
+      {(Platform.OS === 'ios' || Platform.OS === 'android') && isEnabled && <FabLauncher />}
       <Modal visible={visible} animationType={modalAnimationType} transparent>
       {visible && (<ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>