react-native-inapp-inspector 2.2.3 → 2.2.4

package/src/components/Inspector/InspectorHeader.tsx

@@ -32,6 +32,7 @@ import {
   AndroidIcon,
   NpmIcon,
   ResetIcon,
+  BoltIcon,
 } from '../NetworkIcons';
 
 const InspectorHeader = React.memo(() => {
@@ -363,8 +364,9 @@ const InspectorHeader = React.memo(() => {
                             color: '#FFFFFF',
                             letterSpacing: 0.3,
                           }}>
-                          UPDATE ⚡
+                          UPDATE
                         </Text>
+                        <BoltIcon size={9} color="#FFFFFF" />
                       </Pressable>
                     )}
                   </View>
@@ -420,27 +422,24 @@ const InspectorHeader = React.memo(() => {
                         }
                       }}
                       style={{
-                        backgroundColor: '#FFFFFF',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        backgroundColor: `${AppColors.white}1F`,
                         borderRadius: 5,
                         paddingHorizontal: 6,
                         paddingVertical: 2,
-                        flexDirection: 'row',
-                        alignItems: 'center',
                         gap: 4,
+                        borderWidth: 1,
+                        borderColor: `${AppColors.white}2E`,
                         flexShrink: 0,
-                        shadowColor: '#000000',
-                        shadowOffset: {width: 0, height: 1},
-                        shadowOpacity: 0.15,
-                        shadowRadius: 2,
-                        elevation: 2,
                       }}>
-                      <NpmIcon size={11} color="#CB3837" />
+                      <NpmIcon size={10} color="#FF6B6B" />
                       <Text
                         style={{
-                          fontFamily: AppFonts.interBold,
+                          fontFamily: AppFonts.interMedium,
                           fontSize: 9.5,
-                          color: '#CB3837',
-                          letterSpacing: 0.2,
+                          color: `${AppColors.white}EB`,
+                          letterSpacing: 0.1,
                         }}
                         numberOfLines={1}>
                         v{LIB_VERSION}
@@ -452,7 +451,7 @@ const InspectorHeader = React.memo(() => {
                             fontSize: 9,
                             color: '#F59E0B',
                           }}>
-                          ↑
+                          ●
                         </Text>
                       )}
                     </Pressable>

package/src/components/Inspector/LogDetail.tsx

@@ -26,6 +26,7 @@ import {
   InfoCircleIcon,
   DocIcon,
   ExternalLinkIcon,
+  FolderIcon,
 } from '../NetworkIcons';
 import {AppColors} from '../../styles/AppColors';
 import {AppFonts} from '../../styles/AppFonts';
@@ -1156,17 +1157,20 @@ const LogDetail = React.memo(() => {
                             paddingVertical: 4.5,
                             gap: 6,
                           }}>
-                          <Text
-                            selectable
-                            style={{
-                              fontFamily: AppFonts.interRegular,
-                              fontSize: 9.5,
-                              color: AppColors.grayTextStrong,
-                              flex: 1,
-                            }}
-                            numberOfLines={1}>
-                            📂 {frame.fullPath}
-                          </Text>
+                          <View style={{flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1}}>
+                            <FolderIcon size={12} color={AppColors.grayTextWeak} />
+                            <Text
+                              selectable
+                              style={{
+                                fontFamily: AppFonts.interRegular,
+                                fontSize: 9.5,
+                                color: AppColors.grayTextStrong,
+                                flex: 1,
+                              }}
+                              numberOfLines={1}>
+                              {frame.fullPath}
+                            </Text>
+                          </View>
 
                           <View
                             style={{

package/src/components/Inspector/MainScreen.tsx

@@ -27,6 +27,8 @@ import BundleTab from './BundleTab';
 import PerformanceTab from './PerformanceTab';
 import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
+import DeviceInfoTab from './DeviceInfoTab';
+import StorageTab from './StorageTab';
 import SettingsPanel from './SettingsPanel';
 import TelemetryConsentModal from './TelemetryConsentModal';
 import NpmUpdateToast from './NpmUpdateToast';
@@ -167,6 +169,8 @@ const MainScreen = () => {
                       {activeTab === 'bundle' && <BundleTab />}
                       {activeTab === 'performance' && <PerformanceTab />}
                       {activeTab === 'crash' && <CrashTab />}
+                      {activeTab === 'device' && <DeviceInfoTab />}
+                      {activeTab === 'storage' && <StorageTab />}
                     </Animated.View>
 
                     {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}
@@ -240,6 +244,9 @@ const MainScreen = () => {
 
               {/* NPM Version Update Toast with timeout progress bar */}
               <NpmUpdateToast />
+
+              {/* Anonymous Telemetry Consent Dialog shown ONLY when inspector is active */}
+              <TelemetryConsentModal />
             </View>
           </View>
         </ErrorBoundary>
@@ -248,9 +255,6 @@ const MainScreen = () => {
         <NavigationTracker onStateChange={setNavState} />
       )}
     </Modal>
-
-    {/* Anonymous Telemetry Consent Dialog at root viewport */}
-    <TelemetryConsentModal />
     </>
   );
 };

package/src/components/Inspector/NetworkTab.tsx

@@ -36,6 +36,13 @@ import {
   LayersIcon,
   HeaderPauseIcon,
   ClockIcon,
+  GlobeIcon,
+  RequestIcon,
+  ResponseIcon,
+  HeadersIcon,
+  AtomIcon,
+  BoltIcon,
+  ShieldAlertIcon,
 } from '../NetworkIcons';
 
 const STATUS_META: Record<
@@ -277,26 +284,90 @@ const NetworkTab = React.memo(() => {
     [quickCounts],
   );
 
-  const SEARCH_SCOPES: Array<{id: SearchScope; label: string}> = [
-    {id: 'all', label: 'All'},
-    {id: 'url', label: 'URL / Path'},
-    {id: 'reqBody', label: 'Payload'},
-    {id: 'resBody', label: 'Response'},
-    {id: 'headers', label: 'Headers'},
+  const SEARCH_SCOPES: Array<{
+    id: SearchScope;
+    label: string;
+    icon: (color: string) => React.JSX.Element;
+  }> = [
+    {
+      id: 'all',
+      label: 'All',
+      icon: color => <LayersIcon size={9.5} color={color} />,
+    },
+    {
+      id: 'url',
+      label: 'URL / Path',
+      icon: color => <GlobeIcon size={9.5} color={color} />,
+    },
+    {
+      id: 'reqBody',
+      label: 'Payload',
+      icon: color => <RequestIcon size={9.5} color={color} />,
+    },
+    {
+      id: 'resBody',
+      label: 'Response',
+      icon: color => <ResponseIcon size={9.5} color={color} />,
+    },
+    {
+      id: 'headers',
+      label: 'Headers',
+      icon: color => <HeadersIcon size={9.5} color={color} />,
+    },
   ];
 
   const QUICK_API_QUERY_TAGS = 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: string) => <CircleXIcon size={9.5} color={color} />,
+      },
+      {
+        label: 'Slow (>1s)',
+        query: 'slow:>1s',
+        icon: (color: string) => <ClockIcon size={9.5} color={color} />,
+      },
+      {
+        label: 'POST',
+        query: 'm:POST',
+        icon: (color: string) => <RequestIcon size={9.5} color={color} />,
+      },
+      {
+        label: 'GET',
+        query: 'm:GET',
+        icon: (color: string) => <ResponseIcon size={9.5} color={color} />,
+      },
+      {
+        label: 'GraphQL',
+        query: 'is:graphql',
+        icon: (color: string) => <AtomIcon size={9.5} color={color} />,
+      },
+      {
+        label: 'Axios',
+        query: 'client:axios',
+        icon: (color: string) => <BoltIcon size={9.5} color={color} />,
+      },
+      {
+        label: '200 OK',
+        query: 'status:200',
+        icon: (color: string) => <CircleCheckIcon size={9.5} color={color} />,
+      },
+      {
+        label: '404',
+        query: 'status:404',
+        icon: (color: string) => <CircleAlertIcon size={9.5} color={color} />,
+      },
+      {
+        label: '500',
+        query: 'status:500',
+        icon: (color: string) => <CircleXIcon size={9.5} color={color} />,
+      },
+      {
+        label: 'HTTPS',
+        query: 'is:https',
+        icon: (color: string) => <ShieldAlertIcon size={9.5} color={color} />,
+      },
     ],
     [],
   );
@@ -715,6 +786,7 @@ const NetworkTab = React.memo(() => {
                 {QUICK_CHIPS.map(chip => {
                   const isActive = quickFilter === chip.id;
                   const chipColor = chip.color || AppColors.purple;
+                  const iconColor = isActive ? AppColors.white : chipColor;
                   return (
                     <TouchableScale
                       key={chip.id}
@@ -737,6 +809,13 @@ const NetworkTab = React.memo(() => {
                             : `${chipColor}30`,
                           gap: 5,
                         }}>
+                        {chip.id === 'all' && <LayersIcon size={11} color={iconColor} />}
+                        {chip.id === 'errors' && <CircleXIcon size={11} color={iconColor} />}
+                        {chip.id === 'success' && <CircleCheckIcon size={11} color={iconColor} />}
+                        {chip.id === 'slow' && <ClockIcon size={11} color={iconColor} />}
+                        {chip.id === 'POST' && <RequestIcon size={11} color={iconColor} />}
+                        {chip.id === 'GET' && <ResponseIcon size={11} color={iconColor} />}
+                        {chip.id === 'graphql' && <AtomIcon size={11} color={iconColor} />}
                         <Text
                           style={{
                             fontFamily: AppFonts.interBold,
@@ -802,12 +881,16 @@ const NetworkTab = React.memo(() => {
                   }}>
                   {SEARCH_SCOPES.map(s => {
                     const isSelected = searchScope === s.id;
+                    const iconColor = isSelected ? AppColors.white : AppColors.grayText;
                     return (
                       <TouchableScale
                         key={s.id}
                         onPress={() => setSearchScope(s.id)}>
                         <View
                           style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
                             paddingHorizontal: 7,
                             paddingVertical: 2.5,
                             borderRadius: 5,
@@ -819,6 +902,7 @@ const NetworkTab = React.memo(() => {
                               ? AppColors.purple
                               : AppColors.grayBorderSecondary,
                           }}>
+                          {s.icon(iconColor)}
                           <Text
                             style={{
                               fontFamily: AppFonts.interBold,
@@ -867,6 +951,9 @@ const NetworkTab = React.memo(() => {
                       }}>
                       <View
                         style={{
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          gap: 4,
                           paddingHorizontal: 7,
                           paddingVertical: 2.5,
                           borderRadius: 5,
@@ -878,6 +965,7 @@ const NetworkTab = React.memo(() => {
                             ? AppColors.purple
                             : `${AppColors.purple}30`,
                         }}>
+                        {item.icon(isSelected ? AppColors.white : AppColors.purple)}
                         <Text
                           style={{
                             fontFamily: AppFonts.interBold,

package/src/components/Inspector/PerformanceTab.tsx

@@ -29,6 +29,7 @@ import {getRuntimeDiagnostics} from '../../helpers';
 import {
   SearchIcon,
   CircleXIcon,
+  CircleAlertIcon,
   PerformanceIcon,
   BoltIcon,
   LightbulbIcon,
@@ -37,6 +38,7 @@ import {
   AtomIcon,
   BrainIcon,
   GlobeIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 import {
   getPerformanceEvents,
@@ -507,15 +509,40 @@ const PerformanceTab = React.memo(() => {
           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: string) => <PerformanceIcon size={12} color={color} />,
+              },
+              {
+                key: 'JANKY',
+                label: t('performance.catJanky'),
+                icon: (color: string) => <CircleAlertIcon size={12} color={color} />,
+              },
+              {
+                key: 'NAVIGATION',
+                label: t('performance.catNavigation'),
+                icon: (color: string) => <MapIcon size={12} color={color} />,
+              },
+              {
+                key: 'RENDER',
+                label: t('performance.catRender'),
+                icon: (color: string) => <AtomIcon size={12} color={color} />,
+              },
+              {
+                key: 'MEMORY',
+                label: t('performance.catMemory'),
+                icon: (color: string) => <BrainIcon size={12} color={color} />,
+              },
+              {
+                key: 'IO',
+                label: t('performance.catIo'),
+                icon: (color: string) => <GlobeIcon size={12} color={color} />,
+              },
             ] as const
           ).map(cat => {
             const isSelected = filterCategory === cat.key;
+            const iconColor = isSelected ? AppColors.white : AppColors.grayTextWeak;
             return (
               <TouchableScale
                 key={cat.key}
@@ -523,7 +550,9 @@ const PerformanceTab = React.memo(() => {
                 style={[
                   perfStyles.categoryChip,
                   isSelected && perfStyles.categoryChipActive,
+                  {flexDirection: 'row', alignItems: 'center', gap: 5},
                 ]}>
+                {cat.icon(iconColor)}
                 <Text
                   style={[
                     perfStyles.categoryChipText,
@@ -1079,12 +1108,15 @@ const PerformanceTab = React.memo(() => {
 
                     {/* Bottleneck Thread Tag */}
                     {event.bottleneckThread && (
-                      <View style={perfStyles.bottleneckTag}>
+                      <View style={[perfStyles.bottleneckTag, {flexDirection: 'row', alignItems: 'center', gap: 3}]}>
+                        {event.bottleneckThread === 'JS Thread' && (
+                          <BoltIcon size={10} color={AppColors.warningIconGold} />
+                        )}
                         <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')}
                         </Text>
                       </View>
@@ -1096,9 +1128,11 @@ const PerformanceTab = React.memo(() => {
                       value={() => event}
                       label={t('common.copyJson')}
                     />
-                    <Text style={perfStyles.expandChevron}>
-                      {isExpanded ? '▲' : '▼'}
-                    </Text>
+                    <ChevronIcon
+                      isExpanded={isExpanded}
+                      size={14}
+                      color={AppColors.grayTextWeak}
+                    />
                   </View>
                 </View>