react-native-inapp-inspector 2.3.14 → 2.3.15

package/dist/commonjs/components/LogCard.js

@@ -44,13 +44,27 @@ 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 i18n_1 = require("../i18n");
 const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
     const { t } = (0, i18n_1.useTranslation)();
     const methodColor = constants_1.METHOD_COLORS[item.method] ?? constants_1.METHOD_COLORS.ALL;
+    const urlParsed = (0, react_1.useMemo)(() => {
+        try {
+            const u = new URL(item.url);
+            const host = u.host;
+            const path = u.pathname + (u.search ? u.search : '');
+            const isHttps = u.protocol === 'https:';
+            return { host, path: path || '/', isHttps };
+        }
+        catch {
+            const isHttps = item.url.toLowerCase().startsWith('https:');
+            const path = (0, helpers_1.getPath)(item.url);
+            const host = (0, helpers_1.getBaseUrl)(item.url).replace(/^https?:\/\//, '');
+            return { host, path: path || item.url, isHttps };
+        }
+    }, [item.url]);
     const handleOpenUrl = (e) => {
         e?.stopPropagation?.();
         react_native_1.Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${item.url}`, [
@@ -81,12 +95,6 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
         : isFailed
             ? AppColors_1.AppColors.errorColor
             : AppColors_1.AppColors.greenColor;
-    const leftPercent = timelineTotalRange > 0
-        ? ((item.startTime - timelineMinStart) / timelineTotalRange) * 100
-        : 0;
-    const widthPercent = timelineTotalRange > 0
-        ? ((item.duration || 10) / timelineTotalRange) * 100
-        : 100;
     const shimmerOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(isNew ? 0.35 : 0)).current;
     (0, react_1.useEffect)(() => {
         if (isNew) {
@@ -97,54 +105,83 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             }).start();
         }
     }, [isNew]);
+    const getStatusText = () => {
+        if (isLoading)
+            return '...';
+        if (item.status === 0 || item.status == null) {
+            return t('network.statusFailed') || 'FAILED';
+        }
+        const num = typeof item.status === 'number' ? item.status : parseInt(String(item.status || 0), 10);
+        if (num === 200)
+            return '200 OK';
+        if (num === 201)
+            return '201 Created';
+        if (num === 204)
+            return '204 No Content';
+        if (num === 304)
+            return '304 Not Modified';
+        if (num === 400)
+            return '400 Bad Req';
+        if (num === 401)
+            return '401 Unauth';
+        if (num === 403)
+            return '403 Forbidden';
+        if (num === 404)
+            return '404 Not Found';
+        if (num === 500)
+            return '500 Error';
+        return String(item.status);
+    };
     const renderStatusIcon = () => {
         if (isLoading) {
-            return <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.darkOrange} size={9}/>;
+            return <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.darkOrange} size={10}/>;
         }
         const num = typeof item.status === 'number' ? item.status : parseInt(String(item.status || 0), 10);
         if (num >= 200 && num < 300) {
-            return <NetworkIcons_1.CircleCheckIcon color={AppColors_1.AppColors.greenColor} size={9}/>;
+            return <NetworkIcons_1.CircleCheckIcon color={AppColors_1.AppColors.greenColor} size={10}/>;
         }
         if (num >= 300 && num < 400) {
-            return <NetworkIcons_1.RepeatIcon color={AppColors_1.AppColors.amber700} size={9}/>;
+            return <NetworkIcons_1.RepeatIcon color={AppColors_1.AppColors.amber700} size={10}/>;
         }
         if (num >= 400 && num < 500) {
-            return <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.darkOrange} size={9}/>;
+            return <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.darkOrange} size={10}/>;
         }
-        return <NetworkIcons_1.CircleXIcon color={AppColors_1.AppColors.errorColor} size={9}/>;
+        return <NetworkIcons_1.CircleXIcon color={AppColors_1.AppColors.errorColor} size={10}/>;
     };
     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,
+    return (<react_native_1.View style={styles.container}>
+      <TouchableScale_1.default onPress={onPress} style={[
+            styles.card,
             {
                 borderLeftWidth: 3.5,
                 borderLeftColor: cardStatusColor,
+                backgroundColor: isFailed ? '#FFF8F8' : AppColors_1.AppColors.white,
             },
         ]}>
-      <react_native_1.View style={styles_1.default.cardBody}>
-        
-        <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,
+        <react_native_1.View style={styles.cardBody}>
+          
+          <react_native_1.View style={styles.cardHeaderRow}>
+            <react_native_1.View style={styles.cardHeaderLeft}>
+              <react_native_1.Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
+            styles.smallCheckbox,
+            isSelected && styles.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={AppColors_1.AppColors.white} 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.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: AppColors_1.AppColors.white }]}>
-                {item.method}
-              </react_native_1.Text>
-            </react_native_1.View>
+              <react_native_1.View style={[styles.methodBadge, { backgroundColor: methodColor }]}>
+                <react_native_1.Text style={styles.methodBadgeText}>
+                  {item.method}
+                </react_native_1.Text>
+              </react_native_1.View>
 
-            {item.client && (<react_native_1.View style={[
-                styles_1.default.chip,
+              {item.client && (<react_native_1.View style={[
+                styles.chip,
                 {
                     backgroundColor: item.client === 'axios'
                         ? `${AppColors_1.AppColors.purple}14`
@@ -160,16 +197,11 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                             : item.client === 'xhr'
                                 ? `${AppColors_1.AppColors.amber500}30`
                                 : `${AppColors_1.AppColors.sky500}30`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
                 },
             ]}>
-                <react_native_1.Text style={[
-                styles_1.default.chipText,
+                  <react_native_1.Text style={[
+                styles.chipText,
                 {
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 8.5,
                     color: item.client === 'axios'
                         ? AppColors_1.AppColors.purple
                         : item.client === 'apollo' || item.client === 'graphql'
@@ -179,87 +211,47 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                                 : AppColors_1.AppColors.sky600,
                 },
             ]}>
-                  {item.client.toUpperCase()}
-                </react_native_1.Text>
-              </react_native_1.View>)}
+                    {item.client.toUpperCase()}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
 
-            
-            <react_native_1.View style={[
-            styles_1.default.chip,
-            {
-                backgroundColor: item.url.toLowerCase().startsWith('https')
-                    ? AppColors_1.AppColors.mintGreenBg
-                    : AppColors_1.AppColors.amberWarmBg,
-                borderColor: item.url.toLowerCase().startsWith('https')
-                    ? AppColors_1.AppColors.mintGreenBorder
-                    : AppColors_1.AppColors.amberWarmBorder,
-                paddingHorizontal: 4,
-                paddingVertical: 1,
-                borderRadius: 4,
-            },
-        ]}>
-              <react_native_1.Text style={[
-            styles_1.default.chipText,
-            {
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 8,
-                color: item.url.toLowerCase().startsWith('https')
-                    ? AppColors_1.AppColors.mintGreenText
-                    : AppColors_1.AppColors.amber700,
-            },
-        ]}>
-                {item.url.toLowerCase().startsWith('https') ? 'HTTPS' : 'HTTP'}
-              </react_native_1.Text>
-            </react_native_1.View>
-
-            
-            {(item.url.toLowerCase().includes('graphql') ||
+              
+              {(item.url.toLowerCase().includes('graphql') ||
             item.client === 'apollo' ||
             item.client === 'graphql') && (<react_native_1.View style={[
-                styles_1.default.chip,
+                styles.chip,
                 {
                     backgroundColor: AppColors_1.AppColors.roseBg,
                     borderColor: AppColors_1.AppColors.roseBorder,
-                    paddingHorizontal: 4,
-                    paddingVertical: 1,
-                    borderRadius: 4,
                 },
             ]}>
-                <react_native_1.Text style={[
-                styles_1.default.chipText,
-                {
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 8,
-                    color: AppColors_1.AppColors.pink600,
-                },
+                  <react_native_1.Text style={[
+                styles.chipText,
+                { color: AppColors_1.AppColors.pink600 },
             ]}>
-                  GQL
-                </react_native_1.Text>
-              </react_native_1.View>)}
-          </react_native_1.View>
+                    GQL
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
 
-          <react_native_1.View style={[
-            styles_1.default.statusPill,
+            <react_native_1.View style={[
+            styles.statusPill,
             {
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3.5,
                 backgroundColor: isFailed
-                    ? `${AppColors_1.AppColors.errorColor}15`
+                    ? `${AppColors_1.AppColors.errorColor}14`
                     : isLoading
-                        ? `${AppColors_1.AppColors.darkOrange}15`
-                        : `${statusColor}15`,
+                        ? `${AppColors_1.AppColors.darkOrange}14`
+                        : `${statusColor}14`,
                 borderColor: isFailed
-                    ? `${AppColors_1.AppColors.errorColor}30`
+                    ? `${AppColors_1.AppColors.errorColor}33`
                     : isLoading
-                        ? `${AppColors_1.AppColors.darkOrange}30`
-                        : `${statusColor}30`,
-                flexShrink: 0,
+                        ? `${AppColors_1.AppColors.darkOrange}33`
+                        : `${statusColor}33`,
             },
         ]}>
-            {renderStatusIcon()}
-            <react_native_1.Text style={[
-            styles_1.default.statusPillText,
+              {renderStatusIcon()}
+              <react_native_1.Text style={[
+            styles.statusPillText,
             {
                 color: isFailed
                     ? AppColors_1.AppColors.errorColor
@@ -268,154 +260,363 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                         : statusColor,
             },
         ]}>
-              {isLoading
-            ? '...'
-            : isFailed
-                ? (item.status ? `${item.status}` : t('network.statusFailed'))
-                : item.status}
-            </react_native_1.Text>
+                {getStatusText()}
+              </react_native_1.Text>
+            </react_native_1.View>
           </react_native_1.View>
-        </react_native_1.View>
 
-        
-        <react_native_1.View style={styles_1.default.cardSlugBox}>
-          <react_native_1.Pressable onPress={handleOpenUrl} style={styles_1.default.slugLeft} hitSlop={6}>
-            <react_native_1.View style={{
-            width: 17,
-            height: 17,
-            borderRadius: 4,
-            backgroundColor: `${AppColors_1.AppColors.skyBlue}1A`,
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginRight: 4,
-            flexShrink: 0,
-        }}>
-              <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.skyBlue} size={11}/>
+          
+          <react_native_1.Pressable onPress={handleOpenUrl} hitSlop={6} style={styles.urlBox}>
+            <react_native_1.View style={styles.urlMainRow}>
+              <HighlightText_1.default text={urlParsed.path} search={searchStr} style={styles.pathText} highlightStyle={styles.highlight} numberOfLines={2} ellipsizeMode="middle"/>
+              <react_native_1.View style={styles.urlBadgeRow}>
+                {isJson && (<react_native_1.View style={styles.jsonBadge}>
+                    <react_native_1.Text style={styles.jsonBadgeText}>.json</react_native_1.Text>
+                  </react_native_1.View>)}
+                {item.duplicateCount != null && item.duplicateCount > 1 && (<react_native_1.View style={styles.dupBadge}>
+                    <react_native_1.Text style={styles.dupBadgeText}>×{item.duplicateCount}</react_native_1.Text>
+                  </react_native_1.View>)}
+              </react_native_1.View>
             </react_native_1.View>
-            <HighlightText_1.default text={item.url} search={searchStr} style={[styles_1.default.slugText, { color: AppColors_1.AppColors.skyBlue, textDecorationLine: 'underline' }]} highlightStyle={styles_1.default.highlight} numberOfLines={2} ellipsizeMode="middle"/>
-          </react_native_1.Pressable>
 
-          <react_native_1.View style={styles_1.default.slugRight}>
-            {isJson && (<react_native_1.View style={[
-                styles_1.default.chip,
+            {urlParsed.host ? (<react_native_1.View style={styles.hostRow}>
+                <react_native_1.View style={[
+                styles.protoBadge,
                 {
-                    backgroundColor: `${AppColors_1.AppColors.darkOrange}12`,
-                    borderColor: `${AppColors_1.AppColors.darkOrange}28`,
+                    backgroundColor: urlParsed.isHttps
+                        ? `${AppColors_1.AppColors.emerald600}12`
+                        : `${AppColors_1.AppColors.amber600}12`,
+                    borderColor: urlParsed.isHttps
+                        ? `${AppColors_1.AppColors.emerald600}2B`
+                        : `${AppColors_1.AppColors.amber600}2B`,
                 },
             ]}>
-                <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,
+                  <react_native_1.Text style={[
+                styles.protoBadgeText,
                 {
-                    backgroundColor: `${AppColors_1.AppColors.purple}12`,
-                    borderColor: `${AppColors_1.AppColors.purple}28`,
+                    color: urlParsed.isHttps
+                        ? AppColors_1.AppColors.emerald600
+                        : AppColors_1.AppColors.amber700,
                 },
             ]}>
-                <react_native_1.Text style={[
-                styles_1.default.chipText,
-                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
-            ]}>
-                  ×{item.duplicateCount}
+                    {urlParsed.isHttps ? 'HTTPS' : 'HTTP'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.hostText} numberOfLines={1} ellipsizeMode="tail">
+                  {urlParsed.host}
                 </react_native_1.Text>
-              </react_native_1.View>)}
-          </react_native_1.View>
-        </react_native_1.View>
+              </react_native_1.View>) : null}
+          </react_native_1.Pressable>
+
+          
+          <react_native_1.View style={styles.cardFooterRow}>
+            <react_native_1.View style={styles.footerLeft}>
+              <react_native_1.View style={styles.cardDateRow}>
+                <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
+                <react_native_1.Text style={styles.cardDateText}>{triggeredAt}</react_native_1.Text>
+              </react_native_1.View>
 
-        
-        <react_native_1.View style={styles_1.default.cardFooterRow}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, marginRight: 8 }}>
-            <react_native_1.View style={[styles_1.default.cardDateRow, { flexShrink: 0 }]}>
-              <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
-              <react_native_1.Text style={styles_1.default.cardDateText}>{triggeredAt}</react_native_1.Text>
+              {item.caller && item.caller !== 'Unknown' && (<react_native_1.View style={styles.callerChip}>
+                  <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.sky600} size={8.5}/>
+                  <react_native_1.Text style={styles.callerChipText} numberOfLines={1} ellipsizeMode="middle">
+                    {item.caller}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
             </react_native_1.View>
 
-            {item.caller && item.caller !== 'Unknown' && (<react_native_1.View style={[
-                styles_1.default.chip,
-                {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    backgroundColor: `${AppColors_1.AppColors.skyBlue}14`,
-                    borderColor: `${AppColors_1.AppColors.skyBlue}30`,
-                    paddingHorizontal: 5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                    flexShrink: 1,
-                    minWidth: 0,
-                },
-            ]}>
-                <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.skyBlue} size={8.5}/>
-                <react_native_1.Text style={[
-                styles_1.default.chipText,
-                {
-                    color: AppColors_1.AppColors.skyBlue,
-                    fontSize: 8.5,
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                },
-            ]} numberOfLines={1} ellipsizeMode="middle">
-                  {item.caller}
-                </react_native_1.Text>
-              </react_native_1.View>)}
-          </react_native_1.View>
+            <react_native_1.View style={styles.footerRight}>
+              {item.response != null && (<react_native_1.View style={styles.metaStatChip}>
+                  <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.purple} size={9}/>
+                  <react_native_1.Text style={styles.metaStatText}>
+                    {(0, helpers_1.getSize)(item.response)}
+                  </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,
+              {item.duration != null && !isFailed && (<react_native_1.View style={[
+                styles.metaStatChip,
                 {
-                    backgroundColor: `${AppColors_1.AppColors.purple}12`,
-                    borderColor: `${AppColors_1.AppColors.purple}2E`,
+                    backgroundColor: `${durationColor}12`,
+                    borderColor: `${durationColor}2E`,
                 },
             ]}>
-                <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.purple} size={9}/>
-                <react_native_1.Text style={[
-                styles_1.default.chipText,
-                { color: AppColors_1.AppColors.purple, fontSize: 9.5 },
-            ]}>
-                  {(0, helpers_1.getSize)(item.response)}
-                </react_native_1.Text>
-              </react_native_1.View>)}
+                  <NetworkIcons_1.ClockIcon color={durationColor} size={9}/>
+                  <react_native_1.Text style={[styles.metaStatText, { color: durationColor }]}>
+                    {item.duration}ms
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </react_native_1.View>
 
-            {item.duration != null && !isFailed && (<react_native_1.View style={[
-                styles_1.default.chip,
+          
+          {typeof item.duration === 'number' && item.duration > 0 && !isFailed && (<react_native_1.View style={styles.waterfallContainer}>
+              <react_native_1.View style={[
+                styles.waterfallBar,
                 {
-                    backgroundColor: `${durationColor}15`,
-                    borderColor: `${durationColor}30`,
+                    width: `${Math.min(100, Math.max(6, (item.duration / 1200) * 100))}%`,
+                    backgroundColor: 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>
+            ]}/>
+            </react_native_1.View>)}
         </react_native_1.View>
 
-        
-        {typeof item.duration === 'number' && item.duration > 0 && !isFailed && (<react_native_1.View style={{ marginTop: 6, gap: 2 }}>
-            <react_native_1.View style={{
-                height: 2.5,
-                width: '100%',
-                backgroundColor: AppColors_1.AppColors.grayBorderSecondary,
-                borderRadius: 1.5,
-                overflow: 'hidden',
-            }}>
-              <react_native_1.View style={{
-                height: '100%',
-                width: `${Math.min(100, Math.max(6, (item.duration / 1200) * 100))}%`,
-                backgroundColor: durationColor,
-                borderRadius: 1.5,
-            }}/>
-            </react_native_1.View>
-          </react_native_1.View>)}
-      </react_native_1.View>
-      <react_native_1.Animated.View pointerEvents="none" style={[
+        <react_native_1.Animated.View pointerEvents="none" style={[
             react_native_1.StyleSheet.absoluteFill,
             { backgroundColor: methodColor, opacity: shimmerOpacity },
         ]}/>
-    </TouchableScale_1.default>);
+      </TouchableScale_1.default>
+    </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        paddingHorizontal: 10,
+        paddingVertical: 3.5,
+    },
+    card: {
+        alignSelf: 'stretch',
+        borderRadius: 11,
+        overflow: 'hidden',
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 1.5 },
+        shadowOpacity: 0.04,
+        shadowRadius: 3,
+        elevation: 1.5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        backgroundColor: AppColors_1.AppColors.white,
+    },
+    cardBody: {
+        paddingHorizontal: 12,
+        paddingTop: 9,
+        paddingBottom: 8,
+    },
+    cardHeaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 6,
+        minHeight: 22,
+    },
+    cardHeaderLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        marginRight: 6,
+        gap: 5.5,
+        minWidth: 0,
+        flexWrap: 'wrap',
+    },
+    smallCheckbox: {
+        width: 15,
+        height: 15,
+        borderRadius: 4,
+        borderWidth: 1.6,
+        borderColor: AppColors_1.AppColors.grayTextWeak,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.white,
+    },
+    smallCheckboxChecked: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    serialNumber: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.grayTextWeak,
+        fontSize: 10,
+    },
+    methodBadge: {
+        paddingHorizontal: 6.5,
+        paddingVertical: 2,
+        borderRadius: 5,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    methodBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.5,
+        color: AppColors_1.AppColors.white,
+    },
+    chip: {
+        paddingHorizontal: 5,
+        paddingVertical: 1.5,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    chipText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+    },
+    statusPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 7,
+        paddingVertical: 2.5,
+        borderRadius: 6,
+        borderWidth: 1,
+        flexShrink: 0,
+    },
+    statusPillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+    },
+    urlBox: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        paddingHorizontal: 9,
+        paddingVertical: 6,
+        marginVertical: 4,
+        gap: 4,
+    },
+    urlMainRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        gap: 6,
+    },
+    pathText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        lineHeight: 16.5,
+        color: AppColors_1.AppColors.primaryBlack,
+        flex: 1,
+    },
+    urlBadgeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        flexShrink: 0,
+    },
+    jsonBadge: {
+        backgroundColor: `${AppColors_1.AppColors.darkOrange}14`,
+        borderColor: `${AppColors_1.AppColors.darkOrange}2E`,
+        borderWidth: 1,
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+        borderRadius: 3,
+    },
+    jsonBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+        color: AppColors_1.AppColors.darkOrange,
+    },
+    dupBadge: {
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        borderColor: `${AppColors_1.AppColors.purple}2E`,
+        borderWidth: 1,
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+        borderRadius: 3,
+    },
+    dupBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+        color: AppColors_1.AppColors.purple,
+    },
+    hostRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    protoBadge: {
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+        borderRadius: 3,
+        borderWidth: 1,
+    },
+    protoBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 7.5,
+    },
+    hostText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayText,
+        flex: 1,
+    },
+    highlight: {
+        backgroundColor: AppColors_1.AppColors.yellowHighlight,
+        color: AppColors_1.AppColors.primaryBlack,
+        borderRadius: 2,
+    },
+    cardFooterRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 4,
+        gap: 6,
+    },
+    footerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flex: 1,
+        minWidth: 0,
+    },
+    footerRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        flexShrink: 0,
+    },
+    cardDateRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3.5,
+    },
+    cardDateText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    callerChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: `${AppColors_1.AppColors.sky600}10`,
+        borderColor: `${AppColors_1.AppColors.sky600}2B`,
+        borderWidth: 1,
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 4,
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    callerChipText: {
+        color: AppColors_1.AppColors.sky600,
+        fontSize: 8.5,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
+    metaStatChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: `${AppColors_1.AppColors.purple}10`,
+        borderColor: `${AppColors_1.AppColors.purple}28`,
+        borderWidth: 1,
+        paddingHorizontal: 5,
+        paddingVertical: 1.5,
+        borderRadius: 4,
+    },
+    metaStatText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.purple,
+        fontSize: 9,
+    },
+    waterfallContainer: {
+        height: 2.5,
+        width: '100%',
+        backgroundColor: AppColors_1.AppColors.grayBorderSecondary,
+        borderRadius: 1.5,
+        overflow: 'hidden',
+        marginTop: 6,
+    },
+    waterfallBar: {
+        height: '100%',
+        borderRadius: 1.5,
+    },
 });
 exports.default = LogCard;