react-native-inapp-inspector 2.3.13 → 2.3.15

package/dist/esm/components/LogCard.js

@@ -1,18 +1,32 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo } from 'react';
 import { Alert, Animated, Linking, View, Pressable, Text, StyleSheet, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
-import { getStatusColor, getDurationColor, formatDateTime, getSize, } from '../helpers';
-import { CalendarIcon, ClockIcon, SizeIcon, GlobeIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, RepeatIcon, PinIcon, } from './NetworkIcons';
+import { getStatusColor, getDurationColor, formatDateTime, getSize, getPath, getBaseUrl, } from '../helpers';
+import { CalendarIcon, ClockIcon, SizeIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, RepeatIcon, PinIcon, } from './NetworkIcons';
 import { AppFonts } from '../styles/AppFonts';
-import styles from '../styles';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
 import { useTranslation } from '../i18n';
 const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
     const { t } = useTranslation();
     const methodColor = METHOD_COLORS[item.method] ?? METHOD_COLORS.ALL;
+    const 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) => {
         e?.stopPropagation?.();
         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}`, [
@@ -43,12 +57,6 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
         : isFailed
             ? 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) {
@@ -59,53 +67,82 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             }).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 <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={[
+    return (<View style={styles.container}>
+      <TouchableScale onPress={onPress} style={[
             styles.card,
             {
                 borderLeftWidth: 3.5,
                 borderLeftColor: cardStatusColor,
+                backgroundColor: isFailed ? '#FFF8F8' : AppColors.white,
             },
         ]}>
-      <View style={styles.cardBody}>
-        
-        <View style={styles.cardHeaderRow}>
-          <View style={styles.cardHeaderLeft}>
-            <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
+        <View style={styles.cardBody}>
+          
+          <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>
+                {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>
+              <View style={[styles.methodBadge, { backgroundColor: methodColor }]}>
+                <Text style={styles.methodBadgeText}>
+                  {item.method}
+                </Text>
+              </View>
 
-            {item.client && (<View style={[
+              {item.client && (<View style={[
                 styles.chip,
                 {
                     backgroundColor: item.client === 'axios'
@@ -122,16 +159,11 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                             : item.client === 'xhr'
                                 ? `${AppColors.amber500}30`
                                 : `${AppColors.sky500}30`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
                 },
             ]}>
-                <Text style={[
+                  <Text style={[
                 styles.chipText,
                 {
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 8.5,
                     color: item.client === 'axios'
                         ? AppColors.purple
                         : item.client === 'apollo' || item.client === 'graphql'
@@ -141,86 +173,46 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                                 : AppColors.sky600,
                 },
             ]}>
-                  {item.client.toUpperCase()}
-                </Text>
-              </View>)}
+                    {item.client.toUpperCase()}
+                  </Text>
+                </View>)}
 
-            
-            <View style={[
-            styles.chip,
-            {
-                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,
-            },
-        ]}>
-              <Text style={[
-            styles.chipText,
-            {
-                fontFamily: AppFonts.interBold,
-                fontSize: 8,
-                color: item.url.toLowerCase().startsWith('https')
-                    ? AppColors.mintGreenText
-                    : AppColors.amber700,
-            },
-        ]}>
-                {item.url.toLowerCase().startsWith('https') ? 'HTTPS' : 'HTTP'}
-              </Text>
-            </View>
-
-            
-            {(item.url.toLowerCase().includes('graphql') ||
+              
+              {(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={[
+                  <Text style={[
                 styles.chipText,
-                {
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 8,
-                    color: AppColors.pink600,
-                },
+                { color: AppColors.pink600 },
             ]}>
-                  GQL
-                </Text>
-              </View>)}
-          </View>
+                    GQL
+                  </Text>
+                </View>)}
+            </View>
 
-          <View style={[
+            <View style={[
             styles.statusPill,
             {
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3.5,
                 backgroundColor: isFailed
-                    ? `${AppColors.errorColor}15`
+                    ? `${AppColors.errorColor}14`
                     : isLoading
-                        ? `${AppColors.darkOrange}15`
-                        : `${statusColor}15`,
+                        ? `${AppColors.darkOrange}14`
+                        : `${statusColor}14`,
                 borderColor: isFailed
-                    ? `${AppColors.errorColor}30`
+                    ? `${AppColors.errorColor}33`
                     : isLoading
-                        ? `${AppColors.darkOrange}30`
-                        : `${statusColor}30`,
-                flexShrink: 0,
+                        ? `${AppColors.darkOrange}33`
+                        : `${statusColor}33`,
             },
         ]}>
-            {renderStatusIcon()}
-            <Text style={[
+              {renderStatusIcon()}
+              <Text style={[
             styles.statusPillText,
             {
                 color: isFailed
@@ -230,154 +222,363 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                         : statusColor,
             },
         ]}>
-              {isLoading
-            ? '...'
-            : isFailed
-                ? (item.status ? `${item.status}` : t('network.statusFailed'))
-                : item.status}
-            </Text>
+                {getStatusText()}
+              </Text>
+            </View>
           </View>
-        </View>
 
-        
-        <View style={styles.cardSlugBox}>
-          <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}/>
+          
+          <Pressable onPress={handleOpenUrl} 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>
-            <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,
+            {urlParsed.host ? (<View style={styles.hostRow}>
+                <View style={[
+                styles.protoBadge,
                 {
-                    backgroundColor: `${AppColors.darkOrange}12`,
-                    borderColor: `${AppColors.darkOrange}28`,
+                    backgroundColor: urlParsed.isHttps
+                        ? `${AppColors.emerald600}12`
+                        : `${AppColors.amber600}12`,
+                    borderColor: urlParsed.isHttps
+                        ? `${AppColors.emerald600}2B`
+                        : `${AppColors.amber600}2B`,
                 },
             ]}>
-                <Text style={[styles.chipText, { color: AppColors.darkOrange }]}>
-                  .json
-                </Text>
-              </View>)}
-
-            {item.duplicateCount != null && item.duplicateCount > 1 && (<View style={[
-                styles.chip,
+                  <Text style={[
+                styles.protoBadgeText,
                 {
-                    backgroundColor: `${AppColors.purple}12`,
-                    borderColor: `${AppColors.purple}28`,
+                    color: urlParsed.isHttps
+                        ? AppColors.emerald600
+                        : AppColors.amber700,
                 },
             ]}>
-                <Text style={[
-                styles.chipText,
-                { color: AppColors.purple, fontWeight: '700' },
-            ]}>
-                  ×{item.duplicateCount}
+                    {urlParsed.isHttps ? 'HTTPS' : 'HTTP'}
+                  </Text>
+                </View>
+                <Text style={styles.hostText} numberOfLines={1} ellipsizeMode="tail">
+                  {urlParsed.host}
                 </Text>
-              </View>)}
-          </View>
-        </View>
+              </View>) : null}
+          </Pressable>
+
+          
+          <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>
 
-        
-        <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 style={[
-                styles.chipText,
-                {
-                    color: AppColors.skyBlue,
-                    fontSize: 8.5,
-                    fontFamily: AppFonts.interMedium,
-                },
-            ]} numberOfLines={1} ellipsizeMode="middle">
-                  {item.caller}
-                </Text>
-              </View>)}
-          </View>
+            <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>)}
 
-          <View style={styles.cardFooterRight}>
-            {item.response != null && (<View style={[
-                styles.chip,
+              {item.duration != null && !isFailed && (<View style={[
+                styles.metaStatChip,
                 {
-                    backgroundColor: `${AppColors.purple}12`,
-                    borderColor: `${AppColors.purple}2E`,
+                    backgroundColor: `${durationColor}12`,
+                    borderColor: `${durationColor}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 && (<View style={[
-                styles.chip,
+          
+          {typeof item.duration === 'number' && item.duration > 0 && !isFailed && (<View style={styles.waterfallContainer}>
+              <View style={[
+                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>)}
         </View>
 
-        
-        {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={[
+        <Animated.View pointerEvents="none" style={[
             StyleSheet.absoluteFill,
             { backgroundColor: methodColor, opacity: shimmerOpacity },
         ]}/>
-    </TouchableScale>);
+      </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;