react-native-inapp-inspector 2.3.12 → 2.3.14

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

@@ -1,16 +1,17 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { View, Text, ScrollView, StyleSheet, TextInput, TouchableOpacity, NativeModules, Share, } from 'react-native';
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { View, Text, ScrollView, StyleSheet, NativeModules, Share, TouchableOpacity, ActivityIndicator, Animated, Platform, } from 'react-native';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import QRCodeView from '../QRCodeView';
 import TouchableScale from '../TouchableScale';
-import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
-import { useTranslation } from '../../i18n';
-import { BoltIcon, SmartphoneIcon, PackageIcon, RepeatIcon, } from '../NetworkIcons';
-const COMMON_PORTS = [8081, 8082, 8083, 19000];
+import { triggerNativeHaptic } from '../../native/NativeInspector';
+import { InfoCircleIcon, CheckIcon, BoltIcon, CircleXIcon, SparkleIcon, AndroidIcon, RepeatIcon, } from '../NetworkIcons';
+import Svg, { Path } from 'react-native-svg';
+const TerminalConsoleIcon = ({ color = AppColors.purple, size = 13 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M4 17l6-6-6-6M12 19h8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
 export const DebuggingTab = () => {
-    const { t } = useTranslation();
     const detectedConfig = useMemo(() => {
         const scriptURL = NativeModules.SourceCode?.scriptURL || '';
         let host = 'localhost';
@@ -35,609 +36,923 @@ export const DebuggingTab = () => {
         return { host, port, scriptURL };
     }, []);
     const [hostIp, setHostIp] = useState(() => {
-        if (detectedConfig.host === 'localhost' ||
-            detectedConfig.host === '127.0.0.1' ||
-            detectedConfig.host === '10.0.2.2') {
-            return '192.168.1.15';
+        if (detectedConfig.host &&
+            detectedConfig.host !== 'localhost' &&
+            detectedConfig.host !== '127.0.0.1' &&
+            detectedConfig.host !== '10.0.2.2') {
+            return detectedConfig.host;
         }
-        return detectedConfig.host;
+        return '192.168.1.2';
     });
-    const [selectedPort, setSelectedPort] = useState(detectedConfig.port);
-    const [apkPath, setApkPath] = useState('app-debug.apk');
-    const [activeQrTab, setActiveQrTab] = useState('metro');
-    const [isAutoDetecting, setIsAutoDetecting] = useState(false);
-    const [portsStatus, setPortsStatus] = useState({});
-    const probePorts = useCallback(async () => {
-        setIsAutoDetecting(true);
-        const results = {};
-        for (const p of COMMON_PORTS) {
-            results[p] = { port: p, status: 'checking' };
+    const [port, setPort] = useState(detectedConfig.port || 8083);
+    const [apkFileName, setApkFileName] = useState('app-debug.apk');
+    const [apkSizeMb, setApkSizeMb] = useState(null);
+    const [selectedScheme, setSelectedScheme] = useState('assembleRelease');
+    const [isCleanBuild, setIsCleanBuild] = useState(true);
+    const [buildStatus, setBuildStatus] = useState({
+        status: 'idle',
+        scheme: 'assembleRelease',
+        clean: true,
+        progress: 0,
+        currentTask: '',
+        error: null,
+        apkName: null,
+        apkSize: null,
+    });
+    const pollingRef = useRef(null);
+    const progressAnim = useRef(new Animated.Value(0)).current;
+    const [showVerboseLogs, setShowVerboseLogs] = useState(true);
+    const verboseScrollRef = useRef(null);
+    useEffect(() => {
+        Animated.timing(progressAnim, {
+            toValue: Math.max(0, Math.min(100, buildStatus.progress)),
+            duration: 350,
+            useNativeDriver: false,
+        }).start();
+    }, [buildStatus.progress, progressAnim]);
+    useEffect(() => {
+        if (buildStatus.logs && buildStatus.logs.length > 0) {
+            setTimeout(() => {
+                verboseScrollRef.current?.scrollToEnd({ animated: true });
+            }, 50);
         }
-        setPortsStatus({ ...results });
-        let foundActivePort = null;
-        for (const p of COMMON_PORTS) {
-            const startTime = Date.now();
-            try {
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 1500);
-                const res = await fetch(`http://localhost:${p}/status`, {
-                    signal: controller.signal,
-                });
-                clearTimeout(timeoutId);
-                const text = await res.text();
-                const latency = Date.now() - startTime;
-                if (res.ok && text.includes('packager-status:running')) {
-                    results[p] = { port: p, status: 'active', latencyMs: latency };
-                    if (!foundActivePort)
-                        foundActivePort = p;
+    }, [buildStatus.logs]);
+    const fetchMetroTelemetry = useCallback(async () => {
+        const hostsToTry = Array.from(new Set([detectedConfig.host, '10.0.2.2', 'localhost', '127.0.0.1'].filter(Boolean)));
+        const portsToTry = Array.from(new Set([detectedConfig.port, 8083, 8081, 8082].filter(Boolean)));
+        for (const h of hostsToTry) {
+            for (const p of portsToTry) {
+                try {
+                    const controller = new AbortController();
+                    const timeoutId = setTimeout(() => controller.abort(), 1200);
+                    const res = await fetch(`http://${h}:${p}/__inapp_inspector/apk-info`, {
+                        signal: controller.signal,
+                    });
+                    clearTimeout(timeoutId);
+                    if (res.ok) {
+                        const data = await res.json();
+                        if (data.hostIp &&
+                            data.hostIp !== '127.0.0.1' &&
+                            data.hostIp !== 'localhost' &&
+                            data.hostIp !== '10.0.2.2') {
+                            setHostIp(data.hostIp);
+                        }
+                        if (data.port) {
+                            setPort(data.port);
+                        }
+                        if (data.apkName) {
+                            setApkFileName(data.apkName);
+                        }
+                        if (data.apkSize) {
+                            setApkSizeMb((data.apkSize / (1024 * 1024)).toFixed(1));
+                        }
+                        return;
+                    }
                 }
-                else {
-                    results[p] = { port: p, status: 'inactive' };
+                catch { }
+            }
+        }
+    }, [detectedConfig.host, detectedConfig.port]);
+    useEffect(() => {
+        fetchMetroTelemetry();
+    }, [fetchMetroTelemetry]);
+    useEffect(() => {
+        return () => {
+            if (pollingRef.current) {
+                clearInterval(pollingRef.current);
+            }
+        };
+    }, []);
+    const pollBuildStatus = useCallback(() => {
+        if (pollingRef.current)
+            clearInterval(pollingRef.current);
+        const targetHost = detectedConfig.host || '10.0.2.2';
+        pollingRef.current = setInterval(async () => {
+            try {
+                const res = await fetch(`http://${targetHost}:${port}/__inapp_inspector/build-status`);
+                if (res.ok) {
+                    const data = await res.json();
+                    setBuildStatus(data);
+                    if (data.status === 'completed') {
+                        if (pollingRef.current)
+                            clearInterval(pollingRef.current);
+                        triggerNativeHaptic('success');
+                        showToast('✓ APK Build Generated Successfully!');
+                        if (data.apkSize) {
+                            setApkSizeMb((data.apkSize / (1024 * 1024)).toFixed(1));
+                        }
+                        if (data.apkName) {
+                            setApkFileName(data.apkName);
+                        }
+                        fetchMetroTelemetry();
+                    }
+                    else if (data.status === 'failed') {
+                        if (pollingRef.current)
+                            clearInterval(pollingRef.current);
+                        triggerNativeHaptic('error');
+                        showToast('✕ Build Failed: ' + (data.error || 'Gradle error'));
+                    }
                 }
             }
-            catch {
-                results[p] = { port: p, status: 'inactive' };
+            catch { }
+        }, 1000);
+    }, [detectedConfig.host, port, fetchMetroTelemetry]);
+    const handleStartBuild = async () => {
+        triggerNativeHaptic('medium');
+        setBuildStatus({
+            status: 'running',
+            scheme: selectedScheme,
+            clean: isCleanBuild,
+            progress: 5,
+            currentTask: isCleanBuild ? 'Cleaning build cache...' : 'Initializing build...',
+            error: null,
+            apkName: null,
+            apkSize: null,
+        });
+        const hostsToTry = Array.from(new Set([detectedConfig.host, '10.0.2.2', 'localhost', '127.0.0.1'].filter(Boolean)));
+        const portsToTry = Array.from(new Set([port, 8083, 8081, 8082].filter(Boolean)));
+        let buildTriggered = false;
+        for (const h of hostsToTry) {
+            for (const p of portsToTry) {
+                try {
+                    const controller = new AbortController();
+                    const timeoutId = setTimeout(() => controller.abort(), 2000);
+                    const res = await fetch(`http://${h}:${p}/__inapp_inspector/build-apk?scheme=${selectedScheme}&clean=${isCleanBuild}`, { signal: controller.signal });
+                    clearTimeout(timeoutId);
+                    if (res.ok) {
+                        buildTriggered = true;
+                        pollBuildStatus();
+                        return;
+                    }
+                }
+                catch { }
             }
-            setPortsStatus({ ...results });
         }
-        if (foundActivePort) {
-            setSelectedPort(foundActivePort);
-            showToast(`Detected Metro running on Port ${foundActivePort}!`);
+        if (!buildTriggered) {
+            setBuildStatus(prev => ({
+                ...prev,
+                status: 'failed',
+                error: 'Cannot reach build server. Ensure npm start or npm run serve-apk is running on host.',
+            }));
         }
-        setIsAutoDetecting(false);
-    }, []);
-    useEffect(() => {
-        probePorts();
-    }, [probePorts]);
-    const metroBundleUrl = `http://${hostIp}:${selectedPort}/index.bundle?platform=android&dev=true`;
-    const directServerUrl = `http://${hostIp}:${selectedPort}`;
-    const apkDownloadUrl = `http://${hostIp}:${selectedPort}/${apkPath}`;
-    const devSettingsHost = `${hostIp}:${selectedPort}`;
-    const currentQrValue = useMemo(() => {
-        if (activeQrTab === 'apk')
-            return apkDownloadUrl;
-        if (activeQrTab === 'host')
-            return devSettingsHost;
-        return directServerUrl;
-    }, [activeQrTab, apkDownloadUrl, devSettingsHost, directServerUrl]);
-    const activePortInfo = portsStatus[selectedPort];
-    return (<ScrollView style={styles.container} contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+    };
+    const handleStopBuild = async () => {
+        triggerNativeHaptic('warning');
+        if (pollingRef.current)
+            clearInterval(pollingRef.current);
+        const hostsToTry = Array.from(new Set([detectedConfig.host, '10.0.2.2', 'localhost', '127.0.0.1'].filter(Boolean)));
+        const portsToTry = Array.from(new Set([port, 8083, 8081, 8082].filter(Boolean)));
+        for (const h of hostsToTry) {
+            for (const p of portsToTry) {
+                try {
+                    const controller = new AbortController();
+                    const timeoutId = setTimeout(() => controller.abort(), 1500);
+                    await fetch(`http://${h}:${p}/__inapp_inspector/stop-build`, {
+                        signal: controller.signal,
+                    });
+                    clearTimeout(timeoutId);
+                }
+                catch { }
+            }
+        }
+        setBuildStatus(prev => ({
+            ...prev,
+            status: 'idle',
+            currentTask: 'Build cancelled by user',
+            logs: [...(prev.logs || []), '🛑 Build cancelled by user.'],
+        }));
+        showToast('Build cancelled');
+    };
+    const apkDownloadUrl = `http://${hostIp}:${port}/${apkFileName.replace(/^\/+/, '')}`;
+    const handleShare = () => {
+        triggerNativeHaptic('light');
+        Share.share({
+            message: apkDownloadUrl,
+            title: 'Install Android APK',
+        });
+    };
+    const isBuilding = buildStatus.status === 'running';
+    return (<ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
       
-      <View style={styles.serverCard}>
-        <View style={styles.serverCardTop}>
-          <View style={styles.serverStatusLeft}>
-            <View style={[
-            styles.statusDot,
-            {
-                backgroundColor: activePortInfo?.status === 'active'
-                    ? AppColors.greenColor
-                    : activePortInfo?.status === 'checking'
-                        ? AppColors.warningIconGold
-                        : AppColors.errorColor,
-            },
-        ]}/>
-            <View>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                <Text style={styles.serverTitle}>Metro Dev Server</Text>
-                <View style={styles.portPill}>
-                  <Text style={styles.portPillText}>Port {selectedPort}</Text>
-                </View>
-              </View>
-              <Text style={styles.serverSubtitle}>
-                {activePortInfo?.status === 'active'
-            ? `🟢 Active & Bundling (${activePortInfo.latencyMs}ms)`
-            : activePortInfo?.status === 'checking'
-                ? '🟡 Probing Metro Ports...'
-                : '🔴 Standby / Select active port'}
-              </Text>
-            </View>
+      <View style={styles.heroCard}>
+        <View style={styles.heroHeader}>
+          <View style={styles.heroIconWrap}>
+            <AndroidIcon size={20} color={AppColors.white}/>
+          </View>
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <Text style={styles.heroTitle} numberOfLines={1}>
+              Multi-Device APK Installer
+            </Text>
+            <Text style={styles.heroSubtitle} numberOfLines={1}>
+              Scan QR code with another Android device to download
+            </Text>
+          </View>
+          <View style={styles.heroBadge}>
+            <View style={styles.pulseDot}/>
+            <Text style={styles.heroBadgeText}>Live Metro</Text>
           </View>
-
-          <TouchableScale onPress={probePorts} style={styles.scanBtn} hitSlop={8}>
-            <RepeatIcon size={12} color={AppColors.purple}/>
-            <Text style={styles.scanBtnText}>Re-scan</Text>
-          </TouchableScale>
         </View>
 
         
-        <View style={styles.portsRow}>
-          {COMMON_PORTS.map(p => {
-            const isSelected = selectedPort === p;
-            const pInfo = portsStatus[p];
-            const isActive = pInfo?.status === 'active';
-            return (<TouchableOpacity key={p} activeOpacity={0.7} onPress={() => setSelectedPort(p)} style={[
-                    styles.portChip,
-                    isSelected && styles.portChipSelected,
-                    isActive && { borderColor: AppColors.greenColor },
-                ]}>
-                <View style={[
-                    styles.portMiniDot,
-                    {
-                        backgroundColor: isActive
-                            ? AppColors.greenColor
-                            : AppColors.grayTextWeak,
-                    },
-                ]}/>
-                <Text style={[
-                    styles.portChipText,
-                    isSelected && styles.portChipTextSelected,
-                ]}>
-                  {p}
-                </Text>
-                {isActive && (<View style={styles.liveBadge}>
-                    <Text style={styles.liveBadgeText}>LIVE</Text>
-                  </View>)}
-              </TouchableOpacity>);
-        })}
+        <View style={styles.heroMetricsStrip}>
+          <View style={styles.heroMetricItem}>
+            <Text style={styles.heroMetricLabel}>HOST IP</Text>
+            <Text style={styles.heroMetricValue} numberOfLines={1}>
+              {hostIp}
+            </Text>
+          </View>
+          <View style={styles.heroMetricDivider}/>
+          <View style={styles.heroMetricItem}>
+            <Text style={styles.heroMetricLabel}>PORT</Text>
+            <Text style={styles.heroMetricValue}>{port}</Text>
+          </View>
+          <View style={styles.heroMetricDivider}/>
+          <View style={styles.heroMetricItem}>
+            <Text style={styles.heroMetricLabel}>APK SIZE</Text>
+            <Text style={[
+            styles.heroMetricValue,
+            { color: apkSizeMb ? AppColors.emerald500 : AppColors.grayTextWeak },
+        ]}>
+              {apkSizeMb ? `${apkSizeMb} MB` : 'Detected'}
+            </Text>
+          </View>
+          <View style={styles.heroMetricDivider}/>
+          <View style={styles.heroMetricItem}>
+            <Text style={styles.heroMetricLabel}>STATUS</Text>
+            <Text style={[
+            styles.heroMetricValue,
+            { color: AppColors.emerald500 },
+        ]}>
+              Ready
+            </Text>
+          </View>
         </View>
       </View>
 
       
-      <View style={styles.card}>
-        <View style={styles.cardHeader}>
-          <Text style={styles.cardTitle}>HOST IP & BUNDLE LOCATION</Text>
-          <TouchableOpacity onPress={() => {
-            if (detectedConfig.host !== 'localhost' &&
-                detectedConfig.host !== '127.0.0.1' &&
-                detectedConfig.host !== '10.0.2.2') {
-                setHostIp(detectedConfig.host);
-                showToast(`Reset to detected IP: ${detectedConfig.host}`);
-            }
-        }}>
-            <Text style={styles.headerActionText}>Reset to Detected</Text>
+      <View style={styles.sectionCard}>
+        <View style={styles.sectionHeaderRow}>
+          <Text style={styles.sectionTitle}>QR CODE & DIRECT DOWNLOAD</Text>
+          <TouchableOpacity activeOpacity={0.7} onPress={fetchMetroTelemetry} style={styles.refreshBtn}>
+            <RepeatIcon size={12} color={AppColors.purple}/>
+            <Text style={styles.refreshBtnText}>Refresh</Text>
           </TouchableOpacity>
         </View>
 
-        <View style={styles.inputContainer}>
-          <Text style={styles.inputPrefix}>http://</Text>
-          <TextInput style={styles.input} value={hostIp} onChangeText={setHostIp} placeholder="192.168.1.15" placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-          <Text style={styles.inputSuffix}>:{selectedPort}</Text>
+        
+        <View style={styles.qrCenteredWrapper}>
+          <View style={styles.qrInnerFrame}>
+            <QRCodeView value={apkDownloadUrl} size={235} color={AppColors.primaryBlack} backgroundColor={AppColors.white}/>
+          </View>
         </View>
-        <Text style={styles.inputHint}>
-          💡 Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
-        </Text>
       </View>
 
       
-      <View style={styles.qrCard}>
+      <View style={styles.sectionCard}>
+        <View style={styles.sectionHeaderRow}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <BoltIcon size={13} color={AppColors.purple}/>
+            <Text style={styles.sectionTitle}>BUILD GENERATOR (GRADLE)</Text>
+          </View>
+          {buildStatus.status === 'completed' && (<View style={styles.completedBadge}>
+              <CheckIcon size={10} color={AppColors.emerald500}/>
+              <Text style={styles.completedBadgeText}>100% Ready</Text>
+            </View>)}
+        </View>
+
         
-        <View style={styles.qrTabsRow}>
-          <TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('metro')} style={[
-            styles.qrTab,
-            activeQrTab === 'metro' && styles.qrTabActive,
+        <View style={styles.subTabStrip}>
+          <TouchableOpacity disabled={isBuilding} activeOpacity={0.7} onPress={() => {
+            triggerNativeHaptic('light');
+            setSelectedScheme('assembleRelease');
+        }} style={[
+            styles.subTabItem,
+            selectedScheme === 'assembleRelease' && styles.subTabItemActive,
         ]}>
-            <BoltIcon size={13} color={activeQrTab === 'metro' ? AppColors.white : AppColors.grayText}/>
             <Text style={[
-            styles.qrTabText,
-            activeQrTab === 'metro' && styles.qrTabTextActive,
+            styles.subTabText,
+            selectedScheme === 'assembleRelease' && styles.subTabTextActive,
         ]}>
-              Metro Live Reload
+              ⚡ Release (assembleRelease)
             </Text>
           </TouchableOpacity>
 
-          <TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('apk')} style={[
-            styles.qrTab,
-            activeQrTab === 'apk' && styles.qrTabActive,
+          <TouchableOpacity disabled={isBuilding} activeOpacity={0.7} onPress={() => {
+            triggerNativeHaptic('light');
+            setSelectedScheme('assembleDebug');
+        }} style={[
+            styles.subTabItem,
+            selectedScheme === 'assembleDebug' && styles.subTabItemActive,
         ]}>
-            <PackageIcon size={13} color={activeQrTab === 'apk' ? AppColors.white : AppColors.grayText}/>
             <Text style={[
-            styles.qrTabText,
-            activeQrTab === 'apk' && styles.qrTabTextActive,
+            styles.subTabText,
+            selectedScheme === 'assembleDebug' && styles.subTabTextActive,
         ]}>
-              Install Debug APK
+              🛠 Debug (assembleDebug)
             </Text>
           </TouchableOpacity>
+        </View>
 
-          <TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('host')} style={[
-            styles.qrTab,
-            activeQrTab === 'host' && styles.qrTabActive,
-        ]}>
-            <SmartphoneIcon size={13} color={activeQrTab === 'host' ? AppColors.white : AppColors.grayText}/>
-            <Text style={[
-            styles.qrTabText,
-            activeQrTab === 'host' && styles.qrTabTextActive,
+        
+        <TouchableOpacity disabled={isBuilding} activeOpacity={0.7} onPress={() => {
+            triggerNativeHaptic('light');
+            setIsCleanBuild(!isCleanBuild);
+        }} style={styles.cleanRow}>
+          <View style={[
+            styles.checkboxBox,
+            isCleanBuild && styles.checkboxBoxActive,
         ]}>
-              Dev Host Info
-            </Text>
-          </TouchableOpacity>
-        </View>
+            {isCleanBuild && <CheckIcon size={11} color={AppColors.white}/>}
+          </View>
+          <Text style={styles.cleanLabel}>
+            Clean build cache <Text style={styles.cleanCode}>(./gradlew clean)</Text>
+          </Text>
+        </TouchableOpacity>
 
         
-        <View style={styles.qrWrapper}>
-          <QRCodeView value={currentQrValue} size={190} color={AppColors.primaryBlack} backgroundColor={AppColors.white}/>
+        {isBuilding && (<View style={styles.progressContainer}>
+            <View style={styles.progressTopRow}>
+              <View style={styles.progressTaskGroup}>
+                <ActivityIndicator size="small" color={AppColors.purple}/>
+                <Text style={styles.progressTaskText} numberOfLines={1}>
+                  {buildStatus.currentTask || 'Executing Gradle tasks...'}
+                </Text>
+              </View>
+              <Text style={styles.progressPercentageText}>
+                {buildStatus.progress}%
+              </Text>
+            </View>
 
-          <View style={styles.qrInfoBox}>
-            <Text style={styles.qrTargetTitle}>
-              {activeQrTab === 'apk'
-            ? '📦 Direct APK Download URL'
-            : activeQrTab === 'host'
-                ? '📱 Dev Settings Bundle Host'
-                : '⚡ Live Metro Fast-Refresh Endpoint'}
-            </Text>
-            <Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
-              {currentQrValue}
-            </Text>
-          </View>
-        </View>
+            
+            <View style={styles.progressBarTrack}>
+              <Animated.View style={[
+                styles.progressBarFill,
+                {
+                    width: progressAnim.interpolate({
+                        inputRange: [0, 100],
+                        outputRange: ['5%', '100%'],
+                    }),
+                },
+            ]}/>
+            </View>
+          </View>)}
 
         
-        <View style={styles.qrActionsRow}>
-          <TouchableScale onPress={() => copyToClipboard(currentQrValue, 'QR Link')} style={styles.actionBtn}>
-            <Text style={styles.actionBtnText}>Copy Link</Text>
-          </TouchableScale>
+        {buildStatus.status === 'failed' && (<View style={styles.errorContainer}>
+            <CircleXIcon size={13} color={AppColors.errorColor}/>
+            <Text style={styles.errorText} numberOfLines={2}>
+              {buildStatus.error || 'Build execution failed.'}
+            </Text>
+          </View>)}
 
-          <TouchableScale onPress={() => {
-            Share.share({
-                message: currentQrValue,
-                title: 'Metro Debug Link',
-            });
-        }} style={[styles.actionBtn, styles.actionBtnPrimary]}>
-            <Text style={styles.actionBtnPrimaryText}>Share to Device</Text>
-          </TouchableScale>
-        </View>
-      </View>
+        
+        {((buildStatus.logs && buildStatus.logs.length > 0) || isBuilding) && (<View style={styles.consoleContainer}>
+            <View style={styles.consoleHeaderRow}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <TerminalConsoleIcon color="#38BDF8" size={12}/>
+                <Text style={styles.consoleHeaderTitle}>GRADLE VERBOSE OUTPUT</Text>
+              </View>
+              <TouchableOpacity activeOpacity={0.7} onPress={() => setShowVerboseLogs(!showVerboseLogs)} style={styles.consoleToggleBtn}>
+                <Text style={styles.consoleToggleText}>
+                  {showVerboseLogs ? 'Hide Console' : 'Show Console'}
+                </Text>
+              </TouchableOpacity>
+            </View>
 
-      
-      <View style={styles.guideCard}>
-        <Text style={styles.guideHeading}>📱 HOW TO CONNECT ANDROID DEVICE:</Text>
+            {showVerboseLogs && (<ScrollView ref={verboseScrollRef} style={styles.consoleLogBox} contentContainerStyle={styles.consoleLogContent} nestedScrollEnabled showsVerticalScrollIndicator>
+                {buildStatus.logs && buildStatus.logs.length > 0 ? (buildStatus.logs.map((logLine, idx) => {
+                    let logColor = '#94A3B8';
+                    if (logLine.startsWith('> Task :'))
+                        logColor = '#38BDF8';
+                    else if (logLine.includes('BUILD SUCCESSFUL'))
+                        logColor = '#4ADE80';
+                    else if (logLine.includes('FAILURE') || logLine.includes('error:'))
+                        logColor = '#F87171';
+                    else if (logLine.includes('UP-TO-DATE'))
+                        logColor = '#A78BFA';
+                    return (<Text key={idx} style={[styles.consoleLogLine, { color: logColor }]}>
+                        {logLine}
+                      </Text>);
+                })) : (<Text style={styles.consoleLogPlaceholder}>
+                    Waiting for Gradle daemon output...
+                  </Text>)}
+              </ScrollView>)}
+          </View>)}
 
-        <View style={styles.stepRow}>
-          <View style={styles.stepNumberBadge}>
-            <Text style={styles.stepNumberText}>1</Text>
-          </View>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.stepTitle}>Connect to Same Wi-Fi</Text>
-            <Text style={styles.stepDesc}>
-              Make sure your Android phone is connected to the same Wi-Fi router or Mac Mobile Hotspot.
-            </Text>
-          </View>
-        </View>
+        
+        {isBuilding ? (<View style={styles.buildingActionsRow}>
+            <View style={styles.buildingStatusPill}>
+              <ActivityIndicator size="small" color={AppColors.purple}/>
+              <Text style={styles.buildingStatusPillText} numberOfLines={1}>
+                Building ({buildStatus.progress}%)
+              </Text>
+            </View>
 
-        <View style={styles.stepRow}>
-          <View style={styles.stepNumberBadge}>
-            <Text style={styles.stepNumberText}>2</Text>
-          </View>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.stepTitle}>Scan to Install / Connect</Text>
-            <Text style={styles.stepDesc}>
-              Open Android Camera or browser, scan the QR code above to download the APK or connect Metro.
-            </Text>
-          </View>
-        </View>
+            <TouchableScale onPress={handleStopBuild} style={styles.stopBtn}>
+              <CircleXIcon size={13} color={AppColors.white}/>
+              <Text style={styles.stopBtnText}>Stop Build</Text>
+            </TouchableScale>
+          </View>) : (<TouchableScale onPress={handleStartBuild} style={styles.generateBtn}>
+            <View style={styles.ctaContentRow}>
+              <SparkleIcon size={14} color={AppColors.white}/>
+              <Text style={styles.generateBtnText}>
+                {isCleanBuild ? 'Clean & Generate Build' : 'Generate Build'}
+              </Text>
+            </View>
+          </TouchableScale>)}
+      </View>
 
-        <View style={styles.stepRow}>
-          <View style={styles.stepNumberBadge}>
-            <Text style={styles.stepNumberText}>3</Text>
-          </View>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh ⚡</Text>
-            <Text style={styles.stepDesc}>
-              Any changes saved in VS Code will immediately update <Text style={{ fontWeight: '700' }}>both the iOS Simulator and physical Android phone</Text> in real-time!
-            </Text>
-          </View>
-        </View>
+      
+      <View style={styles.footerNoteRow}>
+        <InfoCircleIcon size={13} color={AppColors.grayTextWeak}/>
+        <Text style={styles.footerNoteText}>
+          Ensure both Android devices are connected to the same Wi-Fi network.
+        </Text>
       </View>
     </ScrollView>);
 };
 const styles = StyleSheet.create({
-    container: {
+    scrollArea: {
         flex: 1,
         backgroundColor: AppColors.contentBg,
     },
-    content: {
+    scrollContent: {
         padding: 12,
         gap: 12,
-        paddingBottom: 40,
+        paddingBottom: 100,
     },
-    serverCard: {
+    heroCard: {
         backgroundColor: AppColors.primaryLight,
         borderRadius: 14,
-        padding: 14,
         borderWidth: 1,
         borderColor: AppColors.grayBorderSecondary,
+        padding: 14,
         shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.05,
+        shadowOpacity: 0.04,
         shadowRadius: 4,
-        elevation: 2,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 1,
         gap: 12,
     },
-    serverCardTop: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    serverStatusLeft: {
+    heroHeader: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 10,
-        flex: 1,
     },
-    statusDot: {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
+    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,
     },
-    serverTitle: {
+    heroTitle: {
         fontFamily: AppFonts.interBold,
         fontSize: 15,
         color: AppColors.primaryBlack,
+        letterSpacing: -0.2,
     },
-    serverSubtitle: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
+    heroSubtitle: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11.5,
         color: AppColors.grayText,
-        marginTop: 2,
-    },
-    portPill: {
-        backgroundColor: `${AppColors.purple}18`,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 6,
-    },
-    portPillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.purple,
+        marginTop: 1,
     },
-    scanBtn: {
+    heroBadge: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 4,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
+        backgroundColor: `${AppColors.emerald500}18`,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
         borderRadius: 6,
-        backgroundColor: `${AppColors.purple}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}30`,
     },
-    scanBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.purple,
+    pulseDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: AppColors.emerald500,
     },
-    portsRow: {
-        flexDirection: 'row',
-        gap: 8,
+    heroBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.emerald500,
     },
-    portChip: {
-        flex: 1,
+    heroMetricsStrip: {
         flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'center',
-        gap: 4,
-        paddingVertical: 7,
-        borderRadius: 8,
         backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderRadius: 10,
+        paddingVertical: 8,
+        paddingHorizontal: 10,
     },
-    portChipSelected: {
-        backgroundColor: `${AppColors.purple}18`,
-        borderColor: AppColors.purple,
+    heroMetricItem: {
+        flex: 1,
+        alignItems: 'center',
+        paddingHorizontal: 2,
+        minWidth: 0,
     },
-    portMiniDot: {
-        width: 5,
-        height: 5,
-        borderRadius: 2.5,
+    heroMetricLabel: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 8.5,
+        color: AppColors.grayTextWeak,
+        letterSpacing: 0.4,
     },
-    portChipText: {
+    heroMetricValue: {
         fontFamily: AppFonts.interBold,
         fontSize: 11,
-        color: AppColors.grayTextStrong,
-    },
-    portChipTextSelected: {
-        color: AppColors.purple,
-    },
-    liveBadge: {
-        backgroundColor: AppColors.greenColor,
-        paddingHorizontal: 3,
-        paddingVertical: 0.5,
-        borderRadius: 3,
+        color: AppColors.primaryBlack,
+        marginTop: 2,
     },
-    liveBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 7.5,
-        color: AppColors.white,
+    heroMetricDivider: {
+        width: 1,
+        height: 20,
+        backgroundColor: AppColors.dividerColor,
     },
-    card: {
+    sectionCard: {
         backgroundColor: AppColors.primaryLight,
         borderRadius: 14,
-        padding: 14,
         borderWidth: 1,
         borderColor: AppColors.grayBorderSecondary,
+        padding: 14,
         shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.05,
-        shadowRadius: 4,
-        elevation: 2,
-        gap: 8,
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+        gap: 12,
     },
-    cardHeader: {
+    sectionHeaderRow: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
     },
-    cardTitle: {
+    sectionTitle: {
         fontFamily: AppFonts.interBold,
-        fontSize: 11,
+        fontSize: 10.5,
         color: AppColors.grayTextWeak,
-        letterSpacing: 0.6,
+        letterSpacing: 0.8,
+        textTransform: 'uppercase',
+    },
+    refreshBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 6,
+        backgroundColor: `${AppColors.purple}12`,
     },
-    headerActionText: {
+    refreshBtnText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 11,
+        fontSize: 10,
         color: AppColors.purple,
     },
-    inputContainer: {
+    qrCenteredWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors.grayBackground,
+        padding: 12,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    qrInnerFrame: {
+        backgroundColor: AppColors.white,
+        padding: 6,
+        borderRadius: 8,
+    },
+    urlBox: {
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: AppColors.grayBackground,
         borderRadius: 10,
+        paddingLeft: 10,
+        paddingRight: 6,
+        paddingVertical: 6,
         borderWidth: 1,
         borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 10,
-        height: 40,
+        gap: 8,
     },
-    inputPrefix: {
+    urlText: {
+        flex: 1,
         fontFamily: AppFonts.interMedium,
-        fontSize: 12.5,
-        color: AppColors.grayTextWeak,
+        fontSize: 11.5,
+        color: AppColors.skyBlue,
     },
-    input: {
+    actionsRow: {
+        flexDirection: 'row',
+        gap: 10,
+    },
+    actionBtnSecondary: {
         flex: 1,
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-        paddingVertical: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+        paddingVertical: 9,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        backgroundColor: AppColors.grayBackground,
     },
-    inputSuffix: {
+    actionBtnSecondaryText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.purple,
-    },
-    inputHint: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-        lineHeight: 15,
+        fontSize: 12,
+        color: AppColors.grayTextStrong,
     },
-    qrCard: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 14,
-        padding: 14,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.05,
+    actionBtnPrimary: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+        paddingVertical: 9,
+        borderRadius: 10,
+        backgroundColor: AppColors.purple,
+        shadowColor: AppColors.purple,
+        shadowOpacity: 0.25,
         shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
         elevation: 2,
+    },
+    actionBtnPrimaryText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.white,
+    },
+    completedBadge: {
+        flexDirection: 'row',
         alignItems: 'center',
-        gap: 14,
+        gap: 3,
+        backgroundColor: `${AppColors.emerald500}18`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 5,
+    },
+    completedBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.emerald500,
     },
-    qrTabsRow: {
+    subTabStrip: {
         flexDirection: 'row',
         backgroundColor: AppColors.grayBackground,
-        borderRadius: 10,
-        padding: 3,
-        width: '100%',
-        gap: 4,
+        borderRadius: 8,
+        padding: 2,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
     },
-    qrTab: {
+    subTabItem: {
         flex: 1,
-        flexDirection: 'row',
+        paddingVertical: 7,
+        borderRadius: 6,
         alignItems: 'center',
         justifyContent: 'center',
-        gap: 4,
-        paddingVertical: 7,
-        borderRadius: 8,
     },
-    qrTabActive: {
+    subTabItemActive: {
         backgroundColor: AppColors.purple,
+        shadowColor: AppColors.purple,
+        shadowOpacity: 0.2,
+        shadowRadius: 3,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
     },
-    qrTabText: {
+    subTabText: {
         fontFamily: AppFonts.interMedium,
         fontSize: 11,
         color: AppColors.grayText,
     },
-    qrTabTextActive: {
-        color: AppColors.white,
+    subTabTextActive: {
         fontFamily: AppFonts.interBold,
+        color: AppColors.white,
     },
-    qrWrapper: {
+    cleanRow: {
+        flexDirection: 'row',
         alignItems: 'center',
-        gap: 12,
+        gap: 8,
+        paddingVertical: 2,
     },
-    qrInfoBox: {
+    checkboxBox: {
+        width: 18,
+        height: 18,
+        borderRadius: 4,
+        borderWidth: 1.5,
+        borderColor: AppColors.grayBorderSecondary,
+        backgroundColor: AppColors.grayBackground,
         alignItems: 'center',
-        maxWidth: 280,
-        gap: 2,
+        justifyContent: 'center',
     },
-    qrTargetTitle: {
-        fontFamily: AppFonts.interBold,
+    checkboxBoxActive: {
+        backgroundColor: AppColors.purple,
+        borderColor: AppColors.purple,
+    },
+    cleanLabel: {
+        fontFamily: AppFonts.interMedium,
         fontSize: 11.5,
-        color: AppColors.primaryBlack,
+        color: AppColors.grayTextStrong,
     },
-    qrTargetUrl: {
+    cleanCode: {
         fontFamily: AppFonts.interRegular,
+        color: AppColors.grayTextWeak,
         fontSize: 10.5,
-        color: AppColors.skyBlue,
-        textAlign: 'center',
-    },
-    qrActionsRow: {
-        flexDirection: 'row',
-        gap: 10,
-        width: '100%',
     },
-    actionBtn: {
-        flex: 1,
-        paddingVertical: 10,
+    progressContainer: {
+        backgroundColor: AppColors.grayBackground,
         borderRadius: 10,
+        padding: 10,
+        gap: 6,
         borderWidth: 1,
         borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.grayBackground,
+    },
+    progressTopRow: {
+        flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'center',
+        justifyContent: 'space-between',
+    },
+    progressTaskGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flex: 1,
+        paddingRight: 8,
     },
-    actionBtnText: {
+    progressTaskText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.primaryBlack,
+        flex: 1,
+    },
+    progressPercentageText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.grayTextStrong,
+        fontSize: 11.5,
+        color: AppColors.purple,
     },
-    actionBtnPrimary: {
+    progressBarTrack: {
+        width: '100%',
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: AppColors.grayBorderSecondary,
+        overflow: 'hidden',
+    },
+    progressBarFill: {
+        height: '100%',
         backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
+        borderRadius: 3,
     },
-    actionBtnPrimaryText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.white,
+    errorContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        backgroundColor: `${AppColors.errorColor}12`,
+        padding: 8,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: `${AppColors.errorColor}25`,
     },
-    guideCard: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 14,
-        padding: 14,
+    errorText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.errorColor,
+        flex: 1,
+    },
+    consoleContainer: {
+        backgroundColor: '#0F172A',
+        borderRadius: 10,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        gap: 10,
+        borderColor: '#1E293B',
+        overflow: 'hidden',
+        marginTop: 4,
+    },
+    consoleHeaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: '#1E293B',
+        paddingHorizontal: 10,
+        paddingVertical: 6,
     },
-    guideHeading: {
+    consoleHeaderTitle: {
         fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.6,
+        fontSize: 10,
+        color: '#38BDF8',
+        letterSpacing: 0.5,
+    },
+    consoleToggleBtn: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        backgroundColor: 'rgba(255,255,255,0.1)',
+    },
+    consoleToggleText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 9.5,
+        color: '#94A3B8',
+    },
+    consoleLogBox: {
+        maxHeight: 140,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+    },
+    consoleLogContent: {
+        gap: 3,
+    },
+    consoleLogLine: {
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 10,
+        lineHeight: 14,
+    },
+    consoleLogPlaceholder: {
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 10,
+        color: '#64748B',
+        fontStyle: 'italic',
+    },
+    generateBtn: {
+        backgroundColor: AppColors.purple,
+        borderRadius: 10,
+        paddingVertical: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors.purple,
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+    },
+    generateBtnDisabled: {
+        opacity: 0.7,
     },
-    stepRow: {
+    buildingActionsRow: {
         flexDirection: 'row',
-        alignItems: 'flex-start',
+        alignItems: 'center',
         gap: 10,
     },
-    stepNumberBadge: {
-        width: 22,
-        height: 22,
-        borderRadius: 11,
-        backgroundColor: `${AppColors.purple}18`,
+    buildingStatusPill: {
+        flex: 1,
+        flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        marginTop: 1,
+        gap: 8,
+        backgroundColor: `${AppColors.purple}14`,
+        borderRadius: 10,
+        paddingVertical: 10,
+        borderWidth: 1,
+        borderColor: `${AppColors.purple}30`,
     },
-    stepNumberText: {
+    buildingStatusPillText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 11,
+        fontSize: 12,
         color: AppColors.purple,
     },
-    stepTitle: {
+    stopBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+        backgroundColor: AppColors.errorColor,
+        borderRadius: 10,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        shadowColor: AppColors.errorColor,
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+    },
+    stopBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.white,
+    },
+    ctaContentRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    generateBtnText: {
         fontFamily: AppFonts.interBold,
         fontSize: 12.5,
-        color: AppColors.primaryBlack,
+        color: AppColors.white,
+    },
+    footerNoteRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 8,
     },
-    stepDesc: {
+    footerNoteText: {
         fontFamily: AppFonts.interRegular,
         fontSize: 11,
-        color: AppColors.grayText,
-        lineHeight: 16,
-        marginTop: 1,
+        color: AppColors.grayTextWeak,
+        textAlign: 'center',
+        flex: 1,
     },
 });
 export default DebuggingTab;