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

package/lib/module/components/BenchmarkModal.js

@@ -1 +1,499 @@
-"use strict";import React,{useState,useEffect,useCallback,useRef,useMemo}from"react";import{View,Text,TouchableOpacity,StyleSheet,FlatList,Alert}from"react-native";import{JsModal,ModalHeader,macOSColors,devToolsStorageKeys,Trash2,RefreshCw,GitBranch,Edit3,Copy,copyToClipboard,PowerToggleButton}from"@buoy-gg/shared-ui";import{benchmarkRecorder,BenchmarkStorage,BenchmarkComparator,createAsyncStorageAdapter}from"../benchmarking";import{BenchmarkSessionCard}from"./BenchmarkSessionCard";import{BenchmarkDetailView}from"./BenchmarkDetailView";import{BenchmarkCompareView}from"./BenchmarkCompareView";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const storageAdapter=createAsyncStorageAdapter(),storage=storageAdapter?new BenchmarkStorage(storageAdapter):null;export function BenchmarkModal({visible:e,onClose:t,onBack:o,onMinimize:a,enableSharedModalDimensions:s=!1}){const[r,n]=useState(!1),[i,l]=useState([]),[c,m]=useState(null),[d,p]=useState("list"),[u,g]=useState(!1),[h,y]=useState(new Set),[S,T]=useState(null),[C,x]=useState(0);useRef(!1),useEffect(()=>{e&&storage&&(async()=>{const e=await storage.listReports();l(e)})()},[e,C]),useEffect(()=>{const e=benchmarkRecorder.subscribe(e=>{"start"===e?n(!0):"stop"===e&&(n(!1),x(e=>e+1))});return n(benchmarkRecorder.isRecording()),e},[]);const b=useCallback(async()=>{if(r){const e=benchmarkRecorder.stopSession();e&&storage&&(await storage.saveReport(e),x(e=>e+1))}else{const e=(new Date).toLocaleString(void 0,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"});benchmarkRecorder.startSession({name:`Benchmark ${e}`,captureMemory:!0,verbose:!1})}},[r]),f=useCallback(async e=>{if(u)y(t=>{const o=new Set(t);return o.has(e.id)?o.delete(e.id):o.size<2&&o.add(e.id),o});else{if(!storage)return;const t=await storage.loadReport(e.id);t&&(m(t),p("detail"))}},[u]),k=useCallback(e=>{g(!0),y(new Set([e.id]))},[]),B=useCallback(async()=>{if(2!==h.size||!storage)return;const e=Array.from(h),[t,o]=await Promise.all([storage.loadReport(e[0]),storage.loadReport(e[1])]);if(t&&o){const[e,a]=t.createdAt<o.createdAt?[t,o]:[o,t];T({baseline:e,comparison:a}),p("compare"),g(!1),y(new Set)}},[h]),j=useCallback(async()=>{storage&&(await storage.clearAll(),x(e=>e+1))},[]),_=useCallback(async()=>{0!==h.size&&storage&&(await Promise.all(Array.from(h).map(e=>storage.deleteReport(e))),y(new Set),g(!1),x(e=>e+1))},[h]),$=useCallback(()=>{"detail"===d||"compare"===d?(p("list"),m(null),T(null)):u?(g(!1),y(new Set)):o&&o()},[d,u,o]),O=useCallback(()=>{c&&storage&&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(c.id,{name:e.trim()}),m({...c,name:e.trim()}),x(e=>e+1))}}],"plain-text","")},[c]),w=useCallback(async()=>{c&&storage&&(await storage.deleteReport(c.id),p("list"),m(null),x(e=>e+1))},[c]),R=useCallback(async()=>{if(!S)return;const{baseline:e,comparison:t}=S,o=BenchmarkComparator.compare(e,t),a=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)}%`,r=["BENCHMARK COMPARISON RESULTS","============================","",`Overall: ${o.isImproved?"IMPROVED":"REGRESSED"} ${s(o.overallImprovement)}`,"","COMPARING","---------",`Baseline: ${e.name}`,`  Date: ${new Date(e.createdAt).toLocaleString()}`,`Comparison: ${t.name}`,`  Date: ${new Date(t.createdAt).toLocaleString()}`,"","TIMING COMPARISON","-----------------",`Measure Time:    ${a(e.stats.avgMeasureTime)} → ${a(t.stats.avgMeasureTime)} (${s(o.measureTimeImprovement)})`,`Pipeline Time:   ${a(e.stats.avgTotalTime)} → ${a(t.stats.avgTotalTime)} (${s(o.pipelineTimeImprovement)})`,`Filter Time:     ${a(e.stats.avgFilterTime)} → ${a(t.stats.avgFilterTime)} (${s(o.filterTimeImprovement)})`,`Track Time:      ${a(e.stats.avgTrackTime)} → ${a(t.stats.avgTrackTime)} (${s(o.trackTimeImprovement)})`,`Overlay Render:  ${a(e.stats.avgOverlayRenderTime)} → ${a(t.stats.avgOverlayRenderTime)} (${s(o.overlayRenderImprovement)})`,"","PERCENTILES","-----------",`P50 (Median):    ${a(e.stats.p50TotalTime)} → ${a(t.stats.p50TotalTime)}`,`P95:             ${a(e.stats.p95TotalTime)} → ${a(t.stats.p95TotalTime)}`,`P99:             ${a(e.stats.p99TotalTime)} → ${a(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&&r.push("","MEMORY","------",`Memory Delta:    ${(e.memoryDelta/1024/1024).toFixed(2)}MB → ${(t.memoryDelta/1024/1024).toFixed(2)}MB`),r.push("",`Compared at: ${new Date(o.comparedAt).toLocaleString()}`),await copyToClipboard(r.join("\n"))},[S]),v=useCallback(({item:e})=>_jsx(BenchmarkSessionCard,{metadata:e,isSelected:h.has(e.id),onPress:()=>f(e),onLongPress:()=>k(e),selectionMode:u}),[u,h,f,k]),M=useCallback(e=>e.id,[]),P=s?devToolsStorageKeys.modal.root():devToolsStorageKeys.benchmark.modal(),z=useMemo(()=>"detail"===d&&c?c.name:"compare"===d?"Compare":u?0===h.size?"Select 2 to compare":1===h.size?"Select 1 more":`${h.size} Selected`:"Benchmarks",[d,c,u,h]),A="list"!==d||u||o;return e?_jsxs(JsModal,{visible:e,onClose:t,onBack:A?$:void 0,onMinimize:a,persistenceKey:P,header:{showToggleButton:!0,customContent:_jsxs(ModalHeader,{children:[A&&_jsx(ModalHeader.Navigation,{onBack:$}),_jsx(ModalHeader.Content,{title:z}),_jsxs(ModalHeader.Actions,{children:["list"===d&&!u&&_jsxs(_Fragment,{children:[_jsx(PowerToggleButton,{isEnabled:r,onToggle:b,accessibilityLabel:"Toggle benchmark recording"}),i.length>=2&&_jsx(TouchableOpacity,{onPress:()=>g(!0),style:styles.iconButton,children:_jsx(GitBranch,{size:14,color:macOSColors.semantic.info})}),_jsx(TouchableOpacity,{onPress:()=>x(e=>e+1),style:styles.iconButton,children:_jsx(RefreshCw,{size:14,color:macOSColors.text.secondary})}),i.length>0&&_jsx(TouchableOpacity,{onPress:j,style:styles.iconButton,children:_jsx(Trash2,{size:14,color:macOSColors.semantic.error})})]}),"detail"===d&&c&&_jsxs(_Fragment,{children:[_jsx(TouchableOpacity,{onPress:O,style:styles.iconButton,children:_jsx(Edit3,{size:14,color:macOSColors.text.secondary})}),_jsx(TouchableOpacity,{onPress:w,style:styles.iconButton,children:_jsx(Trash2,{size:14,color:macOSColors.semantic.error})})]}),"compare"===d&&S&&_jsx(_Fragment,{children:_jsx(TouchableOpacity,{onPress:R,style:styles.iconButton,children:_jsx(Copy,{size:14,color:macOSColors.text.secondary})})}),u&&_jsxs(_Fragment,{children:[2===h.size&&_jsx(TouchableOpacity,{onPress:B,style:[styles.iconButton,styles.compareButton],children:_jsx(GitBranch,{size:14,color:macOSColors.semantic.info})}),h.size>0&&_jsx(TouchableOpacity,{onPress:_,style:styles.iconButton,children:_jsx(Trash2,{size:14,color:macOSColors.semantic.error})})]})]})]})},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,children:[r&&"list"===d&&_jsxs(View,{style:styles.recordingBanner,children:[_jsx(View,{style:styles.recordingDot}),_jsx(Text,{style:styles.recordingText,children:"Recording..."}),_jsx(TouchableOpacity,{onPress:b,style:styles.stopButton,children:_jsx(Text,{style:styles.stopButtonText,children:"Stop"})})]}),"detail"===d&&c?_jsx(BenchmarkDetailView,{report:c}):"compare"===d&&S?_jsx(BenchmarkCompareView,{baseline:S.baseline,comparison:S.comparison}):0===i.length?_jsxs(View,{style:styles.emptyState,children:[_jsx(Text,{style:styles.emptyIcon,children:"📊"}),_jsx(Text,{style:styles.emptyTitle,children:"No Benchmarks Yet"}),_jsx(Text,{style:styles.emptySubtitle,children:"Press the record button to start capturing performance metrics"})]}):_jsx(FlatList,{data:i,renderItem:v,keyExtractor:M,contentContainerStyle:styles.listContent,ItemSeparatorComponent:()=>_jsx(View,{style:styles.separator}),scrollEnabled:!1})]}):null}const styles=StyleSheet.create({iconButton:{width:32,height:32,borderRadius:8,backgroundColor:macOSColors.background.hover,borderWidth:1,borderColor:macOSColors.border.default,alignItems:"center",justifyContent:"center"},compareButton:{backgroundColor:macOSColors.semantic.infoBackground,borderColor: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:macOSColors.text.primary,fontFamily:"monospace",marginBottom:8},emptySubtitle:{fontSize:13,color:macOSColors.text.secondary,fontFamily:"monospace",textAlign:"center"},recordingBanner:{flexDirection:"row",alignItems:"center",backgroundColor:macOSColors.semantic.errorBackground,paddingHorizontal:16,paddingVertical:12,borderBottomWidth:1,borderColor:macOSColors.semantic.error},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:macOSColors.semantic.error,marginRight:8},recordingText:{flex:1,fontSize:13,fontWeight:"600",color:macOSColors.semantic.error,fontFamily:"monospace"},stopButton:{paddingHorizontal:12,paddingVertical:6,backgroundColor:macOSColors.semantic.error,borderRadius:4},stopButtonText:{fontSize:12,fontWeight:"600",color:"#fff",fontFamily:"monospace"}});export default BenchmarkModal;
+"use strict";
+
+/**
+ * BenchmarkModal
+ *
+ * Main modal component for the Benchmark dev tool.
+ * Provides recording controls, session list, detail views, and comparison.
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
+import { JsModal, ModalHeader, macOSColors, devToolsStorageKeys, Trash2, RefreshCw, GitBranch, Edit3, Copy, copyToClipboard, PowerToggleButton } from "@buoy-gg/shared-ui";
+import { benchmarkRecorder, BenchmarkStorage, BenchmarkComparator, createAsyncStorageAdapter } from "../benchmarking";
+import { BenchmarkSessionCard } from "./BenchmarkSessionCard";
+import { BenchmarkDetailView } from "./BenchmarkDetailView";
+import { BenchmarkCompareView } from "./BenchmarkCompareView";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Initialize storage
+const storageAdapter = createAsyncStorageAdapter();
+const storage = storageAdapter ? new BenchmarkStorage(storageAdapter) : null;
+export function BenchmarkModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  // State
+  const [isRecording, setIsRecording] = useState(false);
+  const [reports, setReports] = useState([]);
+  const [selectedReport, setSelectedReport] = useState(null);
+  const [viewMode, setViewMode] = useState("list");
+  const [selectionMode, setSelectionMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState(new Set());
+  const [compareReports, setCompareReports] = useState(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const hasLoadedState = useRef(false);
+
+  // Load reports on mount
+  useEffect(() => {
+    if (!visible || !storage) return;
+    const loadReports = async () => {
+      const list = await storage.listReports();
+      setReports(list);
+    };
+    loadReports();
+  }, [visible, refreshKey]);
+
+  // Subscribe to recorder state changes
+  useEffect(() => {
+    const unsubscribe = 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(benchmarkRecorder.isRecording());
+    return unsubscribe;
+  }, []);
+
+  // Handle start/stop recording
+  const handleToggleRecording = useCallback(async () => {
+    if (isRecording) {
+      // Stop and save
+      const report = 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"
+      });
+      benchmarkRecorder.startSession({
+        name: `Benchmark ${timestamp}`,
+        captureMemory: true,
+        verbose: false
+      });
+    }
+  }, [isRecording]);
+
+  // Handle report press
+  const handleReportPress = 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 = useCallback(metadata => {
+    setSelectionMode(true);
+    setSelectedIds(new Set([metadata.id]));
+  }, []);
+
+  // Handle compare button
+  const handleCompare = 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 = useCallback(async () => {
+    if (storage) {
+      await storage.clearAll();
+      setRefreshKey(k => k + 1);
+    }
+  }, []);
+
+  // Handle delete selected
+  const handleDeleteSelected = 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 = 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 = useCallback(() => {
+    if (!selectedReport || !storage) return;
+    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 = 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 = useCallback(async () => {
+    if (!compareReports) return;
+    const {
+      baseline,
+      comparison
+    } = compareReports;
+    const result = 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 copyToClipboard(lines.join("\n"));
+  }, [compareReports]);
+
+  // Render list item
+  const renderItem = useCallback(({
+    item
+  }) => /*#__PURE__*/_jsx(BenchmarkSessionCard, {
+    metadata: item,
+    isSelected: selectedIds.has(item.id),
+    onPress: () => handleReportPress(item),
+    onLongPress: () => handleReportLongPress(item),
+    selectionMode: selectionMode
+  }), [selectionMode, selectedIds, handleReportPress, handleReportLongPress]);
+  const keyExtractor = useCallback(item => item.id, []);
+
+  // Render content
+  const renderContent = () => {
+    if (viewMode === "detail" && selectedReport) {
+      return /*#__PURE__*/_jsx(BenchmarkDetailView, {
+        report: selectedReport
+      });
+    }
+    if (viewMode === "compare" && compareReports) {
+      return /*#__PURE__*/_jsx(BenchmarkCompareView, {
+        baseline: compareReports.baseline,
+        comparison: compareReports.comparison
+      });
+    }
+
+    // List view
+    if (reports.length === 0) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.emptyIcon,
+          children: "\uD83D\uDCCA"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyTitle,
+          children: "No Benchmarks Yet"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptySubtitle,
+          children: "Press the record button to start capturing performance metrics"
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(FlatList, {
+      data: reports,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      contentContainerStyle: styles.listContent,
+      ItemSeparatorComponent: () => /*#__PURE__*/_jsx(View, {
+        style: styles.separator
+      }),
+      scrollEnabled: false
+    });
+  };
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.benchmark.modal();
+
+  // Header title based on view mode
+  const headerTitle = 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__*/_jsxs(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onBack: showBackButton ? handleBack : undefined,
+    onMinimize: onMinimize,
+    persistenceKey: persistenceKey,
+    header: {
+      showToggleButton: true,
+      customContent: /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [showBackButton && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: headerTitle
+        }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+          children: [viewMode === "list" && !selectionMode && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(PowerToggleButton, {
+              isEnabled: isRecording,
+              onToggle: handleToggleRecording,
+              accessibilityLabel: "Toggle benchmark recording"
+            }), reports.length >= 2 && /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => setSelectionMode(true),
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(GitBranch, {
+                size: 14,
+                color: macOSColors.semantic.info
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => setRefreshKey(k => k + 1),
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(RefreshCw, {
+                size: 14,
+                color: macOSColors.text.secondary
+              })
+            }), reports.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleClearAll,
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(Trash2, {
+                size: 14,
+                color: macOSColors.semantic.error
+              })
+            })]
+          }), viewMode === "detail" && selectedReport && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleRename,
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(Edit3, {
+                size: 14,
+                color: macOSColors.text.secondary
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleDeleteCurrent,
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(Trash2, {
+                size: 14,
+                color: macOSColors.semantic.error
+              })
+            })]
+          }), viewMode === "compare" && compareReports && /*#__PURE__*/_jsx(_Fragment, {
+            children: /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleCopyCompare,
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(Copy, {
+                size: 14,
+                color: macOSColors.text.secondary
+              })
+            })
+          }), selectionMode && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [selectedIds.size === 2 && /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleCompare,
+              style: [styles.iconButton, styles.compareButton],
+              children: /*#__PURE__*/_jsx(GitBranch, {
+                size: 14,
+                color: macOSColors.semantic.info
+              })
+            }), selectedIds.size > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleDeleteSelected,
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(Trash2, {
+                size: 14,
+                color: macOSColors.semantic.error
+              })
+            })]
+          })]
+        })]
+      })
+    },
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    children: [isRecording && viewMode === "list" && /*#__PURE__*/_jsxs(View, {
+      style: styles.recordingBanner,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.recordingDot
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.recordingText,
+        children: "Recording..."
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleToggleRecording,
+        style: styles.stopButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.stopButtonText,
+          children: "Stop"
+        })
+      })]
+    }), renderContent()]
+  });
+}
+const styles = StyleSheet.create({
+  iconButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  compareButton: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: 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: macOSColors.text.primary,
+    fontFamily: "monospace",
+    marginBottom: 8
+  },
+  emptySubtitle: {
+    fontSize: 13,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace",
+    textAlign: "center"
+  },
+  recordingBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: macOSColors.semantic.errorBackground,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderColor: macOSColors.semantic.error
+  },
+  recordingDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: macOSColors.semantic.error,
+    marginRight: 8
+  },
+  recordingText: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.semantic.error,
+    fontFamily: "monospace"
+  },
+  stopButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: macOSColors.semantic.error,
+    borderRadius: 4
+  },
+  stopButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#fff",
+    fontFamily: "monospace"
+  }
+});
+export default BenchmarkModal;