feat: locks/replace/compare/permalinks; perf: virtualization, LQIP, caching, diagnostics; add tests, docs, and issue/PR templates (flags OFF)

code/web/templates/diagnostics/index.html

@@ -7,6 +7,15 @@
     <h3 style="margin-top:0">System summary</h3>
     <div id="sysSummary" class="muted">Loading…</div>
   </div>
+  <div class="card" style="background:#0f1115; border:1px solid var(--border); border-radius:10px; padding:.75rem; margin-bottom:.75rem">
+    <h3 style="margin-top:0">Performance (local)</h3>
+    <div class="muted" style="margin-bottom:.35rem">Scroll the Step 5 list; this panel shows a rough FPS estimate and virtualization renders.</div>
+    <div style="display:flex; gap:1rem; flex-wrap:wrap">
+      <div><strong>Scroll FPS:</strong> <span id="perf-fps">–</span></div>
+      <div><strong>Visible tiles:</strong> <span id="perf-visible">–</span></div>
+      <div><strong>Render count:</strong> <span id="perf-renders">0</span></div>
+    </div>
+  </div>
   <div class="card" style="background:#0f1115; border:1px solid var(--border); border-radius:10px; padding:.75rem;">
   <h3 style="margin-top:0">Error triggers</h3>
     <div class="row" style="display:flex; gap:.5rem; align-items:center">
@@ -39,6 +48,40 @@
     try { fetch('/status/sys', { cache: 'no-store' }).then(function(r){ return r.json(); }).then(render).catch(function(){ el.textContent='Unavailable'; }); } catch(_){ el.textContent='Unavailable'; }
   }
   load();
+  // Perf probe: listen to scroll on a card grid if present
+  try{
+    var fpsEl = document.getElementById('perf-fps');
+    var visEl = document.getElementById('perf-visible');
+    var rcEl = document.getElementById('perf-renders');
+    var grid = document.querySelector('.card-grid');
+    var last = performance.now();
+    var frames = 0; var renders = 0;
+    function tick(){
+      frames++;
+      var now = performance.now();
+      if (now - last >= 500){
+        var fps = Math.round((frames * 1000) / (now - last));
+        if (fpsEl) fpsEl.textContent = String(fps);
+        frames = 0; last = now;
+      }
+      requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+    function updateVisible(){
+      try{
+        if (!grid) return;
+        var tiles = grid.querySelectorAll('.card-tile');
+        var c = 0; tiles.forEach(function(t){ if (t.style.display !== 'none') c++; });
+        if (visEl) visEl.textContent = String(c);
+      }catch(_){ }
+    }
+    if (grid){
+      grid.addEventListener('scroll', updateVisible);
+      var mo = new MutationObserver(function(){ renders++; if (rcEl) rcEl.textContent = String(renders); updateVisible(); });
+      mo.observe(grid, { childList: true, subtree: true, attributes: false });
+      updateVisible();
+    }
+  }catch(_){ }
 })();
 </script>
 {% endblock %}

code/web/templates/diagnostics/perf.html

@@ -0,0 +1,71 @@
+{% extends "base.html" %}
+{% block content %}
+<section>
+  <h2>Diagnostics: Synthetic Perf Probe</h2>
+  <p class="muted">Scroll the list; we estimate FPS and count re-renders. This page is only available when diagnostics are enabled.</p>
+  <div style="display:flex; gap:1rem; flex-wrap:wrap; margin:.5rem 0 1rem 0;">
+    <div><strong>FPS:</strong> <span id="fps">–</span></div>
+    <div><strong>Visible rows:</strong> <span id="rows">–</span></div>
+    <div><strong>Render count:</strong> <span id="renders">0</span></div>
+  </div>
+
+  <div id="probe" style="height:60vh; overflow:auto; border:1px solid var(--border); border-radius:8px; background:#0f1115;">
+    <ul id="list" style="list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:8px 12px;">
+      {% for i in range(1,1201) %}
+      <li style="padding:.5rem; border:1px solid var(--border); border-radius:8px; background:#0b0d12;">
+        <div style="display:flex; align-items:center; gap:.5rem;">
+          <div style="width:64px; height:40px; background:#111; border:1px solid var(--border); border-radius:6px;">
+            <img class="card-thumb" alt="Thumb {{ i }}" loading="lazy" decoding="async" data-lqip
+                 src="https://api.scryfall.com/cards/named?fuzzy=Lightning%20Bolt&format=image&version=small"
+                 width="64" height="40" style="width:64px; height:40px; object-fit:cover; border-radius:6px;" />
+          </div>
+          <div style="display:flex; flex-direction:column; gap:.25rem;">
+            <strong>Row {{ i }}</strong>
+            <small class="muted">Synthetic item for performance testing</small>
+          </div>
+        </div>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+</section>
+<script>
+(function(){
+  var probe = document.getElementById('probe');
+  var list = document.getElementById('list');
+  var fpsEl = document.getElementById('fps');
+  var rowsEl = document.getElementById('rows');
+  var rcEl = document.getElementById('renders');
+  var last = performance.now();
+  var frames = 0; var renders = 0;
+  function raf(){
+    frames++;
+    var now = performance.now();
+    if (now - last >= 500){
+      var fps = Math.round((frames * 1000) / (now - last));
+      if (fpsEl) fpsEl.textContent = String(fps);
+      frames = 0; last = now;
+    }
+    requestAnimationFrame(raf);
+  }
+  requestAnimationFrame(raf);
+  function updateVisible(){
+    if (!probe || !list) return;
+    var count = 0;
+    list.querySelectorAll('li').forEach(function(li){
+      // rough: count if within viewport
+      var rect = li.getBoundingClientRect();
+      var pRect = probe.getBoundingClientRect();
+      if (rect.bottom >= pRect.top && rect.top <= pRect.bottom) count++;
+    });
+    if (rowsEl) rowsEl.textContent = String(count);
+  }
+  if (probe){
+    probe.addEventListener('scroll', updateVisible);
+    var mo = new MutationObserver(function(){ renders++; if (rcEl) rcEl.textContent = String(renders); updateVisible(); });
+    mo.observe(list, { childList: true, subtree: true });
+    updateVisible();
+  }
+})();
+</script>
+{% endblock %}