react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/JsonViewer.js

@@ -38,75 +38,70 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
+const react_i18next_1 = require("react-i18next");
 // Components
 const TreeNode_1 = __importDefault(require("./TreeNode"));
-const TouchableScale_1 = __importDefault(require("./TouchableScale"));
-// Helpers
-const helpers_1 = require("../helpers");
+const SegmentedTabs_1 = __importDefault(require("./SegmentedTabs"));
+const HighlightText_1 = __importDefault(require("./HighlightText"));
+const NetworkIcons_1 = require("./NetworkIcons");
 // Styles
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const styles_1 = __importDefault(require("../styles"));
-// ── Tab Icons ────────────────────────────────────────────────────────────────
-const PrettyIcon = ({ color = '#94A3B8', size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 16 16" fill="none">
-    <react_native_svg_1.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}/>
-    <react_native_svg_1.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}/>
-  </react_native_svg_1.default>);
-const RawIcon = ({ color = '#94A3B8', size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 16 16" fill="none">
-    <react_native_svg_1.Rect x="1" y="2" width="10" height="1.5" rx="0.75" fill={color} opacity={0.9}/>
-    <react_native_svg_1.Rect x="1" y="5.5" width="14" height="1.5" rx="0.75" fill={color} opacity={0.6}/>
-    <react_native_svg_1.Rect x="1" y="9" width="8" height="1.5" rx="0.75" fill={color} opacity={0.45}/>
-    <react_native_svg_1.Rect x="1" y="12.5" width="12" height="1.5" rx="0.75" fill={color} opacity={0.3}/>
-  </react_native_svg_1.default>);
-const TableIcon = ({ color = '#94A3B8', size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 16 16" fill="none">
-    <react_native_svg_1.Rect x="1" y="1" width="14" height="14" rx="2" stroke={color} strokeWidth={1.2} opacity={0.7}/>
-    <react_native_svg_1.Path d="M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14" stroke={color} strokeWidth={0.8} opacity={0.5}/>
-  </react_native_svg_1.default>);
 // ── JsonViewer Component ─────────────────────────────────────────────────────
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, onModeChange, }) => {
-    const [mode, setMode] = (0, react_1.useState)('pretty');
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [mode, setMode] = (0, react_1.useState)(externalMode || 'pretty');
+    const rawText = react_1.default.useMemo(() => {
+        if (typeof data === 'string') {
+            return data;
+        }
+        try {
+            return JSON.stringify(data);
+        }
+        catch {
+            return String(data);
+        }
+    }, [data]);
+    (0, react_1.useEffect)(() => {
+        if (externalMode) {
+            setMode(externalMode);
+        }
+    }, [externalMode]);
     (0, react_1.useEffect)(() => {
         onModeChange?.(mode);
     }, [mode, onModeChange]);
+    const contentWrapperStyle = [
+        localStyles.contentWrapper,
+        { backgroundColor: AppColors_1.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 = () => {
-        (0, helpers_1.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 (<react_native_1.View style={localStyles.tableRow}>
-          <react_native_1.Text style={localStyles.tableCellKey}>value</react_native_1.Text>
+          <react_native_1.Text style={localStyles.tableCellKey}>{t('network.jsonViewer.value')}</react_native_1.Text>
           <react_native_1.Text style={localStyles.tableCellValue}>{String(data)}</react_native_1.Text>
         </react_native_1.View>);
         }
         const keys = Object.keys(data);
         if (keys.length === 0) {
             return (<react_native_1.View style={localStyles.emptyTable}>
-          <react_native_1.Text style={localStyles.emptyTableText}>Empty Object</react_native_1.Text>
+          <react_native_1.Text style={localStyles.emptyTableText}>{t('network.jsonViewer.emptyTable')}</react_native_1.Text>
         </react_native_1.View>);
         }
         return (<react_native_1.View style={localStyles.tableView}>
         <react_native_1.View style={localStyles.tableHeaderRow}>
-          <react_native_1.Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>Key</react_native_1.Text>
-          <react_native_1.Text style={[localStyles.tableHeaderCell, { flex: 3 }]}>Value</react_native_1.Text>
+          <react_native_1.Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>{t('network.jsonViewer.key')}</react_native_1.Text>
+          <react_native_1.Text style={[localStyles.tableHeaderCell, { flex: 3 }]}>{t('network.jsonViewer.value')}</react_native_1.Text>
         </react_native_1.View>
         {keys.map((key) => {
                 const val = data[key];
@@ -135,68 +130,70 @@ const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHei
     // Tree View Content
     const tree = (<TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
     return (<react_native_1.View style={[localStyles.container, fullHeight && { flex: 1 }]}>
-      {/* ── Top Toolbar Bar (Postman-style) ── */}
-      <react_native_1.View style={localStyles.toolbar}>
-        {/* Left Segmented Control */}
-        <react_native_1.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_1.default key={key} onPress={() => setMode(key)} style={[
-                localStyles.segButton,
-                mode === key && localStyles.segButtonActive,
-            ]}>
-              <Icon color={mode === key ? AppColors_1.AppColors.purple : '#94A3B8'} size={12}/>
-              <react_native_1.Text style={[
-                localStyles.segText,
-                mode === key && localStyles.segTextActive,
-            ]}>
-                {label}
-              </react_native_1.Text>
-            </TouchableScale_1.default>))}
-        </react_native_1.View>
-
-        {/* Right Actions — badges & copy removed (caller provides header) */}
-
-      </react_native_1.View>
+      {/* ── Top Toolbar (Postman-style) ── */}
+      {!hideTabs && (<react_native_1.View style={localStyles.toolbar}>
+          <SegmentedTabs_1.default tabs={[
+                {
+                    key: 'pretty',
+                    label: t('network.jsonViewer.pretty'),
+                    icon: (isActive) => (<NetworkIcons_1.PrettyIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400} size={12}/>),
+                },
+                {
+                    key: 'raw',
+                    label: t('network.jsonViewer.raw'),
+                    icon: (isActive) => (<NetworkIcons_1.RawIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400} size={12}/>),
+                },
+                {
+                    key: 'table',
+                    label: t('network.jsonViewer.table'),
+                    icon: (isActive) => (<NetworkIcons_1.TableIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400} size={12}/>),
+                },
+            ]} activeKey={mode} onChange={key => setMode(key)}/>
+        </react_native_1.View>)}
 
       {/* ── Main View Content Area (Royal Monospace Theme) ── */}
-      <react_native_1.View style={[localStyles.contentWrapper, { backgroundColor: '#F8F9FB' }, fullHeight && { flex: 1, maxHeight: undefined }]}>
-        {mode === 'pretty' && (wrap ? (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
+      <react_native_1.View style={contentWrapperStyle}>
+        {mode === 'pretty' && (isEmpty ? (<react_native_1.View style={localStyles.emptyTable}>
+              <react_native_1.Text style={localStyles.emptyTableText}>
+                {t('network.emptyResponse')}
+              </react_native_1.Text>
+            </react_native_1.View>) : (wrap ? (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
                 <react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>
-              </react_native_1.ScrollView>) : (<react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>)) : (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-                <react_native_1.View style={styles_1.default.codeBlock}>{tree}</react_native_1.View>
-              </react_native_1.ScrollView>) : (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
+              </react_native_1.ScrollView>) : (<react_native_1.ScrollView style={scrollStyle} contentContainerStyle={{ flexGrow: 1 }}>
+                <react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>
+              </react_native_1.ScrollView>)) : (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
                 <react_native_1.View style={styles_1.default.codeBlock}>{tree}</react_native_1.View>
-              </react_native_1.ScrollView>)))}
+              </react_native_1.ScrollView>) : (<react_native_1.ScrollView style={scrollStyle}>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
+                  <react_native_1.View style={styles_1.default.codeBlock}>{tree}</react_native_1.View>
+                </react_native_1.ScrollView>
+              </react_native_1.ScrollView>))))}
 
-        {mode === 'raw' && (fullHeight ? (<react_native_1.ScrollView style={localStyles.rawScroll} contentContainerStyle={localStyles.rawContent}>
-              <react_native_1.Text selectable={true} style={localStyles.rawMonospaceText}>
-                {JSON.stringify(data, null, 2)}
-              </react_native_1.Text>
-            </react_native_1.ScrollView>) : (<react_native_1.View style={localStyles.rawContent}>
-              <react_native_1.Text selectable={true} style={localStyles.rawMonospaceText}>
-                {JSON.stringify(data, null, 2)}
-              </react_native_1.Text>
-            </react_native_1.View>))}
+        {mode === 'raw' && (<react_native_1.ScrollView style={scrollStyle} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true} nestedScrollEnabled={true}>
+            <HighlightText_1.default text={rawText} search={search} detectLinks={true} style={localStyles.rawPlainText} highlightStyle={{
+                backgroundColor: AppColors_1.AppColors.yellowHighlight,
+                color: AppColors_1.AppColors.primaryBlack,
+                borderRadius: 3,
+                paddingHorizontal: 2,
+            }}/>
+          </react_native_1.ScrollView>)}
 
-        {mode === 'table' && (fullHeight ? (<react_native_1.ScrollView style={localStyles.rawScroll}>
+        {mode === 'table' && (fullHeight ? (<react_native_1.ScrollView style={scrollStyle}>
               {renderTableMode()}
-            </react_native_1.ScrollView>) : (<react_native_1.View style={localStyles.rawScroll}>
+            </react_native_1.ScrollView>) : (<react_native_1.ScrollView style={scrollStyle}>
               {renderTableMode()}
-            </react_native_1.View>))}
+            </react_native_1.ScrollView>))}
       </react_native_1.View>
     </react_native_1.View>);
 };
 const localStyles = react_native_1.StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors_1.AppColors.white,
         borderRadius: 12,
         borderWidth: 1.5,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors_1.AppColors.slate200,
         overflow: 'hidden',
-        shadowColor: '#000',
+        shadowColor: AppColors_1.AppColors.black,
         shadowOpacity: 0.04,
         shadowRadius: 5,
         shadowOffset: { width: 0, height: 2 },
@@ -207,123 +204,65 @@ const localStyles = react_native_1.StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        backgroundColor: '#F8FAFC',
+        backgroundColor: AppColors_1.AppColors.slate50,
         borderBottomWidth: 1,
-        borderBottomColor: '#E2E8F0',
+        borderBottomColor: AppColors_1.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_1.AppFonts.interBold,
-        fontSize: 9.5,
-        color: '#64748B',
-        letterSpacing: 0.3,
-    },
-    segTextActive: {
-        color: AppColors_1.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_1.AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors_1.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_1.AppColors.white,
         minHeight: 120,
-        maxHeight: 480,
     },
     rawScroll: {
         flex: 1,
-        backgroundColor: '#FAF9F6', // Royal off-white paper tone
+        backgroundColor: AppColors_1.AppColors.paperBg, // Royal off-white paper tone
     },
-    rawContent: {
+    rawContainer: {
         padding: 12,
     },
-    rawMonospaceText: {
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Courier New' : 'monospace',
-        fontSize: 11.5,
-        color: '#0F172A',
-        lineHeight: 16,
+    rawPlainText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+        lineHeight: 18,
     },
     tableView: {
         flex: 1,
     },
     tableHeaderRow: {
         flexDirection: 'row',
-        backgroundColor: '#F1F5F9',
+        backgroundColor: AppColors_1.AppColors.slate100,
         borderBottomWidth: 1,
-        borderBottomColor: '#E2E8F0',
+        borderBottomColor: AppColors_1.AppColors.slate200,
         paddingVertical: 8,
         paddingHorizontal: 12,
     },
     tableHeaderCell: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9.5,
-        color: '#475569',
+        fontSize: 11,
+        color: AppColors_1.AppColors.slate600,
         letterSpacing: 0.5,
         textTransform: 'uppercase',
     },
     tableRow: {
         flexDirection: 'row',
         borderBottomWidth: 1,
-        borderBottomColor: '#F1F5F9',
+        borderBottomColor: AppColors_1.AppColors.slate100,
         paddingVertical: 10,
         paddingHorizontal: 12,
         alignItems: 'center',
     },
     tableCellKey: {
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Courier-Bold' : 'monospace',
-        fontSize: 11.5,
-        fontWeight: 'bold',
-        color: '#0F172A',
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.purple,
     },
     tableCellValue: {
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Courier' : 'monospace',
-        fontSize: 11.5,
-        color: '#475569',
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+        lineHeight: 18,
     },
     emptyTable: {
         padding: 24,
@@ -332,8 +271,8 @@ const localStyles = react_native_1.StyleSheet.create({
     },
     emptyTableText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 12,
-        color: '#94A3B8',
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.slate400,
     },
 });
 exports.default = JsonViewer;

package/dist/commonjs/components/LogCard.js

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