react-native-debug-toolkit 3.3.4 → 3.5.0

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', '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, 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,12 +22,15 @@ 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';
 
 // Hooks
 export { useNavigationLogger } from './features/navigation/useNavigationLogger';
 
 // Utilities
 export { safeStringify } from './utils/safeStringify';
+export { createDebugTab } from './utils/createDebugTab';
+export type { CreateDebugTabOptions } from './utils/createDebugTab';
 export { copyToComputer, logToComputer, fmt } from './utils/copyToComputer';
 export type { CopyResult, CopyOptions, CopyMethod } from './utils/copyToComputer';
 export { createDebugDeviceReport } from './utils/deviceReport';
@@ -45,6 +48,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 {

package/src/types/feature.ts

@@ -10,7 +10,8 @@ export type BuiltInFeatureName =
   | 'track'
   | 'environment'
   | 'clipboard'
-  | 'devConnect';
+  | 'devConnect'
+  | 'sessionHistory';
 
 export interface DebugFeatureRenderProps<TSnapshot = unknown> {
   snapshot: TSnapshot;

package/src/types/index.ts

@@ -28,3 +28,13 @@ export type {
   ThirdPartyLib,
   ThirdPartyLibAction,
 } from './thirdPartyLibs';
+
+export type {
+  StorageAdapter,
+} from '../utils/StorageAdapter';
+
+export type {
+  LogFeatureKey,
+  LogSession,
+  SessionManagerOptions,
+} from '../utils/SessionManager';

package/src/ui/DebugView.tsx

@@ -3,7 +3,7 @@ import { DebugToolkitProvider } from '../core/DebugToolkitProvider';
 import { initializeDebugToolkit } from '../core/initialize';
 import type { FeatureConfigs } from '../core/initialize';
 import { useNavigationLogger } from '../features/navigation/useNavigationLogger';
-import type { EnvironmentConfig, NavigationContainerRef } from '../types';
+import type { AnyDebugFeature, EnvironmentConfig, NavigationContainerRef } from '../types';
 
 // --- Types ---
 
@@ -14,6 +14,8 @@ export interface DebugViewProps {
    * Set to `false` to disable a feature.
    */
   features?: Partial<FeatureConfigs>;
+  /** Custom tabs/features appended after built-in features. */
+  customFeatures?: AnyDebugFeature[];
   /** Navigation container ref for route tracking. */
   navigationRef?: React.RefObject<NavigationContainerRef | null>;
   /** Environment configs for runtime host switching. */
@@ -38,6 +40,7 @@ function NavigationLoggerInner({
 export function DebugView({
   children,
   features,
+  customFeatures,
   navigationRef,
   environments,
   enabled,
@@ -54,6 +57,7 @@ export function DebugView({
       track: true,
       clipboard: true,
       devConnect: true,
+      sessionHistory: true,
       ...features,
     };
 
@@ -66,6 +70,7 @@ export function DebugView({
     let cancelled = false;
     initializeDebugToolkit({
       features: resolvedFeatures,
+      customFeatures,
       enabled,
     }).then((toolkit) => {
       if (!cancelled) {

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,127 @@
+import React from 'react';
+import { View, Text, Pressable, 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;
+}
+
+export function FeatureIntroCard({
+  title,
+  summary,
+  filterBad,
+  onFilterBad,
+}: 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>
+        )}
+      </View>
+      {supportsBadFilter && (
+        <View style={styles.actionRow}>
+          <Pressable
+            style={[styles.chip, !filterBad && styles.chipActive]}
+            onPress={() => onFilterBad(false)}
+          >
+            <Text style={[styles.chipText, !filterBad && styles.chipTextActive]}>All</Text>
+          </Pressable>
+          {supportsBadFilter && (
+            <Pressable
+              style={[styles.chip, filterBad && styles.chipBadActive]}
+              onPress={() => onFilterBad(true)}
+            >
+              <Text style={[styles.chipText, filterBad && styles.chipTextBad]}>Bad</Text>
+            </Pressable>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    backgroundColor: Colors.background,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: Colors.text,
+    flex: 1,
+  },
+  statusChip: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 8,
+    backgroundColor: Colors.signalDefaultBg,
+  },
+  statusText: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: Colors.textSecondary,
+  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 6,
+    marginTop: 8,
+  },
+  chip: {
+    height: 26,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+    borderRadius: 13,
+    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',
+  },
+});

package/src/ui/panel/FeatureRail.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
+import { Colors } from '../theme/colors';
+
+// ─── Label Model ──────────────────────────────────────
+
+const SHORT_LABEL_MAP: Record<string, string> = {
+  network: 'network',
+  console: 'console',
+  native: 'native',
+  navigation: 'nav',
+  zustand: 'zustand',
+  track: 'track',
+  clipboard: 'clip',
+  environment: 'env',
+  devConnect: 'dev',
+  sessionHistory: 'session',
+  thirdPartyLibs: 'libs',
+};
+
+export function shortLabelForFeature(label: string, id: string): string {
+  const mapped = SHORT_LABEL_MAP[id];
+  if (mapped) return mapped;
+  const trimmed = label.trim();
+  return trimmed.toLowerCase().slice(0, 7);
+}
+
+// ─── Rail Component ───────────────────────────────────
+
+export interface RailItem {
+  id: string;
+  label: string;
+  dotColor?: string | null;
+  count?: number;
+}
+
+interface FeatureRailProps {
+  items: RailItem[];
+  activeIndex: number;
+  onSelectTab: (index: number) => void;
+}
+
+export function FeatureRail({ items, activeIndex, onSelectTab }: FeatureRailProps) {
+  return (
+    <View style={styles.rail}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {items.map((item, index) => {
+          const isActive = index === activeIndex;
+          const short = shortLabelForFeature(item.label, item.id);
+          const dotColor = item.dotColor ?? null;
+          const hasCount = item.count != null && item.count > 0;
+          return (
+            <Pressable
+              key={item.id}
+              onPress={() => onSelectTab(index)}
+              style={[styles.item, isActive && styles.activeItem]}
+              accessibilityRole="tab"
+              accessibilityLabel={item.label}
+              accessibilityState={{ selected: isActive }}
+            >
+              {isActive && <View style={styles.activeBar} />}
+              <Text
+                style={[styles.itemName, isActive && styles.activeItemName]}
+                numberOfLines={1}
+              >
+                {short}
+              </Text>
+              <View style={styles.itemMeta}>
+                {dotColor && (
+                  <View style={[styles.dot, { backgroundColor: dotColor }]} />
+                )}
+                {hasCount && (
+                  <View style={styles.countPill}>
+                    <Text style={styles.countText}>{item.count}</Text>
+                  </View>
+                )}
+              </View>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const RAIL_WIDTH = 80;
+
+const styles = StyleSheet.create({
+  rail: {
+    width: RAIL_WIDTH,
+    backgroundColor: Colors.railBackground,
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderRightColor: Colors.panelDivider,
+  },
+  scrollContent: {
+    paddingVertical: 6,
+    paddingHorizontal: 6,
+    gap: 3,
+  },
+  item: {
+    minHeight: 56,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  activeItem: {
+    backgroundColor: Colors.surface,
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+  },
+  activeBar: {
+    position: 'absolute',
+    left: 0,
+    top: 10,
+    bottom: 10,
+    width: 3,
+    borderRadius: 1.5,
+    backgroundColor: Colors.primary,
+  },
+  itemName: {
+    fontSize: 9,
+    fontWeight: '700',
+    color: Colors.textSecondary,
+    letterSpacing: 0,
+  },
+  activeItemName: {
+    color: Colors.text,
+    fontWeight: '800',
+  },
+  itemMeta: {
+    marginTop: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  countPill: {
+    minWidth: 18,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  countText: {
+    fontSize: 8,
+    fontWeight: '800',
+    color: Colors.textSecondary,
+  },
+});