Add stats totals, runtime summary, and duplicate detection on add form

- Stats page now shows total films watched and total runtime (formatted
  as Xd Yh) in an overview panel above the world map
- /stats/data endpoint includes total_runtime_minutes in payload
- New GET /films/find endpoint returns all shelf matches for a tmdb_id
- Add film form shows an inline notice when the selected TMDB film is
  already logged, with shelf name, date, and a link to the entry
- Update CLAUDE.md and README to reflect current auth, OMDb, and
  router/service structure

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2 files changed, 32 insertions, 0 deletions

diff --git a/templates/form.html b/templates/form.html
index 83e888e..cd29e67 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -38,6 +38,7 @@
           <button id="tmdb-search" type="button">Search</button>
         </div>
         <div id="tmdb-results" class="tmdb-results" aria-live="polite"></div>
+        <div id="duplicate-notice" class="notice" hidden></div>
       </div>
 
       <div class="form-grid">
diff --git a/templates/stats.html b/templates/stats.html
index 797054a..6e3a987 100644
--- a/templates/stats.html
+++ b/templates/stats.html
@@ -15,6 +15,19 @@
 
   <section class="stats-layout">
     <section class="stats-panel stats-panel-wide">
+      <div class="stats-overview-row">
+        <div class="stats-metric">
+          <span class="eyebrow">Films watched</span>
+          <strong id="stats-total-films">—</strong>
+        </div>
+        <div class="stats-metric">
+          <span class="eyebrow">Total runtime</span>
+          <strong id="stats-total-runtime">—</strong>
+        </div>
+      </div>
+    </section>
+
+    <section class="stats-panel stats-panel-wide">
       <div class="stats-panel-header">
         <div>
           <p class="eyebrow">World Map</p>
@@ -124,7 +137,25 @@
       return String(value).padStart(3, "0");
     }
 
+    function formatRuntime(minutes) {
+      if (!minutes) return "0h";
+      const totalHours = Math.floor(minutes / 60);
+      if (totalHours >= 24) {
+        const days = Math.floor(totalHours / 24);
+        const hours = totalHours % 24;
+        return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+      }
+      const mins = minutes % 60;
+      return mins > 0 ? `${totalHours}h ${mins}m` : `${totalHours}h`;
+    }
+
     function renderLists(data) {
+      const totalFilms = document.getElementById("stats-total-films");
+      if (totalFilms) totalFilms.textContent = data.total_watched;
+
+      const totalRuntime = document.getElementById("stats-total-runtime");
+      if (totalRuntime) totalRuntime.textContent = formatRuntime(data.total_runtime_minutes);
+
       const topDirectors = document.getElementById("top-directors");
       topDirectors.innerHTML = data.most_watched_directors.slice(0, 8).map((item) => `
         <li><span>${item.director}</span><strong>${item.count}</strong></li>