react-native-inapp-inspector 1.1.16 → 1.1.18

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

@@ -1,75 +1,459 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
-const ReduxTreeView_1 = require("../ReduxTreeView");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
+const EmptyState_1 = __importDefault(require("../EmptyState"));
+const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
+const HighlightText_1 = __importDefault(require("../HighlightText"));
+const helpers_1 = require("../../helpers");
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const NetworkIcons_1 = require("../NetworkIcons");
 const ReduxTab = react_1.default.memo(() => {
-    const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, } = (0, InspectorContext_1.useInspector)();
+    const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = (0, InspectorContext_1.useInspector)();
+    // Sort mode: 'latest' (newest updated first) vs 'alpha' (A-Z)
+    const [sortMode, setSortMode] = (0, react_1.useState)('latest');
+    // Total state size calculation
+    const totalStateSize = (0, react_1.useMemo)(() => {
+        return (0, helpers_1.getSize)(reduxState);
+    }, [reduxState]);
+    // Compute slice items with exact timestamps
+    const sliceItems = (0, react_1.useMemo)(() => {
+        if (!reduxState || typeof reduxState !== 'object')
+            return [];
+        const keys = Object.keys(reduxState);
+        return keys.map(key => {
+            const sliceVal = reduxState[key];
+            const keysCount = sliceVal && typeof sliceVal === 'object'
+                ? Object.keys(sliceVal).length
+                : typeof sliceVal !== 'undefined'
+                    ? 1
+                    : 0;
+            const lastAction = reduxLastActionMap[key];
+            const updatedAt = lastAction?.updatedAt || 0;
+            return {
+                id: `slice-${key}`,
+                name: key,
+                keysCount,
+                sizeStr: (0, helpers_1.getSize)(sliceVal),
+                lastAction,
+                updatedAt,
+            };
+        });
+    }, [reduxState, reduxLastActionMap]);
+    // Filter & Sort slices: by default, the most recently updated item is at the FIRST position
+    const filteredSlices = (0, react_1.useMemo)(() => {
+        let list = sliceItems;
+        if (reduxSearch.trim().length > 0) {
+            const q = reduxSearch.toLowerCase();
+            list = list.filter(item => item.name.toLowerCase().includes(q) ||
+                (item.lastAction && item.lastAction.type.toLowerCase().includes(q)));
+        }
+        return [...list].sort((a, b) => {
+            if (sortMode === 'latest') {
+                // Most recently updated item first
+                if (b.updatedAt !== a.updatedAt) {
+                    return b.updatedAt - a.updatedAt;
+                }
+                return a.name.localeCompare(b.name);
+            }
+            else {
+                // Alphabetical A-Z
+                return a.name.localeCompare(b.name);
+            }
+        });
+    }, [sliceItems, reduxSearch, sortMode]);
+    const lastGlobalAction = (0, react_1.useMemo)(() => {
+        const actions = Object.values(reduxLastActionMap);
+        if (actions.length === 0)
+            return null;
+        return actions.reduce((latest, curr) => {
+            if (!latest)
+                return curr;
+            return (curr.updatedAt || 0) > (latest.updatedAt || 0) ? curr : latest;
+        }, null);
+    }, [reduxLastActionMap]);
+    const renderSliceItem = (0, react_1.useCallback)(({ item, index }) => {
+        const isRecentlyUpdated = item.updatedAt > 0 && Date.now() - item.updatedAt < 5000;
+        return (<AnimatedEntrance_1.default index={index} distance={8}>
+          <TouchableScale_1.default onPress={() => setSelectedReduxSlice(item.name)} style={[
+                reduxTabStyles.card,
+                isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
+            ]}>
+            {/* Top row: Badge + Slice Name + Timestamp + Chevron */}
+            <react_native_1.View style={reduxTabStyles.cardHeader}>
+              <react_native_1.View style={reduxTabStyles.sliceBadge}>
+                <react_native_1.Text style={reduxTabStyles.sliceBadgeText}>SLICE</react_native_1.Text>
+              </react_native_1.View>
+
+              <HighlightText_1.default text={item.name} search={reduxSearch} style={reduxTabStyles.sliceName} highlightStyle={reduxTabStyles.highlight}/>
+
+              {item.lastAction?.timestamp && (<react_native_1.View style={reduxTabStyles.timePill}>
+                  <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple} size={10}/>
+                  <react_native_1.Text style={reduxTabStyles.timeText}>
+                    {item.lastAction.timestamp}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+
+              <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
+            </react_native_1.View>
+
+            {/* Middle row: Stats pills */}
+            <react_native_1.View style={reduxTabStyles.statsRow}>
+              <react_native_1.View style={reduxTabStyles.pill}>
+                <react_native_1.Text style={reduxTabStyles.pillLabel}>Keys:</react_native_1.Text>
+                <react_native_1.Text style={reduxTabStyles.pillValue}>{item.keysCount}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={reduxTabStyles.pill}>
+                <react_native_1.Text style={reduxTabStyles.pillLabel}>Size:</react_native_1.Text>
+                <react_native_1.Text style={reduxTabStyles.pillValue}>{item.sizeStr}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={reduxTabStyles.livePill}>
+                <react_native_1.View style={reduxTabStyles.liveDot}/>
+                <react_native_1.Text style={reduxTabStyles.livePillText}>Live</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Bottom row: Last Dispatched Action */}
+            {item.lastAction && (<react_native_1.View style={reduxTabStyles.lastActionRow}>
+                <react_native_1.Text style={reduxTabStyles.lastActionLabel}>Last Action:</react_native_1.Text>
+                <HighlightText_1.default text={item.lastAction.type} search={reduxSearch} style={reduxTabStyles.lastActionValue} highlightStyle={reduxTabStyles.highlight} numberOfLines={1}/>
+              </react_native_1.View>)}
+          </TouchableScale_1.default>
+        </AnimatedEntrance_1.default>);
+    }, [reduxSearch, setSelectedReduxSlice]);
     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.emptyTitle}>No Redux Store Connected</react_native_1.Text>
         <react_native_1.Text style={styles_1.default.emptySub}>
-          To inspect Redux store, call connectReduxStore(store) at app start.
+          Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.
         </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>);
-    }
-    const lastActionMap = reduxLastActionMap;
-    return (<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
-      {/* Search Bar */}
-      <react_native_1.View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: AppColors_1.AppColors.grayBackground,
-            borderRadius: 8,
-            marginHorizontal: 16,
-            marginTop: 16,
-            marginBottom: 12,
-            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>)}
+    return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+      {/* ─── Top Stats Overview Card ─── */}
+      <react_native_1.View style={reduxTabStyles.overviewCard}>
+        <react_native_1.View style={reduxTabStyles.statCol}>
+          <react_native_1.Text style={reduxTabStyles.statHeading}>ACTIVE SLICES</react_native_1.Text>
+          <react_native_1.Text style={reduxTabStyles.statBigVal}>{sliceItems.length}</react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.View style={reduxTabStyles.statDivider}/>
+        <react_native_1.View style={reduxTabStyles.statCol}>
+          <react_native_1.Text style={reduxTabStyles.statHeading}>TOTAL STATE</react_native_1.Text>
+          <react_native_1.Text style={reduxTabStyles.statBigVal}>{totalStateSize}</react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.View style={reduxTabStyles.statDivider}/>
+        <react_native_1.View style={[reduxTabStyles.statCol, { flex: 1.5 }]}>
+          <react_native_1.Text style={reduxTabStyles.statHeading}>LAST ACTION</react_native_1.Text>
+          <react_native_1.Text style={reduxTabStyles.statLastAction} numberOfLines={1}>
+            {lastGlobalAction ? lastGlobalAction.type : 'Initial'}
+          </react_native_1.Text>
+          {lastGlobalAction?.timestamp && (<react_native_1.Text style={reduxTabStyles.statLastTime}>
+              {lastGlobalAction.timestamp}
+            </react_native_1.Text>)}
+        </react_native_1.View>
       </react_native_1.View>
 
-      {/* Main Content Card */}
-      <react_native_1.View style={{
-            backgroundColor: AppColors_1.AppColors.primaryLight,
-            borderRadius: 12,
-            borderWidth: 1,
-            borderColor: AppColors_1.AppColors.grayBorderSecondary,
-            marginHorizontal: 16,
-            padding: 12,
-        }}>
-        <ReduxTreeView_1.ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>
+      {/* ─── Search & Sort Bar ─── */}
+      <react_native_1.View style={reduxTabStyles.toolbarContainer}>
+        <react_native_1.View style={reduxTabStyles.searchRow}>
+          <react_native_1.View style={styles_1.default.searchContainer}>
+            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
+            <react_native_1.TextInput placeholder="Search Redux slices or actions..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles_1.default.searchInput} 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>
+
+          {/* Sort Button */}
+          <react_native_1.TouchableOpacity style={[
+            styles_1.default.toolbarBtn,
+            sortMode === 'latest' && { backgroundColor: `${AppColors_1.AppColors.brandPurple}1F`, borderColor: AppColors_1.AppColors.brandPurple },
+        ]} onPress={() => setSortMode(prev => (prev === 'latest' ? 'alpha' : 'latest'))} hitSlop={6}>
+            <NetworkIcons_1.SortArrowIcon color={sortMode === 'latest' ? AppColors_1.AppColors.brandPurple : AppColors_1.AppColors.grayTextStrong} size={16}/>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
+        <react_native_1.View style={reduxTabStyles.headerSubRow}>
+          <react_native_1.Text style={reduxTabStyles.resultCount}>
+            Showing {filteredSlices.length} of {sliceItems.length} state slices
+          </react_native_1.Text>
+          <react_native_1.Text style={reduxTabStyles.sortLabel}>
+            {sortMode === 'latest' ? '⚡ Newest Updates First' : '🔤 Alphabetical (A-Z)'}
+          </react_native_1.Text>
+        </react_native_1.View>
       </react_native_1.View>
-    </react_native_1.ScrollView>);
+
+      {/* ─── FlatList of Slices ─── */}
+      <react_native_1.FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={15} maxToRenderPerBatch={10} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
+            reduxTabStyles.listContent,
+            filteredSlices.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+    </react_native_1.View>);
+});
+const reduxTabStyles = react_native_1.StyleSheet.create({
+    overviewCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.white,
+        marginHorizontal: 12,
+        marginTop: 10,
+        borderRadius: 12,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        shadowColor: AppColors_1.AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        elevation: 1,
+    },
+    statCol: {
+        flex: 1,
+    },
+    statDivider: {
+        width: 1,
+        height: 28,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+        marginHorizontal: 8,
+    },
+    statHeading: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+    },
+    statBigVal: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+        marginTop: 2,
+    },
+    statLastAction: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+        marginTop: 2,
+    },
+    statLastTime: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    toolbarContainer: {
+        backgroundColor: AppColors_1.AppColors.white,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        paddingHorizontal: 12,
+        paddingTop: 8,
+        paddingBottom: 6,
+        marginTop: 8,
+    },
+    searchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    headerSubRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginTop: 6,
+        paddingHorizontal: 2,
+    },
+    resultCount: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    sortLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.brandPurple,
+    },
+    listContent: {
+        padding: 12,
+        paddingBottom: 36,
+    },
+    card: {
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 12,
+        padding: 12,
+        marginBottom: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        shadowColor: AppColors_1.AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    cardRecentlyUpdated: {
+        borderColor: `${AppColors_1.AppColors.brandPurple}66`,
+        backgroundColor: '#FAFAFF',
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 8,
+    },
+    sliceBadge: {
+        backgroundColor: '#EDE9FE',
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#DDD6FE',
+    },
+    sliceBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#6D28D9',
+        letterSpacing: 0.4,
+    },
+    sliceName: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    timePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}2E`,
+    },
+    timeText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.purple,
+    },
+    statsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flexWrap: 'wrap',
+        marginBottom: 6,
+    },
+    pill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    pillLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    pillValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    livePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: '#ECFDF5',
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#A7F3D0',
+    },
+    liveDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: '#10B981',
+    },
+    livePillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: '#047857',
+    },
+    lastActionRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 6,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        marginTop: 2,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    lastActionLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    lastActionValue: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    highlight: {
+        backgroundColor: '#FEF08A',
+        color: '#854D0E',
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
 });
 exports.default = ReduxTab;

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

@@ -53,6 +53,7 @@ const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
 const NetworkIcons_1 = require("../NetworkIcons");
 const SettingsPanel = () => {
     const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, } = (0, InspectorContext_1.useInspector)();
+    const isPersistent = (0, settingsStore_1.isPersistentStorageAvailable)();
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     if (settingsPage === 'main') {
         const settingsTabs = [
@@ -60,6 +61,8 @@ const SettingsPanel = () => {
             { key: 'logs', label: 'Logs', icon: 'logs' },
             { key: 'analytics', label: 'Analytics', icon: 'analytics' },
             { key: 'redux', label: 'Redux', icon: 'redux' },
+            { key: 'bundle', label: 'Bundle', icon: 'bundle' },
+            { key: 'performance', label: 'Performance', icon: 'performance' },
         ];
         return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
         {/* Settings Header with back button */}
@@ -261,7 +264,13 @@ const SettingsPanel = () => {
                         {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isLocked
                                 ? AppColors_1.AppColors.grayTextWeak
                                 : AppColors_1.AppColors.purple} size={11}/>)}
-                        {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isLocked
+                        {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
+                        {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
+                        {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isLocked
                                 ? AppColors_1.AppColors.grayTextWeak
                                 : AppColors_1.AppColors.purple} size={11}/>)}
                       </react_native_1.View>
@@ -700,7 +709,9 @@ const SettingsPanel = () => {
                             {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                             {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                             {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
-                            {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                           </react_native_1.View>
                           <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,

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

@@ -39,6 +39,18 @@ const TabBar = react_1.default.memo(() => {
                 count: 0,
                 icon: 'redux',
             },
+            {
+                key: 'bundle',
+                label: 'Bundle',
+                count: 0,
+                icon: 'bundle',
+            },
+            {
+                key: 'performance',
+                label: 'Performance',
+                count: 0,
+                icon: 'performance',
+            },
         ]
             .filter(tab => tabVisibility?.[tab.key])
             .map(tab => {
@@ -51,11 +63,7 @@ const TabBar = react_1.default.memo(() => {
                 logs.length > lastReadApisCount;
             const hasUnreadLogs = activeTab !== 'logs' &&
                 consoleLogs.length > lastReadLogsCount;
-            return (<TouchableScale_1.default key={tab.key} onPress={() => {
-                    requestAnimationFrame(() => {
-                        switchActiveTab(tab.key);
-                    });
-                }} style={[
+            return (<TouchableScale_1.default key={tab.key} onPress={() => switchActiveTab(tab.key)} style={[
                     styles_1.default.contentTabButton,
                     isActive && styles_1.default.contentTabButtonActive,
                 ]}>
@@ -67,7 +75,9 @@ const TabBar = react_1.default.memo(() => {
                   {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 === 'redux' && (<NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={iconColor} size={14}/>)}
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
                     isActive &&