react-native-inapp-inspector 2.3.5 → 2.3.7

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

@@ -52,7 +52,6 @@ const performanceTracker_1 = require("../../customHooks/performanceTracker");
 const NativeInspector_1 = require("../../native/NativeInspector");
 const PerformanceTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
-    // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
     const [isRecording, setIsRecording] = (0, react_1.useState)(true);
     const [currentFps, setCurrentFps] = (0, react_1.useState)(60);
     const [minFps, setMinFps] = (0, react_1.useState)(57);
@@ -61,7 +60,6 @@ const PerformanceTab = react_1.default.memo(() => {
     const [totalFrames, setTotalFrames] = (0, react_1.useState)(4820);
     const [jankyFrameCount, setJankyFrameCount] = (0, react_1.useState)(4);
     const [jsLagMs, setJsLagMs] = (0, react_1.useState)(1.2);
-    // Expanded Event Card IDs
     const [expandedEventIds, setExpandedEventIds] = (0, react_1.useState)({
         'perf-1': true,
     });
@@ -71,11 +69,9 @@ const PerformanceTab = react_1.default.memo(() => {
             [id]: !prev[id],
         }));
     };
-    // FPS history for sparkline
     const [fpsHistory, setFpsHistory] = (0, react_1.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] = (0, react_1.useState)(() => (0, performanceTracker_1.getPerformanceEvents)());
     const [filterCategory, setFilterCategory] = (0, react_1.useState)('ALL');
     const [search, setSearch] = (0, react_1.useState)('');
@@ -85,7 +81,6 @@ const PerformanceTab = react_1.default.memo(() => {
         });
         return unsub;
     }, []);
-    // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = (0, react_1.useRef)(Date.now());
     const rafIdRef = (0, react_1.useRef)(null);
     const [systemMetrics, setSystemMetrics] = (0, react_1.useState)(null);
@@ -125,13 +120,11 @@ const PerformanceTab = react_1.default.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)));
@@ -158,7 +151,6 @@ const PerformanceTab = react_1.default.memo(() => {
                     setAvgFps(Math.round(sum / next.length));
                     return next;
                 });
-                // Trigger log if noticeable frame drop
                 if (measuredFps < 50) {
                     const durationStr = (1000 / measuredFps).toFixed(1);
                     (0, performanceTracker_1.logPerformanceEvent)({
@@ -191,7 +183,6 @@ const PerformanceTab = react_1.default.memo(() => {
                 cancelAnimationFrame(rafIdRef.current);
         };
     }, [isRecording]);
-    // Filtered Events
     const filteredEvents = (0, react_1.useMemo)(() => {
         return events.filter(e => {
             const matchSearch = !search ||
@@ -212,7 +203,6 @@ const PerformanceTab = react_1.default.memo(() => {
             return matchSearch && matchFilter;
         });
     }, [events, search, filterCategory]);
-    // Overall Performance Score
     const performanceScore = (0, react_1.useMemo)(() => {
         if (avgFps >= 58) {
             return {
@@ -237,7 +227,6 @@ const PerformanceTab = react_1.default.memo(() => {
             bg: AppColors_1.AppColors.errorCardBg,
         };
     }, [avgFps, t]);
-    // ─── Dynamic Runtime Environment & Engine Diagnostics ──────────────────────
     const runtimeDiagnostics = (0, react_1.useMemo)(() => {
         const raw = (0, helpers_1.getRuntimeDiagnostics)();
         const engineNameMap = {
@@ -267,7 +256,6 @@ const PerformanceTab = react_1.default.memo(() => {
             totalAllocMb: raw.totalAllocMb,
         };
     }, [t]);
-    // ─── Dynamic 16.67ms Frame Budget Utilization ─────────────────────────────
     const frameBudgetStats = (0, react_1.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));
@@ -284,7 +272,6 @@ const PerformanceTab = react_1.default.memo(() => {
             headroomPercent,
         };
     }, [avgFps, jsLagMs]);
-    // ─── Dynamic SVG FPS Area & Trend Curve Data ────────────────────────────
     const [selectedFpsPointIdx, setSelectedFpsPointIdx] = (0, react_1.useState)(null);
     const svgGraphWidth = 320;
     const svgGraphHeight = 64;
@@ -367,7 +354,7 @@ const PerformanceTab = react_1.default.memo(() => {
         ? fpsGraphData.coords[selectedFpsPointIdx]
         : null;
     return (<react_native_1.View style={perfStyles.container}>
-      {/* Search & Live Control Header */}
+      
       <react_native_1.View style={perfStyles.headerBar}>
         <react_native_1.View style={perfStyles.searchBox}>
           <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
@@ -377,7 +364,7 @@ const PerformanceTab = react_1.default.memo(() => {
             </TouchableScale_1.default>) : null}
         </react_native_1.View>
 
-        {/* Live FPS Telemetry Recorder Toggle */}
+        
         <TouchableScale_1.default onPress={() => setIsRecording(prev => !prev)} style={[
             perfStyles.recordToggleBtn,
             isRecording
@@ -407,7 +394,7 @@ const PerformanceTab = react_1.default.memo(() => {
         </TouchableScale_1.default>
       </react_native_1.View>
 
-      {/* Filter Category Tabs Carousel */}
+      
       <react_native_1.View style={perfStyles.categoryScrollWrapper}>
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>
           {[
@@ -461,9 +448,9 @@ const PerformanceTab = react_1.default.memo(() => {
         </react_native_1.ScrollView>
       </react_native_1.View>
 
-      {/* Main Content Scroll View */}
+      
       <react_native_1.ScrollView style={perfStyles.scrollBody} contentContainerStyle={perfStyles.scrollContent} showsVerticalScrollIndicator={false}>
-        {/* ── 1. REAL-TIME FPS SCORECARD & SMOOTH AREA GRAPH ── */}
+        
         <react_native_1.View style={perfStyles.heroCard}>
           <react_native_1.View style={perfStyles.heroHeaderRow}>
             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -478,7 +465,7 @@ const PerformanceTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
 
-            {/* Health Grade Score Pill */}
+            
             <react_native_1.View style={[
             perfStyles.scorePill,
             { backgroundColor: performanceScore.bg },
@@ -492,7 +479,7 @@ const PerformanceTab = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Primary Gauge Counter */}
+          
           <react_native_1.View style={perfStyles.primaryFpsRow}>
             <react_native_1.View style={perfStyles.fpsBigNumberBox}>
               <react_native_1.Text style={[
@@ -553,7 +540,7 @@ const PerformanceTab = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Interactive Scrub Tooltip */}
+          
           {activeScrubPoint && (<react_native_1.View style={perfStyles.graphScrubTooltip}>
               <react_native_1.Text style={perfStyles.graphScrubTooltipText}>
                 {activeScrubPoint.val} FPS •{' '}
@@ -562,7 +549,7 @@ const PerformanceTab = react_1.default.memo(() => {
               </react_native_1.Text>
             </react_native_1.View>)}
 
-          {/* Real-Time SVG Smooth Area & Trend Wave Graph */}
+          
           <react_native_1.View style={perfStyles.svgGraphContainer}>
             <react_native_svg_1.default width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`} preserveAspectRatio="none">
               <react_native_svg_1.Defs>
@@ -580,23 +567,23 @@ const PerformanceTab = react_1.default.memo(() => {
                 </react_native_svg_1.LinearGradient>
               </react_native_svg_1.Defs>
 
-              {/* 60 FPS Target Baseline */}
+              
               <react_native_svg_1.Line x1="0" y1="7" x2={svgGraphWidth} y2="7" stroke={AppColors_1.AppColors.emerald500} strokeWidth="1" strokeDasharray="4,4" opacity="0.4"/>
 
-              {/* 30 FPS Warning Baseline */}
+              
               <react_native_svg_1.Line x1="0" y1={svgGraphHeight / 2} x2={svgGraphWidth} y2={svgGraphHeight / 2} stroke={AppColors_1.AppColors.amber500} strokeWidth="0.8" strokeDasharray="3,3" opacity="0.3"/>
 
-              {/* Shaded Area Under Curve */}
+              
               {fpsGraphData.areaPath ? (<react_native_svg_1.Path d={fpsGraphData.areaPath} fill="url(#fpsAreaGradient)"/>) : null}
 
-              {/* Bezier Trend Line */}
+              
               {fpsGraphData.linePath ? (<react_native_svg_1.Path d={fpsGraphData.linePath} fill="none" stroke={avgFps >= 55
                 ? AppColors_1.AppColors.emerald600
                 : avgFps >= 40
                     ? AppColors_1.AppColors.amber600
                     : AppColors_1.AppColors.errorColor} strokeWidth="2.2"/>) : null}
 
-              {/* Sample Nodes */}
+              
               {fpsGraphData.coords.map((c, idx) => {
             const isSelected = selectedFpsPointIdx === idx;
             const isDip = c.val < 50;
@@ -611,7 +598,7 @@ const PerformanceTab = react_1.default.memo(() => {
         })}
             </react_native_svg_1.default>
 
-            {/* Invisible Touch Column Targets for Interactive Inspection */}
+            
             <react_native_1.View style={perfStyles.svgTouchOverlay}>
               {fpsGraphData.coords.map((_, idx) => (<react_native_1.TouchableOpacity key={idx} style={perfStyles.svgTouchCol} activeOpacity={0.7} onPress={() => setSelectedFpsPointIdx(selectedFpsPointIdx === idx ? null : idx)}/>))}
             </react_native_1.View>
@@ -627,7 +614,7 @@ const PerformanceTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* ── 1.5 NATIVE HARDWARE HEALTH & SYSTEM TELEMETRY CARD ── */}
+        
         <react_native_1.View style={perfStyles.budgetCard}>
           <react_native_1.View style={perfStyles.budgetHeader}>
             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -684,7 +671,7 @@ const PerformanceTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* ── 2. FRAME LATENCY DISTRIBUTION HISTOGRAM CARD ── */}
+        
         <react_native_1.View style={perfStyles.budgetCard}>
           <react_native_1.View style={perfStyles.budgetHeader}>
             <react_native_1.View>
@@ -731,7 +718,7 @@ const PerformanceTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* ── 3. FRAME BUDGET BREAKDOWN CARD ── */}
+        
         <react_native_1.View style={perfStyles.budgetCard}>
           <react_native_1.View style={perfStyles.budgetHeader}>
             <react_native_1.Text style={perfStyles.budgetTitle}>{t('performance.budgetUsage')}</react_native_1.Text>
@@ -743,7 +730,7 @@ const PerformanceTab = react_1.default.memo(() => {
             </react_native_1.Text>
           </react_native_1.View>
 
-          {/* Multi-colored segmented frame budget bar */}
+          
           <react_native_1.View style={perfStyles.budgetBarContainer}>
             <react_native_1.View style={[
             perfStyles.budgetBarSegment,
@@ -791,7 +778,7 @@ const PerformanceTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* ── 3. RUNTIME ENGINE & MEMORY SUMMARY ── */}
+        
         <react_native_1.View style={perfStyles.engineSummaryGrid}>
           <react_native_1.View style={perfStyles.engineSummaryCard}>
             <react_native_1.Text style={perfStyles.engineSummaryLabel}>{t('performance.jsEngine')}</react_native_1.Text>
@@ -812,7 +799,7 @@ const PerformanceTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* ── 4. PERFORMANCE LOGS & DETAILED EVENTS ── */}
+        
         <react_native_1.View style={perfStyles.logsHeaderRow}>
           <react_native_1.Text style={perfStyles.logsSectionHeading}>
             {t('performance.recordedEvents')} ({filteredEvents.length})
@@ -851,7 +838,7 @@ const PerformanceTab = react_1.default.memo(() => {
                       </react_native_1.Text>
                     </react_native_1.View>
 
-                    {/* Dropped Frames Badge */}
+                    
                     <react_native_1.View style={[
                     perfStyles.droppedBadge,
                     (event.droppedFrames ?? Math.max(0, 60 - event.fps)) > 0
@@ -870,7 +857,7 @@ const PerformanceTab = react_1.default.memo(() => {
                       </react_native_1.Text>
                     </react_native_1.View>
 
-                    {/* Bottleneck Thread Tag */}
+                    
                     {event.bottleneckThread && (<react_native_1.View style={[perfStyles.bottleneckTag, { flexDirection: 'row', alignItems: 'center', gap: 3 }]}>
                         {event.bottleneckThread === 'JS Thread' && (<NetworkIcons_1.BoltIcon size={10} color={AppColors_1.AppColors.warningIconGold}/>)}
                         <react_native_1.Text style={perfStyles.bottleneckTagText}>
@@ -889,7 +876,7 @@ const PerformanceTab = react_1.default.memo(() => {
                   </react_native_1.View>
                 </react_native_1.View>
 
-                {/* Event Label & Meta */}
+                
                 <react_native_1.View style={{ marginTop: 4 }}>
                   <HighlightText_1.default text={event.label} search={search} style={perfStyles.eventLabel} highlightStyle={perfStyles.searchHighlight}/>
                   <react_native_1.View style={perfStyles.eventMetaRow}>
@@ -914,7 +901,7 @@ const PerformanceTab = react_1.default.memo(() => {
                   </react_native_1.View>
                 </react_native_1.View>
 
-                {/* Visual Frame Time Budget Bar */}
+                
                 <react_native_1.View style={perfStyles.frameBarTrack}>
                   <react_native_1.View style={[
                     perfStyles.frameBarFill,
@@ -927,9 +914,9 @@ const PerformanceTab = react_1.default.memo(() => {
 
                 <HighlightText_1.default text={event.detail} search={search} style={perfStyles.eventDetail} highlightStyle={perfStyles.searchHighlight}/>
 
-                {/* ── EXPANDABLE IN-DEPTH METRICS ACCORDION ── */}
+                
                 {isExpanded && (<react_native_1.View style={perfStyles.expandedDetailBox}>
-                    {/* Screen / Component Context */}
+                    
                     {(event.screenName || event.source) && (<react_native_1.View style={perfStyles.sourceRow}>
                         <react_native_1.Text style={perfStyles.sourceTag}>{t('performance.screenContext')}</react_native_1.Text>
                         <react_native_1.Text style={perfStyles.sourceText} numberOfLines={1}>
@@ -937,7 +924,7 @@ const PerformanceTab = react_1.default.memo(() => {
                         </react_native_1.Text>
                       </react_native_1.View>)}
 
-                    {/* Frame Metrics Grid */}
+                    
                     <react_native_1.View style={perfStyles.fpsMetricsGrid}>
                       <react_native_1.View style={perfStyles.fpsMetricItem}>
                         <react_native_1.Text style={perfStyles.fpsMetricLabel}>{t('performance.target60Fps', { fps: event.fps })}</react_native_1.Text>
@@ -968,7 +955,7 @@ const PerformanceTab = react_1.default.memo(() => {
                       </react_native_1.View>
                     </react_native_1.View>
 
-                    {/* Thread Timing Breakdown */}
+                    
                     {event.breakdown && (<react_native_1.View style={perfStyles.breakdownGrid}>
                         <react_native_1.View style={perfStyles.breakdownCol}>
                           <react_native_1.Text style={perfStyles.breakdownLabel}>{t('performance.jsThread')}</react_native_1.Text>
@@ -999,7 +986,7 @@ const PerformanceTab = react_1.default.memo(() => {
                           </react_native_1.View>)}
                       </react_native_1.View>)}
 
-                    {/* Actionable Optimization Tip */}
+                    
                     {event.advice && (<react_native_1.View style={perfStyles.adviceCard}>
                         <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                           <NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.purpleShade700} size={12}/>

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

@@ -100,22 +100,16 @@ const getOriginBadge = (originType) => {
 const ReduxDetail = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, } = (0, InspectorContext_1.useInspector)();
-    // Search filter within details
     const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
-    // Sub-tabs for Slice & Action
     const [sliceTab, setSliceTab] = (0, react_1.useState)('live');
     const [actionTab, setActionTab] = (0, react_1.useState)('payload');
     const [viewMode, setViewMode] = (0, react_1.useState)('pretty');
-    // Selected Action inside Timeline
     const [expandedActionId, setExpandedActionId] = (0, react_1.useState)(null);
-    // Persistence data for active slice
     const [isPersisted, setIsPersisted] = (0, react_1.useState)(false);
     const [persistedData, setPersistedData] = (0, react_1.useState)(null);
-    // Fetch Action History
     const allActionHistory = (0, react_1.useMemo)(() => {
         return (0, reduxLogger_1.getActionHistory)();
     }, [reduxLastActionMap]);
-    // Slices-filtered actions
     const sliceActions = (0, react_1.useMemo)(() => {
         if (!selectedReduxSlice)
             return allActionHistory;
@@ -125,7 +119,6 @@ const ReduxDetail = react_1.default.memo(() => {
             return action.affectedSlices.includes(selectedReduxSlice);
         });
     }, [allActionHistory, selectedReduxSlice]);
-    // Filtered slice actions by search query in timeline tab
     const filteredTimelineActions = (0, react_1.useMemo)(() => {
         if (!detailSearch.trim())
             return sliceActions;
@@ -176,7 +169,6 @@ const ReduxDetail = react_1.default.memo(() => {
                 }
             }
             catch (e) {
-                // silent catch
             }
             setIsPersisted(false);
             setPersistedData(null);
@@ -219,9 +211,6 @@ const ReduxDetail = react_1.default.memo(() => {
             },
         ]);
     };
-    // ══════════════════════════════════════════════════════════════════════════
-    // ── 1. RENDER SLICE DETAIL VIEW ───────────────────────────────────────────
-    // ══════════════════════════════════════════════════════════════════════════
     if (selectedReduxSlice != null) {
         const sliceData = reduxState?.[selectedReduxSlice];
         const fieldsCount = sliceData && typeof sliceData === 'object'
@@ -255,7 +244,7 @@ const ReduxDetail = react_1.default.memo(() => {
             },
         ];
         return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
-        {/* Info Header Bar */}
+        
         <react_native_1.View style={reduxDetailStyles.infoBar}>
           <react_native_1.View style={reduxDetailStyles.infoTopRow}>
             <react_native_1.View style={{
@@ -295,11 +284,11 @@ const ReduxDetail = react_1.default.memo(() => {
                 </react_native_1.View>)}
             </react_native_1.View>
 
-            {/* Copy Button */}
+            
             <CopyButton_1.default value={() => (sliceTab === 'live' ? sliceData : persistedData)} label={t('redux.sliceJson', 'Slice JSON')}/>
           </react_native_1.View>
 
-          {/* Sub Stats Row */}
+          
           <react_native_1.View style={reduxDetailStyles.subStatsRow}>
             <react_native_1.View style={[
                 reduxDetailStyles.statPill,
@@ -388,11 +377,11 @@ const ReduxDetail = react_1.default.memo(() => {
               </react_native_1.View>)}
           </react_native_1.View>
 
-          {/* Sub-Tabs */}
+          
           <SegmentedTabs_1.default tabs={sliceTabs} activeKey={sliceTab} onChange={key => setSliceTab(key)} style={{ marginTop: 10 }}/>
         </react_native_1.View>
 
-        {/* Search Bar within slice (for Live, Timeline, Persisted) */}
+        
         {sliceTab !== 'metadata' && (<react_native_1.View style={reduxDetailStyles.searchContainer}>
             <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
             <react_native_1.TextInput placeholder={sliceTab === 'timeline'
@@ -403,7 +392,7 @@ const ReduxDetail = react_1.default.memo(() => {
               </react_native_1.Pressable>)}
           </react_native_1.View>)}
 
-        {/* Content Body */}
+        
         {sliceTab === 'timeline' ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
             {filteredTimelineActions.length === 0 ? (<react_native_1.View style={reduxDetailStyles.emptyBox}>
                 <NetworkIcons_1.TimelineIcon color={AppColors_1.AppColors.grayTextWeak} size={28}/>
@@ -434,7 +423,7 @@ const ReduxDetail = react_1.default.memo(() => {
                               #{action.id}
                             </react_native_1.Text>
                           </react_native_1.View>
-                          {/* Origin Badge */}
+                          
                           <react_native_1.View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -468,7 +457,7 @@ const ReduxDetail = react_1.default.memo(() => {
                         </react_native_1.View>
                       </react_native_1.View>
 
-                      {/* Trigger caller preview row */}
+                      
                       {action.callerFile && (<react_native_1.View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
@@ -526,9 +515,9 @@ const ReduxDetail = react_1.default.memo(() => {
                           </react_native_1.Pressable>
                         </react_native_1.View>)}
 
-                      {/* Expanded Payload, Diff Viewer & Call Stack */}
+                      
                       {isExpanded ? (<react_native_1.View style={reduxDetailStyles.expandedContent}>
-                          {/* Call Stack Trace Box */}
+                          
                           {action.stack ? (<react_native_1.View style={{ marginBottom: 12 }}>
                               <react_native_1.Text style={reduxDetailStyles.expandedSectionTitle}>
                                 {t('redux.callStack', 'Call Stack Trace')}:
@@ -694,16 +683,11 @@ const ReduxDetail = react_1.default.memo(() => {
                   State exists purely in active JavaScript memory.
                 </react_native_1.Text>
               </react_native_1.View>)}
-          </react_native_1.View>) : (
-            /* Live State JsonViewer: Direct flex: 1 with fullHeight to prevent nested scroll conflicts */
-            <react_native_1.View style={{ flex: 1, padding: 10 }}>
+          </react_native_1.View>) : (<react_native_1.View style={{ flex: 1, padding: 10 }}>
             <JsonViewer_1.default data={sliceData} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode} fullHeight={true} wrap={true}/>
           </react_native_1.View>)}
       </react_native_1.View>);
     }
-    // ══════════════════════════════════════════════════════════════════════════
-    // ── 2. RENDER ACTION DETAIL VIEW (when an action is selected directly) ────
-    // ══════════════════════════════════════════════════════════════════════════
     if (selectedReduxAction != null) {
         const originMeta = getOriginBadge(selectedReduxAction.originType);
         const callerBasename = selectedReduxAction.callerFile
@@ -732,7 +716,7 @@ const ReduxDetail = react_1.default.memo(() => {
             },
         ];
         return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
-        {/* Top Info Bar */}
+        
         <react_native_1.View style={reduxDetailStyles.infoBar}>
           <react_native_1.View style={reduxDetailStyles.infoTopRow}>
             <react_native_1.View style={{
@@ -748,7 +732,7 @@ const ReduxDetail = react_1.default.memo(() => {
                   #{selectedReduxAction.id}
                 </react_native_1.Text>
               </react_native_1.View>
-              {/* Origin Badge */}
+              
               <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -781,11 +765,11 @@ const ReduxDetail = react_1.default.memo(() => {
                 </react_native_1.View>)}
             </react_native_1.View>
 
-            {/* Copy Button */}
+            
             <CopyButton_1.default value={() => selectedReduxAction} label="Copy Action"/>
           </react_native_1.View>
 
-          {/* Sub Stats Row */}
+          
           <react_native_1.View style={reduxDetailStyles.subStatsRow}>
             {selectedReduxAction.affectedSlices &&
                 selectedReduxAction.affectedSlices.length > 0 && (<react_native_1.View style={[
@@ -831,7 +815,7 @@ const ReduxDetail = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Triggered from caller preview row */}
+          
           {selectedReduxAction.callerFile && (<react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -888,11 +872,11 @@ const ReduxDetail = react_1.default.memo(() => {
               </react_native_1.Pressable>
             </react_native_1.View>)}
 
-          {/* Sub-Tabs */}
+          
           <SegmentedTabs_1.default tabs={actionTabs} activeKey={actionTab} onChange={key => setActionTab(key)} style={{ marginTop: 10 }}/>
         </react_native_1.View>
 
-        {/* Content Body */}
+        
         {actionTab === 'payload' ? (<react_native_1.View style={{ flex: 1, padding: 10 }}>
             {selectedReduxAction.payload !== undefined ? (<JsonViewer_1.default data={selectedReduxAction.payload} search={detailSearch} forceOpen={true} fullHeight={true} wrap={true}/>) : (<react_native_1.View style={reduxDetailStyles.emptyBox}>
                 <react_native_1.Text style={reduxDetailStyles.emptyBoxText}>