react-native-debug-toolkit 3.3.4 → 3.5.0

package/src/features/devConnect/index.ts

@@ -1,7 +1,7 @@
 import { DevConnectTab } from './DevConnectTab';
 import { loadDevConnectPreferences } from './devConnectPreferences';
-import { DEFAULT_DAEMON_PORT, DEFAULT_METRO_PORT, extractSubnetPrefix } from './devConnectUtils';
-import { getDeviceLocalIp, isNativeDevConnectAvailable } from './nativeDevConnect';
+import { DEFAULT_DAEMON_PORT, extractSubnetPrefix } from './devConnectUtils';
+import { getDeviceLocalIp } from './nativeDevConnect';
 import { isSimulator } from './platformDetect';
 import { daemonClient } from '../../utils/DaemonClient';
 import type { DebugFeature, DebugFeatureListener } from '../../types';
@@ -9,11 +9,9 @@ import type { DevConnectFeatureControls, DevConnectSettingsPatch, DevConnectStat
 
 export type { DevConnectState } from './types';
 export {
-  buildMetroUrls,
   normalizeComputerHost,
   normalizePort,
   parseComputerTarget,
-  parseMetroQrPayload,
 } from './devConnectUtils';
 export {
   loadDevConnectPreferences,
@@ -21,7 +19,6 @@ export {
   saveComputerHost,
   saveComputerTarget,
   saveDaemonPort,
-  saveMetroPort,
 } from './devConnectPreferences';
 export { nativeIsDebugBuild } from './nativeDevConnect';
 
@@ -30,9 +27,7 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
   let state: DevConnectState = {
     isSimulator: isSimulator(),
     computerHost: '',
-    metroPort: DEFAULT_METRO_PORT,
     daemonPort: DEFAULT_DAEMON_PORT,
-    nativeMetroAvailable: isNativeDevConnectAvailable(),
     streaming: daemonClient.isConnected(),
   };
 
@@ -62,9 +57,7 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
         state = {
           ...state,
           computerHost: preferences.computerHost,
-          metroPort: preferences.metroPort,
           daemonPort: preferences.daemonPort,
-          nativeMetroAvailable: isNativeDevConnectAvailable(),
         };
 
         if (!state.isSimulator) {

package/src/features/devConnect/nativeDevConnect.ts

@@ -1,55 +1,14 @@
 import { NativeModules } from 'react-native';
 
-import { buildMetroTarget } from './devConnectUtils';
-
-export interface NativeDiagnostics {
-  persistedMetroHost: string | null;
-  appDelegateClass: string;
-  // Metro host switching only works in Debug builds (RN strips the packager machinery in
-  // Release). False means the Remote JS Bundle controls should be disabled.
-  isDebugBuild: boolean;
-  hasEmbeddedBundle?: boolean;
-  embeddedFirstHookInstalled?: boolean;
-  packagerHookInstalled?: boolean;
-  bundleRootHookInstalled?: boolean;
-}
-
 interface DebugToolkitDevConnectNativeModule {
-  applyMetroHost: (hostPort: string) => Promise<{ hostPort?: string } | void>;
-  resetMetroHost: () => Promise<void>;
-  getMetroHost?: () => Promise<string | null>;
   getLocalIp?: () => Promise<string | null>;
   isDebugBuild?: () => Promise<boolean>;
   getPreference?: (key: string) => Promise<string | null>;
-  getDiagnostics?: () => Promise<NativeDiagnostics>;
 }
 
-type MetroBundleFailureReason =
-  | 'invalid_target'
-  | 'native_unavailable'
-  | 'fetch_unavailable'
-  | 'metro_unreachable'
-  | 'native_error';
-
-export type MetroBundleResult =
-  | { ok: true; hostPort: string }
-  | { ok: false; reason: MetroBundleFailureReason; error?: string; statusUrl?: string };
-
-type FetchLike = (
-  url: string,
-  init: { method: string },
-) => Promise<{
-  ok?: boolean;
-  text?: () => Promise<string>;
-}>;
-
 function getNativeModule(): DebugToolkitDevConnectNativeModule | null {
   const nativeModule = NativeModules.DebugToolkitDevConnect as Partial<DebugToolkitDevConnectNativeModule> | undefined;
-  if (
-    nativeModule &&
-    typeof nativeModule.applyMetroHost === 'function' &&
-    typeof nativeModule.resetMetroHost === 'function'
-  ) {
+  if (nativeModule && typeof nativeModule.isDebugBuild === 'function') {
     return nativeModule as DebugToolkitDevConnectNativeModule;
   }
   return null;
@@ -59,88 +18,6 @@ export function isNativeDevConnectAvailable(): boolean {
   return getNativeModule() !== null;
 }
 
-async function checkMetroStatus(statusUrl: string): Promise<MetroBundleResult | null> {
-  const fetchImpl = globalThis.fetch as FetchLike | undefined;
-  if (!fetchImpl) {
-    return {
-      ok: false,
-      reason: 'fetch_unavailable',
-      statusUrl,
-      error: 'global fetch is not available',
-    };
-  }
-
-  try {
-    const response = await fetchImpl(statusUrl, { method: 'GET' });
-    const body = typeof response.text === 'function' ? await response.text() : '';
-    if (response.ok === false || !body.includes('packager-status:running')) {
-      return {
-        ok: false,
-        reason: 'metro_unreachable',
-        statusUrl,
-        error: body || 'Metro status endpoint did not report running',
-      };
-    }
-    return null;
-  } catch (error) {
-    return {
-      ok: false,
-      reason: 'metro_unreachable',
-      statusUrl,
-      error: error instanceof Error ? error.message : String(error),
-    };
-  }
-}
-
-export async function applyMetroBundle(host: string, port: string): Promise<MetroBundleResult> {
-  const target = buildMetroTarget(host, port);
-  if (!target) {
-    return { ok: false, reason: 'invalid_target' };
-  }
-
-  const nativeModule = getNativeModule();
-  if (!nativeModule) {
-    return { ok: false, reason: 'native_unavailable' };
-  }
-
-  const statusError = await checkMetroStatus(target.statusUrl);
-  if (statusError) {
-    return statusError;
-  }
-
-  try {
-    const result = await nativeModule.applyMetroHost(target.hostPort);
-    return {
-      ok: true,
-      hostPort: result && typeof result.hostPort === 'string' ? result.hostPort : target.hostPort,
-    };
-  } catch (error) {
-    return {
-      ok: false,
-      reason: 'native_error',
-      error: error instanceof Error ? error.message : String(error),
-    };
-  }
-}
-
-export async function resetMetroBundle(): Promise<MetroBundleResult | { ok: true }> {
-  const nativeModule = getNativeModule();
-  if (!nativeModule) {
-    return { ok: false, reason: 'native_unavailable' };
-  }
-
-  try {
-    await nativeModule.resetMetroHost();
-    return { ok: true };
-  } catch (error) {
-    return {
-      ok: false,
-      reason: 'native_error',
-      error: error instanceof Error ? error.message : String(error),
-    };
-  }
-}
-
 export async function getDeviceLocalIp(): Promise<string | null> {
   const nativeModule = getNativeModule();
   if (!nativeModule?.getLocalIp) {
@@ -166,15 +43,3 @@ export async function nativeIsDebugBuild(): Promise<boolean | null> {
     return null;
   }
 }
-
-export async function getNativeDiagnostics(): Promise<NativeDiagnostics | null> {
-  const nativeModule = getNativeModule();
-  if (!nativeModule?.getDiagnostics) {
-    return null;
-  }
-  try {
-    return await nativeModule.getDiagnostics();
-  } catch {
-    return null;
-  }
-}

package/src/features/devConnect/types.ts

@@ -1,15 +1,13 @@
 export interface DevConnectState {
   isSimulator: boolean;
   computerHost: string;
-  metroPort: string;
   daemonPort: string;
   subnetPrefix?: string;
-  nativeMetroAvailable: boolean;
   streaming: boolean;
 }
 
 export type DevConnectSettingsPatch = Partial<
-  Pick<DevConnectState, 'computerHost' | 'metroPort' | 'daemonPort'>
+  Pick<DevConnectState, 'computerHost' | 'daemonPort'>
 >;
 
 export interface DevConnectFeatureControls {

package/src/features/network/NetworkLogTab.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   View,
   Text,
   StyleSheet,
-  TextInput,
   ScrollView,
 } from 'react-native';
 import { Colors, getMethodColor } from '../../ui/theme/colors';
@@ -43,58 +42,38 @@ const buildCurl = (log: NetworkLogEntry): string => {
 export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry[]>> = React.memo(({
   snapshot,
 }) => {
-  const [search, setSearch] = useState('');
-  const data = snapshot;
-
-  const filtered = search
-    ? data.filter(
-        (l) =>
-          l.request.url.toLowerCase().includes(search.toLowerCase()) ||
-          l.request.method.toLowerCase().includes(search.toLowerCase()),
-      )
-    : data;
-
-  const sorted = [...filtered].sort((a, b) => b.timestamp - a.timestamp);
+  const sorted = [...snapshot].sort((a, b) => b.timestamp - a.timestamp);
 
   return (
     <LogListScreen
       data={sorted}
       reversed={false}
       emptyText="No HTTP requests logged"
-      renderListHeader={() => (
-        <View style={s.searchContainer}>
-          <View style={s.searchBar}>
-            <Text style={s.searchIcon}>⌕</Text>
-            <TextInput
-              style={s.search}
-              placeholder="Search URLs..."
-              placeholderTextColor={Colors.textLight}
-              value={search}
-              onChangeText={setSearch}
-            />
-          </View>
-        </View>
-      )}
       renderRow={(item) => {
         const ok = !item.error && (!item.response || item.response.status < 400);
-        const sc = ok ? Colors.success : Colors.error;
+        const statusColor = ok ? Colors.success : Colors.error;
+        const urlParts = formatUrlParts(item.request.url);
+
         return (
           <View style={s.cardRow}>
-            <View style={[s.statusIndicator, { backgroundColor: sc }]} />
+            <View style={[s.statusIndicator, { backgroundColor: statusColor }]} />
             <View style={s.cardBody}>
-              <View style={s.cardMeta}>
-                <Text style={[s.methodText, { color: getMethodColor(item.request.method) }]}>
-                  {item.request.method}
+              <View style={s.primaryRow}>
+                <View style={[s.methodChip, { backgroundColor: getMethodColor(item.request.method) }]}>
+                  <Text style={s.methodChipText}>{item.request.method}</Text>
+                </View>
+                <Text style={[s.pathText, !ok && { color: Colors.error }]} numberOfLines={1}>
+                  {urlParts.path}
                 </Text>
-                <View style={[s.miniPill, { backgroundColor: sc }]}>
-                  <Text style={s.miniPillText}>{item.response?.status ?? 'ERR'}</Text>
+                <View style={[s.statusChip, { backgroundColor: statusColor }]}>
+                  <Text style={s.statusChipText}>{item.response?.status ?? 'ERR'}</Text>
                 </View>
-                {item.duration != null && <Text style={s.durationText}>{item.duration}ms</Text>}
               </View>
-              <Text style={[s.url, !ok && { color: Colors.error }]} numberOfLines={2}>
-                {item.request.url}
-              </Text>
-              <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+              <View style={s.metaRow}>
+                {item.duration != null && <Text style={s.metaText}>{item.duration}ms</Text>}
+                {!!urlParts.host && <Text style={[s.metaText, s.hostText]} numberOfLines={1}>{urlParts.host}</Text>}
+                <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+              </View>
             </View>
           </View>
         );
@@ -185,43 +164,55 @@ export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry[]>>
   );
 });
 
+function formatUrlParts(url: string): { host: string; path: string } {
+  try {
+    const parsed = new URL(url);
+    return {
+      host: parsed.host,
+      path: parsed.pathname + parsed.search,
+    };
+  } catch {
+    return { host: '', path: url };
+  }
+}
+
 const s = StyleSheet.create({
-  // Search
-  searchContainer: {
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    paddingBottom: 6,
-    backgroundColor: Colors.background,
-  },
-  searchBar: {
+  cardRow: { flexDirection: 'row', padding: 12 },
+  statusIndicator: { width: 3, borderRadius: 2, marginRight: 10 },
+  cardBody: { flex: 1, gap: 7 },
+  primaryRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: Colors.surface,
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    height: 38,
+    gap: 7,
+    minWidth: 0,
+  },
+  methodChip: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 6,
   },
-  searchIcon: { fontSize: 16, color: Colors.textLight, marginRight: 6 },
-  search: {
+  methodChipText: {
+    color: '#FFF',
+    fontSize: 10,
+    fontWeight: '800',
+  },
+  pathText: {
     flex: 1,
-    fontSize: 14,
+    fontSize: 13,
+    fontWeight: '700',
     color: Colors.text,
-    padding: 0,
   },
-
-  // Row
-  cardRow: { flexDirection: 'row', padding: 14 },
-  statusIndicator: { width: 3, borderRadius: 2, marginRight: 12 },
-  cardBody: { flex: 1 },
-  cardMeta: { flexDirection: 'row', alignItems: 'center', marginBottom: 6, gap: 6 },
-  methodText: { fontSize: 13, fontWeight: '700' },
-  miniPill: { paddingHorizontal: 7, paddingVertical: 2, borderRadius: 4 },
-  miniPillText: { color: '#FFF', fontSize: 10, fontWeight: '700' },
-  durationText: { fontSize: 12, color: Colors.textSecondary, fontWeight: '500' },
-  url: { fontSize: 13, color: Colors.textSecondary, marginBottom: 4, lineHeight: 18 },
+  statusChip: { paddingHorizontal: 7, paddingVertical: 3, borderRadius: 6 },
+  statusChipText: { color: '#FFF', fontSize: 10, fontWeight: '800' },
+  metaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+    minWidth: 0,
+  },
+  metaText: { fontSize: 11, color: Colors.textSecondary, fontWeight: '600' },
+  hostText: { flex: 1 },
   time: { fontSize: 11, color: Colors.textLight },
-
-  // Detail header
   detailHeaderCenter: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -236,8 +227,7 @@ const s = StyleSheet.create({
   methodBadgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
   statusPill: { paddingHorizontal: 9, paddingVertical: 3, borderRadius: 6 },
   statusPillText: { color: '#FFF', fontSize: 11, fontWeight: '700' },
-
-  // Detail body
+  durationText: { fontSize: 12, color: Colors.textSecondary, fontWeight: '500' },
   detailBody: { flex: 1 },
   detailBodyContent: { padding: 12, paddingBottom: 40 },
   urlCard: {

package/src/features/network/index.ts

@@ -3,7 +3,8 @@ import { NetworkLogTab } from './NetworkLogTab';
 import type { NetworkLogEntry } from '../../types';
 import { createChannelFeature } from '../../utils/createChannelFeature';
 import { createEventChannel } from '../../utils/createEventChannel';
-import { KEYS } from '../../utils/debugPreferences';
+import { sanitizeDebugLogEntry } from '../../utils/deviceReport';
+import { getDefaultLogRuntime, type LogRuntimeContext } from '../../utils/logRuntime';
 import {
   startXMLHttpRequest,
   resetInterceptors,
@@ -44,7 +45,10 @@ export interface NetworkFeatureConfig {
   blacklist?: Array<string | RegExp>;
 }
 
-export const createNetworkFeature = (config?: NetworkFeatureConfig) => {
+export const createNetworkFeature = (
+  config?: NetworkFeatureConfig,
+  runtime: LogRuntimeContext = getDefaultLogRuntime(),
+) => {
   const userBlacklist = config?.blacklist ? [...config.blacklist] : [];
 
   return createChannelFeature<NetworkLogPayload, NetworkLogEntry>(
@@ -55,7 +59,12 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig) => {
       label: 'Network',
       renderContent: NetworkLogTab,
       maxLogs: config?.maxLogs,
-      persist: { storageKey: KEYS.networkLogs, maxPersist: 30 },
+      persist: {
+        storage: runtime.logStorage,
+        storageKey: runtime.sessionManager.getLogStorageKey('network_logs'),
+        maxPersist: 30,
+        serialize: (entry) => sanitizeDebugLogEntry(entry),
+      },
       beforePush: (payload) => {
         if (isUrlBlacklisted(payload.request.url, [...userBlacklist, ...daemonEndpointBlacklist])) {
           return null;