react-native-inapp-inspector 1.1.21 → 1.1.23

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

@@ -44,160 +44,11 @@ const HighlightText_1 = __importDefault(require("../HighlightText"));
 const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
 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 INITIAL_PERFORMANCE_EVENTS = [
-    {
-        id: 'perf-1',
-        timestamp: Date.now() - 48000,
-        type: 'fps_drop',
-        category: 'navigation',
-        fps: 38,
-        durationMs: 26.3,
-        label: 'Main Thread Spike during Navigation',
-        detail: 'Screen transition to ProductDetailScreen triggered heavy layout reconciliation and simultaneous component mounts.',
-        source: 'src/navigation/RootNavigator.tsx',
-        breakdown: { jsTimeMs: 18.2, uiTimeMs: 8.1, bridgeLatencyMs: 1.2 },
-        heapDeltaKb: 640,
-        advice: 'Defer non-critical offscreen hooks with InteractionManager.runAfterInteractions to preserve 60 FPS.',
-        severity: 'warning',
-    },
-    {
-        id: 'perf-2',
-        timestamp: Date.now() - 41000,
-        type: 'slow_render',
-        category: 'render',
-        fps: 42,
-        durationMs: 23.8,
-        label: 'FlatList Virtualization Re-render Pass',
-        detail: 'FlatList rendered 25 items simultaneously on orientation change without memoized row component.',
-        source: 'src/components/Inspector/NetworkTab.tsx',
-        breakdown: { jsTimeMs: 16.4, uiTimeMs: 7.4 },
-        heapDeltaKb: 380,
-        advice: 'Implement getItemLayout and React.memo(LogCard) to skip redundant diffing passes.',
-        severity: 'warning',
-    },
-    {
-        id: 'perf-3',
-        timestamp: Date.now() - 35000,
-        type: 'transition',
-        category: 'navigation',
-        fps: 59,
-        durationMs: 16.9,
-        label: 'Native Modal Slide-Up Transition',
-        detail: 'Hardware accelerated native driver animated transform running smoothly at sustained 60 FPS.',
-        source: 'src/components/Inspector/MainScreen.tsx',
-        breakdown: { jsTimeMs: 2.1, uiTimeMs: 14.8 },
-        heapDeltaKb: 120,
-        advice: 'Using nativeDriver: true successfully prevents JS thread blocking during animations.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-4',
-        timestamp: Date.now() - 28000,
-        type: 'memory',
-        category: 'memory',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'Hermes Generational Garbage Collection',
-        detail: 'Minor generational GC cycle scavenged 4.2 MB ephemeral heap objects with sub-millisecond thread pause.',
-        source: 'Hermes VM Garbage Collector',
-        breakdown: { jsTimeMs: 3.1, uiTimeMs: 0.2 },
-        heapDeltaKb: -4280,
-        advice: 'Hermes generational garbage collector is operating within optimal sub-5ms limits.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-5',
-        timestamp: Date.now() - 22000,
-        type: 'network',
-        category: 'io',
-        fps: 48,
-        durationMs: 20.8,
-        label: 'Large JSON Payload Deserialization',
-        detail: '50-item API response parse overhead in network adapter (185 KB JSON raw string).',
-        source: 'src/customHooks/networkLogger.ts',
-        breakdown: { jsTimeMs: 15.6, uiTimeMs: 5.2, bridgeLatencyMs: 2.1 },
-        heapDeltaKb: 890,
-        advice: 'Consider paginating API payloads or streaming responses if payload size exceeds 250 KB.',
-        severity: 'warning',
-    },
-    {
-        id: 'perf-6',
-        timestamp: Date.now() - 17000,
-        type: 'slow_render',
-        category: 'render',
-        fps: 52,
-        durationMs: 19.2,
-        label: 'Image Bitmap Decode & Rasterization',
-        detail: 'Retina raster decode for banner_dark.png (1200×630px raster buffer allocation).',
-        source: 'src/components/Inspector/BundleTab.tsx',
-        breakdown: { jsTimeMs: 3.4, uiTimeMs: 15.8 },
-        heapDeltaKb: 1450,
-        advice: 'Downscale asset dimensions or convert to WebP to reduce decode latency by ~65%.',
-        severity: 'warning',
-    },
-    {
-        id: 'perf-7',
-        timestamp: Date.now() - 12000,
-        type: 'bridge',
-        category: 'bridge',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'Native TurboModule JSI Invocation',
-        detail: 'AsyncStorage / MMKV preferences transaction read across 32 configuration keys.',
-        source: 'src/helpers/settingsStore.ts',
-        breakdown: { jsTimeMs: 1.8, uiTimeMs: 0.8, bridgeLatencyMs: 0.4 },
-        heapDeltaKb: 45,
-        advice: 'Direct C++ JSI Turbomodule bindings completely bypass legacy JSON bridge serialization overhead.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-8',
-        timestamp: Date.now() - 8000,
-        type: 'slow_render',
-        category: 'render',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'Redux Action State Tree Diffing',
-        detail: 'Redux dispatch pass evaluated 6 reducer slices and emitted state notification in 4.8ms.',
-        source: 'src/components/Inspector/ReduxTab.tsx',
-        breakdown: { jsTimeMs: 4.8, uiTimeMs: 1.2 },
-        heapDeltaKb: 180,
-        advice: 'State tree immutability preserved. Memoized selectors prevented redundant component renders.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-9',
-        timestamp: Date.now() - 4000,
-        type: 'touch',
-        category: 'render',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'Touch-to-Render Event Latency',
-        detail: 'Gesture responder dispatched tap event to TabBar button with immediate 60 FPS response.',
-        source: 'src/components/Inspector/TabBar.tsx',
-        breakdown: { jsTimeMs: 4.2, uiTimeMs: 2.1 },
-        heapDeltaKb: 30,
-        advice: 'Touch responder latency is well within standard 16.67ms frame budget.',
-        severity: 'optimal',
-    },
-    {
-        id: 'perf-10',
-        timestamp: Date.now() - 1500,
-        type: 'transition',
-        category: 'render',
-        fps: 60,
-        durationMs: 16.6,
-        label: 'C++ Yoga Flexbox Layout Pass',
-        detail: 'Inspector UI multi-tab card layout recalculation and font metrics pass in C++ Yoga engine.',
-        source: 'Yoga Flexbox Layout Engine',
-        breakdown: { jsTimeMs: 2.8, uiTimeMs: 3.4 },
-        heapDeltaKb: 65,
-        advice: 'Flexbox layout constraints are cached and computed efficiently with zero reflow penalties.',
-        severity: 'optimal',
-    },
-];
 const PerformanceTab = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.useTranslation)();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
     const [isRecording, setIsRecording] = (0, react_1.useState)(true);
     const [currentFps, setCurrentFps] = (0, react_1.useState)(60);
@@ -222,7 +73,7 @@ const PerformanceTab = react_1.default.memo(() => {
         60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
     ]);
     // Performance Log Events
-    const [events, setEvents] = (0, react_1.useState)(INITIAL_PERFORMANCE_EVENTS);
+    const [events, setEvents] = (0, react_1.useState)([]);
     const [filterCategory, setFilterCategory] = (0, react_1.useState)('ALL');
     const [search, setSearch] = (0, react_1.useState)('');
     // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
@@ -267,21 +118,22 @@ const PerformanceTab = react_1.default.memo(() => {
                 });
                 // Trigger log if noticeable frame drop
                 if (measuredFps < 50) {
+                    const durationStr = (1000 / measuredFps).toFixed(1);
                     const newEvent = {
                         id: `drop-${Date.now()}`,
                         timestamp: Date.now(),
                         type: 'fps_drop',
                         category: 'render',
                         fps: measuredFps,
-                        durationMs: Number((1000 / measuredFps).toFixed(1)),
-                        label: `Live Frame Rate Dip (${measuredFps} FPS)`,
-                        detail: `Main thread frame duration extended to ${(1000 / measuredFps).toFixed(1)}ms during view update.`,
-                        source: 'React Native UI Thread',
+                        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: 'Heavy JavaScript execution during frame pass delayed display presentation.',
+                        advice: t('performance.liveFpsDipAdvice'),
                         severity: measuredFps < 30 ? 'critical' : 'warning',
                     };
                     setEvents(prev => [newEvent, ...prev.slice(0, 49)]);
@@ -323,12 +175,76 @@ const PerformanceTab = react_1.default.memo(() => {
     }, [events, search, filterCategory]);
     // Overall Performance Score
     const performanceScore = (0, react_1.useMemo)(() => {
-        if (avgFps >= 58)
-            return { score: '98/100', grade: 'Excellent (60 FPS)', color: '#059669', bg: '#DCFCE7' };
-        if (avgFps >= 50)
-            return { score: '84/100', grade: 'Good (Minor Janks)', color: '#D97706', bg: '#FEF3C7' };
-        return { score: '58/100', grade: 'Needs Optimization', color: '#DC2626', bg: '#FEE2E2' };
-    }, [avgFps]);
+        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]);
+    // ─── Dynamic Runtime Environment & Engine Diagnostics ──────────────────────
+    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]);
+    // ─── Dynamic 16.67ms Frame Budget Utilization ─────────────────────────────
+    const frameBudgetStats = (0, react_1.useMemo)(() => {
+        const frameDuration = avgFps > 0 ? 1000 / avgFps : 16.67;
+        const jsTime = Number(Math.max(1.0, Math.min(frameDuration * 0.45, 2.0 + jsLagMs)).toFixed(1));
+        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 clearEvents = () => {
         setEvents([]);
     };
@@ -337,7 +253,7 @@ const PerformanceTab = react_1.default.memo(() => {
       <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="Search performance logs, hooks, FPS drops..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={perfStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
+          <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}
@@ -350,13 +266,13 @@ const PerformanceTab = react_1.default.memo(() => {
         ]}>
             <react_native_1.View style={[
             perfStyles.recordDot,
-            { backgroundColor: isRecording ? '#10B981' : '#F59E0B' },
+            { backgroundColor: isRecording ? AppColors_1.AppColors.emerald500 : AppColors_1.AppColors.amber500 },
         ]}/>
             <react_native_1.Text style={[
             perfStyles.recordBtnText,
-            { color: isRecording ? '#047857' : '#B45309' },
+            { color: isRecording ? AppColors_1.AppColors.emerald600 : AppColors_1.AppColors.amber700 },
         ]}>
-              {isRecording ? 'Live' : 'Paused'}
+              {isRecording ? t('performance.live') : t('redux.paused')}
             </react_native_1.Text>
           </TouchableScale_1.default>
 
@@ -368,10 +284,10 @@ const PerformanceTab = react_1.default.memo(() => {
             jankyFrameCount,
             jsLagMs,
             platform: react_native_1.Platform.OS,
-            engine: 'Hermes Bytecode AOT',
+            engine: runtimeDiagnostics.jsEngineName,
             totalEvents: events.length,
             events,
-        })} label="Copy Perf JSON"/>
+        })} label={t('common.copyJson')}/>
         </react_native_1.View>
       </react_native_1.View>
 
@@ -379,35 +295,35 @@ const PerformanceTab = react_1.default.memo(() => {
       <react_native_1.View style={perfStyles.filterRow}>
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6, paddingHorizontal: 12, paddingVertical: 4 }}>
           {[
-            { key: 'ALL', label: 'All Logs', icon: '⚡', count: events.length },
+            { key: 'ALL', label: t('performance.allLogs'), Icon: NetworkIcons_1.BoltIcon, count: events.length },
             {
                 key: 'JANKY',
-                label: 'Janky / Slow',
-                icon: '⚠️',
+                label: t('performance.jankySlow'),
+                Icon: NetworkIcons_1.WarningTriangleIcon,
                 count: events.filter(e => e.severity === 'warning' || e.severity === 'critical').length,
             },
             {
                 key: 'NAVIGATION',
-                label: 'Navigation',
-                icon: '🗺️',
+                label: t('performance.navigation'),
+                Icon: NetworkIcons_1.MapIcon,
                 count: events.filter(e => e.category === 'navigation').length,
             },
             {
                 key: 'RENDER',
-                label: 'Components',
-                icon: '⚛️',
+                label: t('performance.components'),
+                Icon: NetworkIcons_1.AtomIcon,
                 count: events.filter(e => e.category === 'render').length,
             },
             {
                 key: 'MEMORY',
-                label: 'Memory & GC',
-                icon: '🧠',
+                label: t('performance.memoryGc'),
+                Icon: NetworkIcons_1.BrainIcon,
                 count: events.filter(e => e.category === 'memory').length,
             },
             {
                 key: 'IO',
-                label: 'Network & I/O',
-                icon: '🌐',
+                label: t('performance.networkIo'),
+                Icon: NetworkIcons_1.GlobeIcon,
                 count: events.filter(e => e.category === 'io' || e.category === 'bridge').length,
             },
         ].map(tab => {
@@ -416,7 +332,7 @@ const PerformanceTab = react_1.default.memo(() => {
                     perfStyles.filterPill,
                     isActive && perfStyles.filterPillActive,
                 ]}>
-                <react_native_1.Text style={perfStyles.filterPillIcon}>{tab.icon}</react_native_1.Text>
+                <tab.Icon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong} size={12}/>
                 <react_native_1.Text style={[
                     perfStyles.filterPillText,
                     isActive && perfStyles.filterPillTextActive,
@@ -434,7 +350,7 @@ const PerformanceTab = react_1.default.memo(() => {
           <react_native_1.View style={perfStyles.metricCardHeader}>
             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={18}/>
-              <react_native_1.Text style={perfStyles.metricCardTitle}>Real-Time Frame Rate (FPS)</react_native_1.Text>
+              <react_native_1.Text style={perfStyles.metricCardTitle}>{t('performance.liveFps')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={[
             perfStyles.scorePill,
@@ -456,36 +372,36 @@ const PerformanceTab = react_1.default.memo(() => {
             perfStyles.fpsBigNumber,
             {
                 color: currentFps >= 55
-                    ? '#059669'
+                    ? AppColors_1.AppColors.emerald600
                     : currentFps >= 40
-                        ? '#D97706'
-                        : '#DC2626',
+                        ? AppColors_1.AppColors.firebaseOrange
+                        : AppColors_1.AppColors.errorColor,
             },
         ]}>
                 {currentFps}
               </react_native_1.Text>
-              <react_native_1.Text style={perfStyles.fpsUnit}>FPS</react_native_1.Text>
+              <react_native_1.Text style={perfStyles.fpsUnit}>{t('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}>Avg FPS</react_native_1.Text>
+                <react_native_1.Text style={perfStyles.statLabel}>{t('performance.avgFrameTime')}</react_native_1.Text>
                 <react_native_1.Text style={perfStyles.statValue}>{avgFps}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={perfStyles.statItem}>
-                <react_native_1.Text style={perfStyles.statLabel}>Min FPS</react_native_1.Text>
-                <react_native_1.Text style={[perfStyles.statValue, minFps < 50 && { color: '#D97706' }]}>
+                <react_native_1.Text style={perfStyles.statLabel}>{t('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>
               </react_native_1.View>
               <react_native_1.View style={perfStyles.statItem}>
-                <react_native_1.Text style={perfStyles.statLabel}>JS Lag</react_native_1.Text>
-                <react_native_1.Text style={[perfStyles.statValue, jsLagMs > 5 && { color: '#D97706' }]}>
+                <react_native_1.Text style={perfStyles.statLabel}>{t('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>
               </react_native_1.View>
               <react_native_1.View style={perfStyles.statItem}>
-                <react_native_1.Text style={perfStyles.statLabel}>Jank Rate</react_native_1.Text>
+                <react_native_1.Text style={perfStyles.statLabel}>{t('performance.jankRate')}</react_native_1.Text>
                 <react_native_1.Text style={perfStyles.statValue}>
                   {totalFrames > 0
             ? `${((jankyFrameCount / Math.max(1, totalFrames / 60)) * 100).toFixed(0)}%`
@@ -505,50 +421,73 @@ const PerformanceTab = react_1.default.memo(() => {
                     perfStyles.sparklineBar,
                     {
                         height: barHeight,
-                        backgroundColor: isLow ? '#EF4444' : '#10B981',
+                        backgroundColor: isLow ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.emerald500,
                     },
                 ]}/>
                 </react_native_1.View>);
         })}
           </react_native_1.View>
           <react_native_1.View style={perfStyles.sparklineFooter}>
-            <react_native_1.Text style={perfStyles.sparklineFooterText}>Last 20s live timeline</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.sparklineFooterTarget}>60 FPS Target (16.67ms/frame)</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.sparklineFooterText}>{t('performance.realtimeWindow')}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.sparklineFooterTarget}>{t('performance.fpsTarget')}</react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
 
         {/* ── 2. FRAME BUDGET BREAKDOWN CARD ── */}
         <react_native_1.View style={perfStyles.budgetCard}>
           <react_native_1.View style={perfStyles.budgetHeader}>
-            <react_native_1.Text style={perfStyles.budgetTitle}>16.67ms Frame Budget Utilization</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.budgetHeadroom}>~4.3ms Headroom (26%)</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.budgetTitle}>{t('performance.budgetUsage')}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.budgetHeadroom}>
+              {t('performance.budgetHeadroom', {
+            time: frameBudgetStats.freeTime,
+            percent: frameBudgetStats.headroomPercent,
+        })}
+            </react_native_1.Text>
           </react_native_1.View>
 
           {/* Multi-colored segmented frame budget bar */}
           <react_native_1.View style={perfStyles.budgetBarContainer}>
-            <react_native_1.View style={[perfStyles.budgetBarSegment, { flex: 4.8, backgroundColor: '#38BDF8' }]}/>
-            <react_native_1.View style={[perfStyles.budgetBarSegment, { flex: 2.8, backgroundColor: '#818CF8' }]}/>
-            <react_native_1.View style={[perfStyles.budgetBarSegment, { flex: 4.8, backgroundColor: '#F472B6' }]}/>
-            <react_native_1.View style={[perfStyles.budgetBarSegment, { flex: 4.3, backgroundColor: '#34D399' }]}/>
+            <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>
 
           <react_native_1.View style={perfStyles.budgetLegendGrid}>
             <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: '#38BDF8' }]}/>
-              <react_native_1.Text style={perfStyles.legendText}>JS Exec: 4.8ms</react_native_1.Text>
+              <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 })}
+              </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: '#818CF8' }]}/>
-              <react_native_1.Text style={perfStyles.legendText}>Yoga Layout: 2.8ms</react_native_1.Text>
+              <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 })}
+              </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: '#F472B6' }]}/>
-              <react_native_1.Text style={perfStyles.legendText}>UI Render: 4.8ms</react_native_1.Text>
+              <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 })}
+              </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot, { backgroundColor: '#34D399' }]}/>
-              <react_native_1.Text style={[perfStyles.legendText, { color: '#059669', fontFamily: AppFonts_1.AppFonts.interBold }]}>
-                Free: 4.3ms
+              <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.Text>
             </react_native_1.View>
           </react_native_1.View>
@@ -557,49 +496,51 @@ const PerformanceTab = react_1.default.memo(() => {
         {/* ── 3. RUNTIME ENGINE & MEMORY SUMMARY ── */}
         <react_native_1.View style={perfStyles.engineSummaryGrid}>
           <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>JS Engine</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>Hermes (AOT)</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummarySub}>Bytecode compiled</react_native_1.Text>
+            <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.View>
           <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>UI Reconciler</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>Fabric / JSI</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummarySub}>Direct C++ bindings</react_native_1.Text>
+            <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.View>
           <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>Memory Heap</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>34.8 MB</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummarySub}>64 MB allocated</react_native_1.Text>
+            <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.engineSummarySub}>
+              {t('performance.heapAllocatedSub', { allocated: runtimeDiagnostics.totalAllocMb })}
+            </react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
 
         {/* ── 4. PERFORMANCE LOGS & DETAILED EVENTS ── */}
         <react_native_1.View style={perfStyles.logsHeaderRow}>
           <react_native_1.Text style={perfStyles.logsSectionHeading}>
-            Performance & Frame Events ({filteredEvents.length})
+            {t('performance.recordedEvents')} ({filteredEvents.length})
           </react_native_1.Text>
           {events.length > 0 && (<TouchableScale_1.default onPress={clearEvents}>
-              <react_native_1.Text style={perfStyles.clearLink}>Clear Logs</react_native_1.Text>
+              <react_native_1.Text style={perfStyles.clearLink}>{t('common.clear')}</react_native_1.Text>
             </TouchableScale_1.default>)}
         </react_native_1.View>
 
         {filteredEvents.length === 0 ? (<react_native_1.View style={perfStyles.emptyCard}>
-            <react_native_1.Text style={{ fontSize: 28 }}>⚡</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.emptyTitle}>No Performance Drops Detected</react_native_1.Text>
+            <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber500} size={30}/>
+            <react_native_1.Text style={perfStyles.emptyTitle}>{t('performance.emptyTitle')}</react_native_1.Text>
             <react_native_1.Text style={perfStyles.emptySub}>
-              All UI interactions, navigation screen transitions, and animations are running smoothly at 60 FPS.
+              {t('performance.emptySubtitle')}
             </react_native_1.Text>
           </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 ? '#DCFCE7' : isWarning ? '#FEF3C7' : '#FEE2E2';
-            const badgeBorder = isOptimal ? '#BBF7D0' : isWarning ? '#FDE68A' : '#FECACA';
-            const badgeColor = isOptimal ? '#047857' : isWarning ? '#B45309' : '#DC2626';
+            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: '#FECACA', backgroundColor: '#FFFBFB' },
+                    isCritical && { borderColor: AppColors_1.AppColors.errorBorder, backgroundColor: AppColors_1.AppColors.errorCardBg },
                 ]}>
                 <react_native_1.View style={perfStyles.eventTopRow}>
                   <react_native_1.View style={[
@@ -614,12 +555,12 @@ const PerformanceTab = react_1.default.memo(() => {
                   <react_native_1.View style={{ flex: 1, paddingHorizontal: 6 }}>
                     <HighlightText_1.default text={event.label} search={search} style={perfStyles.eventLabel} highlightStyle={perfStyles.searchHighlight}/>
                     <react_native_1.Text style={perfStyles.eventMeta}>
-                      {event.durationMs}ms total • {new Date(event.timestamp).toLocaleTimeString()}
+                      {t('performance.msTotal', { duration: event.durationMs, time: new Date(event.timestamp).toLocaleTimeString() })}
                     </react_native_1.Text>
                   </react_native_1.View>
 
                   <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                    <CopyButton_1.default value={() => event} label="Event JSON"/>
+                    <CopyButton_1.default value={() => event} label={t('common.copyJson')}/>
                     <react_native_1.Text style={perfStyles.expandChevron}>
                       {isExpanded ? '▲' : '▼'}
                     </react_native_1.Text>
@@ -632,7 +573,7 @@ const PerformanceTab = react_1.default.memo(() => {
                 {isExpanded && (<react_native_1.View style={perfStyles.expandedDetailBox}>
                     {/* Source file / hook tag */}
                     {event.source && (<react_native_1.View style={perfStyles.sourceRow}>
-                        <react_native_1.Text style={perfStyles.sourceTag}>SOURCE</react_native_1.Text>
+                        <react_native_1.Text style={perfStyles.sourceTag}>{t('common.source')}</react_native_1.Text>
                         <react_native_1.Text style={perfStyles.sourceText} numberOfLines={1}>
                           {event.source}
                         </react_native_1.Text>
@@ -641,28 +582,28 @@ const PerformanceTab = react_1.default.memo(() => {
                     {/* Thread Timing Breakdown */}
                     {event.breakdown && (<react_native_1.View style={perfStyles.breakdownGrid}>
                         <react_native_1.View style={perfStyles.breakdownCol}>
-                          <react_native_1.Text style={perfStyles.breakdownLabel}>JS Thread</react_native_1.Text>
+                          <react_native_1.Text style={perfStyles.breakdownLabel}>{t('performance.jsThread')}</react_native_1.Text>
                           <react_native_1.Text style={perfStyles.breakdownVal}>
                             {event.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}>UI Thread</react_native_1.Text>
+                          <react_native_1.Text style={perfStyles.breakdownLabel}>{t('performance.uiThread')}</react_native_1.Text>
                           <react_native_1.Text style={perfStyles.breakdownVal}>
                             {event.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}>JSI Latency</react_native_1.Text>
+                            <react_native_1.Text style={perfStyles.breakdownLabel}>{t('performance.jsiLatency')}</react_native_1.Text>
                             <react_native_1.Text style={perfStyles.breakdownVal}>
                               {event.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}>Heap Impact</react_native_1.Text>
+                            <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 ? '#B45309' : '#059669' },
+                                { color: event.heapDeltaKb > 0 ? AppColors_1.AppColors.amber700 : AppColors_1.AppColors.emerald600 },
                             ]}>
                               {event.heapDeltaKb > 0 ? `+${event.heapDeltaKb}` : event.heapDeltaKb} KB
                             </react_native_1.Text>
@@ -671,14 +612,17 @@ const PerformanceTab = react_1.default.memo(() => {
 
                     {/* Actionable Optimization Tip */}
                     {event.advice && (<react_native_1.View style={perfStyles.adviceCard}>
-                        <react_native_1.Text style={perfStyles.adviceHeading}>💡 Optimization Tip:</react_native_1.Text>
+                        <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>
+                        </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>);
         }))}
 
-        <EndOfListFooter_1.default count={filteredEvents.length} label="performance events"/>
+        <EndOfListFooter_1.default count={filteredEvents.length} label={t('performance.recordedEvents')}/>
       </react_native_1.ScrollView>
     </react_native_1.View>);
 });
@@ -726,12 +670,12 @@ const perfStyles = react_native_1.StyleSheet.create({
         borderWidth: 1,
     },
     recordBtnActive: {
-        backgroundColor: '#DCFCE7',
-        borderColor: '#BBF7D0',
+        backgroundColor: AppColors_1.AppColors.greenBg,
+        borderColor: AppColors_1.AppColors.greenBorder,
     },
     recordBtnPaused: {
-        backgroundColor: '#FEF3C7',
-        borderColor: '#FDE68A',
+        backgroundColor: AppColors_1.AppColors.amberBg,
+        borderColor: AppColors_1.AppColors.lightOrange,
     },
     recordDot: {
         width: 6,
@@ -762,9 +706,6 @@ const perfStyles = react_native_1.StyleSheet.create({
         backgroundColor: AppColors_1.AppColors.brandPurple,
         borderColor: AppColors_1.AppColors.brandPurple,
     },
-    filterPillIcon: {
-        fontSize: 11,
-    },
     filterPillText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 11,
@@ -890,7 +831,7 @@ const perfStyles = react_native_1.StyleSheet.create({
     sparklineFooterTarget: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 10,
-        color: '#059669',
+        color: AppColors_1.AppColors.emerald600,
     },
     budgetCard: {
         backgroundColor: AppColors_1.AppColors.white,
@@ -913,7 +854,7 @@ const perfStyles = react_native_1.StyleSheet.create({
     budgetHeadroom: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 11,
-        color: '#059669',
+        color: AppColors_1.AppColors.emerald600,
     },
     budgetBarContainer: {
         flexDirection: 'row',
@@ -1094,27 +1035,27 @@ const perfStyles = react_native_1.StyleSheet.create({
         marginTop: 1,
     },
     adviceCard: {
-        backgroundColor: '#FAF5FF',
+        backgroundColor: AppColors_1.AppColors.purpleTintBg,
         borderRadius: 6,
         padding: 6,
         borderWidth: 1,
-        borderColor: '#E9D5FF',
+        borderColor: AppColors_1.AppColors.purpleBorder,
     },
     adviceHeading: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 10,
-        color: '#6B21A8',
+        color: AppColors_1.AppColors.purpleShade700,
     },
     adviceBodyText: {
         fontFamily: AppFonts_1.AppFonts.interRegular,
         fontSize: 10.5,
-        color: '#7E22CE',
+        color: AppColors_1.AppColors.purple,
         lineHeight: 14,
         marginTop: 1,
     },
     searchHighlight: {
-        backgroundColor: '#FEF08A',
-        color: '#854D0E',
+        backgroundColor: AppColors_1.AppColors.yellowHighlight,
+        color: AppColors_1.AppColors.amber800,
         fontFamily: AppFonts_1.AppFonts.interBold,
     },
     emptyCard: {