react-native-debug-toolkit 3.3.8 → 3.5.1

package/src/ui/theme/colors.ts

@@ -14,6 +14,13 @@ export const Colors = {
 
   purple: '#AF52DE',
 
+  // Panel-specific
+  railBackground: '#E8EEF6',
+  panelDivider: '#CED8E4',
+  signalRedBg: '#FFE9E7',
+  signalAmberBg: '#FFF1D6',
+  signalDefaultBg: '#E7EDF5',
+
   get: '#007AFF',
   post: '#34C759',
   put: '#FF9500',

package/src/utils/DaemonClient.ts

@@ -56,6 +56,7 @@ export interface ReportToDaemonOptions extends DebugDeviceReportOptions {
   endpoint?: string;
   timeoutMs?: number;
   token?: string;
+  session?: SessionInfo;
 }
 
 export interface ReportResult {
@@ -89,6 +90,7 @@ type AbortControllerLike = { signal: unknown; abort: () => void };
 type AbortControllerCtor = new () => AbortControllerLike;
 
 type SendResult = 'ok' | 'retry' | 'auth_failed';
+type SessionProvider = () => SessionInfo;
 
 // ---- Constants ----
 
@@ -186,6 +188,7 @@ export class DaemonClient {
   private _onEndpointDetected: ((url: string) => void) | undefined;
   private _restorePromise: Promise<void> | null = null;
   private _sessionId: SessionInfo | null = null;
+  private _sessionProvider: SessionProvider | null = null;
   private _onConnectionChange: (() => void) | undefined;
 
   constructor(options: DaemonClientOptions) {
@@ -268,9 +271,7 @@ export class DaemonClient {
   connect(options: StreamToDaemonOptions = {}): void {
     if (this._stream) return;
 
-    if (!this._sessionId) {
-      this._sessionId = { id: generateSessionId(), startedAt: Date.now() };
-    }
+    const session = this.resolveSession();
 
     const endpoint = options.endpoint || this.resolveEndpoint();
     const reportUrl = buildDaemonUrl(endpoint, '/report');
@@ -288,7 +289,7 @@ export class DaemonClient {
       debounceMs: options.debounceMs || DEFAULT_DEBOUNCE_MS,
       timeoutMs: Math.max(0, options.timeoutMs ?? DEFAULT_TIMEOUT_MS),
       deviceId: null,
-      session: this._sessionId,
+      session,
       sending: false,
       debounceTimer: null,
       retryTimer: null,
@@ -367,6 +368,14 @@ export class DaemonClient {
     this._onConnectionChange = callback;
   }
 
+  setSessionProvider(provider: SessionProvider): void {
+    this._sessionProvider = provider;
+  }
+
+  clearSessionProvider(): void {
+    this._sessionProvider = null;
+  }
+
   // --- Restore (init-time reconnect) ---
 
   async restore(): Promise<void> {
@@ -411,7 +420,10 @@ export class DaemonClient {
   async reportOnce(options: ReportToDaemonOptions = {}): Promise<ReportResult> {
     const endpoint = options.endpoint ?? this.resolveEndpoint();
     const reportUrl = buildDaemonUrl(endpoint, '/report');
-    const report = createDebugDeviceReport(options);
+    const report = createDebugDeviceReport({
+      ...options,
+      session: options.session ?? this.resolveSession(),
+    });
     const fetchImpl = this.resolveFetch();
 
     this.notifyEndpoint(endpoint);
@@ -475,6 +487,7 @@ export class DaemonClient {
     this._streamingEnabled = null;
     this._restorePromise = null;
     this._sessionId = null;
+    this._sessionProvider = null;
   }
 
   // ---- Private: Transport ----
@@ -498,6 +511,21 @@ export class DaemonClient {
     this._onEndpointDetected?.(url);
   }
 
+  private resolveSession(): SessionInfo {
+    if (this._sessionProvider) {
+      try {
+        return this._sessionProvider();
+      } catch {
+        // fall through to internal session
+      }
+    }
+
+    if (!this._sessionId) {
+      this._sessionId = { id: generateSessionId(), startedAt: Date.now() };
+    }
+    return this._sessionId;
+  }
+
   private emitStatus(status: StreamStatus): void {
     try {
       this._stream?.onStatus?.(status);

package/src/utils/SessionManager.ts

@@ -0,0 +1,174 @@
+import type { SessionInfo } from './deviceReport';
+import type { StorageAdapter } from './StorageAdapter';
+
+export type LogFeatureKey = 'console_logs' | 'network_logs' | 'native_logs' | 'track_logs';
+
+export type LogSession = SessionInfo;
+
+export interface SessionIndex {
+  currentSessionId: string;
+  sessions: LogSession[];
+  maxSessions: number;
+}
+
+export interface SessionManagerOptions {
+  maxSessions?: number;
+  featureKeys?: LogFeatureKey[];
+}
+
+const SESSION_INDEX_KEY = '@react_native_debug_toolkit/sessions';
+const DEFAULT_MAX_SESSIONS = 5;
+const DEFAULT_FEATURE_KEYS: LogFeatureKey[] = ['console_logs', 'network_logs', 'native_logs', 'track_logs'];
+
+function randomHex(): string {
+  return Math.floor(Math.random() * 0xffffffff).toString(16).padStart(8, '0');
+}
+
+function createSession(): LogSession {
+  const startedAt = Date.now();
+  return {
+    id: `${startedAt}-${randomHex()}`,
+    startedAt,
+  };
+}
+
+function isLogSession(value: unknown): value is LogSession {
+  return Boolean(
+    value &&
+    typeof value === 'object' &&
+    typeof (value as Partial<LogSession>).id === 'string' &&
+    typeof (value as Partial<LogSession>).startedAt === 'number',
+  );
+}
+
+function parseSessionIndex(raw: string | null): SessionIndex | null {
+  if (!raw) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as Partial<SessionIndex>;
+    if (!parsed || !Array.isArray(parsed.sessions)) {
+      return null;
+    }
+    return {
+      currentSessionId: typeof parsed.currentSessionId === 'string' ? parsed.currentSessionId : '',
+      sessions: parsed.sessions.filter(isLogSession),
+      maxSessions: typeof parsed.maxSessions === 'number' ? parsed.maxSessions : DEFAULT_MAX_SESSIONS,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function compareNewestFirst(left: LogSession, right: LogSession): number {
+  return right.startedAt - left.startedAt;
+}
+
+export class SessionManager {
+  private readonly storage: StorageAdapter;
+  private readonly currentSession: LogSession;
+  private readonly maxSessions: number;
+  private readonly featureKeys: LogFeatureKey[];
+
+  constructor(storage: StorageAdapter, options: SessionManagerOptions = {}) {
+    this.storage = storage;
+    this.currentSession = createSession();
+    this.maxSessions = Math.max(1, Math.floor(options.maxSessions ?? DEFAULT_MAX_SESSIONS));
+    this.featureKeys = options.featureKeys?.length ? options.featureKeys : DEFAULT_FEATURE_KEYS;
+  }
+
+  async initialize(): Promise<void> {
+    const existing = parseSessionIndex(await this.storage.getItem(SESSION_INDEX_KEY));
+    const byId = new Map<string, LogSession>();
+
+    byId.set(this.currentSession.id, this.currentSession);
+    for (const session of existing?.sessions ?? []) {
+      byId.set(session.id, session);
+    }
+
+    const sessions = Array.from(byId.values()).sort(compareNewestFirst);
+    const retained = sessions.slice(0, this.maxSessions);
+    const removed = sessions.slice(this.maxSessions);
+    const index: SessionIndex = {
+      currentSessionId: this.currentSession.id,
+      sessions: retained,
+      maxSessions: this.maxSessions,
+    };
+
+    await this.storage.setItem(SESSION_INDEX_KEY, JSON.stringify(index));
+    await this.cleanupSessionLogs(removed);
+  }
+
+  getCurrentSession(): LogSession {
+    return this.currentSession;
+  }
+
+  async getSessionHistory(): Promise<LogSession[]> {
+    const index = parseSessionIndex(await this.storage.getItem(SESSION_INDEX_KEY));
+    return (index?.sessions ?? []).sort(compareNewestFirst);
+  }
+
+  getLogStorageKey(featureKey: LogFeatureKey, sessionId = this.currentSession.id): string {
+    return `@react_native_debug_toolkit/${sessionId}/${featureKey}`;
+  }
+
+  async loadSessionLogs<T>(sessionId: string, featureKey: LogFeatureKey): Promise<T[]> {
+    const raw = await this.storage.getItem(this.getLogStorageKey(featureKey, sessionId));
+    if (!raw) {
+      return [];
+    }
+
+    try {
+      const parsed = JSON.parse(raw) as unknown;
+      return Array.isArray(parsed) ? parsed as T[] : [];
+    } catch {
+      return [];
+    }
+  }
+
+  async getSessionLogCount(sessionId: string, featureKey: LogFeatureKey): Promise<number> {
+    const raw = await this.storage.getItem(this.getLogStorageKey(featureKey, sessionId));
+    if (!raw) return 0;
+    try {
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed.length : 0;
+    } catch {
+      return 0;
+    }
+  }
+
+  async clearCurrentSessionLogs(featureKey: LogFeatureKey): Promise<void> {
+    await this.storage.setItem(this.getLogStorageKey(featureKey), '[]');
+  }
+
+  async cleanupOldSessions(): Promise<number> {
+    const index = parseSessionIndex(await this.storage.getItem(SESSION_INDEX_KEY));
+    if (!index) {
+      return 0;
+    }
+
+    const sessions = index.sessions.sort(compareNewestFirst);
+    const retained = sessions.slice(0, this.maxSessions);
+    const removed = sessions.slice(this.maxSessions);
+    if (removed.length === 0) {
+      return 0;
+    }
+
+    await this.storage.setItem(SESSION_INDEX_KEY, JSON.stringify({
+      currentSessionId: index.currentSessionId,
+      sessions: retained,
+      maxSessions: this.maxSessions,
+    }));
+    await this.cleanupSessionLogs(removed);
+    return removed.length;
+  }
+
+  private async cleanupSessionLogs(sessions: LogSession[]): Promise<void> {
+    for (const session of sessions) {
+      for (const featureKey of this.featureKeys) {
+        await this.storage.removeItem(this.getLogStorageKey(featureKey, session.id));
+      }
+    }
+  }
+}

package/src/utils/StorageAdapter.ts

@@ -0,0 +1,135 @@
+export interface StorageAdapter {
+  getItem(key: string): string | null | Promise<string | null>;
+  setItem(key: string, value: string): void | Promise<void>;
+  removeItem(key: string): void | Promise<void>;
+}
+
+type AsyncStorageLike = {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+};
+
+type MMKVLike = {
+  getString: (key: string) => string | undefined;
+  set: (key: string, value: string) => void;
+  delete: (key: string) => void;
+};
+
+type MMKVLikeV4 = {
+  getString: (key: string) => string | undefined;
+  set: (key: string, value: string | number | boolean | ArrayBuffer) => void;
+  remove: (key: string) => boolean;
+};
+
+export class MemoryStorageAdapter implements StorageAdapter {
+  private readonly store = new Map<string, string>();
+
+  getItem(key: string): string | null {
+    return this.store.get(key) ?? null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.store.set(key, value);
+  }
+
+  removeItem(key: string): void {
+    this.store.delete(key);
+  }
+}
+
+export class AsyncStorageAdapter implements StorageAdapter {
+  constructor(private readonly storage: AsyncStorageLike) {}
+
+  getItem(key: string): Promise<string | null> {
+    return this.storage.getItem(key);
+  }
+
+  setItem(key: string, value: string): Promise<void> {
+    return this.storage.setItem(key, value);
+  }
+
+  removeItem(key: string): Promise<void> {
+    return this.storage.removeItem(key);
+  }
+}
+
+export class MMKVStorageAdapter implements StorageAdapter {
+  private readonly storage: MMKVLike;
+
+  constructor(storage: MMKVLike) {
+    this.storage = storage;
+  }
+
+  getItem(key: string): string | null {
+    return this.storage.getString(key) ?? null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.storage.set(key, value);
+  }
+
+  removeItem(key: string): void {
+    if ('delete' in this.storage) {
+      (this.storage as MMKVLike).delete(key);
+    } else {
+      (this.storage as MMKVLikeV4).remove(key);
+    }
+  }
+}
+
+function isAsyncStorageLike(value: unknown): value is AsyncStorageLike {
+  return Boolean(
+    value &&
+    typeof value === 'object' &&
+    typeof (value as Partial<AsyncStorageLike>).getItem === 'function' &&
+    typeof (value as Partial<AsyncStorageLike>).setItem === 'function' &&
+    typeof (value as Partial<AsyncStorageLike>).removeItem === 'function',
+  );
+}
+
+function loadMMKVStorage(): StorageAdapter | null {
+  try {
+    const mod = require('react-native-mmkv');
+    console.warn('[StorageAdapter] MMKV module loaded, keys:', Object.keys(mod).join(','));
+
+    // v4+: createMMKV factory function
+    if (typeof mod?.createMMKV === 'function') {
+      console.warn('[StorageAdapter] Found createMMKV (v4+)');
+      const instance = mod.createMMKV({ id: 'debug-toolkit-logs' });
+      console.warn('[StorageAdapter] createMMKV returned:', typeof instance, instance ? 'has getString:' + typeof instance.getString : 'null');
+      if (instance && typeof instance.getString === 'function' && typeof instance.set === 'function') {
+        return new MMKVStorageAdapter(instance as unknown as MMKVLike);
+      }
+    }
+
+    // v3 and earlier: MMKV class
+    const MMKV = mod?.MMKV ?? mod?.default?.MMKV ?? mod?.default;
+    if (typeof MMKV === 'function') {
+      return new MMKVStorageAdapter(new MMKV({ id: 'debug-toolkit-logs' }));
+    }
+
+    console.warn('[StorageAdapter] No MMKV constructor found');
+    return null;
+  } catch (e) {
+    console.warn('[StorageAdapter] loadMMKVStorage failed:', e);
+    return null;
+  }
+}
+
+function loadAsyncStorage(): StorageAdapter | null {
+  try {
+    const mod = require('@react-native-async-storage/async-storage');
+    const storage = isAsyncStorageLike(mod?.default) ? mod.default : mod;
+    if (!isAsyncStorageLike(storage)) {
+      return null;
+    }
+    return new AsyncStorageAdapter(storage);
+  } catch {
+    return null;
+  }
+}
+
+export function createDefaultLogStorage(): StorageAdapter {
+  return loadMMKVStorage() ?? loadAsyncStorage() ?? new MemoryStorageAdapter();
+}

package/src/utils/createChannelFeature.ts

@@ -2,11 +2,16 @@ import type { ComponentType } from 'react';
 import type { DebugFeature, DebugFeatureListener, DebugFeatureRenderProps } from '../types';
 import type { EventChannel } from './createEventChannel';
 import { createObservableStore, type ObservableStore } from './createObservableStore';
-import { createPersistedObservableStore } from './createPersistedObservableStore';
+import {
+  createPersistedObservableStore,
+  type PersistedObservableStore,
+} from './createPersistedObservableStore';
+import type { StorageAdapter } from './StorageAdapter';
 
 const DEFAULT_MAX_LOGS = 200;
 
 export interface ChannelFeaturePersistConfig<TEntry> {
+  storage: StorageAdapter;
   storageKey: string;
   maxPersist: number;
   debounceMs?: number;
@@ -39,15 +44,18 @@ export function createChannelFeature<TPayload, TEntry extends { id?: string }>(
   const maxLogs = options.maxLogs ?? DEFAULT_MAX_LOGS;
   let nextId = 0;
   let logStore: ObservableStore<TEntry>;
+  let persistedStore: PersistedObservableStore<TEntry> | null = null;
   let getId: () => string;
 
   if (options.persist) {
     const persisted = createPersistedObservableStore<TEntry>({
+      storage: options.persist.storage,
       storageKey: options.persist.storageKey,
       maxPersist: options.persist.maxPersist,
       debounceMs: options.persist.debounceMs,
       serialize: options.persist.serialize,
     });
+    persistedStore = persisted;
     logStore = persisted;
     getId = () => persisted.nextId();
   } else {
@@ -64,26 +72,40 @@ export function createChannelFeature<TPayload, TEntry extends { id?: string }>(
     label: options.label,
     renderContent: options.renderContent,
     setup: () => {
-      if (initialized) return;
+      if (initialized) {
+        return;
+      }
       unsubscribe = getChannel().subscribe((payload) => {
         const filtered = options.beforePush ? options.beforePush(payload) : payload;
-        if (filtered == null) return;
+        if (filtered == null) {
+          return;
+        }
         logStore.push(toEntry(filtered, getId()), maxLogs);
       });
       const cleanup = options.onSetup?.();
-      if (cleanup) customCleanup = cleanup;
+      if (cleanup) {
+        customCleanup = cleanup;
+      }
       initialized = true;
     },
     getSnapshot: () => logStore.getData(),
     clear: () => {
-      logStore.clear();
+      if (persistedStore) {
+        persistedStore.clearPersisted();
+      } else {
+        logStore.clear();
+      }
     },
     cleanup: () => {
       customCleanup?.();
       customCleanup = null;
       unsubscribe?.();
       unsubscribe = null;
-      logStore.clear();
+      if (persistedStore) {
+        persistedStore.dispose();
+      } else {
+        logStore.clear();
+      }
       initialized = false;
     },
     subscribe: (listener: DebugFeatureListener) => logStore.subscribe(listener),

package/src/utils/createPersistedObservableStore.ts

@@ -1,7 +1,8 @@
 import { createObservableStore, type ObservableStore } from './createObservableStore';
-import { getPreference, setPreference } from './debugPreferences';
+import type { StorageAdapter } from './StorageAdapter';
 
 export interface PersistedStoreOptions<T> {
+  storage: StorageAdapter;
   storageKey: string;
   maxPersist: number;
   debounceMs?: number;
@@ -11,13 +12,14 @@ export interface PersistedStoreOptions<T> {
 export interface PersistedObservableStore<T> extends ObservableStore<T> {
   nextId: () => string;
   ready: Promise<void>;
-  destroy: () => void;
+  clearPersisted: () => void;
+  dispose: () => void;
 }
 
 export function createPersistedObservableStore<T extends { id?: string }>(
   options: PersistedStoreOptions<T>,
 ): PersistedObservableStore<T> {
-  const { storageKey, maxPersist, debounceMs = 2000, serialize } = options;
+  const { storage, storageKey, maxPersist, debounceMs = 2000, serialize } = options;
   const store = createObservableStore<T>();
   let writeTimer: ReturnType<typeof setTimeout> | null = null;
   let idCounter = 0;
@@ -25,7 +27,7 @@ export function createPersistedObservableStore<T extends { id?: string }>(
   const ready = new Promise<void>((resolve) => { resolveReady = resolve; });
 
   // Restore from storage (single notify via pushBatch)
-  getPreference(storageKey).then((raw) => {
+  Promise.resolve(storage.getItem(storageKey)).then((raw) => {
     if (!raw) { resolveReady(); return; }
     try {
       const entries = JSON.parse(raw) as T[];
@@ -36,7 +38,9 @@ export function createPersistedObservableStore<T extends { id?: string }>(
       let max = 0;
       for (const e of restored) {
         const n = parseInt(e.id ?? '', 10);
-        if (!isNaN(n) && n >= max) max = n + 1;
+        if (!isNaN(n) && n >= max) {
+          max = n + 1;
+        }
       }
       idCounter = max;
     } catch {
@@ -46,13 +50,15 @@ export function createPersistedObservableStore<T extends { id?: string }>(
   });
 
   function scheduleWrite(): void {
-    if (writeTimer !== null) clearTimeout(writeTimer);
+    if (writeTimer !== null) {
+      clearTimeout(writeTimer);
+    }
     writeTimer = setTimeout(() => {
       writeTimer = null;
       const data = store.getData().slice(-maxPersist);
       const toStore = serialize ? data.map(serialize) : data;
       try {
-        setPreference(storageKey, JSON.stringify(toStore));
+        Promise.resolve(storage.setItem(storageKey, JSON.stringify(toStore))).catch(() => {});
       } catch {
         // stringify failed (circular refs, etc) — skip write
       }
@@ -68,22 +74,24 @@ export function createPersistedObservableStore<T extends { id?: string }>(
     pushBatch: store.pushBatch,
     clear: () => {
       store.clear();
+    },
+    clearPersisted: () => {
+      store.clear();
       if (writeTimer !== null) {
         clearTimeout(writeTimer);
         writeTimer = null;
       }
-      setPreference(storageKey, '[]');
+      Promise.resolve(storage.setItem(storageKey, '[]')).catch(() => {});
     },
     subscribe: store.subscribe,
     nextId: () => String(idCounter++),
     ready,
-    destroy: () => {
+    dispose: () => {
       if (writeTimer !== null) {
         clearTimeout(writeTimer);
         writeTimer = null;
       }
       store.clear();
-      setPreference(storageKey, '[]');
     },
   };
 }

package/src/utils/debugPreferences.ts

@@ -1,13 +1,21 @@
-type AsyncStorageLike = { getItem: (k: string) => Promise<string | null>; setItem: (k: string, v: string) => Promise<void> };
-type NativePreferencesLike = { getPreference: (k: string) => Promise<string | null>; setPreference: (k: string, v: string) => Promise<void> };
+type AsyncStorageLike = {
+  getItem: (k: string) => Promise<string | null>;
+  setItem: (k: string, v: string) => Promise<void>;
+  removeItem?: (k: string) => Promise<void>;
+};
+type NativePreferencesLike = {
+  getPreference: (k: string) => Promise<string | null>;
+  setPreference: (k: string, v: string) => Promise<void>;
+};
 
 const memoryStore = new Map<string, string>();
 
 function loadAsyncStorage(): AsyncStorageLike | null {
   try {
     const mod = require('@react-native-async-storage/async-storage');
-    if (mod && typeof mod.getItem === 'function') {
-      return mod;
+    const storage = mod?.default && typeof mod.default.getItem === 'function' ? mod.default : mod;
+    if (storage && typeof storage.getItem === 'function' && typeof storage.setItem === 'function') {
+      return storage;
     }
     return null;
   } catch {
@@ -82,12 +90,35 @@ export async function getPreference(key: string): Promise<string | null> {
   return memoryStore.get(key) ?? null;
 }
 
+export async function removePreference(key: string): Promise<void> {
+  memoryStore.delete(key);
+  const AsyncStorage = loadAsyncStorage();
+  if (AsyncStorage) {
+    try {
+      if (typeof AsyncStorage.removeItem === 'function') {
+        await AsyncStorage.removeItem(key);
+      } else {
+        await AsyncStorage.setItem(key, '');
+      }
+      return;
+    } catch {
+      // degrade to memory only
+    }
+  }
+
+  const nativePreferences = loadNativePreferences();
+  if (nativePreferences) {
+    try {
+      await nativePreferences.setPreference(key, '');
+    } catch {
+      // degrade to memory only
+    }
+  }
+}
+
 export const KEYS = {
   fabPosition: '@react_native_debug_toolkit/fab_position',
   lastTab: '@react_native_debug_toolkit/last_tab',
-  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',
   daemonPort: '@react_native_debug_toolkit/daemon_port',
 } as const;

package/src/utils/deviceReport.ts

@@ -33,6 +33,10 @@ export interface DebugDeviceReport {
   logs: Record<string, unknown[] | undefined>;
 }
 
+export function sanitizeDebugLogEntry(value: unknown, maxBodyBytes = DEFAULT_MAX_BODY_BYTES): unknown {
+  return sanitizeValue(value, Math.max(256, Math.floor(maxBodyBytes)));
+}
+
 interface TruncatedValue {
   __debugToolkitTruncated: true;
   originalBytes: number;
@@ -193,7 +197,7 @@ export function createDebugDeviceReport(
 
     logs[feature.name] = snapshot
       .slice(-maxPerType)
-      .map((entry) => sanitizeValue(entry, maxBodyBytes));
+      .map((entry) => sanitizeDebugLogEntry(entry, maxBodyBytes));
   });
 
   const constants = Platform.constants as Record<string, unknown> | undefined;