react-native-debug-toolkit 2.0.0 → 2.1.0

package/src/components/FloatPanelView.tsx

@@ -1,714 +1,202 @@
-import React, { Component } from 'react';
+import React, { Component, useCallback, useEffect, useRef, useState } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   Animated,
   PanResponder,
-  Pressable,
-  ScrollView,
-  TouchableOpacity,
   Easing,
 } from 'react-native';
-import { Layout, Colors } from '../utils/constants';
-import type { DebugFeature } from '../types';
-
-interface FloatPanelViewProps {
-  features: DebugFeature[];
-  onClose: () => void;
-  onClearAll: () => void;
-}
-
-interface FloatPanelViewState {
-  isOpen: boolean;
-  toFloat: boolean;
-  pan: Animated.ValueXY;
-  scale: Animated.Value;
-  lastPosition: { x: number; y: number };
-  activeTab: number;
-  panelTranslateY: Animated.Value;
-  backdropOpacity: Animated.Value;
-  contentOpacity: Animated.Value;
-  contentTranslateX: Animated.Value;
-  underlineTranslateX: Animated.Value;
-  underlineWidth: number;
+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;
 }
 
-export class FloatPanelView extends Component<
-  FloatPanelViewProps,
-  FloatPanelViewState
+class DebugErrorBoundary extends Component<
+  { children: React.ReactNode; onError: () => void },
+  ErrorBoundaryState
 > {
-  private tabScrollViewRef = React.createRef<ScrollView>();
-  private gestureResponder: ReturnType<typeof PanResponder.create>;
-  private panelResponder: ReturnType<typeof PanResponder.create>;
-  private swipeResponder: ReturnType<typeof PanResponder.create>;
-  private unsubscribeFns: Array<() => void> = [];
-  private refreshTimeout: ReturnType<typeof setTimeout> | null = null;
-  private isDisposed = false;
-  private isSwitchingTab = false;
-  private underlineInitialized = false;
-  private tabScrollOffset = 0;
-  private tabViewportWidth = 0;
-  private tabContentWidth = 0;
-  private tabLayouts: Array<{ x: number; width: number }> = [];
+  state: ErrorBoundaryState = { hasError: false };
 
-  constructor(props: FloatPanelViewProps) {
-    super(props);
-    const initialPosition = {
-      x: Layout.screenWidth - Layout.iconSize - 16,
-      y: Layout.screenHeight / 2 - Layout.iconSize / 2,
-    };
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true };
+  }
 
-    this.state = {
-      isOpen: false,
-      toFloat: true,
-      pan: new Animated.ValueXY(initialPosition),
-      scale: new Animated.Value(1),
-      lastPosition: initialPosition,
-      activeTab: 0,
-      panelTranslateY: new Animated.Value(Layout.screenHeight),
-      backdropOpacity: new Animated.Value(0),
-      contentOpacity: new Animated.Value(1),
-      contentTranslateX: new Animated.Value(0),
-      underlineTranslateX: new Animated.Value(0),
-      underlineWidth: 0,
-    };
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('[DebugToolkit] Panel crashed:', error, info.componentStack);
+    this.props.onError();
+  }
 
-    this.gestureResponder = PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderGrant: () => {
-        this.setState({ toFloat: true });
-        Animated.spring(this.state.scale, {
-          toValue: 0.9,
-          friction: 5,
-          useNativeDriver: true,
-        }).start();
-      },
-      onPanResponderMove: (_: unknown, gs: { dx: number; dy: number }) => {
-        const { lastPosition } = this.state;
-        const x = Math.max(0, Math.min(lastPosition.x + gs.dx, Layout.screenWidth - Layout.iconSize));
-        const y = Math.max(0, Math.min(lastPosition.y + gs.dy, Layout.screenHeight - Layout.iconSize));
-        this.state.pan.setValue({ x, y });
-      },
-      onPanResponderRelease: (_: unknown, gs: { dx: number; dy: number }) => {
-        if (Math.abs(gs.dx) < 5 && Math.abs(gs.dy) < 5) {
-          Animated.spring(this.state.scale, { toValue: 1, friction: 5, useNativeDriver: true }).start();
-          this.togglePanel();
-          return;
-        }
-        Animated.spring(this.state.scale, { toValue: 1, friction: 5, useNativeDriver: true }).start();
-        const { lastPosition } = this.state;
-        const newPosition = {
-          x: Math.max(0, Math.min(lastPosition.x + gs.dx, Layout.screenWidth - Layout.iconSize)),
-          y: Math.max(0, Math.min(lastPosition.y + gs.dy, Layout.screenHeight - Layout.iconSize)),
-        };
-        this.setState({ lastPosition: newPosition, toFloat: true });
-      },
-      onPanResponderTerminate: (_: unknown, gs: { dx: number; dy: number }) => {
-        const { lastPosition } = this.state;
-        const newPosition = {
-          x: Math.max(0, Math.min(lastPosition.x + gs.dx, Layout.screenWidth - Layout.iconSize)),
-          y: Math.max(0, Math.min(lastPosition.y + gs.dy, Layout.screenHeight - Layout.iconSize)),
-        };
-        this.setState({ lastPosition: newPosition });
-      },
-    });
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
+  }
+}
 
-    this.panelResponder = PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: (_, gs) => gs.dy > 5,
-      onPanResponderMove: (_, gs) => {
-        if (gs.dy > 0) {
-          this.state.panelTranslateY.setValue(gs.dy);
-          this.state.backdropOpacity.setValue(Math.max(0, 1 - gs.dy / 200));
-        }
-      },
-      onPanResponderRelease: (_, gs) => {
-        if (gs.dy > 100) {
-          this.closePanel();
-        } else {
-          Animated.spring(this.state.panelTranslateY, {
-            toValue: 0, friction: 8, tension: 50, useNativeDriver: true,
-          }).start();
-          Animated.timing(this.state.backdropOpacity, {
-            toValue: 1, duration: 200, useNativeDriver: true,
-          }).start();
-        }
-      },
-    });
+interface FloatPanelViewProps {
+  features: AnyDebugFeature[];
+  onClearAll: () => void;
+}
 
-    // Horizontal swipe for tab switching
-    this.swipeResponder = PanResponder.create({
+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 (this.isSwitchingTab) return false;
+        if (isSwitchingTab.current) return false;
         return Math.abs(gs.dx) > 25 && Math.abs(gs.dx) > Math.abs(gs.dy) * 2.5;
       },
       onPanResponderRelease: (_, gs) => {
-        const tabs = this.getTabs();
-        if (gs.dx < -40 && this.state.activeTab < tabs.length - 1) {
-          this.switchTab(this.state.activeTab + 1);
-        } else if (gs.dx > 40 && this.state.activeTab > 0) {
-          this.switchTab(this.state.activeTab - 1);
-        }
+        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);
     });
-  }
-
-  componentDidMount(): void {
-    this.isDisposed = false;
-    this.subscribeToFeatures(this.props.features);
-  }
-
-  componentDidUpdate(prevProps: FloatPanelViewProps): void {
-    if (prevProps.features !== this.props.features) {
-      this.unsubscribeFromFeatures();
-      this.subscribeToFeatures(this.props.features);
-      if (this.state.activeTab >= this.props.features.length) {
-        this.setState({ activeTab: 0 });
-      }
-    }
-  }
-
-  componentWillUnmount(): void {
-    this.isDisposed = true;
-    if (this.refreshTimeout) {
-      clearTimeout(this.refreshTimeout);
-      this.refreshTimeout = null;
-    }
-    this.unsubscribeFromFeatures();
-  }
-
-  private scheduleRefresh() {
-    if (this.isDisposed || this.refreshTimeout) return;
-    this.refreshTimeout = setTimeout(() => {
-      this.refreshTimeout = null;
-      if (!this.isDisposed) this.forceUpdate();
-    }, 0);
-  }
-
-  private subscribeToFeatures(features: DebugFeature[]) {
-    this.unsubscribeFns = features
-      .map((feature) => feature.subscribe?.(() => this.scheduleRefresh()))
-      .filter((unsubscribe): unsubscribe is () => void => typeof unsubscribe === 'function');
-  }
+  }, []);
+
+  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;
 
-  private unsubscribeFromFeatures() {
-    this.unsubscribeFns.forEach((unsubscribe) => unsubscribe());
-    this.unsubscribeFns = [];
-  }
-
-  private togglePanel = () => {
-    if (this.state.isOpen) this.closePanel();
-    else this.openPanel();
-  };
-
-  private openPanel = () => {
-    this.resetTabMeasurements();
-    this.setState({ isOpen: true, toFloat: false, underlineWidth: 0 }, () => {
       Animated.parallel([
-        Animated.spring(this.state.panelTranslateY, {
-          toValue: 0, friction: 8, tension: 65, useNativeDriver: true,
-        }),
-        Animated.timing(this.state.backdropOpacity, {
-          toValue: 1, duration: 250, useNativeDriver: true,
+        Animated.timing(contentOpacity, { toValue: 0, duration: 80, useNativeDriver: true }),
+        Animated.timing(contentTranslateX, {
+          toValue: -direction * 40,
+          duration: 80,
+          useNativeDriver: true,
         }),
-      ]).start();
-    });
-  };
-
-  private closePanel = () => {
-    Animated.parallel([
-      Animated.spring(this.state.panelTranslateY, {
-        toValue: Layout.screenHeight, friction: 8, tension: 65, useNativeDriver: true,
-      }),
-      Animated.timing(this.state.backdropOpacity, {
-        toValue: 0, duration: 200, useNativeDriver: true,
-      }),
-    ]).start(() => {
-      this.setState({ isOpen: false, toFloat: true });
-    });
-  };
-
-  private resetTabMeasurements() {
-    this.underlineInitialized = false;
-    this.tabScrollOffset = 0;
-    this.tabViewportWidth = 0;
-    this.tabContentWidth = 0;
-    this.tabLayouts = [];
-    this.state.underlineTranslateX.setValue(0);
-  }
-
-  private switchTab = (index: number) => {
-    if (this.isSwitchingTab || index === this.state.activeTab) return;
-    this.isSwitchingTab = true;
-
-    const direction = index > this.state.activeTab ? 1 : -1;
-
-    // Auto-scroll tab bar first, then animate underline
-    const layout = this.tabLayouts[index];
-    if (layout) {
-      const targetScrollX = this.getTabScrollTarget(index);
-      this.tabScrollOffset = targetScrollX;
-      if (this.tabScrollViewRef.current) {
-        this.tabScrollViewRef.current.scrollTo({ x: targetScrollX, animated: true });
-      }
-      this.animateUnderline(index, targetScrollX);
-    }
-
-    // Animate content: slide out + fade out
-    Animated.parallel([
-      Animated.timing(this.state.contentOpacity, {
-        toValue: 0, duration: 80, useNativeDriver: true,
-      }),
-      Animated.timing(this.state.contentTranslateX, {
-        toValue: -direction * 40, duration: 80, useNativeDriver: true,
-      }),
-    ]).start(() => {
-      this.setState({ activeTab: index }, () => {
-        // Reset translateX to opposite side instantly, then slide in + fade in
-        this.state.contentTranslateX.setValue(direction * 40);
+      ]).start(() => {
+        setActiveTab(index);
+        contentTranslateX.setValue(direction * 40);
         Animated.parallel([
-          Animated.timing(this.state.contentOpacity, {
-            toValue: 1, duration: 150, useNativeDriver: true,
-          }),
-          Animated.timing(this.state.contentTranslateX, {
-            toValue: 0, duration: 200, easing: Easing.out(Easing.cubic), useNativeDriver: true,
+          Animated.timing(contentOpacity, { toValue: 1, duration: 150, useNativeDriver: true }),
+          Animated.timing(contentTranslateX, {
+            toValue: 0,
+            duration: 200,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
           }),
         ]).start(() => {
-          this.isSwitchingTab = false;
+          isSwitchingTab.current = false;
         });
       });
-    });
-  };
+    },
+    [contentOpacity, contentTranslateX],
+  );
 
-  private animateUnderline(index: number, scrollOffset?: number) {
-    const layout = this.tabLayouts[index];
-    if (!layout) {
-      return;
-    }
-    const offsetX = this.getClampedTabScrollOffset(scrollOffset ?? this.tabScrollOffset);
-    this.setState({ underlineWidth: layout.width });
-    Animated.spring(this.state.underlineTranslateX, {
-      toValue: layout.x - offsetX, friction: 7, tension: 50, useNativeDriver: true,
-    }).start();
-  }
+  // Keep ref in sync
+  switchTabRef.current = switchTab;
 
-  private getMaxTabScrollOffset() {
-    return Math.max(0, this.tabContentWidth - this.tabViewportWidth);
-  }
-
-  private getClampedTabScrollOffset(offset: number) {
-    return Math.min(Math.max(0, offset), this.getMaxTabScrollOffset());
-  }
+  // 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 }));
 
-  private getTabScrollTarget(index: number) {
-    const layout = this.tabLayouts[index];
-    if (!layout) {
-      return this.getClampedTabScrollOffset(this.tabScrollOffset);
-    }
-    return this.getClampedTabScrollOffset(layout.x - 60);
-  }
-
-  private tryInitializeTabBar() {
-    if (this.underlineInitialized || this.tabViewportWidth <= 0 || this.tabContentWidth <= 0) {
-      return;
-    }
-
-    const layout = this.tabLayouts[this.state.activeTab];
-    if (!layout) {
-      return;
-    }
-
-    const targetScrollX = this.getTabScrollTarget(this.state.activeTab);
-    this.tabScrollOffset = targetScrollX;
-    if (this.tabScrollViewRef.current) {
-      this.tabScrollViewRef.current.scrollTo({ x: targetScrollX, animated: false });
-    }
-    this.state.underlineTranslateX.setValue(layout.x - targetScrollX);
-    this.setState({ underlineWidth: layout.width });
-    this.underlineInitialized = true;
-  }
-
-  private syncUnderlineToActiveTab() {
-    const layout = this.tabLayouts[this.state.activeTab];
-    if (!layout) {
-      return;
-    }
-
-    const clampedOffset = this.getClampedTabScrollOffset(this.tabScrollOffset);
-    if (clampedOffset !== this.tabScrollOffset) {
-      this.tabScrollOffset = clampedOffset;
-    }
-
-    this.state.underlineTranslateX.setValue(layout.x - clampedOffset);
-    if (this.state.underlineWidth !== layout.width) {
-      this.setState({ underlineWidth: layout.width });
-    }
-  }
-
-  private handleTabLayout = (index: number, event: { nativeEvent: { layout: { x: number; width: number } } }) => {
-    const { x, width } = event.nativeEvent.layout;
-    this.tabLayouts[index] = { x, width };
-    if (index === this.state.activeTab) {
-      this.tryInitializeTabBar();
-    }
-  };
-
-  private getTabs() {
-    return this.props.features.map((f) => ({ label: f.label, id: f.name }));
-  }
-
-  private renderFeatureContent() {
-    const tabs = this.getTabs();
-    if (tabs.length === 0) {
+  // Render active feature content
+  const renderFeatureContent = () => {
+    if (features.length === 0) {
       return <Text style={styles.emptyText}>No debug features enabled</Text>;
     }
-
-    const featureId = tabs[this.state.activeTab]?.id;
-    const feature = this.props.features.find((f) => f.name === featureId);
-    if (!feature) {
-      return <Text style={styles.emptyText}>Feature not found</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} />;
-    }
-
+    if (TabComponent) return <TabComponent data={data} feature={feature} />;
     return (
       <View style={styles.genericContent}>
         <Text style={styles.jsonContent}>{JSON.stringify(data, null, 2)}</Text>
       </View>
     );
-  }
-
-  render() {
-    const { isOpen, toFloat, pan, scale, panelTranslateY, backdropOpacity, activeTab, contentOpacity } = this.state;
-    const tabs = this.getTabs();
+  };
 
-    return (
+  return (
+    <DebugErrorBoundary onError={() => setIsOpen(false)}>
       <View style={styles.container} pointerEvents="box-none">
-        {/* Float button */}
-        {!isOpen && toFloat && (
-          <Animated.View
-            {...this.gestureResponder.panHandlers}
-            style={[
-              styles.floatBtn,
-              { transform: [{ translateX: pan.x }, { translateY: pan.y }, { scale }] },
-            ]}
-          >
-            <Pressable onPress={this.togglePanel} style={styles.floatBtnInner}>
-              <View style={styles.iconGrid}>
-                <View style={styles.iconRow}>
-                  <View style={[styles.iconCell, { backgroundColor: Colors.primary }]} />
-                  <View style={[styles.iconCell, { backgroundColor: Colors.success }]} />
-                </View>
-                <View style={styles.iconRow}>
-                  <View style={[styles.iconCell, { backgroundColor: Colors.warning }]} />
-                  <View style={[styles.iconCell, { backgroundColor: Colors.purple }]} />
-                </View>
-              </View>
-              {(() => {
-                const envBadge = this.props.features
-                  .map((f) => f.badge?.())
-                  .find((b) => b != null);
-                if (!envBadge) return null;
-                return (
-                  <View style={[styles.envBadge, { backgroundColor: envBadge.color }]}>
-                    <Text style={styles.envBadgeText}>{envBadge.label}</Text>
-                  </View>
-                );
-              })()}
-            </Pressable>
-          </Animated.View>
-        )}
-
-        {/* Panel */}
+        <FloatIcon visible={!isOpen} onPress={() => setIsOpen(true)} badge={envBadge} />
         {isOpen && (
-          <View style={styles.panelContainer}>
-            <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
-              <Pressable style={styles.backdropPressable} onPress={this.closePanel} />
-            </Animated.View>
+          <DebugPanel onClose={() => setIsOpen(false)} onClearAll={onClearAll}>
+            <FeatureTabBar tabs={tabs} activeIndex={activeTab} onSelectTab={switchTab} />
             <Animated.View
-              style={[styles.panel, { transform: [{ translateY: panelTranslateY }] }]}
+              style={[
+                styles.contentContainer,
+                { opacity: contentOpacity, transform: [{ translateX: contentTranslateX }] },
+              ]}
+              {...swipeResponder.panHandlers}
             >
-              {/* Drag zone: only handle + header responds to vertical drag to close */}
-              <View {...this.panelResponder.panHandlers}>
-                <View style={styles.dragHandle}>
-                  <View style={styles.dragIndicator} />
-                </View>
-                <View style={styles.header}>
-                  <Text style={styles.headerTitle}>Debug Toolkit</Text>
-                  <View style={styles.headerButtons}>
-                    <TouchableOpacity
-                      onPress={() => { this.props.onClearAll(); this.closePanel(); }}
-                      style={styles.clearAllButton}
-                      activeOpacity={0.6}
-                    >
-                      <Text style={styles.clearButtonText}>Clear</Text>
-                    </TouchableOpacity>
-                    <Pressable onPress={this.closePanel} style={styles.closeButton}>
-                      <Text style={styles.closeButtonText}>✕</Text>
-                    </Pressable>
-                  </View>
-                </View>
-              </View>
-
-              <View style={styles.panelContent}>
-                {/* Tab bar - iOS 17 sliding underline style */}
-                <View style={styles.tabBarContainer}>
-                  <ScrollView
-                    ref={this.tabScrollViewRef}
-                    horizontal
-                    showsHorizontalScrollIndicator={false}
-                    contentContainerStyle={styles.tabsScrollContainer}
-                    onLayout={(e) => {
-                      this.tabViewportWidth = e.nativeEvent.layout.width;
-                      this.tryInitializeTabBar();
-                    }}
-                    onContentSizeChange={(width) => {
-                      this.tabContentWidth = width;
-                      this.tryInitializeTabBar();
-                    }}
-                    onScroll={(e) => {
-                      this.tabScrollOffset = this.getClampedTabScrollOffset(
-                        e.nativeEvent.contentOffset.x
-                      );
-                      // Keep underline aligned with active tab during manual scroll
-                      if (!this.isSwitchingTab) {
-                        this.syncUnderlineToActiveTab();
-                      }
-                    }}
-                    scrollEventThrottle={16}
-                  >
-                    {tabs.map((tab, index) => (
-                      <TouchableOpacity
-                        key={tab.id}
-                        style={styles.tab}
-                        onPress={() => this.switchTab(index)}
-                        activeOpacity={0.7}
-                        onLayout={(e) => this.handleTabLayout(index, e)}
-                      >
-                        <Text
-                          style={[styles.tabText, activeTab === index && styles.activeTabText]}
-                          numberOfLines={1}
-                        >
-                          {tab.label}
-                        </Text>
-                      </TouchableOpacity>
-                    ))}
-                  </ScrollView>
-                  {/* Sliding underline */}
-                  <Animated.View
-                    style={[
-                      styles.slidingUnderline,
-                      {
-                        width: this.state.underlineWidth,
-                        transform: [{ translateX: this.state.underlineTranslateX }],
-                      },
-                    ]}
-                  />
-                </View>
-
-                {/* Content with swipe gesture + slide + fade animation */}
-                <Animated.View
-                  style={[
-                    styles.contentContainer,
-                    {
-                      opacity: contentOpacity,
-                      transform: [{ translateX: this.state.contentTranslateX }],
-                    },
-                  ]}
-                  {...this.swipeResponder.panHandlers}
-                >
-                  {this.renderFeatureContent()}
-                </Animated.View>
-              </View>
+              {renderFeatureContent()}
             </Animated.View>
-          </View>
+          </DebugPanel>
         )}
       </View>
-    );
-  }
+    </DebugErrorBoundary>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    top: 0, left: 0, right: 0, bottom: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     zIndex: 999,
   },
-
-  // Float button
-  floatBtn: {
-    position: 'absolute',
-    width: Layout.iconSize,
-    height: Layout.iconSize,
-    borderRadius: Layout.iconSize / 2,
-    backgroundColor: '#FFFFFF',
-    elevation: 6,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.12,
-    shadowRadius: 8,
-  },
-  floatBtnInner: {
-    width: '100%', height: '100%',
-    alignItems: 'center', justifyContent: 'center',
-  },
-  iconGrid: {
-    width: 22, height: 22,
-    justifyContent: 'space-between',
-  },
-  iconRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  iconCell: {
-    width: 8, height: 8,
-    borderRadius: 2.5,
-  },
-  envBadge: {
-    position: 'absolute',
-    top: -4, right: -4,
-    minWidth: 20, height: 18,
-    borderRadius: 9,
-    paddingHorizontal: 5,
-    alignItems: 'center', justifyContent: 'center',
-    borderWidth: 2, borderColor: '#FFF',
-    elevation: 4,
-  },
-  envBadgeText: {
-    color: '#FFF', fontSize: 9, fontWeight: '700',
-  },
-
-  // Panel
-  panelContainer: {
-    position: 'absolute',
-    top: 0, left: 0, right: 0, bottom: 0,
-    justifyContent: 'flex-end',
-  },
-  backdrop: {
-    position: 'absolute',
-    top: 0, left: 0, right: 0, bottom: 0,
-    backgroundColor: 'rgba(0,0,0,0.35)',
-  },
-  backdropPressable: { flex: 1 },
-  panel: {
-    width: '100%',
-    height: '90%',
-    backgroundColor: Colors.background,
-    borderTopLeftRadius: 28,
-    borderTopRightRadius: 28,
-    overflow: 'hidden',
-    elevation: 24,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: -4 },
-    shadowOpacity: 0.08,
-    shadowRadius: 12,
-  },
-  dragHandle: {
-    width: '100%', height: 20,
-    alignItems: 'center', justifyContent: 'center',
-    backgroundColor: Colors.surface,
-  },
-  dragIndicator: {
-    width: 40, height: 4,
-    borderRadius: 2,
-    backgroundColor: '#D1D1D6',
-  },
-  panelContent: { flex: 1 },
   contentContainer: { flex: 1 },
-
-  // Header
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingTop: 6,
-    paddingBottom: 10,
-    backgroundColor: Colors.surface,
-  },
-  headerTitle: {
-    fontSize: 17,
-    fontWeight: '600',
-    color: Colors.text,
-  },
-  headerButtons: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-  },
-  clearAllButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 8,
-    backgroundColor: 'rgba(255,59,48,0.06)',
-  },
-  clearButtonText: {
-    color: Colors.error,
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  closeButton: {
-    width: 30, height: 30,
-    borderRadius: 15,
-    backgroundColor: Colors.background,
-    alignItems: 'center', justifyContent: 'center',
-  },
-  closeButtonText: {
-    fontSize: 16,
-    fontWeight: '400',
-    color: Colors.textSecondary,
-    lineHeight: 16,
-  },
-
-  // Tab bar - iOS 17 sliding underline style
-  tabBarContainer: {
-    backgroundColor: Colors.surface,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: Colors.border,
-  },
-  tabsScrollContainer: {
-    paddingHorizontal: 20,
-    flexDirection: 'row',
-  },
-  tab: {
-    paddingVertical: 10,
-    paddingHorizontal: 14,
-    marginRight: 8,
-  },
-  tabText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: Colors.textLight,
-  },
-  activeTabText: {
-    color: Colors.primary,
-    fontWeight: '600',
-  },
-  slidingUnderline: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    height: 2.5,
-    borderRadius: 1.25,
-    backgroundColor: Colors.primary,
-  },
-
-  // Misc
   emptyText: {
     padding: 20,
     textAlign: 'center',
-    color: Colors.textLight,
+    color: '#C7C7CC',
     fontSize: 13,
   },
   genericContent: { padding: 16, flex: 1 },
-  jsonContent: { fontFamily: 'monospace', fontSize: 12, color: Colors.text },
+  jsonContent: { fontFamily: 'monospace', fontSize: 12, color: '#1C1C1E' },
 });