gallery: searchable fixture picker, URL-persisted picks, cached render proxies

Replace the always-open fixture chip grid with the compact reference UI:
current picks as removable pills + an "Add fixture" button opening a
searchable, grouped (Generation/Editing) dropdown, capped at 3 with a
"remove one to add another" note. Persist the 3 picks in ?fixtures= so
shared links reproduce the view; URL read/replaceState are try/catch
guarded for sandboxed iframes. Drop the external Google Fonts @import for
system font stacks so the page never errors in a sandboxed frame.

Serve thumbnails as lazy-loaded, hard-cached /render and /gt-render proxy
URLs (loading="lazy" + decoding="async" + CSS-constrained width) instead
of base64-inlining every tile, so only the ~33 visible thumbnails load and
fixture swaps / repeat visits hit cache. Requires the Space to be public.

Fix a stale test expecting the old 6-tuple _admin_delete signature.

Co-authored-by: Cursor <cursoragent@cursor.com>

app.py

@@ -24,7 +24,6 @@ rather than render).
 """
 from __future__ import annotations
 
-import base64
 import html
 import logging
 import os
@@ -676,66 +675,27 @@ def _fetch_gt_render(fixture: str) -> bytes | None:
         return None
 
 
-def _data_uri(png_bytes: bytes | None) -> str | None:
-    """Base64 ``data:`` URI for PNG bytes, or ``None``.
-
-    The gallery inlines thumbnails as data URIs rather than referencing
-    a proxy route, because while the Space is **private** HF's edge
-    404s in-browser requests to custom routes (same constraint that
-    makes the report viewer use ``srcdoc`` + base64; see
-    ``space-setup/post-gt-swap.md`` item 12). Inlining means the browser
-    makes no second request. Switches to lazy proxy URLs once the Space
-    is public.
-    """
-    if png_bytes is None:
-        return None
-    return "data:image/png;base64," + base64.b64encode(png_bytes).decode("ascii")
-
-
-# When the Space is **public**, switch the gallery from inlining base64
-# thumbnails to referencing cached proxy URLs (``/render/...`` /
-# ``/gt-render/...``). That lets the browser lazy-fetch only the ~33
-# on-screen tiles (instead of shipping every fixture x row up front) and
-# lets the CDN/browser cache them hard, so fixture-swaps and repeat
-# visits are essentially free. While **private** this must stay off: HF's
-# edge 404s in-browser fetches to our custom routes, so the only thing
-# that renders in the browser is an inlined data URI. Flip
-# ``GALLERY_PUBLIC=1`` in the Space env once the Space is made public.
-GALLERY_PUBLIC = os.getenv("GALLERY_PUBLIC", "").strip().lower() in {
-    "1", "true", "yes", "on",
-}
-
 # Long-lived immutable caching: a (submission, fixture) render never
 # changes (fixed camera + lighting; re-renders would be a new artifact),
 # so the browser/CDN can keep it forever. This is what makes fixture
-# swaps and repeat visits free once the Space is public.
+# swaps and repeat visits free: only the ~33 on-screen thumbnails are
+# fetched on first paint, and everything after that is a cache hit.
 RENDER_CACHE_CONTROL = "public, max-age=31536000, immutable"
 
 
-def _render_data_uri(submission_id: str, fixture: str) -> str | None:
-    """Resolver for a submission's per-fixture gallery thumbnail (private mode).
-
-    Inlines the render as a base64 ``data:`` URI: the only mode that
-    works in-browser while the Space is private.
-    """
-    return _data_uri(_fetch_render(submission_id, fixture))
-
-
-def _gt_data_uri(fixture: str) -> str | None:
-    """Resolver for a fixture's ground-truth gallery thumbnail (private mode)."""
-    return _data_uri(_fetch_gt_render(fixture))
-
-
 def _render_proxy_url(submission_id: str, fixture: str) -> str | None:
     """Resolver returning the cached proxy URL for a submission render.
 
-    Public mode only. Returns the route string **without** fetching the
-    bytes (that's the whole point: the browser lazy-fetches on demand).
-    The gallery only calls this for fixtures whose per-fixture status is
-    ``valid``; an absolute path resolves against the Space origin even
-    inside the iframe ``srcdoc``. A render that 404s (valid status but a
-    missing upload) degrades to the dashed cell client-side via the
-    ``<img onerror>`` hook.
+    Returns the route string **without** fetching the bytes (that's the
+    whole point: the browser lazy-fetches on demand, so only the visible
+    tiles load). The gallery only calls this for fixtures whose
+    per-fixture status is ``valid``; an absolute path resolves against
+    the Space origin even inside the iframe ``srcdoc``. A render that
+    404s (valid status but a missing upload) degrades to the dashed cell
+    client-side via the ``<img onerror>`` hook.
+
+    Requires the Space to be **public**: while private, HF's edge 404s
+    in-browser fetches to these custom routes.
     """
     return f"/render/{submission_id}/{fixture}.png"
 
@@ -745,23 +705,13 @@ def _gt_proxy_url(fixture: str) -> str | None:
     return f"/gt-render/{fixture}.png"
 
 
-def _gallery_resolvers():
-    """Pick the (render, gt) resolver pair for the current Space mode.
-
-    Public -> lazy cached proxy URLs; private -> base64-inlined data URIs.
-    """
-    if GALLERY_PUBLIC:
-        return _render_proxy_url, _gt_proxy_url
-    return _render_data_uri, _gt_data_uri
-
-
 def serve_render(submission_id: str, fixture: str) -> Response:
     """Stream a submission's per-fixture render PNG with long-lived caching.
 
-    Used only in public mode (see :data:`GALLERY_PUBLIC`): the gallery
-    references ``/render/<id>/<fixture>.png`` and the browser fetches it
-    lazily. Re-streams the dataset bytes (the Space holds the read token)
-    with an immutable ``Cache-Control`` so the CDN/browser cache it hard.
+    The gallery references ``/render/<id>/<fixture>.png`` and the browser
+    fetches it lazily. Re-streams the dataset bytes (the Space holds the
+    read token) with an immutable ``Cache-Control`` so the CDN/browser
+    cache it hard.
     """
     png = _fetch_render(submission_id, fixture)
     if png is None:
@@ -788,19 +738,19 @@ def serve_gt_render(fixture: str) -> Response:
 def _gallery_iframe_html() -> str:
     """Build the gallery as a self-contained ``srcdoc`` iframe.
 
-    Reads the live rows, renders the page with base64-inlined images,
-    and inlines the whole document into an iframe ``srcdoc`` so it gets
-    its own style context (no Gradio CSS collision) and makes no
-    second HTTP request (works on the private Space). A Hub read
-    failure degrades to an empty gallery rather than crashing the tab.
+    Reads the live rows and renders the page (thumbnails referenced as
+    cached ``/render`` / ``/gt-render`` proxy URLs, lazy-loaded by the
+    browser), then inlines the whole document into an iframe ``srcdoc``
+    so it gets its own style context (no Gradio CSS collision). A Hub
+    read failure degrades to an empty gallery rather than crashing the
+    tab.
     """
     try:
         rows = _load_rows_from_hub()
     except LeaderboardDataError:
         logger.exception("Gallery row load failed; rendering empty gallery")
         rows = []
-    render_resolver, gt_resolver = _gallery_resolvers()
-    doc = render_gallery_page(rows, render_resolver, gt_resolver)
+    doc = render_gallery_page(rows, _render_proxy_url, _gt_proxy_url)
     escaped = html.escape(doc, quote=True)
     return (
         f'<iframe srcdoc="{escaped}" '
@@ -818,11 +768,11 @@ with gr.Blocks(title="CADGenBench Leaderboard", theme=gr.themes.Soft()) as block
     with gr.Tab("Gallery"):
         # Visual-first leaderboard. The bespoke surface (sticky GT row,
         # fixture picker, thumbnail grid, compare modal) is a
-        # self-contained HTML doc inlined into an iframe `srcdoc` with
-        # base64 thumbnails, so it keeps its own style context and makes
-        # no second HTTP request (works on the private Space, where
-        # HF's edge 404s in-browser custom-route fetches). Built at boot,
-        # rebuilt on page load, and refreshed after admin actions.
+        # self-contained HTML doc inlined into an iframe `srcdoc` so it
+        # keeps its own style context. Thumbnails are lazy-loaded from
+        # the cached `/render` / `/gt-render` proxy routes (requires the
+        # Space to be public). Built at boot, rebuilt on page load, and
+        # refreshed after admin actions.
         gallery_html = gr.HTML(value=_gallery_iframe_html())
         gallery_refresh_btn = gr.Button("Refresh gallery", size="sm")
         gallery_refresh_btn.click(
@@ -1151,9 +1101,9 @@ app.add_api_route(
     serve_report,
     methods=["GET"],
 )
-# Cached render proxies the gallery references in public mode (no-ops while
-# private, where the gallery inlines base64 instead). Registered before the
-# Gradio mount so they're not shadowed by the catch-all sub-app.
+# Cached render proxies the gallery's lazy-loaded thumbnails point at.
+# Registered before the Gradio mount so they're not shadowed by the
+# catch-all sub-app.
 app.add_api_route(
     "/render/{submission_id}/{fixture}.png",
     serve_render,

gallery.py

@@ -25,16 +25,22 @@ The page is data-driven: :func:`build_gallery_payload` shapes the
 top-10 verified rows + the fixture universe into a small JSON blob,
 which the page's JS renders. Render lookups are isolated behind the
 ``renderFor`` / ``gtRenderFor`` JS hooks (mirroring the design brief),
-pointed at the Space's render-proxy routes:
+pointed at the cached render-proxy URLs the caller injects via the two
+resolvers:
 
-- ``renderFor(sub, fixtureId)``  -> ``/render/<id>/<fixture>.png``
-  (or ``null`` when the per-fixture status is invalid/missing, which
-  draws the dashed "invalid generation" cell).
+- ``renderFor(sub, fixtureId)``  -> ``/render/<id>/<fixture>.png`` (or
+  ``null`` when the per-fixture status is invalid/missing, which draws
+  the dashed "invalid generation" cell).
 - ``gtRenderFor(fixtureId)``     -> ``/gt-render/<fixture>.png``.
 
-Thumbnail clicks open the existing per-submission report (served by
-the Space's ``/reports/<id>.html`` proxy) deep-linked to the clicked
-fixture's card via ``#fixture=<name>``.
+Thumbnails are lazy-loaded by the browser, so only the ~33 on-screen
+tiles are fetched and CDN/browser caching makes fixture-swaps and
+repeat visits essentially free. This requires the Space to be
+**public** (HF's edge 404s in-browser fetches to our custom routes
+while private).
+
+Thumbnail clicks open a GT-vs-output compare modal that points at the
+existing per-submission detail/report view.
 """
 from __future__ import annotations
 
@@ -46,7 +52,8 @@ import json
 GALLERY_TOP_N = 10
 
 # Default number of fixture columns the picker opens with, capped at the
-# size of the available fixture universe.
+# size of the available fixture universe. Also the hard cap on the
+# picker (the matrix only stays comparable with a small column count).
 DEFAULT_FIXTURE_COLUMNS = 3
 
 
@@ -93,10 +100,11 @@ def _fixture_universe(rows: list[dict]) -> list[dict]:
 def _sub_payload(row: dict, render_resolver) -> dict:
     """Project one verified row into the compact shape the page JS needs.
 
-    ``render_resolver(submission_id, fixture_id)`` returns the image
-    source (a base64 data URI on the private Space, a proxy URL once
-    public) for a *valid* fixture, or ``None``. Invalid/missing
-    fixtures carry ``img: null`` so the page draws the dashed cell.
+    ``render_resolver(submission_id, fixture_id)`` returns the cached
+    proxy URL for a *valid* fixture, or ``None``. Invalid/missing
+    fixtures carry ``img: null`` so the page draws the dashed cell;
+    note validity is driven by the per-fixture ``status`` in the data,
+    not by whether an image fetch happened to succeed.
     """
     by_task = row.get("score_by_task_type") or {}
     pfs = row.get("per_fixture_scores") or {}
@@ -129,8 +137,7 @@ def build_gallery_payload(rows: list[dict], render_resolver, gt_resolver) -> dic
     """Shape live rows into the JSON the gallery page renders from.
 
     Image sources are injected via two resolvers so this module stays
-    agnostic to how renders are served (base64-inlined for the private
-    Space, proxy URLs once public):
+    agnostic to how the cached render URLs are constructed:
 
     - ``render_resolver(submission_id, fixture_id) -> str | None``
     - ``gt_resolver(fixture_id) -> str | None``
@@ -154,10 +161,13 @@ def build_gallery_payload(rows: list[dict], render_resolver, gt_resolver) -> dic
 def render_gallery_page(rows: list[dict], render_resolver, gt_resolver) -> str:
     """Build the full standalone gallery HTML document from live rows.
 
-    ``render_resolver`` / ``gt_resolver`` supply image sources (see
-    :func:`build_gallery_payload`). The caller (the Space) inlines
-    base64 data URIs while private; a local harness can do the same so
-    the page is self-contained with no second requests.
+    ``render_resolver`` / ``gt_resolver`` supply the cached render-proxy
+    URLs (see :func:`build_gallery_payload`); the browser lazy-loads only
+    the on-screen thumbnails.
+
+    The document is self-contained and uses **system font stacks only**
+    (no external font CDN fetch) so it never errors inside a sandboxed
+    iframe.
     """
     payload = build_gallery_payload(rows, render_resolver, gt_resolver)
     data_json = json.dumps(payload, ensure_ascii=False)
@@ -176,11 +186,11 @@ def render_gallery_page(rows: list[dict], render_resolver, gt_resolver) -> str:
 
 
 # ---------------------------------------------------------------------------
-# CSS (ported from the reference prototype, trimmed to the gallery surface)
+# CSS (ported from the reference prototype, trimmed to the gallery surface).
+# Self-contained: system font stacks only, no external font CDN fetch.
 # ---------------------------------------------------------------------------
 
 _CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
 :root {
   --bg: #f4f5f7; --panel: #ffffff; --ink: #14161c; --ink-soft: #5b6170;
   --ink-faint: #9aa0ad; --line: #e3e5ea; --line-strong: #d2d5dd;
@@ -189,12 +199,13 @@ _CSS = """
   --gt: #0f766e; --gt-soft: #e6f4f2; --thumb-bg: #eceef2;
   --shadow: 0 1px 2px rgba(20,22,28,.04), 0 8px 24px rgba(20,22,28,.06);
   --radius: 14px;
+  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
 }
 * { box-sizing: border-box; }
 body {
   margin: 0; background: var(--bg); color: var(--ink);
-  font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased;
-  padding: 18px 0 60px;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased; padding: 18px 0 60px;
 }
 .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
 
@@ -207,17 +218,53 @@ body {
   letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 12px;
 }
 .picker-help { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-size: 12px; }
-.chips { display: flex; gap: 10px; flex-wrap: wrap; }
-.chip {
-  font-family: inherit; font-size: 13.5px; cursor: pointer;
-  border: 1px solid var(--line-strong); background: #fafbfc; color: var(--ink-soft);
-  padding: 9px 14px; border-radius: 10px; display: flex; align-items: center;
-  gap: 8px; transition: all .14s ease; font-weight: 500;
-}
-.chip:hover { border-color: var(--accent); color: var(--ink); }
-.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
-.chip .tag { font-family: 'Space Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.05); text-transform: uppercase; letter-spacing: .03em; }
-.chip.on .tag { background: rgba(67,56,202,.12); }
+
+/* Compact picker: current picks as removable pills + Add + Reset */
+.picker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.pills { display: flex; gap: 8px; flex-wrap: wrap; }
+.pill {
+  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
+  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent);
+  padding: 8px 8px 8px 12px; border-radius: 10px; font-family: inherit;
+}
+.pill .pgroup { font-family: var(--mono); font-size: 10px; color: var(--accent); opacity: .7; }
+.pill .pname { font-family: var(--mono); font-weight: 700; }
+.pill .premove { cursor: pointer; border: none; background: rgba(67,56,202,.12); color: var(--accent); width: 18px; height: 18px; border-radius: 5px; font-size: 13px; line-height: 1; display: grid; place-items: center; font-family: inherit; }
+.pill .premove:hover { background: var(--accent); color: #fff; }
+
+.picker-anchor { position: relative; }
+.add-fixture {
+  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink-soft);
+  background: #fafbfc; border: 1px dashed var(--line-strong); padding: 9px 14px; border-radius: 10px;
+  transition: all .14s ease;
+}
+.add-fixture:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
+.add-fixture:disabled { opacity: .45; cursor: not-allowed; }
+.reset-fixtures {
+  font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--ink-faint);
+  background: none; border: none; padding: 9px 6px; text-decoration: underline; text-underline-offset: 2px;
+}
+.reset-fixtures:hover { color: var(--accent); }
+
+/* Searchable grouped dropdown over all fixtures */
+.popover {
+  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 340px;
+  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(20,22,28,.18); overflow: hidden;
+}
+.popover[hidden] { display: none; }
+.popover-search { width: 100%; border: none; border-bottom: 1px solid var(--line); padding: 13px 15px; font-family: inherit; font-size: 14px; outline: none; }
+.popover-search:focus { background: #fbfbff; }
+.popover-list { max-height: 300px; overflow-y: auto; padding: 6px; }
+.popover-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 10px 10px 5px; position: sticky; top: 0; background: var(--panel); }
+.popover-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
+.popover-item:hover { background: var(--accent-soft); }
+.popover-item.is-selected { color: var(--accent); font-weight: 600; }
+.popover-item.is-selected::after { content: '\\2713'; margin-left: auto; color: var(--accent); }
+.popover-item .itask { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.05); text-transform: uppercase; }
+.popover-item .iname { font-family: var(--mono); font-weight: 700; }
+.popover-empty { padding: 18px; text-align: center; color: var(--ink-faint); font-size: 13px; }
+.popover-cap { padding: 10px 12px; font-size: 11.5px; color: #b45309; background: #fdf3e7; border-top: 1px solid var(--line); }
 
 .section-label {
   display: flex; align-items: center; gap: 10px; margin: 28px 0 14px;
@@ -225,7 +272,7 @@ body {
   text-transform: uppercase; letter-spacing: .05em;
 }
 .section-label .verified-pill {
-  font-family: 'Space Mono', monospace; font-size: 10px; color: var(--good);
+  font-family: var(--mono); font-size: 10px; color: var(--good);
   background: var(--good-soft); padding: 3px 8px; border-radius: 999px;
   letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px;
 }
@@ -245,7 +292,7 @@ body {
 }
 .grid-head > div { padding: 13px 14px; display: flex; align-items: center; }
 .grid-head .fix-h { flex-direction: column; align-items: flex-start; gap: 2px; }
-.grid-head .fix-h .fname { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; }
+.grid-head .fix-h .fname { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; }
 .grid-head .fix-h .ftask { font-size: 9.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
 
 .grow.gt-row {
@@ -263,7 +310,7 @@ body {
 .grow.sub-row:hover { background: #fafbff; }
 
 .rank {
-  padding: 16px 14px; font-family: 'Space Mono', monospace; font-weight: 700;
+  padding: 16px 14px; font-family: var(--mono); font-weight: 700;
   font-size: 15px; color: var(--ink-faint); display: flex; align-items: center;
   justify-content: center;
 }
@@ -271,11 +318,11 @@ body {
 
 .ident { padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
 .ident .sub-name { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
-.ident .submitter { font-size: 12px; color: var(--ink-faint); font-family: 'Space Mono', monospace; }
+.ident .submitter { font-size: 12px; color: var(--ink-faint); font-family: var(--mono); }
 
 .score-cell { padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
 .score-cell .agg { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
-.score-cell .validity { font-size: 11.5px; font-family: 'Space Mono', monospace; color: var(--good); font-weight: 700; display: flex; align-items: baseline; gap: 5px; }
+.score-cell .validity { font-size: 11.5px; font-family: var(--mono); color: var(--good); font-weight: 700; display: flex; align-items: baseline; gap: 5px; }
 .score-cell .validity .vlabel { font-weight: 400; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
 .score-cell .validity.imperfect { color: #b45309; }
 .score-cell .validity.imperfect .vlabel { color: #c98a3a; }
@@ -287,6 +334,8 @@ body {
   transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
 }
 .thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,22,28,.14); border-color: var(--accent); }
+/* Display width is CSS-constrained so the browser downscales the existing
+   full-res render: no resize step, no new assets. */
 .thumb img { width: 100%; height: 100%; display: block; object-fit: contain; }
 .thumb .open-hint {
   position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
@@ -297,7 +346,7 @@ body {
 
 .thumb.failed { cursor: default; background: var(--bad-soft); border: 1px dashed #e9b3ae; display: flex; align-items: center; justify-content: center; }
 .thumb.failed:hover { transform: none; box-shadow: none; border-color: #e9b3ae; }
-.thumb.failed .ftag { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.4; }
+.thumb.failed .ftag { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.4; }
 
 .sub-row.open { background: #fafbff; }
 .detail {
@@ -329,15 +378,16 @@ body {
 .modal-back.show { display: flex; }
 .modal { background: var(--panel); border-radius: 16px; width: 100%; max-width: 620px; padding: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
 .modal h4 { margin: 0 0 4px; font-size: 18px; }
-.modal .msub { color: var(--ink-faint); font-size: 13px; font-family: 'Space Mono', monospace; margin-bottom: 18px; }
+.modal .msub { color: var(--ink-faint); font-size: 13px; font-family: var(--mono); margin-bottom: 18px; }
 .modal-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
 .modal-compare figure { margin: 0; }
 .modal-compare figcaption { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
 .modal-compare .mthumb { width: 100%; aspect-ratio: 16/10; border-radius: 8px; background: var(--thumb-bg); border: 1px solid var(--line); overflow: hidden; }
 .modal-compare .mthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
 .modal-compare .mthumb.failed { background: var(--bad-soft); border: 1px dashed #e9b3ae; display: flex; align-items: center; justify-content: center; }
-.modal-compare .mthumb.failed span { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
+.modal-compare .mthumb.failed span { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
 .modal-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-soft); background: var(--accent-soft); padding: 12px 14px; border-radius: 10px; }
+.modal-note a { color: var(--accent); font-weight: 600; }
 .modal-close { margin-top: 20px; width: 100%; padding: 11px; border: 1px solid var(--line-strong); background: #fafbfc; border-radius: 10px; font-family: inherit; font-weight: 600; cursor: pointer; font-size: 14px; }
 .modal-close:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
 """
@@ -350,8 +400,18 @@ body {
 _BODY = """
 <div class="wrap">
   <div class="controls">
-    <div class="label">Fixtures shown <span class="picker-help">- pick 3 to compare across all models (changes columns globally)</span></div>
-    <div class="chips" id="chips"></div>
+    <div class="label">Fixtures shown <span class="picker-help">- pick up to 3 to compare across all models (changes columns globally)</span></div>
+    <div class="picker-row">
+      <div class="pills" id="pills"></div>
+      <div class="picker-anchor">
+        <button class="add-fixture" id="addFixtureBtn">+ Add fixture</button>
+        <div class="popover" id="popover" hidden>
+          <input type="text" class="popover-search" id="popoverSearch" placeholder="Search fixtures..." autocomplete="off">
+          <div class="popover-list" id="popoverList"></div>
+        </div>
+      </div>
+      <button class="reset-fixtures" id="resetFixtures" title="Reset to the default comparison set">Reset</button>
+    </div>
   </div>
   <div class="section-label">
     Validated leaderboard - Top 10
@@ -382,14 +442,16 @@ _BODY = """
 # ---------------------------------------------------------------------------
 
 _JS = """
-const DATA = window.GALLERY_DATA || {fixtures: [], subs: [], selected: []};
-const FIXTURES = DATA.fixtures;
-let selected = (DATA.selected || []).slice();
+const DATA = window.GALLERY_DATA || {fixtures: [], subs: [], selected: [], gtImg: {}};
+const FIXTURES = DATA.fixtures || [];
+const MAX_FIXTURES = 3;
+const DEFAULT_FIXTURES = (DATA.selected || []).slice();
+let selected = DEFAULT_FIXTURES.slice();
 
 // --- Render hooks. ---------------------------------------------------------
-// The image sources are injected by the server (base64 data URIs while the
-// Space is private; proxy URLs once public), so these just read the payload.
-// renderFor returns null for an invalid/missing fixture -> dashed cell.
+// The image sources are cached render-proxy URLs injected by the server, so
+// these just read the payload (the browser lazy-loads only the on-screen
+// tiles). renderFor returns null for an invalid/missing fixture -> dashed cell.
 function renderFor(sub, fxId) {
   const c = sub.cells[fxId];
   return c ? c.img : null;
@@ -403,29 +465,134 @@ function fmt(x, d) { return (x === null || x === undefined) ? '-' : Number(x).to
 function pct(x) { return (x === null || x === undefined) ? '-' : Math.round(Number(x) * 100) + '%'; }
 function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
 function fixtureMeta(id) { return FIXTURES.find(f => f.id === id); }
+function groupLabel(task) { return task ? (task.charAt(0).toUpperCase() + task.slice(1)) : 'Other'; }
+function groupOf(f) { return groupLabel(f ? f.task : ''); }
+
+// Distinct group labels in fixture order (e.g. Generation, Editing).
+const GROUPS = (() => {
+  const seen = [];
+  FIXTURES.forEach(f => { const g = groupOf(f); if (!seen.includes(g)) seen.push(g); });
+  return seen;
+})();
+
+// --- URL persistence: ?fixtures=a,b,c -------------------------------------
+// Wrapped in try/catch: history.replaceState and the URL read both throw in
+// sandboxed iframe contexts (this caused an "Uncaught Error: Script error.").
+function loadSelectedFromURL() {
+  try {
+    const p = new URLSearchParams(location.search).get('fixtures');
+    if (!p) return;
+    const ids = p.split(',').map(s => s.trim())
+      .filter(id => FIXTURES.some(f => f.id === id)).slice(0, MAX_FIXTURES);
+    if (ids.length) selected = ids;
+  } catch (e) { /* sandboxed context -> keep defaults */ }
+}
+function syncURL() {
+  try {
+    const u = new URL(location.href);
+    u.searchParams.set('fixtures', selected.join(','));
+    history.replaceState(null, '', u);
+  } catch (e) { /* sandboxed/cross-origin context -> URL persistence no-ops */ }
+}
 
-function buildChips() {
-  const wrap = document.getElementById('chips');
-  wrap.innerHTML = FIXTURES.map(f => {
-    const on = selected.includes(f.id);
-    const tag = f.task ? '<span class="tag">' + esc(f.task) + '</span>' : '';
-    return '<button class="chip ' + (on ? 'on' : '') + '" data-id="' + esc(f.id) + '">' + tag + esc(f.name) + '</button>';
+// --- Fixture picker: pills + searchable grouped dropdown -------------------
+function renderPills() {
+  const wrap = document.getElementById('pills');
+  if (!selected.length) { wrap.innerHTML = ''; return; }
+  wrap.innerHTML = selected.map(id => {
+    const f = fixtureMeta(id);
+    const grp = (f && f.task) ? '<span class="pgroup">' + esc(groupOf(f)) + '</span>' : '';
+    return '<span class="pill">' + grp
+      + '<span class="pname">' + esc(f ? f.name : id) + '</span>'
+      + '<button class="premove" data-remove="' + esc(id) + '" title="Remove" aria-label="Remove ' + esc(id) + '">\\u00d7</button>'
+      + '</span>';
   }).join('');
-  wrap.querySelectorAll('.chip').forEach(c => {
-    c.onclick = () => {
-      const id = c.dataset.id;
+  wrap.querySelectorAll('.premove').forEach(b => {
+    b.onclick = () => {
+      if (selected.length <= 1) return;          // keep at least 1 column
+      selected = selected.filter(x => x !== b.dataset.remove);
+      refreshPicker(); buildGallery(); syncURL();
+    };
+  });
+}
+
+let popoverQuery = '';
+function renderPopoverList() {
+  const list = document.getElementById('popoverList');
+  const q = popoverQuery.trim().toLowerCase();
+  const match = f => !q || f.name.toLowerCase().includes(q)
+    || groupOf(f).toLowerCase().includes(q) || (f.task || '').toLowerCase().includes(q);
+  let html = '';
+  GROUPS.forEach(g => {
+    const items = FIXTURES.filter(f => groupOf(f) === g && match(f));
+    if (!items.length) return;
+    html += '<div class="popover-group">' + esc(g) + '</div>';
+    html += items.map(f => {
+      const sel = selected.includes(f.id);
+      const tag = f.task ? '<span class="itask">' + esc(f.task) + '</span>' : '';
+      return '<div class="popover-item ' + (sel ? 'is-selected' : '') + '" data-pick="' + esc(f.id) + '">'
+        + tag + '<span class="iname">' + esc(f.name) + '</span></div>';
+    }).join('');
+  });
+  if (!html) html = '<div class="popover-empty">No fixtures match \\u201c' + esc(popoverQuery) + '\\u201d.</div>';
+  list.innerHTML = html;
+  // At the cap, show a note rather than silently dropping a pick.
+  const existingCap = document.getElementById('popoverCap');
+  if (existingCap) existingCap.remove();
+  if (selected.length >= MAX_FIXTURES) {
+    list.insertAdjacentHTML('afterend',
+      '<div class="popover-cap" id="popoverCap">Max ' + MAX_FIXTURES + ' fixtures - remove one to add another.</div>');
+  }
+  list.querySelectorAll('.popover-item').forEach(it => {
+    it.onclick = () => {
+      const id = it.dataset.pick;
       if (selected.includes(id)) {
-        if (selected.length <= 1) return;      // keep at least 1
+        if (selected.length <= 1) return;        // keep at least 1
         selected = selected.filter(x => x !== id);
       } else {
-        if (selected.length >= 3) selected.shift();  // cap at 3, drop oldest
+        if (selected.length >= MAX_FIXTURES) return; // hard cap; user removes to add
         selected.push(id);
       }
-      buildChips(); buildGallery();
+      refreshPicker(); buildGallery(); syncURL();
     };
   });
 }
 
+function refreshPicker() {
+  renderPills();
+  renderPopoverList();
+  const add = document.getElementById('addFixtureBtn');
+  if (add) add.disabled = !FIXTURES.length;
+}
+
+function openPopover() {
+  const pop = document.getElementById('popover');
+  pop.hidden = false;
+  popoverQuery = '';
+  document.getElementById('popoverSearch').value = '';
+  renderPopoverList();
+  document.getElementById('popoverSearch').focus();
+}
+function closePopover() { document.getElementById('popover').hidden = true; }
+
+function wirePicker() {
+  document.getElementById('addFixtureBtn').onclick = (e) => {
+    e.stopPropagation();
+    const pop = document.getElementById('popover');
+    pop.hidden ? openPopover() : closePopover();
+  };
+  document.getElementById('popoverSearch').oninput = (e) => { popoverQuery = e.target.value; renderPopoverList(); };
+  document.getElementById('resetFixtures').onclick = () => {
+    selected = DEFAULT_FIXTURES.slice(); refreshPicker(); buildGallery(); syncURL(); closePopover();
+  };
+  // click-outside closes the popover
+  document.addEventListener('click', (e) => {
+    const anchor = document.querySelector('.picker-anchor');
+    if (anchor && !anchor.contains(e.target)) closePopover();
+  });
+}
+
+// --- Gallery render -------------------------------------------------------
 function buildHead() {
   const head = document.getElementById('gridHead');
   let h = '<div>#</div><div>Submission</div><div>Score</div>';
@@ -437,17 +604,26 @@ function buildHead() {
   head.innerHTML = h;
 }
 
+// Fall back to the dashed cell if a render URL 404s (a fixture marked valid
+// whose render upload is missing) instead of showing a broken image.
+function imgFail(img) {
+  const cell = img.closest('.thumb-cell');
+  if (cell) cell.innerHTML = '<div class="thumb failed"><span class="ftag">invalid<br>generation</span></div>';
+}
+
 function thumbHTML(url, attrs, clickable) {
   if (!url) {
     return '<div class="thumb failed"><span class="ftag">invalid<br>generation</span></div>';
   }
   const hint = clickable ? '<span class="open-hint">open</span>' : '';
-  return '<div class="thumb" ' + attrs + '><img loading="lazy" src="' + url + '" alt="">' + hint + '</div>';
+  return '<div class="thumb" ' + attrs + '>'
+    + '<img loading="lazy" decoding="async" src="' + url + '" alt="" onerror="imgFail(this)">'
+    + hint + '</div>';
 }
 
 function buildGallery() {
   const g = document.getElementById('gallery');
-  g.style.setProperty('--ncol', selected.length);
+  g.style.setProperty('--ncol', Math.max(selected.length, 1));
   buildHead();
   g.querySelectorAll('.grow').forEach(n => n.remove());
 
@@ -555,8 +731,11 @@ function syncHeadHeight() {
   if (head) document.documentElement.style.setProperty('--head-h', head.offsetHeight + 'px');
 }
 
-buildChips();
+loadSelectedFromURL();
+wirePicker();
+refreshPicker();
 buildGallery();
+syncURL();
 window.addEventListener('resize', syncHeadHeight);
 if (document.fonts && document.fonts.ready) document.fonts.ready.then(syncHeadHeight);
 """

tests/test_proxy.py

@@ -263,7 +263,7 @@ def test_admin_delete_refreshes_gallery(monkeypatch):
     monkeypatch.setattr(app, "_gallery_iframe_html", lambda: "<iframe>empty</iframe>")
     monkeypatch.setattr(app.gr, "Info", lambda *a, **k: None)
 
-    admin_df, validated, unvalidated, gallery_html, _confirm, _delete_btn = (
+    admin_df, validated, unvalidated, gallery_html, _confirm, _delete_btn, _stop_btn = (
         app._admin_delete(table_df, True, types.SimpleNamespace(username="michaelr27"))
     )