Add rewatch patterns stats panel

Adds a "Rewatches" section to /stats that displays films you've watched multiple times, grouped by title. For each rewatched film, shows:
- Watch count (e.g., "3×")
- Rating history (e.g., ✦ → ✦✦ → ✦) with accent highlight when ratings drift
- Days between first and last watch

Changes:
- routers/stats.py: Group films by title in _build_stats_payload, compute rewatch details (ratings, days between, rating change flag), add rewatch_patterns key
- templates/stats.html: Add "Rewatches" panel HTML and JS renderer (renderLists)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 30 insertions, 0 deletions

diff --git a/templates/stats.html b/templates/stats.html
index 9b71679..6f271bd 100644
--- a/templates/stats.html
+++ b/templates/stats.html
@@ -98,6 +98,16 @@
       </div>
       <ol id="film-decades" class="stats-list"></ol>
     </section>
+
+    <section class="stats-panel stats-panel-wide">
+      <div class="stats-panel-header">
+        <div>
+          <p class="eyebrow">Films</p>
+          <h2>Rewatches</h2>
+        </div>
+      </div>
+      <div id="rewatch-patterns-list" class="stats-list"></div>
+    </section>
   </section>
 {% endblock %}
 
@@ -164,6 +174,26 @@
         <strong>${rate}%</strong>
         <span>${data.rewatch_rate.rewatched} of ${data.rewatch_rate.total_watched} watched films were rewatches.</span>
       `;
+
+      const rewatchPatterns = document.getElementById("rewatch-patterns-list");
+      if (data.rewatch_patterns && data.rewatch_patterns.length > 0) {
+        rewatchPatterns.innerHTML = data.rewatch_patterns.map((item) => {
+          const stars = (n) => (n > 0 ? "✦".repeat(n) : "—");
+          const ratingHistory = item.ratings.map(stars).join(" → ");
+          const drift = item.rating_changed
+            ? `<span style="color:var(--accent)">${ratingHistory}</span>`
+            : `<span style="color:var(--muted)">${ratingHistory}</span>`;
+          const gap = item.days_between != null
+            ? `<span style="color:var(--subtle);font-size:13px">${item.days_between}d apart</span>`
+            : "";
+          return `<div class="stats-list-row">
+            <span>${item.title}</span>
+            <span style="display:flex;gap:12px;align-items:center">${gap}${drift}<strong>${item.watches}×</strong></span>
+          </div>`;
+        }).join("");
+      } else {
+        rewatchPatterns.innerHTML = "<p style=\"color:var(--muted);font-size:14px;margin:0\">No rewatches yet.</p>";
+      }
     }
 
     function renderHeatmap(days) {