react-native-debug-toolkit 0.6.4 → 2.1.0

package/src/components/FloatPanelView.tsx

@@ -0,0 +1,202 @@
+import React, { Component, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  Easing,
+} from 'react-native';
+import type { AnyDebugFeature } from '../types';
+import { FloatIcon } from './FloatIcon';
+import { DebugPanel } from './DebugPanel';
+import { FeatureTabBar } from './FeatureTabBar';
+import type { TabItem } from './FeatureTabBar';
+
+// ─── Error Boundary ────────────────────────────────────
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class DebugErrorBoundary extends Component<
+  { children: React.ReactNode; onError: () => void },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('[DebugToolkit] Panel crashed:', error, info.componentStack);
+    this.props.onError();
+  }
+
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
+  }
+}
+
+interface FloatPanelViewProps {
+  features: AnyDebugFeature[];
+  onClearAll: () => void;
+}
+
+export function FloatPanelView({ features, onClearAll }: FloatPanelViewProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState(0);
+
+  // Content slide animation
+  const contentOpacity = useRef(new Animated.Value(1)).current;
+  const contentTranslateX = useRef(new Animated.Value(0)).current;
+  const isSwitchingTab = useRef(false);
+
+  // Refs to avoid stale closures in PanResponder
+  const activeTabRef = useRef(0);
+  activeTabRef.current = activeTab;
+  const featuresLengthRef = useRef(features.length);
+  featuresLengthRef.current = features.length;
+  const switchTabRef = useRef<(index: number) => void>(() => {});
+
+  // Swipe-to-switch responder
+  const swipeResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gs) => {
+        if (isSwitchingTab.current) return false;
+        return Math.abs(gs.dx) > 25 && Math.abs(gs.dx) > Math.abs(gs.dy) * 2.5;
+      },
+      onPanResponderRelease: (_, gs) => {
+        const tab = activeTabRef.current;
+        if (gs.dx < -40 && tab < featuresLengthRef.current - 1) switchTabRef.current(tab + 1);
+        else if (gs.dx > 40 && tab > 0) switchTabRef.current(tab - 1);
+      },
+      onPanResponderTerminationRequest: () => true,
+    }),
+  ).current;
+
+  // Feature subscription → re-render on data changes
+  const [, setTick] = useState(0);
+  const refreshQueued = useRef(false);
+  const scheduleRefresh = useCallback(() => {
+    if (refreshQueued.current) return;
+    refreshQueued.current = true;
+    requestAnimationFrame(() => {
+      refreshQueued.current = false;
+      setTick((t) => t + 1);
+    });
+  }, []);
+
+  useEffect(() => {
+    const unsubs = features
+      .map((f) => f.subscribe?.(() => scheduleRefresh()))
+      .filter((u): u is () => void => typeof u === 'function');
+    return () => unsubs.forEach((u) => u());
+  }, [features, scheduleRefresh]);
+
+  // Reset activeTab if features shrink
+  useEffect(() => {
+    if (activeTab >= features.length) setActiveTab(0);
+  }, [features.length, activeTab]);
+
+  // Tab switching with content animation
+  const switchTab = useCallback(
+    (index: number) => {
+      if (isSwitchingTab.current || index === activeTabRef.current) return;
+      isSwitchingTab.current = true;
+      const direction = index > activeTabRef.current ? 1 : -1;
+
+      Animated.parallel([
+        Animated.timing(contentOpacity, { toValue: 0, duration: 80, useNativeDriver: true }),
+        Animated.timing(contentTranslateX, {
+          toValue: -direction * 40,
+          duration: 80,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setActiveTab(index);
+        contentTranslateX.setValue(direction * 40);
+        Animated.parallel([
+          Animated.timing(contentOpacity, { toValue: 1, duration: 150, useNativeDriver: true }),
+          Animated.timing(contentTranslateX, {
+            toValue: 0,
+            duration: 200,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
+          isSwitchingTab.current = false;
+        });
+      });
+    },
+    [contentOpacity, contentTranslateX],
+  );
+
+  // Keep ref in sync
+  switchTabRef.current = switchTab;
+
+  // 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 }));
+
+  // Render active feature content
+  const renderFeatureContent = () => {
+    if (features.length === 0) {
+      return <Text style={styles.emptyText}>No debug features enabled</Text>;
+    }
+    const feature = features[activeTab];
+    if (!feature) return <Text style={styles.emptyText}>Feature not found</Text>;
+    const data = feature.getData();
+    const TabComponent = feature.renderContent;
+    if (TabComponent) return <TabComponent data={data} feature={feature} />;
+    return (
+      <View style={styles.genericContent}>
+        <Text style={styles.jsonContent}>{JSON.stringify(data, null, 2)}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <DebugErrorBoundary onError={() => setIsOpen(false)}>
+      <View style={styles.container} pointerEvents="box-none">
+        <FloatIcon visible={!isOpen} onPress={() => setIsOpen(true)} badge={envBadge} />
+        {isOpen && (
+          <DebugPanel onClose={() => setIsOpen(false)} onClearAll={onClearAll}>
+            <FeatureTabBar tabs={tabs} activeIndex={activeTab} onSelectTab={switchTab} />
+            <Animated.View
+              style={[
+                styles.contentContainer,
+                { opacity: contentOpacity, transform: [{ translateX: contentTranslateX }] },
+              ]}
+              {...swipeResponder.panHandlers}
+            >
+              {renderFeatureContent()}
+            </Animated.View>
+          </DebugPanel>
+        )}
+      </View>
+    </DebugErrorBoundary>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 999,
+  },
+  contentContainer: { flex: 1 },
+  emptyText: {
+    padding: 20,
+    textAlign: 'center',
+    color: '#C7C7CC',
+    fontSize: 13,
+  },
+  genericContent: { padding: 16, flex: 1 },
+  jsonContent: { fontFamily: 'monospace', fontSize: 12, color: '#1C1C1E' },
+});

package/src/components/NavigationLogTab.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, Text, FlatList, StyleSheet } from 'react-native';
+import { Colors } from '../utils/colors';
+import { CopyButton } from './shared/CopyButton';
+import type { DebugFeatureRenderProps, NavigationLogEntry } from '../types';
+
+export const NavigationLogTab: React.FC<DebugFeatureRenderProps<NavigationLogEntry>> = React.memo(({
+  data,
+}) => {
+  const renderItem = ({ item }: { item: NavigationLogEntry }) => (
+    <View style={styles.logItem}>
+      <View style={styles.header}>
+        <Text style={styles.action}>{item.action}</Text>
+        <View style={styles.headerRight}>
+          {item.duration != null && <Text style={styles.duration}>{item.duration}ms</Text>}
+          <CopyButton
+            text={`${item.action}: ${item.from || '—'} → ${item.to}`}
+            label="Navigation"
+            compact
+          />
+        </View>
+      </View>
+      <View style={styles.routeRow}>
+        <Text style={styles.routeLabel}>From:</Text>
+        <Text style={styles.routeValue}>{item.from || '—'}</Text>
+      </View>
+      <View style={styles.routeRow}>
+        <Text style={styles.routeLabel}>To:</Text>
+        <Text style={styles.routeValue}>{item.to}</Text>
+      </View>
+      <Text style={styles.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      {data.length === 0 ? (
+        <Text style={styles.empty}>No navigation events</Text>
+      ) : (
+        <FlatList
+          data={[...data].reverse()}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          initialNumToRender={20}
+          maxToRenderPerBatch={10}
+          windowSize={5}
+          removeClippedSubviews={true}
+        />
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.surface },
+  empty: { textAlign: 'center', color: Colors.textLight, marginTop: 20 },
+  logItem: { padding: 12, borderBottomWidth: 1, borderBottomColor: '#EEE' },
+  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 },
+  headerRight: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  action: { fontSize: 14, fontWeight: 'bold', color: Colors.primary },
+  duration: { fontSize: 13, color: Colors.textLight },
+  routeRow: { flexDirection: 'row', marginBottom: 3 },
+  routeLabel: { fontSize: 13, color: Colors.textSecondary, marginRight: 8, fontWeight: '600' },
+  routeValue: { fontSize: 13, color: Colors.text, flex: 1 },
+  time: { fontSize: 12, color: Colors.textLight, marginTop: 4 },
+});

package/src/components/NetworkLogTab.tsx

@@ -0,0 +1,270 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  ScrollView,
+} from 'react-native';
+import { Colors, getMethodColor } from '../utils/colors';
+import { CollapsibleSection } from './shared/CollapsibleSection';
+import { JsonView } from './shared/JsonView';
+import { CopyButton } from './shared/CopyButton';
+import { fmt } from '../utils/copyToComputer';
+import { LogListScreen } from './shared/LogListScreen';
+import type { DebugFeatureRenderProps, NetworkLogEntry } from '../types';
+
+const formatSize = (data: unknown): string => {
+  if (!data) return '';
+  try {
+    const len = (typeof data === 'string' ? data : JSON.stringify(data)).length;
+    if (len < 1024) return `(${len} B)`;
+    if (len < 1024 * 1024) return `(${(len / 1024).toFixed(1)} KB)`;
+    return `(${(len / (1024 * 1024)).toFixed(1)} MB)`;
+  } catch {
+    return '';
+  }
+};
+
+const buildCurl = (log: NetworkLogEntry): string => {
+  let c = `curl -X ${log.request.method} '${log.request.url}'`;
+  if (log.request.headers) {
+    Object.entries(log.request.headers).forEach(([k, v]) => (c += ` \\\n  -H '${k}: ${v}'`));
+  }
+  if (log.request.body) {
+    c += ` \\\n  -d '${typeof log.request.body === 'string' ? log.request.body : JSON.stringify(log.request.body)}'`;
+  }
+  return c;
+};
+
+export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry>> = React.memo(({
+  data,
+}) => {
+  const [search, setSearch] = useState('');
+
+  const filtered = search
+    ? data.filter(
+        (l) =>
+          l.request.url.toLowerCase().includes(search.toLowerCase()) ||
+          l.request.method.toLowerCase().includes(search.toLowerCase()),
+      )
+    : data;
+
+  const sorted = [...filtered].sort((a, b) => b.timestamp - a.timestamp);
+
+  return (
+    <LogListScreen
+      data={sorted}
+      reversed={false}
+      emptyText="No HTTP requests logged"
+      renderListHeader={() => (
+        <View style={s.searchContainer}>
+          <View style={s.searchBar}>
+            <Text style={s.searchIcon}>⌕</Text>
+            <TextInput
+              style={s.search}
+              placeholder="Search URLs..."
+              placeholderTextColor={Colors.textLight}
+              value={search}
+              onChangeText={setSearch}
+            />
+          </View>
+        </View>
+      )}
+      renderRow={(item) => {
+        const ok = !item.error && (!item.response || item.response.status < 400);
+        const sc = ok ? Colors.success : Colors.error;
+        return (
+          <View style={s.cardRow}>
+            <View style={[s.statusIndicator, { backgroundColor: sc }]} />
+            <View style={s.cardBody}>
+              <View style={s.cardMeta}>
+                <Text style={[s.methodText, { color: getMethodColor(item.request.method) }]}>
+                  {item.request.method}
+                </Text>
+                <View style={[s.miniPill, { backgroundColor: sc }]}>
+                  <Text style={s.miniPillText}>{item.response?.status ?? 'ERR'}</Text>
+                </View>
+                {item.duration != null && <Text style={s.durationText}>{item.duration}ms</Text>}
+              </View>
+              <Text style={[s.url, !ok && { color: Colors.error }]} numberOfLines={2}>
+                {item.request.url}
+              </Text>
+              <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+            </View>
+          </View>
+        );
+      }}
+      renderDetailHeader={(log) => {
+        const statusColor = log.error || (log.response && log.response.status >= 400) ? Colors.error : Colors.success;
+        return (
+          <View style={s.detailHeaderCenter}>
+            <View style={[s.methodBadge, { backgroundColor: getMethodColor(log.request.method) }]}>
+              <Text style={s.methodBadgeText}>{log.request.method}</Text>
+            </View>
+            <View style={[s.statusPill, { backgroundColor: statusColor }]}>
+              <Text style={s.statusPillText}>{log.response?.status ?? 'ERR'}</Text>
+            </View>
+            {log.duration != null && <Text style={s.durationText}>{log.duration}ms</Text>}
+          </View>
+        );
+      }}
+      renderDetailBody={(log) => {
+        const curlStr = buildCurl(log);
+        return (
+          <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+            <View style={s.urlCard}>
+              <Text style={s.urlText} selectable numberOfLines={3}>{log.request.url}</Text>
+              <CopyButton text={log.request.url} label="URL" />
+            </View>
+
+            <CollapsibleSection title="Request Body" initiallyExpanded>
+              {log.request.body != null ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.request.body)} label="Request Body" />
+                  <JsonView data={log.request.body} maxHeight={250} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No request body</Text>
+              )}
+            </CollapsibleSection>
+
+            <CollapsibleSection title="Request Headers">
+              {log.request.headers ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.request.headers)} label="Request Headers" />
+                  <JsonView data={log.request.headers} maxHeight={200} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No headers</Text>
+              )}
+            </CollapsibleSection>
+
+            <CollapsibleSection title={`Response ${formatSize(log.response?.data)}`} initiallyExpanded>
+              {log.error && (
+                <View style={s.errorBox}>
+                  <Text style={s.errorIcon}>⚠</Text>
+                  <Text style={s.errorText}>{log.error}</Text>
+                </View>
+              )}
+              {log.response?.data != null ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.response.data)} label="Response Body" />
+                  <JsonView data={log.response.data} maxHeight={300} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No response body</Text>
+              )}
+            </CollapsibleSection>
+
+            {log.response?.headers && (
+              <CollapsibleSection title="Response Headers">
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.response.headers)} label="Response Headers" />
+                  <JsonView data={log.response.headers} maxHeight={200} />
+                </View>
+              </CollapsibleSection>
+            )}
+
+            <CollapsibleSection title="cURL">
+              <View style={s.sectionWithCopy}>
+                <CopyButton text={curlStr} label="cURL" />
+                <View style={s.codeBlock}>
+                  <Text style={s.codeText} selectable>{curlStr}</Text>
+                </View>
+              </View>
+            </CollapsibleSection>
+          </ScrollView>
+        );
+      }}
+    />
+  );
+});
+
+const s = StyleSheet.create({
+  // Search
+  searchContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 6,
+    backgroundColor: Colors.background,
+  },
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.surface,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    height: 38,
+  },
+  searchIcon: { fontSize: 16, color: Colors.textLight, marginRight: 6 },
+  search: {
+    flex: 1,
+    fontSize: 14,
+    color: Colors.text,
+    padding: 0,
+  },
+
+  // Row
+  cardRow: { flexDirection: 'row', padding: 14 },
+  statusIndicator: { width: 3, borderRadius: 2, marginRight: 12 },
+  cardBody: { flex: 1 },
+  cardMeta: { flexDirection: 'row', alignItems: 'center', marginBottom: 6, gap: 6 },
+  methodText: { fontSize: 13, fontWeight: '700' },
+  miniPill: { paddingHorizontal: 7, paddingVertical: 2, borderRadius: 4 },
+  miniPillText: { color: '#FFF', fontSize: 10, fontWeight: '700' },
+  durationText: { fontSize: 12, color: Colors.textSecondary, fontWeight: '500' },
+  url: { fontSize: 13, color: Colors.textSecondary, marginBottom: 4, lineHeight: 18 },
+  time: { fontSize: 11, color: Colors.textLight },
+
+  // Detail header
+  detailHeaderCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flex: 1,
+  },
+  methodBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  methodBadgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
+  statusPill: { paddingHorizontal: 9, paddingVertical: 3, borderRadius: 6 },
+  statusPillText: { color: '#FFF', fontSize: 11, fontWeight: '700' },
+
+  // Detail body
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12, paddingBottom: 40 },
+  urlCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 8,
+    gap: 8,
+  },
+  urlText: { flex: 1, fontSize: 13, color: Colors.textSecondary, lineHeight: 18 },
+  sectionWithCopy: { gap: 8 },
+  emptySection: { fontSize: 13, color: Colors.textLight, paddingVertical: 4 },
+  errorBox: {
+    backgroundColor: 'rgba(255,59,48,0.06)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,59,48,0.15)',
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 10,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  errorIcon: { fontSize: 14, color: Colors.error },
+  errorText: { flex: 1, fontSize: 13, color: Colors.error, lineHeight: 18 },
+  codeBlock: {
+    backgroundColor: '#1E1E2E',
+    borderRadius: 12,
+    padding: 12,
+  },
+  codeText: { fontFamily: 'Courier', fontSize: 12, color: '#CDD6F4', lineHeight: 18 },
+});

package/src/components/ThirdPartyLibsTab.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Colors } from '../utils/colors';
+import type { DebugFeatureRenderProps, ThirdPartyLib, ThirdPartyLibAction } from '../types';
+
+export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib>> = ({
+  data,
+}) => {
+  if (data.length === 0) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.empty}>No debug libraries available for this platform</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {data.map((lib) => (
+        <View key={lib.id} style={styles.libCard}>
+          <Text style={styles.libName}>{lib.name}</Text>
+          <Text style={styles.libDesc}>{lib.description}</Text>
+          <View style={styles.actions}>
+            {lib.actions.map((action: ThirdPartyLibAction) => (
+              <TouchableOpacity
+                key={action.id}
+                style={styles.actionButton}
+                onPress={action.onPress}
+              >
+                <Text style={styles.actionText}>{action.label}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.surface, padding: 15 },
+  empty: { textAlign: 'center', color: Colors.textLight, marginTop: 20 },
+  libCard: {
+    backgroundColor: Colors.background,
+    borderRadius: 8,
+    padding: 15,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  libName: { fontSize: 16, fontWeight: 'bold', color: Colors.text, marginBottom: 4 },
+  libDesc: { fontSize: 13, color: Colors.textSecondary, marginBottom: 12 },
+  actions: { flexDirection: 'row', flexWrap: 'wrap' },
+  actionButton: {
+    backgroundColor: Colors.primary,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 6,
+    marginRight: 8,
+    marginBottom: 8,
+  },
+  actionText: { color: '#FFF', fontSize: 14, fontWeight: '600' },
+});