react-native-debug-toolkit 3.1.4 → 3.2.0

package/node/daemon/src/store.js

@@ -28,15 +28,33 @@ function slugPart(value) {
     .slice(0, 80) || 'unknown';
 }
 
+function ipTail(ip) {
+  if (!ip || typeof ip !== 'string') return '0';
+  const parts = ip.split('.');
+  return parts.length >= 2 ? parts[parts.length - 1] : slugPart(ip);
+}
+
+function isSimulatorIp(ip) {
+  return ip === '127.0.0.1' || ip === '::1' || ip === '10.0.2.2' || ip === 'localhost';
+}
+
 function createDeviceId(report, source) {
   const device = report && typeof report === 'object' && report.device && typeof report.device === 'object'
     ? report.device
     : {};
-  return [
-    slugPart(device.platform),
-    slugPart(device.model),
-    slugPart(source && source.ip),
-  ].join('_');
+  const platform = slugPart(device.platform);
+  const ip = source && source.ip ? String(source.ip) : '';
+  const sim = isSimulatorIp(ip);
+  let model = slugPart(device.model);
+  if (model === 'unknown' && platform !== 'unknown') {
+    model = sim ? 'sim' : 'device';
+  }
+  const ver = device.appVersion ? slugPart(device.appVersion) : '';
+  const tail = sim ? 'sim' : ipTail(ip);
+  const parts = [platform, model];
+  if (ver && ver !== 'unknown') parts.push(ver);
+  parts.push(tail);
+  return parts.join('_');
 }
 
 function readPersistedDevices(storagePath, maxDevices) {
@@ -92,6 +110,18 @@ function createMemoryStore(options = {}) {
     const deviceId = createDeviceId(report, source);
     const existingIndex = devices.findIndex((item) => item.deviceId === deviceId);
     const existing = existingIndex >= 0 ? devices[existingIndex] : null;
+    const reportSessionId = report.session ? report.session.id : null;
+    if (reportSessionId && report.logs) {
+      Object.entries(report.logs).forEach(function(pair) {
+        if (!Array.isArray(pair[1])) return;
+        report.logs[pair[0]] = pair[1].map(function(entry) {
+          if (entry && typeof entry === 'object' && !entry.sessionId) {
+            return Object.assign({}, entry, { sessionId: reportSessionId });
+          }
+          return entry;
+        });
+      });
+    }
     const deviceLog = {
       deviceId,
       firstSeenAt: existing ? existing.firstSeenAt : receivedAt,
@@ -99,6 +129,7 @@ function createMemoryStore(options = {}) {
       receivedAt,
       source,
       device: report.device || null,
+      session: report.session || null,
       report,
       logCount: createLogCount(report),
     };
@@ -124,6 +155,7 @@ function createMemoryStore(options = {}) {
     }
 
     const deltaLogs = (delta && delta.logs) || {};
+    const currentSessionId = deviceLog.session ? deviceLog.session.id : null;
     Object.entries(deltaLogs).forEach(([type, entries]) => {
       if (!Array.isArray(entries)) {
         return;
@@ -131,7 +163,13 @@ function createMemoryStore(options = {}) {
       if (!deviceLog.report.logs[type]) {
         deviceLog.report.logs[type] = [];
       }
-      deviceLog.report.logs[type].push(...entries);
+      const tagged = entries.map(function(entry) {
+        if (entry && typeof entry === 'object' && currentSessionId && !entry.sessionId) {
+          return Object.assign({}, entry, { sessionId: currentSessionId });
+        }
+        return entry;
+      });
+      deviceLog.report.logs[type].push(...tagged);
     });
 
     deviceLog.lastSeenAt = new Date(Date.now()).toISOString();
@@ -153,6 +191,7 @@ function createMemoryStore(options = {}) {
         receivedAt: deviceLog.receivedAt,
         device: deviceLog.device || null,
         source: deviceLog.source || null,
+        session: deviceLog.session || null,
         logCount: deviceLog.logCount,
       }));
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "3.1.4",
-  "description": "A local-first React Native debugging bridge with in-app logs, desktop daemon, Web Console, HTTP API, and MCP support",
+  "version": "3.2.0",
+  "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",
   "types": "lib/typescript/src/index.d.ts",
@@ -30,8 +30,12 @@
   "keywords": [
     "react-native",
     "debug",
+    "log-bridge",
+    "web-console",
+    "ai-debugging",
     "toolkit",
     "http-inspector",
+    "mcp",
     "development-tools",
     "floating-panel"
   ],
@@ -48,11 +52,19 @@
   "peerDependencies": {
     "@react-native-clipboard/clipboard": ">=1.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.72.0"
+    "react-native": ">=0.72.0",
+    "react-native-camera-kit": ">=18.0.0",
+    "expo-camera": ">=15.0.0"
   },
   "peerDependenciesMeta": {
     "@react-native-clipboard/clipboard": {
       "optional": true
+    },
+    "react-native-camera-kit": {
+      "optional": true
+    },
+    "expo-camera": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/core/initialize.ts

@@ -11,6 +11,7 @@ import { createTrackFeature } from '../features/track';
 import type { TrackFeatureConfig } from '../features/track';
 import { createEnvironmentFeature } from '../features/environment';
 import { createClipboardFeature } from '../features/clipboard';
+import { createDevConnectFeature, restoreDevConnectSettingsToDaemon } from '../features/devConnect';
 import { daemonClient } from '../utils/DaemonClient';
 import type { AnyDebugFeature, BuiltInFeatureName } from '../types';
 
@@ -25,6 +26,7 @@ export interface FeatureConfigs {
   track?: boolean | TrackFeatureConfig;
   environment?: Parameters<typeof createEnvironmentFeature>[0];
   clipboard?: boolean;
+  devConnect?: boolean;
 }
 
 export interface InitializeOptions {
@@ -43,6 +45,7 @@ const featureRegistry: Record<BuiltInFeatureName, (config?: any) => AnyDebugFeat
   track: createTrackFeature,
   environment: createEnvironmentFeature,
   clipboard: createClipboardFeature,
+  devConnect: createDevConnectFeature,
 };
 
 const DEFAULT_FEATURES: BuiltInFeatureName[] = [
@@ -52,6 +55,7 @@ const DEFAULT_FEATURES: BuiltInFeatureName[] = [
   'zustand',
   'track',
   'clipboard',
+  'devConnect',
 ];
 
 function resolveFeatureConfigs(configs: FeatureConfigs): AnyDebugFeature[] {
@@ -119,7 +123,9 @@ export function initializeDebugToolkit(
       DebugToolkit.hideLauncher();
     }
 
-    daemonClient.restore().catch(() => {});
+    restoreDevConnectSettingsToDaemon()
+      .then(() => daemonClient.restore(), () => daemonClient.restore())
+      .catch(() => {});
 
     return DebugToolkit;
   } catch (error) {

package/src/features/devConnect/DevConnectQrScanner.tsx

@@ -0,0 +1,122 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { Colors } from '../../ui/theme/colors';
+import {
+  getScannerModule,
+  type CameraKitReadCodeEvent,
+  type ExpoCameraScanResult,
+} from './cameraKit';
+import { parseMetroQrPayload } from './devConnectUtils';
+
+interface DevConnectQrScannerProps {
+  visible: boolean;
+  onClose: () => void;
+  onScanHost: (host: string) => void;
+}
+
+export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnectQrScannerProps) {
+  const scannedRef = useRef(false);
+  const [error, setError] = useState<string | null>(null);
+  const scanner = getScannerModule();
+
+  useEffect(() => {
+    if (visible) {
+      scannedRef.current = false;
+      setError(null);
+    }
+  }, [visible]);
+
+  const handleScanned = useCallback((rawValue: string) => {
+    if (scannedRef.current) return;
+    if (typeof rawValue !== 'string') return;
+
+    const parsed = parseMetroQrPayload(rawValue);
+    if (!parsed) {
+      setError('QR code does not contain a supported Metro URL.');
+      return;
+    }
+
+    scannedRef.current = true;
+    setError(null);
+    onScanHost(parsed.computerHost);
+    onClose();
+  }, [onClose, onScanHost]);
+
+  const handleCameraKitRead = useCallback((event: CameraKitReadCodeEvent) => {
+    handleScanned(event.nativeEvent?.codeStringValue ?? '');
+  }, [handleScanned]);
+
+  const handleExpoScanned = useCallback((result: ExpoCameraScanResult) => {
+    handleScanned(result.value ?? '');
+  }, [handleScanned]);
+
+  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}
+        <View style={styles.footer}>
+          {error ? <Text style={styles.error}>{error}</Text> : <Text style={styles.hint}>Scan a Metro QR code.</Text>}
+          <TouchableOpacity style={styles.closeButton} onPress={onClose} activeOpacity={0.7}>
+            <Text style={styles.closeButtonText}>Close</Text>
+          </TouchableOpacity>
+        </View>
+        <Pressable style={styles.topClose} onPress={onClose}>
+          <Text style={styles.topCloseText}>Close</Text>
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#000' },
+  camera: { flex: 1 },
+  footer: { padding: 16, backgroundColor: Colors.surface },
+  hint: { fontSize: 13, color: Colors.textSecondary, marginBottom: 12 },
+  error: { fontSize: 13, color: Colors.error, marginBottom: 12 },
+  closeButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 11,
+    borderRadius: 10,
+    backgroundColor: Colors.primary,
+  },
+  closeButtonText: { color: '#fff', fontSize: 14, fontWeight: '600' },
+  topClose: {
+    position: 'absolute',
+    top: 48,
+    right: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+  },
+  topCloseText: { color: '#fff', fontSize: 13, fontWeight: '600' },
+});

package/src/features/devConnect/DevConnectTab.tsx

@@ -0,0 +1,357 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import type { DebugFeatureRenderProps } from '../../types';
+import { Colors } from '../../ui/theme/colors';
+import { copyToComputer } from '../../utils/copyToComputer';
+import {
+  buildDeviceDaemonEndpoint,
+  daemonClient,
+  getDefaultDaemonEndpoint,
+  normalizeDaemonSettings,
+  type DaemonSettings,
+} from '../../utils/DaemonClient';
+import { buildMetroUrls, normalizeComputerHost } from './devConnectUtils';
+import { saveComputerHost } from './devConnectPreferences';
+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';
+
+export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectState>) {
+  const inputRef = useRef<TextInput>(null);
+  const [computerHost, setComputerHost] = useState(snapshot.computerHost);
+  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 [qrVisible, setQrVisible] = useState(false);
+
+  const isSim = snapshot.isSimulator;
+
+  useEffect(() => {
+    setComputerHost(snapshot.computerHost);
+    setStreaming(snapshot.streaming);
+    setSyncState(snapshot.streaming ? 'running' : 'idle');
+  }, [snapshot.computerHost, snapshot.streaming]);
+
+  const metroUrls = isSim
+    ? { expUrl: `exp://localhost:${METRO_PORT}`, httpUrl: `http://localhost:${METRO_PORT}` }
+    : buildMetroUrls(computerHost);
+
+  const handleHostChange = useCallback((value: string) => {
+    setComputerHost(value);
+    const normalized = normalizeComputerHost(value);
+    if (normalized) {
+      saveComputerHost(normalized).catch(() => {});
+    }
+    setSyncState((prev) => (prev === 'failed' ? 'idle' : prev));
+    setMessage(null);
+  }, []);
+
+  const handleQrHost = useCallback((host: string) => {
+    setComputerHost(host);
+    saveComputerHost(host).catch(() => {});
+    setMessage('Computer IP updated from QR code.');
+  }, []);
+
+  const validateSettings = useCallback((): boolean => {
+    if (!isSim && !normalizeComputerHost(computerHost)) {
+      setMessage('Enter your computer IP first.');
+      return false;
+    }
+    return true;
+  }, [computerHost, isSim]);
+
+  const configureDaemon = useCallback(() => {
+    const normalizedHost = isSim ? '' : (normalizeComputerHost(computerHost) ?? '');
+    const settings: DaemonSettings = {
+      mode: isSim ? 'simulator' : 'device',
+      endpoint: '',
+      deviceHost: normalizedHost,
+      token: '',
+    };
+    daemonClient.configure(settings);
+    const normalized = normalizeDaemonSettings(settings);
+    const endpoint = normalized.endpoint || (isSim ? getDefaultDaemonEndpoint() : buildDeviceDaemonEndpoint(normalizedHost));
+    return { ...normalized, endpoint };
+  }, [computerHost, isSim]);
+
+  const toggleLiveSync = useCallback(async () => {
+    if (streaming) {
+      daemonClient.disconnect();
+      daemonClient.setStreamingEnabled(false);
+      setStreaming(false);
+      setSyncState('idle');
+      setMessage(null);
+      return;
+    }
+
+    if (!validateSettings()) return;
+
+    const daemonOptions = configureDaemon();
+    setMessage('Checking desktop connection...');
+    setSyncState('checking');
+
+    const connection = await daemonClient.checkConnection({
+      ...daemonOptions,
+      timeoutMs: CONNECTION_TIMEOUT_MS,
+    });
+    if (!connection.ok) {
+      setStreaming(false);
+      setSyncState('failed');
+      setMessage('Cannot reach desktop. Try /health in phone browser.');
+      return;
+    }
+
+    daemonClient.setStreamingEnabled(true);
+    daemonClient.connect({
+      ...daemonOptions,
+      timeoutMs: 3000,
+      onStatus: (status) => {
+        if (status.state === 'connected') {
+          setStreaming(true);
+          setSyncState('connected');
+          setMessage(null);
+        } else if (status.state === 'retrying') {
+          setSyncState('retrying');
+          setMessage('Desktop not reachable. Retrying...');
+        } else if (status.state === 'failed') {
+          setStreaming(false);
+          setSyncState('failed');
+          setMessage(status.reason === 'auth' ? 'Desktop token rejected.' : 'Desktop not reachable after multiple retries.');
+        } else {
+          setSyncState('checking');
+        }
+      },
+    });
+    setStreaming(true);
+  }, [configureDaemon, streaming, validateSettings]);
+
+  const sendOnce = useCallback(async () => {
+    if (!validateSettings()) return;
+
+    const daemonOptions = configureDaemon();
+    setSending(true);
+    setMessage('Checking desktop connection...');
+
+    try {
+      const connection = await daemonClient.checkConnection({
+        ...daemonOptions,
+        timeoutMs: CONNECTION_TIMEOUT_MS,
+      });
+      if (!connection.ok) {
+        setMessage('Cannot reach desktop. Try /health in phone browser.');
+        return;
+      }
+
+      setMessage('Sending logs...');
+      const result = await daemonClient.reportOnce({
+        ...daemonOptions,
+        timeoutMs: 2000,
+      });
+
+      if (result.ok) {
+        const totalLogs = Object.values(result.logCount ?? {}).reduce((total, count) => total + count, 0);
+        setMessage(`Sent ${totalLogs} logs.`);
+      } else {
+        setMessage(result.error ? `Send failed: ${result.error}` : 'Send failed.');
+      }
+    } finally {
+      setSending(false);
+    }
+  }, [configureDaemon, validateSettings]);
+
+  const copyUrl = useCallback((label: string, url: string) => {
+    copyToComputer(url, { label });
+    setMessage('Copied to computer output.');
+    setTimeout(() => setMessage(null), 1500);
+  }, []);
+
+  const canConnect = isSim || Boolean(normalizeComputerHost(computerHost));
+  const busy = sending || syncState === 'checking';
+
+  return (
+    <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+      <ScrollView keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
+
+        {isSim ? (
+          <View style={styles.badge}>
+            <Text style={styles.badgeText}>Simulator — using localhost</Text>
+          </View>
+        ) : (
+          <View style={styles.section}>
+            <Text style={styles.label}>Computer IP</Text>
+            <View style={styles.inputRow}>
+              <TextInput
+                ref={inputRef}
+                style={styles.input}
+                value={computerHost}
+                onChangeText={handleHostChange}
+                placeholder="192.168.1.10"
+                placeholderTextColor={Colors.textLight}
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="numbers-and-punctuation"
+                returnKeyType="done"
+                onSubmitEditing={() => inputRef.current?.blur()}
+                editable={!streaming}
+              />
+              {snapshot.qrAvailable ? (
+                <TouchableOpacity style={styles.scanButton} onPress={() => setQrVisible(true)} disabled={streaming} activeOpacity={0.7}>
+                  <Text style={styles.scanButtonText}>Scan</Text>
+                </TouchableOpacity>
+              ) : null}
+            </View>
+          </View>
+        )}
+
+        <View style={styles.actions}>
+          <TouchableOpacity
+            style={[styles.primaryButton, (!canConnect || busy) && styles.buttonDisabled]}
+            onPress={toggleLiveSync}
+            disabled={!canConnect || busy}
+            activeOpacity={0.75}
+          >
+            <Text style={styles.primaryButtonText}>
+              {streaming ? 'Stop' : busy ? 'Checking...' : 'Live Sync'}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.secondaryButton, (!canConnect || busy) && styles.buttonDisabled]}
+            onPress={sendOnce}
+            disabled={!canConnect || busy}
+            activeOpacity={0.75}
+          >
+            <Text style={styles.secondaryButtonText}>
+              {sending ? 'Sending...' : 'Send Once'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {message ? <Text style={styles.message}>{message}</Text> : null}
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Metro Bundler</Text>
+          {metroUrls ? (
+            <>
+              <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>
+              </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>
+              </View>
+            </>
+          ) : (
+            <Text style={styles.hint}>Enter a computer IP to show Metro URLs.</Text>
+          )}
+        </View>
+      </ScrollView>
+      <DevConnectQrScanner
+        visible={qrVisible}
+        onClose={() => setQrVisible(false)}
+        onScanHost={handleQrHost}
+      />
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  scrollContent: { paddingHorizontal: 16, paddingTop: 12, paddingBottom: 24 },
+  badge: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: `${Colors.primary}15`,
+    borderWidth: 1,
+    borderColor: `${Colors.primary}30`,
+    marginBottom: 14,
+  },
+  badgeText: { fontSize: 13, fontWeight: '500', color: Colors.primary },
+  section: { marginBottom: 14 },
+  sectionTitle: { fontSize: 14, fontWeight: '600', color: Colors.text, marginBottom: 8 },
+  label: { fontSize: 13, fontWeight: '500', color: Colors.textSecondary, marginBottom: 6 },
+  inputRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  input: {
+    flex: 1,
+    backgroundColor: Colors.surface,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+    color: Colors.text,
+    fontFamily: 'Courier',
+  },
+  scanButton: {
+    minWidth: 62,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 8,
+    backgroundColor: Colors.surface,
+    borderWidth: 1,
+    borderColor: Colors.primary,
+  },
+  scanButtonText: { color: Colors.primary, fontSize: 13, fontWeight: '600' },
+  actions: { flexDirection: 'row', gap: 10, marginTop: 4, marginBottom: 12 },
+  primaryButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 11,
+    borderRadius: 10,
+    backgroundColor: Colors.primary,
+  },
+  primaryButtonText: { color: '#fff', fontSize: 14, fontWeight: '600' },
+  secondaryButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 11,
+    borderRadius: 10,
+    backgroundColor: Colors.surface,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  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',
+    backgroundColor: Colors.surface,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    paddingLeft: 12,
+    paddingRight: 4,
+    paddingVertical: 4,
+    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' },
+});