react-native-inapp-inspector 2.3.14 → 2.3.15

package/src/components/LogCard.tsx

@@ -1,5 +1,5 @@
 import {Method} from '../types';
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useMemo} from 'react';
 import {
   Alert,
   Animated,
@@ -17,6 +17,8 @@ import {
   getDurationColor,
   formatDateTime,
   getSize,
+  getPath,
+  getBaseUrl,
 } from '../helpers';
 import {
   CalendarIcon,
@@ -30,7 +32,6 @@ import {
   PinIcon,
 } from './NetworkIcons';
 import {AppFonts} from '../styles/AppFonts';
-import styles from '../styles';
 import {LogCardProps} from '../types';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
@@ -49,6 +50,21 @@ const LogCard = React.memo(function LogCard({
   const {t} = useTranslation();
   const methodColor = METHOD_COLORS[item.method as Method] ?? METHOD_COLORS.ALL;
 
+  const urlParsed = 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 = getPath(item.url);
+      const host = getBaseUrl(item.url).replace(/^https?:\/\//, '');
+      return {host, path: path || item.url, isHttps};
+    }
+  }, [item.url]);
+
   const handleOpenUrl = (e?: any) => {
     e?.stopPropagation?.();
     Alert.alert(
@@ -86,15 +102,6 @@ const LogCard = React.memo(function LogCard({
     ? AppColors.errorColor
     : AppColors.greenColor;
 
-  const leftPercent =
-    timelineTotalRange > 0
-      ? ((item.startTime - timelineMinStart) / timelineTotalRange) * 100
-      : 0;
-  const widthPercent =
-    timelineTotalRange > 0
-      ? ((item.duration || 10) / timelineTotalRange) * 100
-      : 100;
-
   const shimmerOpacity = useRef(new Animated.Value(isNew ? 0.35 : 0)).current;
   useEffect(() => {
     if (isNew) {
@@ -106,398 +113,580 @@ const LogCard = React.memo(function LogCard({
     }
   }, [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 <ClockIcon color={AppColors.darkOrange} size={9} />;
+      return <ClockIcon color={AppColors.darkOrange} size={10} />;
     }
     const num = typeof item.status === 'number' ? item.status : parseInt(String(item.status || 0), 10);
     if (num >= 200 && num < 300) {
-      return <CircleCheckIcon color={AppColors.greenColor} size={9} />;
+      return <CircleCheckIcon color={AppColors.greenColor} size={10} />;
     }
     if (num >= 300 && num < 400) {
-      return <RepeatIcon color={AppColors.amber700} size={9} />;
+      return <RepeatIcon color={AppColors.amber700} size={10} />;
     }
     if (num >= 400 && num < 500) {
-      return <CircleAlertIcon color={AppColors.darkOrange} size={9} />;
+      return <CircleAlertIcon color={AppColors.darkOrange} size={10} />;
     }
-    return <CircleXIcon color={AppColors.errorColor} size={9} />;
+    return <CircleXIcon color={AppColors.errorColor} size={10} />;
   };
 
   const triggeredAt = formatDateTime(item.startTime);
   const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
 
   return (
-    <TouchableScale
-      onPress={onPress}
-      style={[
-        styles.card,
-        {
-          borderLeftWidth: 3.5,
-          borderLeftColor: cardStatusColor,
-        },
-      ]}>
-      <View style={styles.cardBody}>
-        {/* Row 1: Header (Checkbox, Serial, Method Badge, Client Tag, 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={AppColors.white}
-                    strokeWidth="4"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </Svg>
-              )}
-            </Pressable>
+    <View style={styles.container}>
+      <TouchableScale
+        onPress={onPress}
+        style={[
+          styles.card,
+          {
+            borderLeftWidth: 3.5,
+            borderLeftColor: cardStatusColor,
+            backgroundColor: isFailed ? '#FFF8F8' : AppColors.white,
+          },
+        ]}>
+        <View style={styles.cardBody}>
+          {/* Row 1: Header (Checkbox, Serial, Method Badge, Client Tag, Protocol, 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={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: AppColors.white}]}>
-                {item.method}
-              </Text>
-            </View>
-
-            {item.client && (
               <View
-                style={[
-                  styles.chip,
-                  {
-                    backgroundColor:
-                      item.client === 'axios'
-                        ? `${AppColors.purple}14`
-                        : item.client === 'apollo' || item.client === 'graphql'
-                        ? `${AppColors.pink500}14`
-                        : item.client === 'xhr'
-                        ? `${AppColors.amber500}14`
-                        : `${AppColors.sky500}14`,
-                    borderColor:
-                      item.client === 'axios'
-                        ? `${AppColors.purple}30`
-                        : item.client === 'apollo' || item.client === 'graphql'
-                        ? `${AppColors.pink500}30`
-                        : item.client === 'xhr'
-                        ? `${AppColors.amber500}30`
-                        : `${AppColors.sky500}30`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                  },
-                ]}>
-                <Text
+                style={[styles.methodBadge, {backgroundColor: methodColor}]}>
+                <Text style={styles.methodBadgeText}>
+                  {item.method}
+                </Text>
+              </View>
+
+              {item.client && (
+                <View
                   style={[
-                    styles.chipText,
+                    styles.chip,
                     {
-                      fontFamily: AppFonts.interBold,
-                      fontSize: 8.5,
-                      color:
+                      backgroundColor:
+                        item.client === 'axios'
+                          ? `${AppColors.purple}14`
+                          : item.client === 'apollo' || item.client === 'graphql'
+                          ? `${AppColors.pink500}14`
+                          : item.client === 'xhr'
+                          ? `${AppColors.amber500}14`
+                          : `${AppColors.sky500}14`,
+                      borderColor:
                         item.client === 'axios'
-                          ? AppColors.purple
+                          ? `${AppColors.purple}30`
                           : item.client === 'apollo' || item.client === 'graphql'
-                          ? AppColors.pink500
+                          ? `${AppColors.pink500}30`
                           : item.client === 'xhr'
-                          ? AppColors.amber700
-                          : AppColors.sky600,
+                          ? `${AppColors.amber500}30`
+                          : `${AppColors.sky500}30`,
                     },
                   ]}>
-                  {item.client.toUpperCase()}
-                </Text>
-              </View>
-            )}
+                  <Text
+                    style={[
+                      styles.chipText,
+                      {
+                        color:
+                          item.client === 'axios'
+                            ? AppColors.purple
+                            : item.client === 'apollo' || item.client === 'graphql'
+                            ? AppColors.pink500
+                            : item.client === 'xhr'
+                            ? AppColors.amber700
+                            : AppColors.sky600,
+                      },
+                    ]}>
+                    {item.client.toUpperCase()}
+                  </Text>
+                </View>
+              )}
+
+              {/* GraphQL Indicator */}
+              {(item.url.toLowerCase().includes('graphql') ||
+                item.client === 'apollo' ||
+                item.client === 'graphql') && (
+                <View
+                  style={[
+                    styles.chip,
+                    {
+                      backgroundColor: AppColors.roseBg,
+                      borderColor: AppColors.roseBorder,
+                    },
+                  ]}>
+                  <Text
+                    style={[
+                      styles.chipText,
+                      {color: AppColors.pink600},
+                    ]}>
+                    GQL
+                  </Text>
+                </View>
+              )}
+            </View>
 
-            {/* Protocol / HTTPS Badge */}
             <View
               style={[
-                styles.chip,
+                styles.statusPill,
                 {
-                  backgroundColor: item.url.toLowerCase().startsWith('https')
-                    ? AppColors.mintGreenBg
-                    : AppColors.amberWarmBg,
-                  borderColor: item.url.toLowerCase().startsWith('https')
-                    ? AppColors.mintGreenBorder
-                    : AppColors.amberWarmBorder,
-                  paddingHorizontal: 4,
-                  paddingVertical: 1,
-                  borderRadius: 4,
+                  backgroundColor: isFailed
+                    ? `${AppColors.errorColor}14`
+                    : isLoading
+                    ? `${AppColors.darkOrange}14`
+                    : `${statusColor}14`,
+                  borderColor: isFailed
+                    ? `${AppColors.errorColor}33`
+                    : isLoading
+                    ? `${AppColors.darkOrange}33`
+                    : `${statusColor}33`,
                 },
               ]}>
+              {renderStatusIcon()}
               <Text
                 style={[
-                  styles.chipText,
+                  styles.statusPillText,
                   {
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 8,
-                    color: item.url.toLowerCase().startsWith('https')
-                      ? AppColors.mintGreenText
-                      : AppColors.amber700,
+                    color: isFailed
+                      ? AppColors.errorColor
+                      : isLoading
+                      ? AppColors.darkOrange
+                      : statusColor,
                   },
                 ]}>
-                {item.url.toLowerCase().startsWith('https') ? 'HTTPS' : 'HTTP'}
+                {getStatusText()}
               </Text>
             </View>
-
-            {/* GraphQL Indicator */}
-            {(item.url.toLowerCase().includes('graphql') ||
-              item.client === 'apollo' ||
-              item.client === 'graphql') && (
-              <View
-                style={[
-                  styles.chip,
-                  {
-                    backgroundColor: AppColors.roseBg,
-                    borderColor: AppColors.roseBorder,
-                    paddingHorizontal: 4,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                  },
-                ]}>
-                <Text
-                  style={[
-                    styles.chipText,
-                    {
-                      fontFamily: AppFonts.interBold,
-                      fontSize: 8,
-                      color: AppColors.pink600,
-                    },
-                  ]}>
-                  GQL
-                </Text>
-              </View>
-            )}
-          </View>
-
-          <View
-            style={[
-              styles.statusPill,
-              {
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3.5,
-                backgroundColor: isFailed
-                  ? `${AppColors.errorColor}15`
-                  : isLoading
-                  ? `${AppColors.darkOrange}15`
-                  : `${statusColor}15`,
-                borderColor: isFailed
-                  ? `${AppColors.errorColor}30`
-                  : isLoading
-                  ? `${AppColors.darkOrange}30`
-                  : `${statusColor}30`,
-                flexShrink: 0,
-              },
-            ]}>
-            {renderStatusIcon()}
-            <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>
 
-        {/* Row 2: Full URL Capsule Container (Clickable with link prompt) */}
-        <View style={styles.cardSlugBox}>
+          {/* Row 2: Clean Smart URL Container (Path prominent, Host subtitle) */}
           <Pressable
             onPress={handleOpenUrl}
-            style={styles.slugLeft}
-            hitSlop={6}>
-            <View
-              style={{
-                width: 17,
-                height: 17,
-                borderRadius: 4,
-                backgroundColor: `${AppColors.skyBlue}1A`,
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginRight: 4,
-                flexShrink: 0,
-              }}>
-              <GlobeIcon color={AppColors.skyBlue} size={11} />
-            </View>
-            <HighlightText
-              text={item.url}
-              search={searchStr}
-              style={[styles.slugText, {color: AppColors.skyBlue, textDecorationLine: 'underline'}]}
-              highlightStyle={styles.highlight}
-              numberOfLines={2}
-              ellipsizeMode="middle"
-            />
-          </Pressable>
-
-          <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>
+            hitSlop={6}
+            style={styles.urlBox}>
+            <View style={styles.urlMainRow}>
+              <HighlightText
+                text={urlParsed.path}
+                search={searchStr}
+                style={styles.pathText}
+                highlightStyle={styles.highlight}
+                numberOfLines={2}
+                ellipsizeMode="middle"
+              />
+              <View style={styles.urlBadgeRow}>
+                {isJson && (
+                  <View style={styles.jsonBadge}>
+                    <Text style={styles.jsonBadgeText}>.json</Text>
+                  </View>
+                )}
+                {item.duplicateCount != null && item.duplicateCount > 1 && (
+                  <View style={styles.dupBadge}>
+                    <Text style={styles.dupBadgeText}>×{item.duplicateCount}</Text>
+                  </View>
+                )}
               </View>
-            )}
+            </View>
 
-            {item.duplicateCount != null && item.duplicateCount > 1 && (
-              <View
-                style={[
-                  styles.chip,
-                  {
-                    backgroundColor: `${AppColors.purple}12`,
-                    borderColor: `${AppColors.purple}28`,
-                  },
-                ]}>
-                <Text
+            {urlParsed.host ? (
+              <View style={styles.hostRow}>
+                <View
                   style={[
-                    styles.chipText,
-                    {color: AppColors.purple, fontWeight: '700'},
+                    styles.protoBadge,
+                    {
+                      backgroundColor: urlParsed.isHttps
+                        ? `${AppColors.emerald600}12`
+                        : `${AppColors.amber600}12`,
+                      borderColor: urlParsed.isHttps
+                        ? `${AppColors.emerald600}2B`
+                        : `${AppColors.amber600}2B`,
+                    },
                   ]}>
-                  ×{item.duplicateCount}
+                  <Text
+                    style={[
+                      styles.protoBadgeText,
+                      {
+                        color: urlParsed.isHttps
+                          ? AppColors.emerald600
+                          : AppColors.amber700,
+                      },
+                    ]}>
+                    {urlParsed.isHttps ? 'HTTPS' : 'HTTP'}
+                  </Text>
+                </View>
+                <Text
+                  style={styles.hostText}
+                  numberOfLines={1}
+                  ellipsizeMode="tail">
+                  {urlParsed.host}
                 </Text>
               </View>
-            )}
-          </View>
-        </View>
+            ) : null}
+          </Pressable>
+
+          {/* Row 3: Footer (Timestamp & Origin on Left, Response Size & Duration on Right) */}
+          <View style={styles.cardFooterRow}>
+            <View style={styles.footerLeft}>
+              <View style={styles.cardDateRow}>
+                <CalendarIcon color={AppColors.grayTextWeak} size={10} />
+                <Text style={styles.cardDateText}>{triggeredAt}</Text>
+              </View>
 
-        {/* Row 3: Footer (Timestamp & Origin on Left, Response Size & Duration on Right) */}
-        <View style={styles.cardFooterRow}>
-          <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, marginRight: 8}}>
-            <View style={[styles.cardDateRow, {flexShrink: 0}]}>
-              <CalendarIcon color={AppColors.grayTextWeak} size={10} />
-              <Text style={styles.cardDateText}>{triggeredAt}</Text>
+              {item.caller && item.caller !== 'Unknown' && (
+                <View style={styles.callerChip}>
+                  <PinIcon color={AppColors.sky600} size={8.5} />
+                  <Text
+                    style={styles.callerChipText}
+                    numberOfLines={1}
+                    ellipsizeMode="middle">
+                    {item.caller}
+                  </Text>
+                </View>
+              )}
             </View>
 
-            {item.caller && item.caller !== 'Unknown' && (
-              <View
-                style={[
-                  styles.chip,
-                  {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    backgroundColor: `${AppColors.skyBlue}14`,
-                    borderColor: `${AppColors.skyBlue}30`,
-                    paddingHorizontal: 5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                    flexShrink: 1,
-                    minWidth: 0,
-                  },
-                ]}>
-                <PinIcon color={AppColors.skyBlue} size={8.5} />
-                <Text
+            <View style={styles.footerRight}>
+              {item.response != null && (
+                <View style={styles.metaStatChip}>
+                  <SizeIcon color={AppColors.purple} size={9} />
+                  <Text style={styles.metaStatText}>
+                    {getSize(item.response)}
+                  </Text>
+                </View>
+              )}
+
+              {item.duration != null && !isFailed && (
+                <View
                   style={[
-                    styles.chipText,
+                    styles.metaStatChip,
                     {
-                      color: AppColors.skyBlue,
-                      fontSize: 8.5,
-                      fontFamily: AppFonts.interMedium,
+                      backgroundColor: `${durationColor}12`,
+                      borderColor: `${durationColor}2E`,
                     },
-                  ]}
-                  numberOfLines={1}
-                  ellipsizeMode="middle">
-                  {item.caller}
-                </Text>
-              </View>
-            )}
-          </View>
-
-          <View style={styles.cardFooterRight}>
-            {item.response != null && (
-              <View
-                style={[
-                  styles.chip,
-                  {
-                    backgroundColor: `${AppColors.purple}12`,
-                    borderColor: `${AppColors.purple}2E`,
-                  },
-                ]}>
-                <SizeIcon color={AppColors.purple} size={9} />
-                <Text
-                  style={[
-                    styles.chipText,
-                    {color: AppColors.purple, fontSize: 9.5},
                   ]}>
-                  {getSize(item.response)}
-                </Text>
-              </View>
-            )}
+                  <ClockIcon color={durationColor} size={9} />
+                  <Text style={[styles.metaStatText, {color: durationColor}]}>
+                    {item.duration}ms
+                  </Text>
+                </View>
+              )}
+            </View>
+          </View>
 
-            {item.duration != null && !isFailed && (
+          {/* Mini Latency Timing Waterfall Bar */}
+          {typeof item.duration === 'number' && item.duration > 0 && !isFailed && (
+            <View style={styles.waterfallContainer}>
               <View
                 style={[
-                  styles.chip,
+                  styles.waterfallBar,
                   {
-                    backgroundColor: `${durationColor}15`,
-                    borderColor: `${durationColor}30`,
+                    width: `${Math.min(100, Math.max(6, (item.duration / 1200) * 100))}%`,
+                    backgroundColor: durationColor,
                   },
-                ]}>
-                <ClockIcon color={durationColor} size={9} />
-                <Text style={[styles.chipText, {color: durationColor, fontSize: 9.5}]}>
-                  {item.duration}ms
-                </Text>
-              </View>
-            )}
-          </View>
-        </View>
-
-        {/* Mini Latency Timing Waterfall Bar */}
-        {typeof item.duration === 'number' && item.duration > 0 && !isFailed && (
-          <View style={{marginTop: 6, gap: 2}}>
-            <View
-              style={{
-                height: 2.5,
-                width: '100%',
-                backgroundColor: AppColors.grayBorderSecondary,
-                borderRadius: 1.5,
-                overflow: 'hidden',
-              }}>
-              <View
-                style={{
-                  height: '100%',
-                  width: `${Math.min(100, Math.max(6, (item.duration / 1200) * 100))}%`,
-                  backgroundColor: durationColor,
-                  borderRadius: 1.5,
-                }}
+                ]}
               />
             </View>
-          </View>
-        )}
-      </View>
-      <Animated.View
-        pointerEvents="none"
-        style={[
-          StyleSheet.absoluteFill,
-          {backgroundColor: methodColor, opacity: shimmerOpacity},
-        ]}
-      />
-    </TouchableScale>
+          )}
+        </View>
+
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            {backgroundColor: methodColor, opacity: shimmerOpacity},
+          ]}
+        />
+      </TouchableScale>
+    </View>
   );
 });
 
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 10,
+    paddingVertical: 3.5,
+  },
+  card: {
+    alignSelf: 'stretch',
+    borderRadius: 11,
+    overflow: 'hidden',
+    shadowColor: AppColors.black,
+    shadowOffset: {width: 0, height: 1.5},
+    shadowOpacity: 0.04,
+    shadowRadius: 3,
+    elevation: 1.5,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    backgroundColor: 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.grayTextWeak,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: AppColors.white,
+  },
+  smallCheckboxChecked: {
+    backgroundColor: AppColors.purple,
+    borderColor: AppColors.purple,
+  },
+  serialNumber: {
+    fontFamily: AppFonts.interBold,
+    color: AppColors.grayTextWeak,
+    fontSize: 10,
+  },
+  methodBadge: {
+    paddingHorizontal: 6.5,
+    paddingVertical: 2,
+    borderRadius: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  methodBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9.5,
+    letterSpacing: 0.5,
+    color: AppColors.white,
+  },
+  chip: {
+    paddingHorizontal: 5,
+    paddingVertical: 1.5,
+    borderRadius: 4,
+    borderWidth: 1,
+  },
+  chipText: {
+    fontFamily: 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.interBold,
+    fontSize: 9.5,
+  },
+  urlBox: {
+    backgroundColor: AppColors.grayBackground,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+    paddingHorizontal: 9,
+    paddingVertical: 6,
+    marginVertical: 4,
+    gap: 4,
+  },
+  urlMainRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 6,
+  },
+  pathText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 12,
+    lineHeight: 16.5,
+    color: AppColors.primaryBlack,
+    flex: 1,
+  },
+  urlBadgeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    flexShrink: 0,
+  },
+  jsonBadge: {
+    backgroundColor: `${AppColors.darkOrange}14`,
+    borderColor: `${AppColors.darkOrange}2E`,
+    borderWidth: 1,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 3,
+  },
+  jsonBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 8.5,
+    color: AppColors.darkOrange,
+  },
+  dupBadge: {
+    backgroundColor: `${AppColors.purple}14`,
+    borderColor: `${AppColors.purple}2E`,
+    borderWidth: 1,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 3,
+  },
+  dupBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 8.5,
+    color: AppColors.purple,
+  },
+  hostRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+  protoBadge: {
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 3,
+    borderWidth: 1,
+  },
+  protoBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 7.5,
+  },
+  hostText: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 10.5,
+    color: AppColors.grayText,
+    flex: 1,
+  },
+  highlight: {
+    backgroundColor: AppColors.yellowHighlight,
+    color: 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.interRegular,
+    fontSize: 9.5,
+    color: AppColors.grayTextWeak,
+  },
+  callerChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+    backgroundColor: `${AppColors.sky600}10`,
+    borderColor: `${AppColors.sky600}2B`,
+    borderWidth: 1,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 4,
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  callerChipText: {
+    color: AppColors.sky600,
+    fontSize: 8.5,
+    fontFamily: AppFonts.interBold,
+  },
+  metaStatChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+    backgroundColor: `${AppColors.purple}10`,
+    borderColor: `${AppColors.purple}28`,
+    borderWidth: 1,
+    paddingHorizontal: 5,
+    paddingVertical: 1.5,
+    borderRadius: 4,
+  },
+  metaStatText: {
+    fontFamily: AppFonts.interBold,
+    color: AppColors.purple,
+    fontSize: 9,
+  },
+  waterfallContainer: {
+    height: 2.5,
+    width: '100%',
+    backgroundColor: AppColors.grayBorderSecondary,
+    borderRadius: 1.5,
+    overflow: 'hidden',
+    marginTop: 6,
+  },
+  waterfallBar: {
+    height: '100%',
+    borderRadius: 1.5,
+  },
+});
+
 export default LogCard;