react-native-inapp-inspector 1.0.0

package/dist/commonjs/index.js

@@ -0,0 +1,2668 @@
+"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 });
+exports.subscribeWebView = exports.clearWebViewData = exports.getWebViewHtmlUrl = exports.getWebViewJs = exports.getWebViewCss = exports.getWebViewHtml = exports.getWebViewNavHistory = exports.getWebViewLogs = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const native_1 = require("@react-navigation/native");
+// Components
+const TouchableScale_1 = __importDefault(require("./components/TouchableScale"));
+const useAccordion_1 = __importDefault(require("./customHooks/useAccordion"));
+const MetaAccordion_1 = __importDefault(require("./components/MetaAccordion"));
+const CopyButton_1 = __importDefault(require("./components/CopyButton"));
+const MiniBarChart_1 = __importDefault(require("./components/MiniBarChart"));
+const MiniLineChart_1 = __importDefault(require("./components/MiniLineChart"));
+const SectionHeader_1 = __importDefault(require("./components/SectionHeader"));
+const EmptyState_1 = __importDefault(require("./components/EmptyState"));
+const JsonViewer_1 = __importDefault(require("./components/JsonViewer"));
+const DomainHeader_1 = __importDefault(require("./components/DomainHeader"));
+const DiffViewer_1 = __importDefault(require("./components/DiffViewer"));
+const LogCard_1 = __importDefault(require("./components/LogCard"));
+const HeadersSection_1 = __importDefault(require("./components/HeadersSection"));
+const SourcePageCard_1 = __importDefault(require("./components/SourcePageCard"));
+const ConsoleLogCard_1 = require("./components/ConsoleLogCard");
+const HighlightText_1 = __importDefault(require("./components/HighlightText"));
+const CodeSnippet_1 = __importDefault(require("./components/CodeSnippet"));
+// Helpers
+const helpers_1 = require("./helpers");
+// Assets
+const NetworkIcons_1 = require("./components/NetworkIcons");
+// Stylesheet
+const AppColors_1 = require("./styles/AppColors");
+const AppFonts_1 = require("./styles/AppFonts");
+const styles_1 = __importDefault(require("./styles"));
+// Network
+const networkLogger_1 = require("./customHooks/networkLogger");
+// Console
+const consoleLogger_1 = require("./customHooks/consoleLogger");
+const logFilters_1 = require("./customHooks/logFilters");
+const analyticsLogger_1 = require("./customHooks/analyticsLogger");
+const AnalyticsEventCard_1 = __importStar(require("./components/AnalyticsEventCard"));
+const AnalyticsDetail_1 = __importDefault(require("./components/AnalyticsDetail"));
+// WebView
+const webViewLogger_1 = require("./customHooks/webViewLogger");
+const constants_1 = require("./constants");
+const NetworkInspector = () => {
+    const [logs, setLogs] = (0, react_1.useState)([]);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    const [selectedLogs, setSelectedLogs] = (0, react_1.useState)(new Set());
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
+    const [statusFilters, setStatusFilters] = (0, react_1.useState)(new Set());
+    const [methodFilters, setMethodFilters] = (0, react_1.useState)(new Set());
+    const [sectionFilters, setSectionFilters] = (0, react_1.useState)({});
+    const [collapsedSections, setCollapsedSections] = (0, react_1.useState)(new Set());
+    const [showNetworkMenu, setShowNetworkMenu] = (0, react_1.useState)(false);
+    const [showUiMenu, setShowUiMenu] = (0, react_1.useState)(false);
+    const [sortOrder, setSortOrder] = (0, react_1.useState)('newest');
+    const [reqExpanded, setReqExpanded] = (0, react_1.useState)(undefined);
+    const [resExpanded, setResExpanded] = (0, react_1.useState)(undefined);
+    const [showReqDiff, setShowReqDiff] = (0, react_1.useState)(false);
+    const [showResDiff, setShowResDiff] = (0, react_1.useState)(false);
+    const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
+    // ─── Analytics state ───────────────────────────────────────────────────────
+    const [activeTab, setActiveTab] = (0, react_1.useState)('apis');
+    const [analyticsEvents, setAnalyticsEvents] = (0, react_1.useState)([]);
+    // ─── Logs state ────────────────────────────────────────────────────────────
+    const [consoleLogs, setConsoleLogs] = (0, react_1.useState)([]);
+    const visibleConsoleLogs = (0, react_1.useMemo)(() => {
+        return consoleLogs.filter(log => {
+            const type = log.type;
+            const message = log.message || '';
+            const allPrefixes = [
+                ...((logFilters_1.IGNORED_LOG_PREFIXES && logFilters_1.IGNORED_LOG_PREFIXES.info) || []),
+                ...((logFilters_1.IGNORED_LOG_PREFIXES && logFilters_1.IGNORED_LOG_PREFIXES.warn) || []),
+                ...((logFilters_1.IGNORED_LOG_PREFIXES && logFilters_1.IGNORED_LOG_PREFIXES.error) || []),
+            ].filter(p => typeof p === 'string' && p.trim().length > 0);
+            const isIgnored = allPrefixes.some(prefix => message
+                .toLowerCase()
+                .trim()
+                .startsWith(prefix.toLowerCase().trim()) ||
+                message.toLowerCase().trim().includes(prefix.toLowerCase().trim()));
+            return !isIgnored;
+        });
+    }, [consoleLogs]);
+    const [logSearch, setLogSearch] = (0, react_1.useState)('');
+    const [logFilters, setLogFilters] = (0, react_1.useState)(new Set(['user-log']));
+    // ─── WebView state ─────────────────────────────────────────────────────────
+    const [webViewLogs, setWebViewLogs] = (0, react_1.useState)([]);
+    const [webViewNavHistory, setWebViewNavHistory] = (0, react_1.useState)([]);
+    const [webViewSubTab, setWebViewSubTab] = (0, react_1.useState)('html');
+    const [webViewSearch, setWebViewSearch] = (0, react_1.useState)('');
+    const [htmlSearch, setHtmlSearch] = (0, react_1.useState)('');
+    const [cssSearch, setCssSearch] = (0, react_1.useState)('');
+    const [jsSearch, setJsSearch] = (0, react_1.useState)('');
+    const [webViewHtml, setWebViewHtml] = (0, react_1.useState)('');
+    const [webViewCss, setWebViewCss] = (0, react_1.useState)('');
+    const [webViewJs, setWebViewJs] = (0, react_1.useState)('');
+    const [webViewHtmlUrl, setWebViewHtmlUrl] = (0, react_1.useState)('');
+    const [htmlSubTab, setHtmlSubTab] = (0, react_1.useState)('html');
+    const [selectedEvent, setSelectedEvent] = (0, react_1.useState)(null);
+    const [analyticsSearch, setAnalyticsSearch] = (0, react_1.useState)('');
+    const [hideScreenView, setHideScreenView] = (0, react_1.useState)(true);
+    const [analyticsSubTab, setAnalyticsSubTab] = (0, react_1.useState)('ga_events');
+    const [groupByScreen, setGroupByScreen] = (0, react_1.useState)(false);
+    const [expandedScreens, setExpandedScreens] = (0, react_1.useState)(new Set());
+    const [topEventsExpanded, setTopEventsExpanded] = (0, react_1.useState)(true);
+    const [newEventIds, setNewEventIds] = (0, react_1.useState)(new Set());
+    const prevEventIdsRef = (0, react_1.useRef)(new Set());
+    const navState = (0, native_1.useNavigationState)(state => state);
+    const currentRouteRef = (0, react_1.useRef)({
+        path: 'Navigators',
+        params: null,
+    });
+    (0, react_1.useEffect)(() => {
+        currentRouteRef.current = (0, helpers_1.getNavigationInfo)(navState);
+    }, [navState]);
+    const logRouteMapRef = (0, react_1.useRef)(new Map());
+    const prevLogIdsRef = (0, react_1.useRef)(new Set());
+    const [newLogIds, setNewLogIds] = (0, react_1.useState)(new Set());
+    const pulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const badgeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(pulseAnim, {
+                toValue: 1.2,
+                duration: 800,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(pulseAnim, {
+                toValue: 1,
+                duration: 800,
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [pulseAnim]);
+    (0, react_1.useEffect)(() => {
+        if ((logs.length > 0 || analyticsEvents.length > 0) && newLogIds.size > 0) {
+            badgeAnim.setValue(0.8);
+            react_native_1.Animated.spring(badgeAnim, {
+                toValue: 1,
+                tension: 300,
+                friction: 10,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [newLogIds]);
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            const task = react_native_1.InteractionManager.runAfterInteractions(() => {
+                setIsReady(true);
+            });
+            return () => task.cancel();
+        }
+        else {
+            setIsReady(false);
+            setSelectedLogs(new Set());
+        }
+    }, [visible]);
+    (0, react_1.useEffect)(() => {
+        (0, networkLogger_1.setupNetworkLogger)();
+        (0, networkLogger_1.clearNetworkLogs)();
+        (0, consoleLogger_1.setupConsoleLogger)();
+        // Note: setupAnalyticsLogger(analytics()) is called by the consumer at app startup
+        let timeoutId;
+        const unsubscribe = (0, networkLogger_1.subscribeNetworkLogs)((raw) => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                const deduped = (0, helpers_1.deduplicateLogs)(raw);
+                const incoming = new Set(deduped.map(l => l.id));
+                const freshIds = new Set();
+                incoming.forEach(id => {
+                    if (!prevLogIdsRef.current.has(id))
+                        freshIds.add(id);
+                });
+                prevLogIdsRef.current = incoming;
+                if (freshIds.size > 0) {
+                    freshIds.forEach(id => {
+                        if (!logRouteMapRef.current.has(id)) {
+                            logRouteMapRef.current.set(id, currentRouteRef.current);
+                        }
+                    });
+                    setNewLogIds(freshIds);
+                    setTimeout(() => setNewLogIds(new Set()), 1200);
+                }
+                setLogs(deduped);
+            }, 250);
+        });
+        // ─── Analytics subscription ──────────────────────────────────────────────
+        let analyticsTimeoutId;
+        const unsubscribeAnalytics = (0, analyticsLogger_1.subscribeAnalyticsEvents)((raw) => {
+            clearTimeout(analyticsTimeoutId);
+            analyticsTimeoutId = setTimeout(() => {
+                const incoming = new Set(raw.map(e => e.id));
+                const freshIds = new Set();
+                incoming.forEach(id => {
+                    if (!prevEventIdsRef.current.has(id))
+                        freshIds.add(id);
+                });
+                prevEventIdsRef.current = incoming;
+                if (freshIds.size > 0) {
+                    freshIds.forEach(id => {
+                        if (!logRouteMapRef.current.has(id + 1000000)) {
+                            logRouteMapRef.current.set(id + 1000000, currentRouteRef.current);
+                        }
+                    });
+                    setNewEventIds(freshIds);
+                    setTimeout(() => setNewEventIds(new Set()), 1200);
+                }
+                setAnalyticsEvents(raw);
+            }, 200);
+        });
+        // ─── Console subscription ────────────────────────────────────────────────
+        let consoleTimeoutId;
+        const unsubscribeConsole = (0, consoleLogger_1.subscribeConsoleLogs)((raw) => {
+            clearTimeout(consoleTimeoutId);
+            consoleTimeoutId = setTimeout(() => {
+                setConsoleLogs(raw);
+            }, 200);
+        });
+        setWebViewLogs((0, webViewLogger_1.getWebViewLogs)());
+        setWebViewNavHistory((0, webViewLogger_1.getWebViewNavHistory)());
+        setWebViewHtml((0, webViewLogger_1.getWebViewHtml)());
+        setWebViewCss((0, webViewLogger_1.getWebViewCss)());
+        setWebViewJs((0, webViewLogger_1.getWebViewJs)());
+        setWebViewHtmlUrl((0, webViewLogger_1.getWebViewHtmlUrl)());
+        // ─── WebView subscription ────────────────────────────────────────────────
+        let webViewTimeoutId;
+        const unsubscribeWebView = (0, webViewLogger_1.subscribeWebView)(() => {
+            clearTimeout(webViewTimeoutId);
+            webViewTimeoutId = setTimeout(() => {
+                setWebViewLogs((0, webViewLogger_1.getWebViewLogs)());
+                setWebViewNavHistory((0, webViewLogger_1.getWebViewNavHistory)());
+                setWebViewHtml((0, webViewLogger_1.getWebViewHtml)());
+                setWebViewCss((0, webViewLogger_1.getWebViewCss)());
+                setWebViewJs((0, webViewLogger_1.getWebViewJs)());
+                setWebViewHtmlUrl((0, webViewLogger_1.getWebViewHtmlUrl)());
+            }, 200);
+        });
+        return () => {
+            unsubscribe();
+            clearTimeout(timeoutId);
+            unsubscribeAnalytics();
+            clearTimeout(analyticsTimeoutId);
+            unsubscribeConsole();
+            clearTimeout(consoleTimeoutId);
+            unsubscribeWebView();
+            clearTimeout(webViewTimeoutId);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setReqExpanded(undefined);
+        setResExpanded(undefined);
+        setShowReqDiff(false);
+        setShowResDiff(false);
+        setDetailSearch('');
+    }, [selected]);
+    const filteredLogs = (0, react_1.useMemo)(() => {
+        let result = logs.filter(log => {
+            // Status Filter Check
+            if (statusFilters.size > 0) {
+                const matched = [...statusFilters].some(f => {
+                    if (f === 'ALL')
+                        return true;
+                    if (f === 'Failed')
+                        return log.status === 0 || log.status == null;
+                    return String(log.status)[0] === f[0];
+                });
+                if (!matched)
+                    return false;
+            }
+            // Method Filter Check
+            if (methodFilters.size > 0) {
+                const matchedMethod = [...methodFilters].some(m => {
+                    if (m === 'ALL')
+                        return true;
+                    return log.method?.toUpperCase() === m;
+                });
+                if (!matchedMethod)
+                    return false;
+            }
+            // Search Bar Check
+            if (search && !log.url?.toLowerCase().includes(search.toLowerCase()))
+                return false;
+            return true;
+        });
+        if (sortOrder === 'oldest') {
+            result = [...result].reverse();
+        }
+        return result;
+    }, [logs, search, statusFilters, methodFilters, sortOrder]);
+    const availableMethods = (0, react_1.useMemo)(() => {
+        const methods = new Set();
+        logs.forEach(log => {
+            if (log.method)
+                methods.add(log.method.toUpperCase());
+        });
+        return ['ALL', ...Array.from(methods)];
+    }, [logs]);
+    const toggleSectionFilter = (0, react_1.useCallback)((pageName, filter) => {
+        setSectionFilters(prev => {
+            const current = prev[pageName] || new Set(['success', 'failed', 'loading']);
+            const next = new Set(current);
+            if (next.has(filter)) {
+                next.delete(filter);
+            }
+            else {
+                next.add(filter);
+            }
+            return { ...prev, [pageName]: next };
+        });
+    }, []);
+    const toggleSectionCollapse = (0, react_1.useCallback)((pageName) => {
+        setCollapsedSections(prev => {
+            const next = new Set(prev);
+            if (next.has(pageName))
+                next.delete(pageName);
+            else
+                next.add(pageName);
+            return next;
+        });
+    }, []);
+    const groupedData = (0, react_1.useMemo)(() => {
+        const result = [];
+        const groups = [];
+        for (let i = 0; i < filteredLogs.length; i++) {
+            const log = filteredLogs[i];
+            const routeInfo = logRouteMapRef.current.get(log.id);
+            const pageName = routeInfo?.path || 'Navigators';
+            if (groups.length === 0 ||
+                groups[groups.length - 1].pageName !== pageName) {
+                groups.push({ pageName, color: (0, helpers_1.getDomainColor)(pageName), logs: [] });
+            }
+            groups[groups.length - 1].logs.push(log);
+        }
+        groups.forEach((g, idx) => {
+            let success = 0;
+            let failed = 0;
+            let loading = 0;
+            g.logs.forEach(l => {
+                if (l.status == null)
+                    loading++;
+                else if (l.status === 0 || l.status >= 400)
+                    failed++;
+                else
+                    success++;
+            });
+            const activeFilters = sectionFilters[g.pageName] || new Set(['success', 'failed', 'loading']);
+            const isCollapsed = collapsedSections.has(g.pageName);
+            const timestamp = g.logs[0]?.startTime || 0;
+            result.push({
+                type: 'header',
+                id: `hdr-${g.logs[0]?.id || 'empty'}-${g.pageName}`,
+                pageName: g.pageName,
+                color: g.color,
+                stats: { success, failed, loading },
+                timestamp,
+                activeFilters,
+                isCollapsed,
+                isFirst: idx === 0,
+            });
+            if (!isCollapsed) {
+                const displayLogs = g.logs.filter(l => {
+                    if (l.status == null)
+                        return activeFilters.has('loading');
+                    if (l.status === 0 || l.status >= 400)
+                        return activeFilters.has('failed');
+                    return activeFilters.has('success');
+                });
+                displayLogs.forEach((log, index) => {
+                    result.push({
+                        type: 'log',
+                        id: log.id,
+                        log,
+                        isLast: index === displayLogs.length - 1,
+                        color: g.color,
+                    });
+                });
+            }
+        });
+        return result;
+    }, [filteredLogs, logs, sectionFilters, collapsedSections]);
+    const stats = (0, react_1.useMemo)(() => {
+        const total = logs.length;
+        const errors = filteredLogs.filter(l => (l.status != null && l.status >= 400) || l.status === 0).length;
+        const durations = filteredLogs
+            .filter(l => l.duration != null)
+            .map(l => l.duration);
+        const avgDuration = durations.length > 0
+            ? Math.round(durations.reduce((a, b) => a + b, 0) / durations.length)
+            : null;
+        const totalBytes = filteredLogs.reduce((acc, log) => {
+            const resSize = log.response
+                ? JSON.stringify(log.response)?.length || 0
+                : 0;
+            return acc + resSize;
+        }, 0);
+        const size = totalBytes < 1024
+            ? `${totalBytes} B`
+            : totalBytes < 1048576
+                ? `${(totalBytes / 1024).toFixed(1)} KB`
+                : `${(totalBytes / 1048576).toFixed(1)} MB`;
+        const recentLogs = [...filteredLogs].slice(0, 10).reverse();
+        const durationTrend = recentLogs.map(l => l.duration || 0);
+        const sizeTrend = recentLogs.map(l => JSON.stringify(l.response)?.length || 0);
+        const errorTrend = recentLogs.map(l => l.status === 0 || (l.status && l.status >= 400) ? 1 : 0);
+        const reqTrend = recentLogs.map(() => Math.random() * 5 + 5);
+        return {
+            total,
+            errors,
+            avgDuration,
+            filtered: filteredLogs.length,
+            size,
+            durationTrend,
+            sizeTrend,
+            errorTrend,
+            reqTrend,
+        };
+    }, [logs, filteredLogs]);
+    const hasErrors = (0, react_1.useMemo)(() => logs.some(l => (l.status != null && l.status >= 400) || l.status === 0), [logs]);
+    const { minStart, totalRange } = (0, react_1.useMemo)(() => {
+        if (filteredLogs.length === 0)
+            return { minStart: 0, totalRange: 0 };
+        const min = Math.min(...filteredLogs.map(l => l.startTime));
+        const max = Math.max(...filteredLogs.map(l => l.startTime + (l.duration || 10)));
+        return { minStart: min, totalRange: max - min };
+    }, [filteredLogs]);
+    const prevSameRequest = (0, react_1.useMemo)(() => {
+        if (!selected)
+            return null;
+        const index = logs.findIndex(l => l.id === selected.id);
+        if (index === -1)
+            return null;
+        for (let i = index + 1; i < logs.length; i++) {
+            const l = logs[i];
+            if (l.url === selected.url && l.method === selected.method) {
+                return l;
+            }
+        }
+        return null;
+    }, [selected, logs]);
+    const prevRequestData = prevSameRequest ? prevSameRequest.request : null;
+    const prevResponseData = prevSameRequest ? prevSameRequest.response : null;
+    const filteredAnalyticsEvents = (0, react_1.useMemo)(() => {
+        let events = analyticsEvents;
+        if (hideScreenView) {
+            events = events.filter(e => e.name !== 'screen_view');
+        }
+        if (analyticsSearch) {
+            const s = analyticsSearch.toLowerCase();
+            events = events.filter(e => e.name.toLowerCase().includes(s) ||
+                JSON.stringify(e.params).toLowerCase().includes(s) ||
+                (e.pageTitle ?? '').toLowerCase().includes(s));
+        }
+        const deduplicatedEvents = [];
+        for (const e of events) {
+            if (deduplicatedEvents.length === 0) {
+                deduplicatedEvents.push({ ...e, count: 1 });
+                continue;
+            }
+            const last = deduplicatedEvents[deduplicatedEvents.length - 1];
+            if (last.name === e.name &&
+                JSON.stringify(last.params) === JSON.stringify(e.params) &&
+                JSON.stringify(last.userProperties) === JSON.stringify(e.userProperties)) {
+                last.count = (last.count || 1) + 1;
+                // Point to the newest timestamp and id
+                last.timestamp = e.timestamp;
+                last.id = e.id;
+            }
+            else {
+                deduplicatedEvents.push({ ...e, count: 1 });
+            }
+        }
+        return deduplicatedEvents;
+    }, [analyticsEvents, analyticsSearch, hideScreenView]);
+    const filteredConsoleLogs = (0, react_1.useMemo)(() => {
+        let result = visibleConsoleLogs;
+        // Filters check
+        if (logFilters.size > 0 && !logFilters.has('all')) {
+            result = result.filter(log => {
+                if (logFilters.has(log.type))
+                    return true;
+                if (logFilters.has('user-log') && log.sourceMethod === 'log')
+                    return true;
+                if (logFilters.has('analytics') &&
+                    log.message.toLowerCase().includes('[analytics error]'))
+                    return true;
+                return false;
+            });
+        }
+        // Search bar check
+        if (logSearch) {
+            const s = logSearch.toLowerCase();
+            result = result.filter(log => log.message.toLowerCase().includes(s) ||
+                (log.caller ?? '').toLowerCase().includes(s));
+        }
+        return result;
+    }, [visibleConsoleLogs, logFilters, logSearch]);
+    const filteredWebViewLogs = (0, react_1.useMemo)(() => {
+        let result = webViewLogs;
+        if (webViewSearch) {
+            const s = webViewSearch.toLowerCase();
+            result = result.filter(log => log.message.toLowerCase().includes(s));
+        }
+        return result;
+    }, [webViewLogs, webViewSearch]);
+    const filteredNavHistory = (0, react_1.useMemo)(() => {
+        let result = webViewNavHistory;
+        if (webViewSearch) {
+            const s = webViewSearch.toLowerCase();
+            result = result.filter(nav => nav.url.toLowerCase().includes(s) ||
+                (nav.title ?? '').toLowerCase().includes(s));
+        }
+        return result;
+    }, [webViewNavHistory, webViewSearch]);
+    const logCounts = (0, react_1.useMemo)(() => {
+        let searchedLogs = visibleConsoleLogs;
+        if (logSearch) {
+            const s = logSearch.toLowerCase();
+            searchedLogs = visibleConsoleLogs.filter(log => log.message.toLowerCase().includes(s) ||
+                (log.caller ?? '').toLowerCase().includes(s));
+        }
+        const total = visibleConsoleLogs.length;
+        return {
+            all: `${searchedLogs.length}/${total}`,
+            info: `${searchedLogs.filter(l => l.type === 'info').length}/${total}`,
+            warn: `${searchedLogs.filter(l => l.type === 'warn').length}/${total}`,
+            error: `${searchedLogs.filter(l => l.type === 'error').length}/${total}`,
+            'user-log': `${searchedLogs.filter(l => l.sourceMethod === 'log').length}/${total}`,
+            analytics: `${searchedLogs.filter(l => l.message.toLowerCase().includes('[analytics error]')).length}/${total}`,
+        };
+    }, [visibleConsoleLogs, logSearch]);
+    const groupedAnalyticsEvents = (0, react_1.useMemo)(() => {
+        if (!groupByScreen)
+            return [];
+        const map = new Map();
+        for (const e of filteredAnalyticsEvents) {
+            const routeInfo = logRouteMapRef.current.get(e.id + 1000000);
+            let screenName = e.screenName ||
+                e.screenClass ||
+                e.pageTitle ||
+                e.pageLocation ||
+                e.params?.firebase_screen ||
+                e.params?.screen_name ||
+                e.params?.firebase_screen_class ||
+                e.params?.screen_class;
+            if (!screenName) {
+                if (routeInfo && routeInfo.path !== 'Navigators') {
+                    const parts = routeInfo.path.split(' ➔ ');
+                    screenName = parts[parts.length - 1];
+                }
+                else {
+                    screenName = 'Unknown Component';
+                }
+            }
+            if (!map.has(screenName))
+                map.set(screenName, []);
+            map.get(screenName).push(e);
+        }
+        const sections = [];
+        for (const [title, data] of map.entries()) {
+            sections.push({ title, data });
+        }
+        return sections;
+    }, [groupByScreen, filteredAnalyticsEvents]);
+    const topEventsArray = (0, react_1.useMemo)(() => {
+        const freq = {};
+        filteredAnalyticsEvents.forEach(e => {
+            if (e.name === 'screen_view')
+                return;
+            freq[e.name] = (freq[e.name] || 0) + 1;
+        });
+        return Object.entries(freq).sort((a, b) => b[1] - a[1]);
+    }, [filteredAnalyticsEvents]);
+    const groupedNetworkLogs = (0, react_1.useMemo)(() => {
+        if (!groupByScreen)
+            return [];
+        const map = new Map();
+        for (const l of filteredLogs) {
+            const routeInfo = logRouteMapRef.current.get(l.id);
+            let screenName = 'Unknown Origin';
+            if (routeInfo && routeInfo.path !== 'Navigators') {
+                const parts = routeInfo.path.split(' ➔ ');
+                screenName = parts[parts.length - 1];
+            }
+            if (!map.has(screenName))
+                map.set(screenName, []);
+            map.get(screenName).push(l);
+        }
+        const sections = [];
+        for (const [title, data] of map.entries()) {
+            sections.push({ title, data });
+        }
+        return sections;
+    }, [groupByScreen, filteredLogs]);
+    const toggleScreenAccordion = (0, react_1.useCallback)((title) => {
+        setExpandedScreens(prev => {
+            const next = new Set(prev);
+            if (next.has(title))
+                next.delete(title);
+            else
+                next.add(title);
+            return next;
+        });
+    }, []);
+    const renderScreenSectionHeader = (0, react_1.useCallback)(({ section: { title, data } }) => {
+        const isExpanded = expandedScreens.has(title);
+        return (<react_native_1.Pressable onPress={() => toggleScreenAccordion(title)} style={styles_1.default.screenSectionHeader}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <react_native_1.View style={{
+                transform: [{ rotate: isExpanded ? '180deg' : '0deg' }],
+            }}>
+              <NetworkIcons_1.ExpandCollapseIcon color={AppColors_1.AppColors.primaryBlack} size={14} isExpanded={false}/>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.screenSectionTitle}>{title}</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.Text style={styles_1.default.screenSectionCount}>{data.length} logs</react_native_1.Text>
+        </react_native_1.Pressable>);
+    }, [expandedScreens, toggleScreenAccordion]);
+    function closeModal() {
+        setVisible(false);
+        setSelected(null);
+        setSelectedEvent(null);
+    }
+    function handleClearAll() {
+        (0, networkLogger_1.clearNetworkLogs)();
+        setLogs([]);
+        setSelectedLogs(new Set());
+        setSectionFilters({});
+        setCollapsedSections(new Set());
+        setStatusFilters(new Set());
+        setMethodFilters(new Set());
+        prevLogIdsRef.current = new Set();
+        logRouteMapRef.current = new Map();
+        // Also clear analytics
+        (0, analyticsLogger_1.clearAnalyticsEvents)();
+        setAnalyticsEvents([]);
+        prevEventIdsRef.current = new Set();
+        // Also clear console logs
+        (0, consoleLogger_1.clearConsoleLogs)();
+        setConsoleLogs([]);
+        // Also clear webview logs/nav history
+        (0, webViewLogger_1.clearWebViewData)();
+        setWebViewLogs([]);
+        setWebViewNavHistory([]);
+        setWebViewHtml('');
+        setWebViewCss('');
+        setWebViewJs('');
+        setWebViewHtmlUrl('');
+    }
+    function handleDelete() {
+        if (activeTab === 'webview') {
+            react_native_1.Alert.alert('Clear WebView Data', 'Are you sure you want to clear all WebView logs and navigation history?', [
+                { text: 'Cancel', style: 'cancel' },
+                {
+                    text: 'Clear All',
+                    onPress: () => {
+                        (0, webViewLogger_1.clearWebViewData)();
+                        setWebViewLogs([]);
+                        setWebViewNavHistory([]);
+                        setWebViewHtml('');
+                        setWebViewCss('');
+                        setWebViewJs('');
+                        setWebViewHtmlUrl('');
+                    },
+                    style: 'destructive',
+                },
+            ]);
+            return;
+        }
+        if (activeTab === 'logs') {
+            react_native_1.Alert.alert('Clear Logs', 'Are you sure you want to clear all console logs?', [
+                { text: 'Cancel', style: 'cancel' },
+                {
+                    text: 'Clear All',
+                    onPress: () => {
+                        (0, consoleLogger_1.clearConsoleLogs)();
+                        setConsoleLogs([]);
+                    },
+                    style: 'destructive',
+                },
+            ]);
+            return;
+        }
+        if (activeTab === 'analytics') {
+            react_native_1.Alert.alert('Clear Analytics', 'Are you sure you want to clear all analytics events?', [
+                { text: 'Cancel', style: 'cancel' },
+                {
+                    text: 'Clear All',
+                    onPress: () => {
+                        (0, analyticsLogger_1.clearAnalyticsEvents)();
+                        setAnalyticsEvents([]);
+                        setSelectedEvent(null);
+                        prevEventIdsRef.current = new Set();
+                    },
+                    style: 'destructive',
+                },
+            ]);
+            return;
+        }
+        if (selectedLogs.size > 0) {
+            setLogs(prev => prev.filter(l => !selectedLogs.has(l.id)));
+            setSelectedLogs(new Set());
+        }
+        else {
+            react_native_1.Alert.alert('Clear Logs', 'Are you sure you want to clear all network logs?', [
+                { text: 'Cancel', style: 'cancel' },
+                { text: 'Clear All', onPress: handleClearAll, style: 'destructive' },
+            ]);
+        }
+    }
+    const detailTitle = (0, react_1.useMemo)(() => {
+        if (!selected)
+            return '';
+        try {
+            const path = new URL(selected.url).pathname;
+            const parts = path.split('/').filter(Boolean);
+            return parts.length > 0 ? `/${parts.slice(-2).join('/')}` : '/';
+        }
+        catch {
+            const parts = selected.url.split('/').filter(Boolean);
+            return parts.length > 0 ? `/${parts.slice(-2).join('/')}` : selected.url;
+        }
+    }, [selected]);
+    const detailDisplayUrl = (0, react_1.useMemo)(() => {
+        return selected ? (0, helpers_1.formatDisplayUrl)(selected.url) : '';
+    }, [selected]);
+    const toggleSelect = (0, react_1.useCallback)((id) => {
+        setSelectedLogs(prev => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }, []);
+    const renderItem = (0, react_1.useCallback)(({ item }) => {
+        if (item.type === 'header') {
+            return (<DomainHeader_1.default pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>);
+        }
+        const { log, isLast, color } = item;
+        return (<react_native_1.View style={styles_1.default.treeNodeRow}>
+          <react_native_1.View style={styles_1.default.treeLines}>
+            <react_native_1.View style={[
+                styles_1.default.modernTreeLine,
+                { borderColor: color },
+                isLast && styles_1.default.modernTreeLineLast,
+            ]}/>
+            {!isLast && (<react_native_1.View style={[styles_1.default.modernTreeBranch, { borderColor: color }]}/>)}
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.treeCardWrapper}>
+            <LogCard_1.default item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => setSelected(log)} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
+          </react_native_1.View>
+        </react_native_1.View>);
+    }, [
+        minStart,
+        totalRange,
+        newLogIds,
+        selectedLogs,
+        toggleSelect,
+        search,
+        toggleSectionFilter,
+        toggleSectionCollapse,
+    ]);
+    return (<>
+      <TouchableScale_1.default style={styles_1.default.fabWrapper} onPress={() => setVisible(true)} hitSlop={10}>
+        <react_native_1.Animated.View style={[styles_1.default.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
+        <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#8F6EFF']} style={styles_1.default.fab}>
+          <react_native_1.Text style={styles_1.default.fabText}>API</react_native_1.Text>
+        </react_native_linear_gradient_1.default>
+        {(logs.length > 0 || analyticsEvents.length > 0) && (<react_native_1.Animated.View style={[
+                styles_1.default.fabBadge,
+                hasErrors ? styles_1.default.fabBadgeError : styles_1.default.fabBadgeNormal,
+                { transform: [{ scale: badgeAnim }] },
+            ]}>
+            <react_native_1.Text style={styles_1.default.fabBadgeText}>
+              {logs.length + analyticsEvents.length > 99
+                ? '99+'
+                : logs.length + analyticsEvents.length}
+            </react_native_1.Text>
+          </react_native_1.Animated.View>)}
+      </TouchableScale_1.default>
+
+      <react_native_1.Modal visible={visible} animationType="slide" transparent>
+        {visible && (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+            <react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
+
+            <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} style={styles_1.default.headerGradient}>
+              <react_native_1.View style={[
+                styles_1.default.header,
+                {
+                    paddingTop: react_native_1.Platform.OS === 'android'
+                        ? (react_native_1.StatusBar.currentHeight ?? 24) + 16
+                        : 54,
+                },
+            ]}>
+                <react_native_1.View style={[
+                styles_1.default.headerLeft,
+                { flexDirection: 'row', alignItems: 'center', gap: 16 },
+            ]}>
+                  <TouchableScale_1.default onPress={() => {
+                requestAnimationFrame(() => {
+                    setSelected(null);
+                    setSelectedEvent(null);
+                });
+            }} hitSlop={15} style={[
+                styles_1.default.iconBtnMinimal,
+                selected == null &&
+                    selectedEvent == null && { display: 'none' },
+            ]}>
+                    <NetworkIcons_1.WhiteBackNavigation />
+                  </TouchableScale_1.default>
+
+                  {selected == null && selectedEvent == null ? (<react_native_1.View style={styles_1.default.headerButtonGroup}>
+                      {/* Network Dropdown */}
+                      <react_native_1.Pressable onPress={() => {
+                    setShowNetworkMenu(prev => !prev);
+                    setShowUiMenu(false);
+                }} style={[
+                    styles_1.default.headerGroupButton,
+                    ['apis', 'analytics', 'logs'].includes(activeTab) &&
+                        styles_1.default.headerGroupButtonActive,
+                ]}>
+                        <react_native_1.Text style={[
+                    styles_1.default.headerGroupButtonText,
+                    ['apis', 'analytics', 'logs'].includes(activeTab) && { color: '#FFFFFF' },
+                ]}>
+                          APIs
+                        </react_native_1.Text>
+                        <react_native_1.View style={{
+                    transform: [
+                        { rotate: showNetworkMenu ? '180deg' : '0deg' },
+                    ],
+                }}>
+                          <NetworkIcons_1.ChevronIcon color={['apis', 'analytics', 'logs'].includes(activeTab)
+                    ? '#FFFFFF'
+                    : 'rgba(255, 255, 255, 0.6)'} size={10}/>
+                        </react_native_1.View>
+                      </react_native_1.Pressable>
+
+                      {/* UI Dropdown */}
+                      <react_native_1.Pressable onPress={() => {
+                    setShowUiMenu(prev => !prev);
+                    setShowNetworkMenu(false);
+                }} style={[
+                    styles_1.default.headerGroupButton,
+                    activeTab === 'webview' &&
+                        styles_1.default.headerGroupButtonActive,
+                ]}>
+                        <react_native_1.Text style={[
+                    styles_1.default.headerGroupButtonText,
+                    activeTab === 'webview' && { color: '#FFFFFF' },
+                ]}>
+                          UI
+                        </react_native_1.Text>
+                        <react_native_1.View style={{
+                    transform: [
+                        { rotate: showUiMenu ? '180deg' : '0deg' },
+                    ],
+                }}>
+                          <NetworkIcons_1.ChevronIcon color={activeTab === 'webview'
+                    ? '#FFFFFF'
+                    : 'rgba(255, 255, 255, 0.6)'} size={10}/>
+                        </react_native_1.View>
+                      </react_native_1.Pressable>
+                    </react_native_1.View>) : null}
+                </react_native_1.View>
+
+                <react_native_1.View style={styles_1.default.headerCenter}>
+                  {selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                      <react_native_1.View style={styles_1.default.headerDetailRow}>
+                        <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
+                            AppColors_1.AppColors.grayText,
+                    },
+                ]}>
+                          <react_native_1.Text style={styles_1.default.headerMethodText}>
+                            {selected.method}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                          {detailTitle}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                        <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    { backgroundColor: (0, helpers_1.getStatusColor)(selected.status) },
+                ]}/>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          {selected.status === 0
+                    ? 'Failed'
+                    : selected.status ?? 'Pending'}{' '}
+                          •{' '}
+                          {selected.duration != null
+                    ? `${selected.duration}ms`
+                    : '-'}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                    </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                      <react_native_1.View style={styles_1.default.headerDetailRow}>
+                        <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: selectedEvent.source === 'firebase'
+                            ? 'rgba(224,123,26,0.3)'
+                            : 'rgba(124,92,191,0.3)',
+                    },
+                ]}>
+                          <react_native_1.Text style={styles_1.default.headerMethodText}>
+                            {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                          {selectedEvent.name}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                        <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    {
+                        backgroundColor: selectedEvent.source === 'firebase'
+                            ? '#E07B1A'
+                            : AppColors_1.AppColors.purple,
+                    },
+                ]}/>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          {Object.keys(selectedEvent.params).length} param
+                          {Object.keys(selectedEvent.params).length !== 1
+                    ? 's'
+                    : ''}
+                          {' · '}
+                          {selectedEvent.source}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                    </react_native_1.View>) : (<react_native_1.View style={styles_1.default.headerCountBadge}>
+                      <react_native_1.Text style={styles_1.default.headerCountText}>
+                        {activeTab === 'apis'
+                    ? `${logs.length} API${logs.length !== 1 ? 's' : ''}`
+                    : activeTab === 'logs'
+                        ? `${visibleConsoleLogs.length} log${visibleConsoleLogs.length !== 1 ? 's' : ''}`
+                        : activeTab === 'analytics'
+                            ? `${analyticsEvents.length} event${analyticsEvents.length !== 1 ? 's' : ''}`
+                            : `${webViewLogs.length} log${webViewLogs.length !== 1 ? 's' : ''}`}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+
+                <react_native_1.View style={styles_1.default.headerRight}>
+                  <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.iconBtnMinimal}>
+                    <NetworkIcons_1.CloseWhite />
+                  </TouchableScale_1.default>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_linear_gradient_1.default>
+
+            {(showNetworkMenu || showUiMenu) && selected == null && (<react_native_1.Pressable style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 99,
+                }} onPress={() => {
+                    setShowNetworkMenu(false);
+                    setShowUiMenu(false);
+                }}/>)}
+
+            {selected == null && selectedEvent == null && (<react_native_1.View style={{
+                    paddingHorizontal: 16,
+                    paddingTop: 10,
+                    paddingBottom: 2,
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 11.5,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                }}>
+                  {['apis', 'analytics', 'logs'].includes(activeTab)
+                    ? 'APIs'
+                    : 'UI'}
+                  {'  ➔  '}
+                  <react_native_1.Text style={{
+                    color: AppColors_1.AppColors.purple,
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                }}>
+                    {activeTab === 'apis'
+                    ? 'APIs'
+                    : activeTab === 'analytics'
+                        ? 'Analytics'
+                        : activeTab === 'logs'
+                            ? 'Logs'
+                            : 'WebView'}
+                  </react_native_1.Text>
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            {showNetworkMenu && selected == null && selectedEvent == null && (<react_native_1.View style={[styles_1.default.menuDropdown, { left: 16 }]}>
+                {['apis', 'analytics', 'logs'].map(tab => {
+                    const label = tab === 'apis'
+                        ? 'APIs'
+                        : tab === 'analytics'
+                            ? 'Analytics'
+                            : 'Logs';
+                    const count = tab === 'apis'
+                        ? logs.length
+                        : tab === 'analytics'
+                            ? analyticsEvents.length
+                            : visibleConsoleLogs.length;
+                    const isActive = activeTab === tab;
+                    return (<react_native_1.Pressable key={tab} style={[
+                            styles_1.default.dropdownItem,
+                            isActive && { backgroundColor: `${AppColors_1.AppColors.purple}12` },
+                        ]} onPress={() => {
+                            setActiveTab(tab);
+                            setShowNetworkMenu(false);
+                        }} hitSlop={10}>
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interMedium,
+                            color: isActive
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.primaryBlack,
+                        }}>
+                        {label} {count > 0 ? `(${count})` : ''}
+                      </react_native_1.Text>
+                    </react_native_1.Pressable>);
+                })}
+              </react_native_1.View>)}
+
+            {showUiMenu && selected == null && selectedEvent == null && (<react_native_1.View style={[styles_1.default.menuDropdown, { left: 120 }]}>
+                {['webview'].map(tab => {
+                    const isActive = activeTab === tab;
+                    return (<react_native_1.Pressable key={tab} style={[
+                            styles_1.default.dropdownItem,
+                            isActive && { backgroundColor: `${AppColors_1.AppColors.purple}12` },
+                        ]} onPress={() => {
+                            setActiveTab(tab);
+                            setShowUiMenu(false);
+                        }} hitSlop={10}>
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interMedium,
+                            color: isActive
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.primaryBlack,
+                        }}>
+                        WebView{' '}
+                        {webViewLogs.length > 0
+                            ? `(${webViewLogs.length})`
+                            : ''}
+                      </react_native_1.Text>
+                    </react_native_1.Pressable>);
+                })}
+              </react_native_1.View>)}
+
+            {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
+            {isReady && activeTab === 'analytics' && selectedEvent == null && (<react_native_1.View>
+                {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
+                <react_native_1.View style={[styles_1.default.toolbarRow, { marginTop: 12, marginBottom: 4 }]}>
+                  <react_native_1.View style={styles_1.default.searchContainer}>
+                    <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                    <react_native_1.TextInput placeholder="Search events..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                    {analyticsSearch.length > 0 && (<react_native_1.Pressable onPress={() => setAnalyticsSearch('')} 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>
+                  {analyticsSubTab === 'ga_events' && (<react_native_1.View style={styles_1.default.toolbarRight}>
+                      <TouchableScale_1.default style={[
+                        styles_1.default.toolbarBtn,
+                        groupByScreen && styles_1.default.toolbarBtnActive,
+                    ]} onPress={() => setGroupByScreen(prev => !prev)} hitSlop={10}>
+                        <NetworkIcons_1.MapPinIcon color={groupByScreen
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                      </TouchableScale_1.default>
+                      <TouchableScale_1.default style={[
+                        styles_1.default.toolbarBtn,
+                        !hideScreenView && styles_1.default.toolbarBtnActive,
+                    ]} onPress={() => setHideScreenView(prev => !prev)} hitSlop={10}>
+                        <NetworkIcons_1.ScreenIcon color={!hideScreenView
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                      </TouchableScale_1.default>
+                      <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
+                        <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                      </TouchableScale_1.default>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+
+                {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
+                <react_native_1.View style={{
+                    marginHorizontal: 16,
+                    marginTop: 4,
+                    marginBottom: 8,
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 4,
+                    flexDirection: 'row',
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                }}>
+                  <react_native_1.Pressable style={[
+                    {
+                        flex: 1,
+                        paddingVertical: 8,
+                        borderRadius: 6,
+                        alignItems: 'center',
+                    },
+                    analyticsSubTab === 'ga_events' && {
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                        shadowColor: '#000',
+                        shadowOpacity: 0.1,
+                        shadowRadius: 3,
+                        shadowOffset: { width: 0, height: 1 },
+                        elevation: 2,
+                    },
+                ]} onPress={() => setAnalyticsSubTab('ga_events')}>
+                    <react_native_1.Text style={[
+                    {
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 13,
+                        color: AppColors_1.AppColors.grayTextStrong,
+                    },
+                    analyticsSubTab === 'ga_events' && {
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        color: AppColors_1.AppColors.purple,
+                    },
+                ]}>
+                      GA Events (
+                      {analyticsSearch
+                    ? filteredAnalyticsEvents.length
+                    : analyticsEvents.length}
+                      )
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+                  <react_native_1.Pressable style={[
+                    {
+                        flex: 1,
+                        paddingVertical: 8,
+                        borderRadius: 6,
+                        alignItems: 'center',
+                    },
+                    analyticsSubTab === 'top_events' && {
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                        shadowColor: '#000',
+                        shadowOpacity: 0.1,
+                        shadowRadius: 3,
+                        shadowOffset: { width: 0, height: 1 },
+                        elevation: 2,
+                    },
+                ]} onPress={() => setAnalyticsSubTab('top_events')}>
+                    <react_native_1.Text style={[
+                    {
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 13,
+                        color: AppColors_1.AppColors.grayTextStrong,
+                    },
+                    analyticsSubTab === 'top_events' && {
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        color: AppColors_1.AppColors.purple,
+                    },
+                ]}>
+                      Top Events ({topEventsArray.length})
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>
+              </react_native_1.View>)}
+
+            {isReady ? (activeTab === 'analytics' ? (selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<react_native_1.FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
+                    styles_1.default.listContent,
+                    { paddingHorizontal: 16, paddingTop: 16 },
+                ]} renderItem={({ item: [name, count] }) => {
+                    const maxCount = topEventsArray[0]?.[1] || 1;
+                    const color = (0, AnalyticsEventCard_1.getEventColor)(name);
+                    return (<react_native_1.View style={[
+                            analyticsListStyles.topEventsCard,
+                            { marginBottom: 12, paddingVertical: 16 },
+                        ]}>
+                          <react_native_1.View style={analyticsListStyles.topEventRow}>
+                            <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 8,
+                            flex: 1,
+                        }}>
+                              <react_native_1.View style={[
+                            analyticsListStyles.iconCircle,
+                            { backgroundColor: `${color}1A` },
+                        ]}>
+                                <react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill={color}>
+                                  <react_native_svg_1.Circle cx="12" cy="12" r="10" opacity="0.3"/>
+                                  <react_native_svg_1.Path d="M7 14l3-3 4 4 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+                                </react_native_svg_1.default>
+                              </react_native_1.View>
+                              <react_native_1.Text style={analyticsListStyles.topEventName} numberOfLines={2}>
+                                {name}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                            <react_native_1.View style={analyticsListStyles.topEventBarWrap}>
+                              <react_native_linear_gradient_1.default colors={[color, `${color}99`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[
+                            analyticsListStyles.topEventBar,
+                            {
+                                width: `${Math.max(6, (count / maxCount) * 100)}%`,
+                            },
+                        ]}/>
+                            </react_native_1.View>
+                            <react_native_1.Text style={analyticsListStyles.topEventCount}>
+                              {count}
+                            </react_native_1.Text>
+                          </react_native_1.View>
+                        </react_native_1.View>);
+                }} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
+                        <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                          <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
+                        </react_native_1.View>
+                        <react_native_1.Text style={styles_1.default.emptyTitle}>No Top Events</react_native_1.Text>
+                      </react_native_1.View>}/>) : groupByScreen ? (<react_native_1.SectionList sections={groupedAnalyticsEvents} keyExtractor={item => item.id.toString()} renderSectionHeader={renderScreenSectionHeader} renderItem={({ item, index, section }) => {
+                    if (expandedScreens.has(section.title))
+                        return null;
+                    const events = section.data;
+                    const prev = events[index + 1];
+                    const next = events[index - 1];
+                    const msSincePrev = prev
+                        ? item.timestamp - prev.timestamp
+                        : undefined;
+                    const thisMin = Math.floor(item.timestamp / 60000);
+                    const nextMin = next
+                        ? Math.floor(next.timestamp / 60000)
+                        : -1;
+                    const showTimestamp = index === 0 || thisMin !== nextMin;
+                    return (<AnalyticsEventCard_1.default event={item} onPress={() => setSelectedEvent(item)} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === events.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={section.title}/>);
+                }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews ListHeaderComponent={null} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
+                        <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                          <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
+                        </react_native_1.View>
+                        <react_native_1.Text style={styles_1.default.emptyTitle}>
+                          {analyticsSearch.length > 0
+                        ? 'No matching events'
+                        : 'No analytics events yet'}
+                        </react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.emptySub}>
+                          {analyticsSearch.length > 0
+                        ? 'Try adjusting your search.'
+                        : 'Call setupAnalyticsLogger(analytics()) at app start.'}
+                        </react_native_1.Text>
+                      </react_native_1.View>} contentContainerStyle={[
+                    styles_1.default.listContent,
+                    filteredAnalyticsEvents.length === 0 && { flexGrow: 1 },
+                ]} keyboardShouldPersistTaps="handled"/>) : (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={item => item.id.toString()} renderItem={({ item, index }) => {
+                    const prev = filteredAnalyticsEvents[index + 1];
+                    const next = filteredAnalyticsEvents[index - 1];
+                    const msSincePrev = prev
+                        ? item.timestamp - prev.timestamp
+                        : undefined;
+                    const thisMin = Math.floor(item.timestamp / 60000);
+                    const nextMin = next
+                        ? Math.floor(next.timestamp / 60000)
+                        : -1;
+                    const showTimestamp = index === 0 || thisMin !== nextMin;
+                    return (<AnalyticsEventCard_1.default event={item} onPress={() => setSelectedEvent(item)} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
+                            let screenName = item.screenName ||
+                                item.screenClass ||
+                                item.pageTitle ||
+                                item.pageLocation ||
+                                item.params?.firebase_screen ||
+                                item.params?.screen_name ||
+                                item.params?.firebase_screen_class ||
+                                item.params?.screen_class;
+                            const routeInfo = logRouteMapRef.current.get(item.id + 1000000);
+                            if (!screenName) {
+                                if (routeInfo &&
+                                    routeInfo.path !== 'Navigators') {
+                                    const parts = routeInfo.path.split(' ➔ ');
+                                    screenName = parts[parts.length - 1];
+                                }
+                            }
+                            return screenName;
+                        })()}/>);
+                }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews ListHeaderComponent={null} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
+                        <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                          <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
+                        </react_native_1.View>
+                        <react_native_1.Text style={styles_1.default.emptyTitle}>
+                          {analyticsSearch.length > 0
+                        ? 'No matching events'
+                        : 'No analytics events yet'}
+                        </react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.emptySub}>
+                          {analyticsSearch.length > 0
+                        ? 'Try adjusting your search.'
+                        : 'Call setupAnalyticsLogger(analytics()) at app start.'}
+                        </react_native_1.Text>
+                      </react_native_1.View>} contentContainerStyle={[
+                    styles_1.default.listContent,
+                    filteredAnalyticsEvents.length === 0 && { flexGrow: 1 },
+                ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (groupByScreen ? (<react_native_1.SectionList sections={groupedNetworkLogs} keyExtractor={item => item?.id?.toString()} renderSectionHeader={renderScreenSectionHeader} renderItem={({ item, section }) => {
+                    if (expandedScreens.has(section.title))
+                        return null;
+                    return renderItem({
+                        item: {
+                            type: 'log',
+                            log: item,
+                            color: AppColors_1.AppColors.purple,
+                        },
+                    });
+                }} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
+                        {logs.length > 0 && (<react_native_1.View style={styles_1.default.dashboardCard}>
+                            <react_native_1.View style={styles_1.default.dashboardStatsRow}>
+                              <react_native_1.View style={styles_1.default.statBox}>
+                                <react_native_1.Text style={styles_1.default.statValue}>
+                                  {stats.filtered < stats.total
+                            ? stats.filtered
+                            : stats.total}
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.statLabel}>
+                                  {stats.filtered < stats.total
+                            ? `of ${stats.total} Req`
+                            : 'Requests'}
+                                </react_native_1.Text>
+                                <react_native_1.View style={styles_1.default.miniGraphWrap}>
+                                  <MiniBarChart_1.default data={stats.reqTrend} color={AppColors_1.AppColors.purple}/>
+                                </react_native_1.View>
+                              </react_native_1.View>
+                              <react_native_1.View style={styles_1.default.dashboardStatDivider}/>
+                              <react_native_1.View style={styles_1.default.statBox}>
+                                <react_native_1.Text style={[
+                            styles_1.default.statValue,
+                            stats.errors > 0 && {
+                                color: AppColors_1.AppColors.errorColor,
+                            },
+                        ]}>
+                                  {stats.errors}
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.statLabel}>Errors</react_native_1.Text>
+                                <react_native_1.View style={styles_1.default.miniGraphWrap}>
+                                  <MiniBarChart_1.default data={stats.errorTrend} color={AppColors_1.AppColors.errorColor} maxVal={1}/>
+                                </react_native_1.View>
+                              </react_native_1.View>
+                              <react_native_1.View style={styles_1.default.dashboardStatDivider}/>
+                              <react_native_1.View style={styles_1.default.statBox}>
+                                <react_native_1.Text style={[
+                            styles_1.default.statValue,
+                            stats.avgDuration != null
+                                ? {
+                                    color: (0, helpers_1.getDurationColor)(stats.avgDuration),
+                                }
+                                : null,
+                        ]}>
+                                  {stats.avgDuration != null
+                            ? `${stats.avgDuration}ms`
+                            : '—'}
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.statLabel}>Avg Time</react_native_1.Text>
+                                <react_native_1.View style={styles_1.default.miniGraphWrap}>
+                                  <MiniLineChart_1.default data={stats.durationTrend} color={AppColors_1.AppColors.darkOrange}/>
+                                </react_native_1.View>
+                              </react_native_1.View>
+                              <react_native_1.View style={styles_1.default.dashboardStatDivider}/>
+                              <react_native_1.View style={styles_1.default.statBox}>
+                                <react_native_1.Text style={[
+                            styles_1.default.statValue,
+                            { color: AppColors_1.AppColors.skyBlue },
+                        ]}>
+                                  {stats.size}
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.statLabel}>Payload</react_native_1.Text>
+                                <react_native_1.View style={styles_1.default.miniGraphWrap}>
+                                  <MiniBarChart_1.default data={stats.sizeTrend} color={AppColors_1.AppColors.skyBlue}/>
+                                </react_native_1.View>
+                              </react_native_1.View>
+                            </react_native_1.View>
+                          </react_native_1.View>)}
+
+                        <react_native_1.View style={styles_1.default.toolbarRow}>
+                          <react_native_1.View style={styles_1.default.searchContainer}>
+                            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                            <react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                            {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} 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={handleDelete} hitSlop={10}>
+                              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                              {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
+                                  <react_native_1.Text style={styles_1.default.trashBadgeText}>
+                                    {selectedLogs.size}
+                                  </react_native_1.Text>
+                                </react_native_1.View>)}
+                            </TouchableScale_1.default>
+
+                            <TouchableScale_1.default style={[
+                        styles_1.default.toolbarBtn,
+                        groupByScreen && styles_1.default.toolbarBtnActive,
+                    ]} onPress={() => setGroupByScreen(prev => !prev)} hitSlop={10}>
+                              <NetworkIcons_1.MapPinIcon color={groupByScreen
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale_1.default>
+
+                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+                              <NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale_1.default>
+
+                            <TouchableScale_1.default style={[
+                        styles_1.default.toolbarBtn,
+                        filtersAccordion.isOpen &&
+                            styles_1.default.toolbarBtnActive,
+                    ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
+                              <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale_1.default>
+                          </react_native_1.View>
+                        </react_native_1.View>
+
+                        <react_native_1.Animated.View style={[
+                        filtersAccordion.bodyStyle,
+                        { overflow: 'hidden' },
+                    ]}>
+                          <react_native_1.View style={styles_1.default.filtersContainer}>
+                            <react_native_1.Text style={styles_1.default.filtersHeading}>STATUS</react_native_1.Text>
+                            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                              {constants_1.STATUS_FILTERS.map(filter => {
+                        const isAll = filter === 'ALL';
+                        const active = isAll
+                            ? statusFilters.size === 0
+                            : statusFilters.has(filter);
+                        return (<TouchableScale_1.default key={filter} style={styles_1.default.statusFilterWrap} onPress={() => {
+                                if (isAll) {
+                                    setStatusFilters(new Set());
+                                }
+                                else {
+                                    setStatusFilters(prev => {
+                                        const next = new Set(prev);
+                                        next.has(filter)
+                                            ? next.delete(filter)
+                                            : next.add(filter);
+                                        return next;
+                                    });
+                                }
+                            }} hitSlop={10}>
+                                    {active ? (<react_native_linear_gradient_1.default colors={[
+                                    AppColors_1.AppColors.purpleShade50,
+                                    '#EAE5FF',
+                                ]} style={[
+                                    styles_1.default.statusFilterChip,
+                                    styles_1.default.statusFilterActive,
+                                ]}>
+                                        <react_native_1.Text style={[
+                                    styles_1.default.statusFilterText,
+                                    { color: AppColors_1.AppColors.purple },
+                                ]}>
+                                          {filter}
+                                        </react_native_1.Text>
+                                      </react_native_linear_gradient_1.default>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
+                                        <react_native_1.Text style={styles_1.default.statusFilterText}>
+                                          {filter}
+                                        </react_native_1.Text>
+                                      </react_native_1.View>)}
+                                  </TouchableScale_1.default>);
+                    })}
+                            </react_native_1.ScrollView>
+
+                            <react_native_1.Text style={[styles_1.default.filtersHeading, { marginTop: 16 }]}>
+                              METHOD
+                            </react_native_1.Text>
+                            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                              {availableMethods.map(filter => {
+                        const isAll = filter === 'ALL';
+                        const active = isAll
+                            ? methodFilters.size === 0
+                            : methodFilters.has(filter);
+                        return (<TouchableScale_1.default key={filter} style={styles_1.default.statusFilterWrap} onPress={() => {
+                                if (isAll) {
+                                    setMethodFilters(new Set());
+                                }
+                                else {
+                                    setMethodFilters(prev => {
+                                        const next = new Set(prev);
+                                        next.has(filter)
+                                            ? next.delete(filter)
+                                            : next.add(filter);
+                                        return next;
+                                    });
+                                }
+                            }} hitSlop={10}>
+                                    {active ? (<react_native_linear_gradient_1.default colors={[
+                                    AppColors_1.AppColors.purpleShade50,
+                                    '#EAE5FF',
+                                ]} style={[
+                                    styles_1.default.statusFilterChip,
+                                    styles_1.default.statusFilterActive,
+                                ]}>
+                                        <react_native_1.Text style={[
+                                    styles_1.default.statusFilterText,
+                                    { color: AppColors_1.AppColors.purple },
+                                ]}>
+                                          {filter}
+                                        </react_native_1.Text>
+                                      </react_native_linear_gradient_1.default>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
+                                        <react_native_1.Text style={styles_1.default.statusFilterText}>
+                                          {filter}
+                                        </react_native_1.Text>
+                                      </react_native_1.View>)}
+                                  </TouchableScale_1.default>);
+                    })}
+                            </react_native_1.ScrollView>
+                          </react_native_1.View>
+                        </react_native_1.Animated.View>
+
+                        {(search ||
+                        statusFilters.size > 0 ||
+                        methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
+                            {filteredLogs.length === logs.length
+                            ? `${logs.length} requests`
+                            : `${filteredLogs.length} of ${logs.length} filtered requests`}
+                          </react_native_1.Text>)}
+                      </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
+                    styles_1.default.listContent,
+                    filteredLogs.length === 0 && { flexGrow: 1 },
+                ]} keyboardShouldPersistTaps="handled"/>) : (<react_native_1.FlatList data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
+                        {logs.length > 0 && (<react_native_1.View style={styles_1.default.dashboardCard}>
+                            <react_native_1.View style={styles_1.default.dashboardStatsRow}>
+                              <react_native_1.View style={styles_1.default.statBox}>
+                                <react_native_1.Text style={styles_1.default.statValue}>
+                                  {stats.filtered < stats.total
+                            ? stats.filtered
+                            : stats.total}
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.statLabel}>
+                                  {stats.filtered < stats.total
+                            ? `of ${stats.total} Req`
+                            : 'Requests'}
+                                </react_native_1.Text>
+                                <react_native_1.View style={styles_1.default.miniGraphWrap}>
+                                  <MiniBarChart_1.default data={stats.reqTrend} color={AppColors_1.AppColors.purple}/>
+                                </react_native_1.View>
+                              </react_native_1.View>
+                              <react_native_1.View style={styles_1.default.dashboardStatDivider}/>
+                              <react_native_1.View style={styles_1.default.statBox}>
+                                <react_native_1.Text style={[
+                            styles_1.default.statValue,
+                            stats.errors > 0 && {
+                                color: AppColors_1.AppColors.errorColor,
+                            },
+                        ]}>
+                                  {stats.errors}
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.statLabel}>Errors</react_native_1.Text>
+                                <react_native_1.View style={styles_1.default.miniGraphWrap}>
+                                  <MiniBarChart_1.default data={stats.errorTrend} color={AppColors_1.AppColors.errorColor} maxVal={1}/>
+                                </react_native_1.View>
+                              </react_native_1.View>
+                              <react_native_1.View style={styles_1.default.dashboardStatDivider}/>
+                              <react_native_1.View style={styles_1.default.statBox}>
+                                <react_native_1.Text style={[
+                            styles_1.default.statValue,
+                            stats.avgDuration != null
+                                ? {
+                                    color: (0, helpers_1.getDurationColor)(stats.avgDuration),
+                                }
+                                : null,
+                        ]}>
+                                  {stats.avgDuration != null
+                            ? `${stats.avgDuration}ms`
+                            : '—'}
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.statLabel}>Avg Time</react_native_1.Text>
+                                <react_native_1.View style={styles_1.default.miniGraphWrap}>
+                                  <MiniLineChart_1.default data={stats.durationTrend} color={AppColors_1.AppColors.darkOrange}/>
+                                </react_native_1.View>
+                              </react_native_1.View>
+                              <react_native_1.View style={styles_1.default.dashboardStatDivider}/>
+                              <react_native_1.View style={styles_1.default.statBox}>
+                                <react_native_1.Text style={[
+                            styles_1.default.statValue,
+                            { color: AppColors_1.AppColors.skyBlue },
+                        ]}>
+                                  {stats.size}
+                                </react_native_1.Text>
+                                <react_native_1.Text style={styles_1.default.statLabel}>Payload</react_native_1.Text>
+                                <react_native_1.View style={styles_1.default.miniGraphWrap}>
+                                  <MiniBarChart_1.default data={stats.sizeTrend} color={AppColors_1.AppColors.skyBlue}/>
+                                </react_native_1.View>
+                              </react_native_1.View>
+                            </react_native_1.View>
+                          </react_native_1.View>)}
+
+                        <react_native_1.View style={styles_1.default.toolbarRow}>
+                          <react_native_1.View style={styles_1.default.searchContainer}>
+                            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                            <react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                            {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} 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={handleDelete} hitSlop={10}>
+                              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                              {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
+                                  <react_native_1.Text style={styles_1.default.trashBadgeText}>
+                                    {selectedLogs.size}
+                                  </react_native_1.Text>
+                                </react_native_1.View>)}
+                            </TouchableScale_1.default>
+
+                            <TouchableScale_1.default style={[
+                        styles_1.default.toolbarBtn,
+                        groupByScreen && styles_1.default.toolbarBtnActive,
+                    ]} onPress={() => setGroupByScreen(prev => !prev)} hitSlop={10}>
+                              <NetworkIcons_1.MapPinIcon color={groupByScreen
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale_1.default>
+
+                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+                              <NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale_1.default>
+
+                            <TouchableScale_1.default style={[
+                        styles_1.default.toolbarBtn,
+                        filtersAccordion.isOpen &&
+                            styles_1.default.toolbarBtnActive,
+                    ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
+                              <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            </TouchableScale_1.default>
+                          </react_native_1.View>
+                        </react_native_1.View>
+
+                        <react_native_1.Animated.View style={[
+                        filtersAccordion.bodyStyle,
+                        { overflow: 'hidden' },
+                    ]}>
+                          <react_native_1.View style={styles_1.default.filtersContainer}>
+                            <react_native_1.Text style={styles_1.default.filtersHeading}>STATUS</react_native_1.Text>
+                            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                              {constants_1.STATUS_FILTERS.map(filter => {
+                        const isAll = filter === 'ALL';
+                        const active = isAll
+                            ? statusFilters.size === 0
+                            : statusFilters.has(filter);
+                        return (<TouchableScale_1.default key={filter} style={styles_1.default.statusFilterWrap} onPress={() => {
+                                if (isAll) {
+                                    setStatusFilters(new Set());
+                                }
+                                else {
+                                    setStatusFilters(prev => {
+                                        const next = new Set(prev);
+                                        next.has(filter)
+                                            ? next.delete(filter)
+                                            : next.add(filter);
+                                        return next;
+                                    });
+                                }
+                            }} hitSlop={10}>
+                                    {active ? (<react_native_linear_gradient_1.default colors={[
+                                    AppColors_1.AppColors.purpleShade50,
+                                    '#EAE5FF',
+                                ]} style={[
+                                    styles_1.default.statusFilterChip,
+                                    styles_1.default.statusFilterActive,
+                                ]}>
+                                        <react_native_1.Text style={[
+                                    styles_1.default.statusFilterText,
+                                    { color: AppColors_1.AppColors.purple },
+                                ]}>
+                                          {filter}
+                                        </react_native_1.Text>
+                                      </react_native_linear_gradient_1.default>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
+                                        <react_native_1.Text style={styles_1.default.statusFilterText}>
+                                          {filter}
+                                        </react_native_1.Text>
+                                      </react_native_1.View>)}
+                                  </TouchableScale_1.default>);
+                    })}
+                            </react_native_1.ScrollView>
+
+                            <react_native_1.Text style={[styles_1.default.filtersHeading, { marginTop: 16 }]}>
+                              METHOD
+                            </react_native_1.Text>
+                            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                              {availableMethods.map(filter => {
+                        const isAll = filter === 'ALL';
+                        const active = isAll
+                            ? methodFilters.size === 0
+                            : methodFilters.has(filter);
+                        return (<TouchableScale_1.default key={filter} style={styles_1.default.statusFilterWrap} onPress={() => {
+                                if (isAll) {
+                                    setMethodFilters(new Set());
+                                }
+                                else {
+                                    setMethodFilters(prev => {
+                                        const next = new Set(prev);
+                                        next.has(filter)
+                                            ? next.delete(filter)
+                                            : next.add(filter);
+                                        return next;
+                                    });
+                                }
+                            }} hitSlop={10}>
+                                    {active ? (<react_native_linear_gradient_1.default colors={[
+                                    AppColors_1.AppColors.purpleShade50,
+                                    '#EAE5FF',
+                                ]} style={[
+                                    styles_1.default.statusFilterChip,
+                                    styles_1.default.statusFilterActive,
+                                ]}>
+                                        <react_native_1.Text style={[
+                                    styles_1.default.statusFilterText,
+                                    { color: AppColors_1.AppColors.purple },
+                                ]}>
+                                          {filter}
+                                        </react_native_1.Text>
+                                      </react_native_linear_gradient_1.default>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
+                                        <react_native_1.Text style={styles_1.default.statusFilterText}>
+                                          {filter}
+                                        </react_native_1.Text>
+                                      </react_native_1.View>)}
+                                  </TouchableScale_1.default>);
+                    })}
+                            </react_native_1.ScrollView>
+                          </react_native_1.View>
+                        </react_native_1.Animated.View>
+
+                        {(search ||
+                        statusFilters.size > 0 ||
+                        methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
+                            {filteredLogs.length === logs.length
+                            ? `${logs.length} requests`
+                            : `${filteredLogs.length} of ${logs.length} filtered requests`}
+                          </react_native_1.Text>)}
+                      </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
+                    styles_1.default.listContent,
+                    filteredLogs.length === 0 && { flexGrow: 1 },
+                ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'logs' ? (<react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.View style={{
+                    backgroundColor: '#FFFFFF',
+                    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="Search logs..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                        {logSearch.length > 0 && (<react_native_1.Pressable onPress={() => setLogSearch('')} 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={handleDelete} hitSlop={10}>
+                          <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                        </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={() => {
+                            setLogFilters(new Set(['all']));
+                        }}>
+                            <react_native_1.View style={[
+                            styles_1.default.statusFilterChip,
+                            active && {
+                                borderColor: AppColors_1.AppColors.purpleShade700,
+                                backgroundColor: '#F4EBFF',
+                            },
+                        ]}>
+                              <react_native_1.Text numberOfLines={1} style={[
+                            styles_1.default.statusFilterText,
+                            active && {
+                                color: AppColors_1.AppColors.purpleShade700,
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                            },
+                        ]}>
+                                All ({logCounts.all})
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                          </TouchableScale_1.default>);
+                })()}
+
+                      {(() => {
+                    const active = logFilters.has('user-log');
+                    return (<TouchableScale_1.default onPress={() => {
+                            setLogFilters(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: '#64748B',
+                                backgroundColor: '#F1F5F9',
+                            },
+                        ]}>
+                              <react_native_1.Text numberOfLines={1} style={[
+                            styles_1.default.statusFilterText,
+                            active && {
+                                color: '#334155',
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                            },
+                        ]}>
+                                User Log ({logCounts['user-log']})
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                          </TouchableScale_1.default>);
+                })()}
+
+                      {(() => {
+                    const active = logFilters.has('info');
+                    return (<TouchableScale_1.default onPress={() => {
+                            setLogFilters(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.purple,
+                                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                            },
+                        ]}>
+                              <react_native_1.Text numberOfLines={1} style={[
+                            styles_1.default.statusFilterText,
+                            active && {
+                                color: AppColors_1.AppColors.purple,
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                            },
+                        ]}>
+                                Info ({logCounts.info})
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                          </TouchableScale_1.default>);
+                })()}
+
+                      {(() => {
+                    const active = logFilters.has('warn');
+                    return (<TouchableScale_1.default onPress={() => {
+                            setLogFilters(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: '#FFFDF6',
+                            },
+                        ]}>
+                              <react_native_1.Text numberOfLines={1} style={[
+                            styles_1.default.statusFilterText,
+                            active && {
+                                color: AppColors_1.AppColors.darkOrange ||
+                                    AppColors_1.AppColors.lightOrange,
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                            },
+                        ]}>
+                                Warning ({logCounts.warn})
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                          </TouchableScale_1.default>);
+                })()}
+
+                      {(() => {
+                    const active = logFilters.has('error');
+                    return (<TouchableScale_1.default onPress={() => {
+                            setLogFilters(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: '#FFF5F6',
+                            },
+                        ]}>
+                              <react_native_1.Text numberOfLines={1} style={[
+                            styles_1.default.statusFilterText,
+                            active && {
+                                color: AppColors_1.AppColors.errorColor,
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                            },
+                        ]}>
+                                Error ({logCounts.error})
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                          </TouchableScale_1.default>);
+                })()}
+
+                      {(() => {
+                    const active = logFilters.has('analytics');
+                    return (<TouchableScale_1.default onPress={() => {
+                            setLogFilters(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.skyBlue,
+                                backgroundColor: `${AppColors_1.AppColors.skyBlue}15`,
+                            },
+                        ]}>
+                              <react_native_1.Text numberOfLines={1} style={[
+                            styles_1.default.statusFilterText,
+                            active && {
+                                color: AppColors_1.AppColors.skyBlue,
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                            },
+                        ]}>
+                                Analytics ({logCounts.analytics})
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                          </TouchableScale_1.default>);
+                })()}
+                    </react_native_1.ScrollView>
+                  </react_native_1.View>
+
+                  <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={item => item.id.toString()} 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 },
+                            ]}>
+                            Showing ({filtered}/{total}) logs showing
+                          </react_native_1.Text>);
+                    }
+                    else {
+                        const activeFilterNames = Array.from(logFilters)
+                            .filter(f => f !== 'all')
+                            .map(f => {
+                            if (f === 'user-log')
+                                return 'User Log';
+                            if (f === 'analytics')
+                                return 'Analytics';
+                            return f.charAt(0).toUpperCase() + f.slice(1);
+                        });
+                        return (<react_native_1.Text style={[
+                                styles_1.default.resultCount,
+                                { marginBottom: 4, marginTop: 12 },
+                            ]}>
+                            Filtering with {activeFilterNames.join(', ')} (
+                            {filtered}/{total}) logs is showing
+                          </react_native_1.Text>);
+                    }
+                })()} renderItem={({ item }) => (<ConsoleLogCard_1.ConsoleLogCard item={item} searchStr={logSearch}/>)} 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>) : activeTab === 'webview' ? (<react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.View style={{
+                    backgroundColor: '#FFFFFF',
+                    borderBottomWidth: 1,
+                    borderBottomColor: AppColors_1.AppColors.dividerColor,
+                    paddingBottom: 6,
+                }}>
+                    {/* ─── WebView Sub-Tabs ─────────────────────────────────────── */}
+                    <react_native_1.View style={{
+                    marginHorizontal: 16,
+                    marginTop: webViewSubTab === 'navigation' ? 12 : 4,
+                    marginBottom: 8,
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 4,
+                    flexDirection: 'row',
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                }}>
+                      <react_native_1.Pressable style={[
+                    {
+                        flex: 1,
+                        paddingVertical: 8,
+                        borderRadius: 6,
+                        alignItems: 'center',
+                    },
+                    webViewSubTab === 'html' && {
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                        shadowColor: '#000',
+                        shadowOpacity: 0.1,
+                        shadowRadius: 3,
+                        shadowOffset: { width: 0, height: 1 },
+                        elevation: 2,
+                    },
+                ]} onPress={() => setWebViewSubTab('html')}>
+                        <react_native_1.Text style={[
+                    {
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 12,
+                        color: AppColors_1.AppColors.grayTextStrong,
+                    },
+                    webViewSubTab === 'html' && {
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        color: '#475569',
+                    },
+                ]}>
+                          HTML Source
+                        </react_native_1.Text>
+                      </react_native_1.Pressable>
+                      <react_native_1.Pressable style={[
+                    {
+                        flex: 1,
+                        paddingVertical: 8,
+                        borderRadius: 6,
+                        alignItems: 'center',
+                    },
+                    webViewSubTab === 'navigation' && {
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                        shadowColor: '#000',
+                        shadowOpacity: 0.1,
+                        shadowRadius: 3,
+                        shadowOffset: { width: 0, height: 1 },
+                        elevation: 2,
+                    },
+                ]} onPress={() => setWebViewSubTab('navigation')}>
+                        <react_native_1.Text style={[
+                    {
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 12,
+                        color: AppColors_1.AppColors.grayTextStrong,
+                    },
+                    webViewSubTab === 'navigation' && {
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        color: '#475569',
+                    },
+                ]}>
+                          Nav History ({webViewNavHistory.length})
+                        </react_native_1.Text>
+                      </react_native_1.Pressable>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  {/* ─── Current Page Address Bar (Always visible at the top) ─── */}
+                  {(() => {
+                    const currentUrl = webViewNavHistory[0]?.url;
+                    if (!currentUrl)
+                        return null;
+                    return (<react_native_1.View style={{
+                            paddingHorizontal: 16,
+                            paddingTop: 10,
+                            paddingBottom: 10,
+                            backgroundColor: '#FFFFFF',
+                            borderBottomWidth: 1,
+                            borderBottomColor: AppColors_1.AppColors.dividerColor,
+                        }}>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10,
+                            color: '#64748B',
+                            textTransform: 'uppercase',
+                            letterSpacing: 0.5,
+                            marginBottom: 6,
+                        }}>
+                          Currently debugging for URL
+                        </react_native_1.Text>
+                        <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            backgroundColor: '#F1F5F9',
+                            borderRadius: 20,
+                            borderWidth: 1,
+                            borderColor: '#E2E8F0',
+                            paddingHorizontal: 12,
+                            paddingVertical: 6,
+                            gap: 8,
+                        }}>
+                          {/* Left: Clickable Globe Icon to open browser */}
+                          <TouchableScale_1.default onPress={() => react_native_1.Linking.openURL(currentUrl)} hitSlop={8} style={{
+                            width: 24,
+                            height: 24,
+                            borderRadius: 12,
+                            backgroundColor: '#E2E8F0',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }} children={<NetworkIcons_1.GlobeIcon size={12} color="#475569"/>}/>
+
+                          {/* Middle: URL text (Address style) */}
+                          <react_native_1.View style={{ flex: 1 }}>
+                            <HighlightText_1.default text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
+                            fontFamily: AppFonts_1.AppFonts.interMedium,
+                            fontSize: 11,
+                            color: '#475569',
+                        }} highlightStyle={styles_1.default.highlight} detectLinks={false}/>
+                          </react_native_1.View>
+
+                          {/* Right: Copy Button */}
+                          <CopyButton_1.default value={currentUrl} label="URL"/>
+                        </react_native_1.View>
+                      </react_native_1.View>);
+                })()}
+
+                  {webViewSubTab === 'html' ? (<react_native_1.View style={{ flex: 1 }}>
+                      {webViewHtml || webViewCss || webViewJs ? (<react_native_1.View style={{ flex: 1 }}>
+                          {/* Inner sub-tabs inside HTML source view */}
+                          <react_native_1.View style={{
+                            flexDirection: 'row',
+                            borderBottomWidth: 1,
+                            borderBottomColor: '#E2E8F0',
+                            backgroundColor: '#FFFFFF',
+                            paddingHorizontal: 16,
+                        }}>
+                            {['html', 'css', 'javascript'].map(tab => {
+                            const active = htmlSubTab === tab;
+                            const label = tab === 'html'
+                                ? 'HTML'
+                                : tab === 'css'
+                                    ? 'CSS'
+                                    : 'Javascript';
+                            return (<react_native_1.Pressable key={tab} onPress={() => setHtmlSubTab(tab)} style={{
+                                    paddingVertical: 10,
+                                    marginRight: 16,
+                                    borderBottomWidth: 2,
+                                    borderBottomColor: active
+                                        ? AppColors_1.AppColors.purple
+                                        : 'transparent',
+                                }}>
+                                    <react_native_1.Text style={{
+                                    fontFamily: active
+                                        ? AppFonts_1.AppFonts.interBold
+                                        : AppFonts_1.AppFonts.interMedium,
+                                    fontSize: 12,
+                                    color: active
+                                        ? AppColors_1.AppColors.purple
+                                        : '#64748B',
+                                }}>
+                                      {label}
+                                    </react_native_1.Text>
+                                  </react_native_1.Pressable>);
+                        })}
+                          </react_native_1.View>
+                          <react_native_1.View style={{ flex: 1, padding: 12 }}>
+                            {htmlSubTab === 'html' ? (webViewHtml ? (<react_native_1.View style={{ flex: 1 }}>
+                                  <react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                marginBottom: 8,
+                                gap: 8,
+                            }}>
+                                    <react_native_1.View style={[
+                                styles_1.default.searchContainer,
+                                { flex: 1 },
+                            ]}>
+                                      <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                                      <react_native_1.TextInput placeholder="Search HTML..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={htmlSearch} onChangeText={setHtmlSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                                      {htmlSearch.length > 0 && (<react_native_1.Pressable onPress={() => setHtmlSearch('')} 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>
+                                    <CopyButton_1.default value={webViewHtml} label="HTML Source"/>
+                                  </react_native_1.View>
+                                  <CodeSnippet_1.default code={webViewHtml} language="html" search={htmlSearch}/>
+                                </react_native_1.View>) : (<react_native_1.Text style={{
+                                fontFamily: 'monospace',
+                                fontSize: 11,
+                                color: '#94A3B8',
+                                padding: 12,
+                            }}>
+                                  No HTML content captured.
+                                </react_native_1.Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<react_native_1.View style={{ flex: 1 }}>
+                                  <react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                marginBottom: 8,
+                                gap: 8,
+                            }}>
+                                    <react_native_1.View style={[
+                                styles_1.default.searchContainer,
+                                { flex: 1 },
+                            ]}>
+                                      <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                                      <react_native_1.TextInput placeholder="Search CSS..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={cssSearch} onChangeText={setCssSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                                      {cssSearch.length > 0 && (<react_native_1.Pressable onPress={() => setCssSearch('')} 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>
+                                    <CopyButton_1.default value={webViewCss} label="CSS Source"/>
+                                  </react_native_1.View>
+                                  <CodeSnippet_1.default code={webViewCss} language="css" search={cssSearch}/>
+                                </react_native_1.View>) : (<react_native_1.Text style={{
+                                fontFamily: 'monospace',
+                                fontSize: 11,
+                                color: '#94A3B8',
+                                padding: 12,
+                            }}>
+                                  No CSS styles detected on this page.
+                                </react_native_1.Text>)) : webViewJs ? (<react_native_1.View style={{ flex: 1 }}>
+                                <react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                marginBottom: 8,
+                                gap: 8,
+                            }}>
+                                  <react_native_1.View style={[styles_1.default.searchContainer, { flex: 1 }]}>
+                                    <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                                    <react_native_1.TextInput placeholder="Search Javascript..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={jsSearch} onChangeText={setJsSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                                    {jsSearch.length > 0 && (<react_native_1.Pressable onPress={() => setJsSearch('')} 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>
+                                  <CopyButton_1.default value={webViewJs} label="JS Source"/>
+                                </react_native_1.View>
+                                <CodeSnippet_1.default code={webViewJs} language="javascript" search={jsSearch}/>
+                              </react_native_1.View>) : (<react_native_1.Text style={{
+                                fontFamily: 'monospace',
+                                fontSize: 11,
+                                color: '#94A3B8',
+                                padding: 12,
+                            }}>
+                                No scripts detected on this page.
+                              </react_native_1.Text>)}
+                          </react_native_1.View>
+                        </react_native_1.View>) : (<react_native_1.View style={styles_1.default.emptyContainer}>
+                          <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                            <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
+                          </react_native_1.View>
+                          <react_native_1.Text style={styles_1.default.emptyTitle}>
+                            No Page Source Captured
+                          </react_native_1.Text>
+                          <react_native_1.Text style={styles_1.default.emptySub}>
+                            Load a page in the WebView to inspect its HTML, CSS,
+                            or Javascript source.
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>) : (<react_native_1.FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} ListHeaderComponent={<react_native_1.View style={{
+                            paddingHorizontal: 16,
+                            paddingTop: 12,
+                            paddingBottom: 8,
+                        }}>
+                          <react_native_1.Text style={styles_1.default.resultCount}>
+                            Navigation History ({webViewNavHistory.length})
+                          </react_native_1.Text>
+                        </react_native_1.View>} renderItem={({ item, index, }) => {
+                        const isLatest = index === 0;
+                        const formatNavTime = (ts) => {
+                            const d = new Date(ts);
+                            return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+                        };
+                        return (<react_native_1.View style={{
+                                paddingHorizontal: 16,
+                                paddingVertical: 8,
+                                backgroundColor: isLatest ? '#F1F5F9' : '#FFFFFF',
+                                borderBottomWidth: 1,
+                                borderBottomColor: '#E2E8F0',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                gap: 12,
+                            }}>
+                            <react_native_1.View style={{ flex: 1, gap: 2 }}>
+                              <react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 6,
+                                flexWrap: 'wrap',
+                            }}>
+                                <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 13,
+                                color: '#334155',
+                                flexShrink: 1,
+                            }}>
+                                  {item.title || 'Untitled Page'}
+                                </react_native_1.Text>
+                                {isLatest && (<react_native_1.View style={{
+                                    backgroundColor: '#E2E8F0',
+                                    paddingHorizontal: 6,
+                                    paddingVertical: 2,
+                                    borderRadius: 4,
+                                }}>
+                                    <react_native_1.Text style={{
+                                    fontFamily: AppFonts_1.AppFonts.interBold,
+                                    fontSize: 9,
+                                    color: '#475569',
+                                }}>
+                                      Active
+                                    </react_native_1.Text>
+                                  </react_native_1.View>)}
+                              </react_native_1.View>
+                              <HighlightText_1.default text={item.url} search={webViewSearch} numberOfLines={3} ellipsizeMode="tail" style={{
+                                fontFamily: AppFonts_1.AppFonts.interRegular,
+                                fontSize: 11,
+                                color: '#64748B',
+                                flexShrink: 1,
+                            }} highlightStyle={styles_1.default.highlight} detectLinks={true}/>
+                              <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interRegular,
+                                fontSize: 10,
+                                color: '#94A3B8',
+                            }}>
+                                {formatNavTime(item.timestamp)}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                            <CopyButton_1.default value={item.url} label="Copy URL"/>
+                          </react_native_1.View>);
+                    }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={false}/>} contentContainerStyle={[
+                        styles_1.default.listContent,
+                        filteredNavHistory.length === 0 && { flexGrow: 1 },
+                    ]} keyboardShouldPersistTaps="handled"/>)}
+                </react_native_1.View>) : (<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={styles_1.default.detailContent} showsVerticalScrollIndicator={true}>
+                  {(() => {
+                    const routeInfo = logRouteMapRef.current.get(selected.id);
+                    const screenPath = routeInfo && routeInfo.path !== 'Navigators'
+                        ? routeInfo.path.split(' ➔ ')
+                        : [];
+                    const parts = ['APIs', 'APIs', ...screenPath];
+                    return (<react_native_1.View style={{ marginBottom: 12, marginTop: 4 }}>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interMedium,
+                            fontSize: 11.5,
+                            color: AppColors_1.AppColors.grayTextWeak,
+                        }}>
+                          {parts.map((part, index) => (<react_1.default.Fragment key={index}>
+                              {index > 0 && '  ➔  '}
+                              <react_native_1.Text style={index === parts.length - 1
+                                ? {
+                                    color: AppColors_1.AppColors.purple,
+                                    fontFamily: AppFonts_1.AppFonts.interBold,
+                                }
+                                : undefined}>
+                                {part}
+                              </react_native_1.Text>
+                            </react_1.default.Fragment>))}
+                        </react_native_1.Text>
+                      </react_native_1.View>);
+                })()}
+
+                  <react_native_1.View style={styles_1.default.detailInfoBar}>
+                    <react_native_1.View style={styles_1.default.detailInfoTop}>
+                      <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                }}>
+                        <react_native_1.View style={[
+                    styles_1.default.methodBadge,
+                    {
+                        backgroundColor: `${constants_1.METHOD_COLORS[selected.method] ??
+                            constants_1.METHOD_COLORS.ALL}15`,
+                    },
+                ]}>
+                          <react_native_1.Text style={[
+                    styles_1.default.methodBadgeText,
+                    {
+                        color: constants_1.METHOD_COLORS[selected.method] ??
+                            constants_1.METHOD_COLORS.ALL,
+                    },
+                ]}>
+                            {selected.method}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+
+                        {selected.status != null && (<react_native_1.View style={[
+                        styles_1.default.chip,
+                        {
+                            backgroundColor: selected.status === 0
+                                ? `${AppColors_1.AppColors.errorColor}15`
+                                : `${(0, helpers_1.getStatusColor)(selected.status)}15`,
+                            borderColor: selected.status === 0
+                                ? `${AppColors_1.AppColors.errorColor}40`
+                                : `${(0, helpers_1.getStatusColor)(selected.status)}40`,
+                        },
+                    ]}>
+                            {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_svg_1.default width={6} height={6} viewBox="0 0 10 10" fill="none">
+                                <react_native_svg_1.Circle cx="5" cy="5" r="5" fill={(0, helpers_1.getStatusColor)(selected.status)}/>
+                              </react_native_svg_1.default>)}
+                            <react_native_1.Text style={[
+                        styles_1.default.chipText,
+                        {
+                            color: selected.status === 0
+                                ? AppColors_1.AppColors.errorColor
+                                : (0, helpers_1.getStatusColor)(selected.status),
+                        },
+                    ]}>
+                              {selected.status === 0
+                        ? 'Failed'
+                        : String(selected.status)}
+                            </react_native_1.Text>
+                          </react_native_1.View>)}
+                      </react_native_1.View>
+                      <react_native_1.View style={styles_1.default.detailInfoRight}>
+                        <TouchableScale_1.default style={styles_1.default.iconSquareBtn} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                          <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                        </TouchableScale_1.default>
+                        <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
+                        <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
+                        <CopyButton_1.default value={detailDisplayUrl} label="URL"/>
+                      </react_native_1.View>
+                    </react_native_1.View>
+
+                    <react_native_1.Pressable style={styles_1.default.detailUrlContainer} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
+                      <react_native_1.Text selectable={true} style={styles_1.default.detailUrl}>
+                        {detailDisplayUrl}
+                      </react_native_1.Text>
+                    </react_native_1.Pressable>
+                  </react_native_1.View>
+
+                  <MetaAccordion_1.default status={selected.status} statusColor={(0, helpers_1.getStatusColor)(selected.status)} duration={selected.duration} size={(0, helpers_1.getSize)(selected.response)} triggeredAt={(0, helpers_1.formatDateTime)(selected.startTime)}/>
+
+                  {(() => {
+                    const routeInfo = logRouteMapRef.current.get(selected.id);
+                    if (!routeInfo || routeInfo.path === 'Navigators')
+                        return null;
+                    return <SourcePageCard_1.default routeInfo={routeInfo}/>;
+                })()}
+
+                  <react_native_1.View style={styles_1.default.seperator}/>
+
+                  {(() => {
+                    const cType = selected.responseHeaders?.['content-type'] ||
+                        selected.responseHeaders?.['Content-Type'];
+                    if (cType?.includes('image/')) {
+                        return (<react_native_1.View style={styles_1.default.imagePreviewWrapper}>
+                          <react_native_1.Image source={{ uri: selected.url }} style={styles_1.default.imagePreview} resizeMode="contain"/>
+                          <TouchableScale_1.default style={styles_1.default.imageDownloadBtn} onPress={() => react_native_1.Linking.openURL(selected.url)} hitSlop={10}>
+                            <NetworkIcons_1.DownloadIcon color={AppColors_1.AppColors.purple} size={18}/>
+                          </TouchableScale_1.default>
+                        </react_native_1.View>);
+                    }
+                    return null;
+                })()}
+
+                  <react_native_1.View style={styles_1.default.detailSearchRow}>
+                    <react_native_1.View style={styles_1.default.detailSearchBox}>
+                      <react_native_1.TextInput placeholder="Search in request / response..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                      {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                          <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                        </react_native_1.Pressable>)}
+                    </react_native_1.View>
+                    <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { marginLeft: 8 }]} onPress={() => {
+                    const next = reqExpanded === true || resExpanded === true
+                        ? false
+                        : true;
+                    setReqExpanded(next);
+                    setResExpanded(next);
+                }} hitSlop={10}>
+                      <NetworkIcons_1.ExpandCollapseIcon isExpanded={reqExpanded === true || resExpanded === true} color={reqExpanded === true || resExpanded === true
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayTextWeak} size={14}/>
+                    </TouchableScale_1.default>
+                  </react_native_1.View>
+
+                  <HeadersSection_1.default title="Request Headers" headers={selected.requestHeaders} search={detailSearch} resetKey={selected.id}/>
+                  <HeadersSection_1.default title="Response Headers" headers={selected.responseHeaders} search={detailSearch} resetKey={selected.id}/>
+
+                  {selected.request != null && selected.method !== 'GET' && (<react_native_1.View style={styles_1.default.sectionContainer}>
+                      <SectionHeader_1.default title="Request" value={selected.request} expanded={reqExpanded} onToggleExpand={() => setReqExpanded(v => !v)} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={() => {
+                        setShowReqDiff(v => !v);
+                        if (!reqExpanded && !showReqDiff)
+                            setReqExpanded(true);
+                    }}/>
+                      {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen={reqExpanded}/>)}
+                    </react_native_1.View>)}
+
+                  <react_native_1.View style={styles_1.default.sectionContainer}>
+                    <SectionHeader_1.default title="Response" value={selected.response} expanded={resExpanded} onToggleExpand={() => setResExpanded(v => !v)} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={() => {
+                    setShowResDiff(v => !v);
+                    if (!resExpanded && !showResDiff)
+                        setResExpanded(true);
+                }}/>
+                    {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen={resExpanded}/>)}
+                  </react_native_1.View>
+                </react_native_1.ScrollView>)) : (<react_native_1.View style={styles_1.default.empty}>
+                <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
+                  Loading logs...
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>)}
+      </react_native_1.Modal>
+    </>);
+};
+exports.default = NetworkInspector;
+// ─── Analytics list styles (Firebase DebugView look) ─────────────────────────
+const analyticsListStyles = react_native_1.StyleSheet.create({
+    cardRow: {},
+    // ── Top Events summary card (mirrors Firebase DebugView right panel) ────────
+    topEventsCard: {
+        marginHorizontal: 16,
+        marginBottom: 12,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    topEventsHeaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+    },
+    topEventsTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.8,
+        textTransform: 'uppercase',
+    },
+    topEventsSubtitle: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 9,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.4,
+    },
+    topEventRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 8,
+        gap: 8,
+    },
+    topEventName: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        flex: 1,
+    },
+    topEventBarWrap: {
+        flex: 0.8,
+        height: 3,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 2,
+        overflow: 'hidden',
+    },
+    topEventBar: {
+        height: '100%',
+        borderRadius: 2,
+    },
+    topEventCount: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+        width: 24,
+        textAlign: 'right',
+    },
+    iconCircle: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+// Re-export public APIs
+var networkLogger_2 = require("./customHooks/networkLogger");
+Object.defineProperty(exports, "setupNetworkLogger", { enumerable: true, get: function () { return networkLogger_2.setupNetworkLogger; } });
+Object.defineProperty(exports, "clearNetworkLogs", { enumerable: true, get: function () { return networkLogger_2.clearNetworkLogs; } });
+Object.defineProperty(exports, "subscribeNetworkLogs", { enumerable: true, get: function () { return networkLogger_2.subscribeNetworkLogs; } });
+var consoleLogger_2 = require("./customHooks/consoleLogger");
+Object.defineProperty(exports, "setupConsoleLogger", { enumerable: true, get: function () { return consoleLogger_2.setupConsoleLogger; } });
+Object.defineProperty(exports, "clearConsoleLogs", { enumerable: true, get: function () { return consoleLogger_2.clearConsoleLogs; } });
+Object.defineProperty(exports, "subscribeConsoleLogs", { enumerable: true, get: function () { return consoleLogger_2.subscribeConsoleLogs; } });
+var analyticsLogger_2 = require("./customHooks/analyticsLogger");
+Object.defineProperty(exports, "setupAnalyticsLogger", { enumerable: true, get: function () { return analyticsLogger_2.setupAnalyticsLogger; } });
+Object.defineProperty(exports, "logAnalyticsEvent", { enumerable: true, get: function () { return analyticsLogger_2.logAnalyticsEvent; } });
+Object.defineProperty(exports, "subscribeAnalyticsEvents", { enumerable: true, get: function () { return analyticsLogger_2.subscribeAnalyticsEvents; } });
+Object.defineProperty(exports, "clearAnalyticsEvents", { enumerable: true, get: function () { return analyticsLogger_2.clearAnalyticsEvents; } });
+var webViewLogger_2 = require("./customHooks/webViewLogger");
+Object.defineProperty(exports, "getWebViewLogs", { enumerable: true, get: function () { return webViewLogger_2.getWebViewLogs; } });
+Object.defineProperty(exports, "getWebViewNavHistory", { enumerable: true, get: function () { return webViewLogger_2.getWebViewNavHistory; } });
+Object.defineProperty(exports, "getWebViewHtml", { enumerable: true, get: function () { return webViewLogger_2.getWebViewHtml; } });
+Object.defineProperty(exports, "getWebViewCss", { enumerable: true, get: function () { return webViewLogger_2.getWebViewCss; } });
+Object.defineProperty(exports, "getWebViewJs", { enumerable: true, get: function () { return webViewLogger_2.getWebViewJs; } });
+Object.defineProperty(exports, "getWebViewHtmlUrl", { enumerable: true, get: function () { return webViewLogger_2.getWebViewHtmlUrl; } });
+Object.defineProperty(exports, "clearWebViewData", { enumerable: true, get: function () { return webViewLogger_2.clearWebViewData; } });
+Object.defineProperty(exports, "subscribeWebView", { enumerable: true, get: function () { return webViewLogger_2.subscribeWebView; } });