react-native-inapp-inspector 2.2.9 → 2.3.1

package/dist/esm/components/BrandSquareIcon.js

@@ -3,72 +3,115 @@ import Svg, { Circle, Path, G, Defs, LinearGradient, RadialGradient, Stop, Rect,
 export const BrandSquareIcon = ({ size = 56 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 256 256" fill="none">
       <Defs>
+        {/* App Tile Background - Crisp Royal Deep Violet to Midnight */}
         <LinearGradient id="bs_tile" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
-          <Stop offset="0" stopColor="#1E1B4B"/>
-          <Stop offset="1" stopColor="#0F172A"/>
+          <Stop offset="0%" stopColor="#1E1B4B"/>
+          <Stop offset="50%" stopColor="#18182F"/>
+          <Stop offset="100%" stopColor="#0B0F19"/>
         </LinearGradient>
-        <LinearGradient id="bs_beam" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
-          <Stop offset="0" stopColor="#818CF8"/>
-          <Stop offset="0.5" stopColor="#A855F7"/>
-          <Stop offset="1" stopColor="#EC4899"/>
+
+        {/* Outer Neon Cyber Border */}
+        <LinearGradient id="bs_border" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
+          <Stop offset="0%" stopColor="#818CF8" stopOpacity={0.9}/>
+          <Stop offset="45%" stopColor="#C084FC" stopOpacity={0.8}/>
+          <Stop offset="80%" stopColor="#F472B6" stopOpacity={0.85}/>
+          <Stop offset="100%" stopColor="#38BDF8" stopOpacity={0.9}/>
+        </LinearGradient>
+
+        {/* Ambient Top Glow */}
+        <RadialGradient id="bs_top_glow" cx="50%" cy="15%" r="65%">
+          <Stop offset="0%" stopColor="#818CF8" stopOpacity={0.35}/>
+          <Stop offset="60%" stopColor="#A855F7" stopOpacity={0.12}/>
+          <Stop offset="100%" stopColor="#1E1B4B" stopOpacity={0}/>
+        </RadialGradient>
+
+        {/* Owl Outer Body Gradient - High Contrast */}
+        <LinearGradient id="bs_body" x1="64" y1="40" x2="192" y2="220" gradientUnits="userSpaceOnUse">
+          <Stop offset="0%" stopColor="#3730A3"/>
+          <Stop offset="50%" stopColor="#2E1065"/>
+          <Stop offset="100%" stopColor="#17123A"/>
         </LinearGradient>
-        <LinearGradient id="bs_body" x1="0" y1="0" x2="0" y2="256" gradientUnits="userSpaceOnUse">
-          <Stop offset="0" stopColor="#312E81"/>
-          <Stop offset="1" stopColor="#1E1B4B"/>
+
+        {/* Neon Cyber Beam Stroke */}
+        <LinearGradient id="bs_beam" x1="40" y1="40" x2="220" y2="220" gradientUnits="userSpaceOnUse">
+          <Stop offset="0%" stopColor="#67E8F9"/>
+          <Stop offset="35%" stopColor="#818CF8"/>
+          <Stop offset="70%" stopColor="#C084FC"/>
+          <Stop offset="100%" stopColor="#F472B6"/>
         </LinearGradient>
-        <RadialGradient id="bs_iris" cx="40%" cy="40%" r="60%">
-          <Stop offset="0" stopColor="#FDE047"/>
-          <Stop offset="0.7" stopColor="#F59E0B"/>
-          <Stop offset="1" stopColor="#D97706"/>
+
+        {/* Eyes Radiant Iris */}
+        <RadialGradient id="bs_iris" cx="38%" cy="36%" r="65%">
+          <Stop offset="0%" stopColor="#FEF08A"/>
+          <Stop offset="40%" stopColor="#FBBF24"/>
+          <Stop offset="80%" stopColor="#F59E0B"/>
+          <Stop offset="100%" stopColor="#D97706"/>
         </RadialGradient>
-        <LinearGradient id="bs_beak" x1="0" y1="0" x2="0" y2="20" gradientUnits="userSpaceOnUse">
-          <Stop offset="0" stopColor="#FBBF24"/>
-          <Stop offset="1" stopColor="#F97316"/>
+
+        {/* Beak Gradient */}
+        <LinearGradient id="bs_beak" x1="124" y1="120" x2="132" y2="136" gradientUnits="userSpaceOnUse">
+          <Stop offset="0%" stopColor="#FDE047"/>
+          <Stop offset="100%" stopColor="#EA580C"/>
         </LinearGradient>
+
+        {/* Diagnostic Lens Glass Flare */}
+        <RadialGradient id="bs_lens" cx="40%" cy="35%" r="65%">
+          <Stop offset="0%" stopColor="#A5F3FC" stopOpacity={0.4}/>
+          <Stop offset="50%" stopColor="#38BDF8" stopOpacity={0.18}/>
+          <Stop offset="100%" stopColor="#0284C7" stopOpacity={0.05}/>
+        </RadialGradient>
       </Defs>
 
-      {/* Rounded App Tile Background */}
-      <Rect x="8" y="8" width="240" height="240" rx="54" fill="url(#bs_tile)"/>
-      <Rect x="8" y="8" width="240" height="240" rx="54" fill="none" stroke="url(#bs_beam)" strokeWidth="3" strokeOpacity={0.4}/>
+      {/* ── 1. Rounded App Tile Base (Full Edge-to-Edge) ── */}
+      <Rect x="2" y="2" width="252" height="252" rx="58" fill="url(#bs_tile)"/>
+      <Rect x="2" y="2" width="252" height="252" rx="58" fill="url(#bs_top_glow)"/>
+      <Rect x="2" y="2" width="252" height="252" rx="58" fill="none" stroke="url(#bs_border)" strokeWidth="3.5"/>
+
+      {/* ── 2. Owl Outer Wings (Layered behind) ── */}
+      <Path d="M62 120 C42 152 46 194 76 210 C68 178 66 146 80 120 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="3" strokeOpacity={0.75}/>
+      <Path d="M194 120 C214 152 210 194 180 210 C188 178 190 146 176 120 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="3" strokeOpacity={0.75}/>
 
-      {/* Owl Outer Body Contour */}
-      <Path d="M64 148 C60 102 72 68 92 56 L100 40 L118 60 Q128 55 138 60 L156 40 L164 56 C184 68 196 102 192 148 C196 178 182 202 150 210 C138 214 118 214 106 210 C74 202 60 178 64 148 Z" fill="url(#bs_body)" stroke="url(#bs_beam)" strokeWidth="4" strokeLinejoin="round"/>
+      {/* ── 3. Owl Body Contour ── */}
+      <Path d="M58 146 C54 98 68 64 88 52 L98 34 L118 56 Q128 50 138 56 L158 34 L168 52 C188 64 202 98 198 146 C202 180 186 208 152 216 C140 220 116 220 104 216 C70 208 54 180 58 146 Z" fill="url(#bs_body)" stroke="url(#bs_beam)" strokeWidth="4.5" strokeLinejoin="round"/>
 
-      {/* Wings */}
-      <Path d="M74 124 C58 154 60 190 86 204 C79 176 77 148 88 126 Z" fill="#1E1B4B" stroke="#818CF8" strokeWidth="2.5" strokeOpacity={0.6}/>
-      <Path d="M182 124 C198 154 196 190 170 204 C177 176 179 148 168 126 Z" fill="#1E1B4B" stroke="#818CF8" strokeWidth="2.5" strokeOpacity={0.6}/>
+      {/* Inner Ear Highlights */}
+      <Path d="M98 42 L112 56 L102 57 Z" fill="#67E8F9" opacity={0.6}/>
+      <Path d="M158 42 L144 56 L154 57 Z" fill="#F472B6" opacity={0.6}/>
 
-      {/* Belly Screen Plate */}
-      <Rect x="105" y="160" width="46" height="34" rx="8" fill="#0B0F19" stroke="url(#bs_beam)" strokeWidth="2"/>
-      {/* Code Emblem on Chest */}
-      <G stroke="#A5B4FC" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round" fill="none">
-        <Path d="M120 171 L114 177 L120 183"/>
-        <Path d="M136 171 L142 177 L136 183"/>
-        <Path d="M130 169 L126 185" stroke="#EC4899"/>
+      {/* ── 4. Chest Terminal & Code Braces ── */}
+      <Rect x="98" y="162" width="60" height="38" rx="10" fill="#050811" stroke="url(#bs_beam)" strokeWidth="2.5"/>
+      <G strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none">
+        <Path d="M116 174 L108 181 L116 188" stroke="#38BDF8"/>
+        <Path d="M140 174 L148 181 L140 188" stroke="#38BDF8"/>
+        <Path d="M131 171 L125 191" stroke="#F43F5E"/>
       </G>
 
-      {/* Facial Disc & Mask */}
-      <Path d="M128 92 C148 70 186 78 186 108 C186 134 160 152 128 152 C96 152 70 134 70 108 C70 78 108 70 128 92 Z" fill="#2E1065" stroke="#818CF8" strokeWidth="2" strokeOpacity={0.6}/>
+      {/* ── 5. Facial Mask Plate ── */}
+      <Path d="M128 88 C152 64 192 72 192 104 C192 132 162 152 128 152 C94 152 64 132 64 104 C64 72 104 64 128 88 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="2.8"/>
+
+      {/* ── 6. Right Eye (Glowing Owl Eye) ── */}
+      <Circle cx="156" cy="106" r="19" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2.5"/>
+      <Circle cx="156" cy="106" r="9.5" fill="#0B0F19"/>
+      <Circle cx="159.5" cy="102.5" r="3.5" fill="#FFFFFF"/>
+      <Circle cx="153" cy="109.5" r="1.8" fill="#FFFFFF" opacity={0.85}/>
 
-      {/* Right Eye (Normal Cute Eye) */}
-      <Circle cx="154" cy="108" r="17" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2"/>
-      <Circle cx="154" cy="108" r="8.5" fill="#0F172A"/>
-      <Circle cx="157" cy="105" r="3" fill="#FFFFFF"/>
-      <Circle cx="151" cy="111" r="1.5" fill="#FFFFFF" opacity={0.8}/>
+      {/* ── 7. Left Eye (Diagnostic Magnifier Lens) ── */}
+      {/* Magnifier Glass Glow */}
+      <Circle cx="94" cy="104" r="30" fill="url(#bs_lens)" stroke="url(#bs_beam)" strokeWidth="6"/>
+      <Line x1="72" y1="126" x2="48" y2="152" stroke="#0B0F19" strokeWidth="13" strokeLinecap="round"/>
+      <Line x1="72" y1="126" x2="48" y2="152" stroke="url(#bs_beam)" strokeWidth="8" strokeLinecap="round"/>
 
-      {/* Left Eye (Diagnostic Magnifier Lens) */}
-      <Circle cx="96" cy="104" r="20" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2"/>
-      <Circle cx="96" cy="104" r="10" fill="#0F172A"/>
-      <Circle cx="99.5" cy="100.5" r="3.5" fill="#FFFFFF"/>
-      <Circle cx="92" cy="107" r="1.8" fill="#FFFFFF" opacity={0.8}/>
+      {/* Eye Inside Magnifier */}
+      <Circle cx="94" cy="104" r="21" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2.5"/>
+      <Circle cx="94" cy="104" r="10.5" fill="#0B0F19"/>
+      <Circle cx="98" cy="100" r="4" fill="#FFFFFF"/>
+      <Circle cx="90.5" cy="107.5" r="2" fill="#FFFFFF" opacity={0.85}/>
 
-      {/* Magnifier Glass Ring & Handle */}
-      <Line x1="76" y1="124" x2="55" y2="148" stroke="#0F172A" strokeWidth="12" strokeLinecap="round"/>
-      <Line x1="76" y1="124" x2="55" y2="148" stroke="url(#bs_beam)" strokeWidth="7" strokeLinecap="round"/>
-      <Circle cx="96" cy="104" r="28" fill="#38BDF8" fillOpacity={0.12} stroke="url(#bs_beam)" strokeWidth="6"/>
+      {/* Lens Reflection Highlight */}
+      <Path d="M74 94 A26 26 0 0 1 106 78" stroke="#FFFFFF" strokeWidth="3" strokeLinecap="round" opacity={0.65} fill="none"/>
 
-      {/* Beak */}
-      <Path d="M123.5 123 Q128 121 132.5 123 Q131 132 128 134.5 Q125 132 123.5 123 Z" fill="url(#bs_beak)"/>
+      {/* ── 8. Beak ── */}
+      <Path d="M123 120 Q128 118 133 120 Q131.5 133 128 137 Q124.5 133 123 120 Z" fill="url(#bs_beak)" stroke="#78350F" strokeWidth="1"/>
     </Svg>);
 };
 export default BrandSquareIcon;

package/dist/esm/components/EmptyState.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
-declare const EmptyState: React.NamedExoticComponent<{
+interface EmptyStateProps {
     isSearch?: boolean;
-}>;
+    searchQuery?: string;
+    customTitle?: string;
+    customSub?: string;
+    onClearSearch?: () => void;
+}
+declare const EmptyState: React.NamedExoticComponent<EmptyStateProps>;
 export default EmptyState;

package/dist/esm/components/EmptyState.js

@@ -8,7 +8,7 @@ import { EmptyRadarIcon } from './NetworkIcons';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
-const EmptyState = React.memo(function EmptyState({ isSearch }) {
+const EmptyState = React.memo(function EmptyState({ isSearch, searchQuery, customTitle, customSub, onClearSearch, }) {
     const iconPulse = useRef(new Animated.Value(1)).current;
     useEffect(() => {
         const loop = Animated.loop(Animated.sequence([
@@ -38,13 +38,19 @@ const EmptyState = React.memo(function EmptyState({ isSearch }) {
         <EmptyRadarIcon color={AppColors.purple} size={32}/>
       </Animated.View>
       <Text style={styles.emptyTitle}>
-        {isSearch ? 'No matching APIs' : 'No network activity'}
+        {customTitle || (isSearch ? 'No matching results' : 'No network activity')}
       </Text>
       <Text style={styles.emptySub}>
-        {isSearch
-            ? 'Try adjusting your filters or search.'
-            : 'Listening for incoming API calls...'}
+        {customSub ||
+            (isSearch
+                ? searchQuery
+                    ? `No items matched "${searchQuery}"`
+                    : 'Try adjusting your filters or search keywords.'
+                : 'Listening for incoming API calls...')}
       </Text>
+      {isSearch && onClearSearch && (<TouchableScale style={styles.reloadBtn} onPress={onClearSearch}>
+          <Text style={styles.reloadBtnText}>Clear Search & Filters</Text>
+        </TouchableScale>)}
       {!isSearch && (<TouchableScale style={styles.reloadBtn} onPress={handleReload}>
           <Text style={styles.reloadBtnText}>Reload App</Text>
         </TouchableScale>)}

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

@@ -4,6 +4,7 @@ import { animateNextLayout, useInspector } from './InspectorContext';
 import AnalyticsEventCard from '../AnalyticsEventCard';
 import AnalyticsFilterModal from './AnalyticsFilterModal';
 import EndOfListFooter from '../EndOfListFooter';
+import EmptyState from '../EmptyState';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
@@ -12,7 +13,7 @@ import Svg, { Path, Rect, Line, Circle, G, Defs, LinearGradient as SvgLinearGrad
 import TouchableScale from '../TouchableScale';
 import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
 import { getEventCategory, } from '../../helpers';
-import { LayersIcon, SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
+import { LayersIcon, SearchIcon, ClearIcon, TrashIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
 const AnalyticsHeader = React.memo(() => {
     const { t } = useTranslation();
     const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = useInspector();
@@ -850,9 +851,29 @@ const AnalyticsTab = React.memo(() => {
         <View style={styles.searchContainer}>
           <SearchIcon color={AppColors.grayTextWeak} size={16}/>
           <TextInput placeholder="Search events..." placeholderTextColor={AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-          {analyticsSearch.length > 0 && (<Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
-              <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-            </Pressable>)}
+          {analyticsSearch.length > 0 && (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                }}>
+              <View style={{
+                    backgroundColor: `${AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                }}>
+                <Text style={{
+                    color: AppColors.purple,
+                    fontSize: 9.5,
+                    fontFamily: AppFonts.interBold,
+                }}>
+                  {filteredAnalyticsEvents.length}
+                </Text>
+              </View>
+              <Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
+                <ClearIcon color={AppColors.grayTextWeak} size={13}/>
+              </Pressable>
+            </View>)}
         </View>
         <View style={styles.toolbarRight}>
           <TouchableOpacity style={[
@@ -907,21 +928,11 @@ const AnalyticsTab = React.memo(() => {
       <AnalyticsFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<View style={styles.emptyContainer}>
-                <View style={styles.emptyIconWrap}>
-                  <EmptyRadarIcon color={AppColors.purple} size={32}/>
-                </View>
-                <Text style={styles.emptyTitle}>
-                  {analyticsSearch.length > 0
-                    ? 'No matching events'
-                    : 'No analytics events yet'}
-                </Text>
-                <Text style={styles.emptySub}>
-                  {analyticsSearch.length > 0
-                    ? 'Try adjusting your search.'
-                    : 'Call setupAnalyticsLogger(analytics()) at app start.'}
-                </Text>
-              </View>} ListFooterComponent={filteredAnalyticsEvents.length > 0 ? (<EndOfListFooter count={filteredAnalyticsEvents.length} label="events"/>) : null} contentContainerStyle={[
+        {isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0} searchQuery={analyticsSearch} customTitle={analyticsSearch.length > 0
+                    ? 'No matching analytics events'
+                    : 'No analytics events yet'} customSub={analyticsSearch.length > 0
+                    ? `No events matched "${analyticsSearch}"`
+                    : 'Call setupAnalyticsLogger(analytics()) at app start.'} onClearSearch={() => setAnalyticsSearch('')}/>} ListFooterComponent={filteredAnalyticsEvents.length > 0 ? (<EndOfListFooter count={filteredAnalyticsEvents.length} label="events"/>) : null} contentContainerStyle={[
                 styles.listContent,
                 filteredAnalyticsEvents.length === 0 && {
                     flexGrow: 1,

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

@@ -480,7 +480,12 @@ const ConsoleTab = React.memo(() => {
         </ScrollView>
       </View>
 
-      <FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
+      <FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0} searchQuery={logSearch} customTitle={logSearch.length > 0
+                ? 'No matching console logs'
+                : 'No console logs'} onClearSearch={() => {
+                setLogSearch('');
+                setLogFilters(new Set());
+            }}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
             styles.listContent,
             filteredConsoleLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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

@@ -6,6 +6,7 @@ import TouchableScale from '../TouchableScale';
 import SegmentedTabs from '../SegmentedTabs';
 import HighlightText from '../HighlightText';
 import JsonViewer from '../JsonViewer';
+import CopyButton from '../CopyButton';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { exportCrashReport, parseCrashStackTrace, } from '../../customHooks/crashHandler';
@@ -328,9 +329,20 @@ const CrashDetail = React.memo(() => {
         {activeSubTab === 'diagnostics' && (<View style={{ gap: 12 }}>
             {/* Device & OS Diagnostics Card */}
             <View style={localStyles.sectionCard}>
-              <View style={localStyles.sectionCardHeader}>
-                <GlobeIcon color={AppColors.purple} size={14}/>
-                <Text style={localStyles.sectionCardTitle}>{t('crash.deviceEnvironment')}</Text>
+              <View style={[
+                localStyles.sectionCardHeader,
+                { justifyContent: 'space-between' },
+            ]}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <GlobeIcon color={AppColors.purple} size={14}/>
+                  <Text style={localStyles.sectionCardTitle}>
+                    {t('crash.deviceEnvironment')}
+                  </Text>
+                </View>
+                <CopyButton value={selectedCrash.deviceInfo || {
+                platform: Platform.OS,
+                osVersion: String(Platform.Version),
+            }} label="Diagnostics"/>
               </View>
 
               <View style={localStyles.diagGrid}>
@@ -380,9 +392,17 @@ const CrashDetail = React.memo(() => {
 
             {/* Memory Metrics Card */}
             {selectedCrash.memoryInfo && (<View style={localStyles.sectionCard}>
-                <View style={localStyles.sectionCardHeader}>
-                  <LayersIcon color={AppColors.purple} size={14}/>
-                  <Text style={localStyles.sectionCardTitle}>{t('crash.jsHeapMemory')}</Text>
+                <View style={[
+                    localStyles.sectionCardHeader,
+                    { justifyContent: 'space-between' },
+                ]}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                    <LayersIcon color={AppColors.purple} size={14}/>
+                    <Text style={localStyles.sectionCardTitle}>
+                      {t('crash.jsHeapMemory')}
+                    </Text>
+                  </View>
+                  <CopyButton value={selectedCrash.memoryInfo} label="Memory Info"/>
                 </View>
 
                 <View style={localStyles.diagGrid}>
@@ -405,6 +425,13 @@ const CrashDetail = React.memo(() => {
 
         {/* 3. BREADCRUMBS TAB */}
         {activeSubTab === 'breadcrumbs' && (<View style={{ gap: 10 }}>
+            {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 && (<View style={{
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                    marginBottom: 2,
+                }}>
+                <CopyButton value={selectedCrash.breadcrumbs} label="All Breadcrumbs"/>
+              </View>)}
             {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 ? (selectedCrash.breadcrumbs.map((b, idx) => (<View key={`crumb_${idx}`} style={localStyles.breadcrumbCard}>
                   <View style={localStyles.breadcrumbHeader}>
                     <View style={localStyles.breadcrumbTag}>
@@ -412,9 +439,16 @@ const CrashDetail = React.memo(() => {
                         {b.type.toUpperCase()}
                       </Text>
                     </View>
-                    <Text style={localStyles.breadcrumbTime}>
-                      {new Date(b.timestamp).toLocaleTimeString()}
-                    </Text>
+                    <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                      <Text style={localStyles.breadcrumbTime}>
+                        {new Date(b.timestamp).toLocaleTimeString()}
+                      </Text>
+                      <CopyButton value={`${new Date(b.timestamp).toLocaleTimeString()} [${b.type.toUpperCase()}] ${b.message}${b.data ? ' ' + JSON.stringify(b.data) : ''}`} label="Breadcrumb"/>
+                    </View>
                   </View>
                   <Text style={localStyles.breadcrumbMessage}>{b.message}</Text>
                   {b.data && (<View style={{ marginTop: 6 }}>

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

@@ -307,9 +307,25 @@ const CrashTab = React.memo(() => {
               <View style={localStyles.searchInputWrapper}>
                 <SearchIcon color={AppColors.grayTextWeak} size={14}/>
                 <TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
-                {searchQuery.length > 0 && (<TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
-                    <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                  </TouchableOpacity>)}
+                {searchQuery.length > 0 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                    <View style={{
+                    backgroundColor: `${AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                }}>
+                      <Text style={{
+                    color: AppColors.purple,
+                    fontSize: 9.5,
+                    fontFamily: AppFonts.interBold,
+                }}>
+                        {filteredList.length}
+                      </Text>
+                    </View>
+                    <TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
+                      <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                    </TouchableOpacity>
+                  </View>)}
               </View>
 
               {/* Crash Filters */}
@@ -381,6 +397,21 @@ const CrashTab = React.memo(() => {
                 ? t('crash.emptySearchSubtitle')
                 : t('crash.emptySubtitle')}
           </Text>
+          {searchQuery.length > 0 && (<TouchableScale onPress={() => setSearchQuery('')} style={{
+                    marginTop: 10,
+                    paddingHorizontal: 14,
+                    paddingVertical: 7,
+                    borderRadius: 8,
+                    backgroundColor: AppColors.purple,
+                }}>
+              <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11.5,
+                    color: AppColors.white,
+                }}>
+                Clear Search
+              </Text>
+            </TouchableScale>)}
         </ScrollView>) : (<FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter />}/>)}
 
       {/* Filter Modal */}

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

@@ -21,9 +21,9 @@ const InfoRow = React.memo(({ label, value, copyable = true, badge, subtext, isL
             styles.infoRow,
             isLast && { borderBottomWidth: 0 },
         ]}>
-        <View style={{ flex: 1, paddingRight: 8 }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <Text style={styles.infoLabel}>{label}</Text>
+        <View style={{ flex: 1, paddingRight: 8, minWidth: 0 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
+            <Text style={styles.infoLabel} numberOfLines={2}>{label}</Text>
             {badge && (<View style={[
                 styles.infoBadge,
                 { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
@@ -33,15 +33,22 @@ const InfoRow = React.memo(({ label, value, copyable = true, badge, subtext, isL
                 </Text>
               </View>)}
           </View>
-          {subtext && <Text style={styles.infoSubtext}>{subtext}</Text>}
+          {subtext && <Text style={styles.infoSubtext} numberOfLines={2}>{subtext}</Text>}
         </View>
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            flexShrink: 0,
+            maxWidth: '58%',
+            justifyContent: 'flex-end',
+        }}>
           <Text style={[
             styles.infoValue,
             typeof value === 'boolean' && {
                 color: value ? AppColors.emerald500 : AppColors.errorColor,
             },
-        ]} numberOfLines={2} selectable>
+        ]} numberOfLines={3} selectable>
             {displayValue}
           </Text>
           {copyable && value !== null && value !== undefined && (<TouchableScale hitSlop={8} onPress={() => {
@@ -348,6 +355,14 @@ export const DeviceInfoTab = React.memo(() => {
             return true;
         return text.toLowerCase().includes(search.toLowerCase().trim());
     };
+    const hasAnyMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        const query = search.toLowerCase().trim();
+        return (JSON.stringify(fullDeviceData).toLowerCase().includes(query) ||
+            ipAddress.toLowerCase().includes(query) ||
+            pseudoUDID.toLowerCase().includes(query));
+    }, [search, fullDeviceData, ipAddress, pseudoUDID]);
     return (<View style={styles.container}>
       {/* ─── Top Sub-Tabs Navigation Bar ─── */}
       <View style={styles.subTabsWrapper}>
@@ -397,11 +412,11 @@ export const DeviceInfoTab = React.memo(() => {
             <View style={styles.heroIconWrap}>
               {Platform.OS === 'ios' ? (<AppleIcon size={20} color={AppColors.white}/>) : (<AndroidIcon size={20} color={AppColors.white}/>)}
             </View>
-            <View style={{ flex: 1 }}>
-              <Text style={styles.heroTitle}>
+            <View style={{ flex: 1, minWidth: 0 }}>
+              <Text style={styles.heroTitle} numberOfLines={1} ellipsizeMode="tail">
                 {deviceMetrics?.deviceModel || Platform.constants?.Model || (Platform.OS === 'ios' ? 'Apple iPhone' : 'Android Device')}
               </Text>
-              <Text style={styles.heroSubtitle}>
+              <Text style={styles.heroSubtitle} numberOfLines={1} ellipsizeMode="tail">
                 {Platform.OS === 'ios' ? `iOS ${Platform.Version}` : `Android ${Platform.Version} (API ${deviceMetrics?.apiLevel || Platform.Version})`}
               </Text>
             </View>
@@ -414,22 +429,22 @@ export const DeviceInfoTab = React.memo(() => {
           {/* Quick Metrics Strip */}
           <View style={styles.heroMetricsStrip}>
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>IP ADDRESS</Text>
-              <Text style={styles.heroMetricValue} numberOfLines={1}>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">IP ADDRESS</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
                 {ipAddress}
               </Text>
             </View>
             <View style={styles.heroMetricDivider}/>
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>RAM (USED/TOTAL)</Text>
-              <Text style={styles.heroMetricValue}>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">RAM (USED/TOTAL)</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
                 {usedRamMb}/{totalRamMb} MB
               </Text>
             </View>
             <View style={styles.heroMetricDivider}/>
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>UPTIME</Text>
-              <Text style={styles.heroMetricValue}>{deviceUptime}</Text>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">UPTIME</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">{deviceUptime}</Text>
             </View>
           </View>
         </View>
@@ -542,6 +557,18 @@ export const DeviceInfoTab = React.memo(() => {
             {isMatch('Sandbox Integrity') && (<InfoRow label="App Sandbox File Isolation" value="Enforced by OS Kernel" isLast/>)}
           </View>)}
 
+        {/* Empty search results state */}
+        {search.trim().length > 0 && !hasAnyMatch && (<View style={styles.emptySearchCard}>
+            <SearchIcon size={26} color={AppColors.grayTextWeak}/>
+            <Text style={styles.emptySearchTitle}>No matching device specifications</Text>
+            <Text style={styles.emptySearchSubtitle}>
+              No properties matched &ldquo;{search}&rdquo;
+            </Text>
+            <TouchableScale onPress={() => setSearch('')} style={styles.clearSearchBtn}>
+              <Text style={styles.clearSearchBtnText}>Clear Search</Text>
+            </TouchableScale>
+          </View>)}
+
         <View style={{ height: 48 }}/>
       </ScrollView>
     </View>);
@@ -713,6 +740,8 @@ const styles = StyleSheet.create({
     heroMetricItem: {
         flex: 1,
         alignItems: 'center',
+        paddingHorizontal: 2,
+        minWidth: 0,
     },
     heroMetricLabel: {
         fontFamily: AppFonts.interBold,
@@ -784,7 +813,7 @@ const styles = StyleSheet.create({
         fontFamily: AppFonts.interBold,
         fontSize: 12,
         color: AppColors.primaryBlack,
-        maxWidth: 180,
+        flexShrink: 1,
         textAlign: 'right',
     },
     rowCopyBtn: {
@@ -792,5 +821,40 @@ const styles = StyleSheet.create({
         borderRadius: 4,
         backgroundColor: AppColors.grayBackground,
     },
+    emptySearchCard: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        marginTop: 8,
+    },
+    emptySearchTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors.primaryBlack,
+        textAlign: 'center',
+    },
+    emptySearchSubtitle: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors.grayTextWeak,
+        textAlign: 'center',
+    },
+    clearSearchBtn: {
+        marginTop: 6,
+        paddingHorizontal: 14,
+        paddingVertical: 6.5,
+        borderRadius: 8,
+        backgroundColor: AppColors.purple,
+    },
+    clearSearchBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.white,
+    },
 });
 export default DeviceInfoTab;