react-native-inapp-inspector 2.3.5 → 2.3.6

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}>

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

@@ -60,9 +60,7 @@ const getOriginBadge = (originType) => {
 const ReduxTab = React.memo(() => {
     const { t } = useTranslation();
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = useInspector();
-    // Sort mode: 'latest' (newest updated first) vs 'alpha' (A-Z)
     const [sortMode, setSortMode] = useState('latest');
-    // Pause / Live Auto-Refresh State
     const [isReduxPaused, setIsReduxPaused] = useState(!getReduxAutoRefresh());
     const handleTogglePause = useCallback(() => {
         setIsReduxPaused(prev => {
@@ -71,15 +69,12 @@ const ReduxTab = React.memo(() => {
             return next;
         });
     }, []);
-    // Total state size calculation
     const totalStateSize = useMemo(() => {
         return getSize(reduxState);
     }, [reduxState]);
-    // Fetch full action history for timeline counts
     const allActions = useMemo(() => {
         return getActionHistory();
     }, [reduxLastActionMap]);
-    // Compute slice items with exact timestamps & rich details
     const sliceItems = useMemo(() => {
         if (!reduxState || typeof reduxState !== 'object')
             return [];
@@ -102,7 +97,6 @@ const ReduxTab = React.memo(() => {
                 keysCount = 1;
                 typeLabel = typeof sliceVal;
             }
-            // Determine state status
             let status = 'live';
             let statusMessage;
             if (isObject) {
@@ -127,7 +121,6 @@ const ReduxTab = React.memo(() => {
             }
             const lastActionRaw = reduxLastActionMap[key];
             const updatedAt = lastActionRaw?.updatedAt || 0;
-            // Count actions affecting this slice in timeline
             const timelineCount = allActions.filter(action => {
                 if (!action.affectedSlices || action.affectedSlices.length === 0)
                     return true;
@@ -173,7 +166,6 @@ const ReduxTab = React.memo(() => {
             };
         });
     }, [reduxState, reduxLastActionMap, allActions]);
-    // Filter & Sort slices: by default, the most recently updated item is at the FIRST position
     const filteredSlices = useMemo(() => {
         let list = sliceItems;
         if (reduxSearch && reduxSearch.trim().length > 0) {
@@ -194,7 +186,6 @@ const ReduxTab = React.memo(() => {
         }
         return [...list].sort((a, b) => {
             if (sortMode === 'latest') {
-                // Most recently updated item first
                 if (b.updatedAt !== a.updatedAt) {
                     return b.updatedAt - a.updatedAt;
                 }
@@ -220,7 +211,7 @@ const ReduxTab = React.memo(() => {
                 reduxTabStyles.card,
                 isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
             ]}>
-            {/* Top row: Badge + Slice Name + Status + Timestamp + Chevron */}
+            
             <View style={reduxTabStyles.cardHeader}>
               <View style={reduxTabStyles.sliceBadge}>
                 <Text style={reduxTabStyles.sliceBadgeText}>SLICE</Text>
@@ -228,7 +219,7 @@ const ReduxTab = React.memo(() => {
 
               <HighlightText text={item.name} search={reduxSearch} style={reduxTabStyles.sliceName} highlightStyle={reduxTabStyles.highlight}/>
 
-              {/* Status Badge */}
+              
               {item.status === 'loading' ? (<View style={reduxTabStyles.loadingPill}>
                   <LoadingSpinnerIcon color={AppColors.amber800Warm} size={10}/>
                   <Text style={reduxTabStyles.loadingPillText}>Loading</Text>
@@ -252,7 +243,7 @@ const ReduxTab = React.memo(() => {
               <ForwardChevronIcon color={AppColors.grayTextWeak} size={13}/>
             </View>
 
-            {/* Middle row: Stats pills */}
+            
             <View style={reduxTabStyles.statsRow}>
               <View style={reduxTabStyles.pill}>
                 <LayersIcon color={AppColors.grayTextWeak} size={11}/>
@@ -268,13 +259,13 @@ const ReduxTab = React.memo(() => {
                 </View>)}
             </View>
 
-            {/* Bottom row: Last Dispatched Action with Origin & Trigger Line */}
+            
             {item.lastAction && (<View style={reduxTabStyles.lastActionRow}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
                   <BoltIcon color={AppColors.brandPurple} size={12}/>
                   <Text style={reduxTabStyles.lastActionLabel}>{t('redux.last', 'Last')}:</Text>
 
-                  {/* Origin Badge */}
+                  
                   {item.lastAction.originType && (() => {
                     const origin = getOriginBadge(item.lastAction.originType);
                     return (<View style={{
@@ -302,7 +293,7 @@ const ReduxTab = React.memo(() => {
 
                   <HighlightText text={item.lastAction.type} search={reduxSearch} style={reduxTabStyles.lastActionValue} highlightStyle={reduxTabStyles.highlight} numberOfLines={1}/>
 
-                  {/* Triggered from file preview */}
+                  
                   {item.lastAction.callerFile && (<Pressable onPress={() => openInVSCode(item.lastAction.callerFile, item.lastAction.callerLine, item.lastAction.callerCol)} hitSlop={6} style={{
                         flexDirection: 'row',
                         alignItems: 'center',
@@ -344,7 +335,7 @@ const ReduxTab = React.memo(() => {
       </View>);
     }
     return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
-      {/* ─── Top Stats Overview Card ─── */}
+      
       <View style={reduxTabStyles.overviewCard}>
         <View style={reduxTabStyles.statCol}>
           <Text style={reduxTabStyles.statHeading}>ACTIVE SLICES</Text>
@@ -390,7 +381,7 @@ const ReduxTab = React.memo(() => {
         </View>
       </View>
 
-      {/* ─── Search & Sort Bar ─── */}
+      
       <View style={reduxTabStyles.toolbarContainer}>
         <View style={reduxTabStyles.searchRow}>
           <View style={styles.searchContainer}>
@@ -417,7 +408,7 @@ const ReduxTab = React.memo(() => {
               </View>)}
           </View>
 
-          {/* Pause / Resume Live Updates Button */}
+          
           <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={isReduxPaused
             ? 'Resume live Redux updates'
             : 'Pause live Redux updates'} accessibilityHint="Toggles automatic recording of Redux state updates" style={[
@@ -432,7 +423,7 @@ const ReduxTab = React.memo(() => {
             : AppColors.grayTextStrong} size={16}/>
           </TouchableOpacity>
 
-          {/* Sort Button */}
+          
           <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={`Sort order: ${sortMode === 'latest'
             ? 'Recently updated first'
             : 'Alphabetical A to Z'}`} accessibilityHint="Switches sorting between recently updated and alphabetical" style={[
@@ -461,7 +452,7 @@ const ReduxTab = React.memo(() => {
         </View>
       </View>
 
-      {/* ─── FlatList of Slices ─── */}
+      
       <FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },