react-native-debug-toolkit 2.0.0 → 2.2.0

package/src/features/console/ConsoleLogTab.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { Colors } from '../../ui/theme/colors';
+import { safeStringify } from '../../utils/safeStringify';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import { fmt } from '../../utils/copyToComputer';
+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}
+    emptyText="No console logs"
+    renderRow={(item) => (
+      <View style={s.cardRow}>
+        <View style={[s.levelDot, { backgroundColor: LEVEL_COLORS[item.level] ?? '#8E8E93' }]}>
+          <Text style={s.levelIcon}>{LEVEL_ICONS[item.level] ?? '●'}</Text>
+        </View>
+        <View style={s.cardContent}>
+          <Text style={s.logMessage} numberOfLines={2}>
+            {item.data.map((d) => (typeof d === 'string' ? d : safeStringify(d))).join(' ')}
+          </Text>
+          <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+        </View>
+      </View>
+    )}
+    renderDetailHeader={(item) => (
+      <>
+        <View style={[s.levelBadge, { backgroundColor: LEVEL_COLORS[item.level] ?? '#8E8E93' }]}>
+          <Text style={s.levelBadgeText}>{item.level.toUpperCase()}</Text>
+        </View>
+        <Text style={s.detailTime}>{new Date(item.timestamp).toLocaleString()}</Text>
+      </>
+    )}
+    renderDetailBody={(item) => (
+      <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+        {item.data.map((d, index) => {
+          const formatted = typeof d === 'object' && d !== null ? fmt(d) : String(d);
+          return (
+            <CollapsibleSection
+              key={index}
+              title={typeof d === 'object' && d !== null ? `Arg ${index + 1} (object)` : `Arg ${index + 1}`}
+              initiallyExpanded={index === 0}
+            >
+              <View style={s.sectionWithCopy}>
+                <CopyButton text={formatted} label={`Console Arg ${index + 1}`} />
+                {typeof d === 'object' && d !== null ? (
+                  <JsonView data={d} maxHeight={250} />
+                ) : (
+                  <Text style={s.plainText} selectable>{String(d)}</Text>
+                )}
+              </View>
+            </CollapsibleSection>
+          );
+        })}
+      </ScrollView>
+    )}
+  />
+));
+
+const s = StyleSheet.create({
+  cardRow: { flexDirection: 'row', padding: 14, alignItems: 'flex-start' },
+  levelDot: {
+    width: 24, height: 24, borderRadius: 12,
+    alignItems: 'center', justifyContent: 'center',
+    marginRight: 12, marginTop: 1,
+  },
+  levelIcon: { color: '#FFF', fontSize: 11, fontWeight: '700' },
+  cardContent: { flex: 1 },
+  logMessage: { fontSize: 14, color: Colors.text, lineHeight: 20 },
+  time: { fontSize: 12, color: Colors.textSecondary, marginTop: 4 },
+  levelBadge: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 6 },
+  levelBadgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
+  detailTime: { flex: 1, fontSize: 13, color: Colors.textSecondary, textAlign: 'right' },
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12 },
+  sectionWithCopy: { gap: 8 },
+  plainText: { fontFamily: 'Courier', fontSize: 13, color: Colors.text, lineHeight: 20 },
+});

package/src/features/console/index.ts

@@ -0,0 +1,119 @@
+import { ConsoleLogTab } from './ConsoleLogTab';
+import type { ConsoleLogEntry, DebugFeature } from '../../types';
+import { createPersistedObservableStore } from '../../utils/createPersistedObservableStore';
+import { KEYS } from '../../utils/debugPreferences';
+
+const LEVELS: ConsoleLogEntry['level'][] = ['log', 'info', 'warn', 'error'];
+
+// ─── Console capture manager (encapsulated mutable state) ──
+
+const consoleCapture = (() => {
+  const originalMethods: Partial<Record<ConsoleLogEntry['level'], (...args: unknown[]) => void>> = {};
+  let refCount = 0;
+
+  function stop(): void {
+    refCount = Math.max(0, refCount - 1);
+    if (refCount > 0) return;
+
+    LEVELS.forEach((level) => {
+      const original = originalMethods[level];
+      if (original) {
+        console[level] = original;
+        delete originalMethods[level];
+      }
+    });
+  }
+
+  function isIntercepted(): boolean {
+    return LEVELS.some((level) => originalMethods[level] !== undefined);
+  }
+
+  function start(emit: (entry: ConsoleLogEntry) => void): () => void {
+    refCount += 1;
+    if (isIntercepted()) {
+      return () => { stop(); };
+    }
+
+    LEVELS.forEach((level) => {
+      originalMethods[level] = console[level];
+
+      console[level] = (...args: unknown[]) => {
+        originalMethods[level]?.apply(console, args);
+        if (level === 'log' && typeof args[0] === 'string' && args[0].startsWith('[DebugToolkit:Copy]')) {
+          return;
+        }
+        emit({
+          id: '',
+          timestamp: Date.now(),
+          level,
+          data: args,
+        });
+      };
+    });
+
+    return () => { stop(); };
+  }
+
+  return {
+    start,
+    reset() {
+      LEVELS.forEach((level) => {
+        const original = originalMethods[level];
+        if (original) {
+          console[level] = original;
+          delete originalMethods[level];
+        }
+      });
+      refCount = 0;
+    },
+  };
+})();
+
+// ─── Feature factory ──────────────────────────────────
+
+const DEFAULT_MAX_LOGS = 200;
+
+export interface ConsoleFeatureConfig {
+  /** Maximum number of console logs to keep (default: 200) */
+  maxLogs?: number;
+}
+
+export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFeature<ConsoleLogEntry[]> => {
+  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
+  const logStore = createPersistedObservableStore<ConsoleLogEntry>({
+    storageKey: KEYS.consoleLogs,
+    maxPersist: 50,
+  });
+  let initialized = false;
+  let stopCapture: (() => void) | null = null;
+
+  return {
+    name: 'console',
+    label: 'Console',
+    renderContent: ConsoleLogTab,
+    setup: () => {
+      if (initialized) return;
+
+      stopCapture = consoleCapture.start((entry) => {
+        logStore.push({ ...entry, id: logStore.nextId() }, maxLogs);
+      });
+      initialized = true;
+    },
+    getSnapshot: () => logStore.getData(),
+    clear: () => { logStore.clear(); },
+    cleanup: () => {
+      if (!initialized) return;
+
+      stopCapture?.();
+      stopCapture = null;
+      logStore.clear();
+      initialized = false;
+    },
+    subscribe: (listener) => logStore.subscribe(listener),
+  };
+};
+
+/** Reset module-level state for testing */
+export function _resetConsoleForTesting(): void {
+  consoleCapture.reset();
+}

package/src/{components → features/environment}/EnvironmentTab.tsx

@@ -6,9 +6,9 @@ import {
   StyleSheet,
   ScrollView,
 } from 'react-native';
-import { Colors } from '../utils/constants';
-import type { DebugFeatureRenderProps, EnvironmentState } from '../types';
-import type { EnvironmentFeatureAPI } from '../features/EnvironmentFeature';
+import { Colors } from '../../ui/theme/colors';
+import type { DebugFeatureRenderProps, EnvironmentState } from '../../types';
+import type { EnvironmentFeatureAPI } from './index';
 
 const DEFAULT_COLORS: Record<string, string> = {
   dev: '#34C759',
@@ -19,11 +19,11 @@ const DEFAULT_COLORS: Record<string, string> = {
   prod: '#FF3B30',
 };
 
-export const EnvironmentTab: React.FC<DebugFeatureRenderProps<EnvironmentState>> = ({
-  data,
+export const EnvironmentTab: React.FC<DebugFeatureRenderProps<EnvironmentState>> = React.memo(({
+  snapshot,
   feature,
 }) => {
-  const state = data[0];
+  const state = snapshot;
   if (!state || state.environments.length === 0) {
     return (
       <View style={styles.container}>
@@ -114,7 +114,7 @@ export const EnvironmentTab: React.FC<DebugFeatureRenderProps<EnvironmentState>>
       ) : null}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

package/src/features/{EnvironmentFeature.ts → environment/index.ts}

@@ -1,7 +1,11 @@
-import { EnvironmentTab } from '../components/EnvironmentTab';
-import type { DebugFeature, EnvironmentConfig, EnvironmentState } from '../types';
-import { createObservableStore } from '../utils/createObservableStore';
-import { setUrlRewriter } from './NetworkFeature';
+import { EnvironmentTab } from './EnvironmentTab';
+import type {
+  DebugFeature,
+  DebugFeatureListener,
+  EnvironmentConfig,
+  EnvironmentState,
+} from '../../types';
+import { urlRewriter } from '../../utils/urlRewriterRegistry';
 
 // Lazy AsyncStorage loader
 type AsyncStorageModule = {
@@ -76,7 +80,7 @@ export interface EnvironmentFeatureAPI extends DebugFeature<EnvironmentState> {
 export const createEnvironmentFeature = (
   initialEnvironments?: EnvironmentConfig[],
 ): EnvironmentFeatureAPI => {
-  const stateStore = createObservableStore<EnvironmentState>();
+  const listeners = new Set<DebugFeatureListener>();
   let environments: EnvironmentConfig[] = initialEnvironments ?? [];
   let initialized = false;
 
@@ -85,9 +89,10 @@ export const createEnvironmentFeature = (
     currentEnvironmentId: activeEnvironmentId,
   });
 
-  const updateStore = () => {
-    stateStore.clear();
-    stateStore.push(getCurrentState());
+  const notify = () => {
+    listeners.forEach((listener) => {
+      listener();
+    });
   };
 
   const applyEnvironment = (envId: string | null) => {
@@ -97,16 +102,16 @@ export const createEnvironmentFeature = (
     if (initialized) {
       try {
         if (envId && environments.length > 0) {
-          setUrlRewriter(createUrlRewriter());
+          urlRewriter.set(createUrlRewriter());
         } else {
-          setUrlRewriter(null);
+          urlRewriter.set(null);
         }
       } catch (err) {
         if (__DEV__) console.warn('[DebugToolkit] Failed to set URL rewriter:', err);
       }
     }
 
-    updateStore();
+    notify();
   };
 
   const persistSelection = async (envId: string | null) => {
@@ -139,39 +144,36 @@ export const createEnvironmentFeature = (
     setup: () => {
       if (initialized) return;
 
-      updateStore();
+      notify();
       initialized = true;
 
       // Install rewriter if an environment is already selected
       if (activeEnvironmentId && environments.length > 0) {
-        try {
-          setUrlRewriter(createUrlRewriter());
-        } catch {
-          // NetworkFeature may not be available
-        }
+        urlRewriter.set(createUrlRewriter());
       }
 
       // Async persistence load (will override if a preference exists)
       loadPersistedSelection();
     },
-    getData: () => stateStore.getData(),
+    getSnapshot: getCurrentState,
     clear: () => {
       applyEnvironment(null);
       persistSelection(null);
     },
     cleanup: () => {
       if (!initialized) return;
-      try {
-        setUrlRewriter(null);
-      } catch (err) {
-        if (__DEV__) console.warn('[DebugToolkit] Failed to set URL rewriter:', err);
-      }
+      urlRewriter.set(null);
       activeEnvironmentId = null;
       currentHostsMap = null;
-      stateStore.clear();
+      notify();
       initialized = false;
     },
-    subscribe: (listener) => stateStore.subscribe(listener),
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
     registerEnvironments: (envs: EnvironmentConfig[]) => {
       environments = envs;
       applyEnvironment(activeEnvironmentId);

package/src/{components → features/navigation}/NavigationLogTab.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { View, Text, FlatList, StyleSheet } from 'react-native';
-import { Colors } from '../utils/constants';
-import { CopyButton } from './shared/CopyButton';
-import type { DebugFeatureRenderProps, NavigationLogEntry } from '../types';
+import { Colors } from '../../ui/theme/colors';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import type { DebugFeatureRenderProps, NavigationLogEntry } from '../../types';
 
-export const NavigationLogTab: React.FC<DebugFeatureRenderProps<NavigationLogEntry>> = React.memo(({
-  data,
+export const NavigationLogTab: React.FC<DebugFeatureRenderProps<NavigationLogEntry[]>> = React.memo(({
+  snapshot,
 }) => {
+  const data = snapshot;
   const renderItem = ({ item }: { item: NavigationLogEntry }) => (
     <View style={styles.logItem}>
       <View style={styles.header}>

package/src/features/navigation/index.ts

@@ -0,0 +1,44 @@
+import { NavigationLogTab } from './NavigationLogTab';
+import type { DebugFeature, NavigationLogEntry } from '../../types';
+import { createEventChannel } from '../../utils/createEventChannel';
+import { createChannelFeature } from '../../utils/createChannelFeature';
+
+type NavigationLogPayload = Omit<NavigationLogEntry, 'id'>;
+
+let navigationChannel = createEventChannel<NavigationLogPayload>();
+
+export const addNavigationLog = (
+  action: string,
+  from: string,
+  to: string,
+  startTime?: number,
+  duration?: number,
+  debugLog?: string,
+): void => {
+  navigationChannel.emit({
+    timestamp: Date.now(),
+    action,
+    from,
+    to,
+    startTime,
+    duration,
+    debugLog,
+  });
+};
+
+export interface NavigationFeatureConfig {
+  /** Maximum number of navigation logs to keep (default: 200) */
+  maxLogs?: number;
+}
+
+export const createNavigationLogFeature = (config?: NavigationFeatureConfig): DebugFeature<NavigationLogEntry[]> =>
+  createChannelFeature(
+    () => navigationChannel,
+    (payload, id) => ({ ...payload, id }),
+    { name: 'navigation', label: 'Navigation', renderContent: NavigationLogTab, maxLogs: config?.maxLogs },
+  );
+
+/** Reset module-level state for testing */
+export function _resetNavigationForTesting(): void {
+  navigationChannel = createEventChannel<NavigationLogPayload>();
+}

package/src/{hooks → features/navigation}/useNavigationLogger.ts

@@ -1,12 +1,7 @@
 import { useEffect, useRef } from 'react';
-import { addNavigationLog } from '../features/NavigationLogFeature';
-import { safeStringify } from '../utils/safeStringify';
-
-interface NavigationContainerRef {
-  getCurrentRoute?: () => { name?: string } | undefined;
-  getRootState?: () => unknown;
-  addListener: (event: string, callback: () => void) => () => void;
-}
+import { addNavigationLog } from './index';
+import { safeStringify } from '../../utils/safeStringify';
+import type { NavigationContainerRef } from '../../types';
 
 function getActiveRouteName(state: unknown): string {
   let currentState = state as