@buoy-gg/benchmark 2.1.3 → 2.1.4-beta.1

package/lib/commonjs/components/BenchmarkModal.js

@@ -1 +1,505 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BenchmarkModal=BenchmarkModal,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_benchmarking=require("../benchmarking"),_BenchmarkSessionCard=require("./BenchmarkSessionCard"),_BenchmarkDetailView=require("./BenchmarkDetailView"),_BenchmarkCompareView=require("./BenchmarkCompareView"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,o,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(s=t?r:a){if(s.has(e))return s.get(e);s.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?s(i,t,o):i[t]=e[t]);return i})(e,t)}const storageAdapter=(0,_benchmarking.createAsyncStorageAdapter)(),storage=storageAdapter?new _benchmarking.BenchmarkStorage(storageAdapter):null;function BenchmarkModal({visible:e,onClose:t,onBack:a,onMinimize:r,enableSharedModalDimensions:s=!1}){const[o,i]=(0,_react.useState)(!1),[n,c]=(0,_react.useState)([]),[l,m]=(0,_react.useState)(null),[d,u]=(0,_react.useState)("list"),[_,h]=(0,_react.useState)(!1),[p,x]=(0,_react.useState)(new Set),[g,y]=(0,_react.useState)(null),[j,R]=(0,_react.useState)(0);(0,_react.useRef)(!1),(0,_react.useEffect)(()=>{e&&storage&&(async()=>{const e=await storage.listReports();c(e)})()},[e,j]),(0,_react.useEffect)(()=>{const e=_benchmarking.benchmarkRecorder.subscribe(e=>{"start"===e?i(!0):"stop"===e&&(i(!1),R(e=>e+1))});return i(_benchmarking.benchmarkRecorder.isRecording()),e},[]);const b=(0,_react.useCallback)(async()=>{if(o){const e=_benchmarking.benchmarkRecorder.stopSession();e&&storage&&(await storage.saveReport(e),R(e=>e+1))}else{const e=(new Date).toLocaleString(void 0,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"});_benchmarking.benchmarkRecorder.startSession({name:`Benchmark ${e}`,captureMemory:!0,verbose:!1})}},[o]),S=(0,_react.useCallback)(async e=>{if(_)x(t=>{const a=new Set(t);return a.has(e.id)?a.delete(e.id):a.size<2&&a.add(e.id),a});else{if(!storage)return;const t=await storage.loadReport(e.id);t&&(m(t),u("detail"))}},[_]),C=(0,_react.useCallback)(e=>{h(!0),x(new Set([e.id]))},[]),T=(0,_react.useCallback)(async()=>{if(2!==p.size||!storage)return;const e=Array.from(p),[t,a]=await Promise.all([storage.loadReport(e[0]),storage.loadReport(e[1])]);if(t&&a){const[e,r]=t.createdAt<a.createdAt?[t,a]:[a,t];y({baseline:e,comparison:r}),u("compare"),h(!1),x(new Set)}},[p]),k=(0,_react.useCallback)(async()=>{storage&&(await storage.clearAll(),R(e=>e+1))},[]),f=(0,_react.useCallback)(async()=>{0!==p.size&&storage&&(await Promise.all(Array.from(p).map(e=>storage.deleteReport(e))),x(new Set),h(!1),R(e=>e+1))},[p]),v=(0,_react.useCallback)(()=>{"detail"===d||"compare"===d?(u("list"),m(null),y(null)):_?(h(!1),x(new Set)):a&&a()},[d,_,a]),B=(0,_react.useCallback)(()=>{l&&storage&&_reactNative.Alert.prompt("Rename Benchmark","Enter a new name for this benchmark:",[{text:"Cancel",style:"cancel"},{text:"Save",onPress:async e=>{e&&e.trim()&&(await storage.updateReport(l.id,{name:e.trim()}),m({...l,name:e.trim()}),R(e=>e+1))}}],"plain-text","")},[l]),O=(0,_react.useCallback)(async()=>{l&&storage&&(await storage.deleteReport(l.id),u("list"),m(null),R(e=>e+1))},[l]),w=(0,_react.useCallback)(async()=>{if(!g)return;const{baseline:e,comparison:t}=g,a=_benchmarking.BenchmarkComparator.compare(e,t),r=e=>e<1?`${(1e3*e).toFixed(0)}μs`:e<10?`${e.toFixed(2)}ms`:e<100?`${e.toFixed(1)}ms`:`${e.toFixed(0)}ms`,s=e=>`${e>=0?"+":""}${e.toFixed(1)}%`,o=["BENCHMARK COMPARISON RESULTS","============================","",`Overall: ${a.isImproved?"IMPROVED":"REGRESSED"} ${s(a.overallImprovement)}`,"","COMPARING","---------",`Baseline: ${e.name}`,`  Date: ${new Date(e.createdAt).toLocaleString()}`,`Comparison: ${t.name}`,`  Date: ${new Date(t.createdAt).toLocaleString()}`,"","TIMING COMPARISON","-----------------",`Measure Time:    ${r(e.stats.avgMeasureTime)} → ${r(t.stats.avgMeasureTime)} (${s(a.measureTimeImprovement)})`,`Pipeline Time:   ${r(e.stats.avgTotalTime)} → ${r(t.stats.avgTotalTime)} (${s(a.pipelineTimeImprovement)})`,`Filter Time:     ${r(e.stats.avgFilterTime)} → ${r(t.stats.avgFilterTime)} (${s(a.filterTimeImprovement)})`,`Track Time:      ${r(e.stats.avgTrackTime)} → ${r(t.stats.avgTrackTime)} (${s(a.trackTimeImprovement)})`,`Overlay Render:  ${r(e.stats.avgOverlayRenderTime)} → ${r(t.stats.avgOverlayRenderTime)} (${s(a.overlayRenderImprovement)})`,"","PERCENTILES","-----------",`P50 (Median):    ${r(e.stats.p50TotalTime)} → ${r(t.stats.p50TotalTime)}`,`P95:             ${r(e.stats.p95TotalTime)} → ${r(t.stats.p95TotalTime)}`,`P99:             ${r(e.stats.p99TotalTime)} → ${r(t.stats.p99TotalTime)}`,"","BATCH STATISTICS","----------------",`Total Batches:    ${e.stats.batchCount} → ${t.stats.batchCount}`,`Nodes Processed:  ${e.stats.totalNodesProcessed.toLocaleString()} → ${t.stats.totalNodesProcessed.toLocaleString()}`];null!=e.memoryDelta&&null!=t.memoryDelta&&o.push("","MEMORY","------",`Memory Delta:    ${(e.memoryDelta/1024/1024).toFixed(2)}MB → ${(t.memoryDelta/1024/1024).toFixed(2)}MB`),o.push("",`Compared at: ${new Date(a.comparedAt).toLocaleString()}`),await(0,_sharedUi.copyToClipboard)(o.join("\n"))},[g]),$=(0,_react.useCallback)(({item:e})=>(0,_jsxRuntime.jsx)(_BenchmarkSessionCard.BenchmarkSessionCard,{metadata:e,isSelected:p.has(e.id),onPress:()=>S(e),onLongPress:()=>C(e),selectionMode:_}),[_,p,S,C]),U=(0,_react.useCallback)(e=>e.id,[]),M=s?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.benchmark.modal(),N=(0,_react.useMemo)(()=>"detail"===d&&l?l.name:"compare"===d?"Compare":_?0===p.size?"Select 2 to compare":1===p.size?"Select 1 more":`${p.size} Selected`:"Benchmarks",[d,l,_,p]),P="list"!==d||_||a;return e?(0,_jsxRuntime.jsxs)(_sharedUi.JsModal,{visible:e,onClose:t,onBack:P?v:void 0,onMinimize:r,persistenceKey:M,header:{showToggleButton:!0,customContent:(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[P&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:v}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:N}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:["list"===d&&!_&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:o,onToggle:b,accessibilityLabel:"Toggle benchmark recording"}),n.length>=2&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>h(!0),style:styles.iconButton,children:(0,_jsxRuntime.jsx)(_sharedUi.GitBranch,{size:14,color:_sharedUi.macOSColors.semantic.info})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>R(e=>e+1),style:styles.iconButton,children:(0,_jsxRuntime.jsx)(_sharedUi.RefreshCw,{size:14,color:_sharedUi.macOSColors.text.secondary})}),n.length>0&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:k,style:styles.iconButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:_sharedUi.macOSColors.semantic.error})})]}),"detail"===d&&l&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:B,style:styles.iconButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Edit3,{size:14,color:_sharedUi.macOSColors.text.secondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:O,style:styles.iconButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:_sharedUi.macOSColors.semantic.error})})]}),"compare"===d&&g&&(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:w,style:styles.iconButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Copy,{size:14,color:_sharedUi.macOSColors.text.secondary})})}),_&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[2===p.size&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:T,style:[styles.iconButton,styles.compareButton],children:(0,_jsxRuntime.jsx)(_sharedUi.GitBranch,{size:14,color:_sharedUi.macOSColors.semantic.info})}),p.size>0&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:f,style:styles.iconButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:_sharedUi.macOSColors.semantic.error})})]})]})]})},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,children:[o&&"list"===d&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.recordingBanner,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.recordingDot}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.recordingText,children:"Recording..."}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:b,style:styles.stopButton,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.stopButtonText,children:"Stop"})})]}),"detail"===d&&l?(0,_jsxRuntime.jsx)(_BenchmarkDetailView.BenchmarkDetailView,{report:l}):"compare"===d&&g?(0,_jsxRuntime.jsx)(_BenchmarkCompareView.BenchmarkCompareView,{baseline:g.baseline,comparison:g.comparison}):0===n.length?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyIcon,children:"📊"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No Benchmarks Yet"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptySubtitle,children:"Press the record button to start capturing performance metrics"})]}):(0,_jsxRuntime.jsx)(_reactNative.FlatList,{data:n,renderItem:$,keyExtractor:U,contentContainerStyle:styles.listContent,ItemSeparatorComponent:()=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.separator}),scrollEnabled:!1})]}):null}const styles=_reactNative.StyleSheet.create({iconButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.macOSColors.background.hover,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,alignItems:"center",justifyContent:"center"},compareButton:{backgroundColor:_sharedUi.macOSColors.semantic.infoBackground,borderColor:_sharedUi.macOSColors.semantic.info},listContent:{paddingVertical:16},separator:{height:8},emptyState:{flex:1,justifyContent:"center",alignItems:"center",padding:32},emptyIcon:{fontSize:48,marginBottom:16},emptyTitle:{fontSize:16,fontWeight:"600",color:_sharedUi.macOSColors.text.primary,fontFamily:"monospace",marginBottom:8},emptySubtitle:{fontSize:13,color:_sharedUi.macOSColors.text.secondary,fontFamily:"monospace",textAlign:"center"},recordingBanner:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.macOSColors.semantic.errorBackground,paddingHorizontal:16,paddingVertical:12,borderBottomWidth:1,borderColor:_sharedUi.macOSColors.semantic.error},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:_sharedUi.macOSColors.semantic.error,marginRight:8},recordingText:{flex:1,fontSize:13,fontWeight:"600",color:_sharedUi.macOSColors.semantic.error,fontFamily:"monospace"},stopButton:{paddingHorizontal:12,paddingVertical:6,backgroundColor:_sharedUi.macOSColors.semantic.error,borderRadius:4},stopButtonText:{fontSize:12,fontWeight:"600",color:"#fff",fontFamily:"monospace"}});var _default=exports.default=BenchmarkModal;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BenchmarkModal = BenchmarkModal;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _benchmarking = require("../benchmarking");
+var _BenchmarkSessionCard = require("./BenchmarkSessionCard");
+var _BenchmarkDetailView = require("./BenchmarkDetailView");
+var _BenchmarkCompareView = require("./BenchmarkCompareView");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * BenchmarkModal
+ *
+ * Main modal component for the Benchmark dev tool.
+ * Provides recording controls, session list, detail views, and comparison.
+ */
+
+// Initialize storage
+const storageAdapter = (0, _benchmarking.createAsyncStorageAdapter)();
+const storage = storageAdapter ? new _benchmarking.BenchmarkStorage(storageAdapter) : null;
+function BenchmarkModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  // State
+  const [isRecording, setIsRecording] = (0, _react.useState)(false);
+  const [reports, setReports] = (0, _react.useState)([]);
+  const [selectedReport, setSelectedReport] = (0, _react.useState)(null);
+  const [viewMode, setViewMode] = (0, _react.useState)("list");
+  const [selectionMode, setSelectionMode] = (0, _react.useState)(false);
+  const [selectedIds, setSelectedIds] = (0, _react.useState)(new Set());
+  const [compareReports, setCompareReports] = (0, _react.useState)(null);
+  const [refreshKey, setRefreshKey] = (0, _react.useState)(0);
+  const hasLoadedState = (0, _react.useRef)(false);
+
+  // Load reports on mount
+  (0, _react.useEffect)(() => {
+    if (!visible || !storage) return;
+    const loadReports = async () => {
+      const list = await storage.listReports();
+      setReports(list);
+    };
+    loadReports();
+  }, [visible, refreshKey]);
+
+  // Subscribe to recorder state changes
+  (0, _react.useEffect)(() => {
+    const unsubscribe = _benchmarking.benchmarkRecorder.subscribe(event => {
+      if (event === "start") {
+        setIsRecording(true);
+      } else if (event === "stop") {
+        setIsRecording(false);
+        // Refresh list after stopping
+        setRefreshKey(k => k + 1);
+      }
+    });
+
+    // Sync initial state
+    setIsRecording(_benchmarking.benchmarkRecorder.isRecording());
+    return unsubscribe;
+  }, []);
+
+  // Handle start/stop recording
+  const handleToggleRecording = (0, _react.useCallback)(async () => {
+    if (isRecording) {
+      // Stop and save
+      const report = _benchmarking.benchmarkRecorder.stopSession();
+      if (report && storage) {
+        await storage.saveReport(report);
+        setRefreshKey(k => k + 1);
+      }
+    } else {
+      // Start new session
+      const timestamp = new Date().toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+      _benchmarking.benchmarkRecorder.startSession({
+        name: `Benchmark ${timestamp}`,
+        captureMemory: true,
+        verbose: false
+      });
+    }
+  }, [isRecording]);
+
+  // Handle report press
+  const handleReportPress = (0, _react.useCallback)(async metadata => {
+    if (selectionMode) {
+      // Toggle selection
+      setSelectedIds(prev => {
+        const next = new Set(prev);
+        if (next.has(metadata.id)) {
+          next.delete(metadata.id);
+        } else {
+          // Max 2 selections for comparison
+          if (next.size < 2) {
+            next.add(metadata.id);
+          }
+        }
+        return next;
+      });
+    } else {
+      // Load and show detail
+      if (!storage) return;
+      const report = await storage.loadReport(metadata.id);
+      if (report) {
+        setSelectedReport(report);
+        setViewMode("detail");
+      }
+    }
+  }, [selectionMode]);
+
+  // Handle long press to enter selection mode
+  const handleReportLongPress = (0, _react.useCallback)(metadata => {
+    setSelectionMode(true);
+    setSelectedIds(new Set([metadata.id]));
+  }, []);
+
+  // Handle compare button
+  const handleCompare = (0, _react.useCallback)(async () => {
+    if (selectedIds.size !== 2 || !storage) return;
+    const ids = Array.from(selectedIds);
+    const [report1, report2] = await Promise.all([storage.loadReport(ids[0]), storage.loadReport(ids[1])]);
+    if (report1 && report2) {
+      // Older report is baseline, newer is comparison
+      const [baseline, comparison] = report1.createdAt < report2.createdAt ? [report1, report2] : [report2, report1];
+      setCompareReports({
+        baseline,
+        comparison
+      });
+      setViewMode("compare");
+      setSelectionMode(false);
+      setSelectedIds(new Set());
+    }
+  }, [selectedIds]);
+
+  // Handle clear all
+  const handleClearAll = (0, _react.useCallback)(async () => {
+    if (storage) {
+      await storage.clearAll();
+      setRefreshKey(k => k + 1);
+    }
+  }, []);
+
+  // Handle delete selected
+  const handleDeleteSelected = (0, _react.useCallback)(async () => {
+    if (selectedIds.size === 0 || !storage) return;
+    await Promise.all(Array.from(selectedIds).map(id => storage.deleteReport(id)));
+    setSelectedIds(new Set());
+    setSelectionMode(false);
+    setRefreshKey(k => k + 1);
+  }, [selectedIds]);
+
+  // Handle back navigation
+  const handleBack = (0, _react.useCallback)(() => {
+    if (viewMode === "detail" || viewMode === "compare") {
+      setViewMode("list");
+      setSelectedReport(null);
+      setCompareReports(null);
+    } else if (selectionMode) {
+      setSelectionMode(false);
+      setSelectedIds(new Set());
+    } else if (onBack) {
+      onBack();
+    }
+  }, [viewMode, selectionMode, onBack]);
+
+  // Handle rename current report
+  const handleRename = (0, _react.useCallback)(() => {
+    if (!selectedReport || !storage) return;
+    _reactNative.Alert.prompt("Rename Benchmark", "Enter a new name for this benchmark:", [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Save",
+      onPress: async newName => {
+        if (newName && newName.trim()) {
+          await storage.updateReport(selectedReport.id, {
+            name: newName.trim()
+          });
+          // Update local state
+          setSelectedReport({
+            ...selectedReport,
+            name: newName.trim()
+          });
+          setRefreshKey(k => k + 1);
+        }
+      }
+    }], "plain-text", "");
+  }, [selectedReport]);
+
+  // Handle delete current report
+  const handleDeleteCurrent = (0, _react.useCallback)(async () => {
+    if (!selectedReport || !storage) return;
+    await storage.deleteReport(selectedReport.id);
+    setViewMode("list");
+    setSelectedReport(null);
+    setRefreshKey(k => k + 1);
+  }, [selectedReport]);
+
+  // Handle copy compare results
+  const handleCopyCompare = (0, _react.useCallback)(async () => {
+    if (!compareReports) return;
+    const {
+      baseline,
+      comparison
+    } = compareReports;
+    const result = _benchmarking.BenchmarkComparator.compare(baseline, comparison);
+    const formatMs = ms => {
+      if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`;
+      if (ms < 10) return `${ms.toFixed(2)}ms`;
+      if (ms < 100) return `${ms.toFixed(1)}ms`;
+      return `${ms.toFixed(0)}ms`;
+    };
+    const formatPercent = value => {
+      const sign = value >= 0 ? "+" : "";
+      return `${sign}${value.toFixed(1)}%`;
+    };
+    const lines = ["BENCHMARK COMPARISON RESULTS", "============================", "", `Overall: ${result.isImproved ? "IMPROVED" : "REGRESSED"} ${formatPercent(result.overallImprovement)}`, "", "COMPARING", "---------", `Baseline: ${baseline.name}`, `  Date: ${new Date(baseline.createdAt).toLocaleString()}`, `Comparison: ${comparison.name}`, `  Date: ${new Date(comparison.createdAt).toLocaleString()}`, "", "TIMING COMPARISON", "-----------------", `Measure Time:    ${formatMs(baseline.stats.avgMeasureTime)} → ${formatMs(comparison.stats.avgMeasureTime)} (${formatPercent(result.measureTimeImprovement)})`, `Pipeline Time:   ${formatMs(baseline.stats.avgTotalTime)} → ${formatMs(comparison.stats.avgTotalTime)} (${formatPercent(result.pipelineTimeImprovement)})`, `Filter Time:     ${formatMs(baseline.stats.avgFilterTime)} → ${formatMs(comparison.stats.avgFilterTime)} (${formatPercent(result.filterTimeImprovement)})`, `Track Time:      ${formatMs(baseline.stats.avgTrackTime)} → ${formatMs(comparison.stats.avgTrackTime)} (${formatPercent(result.trackTimeImprovement)})`, `Overlay Render:  ${formatMs(baseline.stats.avgOverlayRenderTime)} → ${formatMs(comparison.stats.avgOverlayRenderTime)} (${formatPercent(result.overlayRenderImprovement)})`, "", "PERCENTILES", "-----------", `P50 (Median):    ${formatMs(baseline.stats.p50TotalTime)} → ${formatMs(comparison.stats.p50TotalTime)}`, `P95:             ${formatMs(baseline.stats.p95TotalTime)} → ${formatMs(comparison.stats.p95TotalTime)}`, `P99:             ${formatMs(baseline.stats.p99TotalTime)} → ${formatMs(comparison.stats.p99TotalTime)}`, "", "BATCH STATISTICS", "----------------", `Total Batches:    ${baseline.stats.batchCount} → ${comparison.stats.batchCount}`, `Nodes Processed:  ${baseline.stats.totalNodesProcessed.toLocaleString()} → ${comparison.stats.totalNodesProcessed.toLocaleString()}`];
+    if (baseline.memoryDelta != null && comparison.memoryDelta != null) {
+      lines.push("", "MEMORY", "------", `Memory Delta:    ${(baseline.memoryDelta / 1024 / 1024).toFixed(2)}MB → ${(comparison.memoryDelta / 1024 / 1024).toFixed(2)}MB`);
+    }
+    lines.push("", `Compared at: ${new Date(result.comparedAt).toLocaleString()}`);
+    await (0, _sharedUi.copyToClipboard)(lines.join("\n"));
+  }, [compareReports]);
+
+  // Render list item
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BenchmarkSessionCard.BenchmarkSessionCard, {
+    metadata: item,
+    isSelected: selectedIds.has(item.id),
+    onPress: () => handleReportPress(item),
+    onLongPress: () => handleReportLongPress(item),
+    selectionMode: selectionMode
+  }), [selectionMode, selectedIds, handleReportPress, handleReportLongPress]);
+  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+
+  // Render content
+  const renderContent = () => {
+    if (viewMode === "detail" && selectedReport) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BenchmarkDetailView.BenchmarkDetailView, {
+        report: selectedReport
+      });
+    }
+    if (viewMode === "compare" && compareReports) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BenchmarkCompareView.BenchmarkCompareView, {
+        baseline: compareReports.baseline,
+        comparison: compareReports.comparison
+      });
+    }
+
+    // List view
+    if (reports.length === 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyIcon,
+          children: "\uD83D\uDCCA"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyTitle,
+          children: "No Benchmarks Yet"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptySubtitle,
+          children: "Press the record button to start capturing performance metrics"
+        })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: reports,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      contentContainerStyle: styles.listContent,
+      ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.separator
+      }),
+      scrollEnabled: false
+    });
+  };
+  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.devToolsStorageKeys.benchmark.modal();
+
+  // Header title based on view mode
+  const headerTitle = (0, _react.useMemo)(() => {
+    if (viewMode === "detail" && selectedReport) {
+      return selectedReport.name;
+    }
+    if (viewMode === "compare") {
+      return "Compare";
+    }
+    if (selectionMode) {
+      if (selectedIds.size === 0) {
+        return "Select 2 to compare";
+      }
+      if (selectedIds.size === 1) {
+        return "Select 1 more";
+      }
+      return `${selectedIds.size} Selected`;
+    }
+    return "Benchmarks";
+  }, [viewMode, selectedReport, selectionMode, selectedIds]);
+
+  // Determine back handler
+  const showBackButton = viewMode !== "list" || selectionMode || onBack;
+
+  // Early return AFTER all hooks to avoid "Rendered fewer hooks than expected" error
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onBack: showBackButton ? handleBack : undefined,
+    onMinimize: onMinimize,
+    persistenceKey: persistenceKey,
+    header: {
+      showToggleButton: true,
+      customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [showBackButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: headerTitle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+          children: [viewMode === "list" && !selectionMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+              isEnabled: isRecording,
+              onToggle: handleToggleRecording,
+              accessibilityLabel: "Toggle benchmark recording"
+            }), reports.length >= 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: () => setSelectionMode(true),
+              style: styles.iconButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.GitBranch, {
+                size: 14,
+                color: _sharedUi.macOSColors.semantic.info
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: () => setRefreshKey(k => k + 1),
+              style: styles.iconButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
+                size: 14,
+                color: _sharedUi.macOSColors.text.secondary
+              })
+            }), reports.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: handleClearAll,
+              style: styles.iconButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+                size: 14,
+                color: _sharedUi.macOSColors.semantic.error
+              })
+            })]
+          }), viewMode === "detail" && selectedReport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: handleRename,
+              style: styles.iconButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Edit3, {
+                size: 14,
+                color: _sharedUi.macOSColors.text.secondary
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: handleDeleteCurrent,
+              style: styles.iconButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+                size: 14,
+                color: _sharedUi.macOSColors.semantic.error
+              })
+            })]
+          }), viewMode === "compare" && compareReports && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: handleCopyCompare,
+              style: styles.iconButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+                size: 14,
+                color: _sharedUi.macOSColors.text.secondary
+              })
+            })
+          }), selectionMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [selectedIds.size === 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: handleCompare,
+              style: [styles.iconButton, styles.compareButton],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.GitBranch, {
+                size: 14,
+                color: _sharedUi.macOSColors.semantic.info
+              })
+            }), selectedIds.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: handleDeleteSelected,
+              style: styles.iconButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+                size: 14,
+                color: _sharedUi.macOSColors.semantic.error
+              })
+            })]
+          })]
+        })]
+      })
+    },
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    children: [isRecording && viewMode === "list" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.recordingBanner,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.recordingDot
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.recordingText,
+        children: "Recording..."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: handleToggleRecording,
+        style: styles.stopButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.stopButtonText,
+          children: "Stop"
+        })
+      })]
+    }), renderContent()]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  iconButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  compareButton: {
+    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
+    borderColor: _sharedUi.macOSColors.semantic.info
+  },
+  listContent: {
+    paddingVertical: 16
+  },
+  separator: {
+    height: 8
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  emptyIcon: {
+    fontSize: 48,
+    marginBottom: 16
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.primary,
+    fontFamily: "monospace",
+    marginBottom: 8
+  },
+  emptySubtitle: {
+    fontSize: 13,
+    color: _sharedUi.macOSColors.text.secondary,
+    fontFamily: "monospace",
+    textAlign: "center"
+  },
+  recordingBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.error
+  },
+  recordingDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.macOSColors.semantic.error,
+    marginRight: 8
+  },
+  recordingText: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.semantic.error,
+    fontFamily: "monospace"
+  },
+  stopButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: _sharedUi.macOSColors.semantic.error,
+    borderRadius: 4
+  },
+  stopButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#fff",
+    fontFamily: "monospace"
+  }
+});
+var _default = exports.default = BenchmarkModal;