react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/ConsoleLogCard.js

@@ -1,104 +1,19 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConsoleLogCard = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
+const helpers_1 = require("../helpers");
 const HighlightText_1 = __importDefault(require("./HighlightText"));
 const CopyButton_1 = __importDefault(require("./CopyButton"));
 const NetworkIcons_1 = require("./NetworkIcons");
-const JsonViewer_1 = __importDefault(require("./JsonViewer"));
-const formatTime = (ts) => {
-    const d = new Date(ts);
-    const hh = String(d.getHours()).padStart(2, '0');
-    const mm = String(d.getMinutes()).padStart(2, '0');
-    const ss = String(d.getSeconds()).padStart(2, '0');
-    const ms = String(d.getMilliseconds()).padStart(3, '0');
-    return `${hh}:${mm}:${ss}.${ms}`;
-};
-const getJsonContent = (message) => {
-    if (!message)
-        return null;
-    const indices = [];
-    for (let i = 0; i < message.length; i++) {
-        if (message[i] === '{' || message[i] === '[') {
-            indices.push(i);
-        }
-    }
-    for (const index of indices) {
-        const candidate = message.substring(index).trim();
-        try {
-            const parsed = JSON.parse(candidate);
-            if (parsed !== null && typeof parsed === 'object') {
-                const header = message.substring(0, index).trim();
-                return { header, data: parsed };
-            }
-        }
-        catch (e) {
-            // Ignore
-        }
-    }
-    return null;
-};
-const getJsonPreviewText = (data) => {
-    try {
-        const formatted = JSON.stringify(data, null, 2);
-        const lines = formatted.split('\n');
-        if (lines.length > 3) {
-            return {
-                text: lines.slice(0, 3).join('\n') + '\n...',
-                hasMore: true,
-            };
-        }
-        return {
-            text: formatted,
-            hasMore: false,
-        };
-    }
-    catch (e) {
-        return {
-            text: String(data),
-            hasMore: false,
-        };
-    }
-};
+const InspectorContext_1 = require("./Inspector/InspectorContext");
 const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
     if (!message)
         return null;
@@ -114,94 +29,59 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
                 .trim()
                 .toUpperCase();
             if (cleanTag === 'API')
-                return '#0284C7';
+                return AppColors_1.AppColors.sky600;
             if (cleanTag === 'TEST')
-                return '#16A34A';
+                return AppColors_1.AppColors.green600;
             if (cleanTag === 'APP')
-                return '#4F46E5';
-            if (cleanTag === 'DETAILS')
-                return '#7C3AED';
-            if (cleanTag === 'WEBVIEW')
-                return '#EA580C';
-            if (cleanTag === 'MOCK REDUX' || cleanTag === 'REDUX')
-                return '#DB2777';
-            let hash = 0;
-            for (let i = 0; i < cleanTag.length; i++) {
-                hash = cleanTag.charCodeAt(i) + ((hash << 5) - hash);
-            }
-            const colors = [
-                '#0891B2',
-                '#0D9488',
-                '#2563EB',
-                '#D97706',
-                '#E11D48',
-                '#8B5CF6',
-            ];
-            return colors[Math.abs(hash) % colors.length];
+                return AppColors_1.AppColors.indigo600;
+            if (cleanTag === 'WARN')
+                return AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange;
+            if (cleanTag === 'ERROR')
+                return AppColors_1.AppColors.errorColor;
+            return AppColors_1.AppColors.slate600;
         };
-        return (<react_native_1.Text style={textStyle} numberOfLines={numberOfLines}>
-        {tags.map((tag, idx) => {
+        return (<react_native_1.View style={{ flexDirection: 'column', gap: 6 }}>
+        <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}>
+          {tags.map((tag, i) => {
                 const color = getTagColor(tag);
-                return (<react_native_1.Text key={idx} style={{
-                        fontWeight: 'bold',
-                        color: color,
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                    }}>
-              {tag}{' '}
-            </react_native_1.Text>);
+                return (<react_native_1.View key={i} style={[
+                        styles.prefixTag,
+                        {
+                            backgroundColor: `${color}15`,
+                            borderColor: `${color}35`,
+                        },
+                    ]}>
+                <react_native_1.Text style={[styles.prefixTagText, { color }]}>
+                  {tag.replace(/[\[\]]/g, '')}
+                </react_native_1.Text>
+              </react_native_1.View>);
             })}
-        <HighlightText_1.default text={remainingText} search={searchStr} style={textStyle} highlightStyle={highlightStyle} detectLinks={true}/>
-      </react_native_1.Text>);
+        </react_native_1.View>
+        <HighlightText_1.default text={remainingText} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>
+      </react_native_1.View>);
     }
     return (<HighlightText_1.default text={message} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
 };
-exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', isWebView = false, }) {
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    const chevronAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const jsonContent = getJsonContent(item.message);
+exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', }) {
+    const { setSelectedLog } = (0, InspectorContext_1.useInspector)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const jsonContent = (0, helpers_1.getJsonContent)(item.message);
     const isAnalyticsError = item.message
         .toLowerCase()
         .includes('[analytics error]');
-    const isUserLog = !isWebView && item.sourceMethod === 'log';
-    const caller = 'caller' in item ? item.caller : undefined;
+    const isUserLog = item.sourceMethod === 'log';
+    const parsedCaller = item.caller && item.caller !== 'Unknown'
+        ? (0, helpers_1.parseStackLine)(item.caller, true)
+        : null;
     const getLogColors = () => {
-        const isDark = AppColors_1.AppColors.primaryLight !== '#FFFFFF';
-        if (isWebView) {
-            const label = item.type.toUpperCase();
-            switch (item.type) {
-                case 'error':
-                    return {
-                        border: AppColors_1.AppColors.errorColor,
-                        badgeBg: `${AppColors_1.AppColors.errorColor}15`,
-                        badgeText: AppColors_1.AppColors.errorColor,
-                        label,
-                        cardBg: isDark ? 'rgba(239, 68, 68, 0.15)' : '#FFF5F6',
-                    };
-                case 'warn':
-                    return {
-                        border: AppColors_1.AppColors.lightOrange,
-                        badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
-                        badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange,
-                        label,
-                        cardBg: isDark ? 'rgba(245, 158, 11, 0.15)' : '#FFFDF6',
-                    };
-                default:
-                    return {
-                        border: '#475569',
-                        badgeBg: isDark ? '#374151' : '#F1F5F9',
-                        badgeText: isDark ? '#9CA3AF' : '#475569',
-                        label,
-                        cardBg: isDark ? '#1E1E24' : '#F8FAFC',
-                    };
-            }
-        }
+        const isDark = AppColors_1.AppColors.primaryLight !== AppColors_1.AppColors.white;
         if (isAnalyticsError) {
             return {
                 border: AppColors_1.AppColors.skyBlue,
                 badgeBg: `${AppColors_1.AppColors.skyBlue}15`,
                 badgeText: AppColors_1.AppColors.skyBlue,
                 label: 'ERROR',
-                cardBg: isDark ? 'rgba(96, 165, 250, 0.15)' : '#E6F2FF',
+                cardBg: isDark ? `${AppColors_1.AppColors.skyBlue}26` : AppColors_1.AppColors.blueTintBg,
             };
         }
         switch (item.type) {
@@ -211,7 +91,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.errorColor}15`,
                     badgeText: AppColors_1.AppColors.errorColor,
                     label: 'ERROR',
-                    cardBg: isDark ? 'rgba(239, 68, 68, 0.15)' : '#FFF5F6',
+                    cardBg: isDark ? `${AppColors_1.AppColors.errorColor}26` : AppColors_1.AppColors.errorCardBg,
                 };
             case 'warn':
                 return {
@@ -219,16 +99,16 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
                     badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange,
                     label: 'WARN',
-                    cardBg: isDark ? 'rgba(245, 158, 11, 0.15)' : '#FFFDF6',
+                    cardBg: isDark ? `${AppColors_1.AppColors.amber500}26` : AppColors_1.AppColors.warnCardBg,
                 };
             default:
                 if (isUserLog) {
                     return {
-                        border: '#475569',
-                        badgeBg: isDark ? '#374151' : '#E2E8F0',
-                        badgeText: isDark ? '#D1D5DB' : '#334155',
+                        border: AppColors_1.AppColors.slate600,
+                        badgeBg: isDark ? AppColors_1.AppColors.gray700 : AppColors_1.AppColors.slate200,
+                        badgeText: isDark ? AppColors_1.AppColors.gray300 : AppColors_1.AppColors.slate700,
                         label: 'INFO',
-                        cardBg: isDark ? '#1E1E24' : '#F1F5F9',
+                        cardBg: isDark ? AppColors_1.AppColors.primaryLight : AppColors_1.AppColors.slate100,
                     };
                 }
                 return {
@@ -236,279 +116,185 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.purple}15`,
                     badgeText: AppColors_1.AppColors.purple,
                     label: 'INFO',
-                    cardBg: isDark ? 'rgba(167, 139, 250, 0.12)' : '#F9F5FF',
+                    cardBg: isDark ? `${AppColors_1.AppColors.purple}1F` : AppColors_1.AppColors.purpleShade50,
                 };
         }
     };
     const colors = getLogColors();
-    (0, react_1.useEffect)(() => {
-        if (react_native_1.Platform.OS === 'android') {
-            react_native_1.UIManager.setLayoutAnimationEnabledExperimental?.(true);
-        }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        react_native_1.Animated.timing(chevronAnim, {
-            toValue: expanded ? 1 : 0,
-            duration: 180,
-            useNativeDriver: true,
-        }).start();
-    }, [chevronAnim, expanded]);
-    const toggleExpanded = () => {
-        if (react_native_1.Platform.OS === 'ios') {
-            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
-        }
-        setExpanded(prev => !prev);
+    const jsonPreview = jsonContent
+        ? (0, helpers_1.getJsonPreviewText)(jsonContent.data)
+        : null;
+    const openDetail = () => {
+        setSelectedLog(item);
     };
-    const chevronRotate = chevronAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '180deg'],
-    });
-    // Show limited lines unless expanded
-    const numLines = expanded ? undefined : 5;
-    const hasLongMessage = jsonContent
-        ? getJsonPreviewText(jsonContent.data).hasMore ||
-            jsonContent.header.length > 120 ||
-            jsonContent.header.includes('\n')
-        : item.message.length > 120 || item.message.includes('\n');
     return (<react_native_1.View style={styles.container}>
-      <react_native_1.View style={[
+      <react_native_1.Pressable onPress={openDetail} style={({ pressed }) => [
             styles.card,
             {
-                borderLeftWidth: 4,
                 borderLeftColor: colors.border,
                 backgroundColor: colors.cardBg,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                flexDirection: 'row',
-                alignItems: 'center',
-                paddingRight: 4,
             },
+            pressed && styles.cardPressed,
         ]}>
-        {/* Left Content Area */}
-        <react_native_1.Pressable onPress={toggleExpanded} style={{ flex: 1, paddingRight: 6 }}>
-          <react_native_1.View style={styles.cardHeader}>
-            <react_native_1.View style={styles.headerLeft}>
-              <CopyButton_1.default value={item.message} label="Log message"/>
-              <react_native_1.View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
-                <react_native_1.Text style={[styles.badgeText, { color: colors.badgeText }]}>
-                  {colors.label}
-                </react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={[
-            styles.badge,
+        <react_native_1.View style={styles.cardHeader}>
+          <react_native_1.View style={styles.headerLeft}>
+            <react_native_1.View style={[styles.typeChip, { backgroundColor: colors.badgeBg }]}>
+              <react_native_1.View style={[styles.typeDot, { backgroundColor: colors.badgeText }]}/>
+              <react_native_1.Text style={[styles.typeChipText, { color: colors.badgeText }]}>
+                {colors.label}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={[
+            styles.metaChip,
             {
-                backgroundColor: 'rgba(107, 78, 255, 0.08)',
-                borderColor: 'rgba(107, 78, 255, 0.2)',
-                borderWidth: 1,
+                backgroundColor: `${AppColors_1.AppColors.brandPurple}12`,
+                borderColor: `${AppColors_1.AppColors.brandPurple}30`,
             },
         ]}>
-                <react_native_1.Text style={[styles.badgeText, { color: '#6B4EFF' }]}>
-                  console.
-                  {('sourceMethod' in item ? item.sourceMethod : undefined) ||
+              <react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.brandPurple }]}>
+                console.
+                {('sourceMethod' in item ? item.sourceMethod : undefined) ||
             item.type ||
             'log'}
-                </react_native_1.Text>
-              </react_native_1.View>
-              {jsonContent && (<react_native_1.View style={[
-                styles.badge,
+              </react_native_1.Text>
+            </react_native_1.View>
+            {jsonContent && (<react_native_1.View style={[
+                styles.metaChip,
                 {
-                    backgroundColor: 'rgba(13, 148, 136, 0.08)',
-                    borderColor: 'rgba(13, 148, 136, 0.18)',
-                    borderWidth: 1,
+                    backgroundColor: `${AppColors_1.AppColors.teal600}12`,
+                    borderColor: `${AppColors_1.AppColors.teal600}2B`,
                 },
             ]}>
-                  <react_native_1.Text style={[styles.badgeText, { color: '#0D9488' }]}>
-                    {Array.isArray(jsonContent.data)
+                <react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.teal600 }]}>
+                  {Array.isArray(jsonContent.data)
                 ? `Array[${jsonContent.data.length}]`
                 : `Object{${Object.keys(jsonContent.data).length}}`}
-                  </react_native_1.Text>
-                </react_native_1.View>)}
-              {/* #9 — collapsed duplicate counter */}
-              {'duplicateCount' in item &&
+                </react_native_1.Text>
+              </react_native_1.View>)}
+            {'duplicateCount' in item &&
             item.duplicateCount != null &&
             item.duplicateCount > 1 && (<react_native_1.View style={[
-                styles.badge,
-                {
-                    backgroundColor: 'rgba(104, 75, 155, 0.1)',
-                    borderColor: 'rgba(104, 75, 155, 0.25)',
-                    borderWidth: 1,
-                },
-            ]}>
-                    <react_native_1.Text style={[
-                styles.badgeText,
-                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
-            ]}>
-                      ×{item.duplicateCount}
-                    </react_native_1.Text>
-                  </react_native_1.View>)}
-              {isAnalyticsError && (<react_native_1.View style={[
-                styles.badge,
-                { backgroundColor: `${AppColors_1.AppColors.skyBlue}15` },
-            ]}>
-                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.skyBlue }]}>
-                    Analytics
-                  </react_native_1.Text>
-                </react_native_1.View>)}
-              {isUserLog && (<react_native_1.View style={[
-                styles.badge,
-                {
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    borderWidth: 1,
-                },
-            ]}>
-                  <react_native_1.Text style={[
-                styles.badgeText,
-                { color: AppColors_1.AppColors.grayTextStrong },
-            ]}>
-                    user-log
-                  </react_native_1.Text>
-                </react_native_1.View>)}
-              {isWebView && (<react_native_1.View style={[
-                styles.badge,
+                styles.metaChip,
                 {
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    borderWidth: 1,
+                    backgroundColor: `${AppColors_1.AppColors.purple}1A`,
+                    borderColor: `${AppColors_1.AppColors.purple}3D`,
                 },
             ]}>
-                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.grayText }]}>
-                    webview
+                  <react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.purple }]}>
+                    ×{item.duplicateCount}
                   </react_native_1.Text>
                 </react_native_1.View>)}
-              <react_native_1.Text style={[styles.serialNumber, { color: AppColors_1.AppColors.grayTextWeak }]}>
-                #{item.id + 1}
-              </react_native_1.Text>
-              <react_native_1.Text style={[styles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
-                {formatTime(item.timestamp)}
-              </react_native_1.Text>
-            </react_native_1.View>
+          </react_native_1.View>
 
-            {caller && caller !== 'Unknown' && (<react_native_1.Text style={[
-                styles.callerText,
-                { color: AppColors_1.AppColors.grayTextWeak, marginRight: 4 },
-            ]} numberOfLines={1} ellipsizeMode="middle">
-                {caller.split('/').pop() || caller}
-              </react_native_1.Text>)}
+          <react_native_1.View style={styles.headerRight}>
+            <CopyButton_1.default value={item.message} label={t('console.logMessage')}/>
+            <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
           </react_native_1.View>
+        </react_native_1.View>
 
-          <react_native_1.View style={[
-            styles.cardBody,
-            {
-                backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderColor: AppColors_1.AppColors.dividerColor,
-            },
-        ]}>
-            {jsonContent ? (<>
-                {jsonContent.header ? (<react_native_1.Pressable onPress={toggleExpanded}>
-                    {getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
-                  </react_native_1.Pressable>) : null}
-                {expanded ? (<react_native_1.View style={[
-                    styles.jsonContainer,
-                    {
-                        backgroundColor: AppColors_1.AppColors.grayBackground,
-                        borderColor: AppColors_1.AppColors.dividerColor,
-                    },
-                ]}>
-                    <JsonViewer_1.default data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
-                  </react_native_1.View>) : (<react_native_1.Pressable onPress={toggleExpanded} style={[
-                    styles.jsonPreviewContainer,
-                    {
-                        backgroundColor: AppColors_1.AppColors.grayBackground,
-                        borderColor: AppColors_1.AppColors.dividerColor,
-                    },
-                ]}>
-                    <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[
+        <react_native_1.View style={styles.cardBody}>
+          {jsonContent ? (<>
+              {jsonContent.header ? (getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, 2)) : null}
+              {jsonPreview && (<react_native_1.View style={styles.jsonPreviewContainer}>
+                  <HighlightText_1.default text={jsonPreview.text} search={searchStr} style={[
                     styles.jsonPreviewText,
                     { color: AppColors_1.AppColors.primaryBlack },
-                ]} highlightStyle={styles.highlight} detectLinks={true}/>
-                  </react_native_1.Pressable>)}
-              </>) : (<react_native_1.Pressable onPress={toggleExpanded}>
-                {getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
-              </react_native_1.Pressable>)}
-            {hasLongMessage && (<react_native_1.Pressable onPress={toggleExpanded} style={styles.seeMoreBtn} hitSlop={8}>
-                <react_native_1.Text style={styles.seeMoreText}>
-                  {expanded ? 'See Less' : 'See More'}
-                </react_native_1.Text>
-              </react_native_1.Pressable>)}
-          </react_native_1.View>
+                ]} highlightStyle={styles.highlight} detectLinks={false} numberOfLines={5}/>
+                </react_native_1.View>)}
+            </>) : (getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, 3))}
+        </react_native_1.View>
 
-          {expanded && (<react_native_1.View style={[
-                styles.cardFooter,
-                { borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 },
-            ]}>
-              <react_native_1.View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 10.5,
-                color: AppColors_1.AppColors.grayTextWeak,
-            }}>
-                  Length: {item.message.length} chars • Size:{' '}
-                  {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length}{' '}
-                  bytes
-                </react_native_1.Text>
-              </react_native_1.View>
-              {caller && caller !== 'Unknown' && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    marginTop: 4,
+        <react_native_1.View style={styles.cardFooter}>
+          <react_native_1.View style={styles.footerLeft}>
+            <react_native_1.Text style={styles.footerText}>#{item.id + 1}</react_native_1.Text>
+            <react_native_1.View style={styles.footerDot}/>
+            <react_native_1.Text style={styles.footerText}>{(0, helpers_1.formatTime)(item.timestamp)}</react_native_1.Text>
+            {parsedCaller && (<>
+                <react_native_1.View style={styles.footerDot}/>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, maxWidth: 170 }}>
+                  {parsedCaller.fileExt && parsedCaller.fileExt !== 'other' && (<react_native_1.View style={{
+                    backgroundColor: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
+                        ? `${AppColors_1.AppColors.brandPurple}18`
+                        : `${AppColors_1.AppColors.teal600}18`,
+                    borderRadius: 3,
+                    paddingHorizontal: 3.5,
+                    paddingVertical: 1,
+                }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
+                        ? AppColors_1.AppColors.brandPurple
+                        : AppColors_1.AppColors.teal600,
                 }}>
-                  <react_native_1.Text style={[
-                    styles.fullCallerText,
-                    { color: AppColors_1.AppColors.grayText, flex: 1, marginRight: 8 },
-                ]} numberOfLines={2}>
-                    Caller: {caller}
+                        {parsedCaller.fileExt.toUpperCase()}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                  <react_native_1.Text style={[styles.footerText, styles.footerCaller]} numberOfLines={1} ellipsizeMode="middle">
+                    {parsedCaller.fileName}
+                    {parsedCaller.lineNumber ? `:${parsedCaller.lineNumber}` : ''}
                   </react_native_1.Text>
-                  <CopyButton_1.default value={caller} label="Caller stack frame"/>
-                </react_native_1.View>)}
-            </react_native_1.View>)}
-        </react_native_1.Pressable>
+                </react_native_1.View>
+              </>)}
+          </react_native_1.View>
 
-        {/* Right Isolated Chevron Area */}
-        <react_native_1.Pressable onPress={toggleExpanded} style={{
-            width: 28,
-            alignItems: 'center',
-            justifyContent: 'center',
-            alignSelf: expanded ? 'flex-start' : 'center',
-            marginTop: expanded ? 8 : 0,
-            height: expanded ? 32 : undefined,
-        }} hitSlop={12}>
-          <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
-            <NetworkIcons_1.ChevronIcon size={16} color={AppColors_1.AppColors.grayTextWeak}/>
-          </react_native_1.Animated.View>
-        </react_native_1.Pressable>
-      </react_native_1.View>
+          <react_native_1.View style={styles.footerRight}>
+            {isAnalyticsError && (<react_native_1.View style={[
+                styles.footerBadge,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.skyBlue}15`,
+                    borderColor: `${AppColors_1.AppColors.skyBlue}30`,
+                },
+            ]}>
+                <react_native_1.Text style={[styles.footerBadgeText, { color: AppColors_1.AppColors.skyBlue }]}>
+                  {t('console.analyticsBadge')}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+            {isUserLog && (<react_native_1.View style={[
+                styles.footerBadge,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.slate600}12`,
+                    borderColor: `${AppColors_1.AppColors.slate600}26`,
+                },
+            ]}>
+                <react_native_1.Text style={[styles.footerBadgeText, { color: AppColors_1.AppColors.grayTextStrong }]}>
+                  {t('console.userLogBadge')}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.Pressable>
     </react_native_1.View>);
 });
 const styles = react_native_1.StyleSheet.create({
     container: {
         paddingHorizontal: 12,
-        paddingVertical: 3,
+        paddingVertical: 4,
     },
     card: {
         alignSelf: 'stretch',
-        backgroundColor: '#FFFFFF',
-        borderRadius: 8,
+        borderRadius: 12,
         borderWidth: 1,
-        borderColor: '#EFEFEF',
-        padding: 8,
-        shadowColor: '#000',
-        shadowOpacity: 0.03,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-        overflow: 'hidden',
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        borderLeftWidth: 3.5,
+        padding: 12,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+    },
+    cardPressed: {
+        opacity: 0.85,
+        transform: [{ scale: 0.99 }],
     },
     cardHeader: {
-        alignSelf: 'stretch',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 6,
+        marginBottom: 8,
+        gap: 8,
     },
     headerLeft: {
         flexDirection: 'row',
@@ -517,93 +303,127 @@ const styles = react_native_1.StyleSheet.create({
         gap: 6,
         flex: 1,
     },
-    badge: {
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 4,
+    headerRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    typeChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 7,
+        paddingVertical: 2.5,
+        borderRadius: 6,
     },
-    badgeText: {
+    typeDot: {
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
+    },
+    typeChipText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9,
+        fontSize: 9.5,
         letterSpacing: 0.5,
     },
-    timestamp: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors_1.AppColors.grayTextWeak,
+    metaChip: {
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 6,
+        borderWidth: 1,
     },
-    serialNumber: {
+    metaChipText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.grayTextWeak,
-        fontSize: 11,
-    },
-    callerText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-        maxWidth: '50%',
+        fontSize: 9.5,
+        letterSpacing: 0.2,
     },
     cardBody: {
-        marginTop: 6,
-        backgroundColor: '#FFFFFF',
-        paddingHorizontal: 8,
-        paddingVertical: 5,
-        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        borderRadius: 9,
         borderWidth: 1,
-        borderColor: '#EBECEF',
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
     },
     messageText: {
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'System' : 'sans-serif',
-        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12.5,
         color: AppColors_1.AppColors.primaryBlack,
-        lineHeight: 16,
+        lineHeight: 18,
     },
     highlight: {
-        backgroundColor: '#FFE44D',
+        backgroundColor: AppColors_1.AppColors.yellowHighlight,
         color: AppColors_1.AppColors.primaryBlack,
         borderRadius: 2,
     },
-    jsonContainer: {
-        marginTop: 4,
-        backgroundColor: '#FFFFFF',
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: '#E2E8F0',
-        padding: 6,
-    },
     jsonPreviewContainer: {
-        marginTop: 4,
-        backgroundColor: '#FFFFFF',
-        borderRadius: 4,
+        marginTop: 6,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 7,
         borderWidth: 1,
-        borderColor: '#E2E8F0',
-        padding: 6,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        padding: 8,
     },
     jsonPreviewText: {
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts_1.AppFonts.interRegular,
         fontSize: 11,
         color: AppColors_1.AppColors.primaryBlack,
-        lineHeight: 15,
+        lineHeight: 16,
     },
     cardFooter: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
         marginTop: 8,
-        paddingTop: 8,
-        borderTopWidth: 1,
-        borderTopColor: AppColors_1.AppColors.dividerColor,
+        gap: 6,
+    },
+    footerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        flex: 1,
+        flexWrap: 'wrap',
     },
-    fullCallerText: {
+    footerRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    footerDot: {
+        width: 3,
+        height: 3,
+        borderRadius: 1.5,
+        backgroundColor: AppColors_1.AppColors.grayTextWeak,
+        opacity: 0.6,
+    },
+    footerText: {
         fontFamily: AppFonts_1.AppFonts.interRegular,
         fontSize: 10,
-        color: AppColors_1.AppColors.grayText,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.1,
     },
-    seeMoreBtn: {
-        marginTop: 6,
-        alignSelf: 'flex-start',
+    footerCaller: {
+        flexShrink: 1,
+    },
+    footerBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+        borderRadius: 5,
+        borderWidth: 1,
     },
-    seeMoreText: {
+    footerBadgeText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.purple,
-        textDecorationLine: 'underline',
+        fontSize: 9,
+    },
+    prefixTag: {
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    prefixTagText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.3,
     },
 });