react-native-debug-toolkit 3.3.8 → 3.5.1

package/src/features/console/ConsoleLogTab.tsx

@@ -7,22 +7,9 @@ import { JsonView } from '../../ui/shared/JsonView';
 import { CopyButton } from '../../ui/shared/CopyButton';
 import { LogListScreen } from '../../ui/shared/LogListScreen';
 import { fmt } from '../../utils/copyToComputer';
+import { LEVEL_COLORS, LEVEL_ICONS } from '../../constants/logLevels';
 import type { ConsoleLogEntry, DebugFeatureRenderProps } from '../../types';
 
-const LEVEL_COLORS: Record<string, string> = {
-  log: '#8E8E93',
-  info: '#007AFF',
-  warn: '#FF9500',
-  error: '#FF3B30',
-};
-
-const LEVEL_ICONS: Record<string, string> = {
-  log: '●',
-  info: 'ℹ',
-  warn: '⚠',
-  error: '✕',
-};
-
 export const ConsoleLogTab: React.FC<DebugFeatureRenderProps<ConsoleLogEntry[]>> = React.memo(({ snapshot }) => (
   <LogListScreen
     data={snapshot}

package/src/features/console/index.ts

@@ -1,7 +1,7 @@
 import { ConsoleLogTab } from './ConsoleLogTab';
 import type { ConsoleLogEntry, DebugFeature } from '../../types';
 import { createPersistedObservableStore } from '../../utils/createPersistedObservableStore';
-import { KEYS } from '../../utils/debugPreferences';
+import { getDefaultLogRuntime, type LogRuntimeContext } from '../../utils/logRuntime';
 
 const LEVELS: ConsoleLogEntry['level'][] = ['log', 'info', 'warn', 'error'];
 
@@ -13,7 +13,9 @@ const consoleCapture = (() => {
 
   function stop(): void {
     refCount = Math.max(0, refCount - 1);
-    if (refCount > 0) return;
+    if (refCount > 0) {
+      return;
+    }
 
     LEVELS.forEach((level) => {
       const original = originalMethods[level];
@@ -78,10 +80,14 @@ export interface ConsoleFeatureConfig {
   maxLogs?: number;
 }
 
-export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFeature<ConsoleLogEntry[]> => {
+export const createConsoleLogFeature = (
+  config?: ConsoleFeatureConfig,
+  runtime: LogRuntimeContext = getDefaultLogRuntime(),
+): DebugFeature<ConsoleLogEntry[]> => {
   const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
   const logStore = createPersistedObservableStore<ConsoleLogEntry>({
-    storageKey: KEYS.consoleLogs,
+    storage: runtime.logStorage,
+    storageKey: runtime.sessionManager.getLogStorageKey('console_logs'),
     maxPersist: 50,
   });
   let initialized = false;
@@ -92,7 +98,9 @@ export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFea
     label: 'Console',
     renderContent: ConsoleLogTab,
     setup: () => {
-      if (initialized) return;
+      if (initialized) {
+        return;
+      }
 
       stopCapture = consoleCapture.start((entry) => {
         logStore.push({ ...entry, id: logStore.nextId() }, maxLogs);
@@ -100,13 +108,15 @@ export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFea
       initialized = true;
     },
     getSnapshot: () => logStore.getData(),
-    clear: () => { logStore.clear(); },
+    clear: () => { logStore.clearPersisted(); },
     cleanup: () => {
-      if (!initialized) return;
+      if (!initialized) {
+        return;
+      }
 
       stopCapture?.();
       stopCapture = null;
-      logStore.clear();
+      logStore.dispose();
       initialized = false;
     },
     subscribe: (listener) => logStore.subscribe(listener),

package/src/features/nativeLogs/NativeLogTab.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import { Colors } from '../../ui/theme/colors';
+import { fmt } from '../../utils/copyToComputer';
+import type { DebugFeatureRenderProps, NativeLogEntry } from '../../types';
+
+const LEVEL_COLORS: Record<string, string> = {
+  trace: '#8E8E93', debug: '#8E8E93', info: '#007AFF',
+  warn: '#FF9500', error: '#FF3B30', fatal: '#AF52DE', unknown: '#8E8E93',
+};
+
+export const NativeLogTab: React.FC<DebugFeatureRenderProps<NativeLogEntry[]>> = React.memo(({ snapshot }) => (
+  <LogListScreen
+    data={snapshot}
+    emptyText="No native logs"
+    renderRow={(item) => (
+      <View style={s.row}>
+        <View style={[s.level, { backgroundColor: LEVEL_COLORS[item.level] ?? LEVEL_COLORS.unknown }]}>
+          <Text style={s.levelText}>{item.level.slice(0, 1).toUpperCase()}</Text>
+        </View>
+        <View style={s.content}>
+          <Text style={s.message} numberOfLines={2}>{item.message}</Text>
+          <Text style={s.meta}>
+            {[item.platform, item.source, item.tag].filter(Boolean).join(' / ')} · {new Date(item.timestamp).toLocaleTimeString()}
+          </Text>
+        </View>
+      </View>
+    )}
+    renderDetailHeader={(item) => (
+      <>
+        <View style={[s.badge, { backgroundColor: LEVEL_COLORS[item.level] ?? LEVEL_COLORS.unknown }]}>
+          <Text style={s.badgeText}>{item.level.toUpperCase()}</Text>
+        </View>
+        <Text style={s.detailTime}>{new Date(item.timestamp).toLocaleString()}</Text>
+      </>
+    )}
+    renderDetailBody={(item) => (
+      <ScrollView style={s.detailBody} contentContainerStyle={s.detailContent}>
+        <View style={s.copyRow}>
+          <CopyButton text={fmt(item)} label="Native Log" />
+        </View>
+        <Text style={s.messageBlock} selectable>{item.message}</Text>
+        <Text style={s.rawBlock} selectable>{fmt(item)}</Text>
+      </ScrollView>
+    )}
+  />
+));
+
+const s = StyleSheet.create({
+  row: { flexDirection: 'row', padding: 14, alignItems: 'flex-start' },
+  level: { width: 24, height: 24, borderRadius: 12, alignItems: 'center', justifyContent: 'center', marginRight: 12 },
+  levelText: { color: '#FFF', fontSize: 11, fontWeight: '700' },
+  content: { flex: 1 },
+  message: { fontSize: 14, color: Colors.text, lineHeight: 20 },
+  meta: { fontSize: 12, color: Colors.textSecondary, marginTop: 4 },
+  badge: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 6 },
+  badgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
+  detailTime: { flex: 1, fontSize: 13, color: Colors.textSecondary, textAlign: 'right' },
+  detailBody: { flex: 1 },
+  detailContent: { padding: 12, gap: 12 },
+  copyRow: { alignItems: 'flex-end' },
+  messageBlock: { fontFamily: 'Courier', fontSize: 13, color: Colors.text, lineHeight: 20 },
+  rawBlock: { fontFamily: 'Courier', fontSize: 12, color: Colors.textSecondary, lineHeight: 18 },
+});

package/src/features/nativeLogs/index.ts

@@ -0,0 +1,94 @@
+import { NativeLogTab } from './NativeLogTab';
+import type { DebugFeature, DebugFeatureListener, NativeLogEntry } from '../../types';
+import { createPersistedObservableStore } from '../../utils/createPersistedObservableStore';
+import { getDefaultLogRuntime, type LogRuntimeContext } from '../../utils/logRuntime';
+import { drainNativeLogs, startNativeLogCapture, stopNativeLogCapture } from './nativeLogsBridge';
+
+const DEFAULT_MAX_LOGS = 200;
+const DEFAULT_MAX_PERSIST = 50;
+const DEFAULT_POLL_INTERVAL_MS = 500;
+const DEFAULT_DRAIN_LIMIT = 100;
+
+const LEVEL_RANK: Record<NativeLogEntry['level'], number> = {
+  trace: 0, debug: 1, info: 2, warn: 3, error: 4, fatal: 5, unknown: 0,
+};
+
+export interface NativeLogsFeatureConfig {
+  maxLogs?: number;
+  pollIntervalMs?: number;
+  minLevel?: NativeLogEntry['level'];
+  includeTags?: Array<string | RegExp>;
+  excludeTags?: Array<string | RegExp>;
+}
+
+function matchesPattern(value: string | undefined, patterns: Array<string | RegExp> | undefined): boolean {
+  if (!value || !patterns?.length) return false;
+  return patterns.some((p) => p instanceof RegExp ? p.test(value) : value.includes(p));
+}
+
+function shouldKeepEntry(entry: Omit<NativeLogEntry, 'id'>, config?: NativeLogsFeatureConfig): boolean {
+  if (config?.minLevel && LEVEL_RANK[entry.level] < LEVEL_RANK[config.minLevel]) return false;
+  if (config?.includeTags?.length && !matchesPattern(entry.tag, config.includeTags)) return false;
+  if (matchesPattern(entry.tag, config?.excludeTags)) return false;
+  return true;
+}
+
+export const createNativeLogsFeature = (
+  config?: NativeLogsFeatureConfig,
+  runtime: LogRuntimeContext = getDefaultLogRuntime(),
+): DebugFeature<NativeLogEntry[]> => {
+  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
+  const pollIntervalMs = Math.max(100, Math.floor(config?.pollIntervalMs ?? DEFAULT_POLL_INTERVAL_MS));
+  const logStore = createPersistedObservableStore<NativeLogEntry>({
+    storage: runtime.logStorage,
+    storageKey: runtime.sessionManager.getLogStorageKey('native_logs'),
+    maxPersist: DEFAULT_MAX_PERSIST,
+  });
+
+  let initialized = false;
+  let timer: ReturnType<typeof setInterval> | null = null;
+  let draining = false;
+
+  async function drainOnce(): Promise<void> {
+    if (draining) return;
+    draining = true;
+    try {
+      const entries = await drainNativeLogs(DEFAULT_DRAIN_LIMIT);
+      entries.filter((e) => shouldKeepEntry(e, config)).forEach((entry) => {
+        logStore.push({ ...entry, id: logStore.nextId() }, maxLogs);
+      });
+    } finally { draining = false; }
+  }
+
+  return {
+    name: 'native',
+    label: 'Native',
+    renderContent: NativeLogTab,
+    setup: () => {
+      if (initialized) return;
+      initialized = true;
+      startNativeLogCapture({
+        minLevel: config?.minLevel,
+        includeTags: config?.includeTags?.filter((p) => typeof p === 'string'),
+        excludeTags: config?.excludeTags?.filter((p) => typeof p === 'string'),
+      }).catch(() => {});
+      timer = setInterval(() => { drainOnce().catch(() => {}); }, pollIntervalMs);
+    },
+    getSnapshot: () => logStore.getData(),
+    clear: () => { logStore.clearPersisted(); },
+    cleanup: () => {
+      if (!initialized) return;
+      if (timer) clearInterval(timer);
+      timer = null;
+      stopNativeLogCapture().catch(() => {});
+      logStore.dispose();
+      initialized = false;
+      draining = false;
+    },
+    subscribe: (listener: DebugFeatureListener) => logStore.subscribe(listener),
+  };
+};
+
+export function _resetNativeLogsForTesting(): void {
+  stopNativeLogCapture().catch(() => {});
+}

package/src/features/nativeLogs/nativeLogsBridge.ts

@@ -0,0 +1,51 @@
+import { NativeModules } from 'react-native';
+import type { NativeLogEntry } from '../../types';
+
+interface NativeLogsModule {
+  startCapture?: (options?: Record<string, unknown>) => Promise<{ ok: boolean }>;
+  stopCapture?: () => Promise<{ ok: boolean }>;
+  drainLogs?: (max?: number) => Promise<Array<Omit<NativeLogEntry, 'id'>>>;
+  getStatus?: () => Promise<{ available: boolean; capturing: boolean; error?: string }>;
+}
+
+function getNativeModule(): NativeLogsModule | null {
+  const mod = NativeModules.DebugToolkitNativeLogs as NativeLogsModule | undefined;
+  if (!mod || typeof mod.drainLogs !== 'function') return null;
+  return mod;
+}
+
+export function isNativeLogsAvailable(): boolean {
+  return getNativeModule() !== null;
+}
+
+export async function startNativeLogCapture(options?: Record<string, unknown>): Promise<boolean> {
+  const mod = getNativeModule();
+  if (!mod?.startCapture) return false;
+  try { const r = await mod.startCapture(options ?? {}); return r?.ok === true; }
+  catch { return false; }
+}
+
+export async function stopNativeLogCapture(): Promise<boolean> {
+  const mod = getNativeModule();
+  if (!mod?.stopCapture) return false;
+  try { const r = await mod.stopCapture(); return r?.ok === true; }
+  catch { return false; }
+}
+
+export async function drainNativeLogs(max = 100): Promise<Array<Omit<NativeLogEntry, 'id'>>> {
+  const mod = getNativeModule();
+  if (!mod?.drainLogs) return [];
+  try { const entries = await mod.drainLogs(Math.max(1, Math.floor(max))); return Array.isArray(entries) ? entries : []; }
+  catch { return []; }
+}
+
+export async function getNativeLogsStatus(): Promise<{ available: boolean; capturing: boolean; error?: string }> {
+  const mod = getNativeModule();
+  if (!mod?.getStatus) return { available: false, capturing: false };
+  try {
+    const s = await mod.getStatus();
+    return { available: s?.available === true, capturing: s?.capturing === true, error: typeof s?.error === 'string' ? s.error : undefined };
+  } catch (error) {
+    return { available: true, capturing: false, error: error instanceof Error ? error.message : String(error) };
+  }
+}

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,37 @@ 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={2}>
+                  {urlParts.path}
                 </Text>
-                <View style={[s.miniPill, { backgroundColor: sc }]}>
-                  <Text style={s.miniPillText}>{item.response?.status ?? 'ERR'}</Text>
+              </View>
+              <View style={s.metaRow}>
+                <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>}
+                {!!urlParts.host && <Text style={[s.metaText, s.hostText]} numberOfLines={1}>{urlParts.host}</Text>}
+                <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</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>
           </View>
         );
@@ -185,43 +163,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 +226,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;