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

package/lib/module/components/BenchmarkCompareView.js

@@ -1 +1,469 @@
-"use strict";import React from"react";import{View,Text,ScrollView,StyleSheet}from"react-native";import{macOSColors}from"@buoy-gg/shared-ui";import{BenchmarkComparator}from"../benchmarking";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";function formatMs(e){return e<1?`${(1e3*e).toFixed(0)}μs`:e<10?`${e.toFixed(2)}ms`:e<100?`${e.toFixed(1)}ms`:`${e.toFixed(0)}ms`}function formatPercent(e){return`${e>=0?"+":""}${e.toFixed(1)}%`}function getImprovementColor(e){return e>5?macOSColors.semantic.success:e<-5?macOSColors.semantic.error:macOSColors.text.secondary}function getIndicator(e){return e>5?"✅":e<-5?"❌":"➖"}function SectionHeader({title:e}){return _jsx(View,{style:styles.sectionHeader,children:_jsx(Text,{style:styles.sectionTitle,children:e})})}function CompareRow({label:e,baseline:t,comparison:o,improvement:s,unit:r="ms"}){return _jsxs(View,{style:styles.compareRow,children:[_jsx(Text,{style:styles.compareLabel,children:e}),_jsxs(View,{style:styles.compareValues,children:[_jsx(Text,{style:styles.baselineValue,children:t}),_jsx(Text,{style:styles.arrow,children:"→"}),_jsx(Text,{style:styles.comparisonValue,children:o}),_jsxs(Text,{style:[styles.improvementValue,{color:getImprovementColor(s)}],children:[formatPercent(s)," ",getIndicator(s)]})]})]})}export function BenchmarkCompareView({baseline:e,comparison:t}){const o=BenchmarkComparator.compare(e,t);return _jsxs(ScrollView,{style:styles.container,contentContainerStyle:styles.content,children:[_jsxs(View,{style:styles.overallResult,children:[_jsx(Text,{style:styles.overallEmoji,children:o.isImproved?"🎉":"⚠️"}),_jsx(Text,{style:styles.overallText,children:o.isImproved?"IMPROVED":"REGRESSED"}),_jsx(Text,{style:[styles.overallPercent,{color:getImprovementColor(o.overallImprovement)}],children:formatPercent(o.overallImprovement)})]}),_jsx(SectionHeader,{title:"COMPARING"}),_jsxs(View,{style:styles.section,children:[_jsxs(View,{style:styles.reportInfo,children:[_jsx(Text,{style:styles.reportRole,children:"BASELINE"}),_jsx(Text,{style:styles.reportName,children:e.name}),_jsx(Text,{style:styles.reportDate,children:new Date(e.createdAt).toLocaleString()})]}),_jsx(View,{style:styles.vsContainer,children:_jsx(Text,{style:styles.vsText,children:"vs"})}),_jsxs(View,{style:styles.reportInfo,children:[_jsx(Text,{style:styles.reportRole,children:"COMPARISON"}),_jsx(Text,{style:styles.reportName,children:t.name}),_jsx(Text,{style:styles.reportDate,children:new Date(t.createdAt).toLocaleString()})]})]}),_jsx(SectionHeader,{title:"TIMING COMPARISON"}),_jsxs(View,{style:styles.section,children:[_jsxs(View,{style:styles.columnHeaders,children:[_jsx(Text,{style:styles.columnLabel,children:"Metric"}),_jsxs(View,{style:styles.columnValues,children:[_jsx(Text,{style:styles.columnHeader,children:"Base"}),_jsx(Text,{style:styles.columnHeader}),_jsx(Text,{style:styles.columnHeader,children:"After"}),_jsx(Text,{style:styles.columnHeader,children:"Change"})]})]}),_jsx(CompareRow,{label:"Measure Time",baseline:formatMs(e.stats.avgMeasureTime),comparison:formatMs(t.stats.avgMeasureTime),improvement:o.measureTimeImprovement}),_jsx(CompareRow,{label:"Pipeline Time",baseline:formatMs(e.stats.avgTotalTime),comparison:formatMs(t.stats.avgTotalTime),improvement:o.pipelineTimeImprovement}),_jsx(CompareRow,{label:"Filter Time",baseline:formatMs(e.stats.avgFilterTime),comparison:formatMs(t.stats.avgFilterTime),improvement:o.filterTimeImprovement}),_jsx(CompareRow,{label:"Track Time",baseline:formatMs(e.stats.avgTrackTime),comparison:formatMs(t.stats.avgTrackTime),improvement:o.trackTimeImprovement}),_jsx(CompareRow,{label:"Overlay Render",baseline:formatMs(e.stats.avgOverlayRenderTime),comparison:formatMs(t.stats.avgOverlayRenderTime),improvement:o.overlayRenderImprovement})]}),_jsx(SectionHeader,{title:"PERCENTILES"}),_jsxs(View,{style:styles.section,children:[_jsx(CompareRow,{label:"P50 (Median)",baseline:formatMs(e.stats.p50TotalTime),comparison:formatMs(t.stats.p50TotalTime),improvement:e.stats.p50TotalTime>0?(e.stats.p50TotalTime-t.stats.p50TotalTime)/e.stats.p50TotalTime*100:0}),_jsx(CompareRow,{label:"P95",baseline:formatMs(e.stats.p95TotalTime),comparison:formatMs(t.stats.p95TotalTime),improvement:e.stats.p95TotalTime>0?(e.stats.p95TotalTime-t.stats.p95TotalTime)/e.stats.p95TotalTime*100:0}),_jsx(CompareRow,{label:"P99",baseline:formatMs(e.stats.p99TotalTime),comparison:formatMs(t.stats.p99TotalTime),improvement:e.stats.p99TotalTime>0?(e.stats.p99TotalTime-t.stats.p99TotalTime)/e.stats.p99TotalTime*100:0})]}),_jsx(SectionHeader,{title:"BATCH STATISTICS"}),_jsxs(View,{style:styles.section,children:[_jsxs(View,{style:styles.statComparison,children:[_jsx(Text,{style:styles.statLabel,children:"Total Batches"}),_jsxs(Text,{style:styles.statValues,children:[e.stats.batchCount," → ",t.stats.batchCount]})]}),_jsxs(View,{style:styles.statComparison,children:[_jsx(Text,{style:styles.statLabel,children:"Nodes Processed"}),_jsxs(Text,{style:styles.statValues,children:[e.stats.totalNodesProcessed.toLocaleString()," →"," ",t.stats.totalNodesProcessed.toLocaleString()]})]})]}),null!=e.memoryDelta&&null!=t.memoryDelta&&_jsxs(_Fragment,{children:[_jsx(SectionHeader,{title:"MEMORY"}),_jsx(View,{style:styles.section,children:_jsxs(View,{style:styles.statComparison,children:[_jsx(Text,{style:styles.statLabel,children:"Memory Delta"}),_jsxs(Text,{style:[styles.statValues,{color:null!=o.memoryDeltaChange&&o.memoryDeltaChange<0?macOSColors.semantic.success:macOSColors.text.primary}],children:[(e.memoryDelta/1024/1024).toFixed(2),"MB →"," ",(t.memoryDelta/1024/1024).toFixed(2),"MB"]})]})})]}),_jsx(View,{style:styles.footer,children:_jsxs(Text,{style:styles.footerText,children:["Compared at ",new Date(o.comparedAt).toLocaleString()]})})]})}const styles=StyleSheet.create({container:{flex:1},content:{paddingVertical:16},overallResult:{alignItems:"center",paddingVertical:24,backgroundColor:macOSColors.background.card,marginHorizontal:16,borderRadius:12,borderWidth:1,borderColor:macOSColors.border.default,marginBottom:16},overallEmoji:{fontSize:32,marginBottom:8},overallText:{fontSize:14,fontWeight:"700",color:macOSColors.text.primary,fontFamily:"monospace",letterSpacing:2,marginBottom:4},overallPercent:{fontSize:24,fontWeight:"700",fontFamily:"monospace"},sectionHeader:{paddingHorizontal:16,paddingVertical:8,backgroundColor:macOSColors.background.hover,borderTopWidth:1,borderBottomWidth:1,borderColor:macOSColors.border.default,marginTop:8},sectionTitle:{fontSize:11,fontWeight:"600",color:macOSColors.text.secondary,fontFamily:"monospace",letterSpacing:1},section:{paddingHorizontal:16,paddingVertical:8},reportInfo:{flex:1,paddingVertical:8},reportRole:{fontSize:10,fontWeight:"600",color:macOSColors.text.muted,fontFamily:"monospace",letterSpacing:1,marginBottom:4},reportName:{fontSize:13,fontWeight:"600",color:macOSColors.text.primary,fontFamily:"monospace",marginBottom:2},reportDate:{fontSize:11,color:macOSColors.text.secondary,fontFamily:"monospace"},vsContainer:{paddingHorizontal:16,justifyContent:"center"},vsText:{fontSize:12,color:macOSColors.text.muted,fontFamily:"monospace"},columnHeaders:{flexDirection:"row",justifyContent:"space-between",paddingBottom:8,borderBottomWidth:1,borderColor:macOSColors.border.default,marginBottom:8},columnLabel:{fontSize:10,color:macOSColors.text.muted,fontFamily:"monospace",width:80},columnValues:{flexDirection:"row",flex:1,justifyContent:"flex-end",gap:8},columnHeader:{fontSize:10,color:macOSColors.text.muted,fontFamily:"monospace",width:50,textAlign:"center"},compareRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:8},compareLabel:{fontSize:12,color:macOSColors.text.secondary,fontFamily:"monospace",width:80},compareValues:{flexDirection:"row",alignItems:"center",flex:1,justifyContent:"flex-end",gap:4},baselineValue:{fontSize:11,color:macOSColors.text.muted,fontFamily:"monospace",width:50,textAlign:"right"},arrow:{fontSize:11,color:macOSColors.text.muted,paddingHorizontal:4},comparisonValue:{fontSize:11,color:macOSColors.text.primary,fontFamily:"monospace",fontWeight:"500",width:50,textAlign:"right"},improvementValue:{fontSize:11,fontFamily:"monospace",fontWeight:"600",width:70,textAlign:"right"},statComparison:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:6},statLabel:{fontSize:12,color:macOSColors.text.secondary,fontFamily:"monospace"},statValues:{fontSize:12,color:macOSColors.text.primary,fontFamily:"monospace"},footer:{paddingHorizontal:16,paddingVertical:16,marginTop:16,borderTopWidth:1,borderColor:macOSColors.border.default},footerText:{fontSize:10,color:macOSColors.text.muted,fontFamily:"monospace",textAlign:"center"}});export default BenchmarkCompareView;
+"use strict";
+
+/**
+ * BenchmarkCompareView
+ *
+ * Displays a comparison between two benchmark reports.
+ * Shows side-by-side metrics with improvement/regression indicators.
+ */
+
+import React from "react";
+import { View, Text, ScrollView, StyleSheet } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { BenchmarkComparator } from "../benchmarking";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Format milliseconds with appropriate precision
+ */
+function 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`;
+}
+
+/**
+ * Format percentage with sign
+ */
+function formatPercent(value) {
+  const sign = value >= 0 ? "+" : "";
+  return `${sign}${value.toFixed(1)}%`;
+}
+
+/**
+ * Get color based on improvement (positive = good)
+ */
+function getImprovementColor(improvement) {
+  if (improvement > 5) return macOSColors.semantic.success;
+  if (improvement < -5) return macOSColors.semantic.error;
+  return macOSColors.text.secondary;
+}
+
+/**
+ * Get emoji indicator
+ */
+function getIndicator(improvement) {
+  if (improvement > 5) return "✅";
+  if (improvement < -5) return "❌";
+  return "➖";
+}
+
+/**
+ * Section header component
+ */
+function SectionHeader({
+  title
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.sectionHeader,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.sectionTitle,
+      children: title
+    })
+  });
+}
+
+/**
+ * Comparison row component
+ */
+function CompareRow({
+  label,
+  baseline,
+  comparison,
+  improvement,
+  unit = "ms"
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.compareRow,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.compareLabel,
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.compareValues,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.baselineValue,
+        children: baseline
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.arrow,
+        children: "\u2192"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.comparisonValue,
+        children: comparison
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: [styles.improvementValue, {
+          color: getImprovementColor(improvement)
+        }],
+        children: [formatPercent(improvement), " ", getIndicator(improvement)]
+      })]
+    })]
+  });
+}
+export function BenchmarkCompareView({
+  baseline,
+  comparison
+}) {
+  // Generate comparison data
+  const result = BenchmarkComparator.compare(baseline, comparison);
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.content,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.overallResult,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.overallEmoji,
+        children: result.isImproved ? "🎉" : "⚠️"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.overallText,
+        children: result.isImproved ? "IMPROVED" : "REGRESSED"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.overallPercent, {
+          color: getImprovementColor(result.overallImprovement)
+        }],
+        children: formatPercent(result.overallImprovement)
+      })]
+    }), /*#__PURE__*/_jsx(SectionHeader, {
+      title: "COMPARING"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.reportInfo,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.reportRole,
+          children: "BASELINE"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.reportName,
+          children: baseline.name
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.reportDate,
+          children: new Date(baseline.createdAt).toLocaleString()
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.vsContainer,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.vsText,
+          children: "vs"
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.reportInfo,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.reportRole,
+          children: "COMPARISON"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.reportName,
+          children: comparison.name
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.reportDate,
+          children: new Date(comparison.createdAt).toLocaleString()
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(SectionHeader, {
+      title: "TIMING COMPARISON"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.columnHeaders,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.columnLabel,
+          children: "Metric"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.columnValues,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.columnHeader,
+            children: "Base"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.columnHeader
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.columnHeader,
+            children: "After"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.columnHeader,
+            children: "Change"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(CompareRow, {
+        label: "Measure Time",
+        baseline: formatMs(baseline.stats.avgMeasureTime),
+        comparison: formatMs(comparison.stats.avgMeasureTime),
+        improvement: result.measureTimeImprovement
+      }), /*#__PURE__*/_jsx(CompareRow, {
+        label: "Pipeline Time",
+        baseline: formatMs(baseline.stats.avgTotalTime),
+        comparison: formatMs(comparison.stats.avgTotalTime),
+        improvement: result.pipelineTimeImprovement
+      }), /*#__PURE__*/_jsx(CompareRow, {
+        label: "Filter Time",
+        baseline: formatMs(baseline.stats.avgFilterTime),
+        comparison: formatMs(comparison.stats.avgFilterTime),
+        improvement: result.filterTimeImprovement
+      }), /*#__PURE__*/_jsx(CompareRow, {
+        label: "Track Time",
+        baseline: formatMs(baseline.stats.avgTrackTime),
+        comparison: formatMs(comparison.stats.avgTrackTime),
+        improvement: result.trackTimeImprovement
+      }), /*#__PURE__*/_jsx(CompareRow, {
+        label: "Overlay Render",
+        baseline: formatMs(baseline.stats.avgOverlayRenderTime),
+        comparison: formatMs(comparison.stats.avgOverlayRenderTime),
+        improvement: result.overlayRenderImprovement
+      })]
+    }), /*#__PURE__*/_jsx(SectionHeader, {
+      title: "PERCENTILES"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(CompareRow, {
+        label: "P50 (Median)",
+        baseline: formatMs(baseline.stats.p50TotalTime),
+        comparison: formatMs(comparison.stats.p50TotalTime),
+        improvement: baseline.stats.p50TotalTime > 0 ? (baseline.stats.p50TotalTime - comparison.stats.p50TotalTime) / baseline.stats.p50TotalTime * 100 : 0
+      }), /*#__PURE__*/_jsx(CompareRow, {
+        label: "P95",
+        baseline: formatMs(baseline.stats.p95TotalTime),
+        comparison: formatMs(comparison.stats.p95TotalTime),
+        improvement: baseline.stats.p95TotalTime > 0 ? (baseline.stats.p95TotalTime - comparison.stats.p95TotalTime) / baseline.stats.p95TotalTime * 100 : 0
+      }), /*#__PURE__*/_jsx(CompareRow, {
+        label: "P99",
+        baseline: formatMs(baseline.stats.p99TotalTime),
+        comparison: formatMs(comparison.stats.p99TotalTime),
+        improvement: baseline.stats.p99TotalTime > 0 ? (baseline.stats.p99TotalTime - comparison.stats.p99TotalTime) / baseline.stats.p99TotalTime * 100 : 0
+      })]
+    }), /*#__PURE__*/_jsx(SectionHeader, {
+      title: "BATCH STATISTICS"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.statComparison,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.statLabel,
+          children: "Total Batches"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.statValues,
+          children: [baseline.stats.batchCount, " \u2192 ", comparison.stats.batchCount]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.statComparison,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.statLabel,
+          children: "Nodes Processed"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.statValues,
+          children: [baseline.stats.totalNodesProcessed.toLocaleString(), " \u2192", " ", comparison.stats.totalNodesProcessed.toLocaleString()]
+        })]
+      })]
+    }), baseline.memoryDelta != null && comparison.memoryDelta != null && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(SectionHeader, {
+        title: "MEMORY"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.statComparison,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.statLabel,
+            children: "Memory Delta"
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: [styles.statValues, {
+              color: result.memoryDeltaChange != null && result.memoryDeltaChange < 0 ? macOSColors.semantic.success : macOSColors.text.primary
+            }],
+            children: [(baseline.memoryDelta / 1024 / 1024).toFixed(2), "MB \u2192", " ", (comparison.memoryDelta / 1024 / 1024).toFixed(2), "MB"]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.footer,
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: styles.footerText,
+        children: ["Compared at ", new Date(result.comparedAt).toLocaleString()]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    paddingVertical: 16
+  },
+  overallResult: {
+    alignItems: "center",
+    paddingVertical: 24,
+    backgroundColor: macOSColors.background.card,
+    marginHorizontal: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    marginBottom: 16
+  },
+  overallEmoji: {
+    fontSize: 32,
+    marginBottom: 8
+  },
+  overallText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: macOSColors.text.primary,
+    fontFamily: "monospace",
+    letterSpacing: 2,
+    marginBottom: 4
+  },
+  overallPercent: {
+    fontSize: 24,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  sectionHeader: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: macOSColors.border.default,
+    marginTop: 8
+  },
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace",
+    letterSpacing: 1
+  },
+  section: {
+    paddingHorizontal: 16,
+    paddingVertical: 8
+  },
+  reportInfo: {
+    flex: 1,
+    paddingVertical: 8
+  },
+  reportRole: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    fontFamily: "monospace",
+    letterSpacing: 1,
+    marginBottom: 4
+  },
+  reportName: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.text.primary,
+    fontFamily: "monospace",
+    marginBottom: 2
+  },
+  reportDate: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  },
+  vsContainer: {
+    paddingHorizontal: 16,
+    justifyContent: "center"
+  },
+  vsText: {
+    fontSize: 12,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace"
+  },
+  columnHeaders: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderColor: macOSColors.border.default,
+    marginBottom: 8
+  },
+  columnLabel: {
+    fontSize: 10,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace",
+    width: 80
+  },
+  columnValues: {
+    flexDirection: "row",
+    flex: 1,
+    justifyContent: "flex-end",
+    gap: 8
+  },
+  columnHeader: {
+    fontSize: 10,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace",
+    width: 50,
+    textAlign: "center"
+  },
+  compareRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 8
+  },
+  compareLabel: {
+    fontSize: 12,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace",
+    width: 80
+  },
+  compareValues: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "flex-end",
+    gap: 4
+  },
+  baselineValue: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace",
+    width: 50,
+    textAlign: "right"
+  },
+  arrow: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    paddingHorizontal: 4
+  },
+  comparisonValue: {
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace",
+    fontWeight: "500",
+    width: 50,
+    textAlign: "right"
+  },
+  improvementValue: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "600",
+    width: 70,
+    textAlign: "right"
+  },
+  statComparison: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 6
+  },
+  statLabel: {
+    fontSize: 12,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  },
+  statValues: {
+    fontSize: 12,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace"
+  },
+  footer: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    marginTop: 16,
+    borderTopWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  footerText: {
+    fontSize: 10,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace",
+    textAlign: "center"
+  }
+});
+export default BenchmarkCompareView;