react-native-inapp-inspector 2.3.19 → 2.3.21

package/src/components/Inspector/DeviceInfoTab.tsx

@@ -1,1397 +0,0 @@
-import React, {useState, useEffect, useMemo, useCallback} from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  TextInput,
-  Dimensions,
-  Platform,
-  PixelRatio,
-  StatusBar,
-  StyleSheet,
-  ActivityIndicator,
-  NativeModules,
-} from 'react-native';
-import TouchableScale from '../TouchableScale';
-import CopyButton from '../CopyButton';
-import {AppColors} from '../../styles/AppColors';
-import {AppFonts} from '../../styles/AppFonts';
-import {useTranslation} from '../../i18n';
-import {
-  SmartphoneIcon,
-  CpuIcon,
-  WifiIcon,
-  ScreenIcon,
-  LayersIcon,
-  KeyIcon,
-  ShieldCheckIcon,
-  SearchIcon,
-  ClearIcon,
-  CopyIcon,
-  CircleCheckIcon,
-  CircleAlertIcon,
-  BoltIcon,
-  CheckIcon,
-  SignalIcon,
-  BrainIcon,
-  AppleIcon,
-  AndroidIcon,
-  ExportIcon,
-} from '../NetworkIcons';
-import {
-  getNativeDeviceMetrics,
-  getNativeSystemMetrics,
-  NativeDeviceMetrics,
-  NativeSystemMetrics,
-} from '../../native/NativeInspector';
-import {copyToClipboard, getAppName} from '../../helpers';
-import {showToast} from '../../helpers/toast';
-import {LIB_VERSION} from '../../constants';
-
-type DeviceSubTab =
-  | 'overview'
-  | 'hardware'
-  | 'network'
-  | 'display'
-  | 'runtime'
-  | 'security';
-
-interface InfoRowProps {
-  label: string;
-  value: string | number | boolean | null | undefined;
-  copyable?: boolean;
-  badge?: {
-    text: string;
-    color: string;
-    bg: string;
-  };
-  subtext?: string;
-  isLast?: boolean;
-}
-
-const InfoRow = React.memo(
-  ({label, value, copyable = true, badge, subtext, isLast = false}: InfoRowProps) => {
-    const displayValue =
-      value === null || value === undefined
-        ? '—'
-        : typeof value === 'boolean'
-        ? value
-          ? 'Yes'
-          : 'No'
-        : String(value);
-
-    return (
-      <View
-        style={[
-          styles.infoRow,
-          isLast && {borderBottomWidth: 0},
-        ]}>
-        <View style={{flex: 1, paddingRight: 8, minWidth: 0}}>
-          <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6}}>
-            <Text style={styles.infoLabel} numberOfLines={2}>{label}</Text>
-            {badge && (
-              <View
-                style={[
-                  styles.infoBadge,
-                  {backgroundColor: badge.bg, borderColor: `${badge.color}33`},
-                ]}>
-                <Text style={[styles.infoBadgeText, {color: badge.color}]}>
-                  {badge.text}
-                </Text>
-              </View>
-            )}
-          </View>
-          {subtext && <Text style={styles.infoSubtext} numberOfLines={2}>{subtext}</Text>}
-        </View>
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            flexShrink: 0,
-            maxWidth: '58%',
-            justifyContent: 'flex-end',
-          }}>
-          <Text
-            style={[
-              styles.infoValue,
-              typeof value === 'boolean' && {
-                color: value ? AppColors.emerald500 : AppColors.errorColor,
-              },
-            ]}
-            numberOfLines={3}
-            selectable>
-            {displayValue}
-          </Text>
-          {copyable && value !== null && value !== undefined && (
-            <TouchableScale
-              hitSlop={8}
-              onPress={() => {
-                copyToClipboard(displayValue, label);
-                showToast(`Copied ${label}`);
-              }}
-              style={styles.rowCopyBtn}>
-              <CopyIcon size={11} color={AppColors.grayTextWeak} />
-            </TouchableScale>
-          )}
-        </View>
-      </View>
-    );
-  },
-);
-
-export const DeviceInfoTab = React.memo(() => {
-  const {t} = useTranslation();
-  const [activeSubTab, setActiveSubTab] = useState<DeviceSubTab>('overview');
-  const [search, setSearch] = useState<string>('');
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [deviceMetrics, setDeviceMetrics] = useState<NativeDeviceMetrics | null>(null);
-  const [systemMetrics, setSystemMetrics] = useState<NativeSystemMetrics | null>(null);
-  const [ipAddress, setIpAddress] = useState<string>('Detecting...');
-  const [deviceUptime, setDeviceUptime] = useState<string>('0s');
-
-  const startTimeRef = React.useRef<number>(Date.now());
-
-  // Load hardware metrics and IP
-  const fetchMetrics = useCallback(async () => {
-    try {
-      const [devMetrics, sysMetrics] = await Promise.all([
-        getNativeDeviceMetrics(),
-        getNativeSystemMetrics(),
-      ]);
-      setDeviceMetrics(devMetrics);
-      setSystemMetrics(sysMetrics);
-    } catch {
-      // Fallback
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchMetrics();
-    const interval = setInterval(fetchMetrics, 3000);
-    return () => clearInterval(interval);
-  }, [fetchMetrics]);
-
-  // Probe local IP address
-  useEffect(() => {
-    let isMounted = true;
-    const probeIp = async () => {
-      // 1. Try NativeModules or PlatformConstants
-      try {
-        const serverHost =
-          NativeModules?.PlatformConstants?.serverHost ||
-          NativeModules?.AndroidConstants?.serverHost ||
-          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(Platform.OS === 'android' ? '10.0.2.15 (Local)' : '127.0.0.1 (Local)');
-      }
-    };
-
-    probeIp();
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  // Calculate Uptime
-  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 = Dimensions.get('window');
-  const screenDims = Dimensions.get('screen');
-  const pixelRatio = PixelRatio.get();
-  const fontScale = PixelRatio.getFontScale();
-  const isTablet = windowDims.width >= 600 || windowDims.height >= 1000;
-  const isLandscape = windowDims.width > windowDims.height;
-  const statusBarHeight =
-    Platform.OS === 'android'
-      ? StatusBar.currentHeight || 24
-      : (windowDims.height >= 812 ? 44 : 20);
-
-  // Pseudo-UDID deterministic identifier
-  const pseudoUDID = useMemo(() => {
-    const raw = `${Platform.OS}-${Platform.Version}-${screenDims.width}x${screenDims.height}-${pixelRatio}-${(Platform.constants as any)?.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-${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 as any)?.HermesInternal);
-  const isTurboModule = Boolean((globalThis as any)?.__turboModuleProxy);
-  const reactNativeVersion = useMemo(() => {
-    const v = (Platform.constants as any)?.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 = useMemo(
-    () => [
-      {
-        key: 'overview',
-        label: 'Overview',
-        icon: (c: string) => <LayersIcon size={12} color={c} />,
-      },
-      {
-        key: 'hardware',
-        label: 'Hardware',
-        icon: (c: string) => <CpuIcon size={12} color={c} />,
-      },
-      {
-        key: 'network',
-        label: 'Network & IP',
-        icon: (c: string) => <WifiIcon size={12} color={c} />,
-      },
-      {
-        key: 'display',
-        label: 'Display',
-        icon: (c: string) => <ScreenIcon size={12} color={c} />,
-      },
-      {
-        key: 'runtime',
-        label: 'Runtime & App',
-        icon: (c: string) => <BoltIcon size={12} color={c} />,
-      },
-      {
-        key: 'security',
-        label: 'Security & IDs',
-        icon: (c: string) => <KeyIcon size={12} color={c} />,
-      },
-    ],
-    [],
-  );
-
-  // Full device JSON export
-  const fullDeviceData = useMemo(
-    () => ({
-      identifiers: {
-        pseudoUDID,
-        bundleId: deviceMetrics?.appBundleId || deviceMetrics?.appPackageName || 'com.app.inspector',
-      },
-      hardware: {
-        model: deviceMetrics?.deviceModel || (Platform.constants as any)?.Model || 'Unknown Device',
-        brand: deviceMetrics?.deviceBrand || (Platform.constants as any)?.Brand || (Platform.OS === 'ios' ? 'Apple' : 'Android'),
-        osVersion: `${Platform.OS} ${Platform.Version}`,
-        apiLevel: deviceMetrics?.apiLevel || (Platform.constants as any)?.Version || null,
-        cpuAbi: deviceMetrics?.cpuAbi || (Platform.constants as any)?.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: getAppName(),
-        appVersion: deviceMetrics?.appVersion || '1.0.0',
-        appBuild: deviceMetrics?.appBuild || '1',
-        reactNativeVersion,
-        inspectorVersion: 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 = () => {
-    copyToClipboard(JSON.stringify(fullDeviceData, null, 2), 'Device Full Report');
-    showToast('Copied Full Device JSON Report!');
-  };
-
-  const handleExportMarkdown = () => {
-    const md = `# Device Information Report
-**Generated by React Native In-App Inspector v${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}\`
-`;
-    copyToClipboard(md, 'Device Markdown Report');
-    showToast('Copied Markdown Report to Clipboard!');
-  };
-
-  // Filter items matching search (checking label, value, and optional subtext)
-  const isMatch = useCallback(
-    (label: string, value?: any, subtext?: any) => {
-      if (!search.trim()) return true;
-      const query = search.toLowerCase().trim();
-      const strVal =
-        value != null
-          ? typeof value === 'object'
-            ? JSON.stringify(value)
-            : String(value)
-          : '';
-      const strSub = subtext != null ? String(subtext) : '';
-      return (
-        label.toLowerCase().includes(query) ||
-        strVal.toLowerCase().includes(query) ||
-        strSub.toLowerCase().includes(query)
-      );
-    },
-    [search],
-  );
-
-  const hasHeroMatch = useMemo(() => {
-    if (!search.trim()) return true;
-    return (
-      isMatch('Model', deviceMetrics?.deviceModel || (Platform.constants as any)?.Model) ||
-      isMatch('OS', Platform.OS) ||
-      isMatch('IP Address', ipAddress) ||
-      isMatch('RAM', `${usedRamMb}/${totalRamMb}`) ||
-      isMatch('Uptime', deviceUptime)
-    );
-  }, [search, isMatch, deviceMetrics, ipAddress, usedRamMb, totalRamMb, deviceUptime]);
-
-  const hasOverviewMatch = useMemo(() => {
-    if (!search.trim()) return true;
-    return (
-      isMatch('Device Model', fullDeviceData.hardware.model) ||
-      isMatch('Manufacturer', fullDeviceData.hardware.brand) ||
-      isMatch('Operating System', fullDeviceData.hardware.osVersion) ||
-      isMatch('IP Address', ipAddress) ||
-      isMatch('RAM Memory', `${usedRamMb} MB / ${totalRamMb} MB (${ramUsagePct}%)`, `Free Memory: ${freeRamMb} MB`) ||
-      isMatch('Storage Capacity', `${freeStorageGb} GB Free / ${totalStorageGb} GB Total`) ||
-      isMatch('App Version', `v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`) ||
-      isMatch('JavaScript Engine', isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)') ||
-      isMatch('UDID Identifier', pseudoUDID)
-    );
-  }, [search, isMatch, fullDeviceData, ipAddress, usedRamMb, totalRamMb, ramUsagePct, freeRamMb, freeStorageGb, totalStorageGb, isHermes, pseudoUDID]);
-
-  const hasHardwareMatch = useMemo(() => {
-    if (!search.trim()) return true;
-    return (
-      isMatch('CPU Architecture', fullDeviceData.hardware.cpuAbi) ||
-      isMatch('Total RAM', `${totalRamMb} MB`) ||
-      isMatch('Free RAM', `${freeRamMb} MB`) ||
-      isMatch('Storage Capacity', `${totalStorageGb} GB`) ||
-      isMatch('Available Storage', `${freeStorageGb} GB`) ||
-      isMatch('Battery', `${deviceMetrics?.batteryPercent ?? 100}%`) ||
-      isMatch('API Level', `API ${deviceMetrics?.apiLevel || Platform.Version}`) ||
-      isMatch('Thermal State', 'Nominal (Cool)')
-    );
-  }, [search, isMatch, fullDeviceData, totalRamMb, freeRamMb, totalStorageGb, freeStorageGb, deviceMetrics]);
-
-  const hasNetworkMatch = useMemo(() => {
-    if (!search.trim()) return true;
-    return (
-      isMatch('IP Address', ipAddress) ||
-      isMatch('Internet Reachability', 'Connected') ||
-      isMatch('Connection Type', 'Wi-Fi / Local Area Network') ||
-      isMatch('Metro Dev Server', NativeModules?.PlatformConstants?.serverHost || NativeModules?.AndroidConstants?.serverHost || 'localhost:8081') ||
-      isMatch('WebSocket Protocol', 'Active & Enabled') ||
-      isMatch('Network Inspector Interceptor', 'Intercepting XHR & Fetch')
-    );
-  }, [search, isMatch, ipAddress]);
-
-  const hasDisplayMatch = useMemo(() => {
-    if (!search.trim()) return true;
-    return (
-      isMatch('Window Resolution', `${windowDims.width.toFixed(0)} × ${windowDims.height.toFixed(0)} pt`) ||
-      isMatch('Screen Physical Size', `${(screenDims.width * pixelRatio).toFixed(0)} × ${(screenDims.height * pixelRatio).toFixed(0)} px`) ||
-      isMatch('Pixel Density', `@${pixelRatio}x (${Math.round(pixelRatio * 160)} dpi)`) ||
-      isMatch('Font Scale', `${fontScale}x`) ||
-      isMatch('Form Factor', isTablet ? 'Tablet' : 'Smartphone') ||
-      isMatch('Orientation', isLandscape ? 'Landscape' : 'Portrait') ||
-      isMatch('Status Bar Height', `${statusBarHeight} pt`)
-    );
-  }, [search, isMatch, windowDims, screenDims, pixelRatio, fontScale, isTablet, isLandscape, statusBarHeight]);
-
-  const hasRuntimeMatch = useMemo(() => {
-    if (!search.trim()) return true;
-    return (
-      isMatch('App Name', fullDeviceData.runtime.appName) ||
-      isMatch('Bundle ID', fullDeviceData.identifiers.bundleId) ||
-      isMatch('App Version', `v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`) ||
-      isMatch('React Native', `v${reactNativeVersion}`) ||
-      isMatch('In-App Inspector Version', `v${LIB_VERSION}`) ||
-      isMatch('Hermes Engine', isHermes ? 'Enabled (AOT Bytecode)' : 'Disabled (JSC)') ||
-      isMatch('New Architecture', isTurboModule ? 'Enabled' : 'Legacy Bridge') ||
-      isMatch('Build Type', __DEV__ ? 'Debug (__DEV__ = true)' : 'Release / Production') ||
-      isMatch('Timezone', fullDeviceData.runtime.timezone) ||
-      isMatch('Locale', fullDeviceData.runtime.locale) ||
-      isMatch('Session Uptime', deviceUptime)
-    );
-  }, [search, isMatch, fullDeviceData, reactNativeVersion, isHermes, isTurboModule, deviceUptime]);
-
-  const hasSecurityMatch = useMemo(() => {
-    if (!search.trim()) return true;
-    return (
-      isMatch('Pseudo-UDID', pseudoUDID) ||
-      isMatch('Bundle ID', fullDeviceData.identifiers.bundleId) ||
-      isMatch('Root / Jailbreak', 'Clean (Standard Sandbox)') ||
-      isMatch('Simulator / Emulator', (Platform.constants as any)?.Model?.includes?.('sdk') || (Platform.constants as any)?.Model?.includes?.('Emulator') || (Platform.constants as any)?.Model?.includes?.('Simulator') ? 'Virtual Simulator' : 'Physical Device') ||
-      isMatch('Sandbox Integrity', 'Enforced by OS Kernel')
-    );
-  }, [search, isMatch, pseudoUDID, fullDeviceData]);
-
-  const hasAnyMatch = useMemo(() => {
-    if (!search.trim()) return true;
-    return (
-      hasHeroMatch ||
-      hasOverviewMatch ||
-      hasHardwareMatch ||
-      hasNetworkMatch ||
-      hasDisplayMatch ||
-      hasRuntimeMatch ||
-      hasSecurityMatch
-    );
-  }, [
-    search,
-    hasHeroMatch,
-    hasOverviewMatch,
-    hasHardwareMatch,
-    hasNetworkMatch,
-    hasDisplayMatch,
-    hasRuntimeMatch,
-    hasSecurityMatch,
-  ]);
-
-  return (
-    <View style={styles.container}>
-      {/* ─── Top Sub-Tabs Navigation Bar ─── */}
-      <View style={styles.subTabsWrapper}>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.subTabsContainer}>
-          {subTabs.map(tab => {
-            const isActive = activeSubTab === tab.key;
-            const color = isActive ? AppColors.white : AppColors.grayText;
-            return (
-              <TouchableScale
-                key={tab.key}
-                onPress={() => setActiveSubTab(tab.key as DeviceSubTab)}
-                style={[styles.subTabPill, isActive && styles.subTabPillActive]}>
-                {tab.icon(color)}
-                <Text
-                  style={[
-                    styles.subTabPillText,
-                    isActive && styles.subTabPillTextActive,
-                  ]}>
-                  {tab.label}
-                </Text>
-              </TouchableScale>
-            );
-          })}
-        </ScrollView>
-      </View>
-
-      {/* ─── Search & Export Action Bar ─── */}
-      <View style={styles.actionBar}>
-        <View style={styles.searchBar}>
-          <SearchIcon size={14} color={AppColors.grayTextWeak} />
-          <TextInput
-            value={search}
-            onChangeText={setSearch}
-            placeholder="Search specs, UDID, IP, screen..."
-            placeholderTextColor={AppColors.grayTextWeak}
-            style={styles.searchInput}
-            clearButtonMode="while-editing"
-          />
-          {search.length > 0 && (
-            <TouchableScale onPress={() => setSearch('')} hitSlop={8}>
-              <ClearIcon size={13} color={AppColors.grayTextWeak} />
-            </TouchableScale>
-          )}
-        </View>
-
-        <TouchableScale
-          onPress={handleExportJson}
-          style={styles.exportButton}
-          hitSlop={6}>
-          <ExportIcon size={12} color={AppColors.purple} />
-          <Text style={styles.exportButtonText}>JSON</Text>
-        </TouchableScale>
-
-        <TouchableScale
-          onPress={handleExportMarkdown}
-          style={[styles.exportButton, {backgroundColor: `${AppColors.emerald500}14`, borderColor: `${AppColors.emerald500}33`}]}
-          hitSlop={6}>
-          <CopyIcon size={12} color={AppColors.emerald500} />
-          <Text style={[styles.exportButtonText, {color: AppColors.emerald500}]}>MD</Text>
-        </TouchableScale>
-      </View>
-
-      {/* ─── Main Content Scroll View ─── */}
-      <ScrollView
-        style={styles.scrollArea}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}>
-        {/* Hero Card */}
-        {(!search.trim() || hasHeroMatch) && (
-          <View style={styles.heroCard}>
-            <View style={styles.heroHeader}>
-              <View style={styles.heroIconWrap}>
-                {Platform.OS === 'ios' ? (
-                  <AppleIcon size={20} color={AppColors.white} />
-                ) : (
-                  <AndroidIcon size={20} color={AppColors.white} />
-                )}
-              </View>
-              <View style={{flex: 1, minWidth: 0}}>
-                <Text style={styles.heroTitle} numberOfLines={1} ellipsizeMode="tail">
-                  {deviceMetrics?.deviceModel || (Platform.constants as any)?.Model || (Platform.OS === 'ios' ? 'Apple iPhone' : 'Android Device')}
-                </Text>
-                <Text style={styles.heroSubtitle} numberOfLines={1} ellipsizeMode="tail">
-                  {Platform.OS === 'ios' ? `iOS ${Platform.Version}` : `Android ${Platform.Version} (API ${deviceMetrics?.apiLevel || Platform.Version})`}
-                </Text>
-              </View>
-              <View style={styles.heroBadge}>
-                <View style={styles.pulseDot} />
-                <Text style={styles.heroBadgeText}>LIVE</Text>
-              </View>
-            </View>
-
-            {/* Quick Metrics Strip */}
-            <View style={styles.heroMetricsStrip}>
-              <View style={styles.heroMetricItem}>
-                <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">IP ADDRESS</Text>
-                <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
-                  {ipAddress}
-                </Text>
-              </View>
-              <View style={styles.heroMetricDivider} />
-              <View style={styles.heroMetricItem}>
-                <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">RAM (USED/TOTAL)</Text>
-                <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
-                  {usedRamMb}/{totalRamMb} MB
-                </Text>
-              </View>
-              <View style={styles.heroMetricDivider} />
-              <View style={styles.heroMetricItem}>
-                <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">UPTIME</Text>
-                <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">{deviceUptime}</Text>
-              </View>
-            </View>
-          </View>
-        )}
-
-        {/* ── SUB-TAB 1: OVERVIEW ── */}
-        {(activeSubTab === 'overview' || search.length > 0) && hasOverviewMatch && (
-          <View style={styles.sectionCard}>
-            <Text style={styles.sectionTitle}>DEVICE OVERVIEW</Text>
-            {isMatch('Device Model', fullDeviceData.hardware.model) && (
-              <InfoRow
-                label="Device Model"
-                value={fullDeviceData.hardware.model}
-              />
-            )}
-            {isMatch('Manufacturer', fullDeviceData.hardware.brand) && (
-              <InfoRow
-                label="Manufacturer / Brand"
-                value={fullDeviceData.hardware.brand}
-              />
-            )}
-            {isMatch('Operating System', fullDeviceData.hardware.osVersion) && (
-              <InfoRow
-                label="Operating System"
-                value={fullDeviceData.hardware.osVersion}
-                badge={{text: Platform.OS.toUpperCase(), color: AppColors.blue500, bg: `${AppColors.blue500}18`}}
-              />
-            )}
-            {isMatch('IP Address', ipAddress) && (
-              <InfoRow
-                label="Local IP Address"
-                value={ipAddress}
-                badge={{text: 'ONLINE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18`}}
-              />
-            )}
-            {isMatch('RAM Memory', `${usedRamMb} MB / ${totalRamMb} MB (${ramUsagePct}%)`, `Free Memory: ${freeRamMb} MB`) && (
-              <InfoRow
-                label="RAM Memory"
-                value={`${usedRamMb} MB / ${totalRamMb} MB (${ramUsagePct}%)`}
-                subtext={`Free Memory: ${freeRamMb} MB`}
-              />
-            )}
-            {isMatch('Storage Capacity', `${freeStorageGb} GB Free / ${totalStorageGb} GB Total`) && (
-              <InfoRow
-                label="Internal Storage"
-                value={`${freeStorageGb} GB Free / ${totalStorageGb} GB Total`}
-              />
-            )}
-            {isMatch('App Version', `v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`) && (
-              <InfoRow
-                label="Host App Version"
-                value={`v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`}
-              />
-            )}
-            {isMatch('JavaScript Engine', isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)') && (
-              <InfoRow
-                label="JS Runtime Engine"
-                value={isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)'}
-                badge={
-                  isHermes
-                    ? {text: 'HERMES', color: AppColors.purple, bg: `${AppColors.purple}18`}
-                    : {text: 'JSC', color: AppColors.sky500, bg: `${AppColors.sky500}18`}
-                }
-              />
-            )}
-            {isMatch('UDID Identifier', pseudoUDID) && (
-              <InfoRow
-                label="Pseudo-UDID"
-                value={pseudoUDID}
-                isLast
-              />
-            )}
-          </View>
-        )}
-
-        {/* ── SUB-TAB 2: HARDWARE & SYSTEM ── */}
-        {(activeSubTab === 'hardware' || search.length > 0) && hasHardwareMatch && (
-          <View style={styles.sectionCard}>
-            <Text style={styles.sectionTitle}>HARDWARE & SYSTEM SPECIFICATIONS</Text>
-            {isMatch('CPU Architecture', fullDeviceData.hardware.cpuAbi) && (
-              <InfoRow
-                label="CPU Architecture / ABI"
-                value={fullDeviceData.hardware.cpuAbi}
-                badge={{text: '64-BIT', color: AppColors.purple, bg: `${AppColors.purple}18`}}
-              />
-            )}
-            {isMatch('Total RAM', `${totalRamMb} MB`) && (
-              <InfoRow
-                label="Total Physical RAM"
-                value={`${totalRamMb} MB`}
-              />
-            )}
-            {isMatch('Free RAM', `${freeRamMb} MB`) && (
-              <InfoRow
-                label="Available Free RAM"
-                value={`${freeRamMb} MB`}
-                badge={{
-                  text: freeRamMb < 500 ? 'LOW' : 'HEALTHY',
-                  color: freeRamMb < 500 ? AppColors.errorColor : AppColors.emerald500,
-                  bg: freeRamMb < 500 ? `${AppColors.errorColor}18` : `${AppColors.emerald500}18`,
-                }}
-              />
-            )}
-            {isMatch('Storage Capacity', `${totalStorageGb} GB`) && (
-              <InfoRow
-                label="Disk Storage Total"
-                value={`${totalStorageGb} GB`}
-              />
-            )}
-            {isMatch('Available Storage', `${freeStorageGb} GB`) && (
-              <InfoRow
-                label="Disk Storage Available"
-                value={`${freeStorageGb} GB`}
-              />
-            )}
-            {isMatch('Battery', `${deviceMetrics?.batteryPercent ?? 100}%`) && (
-              <InfoRow
-                label="Battery Level"
-                value={`${deviceMetrics?.batteryPercent ?? 100}%`}
-                badge={{
-                  text: deviceMetrics?.isCharging ? 'CHARGING' : 'DISCHARGING',
-                  color: deviceMetrics?.isCharging ? AppColors.emerald500 : AppColors.grayText,
-                  bg: deviceMetrics?.isCharging ? `${AppColors.emerald500}18` : `${AppColors.grayText}18`,
-                }}
-              />
-            )}
-            {isMatch('API Level', `API ${deviceMetrics?.apiLevel || Platform.Version}`) && Platform.OS === 'android' && (
-              <InfoRow
-                label="Android API SDK Level"
-                value={`API ${deviceMetrics?.apiLevel || Platform.Version}`}
-              />
-            )}
-            {isMatch('Thermal State', 'Nominal (Cool)') && (
-              <InfoRow
-                label="Thermal State"
-                value="Nominal (Cool)"
-                badge={{text: 'OPTIMAL', color: AppColors.emerald500, bg: `${AppColors.emerald500}18`}}
-                isLast
-              />
-            )}
-          </View>
-        )}
-
-        {/* ── SUB-TAB 3: NETWORK & CONNECTIVITY ── */}
-        {(activeSubTab === 'network' || search.length > 0) && hasNetworkMatch && (
-          <View style={styles.sectionCard}>
-            <Text style={styles.sectionTitle}>NETWORK & CONNECTIVITY</Text>
-            {isMatch('IP Address', ipAddress) && (
-              <InfoRow
-                label="Local Device IP"
-                value={ipAddress}
-                badge={{text: 'IPV4', color: AppColors.blue500, bg: `${AppColors.blue500}18`}}
-              />
-            )}
-            {isMatch('Internet Reachability', 'Connected') && (
-              <InfoRow
-                label="Internet Reachability"
-                value="Connected"
-                badge={{text: 'ONLINE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18`}}
-              />
-            )}
-            {isMatch('Connection Type', 'Wi-Fi / Local Area Network') && (
-              <InfoRow
-                label="Active Connection Type"
-                value="Wi-Fi / Local Area Network"
-              />
-            )}
-            {isMatch('Metro Dev Server', NativeModules?.PlatformConstants?.serverHost || NativeModules?.AndroidConstants?.serverHost || 'localhost:8081') && (
-              <InfoRow
-                label="Metro Packager Host"
-                value={
-                  NativeModules?.PlatformConstants?.serverHost ||
-                  NativeModules?.AndroidConstants?.serverHost ||
-                  'localhost:8081'
-                }
-              />
-            )}
-            {isMatch('WebSocket Protocol', 'Active & Enabled') && (
-              <InfoRow
-                label="WebSocket (WSS) Support"
-                value="Active & Enabled"
-              />
-            )}
-            {isMatch('Network Inspector Interceptor', 'Intercepting XHR & Fetch') && (
-              <InfoRow
-                label="Network Interceptor Status"
-                value="Intercepting XHR & Fetch"
-                badge={{text: 'MONITORING', color: AppColors.purple, bg: `${AppColors.purple}18`}}
-                isLast
-              />
-            )}
-          </View>
-        )}
-
-        {/* ── SUB-TAB 4: DISPLAY & SCREEN GEOMETRY ── */}
-        {(activeSubTab === 'display' || search.length > 0) && hasDisplayMatch && (
-          <View style={styles.sectionCard}>
-            <Text style={styles.sectionTitle}>DISPLAY & SCREEN GEOMETRY</Text>
-            {isMatch('Window Resolution', `${windowDims.width.toFixed(0)} × ${windowDims.height.toFixed(0)} pt`) && (
-              <InfoRow
-                label="Window Logical Size"
-                value={`${windowDims.width.toFixed(0)} × ${windowDims.height.toFixed(0)} pt`}
-              />
-            )}
-            {isMatch('Screen Physical Size', `${(screenDims.width * pixelRatio).toFixed(0)} × ${(screenDims.height * pixelRatio).toFixed(0)} px`) && (
-              <InfoRow
-                label="Physical Screen Size"
-                value={`${(screenDims.width * pixelRatio).toFixed(0)} × ${(screenDims.height * pixelRatio).toFixed(0)} px`}
-              />
-            )}
-            {isMatch('Pixel Density', `@${pixelRatio}x (${Math.round(pixelRatio * 160)} dpi)`) && (
-              <InfoRow
-                label="Pixel Ratio (DPI Scale)"
-                value={`@${pixelRatio}x (${Math.round(pixelRatio * 160)} dpi)`}
-                badge={{text: `@${pixelRatio}x`, color: AppColors.purple, bg: `${AppColors.purple}18`}}
-              />
-            )}
-            {isMatch('Font Scale', `${fontScale}x`) && (
-              <InfoRow
-                label="User Font Scale"
-                value={`${fontScale}x (${fontScale === 1 ? 'Default' : fontScale > 1 ? 'Enlarged' : 'Compact'})`}
-              />
-            )}
-            {isMatch('Form Factor', isTablet ? 'Tablet' : 'Smartphone') && (
-              <InfoRow
-                label="Device Form Factor"
-                value={isTablet ? 'Tablet' : 'Smartphone'}
-                badge={{
-                  text: isTablet ? 'TABLET' : 'PHONE',
-                  color: isTablet ? AppColors.blue500 : AppColors.purple,
-                  bg: isTablet ? `${AppColors.blue500}18` : `${AppColors.purple}18`,
-                }}
-              />
-            )}
-            {isMatch('Orientation', isLandscape ? 'Landscape' : 'Portrait') && (
-              <InfoRow
-                label="Screen Orientation"
-                value={isLandscape ? 'Landscape' : 'Portrait'}
-              />
-            )}
-            {isMatch('Status Bar Height', `${statusBarHeight} pt`) && (
-              <InfoRow
-                label="Status Bar Inset"
-                value={`${statusBarHeight} pt`}
-                isLast
-              />
-            )}
-          </View>
-        )}
-
-        {/* ── SUB-TAB 5: RUNTIME & APPLICATION ── */}
-        {(activeSubTab === 'runtime' || search.length > 0) && hasRuntimeMatch && (
-          <View style={styles.sectionCard}>
-            <Text style={styles.sectionTitle}>RUNTIME & APPLICATION</Text>
-            {isMatch('App Name', fullDeviceData.runtime.appName) && (
-              <InfoRow
-                label="Application Name"
-                value={fullDeviceData.runtime.appName}
-              />
-            )}
-            {isMatch('Bundle ID', fullDeviceData.identifiers.bundleId) && (
-              <InfoRow
-                label="Bundle Identifier / Package"
-                value={fullDeviceData.identifiers.bundleId}
-              />
-            )}
-            {isMatch('App Version', `v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`) && (
-              <InfoRow
-                label="Application Version"
-                value={`v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`}
-              />
-            )}
-            {isMatch('React Native', `v${reactNativeVersion}`) && (
-              <InfoRow
-                label="React Native Framework"
-                value={`v${reactNativeVersion}`}
-                badge={{text: 'RN', color: AppColors.sky500, bg: `${AppColors.sky500}18`}}
-              />
-            )}
-            {isMatch('In-App Inspector Version', `v${LIB_VERSION}`) && (
-              <InfoRow
-                label="In-App Inspector Library"
-                value={`v${LIB_VERSION}`}
-                badge={{text: 'LATEST', color: AppColors.purple, bg: `${AppColors.purple}18`}}
-              />
-            )}
-            {isMatch('Hermes Engine', isHermes ? 'Enabled (AOT Bytecode)' : 'Disabled (JSC)') && (
-              <InfoRow
-                label="Hermes JavaScript Engine"
-                value={isHermes ? 'Enabled (AOT Bytecode)' : 'Disabled (JSC)'}
-                badge={{
-                  text: isHermes ? 'HERMES' : 'JSC',
-                  color: isHermes ? AppColors.purple : AppColors.grayText,
-                  bg: isHermes ? `${AppColors.purple}18` : `${AppColors.grayText}18`,
-                }}
-              />
-            )}
-            {isMatch('New Architecture', isTurboModule ? 'Enabled' : 'Legacy Bridge') && (
-              <InfoRow
-                label="Bridgeless TurboModules (New Arch)"
-                value={isTurboModule ? 'Enabled' : 'Legacy Bridge'}
-                badge={{
-                  text: isTurboModule ? 'NEW ARCH' : 'LEGACY',
-                  color: isTurboModule ? AppColors.emerald500 : AppColors.blue500,
-                  bg: isTurboModule ? `${AppColors.emerald500}18` : `${AppColors.blue500}18`,
-                }}
-              />
-            )}
-            {isMatch('Build Type', __DEV__ ? 'Debug (__DEV__ = true)' : 'Release / Production') && (
-              <InfoRow
-                label="Build Configuration"
-                value={__DEV__ ? 'Debug (__DEV__ = true)' : 'Release / Production'}
-                badge={{
-                  text: __DEV__ ? 'DEBUG' : 'RELEASE',
-                  color: __DEV__ ? AppColors.warningIconGold : AppColors.emerald500,
-                  bg: __DEV__ ? `${AppColors.warningIconGold}18` : `${AppColors.emerald500}18`,
-                }}
-              />
-            )}
-            {isMatch('Timezone', fullDeviceData.runtime.timezone) && (
-              <InfoRow
-                label="System Timezone"
-                value={fullDeviceData.runtime.timezone}
-              />
-            )}
-            {isMatch('Locale', fullDeviceData.runtime.locale) && (
-              <InfoRow
-                label="System Language & Locale"
-                value={fullDeviceData.runtime.locale}
-              />
-            )}
-            {isMatch('Session Uptime', deviceUptime) && (
-              <InfoRow
-                label="Inspector Session Uptime"
-                value={deviceUptime}
-                isLast
-              />
-            )}
-          </View>
-        )}
-
-        {/* ── SUB-TAB 6: SECURITY & IDENTIFIERS ── */}
-        {(activeSubTab === 'security' || search.length > 0) && hasSecurityMatch && (
-          <View style={styles.sectionCard}>
-            <Text style={styles.sectionTitle}>DEVICE IDENTIFIERS & SECURITY</Text>
-            {isMatch('Pseudo-UDID', pseudoUDID) && (
-              <InfoRow
-                label="Deterministic Pseudo-UDID"
-                value={pseudoUDID}
-                subtext="Stable hardware signature hash for testing & diagnostics"
-                badge={{text: 'PERSISTENT', color: AppColors.purple, bg: `${AppColors.purple}18`}}
-              />
-            )}
-            {isMatch('Bundle ID', fullDeviceData.identifiers.bundleId) && (
-              <InfoRow
-                label="Application Bundle ID"
-                value={fullDeviceData.identifiers.bundleId}
-              />
-            )}
-            {isMatch('Root / Jailbreak', 'Clean (Standard Sandbox)') && (
-              <InfoRow
-                label="Root / Jailbreak Heuristic"
-                value="Clean (Standard Sandbox)"
-                badge={{text: 'SECURE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18`}}
-              />
-            )}
-            {isMatch('Simulator / Emulator', (Platform.constants as any)?.Model?.includes?.('sdk') || (Platform.constants as any)?.Model?.includes?.('Emulator') || (Platform.constants as any)?.Model?.includes?.('Simulator') ? 'Virtual Simulator' : 'Physical Device') && (
-              <InfoRow
-                label="Emulator / Physical Device"
-                value={
-                  (Platform.constants as any)?.Model?.includes?.('sdk') ||
-                  (Platform.constants as any)?.Model?.includes?.('Emulator') ||
-                  (Platform.constants as any)?.Model?.includes?.('Simulator')
-                    ? 'Virtual Simulator'
-                    : 'Physical Device'
-                }
-              />
-            )}
-            {isMatch('Sandbox Integrity', 'Enforced by OS Kernel') && (
-              <InfoRow
-                label="App Sandbox File Isolation"
-                value="Enforced by OS Kernel"
-                isLast
-              />
-            )}
-          </View>
-        )}
-
-        {/* Empty search results state */}
-        {search.trim().length > 0 && !hasAnyMatch && (
-          <View style={styles.emptySearchCard}>
-            <SearchIcon size={26} color={AppColors.grayTextWeak} />
-            <Text style={styles.emptySearchTitle}>No matching device specifications</Text>
-            <Text style={styles.emptySearchSubtitle}>
-              No properties matched &ldquo;{search}&rdquo;
-            </Text>
-            <TouchableScale
-              onPress={() => setSearch('')}
-              style={styles.clearSearchBtn}>
-              <Text style={styles.clearSearchBtnText}>Clear Search</Text>
-            </TouchableScale>
-          </View>
-        )}
-
-        <View style={{height: 48}} />
-      </ScrollView>
-    </View>
-  );
-});
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: AppColors.grayBackground,
-  },
-  subTabsWrapper: {
-    backgroundColor: AppColors.primaryLight,
-    borderBottomWidth: 1,
-    borderBottomColor: 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.grayBackground,
-    borderWidth: 1,
-    borderColor: AppColors.grayBorderSecondary,
-  },
-  subTabPillActive: {
-    backgroundColor: AppColors.purple,
-    borderColor: AppColors.purple,
-  },
-  subTabPillText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 11,
-    color: AppColors.grayText,
-  },
-  subTabPillTextActive: {
-    color: AppColors.white,
-  },
-  actionBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    backgroundColor: AppColors.primaryLight,
-    borderBottomWidth: 1,
-    borderBottomColor: AppColors.dividerColor,
-    gap: 8,
-  },
-  searchBar: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: AppColors.grayBackground,
-    borderRadius: 8,
-    paddingHorizontal: 9,
-    paddingVertical: Platform.OS === 'ios' ? 6 : 2,
-    borderWidth: 1,
-    borderColor: AppColors.grayBorderSecondary,
-    gap: 6,
-  },
-  searchInput: {
-    flex: 1,
-    fontFamily: AppFonts.interMedium,
-    fontSize: 12,
-    color: AppColors.primaryBlack,
-    padding: 0,
-  },
-  exportButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    paddingHorizontal: 9,
-    paddingVertical: 6,
-    borderRadius: 8,
-    backgroundColor: `${AppColors.purple}14`,
-    borderWidth: 1,
-    borderColor: `${AppColors.purple}33`,
-  },
-  exportButtonText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 11,
-    color: AppColors.purple,
-  },
-  scrollArea: {
-    flex: 1,
-  },
-  scrollContent: {
-    padding: 12,
-    gap: 12,
-    paddingBottom: 100,
-  },
-  heroCard: {
-    backgroundColor: AppColors.primaryLight,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: AppColors.grayBorderSecondary,
-    padding: 14,
-    shadowColor: 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.purple,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: AppColors.purple,
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    shadowOffset: {width: 0, height: 2},
-    elevation: 2,
-  },
-  heroTitle: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 15,
-    color: AppColors.primaryBlack,
-    letterSpacing: -0.2,
-  },
-  heroSubtitle: {
-    fontFamily: AppFonts.interRegular,
-    fontSize: 11.5,
-    color: AppColors.grayText,
-    marginTop: 1,
-  },
-  heroBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    backgroundColor: `${AppColors.emerald500}18`,
-    paddingHorizontal: 7,
-    paddingVertical: 3,
-    borderRadius: 6,
-  },
-  pulseDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    backgroundColor: AppColors.emerald500,
-  },
-  heroBadgeText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 9.5,
-    color: AppColors.emerald500,
-  },
-  heroMetricsStrip: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: AppColors.grayBackground,
-    borderRadius: 10,
-    paddingVertical: 8,
-    paddingHorizontal: 10,
-  },
-  heroMetricItem: {
-    flex: 1,
-    alignItems: 'center',
-    paddingHorizontal: 2,
-    minWidth: 0,
-  },
-  heroMetricLabel: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 8.5,
-    color: AppColors.grayTextWeak,
-    letterSpacing: 0.4,
-  },
-  heroMetricValue: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 11,
-    color: AppColors.primaryBlack,
-    marginTop: 2,
-  },
-  heroMetricDivider: {
-    width: 1,
-    height: 20,
-    backgroundColor: AppColors.dividerColor,
-  },
-  sectionCard: {
-    backgroundColor: AppColors.primaryLight,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: AppColors.grayBorderSecondary,
-    padding: 14,
-    shadowColor: AppColors.black,
-    shadowOpacity: 0.03,
-    shadowRadius: 3,
-    shadowOffset: {width: 0, height: 1},
-    elevation: 1,
-  },
-  sectionTitle: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 10.5,
-    color: AppColors.grayTextWeak,
-    letterSpacing: 0.8,
-    marginBottom: 8,
-    textTransform: 'uppercase',
-  },
-  infoRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 9,
-    borderBottomWidth: 1,
-    borderBottomColor: AppColors.dividerColor,
-  },
-  infoLabel: {
-    fontFamily: AppFonts.interMedium,
-    fontSize: 12.5,
-    color: AppColors.primaryBlack,
-  },
-  infoSubtext: {
-    fontFamily: AppFonts.interRegular,
-    fontSize: 10,
-    color: AppColors.grayTextWeak,
-    marginTop: 1,
-  },
-  infoBadge: {
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-    borderRadius: 4,
-    borderWidth: 1,
-  },
-  infoBadgeText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 8.5,
-  },
-  infoValue: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 12,
-    color: AppColors.primaryBlack,
-    flexShrink: 1,
-    textAlign: 'right',
-  },
-  rowCopyBtn: {
-    padding: 4,
-    borderRadius: 4,
-    backgroundColor: AppColors.grayBackground,
-  },
-  emptySearchCard: {
-    backgroundColor: AppColors.primaryLight,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: AppColors.grayBorderSecondary,
-    padding: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 8,
-    marginTop: 8,
-  },
-  emptySearchTitle: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 13.5,
-    color: AppColors.primaryBlack,
-    textAlign: 'center',
-  },
-  emptySearchSubtitle: {
-    fontFamily: AppFonts.interRegular,
-    fontSize: 11.5,
-    color: AppColors.grayTextWeak,
-    textAlign: 'center',
-  },
-  clearSearchBtn: {
-    marginTop: 6,
-    paddingHorizontal: 14,
-    paddingVertical: 6.5,
-    borderRadius: 8,
-    backgroundColor: AppColors.purple,
-  },
-  clearSearchBtnText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 11,
-    color: AppColors.white,
-  },
-});
-
-export default DeviceInfoTab;