feat: refine leaderboard visualizations and CSV exports

Polish the Ranking, Details, and Visualizations experiences with clearer
sorting states, reusable cursor tooltips, better chart labels, and working
CSV exports.

- add reusable cursor-based tooltip components for charts and overflowing text
- refactor OverflowTooltip to use the new cursor tooltip behavior
- add RadarLabelsOverlay for radar chart labels that can truncate and reveal
full names on hover
- add global thin scrollbar styling for light and dark themes
- allow table column header/cell classes to be computed reactively so active
sort columns can be highlighted

Ranking:
- show active sort direction with up/down icons instead of a static sort icon
- highlight the active sorted column in headers and cells
- add overflow tooltip support for long model names
- display model params consistently in filter rows and table summaries

Details:
- add CSV serialization for benchmark matrix rows and filtered model rows
- replace inactive matrix export buttons with a single working CSV export
- wire the models tab CSV button to export the current filtered model list
- improve benchmark matrix sorting indicators and active-column highlighting
- add overflow tooltips for long matrix dataset and model group labels
- render model radar labels through RadarLabelsOverlay for cleaner clipping

Visualizations:
- start with the first five models selected by default for a cleaner initial view
- move chart tooltip state into the shared ChartCursorTooltip component
- add pinned-model support across comparison charts and Pareto labels
- improve radar chart labels and hover details
- show an empty heatmap state when no models or groups are selected
- change grouped bars to compare models by averaged selected-group metrics
- fix scatter axes to a stable 0..1 scale
- simplify Pareto copy and axis labels, and keep pinned labels visible
- highlight active latency table sort columns
- include FPR real/robust/delta values in robustness rows alongside FNR

Data and types:
- parse optional robustness FPR fields from bucket visualization payloads
- propagate FPR robustness fields through bucket adapters and frontend types
- remove obsolete chart tooltip types from tools types

Localization:
- add heatmap empty-state text
- add grouped average summary text
- update grouped bars and Pareto descriptions in English and Russian

messages/en.json

@@ -253,6 +253,7 @@
 	"tools_radar_scale": "Radar scale",
 	"tools_radar_group_score": "group score",
 	"tools_mean": "mean",
+	"tools_group_mean_summary": "average across {groups} groups",
 	"tools_real_score": "score real",
 	"tools_robust_score": "score robust",
 	"tools_selected_summary": "{models} models · {groups} groups",
@@ -269,17 +270,17 @@
 	"tools_heatmap_scale_min": "min {value}",
 	"tools_heatmap_scale_max": "max {value}",
 	"tools_heatmap_header": "{metric} · group / model",
+	"tools_heatmap_empty": "Select at least one model and one group to show the heatmap.",
 	"tools_grouped_bars_title": "Grouped bars",
-	"tools_grouped_bars_hint": "FNR / FPR / F1 by group · averages across selected models",
-	"tools_grouped_bars_aria": "Grouped FNR FPR F1 bars by group",
+	"tools_grouped_bars_hint": "FNR / FPR / F1 by model · averages across selected groups",
+	"tools_grouped_bars_aria": "Grouped FNR FPR F1 bars by model",
 	"tools_lower_better": "lower = better",
 	"tools_higher_better": "higher = better",
 	"tools_pareto_title": "Pareto: quality × latency",
-	"tools_pareto_hint": "x = p95 latency (ms, lower = better), y = integral (higher = better) · color = overall FPR",
+	"tools_pareto_hint": "x = p95 latency (ms, lower = better), y = integral (higher = better)",
 	"tools_pareto_aria": "Pareto quality versus p95 latency",
-	"tools_pareto_x_axis": "p95 latency, ms (← lower better)",
-	"tools_pareto_y_axis": "integral (higher better →)",
-	"tools_pareto_fpr_legend": "teal (few false alarms) → red (many)",
+	"tools_pareto_x_axis": "p95 ms ↓",
+	"tools_pareto_y_axis": "Integral ↑",
 	"tools_pareto_click_pin_hint": "hover for details · dashed line = Pareto frontier",
 	"tools_pareto_pin_model": "Pin {model} label",
 	"tools_pareto_unpin_model": "Unpin {model} label",

messages/ru.json

@@ -253,6 +253,7 @@
 	"tools_radar_scale": "Шкала радара",
 	"tools_radar_group_score": "group score",
 	"tools_mean": "среднее",
+	"tools_group_mean_summary": "среднее по {groups} группам",
 	"tools_real_score": "score real",
 	"tools_robust_score": "score robust",
 	"tools_selected_summary": "{models} моделей · {groups} групп",
@@ -269,17 +270,17 @@
 	"tools_heatmap_scale_min": "min {value}",
 	"tools_heatmap_scale_max": "max {value}",
 	"tools_heatmap_header": "{metric} · группа / модель",
+	"tools_heatmap_empty": "Выберите хотя бы одну модель и одну группу, чтобы показать heatmap.",
 	"tools_grouped_bars_title": "Сгруппированные бары",
-	"tools_grouped_bars_hint": "FNR / FPR / F1 по группам · средние по выбранным моделям",
-	"tools_grouped_bars_aria": "Сгруппированные бары FNR FPR F1 по группам",
+	"tools_grouped_bars_hint": "FNR / FPR / F1 по моделям · средние по выбранным группам",
+	"tools_grouped_bars_aria": "Сгруппированные бары FNR FPR F1 по моделям",
 	"tools_lower_better": "ниже = лучше",
 	"tools_higher_better": "выше = лучше",
 	"tools_pareto_title": "Парето: качество × задержка",
-	"tools_pareto_hint": "x = p95 latency (ms, ниже = лучше), y = integral (выше = лучше) · цвет = overall FPR",
+	"tools_pareto_hint": "x = p95 latency (ms, ниже = лучше), y = integral (выше = лучше)",
 	"tools_pareto_aria": "Парето качество против задержки p95",
-	"tools_pareto_x_axis": "p95 latency, ms (← ниже лучше)",
-	"tools_pareto_y_axis": "integral (выше лучше →)",
-	"tools_pareto_fpr_legend": "teal (мало ложных) → red (много)",
+	"tools_pareto_x_axis": "p95 ms ↓",
+	"tools_pareto_y_axis": "Integral ↑",
 	"tools_pareto_click_pin_hint": "hover — детали · пунктир = Pareto frontier",
 	"tools_pareto_pin_model": "Закрепить подпись {model}",
 	"tools_pareto_unpin_model": "Снять подпись {model}",

src/app.css

@@ -39,6 +39,8 @@
 	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 	--sidebar-border: oklch(0.92 0.004 286.32);
 	--sidebar-ring: oklch(0.705 0.015 286.067);
+	--scrollbar-thumb: oklch(0.705 0.015 286.067 / 65%);
+	--scrollbar-thumb-hover: oklch(0.552 0.016 285.938 / 85%);
 }
 
 .dark {
@@ -73,6 +75,8 @@
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
 	--sidebar-ring: oklch(0.552 0.016 285.938);
+	--scrollbar-thumb: oklch(0.552 0.016 285.938 / 70%);
+	--scrollbar-thumb-hover: oklch(0.705 0.015 286.067 / 90%);
 }
 
 @theme inline {
@@ -120,6 +124,27 @@
 @layer base {
 	* {
 		@apply border-border outline-ring/50;
+		scrollbar-color: var(--scrollbar-thumb) transparent;
+		scrollbar-width: thin;
+	}
+	*::-webkit-scrollbar {
+		width: 10px;
+		height: 10px;
+	}
+	*::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	*::-webkit-scrollbar-thumb {
+		border: 3px solid transparent;
+		border-radius: 999px;
+		background-color: var(--scrollbar-thumb);
+		background-clip: content-box;
+	}
+	*::-webkit-scrollbar-thumb:hover {
+		background-color: var(--scrollbar-thumb-hover);
+	}
+	*::-webkit-scrollbar-corner {
+		background: transparent;
 	}
 	body {
 		@apply bg-background text-foreground;

src/lib/components/OverflowTooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { tick } from 'svelte';
-	import Tooltip from '$lib/components/Tooltip.svelte';
+	import OverflowCursorTooltip from '$lib/components/tooltips/OverflowCursorTooltip.svelte';
+	import { cn } from '$lib/utils';
 
 	type Props = {
 		text: string;
@@ -15,48 +15,11 @@
 		triggerClass = 'block min-w-0',
 		contentClass = 'max-w-sm break-all'
 	}: Props = $props();
-	let element: HTMLElement | null = $state(null);
-	let isOverflowing = $state(false);
-
-	function updateOverflow() {
-		if (!element) {
-			isOverflowing = false;
-			return;
-		}
-
-		isOverflowing =
-			element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
-	}
-
-	$effect(() => {
-		const currentText = text;
-		tick().then(() => {
-			if (currentText === text) updateOverflow();
-		});
-	});
-
-	$effect(() => {
-		if (!element || typeof ResizeObserver === 'undefined') return;
-
-		const observer = new ResizeObserver(updateOverflow);
-		observer.observe(element);
-		updateOverflow();
-
-		return () => observer.disconnect();
-	});
 </script>
 
-{#snippet label()}
-	<span bind:this={element} class={className}>{text}</span>
-{/snippet}
-
-{#if isOverflowing}
-	<Tooltip {triggerClass} {contentClass}>
-		{@render label()}
-		{#snippet content()}
-			{text}
-		{/snippet}
-	</Tooltip>
-{:else}
-	{@render label()}
-{/if}
+<OverflowCursorTooltip
+	{text}
+	labelClass={cn(triggerClass, className)}
+	tooltipClass={contentClass}
+	position="label"
+/>

src/lib/components/Table.svelte

@@ -4,8 +4,8 @@
 	export type TableColumn<Key extends string = string> = {
 		key: Key;
 		label: string | (() => string);
-		headClass?: string;
-		cellClass?: string;
+		headClass?: string | (() => string | undefined);
+		cellClass?: string | (() => string | undefined);
 		ariaSort?: () => 'ascending' | 'descending' | 'none';
 	};
 </script>
@@ -52,6 +52,10 @@
 		return typeof rowClass === 'function' ? rowClass(row, index) : rowClass;
 	}
 
+	function resolvedColumnClass(className: string | (() => string | undefined) | undefined) {
+		return typeof className === 'function' ? className() : className;
+	}
+
 	function handleRowKeydown(event: KeyboardEvent, row: Row, index: number) {
 		if (!onrowclick || (event.key !== 'Enter' && event.key !== ' ')) return;
 
@@ -70,7 +74,7 @@
 			<UITable.Row class={headerClass}>
 				{#each columns as column (column.key)}
 					<UITable.Head
-						class={cn('text-muted-foreground', column.headClass)}
+						class={cn('text-muted-foreground', resolvedColumnClass(column.headClass))}
 						aria-sort={column.ariaSort?.() ?? 'none'}
 					>
 						{#if header}
@@ -93,7 +97,7 @@
 					onkeydown={(event) => handleRowKeydown(event, row, index)}
 				>
 					{#each columns as column (column.key)}
-						<UITable.Cell class={column.cellClass}>
+						<UITable.Cell class={resolvedColumnClass(column.cellClass)}>
 							{@render cell(row, column, index)}
 						</UITable.Cell>
 					{/each}

src/lib/components/charts/RadarLabelsOverlay.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">
+	export type RadarLabelAnchor = 'start' | 'middle' | 'end';
+
+	export type RadarOverlayLabel = {
+		key: string;
+		text: string;
+		x: number;
+		y: number;
+		anchor: RadarLabelAnchor;
+	};
+</script>
+
+<script lang="ts">
+	import OverflowCursorTooltip from '$lib/components/tooltips/OverflowCursorTooltip.svelte';
+	import { cn } from '$lib/utils';
+
+	type Props = {
+		labels: readonly RadarOverlayLabel[];
+		viewBoxWidth: number;
+		viewBoxHeight: number;
+		labelClass?: string;
+		tooltipClass?: string;
+		position?: 'cursor' | 'label';
+	};
+
+	let {
+		labels,
+		viewBoxWidth,
+		viewBoxHeight,
+		labelClass,
+		tooltipClass,
+		position = 'cursor'
+	}: Props = $props();
+
+	function labelStyle(label: RadarOverlayLabel) {
+		return `left:${(label.x / viewBoxWidth) * 100}%; top:${(label.y / viewBoxHeight) * 100}%;`;
+	}
+
+	function labelAlignmentClass(anchor: RadarLabelAnchor) {
+		if (anchor === 'middle') return '-translate-x-1/2 text-center';
+		if (anchor === 'start') return 'text-left';
+		return '-translate-x-full text-right';
+	}
+</script>
+
+<div class="pointer-events-none absolute inset-0">
+	{#each labels as label (label.key)}
+		<OverflowCursorTooltip
+			text={label.text}
+			labelClass={cn(
+				'pointer-events-auto absolute block w-28 -translate-y-1/2 truncate font-mono text-[10px] leading-none text-muted-foreground',
+				labelAlignmentClass(label.anchor),
+				labelClass
+			)}
+			labelStyle={labelStyle(label)}
+			{tooltipClass}
+			{position}
+		/>
+	{/each}
+</div>

src/lib/components/tooltips/ChartCursorTooltip.svelte

@@ -0,0 +1,96 @@
+<script module lang="ts">
+	import type { CursorTooltipRow } from './CursorTooltip.svelte';
+
+	export type ChartCursorTooltipApi = {
+		show: (event: PointerEvent, title: string, rows: readonly CursorTooltipRow[]) => void;
+		move: (event: PointerEvent) => void;
+		hide: () => void;
+	};
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import CursorTooltip from './CursorTooltip.svelte';
+
+	type Props = {
+		children: Snippet<[ChartCursorTooltipApi]>;
+		class?: string;
+	};
+
+	let { children, class: className }: Props = $props();
+
+	let tooltipElement: HTMLDivElement | null = $state(null);
+	let tooltip = $state<{
+		x: number;
+		y: number;
+		title: string;
+		rows: readonly CursorTooltipRow[];
+	} | null>(null);
+
+	function tooltipPosition(event: Pick<PointerEvent, 'clientX' | 'clientY'>) {
+		const margin = 12;
+		const offset = 16;
+		const tooltipRect = tooltipElement?.getBoundingClientRect();
+		const tooltipWidth = tooltipRect?.width ?? 384;
+		const tooltipHeight = tooltipRect?.height ?? 180;
+		let x = event.clientX + offset;
+		let y = event.clientY + offset;
+
+		if (typeof window === 'undefined') return { x, y };
+
+		if (x + tooltipWidth + margin > window.innerWidth) {
+			x = event.clientX - tooltipWidth - offset;
+		}
+		if (y + tooltipHeight + margin > window.innerHeight) {
+			y = event.clientY - tooltipHeight - offset;
+		}
+
+		return {
+			x: Math.min(Math.max(margin, x), Math.max(margin, window.innerWidth - tooltipWidth - margin)),
+			y: Math.min(
+				Math.max(margin, y),
+				Math.max(margin, window.innerHeight - tooltipHeight - margin)
+			)
+		};
+	}
+
+	function show(event: PointerEvent, title: string, rows: readonly CursorTooltipRow[]) {
+		const position = tooltipPosition(event);
+		tooltip = {
+			x: position.x,
+			y: position.y,
+			title,
+			rows
+		};
+
+		tick().then(() => {
+			if (!tooltip) return;
+			tooltip = { ...tooltip, ...tooltipPosition(event) };
+		});
+	}
+
+	function move(event: PointerEvent) {
+		if (!tooltip) return;
+		tooltip = { ...tooltip, ...tooltipPosition(event) };
+	}
+
+	function hide() {
+		tooltip = null;
+	}
+
+	const api: ChartCursorTooltipApi = { show, move, hide };
+</script>
+
+{@render children(api)}
+
+{#if tooltip}
+	<CursorTooltip
+		bind:ref={tooltipElement}
+		x={tooltip.x}
+		y={tooltip.y}
+		title={tooltip.title}
+		rows={tooltip.rows}
+		class={className}
+	/>
+{/if}

src/lib/components/tooltips/CursorTooltip.svelte

@@ -0,0 +1,81 @@
+<script module lang="ts">
+	export type CursorTooltipRow = {
+		label: string;
+		value: string;
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '$lib/utils';
+
+	type Props = {
+		x: number;
+		y: number;
+		title?: string;
+		rows?: readonly CursorTooltipRow[];
+		children?: Snippet;
+		class?: string;
+		titleClass?: string;
+		rowsClass?: string;
+		rowClass?: string;
+		labelClass?: string;
+		valueClass?: string;
+		ref?: HTMLDivElement | null;
+	};
+
+	let {
+		x,
+		y,
+		title,
+		rows = [],
+		children,
+		class: className,
+		titleClass,
+		rowsClass,
+		rowClass,
+		labelClass,
+		valueClass,
+		ref = $bindable(null)
+	}: Props = $props();
+
+	function portalTooltip(node: HTMLDivElement) {
+		if (typeof document === 'undefined') return;
+
+		document.body.appendChild(node);
+
+		return {
+			destroy() {
+				node.remove();
+			}
+		};
+	}
+</script>
+
+<div
+	use:portalTooltip
+	bind:this={ref}
+	class={cn(
+		'pointer-events-none fixed z-[100] max-w-[min(24rem,calc(100vw-1.5rem))] rounded-lg border bg-popover px-4 py-3 text-sm text-popover-foreground shadow-xl',
+		className
+	)}
+	style={`left:${x}px; top:${y}px`}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if title}
+			<div class={cn('break-words font-semibold', titleClass)}>{title}</div>
+		{/if}
+		{#if rows.length}
+			<div class={cn('mt-2 space-y-1 font-mono', rowsClass)}>
+				{#each rows as row (`${row.label}-${row.value}`)}
+					<div class={cn('grid grid-cols-[auto_1fr] gap-5', rowClass)}>
+						<span class={cn('break-words text-muted-foreground', labelClass)}>{row.label}</span>
+						<span class={cn('text-right', valueClass)}>{row.value}</span>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>

src/lib/components/tooltips/OverflowCursorTooltip.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import CursorTooltip from './CursorTooltip.svelte';
+
+	type Props = {
+		text: string;
+		children?: Snippet;
+		labelClass?: string;
+		labelStyle?: string;
+		tooltipClass?: string;
+		role?: string;
+		ariaLabel?: string;
+		overflowPadding?: number;
+		position?: 'cursor' | 'label';
+	};
+
+	let {
+		text,
+		children,
+		labelClass = 'block min-w-0 truncate',
+		labelStyle,
+		tooltipClass,
+		role = 'note',
+		ariaLabel,
+		overflowPadding = 2,
+		position = 'cursor'
+	}: Props = $props();
+
+	let labelElement: HTMLSpanElement | null = $state(null);
+	let tooltipElement: HTMLDivElement | null = $state(null);
+	let tooltip = $state<{ x: number; y: number } | null>(null);
+	let measureCanvas: HTMLCanvasElement | undefined;
+
+	function textOverflows() {
+		if (!labelElement) return false;
+
+		const availableWidth = labelElement.clientWidth;
+		const label = text.trim();
+		if (availableWidth <= 0 || label === '') return false;
+
+		if (typeof document === 'undefined') {
+			return labelElement.scrollWidth > availableWidth + overflowPadding;
+		}
+
+		measureCanvas ??= document.createElement('canvas');
+		const context = measureCanvas.getContext('2d');
+		if (!context) return labelElement.scrollWidth > availableWidth + overflowPadding;
+
+		context.font = getComputedStyle(labelElement).font;
+		return context.measureText(label).width > availableWidth + overflowPadding;
+	}
+
+	function clampTooltipPosition(x: number, y: number, tooltipWidth: number, tooltipHeight: number) {
+		const margin = 12;
+		if (typeof window === 'undefined') return { x, y };
+
+		if (x + tooltipWidth + margin > window.innerWidth) {
+			x = window.innerWidth - tooltipWidth - margin;
+		}
+		if (y + tooltipHeight + margin > window.innerHeight) {
+			y = window.innerHeight - tooltipHeight - margin;
+		}
+
+		return {
+			x: Math.min(Math.max(margin, x), Math.max(margin, window.innerWidth - tooltipWidth - margin)),
+			y: Math.min(
+				Math.max(margin, y),
+				Math.max(margin, window.innerHeight - tooltipHeight - margin)
+			)
+		};
+	}
+
+	function cursorTooltipPosition(event: Pick<PointerEvent, 'clientX' | 'clientY'>) {
+		const offset = 16;
+		const tooltipRect = tooltipElement?.getBoundingClientRect();
+		const tooltipWidth = tooltipRect?.width ?? 320;
+		const tooltipHeight = tooltipRect?.height ?? 64;
+		let x = event.clientX + offset;
+		let y = event.clientY + offset;
+
+		if (typeof window !== 'undefined') {
+			if (x + tooltipWidth + 12 > window.innerWidth) {
+				x = event.clientX - tooltipWidth - offset;
+			}
+			if (y + tooltipHeight + 12 > window.innerHeight) {
+				y = event.clientY - tooltipHeight - offset;
+			}
+		}
+
+		return clampTooltipPosition(x, y, tooltipWidth, tooltipHeight);
+	}
+
+	function labelTooltipPosition() {
+		const labelRect = labelElement?.getBoundingClientRect();
+		const tooltipRect = tooltipElement?.getBoundingClientRect();
+		const tooltipWidth = tooltipRect?.width ?? 320;
+		const tooltipHeight = tooltipRect?.height ?? 64;
+		const offset = 12;
+		if (!labelRect) return { x: 12, y: 12 };
+
+		const x = labelRect.left + labelRect.width / 2 - tooltipWidth / 2;
+		const y =
+			labelRect.top >= tooltipHeight + offset + 12
+				? labelRect.top - tooltipHeight - offset
+				: labelRect.bottom + offset;
+
+		return clampTooltipPosition(x, y, tooltipWidth, tooltipHeight);
+	}
+
+	function tooltipPosition(event: PointerEvent) {
+		return position === 'label' ? labelTooltipPosition() : cursorTooltipPosition(event);
+	}
+
+	function updateTooltip(event: PointerEvent) {
+		if (!textOverflows()) {
+			tooltip = null;
+			return;
+		}
+
+		tooltip = tooltipPosition(event);
+
+		tick().then(() => {
+			if (!tooltip) return;
+			tooltip = tooltipPosition(event);
+		});
+	}
+
+	function hideTooltip() {
+		tooltip = null;
+	}
+</script>
+
+<span
+	bind:this={labelElement}
+	class={labelClass}
+	style={labelStyle}
+	{role}
+	aria-label={ariaLabel ?? text}
+	onpointerenter={updateTooltip}
+	onpointermove={updateTooltip}
+	onpointerleave={hideTooltip}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{text}
+	{/if}
+</span>
+
+{#if tooltip}
+	<CursorTooltip
+		bind:ref={tooltipElement}
+		x={tooltip.x}
+		y={tooltip.y}
+		title={text}
+		class={tooltipClass}
+	/>
+{/if}

src/lib/data/details.ts

@@ -6,6 +6,7 @@ import type {
 	BenchmarkRankingRow,
 	DetailMetric,
 	DetailsLanguageFilter,
+	MatrixGroup,
 	MatrixDataset,
 	MatrixSortDirection,
 	ModelGroupRow,
@@ -88,6 +89,14 @@ function modelKey(model: GuardModel) {
 	return model.modelId ?? model.name;
 }
 
+function csvCell(value: string | number | null | undefined) {
+	return `"${String(value ?? '').replaceAll('"', '""')}"`;
+}
+
+function csvNumber(value: number | null | undefined, digits = 4) {
+	return isNumber(value) ? value.toFixed(digits) : '';
+}
+
 export function matrixCellValue(
 	model: GuardModel,
 	dataset: MatrixDataset,
@@ -263,6 +272,85 @@ export function filterModels(
 		.sort((a, b) => modelSortValue(b, sort) - modelSortValue(a, sort));
 }
 
+export function detailMatrixRowsToCsv(
+	rows: readonly GuardModel[],
+	groups: readonly MatrixGroup[],
+	metric: DetailMetric,
+	datasetCells: Record<string, Record<string, DetailsDatasetMatrixCell>>
+) {
+	const datasets = groups.flatMap((group) =>
+		group.datasets.map((dataset) => ({
+			...dataset,
+			header: `${group.label} / ${dataset.label} ${metric}`
+		}))
+	);
+	const header = [
+		'rank',
+		'model',
+		'organization',
+		'size',
+		'integral',
+		'metric',
+		...datasets.map((dataset) => dataset.header)
+	];
+	const lines = rows.map((model, index) => [
+		index + 1,
+		model.name,
+		model.org,
+		model.params,
+		csvNumber(model.integral),
+		metric,
+		...datasets.map((dataset) =>
+			csvNumber(detailMetricValue(datasetCells[modelKey(model)]?.[dataset.id], metric))
+		)
+	]);
+
+	return [header, ...lines].map((row) => row.map(csvCell).join(',')).join('\n');
+}
+
+export function detailModelRowsToCsv(rows: readonly GuardModel[]) {
+	const header = [
+		'rank',
+		'model',
+		'organization',
+		'family',
+		'type',
+		'license',
+		'size',
+		'languages',
+		'integral',
+		'min_group',
+		'overall_fpr',
+		'overall_fnr',
+		'overall_f1',
+		'p50_ms',
+		'p95_ms',
+		'p99_ms',
+		'run_date'
+	];
+	const lines = rows.map((model, index) => [
+		index + 1,
+		model.name,
+		model.org,
+		model.family,
+		model.type,
+		model.license,
+		model.params,
+		model.languages.join('; '),
+		csvNumber(model.integral),
+		csvNumber(model.minGroup),
+		csvNumber(model.fpr),
+		csvNumber(model.fnr),
+		csvNumber(model.f1),
+		csvNumber(model.p50, 1),
+		csvNumber(model.p95, 1),
+		csvNumber(model.p99, 1),
+		model.runDate
+	]);
+
+	return [header, ...lines].map((row) => row.map(csvCell).join(',')).join('\n');
+}
+
 function groupName(key: string, dataset: DetailsDataset, locale: SupportedLocale) {
 	return localized(dataset.groupLabels[key], locale, key);
 }

src/lib/server/hf-bucket/adapt-tools.ts

@@ -160,6 +160,9 @@ export function adaptBucketTools(snapshot: BucketVisualizationSnapshot): ToolsDa
 					fnrReal: row.fnr_real,
 					fnrRobust: row.fnr_robust,
 					deltaFnr: row.delta_fnr,
+					fprReal: row.fpr_real,
+					fprRobust: row.fpr_robust,
+					deltaFpr: row.delta_fpr,
 					categoryLabel: row.category_label
 				}))
 			}

src/lib/server/hf-bucket/types.ts

@@ -280,6 +280,9 @@ export type BucketRobustnessRow = {
 	fnr_real: NullableMetricValue;
 	fnr_robust: NullableMetricValue;
 	delta_fnr: NullableMetricValue;
+	fpr_real: NullableMetricValue;
+	fpr_robust: NullableMetricValue;
+	delta_fpr: NullableMetricValue;
 	category_label: LocalizedString;
 };
 

src/lib/server/hf-bucket/visualizations-payload.ts

@@ -227,6 +227,9 @@ function parseRobustnessRow(value: unknown, index: number): BucketRobustnessRow
 		fnr_real: nullableNumber(item.fnr_real, `${field}.fnr_real`),
 		fnr_robust: nullableNumber(item.fnr_robust, `${field}.fnr_robust`),
 		delta_fnr: nullableNumber(item.delta_fnr, `${field}.delta_fnr`),
+		fpr_real: nullableNumber(item.fpr_real ?? null, `${field}.fpr_real`),
+		fpr_robust: nullableNumber(item.fpr_robust ?? null, `${field}.fpr_robust`),
+		delta_fpr: nullableNumber(item.delta_fpr ?? null, `${field}.delta_fpr`),
 		category_label: localized(item.category_label, `${field}.category_label`)
 	};
 }

src/lib/types/tools-data.ts

@@ -105,6 +105,9 @@ export type ToolsRobustnessVisualization = {
 		fnrReal: number | null;
 		fnrRobust: number | null;
 		deltaFnr: number | null;
+		fprReal: number | null;
+		fprRobust: number | null;
+		deltaFpr: number | null;
 		categoryLabel: LocalizedString;
 	}>;
 };

src/lib/types/tools.ts

@@ -4,15 +4,3 @@ export type ToolsRadarScale = 'score' | 'f1';
 export type ToolsHeatmapMetric = ToolsVizMetric | 'score';
 export type ToolsSortDirection = 'asc' | 'desc';
 export type ToolsLatencySortKey = 'model' | 'p50' | 'p95' | 'p99' | 'errorRate';
-
-export type ToolsTooltipRow = {
-	label: string;
-	value: string;
-};
-
-export type ToolsChartTooltip = {
-	x: number;
-	y: number;
-	title: string;
-	rows: ToolsTooltipRow[];
-};

src/routes/+page.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
-	import { ArrowUpDownIcon, DownloadIcon, ExternalLinkIcon } from '@lucide/svelte';
+	import {
+		ArrowDownIcon,
+		ArrowUpDownIcon,
+		ArrowUpIcon,
+		DownloadIcon,
+		ExternalLinkIcon
+	} from '@lucide/svelte';
 	import BucketDataFallback from '$lib/components/BucketDataFallback.svelte';
 	import BucketDataWarning from '$lib/components/BucketDataWarning.svelte';
+	import OverflowTooltip from '$lib/components/OverflowTooltip.svelte';
 	import Select from '$lib/components/Select.svelte';
 	import Sheet from '$lib/components/Sheet.svelte';
 	import Tabs from '$lib/components/Tabs.svelte';
@@ -153,8 +160,17 @@
 			key: column.key,
 			label: column.label,
 			metric: column,
-			headClass: cn('align-top', column.align === 'right' && 'text-right'),
-			cellClass: cn(column.align === 'right' && 'text-right'),
+			headClass: () =>
+				cn(
+					'align-top transition-colors',
+					column.align === 'right' && 'text-right',
+					sortKey === column.key && 'bg-muted/80 text-foreground'
+				),
+			cellClass: () =>
+				cn(
+					column.align === 'right' && 'text-right',
+					sortKey === column.key && 'bg-muted/20 text-foreground'
+				),
 			ariaSort: () =>
 				sortKey === column.key ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'
 		}))
@@ -526,7 +542,7 @@
 							{@const model = modelByFilterValue(option.value)}
 							<span class="min-w-0 truncate">{model?.short ?? option.label}</span>
 							{#if model}
-								<code class="ml-auto text-xs text-muted-foreground">{model.size}</code>
+								<code class="ml-auto text-xs text-muted-foreground">{model.params}</code>
 							{/if}
 						{/if}
 					{/snippet}
@@ -585,11 +601,13 @@
 		{#snippet SortHeader({ column }: { column: LeaderboardTableColumn })}
 			{@const metric = column.metric}
 			{#if metric}
+				{@const isActive = sortKey === metric.key}
 				<button
 					type="button"
 					class={cn(
 						'inline-flex w-full justify-start flex-col gap-0.5 text-sm font-medium text-inherit transition-colors hover:text-inherit',
-						metric.align === 'right' ? 'items-end text-right' : 'items-start text-left'
+						metric.align === 'right' ? 'items-end text-right' : 'items-start text-left',
+						isActive && 'text-foreground'
 					)}
 					onclick={() => updateSort(metric.key)}
 				>
@@ -600,7 +618,15 @@
 						)}
 					>
 						{metric.label()}
-						<ArrowUpDownIcon class="size-3.5" />
+						{#if isActive}
+							{#if sortDirection === 'asc'}
+								<ArrowUpIcon class="size-3.5 shrink-0" />
+							{:else}
+								<ArrowDownIcon class="size-3.5 shrink-0" />
+							{/if}
+						{:else}
+							<ArrowUpDownIcon class="size-3.5 shrink-0 text-muted-foreground" />
+						{/if}
 					</span>
 					{#if metric.directionLabel}
 						<span class="text-[10px] leading-3 font-light text-muted-foreground normal-case">
@@ -620,9 +646,14 @@
 					{row.model.org.slice(0, 2)}
 				</div>
 				<div class="min-w-0 space-y-1">
-					<p class="truncate text-sm font-semibold text-foreground">{row.model.short}</p>
+					<OverflowTooltip
+						text={row.model.short}
+						class="block w-full min-w-0 truncate text-sm font-semibold text-foreground"
+						triggerClass="block w-full min-w-0"
+						contentClass="max-w-sm break-all"
+					/>
 					<p class="truncate text-xs text-muted-foreground">
-						{row.model.family} · {row.size} · {row.model.org}
+						{row.model.family} · {row.model.params} · {row.model.org}
 					</p>
 					{#if row.model.leak}
 						<Badge

src/routes/details/+page.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
-	import { ArrowUpDownIcon, DownloadIcon, ExternalLinkIcon } from '@lucide/svelte';
+	import {
+		ArrowDownIcon,
+		ArrowUpDownIcon,
+		ArrowUpIcon,
+		DownloadIcon,
+		ExternalLinkIcon
+	} from '@lucide/svelte';
 	import BucketDataFallback from '$lib/components/BucketDataFallback.svelte';
 	import BucketDataWarning from '$lib/components/BucketDataWarning.svelte';
+	import RadarLabelsOverlay from '$lib/components/charts/RadarLabelsOverlay.svelte';
 	import OverflowTooltip from '$lib/components/OverflowTooltip.svelte';
 	import PageHeadingSection from '$lib/components/PageHeadingSection.svelte';
 	import Select from '$lib/components/Select.svelte';
@@ -16,6 +23,8 @@
 		buildBenchmarkCards,
 		buildMatrixGroups,
 		buildMatrixRows,
+		detailMatrixRowsToCsv,
+		detailModelRowsToCsv,
 		filterModels,
 		matrixCellValue,
 		matrixDatasetLabel,
@@ -49,6 +58,9 @@
 	type ColumnExtrema = { best: number | null; worst: number | null };
 
 	const selectContentClass = 'max-h-72';
+	const modelSheetRadarViewBoxSize = 320;
+	const modelSheetRadarLabelRadius = 132;
+	const modelSheetRadarHorizontalLabelScale = 0.86;
 	let { data }: PageProps = $props();
 	const detailsState = $derived(data.detailsState);
 	const details = $derived(detailsState.data);
@@ -188,6 +200,19 @@
 	const filteredModels = $derived.by(() =>
 		filterModels(modelSearch, modelLanguage, modelType, modelSize, modelSort, models)
 	);
+	const matrixCsvHref = $derived(
+		`data:text/csv;charset=utf-8,${encodeURIComponent(
+			detailMatrixRowsToCsv(
+				matrixRows,
+				visibleMatrixGroups,
+				benchmarkMetric,
+				details.datasetMatrix.cellsByModelId
+			)
+		)}`
+	);
+	const modelsCsvHref = $derived(
+		`data:text/csv;charset=utf-8,${encodeURIComponent(detailModelRowsToCsv(filteredModels))}`
+	);
 	const selectedModelGroups = $derived.by(() =>
 		modelGroupRows(selectedModel, details, getLocale())
 	);
@@ -285,9 +310,17 @@
 		return matrixSortDirection === -1 ? 'descending' : 'ascending';
 	}
 
+	function matrixSortIsActive(datasetName: string | null) {
+		return matrixSortDataset === datasetName;
+	}
+
+	function matrixSortColumnClass(datasetName: string | null) {
+		return matrixSortIsActive(datasetName) && 'bg-muted/80 text-foreground';
+	}
+
 	function metricCellClass(value: number | null, metric: DetailMetric, datasetName: string) {
 		return cn(
-			'matrix-cell min-w-32 border-b border-l px-3 py-3 text-right font-mono text-sm tabular-nums',
+			'matrix-cell min-w-32 border-b border-l px-3 py-3 text-center align-middle font-mono text-base font-semibold tabular-nums',
 			!isNumber(value) && 'matrix-cell-empty !bg-muted/30 text-muted-foreground',
 			isNumber(value) &&
 				extremaTone(roundedDetailMetric(value, metric), matrixColumnExtrema[datasetName])
@@ -300,7 +333,11 @@
 		datasetName: string,
 		startsGroup: boolean
 	) {
-		return cn(metricCellClass(value, metric, datasetName), startsGroup && 'border-l-border');
+		return cn(
+			metricCellClass(value, metric, datasetName),
+			startsGroup && 'border-l-border',
+			matrixSortIsActive(datasetName) && 'bg-muted/20 text-foreground'
+		);
 	}
 
 	function scorePillClass(value: number | null) {
@@ -509,18 +546,15 @@
 						<Button variant="outline" size="sm" onclick={() => (selectedGroups = [])}>
 							{m.details_clear()}
 						</Button>
-						<Button size="sm" class="ml-auto bg-[#0dce97] text-emerald-950 hover:bg-[#0dce97]/90">
+						<Button
+							href={matrixCsvHref}
+							download={`hivetrace_details_matrix_${benchmarkMetric}.csv`}
+							size="sm"
+							class="ml-auto bg-[#0dce97] text-emerald-950 hover:bg-[#0dce97]/90"
+						>
 							<DownloadIcon data-icon="inline-start" />
 							{m.ranking_csv()}
 						</Button>
-						<Button size="sm" class="bg-[#0dce97] text-emerald-950 hover:bg-[#0dce97]/90">
-							<DownloadIcon data-icon="inline-start" />
-							Excel
-						</Button>
-						<Button size="sm" class="bg-[#0dce97] text-emerald-950 hover:bg-[#0dce97]/90">
-							<DownloadIcon data-icon="inline-start" />
-							PDF
-						</Button>
 					</div>
 				</section>
 
@@ -542,7 +576,10 @@
 								<thead>
 									<tr>
 										<th
-											class="sticky top-0 z-30 h-24 min-w-80 max-w-80 border-r border-b border-border bg-muted px-4 py-3 text-left align-middle md:left-0"
+											class={cn(
+												'sticky top-0 z-30 h-24 min-w-80 max-w-80 border-r border-b border-border bg-muted px-4 py-3 text-left align-middle md:left-0',
+												matrixSortColumnClass(null)
+											)}
 											rowspan="2"
 											scope="col"
 											aria-sort={matrixAriaSort(null)}
@@ -550,11 +587,22 @@
 											<Button
 												variant="ghost"
 												size="sm"
-												class="h-auto justify-start gap-1.5 p-0 text-xs font-medium"
+												class={cn(
+													'h-auto justify-start gap-1.5 p-0 text-xs font-medium hover:bg-transparent',
+													matrixSortIsActive(null) && 'text-foreground'
+												)}
 												onclick={() => handleMatrixSort(null)}
 											>
 												{m.details_matrix_model_sort()}
-												<ArrowUpDownIcon class="size-3.5" />
+												{#if matrixSortIsActive(null)}
+													{#if matrixSortDirection === 1}
+														<ArrowUpIcon class="size-3.5 shrink-0" />
+													{:else}
+														<ArrowDownIcon class="size-3.5 shrink-0" />
+													{/if}
+												{:else}
+													<ArrowUpDownIcon class="size-3.5 shrink-0 text-muted-foreground" />
+												{/if}
 											</Button>
 										</th>
 										{#each visibleMatrixGroups as group, groupIndex (group.key)}
@@ -576,6 +624,7 @@
 												<th
 													class={cn(
 														'sticky top-12 z-20 h-12 min-w-32 border-b border-l border-border bg-muted px-3 py-3 text-right text-xs font-semibold whitespace-nowrap text-muted-foreground',
+														matrixSortColumnClass(dataset.name),
 														groupIndex === 0 && datasetIndex === 0 && 'border-l-0',
 														(groupIndex > 0 || datasetIndex > 0) &&
 															datasetIndex === 0 &&
@@ -587,12 +636,27 @@
 													<Button
 														variant="ghost"
 														size="sm"
-														class="h-auto justify-end gap-1.5 p-0 text-[11px] font-medium text-muted-foreground hover:text-foreground"
-														title={dataset.name}
+														class={cn(
+															'h-auto justify-end gap-1.5 p-0 text-[11px] font-medium text-muted-foreground hover:bg-transparent hover:text-foreground',
+															matrixSortIsActive(dataset.name) && 'text-foreground'
+														)}
 														onclick={() => handleMatrixSort(dataset.name)}
 													>
-														{matrixDatasetLabel(dataset)}
-														<ArrowUpDownIcon class="size-3.5" />
+														<OverflowTooltip
+															text={matrixDatasetLabel(dataset)}
+															class="block max-w-28 truncate"
+															triggerClass="block min-w-0"
+															contentClass="max-w-sm break-all"
+														/>
+														{#if matrixSortIsActive(dataset.name)}
+															{#if matrixSortDirection === 1}
+																<ArrowUpIcon class="size-3.5 shrink-0" />
+															{:else}
+																<ArrowDownIcon class="size-3.5 shrink-0" />
+															{/if}
+														{:else}
+															<ArrowUpDownIcon class="size-3.5 shrink-0 text-muted-foreground" />
+														{/if}
 													</Button>
 												</th>
 											{/each}
@@ -605,7 +669,10 @@
 											class="hover:[&>td.matrix-cell-bad]:!bg-red-500/15 hover:[&>td.matrix-cell-empty]:!bg-muted/40 hover:[&>td.matrix-cell-good]:!bg-emerald-500/15 hover:[&>th]:bg-muted"
 										>
 											<th
-												class="z-20 min-w-80 max-w-80 border-r border-b bg-card px-4 py-3 text-left md:sticky md:left-0"
+												class={cn(
+													'z-20 min-w-80 max-w-80 border-r border-b bg-card px-4 py-3 text-left md:sticky md:left-0',
+													matrixSortIsActive(null) && 'bg-muted/30'
+												)}
 												scope="row"
 											>
 												<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
@@ -990,7 +1057,12 @@
 					>
 						{m.details_model_count({ shown: filteredModels.length, total: models.length })}
 					</span>
-					<Button size="sm" class="bg-[#0dce97] text-emerald-950 hover:bg-[#0dce97]/90">
+					<Button
+						href={modelsCsvHref}
+						download="hivetrace_details_models.csv"
+						size="sm"
+						class="bg-[#0dce97] text-emerald-950 hover:bg-[#0dce97]/90"
+					>
 						<DownloadIcon data-icon="inline-start" />
 						{m.ranking_csv()}
 					</Button>
@@ -1182,51 +1254,68 @@
 						</h3>
 						{#if selectedModelRadarPoints.length >= 3}
 							<div class="flex justify-center">
-								<svg
-									viewBox="0 0 320 320"
-									class="h-[28rem] w-full max-w-xl"
-									role="img"
-									aria-label={m.details_model_sheet_radar()}
-								>
-									{#each radarGridPolygons as polygon (polygon)}
+								<div class="relative h-[28rem] w-full max-w-xl">
+									<svg
+										viewBox="0 0 320 320"
+										class="h-full w-full"
+										role="img"
+										aria-label={m.details_model_sheet_radar()}
+									>
+										{#each radarGridPolygons as polygon (polygon)}
+											<polygon
+												points={polygon}
+												fill="none"
+												stroke="currentColor"
+												stroke-width="1"
+												stroke-dasharray="3 4"
+												class="text-border"
+											/>
+										{/each}
+										{#each selectedModelRadarPoints as point, index (point.name)}
+											<line
+												x1="160"
+												y1="160"
+												x2={radarPoint(index, selectedModelRadarPoints.length, 118)[0]}
+												y2={radarPoint(index, selectedModelRadarPoints.length, 118)[1]}
+												stroke="currentColor"
+												stroke-width="1"
+												class="text-border"
+											/>
+										{/each}
 										<polygon
-											points={polygon}
-											fill="none"
-											stroke="currentColor"
-											stroke-width="1"
-											stroke-dasharray="3 4"
-											class="text-border"
+											points={selectedModelRadarPolygon}
+											fill="rgba(13, 206, 151, 0.22)"
+											stroke="#0dce97"
+											stroke-width="2"
 										/>
-									{/each}
-									{#each selectedModelRadarPoints as point, index (point.name)}
-										<line
-											x1="160"
-											y1="160"
-											x2={radarPoint(index, selectedModelRadarPoints.length, 118)[0]}
-											y2={radarPoint(index, selectedModelRadarPoints.length, 118)[1]}
-											stroke="currentColor"
-											stroke-width="1"
-											class="text-border"
-										/>
-										<text
-											x={point.labelX}
-											y={point.labelY + 3}
-											text-anchor={point.anchor}
-											class="fill-muted-foreground font-mono text-[9px]"
-										>
-											{point.label}
-										</text>
-									{/each}
-									<polygon
-										points={selectedModelRadarPolygon}
-										fill="rgba(13, 206, 151, 0.22)"
-										stroke="#0dce97"
-										stroke-width="2"
+										{#each selectedModelRadarPoints as point (point.name)}
+											<circle cx={point.x} cy={point.y} r="3" fill="#0dce97" />
+										{/each}
+									</svg>
+									<RadarLabelsOverlay
+										labels={selectedModelRadarPoints.map((point, index) => {
+											const [labelX, labelY] = radarPoint(
+												index,
+												selectedModelRadarPoints.length,
+												modelSheetRadarLabelRadius
+											);
+											const adjustedLabelX =
+												160 + (labelX - 160) * modelSheetRadarHorizontalLabelScale;
+											return {
+												key: point.name,
+												text: point.name,
+												x: adjustedLabelX,
+												y: labelY + 3,
+												anchor:
+													adjustedLabelX < 155 ? 'end' : adjustedLabelX > 165 ? 'start' : 'middle'
+											};
+										})}
+										viewBoxWidth={modelSheetRadarViewBoxSize}
+										viewBoxHeight={modelSheetRadarViewBoxSize}
+										labelClass="text-[9px]"
+										position="label"
 									/>
-									{#each selectedModelRadarPoints as point (point.name)}
-										<circle cx={point.x} cy={point.y} r="3" fill="#0dce97" />
-									{/each}
-								</svg>
+								</div>
 							</div>
 							<div
 								class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-xs text-muted-foreground"
@@ -1334,9 +1423,12 @@
 					<div class="space-y-3">
 						{#each selectedModelGroups as group (group.name)}
 							<div class="grid items-center gap-3 sm:grid-cols-[minmax(9rem,13rem)_1fr_auto]">
-								<p class="truncate font-mono text-xs font-semibold" title={group.name}>
-									{group.name}
-								</p>
+								<OverflowTooltip
+									text={group.name}
+									class="block truncate font-mono text-xs font-semibold"
+									triggerClass="block min-w-0"
+									contentClass="max-w-sm break-all"
+								/>
 								<div class="h-2 rounded-full bg-muted">
 									<div
 										class="h-full rounded-full bg-[#0dce97]"

src/routes/tools/+page.svelte

@@ -1,17 +1,25 @@
 <script lang="ts">
-	import { tick } from 'svelte';
-	import { ArrowUpDownIcon, DownloadIcon, PinIcon, XIcon } from '@lucide/svelte';
+	import {
+		ArrowDownIcon,
+		ArrowUpDownIcon,
+		ArrowUpIcon,
+		DownloadIcon,
+		PinIcon,
+		XIcon
+	} from '@lucide/svelte';
 	import BucketDataFallback from '$lib/components/BucketDataFallback.svelte';
 	import BucketDataWarning from '$lib/components/BucketDataWarning.svelte';
+	import RadarLabelsOverlay from '$lib/components/charts/RadarLabelsOverlay.svelte';
 	import PageHeadingSection from '$lib/components/PageHeadingSection.svelte';
 	import Select from '$lib/components/Select.svelte';
 	import Table, { type TableColumn } from '$lib/components/Table.svelte';
+	import ChartCursorTooltip from '$lib/components/tooltips/ChartCursorTooltip.svelte';
+	import OverflowCursorTooltip from '$lib/components/tooltips/OverflowCursorTooltip.svelte';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import {
 		toolsActiveGroups,
-		toolsBarLabelLines as barLabelLines,
 		toolsBarY as barY,
 		toolsCsvDataUri,
 		toolsDataGroups,
@@ -31,12 +39,10 @@
 	import { isNumber } from '$lib/helpers/leaderboard';
 	import type { GuardModel } from '$lib/types/leaderboard';
 	import type {
-		ToolsChartTooltip as ChartTooltip,
 		ToolsLanguageFilter as LangFilter,
 		ToolsLatencySortKey as LatencySortKey,
 		ToolsRadarScale as RadarScale,
 		ToolsSortDirection as SortDirection,
-		ToolsTooltipRow as TooltipRow,
 		ToolsVizMetric as VizMetric
 	} from '$lib/types/tools';
 	import { m } from '$lib/paraglide/messages';
@@ -59,7 +65,6 @@
 	type ParetoRow = VisualizationModelRow & {
 		p95: number;
 		integral: number;
-		fpr: number | null;
 	};
 	type PerformanceRow = VisualizationModelRow & {
 		rank: number;
@@ -76,6 +81,9 @@
 		fnrReal: number | null;
 		fnrRobust: number | null;
 		deltaFnr: number | null;
+		fprReal: number | null;
+		fprRobust: number | null;
+		deltaFpr: number | null;
 		category: string;
 	};
 	type HeatmapRow = ToolsDataset['visualizations']['heatmap']['rows'][number];
@@ -84,6 +92,14 @@
 		max: number | null;
 	};
 	const selectContentClass = 'max-h-72';
+	const radarViewBoxWidth = 520;
+	const radarViewBoxHeight = 420;
+	const barModelBandWidth = 145;
+	const barSeriesWidth = 26;
+	const barSeriesGap = 3;
+	const barGroupWidth = barSeriesWidth * 3 + barSeriesGap * 2;
+	const scatterAxisMax = 1;
+	const scatterTicks = [0, 0.25, 0.5, 0.75, 1];
 	let { data }: PageProps = $props();
 	const toolsState = $derived(data.toolsState);
 	const tools = $derived(toolsState.data);
@@ -94,7 +110,7 @@
 	const initialTools = (() => data.toolsState.data)();
 	const initialGroups = toolsDataGroups(initialTools.models, initialTools.allGroups);
 
-	let selectedModelKeys = $state(initialTools.models.map((model) => modelKey(model)));
+	let selectedModelKeys = $state(initialTools.models.slice(0, 5).map((model) => modelKey(model)));
 	let selectedGroups = $state<string[]>(initialGroups);
 	let language = $state<LangFilter>('all');
 	let metric = $state<VizMetric>('fnr');
@@ -102,12 +118,11 @@
 	let pinnedModelKeys = $state<string[]>([]);
 	let latencySortKey = $state<LatencySortKey>('p95');
 	let latencySortDirection = $state<SortDirection>('asc');
-	let chartTooltip = $state<ChartTooltip | null>(null);
-	let chartTooltipElement: HTMLDivElement | null = $state(null);
 	let hoveredRadarModelKey = $state<string | null>(null);
 	let hoveredScatterModelKey = $state<string | null>(null);
 	let hoveredBarKey = $state<string | null>(null);
 	let hoveredParetoModelKey = $state<string | null>(null);
+	let barContainerWidth = $state(0);
 
 	const languageOptions = [
 		{ value: 'all', label: m.tools_language_all() },
@@ -123,11 +138,36 @@
 		{ value: 'f1', label: 'F1' }
 	];
 	const latencyColumns: LatencyColumn[] = [
-		{ key: 'model', label: m.ranking_column_model },
-		{ key: 'p50', label: () => `p50 (${m.ranking_unit_ms()})`, cellClass: 'text-right' },
-		{ key: 'p95', label: () => `p95 (${m.ranking_unit_ms()})`, cellClass: 'text-right' },
-		{ key: 'p99', label: () => `p99 (${m.ranking_unit_ms()})`, cellClass: 'text-right' },
-		{ key: 'errorRate', label: m.details_error_rate, cellClass: 'text-right' }
+		{
+			key: 'model',
+			label: m.ranking_column_model,
+			headClass: () => latencySortColumnClass('model'),
+			cellClass: () => latencySortCellClass('model')
+		},
+		{
+			key: 'p50',
+			label: () => `p50 (${m.ranking_unit_ms()})`,
+			headClass: () => cn('text-right', latencySortColumnClass('p50')),
+			cellClass: () => cn('text-right', latencySortCellClass('p50'))
+		},
+		{
+			key: 'p95',
+			label: () => `p95 (${m.ranking_unit_ms()})`,
+			headClass: () => cn('text-right', latencySortColumnClass('p95')),
+			cellClass: () => cn('text-right', latencySortCellClass('p95'))
+		},
+		{
+			key: 'p99',
+			label: () => `p99 (${m.ranking_unit_ms()})`,
+			headClass: () => cn('text-right', latencySortColumnClass('p99')),
+			cellClass: () => cn('text-right', latencySortCellClass('p99'))
+		},
+		{
+			key: 'errorRate',
+			label: m.details_error_rate,
+			headClass: () => cn('text-right', latencySortColumnClass('errorRate')),
+			cellClass: () => cn('text-right', latencySortCellClass('errorRate'))
+		}
 	];
 
 	const currentLanguageLabel = $derived(
@@ -158,6 +198,7 @@
 	const heatColumns = $derived(
 		`minmax(8rem, 10rem) repeat(${heatmapModels.length}, minmax(4rem, 1fr))`
 	);
+	const heatmapHasData = $derived(heatmapModels.length > 0 && heatmapRows.length > 0);
 	const scatterRows = $derived(
 		scatterRowsFor(tools.visualizations.scatter.points, modelByKey, selectedModelKeySet)
 	);
@@ -181,9 +222,11 @@
 	const robustRows = $derived(
 		robustnessRowsFor(tools.visualizations.robustness.rows, modelByKey, selectedModelKeySet)
 	);
-	const scatterXMax = $derived(Math.max(0.2, ...scatterRows.map((row) => row.fpr * 1.1)));
-	const scatterYMax = $derived(Math.max(0.45, ...scatterRows.map((row) => row.fnr * 1.08)));
-	const barSvgWidth = $derived(Math.max(720, activeGroups.length * 76));
+	const scatterXMax = scatterAxisMax;
+	const scatterYMax = scatterAxisMax;
+	const barSvgWidth = $derived(
+		Math.max(720, barContainerWidth, selectedModels.length * barModelBandWidth + 56)
+	);
 	const paretoXMax = $derived(Math.max(1, ...paretoRows.map((row) => row.p95)) * 1.08);
 	const paretoY0 = $derived(paretoYStart(paretoRows));
 	const paretoXTicks = $derived(niceTicks(0, paretoXMax, 6));
@@ -214,6 +257,10 @@
 		return `${Math.round(clamp01(value ?? 0) * 100)}%`;
 	}
 
+	function modelLabel(model: GuardModel) {
+		return `${model.short} ${model.params}`;
+	}
+
 	function scatterRowsFor(
 		points: ToolsDataset['visualizations']['scatter']['points'],
 		modelsByKey: ReadonlyMap<string, GuardModel>,
@@ -250,9 +297,7 @@
 			) {
 				return [];
 			}
-			return [
-				{ modelKey: key, model, p95: row.latencyMs.p95, integral: row.integral, fpr: row.fpr }
-			];
+			return [{ modelKey: key, model, p95: row.latencyMs.p95, integral: row.integral }];
 		});
 	}
 
@@ -312,6 +357,9 @@
 						fnrReal: row.fnrReal,
 						fnrRobust: row.fnrRobust,
 						deltaFnr: row.deltaFnr,
+						fprReal: row.fprReal,
+						fprRobust: row.fprRobust,
+						deltaFpr: row.deltaFpr,
 						category: localized(row.categoryLabel, '')
 					}
 				];
@@ -340,17 +388,16 @@
 	}
 
 	function groupedBarsMean(
-		group: string,
+		modelKeyValue: string,
 		key: VizMetric,
 		modelsByVisualizationKey: ReadonlyMap<
 			string,
 			ToolsDataset['visualizations']['groupedBars']['models'][number]
 		>,
-		selectedKeys: ReadonlySet<string>
+		groups: readonly string[]
 	) {
-		const values = [...selectedKeys]
-			.map((selectedKey) => modelsByVisualizationKey.get(selectedKey)?.groups[group]?.[key])
-			.filter(isNumber);
+		const model = modelsByVisualizationKey.get(modelKeyValue);
+		const values = groups.map((group) => model?.groups[group]?.[key]).filter(isNumber);
 
 		if (!values.length) return null;
 		return values.reduce((sum, value) => sum + value, 0) / values.length;
@@ -375,7 +422,8 @@
 	}
 
 	function paretoLabelText(row: ParetoRow) {
-		return row.model.short.length > 18 ? `${row.model.short.slice(0, 17)}…` : row.model.short;
+		const label = modelLabel(row.model);
+		return label.length > 18 ? `${label.slice(0, 17)}…` : label;
 	}
 
 	function paretoYStart(rows: readonly ParetoRow[]) {
@@ -430,57 +478,6 @@
 		action();
 	}
 
-	function tooltipPosition(event: Pick<PointerEvent, 'clientX' | 'clientY'>) {
-		const margin = 12;
-		const offset = 16;
-		const tooltipRect = chartTooltipElement?.getBoundingClientRect();
-		const tooltipWidth = tooltipRect?.width ?? 384;
-		const tooltipHeight = tooltipRect?.height ?? 180;
-		let x = event.clientX + offset;
-		let y = event.clientY + offset;
-
-		if (typeof window === 'undefined') return { x, y };
-
-		if (x + tooltipWidth + margin > window.innerWidth) {
-			x = event.clientX - tooltipWidth - offset;
-		}
-		if (y + tooltipHeight + margin > window.innerHeight) {
-			y = event.clientY - tooltipHeight - offset;
-		}
-
-		return {
-			x: Math.min(Math.max(margin, x), Math.max(margin, window.innerWidth - tooltipWidth - margin)),
-			y: Math.min(
-				Math.max(margin, y),
-				Math.max(margin, window.innerHeight - tooltipHeight - margin)
-			)
-		};
-	}
-
-	function updateTooltip(event: PointerEvent, title: string, rows: TooltipRow[]) {
-		const position = tooltipPosition(event);
-		chartTooltip = {
-			x: position.x,
-			y: position.y,
-			title,
-			rows
-		};
-
-		tick().then(() => {
-			if (!chartTooltip) return;
-			chartTooltip = { ...chartTooltip, ...tooltipPosition(event) };
-		});
-	}
-
-	function moveTooltip(event: PointerEvent) {
-		if (!chartTooltip) return;
-		chartTooltip = { ...chartTooltip, ...tooltipPosition(event) };
-	}
-
-	function hideTooltip() {
-		chartTooltip = null;
-	}
-
 	function toggleLatencySort(key: LatencySortKey) {
 		if (latencySortKey === key) {
 			latencySortDirection = latencySortDirection === 'asc' ? 'desc' : 'asc';
@@ -495,12 +492,20 @@
 		return typeof column.label === 'function' ? column.label() : column.label;
 	}
 
+	function latencySortColumnClass(key: LatencySortKey) {
+		return latencySortKey === key ? 'bg-muted/80 text-foreground' : undefined;
+	}
+
+	function latencySortCellClass(key: LatencySortKey) {
+		return latencySortKey === key ? 'bg-muted/20 text-foreground' : undefined;
+	}
+
 	function heatTextColor(value: number | null | undefined) {
 		if (!isNumber(value)) return 'text-muted-foreground';
 		return 'text-black';
 	}
 
-	function deltaBadgeClass(value: number | null, kind: 'score' | 'fnr') {
+	function deltaBadgeClass(value: number | null, kind: 'score' | 'fnr' | 'fpr') {
 		if (!isNumber(value) || value === 0) {
 			return 'bg-muted/40 text-muted-foreground';
 		}
@@ -526,995 +531,1045 @@
 		<BucketDataFallback />
 	</div>
 {:else}
-	<div class="mx-auto flex w-full min-w-0 max-w-7xl flex-col px-4 py-8 sm:px-6 lg:px-8">
-		{#if toolsState.status === 'stale'}
-			<BucketDataWarning />
-		{/if}
-		<PageHeadingSection title={m.navigation_visualizations()} description={m.tools_description()} />
+	<ChartCursorTooltip class="min-w-48">
+		{#snippet children(tooltip)}
+			<div class="mx-auto flex w-full min-w-0 max-w-7xl flex-col px-4 py-8 sm:px-6 lg:px-8">
+				{#if toolsState.status === 'stale'}
+					<BucketDataWarning />
+				{/if}
+				<PageHeadingSection
+					title={m.navigation_visualizations()}
+					description={m.tools_description()}
+				/>
+
+				<section
+					class="mt-6 min-w-0 rounded-xl border bg-card p-4 shadow-sm"
+					aria-label={m.tools_controls_aria()}
+				>
+					<div class="grid min-w-0 gap-4 lg:grid-cols-[1.1fr_1.1fr_.7fr]">
+						<div class="min-w-0">
+							<div class="mb-2 flex items-center justify-between gap-3">
+								<h2 class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+									{m.tools_models_title()}
+								</h2>
+								<div class="flex gap-2 text-xs">
+									<Button
+										variant="outline"
+										size="sm"
+										class="h-8 rounded-full px-4"
+										onclick={() => (selectedModelKeys = models.map((model) => modelKey(model)))}
+										>{m.details_select_all()}</Button
+									>
+									<Button
+										variant="outline"
+										size="sm"
+										class="h-8 rounded-full px-4"
+										onclick={() => (selectedModelKeys = [])}>{m.details_reset()}</Button
+									>
+								</div>
+							</div>
+							<div class="max-h-36 space-y-1 overflow-auto rounded-lg border bg-background/50 p-2">
+								{#each models as model (modelKey(model))}
+									{@const key = modelKey(model)}
+									<div
+										class="flex min-w-0 items-center gap-3 rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
+										role="checkbox"
+										tabindex="0"
+										aria-checked={selectedModelKeys.includes(key)}
+										onclick={() => (selectedModelKeys = toggleListValue(selectedModelKeys, key))}
+										onkeydown={(event) =>
+											handleCheckboxKeydown(
+												event,
+												() => (selectedModelKeys = toggleListValue(selectedModelKeys, key))
+											)}
+									>
+										<Checkbox
+											checked={selectedModelKeys.includes(key)}
+											aria-label={modelLabel(model)}
+											tabindex={-1}
+										/>
+										<span class="size-3 rounded-sm" style={`background:${colorOf(model)}`}></span>
+										<span class="min-w-0 flex-1 truncate">
+											{model.short} <code class="text-muted-foreground">{model.params}</code>
+										</span>
+										<Button
+											variant="outline"
+											size="sm"
+											class={cn(
+												'h-7 rounded-full px-3 text-xs',
+												pinnedModelKeys.includes(key) &&
+													'border-[#0dce97]/60 bg-[#0dce97]/10 text-[#0dce97] hover:bg-[#0dce97]/15 hover:text-[#0dce97]'
+											)}
+											aria-pressed={pinnedModelKeys.includes(key)}
+											onclick={(event) => {
+												event.preventDefault();
+												event.stopPropagation();
+												togglePin(key);
+											}}
+										>
+											<PinIcon class="size-3" />
+											{pinnedModelKeys.includes(key) ? m.tools_pinned() : m.tools_pin()}
+										</Button>
+									</div>
+								{/each}
+							</div>
+						</div>
 
-		<section
-			class="mt-6 min-w-0 rounded-xl border bg-card p-4 shadow-sm"
-			aria-label={m.tools_controls_aria()}
-		>
-			<div class="grid min-w-0 gap-4 lg:grid-cols-[1.1fr_1.1fr_.7fr]">
-				<div class="min-w-0">
-					<div class="mb-2 flex items-center justify-between gap-3">
-						<h2 class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
-							{m.tools_models_title()}
-						</h2>
-						<div class="flex gap-2 text-xs">
-							<Button
-								variant="outline"
-								size="sm"
-								class="h-8 rounded-full px-4"
-								onclick={() => (selectedModelKeys = models.map((model) => modelKey(model)))}
-								>{m.details_select_all()}</Button
-							>
-							<Button
-								variant="outline"
-								size="sm"
-								class="h-8 rounded-full px-4"
-								onclick={() => (selectedModelKeys = [])}>{m.details_reset()}</Button
-							>
+						<div class="min-w-0">
+							<div class="mb-2 flex items-center justify-between gap-3">
+								<h2 class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+									{m.tools_groups_title()}
+								</h2>
+								<div class="flex gap-2 text-xs">
+									<Button
+										variant="outline"
+										size="sm"
+										class="h-8 rounded-full px-4"
+										onclick={() => (selectedGroups = [...dataGroups])}
+										>{m.details_select_all()}</Button
+									>
+									<Button
+										variant="outline"
+										size="sm"
+										class="h-8 rounded-full px-4"
+										onclick={() => (selectedGroups = [])}>{m.details_reset()}</Button
+									>
+								</div>
+							</div>
+							<div class="max-h-36 space-y-1 overflow-auto rounded-lg border bg-background/50 p-2">
+								{#each dataGroups as group (group)}
+									<div
+										class="flex min-w-0 items-center gap-3 rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
+										role="checkbox"
+										tabindex="0"
+										aria-checked={selectedGroups.includes(group)}
+										onclick={() => (selectedGroups = toggleListValue(selectedGroups, group))}
+										onkeydown={(event) =>
+											handleCheckboxKeydown(
+												event,
+												() => (selectedGroups = toggleListValue(selectedGroups, group))
+											)}
+									>
+										<Checkbox
+											checked={selectedGroups.includes(group)}
+											aria-label={groupLabel(group)}
+											tabindex={-1}
+										/>
+										<span class="min-w-0 truncate">
+											{groupLabel(group)}
+											<span class="text-muted-foreground"
+												>{benchmarkMeta[group]?.languages.join(' · ')}</span
+											>
+										</span>
+									</div>
+								{/each}
+							</div>
+						</div>
+
+						<div class="grid content-start gap-3">
+							<Select
+								id="tools-language"
+								type="single"
+								bind:value={language}
+								options={languageOptions}
+								label={m.tools_language_label()}
+								triggerLabel={currentLanguageLabel}
+								contentClass={selectContentClass}
+							/>
+							<Select
+								id="tools-metric"
+								type="single"
+								bind:value={metric}
+								options={metricOptions}
+								label={m.tools_metric_label()}
+								triggerLabel={currentMetricLabel}
+								contentClass={selectContentClass}
+							/>
 						</div>
 					</div>
-					<div class="max-h-36 space-y-1 overflow-auto rounded-lg border bg-background/50 p-2">
-						{#each models as model (modelKey(model))}
-							{@const key = modelKey(model)}
+
+					<div class="mt-4 flex flex-wrap items-end gap-3">
+						<div class="min-w-0 space-y-2">
+							<span
+								class="block text-xs font-semibold tracking-wider text-muted-foreground uppercase"
+								>{m.tools_radar_scale()}</span
+							>
 							<div
-								class="flex min-w-0 items-center gap-3 rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
-								role="checkbox"
-								tabindex="0"
-								aria-checked={selectedModelKeys.includes(key)}
-								onclick={() => (selectedModelKeys = toggleListValue(selectedModelKeys, key))}
-								onkeydown={(event) =>
-									handleCheckboxKeydown(
-										event,
-										() => (selectedModelKeys = toggleListValue(selectedModelKeys, key))
-									)}
+								class="inline-flex max-w-full flex-wrap gap-1 rounded-4xl border bg-input/50 p-1"
+								role="group"
+								aria-label={m.tools_radar_scale()}
 							>
-								<Checkbox
-									checked={selectedModelKeys.includes(key)}
-									aria-label={model.short}
-									tabindex={-1}
-								/>
-								<span class="size-3 rounded-sm" style={`background:${colorOf(model)}`}></span>
-								<span class="min-w-0 flex-1 truncate">
-									{model.short} <code class="text-muted-foreground">{model.params}</code>
-								</span>
 								<Button
-									variant="outline"
+									variant={radarScale === 'score' ? 'default' : 'ghost'}
 									size="sm"
-									class={cn(
-										'h-7 rounded-full px-3 text-xs',
-										pinnedModelKeys.includes(key) &&
-											'border-[#0dce97]/60 bg-[#0dce97]/10 text-[#0dce97] hover:bg-[#0dce97]/15 hover:text-[#0dce97]'
-									)}
-									aria-pressed={pinnedModelKeys.includes(key)}
-									onclick={(event) => {
-										event.preventDefault();
-										event.stopPropagation();
-										togglePin(key);
-									}}
+									aria-pressed={radarScale === 'score'}
+									onclick={() => (radarScale = 'score')}
 								>
-									<PinIcon class="size-3" />
-									{pinnedModelKeys.includes(key) ? m.tools_pinned() : m.tools_pin()}
+									{m.tools_radar_group_score()}
+								</Button>
+								<Button
+									variant={radarScale === 'f1' ? 'default' : 'ghost'}
+									size="sm"
+									aria-pressed={radarScale === 'f1'}
+									onclick={() => (radarScale = 'f1')}
+								>
+									F1
 								</Button>
 							</div>
-						{/each}
-					</div>
-				</div>
-
-				<div class="min-w-0">
-					<div class="mb-2 flex items-center justify-between gap-3">
-						<h2 class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
-							{m.tools_groups_title()}
-						</h2>
-						<div class="flex gap-2 text-xs">
-							<Button
-								variant="outline"
-								size="sm"
-								class="h-8 rounded-full px-4"
-								onclick={() => (selectedGroups = [...dataGroups])}>{m.details_select_all()}</Button
+						</div>
+						<div class="ml-auto flex flex-wrap items-center justify-end gap-3">
+							<span
+								class="rounded-full border border-[#0dce97]/40 bg-[#0dce97]/10 px-4 py-2 font-mono text-xs font-semibold text-[#0dce97]"
 							>
+								{m.tools_selected_summary({
+									models: selectedModels.length,
+									groups: activeGroups.length
+								})}
+							</span>
 							<Button
-								variant="outline"
+								href={csvHref}
+								download="hivetrace_tools_selection.csv"
 								size="sm"
-								class="h-8 rounded-full px-4"
-								onclick={() => (selectedGroups = [])}>{m.details_reset()}</Button
+								class="bg-[#0dce97] text-emerald-950 hover:bg-[#0dce97]/90"
 							>
+								<DownloadIcon data-icon="inline-start" />
+								{m.ranking_csv()}
+							</Button>
 						</div>
 					</div>
-					<div class="max-h-36 space-y-1 overflow-auto rounded-lg border bg-background/50 p-2">
-						{#each dataGroups as group (group)}
-							<div
-								class="flex min-w-0 items-center gap-3 rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
-								role="checkbox"
-								tabindex="0"
-								aria-checked={selectedGroups.includes(group)}
-								onclick={() => (selectedGroups = toggleListValue(selectedGroups, group))}
-								onkeydown={(event) =>
-									handleCheckboxKeydown(
-										event,
-										() => (selectedGroups = toggleListValue(selectedGroups, group))
-									)}
-							>
-								<Checkbox
-									checked={selectedGroups.includes(group)}
-									aria-label={groupLabel(group)}
-									tabindex={-1}
-								/>
-								<span class="min-w-0 truncate">
-									{groupLabel(group)}
-									<span class="text-muted-foreground"
-										>{benchmarkMeta[group]?.languages.join(' · ')}</span
-									>
-								</span>
-							</div>
-						{/each}
-					</div>
-				</div>
+				</section>
 
-				<div class="grid content-start gap-3">
-					<Select
-						id="tools-language"
-						type="single"
-						bind:value={language}
-						options={languageOptions}
-						label={m.tools_language_label()}
-						triggerLabel={currentLanguageLabel}
-						contentClass={selectContentClass}
-					/>
-					<Select
-						id="tools-metric"
-						type="single"
-						bind:value={metric}
-						options={metricOptions}
-						label={m.tools_metric_label()}
-						triggerLabel={currentMetricLabel}
-						contentClass={selectContentClass}
-					/>
-				</div>
-			</div>
-
-			<div class="mt-4 flex flex-wrap items-end gap-3">
-				<div class="min-w-0 space-y-2">
-					<span class="block text-xs font-semibold tracking-wider text-muted-foreground uppercase"
-						>{m.tools_radar_scale()}</span
-					>
-					<div
-						class="inline-flex max-w-full flex-wrap gap-1 rounded-4xl border bg-input/50 p-1"
-						role="group"
-						aria-label={m.tools_radar_scale()}
-					>
-						<Button
-							variant={radarScale === 'score' ? 'default' : 'ghost'}
-							size="sm"
-							aria-pressed={radarScale === 'score'}
-							onclick={() => (radarScale = 'score')}
-						>
-							{m.tools_radar_group_score()}
-						</Button>
-						<Button
-							variant={radarScale === 'f1' ? 'default' : 'ghost'}
-							size="sm"
-							aria-pressed={radarScale === 'f1'}
-							onclick={() => (radarScale = 'f1')}
-						>
-							F1
-						</Button>
-					</div>
-				</div>
-				<div class="ml-auto flex flex-wrap items-center justify-end gap-3">
-					<span
-						class="rounded-full border border-[#0dce97]/40 bg-[#0dce97]/10 px-4 py-2 font-mono text-xs font-semibold text-[#0dce97]"
-					>
-						{m.tools_selected_summary({
-							models: selectedModels.length,
-							groups: activeGroups.length
-						})}
-					</span>
-					<Button
-						href={csvHref}
-						download="hivetrace_tools_selection.csv"
-						size="sm"
-						class="bg-[#0dce97] text-emerald-950 hover:bg-[#0dce97]/90"
+				<div
+					class="mt-4 flex min-h-[46px] flex-wrap items-center gap-x-2 gap-y-3 rounded-xl border bg-card px-4 py-3 text-xs leading-none"
+				>
+					<span class="font-semibold tracking-wider text-muted-foreground uppercase leading-none"
+						>{m.tools_pinned_for_comparison()}</span
 					>
-						<DownloadIcon data-icon="inline-start" />
-						{m.ranking_csv()}
-					</Button>
+					{#if pinnedModels.length}
+						{#each pinnedModels as model (modelKey(model))}
+							<Badge variant="secondary" class="gap-1 rounded-full">
+								<span class="size-2 rounded-full" style={`background:${colorOf(model)}`}></span>
+								{modelLabel(model)}
+								<button
+									type="button"
+									aria-label={m.tools_unpin_model({ model: modelLabel(model) })}
+									onclick={() => togglePin(modelKey(model))}
+								>
+									<XIcon class="size-3" />
+								</button>
+							</Badge>
+						{/each}
+					{:else}
+						<span class="leading-none text-muted-foreground">
+							{m.tools_no_pinned()}
+						</span>
+					{/if}
 				</div>
-			</div>
-		</section>
 
-		<div
-			class="mt-4 flex min-h-[46px] flex-wrap items-center gap-x-2 gap-y-3 rounded-xl border bg-card px-4 py-3 text-xs leading-none"
-		>
-			<span class="font-semibold tracking-wider text-muted-foreground uppercase leading-none"
-				>{m.tools_pinned_for_comparison()}</span
-			>
-			{#if pinnedModels.length}
-				{#each pinnedModels as model (modelKey(model))}
-					<Badge variant="secondary" class="gap-1 rounded-full">
-						<span class="size-2 rounded-full" style={`background:${colorOf(model)}`}></span>
-						{model.short}
-						<button
-							type="button"
-							aria-label={m.tools_unpin_model({ model: model.short })}
-							onclick={() => togglePin(modelKey(model))}
-						>
-							<XIcon class="size-3" />
-						</button>
-					</Badge>
-				{/each}
-			{:else}
-				<span class="leading-none text-muted-foreground">
-					{m.tools_no_pinned()}
-				</span>
-			{/if}
-		</div>
+				<div class="mt-4 grid min-w-0 gap-4 lg:grid-cols-2">
+					<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
+						<div class="mb-3 flex flex-wrap items-baseline gap-2">
+							<h2 class="font-mono text-sm font-semibold">{m.tools_radar_title()}</h2>
+							<span class="text-xs text-muted-foreground">{m.tools_radar_hint()}</span>
+						</div>
+						{#if selectedModels.length && activeGroups.length >= 3}
+							<div class="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,1fr)_24rem] lg:items-start">
+								<div class="relative min-w-0 overflow-hidden">
+									<svg
+										viewBox="0 0 520 420"
+										class="h-auto w-full"
+										role="img"
+										aria-label={m.tools_radar_aria()}
+									>
+										{#each [0.25, 0.5, 0.75, 1] as scale (scale)}
+											<polygon
+												points={activeGroups
+													.map((_, index) => {
+														const point = radarPoint(index, activeGroups.length, 150 * scale);
+														return `${point.x.toFixed(1)},${point.y.toFixed(1)}`;
+													})
+													.join(' ')}
+												fill="none"
+												stroke="currentColor"
+												stroke-width="1"
+												stroke-dasharray="3 4"
+												pointer-events="none"
+												class="text-border"
+											/>
+											<text
+												x="264"
+												y={214 - 150 * scale}
+												class="fill-muted-foreground font-mono text-[10px]"
+											>
+												{scale.toFixed(2)}
+											</text>
+										{/each}
+										{#each activeGroups as group, index (group)}
+											{@const axis = radarPoint(index, activeGroups.length, 150)}
+											<line
+												x1="260"
+												y1="214"
+												x2={axis.x}
+												y2={axis.y}
+												stroke="currentColor"
+												stroke-width="1"
+												class="text-border"
+											/>
+										{/each}
+										{#each selectedModels as model (modelKey(model))}
+											{@const key = modelKey(model)}
+											{@const isPinned = pinnedModelKeys.includes(key)}
+											{@const isHovered = hoveredRadarModelKey === key}
+											{@const isDimmed = hoveredRadarModelKey !== null && !isHovered}
+											<polygon
+												points={radarVisualizationPolygon(key, activeGroups, radarScale)}
+												fill={colorOf(model)}
+												fill-opacity={isHovered
+													? 0.24
+													: isDimmed
+														? 0.025
+														: isPinned
+															? 0.22
+															: pinnedModelKeys.length
+																? 0.06
+																: 0.12}
+												stroke={colorOf(model)}
+												stroke-width={isHovered ? 3 : isPinned ? 2.4 : 1.6}
+												stroke-opacity={isDimmed ? 0.18 : 1}
+												pointer-events="none"
+											/>
+											{#each activeGroups as group, index (group)}
+												{@const value = radarVisualizationValue(key, group, radarScale) ?? 0}
+												{@const point = radarPoint(
+													index,
+													activeGroups.length,
+													150 * clamp01(value)
+												)}
+												<circle
+													cx={point.x}
+													cy={point.y}
+													r={isHovered ? 5 : isPinned ? 4 : 3}
+													fill={colorOf(model)}
+													fill-opacity={isDimmed ? 0.28 : 1}
+													stroke-opacity={isDimmed ? 0.25 : 1}
+													class="transition-[r,fill-opacity,stroke-opacity]"
+													role="img"
+													aria-label={`${modelLabel(model)} ${groupLabel(group)} ${radarScale.toUpperCase()} ${fmt(value, 3)}`}
+													onpointerenter={(event) => {
+														hoveredRadarModelKey = key;
+														tooltip.show(event, modelLabel(model), [
+															{ label: groupLabel(group), value: radarScale.toUpperCase() },
+															{ label: 'value', value: fmt(value, 3) }
+														]);
+													}}
+													onpointermove={tooltip.move}
+													onpointerleave={() => {
+														hoveredRadarModelKey = null;
+														tooltip.hide();
+													}}
+												/>
+											{/each}
+										{/each}
+									</svg>
+									<RadarLabelsOverlay
+										labels={activeGroups.map((group, index) => {
+											const label = radarPoint(index, activeGroups.length, 178);
+											return {
+												key: group,
+												text: groupLabel(group),
+												x: label.x,
+												y: label.y,
+												anchor:
+													Math.abs(label.x - 260) < 8 ? 'middle' : label.x > 260 ? 'start' : 'end'
+											};
+										})}
+										viewBoxWidth={radarViewBoxWidth}
+										viewBoxHeight={radarViewBoxHeight}
+									/>
+								</div>
+								<div
+									class="flex min-w-0 flex-wrap content-start gap-x-4 gap-y-2 text-xs text-muted-foreground lg:flex-col lg:gap-x-0"
+								>
+									{#each selectedModels as model (modelKey(model))}
+										{@const key = modelKey(model)}
+										{@const isPinned = pinnedModelKeys.includes(key)}
+										<span
+											class={cn(
+												'inline-flex min-w-0 max-w-full items-center gap-2 rounded-full border border-transparent px-2 py-1 transition-colors lg:w-full',
+												isPinned &&
+													'border-[#0dce97]/35 bg-[#0dce97]/10 text-foreground shadow-sm shadow-[#0dce97]/5'
+											)}
+										>
+											<span class="size-2 rounded-full" style={`background:${colorOf(model)}`}
+											></span>
+											{#if isPinned}
+												<PinIcon class="size-3 text-[#0dce97]" />
+											{/if}
+											<span class="min-w-0 truncate">{modelLabel(model)}</span>
+											<button
+												class="ml-auto font-semibold text-[#0dce97]"
+												type="button"
+												onclick={() => togglePin(key)}
+											>
+												{isPinned ? m.tools_unpin() : m.tools_pin()}
+											</button>
+										</span>
+									{/each}
+								</div>
+							</div>
+						{:else}
+							<p
+								class="rounded-lg border bg-muted/30 p-6 text-center text-sm text-muted-foreground"
+							>
+								{m.tools_radar_empty()}
+							</p>
+						{/if}
+					</section>
 
-		<div class="mt-4 grid min-w-0 gap-4 lg:grid-cols-2">
-			<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm">
-				<div class="mb-3 flex flex-wrap items-baseline gap-2">
-					<h2 class="font-mono text-sm font-semibold">{m.tools_radar_title()}</h2>
-					<span class="text-xs text-muted-foreground">{m.tools_radar_hint()}</span>
-				</div>
-				{#if selectedModels.length && activeGroups.length >= 3}
-					<div class="overflow-hidden">
+					<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
+						<div class="mb-3 flex flex-wrap items-baseline gap-2">
+							<h2 class="font-mono text-sm font-semibold">FPR × FNR</h2>
+							<span class="text-xs text-muted-foreground">{m.tools_scatter_hint()}</span>
+						</div>
 						<svg
 							viewBox="0 0 520 420"
-							class="h-auto w-full"
+							class="mx-auto h-auto w-full max-w-3xl"
 							role="img"
-							aria-label={m.tools_radar_aria()}
+							aria-label={m.tools_scatter_aria()}
 						>
-							{#each [0.25, 0.5, 0.75, 1] as scale (scale)}
-								<polygon
-									points={activeGroups
-										.map((_, index) => {
-											const point = radarPoint(index, activeGroups.length, 150 * scale);
-											return `${point.x.toFixed(1)},${point.y.toFixed(1)}`;
-										})
-										.join(' ')}
-									fill="none"
+							{#each scatterTicks.slice(1) as tick (tick)}
+								<line
+									x1={scatterX(tick, scatterXMax)}
+									y1="18"
+									x2={scatterX(tick, scatterXMax)}
+									y2="368"
 									stroke="currentColor"
 									stroke-width="1"
 									stroke-dasharray="3 4"
 									class="text-border"
 								/>
-								<text
-									x="264"
-									y={214 - 150 * scale}
-									class="fill-muted-foreground font-mono text-[10px]"
-								>
-									{scale.toFixed(2)}
-								</text>
-							{/each}
-							{#each activeGroups as group, index (group)}
-								{@const axis = radarPoint(index, activeGroups.length, 150)}
-								{@const label = radarPoint(index, activeGroups.length, 178)}
 								<line
-									x1="260"
-									y1="214"
-									x2={axis.x}
-									y2={axis.y}
+									x1="52"
+									y1={scatterY(tick, scatterYMax)}
+									x2="502"
+									y2={scatterY(tick, scatterYMax)}
 									stroke="currentColor"
 									stroke-width="1"
+									stroke-dasharray="3 4"
 									class="text-border"
 								/>
+							{/each}
+							{#each scatterTicks as tick (tick)}
+								<text
+									x={scatterX(tick, scatterXMax)}
+									y="386"
+									text-anchor="middle"
+									class="fill-muted-foreground font-mono text-[10px]">{tick.toFixed(2)}</text
+								>
 								<text
-									x={label.x}
-									y={label.y + 4}
-									text-anchor={Math.abs(label.x - 260) < 8
-										? 'middle'
-										: label.x > 260
-											? 'start'
-											: 'end'}
-									class="fill-muted-foreground font-mono text-[10px]"
+									x="44"
+									y={scatterY(tick, scatterYMax) + 3}
+									text-anchor="end"
+									class="fill-muted-foreground font-mono text-[10px]">{tick.toFixed(2)}</text
 								>
-									{groupLabel(group).length > 14
-										? `${groupLabel(group).slice(0, 13)}…`
-										: groupLabel(group)}
-								</text>
 							{/each}
-							{#each selectedModels as model (modelKey(model))}
-								{@const key = modelKey(model)}
-								{@const isPinned = pinnedModelKeys.includes(key)}
-								{@const isHovered = hoveredRadarModelKey === key}
-								<polygon
-									points={radarVisualizationPolygon(key, activeGroups, radarScale)}
-									fill={colorOf(model)}
-									fill-opacity={isHovered
-										? 0.24
-										: isPinned
-											? 0.22
-											: pinnedModelKeys.length
-												? 0.06
-												: 0.12}
-									stroke={colorOf(model)}
-									stroke-width={isPinned ? 3 : 1.6}
+							<line x1="52" y1="18" x2="52" y2="368" stroke="currentColor" class="text-border" />
+							<line x1="52" y1="368" x2="502" y2="368" stroke="currentColor" class="text-border" />
+							<text
+								x="277"
+								y="408"
+								text-anchor="middle"
+								class="fill-muted-foreground font-mono text-[10px]">FPR →</text
+							>
+							<text
+								transform="translate(16,193) rotate(-90)"
+								text-anchor="middle"
+								class="fill-muted-foreground font-mono text-[10px]">FNR →</text
+							>
+							<text
+								x={scatterX(0, scatterXMax)}
+								y={scatterY(0, scatterYMax)}
+								text-anchor="middle"
+								dominant-baseline="central"
+								class="fill-[#0dce97] text-sm">★</text
+							>
+							{#each scatterRows as row (row.modelKey)}
+								{@const point = {
+									x: scatterX(row.fpr, scatterXMax),
+									y: scatterY(row.fnr, scatterYMax)
+								}}
+								{@const isPinned = pinnedModelKeys.includes(row.modelKey)}
+								{@const isHovered = hoveredScatterModelKey === row.modelKey}
+								<circle
+									cx={point.x}
+									cy={point.y}
+									r={isHovered ? 9 : isPinned ? 8 : 6}
+									fill={colorOf(row.model)}
+									fill-opacity="0.85"
+									stroke="currentColor"
+									stroke-width={isPinned ? 2 : 1}
+									class="text-background transition-[r]"
+									role="img"
+									aria-label={`${modelLabel(row.model)} FPR ${fmt(row.fpr, 3)} FNR ${fmt(row.fnr, 3)}`}
+									onpointerenter={(event) => {
+										hoveredScatterModelKey = row.modelKey;
+										tooltip.show(event, modelLabel(row.model), [
+											{ label: 'FPR', value: fmt(row.fpr, 3) },
+											{ label: 'FNR', value: fmt(row.fnr, 3) }
+										]);
+									}}
+									onpointermove={tooltip.move}
+									onpointerleave={() => {
+										hoveredScatterModelKey = null;
+										tooltip.hide();
+									}}
 								/>
-								{#each activeGroups as group, index (group)}
-									{@const value = radarVisualizationValue(key, group, radarScale) ?? 0}
-									{@const point = radarPoint(index, activeGroups.length, 150 * clamp01(value))}
+								{#if isPinned}
 									<circle
 										cx={point.x}
 										cy={point.y}
-										r={isHovered ? 5 : isPinned ? 4 : 3}
-										fill={colorOf(model)}
-										class="transition-[r]"
-										role="img"
-										aria-label={`${model.short} ${groupLabel(group)} ${radarScale.toUpperCase()} ${fmt(value, 3)}`}
-										onpointerenter={(event) => {
-											hoveredRadarModelKey = key;
-											updateTooltip(event, model.short, [
-												{ label: groupLabel(group), value: radarScale.toUpperCase() },
-												{ label: 'value', value: fmt(value, 3) }
-											]);
-										}}
-										onpointermove={moveTooltip}
-										onpointerleave={() => {
-											hoveredRadarModelKey = null;
-											hideTooltip();
-										}}
+										r="11"
+										fill="none"
+										stroke={colorOf(row.model)}
+										stroke-width="1.5"
 									/>
-								{/each}
+								{/if}
 							{/each}
 						</svg>
-					</div>
-					<div class="mt-3 flex min-w-0 flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground">
-						{#each selectedModels as model (modelKey(model))}
-							{@const key = modelKey(model)}
-							{@const isPinned = pinnedModelKeys.includes(key)}
-							<span
-								class={cn(
-									'inline-flex min-w-0 max-w-full items-center gap-2 rounded-full border border-transparent px-2 py-1 transition-colors',
-									isPinned &&
-										'border-[#0dce97]/35 bg-[#0dce97]/10 text-foreground shadow-sm shadow-[#0dce97]/5'
-								)}
-							>
-								<span class="size-2 rounded-full" style={`background:${colorOf(model)}`}></span>
-								{#if isPinned}
-									<PinIcon class="size-3 text-[#0dce97]" />
-								{/if}
-								<span class="min-w-0 truncate">{model.short}</span>
-								<button
-									class="font-semibold text-[#0dce97]"
-									type="button"
-									onclick={() => togglePin(key)}
-								>
-									{isPinned ? m.tools_unpin() : m.tools_pin()}
-								</button>
-							</span>
-						{/each}
-					</div>
-				{:else}
-					<p class="rounded-lg border bg-muted/30 p-6 text-center text-sm text-muted-foreground">
-						{m.tools_radar_empty()}
-					</p>
-				{/if}
-			</section>
-
-			<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm">
-				<div class="mb-3 flex flex-wrap items-baseline gap-2">
-					<h2 class="font-mono text-sm font-semibold">FPR × FNR</h2>
-					<span class="text-xs text-muted-foreground">{m.tools_scatter_hint()}</span>
-				</div>
-				<svg
-					viewBox="0 0 520 420"
-					class="h-auto w-full"
-					role="img"
-					aria-label={m.tools_scatter_aria()}
-				>
-					{#each [0.25, 0.5, 0.75, 1] as ratio (ratio)}
-						{@const xt = scatterXMax * ratio}
-						{@const yt = scatterYMax * ratio}
-						<line
-							x1={scatterX(xt, scatterXMax)}
-							y1="18"
-							x2={scatterX(xt, scatterXMax)}
-							y2="368"
-							stroke="currentColor"
-							stroke-width="1"
-							stroke-dasharray="3 4"
-							class="text-border"
-						/>
-						<line
-							x1="52"
-							y1={scatterY(yt, scatterYMax)}
-							x2="502"
-							y2={scatterY(yt, scatterYMax)}
-							stroke="currentColor"
-							stroke-width="1"
-							stroke-dasharray="3 4"
-							class="text-border"
-						/>
-					{/each}
-					{#each [0, 0.25, 0.5, 0.75, 1] as ratio (ratio)}
-						{@const xt = scatterXMax * ratio}
-						{@const yt = scatterYMax * ratio}
-						<text
-							x={scatterX(xt, scatterXMax)}
-							y="386"
-							text-anchor="middle"
-							class="fill-muted-foreground font-mono text-[10px]">{xt.toFixed(2)}</text
-						>
-						<text
-							x="44"
-							y={scatterY(yt, scatterYMax) + 3}
-							text-anchor="end"
-							class="fill-muted-foreground font-mono text-[10px]">{yt.toFixed(2)}</text
-						>
-					{/each}
-					<line x1="52" y1="18" x2="52" y2="368" stroke="currentColor" class="text-border" />
-					<line x1="52" y1="368" x2="502" y2="368" stroke="currentColor" class="text-border" />
-					<text
-						x="277"
-						y="408"
-						text-anchor="middle"
-						class="fill-muted-foreground font-mono text-[10px]">FPR →</text
-					>
-					<text
-						transform="translate(16,193) rotate(-90)"
-						text-anchor="middle"
-						class="fill-muted-foreground font-mono text-[10px]">FNR →</text
-					>
-					<text
-						x={scatterX(0, scatterXMax)}
-						y={scatterY(0, scatterYMax)}
-						text-anchor="middle"
-						dominant-baseline="central"
-						class="fill-[#0dce97] text-sm">★</text
-					>
-					{#each scatterRows as row (row.modelKey)}
-						{@const point = {
-							x: scatterX(row.fpr, scatterXMax),
-							y: scatterY(row.fnr, scatterYMax)
-						}}
-						{@const isPinned = pinnedModelKeys.includes(row.modelKey)}
-						{@const isHovered = hoveredScatterModelKey === row.modelKey}
-						<circle
-							cx={point.x}
-							cy={point.y}
-							r={isHovered ? 9 : isPinned ? 8 : 6}
-							fill={colorOf(row.model)}
-							fill-opacity="0.85"
-							stroke="currentColor"
-							stroke-width={isPinned ? 2 : 1}
-							class="text-background transition-[r]"
-							role="img"
-							aria-label={`${row.model.short} FPR ${fmt(row.fpr, 3)} FNR ${fmt(row.fnr, 3)}`}
-							onpointerenter={(event) => {
-								hoveredScatterModelKey = row.modelKey;
-								updateTooltip(event, row.model.short, [
-									{ label: 'FPR', value: fmt(row.fpr, 3) },
-									{ label: 'FNR', value: fmt(row.fnr, 3) }
-								]);
-							}}
-							onpointermove={moveTooltip}
-							onpointerleave={() => {
-								hoveredScatterModelKey = null;
-								hideTooltip();
-							}}
-						/>
-						{#if isPinned}
-							<circle
-								cx={point.x}
-								cy={point.y}
-								r="11"
-								fill="none"
-								stroke={colorOf(row.model)}
-								stroke-width="1.5"
-							/>
-						{/if}
-					{/each}
-				</svg>
-				<div class="mt-3 flex flex-wrap gap-4 text-xs text-muted-foreground">
-					<span class="text-[#0dce97]">{m.tools_scatter_ideal()}</span>
-				</div>
-			</section>
-
-			<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
-				<div class="mb-3 flex flex-wrap items-center gap-3">
-					<h2 class="font-mono text-sm font-semibold">
-						Heatmap <span class="font-mono uppercase">{heatmapMetric}</span>
-					</h2>
-					<span class="ml-auto inline-flex items-center gap-2 text-xs text-muted-foreground">
-						{m.tools_heatmap_scale_min({ value: heatmapScaleLabel(heatmapColorScale.min) })}
-						<span class="h-2 w-28 rounded-full bg-[linear-gradient(90deg,#0dce97,#ffca28,#ff4d4f)]"
-						></span>
-						{m.tools_heatmap_scale_max({ value: heatmapScaleLabel(heatmapColorScale.max) })}
-					</span>
-				</div>
-				<div class="max-w-full overflow-auto">
-					<div class="grid min-w-[54rem] gap-1" style:grid-template-columns={heatColumns}>
-						<div
-							class="px-2 py-2 font-mono text-[10px] text-muted-foreground grid place-items-center"
-						>
-							{m.tools_heatmap_header({ metric: heatmapMetric.toUpperCase() })}
+						<div class="mt-3 flex flex-wrap gap-4 text-xs text-muted-foreground">
+							<span class="text-[#0dce97]">{m.tools_scatter_ideal()}</span>
 						</div>
-						{#each heatmapModels as model (modelKey(model))}
-							<div
-								class="flex h-32 min-w-0 items-end justify-center overflow-hidden px-1 pb-2 text-center font-mono text-[10px] text-muted-foreground"
-							>
-								<span
-									class="block max-h-full max-w-full overflow-hidden leading-tight break-words whitespace-normal [overflow-wrap:anywhere] [writing-mode:vertical-rl]"
-									aria-label={model.short}
-								>
-									{model.short}
+					</section>
+
+					<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
+						<div class="mb-3 flex flex-wrap items-center gap-3">
+							<h2 class="font-mono text-sm font-semibold">
+								Heatmap <span class="font-mono uppercase">{heatmapMetric}</span>
+							</h2>
+							{#if heatmapHasData}
+								<span class="ml-auto inline-flex items-center gap-2 text-xs text-muted-foreground">
+									{m.tools_heatmap_scale_min({ value: heatmapScaleLabel(heatmapColorScale.min) })}
+									<span
+										class="h-2 w-28 rounded-full bg-[linear-gradient(90deg,#0dce97,#ffca28,#ff4d4f)]"
+									></span>
+									{m.tools_heatmap_scale_max({ value: heatmapScaleLabel(heatmapColorScale.max) })}
 								</span>
+							{/if}
+						</div>
+						{#if heatmapHasData}
+							<div class="max-w-full overflow-auto">
+								<div class="grid min-w-[54rem] gap-1" style:grid-template-columns={heatColumns}>
+									<div
+										class="grid place-items-center px-2 py-2 font-mono text-[10px] text-muted-foreground"
+									>
+										{m.tools_heatmap_header({ metric: heatmapMetric.toUpperCase() })}
+									</div>
+									{#each heatmapModels as model (modelKey(model))}
+										<div
+											class="relative h-24 min-w-0 overflow-visible px-1 pb-2 font-mono text-[10px] text-muted-foreground"
+										>
+											<OverflowCursorTooltip
+												text={modelLabel(model)}
+												labelClass="absolute bottom-2 left-1/2 z-10 block w-28 origin-bottom-left -translate-x-1 rotate-[-40deg] truncate leading-none"
+											/>
+										</div>
+									{/each}
+									{#each heatmapRows as row (row.id)}
+										{@const rowLabel = heatmapRowLabel(row)}
+										<div
+											class="flex min-w-0 items-center justify-end px-2 py-1 text-right text-xs leading-none text-muted-foreground"
+										>
+											<OverflowCursorTooltip text={rowLabel} labelClass="block min-w-0 truncate" />
+										</div>
+										{#each heatmapModels as model (modelKey(model))}
+											{@const key = modelKey(model)}
+											{@const value = heatmapValue(row, key)}
+											{@const hasValue = isNumber(value)}
+											<div
+												role="img"
+												class={cn(
+													'w-full rounded-md px-2 py-2 text-center font-mono text-sm font-semibold',
+													hasValue &&
+														'transition duration-150 hover:brightness-110 hover:saturate-125',
+													!isNumber(value) && 'bg-muted/70 text-muted-foreground',
+													isNumber(value) && heatTextColor(value)
+												)}
+												style={isNumber(value)
+													? `background:${heatColor(
+															value,
+															heatmapColorScale.min ?? value,
+															heatmapColorScale.max ?? value,
+															'sqrt'
+														)}`
+													: ''}
+												aria-label={`${modelLabel(model)} ${rowLabel} ${heatmapMetric.toUpperCase()} ${fmt(value, 3)}`}
+												onpointerenter={(event) =>
+													tooltip.show(event, modelLabel(model), [
+														{ label: groupLabel(row.groupKey), value: rowLabel },
+														{
+															label: heatmapMetric.toUpperCase(),
+															value: fmt(value, 3)
+														}
+													])}
+												onpointermove={tooltip.move}
+												onpointerleave={tooltip.hide}
+											>
+												{isNumber(value) ? fmt(value, 2) : '-'}
+											</div>
+										{/each}
+									{/each}
+								</div>
 							</div>
-						{/each}
-						{#each heatmapRows as row (row.id)}
+						{:else}
 							<div
-								class="flex min-w-0 items-center justify-end px-2 py-1 text-right text-xs leading-none text-muted-foreground"
+								class="rounded-lg border border-dashed bg-muted/20 px-4 py-8 text-center text-sm text-muted-foreground"
 							>
-								<span class="min-w-0 truncate">{heatmapRowLabel(row)}</span>
+								{m.tools_heatmap_empty()}
 							</div>
-							{#each heatmapModels as model (modelKey(model))}
-								{@const key = modelKey(model)}
-								{@const value = heatmapValue(row, key)}
-								{@const hasValue = isNumber(value)}
-								<div
+						{/if}
+					</section>
+
+					<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
+						<div class="mb-3 flex flex-wrap items-baseline gap-2">
+							<h2 class="font-mono text-sm font-semibold">{m.tools_grouped_bars_title()}</h2>
+							<span class="text-xs text-muted-foreground">{m.tools_grouped_bars_hint()}</span>
+						</div>
+						<div
+							class="max-w-full overflow-x-auto overflow-y-hidden"
+							bind:clientWidth={barContainerWidth}
+						>
+							<div class="relative h-[360px]" style:width={`${barSvgWidth}px`}>
+								<svg
+									viewBox={`0 0 ${barSvgWidth} 360`}
+									class="h-auto max-w-none"
+									style:width={`${barSvgWidth}px`}
 									role="img"
-									class={cn(
-										'w-full rounded-md px-2 py-2 text-center font-mono text-sm font-semibold',
-										hasValue && 'transition duration-150 hover:brightness-110 hover:saturate-125',
-										!isNumber(value) && 'bg-muted/70 text-muted-foreground',
-										isNumber(value) && heatTextColor(value)
-									)}
-									style={isNumber(value)
-										? `background:${heatColor(
-												value,
-												heatmapColorScale.min ?? value,
-												heatmapColorScale.max ?? value,
-												'sqrt'
-											)}`
-										: ''}
-									aria-label={`${model.short} ${heatmapRowLabel(row)} ${heatmapMetric.toUpperCase()} ${fmt(value, 3)}`}
-									onpointerenter={(event) =>
-										updateTooltip(event, model.short, [
-											{ label: groupLabel(row.groupKey), value: heatmapRowLabel(row) },
-											{
-												label: heatmapMetric.toUpperCase(),
-												value: fmt(value, 3)
-											}
-										])}
-									onpointermove={moveTooltip}
-									onpointerleave={hideTooltip}
+									aria-label={m.tools_grouped_bars_aria()}
 								>
-									{isNumber(value) ? fmt(value, 2) : '-'}
-								</div>
-							{/each}
-						{/each}
-					</div>
-				</div>
-			</section>
+									{#each [0, 0.25, 0.5, 0.75, 1] as tick (tick)}
+										<line
+											x1="44"
+											y1={barY(tick)}
+											x2={barSvgWidth - 12}
+											y2={barY(tick)}
+											stroke="currentColor"
+											stroke-width="1"
+											stroke-dasharray="3 4"
+											class="text-border"
+										/>
+										<text
+											x="38"
+											y={barY(tick) + 3}
+											text-anchor="end"
+											class="fill-muted-foreground font-mono text-[13px]">{tick.toFixed(2)}</text
+										>
+									{/each}
+									{#each selectedModels as model, index (modelKey(model))}
+										{@const key = modelKey(model)}
+										{@const band = (barSvgWidth - 56) / selectedModels.length}
+										{@const x0 = 44 + index * band + Math.max(0, (band - barGroupWidth) / 2)}
+										{#each [{ key: 'fnr', color: '#ff4d4f' }, { key: 'fpr', color: '#f5a623' }, { key: 'f1', color: '#0dce97' }] as series, seriesIndex (series.key)}
+											{@const barKey = `${key}-${series.key}`}
+											{@const isHovered = hoveredBarKey === barKey}
+											{@const isDimmed = hoveredBarKey !== null && !isHovered}
+											{@const value = groupedBarsMean(
+												key,
+												series.key as VizMetric,
+												groupedBarsByModelKey,
+												activeGroups
+											)}
+											{#if isNumber(value)}
+												<rect
+													x={x0 + seriesIndex * (barSeriesWidth + barSeriesGap)}
+													y={barY(value)}
+													width={barSeriesWidth}
+													height={268 - barY(value)}
+													rx="2"
+													fill={series.color}
+													fill-opacity={isDimmed ? 0.45 : 1}
+													class={cn(
+														'transition-[fill-opacity,filter]',
+														isHovered && 'brightness-125'
+													)}
+													role="img"
+													aria-label={`${modelLabel(model)} ${series.key.toUpperCase()} ${fmt(value, 3)}`}
+													onpointerenter={(event) => {
+														hoveredBarKey = barKey;
+														tooltip.show(event, modelLabel(model), [
+															{
+																label: series.key.toUpperCase(),
+																value: fmt(value, 3)
+															},
+															{
+																label: m.tools_mean(),
+																value: m.tools_group_mean_summary({ groups: activeGroups.length })
+															}
+														]);
+													}}
+													onpointermove={tooltip.move}
+													onpointerleave={() => {
+														hoveredBarKey = null;
+														tooltip.hide();
+													}}
+												/>
+											{/if}
+										{/each}
+									{/each}
+								</svg>
+								{#each selectedModels as model, index (modelKey(model))}
+									{@const band = (barSvgWidth - 56) / selectedModels.length}
+									{@const x0 = 44 + index * band + Math.max(0, (band - barGroupWidth) / 2)}
+									<div
+										class="absolute h-5 w-20 origin-top-left rotate-45 overflow-visible"
+										style:left={`${x0 + barGroupWidth / 2}px`}
+										style:top="282px"
+									>
+										<OverflowCursorTooltip
+											text={modelLabel(model)}
+											labelClass="block max-w-20 truncate font-mono text-[9px] leading-none text-muted-foreground"
+											tooltipClass="max-w-sm"
+										/>
+									</div>
+								{/each}
+							</div>
+						</div>
+						<div class="mt-3 flex flex-wrap gap-4 text-xs text-muted-foreground">
+							<span class="inline-flex items-center gap-2"
+								><span class="size-2 rounded-full bg-[#ff4d4f]"></span>FNR ({m.tools_lower_better()})</span
+							>
+							<span class="inline-flex items-center gap-2"
+								><span class="size-2 rounded-full bg-[#f5a623]"></span>FPR ({m.tools_lower_better()})</span
+							>
+							<span class="inline-flex items-center gap-2"
+								><span class="size-2 rounded-full bg-[#0dce97]"></span>F1 ({m.tools_higher_better()})</span
+							>
+						</div>
+					</section>
 
-			<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
-				<div class="mb-3 flex flex-wrap items-baseline gap-2">
-					<h2 class="font-mono text-sm font-semibold">{m.tools_grouped_bars_title()}</h2>
-					<span class="text-xs text-muted-foreground">{m.tools_grouped_bars_hint()}</span>
-				</div>
-				<div class="max-w-full overflow-x-auto">
-					<svg
-						viewBox={`0 0 ${barSvgWidth} 360`}
-						class="h-auto min-w-[45rem] w-full"
-						role="img"
-						aria-label={m.tools_grouped_bars_aria()}
-					>
-						{#each [0, 0.25, 0.5, 0.75, 1] as tick (tick)}
-							<line
-								x1="44"
-								y1={barY(tick)}
-								x2={barSvgWidth - 12}
-								y2={barY(tick)}
-								stroke="currentColor"
-								stroke-width="1"
-								stroke-dasharray="3 4"
-								class="text-border"
-							/>
-							<text
-								x="38"
-								y={barY(tick) + 3}
-								text-anchor="end"
-								class="fill-muted-foreground font-mono text-[13px]">{tick.toFixed(2)}</text
+					<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
+						<div class="mb-3 flex flex-wrap items-baseline gap-2">
+							<h2 class="font-mono text-sm font-semibold">{m.tools_pareto_title()}</h2>
+							<span class="text-xs text-muted-foreground">{m.tools_pareto_hint()}</span>
+						</div>
+						<div class="max-w-full overflow-x-auto">
+							<svg
+								viewBox="0 0 760 380"
+								class="h-auto min-w-[42rem] w-full"
+								role="img"
+								aria-label={m.tools_pareto_aria()}
 							>
-						{/each}
-						{#each activeGroups as group, index (group)}
-							{@const band = (barSvgWidth - 56) / activeGroups.length}
-							{@const x0 = 44 + index * band + band * 0.18}
-							{@const barW = (band * 0.64) / 3}
-							{#each [{ key: 'fnr', color: '#ff4d4f' }, { key: 'fpr', color: '#f5a623' }, { key: 'f1', color: '#0dce97' }] as series, seriesIndex (series.key)}
-								{@const barKey = `${group}-${series.key}`}
-								{@const isHovered = hoveredBarKey === barKey}
-								{@const isDimmed = hoveredBarKey !== null && !isHovered}
-								{@const value = groupedBarsMean(
-									group,
-									series.key as VizMetric,
-									groupedBarsByModelKey,
-									selectedModelKeySet
-								)}
-								{#if isNumber(value)}
-									<rect
-										x={x0 + seriesIndex * barW}
-										y={barY(value)}
-										width={barW - 2}
-										height={268 - barY(value)}
-										rx="2"
-										fill={series.color}
-										fill-opacity={isDimmed ? 0.45 : 1}
-										class={cn('transition-[fill-opacity,filter]', isHovered && 'brightness-125')}
-										role="img"
-										aria-label={`${groupLabel(group)} ${series.key.toUpperCase()} ${fmt(value, 3)}`}
-										onpointerenter={(event) => {
-											hoveredBarKey = barKey;
-											updateTooltip(event, groupLabel(group), [
-												{
-													label: series.key.toUpperCase(),
-													value: fmt(value, 3)
-												},
-												{
-													label: m.tools_mean(),
-													value: m.tools_selected_summary({
-														models: selectedModels.length,
-														groups: activeGroups.length
-													})
-												}
-											]);
-										}}
-										onpointermove={moveTooltip}
-										onpointerleave={() => {
-											hoveredBarKey = null;
-											hideTooltip();
-										}}
+								{#each paretoXTicks as xt (xt)}
+									{#if xt > 0}
+										<line
+											x1={paretoX(xt, paretoXMax)}
+											y1="18"
+											x2={paretoX(xt, paretoXMax)}
+											y2="330"
+											stroke="currentColor"
+											stroke-width="1"
+											stroke-dasharray="3 4"
+											class="text-border"
+										/>
+									{/if}
+									<text
+										x={paretoX(xt, paretoXMax)}
+										y="348"
+										text-anchor="middle"
+										class="fill-muted-foreground font-mono text-[7px]">{Math.round(xt)}</text
+									>
+								{/each}
+								{#each paretoYTicks as yt (yt)}
+									<line
+										x1="56"
+										y1={paretoY(yt, paretoY0)}
+										x2="742"
+										y2={paretoY(yt, paretoY0)}
+										stroke="currentColor"
+										stroke-width="1"
+										stroke-dasharray="3 4"
+										class="text-border"
 									/>
-								{/if}
-							{/each}
-							<text
-								transform={`translate(${x0 + (barW * 3) / 2},282) rotate(40)`}
-								text-anchor="start"
-								class="fill-muted-foreground font-mono text-[13px]"
-							>
-								{#each barLabelLines(groupLabel(group)) as line, lineIndex (`${group}-${lineIndex}`)}
-									<tspan x="0" dy={lineIndex === 0 ? 0 : 14}>{line}</tspan>
+									<text
+										x="48"
+										y={paretoY(yt, paretoY0) + 3}
+										text-anchor="end"
+										class="fill-muted-foreground font-mono text-[7px]">{yt.toFixed(2)}</text
+									>
 								{/each}
-							</text>
-						{/each}
-					</svg>
-				</div>
-				<div class="mt-3 flex flex-wrap gap-4 text-xs text-muted-foreground">
-					<span class="inline-flex items-center gap-2"
-						><span class="size-2 rounded-full bg-[#ff4d4f]"></span>FNR ({m.tools_lower_better()})</span
-					>
-					<span class="inline-flex items-center gap-2"
-						><span class="size-2 rounded-full bg-[#f5a623]"></span>FPR ({m.tools_lower_better()})</span
-					>
-					<span class="inline-flex items-center gap-2"
-						><span class="size-2 rounded-full bg-[#0dce97]"></span>F1 ({m.tools_higher_better()})</span
-					>
-				</div>
-			</section>
-
-			<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
-				<div class="mb-3 flex flex-wrap items-baseline gap-2">
-					<h2 class="font-mono text-sm font-semibold">{m.tools_pareto_title()}</h2>
-					<span class="text-xs text-muted-foreground">{m.tools_pareto_hint()}</span>
-				</div>
-				<div class="max-w-full overflow-x-auto">
-					<svg
-						viewBox="0 0 760 380"
-						class="h-auto min-w-[42rem] w-full"
-						role="img"
-						aria-label={m.tools_pareto_aria()}
-					>
-						{#each paretoXTicks as xt (xt)}
-							{#if xt > 0}
 								<line
-									x1={paretoX(xt, paretoXMax)}
+									x1="56"
 									y1="18"
-									x2={paretoX(xt, paretoXMax)}
+									x2="56"
 									y2="330"
 									stroke="currentColor"
 									stroke-width="1"
-									stroke-dasharray="3 4"
 									class="text-border"
 								/>
-							{/if}
-							<text
-								x={paretoX(xt, paretoXMax)}
-								y="348"
-								text-anchor="middle"
-								class="fill-muted-foreground font-mono text-[7px]">{Math.round(xt)}</text
-							>
-						{/each}
-						{#each paretoYTicks as yt (yt)}
-							<line
-								x1="56"
-								y1={paretoY(yt, paretoY0)}
-								x2="742"
-								y2={paretoY(yt, paretoY0)}
-								stroke="currentColor"
-								stroke-width="1"
-								stroke-dasharray="3 4"
-								class="text-border"
-							/>
-							<text
-								x="48"
-								y={paretoY(yt, paretoY0) + 3}
-								text-anchor="end"
-								class="fill-muted-foreground font-mono text-[7px]">{yt.toFixed(2)}</text
-							>
-						{/each}
-						<line
-							x1="56"
-							y1="18"
-							x2="56"
-							y2="330"
-							stroke="currentColor"
-							stroke-width="1"
-							class="text-border"
-						/>
-						<line
-							x1="56"
-							y1="330"
-							x2="742"
-							y2="330"
-							stroke="currentColor"
-							stroke-width="1"
-							class="text-border"
-						/>
-						<polyline
-							points={paretoFrontFor(paretoRows, paretoXMax, paretoY0)}
-							fill="none"
-							stroke="#6b4bf5"
-							stroke-width="1.6"
-							stroke-dasharray="5 4"
-						/>
-						{#each paretoRows as row (row.modelKey)}
-							{@const point = paretoPointFor(row, paretoXMax, paretoY0)}
-							{@const pinned = pinnedModelKeys.includes(row.modelKey)}
-							{@const hovered = hoveredParetoModelKey === row.modelKey}
-							<circle
-								cx={point.x}
-								cy={point.y}
-								r={hovered ? 8 : pinned ? 7 : 5.5}
-								fill={heatColor(clamp01((row.fpr ?? 0) / 0.15))}
-								stroke="currentColor"
-								stroke-width={pinned ? 2 : 1.5}
-								class="cursor-pointer text-background transition-[r] focus:outline-none"
-								role="button"
-								tabindex="0"
-								aria-pressed={pinned}
-								aria-label={pinned
-									? m.tools_pareto_unpin_model({ model: row.model.short })
-									: m.tools_pareto_pin_model({ model: row.model.short })}
-								onclick={() => togglePin(row.modelKey)}
-								onkeydown={(event) => handleCheckboxKeydown(event, () => togglePin(row.modelKey))}
-								onfocus={() => (hoveredParetoModelKey = row.modelKey)}
-								onblur={() => (hoveredParetoModelKey = null)}
-								onpointerenter={(event) => {
-									hoveredParetoModelKey = row.modelKey;
-									updateTooltip(event, row.model.short, [
-										{ label: 'integral', value: fmt(row.integral, 3) },
-										{ label: 'p95', value: `${fmtMs(row.p95)} ${m.ranking_unit_ms()}` },
-										{ label: 'FPR', value: fmt(row.fpr, 3) }
-									]);
-								}}
-								onpointermove={moveTooltip}
-								onpointerleave={() => {
-									hoveredParetoModelKey = null;
-									hideTooltip();
-								}}
-							/>
-							{#if pinned}
-								<circle
-									cx={point.x}
-									cy={point.y}
-									r="9.5"
+								<line
+									x1="56"
+									y1="330"
+									x2="742"
+									y2="330"
+									stroke="currentColor"
+									stroke-width="1"
+									class="text-border"
+								/>
+								<polyline
+									points={paretoFrontFor(paretoRows, paretoXMax, paretoY0)}
 									fill="none"
 									stroke="#6b4bf5"
-									stroke-width="1.5"
-									pointer-events="none"
+									stroke-width="1.6"
+									stroke-dasharray="5 4"
 								/>
-							{/if}
-						{/each}
-						{#each paretoRows as row (row.modelKey)}
-							{@const point = paretoPointFor(row, paretoXMax, paretoY0)}
-							{@const pinned = pinnedModelKeys.includes(row.modelKey)}
-							{#if pinned}
-								{@const labelX = Math.min(Math.max(72, point.x), 728)}
-								{@const labelY = Math.max(24, point.y - 18)}
+								{#each paretoRows as row (row.modelKey)}
+									{@const point = paretoPointFor(row, paretoXMax, paretoY0)}
+									{@const pinned = pinnedModelKeys.includes(row.modelKey)}
+									{@const hovered = hoveredParetoModelKey === row.modelKey}
+									<circle
+										cx={point.x}
+										cy={point.y}
+										r={hovered ? 8 : pinned ? 7 : 5.5}
+										fill={colorOf(row.model)}
+										stroke="currentColor"
+										stroke-width={pinned ? 2 : 1.5}
+										class="cursor-pointer text-background transition-[r] focus:outline-none"
+										role="button"
+										tabindex="0"
+										aria-pressed={pinned}
+										aria-label={pinned
+											? m.tools_pareto_unpin_model({ model: modelLabel(row.model) })
+											: m.tools_pareto_pin_model({ model: modelLabel(row.model) })}
+										onclick={() => togglePin(row.modelKey)}
+										onkeydown={(event) =>
+											handleCheckboxKeydown(event, () => togglePin(row.modelKey))}
+										onfocus={() => (hoveredParetoModelKey = row.modelKey)}
+										onblur={() => (hoveredParetoModelKey = null)}
+										onpointerenter={(event) => {
+											hoveredParetoModelKey = row.modelKey;
+											tooltip.show(event, modelLabel(row.model), [
+												{ label: 'integral', value: fmt(row.integral, 3) },
+												{ label: 'p95', value: `${fmtMs(row.p95)} ${m.ranking_unit_ms()}` }
+											]);
+										}}
+										onpointermove={tooltip.move}
+										onpointerleave={() => {
+											hoveredParetoModelKey = null;
+											tooltip.hide();
+										}}
+									/>
+									{#if pinned}
+										<circle
+											cx={point.x}
+											cy={point.y}
+											r="9.5"
+											fill="none"
+											stroke="#6b4bf5"
+											stroke-width="1.5"
+											pointer-events="none"
+										/>
+									{/if}
+								{/each}
+								{#each paretoRows as row (row.modelKey)}
+									{@const point = paretoPointFor(row, paretoXMax, paretoY0)}
+									{@const pinned = pinnedModelKeys.includes(row.modelKey)}
+									{#if pinned}
+										{@const labelX = Math.min(Math.max(72, point.x), 728)}
+										{@const labelY = Math.max(24, point.y - 18)}
+										<text
+											x={labelX}
+											y={labelY}
+											text-anchor="middle"
+											stroke="var(--card)"
+											stroke-width="4"
+											stroke-linejoin="round"
+											paint-order="stroke"
+											class="fill-muted-foreground font-mono text-[8px]"
+										>
+											{paretoLabelText(row)}
+										</text>
+									{/if}
+								{/each}
 								<text
-									x={labelX}
-									y={labelY}
+									x="399"
+									y="370"
 									text-anchor="middle"
-									stroke="var(--card)"
-									stroke-width="4"
-									stroke-linejoin="round"
-									paint-order="stroke"
-									class="fill-muted-foreground font-mono text-[8px]"
+									class="fill-muted-foreground font-mono text-[8px]">{m.tools_pareto_x_axis()}</text
 								>
-									{paretoLabelText(row)}
-								</text>
-							{/if}
-						{/each}
-						<text
-							x="399"
-							y="370"
-							text-anchor="middle"
-							class="fill-muted-foreground font-mono text-[8px]">{m.tools_pareto_x_axis()}</text
-						>
-						<text
-							transform="translate(16,174) rotate(-90)"
-							text-anchor="middle"
-							class="fill-muted-foreground font-mono text-[8px]">{m.tools_pareto_y_axis()}</text
-						>
-					</svg>
-				</div>
-				<div class="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-					<span class="font-mono">FPR</span> 0.0
-					<span class="h-2 w-28 rounded-full bg-[linear-gradient(90deg,#0dce97,#ffca28,#ff4d4f)]"
-					></span>
-					0.15+ <span>{m.tools_pareto_fpr_legend()}</span>
-					<span class="text-muted-foreground/70">·</span>
-					<span>{m.tools_pareto_click_pin_hint()}</span>
-				</div>
-			</section>
-
-			<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
-				<div class="mb-3 flex flex-wrap items-baseline gap-2">
-					<h2 class="font-mono text-sm font-semibold">
-						{m.tools_latency_title()}
-					</h2>
-					<span class="text-xs text-muted-foreground">{m.tools_latency_hint()}</span>
-				</div>
-				<Table
-					data={perfRows}
-					columns={latencyColumns}
-					getRowKey={(row) => row.modelKey}
-					containerClass="max-w-full overflow-x-auto rounded-lg border"
-					tableClass="min-w-[50rem]"
-					headerClass="bg-muted/70 hover:bg-muted/70 [&_th]:text-muted-foreground"
-					rowClass="hover:bg-muted/30"
-				>
-					{#snippet header(column)}
-						<Button
-							variant="ghost"
-							size="sm"
-							class={cn(
-								'h-auto gap-1 px-0 py-0 text-xs font-semibold text-muted-foreground hover:bg-transparent',
-								column.key !== 'model' && 'ml-auto'
-							)}
-							onclick={() => toggleLatencySort(column.key)}
+								<text
+									transform="translate(16,174) rotate(-90)"
+									text-anchor="middle"
+									class="fill-muted-foreground font-mono text-[8px]">{m.tools_pareto_y_axis()}</text
+								>
+							</svg>
+						</div>
+						<div class="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+							<span>{m.tools_pareto_click_pin_hint()}</span>
+						</div>
+					</section>
+
+					<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
+						<div class="mb-3 flex flex-wrap items-baseline gap-2">
+							<h2 class="font-mono text-sm font-semibold">
+								{m.tools_latency_title()}
+							</h2>
+							<span class="text-xs text-muted-foreground">{m.tools_latency_hint()}</span>
+						</div>
+						<Table
+							data={perfRows}
+							columns={latencyColumns}
+							getRowKey={(row) => row.modelKey}
+							containerClass="max-w-full overflow-x-auto rounded-lg border"
+							tableClass="min-w-[50rem]"
+							headerClass="bg-muted/70 hover:bg-muted/70 [&_th]:text-muted-foreground"
+							rowClass="hover:bg-muted/30"
 						>
-							{latencyColumnLabel(column)}
-							<ArrowUpDownIcon class="size-3" />
-						</Button>
-					{/snippet}
-
-					{#snippet cell(row, column)}
-						{#if column.key === 'model'}
-							<span class="inline-flex min-w-0 items-center gap-2 font-mono text-xs font-semibold">
-								<span class="size-2 rounded-full" style={`background:${colorOf(row.model)}`}></span>
-								<span class="min-w-0 max-w-80 truncate">{row.model.short}</span>
-								<code class="text-muted-foreground">{row.model.params}</code>
-							</span>
-						{:else if column.key === 'errorRate'}
-							<span class="font-mono">{fmtPercent(row.errorRate)}</span>
-						{:else}
-							<span class="font-mono">{fmtMs(row[column.key])}</span>
-						{/if}
-					{/snippet}
-				</Table>
-				<p class="mt-3 text-xs text-muted-foreground">{m.tools_latency_note()}</p>
-			</section>
-
-			<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
-				<div class="mb-3 flex flex-wrap items-baseline gap-2">
-					<h2 class="font-mono text-sm font-semibold">
-						{m.tools_robustness_title()}
-					</h2>
-					<span class="text-xs text-muted-foreground">{m.tools_robustness_hint()}</span>
-				</div>
-				<p class="mb-3 text-xs leading-5 text-muted-foreground">{m.tools_robustness_note()}</p>
-				<div class="max-w-full overflow-x-auto rounded-lg border">
-					<table class="w-full min-w-[54rem] text-sm">
-						<thead class="bg-muted/70 text-xs text-muted-foreground">
-							<tr>
-								<th class="px-3 py-3 text-left font-semibold">{m.ranking_column_model()}</th>
-								<th class="px-3 py-3 text-right font-semibold">{m.tools_real_score()}</th>
-								<th class="px-3 py-3 text-right font-semibold">{m.tools_robust_score()}</th>
-								<th class="px-3 py-3 text-right font-semibold">Δ score</th>
-								<th class="px-3 py-3 text-right font-semibold">FNR real</th>
-								<th class="px-3 py-3 text-right font-semibold">FNR robust</th>
-								<th class="px-3 py-3 text-right font-semibold">Δ FNR</th>
-							</tr>
-						</thead>
-						<tbody>
-							{#each robustRows as row (row.modelKey)}
-								{@const sDelta = row.deltaScore}
-								{@const fDelta = row.deltaFnr}
-								<tr class="border-t transition-colors hover:bg-muted/30">
-									<td class="px-3 py-2">
-										<div class="font-mono text-xs font-semibold">
-											<span
-												class="mr-2 inline-block size-2 rounded-full"
-												style={`background:${colorOf(row.model)}`}
-											></span>
-											{row.model.short}
-											<code class="text-muted-foreground">{row.model.params}</code>
-										</div>
-										{#if row.category}
-											<div class="mt-1 text-xs text-muted-foreground">{row.category}</div>
+							{#snippet header(column)}
+								{@const isActive = latencySortKey === column.key}
+								<Button
+									variant="ghost"
+									size="sm"
+									class={cn(
+										'h-auto gap-1 px-0 py-0 text-xs font-semibold text-muted-foreground hover:bg-transparent',
+										column.key !== 'model' && 'ml-auto justify-end text-right',
+										isActive && 'text-foreground'
+									)}
+									onclick={() => toggleLatencySort(column.key)}
+								>
+									{latencyColumnLabel(column)}
+									{#if isActive}
+										{#if latencySortDirection === 'asc'}
+											<ArrowUpIcon class="size-3 shrink-0" />
+										{:else}
+											<ArrowDownIcon class="size-3 shrink-0" />
 										{/if}
-										<div class="mt-2 flex max-w-40 flex-col gap-1">
-											<span class="h-1.5 rounded-full bg-muted">
+									{:else}
+										<ArrowUpDownIcon class="size-3 shrink-0 text-muted-foreground" />
+									{/if}
+								</Button>
+							{/snippet}
+
+							{#snippet cell(row, column)}
+								{#if column.key === 'model'}
+									<span
+										class="inline-flex min-w-0 items-center gap-2 font-mono text-xs font-semibold"
+									>
+										<span class="size-2 rounded-full" style={`background:${colorOf(row.model)}`}
+										></span>
+										<span class="min-w-0 max-w-80 truncate">{row.model.short}</span>
+										<code class="text-muted-foreground">{row.model.params}</code>
+									</span>
+								{:else if column.key === 'errorRate'}
+									<span class="font-mono">{fmtPercent(row.errorRate)}</span>
+								{:else}
+									<span class="font-mono">{fmtMs(row[column.key])}</span>
+								{/if}
+							{/snippet}
+						</Table>
+						<p class="mt-3 text-xs text-muted-foreground">{m.tools_latency_note()}</p>
+					</section>
+
+					<section class="min-w-0 rounded-xl border bg-card p-4 shadow-sm lg:col-span-2">
+						<div class="mb-3 flex flex-wrap items-baseline gap-2">
+							<h2 class="font-mono text-sm font-semibold">
+								{m.tools_robustness_title()}
+							</h2>
+							<span class="text-xs text-muted-foreground">{m.tools_robustness_hint()}</span>
+						</div>
+						<p class="mb-3 text-xs leading-5 text-muted-foreground">{m.tools_robustness_note()}</p>
+						<div class="max-w-full overflow-x-auto rounded-lg border">
+							<table class="w-full min-w-[70rem] text-sm">
+								<thead class="bg-muted/70 text-xs text-muted-foreground">
+									<tr>
+										<th class="px-3 py-3 text-left font-semibold">{m.ranking_column_model()}</th>
+										<th class="px-3 py-3 text-right font-semibold">{m.tools_real_score()}</th>
+										<th class="px-3 py-3 text-right font-semibold">{m.tools_robust_score()}</th>
+										<th class="px-3 py-3 text-right font-semibold">Δ score</th>
+										<th class="px-3 py-3 text-right font-semibold">FNR real</th>
+										<th class="px-3 py-3 text-right font-semibold">FNR robust</th>
+										<th class="px-3 py-3 text-right font-semibold">Δ FNR</th>
+										<th class="px-3 py-3 text-right font-semibold">FPR real</th>
+										<th class="px-3 py-3 text-right font-semibold">FPR robust</th>
+										<th class="px-3 py-3 text-right font-semibold">Δ FPR</th>
+									</tr>
+								</thead>
+								<tbody>
+									{#each robustRows as row (row.modelKey)}
+										{@const sDelta = row.deltaScore}
+										{@const fnrDelta = row.deltaFnr}
+										{@const fprDelta = row.deltaFpr}
+										<tr class="border-t transition-colors hover:bg-muted/30">
+											<td class="px-3 py-2">
+												<div class="font-mono text-xs font-semibold">
+													<span
+														class="mr-2 inline-block size-2 rounded-full"
+														style={`background:${colorOf(row.model)}`}
+													></span>
+													<span>{row.model.short}</span>
+													<code class="ml-2 text-muted-foreground">{row.model.params}</code>
+												</div>
+												<div class="mt-2 flex max-w-40 flex-col gap-1">
+													<span class="h-1.5 rounded-full bg-muted">
+														<span
+															class="block h-full rounded-full bg-[#0dce97]"
+															style={`width:${scoreWidth(row.scoreReal)}`}
+														></span>
+													</span>
+													<span class="h-1.5 rounded-full bg-muted">
+														<span
+															class="block h-full rounded-full bg-[#6b4bf5]"
+															style={`width:${scoreWidth(row.scoreRobust)}`}
+														></span>
+													</span>
+												</div>
+											</td>
+											<td class="px-3 py-2 text-right font-mono">{fmt(row.scoreReal, 3)}</td>
+											<td class="px-3 py-2 text-right font-mono">{fmt(row.scoreRobust, 3)}</td>
+											<td class="px-3 py-2 text-right">
 												<span
-													class="block h-full rounded-full bg-[#0dce97]"
-													style={`width:${scoreWidth(row.scoreReal)}`}
-												></span>
-											</span>
-											<span class="h-1.5 rounded-full bg-muted">
+													class={cn(
+														'inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-xs font-semibold whitespace-nowrap',
+														deltaBadgeClass(sDelta, 'score')
+													)}
+												>
+													{fmtDelta(sDelta)}
+												</span>
+											</td>
+											<td class="px-3 py-2 text-right font-mono">{fmt(row.fnrReal, 3)}</td>
+											<td class="px-3 py-2 text-right font-mono">{fmt(row.fnrRobust, 3)}</td>
+											<td class="px-3 py-2 text-right">
 												<span
-													class="block h-full rounded-full bg-[#6b4bf5]"
-													style={`width:${scoreWidth(row.scoreRobust)}`}
-												></span>
-											</span>
-										</div>
-									</td>
-									<td class="px-3 py-2 text-right font-mono">{fmt(row.scoreReal, 3)}</td>
-									<td class="px-3 py-2 text-right font-mono">{fmt(row.scoreRobust, 3)}</td>
-									<td class="px-3 py-2 text-right">
-										<span
-											class={cn(
-												'inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-xs font-semibold whitespace-nowrap',
-												deltaBadgeClass(sDelta, 'score')
-											)}
-										>
-											{fmtDelta(sDelta)}
-										</span>
-									</td>
-									<td class="px-3 py-2 text-right font-mono">{fmt(row.fnrReal, 3)}</td>
-									<td class="px-3 py-2 text-right font-mono">{fmt(row.fnrRobust, 3)}</td>
-									<td class="px-3 py-2 text-right">
-										<span
-											class={cn(
-												'inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-xs font-semibold whitespace-nowrap',
-												deltaBadgeClass(fDelta, 'fnr')
-											)}
-										>
-											{fmtDelta(fDelta)}
-										</span>
-									</td>
-								</tr>
-							{/each}
-						</tbody>
-					</table>
-				</div>
-			</section>
-		</div>
-
-		<p class="mt-8 text-center text-xs text-muted-foreground">
-			{m.tools_footer()}
-		</p>
-
-		{#if chartTooltip}
-			<div
-				bind:this={chartTooltipElement}
-				class="pointer-events-none fixed z-50 min-w-48 max-w-[min(24rem,calc(100vw-1.5rem))] rounded-lg border bg-popover px-4 py-3 text-sm text-popover-foreground shadow-xl"
-				style={`left:${chartTooltip.x}px; top:${chartTooltip.y}px`}
-			>
-				<div class="break-words font-semibold">{chartTooltip.title}</div>
-				<div class="mt-2 space-y-1 font-mono">
-					{#each chartTooltip.rows as row (`${row.label}-${row.value}`)}
-						<div class="grid grid-cols-[auto_1fr] gap-5">
-							<span class="break-words text-muted-foreground">{row.label}</span>
-							<span class="text-right">{row.value}</span>
+													class={cn(
+														'inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-xs font-semibold whitespace-nowrap',
+														deltaBadgeClass(fnrDelta, 'fnr')
+													)}
+												>
+													{fmtDelta(fnrDelta)}
+												</span>
+											</td>
+											<td class="px-3 py-2 text-right font-mono">{fmt(row.fprReal, 3)}</td>
+											<td class="px-3 py-2 text-right font-mono">{fmt(row.fprRobust, 3)}</td>
+											<td class="px-3 py-2 text-right">
+												<span
+													class={cn(
+														'inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-xs font-semibold whitespace-nowrap',
+														deltaBadgeClass(fprDelta, 'fpr')
+													)}
+												>
+													{fmtDelta(fprDelta)}
+												</span>
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
 						</div>
-					{/each}
+					</section>
 				</div>
+
+				<p class="mt-8 text-center text-xs text-muted-foreground">
+					{m.tools_footer()}
+				</p>
 			</div>
-		{/if}
-	</div>
+		{/snippet}
+	</ChartCursorTooltip>
 {/if}