react-native-inapp-inspector 2.3.4 → 2.3.6

package/dist/esm/components/Inspector/NpmUpdateToast.js

@@ -34,7 +34,6 @@ export const NpmUpdateToast = () => {
     useEffect(() => {
         if (showUpdateToast && updateAvailable && latestNpmVersion && !dismissed) {
             setVisible(true);
-            // Slide and fade in
             Animated.parallel([
                 Animated.spring(translateYAnim, {
                     toValue: 0,
@@ -48,14 +47,12 @@ export const NpmUpdateToast = () => {
                     useNativeDriver: true,
                 }),
             ]).start();
-            // Progress bar countdown from 1 to 0
             progressAnim.setValue(1);
             Animated.timing(progressAnim, {
                 toValue: 0,
                 duration: TOAST_TIMEOUT_MS,
                 useNativeDriver: false,
             }).start();
-            // Auto-hide after timeout
             timerRef.current = setTimeout(() => {
                 handleDismiss();
             }, TOAST_TIMEOUT_MS);
@@ -109,12 +106,12 @@ export const NpmUpdateToast = () => {
             },
         ]}>
       <View style={styles.contentRow}>
-        {/* Left NPM Badge Icon */}
+        
         <View style={styles.npmIconContainer}>
           <NpmIcon size={15} color="#CB3837"/>
         </View>
 
-        {/* Text Details */}
+        
         <View style={styles.textContainer}>
           <View style={styles.titleRow}>
             <Text style={styles.titleText}>Update Available</Text>
@@ -127,7 +124,7 @@ export const NpmUpdateToast = () => {
           </Text>
         </View>
 
-        {/* Copy command quick button */}
+        
         <TouchableOpacity style={styles.copyButton} onPress={handleCopyCommand} hitSlop={6} activeOpacity={0.75}>
           {copied ? <CheckSvg size={11} color="#10B981"/> : <CopySvg size={11} color="#94A3B8"/>}
           <Text style={[styles.copyButtonText, copied && { color: '#10B981' }]}>
@@ -135,19 +132,19 @@ export const NpmUpdateToast = () => {
           </Text>
         </TouchableOpacity>
 
-        {/* Action Button: View */}
+        
         <TouchableOpacity style={styles.actionButton} onPress={handleOpenNpm} activeOpacity={0.8}>
           <Text style={styles.actionButtonText}>View</Text>
           <ExternalLinkSvg size={10} color="#FFFFFF"/>
         </TouchableOpacity>
 
-        {/* Close Button */}
+        
         <TouchableOpacity style={styles.closeButton} onPress={handleDismiss} hitSlop={8} activeOpacity={0.7}>
           <CloseSvg size={12} color="#94A3B8"/>
         </TouchableOpacity>
       </View>
 
-      {/* Animated Linear Timeout Progress Bar */}
+      
       <View style={styles.progressBarTrack}>
         <Animated.View style={[styles.progressBarFill, { width: progressWidth }]}/>
       </View>

package/dist/esm/components/Inspector/PerformanceTab.js

@@ -14,7 +14,6 @@ import { getPerformanceEvents, subscribePerformanceEvents, logPerformanceEvent,
 import { startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeSystemMetrics, isNativeModuleAvailable, } from '../../native/NativeInspector';
 const PerformanceTab = React.memo(() => {
     const { t } = useTranslation();
-    // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
     const [isRecording, setIsRecording] = useState(true);
     const [currentFps, setCurrentFps] = useState(60);
     const [minFps, setMinFps] = useState(57);
@@ -23,7 +22,6 @@ const PerformanceTab = React.memo(() => {
     const [totalFrames, setTotalFrames] = useState(4820);
     const [jankyFrameCount, setJankyFrameCount] = useState(4);
     const [jsLagMs, setJsLagMs] = useState(1.2);
-    // Expanded Event Card IDs
     const [expandedEventIds, setExpandedEventIds] = useState({
         'perf-1': true,
     });
@@ -33,11 +31,9 @@ const PerformanceTab = React.memo(() => {
             [id]: !prev[id],
         }));
     };
-    // FPS history for sparkline
     const [fpsHistory, setFpsHistory] = useState([
         60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
     ]);
-    // Performance Log Events (Dynamic live subscription)
     const [events, setEvents] = useState(() => getPerformanceEvents());
     const [filterCategory, setFilterCategory] = useState('ALL');
     const [search, setSearch] = useState('');
@@ -47,7 +43,6 @@ const PerformanceTab = React.memo(() => {
         });
         return unsub;
     }, []);
-    // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = useRef(Date.now());
     const rafIdRef = useRef(null);
     const [systemMetrics, setSystemMetrics] = useState(null);
@@ -87,13 +82,11 @@ const PerformanceTab = React.memo(() => {
             const now = Date.now();
             const delta = now - lastFrameTimeRef.current;
             lastFrameTimeRef.current = now;
-            // Track peak JS event loop lag during this 1s interval (without triggering re-renders)
             const lag = Math.max(0, delta - 16.67);
             if (lag > maxLagInSecond) {
                 maxLagInSecond = lag;
             }
             frameCount++;
-            // Update React state ONCE every 1 second (1000ms) to prevent UI shaking/re-rendering
             if (now - lastSecond >= 1000) {
                 const elapsed = now - lastSecond;
                 let measuredFps = Math.min(120, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
@@ -120,7 +113,6 @@ const PerformanceTab = React.memo(() => {
                     setAvgFps(Math.round(sum / next.length));
                     return next;
                 });
-                // Trigger log if noticeable frame drop
                 if (measuredFps < 50) {
                     const durationStr = (1000 / measuredFps).toFixed(1);
                     logPerformanceEvent({
@@ -153,7 +145,6 @@ const PerformanceTab = React.memo(() => {
                 cancelAnimationFrame(rafIdRef.current);
         };
     }, [isRecording]);
-    // Filtered Events
     const filteredEvents = useMemo(() => {
         return events.filter(e => {
             const matchSearch = !search ||
@@ -174,7 +165,6 @@ const PerformanceTab = React.memo(() => {
             return matchSearch && matchFilter;
         });
     }, [events, search, filterCategory]);
-    // Overall Performance Score
     const performanceScore = useMemo(() => {
         if (avgFps >= 58) {
             return {
@@ -199,7 +189,6 @@ const PerformanceTab = React.memo(() => {
             bg: AppColors.errorCardBg,
         };
     }, [avgFps, t]);
-    // ─── Dynamic Runtime Environment & Engine Diagnostics ──────────────────────
     const runtimeDiagnostics = useMemo(() => {
         const raw = getRuntimeDiagnostics();
         const engineNameMap = {
@@ -229,7 +218,6 @@ const PerformanceTab = React.memo(() => {
             totalAllocMb: raw.totalAllocMb,
         };
     }, [t]);
-    // ─── Dynamic 16.67ms Frame Budget Utilization ─────────────────────────────
     const frameBudgetStats = useMemo(() => {
         const frameDuration = avgFps > 0 ? 1000 / avgFps : 16.67;
         const jsTime = Number(Math.max(1.0, Math.min(frameDuration * 0.45, 2.0 + jsLagMs)).toFixed(1));
@@ -246,7 +234,6 @@ const PerformanceTab = React.memo(() => {
             headroomPercent,
         };
     }, [avgFps, jsLagMs]);
-    // ─── Dynamic SVG FPS Area & Trend Curve Data ────────────────────────────
     const [selectedFpsPointIdx, setSelectedFpsPointIdx] = useState(null);
     const svgGraphWidth = 320;
     const svgGraphHeight = 64;
@@ -329,7 +316,7 @@ const PerformanceTab = React.memo(() => {
         ? fpsGraphData.coords[selectedFpsPointIdx]
         : null;
     return (<View style={perfStyles.container}>
-      {/* Search & Live Control Header */}
+      
       <View style={perfStyles.headerBar}>
         <View style={perfStyles.searchBox}>
           <SearchIcon color={AppColors.grayTextWeak} size={15}/>
@@ -339,7 +326,7 @@ const PerformanceTab = React.memo(() => {
             </TouchableScale>) : null}
         </View>
 
-        {/* Live FPS Telemetry Recorder Toggle */}
+        
         <TouchableScale onPress={() => setIsRecording(prev => !prev)} style={[
             perfStyles.recordToggleBtn,
             isRecording
@@ -369,7 +356,7 @@ const PerformanceTab = React.memo(() => {
         </TouchableScale>
       </View>
 
-      {/* Filter Category Tabs Carousel */}
+      
       <View style={perfStyles.categoryScrollWrapper}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>
           {[
@@ -423,9 +410,9 @@ const PerformanceTab = React.memo(() => {
         </ScrollView>
       </View>
 
-      {/* Main Content Scroll View */}
+      
       <ScrollView style={perfStyles.scrollBody} contentContainerStyle={perfStyles.scrollContent} showsVerticalScrollIndicator={false}>
-        {/* ── 1. REAL-TIME FPS SCORECARD & SMOOTH AREA GRAPH ── */}
+        
         <View style={perfStyles.heroCard}>
           <View style={perfStyles.heroHeaderRow}>
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -440,7 +427,7 @@ const PerformanceTab = React.memo(() => {
               </View>
             </View>
 
-            {/* Health Grade Score Pill */}
+            
             <View style={[
             perfStyles.scorePill,
             { backgroundColor: performanceScore.bg },
@@ -454,7 +441,7 @@ const PerformanceTab = React.memo(() => {
             </View>
           </View>
 
-          {/* Primary Gauge Counter */}
+          
           <View style={perfStyles.primaryFpsRow}>
             <View style={perfStyles.fpsBigNumberBox}>
               <Text style={[
@@ -515,7 +502,7 @@ const PerformanceTab = React.memo(() => {
             </View>
           </View>
 
-          {/* Interactive Scrub Tooltip */}
+          
           {activeScrubPoint && (<View style={perfStyles.graphScrubTooltip}>
               <Text style={perfStyles.graphScrubTooltipText}>
                 {activeScrubPoint.val} FPS •{' '}
@@ -524,7 +511,7 @@ const PerformanceTab = React.memo(() => {
               </Text>
             </View>)}
 
-          {/* Real-Time SVG Smooth Area & Trend Wave Graph */}
+          
           <View style={perfStyles.svgGraphContainer}>
             <Svg width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`} preserveAspectRatio="none">
               <Defs>
@@ -542,23 +529,23 @@ const PerformanceTab = React.memo(() => {
                 </LinearGradient>
               </Defs>
 
-              {/* 60 FPS Target Baseline */}
+              
               <Line x1="0" y1="7" x2={svgGraphWidth} y2="7" stroke={AppColors.emerald500} strokeWidth="1" strokeDasharray="4,4" opacity="0.4"/>
 
-              {/* 30 FPS Warning Baseline */}
+              
               <Line x1="0" y1={svgGraphHeight / 2} x2={svgGraphWidth} y2={svgGraphHeight / 2} stroke={AppColors.amber500} strokeWidth="0.8" strokeDasharray="3,3" opacity="0.3"/>
 
-              {/* Shaded Area Under Curve */}
+              
               {fpsGraphData.areaPath ? (<Path d={fpsGraphData.areaPath} fill="url(#fpsAreaGradient)"/>) : null}
 
-              {/* Bezier Trend Line */}
+              
               {fpsGraphData.linePath ? (<Path d={fpsGraphData.linePath} fill="none" stroke={avgFps >= 55
                 ? AppColors.emerald600
                 : avgFps >= 40
                     ? AppColors.amber600
                     : AppColors.errorColor} strokeWidth="2.2"/>) : null}
 
-              {/* Sample Nodes */}
+              
               {fpsGraphData.coords.map((c, idx) => {
             const isSelected = selectedFpsPointIdx === idx;
             const isDip = c.val < 50;
@@ -573,7 +560,7 @@ const PerformanceTab = React.memo(() => {
         })}
             </Svg>
 
-            {/* Invisible Touch Column Targets for Interactive Inspection */}
+            
             <View style={perfStyles.svgTouchOverlay}>
               {fpsGraphData.coords.map((_, idx) => (<TouchableOpacity key={idx} style={perfStyles.svgTouchCol} activeOpacity={0.7} onPress={() => setSelectedFpsPointIdx(selectedFpsPointIdx === idx ? null : idx)}/>))}
             </View>
@@ -589,7 +576,7 @@ const PerformanceTab = React.memo(() => {
           </View>
         </View>
 
-        {/* ── 1.5 NATIVE HARDWARE HEALTH & SYSTEM TELEMETRY CARD ── */}
+        
         <View style={perfStyles.budgetCard}>
           <View style={perfStyles.budgetHeader}>
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -646,7 +633,7 @@ const PerformanceTab = React.memo(() => {
           </View>
         </View>
 
-        {/* ── 2. FRAME LATENCY DISTRIBUTION HISTOGRAM CARD ── */}
+        
         <View style={perfStyles.budgetCard}>
           <View style={perfStyles.budgetHeader}>
             <View>
@@ -693,7 +680,7 @@ const PerformanceTab = React.memo(() => {
           </View>
         </View>
 
-        {/* ── 3. FRAME BUDGET BREAKDOWN CARD ── */}
+        
         <View style={perfStyles.budgetCard}>
           <View style={perfStyles.budgetHeader}>
             <Text style={perfStyles.budgetTitle}>{t('performance.budgetUsage')}</Text>
@@ -705,7 +692,7 @@ const PerformanceTab = React.memo(() => {
             </Text>
           </View>
 
-          {/* Multi-colored segmented frame budget bar */}
+          
           <View style={perfStyles.budgetBarContainer}>
             <View style={[
             perfStyles.budgetBarSegment,
@@ -753,7 +740,7 @@ const PerformanceTab = React.memo(() => {
           </View>
         </View>
 
-        {/* ── 3. RUNTIME ENGINE & MEMORY SUMMARY ── */}
+        
         <View style={perfStyles.engineSummaryGrid}>
           <View style={perfStyles.engineSummaryCard}>
             <Text style={perfStyles.engineSummaryLabel}>{t('performance.jsEngine')}</Text>
@@ -774,7 +761,7 @@ const PerformanceTab = React.memo(() => {
           </View>
         </View>
 
-        {/* ── 4. PERFORMANCE LOGS & DETAILED EVENTS ── */}
+        
         <View style={perfStyles.logsHeaderRow}>
           <Text style={perfStyles.logsSectionHeading}>
             {t('performance.recordedEvents')} ({filteredEvents.length})
@@ -813,7 +800,7 @@ const PerformanceTab = React.memo(() => {
                       </Text>
                     </View>
 
-                    {/* Dropped Frames Badge */}
+                    
                     <View style={[
                     perfStyles.droppedBadge,
                     (event.droppedFrames ?? Math.max(0, 60 - event.fps)) > 0
@@ -832,7 +819,7 @@ const PerformanceTab = React.memo(() => {
                       </Text>
                     </View>
 
-                    {/* Bottleneck Thread Tag */}
+                    
                     {event.bottleneckThread && (<View style={[perfStyles.bottleneckTag, { flexDirection: 'row', alignItems: 'center', gap: 3 }]}>
                         {event.bottleneckThread === 'JS Thread' && (<BoltIcon size={10} color={AppColors.warningIconGold}/>)}
                         <Text style={perfStyles.bottleneckTagText}>
@@ -851,7 +838,7 @@ const PerformanceTab = React.memo(() => {
                   </View>
                 </View>
 
-                {/* Event Label & Meta */}
+                
                 <View style={{ marginTop: 4 }}>
                   <HighlightText text={event.label} search={search} style={perfStyles.eventLabel} highlightStyle={perfStyles.searchHighlight}/>
                   <View style={perfStyles.eventMetaRow}>
@@ -876,7 +863,7 @@ const PerformanceTab = React.memo(() => {
                   </View>
                 </View>
 
-                {/* Visual Frame Time Budget Bar */}
+                
                 <View style={perfStyles.frameBarTrack}>
                   <View style={[
                     perfStyles.frameBarFill,
@@ -889,9 +876,9 @@ const PerformanceTab = React.memo(() => {
 
                 <HighlightText text={event.detail} search={search} style={perfStyles.eventDetail} highlightStyle={perfStyles.searchHighlight}/>
 
-                {/* ── EXPANDABLE IN-DEPTH METRICS ACCORDION ── */}
+                
                 {isExpanded && (<View style={perfStyles.expandedDetailBox}>
-                    {/* Screen / Component Context */}
+                    
                     {(event.screenName || event.source) && (<View style={perfStyles.sourceRow}>
                         <Text style={perfStyles.sourceTag}>{t('performance.screenContext')}</Text>
                         <Text style={perfStyles.sourceText} numberOfLines={1}>
@@ -899,7 +886,7 @@ const PerformanceTab = React.memo(() => {
                         </Text>
                       </View>)}
 
-                    {/* Frame Metrics Grid */}
+                    
                     <View style={perfStyles.fpsMetricsGrid}>
                       <View style={perfStyles.fpsMetricItem}>
                         <Text style={perfStyles.fpsMetricLabel}>{t('performance.target60Fps', { fps: event.fps })}</Text>
@@ -930,7 +917,7 @@ const PerformanceTab = React.memo(() => {
                       </View>
                     </View>
 
-                    {/* Thread Timing Breakdown */}
+                    
                     {event.breakdown && (<View style={perfStyles.breakdownGrid}>
                         <View style={perfStyles.breakdownCol}>
                           <Text style={perfStyles.breakdownLabel}>{t('performance.jsThread')}</Text>
@@ -961,7 +948,7 @@ const PerformanceTab = React.memo(() => {
                           </View>)}
                       </View>)}
 
-                    {/* Actionable Optimization Tip */}
+                    
                     {event.advice && (<View style={perfStyles.adviceCard}>
                         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                           <LightbulbIcon color={AppColors.purpleShade700} size={12}/>

package/dist/esm/components/Inspector/ReduxDetail.js

@@ -62,22 +62,16 @@ const getOriginBadge = (originType) => {
 const ReduxDetail = React.memo(() => {
     const { t } = useTranslation();
     const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, } = useInspector();
-    // Search filter within details
     const [detailSearch, setDetailSearch] = useState('');
-    // Sub-tabs for Slice & Action
     const [sliceTab, setSliceTab] = useState('live');
     const [actionTab, setActionTab] = useState('payload');
     const [viewMode, setViewMode] = useState('pretty');
-    // Selected Action inside Timeline
     const [expandedActionId, setExpandedActionId] = useState(null);
-    // Persistence data for active slice
     const [isPersisted, setIsPersisted] = useState(false);
     const [persistedData, setPersistedData] = useState(null);
-    // Fetch Action History
     const allActionHistory = useMemo(() => {
         return getActionHistory();
     }, [reduxLastActionMap]);
-    // Slices-filtered actions
     const sliceActions = useMemo(() => {
         if (!selectedReduxSlice)
             return allActionHistory;
@@ -87,7 +81,6 @@ const ReduxDetail = React.memo(() => {
             return action.affectedSlices.includes(selectedReduxSlice);
         });
     }, [allActionHistory, selectedReduxSlice]);
-    // Filtered slice actions by search query in timeline tab
     const filteredTimelineActions = useMemo(() => {
         if (!detailSearch.trim())
             return sliceActions;
@@ -138,7 +131,6 @@ const ReduxDetail = React.memo(() => {
                 }
             }
             catch (e) {
-                // silent catch
             }
             setIsPersisted(false);
             setPersistedData(null);
@@ -181,9 +173,6 @@ const ReduxDetail = React.memo(() => {
             },
         ]);
     };
-    // ══════════════════════════════════════════════════════════════════════════
-    // ── 1. RENDER SLICE DETAIL VIEW ───────────────────────────────────────────
-    // ══════════════════════════════════════════════════════════════════════════
     if (selectedReduxSlice != null) {
         const sliceData = reduxState?.[selectedReduxSlice];
         const fieldsCount = sliceData && typeof sliceData === 'object'
@@ -217,7 +206,7 @@ const ReduxDetail = React.memo(() => {
             },
         ];
         return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
-        {/* Info Header Bar */}
+        
         <View style={reduxDetailStyles.infoBar}>
           <View style={reduxDetailStyles.infoTopRow}>
             <View style={{
@@ -257,11 +246,11 @@ const ReduxDetail = React.memo(() => {
                 </View>)}
             </View>
 
-            {/* Copy Button */}
+            
             <CopyButton value={() => (sliceTab === 'live' ? sliceData : persistedData)} label={t('redux.sliceJson', 'Slice JSON')}/>
           </View>
 
-          {/* Sub Stats Row */}
+          
           <View style={reduxDetailStyles.subStatsRow}>
             <View style={[
                 reduxDetailStyles.statPill,
@@ -350,11 +339,11 @@ const ReduxDetail = React.memo(() => {
               </View>)}
           </View>
 
-          {/* Sub-Tabs */}
+          
           <SegmentedTabs tabs={sliceTabs} activeKey={sliceTab} onChange={key => setSliceTab(key)} style={{ marginTop: 10 }}/>
         </View>
 
-        {/* Search Bar within slice (for Live, Timeline, Persisted) */}
+        
         {sliceTab !== 'metadata' && (<View style={reduxDetailStyles.searchContainer}>
             <SearchIcon color={AppColors.grayTextWeak} size={14}/>
             <TextInput placeholder={sliceTab === 'timeline'
@@ -365,7 +354,7 @@ const ReduxDetail = React.memo(() => {
               </Pressable>)}
           </View>)}
 
-        {/* Content Body */}
+        
         {sliceTab === 'timeline' ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
             {filteredTimelineActions.length === 0 ? (<View style={reduxDetailStyles.emptyBox}>
                 <TimelineIcon color={AppColors.grayTextWeak} size={28}/>
@@ -396,7 +385,7 @@ const ReduxDetail = React.memo(() => {
                               #{action.id}
                             </Text>
                           </View>
-                          {/* Origin Badge */}
+                          
                           <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -430,7 +419,7 @@ const ReduxDetail = React.memo(() => {
                         </View>
                       </View>
 
-                      {/* Trigger caller preview row */}
+                      
                       {action.callerFile && (<View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
@@ -488,9 +477,9 @@ const ReduxDetail = React.memo(() => {
                           </Pressable>
                         </View>)}
 
-                      {/* Expanded Payload, Diff Viewer & Call Stack */}
+                      
                       {isExpanded ? (<View style={reduxDetailStyles.expandedContent}>
-                          {/* Call Stack Trace Box */}
+                          
                           {action.stack ? (<View style={{ marginBottom: 12 }}>
                               <Text style={reduxDetailStyles.expandedSectionTitle}>
                                 {t('redux.callStack', 'Call Stack Trace')}:
@@ -656,16 +645,11 @@ const ReduxDetail = React.memo(() => {
                   State exists purely in active JavaScript memory.
                 </Text>
               </View>)}
-          </View>) : (
-            /* Live State JsonViewer: Direct flex: 1 with fullHeight to prevent nested scroll conflicts */
-            <View style={{ flex: 1, padding: 10 }}>
+          </View>) : (<View style={{ flex: 1, padding: 10 }}>
             <JsonViewer data={sliceData} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode} fullHeight={true} wrap={true}/>
           </View>)}
       </View>);
     }
-    // ══════════════════════════════════════════════════════════════════════════
-    // ── 2. RENDER ACTION DETAIL VIEW (when an action is selected directly) ────
-    // ══════════════════════════════════════════════════════════════════════════
     if (selectedReduxAction != null) {
         const originMeta = getOriginBadge(selectedReduxAction.originType);
         const callerBasename = selectedReduxAction.callerFile
@@ -694,7 +678,7 @@ const ReduxDetail = React.memo(() => {
             },
         ];
         return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
-        {/* Top Info Bar */}
+        
         <View style={reduxDetailStyles.infoBar}>
           <View style={reduxDetailStyles.infoTopRow}>
             <View style={{
@@ -710,7 +694,7 @@ const ReduxDetail = React.memo(() => {
                   #{selectedReduxAction.id}
                 </Text>
               </View>
-              {/* Origin Badge */}
+              
               <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -743,11 +727,11 @@ const ReduxDetail = React.memo(() => {
                 </View>)}
             </View>
 
-            {/* Copy Button */}
+            
             <CopyButton value={() => selectedReduxAction} label="Copy Action"/>
           </View>
 
-          {/* Sub Stats Row */}
+          
           <View style={reduxDetailStyles.subStatsRow}>
             {selectedReduxAction.affectedSlices &&
                 selectedReduxAction.affectedSlices.length > 0 && (<View style={[
@@ -793,7 +777,7 @@ const ReduxDetail = React.memo(() => {
             </View>
           </View>
 
-          {/* Triggered from caller preview row */}
+          
           {selectedReduxAction.callerFile && (<View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -850,11 +834,11 @@ const ReduxDetail = React.memo(() => {
               </Pressable>
             </View>)}
 
-          {/* Sub-Tabs */}
+          
           <SegmentedTabs tabs={actionTabs} activeKey={actionTab} onChange={key => setActionTab(key)} style={{ marginTop: 10 }}/>
         </View>
 
-        {/* Content Body */}
+        
         {actionTab === 'payload' ? (<View style={{ flex: 1, padding: 10 }}>
             {selectedReduxAction.payload !== undefined ? (<JsonViewer data={selectedReduxAction.payload} search={detailSearch} forceOpen={true} fullHeight={true} wrap={true}/>) : (<View style={reduxDetailStyles.emptyBox}>
                 <Text style={reduxDetailStyles.emptyBoxText}>