react-native-inapp-inspector 1.1.28 → 1.1.29

package/dist/commonjs/helpers/index.js

@@ -1,7 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRuntimeDiagnostics = exports.getCategoryColors = exports.registerGAPlugin = exports.getEventCategory = exports.getEventColor = exports.ANALYTICS_EVENT_PALETTE = exports.parseStackLine = exports.getJsonPreviewText = exports.getJsonContent = exports.formatGap = exports.formatTime = exports.formatTimeShort = exports.handleOpenExternalLink = exports.getAppName = exports.getBundleIdentifier = exports.formatDateTimeToAnalytics = exports.isAllValuesEmpty = exports.getLocalizedFilePathWithSlash = exports.getLocalizedFilePath = exports.formatDisplayUrl = exports.getDiff = exports.flattenObject = exports.getNavigationInfo = exports.escapeRegex = exports.deduplicateLogs = exports.getFetchCommand = exports.getCurlCommand = exports.getBaseUrl = exports.getPath = exports.copyToClipboard = exports.getSize = exports.getDurationColor = exports.getStatusColor = exports.formatDateTime = exports.getDomainColor = void 0;
+exports.getRuntimeDiagnostics = exports.getCategoryColors = exports.registerGAPlugin = exports.getEventCategory = exports.getEventColor = exports.ANALYTICS_EVENT_PALETTE = exports.openInVSCode = exports.parseStackLine = exports.getJsonPreviewText = exports.getJsonContent = exports.formatGap = exports.formatTime = exports.formatTimeShort = exports.handleOpenExternalLink = exports.getAppName = exports.getBundleIdentifier = exports.formatDateTimeToAnalytics = exports.isAllValuesEmpty = exports.getLocalizedFilePathWithSlash = exports.getLocalizedFilePath = exports.formatDisplayUrl = exports.getDiff = exports.flattenObject = exports.getNavigationInfo = exports.escapeRegex = exports.deduplicateLogs = exports.getFetchCommand = exports.getCurlCommand = exports.getBaseUrl = exports.getPath = exports.copyToClipboard = exports.getSize = exports.getDurationColor = exports.getStatusColor = exports.formatTimestamp = exports.formatDateTime = exports.getDomainColor = void 0;
 const react_native_1 = require("react-native");
+const clipboard_1 = __importDefault(require("@react-native-clipboard/clipboard"));
+const toast_1 = require("./toast");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 // Constants
@@ -28,6 +33,20 @@ const formatDateTime = (timestamp) => {
     return `${day}/${month}/${year}  ${hours}:${minutes}:${seconds}`;
 };
 exports.formatDateTime = formatDateTime;
+const formatTimestamp = (timestamp) => {
+    try {
+        const date = new Date(timestamp);
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = date.getSeconds().toString().padStart(2, '0');
+        const ms = date.getMilliseconds().toString().padStart(3, '0');
+        return `${hours}:${minutes}:${seconds}.${ms}`;
+    }
+    catch {
+        return '—';
+    }
+};
+exports.formatTimestamp = formatTimestamp;
 const getStatusColor = (status) => {
     if (!status || status === 0)
         return AppColors_1.AppColors.errorColor;
@@ -60,104 +79,43 @@ const getSize = (data) => {
     }
 };
 exports.getSize = getSize;
-// Safely detect and load clipboard natively without static require() calls that Metro fails on
-const getClipboardModule = () => {
-    // 1. Check our built-in native module (NetworkInspectorModule)
-    try {
-        const tmReg = react_native_1.TurboModuleRegistry || globalThis.__turboModuleProxy;
-        const inspectorMod = react_native_1.NativeModules?.NetworkInspectorModule ||
-            (tmReg?.get ? tmReg.get('NetworkInspectorModule') : null);
-        if (inspectorMod && typeof inspectorMod.copyToClipboard === 'function') {
-            return {
-                setString: (str) => inspectorMod.copyToClipboard(str),
-                setStringAsync: (str) => inspectorMod.copyToClipboard(str),
-            };
-        }
+const copyToClipboard = (value, label) => {
+    const resolved = typeof value === 'function' ? value() : value;
+    let textToCopy = '';
+    if (typeof resolved === 'string') {
+        textToCopy = resolved;
     }
-    catch { }
-    // 2. Check TurboModuleRegistry (TurboModules / New Architecture)
-    try {
-        const tmReg = react_native_1.TurboModuleRegistry || globalThis.__turboModuleProxy;
-        if (tmReg?.get) {
-            const tm = tmReg.get('RNCClipboard') ||
-                tmReg.get('NativeClipboard') ||
-                tmReg.get('ExpoClipboard');
-            if (tm &&
-                (typeof tm.setString === 'function' ||
-                    typeof tm.setStringAsync === 'function')) {
-                return tm;
-            }
+    else {
+        try {
+            textToCopy = JSON.stringify(resolved, null, 2);
+        }
+        catch {
+            textToCopy = String(resolved);
         }
     }
-    catch { }
-    // 3. Check legacy NativeModules table (Bridge / Old Architecture)
+    // Use @react-native-clipboard/clipboard npm package
     try {
-        if (react_native_1.NativeModules?.RNCClipboard &&
-            typeof react_native_1.NativeModules.RNCClipboard.setString === 'function') {
-            return react_native_1.NativeModules.RNCClipboard;
-        }
-        if (react_native_1.NativeModules?.ExpoClipboard &&
-            typeof react_native_1.NativeModules.ExpoClipboard.setStringAsync === 'function') {
-            return react_native_1.NativeModules.ExpoClipboard;
+        if (typeof clipboard_1.default?.setString === 'function') {
+            clipboard_1.default.setString(textToCopy);
         }
-        if (react_native_1.NativeModules?.Clipboard &&
-            typeof react_native_1.NativeModules.Clipboard.setString === 'function') {
-            return react_native_1.NativeModules.Clipboard;
+        else if (typeof clipboard_1.default?.default?.setString === 'function') {
+            clipboard_1.default.default.setString(textToCopy);
         }
     }
-    catch { }
-    // 4. Check legacy React Native core Clipboard
-    try {
-        if (react_native_1.Clipboard && typeof react_native_1.Clipboard.setString === 'function') {
-            return react_native_1.Clipboard;
+    catch (err) {
+        if (__DEV__) {
+            console.warn('[NetworkInspector] Clipboard.setString failed:', err);
         }
     }
-    catch { }
-    return null;
-};
-const copyToClipboard = (value, label) => {
-    const resolved = typeof value === 'function' ? value() : value;
-    const text = typeof resolved === 'string' ? resolved : JSON.stringify(resolved, null, 2);
-    const textToCopy = text ?? '';
-    let copied = false;
+    // Trigger floating in-app bottom toast notification
     try {
-        const cb = getClipboardModule();
-        if (cb) {
-            if (typeof cb.setStringAsync === 'function') {
-                cb.setStringAsync(textToCopy);
-                copied = true;
-            }
-            else if (typeof cb.setString === 'function') {
-                cb.setString(textToCopy);
-                copied = true;
-            }
-        }
+        (0, toast_1.showToast)(label ? `${label} copied to clipboard` : 'Copied to clipboard');
     }
     catch { }
-    // Built-in native module direct invocation
-    if (!copied) {
-        try {
-            const inspectorMod = react_native_1.NativeModules?.NetworkInspectorModule;
-            if (inspectorMod && typeof inspectorMod.copyToClipboard === 'function') {
-                inspectorMod.copyToClipboard(textToCopy);
-                copied = true;
-            }
-        }
-        catch { }
-    }
-    if (!copied) {
-        try {
-            if (typeof navigator !== 'undefined' && navigator?.clipboard?.writeText) {
-                navigator.clipboard.writeText(textToCopy);
-                copied = true;
-            }
-        }
-        catch { }
-    }
-    // Visual toast feedback on Android if ToastAndroid exists
+    // Native Android Toast fallback
     try {
         if (react_native_1.Platform.OS === 'android' && react_native_1.ToastAndroid?.show) {
-            react_native_1.ToastAndroid.show(`${label} copied`, react_native_1.ToastAndroid.SHORT);
+            react_native_1.ToastAndroid.show(label ? `${label} copied to clipboard` : 'Copied to clipboard', react_native_1.ToastAndroid.SHORT);
         }
     }
     catch { }
@@ -566,11 +524,16 @@ const parseStackLine = (rawLine, isOrigin = false) => {
         (functionName === 'next' && isNative);
     const isDependency = cleanPath.includes('node_modules') ||
         cleanPath.includes('react-native/Libraries') ||
-        (cleanPath.includes('react-native-inapp-inspector') && !cleanPath.includes('/example/'));
+        (cleanPath.includes('react-native-inapp-inspector') &&
+            !cleanPath.includes('/example/'));
     const isUserCode = !isNative &&
         !isInternalBytecode &&
         !isDependency &&
-        (fileExt === 'tsx' || fileExt === 'jsx' || fileExt === 'ts' || fileExt === 'js' || !fileName.includes('.bundle'));
+        (fileExt === 'tsx' ||
+            fileExt === 'jsx' ||
+            fileExt === 'ts' ||
+            fileExt === 'js' ||
+            !fileName.includes('.bundle'));
     const frameType = isUserCode
         ? 'app'
         : isDependency
@@ -578,7 +541,10 @@ const parseStackLine = (rawLine, isOrigin = false) => {
             : isNative
                 ? 'native'
                 : 'runtime';
-    const isRuntimeNoise = isInternalBytecode || isNative || functionName === 'asyncGeneratorStep' || functionName === '_next';
+    const isRuntimeNoise = isInternalBytecode ||
+        isNative ||
+        functionName === 'asyncGeneratorStep' ||
+        functionName === '_next';
     // Format clean relative project path
     let relativePath = cleanPath;
     if (relativePath.includes('/example/')) {
@@ -598,6 +564,7 @@ const parseStackLine = (rawLine, isOrigin = false) => {
         functionName,
         fileName,
         fullPath: relativePath,
+        rawFilePath: fullPath,
         fileExt,
         frameType,
         isUserCode,
@@ -609,6 +576,31 @@ const parseStackLine = (rawLine, isOrigin = false) => {
     };
 };
 exports.parseStackLine = parseStackLine;
+/** Opens a file and line number directly in VS Code */
+const openInVSCode = (filePath, lineNumber, columnNumber) => {
+    const line = lineNumber ? `:${lineNumber}` : '';
+    const col = columnNumber ? `:${columnNumber}` : '';
+    const cleanPath = filePath.replace(/^file:\/\//, '');
+    const vscodeUrl = `vscode://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    react_native_1.Linking.canOpenURL(vscodeUrl)
+        .then(supported => {
+        if (supported) {
+            react_native_1.Linking.openURL(vscodeUrl);
+        }
+        else {
+            react_native_1.Linking.openURL(vscodeUrl).catch(() => {
+                const insidersUrl = `vscode-insiders://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+                react_native_1.Linking.openURL(insidersUrl).catch(() => {
+                    react_native_1.Alert.alert('Open in VS Code', `Target location:\n${cleanPath}${line}${col}\n\nPlease ensure VS Code is installed.`, [{ text: 'OK' }]);
+                });
+            });
+        }
+    })
+        .catch(() => {
+        react_native_1.Linking.openURL(vscodeUrl).catch(() => { });
+    });
+};
+exports.openInVSCode = openInVSCode;
 // ─── Analytics Helpers ────────────────────────────────────────────────────────
 exports.ANALYTICS_EVENT_PALETTE = [
     AppColors_1.AppColors.googleBlue,
@@ -667,7 +659,11 @@ exports.getCategoryColors = getCategoryColors;
 const getRuntimeDiagnostics = () => {
     const isHermes = typeof global.HermesInternal !== 'undefined';
     const isV8 = typeof global._v8runtime !== 'undefined';
-    const engineType = isHermes ? 'hermes' : isV8 ? 'v8' : 'jsc';
+    const engineType = isHermes
+        ? 'hermes'
+        : isV8
+            ? 'v8'
+            : 'jsc';
     const isFabric = typeof global.nativeFabricUIManager !== 'undefined' ||
         Boolean(global.__turboModuleProxy);
     const archType = isFabric ? 'fabric' : 'paper';
@@ -677,11 +673,14 @@ const getRuntimeDiagnostics = () => {
         const hermesStats = global.HermesInternal?.getInstrumentedStats?.();
         if (hermesStats?.js_heap_size) {
             usedHeapMb = Number((hermesStats.js_heap_size / (1024 * 1024)).toFixed(1));
-            totalAllocMb = Number(((hermesStats.js_allocated_bytes || hermesStats.js_heap_size * 1.6) / (1024 * 1024)).toFixed(1));
+            totalAllocMb = Number(((hermesStats.js_allocated_bytes || hermesStats.js_heap_size * 1.6) /
+                (1024 * 1024)).toFixed(1));
         }
         else if (global.performance?.memory?.usedJSHeapSize) {
-            usedHeapMb = Number((global.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1));
-            totalAllocMb = Number((global.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1));
+            usedHeapMb = Number((global.performance.memory.usedJSHeapSize /
+                (1024 * 1024)).toFixed(1));
+            totalAllocMb = Number((global.performance.memory.totalJSHeapSize /
+                (1024 * 1024)).toFixed(1));
         }
     }
     catch { }

package/dist/commonjs/helpers/toast.d.ts

@@ -0,0 +1,4 @@
+type ToastListener = (message: string) => void;
+export declare const showToast: (message: string) => void;
+export declare const subscribeToast: (listener: ToastListener) => () => void;
+export {};

package/dist/commonjs/helpers/toast.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToast = exports.showToast = void 0;
+const listeners = new Set();
+const showToast = (message) => {
+    listeners.forEach(fn => {
+        try {
+            fn(message);
+        }
+        catch { }
+    });
+};
+exports.showToast = showToast;
+const subscribeToast = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+exports.subscribeToast = subscribeToast;

package/dist/commonjs/i18n/locales/en.json

@@ -15,7 +15,10 @@
         "expandAll": "Expand All",
         "viewOnNpm": "View on NPM",
         "later": "Later",
-        "source": "SOURCE"
+        "source": "SOURCE",
+        "open": "Open",
+        "openInBrowser": "Open in Browser",
+        "openInBrowserPrompt": "Are you sure you want to open this URL in your external browser?"
     },
     "header": {
         "updateAvailableTitle": "Update Available",

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;

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,

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;