react-native-inapp-inspector 2.2.2 → 2.2.4

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

@@ -297,8 +297,9 @@ const InspectorHeader = react_1.default.memo(() => {
                     color: '#FFFFFF',
                     letterSpacing: 0.3,
                 }}>
-                          UPDATE ⚡
+                          UPDATE
                         </react_native_1.Text>
+                        <NetworkIcons_1.BoltIcon size={9} color="#FFFFFF"/>
                       </react_native_1.Pressable>)}
                   </react_native_1.View>
 
@@ -342,26 +343,23 @@ const InspectorHeader = react_1.default.memo(() => {
                     react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
                 }
             }} style={{
-                backgroundColor: '#FFFFFF',
+                flexDirection: 'row',
+                alignItems: 'center',
+                backgroundColor: `${AppColors_1.AppColors.white}1F`,
                 borderRadius: 5,
                 paddingHorizontal: 6,
                 paddingVertical: 2,
-                flexDirection: 'row',
-                alignItems: 'center',
                 gap: 4,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}2E`,
                 flexShrink: 0,
-                shadowColor: '#000000',
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.15,
-                shadowRadius: 2,
-                elevation: 2,
             }}>
-                      <NetworkIcons_1.NpmIcon size={11} color="#CB3837"/>
+                      <NetworkIcons_1.NpmIcon size={10} color="#FF6B6B"/>
                       <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontFamily: AppFonts_1.AppFonts.interMedium,
                 fontSize: 9.5,
-                color: '#CB3837',
-                letterSpacing: 0.2,
+                color: `${AppColors_1.AppColors.white}EB`,
+                letterSpacing: 0.1,
             }} numberOfLines={1}>
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>
@@ -370,7 +368,7 @@ const InspectorHeader = react_1.default.memo(() => {
                     fontSize: 9,
                     color: '#F59E0B',
                 }}>
-                          ↑
+                          ●
                         </react_native_1.Text>)}
                     </react_native_1.Pressable>
 

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

@@ -894,14 +894,17 @@ const LogDetail = react_1.default.memo(() => {
                             paddingVertical: 4.5,
                             gap: 6,
                         }}>
-                          <react_native_1.Text selectable style={{
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1 }}>
+                            <NetworkIcons_1.FolderIcon size={12} color={AppColors_1.AppColors.grayTextWeak}/>
+                            <react_native_1.Text selectable style={{
                             fontFamily: AppFonts_1.AppFonts.interRegular,
                             fontSize: 9.5,
                             color: AppColors_1.AppColors.grayTextStrong,
                             flex: 1,
                         }} numberOfLines={1}>
-                            📂 {frame.fullPath}
-                          </react_native_1.Text>
+                              {frame.fullPath}
+                            </react_native_1.Text>
+                          </react_native_1.View>
 
                           <react_native_1.View style={{
                             backgroundColor: frameBadgeBg,

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

@@ -55,6 +55,8 @@ const BundleTab_1 = __importDefault(require("./BundleTab"));
 const PerformanceTab_1 = __importDefault(require("./PerformanceTab"));
 const CrashTab_1 = __importDefault(require("./CrashTab"));
 const CrashDetail_1 = __importDefault(require("./CrashDetail"));
+const DeviceInfoTab_1 = __importDefault(require("./DeviceInfoTab"));
+const StorageTab_1 = __importDefault(require("./StorageTab"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const TelemetryConsentModal_1 = __importDefault(require("./TelemetryConsentModal"));
 const NpmUpdateToast_1 = __importDefault(require("./NpmUpdateToast"));
@@ -154,6 +156,8 @@ const MainScreen = () => {
                       {activeTab === 'bundle' && <BundleTab_1.default />}
                       {activeTab === 'performance' && <PerformanceTab_1.default />}
                       {activeTab === 'crash' && <CrashTab_1.default />}
+                      {activeTab === 'device' && <DeviceInfoTab_1.default />}
+                      {activeTab === 'storage' && <StorageTab_1.default />}
                     </react_native_1.Animated.View>
 
                     {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}
@@ -210,14 +214,14 @@ const MainScreen = () => {
 
               {/* NPM Version Update Toast with timeout progress bar */}
               <NpmUpdateToast_1.default />
+
+              {/* Anonymous Telemetry Consent Dialog shown ONLY when inspector is active */}
+              <TelemetryConsentModal_1.default />
             </react_native_1.View>
           </react_native_1.View>
         </ErrorBoundary_1.default>)}
       {hasNavigationContext && (<NavigationTracker_1.default onStateChange={setNavState}/>)}
     </react_native_1.Modal>
-
-    {/* Anonymous Telemetry Consent Dialog at root viewport */}
-    <TelemetryConsentModal_1.default />
     </>);
 };
 exports.default = MainScreen;

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

@@ -220,23 +220,83 @@ const NetworkTab = react_1.default.memo(() => {
         },
     ], [quickCounts]);
     const SEARCH_SCOPES = [
-        { id: 'all', label: 'All' },
-        { id: 'url', label: 'URL / Path' },
-        { id: 'reqBody', label: 'Payload' },
-        { id: 'resBody', label: 'Response' },
-        { id: 'headers', label: 'Headers' },
+        {
+            id: 'all',
+            label: 'All',
+            icon: color => <NetworkIcons_1.LayersIcon size={9.5} color={color}/>,
+        },
+        {
+            id: 'url',
+            label: 'URL / Path',
+            icon: color => <NetworkIcons_1.GlobeIcon size={9.5} color={color}/>,
+        },
+        {
+            id: 'reqBody',
+            label: 'Payload',
+            icon: color => <NetworkIcons_1.RequestIcon size={9.5} color={color}/>,
+        },
+        {
+            id: 'resBody',
+            label: 'Response',
+            icon: color => <NetworkIcons_1.ResponseIcon size={9.5} color={color}/>,
+        },
+        {
+            id: 'headers',
+            label: 'Headers',
+            icon: color => <NetworkIcons_1.HeadersIcon size={9.5} color={color}/>,
+        },
     ];
     const QUICK_API_QUERY_TAGS = (0, react_1.useMemo)(() => [
-        { label: '⚠️ Failed', query: 'is:error' },
-        { label: '🐢 Slow >1s', query: 'slow:>1s' },
-        { label: 'POST', query: 'm:POST' },
-        { label: 'GET', query: 'm:GET' },
-        { label: 'GraphQL', query: 'is:graphql' },
-        { label: 'Axios', query: 'client:axios' },
-        { label: '200 OK', query: 'status:200' },
-        { label: '404', query: 'status:404' },
-        { label: '500', query: 'status:500' },
-        { label: '🔒 HTTPS', query: 'is:https' },
+        {
+            label: 'Failed',
+            query: 'is:error',
+            icon: (color) => <NetworkIcons_1.CircleXIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'Slow (>1s)',
+            query: 'slow:>1s',
+            icon: (color) => <NetworkIcons_1.ClockIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'POST',
+            query: 'm:POST',
+            icon: (color) => <NetworkIcons_1.RequestIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'GET',
+            query: 'm:GET',
+            icon: (color) => <NetworkIcons_1.ResponseIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'GraphQL',
+            query: 'is:graphql',
+            icon: (color) => <NetworkIcons_1.AtomIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'Axios',
+            query: 'client:axios',
+            icon: (color) => <NetworkIcons_1.BoltIcon size={9.5} color={color}/>,
+        },
+        {
+            label: '200 OK',
+            query: 'status:200',
+            icon: (color) => <NetworkIcons_1.CircleCheckIcon size={9.5} color={color}/>,
+        },
+        {
+            label: '404',
+            query: 'status:404',
+            icon: (color) => <NetworkIcons_1.CircleAlertIcon size={9.5} color={color}/>,
+        },
+        {
+            label: '500',
+            query: 'status:500',
+            icon: (color) => <NetworkIcons_1.CircleXIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'HTTPS',
+            query: 'is:https',
+            icon: (color) => <NetworkIcons_1.ShieldAlertIcon size={9.5} color={color}/>,
+        },
     ], []);
     const networkMetrics = (0, react_1.useMemo)(() => {
         if (!logs || logs.length === 0)
@@ -519,6 +579,7 @@ const NetworkTab = react_1.default.memo(() => {
                 {QUICK_CHIPS.map(chip => {
                 const isActive = quickFilter === chip.id;
                 const chipColor = chip.color || AppColors_1.AppColors.purple;
+                const iconColor = isActive ? AppColors_1.AppColors.white : chipColor;
                 return (<TouchableScale_1.default key={chip.id} onPress={() => {
                         setQuickFilter(isActive ? 'all' : chip.id);
                     }}>
@@ -537,6 +598,13 @@ const NetworkTab = react_1.default.memo(() => {
                             : `${chipColor}30`,
                         gap: 5,
                     }}>
+                        {chip.id === 'all' && <NetworkIcons_1.LayersIcon size={11} color={iconColor}/>}
+                        {chip.id === 'errors' && <NetworkIcons_1.CircleXIcon size={11} color={iconColor}/>}
+                        {chip.id === 'success' && <NetworkIcons_1.CircleCheckIcon size={11} color={iconColor}/>}
+                        {chip.id === 'slow' && <NetworkIcons_1.ClockIcon size={11} color={iconColor}/>}
+                        {chip.id === 'POST' && <NetworkIcons_1.RequestIcon size={11} color={iconColor}/>}
+                        {chip.id === 'GET' && <NetworkIcons_1.ResponseIcon size={11} color={iconColor}/>}
+                        {chip.id === 'graphql' && <NetworkIcons_1.AtomIcon size={11} color={iconColor}/>}
                         <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 10.5,
@@ -592,8 +660,12 @@ const NetworkTab = react_1.default.memo(() => {
                 }}>
                   {SEARCH_SCOPES.map(s => {
                     const isSelected = searchScope === s.id;
+                    const iconColor = isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText;
                     return (<TouchableScale_1.default key={s.id} onPress={() => setSearchScope(s.id)}>
                         <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
                             paddingHorizontal: 7,
                             paddingVertical: 2.5,
                             borderRadius: 5,
@@ -605,6 +677,7 @@ const NetworkTab = react_1.default.memo(() => {
                                 ? AppColors_1.AppColors.purple
                                 : AppColors_1.AppColors.grayBorderSecondary,
                         }}>
+                          {s.icon(iconColor)}
                           <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 9.5,
@@ -638,6 +711,9 @@ const NetworkTab = react_1.default.memo(() => {
                             }
                         }}>
                       <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
                             paddingHorizontal: 7,
                             paddingVertical: 2.5,
                             borderRadius: 5,
@@ -649,6 +725,7 @@ const NetworkTab = react_1.default.memo(() => {
                                 ? AppColors_1.AppColors.purple
                                 : `${AppColors_1.AppColors.purple}30`,
                         }}>
+                        {item.icon(isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple)}
                         <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 9.5,

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

@@ -411,18 +411,45 @@ const PerformanceTab = react_1.default.memo(() => {
       <react_native_1.View style={perfStyles.categoryScrollWrapper}>
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>
           {[
-            { key: 'ALL', label: t('performance.catAll') },
-            { key: 'JANKY', label: t('performance.catJanky') },
-            { key: 'NAVIGATION', label: t('performance.catNavigation') },
-            { key: 'RENDER', label: t('performance.catRender') },
-            { key: 'MEMORY', label: t('performance.catMemory') },
-            { key: 'IO', label: t('performance.catIo') },
+            {
+                key: 'ALL',
+                label: t('performance.catAll'),
+                icon: (color) => <NetworkIcons_1.PerformanceIcon size={12} color={color}/>,
+            },
+            {
+                key: 'JANKY',
+                label: t('performance.catJanky'),
+                icon: (color) => <NetworkIcons_1.CircleAlertIcon size={12} color={color}/>,
+            },
+            {
+                key: 'NAVIGATION',
+                label: t('performance.catNavigation'),
+                icon: (color) => <NetworkIcons_1.MapIcon size={12} color={color}/>,
+            },
+            {
+                key: 'RENDER',
+                label: t('performance.catRender'),
+                icon: (color) => <NetworkIcons_1.AtomIcon size={12} color={color}/>,
+            },
+            {
+                key: 'MEMORY',
+                label: t('performance.catMemory'),
+                icon: (color) => <NetworkIcons_1.BrainIcon size={12} color={color}/>,
+            },
+            {
+                key: 'IO',
+                label: t('performance.catIo'),
+                icon: (color) => <NetworkIcons_1.GlobeIcon size={12} color={color}/>,
+            },
         ].map(cat => {
             const isSelected = filterCategory === cat.key;
+            const iconColor = isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak;
             return (<TouchableScale_1.default key={cat.key} onPress={() => setFilterCategory(cat.key)} style={[
                     perfStyles.categoryChip,
                     isSelected && perfStyles.categoryChipActive,
+                    { flexDirection: 'row', alignItems: 'center', gap: 5 },
                 ]}>
+                {cat.icon(iconColor)}
                 <react_native_1.Text style={[
                     perfStyles.categoryChipText,
                     isSelected && perfStyles.categoryChipTextActive,
@@ -844,12 +871,13 @@ const PerformanceTab = react_1.default.memo(() => {
                     </react_native_1.View>
 
                     {/* Bottleneck Thread Tag */}
-                    {event.bottleneckThread && (<react_native_1.View style={perfStyles.bottleneckTag}>
+                    {event.bottleneckThread && (<react_native_1.View style={[perfStyles.bottleneckTag, { flexDirection: 'row', alignItems: 'center', gap: 3 }]}>
+                        {event.bottleneckThread === 'JS Thread' && (<NetworkIcons_1.BoltIcon size={10} color={AppColors_1.AppColors.warningIconGold}/>)}
                         <react_native_1.Text style={perfStyles.bottleneckTagText}>
                           {event.bottleneckThread === 'JS Thread'
-                        ? `⚡ ${t('performance.jsBound')}`
+                        ? t('performance.jsBound')
                         : event.bottleneckThread === 'UI Thread'
-                            ? `🎨 ${t('performance.uiBound')}`
+                            ? t('performance.uiBound')
                             : t('performance.balanced')}
                         </react_native_1.Text>
                       </react_native_1.View>)}
@@ -857,9 +885,7 @@ const PerformanceTab = react_1.default.memo(() => {
 
                   <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                     <CopyButton_1.default value={() => event} label={t('common.copyJson')}/>
-                    <react_native_1.Text style={perfStyles.expandChevron}>
-                      {isExpanded ? '▲' : '▼'}
-                    </react_native_1.Text>
+                    <NetworkIcons_1.ChevronIcon isExpanded={isExpanded} size={14} color={AppColors_1.AppColors.grayTextWeak}/>
                   </react_native_1.View>
                 </react_native_1.View>