react-native-inapp-inspector 1.1.27 → 1.1.29

package/dist/commonjs/index.js

@@ -36,8 +36,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActiveTab = exports.InspectCatch = exports.InspectTrackTime = exports.InspectLog = exports.getPerformanceEvents = exports.subscribePerformanceEvents = exports.clearPerformanceEvents = exports.logPerformanceEvent = exports.usePerformanceTracker = exports.registerGAPlugin = exports.getEventCategory = exports.getLastActionForReducer = exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.ErrorBoundary = exports.CrashTab = exports.computeCrashFingerprint = exports.recordUserActionBreadcrumb = exports.recordReduxBreadcrumb = exports.recordNetworkBreadcrumb = exports.recordNavigationBreadcrumb = exports.addCrashBreadcrumb = exports.recordCustomCrash = exports.parseCrashStackTrace = exports.exportCrashReport = exports.simulateTestCrash = exports.clearCrashRecords = exports.getCrashRecords = exports.emitCrashEvent = exports.subscribeCrashEvents = exports.setupGlobalCrashHandler = exports.getCollectionEnabled = exports.getDefaultEventParameters = exports.getCurrentUserId = exports.getCurrentUserProperties = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
-exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = void 0;
+exports.registerComponentProfile = exports.getHermesMemoryStats = exports.measureAsync = exports.trackHeavyTask = exports.trackNavigationTransition = exports.trackComponentRender = exports.useNavigationProfiler = exports.useComponentProfiler = exports.usePerformanceTracker = exports.registerGAPlugin = exports.getEventCategory = exports.getLastActionForReducer = exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.ErrorBoundary = exports.CrashTab = exports.computeCrashFingerprint = exports.recordUserActionBreadcrumb = exports.recordReduxBreadcrumb = exports.recordNetworkBreadcrumb = exports.recordNavigationBreadcrumb = exports.addCrashBreadcrumb = exports.recordCustomCrash = exports.parseCrashStackTrace = exports.exportCrashReport = exports.simulateTestCrash = exports.clearCrashRecords = exports.getCrashRecords = exports.emitCrashEvent = exports.subscribeCrashEvents = exports.setupGlobalCrashHandler = exports.getCollectionEnabled = exports.getDefaultEventParameters = exports.getCurrentUserId = exports.getCurrentUserProperties = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
+exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = exports.ActiveTab = exports.InspectCatch = exports.InspectTrackTime = exports.InspectLog = exports.generateFixSnippet = exports.getInitialPerformanceEvents = exports.getInitialRenderProfiles = exports.getPerformanceEvents = exports.subscribePerformanceEvents = exports.clearPerformanceEvents = exports.logPerformanceEvent = exports.getRenderProfiles = exports.subscribeRenderProfiles = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const native_1 = require("@react-navigation/native");
@@ -375,9 +375,22 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     (0, react_1.useEffect)(() => {
         (0, reduxLogger_1.setReduxAutoRefresh)(reduxAutoRefresh);
     }, [reduxAutoRefresh]);
+    // Auto-unselect Redux or Analytics tab if module is not connected / available
+    (0, react_1.useEffect)(() => {
+        if (activeTab === 'redux' && !(0, reduxLogger_1.isReduxConnected)()) {
+            setActiveTab('apis');
+        }
+        if (activeTab === 'analytics' && !(0, analyticsLogger_1.isAnalyticsConnected)()) {
+            setActiveTab('apis');
+        }
+    }, [activeTab]);
     const toggleTabVisibility = (key) => {
         if (key === 'apis')
             return;
+        if (key === 'redux' && !(0, reduxLogger_1.isReduxConnected)())
+            return;
+        if (key === 'analytics' && !(0, analyticsLogger_1.isAnalyticsConnected)())
+            return;
         setTabVisibility(prev => {
             const nextVal = !prev[key];
             const newVisibility = { ...prev, [key]: nextVal };
@@ -393,6 +406,10 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         });
     };
     const switchActiveTab = (0, react_1.useCallback)((key) => {
+        if (key === 'redux' && !(0, reduxLogger_1.isReduxConnected)())
+            return;
+        if (key === 'analytics' && !(0, analyticsLogger_1.isAnalyticsConnected)())
+            return;
         setActiveTab(key);
     }, []);
     const [selectedEvent, setSelectedEvent] = (0, react_1.useState)(null);
@@ -1228,6 +1245,10 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         setVisible(false);
         setSelected(null);
         setSelectedEvent(null);
+        setSelectedLog(null);
+        setSelectedReduxSlice(null);
+        setSelectedReduxAction(null);
+        setSelectedCrash(null);
     }
     function handleClearAll() {
         (0, networkLogger_1.clearNetworkLogs)();
@@ -1592,10 +1613,23 @@ Object.defineProperty(exports, "getEventCategory", { enumerable: true, get: func
 Object.defineProperty(exports, "registerGAPlugin", { enumerable: true, get: function () { return gaAnalyticsRegistry_1.registerGAPlugin; } });
 var performanceTracker_1 = require("./customHooks/performanceTracker");
 Object.defineProperty(exports, "usePerformanceTracker", { enumerable: true, get: function () { return performanceTracker_1.usePerformanceTracker; } });
+Object.defineProperty(exports, "useComponentProfiler", { enumerable: true, get: function () { return performanceTracker_1.useComponentProfiler; } });
+Object.defineProperty(exports, "useNavigationProfiler", { enumerable: true, get: function () { return performanceTracker_1.useNavigationProfiler; } });
+Object.defineProperty(exports, "trackComponentRender", { enumerable: true, get: function () { return performanceTracker_1.trackComponentRender; } });
+Object.defineProperty(exports, "trackNavigationTransition", { enumerable: true, get: function () { return performanceTracker_1.trackNavigationTransition; } });
+Object.defineProperty(exports, "trackHeavyTask", { enumerable: true, get: function () { return performanceTracker_1.trackHeavyTask; } });
+Object.defineProperty(exports, "measureAsync", { enumerable: true, get: function () { return performanceTracker_1.measureAsync; } });
+Object.defineProperty(exports, "getHermesMemoryStats", { enumerable: true, get: function () { return performanceTracker_1.getHermesMemoryStats; } });
+Object.defineProperty(exports, "registerComponentProfile", { enumerable: true, get: function () { return performanceTracker_1.registerComponentProfile; } });
+Object.defineProperty(exports, "subscribeRenderProfiles", { enumerable: true, get: function () { return performanceTracker_1.subscribeRenderProfiles; } });
+Object.defineProperty(exports, "getRenderProfiles", { enumerable: true, get: function () { return performanceTracker_1.getRenderProfiles; } });
 Object.defineProperty(exports, "logPerformanceEvent", { enumerable: true, get: function () { return performanceTracker_1.logPerformanceEvent; } });
 Object.defineProperty(exports, "clearPerformanceEvents", { enumerable: true, get: function () { return performanceTracker_1.clearPerformanceEvents; } });
 Object.defineProperty(exports, "subscribePerformanceEvents", { enumerable: true, get: function () { return performanceTracker_1.subscribePerformanceEvents; } });
 Object.defineProperty(exports, "getPerformanceEvents", { enumerable: true, get: function () { return performanceTracker_1.getPerformanceEvents; } });
+Object.defineProperty(exports, "getInitialRenderProfiles", { enumerable: true, get: function () { return performanceTracker_1.getInitialRenderProfiles; } });
+Object.defineProperty(exports, "getInitialPerformanceEvents", { enumerable: true, get: function () { return performanceTracker_1.getInitialPerformanceEvents; } });
+Object.defineProperty(exports, "generateFixSnippet", { enumerable: true, get: function () { return performanceTracker_1.generateFixSnippet; } });
 var decorators_1 = require("./decorators");
 Object.defineProperty(exports, "InspectLog", { enumerable: true, get: function () { return decorators_1.InspectLog; } });
 Object.defineProperty(exports, "InspectTrackTime", { enumerable: true, get: function () { return decorators_1.InspectTrackTime; } });

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

@@ -20,17 +20,22 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     };
     headerLeft: {
         flex: number;
+        minWidth: number;
         alignItems: string;
     };
     headerCenter: {
         flex: number;
+        minWidth: number;
         alignItems: string;
+        justifyContent: string;
+        paddingHorizontal: number;
     };
     headerRight: {
-        flex: number;
+        flexShrink: number;
         flexDirection: string;
         alignItems: string;
         justifyContent: string;
+        gap: number;
     };
     headerTitle: {
         fontFamily: string;
@@ -176,6 +181,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         justifyContent: string;
         borderWidth: number;
         borderColor: string;
+        overflow: string;
     };
     fabWrapper: {
         position: string;
@@ -250,6 +256,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         gap: number;
     };
     toolbarBtn: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
         width: number;
         height: number;
         borderRadius: number;
@@ -258,14 +271,16 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         backgroundColor: string;
         borderWidth: number;
         borderColor: string;
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
+    } | {
         elevation: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
     };
     toolbarBtnActive: {
         borderColor: string;
@@ -452,18 +467,38 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         fontFamily: string;
         fontSize: number;
     };
+    domainProgressSection: {
+        marginTop: number;
+        gap: number;
+        width: string;
+    };
     domainProgressTrack: {
         flexDirection: string;
         height: number;
         borderRadius: number;
         overflow: string;
         backgroundColor: string;
-        marginTop: number;
         width: string;
     };
     domainProgressSegment: {
         height: string;
     };
+    domainProgressLabelsRow: {
+        flexDirection: string;
+        alignItems: string;
+        justifyContent: string;
+        paddingHorizontal: number;
+    };
+    domainProgressRateText: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+    };
+    domainProgressSummaryText: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+    };
     domainStatsGroup: {
         flexDirection: string;
         alignItems: string;
@@ -580,11 +615,6 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         fontSize: number;
     };
     methodBadge: {
-        paddingHorizontal: number;
-        paddingVertical: number;
-        borderRadius: number;
-        alignItems: string;
-        justifyContent: string;
         shadowColor: string;
         shadowOffset: {
             width: number;
@@ -592,12 +622,28 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         };
         shadowOpacity: number;
         shadowRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+        borderWidth: number;
+        borderColor: string;
+    } | {
         elevation: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+        borderWidth: number;
+        borderColor: string;
     };
     methodBadgeText: {
         fontFamily: string;
         fontSize: number;
         letterSpacing: number;
+        color: string;
     };
     cardHostText: {
         fontFamily: string;
@@ -645,12 +691,14 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         paddingHorizontal: number;
         paddingVertical: number;
         borderRadius: number;
+        marginTop: number;
     };
     slugText: {
         fontFamily: string;
         fontSize: number;
+        lineHeight: number;
         color: string;
-        flexShrink: number;
+        flex: number;
     };
     slugRight: {
         flexDirection: string;

package/dist/commonjs/styles/index.js

@@ -43,23 +43,34 @@ const getRawStyles = (colors) => ({
     header: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 12,
-        paddingVertical: 10,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
         zIndex: 10,
-        minHeight: 64,
+        minHeight: 56,
         shadowColor: colors.black,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.08,
         shadowRadius: 4,
-        elevation: 4,
+        elevation: 3,
     },
-    headerLeft: { flex: 2, alignItems: 'flex-start' },
-    headerCenter: { flex: 3, alignItems: 'center' },
-    headerRight: {
+    headerLeft: {
+        flex: 1,
+        minWidth: 0,
+        alignItems: 'flex-start',
+    },
+    headerCenter: {
         flex: 1,
+        minWidth: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 4,
+    },
+    headerRight: {
+        flexShrink: 0,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'flex-end',
+        gap: 6,
     },
     headerTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold,
@@ -185,11 +196,12 @@ const getRawStyles = (colors) => ({
         width: 32,
         height: 32,
         borderRadius: 8,
-        backgroundColor: `${colors.white}26`,
+        backgroundColor: `${colors.white}2B`,
         alignItems: 'center',
         justifyContent: 'center',
         borderWidth: 1,
-        borderColor: `${colors.white}14`,
+        borderColor: `${colors.white}33`,
+        overflow: 'hidden',
     },
     fabWrapper: {
         position: 'absolute',
@@ -266,11 +278,16 @@ const getRawStyles = (colors) => ({
         backgroundColor: colors.primaryLight,
         borderWidth: 1.5,
         borderColor: colors.grayBorderSecondary,
-        shadowColor: colors.black,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.04,
-        shadowRadius: 2,
-        elevation: 1,
+        ...(react_native_1.Platform.OS === 'ios'
+            ? {
+                shadowColor: colors.black,
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.04,
+                shadowRadius: 2,
+            }
+            : {
+                elevation: 0,
+            }),
     },
     toolbarBtnActive: {
         borderColor: colors.purple,
@@ -447,18 +464,38 @@ const getRawStyles = (colors) => ({
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 9.5,
     },
+    domainProgressSection: {
+        marginTop: 8,
+        gap: 4,
+        width: '100%',
+    },
     domainProgressTrack: {
         flexDirection: 'row',
-        height: 2.5,
-        borderRadius: 1.25,
+        height: 4,
+        borderRadius: 2,
         overflow: 'hidden',
-        backgroundColor: 'rgba(148, 163, 184, 0.2)',
-        marginTop: 6,
+        backgroundColor: '#E2E8F0',
         width: '100%',
     },
     domainProgressSegment: {
         height: '100%',
     },
+    domainProgressLabelsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 2,
+    },
+    domainProgressRateText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: colors.grayTextStrong,
+    },
+    domainProgressSummaryText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 9,
+        color: colors.grayTextWeak,
+    },
     domainStatsGroup: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -572,21 +609,29 @@ const getRawStyles = (colors) => ({
         fontSize: 10,
     },
     methodBadge: {
-        paddingHorizontal: 6,
+        paddingHorizontal: 6.5,
         paddingVertical: 2.5,
-        borderRadius: 6,
+        borderRadius: 5,
         alignItems: 'center',
         justifyContent: 'center',
-        shadowColor: colors.black,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.08,
-        shadowRadius: 2,
-        elevation: 1,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.3)',
+        ...(react_native_1.Platform.OS === 'ios'
+            ? {
+                shadowColor: colors.black,
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.12,
+                shadowRadius: 2,
+            }
+            : {
+                elevation: 1,
+            }),
     },
     methodBadgeText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 9.5,
-        letterSpacing: 0.4,
+        letterSpacing: 0.6,
+        color: colors.white,
     },
     cardHostText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
@@ -615,13 +660,13 @@ const getRawStyles = (colors) => ({
         borderWidth: 1,
         borderColor: `${colors.brandPurple}18`,
         paddingHorizontal: 8,
-        paddingVertical: 5,
+        paddingVertical: 6,
         marginVertical: 5,
         gap: 6,
     },
     slugLeft: {
         flexDirection: 'row',
-        alignItems: 'center',
+        alignItems: 'flex-start',
         flex: 1,
         gap: 6,
     },
@@ -632,14 +677,16 @@ const getRawStyles = (colors) => ({
         letterSpacing: 0.5,
         backgroundColor: `${colors.brandPurple}15`,
         paddingHorizontal: 4,
-        paddingVertical: 1,
+        paddingVertical: 1.5,
         borderRadius: 4,
+        marginTop: 1,
     },
     slugText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11.5,
+        lineHeight: 15.5,
         color: colors.primaryBlack,
-        flexShrink: 1,
+        flex: 1,
     },
     slugRight: {
         flexDirection: 'row',

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

@@ -102,6 +102,9 @@ export interface NetworkLog {
     responseHeaders?: Record<string, string>;
     /** #9 — number of consecutive identical requests collapsed into this entry. */
     duplicateCount?: number;
+    /** Client identifier: axios, fetch, xhr, apollo, etc. */
+    client?: 'axios' | 'fetch' | 'xhr' | 'apollo' | 'graphql' | string;
+    caller?: string;
 }
 export interface RouteInfo {
     path: string;

package/dist/esm/components/AppHeaderLogo.js

@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import { Image, Platform, StyleSheet, View, } from 'react-native';
 import BrandSquareIcon from './BrandSquareIcon';
-import { AppColors } from '../styles/AppColors';
 export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
     const [loadError, setLoadError] = useState(false);
-    // 1. If customIcon is explicitly provided, render it directly
+    // 1. If customIcon is explicitly provided, render it directly edge-to-edge
     if (customIcon) {
         return (<View style={[logoStyles.container, { width: size, height: size }]}>
-        <Image source={customIcon} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover"/>
+        <Image source={customIcon} style={logoStyles.image} resizeMode="cover"/>
       </View>);
     }
     // 2. Dynamically query installed native app icon (AppIcon on iOS, ic_launcher on Android)
@@ -18,28 +17,26 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
             default: { uri: 'AppIcon' },
         });
         return (<View style={[logoStyles.container, { width: size, height: size }]}>
-        <Image source={nativeSource} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover" onError={() => setLoadError(true)}/>
+        <Image source={nativeSource} style={logoStyles.image} resizeMode="cover" onError={() => setLoadError(true)}/>
       </View>);
     }
     // 3. Fallback: Inspector's Signature Owl Brand Logo
     return (<View style={[logoStyles.container, { width: size, height: size }]}>
-      <BrandSquareIcon size={size - 4}/>
+      <BrandSquareIcon size={size}/>
     </View>);
 };
 const logoStyles = StyleSheet.create({
     container: {
+        borderRadius: 10,
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
         alignItems: 'center',
         justifyContent: 'center',
-        borderRadius: 12,
-        backgroundColor: `${AppColors.white}24`,
-        borderWidth: 1.5,
-        borderColor: `${AppColors.white}4D`,
-        overflow: 'hidden',
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.15,
-        shadowRadius: 4,
-        elevation: 3,
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 10,
     },
 });
 export default AppHeaderLogo;

package/dist/esm/components/ConsoleLogCard.js

@@ -3,10 +3,10 @@ import { useTranslation } from '../i18n';
 import { Pressable, StyleSheet, Text, View, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
-import { formatTime, getJsonContent, getJsonPreviewText, parseStackLine, } from '../helpers';
+import { formatTime, getJsonContent, getJsonPreviewText, parseStackLine, openInVSCode, } from '../helpers';
 import HighlightText from './HighlightText';
 import CopyButton from './CopyButton';
-import { ChevronIcon } from './NetworkIcons';
+import { ChevronIcon, ExternalLinkIcon } from './NetworkIcons';
 import { useInspector } from './Inspector/InspectorContext';
 const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
     if (!message)
@@ -226,18 +226,34 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
             <Text style={styles.footerText}>{formatTime(item.timestamp)}</Text>
             {parsedCaller && (<>
                 <View style={styles.footerDot}/>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, maxWidth: 170 }}>
+                <Pressable onPress={e => {
+                e.stopPropagation?.();
+                openInVSCode(parsedCaller.rawFilePath ||
+                    parsedCaller.fullPath ||
+                    parsedCaller.fileName, parsedCaller.lineNumber, parsedCaller.columnNumber);
+            }} hitSlop={8} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+                maxWidth: 185,
+                backgroundColor: `${AppColors.sky600}10`,
+                borderColor: `${AppColors.sky600}2B`,
+                borderWidth: 1,
+                borderRadius: 5,
+                paddingHorizontal: 5,
+                paddingVertical: 1.5,
+            }}>
                   {parsedCaller.fileExt && parsedCaller.fileExt !== 'other' && (<View style={{
                     backgroundColor: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
-                        ? `${AppColors.brandPurple}18`
-                        : `${AppColors.teal600}18`,
+                        ? `${AppColors.brandPurple}22`
+                        : `${AppColors.teal600}22`,
                     borderRadius: 3,
                     paddingHorizontal: 3.5,
-                    paddingVertical: 1,
+                    paddingVertical: 0.5,
                 }}>
                       <Text style={{
                     fontFamily: AppFonts.interBold,
-                    fontSize: 8.5,
+                    fontSize: 8,
                     color: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
                         ? AppColors.brandPurple
                         : AppColors.teal600,
@@ -245,11 +261,19 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                         {parsedCaller.fileExt.toUpperCase()}
                       </Text>
                     </View>)}
-                  <Text style={[styles.footerText, styles.footerCaller]} numberOfLines={1} ellipsizeMode="middle">
+                  <Text style={[
+                styles.footerText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    color: AppColors.sky600,
+                    fontSize: 9.5,
+                },
+            ]} numberOfLines={1} ellipsizeMode="middle">
                     {parsedCaller.fileName}
                     {parsedCaller.lineNumber ? `:${parsedCaller.lineNumber}` : ''}
                   </Text>
-                </View>
+                  <ExternalLinkIcon color={AppColors.sky600} size={8.5}/>
+                </Pressable>
               </>)}
           </View>
 

package/dist/esm/components/CopyButton.js

@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react';
+import { Share } from 'react-native';
 // Components
 import TouchableScale from './TouchableScale';
 // Helpers
@@ -16,6 +17,19 @@ const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
         setCopied(true);
         setTimeout(() => setCopied(false), 1200);
     }, [value, label]);
+    const handleLongPress = useCallback(() => {
+        try {
+            const resolvedValue = typeof value === 'function' ? value() : value;
+            const textToShare = typeof resolvedValue === 'string'
+                ? resolvedValue
+                : JSON.stringify(resolvedValue, null, 2);
+            Share.share({
+                message: textToShare,
+                title: label,
+            });
+        }
+        catch { }
+    }, [value, label]);
     const containerStyle = [
         styles.iconSquareBtn,
         copied && styles.iconSquareBtnSuccess,
@@ -25,7 +39,7 @@ const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
         : iconType === 'fetch'
             ? FetchIcon
             : CopyIcon;
-    return (<TouchableScale onPress={handlePress} hitSlop={12} style={containerStyle}>
+    return (<TouchableScale onPress={handlePress} onLongPress={handleLongPress} hitSlop={12} style={containerStyle}>
       {copied ? (<CheckIcon color={AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors.grayTextWeak} size={14}/>)}
     </TouchableScale>);
 });