runs: subtle 'clear' button next to compare selected

app/web/static/compare-select.js

@@ -8,6 +8,7 @@
   const selected = new Set();
 
   const btn = document.getElementById('compare-btn');
+  const clearBtn = document.getElementById('compare-clear');
   const countEl = document.getElementById('compare-count');
   const slot = document.getElementById('runs-slot');
   if (!btn || !countEl || !slot) return;
@@ -16,6 +17,7 @@
     const n = selected.size;
     countEl.textContent = `(${n}/${MAX})`;
     btn.disabled = n < MIN || n > MAX;
+    if (clearBtn) clearBtn.hidden = n === 0;
   }
 
   function applyToDOM() {
@@ -58,5 +60,10 @@
     window.open(`/compare?${qs}`, '_blank', 'noopener');
   });
 
+  if (clearBtn) clearBtn.addEventListener('click', () => {
+    selected.clear();
+    applyToDOM();
+  });
+
   applyToDOM();
 })();

app/web/static/style.css

@@ -513,6 +513,18 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
   font-size: 0.76rem;
   font-style: italic;
 }
+.compare-bar .compare-clear {
+  background: transparent;
+  border: 0;
+  color: var(--faint);
+  font: inherit;
+  font-size: 0.72rem;
+  padding: 0 0.2rem;
+  cursor: pointer;
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
+}
+.compare-bar .compare-clear:hover { color: var(--alarm); }
 
 .runs-filter {
   display: flex;

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=37" />
+  <link rel="stylesheet" href="/static/style.css?v=38" />
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   <script type="importmap">
   {
@@ -305,6 +305,7 @@
       <button type="button" id="compare-btn" disabled>
         compare selected <span id="compare-count">(0/8)</span>
       </button>
+      <button type="button" id="compare-clear" class="compare-clear" hidden aria-label="clear selection">clear</button>
       <span class="compare-hint muted">pick 2&ndash;8 embeddings &rarr; side-by-side animation in a new tab</span>
     </div>
 
@@ -500,7 +501,7 @@
 <script src="/static/theme.js?v=11"></script>
 <script type="module" src="/static/dataset-picker.js?v=11"></script>
 <script type="module" src="/static/metrics.js?v=11"></script>
-<script src="/static/compare-select.js?v=3"></script>
+<script src="/static/compare-select.js?v=4"></script>
 <script src="/static/runs-filter.js?v=6"></script>
 <script type="module" src="/static/run-modal.js?v=3"></script>
 <script>