react-native-debug-toolkit 3.3.8 → 3.5.1

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: 11,
+    fontWeight: '700',
+    color: Colors.textSecondary,
+    letterSpacing: 0.2,
+  },
+  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: 10,
+    fontWeight: '800',
+    color: Colors.textSecondary,
+  },
+});

package/src/ui/panel/FloatPanelView.tsx

@@ -6,11 +6,15 @@ import {
   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';
 
@@ -40,6 +44,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;
@@ -50,6 +105,8 @@ 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
@@ -74,6 +131,8 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
     tabCount: features.length,
     onTabChange: useCallback((index: number) => {
       tabLoaded.current = true;
+      setSearchQuery('');
+      setFilterBad(false);
       setActiveTab(index);
       const featureName = features[index]?.name;
       if (featureName) {
@@ -115,7 +174,30 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
 
   // 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 = () => {
@@ -124,7 +206,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 (
@@ -134,6 +216,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">
@@ -141,18 +225,35 @@ 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}
+                    searchQuery={searchQuery}
+                    onSearchChange={setSearchQuery}
+                    showSearch={showSearch}
+                  />
+                )}
+                <Animated.View
+                  style={[
+                    styles.contentContainer,
+                    { opacity: contentOpacity, transform: [{ translateX: contentTranslateX }] },
+                  ]}
+                  {...panHandlers}
+                >
+                  {renderFeatureContent()}
+                </Animated.View>
+              </View>
+            </View>
           </DebugPanel>
         )}
       </View>
@@ -169,6 +270,13 @@ const styles = StyleSheet.create({
     bottom: 0,
     zIndex: 999,
   },
+  bodyRow: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  contentColumn: {
+    flex: 1,
+  },
   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(' ');
+}