react-native-inapp-inspector 2.0.5 → 2.0.7

package/dist/commonjs/components/Inspector/DeviceTab.js

@@ -0,0 +1,717 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceTab = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
+const NetworkIcons_1 = require("../NetworkIcons");
+const NativeInspector_1 = require("../../native/NativeInspector");
+exports.DeviceTab = react_1.default.memo(() => {
+    const { deviceInfo } = (0, InspectorContext_1.useInspector)();
+    const [activeSubTab, setActiveSubTab] = (0, react_1.useState)('overview');
+    const [nativeMetrics, setNativeMetrics] = (0, react_1.useState)(null);
+    const [search, setSearch] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (0, NativeInspector_1.getNativeDeviceMetrics)().then(metrics => {
+            if (!cancelled && metrics) {
+                setNativeMetrics(metrics);
+            }
+        }).catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const deviceId = nativeMetrics?.deviceId || deviceInfo.deviceId || 'UNKNOWN-DEVICE-ID';
+    const handleCopyDeviceId = () => {
+        (0, helpers_1.copyToClipboard)(deviceId, 'Device ID');
+        (0, toast_1.showToast)('Copied Device ID to clipboard!');
+    };
+    const handleCopyDiagnostics = () => {
+        const fullReport = {
+            ...deviceInfo,
+            deviceId,
+            nativeMetrics: nativeMetrics || undefined,
+        };
+        (0, helpers_1.copyToClipboard)(JSON.stringify(fullReport, null, 2), 'Device Diagnostics Report');
+        (0, toast_1.showToast)('Copied full system diagnostics!');
+    };
+    // Sub-tabs list
+    const subTabs = [
+        { key: 'overview', label: 'Overview', icon: 'device' },
+        { key: 'hardware', label: 'Hardware', icon: 'cpu' },
+        { key: 'display', label: 'Display', icon: 'monitor' },
+        { key: 'runtime', label: 'Runtime', icon: 'code' },
+        { key: 'raw', label: 'Raw JSON', icon: 'raw' },
+    ];
+    const InfoRow = ({ label, value, badge, badgeColor, copyable, }) => {
+        const strVal = value !== undefined && value !== null ? String(value) : '—';
+        return (<react_native_1.View style={styles.infoRow}>
+        <react_native_1.Text style={styles.infoLabel}>{label}</react_native_1.Text>
+        <react_native_1.View style={styles.infoValueRow}>
+          {badge && (<react_native_1.View style={[
+                    styles.inlineBadge,
+                    {
+                        backgroundColor: badgeColor
+                            ? `${badgeColor}18`
+                            : `${AppColors_1.AppColors.purple}18`,
+                        borderColor: badgeColor
+                            ? `${badgeColor}40`
+                            : `${AppColors_1.AppColors.purple}40`,
+                    },
+                ]}>
+              <react_native_1.Text style={[
+                    styles.inlineBadgeText,
+                    { color: badgeColor || AppColors_1.AppColors.purple },
+                ]}>
+                {badge}
+              </react_native_1.Text>
+            </react_native_1.View>)}
+          <react_native_1.Text style={styles.infoValue} numberOfLines={2}>
+            {strVal}
+          </react_native_1.Text>
+          {copyable && strVal !== '—' && (<TouchableScale_1.default onPress={() => {
+                    (0, helpers_1.copyToClipboard)(strVal, label);
+                    (0, toast_1.showToast)(`Copied ${label}!`);
+                }} style={styles.inlineCopyBtn}>
+              <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.purple}/>
+            </TouchableScale_1.default>)}
+        </react_native_1.View>
+      </react_native_1.View>);
+    };
+    // Filtered raw json representation
+    const rawReportJson = (0, react_1.useMemo)(() => {
+        const data = {
+            deviceId,
+            platform: deviceInfo.platform,
+            deviceModel: deviceInfo.deviceModel,
+            osVersion: deviceInfo.osVersion,
+            appName: deviceInfo.appName,
+            bundleId: deviceInfo.bundleId,
+            appVersion: deviceInfo.appVersion,
+            buildNumber: deviceInfo.buildNumber,
+            reactNativeVersion: deviceInfo.reactNativeVersion,
+            jsEngine: deviceInfo.jsEngine,
+            isHermes: deviceInfo.isHermes,
+            isFabric: deviceInfo.isFabric,
+            isTurboModule: deviceInfo.isTurboModule,
+            arch: deviceInfo.arch,
+            screenWidth: deviceInfo.screenWidth,
+            screenHeight: deviceInfo.screenHeight,
+            screenScale: deviceInfo.screenScale,
+            screenFontScale: deviceInfo.screenFontScale,
+            statusBarHeight: deviceInfo.statusBarHeight,
+            locale: deviceInfo.locale,
+            timeZone: deviceInfo.timeZone,
+            isDevice: deviceInfo.isDevice,
+            nativeMetrics: nativeMetrics || undefined,
+        };
+        if (!search || search.trim().length === 0) {
+            return JSON.stringify(data, null, 2);
+        }
+        const q = search.toLowerCase();
+        const filtered = {};
+        for (const [k, v] of Object.entries(data)) {
+            if (k.toLowerCase().includes(q) ||
+                String(JSON.stringify(v)).toLowerCase().includes(q)) {
+                filtered[k] = v;
+            }
+        }
+        return JSON.stringify(filtered, null, 2);
+    }, [deviceInfo, deviceId, nativeMetrics, search]);
+    return (<react_native_1.View style={styles.container}>
+      {/* ─── Top Segmented Tab Layout ────────────────────────────────────────── */}
+      <react_native_1.View style={styles.tabBarWrapper}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.subTabBarContainer}>
+          {subTabs.map(tab => {
+            const isTabActive = activeSubTab === tab.key;
+            const iconColor = isTabActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText;
+            return (<TouchableScale_1.default key={tab.key} onPress={() => setActiveSubTab(tab.key)} style={[
+                    styles.subTabButton,
+                    isTabActive && styles.subTabButtonActive,
+                ]}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                  {tab.key === 'overview' && <NetworkIcons_1.DevicePhoneIcon size={12} color={iconColor}/>}
+                  {tab.key === 'hardware' && <NetworkIcons_1.CpuIcon size={12} color={iconColor}/>}
+                  {tab.key === 'display' && <NetworkIcons_1.MonitorIcon size={12} color={iconColor}/>}
+                  {tab.key === 'runtime' && <NetworkIcons_1.CodeIcon size={12} color={iconColor}/>}
+                  {tab.key === 'raw' && <NetworkIcons_1.CopyIcon size={12} color={iconColor}/>}
+                  <react_native_1.Text style={[
+                    styles.subTabText,
+                    isTabActive && styles.subTabTextActive,
+                ]}>
+                    {tab.label}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      <react_native_1.ScrollView style={styles.scrollArea} contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false}>
+        {/* ─── Hero Device ID Banner (Universal across tabs) ───────────────────── */}
+        <react_native_1.View style={styles.deviceIdHeroCard}>
+          <react_native_1.View style={styles.deviceIdHeader}>
+            <react_native_1.View style={styles.deviceIdBadgeRow}>
+              <react_native_1.View style={styles.platformBadge}>
+                {deviceInfo.platform === 'ios' ? (<NetworkIcons_1.AppleIcon size={14} color={AppColors_1.AppColors.purple}/>) : (<NetworkIcons_1.AndroidIcon size={14} color={AppColors_1.AppColors.purple}/>)}
+                <react_native_1.Text style={styles.platformBadgeText}>
+                  {deviceInfo.platform === 'ios' ? 'Apple iOS' : 'Google Android'}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.idTypeBadge}>
+                <NetworkIcons_1.FingerprintIcon size={12} color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={styles.idTypeBadgeText}>
+                  {deviceInfo.platform === 'ios' ? 'IDFV / Vendor ID' : 'Android ID'}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <TouchableScale_1.default onPress={handleCopyDeviceId} style={styles.copyIdPill}>
+              <NetworkIcons_1.CopyIcon size={11} color={AppColors_1.AppColors.white}/>
+              <react_native_1.Text style={styles.copyIdPillText}>Copy ID</react_native_1.Text>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+
+          <react_native_1.Text style={styles.deviceIdValue} selectable numberOfLines={1}>
+            {deviceId}
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        {/* ─── 1. OVERVIEW SUB-TAB ─────────────────────────────────────────────── */}
+        {activeSubTab === 'overview' && (<>
+            <react_native_1.View style={styles.headerBanner}>
+              <react_native_1.View style={styles.headerLeft}>
+                <react_native_1.View style={styles.deviceIconBox}>
+                  {deviceInfo.platform === 'ios' ? (<NetworkIcons_1.AppleIcon size={22} color={AppColors_1.AppColors.purple}/>) : (<NetworkIcons_1.AndroidIcon size={22} color={AppColors_1.AppColors.purple}/>)}
+                </react_native_1.View>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={styles.deviceTitle}>{deviceInfo.deviceModel}</react_native_1.Text>
+                  <react_native_1.Text style={styles.deviceSubtitle}>{deviceInfo.osVersion}</react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              <TouchableScale_1.default onPress={handleCopyDiagnostics} style={styles.copyDiagnosticsBtn}>
+                <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.white}/>
+                <react_native_1.Text style={styles.copyDiagnosticsText}>Copy Report</react_native_1.Text>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+
+            {/* Quick Spec Matrix */}
+            <react_native_1.View style={styles.matrixGrid}>
+              <react_native_1.View style={styles.matrixCard}>
+                <react_native_1.Text style={styles.matrixLabel}>ENGINE</react_native_1.Text>
+                <react_native_1.Text style={styles.matrixValue}>{deviceInfo.jsEngine}</react_native_1.Text>
+                <react_native_1.Text style={styles.matrixSub}>
+                  {deviceInfo.isHermes ? '⚡ Bytecode' : 'JIT Runtime'}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.matrixCard}>
+                <react_native_1.Text style={styles.matrixLabel}>ARCHITECTURE</react_native_1.Text>
+                <react_native_1.Text style={styles.matrixValue}>
+                  {deviceInfo.isFabric ? 'Fabric' : 'Paper'}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles.matrixSub}>
+                  {deviceInfo.arch || 'arm64'}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.matrixCard}>
+                <react_native_1.Text style={styles.matrixLabel}>REACT NATIVE</react_native_1.Text>
+                <react_native_1.Text style={styles.matrixValue}>v{deviceInfo.reactNativeVersion}</react_native_1.Text>
+                <react_native_1.Text style={styles.matrixSub}>Framework</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.matrixCard}>
+                <react_native_1.Text style={styles.matrixLabel}>DISPLAY</react_native_1.Text>
+                <react_native_1.Text style={styles.matrixValue}>
+                  {deviceInfo.screenWidth}×{deviceInfo.screenHeight}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles.matrixSub}>@{deviceInfo.screenScale}x Density</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* App Overview Summary */}
+            <react_native_1.View style={styles.card}>
+              <react_native_1.View style={styles.cardTitleRow}>
+                <NetworkIcons_1.CodeIcon size={14} color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={styles.cardTitle}>APPLICATION IDENTITY</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.cardBody}>
+                <InfoRow label="Application Name" value={deviceInfo.appName} copyable/>
+                <InfoRow label="Bundle / Package ID" value={deviceInfo.bundleId} copyable/>
+                <InfoRow label="Version" value={`${deviceInfo.appVersion} (${deviceInfo.buildNumber})`}/>
+                <InfoRow label="Environment" value={deviceInfo.isDevice ? 'Physical Hardware Device' : 'Simulator / Emulator'} badge={deviceInfo.isDevice ? 'Physical' : 'Simulator'} badgeColor={deviceInfo.isDevice ? AppColors_1.AppColors.emerald600 : AppColors_1.AppColors.purple}/>
+              </react_native_1.View>
+            </react_native_1.View>
+          </>)}
+
+        {/* ─── 2. HARDWARE SUB-TAB ─────────────────────────────────────────────── */}
+        {activeSubTab === 'hardware' && (<>
+            <react_native_1.View style={styles.card}>
+              <react_native_1.View style={styles.cardTitleRow}>
+                <NetworkIcons_1.CpuIcon size={15} color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={styles.cardTitle}>HARDWARE & IDENTIFIERS</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.cardBody}>
+                <InfoRow label="Device Model" value={deviceInfo.deviceModel} copyable/>
+                <InfoRow label="Platform OS" value={deviceInfo.osVersion}/>
+                <InfoRow label="Device ID" value={deviceId} copyable/>
+                <InfoRow label="CPU Architecture" value={deviceInfo.arch || nativeMetrics?.cpuAbi || 'arm64'}/>
+                {nativeMetrics?.apiLevel !== undefined && (<InfoRow label="Android API Level" value={`API ${nativeMetrics.apiLevel}`}/>)}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Memory / RAM */}
+            <react_native_1.View style={styles.card}>
+              <react_native_1.View style={styles.cardTitleRow}>
+                <NetworkIcons_1.CpuIcon size={15} color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={styles.cardTitle}>SYSTEM MEMORY & RAM</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.cardBody}>
+                {nativeMetrics?.totalRAM ? (<>
+                    <InfoRow label="Total RAM" value={(0, helpers_1.formatBytes)(nativeMetrics.totalRAM)}/>
+                    <InfoRow label="Available Free RAM" value={nativeMetrics.freeRAM ? (0, helpers_1.formatBytes)(nativeMetrics.freeRAM) : '—'} badge={nativeMetrics.isLowMemory ? 'Low Memory' : 'Healthy'} badgeColor={nativeMetrics.isLowMemory ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.emerald600}/>
+                  </>) : (<InfoRow label="JS Heap Limit" value={deviceInfo.memoryMb ? `${deviceInfo.memoryMb} MB` : 'Dynamic Runtime'}/>)}
+                {nativeMetrics?.residentMemory ? (<InfoRow label="App Resident Memory" value={(0, helpers_1.formatBytes)(nativeMetrics.residentMemory)}/>) : null}
+                {nativeMetrics?.nativeHeapAllocated ? (<InfoRow label="Native Heap Allocated" value={(0, helpers_1.formatBytes)(nativeMetrics.nativeHeapAllocated)}/>) : null}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Storage & Power */}
+            <react_native_1.View style={styles.card}>
+              <react_native_1.View style={styles.cardTitleRow}>
+                <NetworkIcons_1.DevicePhoneIcon size={15} color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={styles.cardTitle}>STORAGE & BATTERY</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.cardBody}>
+                {nativeMetrics?.totalStorage ? (<InfoRow label="Total Storage" value={(0, helpers_1.formatBytes)(nativeMetrics.totalStorage)}/>) : null}
+                {nativeMetrics?.freeStorage ? (<InfoRow label="Free Disk Space" value={(0, helpers_1.formatBytes)(nativeMetrics.freeStorage)}/>) : null}
+                {nativeMetrics?.batteryPercent !== undefined && (<InfoRow label="Battery Level" value={`${Math.round(nativeMetrics.batteryPercent)}%`} badge={nativeMetrics.isCharging ? 'Charging' : 'Discharging'} badgeColor={nativeMetrics.isCharging ? AppColors_1.AppColors.emerald600 : AppColors_1.AppColors.purple}/>)}
+                <InfoRow label="Hardware Type" value={deviceInfo.isDevice ? 'Physical Device' : 'Virtual Simulator'}/>
+              </react_native_1.View>
+            </react_native_1.View>
+          </>)}
+
+        {/* ─── 3. DISPLAY SUB-TAB ──────────────────────────────────────────────── */}
+        {activeSubTab === 'display' && (<react_native_1.View style={styles.card}>
+            <react_native_1.View style={styles.cardTitleRow}>
+              <NetworkIcons_1.MonitorIcon size={15} color={AppColors_1.AppColors.purple}/>
+              <react_native_1.Text style={styles.cardTitle}>DISPLAY & VIEWPORT METRICS</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles.cardBody}>
+              <InfoRow label="Logical Resolution" value={`${deviceInfo.screenWidth} × ${deviceInfo.screenHeight} dp`} copyable/>
+              <InfoRow label="Physical Pixels" value={`${Math.round(deviceInfo.screenWidth * deviceInfo.screenScale)} × ${Math.round(deviceInfo.screenHeight * deviceInfo.screenScale)} px`}/>
+              <InfoRow label="Pixel Density Scale" value={`@${deviceInfo.screenScale}x (${Math.round(deviceInfo.screenScale * 160)} dpi)`} badge={`@${deviceInfo.screenScale}x`} badgeColor={AppColors_1.AppColors.purple}/>
+              <InfoRow label="Font Scaling Factor" value={`${deviceInfo.screenFontScale}x`}/>
+              <InfoRow label="Status Bar Inset" value={`${deviceInfo.statusBarHeight} px`}/>
+              <InfoRow label="Aspect Ratio" value={`${(deviceInfo.screenHeight / deviceInfo.screenWidth).toFixed(2)} : 1`}/>
+            </react_native_1.View>
+          </react_native_1.View>)}
+
+        {/* ─── 4. RUNTIME SUB-TAB ──────────────────────────────────────────────── */}
+        {activeSubTab === 'runtime' && (<>
+            <react_native_1.View style={styles.card}>
+              <react_native_1.View style={styles.cardTitleRow}>
+                <NetworkIcons_1.CodeIcon size={15} color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={styles.cardTitle}>JAVASCRIPT & CORE RUNTIME</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.cardBody}>
+                <InfoRow label="JS Engine" value={deviceInfo.isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)'} badge={deviceInfo.isHermes ? 'Hermes' : 'JSC'} badgeColor={deviceInfo.isHermes ? AppColors_1.AppColors.emerald600 : AppColors_1.AppColors.purple}/>
+                <InfoRow label="React Native" value={`v${deviceInfo.reactNativeVersion}`} copyable/>
+                <InfoRow label="New Architecture" value={deviceInfo.isFabric ? 'Enabled (Fabric C++)' : 'Disabled (Paper)'} badge={deviceInfo.isFabric ? 'Fabric' : 'Paper'} badgeColor={deviceInfo.isFabric ? AppColors_1.AppColors.emerald600 : AppColors_1.AppColors.grayTextWeak}/>
+                <InfoRow label="TurboModules" value={deviceInfo.isTurboModule ? 'Active' : 'Disabled'}/>
+                <InfoRow label="CPU Architecture" value={deviceInfo.arch || 'arm64'}/>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.card}>
+              <react_native_1.View style={styles.cardTitleRow}>
+                <react_native_1.Text style={styles.cardTitle}>INTERNATIONALIZATION & LOCALE</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.cardBody}>
+                <InfoRow label="Timezone" value={deviceInfo.timeZone || 'UTC'} copyable/>
+                <InfoRow label="Locale Identifier" value={deviceInfo.locale || 'en_US'} copyable/>
+              </react_native_1.View>
+            </react_native_1.View>
+          </>)}
+
+        {/* ─── 5. RAW JSON SUB-TAB ─────────────────────────────────────────────── */}
+        {activeSubTab === 'raw' && (<react_native_1.View style={styles.card}>
+            <react_native_1.View style={styles.rawHeaderRow}>
+              <react_native_1.View style={styles.rawSearchBox}>
+                <NetworkIcons_1.SearchIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
+                <react_native_1.TextInput style={styles.rawSearchInput} value={search} onChangeText={setSearch} placeholder="Filter JSON fields..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+                {search.length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')}>
+                    <NetworkIcons_1.ClearIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
+                  </TouchableScale_1.default>)}
+              </react_native_1.View>
+
+              <TouchableScale_1.default onPress={handleCopyDiagnostics} style={styles.copyDiagnosticsBtn}>
+                <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.white}/>
+                <react_native_1.Text style={styles.copyDiagnosticsText}>Copy All</react_native_1.Text>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+
+            <react_native_1.ScrollView horizontal style={styles.rawScroll}>
+              <react_native_1.Text style={styles.rawText} selectable>
+                {rawReportJson}
+              </react_native_1.Text>
+            </react_native_1.ScrollView>
+          </react_native_1.View>)}
+
+        <react_native_1.View style={{ height: 40 }}/>
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    tabBarWrapper: {
+        backgroundColor: AppColors_1.AppColors.contentBg,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
+        paddingVertical: 8,
+    },
+    subTabBarContainer: {
+        paddingHorizontal: 12,
+        flexDirection: 'row',
+        gap: 8,
+        alignItems: 'center',
+    },
+    subTabButton: {
+        paddingHorizontal: 14,
+        paddingVertical: 7,
+        borderRadius: 20,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    subTabButtonActive: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    subTabText: {
+        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        color: AppColors_1.AppColors.grayText,
+    },
+    subTabTextActive: {
+        color: AppColors_1.AppColors.white,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
+    scrollArea: {
+        flex: 1,
+    },
+    contentContainer: {
+        padding: 12,
+    },
+    deviceIdHeroCard: {
+        backgroundColor: AppColors_1.AppColors.contentBg,
+        borderRadius: 14,
+        padding: 14,
+        marginBottom: 12,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}30`,
+        shadowColor: AppColors_1.AppColors.purple,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.06,
+        shadowRadius: 6,
+        elevation: 2,
+    },
+    deviceIdHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+    },
+    deviceIdBadgeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    platformBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}30`,
+    },
+    platformBadgeText: {
+        fontSize: 11,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.purple,
+    },
+    idTypeBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: `${AppColors_1.AppColors.purple}10`,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    idTypeBadgeText: {
+        fontSize: 11,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        color: AppColors_1.AppColors.purple,
+    },
+    copyIdPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.purple,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 14,
+    },
+    copyIdPillText: {
+        fontSize: 11,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.white,
+    },
+    deviceIdValue: {
+        fontSize: 12,
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        color: AppColors_1.AppColors.black,
+        letterSpacing: 0.5,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 8,
+    },
+    headerBanner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: AppColors_1.AppColors.contentBg,
+        borderRadius: 14,
+        padding: 14,
+        marginBottom: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        flex: 1,
+    },
+    deviceIconBox: {
+        width: 44,
+        height: 44,
+        borderRadius: 12,
+        backgroundColor: `${AppColors_1.AppColors.purple}15`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    deviceTitle: {
+        fontSize: 15,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.black,
+    },
+    deviceSubtitle: {
+        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        color: AppColors_1.AppColors.grayText,
+        marginTop: 2,
+    },
+    copyDiagnosticsBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        backgroundColor: AppColors_1.AppColors.purple,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 8,
+    },
+    copyDiagnosticsText: {
+        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.white,
+    },
+    matrixGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 12,
+    },
+    matrixCard: {
+        flex: 1,
+        minWidth: '47%',
+        backgroundColor: AppColors_1.AppColors.contentBg,
+        borderRadius: 12,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    matrixLabel: {
+        fontSize: 10,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+        marginBottom: 4,
+    },
+    matrixValue: {
+        fontSize: 14,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.black,
+        marginBottom: 2,
+    },
+    matrixSub: {
+        fontSize: 11,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        color: AppColors_1.AppColors.purple,
+    },
+    card: {
+        backgroundColor: AppColors_1.AppColors.contentBg,
+        borderRadius: 14,
+        padding: 14,
+        marginBottom: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    cardTitleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginBottom: 12,
+        paddingBottom: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    cardTitle: {
+        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+    },
+    cardBody: {
+        gap: 10,
+    },
+    infoRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 3,
+        gap: 8,
+    },
+    infoLabel: {
+        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        color: AppColors_1.AppColors.grayText,
+        flexShrink: 0,
+    },
+    infoValueRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flex: 1,
+        justifyContent: 'flex-end',
+    },
+    infoValue: {
+        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        color: AppColors_1.AppColors.black,
+        textAlign: 'right',
+        flexShrink: 1,
+    },
+    inlineBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    inlineBadgeText: {
+        fontSize: 10,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
+    inlineCopyBtn: {
+        padding: 3,
+        borderRadius: 4,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+    },
+    rawHeaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+        marginBottom: 12,
+    },
+    rawSearchBox: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    rawSearchInput: {
+        flex: 1,
+        fontSize: 12,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        color: AppColors_1.AppColors.black,
+        paddingVertical: 0,
+    },
+    rawScroll: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 10,
+        padding: 10,
+    },
+    rawText: {
+        fontSize: 11,
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        color: AppColors_1.AppColors.black,
+        lineHeight: 16,
+    },
+});
+exports.default = exports.DeviceTab;