react-native-inapp-inspector 1.1.22 → 1.1.24

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

@@ -6,8 +6,8 @@ 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 }) => {
@@ -124,6 +124,77 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
       </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);
@@ -244,7 +315,7 @@ 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}>
@@ -322,27 +393,29 @@ 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: 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>);
 };
 const CATEGORY_TABS = [
-    { key: 'ALL', labelKey: 'bundle.catAll', icon: '📁' },
-    { key: 'UNUSED', labelKey: 'bundle.catUnused', icon: '🚫' },
-    { key: 'CONSUMED', labelKey: 'bundle.catConsumed', icon: '⚡' },
-    { key: 'image', labelKey: 'bundle.catImages', icon: '🖼️' },
-    { key: 'typescript', labelKey: 'bundle.catTypescript', icon: '📜' },
-    { key: 'javascript', labelKey: 'bundle.catJavascript', icon: '⚙️' },
-    { key: 'font', labelKey: 'bundle.catFonts', icon: '🔤' },
-    { key: 'json', labelKey: 'bundle.catJson', 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: AppColors.pink500, bg: AppColors.pink100 },
@@ -651,6 +724,21 @@ const BundleTab = React.memo(() => {
             </View>
           </View>
 
+          {/* Live analysis unavailable warning */}
+          {analysis && !analysis.isLive && (<View style={bundleStyles.liveWarningCard}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1 }}>
+                <CircleAlertIcon color={AppColors.amber700} size={16}/>
+                <View style={{ flex: 1 }}>
+                  <Text style={bundleStyles.liveWarningTitle}>
+                    {t('bundle.liveAnalysisUnavailable')}
+                  </Text>
+                  <Text style={bundleStyles.liveWarningDesc}>
+                    {t('bundle.liveAnalysisUnavailableSub')}
+                  </Text>
+                </View>
+              </View>
+            </View>)}
+
           {/* Development Bundle Split-Up (derived from the real running bundle) */}
           {analysis && (<View style={bundleStyles.sectionCard}>
               <View style={bundleStyles.sectionHeaderRow}>
@@ -669,28 +757,32 @@ const BundleTab = React.memo(() => {
 
               {[
                     {
+                        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}>
-                    <Text style={bundleStyles.catRowIcon}>{['📦', '🧩', '🖼️', '⚙️'][idx]}</Text>
+                    <BundleCategoryIcon type={part.iconType} size={18} color={part.color}/>
                     <View style={{ flex: 1 }}>
                       <Text style={bundleStyles.catRowTitle}>{part.label}</Text>
                       <Text style={bundleStyles.catRowDesc}>
@@ -767,7 +859,7 @@ const BundleTab = React.memo(() => {
             {/* Legend Grid */}
             <View style={bundleStyles.legendGrid}>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: AppColors.pink500 }]}/>
+                <BundleCategoryIcon type="image" size={13} color={AppColors.pink500}/>
                 <Text style={bundleStyles.legendText}>
                   {t('bundle.legendImages')}{' '}
                   <Text style={bundleStyles.legendVal}>
@@ -776,7 +868,7 @@ const BundleTab = React.memo(() => {
                 </Text>
               </View>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: AppColors.sky500 }]}/>
+                <BundleCategoryIcon type="typescript" size={13} color={AppColors.sky500}/>
                 <Text style={bundleStyles.legendText}>
                   {t('bundle.legendTs')}{' '}
                   <Text style={bundleStyles.legendVal}>
@@ -785,7 +877,7 @@ const BundleTab = React.memo(() => {
                 </Text>
               </View>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: AppColors.indigo500 }]}/>
+                <BundleCategoryIcon type="javascript" size={13} color={AppColors.indigo500}/>
                 <Text style={bundleStyles.legendText}>
                   {t('bundle.legendJs')}{' '}
                   <Text style={bundleStyles.legendVal}>
@@ -794,7 +886,7 @@ const BundleTab = React.memo(() => {
                 </Text>
               </View>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: AppColors.purple500 }]}/>
+                <BundleCategoryIcon type="font" size={13} color={AppColors.purple500}/>
                 <Text style={bundleStyles.legendText}>
                   {t('bundle.legendFonts')}{' '}
                   <Text style={bundleStyles.legendVal}>
@@ -803,7 +895,7 @@ const BundleTab = React.memo(() => {
                 </Text>
               </View>
               <View style={bundleStyles.legendItem}>
-                <View style={[bundleStyles.legendDot, { backgroundColor: AppColors.emerald500 }]}/>
+                <BundleCategoryIcon type="json" size={13} color={AppColors.emerald500}/>
                 <Text style={bundleStyles.legendText}>
                   {t('bundle.legendJson')}{' '}
                   <Text style={bundleStyles.legendVal}>
@@ -833,7 +925,7 @@ const BundleTab = React.memo(() => {
             
             {[
                 {
-                    icon: '🖼️',
+                    iconType: 'image',
                     title: t('bundle.catImagesTitle'),
                     count: summary.images.count,
                     size: t('bundle.fileSizeKb', { size: summary.images.kb }),
@@ -842,7 +934,7 @@ const BundleTab = React.memo(() => {
                     desc: t('bundle.catImagesDesc'),
                 },
                 {
-                    icon: '⚙️',
+                    iconType: 'javascript',
                     title: t('bundle.catJsTitle'),
                     count: summary.js.count,
                     size: t('bundle.fileSizeKb', { size: summary.js.kb }),
@@ -851,7 +943,7 @@ const BundleTab = React.memo(() => {
                     desc: t('bundle.catJsDesc'),
                 },
                 {
-                    icon: '🔤',
+                    iconType: 'font',
                     title: t('bundle.catFontsTitle'),
                     count: summary.fonts.count,
                     size: t('bundle.fileSizeKb', { size: summary.fonts.kb }),
@@ -863,7 +955,7 @@ const BundleTab = React.memo(() => {
                         .join(', ') || t('bundle.catFontsDesc'),
                 },
                 {
-                    icon: '📜',
+                    iconType: 'typescript',
                     title: t('bundle.catTsTitle'),
                     count: summary.ts.count,
                     size: t('bundle.fileSizeKb', { size: summary.ts.kb }),
@@ -872,7 +964,7 @@ const BundleTab = React.memo(() => {
                     desc: t('bundle.catTsDesc'),
                 },
                 {
-                    icon: '📄',
+                    iconType: 'json',
                     title: t('bundle.catJsonTitle'),
                     count: summary.json.count,
                     size: t('bundle.fileSizeKb', { size: summary.json.kb }),
@@ -882,7 +974,7 @@ const BundleTab = React.memo(() => {
                 },
             ].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}>
@@ -962,7 +1054,7 @@ const BundleTab = React.memo(() => {
                         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,
@@ -1080,15 +1172,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: AppColors.amber800Warm },
                             file.status === 'optimal' && { color: AppColors.emerald700 },
                             isUnused && { color: AppColors.red600 },
                         ]}>
-                            {isUnused ? '🗑️ ' : file.status === 'warning' ? '💡 ' : '✨ '}
                             {file.advice}
                           </Text>
+                        </View>
                         </View>)}
                     </View>
                   </View>);
@@ -1205,9 +1299,12 @@ 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}>
@@ -1225,9 +1322,12 @@ const BundleTab = React.memo(() => {
                           {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 }}>
@@ -1324,14 +1424,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: AppColors.amber800Warm },
                         file.status === 'optimal' && { color: AppColors.emerald700 },
                     ]}>
-                        {file.status === 'warning' ? '💡 ' : '✨ '}
-                        {file.advice}
-                      </Text>
+                          {file.advice}
+                        </Text>
+                      </View>
                     </View>)}
                 </View>
               </View>))}
@@ -1376,12 +1478,16 @@ const BundleTab = React.memo(() => {
 
             {[
                 {
+                    iconType: 'image',
+                    iconColor: AppColors.pink500,
                     title: t('bundle.optTip1Title'),
                     desc: t('bundle.optTip1Desc'),
                     badge: t('bundle.highImpact'),
                     badgeColor: AppColors.pink500,
                 },
                 {
+                    iconType: 'bolt',
+                    iconColor: isHermes ? AppColors.emerald500 : AppColors.amber500,
                     title: t('bundle.optTip2Title'),
                     desc: isHermes
                         ? t('bundle.optTip2DescActive')
@@ -1390,18 +1496,24 @@ const BundleTab = React.memo(() => {
                     badgeColor: isHermes ? AppColors.emerald500 : AppColors.amber500,
                 },
                 {
+                    iconType: 'font',
+                    iconColor: AppColors.purple500,
                     title: t('bundle.optTip3Title'),
                     desc: t('bundle.optTip3Desc'),
                     badge: t('bundle.mediumImpact'),
                     badgeColor: AppColors.purple500,
                 },
                 {
+                    iconType: 'source',
+                    iconColor: AppColors.sky500,
                     title: t('bundle.optTip4Title'),
                     desc: t('bundle.optTip4Desc'),
                     badge: t('bundle.bestPractice'),
                     badgeColor: AppColors.sky500,
                 },
                 {
+                    iconType: 'overhead',
+                    iconColor: AppColors.indigo500,
                     title: t('bundle.optTip5Title'),
                     desc: t('bundle.optTip5Desc'),
                     badge: t('bundle.bestPractice'),
@@ -1413,6 +1525,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 }}>
@@ -1612,11 +1725,6 @@ const bundleStyles = StyleSheet.create({
         gap: 5,
         minWidth: '45%',
     },
-    legendDot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-    },
     legendText: {
         fontFamily: AppFonts.interMedium,
         fontSize: 11,
@@ -1640,9 +1748,6 @@ const bundleStyles = StyleSheet.create({
         gap: 8,
         marginBottom: 8,
     },
-    catRowIcon: {
-        fontSize: 16,
-    },
     catRowTitle: {
         fontFamily: AppFonts.interBold,
         fontSize: 12,
@@ -1718,9 +1823,6 @@ const bundleStyles = StyleSheet.create({
         backgroundColor: AppColors.brandPurple,
         borderColor: AppColors.brandPurple,
     },
-    catPillIcon: {
-        fontSize: 11,
-    },
     catPillText: {
         fontFamily: AppFonts.interMedium,
         fontSize: 11,
@@ -2108,6 +2210,28 @@ const bundleStyles = StyleSheet.create({
         borderWidth: 1,
         borderColor: AppColors.errorBorder,
     },
+    liveWarningCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.amber100,
+        borderWidth: 1,
+        borderColor: AppColors.amber200,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 12,
+    },
+    liveWarningTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.amber800Warm,
+        marginBottom: 2,
+    },
+    liveWarningDesc: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10.5,
+        lineHeight: 14,
+        color: AppColors.amber800Warm,
+    },
     adviceBadge: {
         paddingHorizontal: 8,
         paddingVertical: 4,

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

@@ -6,7 +6,7 @@ import HighlightText from '../HighlightText';
 import JsonViewer from '../JsonViewer';
 import CopyButton from '../CopyButton';
 import SegmentedTabs from '../SegmentedTabs';
-import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, } from '../NetworkIcons';
+import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, DocIcon, } from '../NetworkIcons';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import styles from '../../styles';
@@ -268,14 +268,17 @@ const LogDetail = React.memo(() => {
                     paddingVertical: 2,
                 },
             ]}>
-                  <Text style={[
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                    <DocIcon color={AppColors.brandPurple} size={10}/>
+                    <Text style={[
                 styles.metaChipText,
                 { color: AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts.interBold },
             ]}>
-                    📄 {originFrame.fileName}
-                    {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
-                    {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
-                  </Text>
+                      {originFrame.fileName}
+                      {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
+                      {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
+                    </Text>
+                  </View>
                 </View>)}
             </View>
 
@@ -711,6 +714,8 @@ const LogDetail = React.memo(() => {
                                 {frame.fileExt.toUpperCase()}
                               </Text>
                             </View>)}
+                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                          <DocIcon color={isTopFrame ? AppColors.brandPurple : AppColors.grayTextWeak} size={10}/>
                           <Text style={{
                             fontFamily: AppFonts.interMedium,
                             fontSize: 10.5,
@@ -718,9 +723,10 @@ const LogDetail = React.memo(() => {
                                 ? AppColors.brandPurple
                                 : AppColors.grayTextWeak,
                         }}>
-                            📄 {frame.fileName}
+                            {frame.fileName}
                           </Text>
                         </View>
+                        </View>
 
                         {/* Full path */}
                         {frame.fullPath && frame.fullPath !== frame.fileName && (<Text selectable style={{

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

@@ -8,7 +8,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
 import { getRuntimeDiagnostics } from '../../helpers';
-import { SearchIcon, CircleXIcon, PerformanceIcon } from '../NetworkIcons';
+import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, WarningTriangleIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, } from '../NetworkIcons';
 const PerformanceTab = React.memo(() => {
     const { t } = useTranslation();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
@@ -257,35 +257,35 @@ const PerformanceTab = React.memo(() => {
       <View style={perfStyles.filterRow}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6, paddingHorizontal: 12, paddingVertical: 4 }}>
           {[
-            { key: 'ALL', label: t('performance.allLogs'), icon: '⚡', count: events.length },
+            { key: 'ALL', label: t('performance.allLogs'), Icon: BoltIcon, count: events.length },
             {
                 key: 'JANKY',
                 label: t('performance.jankySlow'),
-                icon: '⚠️',
+                Icon: WarningTriangleIcon,
                 count: events.filter(e => e.severity === 'warning' || e.severity === 'critical').length,
             },
             {
                 key: 'NAVIGATION',
                 label: t('performance.navigation'),
-                icon: '🗺️',
+                Icon: MapIcon,
                 count: events.filter(e => e.category === 'navigation').length,
             },
             {
                 key: 'RENDER',
                 label: t('performance.components'),
-                icon: '⚛️',
+                Icon: AtomIcon,
                 count: events.filter(e => e.category === 'render').length,
             },
             {
                 key: 'MEMORY',
                 label: t('performance.memoryGc'),
-                icon: '🧠',
+                Icon: BrainIcon,
                 count: events.filter(e => e.category === 'memory').length,
             },
             {
                 key: 'IO',
                 label: t('performance.networkIo'),
-                icon: '🌐',
+                Icon: GlobeIcon,
                 count: events.filter(e => e.category === 'io' || e.category === 'bridge').length,
             },
         ].map(tab => {
@@ -294,7 +294,7 @@ const PerformanceTab = React.memo(() => {
                     perfStyles.filterPill,
                     isActive && perfStyles.filterPillActive,
                 ]}>
-                <Text style={perfStyles.filterPillIcon}>{tab.icon}</Text>
+                <tab.Icon color={isActive ? AppColors.white : AppColors.grayTextStrong} size={12}/>
                 <Text style={[
                     perfStyles.filterPillText,
                     isActive && perfStyles.filterPillTextActive,
@@ -487,7 +487,7 @@ const PerformanceTab = React.memo(() => {
         </View>
 
         {filteredEvents.length === 0 ? (<View style={perfStyles.emptyCard}>
-            <Text style={{ fontSize: 28 }}>⚡</Text>
+            <BoltIcon color={AppColors.amber500} size={30}/>
             <Text style={perfStyles.emptyTitle}>{t('performance.emptyTitle')}</Text>
             <Text style={perfStyles.emptySub}>
               {t('performance.emptySubtitle')}
@@ -574,7 +574,10 @@ const PerformanceTab = React.memo(() => {
 
                     {/* Actionable Optimization Tip */}
                     {event.advice && (<View style={perfStyles.adviceCard}>
-                        <Text style={perfStyles.adviceHeading}>💡 {t('performance.optimizationTip')}</Text>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                          <LightbulbIcon color={AppColors.purpleShade700} size={12}/>
+                          <Text style={perfStyles.adviceHeading}>{t('performance.optimizationTip')}</Text>
+                        </View>
                         <Text style={perfStyles.adviceBodyText}>{event.advice}</Text>
                       </View>)}
                   </View>)}
@@ -665,9 +668,6 @@ const perfStyles = StyleSheet.create({
         backgroundColor: AppColors.brandPurple,
         borderColor: AppColors.brandPurple,
     },
-    filterPillIcon: {
-        fontSize: 11,
-    },
     filterPillText: {
         fontFamily: AppFonts.interMedium,
         fontSize: 11,

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

@@ -10,7 +10,7 @@ import { getSize } from '../../helpers';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { TerminalIcon, SearchIcon, ClearIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, } from '../NetworkIcons';
+import { TerminalIcon, SearchIcon, ClearIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, BoltIcon, TextAaIcon, } from '../NetworkIcons';
 const ReduxTab = React.memo(() => {
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = useInspector();
     // Sort mode: 'latest' (newest updated first) vs 'alpha' (A-Z)
@@ -183,9 +183,12 @@ const ReduxTab = React.memo(() => {
           <Text style={reduxTabStyles.resultCount}>
             Showing {filteredSlices.length} of {sliceItems.length} state slices
           </Text>
-          <Text style={reduxTabStyles.sortLabel}>
-            {sortMode === 'latest' ? '⚡ Newest Updates First' : '🔤 Alphabetical (A-Z)'}
-          </Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+            {sortMode === 'latest' ? (<BoltIcon color={AppColors.brandPurple} size={11}/>) : (<TextAaIcon color={AppColors.brandPurple} size={11}/>)}
+            <Text style={reduxTabStyles.sortLabel}>
+              {sortMode === 'latest' ? 'Newest Updates First' : 'Alphabetical (A-Z)'}
+            </Text>
+          </View>
         </View>
       </View>