react-native-debug-toolkit 3.1.4 → 3.2.0

package/src/features/devConnect/cameraKit.ts

@@ -0,0 +1,93 @@
+import type { ComponentType } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// ---- react-native-camera-kit types ----
+
+export interface CameraKitReadCodeEvent {
+  nativeEvent?: {
+    codeStringValue?: string;
+  };
+}
+
+export interface CameraKitCameraProps {
+  style?: StyleProp<ViewStyle>;
+  cameraType?: unknown;
+  scanBarcode?: boolean;
+  onReadCode?: (event: CameraKitReadCodeEvent) => void;
+  showFrame?: boolean;
+  laserColor?: string;
+  frameColor?: string;
+  allowedBarcodeTypes?: string[];
+}
+
+export interface CameraKitModule {
+  Camera: ComponentType<CameraKitCameraProps>;
+  CameraType?: { Back?: unknown };
+}
+
+// ---- expo-camera types ----
+
+export interface ExpoCameraScanResult {
+  boundingBox?: unknown;
+  cornerPoints?: unknown;
+  type?: string;
+  value?: string;
+}
+
+export interface ExpoCameraModule {
+  Camera: ComponentType<{
+    style?: StyleProp<ViewStyle>;
+    onBarCodeScanned?: (result: ExpoCameraScanResult) => void;
+    barCodeScannerSettings?: { barCodeTypes: string[] };
+  }>;
+}
+
+// ---- Unified scanner ----
+
+export type ScannerKind = 'camera-kit' | 'expo-camera';
+
+export interface ScannerModule {
+  kind: ScannerKind;
+  CameraKit?: CameraKitModule;
+  ExpoCamera?: ExpoCameraModule;
+}
+
+let cached: ScannerModule | null | false = false;
+
+function tryCameraKit(): ScannerModule | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('react-native-camera-kit') as Partial<CameraKitModule>;
+    if (mod.Camera) {
+      return {
+        kind: 'camera-kit',
+        CameraKit: { Camera: mod.Camera, CameraType: mod.CameraType },
+      };
+    }
+  } catch { /* not installed */ }
+  return null;
+}
+
+function tryExpoCamera(): ScannerModule | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('expo-camera') as Partial<ExpoCameraModule>;
+    if (mod.Camera) {
+      return {
+        kind: 'expo-camera',
+        ExpoCamera: { Camera: mod.Camera },
+      };
+    }
+  } catch { /* not installed */ }
+  return null;
+}
+
+export function getScannerModule(): ScannerModule | null {
+  if (cached !== false) return cached;
+  cached = tryCameraKit() ?? tryExpoCamera();
+  return cached;
+}
+
+export function isCameraKitAvailable(): boolean {
+  return getScannerModule() !== null;
+}

package/src/features/devConnect/devConnectPreferences.ts

@@ -0,0 +1,33 @@
+import { daemonClient } from '../../utils/DaemonClient';
+import { getPreference, KEYS, setPreference } from '../../utils/debugPreferences';
+import { normalizeComputerHost } from './devConnectUtils';
+import { isSimulator } from './platformDetect';
+
+export interface DevConnectPreferences {
+  computerHost: string;
+}
+
+export async function loadDevConnectPreferences(): Promise<DevConnectPreferences> {
+  const storedHost = await getPreference(KEYS.computerHost);
+  return {
+    computerHost: storedHost ? normalizeComputerHost(storedHost) ?? '' : '',
+  };
+}
+
+export async function saveComputerHost(value: string): Promise<string | null> {
+  const normalized = normalizeComputerHost(value);
+  if (!normalized) return null;
+  await setPreference(KEYS.computerHost, normalized);
+  return normalized;
+}
+
+export async function restoreDevConnectSettingsToDaemon(): Promise<void> {
+  const preferences = await loadDevConnectPreferences();
+  const mode = isSimulator() ? 'simulator' as const : 'device' as const;
+  daemonClient.configure({
+    mode,
+    endpoint: '',
+    deviceHost: mode === 'simulator' ? '' : preferences.computerHost,
+    token: '',
+  });
+}

package/src/features/devConnect/devConnectUtils.ts

@@ -0,0 +1,59 @@
+const METRO_PORT = '8081';
+
+export interface MetroUrls {
+  expUrl: string;
+  httpUrl: string;
+}
+
+export interface ParsedMetroQrPayload {
+  computerHost: string;
+  source: string;
+}
+
+function isValidIpv4(host: string): boolean {
+  const parts = host.split('.');
+  if (parts.length !== 4) return false;
+
+  return parts.every((part) => {
+    if (!/^\d{1,3}$/.test(part)) return false;
+    const value = Number(part);
+    return value >= 0 && value <= 255 && String(value) === part;
+  });
+}
+
+function toUrlInput(raw: string): string {
+  const trimmed = raw.trim();
+  if (/^[a-zA-Z][a-zA-Z\d+.-]*:\/\//.test(trimmed)) {
+    return trimmed;
+  }
+  return `http://${trimmed}`;
+}
+
+export function normalizeComputerHost(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+
+  try {
+    const parsed = new URL(toUrlInput(trimmed));
+    const host = parsed.hostname.trim();
+    return isValidIpv4(host) ? host : null;
+  } catch {
+    return null;
+  }
+}
+
+export function buildMetroUrls(rawHost: string): MetroUrls | null {
+  const host = normalizeComputerHost(rawHost);
+  if (!host) return null;
+
+  return {
+    expUrl: `exp://${host}:${METRO_PORT}`,
+    httpUrl: `http://${host}:${METRO_PORT}`,
+  };
+}
+
+export function parseMetroQrPayload(payload: string): ParsedMetroQrPayload | null {
+  const computerHost = normalizeComputerHost(payload);
+  if (!computerHost) return null;
+  return { computerHost, source: payload };
+}

package/src/features/devConnect/index.ts

@@ -0,0 +1,64 @@
+import { DevConnectTab } from './DevConnectTab';
+import { isCameraKitAvailable } from './cameraKit';
+import { loadDevConnectPreferences } from './devConnectPreferences';
+import { isSimulator } from './platformDetect';
+import { daemonClient } from '../../utils/DaemonClient';
+import type { DebugFeature, DebugFeatureListener } from '../../types';
+import type { DevConnectState } from './types';
+
+export type { DevConnectState } from './types';
+export {
+  buildMetroUrls,
+  normalizeComputerHost,
+  parseMetroQrPayload,
+} from './devConnectUtils';
+export {
+  loadDevConnectPreferences,
+  restoreDevConnectSettingsToDaemon,
+  saveComputerHost,
+} from './devConnectPreferences';
+
+export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
+  const listeners = new Set<DebugFeatureListener>();
+  let state: DevConnectState = {
+    isSimulator: isSimulator(),
+    computerHost: '',
+    qrAvailable: isCameraKitAvailable(),
+    streaming: daemonClient.isConnected(),
+  };
+
+  const notify = () => {
+    state = {
+      ...state,
+      streaming: daemonClient.isConnected(),
+    };
+    listeners.forEach((listener) => listener());
+  };
+
+  return {
+    name: 'devConnect',
+    label: 'DevConnect',
+    renderContent: DevConnectTab,
+    setup() {
+      loadDevConnectPreferences().then((preferences) => {
+        state = {
+          ...state,
+          computerHost: preferences.computerHost,
+        };
+        notify();
+      }).catch(() => {
+        notify();
+      });
+    },
+    getSnapshot: () => state,
+    cleanup() {
+      listeners.clear();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+};

package/src/features/devConnect/platformDetect.ts

@@ -0,0 +1,26 @@
+import { NativeModules, Platform } from 'react-native';
+
+export function isSimulator(): boolean {
+  const { OS } = Platform;
+
+  if (OS === 'android') {
+    const constants = Platform.constants as Record<string, unknown>;
+    if (constants.isEmulator === true) return true;
+    const model = String(constants.Model ?? '').toLowerCase();
+    return model.includes('sdk') || model.includes('emulator') || model.includes('google_sdk');
+  }
+
+  if (OS === 'ios') {
+    // NativeModules.KCKFCSupportManager is absent on simulator,
+    // but the most reliable check is the DeviceInfo model name.
+    const deviceInfo = NativeModules.DeviceInfo
+      ?? NativeModules.PlatformConstants;
+    if (deviceInfo) {
+      const model = String(deviceInfo.model ?? '').toLowerCase();
+      if (model.includes('simulator')) return true;
+    }
+    return false;
+  }
+
+  return false;
+}

package/src/features/devConnect/types.ts

@@ -0,0 +1,6 @@
+export interface DevConnectState {
+  isSimulator: boolean;
+  computerHost: string;
+  qrAvailable: boolean;
+  streaming: boolean;
+}

package/src/features/network/NetworkLogTab.tsx

@@ -26,13 +26,16 @@ const formatSize = (data: unknown): string => {
   }
 };
 
+// Keep in sync with console.html buildCurlCommand()
 const buildCurl = (log: NetworkLogEntry): string => {
-  let c = `curl -X ${log.request.method} '${log.request.url}'`;
+  const q = (s: string) => s.replace(/'/g, "'\\''");
+  let c = `curl -X ${log.request.method} '${q(log.request.url)}'`;
   if (log.request.headers) {
-    Object.entries(log.request.headers).forEach(([k, v]) => (c += ` \\\n  -H '${k}: ${v}'`));
+    Object.entries(log.request.headers).forEach(([k, v]) => (c += ` \\\n  -H '${q(k)}: ${q(String(v))}'`));
   }
   if (log.request.body) {
-    c += ` \\\n  -d '${typeof log.request.body === 'string' ? log.request.body : JSON.stringify(log.request.body)}'`;
+    const bodyStr = typeof log.request.body === 'string' ? log.request.body : JSON.stringify(log.request.body);
+    c += ` \\\n  -d '${q(bodyStr)}'`;
   }
   return c;
 };

package/src/index.ts

@@ -20,6 +20,8 @@ export type { TrackFeatureConfig, TrackEventData } from './features/track';
 export { createEnvironmentFeature } from './features/environment';
 export type { EnvironmentFeatureAPI } from './features/environment';
 export { createClipboardFeature } from './features/clipboard';
+export { createDevConnectFeature } from './features/devConnect';
+export type { DevConnectState } from './features/devConnect';
 
 // Hooks
 export { useNavigationLogger } from './features/navigation/useNavigationLogger';

package/src/types/feature.ts

@@ -9,7 +9,8 @@ export type BuiltInFeatureName =
   | 'navigation'
   | 'track'
   | 'environment'
-  | 'clipboard';
+  | 'clipboard'
+  | 'devConnect';
 
 export interface DebugFeatureRenderProps<TSnapshot = unknown> {
   snapshot: TSnapshot;

package/src/ui/DebugView.tsx

@@ -51,6 +51,7 @@ export function DebugView({
       navigation: true,
       track: true,
       clipboard: true,
+      devConnect: true,
       ...features,
     };
 

package/src/ui/panel/DebugPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import {
   View,
   Text,
@@ -10,7 +10,6 @@ import {
   useWindowDimensions,
 } from 'react-native';
 import { Colors } from '../theme/colors';
-import { StreamingSettingsModal } from './StreamingSettingsModal';
 
 interface DebugPanelProps {
   onClose: () => void;
@@ -22,7 +21,6 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
   const { height: screenHeight } = useWindowDimensions();
   const panelTranslateY = useRef(new Animated.Value(screenHeight)).current;
   const backdropOpacity = useRef(new Animated.Value(0)).current;
-  const [settingsVisible, setSettingsVisible] = useState(false);
 
   useEffect(() => {
     requestAnimationFrame(() => {
@@ -103,13 +101,6 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
           <View style={styles.header}>
             <Text style={styles.headerTitle}>Debug Toolkit</Text>
             <View style={styles.headerButtons}>
-              <TouchableOpacity
-                onPress={() => setSettingsVisible(true)}
-                style={styles.settingsButton}
-                activeOpacity={0.6}
-              >
-                <Text style={styles.settingsButtonText}>⚙</Text>
-              </TouchableOpacity>
               <TouchableOpacity
                 onPress={() => {
                   onClearAll();
@@ -128,7 +119,6 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
         </View>
         <View style={styles.panelContent}>{children}</View>
       </Animated.View>
-      <StreamingSettingsModal visible={settingsVisible} onClose={() => setSettingsVisible(false)} />
     </View>
   );
 }
@@ -208,18 +198,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '500',
   },
-  settingsButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: Colors.background,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  settingsButtonText: {
-    fontSize: 16,
-    color: Colors.textSecondary,
-  },
   closeButton: {
     width: 30,
     height: 30,

package/src/utils/DaemonClient.ts

@@ -6,6 +6,7 @@ import {
   createDebugDeviceReport,
   type DebugDeviceReport,
   type DebugDeviceReportOptions,
+  type SessionInfo,
 } from './deviceReport';
 import { safeStringify } from './safeStringify';
 
@@ -147,6 +148,7 @@ interface StreamState {
   debounceMs: number;
   timeoutMs: number;
   deviceId: string | null;
+  session: SessionInfo;
   sending: boolean;
   debounceTimer: ReturnType<typeof setTimeout> | null;
   retryTimer: ReturnType<typeof setTimeout> | null;
@@ -183,6 +185,7 @@ export class DaemonClient {
   private _featureProvider: FeatureDataProvider;
   private _onEndpointDetected: ((url: string) => void) | undefined;
   private _restorePromise: Promise<void> | null = null;
+  private _sessionId: SessionInfo | null = null;
 
   constructor(options: DaemonClientOptions) {
     this._fetch = options.fetch;
@@ -264,6 +267,10 @@ export class DaemonClient {
   connect(options: StreamToDaemonOptions = {}): void {
     if (this._stream) return;
 
+    if (!this._sessionId) {
+      this._sessionId = { id: generateSessionId(), startedAt: Date.now() };
+    }
+
     const endpoint = options.endpoint || this.resolveEndpoint();
     const reportUrl = buildDaemonUrl(endpoint, '/report');
     const ingestUrl = buildDaemonUrl(endpoint, '/ingest');
@@ -280,6 +287,7 @@ export class DaemonClient {
       debounceMs: options.debounceMs || DEFAULT_DEBOUNCE_MS,
       timeoutMs: Math.max(0, options.timeoutMs ?? DEFAULT_TIMEOUT_MS),
       deviceId: null,
+      session: this._sessionId,
       sending: false,
       debounceTimer: null,
       retryTimer: null,
@@ -315,6 +323,7 @@ export class DaemonClient {
     if (!this._stream) return;
     const state = this._stream;
     this._stream = null;
+    this._sessionId = null;
 
     if (state.debounceTimer) clearTimeout(state.debounceTimer);
     if (state.retryTimer) clearTimeout(state.retryTimer);
@@ -458,6 +467,7 @@ export class DaemonClient {
     this._settings = { mode: 'simulator', endpoint: '', deviceHost: '', token: '' };
     this._streamingEnabled = null;
     this._restorePromise = null;
+    this._sessionId = null;
   }
 
   // ---- Private: Transport ----
@@ -629,7 +639,7 @@ export class DaemonClient {
   }
 
   private async doSendFullReport(state: StreamState): Promise<SendResult> {
-    const report = createDebugDeviceReport({ featureProvider: this._featureProvider });
+    const report = createDebugDeviceReport({ featureProvider: this._featureProvider, session: state.session });
     const response = await this.doPost(
       state.reportUrl,
       this.fetchHeaders(state),
@@ -843,3 +853,18 @@ function readLogCount(value: unknown): Record<string, number> | undefined {
 export function _resetDaemonClientForTesting(): void {
   daemonClient._resetForTesting();
 }
+
+function generateSessionId(): string {
+  try {
+    return (globalThis as { crypto?: { randomUUID?: () => string } }).crypto?.randomUUID?.() ?? fallbackSessionId();
+  } catch {
+    return fallbackSessionId();
+  }
+}
+
+function fallbackSessionId(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+}

package/src/utils/debugPreferences.ts

@@ -45,4 +45,5 @@ export const KEYS = {
   consoleLogs: '@react_native_debug_toolkit/console_logs',
   networkLogs: '@react_native_debug_toolkit/network_logs',
   trackLogs: '@react_native_debug_toolkit/track_logs',
+  computerHost: '@react_native_debug_toolkit/computer_host',
 } as const;

package/src/utils/deviceReport.ts

@@ -21,9 +21,15 @@ export interface DeviceInfo {
   appVersion: string;
 }
 
+export interface SessionInfo {
+  id: string;
+  startedAt: number;
+}
+
 export interface DebugDeviceReport {
   version: 2;
   device: DeviceInfo;
+  session?: SessionInfo;
   logs: Record<string, unknown[] | undefined>;
 }
 
@@ -161,7 +167,7 @@ function sanitizeValue(
 }
 
 export function createDebugDeviceReport(
-  options: DebugDeviceReportOptions & { featureProvider?: FeatureDataProvider } = {},
+  options: DebugDeviceReportOptions & { featureProvider?: FeatureDataProvider; session?: SessionInfo } = {},
 ): DebugDeviceReport {
   const provider = options.featureProvider ?? debugToolkit;
   const maxPerType = Math.max(1, Math.floor(options.maxPerType ?? DEFAULT_MAX_PER_TYPE));
@@ -200,6 +206,7 @@ export function createDebugDeviceReport(
       osVersion: Platform.Version == null ? 'unknown' : String(Platform.Version),
       appVersion: (constants?.appVersion as string) || 'unknown',
     },
+    session: options.session,
     logs,
   };
 }