diff --git a/plugins/MosaicPoster/.gitignore b/plugins/MosaicPoster/.gitignore
new file mode 100644
index 00000000..f7f22d61
--- /dev/null
+++ b/plugins/MosaicPoster/.gitignore
@@ -0,0 +1,5 @@
+# Generated contact sheets (disposable cache, regenerated on demand)
+generated/
+# Python bytecode
+__pycache__/
+*.pyc
diff --git a/plugins/MosaicPoster/MosaicPoster.css b/plugins/MosaicPoster/MosaicPoster.css
new file mode 100644
index 00000000..7a257ffe
--- /dev/null
+++ b/plugins/MosaicPoster/MosaicPoster.css
@@ -0,0 +1,125 @@
+/* Mosaic Poster — mosaic overlay + toggle/size buttons on the scene detail poster */
+
+/* Mosaic layer: covers the cover art underneath. When .mp-seekable, tapping a
+   cell seeks the video to that point in time; otherwise clicks pass through. */
+.vjs-poster .mp-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: #000;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+  z-index: 2;
+}
+.vjs-poster .mp-overlay.mp-seekable {
+  pointer-events: auto;
+  cursor: pointer;
+}
+/* hovered-cell highlight (desktop) — red, translucent */
+.vjs-poster .mp-overlay .mp-cell-hi {
+  position: absolute;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 2px solid rgba(255, 45, 45, 0.95);
+  background: rgba(255, 40, 40, 0.28);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) inset;
+  transition: left 0.05s linear, top 0.05s linear, width 0.05s linear, height 0.05s linear;
+}
+/* keep the big play button above the mosaic so its centre still plays from the
+   start; the surrounding cells seek */
+.video-js .vjs-big-play-button {
+  z-index: 3;
+}
+
+/* Mosaic on/off toggle: "Mosaic" label + a switch showing the current state
+   (top-right of the poster, pre-playback) */
+.vjs-poster .mp-toggle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 3;
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  background: rgba(0, 0, 0, 0.62);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 6px;
+  padding: 6px 9px;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 0.12s ease, background 0.12s ease;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.vjs-poster .mp-toggle:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.8);
+}
+.vjs-poster .mp-toggle-label { font-weight: 600; }
+/* loading spinner shown in the toggle while a sheet is being generated */
+.vjs-poster .mp-spin {
+  width: 13px;
+  height: 13px;
+  flex: none;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: mp-spin 0.7s linear infinite;
+}
+@keyframes mp-spin { to { transform: rotate(360deg); } }
+/* switch track */
+.vjs-poster .mp-switch {
+  position: relative;
+  width: 34px;
+  height: 18px;
+  flex: none;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.3);
+  transition: background 0.15s ease;
+}
+.vjs-poster .mp-toggle.mp-on .mp-switch { background: #4caf50; }
+/* switch knob */
+.vjs-poster .mp-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  transition: left 0.15s ease;
+}
+.vjs-poster .mp-toggle.mp-on .mp-knob { left: 18px; }
+
+/* Grid-size button (top-left of the poster, shown only in mosaic mode) */
+.vjs-poster .mp-size {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 3;
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(0, 0, 0, 0.62);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 5px;
+  padding: 5px 9px;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.12s ease, background 0.12s ease;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.vjs-poster .mp-size:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.8);
+}
diff --git a/plugins/MosaicPoster/MosaicPoster.js b/plugins/MosaicPoster/MosaicPoster.js
new file mode 100644
index 00000000..57fc50f0
--- /dev/null
+++ b/plugins/MosaicPoster/MosaicPoster.js
@@ -0,0 +1,800 @@
+/* =========================================================================
+ * Mosaic Poster (Stash UI plugin)
+ *
+ * Replaces the pre-playback poster on the scene detail page (/scenes/{id})
+ * with a 5x5 contact sheet (a whole-video overview) sampled evenly across
+ * the video.
+ *
+ *  - Hi-res sheet: generated from the real video by the backend
+ *    (MosaicPoster.py) via runPluginOperation, and served by Stash at
+ *    /plugin/MosaicPoster/assets/generated/{oshash}.jpg. Generation runs
+ *    Python on demand (2-3s the first time, cached afterwards). No standalone
+ *    daemon, no fixed port, no OS-specific service.
+ *  - While a sheet is being generated for the first time, the cover art stays
+ *    visible and a small loading spinner appears next to the toggle; the mosaic
+ *    is shown only once the hi-res sheet is ready.
+ *  - The button at the top-right of the poster toggles cover art <-> mosaic in
+ *    one click. The choice is stored in localStorage and remembered across all
+ *    scenes (default: mosaic ON).
+ *  - Overlay approach: the cover art is kept underneath; the mosaic layer is
+ *    added/removed on top.
+ *  - Never touches cover art on list/card views.
+ * ========================================================================= */
+(function () {
+  "use strict";
+
+  var DEFAULT_ON = true;
+  var DEFAULT_SEEK = true;             // tapping a mosaic cell seeks the video there
+  var DEFAULT_HIRES = false;           // upgrade the sprite sheet to a generated hi-res one
+  var SIZES = [3, 4, 5, 6, 7, 8];      // selectable N x N grids (16:9 cells -> 16:9 sheet)
+  var DEFAULT_SIZE = 5;
+  var PLUGIN_ID = "MosaicPoster";
+
+  // Both the on/off default and the grid size live in plugin settings (editable
+  // in Settings > Plugins) and are the source of truth, shared across devices.
+  // Cached here for synchronous reads; the poster buttons write them back via
+  // configurePlugin so the Settings page and the buttons stay in sync.
+  var currentOn = DEFAULT_ON;
+  var currentGrid = DEFAULT_SIZE;
+  var currentSeek = DEFAULT_SEEK;
+  var currentHiRes = DEFAULT_HIRES;
+  var settingsLoaded = false; // don't kick generation until the real grid size is known
+
+  // ---- i18n: only the JS strings can be localised (yml setting labels can't).
+  // Keyed by Stash's interface language code, lower-cased. English is the
+  // default: any language without an entry falls back to it. To add a language,
+  // add an entry keyed by its lower-cased Stash code (e.g. "pt-br") or base code
+  // (e.g. "de"); lookup tries the full code first, then the base code, then en.
+  var DEFAULT_LANG = "en";
+  // Covers every language Stash ships. Keyed by base language code (zh split
+  // into zh-cn / zh-tw). Non-English strings are best-effort — corrections from
+  // native speakers are welcome.
+  var STRINGS = {
+    en: { mosaic: "Mosaic", on: "Mosaic on — click to show cover art", off: "Mosaic off — click to show mosaic", size: "Mosaic grid size (click to change)" },
+    af: { mosaic: "Mosaïek", on: "Mosaïek aan — klik om die omslag te wys", off: "Mosaïek af — klik om die mosaïek te wys", size: "Mosaïek-roostergrootte (klik om te verander)" },
+    ar: { mosaic: "فسيفساء", on: "الفسيفساء مفعّلة — انقر لعرض صورة الغلاف", off: "الفسيفساء متوقفة — انقر لعرض الفسيفساء", size: "حجم شبكة الفسيفساء (انقر للتغيير)" },
+    bg: { mosaic: "Мозайка", on: "Мозайката е включена — щракнете, за да покажете корицата", off: "Мозайката е изключена — щракнете, за да покажете мозайката", size: "Размер на мрежата на мозайката (щракнете, за да промените)" },
+    bn: { mosaic: "মোজাইক", on: "মোজাইক চালু — কভার দেখাতে ক্লিক করুন", off: "মোজাইক বন্ধ — মোজাইক দেখাতে ক্লিক করুন", size: "মোজাইক গ্রিডের আকার (পরিবর্তন করতে ক্লিক করুন)" },
+    ca: { mosaic: "Mosaic", on: "Mosaic activat — fes clic per mostrar la portada", off: "Mosaic desactivat — fes clic per mostrar el mosaic", size: "Mida de la quadrícula del mosaic (fes clic per canviar)" },
+    cs: { mosaic: "Mozaika", on: "Mozaika zapnuta — kliknutím zobrazíte obal", off: "Mozaika vypnuta — kliknutím zobrazíte mozaiku", size: "Velikost mřížky mozaiky (kliknutím změníte)" },
+    da: { mosaic: "Mosaik", on: "Mosaik til — klik for at vise omslaget", off: "Mosaik fra — klik for at vise mosaikken", size: "Mosaikkens gitterstørrelse (klik for at ændre)" },
+    de: { mosaic: "Mosaik", on: "Mosaik an — klicken, um das Cover anzuzeigen", off: "Mosaik aus — klicken, um das Mosaik anzuzeigen", size: "Mosaik-Rastergröße (zum Ändern klicken)" },
+    es: { mosaic: "Mosaico", on: "Mosaico activado — haz clic para ver la carátula", off: "Mosaico desactivado — haz clic para ver el mosaico", size: "Tamaño de la cuadrícula del mosaico (haz clic para cambiar)" },
+    et: { mosaic: "Mosaiik", on: "Mosaiik sees — klõpsake kaanepildi kuvamiseks", off: "Mosaiik väljas — klõpsake mosaiigi kuvamiseks", size: "Mosaiigi ruudustiku suurus (klõpsake muutmiseks)" },
+    fa: { mosaic: "موزاییک", on: "موزاییک روشن — برای نمایش کاور کلیک کنید", off: "موزاییک خاموش — برای نمایش موزاییک کلیک کنید", size: "اندازه شبکه موزاییک (برای تغییر کلیک کنید)" },
+    fi: { mosaic: "Mosaiikki", on: "Mosaiikki päällä — näytä kansikuva napsauttamalla", off: "Mosaiikki pois — näytä mosaiikki napsauttamalla", size: "Mosaiikin ruudukon koko (muuta napsauttamalla)" },
+    fr: { mosaic: "Mosaïque", on: "Mosaïque activée — cliquez pour afficher la jaquette", off: "Mosaïque désactivée — cliquez pour afficher la mosaïque", size: "Taille de la grille de la mosaïque (cliquez pour changer)" },
+    hi: { mosaic: "मोज़ेक", on: "मोज़ेक चालू — कवर दिखाने के लिए क्लिक करें", off: "मोज़ेक बंद — मोज़ेक दिखाने के लिए क्लिक करें", size: "मोज़ेक ग्रिड आकार (बदलने के लिए क्लिक करें)" },
+    hr: { mosaic: "Mozaik", on: "Mozaik uključen — kliknite za prikaz naslovnice", off: "Mozaik isključen — kliknite za prikaz mozaika", size: "Veličina mreže mozaika (kliknite za promjenu)" },
+    hu: { mosaic: "Mozaik", on: "Mozaik be — kattintson a borító megjelenítéséhez", off: "Mozaik ki — kattintson a mozaik megjelenítéséhez", size: "Mozaik rácsméret (kattintson a módosításhoz)" },
+    id: { mosaic: "Mozaik", on: "Mozaik aktif — klik untuk menampilkan sampul", off: "Mozaik nonaktif — klik untuk menampilkan mozaik", size: "Ukuran kisi mozaik (klik untuk mengubah)" },
+    it: { mosaic: "Mosaico", on: "Mosaico attivo — clicca per mostrare la copertina", off: "Mosaico disattivato — clicca per mostrare il mosaico", size: "Dimensione della griglia del mosaico (clicca per cambiare)" },
+    ja: { mosaic: "モザイク", on: "モザイク表示中 — クリックでジャケット", off: "モザイク非表示 — クリックでモザイク", size: "モザイクのマス数（クリックで変更）" },
+    ko: { mosaic: "모자이크", on: "모자이크 켜짐 — 클릭하면 표지 표시", off: "모자이크 꺼짐 — 클릭하면 모자이크 표시", size: "모자이크 격자 크기 (클릭하여 변경)" },
+    lt: { mosaic: "Mozaika", on: "Mozaika įjungta — spustelėkite, kad būtų rodomas viršelis", off: "Mozaika išjungta — spustelėkite, kad būtų rodoma mozaika", size: "Mozaikos tinklelio dydis (spustelėkite, kad pakeistumėte)" },
+    lv: { mosaic: "Mozaīka", on: "Mozaīka ieslēgta — noklikšķiniet, lai parādītu vāku", off: "Mozaīka izslēgta — noklikšķiniet, lai parādītu mozaīku", size: "Mozaīkas režģa izmērs (noklikšķiniet, lai mainītu)" },
+    nb: { mosaic: "Mosaikk", on: "Mosaikk på — klikk for å vise omslaget", off: "Mosaikk av — klikk for å vise mosaikken", size: "Mosaikkens rutenettstørrelse (klikk for å endre)" },
+    ne: { mosaic: "मोजाइक", on: "मोजाइक अन — कभर देखाउन क्लिक गर्नुहोस्", off: "मोजाइक अफ — मोजाइक देखाउन क्लिक गर्नुहोस्", size: "मोजाइक ग्रिड आकार (परिवर्तन गर्न क्लिक गर्नुहोस्)" },
+    nl: { mosaic: "Mozaïek", on: "Mozaïek aan — klik om de hoes te tonen", off: "Mozaïek uit — klik om het mozaïek te tonen", size: "Mozaïek-rastergrootte (klik om te wijzigen)" },
+    nn: { mosaic: "Mosaikk", on: "Mosaikk på — klikk for å vise omslaget", off: "Mosaikk av — klikk for å vise mosaikken", size: "Mosaikk-rutenettstorleik (klikk for å endre)" },
+    pl: { mosaic: "Mozaika", on: "Mozaika włączona — kliknij, aby pokazać okładkę", off: "Mozaika wyłączona — kliknij, aby pokazać mozaikę", size: "Rozmiar siatki mozaiki (kliknij, aby zmienić)" },
+    pt: { mosaic: "Mosaico", on: "Mosaico ativado — clique para mostrar a capa", off: "Mosaico desativado — clique para mostrar o mosaico", size: "Tamanho da grade do mosaico (clique para alterar)" },
+    ro: { mosaic: "Mozaic", on: "Mozaic activat — dați clic pentru a afișa coperta", off: "Mozaic dezactivat — dați clic pentru a afișa mozaicul", size: "Dimensiunea grilei mozaicului (dați clic pentru a schimba)" },
+    ru: { mosaic: "Мозаика", on: "Мозаика включена — нажмите, чтобы показать обложку", off: "Мозаика выключена — нажмите, чтобы показать мозаику", size: "Размер сетки мозаики (нажмите, чтобы изменить)" },
+    sk: { mosaic: "Mozaika", on: "Mozaika zapnutá — kliknutím zobrazíte obal", off: "Mozaika vypnutá — kliknutím zobrazíte mozaiku", size: "Veľkosť mriežky mozaiky (kliknutím zmeníte)" },
+    sv: { mosaic: "Mosaik", on: "Mosaik på — klicka för att visa omslaget", off: "Mosaik av — klicka för att visa mosaiken", size: "Mosaikens rutnätsstorlek (klicka för att ändra)" },
+    th: { mosaic: "โมเสก", on: "เปิดโมเสก — คลิกเพื่อแสดงปก", off: "ปิดโมเสก — คลิกเพื่อแสดงโมเสก", size: "ขนาดตารางโมเสก (คลิกเพื่อเปลี่ยน)" },
+    tr: { mosaic: "Mozaik", on: "Mozaik açık — kapağı göstermek için tıklayın", off: "Mozaik kapalı — mozaiği göstermek için tıklayın", size: "Mozaik ızgara boyutu (değiştirmek için tıklayın)" },
+    uk: { mosaic: "Мозаїка", on: "Мозаїка увімкнена — натисніть, щоб показати обкладинку", off: "Мозаїка вимкнена — натисніть, щоб показати мозаїку", size: "Розмір сітки мозаїки (натисніть, щоб змінити)" },
+    ur: { mosaic: "موزیک", on: "موزیک آن — کور دکھانے کے لیے کلک کریں", off: "موزیک آف — موزیک دکھانے کے لیے کلک کریں", size: "موزیک گرڈ سائز (تبدیل کرنے کے لیے کلک کریں)" },
+    vi: { mosaic: "Khảm", on: "Bật khảm — nhấp để hiện ảnh bìa", off: "Tắt khảm — nhấp để hiện khảm", size: "Kích thước lưới khảm (nhấp để thay đổi)" },
+    "zh-cn": { mosaic: "马赛克", on: "马赛克开 — 点击显示封面", off: "马赛克关 — 点击显示马赛克", size: "马赛克网格大小（点击更改）" },
+    "zh-tw": { mosaic: "馬賽克", on: "馬賽克開 — 點擊顯示封面", off: "馬賽克關 — 點擊顯示馬賽克", size: "馬賽克網格大小（點擊變更）" },
+  };
+  function pickStrings(lang) {
+    lang = (lang || "").toLowerCase();                 // e.g. "ja-jp"
+    if (STRINGS[lang]) return STRINGS[lang];           // exact, e.g. "pt-br"
+    var base = lang.split("-")[0];                     // e.g. "ja"
+    if (STRINGS[base]) return STRINGS[base];
+    return STRINGS[DEFAULT_LANG];
+  }
+  var T = STRINGS[DEFAULT_LANG];
+
+  // Cache/URL key for a given scene sheet at a given grid size.
+  function sheetKey(oshash, n) { return oshash + "_" + n + "x" + n; }
+
+  // Generated sheets are served by Stash as plugin assets (same origin).
+  function assetUrl(oshash, n) {
+    return "/plugin/" + PLUGIN_ID + "/assets/generated/" + sheetKey(oshash, n) + ".jpg";
+  }
+
+  // Call the generation backend (Stash runs the Python). Promise<output|null>.
+  function runOp(args) {
+    return fetch("/graphql", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "same-origin",
+      body: JSON.stringify({
+        query: "mutation($id:ID!,$a:Map){runPluginOperation(plugin_id:$id,args:$a)}",
+        variables: { id: PLUGIN_ID, a: args },
+      }),
+    })
+      .then(function (r) { return r.json(); })
+      .then(function (j) { return (j && j.data && j.data.runPluginOperation) || null; })
+      .catch(function () { return null; });
+  }
+
+  var infoCache   = new Map(); // sceneId          -> Promise<{oshash,duration,sprite}|null>
+  var spriteCache = new Map(); // spriteUrl+"|"+n  -> Promise<{url,times,aspect}|null>
+  var probeCache  = new Map(); // sheetKey -> Promise<url|null> (existence check, no generation)
+  var hiresReady  = new Set(); // sheetKey -> confirmed generated (no need to re-probe)
+  var genInFlight = new Map(); // sheetKey -> Promise<url|null> (generation in progress; dedupes)
+
+  /* ---------- state ----------
+   * currentOn = the global default (plugin setting, shared across devices).
+   * Each scene may override it locally via the poster button; the override is
+   * stored per scene in localStorage and wins over the default for that scene. */
+  var OV_PREFIX = "MosaicPoster.ov."; // per-scene override key prefix
+
+  function overrideFor(id) {
+    if (!id) return null;
+    var v = localStorage.getItem(OV_PREFIX + id);
+    return v === null ? null : (v === "1");
+  }
+  function sceneEnabled(id) {
+    var o = overrideFor(id);
+    return o === null ? currentOn : o;
+  }
+  function isEnabled() { return sceneEnabled(currentSceneId()); }
+  // The poster button toggles THIS scene only; the global default is unchanged.
+  function setEnabled(on) {
+    var id = currentSceneId();
+    if (id) localStorage.setItem(OV_PREFIX + id, on ? "1" : "0");
+  }
+
+  function clampSize(v) {
+    var n = parseInt(v, 10);
+    if (isNaN(n)) return null;
+    return Math.max(SIZES[0], Math.min(SIZES[SIZES.length - 1], n));
+  }
+  function currentSize() { return currentGrid; }
+  function cycleSize() {
+    var i = SIZES.indexOf(currentSize());
+    var next = SIZES[(i + 1) % SIZES.length];
+    currentGrid = next;
+    persistGrid(next);   // write back to the plugin setting (keeps Settings page in sync)
+    return next;
+  }
+
+  function asBool(v) {
+    if (v === true || v === false) return v;
+    if (v === "true") return true;
+    if (v === "false") return false;
+    return null;
+  }
+
+  // Pick the string table from Stash's UI language (e.g. "ja-JP" -> Japanese).
+  function loadLanguage() {
+    return fetch("/graphql", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "same-origin",
+      body: JSON.stringify({ query: "{configuration{interface{language}}}" }),
+    })
+      .then(function (r) { return r.json(); })
+      .then(function (j) {
+        try { T = pickStrings(j.data.configuration.interface.language); } catch (e) {}
+      })
+      .catch(function () {});
+  }
+
+  function readSettings() {
+    return fetch("/graphql", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "same-origin",
+      body: JSON.stringify({ query: "{configuration{plugins}}" }),
+    })
+      .then(function (r) { return r.json(); })
+      .then(function (j) {
+        try { return (j.data.configuration.plugins || {})[PLUGIN_ID] || {}; }
+        catch (e) { return {}; }
+      })
+      .catch(function () { return {}; });
+  }
+
+  // Read on/off + grid size from the plugin settings (source of truth) into the
+  // caches. When a setting is unset, initialise it to the default so the
+  // Settings page reflects the actual behaviour.
+  function loadSettings() {
+    return readSettings().then(function (cfg) {
+      var on = asBool(cfg.defaultOn);
+      if (on !== null) currentOn = on;
+      var n = clampSize(cfg.gridSize);
+      if (n !== null) currentGrid = n;
+      var sk = asBool(cfg.tapToSeek);
+      if (sk !== null) currentSeek = sk;
+      var hr = asBool(cfg.hiResUpgrade);
+      if (hr !== null) currentHiRes = hr;
+      var patch = {};
+      if (on === null) patch.defaultOn = currentOn;
+      if (n === null) patch.gridSize = currentGrid;
+      if (sk === null) patch.tapToSeek = currentSeek;
+      if (hr === null) patch.hiResUpgrade = currentHiRes;
+      if (Object.keys(patch).length) configure(patch); // initialise unset setting(s)
+      settingsLoaded = true;
+    });
+  }
+
+  // configurePlugin REPLACES the whole settings map, so read-modify-write: merge
+  // the patch onto the current settings (preserving cacheMax and anything else).
+  function configure(patch) {
+    return readSettings().then(function (cur) {
+      var merged = Object.assign({}, cur, patch);
+      return fetch("/graphql", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "same-origin",
+        body: JSON.stringify({
+          query: "mutation($id:ID!,$in:Map!){configurePlugin(plugin_id:$id,input:$in)}",
+          variables: { id: PLUGIN_ID, in: merged },
+        }),
+      });
+    }).catch(function () {});
+  }
+  function persistGrid(n) { return configure({ gridSize: n }); }
+
+  function currentSceneId() {
+    var m = location.pathname.match(/^\/scenes\/(\d+)(?:\/|$)/);
+    return m ? m[1] : null;
+  }
+
+  /* ---------- scene info (oshash + duration + sprite) ---------- */
+  function fetchInfo(id) {
+    if (infoCache.has(id)) return infoCache.get(id);
+    var p = fetch("/graphql", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "same-origin",
+      body: JSON.stringify({
+        query: "query($id:ID!){findScene(id:$id){paths{sprite} files{duration fingerprints{type value}}}}",
+        variables: { id: id },
+      }),
+    })
+      .then(function (r) { return r.json(); })
+      .then(function (j) {
+        try {
+          var sc = j.data.findScene;
+          var f0 = sc.files[0] || {}, fps = f0.fingerprints || [];
+          var oshash = null;
+          for (var i = 0; i < fps.length; i++) {
+            if (fps[i].type === "oshash") { oshash = fps[i].value; break; }
+          }
+          return { oshash: oshash, duration: f0.duration || 0,
+                   sprite: (sc.paths && sc.paths.sprite) || null };
+        } catch (e) { return null; }
+      })
+      .catch(function () { infoCache.delete(id); return null; });
+    infoCache.set(id, p);
+    return p;
+  }
+
+  function loadImage(src, crossOrigin) {
+    return new Promise(function (resolve, reject) {
+      var img = new Image();
+      if (crossOrigin) img.crossOrigin = "anonymous";
+      img.onload = function () { resolve(img); };
+      img.onerror = reject;
+      img.src = src;
+    });
+  }
+
+  /* ---------- sheet from Stash's existing scene sprite (no generation) ----------
+   * Stash already generates a sprite + WebVTT for each scanned scene (used for
+   * the seekbar hover preview). We reuse them: parse the VTT for each thumb's
+   * timestamp and region, then splice the frames into an N x N sheet on a
+   * canvas — entirely client-side, no ffmpeg, no extra storage. Falls back to
+   * on-demand generation only when a scene has no sprite. */
+  function vttSeconds(s) {
+    var parts = String(s).trim().split(":"), sec = 0;
+    for (var i = 0; i < parts.length; i++) sec = sec * 60 + parseFloat(parts[i] || 0);
+    return isNaN(sec) ? 0 : sec;
+  }
+  function fetchSpriteCues(vttUrl) {
+    return fetch(vttUrl, { credentials: "same-origin" })
+      .then(function (r) { return r.ok ? r.text() : ""; })
+      .then(function (txt) {
+        var cues = [], lines = txt.split(/\r?\n/);
+        for (var i = 0; i < lines.length; i++) {
+          var arrow = lines[i].indexOf("-->");
+          if (arrow < 0) continue;
+          var start = vttSeconds(lines[i].slice(0, arrow));
+          for (var j = i + 1; j < lines.length && lines[j].indexOf("-->") < 0; j++) {
+            var m = lines[j].match(/#xywh=(\d+),(\d+),(\d+),(\d+)/);
+            if (m) { cues.push({ t: start, x: +m[1], y: +m[2], w: +m[3], h: +m[4] }); break; }
+          }
+        }
+        return cues;
+      });
+  }
+  function pickIndices(n, k) {
+    if (n <= k) { var all = []; for (var i = 0; i < n; i++) all.push(i); return all; }
+    var out = []; for (var j = 0; j < k; j++) out.push(Math.round((j * (n - 1)) / (k - 1)));
+    return out;
+  }
+  // Build the N x N sheet from the sprite/VTT. Resolves {url, times, aspect} or
+  // null (no sprite / empty VTT). times[i] = real timestamp of cell i (for seek).
+  function buildSpriteSheet(spriteUrl, n) {
+    if (!spriteUrl) return Promise.resolve(null);
+    var key = spriteUrl + "|" + n;
+    if (spriteCache.has(key)) return spriteCache.get(key);
+    var cells = n * n;
+    var vttUrl = spriteUrl.replace(/_sprite\.jpg(\?.*)?$/, "_thumbs.vtt");
+    var p = Promise.all([fetchSpriteCues(vttUrl), loadImage(spriteUrl)]).then(function (res) {
+      var cues = res[0], sprite = res[1];
+      if (!cues.length) return null;
+      var idx = pickIndices(cues.length, cells);
+      var cw = cues[0].w, ch = cues[0].h;
+      var canvas = document.createElement("canvas");
+      canvas.width = n * cw; canvas.height = n * ch;
+      var ctx = canvas.getContext("2d");
+      ctx.fillStyle = "#000"; ctx.fillRect(0, 0, canvas.width, canvas.height);
+      var times = [];
+      for (var i = 0; i < idx.length; i++) {
+        var c = cues[idx[i]];
+        ctx.drawImage(sprite, c.x, c.y, c.w, c.h, (i % n) * cw, Math.floor(i / n) * ch, cw, ch);
+        times.push(c.t);
+      }
+      return { url: canvas.toDataURL("image/jpeg", 0.85), times: times, aspect: cw / ch };
+    }).catch(function () { spriteCache.delete(key); return null; });
+    spriteCache.set(key, p);
+    return p;
+  }
+
+  /* ---------- hi-res sheet (Stash-served + generation backend) ----------
+   * probe and generate are split. On navigation we first probeHires (just
+   * checks whether the sheet already exists); if so we show it immediately.
+   * Only when it is missing do we keep the cover art visible, show a loading
+   * spinner, and generate the sheet in the background. */
+
+  // Check whether a generated sheet already exists (without generating it).
+  // Exists -> resolve URL. Missing -> null.
+  // Just loads the Stash-served static URL as an image (same origin).
+  function probeHires(oshash, n) {
+    if (!oshash) return Promise.resolve(null);
+    var key = sheetKey(oshash, n);
+    if (hiresReady.has(key)) return Promise.resolve(assetUrl(oshash, n));
+    if (probeCache.has(key)) return probeCache.get(key);
+    var url = assetUrl(oshash, n);
+    var p = loadImage(url)
+      .then(function () { hiresReady.add(key); return url; })       // confirmed present
+      .catch(function () { probeCache.delete(key); return null; }); // missing -> re-checkable
+    probeCache.set(key, p);
+    return p;
+  }
+
+  // When missing, ask the backend to generate it, then return the URL (2-3s).
+  // In-flight generations are de-duped so repeated renders don't re-request.
+  function generateHires(id, oshash, n) {
+    if (!oshash) return Promise.resolve(null);
+    var key = sheetKey(oshash, n);
+    if (hiresReady.has(key)) return Promise.resolve(assetUrl(oshash, n));
+    if (genInFlight.has(key)) return genInFlight.get(key);
+    var url = assetUrl(oshash, n);
+    var p = runOp({ mode: "generate", scene_id: id, n: n })
+      .then(function () { return loadImage(url); })   // load the served URL after generation
+      .then(function () { hiresReady.add(key); return url; })
+      .catch(function () { return null; })            // generation failed -> keep the cover
+      .then(function (res) { genInFlight.delete(key); return res; });
+    genInFlight.set(key, p);
+    return p;
+  }
+
+  /* ---------- seek: tap a mosaic cell to jump there ---------- */
+  // Seek the video.js player (or the raw <video>) to t seconds and play.
+  function seekTo(t) {
+    try {
+      var root = document.querySelector(".video-js");
+      if (window.videojs && root) {
+        var p = window.videojs.getPlayer ? window.videojs.getPlayer(root) : window.videojs(root);
+        if (p) {
+          var seek = function () { try { p.currentTime(t); } catch (e) {} };
+          var pr = p.play();
+          if (pr && pr.then) pr.then(seek, seek);
+          p.one("loadedmetadata", seek);
+          p.one("playing", seek);
+          return;
+        }
+      }
+    } catch (e) {}
+    var v = document.querySelector(".vjs-tech");
+    if (v && v.tagName === "VIDEO") {
+      var apply = function () { try { v.currentTime = t; } catch (e) {} };
+      try { var r = v.play(); if (r && r.then) r.then(apply, apply); } catch (e) {}
+      if (v.readyState >= 1) apply();
+      v.addEventListener("loadedmetadata", apply, { once: true });
+      v.addEventListener("playing", apply, { once: true });
+    }
+  }
+
+  // The sheet is always 16:9 (N x N of 16:9 cells) drawn with
+  // background-size:contain, so work out the displayed image rect (accounting
+  // for any letterboxing) and the per-cell size within the overlay.
+  function cellGeom(ov) {
+    var n = parseInt(ov.getAttribute("data-mp-n"), 10);
+    if (!n) return null;
+    var rect = ov.getBoundingClientRect();
+    if (!rect.width || !rect.height) return null;
+    var aspect = parseFloat(ov.getAttribute("data-mp-aspect")) || (16 / 9);
+    var iw, ih;
+    if (rect.width / rect.height > aspect) { ih = rect.height; iw = ih * aspect; }
+    else { iw = rect.width; ih = iw / aspect; }
+    return { n: n, rect: rect, iw: iw, ih: ih,
+             ox: (rect.width - iw) / 2, oy: (rect.height - ih) / 2, cw: iw / n, ch: ih / n };
+  }
+  // Timestamp for cell idx: prefer the exact VTT times (sprite sheets); fall
+  // back to even spacing from the duration (generated sheets).
+  function cellTime(ov, idx, n) {
+    var ta = ov.getAttribute("data-mp-times");
+    if (ta) {
+      try { var arr = JSON.parse(ta); if (arr && arr[idx] != null) return arr[idx]; } catch (e) {}
+    }
+    var dur = parseFloat(ov.getAttribute("data-mp-dur")) || 0;
+    return dur > 0 ? dur * (idx + 0.5) / (n * n) : 0;
+  }
+  // Which cell (col,row) is at the given client point? null if in the letterbox.
+  function cellAt(g, clientX, clientY) {
+    var x = clientX - g.rect.left - g.ox, y = clientY - g.rect.top - g.oy;
+    if (x < 0 || y < 0 || x > g.iw || y > g.ih) return null;
+    return { col: Math.max(0, Math.min(g.n - 1, Math.floor(x / g.cw))),
+             row: Math.max(0, Math.min(g.n - 1, Math.floor(y / g.ch))) };
+  }
+
+  // Tap a cell -> seek to that cell's timestamp.
+  function onOverlayClick(e) {
+    if (!currentSeek) return;
+    var ov = e.currentTarget;
+    if (ov.style.display === "none") return;
+    var g = cellGeom(ov); if (!g) return;
+    var c = cellAt(g, e.clientX, e.clientY); if (!c) return;
+    e.preventDefault(); e.stopPropagation();
+    seekTo(cellTime(ov, c.row * g.n + c.col, g.n));
+  }
+
+  // Highlight the cell under the cursor (desktop hover) so it's clear what a
+  // click would seek to.
+  function onOverlayMove(e) {
+    var ov = e.currentTarget;
+    var hi = ov.querySelector(".mp-cell-hi"); if (!hi) return;
+    if (!currentSeek || ov.style.display === "none") { setStyle(hi, "display", "none"); return; }
+    var g = cellGeom(ov);
+    var c = g && cellAt(g, e.clientX, e.clientY);
+    if (!c) { setStyle(hi, "display", "none"); return; }
+    setStyle(hi, "left", (g.ox + c.col * g.cw) + "px");
+    setStyle(hi, "top", (g.oy + c.row * g.ch) + "px");
+    setStyle(hi, "width", g.cw + "px");
+    setStyle(hi, "height", g.ch + "px");
+    setStyle(hi, "display", "block");
+  }
+  function onOverlayLeave(e) {
+    var hi = e.currentTarget.querySelector(".mp-cell-hi");
+    if (hi) setStyle(hi, "display", "none");
+  }
+
+  /* ---------- DOM (overlay + toggle button) ---------- */
+  function ensureOverlay(poster) {
+    var ov = poster.querySelector(".mp-overlay");
+    if (!ov) {
+      ov = document.createElement("div");
+      ov.className = "mp-overlay";
+      ov.style.display = "none";
+      var hi = document.createElement("div");   // hovered-cell highlight
+      hi.className = "mp-cell-hi";
+      hi.style.display = "none";
+      ov.appendChild(hi);
+      ov.addEventListener("click", onOverlayClick);
+      ov.addEventListener("mousemove", onOverlayMove);
+      ov.addEventListener("mouseleave", onOverlayLeave);
+      poster.appendChild(ov);
+    }
+    return ov;
+  }
+  // "Mosaic" label + on/off switch. The switch reflects the CURRENT state
+  // (on = mosaic shown for this scene), which is clearer than a button that
+  // shows what the next click would switch to.
+  function ensureButton(poster) {
+    var btn = poster.querySelector(".mp-toggle");
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "mp-toggle";
+      var spin = document.createElement("span");   // loading spinner (hidden unless generating)
+      spin.className = "mp-spin";
+      spin.style.display = "none";
+      var lbl = document.createElement("span");
+      lbl.className = "mp-toggle-label";
+      lbl.textContent = T.mosaic;
+      var sw = document.createElement("span");
+      sw.className = "mp-switch";
+      sw.appendChild(document.createElement("span")).className = "mp-knob";
+      btn.appendChild(spin);
+      btn.appendChild(lbl);
+      btn.appendChild(sw);
+      btn.addEventListener("click", function (e) {
+        e.preventDefault(); e.stopPropagation();
+        setEnabled(!isEnabled()); render();
+      });
+      poster.appendChild(btn);
+    }
+    return btn;
+  }
+  // Show/hide the loading spinner in the toggle (while a sheet is generating).
+  function setLoading(poster, on) {
+    var btn = poster.querySelector(".mp-toggle");
+    var spin = btn && btn.querySelector(".mp-spin");
+    if (spin) setStyle(spin, "display", on ? "inline-block" : "none");
+  }
+  // Grid-size button: cycles 3×3 -> ... -> 8×8 -> back to 3×3 (only in mosaic mode).
+  function ensureSizeButton(poster) {
+    var btn = poster.querySelector(".mp-size");
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "mp-size";
+      btn.addEventListener("click", function (e) {
+        e.preventDefault(); e.stopPropagation();
+        cycleSize();
+        resetWarm();   // re-warm the visible cards at the new size
+        render();
+      });
+      poster.appendChild(btn);
+    }
+    return btn;
+  }
+  function setStyle(el, prop, val) { if (el.style[prop] !== val) el.style[prop] = val; }
+
+  // Still showing the same scene at the same grid size, and mosaic still on?
+  function stillCurrent(id, n) {
+    return currentSceneId() === id && isEnabled() && currentSize() === n;
+  }
+
+  // Apply the mosaic background to the overlay. rank: sprite(1) < hi-res(2);
+  // a lower rank never overwrites a higher one already shown for this view.
+  // Writes nothing if identical (avoids a MutationObserver loop).
+  function applyBg(ov, id, url, rank) {
+    var curId = ov.getAttribute("data-mp-id");
+    var curRank = +ov.getAttribute("data-mp-rank") || 0;
+    var curUrl = ov.getAttribute("data-mp-url");
+    if (curId === id && curUrl === url && curRank === rank) return; // identical -> no-op
+    if (curId === id && curRank > rank) return;                     // higher rank present -> keep
+    ov.setAttribute("data-mp-id", id);
+    ov.setAttribute("data-mp-rank", String(rank));
+    ov.setAttribute("data-mp-url", url);
+    setStyle(ov, "backgroundImage", 'url("' + url + '")');
+    setStyle(ov, "display", "block");
+  }
+  function overlayRank(ov, view) {
+    return ov.getAttribute("data-mp-id") === view ? (+ov.getAttribute("data-mp-rank") || 0) : 0;
+  }
+
+  /* ---------- render (idempotent) ---------- */
+  function render() {
+    var id = currentSceneId();
+    if (!id) return;
+    var poster = document.querySelector(".vjs-poster");
+    if (!poster) return;
+
+    var on = isEnabled();
+    var n = currentSize();
+    var view = id + ":" + n; // overlay identity: resets when scene OR size changes
+
+    var btn = ensureButton(poster);
+    var lbl = btn.querySelector(".mp-toggle-label");
+    if (lbl && lbl.textContent !== T.mosaic) lbl.textContent = T.mosaic;
+    if (btn.classList.contains("mp-on") !== on) btn.classList.toggle("mp-on", on);
+    var ap = on ? "true" : "false";
+    if (btn.getAttribute("aria-pressed") !== ap) btn.setAttribute("aria-pressed", ap);
+    var tip = on ? T.on : T.off;
+    if (btn.title !== tip) btn.title = tip;
+
+    var sizeBtn = ensureSizeButton(poster);
+    var sizeLabel = "⊞ " + n + "×" + n;
+    if (sizeBtn.textContent !== sizeLabel) sizeBtn.textContent = sizeLabel;
+    if (sizeBtn.title !== T.size) sizeBtn.title = T.size;
+    setStyle(sizeBtn, "display", on ? "inline-flex" : "none"); // only in mosaic mode
+
+    var seekable = on && currentSeek;
+
+    var ov = ensureOverlay(poster);
+    if (ov.classList.contains("mp-seekable") !== seekable) ov.classList.toggle("mp-seekable", seekable);
+    if (!on) {                              // cover art underneath shows through
+      setStyle(ov, "display", "none");
+      setLoading(poster, false);
+      return;
+    }
+
+    // Reset overlay state when the scene or grid size changes.
+    if (ov.getAttribute("data-mp-id") !== view) {
+      ov.setAttribute("data-mp-id", view);
+      ov.setAttribute("data-mp-n", n);
+      ov.setAttribute("data-mp-rank", "0");
+      ov.removeAttribute("data-mp-url");
+      ov.removeAttribute("data-mp-times");
+      setStyle(ov, "display", "none");
+    }
+
+    // Two stages: (1) show the sprite sheet instantly, then (2) swap in the
+    // hi-res ffmpeg sheet once it's ready. Hi-res (rank 2) never gets clobbered
+    // by the sprite (rank 1) on re-renders.
+    function applyHiRes(url) {
+      if (!stillCurrent(id, n) || !url) return;
+      var p = document.querySelector(".vjs-poster"); if (!p) return;
+      var o = ensureOverlay(p);
+      o.removeAttribute("data-mp-times");            // generated sheet = even spacing
+      o.setAttribute("data-mp-aspect", String(16 / 9));
+      setLoading(p, false);
+      applyBg(o, view, url, 2);
+    }
+
+    fetchInfo(id).then(function (info) {
+      if (!stillCurrent(id, n)) return;
+      var oshash = (info || {}).oshash;
+      var dur = (info || {}).duration || 0;
+      var sprite = (info || {}).sprite;
+      var q = document.querySelector(".vjs-poster"); if (!q) return;
+      var ovq = ensureOverlay(q);
+      ovq.setAttribute("data-mp-n", n);
+      ovq.setAttribute("data-mp-dur", dur);
+
+      // Stage 1: sprite sheet (instant). Uses the real VTT timestamps for seek.
+      buildSpriteSheet(sprite, n).then(function (sres) {
+        if (!stillCurrent(id, n)) return;
+        var p1 = document.querySelector(".vjs-poster"); if (!p1) return;
+        var ov1 = ensureOverlay(p1);
+        if (sres && overlayRank(ov1, view) < 2) {    // don't clobber hi-res
+          ov1.setAttribute("data-mp-times", JSON.stringify(sres.times));
+          ov1.setAttribute("data-mp-aspect", sres.aspect);
+          setLoading(p1, false);
+          applyBg(ov1, view, sres.url, 1);
+        } else if (!sres && overlayRank(ov1, view) < 2) {
+          // no sprite: keep the cover art; show the spinner only if a hi-res
+          // sheet is going to be generated.
+          setStyle(ov1, "display", "none");
+          setLoading(p1, currentHiRes);
+        }
+      });
+
+      // Stage 2 (optional, off by default): upgrade to the hi-res ffmpeg sheet —
+      // reuse if already generated, else generate, then swap it in.
+      if (currentHiRes) {
+        probeHires(oshash, n).then(function (hurl) {
+          if (hurl) { applyHiRes(hurl); return; }
+          generateHires(id, oshash, n).then(applyHiRes);
+        });
+      }
+    });
+  }
+
+  /* ---------- Viewport-following warm (pre-generation) ----------
+   * Pre-generate sheets only for cards that are visible or about to become
+   * visible (looking ahead downward), so navigating into their detail page
+   * shows the hi-res sheet immediately (no 2s wait). Whether the list shows
+   * 40 or 1000 cards, warm only touches the neighbourhood of the viewport, so
+   * CPU/disk is spent only on what you actually scroll past — never the whole
+   * list blindly.
+   *  - Scene ids are collected via IntersectionObserver (~1.5 screens ahead)
+   *    and flushed to the backend in small batches, one operation in flight at
+   *    a time, so at most one ffmpeg runs for warm. Once queued, unobserve.
+   */
+  // Speculative pre-generation is disabled: sprite-based sheets are built
+  // instantly on the detail page, so there is nothing worth pre-generating (and
+  // it would add exactly the ffmpeg overhead we now avoid). Kept behind a flag
+  // in case the generation fallback ever wants opt-in warming again.
+  var WARM_ENABLED = false;
+  var WARM_BATCH = 8;                // scene ids per backend call
+  var warmSeen = new Set();          // scene ids already queued this session
+  var warmPending = [];              // ids waiting to be flushed
+  var warmInFlight = false;
+  var observedLinks = new WeakSet(); // cards already observed (avoid re-observe)
+
+  function linkSceneId(a) {
+    var m = (a.getAttribute("href") || "").match(/^\/scenes\/(\d+)/);
+    return m ? m[1] : null;
+  }
+
+  // Send the next batch of pending ids to the backend at the current grid size;
+  // chain until drained so only one operation (one ffmpeg) runs at a time.
+  function flushWarm() {
+    if (warmInFlight || !warmPending.length || !currentOn) return; // gate on global default
+    var batch = warmPending.splice(0, WARM_BATCH);
+    warmInFlight = true;
+    runOp({ mode: "warm", scene_ids: batch, n: currentSize() }).then(function () {
+      warmInFlight = false;
+      flushWarm();
+    });
+  }
+
+  // Queue a card for warming. Returns true if it was queued or is not needed
+  // (safe to unobserve), false if warming is currently disabled (keep watching
+  // so it can be picked up after the user toggles mosaic back on).
+  function tryWarm(a) {
+    if (!WARM_ENABLED) return true;  // warming disabled -> stop observing this card
+    if (!currentOn) return false; // gate on global default (per-scene overrides don't drive warm)
+    var id = linkSceneId(a);
+    if (!id) return true;
+    if (id === currentSceneId() || warmSeen.has(id)) return true;
+    warmSeen.add(id);
+    warmPending.push(id);
+    flushWarm();
+    return true;
+  }
+
+  // On a grid-size change, forget what was warmed and re-observe the cards so
+  // the now-visible ones get pre-generated at the new size.
+  function resetWarm() {
+    warmSeen = new Set();
+    warmPending = [];
+    observedLinks = new WeakSet();
+    observeCards();
+  }
+
+  // Look ~1.5 screens ahead (downward) and only warm cards near the viewport.
+  var warmIO = ("IntersectionObserver" in window)
+    ? new IntersectionObserver(function (entries) {
+        for (var i = 0; i < entries.length; i++) {
+          var e = entries[i];
+          if (!e.isIntersecting) continue;
+          if (tryWarm(e.target)) warmIO.unobserve(e.target);
+        }
+      }, { root: null, rootMargin: "600px 0px 1200px 0px", threshold: 0 })
+    : null;
+
+  // Register any not-yet-observed scene cards currently in the DOM.
+  function observeCards() {
+    if (!warmIO) return;
+    var links = document.querySelectorAll('a[href^="/scenes/"]');
+    for (var i = 0; i < links.length; i++) {
+      var a = links[i];
+      if (observedLinks.has(a) || !linkSceneId(a)) continue;
+      observedLinks.add(a);
+      warmIO.observe(a);
+    }
+  }
+
+  // Kick generation for the current scene as soon as we know it, independent of
+  // the poster DOM or tab focus. This only talks to the backend (fetch works in
+  // background tabs), so a scene opened in an inactive tab starts generating
+  // right away instead of waiting for the tab to become active.
+  function maybeGenerate() {
+    if (!settingsLoaded || !currentHiRes) return; // only pre-generate when hi-res is on
+    var id = currentSceneId();
+    if (!id || !isEnabled()) return;
+    var n = currentSize();
+    fetchInfo(id).then(function (info) {
+      var oshash = (info || {}).oshash;
+      if (!oshash) return;
+      probeHires(oshash, n).then(function (url) {
+        if (!url) generateHires(id, oshash, n); // start hi-res generation now (deduped)
+      });
+    });
+  }
+
+  /* ---------- SPA following (DOM observer) ----------
+   * Debounce with setTimeout, NOT requestAnimationFrame: rAF is paused in
+   * background/inactive tabs, so a scene opened in a background tab would not
+   * generate until activated. setTimeout still fires (just throttled) when hidden. */
+  var scheduled = false;
+  var obs = new MutationObserver(function () {
+    if (scheduled) return;
+    scheduled = true;
+    setTimeout(function () { scheduled = false; render(); observeCards(); maybeGenerate(); }, 0);
+  });
+  obs.observe(document.documentElement, { childList: true, subtree: true });
+
+  // Load language + settings, then render/warm/generate at the resolved values.
+  Promise.all([loadSettings(), loadLanguage()]).then(function () {
+    resetWarm(); render(); maybeGenerate();
+  });
+  render();
+  observeCards();
+})();
diff --git a/plugins/MosaicPoster/MosaicPoster.py b/plugins/MosaicPoster/MosaicPoster.py
new file mode 100644
index 00000000..4eb6b983
--- /dev/null
+++ b/plugins/MosaicPoster/MosaicPoster.py
@@ -0,0 +1,333 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+Mosaic Poster - generation backend (Stash plugin, raw interface)
+================================================================
+Invoked by Stash via `runPluginOperation` / `runPluginTask`. Reads a JSON
+payload on stdin ({server_connection, args}) and writes a JSON result on
+stdout ({output|error}).
+
+It generates a 5x5 contact sheet (whole-video overview) for a scene by
+sampling 25 frames from the real video with ffmpeg, and writes it to
+`<pluginDir>/generated/<oshash>.jpg`. Stash serves that folder statically
+(via `ui.assets` in the manifest) at:
+    /plugin/MosaicPoster/assets/generated/<oshash>.jpg
+so the frontend can display it with normal HTTP caching. No standalone
+daemon, no fixed port, no OS-specific service.
+
+Paths (ffmpeg/ffprobe, generated dir) are read from Stash's own
+configuration, so it works on any machine/OS. When ffmpegPath is unset,
+Stash uses its bundled binary in the config directory; we locate it.
+
+Modes (args.mode):
+  generate  scene_id=<id> | scene_ids=[...]  -> generate sheets, return {done,missing}
+  prune                                       -> enforce LRU cache cap
+  backfill  [limit=N]                         -> generate missing sheets library-wide (task)
+  debug                                       -> return resolved paths/keys (diagnostics)
+"""
+import sys
+import os
+import json
+import shutil
+import subprocess
+import urllib.request
+
+SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
+GEN_DIR = os.path.join(SCRIPT_DIR, "generated")
+
+CELL_W, CELL_H = 384, 216          # per cell (16:9); an N x N grid stays 16:9 overall
+JPEG_Q = "3"                       # ffmpeg -q:v (2..5, lower = better)
+DEFAULT_GRID = 5                   # N for an N x N sheet (N*N frames)
+MIN_GRID, MAX_GRID = 2, 8          # clamp range for the requested grid size
+DEFAULT_CACHE_MAX = 250            # LRU cap (files). ~0.3MB each -> ~75MB. 0 = unlimited.
+
+def clamp_grid(value):
+    try:
+        n = int(value)
+    except (TypeError, ValueError):
+        return DEFAULT_GRID
+    return max(MIN_GRID, min(MAX_GRID, n))
+
+# ---- stdin/stdout (Stash raw plugin protocol) -------------------------
+def read_payload():
+    raw = sys.stdin.read()
+    return json.loads(raw) if raw.strip() else {}
+
+def emit_output(obj):
+    sys.stdout.write(json.dumps({"output": obj}))
+
+def emit_error(msg):
+    sys.stdout.write(json.dumps({"error": str(msg)}))
+
+# ---- talk back to Stash GraphQL --------------------------------------
+class Stash:
+    def __init__(self, sc):
+        scheme = sc.get("Scheme") or "http"
+        host = sc.get("Host") or "127.0.0.1"
+        if host in ("0.0.0.0", "", None):
+            host = "127.0.0.1"
+        port = int(sc.get("Port") or 9999)
+        self.url = "%s://%s:%d/graphql" % (scheme, host, port)
+        self.headers = {"Content-Type": "application/json"}
+        cookie = sc.get("SessionCookie") or {}
+        if cookie.get("Name") and cookie.get("Value"):
+            self.headers["Cookie"] = "%s=%s" % (cookie["Name"], cookie["Value"])
+        api_key = sc.get("ApiKey")
+        if api_key:
+            self.headers["ApiKey"] = api_key
+
+    def call(self, query, variables=None):
+        body = json.dumps({"query": query, "variables": variables or {}}).encode("utf-8")
+        req = urllib.request.Request(self.url, data=body, headers=self.headers)
+        with urllib.request.urlopen(req, timeout=60) as r:
+            return json.load(r)
+
+# ---- path resolution (config-driven, cross-platform) ------------------
+def get_general_config(stash):
+    q = "{configuration{general{ffmpegPath ffprobePath generatedPath}}}"
+    return stash.call(q)["data"]["configuration"]["general"]
+
+def resolve_binary(name, configured, generated_path):
+    """Locate ffmpeg/ffprobe. Prefer Stash's configured path; else the bundled
+    binary in the config dir; else PATH. Handles the .exe suffix on Windows."""
+    cands = []
+    if configured:
+        cands.append(configured)
+    if generated_path:
+        # Stash downloads bundled ffmpeg into the config dir. When generatedPath
+        # is the default (<configdir>/generated), its parent is the config dir.
+        cands.append(os.path.join(os.path.dirname(generated_path), name))
+    home = os.path.expanduser("~")
+    cands.append(os.path.join(home, ".stash", name))
+    cands.append(os.path.join(home, ".config", "stash", name))
+    on_path = shutil.which(name)
+    if on_path:
+        cands.append(on_path)
+    for c in cands:
+        if not c:
+            continue
+        if os.path.isfile(c):
+            return c
+        if os.path.isfile(c + ".exe"):
+            return c + ".exe"
+    return None
+
+# ---- scene lookup -----------------------------------------------------
+def scene_info(stash, scene_id):
+    q = ("query($id:ID!){findScene(id:$id){files{path fingerprints{type value}}}}")
+    d = stash.call(q, {"id": str(scene_id)})
+    node = (d.get("data") or {}).get("findScene") or {}
+    files = node.get("files") or []
+    if not files:
+        return None, None
+    f = files[0]
+    oshash = None
+    for fp in (f.get("fingerprints") or []):
+        if fp.get("type") == "oshash":
+            oshash = fp.get("value")
+            break
+    return f.get("path"), oshash
+
+# ---- generation (N*N input-seeks -> tile=NxN) -------------------------
+def probe_duration(ffprobe, path):
+    try:
+        s = subprocess.check_output(
+            [ffprobe, "-v", "error", "-show_entries", "format=duration",
+             "-of", "default=nw=1:nk=1", path],
+            stderr=subprocess.DEVNULL).decode().strip()
+        return float(s)
+    except Exception:
+        return 0.0
+
+def out_path(oshash, grid):
+    # Grid size is part of the filename so different sizes cache independently.
+    return os.path.join(GEN_DIR, "%s_%dx%d.jpg" % (oshash, grid, grid))
+
+def generate_sheet(ffmpeg, ffprobe, path, oshash, grid):
+    """Build the N x N contact sheet; return its path, or None (unmounted/failed)."""
+    if not oshash:
+        return None
+    dst = out_path(oshash, grid)
+    if os.path.exists(dst):
+        return dst
+    if not path or not os.path.isfile(path):
+        return None  # drive not mounted etc. -> retry next time
+    dur = probe_duration(ffprobe, path)
+    if dur <= 0:
+        return None
+    os.makedirs(GEN_DIR, exist_ok=True)
+    tmp = os.path.join(GEN_DIR, ".%s_%d.tmp" % (oshash, grid))
+    os.makedirs(tmp, exist_ok=True)
+    try:
+        cells = grid * grid
+        vf_cell = ("scale=%d:%d:force_original_aspect_ratio=decrease,"
+                   "pad=%d:%d:(ow-iw)/2:(oh-ih)/2:color=black"
+                   % (CELL_W, CELL_H, CELL_W, CELL_H))
+        for i in range(cells):
+            t = dur * (i + 0.5) / cells  # cell midpoint (avoid opening black / end credits)
+            subprocess.run(
+                [ffmpeg, "-v", "error", "-y", "-ss", "%.3f" % t, "-i", path,
+                 "-frames:v", "1", "-vf", vf_cell, "-q:v", JPEG_Q,
+                 os.path.join(tmp, "f_%03d.jpg" % i)],
+                stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+        subprocess.run(
+            [ffmpeg, "-v", "error", "-y", "-framerate", "1",
+             "-i", os.path.join(tmp, "f_%03d.jpg"),
+             "-vf", "tile=%dx%d" % (grid, grid),
+             "-frames:v", "1", "-q:v", JPEG_Q, dst],
+            stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+    finally:
+        shutil.rmtree(tmp, ignore_errors=True)
+    return dst if os.path.exists(dst) else None
+
+# ---- LRU cache --------------------------------------------------------
+def prune(cache_max):
+    if cache_max <= 0 or not os.path.isdir(GEN_DIR):
+        return 0
+    entries = []
+    for fn in os.listdir(GEN_DIR):
+        if not fn.endswith(".jpg"):
+            continue
+        p = os.path.join(GEN_DIR, fn)
+        try:
+            entries.append((os.stat(p).st_mtime, p))
+        except OSError:
+            pass
+    excess = len(entries) - cache_max
+    if excess <= 0:
+        return 0
+    entries.sort()  # oldest mtime first
+    removed = 0
+    for _mtime, p in entries[:excess]:
+        try:
+            os.remove(p)
+            removed += 1
+        except OSError:
+            pass
+    return removed
+
+# ---- plugin settings --------------------------------------------------
+def _plugin_settings(stash):
+    try:
+        d = stash.call('{configuration{plugins}}')
+        plugins = (d.get("data") or {}).get("configuration", {}).get("plugins") or {}
+        return plugins.get("MosaicPoster") or {}
+    except Exception:
+        return {}
+
+def get_cache_max(stash, args):
+    if args.get("cache_max") is not None:
+        try:
+            return int(args["cache_max"])
+        except (TypeError, ValueError):
+            pass
+    val = _plugin_settings(stash).get("cacheMax")
+    if val is not None:
+        try:
+            return int(val)
+        except (TypeError, ValueError):
+            pass
+    return DEFAULT_CACHE_MAX
+
+def get_grid(stash, args):
+    # Prefer an explicit per-call grid (frontend passes it); otherwise use the
+    # gridSize plugin setting (so the Backfill task honours the configured size).
+    if args.get("n") is not None:
+        return clamp_grid(args.get("n"))
+    return clamp_grid(_plugin_settings(stash).get("gridSize"))
+
+# ---- backfill (task) --------------------------------------------------
+def backfill(stash, ffmpeg, ffprobe, limit, grid):
+    per, page, made = 100, 1, 0
+    while True:
+        q = ("query($p:Int!,$n:Int!){findScenes(filter:{per_page:$n,page:$p}){"
+             "scenes{id files{path fingerprints{type value}}}}}")
+        scenes = (((stash.call(q, {"p": page, "n": per}).get("data") or {})
+                   .get("findScenes") or {}).get("scenes") or [])
+        if not scenes:
+            break
+        for s in scenes:
+            files = s.get("files") or []
+            if not files:
+                continue
+            f = files[0]
+            oshash = None
+            for fp in (f.get("fingerprints") or []):
+                if fp.get("type") == "oshash":
+                    oshash = fp.get("value")
+                    break
+            if not oshash or os.path.exists(out_path(oshash, grid)):
+                continue
+            if generate_sheet(ffmpeg, ffprobe, f.get("path"), oshash, grid):
+                made += 1
+                if limit and made >= limit:
+                    return made
+        page += 1
+    return made
+
+# ---- dispatch ---------------------------------------------------------
+def main():
+    payload = read_payload()
+    args = payload.get("args") or {}
+    sc = payload.get("server_connection") or {}
+    mode = args.get("mode") or "generate"
+
+    try:
+        stash = Stash(sc)
+        cfg = get_general_config(stash)
+    except Exception as e:
+        return emit_error("config error: %s" % e)
+
+    ffmpeg = resolve_binary("ffmpeg", cfg.get("ffmpegPath"), cfg.get("generatedPath"))
+    ffprobe = resolve_binary("ffprobe", cfg.get("ffprobePath"), cfg.get("generatedPath"))
+    cache_max = get_cache_max(stash, args)
+
+    if mode == "debug":
+        return emit_output({
+            "server_conn_keys": sorted(sc.keys()),
+            "ffmpeg": ffmpeg, "ffprobe": ffprobe,
+            "gen_dir": GEN_DIR, "cache_max": cache_max, "config": cfg,
+        })
+
+    if mode == "prune":
+        return emit_output({"removed": prune(cache_max)})
+
+    grid = get_grid(stash, args)
+
+    if mode == "backfill":
+        if not ffmpeg or not ffprobe:
+            return emit_error("ffmpeg/ffprobe not found")
+        try:
+            limit = int(args.get("limit")) if args.get("limit") else None
+        except (TypeError, ValueError):
+            limit = None
+        made = backfill(stash, ffmpeg, ffprobe, limit, grid)
+        prune(cache_max)
+        return emit_output({"made": made, "grid": grid})
+
+    if mode in ("generate", "warm"):
+        ids = args.get("scene_ids")
+        if not ids:
+            one = args.get("scene_id")
+            ids = [one] if one else []
+        if not ids:
+            return emit_error("scene_id or scene_ids required")
+        if not ffmpeg or not ffprobe:
+            return emit_error("ffmpeg/ffprobe not found")
+        done, missing = [], []
+        for sid in ids:
+            path, oshash = scene_info(stash, sid)
+            if not oshash:
+                missing.append(sid)
+                continue
+            if generate_sheet(ffmpeg, ffprobe, path, oshash, grid):
+                done.append(oshash)
+            else:
+                missing.append(sid)
+        prune(cache_max)
+        return emit_output({"done": done, "missing": missing, "grid": grid})
+
+    return emit_error("unknown mode: %s" % mode)
+
+if __name__ == "__main__":
+    main()
diff --git a/plugins/MosaicPoster/MosaicPoster.yml b/plugins/MosaicPoster/MosaicPoster.yml
new file mode 100644
index 00000000..f1281b0e
--- /dev/null
+++ b/plugins/MosaicPoster/MosaicPoster.yml
@@ -0,0 +1,51 @@
+name: Mosaic Poster
+description: Replaces the pre-playback poster on the scene detail page with a 5x5 contact sheet (a whole-video overview) sampled evenly across the video. A button at the top-right of the poster toggles cover art <-> mosaic in one click (the choice is remembered). List and card cover art is untouched.
+version: 1.0.0
+url: https://github.com/stashapp/CommunityScripts
+# UI: the frontend plugin. It serves the generated/ folder statically and
+#     overlays the 5x5 sheet on the detail poster. Served at
+#     /plugin/MosaicPoster/assets/generated/<oshash>.jpg
+ui:
+  javascript:
+    - MosaicPoster.js
+  css:
+    - MosaicPoster.css
+  assets:
+    /: .
+# Generation backend: called from the frontend via runPluginOperation. It
+#     generates the 5x5 sheet from the real video with ffmpeg. Paths are read
+#     from Stash's own configuration, so it is OS-independent.
+exec:
+  - python
+  - "{pluginDir}/MosaicPoster.py"
+interface: raw
+settings:
+  defaultOn:
+    displayName: Show mosaic by default
+    description: When enabled (default), scenes open showing the mosaic; disable to open with cover art. This is the global default across devices; the button on each scene's poster overrides it for that scene only.
+    type: BOOLEAN
+  tapToSeek:
+    displayName: Tap a cell to seek
+    description: When enabled (default), clicking a mosaic cell jumps playback to that point in the video. Disable to make clicking the mosaic play from the start instead.
+    type: BOOLEAN
+  hiResUpgrade:
+    displayName: High-res upgrade
+    description: When enabled, after showing the instant sprite-based sheet, a higher-resolution sheet is generated from the video with ffmpeg and swapped in. Off by default (sprite only, no generation).
+    type: BOOLEAN
+  gridSize:
+    displayName: Mosaic grid size (3-8)
+    description: Frames per side, N for an N x N sheet (3-8, default 5). Also changeable from the button on the poster; both stay in sync.
+    type: NUMBER
+  cacheMax:
+    displayName: Cache limit (files)
+    description: Maximum number of generated sheets to keep. Excess is removed least-recently-viewed first (LRU). ~0.3MB each. 0 = unlimited.
+    type: NUMBER
+tasks:
+  - name: Backfill mosaics
+    description: Generate every missing sheet across the whole library (mounted files only).
+    defaultArgs:
+      mode: backfill
+  - name: Prune mosaic cache
+    description: Shrink the cache down to the configured limit (oldest first).
+    defaultArgs:
+      mode: prune
diff --git a/plugins/MosaicPoster/README.md b/plugins/MosaicPoster/README.md
new file mode 100644
index 00000000..38d104e8
--- /dev/null
+++ b/plugins/MosaicPoster/README.md
@@ -0,0 +1,109 @@
+# Mosaic Poster
+
+A Stash UI plugin that replaces the pre-playback **poster** on the scene detail
+page (`/scenes/{id}`) with a **contact sheet** — a whole-video overview sampled
+evenly across the file. A button at the top-right of the poster toggles
+**cover art ⇄ mosaic**, and a button at the top-left cycles the **grid size**
+(3×3 up to 8×8). List and card cover art is left untouched.
+
+Whether the mosaic shows by default, and the grid size, are **global plugin
+settings** (shared across devices). The cover/mosaic button overrides the
+default **for that scene only** (remembered per scene in the browser); the grid
+button changes the global size.
+
+![Mosaic Poster — cover art (mosaic off) vs a 5×5 contact sheet (mosaic on)](preview.png)
+
+## Why
+
+The default poster is a single cover image. For a lot of libraries you want to
+see *what is actually in the file* before playing it. Mosaic Poster gives you an
+N×N overview, built instantly from Stash's existing scene sprite (no extra
+generation), without changing any core Stash behaviour.
+
+## How it works
+
+By default the sheet is built **entirely in the browser from Stash's existing
+scene sprite** — the sprite image + WebVTT that Stash already generates for the
+seekbar hover preview. The plugin reads the VTT for each thumbnail's timestamp
+and region and splices the frames into an N×N grid on a canvas. **No generation,
+no ffmpeg, no extra storage** — and it appears instantly. Tap-to-seek uses each
+thumbnail's real timestamp from the VTT.
+
+If a scene has no sprite (Generate → Sprites hasn't been run) the mosaic isn't
+shown for it (the cover art stays), unless the optional hi-res upgrade is on.
+
+### High-res upgrade (optional, off by default)
+
+Sprite thumbnails are low-res, so on a large / hi-DPI display the sheet can look
+soft. Enable **High-res upgrade** to render a higher-resolution sheet from the
+real video with ffmpeg and swap it in once ready:
+
+1. The frontend shows the sprite sheet instantly, then calls the backend
+   (`runPluginOperation`, `mode: generate`, `n: <grid>`).
+2. The backend reads ffmpeg/ffprobe and the generated-files path **from Stash's
+   own configuration** (any OS), samples N×N frames, tiles them into a JPEG, and
+   writes it to `generated/<oshash>_<N>x<N>.jpg` in the plugin directory.
+3. Stash serves that folder statically (via `ui.assets`); the frontend swaps the
+   hi-res sheet in over the sprite. Each grid size is cached independently, and a
+   sheet is generated only for scenes you actually open.
+
+This is the only mode that runs ffmpeg or writes to disk, and it is **off by
+default** — out of the box the plugin adds no generation overhead. No standalone
+daemon, no fixed port, no OS-specific service.
+
+## Requirements
+
+- Stash **v0.31.0+**.
+- Scene **sprites** generated (Generate → Sprites) for the scenes you want a
+  mosaic on — this is what the default (sprite) mode builds from.
+- Only if you enable the optional **High-res upgrade**: `python` 3 on `PATH`
+  (standard library only) and ffmpeg/ffprobe (Stash's bundled binaries are used
+  automatically, or your configured paths).
+
+## Install
+
+1. Copy this folder into your Stash `plugins/` directory (or install from a
+   plugin source that includes it).
+2. Settings → Plugins → **Reload plugins**.
+3. Open any scene — the poster now shows the mosaic.
+
+## Settings
+
+- **Show mosaic by default** — when enabled (default), scenes open showing the
+  mosaic; disable to open with cover art. This is the global default; the
+  cover/mosaic button on a scene's poster overrides it for that scene only.
+- **Tap a cell to seek** — when enabled (default), clicking a mosaic cell jumps
+  playback to that point in the video; disable to make clicking play from the
+  start instead.
+- **Mosaic grid size (3-8)** — frames per side (N for an N×N sheet), 3–8,
+  default 5. This is the same value as the grid button on the poster; changing
+  either one keeps both in sync (reload the scene tab to pick up a change made
+  from the Settings page).
+- **High-res upgrade** — off by default. When on, the instant sprite sheet is
+  upgraded to a higher-resolution sheet generated from the video with ffmpeg
+  (see above). This is the only setting that runs ffmpeg / writes to disk.
+- **Cache limit (files)** — only applies to the High-res upgrade. Maximum number
+  of generated sheets to keep; excess is removed least-recently-viewed first
+  (LRU). ~0.3MB each; default 250 (~75MB). 0 = unlimited. Generated sheets are
+  disposable — a pruned one is simply regenerated next time that scene is opened.
+
+## Tasks
+
+- **Backfill mosaics** — generate every missing sheet across the whole library
+  (mounted files only).
+- **Prune mosaic cache** — shrink the cache down to the configured limit.
+
+## Localization
+
+The on-poster button/tooltip strings follow Stash's UI language and ship with
+translations for every language Stash supports (English is the default fallback
+for any unset locale). Non-English strings are best-effort — corrections from
+native speakers are welcome; add or edit an entry in the `STRINGS` table in
+`MosaicPoster.js` (keyed by lower-cased language code, e.g. `de` or `zh-tw`).
+Plugin **Settings** labels are static and remain in English (a Stash limitation).
+
+## Notes
+
+- Generated sheets live in `generated/` inside the plugin directory and are not
+  meant to be committed (see `.gitignore`).
+- Core Stash config is never modified.
diff --git a/plugins/MosaicPoster/preview.png b/plugins/MosaicPoster/preview.png
new file mode 100644
index 00000000..5f475dd9
Binary files /dev/null and b/plugins/MosaicPoster/preview.png differ