react-native-debug-toolkit 3.3.8 → 3.5.1

package/src/features/sessionHistory/index.ts

@@ -0,0 +1,102 @@
+import { SessionHistoryTab, type SessionHistoryState, type SelectedSession, type LogCounts, type SessionHistoryFeature } from './SessionHistoryTab';
+import type { LogFeatureKey } from '../../types';
+import { createDebugTab } from '../../utils/createDebugTab';
+import { getDefaultLogRuntime, type LogRuntimeContext } from '../../utils/logRuntime';
+
+const FEATURE_KEYS: LogFeatureKey[] = ['console_logs', 'network_logs', 'native_logs', 'track_logs'];
+
+export function createSessionHistoryFeature(
+  runtime: LogRuntimeContext = getDefaultLogRuntime(),
+): SessionHistoryFeature {
+  let listeners: Array<() => void> = [];
+  let sessions = runtime.sessionManager.getCurrentSession() ? [runtime.sessionManager.getCurrentSession()] : [];
+  let currentSessionId = runtime.sessionManager.getCurrentSession().id;
+  let loading = false;
+  let selected: SelectedSession | null = null;
+  let initialized = false;
+  let logCounts: Record<string, LogCounts> = {};
+
+  function notify() {
+    listeners.forEach((l) => l());
+  }
+
+  function getSnapshot(): SessionHistoryState {
+    return { sessions, currentSessionId, loading, selectedSession: selected, storageType: runtime.logStorage.constructor.name, logCounts };
+  }
+
+  async function loadLogCounts(sessionIds: string[]) {
+    const counts: Record<string, LogCounts> = {};
+    await Promise.all(
+      sessionIds.map(async (id) => {
+        const c: LogCounts = { console_logs: 0, network_logs: 0, native_logs: 0, track_logs: 0 };
+        await Promise.all(
+          FEATURE_KEYS.map(async (key) => {
+            c[key] = await runtime.sessionManager.getSessionLogCount(id, key);
+          }),
+        );
+        counts[id] = c;
+      }),
+    );
+    return counts;
+  }
+
+  async function loadSession(sessionId: string | null) {
+    if (sessionId === null) {
+      selected = null;
+      notify();
+      return;
+    }
+
+    loading = true;
+    selected = null;
+    notify();
+
+    const logs: Record<LogFeatureKey, unknown[]> = {} as Record<LogFeatureKey, unknown[]>;
+    await Promise.all(
+      FEATURE_KEYS.map(async (key) => {
+        logs[key] = await runtime.sessionManager.loadSessionLogs(sessionId, key);
+      }),
+    );
+
+    loading = false;
+    selected = { sessionId, logs };
+    notify();
+  }
+
+  const feature: SessionHistoryFeature = {
+    ...createDebugTab<SessionHistoryState>({
+      name: 'sessionHistory',
+      label: 'Sessions',
+      getSnapshot,
+      render: SessionHistoryTab,
+      setup: async () => {
+        if (initialized) return;
+        initialized = true;
+        loading = true;
+        notify();
+        try {
+          sessions = await runtime.sessionManager.getSessionHistory();
+          currentSessionId = runtime.sessionManager.getCurrentSession().id;
+          logCounts = await loadLogCounts(sessions.map((s) => s.id));
+        } catch (e) {
+          console.warn('[SessionHistory] setup error:', e);
+        }
+        loading = false;
+        notify();
+      },
+      cleanup: () => {
+        initialized = false;
+        selected = null;
+      },
+      subscribe: (listener) => {
+        listeners.push(listener);
+        return () => {
+          listeners = listeners.filter((l) => l !== listener);
+        };
+      },
+    }),
+    loadSession,
+  };
+
+  return feature;
+}

package/src/features/track/index.ts

@@ -2,7 +2,7 @@ import { TrackLogTab } from './TrackLogTab';
 import type { DebugFeature, TrackLogEntry } from '../../types';
 import { createEventChannel } from '../../utils/createEventChannel';
 import { createChannelFeature } from '../../utils/createChannelFeature';
-import { KEYS } from '../../utils/debugPreferences';
+import { getDefaultLogRuntime, type LogRuntimeContext } from '../../utils/logRuntime';
 
 export interface TrackEventData {
   eventName: string;
@@ -22,7 +22,10 @@ export interface TrackFeatureConfig {
   maxLogs?: number;
 }
 
-export const createTrackFeature = (config?: TrackFeatureConfig): DebugFeature<TrackLogEntry[]> =>
+export const createTrackFeature = (
+  config?: TrackFeatureConfig,
+  runtime: LogRuntimeContext = getDefaultLogRuntime(),
+): DebugFeature<TrackLogEntry[]> =>
   createChannelFeature(
     () => trackChannel,
     (payload, id) => ({ ...payload, id }),
@@ -31,7 +34,11 @@ export const createTrackFeature = (config?: TrackFeatureConfig): DebugFeature<Tr
       label: 'Track',
       renderContent: TrackLogTab,
       maxLogs: config?.maxLogs,
-      persist: { storageKey: KEYS.trackLogs, maxPersist: 50 },
+      persist: {
+        storage: runtime.logStorage,
+        storageKey: runtime.sessionManager.getLogStorageKey('track_logs'),
+        maxPersist: 50,
+      },
     },
   );
 

package/src/index.ts

@@ -22,6 +22,9 @@ export type { EnvironmentFeatureAPI } from './features/environment';
 export { createClipboardFeature } from './features/clipboard';
 export { createDevConnectFeature } from './features/devConnect';
 export type { DevConnectState } from './features/devConnect';
+export { createSessionHistoryFeature } from './features/sessionHistory';
+export { createNativeLogsFeature } from './features/nativeLogs';
+export type { NativeLogsFeatureConfig } from './features/nativeLogs';
 
 // Hooks
 export { useNavigationLogger } from './features/navigation/useNavigationLogger';
@@ -47,6 +50,16 @@ export type {
   ReportToDaemonOptions,
 } from './utils/DaemonClient';
 export { getDefaultDaemonEndpoint } from './utils/DaemonClient';
+export {
+  createDefaultLogStorage,
+  MemoryStorageAdapter,
+} from './utils/StorageAdapter';
+export type { StorageAdapter } from './utils/StorageAdapter';
+export type {
+  LogFeatureKey,
+  LogSession,
+  SessionManagerOptions,
+} from './utils/SessionManager';
 
 // Types
 export type {
@@ -58,6 +71,9 @@ export type {
   FeatureDataProvider,
   NetworkLogEntry,
   ConsoleLogEntry,
+  NativeLogEntry,
+  NativeLogLevel,
+  NativeLogSource,
   ZustandLogEntry,
   NavigationLogEntry,
   TrackLogEntry,

package/src/types/feature.ts

@@ -5,12 +5,14 @@ export type DebugFeatureListener = () => void;
 export type BuiltInFeatureName =
   | 'network'
   | 'console'
+  | 'native'
   | 'zustand'
   | 'navigation'
   | 'track'
   | 'environment'
   | 'clipboard'
-  | 'devConnect';
+  | 'devConnect'
+  | 'sessionHistory';
 
 export interface DebugFeatureRenderProps<TSnapshot = unknown> {
   snapshot: TSnapshot;

package/src/types/index.ts

@@ -10,6 +10,9 @@ export type {
 export type {
   ConsoleLogEntry,
   NavigationLogEntry,
+  NativeLogEntry,
+  NativeLogLevel,
+  NativeLogSource,
   NetworkLogEntry,
   TrackLogEntry,
   ZustandLogEntry,
@@ -28,3 +31,13 @@ export type {
   ThirdPartyLib,
   ThirdPartyLibAction,
 } from './thirdPartyLibs';
+
+export type {
+  StorageAdapter,
+} from '../utils/StorageAdapter';
+
+export type {
+  LogFeatureKey,
+  LogSession,
+  SessionManagerOptions,
+} from '../utils/SessionManager';

package/src/types/logs.ts

@@ -52,3 +52,20 @@ export interface TrackLogEntry {
   eventName: string;
   [key: string]: unknown;
 }
+
+export type NativeLogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal' | 'unknown';
+export type NativeLogSource = 'logcat' | 'rctLog' | 'manual';
+
+export interface NativeLogEntry {
+  id: string;
+  timestamp: number;
+  platform: 'android' | 'ios' | 'unknown';
+  level: NativeLogLevel;
+  source: NativeLogSource;
+  message: string;
+  tag?: string;
+  thread?: string;
+  file?: string;
+  line?: number;
+  raw?: string;
+}

package/src/ui/DebugView.tsx

@@ -52,11 +52,13 @@ export function DebugView({
     const resolvedFeatures: FeatureConfigs = {
       network: true,
       console: true,
+      native: true,
       zustand: true,
       navigation: true,
       track: true,
       clipboard: true,
       devConnect: true,
+      sessionHistory: true,
       ...features,
     };
 

package/src/ui/panel/DebugPanel.tsx

@@ -14,10 +14,12 @@ import { Colors } from '../theme/colors';
 interface DebugPanelProps {
   onClose: () => void;
   onClearAll: () => void;
+  syncLabel?: string;
+  syncColor?: string;
   children: React.ReactNode;
 }
 
-export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
+export function DebugPanel({ onClose, onClearAll, syncLabel, syncColor, children }: DebugPanelProps) {
   const { height: screenHeight } = useWindowDimensions();
   const panelTranslateY = useRef(new Animated.Value(screenHeight)).current;
   const backdropOpacity = useRef(new Animated.Value(0)).current;
@@ -99,20 +101,35 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
             <View style={styles.dragIndicator} />
           </View>
           <View style={styles.header}>
-            <Text style={styles.headerTitle}>Debug Toolkit</Text>
+            <View style={styles.headerLeft}>
+              <Text style={styles.headerTitle}>Debug Toolkit</Text>
+              {syncLabel && (
+                <View style={styles.syncRow}>
+                  <View style={[styles.syncDot, syncColor ? { backgroundColor: syncColor } : null]} />
+                  <Text style={styles.syncText} numberOfLines={1}>{syncLabel}</Text>
+                </View>
+              )}
+            </View>
             <View style={styles.headerButtons}>
               <TouchableOpacity
                 onPress={() => {
                   onClearAll();
                   closePanel();
                 }}
-                style={styles.clearButton}
+                style={styles.iconButton}
                 activeOpacity={0.6}
+                accessibilityLabel="Clear all"
+                accessibilityRole="button"
               >
-                <Text style={styles.clearButtonText}>Clear</Text>
+                <Text style={styles.iconButtonText}>C</Text>
               </TouchableOpacity>
-              <Pressable onPress={closePanel} style={styles.closeButton}>
-                <Text style={styles.closeButtonText}>✕</Text>
+              <Pressable
+                onPress={closePanel}
+                style={styles.iconButton}
+                accessibilityLabel="Close panel"
+                accessibilityRole="button"
+              >
+                <Text style={styles.iconButtonText}>✕</Text>
               </Pressable>
             </View>
           </View>
@@ -156,13 +173,13 @@ const styles = StyleSheet.create({
   },
   dragHandle: {
     width: '100%',
-    height: 28,
+    height: 26,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: Colors.surface,
   },
   dragIndicator: {
-    width: 40,
+    width: 42,
     height: 4,
     borderRadius: 2,
     backgroundColor: Colors.textLight,
@@ -172,44 +189,57 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingTop: 6,
+    paddingHorizontal: 14,
+    paddingTop: 8,
     paddingBottom: 10,
     backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+  },
+  headerLeft: {
+    flex: 1,
+    minWidth: 0,
   },
   headerTitle: {
     fontSize: 17,
-    fontWeight: '600',
+    fontWeight: '700',
     color: Colors.text,
   },
-  headerButtons: {
+  syncRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 12,
+    gap: 6,
+    marginTop: 4,
   },
-  clearButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 8,
-    backgroundColor: `${Colors.error}0F`,
+  syncDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5,
+    backgroundColor: Colors.success,
   },
-  clearButtonText: {
-    color: Colors.error,
-    fontSize: 14,
-    fontWeight: '500',
+  syncText: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: Colors.textSecondary,
   },
-  closeButton: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
+  headerButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+  },
+  iconButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.border,
     backgroundColor: Colors.background,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  closeButtonText: {
-    fontSize: 16,
-    fontWeight: '400',
+  iconButtonText: {
+    fontSize: 14,
+    fontWeight: '700',
     color: Colors.textSecondary,
-    lineHeight: 16,
   },
 });

package/src/ui/panel/FeatureIntroCard.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { View, Text, Pressable, TextInput, StyleSheet } from 'react-native';
+import { Colors } from '../theme/colors';
+import type { FeatureSummary } from './buildFeatureSummary';
+
+function hexWithAlpha(hex: string, alpha: string): string {
+  if (/^#[0-9a-fA-F]{6}$/.test(hex)) return hex + alpha;
+  return Colors.signalDefaultBg;
+}
+
+interface FeatureIntroCardProps {
+  title: string;
+  summary: FeatureSummary;
+  filterBad: boolean;
+  onFilterBad: (bad: boolean) => void;
+  searchQuery?: string;
+  onSearchChange?: (text: string) => void;
+  showSearch?: boolean;
+}
+
+export function FeatureIntroCard({
+  title,
+  summary,
+  filterBad,
+  onFilterBad,
+  searchQuery,
+  onSearchChange,
+  showSearch,
+}: FeatureIntroCardProps) {
+  const { statusLabel, statusColor, supportsBadFilter } = summary;
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.titleRow}>
+        <Text style={styles.title} numberOfLines={1}>{title}</Text>
+        {statusLabel && (
+          <View style={[styles.statusChip, statusColor && { backgroundColor: hexWithAlpha(statusColor, '18') }]}>
+            <Text style={[styles.statusText, statusColor && { color: statusColor }]} numberOfLines={1}>
+              {statusLabel}
+            </Text>
+          </View>
+        )}
+        {supportsBadFilter && (
+          <View style={styles.filterRow}>
+            <Pressable
+              style={[styles.chip, !filterBad && styles.chipActive]}
+              onPress={() => onFilterBad(false)}
+            >
+              <Text style={[styles.chipText, !filterBad && styles.chipTextActive]}>All</Text>
+            </Pressable>
+            <Pressable
+              style={[styles.chip, filterBad && styles.chipBadActive]}
+              onPress={() => onFilterBad(true)}
+            >
+              <Text style={[styles.chipText, filterBad && styles.chipTextBad]}>Bad</Text>
+            </Pressable>
+          </View>
+        )}
+      </View>
+      {showSearch && (
+        <TextInput
+          style={styles.searchInput}
+          placeholder="Search..."
+          placeholderTextColor={Colors.textLight}
+          value={searchQuery}
+          onChangeText={onSearchChange}
+          returnKeyType="search"
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 6,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    backgroundColor: Colors.background,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: Colors.text,
+  },
+  statusChip: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 8,
+    backgroundColor: Colors.signalDefaultBg,
+  },
+  statusText: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: Colors.textSecondary,
+  },
+  filterRow: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  chip: {
+    height: 24,
+    paddingHorizontal: 10,
+    justifyContent: 'center',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    backgroundColor: Colors.surface,
+  },
+  chipActive: {
+    backgroundColor: Colors.text,
+    borderColor: Colors.text,
+  },
+  chipBadActive: {
+    backgroundColor: Colors.error,
+    borderColor: Colors.error,
+  },
+  chipText: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: Colors.textSecondary,
+  },
+  chipTextActive: {
+    color: '#fff',
+  },
+  chipTextBad: {
+    color: '#fff',
+  },
+  searchInput: {
+    height: 32,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    backgroundColor: Colors.surface,
+    paddingHorizontal: 10,
+    fontSize: 13,
+    color: Colors.text,
+    marginTop: 6,
+  },
+});