react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,958 +1,197 @@
-import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
-import { View, Text, ScrollView, StyleSheet, NativeModules, Share, TouchableOpacity, ActivityIndicator, Animated, } from 'react-native';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import QRCodeView from '../QRCodeView';
-import TouchableScale from '../TouchableScale';
-import { showToast } from '../../helpers/toast';
-import { triggerNativeHaptic } from '../../native/NativeInspector';
-import { InfoCircleIcon, CheckIcon, BoltIcon, CircleXIcon, SparkleIcon, AndroidIcon, RepeatIcon, } from '../NetworkIcons';
-import Svg, { Path } from 'react-native-svg';
-const TerminalConsoleIcon = ({ color = AppColors.purple, size = 13 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M4 17l6-6-6-6M12 19h8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const DebuggingTab = () => {
-    const detectedConfig = useMemo(() => {
-        const scriptURL = NativeModules.SourceCode?.scriptURL || '';
-        let host = 'localhost';
-        let port = 8081;
-        try {
-            if (scriptURL.includes('://')) {
-                const urlWithoutScheme = scriptURL.split('://')[1];
-                const hostAndPort = urlWithoutScheme.split('/')[0];
-                if (hostAndPort.includes(':')) {
-                    const parts = hostAndPort.split(':');
-                    host = parts[0];
-                    const parsedPort = parseInt(parts[1], 10);
-                    if (!isNaN(parsedPort))
-                        port = parsedPort;
-                }
-                else {
-                    host = hostAndPort;
-                }
-            }
-        }
-        catch { }
-        return { host, port, scriptURL };
-    }, []);
-    const [hostIp, setHostIp] = useState(() => {
-        if (detectedConfig.host &&
-            detectedConfig.host !== 'localhost' &&
-            detectedConfig.host !== '127.0.0.1' &&
-            detectedConfig.host !== '10.0.2.2') {
-            return detectedConfig.host;
-        }
-        return '192.168.1.2';
-    });
-    const [port, setPort] = useState(detectedConfig.port || 8083);
-    const [apkFileName, setApkFileName] = useState('app-debug.apk');
-    const [apkSizeMb, setApkSizeMb] = useState(null);
-    const [selectedScheme, setSelectedScheme] = useState('assembleRelease');
-    const [isCleanBuild, setIsCleanBuild] = useState(true);
-    const [buildStatus, setBuildStatus] = useState({
-        status: 'idle',
-        scheme: 'assembleRelease',
-        clean: true,
-        progress: 0,
-        currentTask: '',
-        error: null,
-        apkName: null,
-        apkSize: null,
-    });
-    const pollingRef = useRef(null);
-    const progressAnim = useRef(new Animated.Value(0)).current;
-    const [showVerboseLogs, setShowVerboseLogs] = useState(true);
-    const verboseScrollRef = useRef(null);
-    useEffect(() => {
-        Animated.timing(progressAnim, {
-            toValue: Math.max(0, Math.min(100, buildStatus.progress)),
-            duration: 350,
-            useNativeDriver: false,
-        }).start();
-    }, [buildStatus.progress, progressAnim]);
-    useEffect(() => {
-        if (buildStatus.logs && buildStatus.logs.length > 0) {
-            setTimeout(() => {
-                verboseScrollRef.current?.scrollToEnd({ animated: true });
-            }, 50);
-        }
-    }, [buildStatus.logs]);
-    const fetchMetroTelemetry = useCallback(async () => {
-        const hostsToTry = Array.from(new Set([detectedConfig.host, '10.0.2.2', 'localhost', '127.0.0.1'].filter(Boolean)));
-        const portsToTry = Array.from(new Set([detectedConfig.port, 8083, 8081, 8082].filter(Boolean)));
-        for (const h of hostsToTry) {
-            for (const p of portsToTry) {
-                try {
-                    const controller = new AbortController();
-                    const timeoutId = setTimeout(() => controller.abort(), 1200);
-                    const res = await fetch(`http://${h}:${p}/__inapp_inspector/apk-info`, {
-                        signal: controller.signal,
-                    });
-                    clearTimeout(timeoutId);
-                    if (res.ok) {
-                        const data = await res.json();
-                        if (data.hostIp &&
-                            data.hostIp !== '127.0.0.1' &&
-                            data.hostIp !== 'localhost' &&
-                            data.hostIp !== '10.0.2.2') {
-                            setHostIp(data.hostIp);
-                        }
-                        if (data.port) {
-                            setPort(data.port);
-                        }
-                        if (data.apkName) {
-                            setApkFileName(data.apkName);
-                        }
-                        if (data.apkSize) {
-                            setApkSizeMb((data.apkSize / (1024 * 1024)).toFixed(1));
-                        }
-                        return;
-                    }
-                }
-                catch { }
-            }
-        }
-    }, [detectedConfig.host, detectedConfig.port]);
-    useEffect(() => {
-        fetchMetroTelemetry();
-    }, [fetchMetroTelemetry]);
-    useEffect(() => {
-        return () => {
-            if (pollingRef.current) {
-                clearInterval(pollingRef.current);
-            }
-        };
-    }, []);
-    const pollBuildStatus = useCallback(() => {
-        if (pollingRef.current)
-            clearInterval(pollingRef.current);
-        const targetHost = detectedConfig.host || '10.0.2.2';
-        pollingRef.current = setInterval(async () => {
-            try {
-                const res = await fetch(`http://${targetHost}:${port}/__inapp_inspector/build-status`);
-                if (res.ok) {
-                    const data = await res.json();
-                    setBuildStatus(data);
-                    if (data.status === 'completed') {
-                        if (pollingRef.current)
-                            clearInterval(pollingRef.current);
-                        triggerNativeHaptic('success');
-                        showToast('✓ APK Build Generated Successfully!');
-                        if (data.apkSize) {
-                            setApkSizeMb((data.apkSize / (1024 * 1024)).toFixed(1));
-                        }
-                        if (data.apkName) {
-                            setApkFileName(data.apkName);
-                        }
-                        fetchMetroTelemetry();
-                    }
-                    else if (data.status === 'failed') {
-                        if (pollingRef.current)
-                            clearInterval(pollingRef.current);
-                        triggerNativeHaptic('error');
-                        showToast('✕ Build Failed: ' + (data.error || 'Gradle error'));
-                    }
-                }
-            }
-            catch { }
-        }, 1000);
-    }, [detectedConfig.host, port, fetchMetroTelemetry]);
-    const handleStartBuild = async () => {
-        triggerNativeHaptic('medium');
-        setBuildStatus({
-            status: 'running',
-            scheme: selectedScheme,
-            clean: isCleanBuild,
-            progress: 5,
-            currentTask: isCleanBuild ? 'Cleaning build cache...' : 'Initializing build...',
-            error: null,
-            apkName: null,
-            apkSize: null,
-        });
-        const hostsToTry = Array.from(new Set([detectedConfig.host, '10.0.2.2', 'localhost', '127.0.0.1'].filter(Boolean)));
-        const portsToTry = Array.from(new Set([port, 8083, 8081, 8082].filter(Boolean)));
-        let buildTriggered = false;
-        for (const h of hostsToTry) {
-            for (const p of portsToTry) {
-                try {
-                    const controller = new AbortController();
-                    const timeoutId = setTimeout(() => controller.abort(), 2000);
-                    const res = await fetch(`http://${h}:${p}/__inapp_inspector/build-apk?scheme=${selectedScheme}&clean=${isCleanBuild}`, { signal: controller.signal });
-                    clearTimeout(timeoutId);
-                    if (res.ok) {
-                        buildTriggered = true;
-                        pollBuildStatus();
-                        return;
-                    }
-                }
-                catch { }
-            }
-        }
-        if (!buildTriggered) {
-            setBuildStatus(prev => ({
-                ...prev,
-                status: 'failed',
-                error: 'Cannot reach build server. Ensure npm start or npm run serve-apk is running on host.',
-            }));
-        }
-    };
-    const handleStopBuild = async () => {
-        triggerNativeHaptic('warning');
-        if (pollingRef.current)
-            clearInterval(pollingRef.current);
-        const hostsToTry = Array.from(new Set([detectedConfig.host, '10.0.2.2', 'localhost', '127.0.0.1'].filter(Boolean)));
-        const portsToTry = Array.from(new Set([port, 8083, 8081, 8082].filter(Boolean)));
-        for (const h of hostsToTry) {
-            for (const p of portsToTry) {
-                try {
-                    const controller = new AbortController();
-                    const timeoutId = setTimeout(() => controller.abort(), 1500);
-                    await fetch(`http://${h}:${p}/__inapp_inspector/stop-build`, {
-                        signal: controller.signal,
-                    });
-                    clearTimeout(timeoutId);
-                }
-                catch { }
-            }
-        }
-        setBuildStatus(prev => ({
-            ...prev,
-            status: 'idle',
-            currentTask: 'Build cancelled by user',
-            logs: [...(prev.logs || []), '🛑 Build cancelled by user.'],
-        }));
-        showToast('Build cancelled');
-    };
-    const apkDownloadUrl = `http://${hostIp}:${port}/${apkFileName.replace(/^\/+/, '')}`;
-    const handleShare = () => {
-        triggerNativeHaptic('light');
-        Share.share({
-            message: apkDownloadUrl,
-            title: 'Install Android APK',
-        });
-    };
-    const isBuilding = buildStatus.status === 'running';
-    return (<ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+import{useState as M,useEffect as G,useMemo as Le,useCallback as ie,useRef as X}from"react";import{View as T,Text as C,ScrollView as Te,StyleSheet as We,NativeModules as Pe,Share as He,TouchableOpacity as U,ActivityIndicator as Ce,Animated as Z}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import Ee from"../QRCodeView";import Be from"../TouchableScale";import{showToast as J}from"../../helpers/toast";import{triggerNativeHaptic as L}from"../../native/NativeInspector";import{InfoCircleIcon as $e,CheckIcon as Se,BoltIcon as Re,CircleXIcon as Ie,SparkleIcon as Ne,AndroidIcon as Ue,RepeatIcon as _e,WrenchIcon as Ge}from"../NetworkIcons";import Ke,{Path as Qe}from"react-native-svg";const Xe=({color:I=e.purple,size:$=13})=><Ke width={$}height={$}viewBox="0 0 24 24"fill="none">
+    <Qe d="M4 17l6-6-6-6M12 19h8"stroke={I}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </Ke>;export const DebuggingTab=()=>{const I=Le(()=>{const k=Pe.SourceCode?.scriptURL||"";let V="localhost",B=8081;try{if(k.includes("://")){const A=k.split("://")[1].split("/")[0];if(A.includes(":")){const v=A.split(":");V=v[0];const P=parseInt(v[1],10);isNaN(P)||(B=P)}else V=A}}catch{}return{host:V,port:B,scriptURL:k}},[]),[$,Ve]=M(()=>I.host&&I.host!=="localhost"&&I.host!=="127.0.0.1"&&I.host!=="10.0.2.2"?I.host:"192.168.1.2"),[H,ze]=M(I.port||8083),[De,Y]=M("app-debug.apk"),[q,ee]=M(null),[F,oe]=M("assembleRelease"),[W,Ae]=M(!0),[R,_]=M({status:"idle",scheme:"assembleRelease",clean:!0,progress:0,currentTask:"",error:null,apkName:null,apkSize:null}),D=X(null),K=X(new Z.Value(0)).current,[Q,ve]=M(!0),te=X(null);G(()=>{Z.timing(K,{toValue:Math.max(0,Math.min(100,R.progress)),duration:350,useNativeDriver:!1}).start()},[R.progress,K]),G(()=>{R.logs&&R.logs.length>0&&setTimeout(()=>{te.current?.scrollToEnd({animated:!0})},50)},[R.logs]);const N=ie(async()=>{const k=Array.from(new Set([I.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([I.port,8083,8081,8082].filter(Boolean)));for(const B of k)for(const O of V)try{const A=new AbortController,v=setTimeout(()=>A.abort(),1200),P=await fetch(`http://${B}:${O}/__inapp_inspector/apk-info`,{signal:A.signal});if(clearTimeout(v),P.ok){const z=await P.json();z.hostIp&&z.hostIp!=="127.0.0.1"&&z.hostIp!=="localhost"&&z.hostIp!=="10.0.2.2"&&Ve(z.hostIp),z.port&&ze(z.port),z.apkName&&Y(z.apkName),z.apkSize&&ee((z.apkSize/(1024*1024)).toFixed(1));return}}catch{}},[I.host,I.port]);G(()=>{N()},[N]),G(()=>()=>{D.current&&clearInterval(D.current)},[]);const Fe=ie(()=>{D.current&&clearInterval(D.current);const k=I.host||"10.0.2.2";D.current=setInterval(async()=>{try{const V=await fetch(`http://${k}:${H}/__inapp_inspector/build-status`);if(V.ok){const B=await V.json();_(B),B.status==="completed"?(D.current&&clearInterval(D.current),L("success"),J("\u2713 APK Build Generated Successfully!"),B.apkSize&&ee((B.apkSize/(1024*1024)).toFixed(1)),B.apkName&&Y(B.apkName),N()):B.status==="failed"&&(D.current&&clearInterval(D.current),L("error"),J("\u2715 Build Failed: "+(B.error||"Gradle error")))}}catch{}},1e3)},[I.host,H,N]),Oe=async()=>{L("medium"),_({status:"running",scheme:F,clean:W,progress:5,currentTask:W?"Cleaning build cache...":"Initializing build...",error:null,apkName:null,apkSize:null});const k=Array.from(new Set([I.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([H,8083,8081,8082].filter(Boolean)));let B=!1;for(const O of k)for(const A of V)try{const v=new AbortController,P=setTimeout(()=>v.abort(),2e3),z=await fetch(`http://${O}:${A}/__inapp_inspector/build-apk?scheme=${F}&clean=${W}`,{signal:v.signal});if(clearTimeout(P),z.ok){B=!0,Fe();return}}catch{}B||_(O=>({...O,status:"failed",error:"Cannot reach build server. Ensure npm start or npm run serve-apk is running on host."}))},Me=async()=>{L("warning"),D.current&&clearInterval(D.current);const k=Array.from(new Set([I.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([H,8083,8081,8082].filter(Boolean)));for(const B of k)for(const O of V)try{const A=new AbortController,v=setTimeout(()=>A.abort(),1500);await fetch(`http://${B}:${O}/__inapp_inspector/stop-build`,{signal:A.signal}),clearTimeout(v)}catch{}_(B=>({...B,status:"idle",currentTask:"Build cancelled by user",logs:[...B.logs||[],"\u{1F6D1} Build cancelled by user."]})),J("Build cancelled")},re=`http://${$}:${H}/${De.replace(/^\/+/,"")}`,Ze=()=>{L("light"),He.share({message:re,title:"Install Android APK"})},E=R.status==="running";return<Te style={o.scrollArea}contentContainerStyle={o.scrollContent}showsVerticalScrollIndicator={!1}>
       
-      <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}>
+      <T style={o.heroCard}>
+        <T style={o.heroHeader}>
+          <T style={o.heroIconWrap}>
+            <Ue size={20}color={e.white}/>
+          </T>
+          <T style={{flex:1,minWidth:0}}>
+            <C style={o.heroTitle}numberOfLines={1}>
               Multi-Device APK Installer
-            </Text>
-            <Text style={styles.heroSubtitle} numberOfLines={1}>
+            </C>
+            <C style={o.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>
-        </View>
+            </C>
+          </T>
+          <T style={o.heroBadge}>
+            <T style={o.pulseDot}/>
+            <C style={o.heroBadgeText}>Live Metro</C>
+          </T>
+        </T>
 
         
-        <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 },
-        ]}>
+        <T style={o.heroMetricsStrip}>
+          <T style={o.heroMetricItem}>
+            <C style={o.heroMetricLabel}>HOST IP</C>
+            <C style={o.heroMetricValue}numberOfLines={1}>
+              {$}
+            </C>
+          </T>
+          <T style={o.heroMetricDivider}/>
+          <T style={o.heroMetricItem}>
+            <C style={o.heroMetricLabel}>PORT</C>
+            <C style={o.heroMetricValue}>{H}</C>
+          </T>
+          <T style={o.heroMetricDivider}/>
+          <T style={o.heroMetricItem}>
+            <C style={o.heroMetricLabel}>APK SIZE</C>
+            <C style={[o.heroMetricValue,{color:q?e.emerald500:e.grayTextWeak}]}>
+              {q?`${q} MB`:"Detected"}
+            </C>
+          </T>
+          <T style={o.heroMetricDivider}/>
+          <T style={o.heroMetricItem}>
+            <C style={o.heroMetricLabel}>STATUS</C>
+            <C style={[o.heroMetricValue,{color:e.emerald500}]}>
               Ready
-            </Text>
-          </View>
-        </View>
-      </View>
+            </C>
+          </T>
+        </T>
+      </T>
 
       
-      <View style={styles.sectionCard}>
-        <View style={styles.sectionHeaderRow}>
-          <Text style={styles.sectionTitle}>QR CODE & DIRECT DOWNLOAD</Text>
-          <TouchableOpacity activeOpacity={0.7} onPress={fetchMetroTelemetry} style={styles.refreshBtn}>
-            <RepeatIcon size={12} color={AppColors.purple}/>
-            <Text style={styles.refreshBtnText}>Refresh</Text>
-          </TouchableOpacity>
-        </View>
+      <T style={o.sectionCard}>
+        <T style={o.sectionHeaderRow}>
+          <C style={o.sectionTitle}>QR CODE & DIRECT DOWNLOAD</C>
+          <U activeOpacity={.7}onPress={N}style={o.refreshBtn}>
+            <_e size={12}color={e.purple}/>
+            <C style={o.refreshBtnText}>Refresh</C>
+          </U>
+        </T>
 
         
-        <View style={styles.qrCenteredWrapper}>
-          <View style={styles.qrInnerFrame}>
-            <QRCodeView value={apkDownloadUrl} size={235} color={AppColors.primaryBlack} backgroundColor={AppColors.white}/>
-          </View>
-        </View>
-      </View>
+        <T style={o.qrCenteredWrapper}>
+          <T style={o.qrInnerFrame}>
+            <Ee value={re}size={235}color={e.primaryBlack}backgroundColor={e.white}/>
+          </T>
+        </T>
+      </T>
 
       
-      <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>
+      <T style={o.sectionCard}>
+        <T style={o.sectionHeaderRow}>
+          <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+            <Re size={13}color={e.purple}/>
+            <C style={o.sectionTitle}>BUILD GENERATOR (GRADLE)</C>
+          </T>
+          {R.status==="completed"&&<T style={o.completedBadge}>
+              <Se size={10}color={e.emerald500}/>
+              <C style={o.completedBadgeText}>100% Ready</C>
+            </T>}
+        </T>
 
         
-        <View style={styles.subTabStrip}>
-          <TouchableOpacity disabled={isBuilding} activeOpacity={0.7} onPress={() => {
-            triggerNativeHaptic('light');
-            setSelectedScheme('assembleRelease');
-        }} style={[
-            styles.subTabItem,
-            selectedScheme === 'assembleRelease' && styles.subTabItemActive,
-        ]}>
-            <Text style={[
-            styles.subTabText,
-            selectedScheme === 'assembleRelease' && styles.subTabTextActive,
-        ]}>
-              ⚡ Release (assembleRelease)
-            </Text>
-          </TouchableOpacity>
+        <T style={o.subTabStrip}>
+          <U disabled={E}activeOpacity={.7}onPress={()=>{L("light"),oe("assembleRelease")}}style={[o.subTabItem,F==="assembleRelease"&&o.subTabItemActive]}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
+              <Re size={12}color={F==="assembleRelease"?e.white:e.grayText}/>
+              <C style={[o.subTabText,F==="assembleRelease"&&o.subTabTextActive]}>
+                Release (assembleRelease)
+              </C>
+            </T>
+          </U>
 
-          <TouchableOpacity disabled={isBuilding} activeOpacity={0.7} onPress={() => {
-            triggerNativeHaptic('light');
-            setSelectedScheme('assembleDebug');
-        }} style={[
-            styles.subTabItem,
-            selectedScheme === 'assembleDebug' && styles.subTabItemActive,
-        ]}>
-            <Text style={[
-            styles.subTabText,
-            selectedScheme === 'assembleDebug' && styles.subTabTextActive,
-        ]}>
-              🛠 Debug (assembleDebug)
-            </Text>
-          </TouchableOpacity>
-        </View>
+          <U disabled={E}activeOpacity={.7}onPress={()=>{L("light"),oe("assembleDebug")}}style={[o.subTabItem,F==="assembleDebug"&&o.subTabItemActive]}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
+              <Ge size={12}color={F==="assembleDebug"?e.white:e.grayText}/>
+              <C style={[o.subTabText,F==="assembleDebug"&&o.subTabTextActive]}>
+                Debug (assembleDebug)
+              </C>
+            </T>
+          </U>
+        </T>
 
         
-        <TouchableOpacity disabled={isBuilding} activeOpacity={0.7} onPress={() => {
-            triggerNativeHaptic('light');
-            setIsCleanBuild(!isCleanBuild);
-        }} style={styles.cleanRow}>
-          <View style={[
-            styles.checkboxBox,
-            isCleanBuild && styles.checkboxBoxActive,
-        ]}>
-            {isCleanBuild && <CheckIcon size={11} color={AppColors.white}/>}
-          </View>
-          <Text style={styles.cleanLabel}>
-            Clean build cache <Text style={styles.cleanCode}>(./gradlew clean)</Text>
-          </Text>
-        </TouchableOpacity>
+        <U disabled={E}activeOpacity={.7}onPress={()=>{L("light"),Ae(!W)}}style={o.cleanRow}>
+          <T style={[o.checkboxBox,W&&o.checkboxBoxActive]}>
+            {W&&<Se size={11}color={e.white}/>}
+          </T>
+          <C style={o.cleanLabel}>
+            Clean build cache <C style={o.cleanCode}>(./gradlew clean)</C>
+          </C>
+        </U>
 
         
-        {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>
+        {E&&<T style={o.progressContainer}>
+            <T style={o.progressTopRow}>
+              <T style={o.progressTaskGroup}>
+                <Ce size="small"color={e.purple}/>
+                <C style={o.progressTaskText}numberOfLines={1}>
+                  {R.currentTask||"Executing Gradle tasks..."}
+                </C>
+              </T>
+              <C style={o.progressPercentageText}>
+                {R.progress}%
+              </C>
+            </T>
 
             
-            <View style={styles.progressBarTrack}>
-              <Animated.View style={[
-                styles.progressBarFill,
-                {
-                    width: progressAnim.interpolate({
-                        inputRange: [0, 100],
-                        outputRange: ['5%', '100%'],
-                    }),
-                },
-            ]}/>
-            </View>
-          </View>)}
+            <T style={o.progressBarTrack}>
+              <Z.View style={[o.progressBarFill,{width:K.interpolate({inputRange:[0,100],outputRange:["5%","100%"]})}]}/>
+            </T>
+          </T>}
 
         
-        {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>)}
+        {R.status==="failed"&&<T style={o.errorContainer}>
+            <Ie size={13}color={e.errorColor}/>
+            <C style={o.errorText}numberOfLines={2}>
+              {R.error||"Build execution failed."}
+            </C>
+          </T>}
 
         
-        {((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>
+        {(R.logs&&R.logs.length>0||E)&&<T style={o.consoleContainer}>
+            <T style={o.consoleHeaderRow}>
+              <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                <Xe color="#38BDF8"size={12}/>
+                <C style={o.consoleHeaderTitle}>GRADLE VERBOSE OUTPUT</C>
+              </T>
+              <U activeOpacity={.7}onPress={()=>ve(!Q)}style={o.consoleToggleBtn}>
+                <C style={o.consoleToggleText}>
+                  {Q?"Hide Console":"Show Console"}
+                </C>
+              </U>
+            </T>
 
-            {showVerboseLogs && (<ScrollView ref={verboseScrollRef} style={styles.consoleLogBox} contentContainerStyle={styles.consoleLogContent} nestedScrollEnabled showsVerticalScrollIndicator>
-                {buildStatus.logs && buildStatus.logs.length > 0 ? (buildStatus.logs.map((logLine, idx) => {
-                    let logColor = '#94A3B8';
-                    if (logLine.startsWith('> Task :'))
-                        logColor = '#38BDF8';
-                    else if (logLine.includes('BUILD SUCCESSFUL'))
-                        logColor = '#4ADE80';
-                    else if (logLine.includes('FAILURE') || logLine.includes('error:'))
-                        logColor = '#F87171';
-                    else if (logLine.includes('UP-TO-DATE'))
-                        logColor = '#A78BFA';
-                    return (<Text key={idx} style={[styles.consoleLogLine, { color: logColor }]}>
-                        {logLine}
-                      </Text>);
-                })) : (<Text style={styles.consoleLogPlaceholder}>
+            {Q&&<Te ref={te}style={o.consoleLogBox}contentContainerStyle={o.consoleLogContent}nestedScrollEnabled showsVerticalScrollIndicator>
+                {R.logs&&R.logs.length>0?R.logs.map((k,V)=>{let B="#94A3B8";return k.startsWith("> Task :")?B="#38BDF8":k.includes("BUILD SUCCESSFUL")?B="#4ADE80":k.includes("FAILURE")||k.includes("error:")?B="#F87171":k.includes("UP-TO-DATE")&&(B="#A78BFA"),<C key={V}style={[o.consoleLogLine,{color:B}]}>
+                        {k}
+                      </C>}):<C style={o.consoleLogPlaceholder}>
                     Waiting for Gradle daemon output...
-                  </Text>)}
-              </ScrollView>)}
-          </View>)}
+                  </C>}
+              </Te>}
+          </T>}
 
         
-        {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>
+        {E?<T style={o.buildingActionsRow}>
+            <T style={o.buildingStatusPill}>
+              <Ce size="small"color={e.purple}/>
+              <C style={o.buildingStatusPillText}numberOfLines={1}>
+                Building ({R.progress}%)
+              </C>
+            </T>
 
-            <TouchableScale onPress={handleStopBuild} style={styles.stopBtn}>
-              <CircleXIcon size={13} color={AppColors.white}/>
-              <Text style={styles.stopBtnText}>Stop Build</Text>
-            </TouchableScale>
-          </View>) : (<TouchableScale onPress={handleStartBuild} style={styles.generateBtn}>
-            <View style={styles.ctaContentRow}>
-              <SparkleIcon size={14} color={AppColors.white}/>
-              <Text style={styles.generateBtnText}>
-                {isCleanBuild ? 'Clean & Generate Build' : 'Generate Build'}
-              </Text>
-            </View>
-          </TouchableScale>)}
-      </View>
+            <Be onPress={Me}style={o.stopBtn}>
+              <Ie size={13}color={e.white}/>
+              <C style={o.stopBtnText}>Stop Build</C>
+            </Be>
+          </T>:<Be onPress={Oe}style={o.generateBtn}>
+            <T style={o.ctaContentRow}>
+              <Ne size={14}color={e.white}/>
+              <C style={o.generateBtnText}>
+                {W?"Clean & Generate Build":"Generate Build"}
+              </C>
+            </T>
+          </Be>}
+      </T>
 
       
-      <View style={styles.footerNoteRow}>
-        <InfoCircleIcon size={13} color={AppColors.grayTextWeak}/>
-        <Text style={styles.footerNoteText}>
+      <T style={o.footerNoteRow}>
+        <$e size={13}color={e.grayTextWeak}/>
+        <C style={o.footerNoteText}>
           Ensure both Android devices are connected to the same Wi-Fi network.
-        </Text>
-      </View>
-    </ScrollView>);
-};
-const styles = StyleSheet.create({
-    scrollArea: {
-        flex: 1,
-        backgroundColor: AppColors.contentBg,
-    },
-    scrollContent: {
-        padding: 12,
-        gap: 12,
-        paddingBottom: 100,
-    },
-    heroCard: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 14,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        padding: 14,
-        shadowColor: AppColors.black,
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        shadowOffset: { width: 0, height: 2 },
-        elevation: 1,
-        gap: 12,
-    },
-    heroHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-    },
-    heroIconWrap: {
-        width: 38,
-        height: 38,
-        borderRadius: 10,
-        backgroundColor: AppColors.purple,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: AppColors.purple,
-        shadowOpacity: 0.25,
-        shadowRadius: 4,
-        shadowOffset: { width: 0, height: 2 },
-        elevation: 2,
-    },
-    heroTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 15,
-        color: AppColors.primaryBlack,
-        letterSpacing: -0.2,
-    },
-    heroSubtitle: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors.grayText,
-        marginTop: 1,
-    },
-    heroBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: `${AppColors.emerald500}18`,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 6,
-    },
-    pulseDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: AppColors.emerald500,
-    },
-    heroBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.emerald500,
-    },
-    heroMetricsStrip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 10,
-        paddingVertical: 8,
-        paddingHorizontal: 10,
-    },
-    heroMetricItem: {
-        flex: 1,
-        alignItems: 'center',
-        paddingHorizontal: 2,
-        minWidth: 0,
-    },
-    heroMetricLabel: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.4,
-    },
-    heroMetricValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-        marginTop: 2,
-    },
-    heroMetricDivider: {
-        width: 1,
-        height: 20,
-        backgroundColor: AppColors.dividerColor,
-    },
-    sectionCard: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 14,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        padding: 14,
-        shadowColor: AppColors.black,
-        shadowOpacity: 0.03,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-        gap: 12,
-    },
-    sectionHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    sectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.8,
-        textTransform: 'uppercase',
-    },
-    refreshBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 6,
-        backgroundColor: `${AppColors.purple}12`,
-    },
-    refreshBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.purple,
-    },
-    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,
-        gap: 8,
-    },
-    urlText: {
-        flex: 1,
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.skyBlue,
-    },
-    actionsRow: {
-        flexDirection: 'row',
-        gap: 10,
-    },
-    actionBtnSecondary: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 6,
-        paddingVertical: 9,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.grayBackground,
-    },
-    actionBtnSecondaryText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.grayTextStrong,
-    },
-    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: 3,
-        backgroundColor: `${AppColors.emerald500}18`,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 5,
-    },
-    completedBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.emerald500,
-    },
-    subTabStrip: {
-        flexDirection: 'row',
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        padding: 2,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    subTabItem: {
-        flex: 1,
-        paddingVertical: 7,
-        borderRadius: 6,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    subTabItemActive: {
-        backgroundColor: AppColors.purple,
-        shadowColor: AppColors.purple,
-        shadowOpacity: 0.2,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-    },
-    subTabText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayText,
-    },
-    subTabTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    cleanRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        paddingVertical: 2,
-    },
-    checkboxBox: {
-        width: 18,
-        height: 18,
-        borderRadius: 4,
-        borderWidth: 1.5,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.grayBackground,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    checkboxBoxActive: {
-        backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
-    },
-    cleanLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.grayTextStrong,
-    },
-    cleanCode: {
-        fontFamily: AppFonts.interRegular,
-        color: AppColors.grayTextWeak,
-        fontSize: 10.5,
-    },
-    progressContainer: {
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 10,
-        padding: 10,
-        gap: 6,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    progressTopRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    progressTaskGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flex: 1,
-        paddingRight: 8,
-    },
-    progressTaskText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-        flex: 1,
-    },
-    progressPercentageText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.purple,
-    },
-    progressBarTrack: {
-        width: '100%',
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: AppColors.grayBorderSecondary,
-        overflow: 'hidden',
-    },
-    progressBarFill: {
-        height: '100%',
-        backgroundColor: AppColors.purple,
-        borderRadius: 3,
-    },
-    errorContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        backgroundColor: `${AppColors.errorColor}12`,
-        padding: 8,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: `${AppColors.errorColor}25`,
-    },
-    errorText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.errorColor,
-        flex: 1,
-    },
-    consoleContainer: {
-        backgroundColor: '#0F172A',
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: '#1E293B',
-        overflow: 'hidden',
-        marginTop: 4,
-    },
-    consoleHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        backgroundColor: '#1E293B',
-        paddingHorizontal: 10,
-        paddingVertical: 6,
-    },
-    consoleHeaderTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: '#38BDF8',
-        letterSpacing: 0.5,
-    },
-    consoleToggleBtn: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        backgroundColor: 'rgba(255,255,255,0.1)',
-    },
-    consoleToggleText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9.5,
-        color: '#94A3B8',
-    },
-    consoleLogBox: {
-        maxHeight: 140,
-        paddingHorizontal: 10,
-        paddingVertical: 8,
-    },
-    consoleLogContent: {
-        gap: 3,
-    },
-    consoleLogLine: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        lineHeight: 14,
-    },
-    consoleLogPlaceholder: {
-        fontFamily: AppFonts.interRegular,
-        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: 'center',
-        gap: 10,
-    },
-    buildingStatusPill: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 8,
-        backgroundColor: `${AppColors.purple}14`,
-        borderRadius: 10,
-        paddingVertical: 10,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}30`,
-    },
-    buildingStatusPillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.purple,
-    },
-    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.white,
-    },
-    footerNoteRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 8,
-    },
-    footerNoteText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-        textAlign: 'center',
-        flex: 1,
-    },
-});
-export default DebuggingTab;
+        </C>
+      </T>
+    </Te>};const o=We.create({scrollArea:{flex:1,backgroundColor:e.contentBg},scrollContent:{padding:12,gap:12,paddingBottom:100},heroCard:{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:14,shadowColor:e.black,shadowOpacity:.04,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:1,gap:12},heroHeader:{flexDirection:"row",alignItems:"center",gap:10},heroIconWrap:{width:38,height:38,borderRadius:10,backgroundColor:e.purple,alignItems:"center",justifyContent:"center",shadowColor:e.purple,shadowOpacity:.25,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:2},heroTitle:{fontFamily:S.interBold,fontSize:15,color:e.primaryBlack,letterSpacing:-.2},heroSubtitle:{fontFamily:S.interRegular,fontSize:11.5,color:e.grayText,marginTop:1},heroBadge:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.emerald500}18`,paddingHorizontal:7,paddingVertical:3,borderRadius:6},pulseDot:{width:6,height:6,borderRadius:3,backgroundColor:e.emerald500},heroBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:e.emerald500},heroMetricsStrip:{flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:10,paddingVertical:8,paddingHorizontal:10},heroMetricItem:{flex:1,alignItems:"center",paddingHorizontal:2,minWidth:0},heroMetricLabel:{fontFamily:S.interBold,fontSize:8.5,color:e.grayTextWeak,letterSpacing:.4},heroMetricValue:{fontFamily:S.interBold,fontSize:11,color:e.primaryBlack,marginTop:2},heroMetricDivider:{width:1,height:20,backgroundColor:e.dividerColor},sectionCard:{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:14,shadowColor:e.black,shadowOpacity:.03,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1,gap:12},sectionHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},sectionTitle:{fontFamily:S.interBold,fontSize:10.5,color:e.grayTextWeak,letterSpacing:.8,textTransform:"uppercase"},refreshBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3,borderRadius:6,backgroundColor:`${e.purple}12`},refreshBtnText:{fontFamily:S.interBold,fontSize:10,color:e.purple},qrCenteredWrapper:{alignItems:"center",justifyContent:"center",backgroundColor:e.grayBackground,padding:12,borderRadius:12,borderWidth:1,borderColor:e.grayBorderSecondary},qrInnerFrame:{backgroundColor:e.white,padding:6,borderRadius:8},urlBox:{flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:10,paddingLeft:10,paddingRight:6,paddingVertical:6,borderWidth:1,borderColor:e.grayBorderSecondary,gap:8},urlText:{flex:1,fontFamily:S.interMedium,fontSize:11.5,color:e.skyBlue},actionsRow:{flexDirection:"row",gap:10},actionBtnSecondary:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:9,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,backgroundColor:e.grayBackground},actionBtnSecondaryText:{fontFamily:S.interBold,fontSize:12,color:e.grayTextStrong},actionBtnPrimary:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:9,borderRadius:10,backgroundColor:e.purple,shadowColor:e.purple,shadowOpacity:.25,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:2},actionBtnPrimaryText:{fontFamily:S.interBold,fontSize:12,color:e.white},completedBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.emerald500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:5},completedBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:e.emerald500},subTabStrip:{flexDirection:"row",backgroundColor:e.grayBackground,borderRadius:8,padding:2,borderWidth:1,borderColor:e.grayBorderSecondary},subTabItem:{flex:1,paddingVertical:7,borderRadius:6,alignItems:"center",justifyContent:"center"},subTabItemActive:{backgroundColor:e.purple,shadowColor:e.purple,shadowOpacity:.2,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1},subTabText:{fontFamily:S.interMedium,fontSize:11,color:e.grayText},subTabTextActive:{fontFamily:S.interBold,color:e.white},cleanRow:{flexDirection:"row",alignItems:"center",gap:8,paddingVertical:2},checkboxBox:{width:18,height:18,borderRadius:4,borderWidth:1.5,borderColor:e.grayBorderSecondary,backgroundColor:e.grayBackground,alignItems:"center",justifyContent:"center"},checkboxBoxActive:{backgroundColor:e.purple,borderColor:e.purple},cleanLabel:{fontFamily:S.interMedium,fontSize:11.5,color:e.grayTextStrong},cleanCode:{fontFamily:S.interRegular,color:e.grayTextWeak,fontSize:10.5},progressContainer:{backgroundColor:e.grayBackground,borderRadius:10,padding:10,gap:6,borderWidth:1,borderColor:e.grayBorderSecondary},progressTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},progressTaskGroup:{flexDirection:"row",alignItems:"center",gap:6,flex:1,paddingRight:8},progressTaskText:{fontFamily:S.interMedium,fontSize:11,color:e.primaryBlack,flex:1},progressPercentageText:{fontFamily:S.interBold,fontSize:11.5,color:e.purple},progressBarTrack:{width:"100%",height:6,borderRadius:3,backgroundColor:e.grayBorderSecondary,overflow:"hidden"},progressBarFill:{height:"100%",backgroundColor:e.purple,borderRadius:3},errorContainer:{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:`${e.errorColor}12`,padding:8,borderRadius:8,borderWidth:1,borderColor:`${e.errorColor}25`},errorText:{fontFamily:S.interRegular,fontSize:11,color:e.errorColor,flex:1},consoleContainer:{backgroundColor:"#0F172A",borderRadius:10,borderWidth:1,borderColor:"#1E293B",overflow:"hidden",marginTop:4},consoleHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:"#1E293B",paddingHorizontal:10,paddingVertical:6},consoleHeaderTitle:{fontFamily:S.interBold,fontSize:10,color:"#38BDF8",letterSpacing:.5},consoleToggleBtn:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,backgroundColor:"rgba(255,255,255,0.1)"},consoleToggleText:{fontFamily:S.interMedium,fontSize:9.5,color:"#94A3B8"},consoleLogBox:{maxHeight:140,paddingHorizontal:10,paddingVertical:8},consoleLogContent:{gap:3},consoleLogLine:{fontFamily:S.interRegular,fontSize:10,lineHeight:14},consoleLogPlaceholder:{fontFamily:S.interRegular,fontSize:10,color:"#64748B",fontStyle:"italic"},generateBtn:{backgroundColor:e.purple,borderRadius:10,paddingVertical:10,alignItems:"center",justifyContent:"center",shadowColor:e.purple,shadowOpacity:.25,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:2},generateBtnDisabled:{opacity:.7},buildingActionsRow:{flexDirection:"row",alignItems:"center",gap:10},buildingStatusPill:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8,backgroundColor:`${e.purple}14`,borderRadius:10,paddingVertical:10,borderWidth:1,borderColor:`${e.purple}30`},buildingStatusPillText:{fontFamily:S.interBold,fontSize:12,color:e.purple},stopBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:e.errorColor,borderRadius:10,paddingHorizontal:16,paddingVertical:10,shadowColor:e.errorColor,shadowOpacity:.25,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:2},stopBtnText:{fontFamily:S.interBold,fontSize:12,color:e.white},ctaContentRow:{flexDirection:"row",alignItems:"center",gap:6},generateBtnText:{fontFamily:S.interBold,fontSize:12.5,color:e.white},footerNoteRow:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:8},footerNoteText:{fontFamily:S.interRegular,fontSize:11,color:e.grayTextWeak,textAlign:"center",flex:1}});export default DebuggingTab;