react-native-inapp-inspector 2.5.11 → 2.5.12

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

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