react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,412 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const CopyButton_1 = __importDefault(require("../CopyButton"));
-const HighlightText_1 = __importDefault(require("../HighlightText"));
-const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
-const FeatureUnderDevNotice_1 = __importDefault(require("./FeatureUnderDevNotice"));
-const AppColors_1 = require("../../styles/AppColors");
-const AppFonts_1 = require("../../styles/AppFonts");
-const i18n_1 = require("../../i18n");
-const helpers_1 = require("../../helpers");
-const NetworkIcons_1 = require("../NetworkIcons");
-const performanceTracker_1 = require("../../customHooks/performanceTracker");
-const NativeInspector_1 = require("../../native/NativeInspector");
-const telemetry_1 = require("../../helpers/telemetry");
-const PerformanceTab = react_1.default.memo(() => {
-    const { t } = (0, i18n_1.useTranslation)();
-    const [isRecording, setIsRecording] = (0, react_1.useState)(true);
-    const [currentFps, setCurrentFps] = (0, react_1.useState)(60);
-    const [minFps, setMinFps] = (0, react_1.useState)(57);
-    const [maxFps, setMaxFps] = (0, react_1.useState)(60);
-    const [avgFps, setAvgFps] = (0, react_1.useState)(59);
-    const [totalFrames, setTotalFrames] = (0, react_1.useState)(4820);
-    const [jankyFrameCount, setJankyFrameCount] = (0, react_1.useState)(4);
-    const [jsLagMs, setJsLagMs] = (0, react_1.useState)(1.2);
-    const [expandedEventIds, setExpandedEventIds] = (0, react_1.useState)({
-        'perf-1': true,
-    });
-    const toggleEventExpand = (id) => {
-        setExpandedEventIds(prev => ({
-            ...prev,
-            [id]: !prev[id],
-        }));
-    };
-    const [fpsHistory, setFpsHistory] = (0, react_1.useState)([
-        60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
-    ]);
-    const [events, setEvents] = (0, react_1.useState)(() => (0, performanceTracker_1.getPerformanceEvents)());
-    const [filterCategory, setFilterCategory] = (0, react_1.useState)('ALL');
-    const [search, setSearch] = (0, react_1.useState)('');
-    (0, react_1.useEffect)(() => {
-        const unsub = (0, performanceTracker_1.subscribePerformanceEvents)(liveEvents => {
-            setEvents(liveEvents);
-        });
-        return unsub;
-    }, []);
-    const lastFrameTimeRef = (0, react_1.useRef)(Date.now());
-    const rafIdRef = (0, react_1.useRef)(null);
-    const [systemMetrics, setSystemMetrics] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        let isMounted = true;
-        const fetchMetrics = async () => {
-            const metrics = await (0, NativeInspector_1.getNativeSystemMetrics)();
-            if (isMounted && metrics) {
-                setSystemMetrics(metrics);
-            }
-        };
-        fetchMetrics();
-        const interval = setInterval(fetchMetrics, 2000);
-        return () => {
-            isMounted = false;
-            clearInterval(interval);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if ((0, NativeInspector_1.isNativeModuleAvailable)()) {
-            (0, NativeInspector_1.startNativeFpsMonitoring)();
-            return () => {
-                (0, NativeInspector_1.stopNativeFpsMonitoring)();
-            };
-        }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!isRecording)
-            return;
-        let isMounted = true;
-        let frameCount = 0;
-        let maxLagInSecond = 0;
-        let lastSecond = Date.now();
-        const measureFrame = async () => {
-            if (!isMounted)
-                return;
-            const now = Date.now();
-            const delta = now - lastFrameTimeRef.current;
-            lastFrameTimeRef.current = now;
-            const lag = Math.max(0, delta - 16.67);
-            if (lag > maxLagInSecond) {
-                maxLagInSecond = lag;
-            }
-            frameCount++;
-            if (now - lastSecond >= 1000) {
-                const elapsed = now - lastSecond;
-                let measuredFps = Math.min(120, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
-                if ((0, NativeInspector_1.isNativeModuleAvailable)()) {
-                    try {
-                        const nativeMetrics = await (0, NativeInspector_1.getNativeFpsMetrics)();
-                        if (nativeMetrics && nativeMetrics.fps > 0) {
-                            measuredFps = Math.round(nativeMetrics.fps);
-                        }
-                    }
-                    catch { }
-                }
-                setCurrentFps(measuredFps);
-                setMinFps(prev => Math.min(prev, measuredFps));
-                setMaxFps(prev => Math.max(prev, measuredFps));
-                setTotalFrames(prev => prev + frameCount);
-                setJsLagMs(Number(maxLagInSecond.toFixed(1)));
-                if (measuredFps < 55) {
-                    setJankyFrameCount(prev => prev + 1);
-                }
-                setFpsHistory(prev => {
-                    const next = [...prev.slice(-19), measuredFps];
-                    const sum = next.reduce((a, b) => a + b, 0);
-                    setAvgFps(Math.round(sum / next.length));
-                    return next;
-                });
-                if (measuredFps < 50) {
-                    const durationStr = (1000 / measuredFps).toFixed(1);
-                    (0, performanceTracker_1.logPerformanceEvent)({
-                        type: 'fps_drop',
-                        category: 'render',
-                        fps: measuredFps,
-                        durationMs: Number(durationStr),
-                        label: t('performance.liveFpsDip', { fps: measuredFps }),
-                        detail: t('performance.liveFpsDipDetail', { duration: durationStr }),
-                        source: t('performance.uiRenderThread'),
-                        breakdown: {
-                            jsTimeMs: Number(((1000 / measuredFps) * 0.65).toFixed(1)),
-                            uiTimeMs: Number(((1000 / measuredFps) * 0.35).toFixed(1)),
-                        },
-                        advice: t('performance.liveFpsDipAdvice'),
-                        severity: measuredFps < 30 ? 'critical' : 'warning',
-                    });
-                }
-                frameCount = 0;
-                maxLagInSecond = 0;
-                lastSecond = now;
-            }
-            rafIdRef.current = requestAnimationFrame(measureFrame);
-        };
-        lastFrameTimeRef.current = Date.now();
-        rafIdRef.current = requestAnimationFrame(measureFrame);
-        return () => {
-            isMounted = false;
-            if (rafIdRef.current)
-                cancelAnimationFrame(rafIdRef.current);
-        };
-    }, [isRecording]);
-    const filteredEvents = (0, react_1.useMemo)(() => {
-        return events.filter(e => {
-            let matchSearch = true;
-            if (search && search.trim().length > 0) {
-                const queryTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
-                const corpus = [
-                    e.label || '',
-                    e.detail || '',
-                    e.source || '',
-                    e.category || '',
-                    e.severity || '',
-                    e.bottleneckThread || '',
-                ].join(' ').toLowerCase();
-                matchSearch = queryTokens.every(tok => corpus.includes(tok));
-            }
-            const matchFilter = filterCategory === 'ALL'
-                ? true
-                : filterCategory === 'JANKY'
-                    ? e.severity === 'warning' || e.severity === 'critical'
-                    : filterCategory === 'NAVIGATION'
-                        ? e.category === 'navigation'
-                        : filterCategory === 'RENDER'
-                            ? e.category === 'render'
-                            : filterCategory === 'MEMORY'
-                                ? e.category === 'memory'
-                                : e.category === 'io' || e.category === 'bridge';
-            return matchSearch && matchFilter;
-        });
-    }, [events, search, filterCategory]);
-    const performanceScore = (0, react_1.useMemo)(() => {
-        if (avgFps >= 58) {
-            return {
-                score: '98/100',
-                grade: t('performance.excellent'),
-                color: AppColors_1.AppColors.emerald600,
-                bg: AppColors_1.AppColors.greenBg,
-            };
-        }
-        if (avgFps >= 50) {
-            return {
-                score: '84/100',
-                grade: t('performance.good'),
-                color: AppColors_1.AppColors.firebaseOrange,
-                bg: AppColors_1.AppColors.amberBg,
-            };
-        }
-        return {
-            score: '58/100',
-            grade: t('performance.needsOptimization'),
-            color: AppColors_1.AppColors.errorColor,
-            bg: AppColors_1.AppColors.errorCardBg,
-        };
-    }, [avgFps, t]);
-    const runtimeDiagnostics = (0, react_1.useMemo)(() => {
-        const raw = (0, helpers_1.getRuntimeDiagnostics)();
-        const engineNameMap = {
-            hermes: t('performance.hermesAot'),
-            v8: t('performance.v8Jit'),
-            jsc: t('performance.jscEngine'),
-        };
-        const engineSubMap = {
-            hermes: t('performance.bytecodeCompiled'),
-            v8: t('performance.jitEngine'),
-            jsc: t('performance.webkitEngine'),
-        };
-        const archNameMap = {
-            fabric: t('performance.fabricJsi'),
-            paper: t('performance.paperBridge'),
-        };
-        const archSubMap = {
-            fabric: t('performance.directCppBindings'),
-            paper: t('performance.asyncJsonBridge'),
-        };
-        return {
-            jsEngineName: engineNameMap[raw.engineType],
-            jsEngineSub: engineSubMap[raw.engineType],
-            uiArchName: archNameMap[raw.archType],
-            uiArchSub: archSubMap[raw.archType],
-            usedHeapMb: raw.usedHeapMb,
-            totalAllocMb: raw.totalAllocMb,
-        };
-    }, [t]);
-    const frameBudgetStats = (0, react_1.useMemo)(() => {
-        const frameDuration = avgFps > 0 ? 1000 / avgFps : 16.67;
-        const jsTime = Number(Math.max(1.0, Math.min(frameDuration * 0.45, 2.0 + jsLagMs)).toFixed(1));
-        const layoutTime = Number(Math.max(1.0, frameDuration * 0.2).toFixed(1));
-        const renderTime = Number(Math.max(1.0, frameDuration * 0.25).toFixed(1));
-        const totalUsed = jsTime + layoutTime + renderTime;
-        const freeTime = Math.max(0, Number((16.67 - totalUsed).toFixed(1)));
-        const headroomPercent = Math.max(0, Math.min(100, Math.round((freeTime / 16.67) * 100)));
-        return {
-            jsTime,
-            layoutTime,
-            renderTime,
-            freeTime,
-            headroomPercent,
-        };
-    }, [avgFps, jsLagMs]);
-    const [selectedFpsPointIdx, setSelectedFpsPointIdx] = (0, react_1.useState)(null);
-    const svgGraphWidth = 320;
-    const svgGraphHeight = 64;
-    const fpsGraphData = (0, react_1.useMemo)(() => {
-        const points = fpsHistory.length > 0 ? fpsHistory : [60, 60];
-        const stepX = svgGraphWidth / Math.max(1, points.length - 1);
-        const coords = points.map((val, idx) => {
-            const clamped = Math.max(0, Math.min(60, val));
-            const x = Number((idx * stepX).toFixed(1));
-            const y = Number((svgGraphHeight - (clamped / 60) * (svgGraphHeight - 14) - 6).toFixed(1));
-            return { x, y, val };
-        });
-        let linePath = `M ${coords[0].x} ${coords[0].y}`;
-        for (let i = 0; i < coords.length - 1; i++) {
-            const p0 = coords[i];
-            const p1 = coords[i + 1];
-            const midX = Number(((p0.x + p1.x) / 2).toFixed(1));
-            linePath += ` C ${midX} ${p0.y}, ${midX} ${p1.y}, ${p1.x} ${p1.y}`;
-        }
-        const last = coords[coords.length - 1];
-        const first = coords[0];
-        const areaPath = `${linePath} L ${last.x} ${svgGraphHeight} L ${first.x} ${svgGraphHeight} Z`;
-        return { linePath, areaPath, coords };
-    }, [fpsHistory]);
-    const latencyBuckets = (0, react_1.useMemo)(() => {
-        let optimal = 0;
-        let minorJank = 0;
-        let noticeableJank = 0;
-        let severeFreeze = 0;
-        fpsHistory.forEach(fps => {
-            if (fps >= 55)
-                optimal++;
-            else if (fps >= 30)
-                minorJank++;
-            else if (fps >= 20)
-                noticeableJank++;
-            else
-                severeFreeze++;
-        });
-        const total = Math.max(1, fpsHistory.length);
-        return [
-            {
-                key: 'optimal',
-                label: t('performance.optimalBucket'),
-                count: optimal,
-                percent: Number(((optimal / total) * 100).toFixed(0)),
-                color: AppColors_1.AppColors.emerald500,
-                bgColor: AppColors_1.AppColors.emerald100,
-            },
-            {
-                key: 'minorJank',
-                label: t('performance.minorJankBucket'),
-                count: minorJank,
-                percent: Number(((minorJank / total) * 100).toFixed(0)),
-                color: AppColors_1.AppColors.amber500,
-                bgColor: AppColors_1.AppColors.amber100,
-            },
-            {
-                key: 'noticeableJank',
-                label: t('performance.noticeableJankBucket'),
-                count: noticeableJank,
-                percent: Number(((noticeableJank / total) * 100).toFixed(0)),
-                color: AppColors_1.AppColors.firebaseOrange,
-                bgColor: AppColors_1.AppColors.lightOrange,
-            },
-            {
-                key: 'severeFreeze',
-                label: t('performance.severeFreezeBucket'),
-                count: severeFreeze,
-                percent: Number(((severeFreeze / total) * 100).toFixed(0)),
-                color: AppColors_1.AppColors.errorColor,
-                bgColor: AppColors_1.AppColors.errorCardBg,
-            },
-        ];
-    }, [fpsHistory, t]);
-    const clearEvents = () => {
-        (0, performanceTracker_1.clearPerformanceEvents)();
-    };
-    const activeScrubPoint = selectedFpsPointIdx !== null && fpsGraphData.coords[selectedFpsPointIdx]
-        ? fpsGraphData.coords[selectedFpsPointIdx]
-        : null;
-    return (<react_native_1.View style={perfStyles.container}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(r,i,g,s){s===void 0&&(s=g);var d=Object.getOwnPropertyDescriptor(i,g);(!d||("get"in d?!i.__esModule:d.writable||d.configurable))&&(d={enumerable:!0,get:function(){return i[g]}}),Object.defineProperty(r,s,d)}):(function(r,i,g,s){s===void 0&&(s=g),r[s]=i[g]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(r,i){Object.defineProperty(r,"default",{enumerable:!0,value:i})}):function(r,i){r.default=i}),__importStar=this&&this.__importStar||(function(){var r=function(i){return r=Object.getOwnPropertyNames||function(g){var s=[];for(var d in g)Object.prototype.hasOwnProperty.call(g,d)&&(s[s.length]=d);return s},r(i)};return function(i){if(i&&i.__esModule)return i;var g={};if(i!=null)for(var s=r(i),d=0;d<s.length;d++)s[d]!=="default"&&__createBinding(g,i,s[d]);return __setModuleDefault(g,i),g}})(),__importDefault=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),TouchableScale_1=__importDefault(require("../TouchableScale")),CopyButton_1=__importDefault(require("../CopyButton")),HighlightText_1=__importDefault(require("../HighlightText")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),FeatureUnderDevNotice_1=__importDefault(require("./FeatureUnderDevNotice")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),performanceTracker_1=require("../../customHooks/performanceTracker"),NativeInspector_1=require("../../native/NativeInspector"),telemetry_1=require("../../helpers/telemetry"),PerformanceTab=react_1.default.memo(()=>{const{t:r}=(0,i18n_1.useTranslation)(),[i,g]=(0,react_1.useState)(!0),[s,d]=(0,react_1.useState)(60),[W,N]=(0,react_1.useState)(57),[ae,P]=(0,react_1.useState)(60),[m,H]=(0,react_1.useState)(59),[L,j]=(0,react_1.useState)(4820),[E,O]=(0,react_1.useState)(4),[S,$]=(0,react_1.useState)(1.2),[G,q]=(0,react_1.useState)({"perf-1":!0}),J=e=>{q(t=>({...t,[e]:!t[e]}))},[h,K]=(0,react_1.useState)([60,59,60,60,58,60,59,60,60,60,57,60,59,60,60,58,60,60,59,60]),[M,U]=(0,react_1.useState)(()=>(0,performanceTracker_1.getPerformanceEvents)()),[x,Y]=(0,react_1.useState)("ALL"),[f,I]=(0,react_1.useState)("");(0,react_1.useEffect)(()=>(0,performanceTracker_1.subscribePerformanceEvents)(t=>{U(t)}),[]);const R=(0,react_1.useRef)(Date.now()),k=(0,react_1.useRef)(null),[y,X]=(0,react_1.useState)(null);(0,react_1.useEffect)(()=>{let e=!0;const t=async()=>{const a=await(0,NativeInspector_1.getNativeSystemMetrics)();e&&a&&X(a)};t();const o=setInterval(t,2e3);return()=>{e=!1,clearInterval(o)}},[]),(0,react_1.useEffect)(()=>{if((0,NativeInspector_1.isNativeModuleAvailable)())return(0,NativeInspector_1.startNativeFpsMonitoring)(),()=>{(0,NativeInspector_1.stopNativeFpsMonitoring)()}},[]),(0,react_1.useEffect)(()=>{if(!i)return;let e=!0,t=0,o=0,a=Date.now();const c=async()=>{if(!e)return;const p=Date.now(),T=p-R.current;R.current=p;const u=Math.max(0,T-16.67);if(u>o&&(o=u),t++,p-a>=1e3){const A=p-a;let l=Math.min(120,Math.max(0,Math.round(t*1e3/A)));if((0,NativeInspector_1.isNativeModuleAvailable)())try{const n=await(0,NativeInspector_1.getNativeFpsMetrics)();n&&n.fps>0&&(l=Math.round(n.fps))}catch{}if(d(l),N(n=>Math.min(n,l)),P(n=>Math.max(n,l)),j(n=>n+t),$(Number(o.toFixed(1))),l<55&&O(n=>n+1),K(n=>{const V=[...n.slice(-19),l],re=V.reduce((te,oe)=>te+oe,0);return H(Math.round(re/V.length)),V}),l<50){const n=(1e3/l).toFixed(1);(0,performanceTracker_1.logPerformanceEvent)({type:"fps_drop",category:"render",fps:l,durationMs:Number(n),label:r("performance.liveFpsDip",{fps:l}),detail:r("performance.liveFpsDipDetail",{duration:n}),source:r("performance.uiRenderThread"),breakdown:{jsTimeMs:Number((1e3/l*.65).toFixed(1)),uiTimeMs:Number((1e3/l*.35).toFixed(1))},advice:r("performance.liveFpsDipAdvice"),severity:l<30?"critical":"warning"})}t=0,o=0,a=p}k.current=requestAnimationFrame(c)};return R.current=Date.now(),k.current=requestAnimationFrame(c),()=>{e=!1,k.current&&cancelAnimationFrame(k.current)}},[i]);const F=(0,react_1.useMemo)(()=>M.filter(e=>{let t=!0;if(f&&f.trim().length>0){const a=f.trim().toLowerCase().split(/\s+/).filter(Boolean),c=[e.label||"",e.detail||"",e.source||"",e.category||"",e.severity||"",e.bottleneckThread||""].join(" ").toLowerCase();t=a.every(p=>c.includes(p))}const o=x==="ALL"?!0:x==="JANKY"?e.severity==="warning"||e.severity==="critical":x==="NAVIGATION"?e.category==="navigation":x==="RENDER"?e.category==="render":x==="MEMORY"?e.category==="memory":e.category==="io"||e.category==="bridge";return t&&o}),[M,f,x]),z=(0,react_1.useMemo)(()=>m>=58?{score:"98/100",grade:r("performance.excellent"),color:AppColors_1.AppColors.emerald600,bg:AppColors_1.AppColors.greenBg}:m>=50?{score:"84/100",grade:r("performance.good"),color:AppColors_1.AppColors.firebaseOrange,bg:AppColors_1.AppColors.amberBg}:{score:"58/100",grade:r("performance.needsOptimization"),color:AppColors_1.AppColors.errorColor,bg:AppColors_1.AppColors.errorCardBg},[m,r]),w=(0,react_1.useMemo)(()=>{const e=(0,helpers_1.getRuntimeDiagnostics)(),t={hermes:r("performance.hermesAot"),v8:r("performance.v8Jit"),jsc:r("performance.jscEngine")},o={hermes:r("performance.bytecodeCompiled"),v8:r("performance.jitEngine"),jsc:r("performance.webkitEngine")},a={fabric:r("performance.fabricJsi"),paper:r("performance.paperBridge")},c={fabric:r("performance.directCppBindings"),paper:r("performance.asyncJsonBridge")};return{jsEngineName:t[e.engineType],jsEngineSub:o[e.engineType],uiArchName:a[e.archType],uiArchSub:c[e.archType],usedHeapMb:e.usedHeapMb,totalAllocMb:e.totalAllocMb}},[r]),C=(0,react_1.useMemo)(()=>{const e=m>0?1e3/m:16.67,t=Number(Math.max(1,Math.min(e*.45,2+S)).toFixed(1)),o=Number(Math.max(1,e*.2).toFixed(1)),a=Number(Math.max(1,e*.25).toFixed(1)),c=t+o+a,p=Math.max(0,Number((16.67-c).toFixed(1))),T=Math.max(0,Math.min(100,Math.round(p/16.67*100)));return{jsTime:t,layoutTime:o,renderTime:a,freeTime:p,headroomPercent:T}},[m,S]),[v,Z]=(0,react_1.useState)(null),B=320,_=64,b=(0,react_1.useMemo)(()=>{const e=h.length>0?h:[60,60],t=B/Math.max(1,e.length-1),o=e.map((u,A)=>{const l=Math.max(0,Math.min(60,u)),n=Number((A*t).toFixed(1)),V=Number((_-l/60*(_-14)-6).toFixed(1));return{x:n,y:V,val:u}});let a=`M ${o[0].x} ${o[0].y}`;for(let u=0;u<o.length-1;u++){const A=o[u],l=o[u+1],n=Number(((A.x+l.x)/2).toFixed(1));a+=` C ${n} ${A.y}, ${n} ${l.y}, ${l.x} ${l.y}`}const c=o[o.length-1],p=o[0],T=`${a} L ${c.x} ${_} L ${p.x} ${_} Z`;return{linePath:a,areaPath:T,coords:o}},[h]),Q=(0,react_1.useMemo)(()=>{let e=0,t=0,o=0,a=0;h.forEach(p=>{p>=55?e++:p>=30?t++:p>=20?o++:a++});const c=Math.max(1,h.length);return[{key:"optimal",label:r("performance.optimalBucket"),count:e,percent:Number((e/c*100).toFixed(0)),color:AppColors_1.AppColors.emerald500,bgColor:AppColors_1.AppColors.emerald100},{key:"minorJank",label:r("performance.minorJankBucket"),count:t,percent:Number((t/c*100).toFixed(0)),color:AppColors_1.AppColors.amber500,bgColor:AppColors_1.AppColors.amber100},{key:"noticeableJank",label:r("performance.noticeableJankBucket"),count:o,percent:Number((o/c*100).toFixed(0)),color:AppColors_1.AppColors.firebaseOrange,bgColor:AppColors_1.AppColors.lightOrange},{key:"severeFreeze",label:r("performance.severeFreezeBucket"),count:a,percent:Number((a/c*100).toFixed(0)),color:AppColors_1.AppColors.errorColor,bgColor:AppColors_1.AppColors.errorCardBg}]},[h,r]),ee=()=>{(0,performanceTracker_1.clearPerformanceEvents)()},D=v!==null&&b.coords[v]?b.coords[v]:null;return<react_native_1.View style={perfStyles.container}>
       
       <react_native_1.View style={perfStyles.headerBar}>
         <react_native_1.View style={perfStyles.searchBox}>
-          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
-          <react_native_1.TextInput placeholder={t('performance.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={perfStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
-          {search ? (<TouchableScale_1.default onPress={() => setSearch('')}>
-              <NetworkIcons_1.CircleXIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-            </TouchableScale_1.default>) : null}
+          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak}size={15}/>
+          <react_native_1.TextInput placeholder={r("performance.searchPlaceholder")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={f}onChangeText={I}style={perfStyles.searchInput}autoCapitalize="none"autoCorrect={!1}/>
+          {f?<TouchableScale_1.default onPress={()=>I("")}>
+              <NetworkIcons_1.CircleXIcon color={AppColors_1.AppColors.grayTextWeak}size={16}/>
+            </TouchableScale_1.default>:null}
         </react_native_1.View>
 
         
-        <TouchableScale_1.default onPress={() => {
-            setIsRecording(prev => {
-                const next = !prev;
-                (0, telemetry_1.trackInspectorScreenRecord)(next ? 'start' : 'stop', 'performance_fps');
-                return next;
-            });
-        }} style={[
-            perfStyles.recordToggleBtn,
-            isRecording
-                ? perfStyles.recordToggleActive
-                : perfStyles.recordToggleInactive,
-        ]}>
-          <react_native_1.View style={[
-            perfStyles.recordingDot,
-            {
-                backgroundColor: isRecording
-                    ? AppColors_1.AppColors.errorColor
-                    : AppColors_1.AppColors.grayTextWeak,
-            },
-        ]}/>
-          <react_native_1.Text style={[
-            perfStyles.recordToggleText,
-            {
-                color: isRecording
-                    ? AppColors_1.AppColors.errorColor
-                    : AppColors_1.AppColors.grayTextWeak,
-            },
-        ]}>
-            {isRecording
-            ? t('performance.recording')
-            : t('performance.paused')}
+        <TouchableScale_1.default onPress={()=>{g(e=>{const t=!e;return(0,telemetry_1.trackInspectorScreenRecord)(t?"start":"stop","performance_fps"),t})}}style={[perfStyles.recordToggleBtn,i?perfStyles.recordToggleActive:perfStyles.recordToggleInactive]}>
+          <react_native_1.View style={[perfStyles.recordingDot,{backgroundColor:i?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.grayTextWeak}]}/>
+          <react_native_1.Text style={[perfStyles.recordToggleText,{color:i?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.grayTextWeak}]}>
+            {r(i?"performance.recording":"performance.paused")}
           </react_native_1.Text>
         </TouchableScale_1.default>
       </react_native_1.View>
@@ -415,85 +22,37 @@ const PerformanceTab = react_1.default.memo(() => {
 
       
       <react_native_1.View style={perfStyles.categoryScrollWrapper}>
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>
-          {[
-            {
-                key: 'ALL',
-                label: t('performance.catAll'),
-                icon: (color) => <NetworkIcons_1.PerformanceIcon size={12} color={color}/>,
-            },
-            {
-                key: 'JANKY',
-                label: t('performance.catJanky'),
-                icon: (color) => <NetworkIcons_1.CircleAlertIcon size={12} color={color}/>,
-            },
-            {
-                key: 'NAVIGATION',
-                label: t('performance.catNavigation'),
-                icon: (color) => <NetworkIcons_1.MapIcon size={12} color={color}/>,
-            },
-            {
-                key: 'RENDER',
-                label: t('performance.catRender'),
-                icon: (color) => <NetworkIcons_1.AtomIcon size={12} color={color}/>,
-            },
-            {
-                key: 'MEMORY',
-                label: t('performance.catMemory'),
-                icon: (color) => <NetworkIcons_1.BrainIcon size={12} color={color}/>,
-            },
-            {
-                key: 'IO',
-                label: t('performance.catIo'),
-                icon: (color) => <NetworkIcons_1.GlobeIcon size={12} color={color}/>,
-            },
-        ].map(cat => {
-            const isSelected = filterCategory === cat.key;
-            const iconColor = isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak;
-            return (<TouchableScale_1.default key={cat.key} onPress={() => setFilterCategory(cat.key)} style={[
-                    perfStyles.categoryChip,
-                    isSelected && perfStyles.categoryChipActive,
-                    { flexDirection: 'row', alignItems: 'center', gap: 5 },
-                ]}>
-                {cat.icon(iconColor)}
-                <react_native_1.Text style={[
-                    perfStyles.categoryChipText,
-                    isSelected && perfStyles.categoryChipTextActive,
-                ]}>
-                  {cat.label}
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={perfStyles.categoryScrollView}contentContainerStyle={perfStyles.categoryScroll}>
+          {[{key:"ALL",label:r("performance.catAll"),icon:e=><NetworkIcons_1.PerformanceIcon size={12}color={e}/>},{key:"JANKY",label:r("performance.catJanky"),icon:e=><NetworkIcons_1.CircleAlertIcon size={12}color={e}/>},{key:"NAVIGATION",label:r("performance.catNavigation"),icon:e=><NetworkIcons_1.MapIcon size={12}color={e}/>},{key:"RENDER",label:r("performance.catRender"),icon:e=><NetworkIcons_1.AtomIcon size={12}color={e}/>},{key:"MEMORY",label:r("performance.catMemory"),icon:e=><NetworkIcons_1.BrainIcon size={12}color={e}/>},{key:"IO",label:r("performance.catIo"),icon:e=><NetworkIcons_1.GlobeIcon size={12}color={e}/>}].map(e=>{const t=x===e.key,o=t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayTextWeak;return<TouchableScale_1.default key={e.key}onPress={()=>Y(e.key)}style={[perfStyles.categoryChip,t&&perfStyles.categoryChipActive,{flexDirection:"row",alignItems:"center",gap:5}]}>
+                {e.icon(o)}
+                <react_native_1.Text style={[perfStyles.categoryChipText,t&&perfStyles.categoryChipTextActive]}>
+                  {e.label}
                 </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })}
+              </TouchableScale_1.default>})}
         </react_native_1.ScrollView>
       </react_native_1.View>
 
       
-      <react_native_1.ScrollView style={perfStyles.scrollBody} contentContainerStyle={perfStyles.scrollContent} showsVerticalScrollIndicator={false}>
+      <react_native_1.ScrollView style={perfStyles.scrollBody}contentContainerStyle={perfStyles.scrollContent}showsVerticalScrollIndicator={!1}>
         
         <react_native_1.View style={perfStyles.heroCard}>
           <react_native_1.View style={perfStyles.heroHeaderRow}>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={17}/>
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple}size={17}/>
               <react_native_1.View>
                 <react_native_1.Text style={perfStyles.heroTitle}>
-                  {t('performance.fpsAreaChartTitle')}
+                  {r("performance.fpsAreaChartTitle")}
                 </react_native_1.Text>
                 <react_native_1.Text style={perfStyles.heroSubTitle}>
-                  {t('performance.fpsAreaChartSub')}
+                  {r("performance.fpsAreaChartSub")}
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
 
             
-            <react_native_1.View style={[
-            perfStyles.scorePill,
-            { backgroundColor: performanceScore.bg },
-        ]}>
-              <react_native_1.Text style={[
-            perfStyles.scorePillText,
-            { color: performanceScore.color },
-        ]}>
-                {performanceScore.grade}
+            <react_native_1.View style={[perfStyles.scorePill,{backgroundColor:z.bg}]}>
+              <react_native_1.Text style={[perfStyles.scorePillText,{color:z.color}]}>
+                {z.grade}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
@@ -501,134 +60,96 @@ const PerformanceTab = react_1.default.memo(() => {
           
           <react_native_1.View style={perfStyles.primaryFpsRow}>
             <react_native_1.View style={perfStyles.fpsBigNumberBox}>
-              <react_native_1.Text style={[
-            perfStyles.fpsBigNumber,
-            {
-                color: currentFps >= 55
-                    ? AppColors_1.AppColors.emerald600
-                    : currentFps >= 40
-                        ? AppColors_1.AppColors.firebaseOrange
-                        : AppColors_1.AppColors.errorColor,
-            },
-        ]}>
-                {currentFps}
+              <react_native_1.Text style={[perfStyles.fpsBigNumber,{color:s>=55?AppColors_1.AppColors.emerald600:s>=40?AppColors_1.AppColors.firebaseOrange:AppColors_1.AppColors.errorColor}]}>
+                {s}
               </react_native_1.Text>
-              <react_native_1.Text style={perfStyles.fpsUnit}>{t('performance.fpsUnit')}</react_native_1.Text>
+              <react_native_1.Text style={perfStyles.fpsUnit}>{r("performance.fpsUnit")}</react_native_1.Text>
             </react_native_1.View>
 
             <react_native_1.View style={perfStyles.fpsStatsGrid}>
               <react_native_1.View style={perfStyles.statItem}>
                 <react_native_1.Text style={perfStyles.statLabel}>
-                  {t('performance.avgFrameTime')}
+                  {r("performance.avgFrameTime")}
                 </react_native_1.Text>
-                <react_native_1.Text style={perfStyles.statValue}>{avgFps}</react_native_1.Text>
+                <react_native_1.Text style={perfStyles.statValue}>{m}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={perfStyles.statItem}>
                 <react_native_1.Text style={perfStyles.statLabel}>
-                  {t('performance.peakTime')}
+                  {r("performance.peakTime")}
                 </react_native_1.Text>
-                <react_native_1.Text style={[
-            perfStyles.statValue,
-            minFps < 50 && { color: AppColors_1.AppColors.firebaseOrange },
-        ]}>
-                  {minFps}
+                <react_native_1.Text style={[perfStyles.statValue,W<50&&{color:AppColors_1.AppColors.firebaseOrange}]}>
+                  {W}
                 </react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={perfStyles.statItem}>
                 <react_native_1.Text style={perfStyles.statLabel}>
-                  {t('performance.jsLag')}
+                  {r("performance.jsLag")}
                 </react_native_1.Text>
-                <react_native_1.Text style={[
-            perfStyles.statValue,
-            jsLagMs > 5 && { color: AppColors_1.AppColors.firebaseOrange },
-        ]}>
-                  {jsLagMs}ms
+                <react_native_1.Text style={[perfStyles.statValue,S>5&&{color:AppColors_1.AppColors.firebaseOrange}]}>
+                  {S}ms
                 </react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={perfStyles.statItem}>
                 <react_native_1.Text style={perfStyles.statLabel}>
-                  {t('performance.jankRate')}
+                  {r("performance.jankRate")}
                 </react_native_1.Text>
                 <react_native_1.Text style={perfStyles.statValue}>
-                  {totalFrames > 0
-            ? `${((jankyFrameCount / Math.max(1, totalFrames / 60)) *
-                100).toFixed(0)}%`
-            : '0%'}
+                  {L>0?`${(E/Math.max(1,L/60)*100).toFixed(0)}%`:"0%"}
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
           </react_native_1.View>
 
           
-          {activeScrubPoint && (<react_native_1.View style={perfStyles.graphScrubTooltip}>
+          {D&&<react_native_1.View style={perfStyles.graphScrubTooltip}>
               <react_native_1.Text style={perfStyles.graphScrubTooltipText}>
-                {activeScrubPoint.val} FPS •{' '}
-                {Number((1000 / Math.max(1, activeScrubPoint.val)).toFixed(1))}
+                {D.val} FPS •{" "}
+                {Number((1e3/Math.max(1,D.val)).toFixed(1))}
                 ms
               </react_native_1.Text>
-            </react_native_1.View>)}
+            </react_native_1.View>}
 
           
           <react_native_1.View style={perfStyles.svgGraphContainer}>
-            <react_native_svg_1.default width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`} preserveAspectRatio="none">
+            <react_native_svg_1.default width="100%"height={_}viewBox={`0 0 ${B} ${_}`}preserveAspectRatio="none">
               <react_native_svg_1.Defs>
-                <react_native_svg_1.LinearGradient id="fpsAreaGradient" x1="0" y1="0" x2="0" y2="1">
-                  <react_native_svg_1.Stop offset="0%" stopColor={avgFps >= 55
-            ? AppColors_1.AppColors.emerald500
-            : avgFps >= 40
-                ? AppColors_1.AppColors.amber500
-                : AppColors_1.AppColors.errorColor} stopOpacity="0.32"/>
-                  <react_native_svg_1.Stop offset="100%" stopColor={avgFps >= 55
-            ? AppColors_1.AppColors.emerald500
-            : avgFps >= 40
-                ? AppColors_1.AppColors.amber500
-                : AppColors_1.AppColors.errorColor} stopOpacity="0.02"/>
+                <react_native_svg_1.LinearGradient id="fpsAreaGradient"x1="0"y1="0"x2="0"y2="1">
+                  <react_native_svg_1.Stop offset="0%"stopColor={m>=55?AppColors_1.AppColors.emerald500:m>=40?AppColors_1.AppColors.amber500:AppColors_1.AppColors.errorColor}stopOpacity="0.32"/>
+                  <react_native_svg_1.Stop offset="100%"stopColor={m>=55?AppColors_1.AppColors.emerald500:m>=40?AppColors_1.AppColors.amber500:AppColors_1.AppColors.errorColor}stopOpacity="0.02"/>
                 </react_native_svg_1.LinearGradient>
               </react_native_svg_1.Defs>
 
               
-              <react_native_svg_1.Line x1="0" y1="7" x2={svgGraphWidth} y2="7" stroke={AppColors_1.AppColors.emerald500} strokeWidth="1" strokeDasharray="4,4" opacity="0.4"/>
+              <react_native_svg_1.Line x1="0"y1="7"x2={B}y2="7"stroke={AppColors_1.AppColors.emerald500}strokeWidth="1"strokeDasharray="4,4"opacity="0.4"/>
 
               
-              <react_native_svg_1.Line x1="0" y1={svgGraphHeight / 2} x2={svgGraphWidth} y2={svgGraphHeight / 2} stroke={AppColors_1.AppColors.amber500} strokeWidth="0.8" strokeDasharray="3,3" opacity="0.3"/>
+              <react_native_svg_1.Line x1="0"y1={_/2}x2={B}y2={_/2}stroke={AppColors_1.AppColors.amber500}strokeWidth="0.8"strokeDasharray="3,3"opacity="0.3"/>
 
               
-              {fpsGraphData.areaPath ? (<react_native_svg_1.Path d={fpsGraphData.areaPath} fill="url(#fpsAreaGradient)"/>) : null}
+              {b.areaPath?<react_native_svg_1.Path d={b.areaPath}fill="url(#fpsAreaGradient)"/>:null}
 
               
-              {fpsGraphData.linePath ? (<react_native_svg_1.Path d={fpsGraphData.linePath} fill="none" stroke={avgFps >= 55
-                ? AppColors_1.AppColors.emerald600
-                : avgFps >= 40
-                    ? AppColors_1.AppColors.amber600
-                    : AppColors_1.AppColors.errorColor} strokeWidth="2.2"/>) : null}
+              {b.linePath?<react_native_svg_1.Path d={b.linePath}fill="none"stroke={m>=55?AppColors_1.AppColors.emerald600:m>=40?AppColors_1.AppColors.amber600:AppColors_1.AppColors.errorColor}strokeWidth="2.2"/>:null}
 
               
-              {fpsGraphData.coords.map((c, idx) => {
-            const isSelected = selectedFpsPointIdx === idx;
-            const isDip = c.val < 50;
-            return (<react_native_svg_1.G key={idx}>
-                    {isDip && (<react_native_svg_1.Circle cx={c.x} cy={c.y} r="4" fill={AppColors_1.AppColors.errorColor} opacity="0.25"/>)}
-                    <react_native_svg_1.Circle cx={c.x} cy={c.y} r={isSelected ? 4 : isDip ? 2.5 : 1.8} fill={isSelected
-                    ? AppColors_1.AppColors.brandPurple
-                    : isDip
-                        ? AppColors_1.AppColors.errorColor
-                        : AppColors_1.AppColors.emerald600} stroke={AppColors_1.AppColors.white} strokeWidth={isSelected ? 1.5 : 0.8}/>
-                  </react_native_svg_1.G>);
-        })}
+              {b.coords.map((e,t)=>{const o=v===t,a=e.val<50;return<react_native_svg_1.G key={t}>
+                    {a&&<react_native_svg_1.Circle cx={e.x}cy={e.y}r="4"fill={AppColors_1.AppColors.errorColor}opacity="0.25"/>}
+                    <react_native_svg_1.Circle cx={e.x}cy={e.y}r={o?4:a?2.5:1.8}fill={o?AppColors_1.AppColors.brandPurple:a?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.emerald600}stroke={AppColors_1.AppColors.white}strokeWidth={o?1.5:.8}/>
+                  </react_native_svg_1.G>})}
             </react_native_svg_1.default>
 
             
             <react_native_1.View style={perfStyles.svgTouchOverlay}>
-              {fpsGraphData.coords.map((_, idx) => (<react_native_1.TouchableOpacity key={idx} style={perfStyles.svgTouchCol} activeOpacity={0.7} onPress={() => setSelectedFpsPointIdx(selectedFpsPointIdx === idx ? null : idx)}/>))}
+              {b.coords.map((e,t)=><react_native_1.TouchableOpacity key={t}style={perfStyles.svgTouchCol}activeOpacity={.7}onPress={()=>Z(v===t?null:t)}/>)}
             </react_native_1.View>
           </react_native_1.View>
 
           <react_native_1.View style={perfStyles.sparklineFooter}>
             <react_native_1.Text style={perfStyles.sparklineFooterText}>
-              {t('performance.realtimeWindow')}
+              {r("performance.realtimeWindow")}
             </react_native_1.Text>
             <react_native_1.Text style={perfStyles.sparklineFooterTarget}>
-              {t('performance.target60Fps', { fps: avgFps })}
+              {r("performance.target60Fps",{fps:m})}
             </react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
@@ -636,55 +157,37 @@ const PerformanceTab = react_1.default.memo(() => {
         
         <react_native_1.View style={perfStyles.budgetCard}>
           <react_native_1.View style={perfStyles.budgetHeader}>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple} size={15}/>
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple}size={15}/>
               <react_native_1.View>
                 <react_native_1.Text style={perfStyles.budgetTitle}>Native Hardware & System Health</react_native_1.Text>
                 <react_native_1.Text style={perfStyles.heroSubTitle}>Live kernel metrics, resident RAM, and thermal state</react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
-            {systemMetrics && (<react_native_1.View style={{
-                paddingHorizontal: 7,
-                paddingVertical: 2.5,
-                borderRadius: 5,
-                backgroundColor: systemMetrics.thermalState === 'nominal'
-                    ? `${AppColors_1.AppColors.emerald600}18`
-                    : systemMetrics.thermalState === 'fair'
-                        ? `${AppColors_1.AppColors.amber800Warm}18`
-                        : `${AppColors_1.AppColors.errorColor}18`,
-            }}>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 9.5,
-                color: systemMetrics.thermalState === 'nominal'
-                    ? AppColors_1.AppColors.emerald600
-                    : systemMetrics.thermalState === 'fair'
-                        ? AppColors_1.AppColors.amber800Warm
-                        : AppColors_1.AppColors.errorColor,
-                textTransform: 'uppercase',
-            }}>
-                  {systemMetrics.thermalState} THERMAL
+            {y&&<react_native_1.View style={{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5,backgroundColor:y.thermalState==="nominal"?`${AppColors_1.AppColors.emerald600}18`:y.thermalState==="fair"?`${AppColors_1.AppColors.amber800Warm}18`:`${AppColors_1.AppColors.errorColor}18`}}>
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:y.thermalState==="nominal"?AppColors_1.AppColors.emerald600:y.thermalState==="fair"?AppColors_1.AppColors.amber800Warm:AppColors_1.AppColors.errorColor,textTransform:"uppercase"}}>
+                  {y.thermalState} THERMAL
                 </react_native_1.Text>
-              </react_native_1.View>)}
+              </react_native_1.View>}
           </react_native_1.View>
 
-          <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 }}>
-            <react_native_1.View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors_1.AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors_1.AppColors.dividerColor }}>
-              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 9.5, color: AppColors_1.AppColors.grayTextWeak }}>Resident RAM</react_native_1.Text>
-              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 13, color: AppColors_1.AppColors.brandPurple, marginTop: 2 }}>
-                {systemMetrics ? `${systemMetrics.residentRamMb.toFixed(1)} MB` : '18.4 MB'}
+          <react_native_1.View style={{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:10}}>
+            <react_native_1.View style={{flex:1,minWidth:100,backgroundColor:AppColors_1.AppColors.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor}}>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak}}>Resident RAM</react_native_1.Text>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.brandPurple,marginTop:2}}>
+                {y?`${y.residentRamMb.toFixed(1)} MB`:"18.4 MB"}
               </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors_1.AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors_1.AppColors.dividerColor }}>
-              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 9.5, color: AppColors_1.AppColors.grayTextWeak }}>Total Physical RAM</react_native_1.Text>
-              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 13, color: AppColors_1.AppColors.primaryBlack, marginTop: 2 }}>
-                {systemMetrics ? `${Math.round(systemMetrics.totalPhysicalRamMb)} MB` : '3840 MB'}
+            <react_native_1.View style={{flex:1,minWidth:100,backgroundColor:AppColors_1.AppColors.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor}}>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak}}>Total Physical RAM</react_native_1.Text>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack,marginTop:2}}>
+                {y?`${Math.round(y.totalPhysicalRamMb)} MB`:"3840 MB"}
               </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors_1.AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors_1.AppColors.dividerColor }}>
-              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 9.5, color: AppColors_1.AppColors.grayTextWeak }}>Active CPU Cores</react_native_1.Text>
-              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 13, color: AppColors_1.AppColors.skyBlue, marginTop: 2 }}>
-                {systemMetrics ? `${systemMetrics.activeCpuCores} Cores` : '6 Cores'}
+            <react_native_1.View style={{flex:1,minWidth:100,backgroundColor:AppColors_1.AppColors.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor}}>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak}}>Active CPU Cores</react_native_1.Text>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.skyBlue,marginTop:2}}>
+                {y?`${y.activeCpuCores} Cores`:"6 Cores"}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
@@ -695,103 +198,79 @@ const PerformanceTab = react_1.default.memo(() => {
           <react_native_1.View style={perfStyles.budgetHeader}>
             <react_native_1.View>
               <react_native_1.Text style={perfStyles.budgetTitle}>
-                {t('performance.frameLatencyDistTitle')}
+                {r("performance.frameLatencyDistTitle")}
               </react_native_1.Text>
               <react_native_1.Text style={perfStyles.heroSubTitle}>
-                {t('performance.frameLatencyDistSub')}
+                {r("performance.frameLatencyDistSub")}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
 
           <react_native_1.View style={perfStyles.histogramContainer}>
-            {latencyBuckets.map(b => (<react_native_1.View key={b.key} style={perfStyles.histogramRow}>
+            {Q.map(e=><react_native_1.View key={e.key}style={perfStyles.histogramRow}>
                 <react_native_1.View style={perfStyles.histogramLabelCol}>
-                  <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: b.color }]}/>
-                  <react_native_1.Text style={perfStyles.histogramLabelText}>{b.label}</react_native_1.Text>
+                  <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:e.color}]}/>
+                  <react_native_1.Text style={perfStyles.histogramLabelText}>{e.label}</react_native_1.Text>
                 </react_native_1.View>
 
                 <react_native_1.View style={perfStyles.histogramBarCol}>
                   <react_native_1.View style={perfStyles.histogramTrack}>
-                    <react_native_1.View style={[
-                perfStyles.histogramBarFill,
-                {
-                    width: `${Math.max(b.percent > 0 ? 4 : 0, b.percent)}%`,
-                    backgroundColor: b.color,
-                },
-            ]}/>
+                    <react_native_1.View style={[perfStyles.histogramBarFill,{width:`${Math.max(e.percent>0?4:0,e.percent)}%`,backgroundColor:e.color}]}/>
                   </react_native_1.View>
                 </react_native_1.View>
 
                 <react_native_1.View style={perfStyles.histogramStatsCol}>
-                  <react_native_1.Text style={[
-                perfStyles.histogramPercentText,
-                { color: b.color },
-            ]}>
-                    {b.percent}%
+                  <react_native_1.Text style={[perfStyles.histogramPercentText,{color:e.color}]}>
+                    {e.percent}%
                   </react_native_1.Text>
                   <react_native_1.Text style={perfStyles.histogramCountText}>
-                    ({b.count})
+                    ({e.count})
                   </react_native_1.Text>
                 </react_native_1.View>
-              </react_native_1.View>))}
+              </react_native_1.View>)}
           </react_native_1.View>
         </react_native_1.View>
 
         
         <react_native_1.View style={perfStyles.budgetCard}>
           <react_native_1.View style={perfStyles.budgetHeader}>
-            <react_native_1.Text style={perfStyles.budgetTitle}>{t('performance.budgetUsage')}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.budgetTitle}>{r("performance.budgetUsage")}</react_native_1.Text>
             <react_native_1.Text style={perfStyles.budgetHeadroom}>
-              {t('performance.budgetHeadroom', {
-            time: frameBudgetStats.freeTime,
-            percent: frameBudgetStats.headroomPercent,
-        })}
+              {r("performance.budgetHeadroom",{time:C.freeTime,percent:C.headroomPercent})}
             </react_native_1.Text>
           </react_native_1.View>
 
           
           <react_native_1.View style={perfStyles.budgetBarContainer}>
-            <react_native_1.View style={[
-            perfStyles.budgetBarSegment,
-            { flex: Math.max(0.5, frameBudgetStats.jsTime), backgroundColor: AppColors_1.AppColors.sky400 },
-        ]}/>
-            <react_native_1.View style={[
-            perfStyles.budgetBarSegment,
-            { flex: Math.max(0.5, frameBudgetStats.layoutTime), backgroundColor: AppColors_1.AppColors.indigo500 },
-        ]}/>
-            <react_native_1.View style={[
-            perfStyles.budgetBarSegment,
-            { flex: Math.max(0.5, frameBudgetStats.renderTime), backgroundColor: AppColors_1.AppColors.pink400 },
-        ]}/>
-            <react_native_1.View style={[
-            perfStyles.budgetBarSegment,
-            { flex: Math.max(0.5, frameBudgetStats.freeTime), backgroundColor: AppColors_1.AppColors.emerald400 },
-        ]}/>
+            <react_native_1.View style={[perfStyles.budgetBarSegment,{flex:Math.max(.5,C.jsTime),backgroundColor:AppColors_1.AppColors.sky400}]}/>
+            <react_native_1.View style={[perfStyles.budgetBarSegment,{flex:Math.max(.5,C.layoutTime),backgroundColor:AppColors_1.AppColors.indigo500}]}/>
+            <react_native_1.View style={[perfStyles.budgetBarSegment,{flex:Math.max(.5,C.renderTime),backgroundColor:AppColors_1.AppColors.pink400}]}/>
+            <react_native_1.View style={[perfStyles.budgetBarSegment,{flex:Math.max(.5,C.freeTime),backgroundColor:AppColors_1.AppColors.emerald400}]}/>
           </react_native_1.View>
 
           <react_native_1.View style={perfStyles.budgetLegendGrid}>
             <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: AppColors_1.AppColors.sky400 }]}/>
+              <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:AppColors_1.AppColors.sky400}]}/>
               <react_native_1.Text style={perfStyles.legendText}>
-                {t('performance.jsExec', { time: frameBudgetStats.jsTime })}
+                {r("performance.jsExec",{time:C.jsTime})}
               </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: AppColors_1.AppColors.indigo500 }]}/>
+              <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:AppColors_1.AppColors.indigo500}]}/>
               <react_native_1.Text style={perfStyles.legendText}>
-                {t('performance.yogaLayoutTime', { time: frameBudgetStats.layoutTime })}
+                {r("performance.yogaLayoutTime",{time:C.layoutTime})}
               </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: AppColors_1.AppColors.pink400 }]}/>
+              <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:AppColors_1.AppColors.pink400}]}/>
               <react_native_1.Text style={perfStyles.legendText}>
-                {t('performance.uiRenderTime', { time: frameBudgetStats.renderTime })}
+                {r("performance.uiRenderTime",{time:C.renderTime})}
               </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: AppColors_1.AppColors.emerald400 }]}/>
-              <react_native_1.Text style={[perfStyles.legendText, { color: AppColors_1.AppColors.emerald600, fontFamily: AppFonts_1.AppFonts.interBold }]}>
-                {t('performance.freeTime', { time: frameBudgetStats.freeTime })}
+              <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:AppColors_1.AppColors.emerald400}]}/>
+              <react_native_1.Text style={[perfStyles.legendText,{color:AppColors_1.AppColors.emerald600,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                {r("performance.freeTime",{time:C.freeTime})}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
@@ -800,20 +279,20 @@ const PerformanceTab = react_1.default.memo(() => {
         
         <react_native_1.View style={perfStyles.engineSummaryGrid}>
           <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{t('performance.jsEngine')}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>{runtimeDiagnostics.jsEngineName}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummarySub}>{runtimeDiagnostics.jsEngineSub}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{r("performance.jsEngine")}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.engineSummaryValue}>{w.jsEngineName}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.engineSummarySub}>{w.jsEngineSub}</react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{t('performance.uiRenderThread')}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>{runtimeDiagnostics.uiArchName}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummarySub}>{runtimeDiagnostics.uiArchSub}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{r("performance.uiRenderThread")}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.engineSummaryValue}>{w.uiArchName}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.engineSummarySub}>{w.uiArchSub}</react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{t('performance.tabMemory')}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>{runtimeDiagnostics.usedHeapMb} MB</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{r("performance.tabMemory")}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.engineSummaryValue}>{w.usedHeapMb} MB</react_native_1.Text>
             <react_native_1.Text style={perfStyles.engineSummarySub}>
-              {t('performance.heapAllocatedSub', { allocated: runtimeDiagnostics.totalAllocMb })}
+              {r("performance.heapAllocatedSub",{allocated:w.totalAllocMb})}
             </react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
@@ -821,849 +300,155 @@ const PerformanceTab = react_1.default.memo(() => {
         
         <react_native_1.View style={perfStyles.logsHeaderRow}>
           <react_native_1.Text style={perfStyles.logsSectionHeading}>
-            {t('performance.recordedEvents')} ({filteredEvents.length})
+            {r("performance.recordedEvents")} ({F.length})
           </react_native_1.Text>
-          {events.length > 0 && (<TouchableScale_1.default onPress={clearEvents}>
-              <react_native_1.Text style={perfStyles.clearLink}>{t('common.clear')}</react_native_1.Text>
-            </TouchableScale_1.default>)}
+          {M.length>0&&<TouchableScale_1.default onPress={ee}>
+              <react_native_1.Text style={perfStyles.clearLink}>{r("common.clear")}</react_native_1.Text>
+            </TouchableScale_1.default>}
         </react_native_1.View>
 
-        {filteredEvents.length === 0 ? (<react_native_1.View style={perfStyles.emptyCard}>
-            <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber500} size={30}/>
+        {F.length===0?<react_native_1.View style={perfStyles.emptyCard}>
+            <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber500}size={30}/>
             <react_native_1.Text style={perfStyles.emptyTitle}>
-              {search.trim().length > 0 ? 'No Matching Events' : t('performance.emptyTitle')}
+              {f.trim().length>0?"No Matching Events":r("performance.emptyTitle")}
             </react_native_1.Text>
             <react_native_1.Text style={perfStyles.emptySub}>
-              {search.trim().length > 0
-                ? `No performance events match "${search}"`
-                : t('performance.emptySubtitle')}
+              {f.trim().length>0?`No performance events match "${f}"`:r("performance.emptySubtitle")}
             </react_native_1.Text>
-            {search.trim().length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} style={{
-                    marginTop: 10,
-                    paddingHorizontal: 14,
-                    paddingVertical: 6,
-                    borderRadius: 8,
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                }}>
-                <react_native_1.Text style={{ color: AppColors_1.AppColors.brandPurple, fontSize: 12, fontFamily: AppFonts_1.AppFonts.interBold }}>
+            {f.trim().length>0&&<TouchableScale_1.default onPress={()=>I("")}style={{marginTop:10,paddingHorizontal:14,paddingVertical:6,borderRadius:8,backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary}}>
+                <react_native_1.Text style={{color:AppColors_1.AppColors.brandPurple,fontSize:12,fontFamily:AppFonts_1.AppFonts.interBold}}>
                   Clear Search
                 </react_native_1.Text>
-              </TouchableScale_1.default>)}
-          </react_native_1.View>) : (filteredEvents.map(event => {
-            const isOptimal = event.severity === 'optimal';
-            const isWarning = event.severity === 'warning';
-            const isCritical = event.severity === 'critical';
-            const isExpanded = !!expandedEventIds[event.id];
-            const badgeBg = isOptimal ? AppColors_1.AppColors.greenBg : isWarning ? AppColors_1.AppColors.amberBg : AppColors_1.AppColors.errorCardBg;
-            const badgeBorder = isOptimal ? AppColors_1.AppColors.greenBorder : isWarning ? AppColors_1.AppColors.lightOrange : AppColors_1.AppColors.errorBorder;
-            const badgeColor = isOptimal ? AppColors_1.AppColors.emerald600 : isWarning ? AppColors_1.AppColors.amber700 : AppColors_1.AppColors.errorColor;
-            return (<TouchableScale_1.default key={event.id} onPress={() => toggleEventExpand(event.id)} style={[
-                    perfStyles.eventCard,
-                    isCritical && { borderColor: AppColors_1.AppColors.errorBorder, backgroundColor: AppColors_1.AppColors.errorCardBg },
-                ]}>
+              </TouchableScale_1.default>}
+          </react_native_1.View>:F.map(e=>{const t=e.severity==="optimal",o=e.severity==="warning",a=e.severity==="critical",c=!!G[e.id],p=t?AppColors_1.AppColors.greenBg:o?AppColors_1.AppColors.amberBg:AppColors_1.AppColors.errorCardBg,T=t?AppColors_1.AppColors.greenBorder:o?AppColors_1.AppColors.lightOrange:AppColors_1.AppColors.errorBorder,u=t?AppColors_1.AppColors.emerald600:o?AppColors_1.AppColors.amber700:AppColors_1.AppColors.errorColor;return<TouchableScale_1.default key={e.id}onPress={()=>J(e.id)}style={[perfStyles.eventCard,a&&{borderColor:AppColors_1.AppColors.errorBorder,backgroundColor:AppColors_1.AppColors.errorCardBg}]}>
                 <react_native_1.View style={perfStyles.eventTopRow}>
                   <react_native_1.View style={perfStyles.fpsBadgeGroup}>
-                    <react_native_1.View style={[
-                    perfStyles.fpsBadge,
-                    { backgroundColor: badgeBg, borderColor: badgeBorder },
-                ]}>
-                      <react_native_1.Text style={[perfStyles.fpsBadgeText, { color: badgeColor }]}>
-                        {event.fps} FPS
+                    <react_native_1.View style={[perfStyles.fpsBadge,{backgroundColor:p,borderColor:T}]}>
+                      <react_native_1.Text style={[perfStyles.fpsBadgeText,{color:u}]}>
+                        {e.fps} FPS
                       </react_native_1.Text>
                     </react_native_1.View>
 
                     
-                    <react_native_1.View style={[
-                    perfStyles.droppedBadge,
-                    (event.droppedFrames ?? Math.max(0, 60 - event.fps)) > 0
-                        ? perfStyles.droppedBadgeWarning
-                        : perfStyles.droppedBadgeOptimal,
-                ]}>
-                      <react_native_1.Text style={[
-                    perfStyles.droppedBadgeText,
-                    (event.droppedFrames ?? Math.max(0, 60 - event.fps)) > 0
-                        ? { color: AppColors_1.AppColors.red600 }
-                        : { color: AppColors_1.AppColors.emerald600 },
-                ]}>
-                        {(event.droppedFrames ?? Math.max(0, 60 - event.fps)) > 0
-                    ? t('performance.droppedFrames', { count: event.droppedFrames ?? Math.max(0, 60 - event.fps) })
-                    : t('performance.zeroDropped')}
+                    <react_native_1.View style={[perfStyles.droppedBadge,(e.droppedFrames??Math.max(0,60-e.fps))>0?perfStyles.droppedBadgeWarning:perfStyles.droppedBadgeOptimal]}>
+                      <react_native_1.Text style={[perfStyles.droppedBadgeText,(e.droppedFrames??Math.max(0,60-e.fps))>0?{color:AppColors_1.AppColors.red600}:{color:AppColors_1.AppColors.emerald600}]}>
+                        {(e.droppedFrames??Math.max(0,60-e.fps))>0?r("performance.droppedFrames",{count:e.droppedFrames??Math.max(0,60-e.fps)}):r("performance.zeroDropped")}
                       </react_native_1.Text>
                     </react_native_1.View>
 
                     
-                    {event.bottleneckThread && (<react_native_1.View style={[perfStyles.bottleneckTag, { flexDirection: 'row', alignItems: 'center', gap: 3 }]}>
-                        {event.bottleneckThread === 'JS Thread' && (<NetworkIcons_1.BoltIcon size={10} color={AppColors_1.AppColors.warningIconGold}/>)}
+                    {e.bottleneckThread&&<react_native_1.View style={[perfStyles.bottleneckTag,{flexDirection:"row",alignItems:"center",gap:3}]}>
+                        {e.bottleneckThread==="JS Thread"&&<NetworkIcons_1.BoltIcon size={10}color={AppColors_1.AppColors.warningIconGold}/>}
                         <react_native_1.Text style={perfStyles.bottleneckTagText}>
-                          {event.bottleneckThread === 'JS Thread'
-                        ? t('performance.jsBound')
-                        : event.bottleneckThread === 'UI Thread'
-                            ? t('performance.uiBound')
-                            : t('performance.balanced')}
+                          {e.bottleneckThread==="JS Thread"?r("performance.jsBound"):e.bottleneckThread==="UI Thread"?r("performance.uiBound"):r("performance.balanced")}
                         </react_native_1.Text>
-                      </react_native_1.View>)}
+                      </react_native_1.View>}
                   </react_native_1.View>
 
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                    <CopyButton_1.default value={() => event} label={t('common.copyJson')}/>
-                    <NetworkIcons_1.ChevronIcon isExpanded={isExpanded} size={14} color={AppColors_1.AppColors.grayTextWeak}/>
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <CopyButton_1.default value={()=>e}label={r("common.copyJson")}/>
+                    <NetworkIcons_1.ChevronIcon isExpanded={c}size={14}color={AppColors_1.AppColors.grayTextWeak}/>
                   </react_native_1.View>
                 </react_native_1.View>
 
                 
-                <react_native_1.View style={{ marginTop: 4 }}>
-                  <HighlightText_1.default text={event.label} search={search} style={perfStyles.eventLabel} highlightStyle={perfStyles.searchHighlight}/>
+                <react_native_1.View style={{marginTop:4}}>
+                  <HighlightText_1.default text={e.label}search={f}style={perfStyles.eventLabel}highlightStyle={perfStyles.searchHighlight}/>
                   <react_native_1.View style={perfStyles.eventMetaRow}>
                     <react_native_1.Text style={perfStyles.eventMeta}>
-                      {t('performance.msTotal', {
-                    duration: event.durationMs,
-                    time: new Date(event.timestamp).toLocaleTimeString(),
-                })}
+                      {r("performance.msTotal",{duration:e.durationMs,time:new Date(e.timestamp).toLocaleTimeString()})}
                     </react_native_1.Text>
                     <react_native_1.Text style={perfStyles.eventMetaDot}>•</react_native_1.Text>
-                    <react_native_1.Text style={[
-                    perfStyles.frameBudgetHint,
-                    event.durationMs > 16.67
-                        ? { color: AppColors_1.AppColors.amber800Warm }
-                        : { color: AppColors_1.AppColors.emerald600 },
-                ]}>
-                      {t('performance.frameBudgetMs', {
-                    time: event.durationMs,
-                    budget: Number(((event.durationMs / 16.67) * 100).toFixed(0)),
-                })}
+                    <react_native_1.Text style={[perfStyles.frameBudgetHint,e.durationMs>16.67?{color:AppColors_1.AppColors.amber800Warm}:{color:AppColors_1.AppColors.emerald600}]}>
+                      {r("performance.frameBudgetMs",{time:e.durationMs,budget:Number((e.durationMs/16.67*100).toFixed(0))})}
                     </react_native_1.Text>
                   </react_native_1.View>
                 </react_native_1.View>
 
                 
                 <react_native_1.View style={perfStyles.frameBarTrack}>
-                  <react_native_1.View style={[
-                    perfStyles.frameBarFill,
-                    {
-                        width: `${Math.min(100, Math.max(10, (event.durationMs / 33.33) * 100))}%`,
-                        backgroundColor: badgeColor,
-                    },
-                ]}/>
+                  <react_native_1.View style={[perfStyles.frameBarFill,{width:`${Math.min(100,Math.max(10,e.durationMs/33.33*100))}%`,backgroundColor:u}]}/>
                 </react_native_1.View>
 
-                <HighlightText_1.default text={event.detail} search={search} style={perfStyles.eventDetail} highlightStyle={perfStyles.searchHighlight}/>
+                <HighlightText_1.default text={e.detail}search={f}style={perfStyles.eventDetail}highlightStyle={perfStyles.searchHighlight}/>
 
                 
-                {isExpanded && (<react_native_1.View style={perfStyles.expandedDetailBox}>
+                {c&&<react_native_1.View style={perfStyles.expandedDetailBox}>
                     
-                    {(event.screenName || event.source) && (<react_native_1.View style={perfStyles.sourceRow}>
-                        <react_native_1.Text style={perfStyles.sourceTag}>{t('performance.screenContext')}</react_native_1.Text>
-                        <react_native_1.Text style={perfStyles.sourceText} numberOfLines={1}>
-                          {event.screenName || event.source}
+                    {(e.screenName||e.source)&&<react_native_1.View style={perfStyles.sourceRow}>
+                        <react_native_1.Text style={perfStyles.sourceTag}>{r("performance.screenContext")}</react_native_1.Text>
+                        <react_native_1.Text style={perfStyles.sourceText}numberOfLines={1}>
+                          {e.screenName||e.source}
                         </react_native_1.Text>
-                      </react_native_1.View>)}
+                      </react_native_1.View>}
 
                     
                     <react_native_1.View style={perfStyles.fpsMetricsGrid}>
                       <react_native_1.View style={perfStyles.fpsMetricItem}>
-                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{t('performance.target60Fps', { fps: event.fps })}</react_native_1.Text>
-                        <react_native_1.Text style={[perfStyles.fpsMetricVal, { color: badgeColor }]}>
-                          {event.fps} FPS
+                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{r("performance.target60Fps",{fps:e.fps})}</react_native_1.Text>
+                        <react_native_1.Text style={[perfStyles.fpsMetricVal,{color:u}]}>
+                          {e.fps} FPS
                         </react_native_1.Text>
                       </react_native_1.View>
                       <react_native_1.View style={perfStyles.fpsMetricItem}>
-                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{t('performance.frameDuration')}</react_native_1.Text>
+                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{r("performance.frameDuration")}</react_native_1.Text>
                         <react_native_1.Text style={perfStyles.fpsMetricVal}>
-                          {event.durationMs} ms
+                          {e.durationMs} ms
                         </react_native_1.Text>
                       </react_native_1.View>
                       <react_native_1.View style={perfStyles.fpsMetricItem}>
-                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{t('performance.jankRate')}</react_native_1.Text>
-                        <react_native_1.Text style={[
-                        perfStyles.fpsMetricVal,
-                        (event.droppedFrames ?? 0) > 0 ? { color: AppColors_1.AppColors.red600 } : { color: AppColors_1.AppColors.emerald600 },
-                    ]}>
-                          {event.droppedFrames ?? Math.max(0, 60 - event.fps)} frames
+                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{r("performance.jankRate")}</react_native_1.Text>
+                        <react_native_1.Text style={[perfStyles.fpsMetricVal,(e.droppedFrames??0)>0?{color:AppColors_1.AppColors.red600}:{color:AppColors_1.AppColors.emerald600}]}>
+                          {e.droppedFrames??Math.max(0,60-e.fps)} frames
                         </react_native_1.Text>
                       </react_native_1.View>
                       <react_native_1.View style={perfStyles.fpsMetricItem}>
-                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{t('performance.bottleneck')}</react_native_1.Text>
+                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{r("performance.bottleneck")}</react_native_1.Text>
                         <react_native_1.Text style={perfStyles.fpsMetricVal}>
-                          {event.bottleneckThread || t('performance.balanced')}
+                          {e.bottleneckThread||r("performance.balanced")}
                         </react_native_1.Text>
                       </react_native_1.View>
                     </react_native_1.View>
 
                     
-                    {event.breakdown && (<react_native_1.View style={perfStyles.breakdownGrid}>
+                    {e.breakdown&&<react_native_1.View style={perfStyles.breakdownGrid}>
                         <react_native_1.View style={perfStyles.breakdownCol}>
-                          <react_native_1.Text style={perfStyles.breakdownLabel}>{t('performance.jsThread')}</react_native_1.Text>
+                          <react_native_1.Text style={perfStyles.breakdownLabel}>{r("performance.jsThread")}</react_native_1.Text>
                           <react_native_1.Text style={perfStyles.breakdownVal}>
-                            {event.breakdown.jsTimeMs} ms
+                            {e.breakdown.jsTimeMs} ms
                           </react_native_1.Text>
                         </react_native_1.View>
                         <react_native_1.View style={perfStyles.breakdownCol}>
-                          <react_native_1.Text style={perfStyles.breakdownLabel}>{t('performance.uiThread')}</react_native_1.Text>
+                          <react_native_1.Text style={perfStyles.breakdownLabel}>{r("performance.uiThread")}</react_native_1.Text>
                           <react_native_1.Text style={perfStyles.breakdownVal}>
-                            {event.breakdown.uiTimeMs} ms
+                            {e.breakdown.uiTimeMs} ms
                           </react_native_1.Text>
                         </react_native_1.View>
-                        {event.breakdown.bridgeLatencyMs != null && (<react_native_1.View style={perfStyles.breakdownCol}>
-                            <react_native_1.Text style={perfStyles.breakdownLabel}>{t('performance.jsiLatency')}</react_native_1.Text>
+                        {e.breakdown.bridgeLatencyMs!=null&&<react_native_1.View style={perfStyles.breakdownCol}>
+                            <react_native_1.Text style={perfStyles.breakdownLabel}>{r("performance.jsiLatency")}</react_native_1.Text>
                             <react_native_1.Text style={perfStyles.breakdownVal}>
-                              {event.breakdown.bridgeLatencyMs} ms
+                              {e.breakdown.bridgeLatencyMs} ms
                             </react_native_1.Text>
-                          </react_native_1.View>)}
-                        {event.heapDeltaKb != null && (<react_native_1.View style={perfStyles.breakdownCol}>
-                            <react_native_1.Text style={perfStyles.breakdownLabel}>{t('performance.heapImpact')}</react_native_1.Text>
-                            <react_native_1.Text style={[
-                                perfStyles.breakdownVal,
-                                { color: event.heapDeltaKb > 0 ? AppColors_1.AppColors.amber700 : AppColors_1.AppColors.emerald600 },
-                            ]}>
-                              {event.heapDeltaKb > 0 ? `+${event.heapDeltaKb}` : event.heapDeltaKb} KB
+                          </react_native_1.View>}
+                        {e.heapDeltaKb!=null&&<react_native_1.View style={perfStyles.breakdownCol}>
+                            <react_native_1.Text style={perfStyles.breakdownLabel}>{r("performance.heapImpact")}</react_native_1.Text>
+                            <react_native_1.Text style={[perfStyles.breakdownVal,{color:e.heapDeltaKb>0?AppColors_1.AppColors.amber700:AppColors_1.AppColors.emerald600}]}>
+                              {e.heapDeltaKb>0?`+${e.heapDeltaKb}`:e.heapDeltaKb} KB
                             </react_native_1.Text>
-                          </react_native_1.View>)}
-                      </react_native_1.View>)}
+                          </react_native_1.View>}
+                      </react_native_1.View>}
 
                     
-                    {event.advice && (<react_native_1.View style={perfStyles.adviceCard}>
-                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                          <NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.purpleShade700} size={12}/>
-                          <react_native_1.Text style={perfStyles.adviceHeading}>{t('performance.optimizationTip')}</react_native_1.Text>
+                    {e.advice&&<react_native_1.View style={perfStyles.adviceCard}>
+                        <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                          <NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.purpleShade700}size={12}/>
+                          <react_native_1.Text style={perfStyles.adviceHeading}>{r("performance.optimizationTip")}</react_native_1.Text>
                         </react_native_1.View>
-                        <react_native_1.Text style={perfStyles.adviceBodyText}>{event.advice}</react_native_1.Text>
-                      </react_native_1.View>)}
-                  </react_native_1.View>)}
-              </TouchableScale_1.default>);
-        }))}
+                        <react_native_1.Text style={perfStyles.adviceBodyText}>{e.advice}</react_native_1.Text>
+                      </react_native_1.View>}
+                  </react_native_1.View>}
+              </TouchableScale_1.default>})}
 
-        <EndOfListFooter_1.default count={filteredEvents.length} label={t('performance.recordedEvents')}/>
+        <EndOfListFooter_1.default count={F.length}label={r("performance.recordedEvents")}/>
       </react_native_1.ScrollView>
-    </react_native_1.View>);
-});
-const perfStyles = react_native_1.StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-    },
-    headerBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-        backgroundColor: AppColors_1.AppColors.white,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-        gap: 8,
-    },
-    searchBox: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderRadius: 8,
-        paddingHorizontal: 8,
-        height: 36,
-        gap: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors_1.AppColors.primaryBlack,
-        paddingVertical: 0,
-    },
-    recordToggleBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 8,
-        paddingVertical: 6,
-        borderRadius: 7,
-        borderWidth: 1,
-    },
-    recordToggleActive: {
-        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
-        borderColor: `${AppColors_1.AppColors.errorColor}30`,
-    },
-    recordToggleInactive: {
-        backgroundColor: AppColors_1.AppColors.graySurface,
-        borderColor: AppColors_1.AppColors.dividerColor,
-    },
-    recordingDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-    },
-    recordToggleText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-    },
-    categoryScrollWrapper: {
-        backgroundColor: AppColors_1.AppColors.white,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-        height: 42,
-    },
-    categoryScrollView: {
-        flexGrow: 0,
-        height: 42,
-    },
-    categoryScroll: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 12,
-        height: 42,
-    },
-    categoryChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 12,
-        height: 28,
-        borderRadius: 14,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-    },
-    categoryChipActive: {
-        backgroundColor: AppColors_1.AppColors.brandPurple,
-        borderColor: AppColors_1.AppColors.brandPurple,
-    },
-    categoryChipText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors_1.AppColors.grayTextStrong,
-    },
-    categoryChipTextActive: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.white,
-    },
-    scrollBody: {
-        flex: 1,
-    },
-    scrollContent: {
-        padding: 12,
-        gap: 10,
-    },
-    heroCard: {
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 12,
-        padding: 14,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-        shadowColor: AppColors_1.AppColors.black,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.05,
-        shadowRadius: 3,
-        elevation: 1,
-    },
-    heroHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 10,
-    },
-    heroTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    heroSubTitle: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.grayTextWeak,
-        marginTop: 1,
-    },
-    scorePill: {
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 6,
-    },
-    scorePillText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10.5,
-    },
-    primaryFpsRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingVertical: 6,
-    },
-    fpsBigNumberBox: {
-        flexDirection: 'row',
-        alignItems: 'baseline',
-        gap: 4,
-        minWidth: 80,
-    },
-    fpsBigNumber: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 42,
-        lineHeight: 48,
-        letterSpacing: -1,
-        minWidth: 54,
-    },
-    fpsUnit: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    fpsStatsGrid: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    statItem: {
-        alignItems: 'center',
-        minWidth: 50,
-    },
-    statLabel: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    statValue: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors_1.AppColors.primaryBlack,
-        marginTop: 2,
-        textAlign: 'center',
-    },
-    graphScrubTooltip: {
-        alignSelf: 'center',
-        backgroundColor: AppColors_1.AppColors.primaryBlack,
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 6,
-        marginBottom: 4,
-    },
-    graphScrubTooltipText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors_1.AppColors.white,
-    },
-    svgGraphContainer: {
-        width: '100%',
-        height: 64,
-        marginTop: 6,
-        position: 'relative',
-        overflow: 'hidden',
-        borderRadius: 8,
-    },
-    svgTouchOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        flexDirection: 'row',
-    },
-    svgTouchCol: {
-        flex: 1,
-        height: '100%',
-    },
-    histogramContainer: {
-        gap: 8,
-        marginTop: 4,
-    },
-    histogramRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    histogramLabelCol: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        width: 140,
-    },
-    histogramLabelText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextStrong,
-    },
-    histogramBarCol: {
-        flex: 1,
-    },
-    histogramTrack: {
-        height: 8,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderRadius: 4,
-        overflow: 'hidden',
-    },
-    histogramBarFill: {
-        height: '100%',
-        borderRadius: 4,
-    },
-    histogramStatsCol: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        minWidth: 52,
-        justifyContent: 'flex-end',
-    },
-    histogramPercentText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10.5,
-    },
-    histogramCountText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    sparklineFooter: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 6,
-    },
-    sparklineFooterText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    sparklineFooterTarget: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors_1.AppColors.emerald600,
-    },
-    budgetCard: {
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-        gap: 8,
-    },
-    budgetHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    budgetTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    budgetHeadroom: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.emerald600,
-    },
-    budgetBarContainer: {
-        flexDirection: 'row',
-        height: 8,
-        borderRadius: 4,
-        overflow: 'hidden',
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        gap: 2,
-    },
-    budgetBarSegment: {
-        height: '100%',
-        borderRadius: 2,
-    },
-    budgetLegendGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 10,
-        marginTop: 2,
-    },
-    legendItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-    },
-    legendDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-    },
-    legendText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextStrong,
-    },
-    engineSummaryGrid: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    engineSummaryCard: {
-        flex: 1,
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 10,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-    },
-    engineSummaryLabel: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    engineSummaryValue: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors_1.AppColors.primaryBlack,
-        marginTop: 2,
-    },
-    engineSummarySub: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.grayTextWeak,
-        marginTop: 1,
-    },
-    logsHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 4,
-    },
-    logsSectionHeading: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    clearLink: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors_1.AppColors.purple,
-    },
-    eventCard: {
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 10,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-        gap: 6,
-    },
-    eventTopRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    fpsBadgeGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexWrap: 'wrap',
-    },
-    fpsBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    fpsBadgeText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
-    },
-    droppedBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    droppedBadgeWarning: {
-        backgroundColor: AppColors_1.AppColors.red100,
-        borderColor: AppColors_1.AppColors.errorBorder,
-    },
-    droppedBadgeOptimal: {
-        backgroundColor: AppColors_1.AppColors.green100,
-        borderColor: AppColors_1.AppColors.greenBorder,
-    },
-    droppedBadgeText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9.5,
-    },
-    bottleneckTag: {
-        backgroundColor: AppColors_1.AppColors.purpleShade50,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.purpleTint2,
-    },
-    bottleneckTagText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.purple,
-    },
-    eventMetaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginTop: 2,
-        flexWrap: 'wrap',
-    },
-    eventMetaDot: {
-        fontSize: 9,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    frameBudgetHint: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
-    },
-    frameBarTrack: {
-        height: 4,
-        borderRadius: 2,
-        backgroundColor: AppColors_1.AppColors.graySurface,
-        overflow: 'hidden',
-        marginVertical: 4,
-    },
-    frameBarFill: {
-        height: '100%',
-        borderRadius: 2,
-    },
-    fpsMetricsGrid: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 6,
-        padding: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-        justifyContent: 'space-between',
-        gap: 4,
-    },
-    fpsMetricItem: {
-        alignItems: 'center',
-        flex: 1,
-    },
-    fpsMetricLabel: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 8.5,
-        color: AppColors_1.AppColors.grayTextWeak,
-        textAlign: 'center',
-    },
-    fpsMetricVal: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.primaryBlack,
-        marginTop: 1,
-        textAlign: 'center',
-    },
-    eventLabel: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    eventMeta: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-        marginTop: 1,
-    },
-    eventDetail: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors_1.AppColors.grayTextStrong,
-        lineHeight: 15,
-    },
-    expandChevron: {
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-        marginLeft: 2,
-    },
-    expandedDetailBox: {
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderRadius: 8,
-        padding: 8,
-        marginTop: 4,
-        gap: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-    },
-    sourceRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    sourceTag: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 8.5,
-        color: AppColors_1.AppColors.purple,
-        backgroundColor: `${AppColors_1.AppColors.purple}14`,
-        paddingHorizontal: 4,
-        paddingVertical: 1,
-        borderRadius: 3,
-    },
-    sourceText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.grayTextStrong,
-        flex: 1,
-    },
-    breakdownGrid: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 6,
-        padding: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-        justifyContent: 'space-between',
-    },
-    breakdownCol: {
-        alignItems: 'center',
-        flex: 1,
-    },
-    breakdownLabel: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 9,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    breakdownVal: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.primaryBlack,
-        marginTop: 1,
-    },
-    adviceCard: {
-        backgroundColor: AppColors_1.AppColors.purpleTintBg,
-        borderRadius: 6,
-        padding: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.purpleBorder,
-    },
-    adviceHeading: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors_1.AppColors.purpleShade700,
-    },
-    adviceBodyText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.purple,
-        lineHeight: 14,
-        marginTop: 1,
-    },
-    searchHighlight: {
-        backgroundColor: AppColors_1.AppColors.yellowHighlight,
-        color: AppColors_1.AppColors.amber800,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-    },
-    emptyCard: {
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 12,
-        padding: 24,
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 8,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-    },
-    emptyTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    emptySub: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors_1.AppColors.grayTextWeak,
-        textAlign: 'center',
-        lineHeight: 16,
-    },
-});
-exports.default = PerformanceTab;
+    </react_native_1.View>}),perfStyles=react_native_1.StyleSheet.create({container:{flex:1,backgroundColor:AppColors_1.AppColors.grayBackground},headerBar:{flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:8,backgroundColor:AppColors_1.AppColors.white,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,gap:8},searchBox:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,paddingHorizontal:8,height:36,gap:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},searchInput:{flex:1,fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12,color:AppColors_1.AppColors.primaryBlack,paddingVertical:0},recordToggleBtn:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:8,paddingVertical:6,borderRadius:7,borderWidth:1},recordToggleActive:{backgroundColor:`${AppColors_1.AppColors.errorColor}14`,borderColor:`${AppColors_1.AppColors.errorColor}30`},recordToggleInactive:{backgroundColor:AppColors_1.AppColors.graySurface,borderColor:AppColors_1.AppColors.dividerColor},recordingDot:{width:6,height:6,borderRadius:3},recordToggleText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11},categoryScrollWrapper:{backgroundColor:AppColors_1.AppColors.white,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,height:42},categoryScrollView:{flexGrow:0,height:42},categoryScroll:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:12,height:42},categoryChip:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingHorizontal:12,height:28,borderRadius:14,backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},categoryChipActive:{backgroundColor:AppColors_1.AppColors.brandPurple,borderColor:AppColors_1.AppColors.brandPurple},categoryChipText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextStrong},categoryChipTextActive:{fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.white},scrollBody:{flex:1},scrollContent:{padding:12,gap:10},heroCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:14,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,shadowColor:AppColors_1.AppColors.black,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:3,elevation:1},heroHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10},heroTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack},heroSubTitle:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,marginTop:1},scorePill:{paddingHorizontal:8,paddingVertical:3,borderRadius:6},scorePillText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5},primaryFpsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:6},fpsBigNumberBox:{flexDirection:"row",alignItems:"baseline",gap:4,minWidth:80},fpsBigNumber:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:42,lineHeight:48,letterSpacing:-1,minWidth:54},fpsUnit:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.grayTextWeak},fpsStatsGrid:{flexDirection:"row",alignItems:"center",gap:8},statItem:{alignItems:"center",minWidth:50},statLabel:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},statValue:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack,marginTop:2,textAlign:"center"},graphScrubTooltip:{alignSelf:"center",backgroundColor:AppColors_1.AppColors.primaryBlack,paddingHorizontal:8,paddingVertical:3,borderRadius:6,marginBottom:4},graphScrubTooltipText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.white},svgGraphContainer:{width:"100%",height:64,marginTop:6,position:"relative",overflow:"hidden",borderRadius:8},svgTouchOverlay:{position:"absolute",top:0,left:0,right:0,bottom:0,flexDirection:"row"},svgTouchCol:{flex:1,height:"100%"},histogramContainer:{gap:8,marginTop:4},histogramRow:{flexDirection:"row",alignItems:"center",gap:8},histogramLabelCol:{flexDirection:"row",alignItems:"center",gap:6,width:140},histogramLabelText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayTextStrong},histogramBarCol:{flex:1},histogramTrack:{height:8,backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:4,overflow:"hidden"},histogramBarFill:{height:"100%",borderRadius:4},histogramStatsCol:{flexDirection:"row",alignItems:"center",gap:4,minWidth:52,justifyContent:"flex-end"},histogramPercentText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5},histogramCountText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak},sparklineFooter:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:6},sparklineFooterText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},sparklineFooterTarget:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.emerald600},budgetCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:12,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,gap:8},budgetHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},budgetTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12.5,color:AppColors_1.AppColors.primaryBlack},budgetHeadroom:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.emerald600},budgetBarContainer:{flexDirection:"row",height:8,borderRadius:4,overflow:"hidden",backgroundColor:AppColors_1.AppColors.grayBackground,gap:2},budgetBarSegment:{height:"100%",borderRadius:2},budgetLegendGrid:{flexDirection:"row",flexWrap:"wrap",gap:10,marginTop:2},legendItem:{flexDirection:"row",alignItems:"center",gap:4},legendDot:{width:6,height:6,borderRadius:3},legendText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextStrong},engineSummaryGrid:{flexDirection:"row",alignItems:"center",gap:8},engineSummaryCard:{flex:1,backgroundColor:AppColors_1.AppColors.white,borderRadius:10,padding:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},engineSummaryLabel:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},engineSummaryValue:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11.5,color:AppColors_1.AppColors.primaryBlack,marginTop:2},engineSummarySub:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,marginTop:1},logsHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:4},logsSectionHeading:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack},clearLink:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11.5,color:AppColors_1.AppColors.purple},eventCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:10,padding:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,gap:6},eventTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},fpsBadgeGroup:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},fpsBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,borderWidth:1},fpsBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10},droppedBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,borderWidth:1},droppedBadgeWarning:{backgroundColor:AppColors_1.AppColors.red100,borderColor:AppColors_1.AppColors.errorBorder},droppedBadgeOptimal:{backgroundColor:AppColors_1.AppColors.green100,borderColor:AppColors_1.AppColors.greenBorder},droppedBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5},bottleneckTag:{backgroundColor:AppColors_1.AppColors.purpleShade50,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:AppColors_1.AppColors.purpleTint2},bottleneckTagText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:9.5,color:AppColors_1.AppColors.purple},eventMetaRow:{flexDirection:"row",alignItems:"center",gap:6,marginTop:2,flexWrap:"wrap"},eventMetaDot:{fontSize:9,color:AppColors_1.AppColors.grayTextWeak},frameBudgetHint:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10},frameBarTrack:{height:4,borderRadius:2,backgroundColor:AppColors_1.AppColors.graySurface,overflow:"hidden",marginVertical:4},frameBarFill:{height:"100%",borderRadius:2},fpsMetricsGrid:{flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.white,borderRadius:6,padding:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,justifyContent:"space-between",gap:4},fpsMetricItem:{alignItems:"center",flex:1},fpsMetricLabel:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:8.5,color:AppColors_1.AppColors.grayTextWeak,textAlign:"center"},fpsMetricVal:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.primaryBlack,marginTop:1,textAlign:"center"},eventLabel:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.primaryBlack},eventMeta:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak,marginTop:1},eventDetail:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11,color:AppColors_1.AppColors.grayTextStrong,lineHeight:15},expandChevron:{fontSize:10,color:AppColors_1.AppColors.grayTextWeak,marginLeft:2},expandedDetailBox:{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,padding:8,marginTop:4,gap:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},sourceRow:{flexDirection:"row",alignItems:"center",gap:6},sourceTag:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}14`,paddingHorizontal:4,paddingVertical:1,borderRadius:3},sourceText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.grayTextStrong,flex:1},breakdownGrid:{flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.white,borderRadius:6,padding:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,justifyContent:"space-between"},breakdownCol:{alignItems:"center",flex:1},breakdownLabel:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9,color:AppColors_1.AppColors.grayTextWeak},breakdownVal:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.primaryBlack,marginTop:1},adviceCard:{backgroundColor:AppColors_1.AppColors.purpleTintBg,borderRadius:6,padding:6,borderWidth:1,borderColor:AppColors_1.AppColors.purpleBorder},adviceHeading:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.purpleShade700},adviceBodyText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10.5,color:AppColors_1.AppColors.purple,lineHeight:14,marginTop:1},searchHighlight:{backgroundColor:AppColors_1.AppColors.yellowHighlight,color:AppColors_1.AppColors.amber800,fontFamily:AppFonts_1.AppFonts.interBold},emptyCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",gap:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},emptyTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.primaryBlack},emptySub:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11.5,color:AppColors_1.AppColors.grayTextWeak,textAlign:"center",lineHeight:16}});exports.default=PerformanceTab;