react-native-inapp-inspector 2.3.13 → 2.3.14

package/src/components/Inspector/DebuggingTab.tsx

@@ -1,14 +1,15 @@
-import React, {useState, useEffect, useMemo, useCallback} from 'react';
+import React, {useState, useEffect, useMemo, useCallback, useRef} from 'react';
 import {
   View,
   Text,
   ScrollView,
   StyleSheet,
-  TextInput,
-  TouchableOpacity,
   NativeModules,
-  Platform,
   Share,
+  TouchableOpacity,
+  ActivityIndicator,
+  Animated,
+  Platform,
 } from 'react-native';
 import {useInspector} from './InspectorContext';
 import {AppColors} from '../../styles/AppColors';
@@ -18,33 +19,40 @@ import TouchableScale from '../TouchableScale';
 import CopyButton from '../CopyButton';
 import {copyToClipboard} from '../../helpers';
 import {showToast} from '../../helpers/toast';
-import {useTranslation} from '../../i18n';
+import {triggerNativeHaptic} from '../../native/NativeInspector';
 import {
+  PackageIcon,
+  InfoCircleIcon,
+  CheckIcon,
   BoltIcon,
-  GlobeIcon,
-  ClockIcon,
-  CircleCheckIcon,
   CircleXIcon,
-  SmartphoneIcon,
-  PackageIcon,
-  TerminalIcon,
+  CopyIcon,
   ExternalLinkIcon,
+  SparkleIcon,
+  AndroidIcon,
   RepeatIcon,
-  ShieldAlertIcon,
-  InfoCircleIcon,
 } from '../NetworkIcons';
+import Svg, {Path} from 'react-native-svg';
 
-interface PortStatus {
-  port: number;
-  status: 'checking' | 'active' | 'inactive';
-  latencyMs?: number;
-}
+const TerminalConsoleIcon = ({color = AppColors.purple, size = 13}: {color?: string; size?: number}) => (
+  <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>
+);
 
-const COMMON_PORTS = [8081, 8082, 8083, 19000];
+interface BuildStatusData {
+  status: 'idle' | 'running' | 'completed' | 'failed';
+  scheme: string;
+  clean: boolean;
+  progress: number;
+  currentTask: string;
+  logs?: string[];
+  error: string | null;
+  apkName: string | null;
+  apkSize: number | null;
+}
 
 export const DebuggingTab: React.FC = () => {
-  const {t} = useTranslation();
-
   // Auto-detect host IP and initial port from NativeModules.SourceCode.scriptURL
   const detectedConfig = useMemo(() => {
     const scriptURL = NativeModules.SourceCode?.scriptURL || '';
@@ -70,705 +78,1025 @@ export const DebuggingTab: React.FC = () => {
   }, []);
 
   const [hostIp, setHostIp] = useState<string>(() => {
-    // If localhost or 127.0.0.1 or 10.0.2.2, default to 192.168.1.1 or detected host
     if (
-      detectedConfig.host === 'localhost' ||
-      detectedConfig.host === '127.0.0.1' ||
-      detectedConfig.host === '10.0.2.2'
+      detectedConfig.host &&
+      detectedConfig.host !== 'localhost' &&
+      detectedConfig.host !== '127.0.0.1' &&
+      detectedConfig.host !== '10.0.2.2'
     ) {
-      return '192.168.1.15';
+      return detectedConfig.host;
     }
-    return detectedConfig.host;
+    return '192.168.1.2';
+  });
+
+  const [port, setPort] = useState<number>(detectedConfig.port || 8083);
+  const [apkFileName, setApkFileName] = useState<string>('app-debug.apk');
+  const [apkSizeMb, setApkSizeMb] = useState<string | null>(null);
+
+  // Build generation state
+  const [selectedScheme, setSelectedScheme] = useState<'assembleRelease' | 'assembleDebug'>('assembleRelease');
+  const [isCleanBuild, setIsCleanBuild] = useState<boolean>(true);
+  const [buildStatus, setBuildStatus] = useState<BuildStatusData>({
+    status: 'idle',
+    scheme: 'assembleRelease',
+    clean: true,
+    progress: 0,
+    currentTask: '',
+    error: null,
+    apkName: null,
+    apkSize: null,
   });
 
-  const [selectedPort, setSelectedPort] = useState<number>(detectedConfig.port);
-  const [apkPath, setApkPath] = useState<string>('app-debug.apk');
-  const [activeQrTab, setActiveQrTab] = useState<'metro' | 'apk' | 'host'>('metro');
-  const [isAutoDetecting, setIsAutoDetecting] = useState<boolean>(false);
-  const [portsStatus, setPortsStatus] = useState<Record<number, PortStatus>>({});
+  const pollingRef = useRef<NodeJS.Timeout | null>(null);
+  const progressAnim = useRef(new Animated.Value(0)).current;
+  const [showVerboseLogs, setShowVerboseLogs] = useState<boolean>(true);
+  const verboseScrollRef = useRef<ScrollView | null>(null);
 
-  // Auto-probe ports on mount
-  const probePorts = useCallback(async () => {
-    setIsAutoDetecting(true);
-    const results: Record<number, PortStatus> = {};
+  // Animate progress bar smoothly
+  useEffect(() => {
+    Animated.timing(progressAnim, {
+      toValue: Math.max(0, Math.min(100, buildStatus.progress)),
+      duration: 350,
+      useNativeDriver: false,
+    }).start();
+  }, [buildStatus.progress, progressAnim]);
 
-    for (const p of COMMON_PORTS) {
-      results[p] = {port: p, status: 'checking'};
+  // Auto-scroll verbose console to bottom
+  useEffect(() => {
+    if (buildStatus.logs && buildStatus.logs.length > 0) {
+      setTimeout(() => {
+        verboseScrollRef.current?.scrollToEnd({ animated: true });
+      }, 50);
     }
-    setPortsStatus({...results});
+  }, [buildStatus.logs]);
+
+  // Auto-fetch dynamic IP and APK metadata from Metro / Standalone Server
+  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;
+          }
+        } catch {}
+      }
+    }
+  }, [detectedConfig.host, detectedConfig.port]);
+
+  useEffect(() => {
+    fetchMetroTelemetry();
+  }, [fetchMetroTelemetry]);
 
-    let foundActivePort: number | null = null;
+  // Clean up polling interval on unmount
+  useEffect(() => {
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current);
+      }
+    };
+  }, []);
 
-    for (const p of COMMON_PORTS) {
-      const startTime = Date.now();
+  // Poll build status from Metro
+  const pollBuildStatus = useCallback(() => {
+    if (pollingRef.current) clearInterval(pollingRef.current);
+
+    const targetHost = detectedConfig.host || '10.0.2.2';
+    pollingRef.current = setInterval(async () => {
       try {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 1500);
-        // Ping /status endpoint of Metro Bundler
-        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;
-        } else {
-          results[p] = {port: p, status: 'inactive'};
+        const res = await fetch(`http://${targetHost}:${port}/__inapp_inspector/build-status`);
+        if (res.ok) {
+          const data: BuildStatusData = 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]);
+
+  // Start Gradle build on computer via Metro / Standalone Server
+  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);
-  }, []);
+  // Stop Gradle build on computer via Metro / Standalone Server
+  const handleStopBuild = async () => {
+    triggerNativeHaptic('warning');
+    if (pollingRef.current) clearInterval(pollingRef.current);
 
-  useEffect(() => {
-    probePorts();
-  }, [probePorts]);
+    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 {}
+      }
+    }
 
-  // Construct target URLs for QR codes
-  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}`;
+    setBuildStatus(prev => ({
+      ...prev,
+      status: 'idle',
+      currentTask: 'Build cancelled by user',
+      logs: [...(prev.logs || []), '🛑 Build cancelled by user.'],
+    }));
+    showToast('Build cancelled');
+  };
 
-  const currentQrValue = useMemo(() => {
-    if (activeQrTab === 'apk') return apkDownloadUrl;
-    if (activeQrTab === 'host') return devSettingsHost;
-    return directServerUrl;
-  }, [activeQrTab, apkDownloadUrl, devSettingsHost, directServerUrl]);
+  // Construct target download URL
+  const apkDownloadUrl = `http://${hostIp}:${port}/${apkFileName.replace(/^\/+/, '')}`;
 
-  const activePortInfo = portsStatus[selectedPort];
+  const handleShare = () => {
+    triggerNativeHaptic('light');
+    Share.share({
+      message: apkDownloadUrl,
+      title: 'Install Android APK',
+    });
+  };
+
+  const isBuilding = buildStatus.status === 'running';
 
   return (
     <ScrollView
-      style={styles.container}
-      contentContainerStyle={styles.content}
+      style={styles.scrollArea}
+      contentContainerStyle={styles.scrollContent}
       showsVerticalScrollIndicator={false}>
-      {/* ─── Top Live Server Status Banner ────────────────────────────── */}
-      <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>
+      {/* ─── Hero Card: Multi-Device APK Installer ───────────────────── */}
+      <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>
 
-        {/* Port Selector Chips */}
-        <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>
-            );
-          })}
+        {/* Hero Metrics Strip (Matching DeviceInfoTab & PerformanceTab) */}
+        <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>
 
-      {/* ─── Host IP Configuration Card ───────────────────────────────── */}
-      <View style={styles.card}>
-        <View style={styles.cardHeader}>
-          <Text style={styles.cardTitle}>HOST IP & BUNDLE LOCATION</Text>
+      {/* ─── Section Card: QR Code & Direct Download ─────────────────── */}
+      <View style={styles.sectionCard}>
+        <View style={styles.sectionHeaderRow}>
+          <Text style={styles.sectionTitle}>QR CODE & DIRECT DOWNLOAD</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>
+            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>
-        <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 6}}>
-          <InfoCircleIcon size={13} color={AppColors.grayTextWeak} />
-          <Text style={[styles.inputHint, {marginTop: 0, flex: 1}]}>
-            Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
-          </Text>
+        {/* QR Code Container */}
+        <View style={styles.qrCenteredWrapper}>
+          <View style={styles.qrInnerFrame}>
+            <QRCodeView
+              value={apkDownloadUrl}
+              size={235}
+              color={AppColors.primaryBlack}
+              backgroundColor={AppColors.white}
+            />
+          </View>
         </View>
       </View>
 
-      {/* ─── Interactive QR Code Generator Card ──────────────────────── */}
-      <View style={styles.qrCard}>
-        {/* Mode Selector Tabs */}
-        <View style={styles.qrTabsRow}>
+      {/* ─── Section Card: Build Generator (Gradle) ─────────────────── */}
+      <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>
+
+        {/* SubTab Segmented Strip (Matching DeviceInfoTab & PerformanceTab) */}
+        <View style={styles.subTabStrip}>
           <TouchableOpacity
+            disabled={isBuilding}
             activeOpacity={0.7}
-            onPress={() => setActiveQrTab('metro')}
+            onPress={() => {
+              triggerNativeHaptic('light');
+              setSelectedScheme('assembleRelease');
+            }}
             style={[
-              styles.qrTab,
-              activeQrTab === 'metro' && styles.qrTabActive,
+              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
+            disabled={isBuilding}
             activeOpacity={0.7}
-            onPress={() => setActiveQrTab('apk')}
+            onPress={() => {
+              triggerNativeHaptic('light');
+              setSelectedScheme('assembleDebug');
+            }}
             style={[
-              styles.qrTab,
-              activeQrTab === 'apk' && styles.qrTabActive,
+              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')}
+        {/* Clean Build Checkbox */}
+        <TouchableOpacity
+          disabled={isBuilding}
+          activeOpacity={0.7}
+          onPress={() => {
+            triggerNativeHaptic('light');
+            setIsCleanBuild(!isCleanBuild);
+          }}
+          style={styles.cleanRow}>
+          <View
             style={[
-              styles.qrTab,
-              activeQrTab === 'host' && styles.qrTabActive,
+              styles.checkboxBox,
+              isCleanBuild && styles.checkboxBoxActive,
             ]}>
-            <SmartphoneIcon
-              size={13}
-              color={activeQrTab === 'host' ? AppColors.white : AppColors.grayText}
-            />
-            <Text
-              style={[
-                styles.qrTabText,
-                activeQrTab === 'host' && styles.qrTabTextActive,
-              ]}>
-              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>
 
-        {/* QR Code Container */}
-        <View style={styles.qrWrapper}>
-          <QRCodeView
-            value={currentQrValue}
-            size={190}
-            color={AppColors.primaryBlack}
-            backgroundColor={AppColors.white}
-          />
-
-          <View style={styles.qrInfoBox}>
-            <View style={{flexDirection: 'row', alignItems: 'center', gap: 5, marginBottom: 2}}>
-              {activeQrTab === 'apk' ? (
-                <PackageIcon size={14} color={AppColors.purple} />
-              ) : activeQrTab === 'host' ? (
-                <SmartphoneIcon size={14} color={AppColors.purple} />
-              ) : (
-                <BoltIcon size={14} color={AppColors.amber500} />
-              )}
-              <Text style={styles.qrTargetTitle}>
-                {activeQrTab === 'apk'
-                  ? 'Direct APK Download URL'
-                  : activeQrTab === 'host'
-                  ? 'Dev Settings Bundle Host'
-                  : 'Live Metro Fast-Refresh Endpoint'}
+        {/* Progress Display Bar (0% to 100%) */}
+        {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>
-            <Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
-              {currentQrValue}
-            </Text>
+
+            {/* Animated Progress Bar */}
+            <View style={styles.progressBarTrack}>
+              <Animated.View
+                style={[
+                  styles.progressBarFill,
+                  {
+                    width: progressAnim.interpolate({
+                      inputRange: [0, 100],
+                      outputRange: ['5%', '100%'],
+                    }),
+                  },
+                ]}
+              />
+            </View>
           </View>
-        </View>
+        )}
 
-        {/* Quick Action Row */}
-        <View style={styles.qrActionsRow}>
-          <TouchableScale
-            onPress={() => copyToClipboard(currentQrValue, 'QR Link')}
-            style={styles.actionBtn}>
-            <Text style={styles.actionBtnText}>Copy Link</Text>
-          </TouchableScale>
+        {/* Error Container */}
+        {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>
+        {/* Live Verbose Console Output */}
+        {((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>
 
-      {/* ─── Bare React Native Multi-Device Setup Guide ───────────────── */}
-      <View style={styles.guideCard}>
-        <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 12}}>
-          <SmartphoneIcon size={15} color={AppColors.primaryLight} />
-          <Text style={[styles.guideHeading, {marginBottom: 0}]}>HOW TO CONNECT ANDROID DEVICE:</Text>
-        </View>
+            {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';
 
-        <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>
+                    return (
+                      <Text key={idx} style={[styles.consoleLogLine, {color: logColor}]}>
+                        {logLine}
+                      </Text>
+                    );
+                  })
+                ) : (
+                  <Text style={styles.consoleLogPlaceholder}>
+                    Waiting for Gradle daemon output...
+                  </Text>
+                )}
+              </ScrollView>
+            )}
           </View>
-        </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>
+        {/* Action Button Row */}
+        {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}>3</Text>
+            <TouchableScale
+              onPress={handleStopBuild}
+              style={styles.stopBtn}>
+              <CircleXIcon size={13} color={AppColors.white} />
+              <Text style={styles.stopBtnText}>Stop Build</Text>
+            </TouchableScale>
           </View>
-          <View style={{flex: 1}}>
-            <View style={{flexDirection: 'row', alignItems: 'center', gap: 4}}>
-              <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh</Text>
-              <BoltIcon size={13} color={AppColors.amber500} />
+        ) : (
+          <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>
-            <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>
+          </TouchableScale>
+        )}
+      </View>
+
+      {/* ─── Footer Hint Note ───────────────────────────────────────── */}
+      <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',
   },
-  headerActionText: {
+  refreshBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+    borderRadius: 6,
+    backgroundColor: `${AppColors.purple}12`,
+  },
+  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,
   },
-  guideHeading: {
+  consoleHeaderRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#1E293B',
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  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,
   },
-  stepRow: {
+  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,
+  },
+  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,
   },
-  stepDesc: {
+  footerNoteRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 8,
+  },
+  footerNoteText: {
     fontFamily: AppFonts.interRegular,
     fontSize: 11,
-    color: AppColors.grayText,
-    lineHeight: 16,
-    marginTop: 1,
+    color: AppColors.grayTextWeak,
+    textAlign: 'center',
+    flex: 1,
   },
 });