react-native-inapp-inspector 2.3.8 → 2.3.10

package/dist/commonjs/components/LogCard.js

@@ -236,29 +236,6 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                   GQL
                 </react_native_1.Text>
               </react_native_1.View>)}
-
-            
-            {item.duration != null && !isFailed && (<react_native_1.View style={[
-                styles_1.default.chip,
-                {
-                    backgroundColor: `${durationColor}12`,
-                    borderColor: `${durationColor}2E`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                },
-            ]}>
-                <react_native_1.Text style={[
-                styles_1.default.chipText,
-                {
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: durationColor,
-                },
-            ]}>
-                  {item.duration}ms
-                </react_native_1.Text>
-              </react_native_1.View>)}
           </react_native_1.View>
 
           <react_native_1.View style={[
@@ -277,6 +254,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                     : isLoading
                         ? `${AppColors_1.AppColors.darkOrange}30`
                         : `${statusColor}30`,
+                flexShrink: 0,
             },
         ]}>
             {renderStatusIcon()}
@@ -310,6 +288,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             alignItems: 'center',
             justifyContent: 'center',
             marginRight: 4,
+            flexShrink: 0,
         }}>
               <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.skyBlue} size={11}/>
             </react_native_1.View>
@@ -348,9 +327,39 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
 
         
         <react_native_1.View style={styles_1.default.cardFooterRow}>
-          <react_native_1.View style={styles_1.default.cardDateRow}>
-            <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
-            <react_native_1.Text style={styles_1.default.cardDateText}>{triggeredAt}</react_native_1.Text>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, marginRight: 8 }}>
+            <react_native_1.View style={[styles_1.default.cardDateRow, { flexShrink: 0 }]}>
+              <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
+              <react_native_1.Text style={styles_1.default.cardDateText}>{triggeredAt}</react_native_1.Text>
+            </react_native_1.View>
+
+            {item.caller && item.caller !== 'Unknown' && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: `${AppColors_1.AppColors.skyBlue}14`,
+                    borderColor: `${AppColors_1.AppColors.skyBlue}30`,
+                    paddingHorizontal: 5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                    flexShrink: 1,
+                    minWidth: 0,
+                },
+            ]}>
+                <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.skyBlue} size={8.5}/>
+                <react_native_1.Text style={[
+                styles_1.default.chipText,
+                {
+                    color: AppColors_1.AppColors.skyBlue,
+                    fontSize: 8.5,
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                },
+            ]} numberOfLines={1} ellipsizeMode="middle">
+                  {item.caller}
+                </react_native_1.Text>
+              </react_native_1.View>)}
           </react_native_1.View>
 
           <react_native_1.View style={styles_1.default.cardFooterRight}>

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -133,3 +133,4 @@ export declare const ShieldCheckIcon: ({ color, size, }: IconProps) => React.JSX
 export declare const DatabaseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
+exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AppColors_1 = require("../styles/AppColors");
@@ -894,3 +894,8 @@ const PlusIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) =>
     <react_native_svg_1.Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
 exports.PlusIcon = PlusIcon;
+const LockIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M7 11V7a5 5 0 0 1 10 0v4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.LockIcon = LockIcon;

package/dist/commonjs/constants/index.js

@@ -21,6 +21,9 @@ exports.METHOD_COLORS = {
     PUT: '#D97706',
     PATCH: '#7C3AED',
     DELETE: '#DC2626',
+    QUERY: '#0284C7',
+    OPTIONS: '#475569',
+    HEAD: '#0891B2',
 };
 exports.DOMAIN_COLORS = AppColors_1.AppColors.domainColors;
 exports.DURATION_FAST_MS = 200;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.8";
+export declare const LIB_VERSION = "2.3.10";

package/dist/commonjs/constants/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '2.3.8';
+exports.LIB_VERSION = '2.3.10';

package/dist/commonjs/helpers/telemetry.js

@@ -83,6 +83,36 @@ async function getOrCreateClientId() {
         return `${Math.floor(100000000 + Math.random() * 900000000)}.${Math.floor(1000000000 + Math.random() * 9000000000)}`;
     }
 }
+function isDeviceEmulator() {
+    try {
+        if (react_native_1.Platform.OS === 'android') {
+            const c = react_native_1.Platform.constants || {};
+            const model = String(c.Model || '').toLowerCase();
+            const brand = String(c.Brand || '').toLowerCase();
+            const fingerprint = String(c.Fingerprint || '').toLowerCase();
+            const hardware = String(c.Hardware || '').toLowerCase();
+            const manufacturer = String(c.Manufacturer || '').toLowerCase();
+            return (model.includes('emulator') ||
+                model.includes('sdk') ||
+                model.includes('google_sdk') ||
+                model.includes('vbox') ||
+                brand.includes('generic') ||
+                fingerprint.startsWith('generic') ||
+                hardware.includes('goldfish') ||
+                hardware.includes('ranchu') ||
+                manufacturer.includes('genymotion'));
+        }
+        if (react_native_1.Platform.OS === 'ios') {
+            const c = react_native_1.Platform.constants || {};
+            const model = String(c.Model || '').toLowerCase();
+            return model.includes('simulator') || Boolean(c.isSimulator);
+        }
+    }
+    catch {
+        return false;
+    }
+    return false;
+}
 function getSystemMetadata(environment) {
     const rnConstants = react_native_1.Platform.constants;
     const rnVersion = rnConstants?.reactNativeVersion
@@ -91,6 +121,7 @@ function getSystemMetadata(environment) {
     const isHermes = Boolean(typeof global.HermesInternal === 'object' && global.HermesInternal !== null);
     const isFabric = Boolean(global?.nativeFabricUIManager !== undefined);
     const isDev = Boolean(typeof __DEV__ !== 'undefined' && __DEV__);
+    const isEmulator = isDeviceEmulator();
     return {
         lib_version: version_1.LIB_VERSION,
         platform: react_native_1.Platform.OS,
@@ -99,6 +130,9 @@ function getSystemMetadata(environment) {
         is_hermes: isHermes,
         is_fabric: isFabric,
         is_dev: isDev,
+        is_emulator: isEmulator,
+        device_type: isEmulator ? 'emulator' : 'real_device',
+        app_mode: isDev ? 'local_mode' : 'bundled_application',
         environment: environment || (isDev ? 'DEV' : 'PROD'),
         engagement_time_msec: 1000,
     };

package/dist/commonjs/index.js

@@ -403,6 +403,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         return false;
     }, [latestNpmVersion]);
     (0, react_1.useEffect)(() => {
+        if (typeof __DEV__ === 'undefined' || !__DEV__) {
+            return;
+        }
         let cancelled = false;
         fetch('https://registry.npmjs.org/react-native-inapp-inspector/latest')
             .then(res => (res.ok ? res.json() : null))

package/dist/commonjs/styles/index.d.ts

@@ -603,6 +603,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         alignItems: string;
         justifyContent: string;
         marginBottom: number;
+        minHeight: number;
     };
     cardHeaderLeft: {
         flexDirection: string;
@@ -610,11 +611,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flex: number;
         marginRight: number;
         gap: number;
+        minWidth: number;
     };
     cardHeaderRight: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     smallCheckbox: {
         width: number;
@@ -701,6 +704,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         flex: number;
+        minWidth: number;
         gap: number;
     };
     slugTag: {
@@ -713,6 +717,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         paddingVertical: number;
         borderRadius: number;
         marginTop: number;
+        flexShrink: number;
     };
     slugText: {
         fontFamily: string;
@@ -725,17 +730,20 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     cardFooterRow: {
         flexDirection: string;
         alignItems: string;
         justifyContent: string;
         marginTop: number;
+        minHeight: number;
     };
     cardDateRow: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     cardDateText: {
         fontFamily: string;
@@ -747,6 +755,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     chip: {
         flexDirection: string;
@@ -848,11 +857,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         alignItems: string;
         justifyContent: string;
         paddingBottom: number;
+        gap: number;
     };
     detailInfoRight: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     metaContainer: {
         backgroundColor: string;

package/dist/commonjs/styles/index.js

@@ -594,18 +594,21 @@ const getRawStyles = (colors) => ({
         alignItems: 'center',
         justifyContent: 'space-between',
         marginBottom: 4,
+        minHeight: 22,
     },
     cardHeaderLeft: {
         flexDirection: 'row',
         alignItems: 'center',
         flex: 1,
-        marginRight: 8,
-        gap: 6,
+        marginRight: 6,
+        gap: 5,
+        minWidth: 0,
     },
     cardHeaderRight: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
+        flexShrink: 0,
     },
     smallCheckbox: {
         width: 15,
@@ -686,6 +689,7 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'flex-start',
         flex: 1,
+        minWidth: 0,
         gap: 6,
     },
     slugTag: {
@@ -698,6 +702,7 @@ const getRawStyles = (colors) => ({
         paddingVertical: 1.5,
         borderRadius: 4,
         marginTop: 1,
+        flexShrink: 0,
     },
     slugText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
@@ -710,17 +715,20 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 4,
+        flexShrink: 0,
     },
     cardFooterRow: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginTop: 2,
+        marginTop: 4,
+        minHeight: 18,
     },
     cardDateRow: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 3.5,
+        flexShrink: 0,
     },
     cardDateText: {
         fontFamily: AppFonts_1.AppFonts.interRegular,
@@ -732,6 +740,7 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
+        flexShrink: 0,
     },
     chip: {
         flexDirection: 'row',
@@ -823,9 +832,15 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingBottom: 10,
+        paddingBottom: 8,
+        gap: 8,
+    },
+    detailInfoRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        flexShrink: 0,
     },
-    detailInfoRight: { flexDirection: 'row', alignItems: 'center', gap: 6 },
     metaContainer: {
         backgroundColor: colors.primaryLight,
         borderWidth: 1,

package/dist/commonjs/types/enums.d.ts

@@ -17,6 +17,9 @@ export declare const Method: {
     readonly Put: "PUT";
     readonly Patch: "PATCH";
     readonly Delete: "DELETE";
+    readonly Query: "QUERY";
+    readonly Options: "OPTIONS";
+    readonly Head: "HEAD";
 };
 export type Method = (typeof Method)[keyof typeof Method];
 export declare const StatusFilter: {

package/dist/commonjs/types/enums.js

@@ -19,6 +19,9 @@ exports.Method = {
     Put: 'PUT',
     Patch: 'PATCH',
     Delete: 'DELETE',
+    Query: 'QUERY',
+    Options: 'OPTIONS',
+    Head: 'HEAD',
 };
 exports.StatusFilter = {
     All: 'ALL',

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { FlatList, Pressable, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import AnalyticsEventCard from '../AnalyticsEventCard';
@@ -13,7 +13,7 @@ import Svg, { Path, Rect, Line, Circle, G, Defs, LinearGradient as SvgLinearGrad
 import TouchableScale from '../TouchableScale';
 import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
 import { getEventCategory, } from '../../helpers';
-import { LayersIcon, SearchIcon, ClearIcon, TrashIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
+import { LayersIcon, SearchIcon, ClearIcon, TrashIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, ChevronIcon, } from '../NetworkIcons';
 const AnalyticsHeader = React.memo(() => {
     const { t } = useTranslation();
     const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = useInspector();
@@ -795,6 +795,7 @@ const AnalyticsHeader = React.memo(() => {
 const AnalyticsTab = React.memo(() => {
     const { t } = useTranslation();
     const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, isAnalyticsFilterApplied, } = useInspector();
+    const listRef = useRef(null);
     const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
     const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
     const renderItem = useCallback(({ item, index }) => {
@@ -922,7 +923,8 @@ const AnalyticsTab = React.memo(() => {
       <AnalyticsFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0} searchQuery={analyticsSearch} customTitle={analyticsSearch.length > 0
+        {isAnalyticsLayoutReady ? (<>
+            <FlatList ref={listRef} data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0} searchQuery={analyticsSearch} customTitle={analyticsSearch.length > 0
                     ? 'No matching analytics events'
                     : 'No analytics events yet'} customSub={analyticsSearch.length > 0
                     ? `No events matched "${analyticsSearch}"`
@@ -931,7 +933,30 @@ const AnalyticsTab = React.memo(() => {
                 filteredAnalyticsEvents.length === 0 && {
                     flexGrow: 1,
                 },
-            ]} keyboardShouldPersistTaps="handled"/>) : null}
+            ]} keyboardShouldPersistTaps="handled"/>
+
+            <TouchableScale onPress={() => {
+                try {
+                    listRef.current?.scrollToOffset({
+                        offset: 0,
+                        animated: true,
+                    });
+                }
+                catch {
+                    try {
+                        listRef.current?.scrollToIndex({
+                            index: 0,
+                            animated: true,
+                        });
+                    }
+                    catch { }
+                }
+            }} hitSlop={12} style={styles.scrollTopBtn}>
+              <View style={{ transform: [{ rotate: '180deg' }] }}>
+                <ChevronIcon color={AppColors.white} size={18}/>
+              </View>
+            </TouchableScale>
+          </>) : null}
       </View>
     </>);
 });

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

@@ -4,6 +4,7 @@ import { useTranslation, t } from '../../i18n';
 import TouchableScale from '../TouchableScale';
 import CopyButton from '../CopyButton';
 import HighlightText from '../HighlightText';
+import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { copyToClipboard } from '../../helpers';
@@ -788,6 +789,8 @@ const BundleTab = React.memo(() => {
         </TouchableScale>
       </View>
 
+      <FeatureUnderDevNotice featureName="Metro Bundle Analyzer"/>
+
       
       
       

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import { useTranslation } from '../../i18n';
@@ -10,10 +10,11 @@ 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';
+import { SearchIcon, ClearIcon, SortArrowIcon, TrashIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, AnalyticsIcon, HeaderPauseIcon, ChevronIcon, } from '../NetworkIcons';
 const ConsoleTab = React.memo(() => {
     const { t } = useTranslation();
     const { logSearch, setLogSearch, logSortOrder, setLogSortOrder, handleDelete, logFilters, setLogFilters, logCounts, filteredConsoleLogs, visibleConsoleLogs, isConsolePaused, setIsConsolePaused, } = useInspector();
+    const listRef = useRef(null);
     const renderItem = useCallback(({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
         <ConsoleLogCard item={item} searchStr={logSearch}/>
       </AnimatedEntrance>), [logSearch]);
@@ -480,7 +481,7 @@ const ConsoleTab = React.memo(() => {
         </ScrollView>
       </View>
 
-      <FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0} searchQuery={logSearch} customTitle={logSearch.length > 0
+      <FlatList ref={listRef} data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0} searchQuery={logSearch} customTitle={logSearch.length > 0
                 ? 'No matching console logs'
                 : 'No console logs'} onClearSearch={() => {
                 setLogSearch('');
@@ -489,6 +490,28 @@ const ConsoleTab = React.memo(() => {
             styles.listContent,
             filteredConsoleLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
+
+      <TouchableScale onPress={() => {
+            try {
+                listRef.current?.scrollToOffset({
+                    offset: 0,
+                    animated: true,
+                });
+            }
+            catch {
+                try {
+                    listRef.current?.scrollToIndex({
+                        index: 0,
+                        animated: true,
+                    });
+                }
+                catch { }
+            }
+        }} hitSlop={12} style={styles.scrollTopBtn}>
+        <View style={{ transform: [{ rotate: '180deg' }] }}>
+          <ChevronIcon color={AppColors.white} size={18}/>
+        </View>
+      </TouchableScale>
     </View>);
 });
 export default ConsoleTab;

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

@@ -1,16 +1,18 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Alert, FlatList, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { useTranslation } from '../../i18n';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import AnimatedEntrance from '../AnimatedEntrance';
 import EndOfListFooter from '../EndOfListFooter';
+import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import HighlightText from '../HighlightText';
+import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { clearCrashRecords, } from '../../customHooks/crashHandler';
 import CrashFilterModal, { DEFAULT_CRASH_FILTERS, isCrashFiltersDefault, } from './CrashFilterModal';
-import { SearchIcon, ClearIcon, TrashIcon, TerminalIcon, LayersIcon, ClockIcon, ShieldAlertIcon, FlameIcon, JsIcon, HourglassIcon, SkullIcon, LayoutIcon, ChipIcon, AppleIcon, AndroidIcon, RepeatIcon, CodeBracketsIcon, FilterIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, TrashIcon, TerminalIcon, LayersIcon, ClockIcon, ShieldAlertIcon, FlameIcon, JsIcon, HourglassIcon, SkullIcon, LayoutIcon, ChipIcon, AppleIcon, AndroidIcon, RepeatIcon, CodeBracketsIcon, FilterIcon, ChevronIcon, } from '../NetworkIcons';
 const getRelativeTime = (timestamp) => {
     const now = Date.now();
     const diff = Math.max(0, now - timestamp);
@@ -29,6 +31,7 @@ const getRelativeTime = (timestamp) => {
 const CrashTab = React.memo(() => {
     const { t } = useTranslation();
     const { crashRecords, selectedCrash, setSelectedCrash } = useInspector();
+    const listRef = useRef(null);
     const [searchQuery, setSearchQuery] = useState('');
     const [filterType, setFilterType] = useState('all');
     const [crashFilters, setCrashFilters] = useState(DEFAULT_CRASH_FILTERS);
@@ -349,6 +352,8 @@ const CrashTab = React.memo(() => {
               </TouchableScale>
             </View>
 
+            <FeatureUnderDevNotice featureName="Crash & Exception Sentinel"/>
+
             
             <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
               {[
@@ -403,7 +408,31 @@ const CrashTab = React.memo(() => {
                 Clear Search
               </Text>
             </TouchableScale>)}
-        </ScrollView>) : (<FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter />}/>)}
+        </ScrollView>) : (<>
+          <FlatList ref={listRef} data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter />}/>
+
+          <TouchableScale onPress={() => {
+                try {
+                    listRef.current?.scrollToOffset({
+                        offset: 0,
+                        animated: true,
+                    });
+                }
+                catch {
+                    try {
+                        listRef.current?.scrollToIndex({
+                            index: 0,
+                            animated: true,
+                        });
+                    }
+                    catch { }
+                }
+            }} hitSlop={12} style={styles.scrollTopBtn}>
+            <View style={{ transform: [{ rotate: '180deg' }] }}>
+              <ChevronIcon color={AppColors.white} size={18}/>
+            </View>
+          </TouchableScale>
+        </>)}
 
       
       <CrashFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={crashFilters} onApply={setCrashFilters} searchQuery={searchQuery}/>

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FeatureUnderDevNoticeProps {
+    featureName?: string;
+    compact?: boolean;
+}
+export declare const FeatureUnderDevNotice: React.FC<FeatureUnderDevNoticeProps>;
+export default FeatureUnderDevNotice;