react-native-inapp-inspector 1.1.21 → 1.1.23

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

@@ -1,13 +1,14 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { Image, Linking, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-import { useTranslation } from '../../i18n';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { ActivityIndicator, Image, Linking, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { useTranslation, t } from '../../i18n';
 import TouchableScale from '../TouchableScale';
 import CopyButton from '../CopyButton';
 import HighlightText from '../HighlightText';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, LiveStateIcon, StorageIcon, MetadataIcon, } from '../NetworkIcons';
-import Svg, { Path, Rect, Circle, Ellipse, Defs, LinearGradient, Stop, } from 'react-native-svg';
+import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, } from '../NetworkIcons';
+import Svg, { Path, Rect, Circle, Ellipse, G, Defs, LinearGradient, Stop, } from 'react-native-svg';
+import { analyzeHostAppBundle, getCachedBundleAnalysis, } from '../../customHooks/bundleAnalyzer';
 // ─── High-Fidelity Vector Package & NPM Logos ────────────────────────────────
 const PackageLogoRenderer = ({ name, size = 28 }) => {
     const lowerName = name.toLowerCase();
@@ -19,13 +20,13 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
             !lowerName.includes('gradient'))) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: '#20232A' },
+                { width: size, height: size, backgroundColor: AppColors.npmDark },
             ]}>
         <Svg width={size - 6} height={size - 6} viewBox="0 0 100 100" fill="none">
-          <Circle cx="50" cy="50" r="9" fill="#61DAFB"/>
-          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke="#61DAFB" strokeWidth="6"/>
-          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke="#61DAFB" strokeWidth="6" transform="rotate(60 50 50)"/>
-          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke="#61DAFB" strokeWidth="6" transform="rotate(120 50 50)"/>
+          <Circle cx="50" cy="50" r="9" fill={AppColors.reactCyan}/>
+          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke={AppColors.reactCyan} strokeWidth="6"/>
+          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke={AppColors.reactCyan} strokeWidth="6" transform="rotate(60 50 50)"/>
+          <Ellipse cx="50" cy="50" rx="42" ry="16" stroke={AppColors.reactCyan} strokeWidth="6" transform="rotate(120 50 50)"/>
         </Svg>
       </View>);
     }
@@ -33,12 +34,12 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     if (lowerName.includes('navigation')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: '#5B44E0' },
+                { width: size, height: size, backgroundColor: AppColors.hermesPurple },
             ]}>
         <Svg width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
-          <Circle cx="50" cy="50" r="38" stroke="#FFFFFF" strokeWidth="8"/>
-          <Path d="M50 20 L68 50 L50 80 L32 50 Z" fill="#61DAFB"/>
-          <Circle cx="50" cy="50" r="6" fill="#FFFFFF"/>
+          <Circle cx="50" cy="50" r="38" stroke={AppColors.white} strokeWidth="8"/>
+          <Path d="M50 20 L68 50 L50 80 L32 50 Z" fill={AppColors.reactCyan}/>
+          <Circle cx="50" cy="50" r="6" fill={AppColors.white}/>
         </Svg>
       </View>);
     }
@@ -46,13 +47,13 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     if (lowerName.includes('svg')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: '#F472B6' },
+                { width: size, height: size, backgroundColor: AppColors.pink400 },
             ]}>
         <Svg width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
-          <Path d="M20 75 C35 25, 65 25, 80 75" stroke="#FFFFFF" strokeWidth="10" strokeLinecap="round"/>
-          <Circle cx="20" cy="75" r="8" fill="#FFFFFF"/>
-          <Circle cx="80" cy="75" r="8" fill="#FFFFFF"/>
-          <Circle cx="50" cy="38" r="7" fill="#FCE7F3" stroke="#FFFFFF" strokeWidth="3"/>
+          <Path d="M20 75 C35 25, 65 25, 80 75" stroke={AppColors.white} strokeWidth="10" strokeLinecap="round"/>
+          <Circle cx="20" cy="75" r="8" fill={AppColors.white}/>
+          <Circle cx="80" cy="75" r="8" fill={AppColors.white}/>
+          <Circle cx="50" cy="38" r="7" fill="#FCE7F3" stroke={AppColors.white} strokeWidth="3"/>
         </Svg>
       </View>);
     }
@@ -60,11 +61,11 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     if (lowerName.includes('axios')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: '#5A29E4' },
+                { width: size, height: size, backgroundColor: AppColors.expoViolet },
             ]}>
         <Svg width={size - 6} height={size - 6} viewBox="0 0 100 100" fill="none">
-          <Path d="M22 75 L50 20 L78 75 M33 58 L67 58" stroke="#FFFFFF" strokeWidth="12" strokeLinecap="round" strokeLinejoin="round"/>
-          <Circle cx="50" cy="20" r="7" fill="#61DAFB"/>
+          <Path d="M22 75 L50 20 L78 75 M33 58 L67 58" stroke={AppColors.white} strokeWidth="12" strokeLinecap="round" strokeLinejoin="round"/>
+          <Circle cx="50" cy="20" r="7" fill={AppColors.reactCyan}/>
         </Svg>
       </View>);
     }
@@ -72,11 +73,11 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     if (lowerName.includes('screens') || lowerName.includes('software-mansion')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: '#001A72' },
+                { width: size, height: size, backgroundColor: AppColors.reanimatedNavy },
             ]}>
         <Svg width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
-          <Path d="M50 15 L88 35 L50 55 L12 35 Z" fill="#38BDF8"/>
-          <Path d="M12 50 L50 70 L88 50" stroke="#FFFFFF" strokeWidth="8" strokeLinecap="round"/>
+          <Path d="M50 15 L88 35 L50 55 L12 35 Z" fill={AppColors.sky400}/>
+          <Path d="M12 50 L50 70 L88 50" stroke={AppColors.white} strokeWidth="8" strokeLinecap="round"/>
           <Path d="M12 65 L50 85 L88 65" stroke="#93C5FD" strokeWidth="8" strokeLinecap="round"/>
         </Svg>
       </View>);
@@ -85,7 +86,7 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     if (lowerName.includes('gradient')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: '#FB7185' },
+                { width: size, height: size, backgroundColor: AppColors.rose600 },
             ]}>
         <Svg width={size - 4} height={size - 4} viewBox="0 0 100 100" fill="none">
           <Defs>
@@ -103,26 +104,97 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     if (lowerName.includes('i18n')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: '#059669' },
+                { width: size, height: size, backgroundColor: AppColors.emerald600 },
             ]}>
         <Svg width={size - 8} height={size - 8} viewBox="0 0 100 100" fill="none">
-          <Circle cx="50" cy="50" r="38" stroke="#FFFFFF" strokeWidth="8"/>
-          <Ellipse cx="50" cy="50" rx="18" ry="38" stroke="#FFFFFF" strokeWidth="6"/>
-          <Path d="M14 50 L86 50" stroke="#FFFFFF" strokeWidth="7"/>
+          <Circle cx="50" cy="50" r="38" stroke={AppColors.white} strokeWidth="8"/>
+          <Ellipse cx="50" cy="50" rx="18" ry="38" stroke={AppColors.white} strokeWidth="6"/>
+          <Path d="M14 50 L86 50" stroke={AppColors.white} strokeWidth="7"/>
         </Svg>
       </View>);
     }
     // 8. Official Red NPM Logo Box (Universal Default NPM Branding)
     return (<View style={[
             bundleStyles.pkgLogoWrap,
-            { width: size, height: size, backgroundColor: '#CB3837' },
+            { width: size, height: size, backgroundColor: AppColors.npmRed },
         ]}>
       <Svg width={size - 4} height={size - 4} viewBox="0 0 100 100" fill="none">
-        <Rect width="100" height="100" rx="14" fill="#CB3837"/>
-        <Path d="M18 24 H82 V76 H50 V40 H38 V76 H18 Z" fill="#FFFFFF"/>
+        <Rect width="100" height="100" rx="14" fill={AppColors.npmRed}/>
+        <Path d="M18 24 H82 V76 H50 V40 H38 V76 H18 Z" fill={AppColors.white}/>
       </Svg>
     </View>);
 };
+const BundleCategoryIcon = ({ type, size = 16, color = AppColors.purple }) => {
+    const stroke = { stroke: color, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
+    const renderGlyph = () => {
+        switch (type) {
+            case 'folder':
+                return (<G>
+            <Path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" {...stroke}/>
+          </G>);
+            case 'ban':
+                return (<G>
+            <Circle cx="12" cy="12" r="8.5" {...stroke}/>
+            <Path d="M5.5 5.5 18.5 18.5" {...stroke}/>
+          </G>);
+            case 'bolt':
+                return (<G>
+            <Path d="M13 2 4.5 13.5 H10.5 L9 22 19.5 9.5 H13.5 Z" {...stroke}/>
+          </G>);
+            case 'source':
+                return (<G>
+            <Path d="M8.5 7 L4 12 L8.5 17" {...stroke}/>
+            <Path d="M15.5 7 L20 12 L15.5 17" {...stroke}/>
+            <Path d="M13.5 4.5 L10.5 19.5" {...stroke}/>
+          </G>);
+            case 'deps':
+                return (<G>
+            <Rect x="4" y="4" width="16" height="16" rx="2.5" {...stroke}/>
+            <Path d="M4 9.5 H20" {...stroke}/>
+            <Path d="M9.5 9.5 V20" {...stroke}/>
+          </G>);
+            case 'media':
+            case 'image':
+                return (<G>
+            <Rect x="3.5" y="4.5" width="17" height="15" rx="2" {...stroke}/>
+            <Circle cx="9" cy="10" r="1.5" {...stroke}/>
+            <Path d="M3.5 17.5 L9.5 12.5 L14 16.5 L17 13.5 L20.5 17.5" {...stroke}/>
+          </G>);
+            case 'overhead':
+                return (<G>
+            <Circle cx="12" cy="12" r="3.2" {...stroke}/>
+            <Path d="M12 2.5 V5.5 M12 18.5 V21.5 M2.5 12 H5.5 M18.5 12 H21.5 M5.3 5.3 L7.4 7.4 M16.6 16.6 L18.7 18.7 M18.7 5.3 L16.6 7.4 M7.4 16.6 L5.3 18.7" {...stroke}/>
+          </G>);
+            case 'typescript':
+                return (<G>
+            <Path d="M6.5 3.5 H14 L18.5 8 V20.5 H6.5 Z" {...stroke}/>
+            <Path d="M14 3.5 V8 H18.5" {...stroke}/>
+            <Path d="M9.5 13.5 H15 M12 13.5 V16.5 M9.5 16.5 H13" {...stroke}/>
+          </G>);
+            case 'javascript':
+                return (<G>
+            <Path d="M9.5 3.5 C7.5 3.5 7.5 6.5 7.5 9 C7.5 11 6.5 12 5 12 C6.5 12 7.5 13 7.5 15 C7.5 17.5 7.5 20.5 9.5 20.5" {...stroke}/>
+            <Path d="M14.5 3.5 C16.5 3.5 16.5 6.5 16.5 9 C16.5 11 17.5 12 19 12 C17.5 12 16.5 13 16.5 15 C16.5 17.5 16.5 20.5 14.5 20.5" {...stroke}/>
+          </G>);
+            case 'font':
+                return (<G>
+            <Path d="M8 19 L12 5.5 L16 19" {...stroke}/>
+            <Path d="M9.4 14.5 H14.6" {...stroke}/>
+          </G>);
+            case 'json':
+                return (<G>
+            <Path d="M9 3.5 C7 3.5 7 6 7 8.5 C7 10.5 6 11.5 5 12 C6 12.5 7 13.5 7 15.5 C7 18 7 20.5 9 20.5" {...stroke}/>
+            <Circle cx="12" cy="12" r="1.1" fill={color}/>
+            <Path d="M15 3.5 C17 3.5 17 6 17 8.5 C17 10.5 18 11.5 19 12 C18 12.5 17 13.5 17 15.5 C17 18 17 20.5 15 20.5" {...stroke}/>
+          </G>);
+            default:
+                return null;
+        }
+    };
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {renderGlyph()}
+    </Svg>);
+};
 // ─── Media File Thumbnail Component ──────────────────────────────────────────
 const MediaPreviewThumbnail = ({ file }) => {
     const [loadError, setLoadError] = useState(false);
@@ -131,25 +203,25 @@ const MediaPreviewThumbnail = ({ file }) => {
         return (<View style={[
                 bundleStyles.mediaThumbWrap,
                 {
-                    backgroundColor: '#FFF1F2',
+                    backgroundColor: AppColors.errorCardBg,
                     alignItems: 'center',
                     justifyContent: 'center',
-                    borderColor: '#FECDD3',
+                    borderColor: AppColors.errorBorder,
                 },
             ]}>
         <Svg width={22} height={22} viewBox="0 0 100 100" fill="none">
           <Defs>
             <LinearGradient id="svgGradThumb" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
-              <Stop offset="0" stopColor="#F43F5E"/>
-              <Stop offset="1" stopColor="#FB7185"/>
+              <Stop offset="0" stopColor={AppColors.rose500}/>
+              <Stop offset="1" stopColor={AppColors.rose600}/>
             </LinearGradient>
           </Defs>
           <Circle cx="50" cy="50" r="44" fill="url(#svgGradThumb)"/>
           {/* Vector bezier path pen graphic */}
-          <Path d="M25 70 C35 30, 65 30, 75 70" stroke="#FFFFFF" strokeWidth="8" strokeLinecap="round"/>
-          <Circle cx="25" cy="70" r="7" fill="#FFFFFF"/>
-          <Circle cx="75" cy="70" r="7" fill="#FFFFFF"/>
-          <Circle cx="50" cy="40" r="6" fill="#FFE4E6" stroke="#FFFFFF" strokeWidth="2"/>
+          <Path d="M25 70 C35 30, 65 30, 75 70" stroke={AppColors.white} strokeWidth="8" strokeLinecap="round"/>
+          <Circle cx="25" cy="70" r="7" fill={AppColors.white}/>
+          <Circle cx="75" cy="70" r="7" fill={AppColors.white}/>
+          <Circle cx="50" cy="40" r="6" fill="#FFE4E6" stroke={AppColors.white} strokeWidth="2"/>
         </Svg>
       </View>);
     }
@@ -243,11 +315,11 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, collapsedFolde
                 {isCollapsed ? '▶' : '▼'}
               </Text>
             </View>
-            <Text style={{ fontSize: 16 }}>{isCollapsed ? '📁' : '📂'}</Text>
+            {isCollapsed ? (<FolderIcon color={AppColors.amber500} size={16}/>) : (<FolderOpenIcon color={AppColors.amber500} size={16}/>)}
             <HighlightText text={node.name + '/'} search={search} style={bundleStyles.treeFolderName} highlightStyle={bundleStyles.searchHighlight}/>
             <View style={bundleStyles.treeCountBadge}>
               <Text style={bundleStyles.treeCountBadgeText}>
-                {node.fileCount} {node.fileCount === 1 ? 'file' : 'files'}
+                {node.fileCount} {node.fileCount === 1 ? t('bundle.file') : t('bundle.files')}
               </Text>
             </View>
           </View>
@@ -255,14 +327,14 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, collapsedFolde
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
             <Text style={bundleStyles.treeFolderSize}>
               {node.sizeKb >= 1024
-                ? `${(node.sizeKb / 1024).toFixed(2)} MB`
-                : `${node.sizeKb} KB`}
+                ? t('bundle.fileSizeMb', { size: (node.sizeKb / 1024).toFixed(2) })
+                : t('bundle.fileSizeKb', { size: node.sizeKb })}
             </Text>
             <CopyButton value={() => ({
                 folder: node.fullPath,
                 sizeKb: node.sizeKb,
                 fileCount: node.fileCount,
-            })} label={`Copy ${node.name} Info`}/>
+            })} label={t('bundle.copyFileInfo', { name: node.name })}/>
           </View>
         </TouchableScale>
 
@@ -291,9 +363,9 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, collapsedFolde
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
             <HighlightText text={file.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
             {isUnused ? (<View style={bundleStyles.unusedBadge}>
-                <Text style={bundleStyles.unusedBadgeText}>🚫 Not Consumed</Text>
+                <Text style={bundleStyles.unusedBadgeText}>{t('bundle.notConsumed')}</Text>
               </View>) : (<View style={bundleStyles.consumedBadge}>
-                <Text style={bundleStyles.consumedBadgeText}>⚡ Consumed</Text>
+                <Text style={bundleStyles.consumedBadgeText}>{t('bundle.consumed')}</Text>
               </View>)}
           </View>
           <Text style={bundleStyles.filePath} numberOfLines={1}>
@@ -303,14 +375,14 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, collapsedFolde
 
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
           <View style={bundleStyles.fileSizeBox}>
-            <Text style={[bundleStyles.fileSizeKb, isUnused && { color: '#B45309' }]}>
+            <Text style={[bundleStyles.fileSizeKb, isUnused && { color: AppColors.amber800Warm }]}>
               {file.sizeKb >= 1024
-            ? `${(file.sizeKb / 1024).toFixed(2)} MB`
-            : `${file.sizeKb} KB`}
+            ? t('bundle.fileSizeMb', { size: (file.sizeKb / 1024).toFixed(2) })
+            : t('bundle.fileSizeKb', { size: file.sizeKb })}
             </Text>
             <Text style={bundleStyles.filePercent}>{pctOfTotal}%</Text>
           </View>
-          <CopyButton value={() => file} label="File Details JSON"/>
+          <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
         </View>
       </View>
 
@@ -321,429 +393,62 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, collapsedFolde
                 isUnused && bundleStyles.adviceUnused,
                 { marginLeft: 26, marginTop: 4 },
             ]}>
-          <Text style={[
+          <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
+            {isUnused ? (<TrashIcon color={AppColors.red600} size={12}/>) : file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
+            <Text style={[
                 bundleStyles.adviceText,
-                file.status === 'warning' && { color: '#B45309' },
-                file.status === 'optimal' && { color: '#047857' },
-                isUnused && { color: '#DC2626' },
+                file.status === 'warning' && { color: AppColors.amber800Warm },
+                file.status === 'optimal' && { color: AppColors.emerald700 },
+                isUnused && { color: AppColors.red600 },
             ]}>
-            {isUnused ? '🗑️ ' : file.status === 'warning' ? '💡 ' : '✨ '}
-            {file.advice}
-          </Text>
+              {file.advice}
+            </Text>
+          </View>
         </View>)}
     </View>);
 };
-// ─── Sample Bundle Files Data ────────────────────────────────────────────────
-const BUNDLE_FILES_DATA = [
-    // ── Images & Media ──
-    {
-        id: 'img-1',
-        name: 'banner_dark.png',
-        path: 'assets/images/banner_dark.png',
-        ext: 'PNG',
-        category: 'image',
-        sizeKb: 460,
-        meta: '1200×630px @2x • Raster Image',
-        color: '#EC4899',
-        status: 'warning',
-        advice: 'Convert to .webp to save ~65% (160 KB)',
-        previewUri: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=200&auto=format&fit=crop&q=80',
-    },
-    {
-        id: 'img-2',
-        name: 'banner_light.svg',
-        path: 'assets/images/banner_light.svg',
-        ext: 'SVG',
-        category: 'image',
-        sizeKb: 34,
-        meta: 'Scalable Vector Graphic',
-        color: '#F43F5E',
-        status: 'optimal',
-        advice: 'Optimal vector format for sharp rendering',
-        previewUri: 'https://images.unsplash.com/photo-1579783902614-a3fb3927b675?w=200&auto=format&fit=crop&q=80',
-    },
-    {
-        id: 'img-3',
-        name: 'logo_hero@3x.png',
-        path: 'assets/brand/logo_hero@3x.png',
-        ext: 'PNG',
-        category: 'image',
-        sizeKb: 285,
-        meta: '768×768px @3x Retina Asset',
-        color: '#EC4899',
-        status: 'warning',
-        advice: 'High density PNG. Consider tintable SVG vector',
-        previewUri: 'https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?w=200&auto=format&fit=crop&q=80',
-    },
-    {
-        id: 'img-4',
-        name: 'avatar_placeholder.webp',
-        path: 'assets/placeholders/avatar_placeholder.webp',
-        ext: 'WEBP',
-        category: 'image',
-        sizeKb: 28,
-        meta: '256×256px Lossy WebP',
-        color: '#F472B6',
-        status: 'warning',
-        advice: 'Unused in bundle: 0 active imports detected (28 KB unused)',
-        previewUri: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&auto=format&fit=crop&q=80',
-        isConsumed: false,
-    },
-    {
-        id: 'img-5',
-        name: 'walkthrough_thumb.jpg',
-        path: 'assets/previews/walkthrough_thumb.jpg',
-        ext: 'JPG',
-        category: 'image',
-        sizeKb: 175,
-        meta: '1080×600px Progressive JPEG',
-        color: '#FB7185',
-        status: 'warning',
-        advice: 'Dead asset: 0 component references (175 KB unused)',
-        previewUri: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=200&auto=format&fit=crop&q=80',
-        isConsumed: false,
-    },
-    // ── TypeScript & JSX ──
-    {
-        id: 'ts-1',
-        name: 'LogDetail.tsx',
-        path: 'src/components/Inspector/LogDetail.tsx',
-        ext: 'TSX',
-        category: 'typescript',
-        sizeKb: 44,
-        meta: '1,238 lines • React Component',
-        color: '#38BDF8',
-        status: 'optimal',
-        advice: 'Clean React.memo and useCallback optimization',
-    },
-    {
-        id: 'ts-2',
-        name: 'ReduxDetail.tsx',
-        path: 'src/components/Inspector/ReduxDetail.tsx',
-        ext: 'TSX',
-        category: 'typescript',
-        sizeKb: 38,
-        meta: '680 lines • Slice state tree & action timeline',
-        color: '#38BDF8',
-        status: 'optimal',
-        advice: 'Multi-tab subview with live state diffing',
-    },
-    {
-        id: 'ts-3',
-        name: 'NetworkTab.tsx',
-        path: 'src/components/Inspector/NetworkTab.tsx',
-        ext: 'TSX',
-        category: 'typescript',
-        sizeKb: 15,
-        meta: '486 lines • Network request virtualization list',
-        color: '#0EA5E9',
-        status: 'optimal',
-        advice: 'FlatList windowSize=7 tuned for 60fps',
-    },
-    {
-        id: 'ts-4',
-        name: 'SettingsPanel.tsx',
-        path: 'src/components/Inspector/SettingsPanel.tsx',
-        ext: 'TSX',
-        category: 'typescript',
-        sizeKb: 65,
-        meta: '1,845 lines • Preferences & storage manager',
-        color: '#38BDF8',
-        status: 'info',
-        advice: 'Self-contained settings subviews',
-    },
-    {
-        id: 'ts-5',
-        name: 'consoleLogger.ts',
-        path: 'src/customHooks/consoleLogger.ts',
-        ext: 'TS',
-        category: 'typescript',
-        sizeKb: 12,
-        meta: '360 lines • Metro symbolication bridge',
-        color: '#0284C7',
-        status: 'optimal',
-        advice: 'Zero-overhead in-memory stack capture',
-    },
-    {
-        id: 'ts-6',
-        name: 'App.tsx (Playground)',
-        path: 'example/App.tsx',
-        ext: 'TSX',
-        category: 'typescript',
-        sizeKb: 25,
-        meta: '820 lines • Interactive test scenarios',
-        color: '#38BDF8',
-        status: 'optimal',
-        advice: 'Sample harness for logs, APIs, and Redux',
-    },
-    // ── JavaScript & Node Modules ──
-    {
-        id: 'js-1',
-        name: 'react-native/Libraries/Renderer',
-        path: 'node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js',
-        ext: 'JS',
-        category: 'javascript',
-        sizeKb: 480,
-        meta: 'Fabric & Paper UI reconciler bundle',
-        color: '#6366F1',
-        status: 'optimal',
-        advice: 'AOT compiled with Hermes Bytecode',
-    },
-    {
-        id: 'js-2',
-        name: '@react-navigation/native-stack',
-        path: 'node_modules/@react-navigation/native-stack/lib/module/index.js',
-        ext: 'JS',
-        category: 'javascript',
-        sizeKb: 195,
-        meta: 'Native screen animation & transition engine',
-        color: '#818CF8',
-        status: 'optimal',
-        advice: 'Optimized modular ES bundle',
-    },
-    {
-        id: 'js-3',
-        name: 'axios/dist/esm/axios.js',
-        path: 'node_modules/axios/dist/esm/axios.js',
-        ext: 'JS',
-        category: 'javascript',
-        sizeKb: 88,
-        meta: 'HTTP client core with interceptors',
-        color: '#F59E0B',
-        status: 'optimal',
-        advice: 'Standard lightweight network adapter',
-    },
-    {
-        id: 'js-4',
-        name: 'react-native-svg',
-        path: 'node_modules/react-native-svg/lib/module/index.js',
-        ext: 'JS',
-        category: 'javascript',
-        sizeKb: 140,
-        meta: 'Native SVG drawing and vector paths',
-        color: '#4F46E5',
-        status: 'optimal',
-        advice: 'Native Fabric/Paper vector bridge',
-    },
-    // ── Fonts & Typography ──
-    {
-        id: 'font-1',
-        name: 'Inter-Bold.ttf',
-        path: 'fonts/Inter-Bold.ttf',
-        ext: 'TTF',
-        category: 'font',
-        sizeKb: 165,
-        meta: 'Custom UI Font • Full Latin Charset (480 glyphs)',
-        color: '#8B5CF6',
-        status: 'info',
-        advice: 'High readability modern typography',
-    },
-    {
-        id: 'font-2',
-        name: 'Inter-Regular.ttf',
-        path: 'fonts/Inter-Regular.ttf',
-        ext: 'TTF',
-        category: 'font',
-        sizeKb: 160,
-        meta: 'Custom Body Font • 400 Weight (480 glyphs)',
-        color: '#8B5CF6',
-        status: 'info',
-        advice: 'Applied across inspector UI cards and text',
-    },
-    {
-        id: 'font-3',
-        name: 'JetBrainsMono-Regular.ttf',
-        path: 'fonts/JetBrainsMono-Regular.ttf',
-        ext: 'TTF',
-        category: 'font',
-        sizeKb: 95,
-        meta: 'Monospace Code Font • Raw / Table / Stack Traces',
-        color: '#A855F7',
-        status: 'optimal',
-        advice: 'Crisp font for code snippets and stack traces',
-    },
-    // ── JSON & Localizations ──
-    {
-        id: 'json-1',
-        name: 'en.json (i18n Translations)',
-        path: 'src/i18n/locales/en.json',
-        ext: 'JSON',
-        category: 'json',
-        sizeKb: 18,
-        meta: '124 localization translation keys',
-        color: '#10B981',
-        status: 'optimal',
-        advice: 'Static JSON locale dictionary',
-    },
-    {
-        id: 'json-2',
-        name: 'package.json',
-        path: 'package.json',
-        ext: 'JSON',
-        category: 'json',
-        sizeKb: 3,
-        meta: 'Manifest & peer dependencies config',
-        color: '#059669',
-        status: 'optimal',
-        advice: 'Stripped during production bundle export',
-    },
-];
-// ─── Packages / Node Modules Breakdown Data ──────────────────────────────────
-const BUNDLE_PACKAGES_DATA = [
-    {
-        id: 'pkg-1',
-        name: 'react-native',
-        version: '0.85.3',
-        latestVersion: '0.85.3',
-        sizeKb: 680,
-        percentage: 38.5,
-        type: 'direct',
-        category: 'core',
-        color: '#38BDF8',
-        description: 'React Native runtime, Fabric UI engine, Native Bridge, and Turbomodules.',
-        logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
-        lastActive: '3 days ago',
-        npmUrl: 'https://www.npmjs.com/package/react-native',
-        isDeprecated: false,
-    },
-    {
-        id: 'pkg-2',
-        name: '@react-navigation/native-stack',
-        version: '^7.16.0',
-        latestVersion: '7.16.0',
-        sizeKb: 245,
-        percentage: 13.9,
-        type: 'direct',
-        category: 'navigation',
-        color: '#818CF8',
-        description: 'Native screen router, UIViewController / Fragment animations and transitions.',
-        logoUri: 'https://reactnavigation.org/img/spiro.svg',
-        lastActive: '1 week ago',
-        npmUrl: 'https://www.npmjs.com/package/@react-navigation/native-stack',
-        isDeprecated: false,
-    },
-    {
-        id: 'pkg-3',
-        name: 'react',
-        version: '19.2.3',
-        latestVersion: '19.2.3',
-        sizeKb: 185,
-        percentage: 10.5,
-        type: 'direct',
-        category: 'core',
-        color: '#06B6D4',
-        description: 'React core virtual DOM reconciler, hooks engine, and JSX runtime.',
-        logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
-        lastActive: '5 days ago',
-        npmUrl: 'https://www.npmjs.com/package/react',
-        isDeprecated: false,
-    },
-    {
-        id: 'pkg-4',
-        name: 'react-native-svg',
-        version: '^15.15.5',
-        latestVersion: '15.16.0',
-        sizeKb: 140,
-        percentage: 7.9,
-        type: 'direct',
-        category: 'ui',
-        color: '#F472B6',
-        description: 'Scalable Vector Graphics XML parser and native canvas path rasterizer.',
-        logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/512px-SVG_logo.svg.png',
-        lastActive: '2 days ago',
-        npmUrl: 'https://www.npmjs.com/package/react-native-svg',
-        isDeprecated: false,
-    },
-    {
-        id: 'pkg-5',
-        name: 'react-native-screens',
-        version: '^4.25.2',
-        latestVersion: '4.25.2',
-        sizeKb: 110,
-        percentage: 6.2,
-        type: 'transitive',
-        category: 'navigation',
-        color: '#A78BFA',
-        description: 'Native navigation container primitives for iOS and Android memory management.',
-        logoUri: 'https://reactnavigation.org/img/spiro.svg',
-        lastActive: '2 weeks ago',
-        npmUrl: 'https://www.npmjs.com/package/react-native-screens',
-        isDeprecated: false,
-    },
-    {
-        id: 'pkg-6',
-        name: 'axios',
-        version: '^1.17.0',
-        latestVersion: '1.18.0',
-        sizeKb: 88,
-        percentage: 5.0,
-        type: 'direct',
-        category: 'network',
-        color: '#F59E0B',
-        description: 'HTTP client, request/response interceptors, and adapter pipelines.',
-        logoUri: 'https://axios-http.com/assets/logo.svg',
-        lastActive: '4 days ago',
-        npmUrl: 'https://www.npmjs.com/package/axios',
-        isDeprecated: false,
-    },
-    {
-        id: 'pkg-7',
-        name: 'react-native-linear-gradient',
-        version: '^2.8.3',
-        latestVersion: '2.8.3',
-        sizeKb: 45,
-        percentage: 2.5,
-        type: 'direct',
-        category: 'ui',
-        color: '#FB7185',
-        description: 'Hardware accelerated native gradient drawing shaders.',
-        logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
-        lastActive: '2 years ago',
-        npmUrl: 'https://www.npmjs.com/package/react-native-linear-gradient',
-        isDeprecated: true,
-        deprecationReason: 'Package maintenance is in transition. Consider expo-linear-gradient or @react-native-community/linear-gradient for Fabric support.',
-    },
-    {
-        id: 'pkg-8',
-        name: 'i18next & react-i18next',
-        version: '^26.3.6',
-        latestVersion: '26.3.6',
-        sizeKb: 62,
-        percentage: 3.5,
-        type: 'direct',
-        category: 'utils',
-        color: '#10B981',
-        description: 'Internationalization framework, language interpolator, and locale switcher.',
-        logoUri: 'https://raw.githubusercontent.com/i18next/i18next/master/assets/i18next-logo.png',
-        lastActive: '6 days ago',
-        npmUrl: 'https://www.npmjs.com/package/i18next',
-        isDeprecated: false,
-    },
-];
 const CATEGORY_TABS = [
-    { key: 'ALL', label: 'All Files', icon: '📁' },
-    { key: 'UNUSED', label: 'Not Consumed (Dead)', icon: '🚫' },
-    { key: 'CONSUMED', label: 'In-Use / Active', icon: '⚡' },
-    { key: 'image', label: 'Images & Media', icon: '🖼️' },
-    { key: 'typescript', label: 'TypeScript / TSX', icon: '📜' },
-    { key: 'javascript', label: 'JS & Node Modules', icon: '⚙️' },
-    { key: 'font', label: 'Fonts & Glyphs', icon: '🔤' },
-    { key: 'json', label: 'JSON & Data', icon: '📄' },
+    { key: 'ALL', labelKey: 'bundle.catAll', iconType: 'folder' },
+    { key: 'UNUSED', labelKey: 'bundle.catUnused', iconType: 'ban' },
+    { key: 'CONSUMED', labelKey: 'bundle.catConsumed', iconType: 'bolt' },
+    { key: 'image', labelKey: 'bundle.catImages', iconType: 'image' },
+    { key: 'typescript', labelKey: 'bundle.catTypescript', iconType: 'typescript' },
+    { key: 'javascript', labelKey: 'bundle.catJavascript', iconType: 'javascript' },
+    { key: 'font', labelKey: 'bundle.catFonts', iconType: 'font' },
+    { key: 'json', labelKey: 'bundle.catJson', iconType: 'json' },
 ];
 const CATEGORY_COLORS = {
-    image: { label: 'Images & Media', color: '#EC4899', bg: '#FCE7F3' },
-    typescript: { label: 'TypeScript', color: '#0EA5E9', bg: '#E0F2FE' },
-    javascript: { label: 'JavaScript', color: '#6366F1', bg: '#EEF2FF' },
-    font: { label: 'Fonts', color: '#8B5CF6', bg: '#F3E8FF' },
-    json: { label: 'JSON / Data', color: '#10B981', bg: '#D1FAE5' },
+    image: { label: 'Images & Media', color: AppColors.pink500, bg: AppColors.pink100 },
+    typescript: { label: 'TypeScript', color: AppColors.sky500, bg: AppColors.sky100 },
+    javascript: { label: 'JavaScript', color: AppColors.indigo500, bg: AppColors.indigo50 },
+    font: { label: 'Fonts', color: AppColors.purple500, bg: AppColors.purple100 },
+    json: { label: 'JSON / Data', color: AppColors.emerald500, bg: AppColors.emerald100 },
 };
 const BundleTab = React.memo(() => {
     const { t } = useTranslation();
     const [activeSubTab, setActiveSubTab] = useState('overview');
     const [search, setSearch] = useState('');
     const [activeCategory, setActiveCategory] = useState('ALL');
+    // ─── Live Host App Bundle Analysis (fetched from Metro / runtime) ─────────
+    const [analysis, setAnalysis] = useState(() => getCachedBundleAnalysis());
+    const [isAnalyzing, setIsAnalyzing] = useState(!getCachedBundleAnalysis());
+    useEffect(() => {
+        let mounted = true;
+        analyzeHostAppBundle().then(result => {
+            if (mounted) {
+                setAnalysis(result);
+                setIsAnalyzing(false);
+            }
+        });
+        return () => {
+            mounted = false;
+        };
+    }, []);
     // Check if Hermes is running
     const isHermes = Boolean(global.HermesInternal);
+    // Dynamic files & packages derived from the analyzed host bundle
+    const bundleFiles = useMemo(() => (analysis ? analysis.files : []), [analysis]);
+    const bundlePackages = useMemo(() => (analysis ? analysis.packages : []), [analysis]);
     // Group summary calculations
     const summary = useMemo(() => {
         let imagesKb = 0;
@@ -756,7 +461,7 @@ const BundleTab = React.memo(() => {
         let jsCount = 0;
         let fontsCount = 0;
         let jsonCount = 0;
-        BUNDLE_FILES_DATA.forEach(f => {
+        bundleFiles.forEach(f => {
             if (f.category === 'image') {
                 imagesKb += f.sizeKb;
                 imagesCount++;
@@ -782,37 +487,37 @@ const BundleTab = React.memo(() => {
         return {
             totalKb,
             totalMb: (totalKb / 1024).toFixed(2),
-            totalCount: BUNDLE_FILES_DATA.length,
+            totalCount: bundleFiles.length,
             images: {
                 count: imagesCount,
                 kb: imagesKb,
-                pct: Number(((imagesKb / totalKb) * 100).toFixed(1)),
+                pct: totalKb ? Number(((imagesKb / totalKb) * 100).toFixed(1)) : 0,
             },
             ts: {
                 count: tsCount,
                 kb: tsKb,
-                pct: Number(((tsKb / totalKb) * 100).toFixed(1)),
+                pct: totalKb ? Number(((tsKb / totalKb) * 100).toFixed(1)) : 0,
             },
             js: {
                 count: jsCount,
                 kb: jsKb,
-                pct: Number(((jsKb / totalKb) * 100).toFixed(1)),
+                pct: totalKb ? Number(((jsKb / totalKb) * 100).toFixed(1)) : 0,
             },
             fonts: {
                 count: fontsCount,
                 kb: fontsKb,
-                pct: Number(((fontsKb / totalKb) * 100).toFixed(1)),
+                pct: totalKb ? Number(((fontsKb / totalKb) * 100).toFixed(1)) : 0,
             },
             json: {
                 count: jsonCount,
                 kb: jsonKb,
-                pct: Number(((jsonKb / totalKb) * 100).toFixed(1)),
+                pct: totalKb ? Number(((jsonKb / totalKb) * 100).toFixed(1)) : 0,
             },
         };
-    }, []);
+    }, [bundleFiles]);
     // Filtered files
     const filteredFiles = useMemo(() => {
-        return BUNDLE_FILES_DATA.filter(file => {
+        return bundleFiles.filter(file => {
             const matchSearch = !search ||
                 file.name.toLowerCase().includes(search.toLowerCase()) ||
                 file.path.toLowerCase().includes(search.toLowerCase()) ||
@@ -827,7 +532,7 @@ const BundleTab = React.memo(() => {
                         : file.category === activeCategory;
             return matchSearch && matchCategory;
         });
-    }, [search, activeCategory]);
+    }, [search, activeCategory, bundleFiles]);
     const filteredTotalKb = useMemo(() => {
         return filteredFiles.reduce((acc, f) => acc + f.sizeKb, 0);
     }, [filteredFiles]);
@@ -862,46 +567,46 @@ const BundleTab = React.memo(() => {
     // Filtered Packages
     const filteredPackages = useMemo(() => {
         if (!search)
-            return BUNDLE_PACKAGES_DATA;
+            return bundlePackages;
         const q = search.toLowerCase();
-        return BUNDLE_PACKAGES_DATA.filter(pkg => pkg.name.toLowerCase().includes(q) ||
+        return bundlePackages.filter(pkg => pkg.name.toLowerCase().includes(q) ||
             pkg.description.toLowerCase().includes(q) ||
             pkg.category.toLowerCase().includes(q));
-    }, [search]);
+    }, [search, bundlePackages]);
     const packagesTotalKb = useMemo(() => {
         return filteredPackages.reduce((acc, p) => acc + p.sizeKb, 0);
     }, [filteredPackages]);
     // Media files (Images + Fonts)
     const mediaFiles = useMemo(() => {
-        return BUNDLE_FILES_DATA.filter(f => f.category === 'image' || f.category === 'font');
-    }, []);
+        return bundleFiles.filter(f => f.category === 'image' || f.category === 'font');
+    }, [bundleFiles]);
     const mediaTotalKb = useMemo(() => {
         return mediaFiles.reduce((acc, m) => acc + m.sizeKb, 0);
     }, [mediaFiles]);
     const subTabs = [
         {
             key: 'overview',
-            label: 'Overview',
+            label: t('bundle.tabOverview'),
             icon: (isActive) => (<LiveStateIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
         },
         {
             key: 'files',
-            label: `Files (${BUNDLE_FILES_DATA.length})`,
+            label: t('bundle.tabFiles', { count: bundleFiles.length }),
             icon: (isActive) => (<LayersIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
         },
         {
             key: 'packages',
-            label: `Packages (${BUNDLE_PACKAGES_DATA.length})`,
+            label: t('bundle.tabPackages', { count: bundlePackages.length }),
             icon: (isActive) => (<PackageIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
         },
         {
             key: 'media',
-            label: `Media (${mediaFiles.length})`,
+            label: t('bundle.tabMedia', { count: mediaFiles.length }),
             icon: (isActive) => (<StorageIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
         },
         {
             key: 'optimizer',
-            label: 'Optimizer',
+            label: t('bundle.tabOptimizer'),
             icon: (isActive) => (<MetadataIcon color={isActive ? AppColors.white : AppColors.purple} size={12}/>),
         },
     ];
@@ -927,10 +632,21 @@ const BundleTab = React.memo(() => {
         </ScrollView>
       </View>
 
+      {/* ─── Live Bundle Analysis Loading State ─── */}
+      {isAnalyzing && (<View style={bundleStyles.analyzingContainer}>
+          <ActivityIndicator size="small" color={AppColors.brandPurple}/>
+          <Text style={bundleStyles.analyzingText}>
+            {t('bundle.analyzingTitle')}
+          </Text>
+          <Text style={bundleStyles.analyzingHint}>
+            {t('bundle.analyzingHint')}
+          </Text>
+        </View>)}
+
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 1. TAB: OVERVIEW & TREEMAP ───────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'overview' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
+      {activeSubTab === 'overview' && !isAnalyzing && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
           
           {/* Hero Overview Card */}
           <View style={bundleStyles.heroCard}>
@@ -939,42 +655,59 @@ const BundleTab = React.memo(() => {
                 <PackageIcon color={AppColors.brandPurple} size={24}/>
               </View>
               <View style={{ flex: 1 }}>
-                <Text style={bundleStyles.heroTitle}>Bundle & Asset Architecture</Text>
+                <Text style={bundleStyles.heroTitle}>{t('bundle.heroTitle')}</Text>
                 <Text style={bundleStyles.heroSubtitle}>
-                  Real-time size breakdown across all assets, code, and dependencies
+                  {analysis?.isLive
+                ? t('bundle.heroSubtitleLive', { scriptUrl: analysis.scriptURL })
+                : t('bundle.heroSubtitle')}
                 </Text>
               </View>
-              <CopyButton value={() => summary} label="Bundle Overview JSON"/>
+              <CopyButton value={() => ({ ...summary, bundle: analysis })} label={t('bundle.bundleOverviewJson')}/>
             </View>
 
             {/* 4-Stat Metric Grid */}
             <View style={bundleStyles.metricsGrid}>
               <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>TOTAL BUNDLE ASSETS</Text>
-                <Text style={bundleStyles.metricValue}>~{summary.totalMb} MB</Text>
-                <Text style={bundleStyles.metricHint}>{BUNDLE_FILES_DATA.length} Tracked files</Text>
+                <Text style={bundleStyles.metricLabel}>{t('bundle.devBundleSize')}</Text>
+                <Text style={bundleStyles.metricValue}>
+                  {t('bundle.mbValue', {
+                size: analysis ? analysis.totalDevMb : summary.totalMb,
+            })}
+                </Text>
+                <Text style={bundleStyles.metricHint}>
+                  {analysis
+                ? t('bundle.devBundleHint', {
+                    kb: analysis.totalDevKb,
+                    modules: analysis.moduleCount,
+                })
+                : t('bundle.trackedFilesHint', { count: bundleFiles.length })}
+                </Text>
               </View>
 
               <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>IMAGES & MEDIA</Text>
-                <Text style={[bundleStyles.metricValue, { color: '#EC4899' }]}>
-                  {summary.images.kb} KB
+                <Text style={bundleStyles.metricLabel}>{t('bundle.imagesMedia')}</Text>
+                <Text style={[bundleStyles.metricValue, { color: AppColors.pink500 }]}>
+                  {t('bundle.fileSizeKb', { size: summary.images.kb })}
+                </Text>
+                <Text style={bundleStyles.metricHint}>
+                  {t('bundle.pctOfTrackedAssets', { pct: summary.images.pct })}
                 </Text>
-                <Text style={bundleStyles.metricHint}>{summary.images.pct}% of package</Text>
               </View>
 
               <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>TS / JS SOURCE</Text>
-                <Text style={[bundleStyles.metricValue, { color: '#0EA5E9' }]}>
-                  {summary.ts.kb + summary.js.kb} KB
+                <Text style={bundleStyles.metricLabel}>{t('bundle.tsJsSource')}</Text>
+                <Text style={[bundleStyles.metricValue, { color: AppColors.sky500 }]}>
+                  {t('bundle.fileSizeKb', { size: summary.ts.kb + summary.js.kb })}
                 </Text>
                 <Text style={bundleStyles.metricHint}>
-                  {(summary.ts.pct + summary.js.pct).toFixed(1)}% of package
+                  {t('bundle.pctOfTrackedAssets', {
+                pct: (summary.ts.pct + summary.js.pct).toFixed(1),
+            })}
                 </Text>
               </View>
 
               <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>JS ENGINE</Text>
+                <Text style={bundleStyles.metricLabel}>{t('bundle.jsEngine')}</Text>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 2 }}>
                   <View style={[
                 bundleStyles.statusIndicator,
@@ -984,17 +717,109 @@ const BundleTab = React.memo(() => {
                     {isHermes ? 'Hermes' : 'JSC'}
                   </Text>
                 </View>
-                <Text style={bundleStyles.metricHint}>{isHermes ? 'Bytecode AOT' : 'Standard'}</Text>
+                <Text style={bundleStyles.metricHint}>
+                  {isHermes ? t('bundle.bytecodeAot') : t('bundle.standard')}
+                </Text>
               </View>
             </View>
           </View>
 
+          {/* Development Bundle Split-Up (derived from the real running bundle) */}
+          {analysis && (<View style={bundleStyles.sectionCard}>
+              <View style={bundleStyles.sectionHeaderRow}>
+                <View>
+                  <Text style={bundleStyles.sectionTitle}>{t('bundle.splitUpTitle')}</Text>
+                  <Text style={bundleStyles.sectionSub}>
+                    {t('bundle.splitUpSub', {
+                    mb: analysis.totalDevMb,
+                    files: analysis.filesCount,
+                    packages: analysis.packageCount,
+                })}
+                  </Text>
+                </View>
+                <CopyButton value={() => analysis.splitUp} label={t('bundle.splitUpJson')}/>
+              </View>
+
+              {[
+                    {
+                        iconType: 'source',
+                        label: t('bundle.splitAppSource'),
+                        color: AppColors.sky500,
+                        ...analysis.splitUp.appSource,
+                    },
+                    {
+                        iconType: 'deps',
+                        label: t('bundle.splitNodeModules'),
+                        color: AppColors.indigo500,
+                        ...analysis.splitUp.nodeModules,
+                    },
+                    {
+                        iconType: 'media',
+                        label: t('bundle.splitAssetsMedia'),
+                        color: AppColors.pink500,
+                        ...analysis.splitUp.assetsMedia,
+                    },
+                    {
+                        iconType: 'overhead',
+                        label: t('bundle.splitMetroOverhead'),
+                        color: AppColors.amber500,
+                        ...analysis.splitUp.metroDevOverhead,
+                    },
+                ].map((part, idx) => (<View key={idx} style={bundleStyles.catRowCard}>
+                  <View style={bundleStyles.catRowTop}>
+                    <BundleCategoryIcon type={part.iconType} size={18} color={part.color}/>
+                    <View style={{ flex: 1 }}>
+                      <Text style={bundleStyles.catRowTitle}>{part.label}</Text>
+                      <Text style={bundleStyles.catRowDesc}>
+                        {t('bundle.splitSize', { kb: part.kb, mb: part.mb })}
+                      </Text>
+                    </View>
+                    <View style={{ alignItems: 'flex-end' }}>
+                      <Text style={bundleStyles.catRowSize}>{part.pct}%</Text>
+                    </View>
+                  </View>
+                  <View style={bundleStyles.catProgressTrack}>
+                    <View style={[
+                        bundleStyles.catProgressBar,
+                        { width: `${part.pct}%`, backgroundColor: part.color },
+                    ]}/>
+                  </View>
+                </View>))}
+
+              {/* Production Binary Footprint */}
+              <View style={bundleStyles.totalSummaryCard}>
+                <View style={bundleStyles.totalSummaryRow}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                    <PackageIcon color={AppColors.purple} size={16}/>
+                    <Text style={bundleStyles.totalSummaryLabel}>
+                      {t('bundle.productionFootprint')}
+                    </Text>
+                  </View>
+                  <Text style={bundleStyles.totalSummaryValue}>
+                    {t('bundle.productionValue', {
+                    ios: analysis.production.ios.totalInstallMb,
+                    android: analysis.production.android.totalInstallMb,
+                })}
+                  </Text>
+                </View>
+                <Text style={bundleStyles.totalSummaryFormula}>
+                  {t('bundle.productionDownload', {
+                    ios: analysis.production.ios.totalDownloadMb,
+                    aab: analysis.production.androidAab.totalDownloadMb,
+                    apk: analysis.production.androidApk.totalDownloadMb,
+                })}
+                </Text>
+              </View>
+            </View>)}
+
           {/* Visual Type Distribution Ratio Bar */}
           <View style={bundleStyles.sectionCard}>
             <View style={bundleStyles.sectionHeaderRow}>
               <View>
-                <Text style={bundleStyles.sectionTitle}>Asset & File Type Ratio Treemap</Text>
-                <Text style={bundleStyles.sectionSub}>Total ~{summary.totalMb} MB</Text>
+                <Text style={bundleStyles.sectionTitle}>{t('bundle.treemapTitle')}</Text>
+                <Text style={bundleStyles.sectionSub}>
+                  {t('bundle.treemapSub', { mb: summary.totalMb })}
+                </Text>
               </View>
               <CopyButton value={() => ({
                 totalMb: summary.totalMb,
@@ -1004,48 +829,63 @@ const BundleTab = React.memo(() => {
                 js: summary.js,
                 fonts: summary.fonts,
                 json: summary.json,
-            })} label="Ratio Treemap JSON"/>
+            })} label={t('bundle.treemapJson')}/>
             </View>
 
             {/* Stacked Colored Bar */}
             <View style={bundleStyles.treemapBar}>
-              <View style={{ flex: summary.images.pct, backgroundColor: '#EC4899', height: 16 }}/>
-              <View style={{ flex: summary.ts.pct, backgroundColor: '#0EA5E9', height: 16 }}/>
-              <View style={{ flex: summary.js.pct, backgroundColor: '#6366F1', height: 16 }}/>
-              <View style={{ flex: summary.fonts.pct, backgroundColor: '#8B5CF6', height: 16 }}/>
-              <View style={{ flex: summary.json.pct, backgroundColor: '#10B981', height: 16 }}/>
+              <View style={{ flex: summary.images.pct, backgroundColor: AppColors.pink500, height: 16 }}/>
+              <View style={{ flex: summary.ts.pct, backgroundColor: AppColors.sky500, height: 16 }}/>
+              <View style={{ flex: summary.js.pct, backgroundColor: AppColors.indigo500, height: 16 }}/>
+              <View style={{ flex: summary.fonts.pct, backgroundColor: AppColors.purple500, height: 16 }}/>
+              <View style={{ flex: summary.json.pct, backgroundColor: AppColors.emerald500, height: 16 }}/>
             </View>
 
             {/* Legend Grid */}
             <View style={bundleStyles.legendGrid}>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: '#EC4899' }]}/>
+                <BundleCategoryIcon type="image" size={13} color={AppColors.pink500}/>
                 <Text style={bundleStyles.legendText}>
-                  🖼️ Images: <Text style={bundleStyles.legendVal}>{summary.images.kb} KB ({summary.images.pct}%)</Text>
+                  {t('bundle.legendImages')}{' '}
+                  <Text style={bundleStyles.legendVal}>
+                    {t('bundle.legendValue', { kb: summary.images.kb, pct: summary.images.pct })}
+                  </Text>
                 </Text>
               </View>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: '#0EA5E9' }]}/>
+                <BundleCategoryIcon type="typescript" size={13} color={AppColors.sky500}/>
                 <Text style={bundleStyles.legendText}>
-                  📜 TS/TSX: <Text style={bundleStyles.legendVal}>{summary.ts.kb} KB ({summary.ts.pct}%)</Text>
+                  {t('bundle.legendTs')}{' '}
+                  <Text style={bundleStyles.legendVal}>
+                    {t('bundle.legendValue', { kb: summary.ts.kb, pct: summary.ts.pct })}
+                  </Text>
                 </Text>
               </View>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: '#6366F1' }]}/>
+                <BundleCategoryIcon type="javascript" size={13} color={AppColors.indigo500}/>
                 <Text style={bundleStyles.legendText}>
-                  ⚙️ JS Libs: <Text style={bundleStyles.legendVal}>{summary.js.kb} KB ({summary.js.pct}%)</Text>
+                  {t('bundle.legendJs')}{' '}
+                  <Text style={bundleStyles.legendVal}>
+                    {t('bundle.legendValue', { kb: summary.js.kb, pct: summary.js.pct })}
+                  </Text>
                 </Text>
               </View>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: '#8B5CF6' }]}/>
+                <BundleCategoryIcon type="font" size={13} color={AppColors.purple500}/>
                 <Text style={bundleStyles.legendText}>
-                  🔤 Fonts: <Text style={bundleStyles.legendVal}>{summary.fonts.kb} KB ({summary.fonts.pct}%)</Text>
+                  {t('bundle.legendFonts')}{' '}
+                  <Text style={bundleStyles.legendVal}>
+                    {t('bundle.legendValue', { kb: summary.fonts.kb, pct: summary.fonts.pct })}
+                  </Text>
                 </Text>
               </View>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: '#10B981' }]}/>
+                <BundleCategoryIcon type="json" size={13} color={AppColors.emerald500}/>
                 <Text style={bundleStyles.legendText}>
-                  📄 JSON: <Text style={bundleStyles.legendVal}>{summary.json.kb} KB ({summary.json.pct}%)</Text>
+                  {t('bundle.legendJson')}{' '}
+                  <Text style={bundleStyles.legendVal}>
+                    {t('bundle.legendValue', { kb: summary.json.kb, pct: summary.json.pct })}
+                  </Text>
                 </Text>
               </View>
             </View>
@@ -1054,7 +894,7 @@ const BundleTab = React.memo(() => {
           {/* Detailed Category Footprint Cards */}
           <View style={bundleStyles.sectionCard}>
             <View style={bundleStyles.sectionHeaderRow}>
-              <Text style={bundleStyles.sectionTitle}>Category Breakdown</Text>
+              <Text style={bundleStyles.sectionTitle}>{t('bundle.categoryBreakdown')}</Text>
               <CopyButton value={() => ({
                 totalAssets: summary.totalCount,
                 totalSizeKb: summary.totalKb,
@@ -1065,61 +905,66 @@ const BundleTab = React.memo(() => {
                     typescript: summary.ts,
                     json: summary.json,
                 },
-            })} label="Categories Breakdown JSON"/>
+            })} label={t('bundle.categoriesJson')}/>
             </View>
             
             {[
                 {
-                    icon: '🖼️',
-                    title: 'Images & Media Assets',
+                    iconType: 'image',
+                    title: t('bundle.catImagesTitle'),
                     count: summary.images.count,
-                    size: `${summary.images.kb} KB`,
+                    size: t('bundle.fileSizeKb', { size: summary.images.kb }),
                     pct: summary.images.pct,
-                    color: '#EC4899',
-                    desc: 'PNG, WebP, SVG, and JPG assets in bundle',
+                    color: AppColors.pink500,
+                    desc: t('bundle.catImagesDesc'),
                 },
                 {
-                    icon: '⚙️',
-                    title: 'Compiled Node Modules & JS',
+                    iconType: 'javascript',
+                    title: t('bundle.catJsTitle'),
                     count: summary.js.count,
-                    size: `${summary.js.kb} KB`,
+                    size: t('bundle.fileSizeKb', { size: summary.js.kb }),
                     pct: summary.js.pct,
-                    color: '#6366F1',
-                    desc: 'Third-party dependencies and native bridges',
+                    color: AppColors.indigo500,
+                    desc: t('bundle.catJsDesc'),
                 },
                 {
-                    icon: '🔤',
-                    title: 'Custom Fonts & Vector Glyphs',
+                    iconType: 'font',
+                    title: t('bundle.catFontsTitle'),
                     count: summary.fonts.count,
-                    size: `${summary.fonts.kb} KB`,
+                    size: t('bundle.fileSizeKb', { size: summary.fonts.kb }),
                     pct: summary.fonts.pct,
-                    color: '#8B5CF6',
-                    desc: 'Inter, JetBrainsMono, and UI typography fonts',
+                    color: AppColors.purple500,
+                    desc: bundleFiles
+                        .filter(f => f.category === 'font')
+                        .map(f => f.name)
+                        .join(', ') || t('bundle.catFontsDesc'),
                 },
                 {
-                    icon: '📜',
-                    title: 'TypeScript & JSX Components',
+                    iconType: 'typescript',
+                    title: t('bundle.catTsTitle'),
                     count: summary.ts.count,
-                    size: `${summary.ts.kb} KB`,
+                    size: t('bundle.fileSizeKb', { size: summary.ts.kb }),
                     pct: summary.ts.pct,
-                    color: '#0EA5E9',
-                    desc: 'App screen components, hooks, and business logic',
+                    color: AppColors.sky500,
+                    desc: t('bundle.catTsDesc'),
                 },
                 {
-                    icon: '📄',
-                    title: 'JSON Data & Localizations',
+                    iconType: 'json',
+                    title: t('bundle.catJsonTitle'),
                     count: summary.json.count,
-                    size: `${summary.json.kb} KB`,
+                    size: t('bundle.fileSizeKb', { size: summary.json.kb }),
                     pct: summary.json.pct,
-                    color: '#10B981',
-                    desc: 'i18n translation dictionaries and static configs',
+                    color: AppColors.emerald500,
+                    desc: t('bundle.catJsonDesc'),
                 },
             ].map((cat, cIdx) => (<View key={cIdx} style={bundleStyles.catRowCard}>
                 <View style={bundleStyles.catRowTop}>
-                  <Text style={bundleStyles.catRowIcon}>{cat.icon}</Text>
+                  <BundleCategoryIcon type={cat.iconType} size={18} color={cat.color}/>
                   <View style={{ flex: 1 }}>
                     <Text style={bundleStyles.catRowTitle}>{cat.title}</Text>
-                    <Text style={bundleStyles.catRowDesc}>{cat.count} items • {cat.desc}</Text>
+                    <Text style={bundleStyles.catRowDesc}>
+                      {t('bundle.catRowSub', { count: cat.count, desc: cat.desc })}
+                    </Text>
                   </View>
                   <View style={{ alignItems: 'flex-end' }}>
                     <Text style={bundleStyles.catRowSize}>{cat.size}</Text>
@@ -1139,14 +984,24 @@ const BundleTab = React.memo(() => {
               <View style={bundleStyles.totalSummaryRow}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <PackageIcon color={AppColors.purple} size={16}/>
-                  <Text style={bundleStyles.totalSummaryLabel}>TOTAL BUNDLE ASSETS</Text>
+                  <Text style={bundleStyles.totalSummaryLabel}>
+                    {t('bundle.totalBundleAssets')}
+                  </Text>
                 </View>
                 <Text style={bundleStyles.totalSummaryValue}>
-                  {summary.totalKb} KB (~{summary.totalMb} MB)
+                  {t('bundle.totalBundleValue', { kb: summary.totalKb, mb: summary.totalMb })}
                 </Text>
               </View>
               <Text style={bundleStyles.totalSummaryFormula}>
-                Sum: {summary.images.kb} KB + {summary.js.kb} KB + {summary.fonts.kb} KB + {summary.ts.kb} KB + {summary.json.kb} KB = {summary.totalKb} KB ({summary.totalCount} items • 100%)
+                {t('bundle.totalFormula', {
+                images: summary.images.kb,
+                js: summary.js.kb,
+                fonts: summary.fonts.kb,
+                ts: summary.ts.kb,
+                json: summary.json.kb,
+                total: summary.totalKb,
+                count: summary.totalCount,
+            })}
               </Text>
             </View>
           </View>
@@ -1155,16 +1010,16 @@ const BundleTab = React.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 2. TAB: FILES BREAKDOWN ─────────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'files' && (<View style={{ flex: 1 }}>
+      {activeSubTab === 'files' && !isAnalyzing && (<View style={{ flex: 1 }}>
           {/* Search & Category Filter */}
           <View style={bundleStyles.filterContainer}>
             <View style={bundleStyles.searchRow}>
               <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-              <TextInput placeholder="Search by file name (.png, .tsx, .ttf, path)..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+              <TextInput placeholder={t('bundle.searchFilesPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
               {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={10}>
                   <ClearIcon color={AppColors.grayTextWeak} size={14}/>
                 </Pressable>)}
-              <CopyButton value={() => filteredFiles} label="Filtered Files JSON"/>
+              <CopyButton value={() => filteredFiles} label={t('bundle.filteredFilesJson')}/>
             </View>
 
             {/* Category Filter Chips */}
@@ -1172,24 +1027,24 @@ const BundleTab = React.memo(() => {
               {CATEGORY_TABS.map(tab => {
                 const isActive = activeCategory === tab.key;
                 const count = tab.key === 'ALL'
-                    ? BUNDLE_FILES_DATA.length
+                    ? bundleFiles.length
                     : tab.key === 'UNUSED'
-                        ? BUNDLE_FILES_DATA.filter(f => f.isConsumed === false).length
+                        ? bundleFiles.filter(f => f.isConsumed === false).length
                         : tab.key === 'CONSUMED'
-                            ? BUNDLE_FILES_DATA.filter(f => f.isConsumed !== false).length
-                            : BUNDLE_FILES_DATA.filter(f => f.category === tab.key).length;
+                            ? bundleFiles.filter(f => f.isConsumed !== false).length
+                            : bundleFiles.filter(f => f.category === tab.key).length;
                 return (<TouchableScale key={tab.key} onPress={() => setActiveCategory(tab.key)} style={[
                         bundleStyles.catPill,
                         isActive && bundleStyles.catPillActive,
-                        tab.key === 'UNUSED' && isActive && { backgroundColor: '#EF4444', borderColor: '#DC2626' },
-                        tab.key === 'CONSUMED' && isActive && { backgroundColor: '#059669', borderColor: '#047857' },
+                        tab.key === 'UNUSED' && isActive && { backgroundColor: AppColors.red500, borderColor: AppColors.red600 },
+                        tab.key === 'CONSUMED' && isActive && { backgroundColor: AppColors.emerald600, borderColor: AppColors.emerald700 },
                     ]}>
-                    <Text style={bundleStyles.catPillIcon}>{tab.icon}</Text>
+                    <BundleCategoryIcon type={tab.iconType} size={12} color={isActive ? AppColors.white : AppColors.grayTextStrong}/>
                     <Text style={[
                         bundleStyles.catPillText,
                         isActive && bundleStyles.catPillTextActive,
                     ]}>
-                      {tab.label} ({count})
+                      {t(tab.labelKey)} ({count})
                     </Text>
                   </TouchableScale>);
             })}
@@ -1210,7 +1065,7 @@ const BundleTab = React.memo(() => {
                 bundleStyles.viewModeBtnText,
                 filesViewMode === 'tree' && bundleStyles.viewModeBtnTextActive,
             ]}>
-                    🌳 Tree View
+                    {t('bundle.treeView')}
                   </Text>
                 </TouchableScale>
                 <TouchableScale onPress={() => setFilesViewMode('list')} style={[
@@ -1221,21 +1076,24 @@ const BundleTab = React.memo(() => {
                 bundleStyles.viewModeBtnText,
                 filesViewMode === 'list' && bundleStyles.viewModeBtnTextActive,
             ]}>
-                    📄 Flat List
+                    {t('bundle.flatList')}
                   </Text>
                 </TouchableScale>
               </View>
 
               {filesViewMode === 'tree' ? (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                   <TouchableScale onPress={expandAllFolders}>
-                    <Text style={bundleStyles.treeActionLink}>Expand</Text>
+                    <Text style={bundleStyles.treeActionLink}>{t('bundle.expand')}</Text>
                   </TouchableScale>
                   <Text style={{ color: AppColors.grayTextWeak, fontSize: 11 }}>•</Text>
                   <TouchableScale onPress={collapseAllFolders}>
-                    <Text style={bundleStyles.treeActionLink}>Collapse</Text>
+                    <Text style={bundleStyles.treeActionLink}>{t('bundle.collapse')}</Text>
                   </TouchableScale>
                 </View>) : (<Text style={bundleStyles.listHeaderCount}>
-                  Showing {filteredFiles.length} of {BUNDLE_FILES_DATA.length} files
+                  {t('bundle.showingFilesOf', {
+                    shown: filteredFiles.length,
+                    total: bundleFiles.length,
+                })}
                 </Text>)}
             </View>
 
@@ -1260,9 +1118,9 @@ const BundleTab = React.memo(() => {
                         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                           <HighlightText text={file.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
                           {isUnused ? (<View style={bundleStyles.unusedBadge}>
-                              <Text style={bundleStyles.unusedBadgeText}>🚫 Not Consumed</Text>
+                              <Text style={bundleStyles.unusedBadgeText}>{t('bundle.notConsumed')}</Text>
                             </View>) : (<View style={bundleStyles.consumedBadge}>
-                              <Text style={bundleStyles.consumedBadgeText}>⚡ Consumed</Text>
+                              <Text style={bundleStyles.consumedBadgeText}>{t('bundle.consumed')}</Text>
                             </View>)}
                         </View>
                         <HighlightText text={file.path} search={search} style={bundleStyles.filePath} highlightStyle={bundleStyles.searchHighlight} numberOfLines={1}/>
@@ -1270,14 +1128,14 @@ const BundleTab = React.memo(() => {
 
                       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                         <View style={bundleStyles.fileSizeBox}>
-                          <Text style={[bundleStyles.fileSizeKb, isUnused && { color: '#B45309' }]}>
+                          <Text style={[bundleStyles.fileSizeKb, isUnused && { color: AppColors.amber800Warm }]}>
                             {file.sizeKb >= 1024
-                        ? `${(file.sizeKb / 1024).toFixed(2)} MB`
-                        : `${file.sizeKb} KB`}
+                        ? t('bundle.fileSizeMb', { size: (file.sizeKb / 1024).toFixed(2) })
+                        : t('bundle.fileSizeKb', { size: file.sizeKb })}
                           </Text>
                           <Text style={bundleStyles.filePercent}>{pctOfTotal}%</Text>
                         </View>
-                        <CopyButton value={() => file} label="File Details JSON"/>
+                        <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
                       </View>
                     </View>
 
@@ -1286,7 +1144,7 @@ const BundleTab = React.memo(() => {
                         bundleStyles.fileProgressBar,
                         {
                             width: `${Math.min(100, Math.max(4, Number(pctOfTotal) * 4))}%`,
-                            backgroundColor: isUnused ? '#EF4444' : categoryMeta.color,
+                            backgroundColor: isUnused ? AppColors.red500 : categoryMeta.color,
                         },
                     ]}/>
                     </View>
@@ -1299,15 +1157,17 @@ const BundleTab = React.memo(() => {
                             file.status === 'optimal' && bundleStyles.adviceOptimal,
                             isUnused && bundleStyles.adviceUnused,
                         ]}>
+                          <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
+                          {isUnused ? (<TrashIcon color={AppColors.red600} size={12}/>) : file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
                           <Text style={[
                             bundleStyles.adviceText,
-                            file.status === 'warning' && { color: '#B45309' },
-                            file.status === 'optimal' && { color: '#047857' },
-                            isUnused && { color: '#DC2626' },
+                            file.status === 'warning' && { color: AppColors.amber800Warm },
+                            file.status === 'optimal' && { color: AppColors.emerald700 },
+                            isUnused && { color: AppColors.red600 },
                         ]}>
-                            {isUnused ? '🗑️ ' : file.status === 'warning' ? '💡 ' : '✨ '}
                             {file.advice}
                           </Text>
+                        </View>
                         </View>)}
                     </View>
                   </View>);
@@ -1319,11 +1179,17 @@ const BundleTab = React.memo(() => {
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <LayersIcon color={AppColors.purple} size={14}/>
               <Text style={bundleStyles.footerTitle}>
-                {filteredFiles.length} of {summary.totalCount} Files
+                {t('bundle.filesOf', {
+                count: filteredFiles.length,
+                total: summary.totalCount,
+            })}
               </Text>
             </View>
             <Text style={bundleStyles.footerSizeVal}>
-              {filteredTotalKb} KB ({(filteredTotalKb / 1024).toFixed(2)} MB)
+              {t('bundle.kbMbValue', {
+                kb: filteredTotalKb,
+                mb: (filteredTotalKb / 1024).toFixed(2),
+            })}
             </Text>
           </View>
         </View>)}
@@ -1331,28 +1197,29 @@ const BundleTab = React.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 3. TAB: PACKAGES & NODE_MODULES ─────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'packages' && (<View style={{ flex: 1 }}>
+      {activeSubTab === 'packages' && !isAnalyzing && (<View style={{ flex: 1 }}>
           <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             
             <View style={bundleStyles.filterContainer}>
               <View style={bundleStyles.searchRow}>
                 <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-                <TextInput placeholder="Search package (react-native, axios, navigation)..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                <TextInput placeholder={t('bundle.searchPackagesPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={bundleStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
                 {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={10}>
                     <ClearIcon color={AppColors.grayTextWeak} size={14}/>
                   </Pressable>)}
-                <CopyButton value={() => filteredPackages} label="Dependencies JSON"/>
+                <CopyButton value={() => filteredPackages} label={t('bundle.dependenciesJson')}/>
               </View>
             </View>
 
             <Text style={bundleStyles.listHeaderCount}>
-              Showing {filteredPackages.length} dependencies
+              {t('bundle.showingDependencies', { count: filteredPackages.length })}
             </Text>
 
             {filteredPackages.map((pkg, index) => {
-                const cleanInstalledVersion = pkg.version.replace(/^\^/, '');
-                const hasUpdate = pkg.latestVersion && pkg.latestVersion !== cleanInstalledVersion;
-                return (<View key={pkg.id} style={[bundleStyles.fileCard, pkg.isDeprecated && { borderColor: '#FECDD3', backgroundColor: '#FFFDFD' }]}>
+                const cleanInstalledVersion = pkg.version ? pkg.version.replace(/^\^/, '') : '';
+                const hasUpdate = !!pkg.latestVersion && !!cleanInstalledVersion &&
+                    pkg.latestVersion !== cleanInstalledVersion;
+                return (<View key={pkg.id} style={[bundleStyles.fileCard, pkg.isDeprecated && { borderColor: AppColors.errorBorder, backgroundColor: '#FFFDFD' }]}>
                   {/* Header Row: #s.no + Logo + Package Name + Version Pill + Update/Deprecated Badges + Size & Copy */}
                   <View style={bundleStyles.fileCardTop}>
                     <View style={bundleStyles.sNoBadge}>
@@ -1366,26 +1233,40 @@ const BundleTab = React.memo(() => {
                         <HighlightText text={pkg.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
                         <View style={bundleStyles.versionPill}>
                           <Text style={bundleStyles.versionPillText}>
-                            v{cleanInstalledVersion}
+                            {cleanInstalledVersion
+                        ? t('bundle.versionPrefix', { version: cleanInstalledVersion })
+                        : t('bundle.bundled')}
                           </Text>
                         </View>
 
                         {pkg.isDeprecated ? (<View style={bundleStyles.deprecatedBadge}>
-                            <Text style={bundleStyles.deprecatedBadgeText}>⚠️ DEPRECATED</Text>
+                            <Text style={bundleStyles.deprecatedBadgeText}>
+                              {t('bundle.deprecated')}
+                            </Text>
                           </View>) : hasUpdate ? (<View style={bundleStyles.updateBadge}>
-                            <Text style={bundleStyles.updateBadgeText}>⚡ Update: v{pkg.latestVersion}</Text>
-                          </View>) : (<View style={[bundleStyles.updateBadge, { backgroundColor: '#F3F4F6', borderColor: '#E5E7EB' }]}>
-                            <Text style={[bundleStyles.updateBadgeText, { color: '#4B5563' }]}>✨ Up to date</Text>
+                            <Text style={bundleStyles.updateBadgeText}>
+                              {t('bundle.updateAvailable', { version: pkg.latestVersion })}
+                            </Text>
+                          </View>) : cleanInstalledVersion ? (<View style={[bundleStyles.updateBadge, { backgroundColor: AppColors.gray100, borderColor: AppColors.gray200 }]}>
+                            <Text style={[bundleStyles.updateBadgeText, { color: AppColors.gray600 }]}>
+                              {t('bundle.upToDate')}
+                            </Text>
+                          </View>) : (<View style={[bundleStyles.updateBadge, { backgroundColor: AppColors.gray100, borderColor: AppColors.gray200 }]}>
+                            <Text style={[bundleStyles.updateBadgeText, { color: AppColors.gray600 }]}>
+                              {t('bundle.bundledBadge')}
+                            </Text>
                           </View>)}
                       </View>
                     </View>
 
                     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                       <View style={bundleStyles.fileSizeBox}>
-                        <Text style={bundleStyles.fileSizeKb}>{pkg.sizeKb} KB</Text>
+                        <Text style={bundleStyles.fileSizeKb}>
+                          {t('bundle.fileSizeKb', { size: pkg.sizeKb })}
+                        </Text>
                         <Text style={bundleStyles.filePercent}>{pkg.percentage}%</Text>
                       </View>
-                      <CopyButton value={() => pkg} label="Package Details JSON"/>
+                      <CopyButton value={() => pkg} label={t('bundle.packageDetailsJson')}/>
                     </View>
                   </View>
 
@@ -1403,15 +1284,18 @@ const BundleTab = React.memo(() => {
 
                   {/* Deprecation Warning Banner if deprecated */}
                   {pkg.isDeprecated && pkg.deprecationReason && (<View style={bundleStyles.deprecationBox}>
-                      <Text style={bundleStyles.deprecationText}>
-                        ⚠️ {pkg.deprecationReason}
-                      </Text>
+                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                        <CircleAlertIcon color={AppColors.errorColor} size={12}/>
+                        <Text style={bundleStyles.deprecationText}>
+                          {pkg.deprecationReason}
+                        </Text>
+                      </View>
                     </View>)}
 
                   <View style={bundleStyles.fileProgressTrack}>
                     <View style={[
                         bundleStyles.fileProgressBar,
-                        { width: `${pkg.percentage * 2}%`, backgroundColor: pkg.isDeprecated ? '#EF4444' : pkg.color },
+                        { width: `${pkg.percentage * 2}%`, backgroundColor: pkg.isDeprecated ? AppColors.red500 : pkg.color },
                     ]}/>
                   </View>
 
@@ -1420,23 +1304,26 @@ const BundleTab = React.memo(() => {
                     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                       <View style={bundleStyles.typeTag}>
                         <Text style={bundleStyles.typeTagText}>
-                          {pkg.type === 'direct' ? '📦 Direct' : '🔗 Transitive'}
+                          {pkg.type === 'direct' ? t('bundle.direct') : t('bundle.transitive')}
                         </Text>
                       </View>
-                      {pkg.lastActive && (<Text style={bundleStyles.lastActiveText}>
-                          🕒 {pkg.lastActive}
-                        </Text>)}
+                      {pkg.lastActive && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                          <ClockIcon color={AppColors.grayTextWeak} size={11}/>
+                          <Text style={bundleStyles.lastActiveText}>
+                            {pkg.lastActive}
+                          </Text>
+                        </View>)}
                     </View>
 
                     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                       <Text style={bundleStyles.fileMetaText}>
-                        ~{pkg.sizeKb} KB minified
+                        {t('bundle.minified', { size: pkg.sizeKb })}
                       </Text>
                       <TouchableScale onPress={() => {
                         const url = pkg.npmUrl || `https://www.npmjs.com/package/${pkg.name}`;
                         Linking.openURL(url).catch(() => { });
                     }} style={bundleStyles.npmLinkBtn}>
-                        <Text style={bundleStyles.npmLinkText}>npm ↗</Text>
+                        <Text style={bundleStyles.npmLinkText}>{t('bundle.npmLink')}</Text>
                       </TouchableScale>
                     </View>
                   </View>
@@ -1449,11 +1336,14 @@ const BundleTab = React.memo(() => {
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <PackageIcon color={AppColors.purple} size={14}/>
               <Text style={bundleStyles.footerTitle}>
-                {filteredPackages.length} Dependencies
+                {t('bundle.dependenciesCount', { count: filteredPackages.length })}
               </Text>
             </View>
             <Text style={bundleStyles.footerSizeVal}>
-              {packagesTotalKb} KB ({(packagesTotalKb / 1024).toFixed(2)} MB)
+              {t('bundle.kbMbValue', {
+                kb: packagesTotalKb,
+                mb: (packagesTotalKb / 1024).toFixed(2),
+            })}
             </Text>
           </View>
         </View>)}
@@ -1461,24 +1351,32 @@ const BundleTab = React.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 4. TAB: MEDIA & ASSET AUDITOR ───────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'media' && (<View style={{ flex: 1 }}>
+      {activeSubTab === 'media' && !isAnalyzing && (<View style={{ flex: 1 }}>
           <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             
             <View style={bundleStyles.tipsCard}>
               <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <StorageIcon color={AppColors.purple} size={18}/>
-                  <Text style={bundleStyles.tipsHeading}>Media Compression Auditor</Text>
+                  <Text style={bundleStyles.tipsHeading}>{t('bundle.mediaAuditorTitle')}</Text>
                 </View>
-                <CopyButton value={() => mediaFiles} label="Media Assets JSON"/>
+                <CopyButton value={() => mediaFiles} label={t('bundle.mediaAssetsJson')}/>
               </View>
               <Text style={bundleStyles.tipDesc}>
-                Images & Fonts constitute <Text style={{ fontFamily: AppFonts.interBold, color: AppColors.purple }}>{summary.images.pct + summary.fonts.pct}%</Text> of total assets (~{summary.images.kb + summary.fonts.kb} KB). Converting PNGs to WebP and font subsetting can reduce size by up to <Text style={{ fontFamily: AppFonts.interBold, color: '#047857' }}>540 KB</Text>.
+                {t('bundle.mediaAuditorPrefix')}{' '}
+                <Text style={{ fontFamily: AppFonts.interBold, color: AppColors.purple }}>
+                  {summary.images.pct + summary.fonts.pct}%
+                </Text>{' '}
+                {t('bundle.mediaAuditorMid', { kb: summary.images.kb + summary.fonts.kb })}{' '}
+                <Text style={{ fontFamily: AppFonts.interBold, color: AppColors.emerald700 }}>
+                  {t('bundle.mediaSavings', { size: 540 })}
+                </Text>{' '}
+                {t('bundle.mediaAuditorSuffix')}
               </Text>
             </View>
 
             <Text style={bundleStyles.listHeaderCount}>
-              Media Assets & Fonts ({mediaFiles.length} items)
+              {t('bundle.mediaAssetsList', { count: mediaFiles.length })}
             </Text>
 
             {mediaFiles.map((file, index) => (<View key={file.id} style={bundleStyles.fileCard}>
@@ -1496,9 +1394,11 @@ const BundleTab = React.memo(() => {
 
                   <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                     <View style={bundleStyles.fileSizeBox}>
-                      <Text style={bundleStyles.fileSizeKb}>{file.sizeKb} KB</Text>
+                      <Text style={bundleStyles.fileSizeKb}>
+                        {t('bundle.fileSizeKb', { size: file.sizeKb })}
+                      </Text>
                     </View>
-                    <CopyButton value={() => file} label="Media Item JSON"/>
+                    <CopyButton value={() => file} label={t('bundle.mediaItemJson')}/>
                   </View>
                 </View>
 
@@ -1509,14 +1409,16 @@ const BundleTab = React.memo(() => {
                         file.status === 'warning' && bundleStyles.adviceWarning,
                         file.status === 'optimal' && bundleStyles.adviceOptimal,
                     ]}>
-                      <Text style={[
+                      <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
+                        {file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
+                        <Text style={[
                         bundleStyles.adviceText,
-                        file.status === 'warning' && { color: '#B45309' },
-                        file.status === 'optimal' && { color: '#047857' },
+                        file.status === 'warning' && { color: AppColors.amber800Warm },
+                        file.status === 'optimal' && { color: AppColors.emerald700 },
                     ]}>
-                        {file.status === 'warning' ? '💡 ' : '✨ '}
-                        {file.advice}
-                      </Text>
+                          {file.advice}
+                        </Text>
+                      </View>
                     </View>)}
                 </View>
               </View>))}
@@ -1527,11 +1429,14 @@ const BundleTab = React.memo(() => {
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <StorageIcon color={AppColors.purple} size={14}/>
               <Text style={bundleStyles.footerTitle}>
-                {mediaFiles.length} Media & Fonts
+                {t('bundle.mediaAndFonts', { count: mediaFiles.length })}
               </Text>
             </View>
             <Text style={bundleStyles.footerSizeVal}>
-              {mediaTotalKb} KB ({(mediaTotalKb / 1024).toFixed(2)} MB)
+              {t('bundle.kbMbValue', {
+                kb: mediaTotalKb,
+                mb: (mediaTotalKb / 1024).toFixed(2),
+            })}
             </Text>
           </View>
         </View>)}
@@ -1545,49 +1450,59 @@ const BundleTab = React.memo(() => {
             <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                 <CircleAlertIcon color={AppColors.purple} size={18}/>
-                <Text style={bundleStyles.tipsHeading}>React Native Bundle Optimization Checklist</Text>
+                <Text style={bundleStyles.tipsHeading}>{t('bundle.optimizerTitle')}</Text>
               </View>
               <CopyButton value={() => [
-                'Convert Heavy PNGs to WebP / SVGs (High Impact)',
-                `Enable Hermes Bytecode Engine (${isHermes ? 'Active' : 'Action Required'})`,
-                'Font Subsetting & Weight Pruning (Medium Impact)',
-                'Selective Path Imports Tree-shaking (Best Practice)',
-                'Screen Lazy-Loading (Best Practice)',
-            ]} label="Optimization Checklist"/>
+                t('bundle.optTip1Title'),
+                `${t('bundle.optTip2Title')} (${isHermes ? t('bundle.active') : t('bundle.actionRequired')})`,
+                t('bundle.optTip3Title'),
+                t('bundle.optTip4Title'),
+                t('bundle.optTip5Title'),
+            ]} label={t('bundle.optimizationChecklist')}/>
             </View>
 
             {[
                 {
-                    title: '🖼️ Convert Heavy PNGs to WebP / SVGs',
-                    desc: 'Images account for >40% of final app download size. Converting 2x/3x raster PNGs to WebP saves 60-70% size with no visible fidelity loss.',
-                    badge: 'High Impact',
-                    badgeColor: '#EC4899',
+                    iconType: 'image',
+                    iconColor: AppColors.pink500,
+                    title: t('bundle.optTip1Title'),
+                    desc: t('bundle.optTip1Desc'),
+                    badge: t('bundle.highImpact'),
+                    badgeColor: AppColors.pink500,
                 },
                 {
-                    title: '📜 Enable Hermes Bytecode Engine',
+                    iconType: 'bolt',
+                    iconColor: isHermes ? AppColors.emerald500 : AppColors.amber500,
+                    title: t('bundle.optTip2Title'),
                     desc: isHermes
-                        ? '✅ Hermes is active! JavaScript is compiled into optimized bytecode Ahead-Of-Time.'
-                        : '⚠️ Hermes is disabled. Enable hermes in your app config for ~40% smaller payload and instant TTI startup.',
-                    badge: isHermes ? 'Active' : 'Action Required',
-                    badgeColor: isHermes ? '#10B981' : '#F59E0B',
+                        ? t('bundle.optTip2DescActive')
+                        : t('bundle.optTip2DescInactive'),
+                    badge: isHermes ? t('bundle.active') : t('bundle.actionRequired'),
+                    badgeColor: isHermes ? AppColors.emerald500 : AppColors.amber500,
                 },
                 {
-                    title: '🔤 Font Subsetting & Weight Pruning',
-                    desc: 'Include only the font weights you actively use (e.g. Regular & Bold). Remove unused glyph ranges to save 100KB+ per font file.',
-                    badge: 'Medium Impact',
-                    badgeColor: '#8B5CF6',
+                    iconType: 'font',
+                    iconColor: AppColors.purple500,
+                    title: t('bundle.optTip3Title'),
+                    desc: t('bundle.optTip3Desc'),
+                    badge: t('bundle.mediumImpact'),
+                    badgeColor: AppColors.purple500,
                 },
                 {
-                    title: '🌲 Selective Path Imports (Tree-shaking)',
-                    desc: 'Import from specific subpaths (e.g. lodash/get or specific vector icon sets) instead of importing large monolithic packages.',
-                    badge: 'Best Practice',
-                    badgeColor: '#0EA5E9',
+                    iconType: 'source',
+                    iconColor: AppColors.sky500,
+                    title: t('bundle.optTip4Title'),
+                    desc: t('bundle.optTip4Desc'),
+                    badge: t('bundle.bestPractice'),
+                    badgeColor: AppColors.sky500,
                 },
                 {
-                    title: '⚡ Screen Lazy-Loading',
-                    desc: 'Lazy load secondary screens and heavy modal sheets using dynamic imports and InteractionManager to reduce initial bundle evaluation.',
-                    badge: 'Best Practice',
-                    badgeColor: '#6366F1',
+                    iconType: 'overhead',
+                    iconColor: AppColors.indigo500,
+                    title: t('bundle.optTip5Title'),
+                    desc: t('bundle.optTip5Desc'),
+                    badge: t('bundle.bestPractice'),
+                    badgeColor: AppColors.indigo500,
                 },
             ].map((tip, tIdx) => (<View key={tIdx} style={bundleStyles.tipItem}>
                 <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
@@ -1595,6 +1510,7 @@ const BundleTab = React.memo(() => {
                     <View style={bundleStyles.sNoBadge}>
                       <Text style={bundleStyles.sNoText}>#{tIdx + 1}</Text>
                     </View>
+                    <BundleCategoryIcon type={tip.iconType} size={14} color={tip.iconColor}/>
                     <Text style={bundleStyles.tipTitle}>{tip.title}</Text>
                   </View>
                   <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1603,7 +1519,7 @@ const BundleTab = React.memo(() => {
                         {tip.badge}
                       </Text>
                     </View>
-                    <CopyButton value={() => tip} label="Tip Details"/>
+                    <CopyButton value={() => tip} label={t('bundle.tipDetails')}/>
                   </View>
                 </View>
                 <Text style={bundleStyles.tipDesc}>{tip.desc}</Text>
@@ -1619,6 +1535,23 @@ const bundleStyles = StyleSheet.create({
         borderBottomWidth: 1,
         borderBottomColor: AppColors.dividerColor,
     },
+    analyzingContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        padding: 24,
+    },
+    analyzingText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors.primaryBlack,
+    },
+    analyzingHint: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+    },
     subTabsScroll: {
         paddingHorizontal: 12,
         gap: 8,
@@ -1777,11 +1710,6 @@ const bundleStyles = StyleSheet.create({
         gap: 5,
         minWidth: '45%',
     },
-    legendDot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-    },
     legendText: {
         fontFamily: AppFonts.interMedium,
         fontSize: 11,
@@ -1805,9 +1733,6 @@ const bundleStyles = StyleSheet.create({
         gap: 8,
         marginBottom: 8,
     },
-    catRowIcon: {
-        fontSize: 16,
-    },
     catRowTitle: {
         fontFamily: AppFonts.interBold,
         fontSize: 12,
@@ -1883,9 +1808,6 @@ const bundleStyles = StyleSheet.create({
         backgroundColor: AppColors.brandPurple,
         borderColor: AppColors.brandPurple,
     },
-    catPillIcon: {
-        fontSize: 11,
-    },
     catPillText: {
         fontFamily: AppFonts.interMedium,
         fontSize: 11,
@@ -2174,41 +2096,41 @@ const bundleStyles = StyleSheet.create({
         paddingHorizontal: 7,
         paddingVertical: 2,
         borderRadius: 5,
-        backgroundColor: '#CB383714',
+        backgroundColor: AppColors.npmRedTint,
         borderWidth: 1,
-        borderColor: '#CB383733',
+        borderColor: AppColors.npmRedBorder,
     },
     npmLinkText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9.5,
-        color: '#CB3837',
+        color: AppColors.npmRed,
     },
     deprecatedBadge: {
         paddingHorizontal: 6,
         paddingVertical: 1.5,
         borderRadius: 4,
-        backgroundColor: '#FEE2E2',
+        backgroundColor: AppColors.red100,
         borderWidth: 1,
-        borderColor: '#FECACA',
+        borderColor: AppColors.errorBorder,
     },
     deprecatedBadgeText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9,
-        color: '#DC2626',
+        color: AppColors.red600,
         letterSpacing: 0.3,
     },
     updateBadge: {
         paddingHorizontal: 6,
         paddingVertical: 1.5,
         borderRadius: 4,
-        backgroundColor: '#DCFCE7',
+        backgroundColor: AppColors.green100,
         borderWidth: 1,
-        borderColor: '#BBF7D0',
+        borderColor: AppColors.greenBorder,
     },
     updateBadgeText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9,
-        color: '#047857',
+        color: AppColors.emerald700,
     },
     lastActiveText: {
         fontFamily: AppFonts.interRegular,
@@ -2216,45 +2138,45 @@ const bundleStyles = StyleSheet.create({
         color: AppColors.grayTextWeak,
     },
     deprecationBox: {
-        backgroundColor: '#FFF1F2',
+        backgroundColor: AppColors.errorCardBg,
         borderRadius: 6,
         paddingHorizontal: 8,
         paddingVertical: 5,
         borderWidth: 1,
-        borderColor: '#FECDD3',
+        borderColor: AppColors.errorBorder,
         marginTop: 3,
     },
     deprecationText: {
         fontFamily: AppFonts.interMedium,
         fontSize: 10.5,
-        color: '#BE123C',
+        color: AppColors.rose700,
         lineHeight: 14,
     },
     unusedBadge: {
         paddingHorizontal: 6,
         paddingVertical: 1.5,
         borderRadius: 4,
-        backgroundColor: '#FEE2E2',
+        backgroundColor: AppColors.red100,
         borderWidth: 1,
-        borderColor: '#FECACA',
+        borderColor: AppColors.errorBorder,
     },
     unusedBadgeText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9.5,
-        color: '#DC2626',
+        color: AppColors.red600,
     },
     consumedBadge: {
         paddingHorizontal: 6,
         paddingVertical: 1.5,
         borderRadius: 4,
-        backgroundColor: '#DCFCE7',
+        backgroundColor: AppColors.green100,
         borderWidth: 1,
-        borderColor: '#BBF7D0',
+        borderColor: AppColors.greenBorder,
     },
     consumedBadgeText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9.5,
-        color: '#059669',
+        color: AppColors.emerald600,
     },
     treeFolderChevronWrap: {
         width: 18,
@@ -2265,13 +2187,13 @@ const bundleStyles = StyleSheet.create({
         justifyContent: 'center',
     },
     treeFileCardUnused: {
-        borderColor: '#FECACA',
-        backgroundColor: '#FFFBFB',
+        borderColor: AppColors.errorBorder,
+        backgroundColor: AppColors.red50,
     },
     adviceUnused: {
-        backgroundColor: '#FEF2F2',
+        backgroundColor: AppColors.errorCardBg,
         borderWidth: 1,
-        borderColor: '#FECACA',
+        borderColor: AppColors.errorBorder,
     },
     adviceBadge: {
         paddingHorizontal: 8,
@@ -2280,14 +2202,14 @@ const bundleStyles = StyleSheet.create({
         marginTop: 2,
     },
     adviceWarning: {
-        backgroundColor: '#FEF3C7',
+        backgroundColor: AppColors.amber100,
         borderWidth: 1,
-        borderColor: '#FDE68A',
+        borderColor: AppColors.amber200,
     },
     adviceOptimal: {
-        backgroundColor: '#DCFCE7',
+        backgroundColor: AppColors.green100,
         borderWidth: 1,
-        borderColor: '#BBF7D0',
+        borderColor: AppColors.greenBorder,
     },
     adviceText: {
         fontFamily: AppFonts.interMedium,
@@ -2305,21 +2227,21 @@ const bundleStyles = StyleSheet.create({
         fontSize: 9,
     },
     searchHighlight: {
-        backgroundColor: '#FEF08A',
-        color: '#854D0E',
+        backgroundColor: AppColors.yellow200,
+        color: AppColors.yellow800,
         fontFamily: AppFonts.interBold,
     },
     tipsCard: {
-        backgroundColor: '#FAF5FF',
+        backgroundColor: AppColors.purple50,
         borderRadius: 14,
         padding: 14,
         borderWidth: 1,
-        borderColor: '#E9D5FF',
+        borderColor: AppColors.purple200,
     },
     tipsHeading: {
         fontFamily: AppFonts.interBold,
         fontSize: 13.5,
-        color: '#6B21A8',
+        color: AppColors.purple800,
     },
     totalSummaryCard: {
         marginTop: 10,
@@ -2383,17 +2305,17 @@ const bundleStyles = StyleSheet.create({
         padding: 10,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#E9D5FF',
+        borderColor: AppColors.purple200,
     },
     tipTitle: {
         fontFamily: AppFonts.interBold,
         fontSize: 12,
-        color: '#581C87',
+        color: AppColors.purple900,
     },
     tipDesc: {
         fontFamily: AppFonts.interRegular,
         fontSize: 11,
-        color: '#6B7280',
+        color: AppColors.gray500,
         lineHeight: 16,
         marginTop: 4,
     },