From 2f37778f2baf6e97d530cd19ff624a1259548436 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 3 Nov 2026 02:50:24 +0800
Subject: [PATCH] feat(ui): lay out large matrices as compact grids with
 baselines and averages

The matrix tab put one card per cell in a single wide row of columns, so a
3 x 2 x 2 x 3 sweep needed three screens of horizontal scrolling and every card
repeated the same metadata.

- Lay the axes out to fill one screen width (rows may run long), with one
  header level per column axis and frozen headers and row labels.
- Switch between cards and compact cells automatically by grid size and
  screen; the reader can pin either. Compact cells open a detail card on
  hover: configuration, full card, every score, 95% interval, baseline
  comparison, and repeats.
- Average repeat axes (seed, repeat, ...) by default, or any axis on demand.
- Compare every cell to a baseline chosen per axis; differences are colored
  around 0 and faded when within noise.
- Show row and column means as margin bars, and sort rows best first.
- Mark completion with a ring measured against the entry's usual case count,
  so a one-case rerun reads as 1 of 60 instead of 100%.
- Show each value's mean beside the baseline and average menus.
- Align card bars across a grid row with CSS subgrid on the home and compare
  pages, and full-height cells in the matrix card view.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../client/src/components/CompletionRing.vue  |  65 +++
 .../client/src/components/HeadlineScore.vue   |   4 +-
 .../ui/client/src/components/MarginBar.vue    |  38 ++
 .../client/src/components/MatrixCellCard.vue  | 170 ++++++
 .../src/components/MatrixCellDetail.vue       | 102 ++++
 .../client/src/components/MatrixHeatCell.vue  |  90 +++
 .../ui/client/src/components/MatrixTable.vue  | 265 +++++++++
 .../ui/client/src/components/MatrixView.vue   | 517 ++++++++++--------
 .../ui/client/src/components/ScoreCard.vue    |  21 +-
 .../ui/client/src/i18n/locales/en/matrix.ts   |  55 +-
 .../client/src/i18n/locales/zh-Hans/matrix.ts |  55 +-
 packages/ui/client/src/matrixGrid.test.ts     | 295 ++++++++++
 packages/ui/client/src/matrixGrid.ts          | 399 ++++++++++++++
 packages/ui/client/src/pages/ComparePage.vue  |   4 +-
 packages/ui/client/src/pages/HomePage.vue     |   4 +-
 packages/ui/client/src/styles.css             |   4 +
 16 files changed, 1850 insertions(+), 238 deletions(-)
 create mode 100644 packages/ui/client/src/components/CompletionRing.vue
 create mode 100644 packages/ui/client/src/components/MarginBar.vue
 create mode 100644 packages/ui/client/src/components/MatrixCellCard.vue
 create mode 100644 packages/ui/client/src/components/MatrixCellDetail.vue
 create mode 100644 packages/ui/client/src/components/MatrixHeatCell.vue
 create mode 100644 packages/ui/client/src/components/MatrixTable.vue
 create mode 100644 packages/ui/client/src/matrixGrid.test.ts
 create mode 100644 packages/ui/client/src/matrixGrid.ts

diff --git a/packages/ui/client/src/components/CompletionRing.vue b/packages/ui/client/src/components/CompletionRing.vue
new file mode 100644
index 0000000..7535ade
--- /dev/null
+++ b/packages/ui/client/src/components/CompletionRing.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { CellCompletion } from '../matrixGrid'
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { formatCount } from '../format'
+
+/**
+ * Small ring of how many cases of a matrix cell have settled, in the state colors of the case bars (`CountsBar`):
+ * passed, then failed, then no result (`errored`, `timeout`), on a faint track for the cases still missing. A full
+ * ring is a complete cell; a running cell pulses.
+ */
+const props = withDefaults(defineProps<{
+  completion: CellCompletion
+  /** Outer size in pixels. */
+  size?: number
+}>(), { size: 16 })
+const { t } = useI18n()
+
+const stroke = computed(() => (props.size < 12 ? 2 : 2.5))
+const radius = computed(() => (props.size - stroke.value) / 2)
+const length = computed(() => 2 * Math.PI * radius.value)
+/** Arcs one after another around the ring, each a share of the expected cases (the whole ring at most). */
+const arcs = computed(() => {
+  const expected = Math.max(1, props.completion.expected)
+  const parts = [
+    { color: 'var(--mark-passed)', count: props.completion.scored - props.completion.failed },
+    { color: 'var(--mark-failed)', count: props.completion.failed },
+    { color: 'var(--mark-errored)', count: props.completion.errored },
+  ]
+  let start = 0
+  return parts.flatMap((part) => {
+    const share = Math.min(1 - start, part.count / expected)
+    if (share <= 0)
+      return []
+    const arc = { color: part.color, share, start }
+    start += share
+    return [arc]
+  })
+})
+const label = computed(() => t(props.completion.errored > 0 ? 'matrix.ring.errored' : 'matrix.ring.label', {
+  errored: formatCount(props.completion.errored),
+  expected: formatCount(props.completion.expected),
+  scored: formatCount(props.completion.scored),
+}) + (props.completion.running ? ` · ${t('matrix.ring.running')}` : ''))
+</script>
+
+<template>
+  <svg
+    :class="['shrink-0', props.completion.running && 'animate-pulse']"
+    :width="props.size" :height="props.size" :viewBox="`0 0 ${props.size} ${props.size}`"
+    role="img" :aria-label="label" data-testid="completion-ring"
+  >
+    <title>{{ label }}</title>
+    <g :transform="`rotate(-90 ${props.size / 2} ${props.size / 2})`" fill="none" :stroke-width="stroke">
+      <circle :cx="props.size / 2" :cy="props.size / 2" :r="radius" :class="['stroke-neutral-500/25']" />
+      <circle
+        v-for="arc in arcs" :key="arc.color" :cx="props.size / 2" :cy="props.size / 2" :r="radius"
+        :style="{ stroke: arc.color }"
+        :stroke-dasharray="`${arc.share * length} ${length}`" :stroke-dashoffset="-arc.start * length"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/packages/ui/client/src/components/HeadlineScore.vue b/packages/ui/client/src/components/HeadlineScore.vue
index 36c249e..aa7e9d5 100644
--- a/packages/ui/client/src/components/HeadlineScore.vue
+++ b/packages/ui/client/src/components/HeadlineScore.vue
@@ -31,6 +31,8 @@ const props = defineProps<{
   align?: 'end' | 'start'
   /** `score.defined` of the headline's scores (`headlineDefinitions`, `scoreDefinitions`). */
   definitions: readonly ScoreDefinition[]
+  /** Leaves the completion rate out, for a place that shows it another way (the progress ring of a matrix card). */
+  hideCompletion?: boolean
   /**
    * Called when the completion rate below 100 % is clicked; the page shows the cases without a result. Without it, the
    * rate is plain text (inside a card that is a link itself, for example).
@@ -62,7 +64,7 @@ const column = computed<ColumnDefinition | undefined>(() => {
 })
 const unscoredCount = computed(() => Object.values(view.value?.summary.unscored ?? {}).reduce((sum, count) => sum + count, 0))
 const incomplete = computed(() => view.value != null && view.value.completion.mean != null && view.value.completion.mean < 1)
-const showCompletion = computed(() => view.value != null && view.value.kind !== 'per-task' && (props.size !== 'sm' || incomplete.value))
+const showCompletion = computed(() => view.value != null && view.value.kind !== 'per-task' && !props.hideCompletion && (props.size !== 'sm' || incomplete.value))
 const valueClass = computed(() => ({ lg: 'text-2xl', md: 'text-xl', sm: 'text-sm' })[props.size ?? 'md'])
 </script>
 
diff --git a/packages/ui/client/src/components/MarginBar.vue b/packages/ui/client/src/components/MarginBar.vue
new file mode 100644
index 0000000..9c5c444
--- /dev/null
+++ b/packages/ui/client/src/components/MarginBar.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * Bar of a row's or column's summary on the margin of a matrix: a mean measured from 0, or a difference measured from
+ * a center line (gains up or right in the score hue, losses down or left in teal, as in `PairsHeatmap.vue`).
+ *
+ * The end on the baseline stays square and only the far end is rounded, so the bar reads as growing out of the
+ * baseline and its length is measured from there.
+ */
+const props = defineProps<{
+  /** `true`: a difference around a center line; `false`: a value from 0. */
+  diverging: boolean
+  /** Largest |value| on this margin, which fills the bar (or half of it when diverging). */
+  scale: number
+  value: number
+  vertical?: boolean
+}>()
+
+const extent = computed(() => `${Math.min(1, Math.abs(props.value) / (props.scale || 1)) * (props.diverging ? 50 : 100)}%`)
+const negative = computed(() => props.diverging && props.value < 0)
+const fill = computed(() => {
+  // Where the bar starts (the baseline) and which end is rounded.
+  if (props.vertical) {
+    const from = !props.diverging ? { bottom: '0' } : negative.value ? { top: '50%' } : { bottom: '50%' }
+    return { ...from, borderRadius: negative.value ? '0 0 2px 2px' : '2px 2px 0 0', height: extent.value, left: '0', right: '0' }
+  }
+  const from = !props.diverging ? { left: '0' } : negative.value ? { right: '50%' } : { left: '50%' }
+  return { ...from, borderRadius: negative.value ? '2px 0 0 2px' : '0 2px 2px 0', bottom: '0', top: '0', width: extent.value }
+})
+</script>
+
+<template>
+  <span :class="['relative block shrink-0 rounded-sm bg-neutral-500/12', props.vertical ? 'w-2.5 h-9' : 'w-14 h-2']" aria-hidden="true">
+    <span v-if="props.diverging" :class="['absolute rounded-full bg-neutral-500/60', props.vertical ? 'inset-x-[-2px] top-1/2 h-0.5 -translate-y-1/2' : 'inset-y-[-2px] left-1/2 w-0.5 -translate-x-1/2']" />
+    <span :class="['absolute']" :style="{ ...fill, background: negative ? 'var(--series-3)' : 'var(--series-1)' }" />
+  </span>
+</template>
diff --git a/packages/ui/client/src/components/MatrixCellCard.vue b/packages/ui/client/src/components/MatrixCellCard.vue
new file mode 100644
index 0000000..283c61b
--- /dev/null
+++ b/packages/ui/client/src/components/MatrixCellCard.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { MatrixCell, ScoreDefinition } from '../../../src/shared/contract'
+import type { CellComparison, GridCell } from '../matrixGrid'
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import CompletionRing from './CompletionRing.vue'
+import ScoreBar from './ScoreBar.vue'
+import ScoreCard from './ScoreCard.vue'
+import Sparkline from './Sparkline.vue'
+
+import { useCatalog } from '../composables/useCatalog'
+import { formatCount, formatScore } from '../format'
+import { attemptLabel, formatShortDateTime } from '../labels'
+import { href } from '../router'
+import { headlineOf, headlineValue, headlineView } from '../scores'
+
+/**
+ * The card of one matrix cell: its headline, how the case scores spread, when it ran, and its trend across runs. The
+ * card view of the matrix lays these out in the grid; the compact view opens the same card on hover, so both views
+ * say the same things about a cell.
+ *
+ * A cell averaged over repeats (`seed`, `repeat`) shows the pooled score and each repeat's value in place of one run's
+ * time and trend.
+ */
+const props = defineProps<{
+  /** Names of the averaged axes, for the line of each repeat's value. */
+  averagedNames: readonly string[]
+  cell: GridCell
+  /** The cell against the reader's baseline; its difference replaces the change from the previous run. */
+  comparison?: CellComparison
+  definitions: readonly ScoreDefinition[]
+}>()
+const { t } = useI18n()
+const catalog = useCatalog()
+
+const single = computed<MatrixCell | undefined>(() => (props.cell.members.length === 1 ? props.cell.members[0] : undefined))
+const lead = computed(() => props.cell.members[0]!)
+const headline = computed(() => headlineOf(props.cell.scoring))
+const label = computed(() => headlineView(headline.value, props.definitions).label)
+const running = computed(() => props.cell.members.some(member => member.latest.state === 'running' || member.latest.state === 'queued'))
+/**
+ * The catalog entry of the run still running in this cell (of an averaged cell, the repeat that runs), whose event
+ * sequence drives the progress and the expected end of the card.
+ */
+const run = computed(() => {
+  const active = props.cell.members.find(member => member.latest.state === 'running' || member.latest.state === 'queued') ?? lead.value
+  return catalog.runs.value.find(item => item.runKey === active.latest.runKey)
+})
+const caseTotal = computed(() => props.cell.members.reduce((total, member) => total + member.latest.counts.total, 0))
+/** When the cell's runs started: one time, or the first and the last of an averaged cell's repeats. */
+const startedText = computed(() => {
+  const times = props.cell.members.map(member => member.latest.startedAt).filter((time): time is string => time != null).toSorted()
+  if (times.length === 0)
+    return attemptLabel(lead.value.latest.attemptId)
+  const first = formatShortDateTime(new Date(times[0]!))
+  const last = formatShortDateTime(new Date(times.at(-1)!))
+  return first === last ? first : `${first} – ${last}`
+})
+/** Members whose newest run has not measured every case yet, for the line that says so. */
+const partial = computed(() => props.cell.members.filter(member => member.latest.coverage !== 'full' && member.latest.state !== 'running' && member.latest.state !== 'queued'))
+const counts = computed(() => {
+  const sum = (pick: (member: MatrixCell) => number) => props.cell.members.reduce((total, member) => total + pick(member), 0)
+  return {
+    errored: sum(member => member.latest.counts.errored),
+    failed: sum(member => member.latest.counts.failed),
+    passed: sum(member => member.latest.counts.passed),
+    requeued: sum(member => member.latest.counts.requeued),
+    running: sum(member => member.latest.counts.running),
+    skipped: sum(member => member.latest.counts.skipped),
+    timeout: sum(member => member.latest.counts.timeout),
+    total: sum(member => Math.max(member.latest.counts.total, member.latest.caseTotal ?? 0)),
+  }
+})
+/**
+ * Whether the cell is read by its score: it has a primary score and no case failed an assertion, so the case counts
+ * are all green and say nothing; how the scores spread does.
+ */
+const scored = computed(() => props.cell.scoring.primary != null && counts.value.failed === 0 && !running.value)
+const state = computed(() => {
+  const states = [...new Set(props.cell.members.map(member => member.latest.state))]
+  const shown = running.value ? 'running' : states.length === 1 ? states[0] : undefined
+  return scored.value && shown === 'passed' ? undefined : shown
+})
+
+/**
+ * Change of the primary score from the previous full run, in percentage points; `undefined` unless the cell's run and
+ * an earlier run both covered the cell fully (a partial run or one without a result is no baseline).
+ */
+const previousDelta = computed(() => {
+  const cell = single.value
+  const latest = props.cell.value
+  if (cell == null || cell.latest.coverage !== 'full' || latest == null)
+    return undefined
+  const index = cell.history.findIndex(point => point.runKey === cell.latest.runKey)
+  const previous = cell.history.slice(0, Math.max(0, index)).findLast(point => point.coverage === 'full' && point.score != null)
+  return previous == null ? undefined : (latest - previous.score!) * 100
+})
+const baselineDelta = computed(() => (props.comparison == null ? undefined : props.comparison.delta * 100))
+
+/** When a point of a cell's history started: its run's start time, else the attempt label. */
+function pointTime(point: MatrixCell['history'][number]): string {
+  return point.startedAt == null ? attemptLabel(point.attemptId) : formatShortDateTime(new Date(point.startedAt))
+}
+/** Tooltip of one history point: when, how much it measured, its score, and its completion rate. */
+function pointTitle(cell: MatrixCell, point: MatrixCell['history'][number]): string {
+  return t('matrix.view.pointTitle', {
+    completion: formatScore(point.completion),
+    coverage: t(`matrix.view.coverage.${point.coverage}`),
+    measured: formatCount(point.counts.passed + point.counts.failed),
+    score: label.value,
+    time: pointTime(point),
+    total: formatCount(cell.caseCount),
+    value: formatScore(point.score),
+  })
+}
+</script>
+
+<template>
+  <ScoreCard
+    compact hide-completion
+    :href="href({ name: 'task', runKey: lead.latest.runKey, taskId: lead.latest.taskId })"
+    :headline="headline"
+    :definitions="props.definitions"
+    :state="state"
+    :counts="scored ? undefined : counts"
+    :run="running ? run : undefined"
+    data-testid="matrix-cell"
+  >
+    <template #score>
+      <span
+        v-if="baselineDelta !== undefined"
+        :class="['text-xs font-medium tabular-nums', props.comparison!.clear ? (baselineDelta >= 0 ? 'text-primary-700 dark:text-primary-300' : '[color:var(--series-3)]') : 'muted']"
+        :title="t(props.comparison!.clear ? 'matrix.baseline.clear' : 'matrix.baseline.noise')"
+        data-testid="matrix-cell-baseline-delta"
+      >{{ baselineDelta > 0 ? '+' : baselineDelta < 0 ? '−' : '±' }}{{ Math.abs(baselineDelta).toFixed(1) }}</span>
+      <span
+        v-else-if="previousDelta !== undefined && Math.abs(previousDelta) >= 0.05"
+        :class="['inline-flex items-center text-xs font-medium tabular-nums', previousDelta > 0 ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400']"
+        :title="t('matrix.view.deltaTitle', { delta: `${previousDelta > 0 ? '+' : ''}${previousDelta.toFixed(1)}` })"
+        data-testid="matrix-cell-delta"
+      >
+        <span :class="[previousDelta > 0 ? 'i-mingcute-arrow-up-line' : 'i-mingcute-arrow-down-line']" aria-hidden="true" />{{ Math.abs(previousDelta).toFixed(1) }}
+      </span>
+    </template>
+    <!-- In place of "completed 96.8%": a full ring when every case settled, a gap when some are missing. -->
+    <template #corner>
+      <CompletionRing :completion="props.cell.progress" :size="18" />
+    </template>
+    <template v-if="scored" #bar>
+      <ScoreBar :class="['w-full']" :scores="props.cell.caseScores" />
+    </template>
+    <span :class="['flex items-center gap-1.5 min-w-0']" :title="props.cell.members.map(member => `${attemptLabel(member.latest.attemptId)} · ${member.latest.runKey}`).join('\n')">
+      <span :class="['truncate']">{{ startedText }} · {{ t('matrix.view.caseCount', { n: formatCount(caseTotal) }, caseTotal) }}<template v-if="single"> · {{ t('matrix.view.runCount', { n: formatCount(single.history.length) }, single.history.length) }}</template></span>
+      <Sparkline
+        v-if="single"
+        :class="['ml-auto']" :values="single.history.map(point => point.score)" :coverage="single.history.map(point => point.coverage)" :titles="single.history.map(point => pointTitle(single!, point))"
+        :label="t('matrix.view.sparkline', { n: formatCount(single.history.length), score: label }, single.history.length)" :width="48" :height="16"
+      />
+    </span>
+    <span v-if="!single" :class="['truncate tabular-nums']" :title="props.cell.members.map(member => `${props.averagedNames.map(name => member.run[name] ?? member.eval[name] ?? '—').join(' · ')}: ${formatScore(headlineValue(headlineOf(member.latest.scoring)))}`).join('\n')" data-testid="matrix-cell-members">
+      {{ t('matrix.averaged.members', { axes: props.averagedNames.join(' · '), n: formatCount(props.cell.members.length) }, props.cell.members.length) }}
+      {{ props.cell.members.map(member => formatScore(headlineValue(headlineOf(member.latest.scoring)))).join(' / ') }}
+    </span>
+    <span v-for="member in partial" :key="member.runRowId" :class="['flex items-center gap-1.5 [color:var(--ink-errored)]']" data-testid="matrix-cell-partial">
+      <span class="i-mingcute-alert-octagon-line" aria-hidden="true" />{{ t('matrix.view.partial', { measured: formatCount(member.latest.counts.passed + member.latest.counts.failed), total: formatCount(member.caseCount) }) }}
+    </span>
+  </ScoreCard>
+</template>
diff --git a/packages/ui/client/src/components/MatrixCellDetail.vue b/packages/ui/client/src/components/MatrixCellDetail.vue
new file mode 100644
index 0000000..94d3259
--- /dev/null
+++ b/packages/ui/client/src/components/MatrixCellDetail.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { ScoreDefinition } from '../../../src/shared/contract'
+import type { CellComparison, GridCell } from '../matrixGrid'
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import CompletionRing from './CompletionRing.vue'
+import MatrixCellCard from './MatrixCellCard.vue'
+
+import { formatCount, formatScore } from '../format'
+import { isSettled } from '../matrixGrid'
+import { headlineOf, headlineValue, scoreLabel } from '../scores'
+
+/**
+ * What the compact matrix opens on hover: the cell's full card ({@link MatrixCellCard}) with what a filled number
+ * cannot say around it — which configuration the cell is, how far the score can be trusted, its difference from the
+ * baseline cell, every score of the run (not only the headline), and each repeat of an averaged cell.
+ */
+const props = defineProps<{
+  averagedNames: readonly string[]
+  /** Text of the reader's baseline (`method = text · view = online`), when one is picked. */
+  baselineLabel?: string
+  cell: GridCell
+  comparison?: CellComparison
+  /** The cell's values on the laid-out axes, outer first. */
+  coordinates: readonly { name: string, value: string }[]
+  definitions: readonly ScoreDefinition[]
+}>()
+const { t } = useI18n()
+
+/** About 95 % of the headline's plausible values: ±1.96 standard errors, inside 0–1. */
+const interval = computed(() => {
+  const { se, value } = props.cell
+  if (value == null || se == null)
+    return undefined
+  return { high: Math.min(1, value + 1.96 * se), low: Math.max(0, value - 1.96 * se) }
+})
+const headlineCount = computed(() => {
+  const headline = headlineOf(props.cell.scoring).headline
+  return headline.kind === 'per-task' ? undefined : headline.score.n
+})
+const scores = computed(() => props.cell.scoring.scores.map(summary => ({
+  label: scoreLabel(summary.name, props.definitions),
+  mean: summary.mean,
+  n: summary.n,
+  name: summary.name,
+  primary: summary.name === props.cell.scoring.primary,
+})))
+const points = (delta: number) => `${delta > 0 ? '+' : delta < 0 ? '−' : '±'}${Math.abs(delta * 100).toFixed(1)}`
+</script>
+
+<template>
+  <div :class="['flex flex-col gap-2 w-80 max-h-[min(36rem,var(--reka-hover-card-content-available-height))] overflow-y-auto p-1 text-xs']" data-testid="matrix-cell-detail">
+    <div :class="['flex flex-wrap gap-1 px-1 pt-1']">
+      <span v-for="coordinate in props.coordinates" :key="coordinate.name" :class="['badge state-neutral font-normal']">
+        <span :class="['muted']">{{ coordinate.name }}</span>{{ coordinate.value }}
+      </span>
+    </div>
+
+    <MatrixCellCard :cell="props.cell" :comparison="props.comparison" :definitions="props.definitions" :averaged-names="props.averagedNames" />
+
+    <div v-if="props.comparison" :class="['flex flex-col gap-0.5 px-2']" data-testid="matrix-cell-detail-baseline">
+      <span :class="['muted']">{{ t('matrix.detail.against', { baseline: props.baselineLabel ?? '' }) }}</span>
+      <span :class="['flex items-baseline gap-2 tabular-nums']">
+        <span>{{ formatScore(props.comparison.base.value) }} → {{ formatScore(props.cell.value) }}</span>
+        <span :class="['font-semibold', props.comparison.clear ? (props.comparison.delta >= 0 ? 'text-primary-700 dark:text-primary-300' : '[color:var(--series-3)]') : 'muted']">{{ points(props.comparison.delta) }}</span>
+      </span>
+      <span :class="['muted']">{{ t(props.comparison.clear ? 'matrix.baseline.clear' : 'matrix.baseline.noise') }}</span>
+    </div>
+
+    <div v-if="interval" :class="['px-2 muted tabular-nums']" data-testid="matrix-cell-detail-interval">
+      {{ t('matrix.detail.interval', { high: formatScore(interval.high), low: formatScore(interval.low), n: formatCount(headlineCount ?? 0) }) }}
+    </div>
+
+    <div v-if="scores.length > 1" :class="['flex flex-col px-2']" data-testid="matrix-cell-detail-scores">
+      <span :class="['muted pb-1']">{{ t('matrix.detail.scores') }}</span>
+      <span v-for="score in scores" :key="score.name" :class="['grid grid-cols-[1fr_auto_3.5rem] gap-2 py-0.5 tabular-nums', score.primary && 'font-semibold']">
+        <span :class="['truncate']" :title="score.name">{{ score.label }}</span>
+        <span>{{ formatScore(score.mean) }}</span>
+        <span :class="['muted text-right']">n {{ formatCount(score.n) }}</span>
+      </span>
+    </div>
+
+    <div v-if="props.cell.members.length > 1" :class="['flex flex-col px-2 pb-1']" data-testid="matrix-cell-detail-members">
+      <span :class="['muted pb-1']">{{ t('matrix.detail.members', { axes: props.averagedNames.join(' · ') }) }}</span>
+      <span v-for="member in props.cell.members" :key="member.runRowId" :class="['grid grid-cols-[1fr_auto_auto] items-center gap-2 py-0.5 tabular-nums']">
+        <span :class="['truncate']">{{ props.averagedNames.map(name => member.run[name] ?? member.eval[name] ?? '—').join(' · ') }}</span>
+        <span>{{ formatScore(headlineValue(headlineOf(member.latest.scoring))) }}</span>
+        <span :class="['muted text-right']">{{ t('matrix.view.caseCount', { n: formatCount(member.latest.counts.total) }, member.latest.counts.total) }}</span>
+      </span>
+    </div>
+
+    <div v-if="props.cell.completion" :class="['flex items-start gap-1.5 px-2 pb-1']" data-testid="matrix-cell-detail-completion">
+      <CompletionRing :class="['mt-px']" :completion="props.cell.completion" :size="12" />
+      <span :class="['flex flex-col muted']">
+        <span>{{ t(props.cell.completion.errored > 0 ? 'matrix.ring.errored' : 'matrix.ring.label', { errored: formatCount(props.cell.completion.errored), expected: formatCount(props.cell.completion.expected), scored: formatCount(props.cell.completion.scored) }) }}</span>
+        <span v-if="!isSettled(props.cell)">{{ t('matrix.detail.excluded') }}</span>
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/client/src/components/MatrixHeatCell.vue b/packages/ui/client/src/components/MatrixHeatCell.vue
new file mode 100644
index 0000000..cbe1d19
--- /dev/null
+++ b/packages/ui/client/src/components/MatrixHeatCell.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { ScoreDefinition } from '../../../src/shared/contract'
+import type { CellComparison, GridCell } from '../matrixGrid'
+
+import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'reka-ui'
+import { computed } from 'vue'
+
+import AnimatedContent from './AnimatedContent.vue'
+import CompletionRing from './CompletionRing.vue'
+import MatrixCellDetail from './MatrixCellDetail.vue'
+
+import { href } from '../router'
+
+/**
+ * One cell of the compact matrix: its score (or its difference from the baseline) on a fill whose strength follows
+ * the value, so a whole grid reads at a glance. Hovering opens the cell's details ({@link MatrixCellDetail}: its full
+ * card, configuration, every score, and its baseline comparison); the cell itself links to the task like the card does.
+ */
+const props = defineProps<{
+  averagedNames: readonly string[]
+  /** Text of the reader's baseline, for the comparison in the details. */
+  baselineLabel?: string
+  /** Outlined: the best settled cell of its row. */
+  best?: boolean
+  cell: GridCell
+  comparison?: CellComparison
+  /** The cell's values on the laid-out axes, for the details. */
+  coordinates: readonly { name: string, value: string }[]
+  definitions: readonly ScoreDefinition[]
+  /** Narrow cells for wide grids: whole numbers, smaller type. */
+  dense?: boolean
+  /** The cell is a baseline cell: its own score, unfilled inside a dashed outline, for the differences around it. */
+  isBase?: boolean
+  /** Fill strength 0–1 (from the grid's color scale); `undefined` leaves the cell unfilled (incomplete, no pair). */
+  strength?: number
+}>()
+
+const lead = computed(() => props.cell.members[0]!)
+const shown = computed(() => {
+  if (props.comparison != null) {
+    const points = props.comparison.delta * 100
+    const sign = points > 0 ? '+' : points < 0 ? '−' : '±'
+    return `${sign}${Math.abs(points).toFixed(props.dense ? 0 : 1)}`
+  }
+  return props.cell.value == null ? '—' : (props.cell.value * 100).toFixed(props.dense ? 0 : 1)
+})
+// Gains and plain scores in the score hue, losses in teal (`PairsHeatmap.vue`); a difference within noise is faint.
+const hue = computed(() => (props.comparison != null && props.comparison.delta < 0 ? 'var(--series-3)' : 'var(--series-1)'))
+const style = computed(() => {
+  if (props.strength == null || props.isBase)
+    return undefined
+  const mix = Math.round(10 + props.strength * 85)
+  const faint = props.comparison != null && !props.comparison.clear
+  return {
+    background: `color-mix(in oklab, ${hue.value} ${faint ? Math.min(mix, 30) : mix}%, transparent)`,
+    color: !faint && mix > 60 ? 'var(--heat-ink)' : undefined,
+  }
+})
+</script>
+
+<template>
+  <HoverCardRoot :open-delay="250" :close-delay="80">
+    <HoverCardTrigger as-child>
+      <a
+        :href="href({ name: 'task', runKey: lead.latest.runKey, taskId: lead.latest.taskId })"
+        :class="[
+          'relative flex items-center justify-center rounded-md tabular-nums transition-[outline-color]',
+          'outline-2 -outline-offset-2 outline outline-transparent hover:outline-neutral-500/50 focus-visible:outline-primary-500',
+          props.dense ? 'w-10 h-7 text-[11px]' : 'w-15 h-9 text-sm',
+          props.strength == null && !props.isBase && 'bg-neutral-500/10 muted',
+          props.isBase && 'muted outline-dashed outline-neutral-400/70! dark:outline-neutral-500/70!',
+          props.best && 'font-semibold outline-neutral-900! dark:outline-neutral-100!',
+        ]"
+        :style="style"
+        data-testid="matrix-heat-cell"
+      >
+        {{ shown }}
+        <CompletionRing v-if="props.cell.completion" :class="['absolute top-0.5 right-0.5']" :completion="props.cell.completion" :size="props.dense ? 9 : 11" />
+      </a>
+    </HoverCardTrigger>
+    <HoverCardPortal>
+      <HoverCardContent as-child side="right" align="start" :side-offset="6" :collision-padding="8" :class="['floating']">
+        <AnimatedContent>
+          <MatrixCellDetail :cell="props.cell" :comparison="props.comparison" :coordinates="props.coordinates" :baseline-label="props.baselineLabel" :definitions="props.definitions" :averaged-names="props.averagedNames" />
+          <HoverCardArrow :class="['floating-arrow']" />
+        </AnimatedContent>
+      </HoverCardContent>
+    </HoverCardPortal>
+  </HoverCardRoot>
+</template>
diff --git a/packages/ui/client/src/components/MatrixTable.vue b/packages/ui/client/src/components/MatrixTable.vue
new file mode 100644
index 0000000..ecd962b
--- /dev/null
+++ b/packages/ui/client/src/components/MatrixTable.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import type { ScoreDefinition } from '../../../src/shared/contract'
+import type { Baseline, CellComparison, MatrixAxis, MatrixGrid } from '../matrixGrid'
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import MarginBar from './MarginBar.vue'
+import MatrixCellCard from './MatrixCellCard.vue'
+import MatrixHeatCell from './MatrixHeatCell.vue'
+
+import { bestRowsFirst, compareToBaseline, isSettled, meanOf } from '../matrixGrid'
+
+/**
+ * One entry's grid as a table: the row axes down the side and the column axes across the top, one header level per
+ * axis (outer groups spanning their inner values), both frozen while the table scrolls. Groups are set apart by space
+ * and outer header values by a tinted band, not by hairlines. Each row and column ends in
+ * a margin bar of its mean, the main effect of that value, so which row or column runs high reads without a chart.
+ *
+ * Cells are compact (a filled number that opens its card on hover) or cards; with a baseline, every cell shows its
+ * difference from its baseline cell (the baseline's values on the baseline axes, its own on the others).
+ */
+const props = defineProps<{
+  axes: readonly MatrixAxis[]
+  baseline?: Baseline
+  definitions: readonly ScoreDefinition[]
+  grid: MatrixGrid
+  /** Width of the scroll box: the row header stays frozen only while it takes at most half of it (not on a phone). */
+  room: number
+  /** Rows sorted best first (outer groups by their mean, rows inside by theirs). */
+  sort: boolean
+  textWidth: (text: string) => number
+  view: 'cards' | 'compact'
+}>()
+const { t } = useI18n()
+
+/** Height of one header row, so the header levels stack while they stick. */
+const HEADER_ROW_PX = 28
+
+const nameOf = (key: string) => props.axes.find(axis => axis.key === key)?.name ?? key
+const valueLabel = (value: string | undefined) => (value == null || value === '' ? '—' : value)
+const averagedNames = computed(() => props.grid.layout.averaged.map(nameOf))
+const layout = computed(() => props.grid.layout)
+const dense = computed(() => props.view === 'compact' && props.grid.columns.length > 14)
+
+/** The baseline's values on axes laid out in this grid (an entry without those axes has nothing to compare). */
+const baseline = computed(() => {
+  const laidOut = new Set([...layout.value.rows, ...layout.value.columns])
+  return Object.fromEntries(Object.entries(props.baseline ?? {}).filter(([key]) => laidOut.has(key)))
+})
+const comparisons = computed(() => (Object.keys(baseline.value).length === 0 ? undefined : compareToBaseline(props.grid, baseline.value)))
+const baselineLabel = computed(() => Object.entries(baseline.value).map(([key, value]) => `${nameOf(key)} = ${valueLabel(value)}`).join(' · '))
+function comparisonAt(row: number, column: number): CellComparison | undefined {
+  const comparison = comparisons.value?.[row]?.[column]
+  return comparison === 'base' ? undefined : comparison
+}
+/** A cell's values on the laid-out axes (rows, then columns), for its hover details. */
+function coordinatesAt(row: number, column: number): { name: string, value: string }[] {
+  const coordinates = { ...props.grid.rows[row], ...props.grid.columns[column] }
+  return [...layout.value.rows, ...layout.value.columns].map(key => ({ name: nameOf(key), value: valueLabel(coordinates[key]) }))
+}
+const isBaseAt = (row: number, column: number) => comparisons.value?.[row]?.[column] === 'base'
+/** What a cell contributes to the color scale and the means: its difference with a baseline, else its score. */
+function valueAt(row: number, column: number): null | number {
+  if (comparisons.value != null)
+    return comparisonAt(row, column)?.delta ?? null
+  const cell = props.grid.cells[row]?.[column]
+  return isSettled(cell) ? cell.value : null
+}
+const values = computed(() => props.grid.rows.map((_, row) => props.grid.columns.map((_, column) => valueAt(row, column))))
+const scale = computed(() => {
+  const all = values.value.flat().filter((value): value is number => value != null)
+  return { high: Math.max(...all), low: Math.min(...all), spread: Math.max(...all.map(Math.abs)) }
+})
+function strengthAt(row: number, column: number): number | undefined {
+  const value = values.value[row]![column]
+  if (value == null)
+    return undefined
+  if (comparisons.value != null)
+    return Math.abs(value) / (scale.value.spread || 1)
+  return scale.value.high > scale.value.low ? (value - scale.value.low) / (scale.value.high - scale.value.low) : 0.5
+}
+const rowMeans = computed(() => values.value.map(row => meanOf(row.filter((value): value is number => value != null))))
+const columnMeans = computed(() => props.grid.columns.map((_, column) => meanOf(values.value.map(row => row[column]).filter((value): value is number => value != null))))
+const marginScale = computed(() => Math.max(...[...rowMeans.value, ...columnMeans.value].filter((value): value is number => value != null).map(Math.abs)))
+/** Best settled cell of each row, without a baseline (with one, the differences speak for themselves). */
+const bestOfRow = computed(() => values.value.map((row) => {
+  if (comparisons.value != null)
+    return -1
+  return row.reduce<number>((best, value, index) => (value != null && (best < 0 || value > row[best]!) ? index : best), -1)
+}))
+const order = computed(() => (props.sort ? bestRowsFirst(props.grid, rowMeans.value) : props.grid.rows.map((_, index) => index)))
+
+/** Header levels, outermost first: each value spans the combinations of the axes inside it. */
+const headerLevels = computed(() => layout.value.columns.map((key, level) => {
+  const span = props.grid.columns.length / layout.value.columns.slice(0, level + 1).reduce((count, inner) => count * (props.axes.find(axis => axis.key === inner)?.values.length ?? 1), 1)
+  const cells: { first: number, label: string, span: number, value: string }[] = []
+  for (let index = 0; index < props.grid.columns.length; index += span)
+    cells.push({ first: index, label: valueLabel(props.grid.columns[index]![key]), span, value: props.grid.columns[index]![key] ?? '' })
+  return { cells, key }
+}))
+/** A column that starts a new outer group gets a divider (only with more than one column axis). */
+function startsGroup(column: number): boolean {
+  if (column === 0 || layout.value.columns.length < 2)
+    return false
+  const outer = layout.value.columns.slice(0, -1)
+  return outer.some(key => props.grid.columns[column]![key] !== props.grid.columns[column - 1]![key])
+}
+/** Widths of the row header's columns, one per row axis, so the values line up under their axis names. */
+const rowHeaderColumns = computed(() => layout.value.rows.map(key => Math.ceil(Math.max(
+  props.textWidth(nameOf(key)),
+  ...(props.axes.find(axis => axis.key === key)?.values ?? []).map(value => props.textWidth(valueLabel(value)) * 14 / 12),
+)) + 16))
+const stickyRows = computed(() => rowHeaderColumns.value.reduce((total, width) => total + width, 24) <= props.room / 2)
+const rowHeaderTemplate = computed(() => rowHeaderColumns.value.map(width => `${width}px`).join(' ') || 'auto')
+/** Values shown in a row's header: an outer value only where it changes, so groups read as blocks. */
+function rowLabels(position: number): string[] {
+  const row = props.grid.rows[order.value[position]!]!
+  const previous = position > 0 ? props.grid.rows[order.value[position - 1]!] : undefined
+  return layout.value.rows.map((key, index) => {
+    const changed = previous == null || layout.value.rows.slice(0, index + 1).some(outer => previous[outer] !== row[outer])
+    return index === layout.value.rows.length - 1 || changed ? valueLabel(row[key]) : ''
+  })
+}
+function startsRowGroup(position: number): boolean {
+  const outer = layout.value.rows[0]
+  if (position === 0 || outer == null || layout.value.rows.length < 2)
+    return false
+  return props.grid.rows[order.value[position]!]![outer] !== props.grid.rows[order.value[position - 1]!]![outer]
+}
+const isBaseValue = (key: string, value: string | undefined) => key in baseline.value && baseline.value[key] === value
+function formatMean(value: null | number) {
+  if (value == null)
+    return '—'
+  const points = value * 100
+  return comparisons.value == null ? points.toFixed(1) : `${points > 0 ? '+' : points < 0 ? '−' : '±'}${Math.abs(points).toFixed(1)}`
+}
+/** A column whose values match the baseline on every baseline axis laid out across the top: its cells are the base. */
+function isBaseColumn(column: Record<string, string>): boolean {
+  const across = Object.entries(baseline.value).filter(([key]) => layout.value.columns.includes(key))
+  return across.length > 0 && Object.keys(baseline.value).every(key => layout.value.columns.includes(key)) && across.every(([key, value]) => column[key] === value)
+}
+const cardClass = (best: boolean) => ['w-44 md:w-56 h-full', best && 'outline outline-2 outline-primary-500/50 rounded-xl']
+</script>
+
+<template>
+  <table :class="['border-separate border-spacing-0']" data-testid="matrix-table">
+    <thead>
+      <tr v-for="(level, depth) in headerLevels" :key="level.key">
+        <th
+          :class="['sticky z-3 bg-white dark:bg-neutral-900 px-3 align-bottom', stickyRows && 'left-0']"
+          :style="{ top: `${depth * HEADER_ROW_PX}px`, height: `${HEADER_ROW_PX}px` }"
+        >
+          <span v-if="depth === headerLevels.length - 1" :class="['grid text-left text-xs font-normal muted']" :style="{ gridTemplateColumns: rowHeaderTemplate }">
+            <span v-for="key in layout.rows" :key="key" :class="['truncate']">{{ nameOf(key) }}</span>
+          </span>
+        </th>
+        <th :class="['sticky z-2 bg-white dark:bg-neutral-900 pr-2 text-right text-xs font-normal muted whitespace-nowrap']" :style="{ top: `${depth * HEADER_ROW_PX}px` }">
+          {{ nameOf(level.key) }}
+        </th>
+        <th
+          v-for="cell in level.cells" :key="cell.first"
+          :colspan="cell.span"
+          :class="[
+            'th sticky z-2 bg-white dark:bg-neutral-900 text-center! px-0.5! py-0.5!',
+            startsGroup(cell.first) && 'pl-3!',
+            isBaseValue(level.key, cell.value) && 'text-neutral-900! dark:text-neutral-100! underline decoration-dotted underline-offset-3',
+          ]"
+          :style="{ top: `${depth * HEADER_ROW_PX}px` }"
+          :title="isBaseValue(level.key, cell.value) ? t('matrix.baseline.tag') : undefined"
+        >
+          <span :class="['block rounded-md py-0.5', depth < headerLevels.length - 1 && 'bg-neutral-500/10']">{{ cell.label }}</span>
+        </th>
+        <th :class="['th sticky z-2 bg-white dark:bg-neutral-900 pl-5!']" :style="{ top: `${depth * HEADER_ROW_PX}px` }">
+          <template v-if="depth === headerLevels.length - 1">
+            {{ comparisons ? t('matrix.margin.meanDelta') : t('matrix.margin.mean') }}
+          </template>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(rowIndex, position) in order" :key="rowIndex">
+        <th
+          scope="row"
+          :class="[
+            'z-1 bg-white dark:bg-neutral-900 px-3 text-left font-normal align-middle', stickyRows && 'sticky left-0',
+            startsRowGroup(position) && 'pt-4',
+          ]"
+        >
+          <span :class="['grid items-center text-sm']" :style="{ gridTemplateColumns: rowHeaderTemplate }">
+            <span
+              v-for="(label, index) in rowLabels(position)" :key="index"
+              :class="[
+                'truncate',
+                index === 0 ? 'font-medium text-neutral-800 dark:text-neutral-200' : 'muted',
+                isBaseValue(layout.rows[index]!, grid.rows[rowIndex]![layout.rows[index]!]) && label && 'underline decoration-dotted underline-offset-3',
+              ]"
+            >{{ label }}</span>
+          </span>
+        </th>
+        <td />
+        <td
+          v-for="(cell, column) in grid.cells[rowIndex]" :key="column"
+          :class="[
+            // NOTICE: `h-px` gives the cell a definite height, so the card's `h-full` resolves to the row's height (a
+            // percentage height inside a table cell of `auto` height is ignored). The row still grows to its tallest card.
+            props.view === 'compact' ? 'p-0.5' : 'p-1 align-top h-px',
+            startsGroup(column) && 'pl-3!',
+            startsRowGroup(position) && 'pt-4!',
+          ]"
+        >
+          <template v-if="cell">
+            <MatrixHeatCell
+              v-if="props.view === 'compact'"
+              :cell="cell" :comparison="comparisonAt(rowIndex, column)" :is-base="isBaseAt(rowIndex, column)"
+              :strength="strengthAt(rowIndex, column)" :best="bestOfRow[rowIndex] === column" :dense="dense"
+              :coordinates="coordinatesAt(rowIndex, column)" :baseline-label="baselineLabel"
+              :definitions="props.definitions" :averaged-names="averagedNames"
+            />
+            <MatrixCellCard
+              v-else
+              :class="cardClass(bestOfRow[rowIndex] === column)"
+              :cell="cell" :comparison="comparisonAt(rowIndex, column)"
+              :definitions="props.definitions" :averaged-names="averagedNames"
+            />
+          </template>
+          <span
+            v-else
+            :class="[
+              'flex items-center justify-center text-xs text-neutral-400 dark:text-neutral-600',
+              props.view === 'compact' ? (dense ? 'w-10 h-7 rounded-md' : 'w-15 h-9 rounded-md') : 'w-44 md:w-56 h-24 rounded-xl bg-neutral-500/6',
+            ]"
+            :title="t('matrix.view.notRun')"
+          >{{ props.view === 'compact' ? '—' : t('matrix.view.notRun') }}</span>
+        </td>
+        <td :class="['pl-5 pr-2', startsRowGroup(position) && 'pt-4']">
+          <span v-if="rowMeans[rowIndex] != null" :class="['flex items-center gap-2 text-xs tabular-nums muted whitespace-nowrap']" data-testid="matrix-row-mean">
+            <MarginBar :value="rowMeans[rowIndex]!" :scale="marginScale" :diverging="comparisons != null" />{{ formatMean(rowMeans[rowIndex]!) }}
+          </span>
+        </td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th :class="[stickyRows && 'sticky left-0', 'z-1 bg-white dark:bg-neutral-900 px-3 pt-4 pb-2 text-left text-xs font-medium muted align-bottom']">
+          {{ comparisons ? t('matrix.margin.meanDelta') : t('matrix.margin.mean') }}
+        </th>
+        <td />
+        <td
+          v-for="(column, index) in grid.columns" :key="index"
+          :class="['pt-4 pb-2 align-bottom', startsGroup(index) && 'pl-3']"
+          data-testid="matrix-column-mean"
+        >
+          <span :class="['flex flex-col items-center gap-1 text-xs tabular-nums muted']">
+            <template v-if="comparisons && isBaseColumn(column)">{{ t('matrix.baseline.tag') }}</template>
+            <template v-else-if="columnMeans[index] != null">
+              <MarginBar vertical :value="columnMeans[index]!" :scale="marginScale" :diverging="comparisons != null" />{{ formatMean(columnMeans[index]!) }}
+            </template>
+          </span>
+        </td>
+        <td />
+      </tr>
+    </tfoot>
+  </table>
+</template>
diff --git a/packages/ui/client/src/components/MatrixView.vue b/packages/ui/client/src/components/MatrixView.vue
index 8f94227..a90a62e 100644
--- a/packages/ui/client/src/components/MatrixView.vue
+++ b/packages/ui/client/src/components/MatrixView.vue
@@ -1,29 +1,47 @@
 <script setup lang="ts">
-import type { MatrixCell, MatrixResponse } from '../../../src/shared/contract'
+import type { MatrixCell } from '../../../src/shared/contract'
+import type { Baseline, MatrixAxis } from '../matrixGrid'
+import type { Segment } from './SegmentedControl.vue'
 
 import { useQuery } from '@pinia/colada'
-import { computed, shallowRef, watch } from 'vue'
+import { useElementSize, useMediaQuery, useStorage, useWindowSize } from '@vueuse/core'
+import { DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui'
+import { computed, shallowRef, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import ScoreBar from './ScoreBar.vue'
-import ScoreCard from './ScoreCard.vue'
-import Sparkline from './Sparkline.vue'
+import AnimatedContent from './AnimatedContent.vue'
+import CompletionRing from './CompletionRing.vue'
+import MarginBar from './MarginBar.vue'
+import MatrixTable from './MatrixTable.vue'
+import SegmentedControl from './SegmentedControl.vue'
 import StateView from './StateView.vue'
 
 import { api } from '../api'
 import { useCatalog } from '../composables/useCatalog'
 import { formatCount, formatScore, shortTaskId } from '../format'
-import { attemptLabel, formatShortDateTime } from '../labels'
-import { href } from '../router'
-import { headlineOf, headlineView } from '../scores'
+import { axisMeans, buildGrid, chooseLayout, defaultAveraged, matrixAxes, meanOf, typicalCaseCount } from '../matrixGrid'
 
 /**
- * Matrix of a project or experiment (`GET /api/matrix`): one grid per eval entry, rows along the run axis with the
- * most values (for example `model`), columns for the combinations of the other axes (for example `repeat`). A cell
- * is the newest run that covered that combination fully (see `MatrixCell.latest`), with the trend of every run.
+ * Matrix of a project or experiment (`GET /api/matrix`): one grid per eval entry. A cell is the newest run that covered
+ * that combination fully (see `MatrixCell.latest`), with the trend of every run.
  *
- * Columns of a configuration the project moved away from (every cell `superseded`, for example an eval axis dropped
- * since) are folded until asked for, so the table opens on what the newest runs measure.
+ * The axes are laid out to fill the width with columns and let rows run long ({@link chooseLayout}); repeat axes
+ * (`seed`, `repeat`) are averaged into one cell. A grid shows cards while they fit the screen, and compact cells (a
+ * filled number that opens its card on hover) once there are too many; the reader can pin either. Picking a baseline
+ * value for any of the axes (`method = text`, `view = online`) turns every cell into its difference from the cell with
+ * those values and its own on the other axes.
+ *
+ * Configurations the project moved away from (every cell `superseded`, for example an eval axis dropped since) are
+ * left out until asked for, so the table opens on what the newest runs measure.
+ *
+ * Call stack:
+ *
+ * MatrixView
+ *   -> {@link matrixAxes} (varying and shared axes of an entry)
+ *   -> {@link chooseLayout} (cards and compact, for the width)
+ *   -> {@link buildGrid}
+ *     -> MatrixTable (headers, margins, cells)
+ *       -> MatrixHeatCell | MatrixCellCard
  */
 const props = defineProps<{ experiment?: string, project: string, workspace: string }>()
 const { t } = useI18n()
@@ -37,240 +55,301 @@ const matrix = useQuery({
 const catalog = useCatalog()
 const scopeRuns = computed(() => catalog.runsIn({ experiment: props.experiment, project: props.project, workspace: props.workspace }))
 watch(() => scopeRuns.value.map(run => `${run.runKey}:${run.lastSeq}`).join(','), () => void matrix.refetch())
-/** Values of one cell along every axis, `run.` and `eval.` prefixed so equal axis names cannot collide. */
-function coordinates(cell: MatrixCell): Record<string, string> {
-  return {
-    ...Object.fromEntries(Object.entries(cell.run).map(([axis, value]) => [`run.${axis}`, value])),
-    ...Object.fromEntries(Object.entries(cell.eval).map(([axis, value]) => [`eval.${axis}`, value])),
-  }
-}
 
-/** The catalog entry of a cell's newest run: its event sequence drives the progress of a running cell. */
-function runOf(cell: MatrixCell) {
-  return scopeRuns.value.find(run => run.runKey === cell.latest.runKey)
-}
-const axisName = (key: string) => key.replace(/^(?:run|eval)\./, '')
+type ViewChoice = 'auto' | 'cards' | 'compact'
+/** The reader's pick of cell view, kept across pages: automatic until they pin one. */
+const viewChoice = useStorage<ViewChoice>('vieval:matrix-view', 'auto')
+const viewItems = computed<Segment<ViewChoice>[]>(() => [
+  { icon: 'i-mingcute-magic-2-line', label: t('matrix.mode.auto'), value: 'auto' },
+  { icon: 'i-mingcute-grid-line', label: t('matrix.mode.compact'), value: 'compact' },
+  { icon: 'i-mingcute-layout-grid-line', label: t('matrix.mode.cards'), value: 'cards' },
+])
+const sort = shallowRef(false)
+/** Baseline value per axis key; an axis without one keeps each cell's own value. */
+const baseline = shallowRef<Baseline>({})
+/** Axes the reader averages; `undefined` keeps the default (the repeat axes of each entry). */
+const averagedChoice = shallowRef<string[]>()
+const showSuperseded = shallowRef(false)
+
+const root = useTemplateRef<HTMLElement>('root')
+const { width } = useElementSize(root)
+const { height: windowHeight } = useWindowSize()
+// Cards are `w-44 md:w-56` (MatrixTable); the layout needs the same width to know how many fit.
+const wideCards = useMediaQuery('(min-width: 768px)')
 
-interface Grid {
-  columns: { key: string, label: string, superseded: boolean }[]
-  entryId: string
-  name: string
-  rowAxis: string | undefined
-  /** One row per value of `rowAxis`; `cells` line up with `columns` (`undefined`: combination never ran). */
-  rows: { cells: (MatrixCell | undefined)[], key: string, label: string }[]
-  /** Axis values every column has (for example `listener gpt-6-luna`), said once above the table instead of per column. */
-  shared: string
+// NOTICE:
+// Header widths are measured with a canvas in the viewer's font, so the layout knows how wide a column of model names
+// is before it renders. The font may not be loaded on the first pass; the estimate is close enough to choose a layout.
+const measure = document.createElement('canvas').getContext('2d')
+function textWidth(text: string): number {
+  if (measure == null)
+    return text.length * 7
+  measure.font = '500 12px "Quicksand Variable", system-ui, sans-serif'
+  return measure.measureText(text).width
 }
 
-function buildGrid(entryId: string, cells: MatrixCell[], response: MatrixResponse): Grid {
-  // Axis values in the order the API sorted them.
-  const order = new Map(response.axes.map(axis => [`${axis.kind}.${axis.name}`, axis.values]))
-  const keys = [...new Set(cells.flatMap(cell => Object.keys(coordinates(cell))))]
-  const distinct = (key: string) => new Set(cells.map(cell => coordinates(cell)[key] ?? '')).size
-  // Rows along the run axis with the most values; every other axis forms the columns.
-  const rowAxis = keys.filter(key => key.startsWith('run.')).toSorted((a, b) => distinct(b) - distinct(a))[0]
-  // Single-valued axes stay in the column label (for example `model gpt-5.5`), so a lone column still says what it is.
-  const columnAxes = keys.filter(key => key !== rowAxis)
-  const sortValues = (key: string, values: string[]) => {
-    const known = order.get(key) ?? []
-    return values.toSorted((a, b) => known.indexOf(a) - known.indexOf(b))
-  }
-  const columnKey = (cell: MatrixCell) => columnAxes.map(key => `${axisName(key)} ${coordinates(cell)[key] ?? '—'}`).join(' · ')
-  const rowKey = (cell: MatrixCell) => (rowAxis == null ? '' : coordinates(cell)[rowAxis] ?? '—')
-  // With several columns, an axis with one value in every cell says nothing about a column; it moves above the table.
-  // The other axes name a column by the values it has; an axis a column lacks (it ran before the axis was added, or
-  // after it was dropped) is left out instead of shown as `asr —`.
-  const multiColumn = new Set(cells.map(columnKey)).size > 1
-  const sharedAxes = multiColumn ? columnAxes.filter(key => cells.every(cell => coordinates(cell)[key] != null && coordinates(cell)[key] === coordinates(cells[0]!)[key])) : []
-  const varyingAxes = columnAxes.filter(key => !sharedAxes.includes(key))
-  const columnLabel = (cell: MatrixCell) => {
-    const present = varyingAxes.filter(key => coordinates(cell)[key] != null)
-    if (present.length > 0)
-      return present.map(key => `${axisName(key)} ${coordinates(cell)[key]}`).join(' · ')
-    return varyingAxes.length > 0 ? t('matrix.view.without', { axes: varyingAxes.map(axisName).join(', ') }) : t('matrix.view.all')
-  }
+/** Superseded configurations, one label per entry and eval row, for the fold toggle. */
+const supersededLabels = computed(() => {
+  const labels = (matrix.data.value?.cells ?? []).filter(cell => cell.superseded).map(cell => Object.entries(cell.eval).map(([axis, value]) => `${axis} ${value}`).join(' · ') || cell.evalRowId)
+  return [...new Set(labels)]
+})
 
-  const columns = [...new Set(cells.map(columnKey))].map((key) => {
-    const columnCells = cells.filter(cell => columnKey(cell) === key)
-    return { key, label: columnLabel(columnCells[0]!), superseded: columnCells.every(cell => cell.superseded) }
-  })
-  // Column order follows the axis order of the API (numeric for `repeat`), not the order cells arrived in.
-  columns.sort((a, b) => {
-    const cellA = cells.find(cell => columnKey(cell) === a.key)!
-    const cellB = cells.find(cell => columnKey(cell) === b.key)!
-    for (const key of columnAxes) {
-      const known = order.get(key) ?? []
-      const difference = known.indexOf(coordinates(cellA)[key] ?? '') - known.indexOf(coordinates(cellB)[key] ?? '')
-      if (difference !== 0)
-        return difference
-    }
-    return 0
-  })
-  const rowValues = rowAxis == null ? [''] : sortValues(rowAxis, [...new Set(cells.map(rowKey))])
-  const rows = rowValues.map(value => ({
-    cells: columns.map(column => cells.find(cell => rowKey(cell) === value && columnKey(cell) === column.key)),
-    key: value,
-    label: rowAxis == null ? t('matrix.view.all') : value,
-  }))
-  return {
-    columns,
-    entryId,
-    name: shortTaskId(entryId).split('/').at(-1) ?? entryId,
-    rowAxis: rowAxis == null ? undefined : axisName(rowAxis),
-    rows,
-    shared: sharedAxes.map(key => `${axisName(key)} ${coordinates(cells[0]!)[key]}`).join(' · '),
-  }
-}
+/** Pixels a grid's cells may take: the card's width less the row margin (bar and mean) and the table's padding. */
+const MARGIN_COLUMN_PX = 140
+/** Height of a card row, to tell whether the cards of a grid fit about one screen. */
+const CARD_ROW_PX = 170
 
-const grids = computed<Grid[]>(() => {
+const grids = computed(() => {
   const response = matrix.data.value
   if (response == null)
     return []
   const byEntry = new Map<string, MatrixCell[]>()
   for (const cell of response.cells) {
-    const list = byEntry.get(cell.entryId)
-    if (list == null)
-      byEntry.set(cell.entryId, [cell])
-    else
-      list.push(cell)
+    if (cell.superseded && !showSuperseded.value)
+      continue
+    byEntry.set(cell.entryId, [...(byEntry.get(cell.entryId) ?? []), cell])
   }
-  return [...byEntry.entries()].map(([entryId, cells]) => buildGrid(entryId, cells, response))
+  const available = Math.max(320, width.value - MARGIN_COLUMN_PX)
+  return [...byEntry.entries()].map(([entryId, cells]) => {
+    const { shared, varying } = matrixAxes(cells, response)
+    const averaged = (averagedChoice.value ?? defaultAveraged(varying)).filter(key => varying.some(axis => axis.key === key))
+    const cards = chooseLayout(varying, averaged, { available, cellWidth: wideCards.value ? 232 : 184, textWidth })
+    const compact = chooseLayout(varying, averaged, { available, cellWidth: 64, textWidth })
+    const cardRows = cards.layout.rows.reduce((count, key) => count * (varying.find(axis => axis.key === key)?.values.length ?? 1), 1)
+    // Cards while they fit the width and about a screen and a half of height; past that, compact cells.
+    const automatic = cards.fits && cardRows * CARD_ROW_PX <= windowHeight.value * 1.5 ? 'cards' : 'compact'
+    const view = viewChoice.value === 'auto' ? automatic : viewChoice.value
+    const layout = { ...(view === 'cards' ? cards : compact).layout }
+    // Compared axes go innermost, so each baseline cell sits next to the cells measured against it.
+    const compared = (keys: string[]) => [...keys.filter(key => !(key in baseline.value)), ...keys.filter(key => key in baseline.value)]
+    layout.rows = compared(layout.rows)
+    layout.columns = compared(layout.columns)
+    const grid = buildGrid(cells, varying, layout)
+    const flat = grid.cells.flat()
+    return {
+      axes: varying,
+      entryId,
+      grid,
+      incomplete: flat.filter(cell => cell?.completion != null).length,
+      means: axisMeans(cells, varying),
+      missing: flat.filter(cell => cell == null).length,
+      name: shortTaskId(entryId).split('/').at(-1) ?? entryId,
+      shared: shared.map(axis => `${axis.name} ${axis.value}`).join(' · '),
+      typical: typicalCaseCount(cells),
+      view,
+    }
+  })
 })
 
-const showSuperseded = shallowRef(false)
-/** Labels of the folded columns across the grids (one label per configuration, however many entries ran it). */
-const supersededLabels = computed(() => new Set(grids.value.flatMap(grid => grid.columns.filter(column => column.superseded).map(column => column.label))))
-const visibleGrids = computed(() => grids.value.map((grid) => {
-  if (showSuperseded.value)
-    return grid
-  const kept = grid.columns.flatMap((column, index) => (column.superseded ? [] : [index]))
-  return { ...grid, columns: kept.map(index => grid.columns[index]!), rows: grid.rows.map(row => ({ ...row, cells: kept.map(index => row.cells[index]) })) }
-}))
-
-/** Label of a cell's headline (its primary score, or the passed cases), for the trend and the tooltips. */
-function headlineLabel(cell: MatrixCell): string {
-  return headlineView(headlineOf(cell.latest.scoring), matrix.data.value?.scoreDefinitions ?? []).label
-}
+/** Axes that can be averaged or compared, across the grids (an axis of one entry only applies to that entry). */
+const layoutAxes = computed(() => {
+  const byKey = new Map<string, MatrixAxis>()
+  for (const grid of grids.value) {
+    for (const axis of grid.axes)
+      byKey.set(axis.key, { ...axis, values: [...new Set([...(byKey.get(axis.key)?.values ?? []), ...axis.values])] })
+  }
+  return [...byKey.values()]
+})
 /**
- * Whether a cell is read by its score: every case of its run got a result and none failed an assertion, so the case
- * counts are all green and say nothing; how the scores spread does.
+ * Mean score of each axis value across the entries (the mean of each entry's main effect), shown beside the values in
+ * the menus so a pick says what it compares to, and an average what it hides.
  */
-function isScored(cell: MatrixCell): boolean {
-  const { counts, scoring, state } = cell.latest
-  return scoring.primary != null && counts.failed === 0 && state !== 'running' && state !== 'queued'
-}
-/** Mean of the primary score of the cell's run, `null` without one. */
-function latestScore(cell: MatrixCell): null | number {
-  const { primary, scores } = cell.latest.scoring
-  return scores.find(summary => summary.name === primary)?.mean ?? null
+const valueMeans = computed(() => {
+  const merged = new Map<string, Map<string, null | number>>()
+  for (const axis of layoutAxes.value) {
+    merged.set(axis.key, new Map(axis.values.map(value => [
+      value,
+      meanOf(grids.value.map(grid => grid.means.get(axis.key)?.get(value)).filter((mean): mean is number => mean != null)),
+    ])))
+  }
+  return merged
+})
+/** Every value mean of every axis, for the shared scales of the menu marks. */
+const allValueMeans = computed(() => [...valueMeans.value.values()].flatMap(means => [...means.values()]).filter((mean): mean is number => mean != null))
+/** Highest value mean: the full length of the baseline menu's bars, so bars of different axes compare. */
+const valueMeanScale = computed(() => Math.max(0, ...allValueMeans.value))
+/**
+ * Where a value mean sits between the lowest and the highest of all axes (0–1), for the dots of the average menu: a
+ * scale from 0 would make a 40 % and a 57 % look alike.
+ */
+function dotPosition(mean: number): number {
+  const low = Math.min(...allValueMeans.value)
+  const high = Math.max(...allValueMeans.value)
+  return high > low ? (mean - low) / (high - low) : 0.5
 }
-/** When a point of a cell's history started: its run's start time, else the attempt label. */
-function pointTime(point: MatrixCell['history'][number]): string {
-  return point.startedAt == null ? attemptLabel(point.attemptId) : formatShortDateTime(new Date(point.startedAt))
+/** How far apart an axis's values score (highest mean less lowest), what averaging the axis would hide. */
+function spreadOf(key: string): null | number {
+  const means = [...(valueMeans.value.get(key)?.values() ?? [])].filter((mean): mean is number => mean != null)
+  return means.length < 2 ? null : Math.max(...means) - Math.min(...means)
 }
-
-/** Tooltip of one history point: when, how much it measured, its score, and its completion rate. */
-function pointTitle(cell: MatrixCell, point: MatrixCell['history'][number]): string {
-  return t('matrix.view.pointTitle', {
-    completion: formatScore(point.completion),
-    coverage: t(`matrix.view.coverage.${point.coverage}`),
-    measured: formatCount(point.counts.passed + point.counts.failed),
-    score: headlineLabel(cell),
-    time: pointTime(point),
-    total: formatCount(cell.caseCount),
-    value: formatScore(point.score),
-  })
-}
-
+const meanOfValue = (key: string, value: string) => valueMeans.value.get(key)?.get(value) ?? null
+const averagedKeys = computed(() => new Set(grids.value.flatMap(grid => grid.grid.layout.averaged)))
+const baselineAxes = computed(() => layoutAxes.value.filter(axis => !averagedKeys.value.has(axis.key)))
 /**
- * Change of the primary score from the previous full run, in percentage points; `undefined` unless the cell's run and
- * an earlier run both covered the cell fully (a partial run or one without a result is no baseline).
+ * Radio value of "each cell's own" in an axis's baseline group. An axis value can be any string, including `''` (cells
+ * without the axis), so the choice needs a value no axis can have.
  */
-function scoreDelta(cell: MatrixCell): number | undefined {
-  const latest = latestScore(cell)
-  if (cell.latest.coverage !== 'full' || latest == null)
-    return undefined
-  const index = cell.history.findIndex(point => point.runKey === cell.latest.runKey)
-  const previous = cell.history.slice(0, Math.max(0, index)).findLast(point => point.coverage === 'full' && point.score != null)
-  return previous == null ? undefined : (latest - previous.score!) * 100
+const OWN_VALUE = '\u0000'
+const hasBaseline = computed(() => Object.keys(baseline.value).length > 0)
+/** Picks the baseline value of one axis; `null` lets the axis keep each cell's own value again. */
+function pickBaseline(key: string, value: null | string): void {
+  const next = { ...baseline.value }
+  if (value == null)
+    delete next[key]
+  else
+    next[key] = value
+  baseline.value = next
 }
+const baselineText = computed(() => {
+  const picked = Object.entries(baseline.value)
+  if (picked.length === 0)
+    return t('matrix.baseline.none')
+  return picked.map(([key, value]) => `${layoutAxes.value.find(axis => axis.key === key)?.name ?? key} = ${value || '—'}`).join(' · ')
+})
+function toggleAveraged(key: string, on: boolean): void {
+  const current = [...averagedKeys.value]
+  averagedChoice.value = on ? [...current, key] : current.filter(item => item !== key)
+  if (on && key in baseline.value)
+    pickBaseline(key, null)
+}
+const averagedText = computed(() => {
+  const names = layoutAxes.value.filter(axis => averagedKeys.value.has(axis.key)).map(axis => axis.name)
+  return names.length === 0 ? t('matrix.averaged.none') : names.join(', ')
+})
+const anyCompact = computed(() => grids.value.some(grid => grid.view === 'compact'))
+const anyIncomplete = computed(() => grids.value.some(grid => grid.incomplete > 0))
 </script>
 
 <template>
   <StateView :error="matrix.error.value" :loading="matrix.isPending.value" :empty="grids.length === 0" :empty-text="t('matrix.view.empty')" :empty-hint="t('matrix.view.emptyHint')" skeleton="matrix" @retry="matrix.refetch()">
-    <p :class="['flex flex-wrap items-center gap-x-3 gap-y-1 text-xs muted mb-3']">
-      <span>{{ t('matrix.view.intro', { n: formatCount(matrix.data.value?.runCount ?? 0) }, matrix.data.value?.runCount ?? 0) }}</span>
-      <span :class="['inline-flex items-center gap-1']"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="2.5" fill="var(--series-1)" /></svg>{{ t('matrix.view.legendFull') }}</span>
-      <span :class="['inline-flex items-center gap-1']"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="2.5" fill="none" stroke="var(--series-1)" stroke-width="1.25" stroke-dasharray="1.5 1.2" /></svg>{{ t('matrix.view.legendPartial') }}</span>
-      <span :class="['inline-flex items-center gap-1']"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="2.5" fill="none" stroke="var(--mark-errored)" stroke-width="1.25" /></svg>{{ t('matrix.view.legendNone') }}</span>
-      <button v-if="supersededLabels.size > 0" type="button" :class="['btn text-xs px-1.5! py-0.5! ml-auto']" :title="[...supersededLabels].join('\n')" data-testid="matrix-toggle-superseded" @click="showSuperseded = !showSuperseded">
-        <span :class="[showSuperseded ? 'i-mingcute-eye-close-line' : 'i-mingcute-history-line']" aria-hidden="true" />
-        {{ t(showSuperseded ? 'matrix.view.hideSuperseded' : 'matrix.view.showSuperseded', { n: formatCount(supersededLabels.size) }, supersededLabels.size) }}
-      </button>
-    </p>
-    <section v-for="grid in visibleGrids" :key="grid.entryId" :class="['card mb-4 overflow-x-auto']" :data-testid="`matrix-${grid.entryId}`">
-      <h2 :class="['card-title']" :title="shortTaskId(grid.entryId)">
-        <span class="i-mingcute-layout-grid-line" aria-hidden="true" />{{ grid.name }}
-        <span v-if="grid.shared" :class="['text-xs font-normal muted']">{{ grid.shared }}</span>
-      </h2>
-      <table :class="['border-separate border-spacing-2']">
-        <thead>
-          <tr>
-            <th :class="['th']">
-              {{ grid.rowAxis ?? '' }}
-            </th>
-            <th v-for="column in grid.columns" :key="column.key" :class="['th text-center', column.superseded && 'opacity-60']" :title="column.superseded ? t('matrix.view.superseded') : undefined">
-              {{ column.label }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="row in grid.rows" :key="row.key">
-            <th :class="['th text-sm text-neutral-800 dark:text-neutral-200 font-medium align-middle']" scope="row">
-              {{ row.label }}
-            </th>
-            <td v-for="(cell, index) in row.cells" :key="grid.columns[index]!.key" :class="['align-top']">
-              <ScoreCard
-                v-if="cell"
-                :class="['w-44 md:w-56', cell.superseded && 'opacity-60']"
-                compact
-                :href="href({ name: 'task', runKey: cell.latest.runKey, taskId: cell.latest.taskId })"
-                :headline="headlineOf(cell.latest.scoring)"
-                :definitions="matrix.data.value?.scoreDefinitions ?? []"
-                :state="isScored(cell) && cell.latest.state === 'passed' ? undefined : cell.latest.state"
-                :counts="isScored(cell) ? undefined : { ...cell.latest.counts, total: Math.max(cell.latest.counts.total, cell.latest.caseTotal ?? 0) }"
-                :run="runOf(cell)"
-                data-testid="matrix-cell"
-              >
-                <template #score>
+    <div ref="root" :class="['flex flex-col gap-3']">
+      <div :class="['flex flex-wrap items-center gap-2']" data-testid="matrix-toolbar">
+        <SegmentedControl v-model="viewChoice" :items="viewItems" :label="t('matrix.mode.label')" size="md" data-testid="matrix-view-mode" />
+        <DropdownMenuRoot v-if="layoutAxes.length > 0">
+          <DropdownMenuTrigger :class="['option-trigger max-w-60']" data-testid="matrix-averaged">
+            <span :class="['muted shrink-0']">{{ t('matrix.averaged.label') }}</span><span :class="['truncate']">{{ averagedText }}</span><span class="i-mingcute-down-line muted" aria-hidden="true" />
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent as-child align="start" :side-offset="6" :collision-padding="12" :class="['floating min-w-64 p-1 text-sm']">
+              <AnimatedContent>
+                <DropdownMenuLabel :class="['px-2 py-1 text-xs muted max-w-72']">
+                  {{ t('matrix.averaged.hint') }}
+                </DropdownMenuLabel>
+                <DropdownMenuCheckboxItem
+                  v-for="axis in layoutAxes" :key="axis.key"
+                  :model-value="averagedKeys.has(axis.key)" :class="['menu-item']"
+                  @select.prevent @update:model-value="(on: boolean | 'indeterminate') => toggleAveraged(axis.key, on === true)"
+                >
+                  <span :class="['size-4 shrink-0 grid place-items-center']">
+                    <DropdownMenuItemIndicator><span class="i-mingcute-check-line" aria-hidden="true" /></DropdownMenuItemIndicator>
+                  </span>
+                  <span :class="['truncate']">{{ axis.name }}</span>
                   <span
-                    v-if="scoreDelta(cell) !== undefined && Math.abs(scoreDelta(cell)!) >= 0.05"
-                    :class="['inline-flex items-center text-xs font-medium tabular-nums', scoreDelta(cell)! > 0 ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400']"
-                    :title="t('matrix.view.deltaTitle', { delta: `${scoreDelta(cell)! > 0 ? '+' : ''}${scoreDelta(cell)!.toFixed(1)}` })"
-                    data-testid="matrix-cell-delta"
+                    :class="['ml-auto relative h-2 w-20 shrink-0 rounded-full bg-neutral-500/12']"
+                    :title="axis.values.map(value => `${value || '—'}: ${formatScore(meanOfValue(axis.key, value))}`).join('\n')"
+                    data-testid="matrix-averaged-spread"
                   >
-                    <span :class="[scoreDelta(cell)! > 0 ? 'i-mingcute-arrow-up-line' : 'i-mingcute-arrow-down-line']" aria-hidden="true" />{{ Math.abs(scoreDelta(cell)!).toFixed(1) }}
+                    <!-- One dot per value on the scale every axis shares; a wide spread is what averaging would hide. -->
+                    <template v-for="value in axis.values" :key="value">
+                      <span
+                        v-if="meanOfValue(axis.key, value) != null"
+                        :class="['absolute top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--series-1)] opacity-80']"
+                        :style="{ left: `${dotPosition(meanOfValue(axis.key, value)!) * 100}%` }"
+                      />
+                    </template>
                   </span>
+                  <span :class="['w-10 text-right text-xs muted tabular-nums']" :title="t('matrix.averaged.spread')">{{ spreadOf(axis.key) == null ? '' : (spreadOf(axis.key)! * 100).toFixed(1) }}</span>
+                </DropdownMenuCheckboxItem>
+              </AnimatedContent>
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenuRoot>
+        <DropdownMenuRoot v-if="baselineAxes.length > 0">
+          <DropdownMenuTrigger :class="['option-trigger max-w-72']" data-testid="matrix-baseline">
+            <span :class="['muted shrink-0']">{{ t('matrix.baseline.label') }}</span><span :class="['truncate']">{{ baselineText }}</span><span class="i-mingcute-down-line muted" aria-hidden="true" />
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent as-child align="start" :side-offset="6" :collision-padding="12" :class="['floating min-w-72 p-1 text-sm']">
+              <AnimatedContent>
+                <div :class="['max-h-[min(28rem,var(--reka-dropdown-menu-content-available-height))] overflow-y-auto']">
+                  <DropdownMenuLabel :class="['px-2 py-1 text-xs muted max-w-64']">
+                    {{ t('matrix.baseline.hint') }}
+                  </DropdownMenuLabel>
+                  <template v-for="(axis, index) in baselineAxes" :key="axis.key">
+                    <DropdownMenuLabel :class="['px-2 py-1 text-xs font-medium', index > 0 && 'mt-2']">
+                      {{ axis.name }}
+                    </DropdownMenuLabel>
+                    <DropdownMenuRadioGroup
+                      :model-value="baseline[axis.key] ?? OWN_VALUE"
+                      @update:model-value="value => pickBaseline(axis.key, typeof value === 'string' && value !== OWN_VALUE ? value : null)"
+                    >
+                      <DropdownMenuRadioItem :value="OWN_VALUE" :class="['menu-item']" @select.prevent>
+                        <span :class="['size-4 shrink-0 grid place-items-center']">
+                          <DropdownMenuItemIndicator><span class="i-mingcute-check-line" aria-hidden="true" /></DropdownMenuItemIndicator>
+                        </span>
+                        <span :class="['muted']">{{ t('matrix.baseline.own') }}</span>
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem v-for="value in axis.values" :key="value" :value="value" :class="['menu-item']" @select.prevent>
+                        <span :class="['size-4 shrink-0 grid place-items-center']">
+                          <DropdownMenuItemIndicator><span class="i-mingcute-check-line" aria-hidden="true" /></DropdownMenuItemIndicator>
+                        </span>
+                        <span :class="['truncate']">{{ value || '—' }}</span>
+                        <span v-if="meanOfValue(axis.key, value) != null" :class="['ml-auto flex items-center gap-2 pl-3 text-xs muted tabular-nums']" data-testid="matrix-baseline-mean">
+                          <MarginBar :value="meanOfValue(axis.key, value)!" :scale="valueMeanScale" :diverging="false" />
+                          <span :class="['w-9 text-right']">{{ formatScore(meanOfValue(axis.key, value)) }}</span>
+                        </span>
+                      </DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </template>
+                </div>
+                <template v-if="hasBaseline">
+                  <DropdownMenuItem :class="['menu-item mt-2']" @select="baseline = {}">
+                    <span class="i-mingcute-close-line size-4" aria-hidden="true" />{{ t('matrix.baseline.clearAll') }}
+                  </DropdownMenuItem>
                 </template>
-                <template v-if="isScored(cell)" #bar>
-                  <ScoreBar :class="['w-full']" :scores="cell.latest.caseScores" />
-                </template>
-                <span :class="['flex items-center gap-1.5 min-w-0']" :title="`${attemptLabel(cell.latest.attemptId)} · ${cell.latest.runKey}`">
-                  <span :class="['truncate']">{{ cell.latest.startedAt ? formatShortDateTime(new Date(cell.latest.startedAt)) : attemptLabel(cell.latest.attemptId) }} · {{ t('matrix.view.caseCount', { n: formatCount(cell.latest.counts.total) }, cell.latest.counts.total) }} · {{ t('matrix.view.runCount', { n: formatCount(cell.history.length) }, cell.history.length) }}</span>
-                  <Sparkline
-                    :class="['ml-auto']" :values="cell.history.map(point => point.score)" :coverage="cell.history.map(point => point.coverage)" :titles="cell.history.map(point => pointTitle(cell, point))"
-                    :label="t('matrix.view.sparkline', { n: formatCount(cell.history.length), score: headlineLabel(cell) }, cell.history.length)" :width="48" :height="16"
-                  />
-                </span>
-                <span v-if="cell.latest.coverage !== 'full' && cell.latest.state !== 'running' && cell.latest.state !== 'queued'" :class="['flex items-center gap-1.5 [color:var(--ink-errored)]']" data-testid="matrix-cell-partial">
-                  <span class="i-mingcute-alert-octagon-line" aria-hidden="true" />{{ t('matrix.view.partial', { measured: formatCount(cell.latest.counts.passed + cell.latest.counts.failed), total: formatCount(cell.caseCount) }) }}
-                </span>
-              </ScoreCard>
-              <span v-else :class="['flex items-center justify-center w-44 md:w-56 h-24 rounded-xl text-xs muted border border-dashed border-neutral-300/60 dark:border-neutral-700/40']">{{ t('matrix.view.notRun') }}</span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
+              </AnimatedContent>
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenuRoot>
+        <button type="button" :class="['btn', sort && 'btn-active']" :aria-pressed="sort" data-testid="matrix-sort" @click="sort = !sort">
+          <span class="i-mingcute-sort-descending-line" aria-hidden="true" />{{ t('matrix.sort') }}
+        </button>
+        <button v-if="supersededLabels.length > 0" type="button" :class="['btn ml-auto']" :title="supersededLabels.join('\n')" data-testid="matrix-toggle-superseded" @click="showSuperseded = !showSuperseded">
+          <span :class="[showSuperseded ? 'i-mingcute-eye-close-line' : 'i-mingcute-history-line']" aria-hidden="true" />
+          {{ t(showSuperseded ? 'matrix.view.hideSuperseded' : 'matrix.view.showSuperseded', { n: formatCount(supersededLabels.length) }, supersededLabels.length) }}
+        </button>
+      </div>
+
+      <p :class="['flex flex-wrap items-center gap-x-4 gap-y-1 text-xs muted']" data-testid="matrix-legend">
+        <span>{{ t('matrix.view.intro', { n: formatCount(matrix.data.value?.runCount ?? 0) }, matrix.data.value?.runCount ?? 0) }}</span>
+        <span v-if="anyCompact && !hasBaseline" :class="['inline-flex items-center gap-1.5']">
+          <span :class="['inline-block w-16 h-2 rounded-sm']" :style="{ background: 'linear-gradient(90deg, color-mix(in oklab, var(--series-1) 10%, transparent), var(--series-1))' }" aria-hidden="true" />{{ t('matrix.legend.scale') }}
+        </span>
+        <span v-if="hasBaseline" :class="['inline-flex items-center gap-1.5']">
+          <span :class="['inline-block w-16 h-2 rounded-sm']" :style="{ background: 'linear-gradient(90deg, var(--series-3), transparent, var(--series-1))' }" aria-hidden="true" />{{ t('matrix.legend.delta', { baseline: baselineText }) }}
+        </span>
+        <span v-if="anyCompact && !hasBaseline" :class="['inline-flex items-center gap-1.5']">
+          <span :class="['inline-block size-3 rounded-sm outline-2 outline -outline-offset-2 outline-neutral-900 dark:outline-neutral-100']" aria-hidden="true" />{{ t('matrix.legend.best') }}
+        </span>
+        <span v-if="anyIncomplete" :class="['inline-flex items-center gap-1.5']">
+          <CompletionRing :completion="{ errored: 1, expected: 4, failed: 0, running: false, scored: 2 }" :size="12" />{{ t('matrix.legend.ring') }}
+        </span>
+      </p>
+
+      <section v-for="entry in grids" :key="entry.entryId" :class="['card overflow-hidden']" :data-testid="`matrix-${entry.entryId}`">
+        <h2 :class="['card-title flex-wrap']" :title="shortTaskId(entry.entryId)">
+          <span class="i-mingcute-layout-grid-line" aria-hidden="true" />{{ entry.name }}
+          <span :class="['text-xs font-normal muted']">
+            {{ [entry.shared, t('matrix.view.casesEach', { n: formatCount(entry.typical) }, entry.typical), entry.incomplete > 0 ? t('matrix.view.incomplete', { n: formatCount(entry.incomplete) }, entry.incomplete) : '', entry.missing > 0 ? t('matrix.view.missing', { n: formatCount(entry.missing) }, entry.missing) : ''].filter(Boolean).join(' · ') }}
+          </span>
+        </h2>
+        <div :class="['overflow-auto max-h-[80vh] p-2']">
+          <MatrixTable
+            :grid="entry.grid" :axes="entry.axes" :view="entry.view" :baseline="baseline" :sort="sort"
+            :definitions="matrix.data.value?.scoreDefinitions ?? []" :text-width="textWidth" :room="width"
+          />
+        </div>
+      </section>
+    </div>
   </StateView>
 </template>
diff --git a/packages/ui/client/src/components/ScoreCard.vue b/packages/ui/client/src/components/ScoreCard.vue
index 2de4bd7..fe863fc 100644
--- a/packages/ui/client/src/components/ScoreCard.vue
+++ b/packages/ui/client/src/components/ScoreCard.vue
@@ -10,7 +10,7 @@ import StateBadge from './StateBadge.vue'
  * The standard card of a scored item (a project, a matrix cell, a compared column), laid out the same everywhere:
  *
  * ```
- * 66.1% Pass  ↑2.3            [running]
+ * 66.1% Pass  ↑2.3            [running]   ← state badge, then the `corner` slot
  * completed 96.8%
  * Title
  * meta (run counts, times)
@@ -33,11 +33,20 @@ const props = defineProps<{
   definitions: readonly ScoreDefinition[]
   /** Headline of the item ({@link HeadlineScore}); `null` before any case settled. */
   headline: HeadlineResult | null | undefined
+  /** Leaves the completion rate out of the headline (see `HeadlineScore`'s `hideCompletion`). */
+  hideCompletion?: boolean
   href?: string
   /** Run whose progress shows while `state` is `running`. */
   run?: { lastSeq: number, runKey: string, startedAt?: string }
   /** State of the item's newest run, in the top-right corner. */
   state?: string
+  /**
+   * Takes two rows of the parent grid (the panel, then the tray of the `footer` slot) and shares them with the cards
+   * beside it (CSS subgrid): every panel of a grid row is as tall as the tallest, so their bars line up however many
+   * lines of matrix values each footer wraps to. The parent must be a grid without a row gap (it would open between
+   * the panel and the tray); space the cards with a bottom margin instead.
+   */
+  subgrid?: boolean
   /** Readable name of a task, for a headline that lists each task's primary score. */
   taskLabel?: (taskId: string) => string
   title?: string
@@ -49,7 +58,9 @@ const props = defineProps<{
     :is="props.href ? 'a' : 'div'"
     :href="props.href"
     :class="[
-      'flex flex-col min-w-0 rounded-xl overflow-hidden transition-colors',
+      // `minmax(0, 1fr)`: the one column stays the card's width; an `auto` column grew to the widest nowrap footer value.
+      props.subgrid ? 'grid grid-rows-subgrid row-span-2 grid-cols-[minmax(0,1fr)]' : 'flex flex-col',
+      'min-w-0 rounded-xl overflow-hidden transition-colors',
       'bg-neutral-100/70 dark:bg-neutral-800/60 border-2 border-neutral-200/50 dark:border-neutral-800/40',
       props.href && 'hover:border-primary-500/30 dark:hover:border-primary-400/30',
     ]"
@@ -57,11 +68,13 @@ const props = defineProps<{
   >
     <span :class="['relative flex flex-col gap-2 flex-1 min-w-0 rounded-lg bg-white dark:bg-neutral-900', props.compact ? 'p-3 md:p-3.5' : 'p-4']">
       <span :class="['flex items-start gap-2']">
-        <HeadlineScore :class="['min-w-0']" :result="props.headline" :definitions="props.definitions" size="lg" :task-label="props.taskLabel" data-testid="score-card-score">
+        <HeadlineScore :class="['min-w-0']" :result="props.headline" :definitions="props.definitions" size="lg" :task-label="props.taskLabel" :hide-completion="props.hideCompletion" data-testid="score-card-score">
           <!-- Change from the previous run, a trend line, …: facts about the score itself. -->
           <slot name="score" />
         </HeadlineScore>
         <StateBadge v-if="props.state" :class="['ml-auto shrink-0']" :state="props.state" />
+        <!-- A mark of the item's own in the top-right corner, for example the completion ring of a matrix cell. -->
+        <span v-if="$slots.corner" :class="['shrink-0 flex items-center', !props.state && 'ml-auto']"><slot name="corner" /></span>
       </span>
       <span v-if="props.title || $slots.title" :class="['font-semibold min-w-0 truncate']">
         <slot name="title">{{ props.title }}</slot>
@@ -77,7 +90,7 @@ const props = defineProps<{
         </slot>
       </span>
     </span>
-    <span v-if="$slots.footer" :class="['flex flex-wrap gap-1 px-2 py-1.5']">
+    <span v-if="$slots.footer" :class="['flex flex-wrap content-start gap-1 px-2 py-1.5']">
       <slot name="footer" />
     </span>
   </component>
diff --git a/packages/ui/client/src/i18n/locales/en/matrix.ts b/packages/ui/client/src/i18n/locales/en/matrix.ts
index 4232270..8814f37 100644
--- a/packages/ui/client/src/i18n/locales/en/matrix.ts
+++ b/packages/ui/client/src/i18n/locales/en/matrix.ts
@@ -3,6 +3,30 @@
  * (`ScoreBar.vue`, `GroupBars.vue`, `ParallelSets.vue`).
  */
 export default {
+  averaged: {
+    hint: 'Pool these axes into one cell (repeats of one configuration) · dots: mean score of each value',
+    label: 'Average',
+    members: '{n} {axes}: | {n} {axes}:',
+    none: 'none',
+    spread: 'Gap between its highest and lowest value mean, in points',
+  },
+  baseline: {
+    clear: 'Beyond noise (about 95 %, treating the two cells as independent)',
+    clearAll: 'Compare to nothing',
+    hint: 'Pick a value per axis; an axis left at "each cell\'s own" is not compared · bars: mean score of each value',
+    label: 'Baseline',
+    noise: 'Within noise (about 95 %, treating the two cells as independent)',
+    none: 'none',
+    own: 'each cell\'s own',
+    tag: 'baseline',
+  },
+  detail: {
+    against: 'Against the baseline cell ({baseline})',
+    excluded: 'Not counted in the best mark, the means, or the color scale until it settles',
+    interval: '95 % interval {low}–{high} · n {n}',
+    members: 'Each {axes}',
+    scores: 'Every score',
+  },
   groupBars: {
     caseCount: '{n} case | {n} cases',
     groupBy: 'Group by',
@@ -10,6 +34,22 @@ export default {
     mean: 'mean {score}',
     passRate: 'pass rate',
   },
+  legend: {
+    best: 'best of its row',
+    delta: 'difference from {baseline} · faint: within noise',
+    ring: 'cases with a result / cases expected · amber: no result',
+    scale: 'score, low to high',
+  },
+  margin: {
+    mean: 'mean',
+    meanDelta: 'mean diff.',
+  },
+  mode: {
+    auto: 'Auto',
+    cards: 'Cards',
+    compact: 'Compact',
+    label: 'Cell view',
+  },
   parallelSets: {
     axisHint: 'click to pick · drag title',
     blockTitle: '{value} · {n} case | {value} · {n} cases',
@@ -17,13 +57,19 @@ export default {
     notSelected: '(not selected)',
     ribbonTitle: '{from} → {to} · {n} case | {from} → {to} · {n} cases',
   },
+  ring: {
+    errored: '{scored} of {expected} cases with a result, {errored} without one',
+    label: '{scored} of {expected} cases with a result',
+    running: 'running',
+  },
   scoreBar: {
     label: 'Scores: {summary}',
     part: '{count} at {score}',
   },
+  sort: 'Best first',
   view: {
-    all: 'all',
     caseCount: '{n} case | {n} cases',
+    casesEach: '{n} case each | {n} cases each',
     coverage: {
       full: 'every case',
       none: 'no result',
@@ -34,17 +80,14 @@ export default {
     empty: 'No matrix rows',
     emptyHint: 'Runs without tasks have nothing to show here.',
     hideSuperseded: 'Hide {n} older configuration | Hide {n} older configurations',
+    incomplete: '{n} incomplete',
     intro: 'Newest full run of every combination across {n} run; a partial run or one over other cases never replaces it. | Newest full run of every combination across {n} runs; a partial run or one over other cases never replaces it.',
-    legendFull: 'full run',
-    legendNone: 'no result',
-    legendPartial: 'partial run or other cases',
+    missing: '{n} not run',
     notRun: 'not run',
     partial: '{measured} of {total} cases with a result · no full run yet',
     pointTitle: '{time} · {coverage} ({measured} of {total} cases with a result) · {score} {value} · completed {completion}',
     runCount: '{n} run | {n} runs',
     showSuperseded: 'Show {n} older configuration | Show {n} older configurations',
     sparkline: '{score} of {n} run | {score} of {n} runs',
-    superseded: 'An older configuration: newer runs measured this entry with other eval values',
-    without: 'without {axes}',
   },
 }
diff --git a/packages/ui/client/src/i18n/locales/zh-Hans/matrix.ts b/packages/ui/client/src/i18n/locales/zh-Hans/matrix.ts
index 4bee1ad..1fb449c 100644
--- a/packages/ui/client/src/i18n/locales/zh-Hans/matrix.ts
+++ b/packages/ui/client/src/i18n/locales/zh-Hans/matrix.ts
@@ -1,6 +1,30 @@
 import type en from '../en/matrix'
 
 export default {
+  averaged: {
+    hint: '把这些轴合并成一格（同一配置的重复）· 圆点：每个取值的平均分',
+    label: '平均',
+    members: '{n} 次 {axes}：',
+    none: '无',
+    spread: '最高与最低取值均分之差（百分点）',
+  },
+  baseline: {
+    clear: '超出噪声范围（约 95%，按两格相互独立计算）',
+    clearAll: '不对比',
+    hint: '每个轴可以选一个值；保持「各格自己的值」的轴不参与对比 · 条形：每个取值的平均分',
+    label: '基线',
+    noise: '在噪声范围内（约 95%，按两格相互独立计算）',
+    none: '无',
+    own: '各格自己的值',
+    tag: '基线',
+  },
+  detail: {
+    against: '与基线格（{baseline}）比较',
+    excluded: '结果齐全之前，不计入本行最好、均值和配色范围',
+    interval: '95% 区间 {low}–{high} · n {n}',
+    members: '每个 {axes}',
+    scores: '全部分数',
+  },
   groupBars: {
     caseCount: '{n} 个用例',
     groupBy: '分组依据',
@@ -8,6 +32,22 @@ export default {
     mean: '平均 {score}',
     passRate: '通过率',
   },
+  legend: {
+    best: '本行最好',
+    delta: '与 {baseline} 的差值 · 淡色：在噪声范围内',
+    ring: '有结果的用例 / 应有的用例 · 琥珀色：没有结果',
+    scale: '分数，从低到高',
+  },
+  margin: {
+    mean: '均值',
+    meanDelta: '平均差值',
+  },
+  mode: {
+    auto: '自动',
+    cards: '卡片',
+    compact: '紧凑',
+    label: '单元格视图',
+  },
   parallelSets: {
     axisHint: '点击选择 · 拖动标题',
     blockTitle: '{value} · {n} 个用例',
@@ -15,13 +55,19 @@ export default {
     notSelected: '（未选中）',
     ribbonTitle: '{from} → {to} · {n} 个用例',
   },
+  ring: {
+    errored: '{expected} 个用例中 {scored} 个有结果，{errored} 个没有结果',
+    label: '{expected} 个用例中 {scored} 个有结果',
+    running: '运行中',
+  },
   scoreBar: {
     label: '分数：{summary}',
     part: '{score} 分 {count} 个',
   },
+  sort: '最好的在前',
   view: {
-    all: '全部',
     caseCount: '{n} 个用例',
+    casesEach: '每格 {n} 个用例',
     coverage: {
       full: '全部用例',
       none: '没有结果',
@@ -32,17 +78,14 @@ export default {
     empty: '没有矩阵行',
     emptyHint: '没有任务的运行在这里没有内容可显示。',
     hideSuperseded: '隐藏 {n} 个旧配置',
+    incomplete: '{n} 格不完整',
     intro: '每个组合显示 {n} 次运行中最新的完整运行；部分运行或针对其他用例的运行不会替换它。',
-    legendFull: '完整运行',
-    legendNone: '没有结果',
-    legendPartial: '部分运行或其他用例',
+    missing: '{n} 格未运行',
     notRun: '未运行',
     partial: '{total} 个用例中 {measured} 个有结果 · 还没有完整运行',
     pointTitle: '{time} · {coverage}（{total} 个用例中 {measured} 个有结果）· {score} {value} · 执行成功率 {completion}',
     runCount: '{n} 次运行',
     showSuperseded: '显示 {n} 个旧配置',
     sparkline: '{score}，共 {n} 次运行',
-    superseded: '旧配置：较新的运行用其他评测参数衡量了这个入口',
-    without: '不含 {axes}',
   },
 } satisfies typeof en
diff --git a/packages/ui/client/src/matrixGrid.test.ts b/packages/ui/client/src/matrixGrid.test.ts
new file mode 100644
index 0000000..d48186e
--- /dev/null
+++ b/packages/ui/client/src/matrixGrid.test.ts
@@ -0,0 +1,295 @@
+import type { MatrixCell } from '../../src/shared/contract'
+import type { MatrixAxis } from './matrixGrid'
+
+import { describe, expect, it } from 'vitest'
+
+import { axisMeans, bestRowsFirst, buildGrid, chooseLayout, compareToBaseline, defaultAveraged, isSettled, matrixAxes } from './matrixGrid'
+
+/** A settled matrix cell of `cases` cases, `hits` of them scoring 1 on the primary score. */
+function cell(run: Record<string, string>, { cases = 60, hits = 30, state = 'passed' }: { cases?: number, hits?: number, state?: string } = {}): MatrixCell {
+  const summary = (name: string, sum: number, n: number) => ({ mean: n === 0 ? null : sum / n, n, name, sum, total: n, unscored: {} })
+  const counts = { errored: 0, failed: 0, passed: cases, requeued: 0, running: 0, skipped: 0, timeout: 0, total: cases }
+  return {
+    caseCount: cases,
+    entryId: 'evals/reply-parent',
+    eval: {},
+    evalRowId: 'default',
+    history: [],
+    latest: {
+      attemptId: 'attempt-1',
+      caseScores: Array.from({ length: cases }, (_, index) => (index < hits ? 1 : 0)),
+      caseTotal: cases,
+      counts,
+      coverage: 'full',
+      experimentId: 'matrix-v1',
+      runKey: `run-${Object.values(run).join('-')}`,
+      scoring: { completion: summary('completion', cases, cases), passed: summary('passed', cases, cases), primary: 'accuracy', scores: [summary('accuracy', hits, cases)] },
+      state,
+      taskId: 'task',
+    },
+    run,
+    runRowId: Object.entries(run).map(([axis, value]) => `${axis}=${value}`).join('&'),
+    superseded: false,
+  }
+}
+
+const axesOf = (names: Record<string, string[]>) => ({ axes: Object.entries(names).map(([name, values]) => ({ kind: 'run' as const, name, values })) })
+/** About 7 px per character, like 12 px Quicksand. */
+const textWidth = (text: string) => text.length * 7
+
+describe('matrixAxes', () => {
+  /**
+   * @example
+   * expect(matrixAxes(cells, response).shared).toEqual([{ name: 'listener', value: 'luna' }])
+   */
+  it('says an axis every cell shares once and lays out the axes that vary', () => {
+    const cells = [cell({ listener: 'luna', model: 'a' }), cell({ listener: 'luna', model: 'b' })]
+
+    const { shared, varying } = matrixAxes(cells, axesOf({ listener: ['luna'], model: ['a', 'b'] }))
+
+    expect(shared).toEqual([{ name: 'listener', value: 'luna' }])
+    expect(varying).toEqual([{ key: 'run.model', name: 'model', values: ['a', 'b'] }])
+  })
+
+  /**
+   * @example
+   * expect(varying[0].values).toEqual(['1', ''])
+   */
+  it('keeps cells that lack an axis at the empty value instead of dropping them', () => {
+    const cells = [cell({ model: 'a', window: '1' }), cell({ model: 'a' })]
+
+    const { varying } = matrixAxes(cells, axesOf({ model: ['a'], window: ['1'] }))
+
+    expect(varying).toEqual([{ key: 'run.window', name: 'window', values: ['1', ''] }])
+  })
+})
+
+describe('chooseLayout', () => {
+  const axes: MatrixAxis[] = [
+    { key: 'run.method', name: 'method', values: ['decide', 'text'] },
+    { key: 'run.model', name: 'model', values: ['deepseek-v4-flash', 'gemini-3.1-flash-lite', 'qwen3.5-9b'] },
+    { key: 'run.view', name: 'view', values: ['lookahead3', 'online'] },
+    { key: 'run.window', name: 'window', values: ['5', '15', '30'] },
+  ]
+
+  /**
+   * @example
+   * expect(chooseLayout(axes, [], { available: 960, cellWidth: 64, textWidth }).layout.rows).toEqual(['run.model', 'run.method'])
+   */
+  it('fills the width with columns, near square, and keeps long labels down the side', () => {
+    const { fits, layout } = chooseLayout(axes, [], { available: 960, cellWidth: 64, textWidth })
+
+    expect(fits).toBe(true)
+    expect(layout.rows).toEqual(['run.model', 'run.method'])
+    expect(layout.columns).toEqual(['run.view', 'run.window'])
+  })
+
+  /**
+   * @example
+   * expect(chooseLayout(axes, [], { available: 320, cellWidth: 232, textWidth }).fits).toBe(false)
+   */
+  it('falls back to the narrowest layout when nothing fits', () => {
+    const { fits, layout } = chooseLayout(axes, [], { available: 320, cellWidth: 232, textWidth })
+
+    expect(fits).toBe(false)
+    expect(layout.columns).toHaveLength(1)
+  })
+
+  /**
+   * @example
+   * expect(chooseLayout(axes, ['run.seed'], space).layout.averaged).toEqual(['run.seed'])
+   */
+  it('leaves averaged axes out of the rows and columns', () => {
+    const withSeed = [...axes, { key: 'run.seed', name: 'seed', values: ['1', '2', '3'] }]
+
+    const { layout } = chooseLayout(withSeed, defaultAveraged(withSeed), { available: 960, cellWidth: 64, textWidth })
+
+    expect(layout.averaged).toEqual(['run.seed'])
+    expect([...layout.rows, ...layout.columns]).not.toContain('run.seed')
+  })
+})
+
+describe('buildGrid', () => {
+  const axes: MatrixAxis[] = [
+    { key: 'run.model', name: 'model', values: ['a', 'b'] },
+    { key: 'run.window', name: 'window', values: ['5', '30'] },
+  ]
+  const layout = { averaged: [], columns: ['run.window'], rows: ['run.model'] }
+
+  // ROOT CAUSE:
+  //
+  // The newest run of one cell re-ran a single case. The matrix API counted that run as the cell's full run
+  // (`caseCount: 1`), so the old viewer showed "100.0%" and "completed 100.0%" next to cells of 60 cases.
+  //
+  // We fixed the display by measuring each cell against the usual case count of its entry: the cell reads as 1 of 60
+  // cases, carries a completion ring, and stays out of the best mark and the means.
+  /**
+   * @example
+   * expect(grid.cells[1][1].completion).toEqual({ errored: 0, expected: 60, failed: 0, running: false, scored: 1 })
+   */
+  it('measures a cell against the usual case count of its entry, so a one-case rerun reads as 1 of 60', () => {
+    const cells = [cell({ model: 'a', window: '5' }), cell({ model: 'a', window: '30' }), cell({ model: 'b', window: '5' }), cell({ model: 'b', window: '30' }, { cases: 1, hits: 1 })]
+
+    const grid = buildGrid(cells, axes, layout)
+
+    expect(grid.cells[0]![0]!.completion).toBeUndefined()
+    expect(grid.cells[1]![1]!.value).toBe(1)
+    expect(grid.cells[1]![1]!.completion).toEqual({ errored: 0, expected: 60, failed: 0, running: false, scored: 1 })
+    expect(isSettled(grid.cells[1]![1])).toBe(false)
+    expect(isSettled(grid.cells[0]![0])).toBe(true)
+  })
+
+  /**
+   * @example
+   * expect(grid.cells[0][1]).toBeUndefined()
+   */
+  it('keeps a combination that never ran as a gap', () => {
+    const grid = buildGrid([cell({ model: 'a', window: '5' }), cell({ model: 'b', window: '30' })], axes, layout)
+
+    expect(grid.rows).toEqual([{ 'run.model': 'a' }, { 'run.model': 'b' }])
+    expect(grid.columns).toEqual([{ 'run.window': '5' }, { 'run.window': '30' }])
+    expect(grid.cells[0]![1]).toBeUndefined()
+    expect(grid.cells[1]![0]).toBeUndefined()
+  })
+
+  /**
+   * @example
+   * expect(grid.cells[0][0].value).toBe(0.5)
+   */
+  it('pools the cells of an averaged axis, and marks a missing repeat as incomplete', () => {
+    const withSeed = [...axes, { key: 'run.seed', name: 'seed', values: ['1', '2'] }]
+    const cells = [
+      cell({ model: 'a', seed: '1', window: '5' }, { hits: 20 }),
+      cell({ model: 'a', seed: '2', window: '5' }, { hits: 40 }),
+      cell({ model: 'a', seed: '1', window: '30' }, { hits: 30 }),
+    ]
+
+    const grid = buildGrid(cells, withSeed, { averaged: ['run.seed'], columns: ['run.window'], rows: ['run.model'] })
+
+    expect(grid.cells[0]![0]!.members).toHaveLength(2)
+    expect(grid.cells[0]![0]!.value).toBe(0.5)
+    expect(grid.cells[0]![0]!.scoring.scores[0]!.n).toBe(120)
+    expect(grid.cells[0]![0]!.completion).toBeUndefined()
+    expect(grid.cells[0]![1]!.completion).toEqual({ errored: 0, expected: 120, failed: 0, running: false, scored: 60 })
+  })
+})
+
+describe('compareToBaseline', () => {
+  const axes: MatrixAxis[] = [
+    { key: 'run.method', name: 'method', values: ['decide', 'text'] },
+    { key: 'run.model', name: 'model', values: ['a', 'b'] },
+  ]
+  const layout = { averaged: [], columns: ['run.method'], rows: ['run.model'] }
+
+  /**
+   * @example
+   * expect(comparisons[0][0]).toMatchObject({ clear: true, delta: -0.5 })
+   */
+  it('takes each cell against its twin with the baseline value', () => {
+    const cells = [
+      cell({ method: 'decide', model: 'a' }, { hits: 10 }),
+      cell({ method: 'text', model: 'a' }, { hits: 40 }),
+      cell({ method: 'decide', model: 'b' }, { hits: 31 }),
+      cell({ method: 'text', model: 'b' }, { hits: 30 }),
+    ]
+    const grid = buildGrid(cells, axes, layout)
+
+    const comparisons = compareToBaseline(grid, { 'run.method': 'text' })
+
+    expect(comparisons[0]![1]).toBe('base')
+    expect(comparisons[0]![0]).toMatchObject({ clear: true, delta: -0.5 })
+    expect(comparisons[1]![0]).toMatchObject({ clear: false })
+    expect((comparisons[1]![0] as { delta: number }).delta).toBeCloseTo(1 / 60)
+  })
+
+  /**
+   * @example
+   * expect(comparisons[0][0]).toBeUndefined()
+   */
+  it('gives no difference when the baseline cell is incomplete', () => {
+    const cells = [cell({ method: 'decide', model: 'a' }), cell({ method: 'text', model: 'a' }, { cases: 1, hits: 1 }), cell({ method: 'text', model: 'b' })]
+    const grid = buildGrid(cells, axes, layout)
+
+    const comparisons = compareToBaseline(grid, { 'run.method': 'text' })
+
+    expect(comparisons[0]![0]).toBeUndefined()
+  })
+
+  /**
+   * @example
+   * expect(compareToBaseline(grid, { 'run.method': 'text', 'run.model': 'b' })[0][0]).toMatchObject({ delta: -0.5 })
+   */
+  it('fixes several axes at once, and compares every cell to one configuration when all are fixed', () => {
+    const cells = [
+      cell({ method: 'decide', model: 'a' }, { hits: 10 }),
+      cell({ method: 'text', model: 'a' }, { hits: 20 }),
+      cell({ method: 'decide', model: 'b' }, { hits: 30 }),
+      cell({ method: 'text', model: 'b' }, { hits: 40 }),
+    ]
+    const grid = buildGrid(cells, axes, layout)
+
+    const comparisons = compareToBaseline(grid, { 'run.method': 'text', 'run.model': 'b' })
+
+    expect(comparisons[1]![1]).toBe('base')
+    expect((comparisons[0]![0] as { delta: number }).delta).toBeCloseTo(-0.5)
+    expect((comparisons[0]![1] as { delta: number }).delta).toBeCloseTo(-20 / 60)
+    expect((comparisons[1]![0] as { delta: number }).delta).toBeCloseTo(-10 / 60)
+  })
+
+  /**
+   * @example
+   * expect(compareToBaseline(grid, { 'run.method': 'text', 'run.view': 'online' })[0][1]).toBe('base')
+   */
+  it('ignores baseline values of axes the grid does not lay out', () => {
+    const grid = buildGrid([cell({ method: 'decide', model: 'a' }), cell({ method: 'text', model: 'a' })], axes, layout)
+
+    const comparisons = compareToBaseline(grid, { 'run.method': 'text', 'run.view': 'online' })
+
+    expect(comparisons[0]![1]).toBe('base')
+    expect(comparisons[0]![0]).toMatchObject({ delta: 0 })
+  })
+})
+
+describe('axisMeans', () => {
+  /**
+   * @example
+   * expect(axisMeans(cells, axes).get('run.window')!.get('30')).toBe(0.5)
+   */
+  it('averages each value over settled cells and leaves out a one-case rerun', () => {
+    const axes: MatrixAxis[] = [
+      { key: 'run.model', name: 'model', values: ['a', 'b'] },
+      { key: 'run.window', name: 'window', values: ['5', '30'] },
+    ]
+    const cells = [
+      cell({ model: 'a', window: '5' }, { hits: 12 }),
+      cell({ model: 'b', window: '5' }, { hits: 24 }),
+      cell({ model: 'a', window: '30' }, { hits: 30 }),
+      cell({ model: 'b', window: '30' }, { cases: 1, hits: 1 }),
+    ]
+
+    const means = axisMeans(cells, axes)
+
+    expect(means.get('run.window')!.get('5')).toBeCloseTo(0.3)
+    expect(means.get('run.window')!.get('30')).toBe(0.5)
+    expect(means.get('run.model')!.get('b')).toBe(0.4)
+  })
+})
+
+describe('bestRowsFirst', () => {
+  /**
+   * @example
+   * expect(bestRowsFirst(grid, [0.2, 0.6, 0.4, 0.1])).toEqual([1, 0, 2, 3])
+   */
+  it('orders outer groups by their mean, then rows inside a group by theirs', () => {
+    const axes: MatrixAxis[] = [
+      { key: 'run.model', name: 'model', values: ['a', 'b'] },
+      { key: 'run.method', name: 'method', values: ['decide', 'text'] },
+      { key: 'run.window', name: 'window', values: ['5'] },
+    ]
+    const cells = ['a', 'b'].flatMap(model => ['decide', 'text'].map(method => cell({ method, model, window: '5' })))
+    const grid = buildGrid(cells, axes, { averaged: [], columns: ['run.window'], rows: ['run.model', 'run.method'] })
+
+    expect(bestRowsFirst(grid, [0.2, 0.6, 0.4, 0.1])).toEqual([1, 0, 2, 3])
+    expect(bestRowsFirst(grid, [0.1, 0.1, 0.5, 0.4])).toEqual([2, 3, 0, 1])
+  })
+})
diff --git a/packages/ui/client/src/matrixGrid.ts b/packages/ui/client/src/matrixGrid.ts
new file mode 100644
index 0000000..4f160e9
--- /dev/null
+++ b/packages/ui/client/src/matrixGrid.ts
@@ -0,0 +1,399 @@
+import type { CaseScoring, MatrixCell, MatrixResponse, ScoreSummary } from '../../src/shared/contract'
+
+import { headlineOf, headlineValue } from './scores'
+
+/**
+ * Cases a cell has settled out of the cases it should have: the ring of a card always, and the mark of an incomplete
+ * compact cell (`GridCell.completion`).
+ */
+export interface CellCompletion {
+  /** Cases that ended without a result (`errored`, `timeout`). */
+  errored: number
+  /** Cases the cell should have: the entry's usual case count, times the averaged repeats. */
+  expected: number
+  /** Cases with a wrong result (a failed assertion), part of `scored`. */
+  failed: number
+  running: boolean
+  /** Cases with a result (passed or failed). */
+  scored: number
+}
+
+/** One shown cell: a matrix cell, or the pool of the cells that differ only in averaged axes. */
+export interface GridCell {
+  /** Primary score of every case of every member, for the spread under the mean. */
+  caseScores: (null | number)[]
+  /** Present when the cell is incomplete; such a cell stays out of the best mark, the means, and the color scale. */
+  completion?: CellCompletion
+  /** Matrix cells behind this one, in axis order: one, or one per averaged value that ran. */
+  members: MatrixCell[]
+  /** Cases settled out of the cases expected, complete or not: the ring of the cell's card. */
+  progress: CellCompletion
+  /** Scores of the members pooled (sums and counts added), so the headline reads the same as one run's. */
+  scoring: CaseScoring
+  /** Standard error of `value` from the spread of the case scores; `null` with fewer than two cases. */
+  se: null | number
+  /** Headline value (primary score mean, or the passed share without one); `null` without a result. */
+  value: null | number
+}
+
+/**
+ * One axis of an entry's matrix: a run-matrix or eval-matrix axis with the values its cells have, in API order.
+ * A cell without the axis (it ran before the axis was added, or after it was dropped) has the value `''`.
+ */
+export interface MatrixAxis {
+  /** `run.<name>` or `eval.<name>`, so equal names of the two kinds cannot collide. */
+  key: string
+  name: string
+  values: string[]
+}
+
+/** A grid of one entry laid out by a {@link MatrixLayout}. */
+export interface MatrixGrid {
+  /** `cells[row][column]`; `undefined` where the combination never ran. */
+  cells: (GridCell | undefined)[][]
+  columns: Record<string, string>[]
+  layout: MatrixLayout
+  rows: Record<string, string>[]
+}
+
+/** Where the varying axes of a grid go; every axis key is in exactly one list. */
+export interface MatrixLayout {
+  /** Axes pooled into one cell (repeats such as `seed`); the cell shows the pooled score of every value. */
+  averaged: string[]
+  /** Axes across the top, outermost header level first. */
+  columns: string[]
+  /** Axes down the side, outermost group first. */
+  rows: string[]
+}
+
+/** Axes whose name says they repeat one configuration; they are averaged by default instead of laid out. */
+const REPEAT_AXIS = /^(?:attempt|repeat|replicate|run|sample|seed|trial)s?$/
+
+/**
+ * The configuration cells are compared to, as a value for some axes (axis key → value). An axis left out keeps the
+ * cell's own value: `{ 'run.method': 'text' }` compares every cell to its `text` twin, and a value for every axis
+ * compares every cell to one fixed configuration.
+ */
+export type Baseline = Readonly<Record<string, string>>
+
+/** A cell measured against its baseline cell (the cell with the baseline's values and its own for the other axes). */
+export interface CellComparison {
+  base: GridCell
+  /** Whether the gap is beyond noise ({@link differs}). */
+  clear: boolean
+  /** `value - base.value`. */
+  delta: number
+}
+
+/** Sizes the layout chooser needs, in pixels. */
+export interface LayoutSpace {
+  /** Width of the table's scroll box. */
+  available: number
+  /** Width of one cell. */
+  cellWidth: number
+  /** Width of a column's header text (an axis value). */
+  textWidth: (text: string) => number
+}
+
+/**
+ * Mean headline of every value of every axis over an entry's settled cells: the main effect of each value, as the
+ * table's margins show it, before any averaging or layout.
+ *
+ * Use when:
+ * - a picker of axes or values says how each one scores (the baseline and average menus)
+ *
+ * Returns:
+ * - axis key → value → mean; `null` for a value without a settled cell
+ */
+export function axisMeans(cells: readonly MatrixCell[], axes: readonly MatrixAxis[]): Map<string, Map<string, null | number>> {
+  const typical = typicalCaseCount(cells)
+  const settled = cells
+    .map(cell => ({ coordinates: cellCoordinates(cell), grid: gridCell([cell], typical, 1) }))
+    .filter((item): item is { coordinates: Record<string, string>, grid: GridCell & { value: number } } => isSettled(item.grid))
+  return new Map(axes.map(axis => [axis.key, new Map(axis.values.map(value => [
+    value,
+    meanOf(settled.filter(item => (item.coordinates[axis.key] ?? '') === value).map(item => item.grid.value)),
+  ]))]))
+}
+
+/**
+ * Row order that puts the best rows first: outer row groups by their mean, rows inside a group by theirs. Rows
+ * without a value go last.
+ */
+export function bestRowsFirst(grid: MatrixGrid, rowValues: readonly (null | number)[]): number[] {
+  const outer = grid.layout.rows[0]
+  const order = grid.rows.map((_, index) => index)
+  const groupMean = new Map<string, null | number>()
+  if (outer != null && grid.layout.rows.length > 1) {
+    for (const value of new Set(grid.rows.map(row => row[outer] ?? '')))
+      groupMean.set(value, meanOf(order.filter(index => grid.rows[index]![outer] === value).map(index => rowValues[index]).filter(value => value != null)))
+  }
+  const rank = (value: null | number | undefined) => value ?? Number.NEGATIVE_INFINITY
+  return order.toSorted((a, b) => {
+    const group = outer == null || grid.layout.rows.length < 2 ? 0 : rank(groupMean.get(grid.rows[b]![outer]!)) - rank(groupMean.get(grid.rows[a]![outer]!))
+    return group || rank(rowValues[b]) - rank(rowValues[a]) || a - b
+  })
+}
+
+/**
+ * Lays an entry's cells out as a grid.
+ *
+ * Use when:
+ * - the matrix view shows one entry, after its layout is chosen
+ *
+ * Expects:
+ * - `layout` covers every varying axis of `axes`; cells whose coordinates miss an axis sit at its `''` value
+ *
+ * Returns:
+ * - rows and columns as every combination of their axes' values (empty combinations stay as gaps, so the grid keeps
+ *   its structure); a cell pools the cells that differ only in averaged axes
+ */
+export function buildGrid(cells: readonly MatrixCell[], axes: readonly MatrixAxis[], layout: MatrixLayout): MatrixGrid {
+  const byKey = new Map(axes.map(axis => [axis.key, axis]))
+  const combinations = (keys: readonly string[]) => keys.reduce<Record<string, string>[]>(
+    (list, key) => list.flatMap(combination => byKey.get(key)!.values.map(value => ({ ...combination, [key]: value }))),
+    [{}],
+  )
+  const laidOut = [...layout.rows, ...layout.columns]
+  const slot = (coordinates: Record<string, string>) => laidOut.map(key => coordinates[key] ?? '').join('\u0000')
+  const groups = new Map<string, MatrixCell[]>()
+  for (const cell of cells) {
+    const key = slot(cellCoordinates(cell))
+    groups.set(key, [...(groups.get(key) ?? []), cell])
+  }
+  const expectedMembers = layout.averaged.reduce((count, key) => count * (byKey.get(key)?.values.length ?? 1), 1)
+  const typical = typicalCaseCount(cells)
+  const rows = combinations(layout.rows)
+  const columns = combinations(layout.columns)
+  return {
+    cells: rows.map(row => columns.map((column) => {
+      const members = groups.get(slot({ ...row, ...column }))
+      return members == null ? undefined : gridCell(members, typical, expectedMembers)
+    })),
+    columns,
+    layout,
+    rows,
+  }
+}
+
+/** Values of one cell along every axis, `run.` and `eval.` prefixed. */
+export function cellCoordinates(cell: MatrixCell): Record<string, string> {
+  return {
+    ...Object.fromEntries(Object.entries(cell.run).map(([axis, value]) => [`run.${axis}`, value])),
+    ...Object.fromEntries(Object.entries(cell.eval).map(([axis, value]) => [`eval.${axis}`, value])),
+  }
+}
+
+/**
+ * Lays the axes out so the columns fill one screen width and the rows run long: vertical scrolling is cheap,
+ * horizontal scrolling loses the row labels.
+ *
+ * Use when:
+ * - a grid is shown with an automatic layout, for its cell size and the room it has
+ *
+ * Expects:
+ * - `averaged` keys are left out of the layout
+ *
+ * Returns:
+ * - whether the chosen layout fits the width, and the layout: among the column sets that fit, the one nearest 1.2 rows
+ *   per column (a little taller than square); without one
+ *   that fits (a phone), the narrowest. Header levels go from the axis with the fewest values outward, row
+ *   groups from the one with the most.
+ */
+export function chooseLayout(axes: readonly MatrixAxis[], averaged: readonly string[], space: LayoutSpace): { fits: boolean, layout: MatrixLayout } {
+  const free = axes.filter(axis => !averaged.includes(axis.key))
+  const product = (list: readonly MatrixAxis[]) => list.reduce((count, axis) => count * axis.values.length, 1)
+  const labelOf = (value: string) => value === '' ? '—' : value
+  const widest = (axis: MatrixAxis) => Math.max(...axis.values.map(value => space.textWidth(labelOf(value))))
+  // NOTICE: the row header is about as wide as its widest value plus the cell padding; 24 px matches the `th` padding.
+  const rowWidth = (list: readonly MatrixAxis[]) => list.reduce((width, axis) => width + widest(axis) + 24, 0)
+  let best: undefined | { columns: MatrixAxis[], fits: boolean, rows: MatrixAxis[], score: number }
+  // Every split of the axes into rows and columns (both may not be empty unless there is a single axis).
+  for (let mask = 1; mask < 2 ** free.length; mask++) {
+    const columns = free.filter((_, index) => mask & (2 ** index))
+    const rows = free.filter((_, index) => !(mask & (2 ** index)))
+    if (rows.length === 0 && free.length > 1)
+      continue
+    const inner = columns.toSorted((a, b) => a.values.length - b.values.length).at(-1)!
+    const columnWidth = Math.max(space.cellWidth, widest(inner) + 12)
+    const used = product(columns) * columnWidth + rowWidth(rows)
+    const fits = used <= space.available
+    // Between equally shaped layouts, the narrower one wins: long labels (model names) then go down the side, where
+    // they cost one header column instead of widening every column.
+    const score = fits ? 1000 - Math.abs(Math.log(product(rows) / product(columns)) - Math.log(1.2)) * 100 - used / space.available * 20 : -used
+    if (best == null || score > best.score)
+      best = { columns, fits, rows, score }
+  }
+  return {
+    // No axis to lay out (one cell, or everything averaged) fits anywhere.
+    fits: best?.fits ?? true,
+    layout: {
+      averaged: [...averaged],
+      columns: (best?.columns ?? free).toSorted((a, b) => a.values.length - b.values.length).map(axis => axis.key),
+      rows: (best?.rows ?? []).toSorted((a, b) => b.values.length - a.values.length).map(axis => axis.key),
+    },
+  }
+}
+
+/**
+ * Compares every cell of a grid to its baseline cell: the cell with the baseline's values on the baseline axes and the
+ * cell's own values on the others.
+ *
+ * Use when:
+ * - the reader picks a baseline (`method = text`, or `method = text` and `view = online`) to see what every other
+ *   value changes
+ *
+ * Expects:
+ * - `baseline` names axes laid out in the grid; other axes are ignored
+ *
+ * Returns:
+ * - `'base'` for the baseline's own cells; a comparison when both cells settled; `undefined` otherwise (no pair)
+ */
+export function compareToBaseline(grid: MatrixGrid, baseline: Baseline): ('base' | CellComparison | undefined)[][] {
+  const keyOf = (coordinates: Record<string, string>) => [...grid.layout.rows, ...grid.layout.columns].map(key => coordinates[key] ?? '').join('\u0000')
+  const index = new Map<string, GridCell | undefined>()
+  grid.rows.forEach((row, r) => grid.columns.forEach((column, c) => index.set(keyOf({ ...row, ...column }), grid.cells[r]![c])))
+  const laidOut = new Set([...grid.layout.rows, ...grid.layout.columns])
+  const fixed = Object.fromEntries(Object.entries(baseline).filter(([key]) => laidOut.has(key)))
+  return grid.rows.map((row, r) => grid.columns.map((column, c) => {
+    const coordinates = { ...row, ...column }
+    if (Object.entries(fixed).every(([key, value]) => coordinates[key] === value))
+      return 'base'
+    const cell = grid.cells[r]![c]
+    const base = index.get(keyOf({ ...coordinates, ...fixed }))
+    if (!isSettled(cell) || !isSettled(base))
+      return undefined
+    return { base, clear: differs(cell, base), delta: cell.value - base.value }
+  }))
+}
+
+/** Axes averaged by default: the varying axes named like a repeat (`seed`, `repeat`, …). */
+export function defaultAveraged(axes: readonly MatrixAxis[]): string[] {
+  return axes.filter(axis => REPEAT_AXIS.test(axis.name)).map(axis => axis.key)
+}
+
+/**
+ * Whether two cells' headlines differ beyond noise: their gap exceeds 1.96 standard errors of the difference (about
+ * 95 %, a two-sided z test).
+ *
+ * NOTICE:
+ * The test treats the two cells as independent samples. Cells of one entry usually ran the same cases, where a paired
+ * test (per-case differences) is much tighter; it needs case identities, which `GET /api/matrix` does not send yet.
+ * Removal condition: the matrix API reports paired statistics, and this compares through them.
+ */
+export function differs(a: GridCell, b: GridCell): boolean {
+  if (a.value == null || b.value == null || a.se == null || b.se == null)
+    return false
+  const se = Math.sqrt(a.se ** 2 + b.se ** 2)
+  return se === 0 ? a.value !== b.value : Math.abs(a.value - b.value) > 1.96 * se
+}
+
+/**
+ * Whether a cell counts toward the best mark, the means, and the color scale: every case it should have ended (with a
+ * result or without one) and nothing still runs. A cell with errored cases still counts; its ring says how many.
+ */
+export function isSettled(cell: GridCell | undefined): cell is GridCell & { value: number } {
+  if (cell == null || cell.value == null)
+    return false
+  const completion = cell.completion
+  return completion == null || (!completion.running && completion.scored + completion.errored >= completion.expected)
+}
+
+/**
+ * Axes of an entry's cells split into the ones that vary and the ones every cell shares.
+ *
+ * Use when:
+ * - a grid is built for one entry: varying axes are laid out, shared ones are said once above the table
+ *
+ * Returns:
+ * - `varying` in API axis order with values in API order; `shared` as `{ name, value }` for the title
+ */
+export function matrixAxes(cells: readonly MatrixCell[], response: Pick<MatrixResponse, 'axes'>): { shared: { name: string, value: string }[], varying: MatrixAxis[] } {
+  const order = response.axes.map(axis => ({ key: `${axis.kind}.${axis.name}`, name: axis.name, values: axis.values }))
+  const coordinates = cells.map(cellCoordinates)
+  const shared: { name: string, value: string }[] = []
+  const varying: MatrixAxis[] = []
+  for (const axis of order) {
+    const seen = new Set(coordinates.map(coordinate => coordinate[axis.key] ?? ''))
+    if (seen.size === 1 && seen.has(''))
+      continue
+    const values = [...axis.values.filter(value => seen.has(value)), ...(seen.has('') ? [''] : [])]
+    if (values.length === 1)
+      shared.push({ name: axis.name, value: values[0]! })
+    else
+      varying.push({ key: axis.key, name: axis.name, values })
+  }
+  return { shared, varying }
+}
+
+/** Mean of the values, `null` for none. */
+export function meanOf(values: readonly number[]): null | number {
+  return values.length === 0 ? null : values.reduce((total, value) => total + value, 0) / values.length
+}
+
+/** The usual case count of an entry's cells (the most common `caseCount`): what a complete cell has. */
+export function typicalCaseCount(cells: readonly MatrixCell[]): number {
+  const counts = new Map<number, number>()
+  for (const cell of cells)
+    counts.set(cell.caseCount, (counts.get(cell.caseCount) ?? 0) + 1)
+  return [...counts.entries()].toSorted((a, b) => b[1] - a[1] || b[0] - a[0])[0]?.[0] ?? 0
+}
+
+function gridCell(members: MatrixCell[], typical: number, expectedMembers: number): GridCell {
+  const scoring = members.length === 1 ? members[0]!.latest.scoring : poolScoring(members.map(member => member.latest.scoring))
+  const caseScores = members.flatMap(member => member.latest.caseScores)
+  const value = headlineValue(headlineOf(scoring))
+  const { incomplete, progress } = progressOf(members, typical, expectedMembers)
+  return { caseScores, completion: incomplete ? progress : undefined, members, progress, scoring, se: standardError(caseScores, value, scoring), value }
+}
+
+/** Adds up score summaries of the same names (`mean` recomputed from the sums). */
+function poolScoring(list: readonly CaseScoring[]): CaseScoring {
+  const pool = (summaries: ScoreSummary[]): ScoreSummary => {
+    const n = summaries.reduce((total, summary) => total + summary.n, 0)
+    const sum = summaries.reduce((total, summary) => total + summary.sum, 0)
+    const unscored: Record<string, number> = {}
+    for (const summary of summaries) {
+      for (const [reason, count] of Object.entries(summary.unscored))
+        unscored[reason] = (unscored[reason] ?? 0) + count
+    }
+    return { mean: n === 0 ? null : sum / n, n, name: summaries[0]!.name, sum, total: summaries.reduce((total, summary) => total + summary.total, 0), unscored }
+  }
+  const names = [...new Set(list.flatMap(scoring => scoring.scores.map(summary => summary.name)))]
+  return {
+    completion: pool(list.map(scoring => scoring.completion)),
+    passed: pool(list.map(scoring => scoring.passed)),
+    primary: list[0]!.primary,
+    scores: names.map(name => pool(list.flatMap(scoring => scoring.scores.filter(summary => summary.name === name)))),
+  }
+}
+
+/**
+ * Progress of a cell against what a complete cell of its entry has, and whether it falls short. A rerun of one case
+ * therefore reads as 1 of 60 instead of 1 of 1, and an averaged cell missing one repeat as 2 of 3 repeats' cases.
+ */
+function progressOf(members: readonly MatrixCell[], typical: number, expectedMembers: number): { incomplete: boolean, progress: CellCompletion } {
+  const sum = (pick: (member: MatrixCell) => number) => members.reduce((total, member) => total + pick(member), 0)
+  const failed = sum(member => member.latest.counts.failed)
+  const scored = sum(member => member.latest.counts.passed) + failed
+  const errored = sum(member => member.latest.counts.errored + member.latest.counts.timeout)
+  const expected = Math.max(typical * expectedMembers, sum(member => Math.max(member.caseCount, member.latest.caseTotal ?? 0)))
+  const running = members.some(member => member.latest.state === 'running' || member.latest.state === 'queued')
+  const partial = members.some(member => member.latest.coverage === 'partial' || member.latest.coverage === 'none')
+  return { incomplete: scored < expected || running || partial, progress: { errored, expected, failed, running, scored } }
+}
+
+/**
+ * Standard error of a cell's headline: the sample standard deviation of its case scores over √n. Without case scores
+ * (a headline of passed cases), the binomial error of the passed share.
+ */
+function standardError(caseScores: readonly (null | number)[], value: null | number, scoring: CaseScoring): null | number {
+  const values = caseScores.filter((score): score is number => score != null && Number.isFinite(score))
+  if (values.length >= 2) {
+    const mean = values.reduce((total, score) => total + score, 0) / values.length
+    const variance = values.reduce((total, score) => total + (score - mean) ** 2, 0) / (values.length - 1)
+    return Math.sqrt(variance / values.length)
+  }
+  const n = scoring.passed.n
+  return value == null || scoring.primary != null || n < 2 ? null : Math.sqrt(value * (1 - value) / n)
+}
diff --git a/packages/ui/client/src/pages/ComparePage.vue b/packages/ui/client/src/pages/ComparePage.vue
index a1afad4..1017e52 100644
--- a/packages/ui/client/src/pages/ComparePage.vue
+++ b/packages/ui/client/src/pages/ComparePage.vue
@@ -216,7 +216,8 @@ const position = computed(() => ({ experiment: query.value.experiment, project:
         :class="['btn text-xs py-0.5', item.id === entry && 'btn-active']"
       >{{ t('compare.result.entryRows', { entry: item.id.split('/').at(-1), n: item.count }, item.count) }}</a>
     </div>
-    <section :class="['grid gap-3 mb-4']" :style="{ gridTemplateColumns: `repeat(auto-fill, minmax(min(240px, 100%), 1fr))` }">
+    <!-- No row gap: each card spans two subgrid rows (panel, tray) and carries its own bottom margin. -->
+    <section :class="['grid gap-x-3 mb-1']" :style="{ gridTemplateColumns: `repeat(auto-fill, minmax(min(240px, 100%), 1fr))` }">
       <ScoreCard
         v-for="column in result?.columns"
         :key="column.id"
@@ -226,6 +227,7 @@ const position = computed(() => ({ experiment: query.value.experiment, project:
         :state="column.runs.at(-1)?.state"
         :counts="column.runs.at(-1)?.counts"
         :title="columnLabel(column)"
+        subgrid :class="['mb-3']"
       >
         <template v-for="run in column.runs.slice(-1)" :key="run.runKey">
           <span v-if="view !== 'matrix'" :title="run.runKey">{{ runLabel(run) }}</span>
diff --git a/packages/ui/client/src/pages/HomePage.vue b/packages/ui/client/src/pages/HomePage.vue
index 24f1a10..cd7281c 100644
--- a/packages/ui/client/src/pages/HomePage.vue
+++ b/packages/ui/client/src/pages/HomePage.vue
@@ -58,7 +58,8 @@ const sections = computed(() => workspaces.value.map(workspace => ({ id: workspa
         <span :class="[levelIcons.workspace, 'muted']" aria-hidden="true" />
         <a :href="href({ name: 'scope', workspace: section.id })" :class="['link']">{{ section.id }}</a>
       </h2>
-      <div :class="['grid gap-3']" style="grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr))">
+      <!-- No row gap: each card spans two subgrid rows (panel, tray) and carries its own bottom margin. -->
+      <div :class="['grid gap-x-3']" style="grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr))">
         <ScoreCard
           v-for="project in section.projects"
           :key="project.id"
@@ -68,6 +69,7 @@ const sections = computed(() => workspaces.value.map(workspace => ({ id: workspa
           :state="project.latest.state"
           :counts="project.latest.counts"
           :run="project.latest"
+          subgrid :class="['mb-3']"
           data-testid="project-card"
         >
           <template #title>
diff --git a/packages/ui/client/src/styles.css b/packages/ui/client/src/styles.css
index 054f111..c858ac5 100644
--- a/packages/ui/client/src/styles.css
+++ b/packages/ui/client/src/styles.css
@@ -40,6 +40,8 @@
   --seq-3: oklch(76% calc(var(--chromatic-chroma-500) * 0.7) var(--chromatic-hue));
   --seq-4: oklch(67% calc(var(--chromatic-chroma-500) * 0.85) var(--chromatic-hue));
   --seq-5: oklch(58% calc(var(--chromatic-chroma-500) * 0.9) var(--chromatic-hue));
+  /* Text on a strong fill of `--series-1` / `--series-3` (a compact matrix cell): white on the deep light-page hues. */
+  --heat-ink: #fff;
   --chart-grid: #e5e5e5;
   --chart-text: #52514e;
   color-scheme: light;
@@ -58,6 +60,8 @@
   --chromatic-sat: 0.7;
 }
 :root.dark {
+  /* Dark pages fill with the light hues, so the text on a strong fill turns dark. */
+  --heat-ink: #171717;
   --series-1: oklch(74% calc(var(--chromatic-chroma-400) * var(--chromatic-sat)) var(--chromatic-hue));
   --series-2: #d95926;
   --series-3: #199e70;