react-native-inapp-inspector 2.3.12 → 2.3.14

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

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