react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/ConsoleLogDetailView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ConsoleLog } from '../types';
+interface ConsoleLogDetailViewProps {
+    selectedConsoleLog: ConsoleLog;
+    detailSearch: string;
+    onSetDetailSearch: (search: string) => void;
+}
+export declare const ConsoleLogDetailView: React.FC<ConsoleLogDetailViewProps>;
+export default ConsoleLogDetailView;

package/dist/commonjs/components/ConsoleLogDetailView.js

@@ -0,0 +1,278 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsoleLogDetailView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_i18next_1 = require("react-i18next");
+const CopyButton_1 = __importDefault(require("./CopyButton"));
+const HighlightText_1 = __importDefault(require("./HighlightText"));
+const JsonViewer_1 = __importDefault(require("./JsonViewer"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
+const helpers_1 = require("../helpers");
+const ConsoleLogDetailView = ({ selectedConsoleLog, detailSearch, onSetDetailSearch, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const jsonContent = (0, helpers_1.getJsonContent)(selectedConsoleLog.message);
+    const isAnalyticsError = selectedConsoleLog.message
+        .toLowerCase()
+        .includes('[analytics error]');
+    const isUserLog = selectedConsoleLog.sourceMethod === 'log';
+    const getLogColors = () => {
+        if (isAnalyticsError) {
+            return {
+                badgeBg: `${AppColors_1.AppColors.skyBlue}15`,
+                badgeText: AppColors_1.AppColors.skyBlue,
+                label: 'ERROR',
+            };
+        }
+        switch (selectedConsoleLog.type) {
+            case 'error':
+                return {
+                    badgeBg: `${AppColors_1.AppColors.errorColor}15`,
+                    badgeText: AppColors_1.AppColors.errorColor,
+                    label: 'ERROR',
+                };
+            case 'warn':
+                return {
+                    badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
+                    badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange,
+                    label: 'WARN',
+                };
+            default:
+                if (isUserLog) {
+                    return {
+                        badgeBg: AppColors_1.AppColors.slateBorder,
+                        badgeText: AppColors_1.AppColors.slateText,
+                        label: 'INFO',
+                    };
+                }
+                return {
+                    badgeBg: `${AppColors_1.AppColors.purple}15`,
+                    badgeText: AppColors_1.AppColors.purple,
+                    label: 'INFO',
+                };
+        }
+    };
+    const colors = getLogColors();
+    return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16, gap: 12 }} nestedScrollEnabled={true}>
+      {/* 1. Header Info Card */}
+      <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.primaryLight,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            padding: 14,
+            gap: 12,
+        }}>
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: 8,
+        }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <react_native_1.View style={[styles_1.default.badge, { backgroundColor: colors.badgeBg }]}>
+              <react_native_1.Text style={[styles_1.default.badgeText, { color: colors.badgeText }]}>
+                {colors.label}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={[
+            styles_1.default.badge,
+            {
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+                borderColor: 'rgba(107, 78, 255, 0.2)',
+                borderWidth: 1,
+            },
+        ]}>
+              <react_native_1.Text style={[styles_1.default.badgeText, { color: AppColors_1.AppColors.indigoAccent }]}>
+                console.
+                {selectedConsoleLog.sourceMethod ||
+            selectedConsoleLog.type ||
+            'log'}
+              </react_native_1.Text>
+            </react_native_1.View>
+            {jsonContent && (<react_native_1.View style={[
+                styles_1.default.badge,
+                {
+                    backgroundColor: 'rgba(13, 148, 136, 0.08)',
+                    borderColor: 'rgba(13, 148, 136, 0.18)',
+                    borderWidth: 1,
+                },
+            ]}>
+                <react_native_1.Text style={[styles_1.default.badgeText, { color: AppColors_1.AppColors.teal }]}>
+                  {Array.isArray(jsonContent.data)
+                ? `Array[${jsonContent.data.length}]`
+                : `Object{${Object.keys(jsonContent.data ?? {}).length}}`}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+            {selectedConsoleLog.duplicateCount != null &&
+            selectedConsoleLog.duplicateCount > 1 && (<react_native_1.View style={[
+                styles_1.default.badge,
+                {
+                    backgroundColor: 'rgba(104, 75, 155, 0.1)',
+                    borderColor: 'rgba(104, 75, 155, 0.25)',
+                    borderWidth: 1,
+                },
+            ]}>
+                  <react_native_1.Text style={[
+                styles_1.default.badgeText,
+                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
+            ]}>
+                    ×{selectedConsoleLog.duplicateCount}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+          </react_native_1.View>
+
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 12,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+              #{selectedConsoleLog.id + 1}
+            </react_native_1.Text>
+            <CopyButton_1.default value={selectedConsoleLog.message} label="Log message"/>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            borderTopWidth: 1,
+            borderTopColor: AppColors_1.AppColors.dividerColor,
+            paddingTop: 10,
+        }}>
+          <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 12,
+            color: AppColors_1.AppColors.grayText,
+        }}>
+            {t('details.captured_at')}
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            color: AppColors_1.AppColors.primaryBlack,
+        }}>
+              {new Date(selectedConsoleLog.timestamp).toLocaleTimeString()}
+            </react_native_1.Text>
+          </react_native_1.Text>
+          <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interRegular,
+            fontSize: 11,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+            {selectedConsoleLog.message.length} {t('details.chars')}
+          </react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* 2. Caller Stack Frame Card (if available) */}
+      {selectedConsoleLog.caller &&
+            selectedConsoleLog.caller !== 'Unknown' && (<react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 8,
+            }}>
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.5,
+            }}>
+                {t('details.caller_location')}
+              </react_native_1.Text>
+              <CopyButton_1.default value={selectedConsoleLog.caller} label="Caller location"/>
+            </react_native_1.View>
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                padding: 10,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.primaryBlack,
+            }} selectable>
+                {selectedConsoleLog.caller}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>)}
+
+      {/* 3. Search Bar for detail page */}
+      <react_native_1.View style={styles_1.default.searchContainer}>
+        <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+        <react_native_1.TextInput placeholder={t('search.log_details_placeholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={onSetDetailSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+        {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => onSetDetailSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+            <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+          </react_native_1.Pressable>)}
+      </react_native_1.View>
+
+      {/* 4. Log Content Card */}
+      <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.primaryLight,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            padding: 14,
+            gap: 10,
+        }}>
+        <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 11,
+            color: AppColors_1.AppColors.grayTextWeak,
+            letterSpacing: 0.5,
+        }}>
+          {t('details.log_payload')}
+        </react_native_1.Text>
+
+        {jsonContent ? (<>
+            {jsonContent.header ? (<react_native_1.View style={{
+                    padding: 10,
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    marginBottom: 6,
+                }}>
+                <HighlightText_1.default text={jsonContent.header} search={detailSearch} style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 12,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }} highlightStyle={styles_1.default.highlight} detectLinks={true} selectable={true}/>
+              </react_native_1.View>) : null}
+            <JsonViewer_1.default data={jsonContent.data} search={detailSearch} wrap={true}/>
+          </>) : (<react_native_1.View style={{
+                padding: 12,
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            }}>
+            <HighlightText_1.default text={selectedConsoleLog.message} search={detailSearch} style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 12,
+                color: AppColors_1.AppColors.primaryBlack,
+                lineHeight: 18,
+            }} highlightStyle={styles_1.default.highlight} detectLinks={true} selectable={true}/>
+          </react_native_1.View>)}
+      </react_native_1.View>
+    </react_native_1.ScrollView>);
+};
+exports.ConsoleLogDetailView = ConsoleLogDetailView;
+exports.default = exports.ConsoleLogDetailView;

package/dist/commonjs/components/ConsoleLogsTabView.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ConsoleLog, LocalFilter, SortOrder } from '../types';
+interface ConsoleLogsTabViewProps {
+    logSearch: string;
+    onSetLogSearch: (val: string) => void;
+    logSortOrder: SortOrder;
+    onToggleSortOrder: () => void;
+    onDeleteLogs: () => void;
+    logFilters: Set<LocalFilter>;
+    onSetLogFilters: React.Dispatch<React.SetStateAction<Set<LocalFilter>>>;
+    logCounts: {
+        all: string;
+        info: string;
+        warn: string;
+        error: string;
+        'user-log': string;
+        analytics: string;
+    };
+    visibleConsoleLogs: ConsoleLog[];
+    filteredConsoleLogs: ConsoleLog[];
+    onSelectConsoleLog: (item: ConsoleLog) => void;
+}
+export declare const ConsoleLogsTabView: React.FC<ConsoleLogsTabViewProps>;
+export default ConsoleLogsTabView;

package/dist/commonjs/components/ConsoleLogsTabView.js

@@ -0,0 +1,354 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsoleLogsTabView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_i18next_1 = require("react-i18next");
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const ConsoleLogCard_1 = require("./ConsoleLogCard");
+const EmptyState_1 = __importDefault(require("./EmptyState"));
+const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
+exports.ConsoleLogsTabView = react_1.default.memo(({ logSearch, onSetLogSearch, logSortOrder, onToggleSortOrder, onDeleteLogs, logFilters, onSetLogFilters, logCounts, visibleConsoleLogs, filteredConsoleLogs, onSelectConsoleLog, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const renderItem = react_1.default.useCallback(({ item, index }) => (<AnimatedEntrance_1.default index={index} distance={8}>
+        <ConsoleLogCard_1.ConsoleLogCard item={item} searchStr={logSearch} onPress={() => onSelectConsoleLog(item)}/>
+      </AnimatedEntrance_1.default>), [logSearch, onSelectConsoleLog]);
+    const keyExtractor = react_1.default.useCallback((item) => String(item.id), []);
+    return (<react_native_1.View style={{ flex: 1 }}>
+      <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.white,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors_1.AppColors.dividerColor,
+            paddingBottom: 6,
+        }}>
+        <react_native_1.View style={[
+            styles_1.default.toolbarRow,
+            { marginTop: 12, marginBottom: 8 },
+        ]}>
+          <react_native_1.View style={styles_1.default.searchContainer}>
+            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+            <react_native_1.TextInput placeholder={t('search.logs_placeholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={onSetLogSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {logSearch.length > 0 && (<react_native_1.Pressable onPress={() => onSetLogSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              </react_native_1.Pressable>)}
+          </react_native_1.View>
+
+          <react_native_1.View style={styles_1.default.toolbarRight}>
+            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={onToggleSortOrder} hitSlop={10}>
+              <NetworkIcons_1.SortArrowIcon color={AppColors_1.AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
+            </TouchableScale_1.default>
+            <TouchableScale_1.default style={[
+            styles_1.default.toolbarBtn,
+            {
+                borderColor: 'rgba(255,46,87,0.22)',
+                backgroundColor: 'rgba(255,46,87,0.06)',
+            },
+        ]} onPress={onDeleteLogs} hitSlop={6}>
+              <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        }}>
+          {(() => {
+            const active = logFilters.has('all');
+            return (<TouchableScale_1.default onPress={() => onSetLogFilters(new Set(['all']))}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.purpleShade700,
+                        backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    },
+                ]}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.LayersIcon size={12} color={active
+                    ? AppColors_1.AppColors.purpleShade700
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.purpleShade700,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.all')} ({logCounts.all})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('user-log');
+            return (<TouchableScale_1.default onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('user-log')
+                            ? next.delete('user-log')
+                            : next.add('user-log');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.slateSubtle,
+                        backgroundColor: AppColors_1.AppColors.slateLight,
+                    },
+                ]}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.UserIcon size={12} color={active ? AppColors_1.AppColors.slateText : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.slateText,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.user_log')} ({logCounts['user-log']})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('info');
+            return (<TouchableScale_1.default onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('info')
+                            ? next.delete('info')
+                            : next.add('info');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.skyBlue,
+                        backgroundColor: `${AppColors_1.AppColors.skyBlue}15`,
+                    },
+                ]}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.InfoCircleIcon size={12} color={active
+                    ? AppColors_1.AppColors.skyBlue
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.skyBlue,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.info')} ({logCounts.info})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('warn');
+            return (<TouchableScale_1.default onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('warn')
+                            ? next.delete('warn')
+                            : next.add('warn');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.lightOrange,
+                        backgroundColor: `${AppColors_1.AppColors.lightOrange}15`,
+                    },
+                ]}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.WarningTriangleIcon size={12} color={active
+                    ? AppColors_1.AppColors.darkOrange
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.darkOrange,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.warn')} ({logCounts.warn})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('error');
+            return (<TouchableScale_1.default onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('error')
+                            ? next.delete('error')
+                            : next.add('error');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.errorColor,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}15`,
+                    },
+                ]}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.ErrorCircleIcon size={12} color={active
+                    ? AppColors_1.AppColors.errorColor
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.errorColor,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.error')} ({logCounts.error})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('analytics');
+            return (<TouchableScale_1.default onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('analytics')
+                            ? next.delete('analytics')
+                            : next.add('analytics');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.purple,
+                        backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                    },
+                ]}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.AnalyticsIcon size={12} color={active
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.purple,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.analytics')} ({logCounts.analytics})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      <react_native_1.FlatList data={filteredConsoleLogs} ListHeaderComponent={(() => {
+            const total = visibleConsoleLogs.length;
+            const filtered = filteredConsoleLogs.length;
+            const isAllSelected = logFilters.has('all') ||
+                !Array.from(logFilters).some(f => f !== 'all');
+            if (isAllSelected) {
+                return (<react_native_1.Text style={[
+                        styles_1.default.resultCount,
+                        { marginBottom: 4, marginTop: 12 },
+                    ]}>
+                {t('filters.showing_logs', { filtered, total })}
+              </react_native_1.Text>);
+            }
+            else {
+                const activeFilterNames = Array.from(logFilters)
+                    .filter(f => f !== 'all')
+                    .map(f => {
+                    if (f === 'user-log')
+                        return t('filters.user_log');
+                    if (f === 'analytics')
+                        return t('filters.analytics');
+                    return (f.charAt(0).toUpperCase() +
+                        f.slice(1));
+                });
+                return (<react_native_1.Text style={[
+                        styles_1.default.resultCount,
+                        { marginBottom: 4, marginTop: 12 },
+                    ]}>
+                {t('filters.filtering_logs', {
+                        filters: activeFilterNames.join(', '),
+                        filtered,
+                        total,
+                    })}
+              </react_native_1.Text>);
+            }
+        })()} renderItem={renderItem} keyExtractor={keyExtractor} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
+            styles_1.default.listContent,
+            filteredConsoleLogs.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+    </react_native_1.View>);
+});
+exports.default = exports.ConsoleLogsTabView;