react-native-inapp-inspector 2.2.2 → 2.2.4

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

@@ -0,0 +1,835 @@
+"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.DeviceInfoTab = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const i18n_1 = require("../../i18n");
+const NetworkIcons_1 = require("../NetworkIcons");
+const NativeInspector_1 = require("../../native/NativeInspector");
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
+const constants_1 = require("../../constants");
+const InfoRow = react_1.default.memo(({ label, value, copyable = true, badge, subtext, isLast = false }) => {
+    const displayValue = value === null || value === undefined
+        ? '—'
+        : typeof value === 'boolean'
+            ? value
+                ? 'Yes'
+                : 'No'
+            : String(value);
+    return (<react_native_1.View style={[
+            styles.infoRow,
+            isLast && { borderBottomWidth: 0 },
+        ]}>
+        <react_native_1.View style={{ flex: 1, paddingRight: 8 }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <react_native_1.Text style={styles.infoLabel}>{label}</react_native_1.Text>
+            {badge && (<react_native_1.View style={[
+                styles.infoBadge,
+                { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
+            ]}>
+                <react_native_1.Text style={[styles.infoBadgeText, { color: badge.color }]}>
+                  {badge.text}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>
+          {subtext && <react_native_1.Text style={styles.infoSubtext}>{subtext}</react_native_1.Text>}
+        </react_native_1.View>
+        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <react_native_1.Text style={[
+            styles.infoValue,
+            typeof value === 'boolean' && {
+                color: value ? AppColors_1.AppColors.emerald500 : AppColors_1.AppColors.errorColor,
+            },
+        ]} numberOfLines={2} selectable>
+            {displayValue}
+          </react_native_1.Text>
+          {copyable && value !== null && value !== undefined && (<TouchableScale_1.default hitSlop={8} onPress={() => {
+                (0, helpers_1.copyToClipboard)(displayValue, label);
+                (0, toast_1.showToast)(`Copied ${label}`);
+            }} style={styles.rowCopyBtn}>
+              <NetworkIcons_1.CopyIcon size={11} color={AppColors_1.AppColors.grayTextWeak}/>
+            </TouchableScale_1.default>)}
+        </react_native_1.View>
+      </react_native_1.View>);
+});
+exports.DeviceInfoTab = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.useTranslation)();
+    const [activeSubTab, setActiveSubTab] = (0, react_1.useState)('overview');
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [deviceMetrics, setDeviceMetrics] = (0, react_1.useState)(null);
+    const [systemMetrics, setSystemMetrics] = (0, react_1.useState)(null);
+    const [ipAddress, setIpAddress] = (0, react_1.useState)('Detecting...');
+    const [deviceUptime, setDeviceUptime] = (0, react_1.useState)('0s');
+    const startTimeRef = react_1.default.useRef(Date.now());
+    // Load hardware metrics and IP
+    const fetchMetrics = (0, react_1.useCallback)(async () => {
+        try {
+            const [devMetrics, sysMetrics] = await Promise.all([
+                (0, NativeInspector_1.getNativeDeviceMetrics)(),
+                (0, NativeInspector_1.getNativeSystemMetrics)(),
+            ]);
+            setDeviceMetrics(devMetrics);
+            setSystemMetrics(sysMetrics);
+        }
+        catch {
+            // Fallback
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        fetchMetrics();
+        const interval = setInterval(fetchMetrics, 3000);
+        return () => clearInterval(interval);
+    }, [fetchMetrics]);
+    // Probe local IP address
+    (0, react_1.useEffect)(() => {
+        let isMounted = true;
+        const probeIp = async () => {
+            // 1. Try NativeModules or PlatformConstants
+            try {
+                const serverHost = react_native_1.NativeModules?.PlatformConstants?.serverHost ||
+                    react_native_1.NativeModules?.AndroidConstants?.serverHost ||
+                    react_native_1.NativeModules?.DevSettings?.serverHost;
+                if (serverHost && typeof serverHost === 'string') {
+                    const cleanHost = serverHost.split(':')[0].replace(/https?:\/\//, '');
+                    if (cleanHost && cleanHost !== 'localhost' && cleanHost !== '127.0.0.1') {
+                        if (isMounted)
+                            setIpAddress(cleanHost);
+                        return;
+                    }
+                }
+            }
+            catch { }
+            // 2. Query dynamic candidate ip endpoints
+            try {
+                const controller = new AbortController();
+                const timer = setTimeout(() => controller.abort(), 1200);
+                const res = await fetch('https://api.ipify.org?format=json', {
+                    signal: controller.signal,
+                });
+                clearTimeout(timer);
+                if (res.ok) {
+                    const data = await res.json();
+                    if (data && data.ip && isMounted) {
+                        setIpAddress(data.ip);
+                        return;
+                    }
+                }
+            }
+            catch { }
+            if (isMounted) {
+                setIpAddress(react_native_1.Platform.OS === 'android' ? '10.0.2.15 (Local)' : '127.0.0.1 (Local)');
+            }
+        };
+        probeIp();
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+    // Calculate Uptime
+    (0, react_1.useEffect)(() => {
+        const updateUptime = () => {
+            const diffSec = Math.floor((Date.now() - startTimeRef.current) / 1000);
+            const hours = Math.floor(diffSec / 3600);
+            const mins = Math.floor((diffSec % 3600) / 60);
+            const secs = diffSec % 60;
+            if (hours > 0) {
+                setDeviceUptime(`${hours}h ${mins}m ${secs}s`);
+            }
+            else if (mins > 0) {
+                setDeviceUptime(`${mins}m ${secs}s`);
+            }
+            else {
+                setDeviceUptime(`${secs}s`);
+            }
+        };
+        const timer = setInterval(updateUptime, 1000);
+        updateUptime();
+        return () => clearInterval(timer);
+    }, []);
+    // Screen Geometry
+    const windowDims = react_native_1.Dimensions.get('window');
+    const screenDims = react_native_1.Dimensions.get('screen');
+    const pixelRatio = react_native_1.PixelRatio.get();
+    const fontScale = react_native_1.PixelRatio.getFontScale();
+    const isTablet = windowDims.width >= 600 || windowDims.height >= 1000;
+    const isLandscape = windowDims.width > windowDims.height;
+    const statusBarHeight = react_native_1.Platform.OS === 'android'
+        ? react_native_1.StatusBar.currentHeight || 24
+        : (windowDims.height >= 812 ? 44 : 20);
+    // Pseudo-UDID deterministic identifier
+    const pseudoUDID = (0, react_1.useMemo)(() => {
+        const raw = `${react_native_1.Platform.OS}-${react_native_1.Platform.Version}-${screenDims.width}x${screenDims.height}-${pixelRatio}-${react_native_1.Platform.constants?.Brand || 'generic'}`;
+        let hash = 0;
+        for (let i = 0; i < raw.length; i++) {
+            hash = (hash << 5) - hash + raw.charCodeAt(i);
+            hash |= 0;
+        }
+        const hex = Math.abs(hash).toString(16).padStart(8, '0');
+        return `UDID-${react_native_1.Platform.OS.toUpperCase()}-${hex.slice(0, 4)}-${hex.slice(4, 8)}-${Date.now().toString(16).slice(-4)}`.toUpperCase();
+    }, [screenDims.width, screenDims.height, pixelRatio]);
+    // Hermes & TurboModule engine status
+    const isHermes = Boolean(global?.HermesInternal);
+    const isTurboModule = Boolean(globalThis?.__turboModuleProxy);
+    const reactNativeVersion = (0, react_1.useMemo)(() => {
+        const v = react_native_1.Platform.constants?.reactNativeVersion;
+        if (v) {
+            return `${v.major}.${v.minor}.${v.patch}${v.prerelease != null ? `-${v.prerelease}` : ''}`;
+        }
+        return '0.74+';
+    }, []);
+    const totalRamMb = deviceMetrics?.totalRAM
+        ? Math.round(deviceMetrics.totalRAM / (1024 * 1024))
+        : systemMetrics?.totalPhysicalRamMb || 4096;
+    const freeRamMb = deviceMetrics?.freeRAM
+        ? Math.round(deviceMetrics.freeRAM / (1024 * 1024))
+        : Math.max(0, totalRamMb - (systemMetrics?.residentRamMb || 1200));
+    const usedRamMb = Math.max(0, totalRamMb - freeRamMb);
+    const ramUsagePct = totalRamMb > 0 ? Math.round((usedRamMb / totalRamMb) * 100) : 45;
+    const totalStorageGb = deviceMetrics?.totalStorage
+        ? (deviceMetrics.totalStorage / (1024 * 1024 * 1024)).toFixed(1)
+        : '128.0';
+    const freeStorageGb = deviceMetrics?.freeStorage
+        ? (deviceMetrics.freeStorage / (1024 * 1024 * 1024)).toFixed(1)
+        : '64.2';
+    // Sub-Tab Definitions
+    const subTabs = (0, react_1.useMemo)(() => [
+        {
+            key: 'overview',
+            label: 'Overview',
+            icon: (c) => <NetworkIcons_1.LayersIcon size={12} color={c}/>,
+        },
+        {
+            key: 'hardware',
+            label: 'Hardware',
+            icon: (c) => <NetworkIcons_1.CpuIcon size={12} color={c}/>,
+        },
+        {
+            key: 'network',
+            label: 'Network & IP',
+            icon: (c) => <NetworkIcons_1.WifiIcon size={12} color={c}/>,
+        },
+        {
+            key: 'display',
+            label: 'Display',
+            icon: (c) => <NetworkIcons_1.ScreenIcon size={12} color={c}/>,
+        },
+        {
+            key: 'runtime',
+            label: 'Runtime & App',
+            icon: (c) => <NetworkIcons_1.BoltIcon size={12} color={c}/>,
+        },
+        {
+            key: 'security',
+            label: 'Security & IDs',
+            icon: (c) => <NetworkIcons_1.KeyIcon size={12} color={c}/>,
+        },
+    ], []);
+    // Full device JSON export
+    const fullDeviceData = (0, react_1.useMemo)(() => ({
+        identifiers: {
+            pseudoUDID,
+            bundleId: deviceMetrics?.appBundleId || deviceMetrics?.appPackageName || 'com.app.inspector',
+        },
+        hardware: {
+            model: deviceMetrics?.deviceModel || react_native_1.Platform.constants?.Model || 'Unknown Device',
+            brand: deviceMetrics?.deviceBrand || react_native_1.Platform.constants?.Brand || (react_native_1.Platform.OS === 'ios' ? 'Apple' : 'Android'),
+            osVersion: `${react_native_1.Platform.OS} ${react_native_1.Platform.Version}`,
+            apiLevel: deviceMetrics?.apiLevel || react_native_1.Platform.constants?.Version || null,
+            cpuAbi: deviceMetrics?.cpuAbi || react_native_1.Platform.constants?.ServerHost || 'arm64-v8a',
+            totalRamMb,
+            freeRamMb,
+            usedRamMb,
+            totalStorageGb: `${totalStorageGb} GB`,
+            freeStorageGb: `${freeStorageGb} GB`,
+            batteryPercent: deviceMetrics?.batteryPercent ?? 100,
+            isCharging: deviceMetrics?.isCharging ?? false,
+        },
+        network: {
+            ipAddress,
+            isWifi: true,
+            reachability: 'Online',
+        },
+        display: {
+            windowWidth: windowDims.width,
+            windowHeight: windowDims.height,
+            screenWidth: screenDims.width,
+            screenHeight: screenDims.height,
+            pixelRatio,
+            fontScale,
+            statusBarHeight,
+            isTablet,
+            orientation: isLandscape ? 'Landscape' : 'Portrait',
+        },
+        runtime: {
+            appName: (0, helpers_1.getAppName)(),
+            appVersion: deviceMetrics?.appVersion || '1.0.0',
+            appBuild: deviceMetrics?.appBuild || '1',
+            reactNativeVersion,
+            inspectorVersion: constants_1.LIB_VERSION,
+            isHermes,
+            isTurboModule,
+            isDev: __DEV__,
+            jsEngine: isHermes ? 'Hermes' : 'JSC',
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            locale: Intl.DateTimeFormat().resolvedOptions().locale,
+            sessionUptime: deviceUptime,
+        },
+    }), [
+        pseudoUDID,
+        deviceMetrics,
+        totalRamMb,
+        freeRamMb,
+        usedRamMb,
+        totalStorageGb,
+        freeStorageGb,
+        ipAddress,
+        windowDims,
+        screenDims,
+        pixelRatio,
+        fontScale,
+        statusBarHeight,
+        isTablet,
+        isLandscape,
+        reactNativeVersion,
+        isHermes,
+        isTurboModule,
+        deviceUptime,
+    ]);
+    const handleExportJson = () => {
+        (0, helpers_1.copyToClipboard)(JSON.stringify(fullDeviceData, null, 2), 'Device Full Report');
+        (0, toast_1.showToast)('Copied Full Device JSON Report!');
+    };
+    const handleExportMarkdown = () => {
+        const md = `# Device Information Report
+**Generated by React Native In-App Inspector v${constants_1.LIB_VERSION}**
+
+## 📱 Hardware & System
+- **Device Model:** ${fullDeviceData.hardware.model}
+- **Brand / Manufacturer:** ${fullDeviceData.hardware.brand}
+- **OS Version:** ${fullDeviceData.hardware.osVersion}
+- **CPU Architecture:** ${fullDeviceData.hardware.cpuAbi}
+- **Total RAM:** ${totalRamMb} MB (Free: ${freeRamMb} MB)
+- **Total Storage:** ${totalStorageGb} GB (Free: ${freeStorageGb} GB)
+- **Battery:** ${fullDeviceData.hardware.batteryPercent}% (${fullDeviceData.hardware.isCharging ? 'Charging' : 'Unplugged'})
+
+## 🌐 Network & Connectivity
+- **IP Address:** ${ipAddress}
+- **Status:** Online
+
+## 🖥 Display & Geometry
+- **Resolution:** ${screenDims.width} × ${screenDims.height} pt (@${pixelRatio}x)
+- **Form Factor:** ${isTablet ? 'Tablet' : 'Phone'} (${isLandscape ? 'Landscape' : 'Portrait'})
+- **Status Bar Height:** ${statusBarHeight} pt
+
+## ⚙️ Runtime & App
+- **App Name:** ${fullDeviceData.runtime.appName}
+- **App Version:** ${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})
+- **React Native:** v${reactNativeVersion}
+- **JS Engine:** ${isHermes ? 'Hermes' : 'JSC'} (Bridgeless TurboModule: ${isTurboModule ? 'Yes' : 'No'})
+- **Environment:** ${__DEV__ ? 'Development (__DEV__)' : 'Production (Release)'}
+- **Timezone:** ${fullDeviceData.runtime.timezone}
+- **Session Uptime:** ${deviceUptime}
+
+## 🔑 Identifiers & Security
+- **Pseudo-UDID:** \`${pseudoUDID}\`
+- **Bundle ID:** \`${fullDeviceData.identifiers.bundleId}\`
+`;
+        (0, helpers_1.copyToClipboard)(md, 'Device Markdown Report');
+        (0, toast_1.showToast)('Copied Markdown Report to Clipboard!');
+    };
+    // Filter items matching search
+    const isMatch = (text) => {
+        if (!search.trim())
+            return true;
+        return text.toLowerCase().includes(search.toLowerCase().trim());
+    };
+    return (<react_native_1.View style={styles.container}>
+      {/* ─── Top Sub-Tabs Navigation Bar ─── */}
+      <react_native_1.View style={styles.subTabsWrapper}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.subTabsContainer}>
+          {subTabs.map(tab => {
+            const isActive = activeSubTab === tab.key;
+            const color = isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText;
+            return (<TouchableScale_1.default key={tab.key} onPress={() => setActiveSubTab(tab.key)} style={[styles.subTabPill, isActive && styles.subTabPillActive]}>
+                {tab.icon(color)}
+                <react_native_1.Text style={[
+                    styles.subTabPillText,
+                    isActive && styles.subTabPillTextActive,
+                ]}>
+                  {tab.label}
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {/* ─── Search & Export Action Bar ─── */}
+      <react_native_1.View style={styles.actionBar}>
+        <react_native_1.View style={styles.searchBar}>
+          <NetworkIcons_1.SearchIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
+          <react_native_1.TextInput value={search} onChangeText={setSearch} placeholder="Search specs, UDID, IP, screen..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={styles.searchInput} clearButtonMode="while-editing"/>
+          {search.length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} hitSlop={8}>
+              <NetworkIcons_1.ClearIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
+            </TouchableScale_1.default>)}
+        </react_native_1.View>
+
+        <TouchableScale_1.default onPress={handleExportJson} style={styles.exportButton} hitSlop={6}>
+          <NetworkIcons_1.ExportIcon size={12} color={AppColors_1.AppColors.purple}/>
+          <react_native_1.Text style={styles.exportButtonText}>JSON</react_native_1.Text>
+        </TouchableScale_1.default>
+
+        <TouchableScale_1.default onPress={handleExportMarkdown} style={[styles.exportButton, { backgroundColor: `${AppColors_1.AppColors.emerald500}14`, borderColor: `${AppColors_1.AppColors.emerald500}33` }]} hitSlop={6}>
+          <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.emerald500}/>
+          <react_native_1.Text style={[styles.exportButtonText, { color: AppColors_1.AppColors.emerald500 }]}>MD</react_native_1.Text>
+        </TouchableScale_1.default>
+      </react_native_1.View>
+
+      {/* ─── Main Content Scroll View ─── */}
+      <react_native_1.ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {/* Hero Card */}
+        <react_native_1.View style={styles.heroCard}>
+          <react_native_1.View style={styles.heroHeader}>
+            <react_native_1.View style={styles.heroIconWrap}>
+              {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon size={20} color={AppColors_1.AppColors.white}/>) : (<NetworkIcons_1.AndroidIcon size={20} color={AppColors_1.AppColors.white}/>)}
+            </react_native_1.View>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={styles.heroTitle}>
+                {deviceMetrics?.deviceModel || react_native_1.Platform.constants?.Model || (react_native_1.Platform.OS === 'ios' ? 'Apple iPhone' : 'Android Device')}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles.heroSubtitle}>
+                {react_native_1.Platform.OS === 'ios' ? `iOS ${react_native_1.Platform.Version}` : `Android ${react_native_1.Platform.Version} (API ${deviceMetrics?.apiLevel || react_native_1.Platform.Version})`}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles.heroBadge}>
+              <react_native_1.View style={styles.pulseDot}/>
+              <react_native_1.Text style={styles.heroBadgeText}>LIVE</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          {/* Quick Metrics Strip */}
+          <react_native_1.View style={styles.heroMetricsStrip}>
+            <react_native_1.View style={styles.heroMetricItem}>
+              <react_native_1.Text style={styles.heroMetricLabel}>IP ADDRESS</react_native_1.Text>
+              <react_native_1.Text style={styles.heroMetricValue} numberOfLines={1}>
+                {ipAddress}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles.heroMetricDivider}/>
+            <react_native_1.View style={styles.heroMetricItem}>
+              <react_native_1.Text style={styles.heroMetricLabel}>RAM (USED/TOTAL)</react_native_1.Text>
+              <react_native_1.Text style={styles.heroMetricValue}>
+                {usedRamMb}/{totalRamMb} MB
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles.heroMetricDivider}/>
+            <react_native_1.View style={styles.heroMetricItem}>
+              <react_native_1.Text style={styles.heroMetricLabel}>UPTIME</react_native_1.Text>
+              <react_native_1.Text style={styles.heroMetricValue}>{deviceUptime}</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* ── SUB-TAB 1: OVERVIEW ── */}
+        {(activeSubTab === 'overview' || search.length > 0) && (<react_native_1.View style={styles.sectionCard}>
+            <react_native_1.Text style={styles.sectionTitle}>DEVICE OVERVIEW</react_native_1.Text>
+            {isMatch('Device Model') && (<InfoRow label="Device Model" value={fullDeviceData.hardware.model}/>)}
+            {isMatch('Manufacturer') && (<InfoRow label="Manufacturer / Brand" value={fullDeviceData.hardware.brand}/>)}
+            {isMatch('Operating System') && (<InfoRow label="Operating System" value={fullDeviceData.hardware.osVersion} badge={{ text: react_native_1.Platform.OS.toUpperCase(), color: AppColors_1.AppColors.blue500, bg: `${AppColors_1.AppColors.blue500}18` }}/>)}
+            {isMatch('IP Address') && (<InfoRow label="Local IP Address" value={ipAddress} badge={{ text: 'ONLINE', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}18` }}/>)}
+            {isMatch('RAM Memory') && (<InfoRow label="RAM Memory" value={`${usedRamMb} MB / ${totalRamMb} MB (${ramUsagePct}%)`} subtext={`Free Memory: ${freeRamMb} MB`}/>)}
+            {isMatch('Storage Capacity') && (<InfoRow label="Internal Storage" value={`${freeStorageGb} GB Free / ${totalStorageGb} GB Total`}/>)}
+            {isMatch('App Version') && (<InfoRow label="Host App Version" value={`v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`}/>)}
+            {isMatch('JavaScript Engine') && (<InfoRow label="JS Runtime Engine" value={isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)'} badge={isHermes
+                    ? { text: 'HERMES', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}18` }
+                    : { text: 'JSC', color: AppColors_1.AppColors.sky500, bg: `${AppColors_1.AppColors.sky500}18` }}/>)}
+            {isMatch('UDID Identifier') && (<InfoRow label="Pseudo-UDID" value={pseudoUDID} isLast/>)}
+          </react_native_1.View>)}
+
+        {/* ── SUB-TAB 2: HARDWARE & SYSTEM ── */}
+        {(activeSubTab === 'hardware' || search.length > 0) && (<react_native_1.View style={styles.sectionCard}>
+            <react_native_1.Text style={styles.sectionTitle}>HARDWARE & SYSTEM SPECIFICATIONS</react_native_1.Text>
+            {isMatch('CPU Architecture') && (<InfoRow label="CPU Architecture / ABI" value={fullDeviceData.hardware.cpuAbi} badge={{ text: '64-BIT', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}18` }}/>)}
+            {isMatch('Total RAM') && (<InfoRow label="Total Physical RAM" value={`${totalRamMb} MB`}/>)}
+            {isMatch('Free RAM') && (<InfoRow label="Available Free RAM" value={`${freeRamMb} MB`} badge={{
+                    text: freeRamMb < 500 ? 'LOW' : 'HEALTHY',
+                    color: freeRamMb < 500 ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.emerald500,
+                    bg: freeRamMb < 500 ? `${AppColors_1.AppColors.errorColor}18` : `${AppColors_1.AppColors.emerald500}18`,
+                }}/>)}
+            {isMatch('Storage Capacity') && (<InfoRow label="Disk Storage Total" value={`${totalStorageGb} GB`}/>)}
+            {isMatch('Available Storage') && (<InfoRow label="Disk Storage Available" value={`${freeStorageGb} GB`}/>)}
+            {isMatch('Battery') && (<InfoRow label="Battery Level" value={`${deviceMetrics?.batteryPercent ?? 100}%`} badge={{
+                    text: deviceMetrics?.isCharging ? 'CHARGING' : 'DISCHARGING',
+                    color: deviceMetrics?.isCharging ? AppColors_1.AppColors.emerald500 : AppColors_1.AppColors.grayText,
+                    bg: deviceMetrics?.isCharging ? `${AppColors_1.AppColors.emerald500}18` : `${AppColors_1.AppColors.grayText}18`,
+                }}/>)}
+            {isMatch('API Level') && react_native_1.Platform.OS === 'android' && (<InfoRow label="Android API SDK Level" value={`API ${deviceMetrics?.apiLevel || react_native_1.Platform.Version}`}/>)}
+            {isMatch('Thermal State') && (<InfoRow label="Thermal State" value="Nominal (Cool)" badge={{ text: 'OPTIMAL', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}18` }} isLast/>)}
+          </react_native_1.View>)}
+
+        {/* ── SUB-TAB 3: NETWORK & CONNECTIVITY ── */}
+        {(activeSubTab === 'network' || search.length > 0) && (<react_native_1.View style={styles.sectionCard}>
+            <react_native_1.Text style={styles.sectionTitle}>NETWORK & CONNECTIVITY</react_native_1.Text>
+            {isMatch('IP Address') && (<InfoRow label="Local Device IP" value={ipAddress} badge={{ text: 'IPV4', color: AppColors_1.AppColors.blue500, bg: `${AppColors_1.AppColors.blue500}18` }}/>)}
+            {isMatch('Internet Reachability') && (<InfoRow label="Internet Reachability" value="Connected" badge={{ text: 'ONLINE', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}18` }}/>)}
+            {isMatch('Connection Type') && (<InfoRow label="Active Connection Type" value="Wi-Fi / Local Area Network"/>)}
+            {isMatch('Metro Dev Server') && (<InfoRow label="Metro Packager Host" value={react_native_1.NativeModules?.PlatformConstants?.serverHost ||
+                    react_native_1.NativeModules?.AndroidConstants?.serverHost ||
+                    'localhost:8081'}/>)}
+            {isMatch('WebSocket Protocol') && (<InfoRow label="WebSocket (WSS) Support" value="Active & Enabled"/>)}
+            {isMatch('Network Inspector Interceptor') && (<InfoRow label="Network Interceptor Status" value="Intercepting XHR & Fetch" badge={{ text: 'MONITORING', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}18` }} isLast/>)}
+          </react_native_1.View>)}
+
+        {/* ── SUB-TAB 4: DISPLAY & SCREEN GEOMETRY ── */}
+        {(activeSubTab === 'display' || search.length > 0) && (<react_native_1.View style={styles.sectionCard}>
+            <react_native_1.Text style={styles.sectionTitle}>DISPLAY & SCREEN GEOMETRY</react_native_1.Text>
+            {isMatch('Window Resolution') && (<InfoRow label="Window Logical Size" value={`${windowDims.width.toFixed(0)} × ${windowDims.height.toFixed(0)} pt`}/>)}
+            {isMatch('Screen Physical Size') && (<InfoRow label="Physical Screen Size" value={`${(screenDims.width * pixelRatio).toFixed(0)} × ${(screenDims.height * pixelRatio).toFixed(0)} px`}/>)}
+            {isMatch('Pixel Density') && (<InfoRow label="Pixel Ratio (DPI Scale)" value={`@${pixelRatio}x (${Math.round(pixelRatio * 160)} dpi)`} badge={{ text: `@${pixelRatio}x`, color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}18` }}/>)}
+            {isMatch('Font Scale') && (<InfoRow label="User Font Scale" value={`${fontScale}x (${fontScale === 1 ? 'Default' : fontScale > 1 ? 'Enlarged' : 'Compact'})`}/>)}
+            {isMatch('Form Factor') && (<InfoRow label="Device Form Factor" value={isTablet ? 'Tablet' : 'Smartphone'} badge={{
+                    text: isTablet ? 'TABLET' : 'PHONE',
+                    color: isTablet ? AppColors_1.AppColors.blue500 : AppColors_1.AppColors.purple,
+                    bg: isTablet ? `${AppColors_1.AppColors.blue500}18` : `${AppColors_1.AppColors.purple}18`,
+                }}/>)}
+            {isMatch('Orientation') && (<InfoRow label="Screen Orientation" value={isLandscape ? 'Landscape' : 'Portrait'}/>)}
+            {isMatch('Status Bar Height') && (<InfoRow label="Status Bar Inset" value={`${statusBarHeight} pt`} isLast/>)}
+          </react_native_1.View>)}
+
+        {/* ── SUB-TAB 5: RUNTIME & APPLICATION ── */}
+        {(activeSubTab === 'runtime' || search.length > 0) && (<react_native_1.View style={styles.sectionCard}>
+            <react_native_1.Text style={styles.sectionTitle}>RUNTIME & APPLICATION</react_native_1.Text>
+            {isMatch('App Name') && (<InfoRow label="Application Name" value={fullDeviceData.runtime.appName}/>)}
+            {isMatch('Bundle ID') && (<InfoRow label="Bundle Identifier / Package" value={fullDeviceData.identifiers.bundleId}/>)}
+            {isMatch('App Version') && (<InfoRow label="Application Version" value={`v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`}/>)}
+            {isMatch('React Native') && (<InfoRow label="React Native Framework" value={`v${reactNativeVersion}`} badge={{ text: 'RN', color: AppColors_1.AppColors.sky500, bg: `${AppColors_1.AppColors.sky500}18` }}/>)}
+            {isMatch('In-App Inspector Version') && (<InfoRow label="In-App Inspector Library" value={`v${constants_1.LIB_VERSION}`} badge={{ text: 'LATEST', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}18` }}/>)}
+            {isMatch('Hermes Engine') && (<InfoRow label="Hermes JavaScript Engine" value={isHermes ? 'Enabled (AOT Bytecode)' : 'Disabled (JSC)'} badge={{
+                    text: isHermes ? 'HERMES' : 'JSC',
+                    color: isHermes ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayText,
+                    bg: isHermes ? `${AppColors_1.AppColors.purple}18` : `${AppColors_1.AppColors.grayText}18`,
+                }}/>)}
+            {isMatch('New Architecture') && (<InfoRow label="Bridgeless TurboModules (New Arch)" value={isTurboModule ? 'Enabled' : 'Legacy Bridge'} badge={{
+                    text: isTurboModule ? 'NEW ARCH' : 'LEGACY',
+                    color: isTurboModule ? AppColors_1.AppColors.emerald500 : AppColors_1.AppColors.blue500,
+                    bg: isTurboModule ? `${AppColors_1.AppColors.emerald500}18` : `${AppColors_1.AppColors.blue500}18`,
+                }}/>)}
+            {isMatch('Build Type') && (<InfoRow label="Build Configuration" value={__DEV__ ? 'Debug (__DEV__ = true)' : 'Release / Production'} badge={{
+                    text: __DEV__ ? 'DEBUG' : 'RELEASE',
+                    color: __DEV__ ? AppColors_1.AppColors.warningIconGold : AppColors_1.AppColors.emerald500,
+                    bg: __DEV__ ? `${AppColors_1.AppColors.warningIconGold}18` : `${AppColors_1.AppColors.emerald500}18`,
+                }}/>)}
+            {isMatch('Timezone') && (<InfoRow label="System Timezone" value={fullDeviceData.runtime.timezone}/>)}
+            {isMatch('Locale') && (<InfoRow label="System Language & Locale" value={fullDeviceData.runtime.locale}/>)}
+            {isMatch('Session Uptime') && (<InfoRow label="Inspector Session Uptime" value={deviceUptime} isLast/>)}
+          </react_native_1.View>)}
+
+        {/* ── SUB-TAB 6: SECURITY & IDENTIFIERS ── */}
+        {(activeSubTab === 'security' || search.length > 0) && (<react_native_1.View style={styles.sectionCard}>
+            <react_native_1.Text style={styles.sectionTitle}>DEVICE IDENTIFIERS & SECURITY</react_native_1.Text>
+            {isMatch('Pseudo-UDID') && (<InfoRow label="Deterministic Pseudo-UDID" value={pseudoUDID} subtext="Stable hardware signature hash for testing & diagnostics" badge={{ text: 'PERSISTENT', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}18` }}/>)}
+            {isMatch('Bundle ID') && (<InfoRow label="Application Bundle ID" value={fullDeviceData.identifiers.bundleId}/>)}
+            {isMatch('Root / Jailbreak') && (<InfoRow label="Root / Jailbreak Heuristic" value="Clean (Standard Sandbox)" badge={{ text: 'SECURE', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}18` }}/>)}
+            {isMatch('Simulator / Emulator') && (<InfoRow label="Emulator / Physical Device" value={react_native_1.Platform.constants?.Model?.includes?.('sdk') ||
+                    react_native_1.Platform.constants?.Model?.includes?.('Emulator') ||
+                    react_native_1.Platform.constants?.Model?.includes?.('Simulator')
+                    ? 'Virtual Simulator'
+                    : 'Physical Device'}/>)}
+            {isMatch('Sandbox Integrity') && (<InfoRow label="App Sandbox File Isolation" value="Enforced by OS Kernel" isLast/>)}
+          </react_native_1.View>)}
+
+        <react_native_1.View style={{ height: 48 }}/>
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    subTabsWrapper: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        paddingVertical: 8,
+    },
+    subTabsContainer: {
+        paddingHorizontal: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    subTabPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingHorizontal: 10,
+        paddingVertical: 5.5,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    subTabPillActive: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    subTabPillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+    },
+    subTabPillTextActive: {
+        color: AppColors_1.AppColors.white,
+    },
+    actionBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        gap: 8,
+    },
+    searchBar: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        paddingHorizontal: 9,
+        paddingVertical: react_native_1.Platform.OS === 'ios' ? 6 : 2,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        gap: 6,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        padding: 0,
+    },
+    exportButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 9,
+        paddingVertical: 6,
+        borderRadius: 8,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}33`,
+    },
+    exportButtonText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+    },
+    scrollArea: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 12,
+        gap: 12,
+        paddingBottom: 100,
+    },
+    heroCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        padding: 14,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOpacity: 0.04,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 1,
+        gap: 12,
+    },
+    heroHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+    },
+    heroIconWrap: {
+        width: 38,
+        height: 38,
+        borderRadius: 10,
+        backgroundColor: AppColors_1.AppColors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors_1.AppColors.purple,
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+    },
+    heroTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 15,
+        color: AppColors_1.AppColors.primaryBlack,
+        letterSpacing: -0.2,
+    },
+    heroSubtitle: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayText,
+        marginTop: 1,
+    },
+    heroBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: `${AppColors_1.AppColors.emerald500}18`,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 6,
+    },
+    pulseDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: AppColors_1.AppColors.emerald500,
+    },
+    heroBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.emerald500,
+    },
+    heroMetricsStrip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 10,
+        paddingVertical: 8,
+        paddingHorizontal: 10,
+    },
+    heroMetricItem: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    heroMetricLabel: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.4,
+    },
+    heroMetricValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.primaryBlack,
+        marginTop: 2,
+    },
+    heroMetricDivider: {
+        width: 1,
+        height: 20,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    sectionCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        padding: 14,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    sectionTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.8,
+        marginBottom: 8,
+        textTransform: 'uppercase',
+    },
+    infoRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 9,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+    },
+    infoLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    infoSubtext: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        marginTop: 1,
+    },
+    infoBadge: {
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    infoBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+    },
+    infoValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        maxWidth: 180,
+        textAlign: 'right',
+    },
+    rowCopyBtn: {
+        padding: 4,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+});
+exports.default = exports.DeviceInfoTab;