feat(benchmark): add latest release performance dashboard

app/api/benchmark/performance/[runId]/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from 'next/server';
+
+import { surfaceEnabled } from '../../../../../deploy.config.mjs';
+
+const RUN_ID = /^[a-zA-Z0-9][a-zA-Z0-9._-]*$/;
+const RUN_SOURCE_BASE_URL = 'https://benchmark-results.base.org/runs';
+
+export const revalidate = 300;
+
+export async function GET(request: Request, { params }: { params: Promise<{ runId: string }> }) {
+  if (!surfaceEnabled('benchmark')) return new NextResponse(null, { status: 404 });
+  const { runId } = await params;
+  if (!RUN_ID.test(runId)) return NextResponse.json({ error: 'Invalid benchmark run ID.' }, { status: 400 });
+
+  const requestedArtifact = new URL(request.url).searchParams.get('artifact');
+  const artifact = requestedArtifact === 'metrics-validator'
+    ? 'metrics-validator.json'
+    : requestedArtifact === 'metrics-sequencer'
+      ? 'metrics-sequencer.json'
+      : 'load-test-result.json';
+  try {
+    const response = await fetch(`${RUN_SOURCE_BASE_URL}/${encodeURIComponent(runId)}/${artifact}`, {
+      next: { revalidate },
+    });
+    if (!response.ok) return NextResponse.json({ error: `Benchmark run source returned ${response.status}.` }, { status: 502 });
+    return NextResponse.json(await response.json(), {
+      headers: { 'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600' },
+    });
+  } catch {
+    return NextResponse.json({ error: 'Benchmark run source is unavailable.' }, { status: 502 });
+  }
+}

app/api/benchmark/performance/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+
+import { surfaceEnabled } from '../../../../deploy.config.mjs';
+import { PERFORMANCE_SOURCE_URL } from '../../../benchmark/performance/data';
+
+export const revalidate = 300;
+
+export async function GET() {
+  if (!surfaceEnabled('benchmark')) {
+    return new NextResponse(null, { status: 404 });
+  }
+  try {
+    const response = await fetch(PERFORMANCE_SOURCE_URL, { next: { revalidate } });
+    if (!response.ok) {
+      return NextResponse.json({ error: `Benchmark result source returned ${response.status}.` }, { status: 502 });
+    }
+    return NextResponse.json(await response.json(), {
+      headers: { 'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600' },
+    });
+  } catch {
+    return NextResponse.json({ error: 'Benchmark result source is unavailable.' }, { status: 502 });
+  }
+}

app/benchmark/benchmark.css

@@ -14,7 +14,7 @@
    * `styles.contentInner` in app/components/AppShell.tsx (padding 24px 28px 80px). */
   margin: -24px -28px -80px;
   padding: 24px 28px 80px;
-  background: #f8fafc;
+  background: transparent;
   color: #333;
 }
 

app/benchmark/components/BaseChart.tsx

@@ -21,7 +21,7 @@ const TOP_MARGIN = 20;
 const ASPECT_RATIO = 0.5;
 const LEGEND_SPACE = 20;
 const X_AXIS_SPACE = 60;
-const Y_AXIS_SPACE = 40;
+const Y_AXIS_SPACE = 75;
 const TITLE_SPACE = 50;
 
 const DEFAULT_MARGIN = {

app/benchmark/components/ChartGrid.tsx

@@ -6,6 +6,9 @@ import LineChart from "./LineChart";
 interface ProvidedProps {
   data: DataSeries[];
   role: "sequencer" | "validator" | null;
+  xAxisDomain?: [number, number];
+  xAxisLabel?: string;
+  showLegend?: boolean;
 }
 
 function resolveMetricKey(
@@ -39,7 +42,7 @@ function resolveMetricKey(
   return primaryKey;
 }
 
-const ChartGrid: React.FC<ProvidedProps> = ({ data, role }: ProvidedProps) => {
+const ChartGrid: React.FC<ProvidedProps> = ({ data, role, xAxisDomain, xAxisLabel, showLegend }: ProvidedProps) => {
   return (
     <div className="charts-container">
       {SORTED_CHART_CONFIG.map(([metricKey, config]) => {
@@ -62,6 +65,9 @@ const ChartGrid: React.FC<ProvidedProps> = ({ data, role }: ProvidedProps) => {
           description: config.description,
           unit: config.unit,
           thresholds,
+          xAxisDomain,
+          xAxisLabel,
+          showLegend,
         };
 
         return (

app/benchmark/components/LineChart.tsx

@@ -23,6 +23,7 @@ interface LineChartProps {
   unit?: ChartConfig["unit"];
   xAxisDomain?: [number, number];
   xAxisLabel?: string;
+  showLegend?: boolean;
   thresholds?: {
     warning?: Record<string, number>;
     error?: Record<string, number>;
@@ -56,6 +57,7 @@ const LineChart: React.FC<LineChartProps> = ({
   unit,
   xAxisDomain,
   xAxisLabel = "Block Number",
+  showLegend = true,
   thresholds,
 }) => {
   // Generate a unique ID for this chart
@@ -471,7 +473,7 @@ const LineChart: React.FC<LineChartProps> = ({
             .attr("class", "x-axis-label")
             .attr("text-anchor", "middle")
             .attr("x", dimensions.width / 2)
-            .attr("y", dimensions.height + 27)
+            .attr("y", dimensions.height + 58)
             .attr("font-size", 12)
             .attr("fill", "#333")
             .text(xAxisLabel);
@@ -493,6 +495,7 @@ const LineChart: React.FC<LineChartProps> = ({
           .style("text-anchor", "end");
 
         // Add legend
+        if (showLegend) {
         const legend = svg
           .append("g")
           .attr("class", "legend")
@@ -550,6 +553,8 @@ const LineChart: React.FC<LineChartProps> = ({
           currentX += legendItemWidths[i] + spacing; // Add spacing between items
         });
 
+        }
+
         series.forEach((s, i) => {
           const color = s.color || d3.schemeCategory10[i % 10];
 

app/benchmark/metricDefinitions.ts

@@ -370,12 +370,6 @@ export const CHART_CONFIG = {
     description: "p90 hashed trie cursor overall duration",
     unit: "s",
   },
-  reth_db_freelist: {
-    type: "line",
-    title: "MDBX Freelist",
-    description: "MDBX freelist size",
-    unit: "count",
-  },
   reth_sync_state_provider_total_storage_fetch_latency_avg: {
     type: "line",
     title: "Validator Storage Load Latency",
@@ -444,7 +438,6 @@ const CHART_CONFIG_ORDER: (keyof typeof CHART_CONFIG)[] = [
   "reth_trie_proof_task_blinded_account_nodes_quantile_0_9",
   "reth_trie_cursor_overall_duration_quantile_0_9",
   "reth_trie_hashed_cursor_overall_duration_quantile_0_9",
-  "reth_db_freelist",
 ];
 
 export const SORTED_CHART_CONFIG: [string, ChartConfig][] = Object.entries(

app/benchmark/page.tsx

@@ -1,9 +1,6 @@
 import { redirect } from 'next/navigation';
 
-import { runHref } from './routes';
-
-// /benchmark has no landing page of its own: the section opens on the newest
-// benchmark run, which the run view resolves client-side from the metadata.
+// Open the benchmark section on its release-oriented Performance dashboard.
 export default function BenchmarkPage() {
-  redirect(runHref('latest'));
+  redirect('/benchmark/performance');
 }