react-native-inapp-inspector 1.1.25 → 1.1.26

package/dist/commonjs/components/Inspector/CrashTab.js

@@ -0,0 +1,727 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const i18n_1 = require("../../i18n");
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
+const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
+const HighlightText_1 = __importDefault(require("../HighlightText"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const crashHandler_1 = require("../../customHooks/crashHandler");
+const CrashFilterModal_1 = __importStar(require("./CrashFilterModal"));
+const NetworkIcons_1 = require("../NetworkIcons");
+const getRelativeTime = (timestamp) => {
+    const now = Date.now();
+    const diff = Math.max(0, now - timestamp);
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (seconds < 60)
+        return `${seconds}s ago`;
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    if (hours < 24)
+        return `${hours}h ago`;
+    return `${days}d ago`;
+};
+const CrashTab = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.useTranslation)();
+    const { crashRecords, selectedCrash, setSelectedCrash } = (0, InspectorContext_1.useInspector)();
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [filterType, setFilterType] = (0, react_1.useState)('all');
+    const [crashFilters, setCrashFilters] = (0, react_1.useState)(CrashFilterModal_1.DEFAULT_CRASH_FILTERS);
+    const [isFilterModalOpen, setIsFilterModalOpen] = (0, react_1.useState)(false);
+    const [detailSubTab, setDetailSubTab] = (0, react_1.useState)('stack');
+    // Auto-open the latest crash detail on first visit if crashes exist
+    const hasAutoOpened = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        if (!hasAutoOpened.current && !selectedCrash && crashRecords.length > 0) {
+            setSelectedCrash(crashRecords[0]);
+            hasAutoOpened.current = true;
+        }
+    }, [crashRecords, selectedCrash, setSelectedCrash]);
+    // Calculate statistics
+    const stats = (0, react_1.useMemo)(() => {
+        const total = crashRecords.length;
+        let fatalCount = 0;
+        let jsCount = 0;
+        let promiseCount = 0;
+        let renderCount = 0;
+        let nativeCount = 0;
+        crashRecords.forEach(c => {
+            if (c.isFatal)
+                fatalCount++;
+            if (c.type === 'js')
+                jsCount++;
+            else if (c.type === 'promise')
+                promiseCount++;
+            else if (c.type === 'render')
+                renderCount++;
+            else if (c.type === 'native')
+                nativeCount++;
+        });
+        return { total, fatalCount, jsCount, promiseCount, renderCount, nativeCount };
+    }, [crashRecords]);
+    // Filtered crash list
+    const filteredList = (0, react_1.useMemo)(() => {
+        let list = crashRecords.filter(item => {
+            // Type filter
+            if (filterType === 'fatal' && !item.isFatal)
+                return false;
+            if (filterType === 'js' && item.type !== 'js')
+                return false;
+            if (filterType === 'promise' && item.type !== 'promise')
+                return false;
+            if (filterType === 'render' && item.type !== 'render')
+                return false;
+            if (filterType === 'native' && item.type !== 'native')
+                return false;
+            // Modal filters: crash types
+            if (crashFilters.types.size > 0 && !crashFilters.types.has('all')) {
+                const matches = (crashFilters.types.has('fatal') && item.isFatal) ||
+                    (crashFilters.types.has('js') && item.type === 'js') ||
+                    (crashFilters.types.has('promise') && item.type === 'promise') ||
+                    (crashFilters.types.has('render') && item.type === 'render') ||
+                    (crashFilters.types.has('native') && item.type === 'native');
+                if (!matches)
+                    return false;
+            }
+            // Modal filters: time window
+            if (crashFilters.timeWindow !== 'all') {
+                const now = Date.now();
+                const cutoff = crashFilters.timeWindow === '15m'
+                    ? now - 15 * 60 * 1000
+                    : crashFilters.timeWindow === '1h'
+                        ? now - 60 * 60 * 1000
+                        : crashFilters.timeWindow === '24h'
+                            ? now - 24 * 60 * 60 * 1000
+                            : now - 7 * 24 * 60 * 60 * 1000;
+                if (item.timestamp < cutoff)
+                    return false;
+            }
+            // Modal filters: platform
+            if (crashFilters.platform !== 'all') {
+                const platform = (item.deviceInfo?.platform || '').toLowerCase();
+                if (platform !== crashFilters.platform)
+                    return false;
+            }
+            // Modal filters: engine
+            if (crashFilters.engine !== 'all') {
+                const isHermes = item.deviceInfo?.isHermes;
+                if (crashFilters.engine === 'hermes' && isHermes !== true)
+                    return false;
+                if (crashFilters.engine === 'jsc' && (isHermes === true))
+                    return false;
+            }
+            // Search filter
+            if (searchQuery.trim().length > 0) {
+                const q = searchQuery.toLowerCase();
+                const msg = (item.message || '').toLowerCase();
+                const name = (item.name || '').toLowerCase();
+                const stack = (item.stack || '').toLowerCase();
+                return msg.includes(q) || name.includes(q) || stack.includes(q);
+            }
+            return true;
+        });
+        // Modal filters: sort order
+        if (crashFilters.sortBy === 'time_asc') {
+            list = [...list].sort((a, b) => a.timestamp - b.timestamp);
+        }
+        return list;
+    }, [crashRecords, filterType, searchQuery, crashFilters]);
+    const handleClearAll = () => {
+        react_native_1.Alert.alert(t('crash.clearTitle'), t('crash.clearMessage'), [
+            { text: t('crash.clearCancel'), style: 'cancel' },
+            {
+                text: t('crash.clearConfirm'),
+                style: 'destructive',
+                onPress: () => (0, crashHandler_1.clearCrashRecords)(),
+            },
+        ]);
+    };
+    const renderCard = (0, react_1.useCallback)(({ item, index }) => {
+        const isFatal = item.isFatal;
+        const typeLabel = item.type.toUpperCase();
+        const topFrame = item.parsedStack && item.parsedStack.length > 0
+            ? item.parsedStack.find(f => f.isAppCode) || item.parsedStack[0]
+            : null;
+        const typeBadgeBg = item.type === 'native'
+            ? `${AppColors_1.AppColors.errorColor}22`
+            : item.type === 'render'
+                ? `${AppColors_1.AppColors.purple}22`
+                : item.type === 'promise'
+                    ? `${AppColors_1.AppColors.darkOrange}22`
+                    : `${AppColors_1.AppColors.offerPurple}22`;
+        const typeBadgeColor = item.type === 'native'
+            ? AppColors_1.AppColors.errorColor
+            : item.type === 'render'
+                ? AppColors_1.AppColors.purple
+                : item.type === 'promise'
+                    ? AppColors_1.AppColors.darkOrange
+                    : AppColors_1.AppColors.offerPurple;
+        return (<AnimatedEntrance_1.default index={index} distance={8}>
+          <TouchableScale_1.default onPress={() => setSelectedCrash(item)} style={[
+                localStyles.cardContainer,
+                isFatal && localStyles.fatalCardBorder,
+            ]}>
+            {/* Header: #S.No, Badges & Timestamp */}
+            <react_native_1.View style={localStyles.cardHeader}>
+              <react_native_1.View style={localStyles.badgeRow}>
+                <react_native_1.View style={localStyles.sNoBadge}>
+                  <react_native_1.Text style={localStyles.sNoBadgeText}>#{index + 1}</react_native_1.Text>
+                </react_native_1.View>
+
+                {isFatal ? (<react_native_1.View style={localStyles.fatalBadge}>
+                    <NetworkIcons_1.FlameIcon size={10} color={AppColors_1.AppColors.white}/>
+                    <react_native_1.Text style={localStyles.fatalBadgeText}>{t('crash.fatalBadge')}</react_native_1.Text>
+                  </react_native_1.View>) : (<react_native_1.View style={localStyles.caughtBadge}>
+                    <react_native_1.Text style={localStyles.caughtBadgeText}>{t('crash.handledBadge')}</react_native_1.Text>
+                  </react_native_1.View>)}
+
+                <react_native_1.View style={[
+                localStyles.typeBadge,
+                { backgroundColor: typeBadgeBg },
+            ]}>
+                  <react_native_1.Text style={[
+                localStyles.typeBadgeText,
+                { color: typeBadgeColor },
+            ]}>
+                    {typeLabel}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              <react_native_1.View style={localStyles.timeRow}>
+                <NetworkIcons_1.ClockIcon size={11} color={AppColors_1.AppColors.grayTextWeak}/>
+                <react_native_1.Text style={localStyles.timestampText}>
+                  {item.timeStr || new Date(item.timestamp).toLocaleTimeString()}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.relativeTimeText}>
+                  {getRelativeTime(item.timestamp)}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Error Message */}
+            <react_native_1.View style={{ marginVertical: 6 }}>
+              <HighlightText_1.default text={item.message || t('crash.unknownException')} highlight={searchQuery} numberOfLines={3} style={localStyles.errorMessageText}/>
+            </react_native_1.View>
+
+            {/* Top stack frame location if available */}
+            {topFrame && (<react_native_1.View style={localStyles.locationRow}>
+                <NetworkIcons_1.TerminalIcon size={12} color={AppColors_1.AppColors.grayTextWeak}/>
+                <react_native_1.Text numberOfLines={1} ellipsizeMode="middle" style={localStyles.locationText}>
+                  {topFrame.method !== '<anonymous>' ? `${topFrame.method} ` : ''}
+                  <react_native_1.Text style={{ color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }}>
+                    {topFrame.file}:{topFrame.lineNumber}
+                  </react_native_1.Text>
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            {/* Footer row: Actions */}
+            <react_native_1.View style={localStyles.cardFooter}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                {item.deviceInfo && (<react_native_1.View style={localStyles.metaPill}>
+                    {item.deviceInfo.platform === 'ios' ? (<NetworkIcons_1.AppleIcon size={10} color={AppColors_1.AppColors.grayText}/>) : item.deviceInfo.platform === 'android' ? (<NetworkIcons_1.AndroidIcon size={10} color={AppColors_1.AppColors.grayText}/>) : null}
+                    <react_native_1.Text style={localStyles.metaPillText}>
+                      {item.deviceInfo.platform?.toUpperCase()}{' '}
+                      {item.deviceInfo.osVersion || ''}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+                {item.deviceInfo && (<react_native_1.View style={localStyles.metaPill}>
+                    <react_native_1.Text style={localStyles.metaPillText}>
+                      {item.deviceInfo.isHermes ? 'Hermes' : 'JSC'}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+                {item.parsedStack && item.parsedStack.length > 0 && (<react_native_1.View style={localStyles.metaPill}>
+                    <NetworkIcons_1.CodeBracketsIcon size={10} color={AppColors_1.AppColors.grayText}/>
+                    <react_native_1.Text style={localStyles.metaPillText}>
+                      {item.parsedStack.length}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+                {item.breadcrumbs && item.breadcrumbs.length > 0 && (<react_native_1.View style={localStyles.metaPill}>
+                    <NetworkIcons_1.RepeatIcon size={10} color={AppColors_1.AppColors.grayText}/>
+                    <react_native_1.Text style={localStyles.metaPillText}>
+                      {item.breadcrumbs.length} trail
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+                {item.memoryInfo && (<react_native_1.View style={localStyles.metaPill}>
+                    <react_native_1.Text style={localStyles.metaPillText}>
+                      {item.memoryInfo.usedJSHeapSize} MB
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+              </react_native_1.View>
+            </react_native_1.View>
+          </TouchableScale_1.default>
+        </AnimatedEntrance_1.default>);
+    }, [searchQuery, setSelectedCrash]);
+    return (<react_native_1.View style={localStyles.container}>
+      {/* ─── Top Stats Bar ─── */}
+      <react_native_1.View style={localStyles.statsBar}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.statsScrollContent}>
+          <react_native_1.View style={[localStyles.statChip, localStyles.statChipActive]}>
+            <react_native_1.Text style={localStyles.statChipValue}>{stats.total}</react_native_1.Text>
+            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statCrashes')}</react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={localStyles.statChip}>
+            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.errorColor }]}>
+              {stats.fatalCount}
+            </react_native_1.Text>
+            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statFatal')}</react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={localStyles.statChip}>
+            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.offerPurple }]}>
+              {stats.jsCount}
+            </react_native_1.Text>
+            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statJsErrors')}</react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={localStyles.statChip}>
+            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.darkOrange }]}>
+              {stats.promiseCount}
+            </react_native_1.Text>
+            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statPromises')}</react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={localStyles.statChip}>
+            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.purple }]}>
+              {stats.renderCount}
+            </react_native_1.Text>
+            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statRender')}</react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={localStyles.statChip}>
+            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.skyBlue }]}>
+              {stats.nativeCount}
+            </react_native_1.Text>
+            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statNative')}</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {/* ─── Search & Controls ─── */}
+      <react_native_1.View style={localStyles.controlsContainer}>
+        <react_native_1.View style={localStyles.searchRow}>
+          <react_native_1.View style={localStyles.searchInputWrapper}>
+            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+            <react_native_1.TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
+            {searchQuery.length > 0 && (<react_native_1.TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
+                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              </react_native_1.TouchableOpacity>)}
+          </react_native_1.View>
+
+          {/* Crash Filters */}
+          {crashRecords.length > 0 && (<TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)} style={[
+                localStyles.filterButton,
+                !(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters) && {
+                    borderColor: `${AppColors_1.AppColors.brandPurple}60`,
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
+                },
+            ]}>
+              <NetworkIcons_1.FilterIcon size={14} color={(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters)
+                ? AppColors_1.AppColors.grayTextStrong
+                : AppColors_1.AppColors.brandPurple}/>
+              {!(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters) && (<react_native_1.View style={{
+                    position: 'absolute',
+                    top: 2,
+                    right: 2,
+                    width: 7,
+                    height: 7,
+                    borderRadius: 3.5,
+                    backgroundColor: AppColors_1.AppColors.darkOrange,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.white,
+                }}/>)}
+            </TouchableScale_1.default>)}
+
+          {/* Clear Crashes */}
+          {crashRecords.length > 0 && (<TouchableScale_1.default onPress={handleClearAll} style={localStyles.clearButton}>
+              <NetworkIcons_1.TrashIcon size={14} color={AppColors_1.AppColors.errorColor}/>
+            </TouchableScale_1.default>)}
+        </react_native_1.View>
+
+        {/* ─── Filter Chips ─── */}
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
+          {[
+            { key: 'all', label: t('crash.filterAll'), Icon: NetworkIcons_1.LayersIcon },
+            { key: 'fatal', label: t('crash.filterFatal'), Icon: NetworkIcons_1.SkullIcon },
+            { key: 'js', label: t('crash.filterJsError'), Icon: NetworkIcons_1.JsIcon },
+            { key: 'promise', label: t('crash.filterPromise'), Icon: NetworkIcons_1.HourglassIcon },
+            { key: 'render', label: t('crash.filterRender'), Icon: NetworkIcons_1.LayoutIcon },
+            { key: 'native', label: t('crash.filterNative'), Icon: NetworkIcons_1.ChipIcon },
+        ].map(chip => {
+            const isActive = filterType === chip.key;
+            return (<react_native_1.TouchableOpacity key={chip.key} onPress={() => setFilterType(chip.key)} style={[
+                    localStyles.filterChip,
+                    isActive && localStyles.filterChipActive,
+                ]}>
+                <chip.Icon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong}/>
+                <react_native_1.Text style={[
+                    localStyles.filterChipText,
+                    isActive && localStyles.filterChipTextActive,
+                ]}>
+                  {chip.label}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>);
+        })}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {/* ─── Crash List or Empty State ─── */}
+      {filteredList.length === 0 ? (<react_native_1.ScrollView contentContainerStyle={localStyles.emptyContainer} showsVerticalScrollIndicator={false}>
+          <react_native_1.View style={localStyles.emptyIconCircle}>
+            <NetworkIcons_1.ShieldAlertIcon size={38} color={AppColors_1.AppColors.greenColor}/>
+          </react_native_1.View>
+          <react_native_1.Text style={localStyles.emptyTitle}>{t('crash.emptyTitle')}</react_native_1.Text>
+          <react_native_1.Text style={localStyles.emptySub}>
+            {searchQuery
+                ? t('crash.emptySearchSubtitle')
+                : t('crash.emptySubtitle')}
+          </react_native_1.Text>
+        </react_native_1.ScrollView>) : (<react_native_1.FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter_1.default />}/>)}
+
+      {/* Filter Modal */}
+      <CrashFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={crashFilters} onApply={setCrashFilters} searchQuery={searchQuery}/>
+    </react_native_1.View>);
+});
+exports.default = CrashTab;
+const localStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    statsBar: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
+        paddingVertical: 10,
+    },
+    statsScrollContent: {
+        paddingHorizontal: 16,
+        gap: 8,
+    },
+    statChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.purpleShade50,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}14`,
+    },
+    statChipActive: {
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        borderColor: `${AppColors_1.AppColors.purple}33`,
+    },
+    statChipValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    statChipLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+    },
+    controlsContainer: {
+        paddingHorizontal: 16,
+        paddingTop: 12,
+        paddingBottom: 6,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    searchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    searchInputWrapper: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        borderRadius: 10,
+        paddingHorizontal: 10,
+        height: 38,
+        gap: 8,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 13,
+        color: AppColors_1.AppColors.primaryBlack,
+        paddingVertical: 0,
+    },
+    clearButton: {
+        width: 38,
+        height: 38,
+        borderRadius: 10,
+        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.errorColor}22`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    filterButton: {
+        width: 38,
+        height: 38,
+        borderRadius: 10,
+        backgroundColor: `${AppColors_1.AppColors.brandPurple}0F`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    filterScrollContent: {
+        paddingVertical: 10,
+        gap: 6,
+    },
+    filterChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    filterChipActive: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    filterChipText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayText,
+    },
+    filterChipTextActive: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.white,
+    },
+    listContent: {
+        paddingHorizontal: 16,
+        paddingTop: 4,
+        paddingBottom: 24,
+        gap: 10,
+    },
+    cardContainer: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        padding: 14,
+        shadowColor: AppColors_1.AppColors.shadowColorString,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.05,
+        shadowRadius: 3,
+        elevation: 2,
+    },
+    fatalCardBorder: {
+        borderColor: `${AppColors_1.AppColors.errorColor}44`,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    badgeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flexShrink: 1,
+    },
+    sNoBadge: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+    },
+    sNoBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayText,
+        letterSpacing: 0.3,
+    },
+    fatalBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.errorColor,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+    },
+    fatalBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.white,
+        letterSpacing: 0.5,
+    },
+    caughtBadge: {
+        backgroundColor: `${AppColors_1.AppColors.greenColor}1F`,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+    },
+    caughtBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.greenColor,
+        letterSpacing: 0.5,
+    },
+    typeBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+    },
+    typeBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.5,
+    },
+    timeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        flexShrink: 1,
+    },
+    timestampText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    relativeTimeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 4,
+        overflow: 'hidden',
+    },
+    errorMessageText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors_1.AppColors.primaryBlack,
+        lineHeight: 18,
+    },
+    locationRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginTop: 2,
+        marginBottom: 6,
+        backgroundColor: AppColors_1.AppColors.purpleShade50,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    locationText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+        flex: 1,
+    },
+    cardFooter: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 6,
+        paddingTop: 8,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.dividerColor,
+    },
+    metaPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.purpleShade50,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    metaPillText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    emptyContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 32,
+        marginTop: 40,
+    },
+    emptyIconCircle: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        backgroundColor: `${AppColors_1.AppColors.greenColor}1F`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 16,
+    },
+    emptyTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 17,
+        color: AppColors_1.AppColors.primaryBlack,
+        marginBottom: 6,
+    },
+    emptySub: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 13,
+        color: AppColors_1.AppColors.grayText,
+        textAlign: 'center',
+        lineHeight: 18,
+        maxWidth: 280,
+    },
+});