react-native-inapp-inspector 1.0.3 → 1.0.5

package/dist/commonjs/index.js

@@ -36,7 +36,7 @@ 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;
+exports.subscribeReduxState = exports.getReduxState = exports.connectReduxStore = exports.ErrorBoundary = exports.subscribeWebView = exports.clearWebViewData = exports.getWebViewHtmlUrl = exports.getWebViewJs = exports.getWebViewCss = exports.getWebViewHtml = exports.getWebViewNavHistory = exports.getWebViewLogs = exports.WebView = 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"));
@@ -47,8 +47,6 @@ 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"));
@@ -64,10 +62,11 @@ const CodeSnippet_1 = __importDefault(require("./components/CodeSnippet"));
 const helpers_1 = require("./helpers");
 // Assets
 const NetworkIcons_1 = require("./components/NetworkIcons");
+const ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
 // Stylesheet
 const AppColors_1 = require("./styles/AppColors");
 const AppFonts_1 = require("./styles/AppFonts");
-const styles_1 = __importDefault(require("./styles"));
+const styles_1 = __importStar(require("./styles"));
 // Network
 const networkLogger_1 = require("./customHooks/networkLogger");
 // Console
@@ -78,6 +77,7 @@ const AnalyticsEventCard_1 = __importStar(require("./components/AnalyticsEventCa
 const AnalyticsDetail_1 = __importDefault(require("./components/AnalyticsDetail"));
 // WebView
 const webViewLogger_1 = require("./customHooks/webViewLogger");
+const reduxLogger_1 = require("./customHooks/reduxLogger");
 const constants_1 = require("./constants");
 const NavigationTracker = ({ onStateChange }) => {
     const navState = (0, native_1.useNavigationState)(state => state);
@@ -87,6 +87,9 @@ const NavigationTracker = ({ onStateChange }) => {
     return null;
 };
 const NetworkInspector = () => {
+    const [isDark, setIsDark] = (0, react_1.useState)(false);
+    const [reduxState, setReduxState] = (0, react_1.useState)(null);
+    const [expandedReducers, setExpandedReducers] = (0, react_1.useState)({});
     const [logs, setLogs] = (0, react_1.useState)([]);
     const [visible, setVisible] = (0, react_1.useState)(false);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
@@ -94,6 +97,14 @@ const NetworkInspector = () => {
     const [selectedLogs, setSelectedLogs] = (0, react_1.useState)(new Set());
     const [search, setSearch] = (0, react_1.useState)('');
     const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
+    const [reduxSearch, setReduxSearch] = (0, react_1.useState)('');
+    const [apiDetailActiveTab, setApiDetailActiveTab] = (0, react_1.useState)('metadata');
+    (0, react_1.useEffect)(() => {
+        if (selected) {
+            setApiDetailActiveTab('metadata');
+            setDetailSearch('');
+        }
+    }, [selected]);
     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)({});
@@ -135,20 +146,23 @@ const NetworkInspector = () => {
     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 [isHtmlTabReady, setIsHtmlTabReady] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        setIsHtmlTabReady(false);
+        const timer = setTimeout(() => {
+            setIsHtmlTabReady(true);
+        }, 120);
+        return () => clearTimeout(timer);
+    }, [htmlSubTab, webViewSubTab, activeTab]);
     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());
@@ -288,6 +302,10 @@ const NetworkInspector = () => {
                 setWebViewHtmlUrl((0, webViewLogger_1.getWebViewHtmlUrl)());
             }, 200);
         });
+        setReduxState((0, reduxLogger_1.getReduxState)());
+        const unsubscribeRedux = (0, reduxLogger_1.subscribeReduxState)(() => {
+            setReduxState((0, reduxLogger_1.getReduxState)());
+        });
         return () => {
             unsubscribe();
             clearTimeout(timeoutId);
@@ -297,6 +315,7 @@ const NetworkInspector = () => {
             clearTimeout(consoleTimeoutId);
             unsubscribeWebView();
             clearTimeout(webViewTimeoutId);
+            unsubscribeRedux();
         };
     }, []);
     (0, react_1.useEffect)(() => {
@@ -581,39 +600,6 @@ const NetworkInspector = () => {
             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 => {
@@ -623,51 +609,6 @@ const NetworkInspector = () => {
         });
         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);
@@ -814,12 +755,317 @@ const NetworkInspector = () => {
         toggleSectionFilter,
         toggleSectionCollapse,
     ]);
+    const renderInsightsDashboard = () => {
+        const apiTotal = logs.length;
+        const apiErrors = logs.filter(l => (l.status != null && l.status >= 400) || l.status === 0 || l.status == null).length;
+        const apiSuccess = apiTotal - apiErrors;
+        const apiSuccessRate = apiTotal > 0 ? Math.round((apiSuccess / apiTotal) * 100) : 100;
+        const durations = logs.filter(l => l.duration != null).map(l => l.duration);
+        const avgTime = durations.length > 0
+            ? Math.round(durations.reduce((a, b) => a + b, 0) / durations.length)
+            : null;
+        const logTotal = visibleConsoleLogs.length;
+        const logErrors = visibleConsoleLogs.filter(l => l.type === 'error').length;
+        const logWarns = visibleConsoleLogs.filter(l => l.type === 'warn').length;
+        const logInfos = visibleConsoleLogs.filter(l => l.type === 'info').length;
+        const analyticsTotal = analyticsEvents.length;
+        const uniqueEvents = new Set(analyticsEvents.map(e => e.name)).size;
+        const screenViews = analyticsEvents.filter(e => e.name === 'screen_view' || e.name === 'page_view' || e.name === 'firebase_screen_class').length;
+        const webviewTotal = webViewNavHistory.length;
+        return (<react_native_1.View style={styles_1.default.dashboardContainer}>
+        {/* Module 1: APIs */}
+        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('apis')}>
+          <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={18}/>
+              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>APIs & Network</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{apiTotal}</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Requests</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={[styles_1.default.dashboardGridVal, apiSuccessRate < 90 && { color: AppColors_1.AppColors.warningIconGold }]}>
+                {apiSuccessRate}%
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Success Rate</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={[styles_1.default.dashboardGridVal, apiErrors > 0 && { color: AppColors_1.AppColors.errorColor }]}>
+                {apiErrors}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={styles_1.default.dashboardGridVal}>
+                {avgTime != null ? `${avgTime}ms` : '—'}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Avg Latency</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </TouchableScale_1.default>
+
+        {/* Module 2: Logs */}
+        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('logs')}>
+          <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <NetworkIcons_1.TerminalIcon color="#0D9488" size={18}/>
+              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Console Logs</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{logTotal}</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Logs</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#0D9488' }]}>{logInfos}</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Info</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={[styles_1.default.dashboardGridVal, logWarns > 0 && { color: AppColors_1.AppColors.warningIconGold }]}>
+                {logWarns}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Warnings</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={[styles_1.default.dashboardGridVal, logErrors > 0 && { color: AppColors_1.AppColors.errorColor }]}>
+                {logErrors}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </TouchableScale_1.default>
+
+        {/* Module 3: Analytics */}
+        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('analytics')}>
+          <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <NetworkIcons_1.AnalyticsIcon color="#EA580C" size={18}/>
+              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Analytics Events</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{analyticsTotal}</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Events</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#EA580C' }]}>{uniqueEvents}</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Unique Names</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{screenViews}</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Screen Views</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={styles_1.default.dashboardGridVal}>
+                {analyticsTotal > 0 ? Math.round(analyticsTotal / Math.max(1, logs.length / 5)) : 0}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Events Ratio</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </TouchableScale_1.default>
+
+        {/* Module 4: WebView */}
+        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('webview')}>
+          <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <NetworkIcons_1.GlobeIcon color="#2563EB" size={18}/>
+              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>WebView Captures</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={styles_1.default.dashboardGridVal}>{webviewTotal}</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>History Size</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#16A34A' }]}>Active</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Status</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.dashboardGridItem}>
+              <react_native_1.Text numberOfLines={1} style={styles_1.default.dashboardGridVal}>
+                {webviewTotal > 0 ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...` : '—'}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Last URL</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </TouchableScale_1.default>
+
+        {/* Module 5: Redux Store */}
+        <TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('redux')}>
+          <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={18}/>
+              <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Redux Store State</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
+          </react_native_1.View>
+          {reduxState ? (<react_native_1.View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
+              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.5 }}>
+                  REDUCER NAME
+                </react_native_1.Text>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak, letterSpacing: 0.5 }}>
+                  SIZE / FIELDS
+                </react_native_1.Text>
+              </react_native_1.View>
+              {Object.keys(reduxState).map(key => {
+                    const val = reduxState[key];
+                    const fieldsCount = typeof val === 'object' && val !== null ? Object.keys(val).length : 0;
+                    const sizeStr = (0, helpers_1.getSize)(val);
+                    return (<react_native_1.View key={key} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 2 }}>
+                    <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 12, color: AppColors_1.AppColors.grayTextStrong }}>
+                      {key}
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: AppColors_1.AppColors.grayTextWeak }}>
+                      {sizeStr} ({fieldsCount} fields)
+                    </react_native_1.Text>
+                  </react_native_1.View>);
+                })}
+            </react_native_1.View>) : (<react_native_1.View style={{ padding: 12, alignItems: 'center' }}>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 12, color: AppColors_1.AppColors.grayTextWeak }}>
+                No connected Redux store.
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </TouchableScale_1.default>
+      </react_native_1.View>);
+    };
+    const renderReduxTab = () => {
+        if (!reduxState) {
+            return (<react_native_1.View style={styles_1.default.emptyContainer}>
+          <react_native_1.View style={styles_1.default.emptyIconWrap}>
+            <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={32}/>
+          </react_native_1.View>
+          <react_native_1.Text style={styles_1.default.emptyTitle}>No Redux Store</react_native_1.Text>
+          <react_native_1.Text style={styles_1.default.emptySub}>
+            To inspect Redux store, call connectReduxStore(store) at app start.
+          </react_native_1.Text>
+        </react_native_1.View>);
+        }
+        const reducerKeys = Object.keys(reduxState);
+        if (reducerKeys.length === 0) {
+            return (<react_native_1.View style={styles_1.default.emptyContainer}>
+          <react_native_1.Text style={styles_1.default.emptyTitle}>Empty Store</react_native_1.Text>
+          <react_native_1.Text style={styles_1.default.emptySub}>Connected store state is empty.</react_native_1.Text>
+        </react_native_1.View>);
+        }
+        return (<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
+        <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingHorizontal: 16,
+                paddingVertical: 12,
+                borderBottomWidth: 1,
+                borderBottomColor: AppColors_1.AppColors.dividerColor,
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+            }}>
+          <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                color: AppColors_1.AppColors.grayTextStrong,
+                fontSize: 12,
+                textTransform: 'uppercase',
+                letterSpacing: 0.6,
+            }}>
+            Redux Store ({reducerKeys.length} Reducers)
+          </react_native_1.Text>
+          <CopyButton_1.default value={() => reduxState} label="Overall Store"/>
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderRadius: 8,
+                marginHorizontal: 16,
+                marginTop: 12,
+                marginBottom: 8,
+                paddingHorizontal: 10,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+                height: 36,
+            }}>
+          <react_native_1.TextInput placeholder="Search Redux keys or values..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
+                flex: 1,
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 12,
+                color: AppColors_1.AppColors.grayTextStrong,
+                padding: 0,
+            }} autoCorrect={false} autoCapitalize="none"/>
+          {reduxSearch.length > 0 && (<react_native_1.Pressable onPress={() => setReduxSearch('')} hitSlop={10}>
+              <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+            </react_native_1.Pressable>)}
+        </react_native_1.View>
+
+        {reducerKeys.map(key => {
+                const isExpanded = expandedReducers[key];
+                const val = reduxState[key];
+                return (<react_native_1.View key={key} style={{
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                        borderBottomWidth: 1,
+                        borderBottomColor: AppColors_1.AppColors.dividerColor,
+                    }}>
+              <react_native_1.Pressable onPress={() => {
+                        setExpandedReducers(prev => ({
+                            ...prev,
+                            [key]: !prev[key],
+                        }));
+                    }} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        paddingHorizontal: 16,
+                        paddingVertical: 12,
+                    }}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1 }}>
+                  <react_native_1.Animated.View style={{ transform: [{ rotate: isExpanded ? '0deg' : '-90deg' }] }}>
+                    <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.Animated.View>
+                  <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 13,
+                        color: AppColors_1.AppColors.purple,
+                    }}>
+                    {key}
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.grayTextWeak,
+                    }}>
+                    ({typeof val === 'object' && val !== null ? `${Object.keys(val).length} fields` : typeof val})
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <CopyButton_1.default value={() => val} label={`${key} Reducer`}/>
+              </react_native_1.Pressable>
+
+              {isExpanded && (<react_native_1.View style={{
+                            backgroundColor: AppColors_1.AppColors.grayBackground,
+                            paddingHorizontal: 12,
+                            paddingVertical: 8,
+                            borderTopWidth: 1,
+                            borderTopColor: AppColors_1.AppColors.dividerColor,
+                        }}>
+                  <JsonViewer_1.default data={val} search={reduxSearch}/>
+                </react_native_1.View>)}
+            </react_native_1.View>);
+            })}
+      </react_native_1.ScrollView>);
+    };
     return (<>
       {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
       <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>
+          <NetworkIcons_1.DebugIcon color="#FFFFFF" size={28}/>
         </react_native_linear_gradient_1.default>
         {(logs.length > 0 || analyticsEvents.length > 0) && (<react_native_1.Animated.View style={[
                 styles_1.default.fabBadge,
@@ -835,23 +1081,24 @@ const NetworkInspector = () => {
       </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"/>
+        {visible && (<ErrorBoundary_1.default onClose={closeModal}>
+            <react_native_1.View style={styles_1.default.modalBackdrop}>
+            <react_native_1.Pressable style={styles_1.default.modalBackdropPressable} onPress={closeModal}/>
+            <react_native_1.View style={styles_1.default.modalContentCard}>
+              <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,
+              <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}>
+                  <react_native_1.View style={[
+                styles_1.default.headerLeft,
                 {
-                    paddingTop: react_native_1.Platform.OS === 'android'
-                        ? (react_native_1.StatusBar.currentHeight ?? 24) + 16
-                        : 54,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 16,
+                    flex: (selected == null && selectedEvent == null) ? 5 : 1,
                 },
             ]}>
-                <react_native_1.View style={[
-                styles_1.default.headerLeft,
-                { flexDirection: 'row', alignItems: 'center', gap: 16 },
-            ]}>
-                  <TouchableScale_1.default onPress={() => {
+                    <TouchableScale_1.default onPress={() => {
                 requestAnimationFrame(() => {
                     setSelected(null);
                     setSelectedEvent(null);
@@ -861,100 +1108,48 @@ const NetworkInspector = () => {
                 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>
+                      <NetworkIcons_1.WhiteBackNavigation />
+                    </TouchableScale_1.default>
 
-                      {/* 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>
+                    {selected == null && selectedEvent == null ? (<react_native_1.Text style={styles_1.default.headerTitle}>RN-InApp-Inspector</react_native_1.Text>) : 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={[
+                  <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 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.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={[
+                        <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
+                          <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                            {selected.status === 0
                     ? 'Failed'
                     : selected.status ?? 'Pending'}{' '}
-                          •{' '}
-                          {selected.duration != null
+                            •{' '}
+                            {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={[
+                          </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'
@@ -962,16 +1157,16 @@ const NetworkInspector = () => {
                             : 'rgba(124,92,191,0.3)',
                     },
                 ]}>
-                          <react_native_1.Text style={styles_1.default.headerMethodText}>
-                            {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                            <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.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={[
+                        <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                          <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
@@ -979,133 +1174,76 @@ const NetworkInspector = () => {
                             : 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
+                          <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>
+                            {' · '}
+                            {selectedEvent.source}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </react_native_1.View>) : null}
+                  </react_native_1.View>
 
-            {(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);
-                }}/>)}
+                  <react_native_1.View style={styles_1.default.headerRight}>
+                    <TouchableScale_1.default onPress={() => {
+                const newTheme = !isDark;
+                setIsDark(newTheme);
+                (0, styles_1.toggleGlobalTheme)(newTheme);
+            }} hitSlop={15} style={[styles_1.default.closeButtonCircle, { marginRight: 8 }]}>
+                      {isDark ? (<NetworkIcons_1.SunIcon color="#FFFFFF" size={16}/>) : (<NetworkIcons_1.MoonIcon color="#FFFFFF" size={16}/>)}
+                    </TouchableScale_1.default>
 
-            {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>)}
+                    <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonCircle}>
+                      <NetworkIcons_1.CloseWhite size={16}/>
+                    </TouchableScale_1.default>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </react_native_linear_gradient_1.default>
 
-            {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>);
+              {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
+              {selected == null && selectedEvent == null ? (<react_native_1.View style={styles_1.default.tabBarContainer}>
+                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
+                    {[
+                    { key: 'insights', label: 'Insights', count: 0, icon: 'insights' },
+                    { key: 'apis', label: 'APIs', count: logs.length, icon: 'apis' },
+                    { key: 'logs', label: 'Logs', count: consoleLogs.length, icon: 'logs' },
+                    { key: 'analytics', label: 'Analytics', count: analyticsEvents.length, icon: 'analytics' },
+                    { key: 'webview', label: 'WebView', count: webViewNavHistory.length, icon: 'webview' },
+                    { key: 'redux', label: 'Redux', count: 0, icon: 'redux' },
+                ].map(tab => {
+                    const isActive = activeTab === tab.key;
+                    const iconColor = isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText;
+                    const countLabel = tab.count > 9 ? '9+' : String(tab.count);
+                    return (<TouchableScale_1.default key={tab.key} onPress={() => {
+                            requestAnimationFrame(() => {
+                                setActiveTab(tab.key);
+                            });
+                        }} style={[
+                            styles_1.default.contentTabButton,
+                            isActive && styles_1.default.contentTabButtonActive,
+                        ]}>
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                            {tab.icon === 'insights' && <NetworkIcons_1.InsightsIcon color={iconColor} size={14}/>}
+                            {tab.icon === 'apis' && <NetworkIcons_1.SignalIcon color={iconColor} size={14}/>}
+                            {tab.icon === 'logs' && <NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>}
+                            {tab.icon === 'analytics' && <NetworkIcons_1.AnalyticsIcon color={iconColor} size={14}/>}
+                            {tab.icon === 'webview' && <NetworkIcons_1.GlobeIcon color={iconColor} size={14}/>}
+                            {tab.icon === 'redux' && <NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>}
+                            <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
+                            styles_1.default.contentTabButtonText,
+                            isActive && styles_1.default.contentTabButtonTextActive,
+                        ]}>
+                              {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
+                            </react_native_1.Text>
+                          </react_native_1.View>
+                        </TouchableScale_1.default>);
                 })}
-              </react_native_1.View>)}
+                  </react_native_1.ScrollView>
+                </react_native_1.View>) : null}
+
 
-            {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>
@@ -1119,14 +1257,6 @@ const NetworkInspector = () => {
                       </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,
@@ -1220,17 +1350,19 @@ const NetworkInspector = () => {
                 </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={[
+            {isReady ? (activeTab === 'insights' ? (<react_native_1.ScrollView style={styles_1.default.insightsContainer} contentContainerStyle={styles_1.default.insightsContent} showsVerticalScrollIndicator={false}>
+                  {renderInsightsDashboard()}
+                </react_native_1.ScrollView>) : 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,
+                            styles_1.default.analyticsTopEventsCard,
                             { marginBottom: 12, paddingVertical: 16 },
                         ]}>
-                          <react_native_1.View style={analyticsListStyles.topEventRow}>
+                          <react_native_1.View style={styles_1.default.analyticsTopEventRow}>
                             <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -1238,7 +1370,7 @@ const NetworkInspector = () => {
                             flex: 1,
                         }}>
                               <react_native_1.View style={[
-                            analyticsListStyles.iconCircle,
+                            styles_1.default.analyticsIconCircle,
                             { backgroundColor: `${color}1A` },
                         ]}>
                                 <react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill={color}>
@@ -1246,19 +1378,19 @@ const NetworkInspector = () => {
                                   <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}>
+                              <react_native_1.Text style={styles_1.default.analyticsTopEventName} numberOfLines={2}>
                                 {name}
                               </react_native_1.Text>
                             </react_native_1.View>
-                            <react_native_1.View style={analyticsListStyles.topEventBarWrap}>
+                            <react_native_1.View style={styles_1.default.analyticsTopEventBarWrap}>
                               <react_native_linear_gradient_1.default colors={[color, `${color}99`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[
-                            analyticsListStyles.topEventBar,
+                            styles_1.default.analyticsTopEventBar,
                             {
                                 width: `${Math.max(6, (count / maxCount) * 100)}%`,
                             },
                         ]}/>
                             </react_native_1.View>
-                            <react_native_1.Text style={analyticsListStyles.topEventCount}>
+                            <react_native_1.Text style={styles_1.default.analyticsTopEventCount}>
                               {count}
                             </react_native_1.Text>
                           </react_native_1.View>
@@ -1268,39 +1400,7 @@ const NetworkInspector = () => {
                           <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 }) => {
+                      </react_native_1.View>}/>) : (<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
@@ -1330,7 +1430,7 @@ const NetworkInspector = () => {
                             }
                             return screenName;
                         })()}/>);
-                }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews ListHeaderComponent={null} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
+                }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews 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>
@@ -1347,84 +1447,7 @@ const NetworkInspector = () => {
                       </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>)}
-
+                ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<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 }}>
                         <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}/>
@@ -1444,14 +1467,6 @@ const NetworkInspector = () => {
                                 </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}/>
@@ -1495,237 +1510,22 @@ const NetworkInspector = () => {
                                     });
                                 }
                             }} 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={[
+                                    {active ? (<react_native_1.View style={[
                                     styles_1.default.statusFilterChip,
                                     styles_1.default.statusFilterActive,
+                                    { overflow: 'hidden' },
                                 ]}>
-                                        <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={[
+                                        <react_native_linear_gradient_1.default colors={[
                                     AppColors_1.AppColors.purpleShade50,
                                     '#EAE5FF',
-                                ]} style={[
-                                    styles_1.default.statusFilterChip,
-                                    styles_1.default.statusFilterActive,
-                                ]}>
+                                ]} style={react_native_1.StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
                                         <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.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
                                         <react_native_1.Text style={styles_1.default.statusFilterText}>
                                           {filter}
                                         </react_native_1.Text>
@@ -1757,20 +1557,22 @@ const NetworkInspector = () => {
                                     });
                                 }
                             }} hitSlop={10}>
-                                    {active ? (<react_native_linear_gradient_1.default colors={[
-                                    AppColors_1.AppColors.purpleShade50,
-                                    '#EAE5FF',
-                                ]} style={[
+                                    {active ? (<react_native_1.View style={[
                                     styles_1.default.statusFilterChip,
                                     styles_1.default.statusFilterActive,
+                                    { overflow: 'hidden' },
                                 ]}>
+                                        <react_native_linear_gradient_1.default colors={[
+                                    AppColors_1.AppColors.purpleShade50,
+                                    '#EAE5FF',
+                                ]} style={react_native_1.StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
                                         <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.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
                                         <react_native_1.Text style={styles_1.default.statusFilterText}>
                                           {filter}
                                         </react_native_1.Text>
@@ -1791,7 +1593,7 @@ const NetworkInspector = () => {
                       </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 }}>
+                ]} keyboardShouldPersistTaps="handled"/>) : activeTab === 'logs' ? (<react_native_1.View style={{ flex: 1 }}>
                   <react_native_1.View style={{
                     backgroundColor: '#FFFFFF',
                     borderBottomWidth: 1,
@@ -2238,78 +2040,23 @@ const NetworkInspector = () => {
                         })}
                           </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={{
+                            {!isHtmlTabReady ? (<react_native_1.View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
+                                <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
+                              </react_native_1.View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet_1.default code={webViewHtml} language="html"/>) : (<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={{
+                                </react_native_1.Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet_1.default code={webViewCss} language="css"/>) : (<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={{
+                                </react_native_1.Text>)) : webViewJs ? (<CodeSnippet_1.default code={webViewJs} language="javascript"/>) : (<react_native_1.Text style={{
                                 fontFamily: 'monospace',
                                 fontSize: 11,
                                 color: '#94A3B8',
@@ -2405,60 +2152,89 @@ const NetworkInspector = () => {
                         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}>
-                  {(() => {
+                </react_native_1.View>) : activeTab === 'redux' ? (renderReduxTab()) : (<react_native_1.View style={{ flex: 1 }}>
+                  {/* Non-scrollable details header */}
+                  <react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
+                    {(() => {
                     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,
+                    const parts = ['APIs', ...screenPath];
+                    return (<react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            backgroundColor: AppColors_1.AppColors.primaryLight,
+                            borderRadius: 8,
+                            paddingVertical: 8,
+                            paddingHorizontal: 12,
+                            borderWidth: 1,
+                            borderColor: AppColors_1.AppColors.dividerColor,
+                            marginBottom: 12,
+                            marginTop: 4,
                         }}>
-                          {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.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                        }}>
+                            {parts.map((part, index) => {
+                            const isLast = index === parts.length - 1;
+                            return (<react_1.default.Fragment key={index}>
+                                  {index > 0 && (<react_native_1.Text style={{ color: AppColors_1.AppColors.grayTextWeak, fontSize: 11, marginHorizontal: 2 }}>
+                                      /
+                                    </react_native_1.Text>)}
+                                  <react_native_1.View style={isLast
+                                    ? {
+                                        backgroundColor: `${AppColors_1.AppColors.purple}12`,
+                                        paddingHorizontal: 8,
+                                        paddingVertical: 3,
+                                        borderRadius: 6,
+                                    }
+                                    : {
+                                        paddingHorizontal: 4,
+                                        paddingVertical: 2,
+                                    }}>
+                                    <react_native_1.Text style={{
+                                    fontFamily: isLast ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
+                                    fontSize: 11.5,
+                                    color: isLast ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayText,
+                                }}>
+                                      {part}
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
+                                </react_1.default.Fragment>);
+                        })}
+                          </react_native_1.ScrollView>
+                        </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={{
+                    <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={[
+                          <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={[
+                            <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.method}
+                            </react_native_1.Text>
+                          </react_native_1.View>
 
-                        {selected.status != null && (<react_native_1.View style={[
+                          {selected.status != null && (<react_native_1.View style={[
                         styles_1.default.chip,
                         {
                             backgroundColor: selected.status === 0
@@ -2469,10 +2245,10 @@ const NetworkInspector = () => {
                                 : `${(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={[
+                              {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
@@ -2480,181 +2256,172 @@ const NetworkInspector = () => {
                                 : (0, helpers_1.getStatusColor)(selected.status),
                         },
                     ]}>
-                              {selected.status === 0
+                                {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.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>
+                  </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>
+                  {/* Sticky Segment Control */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 10,
+                    padding: 3,
+                    marginHorizontal: 6,
+                    marginBottom: 10,
+                    marginTop: 6,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+                    {['metadata', 'headers', 'request', 'response'].map(tab => {
+                    const isActive = apiDetailActiveTab === tab;
+                    if (tab === 'request' && selected.request == null)
+                        return null;
+                    const getLabel = () => {
+                        if (tab === 'metadata')
+                            return 'Metadata';
+                        if (tab === 'headers')
+                            return 'Headers';
+                        if (tab === 'request')
+                            return 'Request';
+                        return 'Response';
+                    };
+                    return (<react_native_1.TouchableOpacity key={tab} onPress={() => setApiDetailActiveTab(tab)} style={{
+                            flex: 1,
+                            paddingVertical: 6,
+                            alignItems: 'center',
+                            borderRadius: 8,
+                            backgroundColor: isActive ? AppColors_1.AppColors.purple : 'transparent',
+                        }}>
+                          <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+                        }}>
+                            {getLabel()}
+                          </react_native_1.Text>
+                        </react_native_1.TouchableOpacity>);
+                })}
                   </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)}/>
+                  {/* Scrollable Tab Content */}
+                  <react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingHorizontal: 6, paddingBottom: 24 }} showsVerticalScrollIndicator={true}>
+                    {apiDetailActiveTab === 'metadata' && (<>
+                        <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}/>;
-                })()}
+                        {(() => {
+                        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;
+                    })()}
+                      </>)}
 
-                  {(() => {
-                    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;
-                })()}
+                    {apiDetailActiveTab === 'headers' && (<>
+                        <react_native_1.View style={styles_1.default.detailSearchRow}>
+                          <react_native_1.View style={styles_1.default.detailSearchBox}>
+                            <react_native_1.TextInput placeholder="Search headers..." 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>
+                        </react_native_1.View>
 
-                  <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}/>
+                      </>)}
 
-                  <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}/>
+                    {apiDetailActiveTab === 'request' && selected.request != 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 request..." 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>
+                        </react_native_1.View>
 
-                  {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={() => {
+                        <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>)}
+                          {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}>
+                    {apiDetailActiveTab === 'response' && (<>
+                        <react_native_1.View style={styles_1.default.detailSearchRow}>
+                          <react_native_1.View style={styles_1.default.detailSearchBox}>
+                            <react_native_1.TextInput placeholder="Search 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>
+                        </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>)) : (<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.View>
+          </react_native_1.View>
+          </ErrorBoundary_1.default>)}
       </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',
-    },
-});
+const NetworkInspectorWrapper = (props) => {
+    return (<ErrorBoundary_1.default fallbackType="inline">
+      <NetworkInspector {...props}/>
+    </ErrorBoundary_1.default>);
+};
+exports.default = NetworkInspectorWrapper;
 // Re-export public APIs
 var networkLogger_2 = require("./customHooks/networkLogger");
 Object.defineProperty(exports, "setupNetworkLogger", { enumerable: true, get: function () { return networkLogger_2.setupNetworkLogger; } });
@@ -2670,6 +2437,7 @@ Object.defineProperty(exports, "logAnalyticsEvent", { enumerable: true, get: fun
 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, "WebView", { enumerable: true, get: function () { return webViewLogger_2.WebView; } });
 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; } });
@@ -2678,3 +2446,9 @@ Object.defineProperty(exports, "getWebViewJs", { enumerable: true, get: function
 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; } });
+var ErrorBoundary_2 = require("./components/ErrorBoundary");
+Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_2).default; } });
+var reduxLogger_2 = require("./customHooks/reduxLogger");
+Object.defineProperty(exports, "connectReduxStore", { enumerable: true, get: function () { return reduxLogger_2.connectReduxStore; } });
+Object.defineProperty(exports, "getReduxState", { enumerable: true, get: function () { return reduxLogger_2.getReduxState; } });
+Object.defineProperty(exports, "subscribeReduxState", { enumerable: true, get: function () { return reduxLogger_2.subscribeReduxState; } });