@buoy-gg/highlight-updates 3.0.1 → 3.0.2

package/lib/module/highlight-updates/utils/RenderTracker.js

@@ -1 +1,916 @@
-"use strict";import{getComponentDisplayName}from"./ViewTypeMapper";import{PerformanceLogger}from"./PerformanceLogger";const MAX_TRACKED_COMPONENTS=200,DEFAULT_BATCH_SIZE=150;class RenderTrackerSingleton{renders=new Map;listeners=new Set;stateListeners=new Set;settingsListeners=new Set;filterListeners=new Set;renderEventCallbacks=new Set;isTracking=!1;isPaused=!1;settings={batchSize:150,showRenderCount:!0,performanceLogging:!1,trackRenderCauses:!1,enableRenderHistory:!0,maxRenderHistoryPerComponent:20,capturePropsOnRender:!1,captureStateOnRender:!1,debugLogLevel:"off",excludeDevTools:!0};isBatchMode=!1;batchDirty=!1;filters={includeTestID:new Set,includeNativeID:new Set,includeViewType:new Set,includeComponent:new Set,excludeTestID:new Set,excludeNativeID:new Set,excludeViewType:new Set,excludeComponent:new Set,includePatterns:[],excludePatterns:[]};trackRender(e){if(this.isPaused)return;const t=String(e.nativeTag),s=Date.now(),i=this.renders.get(t);if(i){if(i.renderCount=e.count,i.lastRenderTime=s,i.color=e.color,e.measurements&&(i.measurements=e.measurements),e.testID&&!i.testID&&(i.testID=e.testID),e.nativeID&&!i.nativeID&&(i.nativeID=e.nativeID),e.accessibilityLabel&&!i.accessibilityLabel&&(i.accessibilityLabel=e.accessibilityLabel),e.componentName&&!i.componentName&&(i.componentName=e.componentName),e.renderCause&&(i.lastRenderCause=e.renderCause),this.settings.enableRenderHistory){const t=e.renderCause||{type:"unknown",timestamp:s};this.addRenderEvent(i,t,e.capturedProps,e.capturedState)}}else{const i={id:t,nativeTag:e.nativeTag,viewType:e.viewType,displayName:getComponentDisplayName(e.viewType),testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,componentName:e.componentName,renderCount:e.count,firstRenderTime:s,lastRenderTime:s,measurements:e.measurements,color:e.color,lastRenderCause:e.renderCause};if(this.settings.enableRenderHistory){i.renderHistory=[];const t=e.renderCause||{type:1===e.count?"mount":"unknown",timestamp:s};this.addRenderEvent(i,t,e.capturedProps,e.capturedState)}if(this.renders.set(t,i),this.renders.size>200){const e=Array.from(this.renders.values()).sort((e,t)=>e.lastRenderTime-t.lastRenderTime).slice(0,this.renders.size-200);for(const t of e)this.renders.delete(t.id)}}this.isBatchMode?this.batchDirty=!0:this.notifyListeners()}addRenderEvent(e,t,s,i){e.renderHistory||(e.renderHistory=[]);const n={id:`${e.nativeTag}-${t.timestamp}`,timestamp:t.timestamp,cause:t,renderNumber:e.renderCount,capturedProps:this.settings.capturePropsOnRender?s:void 0,capturedState:this.settings.captureStateOnRender?i:void 0};e.renderHistory.push(n);const r=Math.max(5,Math.min(50,this.settings.maxRenderHistoryPerComponent));e.renderHistory.length>r&&(e.renderHistory=e.renderHistory.slice(-r)),this.notifyRenderEventCallbacks(n,e)}notifyRenderEventCallbacks(e,t){this.renderEventCallbacks.forEach(s=>{try{s(e,t)}catch{}})}emitRenderEvent(e){if(0===this.renderEventCallbacks.size)return;const t=Date.now(),s=e.renderCause||{type:"unknown",timestamp:t},i={id:String(e.nativeTag),nativeTag:e.nativeTag,viewType:e.viewType,displayName:getComponentDisplayName(e.viewType),testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,componentName:e.componentName,renderCount:e.count,firstRenderTime:t,lastRenderTime:t,measurements:e.measurements,color:e.color,lastRenderCause:s,renderHistory:[]},n={id:`${e.nativeTag}-${t}-${e.count}`,timestamp:t,renderNumber:e.count,cause:s,capturedProps:void 0,capturedState:void 0};this.notifyRenderEventCallbacks(n,i)}startBatch(){this.isBatchMode=!0,this.batchDirty=!1}endBatch(){this.isBatchMode=!1,this.batchDirty&&(this.batchDirty=!1,this.notifyListeners())}getRenders(){return Array.from(this.renders.values()).map(e=>({...e}))}passesFilters(e){if(this.filters.includePatterns.length>0&&!this.matchesAnyPatternForInfo(e,this.filters.includePatterns))return!1;if(this.filters.excludePatterns.length>0&&this.matchesAnyPatternForInfo(e,this.filters.excludePatterns))return!1;if(this.filters.includeViewType.size>0){const t=e.viewType||"",s=e.displayName||"";if(!this.matchesPattern(t,this.filters.includeViewType)&&!this.matchesPattern(s,this.filters.includeViewType))return!1}if(this.filters.includeTestID.size>0&&(!e.testID||!this.matchesPattern(e.testID,this.filters.includeTestID)))return!1;if(this.filters.includeNativeID.size>0&&(!e.nativeID||!this.matchesPattern(e.nativeID,this.filters.includeNativeID)))return!1;if(this.filters.includeComponent.size>0&&(!e.componentName||!this.matchesPattern(e.componentName,this.filters.includeComponent)))return!1;if(this.filters.excludeViewType.size>0){const t=e.viewType||"",s=e.displayName||"";if(this.matchesPattern(t,this.filters.excludeViewType)||this.matchesPattern(s,this.filters.excludeViewType))return!1}return!(this.filters.excludeTestID.size>0&&e.testID&&this.matchesPattern(e.testID,this.filters.excludeTestID)||this.filters.excludeNativeID.size>0&&e.nativeID&&this.matchesPattern(e.nativeID,this.filters.excludeNativeID)||this.filters.excludeComponent.size>0&&e.componentName&&this.matchesPattern(e.componentName,this.filters.excludeComponent))}matchesAnyPatternForInfo(e,t){for(const s of t){const t=s.value.toLowerCase();switch(s.type){case"any":if(e.viewType.toLowerCase().includes(t)||e.displayName?.toLowerCase().includes(t)||e.testID?.toLowerCase().includes(t)||e.nativeID?.toLowerCase().includes(t)||e.componentName?.toLowerCase().includes(t)||e.accessibilityLabel?.toLowerCase().includes(t))return!0;break;case"viewType":if(e.viewType.toLowerCase().includes(t)||e.displayName?.toLowerCase().includes(t))return!0;break;case"testID":if(e.testID?.toLowerCase().includes(t))return!0;break;case"nativeID":if(e.nativeID?.toLowerCase().includes(t))return!0;break;case"component":if(e.componentName?.toLowerCase().includes(t))return!0;break;case"accessibilityLabel":if(e.accessibilityLabel?.toLowerCase().includes(t))return!0}}return!1}hasActiveFilters(){return this.filters.includePatterns.length>0||this.filters.excludePatterns.length>0||this.filters.includeViewType.size>0||this.filters.includeTestID.size>0||this.filters.includeNativeID.size>0||this.filters.includeComponent.size>0||this.filters.excludeViewType.size>0||this.filters.excludeTestID.size>0||this.filters.excludeNativeID.size>0||this.filters.excludeComponent.size>0||void 0!==this.filters.minRenderCount||void 0!==this.filters.maxRenderCount}getFilteredRenders(e=""){let t=this.getRenders();if(e.trim()){const s=e.toLowerCase();t=t.filter(e=>e.viewType.toLowerCase().includes(s)||e.displayName.toLowerCase().includes(s)||e.testID?.toLowerCase().includes(s)||e.nativeID?.toLowerCase().includes(s)||e.accessibilityLabel?.toLowerCase().includes(s)||e.componentName?.toLowerCase().includes(s)||String(e.nativeTag).includes(s))}return t=t.filter(e=>this.passesFilters(e)),void 0!==this.filters.minRenderCount&&(t=t.filter(e=>e.renderCount>=this.filters.minRenderCount)),void 0!==this.filters.maxRenderCount&&(t=t.filter(e=>e.renderCount<=this.filters.maxRenderCount)),t.sort((e,t)=>t.lastRenderTime-e.lastRenderTime)}matchesPattern(e,t){const s=e.toLowerCase();for(const e of t){const t=e.toLowerCase();if(s.includes(t))return!0}return!1}getRender(e){return this.renders.get(e)}clear(){this.renders.clear(),this.notifyListeners()}resetRenderCount(e){const t=this.renders.get(e);t&&(t.renderCount=0,this.notifyListeners())}start(){this.isTracking=!0,this.isPaused=!1,this.notifyStateListeners()}stop(){this.isTracking=!1,this.isPaused=!1,this.notifyStateListeners()}pause(){this.isPaused=!0,this.notifyStateListeners()}resume(){this.isPaused=!1,this.notifyStateListeners()}togglePause(){this.isPaused=!this.isPaused,this.notifyStateListeners()}getState(){return{isTracking:this.isTracking,isPaused:this.isPaused}}getFilters(){return this.filters}setFilters(e){this.filters={...this.filters,...e},this.notifyListeners(),this.notifyFilterListeners()}addIncludePattern(e,t){const s=`include${e.charAt(0).toUpperCase()+e.slice(1)}`;this.filters[s].add(t),this.notifyListeners()}removeIncludePattern(e,t){const s=`include${e.charAt(0).toUpperCase()+e.slice(1)}`;this.filters[s].delete(t),this.notifyListeners()}addExcludePattern(e,t){const s=`exclude${e.charAt(0).toUpperCase()+e.slice(1)}`;this.filters[s].add(t),this.notifyListeners()}removeExcludePattern(e,t){const s=`exclude${e.charAt(0).toUpperCase()+e.slice(1)}`;this.filters[s].delete(t),this.notifyListeners()}clearFilters(){this.filters={includeTestID:new Set,includeNativeID:new Set,includeViewType:new Set,includeComponent:new Set,excludeTestID:new Set,excludeNativeID:new Set,excludeViewType:new Set,excludeComponent:new Set,includePatterns:[],excludePatterns:[],minRenderCount:void 0,maxRenderCount:void 0},this.notifyListeners()}getAvailableProps(){const e=new Set,t=new Set,s=new Set,i=new Set,n=new Set;for(const r of this.renders.values())r.viewType&&e.add(r.viewType),r.testID&&t.add(r.testID),r.nativeID&&s.add(r.nativeID),r.componentName&&i.add(r.componentName),r.accessibilityLabel&&n.add(r.accessibilityLabel);return{viewTypes:Array.from(e).sort(),testIDs:Array.from(t).sort(),nativeIDs:Array.from(s).sort(),componentNames:Array.from(i).sort(),accessibilityLabels:Array.from(n).sort()}}getStats(){let e=0;for(const t of this.renders.values())e+=t.renderCount;return{totalComponents:this.renders.size,totalRenders:e}}subscribe(e){return this.listeners.add(e),e(this.getRenders()),()=>{this.listeners.delete(e)}}subscribeToState(e){return this.stateListeners.add(e),e(this.getState()),()=>{this.stateListeners.delete(e)}}subscribeToSettings(e){return this.settingsListeners.add(e),e(this.settings),()=>{this.settingsListeners.delete(e)}}subscribeToFilters(e){return this.filterListeners.add(e),e(this.filters),()=>{this.filterListeners.delete(e)}}onRenderEvent(e){return this.renderEventCallbacks.add(e),()=>{this.renderEventCallbacks.delete(e)}}getRenderEventCallbackCount(){return this.renderEventCallbacks.size}shouldShowRender(e){const t=this.filters;return!(t.includePatterns.length>0&&!this.matchesAnyPatternForInfo(e,t.includePatterns))&&(!(t.excludePatterns.length>0&&this.matchesAnyPatternForInfo(e,t.excludePatterns))&&(!((t.includeViewType.size>0||t.includeTestID.size>0||t.includeNativeID.size>0||t.includeComponent.size>0)&&!(t.includeViewType.size>0&&t.includeViewType.has(e.viewType)||t.includeTestID.size>0&&e.testID&&t.includeTestID.has(e.testID)||t.includeNativeID.size>0&&e.nativeID&&t.includeNativeID.has(e.nativeID)||t.includeComponent.size>0&&e.componentName&&t.includeComponent.has(e.componentName)))&&!(t.excludeViewType.has(e.viewType)||e.testID&&t.excludeTestID.has(e.testID)||e.nativeID&&t.excludeNativeID.has(e.nativeID)||e.componentName&&t.excludeComponent.has(e.componentName))))}getSettings(){return{...this.settings}}setSettings(e){void 0!==e.batchSize&&(e.batchSize=Math.max(10,Math.min(500,e.batchSize))),void 0!==e.maxRenderHistoryPerComponent&&(e.maxRenderHistoryPerComponent=Math.max(5,Math.min(50,e.maxRenderHistoryPerComponent))),e.enableRenderHistory&&!this.settings.trackRenderCauses&&(e.trackRenderCauses=!0),!1===e.trackRenderCauses&&this.settings.enableRenderHistory&&(e.enableRenderHistory=!1),this.settings={...this.settings,...e},void 0!==e.performanceLogging&&PerformanceLogger.setEnabled(e.performanceLogging),this.notifySettingsListeners()}clearAllRenderHistory(){for(const e of this.renders.values())e.renderHistory=[];this.notifyListeners()}clearRenderHistory(e){const t=this.renders.get(e);t&&(t.renderHistory=[],this.notifyListeners())}getRenderHistoryStats(){let e=0,t=0;for(const s of this.renders.values())s.renderHistory&&s.renderHistory.length>0&&(e+=s.renderHistory.length,t++);return{totalEvents:e,componentsWithHistory:t,averageEventsPerComponent:t>0?e/t:0}}getBatchSize(){return this.settings.batchSize}setBatchSize(e){this.setSettings({batchSize:e})}notifyListeners(){const e=this.getRenders();for(const t of this.listeners)try{t(e)}catch(e){console.error("[RenderTracker] Error in listener:",e)}}notifyStateListeners(){const e=this.getState();for(const t of this.stateListeners)try{t(e)}catch(e){console.error("[RenderTracker] Error in state listener:",e)}}notifySettingsListeners(){const e=this.getSettings();for(const t of this.settingsListeners)try{t(e)}catch(e){console.error("[RenderTracker] Error in settings listener:",e)}}notifyFilterListeners(){const e=this.getFilters();for(const t of this.filterListeners)try{t(e)}catch(e){console.error("[RenderTracker] Error in filter listener:",e)}}}export const RenderTracker=new RenderTrackerSingleton;export default RenderTracker;
+/**
+ * RenderTracker
+ *
+ * Singleton that tracks component render history for the Highlight Updates modal.
+ * Stores information about each tracked component including render counts,
+ * timestamps, and identifying props (testID, nativeID, etc.)
+ */
+
+"use strict";
+
+import { getComponentDisplayName } from "./ViewTypeMapper";
+import { PerformanceLogger } from "./PerformanceLogger";
+
+/**
+ * Debug logging levels for render cause detection.
+ * Controls verbosity of console output for debugging "Why Did You Render" feature.
+ *
+ * - "off": No debug logging (default, best for production)
+ * - "minimal": Only log state/hook value changes (e.g., "useState: 3334 → 3335")
+ * - "verbose": Log component info + cause + value changes
+ * - "all": Full fiber dump with everything (native fiber, component fiber, hooks, batch context)
+ */
+
+// Render cause types - why did a component render?
+
+// Could not determine
+
+// Component-level cause - why did the React component re-render?
+
+// Could not determine
+
+/**
+ * Represents a change in a single hook's state
+ * Used to show meaningful before/after values for debugging
+ */
+
+/**
+ * A single render event in the history
+ * Captures everything about one render occurrence
+ */
+
+/** Callback for individual render events (for unified events integration) */
+
+// Maximum number of tracked components to prevent memory issues
+const MAX_TRACKED_COMPONENTS = 200;
+
+// Default batch size for highlight rendering
+const DEFAULT_BATCH_SIZE = 150;
+class RenderTrackerSingleton {
+  renders = new Map();
+  listeners = new Set();
+  stateListeners = new Set();
+  settingsListeners = new Set();
+  filterListeners = new Set();
+  /** Callbacks for individual render events (unified events integration) */
+  renderEventCallbacks = new Set();
+  isTracking = false;
+  isPaused = false;
+  settings = {
+    batchSize: DEFAULT_BATCH_SIZE,
+    showRenderCount: true,
+    performanceLogging: false,
+    trackRenderCauses: false,
+    // History settings (always enabled)
+    enableRenderHistory: true,
+    maxRenderHistoryPerComponent: 20,
+    capturePropsOnRender: false,
+    captureStateOnRender: false,
+    // Debug settings
+    debugLogLevel: "off",
+    // Dev tools visibility - exclude by default
+    excludeDevTools: true
+  };
+
+  // Batch mode: defer notifyListeners until endBatch is called
+  isBatchMode = false;
+  batchDirty = false;
+  filters = {
+    includeTestID: new Set(),
+    includeNativeID: new Set(),
+    includeViewType: new Set(),
+    includeComponent: new Set(),
+    excludeTestID: new Set(),
+    excludeNativeID: new Set(),
+    excludeViewType: new Set(),
+    excludeComponent: new Set(),
+    includePatterns: [],
+    excludePatterns: []
+  };
+
+  /**
+   * Track a component render
+   */
+  trackRender(data) {
+    if (this.isPaused) return;
+    const id = String(data.nativeTag);
+    const now = Date.now();
+    const existing = this.renders.get(id);
+    if (existing) {
+      // Mutate in place to keep Map entry correct
+      existing.renderCount = data.count;
+      existing.lastRenderTime = now;
+      existing.color = data.color;
+      if (data.measurements) {
+        existing.measurements = data.measurements;
+      }
+      // Update props if they weren't set before
+      if (data.testID && !existing.testID) existing.testID = data.testID;
+      if (data.nativeID && !existing.nativeID) existing.nativeID = data.nativeID;
+      if (data.accessibilityLabel && !existing.accessibilityLabel) {
+        existing.accessibilityLabel = data.accessibilityLabel;
+      }
+      if (data.componentName && !existing.componentName) {
+        existing.componentName = data.componentName;
+      }
+      // Update render cause if provided
+      if (data.renderCause) {
+        existing.lastRenderCause = data.renderCause;
+      }
+
+      // Add to render history if enabled (create minimal cause if not provided)
+      if (this.settings.enableRenderHistory) {
+        const cause = data.renderCause || {
+          type: "unknown",
+          timestamp: now
+        };
+        this.addRenderEvent(existing, cause, data.capturedProps, data.capturedState);
+      }
+    } else {
+      // Add new render
+      const newRender = {
+        id,
+        nativeTag: data.nativeTag,
+        viewType: data.viewType,
+        displayName: getComponentDisplayName(data.viewType),
+        testID: data.testID,
+        nativeID: data.nativeID,
+        accessibilityLabel: data.accessibilityLabel,
+        componentName: data.componentName,
+        renderCount: data.count,
+        firstRenderTime: now,
+        lastRenderTime: now,
+        measurements: data.measurements,
+        color: data.color,
+        lastRenderCause: data.renderCause
+      };
+
+      // Initialize render history if enabled (create minimal cause if not provided)
+      if (this.settings.enableRenderHistory) {
+        newRender.renderHistory = [];
+        const cause = data.renderCause || {
+          type: data.count === 1 ? "mount" : "unknown",
+          timestamp: now
+        };
+        this.addRenderEvent(newRender, cause, data.capturedProps, data.capturedState);
+      }
+      this.renders.set(id, newRender);
+
+      // Enforce max limit - remove oldest renders
+      if (this.renders.size > MAX_TRACKED_COMPONENTS) {
+        const sorted = Array.from(this.renders.values()).sort((a, b) => a.lastRenderTime - b.lastRenderTime);
+        const toRemove = sorted.slice(0, this.renders.size - MAX_TRACKED_COMPONENTS);
+        for (const render of toRemove) {
+          this.renders.delete(render.id);
+        }
+      }
+    }
+
+    // In batch mode, defer notification until endBatch()
+    if (this.isBatchMode) {
+      this.batchDirty = true;
+    } else {
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Add a render event to a component's history (circular buffer)
+   */
+  addRenderEvent(render, cause, capturedProps, capturedState) {
+    // Initialize history array if needed
+    if (!render.renderHistory) {
+      render.renderHistory = [];
+    }
+    const event = {
+      id: `${render.nativeTag}-${cause.timestamp}`,
+      timestamp: cause.timestamp,
+      cause,
+      renderNumber: render.renderCount,
+      // Only include captured data if settings allow and data is provided
+      capturedProps: this.settings.capturePropsOnRender ? capturedProps : undefined,
+      capturedState: this.settings.captureStateOnRender ? capturedState : undefined
+    };
+    render.renderHistory.push(event);
+
+    // Enforce max history size (circular buffer behavior)
+    const maxHistory = Math.max(5, Math.min(50, this.settings.maxRenderHistoryPerComponent));
+    if (render.renderHistory.length > maxHistory) {
+      // Remove oldest events
+      render.renderHistory = render.renderHistory.slice(-maxHistory);
+    }
+
+    // Notify render event callbacks (for unified events integration)
+    this.notifyRenderEventCallbacks(event, render);
+  }
+
+  /**
+   * Notify all render event callbacks
+   */
+  notifyRenderEventCallbacks(event, render) {
+    this.renderEventCallbacks.forEach(callback => {
+      try {
+        callback(event, render);
+      } catch {
+        // Silently ignore callback errors
+      }
+    });
+  }
+
+  /**
+   * Emit a render event to callbacks only (without storing in the render list).
+   * Used by Events tool when visual highlights are off - we want events but not list updates.
+   */
+  emitRenderEvent(data) {
+    if (this.renderEventCallbacks.size === 0) return;
+    const now = Date.now();
+    const cause = data.renderCause || {
+      type: "unknown",
+      timestamp: now
+    };
+
+    // Create a minimal TrackedRender for the event (not stored)
+    const render = {
+      id: String(data.nativeTag),
+      nativeTag: data.nativeTag,
+      viewType: data.viewType,
+      displayName: getComponentDisplayName(data.viewType),
+      testID: data.testID,
+      nativeID: data.nativeID,
+      accessibilityLabel: data.accessibilityLabel,
+      componentName: data.componentName,
+      renderCount: data.count,
+      firstRenderTime: now,
+      lastRenderTime: now,
+      measurements: data.measurements,
+      color: data.color,
+      lastRenderCause: cause,
+      renderHistory: []
+    };
+
+    // Create the event
+    const event = {
+      id: `${data.nativeTag}-${now}-${data.count}`,
+      timestamp: now,
+      renderNumber: data.count,
+      cause,
+      capturedProps: undefined,
+      capturedState: undefined
+    };
+
+    // Notify callbacks only (no storage, no list listeners)
+    this.notifyRenderEventCallbacks(event, render);
+  }
+
+  /**
+   * Start batch mode - defers listener notifications until endBatch() is called.
+   * Use this when tracking multiple renders in a loop to avoid O(n²) notifications.
+   */
+  startBatch() {
+    this.isBatchMode = true;
+    this.batchDirty = false;
+  }
+
+  /**
+   * End batch mode and notify listeners if any renders were tracked.
+   */
+  endBatch() {
+    this.isBatchMode = false;
+    if (this.batchDirty) {
+      this.batchDirty = false;
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Get all tracked renders
+   * Creates new object copies to trigger React.memo re-renders
+   */
+  getRenders() {
+    return Array.from(this.renders.values()).map(r => ({
+      ...r
+    }));
+  }
+
+  /**
+   * Check if a component passes all active filters.
+   * Used by both the modal list and the overlay to filter components.
+   *
+   * @param info Component info to check (can be TrackedRender or extracted component info)
+   * @returns true if the component passes all filters, false if it should be hidden
+   */
+  passesFilters(info) {
+    // Check new unified include patterns (if any are set, must match at least one)
+    if (this.filters.includePatterns.length > 0) {
+      const matchesInclude = this.matchesAnyPatternForInfo(info, this.filters.includePatterns);
+      if (!matchesInclude) return false;
+    }
+
+    // Check new unified exclude patterns
+    if (this.filters.excludePatterns.length > 0) {
+      const matchesExclude = this.matchesAnyPatternForInfo(info, this.filters.excludePatterns);
+      if (matchesExclude) return false;
+    }
+
+    // Legacy filter support (for backwards compatibility)
+    // Include filters: if any are set, component must match at least one
+    if (this.filters.includeViewType.size > 0) {
+      const viewType = info.viewType || '';
+      const displayName = info.displayName || '';
+      if (!this.matchesPattern(viewType, this.filters.includeViewType) && !this.matchesPattern(displayName, this.filters.includeViewType)) {
+        return false;
+      }
+    }
+    if (this.filters.includeTestID.size > 0) {
+      if (!info.testID || !this.matchesPattern(info.testID, this.filters.includeTestID)) {
+        return false;
+      }
+    }
+    if (this.filters.includeNativeID.size > 0) {
+      if (!info.nativeID || !this.matchesPattern(info.nativeID, this.filters.includeNativeID)) {
+        return false;
+      }
+    }
+    if (this.filters.includeComponent.size > 0) {
+      if (!info.componentName || !this.matchesPattern(info.componentName, this.filters.includeComponent)) {
+        return false;
+      }
+    }
+
+    // Exclude filters: if component matches any, it should be hidden
+    if (this.filters.excludeViewType.size > 0) {
+      const viewType = info.viewType || '';
+      const displayName = info.displayName || '';
+      if (this.matchesPattern(viewType, this.filters.excludeViewType) || this.matchesPattern(displayName, this.filters.excludeViewType)) {
+        return false;
+      }
+    }
+    if (this.filters.excludeTestID.size > 0) {
+      if (info.testID && this.matchesPattern(info.testID, this.filters.excludeTestID)) {
+        return false;
+      }
+    }
+    if (this.filters.excludeNativeID.size > 0) {
+      if (info.nativeID && this.matchesPattern(info.nativeID, this.filters.excludeNativeID)) {
+        return false;
+      }
+    }
+    if (this.filters.excludeComponent.size > 0) {
+      if (info.componentName && this.matchesPattern(info.componentName, this.filters.excludeComponent)) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Check if component info matches any of the given patterns
+   */
+  matchesAnyPatternForInfo(info, patterns) {
+    for (const pattern of patterns) {
+      const lowerValue = pattern.value.toLowerCase();
+      switch (pattern.type) {
+        case "any":
+          // Match against all fields
+          if (info.viewType.toLowerCase().includes(lowerValue) || info.displayName?.toLowerCase().includes(lowerValue) || info.testID?.toLowerCase().includes(lowerValue) || info.nativeID?.toLowerCase().includes(lowerValue) || info.componentName?.toLowerCase().includes(lowerValue) || info.accessibilityLabel?.toLowerCase().includes(lowerValue)) {
+            return true;
+          }
+          break;
+        case "viewType":
+          if (info.viewType.toLowerCase().includes(lowerValue) || info.displayName?.toLowerCase().includes(lowerValue)) {
+            return true;
+          }
+          break;
+        case "testID":
+          if (info.testID?.toLowerCase().includes(lowerValue)) {
+            return true;
+          }
+          break;
+        case "nativeID":
+          if (info.nativeID?.toLowerCase().includes(lowerValue)) {
+            return true;
+          }
+          break;
+        case "component":
+          if (info.componentName?.toLowerCase().includes(lowerValue)) {
+            return true;
+          }
+          break;
+        case "accessibilityLabel":
+          if (info.accessibilityLabel?.toLowerCase().includes(lowerValue)) {
+            return true;
+          }
+          break;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Check if any filters are currently active
+   */
+  hasActiveFilters() {
+    return this.filters.includePatterns.length > 0 || this.filters.excludePatterns.length > 0 || this.filters.includeViewType.size > 0 || this.filters.includeTestID.size > 0 || this.filters.includeNativeID.size > 0 || this.filters.includeComponent.size > 0 || this.filters.excludeViewType.size > 0 || this.filters.excludeTestID.size > 0 || this.filters.excludeNativeID.size > 0 || this.filters.excludeComponent.size > 0 || this.filters.minRenderCount !== undefined || this.filters.maxRenderCount !== undefined;
+  }
+
+  /**
+   * Get filtered renders based on current filter config
+   */
+  getFilteredRenders(searchText = "") {
+    let renders = this.getRenders();
+
+    // Apply search filter
+    if (searchText.trim()) {
+      const search = searchText.toLowerCase();
+      renders = renders.filter(r => {
+        return r.viewType.toLowerCase().includes(search) || r.displayName.toLowerCase().includes(search) || r.testID?.toLowerCase().includes(search) || r.nativeID?.toLowerCase().includes(search) || r.accessibilityLabel?.toLowerCase().includes(search) || r.componentName?.toLowerCase().includes(search) || String(r.nativeTag).includes(search);
+      });
+    }
+
+    // Apply filters using the shared passesFilters method
+    renders = renders.filter(r => this.passesFilters(r));
+
+    // Apply render count range filter
+    if (this.filters.minRenderCount !== undefined) {
+      renders = renders.filter(r => r.renderCount >= this.filters.minRenderCount);
+    }
+    if (this.filters.maxRenderCount !== undefined) {
+      renders = renders.filter(r => r.renderCount <= this.filters.maxRenderCount);
+    }
+
+    // Sort by last render time (most recent first)
+    return renders.sort((a, b) => b.lastRenderTime - a.lastRenderTime);
+  }
+
+  /**
+   * Check if a value matches any pattern in the set
+   */
+  matchesPattern(value, patterns) {
+    const lowerValue = value.toLowerCase();
+    for (const pattern of patterns) {
+      const lowerPattern = pattern.toLowerCase();
+      if (lowerValue.includes(lowerPattern)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Get a single render by id
+   */
+  getRender(id) {
+    return this.renders.get(id);
+  }
+
+  /**
+   * Clear all tracked renders
+   */
+  clear() {
+    this.renders.clear();
+    this.notifyListeners();
+  }
+
+  /**
+   * Reset render count for a specific component
+   */
+  resetRenderCount(id) {
+    const render = this.renders.get(id);
+    if (render) {
+      render.renderCount = 0;
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Start tracking
+   */
+  start() {
+    this.isTracking = true;
+    this.isPaused = false;
+    this.notifyStateListeners();
+  }
+
+  /**
+   * Stop tracking
+   */
+  stop() {
+    this.isTracking = false;
+    this.isPaused = false;
+    this.notifyStateListeners();
+  }
+
+  /**
+   * Pause tracking (keeps state but stops adding new renders)
+   */
+  pause() {
+    this.isPaused = true;
+    this.notifyStateListeners();
+  }
+
+  /**
+   * Resume tracking
+   */
+  resume() {
+    this.isPaused = false;
+    this.notifyStateListeners();
+  }
+
+  /**
+   * Toggle pause state
+   */
+  togglePause() {
+    this.isPaused = !this.isPaused;
+    this.notifyStateListeners();
+  }
+
+  /**
+   * Get current tracking state
+   */
+  getState() {
+    return {
+      isTracking: this.isTracking,
+      isPaused: this.isPaused
+    };
+  }
+
+  /**
+   * Replace all tracked renders (and optionally tracking state) from a
+   * synced device snapshot. Remote mirror mode only (desktop dashboard) —
+   * nothing tracks locally there, so this is the sole data source. Filters
+   * and search stay local: they apply at read time via getFilteredRenders.
+   */
+  replaceRenders(renders, state) {
+    this.renders = new Map(renders.map(render => [render.id, render]));
+    if (state && (this.isTracking !== state.isTracking || this.isPaused !== state.isPaused)) {
+      this.isTracking = state.isTracking;
+      this.isPaused = state.isPaused;
+      this.notifyStateListeners();
+    }
+    this.notifyListeners();
+  }
+
+  /**
+   * Get filter config
+   */
+  getFilters() {
+    return this.filters;
+  }
+
+  /**
+   * Update filter config
+   */
+  setFilters(filters) {
+    this.filters = {
+      ...this.filters,
+      ...filters
+    };
+    this.notifyListeners();
+    this.notifyFilterListeners();
+  }
+
+  /**
+   * Add an include pattern
+   */
+  addIncludePattern(type, pattern) {
+    const key = `include${type.charAt(0).toUpperCase() + type.slice(1)}`;
+    this.filters[key].add(pattern);
+    this.notifyListeners();
+  }
+
+  /**
+   * Remove an include pattern
+   */
+  removeIncludePattern(type, pattern) {
+    const key = `include${type.charAt(0).toUpperCase() + type.slice(1)}`;
+    this.filters[key].delete(pattern);
+    this.notifyListeners();
+  }
+
+  /**
+   * Add an exclude pattern
+   */
+  addExcludePattern(type, pattern) {
+    const key = `exclude${type.charAt(0).toUpperCase() + type.slice(1)}`;
+    this.filters[key].add(pattern);
+    this.notifyListeners();
+  }
+
+  /**
+   * Remove an exclude pattern
+   */
+  removeExcludePattern(type, pattern) {
+    const key = `exclude${type.charAt(0).toUpperCase() + type.slice(1)}`;
+    this.filters[key].delete(pattern);
+    this.notifyListeners();
+  }
+
+  /**
+   * Clear all filters
+   */
+  clearFilters() {
+    this.filters = {
+      includeTestID: new Set(),
+      includeNativeID: new Set(),
+      includeViewType: new Set(),
+      includeComponent: new Set(),
+      excludeTestID: new Set(),
+      excludeNativeID: new Set(),
+      excludeViewType: new Set(),
+      excludeComponent: new Set(),
+      includePatterns: [],
+      excludePatterns: [],
+      minRenderCount: undefined,
+      maxRenderCount: undefined
+    };
+    this.notifyListeners();
+  }
+
+  /**
+   * Get available prop values from tracked renders
+   */
+  getAvailableProps() {
+    const viewTypes = new Set();
+    const testIDs = new Set();
+    const nativeIDs = new Set();
+    const componentNames = new Set();
+    const accessibilityLabels = new Set();
+    for (const render of this.renders.values()) {
+      if (render.viewType) viewTypes.add(render.viewType);
+      if (render.testID) testIDs.add(render.testID);
+      if (render.nativeID) nativeIDs.add(render.nativeID);
+      if (render.componentName) componentNames.add(render.componentName);
+      if (render.accessibilityLabel) accessibilityLabels.add(render.accessibilityLabel);
+    }
+    return {
+      viewTypes: Array.from(viewTypes).sort(),
+      testIDs: Array.from(testIDs).sort(),
+      nativeIDs: Array.from(nativeIDs).sort(),
+      componentNames: Array.from(componentNames).sort(),
+      accessibilityLabels: Array.from(accessibilityLabels).sort()
+    };
+  }
+
+  /**
+   * Get summary stats
+   */
+  getStats() {
+    let totalRenders = 0;
+    for (const render of this.renders.values()) {
+      totalRenders += render.renderCount;
+    }
+    return {
+      totalComponents: this.renders.size,
+      totalRenders
+    };
+  }
+
+  /**
+   * Subscribe to render updates
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    // Immediately notify with current state
+    listener(this.getRenders());
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * Subscribe to state changes (tracking/paused)
+   */
+  subscribeToState(listener) {
+    this.stateListeners.add(listener);
+    // Immediately notify with current state
+    listener(this.getState());
+    return () => {
+      this.stateListeners.delete(listener);
+    };
+  }
+
+  /**
+   * Subscribe to settings changes
+   */
+  subscribeToSettings(listener) {
+    this.settingsListeners.add(listener);
+    // Immediately notify with current settings
+    listener(this.settings);
+    return () => {
+      this.settingsListeners.delete(listener);
+    };
+  }
+
+  /**
+   * Subscribe to filter changes
+   */
+  subscribeToFilters(listener) {
+    this.filterListeners.add(listener);
+    // Immediately notify with current filters
+    listener(this.filters);
+    return () => {
+      this.filterListeners.delete(listener);
+    };
+  }
+
+  /**
+   * Subscribe to individual render events as they occur.
+   * Used by unified events system to integrate render events into the timeline.
+   *
+   * @param callback - Called for each render event with the event and component info
+   * @returns Unsubscribe function
+   */
+  onRenderEvent(callback) {
+    this.renderEventCallbacks.add(callback);
+    return () => {
+      this.renderEventCallbacks.delete(callback);
+    };
+  }
+
+  /**
+   * Get the number of render event callbacks (for debugging)
+   */
+  getRenderEventCallbackCount() {
+    return this.renderEventCallbacks.size;
+  }
+
+  /**
+   * Check if a render should be visible based on current filters
+   * Used by the overlay to filter frozen highlights
+   */
+  shouldShowRender(render) {
+    const filters = this.filters;
+
+    // Check new pattern-based filters first
+    if (filters.includePatterns.length > 0) {
+      if (!this.matchesAnyPatternForInfo(render, filters.includePatterns)) {
+        return false;
+      }
+    }
+    if (filters.excludePatterns.length > 0) {
+      if (this.matchesAnyPatternForInfo(render, filters.excludePatterns)) {
+        return false;
+      }
+    }
+
+    // Legacy set-based filters
+    const hasLegacyIncludeFilters = filters.includeViewType.size > 0 || filters.includeTestID.size > 0 || filters.includeNativeID.size > 0 || filters.includeComponent.size > 0;
+    if (hasLegacyIncludeFilters) {
+      const matchesInclude = filters.includeViewType.size > 0 && filters.includeViewType.has(render.viewType) || filters.includeTestID.size > 0 && render.testID && filters.includeTestID.has(render.testID) || filters.includeNativeID.size > 0 && render.nativeID && filters.includeNativeID.has(render.nativeID) || filters.includeComponent.size > 0 && render.componentName && filters.includeComponent.has(render.componentName);
+      if (!matchesInclude) {
+        return false;
+      }
+    }
+
+    // Check exclude filters
+    if (filters.excludeViewType.has(render.viewType)) return false;
+    if (render.testID && filters.excludeTestID.has(render.testID)) return false;
+    if (render.nativeID && filters.excludeNativeID.has(render.nativeID)) return false;
+    if (render.componentName && filters.excludeComponent.has(render.componentName)) return false;
+    return true;
+  }
+
+  /**
+   * Get current settings
+   */
+  getSettings() {
+    return {
+      ...this.settings
+    };
+  }
+
+  /**
+   * Update settings
+   */
+  setSettings(newSettings) {
+    // Validate batchSize
+    if (newSettings.batchSize !== undefined) {
+      newSettings.batchSize = Math.max(10, Math.min(500, newSettings.batchSize));
+    }
+
+    // Validate maxRenderHistoryPerComponent
+    if (newSettings.maxRenderHistoryPerComponent !== undefined) {
+      newSettings.maxRenderHistoryPerComponent = Math.max(5, Math.min(50, newSettings.maxRenderHistoryPerComponent));
+    }
+
+    // If enabling render history, also enable trackRenderCauses
+    if (newSettings.enableRenderHistory && !this.settings.trackRenderCauses) {
+      newSettings.trackRenderCauses = true;
+    }
+
+    // If disabling trackRenderCauses, also disable render history
+    if (newSettings.trackRenderCauses === false && this.settings.enableRenderHistory) {
+      newSettings.enableRenderHistory = false;
+    }
+    this.settings = {
+      ...this.settings,
+      ...newSettings
+    };
+
+    // Sync performance logging with PerformanceLogger
+    if (newSettings.performanceLogging !== undefined) {
+      PerformanceLogger.setEnabled(newSettings.performanceLogging);
+    }
+    this.notifySettingsListeners();
+  }
+
+  /**
+   * Clear render history for all components
+   */
+  clearAllRenderHistory() {
+    for (const render of this.renders.values()) {
+      render.renderHistory = [];
+    }
+    this.notifyListeners();
+  }
+
+  /**
+   * Clear render history for a specific component
+   */
+  clearRenderHistory(id) {
+    const render = this.renders.get(id);
+    if (render) {
+      render.renderHistory = [];
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Get render history stats for debugging
+   */
+  getRenderHistoryStats() {
+    let totalEvents = 0;
+    let componentsWithHistory = 0;
+    for (const render of this.renders.values()) {
+      if (render.renderHistory && render.renderHistory.length > 0) {
+        totalEvents += render.renderHistory.length;
+        componentsWithHistory++;
+      }
+    }
+    return {
+      totalEvents,
+      componentsWithHistory,
+      averageEventsPerComponent: componentsWithHistory > 0 ? totalEvents / componentsWithHistory : 0
+    };
+  }
+
+  /**
+   * Get batch size (convenience method)
+   */
+  getBatchSize() {
+    return this.settings.batchSize;
+  }
+
+  /**
+   * Set batch size (convenience method)
+   */
+  setBatchSize(size) {
+    this.setSettings({
+      batchSize: size
+    });
+  }
+  notifyListeners() {
+    const renders = this.getRenders();
+    for (const listener of this.listeners) {
+      try {
+        listener(renders);
+      } catch (error) {
+        console.error("[RenderTracker] Error in listener:", error);
+      }
+    }
+  }
+  notifyStateListeners() {
+    const state = this.getState();
+    for (const listener of this.stateListeners) {
+      try {
+        listener(state);
+      } catch (error) {
+        console.error("[RenderTracker] Error in state listener:", error);
+      }
+    }
+  }
+  notifySettingsListeners() {
+    const settings = this.getSettings();
+    for (const listener of this.settingsListeners) {
+      try {
+        listener(settings);
+      } catch (error) {
+        console.error("[RenderTracker] Error in settings listener:", error);
+      }
+    }
+  }
+  notifyFilterListeners() {
+    const filters = this.getFilters();
+    for (const listener of this.filterListeners) {
+      try {
+        listener(filters);
+      } catch (error) {
+        console.error("[RenderTracker] Error in filter listener:", error);
+      }
+    }
+  }
+}
+
+// Export singleton instance
+export const RenderTracker = new RenderTrackerSingleton();
+export default RenderTracker;