leaderboard: rebuild Tasks tab as grouped thumbnail grid

Replace the flat 84-row Tasks list with a responsive card grid grouped
by type (Generation / Editing) with live count badges, a number search,
and an All/Generation/Editing segmented filter. Each card shows the
task's input geometry thumbnail (generation -> input.png; editing ->
renders/iso.png, the iso render of input.step) plus the sample number
and type tag. Thumbnails use loading="lazy" + decoding="async" with
reserved 4:3 dimensions and CSS-constrained width so the 84 images don't
all fetch at once. Card click opens the task's existing detail card
(prompt + input), keeping j/k/Esc navigation. System fonts only.

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

tasks.py

@@ -161,20 +161,115 @@ def _render_task_card(task: dict, idx: int, asset_url) -> str:
     return "\n".join(p)
 
 
-def _render_summary_table(tasks: list[dict]) -> str:
-    rows = [
-        '<table class="summary-table" id="summary-table">',
-        "<thead><tr><th>Sample</th><th>Type</th></tr></thead><tbody>",
-    ]
-    for i, t in enumerate(tasks):
-        rows.append(
-            f'<tr onclick="showDetail({i})" style="cursor:pointer">'
-            f'<td>{html.escape(t["name"])}</td>'
-            f"<td>{_type_pill(t['task_type'])}</td>"
-            f"</tr>"
+def _thumb_url(task: dict, asset_url) -> str:
+    """Resolve a task's grid thumbnail to an existing input asset.
+
+    The thumbnail is always the task's *input geometry*, but the source
+    differs by type:
+
+    - generation -> the input drawing ``input.png`` (the first listed
+      input image, which defaults to ``input.png``).
+    - editing -> the isometric render of the input STEP, i.e.
+      ``renders/iso.png`` (same render style/camera used by the detail
+      card's render grid and elsewhere; generated once in the pipeline
+      and served cached, never rendered on the fly).
+
+    A missing file degrades client-side via the ``onerror`` hook, which
+    hides the broken image and leaves the placeholder thumb background.
+    """
+    name = task["name"]
+    if task["task_type"] == "editing":
+        return asset_url(name, "renders/iso.png")
+    images = task.get("image_inputs") or ["input.png"]
+    return asset_url(name, images[0])
+
+
+def _render_card(task: dict, idx: int, asset_url) -> str:
+    """One grid card: lazy thumbnail + sample number + type tag.
+
+    ``idx`` is the task's global index, used so a card click jumps to the
+    matching detail card via ``showDetail(idx)``. ``data-type`` /
+    ``data-name`` drive the client-side type filter and number search.
+
+    The ``<img>`` carries ``loading="lazy"`` + ``decoding="async"`` so
+    only the cards in view fetch on first paint, and intrinsic
+    ``width``/``height`` (4:3) plus the ``aspect-ratio`` thumb container
+    reserve space to avoid layout shift. The card column caps display
+    width, so the browser downscales the cached input into the slot.
+    """
+    name = task["name"]
+    ttype = task["task_type"]
+    cls = "editing" if ttype == "editing" else "generation"
+    url = _thumb_url(task, asset_url)
+    return (
+        f'<button class="card" type="button" data-idx="{idx}" '
+        f'data-type="{cls}" data-name="{html.escape(name, quote=True)}" '
+        f'onclick="showDetail({idx})">'
+        '<span class="thumb">'
+        f'<img loading="lazy" decoding="async" width="180" height="135" '
+        f'src="{html.escape(url, quote=True)}" '
+        f'alt="{html.escape(name, quote=True)}" onerror="taskImgFail(this)">'
+        "</span>"
+        '<span class="meta">'
+        f'<span class="sample">{html.escape(name)}</span>'
+        f'<span class="type {cls}">{html.escape(ttype)}</span>'
+        "</span>"
+        "</button>"
+    )
+
+
+# Display order + header label/color class for the two task groups.
+_GROUPS = (("generation", "Generation", "gen"), ("editing", "Editing", "edit"))
+
+
+def _render_grid(tasks: list[dict], asset_url) -> str:
+    """Grouped responsive card grid (Generation, then Editing).
+
+    Each group renders a header with a live count badge and a grid of
+    cards; the count and visibility are kept in sync client-side as the
+    search/filter change. A hidden empty-state shows when nothing
+    matches.
+    """
+    out = ['<div id="groups">']
+    for key, label, cls in _GROUPS:
+        items = [
+            (i, t)
+            for i, t in enumerate(tasks)
+            if (t["task_type"] == "editing") == (key == "editing")
+        ]
+        if not items:
+            continue
+        cards = "".join(_render_card(t, i, asset_url) for i, t in items)
+        out.append(
+            f'<section class="group" data-group="{key}">'
+            f'<div class="group-head {cls}"><span class="glabel">{label}</span> '
+            f'<span class="gcount" data-count-for="{key}">{len(items)}</span></div>'
+            f'<div class="grid">{cards}</div>'
+            "</section>"
         )
-    rows.append("</tbody></table>")
-    return "\n".join(rows)
+    out.append(
+        '<div class="empty" id="empty-state" style="display:none">'
+        "No tasks match your search.</div>"
+    )
+    out.append("</div>")
+    return "\n".join(out)
+
+
+def _render_controls() -> str:
+    """Search box + All/Generation/Editing segmented filter."""
+    return (
+        '<div class="controls">'
+        '<div class="search"><span class="mag">&#8981;</span>'
+        '<input type="text" id="search" placeholder="Search tasks by number\u2026" '
+        'autocomplete="off"></div>'
+        '<div class="seg" id="typeSeg">'
+        '<button type="button" class="on" data-type="all">All</button>'
+        '<button type="button" data-type="generation">Generation</button>'
+        '<button type="button" data-type="editing">Editing</button>'
+        "</div>"
+        '<span class="count-note" id="countNote"></span>'
+        "</div>"
+    )
 
 
 def _render_header(tasks: list[dict]) -> str:
@@ -182,10 +277,13 @@ def _render_header(tasks: list[dict]) -> str:
     n_gen = sum(1 for t in tasks if t["task_type"] != "editing")
     n_edit = n - n_gen
     return (
-        '<div class="run-stats">'
-        f"<span>{n} tasks</span>"
-        f"<span>generation: <b>{n_gen}</b></span>"
-        f"<span>editing: <b>{n_edit}</b></span>"
+        '<div class="summary">'
+        f'<span class="big">{n} tasks</span>'
+        '<span class="stat"><span class="swatch gen"></span>'
+        f"generation: <b>{n_gen}</b></span>"
+        '<span class="stat"><span class="swatch edit"></span>'
+        f"editing: <b>{n_edit}</b></span>"
+        '<span class="stat hint">Click a card to open the task.</span>'
         "</div>"
     )
 
@@ -194,8 +292,11 @@ def render_tasks_page(tasks: list[dict], asset_url) -> str:
     """Build the full standalone task-browser HTML document.
 
     ``asset_url(fixture, relpath)`` supplies the input image URLs (see
-    module docstring). The page mirrors the report's summary-table ->
-    detail-card navigation exactly, minus scores and ground truth.
+    module docstring). The summary view is a grouped thumbnail grid
+    (Generation / Editing) with search + type filter; clicking a card
+    opens that task's detail card (prompt + input), reusing the report's
+    detail-card navigation (``j``/``k`` / arrow keys, ``Esc`` to return),
+    minus scores and ground truth.
     """
     fixture_names_js = json.dumps([t["name"] for t in tasks])
     p = [
@@ -212,17 +313,11 @@ def render_tasks_page(tasks: list[dict], asset_url) -> str:
     p.append(_render_header(tasks))
     p.append("</div>")
 
-    # Summary view
+    # Summary view: grouped thumbnail grid + search/type controls.
     p.append('<div id="summary-view">')
-    p.append(
-        '<p style="color:#888;font-size:0.85em">'
-        "Click a row to view the task. "
-        '<span class="kbd">j</span>/<span class="kbd">k</span> '
-        "to navigate, "
-        '<span class="kbd">Esc</span> to return.</p>'
-    )
     if tasks:
-        p.append(_render_summary_table(tasks))
+        p.append(_render_controls())
+        p.append(_render_grid(tasks, asset_url))
     else:
         p.append(
             '<p class="note">No tasks found in the sample inputs dataset.</p>'
@@ -258,9 +353,18 @@ def render_tasks_page(tasks: list[dict], asset_url) -> str:
 # ---------------------------------------------------------------------------
 
 _CSS = """\
+:root {
+  --bg: #f8f9fa; --panel: #ffffff; --ink: #14161c; --ink-soft: #5b6170;
+  --ink-faint: #9aa0ad; --line: #e3e5ea; --line-strong: #d2d5dd;
+  --accent: #4338ca; --accent-soft: #eef0ff;
+  --gen: #1565c0; --gen-soft: #e3f2fd; --edit: #6a1b9a; --edit-soft: #f3e5f5;
+  --thumb-bg: #eceef2;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
 * { box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-       max-width: 1600px; margin: 0 auto; padding: 20px; background: #f8f9fa; }
+body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+       max-width: 1600px; margin: 0 auto; padding: 20px; background: var(--bg);
+       color: var(--ink); -webkit-font-smoothing: antialiased; }
 h1 { border-bottom: 2px solid #333; padding-bottom: 8px; }
 h2 { margin-top: 0; }
 .tag { font-size: 0.6em; color: #666; font-weight: normal; font-family: monospace;
@@ -268,17 +372,69 @@ h2 { margin-top: 0; }
 
 .run-header { background: white; border-radius: 8px; padding: 16px 20px;
               margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-.run-stats { margin-top: 8px; font-size: 0.95em; }
-.run-stats span { margin-right: 20px; font-weight: 500; }
-
-.summary-table { width: 100%; border-collapse: collapse; background: white;
-                 border-radius: 8px; overflow: hidden;
-                 box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-.summary-table th { background: #37474f; color: white; padding: 10px 12px;
-                    text-align: left; font-size: 0.85em; text-transform: uppercase;
-                    letter-spacing: 0.05em; }
-.summary-table td { padding: 8px 12px; border-bottom: 1px solid #eee; font-size: 0.9em; }
-.summary-table tr:hover { filter: brightness(0.97); background: #f5f5f5; }
+
+/* summary strip */
+.summary { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
+           margin-top: 10px; font-size: 0.95em; }
+.summary .big { font-size: 1.35em; font-weight: 800; letter-spacing: -.01em; }
+.summary .stat { color: var(--ink-soft); }
+.summary .stat b { color: var(--ink); font-weight: 700; }
+.summary .stat.hint { color: var(--ink-faint); }
+.summary .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
+                   margin-right: 6px; }
+.summary .swatch.gen { background: var(--gen); }
+.summary .swatch.edit { background: var(--edit); }
+
+/* controls: search + segmented type filter */
+.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
+            margin-bottom: 8px; }
+.search { flex: 1; min-width: 240px; position: relative; }
+.search input { width: 100%; padding: 11px 14px 11px 36px; border: 1px solid var(--line-strong);
+                border-radius: 11px; font-family: inherit; font-size: 14.5px;
+                background: var(--panel); outline: none; }
+.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.search .mag { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
+               color: var(--ink-faint); font-size: 15px; }
+.seg { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line-strong);
+       border-radius: 11px; padding: 4px; }
+.seg button { font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
+              border: none; background: none; color: var(--ink-soft); padding: 7px 14px;
+              border-radius: 8px; }
+.seg button.on { background: var(--accent); color: #fff; }
+.count-note { font-size: 13px; color: var(--ink-faint); margin-left: auto; }
+
+/* group header */
+.group-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px;
+              font-size: 13px; font-weight: 700; text-transform: uppercase;
+              letter-spacing: .05em; }
+.group-head.gen { color: var(--gen); }
+.group-head.edit { color: var(--edit); }
+.group-head .gcount { font-family: var(--mono); font-size: 11px; padding: 3px 9px;
+                      border-radius: 999px; }
+.group-head.gen .gcount { background: var(--gen-soft); }
+.group-head.edit .gcount { background: var(--edit-soft); }
+
+/* responsive card grid */
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 16px; }
+.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+        overflow: hidden; cursor: pointer; padding: 0; font-family: inherit;
+        text-align: left; transition: transform .14s ease, box-shadow .14s ease,
+        border-color .14s ease; }
+.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,22,28,.13);
+              border-color: var(--accent); }
+.card .thumb { width: 100%; aspect-ratio: 4 / 3; background: var(--thumb-bg); display: block;
+               border-bottom: 1px solid var(--line); overflow: hidden; }
+.card .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
+.card .meta { padding: 11px 13px; display: flex; align-items: center;
+              justify-content: space-between; gap: 8px; }
+.card .sample { font-family: var(--mono); font-weight: 700; font-size: 15px; }
+.card .type { font-family: var(--mono); font-size: 9.5px; font-weight: 700;
+              text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px;
+              border-radius: 6px; }
+.card .type.generation { color: var(--gen); background: var(--gen-soft); }
+.card .type.editing { color: var(--edit); background: var(--edit-soft); }
+.empty { padding: 50px; text-align: center; color: var(--ink-faint); }
 
 .nav-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
            background: white; border-radius: 8px; margin-bottom: 16px;
@@ -329,6 +485,7 @@ h2 { margin-top: 0; }
 _JS = """\
 let currentIdx = -1;
 const total = document.querySelectorAll('.fixture-card').length;
+let query = '', typeFilter = 'all';
 
 function taskImgFail(img) {
   const view = img.closest('.view');
@@ -336,6 +493,50 @@ function taskImgFail(img) {
   img.style.display = 'none';
 }
 
+// Live grid filter: the segmented control filters by type, the search
+// box filters by sample number. Group counts + visibility and the
+// empty-state stay in sync; cards stay rendered (so showDetail indices
+// are stable) and are just shown/hidden.
+function applyFilter() {
+  const q = query.trim().toLowerCase();
+  let shown = 0;
+  document.querySelectorAll('#groups .group').forEach(g => {
+    const key = g.dataset.group;
+    let vis = 0;
+    g.querySelectorAll('.card').forEach(c => {
+      const ok = (typeFilter === 'all' || c.dataset.type === typeFilter) &&
+                 (!q || c.dataset.name.toLowerCase().includes(q));
+      c.style.display = ok ? '' : 'none';
+      if (ok) vis++;
+    });
+    g.style.display = vis ? '' : 'none';
+    const badge = g.querySelector('[data-count-for="' + key + '"]');
+    if (badge) badge.textContent = vis;
+    shown += vis;
+  });
+  const empty = document.getElementById('empty-state');
+  if (empty) empty.style.display = shown ? 'none' : '';
+  const note = document.getElementById('countNote');
+  if (note) note.textContent = shown + ' of ' + total + ' shown';
+}
+
+(function wireControls() {
+  const searchEl = document.getElementById('search');
+  if (searchEl) searchEl.addEventListener('input', e => {
+    query = e.target.value; applyFilter();
+  });
+  const seg = document.getElementById('typeSeg');
+  if (seg) seg.querySelectorAll('button').forEach(b => {
+    b.addEventListener('click', () => {
+      seg.querySelectorAll('button').forEach(x => x.classList.remove('on'));
+      b.classList.add('on');
+      typeFilter = b.dataset.type;
+      applyFilter();
+    });
+  });
+  applyFilter();
+})();
+
 function showSummary() {
   document.getElementById('summary-view').style.display = '';
   document.getElementById('detail-view').style.display = 'none';

tests/test_tasks.py

@@ -123,6 +123,17 @@ def test_render_tasks_page_structure_and_urls(tmp_path: Path) -> None:
     assert "showDetail(" in doc
     assert "window._fixtureNames" in doc
 
+    # Grid summary view: grouped sections with live count badges,
+    # search + type segmented filter, and a card per task (clicking a
+    # card jumps to its detail via showDetail(idx)).
+    assert 'class="grid"' in doc
+    assert 'data-group="generation"' in doc
+    assert 'data-group="editing"' in doc
+    assert 'data-count-for="generation"' in doc
+    assert 'id="typeSeg"' in doc
+    assert 'id="search"' in doc
+    assert 'class="card"' in doc
+
     # Editing fixture references its starting-shape renders; generation
     # multi-image fixture references both drawings.
     assert ("201", "renders/iso.png") in calls
@@ -135,6 +146,48 @@ def test_render_tasks_page_structure_and_urls(tmp_path: Path) -> None:
     assert "CAD Score" not in doc
 
 
+def test_thumbnails_are_lazy_and_typed(tmp_path: Path) -> None:
+    """Every grid thumbnail lazy-loads with reserved dimensions, and the
+    thumbnail source differs by task type: generation uses ``input.png``,
+    editing uses the ``renders/iso.png`` render of the input STEP."""
+    _write_fixture(
+        tmp_path, "108",
+        """
+        description: Reproduce the bracket.
+        input_files:
+          - input.png
+        """,
+    )
+    _write_fixture(
+        tmp_path, "204",
+        """
+        description: Widen the slot.
+        task_type: editing
+        input_files:
+          - input.step
+        """,
+    )
+    tasks = load_tasks_from_dir(tmp_path)
+
+    def asset_url(fixture: str, relpath: str) -> str:
+        return f"/task-input/{fixture}/{relpath}"
+
+    doc = render_tasks_page(tasks, asset_url)
+
+    # Generation card thumbnail -> input.png; editing -> iso render.
+    assert (
+        '<img loading="lazy" decoding="async" width="180" height="135" '
+        'src="/task-input/108/input.png"' in doc
+    )
+    assert (
+        '<img loading="lazy" decoding="async" width="180" height="135" '
+        'src="/task-input/204/renders/iso.png"' in doc
+    )
+    # No thumbnail escapes lazy/async loading.
+    assert doc.count('class="card"') == 2
+    assert doc.count('loading="lazy" decoding="async"', ) >= 2
+
+
 def test_render_tasks_page_empty(tmp_path: Path) -> None:
     doc = render_tasks_page([], lambda f, r: "")
     assert "No tasks found" in doc