react-native-debug-toolkit 3.2.0 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "A local-first React Native debug toolkit with Web Console, HTTP API, and MCP support for AI-readable app logs",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -10,6 +10,9 @@
     "lib",
     "bin",
     "node",
+    "ios",
+    "android",
+    "react-native-debug-toolkit.podspec",
     "README.md",
     "LICENSE",
     "!**/__tests__",

package/react-native-debug-toolkit.podspec

@@ -0,0 +1,18 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = 'react-native-debug-toolkit'
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.description  = package['description']
+  s.homepage     = package['homepage']
+  s.license      = package['license']
+  s.author       = package['author']
+  s.source       = { :git => package['repository']['url'], :tag => s.version.to_s }
+
+  s.platforms    = { :ios => '12.0' }
+  s.source_files = 'ios/**/*.{h,m,mm}'
+  s.dependency 'React-Core'
+end

package/src/features/devConnect/DevConnectQrScanner.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { Component, useCallback, useEffect, useRef, useState } from 'react';
 import {
   Modal,
   Pressable,
@@ -14,29 +14,68 @@ import {
   type CameraKitReadCodeEvent,
   type ExpoCameraScanResult,
 } from './cameraKit';
-import { parseMetroQrPayload } from './devConnectUtils';
+import { parseMetroQrPayload, type ParsedComputerTarget } from './devConnectUtils';
+
+// ─── Camera Error Boundary ─────────────────────────────────
+
+interface CameraBoundaryProps {
+  children: React.ReactNode;
+  onCameraError: (msg: string) => void;
+}
+
+interface CameraBoundaryState {
+  hasError: boolean;
+}
+
+class CameraErrorBoundary extends Component<CameraBoundaryProps, CameraBoundaryState> {
+  state: CameraBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): CameraBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error) {
+    console.warn('[DevConnect] Camera error:', error.message);
+    this.props.onCameraError(error.message || 'Camera failed to initialize.');
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+// ─── QR Scanner ─────────────────────────────────────────────
 
 interface DevConnectQrScannerProps {
   visible: boolean;
   onClose: () => void;
-  onScanHost: (host: string) => void;
+  onScanTarget: (target: ParsedComputerTarget) => void;
 }
 
-export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnectQrScannerProps) {
+export function DevConnectQrScanner({ visible, onClose, onScanTarget }: DevConnectQrScannerProps) {
   const scannedRef = useRef(false);
   const [error, setError] = useState<string | null>(null);
+  const [cameraFailed, setCameraFailed] = useState(false);
   const scanner = getScannerModule();
 
   useEffect(() => {
     if (visible) {
       scannedRef.current = false;
       setError(null);
+      setCameraFailed(false);
     }
   }, [visible]);
 
   const handleScanned = useCallback((rawValue: string) => {
-    if (scannedRef.current) return;
-    if (typeof rawValue !== 'string') return;
+    if (scannedRef.current) {
+      return;
+    }
+    if (typeof rawValue !== 'string') {
+      return;
+    }
 
     const parsed = parseMetroQrPayload(rawValue);
     if (!parsed) {
@@ -46,9 +85,12 @@ export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnect
 
     scannedRef.current = true;
     setError(null);
-    onScanHost(parsed.computerHost);
+    onScanTarget({
+      computerHost: parsed.computerHost,
+      metroPort: parsed.metroPort,
+    });
     onClose();
-  }, [onClose, onScanHost]);
+  }, [onClose, onScanTarget]);
 
   const handleCameraKitRead = useCallback((event: CameraKitReadCodeEvent) => {
     handleScanned(event.nativeEvent?.codeStringValue ?? '');
@@ -58,31 +100,48 @@ export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnect
     handleScanned(result.value ?? '');
   }, [handleScanned]);
 
-  if (!visible || !scanner) return null;
+  const handleCameraError = useCallback((_msg: string) => {
+    setCameraFailed(true);
+  }, []);
+
+  if (!visible || !scanner) {
+    return null;
+  }
 
   return (
     <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
       <View style={styles.container}>
-        {scanner.kind === 'camera-kit' && scanner.CameraKit ? (
-          <scanner.CameraKit.Camera
-            style={styles.camera}
-            cameraType={scanner.CameraKit.CameraType?.Back}
-            scanBarcode
-            onReadCode={handleCameraKitRead}
-            showFrame
-            laserColor={Colors.primary}
-            frameColor={Colors.primary}
-            allowedBarcodeTypes={['qr']}
-          />
-        ) : scanner.kind === 'expo-camera' && scanner.ExpoCamera ? (
-          <scanner.ExpoCamera.Camera
-            style={styles.camera}
-            onBarCodeScanned={handleExpoScanned}
-            barCodeScannerSettings={{ barCodeTypes: ['qr'] }}
-          />
-        ) : null}
+        {!cameraFailed && (
+          <CameraErrorBoundary onCameraError={handleCameraError}>
+            {scanner.kind === 'camera-kit' && scanner.CameraKit ? (
+              <scanner.CameraKit.Camera
+                style={styles.camera}
+                cameraType={scanner.CameraKit.CameraType?.Back}
+                scanBarcode
+                onReadCode={handleCameraKitRead}
+                showFrame
+                laserColor={Colors.primary}
+                frameColor={Colors.primary}
+                allowedBarcodeTypes={['qr']}
+              />
+            ) : scanner.kind === 'expo-camera' && scanner.ExpoCamera ? (
+              <scanner.ExpoCamera.Camera
+                style={styles.camera}
+                onBarCodeScanned={handleExpoScanned}
+                barCodeScannerSettings={{ barCodeTypes: ['qr'] }}
+              />
+            ) : null}
+          </CameraErrorBoundary>
+        )}
+        {cameraFailed && (
+          <View style={styles.cameraFallback}>
+            <Text style={styles.cameraFallbackText}>Camera unavailable.</Text>
+            <Text style={styles.cameraFallbackHint}>Please enter computer IP manually.</Text>
+          </View>
+        )}
         <View style={styles.footer}>
-          {error ? <Text style={styles.error}>{error}</Text> : <Text style={styles.hint}>Scan a Metro QR code.</Text>}
+          {!cameraFailed && !error && <Text style={styles.hint}>Scan a Metro QR code.</Text>}
+          {error && <Text style={styles.error}>{error}</Text>}
           <TouchableOpacity style={styles.closeButton} onPress={onClose} activeOpacity={0.7}>
             <Text style={styles.closeButtonText}>Close</Text>
           </TouchableOpacity>
@@ -98,6 +157,9 @@ export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnect
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#000' },
   camera: { flex: 1 },
+  cameraFallback: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
+  cameraFallbackText: { fontSize: 16, color: '#fff', fontWeight: '600', marginBottom: 8 },
+  cameraFallbackHint: { fontSize: 13, color: 'rgba(255,255,255,0.6)', textAlign: 'center' },
   footer: { padding: 16, backgroundColor: Colors.surface },
   hint: { fontSize: 13, color: Colors.textSecondary, marginBottom: 12 },
   error: { fontSize: 13, color: Colors.error, marginBottom: 12 },

package/src/features/devConnect/DevConnectTab.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
@@ -12,7 +12,6 @@ import {
 
 import type { DebugFeatureRenderProps } from '../../types';
 import { Colors } from '../../ui/theme/colors';
-import { copyToComputer } from '../../utils/copyToComputer';
 import {
   buildDeviceDaemonEndpoint,
   daemonClient,
@@ -20,50 +19,115 @@ import {
   normalizeDaemonSettings,
   type DaemonSettings,
 } from '../../utils/DaemonClient';
-import { buildMetroUrls, normalizeComputerHost } from './devConnectUtils';
-import { saveComputerHost } from './devConnectPreferences';
+import {
+  DEFAULT_DAEMON_PORT,
+  DEFAULT_METRO_PORT,
+  buildDaemonDeviceHost,
+  buildMetroTarget,
+  buildMetroUrls,
+  normalizeComputerHost,
+  normalizePort,
+  parseComputerTarget,
+  type ParsedComputerTarget,
+} from './devConnectUtils';
+import {
+  saveComputerTarget,
+  saveDaemonPort,
+  saveMetroPort,
+} from './devConnectPreferences';
+import { applyMetroBundle, resetMetroBundle } from './nativeDevConnect';
 import type { DevConnectState } from './types';
 import { DevConnectQrScanner } from './DevConnectQrScanner';
 
 const CONNECTION_TIMEOUT_MS = 2000;
-const METRO_PORT = '8081';
 
 type SyncUiState = 'idle' | 'checking' | 'connected' | 'retrying' | 'failed' | 'running';
 
+function getSimulatorMetroHost(): string {
+  return Platform.OS === 'android' ? '10.0.2.2' : 'localhost';
+}
+
+function describeMetroFailure(result: { reason: string; error?: string }): string {
+  if (result.reason === 'native_unavailable') {
+    return 'Native DevConnect not installed. Rebuild app after installing native module.';
+  }
+  if (result.reason === 'metro_unreachable') {
+    return result.error ? `Metro not reachable: ${result.error}` : 'Metro not reachable. Start Metro on that port.';
+  }
+  if (result.reason === 'fetch_unavailable') {
+    return 'Cannot check Metro because fetch is unavailable.';
+  }
+  if (result.reason === 'invalid_target') {
+    return 'Enter a valid computer IP and Metro port.';
+  }
+  return result.error ? `Metro switch failed: ${result.error}` : 'Metro switch failed.';
+}
+
 export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectState>) {
   const inputRef = useRef<TextInput>(null);
   const [computerHost, setComputerHost] = useState(snapshot.computerHost);
+  const [metroPort, setMetroPort] = useState(snapshot.metroPort);
+  const [daemonPort, setDaemonPort] = useState(snapshot.daemonPort);
   const [streaming, setStreaming] = useState(snapshot.streaming);
   const [syncState, setSyncState] = useState<SyncUiState>(snapshot.streaming ? 'running' : 'idle');
   const [message, setMessage] = useState<string | null>(null);
   const [sending, setSending] = useState(false);
+  const [metroBusy, setMetroBusy] = useState(false);
   const [qrVisible, setQrVisible] = useState(false);
 
   const isSim = snapshot.isSimulator;
 
   useEffect(() => {
     setComputerHost(snapshot.computerHost);
+    setMetroPort(snapshot.metroPort);
+    setDaemonPort(snapshot.daemonPort);
     setStreaming(snapshot.streaming);
     setSyncState(snapshot.streaming ? 'running' : 'idle');
-  }, [snapshot.computerHost, snapshot.streaming]);
+  }, [snapshot.computerHost, snapshot.daemonPort, snapshot.metroPort, snapshot.streaming]);
 
-  const metroUrls = isSim
-    ? { expUrl: `exp://localhost:${METRO_PORT}`, httpUrl: `http://localhost:${METRO_PORT}` }
-    : buildMetroUrls(computerHost);
+  const metroHost = isSim ? getSimulatorMetroHost() : computerHost;
+  const metroTarget = useMemo(
+    () => buildMetroTarget(metroHost, metroPort),
+    [metroHost, metroPort],
+  );
+  const metroUrls = useMemo(
+    () => buildMetroUrls(metroHost, metroPort),
+    [metroHost, metroPort],
+  );
 
   const handleHostChange = useCallback((value: string) => {
     setComputerHost(value);
-    const normalized = normalizeComputerHost(value);
-    if (normalized) {
-      saveComputerHost(normalized).catch(() => {});
+    const target = parseComputerTarget(value);
+    if (target) {
+      setMetroPort(target.metroPort);
+      saveComputerTarget(value).catch(() => {});
     }
     setSyncState((prev) => (prev === 'failed' ? 'idle' : prev));
     setMessage(null);
   }, []);
 
-  const handleQrHost = useCallback((host: string) => {
-    setComputerHost(host);
-    saveComputerHost(host).catch(() => {});
+  const handleMetroPortChange = useCallback((value: string) => {
+    setMetroPort(value);
+    const normalized = normalizePort(value);
+    if (normalized) {
+      saveMetroPort(normalized).catch(() => {});
+    }
+    setMessage(null);
+  }, []);
+
+  const handleDaemonPortChange = useCallback((value: string) => {
+    setDaemonPort(value);
+    const normalized = normalizePort(value);
+    if (normalized) {
+      saveDaemonPort(normalized).catch(() => {});
+    }
+    setMessage(null);
+  }, []);
+
+  const handleQrTarget = useCallback((target: ParsedComputerTarget) => {
+    setComputerHost(target.computerHost);
+    setMetroPort(target.metroPort);
+    saveComputerTarget(`${target.computerHost}:${target.metroPort}`).catch(() => {});
     setMessage('Computer IP updated from QR code.');
   }, []);
 
@@ -72,22 +136,28 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
       setMessage('Enter your computer IP first.');
       return false;
     }
+    if (!normalizePort(daemonPort)) {
+      setMessage('Enter a valid desktop logs port.');
+      return false;
+    }
     return true;
-  }, [computerHost, isSim]);
+  }, [computerHost, daemonPort, isSim]);
 
   const configureDaemon = useCallback(() => {
     const normalizedHost = isSim ? '' : (normalizeComputerHost(computerHost) ?? '');
+    const normalizedDaemonPort = normalizePort(daemonPort) ?? DEFAULT_DAEMON_PORT;
+    const deviceHost = isSim ? '' : buildDaemonDeviceHost(normalizedHost, normalizedDaemonPort);
     const settings: DaemonSettings = {
       mode: isSim ? 'simulator' : 'device',
       endpoint: '',
-      deviceHost: normalizedHost,
+      deviceHost,
       token: '',
     };
     daemonClient.configure(settings);
     const normalized = normalizeDaemonSettings(settings);
-    const endpoint = normalized.endpoint || (isSim ? getDefaultDaemonEndpoint() : buildDeviceDaemonEndpoint(normalizedHost));
+    const endpoint = normalized.endpoint || (isSim ? getDefaultDaemonEndpoint() : buildDeviceDaemonEndpoint(deviceHost));
     return { ...normalized, endpoint };
-  }, [computerHost, isSim]);
+  }, [computerHost, daemonPort, isSim]);
 
   const toggleLiveSync = useCallback(async () => {
     if (streaming) {
@@ -99,7 +169,9 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
       return;
     }
 
-    if (!validateSettings()) return;
+    if (!validateSettings()) {
+      return;
+    }
 
     const daemonOptions = configureDaemon();
     setMessage('Checking desktop connection...');
@@ -141,7 +213,9 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
   }, [configureDaemon, streaming, validateSettings]);
 
   const sendOnce = useCallback(async () => {
-    if (!validateSettings()) return;
+    if (!validateSettings()) {
+      return;
+    }
 
     const daemonOptions = configureDaemon();
     setSending(true);
@@ -174,13 +248,51 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
     }
   }, [configureDaemon, validateSettings]);
 
-  const copyUrl = useCallback((label: string, url: string) => {
-    copyToComputer(url, { label });
-    setMessage('Copied to computer output.');
-    setTimeout(() => setMessage(null), 1500);
-  }, []);
+  const applyRemoteBundle = useCallback(async () => {
+    if (!metroTarget) {
+      setMessage('Enter a valid computer IP and Metro port.');
+      return;
+    }
+    if (!snapshot.nativeMetroAvailable) {
+      setMessage(describeMetroFailure({ reason: 'native_unavailable' }));
+      return;
+    }
+
+    setMetroBusy(true);
+    setMessage('Checking Metro...');
+    try {
+      const result = await applyMetroBundle(metroTarget.host, metroTarget.port);
+      if (result.ok) {
+        setMessage(`Using Metro at ${result.hostPort}. Reloading...`);
+      } else {
+        setMessage(describeMetroFailure(result));
+      }
+    } finally {
+      setMetroBusy(false);
+    }
+  }, [metroTarget, snapshot.nativeMetroAvailable]);
 
-  const canConnect = isSim || Boolean(normalizeComputerHost(computerHost));
+  const resetRemoteBundle = useCallback(async () => {
+    if (!snapshot.nativeMetroAvailable) {
+      setMessage(describeMetroFailure({ reason: 'native_unavailable' }));
+      return;
+    }
+
+    setMetroBusy(true);
+    try {
+      const result = await resetMetroBundle();
+      if (result.ok) {
+        setMessage('Metro host reset. Reloading...');
+      } else {
+        setMessage(describeMetroFailure(result));
+      }
+    } finally {
+      setMetroBusy(false);
+    }
+  }, [snapshot.nativeMetroAvailable]);
+
+  const canConnect = isSim || (Boolean(normalizeComputerHost(computerHost)) && Boolean(normalizePort(daemonPort)));
+  const canUseMetro = Boolean(metroTarget) && snapshot.nativeMetroAvailable && !metroBusy;
   const busy = sending || syncState === 'checking';
 
   return (
@@ -189,7 +301,7 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
 
         {isSim ? (
           <View style={styles.badge}>
-            <Text style={styles.badgeText}>Simulator — using localhost</Text>
+            <Text style={styles.badgeText}>Simulator/emulator - using {getSimulatorMetroHost()}</Text>
           </View>
         ) : (
           <View style={styles.section}>
@@ -218,6 +330,40 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
           </View>
         )}
 
+        <View style={styles.section}>
+          <Text style={styles.label}>Ports</Text>
+          <View style={styles.portRow}>
+            <View style={styles.portField}>
+              <Text style={styles.portLabel}>Metro</Text>
+              <TextInput
+                style={styles.portInput}
+                value={metroPort}
+                onChangeText={handleMetroPortChange}
+                placeholder={DEFAULT_METRO_PORT}
+                placeholderTextColor={Colors.textLight}
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="number-pad"
+                returnKeyType="done"
+              />
+            </View>
+            <View style={styles.portField}>
+              <Text style={styles.portLabel}>Logs</Text>
+              <TextInput
+                style={styles.portInput}
+                value={daemonPort}
+                onChangeText={handleDaemonPortChange}
+                placeholder={DEFAULT_DAEMON_PORT}
+                placeholderTextColor={Colors.textLight}
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="number-pad"
+                returnKeyType="done"
+              />
+            </View>
+          </View>
+        </View>
+
         <View style={styles.actions}>
           <TouchableOpacity
             style={[styles.primaryButton, (!canConnect || busy) && styles.buttonDisabled]}
@@ -244,31 +390,58 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
         {message ? <Text style={styles.message}>{message}</Text> : null}
 
         <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Metro Bundler</Text>
-          {metroUrls ? (
-            <>
+          <Text style={styles.sectionTitle}>Remote JS Bundle</Text>
+          <Text style={styles.sectionDesc}>
+            Apply this Metro host to React Native dev settings and reload the app.
+          </Text>
+
+          {!metroUrls ? (
+            <View style={styles.stepCard}>
+              <Text style={styles.stepHint}>Enter your computer IP and Metro port to get started.</Text>
+            </View>
+          ) : (
+            <View style={styles.stepCard}>
               <View style={styles.urlRow}>
-                <Text style={styles.urlText} numberOfLines={1}>{metroUrls.expUrl}</Text>
-                <TouchableOpacity style={styles.copyButton} onPress={() => copyUrl('Metro exp URL', metroUrls.expUrl)} activeOpacity={0.7}>
-                  <Text style={styles.copyButtonText}>Copy</Text>
-                </TouchableOpacity>
+                <Text style={styles.urlLabel}>HTTP</Text>
+                <Text style={styles.urlText} numberOfLines={1}>{metroUrls.httpUrl}</Text>
               </View>
               <View style={styles.urlRow}>
-                <Text style={styles.urlText} numberOfLines={1}>{metroUrls.httpUrl}</Text>
-                <TouchableOpacity style={styles.copyButton} onPress={() => copyUrl('Metro HTTP URL', metroUrls.httpUrl)} activeOpacity={0.7}>
-                  <Text style={styles.copyButtonText}>Copy</Text>
-                </TouchableOpacity>
+                <Text style={styles.urlLabel}>Expo</Text>
+                <Text style={styles.urlText} numberOfLines={1}>{metroUrls.expUrl}</Text>
               </View>
-            </>
-          ) : (
-            <Text style={styles.hint}>Enter a computer IP to show Metro URLs.</Text>
+            </View>
           )}
+
+          <View style={styles.actions}>
+            <TouchableOpacity
+              style={[styles.primaryButton, !canUseMetro && styles.buttonDisabled]}
+              onPress={applyRemoteBundle}
+              disabled={!canUseMetro}
+              activeOpacity={0.75}
+            >
+              <Text style={styles.primaryButtonText}>
+                {metroBusy ? 'Checking...' : 'Use Metro Bundle'}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.secondaryButton, (!snapshot.nativeMetroAvailable || metroBusy) && styles.buttonDisabled]}
+              onPress={resetRemoteBundle}
+              disabled={!snapshot.nativeMetroAvailable || metroBusy}
+              activeOpacity={0.75}
+            >
+              <Text style={styles.secondaryButtonText}>Reset</Text>
+            </TouchableOpacity>
+          </View>
+
+          {!snapshot.nativeMetroAvailable ? (
+            <Text style={styles.hint}>Native DevConnect requires pod install / Gradle sync and app rebuild.</Text>
+          ) : null}
         </View>
       </ScrollView>
       <DevConnectQrScanner
         visible={qrVisible}
         onClose={() => setQrVisible(false)}
-        onScanHost={handleQrHost}
+        onScanTarget={handleQrTarget}
       />
     </KeyboardAvoidingView>
   );
@@ -288,7 +461,8 @@ const styles = StyleSheet.create({
   },
   badgeText: { fontSize: 13, fontWeight: '500', color: Colors.primary },
   section: { marginBottom: 14 },
-  sectionTitle: { fontSize: 14, fontWeight: '600', color: Colors.text, marginBottom: 8 },
+  sectionTitle: { fontSize: 14, fontWeight: '600', color: Colors.text, marginBottom: 4 },
+  sectionDesc: { fontSize: 12, color: Colors.textSecondary, marginBottom: 10, lineHeight: 17 },
   label: { fontSize: 13, fontWeight: '500', color: Colors.textSecondary, marginBottom: 6 },
   inputRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
   input: {
@@ -315,6 +489,20 @@ const styles = StyleSheet.create({
     borderColor: Colors.primary,
   },
   scanButtonText: { color: Colors.primary, fontSize: 13, fontWeight: '600' },
+  portRow: { flexDirection: 'row', gap: 10 },
+  portField: { flex: 1 },
+  portLabel: { fontSize: 11, color: Colors.textSecondary, marginBottom: 4 },
+  portInput: {
+    backgroundColor: Colors.surface,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+    fontSize: 13,
+    color: Colors.text,
+    fontFamily: 'Courier',
+  },
   actions: { flexDirection: 'row', gap: 10, marginTop: 4, marginBottom: 12 },
   primaryButton: {
     flex: 1,
@@ -338,20 +526,34 @@ const styles = StyleSheet.create({
   secondaryButtonText: { color: Colors.primary, fontSize: 14, fontWeight: '600' },
   buttonDisabled: { opacity: 0.5 },
   message: { fontSize: 12, lineHeight: 17, color: Colors.textSecondary, marginBottom: 12 },
-  hint: { fontSize: 12, color: Colors.textLight },
-  urlRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
+  hint: { fontSize: 12, color: Colors.textLight, lineHeight: 17 },
+  stepCard: {
     backgroundColor: Colors.surface,
     borderWidth: 1,
     borderColor: Colors.border,
-    borderRadius: 8,
-    paddingLeft: 12,
-    paddingRight: 4,
-    paddingVertical: 4,
+    borderRadius: 10,
+    padding: 12,
     marginBottom: 8,
   },
-  urlText: { flex: 1, fontSize: 13, fontFamily: 'Courier', color: Colors.text, paddingVertical: 6 },
-  copyButton: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 6, backgroundColor: Colors.primary },
-  copyButtonText: { color: '#fff', fontSize: 12, fontWeight: '600' },
+  stepHint: { fontSize: 12, color: Colors.textSecondary, lineHeight: 17 },
+  urlLabel: {
+    minWidth: 40,
+    fontSize: 10,
+    fontWeight: '600',
+    color: Colors.primary,
+    backgroundColor: `${Colors.primary}15`,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    marginRight: 8,
+    textAlign: 'center',
+  },
+  urlRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    paddingVertical: 7,
+  },
+  urlText: { flex: 1, fontSize: 13, fontFamily: 'Courier', color: Colors.text },
 });