react-native-inapp-inspector 2.0.5 → 2.0.7

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

@@ -0,0 +1,560 @@
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Text, View, } from 'react-native';
+import Svg, { Circle, Path, Rect } from 'react-native-svg';
+import TouchableScale from '../TouchableScale';
+import { AppFonts } from '../../styles/AppFonts';
+import { saveSettings } from '../../helpers/settingsStore';
+import { CheckIcon, CloseWhite } from '../NetworkIcons';
+// ─── SVG Icons for Walkthrough Steps ──────────────────────────────────────────
+const ModulesIconSvg = ({ size = 18, color = '#818CF8', }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="3" y="3" width="7.5" height="7.5" rx="2" fill="rgba(129, 140, 248, 0.2)" stroke={color} strokeWidth="2"/>
+    <Rect x="13.5" y="3" width="7.5" height="7.5" rx="2" fill="rgba(129, 140, 248, 0.2)" stroke={color} strokeWidth="2"/>
+    <Rect x="3" y="13.5" width="7.5" height="7.5" rx="2" fill="rgba(129, 140, 248, 0.2)" stroke={color} strokeWidth="2"/>
+    <Rect x="13.5" y="13.5" width="7.5" height="7.5" rx="2" fill="rgba(129, 140, 248, 0.2)" stroke={color} strokeWidth="2"/>
+  </Svg>);
+const SettingsGearIconSvg = ({ size = 18, color = '#818CF8', }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2" fill="rgba(129, 140, 248, 0.2)"/>
+    <Path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const DetailWorkbenchIconSvg = ({ size = 18, color = '#818CF8', }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M16 18l6-6-6-6M8 6l-6 6 6 6" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const NetworkGlobeIconSvg = ({ size = 18, color = '#818CF8', }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="12" r="9.5" stroke={color} strokeWidth="2" fill="rgba(129, 140, 248, 0.15)"/>
+    <Path d="M2.5 12h19M12 2.5a14.5 14.5 0 013.8 9.5 14.5 14.5 0 01-3.8 9.5 14.5 14.5 0 01-3.8-9.5 14.5 14.5 0 013.8-9.5z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const SearchFiltersIconSvg = ({ size = 18, color = '#818CF8', }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="11" cy="11" r="7.5" stroke={color} strokeWidth="2" fill="rgba(129, 140, 248, 0.15)"/>
+    <Path d="M20.5 20.5l-4.2-4.2" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const SkipIconSvg = ({ size = 12, color = '#CBD5E1', }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M5 4l10 8-10 8V4zM19 5v14" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const NextArrowSvg = ({ size = 12, color = '#FFFFFF', }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M5 12h14M12 5l7 7-7 7" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const BackArrowSvg = ({ size = 12, color = '#E0E7FF', }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const PointerTopSvg = ({ align, offset = 24 }) => {
+    const containerStyle = [
+        styles.pointerSvgTop,
+        align === 'left' && { left: offset },
+        align === 'center' && { alignSelf: 'center' },
+        align === 'right' && { right: offset },
+    ];
+    return (<View style={containerStyle} pointerEvents="none">
+      <Svg width={20} height={10} viewBox="0 0 20 10">
+        <Path d="M0 10 L10 1 L20 10" fill="#13182C" stroke="rgba(129, 140, 248, 0.5)" strokeWidth="1.2"/>
+        <Path d="M1 10 L19 10" stroke="#13182C" strokeWidth="2.5"/>
+      </Svg>
+    </View>);
+};
+const PointerBottomSvg = ({ align, offset = 24 }) => {
+    const containerStyle = [
+        styles.pointerSvgBottom,
+        align === 'left' && { left: offset },
+        align === 'center' && { alignSelf: 'center' },
+        align === 'right' && { right: offset },
+    ];
+    return (<View style={containerStyle} pointerEvents="none">
+      <Svg width={20} height={10} viewBox="0 0 20 10">
+        <Path d="M0 0 L10 9 L20 0" fill="#13182C" stroke="rgba(129, 140, 248, 0.5)" strokeWidth="1.2"/>
+        <Path d="M1 0 L19 0" stroke="#13182C" strokeWidth="2.5"/>
+      </Svg>
+    </View>);
+};
+const TOOLTIP_STEPS = [
+    {
+        id: 'developer-modules',
+        stepNumber: 1,
+        totalSteps: 5,
+        badge: '1/5 • DEVELOPER MODULES',
+        iconComponent: <ModulesIconSvg size={18} color="#A5B4FC"/>,
+        title: '10+ Developer Tool Modules',
+        description: 'Switch seamlessly across Network APIs, Console Logs, Analytics event streams, Redux state trees, AsyncStorage/MMKV viewer, Device hardware/OS specs, and Performance audits.',
+        pointerPosition: 'top',
+        pointerAlign: 'left',
+        pointerOffset: 36,
+        cardTop: 108,
+        highlightBox: {
+            top: 54,
+            left: 8,
+            right: 8,
+            height: 46,
+            borderRadius: 10,
+        },
+    },
+    {
+        id: 'settings-hud',
+        stepNumber: 2,
+        totalSteps: 5,
+        badge: '2/5 • SETTINGS & CONTROLS',
+        iconComponent: <SettingsGearIconSvg size={18} color="#A5B4FC"/>,
+        title: 'Settings, RAM Limits & Live HUD',
+        description: 'Configure RAM-based auto limits to prevent memory bloat, customize tab ordering, toggle Dark/Light theme, and enable the live 60 FPS floating HUD overlay for on-screen performance monitoring.',
+        pointerPosition: 'top',
+        pointerAlign: 'right',
+        pointerOffset: 58,
+        cardTop: 56,
+        highlightBox: {
+            top: 8,
+            right: 52,
+            width: 38,
+            height: 38,
+            borderRadius: 10,
+        },
+    },
+    {
+        id: 'request-replay',
+        stepNumber: 3,
+        totalSteps: 5,
+        badge: '3/5 • DETAIL INSPECTOR & WORKBENCH',
+        iconComponent: <DetailWorkbenchIconSvg size={18} color="#A5B4FC"/>,
+        title: 'Deep Detail Pages & Replay Sandbox',
+        description: 'Tap any item to inspect syntax-highlighted JSON trees, payload diffs, full headers, and stack traces. Tap the Replay icon to launch the isolated Edit & Resend workbench.',
+        pointerPosition: 'top',
+        pointerAlign: 'center',
+        cardTop: 272,
+        highlightBox: {
+            top: 176,
+            left: 10,
+            right: 10,
+            height: 88,
+            borderRadius: 12,
+        },
+    },
+    {
+        id: 'network-apis',
+        stepNumber: 4,
+        totalSteps: 5,
+        badge: '4/5 • NETWORK TELEMETRY',
+        iconComponent: <NetworkGlobeIconSvg size={18} color="#A5B4FC"/>,
+        title: 'Real-Time Network Telemetry',
+        description: 'Zero-config auto-interception for Fetch, Axios, and XHR. Inspect round-trip latency, status codes, query params, headers, and colorized JSON response trees with instant cURL export.',
+        pointerPosition: 'top',
+        pointerAlign: 'left',
+        pointerOffset: 46,
+        cardTop: 106,
+        highlightBox: {
+            top: 57,
+            left: 12,
+            width: 92,
+            height: 38,
+            borderRadius: 10,
+        },
+    },
+    {
+        id: 'search-filters',
+        stepNumber: 5,
+        totalSteps: 5,
+        badge: '5/5 • SEARCH & SMART FILTERS',
+        iconComponent: <SearchFiltersIconSvg size={18} color="#A5B4FC"/>,
+        title: 'Instant Search & Status Filters',
+        description: 'Filter network traffic and logs instantly by status (2xx OK, Errors, Slow >500ms), regex expressions, or deep content matching across URLs, headers, and JSON keys.',
+        pointerPosition: 'top',
+        pointerAlign: 'center',
+        cardTop: 182,
+        highlightBox: {
+            top: 102,
+            left: 10,
+            right: 10,
+            height: 72,
+            borderRadius: 12,
+        },
+    },
+];
+export const FirstTimeWalkthroughModal = ({ visible, onClose }) => {
+    const [currentStepIndex, setCurrentStepIndex] = useState(0);
+    const [dontShowAgain, setDontShowAgain] = useState(true);
+    React.useEffect(() => {
+        if (visible) {
+            setCurrentStepIndex(0);
+        }
+    }, [visible]);
+    if (!visible)
+        return null;
+    const currentStep = TOOLTIP_STEPS[currentStepIndex];
+    const isLastStep = currentStepIndex === TOOLTIP_STEPS.length - 1;
+    const handleFinish = async () => {
+        if (dontShowAgain) {
+            try {
+                await saveSettings({ hasCompletedWalkthrough: true });
+            }
+            catch {
+                // Safe fallback
+            }
+        }
+        onClose();
+    };
+    const handleNext = () => {
+        if (isLastStep) {
+            handleFinish();
+        }
+        else {
+            setCurrentStepIndex(prev => prev + 1);
+        }
+    };
+    const handlePrevious = () => {
+        if (currentStepIndex > 0) {
+            setCurrentStepIndex(prev => prev - 1);
+        }
+    };
+    return (<View style={styles.backdrop} pointerEvents="box-none">
+      {/* Semi-transparent Dimming Layer */}
+      <Pressable style={styles.scrim} onPress={handleFinish}/>
+
+      {/* Spotlight Halo Box around targeted UI element */}
+      {currentStep.highlightBox && (<View style={[
+                styles.spotlightRing,
+                {
+                    top: currentStep.highlightBox.top,
+                    bottom: currentStep.highlightBox.bottom,
+                    left: currentStep.highlightBox.left,
+                    right: currentStep.highlightBox.right,
+                    width: currentStep.highlightBox.width,
+                    height: currentStep.highlightBox.height,
+                    borderRadius: currentStep.highlightBox.borderRadius || 12,
+                },
+            ]} pointerEvents="none"/>)}
+
+      {/* Contextual Tooltip Balloon Card */}
+      <View style={[
+            styles.tooltipCard,
+            currentStep.cardTop != null && { top: currentStep.cardTop },
+            currentStep.cardBottom != null && { bottom: currentStep.cardBottom },
+        ]}>
+        {/* Seamless SVG Pointer Beak (Pointing Up towards target) */}
+        {currentStep.pointerPosition === 'top' && (<PointerTopSvg align={currentStep.pointerAlign} offset={currentStep.pointerOffset}/>)}
+
+        {/* ─── 1. TOP HEADER & CONTROLS ─── */}
+        <View style={styles.cardHeader}>
+          <View style={styles.badgePill}>
+            <View style={styles.badgeDot}/>
+            <Text style={styles.badgeText}>{currentStep.badge}</Text>
+          </View>
+
+          <View style={styles.topActions}>
+            <TouchableScale style={styles.skipHeaderBtn} onPress={handleFinish} hitSlop={8}>
+              <SkipIconSvg size={11} color="#CBD5E1"/>
+              <Text style={styles.skipHeaderText}>Skip Tour</Text>
+            </TouchableScale>
+
+            <TouchableScale style={styles.closeBtn} onPress={handleFinish} hitSlop={10}>
+              <CloseWhite size={11} color="#CBD5E1"/>
+            </TouchableScale>
+          </View>
+        </View>
+
+        {/* ─── 2. TITLE & DESCRIPTION ─── */}
+        <View style={styles.contentSection}>
+          <View style={styles.titleRow}>
+            <View style={styles.iconContainer}>
+              {currentStep.iconComponent}
+            </View>
+            <Text style={styles.titleText} numberOfLines={1}>
+              {currentStep.title}
+            </Text>
+          </View>
+          <Text style={styles.descriptionText}>{currentStep.description}</Text>
+        </View>
+
+        {/* ─── 3. FOOTER (DOTS & NAVIGATION ACTIONS) ─── */}
+        <View style={styles.footerRow}>
+          {/* Progress Dots Indicator */}
+          <View style={styles.dotsContainer}>
+            {TOOLTIP_STEPS.map((s, idx) => (<Pressable key={s.id} onPress={() => setCurrentStepIndex(idx)} hitSlop={6}>
+                <View style={[
+                styles.dot,
+                currentStepIndex === idx && styles.dotActive,
+            ]}/>
+              </Pressable>))}
+          </View>
+
+          {/* Action Buttons */}
+          <View style={styles.btnGroup}>
+            {currentStepIndex > 0 && (<TouchableScale style={styles.backBtn} onPress={handlePrevious} hitSlop={6}>
+                <BackArrowSvg size={11} color="#E0E7FF"/>
+                <Text style={styles.backBtnText}>Back</Text>
+              </TouchableScale>)}
+
+            <TouchableScale style={[
+            styles.nextBtn,
+            isLastStep && styles.nextBtnFinal,
+        ]} onPress={handleNext} hitSlop={6}>
+              <Text style={styles.nextBtnText}>
+                {isLastStep ? 'Got It 🚀' : 'Next'}
+              </Text>
+              {!isLastStep && <NextArrowSvg size={11} color="#FFFFFF"/>}
+            </TouchableScale>
+          </View>
+        </View>
+
+        {/* Don't show again toggle */}
+        <TouchableScale style={styles.dontShowRow} onPress={() => setDontShowAgain(prev => !prev)} hitSlop={6}>
+          <View style={[
+            styles.checkbox,
+            dontShowAgain && styles.checkboxActive,
+        ]}>
+            {dontShowAgain && <CheckIcon size={9} color="#FFFFFF"/>}
+          </View>
+          <Text style={styles.dontShowText}>
+            Don't show tour on startup
+          </Text>
+        </TouchableScale>
+
+        {/* Seamless SVG Pointer Beak (Pointing Down towards target) */}
+        {currentStep.pointerPosition === 'bottom' && (<PointerBottomSvg align={currentStep.pointerAlign} offset={currentStep.pointerOffset}/>)}
+      </View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 999999,
+        elevation: 999999,
+    },
+    scrim: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.72)',
+    },
+    spotlightRing: {
+        position: 'absolute',
+        borderWidth: 2,
+        borderColor: '#818CF8', // Electric neon violet/indigo
+        backgroundColor: 'rgba(99, 102, 241, 0.18)',
+        shadowColor: '#818CF8',
+        shadowOpacity: 0.9,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 0 },
+        zIndex: 1000000,
+        elevation: 1000000,
+    },
+    tooltipCard: {
+        position: 'absolute',
+        left: 12,
+        right: 12,
+        backgroundColor: '#13182C', // Luxurious Deep Space Navy Indigo
+        borderRadius: 16,
+        paddingHorizontal: 16,
+        paddingTop: 14,
+        paddingBottom: 13,
+        shadowColor: '#000000',
+        shadowOpacity: 0.6,
+        shadowRadius: 20,
+        shadowOffset: { width: 0, height: 10 },
+        elevation: 24,
+        zIndex: 1000001,
+        borderWidth: 1.2,
+        borderColor: 'rgba(129, 140, 248, 0.45)', // Neon Indigo glowing border
+    },
+    pointerSvgTop: {
+        position: 'absolute',
+        top: -9,
+        zIndex: 1000002,
+    },
+    pointerSvgBottom: {
+        position: 'absolute',
+        bottom: -9,
+        zIndex: 1000002,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 10,
+    },
+    badgePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        backgroundColor: 'rgba(99, 102, 241, 0.22)',
+        paddingHorizontal: 9,
+        paddingVertical: 3.5,
+        borderRadius: 7,
+        borderWidth: 0.8,
+        borderColor: 'rgba(165, 180, 252, 0.35)',
+    },
+    badgeDot: {
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
+        backgroundColor: '#818CF8',
+    },
+    badgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#E0E7FF',
+        letterSpacing: 0.6,
+    },
+    topActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    skipHeaderBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        paddingHorizontal: 8,
+        paddingVertical: 3.5,
+        borderRadius: 6,
+        borderWidth: 0.8,
+        borderColor: 'rgba(255, 255, 255, 0.14)',
+    },
+    skipHeaderIcon: {
+        fontSize: 9.5,
+    },
+    skipHeaderText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
+        color: '#CBD5E1',
+    },
+    closeBtn: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 0.8,
+        borderColor: 'rgba(255, 255, 255, 0.14)',
+    },
+    contentSection: {
+        marginBottom: 12,
+    },
+    titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 6,
+    },
+    iconContainer: {
+        width: 28,
+        height: 28,
+        borderRadius: 7,
+        backgroundColor: 'rgba(99, 102, 241, 0.28)',
+        borderWidth: 0.8,
+        borderColor: 'rgba(165, 180, 252, 0.25)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    titleEmoji: {
+        fontSize: 15,
+    },
+    titleText: {
+        flex: 1,
+        fontFamily: AppFonts.interBold,
+        fontSize: 15,
+        color: '#FFFFFF',
+        letterSpacing: -0.2,
+    },
+    descriptionText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12.5,
+        color: '#CBD5E1', // Clean slate-300
+        lineHeight: 18.5,
+    },
+    footerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingTop: 10,
+        borderTopWidth: 1,
+        borderTopColor: 'rgba(255, 255, 255, 0.12)',
+        marginBottom: 10,
+    },
+    dotsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    },
+    dotActive: {
+        width: 18,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: '#818CF8', // Neon active pill
+    },
+    btnGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    backBtn: {
+        paddingHorizontal: 11,
+        paddingVertical: 7,
+        borderRadius: 8,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        borderWidth: 0.8,
+        borderColor: 'rgba(255, 255, 255, 0.14)',
+    },
+    backBtnText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: '#E0E7FF',
+    },
+    nextBtn: {
+        backgroundColor: '#6366F1', // Royal Indigo
+        paddingHorizontal: 16,
+        paddingVertical: 7.5,
+        borderRadius: 8,
+        shadowColor: '#6366F1',
+        shadowOpacity: 0.45,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+    },
+    nextBtnFinal: {
+        backgroundColor: '#10B981', // Emerald green
+        shadowColor: '#10B981',
+    },
+    nextBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: '#FFFFFF',
+    },
+    dontShowRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        alignSelf: 'flex-start',
+    },
+    checkbox: {
+        width: 14,
+        height: 14,
+        borderRadius: 3.5,
+        borderWidth: 1.2,
+        borderColor: 'rgba(165, 180, 252, 0.5)',
+        backgroundColor: 'transparent',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkboxActive: {
+        backgroundColor: '#6366F1',
+        borderColor: '#6366F1',
+    },
+    dontShowText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10.5,
+        color: '#94A3B8',
+    },
+});
+export default FirstTimeWalkthroughModal;

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

@@ -14,7 +14,7 @@ import { getTelemetryConsentStatus } from '../../helpers/telemetry';
 import { UpdateAvailableModal } from './UpdateAvailableModal';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, deviceInfo, } = useInspector();
     const [showUpdateModal, setShowUpdateModal] = React.useState(false);
     const [isTelemetryActive, setIsTelemetryActive] = React.useState(false);
     const telemetryPulseAnim = React.useRef(new Animated.Value(1)).current;
@@ -264,38 +264,44 @@ const InspectorHeader = React.memo(() => {
                       </Pressable>)}
                   </View>
 
-                  {/* OS & NPM Version Representation */}
+                  {/* OS & NPM Version Common Chip Bar */}
                   <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 5,
                 minWidth: 0,
             }}>
+                    {/* Unified Platform & Build Chip */}
                     <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                backgroundColor: `${AppColors.white}1F`,
-                borderRadius: 5,
-                paddingHorizontal: 6,
-                paddingVertical: 2,
-                gap: 4,
+                backgroundColor: 'rgba(255, 255, 255, 0.16)',
+                borderRadius: 6,
+                paddingHorizontal: 6.5,
+                paddingVertical: 2.5,
+                gap: 4.5,
                 borderWidth: 1,
-                borderColor: `${AppColors.white}2E`,
+                borderColor: 'rgba(255, 255, 255, 0.28)',
                 flexShrink: 0,
             }}>
-                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={10}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={10}/>)}
+                      {Platform.OS === 'ios' ? (<AppleIcon color="#FFFFFF" size={10.5}/>) : (<AndroidIcon color="#FFFFFF" size={10.5}/>)}
                       <Text style={{
-                fontFamily: AppFonts.interMedium,
+                fontFamily: AppFonts.interBold,
                 fontSize: 9.5,
-                color: `${AppColors.white}EB`,
+                color: '#FFFFFF',
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
                         {Platform.OS === 'ios'
-                ? `iOS ${Platform.Version}`
-                : `Android ${Platform.Version}`}
+                ? `iOS ${String(deviceInfo?.osVersion || Platform.Version).replace(/^(ios\s*)+/i, '').trim()}${deviceInfo?.buildNumber || deviceInfo?.appVersion
+                    ? ` (${deviceInfo.buildNumber || deviceInfo.appVersion})`
+                    : ''}`
+                : `Android ${String(deviceInfo?.osVersion || Platform.Version).replace(/^(android\s*)+/i, '').trim()}${deviceInfo?.buildNumber || deviceInfo?.appVersion
+                    ? ` (${deviceInfo.buildNumber || deviceInfo.appVersion})`
+                    : ''}`}
                       </Text>
                     </View>
 
+                    {/* Unified NPM Version Chip */}
                     <Pressable onPress={() => {
                 if (updateAvailable) {
                     setShowUpdateModal(true);
@@ -304,26 +310,23 @@ const InspectorHeader = React.memo(() => {
                     Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
                 }
             }} style={{
-                backgroundColor: '#FFFFFF',
-                borderRadius: 5,
-                paddingHorizontal: 6,
-                paddingVertical: 2,
+                backgroundColor: 'rgba(255, 255, 255, 0.16)',
+                borderRadius: 6,
+                paddingHorizontal: 6.5,
+                paddingVertical: 2.5,
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 4,
+                borderWidth: 1,
+                borderColor: 'rgba(255, 255, 255, 0.28)',
                 flexShrink: 0,
-                shadowColor: '#000000',
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.15,
-                shadowRadius: 2,
-                elevation: 2,
             }}>
-                      <NpmIcon size={11} color="#CB3837"/>
+                      <NpmIcon size={11} color="#FF6B6B"/>
                       <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 9.5,
-                color: '#CB3837',
-                letterSpacing: 0.2,
+                color: '#FFFFFF',
+                letterSpacing: 0.15,
             }} numberOfLines={1}>
                         v{LIB_VERSION}
                       </Text>