react-native-debug-toolkit 3.3.4 → 3.5.0

package/src/ui/panel/FloatPanelView.tsx

@@ -2,15 +2,21 @@ import React, { Component, useCallback, useEffect, useRef, useState } from 'reac
 import {
   View,
   Text,
+  TextInput,
   StyleSheet,
   Animated,
 } from 'react-native';
 import type { AnyDebugFeature } from '../../types';
+import { Colors } from '../theme/colors';
 import { getPreference, setPreference, KEYS } from '../../utils/debugPreferences';
 import { FloatIcon } from '../floating/FloatIcon';
 import { DebugPanel } from './DebugPanel';
-import { FeatureTabBar } from './FeatureTabBar';
-import type { TabItem } from './FeatureTabBar';
+import { FeatureRail } from './FeatureRail';
+import type { RailItem } from './FeatureRail';
+import { FeatureIntroCard } from './FeatureIntroCard';
+import { buildFeatureSummary } from './buildFeatureSummary';
+import { filterFeatureSnapshot } from './filterFeatureSnapshot';
+import { resolveStoredTabIndex } from './tabPersistence';
 import { useTabAnimation } from './useTabAnimation';
 
 // ─── Error Boundary ────────────────────────────────────
@@ -39,6 +45,57 @@ class DebugErrorBoundary extends Component<
   }
 }
 
+// ─── Snapshot helpers ──────────────────────────────────
+
+function snapshotCount(feature: AnyDebugFeature): number | undefined {
+  try {
+    const snap = feature.getSnapshot();
+    if (Array.isArray(snap)) return snap.length;
+    if (snap && typeof snap === 'object') {
+      const obj = snap as Record<string, unknown>;
+      if (Array.isArray(obj.items)) return obj.items.length;
+      if (Array.isArray(obj.logs)) return obj.logs.length;
+      if (Array.isArray(obj.entries)) return obj.entries.length;
+      if (Array.isArray(obj.environments)) return obj.environments.length;
+    }
+  } catch { /* ignore */ }
+  return undefined;
+}
+
+interface PanelConnectionStatus {
+  label: string;
+  color: string;
+}
+
+interface DevConnectSnapshot {
+  isSimulator?: boolean;
+  computerHost?: string;
+  daemonPort?: string;
+  streaming?: boolean;
+}
+
+function buildPanelConnectionStatus(features: AnyDebugFeature[]): PanelConnectionStatus {
+  const devConnect = features.find((f) => f.name === 'devConnect');
+  if (!devConnect) {
+    return { label: 'offline desktop sync unavailable', color: Colors.textLight };
+  }
+
+  try {
+    const snap = (devConnect.getSnapshot() ?? {}) as DevConnectSnapshot;
+    const host = snap.isSimulator ? 'localhost' : snap.computerHost?.trim();
+    const port = snap.daemonPort?.trim();
+    const target = host && port ? `${host}:${port}` : host || (port ? `port ${port}` : 'not configured');
+    return {
+      label: `${snap.streaming ? 'live' : 'offline'} ${target}`,
+      color: snap.streaming ? Colors.success : Colors.textLight,
+    };
+  } catch {
+    return { label: 'offline desktop sync unavailable', color: Colors.textLight };
+  }
+}
+
+// ─── Main Component ────────────────────────────────────
+
 interface FloatPanelViewProps {
   features: AnyDebugFeature[];
   panelOpen: boolean;
@@ -49,29 +106,40 @@ interface FloatPanelViewProps {
 
 export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel, onClearAll }: FloatPanelViewProps) {
   const [activeTab, setActiveTab] = useState(0);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterBad, setFilterBad] = useState(false);
   const tabLoaded = useRef(false);
 
   // Restore last tab on mount
   useEffect(() => {
+    if (tabLoaded.current || features.length === 0) return;
     let mounted = true;
     getPreference(KEYS.lastTab).then((val) => {
-      if (!mounted || !val) return;
-      const idx = parseInt(val, 10);
-      if (!isNaN(idx) && idx >= 0) {
-        setActiveTab(idx);
-        tabLoaded.current = true;
+      if (!mounted || tabLoaded.current) return;
+      const idx = resolveStoredTabIndex(features, val);
+      setActiveTab(idx);
+      const featureName = features[idx]?.name;
+      if (featureName && featureName !== val) {
+        setPreference(KEYS.lastTab, featureName);
       }
+      tabLoaded.current = true;
     });
     return () => { mounted = false; };
-  }, []);
+  }, [features]);
 
   const { contentOpacity, contentTranslateX, panHandlers, switchTab } = useTabAnimation({
     activeTab,
     tabCount: features.length,
     onTabChange: useCallback((index: number) => {
+      tabLoaded.current = true;
+      setSearchQuery('');
+      setFilterBad(false);
       setActiveTab(index);
-      setPreference(KEYS.lastTab, String(index));
-    }, []),
+      const featureName = features[index]?.name;
+      if (featureName) {
+        setPreference(KEYS.lastTab, featureName);
+      }
+    }, [features]),
   });
 
   // Feature subscription → re-render on data changes
@@ -96,14 +164,41 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
   // Clamp activeTab if features shrink
   useEffect(() => {
     if (features.length > 0 && activeTab >= features.length) {
+      tabLoaded.current = true;
       setActiveTab(0);
-      setPreference(KEYS.lastTab, '0');
+      const featureName = features[0]?.name;
+      if (featureName) {
+        setPreference(KEYS.lastTab, featureName);
+      }
     }
-  }, [features.length, activeTab]);
+  }, [features, activeTab]);
 
   // Badge (first feature that returns one)
   const envBadge = features.map((f) => f.badge?.()).find((b) => b != null) ?? null;
-  const tabs: TabItem[] = features.map((f) => ({ label: f.label, id: f.name }));
+
+  // Rail items with counts
+  const railItems: RailItem[] = features.map((f) => {
+    const b = f.badge?.();
+    return { id: f.name, label: f.label, dotColor: b?.color ?? null, count: snapshotCount(f) };
+  });
+
+  const panelConnectionStatus = buildPanelConnectionStatus(features);
+
+  const handleClearAll = useCallback(() => {
+    setSearchQuery('');
+    setFilterBad(false);
+    onClearAll();
+  }, [onClearAll]);
+
+  // Active feature + summary
+  const activeFeature = features[activeTab];
+  const activeSnapshot = activeFeature?.getSnapshot();
+  const activeSummary = activeFeature ? buildFeatureSummary(activeFeature, activeSnapshot) : null;
+
+  // Filtered snapshot — reuse activeSnapshot to avoid double getSnapshot()
+  const filteredSnapshot = activeFeature
+    ? filterFeatureSnapshot(activeFeature, activeSnapshot, searchQuery, filterBad ? 'bad' : 'all')
+    : null;
 
   // Render active feature content
   const renderFeatureContent = () => {
@@ -112,7 +207,7 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
     }
     const feature = features[activeTab];
     if (!feature) return <Text style={styles.emptyText}>Feature not found</Text>;
-    const snapshot = feature.getSnapshot();
+    const snapshot = filteredSnapshot;
     const TabComponent = feature.renderContent;
     if (TabComponent) return <TabComponent snapshot={snapshot} feature={feature} />;
     return (
@@ -122,6 +217,8 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
     );
   };
 
+  const showSearch = activeSummary ? (activeSummary.count != null && activeSummary.count > 0) : false;
+
   return (
     <DebugErrorBoundary onError={onClosePanel}>
       <View style={styles.container} pointerEvents="box-none">
@@ -129,18 +226,44 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
         {panelOpen && (
           <DebugPanel
             onClose={onClosePanel}
-            onClearAll={onClearAll}
+            onClearAll={handleClearAll}
+            syncLabel={panelConnectionStatus.label}
+            syncColor={panelConnectionStatus.color}
           >
-            <FeatureTabBar tabs={tabs} activeIndex={activeTab} onSelectTab={switchTab} />
-            <Animated.View
-              style={[
-                styles.contentContainer,
-                { opacity: contentOpacity, transform: [{ translateX: contentTranslateX }] },
-              ]}
-              {...panHandlers}
-            >
-              {renderFeatureContent()}
-            </Animated.View>
+            <View style={styles.bodyRow}>
+              <FeatureRail items={railItems} activeIndex={activeTab} onSelectTab={switchTab} />
+              <View style={styles.contentColumn}>
+                {activeFeature && activeSummary && (
+                  <FeatureIntroCard
+                    title={activeFeature.label}
+                    summary={activeSummary}
+                    filterBad={filterBad}
+                    onFilterBad={setFilterBad}
+                  />
+                )}
+                {showSearch && (
+                  <View style={styles.toolbar}>
+                    <TextInput
+                      style={styles.searchInput}
+                      placeholder="Search..."
+                      placeholderTextColor={Colors.textLight}
+                      value={searchQuery}
+                      onChangeText={setSearchQuery}
+                      returnKeyType="search"
+                    />
+                  </View>
+                )}
+                <Animated.View
+                  style={[
+                    styles.contentContainer,
+                    { opacity: contentOpacity, transform: [{ translateX: contentTranslateX }] },
+                  ]}
+                  {...panHandlers}
+                >
+                  {renderFeatureContent()}
+                </Animated.View>
+              </View>
+            </View>
           </DebugPanel>
         )}
       </View>
@@ -157,6 +280,34 @@ const styles = StyleSheet.create({
     bottom: 0,
     zIndex: 999,
   },
+  bodyRow: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  contentColumn: {
+    flex: 1,
+  },
+  toolbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    backgroundColor: Colors.background,
+  },
+  searchInput: {
+    flex: 1,
+    height: 34,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    backgroundColor: Colors.surface,
+    paddingHorizontal: 10,
+    fontSize: 13,
+    color: Colors.text,
+  },
   contentContainer: { flex: 1 },
   emptyText: {
     padding: 20,

package/src/ui/panel/buildFeatureSummary.ts

@@ -0,0 +1,288 @@
+import type { AnyDebugFeature } from '../../types';
+
+export interface FeatureSummary {
+  capabilityText: string;
+  count?: number;
+  badCount?: number;
+  latestLabel?: string;
+  statusLabel?: string;
+  statusColor?: string;
+  filterMode?: 'all' | 'bad';
+  supportsBadFilter: boolean;
+}
+
+export function buildFeatureSummary(
+  feature: AnyDebugFeature,
+  snapshot: unknown,
+): FeatureSummary {
+  const name = feature.name;
+
+  if (name === 'network') return buildNetworkSummary(snapshot);
+  if (name === 'console') return buildConsoleSummary(snapshot);
+  if (name === 'navigation') return buildNavigationSummary(snapshot);
+  if (name === 'zustand') return buildZustandSummary(snapshot);
+  if (name === 'track') return buildTrackSummary(snapshot);
+  if (name === 'clipboard') return buildClipboardSummary(snapshot);
+  if (name === 'environment') return buildEnvironmentSummary(snapshot);
+  if (name === 'devConnect') return buildDevConnectSummary(snapshot);
+  if (name === 'sessionHistory') return buildSessionHistorySummary(snapshot);
+  if (name === 'thirdPartyLibs') return buildThirdPartyLibsSummary(snapshot);
+  if (name === 'native') return buildNativeSummary(snapshot);
+
+  return buildUnknownSummary(snapshot);
+}
+
+// ─── Per-feature builders ──────────────────────────────
+
+interface NetworkItem {
+  request?: { method?: string; url?: string };
+  response?: { status?: number };
+  error?: string;
+}
+
+function buildNetworkSummary(snapshot: unknown): FeatureSummary {
+  const items = asArray(snapshot);
+  const count = items.length;
+  let badCount = 0;
+  let latestLabel: string | undefined;
+
+  if (count > 0) {
+    for (const item of items) {
+      const n = item as NetworkItem;
+      if (n.error || (n.response?.status ?? 0) >= 400) badCount++;
+    }
+    const last = items[items.length - 1] as NetworkItem;
+    const method = last.request?.method?.toUpperCase() ?? '';
+    const url = last.request?.url ?? '';
+    const status = last.response?.status;
+    const path = extractPath(url);
+    latestLabel = [method, path, status].filter(Boolean).join(' ');
+  }
+
+  return {
+    capabilityText: 'HTTP capture, status, duration, request and response body',
+    count,
+    badCount: badCount > 0 ? badCount : undefined,
+    latestLabel,
+    supportsBadFilter: count > 0,
+  };
+}
+
+interface ConsoleItem {
+  level?: string;
+  data?: unknown[];
+}
+
+function buildConsoleSummary(snapshot: unknown): FeatureSummary {
+  const items = asArray(snapshot);
+  const count = items.length;
+  let badCount = 0;
+  let latestLabel: string | undefined;
+
+  if (count > 0) {
+    for (const item of items) {
+      const lvl = (item as ConsoleItem).level ?? '';
+      if (lvl === 'warn' || lvl === 'error' || lvl === 'fatal') badCount++;
+    }
+    const last = items[items.length - 1] as ConsoleItem;
+    latestLabel = formatConsoleMessage(last.data);
+  }
+
+  return {
+    capabilityText: 'Console log capture with level filtering',
+    count,
+    badCount: badCount > 0 ? badCount : undefined,
+    latestLabel,
+    supportsBadFilter: count > 0,
+  };
+}
+
+interface NavigationItem {
+  from?: string;
+  to?: string;
+}
+
+function buildNavigationSummary(snapshot: unknown): FeatureSummary {
+  const items = asArray(snapshot);
+  const count = items.length;
+  let latestLabel: string | undefined;
+
+  if (count > 0) {
+    const last = items[items.length - 1] as NavigationItem;
+    const from = last.from ?? '?';
+    const to = last.to ?? '?';
+    latestLabel = `${from} → ${to}`;
+  }
+
+  return {
+    capabilityText: 'Screen navigation tracking with route history',
+    count,
+    latestLabel,
+    supportsBadFilter: false,
+  };
+}
+
+interface ZustandItem {
+  action?: string;
+  storeName?: string;
+}
+
+function buildZustandSummary(snapshot: unknown): FeatureSummary {
+  const items = asArray(snapshot);
+  const count = items.length;
+  let latestLabel: string | undefined;
+
+  if (count > 0) {
+    const last = items[items.length - 1] as ZustandItem;
+    const parts = [last.action, last.storeName].filter(Boolean);
+    latestLabel = parts.join(' @ ') || undefined;
+  }
+
+  return {
+    capabilityText: 'State change tracking for Zustand stores',
+    count,
+    latestLabel,
+    supportsBadFilter: false,
+  };
+}
+
+interface TrackItem {
+  eventName?: string;
+}
+
+function buildTrackSummary(snapshot: unknown): FeatureSummary {
+  const items = asArray(snapshot);
+  const count = items.length;
+  let latestLabel: string | undefined;
+
+  if (count > 0) {
+    const last = items[items.length - 1] as TrackItem;
+    latestLabel = last.eventName;
+  }
+
+  return {
+    capabilityText: 'Analytics event tracking and inspection',
+    count,
+    latestLabel,
+    supportsBadFilter: false,
+  };
+}
+
+function buildClipboardSummary(_snapshot: unknown): FeatureSummary {
+  return {
+    capabilityText: 'Clipboard event monitoring',
+    supportsBadFilter: false,
+  };
+}
+
+interface EnvironmentSnap {
+  environments?: Array<{ id: string; label: string }>;
+  currentEnvironmentId?: string | null;
+}
+
+function buildEnvironmentSummary(snapshot: unknown): FeatureSummary {
+  const env = (snapshot ?? {}) as EnvironmentSnap;
+  const envs = env.environments ?? [];
+  const current = envs.find((e) => e.id === env.currentEnvironmentId);
+
+  return {
+    capabilityText: 'Environment configuration and switching',
+    count: envs.length || undefined,
+    latestLabel: current?.label,
+    statusLabel: current?.label,
+    supportsBadFilter: false,
+  };
+}
+
+interface DevConnectSnap {
+  streaming?: boolean;
+  computerHost?: string;
+  daemonPort?: string;
+}
+
+function buildDevConnectSummary(snapshot: unknown): FeatureSummary {
+  const s = (snapshot ?? {}) as DevConnectSnap;
+  const host = [s.computerHost, s.daemonPort].filter(Boolean).join(':');
+
+  return {
+    capabilityText: 'Desktop sync with daemon connection',
+    statusLabel: host ? `${s.streaming ? 'live' : 'offline'} ${host}` : s.streaming ? 'live' : undefined,
+    statusColor: s.streaming ? '#34C759' : undefined,
+    supportsBadFilter: false,
+  };
+}
+
+interface SessionHistorySnap {
+  sessions?: unknown[];
+  currentSessionId?: string;
+  logCounts?: Record<string, unknown>;
+}
+
+function buildSessionHistorySummary(snapshot: unknown): FeatureSummary {
+  const s = (snapshot ?? {}) as SessionHistorySnap;
+  const count = s.sessions?.length;
+  return {
+    capabilityText: 'Session log recording and replay',
+    count: count || undefined,
+    latestLabel: s.currentSessionId,
+    supportsBadFilter: false,
+  };
+}
+
+function buildThirdPartyLibsSummary(snapshot: unknown): FeatureSummary {
+  const items = asArray(snapshot);
+  return {
+    capabilityText: 'Third-party library inspection and management',
+    count: items.length || undefined,
+    supportsBadFilter: false,
+  };
+}
+
+function buildNativeSummary(snapshot: unknown): FeatureSummary {
+  const items = asArray(snapshot);
+  let badCount = 0;
+  for (const item of items) {
+    const lvl = (item as { level?: string }).level ?? '';
+    if (lvl === 'warn' || lvl === 'error' || lvl === 'fatal') badCount++;
+  }
+  return {
+    capabilityText: 'Native log capture',
+    count: items.length || undefined,
+    badCount: badCount > 0 ? badCount : undefined,
+    supportsBadFilter: items.length > 0,
+  };
+}
+
+function buildUnknownSummary(snapshot: unknown): FeatureSummary {
+  const items = asArray(snapshot);
+  return {
+    capabilityText: `${items.length} item${items.length !== 1 ? 's' : ''} captured`,
+    count: items.length || undefined,
+    supportsBadFilter: false,
+  };
+}
+
+// ─── Helpers ───────────────────────────────────────────
+
+function asArray(snap: unknown): unknown[] {
+  if (Array.isArray(snap)) return snap;
+  return [];
+}
+
+function extractPath(url: string): string {
+  try {
+    const u = new URL(url);
+    return u.pathname + u.search;
+  } catch {
+    return url;
+  }
+}
+
+function formatConsoleMessage(data: unknown[] | undefined): string | undefined {
+  if (!data || data.length === 0) return undefined;
+  const joined = data
+    .map((d) => (typeof d === 'string' ? d : JSON.stringify(d)))
+    .join(' ')
+    .slice(0, 60);
+  return joined || undefined;
+}

package/src/ui/panel/filterFeatureSnapshot.ts

@@ -0,0 +1,51 @@
+import type { AnyDebugFeature } from '../../types';
+
+export function filterFeatureSnapshot(
+  feature: AnyDebugFeature,
+  snapshot: unknown,
+  query: string,
+  filterMode: 'all' | 'bad',
+): unknown {
+  if (!Array.isArray(snapshot)) return snapshot;
+
+  const name = feature.name;
+  const supportsBad =
+    name === 'network' || name === 'console' || name === 'native';
+
+  return (snapshot as unknown[]).filter((item) => {
+    if (filterMode === 'bad' && supportsBad) {
+      if (!isBad(name, item as Record<string, unknown>)) return false;
+    }
+    if (query) {
+      const hay = extractSearchableText(item).toLowerCase();
+      if (!hay.includes(query.toLowerCase())) return false;
+    }
+    return true;
+  });
+}
+
+function isBad(
+  featureName: string,
+  item: Record<string, unknown>,
+): boolean {
+  if (featureName === 'network') {
+    const resp = item.response as Record<string, unknown> | undefined;
+    return !!(item.error || ((resp?.status as number) ?? 0) >= 400);
+  }
+  // console, native
+  const lvl = (item.level as string) ?? '';
+  return lvl === 'warn' || lvl === 'error' || lvl === 'fatal';
+}
+
+function extractSearchableText(item: unknown): string {
+  if (item == null) return '';
+  if (typeof item === 'string') return item;
+  if (typeof item === 'number' || typeof item === 'boolean') return String(item);
+  if (Array.isArray(item)) return item.map(extractSearchableText).join(' ');
+  const parts: string[] = [];
+  for (const val of Object.values(item as Record<string, unknown>)) {
+    const t = extractSearchableText(val);
+    if (t) parts.push(t);
+  }
+  return parts.join(' ');
+}

package/src/ui/panel/tabPersistence.ts

@@ -0,0 +1,22 @@
+import type { AnyDebugFeature } from '../../types';
+
+export function resolveStoredTabIndex(
+  features: AnyDebugFeature[],
+  storedTab: string | null,
+): number {
+  if (!storedTab) return 0;
+
+  const nameIndex = features.findIndex((feature) => feature.name === storedTab);
+  if (nameIndex >= 0) return nameIndex;
+
+  const legacyIndex = Number(storedTab);
+  if (
+    Number.isInteger(legacyIndex) &&
+    legacyIndex >= 0 &&
+    legacyIndex < features.length
+  ) {
+    return legacyIndex;
+  }
+
+  return 0;
+}

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',