react-native-inapp-inspector 1.1.24 → 1.1.26

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

@@ -10,9 +10,9 @@ 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 { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = useInspector();
     const envConfig = useMemo(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -51,7 +51,8 @@ const InspectorHeader = React.memo(() => {
     const isDetailView = (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);
     const isAnySelected = isDetailView;
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     return (<LinearGradient colors={[AppColors.purple, AppColors.brandPurple]} style={styles.headerGradient}>
@@ -62,8 +63,9 @@ const InspectorHeader = React.memo(() => {
             {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 16,
-                flex: !isDetailView ? 5 : 1,
+                gap: 12,
+                flex: !isDetailView ? 1 : 0,
+                minWidth: 0,
             },
         ]}>
             <TouchableScale onPress={() => {
@@ -73,6 +75,7 @@ const InspectorHeader = React.memo(() => {
                 setSelectedLog(null);
                 setSelectedReduxSlice(null);
                 setSelectedReduxAction(null);
+                setSelectedCrash(null);
             });
         }} hitSlop={15} style={[
             {
@@ -194,10 +197,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 +216,7 @@ const InspectorHeader = React.memo(() => {
                         </View>
                         <View style={{
                     paddingHorizontal: 5,
-                    paddingVertical: 2,
+                    paddingVertical: 2.5,
                     backgroundColor: `${AppColors.white}1F`,
                 }}>
                           <Text style={{
@@ -230,10 +237,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,
@@ -478,18 +489,58 @@ const InspectorHeader = React.memo(() => {
                       {selectedReduxAction.timestamp || 'Dispatched'}
                     </Text>
                   </View>
+                </View>) : activeTab === 'crash' && selectedCrash != null ? (<View style={styles.headerDetailCenter}>
+                  <View style={styles.headerDetailRow}>
+                    <View style={[
+                    styles.headerMethodBadge,
+                    {
+                        backgroundColor: selectedCrash.isFatal
+                            ? '#DC2626'
+                            : '#D97706',
+                    },
+                ]}>
+                      <Text style={styles.headerMethodText}>
+                        {selectedCrash.isFatal ? 'FATAL' : selectedCrash.type.toUpperCase()}
+                      </Text>
+                    </View>
+                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedCrash.name || selectedCrash.message}
+                    </Text>
+                  </View>
+                  <View style={styles.headerDetailSubRow}>
+                    <View style={[
+                    styles.headerStatusDot,
+                    {
+                        backgroundColor: selectedCrash.isFatal
+                            ? '#DC2626'
+                            : '#F59E0B',
+                    },
+                ]}/>
+                    <Text style={styles.headerSubTitle}>
+                      {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                    </Text>
+                    {selectedCrash.deviceInfo?.platform && (<>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
+                        <Text style={styles.headerSubTitle}>
+                          {selectedCrash.deviceInfo.platform.toUpperCase()}
+                        </Text>
+                      </>)}
+                  </View>
                 </View>) : null}
             </View>)}
 
           <View style={[
             styles.headerRight,
-            !isAnySelected && {
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
                 flexShrink: 0,
-                minWidth: 116,
+                gap: 8,
             },
         ]}>
             {!isAnySelected && (<TouchableScale onPress={() => {
-                Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?', [
+                Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
                     {
                         text: 'Clear All',
@@ -497,13 +548,7 @@ const InspectorHeader = React.memo(() => {
                         style: 'destructive',
                     },
                 ]);
-            }} hitSlop={15} style={[
-                styles.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: `${AppColors.white}26`,
-                },
-            ]}>
+            }} hitSlop={15} style={styles.closeButtonSquare}>
                 <Animated.View style={{
                 transform: [
                     {
@@ -524,15 +569,7 @@ const InspectorHeader = React.memo(() => {
                 </Animated.View>
               </TouchableScale>)}
 
-            {selected == null &&
-            selectedEvent == null &&
-            selectedLog == null && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={[
-                styles.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: `${AppColors.white}26`,
-                },
-            ]}>
+            {!isAnySelected && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={styles.closeButtonSquare}>
                 <SettingsIcon color={AppColors.white} size={16}/>
               </TouchableScale>)}
 

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}/>),
         },
     ];
@@ -253,7 +262,8 @@ const LogDetail = React.memo(() => {
             fontSize: 13,
             color: AppColors.primaryBlack,
             lineHeight: 18,
-        }} numberOfLines={1}>
+            flexShrink: 1,
+        }}>
                 {originFrame?.functionName && originFrame.functionName !== '<anonymous>'
             ? `${originFrame.functionName}()`
             : originFrame?.fileName || t('console.consoleLog')}
@@ -268,11 +278,11 @@ const LogDetail = React.memo(() => {
                     paddingVertical: 2,
                 },
             ]}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexWrap: 'wrap', flexShrink: 1 }}>
                     <DocIcon color={AppColors.brandPurple} size={10}/>
                     <Text style={[
                 styles.metaChipText,
-                { color: AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts.interBold },
+                { color: AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts.interBold, flexShrink: 1 },
             ]}>
                       {originFrame.fileName}
                       {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
@@ -575,10 +585,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 +599,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 +858,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 */