react-native-inapp-inspector 2.0.0 → 2.0.1

package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt

@@ -645,7 +645,6 @@ class InAppInspectorFloatingView(
     private var touchDownY = 0f
     private var touchDownTime = 0L
     private var isDragging = false
-    private val badgeView: android.view.View
 
     init {
         val density = context.resources.displayMetrics.density
@@ -823,28 +822,10 @@ class InAppInspectorFloatingView(
             isFocusable = false
         }
         addView(iconView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
-
-        // 3. Status Badge Dot (Top-Right)
-        val badgeSize = (10f * density).toInt()
-        badgeView = android.view.View(context).apply {
-            val badgeDrawable = android.graphics.drawable.GradientDrawable().apply {
-                shape = android.graphics.drawable.GradientDrawable.OVAL
-                setColor(android.graphics.Color.parseColor("#22C55E"))
-                setStroke((1.5f * density).toInt(), android.graphics.Color.parseColor("#0F172A"))
-            }
-            background = badgeDrawable
-            visibility = GONE
-        }
-        val badgeParams = LayoutParams(badgeSize, badgeSize).apply {
-            gravity = android.view.Gravity.TOP or android.view.Gravity.END
-            topMargin = (4f * density).toInt()
-            rightMargin = (4f * density).toInt()
-        }
-        addView(badgeView, badgeParams)
     }
 
     fun setBadgeVisible(visible: Boolean) {
-        badgeView.visibility = if (visible) VISIBLE else GONE
+        // Active badge dot removed
     }
 
     override fun onTouchEvent(event: android.view.MotionEvent): Boolean {
@@ -867,7 +848,8 @@ class InAppInspectorFloatingView(
                 val dx = event.rawX - touchDownX
                 val dy = event.rawY - touchDownY
 
-                if (!isDragging && Math.hypot(dx.toDouble(), dy.toDouble()) > 8 * density) {
+                val dist = Math.hypot(dx.toDouble(), dy.toDouble())
+                if (!isDragging && dist > 16 * density) {
                     isDragging = true
                 }
 
@@ -882,12 +864,12 @@ class InAppInspectorFloatingView(
                 }
                 return true
             }
-            android.view.MotionEvent.ACTION_UP, android.view.MotionEvent.ACTION_CANCEL -> {
-                animate().scaleX(1.0f).scaleY(1.0f).setDuration(120).start()
+            android.view.MotionEvent.ACTION_UP -> {
+                animate().scaleX(1.0f).scaleY(1.0f).setDuration(100).start()
                 val elapsed = System.currentTimeMillis() - touchDownTime
                 val totalDist = Math.hypot((event.rawX - touchDownX).toDouble(), (event.rawY - touchDownY).toDouble())
 
-                if (!isDragging && totalDist < 12 * density && elapsed < 350) {
+                if (!isDragging && totalDist < 24 * density && elapsed < 850) {
                     onTap()
                 } else if (isDragging) {
                     // Smooth native snap to nearest horizontal side
@@ -898,6 +880,10 @@ class InAppInspectorFloatingView(
                 }
                 return true
             }
+            android.view.MotionEvent.ACTION_CANCEL -> {
+                animate().scaleX(1.0f).scaleY(1.0f).setDuration(100).start()
+                return true
+            }
         }
         return super.onTouchEvent(event)
     }

package/dist/commonjs/components/ConsoleLogCard.js

@@ -10,8 +10,8 @@ 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 HighlightText_1 = __importDefault(require("./HighlightText"));
 const CopyButton_1 = __importDefault(require("./CopyButton"));
+const LogSyntaxHighlighter_1 = __importDefault(require("./LogSyntaxHighlighter"));
 const NetworkIcons_1 = require("./NetworkIcons");
 const InspectorContext_1 = require("./Inspector/InspectorContext");
 const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
@@ -79,10 +79,10 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
               </react_native_1.View>);
             })}
         </react_native_1.View>
-        <HighlightText_1.default text={remainingText} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>
+        <LogSyntaxHighlighter_1.default text={remainingText} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>
       </react_native_1.View>);
     }
-    return (<HighlightText_1.default text={message} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
+    return (<LogSyntaxHighlighter_1.default text={message} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
 };
 exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', }) {
     const { setSelectedLog } = (0, InspectorContext_1.useInspector)();
@@ -240,10 +240,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
           {jsonContent ? (<>
               {jsonContent.header ? (getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, 2)) : null}
               {jsonPreview && (<react_native_1.View style={styles.jsonPreviewContainer}>
-                  <HighlightText_1.default text={jsonPreview.text} search={searchStr} style={[
+                  <LogSyntaxHighlighter_1.default text={jsonPreview.text} search={searchStr} style={[
                     styles.jsonPreviewText,
                     { color: AppColors_1.AppColors.primaryBlack },
-                ]} highlightStyle={styles.highlight} detectLinks={false} numberOfLines={5}/>
+                ]} detectLinks={false} numberOfLines={5}/>
                 </react_native_1.View>)}
             </>) : (getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, 3))}
         </react_native_1.View>

package/dist/commonjs/components/EndOfListFooter.js

@@ -33,7 +33,7 @@ const styles = react_native_1.StyleSheet.create({
         justifyContent: 'center',
         paddingHorizontal: 16,
         paddingTop: 16,
-        paddingBottom: 28,
+        paddingBottom: react_native_1.Platform.OS === 'ios' ? 44 : 32,
         gap: 8,
     },
     dividerLine: {

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

@@ -40,7 +40,6 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const AnalyticsEventCard_1 = __importDefault(require("../AnalyticsEventCard"));
-const AnalyticsDetail_1 = __importDefault(require("../AnalyticsDetail"));
 const AnalyticsFilterModal_1 = __importDefault(require("./AnalyticsFilterModal"));
 const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
 const styles_1 = __importDefault(require("../../styles"));
@@ -161,16 +160,25 @@ const AnalyticsHeader = react_1.default.memo(() => {
             return { ...prev, categories: nextCategories };
         });
     };
-    // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (-30m / 30s to NOW)
+    // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (60s live rolling stream)
     const BUCKET_COUNT = 12;
     const chartHeight = 64;
     const svgWidth = 320;
     const [selectedBucketIdx, setSelectedBucketIdx] = (0, react_1.useState)(null);
+    const [liveTick, setLiveTick] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!isTrackingEnabled)
+            return;
+        const interval = setInterval(() => {
+            setLiveTick(t => (t + 1) % 100000);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [isTrackingEnabled]);
     const histogramData = (0, react_1.useMemo)(() => {
         const buckets = [];
         const now = Date.now();
-        const windowMs = 60000; // 60s window
-        const bucketDuration = windowMs / BUCKET_COUNT;
+        const windowMs = 60000; // 60s live rolling window
+        const bucketDuration = windowMs / BUCKET_COUNT; // 5s per bucket
         for (let i = 0; i < BUCKET_COUNT; i++) {
             const bucketAgeSec = Math.round(((BUCKET_COUNT - 1 - i) * bucketDuration) / 1000);
             buckets.push({
@@ -235,7 +243,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             peakVal,
             eventRate,
         };
-    }, [filteredAnalyticsEvents, chartHeight, svgWidth, t]);
+    }, [filteredAnalyticsEvents, chartHeight, svgWidth, liveTick, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
       {/* ── 1. Top Header Row (GA4 Style) ─────────────────────────────────── */}
@@ -307,7 +315,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             }}/>)}
         </react_native_1.View>
 
-        {/* Multi-Select Category Buttons with Checkboxes */}
+        {/* Multi-Select Category Buttons */}
         <react_native_1.View style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
@@ -336,18 +344,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo400,
-                    backgroundColor: isAllSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isAllSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.indigo600Alt} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.LayersIcon color={isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -383,18 +379,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber500,
-                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.amber600} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.CartIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -430,18 +414,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky400,
-                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.sky600} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.GlobeIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -477,18 +449,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple400,
-                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.violet600} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.BoltIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -524,18 +484,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.pink400,
-                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.pink600} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.SparkleIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -731,7 +679,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>)}
 
-        {/* Timeline Axis Labels */}
+        {/* Timeline Axis Labels (60s Realtime Rolling Stream) */}
         <react_native_1.View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -743,21 +691,21 @@ const AnalyticsHeader = react_1.default.memo(() => {
             fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            {t('analytics.time30mAgo')}
+            -60s
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interMedium,
             fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            {t('analytics.time20mAgo')}
+            -40s
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interMedium,
             fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            {t('analytics.time10mAgo')}
+            -20s
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
@@ -997,7 +945,7 @@ const AnalyticsTab = react_1.default.memo(() => {
       <AnalyticsFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <react_native_1.View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
+        {isAnalyticsLayoutReady ? (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
                 <react_native_1.View style={styles_1.default.emptyIconWrap}>
                   <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
                 </react_native_1.View>