react-native-inapp-inspector 2.0.0 → 2.0.2

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

@@ -74,7 +74,11 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     if (lowerName.includes('screens') || lowerName.includes('software-mansion')) {
         return (<View style={[
                 bundleStyles.pkgLogoWrap,
-                { width: size, height: size, backgroundColor: AppColors.reanimatedNavy },
+                {
+                    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={AppColors.sky400}/>
@@ -126,7 +130,12 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
     </View>);
 };
 const BundleCategoryIcon = ({ type, size = 16, color = AppColors.purple }) => {
-    const stroke = { stroke: color, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
+    const stroke = {
+        stroke: color,
+        strokeWidth: 1.7,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+    };
     const renderGlyph = () => {
         switch (type) {
             case 'folder':
@@ -337,7 +346,9 @@ export const downloadBundleFile = async (file, scriptURL) => {
 // Path: ${file.path}
 // Category: ${file.category.toUpperCase()}
 // Size: ${file.sizeKb} KB
-// Status: ${file.status === 'optimal' ? 'Active in Dependency Graph' : 'Not consumed / Static'}
+// Status: ${file.status === 'optimal'
+            ? 'Active in Dependency Graph'
+            : 'Not consumed / Static'}
 // Meta: ${file.meta}
 // ─────────────────────────────────────────────────────────────
 
@@ -379,10 +390,9 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
     const indentLeft = level * 16 + 10;
     if (node.isFolder) {
         return (<View style={bundleStyles.treeFolderBlock}>
-        <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Folder ${node.name}, ${node.fileCount} ${node.fileCount === 1 ? 'file' : 'files'}, ${node.sizeKb >= 1024 ? `${(node.sizeKb / 1024).toFixed(2)} MB` : `${node.sizeKb} KB`}`} accessibilityState={{ expanded: isExpanded }} accessibilityHint="Double tap to expand or collapse folder" onPress={() => toggleFolder(node.fullPath)} style={[
-                bundleStyles.treeFolderRow,
-                { paddingLeft: indentLeft },
-            ]}>
+        <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Folder ${node.name}, ${node.fileCount} ${node.fileCount === 1 ? 'file' : 'files'}, ${node.sizeKb >= 1024
+                ? `${(node.sizeKb / 1024).toFixed(2)} MB`
+                : `${node.sizeKb} KB`}`} accessibilityState={{ expanded: isExpanded }} accessibilityHint="Double tap to expand or collapse folder" onPress={() => toggleFolder(node.fullPath)} style={[bundleStyles.treeFolderRow, { paddingLeft: indentLeft }]}>
           <View style={bundleStyles.treeRowLeft}>
             <Text style={bundleStyles.treeChevron}>
               {isCollapsed ? '▸' : '▾'}
@@ -391,7 +401,8 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
             <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 ? t('bundle.file') : t('bundle.files')}
+                {node.fileCount}{' '}
+                {node.fileCount === 1 ? t('bundle.file') : t('bundle.files')}
               </Text>
             </View>
           </View>
@@ -399,7 +410,9 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
           <View style={bundleStyles.treeRowRight}>
             <Text style={bundleStyles.treeFolderSize}>
               {node.sizeKb >= 1024
-                ? t('bundle.fileSizeMb', { size: (node.sizeKb / 1024).toFixed(2) })
+                ? t('bundle.fileSizeMb', {
+                    size: (node.sizeKb / 1024).toFixed(2),
+                })
                 : t('bundle.fileSizeKb', { size: node.sizeKb })}
             </Text>
             <CopyButton value={() => ({
@@ -438,13 +451,18 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
         <HighlightText text={file.name} search={search} style={bundleStyles.treeFileName} highlightStyle={bundleStyles.searchHighlight}/>
 
         {isUnused && (<View style={bundleStyles.treeUnusedPill}>
-            <Text style={bundleStyles.treeUnusedPillText}>{t('bundle.notConsumed')}</Text>
+            <Text style={bundleStyles.treeUnusedPillText}>
+              {t('bundle.notConsumed')}
+            </Text>
           </View>)}
       </View>
 
       <View style={bundleStyles.treeRowRight}>
         <View style={bundleStyles.treeFileSizeGroup}>
-          <Text style={[bundleStyles.treeFileSizeText, isUnused && { color: AppColors.red600 }]}>
+          <Text style={[
+            bundleStyles.treeFileSizeText,
+            isUnused && { color: AppColors.red600 },
+        ]}>
             {file.sizeKb >= 1024
             ? t('bundle.fileSizeMb', { size: (file.sizeKb / 1024).toFixed(2) })
             : t('bundle.fileSizeKb', { size: file.sizeKb })}
@@ -467,17 +485,41 @@ const CATEGORY_TABS = [
     { 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: '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: AppColors.pink500, bg: AppColors.pink100 },
-    typescript: { label: 'TypeScript', color: AppColors.sky500, bg: AppColors.sky100 },
-    javascript: { label: 'JavaScript', color: AppColors.indigo500, bg: AppColors.indigo50 },
+    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 },
+    json: {
+        label: 'JSON / Data',
+        color: AppColors.emerald500,
+        bg: AppColors.emerald100,
+    },
 };
 const BundleTab = React.memo(() => {
     const { t } = useTranslation();
@@ -524,8 +566,13 @@ const BundleTab = React.memo(() => {
     const bundlePackages = useMemo(() => (analysis ? analysis.packages : []), [analysis]);
     // Comprehensive bundle summary (full Metro bundle calculation e.g. 6.0 MB)
     const summary = useMemo(() => {
-        const totalKb = analysis?.totalDevKb || (analysis?.totalDevBytes ? Math.round(analysis.totalDevBytes / 1024) : 6144);
-        const totalMb = analysis?.totalDevMb ? analysis.totalDevMb.toFixed(2) : (totalKb / 1024).toFixed(2);
+        const totalKb = analysis?.totalDevKb ||
+            (analysis?.totalDevBytes
+                ? Math.round(analysis.totalDevBytes / 1024)
+                : 6144);
+        const totalMb = analysis?.totalDevMb
+            ? analysis.totalDevMb.toFixed(2)
+            : (totalKb / 1024).toFixed(2);
         const nodeModulesKb = analysis?.splitUp?.nodeModules?.kb || Math.round(totalKb * 0.52);
         const nodeModulesPct = analysis?.splitUp?.nodeModules?.pct || 52.0;
         const metroKb = analysis?.splitUp?.metroDevOverhead?.kb || Math.round(totalKb * 0.21);
@@ -576,7 +623,9 @@ const BundleTab = React.memo(() => {
                 iconType: 'image',
                 title: 'Images & Static Media',
                 targetTab: 'media',
-                count: bundleFiles.filter(f => f.category === 'image' || f.category === 'font' || f.category === 'json').length || 3,
+                count: bundleFiles.filter(f => f.category === 'image' ||
+                    f.category === 'font' ||
+                    f.category === 'json').length || 3,
                 sizeKb: assetsMediaKb,
                 sizeMb: (assetsMediaKb / 1024).toFixed(2),
                 pct: assetsMediaPct,
@@ -760,7 +809,7 @@ const BundleTab = React.memo(() => {
               </TouchableScale>);
         })}
         </ScrollView>
-        <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={isAnalyzing ? "Analyzing Metro bundle" : "Reload bundle analysis"} accessibilityHint="Re-probes Metro dev server and refreshes bundle statistics" onPress={refreshAnalysis} style={bundleStyles.reloadButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+        <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={isAnalyzing ? 'Analyzing Metro bundle' : 'Reload bundle analysis'} accessibilityHint="Re-probes Metro dev server and refreshes bundle statistics" onPress={refreshAnalysis} style={bundleStyles.reloadButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
           {isAnalyzing ? (<ActivityIndicator size="small" color={AppColors.brandPurple}/>) : (<RefreshCcwIcon color={AppColors.brandPurple} size={14}/>)}
         </TouchableScale>
       </View>
@@ -769,7 +818,6 @@ const BundleTab = React.memo(() => {
       {/* ── 1. TAB: OVERVIEW & TREEMAP ───────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {activeSubTab === 'overview' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-          
           {/* Hero Overview Card */}
           <View style={bundleStyles.heroCard}>
             <View style={bundleStyles.heroTopRow}>
@@ -777,7 +825,9 @@ const BundleTab = React.memo(() => {
                 <PackageIcon color={AppColors.brandPurple} size={24}/>
               </View>
               <View style={{ flex: 1 }}>
-                <Text style={bundleStyles.heroTitle}>{t('bundle.heroTitle')}</Text>
+                <Text style={bundleStyles.heroTitle}>
+                  {t('bundle.heroTitle')}
+                </Text>
                 {analysis?.isLive && analysis.scriptURL ? (<View style={{ marginTop: 4, gap: 4 }}>
                     <Text style={bundleStyles.heroSubtitle}>
                       {t('bundle.heroSubtitle')}
@@ -796,7 +846,11 @@ const BundleTab = React.memo(() => {
                     justifyContent: 'space-between',
                     marginBottom: 3,
                 }}>
-                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                        <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                }}>
                           <ExternalLinkIcon color={AppColors.skyBlue} size={11}/>
                           <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -836,7 +890,9 @@ const BundleTab = React.memo(() => {
             {/* 4-Stat Metric Grid */}
             <View style={bundleStyles.metricsGrid}>
               <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>{t('bundle.devBundleSize')}</Text>
+                <Text style={bundleStyles.metricLabel}>
+                  {t('bundle.devBundleSize')}
+                </Text>
                 <Text style={bundleStyles.metricValue}>
                   {t('bundle.mbValue', {
                 size: analysis ? analysis.totalDevMb : summary.totalMb,
@@ -853,8 +909,13 @@ const BundleTab = React.memo(() => {
               </View>
 
               <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>{t('bundle.imagesMedia')}</Text>
-                <Text style={[bundleStyles.metricValue, { color: AppColors.pink500 }]}>
+                <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}>
@@ -863,9 +924,13 @@ const BundleTab = React.memo(() => {
               </View>
 
               <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>{t('bundle.tsJsSource')}</Text>
+                <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 })}
+                  {t('bundle.fileSizeKb', {
+                size: summary.ts.kb + summary.js.kb,
+            })}
                 </Text>
                 <Text style={bundleStyles.metricHint}>
                   {t('bundle.pctOfTrackedAssets', {
@@ -875,11 +940,22 @@ const BundleTab = React.memo(() => {
               </View>
 
               <View style={bundleStyles.metricBox}>
-                <Text style={bundleStyles.metricLabel}>{t('bundle.jsEngine')}</Text>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 2 }}>
+                <Text style={bundleStyles.metricLabel}>
+                  {t('bundle.jsEngine')}
+                </Text>
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+                marginTop: 2,
+            }}>
                   <View style={[
                 bundleStyles.statusIndicator,
-                { backgroundColor: isHermes ? AppColors.greenColor : AppColors.darkOrange },
+                {
+                    backgroundColor: isHermes
+                        ? AppColors.greenColor
+                        : AppColors.darkOrange,
+                },
             ]}/>
                   <Text style={bundleStyles.metricValue}>
                     {isHermes ? 'Hermes' : 'JSC'}
@@ -894,7 +970,12 @@ const BundleTab = React.memo(() => {
 
           {/* Live analysis unavailable warning */}
           {analysis && !analysis.isLive && (<View style={bundleStyles.liveWarningCard}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1 }}>
+              <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                    flex: 1,
+                }}>
                 <CircleAlertIcon color={AppColors.amber700} size={16}/>
                 <View style={{ flex: 1 }}>
                   <Text style={bundleStyles.liveWarningTitle}>
@@ -907,13 +988,13 @@ const BundleTab = React.memo(() => {
               </View>
             </View>)}
 
-
-
           {/* Visual Type Distribution Ratio Bar */}
           <View style={bundleStyles.sectionCard}>
             <View style={bundleStyles.sectionHeaderRow}>
-              <View>
-                <Text style={bundleStyles.sectionTitle}>{t('bundle.treemapTitle')}</Text>
+              <View style={{ flex: 1, paddingRight: 4 }}>
+                <Text style={bundleStyles.sectionTitle}>
+                  {t('bundle.treemapTitle')}
+                </Text>
                 <Text style={bundleStyles.sectionSub}>
                   {t('bundle.treemapSub', { mb: summary.totalMb })}
                 </Text>
@@ -921,19 +1002,44 @@ const BundleTab = React.memo(() => {
               <CopyButton value={() => ({
                 totalMb: summary.totalMb,
                 totalKb: summary.totalKb,
-                nodeModules: { kb: summary.nodeModulesKb, pct: summary.nodeModulesPct },
+                nodeModules: {
+                    kb: summary.nodeModulesKb,
+                    pct: summary.nodeModulesPct,
+                },
                 metroRuntime: { kb: summary.metroKb, pct: summary.metroPct },
-                appSource: { kb: summary.appSourceKb, pct: summary.appSourcePct },
-                assetsMedia: { kb: summary.assetsMediaKb, pct: summary.assetsMediaPct },
+                appSource: {
+                    kb: summary.appSourceKb,
+                    pct: summary.appSourcePct,
+                },
+                assetsMedia: {
+                    kb: summary.assetsMediaKb,
+                    pct: summary.assetsMediaPct,
+                },
             })} label={t('bundle.treemapJson')}/>
             </View>
 
             {/* Stacked Colored Bar for Full 6.0 MB Bundle */}
             <View style={bundleStyles.treemapBar}>
-              <View style={{ flex: summary.nodeModulesPct, backgroundColor: AppColors.indigo500, height: 16 }}/>
-              <View style={{ flex: summary.metroPct, backgroundColor: AppColors.amber500, height: 16 }}/>
-              <View style={{ flex: summary.appSourcePct, backgroundColor: AppColors.sky500, height: 16 }}/>
-              <View style={{ flex: summary.assetsMediaPct, backgroundColor: AppColors.pink500, height: 16 }}/>
+              <View style={{
+                flex: summary.nodeModulesPct,
+                backgroundColor: AppColors.indigo500,
+                height: 16,
+            }}/>
+              <View style={{
+                flex: summary.metroPct,
+                backgroundColor: AppColors.amber500,
+                height: 16,
+            }}/>
+              <View style={{
+                flex: summary.appSourcePct,
+                backgroundColor: AppColors.sky500,
+                height: 16,
+            }}/>
+              <View style={{
+                flex: summary.assetsMediaPct,
+                backgroundColor: AppColors.pink500,
+                height: 16,
+            }}/>
             </View>
 
             {/* Legend Grid */}
@@ -945,7 +1051,8 @@ const BundleTab = React.memo(() => {
                   <Text style={bundleStyles.legendVal}>
                     {summary.nodeModulesKb >= 1024
                 ? `${(summary.nodeModulesKb / 1024).toFixed(1)} MB`
-                : `${summary.nodeModulesKb} KB`} ({summary.nodeModulesPct}%)
+                : `${summary.nodeModulesKb} KB`}{' '}
+                    ({summary.nodeModulesPct}%)
                   </Text>
                 </Text>
               </View>
@@ -956,7 +1063,8 @@ const BundleTab = React.memo(() => {
                   <Text style={bundleStyles.legendVal}>
                     {summary.metroKb >= 1024
                 ? `${(summary.metroKb / 1024).toFixed(1)} MB`
-                : `${summary.metroKb} KB`} ({summary.metroPct}%)
+                : `${summary.metroKb} KB`}{' '}
+                    ({summary.metroPct}%)
                   </Text>
                 </Text>
               </View>
@@ -967,7 +1075,8 @@ const BundleTab = React.memo(() => {
                   <Text style={bundleStyles.legendVal}>
                     {summary.appSourceKb >= 1024
                 ? `${(summary.appSourceKb / 1024).toFixed(1)} MB`
-                : `${summary.appSourceKb} KB`} ({summary.appSourcePct}%)
+                : `${summary.appSourceKb} KB`}{' '}
+                    ({summary.appSourcePct}%)
                   </Text>
                 </Text>
               </View>
@@ -978,7 +1087,8 @@ const BundleTab = React.memo(() => {
                   <Text style={bundleStyles.legendVal}>
                     {summary.assetsMediaKb >= 1024
                 ? `${(summary.assetsMediaKb / 1024).toFixed(1)} MB`
-                : `${summary.assetsMediaKb} KB`} ({summary.assetsMediaPct}%)
+                : `${summary.assetsMediaKb} KB`}{' '}
+                    ({summary.assetsMediaPct}%)
                   </Text>
                 </Text>
               </View>
@@ -988,10 +1098,12 @@ const BundleTab = React.memo(() => {
           {/* Detailed Category Footprint Cards */}
           <View style={bundleStyles.sectionCard}>
             <View style={bundleStyles.sectionHeaderRow}>
-              <Text style={bundleStyles.sectionTitle}>{t('bundle.categoryBreakdown')}</Text>
+              <Text style={bundleStyles.sectionTitle}>
+                {t('bundle.categoryBreakdown')}
+              </Text>
               <CopyButton value={() => summary} label={t('bundle.categoriesJson')}/>
             </View>
-            
+
             {summary.categories.map((cat, cIdx) => (<Pressable key={cIdx} accessible={true} accessibilityRole="button" accessibilityLabel={`${cat.title}, ${cat.sizeKb >= 1024 ? `${cat.sizeMb} MB` : `${cat.sizeKb} KB`}, ${cat.pct}% of bundle`} accessibilityHint={`Double tap to view ${cat.title} details`} style={({ pressed }) => [
                     bundleStyles.catRowCard,
                     pressed && { opacity: 0.85, transform: [{ scale: 0.99 }] },
@@ -999,25 +1111,42 @@ const BundleTab = React.memo(() => {
                 <View style={bundleStyles.catRowTop}>
                   <View style={[
                     bundleStyles.catIconBox,
-                    { backgroundColor: `${cat.color}15`, borderColor: `${cat.color}30` },
+                    {
+                        backgroundColor: `${cat.color}15`,
+                        borderColor: `${cat.color}30`,
+                    },
                 ]}>
                     <BundleCategoryIcon type={cat.iconType} size={18} color={cat.color}/>
                   </View>
 
                   <View style={bundleStyles.catRowTitleWrap}>
-                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
+                    <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 6,
+                }}>
                       <Text style={bundleStyles.catRowTitle} numberOfLines={1}>
                         {cat.title}
                       </Text>
-                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
                         <Text style={bundleStyles.catRowSize}>
-                          {cat.sizeKb >= 1024 ? `${cat.sizeMb} MB` : `${cat.sizeKb} KB`}
+                          {cat.sizeKb >= 1024
+                    ? `${cat.sizeMb} MB`
+                    : `${cat.sizeKb} KB`}
                         </Text>
                         <View style={[
                     bundleStyles.catPctPill,
                     { backgroundColor: `${cat.color}18` },
                 ]}>
-                          <Text style={[bundleStyles.catPctText, { color: cat.color }]}>
+                          <Text style={[
+                    bundleStyles.catPctText,
+                    { color: cat.color },
+                ]}>
                             {cat.pct}%
                           </Text>
                         </View>
@@ -1068,20 +1197,43 @@ const BundleTab = React.memo(() => {
               {/* 4-Pill Chip Breakdown */}
               <View style={bundleStyles.totalFormulaGrid}>
                 <View style={bundleStyles.totalChip}>
-                  <View style={[bundleStyles.totalDot, { backgroundColor: AppColors.indigo500 }]}/>
-                  <Text style={bundleStyles.totalChipText}>NPM: {(summary.nodeModulesKb / 1024).toFixed(1)}M ({summary.nodeModulesPct}%)</Text>
+                  <View style={[
+                bundleStyles.totalDot,
+                { backgroundColor: AppColors.indigo500 },
+            ]}/>
+                  <Text style={bundleStyles.totalChipText}>
+                    NPM: {(summary.nodeModulesKb / 1024).toFixed(1)}M (
+                    {summary.nodeModulesPct}%)
+                  </Text>
                 </View>
                 <View style={bundleStyles.totalChip}>
-                  <View style={[bundleStyles.totalDot, { backgroundColor: AppColors.amber500 }]}/>
-                  <Text style={bundleStyles.totalChipText}>Metro: {(summary.metroKb / 1024).toFixed(1)}M ({summary.metroPct}%)</Text>
+                  <View style={[
+                bundleStyles.totalDot,
+                { backgroundColor: AppColors.amber500 },
+            ]}/>
+                  <Text style={bundleStyles.totalChipText}>
+                    Metro: {(summary.metroKb / 1024).toFixed(1)}M (
+                    {summary.metroPct}%)
+                  </Text>
                 </View>
                 <View style={bundleStyles.totalChip}>
-                  <View style={[bundleStyles.totalDot, { backgroundColor: AppColors.sky500 }]}/>
-                  <Text style={bundleStyles.totalChipText}>Source: {(summary.appSourceKb / 1024).toFixed(1)}M ({summary.appSourcePct}%)</Text>
+                  <View style={[
+                bundleStyles.totalDot,
+                { backgroundColor: AppColors.sky500 },
+            ]}/>
+                  <Text style={bundleStyles.totalChipText}>
+                    Source: {(summary.appSourceKb / 1024).toFixed(1)}M (
+                    {summary.appSourcePct}%)
+                  </Text>
                 </View>
                 <View style={bundleStyles.totalChip}>
-                  <View style={[bundleStyles.totalDot, { backgroundColor: AppColors.pink500 }]}/>
-                  <Text style={bundleStyles.totalChipText}>Media: {summary.assetsMediaKb}K ({summary.assetsMediaPct}%)</Text>
+                  <View style={[
+                bundleStyles.totalDot,
+                { backgroundColor: AppColors.pink500 },
+            ]}/>
+                  <Text style={bundleStyles.totalChipText}>
+                    Media: {summary.assetsMediaKb}K ({summary.assetsMediaPct}%)
+                  </Text>
                 </View>
               </View>
             </View>
@@ -1090,10 +1242,13 @@ const BundleTab = React.memo(() => {
           {/* Detailed Subsystem Architecture Split-up */}
           <View style={bundleStyles.sectionCard}>
             <View style={bundleStyles.sectionHeaderRow}>
-              <View>
-                <Text style={bundleStyles.sectionTitle}>Bundle Subsystem Breakdown</Text>
+              <View style={{ flex: 1, paddingRight: 4 }}>
+                <Text style={bundleStyles.sectionTitle}>
+                  Bundle Subsystem Breakdown
+                </Text>
                 <Text style={bundleStyles.sectionSub}>
-                  Granular analysis of packages, application source, engine runtime & assets
+                  Granular analysis of packages, application source, engine
+                  runtime & assets
                 </Text>
               </View>
               <CopyButton value={() => ({
@@ -1102,8 +1257,11 @@ const BundleTab = React.memo(() => {
                 hermesEngine: isHermes ? 'Hermes (Bytecode)' : 'JSC (Source)',
                 jsDevKb: summary.totalKb,
                 jsHermesReleaseKb: Math.round(summary.totalKb * 0.38),
-                appSourceFiles: bundleFiles.filter(f => f.category === 'typescript' || f.category === 'javascript').length,
-                mediaAssets: bundleFiles.filter(f => f.category === 'image' || f.category === 'font' || f.category === 'json').length,
+                appSourceFiles: bundleFiles.filter(f => f.category === 'typescript' ||
+                    f.category === 'javascript').length,
+                mediaAssets: bundleFiles.filter(f => f.category === 'image' ||
+                    f.category === 'font' ||
+                    f.category === 'json').length,
             })} label="Subsystem Split JSON"/>
             </View>
 
@@ -1112,28 +1270,51 @@ const BundleTab = React.memo(() => {
               <View style={bundleStyles.subsystemHeader}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <BundleCategoryIcon type="deps" size={16} color={AppColors.indigo500}/>
-                  <Text style={bundleStyles.subsystemTitle}>NPM & Third-Party Dependencies</Text>
+                  <Text style={bundleStyles.subsystemTitle}>
+                    NPM & Third-Party Dependencies
+                  </Text>
                 </View>
-                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.indigo500}18` }]}>
-                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.indigo500 }]}>
-                    {(summary.nodeModulesKb / 1024).toFixed(1)} MB • {summary.nodeModulesPct}%
+                <View style={[
+                bundleStyles.subsystemBadge,
+                { backgroundColor: `${AppColors.indigo500}18` },
+            ]}>
+                  <Text style={[
+                bundleStyles.subsystemBadgeText,
+                { color: AppColors.indigo500 },
+            ]}>
+                    {(summary.nodeModulesKb / 1024).toFixed(1)} MB •{' '}
+                    {summary.nodeModulesPct}%
                   </Text>
                 </View>
               </View>
               <View style={bundleStyles.subsystemGrid}>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Direct: <Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type === 'direct').length || 12} pkgs</Text>
+                    Direct:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundlePackages.filter(p => p.type === 'direct').length ||
+                12}{' '}
+                      pkgs
+                    </Text>
                   </Text>
                 </View>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Transitive: <Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type !== 'direct').length || 41} pkgs</Text>
+                    Transitive:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundlePackages.filter(p => p.type !== 'direct').length ||
+                41}{' '}
+                      pkgs
+                    </Text>
                   </Text>
                 </View>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Top Package: <Text style={bundleStyles.subsystemItemVal}>{bundlePackages[0]?.name || 'react-native'} ({bundlePackages[0]?.sizeKb || 1240} KB)</Text>
+                    Top Package:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundlePackages[0]?.name || 'react-native'} (
+                      {bundlePackages[0]?.sizeKb || 1240} KB)
+                    </Text>
                   </Text>
                 </View>
               </View>
@@ -1144,28 +1325,50 @@ const BundleTab = React.memo(() => {
               <View style={bundleStyles.subsystemHeader}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <BundleCategoryIcon type="source" size={16} color={AppColors.sky500}/>
-                  <Text style={bundleStyles.subsystemTitle}>Application Source Code</Text>
+                  <Text style={bundleStyles.subsystemTitle}>
+                    Application Source Code
+                  </Text>
                 </View>
-                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.sky500}18` }]}>
-                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.sky500 }]}>
-                    {(summary.appSourceKb / 1024).toFixed(1)} MB • {summary.appSourcePct}%
+                <View style={[
+                bundleStyles.subsystemBadge,
+                { backgroundColor: `${AppColors.sky500}18` },
+            ]}>
+                  <Text style={[
+                bundleStyles.subsystemBadgeText,
+                { color: AppColors.sky500 },
+            ]}>
+                    {(summary.appSourceKb / 1024).toFixed(1)} MB •{' '}
+                    {summary.appSourcePct}%
                   </Text>
                 </View>
               </View>
               <View style={bundleStyles.subsystemGrid}>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    TypeScript/TSX: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'typescript').length || 14} files</Text>
+                    TypeScript/TSX:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'typescript')
+                .length || 14}{' '}
+                      files
+                    </Text>
                   </Text>
                 </View>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    JavaScript/JSX: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'javascript').length || 3} files</Text>
+                    JavaScript/JSX:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'javascript')
+                .length || 3}{' '}
+                      files
+                    </Text>
                   </Text>
                 </View>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Tracked Modules: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.length || 18} files</Text>
+                    Tracked Modules:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.length || 18} files
+                    </Text>
                   </Text>
                 </View>
               </View>
@@ -1176,10 +1379,18 @@ const BundleTab = React.memo(() => {
               <View style={bundleStyles.subsystemHeader}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <BundleCategoryIcon type="bolt" size={16} color={AppColors.emerald600}/>
-                  <Text style={bundleStyles.subsystemTitle}>Hermes Bytecode Engine</Text>
+                  <Text style={bundleStyles.subsystemTitle}>
+                    Hermes Bytecode Engine
+                  </Text>
                 </View>
-                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.emerald500}18` }]}>
-                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.emerald700 }]}>
+                <View style={[
+                bundleStyles.subsystemBadge,
+                { backgroundColor: `${AppColors.emerald500}18` },
+            ]}>
+                  <Text style={[
+                bundleStyles.subsystemBadgeText,
+                { color: AppColors.emerald700 },
+            ]}>
                     ~62% AOT Compression
                   </Text>
                 </View>
@@ -1187,17 +1398,26 @@ const BundleTab = React.memo(() => {
               <View style={bundleStyles.subsystemGrid}>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Dev JS Size: <Text style={bundleStyles.subsystemItemVal}>{summary.totalMb} MB</Text>
+                    Dev JS Size:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {summary.totalMb} MB
+                    </Text>
                   </Text>
                 </View>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Hermes Bytecode: <Text style={bundleStyles.subsystemItemVal}>{((summary.totalKb * 0.38) / 1024).toFixed(2)} MB</Text>
+                    Hermes Bytecode:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {((summary.totalKb * 0.38) / 1024).toFixed(2)} MB
+                    </Text>
                   </Text>
                 </View>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Execution: <Text style={bundleStyles.subsystemItemVal}>{isHermes ? 'Hermes JSI Direct' : 'JSC Standard'}</Text>
+                    Execution:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {isHermes ? 'Hermes JSI Direct' : 'JSC Standard'}
+                    </Text>
                   </Text>
                 </View>
               </View>
@@ -1208,10 +1428,18 @@ const BundleTab = React.memo(() => {
               <View style={bundleStyles.subsystemHeader}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <BundleCategoryIcon type="media" size={16} color={AppColors.pink500}/>
-                  <Text style={bundleStyles.subsystemTitle}>Images, Fonts & Static Assets</Text>
+                  <Text style={bundleStyles.subsystemTitle}>
+                    Images, Fonts & Static Assets
+                  </Text>
                 </View>
-                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.pink500}18` }]}>
-                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.pink500 }]}>
+                <View style={[
+                bundleStyles.subsystemBadge,
+                { backgroundColor: `${AppColors.pink500}18` },
+            ]}>
+                  <Text style={[
+                bundleStyles.subsystemBadgeText,
+                { color: AppColors.pink500 },
+            ]}>
                     {summary.assetsMediaKb} KB • {summary.assetsMediaPct}%
                   </Text>
                 </View>
@@ -1219,17 +1447,32 @@ const BundleTab = React.memo(() => {
               <View style={bundleStyles.subsystemGrid}>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Images & Icons: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'image').length || 2} assets</Text>
+                    Images & Icons:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'image').length ||
+                2}{' '}
+                      assets
+                    </Text>
                   </Text>
                 </View>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    JSON Data: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'json').length || 1} files</Text>
+                    JSON Data:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'json').length ||
+                1}{' '}
+                      files
+                    </Text>
                   </Text>
                 </View>
                 <View style={bundleStyles.subsystemItem}>
                   <Text style={bundleStyles.subsystemItemText}>
-                    Custom Fonts: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'font').length || 0} fonts</Text>
+                    Custom Fonts:{' '}
+                    <Text style={bundleStyles.subsystemItemVal}>
+                      {bundleFiles.filter(f => f.category === 'font').length ||
+                0}{' '}
+                      fonts
+                    </Text>
                   </Text>
                 </View>
               </View>
@@ -1241,13 +1484,24 @@ const BundleTab = React.memo(() => {
       {/* ── 2. TAB: PRODUCTION BUILDS & PLATFORMS ───────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {activeSubTab === 'production' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-          
           {/* Platform Segmented Switcher (Horizontally Scrollable) */}
           <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.prodPlatformScroll}>
             {[
-                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.totalDownloadMb || 111.9} MB` },
-                { key: 'androidAab', label: 'Android AAB (.aab)', badge: `${analysis?.production.androidAab.totalDownloadMb || 38.5} MB` },
-                { key: 'androidApk', label: 'Universal APK (.apk)', badge: `${analysis?.production.androidApk.totalInstallMb || 364.0} MB` },
+                {
+                    key: 'ios',
+                    label: 'iOS App (.ipa)',
+                    badge: `${analysis?.production.ios.totalDownloadMb || 111.9} MB`,
+                },
+                {
+                    key: 'androidAab',
+                    label: 'Android AAB (.aab)',
+                    badge: `${analysis?.production.androidAab.totalDownloadMb || 38.5} MB`,
+                },
+                {
+                    key: 'androidApk',
+                    label: 'Universal APK (.apk)',
+                    badge: `${analysis?.production.androidApk.totalInstallMb || 364.0} MB`,
+                },
             ].map(tab => {
                 const isSelected = prodPlatform === tab.key;
                 return (<TouchableScale key={tab.key} accessible={true} accessibilityRole="tab" accessibilityLabel={`${tab.label}, ${tab.badge}`} accessibilityState={{ selected: isSelected }} accessibilityHint={`Switches production estimate to ${tab.label}`} onPress={() => setProdPlatform(tab.key)} style={[
@@ -1304,31 +1558,51 @@ const BundleTab = React.memo(() => {
               <View style={bundleStyles.metricsGrid}>
                 <View style={bundleStyles.metricBox}>
                   <Text style={bundleStyles.metricLabel}>INSTALL SIZE</Text>
-                  <Text style={[bundleStyles.metricValue, { color: AppColors.purple }]}>
+                  <Text style={[
+                    bundleStyles.metricValue,
+                    { color: AppColors.purple },
+                ]}>
                     {analysis.production[prodPlatform].totalInstallMb} MB
                   </Text>
-                  <Text style={bundleStyles.metricHint}>On-device uncompressed footprint</Text>
+                  <Text style={bundleStyles.metricHint}>
+                    On-device uncompressed footprint
+                  </Text>
                 </View>
 
                 <View style={bundleStyles.metricBox}>
                   <Text style={bundleStyles.metricLabel}>DOWNLOAD SIZE</Text>
-                  <Text style={[bundleStyles.metricValue, { color: AppColors.emerald600 }]}>
+                  <Text style={[
+                    bundleStyles.metricValue,
+                    { color: AppColors.emerald600 },
+                ]}>
                     ~{analysis.production[prodPlatform].totalDownloadMb} MB
                   </Text>
-                  <Text style={bundleStyles.metricHint}>Store network transfer payload</Text>
+                  <Text style={bundleStyles.metricHint}>
+                    Store network transfer payload
+                  </Text>
                 </View>
 
                 <View style={bundleStyles.metricBox}>
                   <Text style={bundleStyles.metricLabel}>COMPRESSION</Text>
-                  <Text style={[bundleStyles.metricValue, { color: AppColors.sky500 }]}>
+                  <Text style={[
+                    bundleStyles.metricValue,
+                    { color: AppColors.sky500 },
+                ]}>
                     {analysis.production[prodPlatform].compressionRatioPct}%
                   </Text>
-                  <Text style={bundleStyles.metricHint}>Bytecode & asset ratio</Text>
+                  <Text style={bundleStyles.metricHint}>
+                    Bytecode & asset ratio
+                  </Text>
                 </View>
 
                 <View style={bundleStyles.metricBox}>
-                  <Text style={bundleStyles.metricLabel}>FORMAT ARCHITECTURE</Text>
-                  <Text style={[bundleStyles.metricValue, { color: AppColors.amber700 }]}>
+                  <Text style={bundleStyles.metricLabel}>
+                    FORMAT ARCHITECTURE
+                  </Text>
+                  <Text style={[
+                    bundleStyles.metricValue,
+                    { color: AppColors.amber700 },
+                ]}>
                     {prodPlatform === 'ios'
                     ? 'Mach-O 64-bit'
                     : prodPlatform === 'androidAab'
@@ -1349,10 +1623,13 @@ const BundleTab = React.memo(() => {
           {/* Component Breakdown Cards */}
           {analysis && (<View style={bundleStyles.sectionCard}>
               <View style={bundleStyles.sectionHeaderRow}>
-                <View>
-                  <Text style={bundleStyles.sectionTitle}>Binary Component Architecture</Text>
+                <View style={{ flex: 1, paddingRight: 4 }}>
+                  <Text style={bundleStyles.sectionTitle}>
+                    Binary Component Architecture
+                  </Text>
                   <Text style={bundleStyles.sectionSub}>
-                    Compiled native libraries, runtime bytecodes, assets, and signature blocks
+                    Compiled native libraries, runtime bytecodes, assets, and
+                    signature blocks
                   </Text>
                 </View>
                 <CopyButton value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
@@ -1370,26 +1647,29 @@ const BundleTab = React.memo(() => {
               {/* Production Binary Legend */}
               <View style={[bundleStyles.legendGrid, { marginBottom: 12 }]}>
                 {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={bundleStyles.legendItem}>
-                    <View style={{
+                      <View style={{
                         width: 8,
                         height: 8,
                         borderRadius: 4,
                         backgroundColor: comp.color,
                     }}/>
-                    <Text style={bundleStyles.legendText} numberOfLines={1}>
-                      {comp.name}{' '}
-                      <Text style={bundleStyles.legendVal}>
-                        {comp.sizeMb} MB ({comp.pct}%)
+                      <Text style={bundleStyles.legendText} numberOfLines={1}>
+                        {comp.name}{' '}
+                        <Text style={bundleStyles.legendVal}>
+                          {comp.sizeMb} MB ({comp.pct}%)
+                        </Text>
                       </Text>
-                    </Text>
-                  </View>))}
+                    </View>))}
               </View>
 
               {analysis.production[prodPlatform].components.map((comp, idx) => (<View key={idx} style={bundleStyles.catRowCard}>
                   <View style={bundleStyles.catRowTop}>
                     <View style={[
                         bundleStyles.catIconBox,
-                        { backgroundColor: `${comp.color}15`, borderColor: `${comp.color}30` },
+                        {
+                            backgroundColor: `${comp.color}15`,
+                            borderColor: `${comp.color}30`,
+                        },
                     ]}>
                       <BundleCategoryIcon type={comp.category === 'native'
                         ? 'source'
@@ -1403,17 +1683,31 @@ const BundleTab = React.memo(() => {
                     </View>
 
                     <View style={bundleStyles.catRowTitleWrap}>
-                      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
+                      <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 6,
+                    }}>
                         <Text style={bundleStyles.catRowTitle} numberOfLines={1}>
                           {comp.name}
                         </Text>
-                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                          <Text style={bundleStyles.catRowSize}>{comp.sizeMb} MB</Text>
+                        <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
+                          <Text style={bundleStyles.catRowSize}>
+                            {comp.sizeMb} MB
+                          </Text>
                           <View style={[
                         bundleStyles.catPctPill,
                         { backgroundColor: `${comp.color}18` },
                     ]}>
-                            <Text style={[bundleStyles.catPctText, { color: comp.color }]}>
+                            <Text style={[
+                        bundleStyles.catPctText,
+                        { color: comp.color },
+                    ]}>
                               {comp.pct}%
                             </Text>
                           </View>
@@ -1433,9 +1727,16 @@ const BundleTab = React.memo(() => {
                     ]}/>
                   </View>
 
-                  {comp.advice ? (<View style={[bundleStyles.adviceBadge, bundleStyles.adviceOptimal, { marginTop: 6 }]}>
+                  {comp.advice ? (<View style={[
+                            bundleStyles.adviceBadge,
+                            bundleStyles.adviceOptimal,
+                            { marginTop: 6 },
+                        ]}>
                       <LightbulbIcon color={AppColors.emerald700} size={13}/>
-                      <Text style={[bundleStyles.adviceText, { color: AppColors.emerald700, flex: 1, marginLeft: 4 }]}>
+                      <Text style={[
+                            bundleStyles.adviceText,
+                            { color: AppColors.emerald700, flex: 1, marginLeft: 4 },
+                        ]}>
                         {comp.advice}
                       </Text>
                     </View>) : null}
@@ -1470,21 +1771,33 @@ const BundleTab = React.memo(() => {
                 {/* Platform Metric Grid Chips */}
                 <View style={bundleStyles.totalFormulaGrid}>
                   <View style={bundleStyles.totalChip}>
-                    <View style={[bundleStyles.totalDot, { backgroundColor: AppColors.purple }]}/>
+                    <View style={[
+                    bundleStyles.totalDot,
+                    { backgroundColor: AppColors.purple },
+                ]}/>
                     <Text style={bundleStyles.totalChipText}>
-                      Install: {analysis.production[prodPlatform].totalInstallMb} MB
+                      Install:{' '}
+                      {analysis.production[prodPlatform].totalInstallMb} MB
                     </Text>
                   </View>
                   <View style={bundleStyles.totalChip}>
-                    <View style={[bundleStyles.totalDot, { backgroundColor: AppColors.sky500 }]}/>
+                    <View style={[
+                    bundleStyles.totalDot,
+                    { backgroundColor: AppColors.sky500 },
+                ]}/>
                     <Text style={bundleStyles.totalChipText}>
-                      Download: ~{analysis.production[prodPlatform].totalDownloadMb} MB
+                      Download: ~
+                      {analysis.production[prodPlatform].totalDownloadMb} MB
                     </Text>
                   </View>
                   <View style={bundleStyles.totalChip}>
-                    <View style={[bundleStyles.totalDot, { backgroundColor: AppColors.emerald500 }]}/>
+                    <View style={[
+                    bundleStyles.totalDot,
+                    { backgroundColor: AppColors.emerald500 },
+                ]}/>
                     <Text style={bundleStyles.totalChipText}>
-                      Compression: {analysis.production[prodPlatform].compressionRatioPct}%
+                      Compression:{' '}
+                      {analysis.production[prodPlatform].compressionRatioPct}%
                     </Text>
                   </View>
                 </View>
@@ -1521,8 +1834,16 @@ const BundleTab = React.memo(() => {
                 return (<TouchableScale key={tab.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Filter by ${t(tab.labelKey)}, ${count} items`} accessibilityState={{ selected: isActive }} accessibilityHint={`Filters files list to ${t(tab.labelKey)}`} onPress={() => setActiveCategory(tab.key)} style={[
                         bundleStyles.catPill,
                         isActive && bundleStyles.catPillActive,
-                        tab.key === 'UNUSED' && isActive && { backgroundColor: AppColors.red500, borderColor: AppColors.red600 },
-                        tab.key === 'CONSUMED' && isActive && { backgroundColor: AppColors.emerald600, borderColor: AppColors.emerald700 },
+                        tab.key === 'UNUSED' &&
+                            isActive && {
+                            backgroundColor: AppColors.red500,
+                            borderColor: AppColors.red600,
+                        },
+                        tab.key === 'CONSUMED' &&
+                            isActive && {
+                            backgroundColor: AppColors.emerald600,
+                            borderColor: AppColors.emerald700,
+                        },
                     ]}>
                     <BundleCategoryIcon type={tab.iconType} size={12} color={isActive ? AppColors.white : AppColors.grayTextStrong}/>
                     <Text style={[
@@ -1538,7 +1859,6 @@ const BundleTab = React.memo(() => {
 
           {/* Files List / Tree Content */}
           <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-            
             {/* View Mode Toggle Header Bar */}
             <View style={bundleStyles.treeHeaderRow}>
               <View style={bundleStyles.viewModeToggleGroup}>
@@ -1548,7 +1868,8 @@ const BundleTab = React.memo(() => {
             ]}>
                   <Text style={[
                 bundleStyles.viewModeBtnText,
-                filesViewMode === 'tree' && bundleStyles.viewModeBtnTextActive,
+                filesViewMode === 'tree' &&
+                    bundleStyles.viewModeBtnTextActive,
             ]}>
                     {t('bundle.treeView')}
                   </Text>
@@ -1559,7 +1880,8 @@ const BundleTab = React.memo(() => {
             ]}>
                   <Text style={[
                 bundleStyles.viewModeBtnText,
-                filesViewMode === 'list' && bundleStyles.viewModeBtnTextActive,
+                filesViewMode === 'list' &&
+                    bundleStyles.viewModeBtnTextActive,
             ]}>
                     {t('bundle.flatList')}
                   </Text>
@@ -1568,11 +1890,17 @@ const BundleTab = React.memo(() => {
 
               {filesViewMode === 'tree' ? (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                   <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Expand all folders" onPress={expandAllFolders}>
-                    <Text style={bundleStyles.treeActionLink}>{t('bundle.expand')}</Text>
+                    <Text style={bundleStyles.treeActionLink}>
+                      {t('bundle.expand')}
+                    </Text>
                   </TouchableScale>
-                  <Text style={{ color: AppColors.grayTextWeak, fontSize: 11 }}>•</Text>
+                  <Text style={{ color: AppColors.grayTextWeak, fontSize: 11 }}>
+                    •
+                  </Text>
                   <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Collapse all folders" onPress={collapseAllFolders}>
-                    <Text style={bundleStyles.treeActionLink}>{t('bundle.collapse')}</Text>
+                    <Text style={bundleStyles.treeActionLink}>
+                      {t('bundle.collapse')}
+                    </Text>
                   </TouchableScale>
                 </View>) : (<Text style={bundleStyles.listHeaderCount}>
                   {t('bundle.showingFilesOf', {
@@ -1589,9 +1917,13 @@ const BundleTab = React.memo(() => {
             /* ── MODE 2: FLAT LIST VIEW ── */
             filteredFiles.map((file, index) => {
                 const categoryMeta = CATEGORY_COLORS[file.category] || CATEGORY_COLORS.typescript;
-                const pctOfTotal = ((file.sizeKb / summary.totalKb) * 100).toFixed(1);
+                const pctOfTotal = ((file.sizeKb / summary.totalKb) *
+                    100).toFixed(1);
                 const isUnused = file.isConsumed === false;
-                return (<View key={file.id} style={[bundleStyles.fileCard, isUnused && bundleStyles.treeFileCardUnused]}>
+                return (<View key={file.id} style={[
+                        bundleStyles.fileCard,
+                        isUnused && bundleStyles.treeFileCardUnused,
+                    ]}>
                     <View style={bundleStyles.fileCardTop}>
                       <View style={bundleStyles.sNoBadge}>
                         <Text style={bundleStyles.sNoText}>#{index + 1}</Text>
@@ -1600,25 +1932,45 @@ const BundleTab = React.memo(() => {
                       <MediaPreviewThumbnail file={file}/>
 
                       <View style={{ flex: 1, paddingHorizontal: 4 }}>
-                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                        <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}>{t('bundle.notConsumed')}</Text>
+                              <Text style={bundleStyles.unusedBadgeText}>
+                                {t('bundle.notConsumed')}
+                              </Text>
                             </View>) : (<View style={bundleStyles.consumedBadge}>
-                              <Text style={bundleStyles.consumedBadgeText}>{t('bundle.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}/>
                       </View>
 
-                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
                         <View style={bundleStyles.fileSizeBox}>
-                          <Text style={[bundleStyles.fileSizeKb, isUnused && { color: AppColors.amber800Warm }]}>
+                          <Text style={[
+                        bundleStyles.fileSizeKb,
+                        isUnused && { color: AppColors.amber800Warm },
+                    ]}>
                             {file.sizeKb >= 1024
-                        ? t('bundle.fileSizeMb', { size: (file.sizeKb / 1024).toFixed(2) })
+                        ? t('bundle.fileSizeMb', {
+                            size: (file.sizeKb / 1024).toFixed(2),
+                        })
                         : t('bundle.fileSizeKb', { size: file.sizeKb })}
                           </Text>
-                          <Text style={bundleStyles.filePercent}>{pctOfTotal}%</Text>
+                          <Text style={bundleStyles.filePercent}>
+                            {pctOfTotal}%
+                          </Text>
                         </View>
                         <TouchableScale onPress={() => downloadBundleFile(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
                           <DownloadIcon size={14} color={AppColors.sky500}/>
@@ -1632,7 +1984,9 @@ const BundleTab = React.memo(() => {
                         bundleStyles.fileProgressBar,
                         {
                             width: `${Math.min(100, Math.max(4, Number(pctOfTotal) * 4))}%`,
-                            backgroundColor: isUnused ? AppColors.red500 : categoryMeta.color,
+                            backgroundColor: isUnused
+                                ? AppColors.red500
+                                : categoryMeta.color,
                         },
                     ]}/>
                     </View>
@@ -1691,7 +2045,6 @@ const BundleTab = React.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {activeSubTab === 'packages' && (<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}/>
@@ -1704,14 +2057,25 @@ const BundleTab = React.memo(() => {
             </View>
 
             <Text style={bundleStyles.listHeaderCount}>
-              {t('bundle.showingDependencies', { count: filteredPackages.length })}
+              {t('bundle.showingDependencies', {
+                count: filteredPackages.length,
+            })}
             </Text>
 
             {filteredPackages.map((pkg, index) => {
-                const cleanInstalledVersion = pkg.version ? pkg.version.replace(/^\^/, '') : '';
-                const hasUpdate = !!pkg.latestVersion && !!cleanInstalledVersion &&
+                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: AppColors.errorCardBg }]}>
+                return (<View key={pkg.id} style={[
+                        bundleStyles.fileCard,
+                        pkg.isDeprecated && {
+                            borderColor: AppColors.errorBorder,
+                            backgroundColor: AppColors.errorCardBg,
+                        },
+                    ]}>
                   {/* Header Row: #s.no + Logo + Package Name + Version Pill + Update/Deprecated Badges + Size & Copy */}
                   <View style={bundleStyles.fileCardTop}>
                     <View style={bundleStyles.sNoBadge}>
@@ -1721,12 +2085,19 @@ const BundleTab = React.memo(() => {
                     <PackageLogoRenderer name={pkg.name} color={pkg.color} size={28}/>
 
                     <View style={{ flex: 1, paddingHorizontal: 4 }}>
-                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                      <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        flexWrap: 'wrap',
+                    }}>
                         <HighlightText text={pkg.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
                         <View style={bundleStyles.versionPill}>
                           <Text style={bundleStyles.versionPillText}>
                             {cleanInstalledVersion
-                        ? t('bundle.versionPrefix', { version: cleanInstalledVersion })
+                        ? t('bundle.versionPrefix', {
+                            version: cleanInstalledVersion,
+                        })
                         : t('bundle.bundled')}
                           </Text>
                         </View>
@@ -1737,34 +2108,72 @@ const BundleTab = React.memo(() => {
                             </Text>
                           </View>) : hasUpdate ? (<View style={bundleStyles.updateBadge}>
                             <Text style={bundleStyles.updateBadgeText}>
-                              {t('bundle.updateAvailable', { version: pkg.latestVersion })}
+                              {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 }]}>
+                          </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 }]}>
+                          </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={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
                       <View style={bundleStyles.fileSizeBox}>
                         <Text style={bundleStyles.fileSizeKb}>
                           {t('bundle.fileSizeKb', { size: pkg.sizeKb })}
                         </Text>
-                        <Text style={bundleStyles.filePercent}>{pkg.percentage}%</Text>
+                        <Text style={bundleStyles.filePercent}>
+                          {pkg.percentage}%
+                        </Text>
                       </View>
                       <CopyButton value={() => pkg} label={t('bundle.packageDetailsJson')}/>
                     </View>
                   </View>
 
                   {/* Subtitle Row: Category Chip + Description */}
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 4, marginBottom: 2 }}>
-                    <View style={[bundleStyles.pkgBadge, { backgroundColor: `${pkg.color}1F`, borderColor: `${pkg.color}4D` }]}>
+                  <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        marginTop: 4,
+                        marginBottom: 2,
+                    }}>
+                    <View style={[
+                        bundleStyles.pkgBadge,
+                        {
+                            backgroundColor: `${pkg.color}1F`,
+                            borderColor: `${pkg.color}4D`,
+                        },
+                    ]}>
                       <Text style={[bundleStyles.pkgBadgeText, { color: pkg.color }]}>
                         {pkg.category.toUpperCase()}
                       </Text>
@@ -1776,7 +2185,11 @@ const BundleTab = React.memo(() => {
 
                   {/* Deprecation Warning Banner if deprecated */}
                   {pkg.isDeprecated && pkg.deprecationReason && (<View style={bundleStyles.deprecationBox}>
-                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                      <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 5,
+                        }}>
                         <CircleAlertIcon color={AppColors.errorColor} size={12}/>
                         <Text style={bundleStyles.deprecationText}>
                           {pkg.deprecationReason}
@@ -1787,19 +2200,39 @@ const BundleTab = React.memo(() => {
                   <View style={bundleStyles.fileProgressTrack}>
                     <View style={[
                         bundleStyles.fileProgressBar,
-                        { width: `${pkg.percentage * 2}%`, backgroundColor: pkg.isDeprecated ? AppColors.red500 : pkg.color },
+                        {
+                            width: `${pkg.percentage * 2}%`,
+                            backgroundColor: pkg.isDeprecated
+                                ? AppColors.red500
+                                : pkg.color,
+                        },
                     ]}/>
                   </View>
 
                   {/* Footer Row: Type Tag + Last Active + NPM Link Button */}
-                  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 3 }}>
-                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                  <View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginTop: 3,
+                    }}>
+                    <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
                       <View style={bundleStyles.typeTag}>
                         <Text style={bundleStyles.typeTagText}>
-                          {pkg.type === 'direct' ? t('bundle.direct') : t('bundle.transitive')}
+                          {pkg.type === 'direct'
+                        ? t('bundle.direct')
+                        : t('bundle.transitive')}
                         </Text>
                       </View>
-                      {pkg.lastActive && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                      {pkg.lastActive && (<View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                        }}>
                           <ClockIcon color={AppColors.grayTextWeak} size={11}/>
                           <Text style={bundleStyles.lastActiveText}>
                             {pkg.lastActive}
@@ -1807,15 +2240,22 @@ const BundleTab = React.memo(() => {
                         </View>)}
                     </View>
 
-                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
                       <Text style={bundleStyles.fileMetaText}>
                         {t('bundle.minified', { size: pkg.sizeKb })}
                       </Text>
                       <TouchableScale accessible={true} accessibilityRole="link" accessibilityLabel={`Open ${pkg.name} on NPM`} accessibilityHint="Opens NPM package page in browser" onPress={() => {
-                        const url = pkg.npmUrl || `https://www.npmjs.com/package/${pkg.name}`;
+                        const url = pkg.npmUrl ||
+                            `https://www.npmjs.com/package/${pkg.name}`;
                         Linking.openURL(url).catch(() => { });
                     }} style={bundleStyles.npmLinkBtn}>
-                        <Text style={bundleStyles.npmLinkText}>{t('bundle.npmLink')}</Text>
+                        <Text style={bundleStyles.npmLinkText}>
+                          {t('bundle.npmLink')}
+                        </Text>
                       </TouchableScale>
                     </View>
                   </View>
@@ -1828,7 +2268,9 @@ const BundleTab = React.memo(() => {
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
               <PackageIcon color={AppColors.purple} size={14}/>
               <Text style={bundleStyles.footerTitle}>
-                {t('bundle.dependenciesCount', { count: filteredPackages.length })}
+                {t('bundle.dependenciesCount', {
+                count: filteredPackages.length,
+            })}
               </Text>
             </View>
             <Text style={bundleStyles.footerSizeVal}>
@@ -1845,22 +2287,36 @@ const BundleTab = React.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {activeSubTab === 'media' && (<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',
+                justifyContent: 'space-between',
+                marginBottom: 8,
+            }}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <StorageIcon color={AppColors.purple} size={18}/>
-                  <Text style={bundleStyles.tipsHeading}>{t('bundle.mediaAuditorTitle')}</Text>
+                  <Text style={bundleStyles.tipsHeading}>
+                    {t('bundle.mediaAuditorTitle')}
+                  </Text>
                 </View>
                 <CopyButton value={() => mediaFiles} label={t('bundle.mediaAssetsJson')}/>
               </View>
               <Text style={bundleStyles.tipDesc}>
                 {t('bundle.mediaAuditorPrefix')}{' '}
-                <Text style={{ fontFamily: AppFonts.interBold, color: AppColors.purple }}>
+                <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.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')}
@@ -1884,7 +2340,11 @@ const BundleTab = React.memo(() => {
                     <Text style={bundleStyles.filePath}>{file.path}</Text>
                   </View>
 
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
                     <View style={bundleStyles.fileSizeBox}>
                       <Text style={bundleStyles.fileSizeKb}>
                         {t('bundle.fileSizeKb', { size: file.sizeKb })}
@@ -1942,12 +2402,18 @@ const BundleTab = React.memo(() => {
       {/* ── 5. TAB: OPTIMIZER CHECKLIST ─────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {activeSubTab === 'optimizer' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
-          
           <View style={bundleStyles.tipsCard}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+            <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}>{t('bundle.optimizerTitle')}</Text>
+                <Text style={bundleStyles.tipsHeading}>
+                  {t('bundle.optimizerTitle')}
+                </Text>
               </View>
               <CopyButton value={() => [
                 t('bundle.optTip1Title'),
@@ -1974,8 +2440,12 @@ const BundleTab = React.memo(() => {
                     desc: isHermes
                         ? t('bundle.optTip2DescActive')
                         : t('bundle.optTip2DescInactive'),
-                    badge: isHermes ? t('bundle.active') : t('bundle.actionRequired'),
-                    badgeColor: isHermes ? AppColors.emerald500 : AppColors.amber500,
+                    badge: isHermes
+                        ? t('bundle.active')
+                        : t('bundle.actionRequired'),
+                    badgeColor: isHermes
+                        ? AppColors.emerald500
+                        : AppColors.amber500,
                 },
                 {
                     iconType: 'font',
@@ -2011,8 +2481,17 @@ const BundleTab = React.memo(() => {
                     <Text style={bundleStyles.tipTitle}>{tip.title}</Text>
                   </View>
                   <View style={bundleStyles.tipActionWrap}>
-                    <View style={[bundleStyles.impactBadge, { backgroundColor: `${tip.badgeColor}18`, borderColor: `${tip.badgeColor}40` }]}>
-                      <Text style={[bundleStyles.impactBadgeText, { color: tip.badgeColor }]}>
+                    <View style={[
+                    bundleStyles.impactBadge,
+                    {
+                        backgroundColor: `${tip.badgeColor}18`,
+                        borderColor: `${tip.badgeColor}40`,
+                    },
+                ]}>
+                      <Text style={[
+                    bundleStyles.impactBadgeText,
+                    { color: tip.badgeColor },
+                ]}>
                         {tip.badge}
                       </Text>
                     </View>
@@ -2235,12 +2714,14 @@ const bundleStyles = StyleSheet.create({
         padding: 14,
         borderWidth: 1,
         borderColor: AppColors.dividerColor,
+        overflow: 'hidden',
     },
     sectionHeaderRow: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         marginBottom: 10,
+        gap: 8,
     },
     sectionTitle: {
         fontFamily: AppFonts.interBold,
@@ -3081,7 +3562,8 @@ const bundleStyles = StyleSheet.create({
         alignItems: 'center',
         backgroundColor: AppColors.white,
         paddingHorizontal: 16,
-        paddingVertical: 10,
+        paddingTop: 10,
+        paddingBottom: Platform.OS === 'ios' ? 24 : 12,
         borderTopWidth: 1,
         borderTopColor: AppColors.dividerColor,
         shadowColor: AppColors.primaryBlack,