@buoy-gg/highlight-updates 3.0.0 → 3.0.2

package/lib/module/highlight-updates/components/RendersCopySettingsView.js

@@ -1 +1,558 @@
-"use strict";import{useCallback,useEffect,useMemo,useState}from"react";import{Text,StyleSheet,ScrollView,View,TouchableOpacity}from"react-native";import{DynamicFilterView,macOSColors,FileText,FileCode,Zap,Settings,Eye,ChevronDown,ChevronUp,AlertTriangle,Layers,ToolbarCopyButton}from"@buoy-gg/shared-ui";import{DEFAULT_COPY_SETTINGS,COPY_PRESETS,PRESET_METADATA,detectActivePreset}from"../types/copySettings";import{generateExport,estimateExportSize,getExportSummary}from"../utils/rendersExportFormatter";import{loadCopySettings,saveCopySettings}from"../utils/copySettingsStorage";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const SIZE_WARNING_THRESHOLD=51200,SIZE_DANGER_THRESHOLD=204800,CAUSE_OPTIONS=[{value:"mount",label:"Mount"},{value:"props",label:"Props"},{value:"hooks",label:"Hooks"},{value:"state",label:"State"},{value:"parent",label:"Parent"},{value:"context",label:"Context"},{value:"unknown",label:"Unknown"}];function formatBytes(e){return e<1024?`${e} B`:e<1048576?`${(e/1024).toFixed(1)} KB`:`${(e/1048576).toFixed(1)} MB`}function createMockRenders(){const e=Date.now();return[{id:"1",nativeTag:1,viewType:"RCTView",displayName:"View",componentName:"PokemonListItem",renderCount:30,firstRenderTime:e-5e3,lastRenderTime:e,color:"#10B981",lastRenderCause:{type:"parent",timestamp:e,componentCause:"parent"}},{id:"2",nativeTag:2,viewType:"RCTView",displayName:"View",componentName:"CartHeader",renderCount:12,firstRenderTime:e-4e3,lastRenderTime:e,color:"#3B82F6",lastRenderCause:{type:"hooks",timestamp:e,componentCause:"state",hookChanges:[{type:"useState",index:2,previousValue:4,currentValue:5}]}},{id:"3",nativeTag:3,viewType:"RCTView",displayName:"View",componentName:"SearchBar",renderCount:8,firstRenderTime:e-3e3,lastRenderTime:e,color:"#F59E0B",lastRenderCause:{type:"props",timestamp:e,componentCause:"props",changedKeys:["query","onChange"]}}]}export function RendersCopySettingsView({renders:e}){const[t,o]=useState(DEFAULT_COPY_SETTINGS),[s,r]=useState(!1);useEffect(()=>{let e=!0;return loadCopySettings().then(t=>{e&&t&&o(t)}),()=>{e=!1}},[]);const a=useCallback(e=>{o(e),saveCopySettings(e)},[]),l=e.length>0,i=l?e:createMockRenders(),n=useMemo(()=>detectActivePreset(t),[t]),c=useMemo(()=>estimateExportSize(i,t),[i,t]),d=useMemo(()=>c>=204800?"danger":c>=51200?"warning":"none",[c]),u=useCallback(()=>generateExport(i,t),[i,t]),m=useCallback(e=>{const t=COPY_PRESETS[e];a({...t,filterCauses:[...t.filterCauses]})},[a]),p=useCallback((e,o)=>{const[s,r]=e.split("::");if("preset"!==s)if("format"!==s)if("sort"!==s)if("topN"!==s)if("minRenders"!==s){if("cause"===s){const e=o,s=t.filterCauses.includes(e);return void a({...t,filterCauses:s?t.filterCauses.filter(t=>t!==e):[...t.filterCauses,e]})}if("signal"===s){const e=r;return void a({...t,[e]:!t[e]})}}else a({...t,minRenders:o});else a({...t,topN:o});else a({...t,sortBy:o});else a({...t,format:o});else m(r)},[t,a,m]),y=useCallback(()=>{const{totalComponents:e,totalRenders:t}=getExportSummary(i);if(!s){const o="danger"===d?macOSColors.semantic.error:"warning"===d?macOSColors.semantic.warning:macOSColors.text.secondary;return _jsxs(View,{style:styles.collapsedPreview,children:[_jsx(TouchableOpacity,{style:styles.expandButton,onPress:()=>r(!0),children:_jsxs(View,{style:styles.expandButtonContent,children:[_jsx(Eye,{size:16,color:macOSColors.semantic.info}),_jsxs(View,{style:styles.expandButtonTextContainer,children:[_jsx(Text,{style:styles.expandButtonTitle,children:"Show Preview"}),_jsxs(Text,{style:styles.expandButtonSubtitle,children:[e," component",1!==e?"s":""," · ",t," renders · ~",formatBytes(c),l?"":" (mock data)"]})]}),_jsx(ChevronDown,{size:16,color:macOSColors.text.muted})]})}),"none"!==d&&_jsxs(View,{style:[styles.sizeWarning,"danger"===d&&styles.sizeWarningDanger],children:[_jsx(AlertTriangle,{size:12,color:o}),_jsx(Text,{style:[styles.sizeWarningText,{color:o}],children:"danger"===d?"Very large payload — try a smaller topN or turn off history":"Large payload — preview may be slow"})]})]})}const o=u();return _jsxs(View,{children:[_jsxs(TouchableOpacity,{style:styles.collapseButton,onPress:()=>r(!1),children:[_jsx(Text,{style:styles.collapseButtonText,children:"Hide Preview"}),_jsx(ChevronUp,{size:14,color:macOSColors.text.secondary})]}),_jsx(ScrollView,{style:styles.previewScroll,nestedScrollEnabled:!0,children:_jsx(Text,{style:styles.previewText,selectable:!0,children:o})})]})},[s,i,c,d,l,u]),g=useCallback(()=>{const{totalComponents:e}=getExportSummary(i),t=l?`${e} components`:"Mock data (no renders captured)";return _jsxs(_Fragment,{children:[_jsx(Text,{style:styles.statusLabel,children:t}),_jsx(ToolbarCopyButton,{value:u})]})},[l,i,u]),C=useMemo(()=>({sections:[{id:"presets",title:"Presets",type:"custom",data:[{id:"preset::llm",label:PRESET_METADATA.llm.label,icon:Zap,color:PRESET_METADATA.llm.color,value:"llm",isActive:"llm"===n,description:PRESET_METADATA.llm.description},{id:"preset::table",label:PRESET_METADATA.table.label,icon:FileText,color:PRESET_METADATA.table.color,value:"table",isActive:"table"===n,description:PRESET_METADATA.table.description},{id:"preset::json",label:PRESET_METADATA.json.label,icon:FileCode,color:PRESET_METADATA.json.color,value:"json",isActive:"json"===n,description:PRESET_METADATA.json.description},{id:"preset::full",label:PRESET_METADATA.full.label,icon:Layers,color:PRESET_METADATA.full.color,value:"full",isActive:"full"===n,description:PRESET_METADATA.full.description},{id:"preset::custom",label:"Custom",icon:Settings,color:macOSColors.text.secondary,value:"custom",isActive:null===n,description:"User-configured"}]},{id:"format",title:"Format",type:"custom",data:[{id:"format::summary",label:"Summary",icon:Zap,color:macOSColors.semantic.success,value:"summary",isActive:"summary"===t.format,description:"Compact, LLM-ready"},{id:"format::markdown-table",label:"Table",icon:FileText,color:macOSColors.semantic.info,value:"markdown-table",isActive:"markdown-table"===t.format,description:"Markdown table"},{id:"format::json",label:"JSON",icon:FileCode,color:macOSColors.semantic.warning,value:"json",isActive:"json"===t.format,description:"Structured data"}]},{id:"sort",title:"Sort By",type:"custom",data:[{id:"sort::renderCount",label:"Count",value:"renderCount",isActive:"renderCount"===t.sortBy,description:"Total renders"},{id:"sort::rate",label:"Rate",value:"rate",isActive:"rate"===t.sortBy,description:"Renders / sec"},{id:"sort::name",label:"Name",value:"name",isActive:"name"===t.sortBy,description:"Alphabetical"}]},{id:"topN",title:"Top N",type:"custom",data:[{id:"topN::10",label:"10",value:10,isActive:10===t.topN},{id:"topN::25",label:"25",value:25,isActive:25===t.topN},{id:"topN::50",label:"50",value:50,isActive:50===t.topN},{id:"topN::100",label:"100",value:100,isActive:100===t.topN},{id:"topN::-1",label:"All",value:-1,isActive:-1===t.topN}]},{id:"minRenders",title:"Min Renders",type:"custom",data:[{id:"minRenders::1",label:"1",value:1,isActive:1===t.minRenders},{id:"minRenders::2",label:"2",value:2,isActive:2===t.minRenders},{id:"minRenders::3",label:"3",value:3,isActive:3===t.minRenders},{id:"minRenders::5",label:"5",value:5,isActive:5===t.minRenders},{id:"minRenders::10",label:"10",value:10,isActive:10===t.minRenders}]},{id:"causes",title:"Filter Causes",type:"custom",description:0===t.filterCauses.length?"All causes shown":"Only the selected causes shown",data:CAUSE_OPTIONS.map(e=>({id:`cause::${e.value}`,label:e.label,value:e.value,isActive:t.filterCauses.includes(e.value)}))},{id:"signal",title:"Signal Extraction",type:"custom",data:[{id:"signal::groupByName",label:"Group by name",value:"groupByName",isActive:t.groupByName,description:"Collapse list items"},{id:"signal::aggregateCauses",label:"Aggregate causes",value:"aggregateCauses",isActive:t.aggregateCauses,description:"Hook x N"},{id:"signal::includeHistory",label:"Include history",value:"includeHistory",isActive:t.includeHistory,description:"JSON only — large"}]}],previewSection:{enabled:!0,title:"PREVIEW",icon:Eye,content:y,headerActions:g},onFilterChange:p}),[t,n,p,y,g]);return _jsx(DynamicFilterView,{...C})}const styles=StyleSheet.create({collapsedPreview:{gap:8},expandButton:{backgroundColor:macOSColors.background.input,borderRadius:8,borderWidth:1,borderColor:macOSColors.border.default,padding:12},expandButtonContent:{flexDirection:"row",alignItems:"center",gap:10},expandButtonTextContainer:{flex:1},expandButtonTitle:{fontSize:13,fontWeight:"600",color:macOSColors.text.primary},expandButtonSubtitle:{fontSize:11,color:macOSColors.text.secondary,marginTop:2},collapseButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:8,marginBottom:8,backgroundColor:macOSColors.background.hover,borderRadius:6,borderWidth:1,borderColor:macOSColors.border.default},collapseButtonText:{fontSize:12,fontWeight:"500",color:macOSColors.text.secondary},sizeWarning:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:6,backgroundColor:macOSColors.semantic.warningBackground,borderRadius:6,borderWidth:1,borderColor:macOSColors.semantic.warning+"30"},sizeWarningDanger:{backgroundColor:macOSColors.semantic.errorBackground,borderColor:macOSColors.semantic.error+"30"},sizeWarningText:{fontSize:11,fontWeight:"500",flex:1},previewScroll:{maxHeight:360},previewText:{fontFamily:"monospace",fontSize:11,color:macOSColors.text.primary,lineHeight:18},statusLabel:{fontSize:11,fontWeight:"600",color:macOSColors.text.muted,marginRight:8}});
+"use strict";
+
+/**
+ * RendersCopySettingsView
+ *
+ * Settings UI for configuring render report export.
+ * Mirrors EventsCopySettingsView but with renders-specific options.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Text, StyleSheet, ScrollView, View, TouchableOpacity } from "react-native";
+import { DynamicFilterView, macOSColors, FileText, FileCode, Zap, Settings, Eye, ChevronDown, ChevronUp, AlertTriangle, Layers, ToolbarCopyButton } from "@buoy-gg/shared-ui";
+import { DEFAULT_COPY_SETTINGS, COPY_PRESETS, PRESET_METADATA, detectActivePreset } from "../types/copySettings";
+import { generateExport, estimateExportSize, getExportSummary } from "../utils/rendersExportFormatter";
+import { loadCopySettings, saveCopySettings } from "../utils/copySettingsStorage";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SIZE_WARNING_THRESHOLD = 50 * 1024;
+const SIZE_DANGER_THRESHOLD = 200 * 1024;
+const CAUSE_OPTIONS = [{
+  value: "mount",
+  label: "Mount"
+}, {
+  value: "props",
+  label: "Props"
+}, {
+  value: "hooks",
+  label: "Hooks"
+}, {
+  value: "state",
+  label: "State"
+}, {
+  value: "parent",
+  label: "Parent"
+}, {
+  value: "context",
+  label: "Context"
+}, {
+  value: "unknown",
+  label: "Unknown"
+}];
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function createMockRenders() {
+  const now = Date.now();
+  return [{
+    id: "1",
+    nativeTag: 1,
+    viewType: "RCTView",
+    displayName: "View",
+    componentName: "PokemonListItem",
+    renderCount: 30,
+    firstRenderTime: now - 5000,
+    lastRenderTime: now,
+    color: "#10B981",
+    lastRenderCause: {
+      type: "parent",
+      timestamp: now,
+      componentCause: "parent"
+    }
+  }, {
+    id: "2",
+    nativeTag: 2,
+    viewType: "RCTView",
+    displayName: "View",
+    componentName: "CartHeader",
+    renderCount: 12,
+    firstRenderTime: now - 4000,
+    lastRenderTime: now,
+    color: "#3B82F6",
+    lastRenderCause: {
+      type: "hooks",
+      timestamp: now,
+      componentCause: "state",
+      hookChanges: [{
+        type: "useState",
+        index: 2,
+        previousValue: 4,
+        currentValue: 5
+      }]
+    }
+  }, {
+    id: "3",
+    nativeTag: 3,
+    viewType: "RCTView",
+    displayName: "View",
+    componentName: "SearchBar",
+    renderCount: 8,
+    firstRenderTime: now - 3000,
+    lastRenderTime: now,
+    color: "#F59E0B",
+    lastRenderCause: {
+      type: "props",
+      timestamp: now,
+      componentCause: "props",
+      changedKeys: ["query", "onChange"]
+    }
+  }];
+}
+export function RendersCopySettingsView({
+  renders
+}) {
+  const [settings, setSettings] = useState(DEFAULT_COPY_SETTINGS);
+  const [isPreviewExpanded, setIsPreviewExpanded] = useState(false);
+  useEffect(() => {
+    let mounted = true;
+    loadCopySettings().then(saved => {
+      if (mounted && saved) setSettings(saved);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  const updateSettings = useCallback(next => {
+    setSettings(next);
+    saveCopySettings(next);
+  }, []);
+  const hasLiveData = renders.length > 0;
+  const previewRenders = hasLiveData ? renders : createMockRenders();
+  const activePreset = useMemo(() => detectActivePreset(settings), [settings]);
+  const estimatedSize = useMemo(() => estimateExportSize(previewRenders, settings), [previewRenders, settings]);
+  const sizeWarningLevel = useMemo(() => {
+    if (estimatedSize >= SIZE_DANGER_THRESHOLD) return "danger";
+    if (estimatedSize >= SIZE_WARNING_THRESHOLD) return "warning";
+    return "none";
+  }, [estimatedSize]);
+  const generateCopyText = useCallback(() => generateExport(previewRenders, settings), [previewRenders, settings]);
+  const applyPreset = useCallback(name => {
+    const preset = COPY_PRESETS[name];
+    updateSettings({
+      ...preset,
+      filterCauses: [...preset.filterCauses]
+    });
+  }, [updateSettings]);
+  const handleOptionChange = useCallback((optionId, value) => {
+    const [group, key] = optionId.split("::");
+    if (group === "preset") {
+      applyPreset(key);
+      return;
+    }
+    if (group === "format") {
+      updateSettings({
+        ...settings,
+        format: value
+      });
+      return;
+    }
+    if (group === "sort") {
+      updateSettings({
+        ...settings,
+        sortBy: value
+      });
+      return;
+    }
+    if (group === "topN") {
+      updateSettings({
+        ...settings,
+        topN: value
+      });
+      return;
+    }
+    if (group === "minRenders") {
+      updateSettings({
+        ...settings,
+        minRenders: value
+      });
+      return;
+    }
+    if (group === "cause") {
+      const cause = value;
+      const has = settings.filterCauses.includes(cause);
+      updateSettings({
+        ...settings,
+        filterCauses: has ? settings.filterCauses.filter(c => c !== cause) : [...settings.filterCauses, cause]
+      });
+      return;
+    }
+    if (group === "signal") {
+      const k = key;
+      updateSettings({
+        ...settings,
+        [k]: !settings[k]
+      });
+      return;
+    }
+  }, [settings, updateSettings, applyPreset]);
+  const renderPreviewContent = useCallback(() => {
+    const {
+      totalComponents,
+      totalRenders
+    } = getExportSummary(previewRenders);
+    if (!isPreviewExpanded) {
+      const warningColor = sizeWarningLevel === "danger" ? macOSColors.semantic.error : sizeWarningLevel === "warning" ? macOSColors.semantic.warning : macOSColors.text.secondary;
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.collapsedPreview,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.expandButton,
+          onPress: () => setIsPreviewExpanded(true),
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.expandButtonContent,
+            children: [/*#__PURE__*/_jsx(Eye, {
+              size: 16,
+              color: macOSColors.semantic.info
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.expandButtonTextContainer,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.expandButtonTitle,
+                children: "Show Preview"
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.expandButtonSubtitle,
+                children: [totalComponents, " component", totalComponents !== 1 ? "s" : "", " \xB7 ", totalRenders, " renders \xB7 ~", formatBytes(estimatedSize), !hasLiveData ? " (mock data)" : ""]
+              })]
+            }), /*#__PURE__*/_jsx(ChevronDown, {
+              size: 16,
+              color: macOSColors.text.muted
+            })]
+          })
+        }), sizeWarningLevel !== "none" && /*#__PURE__*/_jsxs(View, {
+          style: [styles.sizeWarning, sizeWarningLevel === "danger" && styles.sizeWarningDanger],
+          children: [/*#__PURE__*/_jsx(AlertTriangle, {
+            size: 12,
+            color: warningColor
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.sizeWarningText, {
+              color: warningColor
+            }],
+            children: sizeWarningLevel === "danger" ? "Very large payload — try a smaller topN or turn off history" : "Large payload — preview may be slow"
+          })]
+        })]
+      });
+    }
+    const exportText = generateCopyText();
+    return /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.collapseButton,
+        onPress: () => setIsPreviewExpanded(false),
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.collapseButtonText,
+          children: "Hide Preview"
+        }), /*#__PURE__*/_jsx(ChevronUp, {
+          size: 14,
+          color: macOSColors.text.secondary
+        })]
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.previewScroll,
+        nestedScrollEnabled: true,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.previewText,
+          selectable: true,
+          children: exportText
+        })
+      })]
+    });
+  }, [isPreviewExpanded, previewRenders, estimatedSize, sizeWarningLevel, hasLiveData, generateCopyText]);
+  const renderPreviewHeaderActions = useCallback(() => {
+    const {
+      totalComponents
+    } = getExportSummary(previewRenders);
+    const statusLabel = hasLiveData ? `${totalComponents} components` : "Mock data (no renders captured)";
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.statusLabel,
+        children: statusLabel
+      }), /*#__PURE__*/_jsx(ToolbarCopyButton, {
+        value: generateCopyText
+      })]
+    });
+  }, [hasLiveData, previewRenders, generateCopyText]);
+  const dynamicFilterConfig = useMemo(() => ({
+    sections: [{
+      id: "presets",
+      title: "Presets",
+      type: "custom",
+      data: [{
+        id: "preset::llm",
+        label: PRESET_METADATA.llm.label,
+        icon: Zap,
+        color: PRESET_METADATA.llm.color,
+        value: "llm",
+        isActive: activePreset === "llm",
+        description: PRESET_METADATA.llm.description
+      }, {
+        id: "preset::table",
+        label: PRESET_METADATA.table.label,
+        icon: FileText,
+        color: PRESET_METADATA.table.color,
+        value: "table",
+        isActive: activePreset === "table",
+        description: PRESET_METADATA.table.description
+      }, {
+        id: "preset::json",
+        label: PRESET_METADATA.json.label,
+        icon: FileCode,
+        color: PRESET_METADATA.json.color,
+        value: "json",
+        isActive: activePreset === "json",
+        description: PRESET_METADATA.json.description
+      }, {
+        id: "preset::full",
+        label: PRESET_METADATA.full.label,
+        icon: Layers,
+        color: PRESET_METADATA.full.color,
+        value: "full",
+        isActive: activePreset === "full",
+        description: PRESET_METADATA.full.description
+      }, {
+        id: "preset::custom",
+        label: "Custom",
+        icon: Settings,
+        color: macOSColors.text.secondary,
+        value: "custom",
+        isActive: activePreset === null,
+        description: "User-configured"
+      }]
+    }, {
+      id: "format",
+      title: "Format",
+      type: "custom",
+      data: [{
+        id: "format::summary",
+        label: "Summary",
+        icon: Zap,
+        color: macOSColors.semantic.success,
+        value: "summary",
+        isActive: settings.format === "summary",
+        description: "Compact, LLM-ready"
+      }, {
+        id: "format::markdown-table",
+        label: "Table",
+        icon: FileText,
+        color: macOSColors.semantic.info,
+        value: "markdown-table",
+        isActive: settings.format === "markdown-table",
+        description: "Markdown table"
+      }, {
+        id: "format::json",
+        label: "JSON",
+        icon: FileCode,
+        color: macOSColors.semantic.warning,
+        value: "json",
+        isActive: settings.format === "json",
+        description: "Structured data"
+      }]
+    }, {
+      id: "sort",
+      title: "Sort By",
+      type: "custom",
+      data: [{
+        id: "sort::renderCount",
+        label: "Count",
+        value: "renderCount",
+        isActive: settings.sortBy === "renderCount",
+        description: "Total renders"
+      }, {
+        id: "sort::rate",
+        label: "Rate",
+        value: "rate",
+        isActive: settings.sortBy === "rate",
+        description: "Renders / sec"
+      }, {
+        id: "sort::name",
+        label: "Name",
+        value: "name",
+        isActive: settings.sortBy === "name",
+        description: "Alphabetical"
+      }]
+    }, {
+      id: "topN",
+      title: "Top N",
+      type: "custom",
+      data: [{
+        id: "topN::10",
+        label: "10",
+        value: 10,
+        isActive: settings.topN === 10
+      }, {
+        id: "topN::25",
+        label: "25",
+        value: 25,
+        isActive: settings.topN === 25
+      }, {
+        id: "topN::50",
+        label: "50",
+        value: 50,
+        isActive: settings.topN === 50
+      }, {
+        id: "topN::100",
+        label: "100",
+        value: 100,
+        isActive: settings.topN === 100
+      }, {
+        id: "topN::-1",
+        label: "All",
+        value: -1,
+        isActive: settings.topN === -1
+      }]
+    }, {
+      id: "minRenders",
+      title: "Min Renders",
+      type: "custom",
+      data: [{
+        id: "minRenders::1",
+        label: "1",
+        value: 1,
+        isActive: settings.minRenders === 1
+      }, {
+        id: "minRenders::2",
+        label: "2",
+        value: 2,
+        isActive: settings.minRenders === 2
+      }, {
+        id: "minRenders::3",
+        label: "3",
+        value: 3,
+        isActive: settings.minRenders === 3
+      }, {
+        id: "minRenders::5",
+        label: "5",
+        value: 5,
+        isActive: settings.minRenders === 5
+      }, {
+        id: "minRenders::10",
+        label: "10",
+        value: 10,
+        isActive: settings.minRenders === 10
+      }]
+    }, {
+      id: "causes",
+      title: "Filter Causes",
+      type: "custom",
+      description: settings.filterCauses.length === 0 ? "All causes shown" : "Only the selected causes shown",
+      data: CAUSE_OPTIONS.map(opt => ({
+        id: `cause::${opt.value}`,
+        label: opt.label,
+        value: opt.value,
+        isActive: settings.filterCauses.includes(opt.value)
+      }))
+    }, {
+      id: "signal",
+      title: "Signal Extraction",
+      type: "custom",
+      data: [{
+        id: "signal::groupByName",
+        label: "Group by name",
+        value: "groupByName",
+        isActive: settings.groupByName,
+        description: "Collapse list items"
+      }, {
+        id: "signal::aggregateCauses",
+        label: "Aggregate causes",
+        value: "aggregateCauses",
+        isActive: settings.aggregateCauses,
+        description: "Hook x N"
+      }, {
+        id: "signal::includeHistory",
+        label: "Include history",
+        value: "includeHistory",
+        isActive: settings.includeHistory,
+        description: "JSON only — large"
+      }]
+    }],
+    previewSection: {
+      enabled: true,
+      title: "PREVIEW",
+      icon: Eye,
+      content: renderPreviewContent,
+      headerActions: renderPreviewHeaderActions
+    },
+    onFilterChange: handleOptionChange
+  }), [settings, activePreset, handleOptionChange, renderPreviewContent, renderPreviewHeaderActions]);
+  return /*#__PURE__*/_jsx(DynamicFilterView, {
+    ...dynamicFilterConfig
+  });
+}
+const styles = StyleSheet.create({
+  collapsedPreview: {
+    gap: 8
+  },
+  expandButton: {
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 12
+  },
+  expandButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  expandButtonTextContainer: {
+    flex: 1
+  },
+  expandButtonTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
+  expandButtonSubtitle: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    marginTop: 2
+  },
+  collapseButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  collapseButtonText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: macOSColors.text.secondary
+  },
+  sizeWarning: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.warning + "30"
+  },
+  sizeWarningDanger: {
+    backgroundColor: macOSColors.semantic.errorBackground,
+    borderColor: macOSColors.semantic.error + "30"
+  },
+  sizeWarningText: {
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  },
+  previewScroll: {
+    maxHeight: 360
+  },
+  previewText: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    lineHeight: 18
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    marginRight: 8
+  }
+});

package/lib/module/highlight-updates/components/StatsDisplay.js

@@ -1 +1,67 @@
-"use strict";import React,{useState,useEffect,memo}from"react";import{View,Text,StyleSheet}from"react-native";import{Activity,buoyColors}from"@buoy-gg/shared-ui";import{RenderTracker}from"../utils/RenderTracker";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function StatsDisplayInner(){const[e,t]=useState({totalComponents:0,totalRenders:0});return useEffect(()=>RenderTracker.subscribe(()=>{t(RenderTracker.getStats())}),[]),_jsxs(View,{nativeID:"__rn_buoy__stats-row",style:styles.headerChip,children:[_jsx(Activity,{size:12,color:buoyColors.primary}),_jsx(Text,{style:[styles.headerChipValue,{color:buoyColors.primary}],children:e.totalComponents})]})}export const StatsDisplay=memo(StatsDisplayInner);const styles=StyleSheet.create({headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:buoyColors.hover,paddingHorizontal:8,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:buoyColors.border},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:"monospace"}});export default StatsDisplay;
+"use strict";
+
+/**
+ * StatsDisplay
+ *
+ * Isolated component for displaying render statistics in the header.
+ * Subscribes to RenderTracker updates independently so parent header
+ * doesn't re-render when stats change.
+ *
+ * Following the optimization guide: move subscriptions to child components.
+ */
+
+import React, { useState, useEffect, memo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { Activity, buoyColors } from "@buoy-gg/shared-ui";
+import { RenderTracker } from "../utils/RenderTracker";
+
+/**
+ * Isolated stats display that owns its own subscription.
+ * Only this component re-renders when stats change.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function StatsDisplayInner() {
+  const [stats, setStats] = useState({
+    totalComponents: 0,
+    totalRenders: 0
+  });
+  useEffect(() => {
+    const unsubscribe = RenderTracker.subscribe(() => {
+      setStats(RenderTracker.getStats());
+    });
+    return unsubscribe;
+  }, []);
+  return /*#__PURE__*/_jsxs(View, {
+    nativeID: "__rn_buoy__stats-row",
+    style: styles.headerChip,
+    children: [/*#__PURE__*/_jsx(Activity, {
+      size: 12,
+      color: buoyColors.primary
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.headerChipValue, {
+        color: buoyColors.primary
+      }],
+      children: stats.totalComponents
+    })]
+  });
+}
+export const StatsDisplay = /*#__PURE__*/memo(StatsDisplayInner);
+const styles = StyleSheet.create({
+  headerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: buoyColors.hover,
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  }
+});
+export default StatsDisplay;

package/lib/module/highlight-updates/components/index.js

@@ -1 +1,16 @@
-"use strict";export{HighlightUpdatesModal}from"./HighlightUpdatesModal";export{RenderListItem}from"./RenderListItem";export{RenderDetailView}from"./RenderDetailView";export{HighlightFilterView}from"./HighlightFilterView";export{IdentifierBadge,CategoryBadge,IDENTIFIER_CONFIG}from"./IdentifierBadge";export{IsolatedRenderList}from"./IsolatedRenderList";export{StatsDisplay}from"./StatsDisplay";export{MainListHeader,FilterViewHeader,DetailViewHeader,HeaderActions,SearchSection}from"./ModalHeaderContent";
+"use strict";
+
+/**
+ * Highlight Updates Modal Components
+ */
+
+export { HighlightUpdatesModal } from "./HighlightUpdatesModal";
+export { RenderListItem } from "./RenderListItem";
+export { RenderDetailView } from "./RenderDetailView";
+export { HighlightFilterView } from "./HighlightFilterView";
+export { IdentifierBadge, CategoryBadge, IDENTIFIER_CONFIG } from "./IdentifierBadge";
+
+// Performance-optimized isolated components
+export { IsolatedRenderList } from "./IsolatedRenderList";
+export { StatsDisplay } from "./StatsDisplay";
+export { MainListHeader, FilterViewHeader, DetailViewHeader, HeaderActions, SearchSection } from "./ModalHeaderContent";