react-native-inapp-inspector 2.5.10 → 2.5.12

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

@@ -0,0 +1,652 @@
+import{useState as _,useMemo as Y}from"react";import{Dimensions as De,ScrollView as Te,Share as Re,StyleSheet as ve,Text as T,TouchableOpacity as P,View as S}from"react-native";import Pe,{Line as Se,Path as Le,Rect as $e}from"react-native-svg";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import L from"../TouchableScale";import{SpeedometerIcon as K,CpuChipIcon as X,PulseGraphIcon as H,FlameIcon as I,MemoryRamIcon as Ce,ShareIcon as He,CopyIcon as Ie,ResetIcon as Ae,CheckIcon as We}from"../NetworkIcons";import{usePerformanceMonitor as Je}from"../../helpers/performanceSampler";import{triggerNativeHaptic as B}from"../../native/NativeInspector";import{copyToClipboard as Ee}from"../../helpers";import{showToast as $}from"../../helpers/toast";import{useTranslation as Ge}from"../../i18n";const{width:Ne}=De.get("window"),A=Ne-56,D=110;export const PerformanceTab=()=>{const{t:C}=Ge(),r=Je(!0),[F,j]=_("overview"),[W,ke]=_("all"),[G,Ve]=_(null),Q=Y(()=>{const V=r.frameHistory;if(V.length<2)return"";const M=Math.max(40,...V),R=A/(V.length-1);let z="";return V.forEach((Z,E)=>{const O=E*R,U=D-Math.min(Z,M)/M*(D-16)-8;E===0?z+=`M ${O.toFixed(1)} ${U.toFixed(1)}`:z+=` L ${O.toFixed(1)} ${U.toFixed(1)}`}),z},[r.frameHistory]),q=Y(()=>W==="all"?r.recentJanks:r.recentJanks.filter(V=>V.severity===W),[r.recentJanks,W]),Fe=async()=>{try{B("light");const V={title:"React Native In-App Inspector Performance Diagnostic Report",algorithm:"New Relic Apdex & Datadog RUM Mobile Vitals",generatedAt:new Date().toISOString(),sessionDurationSeconds:r.sessionDurationSec,engine:r.memory.engine,displayRefreshRate:`${r.refreshRateHz}Hz`,healthScore:`${r.healthScore}/100 (${r.healthStatus})`,apdex:{score:r.apdexScore,status:r.apdexStatus,targetThresholdT:"16.6ms",satisfiedFrames:r.satisfiedCount,toleratingSlowFrames:r.toleratingCount,frustratedFrozenFrames:r.frustratedCount},percentiles:r.percentiles,datadogVitals:{slowFrames:r.toleratingCount,frozenFrames:r.frustratedCount,longTasksOver50ms:r.longTaskCount},distribution:r.distribution,metrics:{currentFps:r.fps,averageFps:r.avgFps,minimumFps:r.minFps,maximumFps:r.maxFps,currentFrameDurationMs:`${r.frameDurationMs}ms`,targetFrameDurationMs:"16.6ms",headroomRemainingMs:`${r.budgetHeadroomMs}ms`,jankFramesCount:r.jankCount,frozenFramesCount:r.frozenCount,jankRatio:`${r.jankPercent}%`,jsEventLoopLagMs:`${r.jsEventLoopLagMs}ms`,averageJsLagMs:`${r.avgJsLagMs}ms`,peakJsLagMs:`${r.peakJsLagMs}ms`},memory:{usedHeapMb:`${r.memory.usedHeapMb} MB`,totalAllocatedMb:`${r.memory.totalAllocMb} MB`,peakHeapMb:`${r.memory.peakHeapMb} MB`,gcCollections:r.memory.gcCount??"N/A",gcCpuTimeMs:r.memory.gcTimeMs??"N/A"},engineDetails:r.engineDetails,recentJankEvents:r.recentJanks},M=`## \u26A1 RN In-App Inspector Performance Report (Datadog & New Relic)
+- **Health Score**: ${r.healthScore}/100 (${r.healthStatus})
+- **Apdex Score**: ${r.apdexScore} (${r.apdexStatus}) [T=16.6ms]
+- **Percentiles**: p50: ${r.percentiles.p50Ms}ms | p90: ${r.percentiles.p90Ms}ms | p95: ${r.percentiles.p95Ms}ms | p99: ${r.percentiles.p99Ms}ms
+- **Vitals Breakdown**: ${r.satisfiedCount} Satisfied | ${r.toleratingCount} Slow | ${r.frustratedCount} Frozen | ${r.longTaskCount} Long Tasks
+- **FPS**: ${r.fps} current | ${r.avgFps} avg | ${r.minFps} min | ${r.maxFps} max
+- **JS Event Loop Lag**: ${r.jsEventLoopLagMs}ms (Avg: ${r.avgJsLagMs}ms, Peak: ${r.peakJsLagMs}ms)
+- **Memory**: ${r.memory.usedHeapMb} MB / ${r.memory.totalAllocMb} MB (Peak: ${r.memory.peakHeapMb} MB)
+- **Engine**: ${r.memory.engine}
+- **Session Duration**: ${r.sessionDurationSec}s`;await Re.share({title:C("perf.title","Performance & FPS Profiler Studio"),message:`${M}
+
+\`\`\`json
+${JSON.stringify(V,null,2)}
+\`\`\``})}catch{$(C("perf.shareUnavailable","Share unavailable"))}},Me=()=>{B("light");const V=`\u26A1 Performance: ${r.healthScore}/100 (${r.healthStatus}) | Apdex: ${r.apdexScore} | ${r.fps} FPS (Avg ${r.avgFps}) | p95: ${r.percentiles.p95Ms}ms | JS Lag: ${r.jsEventLoopLagMs}ms | Datadog Vitals: ${r.satisfiedCount}S / ${r.toleratingCount}T / ${r.frustratedCount}F / ${r.longTaskCount}LT`;Ee(V,C("perf.title","Performance Summary")),$(C("perf.summaryCopied","Performance summary copied to clipboard"))},v=r.healthStatus==="EXCELLENT"?t.green600:r.healthStatus==="GOOD"?t.sky600:r.healthStatus==="FAIR"?t.amber500:t.red500,J=r.fps>=55?t.green600:r.fps>=40?t.amber500:t.red500,N=r.jsEventLoopLagMs<=4?t.green600:r.jsEventLoopLagMs<=20?t.amber500:t.red500;return<Te style={e.perfContainer}contentContainerStyle={e.perfContent}showsVerticalScrollIndicator={!1}>
+      
+      <S style={e.topToolbar}>
+        <S style={e.engineBadgeRow}>
+          <S style={[e.enginePill,{backgroundColor:`${t.purple}14`,borderColor:`${t.purple}30`}]}>
+            <X size={12}color={t.purple}/>
+            <T style={[e.enginePillText,{color:t.purple}]}>
+              {r.memory.engine}
+            </T>
+          </S>
+          <S style={[e.enginePill,{backgroundColor:`${t.sky600}14`,borderColor:`${t.sky600}30`}]}>
+            <K size={12}color={t.sky600}/>
+            <T style={[e.enginePillText,{color:t.sky600}]}>
+              {C("perf.target60Fps","60 FPS Target")}
+            </T>
+          </S>
+        </S>
+
+        <S style={e.topActionsRow}>
+          <L onPress={()=>{B("light"),r.triggerGC(),$(C("perf.gcTriggered","Garbage collection triggered"))}}style={e.topActionBtn}accessibilityLabel={C("perf.triggerGc","GC")}>
+            <I size={12}color={t.amber500}/>
+            <T style={[e.topActionBtnText,{color:t.amber500}]}>
+              {C("perf.triggerGc","GC")}
+            </T>
+          </L>
+
+          <L onPress={()=>{B("light"),r.resetStats(),$(C("perf.statsReset","Performance counters reset"))}}style={e.topActionBtn}accessibilityLabel={C("perf.resetStats","Reset")}>
+            <Ae size={12}color={t.grayText}/>
+          </L>
+
+          <L onPress={Me}style={e.topActionBtn}accessibilityLabel={C("perf.copySummary","Copy")}>
+            <Ie size={12}color={t.grayTextStrong}/>
+          </L>
+
+          <L onPress={Fe}style={[e.topActionBtn,{backgroundColor:`${t.purple}14`,borderColor:`${t.purple}35`}]}accessibilityLabel={C("perf.exportReport","Export")}>
+            <He size={12}color={t.purple}/>
+            <T style={[e.topActionBtnText,{color:t.purple}]}>
+              {C("perf.exportReport","Export")}
+            </T>
+          </L>
+        </S>
+      </S>
+
+      
+      <S style={e.heroScoreCard}>
+        <S style={e.scoreRow}>
+          <S style={e.scoreCircleWrapper}>
+            <S style={[e.scoreCircle,{borderColor:v,backgroundColor:`${v}12`}]}>
+              <T style={[e.scoreNumber,{color:v}]}>
+                {r.healthScore}
+              </T>
+              <T style={e.scoreMax}>/100</T>
+            </S>
+          </S>
+
+          <S style={e.scoreDetails}>
+            <S style={e.scoreHeaderRow}>
+              <T style={[e.scoreStatusLabel,{color:v}]}>
+                {r.healthStatus==="EXCELLENT"?C("perf.statusExcellent","EXCELLENT"):r.healthStatus==="GOOD"?C("perf.statusGood","GOOD"):r.healthStatus==="FAIR"?C("perf.statusFair","FAIR"):C("perf.statusPoor","POOR")}
+              </T>
+              <S style={[e.liveDotPill,{backgroundColor:`${J}18`}]}>
+                <S style={[e.liveDot,{backgroundColor:J}]}/>
+                <T style={[e.liveDotText,{color:J}]}>
+                  {C("perf.liveApm","LIVE APM")}
+                </T>
+              </S>
+            </S>
+            <T style={e.scoreDesc}>
+              {r.healthScore>=88?C("perf.descExcellent","UI and JS threads are buttery smooth. Zero performance bottlenecks detected."):r.healthScore>=72?C("perf.descGood","Good performance with occasional frame drops during heavy operations."):C("perf.descPoor","Performance jank detected. JS event loop is being blocked by synchronous tasks.")}
+            </T>
+            <S style={e.sessionMetaRow}>
+              <T style={e.sessionDurationText}>
+                ⏱️ {C("perf.session","Session")}: {r.sessionDurationSec}s
+              </T>
+              <S style={[e.apdexBadge,{backgroundColor:`${v}15`}]}>
+                <T style={[e.apdexBadgeText,{color:v}]}>
+                  {C("perf.apdex","Apdex")}: {r.apdexScore} ({r.apdexStatus})
+                </T>
+              </S>
+            </S>
+          </S>
+        </S>
+
+        
+        <S style={e.metricGrid}>
+          
+          <S style={e.metricCard}>
+            <S style={e.metricCardHeader}>
+              <K size={13}color={J}/>
+              <T style={e.metricCardLabel}>{C("perf.uiFps","UI FPS")}</T>
+            </S>
+            <T style={[e.metricCardValue,{color:J}]}>
+              {r.fps}
+            </T>
+            <T style={e.metricCardSub}>
+              {C("perf.avg","Avg")}: {r.avgFps} • {C("perf.min","Min")}: {r.minFps}
+            </T>
+          </S>
+
+          
+          <S style={e.metricCard}>
+            <S style={e.metricCardHeader}>
+              <H size={13}color={t.sky600}/>
+              <T style={e.metricCardLabel}>{C("perf.frameTime","Frame Time")}</T>
+            </S>
+            <T style={[e.metricCardValue,{color:t.sky600}]}>
+              {r.frameDurationMs}
+              <T style={e.metricUnit}>ms</T>
+            </T>
+            <T style={e.metricCardSub}>
+              {C("perf.target","Target")}: 16.6ms (60fps)
+            </T>
+          </S>
+
+          
+          <S style={e.metricCard}>
+            <S style={e.metricCardHeader}>
+              <X size={13}color={N}/>
+              <T style={e.metricCardLabel}>{C("perf.jsThreadLag","JS Thread Lag")}</T>
+            </S>
+            <T style={[e.metricCardValue,{color:N}]}>
+              {r.jsEventLoopLagMs}
+              <T style={e.metricUnit}>ms</T>
+            </T>
+            <T style={e.metricCardSub}>
+              {C("perf.peak","Peak")}: {r.peakJsLagMs}ms
+            </T>
+          </S>
+
+          
+          <S style={e.metricCard}>
+            <S style={e.metricCardHeader}>
+              <Ce size={13}color={t.purple}/>
+              <T style={e.metricCardLabel}>{C("perf.jsHeap","JS Heap")}</T>
+            </S>
+            <T style={[e.metricCardValue,{color:t.purple}]}>
+              {r.memory.isAvailable?<>
+                  {r.memory.usedHeapMb}
+                  <T style={e.metricUnit}>MB</T>
+                </>:<T style={{fontSize:12,color:t.grayTextWeak}}>N/A</T>}
+            </T>
+            <T style={e.metricCardSub}numberOfLines={1}>
+              {r.memory.isAvailable?`${C("perf.peak","Peak")}: ${r.memory.peakHeapMb}MB`:C("perf.engineProtected","Engine Protected")}
+            </T>
+          </S>
+        </S>
+
+        
+        <S style={e.budgetBarContainer}>
+          <S style={e.budgetHeaderRow}>
+            <T style={e.budgetLabel}>{C("perf.vsyncBudgetConsumption","16.6ms Vsync Budget Consumption")}</T>
+            <T style={[e.budgetPercentText,{color:r.frameDurationMs<=16.6?t.green600:t.amber500}]}>
+              {r.frameDurationMs}ms ({r.budgetUsedPercent}%)
+            </T>
+          </S>
+          <S style={e.budgetTrack}>
+            <S style={[e.budgetFill,{width:`${Math.min(100,r.frameDurationMs/16.6*100)}%`,backgroundColor:r.frameDurationMs<=16.6?t.green600:r.frameDurationMs<=25?t.amber500:t.red500}]}/>
+          </S>
+          <S style={e.budgetFooterRow}>
+            <T style={e.budgetFooterText}>
+              {r.budgetHeadroomMs>0?`\u26A1 +${r.budgetHeadroomMs}ms ${C("perf.budgetHeadroomAvailable","budget headroom available")}`:`\u26A0\uFE0F ${C("perf.budgetExceededBy","Budget exceeded by")} ${(r.frameDurationMs-16.6).toFixed(1)}ms`}
+            </T>
+            <T style={e.budgetTargetText}>{C("perf.budgetTarget","Budget: 16.6ms")}</T>
+          </S>
+        </S>
+      </S>
+
+      
+      <Te horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.subTabsContent}style={e.subTabsScrollView}>
+        <P onPress={()=>{B("light"),j("overview")}}style={[e.subTabPill,F==="overview"&&e.subTabPillActive]}>
+          <K size={12}color={F==="overview"?t.purple:t.grayTextWeak}/>
+          <T style={[e.subTabPillText,F==="overview"&&e.subTabPillTextActive]}>
+            {C("perf.tabOverview","Overview & Vitals")}
+          </T>
+        </P>
+
+        <P onPress={()=>{B("light"),j("percentiles")}}style={[e.subTabPill,F==="percentiles"&&e.subTabPillActive]}>
+          <H size={12}color={F==="percentiles"?t.purple:t.grayTextWeak}/>
+          <T style={[e.subTabPillText,F==="percentiles"&&e.subTabPillTextActive]}>
+            {C("perf.tabPercentiles","Percentiles & Latency")}
+          </T>
+        </P>
+
+        <P onPress={()=>{B("light"),j("engine")}}style={[e.subTabPill,F==="engine"&&e.subTabPillActive]}>
+          <X size={12}color={F==="engine"?t.purple:t.grayTextWeak}/>
+          <T style={[e.subTabPillText,F==="engine"&&e.subTabPillTextActive]}>
+            {C("perf.tabEngine","Engine & Heap")}
+          </T>
+        </P>
+
+        <P onPress={()=>{B("light"),j("janks")}}style={[e.subTabPill,F==="janks"&&e.subTabPillActive]}>
+          <S style={[e.jankCountBadge,{backgroundColor:r.recentJanks.length>0?`${t.red500}25`:`${t.green600}25`}]}>
+            <T style={[e.jankCountBadgeText,{color:r.recentJanks.length>0?t.red500:t.green600}]}>
+              {r.recentJanks.length}
+            </T>
+          </S>
+          <T style={[e.subTabPillText,F==="janks"&&e.subTabPillTextActive]}>
+            {C("perf.tabJanks","Janks Log")}
+          </T>
+        </P>
+
+        <P onPress={()=>{B("light"),j("benchmark")}}style={[e.subTabPill,F==="benchmark"&&e.subTabPillActive]}>
+          <I size={12}color={F==="benchmark"?t.amber500:t.grayTextWeak}/>
+          <T style={[e.subTabPillText,F==="benchmark"&&e.subTabPillTextActive]}>
+            {C("perf.tabBenchmark","Stress Tests")}
+          </T>
+        </P>
+      </Te>
+
+      
+      {F==="overview"&&<>
+          
+          <S style={e.sectionCard}>
+            <S style={e.sectionHeader}>
+              <S style={e.sectionTitleRow}>
+                <H size={15}color={t.sky600}/>
+                <T style={e.sectionTitle}>{C("perf.distributionTitle","Frame Duration Distribution (Histogram)")}</T>
+              </S>
+              <T style={e.histogramTotalText}>
+                {r.distribution.totalSamples} {C("perf.framesSampled","frames sampled")}
+              </T>
+            </S>
+
+            <S style={e.histogramList}>
+              
+              <S style={e.histogramRow}>
+                <S style={e.histogramLabelCol}>
+                  <T style={e.histogramLabel}>≤16.6ms (60+ FPS)</T>
+                  <T style={e.histogramSub}>{C("perf.ultraSmooth","Ultra-smooth")}</T>
+                </S>
+                <S style={e.histogramTrack}>
+                  <S style={[e.histogramFill,{width:`${Math.min(100,r.distribution.ultraSmoothCount/Math.max(1,r.distribution.totalSamples)*100)}%`,backgroundColor:t.green600}]}/>
+                </S>
+                <T style={[e.histogramCountText,{color:t.green600}]}>
+                  {r.distribution.ultraSmoothCount} ({Math.round(r.distribution.ultraSmoothCount/Math.max(1,r.distribution.totalSamples)*100)}%)
+                </T>
+              </S>
+
+              
+              <S style={e.histogramRow}>
+                <S style={e.histogramLabelCol}>
+                  <T style={e.histogramLabel}>16.7–24ms (40–60 FPS)</T>
+                  <T style={e.histogramSub}>{C("perf.normalUiLayout","Normal UI Layout")}</T>
+                </S>
+                <S style={e.histogramTrack}>
+                  <S style={[e.histogramFill,{width:`${Math.min(100,r.distribution.smoothCount/Math.max(1,r.distribution.totalSamples)*100)}%`,backgroundColor:t.sky600}]}/>
+                </S>
+                <T style={[e.histogramCountText,{color:t.sky600}]}>
+                  {r.distribution.smoothCount} ({Math.round(r.distribution.smoothCount/Math.max(1,r.distribution.totalSamples)*100)}%)
+                </T>
+              </S>
+
+              
+              <S style={e.histogramRow}>
+                <S style={e.histogramLabelCol}>
+                  <T style={e.histogramLabel}>24.1–34ms (30–40 FPS)</T>
+                  <T style={e.histogramSub}>{C("perf.minorVariance","Minor Variance")}</T>
+                </S>
+                <S style={e.histogramTrack}>
+                  <S style={[e.histogramFill,{width:`${Math.min(100,r.distribution.degradedCount/Math.max(1,r.distribution.totalSamples)*100)}%`,backgroundColor:t.amber500}]}/>
+                </S>
+                <T style={[e.histogramCountText,{color:t.amber500}]}>
+                  {r.distribution.degradedCount} ({Math.round(r.distribution.degradedCount/Math.max(1,r.distribution.totalSamples)*100)}%)
+                </T>
+              </S>
+
+              
+              <S style={e.histogramRow}>
+                <S style={e.histogramLabelCol}>
+                  <T style={e.histogramLabel}>34.1–66ms (15–30 FPS)</T>
+                  <T style={e.histogramSub}>{C("perf.droppedFrame","Dropped Frame")}</T>
+                </S>
+                <S style={e.histogramTrack}>
+                  <S style={[e.histogramFill,{width:`${Math.min(100,r.distribution.stutteredCount/Math.max(1,r.distribution.totalSamples)*100)}%`,backgroundColor:t.red500}]}/>
+                </S>
+                <T style={[e.histogramCountText,{color:t.red500}]}>
+                  {r.distribution.stutteredCount} ({Math.round(r.distribution.stutteredCount/Math.max(1,r.distribution.totalSamples)*100)}%)
+                </T>
+              </S>
+
+              
+              <S style={e.histogramRow}>
+                <S style={e.histogramLabelCol}>
+                  <T style={e.histogramLabel}>&gt;66.6ms (&lt;15 FPS)</T>
+                  <T style={e.histogramSub}>{C("perf.frozenFrame","Frozen Frame")}</T>
+                </S>
+                <S style={e.histogramTrack}>
+                  <S style={[e.histogramFill,{width:`${Math.min(100,r.distribution.frozenCount/Math.max(1,r.distribution.totalSamples)*100)}%`,backgroundColor:"#881337"}]}/>
+                </S>
+                <T style={[e.histogramCountText,{color:"#881337"}]}>
+                  {r.distribution.frozenCount} ({Math.round(r.distribution.frozenCount/Math.max(1,r.distribution.totalSamples)*100)}%)
+                </T>
+              </S>
+            </S>
+          </S>
+
+          
+          <S style={e.sectionCard}>
+            <S style={e.sectionHeader}>
+              <S style={e.sectionTitleRow}>
+                <K size={15}color={t.purple}/>
+                <T style={e.sectionTitle}>{C("perf.datadogVitalsTitle","Datadog & New Relic APM Vitals")}</T>
+              </S>
+              <S style={[e.targetBadge,{backgroundColor:`${v}18`}]}>
+                <T style={[e.targetBadgeText,{color:v}]}>
+                  {C("perf.apdex","Apdex")}: {r.apdexScore} ({r.apdexStatus})
+                </T>
+              </S>
+            </S>
+
+            <T style={e.sectionDesc}>
+              {C("perf.datadogVitalsDesc","Real-time Mobile APM metrics computed via official New Relic Apdex (T=16.6ms) and Datadog RUM Mobile Vitals algorithms.")}
+            </T>
+
+            <S style={e.datadogGrid}>
+              <S style={[e.datadogPill,{borderColor:`${t.green600}30`,backgroundColor:`${t.green600}10`}]}>
+                <T style={[e.datadogCount,{color:t.green600}]}>{r.satisfiedCount}</T>
+                <T style={e.datadogLabel}>{C("perf.satisfiedFrames","Satisfied (\u226416.6ms)")}</T>
+              </S>
+
+              <S style={[e.datadogPill,{borderColor:`${t.amber500}30`,backgroundColor:`${t.amber500}10`}]}>
+                <T style={[e.datadogCount,{color:t.amber500}]}>{r.toleratingCount}</T>
+                <T style={e.datadogLabel}>{C("perf.slowFrames","Slow Frames (17-66ms)")}</T>
+              </S>
+
+              <S style={[e.datadogPill,{borderColor:`${t.red500}30`,backgroundColor:`${t.red500}10`}]}>
+                <T style={[e.datadogCount,{color:t.red500}]}>{r.frustratedCount}</T>
+                <T style={e.datadogLabel}>{C("perf.frozenFrames","Frozen Frames (>66ms)")}</T>
+              </S>
+
+              <S style={[e.datadogPill,{borderColor:`${t.purple}30`,backgroundColor:`${t.purple}10`}]}>
+                <T style={[e.datadogCount,{color:t.purple}]}>{r.longTaskCount}</T>
+                <T style={e.datadogLabel}>{C("perf.longTasks","JS Long Tasks (>50ms)")}</T>
+              </S>
+            </S>
+          </S>
+        </>}
+
+      
+      {F==="percentiles"&&<>
+          
+          <S style={e.sectionCard}>
+            <S style={e.sectionHeader}>
+              <S style={e.sectionTitleRow}>
+                <H size={15}color={t.purple}/>
+                <T style={e.sectionTitle}>{C("perf.percentilesTitle","Latency Percentile Matrix (p50 / p90 / p95 / p99)")}</T>
+              </S>
+              <S style={e.targetBadge}>
+                <T style={e.targetBadgeText}>{C("perf.percentilesSubtitle","Computed from Live Frames")}</T>
+              </S>
+            </S>
+            <T style={e.sectionDesc}>
+              {C("perf.percentilesDesc","Exact mathematical distribution of frame times sampled from the active rolling window.")}
+            </T>
+
+            <S style={e.percentileGrid}>
+              <S style={e.percentileCard}>
+                <T style={e.percentileTag}>{C("perf.p50Label","p50 (Median)")}</T>
+                <T style={[e.percentileVal,{color:t.green600}]}>
+                  {r.percentiles.p50Ms}
+                  <T style={e.percentileUnit}>ms</T>
+                </T>
+                <T style={e.percentileSub}>{C("perf.p50Sub","50% of frames faster")}</T>
+              </S>
+
+              <S style={e.percentileCard}>
+                <T style={e.percentileTag}>{C("perf.p90Label","p90")}</T>
+                <T style={[e.percentileVal,{color:t.sky600}]}>
+                  {r.percentiles.p90Ms}
+                  <T style={e.percentileUnit}>ms</T>
+                </T>
+                <T style={e.percentileSub}>{C("perf.p90Sub","90% of frames faster")}</T>
+              </S>
+
+              <S style={e.percentileCard}>
+                <T style={e.percentileTag}>{C("perf.p95Label","p95")}</T>
+                <T style={[e.percentileVal,{color:r.percentiles.p95Ms<=20?t.green600:t.amber500}]}>
+                  {r.percentiles.p95Ms}
+                  <T style={e.percentileUnit}>ms</T>
+                </T>
+                <T style={e.percentileSub}>{C("perf.p95Sub","95% of frames faster")}</T>
+              </S>
+
+              <S style={e.percentileCard}>
+                <T style={e.percentileTag}>{C("perf.p99Label","p99 (Tail Latency)")}</T>
+                <T style={[e.percentileVal,{color:r.percentiles.p99Ms<=33?t.amber500:t.red500}]}>
+                  {r.percentiles.p99Ms}
+                  <T style={e.percentileUnit}>ms</T>
+                </T>
+                <T style={e.percentileSub}>{C("perf.p99Sub","Worst 1% outlier frames")}</T>
+              </S>
+            </S>
+          </S>
+
+          
+          <S style={e.sectionCard}>
+            <S style={e.sectionHeader}>
+              <S style={e.sectionTitleRow}>
+                <H size={15}color={t.purple}/>
+                <T style={e.sectionTitle}>{C("perf.realtimeFrameTimes","Real-Time Frame Times (50 Frames)")}</T>
+              </S>
+              <S style={e.targetBadge}>
+                <T style={e.targetBadgeText}>{C("perf.target60FpsLabel","16.6ms Target (60fps)")}</T>
+              </S>
+            </S>
+
+            <S style={e.chartWrapper}>
+              <Pe width={A}height={D}style={e.chartSvg}>
+                <Se x1="0"y1={D-16.6/40*(D-16)-8}x2={A}y2={D-16.6/40*(D-16)-8}stroke={t.green600}strokeWidth="1"strokeDasharray="4,4"opacity={.6}/>
+                <Se x1="0"y1={D-33.3/40*(D-16)-8}x2={A}y2={D-33.3/40*(D-16)-8}stroke={t.red500}strokeWidth="1"strokeDasharray="3,3"opacity={.4}/>
+
+                {r.frameHistory.length>0&&r.frameHistory.map((V,M)=>{const R=Math.max(40,...r.frameHistory),z=A/Math.max(1,r.frameHistory.length),Z=Math.max(2,z-1.5),E=Math.min(V,R)/R*(D-20),O=M*z,U=D-E-4,Be=V<=18?t.green600:V<=33?t.amber500:t.red500;return<$e key={M}x={O}y={U}width={Z}height={Math.max(2,E)}rx={1}fill={Be}opacity={.75}/>})}
+
+                {Q?<Le d={Q}fill="none"stroke={t.purple}strokeWidth="2"/>:null}
+              </Pe>
+
+              <S style={e.chartAxisRow}>
+                <T style={e.chartAxisLabel}>{C("perf.past50Frames","\u2190 Past 50 Frames")}</T>
+                <T style={e.chartAxisLabel}>{C("perf.nowInstant","Now (Instantaneous) \u2192")}</T>
+              </S>
+            </S>
+
+            <S style={e.legendRow}>
+              <S style={e.legendItem}>
+                <S style={[e.legendDot,{backgroundColor:t.green600}]}/>
+                <T style={e.legendText}>{C("perf.smoothLegend","Smooth (<18ms)")}</T>
+              </S>
+              <S style={e.legendItem}>
+                <S style={[e.legendDot,{backgroundColor:t.amber500}]}/>
+                <T style={e.legendText}>{C("perf.jankLegend","Jank (18-33ms)")}</T>
+              </S>
+              <S style={e.legendItem}>
+                <S style={[e.legendDot,{backgroundColor:t.red500}]}/>
+                <T style={e.legendText}>{C("perf.frozenLegend","Frozen (>33ms)")}</T>
+              </S>
+            </S>
+          </S>
+
+          
+          <S style={e.sectionCard}>
+            <S style={e.sectionHeader}>
+              <S style={e.sectionTitleRow}>
+                <X size={15}color={t.sky600}/>
+                <T style={e.sectionTitle}>{C("perf.jsResponsiveness","JS Thread Responsiveness")}</T>
+              </S>
+              <S style={[e.targetBadge,{backgroundColor:`${N}14`}]}>
+                <T style={[e.targetBadgeText,{color:N}]}>
+                  {r.jsEventLoopLagMs<=2?C("perf.instantaneous","\u26A1 Instantaneous"):`${r.jsEventLoopLagMs} ${C("perf.lagUnit","ms Lag")}`}
+                </T>
+              </S>
+            </S>
+
+            <S style={e.lagBarsRow}>
+              {r.jsLagHistory.map((V,M)=>{const R=Math.min(48,Math.max(4,V*2.5)),z=V<=3?t.green600:V<=20?t.amber500:t.red500;return<S key={M}style={[e.lagBar,{height:R,backgroundColor:z}]}/>})}
+            </S>
+
+            <S style={e.lagInfoRow}>
+              <T style={e.lagInfoText}>
+                {C("perf.avgJsQueueLag","Average JS Queue Lag")}: <T style={e.boldText}>{r.avgJsLagMs}ms</T>
+              </T>
+              <T style={e.lagInfoText}>
+                {C("perf.peakLagSpike","Peak Lag Spike")}: <T style={e.boldText}>{r.peakJsLagMs}ms</T>
+              </T>
+            </S>
+          </S>
+        </>}
+
+      
+      {F==="engine"&&<S style={e.sectionCard}>
+          <S style={e.sectionHeader}>
+            <S style={e.sectionTitleRow}>
+              <Ce size={15}color={t.purple}/>
+              <T style={e.sectionTitle}>{C("perf.engineTelemetryTitle","Engine & Runtime Telemetry")}</T>
+            </S>
+            <S style={[e.targetBadge,{backgroundColor:`${t.purple}14`}]}>
+              <T style={[e.targetBadgeText,{color:t.purple}]}>
+                {r.engineDetails.engineName}
+              </T>
+            </S>
+          </S>
+          <T style={e.sectionDesc}>
+            {C("perf.engineTelemetryDesc","Deep inspection of the active JavaScript Virtual Machine, memory allocations, and React Native architecture.")}
+          </T>
+
+          <S style={e.engineDetailsTable}>
+            <S style={e.engineDetailRow}>
+              <T style={e.engineDetailKey}>{C("perf.jsEngine","JavaScript Engine")}</T>
+              <T style={e.engineDetailVal}>{r.engineDetails.engineName}</T>
+            </S>
+
+            <S style={e.engineDetailRow}>
+              <T style={e.engineDetailKey}>{C("perf.architectureMode","Architecture Mode")}</T>
+              <S style={[e.enginePillMini,{backgroundColor:r.engineDetails.isFabric?`${t.green600}18`:`${t.sky600}18`}]}>
+                <T style={[e.enginePillMiniText,{color:r.engineDetails.isFabric?t.green600:t.sky600}]}>
+                  {r.engineDetails.architectureName}
+                </T>
+              </S>
+            </S>
+
+            <S style={e.engineDetailRow}>
+              <T style={e.engineDetailKey}>{C("perf.turboModulesBridge","TurboModules Bridge")}</T>
+              <T style={[e.engineDetailVal,{color:r.engineDetails.isTurboModules?t.green600:t.grayTextStrong}]}>
+                {r.engineDetails.isTurboModules?C("perf.turboModulesEnabled","\u26A1 Enabled (JSI Direct)"):C("perf.standardBridge","Standard Bridge")}
+              </T>
+            </S>
+
+            <S style={e.engineDetailRow}>
+              <T style={e.engineDetailKey}>{C("perf.liveHeapSize","Live Heap Size")}</T>
+              <T style={e.engineDetailVal}>
+                {r.memory.isAvailable?`${r.memory.usedHeapMb} MB`:C("perf.engineProtected","Protected by Engine")}
+              </T>
+            </S>
+
+            <S style={e.engineDetailRow}>
+              <T style={e.engineDetailKey}>{C("perf.totalHeapAllocated","Total Heap Allocated")}</T>
+              <T style={e.engineDetailVal}>
+                {r.memory.isAvailable?`${r.memory.totalAllocMb} MB`:C("perf.engineProtected","Protected by Engine")}
+              </T>
+            </S>
+
+            <S style={e.engineDetailRow}>
+              <T style={e.engineDetailKey}>{C("perf.sessionPeakHeap","Session Peak Heap")}</T>
+              <T style={e.engineDetailVal}>
+                {r.memory.isAvailable?`${r.memory.peakHeapMb} MB`:"N/A"}
+              </T>
+            </S>
+
+            <S style={e.engineDetailRow}>
+              <T style={e.engineDetailKey}>{C("perf.gcCollections","GC Collections")}</T>
+              <T style={e.engineDetailVal}>
+                {r.memory.gcCount!==void 0?`${r.memory.gcCount} runs`:C("perf.nativeManaged","Native Managed")}
+              </T>
+            </S>
+
+            <S style={e.engineDetailRow}>
+              <T style={e.engineDetailKey}>{C("perf.gcCpuTime","GC CPU Time")}</T>
+              <T style={e.engineDetailVal}>
+                {r.memory.gcTimeMs!==void 0?`${r.memory.gcTimeMs}ms`:C("perf.nativeManaged","Native Managed")}
+              </T>
+            </S>
+          </S>
+
+          
+          <L onPress={()=>{B("medium"),r.triggerGC(),$(C("perf.invokedHermesGc","Invoked Hermes GC cycle"))}}style={e.gcActionBtn}>
+            <I size={16}color={t.amber500}/>
+            <T style={e.gcActionBtnText}>{C("perf.triggerHermesGc","Trigger Hermes Garbage Collection")}</T>
+          </L>
+        </S>}
+
+      
+      {F==="janks"&&<S style={e.sectionCard}>
+          <S style={e.sectionHeader}>
+            <S style={e.sectionTitleRow}>
+              <I size={15}color={t.red500}/>
+              <T style={e.sectionTitle}>{C("perf.jankIncidentLog","Jank & Frozen Frame Incident Log")}</T>
+            </S>
+            <T style={e.jankRatioBadge}>
+              {r.jankCount} {C("perf.janksCount","janks")} ({r.jankPercent}%)
+            </T>
+          </S>
+
+          
+          <S style={e.jankFilterRow}>
+            {["all","moderate","severe","frozen"].map(V=><P key={V}onPress={()=>{B("light"),ke(V)}}style={[e.jankFilterChip,W===V&&e.jankFilterChipActive]}>
+                <T style={[e.jankFilterChipText,W===V&&e.jankFilterChipTextActive]}>
+                  {V==="all"?C("perf.allFilter","ALL"):V==="moderate"?C("perf.moderateFilter","MODERATE"):V==="severe"?C("perf.severeFilter","SEVERE"):C("perf.frozenFilter","FROZEN")}
+                </T>
+              </P>)}
+          </S>
+
+          {q.length===0?<S style={e.emptyJankBox}>
+              <We size={22}color={t.green600}/>
+              <T style={e.emptyJankTitle}>{C("perf.zeroJanksDetected","Zero Janks Detected")}</T>
+              <T style={e.emptyJankDesc}>
+                {C("perf.zeroJanksDesc","All frames rendered smoothly within the target vsync budget.")}
+              </T>
+            </S>:<S style={e.janksList}>
+              {q.map(V=>{const M=V.severity==="frozen"?t.red500:V.severity==="severe"?t.amber500:t.sky600,R=G?.id===V.id;return<P key={V.id}onPress={()=>Ve(R?null:V)}style={[e.jankItemRow,R&&{borderColor:M}]}>
+                    <S style={[e.jankSevBadge,{backgroundColor:`${M}18`}]}>
+                      <T style={[e.jankSevText,{color:M}]}>
+                        {V.severity.toUpperCase()}
+                      </T>
+                    </S>
+                    <S style={e.jankDetailsCol}>
+                      <T style={e.jankDurationText}>
+                        {V.durationMs}ms ({V.fps} FPS)
+                      </T>
+                      <T style={e.jankTimeText}>{V.timeStr}</T>
+                    </S>
+                    <T style={e.jankTapHint}>{R?C("perf.hide","Hide"):C("perf.inspect","Inspect")}</T>
+                  </P>})}
+            </S>}
+
+          {G&&<S style={e.jankInspectorBox}>
+              <T style={e.jankInspectorTitle}>{C("perf.incidentDiagnostics","Incident Diagnostics")}</T>
+              <T style={e.jankInspectorDesc}>
+                {C("perf.frameTime","Frame Time")}: <T style={e.boldText}>{G.durationMs}ms</T> ({C("perf.target","Target")}: 16.6ms).
+                {" "}{C("perf.delayedBy","Frame delayed by")} {(G.durationMs-16.6).toFixed(1)}ms {C("perf.beyondDeadline","beyond standard vsync deadline")}.
+              </T>
+            </S>}
+        </S>}
+
+      
+      {F==="benchmark"&&<S style={e.sectionCard}>
+          <S style={e.sectionHeader}>
+            <S style={e.sectionTitleRow}>
+              <I size={15}color={t.amber500}/>
+              <T style={e.sectionTitle}>{C("perf.stressTitle","Interactive Stress Test & Benchmark Suite")}</T>
+            </S>
+          </S>
+          <T style={e.sectionDesc}>
+            {C("perf.stressDesc","Trigger synchronous workloads or render bursts to watch the live FPS and JS lag meters react dynamically.")}
+          </T>
+
+          <S style={e.stressButtonsGrid}>
+            <L onPress={()=>{B("medium"),r.runJsStressTest(120),$(C("perf.jsStressRan","Ran 120ms synchronous JS blocking loop"))}}style={[e.stressBtn,{backgroundColor:`${t.amber500}14`,borderColor:`${t.amber500}35`}]}>
+              <I size={16}color={t.amber500}/>
+              <S style={e.stressBtnTextBox}>
+                <T style={[e.stressBtnTitle,{color:t.amber500}]}>
+                  {C("perf.jsStressTitle","JS Loop Stress (120ms)")}
+                </T>
+                <T style={e.stressBtnSub}>{C("perf.jsStressSub","Simulates heavy compute / blocking synchronous loop")}</T>
+              </S>
+            </L>
+
+            <L onPress={()=>{B("medium"),r.runRenderStressTest(),$(C("perf.renderStressRan","Fired 25 rapid re-render cycles"))}}style={[e.stressBtn,{backgroundColor:`${t.purple}14`,borderColor:`${t.purple}35`}]}>
+              <H size={16}color={t.purple}/>
+              <S style={e.stressBtnTextBox}>
+                <T style={[e.stressBtnTitle,{color:t.purple}]}>
+                  {C("perf.renderStressTitle","Re-render Burst (25 frames)")}
+                </T>
+                <T style={e.stressBtnSub}>{C("perf.renderStressSub","Simulates rapid state & layout reconciliation passes")}</T>
+              </S>
+            </L>
+          </S>
+        </S>}
+
+      <S style={{height:36}}/>
+    </Te>};const e=ve.create({perfContainer:{flex:1,backgroundColor:t.grayBackground},perfContent:{padding:12,gap:12},topToolbar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingBottom:4},engineBadgeRow:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},enginePill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,borderWidth:1},enginePillText:{fontFamily:k.interSemiBold,fontSize:10},topActionsRow:{flexDirection:"row",alignItems:"center",gap:6},topActionBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:5,borderRadius:6,borderWidth:1,borderColor:t.grayBorderSecondary,backgroundColor:t.grayBackground},topActionBtnText:{fontFamily:k.interSemiBold,fontSize:10,color:t.grayTextStrong},heroScoreCard:{backgroundColor:t.white,borderRadius:12,padding:14,borderWidth:1,borderColor:t.grayBorderSecondary,gap:12},scoreRow:{flexDirection:"row",alignItems:"center",gap:14},scoreCircleWrapper:{alignItems:"center",justifyContent:"center"},scoreCircle:{width:64,height:64,borderRadius:32,borderWidth:3,alignItems:"center",justifyContent:"center"},scoreNumber:{fontFamily:k.interBold,fontSize:22,lineHeight:24},scoreMax:{fontFamily:k.interMedium,fontSize:8.5,color:t.grayTextWeak},scoreDetails:{flex:1,gap:3},scoreHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},scoreStatusLabel:{fontFamily:k.interBold,fontSize:15,letterSpacing:.5},liveDotPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:6,paddingVertical:2,borderRadius:8},liveDot:{width:6,height:6,borderRadius:3},liveDotText:{fontFamily:k.interBold,fontSize:8.5},scoreDesc:{fontFamily:k.interRegular,fontSize:11,color:t.grayTextWeak,lineHeight:15},sessionMetaRow:{flexDirection:"row",alignItems:"center",gap:8,marginTop:2},sessionDurationText:{fontFamily:k.interMedium,fontSize:10,color:t.grayTextWeak},apdexBadge:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:4},apdexBadgeText:{fontFamily:k.interBold,fontSize:9},metricGrid:{flexDirection:"row",gap:6},metricCard:{flex:1,backgroundColor:t.grayBackground,borderRadius:8,padding:8,borderWidth:1,borderColor:t.grayBorderSecondary,gap:2},metricCardHeader:{flexDirection:"row",alignItems:"center",gap:3},metricCardLabel:{fontFamily:k.interMedium,fontSize:9.5,color:t.grayTextWeak},metricCardValue:{fontFamily:k.interBold,fontSize:16,lineHeight:18},metricUnit:{fontSize:10,fontFamily:k.interMedium,color:t.grayTextWeak},metricCardSub:{fontFamily:k.interRegular,fontSize:8.5,color:t.grayTextWeak},budgetBarContainer:{gap:4,backgroundColor:t.grayBackground,borderRadius:8,padding:9,borderWidth:1,borderColor:t.grayBorderSecondary},budgetHeaderRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},budgetLabel:{fontFamily:k.interMedium,fontSize:10,color:t.grayTextStrong},budgetPercentText:{fontFamily:k.interBold,fontSize:10},budgetTrack:{height:6,backgroundColor:t.grayBorderSecondary,borderRadius:3,overflow:"hidden"},budgetFill:{height:"100%",borderRadius:3},budgetFooterRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},budgetFooterText:{fontFamily:k.interRegular,fontSize:9,color:t.grayTextWeak},budgetTargetText:{fontFamily:k.interMedium,fontSize:9,color:t.grayTextWeak},subTabsScrollView:{flexGrow:0},subTabsContent:{gap:6,paddingVertical:2},subTabPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:10,paddingVertical:6,borderRadius:8,borderWidth:1,borderColor:t.grayBorderSecondary,backgroundColor:t.white},subTabPillActive:{borderColor:`${t.purple}60`,backgroundColor:`${t.purple}14`},subTabPillText:{fontFamily:k.interMedium,fontSize:11,color:t.grayTextWeak},subTabPillTextActive:{fontFamily:k.interBold,color:t.purple},jankCountBadge:{paddingHorizontal:4,paddingVertical:1,borderRadius:4},jankCountBadgeText:{fontFamily:k.interBold,fontSize:8.5},sectionCard:{backgroundColor:t.white,borderRadius:12,padding:14,borderWidth:1,borderColor:t.grayBorderSecondary,gap:10},sectionHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},sectionTitleRow:{flexDirection:"row",alignItems:"center",gap:6,flex:1},sectionTitle:{fontFamily:k.interBold,fontSize:12.5,color:t.grayTextStrong},sectionDesc:{fontFamily:k.interRegular,fontSize:10.5,color:t.grayTextWeak,lineHeight:14},targetBadge:{backgroundColor:`${t.green600}14`,paddingHorizontal:6,paddingVertical:2,borderRadius:4},targetBadgeText:{fontFamily:k.interBold,fontSize:9,color:t.green600},datadogGrid:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:2},datadogPill:{flexBasis:"48%",flexGrow:1,paddingVertical:8,paddingHorizontal:10,borderRadius:8,borderWidth:1,gap:2},datadogCount:{fontFamily:k.interBold,fontSize:16},datadogLabel:{fontFamily:k.interRegular,fontSize:9.5,color:t.grayTextWeak},histogramTotalText:{fontFamily:k.interMedium,fontSize:9.5,color:t.grayTextWeak},histogramList:{gap:8},histogramRow:{flexDirection:"row",alignItems:"center",gap:8},histogramLabelCol:{width:110},histogramLabel:{fontFamily:k.interBold,fontSize:9.5,color:t.grayTextStrong},histogramSub:{fontFamily:k.interRegular,fontSize:8.5,color:t.grayTextWeak},histogramTrack:{flex:1,height:6,backgroundColor:t.grayBackground,borderRadius:3,overflow:"hidden"},histogramFill:{height:"100%",borderRadius:3},histogramCountText:{width:65,textAlign:"right",fontFamily:k.interBold,fontSize:9.5},percentileGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},percentileCard:{flexBasis:"48%",flexGrow:1,backgroundColor:t.grayBackground,borderRadius:8,padding:10,borderWidth:1,borderColor:t.grayBorderSecondary,gap:2},percentileTag:{fontFamily:k.interSemiBold,fontSize:10,color:t.grayTextWeak},percentileVal:{fontFamily:k.interBold,fontSize:18},percentileUnit:{fontSize:11,fontFamily:k.interMedium,color:t.grayTextWeak},percentileSub:{fontFamily:k.interRegular,fontSize:9,color:t.grayTextWeak},chartWrapper:{backgroundColor:t.grayBackground,borderRadius:8,paddingVertical:6,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center"},chartSvg:{alignSelf:"center"},chartAxisRow:{flexDirection:"row",justifyContent:"space-between",width:A,paddingTop:4},chartAxisLabel:{fontFamily:k.interRegular,fontSize:9,color:t.grayTextWeak},legendRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:14,paddingTop:2},legendItem:{flexDirection:"row",alignItems:"center",gap:4},legendDot:{width:7,height:7,borderRadius:3.5},legendText:{fontFamily:k.interMedium,fontSize:10,color:t.grayTextWeak},lagBarsRow:{flexDirection:"row",alignItems:"flex-end",justifyContent:"space-between",height:52,backgroundColor:t.grayBackground,borderRadius:8,padding:6,borderWidth:1,borderColor:t.grayBorderSecondary},lagBar:{flex:1,marginHorizontal:1,borderRadius:2},lagInfoRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},lagInfoText:{fontFamily:k.interRegular,fontSize:10.5,color:t.grayTextWeak},boldText:{fontFamily:k.interBold,color:t.grayTextStrong},engineDetailsTable:{gap:8},engineDetailRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:5,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary},engineDetailKey:{fontFamily:k.interMedium,fontSize:11,color:t.grayTextWeak},engineDetailVal:{fontFamily:k.interBold,fontSize:11,color:t.grayTextStrong},enginePillMini:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},enginePillMiniText:{fontFamily:k.interBold,fontSize:9.5},gcActionBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:`${t.amber500}15`,borderRadius:8,paddingVertical:10,borderWidth:1,borderColor:`${t.amber500}35`,marginTop:4},gcActionBtnText:{fontFamily:k.interBold,fontSize:11,color:t.amber500},jankFilterRow:{flexDirection:"row",gap:6},jankFilterChip:{paddingHorizontal:8,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:t.grayBorderSecondary,backgroundColor:t.grayBackground},jankFilterChipActive:{borderColor:t.purple,backgroundColor:`${t.purple}15`},jankFilterChipText:{fontFamily:k.interMedium,fontSize:9.5,color:t.grayTextWeak},jankFilterChipTextActive:{fontFamily:k.interBold,color:t.purple},emptyJankBox:{alignItems:"center",justifyContent:"center",paddingVertical:18,gap:4,backgroundColor:t.grayBackground,borderRadius:8,borderWidth:1,borderColor:t.grayBorderSecondary},emptyJankTitle:{fontFamily:k.interBold,fontSize:12,color:t.green600},emptyJankDesc:{fontFamily:k.interRegular,fontSize:10.5,color:t.grayTextWeak},janksList:{gap:6},jankItemRow:{flexDirection:"row",alignItems:"center",gap:8,backgroundColor:t.grayBackground,borderRadius:6,padding:7,borderWidth:1,borderColor:t.grayBorderSecondary},jankSevBadge:{paddingHorizontal:5,paddingVertical:2,borderRadius:4},jankSevText:{fontFamily:k.interBold,fontSize:8.5},jankDetailsCol:{flex:1},jankDurationText:{fontFamily:k.interBold,fontSize:11,color:t.grayTextStrong},jankTimeText:{fontFamily:k.interRegular,fontSize:9,color:t.grayTextWeak},jankTapHint:{fontFamily:k.interMedium,fontSize:10,color:t.purple},jankInspectorBox:{backgroundColor:t.grayBackground,borderRadius:8,padding:10,borderWidth:1,borderColor:t.grayBorderSecondary,gap:4},jankInspectorTitle:{fontFamily:k.interBold,fontSize:11,color:t.grayTextStrong},jankInspectorDesc:{fontFamily:k.interRegular,fontSize:10.5,color:t.grayTextWeak,lineHeight:14},stressButtonsGrid:{gap:8},stressBtn:{flexDirection:"row",alignItems:"center",gap:10,padding:10,borderRadius:8,borderWidth:1},stressBtnTextBox:{flex:1,gap:2},stressBtnTitle:{fontFamily:k.interBold,fontSize:11.5},stressBtnSub:{fontFamily:k.interRegular,fontSize:10,color:t.grayTextWeak},jankRatioBadge:{fontFamily:k.interMedium,fontSize:10,color:t.grayTextWeak}});