feat(bench): metric tabs swap the chart instead of stacking tables

src/components/benchmark-body.tsx

@@ -11,7 +11,7 @@
 import { DistributionChart } from "@/components/distribution-chart";
 import { DonutChart } from "@/components/donut-chart";
 import { RegionGrid } from "@/components/region-grid";
-import { MetricPanelGrid } from "@/components/metric-panel-grid";
+import { MetricViewTabs } from "@/components/metric-view-tabs";
 import { CountLeaderboard } from "@/components/count-leaderboard";
 import { SummaryStat } from "@/components/summary-stat";
 import { ViewSwitcher } from "@/components/view-switcher";
@@ -181,7 +181,7 @@
  // they always saw.
  const allowedViews = viewsForBenchmark(benchmark);
  const defaultView = defaultViewFor(benchmark);
  const [view, setView, viewMounted] = useViewPreference(
  benchmark.slug,
  defaultView,
  allowedViews,
@@ -192,7 +192,7 @@
  // hidden when they switch to distribution or donut - the model is
  // "this is the field of providers the reader chose to focus on",
  // not "what each view chose to drop". Resets on bench navigation.
  const [excluded, setExcluded] = useState<Set<string>>(() => new Set());
  const toggleExclude = (slug: string) =>
  setExcluded((prev) => {
  const next = new Set(prev);
@@ -208,8 +208,16 @@
  // being split between the dimension row and the chart toolbar.
  const chartRegions = chartOnlyRegions(benchmark);
  const showChartRegionRow = regionOptions.length === 0 && chartRegions.length > 1;
  const [chartRegion, setChartRegion] = useState<string>("all");
+
+ // Active companion-metric panel. null = main spec metric (default chart
+ // data, default unit, default header). When a panel id is set, the chart
+ // pulls its per-provider series from panel.seriesByProvider, swaps the
+ // header label to panel.label, and the Y-axis unit to panel.unit.
+ const [activePanelId, setActivePanelId] = useState<string | null>(null);
+ const activePanel =
+ benchmark.metricPanels?.find((p) => p.id === activePanelId) ?? null;
  const chartRegionOptions: ChainOption[] = useMemo(
  () => [
  { value: "all", label: "All" },
  ...chartRegions.map((r) => ({ value: r, label: REGION_DISPLAY[r] ?? r })),
@@ -336,20 +344,38 @@
  />
  )}
  {view === "timeseries" && (
- <TimeSeriesChart
- benchmark={benchmark}
- region={
- regionOptions.length > 0
- ? (region ?? fallbackRegion ?? undefined)
- : showChartRegionRow
- ? chartRegion
- : undefined
- }
- excluded={excluded}
- onToggleExclude={toggleExclude}
- onResetExcluded={resetExcluded}
- headerActions={<ViewSwitcher allowed={allowedViews} value={view} onChange={setView} />}
- />
+ <>
+ {benchmark.metricPanels && benchmark.metricPanels.length > 0 && (
+ <MetricViewTabs
+ panels={benchmark.metricPanels}
+ mainLabel={benchmark.metric}
+ activeId={activePanelId}
+ onSelect={setActivePanelId}
+ />
+ )}
+ <TimeSeriesChart
+ benchmark={benchmark}
+ region={
+ regionOptions.length > 0
+ ? (region ?? fallbackRegion ?? undefined)
+ : showChartRegionRow
+ ? chartRegion
+ : undefined
+ }
+ excluded={excluded}
+ onToggleExclude={toggleExclude}
+ onResetExcluded={resetExcluded}
+ headerActions={<ViewSwitcher allowed={allowedViews} value={view} onChange={setView} />}
+ seriesOverride={activePanel?.seriesByProvider}
+ metricLabelOverride={activePanel?.label}
+ unitOverride={activePanel?.unit}
+ />
+ {activePanel?.description && (
+ <p className="mt-3 text-[12px] text-ink-muted max-w-2xl">
+ {activePanel.description}
+ </p>
+ )}
+ </>
  )}
  </div>
  </div>
@@ -363,12 +389,6 @@
  <LedgerTable benchmark={benchmark} />
  </div>
 
- {benchmark.metricPanels && benchmark.metricPanels.length > 0 && (
- <div className="mt-8 card-soft rounded-xl p-4 sm:p-6 lg:p-8">
- <MetricPanelGrid benchmark={benchmark} />
- </div>
- )}
-
  {benchmark.unit !== "count" &&
  Object.keys(benchmark.extras.regions).length > 0 && (
  <div className="mt-8 card-soft rounded-xl p-4 sm:p-6 lg:p-8">

src/components/metric-view-tabs.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import type { MetricPanel } from "@/types/benchmark";
+
+/**
+ * Tab row that lives directly above the time-series chart. One pill per
+ * metric panel, plus a "Default" pill at the front that switches the chart
+ * back to the bench's main spec-defined metric.
+ *
+ * Pure presentation: holds no state. The parent (benchmark-body) owns the
+ * active panel id and passes it down with the swap callback.
+ */
+export function MetricViewTabs({
+ panels,
+ mainLabel,
+ activeId,
+ onSelect,
+}: {
+ panels: MetricPanel[];
+ mainLabel: string;
+ activeId: string | null;
+ onSelect: (id: string | null) => void;
+}) {
+ return (
+ <div className="mb-3 flex flex-wrap items-center gap-1">
+ <span className="mr-2 text-[10px] uppercase tracking-[0.16em] text-ink-faint">
+ View
+ </span>
+ <Tab label={mainLabel} active={activeId == null} onClick={() => onSelect(null)} />
+ {panels.map((p) => (
+ <Tab
+ key={p.id}
+ label={p.label}
+ active={activeId === p.id}
+ onClick={() => onSelect(p.id)}
+ title={p.metric}
+ />
+ ))}
+ </div>
+ );
+}
+
+function Tab({
+ label,
+ active,
+ onClick,
+ title,
+}: {
+ label: string;
+ active: boolean;
+ onClick: () => void;
+ title?: string;
+}) {
+ return (
+ <button
+ type="button"
+ onClick={onClick}
+ title={title}
+ className={[
+ "rounded px-2.5 py-1 text-[11px] font-sans tabular uppercase tracking-[0.1em] font-medium transition-colors",
+ active
+ ? "bg-ink text-paper"
+ : "text-ink-muted hover:text-ink hover:bg-paper-soft",
+ ].join(" ")}
+ >
+ {label}
+ </button>
+ );
+}