react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/components/JsonViewer.js

@@ -1,74 +1,69 @@
 import React, { useState, useEffect } from 'react';
-import { ScrollView, View, Text, StyleSheet, Platform } from 'react-native';
-import Svg, { Path, Rect } from 'react-native-svg';
+import { ScrollView, View, Text, StyleSheet } from 'react-native';
+import { useTranslation } from 'react-i18next';
 // Components
 import TreeNode from './TreeNode';
-import TouchableScale from './TouchableScale';
-// Helpers
-import { copyToClipboard } from '../helpers';
+import SegmentedTabs from './SegmentedTabs';
+import HighlightText from './HighlightText';
+import { PrettyIcon, RawIcon, TableIcon } from './NetworkIcons';
 // Styles
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
-// ── Tab Icons ────────────────────────────────────────────────────────────────
-const PrettyIcon = ({ color = '#94A3B8', size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-    <Path d="M5 3C3.9 3 3 3.9 3 5v1.5c0 .8-.7 1.5-1.5 1.5S0 7.3 0 6.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1zm6 0c-1.1 0-2 .9-2 2v1.5c0 .8-.7 1.5-1.5 1.5S6 9.3 6 8.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1z" fill={color} opacity={0.9}/>
-    <Path d="M3 11v1.5c0 .8.7 1.5 1.5 1.5S6 13.3 6 12.5V11H3zm7 0v1.5c0 .8.7 1.5 1.5 1.5S13 13.3 13 12.5V11H10z" fill={color} opacity={0.6}/>
-  </Svg>);
-const RawIcon = ({ color = '#94A3B8', size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-    <Rect x="1" y="2" width="10" height="1.5" rx="0.75" fill={color} opacity={0.9}/>
-    <Rect x="1" y="5.5" width="14" height="1.5" rx="0.75" fill={color} opacity={0.6}/>
-    <Rect x="1" y="9" width="8" height="1.5" rx="0.75" fill={color} opacity={0.45}/>
-    <Rect x="1" y="12.5" width="12" height="1.5" rx="0.75" fill={color} opacity={0.3}/>
-  </Svg>);
-const TableIcon = ({ color = '#94A3B8', size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-    <Rect x="1" y="1" width="14" height="14" rx="2" stroke={color} strokeWidth={1.2} opacity={0.7}/>
-    <Path d="M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14" stroke={color} strokeWidth={0.8} opacity={0.5}/>
-  </Svg>);
 // ── JsonViewer Component ─────────────────────────────────────────────────────
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, onModeChange, }) => {
-    const [mode, setMode] = useState('pretty');
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
+    const { t } = useTranslation();
+    const [mode, setMode] = useState(externalMode || 'pretty');
+    const rawText = React.useMemo(() => {
+        if (typeof data === 'string') {
+            return data;
+        }
+        try {
+            return JSON.stringify(data);
+        }
+        catch {
+            return String(data);
+        }
+    }, [data]);
+    useEffect(() => {
+        if (externalMode) {
+            setMode(externalMode);
+        }
+    }, [externalMode]);
     useEffect(() => {
         onModeChange?.(mode);
     }, [mode, onModeChange]);
+    const contentWrapperStyle = [
+        localStyles.contentWrapper,
+        { backgroundColor: AppColors.contentBg },
+        fullHeight && { flex: 1, maxHeight: undefined },
+        !fullHeight && maxHeight != null && { maxHeight },
+    ];
+    const scrollStyle = [
+        localStyles.rawScroll,
+        !fullHeight && maxHeight != null && { maxHeight },
+    ];
     // Determine type and size details
     const isObject = typeof data === 'object' && data !== null;
-    const isArray = Array.isArray(data);
-    let typeLabel = typeof data;
-    let countLabel = '';
-    if (data === null) {
-        typeLabel = 'null';
-    }
-    else if (isArray) {
-        typeLabel = 'array';
-        countLabel = `${data.length} items`;
-    }
-    else if (isObject) {
-        typeLabel = 'object';
-        countLabel = `${Object.keys(data).length} keys`;
-    }
-    // Copy helper
-    const handleCopy = () => {
-        copyToClipboard(data, 'JSON data');
-    };
+    const isEmpty = isObject && Object.keys(data).length === 0;
     // Render Table view (Key-Value flat table for root keys)
     const renderTableMode = () => {
         if (!isObject) {
             return (<View style={localStyles.tableRow}>
-          <Text style={localStyles.tableCellKey}>value</Text>
+          <Text style={localStyles.tableCellKey}>{t('network.jsonViewer.value')}</Text>
           <Text style={localStyles.tableCellValue}>{String(data)}</Text>
         </View>);
         }
         const keys = Object.keys(data);
         if (keys.length === 0) {
             return (<View style={localStyles.emptyTable}>
-          <Text style={localStyles.emptyTableText}>Empty Object</Text>
+          <Text style={localStyles.emptyTableText}>{t('network.jsonViewer.emptyTable')}</Text>
         </View>);
         }
         return (<View style={localStyles.tableView}>
         <View style={localStyles.tableHeaderRow}>
-          <Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>Key</Text>
-          <Text style={[localStyles.tableHeaderCell, { flex: 3 }]}>Value</Text>
+          <Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>{t('network.jsonViewer.key')}</Text>
+          <Text style={[localStyles.tableHeaderCell, { flex: 3 }]}>{t('network.jsonViewer.value')}</Text>
         </View>
         {keys.map((key) => {
                 const val = data[key];
@@ -97,68 +92,70 @@ const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHei
     // Tree View Content
     const tree = (<TreeNode data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
     return (<View style={[localStyles.container, fullHeight && { flex: 1 }]}>
-      {/* ── Top Toolbar Bar (Postman-style) ── */}
-      <View style={localStyles.toolbar}>
-        {/* Left Segmented Control */}
-        <View style={localStyles.segmentedControl}>
-          {[
-            { key: 'pretty', label: 'Pretty', icon: PrettyIcon },
-            { key: 'raw', label: 'Raw', icon: RawIcon },
-            { key: 'table', label: 'Table', icon: TableIcon },
-        ].map(({ key, label, icon: Icon }) => (<TouchableScale key={key} onPress={() => setMode(key)} style={[
-                localStyles.segButton,
-                mode === key && localStyles.segButtonActive,
-            ]}>
-              <Icon color={mode === key ? AppColors.purple : '#94A3B8'} size={12}/>
-              <Text style={[
-                localStyles.segText,
-                mode === key && localStyles.segTextActive,
-            ]}>
-                {label}
-              </Text>
-            </TouchableScale>))}
-        </View>
-
-        {/* Right Actions — badges & copy removed (caller provides header) */}
-
-      </View>
+      {/* ── Top Toolbar (Postman-style) ── */}
+      {!hideTabs && (<View style={localStyles.toolbar}>
+          <SegmentedTabs tabs={[
+                {
+                    key: 'pretty',
+                    label: t('network.jsonViewer.pretty'),
+                    icon: (isActive) => (<PrettyIcon color={isActive ? AppColors.white : AppColors.slate400} size={12}/>),
+                },
+                {
+                    key: 'raw',
+                    label: t('network.jsonViewer.raw'),
+                    icon: (isActive) => (<RawIcon color={isActive ? AppColors.white : AppColors.slate400} size={12}/>),
+                },
+                {
+                    key: 'table',
+                    label: t('network.jsonViewer.table'),
+                    icon: (isActive) => (<TableIcon color={isActive ? AppColors.white : AppColors.slate400} size={12}/>),
+                },
+            ]} activeKey={mode} onChange={key => setMode(key)}/>
+        </View>)}
 
       {/* ── Main View Content Area (Royal Monospace Theme) ── */}
-      <View style={[localStyles.contentWrapper, { backgroundColor: '#F8F9FB' }, fullHeight && { flex: 1, maxHeight: undefined }]}>
-        {mode === 'pretty' && (wrap ? (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
+      <View style={contentWrapperStyle}>
+        {mode === 'pretty' && (isEmpty ? (<View style={localStyles.emptyTable}>
+              <Text style={localStyles.emptyTableText}>
+                {t('network.emptyResponse')}
+              </Text>
+            </View>) : (wrap ? (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
                 <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
-              </ScrollView>) : (<View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>)) : (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-                <View style={styles.codeBlock}>{tree}</View>
-              </ScrollView>) : (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
+              </ScrollView>) : (<ScrollView style={scrollStyle} contentContainerStyle={{ flexGrow: 1 }}>
+                <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
+              </ScrollView>)) : (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
                 <View style={styles.codeBlock}>{tree}</View>
-              </ScrollView>)))}
+              </ScrollView>) : (<ScrollView style={scrollStyle}>
+                <ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
+                  <View style={styles.codeBlock}>{tree}</View>
+                </ScrollView>
+              </ScrollView>))))}
 
-        {mode === 'raw' && (fullHeight ? (<ScrollView style={localStyles.rawScroll} contentContainerStyle={localStyles.rawContent}>
-              <Text selectable={true} style={localStyles.rawMonospaceText}>
-                {JSON.stringify(data, null, 2)}
-              </Text>
-            </ScrollView>) : (<View style={localStyles.rawContent}>
-              <Text selectable={true} style={localStyles.rawMonospaceText}>
-                {JSON.stringify(data, null, 2)}
-              </Text>
-            </View>))}
+        {mode === 'raw' && (<ScrollView style={scrollStyle} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true} nestedScrollEnabled={true}>
+            <HighlightText text={rawText} search={search} detectLinks={true} style={localStyles.rawPlainText} highlightStyle={{
+                backgroundColor: AppColors.yellowHighlight,
+                color: AppColors.primaryBlack,
+                borderRadius: 3,
+                paddingHorizontal: 2,
+            }}/>
+          </ScrollView>)}
 
-        {mode === 'table' && (fullHeight ? (<ScrollView style={localStyles.rawScroll}>
+        {mode === 'table' && (fullHeight ? (<ScrollView style={scrollStyle}>
               {renderTableMode()}
-            </ScrollView>) : (<View style={localStyles.rawScroll}>
+            </ScrollView>) : (<ScrollView style={scrollStyle}>
               {renderTableMode()}
-            </View>))}
+            </ScrollView>))}
       </View>
     </View>);
 };
 const localStyles = StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors.white,
         borderRadius: 12,
         borderWidth: 1.5,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors.slate200,
         overflow: 'hidden',
-        shadowColor: '#000',
+        shadowColor: AppColors.black,
         shadowOpacity: 0.04,
         shadowRadius: 5,
         shadowOffset: { width: 0, height: 2 },
@@ -169,123 +166,65 @@ const localStyles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        backgroundColor: '#F8FAFC',
+        backgroundColor: AppColors.slate50,
         borderBottomWidth: 1,
-        borderBottomColor: '#E2E8F0',
+        borderBottomColor: AppColors.slate200,
         paddingHorizontal: 12,
         paddingVertical: 8,
     },
-    segmentedControl: {
-        flexDirection: 'row',
-        backgroundColor: '#E2E8F0',
-        borderRadius: 8,
-        padding: 2,
-    },
-    segButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 6,
-    },
-    segButtonActive: {
-        backgroundColor: '#FFFFFF',
-        shadowColor: '#000',
-        shadowOpacity: 0.08,
-        shadowRadius: 2,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-    },
-    segText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: '#64748B',
-        letterSpacing: 0.3,
-    },
-    segTextActive: {
-        color: AppColors.purple,
-    },
-    rightActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    badge: {
-        backgroundColor: 'rgba(104,75,155,0.06)',
-        borderWidth: 1,
-        borderColor: 'rgba(104,75,155,0.15)',
-        borderRadius: 5,
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
-    },
-    badgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.purple,
-    },
-    copyButton: {
-        width: 24,
-        height: 24,
-        borderRadius: 6,
-        backgroundColor: 'rgba(104,75,155,0.08)',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
     contentWrapper: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors.white,
         minHeight: 120,
-        maxHeight: 480,
     },
     rawScroll: {
         flex: 1,
-        backgroundColor: '#FAF9F6', // Royal off-white paper tone
+        backgroundColor: AppColors.paperBg, // Royal off-white paper tone
     },
-    rawContent: {
+    rawContainer: {
         padding: 12,
     },
-    rawMonospaceText: {
-        fontFamily: Platform.OS === 'ios' ? 'Courier New' : 'monospace',
-        fontSize: 11.5,
-        color: '#0F172A',
-        lineHeight: 16,
+    rawPlainText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12.5,
+        color: AppColors.primaryBlack,
+        lineHeight: 18,
     },
     tableView: {
         flex: 1,
     },
     tableHeaderRow: {
         flexDirection: 'row',
-        backgroundColor: '#F1F5F9',
+        backgroundColor: AppColors.slate100,
         borderBottomWidth: 1,
-        borderBottomColor: '#E2E8F0',
+        borderBottomColor: AppColors.slate200,
         paddingVertical: 8,
         paddingHorizontal: 12,
     },
     tableHeaderCell: {
         fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: '#475569',
+        fontSize: 11,
+        color: AppColors.slate600,
         letterSpacing: 0.5,
         textTransform: 'uppercase',
     },
     tableRow: {
         flexDirection: 'row',
         borderBottomWidth: 1,
-        borderBottomColor: '#F1F5F9',
+        borderBottomColor: AppColors.slate100,
         paddingVertical: 10,
         paddingHorizontal: 12,
         alignItems: 'center',
     },
     tableCellKey: {
-        fontFamily: Platform.OS === 'ios' ? 'Courier-Bold' : 'monospace',
-        fontSize: 11.5,
-        fontWeight: 'bold',
-        color: '#0F172A',
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.purple,
     },
     tableCellValue: {
-        fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
-        fontSize: 11.5,
-        color: '#475569',
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12.5,
+        color: AppColors.primaryBlack,
+        lineHeight: 18,
     },
     emptyTable: {
         padding: 24,
@@ -294,8 +233,8 @@ const localStyles = StyleSheet.create({
     },
     emptyTableText: {
         fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: '#94A3B8',
+        fontSize: 12.5,
+        color: AppColors.slate400,
     },
 });
 export default JsonViewer;

package/dist/esm/components/LogCard.js

@@ -3,13 +3,14 @@ import { Animated, View, Pressable, Text, StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
-import { getStatusColor, getDurationColor, getPath, getBaseUrl, formatDateTime, } from '../helpers';
-import { CalendarIcon, ClockIcon } from './NetworkIcons';
-import { AppFonts } from '../styles/AppFonts';
+import { getStatusColor, getDurationColor, getPath, getBaseUrl, formatDateTime, getSize, } from '../helpers';
+import { CalendarIcon, ClockIcon, SizeIcon } from './NetworkIcons';
 import styles from '../styles';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
+import { useTranslation } from 'react-i18next';
 const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
+    const { t } = useTranslation();
     const methodColor = METHOD_COLORS[item.method] ?? METHOD_COLORS.ALL;
     const isFailed = item.status === 0 || (item.status != null && item.status >= 400);
     const isLoading = item.status == null;
@@ -38,85 +39,137 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
     }, [isNew]);
     const path = getPath(item.url);
     const baseUrl = getBaseUrl(item.url) || item.url;
-    const showPathRow = baseUrl !== item.url && path !== '/';
+    const cleanHost = baseUrl.replace(/^https?:\/\//, '');
+    const slug = path && path !== '/' ? path : item.url;
+    const showSlug = slug !== cleanHost;
     const triggeredAt = formatDateTime(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale onPress={onPress} style={[
             styles.card,
             {
-                borderLeftWidth: 4,
+                borderLeftWidth: 3.5,
                 borderLeftColor: cardStatusColor,
             },
         ]}>
       <View style={styles.cardBody}>
-        <View style={styles.cardTopRow}>
-          <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
+        {/* Row 1: Header (Checkbox, Serial, Method Badge, Base URL / Host, Status Pill) */}
+        <View style={styles.cardHeaderRow}>
+          <View style={styles.cardHeaderLeft}>
+            <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
             styles.smallCheckbox,
             isSelected && styles.smallCheckboxChecked,
         ]}>
-            {isSelected && (<Svg width={9} height={9} viewBox="0 0 24 24" fill="none">
-                <Path d="M20 6L9 17l-5-5" stroke="#FFF" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
-              </Svg>)}
-          </Pressable>
+              {isSelected && (<Svg width={9} height={9} viewBox="0 0 24 24" fill="none">
+                  <Path d="M20 6L9 17l-5-5" stroke={AppColors.white} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
+                </Svg>)}
+            </Pressable>
 
-          <Text style={styles.serialNumber}>#{item.id + 1}</Text>
+            <Text style={styles.serialNumber}>#{item.id + 1}</Text>
 
-          <View style={[styles.methodBadge, { backgroundColor: methodColor }]}>
-            <Text style={[styles.methodBadgeText, { color: '#FFFFFF' }]}>
-              {item.method}
+            <View style={[styles.methodBadge, { backgroundColor: methodColor }]}>
+              <Text style={[styles.methodBadgeText, { color: AppColors.white }]}>
+                {item.method}
+              </Text>
+            </View>
+
+            <HighlightText text={cleanHost || item.url} search={searchStr} style={styles.cardHostText} highlightStyle={styles.highlight} numberOfLines={1} ellipsizeMode="tail"/>
+          </View>
+
+          <View style={[
+            styles.statusPill,
+            {
+                backgroundColor: isFailed
+                    ? `${AppColors.errorColor}15`
+                    : isLoading
+                        ? `${AppColors.darkOrange}15`
+                        : `${statusColor}15`,
+                borderColor: isFailed
+                    ? `${AppColors.errorColor}30`
+                    : isLoading
+                        ? `${AppColors.darkOrange}30`
+                        : `${statusColor}30`,
+            },
+        ]}>
+            <Text style={[
+            styles.statusPillText,
+            {
+                color: isFailed
+                    ? AppColors.errorColor
+                    : isLoading
+                        ? AppColors.darkOrange
+                        : statusColor,
+            },
+        ]}>
+              {isLoading
+            ? '...'
+            : isFailed
+                ? (item.status ? `${item.status}` : t('network.statusFailed'))
+                : item.status}
             </Text>
           </View>
+        </View>
 
-          <HighlightText text={baseUrl} search={searchStr} style={styles.urlPathText} highlightStyle={styles.highlight} numberOfLines={0} detectLinks={true}/>
+        {/* Row 2: Improved Slug Capsule Container */}
+        {showSlug && (<View style={styles.cardSlugBox}>
+            <View style={styles.slugLeft}>
+              <Text style={styles.slugTag}>PATH</Text>
+              <HighlightText text={slug} search={searchStr} style={styles.slugText} highlightStyle={styles.highlight} numberOfLines={1} ellipsizeMode="tail"/>
+            </View>
 
-          {isJson && (<View style={[
-                styles.chip,
-                {
-                    backgroundColor: `${AppColors.darkOrange}15`,
-                    borderColor: `${AppColors.darkOrange}30`,
-                    marginLeft: 6,
-                },
-            ]}>
-              <Text style={[styles.chipText, { color: AppColors.darkOrange }]}>
-                .json
-              </Text>
-            </View>)}
+            <View style={styles.slugRight}>
+              {isJson && (<View style={[
+                    styles.chip,
+                    {
+                        backgroundColor: `${AppColors.darkOrange}12`,
+                        borderColor: `${AppColors.darkOrange}28`,
+                    },
+                ]}>
+                  <Text style={[styles.chipText, { color: AppColors.darkOrange }]}>
+                    .json
+                  </Text>
+                </View>)}
+
+              {item.duplicateCount != null && item.duplicateCount > 1 && (<View style={[
+                    styles.chip,
+                    {
+                        backgroundColor: `${AppColors.purple}12`,
+                        borderColor: `${AppColors.purple}28`,
+                    },
+                ]}>
+                  <Text style={[
+                    styles.chipText,
+                    { color: AppColors.purple, fontWeight: '700' },
+                ]}>
+                    ×{item.duplicateCount}
+                  </Text>
+                </View>)}
+            </View>
+          </View>)}
 
-          {/* #9 — collapsed duplicate counter */}
-          {item.duplicateCount != null && item.duplicateCount > 1 && (<View style={[
+        {/* Row 3: Footer (Timestamp on Left, Response Size & Duration on Right) */}
+        <View style={styles.cardFooterRow}>
+          <View style={styles.cardDateRow}>
+            <CalendarIcon color={AppColors.grayTextWeak} size={10}/>
+            <Text style={styles.cardDateText}>{triggeredAt}</Text>
+          </View>
+
+          <View style={styles.cardFooterRight}>
+            {item.response != null && (<View style={[
                 styles.chip,
                 {
-                    backgroundColor: `${AppColors.purple}15`,
-                    borderColor: `${AppColors.purple}30`,
-                    marginLeft: 6,
+                    backgroundColor: `${AppColors.purple}12`,
+                    borderColor: `${AppColors.purple}2E`,
                 },
             ]}>
-              <Text style={[
+                <SizeIcon color={AppColors.purple} size={9}/>
+                <Text style={[
                 styles.chipText,
-                { color: AppColors.purple, fontWeight: '700' },
+                { color: AppColors.purple, fontSize: 9.5 },
             ]}>
-                ×{item.duplicateCount}
-              </Text>
-            </View>)}
-        </View>
-
-        {showPathRow && (<View style={{ flexDirection: 'row', alignItems: 'flex-start', marginTop: 3, marginBottom: 5, paddingLeft: 30, gap: 6 }}>
-            <Text style={{ color: AppColors.grayTextWeak, fontSize: 9, fontFamily: AppFonts.interBold, letterSpacing: 0.5, marginTop: 2.5 }}>PATH</Text>
-            <HighlightText text={path} search={searchStr} style={{
-                fontFamily: AppFonts.Sfprotext || 'System',
-                fontSize: 12,
-                color: AppColors.grayText,
-                flex: 1,
-            }} highlightStyle={styles.highlight} numberOfLines={0}/>
-          </View>)}
-
-        <View style={styles.cardBottomRow}>
-          <View style={styles.cardDateRow}>
-            <CalendarIcon color={AppColors.grayTextWeak} size={11}/>
-            <Text style={styles.cardDateText}>{triggeredAt}</Text>
-          </View>
+                  {getSize(item.response)}
+                </Text>
+              </View>)}
 
-          <View style={styles.cardMetaRow}>
             {item.duration != null && !isFailed && (<View style={[
                 styles.chip,
                 {
@@ -124,43 +177,13 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                     borderColor: `${durationColor}30`,
                 },
             ]}>
-                <ClockIcon color={durationColor} size={10}/>
-                <Text style={[styles.chipText, { color: durationColor }]}>
+                <ClockIcon color={durationColor} size={9}/>
+                <Text style={[styles.chipText, { color: durationColor, fontSize: 9.5 }]}>
                   {item.duration}ms
                 </Text>
               </View>)}
-
-            <View style={[
-            styles.chip,
-            {
-                backgroundColor: isFailed
-                    ? `${AppColors.errorColor}15`
-                    : `${statusColor}15`,
-                borderColor: isFailed
-                    ? `${AppColors.errorColor}30`
-                    : `${statusColor}30`,
-            },
-        ]}>
-              <Text style={[
-            styles.chipText,
-            { color: isFailed ? AppColors.errorColor : statusColor },
-        ]}>
-                {isFailed ? 'Failed' : item.status}
-              </Text>
-            </View>
           </View>
         </View>
-
-        <View style={styles.timelineTrack}>
-          <View style={[
-            styles.timelineBar,
-            {
-                left: `${Math.max(0, leftPercent)}%`,
-                width: `${Math.min(100, widthPercent)}%`,
-                backgroundColor: methodColor,
-            },
-        ]}/>
-        </View>
       </View>
       <Animated.View pointerEvents="none" style={[
             StyleSheet.absoluteFill,

package/dist/esm/components/MetaAccordion.d.ts

@@ -1,13 +1,4 @@
 import React from 'react';
-export interface MetaAccordionProps {
-    status: number | null | undefined;
-    statusColor: string;
-    duration: number | null | undefined;
-    size: string;
-    triggeredAt: string;
-    method: string;
-    contentType?: string;
-    url: string;
-}
+import { MetaAccordionProps } from '../types';
 declare const MetaAccordion: ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }: MetaAccordionProps) => React.JSX.Element;
 export default MetaAccordion;