react-native-inapp-inspector 1.1.22 → 1.1.24

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -44,6 +44,7 @@ const helpers_1 = require("../helpers");
 const i18n_1 = require("../i18n");
 const HighlightText_1 = __importDefault(require("./HighlightText"));
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const NetworkIcons_1 = require("./NetworkIcons");
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
     const { t } = (0, i18n_1.useTranslation)();
@@ -204,6 +205,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                             borderColor: AppColors_1.AppColors.amberBorder,
                         },
                     ]}>
+                    <NetworkIcons_1.CartIcon color={AppColors_1.AppColors.amber700} size={12}/>
                     <react_native_1.Text style={[
                         cardStyles.chipText,
                         {
@@ -211,7 +213,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                             fontFamily: AppFonts_1.AppFonts.interBold,
                         },
                     ]}>
-                      🛒 {items.length}{' '}
+                      {items.length}{' '}
                       {items.length === 1
                         ? t('analytics.item')
                         : t('analytics.items')}
@@ -236,6 +238,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                             borderColor: AppColors_1.AppColors.emeraldBorder,
                         },
                     ]}>
+                    <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={12}/>
                     <react_native_1.Text style={[
                         cardStyles.chipText,
                         {
@@ -243,7 +246,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                             fontFamily: AppFonts_1.AppFonts.interBold,
                         },
                     ]}>
-                      💰 {String(val)} {currencyStr}
+                      {String(val)} {currencyStr}
                     </react_native_1.Text>
                   </react_native_1.View>);
             }

package/dist/commonjs/components/ErrorBoundary.js

@@ -39,6 +39,7 @@ const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const helpers_1 = require("../helpers");
+const NetworkIcons_1 = require("./NetworkIcons");
 function parseStackTrace(stack) {
     if (!stack)
         return null;
@@ -110,7 +111,10 @@ ${error.stack}`;
             const isInline = this.props.fallbackType === 'inline';
             if (isInline) {
                 return (<react_native_1.View style={styles.inlineContainer}>
-            <react_native_1.Text style={styles.inlineTitle}>⚠️ Inspector Crash</react_native_1.Text>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <NetworkIcons_1.WarningTriangleIcon color={AppColors_1.AppColors.redErrorText} size={14}/>
+              <react_native_1.Text style={styles.inlineTitle}>Inspector Crash</react_native_1.Text>
+            </react_native_1.View>
             <react_native_1.TouchableOpacity style={styles.inlineResetBtn} onPress={this.handleReset}>
               <react_native_1.Text style={styles.inlineResetText}>Reload</react_native_1.Text>
             </react_native_1.TouchableOpacity>
@@ -121,7 +125,9 @@ ${error.stack}`;
             const parsed = error && error.stack ? parseStackTrace(error.stack) : null;
             return (<react_native_1.View style={styles.container}>
           <react_native_1.View style={styles.card}>
-            <react_native_1.Text style={styles.emoji}>⚠️</react_native_1.Text>
+            <react_native_1.View style={{ marginBottom: 12, alignItems: 'center' }}>
+            <NetworkIcons_1.WarningTriangleIcon color={AppColors_1.AppColors.amber500} size={44}/>
+          </react_native_1.View>
             <react_native_1.Text style={styles.title}>Something went wrong</react_native_1.Text>
             
             <react_native_1.View style={{
@@ -134,13 +140,19 @@ ${error.stack}`;
                     marginBottom: 12,
                     gap: 4
                 }}>
+              <react_native_1.View style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 4,
+                    backgroundColor: isNativeCrash ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.amber500,
+                }}/>
               <react_native_1.Text style={{
                     fontSize: 10,
                     fontWeight: 'bold',
                     color: isNativeCrash ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.amber500,
                     fontFamily: AppFonts_1.AppFonts.interBold || 'System'
                 }}>
-                {isNativeCrash ? '🔴 NATIVE CRASH' : '🟡 JAVASCRIPT CRASH'}
+                {isNativeCrash ? 'NATIVE CRASH' : 'JAVASCRIPT CRASH'}
               </react_native_1.Text>
             </react_native_1.View>
 
@@ -187,8 +199,9 @@ ${error.stack}`;
                     flexDirection: 'row',
                     gap: 6
                 }} onPress={this.handleCopyTrace}>
+                <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.white} size={14}/>
                 <react_native_1.Text style={{ color: AppColors_1.AppColors.white, fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts_1.AppFonts.interBold || 'System' }}>
-                  📋 Copy Crash Traceback
+                  Copy Crash Traceback
                 </react_native_1.Text>
               </react_native_1.TouchableOpacity>
             </react_native_1.View>
@@ -231,10 +244,6 @@ const styles = react_native_1.StyleSheet.create({
         shadowRadius: 12,
         elevation: 8,
     },
-    emoji: {
-        fontSize: 40,
-        marginBottom: 12,
-    },
     title: {
         fontFamily: AppFonts_1.AppFonts.interBold || 'System',
         fontSize: 18,

package/dist/commonjs/components/Inspector/BundleTab.d.ts

@@ -32,6 +32,7 @@ export interface BundlePackageItem {
     lastActive?: string;
     npmUrl?: string;
 }
+export type BundleIconType = 'source' | 'deps' | 'media' | 'overhead' | 'image' | 'typescript' | 'javascript' | 'font' | 'json' | 'folder' | 'ban' | 'bolt';
 export interface TreeNode {
     id: string;
     name: string;

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

@@ -162,6 +162,77 @@ const PackageLogoRenderer = ({ name, size = 28 }) => {
       </react_native_svg_1.default>
     </react_native_1.View>);
 };
+const BundleCategoryIcon = ({ type, size = 16, color = AppColors_1.AppColors.purple }) => {
+    const stroke = { stroke: color, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
+    const renderGlyph = () => {
+        switch (type) {
+            case 'folder':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.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}/>
+          </react_native_svg_1.G>);
+            case 'ban':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.Circle cx="12" cy="12" r="8.5" {...stroke}/>
+            <react_native_svg_1.Path d="M5.5 5.5 18.5 18.5" {...stroke}/>
+          </react_native_svg_1.G>);
+            case 'bolt':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.Path d="M13 2 4.5 13.5 H10.5 L9 22 19.5 9.5 H13.5 Z" {...stroke}/>
+          </react_native_svg_1.G>);
+            case 'source':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.Path d="M8.5 7 L4 12 L8.5 17" {...stroke}/>
+            <react_native_svg_1.Path d="M15.5 7 L20 12 L15.5 17" {...stroke}/>
+            <react_native_svg_1.Path d="M13.5 4.5 L10.5 19.5" {...stroke}/>
+          </react_native_svg_1.G>);
+            case 'deps':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.Rect x="4" y="4" width="16" height="16" rx="2.5" {...stroke}/>
+            <react_native_svg_1.Path d="M4 9.5 H20" {...stroke}/>
+            <react_native_svg_1.Path d="M9.5 9.5 V20" {...stroke}/>
+          </react_native_svg_1.G>);
+            case 'media':
+            case 'image':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.Rect x="3.5" y="4.5" width="17" height="15" rx="2" {...stroke}/>
+            <react_native_svg_1.Circle cx="9" cy="10" r="1.5" {...stroke}/>
+            <react_native_svg_1.Path d="M3.5 17.5 L9.5 12.5 L14 16.5 L17 13.5 L20.5 17.5" {...stroke}/>
+          </react_native_svg_1.G>);
+            case 'overhead':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.Circle cx="12" cy="12" r="3.2" {...stroke}/>
+            <react_native_svg_1.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}/>
+          </react_native_svg_1.G>);
+            case 'typescript':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.Path d="M6.5 3.5 H14 L18.5 8 V20.5 H6.5 Z" {...stroke}/>
+            <react_native_svg_1.Path d="M14 3.5 V8 H18.5" {...stroke}/>
+            <react_native_svg_1.Path d="M9.5 13.5 H15 M12 13.5 V16.5 M9.5 16.5 H13" {...stroke}/>
+          </react_native_svg_1.G>);
+            case 'javascript':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.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}/>
+            <react_native_svg_1.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}/>
+          </react_native_svg_1.G>);
+            case 'font':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.Path d="M8 19 L12 5.5 L16 19" {...stroke}/>
+            <react_native_svg_1.Path d="M9.4 14.5 H14.6" {...stroke}/>
+          </react_native_svg_1.G>);
+            case 'json':
+                return (<react_native_svg_1.G>
+            <react_native_svg_1.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}/>
+            <react_native_svg_1.Circle cx="12" cy="12" r="1.1" fill={color}/>
+            <react_native_svg_1.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}/>
+          </react_native_svg_1.G>);
+            default:
+                return null;
+        }
+    };
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {renderGlyph()}
+    </react_native_svg_1.default>);
+};
 // ─── Media File Thumbnail Component ──────────────────────────────────────────
 const MediaPreviewThumbnail = ({ file }) => {
     const [loadError, setLoadError] = (0, react_1.useState)(false);
@@ -282,7 +353,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, collapsedFolde
                 {isCollapsed ? '▶' : '▼'}
               </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text style={{ fontSize: 16 }}>{isCollapsed ? '📁' : '📂'}</react_native_1.Text>
+            {isCollapsed ? (<NetworkIcons_1.FolderIcon color={AppColors_1.AppColors.amber500} size={16}/>) : (<NetworkIcons_1.FolderOpenIcon color={AppColors_1.AppColors.amber500} size={16}/>)}
             <HighlightText_1.default text={node.name + '/'} search={search} style={bundleStyles.treeFolderName} highlightStyle={bundleStyles.searchHighlight}/>
             <react_native_1.View style={bundleStyles.treeCountBadge}>
               <react_native_1.Text style={bundleStyles.treeCountBadgeText}>
@@ -360,27 +431,29 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, collapsedFolde
                 isUnused && bundleStyles.adviceUnused,
                 { marginLeft: 26, marginTop: 4 },
             ]}>
-          <react_native_1.Text style={[
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
+            {isUnused ? (<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.red600} size={12}/>) : file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
+            <react_native_1.Text style={[
                 bundleStyles.adviceText,
                 file.status === 'warning' && { color: AppColors_1.AppColors.amber800Warm },
                 file.status === 'optimal' && { color: AppColors_1.AppColors.emerald700 },
                 isUnused && { color: AppColors_1.AppColors.red600 },
             ]}>
-            {isUnused ? '🗑️ ' : file.status === 'warning' ? '💡 ' : '✨ '}
-            {file.advice}
-          </react_native_1.Text>
+              {file.advice}
+            </react_native_1.Text>
+          </react_native_1.View>
         </react_native_1.View>)}
     </react_native_1.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_1.AppColors.pink500, bg: AppColors_1.AppColors.pink100 },
@@ -689,6 +762,21 @@ const BundleTab = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
+          {/* Live analysis unavailable warning */}
+          {analysis && !analysis.isLive && (<react_native_1.View style={bundleStyles.liveWarningCard}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1 }}>
+                <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.amber700} size={16}/>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={bundleStyles.liveWarningTitle}>
+                    {t('bundle.liveAnalysisUnavailable')}
+                  </react_native_1.Text>
+                  <react_native_1.Text style={bundleStyles.liveWarningDesc}>
+                    {t('bundle.liveAnalysisUnavailableSub')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>)}
+
           {/* Development Bundle Split-Up (derived from the real running bundle) */}
           {analysis && (<react_native_1.View style={bundleStyles.sectionCard}>
               <react_native_1.View style={bundleStyles.sectionHeaderRow}>
@@ -707,28 +795,32 @@ const BundleTab = react_1.default.memo(() => {
 
               {[
                     {
+                        iconType: 'source',
                         label: t('bundle.splitAppSource'),
                         color: AppColors_1.AppColors.sky500,
                         ...analysis.splitUp.appSource,
                     },
                     {
+                        iconType: 'deps',
                         label: t('bundle.splitNodeModules'),
                         color: AppColors_1.AppColors.indigo500,
                         ...analysis.splitUp.nodeModules,
                     },
                     {
+                        iconType: 'media',
                         label: t('bundle.splitAssetsMedia'),
                         color: AppColors_1.AppColors.pink500,
                         ...analysis.splitUp.assetsMedia,
                     },
                     {
+                        iconType: 'overhead',
                         label: t('bundle.splitMetroOverhead'),
                         color: AppColors_1.AppColors.amber500,
                         ...analysis.splitUp.metroDevOverhead,
                     },
                 ].map((part, idx) => (<react_native_1.View key={idx} style={bundleStyles.catRowCard}>
                   <react_native_1.View style={bundleStyles.catRowTop}>
-                    <react_native_1.Text style={bundleStyles.catRowIcon}>{['📦', '🧩', '🖼️', '⚙️'][idx]}</react_native_1.Text>
+                    <BundleCategoryIcon type={part.iconType} size={18} color={part.color}/>
                     <react_native_1.View style={{ flex: 1 }}>
                       <react_native_1.Text style={bundleStyles.catRowTitle}>{part.label}</react_native_1.Text>
                       <react_native_1.Text style={bundleStyles.catRowDesc}>
@@ -805,7 +897,7 @@ const BundleTab = react_1.default.memo(() => {
             {/* Legend Grid */}
             <react_native_1.View style={bundleStyles.legendGrid}>
               <react_native_1.View style={bundleStyles.legendItem}>
-                <react_native_1.View style={[bundleStyles.legendDot, { backgroundColor: AppColors_1.AppColors.pink500 }]}/>
+                <BundleCategoryIcon type="image" size={13} color={AppColors_1.AppColors.pink500}/>
                 <react_native_1.Text style={bundleStyles.legendText}>
                   {t('bundle.legendImages')}{' '}
                   <react_native_1.Text style={bundleStyles.legendVal}>
@@ -814,7 +906,7 @@ const BundleTab = react_1.default.memo(() => {
                 </react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={bundleStyles.legendItem}>
-                <react_native_1.View style={[bundleStyles.legendDot, { backgroundColor: AppColors_1.AppColors.sky500 }]}/>
+                <BundleCategoryIcon type="typescript" size={13} color={AppColors_1.AppColors.sky500}/>
                 <react_native_1.Text style={bundleStyles.legendText}>
                   {t('bundle.legendTs')}{' '}
                   <react_native_1.Text style={bundleStyles.legendVal}>
@@ -823,7 +915,7 @@ const BundleTab = react_1.default.memo(() => {
                 </react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={bundleStyles.legendItem}>
-                <react_native_1.View style={[bundleStyles.legendDot, { backgroundColor: AppColors_1.AppColors.indigo500 }]}/>
+                <BundleCategoryIcon type="javascript" size={13} color={AppColors_1.AppColors.indigo500}/>
                 <react_native_1.Text style={bundleStyles.legendText}>
                   {t('bundle.legendJs')}{' '}
                   <react_native_1.Text style={bundleStyles.legendVal}>
@@ -832,7 +924,7 @@ const BundleTab = react_1.default.memo(() => {
                 </react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={bundleStyles.legendItem}>
-                <react_native_1.View style={[bundleStyles.legendDot, { backgroundColor: AppColors_1.AppColors.purple500 }]}/>
+                <BundleCategoryIcon type="font" size={13} color={AppColors_1.AppColors.purple500}/>
                 <react_native_1.Text style={bundleStyles.legendText}>
                   {t('bundle.legendFonts')}{' '}
                   <react_native_1.Text style={bundleStyles.legendVal}>
@@ -841,7 +933,7 @@ const BundleTab = react_1.default.memo(() => {
                 </react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={bundleStyles.legendItem}>
-                <react_native_1.View style={[bundleStyles.legendDot, { backgroundColor: AppColors_1.AppColors.emerald500 }]}/>
+                <BundleCategoryIcon type="json" size={13} color={AppColors_1.AppColors.emerald500}/>
                 <react_native_1.Text style={bundleStyles.legendText}>
                   {t('bundle.legendJson')}{' '}
                   <react_native_1.Text style={bundleStyles.legendVal}>
@@ -871,7 +963,7 @@ const BundleTab = react_1.default.memo(() => {
             
             {[
                 {
-                    icon: '🖼️',
+                    iconType: 'image',
                     title: t('bundle.catImagesTitle'),
                     count: summary.images.count,
                     size: t('bundle.fileSizeKb', { size: summary.images.kb }),
@@ -880,7 +972,7 @@ const BundleTab = react_1.default.memo(() => {
                     desc: t('bundle.catImagesDesc'),
                 },
                 {
-                    icon: '⚙️',
+                    iconType: 'javascript',
                     title: t('bundle.catJsTitle'),
                     count: summary.js.count,
                     size: t('bundle.fileSizeKb', { size: summary.js.kb }),
@@ -889,7 +981,7 @@ const BundleTab = react_1.default.memo(() => {
                     desc: t('bundle.catJsDesc'),
                 },
                 {
-                    icon: '🔤',
+                    iconType: 'font',
                     title: t('bundle.catFontsTitle'),
                     count: summary.fonts.count,
                     size: t('bundle.fileSizeKb', { size: summary.fonts.kb }),
@@ -901,7 +993,7 @@ const BundleTab = react_1.default.memo(() => {
                         .join(', ') || t('bundle.catFontsDesc'),
                 },
                 {
-                    icon: '📜',
+                    iconType: 'typescript',
                     title: t('bundle.catTsTitle'),
                     count: summary.ts.count,
                     size: t('bundle.fileSizeKb', { size: summary.ts.kb }),
@@ -910,7 +1002,7 @@ const BundleTab = react_1.default.memo(() => {
                     desc: t('bundle.catTsDesc'),
                 },
                 {
-                    icon: '📄',
+                    iconType: 'json',
                     title: t('bundle.catJsonTitle'),
                     count: summary.json.count,
                     size: t('bundle.fileSizeKb', { size: summary.json.kb }),
@@ -920,7 +1012,7 @@ const BundleTab = react_1.default.memo(() => {
                 },
             ].map((cat, cIdx) => (<react_native_1.View key={cIdx} style={bundleStyles.catRowCard}>
                 <react_native_1.View style={bundleStyles.catRowTop}>
-                  <react_native_1.Text style={bundleStyles.catRowIcon}>{cat.icon}</react_native_1.Text>
+                  <BundleCategoryIcon type={cat.iconType} size={18} color={cat.color}/>
                   <react_native_1.View style={{ flex: 1 }}>
                     <react_native_1.Text style={bundleStyles.catRowTitle}>{cat.title}</react_native_1.Text>
                     <react_native_1.Text style={bundleStyles.catRowDesc}>
@@ -1000,7 +1092,7 @@ const BundleTab = react_1.default.memo(() => {
                         tab.key === 'UNUSED' && isActive && { backgroundColor: AppColors_1.AppColors.red500, borderColor: AppColors_1.AppColors.red600 },
                         tab.key === 'CONSUMED' && isActive && { backgroundColor: AppColors_1.AppColors.emerald600, borderColor: AppColors_1.AppColors.emerald700 },
                     ]}>
-                    <react_native_1.Text style={bundleStyles.catPillIcon}>{tab.icon}</react_native_1.Text>
+                    <BundleCategoryIcon type={tab.iconType} size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong}/>
                     <react_native_1.Text style={[
                         bundleStyles.catPillText,
                         isActive && bundleStyles.catPillTextActive,
@@ -1118,15 +1210,17 @@ const BundleTab = react_1.default.memo(() => {
                             file.status === 'optimal' && bundleStyles.adviceOptimal,
                             isUnused && bundleStyles.adviceUnused,
                         ]}>
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
+                          {isUnused ? (<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.red600} size={12}/>) : file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
                           <react_native_1.Text style={[
                             bundleStyles.adviceText,
                             file.status === 'warning' && { color: AppColors_1.AppColors.amber800Warm },
                             file.status === 'optimal' && { color: AppColors_1.AppColors.emerald700 },
                             isUnused && { color: AppColors_1.AppColors.red600 },
                         ]}>
-                            {isUnused ? '🗑️ ' : file.status === 'warning' ? '💡 ' : '✨ '}
                             {file.advice}
                           </react_native_1.Text>
+                        </react_native_1.View>
                         </react_native_1.View>)}
                     </react_native_1.View>
                   </react_native_1.View>);
@@ -1243,9 +1337,12 @@ const BundleTab = react_1.default.memo(() => {
 
                   {/* Deprecation Warning Banner if deprecated */}
                   {pkg.isDeprecated && pkg.deprecationReason && (<react_native_1.View style={bundleStyles.deprecationBox}>
-                      <react_native_1.Text style={bundleStyles.deprecationText}>
-                        ⚠️ {pkg.deprecationReason}
-                      </react_native_1.Text>
+                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                        <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.errorColor} size={12}/>
+                        <react_native_1.Text style={bundleStyles.deprecationText}>
+                          {pkg.deprecationReason}
+                        </react_native_1.Text>
+                      </react_native_1.View>
                     </react_native_1.View>)}
 
                   <react_native_1.View style={bundleStyles.fileProgressTrack}>
@@ -1263,9 +1360,12 @@ const BundleTab = react_1.default.memo(() => {
                           {pkg.type === 'direct' ? t('bundle.direct') : t('bundle.transitive')}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      {pkg.lastActive && (<react_native_1.Text style={bundleStyles.lastActiveText}>
-                          🕒 {pkg.lastActive}
-                        </react_native_1.Text>)}
+                      {pkg.lastActive && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                          <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>
+                          <react_native_1.Text style={bundleStyles.lastActiveText}>
+                            {pkg.lastActive}
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
                     </react_native_1.View>
 
                     <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
@@ -1362,14 +1462,16 @@ const BundleTab = react_1.default.memo(() => {
                         file.status === 'warning' && bundleStyles.adviceWarning,
                         file.status === 'optimal' && bundleStyles.adviceOptimal,
                     ]}>
-                      <react_native_1.Text style={[
+                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
+                        {file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
+                        <react_native_1.Text style={[
                         bundleStyles.adviceText,
                         file.status === 'warning' && { color: AppColors_1.AppColors.amber800Warm },
                         file.status === 'optimal' && { color: AppColors_1.AppColors.emerald700 },
                     ]}>
-                        {file.status === 'warning' ? '💡 ' : '✨ '}
-                        {file.advice}
-                      </react_native_1.Text>
+                          {file.advice}
+                        </react_native_1.Text>
+                      </react_native_1.View>
                     </react_native_1.View>)}
                 </react_native_1.View>
               </react_native_1.View>))}
@@ -1414,12 +1516,16 @@ const BundleTab = react_1.default.memo(() => {
 
             {[
                 {
+                    iconType: 'image',
+                    iconColor: AppColors_1.AppColors.pink500,
                     title: t('bundle.optTip1Title'),
                     desc: t('bundle.optTip1Desc'),
                     badge: t('bundle.highImpact'),
                     badgeColor: AppColors_1.AppColors.pink500,
                 },
                 {
+                    iconType: 'bolt',
+                    iconColor: isHermes ? AppColors_1.AppColors.emerald500 : AppColors_1.AppColors.amber500,
                     title: t('bundle.optTip2Title'),
                     desc: isHermes
                         ? t('bundle.optTip2DescActive')
@@ -1428,18 +1534,24 @@ const BundleTab = react_1.default.memo(() => {
                     badgeColor: isHermes ? AppColors_1.AppColors.emerald500 : AppColors_1.AppColors.amber500,
                 },
                 {
+                    iconType: 'font',
+                    iconColor: AppColors_1.AppColors.purple500,
                     title: t('bundle.optTip3Title'),
                     desc: t('bundle.optTip3Desc'),
                     badge: t('bundle.mediumImpact'),
                     badgeColor: AppColors_1.AppColors.purple500,
                 },
                 {
+                    iconType: 'source',
+                    iconColor: AppColors_1.AppColors.sky500,
                     title: t('bundle.optTip4Title'),
                     desc: t('bundle.optTip4Desc'),
                     badge: t('bundle.bestPractice'),
                     badgeColor: AppColors_1.AppColors.sky500,
                 },
                 {
+                    iconType: 'overhead',
+                    iconColor: AppColors_1.AppColors.indigo500,
                     title: t('bundle.optTip5Title'),
                     desc: t('bundle.optTip5Desc'),
                     badge: t('bundle.bestPractice'),
@@ -1451,6 +1563,7 @@ const BundleTab = react_1.default.memo(() => {
                     <react_native_1.View style={bundleStyles.sNoBadge}>
                       <react_native_1.Text style={bundleStyles.sNoText}>#{tIdx + 1}</react_native_1.Text>
                     </react_native_1.View>
+                    <BundleCategoryIcon type={tip.iconType} size={14} color={tip.iconColor}/>
                     <react_native_1.Text style={bundleStyles.tipTitle}>{tip.title}</react_native_1.Text>
                   </react_native_1.View>
                   <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -1650,11 +1763,6 @@ const bundleStyles = react_native_1.StyleSheet.create({
         gap: 5,
         minWidth: '45%',
     },
-    legendDot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-    },
     legendText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 11,
@@ -1678,9 +1786,6 @@ const bundleStyles = react_native_1.StyleSheet.create({
         gap: 8,
         marginBottom: 8,
     },
-    catRowIcon: {
-        fontSize: 16,
-    },
     catRowTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 12,
@@ -1756,9 +1861,6 @@ const bundleStyles = react_native_1.StyleSheet.create({
         backgroundColor: AppColors_1.AppColors.brandPurple,
         borderColor: AppColors_1.AppColors.brandPurple,
     },
-    catPillIcon: {
-        fontSize: 11,
-    },
     catPillText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 11,
@@ -2146,6 +2248,28 @@ const bundleStyles = react_native_1.StyleSheet.create({
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.errorBorder,
     },
+    liveWarningCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.amber100,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.amber200,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 12,
+    },
+    liveWarningTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.amber800Warm,
+        marginBottom: 2,
+    },
+    liveWarningDesc: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10.5,
+        lineHeight: 14,
+        color: AppColors_1.AppColors.amber800Warm,
+    },
     adviceBadge: {
         paddingHorizontal: 8,
         paddingVertical: 4,

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

@@ -306,14 +306,17 @@ const LogDetail = react_1.default.memo(() => {
                     paddingVertical: 2,
                 },
             ]}>
-                  <react_native_1.Text style={[
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                    <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
+                    <react_native_1.Text style={[
                 styles_1.default.metaChipText,
                 { color: AppColors_1.AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts_1.AppFonts.interBold },
             ]}>
-                    📄 {originFrame.fileName}
-                    {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
-                    {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
-                  </react_native_1.Text>
+                      {originFrame.fileName}
+                      {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
+                      {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
+                    </react_native_1.Text>
+                  </react_native_1.View>
                 </react_native_1.View>)}
             </react_native_1.View>
 
@@ -749,6 +752,8 @@ const LogDetail = react_1.default.memo(() => {
                                 {frame.fileExt.toUpperCase()}
                               </react_native_1.Text>
                             </react_native_1.View>)}
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                          <NetworkIcons_1.DocIcon color={isTopFrame ? AppColors_1.AppColors.brandPurple : AppColors_1.AppColors.grayTextWeak} size={10}/>
                           <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interMedium,
                             fontSize: 10.5,
@@ -756,9 +761,10 @@ const LogDetail = react_1.default.memo(() => {
                                 ? AppColors_1.AppColors.brandPurple
                                 : AppColors_1.AppColors.grayTextWeak,
                         }}>
-                            📄 {frame.fileName}
+                            {frame.fileName}
                           </react_native_1.Text>
                         </react_native_1.View>
+                        </react_native_1.View>
 
                         {/* Full path */}
                         {frame.fullPath && frame.fullPath !== frame.fileName && (<react_native_1.Text selectable style={{