react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,619 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const styles_1 = __importDefault(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const helpers_1 = require("../../helpers");
+const NetworkIcons_1 = require("../NetworkIcons");
+const InsightsDashboard = () => {
+    const { logs, visibleConsoleLogs, analyticsEvents, webViewNavHistory, tabVisibility, slowRequestThreshold, insightsActiveSubTab, setInsightsActiveSubTab, switchActiveTab, reduxState, } = (0, InspectorContext_1.useInspector)();
+    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;
+    // --- Richer insights metrics ---
+    const slowestTime = durations.length > 0 ? Math.max(...durations) : null;
+    const fastestTime = durations.length > 0 ? Math.min(...durations) : null;
+    const slowCount = durations.filter(d => d >= slowRequestThreshold).length;
+    const status2xx = logs.filter(l => l.status != null && l.status >= 200 && l.status < 300).length;
+    const status3xx = logs.filter(l => l.status != null && l.status >= 300 && l.status < 400).length;
+    const status4xx = logs.filter(l => l.status != null && l.status >= 400 && l.status < 500).length;
+    const status5xx = logs.filter(l => l.status != null && l.status >= 500).length;
+    const totalSignals = apiTotal + logTotal + analyticsTotal + webviewTotal;
+    const totalIssues = apiErrors + logErrors;
+    const activeModules = [
+        tabVisibility?.apis,
+        tabVisibility?.logs,
+        tabVisibility?.analytics,
+        tabVisibility?.webview,
+        tabVisibility?.redux,
+    ].filter(Boolean).length;
+    // Composite health score: success rate penalised by error volume and slow requests.
+    const healthScore = totalSignals === 0
+        ? 100
+        : Math.max(0, Math.min(100, Math.round(apiSuccessRate -
+            (logErrors > 0 ? Math.min(15, logErrors * 3) : 0) -
+            (slowCount > 0 ? Math.min(10, slowCount * 2) : 0))));
+    const healthColor = healthScore >= 90
+        ? AppColors_1.AppColors.greenColor
+        : healthScore >= 70
+            ? AppColors_1.AppColors.warningIconGold
+            : AppColors_1.AppColors.errorColor;
+    const healthLabel = healthScore >= 90
+        ? 'Healthy'
+        : healthScore >= 70
+            ? 'Needs attention'
+            : 'Degraded';
+    return (<react_native_1.View style={styles_1.default.dashboardContainer}>
+      {/* Overview hero card */}
+      <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.primaryLight,
+            borderRadius: 14,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            padding: 16,
+            marginBottom: 12,
+        }}>
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 14,
+        }}>
+          {/* Health ring stand-in */}
+          <react_native_1.View style={{
+            width: 64,
+            height: 64,
+            borderRadius: 32,
+            borderWidth: 4,
+            borderColor: healthColor,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: AppColors_1.AppColors.purpleShade50,
+        }}>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 18,
+            color: healthColor,
+        }}>
+              {healthScore}
+            </react_native_1.Text>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 7.5,
+            color: AppColors_1.AppColors.grayTextWeak,
+            letterSpacing: 0.4,
+        }}>
+              HEALTH
+            </react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 15,
+            color: AppColors_1.AppColors.primaryBlack,
+        }}>
+              Session Overview
+            </react_native_1.Text>
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            marginTop: 3,
+        }}>
+              <react_native_1.View style={{
+            width: 7,
+            height: 7,
+            borderRadius: 3.5,
+            backgroundColor: healthColor,
+        }}/>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 11.5,
+            color: healthColor,
+        }}>
+                {healthLabel}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interRegular,
+            fontSize: 11.5,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+                • {activeModules} modules active
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* Quick totals strip */}
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            marginTop: 14,
+            borderTopWidth: 1,
+            borderTopColor: AppColors_1.AppColors.dividerColor,
+            paddingTop: 12,
+        }}>
+          <react_native_1.View style={{ flex: 1, alignItems: 'center' }}>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 16,
+            color: AppColors_1.AppColors.primaryBlack,
+        }}>
+              {totalSignals}
+            </react_native_1.Text>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interRegular,
+            fontSize: 10,
+            color: AppColors_1.AppColors.grayTextWeak,
+            marginTop: 1,
+        }}>
+              Signals
+            </react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={{ width: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+          <react_native_1.View style={{ flex: 1, alignItems: 'center' }}>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 16,
+            color: totalIssues > 0
+                ? AppColors_1.AppColors.errorColor
+                : AppColors_1.AppColors.primaryBlack,
+        }}>
+              {totalIssues}
+            </react_native_1.Text>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interRegular,
+            fontSize: 10,
+            color: AppColors_1.AppColors.grayTextWeak,
+            marginTop: 1,
+        }}>
+              Issues
+            </react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={{ width: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+          <react_native_1.View style={{ flex: 1, alignItems: 'center' }}>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 16,
+            color: slowCount > 0
+                ? AppColors_1.AppColors.warningIconGold
+                : AppColors_1.AppColors.primaryBlack,
+        }}>
+              {slowCount}
+            </react_native_1.Text>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interRegular,
+            fontSize: 10,
+            color: AppColors_1.AppColors.grayTextWeak,
+            marginTop: 1,
+        }}>
+              Slow ({slowRequestThreshold}ms+)
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* ── Insights Sub-Tab Selector ── */}
+      {(() => {
+            const insightTabs = [
+                {
+                    key: 'apis',
+                    label: 'APIs',
+                    icon: (c, s) => <NetworkIcons_1.SignalIcon color={c} size={s}/>,
+                    color: AppColors_1.AppColors.purple,
+                    count: apiTotal,
+                    visible: !!tabVisibility?.apis,
+                },
+                {
+                    key: 'logs',
+                    label: 'Logs',
+                    icon: (c, s) => <NetworkIcons_1.TerminalIcon color={c} size={s}/>,
+                    color: '#0D9488',
+                    count: logTotal,
+                    visible: !!tabVisibility?.logs,
+                },
+                {
+                    key: 'analytics',
+                    label: 'Analytics',
+                    icon: (c, s) => <NetworkIcons_1.AnalyticsIcon color={c} size={s}/>,
+                    color: '#EA580C',
+                    count: analyticsTotal,
+                    visible: !!tabVisibility?.analytics,
+                },
+                {
+                    key: 'webview',
+                    label: 'WebView',
+                    icon: (c, s) => <NetworkIcons_1.GlobeIcon color={c} size={s}/>,
+                    color: '#2563EB',
+                    count: webviewTotal,
+                    visible: !!tabVisibility?.webview,
+                },
+                {
+                    key: 'redux',
+                    label: 'Redux',
+                    icon: (c, s) => <NetworkIcons_1.TerminalIcon color={c} size={s}/>,
+                    color: AppColors_1.AppColors.purple,
+                    count: reduxState ? Object.keys(reduxState).length : 0,
+                    visible: !!tabVisibility?.redux,
+                },
+            ];
+            const visibleTabs = insightTabs.filter(t => t.visible);
+            if (visibleTabs.length === 0)
+                return null;
+            return (<>
+            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    paddingHorizontal: 2,
+                    paddingVertical: 2,
+                    gap: 8,
+                }} style={{
+                    marginBottom: 12,
+                    flexGrow: 0,
+                }}>
+              {visibleTabs.map(tab => {
+                    const isActive = insightsActiveSubTab === tab.key;
+                    return (<react_native_1.TouchableOpacity key={tab.key} onPress={() => {
+                            (0, InspectorContext_1.animateNextLayout)();
+                            setInsightsActiveSubTab(tab.key);
+                        }} activeOpacity={0.7} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                            paddingHorizontal: 14,
+                            paddingVertical: 8,
+                            borderRadius: 20,
+                            backgroundColor: isActive
+                                ? tab.color
+                                : AppColors_1.AppColors.primaryLight,
+                            borderWidth: 1,
+                            borderColor: isActive
+                                ? tab.color
+                                : AppColors_1.AppColors.grayBorderSecondary,
+                        }}>
+                    {tab.icon(isActive ? '#FFFFFF' : tab.color, 14)}
+                    <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11.5,
+                            color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayTextStrong,
+                        }}>
+                      {tab.label}
+                    </react_native_1.Text>
+                    <react_native_1.View style={{
+                            minWidth: 20,
+                            height: 18,
+                            borderRadius: 9,
+                            paddingHorizontal: 5,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: isActive
+                                ? 'rgba(255,255,255,0.25)'
+                                : AppColors_1.AppColors.grayBackground,
+                        }}>
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 9.5,
+                            color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayTextWeak,
+                        }}>
+                        {tab.count}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.TouchableOpacity>);
+                })}
+            </react_native_1.ScrollView>
+
+            {/* ── Active Module Card ── */}
+            {insightsActiveSubTab === 'apis' && tabVisibility?.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('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>
+
+                {/* Status-class breakdown + latency range */}
+                <react_native_1.View style={{
+                        marginTop: 10,
+                        paddingTop: 10,
+                        borderTopWidth: 1,
+                        borderTopColor: AppColors_1.AppColors.dividerColor,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        gap: 6,
+                    }}>
+                  {[
+                        { label: '2xx', value: status2xx, color: AppColors_1.AppColors.greenColor },
+                        { label: '3xx', value: status3xx, color: AppColors_1.AppColors.skyBlue },
+                        {
+                            label: '4xx',
+                            value: status4xx,
+                            color: AppColors_1.AppColors.warningIconGold,
+                        },
+                        { label: '5xx', value: status5xx, color: AppColors_1.AppColors.errorColor },
+                    ].map(s => (<react_native_1.View key={s.label} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                            backgroundColor: AppColors_1.AppColors.grayBackground,
+                            borderRadius: 6,
+                            borderWidth: 1,
+                            borderColor: AppColors_1.AppColors.dividerColor,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3,
+                        }}>
+                      <react_native_1.View style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
+                            backgroundColor: s.color,
+                        }}/>
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10,
+                            color: AppColors_1.AppColors.grayTextStrong,
+                        }}>
+                        {s.label} {s.value}
+                      </react_native_1.Text>
+                    </react_native_1.View>))}
+                  {slowestTime != null && (<react_native_1.View style={{
+                            marginLeft: 'auto',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                        }}>
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interRegular,
+                            fontSize: 10,
+                            color: AppColors_1.AppColors.grayTextWeak,
+                        }}>
+                        Range
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10,
+                            color: AppColors_1.AppColors.grayTextStrong,
+                        }}>
+                        {fastestTime}–{slowestTime}ms
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+              </TouchableScale_1.default>)}
+
+            {insightsActiveSubTab === 'logs' && tabVisibility?.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('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>)}
+
+            {insightsActiveSubTab === 'analytics' && tabVisibility?.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('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>)}
+
+            {insightsActiveSubTab === 'webview' && tabVisibility?.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('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>)}
+
+            {insightsActiveSubTab === 'redux' && tabVisibility?.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('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>);
+};
+exports.default = InsightsDashboard;

package/dist/commonjs/components/Inspector/InspectorContext.d.ts

@@ -0,0 +1,5 @@
+import { InspectorContextValue } from '../../types';
+export { InspectorContextValue, InspectorStorage, ModalAnimationType, SettingsPage, SettingsSubTab, LogFilter, } from '../../types';
+export declare const InspectorContext: import("react").Context<InspectorContextValue>;
+export declare const useInspector: () => InspectorContextValue;
+export declare const animateNextLayout: () => void;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.animateNextLayout = exports.useInspector = exports.InspectorContext = void 0;
+const react_1 = require("react");
+exports.InspectorContext = (0, react_1.createContext)(null);
+const useInspector = () => {
+    const ctx = (0, react_1.useContext)(exports.InspectorContext);
+    if (!ctx) {
+        throw new Error('useInspector must be used within <InspectorContext.Provider>');
+    }
+    return ctx;
+};
+exports.useInspector = useInspector;
+const animateNextLayout = () => {
+    // Disabled LayoutAnimation to prevent iOS NSRangeException crashes under Fabric
+    // and Android rendering performance freezes.
+};
+exports.animateNextLayout = animateNextLayout;

package/dist/commonjs/components/Inspector/InspectorHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InspectorHeader: () => React.JSX.Element;
+export default InspectorHeader;