From e958bcae830e2be5a62a21e5933840c63fd2582f Mon Sep 17 00:00:00 2001
From: Peter Hedenskog <phedenskog@wikimedia.org>
Date: Tue, 12 May 2026 07:51:57 +0200
Subject: [PATCH] Compare: easier regression spotting and accessible-by-default
 UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  The result page used to be a wall of numbers and a stack of
  filmstrip rails — knowing whether anything actually regressed
  meant scanning the page-x-ray table column-by-column and squinting
  at two parallel filmstrips. The aim of this change is "the
  regressions announce themselves" before you scroll.

  Page-x-ray gets a Δ column (red regressions, green improvements,
  grey "no change", with sign + percent), per-section header
  colours so the long metric list breaks into obvious groups, and
  an "Only differences" chip in the column header that hides
  no-change rows entirely. The CPU "time spent by category" and
  "events" disclosure rows are now proper sub-tables with their
  own Δ column so a recalculate-style regression reads the same way
  as a regression in total bytes.

  The filmstrip is now a single rail of columns, HAR1 stacked over
  HAR2 at the same timestamp, padded onto a 100 ms grid so each
  cell maps to a real on-disk frame whenever the page is actually
  changing. HAR1 cells get a blue left-edge stripe and a blue "1"
  badge; HAR2 cells get orange and a "2" badge — distinct enough
  to be readable without consulting the legend, and colour-blind
  friendly. Columns where the two HARs disagree on visual progress
  get a tinted border (amber for small gaps, red for large), so
  "HAR2 was still blank at 800 ms" jumps out. Arrow keys move
  focus between cells; mouse-drag scrolls the rail.

  Final-screenshot captures grow to ~460 px wide (was 200 px) and
  clicking any thumbnail — capture or filmstrip frame — opens it
  in an in-page lightbox instead of kicking the user to a new tab.

  The Visual Progress chart gets vertical guide lines at FVC, FCP,
  LCP and Speed Index for each HAR, colour-coded per metric (HAR1
  solid, HAR2 dashed) so a regressed LCP shows up as two orange
  lines drifting apart.

  The Waterfall card gets a "Side by side" toggle that swaps the
  blend-overlay for a 2-column grid; useful when the question is
  "which row belongs to which HAR?" rather than "what moved?".

  Accessibility baseline: skip-to-content link, universal
  :focus-visible ring, <main> and <nav> landmarks, table
  caption, ARIA labels on every interactive control, alt text on
  capture images, and prefers-reduced-motion honoured.

  Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.co
---
 index.html                                  |  27 +-
 public/js/compare/filmstrip.js              |  85 ++++-
 public/js/compare/filmstripNav.js           | 114 +++++++
 public/js/compare/generate.js               |  26 +-
 public/js/compare/generateVisualProgress.js |  40 +++
 public/js/compare/lightbox.js               | 112 +++++++
 public/js/compare/templates.js              | 344 ++++++++++++++------
 public/js/compare/ux.js                     |  61 +++-
 src/css/elements.css                        |  61 ++++
 src/css/filmstrip.css                       | 237 ++++++++++----
 src/css/lightbox.css                        | 114 +++++++
 src/css/main.css                            |   1 +
 src/css/page-xray.css                       | 157 ++++++++-
 src/css/visual-progress.css                 |  40 ++-
 src/css/waterfall.css                       |  27 ++
 15 files changed, 1253 insertions(+), 193 deletions(-)
 create mode 100644 public/js/compare/filmstripNav.js
 create mode 100644 public/js/compare/lightbox.js
 create mode 100644 src/css/lightbox.css

diff --git a/index.html b/index.html
index 5de5070..cad0299 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,8 @@
   <script src="/js/compare/ux.js" defer></script>
   <script src="/js/compare/load.js" defer></script>
   <script src="/js/compare/filmstrip.js" defer></script>
+  <script src="/js/compare/filmstripNav.js" defer></script>
+  <script src="/js/compare/lightbox.js" defer></script>
   <script src="/js/compare/generate.js" defer></script>
   <script src="/js/compare/generateVisualProgress.js" defer></script>
   <script src="/js/compare/templates.js" defer></script>
@@ -164,9 +166,10 @@
 </head>
 
 <body>
+  <a class="skip-link" href="#mainContent">Skip to content</a>
   <div id="choosehars">
-    <header class="header">
-      <div class="wip">BETA</div>
+    <header class="header" role="banner">
+      <div class="wip" aria-hidden="true">BETA</div>
       <div class="grid grid-pad">
         <div class="col-1-1">
           <div class="logo">
@@ -217,7 +220,7 @@ <h1 class="title">Compare</h1>
   </div>
 
   <div id="result" class="result">
-    <header class="header-result">
+    <header class="header-result" role="banner">
       <div class="grid grid-pad grid-result">
         <div class="col-1-1">
           <div class="logo">
@@ -225,19 +228,25 @@ <h1 class="title">Compare</h1>
               <img src="img/compare.png" width="34" class="img-logo" />
             </a>
           </div>
-          <div id="resultHeaderContent"></div>
+          <nav id="resultHeaderContent" aria-label="Page sections"></nav>
         </div>
       </div>
     </header>
-    <div class="grid grid-pad grid-result">
+    <main id="mainContent" class="grid grid-pad grid-result" tabindex="-1">
       <div class="col-1-1">
+        <h1 class="sr-only">HAR comparison</h1>
         <div id="comment-intro" class="comment"></div>
         <div id="pageXrayContent" class="card"></div>
         <div id="filmstripContent" class="card"></div>
         <section class="card">
-          <h3 id="waterfallHeader" class="card-title">Waterfall</h3>
+          <h3 id="waterfallHeader" class="card-title">Waterfall
+            <button id="waterfallLayoutToggle" type="button"
+                    onclick="toggleWaterfallLayout(this);"
+                    class="chip-toggle"
+                    aria-pressed="false">Side by side</button>
+          </h3>
           <div id="comment-waterfall" class="comment"></div>
-          <div class="rangeWrapper">
+          <div class="rangeWrapper" id="harBlendWrapper">
             <span class="har-label" id="har1Label"></span>
             <input id="harBlendSlider" type="range" min="0" max="1" step="0.05" value="0"
                    oninput="blendWaterfalls(this.value)"
@@ -257,11 +266,11 @@ <h3 id="waterfallHeader" class="card-title">Waterfall</h3>
           Upload again
         </button>
       </div>
-    </div>
+    </main>
   </div>
   <div id="loading" class="loading result">
     <header class="header">
-      <div class="wip">BETA</div>
+      <div class="wip" aria-hidden="true">BETA</div>
       <div class="grid grid-pad">
         <div class="col-1-1">
           <div class="logo">
diff --git a/public/js/compare/filmstrip.js b/public/js/compare/filmstrip.js
index 04af4c1..2a3a886 100644
--- a/public/js/compare/filmstrip.js
+++ b/public/js/compare/filmstrip.js
@@ -69,22 +69,33 @@ function getFilmstripForPage(har, pageIndex) {
           ms: ms,
           time: (ms / 1000).toFixed(2),
           img: dataBase + '/filmstrip/' + runId + '/ms_' +
-               String(ms).padStart(6, '0') + '.jpg'
+               String(ms).padStart(6, '0') + '.jpg',
+          // Visual-progress percent at this change point. Carries
+          // through padFrames so each padded cell knows how rendered
+          // the page was at that moment — used to flag divergence
+          // between the two HARs.
+          progress: vp[ms]
         };
       });
     }
   }
 
   // Legacy WPT path — the HAR's page object has a filmstrip array
-  // directly. Translate into the same shape.
+  // directly. Translate into the same shape. WPT entries usually carry
+  // a `VisuallyComplete` percent on each frame; surface it as
+  // progress so divergence colouring still works.
   const legacy = page.filmstrip || (page._wpt && page._wpt.filmstrip);
   if (Array.isArray(legacy) && legacy.length > 0) {
     return legacy.map(function (f) {
       const ms = Math.round((f.time || 0) * 1000);
+      const prog = typeof f.progress === 'number' ? f.progress
+                 : typeof f.VisuallyComplete === 'number' ? f.VisuallyComplete
+                 : null;
       return {
         ms: ms,
         time: (ms / 1000).toFixed(2),
-        img: f.file || f.image || ''
+        img: f.file || f.image || '',
+        progress: prog
       };
     });
   }
@@ -92,18 +103,74 @@ function getFilmstripForPage(har, pageIndex) {
   return null;
 }
 
+/**
+ * Resample a change-point frame list onto a uniform time grid so the
+ * rendered strip reads like an actual filmstrip: every cell represents
+ * the same time slice, repeating the last-known frame until the page
+ * visibly changes again. Without this the cells are spaced by *visual
+ * progress*, which makes "nothing happened for 2 s" look identical to
+ * "everything changed in 50 ms".
+ */
+function padFrames(frames, maxMs, stepMs) {
+  if (frames.length === 0) return [];
+  const padded = [];
+  let lastFrame = frames[0];
+  let nextIdx = 0;
+  for (let t = 0; t <= maxMs; t += stepMs) {
+    while (nextIdx < frames.length && frames[nextIdx].ms <= t) {
+      lastFrame = frames[nextIdx];
+      nextIdx++;
+    }
+    padded.push({
+      ms: t,
+      time: (t / 1000).toFixed(1),
+      img: lastFrame.img,
+      sourceMs: lastFrame.ms,
+      progress: lastFrame.progress
+    });
+  }
+  // Always end on the exact LastVisualChange frame so the final visual
+  // state is shown, even if it falls between two grid steps.
+  const lastAvailable = frames[frames.length - 1];
+  if (lastAvailable.ms !== padded[padded.length - 1].ms) {
+    padded.push({
+      ms: lastAvailable.ms,
+      time: (lastAvailable.ms / 1000).toFixed(1),
+      img: lastAvailable.img,
+      sourceMs: lastAvailable.ms,
+      progress: lastAvailable.progress
+    });
+  }
+  return padded;
+}
+
 /**
  * Build filmstrip data for both HARs in the comparison.
  * Returns null if neither HAR has frames available.
  */
 function getFilmstrip(har1, run1, har2, run2) {
-  const frames1 = getFilmstripForPage(har1, run1) || [];
-  const frames2 = getFilmstripForPage(har2, run2) || [];
-  if (frames1.length === 0 && frames2.length === 0) return null;
+  const raw1 = getFilmstripForPage(har1, run1) || [];
+  const raw2 = getFilmstripForPage(har2, run2) || [];
+  if (raw1.length === 0 && raw2.length === 0) return null;
 
   const maxMs = Math.max(
-    frames1.length ? frames1[frames1.length - 1].ms : 0,
-    frames2.length ? frames2[frames2.length - 1].ms : 0
+    raw1.length ? raw1[raw1.length - 1].ms : 0,
+    raw2.length ? raw2[raw2.length - 1].ms : 0
   );
-  return { frames1: frames1, frames2: frames2, maxMs: maxMs };
+
+  // 100 ms is sitespeed.io's native capture cadence, so every cell
+  // maps to a real on-disk frame whenever the page is actually
+  // changing. For very long pages we widen the step so the rail
+  // stops at ~120 cells.
+  let stepMs = 100;
+  while (Math.floor(maxMs / stepMs) + 1 > 120) {
+    stepMs *= 2;
+  }
+
+  return {
+    frames1: padFrames(raw1, maxMs, stepMs),
+    frames2: padFrames(raw2, maxMs, stepMs),
+    maxMs: maxMs,
+    stepMs: stepMs
+  };
 }
diff --git a/public/js/compare/filmstripNav.js b/public/js/compare/filmstripNav.js
new file mode 100644
index 0000000..7bd7bb6
--- /dev/null
+++ b/public/js/compare/filmstripNav.js
@@ -0,0 +1,114 @@
+/* exported initFilmstripNav */
+
+//
+// Filmstrip navigation enhancements.
+//
+// - Mouse drag scrolls the rail horizontally (more discoverable than
+//   the native scrollbar for long strips). We only kick in if the
+//   user actually moves while holding down; a plain click still goes
+//   through to the lightbox-trigger inside the cell.
+// - Arrow keys move focus between cells when one is focused. Home /
+//   End jump to the start / end of the strip.
+//
+// Delegation-based so newly-generated rails (after Switch or after
+// uploading a new HAR pair) pick up the same behaviour without a
+// re-wire.
+//
+
+function initFilmstripNav() {
+  if (window.__filmstripNavInstalled) return;
+  window.__filmstripNavInstalled = true;
+
+  const DRAG_THRESHOLD_PX = 4;
+
+  document.body.addEventListener('mousedown', function (e) {
+    if (!(e.target instanceof HTMLElement)) return;
+    const rail = e.target.closest('.filmstrip-rail');
+    if (!rail) return;
+    // Ignore mousedown on the actual zoom button — let the lightbox
+    // handle that click. Drag-scroll triggers on mousedown anywhere
+    // else inside the rail (the padding, the column gap, etc.).
+    if (e.target.closest('.lightbox-trigger')) {
+      // Still want to allow drag if user moves before releasing; we
+      // arm a "candidate" state and promote to dragging only after
+      // crossing the threshold.
+    }
+    if (e.button !== 0) return;
+
+    const startX = e.pageX;
+    const startScroll = rail.scrollLeft;
+    let dragging = false;
+
+    function onMove(ev) {
+      const dx = ev.pageX - startX;
+      if (!dragging && Math.abs(dx) >= DRAG_THRESHOLD_PX) {
+        dragging = true;
+        rail.classList.add('is-dragging');
+      }
+      if (dragging) {
+        rail.scrollLeft = startScroll - dx;
+        ev.preventDefault();
+      }
+    }
+
+    function onUp(ev) {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      if (dragging) {
+        rail.classList.remove('is-dragging');
+        // Swallow the click that would otherwise follow the
+        // mouseup — otherwise a drag would also open the lightbox.
+        ev.preventDefault();
+        ev.stopPropagation();
+        const swallow = function (ce) {
+          ce.stopPropagation();
+          ce.preventDefault();
+          document.removeEventListener('click', swallow, true);
+        };
+        document.addEventListener('click', swallow, true);
+      }
+    }
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+
+  document.body.addEventListener('keydown', function (e) {
+    if (!(e.target instanceof HTMLElement)) return;
+    const cell = e.target.closest('.filmstrip-cell');
+    if (!cell) return;
+    const column = cell.closest('.filmstrip-column');
+    if (!column) return;
+
+    let next = null;
+    if (e.key === 'ArrowRight') {
+      const nextCol = column.nextElementSibling;
+      next = nextCol && nextCol.querySelector('.filmstrip-cell:not(.filmstrip-cell--missing)');
+    } else if (e.key === 'ArrowLeft') {
+      const prevCol = column.previousElementSibling;
+      next = prevCol && prevCol.querySelector('.filmstrip-cell:not(.filmstrip-cell--missing)');
+    } else if (e.key === 'ArrowDown') {
+      // Move from HAR1 cell to HAR2 cell within the same column.
+      next = column.querySelectorAll('.filmstrip-cell')[1];
+    } else if (e.key === 'ArrowUp') {
+      next = column.querySelectorAll('.filmstrip-cell')[0];
+    } else if (e.key === 'Home') {
+      const rail = column.parentElement;
+      next = rail && rail.querySelector('.filmstrip-cell:not(.filmstrip-cell--missing)');
+    } else if (e.key === 'End') {
+      const rail = column.parentElement;
+      const all = rail && rail.querySelectorAll('.filmstrip-cell:not(.filmstrip-cell--missing)');
+      next = all && all[all.length - 1];
+    } else {
+      return;
+    }
+
+    if (next) {
+      e.preventDefault();
+      next.focus();
+      next.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', initFilmstripNav);
diff --git a/public/js/compare/generate.js b/public/js/compare/generate.js
index 8807201..f1ddd46 100644
--- a/public/js/compare/generate.js
+++ b/public/js/compare/generate.js
@@ -65,6 +65,22 @@ function addVisualProgress(pageXray1, pageXray2, config, filmstrip) {
     'visualProgressContent'
   );
 
+  // Marker timings — vertical guide lines on the chart anchor the
+  // comparison in time so "when did this happen?" is answerable at
+  // a glance. We pick the standard set: First Visual Change, FCP,
+  // LCP and Speed Index. Each marker is per-HAR so a regressed LCP
+  // shows up as two side-by-side red lines rather than one.
+  function markerSet(p) {
+    const vm = p.visualMetrics || {};
+    const gw = p.googleWebVitals || {};
+    return [
+      { label: 'FVC',         time: vm.FirstVisualChange,            kind: 'fvc' },
+      { label: 'FCP',         time: gw.firstContentfulPaint,         kind: 'fcp' },
+      { label: 'LCP',         time: gw.largestContentfulPaint,       kind: 'lcp' },
+      { label: 'Speed Index', time: vm.SpeedIndex,                   kind: 'si'  }
+    ].filter(function (m) { return typeof m.time === 'number' && m.time > 0; });
+  }
+
   generateVisualProgress(
     pageXray1.visualMetrics.VisualProgress,
     pageXray2.visualMetrics.VisualProgress,
@@ -73,7 +89,9 @@ function addVisualProgress(pageXray1, pageXray2, config, filmstrip) {
       thumbnails1: filmstrip ? sampleFrames(filmstrip.frames1, 6) : [],
       thumbnails2: filmstrip ? sampleFrames(filmstrip.frames2, 6) : [],
       label1:      config.har1.label,
-      label2:      config.har2.label
+      label2:      config.har2.label,
+      markers1:    markerSet(pageXray1),
+      markers2:    markerSet(pageXray2)
     }
   );
 }
@@ -178,6 +196,12 @@ function generate(config) {
   const slider = document.getElementById('harBlendSlider');
   if (slider) slider.value = 0;
   blendWaterfalls(0);
+  // Restore the user's saved side-by-side / overlay preference now
+  // that the waterfall DOM is populated. No-op when the wrapper is
+  // missing (e.g. during the loading view).
+  if (typeof applyWaterfallLayoutPreference === 'function') {
+    applyWaterfallLayoutPreference();
+  }
 
   parseTemplate(
     'pageXrayTemplate',
diff --git a/public/js/compare/generateVisualProgress.js b/public/js/compare/generateVisualProgress.js
index 2cf5f38..37b9e60 100644
--- a/public/js/compare/generateVisualProgress.js
+++ b/public/js/compare/generateVisualProgress.js
@@ -111,6 +111,46 @@ function generateVisualProgress(visualProgress1, visualProgress2, id, opts) {
   add('path', { class: 'vp-series--1', d: stepPath(series[0]) });
   add('path', { class: 'vp-series--2', d: stepPath(series[1]) });
 
+  // Marker lines — vertical guides at FCP / LCP / FVC / Speed Index
+  // for each HAR. Drawn under the series paths so the curves stay
+  // dominant, with a small label at the top so the eye can match a
+  // line to its metric without hovering. HAR1 markers go above the
+  // chart top, HAR2 markers go to the same line but a smaller font
+  // and a different colour series.
+  function drawMarkers(markers, hark) {
+    if (!markers || !markers.length) return;
+    // Cluster markers that fall within 2% of plot width so labels
+    // don't overlap when, say, FCP and FVC coincide.
+    const minGapPx = plotW * 0.02;
+    const sorted = markers.slice().sort(function (a, b) { return a.time - b.time; });
+    let lastX = -Infinity;
+    sorted.forEach(function (m) {
+      const t = m.time / 1000;
+      const xv = x(t);
+      const cls = 'vp-marker vp-marker--' + hark + ' vp-marker--' + m.kind;
+      add('line', {
+        class: cls,
+        x1: xv, x2: xv,
+        y1: y(0), y2: y(100)
+      });
+      // Stagger label Y when two markers are too close horizontally so
+      // their text doesn't collide.
+      const close = (xv - lastX) < minGapPx;
+      const labelY = hark === 1
+        ? (close ? padT + 22 : padT + 10)
+        : (close ? H - padB - 4 : H - padB - 16);
+      add('text', {
+        class: 'vp-marker-label vp-marker-label--' + hark + ' vp-marker--' + m.kind,
+        x: xv + 3,
+        y: labelY,
+        'text-anchor': 'start'
+      }, m.label);
+      lastX = xv;
+    });
+  }
+  drawMarkers(opts.markers1, 1);
+  drawMarkers(opts.markers2, 2);
+
   container.appendChild(svg);
 
   // Thumbnail strips below the chart, aligned to the same time axis
diff --git a/public/js/compare/lightbox.js b/public/js/compare/lightbox.js
new file mode 100644
index 0000000..bd9a30a
--- /dev/null
+++ b/public/js/compare/lightbox.js
@@ -0,0 +1,112 @@
+/* exported initLightbox */
+
+//
+// Lightbox overlay for screenshots and filmstrip frames.
+//
+// Replaces the old "open image in a new tab" behaviour. A click on
+// any thumbnail wired to the lightbox shows the full image in an
+// in-page overlay so the user keeps their place in the comparison
+// instead of fighting the browser's tab management.
+//
+// Delegation-based: a single click listener on document.body catches
+// clicks on:
+//   - .pageXrayCapture          (final-screenshot row in page-x-ray)
+//   - .filmstrip-frame img      (filmstrip cells)
+//   - any element with data-lightbox-src
+//
+// Esc closes; clicking the backdrop closes; clicking the image itself
+// stays open so accidental drags don't dismiss.
+//
+
+function initLightbox() {
+  if (document.getElementById('lightbox')) return;
+
+  const overlay = document.createElement('div');
+  overlay.id = 'lightbox';
+  overlay.className = 'lightbox';
+  overlay.setAttribute('role', 'dialog');
+  overlay.setAttribute('aria-modal', 'true');
+  overlay.setAttribute('aria-label', 'Image viewer');
+  overlay.hidden = true;
+  overlay.innerHTML =
+    '<figure class="lightbox-figure">' +
+      '<button type="button" class="lightbox-close" aria-label="Close image viewer">×</button>' +
+      '<img class="lightbox-img" alt="">' +
+      '<figcaption class="lightbox-caption"></figcaption>' +
+    '</figure>';
+  document.body.appendChild(overlay);
+
+  const img = overlay.querySelector('.lightbox-img');
+  const caption = overlay.querySelector('.lightbox-caption');
+  const closeBtn = overlay.querySelector('.lightbox-close');
+  const figure = overlay.querySelector('.lightbox-figure');
+
+  let lastFocused = null;
+
+  function open(src, alt) {
+    if (!src) return;
+    lastFocused = document.activeElement;
+    img.src = src;
+    img.alt = alt || '';
+    caption.textContent = alt || '';
+    overlay.hidden = false;
+    // Force a reflow so the opacity transition runs.
+    void overlay.offsetWidth;
+    overlay.classList.add('lightbox--open');
+    closeBtn.focus();
+    document.addEventListener('keydown', onKey);
+  }
+
+  function close() {
+    overlay.classList.remove('lightbox--open');
+    overlay.hidden = true;
+    img.src = '';
+    document.removeEventListener('keydown', onKey);
+    if (lastFocused && typeof lastFocused.focus === 'function') {
+      lastFocused.focus();
+    }
+  }
+
+  function onKey(e) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      close();
+    }
+  }
+
+  overlay.addEventListener('click', function (e) {
+    // Anywhere except the figure itself dismisses the overlay.
+    if (e.target === overlay) close();
+  });
+  figure.addEventListener('click', function (e) {
+    // Clicks on the close button bubble here; everything else inside
+    // the figure (image, caption) is a no-op so the dialog stays open
+    // when the user re-clicks the image.
+    if (e.target.closest('.lightbox-close')) close();
+  });
+
+  // Click delegation — any .lightbox-trigger button containing an
+  // <img> opens that image in the overlay. Buttons handle keyboard
+  // activation (Enter / Space) natively, no extra wiring needed.
+  document.body.addEventListener('click', function (e) {
+    const target = e.target instanceof HTMLElement ? e.target : null;
+    if (!target) return;
+    const trigger = target.closest('.lightbox-trigger');
+    if (!trigger) return;
+    const innerImg = trigger.querySelector('img');
+    if (!innerImg) return;
+    const src = innerImg.getAttribute('src');
+    let alt = innerImg.getAttribute('alt') || '';
+    if (!alt) {
+      // Filmstrip frames carry the timestamp in the sibling
+      // <figcaption>; surface that as the lightbox caption.
+      const fig = trigger.closest('.filmstrip-frame');
+      const cap = fig && fig.querySelector('figcaption');
+      if (cap) alt = cap.textContent;
+    }
+    e.preventDefault();
+    open(src, alt);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', initLightbox);
diff --git a/public/js/compare/templates.js b/public/js/compare/templates.js
index a566c14..95d4c6e 100644
--- a/public/js/compare/templates.js
+++ b/public/js/compare/templates.js
@@ -68,20 +68,82 @@ function pageXrayTemplate(d) {
 
   function section(title, kind) {
     const cls = 'pageXraySection' + (kind ? ' pageXraySection--' + kind : '');
-    return '<tr class="' + cls + '"><th colspan="3">' + h(title) + '</th></tr>';
+    return '<tr class="' + cls + '"><th colspan="4">' + h(title) + '</th></tr>';
   }
 
+  // Compute a Δ cell for a numeric metric. Every metric in this table
+  // is "lower is better" (request count, byte size, paint timing, CLS,
+  // long-task count), so a positive HAR2−HAR1 delta is a regression
+  // and renders in error red; a negative delta is an improvement and
+  // renders in success green. Non-numeric inputs produce an empty cell.
+  function diffCell(a, b, formatter) {
+    if (typeof a !== 'number' || typeof b !== 'number' ||
+        !isFinite(a) || !isFinite(b)) {
+      return '<td class="pageXrayDiff"></td>';
+    }
+    const delta = b - a;
+    if (Math.abs(delta) < 1e-4) {
+      return '<td class="pageXrayDiff pageXrayDiff--same">no change</td>';
+    }
+    const cls = delta > 0 ? 'pageXrayDiff--worse' : 'pageXrayDiff--better';
+    const sign = delta > 0 ? '+' : '−';
+    const absDelta = Math.abs(delta);
+    const value = formatter ? formatter(absDelta) : absDelta.toString();
+    let pctStr = '';
+    if (a !== 0) {
+      const pct = Math.round((delta / a) * 100);
+      pctStr = ' <span class="pageXrayDiff-pct">(' +
+               (pct > 0 ? '+' : (pct < 0 ? '−' : '')) +
+               Math.abs(pct) + '%)</span>';
+    }
+    return '<td class="pageXrayDiff ' + cls + '">' + sign + value + pctStr + '</td>';
+  }
+
+  // CLS is a unitless float; browsers report it at full precision
+  // (e.g. 0.05641193152186011). Three decimals is the granularity that
+  // matters for comparison and matches the sitespeed.io HTML report.
+  function fmtCLS(v) {
+    return typeof v === 'number' ? v.toFixed(3) : (v == null ? '' : v);
+  }
+
+  // Empty Δ cell — for rows where a delta wouldn't make sense
+  // (URLs, dates, captures).
+  const emptyDiff = '<td class="pageXrayDiff"></td>';
+
+  // "Only show differences" toggle — read the user's last choice from
+  // localStorage so the preference survives reload. The button itself
+  // is rendered below; this just controls the initial class on the
+  // table so the page renders in the desired state without a flash.
+  const diffOnlyOn = (function () {
+    try { return localStorage.getItem('compare.diffOnly') === '1'; }
+    catch (e) { return false; }
+  })();
+  const diffOnlyClass = diffOnlyOn ? ' pageXrayTable--diff-only' : '';
+  const diffOnlyPressed = diffOnlyOn ? 'true' : 'false';
+
   let html = '';
-  html += '<div><table class="pageXrayTable">';
+  html += '<div><table class="pageXrayTable' + diffOnlyClass + '">';
+  // Visually-hidden caption — useful for screen readers and gives the
+  // table a programmatic name without taking up real estate.
+  html += '<caption class="sr-only">Page X-ray comparison: ' +
+          h(config.har1.label) + ' versus ' + h(config.har2.label) + '</caption>';
   html += '<thead><tr>';
-  html += '<th class="tabletext tableXrayMetric">Metric ' +
-            '<button onclick="regenerate(true);" class="submit submit-smaller">Switch</button></th>';
-  html += '<th class="tableXrayHarMetric">' + h(config.har1.label) +
+  html += '<th class="tabletext tableXrayMetric" scope="col">Metric ' +
+            '<button onclick="regenerate(true);" class="submit submit-smaller" ' +
+                    'aria-label="Swap HAR1 and HAR2">Switch</button> ' +
+            '<button id="diffOnlyToggle" type="button" ' +
+                    'onclick="toggleDiffOnly(this);" ' +
+                    'class="chip-toggle" ' +
+                    'aria-pressed="' + diffOnlyPressed + '">' +
+              'Only differences</button></th>';
+  html += '<th class="tableXrayHarMetric" scope="col">' + h(config.har1.label) +
             '<input type="file" id="har1upload" class="inputfile"/>' +
             '<label for="har1upload">Upload</label></th>';
-  html += '<th class="tableXrayHar2Metric"> ' + h(config.har2.label) +
+  html += '<th class="tableXrayHar2Metric" scope="col"> ' + h(config.har2.label) +
             '<input type="file" id="har2upload" class="inputfile"/>' +
             '<label for="har2upload">Upload</label></th>';
+  html += '<th class="tableXrayDiff" scope="col" ' +
+              'title="HAR2 minus HAR1 — green = improvement, red = regression">Δ</th>';
   html += '</tr></thead><tbody>';
 
   // Setup (top of the table — first rows after the header, no section
@@ -103,31 +165,36 @@ function pageXrayTemplate(d) {
       });
       html += '</select>';
     }
-    html += '</td></tr>';
+    html += '</td>' + emptyDiff + '</tr>';
   }
 
   html += '<tr><td class="tabletext">URL</td>' +
           '<td><a href="' + h(p1.url) + '" title="' + h(p1.meta.title) + '">' + h(p1.url) + '</a></td>' +
-          '<td><a href="' + h(p2.url) + '" title="' + h(p2.meta.title) + '">' + h(p2.url) + '</a></td></tr>';
+          '<td><a href="' + h(p2.url) + '" title="' + h(p2.meta.title) + '">' + h(p2.url) + '</a></td>' +
+          emptyDiff + '</tr>';
 
   html += '<tr><td class="tabletext">Date</td>' +
           '<td>' + h(formatDate(p1.meta.startedDateTime)) + '</td>' +
-          '<td>' + h(formatDate(p2.meta.startedDateTime)) + '</td></tr>';
+          '<td>' + h(formatDate(p2.meta.startedDateTime)) + '</td>' +
+          emptyDiff + '</tr>';
 
   html += '<tr><td class="tabletext">Browser</td>' +
           '<td>' + (p1.meta.browser ? h(p1.meta.browser.name) + ' ' + h(p1.meta.browser.version) : '') + '</td>' +
-          '<td>' + (p2.meta.browser ? h(p2.meta.browser.name) + ' ' + h(p2.meta.browser.version) : '') + '</td></tr>';
+          '<td>' + (p2.meta.browser ? h(p2.meta.browser.name) + ' ' + h(p2.meta.browser.version) : '') + '</td>' +
+          emptyDiff + '</tr>';
 
   if (p1.meta.connectivity && p2.meta.connectivity) {
     html += '<tr><td class="tabletext">Connectivity</td>' +
             '<td>' + h(p1.meta.connectivity) + '</td>' +
-            '<td>' + h(p2.meta.connectivity) + '</td></tr>';
+            '<td>' + h(p2.meta.connectivity) + '</td>' +
+            emptyDiff + '</tr>';
   }
 
   html += section('Content', 'content');
   html += '<tr><td class="tabletext">Total</td>' +
           '<td>' + p1.requests + ' (' + formatBytes(p1.transferSize) + ' / ' + formatBytes(p1.contentSize) + ')</td>' +
-          '<td>' + p2.requests + ' (' + formatBytes(p2.transferSize) + ' / ' + formatBytes(p2.contentSize) + ')</td></tr>';
+          '<td>' + p2.requests + ' (' + formatBytes(p2.transferSize) + ' / ' + formatBytes(p2.contentSize) + ')</td>' +
+          diffCell(p1.transferSize, p2.transferSize, formatBytes) + '</tr>';
 
   ['html', 'css', 'javascript'].forEach(function (kind) {
     const label = { html: 'HTML', css: 'CSS', javascript: 'JavaScript' }[kind];
@@ -135,26 +202,31 @@ function pageXrayTemplate(d) {
     const b = p2.contentTypes[kind] || { requests: 0, transferSize: 0, contentSize: 0 };
     html += '<tr><td class="tabletext">' + label + '</td>' +
             '<td>' + a.requests + ' (' + formatBytes(a.transferSize) + ' / ' + formatBytes(a.contentSize) + ')</td>' +
-            '<td>' + b.requests + ' (' + formatBytes(b.transferSize) + ' / ' + formatBytes(b.contentSize) + ')</td></tr>';
+            '<td>' + b.requests + ' (' + formatBytes(b.transferSize) + ' / ' + formatBytes(b.contentSize) + ')</td>' +
+            diffCell(a.transferSize, b.transferSize, formatBytes) + '</tr>';
   });
 
   const img1 = p1.contentTypes.image || { requests: 0, transferSize: 0 };
   const img2 = p2.contentTypes.image || { requests: 0, transferSize: 0 };
   html += '<tr><td class="tabletext">Image</td>' +
           '<td>' + img1.requests + ' (' + formatBytes(img1.transferSize) + ')</td>' +
-          '<td>' + img2.requests + ' (' + formatBytes(img2.transferSize) + ')</td></tr>';
+          '<td>' + img2.requests + ' (' + formatBytes(img2.transferSize) + ')</td>' +
+          diffCell(img1.transferSize, img2.transferSize, formatBytes) + '</tr>';
 
   if (p1.renderBlocking && p2.renderBlocking) {
     html += section('Render blocking', 'blocking');
     html += '<tr><td class="tabletext">Render blocking</td>' +
             '<td>' + p1.renderBlocking.blocking + '</td>' +
-            '<td>' + p2.renderBlocking.blocking + '</td></tr>';
+            '<td>' + p2.renderBlocking.blocking + '</td>' +
+            diffCell(p1.renderBlocking.blocking, p2.renderBlocking.blocking) + '</tr>';
     html += '<tr><td class="tabletext">Potentially blocking</td>' +
             '<td>' + p1.renderBlocking.potentiallyBlocking + '</td>' +
-            '<td>' + p2.renderBlocking.potentiallyBlocking + '</td></tr>';
+            '<td>' + p2.renderBlocking.potentiallyBlocking + '</td>' +
+            diffCell(p1.renderBlocking.potentiallyBlocking, p2.renderBlocking.potentiallyBlocking) + '</tr>';
     html += '<tr><td class="tabletext">In body parser blocking</td>' +
             '<td>' + p1.renderBlocking.in_body_parser_blocking + '</td>' +
-            '<td>' + p2.renderBlocking.in_body_parser_blocking + '</td></tr>';
+            '<td>' + p2.renderBlocking.in_body_parser_blocking + '</td>' +
+            diffCell(p1.renderBlocking.in_body_parser_blocking, p2.renderBlocking.in_body_parser_blocking) + '</tr>';
   }
 
   if (p1.visualMetrics) {
@@ -174,112 +246,154 @@ function pageXrayTemplate(d) {
       if (p1.visualMetrics[key] && p2.visualMetrics && p2.visualMetrics[key]) {
         vmHtml += '<tr><td class="tabletext">' + label + '</td>' +
                   '<td>' + formatTime(p1.visualMetrics[key]) + '</td>' +
-                  '<td>' + formatTime(p2.visualMetrics[key]) + '</td></tr>';
+                  '<td>' + formatTime(p2.visualMetrics[key]) + '</td>' +
+                  diffCell(p1.visualMetrics[key], p2.visualMetrics[key], formatTime) + '</tr>';
       }
     });
     if (vmHtml) html += section('Visual metrics', 'visual') + vmHtml;
   }
 
   if (p1.googleWebVitals && p2.googleWebVitals) {
-    // CLS is a unitless float that browsers report at full precision
-    // (e.g. 0.05641193152186011). Round to three decimals — that's
-    // the granularity that matters for comparison and matches the
-    // convention used in the sitespeed.io HTML report.
-    function fmtCLS(v) {
-      return typeof v === 'number' ? v.toFixed(3) : (v == null ? '' : v);
-    }
     html += section('Core Web Vitals', 'cwv');
     html += '<tr><td class="tabletext">First Contentful Paint</td>' +
             '<td>' + formatTime(p1.googleWebVitals.firstContentfulPaint) + '</td>' +
-            '<td>' + formatTime(p2.googleWebVitals.firstContentfulPaint) + '</td></tr>';
+            '<td>' + formatTime(p2.googleWebVitals.firstContentfulPaint) + '</td>' +
+            diffCell(p1.googleWebVitals.firstContentfulPaint, p2.googleWebVitals.firstContentfulPaint, formatTime) + '</tr>';
     html += '<tr><td class="tabletext">Largest Contentful Paint</td>' +
             '<td>' + formatTime(p1.googleWebVitals.largestContentfulPaint) + '</td>' +
-            '<td>' + formatTime(p2.googleWebVitals.largestContentfulPaint) + '</td></tr>';
+            '<td>' + formatTime(p2.googleWebVitals.largestContentfulPaint) + '</td>' +
+            diffCell(p1.googleWebVitals.largestContentfulPaint, p2.googleWebVitals.largestContentfulPaint, formatTime) + '</tr>';
     html += '<tr><td class="tabletext">Total Blocking Time</td>' +
             '<td>' + formatTime(p1.googleWebVitals.totalBlockingTime) + '</td>' +
-            '<td>' + formatTime(p2.googleWebVitals.totalBlockingTime) + '</td></tr>';
+            '<td>' + formatTime(p2.googleWebVitals.totalBlockingTime) + '</td>' +
+            diffCell(p1.googleWebVitals.totalBlockingTime, p2.googleWebVitals.totalBlockingTime, formatTime) + '</tr>';
     html += '<tr><td class="tabletext">Cumulative Layout Shift</td>' +
             '<td>' + fmtCLS(p1.googleWebVitals.cumulativeLayoutShift) + '</td>' +
-            '<td>' + fmtCLS(p2.googleWebVitals.cumulativeLayoutShift) + '</td></tr>';
+            '<td>' + fmtCLS(p2.googleWebVitals.cumulativeLayoutShift) + '</td>' +
+            diffCell(p1.googleWebVitals.cumulativeLayoutShift, p2.googleWebVitals.cumulativeLayoutShift, function (n) { return n.toFixed(3); }) + '</tr>';
   }
 
+  // Long-task block — sitespeed.io HARs that ran Lighthouse get
+  // these; older / WPT-style HARs don't, so the block stays silent.
+  let cpuHtml = '';
+  let cpuSectionEmitted = false;
+  function ensureCpuSection() {
+    if (!cpuSectionEmitted) {
+      html += section('CPU', 'cpu');
+      cpuSectionEmitted = true;
+    }
+  }
   if (p1.cpu && p2.cpu && p1.cpu.longTasks && p2.cpu.longTasks) {
-    let cpuHtml = '';
     if (p1.cpu.longTasks.totalBlockingTime && p2.cpu.longTasks.totalBlockingTime) {
       cpuHtml += '<tr><td class="tabletext">Total Blocking Time</td>' +
                  '<td>' + formatTime(p1.cpu.longTasks.totalBlockingTime) + '</td>' +
-                 '<td>' + formatTime(p2.cpu.longTasks.totalBlockingTime) + '</td></tr>';
+                 '<td>' + formatTime(p2.cpu.longTasks.totalBlockingTime) + '</td>' +
+                 diffCell(p1.cpu.longTasks.totalBlockingTime, p2.cpu.longTasks.totalBlockingTime, formatTime) + '</tr>';
     }
     if (p1.cpu.longTasks.maxPotentialFid && p2.cpu.longTasks.maxPotentialFid) {
       cpuHtml += '<tr><td class="tabletext">Max Potential FID</td>' +
                  '<td>' + formatTime(p1.cpu.longTasks.maxPotentialFid) + '</td>' +
-                 '<td>' + formatTime(p2.cpu.longTasks.maxPotentialFid) + '</td></tr>';
+                 '<td>' + formatTime(p2.cpu.longTasks.maxPotentialFid) + '</td>' +
+                 diffCell(p1.cpu.longTasks.maxPotentialFid, p2.cpu.longTasks.maxPotentialFid, formatTime) + '</tr>';
     }
     if (p1.cpu.longTasks.tasks && p2.cpu.longTasks.tasks) {
       cpuHtml += '<tr><td class="tabletext">Total CPU Long Tasks</td>' +
                  '<td>' + p1.cpu.longTasks.tasks + '</td>' +
-                 '<td>' + p2.cpu.longTasks.tasks + '</td></tr>';
+                 '<td>' + p2.cpu.longTasks.tasks + '</td>' +
+                 diffCell(p1.cpu.longTasks.tasks, p2.cpu.longTasks.tasks) + '</tr>';
+    }
+    if (cpuHtml) {
+      ensureCpuSection();
+      html += cpuHtml;
+      cpuHtml = '';
     }
-    if (cpuHtml) html += section('CPU', 'cpu') + cpuHtml;
+  }
+
+
+  // Sub-table for the CPU disclosure rows. The two HARs may report
+  // different sets of categories/events, so we union the names and
+  // render one row per name with HAR1 / HAR2 / Δ — same red-green
+  // pattern as the parent table, so a regression in scripting time is
+  // visible at the same glance as a regression in total bytes.
+  function cpuBreakdownTable(list1, list2, formatter, eventLabel) {
+    const map1 = {}, map2 = {};
+    (list1 || []).forEach(function (e) { map1[e.name] = e.value; });
+    (list2 || []).forEach(function (e) { map2[e.name] = e.value; });
+    const names = Object.keys(Object.assign({}, map1, map2)).sort();
+    let body = '';
+    names.forEach(function (name) {
+      const v1 = map1[name];
+      const v2 = map2[name];
+      body += '<tr>' +
+        '<td class="tabletext">' + h(name) + '</td>' +
+        '<td>' + (v1 == null ? '<span class="muted">—</span>' : h(formatter(v1))) + '</td>' +
+        '<td>' + (v2 == null ? '<span class="muted">—</span>' : h(formatter(v2))) + '</td>' +
+        diffCell(v1, v2, formatter) +
+        '</tr>';
+    });
+    return '<table class="cpuBreakdownTable"><thead><tr>' +
+             '<th scope="col">' + h(eventLabel) + '</th>' +
+             '<th scope="col">' + h(config.har1.label) + '</th>' +
+             '<th scope="col">' + h(config.har2.label) + '</th>' +
+             '<th scope="col" title="HAR2 minus HAR1">Δ</th>' +
+           '</tr></thead><tbody>' + body + '</tbody></table>';
+  }
+
+  function fmtCategoryValue(v) {
+    return typeof v === 'number' ? formatTime(v) : (v == null ? '' : String(v));
+  }
+  function fmtEventValue(v) {
+    return typeof v === 'number' ? v.toFixed(3) : (v == null ? '' : String(v));
   }
 
   if (d.cpuCategories1 && d.cpuCategories2) {
-    // Same group as the CPU long-task rows above when those exist;
-    // emit the header here only if we didn't already (in which case
-    // CPU has no long-task data but we still want the disclosure rows
-    // visually under a heading).
-    if (!(p1.cpu && p2.cpu && p1.cpu.longTasks && p2.cpu.longTasks)) {
-      html += section('CPU', 'cpu');
-    }
-    html += '<tr><td class="tabletext" colspan="3"> CPU time spent by category ' +
-              '<button onclick="toggleRow(this, \'cpuCategoryInfo\', this.childNodes[0]);" class="submit submit-smaller">' +
+    ensureCpuSection();
+    html += '<tr><td class="tabletext" colspan="4"> CPU time spent by category ' +
+              '<button onclick="toggleRow(this, \'cpuCategoryInfo\', this.childNodes[0]);" class="submit submit-smaller" ' +
+                      'aria-label="Show CPU category breakdown">' +
                 '<i class="arrow right"></i></button></td></tr>';
-    html += '<tr class="userShowable cpuCategoryInfo"><td class="tabletext"></td>' +
-            '<td><ul>' +
-              each(d.cpuCategories1, function (cat) {
-                return '<li>' + h(cat.name) + ' : ' + h(cat.value) + '</li>';
-              }) +
-            '</ul></td>' +
-            '<td><ul>' +
-              each(d.cpuCategories2, function (cat) {
-                return '<li>' + h(cat.name) + ' : ' + h(cat.value) + '</li>';
-              }) +
-            '</ul></td></tr>';
-    html += '<tr><td class="tabletext" colspan="3">CPU Events ' +
-              '<button onclick="toggleRow(this, \'cpuExtraInfo\', this.childNodes[0]);" class="submit submit-smaller">' +
+    html += '<tr class="userShowable cpuCategoryInfo"><td colspan="4" class="cpuBreakdownCell">' +
+              cpuBreakdownTable(d.cpuCategories1, d.cpuCategories2, fmtCategoryValue, 'Category') +
+            '</td></tr>';
+    html += '<tr><td class="tabletext" colspan="4">CPU Events ' +
+              '<button onclick="toggleRow(this, \'cpuExtraInfo\', this.childNodes[0]);" class="submit submit-smaller" ' +
+                      'aria-label="Show CPU event breakdown">' +
                 '<i class="arrow right"></i></button></td></tr>';
-    html += '<tr class="userShowable cpuExtraInfo"><td class="tabletext"></td>' +
-            '<td><ul>' +
-              each(d.cpuEvents1, function (ev) {
-                return '<li>' + h(ev.name) + ' : ' + h(ev.value.toFixed(3)) + '</li>';
-              }) +
-            '</ul></td>' +
-            '<td><ul>' +
-              each(d.cpuEvents2, function (ev) {
-                return '<li>' + h(ev.name) + ' : ' + h(ev.value.toFixed(3)) + '</li>';
-              }) +
-            '</ul></td></tr>';
+    html += '<tr class="userShowable cpuExtraInfo"><td colspan="4" class="cpuBreakdownCell">' +
+              cpuBreakdownTable(d.cpuEvents1, d.cpuEvents2, fmtEventValue, 'Event') +
+            '</td></tr>';
   }
 
   // Captures — final screenshot, video, link back to the per-run
   // result page. Last group because the values are large media
   // elements, not numbers; pushing them to the bottom keeps the
-  // scannable metric rows above contiguous.
+  // scannable metric rows above contiguous. Screenshots and videos
+  // get a CSS-sized treatment via .pageXrayCapture so the regression
+  // spotter has room to actually see the difference.
   let capturesHtml = '';
   if (p1.meta.screenshot && p2.meta.screenshot) {
     capturesHtml += '<tr><td class="tabletext">Screenshot</td>' +
-            '<td><a href="' + h(p1.meta.screenshot) + '"><img src="' + h(p1.meta.screenshot) + '" width="200"/></a></td>' +
-            '<td><a href="' + h(p2.meta.screenshot) + '"><img src="' + h(p2.meta.screenshot) + '" width="200"/></a></td></tr>';
+            '<td><button type="button" class="lightbox-trigger" aria-label="Open larger screenshot of ' + h(config.har1.label) + '">' +
+              '<img class="pageXrayCapture" src="' + h(p1.meta.screenshot) +
+              '" alt="Final screenshot of ' + h(config.har1.label) + '" loading="lazy"></button></td>' +
+            '<td><button type="button" class="lightbox-trigger" aria-label="Open larger screenshot of ' + h(config.har2.label) + '">' +
+              '<img class="pageXrayCapture" src="' + h(p2.meta.screenshot) +
+              '" alt="Final screenshot of ' + h(config.har2.label) + '" loading="lazy"></button></td>' +
+            emptyDiff + '</tr>';
   }
   if (p1.meta.video && p2.meta.video) {
     capturesHtml += '<tr><td class="tabletext">Video</td>' +
-            '<td><video width="200" controls poster="' + h(p1.meta.screenshot) + '"><source src="' + h(p1.meta.video) + '" type="video/mp4"></video></td>' +
-            '<td><video width="200" controls poster="' + h(p2.meta.screenshot) + '"><source src="' + h(p2.meta.video) + '" type="video/mp4"></video></td></tr>';
+            '<td><video class="pageXrayCapture" controls preload="none" poster="' + h(p1.meta.screenshot) + '">' +
+              '<source src="' + h(p1.meta.video) + '" type="video/mp4"></video></td>' +
+            '<td><video class="pageXrayCapture" controls preload="none" poster="' + h(p2.meta.screenshot) + '">' +
+              '<source src="' + h(p2.meta.video) + '" type="video/mp4"></video></td>' +
+            emptyDiff + '</tr>';
   }
   if (p1.meta.result && p2.meta.result) {
     capturesHtml += '<tr><td class="tabletext">Extra</td>' +
             '<td><a href="' + h(p1.meta.result) + '" target="_blank" rel="noopener noreferrer">Result page</a></td>' +
-            '<td><a href="' + h(p2.meta.result) + '" target="_blank" rel="noopener noreferrer">Result page</a></td></tr>';
+            '<td><a href="' + h(p2.meta.result) + '" target="_blank" rel="noopener noreferrer">Result page</a></td>' +
+            emptyDiff + '</tr>';
   }
   if (capturesHtml) html += section('Captures', 'captures') + capturesHtml;
 
@@ -288,41 +402,79 @@ function pageXrayTemplate(d) {
 }
 
 //
-// filmstripTemplate — two horizontal frame rails (HAR1 above HAR2),
-// each labeled, each scrollable. Frames are lazy-loaded so a 20-frame
-// run doesn't bombard the network on page load.
+// filmstripTemplate — one rail of *columns*, each column representing
+// the same timestamp in both HARs (HAR1 cell on top, HAR2 below,
+// shared timestamp underneath). The two padded frame arrays come in
+// the same length and grid step from getFilmstrip(), so iterating by
+// index lines them up cell-for-cell.
+//
+// Columns where the two HARs disagree on visual progress are tinted
+// red/amber so a regression like "HAR2 was still blank at 800 ms"
+// shows up before the user has to actually look at the pixels.
 //
 function filmstripTemplate(d) {
   const config = d.config;
   const fs1 = (d.filmstrip && d.filmstrip.frames1) || [];
   const fs2 = (d.filmstrip && d.filmstrip.frames2) || [];
 
-  function row(label, frames) {
-    if (frames.length === 0) {
-      return '<div class="filmstrip-row">' +
-               '<div class="filmstrip-label">' + h(label) + '</div>' +
-               '<p class="muted">No filmstrip data available.</p>' +
+  if (fs1.length === 0 && fs2.length === 0) {
+    return '<h3 id="filmstripHeader" class="card-title">Filmstrip</h3>' +
+           '<p class="muted">No filmstrip data available.</p>';
+  }
+
+  // Both arrays have the same length and grid step after padFrames(),
+  // but guard the lookup so a one-sided strip still renders.
+  const cells = Math.max(fs1.length, fs2.length);
+
+  function cellHtml(f, label, time, hark) {
+    const harkCls = ' filmstrip-cell--har' + hark;
+    const badge = '<span class="filmstrip-cell-badge" aria-hidden="true">' + hark + '</span>';
+    if (!f) {
+      return '<div class="filmstrip-cell filmstrip-cell--missing' + harkCls + '"' +
+               ' aria-label="' + h(label) + ' has no frame at ' + h(time) + ' s">' +
+               badge +
              '</div>';
     }
-    return '<div class="filmstrip-row">' +
-             '<div class="filmstrip-label">' + h(label) + '</div>' +
-             '<div class="filmstrip-rail">' +
-               each(frames, function (f) {
-                 return '<figure class="filmstrip-frame">' +
-                          '<a href="' + h(f.img) + '" target="_blank" rel="noopener">' +
-                            '<img src="' + h(f.img) + '" alt="" loading="lazy" decoding="async">' +
-                          '</a>' +
-                          '<figcaption>' + h(f.time) + ' s</figcaption>' +
-                        '</figure>';
-               }) +
-             '</div>' +
-           '</div>';
+    const alt = h(label) + ' at ' + h(f.time) + ' s' +
+                (typeof f.progress === 'number' ? ' (' + Math.round(f.progress) + '% rendered)' : '');
+    return '<button type="button" class="filmstrip-cell' + harkCls + ' lightbox-trigger" aria-label="Open ' + alt + '">' +
+             badge +
+             '<img src="' + h(f.img) + '" alt="' + alt + '" loading="lazy" decoding="async">' +
+           '</button>';
+  }
+
+  // Divergence: when both HARs report a numeric VisualProgress for
+  // this cell, classify by gap so the column gets a coloured accent.
+  function divergenceClass(a, b) {
+    if (typeof a !== 'number' || typeof b !== 'number') return '';
+    const gap = Math.abs(a - b);
+    if (gap < 5) return '';
+    if (gap < 20) return ' filmstrip-column--diff-mild';
+    return ' filmstrip-column--diff-strong';
+  }
+
+  let columns = '';
+  for (let i = 0; i < cells; i++) {
+    const f1 = fs1[i];
+    const f2 = fs2[i];
+    const time = (f1 && f1.time) || (f2 && f2.time) || '';
+    const diffCls = divergenceClass(f1 && f1.progress, f2 && f2.progress);
+    columns += '<figure class="filmstrip-column' + diffCls + '">' +
+                 cellHtml(f1, config.har1.label, time, 1) +
+                 cellHtml(f2, config.har2.label, time, 2) +
+                 '<figcaption class="filmstrip-time">' + h(time) + ' s</figcaption>' +
+               '</figure>';
   }
 
   return '<h3 id="filmstripHeader" class="card-title">Filmstrip</h3>' +
          '<div class="filmstrip">' +
-           row(config.har1.label, fs1) +
-           row(config.har2.label, fs2) +
+           '<div class="filmstrip-legend" aria-hidden="true">' +
+             '<span class="filmstrip-legend-label filmstrip-legend-label--har1">' + h(config.har1.label) + '</span>' +
+             '<span class="filmstrip-legend-label filmstrip-legend-label--har2">' + h(config.har2.label) + '</span>' +
+           '</div>' +
+           '<div class="filmstrip-rail" role="list" tabindex="0" aria-label="Filmstrip — use arrow keys to move between frames">' +
+             columns +
+           '</div>' +
          '</div>';
 }
 
diff --git a/public/js/compare/ux.js b/public/js/compare/ux.js
index 3c1dc2d..2d3d2ba 100644
--- a/public/js/compare/ux.js
+++ b/public/js/compare/ux.js
@@ -1,4 +1,4 @@
-/* exported showUpload, formatDate, formatURL, toggleRow, hideUpload, objectPropertiesToArray, formatTime, showLoading, errorMessage, formatBytes, blendWaterfalls */
+/* exported showUpload, formatDate, formatURL, toggleRow, hideUpload, objectPropertiesToArray, formatTime, showLoading, errorMessage, formatBytes, blendWaterfalls, toggleDiffOnly, toggleWaterfallLayout, applyWaterfallLayoutPreference */
 
 // Hide the upload functionality
 function hideUpload() {
@@ -133,6 +133,65 @@ function blendWaterfalls(value) {
   }
 }
 
+// Toggle between blended-overlay waterfall (default) and a
+// side-by-side rendering. Blending is great for spotting moved
+// requests but bad for "which row belongs to which HAR?". Persists
+// the choice across reloads.
+//
+// blendWaterfalls() sets inline opacity / pointer-events on the
+// canvas divs — those inline styles override any CSS we write —
+// so we have to clear them when entering side-by-side and re-apply
+// blend(0) when leaving, otherwise HAR2 stays invisible.
+function setWaterfallSideBySide(on) {
+  const wrapper = document.querySelector('.harwrapper');
+  const blendBox = document.getElementById('harBlendWrapper');
+  const btn = document.getElementById('waterfallLayoutToggle');
+  if (wrapper) wrapper.classList.toggle('harwrapper--side-by-side', on);
+  if (blendBox) blendBox.style.display = on ? 'none' : '';
+  if (btn) btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+
+  const har1 = document.getElementById('har1');
+  const har2 = document.getElementById('har2');
+  if (on) {
+    if (har1) { har1.style.opacity = ''; har1.style.pointerEvents = ''; }
+    if (har2) { har2.style.opacity = ''; har2.style.pointerEvents = ''; }
+  } else {
+    // Restore overlay defaults so the slider and blend math line up.
+    const slider = document.getElementById('harBlendSlider');
+    blendWaterfalls(slider ? slider.value : 0);
+  }
+}
+
+function applyWaterfallLayoutPreference() {
+  let on = false;
+  try { on = localStorage.getItem('compare.waterfallSideBySide') === '1'; }
+  catch (e) { /* localStorage blocked */ }
+  setWaterfallSideBySide(on);
+}
+
+function toggleWaterfallLayout(btn) {
+  const wrapper = document.querySelector('.harwrapper');
+  if (!wrapper) return;
+  const on = !wrapper.classList.contains('harwrapper--side-by-side');
+  setWaterfallSideBySide(on);
+  try { localStorage.setItem('compare.waterfallSideBySide', on ? '1' : '0'); }
+  catch (e) { /* localStorage blocked */ }
+}
+
+// "Only show differences" toggle for the page-x-ray table — hides
+// rows whose Δ cell renders "no change", so a long metric list
+// collapses to just the things that actually moved. Persists the
+// choice so the page comes back the way the user left it.
+function toggleDiffOnly(btn) {
+  const table = document.querySelector('.pageXrayTable');
+  if (!table) return;
+  const on = !table.classList.contains('pageXrayTable--diff-only');
+  table.classList.toggle('pageXrayTable--diff-only', on);
+  btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+  try { localStorage.setItem('compare.diffOnly', on ? '1' : '0'); }
+  catch (e) { /* localStorage blocked — preference is in-memory only */ }
+}
+
 function toggleRow(element, className, toggler) {
   const rows = element.parentNode.parentNode.parentNode.getElementsByClassName(
     className
diff --git a/src/css/elements.css b/src/css/elements.css
index 3e91282..8a53a06 100644
--- a/src/css/elements.css
+++ b/src/css/elements.css
@@ -138,6 +138,67 @@ hr {
   display: none;
 }
 
+/* Visually-hidden but exposed to assistive tech. Used for the table
+   <caption>, the skip-link target hint, and any heading/label that's
+   meaningful for screen readers but visually redundant. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+
+/* Skip-to-content link — hidden offscreen until focused, then docks
+   at the top of the viewport so keyboard users can bypass the BETA
+   ribbon and header on every page load. */
+.skip-link {
+  position: absolute;
+  top: -100px;
+  left: 12px;
+  z-index: 200;
+  padding: 8px 16px;
+  background: var(--color-surface-card);
+  color: var(--color-blue-dark);
+  border: 1px solid var(--color-info-border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: none;
+  transition: top var(--motion-fast);
+}
+.skip-link:focus,
+.skip-link:focus-visible {
+  top: 12px;
+  text-decoration: none;
+}
+
+/* Universal visible focus ring for keyboard users. Components that
+   already define their own focus styling override this; the rule
+   just guarantees nothing is silently un-focusable. */
+:focus-visible {
+  outline: 2px solid var(--color-blue);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* Respect users who prefer reduced motion — disable hover translates,
+   slider-thumb transitions, and any other animation. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 .card-title {
   margin: 0 0 12px 0;
   font-size: 1.125rem;
diff --git a/src/css/filmstrip.css b/src/css/filmstrip.css
index 7f97bef..0dac05a 100644
--- a/src/css/filmstrip.css
+++ b/src/css/filmstrip.css
@@ -1,97 +1,218 @@
 /*
  * FILMSTRIP
  * =========
- * Two parallel horizontal rails (HAR1 above HAR2), labels on the left,
- * frames flowing left-to-right with time captions underneath. Each rail
- * scrolls independently when a run has many frames; both rails share
- * an absolute time scale because the renderer sampled them on the same
- * grid (0 + every 100 ms in [FirstVisualChange, LastVisualChange]).
+ * One scrollable rail of columns. Each column is a single timestamp,
+ * with HAR1 on top, HAR2 below, the shared timestamp underneath. The
+ * two padded frame arrays come in the same length and grid step, so
+ * the eye reads each column as a single timeslice and the divergence
+ * between the two HARs is obvious side-by-side.
+ *
+ * Columns where the two HARs disagree on visual progress get a
+ * coloured accent (mild amber for small gaps, strong red for large
+ * gaps) so the regression announces itself before you have to look
+ * at the pixels.
  */
 
 .filmstrip {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 8px;
   margin-top: 12px;
 }
 
-.filmstrip-row {
-  display: grid;
-  grid-template-columns: minmax(90px, 110px) 1fr;
-  align-items: center;
-  gap: 14px;
+.filmstrip-legend {
+  display: flex;
+  gap: 16px;
+  padding: 0 4px;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
 }
 
-.filmstrip-label {
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text);
-  font-size: 0.95rem;
-  white-space: nowrap;
+.filmstrip-legend-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  &::before {
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background: var(--color-border);
+  }
 }
+.filmstrip-legend-label--har1::before { background: var(--color-blue); }
+.filmstrip-legend-label--har2::before { background: #f97316; /* orange — deliberately
+  distinct from HAR1 blue so the eye can tell which row is which without
+  reading the label. */ }
 
 .filmstrip-rail {
   display: flex;
   gap: 10px;
-  padding: 6px 4px;
+  padding: 8px;
   overflow-x: auto;
   scroll-snap-type: x proximity;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
+  user-select: none;
+
+  /* While the user drags the rail to scroll horizontally, swap the
+     cursor and silence the column hover affordances so it feels like
+     a panning interaction not a series of micro-clicks. */
+  &.is-dragging {
+    cursor: grabbing;
+
+    .filmstrip-column {
+      pointer-events: none;
+    }
+  }
+}
+.filmstrip-rail:focus-visible {
+  outline: 2px solid var(--color-blue);
+  outline-offset: 2px;
 }
 
-.filmstrip-frame {
+.filmstrip-column {
   flex: 0 0 auto;
   margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  background: var(--color-surface-card);
   scroll-snap-align: start;
+  transition: border-color var(--motion-fast), background var(--motion-fast);
+}
 
-  a {
-    display: block;
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-    border: 1px solid var(--color-border);
-    background: var(--color-surface-card);
-    transition: border-color var(--motion-fast),
-                box-shadow var(--motion-fast),
-                transform var(--motion-fast);
-
-    &:hover,
-    &:focus-visible {
-      border-color: var(--color-info-border);
-      box-shadow: var(--shadow-md);
-      transform: translateY(-1px);
-    }
-  }
+.filmstrip-column:hover {
+  border-color: var(--color-info-border);
+}
 
-  img {
-    display: block;
-    width: 140px;
-    height: auto;
-    max-height: 220px;
-    object-fit: cover;
-  }
+/* Divergence accent — column shows the two HARs as visually different
+   at this timestamp. Mild amber, strong red. The colours only paint
+   the border + caption so the screenshot content stays uncoloured. */
+.filmstrip-column--diff-mild {
+  border-color: var(--color-warning);
+  background: var(--color-warning-bg);
 
-  figcaption {
-    margin-top: 4px;
-    text-align: center;
-    font-size: 0.75rem;
-    color: var(--color-text-secondary);
-    font-variant-numeric: tabular-nums;
+  .filmstrip-time {
+    color: var(--color-warning);
+    font-weight: var(--font-weight-semibold);
   }
 }
+.filmstrip-column--diff-strong {
+  border-color: var(--color-error);
+  background: rgba(220, 38, 38, 0.07);
 
-@media (max-width: 640px) {
-  .filmstrip-row {
-    grid-template-columns: 1fr;
-    gap: 6px;
+  .filmstrip-time {
+    color: var(--color-error);
+    font-weight: var(--font-weight-semibold);
   }
+}
 
-  .filmstrip-label {
-    padding-left: 4px;
-  }
+.filmstrip-cell {
+  position: relative;
+  display: block;
+  padding: 0;
+  margin: 0;
+  background: var(--color-surface-card);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  cursor: zoom-in;
+  transition: border-color var(--motion-fast),
+              box-shadow var(--motion-fast),
+              transform var(--motion-fast);
+}
+
+.filmstrip-cell:hover,
+.filmstrip-cell:focus-visible {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
 
-  .filmstrip-frame img {
-    width: 110px;
-    max-height: 170px;
+/*
+ * HAR-specific colour treatment — left edge stripe + matching badge
+ * so the eye lands on HAR1 vs HAR2 immediately, without having to
+ * consult the legend on every column. Picked deliberately
+ * dissimilar colours (blue / orange) so colour-blind users still get
+ * a high-contrast difference. The badge gives a redundant numeric
+ * cue for safety.
+ */
+.filmstrip-cell--har1 {
+  border-left: 4px solid var(--color-blue);
+}
+.filmstrip-cell--har2 {
+  border-left: 4px solid #f97316;
+}
+.filmstrip-cell--har1:hover,
+.filmstrip-cell--har1:focus-visible {
+  border-color: var(--color-blue);
+  border-left-color: var(--color-blue);
+}
+.filmstrip-cell--har2:hover,
+.filmstrip-cell--har2:focus-visible {
+  border-color: #f97316;
+}
+
+.filmstrip-cell-badge {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 1;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: var(--font-weight-semibold);
+  color: white;
+  background: rgba(15, 23, 42, 0.6);
+  pointer-events: none;
+}
+.filmstrip-cell--har1 .filmstrip-cell-badge { background: var(--color-blue); }
+.filmstrip-cell--har2 .filmstrip-cell-badge { background: #f97316; }
+
+.filmstrip-cell img {
+  display: block;
+  width: 240px;
+  height: auto;
+  max-height: 260px;
+  object-fit: cover;
+}
+
+.filmstrip-cell--missing {
+  display: block;
+  width: 240px;
+  height: 140px;
+  background: repeating-linear-gradient(
+    45deg,
+    var(--color-surface),
+    var(--color-surface) 8px,
+    var(--color-surface-card) 8px,
+    var(--color-surface-card) 16px
+  );
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+.filmstrip-time {
+  text-align: center;
+  font-size: 0.78rem;
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  margin-top: 2px;
+}
+
+@media (max-width: 640px) {
+  .filmstrip-cell img,
+  .filmstrip-cell--missing {
+    width: 170px;
+    max-height: 190px;
   }
 }
diff --git a/src/css/lightbox.css b/src/css/lightbox.css
new file mode 100644
index 0000000..c586c34
--- /dev/null
+++ b/src/css/lightbox.css
@@ -0,0 +1,114 @@
+/*
+ * LIGHTBOX
+ * ========
+ * Click a screenshot or filmstrip frame to open it large in an
+ * in-page overlay instead of being kicked to a new tab. Closes on
+ * background click, the Esc key, or the explicit close button.
+ *
+ * The overlay sits above everything (z-index 1000), traps focus on the
+ * close button, and respects prefers-reduced-motion via the universal
+ * rule in elements.css.
+ */
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.92);
+  cursor: zoom-out;
+  opacity: 0;
+  transition: opacity var(--motion-fast);
+}
+
+.lightbox--open {
+  display: flex;
+  opacity: 1;
+}
+
+.lightbox-figure {
+  position: relative;
+  max-width: 95vw;
+  max-height: 95vh;
+  margin: 0;
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.lightbox-img {
+  display: block;
+  max-width: 95vw;
+  max-height: 85vh;
+  width: auto;
+  height: auto;
+  border-radius: var(--radius-sm);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+  background: var(--color-surface-card);
+}
+
+.lightbox-caption {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 0.95rem;
+  text-align: center;
+  max-width: 80vw;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.lightbox-close {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  background: var(--color-surface-card);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+  font-size: 1.4rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--motion-fast), transform var(--motion-fast);
+}
+.lightbox-close:hover,
+.lightbox-close:focus-visible {
+  background: var(--color-blue-tint);
+  transform: scale(1.06);
+}
+
+/*
+ * Thumbnail trigger — wraps the <img> so keyboard activation just
+ * works via native <button> semantics. The button itself stays
+ * invisible; the hover affordance lives on the inner image.
+ */
+.lightbox-trigger {
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: 0;
+  cursor: zoom-in;
+  display: inline-block;
+  line-height: 0;
+  border-radius: var(--radius-sm);
+}
+.lightbox-trigger:focus-visible {
+  outline: 2px solid var(--color-blue);
+  outline-offset: 2px;
+}
+.lightbox-trigger img {
+  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
+}
+.lightbox-trigger:hover img,
+.lightbox-trigger:focus-visible img {
+  transform: scale(1.01);
+  box-shadow: var(--shadow-md);
+}
diff --git a/src/css/main.css b/src/css/main.css
index 5ec8caf..ef80cb9 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -17,3 +17,4 @@
 @import './domains.css';
 @import './page-xray.css';
 @import './request-diff.css';
+@import './lightbox.css';
diff --git a/src/css/page-xray.css b/src/css/page-xray.css
index cc7fab0..f2484ac 100644
--- a/src/css/page-xray.css
+++ b/src/css/page-xray.css
@@ -1,10 +1,10 @@
 /*
  * PAGE X-RAY TABLE
  * ================
- * Side-by-side metric breakdown — the dominant table on the result
- * view. Table itself inherits the base table styling from elements.css;
- * this file tunes its hover, column widths and the file-upload chip
- * used to swap HARs.
+ * Side-by-side metric breakdown plus a Δ column — the dominant table
+ * on the result view. Table itself inherits the base table styling
+ * from elements.css; this file tunes its layout, the section
+ * dividers, the delta colouring and the captures sizing.
  */
 
 .userShowable {
@@ -32,11 +32,6 @@
   padding: 14px 12px 6px;
   border-bottom: 1px solid var(--color-border);
 }
-.pageXrayTable .pageXraySection:hover th {
-  /* Keep the section's own background on hover — re-set in each
-     modifier below; this rule just disables the default row-hover
-     tint that the .pageXrayTable tr:hover rule would otherwise paint. */
-}
 
 .pageXrayTable .pageXraySection--content th  { background: var(--color-info-bg);    color: var(--color-info); }
 .pageXrayTable .pageXraySection--blocking th { background: var(--color-warning-bg); color: var(--color-warning); }
@@ -45,7 +40,8 @@
 .pageXrayTable .pageXraySection--cpu th      { background: #ffedd5;                  color: #9a3412; }
 .pageXrayTable .pageXraySection--captures th { background: var(--color-surface);    color: var(--color-text-muted); }
 
-/* Repeat for hover so the bg doesn't snap to the row-hover tint. */
+/* Hover repeats the section's own bg so the row doesn't snap to the
+   default row-hover blue tint when the user mouses over a header. */
 .pageXrayTable .pageXraySection--content:hover th  { background: var(--color-info-bg); }
 .pageXrayTable .pageXraySection--blocking:hover th { background: var(--color-warning-bg); }
 .pageXrayTable .pageXraySection--visual:hover th   { background: #f3e8ff; }
@@ -68,14 +64,132 @@
   }
 }
 
-.tableXrayMetric {
-  width: 24%;
-  text-align: left;
+.tableXrayMetric    { width: 22%; text-align: left; }
+.tableXrayHarMetric,
+.tableXrayHar2Metric { width: 31%; }
+.tableXrayDiff      { width: 16%; text-align: right; padding-right: 12px; color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
+
+/*
+ * Δ column — at-a-glance regression / improvement marker. Every
+ * metric in this table is "lower is better"; HAR2 minus HAR1 > 0 is a
+ * regression (red), < 0 is an improvement (green). The colour comes
+ * from the modifier class, the layout is shared.
+ */
+.pageXrayDiff {
+  text-align: right;
+  padding-right: 12px;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+  font-size: 0.9rem;
+}
+.pageXrayDiff--better { color: var(--color-ok); }
+.pageXrayDiff--worse  { color: var(--color-error); }
+.pageXrayDiff--same   { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
+.pageXrayDiff-pct {
+  font-weight: var(--font-weight-regular);
+  opacity: 0.85;
+  margin-left: 2px;
 }
 
-.tableXrayHarMetric,
-.tableXrayHar2Metric {
-  width: 38%;
+/*
+ * "Only show differences" toggle chip — lives in the metric header
+ * next to Switch. When pressed, the user only sees rows where the Δ
+ * column actually reports a change; "no change" rows fold away.
+ */
+.chip-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  margin-left: 4px;
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-pill, 999px);
+  font-size: 0.78rem;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background var(--motion-fast), color var(--motion-fast),
+              border-color var(--motion-fast);
+}
+.chip-toggle:hover,
+.chip-toggle:focus-visible {
+  background: var(--color-blue-tint);
+  color: var(--color-blue-dark);
+  border-color: var(--color-info-border);
+}
+.chip-toggle[aria-pressed="true"] {
+  background: var(--color-blue);
+  color: white;
+  border-color: var(--color-blue);
+}
+
+/*
+ * Hide rows whose Δ cell explicitly reports "no change". Section
+ * dividers and rows without a Δ cell stay visible — the toggle is
+ * meant to reduce noise, not strip the table of its structure.
+ */
+.pageXrayTable--diff-only tr:has(td.pageXrayDiff--same) {
+  display: none;
+}
+
+/* Captures — final screenshot and recorded video. The whole point of
+   the comparison view is to spot regressions, so the captures need
+   real room: width caps at column width (responsive) with a sensible
+   minimum that still beats the previous 200px hard-cap. */
+.pageXrayCapture {
+  display: block;
+  width: 100%;
+  max-width: 460px;
+  height: auto;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-card);
+}
+
+/*
+ * CPU disclosure sub-tables. The cell hosting the sub-table loses the
+ * parent table's hover styling so the inner header/rows read on their
+ * own; the sub-table itself uses smaller text and the same Δ column
+ * styling so a regression in "scripting" reads the same way as a
+ * regression in the main table.
+ */
+.cpuBreakdownCell {
+  padding: 0;
+  background: var(--color-surface);
+}
+.pageXrayTable tr.userShowable:hover td.cpuBreakdownCell {
+  background: var(--color-surface);
+}
+
+.cpuBreakdownTable {
+  width: 100%;
+  margin: 0;
+  font-size: 0.875rem;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th, td {
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--color-border);
+  }
+  th {
+    background: var(--color-surface-card);
+    text-align: left;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-secondary);
+    font-size: 0.8rem;
+  }
+  th:nth-child(1) { width: 22%; }
+  th:nth-child(2),
+  th:nth-child(3) { width: 31%; text-align: right; }
+  th:nth-child(4) { width: 16%; text-align: right; }
+  td:nth-child(1) { text-align: left; }
+  td:nth-child(2),
+  td:nth-child(3),
+  td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
+  tbody tr:last-child td { border-bottom: 0; }
+  tbody tr:hover td { background: var(--color-blue-tint); }
 }
 
 /*
@@ -123,6 +237,17 @@
   }
 }
 
+@media screen and (max-width: 720px) {
+  /* On narrow screens, drop the Δ column to a smaller width so the
+     two HAR columns keep most of the room — the diff is still useful
+     but no longer dominant. */
+  .tableXrayMetric    { width: 28%; }
+  .tableXrayHarMetric,
+  .tableXrayHar2Metric { width: 28%; }
+  .tableXrayDiff      { width: 16%; font-size: 0.85rem; }
+  .pageXrayCapture    { max-width: 100%; }
+}
+
 @media screen and (max-width: 400px) {
   select { max-width: 100%; }
 }
diff --git a/src/css/visual-progress.css b/src/css/visual-progress.css
index b685f7e..c5d239c 100644
--- a/src/css/visual-progress.css
+++ b/src/css/visual-progress.css
@@ -49,6 +49,40 @@
     stroke-linejoin: round;
     stroke-dasharray: 4 4;
   }
+
+  /*
+   * Marker lines anchor the chart in time at FCP / LCP / FVC /
+   * Speed Index. HAR1 markers are solid; HAR2 markers are dashed
+   * (matches the HAR2 series style). Colour-coded per metric so a
+   * regressed LCP shows up as a pair of orange lines drifting apart.
+   */
+  .vp-marker {
+    stroke-width: 1.5;
+    opacity: 0.55;
+    stroke-linecap: round;
+  }
+  .vp-marker--2 {
+    stroke-dasharray: 3 3;
+  }
+  .vp-marker--fvc { stroke: #9333ea; }   /* purple */
+  .vp-marker--fcp { stroke: #16a34a; }   /* green  */
+  .vp-marker--lcp { stroke: #ea580c; }   /* orange */
+  .vp-marker--si  { stroke: #2563eb; }   /* blue   */
+
+  .vp-marker-label {
+    font-family: var(--font-sans);
+    font-size: 10px;
+    font-weight: var(--font-weight-semibold);
+    paint-order: stroke;
+    stroke: var(--color-surface-card);
+    stroke-width: 3px;
+    stroke-linejoin: round;
+  }
+  .vp-marker-label--2 { font-size: 9px; opacity: 0.85; }
+  .vp-marker-label.vp-marker--fvc { fill: #9333ea; }
+  .vp-marker-label.vp-marker--fcp { fill: #16a34a; }
+  .vp-marker-label.vp-marker--lcp { fill: #ea580c; }
+  .vp-marker-label.vp-marker--si  { fill: #2563eb; }
 }
 
 /* Thumbnail strips under the chart — absolute positioning lets us
@@ -71,7 +105,7 @@
 
 .vp-thumb-rail {
   position: relative;
-  height: 84px;
+  height: 104px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
@@ -106,9 +140,9 @@
 
   img {
     display: block;
-    width: 80px;
+    width: 120px;
     height: auto;
-    max-height: 60px;
+    max-height: 80px;
     object-fit: cover;
   }
 }
diff --git a/src/css/waterfall.css b/src/css/waterfall.css
index 4661764..2254a4f 100644
--- a/src/css/waterfall.css
+++ b/src/css/waterfall.css
@@ -51,6 +51,33 @@
   pointer-events: none;
 }
 
+/*
+ * Side-by-side mode — two waterfalls in a grid instead of stacked
+ * with a blend slider. Useful for "which row is HAR1?" — overlaying
+ * makes that question harder than it should be.
+ */
+.harwrapper--side-by-side {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+
+  .har-canvas {
+    min-width: 0;
+  }
+  .har-canvas--base,
+  .har-canvas--overlay {
+    position: static;
+    inset: auto;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (max-width: 720px) {
+  .harwrapper--side-by-side {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* Floating tooltip used by the waterfall-tools onHover hook. Lives at
    document.body so it can pop over the card without being clipped by
    the .harwrapper overflow. */