react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,1081 +1,293 @@
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from '../../i18n';
-import { Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import HighlightText from '../HighlightText';
-import JsonViewer from '../JsonViewer';
-import CopyButton from '../CopyButton';
-import SegmentedTabs from '../SegmentedTabs';
-import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, DocIcon, ExternalLinkIcon, FolderIcon, } from '../NetworkIcons';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import styles from '../../styles';
-import { getJsonContent, getSize, formatDateTime, parseStackLine, openInVSCode, } from '../../helpers';
-const getRelativeTime = (timestamp) => {
-    const now = Date.now();
-    const diff = now - timestamp;
-    const seconds = Math.floor(diff / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    if (seconds < 60)
-        return `${seconds}s ago`;
-    if (minutes < 60)
-        return `${minutes}m ago`;
-    if (hours < 24)
-        return `${hours}h ago`;
-    return `${days}d ago`;
-};
-const LogDetail = React.memo(() => {
-    const { t } = useTranslation();
-    const { selectedLog } = useInspector();
-    const [activeTab, setActiveTab] = useState('output');
-    const [detailSearch, setDetailSearch] = useState('');
-    const [viewMode, setViewMode] = useState('pretty');
-    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 '';
-        if (stackSource === 'error' && selectedLog.errorStack) {
-            return selectedLog.errorStack;
-        }
-        return selectedLog.stack || selectedLog.caller || '';
-    }, [selectedLog, stackSource]);
-    const parsedStackFrames = useMemo(() => {
-        if (!activeStackString)
-            return [];
-        return activeStackString
-            .split('\n')
-            .map(l => l.trim())
-            .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;
-    const getTypeColors = () => {
-        const type = (selectedLog.type || 'log').toLowerCase();
-        const method = (selectedLog.sourceMethod || type).toLowerCase();
-        if (type === 'error' || method === 'error') {
-            return {
-                border: AppColors.red500,
-                badgeBg: AppColors.red100,
-                badgeText: AppColors.redErrorText,
-                label: 'ERROR',
-                methodBorder: AppColors.errorBorder,
-                methodBg: AppColors.red100,
-                methodText: AppColors.redErrorText,
-            };
-        }
-        if (type === 'warn' || method === 'warn') {
-            return {
-                border: AppColors.amber500,
-                badgeBg: AppColors.amber100,
-                badgeText: AppColors.amber800Warm,
-                label: 'WARN',
-                methodBorder: AppColors.amber200,
-                methodBg: AppColors.amber100,
-                methodText: AppColors.amber800Warm,
-            };
-        }
-        if (type === 'debug' || method === 'debug') {
-            return {
-                border: AppColors.violet500,
-                badgeBg: AppColors.purple100,
-                badgeText: AppColors.violet600,
-                label: 'DEBUG',
-                methodBorder: AppColors.purple200,
-                methodBg: AppColors.purple100,
-                methodText: AppColors.violet600,
-            };
-        }
-        if (type === 'info' || method === 'info') {
-            return {
-                border: AppColors.sky500,
-                badgeBg: AppColors.sky100,
-                badgeText: AppColors.sky600,
-                label: 'INFO',
-                methodBorder: AppColors.sky400,
-                methodBg: AppColors.sky100,
-                methodText: AppColors.sky600,
-            };
-        }
-        return {
-            border: AppColors.indigo500,
-            badgeBg: AppColors.indigo50,
-            badgeText: AppColors.indigo600Alt,
-            label: 'LOG',
-            methodBorder: AppColors.indigo400,
-            methodBg: AppColors.indigo50,
-            methodText: AppColors.indigo600Alt,
-        };
-    };
-    const typeColors = getTypeColors();
-    const hasMultipleArgs = selectedLog.rawArgs != null && selectedLog.rawArgs.length > 1;
-    const hasStack = Boolean(selectedLog.stack && selectedLog.stack.trim().length > 0);
-    const subTabs = [
-        {
-            key: 'output',
-            label: t('console.tabOutput'),
-            icon: (isActive) => (<TerminalIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
-        },
-        ...(hasMultipleArgs
-            ? [
-                {
-                    key: 'arguments',
-                    label: t('console.tabArgs', { count: selectedLog.rawArgs?.length }),
-                    icon: (isActive) => (<RequestIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
-                },
-            ]
-            : []),
-        ...(hasStack
-            ? [
-                {
-                    key: 'stack',
-                    label: t('console.tabStack'),
-                    icon: (isActive) => (<LayersIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
-                },
-            ]
-            : []),
-        {
-            key: 'metadata',
-            label: t('console.tabMetadata'),
-            icon: (isActive) => (<InfoCircleIcon color={isActive ? AppColors.white : AppColors.grayTextWeak} size={12}/>),
-        },
-    ];
-    return (<View style={{ flex: 1 }}>
+import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}from"../../i18n";import{Pressable as Q,ScrollView as Ne,StyleSheet as Re,Text as T,TextInput as He,View as C}from"react-native";import{useInspector as Pe}from"./InspectorContext";import X from"../HighlightText";import Ce from"../JsonViewer";import M from"../CopyButton";import Y from"../SegmentedTabs";import{ClearIcon as Ae,SearchIcon as Le,PrettyIcon as Me,RawIcon as Te,TableIcon as Ee,LayersIcon as Se,TerminalIcon as Oe,RequestIcon as Ue,InfoCircleIcon as Je,DocIcon as Ke,ExternalLinkIcon as Ge,FolderIcon as Qe}from"../NetworkIcons";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import z from"../../styles";import{getJsonContent as Xe,getSize as _,formatDateTime as ee,parseStackLine as Ve,openInVSCode as Ye}from"../../helpers";const Be=S=>{const D=Date.now()-S,E=Math.floor(D/1e3),$=Math.floor(E/60),P=Math.floor($/60),J=Math.floor(P/24);return E<60?`${E}s ago`:$<60?`${$}m ago`:P<24?`${P}h ago`:`${J}d ago`},Ze=De.memo(()=>{const{t:S}=Ie(),{selectedLog:r}=Pe(),[D,E]=L("output"),[$,P]=L(""),[J,ze]=L("pretty"),W=A(()=>r?Xe(r.message):null,[r]),[N,re]=L("structured"),[K,ve]=L("caller"),[Z,We]=L("app"),O=A(()=>r?K==="error"&&r.errorStack?r.errorStack:r.stack||r.caller||"":"",[r,K]),F=A(()=>O?O.split(`
+`).map(t=>t.trim()).filter(t=>t.length>0).map((t,v)=>Ve(t,v===0)):[],[O]),R=A(()=>F.filter(t=>t.frameType==="app"||!t.isRuntimeNoise),[F]),oe=A(()=>Z==="app"&&R.length>0?R:F,[Z,R,F]),V=A(()=>r?R.length>0?R[0]:r.caller&&r.caller!=="Unknown"?Ve(r.caller,!0):F.length>0?F[0]:null:null,[r,R,F]);if(!r)return null;const H=e.primaryLight!==e.white,U=(()=>{const t=(r.type||"log").toLowerCase(),v=(r.sourceMethod||t).toLowerCase();return t==="error"||v==="error"?{border:e.red500,badgeBg:e.red100,badgeText:e.redErrorText,label:"ERROR",methodBorder:e.errorBorder,methodBg:e.red100,methodText:e.redErrorText}:t==="warn"||v==="warn"?{border:e.amber500,badgeBg:e.amber100,badgeText:e.amber800Warm,label:"WARN",methodBorder:e.amber200,methodBg:e.amber100,methodText:e.amber800Warm}:t==="debug"||v==="debug"?{border:e.violet500,badgeBg:e.purple100,badgeText:e.violet600,label:"DEBUG",methodBorder:e.purple200,methodBg:e.purple100,methodText:e.violet600}:t==="info"||v==="info"?{border:e.sky500,badgeBg:e.sky100,badgeText:e.sky600,label:"INFO",methodBorder:e.sky400,methodBg:e.sky100,methodText:e.sky600}:{border:e.indigo500,badgeBg:e.indigo50,badgeText:e.indigo600Alt,label:"LOG",methodBorder:e.indigo400,methodBg:e.indigo50,methodText:e.indigo600Alt}})(),le=r.rawArgs!=null&&r.rawArgs.length>1,$e=!!(r.stack&&r.stack.trim().length>0),Fe=[{key:"output",label:S("console.tabOutput"),icon:t=><Oe color={t?e.white:e.grayTextWeak}size={12}/>},...le?[{key:"arguments",label:S("console.tabArgs",{count:r.rawArgs?.length}),icon:t=><Ue color={t?e.white:e.grayTextWeak}size={12}/>}]:[],...$e?[{key:"stack",label:S("console.tabStack"),icon:t=><Se color={t?e.white:e.grayTextWeak}size={12}/>}]:[],{key:"metadata",label:S("console.tabMetadata"),icon:t=><Je color={t?e.white:e.grayTextWeak}size={12}/>}];return<C style={{flex:1}}>
       
-      <View style={styles.detailInfoBar}>
-        <View style={{ flexDirection: 'column', gap: 10 }}>
+      <C style={z.detailInfoBar}>
+        <C style={{flexDirection:"column",gap:10}}>
           
-          <View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 8,
-        }}>
-            <View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            flex: 1,
-            flexWrap: 'wrap',
-        }}>
+          <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8}}>
+            <C style={{flexDirection:"row",alignItems:"center",gap:6,flex:1,flexWrap:"wrap"}}>
               
-              <View style={[
-            styles.typeChip,
-            {
-                backgroundColor: typeColors.badgeBg,
-                borderWidth: 1,
-                borderColor: `${typeColors.border}40`,
-                paddingHorizontal: 8,
-                paddingVertical: 3,
-            },
-        ]}>
-                <View style={[
-            styles.typeDot,
-            { backgroundColor: typeColors.badgeText },
-        ]}/>
-                <Text style={[
-            styles.typeChipText,
-            { color: typeColors.badgeText, fontSize: 10 },
-        ]}>
-                  {typeColors.label}
-                </Text>
-              </View>
+              <C style={[z.metaChip,{backgroundColor:`${e.grayTextWeak}15`,borderColor:`${e.grayTextWeak}33`,paddingHorizontal:7,paddingVertical:3}]}>
+                <T style={[z.metaChipText,{color:e.grayTextStrong,fontSize:10,fontFamily:B.interBold}]}>
+                  #{r.id!=null?r.id+1:1}
+                </T>
+              </C>
 
               
-              <View style={[
-            styles.metaChip,
-            {
-                backgroundColor: `${AppColors.brandPurple}12`,
-                borderColor: `${AppColors.brandPurple}30`,
-            },
-        ]}>
-                <Text style={[
-            styles.metaChipText,
-            { color: AppColors.brandPurple, fontSize: 10 },
-        ]}>
+              <C style={[z.typeChip,{backgroundColor:U.badgeBg,borderWidth:1,borderColor:`${U.border}40`,paddingHorizontal:8,paddingVertical:3}]}>
+                <C style={[z.typeDot,{backgroundColor:U.badgeText}]}/>
+                <T style={[z.typeChipText,{color:U.badgeText,fontSize:10}]}>
+                  {U.label}
+                </T>
+              </C>
+
+              
+              <C style={[z.metaChip,{backgroundColor:`${e.brandPurple}12`,borderColor:`${e.brandPurple}30`}]}>
+                <T style={[z.metaChipText,{color:e.brandPurple,fontSize:10}]}>
                   console.
-                  {selectedLog.sourceMethod || selectedLog.type || 'log'}
-                </Text>
-              </View>
+                  {r.sourceMethod||r.type||"log"}
+                </T>
+              </C>
 
               
-              {jsonContent && (<View style={[
-                styles.metaChip,
-                {
-                    backgroundColor: `${AppColors.teal600}12`,
-                    borderColor: `${AppColors.teal600}2B`,
-                },
-            ]}>
-                  <Text style={[
-                styles.metaChipText,
-                { color: AppColors.teal600, fontSize: 10 },
-            ]}>
-                    {Array.isArray(jsonContent.data)
-                ? `Array[${jsonContent.data.length}]`
-                : `Object{${Object.keys(jsonContent.data).length}}`}
-                  </Text>
-                </View>)}
+              {W&&<C style={[z.metaChip,{backgroundColor:`${e.teal600}12`,borderColor:`${e.teal600}2B`}]}>
+                  <T style={[z.metaChipText,{color:e.teal600,fontSize:10}]}>
+                    {Array.isArray(W.data)?`Array[${W.data.length}]`:`Object{${Object.keys(W.data).length}}`}
+                  </T>
+                </C>}
 
               
-              {selectedLog.duplicateCount != null &&
-            selectedLog.duplicateCount > 1 && (<View style={[
-                styles.metaChip,
-                {
-                    backgroundColor: `${AppColors.purple}1A`,
-                    borderColor: `${AppColors.purple}3D`,
-                },
-            ]}>
-                    <Text style={[
-                styles.metaChipText,
-                { color: AppColors.purple, fontWeight: '700' },
-            ]}>
-                      {t('console.duplicates', {
-                count: selectedLog.duplicateCount,
-            })}
-                    </Text>
-                  </View>)}
-            </View>
+              {r.duplicateCount!=null&&r.duplicateCount>1&&<C style={[z.metaChip,{backgroundColor:`${e.purple}1A`,borderColor:`${e.purple}3D`}]}>
+                    <T style={[z.metaChipText,{color:e.purple,fontWeight:"700"}]}>
+                      {S("console.duplicates",{count:r.duplicateCount})}
+                    </T>
+                  </C>}
+            </C>
 
             
-            <CopyButton value={selectedLog.message} label={t('console.logMessage')}/>
-          </View>
+            <M value={r.message}label={S("console.logMessage")}/>
+          </C>
 
           
-          <View style={{ gap: 4 }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {originFrame?.fileExt && originFrame.fileExt !== 'other' && (<View style={{
-                backgroundColor: originFrame.fileExt === 'tsx' || originFrame.fileExt === 'ts'
-                    ? AppColors.brandPurple
-                    : AppColors.teal600,
-                borderRadius: 4,
-                paddingHorizontal: 5,
-                paddingVertical: 1.5,
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: AppColors.white,
-                letterSpacing: 0.5,
-            }}>
-                    {originFrame.fileExt.toUpperCase()}
-                  </Text>
-                </View>)}
+          <C style={{gap:4}}>
+            <C style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"}}>
+              {V?.fileExt&&V.fileExt!=="other"&&<C style={{backgroundColor:V.fileExt==="tsx"||V.fileExt==="ts"?e.brandPurple:e.teal600,borderRadius:4,paddingHorizontal:5,paddingVertical:1.5}}>
+                  <T style={{fontFamily:B.interBold,fontSize:9.5,color:e.white,letterSpacing:.5}}>
+                    {V.fileExt.toUpperCase()}
+                  </T>
+                </C>}
 
-              <Text selectable style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 13,
-            color: AppColors.primaryBlack,
-            lineHeight: 18,
-            flexShrink: 1,
-        }}>
-                {originFrame?.functionName && originFrame.functionName !== '<anonymous>'
-            ? `${originFrame.functionName}()`
-            : originFrame?.fileName || t('console.consoleLog')}
-              </Text>
+              <T selectable style={{fontFamily:B.interBold,fontSize:13,color:e.primaryBlack,lineHeight:18,flexShrink:1}}>
+                {V?.functionName&&V.functionName!=="<anonymous>"?`${V.functionName}()`:V?.fileName||S("console.consoleLog")}
+              </T>
 
-              {originFrame?.fileName && (<Pressable onPress={() => openInVSCode(originFrame.rawFilePath ||
-                originFrame.fullPath ||
-                originFrame.fileName, originFrame.lineNumber, originFrame.columnNumber)} hitSlop={8} style={[
-                styles.metaChip,
-                {
-                    backgroundColor: `${AppColors.brandPurple}15`,
-                    borderColor: `${AppColors.brandPurple}40`,
-                    paddingHorizontal: 7,
-                    paddingVertical: 2,
-                },
-            ]}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flexShrink: 1 }}>
-                    <DocIcon color={AppColors.brandPurple} size={10}/>
-                    <Text style={[
-                styles.metaChipText,
-                { color: AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts.interBold, flexShrink: 1 },
-            ]}>
-                      {originFrame.fileName}
-                      {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
-                      {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
-                    </Text>
-                    <ExternalLinkIcon color={AppColors.brandPurple} size={9}/>
-                  </View>
-                </Pressable>)}
-            </View>
+              {V?.fileName&&<Q onPress={()=>Ye(V.rawFilePath||V.fullPath||V.fileName,V.lineNumber,V.columnNumber)}hitSlop={8}style={[z.metaChip,{backgroundColor:`${e.brandPurple}15`,borderColor:`${e.brandPurple}40`,paddingHorizontal:7,paddingVertical:2}]}>
+                  <C style={{flexDirection:"row",alignItems:"center",gap:4,flexShrink:1}}>
+                    <Ke color={e.brandPurple}size={10}/>
+                    <T style={[z.metaChipText,{color:e.brandPurple,fontSize:10,fontFamily:B.interBold,flexShrink:1}]}>
+                      {V.fileName}
+                      {V.lineNumber?`:${V.lineNumber}`:""}
+                      {V.columnNumber?`:${V.columnNumber}`:""}
+                    </T>
+                    <Ge color={e.brandPurple}size={9}/>
+                  </C>
+                </Q>}
+            </C>
 
             
-            <View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 8,
-            flexWrap: 'wrap',
-        }}>
-              <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 10,
-            color: AppColors.grayTextWeak,
-        }}>
-                #{selectedLog.id + 1}
-              </Text>
-              <Text style={detailStyles.metaDot}>•</Text>
-              <Text style={{
-            fontFamily: AppFonts.interRegular,
-            fontSize: 10,
-            color: AppColors.grayTextWeak,
-        }}>
-                {formatDateTime(selectedLog.timestamp)} ({getRelativeTime(selectedLog.timestamp)})
-              </Text>
-              <Text style={detailStyles.metaDot}>•</Text>
-              <Text style={{
-            fontFamily: AppFonts.interRegular,
-            fontSize: 10,
-            color: AppColors.grayTextWeak,
-        }}>
-                {getSize(selectedLog.message)}
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
+            <C style={{flexDirection:"row",alignItems:"center",gap:8,flexWrap:"wrap"}}>
+              <T style={{fontFamily:B.interBold,fontSize:10,color:e.grayTextWeak}}>
+                #{r.id+1}
+              </T>
+              <T style={te.metaDot}>•</T>
+              <T style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
+                {ee(r.timestamp)} ({Be(r.timestamp)})
+              </T>
+              <T style={te.metaDot}>•</T>
+              <T style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
+                {_(r.message)}
+              </T>
+            </C>
+          </C>
+        </C>
+      </C>
 
       
-      <View style={detailStyles.tabsHeaderWrap}>
-        <SegmentedTabs tabs={subTabs} activeKey={activeTab} onChange={key => setActiveTab(key)}/>
-      </View>
+      <C style={te.tabsHeaderWrap}>
+        <Y tabs={Fe}activeKey={D}onChange={t=>E(t)}/>
+      </C>
 
       
-      {activeTab !== 'metadata' && (<View style={{ paddingHorizontal: 12, paddingTop: 6, paddingBottom: 4 }}>
-          <View style={[styles.detailSearchRow, { marginBottom: 0 }]}>
-            <View style={[
-                styles.detailSearchBox,
-                {
-                    backgroundColor: isDark
-                        ? `${AppColors.brandPurple}10`
-                        : AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                },
-            ]}>
-              <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-              <TextInput placeholder="Search in log details..." placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
-              {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 6 }}>
-                  <ClearIcon color={AppColors.grayTextWeak} size={13}/>
-                </Pressable>)}
-            </View>
-          </View>
-        </View>)}
+      {D!=="metadata"&&<C style={{paddingHorizontal:12,paddingTop:6,paddingBottom:4}}>
+          <C style={[z.detailSearchRow,{marginBottom:0}]}>
+            <C style={[z.detailSearchBox,{backgroundColor:H?`${e.brandPurple}10`:e.purpleShade50,borderWidth:1,borderColor:e.dividerColor}]}>
+              <Le color={e.grayTextWeak}size={15}/>
+              <He placeholder="Search in log details..."placeholderTextColor={e.grayTextWeak}value={$}onChangeText={P}style={z.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+              {$.length>0&&<Q onPress={()=>P("")}hitSlop={10}style={{padding:6}}>
+                  <Ae color={e.grayTextWeak}size={13}/>
+                </Q>}
+            </C>
+          </C>
+        </C>}
 
       
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{
-            paddingHorizontal: 12,
-            paddingTop: 6,
-            paddingBottom: 28,
-            flexGrow: 1,
-        }} showsVerticalScrollIndicator={true} keyboardShouldPersistTaps="handled">
+      <Ne style={{flex:1}}contentContainerStyle={{paddingHorizontal:12,paddingTop:6,paddingBottom:28,flexGrow:1}}showsVerticalScrollIndicator={!0}keyboardShouldPersistTaps="handled">
         
-        {activeTab === 'output' && (<View style={[
-                styles.sectionContainer,
-                {
-                    backgroundColor: isDark
-                        ? `${AppColors.purple}12`
-                        : AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                    borderRadius: 12,
-                    overflow: 'hidden',
-                    flex: 1,
-                },
-            ]}>
+        {D==="output"&&<C style={[z.sectionContainer,{backgroundColor:H?`${e.purple}12`:e.purpleShade50,borderWidth:1,borderColor:e.dividerColor,borderRadius:12,overflow:"hidden",flex:1}]}>
             
-            <View style={{
-                flexDirection: 'column',
-                gap: 8,
-                paddingHorizontal: 12,
-                paddingVertical: 10,
-                borderBottomWidth: 1,
-                borderBottomColor: AppColors.dividerColor,
-                backgroundColor: isDark
-                    ? AppColors.primaryLight
-                    : AppColors.grayBackground,
-            }}>
-              <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.purple,
-                letterSpacing: 0.4,
-                textTransform: 'uppercase',
-            }}>
-                  {jsonContent
-                ? t('console.jsonTitle')
-                : t('console.messageTitle')}
-                </Text>
-                <CopyButton value={selectedLog.message} label={t('console.logMessage')}/>
-              </View>
+            <C style={{flexDirection:"column",gap:8,paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:e.dividerColor,backgroundColor:H?e.primaryLight:e.grayBackground}}>
+              <C style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
+                <T style={{fontFamily:B.interBold,fontSize:11.5,color:e.purple,letterSpacing:.4,textTransform:"uppercase"}}>
+                  {S(W?"console.jsonTitle":"console.messageTitle")}
+                </T>
+                <M value={r.message}label={S("console.logMessage")}/>
+              </C>
 
-              {jsonContent && (<SegmentedTabs tabs={[
-                    {
-                        key: 'pretty',
-                        label: t('network.jsonViewer.pretty'),
-                        icon: (isActive) => (<PrettyIcon color={isActive
-                                ? AppColors.white
-                                : AppColors.grayTextWeak} size={12}/>),
-                    },
-                    {
-                        key: 'raw',
-                        label: t('network.jsonViewer.raw'),
-                        icon: (isActive) => (<RawIcon color={isActive
-                                ? AppColors.white
-                                : AppColors.grayTextWeak} size={12}/>),
-                    },
-                    {
-                        key: 'table',
-                        label: t('network.jsonViewer.table'),
-                        icon: (isActive) => (<TableIcon color={isActive
-                                ? AppColors.white
-                                : AppColors.grayTextWeak} size={12}/>),
-                    },
-                ]} activeKey={viewMode} onChange={key => setViewMode(key)}/>)}
-            </View>
+              {W&&<Y tabs={[{key:"pretty",label:S("network.jsonViewer.pretty"),icon:t=><Me color={t?e.white:e.grayTextWeak}size={12}/>},{key:"raw",label:S("network.jsonViewer.raw"),icon:t=><Te color={t?e.white:e.grayTextWeak}size={12}/>},{key:"table",label:S("network.jsonViewer.table"),icon:t=><Ee color={t?e.white:e.grayTextWeak}size={12}/>}]}activeKey={J}onChange={t=>ze(t)}/>}
+            </C>
 
             
-            <View style={{ padding: 12, flex: 1 }}>
-              {jsonContent ? (<>
-                  {jsonContent.header ? (<View style={{
-                        backgroundColor: AppColors.primaryLight,
-                        borderRadius: 8,
-                        borderWidth: 1,
-                        borderColor: AppColors.dividerColor,
-                        padding: 10,
-                        marginBottom: 8,
-                    }}>
-                      <Text selectable style={{
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 12,
-                        color: AppColors.primaryBlack,
-                        lineHeight: 17,
-                    }}>
-                        {jsonContent.header}
-                      </Text>
-                    </View>) : null}
-                  <JsonViewer data={jsonContent.data} search={detailSearch} wrap forceOpen hideTabs fullHeight mode={viewMode} defaultExpandDepth={jsonContent.data &&
-                    typeof jsonContent.data === 'object' &&
-                    Object.keys(jsonContent.data).length > 10
-                    ? 1
-                    : 2}/>
-                </>) : (<View style={{
-                    backgroundColor: AppColors.primaryLight,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                    padding: 10,
-                }}>
-                  <HighlightText text={selectedLog.message} search={detailSearch} style={{
-                    fontFamily: AppFonts.interRegular,
-                    fontSize: 12,
-                    color: AppColors.primaryBlack,
-                    lineHeight: 18,
-                }} highlightStyle={{
-                    backgroundColor: AppColors.yellowHighlight,
-                    color: AppColors.primaryBlack,
-                    borderRadius: 3,
-                    paddingHorizontal: 2,
-                }} detectLinks={true}/>
-                </View>)}
-            </View>
-          </View>)}
+            <C style={{padding:12,flex:1}}>
+              {W?<>
+                  {W.header?<C style={{backgroundColor:e.primaryLight,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,padding:10,marginBottom:8}}>
+                      <T selectable style={{fontFamily:B.interRegular,fontSize:12,color:e.primaryBlack,lineHeight:17}}>
+                        {W.header}
+                      </T>
+                    </C>:null}
+                  <Ce data={W.data}search={$}wrap forceOpen hideTabs fullHeight mode={J}defaultExpandDepth={W.data&&typeof W.data=="object"&&Object.keys(W.data).length>10?1:2}/>
+                </>:<C style={{backgroundColor:e.primaryLight,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,padding:10}}>
+                  <X text={r.message}search={$}style={{fontFamily:B.interRegular,fontSize:12,color:e.primaryBlack,lineHeight:18}}highlightStyle={{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:3,paddingHorizontal:2}}detectLinks={!0}/>
+                </C>}
+            </C>
+          </C>}
 
         
-        {activeTab === 'arguments' && selectedLog.rawArgs && (<View style={{ gap: 10 }}>
-            {selectedLog.rawArgs.map((arg, idx) => {
-                const argType = arg === null
-                    ? 'null'
-                    : Array.isArray(arg)
-                        ? `Array[${arg.length}]`
-                        : typeof arg === 'object'
-                            ? `Object{${Object.keys(arg).length}}`
-                            : typeof arg;
-                const isObj = arg != null &&
-                    (typeof arg === 'object' || Array.isArray(arg));
-                const argStr = isObj
-                    ? JSON.stringify(arg, null, 2)
-                    : String(arg);
-                return (<View key={idx} style={[
-                        styles.sectionContainer,
-                        {
-                            backgroundColor: AppColors.primaryLight,
-                            borderRadius: 10,
-                            borderWidth: 1,
-                            borderColor: AppColors.dividerColor,
-                            overflow: 'hidden',
-                        },
-                    ]}>
-                  <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        paddingHorizontal: 12,
-                        paddingVertical: 8,
-                        backgroundColor: AppColors.grayBackground,
-                        borderBottomWidth: 1,
-                        borderBottomColor: AppColors.dividerColor,
-                    }}>
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                      <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        color: AppColors.purple,
-                    }}>
-                        Arg #{idx + 1}
-                      </Text>
-                      <View style={[
-                        styles.metaChip,
-                        {
-                            backgroundColor: `${AppColors.teal600}12`,
-                            borderColor: `${AppColors.teal600}2B`,
-                            paddingHorizontal: 5,
-                            paddingVertical: 1.5,
-                        },
-                    ]}>
-                        <Text style={[
-                        styles.metaChipText,
-                        { color: AppColors.teal600, fontSize: 9 },
-                    ]}>
-                          {argType}
-                        </Text>
-                      </View>
-                    </View>
-                    <CopyButton value={argStr} label={`Arg #${idx + 1}`}/>
-                  </View>
+        {D==="arguments"&&r.rawArgs&&<C style={{gap:10}}>
+            {r.rawArgs.map((t,v)=>{const I=t===null?"null":Array.isArray(t)?`Array[${t.length}]`:typeof t=="object"?`Object{${Object.keys(t).length}}`:typeof t,G=t!=null&&(typeof t=="object"||Array.isArray(t)),q=G?JSON.stringify(t,null,2):String(t);return<C key={v}style={[z.sectionContainer,{backgroundColor:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,overflow:"hidden"}]}>
+                  <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:8,backgroundColor:e.grayBackground,borderBottomWidth:1,borderBottomColor:e.dividerColor}}>
+                    <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <T style={{fontFamily:B.interBold,fontSize:11,color:e.purple}}>
+                        Arg #{v+1}
+                      </T>
+                      <C style={[z.metaChip,{backgroundColor:`${e.teal600}12`,borderColor:`${e.teal600}2B`,paddingHorizontal:5,paddingVertical:1.5}]}>
+                        <T style={[z.metaChipText,{color:e.teal600,fontSize:9}]}>
+                          {I}
+                        </T>
+                      </C>
+                    </C>
+                    <M value={q}label={`Arg #${v+1}`}/>
+                  </C>
 
-                  <View style={{ padding: 10 }}>
-                    {isObj ? (<JsonViewer data={arg} search={detailSearch} wrap forceOpen hideTabs defaultExpandDepth={2}/>) : (<HighlightText text={argStr} search={detailSearch} style={{
-                            fontFamily: AppFonts.interRegular,
-                            fontSize: 12,
-                            color: AppColors.primaryBlack,
-                            lineHeight: 17,
-                        }} highlightStyle={{
-                            backgroundColor: AppColors.yellowHighlight,
-                            color: AppColors.primaryBlack,
-                        }}/>)}
-                  </View>
-                </View>);
-            })}
-          </View>)}
+                  <C style={{padding:10}}>
+                    {G?<Ce data={t}search={$}wrap forceOpen hideTabs defaultExpandDepth={2}/>:<X text={q}search={$}style={{fontFamily:B.interRegular,fontSize:12,color:e.primaryBlack,lineHeight:17}}highlightStyle={{backgroundColor:e.yellowHighlight,color:e.primaryBlack}}/>}
+                  </C>
+                </C>})}
+          </C>}
 
         
-        {activeTab === 'stack' && (<View style={[
-                styles.sectionContainer,
-                {
-                    backgroundColor: isDark
-                        ? `${AppColors.purple}12`
-                        : AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                    borderRadius: 12,
-                    overflow: 'hidden',
-                },
-            ]}>
+        {D==="stack"&&<C style={[z.sectionContainer,{backgroundColor:H?`${e.purple}12`:e.purpleShade50,borderWidth:1,borderColor:e.dividerColor,borderRadius:12,overflow:"hidden"}]}>
             
-            <View style={{
-                flexDirection: 'column',
-                gap: 8,
-                paddingHorizontal: 12,
-                paddingVertical: 10,
-                borderBottomWidth: 1,
-                borderBottomColor: AppColors.dividerColor,
-                backgroundColor: isDark
-                    ? AppColors.primaryLight
-                    : AppColors.grayBackground,
-            }}>
+            <C style={{flexDirection:"column",gap:8,paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:e.dividerColor,backgroundColor:H?e.primaryLight:e.grayBackground}}>
               
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: 8,
-            }}>
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.purple,
-                textTransform: 'uppercase',
-                letterSpacing: 0.4,
-            }}>
-                  {stackSource === 'error'
-                ? t('console.errorStack', { count: parsedStackFrames.length })
-                : t('console.callStack', { count: parsedStackFrames.length })}
-                </Text>
+              <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8}}>
+                <T style={{fontFamily:B.interBold,fontSize:11.5,color:e.purple,textTransform:"uppercase",letterSpacing:.4}}>
+                  {K==="error"?S("console.errorStack",{count:F.length}):S("console.callStack",{count:F.length})}
+                </T>
 
-                <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>
+                <C style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                  <C style={{flexDirection:"row",backgroundColor:H?e.primaryLight:e.white,borderRadius:7,padding:2,borderWidth:1,borderColor:e.dividerColor}}>
+                    <Q onPress={()=>re("structured")}style={{flexDirection:"row",alignItems:"center",gap:3,paddingVertical:3.5,paddingHorizontal:7,borderRadius:5,backgroundColor:N==="structured"?e.brandPurple:"transparent"}}>
+                      <Se color={N==="structured"?e.white:e.grayTextWeak}size={11}/>
+                      <T style={{fontFamily:B.interBold,fontSize:10,color:N==="structured"?e.white:e.grayTextStrong}}>
+                        {S("console.cardsView")}
+                      </T>
+                    </Q>
 
-                    <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>
+                    <Q onPress={()=>re("raw")}style={{flexDirection:"row",alignItems:"center",gap:3,paddingVertical:3.5,paddingHorizontal:7,borderRadius:5,backgroundColor:N==="raw"?e.brandPurple:"transparent"}}>
+                      <Te color={N==="raw"?e.white:e.grayTextWeak}size={11}/>
+                      <T style={{fontFamily:B.interBold,fontSize:10,color:N==="raw"?e.white:e.grayTextStrong}}>
+                        {S("console.rawTraceView")}
+                      </T>
+                    </Q>
+                  </C>
 
-                  <CopyButton value={activeStackString} label={t('console.fullStackTrace')}/>
-                </View>
-              </View>
+                  <M value={O}label={S("console.fullStackTrace")}/>
+                </C>
+              </C>
 
               
-              {selectedLog.errorStack && (<SegmentedTabs tabs={[
-                    {
-                        key: 'caller',
-                        label: t('console.callOriginStack'),
-                    },
-                    {
-                        key: 'error',
-                        label: t('console.errorThrownStack'),
-                    },
-                ]} activeKey={stackSource} onChange={key => setStackSource(key)}/>)}
+              {r.errorStack&&<Y tabs={[{key:"caller",label:S("console.callOriginStack")},{key:"error",label:S("console.errorThrownStack")}]}activeKey={K}onChange={t=>ve(t)}/>}
 
               
-              <SegmentedTabs tabs={[
-                {
-                    key: 'app',
-                    label: t('console.appCodeScope', { count: appStackFrames.length }),
-                },
-                {
-                    key: 'all',
-                    label: t('console.allFramesScope', { count: parsedStackFrames.length }),
-                },
-            ]} activeKey={stackFilter} onChange={key => setStackFilter(key)}/>
-            </View>
+              <Y tabs={[{key:"app",label:S("console.appCodeScope",{count:R.length})},{key:"all",label:S("console.allFramesScope",{count:F.length})}]}activeKey={Z}onChange={t=>We(t)}/>
+            </C>
 
             
-            {stackViewMode === 'structured' ? (<View style={{ padding: 12, gap: 10 }}>
-                {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: 10,
-                            borderWidth: 1,
-                            borderColor: isTopFrame
-                                ? `${AppColors.brandPurple}35`
-                                : AppColors.dividerColor,
-                            padding: 11,
-                            gap: 6,
-                        }}>
+            {N==="structured"?<C style={{padding:12,gap:10}}>
+                {oe.length>0?oe.map((t,v)=>{const I=v===0,G=t.frameType==="app"?`${e.brandPurple}15`:t.frameType==="dependency"?`${e.amber500}18`:t.frameType==="native"?`${e.sky500}18`:e.grayBorderSecondary,q=t.frameType==="app"?e.brandPurple:t.frameType==="dependency"?e.amber700:t.frameType==="native"?e.sky500:e.grayTextWeak;return<C key={v}style={{backgroundColor:I?`${e.brandPurple}0A`:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:I?`${e.brandPurple}35`:e.dividerColor,padding:11,gap:6}}>
                         
-                        <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            gap: 6,
-                        }}>
-                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, flexWrap: 'wrap' }}>
-                            {isTopFrame && (<View style={{
-                                backgroundColor: AppColors.brandPurple,
-                                borderRadius: 4,
-                                paddingHorizontal: 5,
-                                paddingVertical: 1.5,
-                            }}>
-                                <Text style={{
-                                fontFamily: AppFonts.interBold,
-                                fontSize: 8.5,
-                                color: AppColors.white,
-                            }}>
-                                  {t('console.originBadge')}
-                                </Text>
-                              </View>)}
+                        <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6}}>
+                          <C style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,flexWrap:"wrap"}}>
+                            {I&&<C style={{backgroundColor:e.brandPurple,borderRadius:4,paddingHorizontal:5,paddingVertical:1.5}}>
+                                <T style={{fontFamily:B.interBold,fontSize:8.5,color:e.white}}>
+                                  {S("console.originBadge")}
+                                </T>
+                              </C>}
 
-                            {frame.fileExt && frame.fileExt !== 'other' && (<View style={{
-                                backgroundColor: frame.fileExt === 'tsx' || frame.fileExt === 'ts'
-                                    ? `${AppColors.brandPurple}18`
-                                    : `${AppColors.teal600}18`,
-                                borderRadius: 4,
-                                paddingHorizontal: 4.5,
-                                paddingVertical: 1.5,
-                            }}>
-                                <Text style={{
-                                fontFamily: AppFonts.interBold,
-                                fontSize: 8.5,
-                                color: frame.fileExt === 'tsx' || frame.fileExt === 'ts'
-                                    ? AppColors.brandPurple
-                                    : AppColors.teal600,
-                            }}>
-                                  {frame.fileExt.toUpperCase()}
-                                </Text>
-                              </View>)}
+                            {t.fileExt&&t.fileExt!=="other"&&<C style={{backgroundColor:t.fileExt==="tsx"||t.fileExt==="ts"?`${e.brandPurple}18`:`${e.teal600}18`,borderRadius:4,paddingHorizontal:4.5,paddingVertical:1.5}}>
+                                <T style={{fontFamily:B.interBold,fontSize:8.5,color:t.fileExt==="tsx"||t.fileExt==="ts"?e.brandPurple:e.teal600}}>
+                                  {t.fileExt.toUpperCase()}
+                                </T>
+                              </C>}
 
-                            <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 11.5,
-                            color: isTopFrame
-                                ? AppColors.brandPurple
-                                : AppColors.primaryBlack,
-                        }}>
-                              {frame.fileName}
-                            </Text>
-                          </View>
+                            <T style={{fontFamily:B.interBold,fontSize:11.5,color:I?e.brandPurple:e.primaryBlack}}>
+                              {t.fileName}
+                            </T>
+                          </C>
 
-                          <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>
+                          <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                            {t.lineNumber&&<C style={{backgroundColor:`${e.teal600}15`,borderColor:`${e.teal600}30`,borderWidth:1,borderRadius:4,paddingHorizontal:5,paddingVertical:1.5}}>
+                                <T style={{fontFamily:B.interBold,fontSize:9.5,color:e.teal600}}>
+                                  L{t.lineNumber}{t.columnNumber?`:C${t.columnNumber}`:""}
+                                </T>
+                              </C>}
+                            <M value={t.copyableLocation}label={t.fileName}/>
+                          </C>
+                        </C>
 
                         
-                        <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>
+                        <C style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                          <X text={t.functionName!=="<anonymous>"?`${t.functionName}()`:"<anonymous>"}search={$}style={{fontFamily:B.interBold,fontSize:12.5,color:e.primaryBlack}}highlightStyle={{backgroundColor:e.yellowHighlight,color:e.primaryBlack}}/>
+                        </C>
 
                         
-                        <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,
-                        }}>
-                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1 }}>
-                            <FolderIcon size={12} color={AppColors.grayTextWeak}/>
-                            <Text selectable style={{
-                            fontFamily: AppFonts.interRegular,
-                            fontSize: 9.5,
-                            color: AppColors.grayTextStrong,
-                            flex: 1,
-                        }} numberOfLines={1}>
-                              {frame.fullPath}
-                            </Text>
-                          </View>
+                        <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:H?`${e.primaryBlack}25`:e.grayBackground,borderRadius:6,paddingHorizontal:8,paddingVertical:4.5,gap:6}}>
+                          <C style={{flexDirection:"row",alignItems:"center",gap:5,flex:1}}>
+                            <Qe size={12}color={e.grayTextWeak}/>
+                            <T selectable style={{fontFamily:B.interRegular,fontSize:9.5,color:e.grayTextStrong,flex:1}}numberOfLines={1}>
+                              {t.fullPath}
+                            </T>
+                          </C>
 
-                          <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,
-                        fontSize: 11.5,
-                        color: AppColors.grayTextWeak,
-                        textAlign: 'center',
-                        paddingVertical: 16,
-                    }}>
-                    {t('console.noStackAvailable')}
-                  </Text>)}
-              </View>) : (<View style={{
-                    backgroundColor: AppColors.primaryLight,
-                    padding: 12,
-                }}>
-                {activeStackString.split('\n').filter(l => l.trim().length > 0).map((line, lineIdx) => (<View key={lineIdx} style={{
-                        flexDirection: 'row',
-                        alignItems: 'flex-start',
-                        paddingVertical: 2,
-                    }}>
-                    <Text style={{
-                        width: 28,
-                        textAlign: 'right',
-                        paddingRight: 8,
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 11,
-                        color: AppColors.grayTextWeak,
-                        lineHeight: 17,
-                    }}>
-                      {lineIdx + 1}
-                    </Text>
-                    <HighlightText text={line.trim()} search={detailSearch} style={{
-                        flex: 1,
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 12,
-                        color: AppColors.primaryBlack,
-                        lineHeight: 17,
-                    }} highlightStyle={{
-                        backgroundColor: AppColors.yellowHighlight,
-                        color: AppColors.primaryBlack,
-                    }}/>
-                  </View>))}
-              </View>)}
-          </View>)}
+                          <C style={{backgroundColor:G,borderRadius:4,paddingHorizontal:5,paddingVertical:1.5}}>
+                            <T style={{fontFamily:B.interBold,fontSize:8.5,color:q}}>
+                              {t.frameType==="app"?S("console.appCodeBadge"):t.frameType==="dependency"?S("console.dependencyBadge"):t.frameType==="native"?S("console.nativeBadge"):S("console.hermesVmBadge")}
+                            </T>
+                          </C>
+                        </C>
+                      </C>}):<T style={{fontFamily:B.interRegular,fontSize:11.5,color:e.grayTextWeak,textAlign:"center",paddingVertical:16}}>
+                    {S("console.noStackAvailable")}
+                  </T>}
+              </C>:<C style={{backgroundColor:e.primaryLight,padding:12}}>
+                {O.split(`
+`).filter(t=>t.trim().length>0).map((t,v)=><C key={v}style={{flexDirection:"row",alignItems:"flex-start",paddingVertical:2}}>
+                    <T style={{width:28,textAlign:"right",paddingRight:8,fontFamily:B.interRegular,fontSize:11,color:e.grayTextWeak,lineHeight:17}}>
+                      {v+1}
+                    </T>
+                    <X text={t.trim()}search={$}style={{flex:1,fontFamily:B.interRegular,fontSize:12,color:e.primaryBlack,lineHeight:17}}highlightStyle={{backgroundColor:e.yellowHighlight,color:e.primaryBlack}}/>
+                  </C>)}
+              </C>}
+          </C>}
 
         
-        {activeTab === 'metadata' && (<View style={[
-                styles.sectionContainer,
-                {
-                    backgroundColor: AppColors.primaryLight,
-                    borderRadius: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                    overflow: 'hidden',
-                },
-            ]}>
-            <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                paddingHorizontal: 12,
-                paddingVertical: 9,
-                backgroundColor: AppColors.grayBackground,
-                borderBottomWidth: 1,
-                borderBottomColor: AppColors.dividerColor,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.purple,
-                textTransform: 'uppercase',
-                letterSpacing: 0.4,
-            }}>
+        {D==="metadata"&&<C style={[z.sectionContainer,{backgroundColor:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,overflow:"hidden"}]}>
+            <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,backgroundColor:e.grayBackground,borderBottomWidth:1,borderBottomColor:e.dividerColor}}>
+              <T style={{fontFamily:B.interBold,fontSize:11.5,color:e.purple,textTransform:"uppercase",letterSpacing:.4}}>
                 Log Properties
-              </Text>
-              <CopyButton value={JSON.stringify({
-                id: selectedLog.id + 1,
-                type: selectedLog.type,
-                sourceMethod: selectedLog.sourceMethod || 'log',
-                timestamp: selectedLog.timestamp,
-                dateTime: formatDateTime(selectedLog.timestamp),
-                caller: selectedLog.caller,
-                triggerFile: originFrame?.fileName,
-                triggerLine: originFrame?.lineNumber,
-                triggerFunction: originFrame?.functionName,
-                charCount: selectedLog.message.length,
-                size: getSize(selectedLog.message),
-                duplicates: selectedLog.duplicateCount || 1,
-            }, null, 2)} label="Metadata JSON"/>
-            </View>
+              </T>
+              <M value={JSON.stringify({id:r.id+1,type:r.type,sourceMethod:r.sourceMethod||"log",timestamp:r.timestamp,dateTime:ee(r.timestamp),caller:r.caller,triggerFile:V?.fileName,triggerLine:V?.lineNumber,triggerFunction:V?.functionName,charCount:r.message.length,size:_(r.message),duplicates:r.duplicateCount||1},null,2)}label="Metadata JSON"/>
+            </C>
 
-            <View style={{ paddingHorizontal: 12, paddingVertical: 4 }}>
-              {[
-                { label: 'Log ID', value: `#${selectedLog.id + 1}` },
-                { label: 'Level', value: selectedLog.type.toUpperCase() },
-                {
-                    label: 'Source Method',
-                    value: `console.${selectedLog.sourceMethod || selectedLog.type || 'log'}`,
-                },
-                {
-                    label: 'Triggered At',
-                    value: `${formatDateTime(selectedLog.timestamp)} (${getRelativeTime(selectedLog.timestamp)})`,
-                },
-                { label: 'Timestamp (ms)', value: String(selectedLog.timestamp) },
-                {
-                    label: 'Trigger File',
-                    value: originFrame?.fileName || 'Unknown',
-                },
-                ...(originFrame?.lineNumber
-                    ? [
-                        {
-                            label: 'Trigger Location',
-                            value: `Line ${originFrame.lineNumber}, Col ${originFrame.columnNumber || 0}`,
-                        },
-                    ]
-                    : []),
-                ...(originFrame?.functionName && originFrame.functionName !== '<anonymous>'
-                    ? [
-                        {
-                            label: 'Trigger Function',
-                            value: `${originFrame.functionName}()`,
-                        },
-                    ]
-                    : []),
-                {
-                    label: 'Full Location',
-                    value: selectedLog.caller || 'Unknown',
-                },
-                {
-                    label: 'Character Length',
-                    value: `${selectedLog.message.length} chars`,
-                },
-                {
-                    label: 'Approx. Size',
-                    value: getSize(selectedLog.message),
-                },
-                {
-                    label: 'Duplicate Count',
-                    value: String(selectedLog.duplicateCount || 1),
-                },
-                ...(hasMultipleArgs
-                    ? [
-                        {
-                            label: 'Arguments Count',
-                            value: `${selectedLog.rawArgs?.length} arguments`,
-                        },
-                    ]
-                    : []),
-            ].map((row, rIdx, arr) => (<View key={rIdx} style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    paddingVertical: 8,
-                    borderBottomWidth: rIdx < arr.length - 1 ? 1 : 0,
-                    borderBottomColor: AppColors.grayBorderSecondary,
-                }}>
-                  <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 11.5,
-                    color: AppColors.grayTextWeak,
-                }}>
-                    {row.label}
-                  </Text>
-                  <Text selectable style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11.5,
-                    color: AppColors.primaryBlack,
-                    maxWidth: '60%',
-                    textAlign: 'right',
-                }} numberOfLines={2}>
-                    {row.value}
-                  </Text>
-                </View>))}
-            </View>
-          </View>)}
-      </ScrollView>
-    </View>);
-});
-const detailStyles = StyleSheet.create({
-    metaDot: {
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-        opacity: 0.7,
-    },
-    tabsHeaderWrap: {
-        paddingHorizontal: 12,
-        paddingTop: 8,
-        paddingBottom: 4,
-    },
-});
-export default LogDetail;
+            <C style={{paddingHorizontal:12,paddingVertical:4}}>
+              {[{label:"Log ID",value:`#${r.id+1}`},{label:"Level",value:r.type.toUpperCase()},{label:"Source Method",value:`console.${r.sourceMethod||r.type||"log"}`},{label:"Triggered At",value:`${ee(r.timestamp)} (${Be(r.timestamp)})`},{label:"Timestamp (ms)",value:String(r.timestamp)},{label:"Trigger File",value:V?.fileName||"Unknown"},...V?.lineNumber?[{label:"Trigger Location",value:`Line ${V.lineNumber}, Col ${V.columnNumber||0}`}]:[],...V?.functionName&&V.functionName!=="<anonymous>"?[{label:"Trigger Function",value:`${V.functionName}()`}]:[],{label:"Full Location",value:r.caller||"Unknown"},{label:"Character Length",value:`${r.message.length} chars`},{label:"Approx. Size",value:_(r.message)},{label:"Duplicate Count",value:String(r.duplicateCount||1)},...le?[{label:"Arguments Count",value:`${r.rawArgs?.length} arguments`}]:[]].map((t,v,I)=><C key={v}style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:8,borderBottomWidth:v<I.length-1?1:0,borderBottomColor:e.grayBorderSecondary}}>
+                  <T style={{fontFamily:B.interMedium,fontSize:11.5,color:e.grayTextWeak}}>
+                    {t.label}
+                  </T>
+                  <T selectable style={{fontFamily:B.interBold,fontSize:11.5,color:e.primaryBlack,maxWidth:"60%",textAlign:"right"}}numberOfLines={2}>
+                    {t.value}
+                  </T>
+                </C>)}
+            </C>
+          </C>}
+      </Ne>
+    </C>}),te=Re.create({metaDot:{fontSize:10,color:e.grayTextWeak,opacity:.7},tabsHeaderWrap:{paddingHorizontal:12,paddingTop:8,paddingBottom:4}});export default Ze;