react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/ConsoleLogCard.js

@@ -1,534 +1,99 @@
-import React, { useState } from 'react';
-import { useTranslation } from '../i18n';
-import { Pressable, StyleSheet, Text, View, } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import { formatTime, getJsonContent, getJsonPreviewText, parseStackLine, openInVSCode, } from '../helpers';
-import CopyButton from './CopyButton';
-import LogSyntaxHighlighter from './LogSyntaxHighlighter';
-import { ChevronIcon, ExternalLinkIcon, FlaskIcon, ZapIcon, GlobeIcon, DiceIcon, AtomIcon, BarChartIcon, KeyIcon, SmartphoneIcon, AlertTriangleIcon, BugIcon, TagIcon, } from './NetworkIcons';
-import { useInspector } from './Inspector/InspectorContext';
-const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
-    if (!message)
-        return null;
-    const prefixRegex = /^((?:\[[^\]]+\]\s*)+)/;
-    const match = message.match(prefixRegex);
-    if (match) {
-        const fullPrefix = match[1];
-        const remainingText = message.substring(fullPrefix.length);
-        const tags = fullPrefix.match(/\[[^\]]+\]/g) || [];
-        const getTagDecorator = (tag) => {
-            const clean = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
-            if (clean === 'AXIOS') {
-                return { color: AppColors.emerald600, Icon: ZapIcon, label: 'AXIOS' };
-            }
-            if (clean === 'API' || clean === 'FETCH' || clean === 'HTTP' || clean === 'NETWORK') {
-                return { color: AppColors.sky600, Icon: GlobeIcon, label: clean };
-            }
-            if (clean === 'SAMPLE' || clean === 'BATCH') {
-                return { color: AppColors.indigo600Alt, Icon: DiceIcon, label: clean };
-            }
-            if (clean === 'REDUX' || clean === 'STORE' || clean === 'STATE') {
-                return { color: AppColors.violet600, Icon: AtomIcon, label: clean };
-            }
-            if (clean === 'ANALYTICS' || clean === 'FIREBASE' || clean === 'GA4' || clean === 'GA') {
-                return { color: AppColors.teal600, Icon: BarChartIcon, label: clean };
-            }
-            if (clean === 'AUTH' || clean === 'TOKEN' || clean === 'SESSION') {
-                return { color: AppColors.amber600, Icon: KeyIcon, label: clean };
-            }
-            if (clean === 'APP') {
-                return { color: AppColors.indigo600Alt, Icon: SmartphoneIcon, label: 'APP' };
-            }
-            if (clean === 'TEST') {
-                return { color: AppColors.emerald500, Icon: FlaskIcon, label: 'TEST' };
-            }
-            if (clean === 'WARN' || clean === 'WARNING') {
-                return { color: AppColors.amber600, Icon: AlertTriangleIcon, label: 'WARN' };
-            }
-            if (clean === 'ERROR' || clean === 'CRASH' || clean === 'BUG') {
-                return { color: AppColors.red600, Icon: BugIcon, label: 'ERROR' };
-            }
-            if (clean === 'PERF' || clean === 'RENDER') {
-                return { color: AppColors.violet500, Icon: ZapIcon, label: clean };
-            }
-            return { color: AppColors.slate600, Icon: TagIcon, label: clean };
-        };
-        return (<View style={{ flexDirection: 'column', gap: 6 }}>
-        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 5 }}>
-          {tags.map((tag, i) => {
-                const dec = getTagDecorator(tag);
-                const IconComp = dec.Icon;
-                return (<View key={i} style={[
-                        styles.prefixTag,
-                        {
-                            backgroundColor: `${dec.color}14`,
-                            borderColor: `${dec.color}33`,
-                        },
-                    ]}>
-                <IconComp color={dec.color} size={10}/>
-                <Text style={[styles.prefixTagText, { color: dec.color }]}>
-                  {dec.label}
-                </Text>
-              </View>);
-            })}
-        </View>
-        <LogSyntaxHighlighter text={remainingText} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>
-      </View>);
-    }
-    return (<LogSyntaxHighlighter text={message} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
-};
-export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchStr = '', }) {
-    const { setSelectedLog } = useInspector();
-    const { t } = useTranslation();
-    const [isExpanded, setIsExpanded] = useState(false);
-    const jsonContent = getJsonContent(item.message);
-    const isAnalyticsError = item.message
-        .toLowerCase()
-        .includes('[analytics error]');
-    const isUserLog = item.sourceMethod === 'log';
-    const parsedCaller = item.caller && item.caller !== 'Unknown'
-        ? parseStackLine(item.caller, true)
-        : null;
-    const getLogColors = () => {
-        const type = (item.type || 'log').toLowerCase();
-        const method = (item.sourceMethod || type).toLowerCase();
-        if (isAnalyticsError || type === 'error' || method === 'error') {
-            return {
-                border: AppColors.errorColor,
-                badgeBg: `${AppColors.errorColor}18`,
-                badgeText: AppColors.errorColor,
-                label: 'ERROR',
-                cardBg: '#FFF8F8',
-                methodBorder: `${AppColors.errorColor}30`,
-                methodBg: `${AppColors.errorColor}12`,
-                methodText: AppColors.errorColor,
-                textColor: AppColors.redErrorText,
-            };
-        }
-        if (type === 'warn' || method === 'warn') {
-            return {
-                border: AppColors.amber600,
-                badgeBg: `${AppColors.amber600}18`,
-                badgeText: AppColors.amber800,
-                label: 'WARN',
-                cardBg: '#FFFDF5',
-                methodBorder: `${AppColors.amber600}33`,
-                methodBg: `${AppColors.amber600}14`,
-                methodText: AppColors.amber800,
-                textColor: AppColors.amber800,
-            };
-        }
-        if (type === 'debug' || method === 'debug') {
-            return {
-                border: AppColors.purple500,
-                badgeBg: `${AppColors.purple500}18`,
-                badgeText: AppColors.purple,
-                label: 'DEBUG',
-                cardBg: '#FAF8FD',
-                methodBorder: `${AppColors.purple500}33`,
-                methodBg: `${AppColors.purple500}12`,
-                methodText: AppColors.purple,
-                textColor: AppColors.purpleText,
-            };
-        }
-        if (type === 'info' || method === 'info') {
-            return {
-                border: AppColors.sky500,
-                badgeBg: `${AppColors.sky500}18`,
-                badgeText: AppColors.sky600,
-                label: 'INFO',
-                cardBg: '#F8FAFC',
-                methodBorder: `${AppColors.sky500}33`,
-                methodBg: `${AppColors.sky500}12`,
-                methodText: AppColors.sky600,
-                textColor: AppColors.blue800,
-            };
-        }
-        return {
-            border: AppColors.indigo500,
-            badgeBg: `${AppColors.indigo500}15`,
-            badgeText: AppColors.indigo600Alt,
-            label: 'LOG',
-            cardBg: AppColors.white,
-            methodBorder: AppColors.dividerColor,
-            methodBg: AppColors.indigo50,
-            methodText: AppColors.indigo600Alt,
-            textColor: AppColors.primaryBlack,
-        };
-    };
-    const colors = getLogColors();
-    const jsonPreview = jsonContent
-        ? getJsonPreviewText(jsonContent.data)
-        : null;
-    const openDetail = () => {
-        setSelectedLog(item);
-    };
-    const toggleExpand = (e) => {
-        e?.stopPropagation?.();
-        setIsExpanded(prev => !prev);
-    };
-    return (<View style={styles.container}>
-      <Pressable onPress={openDetail} style={({ pressed }) => [
-            styles.card,
-            {
-                borderLeftColor: colors.border,
-                borderLeftWidth: 3.5,
-                backgroundColor: colors.cardBg,
-            },
-            pressed && styles.cardPressed,
-        ]}>
+import z,{useState as G}from"react";import{useTranslation as v}from"../i18n";import{Pressable as N,StyleSheet as K,Text as I,View as T}from"react-native";import{AppColors as o}from"../styles/AppColors";import{AppFonts as b}from"../styles/AppFonts";import{formatTime as j,getJsonContent as Y,getJsonPreviewText as X,parseStackLine as J,openInVSCode as Q}from"../helpers";import Z from"./CopyButton";import F from"./LogSyntaxHighlighter";import{ChevronIcon as D,ExternalLinkIcon as _,FlaskIcon as ee,ZapIcon as W,GlobeIcon as oe,DiceIcon as re,AtomIcon as H,BarChartIcon as te,KeyIcon as le,SmartphoneIcon as ae,AlertTriangleIcon as ne,BugIcon as ie,TagIcon as de,MapPinIcon as M,StorageIcon as ce,SignalIcon as se,FlameIcon as ge,MoneyIcon as pe,CircleCheckIcon as fe,RefreshCcwIcon as Te,PerformanceIcon as ue,ChipIcon as be,SettingsIcon as Ce,TerminalIcon as ye,InfoCircleIcon as Ie,ShieldAlertIcon as me,LayoutIcon as he,ClockIcon as Ee}from"./NetworkIcons";import{useInspector as Se}from"./Inspector/InspectorContext";const $=(S,t,E,P,B)=>{if(!S)return null;const h=/^((?:\[[^\]]+\]\s*)+)/,A=S.match(h);if(A){const C=A[1],R=S.substring(C.length),V=C.match(/\[[^\]]+\]/g)||[],u=O=>{const e=O.replace(/[\[\]]/g,"").trim().toUpperCase();return e==="AXIOS"?{color:o.emerald600,Icon:W,label:"AXIOS"}:e==="API"||e==="FETCH"||e==="HTTP"||e==="REST"||e==="NETWORK"?{color:o.sky600,Icon:oe,label:e}:e==="GRAPHQL"||e==="GQL"||e==="APOLLO"||e==="MUTATION"||e==="QUERY"?{color:o.pink500,Icon:H,label:e}:e==="WS"||e==="WEBSOCKET"||e==="SOCKET"||e==="SOCKET.IO"||e==="REALTIME"?{color:o.cyan600,Icon:se,label:e}:e==="REDUX"||e==="STORE"||e==="STATE"||e==="ZUSTAND"||e==="MOBX"||e==="RECOIL"||e==="ACTION"||e==="DISPATCH"?{color:o.violet600,Icon:H,label:e}:e==="ANALYTICS"||e==="FIREBASE"||e==="GA4"||e==="GA"||e==="SEGMENT"||e==="MIXPANEL"||e==="POSTHOG"||e==="TRACK"||e==="EVENT"?{color:o.teal600,Icon:te,label:e}:e==="AUTH"||e==="TOKEN"||e==="SESSION"||e==="JWT"||e==="LOGIN"||e==="LOGOUT"||e==="USER"?{color:o.amber600,Icon:le,label:e}:e==="SECURITY"||e==="SHIELD"||e==="PERMISSION"||e==="PERMISSIONS"?{color:o.indigo600Alt,Icon:me,label:e}:e==="NAV"||e==="NAVIGATION"||e==="ROUTE"||e==="SCREEN"||e==="ROUTER"||e==="DEEPLINK"?{color:o.indigo600Alt,Icon:M,label:e}:e==="STORAGE"||e==="ASYNCSTORAGE"||e==="MMKV"||e==="SQLITE"||e==="DB"||e==="DATABASE"||e==="REALM"||e==="CACHE"?{color:o.purple500,Icon:ce,label:e}:e==="PERF"||e==="RENDER"||e==="PERFORMANCE"||e==="FPS"||e==="MEMORY"?{color:o.violet500,Icon:ue,label:e}:e==="INIT"||e==="BOOT"||e==="STARTUP"||e==="LIFECYCLE"||e==="MOUNT"||e==="UNMOUNT"?{color:o.blue600,Icon:W,label:e}:e==="SYNC"||e==="REFRESH"||e==="BACKGROUND"||e==="JOB"||e==="WORKER"?{color:o.sky600,Icon:Te,label:e}:e==="PUSH"||e==="NOTIF"||e==="NOTIFICATION"||e==="FCM"||e==="APNS"?{color:o.darkOrange,Icon:ge,label:e}:e==="PAY"||e==="PAYMENT"||e==="STRIPE"||e==="IAP"||e==="BILLING"||e==="CHECKOUT"||e==="CART"?{color:o.emerald600,Icon:pe,label:e}:e==="DEVICE"||e==="HARDWARE"||e==="BLE"||e==="BLUETOOTH"||e==="NFC"||e==="SENSOR"?{color:o.slate600,Icon:be,label:e}:e==="LOCATION"||e==="GPS"||e==="GEO"?{color:o.emerald600,Icon:M,label:e}:e==="APP"?{color:o.indigo600Alt,Icon:ae,label:"APP"}:e==="UI"||e==="VIEW"||e==="THEME"||e==="STYLE"||e==="LAYOUT"?{color:o.pink600,Icon:he,label:e}:e==="TEST"||e==="MOCK"||e==="SPEC"?{color:o.emerald500,Icon:ee,label:"TEST"}:e==="SAMPLE"||e==="BATCH"?{color:o.indigo600Alt,Icon:re,label:e}:e==="CONFIG"||e==="ENV"||e==="SETTINGS"?{color:o.slate700,Icon:Ce,label:e}:e==="DEBUG"||e==="TRACE"?{color:o.purpleText,Icon:ye,label:e}:e==="INFO"?{color:o.sky600,Icon:Ie,label:"INFO"}:e==="SUCCESS"||e==="OK"||e==="DONE"||e==="PASSED"?{color:o.green600,Icon:fe,label:e}:e==="WARN"||e==="WARNING"?{color:o.amber600,Icon:ne,label:"WARN"}:e==="ERROR"||e==="CRASH"||e==="BUG"||e==="FATAL"||e==="EXCEPTION"||e==="FAIL"?{color:o.red600,Icon:ie,label:e==="CRASH"||e==="BUG"||e==="FATAL"||e==="EXCEPTION"||e==="FAIL"?e:"ERROR"}:{color:o.slate600,Icon:de,label:e}};return<T style={{flexDirection:"column",gap:6}}>
+        <T style={{flexDirection:"row",flexWrap:"wrap",gap:5}}>
+          {V.map((O,e)=>{const m=u(O),L=m.Icon;return<T key={e}style={[r.prefixTag,{backgroundColor:`${m.color}14`,borderColor:`${m.color}33`}]}>
+                <L color={m.color}size={10}/>
+                <I style={[r.prefixTagText,{color:m.color}]}>
+                  {m.label}
+                </I>
+              </T>})}
+        </T>
+        <F text={R}search={t}style={E}numberOfLines={B}detectLinks={!0}/>
+      </T>}return<F text={S}search={t}style={E}numberOfLines={B}detectLinks={!0}/>};export const ConsoleLogCard=z.memo(function({item:t,searchStr:E=""}){const{setSelectedLog:P}=Se(),{t:B}=v(),[h,A]=G(!1),C=Y(t.message),R=t.message.toLowerCase().includes("[analytics error]"),V=t.sourceMethod==="log",u=t.caller&&t.caller!=="Unknown"?J(t.caller,!0):null,e=(()=>{const y=(t.type||"log").toLowerCase(),x=(t.sourceMethod||y).toLowerCase();return R||y==="error"||x==="error"?{border:o.errorColor,badgeBg:`${o.errorColor}18`,badgeText:o.errorColor,label:"ERROR",cardBg:"#FFF8F8",methodBorder:`${o.errorColor}30`,methodBg:`${o.errorColor}12`,methodText:o.errorColor,textColor:o.redErrorText}:y==="warn"||x==="warn"?{border:o.amber600,badgeBg:`${o.amber600}18`,badgeText:o.amber800,label:"WARN",cardBg:"#FFFDF5",methodBorder:`${o.amber600}33`,methodBg:`${o.amber600}14`,methodText:o.amber800,textColor:o.amber800}:y==="debug"||x==="debug"?{border:o.purple500,badgeBg:`${o.purple500}18`,badgeText:o.purple,label:"DEBUG",cardBg:"#FAF8FD",methodBorder:`${o.purple500}33`,methodBg:`${o.purple500}12`,methodText:o.purple,textColor:o.purpleText}:x==="info"||y==="info"&&x!=="log"?{border:o.sky500,badgeBg:`${o.sky500}18`,badgeText:o.sky600,label:"INFO",cardBg:"#F8FAFC",methodBorder:`${o.sky500}33`,methodBg:`${o.sky500}12`,methodText:o.sky600,textColor:o.blue800}:{border:o.indigo500,badgeBg:`${o.indigo500}15`,badgeText:o.indigo600Alt,label:"LOG",cardBg:o.white,methodBorder:o.dividerColor,methodBg:o.indigo50,methodText:o.indigo600Alt,textColor:o.primaryBlack}})(),m=C?X(C.data):null,L=()=>{P(t)},U=y=>{y?.stopPropagation?.(),A(x=>!x)};return<T style={r.container}>
+      <N onPress={L}style={({pressed:y})=>[r.card,{borderLeftColor:e.border,borderLeftWidth:3.5,backgroundColor:e.cardBg},y&&r.cardPressed]}>
         
-        <View style={styles.cardHeader}>
-          <View style={styles.headerLeft}>
-            <View style={[styles.typeChip, { backgroundColor: colors.badgeBg }]}>
-              <View style={[styles.typeDot, { backgroundColor: colors.badgeText }]}/>
-              <Text style={[styles.typeChipText, { color: colors.badgeText, fontFamily: AppFonts.interBold }]}>
-                {colors.label}
-              </Text>
-            </View>
-            <View style={[
-            styles.metaChip,
-            {
-                backgroundColor: colors.methodBg,
-                borderColor: colors.methodBorder,
-            },
-        ]}>
-              <Text style={[styles.metaChipText, { color: colors.methodText, fontFamily: AppFonts.interBold }]}>
+        <T style={r.cardHeader}>
+          <T style={r.headerLeft}>
+            <T style={r.idBadge}>
+              <I style={r.idBadgeText}>
+                #{t.id!=null?t.id+1:1}
+              </I>
+            </T>
+            <T style={[r.typeChip,{backgroundColor:e.badgeBg}]}>
+              <T style={[r.typeDot,{backgroundColor:e.badgeText}]}/>
+              <I style={[r.typeChipText,{color:e.badgeText,fontFamily:b.interBold}]}>
+                {e.label}
+              </I>
+            </T>
+            <T style={[r.metaChip,{backgroundColor:e.methodBg,borderColor:e.methodBorder}]}>
+              <I style={[r.metaChipText,{color:e.methodText,fontFamily:b.interBold}]}>
                 console.
-                {('sourceMethod' in item ? item.sourceMethod : undefined) ||
-            item.type ||
-            'log'}
-              </Text>
-            </View>
-            {jsonContent && (<View style={[
-                styles.metaChip,
-                {
-                    backgroundColor: `${AppColors.teal600}14`,
-                    borderColor: `${AppColors.teal600}33`,
-                },
-            ]}>
-                <Text style={[styles.metaChipText, { color: AppColors.teal600, fontFamily: AppFonts.interBold }]}>
-                  {Array.isArray(jsonContent.data)
-                ? `Array[${jsonContent.data.length}]`
-                : `Object{${Object.keys(jsonContent.data).length}}`}
-                </Text>
-              </View>)}
-            {'duplicateCount' in item &&
-            item.duplicateCount != null &&
-            item.duplicateCount > 1 && (<View style={[
-                styles.metaChip,
-                {
-                    backgroundColor: `${AppColors.purple}1A`,
-                    borderColor: `${AppColors.purple}3D`,
-                },
-            ]}>
-                  <Text style={[styles.metaChipText, { color: AppColors.purple, fontFamily: AppFonts.interBold }]}>
-                    ×{item.duplicateCount}
-                  </Text>
-                </View>)}
-          </View>
+                {("sourceMethod"in t?t.sourceMethod:void 0)||t.type||"log"}
+              </I>
+            </T>
+            {C&&<T style={[r.metaChip,{backgroundColor:`${o.teal600}14`,borderColor:`${o.teal600}33`}]}>
+                <I style={[r.metaChipText,{color:o.teal600,fontFamily:b.interBold}]}>
+                  {Array.isArray(C.data)?`Array[${C.data.length}]`:`Object{${Object.keys(C.data).length}}`}
+                </I>
+              </T>}
+            {"duplicateCount"in t&&t.duplicateCount!=null&&t.duplicateCount>1&&<T style={[r.metaChip,{backgroundColor:`${o.purple}1A`,borderColor:`${o.purple}3D`}]}>
+                  <I style={[r.metaChipText,{color:o.purple,fontFamily:b.interBold}]}>
+                    ×{t.duplicateCount}
+                  </I>
+                </T>}
+          </T>
 
-          <View style={styles.headerRight}>
-            <CopyButton value={item.message} label={t('console.logMessage')}/>
-            <ChevronIcon color={AppColors.grayTextWeak} size={14}/>
-          </View>
-        </View>
+          <T style={r.headerRight}>
+            <Z value={t.message}label={B("console.logMessage")}/>
+            <D color={o.grayTextWeak}size={14}/>
+          </T>
+        </T>
 
         
-        <View style={styles.cardBody}>
-          {jsonContent ? (<>
-              {jsonContent.header ? (getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, isExpanded ? undefined : 2)) : null}
-              {jsonPreview && (<View style={styles.jsonPreviewContainer}>
-                  <LogSyntaxHighlighter text={jsonPreview.text} search={searchStr} style={[
-                    styles.jsonPreviewText,
-                    { color: AppColors.primaryBlack },
-                ]} detectLinks={false} numberOfLines={isExpanded ? undefined : 4}/>
-                  {jsonPreview.text.split('\n').length > 4 && (<Pressable onPress={toggleExpand} hitSlop={6} style={styles.expandToggle}>
-                      <Text style={styles.expandToggleText}>
-                        {isExpanded ? 'Show less' : 'Show full preview'}
-                      </Text>
-                      <ChevronIcon color={AppColors.purple} size={11} direction={isExpanded ? 'up' : 'down'}/>
-                    </Pressable>)}
-                </View>)}
-            </>) : (getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, isExpanded ? undefined : 4))}
-        </View>
+        <T style={r.cardBody}>
+          {C?<>
+              {C.header?$(C.header,E,[r.messageText,{color:o.primaryBlack}],r.highlight,h?void 0:2):null}
+              {m&&<T style={r.jsonPreviewContainer}>
+                  <F text={m.text}search={E}style={[r.jsonPreviewText,{color:o.primaryBlack}]}detectLinks={!1}numberOfLines={h?void 0:4}/>
+                  {m.text.split(`
+`).length>4&&<N onPress={U}hitSlop={6}style={r.expandToggle}>
+                      <I style={r.expandToggleText}>
+                        {h?"Show less":"Show full preview"}
+                      </I>
+                      <D color={o.purple}size={11}direction={h?"up":"down"}/>
+                    </N>}
+                </T>}
+            </>:$(t.message,E,[r.messageText,{color:o.primaryBlack}],r.highlight,h?void 0:4)}
+        </T>
 
         
-        <View style={styles.cardFooter}>
-          <View style={styles.footerLeft}>
-            <Text style={styles.footerId}>#{item.id + 1}</Text>
-            <View style={styles.footerDot}/>
-            <Text style={styles.footerTime}>{formatTime(item.timestamp)}</Text>
-            {parsedCaller && (<>
-                <View style={styles.footerDot}/>
-                <Pressable onPress={e => {
-                e.stopPropagation?.();
-                openInVSCode(parsedCaller.rawFilePath ||
-                    parsedCaller.fullPath ||
-                    parsedCaller.fileName, parsedCaller.lineNumber, parsedCaller.columnNumber);
-            }} hitSlop={8} style={styles.callerPill}>
-                  {parsedCaller.fileExt && parsedCaller.fileExt !== 'other' && (<View style={[
-                    styles.extBadge,
-                    {
-                        backgroundColor: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
-                            ? `${AppColors.brandPurple}22`
-                            : `${AppColors.teal600}22`,
-                    },
-                ]}>
-                      <Text style={[
-                    styles.extBadgeText,
-                    {
-                        color: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
-                            ? AppColors.brandPurple
-                            : AppColors.teal600,
-                    },
-                ]}>
-                        {parsedCaller.fileExt.toUpperCase()}
-                      </Text>
-                    </View>)}
-                  <Text style={styles.callerFileName} numberOfLines={1} ellipsizeMode="middle">
-                    {parsedCaller.fileName}
-                    {parsedCaller.lineNumber ? `:${parsedCaller.lineNumber}` : ''}
-                  </Text>
-                  <ExternalLinkIcon color={AppColors.sky600} size={8.5}/>
-                </Pressable>
-              </>)}
-          </View>
+        <T style={r.cardFooter}>
+          <T style={r.footerLeft}>
+            <Ee color={o.grayTextWeak}size={11}/>
+            <I style={r.footerTime}>{j(t.timestamp)}</I>
+            {u&&<>
+                <T style={r.footerDot}/>
+                <N onPress={y=>{y.stopPropagation?.(),Q(u.rawFilePath||u.fullPath||u.fileName,u.lineNumber,u.columnNumber)}}hitSlop={8}style={r.callerPill}>
+                  {u.fileExt&&u.fileExt!=="other"&&<T style={[r.extBadge,{backgroundColor:u.fileExt==="tsx"||u.fileExt==="ts"?`${o.brandPurple}22`:`${o.teal600}22`}]}>
+                      <I style={[r.extBadgeText,{color:u.fileExt==="tsx"||u.fileExt==="ts"?o.brandPurple:o.teal600}]}>
+                        {u.fileExt.toUpperCase()}
+                      </I>
+                    </T>}
+                  <I style={r.callerFileName}numberOfLines={1}ellipsizeMode="middle">
+                    {u.fileName}
+                    {u.lineNumber?`:${u.lineNumber}`:""}
+                  </I>
+                  <_ color={o.sky600}size={8.5}/>
+                </N>
+              </>}
+          </T>
 
-          <View style={styles.footerRight}>
-            {isAnalyticsError && (<View style={[
-                styles.footerBadge,
-                {
-                    backgroundColor: `${AppColors.skyBlue}15`,
-                    borderColor: `${AppColors.skyBlue}30`,
-                },
-            ]}>
-                <Text style={[styles.footerBadgeText, { color: AppColors.skyBlue }]}>
-                  {t('console.analyticsBadge')}
-                </Text>
-              </View>)}
-            {isUserLog && (<View style={[
-                styles.footerBadge,
-                {
-                    backgroundColor: `${AppColors.slate600}12`,
-                    borderColor: `${AppColors.slate600}26`,
-                },
-            ]}>
-                <Text style={[styles.footerBadgeText, { color: AppColors.grayTextStrong }]}>
-                  {t('console.userLogBadge')}
-                </Text>
-              </View>)}
-          </View>
-        </View>
-      </Pressable>
-    </View>);
-});
-const styles = StyleSheet.create({
-    container: {
-        paddingHorizontal: 10,
-        paddingVertical: 3.5,
-    },
-    card: {
-        alignSelf: 'stretch',
-        borderRadius: 11,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        borderLeftWidth: 3.5,
-        paddingHorizontal: 12,
-        paddingTop: 10,
-        paddingBottom: 9,
-        backgroundColor: AppColors.white,
-        shadowColor: AppColors.black,
-        shadowOpacity: 0.04,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1.5 },
-        elevation: 1.5,
-    },
-    cardPressed: {
-        opacity: 0.88,
-        transform: [{ scale: 0.995 }],
-    },
-    cardHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 6,
-        gap: 8,
-    },
-    headerLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        flexWrap: 'wrap',
-        gap: 6,
-        flex: 1,
-    },
-    headerRight: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    typeChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 7,
-        paddingVertical: 2.5,
-        borderRadius: 6,
-    },
-    typeDot: {
-        width: 5,
-        height: 5,
-        borderRadius: 2.5,
-    },
-    typeChipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.5,
-    },
-    metaChip: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 6,
-        borderWidth: 1,
-    },
-    metaChipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.2,
-    },
-    cardBody: {
-        paddingVertical: 2,
-    },
-    messageText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-        lineHeight: 18,
-    },
-    highlight: {
-        backgroundColor: AppColors.yellowHighlight,
-        color: AppColors.primaryBlack,
-        borderRadius: 2,
-    },
-    jsonPreviewContainer: {
-        marginTop: 6,
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 9,
-        paddingVertical: 7,
-    },
-    jsonPreviewText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-        lineHeight: 16,
-    },
-    expandToggle: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 4,
-        marginTop: 5,
-        paddingVertical: 2,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-    },
-    expandToggleText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.purple,
-    },
-    cardFooter: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 7,
-        paddingTop: 6,
-        borderTopWidth: 1,
-        borderTopColor: `${AppColors.dividerColor}88`,
-        gap: 6,
-    },
-    footerLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        flex: 1,
-        flexWrap: 'wrap',
-    },
-    footerRight: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-    },
-    footerDot: {
-        width: 3,
-        height: 3,
-        borderRadius: 1.5,
-        backgroundColor: AppColors.grayTextWeak,
-        opacity: 0.6,
-    },
-    footerId: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    footerTime: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.1,
-    },
-    callerPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        maxWidth: 185,
-        backgroundColor: `${AppColors.sky600}10`,
-        borderColor: `${AppColors.sky600}2B`,
-        borderWidth: 1,
-        borderRadius: 5,
-        paddingHorizontal: 5,
-        paddingVertical: 1.5,
-    },
-    extBadge: {
-        borderRadius: 3,
-        paddingHorizontal: 3.5,
-        paddingVertical: 0.5,
-    },
-    extBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8,
-    },
-    callerFileName: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.sky600,
-        fontSize: 9.5,
-    },
-    footerBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    footerBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-    },
-    prefixTag: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3.5,
-        paddingHorizontal: 6.5,
-        paddingVertical: 2,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    prefixTagText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.3,
-    },
-});
+          {R&&<T style={r.footerRight}>
+              <T style={[r.footerBadge,{backgroundColor:`${o.skyBlue}15`,borderColor:`${o.skyBlue}30`}]}>
+                <I style={[r.footerBadgeText,{color:o.skyBlue}]}>
+                  {B("console.analyticsBadge")}
+                </I>
+              </T>
+            </T>}
+        </T>
+      </N>
+    </T>});const r=K.create({container:{paddingHorizontal:10,paddingVertical:3.5},card:{alignSelf:"stretch",borderRadius:11,borderWidth:1,borderColor:o.grayBorderSecondary,borderLeftWidth:3.5,paddingHorizontal:12,paddingTop:10,paddingBottom:9,backgroundColor:o.white,shadowColor:o.black,shadowOpacity:.04,shadowRadius:3,shadowOffset:{width:0,height:1.5},elevation:1.5},cardPressed:{opacity:.88,transform:[{scale:.995}]},cardHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6,gap:8},headerLeft:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6,flex:1},idBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:6,backgroundColor:`${o.slate500}12`,borderWidth:1,borderColor:`${o.slate500}22`},idBadgeText:{fontFamily:b.interBold,fontSize:10,color:o.grayTextWeak,letterSpacing:.2},headerRight:{flexDirection:"row",alignItems:"center",gap:6},typeChip:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:2.5,borderRadius:6},typeDot:{width:5,height:5,borderRadius:2.5},typeChipText:{fontFamily:b.interBold,fontSize:9.5,letterSpacing:.5},metaChip:{paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1},metaChipText:{fontFamily:b.interBold,fontSize:9.5,letterSpacing:.2},cardBody:{paddingVertical:2},messageText:{fontFamily:b.interMedium,fontSize:12.5,color:o.primaryBlack,lineHeight:18},highlight:{backgroundColor:o.yellowHighlight,color:o.primaryBlack,borderRadius:2},jsonPreviewContainer:{marginTop:6,backgroundColor:o.grayBackground,borderRadius:8,borderWidth:1,borderColor:o.grayBorderSecondary,borderLeftWidth:3,borderLeftColor:o.teal600,paddingHorizontal:10,paddingVertical:7},jsonPreviewText:{fontFamily:b.interRegular,fontSize:11,color:o.primaryBlack,lineHeight:16},expandToggle:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,marginTop:5,paddingVertical:3,borderTopWidth:1,borderTopColor:o.dividerColor},expandToggleText:{fontFamily:b.interBold,fontSize:10.5,color:o.purple},cardFooter:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:7,paddingTop:6,borderTopWidth:1,borderTopColor:`${o.dividerColor}88`,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,flexWrap:"wrap"},footerRight:{flexDirection:"row",alignItems:"center",gap:4},footerDot:{width:3,height:3,borderRadius:1.5,backgroundColor:o.grayTextWeak,opacity:.6},footerId:{fontFamily:b.interBold,fontSize:10,color:o.grayTextWeak},footerTime:{fontFamily:b.interMedium,fontSize:10,color:o.grayTextWeak,letterSpacing:.1},callerPill:{flexDirection:"row",alignItems:"center",gap:4,maxWidth:185,backgroundColor:`${o.sky600}10`,borderColor:`${o.sky600}2B`,borderWidth:1,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5},extBadge:{borderRadius:3,paddingHorizontal:3.5,paddingVertical:.5},extBadgeText:{fontFamily:b.interBold,fontSize:8},callerFileName:{fontFamily:b.interBold,color:o.sky600,fontSize:9.5},footerBadge:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:5,borderWidth:1},footerBadgeText:{fontFamily:b.interBold,fontSize:9},prefixTag:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6.5,paddingVertical:2,borderRadius:5,borderWidth:1},prefixTagText:{fontFamily:b.interBold,fontSize:9.5,letterSpacing:.3}});