react-native-inapp-inspector 1.1.14 → 1.1.16

package/dist/esm/components/HighlightText.js

@@ -2,9 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 // Helpers
 import { escapeRegex, handleOpenExternalLink } from '../helpers';
-const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...rest }) => {
-    const hasNumberOfLines = 'numberOfLines' in rest;
-    const numLines = hasNumberOfLines ? rest.numberOfLines : 1;
+const HighlightText = React.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
     // Regex to detect absolute URLs
     const URL_REGEX = /(https?:\/\/[^\s]+)/g;
     const renderNormalOrHighlighted = (subText, keyPrefix) => {
@@ -21,7 +19,7 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
     };
     if (detectLinks && text) {
         const parts = text.split(URL_REGEX);
-        return (<Text style={style} numberOfLines={numLines} {...rest}>
+        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
         {parts.map((part, i) => {
                 if (part.match(URL_REGEX)) {
                     return (<Text key={`link-${i}`} style={{
@@ -38,15 +36,15 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
       </Text>);
     }
     if (!search)
-        return (<Text style={style} numberOfLines={numLines} {...rest}>
+        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
         {text}
       </Text>);
     const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
     const parts = text.split(regex);
-    return (<Text style={style} numberOfLines={numLines} {...rest}>
+    return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
       {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={highlightStyle}>
             {part}
           </Text>) : (<Text key={i}>{part}</Text>))}
     </Text>);
-};
+});
 export default HighlightText;

package/dist/esm/components/Inspector/AnalyticsTab.d.ts

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

package/dist/esm/components/Inspector/AnalyticsTab.js

@@ -0,0 +1,193 @@
+import React, { useCallback } from 'react';
+import { FlatList, Pressable, Text, TextInput, TouchableOpacity, View, } from 'react-native';
+import { animateNextLayout, useInspector } from './InspectorContext';
+import AnalyticsEventCard from '../AnalyticsEventCard';
+import AnalyticsDetail from '../AnalyticsDetail';
+import EndOfListFooter from '../EndOfListFooter';
+import styles from '../../styles';
+import { AppColors } from '../../styles/AppColors';
+import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
+import { SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, } from '../NetworkIcons';
+const AnalyticsHeader = React.memo(() => {
+    const { filteredAnalyticsEvents, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = useInspector();
+    const userId = getCurrentUserId();
+    const userProperties = getCurrentUserProperties();
+    const defaultParams = getDefaultEventParameters();
+    const isTrackingEnabled = getCollectionEnabled();
+    const hasUserProps = Object.keys(userProperties).length > 0;
+    const hasDefaultParams = Object.keys(defaultParams).length > 0;
+    const totalEvents = filteredAnalyticsEvents.length;
+    return (<View style={styles.analyticsHeaderCard}>
+      <View style={[styles.analyticsHeaderTop, !analyticsHeaderExpanded && { marginBottom: 0 }]}>
+        <View style={{ flex: 1 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <Text style={styles.analyticsHeaderTitle}>Session Info</Text>
+            <View style={[
+            styles.statusDot,
+            { backgroundColor: isTrackingEnabled ? AppColors.greenColor : AppColors.errorColor }
+        ]}/>
+            <Text style={styles.statusText}>
+              {isTrackingEnabled ? 'Active' : 'Paused'}
+            </Text>
+          </View>
+          <Text style={styles.analyticsHeaderSubtitle} numberOfLines={1}>
+            {userId ? `User ID: ${userId}` : 'Anonymous Session'}
+          </Text>
+        </View>
+        
+        <TouchableOpacity style={styles.analyticsHeaderToggle} activeOpacity={0.7} onPress={() => {
+            animateNextLayout();
+            setAnalyticsHeaderExpanded(!analyticsHeaderExpanded);
+        }}>
+          <Text style={styles.analyticsHeaderToggleText}>
+            {analyticsHeaderExpanded ? 'Collapse' : 'Expand'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {analyticsHeaderExpanded && (<>
+          {/* Stats Row */}
+          <View style={styles.analyticsStatsRow}>
+            <View style={styles.analyticsStatBox}>
+              <Text style={styles.analyticsStatValue}>{totalEvents}</Text>
+              <Text style={styles.analyticsStatLabel}>Events</Text>
+            </View>
+            <View style={styles.analyticsStatBox}>
+              <Text style={styles.analyticsStatValue}>
+                {Object.keys(userProperties).length}
+              </Text>
+              <Text style={styles.analyticsStatLabel}>User Props</Text>
+            </View>
+            <View style={styles.analyticsStatBox}>
+              <Text style={styles.analyticsStatValue}>
+                {Object.keys(defaultParams).length}
+              </Text>
+              <Text style={styles.analyticsStatLabel}>Defaults</Text>
+            </View>
+          </View>
+
+          {/* Details Section */}
+          {(hasUserProps || hasDefaultParams) && (<View style={styles.analyticsHeaderDetails}>
+              {hasUserProps && (<View style={{ marginBottom: 10 }}>
+                  <Text style={styles.detailsGroupTitle}>Active User Properties</Text>
+                  {Object.entries(userProperties).map(([k, v]) => (<View key={k} style={styles.detailsRow}>
+                      <Text style={styles.detailsKey} selectable={true}>{k}</Text>
+                      <Text style={styles.detailsValue} selectable={true}>{String(v)}</Text>
+                    </View>))}
+                </View>)}
+
+              {hasDefaultParams && (<View>
+                  <Text style={styles.detailsGroupTitle}>Default Event Parameters</Text>
+                  {Object.entries(defaultParams).map(([k, v]) => (<View key={k} style={styles.detailsRow}>
+                      <Text style={styles.detailsKey} selectable={true}>{k}</Text>
+                      <Text style={styles.detailsValue} selectable={true}>{String(v)}</Text>
+                    </View>))}
+                </View>)}
+            </View>)}
+        </>)}
+    </View>);
+});
+const AnalyticsTab = React.memo(() => {
+    const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, } = useInspector();
+    const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
+    const renderItem = useCallback(({ item, index }) => {
+        const prev = filteredAnalyticsEvents[index + 1];
+        const next = filteredAnalyticsEvents[index - 1];
+        const msSincePrev = prev
+            ? item.timestamp - prev.timestamp
+            : undefined;
+        const thisMin = Math.floor(item.timestamp / 60000);
+        const nextMin = next
+            ? Math.floor(next.timestamp / 60000)
+            : -1;
+        const showTimestamp = index === 0 || thisMin !== nextMin;
+        return (<AnalyticsEventCard event={item} onPress={() => {
+                animateNextLayout();
+                setSelectedEvent(item);
+            }} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
+                if (!item)
+                    return '';
+                const rawScreenName = item.screenName ||
+                    item.screenClass ||
+                    item.pageTitle ||
+                    item.pageLocation ||
+                    item.params?.firebase_screen ||
+                    item.params?.screen_name ||
+                    item.params?.firebase_screen_class ||
+                    item.params?.screen_class;
+                let screenName = typeof rawScreenName === 'string'
+                    ? rawScreenName
+                    : (rawScreenName ? JSON.stringify(rawScreenName) : '');
+                const routeInfo = logRouteMapRef.current.get(item.id + 1000000);
+                if (!screenName) {
+                    if (routeInfo &&
+                        routeInfo.path !== 'Navigators') {
+                        const parts = routeInfo.path.split(' ➔ ');
+                        screenName = parts[parts.length - 1];
+                    }
+                }
+                return screenName;
+            })()}/>);
+    }, [filteredAnalyticsEvents, analyticsSearch, newEventIds, setSelectedEvent, logRouteMapRef]);
+    return (<>
+      {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
+      {selectedEvent == null && (<View style={[
+                styles.toolbarRow,
+                { marginTop: 12, marginBottom: 8 },
+            ]}>
+        <View style={styles.searchContainer}>
+          <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+          <TextInput placeholder="Search events..." placeholderTextColor={AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+          {analyticsSearch.length > 0 && (<Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
+              <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+            </Pressable>)}
+        </View>
+        <View style={styles.toolbarRight}>
+          <TouchableOpacity style={[
+                styles.toolbarBtn,
+                isAnalyticsPaused && {
+                    borderColor: `${AppColors.darkOrange}50`,
+                    backgroundColor: `${AppColors.darkOrange}18`,
+                },
+            ]} onPress={() => setIsAnalyticsPaused(p => !p)} hitSlop={6}>
+            <HeaderPauseIcon isPaused={isAnalyticsPaused} color={isAnalyticsPaused
+                ? AppColors.darkOrange
+                : AppColors.grayTextStrong} size={16}/>
+          </TouchableOpacity>
+          <TouchableOpacity style={[
+                styles.toolbarBtn,
+                {
+                    borderColor: `${AppColors.errorColor}38`,
+                    backgroundColor: `${AppColors.errorColor}0F`,
+                },
+            ]} onPress={handleDelete} hitSlop={6}>
+            <TrashIcon color={AppColors.errorColor} size={15}/>
+          </TouchableOpacity>
+        </View>
+      </View>)}
+
+      <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
+        {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<View style={styles.emptyContainer}>
+                <View style={styles.emptyIconWrap}>
+                  <EmptyRadarIcon color={AppColors.purple} size={32}/>
+                </View>
+                <Text style={styles.emptyTitle}>
+                  {analyticsSearch.length > 0
+                    ? 'No matching events'
+                    : 'No analytics events yet'}
+                </Text>
+                <Text style={styles.emptySub}>
+                  {analyticsSearch.length > 0
+                    ? 'Try adjusting your search.'
+                    : 'Call setupAnalyticsLogger(analytics()) at app start.'}
+                </Text>
+              </View>} ListFooterComponent={filteredAnalyticsEvents.length > 0 ? (<EndOfListFooter count={filteredAnalyticsEvents.length} label="events"/>) : null} contentContainerStyle={[
+                styles.listContent,
+                filteredAnalyticsEvents.length === 0 && {
+                    flexGrow: 1,
+                },
+            ]} keyboardShouldPersistTaps="handled"/>) : null}
+      </View>
+    </>);
+});
+export default AnalyticsTab;

package/dist/esm/components/Inspector/ConsoleTab.d.ts

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

package/dist/esm/components/Inspector/ConsoleTab.js

@@ -0,0 +1,372 @@
+import React, { useCallback, useMemo } from 'react';
+import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { useInspector } from './InspectorContext';
+import { useTranslation } from 'react-i18next';
+import TouchableScale from '../TouchableScale';
+import AnimatedEntrance from '../AnimatedEntrance';
+import { ConsoleLogCard } from '../ConsoleLogCard';
+import EmptyState from '../EmptyState';
+import EndOfListFooter from '../EndOfListFooter';
+import styles from '../../styles';
+import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
+import { SearchIcon, ClearIcon, SortArrowIcon, TrashIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, AnalyticsIcon, HeaderPauseIcon, } from '../NetworkIcons';
+const ConsoleTab = React.memo(() => {
+    const { t } = useTranslation();
+    const { logSearch, setLogSearch, logSortOrder, setLogSortOrder, handleDelete, logFilters, setLogFilters, logCounts, filteredConsoleLogs, visibleConsoleLogs, isConsolePaused, setIsConsolePaused, } = useInspector();
+    const renderItem = useCallback(({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
+        <ConsoleLogCard item={item} searchStr={logSearch}/>
+      </AnimatedEntrance>), [logSearch]);
+    const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
+    const listHeader = useMemo(() => {
+        const total = visibleConsoleLogs.length;
+        const filtered = filteredConsoleLogs.length;
+        const isAllSelected = logFilters.has('all') ||
+            !Array.from(logFilters).some(f => f !== 'all');
+        if (isAllSelected) {
+            return (<Text style={[
+                    styles.resultCount,
+                    { marginBottom: 4, marginTop: 12 },
+                ]}>
+          Showing ({filtered}/{total}) logs showing
+        </Text>);
+        }
+        else {
+            const activeFilterNames = Array.from(logFilters)
+                .filter(f => f !== 'all')
+                .map(f => {
+                if (f === 'user-log')
+                    return 'User Log';
+                if (f === 'analytics')
+                    return 'Analytics';
+                return (f.charAt(0).toUpperCase() +
+                    f.slice(1));
+            });
+            return (<Text style={[
+                    styles.resultCount,
+                    { marginBottom: 4, marginTop: 12 },
+                ]}>
+          Filtering with {activeFilterNames.join(', ')} (
+          {filtered}/{total}) logs is showing
+        </Text>);
+        }
+    }, [visibleConsoleLogs.length, filteredConsoleLogs.length, logFilters]);
+    return (<View style={{ flex: 1 }}>
+      <View style={{
+            backgroundColor: AppColors.white,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors.dividerColor,
+            paddingBottom: 6,
+        }}>
+        <View style={[
+            styles.toolbarRow,
+            { marginTop: 12, marginBottom: 8 },
+        ]}>
+          <View style={styles.searchContainer}>
+            <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+            <TextInput placeholder={t('console.searchPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {logSearch.length > 0 && (<Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles.clearBtn}>
+                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+              </Pressable>)}
+          </View>
+
+          <View style={styles.toolbarRight}>
+            <TouchableScale style={[
+            styles.toolbarBtn,
+            isConsolePaused && {
+                borderColor: `${AppColors.darkOrange}50`,
+                backgroundColor: `${AppColors.darkOrange}18`,
+            },
+        ]} onPress={() => setIsConsolePaused(p => !p)} hitSlop={6}>
+              <HeaderPauseIcon isPaused={isConsolePaused} color={isConsolePaused
+            ? AppColors.darkOrange
+            : AppColors.grayTextStrong} size={16}/>
+            </TouchableScale>
+            <TouchableScale style={styles.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+              <SortArrowIcon color={AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
+            </TouchableScale>
+            <TouchableScale style={[
+            styles.toolbarBtn,
+            {
+                borderColor: `${AppColors.errorColor}38`,
+                backgroundColor: `${AppColors.errorColor}0F`,
+            },
+        ]} onPress={handleDelete} hitSlop={6}>
+              <TrashIcon color={AppColors.errorColor} size={15}/>
+            </TouchableScale>
+          </View>
+        </View>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        }}>
+          {(() => {
+            const active = logFilters.has('all');
+            return (<TouchableScale onPress={() => {
+                    setLogFilters(new Set(['all']));
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.purpleShade700,
+                        backgroundColor: AppColors.purpleTintBg,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <LayersIcon size={12} color={active
+                    ? AppColors.purpleShade700
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.purpleShade700,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      All ({logCounts.all})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('user-log');
+            return (<TouchableScale onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('user-log')
+                            ? next.delete('user-log')
+                            : next.add('user-log');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.slate500,
+                        backgroundColor: AppColors.slate100,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <UserIcon size={12} color={active
+                    ? AppColors.slate700
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.slate700,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      User Log ({logCounts['user-log']})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('info');
+            return (<TouchableScale onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('info')
+                            ? next.delete('info')
+                            : next.add('info');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.purple,
+                        backgroundColor: AppColors.purpleShade50,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <InfoCircleIcon size={12} color={active
+                    ? AppColors.purple
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.purple,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      Info ({logCounts.info})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('warn');
+            return (<TouchableScale onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('warn')
+                            ? next.delete('warn')
+                            : next.add('warn');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.lightOrange,
+                        backgroundColor: AppColors.warnCardBg,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <WarningTriangleIcon size={12} color={active
+                    ? AppColors.darkOrange ||
+                        AppColors.lightOrange
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.darkOrange ||
+                            AppColors.lightOrange,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      Warning ({logCounts.warn})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('error');
+            return (<TouchableScale onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('error')
+                            ? next.delete('error')
+                            : next.add('error');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.errorColor,
+                        backgroundColor: AppColors.errorCardBg,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <ErrorCircleIcon size={12} color={active
+                    ? AppColors.errorColor
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.errorColor,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      Error ({logCounts.error})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('analytics');
+            return (<TouchableScale onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('analytics')
+                            ? next.delete('analytics')
+                            : next.add('analytics');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.skyBlue,
+                        backgroundColor: `${AppColors.skyBlue}15`,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <AnalyticsIcon size={12} color={active
+                    ? AppColors.skyBlue
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.skyBlue,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      Analytics ({logCounts.analytics})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+        </ScrollView>
+      </View>
+
+      <FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
+            styles.listContent,
+            filteredConsoleLogs.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+    </View>);
+});
+export default ConsoleTab;

package/dist/esm/components/Inspector/FabLauncher.d.ts

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

package/dist/esm/components/Inspector/FabLauncher.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Animated, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useInspector } from './InspectorContext';
+import TouchableScale from '../TouchableScale';
+import BrandCircleIcon from '../BrandCircleIcon';
+import { AppColors } from '../../styles/AppColors';
+import styles from '../../styles';
+const FabLauncher = () => {
+    const { setVisible, fabPan, fabPanResponder, fabDraggedRef, pulseAnim, fabShineAnim, unreadPulseAnim, logs, analyticsEvents, } = useInspector();
+    return (<Animated.View style={[styles.fabWrapper, { transform: fabPan.getTranslateTransform() }]} {...fabPanResponder.panHandlers}>
+      <TouchableScale style={{ alignItems: 'center', justifyContent: 'center' }} onPress={() => {
+            if (fabDraggedRef.current)
+                return;
+            setVisible(true);
+        }} hitSlop={10}>
+        <Animated.View style={[styles.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
+        <BrandCircleIcon size={62}/>
+        {/* #4 — shining sweep, clipped inside the circular launcher */}
+        <View pointerEvents="none" style={styles.fabShineClip}>
+          <Animated.View style={[
+            styles.fabShineStreak,
+            {
+                transform: [
+                    {
+                        translateX: fabShineAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-48, 96],
+                        }),
+                    },
+                    { rotate: '25deg' },
+                ],
+            },
+        ]}>
+            <LinearGradient colors={[
+            `${AppColors.white}00`,
+            `${AppColors.white}8C`,
+            `${AppColors.white}00`,
+        ]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
+          </Animated.View>
+        </View>
+        {(logs.length > 0 || analyticsEvents.length > 0) && (<Animated.View style={[
+                styles.fabGreenDot,
+                { transform: [{ scale: unreadPulseAnim }] },
+            ]}/>)}
+      </TouchableScale>
+    </Animated.View>);
+};
+export default FabLauncher;

package/dist/esm/components/Inspector/InsightsDashboard.d.ts

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