From 41ce5ee88a0211a9b9faf360407c9ecea3574c66 Mon Sep 17 00:00:00 2001
From: Michael Pilosov <consistentbayes@gmail.com>
Date: Wed, 22 Apr 2026 14:37:04 -0600
Subject: [PATCH] compare: highlight mismatched N/T/J/s params in red between
 the two panels

---
 app/web/static/compare.js      | 33 +++++++++++++++++++++++++++++++--
 app/web/static/style.css       |  4 ++++
 app/web/templates/compare.html |  4 ++--
 app/web/templates/index.html   |  2 +-
 4 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/app/web/static/compare.js b/app/web/static/compare.js
index 9af134c..e274b0e 100644
--- a/app/web/static/compare.js
+++ b/app/web/static/compare.js
@@ -365,12 +365,39 @@ function renderError(panelEl, stem, msg) {
   panelEl.querySelector('[data-role="params"]').textContent = '(error)';
 }
 
+const PARAM_FIELDS = [
+  { key: 'num_points',    prefix: 'N' },
+  { key: 'num_timesteps', prefix: 'T' },
+  { key: 'jitter_scale',  prefix: 'J' },
+  { key: 'seed',          prefix: 's' },
+];
+
 function renderHeader(panelEl, data) {
   const m = data.meta || {};
   panelEl.querySelector('[data-role="embedder"]').textContent = m.embedder || '—';
   panelEl.querySelector('[data-role="generator"]').textContent = m.generator || '—';
-  const terse = `N${m.num_points ?? '?'} / T${m.num_timesteps ?? '?'} / J${m.jitter_scale ?? '?'} / s${m.seed ?? '?'}`;
-  panelEl.querySelector('[data-role="params"]').textContent = terse;
+  const host = panelEl.querySelector('[data-role="params"]');
+  host.textContent = '';
+  PARAM_FIELDS.forEach(({ key, prefix }, i) => {
+    if (i > 0) host.appendChild(document.createTextNode(' / '));
+    const span = document.createElement('span');
+    span.className = 'param';
+    span.dataset.key = key;
+    span.textContent = `${prefix}${m[key] ?? '?'}`;
+    host.appendChild(span);
+  });
+}
+
+// Toggle .diff on each param span where the two panels disagree.
+function markParamDiffs(metaA, metaB) {
+  if (!metaA || !metaB) return;
+  for (const { key } of PARAM_FIELDS) {
+    const differs = metaA[key] !== metaB[key];
+    for (const panelEl of [panelElA, panelElB]) {
+      const span = panelEl.querySelector(`[data-role="params"] .param[data-key="${key}"]`);
+      if (span) span.classList.toggle('diff', differs);
+    }
+  }
 }
 
 // -------- main ------------------------------------------------------------
@@ -411,6 +438,8 @@ async function main() {
     renderError(panelElB, STEM_B, resB.reason?.message || String(resB.reason));
   }
 
+  if (panels.a && panels.b) markParamDiffs(panels.a.data.meta, panels.b.data.meta);
+
   // Nothing loaded — no animation loop to start.
   if (!panels.a && !panels.b) return;
 
diff --git a/app/web/static/style.css b/app/web/static/style.css
index a35a20e..bf6d257 100644
--- a/app/web/static/style.css
+++ b/app/web/static/style.css
@@ -1527,6 +1527,10 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
   font-size: 0.74rem;
   flex-basis: 100%;
 }
+.compare-panel-head .panel-params .param.diff {
+  color: var(--alarm);
+  font-weight: 600;
+}
 
 .compare-panel-head .panel-stem {
   margin-left: auto;
diff --git a/app/web/templates/compare.html b/app/web/templates/compare.html
index 80d9c5f..29bc1aa 100644
--- a/app/web/templates/compare.html
+++ b/app/web/templates/compare.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>embedding notebook &middot; compare</title>
-  <link rel="stylesheet" href="/static/style.css?v=23" />
+  <link rel="stylesheet" href="/static/style.css?v=24" />
   <script type="importmap">
   {
     "imports": {
@@ -111,6 +111,6 @@
 </section>
 
 <script src="/static/theme.js?v=11"></script>
-<script type="module" src="/static/compare.js?v=3"></script>
+<script type="module" src="/static/compare.js?v=4"></script>
 </body>
 </html>
diff --git a/app/web/templates/index.html b/app/web/templates/index.html
index 7c05d3b..e1a6ac0 100644
--- a/app/web/templates/index.html
+++ b/app/web/templates/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>embedding notebook</title>
-  <link rel="stylesheet" href="/static/style.css?v=23" />
+  <link rel="stylesheet" href="/static/style.css?v=24" />
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   <script type="importmap">
   {