From 9c1ec4ac5195e7d53f71db5295fbe4f0247c884e Mon Sep 17 00:00:00 2001
From: Jonathan Sykes <telemagnadon@gmail.com>
Date: Sun, 20 Sep 2026 00:07:12 +0800
Subject: [PATCH] Add presenter view, stats, lyrics worker, watch party with
 voice chat, timestamp sharing, soundbites, notes, transcript search, PiP, EQ,
 sleep fade, gestures and external players; fix the crossfade end-of-song race

---
 CLAUDE.md                     |   71 +-
 docker-compose.yml            |   33 +
 frontend/app.js               | 1822 +++++++++++++++++++++++++++++++--
 frontend/index.html           |   59 +-
 frontend/stats-core.js        |  152 +++
 frontend/stats-core.test.js   |   67 ++
 frontend/styles.css           |  231 +++++
 frontend/sw.js                |    1 +
 scripts/lyrics/.dockerignore  |    1 +
 scripts/lyrics/Dockerfile     |   15 +
 scripts/lyrics/auto_lyrics.py |  147 ++-
 server/notes.js               |    4 +-
 server/notes.test.js          |    8 +
 server/package.json           |    2 +-
 server/party.js               |  170 +++
 server/party.test.js          |  117 +++
 server/server.js              |  123 ++-
 17 files changed, 2912 insertions(+), 111 deletions(-)
 create mode 100644 frontend/stats-core.js
 create mode 100644 frontend/stats-core.test.js
 create mode 100644 scripts/lyrics/.dockerignore
 create mode 100644 scripts/lyrics/Dockerfile
 create mode 100644 server/party.js
 create mode 100644 server/party.test.js

diff --git a/CLAUDE.md b/CLAUDE.md
index 8e39841..aefe57f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -127,6 +127,11 @@ JSON shapes mirror the Tauri Rust bridge exactly — don't change one side alone
   `playing` (failsafe 5 s / 20 s). afterLoad skips resume/A-marker seeks
   during a handoff; `onTrackEnded` ignores `ended` while one runs.
 - iOS ignores `element.volume`, so crossfade degrades to gapless there.
+- **End-of-song race (fixed):** the song's last `timeupdate` arrives with the
+  element already `paused` (it ended), and `ended` can beat the fade timer.
+  Both used to look like "user paused" → the crossfade was cancelled and the
+  next song restarted from 0. `tick()` and `onTrackEnded` (`Transition.onEnded()`)
+  now finish the handoff when a fade is running at the end.
 - Waveform: `GET /api/media/:id/peaks` = 400 RMS buckets (0..100, ^0.7 so
   quiet verses stay visible) from ffmpeg over the server-cached copy, memoised
   per file path (gen). Audio-only mode draws it on `#waveCanvas` BEHIND the
@@ -137,6 +142,70 @@ JSON shapes mirror the Tauri Rust bridge exactly — don't change one side alone
   (upsertMedia rows + `<id>.1.m4a/.mp4` files) — Playwright's Chromium plays
   AAC; launch with `--autoplay-policy=no-user-gesture-required`.
 
+## Watch party, sharing, playback extras (all in app.js unless noted)
+- **Watch party** (`server/party.js`, `Party`): `/ws/party` (Bun has ONE websocket
+  handler — sockets are tagged `ws.data.hub = 'party'` and routed in server.js).
+  Host drives; guests extrapolate the host's `state` from the server-stamped
+  `ts` (clock offset from `hello.now`), seek when > 1.5 s off, mirror
+  play/pause. Guest actions within the 1.5 s "quiet" window after a sync are
+  ignored; later ones → a `cmd` (if the host allows control) or "off sync"
+  (Re-sync button). `playNext/playPrev` → `Party.intercept`, and guests never
+  auto-advance or crossfade. Chat is relayed (≤ 500 chars, 400 ms flood guard,
+  last 60 kept). Voice = WebRTC mesh, the smaller pid offers, STUN only (no
+  TURN — strict NATs won't connect). Host resumes after a reload with the
+  `secret` from `hello` (party survives 5 min without its host).
+- **Timestamp sharing** (`Share`): `/?v=<id>&t=<sec>` deep links (handled at
+  boot via `playVideoAt`), YouTube `youtu.be/<id>?t=`, GIFs from
+  `GET /api/media/:id/gif` (palettegen, ≤ 6 s, server-cached videos only) and
+  soundbites from `GET /api/media/:id/clip?fmt=mp3|m4r` (m4r ≤ 40 s, written to a
+  temp file so it's a normal faststart MP4 — iPhones reject fragmented ones).
+- **External players** (`External`): hands out `/api/media/<id>` (the single-file
+  server copy) via Android `intent:` (VLC / MX / chooser), iOS `vlc-x-callback`,
+  desktop `vlc://`, or an `.m3u` (this video or the queue's cached songs).
+- **Notes**: bookmarks with `kind:'note'` hold multi-line text (≤ 2000) and carry
+  `vt`/`vc` (video title/channel); the 📝 Notes view lists them all, exports
+  Markdown. **Transcript search** = 🔎 tab over the lyrics or the YouTube
+  captions (`/api/notes/:id/captions`, cached per video).
+- **PiP** mirrors the PiP window's play/pause onto the whole player (dual mode's
+  sound is on `<audio>`). **EQ**: 5 BiquadFilters; media elements are wired in
+  only once a non-flat curve is picked (irreversible), disabled on iOS (Web
+  Audio suspends on lock → would kill background audio). **Sleep timer**: fade
+  over `sleepFade` s, then pause / "close" (window.close, falls back) / black
+  curtain; "end of this song" also blocks Transition. **Gestures**: double-tap
+  thirds ±10 s / play, pinch 1–3× (CSS transform), vertical swipes for volume /
+  brightness (CSS filter) only in fullscreen or `body.landscape-fs` (inline the
+  page keeps `touch-action: pan-y` so it still scrolls).
+- Local media tests: seed `media_cache` rows + `<id>.1.m4a/.mp4` files; the
+  Playwright `channel: 'chromium'` build plays H.264/AAC; `--use-fake-device-for-media-stream`
+  gives WebRTC a fake mic.
+
+## Presenter view, stats, lyrics worker
+- **Presenter** (`Presenter` in app.js, `/?present=<code>`): a lyrics-only
+  projector/TV screen. Pairs through the phone-remote relay like a phone
+  (listen-only); the host's `state` carries `v.id`, `cur`, `rate`, `paused` and
+  `off` (the host's personal lyric offset), and the presenter extrapolates the
+  position between the ~1/s updates. Host modal → "Open presenter window
+  here" opens a popup to drag onto a second display; `/api/remote/qr/<code>?kind=present`
+  is its QR. Keys: F / double-click fullscreen, B blank screen. Forced dark
+  tokens so it stays readable if the device is in light theme.
+- **`fitLyricLines(list)`** is the shared one-row font fitter for service-mode
+  lyrics and the presenter — re-run it on font load, resize and +900 ms
+  (first fit on a fresh page happens before Bricolage loads).
+- **Stats** (`frontend/stats-core.js`, pure + tested; `StatsTrack` + `renderStats`):
+  `data.stats.days[YYYY-MM-DD] = {s, p, songs:{id:plays}}` (local days, 400
+  kept) synced with the profile. Seconds = media-time deltas while playing
+  (seeks/pauses excluded, divided by playback rate); a play = 30 s heard in one
+  load; commits every 60 s / on play / on page hide to avoid profile-push spam.
+  Streak = consecutive days ≥ 5 min (today may still be pending).
+- **lyrics-worker** (compose service, `scripts/lyrics/Dockerfile`): runs
+  `auto_lyrics.py --missing --watch 300` forever — one song per cycle, nice 10,
+  `cpus: 2`, `mem_limit: 3g`, audio fetched from `http://ytplayer:3000` over the
+  private `lyrics` network (never the WAN). Auth = env `LYRICS_WORKER_TOKEN`
+  (≥ 24 chars) accepted by notes.js as `api:lyrics-worker` without a DB row;
+  unset → the worker idles. `/data/state.json` remembers instrumentals (never
+  retried) and failures (backoff 15 min·2^n). Model (~1.6 GB) downloads to the
+  `lyrics-models` volume on first start.
+
 ## Phone remote (`server/remote.js`, `Remote` in app.js)
 - Desktop tab playing to a TV = **host**; phone = **remote**. Both are browser
   tabs of this app, so the server relays over `/ws/remote` (Bun `server.upgrade`
@@ -281,7 +350,7 @@ Local DB file: `server/data/ytplayer.db` (gitignored). `BUILD_TAG` is computed f
   `render()` — so every playlist mutation refreshes both in one place.
 
 ## Testing
-- Unit: **`node --test frontend/*.test.js`** (sw, sw-update, async-guard, video-edit).
+- Unit: **`node --test frontend/*.test.js`** (sw, sw-update, async-guard, video-edit, lyrics-core, stats-core).
   Server: **`cd server && bun run test`** — runs each file in its own process (db.js is a
   singleton, so two test files in one `bun test` run share one temp DB; bare `bun test`
   also drags in the frontend node tests via the `public` symlink). media-cache needs a
diff --git a/docker-compose.yml b/docker-compose.yml
index f8d2c28..2428648 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,6 +15,9 @@ services:
       # Phone remote: "1" = a phone may only pair with a screen on the same
       # network (same public IP as seen by the server). Off by default.
       REMOTE_SAME_NETWORK: "${REMOTE_SAME_NETWORK:-0}"
+      # Shared secret the lyrics-worker uses to list songs and upload lyrics.
+      # Set in Dokploy's Environment tab (same value feeds both services).
+      LYRICS_WORKER_TOKEN: "${LYRICS_WORKER_TOKEN:-}"
       # Optional: override yt-dlp binary path if you mount a custom one
       # YTDLP_PATH: "/usr/local/bin/yt-dlp"
       # Server media cache (server/media-cache.js) — defaults shown.
@@ -36,6 +39,7 @@ services:
       start_period: 15s
     networks:
       - dokploy-network
+      - lyrics
     labels:
       - "traefik.enable=true"
       - "traefik.http.routers.ytplayer-http.rule=Host(`worship.hesed.sbs`)"
@@ -46,10 +50,39 @@ services:
       - "traefik.http.routers.ytplayer-https.tls.certresolver=letsencrypt"
       - "traefik.http.services.ytplayer-svc.loadbalancer.server.port=3000"
 
+  # Transcribes saved songs that have no lyrics yet, one at a time, with
+  # faster-whisper on CPU (no API keys, no credits). Separate container so it
+  # never competes with playback/downloads: capped CPU + memory, low priority,
+  # and it fetches audio from the ytplayer service over the private network.
+  lyrics-worker:
+    build: ./scripts/lyrics
+    restart: unless-stopped
+    depends_on:
+      - ytplayer
+    environment:
+      YTP_BASE: "http://ytplayer:3000"
+      YTP_TOKEN: "${LYRICS_WORKER_TOKEN:-}"
+      WHISPER_MODEL: "large-v3-turbo"   # ~1.6 GB download on first start
+      WHISPER_THREADS: "2"
+      WATCH_SECONDS: "300"
+    volumes:
+      - lyrics-models:/models
+      - lyrics-state:/data
+    cpus: "2"
+    mem_limit: 3g
+    networks:
+      - lyrics
+
 volumes:
   ytplayer-data:
     driver: local
+  lyrics-models:
+    driver: local
+  lyrics-state:
+    driver: local
 
 networks:
   dokploy-network:
     external: true
+  lyrics:
+    driver: bridge
diff --git a/frontend/app.js b/frontend/app.js
index 9a43b48..f20100f 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -269,7 +269,7 @@ const DEFAULT_SETTINGS = {
   autoBackupIntervalDays: 7,
   serviceVideo: false,      // show the video panel inside service mode (lyric videos)
 };
-let data = { playlists: [], history: [], queue: [], customVideos: [], pinnedPlaylists: [], settings: { ...DEFAULT_SETTINGS }, resumePositions: {}, rememberPos: {}, playCount: {}, abMarkers: {}, bookmarks: {}, lyricOffsets: {}, lastAutoBackup: 0, profile: null };
+let data = { playlists: [], history: [], queue: [], customVideos: [], pinnedPlaylists: [], settings: { ...DEFAULT_SETTINGS }, resumePositions: {}, rememberPos: {}, playCount: {}, abMarkers: {}, bookmarks: {}, lyricOffsets: {}, stats: null, lastAutoBackup: 0, profile: null };
 let view = { type: 'search' };          // 'search'|'history'|'playlist'|'settings'|'queue'|'saved'|'downloads'|'channel'
 let searchResults = [];
 // Distinguishes "never searched" (hide the list pane, show the landing) from
@@ -379,6 +379,7 @@ function profilePayload() {
     abMarkers:       data.abMarkers,
     bookmarks:       data.bookmarks || {},
     lyricOffsets:    data.lyricOffsets || {},
+    stats:           data.stats || null,
   };
 }
 
@@ -420,6 +421,7 @@ function applyProfileData(name, payload, updatedAt) {
   if (payload.abMarkers && typeof payload.abMarkers === 'object') data.abMarkers = payload.abMarkers;
   if (payload.bookmarks && typeof payload.bookmarks === 'object') data.bookmarks = payload.bookmarks;
   if (payload.lyricOffsets && typeof payload.lyricOffsets === 'object') data.lyricOffsets = payload.lyricOffsets;
+  if (payload.stats && typeof payload.stats === 'object') data.stats = payload.stats;
   if (payload.settings && typeof payload.settings === 'object') data.settings = { ...DEFAULT_SETTINGS, ...payload.settings };
   data.profile = { name, syncedAt: updatedAt || 0 };
   API.saveData(data).catch(() => {});
@@ -1632,6 +1634,8 @@ const Player = {
     addToHistory(current.meta);
     Notes.load(current.meta);
     Wave.load(current.meta);
+    Gestures.reset();
+    Party.afterLoad();
     Remote.changed();
     buildQualityMenu();
     els.playerPane.classList.remove('empty');
@@ -2296,6 +2300,40 @@ function updateNowPlayingActions() {
     btn.title = 'Save this video for offline playback';
   }
 }
+// ============================================================================
+// Shared: size each lyric row (.sl-line) to the largest font that fits ONE row
+// ============================================================================
+// Used by service-mode lyrics and the presenter view. Measured with a hidden
+// real .sl-line (same font rules) in two passes: the display font has an
+// optical-size axis, so glyphs get relatively WIDER as the size drops and a
+// single measurement at 100px over-fits on small screens. Sets --fit per row.
+function fitLyricLines(list, { maxShare = 0.17, maxPx = 160 } = {}) {
+  if (!list) return;
+  const rows = [...list.querySelectorAll('.sl-line')];
+  if (!rows.length || !list.clientWidth) return;
+  const width = list.clientWidth * 0.92 * 0.97; // 4% side padding + slack
+  const cap = Math.max(30, Math.min(list.clientHeight * maxShare, maxPx));
+  const minPx = 18;
+  const clamp = (px) => Math.max(minPx, Math.min(cap, px));
+  const probe = document.createElement('div');
+  probe.className = 'sl-line';
+  probe.style.cssText = 'position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;width:auto;padding:0;font-size:100px;transition:none';
+  list.appendChild(probe);
+  const widthAt = (px) => { probe.style.fontSize = px + 'px'; return probe.getBoundingClientRect().width; };
+  for (const el of rows) {
+    probe.textContent = el.textContent;
+    const w100 = widthAt(100);
+    let px = cap;
+    if (w100) {
+      const est = clamp((width / w100) * 100);
+      const wEst = widthAt(est);
+      px = Math.floor(clamp(wEst ? est * (width / wEst) : est));
+    }
+    el.style.setProperty('--fit', px + 'px');
+  }
+  probe.remove();
+}
+
 // ============================================================================
 // Lyrics · chapters · bookmarks
 // ============================================================================
@@ -2376,6 +2414,10 @@ const Notes = (() => {
     const id = meta.id;
     const seq = ++st.loadSeq;
     st.videoId = id;
+    $('tsResults').innerHTML = '';
+    $('tsInfo').textContent = '';
+    delete $('tsSource').dataset.touched;
+    $('tsSource').value = 'lyrics';
     st.activeIdx = -1;
     st.lastDur = 0;
     const cached = readCache()[id];
@@ -2488,8 +2530,8 @@ const Notes = (() => {
       <div class="marker-row" data-kind="${kind}" data-i="${i}">
         <button class="mk-time" type="button" data-act="jump" title="Jump here">${LC.fmtClock(m.t)}</button>
         <div class="mk-body">
-          <div class="mk-title">${escapeHtml(m.title)}</div>
-          ${m.note ? `<div class="mk-note">${escapeHtml(m.note)}</div>` : ''}
+          <div class="mk-title">${m.kind === 'note' ? '📝 ' : ''}${escapeHtml(m.title)}</div>
+          ${m.note ? `<div class="mk-note${m.kind === 'note' ? ' long' : ''}">${escapeHtml(m.note)}</div>` : ''}
         </div>
         <button class="mk-btn" type="button" data-act="jump" title="Play from here">▶</button>
         <button class="mk-btn" type="button" data-act="edit" title="Edit">✎</button>
@@ -2822,14 +2864,18 @@ const Notes = (() => {
   }
 
   // ---- chapters & bookmarks ----
-  function markerForm(title, init) {
+  // longNote: a multi-line personal note (study notes) instead of the short
+  // one-line note shared chapters are limited to.
+  function markerForm(title, init, { longNote = false, titleOptional = false } = {}) {
     return new Promise((resolve) => {
       const body = document.createElement('div');
       body.className = 'marker-form';
       body.innerHTML = `
         <label>Time <input type="text" class="mf-time" inputmode="decimal" placeholder="m:ss" /></label>
-        <label>Title <input type="text" class="mf-title" maxlength="100" placeholder="e.g. Key change → D" /></label>
-        <label>Note <input type="text" class="mf-note" maxlength="200" placeholder="optional" /></label>`;
+        <label>${titleOptional ? 'Label (optional)' : 'Title'} <input type="text" class="mf-title" maxlength="100" placeholder="${titleOptional ? 'e.g. Key idea' : 'e.g. Key change → D'}" /></label>
+        <label>Note ${longNote
+          ? '<textarea class="mf-note" maxlength="2000" rows="6" placeholder="Write your note… (Ctrl/⌘+Enter saves)"></textarea>'
+          : '<input type="text" class="mf-note" maxlength="200" placeholder="optional" />'}</label>`;
       const $t = body.querySelector('.mf-time');
       const $ti = body.querySelector('.mf-title');
       const $n = body.querySelector('.mf-note');
@@ -2840,16 +2886,24 @@ const Notes = (() => {
         const t = LC.parseStamp($t.value);
         const ttl = $ti.value.trim();
         if (t === null) { toast('Time must look like 1:23'); return; }
-        if (!ttl) { toast('Give it a title'); return; }
+        const note = $n.value.trim();
+        const label = ttl || (titleOptional ? (note.split('\n')[0].slice(0, 60) || 'Note') : '');
+        if (!label) { toast('Give it a title'); return; }
         closeModal();
-        resolve({ t, title: ttl, note: $n.value.trim() });
+        resolve({ t, title: label, note });
       };
-      body.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); submit(); } });
+      body.addEventListener('keydown', (e) => {
+        e.stopPropagation();
+        if (e.key !== 'Enter') return;
+        if (e.target.tagName === 'TEXTAREA' && !(e.ctrlKey || e.metaKey)) return; // newline
+        e.preventDefault();
+        submit();
+      });
       showModal(title, body, [
         { label: 'Cancel', onClick: () => { closeModal(); resolve(null); } },
         { label: 'Save', primary: true, onClick: submit },
       ]);
-      setTimeout(() => $ti.focus(), 50);
+      setTimeout(() => (longNote && titleOptional ? $n : $ti).focus(), 50);
     });
   }
 
@@ -2867,7 +2921,8 @@ const Notes = (() => {
     if (!item) return;
     if (kind === 'chapter' && !requireProfile()) return;
     const baseRev = st.chapters ? st.chapters.rev : 0;
-    const v = await markerForm(kind === 'chapter' ? '✎ Edit chapter' : '✎ Edit bookmark', item);
+    const v = await markerForm(kind === 'chapter' ? '✎ Edit chapter' : '✎ Edit note / bookmark', item,
+      kind === 'chapter' ? {} : { longNote: true, titleOptional: true });
     if (!v) return;
     const next = list.slice();
     next[i] = v;
@@ -2889,6 +2944,10 @@ const Notes = (() => {
   function setBookmarks(list) {
     if (!st.videoId) return;
     if (!data.bookmarks) data.bookmarks = {};
+    // Each entry carries its video's title/channel so the 📝 Notes page can
+    // list notes for videos that are no longer in history.
+    const meta = current && current.meta && current.meta.id === st.videoId ? current.meta : null;
+    if (meta) list = list.map((b) => ({ ...b, vt: b.vt || meta.title || '', vc: b.vc || meta.channel || '' }));
     const sorted = list.slice().sort((a, b) => a.t - b.t);
     if (sorted.length) data.bookmarks[st.videoId] = sorted;
     else delete data.bookmarks[st.videoId];
@@ -2905,6 +2964,14 @@ const Notes = (() => {
     toast(`📌 Bookmarked ${LC.fmtClock(t)} — rename it under Chapters & bookmarks`);
   }
 
+  async function addNote() {
+    if (!st.videoId) { toast('Notes need a YouTube video'); return; }
+    const v = await markerForm('📝 Note at this moment', { t: round2(now()), title: '', note: '' }, { longNote: true, titleOptional: true });
+    if (!v) return;
+    setBookmarks([...bookmarks(), { ...v, kind: 'note' }]);
+    toast(`📝 Note saved at ${LC.fmtClock(v.t)}`);
+  }
+
   function openExport() {
     const chs = chapters();
     const bms = bookmarks();
@@ -2947,44 +3014,7 @@ const Notes = (() => {
   const serviceAuto = () => data.settings.serviceLyricsAutoscroll !== false;
   const sungLines = () => lines().map((l, i) => ({ ...l, i })).filter((l) => l.kind === 'line');
 
-  // Measured with a hidden row styled exactly like .sl-line, so the size
-  // comes from the same font resolution the screen uses (a canvas can
-  // measure with a fallback face while the web font's 800 weight loads).
-  function fitSizes(list, texts) {
-    const width = list.clientWidth * 0.92 * 0.97; // 4% side padding + slack
-    const maxPx = Math.max(30, Math.min(list.clientHeight * 0.17, 160));
-    const minPx = 18;
-    // A real .sl-line (same font rules) forced onto one unpadded row.
-    const probe = document.createElement('div');
-    probe.className = 'sl-line';
-    probe.style.cssText = 'position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;width:auto;padding:0;font-size:100px;transition:none';
-    list.appendChild(probe);
-    const clamp = (px) => Math.max(minPx, Math.min(maxPx, px));
-    const widthAt = (px) => { probe.style.fontSize = px + 'px'; return probe.getBoundingClientRect().width; };
-    // Two passes: the display font has an optical-size axis, so glyphs get
-    // relatively WIDER as the size drops — a single measurement at 100px
-    // overestimates what fits at phone sizes.
-    const out = texts.map((text) => {
-      probe.textContent = text;
-      const w100 = widthAt(100);
-      if (!w100) return maxPx;
-      const est = clamp((width / w100) * 100);
-      const wEst = widthAt(est);
-      return Math.floor(clamp(wEst ? est * (width / wEst) : est));
-    });
-    probe.remove();
-    return out;
-  }
-
-  // Re-measure every row in place (no rebuild, so the scroll position and
-  // the highlight are untouched).
-  function applyFits() {
-    const list = $('serviceLyricsList');
-    const rows = [...list.querySelectorAll('.sl-line')];
-    if (!rows.length || !list.clientWidth) return;
-    const fits = fitSizes(list, rows.map((el) => el.textContent));
-    rows.forEach((el, k) => el.style.setProperty('--fit', fits[k] + 'px'));
-  }
+  function applyFits() { fitLyricLines($('serviceLyricsList')); }
 
   function renderServiceButtons() {
     const on = !!data.settings.serviceLyrics;
@@ -3085,12 +3115,75 @@ const Notes = (() => {
     document.fonts.addEventListener('loadingdone', () => { if (serviceOn()) applyFits(); });
   }
 
+  // ---- transcript search ----
+  // Lyrics (shared) or the video's YouTube captions, fetched on demand and
+  // kept per video. Empty query = the whole transcript, to read along.
+  const ts = { captions: new Map(), loading: null };
+  async function captionLines(id) {
+    if (ts.captions.has(id)) return ts.captions.get(id);
+    const res = await fetch(`/api/notes/${encodeURIComponent(id)}/captions`);
+    const j = await res.json().catch(() => null);
+    if (!j || !j.ok) throw new Error((j && j.error) || `HTTP ${res.status}`);
+    const v = { lines: j.lines.map((l) => ({ ...l, kind: 'line' })), label: `YouTube ${j.auto ? 'auto-captions' : 'subtitles'} (${j.lang})` };
+    ts.captions.set(id, v);
+    if (ts.captions.size > 30) ts.captions.delete(ts.captions.keys().next().value);
+    return v;
+  }
+  async function runSearch() {
+    if (!st.videoId) return;
+    const q = $('tsQuery').value.trim().toLowerCase();
+    const srcSel = $('tsSource');
+    const haveLyrics = !!(st.lyrics && st.lyrics.data && st.lyrics.data.lines.length);
+    if (!haveLyrics && srcSel.value === 'lyrics' && !srcSel.dataset.touched) srcSel.value = 'captions';
+    const info = $('tsInfo');
+    const out = $('tsResults');
+    let src, label, shift = 0;
+    if (srcSel.value === 'lyrics') {
+      src = haveLyrics ? st.lyrics.data.lines.filter((l) => l.kind === 'line') : [];
+      label = haveLyrics ? 'Shared lyrics' : 'No lyrics for this video — switch to YouTube transcript';
+      shift = offset();
+    } else {
+      const id = st.videoId;
+      info.textContent = 'Loading the YouTube transcript…';
+      try {
+        const r = await captionLines(id);
+        if (id !== st.videoId) return;
+        src = r.lines;
+        label = r.label;
+      } catch (err) {
+        info.textContent = `⚠ ${err.message}`;
+        out.innerHTML = '';
+        return;
+      }
+    }
+    const esc = (t) => escapeHtml(t);
+    const hits = src.filter((l) => l.t !== null && l.t !== undefined && (!q || l.text.toLowerCase().includes(q))).slice(0, 400);
+    info.textContent = `${label} · ${q ? `${hits.length} match${hits.length === 1 ? '' : 'es'}` : `${hits.length} lines`}`;
+    const mark = (text) => {
+      if (!q) return esc(text);
+      const i = text.toLowerCase().indexOf(q);
+      return i < 0 ? esc(text) : `${esc(text.slice(0, i))}<mark>${esc(text.slice(i, i + q.length))}</mark>${esc(text.slice(i + q.length))}`;
+    };
+    out.innerHTML = hits.map((l) => `<button class="ts-hit" type="button" data-t="${l.t + shift}"><span class="ts-time">${LC.fmtClock(l.t + shift)}</span><span>${mark(l.text)}</span></button>`).join('')
+      || `<div class="notes-empty small">${q ? 'No matches.' : 'Nothing to show.'}</div>`;
+  }
+  let tsTimer = null;
+  $('tsQuery').addEventListener('input', () => { clearTimeout(tsTimer); tsTimer = setTimeout(runSearch, 150); });
+  $('tsQuery').addEventListener('keydown', (e) => e.stopPropagation());
+  $('tsSource').addEventListener('change', (e) => { e.target.dataset.touched = '1'; runSearch(); });
+  $('tsResults').addEventListener('click', (e) => {
+    const b = e.target.closest('.ts-hit');
+    if (b) { Player.seek(Math.max(0, Number(b.dataset.t))); if (Player.master.paused) Player.play(); }
+  });
+
   // ---- tabs + events ----
   function showTab(tab) {
     st.tab = tab;
     panel.querySelectorAll('.notes-tab').forEach((b) => b.classList.toggle('active', b.dataset.tab === tab));
     $('lyricsPane').classList.toggle('hidden', tab !== 'lyrics');
     $('markersPane').classList.toggle('hidden', tab !== 'markers');
+    $('searchPane').classList.toggle('hidden', tab !== 'search');
+    if (tab === 'search') runSearch();
     if (tab === 'lyrics') tick(now(), true);
   }
 
@@ -3146,6 +3239,7 @@ const Notes = (() => {
   });
   $('addChapterBtn').addEventListener('click', addChapter);
   $('addBookmarkBtn').addEventListener('click', addBookmark);
+  $('addNoteBtn').addEventListener('click', addNote);
   $('exportMarkersBtn').addEventListener('click', openExport);
   $('markersPane').addEventListener('click', (e) => {
     const btn = e.target.closest('.marker-row [data-act]');
@@ -3159,7 +3253,7 @@ const Notes = (() => {
     else if (btn.dataset.act === 'del') deleteMarker(kind, i);
   });
 
-  return { load, tick, addBookmark, handleSyncKey, serviceRefresh };
+  return { load, tick, addBookmark, addNote, handleSyncKey, serviceRefresh };
 })();
 
 // ============================================================================
@@ -3265,6 +3359,10 @@ const Remote = (() => {
       service: isServiceModeOpen(),
       sleep: sleepTimerRemaining || 0,
       hostName: hostCfg().name,
+      // For the presenter screen: this screen's personal lyric offset for the
+      // song and the playback speed (to extrapolate between updates).
+      off: meta && data.lyricOffsets ? Number(data.lyricOffsets[meta.id]) || 0 : 0,
+      rate: (M && M.playbackRate) || 1,
     };
   }
 
@@ -3426,7 +3524,16 @@ const Remote = (() => {
             <div class="rh-sub">On the phone: open this app → 📱 Remote → <b>Use this phone as a remote</b>, or scan the QR code.</div>
           </div>
         </div>
-        <div class="rh-label">Connected phones</div>
+        <div class="rh-label">Presenter / projector screen</div>
+        <div class="rh-present">
+          <img class="rh-qr rh-qr-sm" alt="QR code for the presenter screen" src="/api/remote/qr/${host.code}?kind=present" />
+          <div>
+            <div class="rh-sub">Lyrics-only display that follows this screen. On the projector's computer or TV browser open
+              <code>${escapeHtml(location.origin)}/?present=${host.code}</code> (same code), or scan the QR.</div>
+            <button class="np-btn" type="button" data-act="present">🖥 Open presenter window here</button>
+          </div>
+        </div>
+        <div class="rh-label">Connected phones & screens</div>
         ${host.remotes.length ? host.remotes.map((r) => `
           <div class="rh-remote"><span>📱 ${escapeHtml(r.name)}</span><button class="mk-btn" type="button" data-kick="${escapeHtml(r.rid)}" title="Disconnect">✕</button></div>`).join('')
           : '<div class="rh-sub">None yet.</div>'}`;
@@ -3459,6 +3566,10 @@ const Remote = (() => {
       else if (act.dataset.act === 'stop') stopHosting();
       else if (act.dataset.act === 'code') hostSend({ type: 'new-code' });
       else if (act.dataset.act === 'unpair') unpairAll();
+      else if (act.dataset.act === 'present') {
+        // A second window on this computer (drag it to the projector display).
+        window.open(`/?present=${host.code}`, 'ytp-presenter', 'popup,width=1280,height=720');
+      }
     });
     body.querySelector('.rh-name').addEventListener('change', (e) => {
       const cfg = hostCfg();
@@ -3851,6 +3962,8 @@ const Transition = (() => {
     if (!(queueSource.startsWith('playlist:') || queueSource === 'queue')) return false;
     if (data.settings.loopOne && !playFullMode) return false;
     if (abA !== null || abB !== null) return false;
+    if (sleepAtTrackEnd) return false; // the sleep timer stops after this song
+    if (Party.guestActive()) return false; // party guests follow the host
     if (Player.master.paused || Player._handoff) return false;
     return nextIndex() >= 0;
   }
@@ -3976,6 +4089,9 @@ const Transition = (() => {
   // Called on every timeupdate (~4×/s) from updateProgress.
   function tick(cur, dur) {
     if (st.phase === 'handoff') return;
+    // The final timeupdate arrives with the element already paused by its own
+    // end — that is the crossfade finishing, not the user pausing.
+    if (st.phase === 'fading' && (Player.master.ended || (dur && cur >= dur - 0.25))) { handoff(); return; }
     if (!eligible() || !dur || !isFinite(dur)) {
       if (st.phase === 'fading' || st.phase === 'gap-armed') cancel();
       else if (st.forId && (!current || st.forId !== current.meta.id)) cancel();
@@ -4019,7 +4135,15 @@ const Transition = (() => {
 
   // Read-only snapshot for diagnostics and tests.
   const state = () => ({ phase: st.phase, ready: st.ready, nextId: st.nextId, bridgeT: bridge.currentTime, bridgePaused: bridge.paused, bridgeVol: bridge.volume });
-  return { tick, cancel, cycle, renderButton, busy: () => st.phase === 'handoff' || st.phase === 'gap-armed', mode, label, state };
+  // The song ended: during a crossfade the fade timer can lose the race with
+  // 'ended' (the fade is timed to finish exactly then) — hand off now instead
+  // of letting a normal advance restart the next song from 0 and kill the
+  // bridge. Returns true when a transition owns this end.
+  function onEnded() {
+    if (st.phase === 'fading') { handoff(); return true; }
+    return st.phase === 'handoff' || st.phase === 'gap-armed';
+  }
+  return { tick, cancel, cycle, renderButton, busy: () => st.phase === 'handoff' || st.phase === 'gap-armed', onEnded, mode, label, state };
 })();
 
 // ============================================================================
@@ -4160,6 +4284,1441 @@ const Wave = (() => {
   return { load, draw, refresh };
 })();
 
+// ============================================================================
+// Listening stats — tracker (data.stats, see frontend/stats-core.js)
+// ============================================================================
+// Counts seconds actually heard (media-time deltas while playing, so seeks and
+// pauses don't count) and one play per load once 30 s have been heard; a
+// looped song that restarts counts again. Written every 60 s, on each counted
+// play, and when the page is hidden, so profile sync isn't spammed.
+const StatsTrack = (() => {
+  const st = { id: null, meta: null, lastT: null, heard: 0, counted: false, pending: 0 };
+  function commit(play) {
+    if (!st.meta || (!play && st.pending < 1)) return;
+    data.stats = StatsCore.record(data.stats, st.meta, st.pending, play);
+    st.pending = 0;
+    persist();
+  }
+  function tick(cur) {
+    const meta = current && current.meta;
+    if (!meta || !meta.id || !window.StatsCore) return;
+    if (meta.id !== st.id) {
+      commit(false);
+      st.id = meta.id;
+      st.meta = { id: meta.id, title: meta.title, channel: meta.channel };
+      st.lastT = null; st.heard = 0; st.counted = false;
+    }
+    if (Player.master.paused) { st.lastT = null; return; }
+    if (st.lastT !== null) {
+      const d = cur - st.lastT;
+      if (d > 0 && d < 3) {
+        const real = d / (Player.master.playbackRate || 1);
+        st.pending += real;
+        st.heard += real;
+      } else if (d < -5 && cur < 5) {
+        st.heard = 0; st.counted = false; // looped back to the start
+      }
+    }
+    st.lastT = cur;
+    if (!st.counted && st.heard >= 30) { st.counted = true; commit(true); }
+    else if (st.pending >= 60) commit(false);
+  }
+  const flush = () => commit(false);
+  document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') flush(); });
+  window.addEventListener('pagehide', flush);
+  return { tick, flush };
+})();
+
+// ============================================================================
+// Stats view
+// ============================================================================
+function renderStats() {
+  StatsTrack.flush();
+  els.listTitle.textContent = 'Stats';
+  els.listActions.innerHTML = '';
+  els.status.classList.add('hidden');
+  const c = els.cards;
+  const S = StatsCore.summarize(data.stats);
+  if (!S.totalPlays && S.totalSec < 60) {
+    c.innerHTML = `
+      <div class="empty-state stats-empty">
+        <div class="empty-icon">📊</div>
+        <h3 class="empty-title">No listening stats yet</h3>
+        <p class="empty-desc">Stats start counting now — a song counts as played after 30 seconds. They sync with your online profile.</p>
+      </div>`;
+    return;
+  }
+  const hrs = (sec) => StatsCore.fmtHours(sec);
+  const delta = S.thisMonthSec - S.lastMonthSec;
+  const deltaTxt = S.lastMonthSec || S.thisMonthSec
+    ? `${delta >= 0 ? '▲ +' : '▼ −'}${(Math.abs(delta) / 3600).toFixed(1)}h vs last month`
+    : '';
+  const maxArtist = Math.max(1, ...S.topArtists.map((a) => a.plays));
+  const spark = (vals) => {
+    const w = 96, h = 26, max = Math.max(1, ...vals);
+    const pts = vals.map((v, i) => `${(i / (vals.length - 1)) * w},${h - 3 - (v / max) * (h - 6)}`).join(' ');
+    return `<svg class="st-spark" viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" aria-hidden="true"><polyline points="${pts}" /></svg>`;
+  };
+  const heatMax = Math.max(1, ...S.heat.flat().map((x) => x.minutes));
+  const level = (m) => (m <= 0 ? 0 : Math.min(4, 1 + Math.floor((m / heatMax) * 3.999)));
+  const fmtDay = (k) => new Date(`${k}T12:00:00`).toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
+  // Month label over the first week column of each month.
+  const months = S.heat.map((col, w) => {
+    const d = new Date(`${col[0].date}T12:00:00`);
+    const prev = w ? new Date(`${S.heat[w - 1][0].date}T12:00:00`) : null;
+    return !prev || prev.getMonth() !== d.getMonth() ? d.toLocaleDateString(undefined, { month: 'short' }) : '';
+  });
+  const playlistsWith = data.playlists.length;
+
+  c.innerHTML = `
+    <div class="stats">
+      <div class="st-tiles">
+        <div class="st-tile">
+          <div class="st-label">⏱ Listening this month</div>
+          <div class="st-big">${hrs(S.thisMonthSec)}</div>
+          <div class="st-sub">${escapeHtml(deltaTxt)}${deltaTxt ? ' · ' : ''}${hrs(S.totalSec)} all time</div>
+        </div>
+        <div class="st-tile">
+          <div class="st-label">▶ Track plays</div>
+          <div class="st-big">${S.totalPlays}</div>
+          <div class="st-sub">${S.songsPlayed} song${S.songsPlayed === 1 ? '' : 's'} · ${playlistsWith} playlist${playlistsWith === 1 ? '' : 's'}</div>
+        </div>
+        <div class="st-tile">
+          <div class="st-label">🔥 Practice streak</div>
+          <div class="st-big">${S.streak.current}-day</div>
+          <div class="st-sub">${S.streak.current ? 'Streak active' : 'Listen 5 min today to start one'} · best ${S.streak.best} day${S.streak.best === 1 ? '' : 's'}</div>
+        </div>
+      </div>
+
+      <div class="st-grid">
+        <section class="st-panel">
+          <div class="st-panel-head"><span>🎤 Top artists</span><small>plays this month</small></div>
+          ${S.topArtists.length ? S.topArtists.map((a) => `
+            <div class="st-bar-row" data-tip="${escapeHtml(a.name)} — ${a.plays} play${a.plays === 1 ? '' : 's'} this month">
+              <span class="st-bar-name">${escapeHtml(a.name)}</span>
+              <span class="st-bar-track"><span class="st-bar" style="width:${Math.max(3, (a.plays / maxArtist) * 100)}%"></span></span>
+              <span class="st-bar-val">${a.plays}</span>
+            </div>`).join('') : '<div class="st-none">No plays this month yet.</div>'}
+        </section>
+        <section class="st-panel">
+          <div class="st-panel-head"><span>🎵 Top songs</span><small>last 30 days</small></div>
+          ${S.topSongs.length ? S.topSongs.map((t, i) => `
+            <div class="st-song" data-tip="${escapeHtml(t.title)} — ${t.plays} play${t.plays === 1 ? '' : 's'} in 30 days" data-id="${escapeHtml(t.id)}">
+              <span class="st-rank">${String(i + 1).padStart(2, '0')}</span>
+              <span class="st-song-text"><b>${escapeHtml(t.title)}</b><small>${escapeHtml(t.channel)}</small></span>
+              ${spark(t.spark)}
+              <span class="st-bar-val">${t.plays}</span>
+            </div>`).join('') : '<div class="st-none">No plays in the last 30 days.</div>'}
+        </section>
+      </div>
+
+      <section class="st-panel">
+        <div class="st-panel-head"><span>🗓 Listening habits</span><small>last 16 weeks${S.peak ? ` · peak day: ${S.peak.day}s (avg ${S.peak.avgHours.toFixed(1)} h)` : ''}</small></div>
+        <div class="st-heat-wrap">
+          <div class="st-heat-days"><span></span><span>Mon</span><span></span><span>Wed</span><span></span><span>Fri</span><span></span><span>Sun</span></div>
+          <div class="st-heat-main">
+            <div class="st-heat-months">${months.map((m) => `<span>${m}</span>`).join('')}</div>
+            <div class="st-heat">${S.heat.map((col) => col.map((x) => x.future
+              ? '<span class="st-cell future"></span>'
+              : `<span class="st-cell l${level(x.minutes)}" data-tip="${fmtDay(x.date)} · ${x.minutes} min"></span>`).join('')).join('')}</div>
+          </div>
+        </div>
+        <div class="st-legend"><span>Less</span>${[0, 1, 2, 3, 4].map((l) => `<span class="st-cell l${l}"></span>`).join('')}<span>More</span></div>
+        <details class="st-table"><summary>Show as table</summary>
+          <table><thead><tr><th>Day</th><th>Minutes</th></tr></thead><tbody>
+          ${S.heat.flat().filter((x) => !x.future && x.minutes > 0).reverse().map((x) => `<tr><td>${fmtDay(x.date)}</td><td>${x.minutes}</td></tr>`).join('') || '<tr><td colspan="2">No listening in this window.</td></tr>'}
+          </tbody></table>
+        </details>
+      </section>
+      <div id="statsTip" class="st-tip hidden"></div>
+    </div>`;
+
+  // One tooltip for every mark (bars, songs, heat cells).
+  const root = c.querySelector('.stats');
+  const tip = $('statsTip');
+  root.addEventListener('pointermove', (e) => {
+    const el = e.target.closest('[data-tip]');
+    if (!el) { tip.classList.add('hidden'); return; }
+    tip.textContent = el.dataset.tip;
+    tip.classList.remove('hidden');
+    const r = root.getBoundingClientRect();
+    const half = tip.offsetWidth / 2 + 4; // keep the whole tip inside the panel
+    tip.style.left = `${Math.min(r.width - half, Math.max(half, e.clientX - r.left))}px`;
+    tip.style.top = `${e.clientY - r.top - 14}px`;
+  });
+  root.addEventListener('pointerleave', () => tip.classList.add('hidden'));
+  root.querySelectorAll('.st-song').forEach((row) => row.addEventListener('click', () => {
+    const v = data.history.find((x) => x.id === row.dataset.id) || { id: row.dataset.id, title: row.querySelector('b').textContent };
+    Player.loadVideo(v);
+  }));
+}
+
+// ============================================================================
+// Presenter / projector view (/?present=<code>)
+// ============================================================================
+// A lyrics-only display for a projector or TV that follows the screen actually
+// playing. It pairs through the phone-remote relay (server/remote.js) exactly
+// like a phone, but only listens: the host's state messages carry the song id,
+// position, speed and lyric offset, and this view extrapolates the position
+// between updates. Lyrics come from the shared /api/notes store.
+const Presenter = (() => {
+  const noop = { boot() {}, active: () => false };
+  const view = $('presenterView');
+  if (!WEB || !view || typeof WebSocket === 'undefined') return noop;
+  const KEY = 'ytpPresenterPair';
+  const load = () => { try { return JSON.parse(localStorage.getItem(KEY) || 'null'); } catch { return null; } };
+  const save = (v) => { try { if (v) localStorage.setItem(KEY, JSON.stringify(v)); else localStorage.removeItem(KEY); } catch { /* blocked */ } };
+  const wsUrl = (q) => `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/remote?${new URLSearchParams(q)}`;
+  const list = $('pvList');
+  const st = { ws: null, state: null, stateAt: 0, hostName: '', vid: null, all: [], docOff: 0, idx: -2, retry: null, notes: new Map(), wake: null, idleTimer: null, seq: 0 };
+
+  function setStatus(t) { $('pvStatus').textContent = t; }
+
+  function show() {
+    view.classList.remove('hidden');
+    document.body.classList.add('presenter-open');
+    // The app underneath may have focused its search box; keys belong here now.
+    try { if (document.activeElement && !view.contains(document.activeElement)) document.activeElement.blur(); } catch { /* fine */ }
+    try { if (Player.master && !Player.master.paused) Player.pause(); } catch { /* nothing loaded */ }
+    keepAwake();
+    bumpIdle();
+  }
+
+  async function keepAwake() {
+    try { if ('wakeLock' in navigator && !st.wake) { st.wake = await navigator.wakeLock.request('screen'); st.wake.addEventListener('release', () => { st.wake = null; }); } } catch { /* not allowed */ }
+  }
+
+  function showPairForm(msg = '') {
+    $('pvPair').classList.remove('hidden');
+    $('pvMsg').textContent = msg;
+    setStatus('Not paired');
+  }
+
+  async function pair(code) {
+    code = String(code || '').replace(/\D/g, '');
+    if (code.length !== 6) { showPairForm('Enter the 6-digit code from the playing screen.'); return; }
+    $('pvMsg').textContent = 'Connecting…';
+    try {
+      const res = await fetch('/api/remote/pair', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code, name: '🖥 Presenter' }) });
+      const j = await res.json().catch(() => null);
+      if (!j || !j.ok) { showPairForm('⚠ ' + ((j && j.error) || `HTTP ${res.status}`)); return; }
+      save({ roomId: j.roomId, remoteId: j.remoteId, token: j.token, hostName: j.hostName });
+      $('pvPair').classList.add('hidden');
+      connect();
+    } catch {
+      showPairForm('⚠ Network error — try again');
+    }
+  }
+
+  function connect() {
+    const p = load();
+    if (!p) { showPairForm(); return; }
+    clearTimeout(st.retry);
+    try { if (st.ws) st.ws.close(); } catch { /* gone */ }
+    setStatus('Connecting…');
+    const ws = new WebSocket(wsUrl({ role: 'remote', room: p.roomId, rid: p.remoteId, token: p.token, name: '🖥 Presenter' }));
+    st.ws = ws;
+    ws.onmessage = (e) => {
+      let m; try { m = JSON.parse(e.data); } catch { return; }
+      if (m.type === 'hello') { st.hostName = m.hostName || 'screen'; if (m.state) onState(m.state); else setStatus(`Following ${st.hostName}`); }
+      else if (m.type === 'state') onState(m.state);
+      else if (m.type === 'host-offline') setStatus(`${st.hostName || 'The screen'} is offline — waiting…`);
+    };
+    ws.onclose = (e) => {
+      if (st.ws !== ws) return;
+      st.ws = null;
+      if (e.code === 4001) { save(null); showPairForm('This presenter was unpaired — enter a new code.'); return; }
+      setStatus(e.code === 4004 ? 'Screen offline — retrying…' : 'Reconnecting…');
+      st.retry = setTimeout(connect, 3000);
+    };
+  }
+
+  function onState(s) {
+    st.state = s;
+    st.stateAt = Date.now();
+    const v = s && s.v;
+    setStatus(v ? `● Following ${st.hostName} · ${v.title}` : `● Following ${st.hostName} · nothing playing`);
+    const id = v && v.id;
+    if (id !== st.vid) loadSong(id, v);
+  }
+
+  async function loadSong(id, v) {
+    const seq = ++st.seq;
+    st.vid = id;
+    st.all = [];
+    st.docOff = 0;
+    render(v);
+    if (!id || !/^[A-Za-z0-9_-]{11}$/.test(id)) return;
+    let notes = st.notes.get(id);
+    if (!notes) {
+      try {
+        const j = await (await fetch(`/api/notes/${encodeURIComponent(id)}`)).json();
+        notes = j && j.ok ? j : null;
+        if (notes) { st.notes.set(id, notes); if (st.notes.size > 50) st.notes.delete(st.notes.keys().next().value); }
+      } catch { notes = null; }
+    }
+    if (seq !== st.seq) return;
+    const doc = notes && notes.lyrics && notes.lyrics.data;
+    st.all = (doc && doc.lines) || [];
+    st.docOff = (doc && Number(doc.offset)) || 0;
+    render(v);
+  }
+
+  function render(v) {
+    const sung = st.all.map((l, i) => ({ ...l, i })).filter((l) => l.kind === 'line');
+    const title = $('pvTitle');
+    if (!sung.length) {
+      list.innerHTML = '';
+      title.innerHTML = v ? `${escapeHtml(v.title)}${v.channel ? `<small>${escapeHtml(v.channel)}</small>` : ''}` : '';
+      title.classList.toggle('hidden', !v);
+      return;
+    }
+    title.classList.add('hidden');
+    const pad = Math.round(list.clientHeight / 2);
+    list.style.paddingTop = pad + 'px';
+    list.style.paddingBottom = pad + 'px';
+    list.innerHTML = sung.map((l) => `<div class="sl-line" data-i="${l.i}">${escapeHtml(l.text)}</div>`).join('');
+    refit();
+    st.idx = -2;
+    tick(true);
+    setTimeout(refit, 900); // once more after fonts/layout settle
+  }
+
+  function refit() {
+    fitLyricLines(list, { maxShare: 0.2, maxPx: 240 });
+  }
+
+  function liveTime() {
+    const s = st.state;
+    if (!s) return 0;
+    return s.paused ? s.cur : s.cur + ((Date.now() - st.stateAt) / 1000) * (s.rate || 1);
+  }
+
+  function tick(force = false) {
+    if (view.classList.contains('hidden') || !st.all.length || !st.state) return;
+    const idx = LyricsCore.activeIndex(st.all, liveTime(), st.docOff + (Number(st.state.off) || 0));
+    if (idx === st.idx && !force) return;
+    st.idx = idx;
+    const rows = [...list.querySelectorAll('.sl-line')];
+    const pos = rows.findIndex((el) => Number(el.dataset.i) === idx);
+    rows.forEach((el, k) => {
+      const d = pos < 0 ? 99 : Math.abs(k - pos);
+      el.classList.toggle('active', d === 0);
+      el.classList.toggle('near', d === 1);
+      el.classList.toggle('past', pos >= 0 && k < pos);
+    });
+    const target = pos >= 0 ? rows[pos] : rows[0];
+    if (target) {
+      const go = () => list.scrollTo({ top: Math.max(0, target.offsetTop - list.clientHeight / 2 + target.offsetHeight / 2), behavior: 'smooth' });
+      go();
+      setTimeout(go, 380);
+    }
+  }
+
+  function toggleFullscreen() {
+    if (document.fullscreenElement) document.exitFullscreen().catch(() => {});
+    else view.requestFullscreen?.().catch(() => {});
+  }
+
+  // The status bar and cursor hide after 3 s without mouse movement.
+  function bumpIdle() {
+    view.classList.remove('idle');
+    clearTimeout(st.idleTimer);
+    st.idleTimer = setTimeout(() => view.classList.add('idle'), 3000);
+  }
+
+  function boot() {
+    let param = null;
+    try { param = new URLSearchParams(location.search).get('present'); } catch { /* no URL */ }
+    if (param === null) return;
+    try {
+      const u = new URL(location.href);
+      u.searchParams.delete('present');
+      history.replaceState(null, '', u.pathname + (u.search || '') + u.hash);
+    } catch { /* keep */ }
+    show();
+    const code = String(param).replace(/\D/g, '');
+    if (code.length === 6) pair(code);
+    else if (load()) connect();
+    else showPairForm();
+    setInterval(() => tick(), 200);
+    window.addEventListener('resize', () => { refit(); tick(true); });
+    if (document.fonts) {
+      document.fonts.ready.then(refit);
+      document.fonts.addEventListener('loadingdone', refit);
+    }
+    view.addEventListener('mousemove', bumpIdle);
+    view.addEventListener('dblclick', toggleFullscreen);
+    $('pvFull').addEventListener('click', toggleFullscreen);
+    $('pvPairBtn').addEventListener('click', () => pair($('pvCode').value));
+    $('pvCode').addEventListener('keydown', (e) => { e.stopPropagation(); if (e.key === 'Enter') pair($('pvCode').value); });
+    document.addEventListener('keydown', (e) => {
+      if (view.classList.contains('hidden') || (e.target.closest && e.target.closest('#pvPair'))) return;
+      if (e.key === 'f' || e.key === 'F') { e.preventDefault(); e.stopImmediatePropagation(); toggleFullscreen(); }
+      else if (e.key === 'b' || e.key === 'B') { e.preventDefault(); e.stopImmediatePropagation(); $('pvBlank').classList.toggle('hidden'); }
+    }, true);
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') { keepAwake(); if (!st.ws && load()) connect(); }
+    });
+  }
+
+  return { boot, active: () => !view.classList.contains('hidden') };
+})();
+
+// Open a video and jump to `t` seconds once it can play (deep links, notes).
+async function playVideoAt(v, t = 0) {
+  if (current && current.meta && current.meta.id === v.id && Player.master) {
+    Player.seek(t);
+    if (Player.master.paused) Player.play();
+    return;
+  }
+  await Player.loadVideo(v, { resume: false });
+  if (t > 0 && Player.master) {
+    const seekOnce = () => { Player.master.removeEventListener('canplay', seekOnce); Player.seek(t); toast(`Jumped to ${LyricsCore.fmtClock(t)}`); };
+    if (Player.master.readyState >= 3) seekOnce();
+    else Player.master.addEventListener('canplay', seekOnce);
+  }
+}
+
+// ============================================================================
+// 📝 Notes view — every video's personal notes & bookmarks
+// ============================================================================
+function renderNotesView() {
+  els.listTitle.textContent = 'Notes';
+  els.status.classList.add('hidden');
+  const groups = Object.entries(data.bookmarks || {})
+    .filter(([, list]) => Array.isArray(list) && list.length)
+    .map(([id, list]) => {
+      const h = data.history.find((x) => x.id === id);
+      const first = list.find((b) => b.vt) || {};
+      return { id, title: first.vt || (h && h.title) || id, channel: first.vc || (h && h.channel) || '', list };
+    });
+  // Most recently played first (history order), the rest after.
+  const order = new Map(data.history.map((v, i) => [v.id, i]));
+  groups.sort((a, b) => (order.has(a.id) ? order.get(a.id) : 1e9) - (order.has(b.id) ? order.get(b.id) : 1e9));
+  els.listActions.innerHTML = groups.length ? '<button class="np-btn" id="notesExportBtn" type="button">⤓ Export Markdown</button>' : '';
+  const c = els.cards;
+  if (!groups.length) {
+    c.innerHTML = `
+      <div class="empty-state">
+        <div class="empty-icon">📝</div>
+        <h3 class="empty-title">No notes yet</h3>
+        <p class="empty-desc">While a video plays, open <b>Chapters &amp; bookmarks</b> → <b>📝 Note</b> (or press N) to write a note tied to that exact moment. They sync with your online profile.</p>
+      </div>`;
+    return;
+  }
+  const total = groups.reduce((n, g) => n + g.list.length, 0);
+  c.innerHTML = `
+    <div class="notes-view">
+      <input class="nv-filter" type="search" placeholder="Filter ${total} notes & bookmarks…" />
+      ${groups.map((g) => `
+        <section class="nv-group" data-id="${escapeHtml(g.id)}">
+          <div class="nv-head"><b>${escapeHtml(g.title)}</b><small>${escapeHtml(g.channel)} · ${g.list.length}</small></div>
+          ${g.list.map((b) => `
+            <button class="nv-item" type="button" data-t="${b.t}" data-q="${escapeHtml(`${b.title} ${b.note || ''} ${g.title}`.toLowerCase())}">
+              <span class="nv-time">${LyricsCore.fmtClock(b.t)}</span>
+              <span class="nv-body"><span class="nv-title">${b.kind === 'note' ? '📝 ' : '📌 '}${escapeHtml(b.title)}</span>${b.note ? `<span class="nv-note">${escapeHtml(b.note)}</span>` : ''}</span>
+            </button>`).join('')}
+        </section>`).join('')}
+    </div>`;
+  c.querySelector('.nv-filter').addEventListener('input', (e) => {
+    const q = e.target.value.trim().toLowerCase();
+    c.querySelectorAll('.nv-group').forEach((g) => {
+      let any = false;
+      g.querySelectorAll('.nv-item').forEach((it) => { const hit = !q || it.dataset.q.includes(q); it.classList.toggle('hidden', !hit); any = any || hit; });
+      g.classList.toggle('hidden', !any);
+    });
+  });
+  c.querySelector('.nv-filter').addEventListener('keydown', (e) => e.stopPropagation());
+  c.querySelectorAll('.nv-item').forEach((it) => it.addEventListener('click', () => {
+    const g = groups.find((x) => x.id === it.closest('.nv-group').dataset.id);
+    playVideoAt({ id: g.id, title: g.title, channel: g.channel }, Number(it.dataset.t));
+  }));
+  const ex = $('notesExportBtn');
+  if (ex) ex.addEventListener('click', () => {
+    const md = ['# YT Player notes', `_Exported ${new Date().toLocaleString()}_`, ''];
+    for (const g of groups) {
+      md.push(`## ${g.title}`, `${g.channel ? g.channel + ' · ' : ''}https://youtu.be/${g.id}`, '');
+      for (const b of g.list) {
+        md.push(`- **[${LyricsCore.fmtClock(b.t)}](${location.origin}/?v=${g.id}&t=${Math.floor(b.t)})** ${b.title}`);
+        if (b.note && b.note !== b.title) md.push(...b.note.split('\n').map((l) => `  ${l}`));
+      }
+      md.push('');
+    }
+    const blob = new Blob([md.join('\n')], { type: 'text/markdown' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `ytplayer-notes-${new Date().toISOString().slice(0, 10)}.md`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 2000);
+  });
+}
+
+// ============================================================================
+// Timestamp sharing — deep links (/?v=ID&t=SEC) and GIFs of a moment
+// ============================================================================
+const Share = (() => {
+  const appLink = (id, t) => `${location.origin}/?v=${encodeURIComponent(id)}${t >= 1 ? `&t=${Math.floor(t)}` : ''}`;
+  const ytLink = (id, t) => `https://youtu.be/${encodeURIComponent(id)}${t >= 1 ? `?t=${Math.floor(t)}` : ''}`;
+
+  async function copy(text, label) {
+    try { await navigator.clipboard.writeText(text); toast(`${label} copied ✓`); }
+    catch { toast('Copy blocked — long-press the link to copy it'); }
+  }
+
+  function open() {
+    const meta = current && current.meta;
+    if (!meta || !meta.id || meta.custom) { toast('Play a YouTube video first'); return; }
+    const t0 = Math.floor(Player.master.currentTime || 0);
+    const body = document.createElement('div');
+    body.className = 'share-moment';
+    body.innerHTML = `
+      <label class="sm-row">Moment <input class="sm-time" inputmode="decimal" value="${LyricsCore.fmtClock(t0)}" /></label>
+      <div class="sm-links">
+        <div class="sm-link"><span>This app</span><code class="sm-app"></code><button class="np-btn" type="button" data-act="app">Copy</button></div>
+        <div class="sm-link"><span>YouTube</span><code class="sm-yt"></code><button class="np-btn" type="button" data-act="yt">Copy</button></div>
+      </div>
+      <div class="sm-gif">
+        <div class="sm-gif-controls">
+          <label>GIF length <select class="sm-len"><option value="2">2 s</option><option value="3" selected>3 s</option><option value="5">5 s</option></select></label>
+          <button class="np-btn" type="button" data-act="gif">🎞 Make GIF</button>
+        </div>
+        <div class="sm-gif-out"></div>
+      </div>
+      <div class="sm-gif sm-bite">
+        <div class="sm-gif-controls">
+          <label>🔔 Soundbite <input class="sm-b-start" inputmode="decimal" /></label>
+          <label>to <input class="sm-b-end" inputmode="decimal" /></label>
+          <select class="sm-b-fmt"><option value="mp3">MP3</option><option value="m4r">iPhone ringtone (.m4r)</option></select>
+          <button class="np-btn" type="button" data-act="bite">Make</button>
+        </div>
+        <div class="sm-bite-out"></div>
+      </div>`;
+    const timeIn = body.querySelector('.sm-time');
+    const cur = () => { const v = LyricsCore.parseStamp(timeIn.value); return v === null ? t0 : v; };
+    const refresh = () => {
+      body.querySelector('.sm-app').textContent = appLink(meta.id, cur());
+      body.querySelector('.sm-yt').textContent = ytLink(meta.id, cur());
+    };
+    timeIn.addEventListener('input', refresh);
+    timeIn.addEventListener('keydown', (e) => e.stopPropagation());
+    refresh();
+    // Soundbite range: the A-B loop when one is set, else the next 20 s.
+    const bStart = abA !== null ? abA : t0;
+    const bEnd = abB !== null && abB > bStart ? abB : bStart + 20;
+    body.querySelector('.sm-b-start').value = LyricsCore.fmtClock(bStart);
+    body.querySelector('.sm-b-end').value = LyricsCore.fmtClock(bEnd);
+    body.querySelectorAll('.sm-bite input').forEach((i) => i.addEventListener('keydown', (e) => e.stopPropagation()));
+    let biteBlob = null;
+    let gifBlob = null;
+    body.addEventListener('click', async (e) => {
+      const act = e.target.closest('[data-act]');
+      if (!act) return;
+      if (act.dataset.act === 'app') copy(appLink(meta.id, cur()), 'App link');
+      else if (act.dataset.act === 'yt') copy(ytLink(meta.id, cur()), 'YouTube link');
+      else if (act.dataset.act === 'gif') {
+        const out = body.querySelector('.sm-gif-out');
+        out.innerHTML = '<div class="sm-busy">Making the GIF…</div>';
+        act.disabled = true;
+        try {
+          const d = body.querySelector('.sm-len').value;
+          const res = await fetch(`/api/media/${encodeURIComponent(meta.id)}/gif?t=${cur()}&d=${d}&w=480`);
+          if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.error || `HTTP ${res.status}`); }
+          gifBlob = await res.blob();
+          const url = URL.createObjectURL(gifBlob);
+          const name = `${(meta.title || meta.id).replace(/[^\w\- ]+/g, '').trim().slice(0, 40) || meta.id}-${Math.floor(cur())}s.gif`;
+          out.innerHTML = `<img class="sm-preview" alt="GIF preview" src="${url}" />
+            <div class="sm-gif-actions"><a class="np-btn" href="${url}" download="${escapeHtml(name)}">⤓ Download</a>
+            ${navigator.canShare && navigator.canShare({ files: [new File([gifBlob], name, { type: 'image/gif' })] }) ? '<button class="np-btn" type="button" data-act="sharegif">↗ Share GIF</button>' : ''}</div>`;
+          out.dataset.name = name;
+        } catch (err) {
+          out.innerHTML = `<div class="sm-err">⚠ ${escapeHtml(err.message)}</div>`;
+        } finally {
+          act.disabled = false;
+        }
+      } else if (act.dataset.act === 'bite') {
+        const out = body.querySelector('.sm-bite-out');
+        const a = LyricsCore.parseStamp(body.querySelector('.sm-b-start').value);
+        const b = LyricsCore.parseStamp(body.querySelector('.sm-b-end').value);
+        const fmt = body.querySelector('.sm-b-fmt').value;
+        const max = fmt === 'm4r' ? 40 : 60;
+        if (a === null || b === null || b <= a) { out.innerHTML = '<div class="sm-err">⚠ Times must look like 1:23, end after start</div>'; return; }
+        if (b - a > max) { out.innerHTML = `<div class="sm-err">⚠ Max ${max} s for ${fmt === 'm4r' ? 'an iPhone ringtone' : 'a soundbite'}</div>`; return; }
+        out.innerHTML = '<div class="sm-busy">Cutting the soundbite…</div>';
+        act.disabled = true;
+        try {
+          const res = await fetch(`/api/media/${encodeURIComponent(meta.id)}/clip?start=${a}&end=${b}&fmt=${fmt}`);
+          if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.error || `HTTP ${res.status}`); }
+          biteBlob = await res.blob();
+          const url = URL.createObjectURL(biteBlob);
+          const name = `${(meta.title || meta.id).replace(/[^\w\- ]+/g, '').trim().slice(0, 40) || meta.id}-${Math.floor(a)}s.${fmt}`;
+          out.dataset.name = name;
+          out.dataset.type = fmt === 'mp3' ? 'audio/mpeg' : 'audio/mp4';
+          out.innerHTML = `<audio controls src="${url}" class="sm-audio"></audio>
+            <div class="sm-gif-actions"><a class="np-btn" href="${url}" download="${escapeHtml(name)}">⤓ Download</a>
+            ${navigator.canShare && navigator.canShare({ files: [new File([biteBlob], name, { type: out.dataset.type })] }) ? '<button class="np-btn" type="button" data-act="sharebite">↗ Share</button>' : ''}</div>
+            ${fmt === 'm4r' ? '<p class="sp-note">iPhone: share it to GarageBand (or drag into Finder with the phone connected) to set it as a ringtone.</p>' : ''}`;
+        } catch (err) {
+          out.innerHTML = `<div class="sm-err">⚠ ${escapeHtml(err.message)}</div>`;
+        } finally {
+          act.disabled = false;
+        }
+      } else if (act.dataset.act === 'sharebite' && biteBlob) {
+        const o = body.querySelector('.sm-bite-out');
+        try { await navigator.share({ files: [new File([biteBlob], o.dataset.name, { type: o.dataset.type })], title: meta.title }); } catch { /* dismissed */ }
+      } else if (act.dataset.act === 'sharegif' && gifBlob) {
+        const name = body.querySelector('.sm-gif-out').dataset.name;
+        try { await navigator.share({ files: [new File([gifBlob], name, { type: 'image/gif' })], title: meta.title }); } catch { /* dismissed */ }
+      }
+    });
+    const actions = [{ label: 'Done', onClick: closeModal }];
+    if (navigator.share) {
+      actions.push({ label: '↗ Share link', primary: true, onClick: async () => {
+        try { await navigator.share({ title: meta.title, text: `${meta.title} @ ${LyricsCore.fmtClock(cur())}`, url: appLink(meta.id, cur()) }); } catch { /* dismissed */ }
+      } });
+    } else {
+      actions.push({ label: 'Copy app link', primary: true, onClick: () => copy(appLink(meta.id, cur()), 'App link') });
+    }
+    showModal('🔗 Share this moment', body, actions);
+  }
+
+  // /?v=<id>&t=<sec> — open that video at that moment.
+  async function bootFromUrl() {
+    let id = '', t = 0;
+    try {
+      const q = new URLSearchParams(location.search);
+      id = (q.get('v') || '').trim();
+      t = Math.max(0, parseFloat(q.get('t')) || 0);
+    } catch { return; }
+    if (!/^[A-Za-z0-9_-]{11}$/.test(id)) return;
+    try {
+      const u = new URL(location.href);
+      u.searchParams.delete('v');
+      u.searchParams.delete('t');
+      history.replaceState(null, '', u.pathname + u.search + u.hash);
+    } catch { /* keep */ }
+    await playVideoAt(data.history.find((x) => x.id === id) || { id, title: '' }, t);
+  }
+
+  return { open, bootFromUrl };
+})();
+
+// ============================================================================
+// Picture-in-picture
+// ============================================================================
+// PiP floats the <video>. In dual mode the sound is on a separate <audio>, so
+// the PiP window's own play/pause is mirrored onto the whole player.
+const PiP = (() => {
+  const V = els.video;
+  const supported = () => (document.pictureInPictureEnabled && !V.disablePictureInPicture) || typeof V.webkitSetPresentationMode === 'function';
+  const inPip = () => document.pictureInPictureElement === V || V.webkitPresentationMode === 'picture-in-picture';
+  function render() {
+    const btn = $('pipBtn');
+    if (!btn) return;
+    btn.classList.toggle('hidden', !supported());
+    btn.classList.toggle('active', inPip());
+  }
+  async function toggle() {
+    if (!supported()) { toast('This browser has no picture-in-picture'); return; }
+    if (!current) { toast('Play a video first'); return; }
+    if (Player.mode === 'audio') { toast('Picture-in-picture needs video — turn off audio-only mode'); return; }
+    try {
+      if (inPip()) {
+        if (document.pictureInPictureElement) await document.exitPictureInPicture();
+        else V.webkitSetPresentationMode('inline');
+      } else if (V.requestPictureInPicture) {
+        await V.requestPictureInPicture();
+      } else {
+        V.webkitSetPresentationMode('picture-in-picture');
+      }
+    } catch (e) {
+      toast('⚠ Picture-in-picture: ' + e.message);
+    }
+    render();
+  }
+  V.addEventListener('pause', () => {
+    if (inPip() && Player.mode === 'dual' && Player._wantsPlaying && !V.ended) Player.pause();
+  });
+  V.addEventListener('play', () => {
+    if (inPip() && Player.mode === 'dual' && !Player._wantsPlaying) Player.play();
+  });
+  ['enterpictureinpicture', 'leavepictureinpicture', 'webkitpresentationmodechanged'].forEach((ev) => V.addEventListener(ev, render));
+  try { navigator.mediaSession && navigator.mediaSession.setActionHandler('enterpictureinpicture', toggle); } catch { /* unsupported action */ }
+  return { toggle, render };
+})();
+
+// ============================================================================
+// Equalizer — 5-band graphic EQ (Web Audio)
+// ============================================================================
+// Media elements are routed through BiquadFilters only once a non-flat curve
+// is chosen (createMediaElementSource can't be undone; afterwards "Flat"
+// simply zeroes the gains). Disabled on iOS: Safari suspends Web Audio when
+// the screen locks, which would silence background playback.
+const EQ_BANDS = [
+  { f: 60, type: 'lowshelf', label: '60' },
+  { f: 250, type: 'peaking', label: '250' },
+  { f: 1000, type: 'peaking', label: '1k' },
+  { f: 4000, type: 'peaking', label: '4k' },
+  { f: 12000, type: 'highshelf', label: '12k' },
+];
+const EQ_PRESETS = {
+  flat: { name: 'Flat', g: [0, 0, 0, 0, 0] },
+  bass: { name: 'Bass boost', g: [7, 4, 0, 0, 0] },
+  vocal: { name: 'Vocal', g: [-2, -1, 3, 4, 1] },
+  classical: { name: 'Classical', g: [4, 2, -1, 1, 3] },
+  treble: { name: 'Treble boost', g: [0, 0, 0, 3, 6] },
+};
+const EQ = (() => {
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+  const AC = window.AudioContext || window.webkitAudioContext;
+  const st = { ctx: null, filters: null, sources: new Map() };
+  const available = () => !!AC && !isIOS;
+  const gains = () => {
+    const g = data.settings.eq && Array.isArray(data.settings.eq.g) ? data.settings.eq.g : EQ_PRESETS.flat.g;
+    return EQ_BANDS.map((_, i) => Math.max(-12, Math.min(12, Number(g[i]) || 0)));
+  };
+  const isFlat = () => gains().every((v) => v === 0);
+
+  function build() {
+    if (st.ctx) return true;
+    try {
+      st.ctx = new AC();
+      st.filters = EQ_BANDS.map((b) => {
+        const f = st.ctx.createBiquadFilter();
+        f.type = b.type;
+        f.frequency.value = b.f;
+        f.Q.value = 1.0;
+        return f;
+      });
+      for (let i = 0; i < st.filters.length - 1; i++) st.filters[i].connect(st.filters[i + 1]);
+      st.filters[st.filters.length - 1].connect(st.ctx.destination);
+      return true;
+    } catch { st.ctx = null; return false; }
+  }
+
+  function attach(el) {
+    if (!el || st.sources.has(el)) return;
+    try {
+      const src = st.ctx.createMediaElementSource(el);
+      src.connect(st.filters[0]);
+      st.sources.set(el, src);
+    } catch { /* already connected elsewhere */ }
+  }
+
+  // Apply the stored curve; wires the graph up the first time it's non-flat.
+  function apply() {
+    if (!available()) return;
+    if (!st.ctx && isFlat()) return;
+    if (!build()) return;
+    attach(els.video);
+    attach(els.audio);
+    const g = gains();
+    st.filters.forEach((f, i) => { f.gain.value = g[i]; });
+    if (st.ctx.state === 'suspended') st.ctx.resume().catch(() => {});
+    renderButton();
+  }
+
+  function renderButton() {
+    const btn = $('eqBtn');
+    if (!btn) return;
+    btn.classList.toggle('active', !isFlat());
+    const p = data.settings.eq && data.settings.eq.preset;
+    btn.title = `Equalizer: ${p && EQ_PRESETS[p] ? EQ_PRESETS[p].name : isFlat() ? 'Flat' : 'Custom'} (E)`;
+  }
+
+  function set(preset, g) {
+    data.settings.eq = { preset, g };
+    persist();
+    apply();
+    renderButton();
+  }
+
+  function open() {
+    const body = document.createElement('div');
+    body.className = 'eq-panel';
+    if (!available()) {
+      body.innerHTML = `<p class="modal-text">${isIOS
+        ? 'The equalizer isn’t available on iPhone and iPad: iOS stops Web Audio when the screen locks, which would cut background playback.'
+        : 'This browser has no Web Audio support.'}</p>`;
+      showModal('🎚 Equalizer', body, [{ label: 'Close', primary: true, onClick: closeModal }]);
+      return;
+    }
+    const draw = () => {
+      const g = gains();
+      const cur = data.settings.eq && data.settings.eq.preset;
+      body.innerHTML = `
+        <div class="eq-presets">${Object.entries(EQ_PRESETS).map(([k, p]) => `<button type="button" class="sp-chip${cur === k || (!cur && k === 'flat' && isFlat()) ? ' on' : ''}" data-preset="${k}">${p.name}</button>`).join('')}</div>
+        <div class="eq-bands">${EQ_BANDS.map((b, i) => `
+          <label class="eq-band">
+            <span class="eq-val">${g[i] > 0 ? '+' : ''}${g[i]} dB</span>
+            <input type="range" min="-12" max="12" step="1" value="${g[i]}" data-band="${i}" aria-label="${b.label} Hz" />
+            <span class="eq-f">${b.label}</span>
+          </label>`).join('')}</div>
+        <p class="sp-note">Changes apply instantly. Hz bands from bass (left) to treble (right).</p>`;
+    };
+    draw();
+    body.addEventListener('click', (e) => {
+      const b = e.target.closest('[data-preset]');
+      if (!b) return;
+      set(b.dataset.preset, EQ_PRESETS[b.dataset.preset].g.slice());
+      draw();
+      toast(`🎚 Equalizer: ${EQ_PRESETS[b.dataset.preset].name}`);
+    });
+    body.addEventListener('input', (e) => {
+      const r = e.target.closest('[data-band]');
+      if (!r) return;
+      const g = gains();
+      g[Number(r.dataset.band)] = Number(r.value);
+      set('custom', g);
+      r.parentElement.querySelector('.eq-val').textContent = `${g[r.dataset.band] > 0 ? '+' : ''}${g[r.dataset.band]} dB`;
+      body.querySelectorAll('[data-preset]').forEach((x) => x.classList.remove('on'));
+    });
+    showModal('🎚 Equalizer', body, [{ label: 'Done', primary: true, onClick: closeModal }]);
+  }
+
+  // A context created before any user gesture starts suspended.
+  document.addEventListener('pointerdown', () => { if (st.ctx && st.ctx.state === 'suspended') st.ctx.resume().catch(() => {}); }, true);
+  return { open, apply, renderButton, available, state: () => ({ wired: !!st.ctx, ctx: st.ctx && st.ctx.state, gains: st.filters ? st.filters.map((f) => f.gain.value) : null }) };
+})();
+
+// ============================================================================
+// Touch gestures on the video
+// ============================================================================
+// Double-tap: left third −10 s, right third +10 s, centre play/pause (or reset
+// zoom when zoomed). Vertical swipe (fullscreen only, so inline the page still
+// scrolls): right half = volume, left half = brightness (a CSS filter — web
+// pages can't set the screen's backlight). Pinch = zoom 1–3× with two-finger pan.
+const Gestures = (() => {
+  const stage = document.querySelector('.player-stage');
+  const hud = $('gestureHud');
+  if (!stage || !hud) return { reset() {} };
+  const V = els.video;
+  const pts = new Map();
+  const st = { lastTap: 0, lastX: 0, tapTimer: null, swipe: null, pinch: null, zoom: 1, panX: 0, panY: 0, bright: 1, hudTimer: null, moved: false };
+  const isFs = () => !!(document.fullscreenElement || document.webkitFullscreenElement) || document.body.classList.contains('landscape-fs');
+
+  function showHud(html) {
+    hud.innerHTML = html;
+    hud.classList.remove('hidden');
+    clearTimeout(st.hudTimer);
+    st.hudTimer = setTimeout(() => hud.classList.add('hidden'), 700);
+  }
+  const bar = (label, frac) => `<div class="gh-label">${label}</div><div class="gh-bar"><span style="width:${Math.round(frac * 100)}%"></span></div>`;
+
+  function applyView() {
+    V.style.transform = st.zoom > 1.001 ? `translate(${st.panX}px, ${st.panY}px) scale(${st.zoom})` : '';
+    V.style.filter = Math.abs(st.bright - 1) > 0.01 ? `brightness(${st.bright})` : '';
+  }
+  function reset() { st.zoom = 1; st.panX = st.panY = 0; applyView(); }
+
+  function seekBy(d, side) {
+    if (!current) return;
+    Player.seek(Math.max(0, Math.min((Player.master.duration || 1e9) - 0.5, Player.master.currentTime + d)));
+    showHud(`<div class="gh-seek ${side}">${d < 0 ? '⟲' : '⟳'} ${Math.abs(d)} s</div>`);
+  }
+
+  function onTap(e) {
+    const r = stage.getBoundingClientRect();
+    const x = (e.clientX - r.left) / r.width;
+    const now = performance.now();
+    if (now - st.lastTap < 320 && Math.abs(e.clientX - st.lastX) < 60) {
+      st.lastTap = 0;
+      if (x < 1 / 3) seekBy(-10, 'left');
+      else if (x > 2 / 3) seekBy(10, 'right');
+      else if (st.zoom > 1.001) { reset(); showHud('<div class="gh-label">Zoom reset</div>'); }
+      else if (current) { Player.toggle(); updatePlayBtn(); showHud(`<div class="gh-seek">${Player.master.paused ? '⏸' : '▶'}</div>`); }
+      return;
+    }
+    st.lastTap = now;
+    st.lastX = e.clientX;
+  }
+
+  stage.addEventListener('pointerdown', (e) => {
+    if (e.pointerType !== 'touch') return;
+    pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    st.moved = false;
+    if (pts.size === 2) {
+      const [a, b] = [...pts.values()];
+      st.pinch = { d: Math.hypot(a.x - b.x, a.y - b.y), zoom: st.zoom, cx: (a.x + b.x) / 2, cy: (a.y + b.y) / 2, panX: st.panX, panY: st.panY };
+      st.swipe = null;
+    } else if (pts.size === 1 && isFs()) {
+      const r = stage.getBoundingClientRect();
+      const right = (e.clientX - r.left) / r.width > 0.5;
+      st.swipe = { y0: e.clientY, right, v0: data.settings.volume ?? 1, b0: st.bright, h: r.height, active: false };
+    }
+  });
+
+  stage.addEventListener('pointermove', (e) => {
+    if (!pts.has(e.pointerId)) return;
+    const p = pts.get(e.pointerId);
+    if (Math.hypot(e.clientX - p.x, e.clientY - p.y) > 10) st.moved = true;
+    pts.set(e.pointerId, { ...p, cx: e.clientX, cy: e.clientY });
+    if (st.pinch && pts.size >= 2) {
+      const [a, b] = [...pts.values()].map((q) => ({ x: q.cx ?? q.x, y: q.cy ?? q.y }));
+      const d = Math.hypot(a.x - b.x, a.y - b.y);
+      st.zoom = Math.max(1, Math.min(3, st.pinch.zoom * (d / (st.pinch.d || 1))));
+      const cx = (a.x + b.x) / 2, cy = (a.y + b.y) / 2;
+      const r = stage.getBoundingClientRect();
+      const maxX = (r.width * (st.zoom - 1)) / 2, maxY = (r.height * (st.zoom - 1)) / 2;
+      st.panX = Math.max(-maxX, Math.min(maxX, st.pinch.panX + (cx - st.pinch.cx)));
+      st.panY = Math.max(-maxY, Math.min(maxY, st.pinch.panY + (cy - st.pinch.cy)));
+      applyView();
+      showHud(`<div class="gh-label">Zoom ${st.zoom.toFixed(1)}×</div>`);
+      e.preventDefault();
+      return;
+    }
+    const sw = st.swipe;
+    if (!sw) return;
+    const dy = sw.y0 - e.clientY;
+    if (!sw.active && Math.abs(dy) < 16) return;
+    sw.active = true;
+    const delta = dy / (sw.h * 0.8);
+    if (sw.right) {
+      const v = Math.max(0, Math.min(1, sw.v0 + delta));
+      data.settings.volume = Math.round(v * 100) / 100;
+      els.volume.value = String(data.settings.volume);
+      Player.applyVolume();
+      els.muteBtn.textContent = data.settings.volume === 0 ? '🔇' : '🔊';
+      showHud(bar(`🔊 Volume ${Math.round(v * 100)}%`, v));
+    } else {
+      st.bright = Math.max(0.3, Math.min(1.6, sw.b0 + delta));
+      applyView();
+      showHud(bar(`☀ Brightness ${Math.round(st.bright * 100)}%`, (st.bright - 0.3) / 1.3));
+    }
+    e.preventDefault();
+  }, { passive: false });
+
+  const end = (e) => {
+    if (!pts.has(e.pointerId)) return;
+    const wasPinch = !!st.pinch;
+    pts.delete(e.pointerId);
+    if (pts.size < 2) st.pinch = null;
+    if (st.swipe && st.swipe.active && pts.size === 0) persist();
+    if (pts.size === 0) st.swipe = null;
+    if (!wasPinch && !st.moved && e.type === 'pointerup') onTap(e);
+    if (st.zoom < 1.05) reset();
+  };
+  stage.addEventListener('pointerup', end);
+  stage.addEventListener('pointercancel', end);
+  return { reset, state: () => ({ zoom: st.zoom, bright: st.bright }) };
+})();
+
+// ============================================================================
+// Open in an external player (VLC, MX Player, …)
+// ============================================================================
+// Hands over the server-cached mp4 (/api/media/<id>, a public, Range-capable
+// URL with audio+video in one file — the in-app split streams are useless to
+// other players). Android: intent: links; iOS: VLC's x-callback scheme;
+// desktop: vlc:// or an .m3u playlist file.
+const External = (() => {
+  const isAndroid = /Android/i.test(navigator.userAgent);
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+  const streamUrl = (id) => `${location.origin}/api/media/${encodeURIComponent(id)}`;
+  async function cached(id) {
+    try { const j = await (await fetch(`/api/media/${encodeURIComponent(id)}/status`)).json(); return j && j.status === 'ready'; } catch { return false; }
+  }
+  const intent = (url, title, pkg) => `intent:${url}#Intent;action=android.intent.action.VIEW;type=video/*;${pkg ? `package=${pkg};` : ''}S.title=${encodeURIComponent(title || '')};end`;
+  function m3u(items) {
+    return ['#EXTM3U', ...items.flatMap((v) => [`#EXTINF:${Math.round(v.duration || -1)},${(v.title || v.id).replace(/[\r\n]/g, ' ')}`, streamUrl(v.id)])].join('\n') + '\n';
+  }
+  function download(name, text) {
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(new Blob([text], { type: 'audio/x-mpegurl' }));
+    a.download = name;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 2000);
+  }
+
+  async function open() {
+    const meta = current && current.meta;
+    if (!meta || !meta.id || meta.custom) { toast('Play a YouTube video first'); return; }
+    const body = document.createElement('div');
+    body.className = 'ext-panel';
+    body.innerHTML = '<div class="sm-busy">Checking the server copy…</div>';
+    showModal('📺 Open in another player', body, [{ label: 'Close', primary: true, onClick: closeModal }]);
+    const ok = await cached(meta.id);
+    if (!ok) {
+      body.innerHTML = `<p class="modal-text">The server hasn't finished caching this video yet, and other players need that single-file copy. Keep it playing for a minute (or tap ⬇ Save), then try again.</p>`;
+      return;
+    }
+    const url = streamUrl(meta.id);
+    const title = meta.title || meta.id;
+    const inList = queue.length > 1 && queueIndex >= 0;
+    body.innerHTML = `
+      <div class="sm-link"><span>Stream</span><code>${escapeHtml(url)}</code><button class="np-btn" type="button" data-act="copy">Copy</button></div>
+      <div class="ext-buttons">
+        ${isAndroid ? `
+          <a class="np-btn" href="${escapeHtml(intent(url, title, 'org.videolan.vlc'))}">▶ VLC</a>
+          <a class="np-btn" href="${escapeHtml(intent(url, title, 'com.mxtech.videoplayer.ad'))}">▶ MX Player</a>
+          <a class="np-btn" href="${escapeHtml(intent(url, title))}">▶ Open with…</a>`
+        : isIOS ? `
+          <a class="np-btn" href="vlc-x-callback://x-callback-url/stream?url=${encodeURIComponent(url)}">▶ VLC</a>
+          <a class="np-btn" href="infuse://x-callback-url/play?url=${encodeURIComponent(url)}">▶ Infuse</a>`
+        : `<a class="np-btn" href="vlc://${escapeHtml(url)}">▶ VLC</a>`}
+        <button class="np-btn" type="button" data-act="m3u">⤓ .m3u (this video)</button>
+        ${inList ? '<button class="np-btn" type="button" data-act="m3u-list">⤓ .m3u (whole list)</button>' : ''}
+      </div>
+      <p class="sp-note">${isAndroid ? 'VLC / MX Player must be installed; “Open with…” shows every video app.'
+        : isIOS ? 'Needs the VLC (or Infuse) app. The link streams from your server; nothing is downloaded first.'
+        : 'Desktop VLC may not register vlc:// links — the .m3u file opens in VLC, mpv, IINA or any media player.'}</p>`;
+    body.addEventListener('click', async (e) => {
+      const act = e.target.closest('[data-act]');
+      if (!act) return;
+      if (act.dataset.act === 'copy') {
+        try { await navigator.clipboard.writeText(url); toast('Stream URL copied ✓'); } catch { toast('Copy blocked'); }
+      } else if (act.dataset.act === 'm3u') {
+        download(`${title.replace(/[^\w\- ]+/g, '').trim().slice(0, 50) || meta.id}.m3u`, m3u([meta]));
+      } else if (act.dataset.act === 'm3u-list') {
+        act.disabled = true;
+        const items = queue.slice(Math.max(0, queueIndex));
+        const flags = await Promise.all(items.map((v) => (v.custom ? false : cached(v.id))));
+        const ready = items.filter((_, i) => flags[i]);
+        download('ytplayer-queue.m3u', m3u(ready));
+        toast(`Playlist with ${ready.length} of ${items.length} songs${ready.length < items.length ? ' (the rest aren’t cached on the server yet)' : ''}`, { duration: 5000 });
+        act.disabled = false;
+      }
+    });
+  }
+  return { open, m3u, intent };
+})();
+
+// ============================================================================
+// 🎉 Watch party — synced playback + chat + voice (server/party.js relays)
+// ============================================================================
+// The host's player drives; guests follow it. Guests extrapolate the host's
+// position from the server-stamped state (clock offset measured at join),
+// seek when > 1.5 s off and mirror play/pause. A guest acting on their own
+// player either sends a command (when the host allows control) or goes
+// "off sync" until they tap Re-sync. Voice chat is a WebRTC mesh between
+// members who switch it on (STUN only — works on most home/mobile networks).
+const Party = (() => {
+  const noop = { boot() {}, guestActive: () => false, intercept: () => false, afterLoad() {} };
+  if (!WEB || typeof WebSocket === 'undefined') return noop;
+  const PID_KEY = 'ytpPartyPid', HOST_KEY = 'ytpPartyHost', NAME_KEY = 'ytpPartyName';
+  const ls = {
+    get: (k) => { try { return localStorage.getItem(k); } catch { return null; } },
+    set: (k, v) => { try { if (v == null) localStorage.removeItem(k); else localStorage.setItem(k, v); } catch { /* blocked */ } },
+  };
+  let pid = ls.get(PID_KEY);
+  if (!pid) { pid = 'p' + Math.random().toString(36).slice(2, 12) + Date.now().toString(36); ls.set(PID_KEY, pid); }
+  const wsUrl = (q) => `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/party?${new URLSearchParams(q)}`;
+
+  const st = {
+    ws: null, role: null, code: '', secret: '', name: '', members: [], chat: [], state: null, offset: 0,
+    allowControl: false, quietUntil: 0, detached: false, retry: null, pushTimer: null, driftTimer: null, lastPush: '',
+    voice: { on: false, stream: null, muted: false, pcs: new Map(), audios: new Map() },
+    minimized: false,
+  };
+  const inParty = () => !!st.role;
+  const isHost = () => st.role === 'host';
+  const guestActive = () => st.role === 'guest' && !st.detached;
+  const send = (m) => { if (st.ws && st.ws.readyState === 1) st.ws.send(JSON.stringify(m)); };
+  const serverNow = () => Date.now() + st.offset;
+  const myName = () => st.name || (data.profile && data.profile.name) || ls.get(NAME_KEY) || '';
+
+  // ---------- connection ----------
+  function connect() {
+    clearTimeout(st.retry);
+    const q = { role: st.role, pid, name: myName() || 'Guest' };
+    if (st.code) q.code = st.code;
+    if (isHost() && st.secret) q.secret = st.secret;
+    const ws = new WebSocket(wsUrl(q));
+    st.ws = ws;
+    ws.onmessage = (e) => { let m; try { m = JSON.parse(e.data); } catch { return; } onMessage(m); };
+    ws.onclose = (e) => {
+      if (st.ws !== ws) return;
+      st.ws = null;
+      if (!inParty()) return;
+      if (e.code === 4010 || e.code === 4004 || e.code === 4003) {
+        const why = e.code === 4004 ? 'That party code doesn’t exist (or has ended).' : e.code === 4003 ? 'This party belongs to another host.' : 'The party ended.';
+        leave(false);
+        toast(`🎉 ${why}`, { duration: 5000 });
+        return;
+      }
+      setStatus('Reconnecting…');
+      st.retry = setTimeout(connect, 3000);
+    };
+    ws.onerror = () => { if (!st.code && isHost()) setStatus('Could not reach the server'); };
+  }
+
+  function onMessage(m) {
+    if (m.type === 'hello') {
+      st.code = m.code;
+      if (m.secret) { st.secret = m.secret; ls.set(HOST_KEY, JSON.stringify({ code: m.code, secret: m.secret })); }
+      st.offset = (m.now || Date.now()) - Date.now();
+      st.members = m.members || [];
+      st.chat = m.chat || [];
+      st.allowControl = !!m.allowControl;
+      setStatus(isHost() ? 'You’re hosting' : 'Synced with the host');
+      render();
+      if (isHost()) pushState(true);
+      else if (m.state) applyState(m.state);
+      if (st.voice.on) { send({ type: 'voice', on: true }); connectVoicePeers(); }
+    } else if (m.type === 'state') {
+      st.state = m.state;
+      if (st.role === 'guest') applyState(m.state);
+    } else if (m.type === 'members') {
+      st.members = m.members || [];
+      if (m.joined) sysMsg(`${m.joined} joined`);
+      if (m.left) sysMsg(`${m.left} left${m.hostAway ? ' — waiting for the host to come back' : ''}`);
+      render();
+      syncVoicePeers();
+    } else if (m.type === 'chat') {
+      st.chat.push(m.msg);
+      if (st.chat.length > 100) st.chat.shift();
+      renderChat();
+      if (m.msg.pid !== pid && (st.minimized || $('partyPanel').classList.contains('hidden'))) toast(`💬 ${m.msg.from}: ${m.msg.text}`);
+    } else if (m.type === 'settings') {
+      st.allowControl = !!m.allowControl;
+      render();
+      if (!isHost()) sysMsg(st.allowControl ? 'The host lets everyone control playback' : 'Only the host controls playback now');
+    } else if (m.type === 'cmd' && isHost()) {
+      runCommand(m);
+    } else if (m.type === 'rtc') {
+      onRtc(m.from, m.data);
+    } else if (m.type === 'ended') {
+      toast(`🎉 ${m.reason || 'The party ended'}`, { duration: 5000 });
+    }
+  }
+
+  // ---------- host: broadcast ----------
+  function stateNow() {
+    const meta = current && current.meta;
+    const M = Player.master;
+    return {
+      v: meta ? { id: meta.id, title: meta.title || '', channel: meta.channel || '', thumbnail: meta.thumbnail || '', duration: meta.duration || 0 } : null,
+      cur: M ? M.currentTime || 0 : 0,
+      paused: !M || M.paused,
+      rate: (M && M.playbackRate) || 1,
+    };
+  }
+  function pushState(force = false) {
+    if (!isHost() || !st.ws) return;
+    const s = stateNow();
+    const key = JSON.stringify({ ...s, cur: Math.round(s.cur) });
+    if (!force && key === st.lastPush) return;
+    st.lastPush = key;
+    send({ type: 'state', state: s });
+  }
+  function runCommand(m) {
+    switch (m.cmd) {
+      case 'toggle': Player.toggle(); break;
+      case 'play': Player.play(); break;
+      case 'pause': Player.pause(); break;
+      case 'seek': if (Number.isFinite(Number(m.t))) Player.seek(Math.max(0, Number(m.t))); break;
+      case 'next': playNext(); break;
+      case 'prev': playPrev(); break;
+      default: return;
+    }
+    toast(`🎉 ${m.from}: ${m.cmd === 'seek' ? `jumped to ${fmtTime(Number(m.t))}` : m.cmd}`);
+    setTimeout(() => pushState(true), 200);
+  }
+
+  // ---------- guest: follow ----------
+  const quiet = (ms = 1500) => { st.quietUntil = Date.now() + ms; };
+  function targetTime(s) {
+    if (!s) return 0;
+    return s.paused ? s.cur : s.cur + ((serverNow() - (s.ts || serverNow())) / 1000) * (s.rate || 1);
+  }
+  async function applyState(s) {
+    st.state = s;
+    if (st.role !== 'guest' || st.detached || !s || !s.v) { render(); return; }
+    const target = targetTime(s);
+    if (!current || !current.meta || current.meta.id !== s.v.id) {
+      quiet(6000);
+      await playVideoAt({ ...s.v }, target);
+      return;
+    }
+    const M = Player.master;
+    if (!M) return;
+    if ((M.playbackRate || 1) !== (s.rate || 1)) { els.speed.value = String(s.rate || 1); Player.applySpeed(); }
+    if (Math.abs((M.currentTime || 0) - target) > 1.5) { quiet(); Player.seek(target); }
+    if (s.paused && !M.paused) { quiet(); Player.pause(); updatePlayBtn(); }
+    else if (!s.paused && M.paused) { quiet(); Player.play(); updatePlayBtn(); }
+  }
+  // A guest's own actions: forwarded when allowed, else they go off sync.
+  function onLocalAction(kind) {
+    if (st.role !== 'guest' || st.detached || Date.now() < st.quietUntil) return;
+    if (st.allowControl) {
+      const M = Player.master;
+      if (kind === 'seeked') send({ type: 'cmd', cmd: 'seek', t: M.currentTime });
+      else send({ type: 'cmd', cmd: kind === 'pause' ? 'pause' : 'play' });
+      return;
+    }
+    st.detached = true;
+    setStatus('Off sync — you paused or skipped on your own');
+    render();
+  }
+  // playNext/playPrev guard: guests don't change songs themselves.
+  function intercept(cmd) {
+    if (st.role !== 'guest' || st.detached) return false;
+    if (st.allowControl) send({ type: 'cmd', cmd });
+    else toast('🎉 The host picks the songs in a watch party');
+    return true;
+  }
+  function resync() {
+    st.detached = false;
+    setStatus('Synced with the host');
+    render();
+    applyState(st.state);
+  }
+
+  // ---------- voice (WebRTC mesh) ----------
+  const ICE = [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun1.l.google.com:19302' }];
+  function peer(other) {
+    let pc = st.voice.pcs.get(other);
+    if (pc) return pc;
+    pc = new RTCPeerConnection({ iceServers: ICE });
+    st.voice.pcs.set(other, pc);
+    if (st.voice.stream) st.voice.stream.getTracks().forEach((t) => pc.addTrack(t, st.voice.stream));
+    pc.onicecandidate = (e) => { if (e.candidate) send({ type: 'rtc', to: other, data: { ice: e.candidate } }); };
+    pc.ontrack = (e) => {
+      let a = st.voice.audios.get(other);
+      if (!a) { a = new Audio(); a.autoplay = true; a.setAttribute('playsinline', ''); st.voice.audios.set(other, a); }
+      a.srcObject = e.streams[0];
+      a.play().catch(() => {});
+    };
+    pc.onconnectionstatechange = () => { if (['failed', 'closed'].includes(pc.connectionState)) dropPeer(other); render(); };
+    return pc;
+  }
+  function dropPeer(other) {
+    const pc = st.voice.pcs.get(other);
+    if (pc) { try { pc.close(); } catch { /* closed */ } st.voice.pcs.delete(other); }
+    const a = st.voice.audios.get(other);
+    if (a) { a.srcObject = null; st.voice.audios.delete(other); }
+  }
+  async function offerTo(other) {
+    const pc = peer(other);
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    send({ type: 'rtc', to: other, data: { sdp: pc.localDescription } });
+  }
+  async function onRtc(from, d) {
+    if (!st.voice.on || !d) return;
+    try {
+      if (d.sdp) {
+        const pc = peer(from);
+        await pc.setRemoteDescription(d.sdp);
+        if (d.sdp.type === 'offer') {
+          const ans = await pc.createAnswer();
+          await pc.setLocalDescription(ans);
+          send({ type: 'rtc', to: from, data: { sdp: pc.localDescription } });
+        }
+      } else if (d.ice) {
+        await peer(from).addIceCandidate(d.ice);
+      }
+    } catch { /* a glare/ICE hiccup — the next members update retries */ }
+  }
+  // The member with the smaller pid makes the offer, so each pair connects once.
+  function connectVoicePeers() {
+    if (!st.voice.on) return;
+    for (const m of st.members) if (m.voice && m.pid !== pid && !st.voice.pcs.has(m.pid) && pid < m.pid) offerTo(m.pid).catch(() => {});
+  }
+  function syncVoicePeers() {
+    const voiced = new Set(st.members.filter((m) => m.voice).map((m) => m.pid));
+    for (const other of [...st.voice.pcs.keys()]) if (!voiced.has(other)) dropPeer(other);
+    connectVoicePeers();
+  }
+  async function toggleVoice() {
+    if (st.voice.on) {
+      st.voice.on = false;
+      for (const other of [...st.voice.pcs.keys()]) dropPeer(other);
+      if (st.voice.stream) st.voice.stream.getTracks().forEach((t) => t.stop());
+      st.voice.stream = null;
+      send({ type: 'voice', on: false });
+      render();
+      return;
+    }
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia || typeof RTCPeerConnection === 'undefined') { toast('Voice chat isn’t supported in this browser'); return; }
+    try {
+      st.voice.stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } });
+    } catch (e) {
+      toast('🎤 Microphone blocked: ' + (e.message || e.name));
+      return;
+    }
+    st.voice.on = true;
+    st.voice.muted = false;
+    send({ type: 'voice', on: true });
+    toast('🎤 Voice on — headphones stop the music echoing into your mic', { duration: 5000 });
+    render();
+    connectVoicePeers();
+  }
+  function toggleMute() {
+    if (!st.voice.stream) return;
+    st.voice.muted = !st.voice.muted;
+    st.voice.stream.getAudioTracks().forEach((t) => { t.enabled = !st.voice.muted; });
+    render();
+  }
+
+  // ---------- lifecycle ----------
+  function start() {
+    st.role = 'host';
+    st.code = ''; st.secret = ''; st.chat = []; st.members = [];
+    ls.set(HOST_KEY, null);
+    showPanel();
+    setStatus('Starting…');
+    connect();
+    beginTimers();
+  }
+  function join(code, name) {
+    code = String(code || '').toUpperCase().replace(/[^A-Z0-9]/g, '');
+    if (code.length !== 6) { toast('Party codes have 6 letters/numbers'); return; }
+    if (name) { st.name = name; ls.set(NAME_KEY, name); }
+    st.role = 'guest';
+    st.code = code; st.detached = false; st.chat = []; st.members = [];
+    showPanel();
+    setStatus('Joining…');
+    connect();
+    beginTimers();
+  }
+  function beginTimers() {
+    clearInterval(st.pushTimer); clearInterval(st.driftTimer);
+    st.pushTimer = setInterval(() => pushState(), 3000);
+    st.driftTimer = setInterval(() => { if (st.role === 'guest' && st.state && !st.detached) applyState(st.state); }, 2500);
+  }
+  function leave(sendEnd = true) {
+    if (isHost() && sendEnd) send({ type: 'end' });
+    if (st.voice.on) toggleVoice();
+    const ws = st.ws;
+    st.ws = null;
+    st.role = null; st.code = ''; st.secret = '';
+    clearTimeout(st.retry); clearInterval(st.pushTimer); clearInterval(st.driftTimer);
+    try { if (ws) ws.close(); } catch { /* gone */ }
+    ls.set(HOST_KEY, null);
+    $('partyPanel').classList.add('hidden');
+    render();
+  }
+
+  // ---------- UI ----------
+  function setStatus(t) { const el = $('ptStatus'); if (el) el.textContent = t; }
+  function sysMsg(text) { st.chat.push({ sys: true, text, at: Date.now() }); renderChat(); }
+  function link() { return `${location.origin}/?party=${st.code}`; }
+  function showPanel() { $('partyPanel').classList.remove('hidden'); st.minimized = false; $('partyPanel').classList.remove('min'); render(); }
+
+  function render() {
+    const panel = $('partyPanel');
+    const chip = $('navPartyBtn');
+    if (chip) chip.textContent = inParty() ? `🎉 Party · ${st.members.length}` : '🎉 Watch party';
+    if (!panel || panel.classList.contains('hidden')) return;
+    const nameOk = !!myName();
+    if (!inParty()) {
+      panel.querySelector('.pt-body').innerHTML = `
+        <p class="modal-text">Watch together: everyone's player follows the host, with chat and optional voice.</p>
+        ${nameOk ? '' : '<label class="pt-row">Your name <input class="pt-name" maxlength="40" placeholder="e.g. Rex" /></label>'}
+        <button class="rv-primary" type="button" data-act="start">Start a party</button>
+        <div class="pt-or">or join one</div>
+        <div class="pt-row"><input class="pt-code" maxlength="7" placeholder="CODE" autocapitalize="characters" /><button class="np-btn" type="button" data-act="join">Join</button></div>`;
+      $('ptTitle').textContent = '🎉 Watch party';
+      setStatus('');
+      return;
+    }
+    $('ptTitle').textContent = `🎉 Party ${st.code || '…'}`;
+    const s = st.state && st.state.v;
+    panel.querySelector('.pt-body').innerHTML = `
+      ${st.code ? `<div class="pt-share"><code>${escapeHtml(link())}</code><button class="np-btn" type="button" data-act="copy">Copy</button>${navigator.share ? '<button class="np-btn" type="button" data-act="share">↗</button>' : ''}</div>` : ''}
+      ${!isHost() && s ? `<div class="pt-now">▶ ${escapeHtml(s.title)}</div>` : ''}
+      ${!isHost() && st.detached ? '<button class="rv-primary" type="button" data-act="resync">↻ Re-sync with the host</button>' : ''}
+      <div class="pt-members">${st.members.map((m) => `<span class="pt-member${m.pid === pid ? ' me' : ''}">${m.host ? '👑 ' : ''}${escapeHtml(m.name)}${m.voice ? ' 🎤' : ''}</span>`).join('')}</div>
+      ${isHost() ? `<label class="pt-toggle"><input type="checkbox" data-act="allow" ${st.allowControl ? 'checked' : ''} /> Guests can control playback</label>` : ''}
+      <div class="pt-voice">
+        <button class="np-btn${st.voice.on ? ' on' : ''}" type="button" data-act="voice">${st.voice.on ? '🎤 Leave voice' : '🎤 Join voice'}</button>
+        ${st.voice.on ? `<button class="np-btn" type="button" data-act="mute">${st.voice.muted ? '🔇 Unmute' : '🔈 Mute'}</button>` : ''}
+        <span class="pt-voice-n">${st.voice.on ? `${st.voice.pcs.size} connected` : ''}</span>
+      </div>
+      <div class="pt-chat" id="ptChat"></div>
+      <form class="pt-send"><input class="pt-msg" maxlength="500" placeholder="Message…" autocomplete="off" /><button class="np-btn" type="submit">Send</button></form>
+      <button class="pt-leave" type="button" data-act="leave">${isHost() ? 'End the party' : 'Leave the party'}</button>`;
+    renderChat();
+  }
+  function renderChat() {
+    const box = $('ptChat');
+    if (!box) return;
+    box.innerHTML = st.chat.map((c) => c.sys
+      ? `<div class="pt-sys">${escapeHtml(c.text)}</div>`
+      : `<div class="pt-line${c.pid === pid ? ' me' : ''}"><b>${escapeHtml(c.from)}</b> ${escapeHtml(c.text)}</div>`).join('');
+    box.scrollTop = box.scrollHeight;
+  }
+
+  function bindUi() {
+    const panel = $('partyPanel');
+    $('navPartyBtn').addEventListener('click', () => {
+      if (typeof closeSidebar === 'function') { try { closeSidebar(); } catch { /* not open */ } }
+      if (panel.classList.contains('hidden')) showPanel();
+      else if (st.minimized) { st.minimized = false; panel.classList.remove('min'); }
+      else if (!inParty()) panel.classList.add('hidden');
+      else { st.minimized = true; panel.classList.add('min'); }
+    });
+    $('ptMin').addEventListener('click', () => {
+      if (!inParty()) { panel.classList.add('hidden'); return; }
+      st.minimized = !st.minimized;
+      panel.classList.toggle('min', st.minimized);
+    });
+    panel.addEventListener('keydown', (e) => e.stopPropagation());
+    panel.addEventListener('click', async (e) => {
+      const a = e.target.closest('[data-act]');
+      if (!a || a.tagName === 'INPUT') return;
+      const act = a.dataset.act;
+      const nameIn = panel.querySelector('.pt-name');
+      const name = nameIn ? nameIn.value.trim() : '';
+      if ((act === 'start' || act === 'join') && !myName() && !name) { toast('Enter your name first'); if (nameIn) nameIn.focus(); return; }
+      if (name) { st.name = name; ls.set(NAME_KEY, name); }
+      if (act === 'start') start();
+      else if (act === 'join') join(panel.querySelector('.pt-code').value);
+      else if (act === 'copy') { try { await navigator.clipboard.writeText(link()); toast('Party link copied ✓'); } catch { toast('Copy blocked'); } }
+      else if (act === 'share') { try { await navigator.share({ title: 'Join my watch party', url: link() }); } catch { /* dismissed */ } }
+      else if (act === 'resync') resync();
+      else if (act === 'voice') toggleVoice();
+      else if (act === 'mute') toggleMute();
+      else if (act === 'leave') leave(true);
+    });
+    panel.addEventListener('change', (e) => {
+      if (e.target.dataset.act === 'allow') { st.allowControl = e.target.checked; send({ type: 'settings', allowControl: st.allowControl }); }
+    });
+    panel.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const input = panel.querySelector('.pt-msg');
+      const text = input.value.trim();
+      if (text) { send({ type: 'chat', text }); input.value = ''; }
+    });
+    // Host: push on every player change; guests: detect their own actions.
+    ['play', 'pause', 'seeked', 'ratechange', 'loadedmetadata'].forEach((ev) => {
+      [els.video, els.audio].forEach((el) => el.addEventListener(ev, (e) => {
+        if (el !== Player.master) return;
+        if (isHost()) pushState(true);
+        else if (ev === 'play' || ev === 'pause' || ev === 'seeked') onLocalAction(ev);
+      }));
+    });
+  }
+
+  function boot() {
+    bindUi();
+    render();
+    // Resume hosting after a reload.
+    try {
+      const h = JSON.parse(ls.get(HOST_KEY) || 'null');
+      if (h && h.code && h.secret) { st.role = 'host'; st.code = h.code; st.secret = h.secret; showPanel(); connect(); beginTimers(); }
+    } catch { /* none */ }
+    let code = '';
+    try { code = (new URLSearchParams(location.search).get('party') || '').toUpperCase(); } catch { /* no URL */ }
+    if (code) {
+      try { const u = new URL(location.href); u.searchParams.delete('party'); history.replaceState(null, '', u.pathname + u.search + u.hash); } catch { /* keep */ }
+      if (myName()) join(code);
+      else { showPanel(); const c = $('partyPanel').querySelector('.pt-code'); if (c) c.value = code; toast('Enter your name, then tap Join'); }
+    }
+  }
+
+  return {
+    boot, guestActive, intercept, afterLoad: () => pushState(true),
+    state: () => ({
+      role: st.role, code: st.code, detached: st.detached, members: st.members.length, voice: st.voice.on,
+      peers: st.voice.pcs.size, peerStates: [...st.voice.pcs.values()].map((pc) => pc.connectionState),
+      remoteAudio: [...st.voice.audios.values()].filter((a) => a.srcObject && a.srcObject.getAudioTracks().some((t) => t.readyState === 'live')).length,
+      chat: st.chat.length, allowControl: st.allowControl,
+    }),
+    _join: join, _start: start,
+  };
+})();
+
 function updateProgress() {
   const cur = Player.master.currentTime || 0;
   const dur = Player.master.duration || current?.meta?.duration || 0;
@@ -4170,6 +5729,8 @@ function updateProgress() {
   updateServiceProgress(cur, dur);
   Notes.tick(cur);
   Transition.tick(cur, dur);
+  if (sleepAtTrackEnd && dur) applySleepFade(dur - cur);
+  StatsTrack.tick(cur);
   Wave.draw();
   // A-B loop: passing B behaves like the track ending. Loop the A-B segment only
   // when "loop current" is on; otherwise B is the effective end of the track and
@@ -4371,11 +5932,14 @@ function advanceQueue() {
   return true;
 }
 function playNext() {
+  if (Party.intercept('next')) return;
   if (!advanceQueue()) { updatePlayBtn(); $('upnext').classList.add('hidden'); }
 }
 // Fired when a track finishes on its own — honors single-video loop first.
 function onTrackEnded() {
-  if (Transition.busy()) return; // crossfade/gapless already moved on
+  if (Transition.onEnded()) return; // crossfade/gapless owns this end
+  if (sleepAtTrackEnd) { finishSleep(); return; } // sleep timer: "end of this song"
+  if (Party.guestActive()) return; // the host's player decides what's next
   if (!playFullMode && data.settings.loopOne) { Player.seek(0); Player.play(); return; }
   if (!advanceQueue()) {
     if (playFullMode) { playFullMode = false; toast('Finished playing in full'); }
@@ -4401,6 +5965,7 @@ function updateLoopRepeatButtons() {
   if (els.shuffleBtn) els.shuffleBtn.classList.toggle('active', !!data.settings.shuffle);
 }
 function playPrev() {
+  if (Party.intercept('prev')) return;
   if (Player.master.currentTime > 3) { Player.seek(0); return; }
   if (queueIndex > 0) {
     queueIndex--;
@@ -4797,6 +6362,8 @@ function renderList() {
   if (view.type === 'settings') { renderSettings(); return; }
   if (view.type === 'saved') { renderSaved(); return; }
   if (view.type === 'downloads') { renderDownloads(); return; }
+  if (view.type === 'stats') { renderStats(); return; }
+  if (view.type === 'notes') { renderNotesView(); return; }
 
   // Filter bar — show for filterable views
   const filterableViews = ['history', 'playlist', 'queue', 'channel', 'smart'];
@@ -6501,15 +8068,14 @@ document.querySelectorAll('.chip').forEach((c) => {
   });
 
   // Sleep timer — click cycles through off/15/30/45/60/90 min
-  $('sleepTimerBtn').addEventListener('click', () => {
-    const options = [0, 15, 30, 45, 60, 90];
-    const curMin = sleepTimerRemaining > 0 ? Math.ceil(sleepTimerRemaining / 60) : 0;
-    const next = options.find((o) => o > curMin) ?? 0;
-    if (next === 0) { cancelSleepTimer(); toast('Sleep timer off'); }
-    else { startSleepTimer(next); toast(`Pausing in ${next} min`); }
-  });
+  $('sleepTimerBtn').addEventListener('click', openSleepTimer);
+  $('sleepCurtain').addEventListener('click', () => $('sleepCurtain').classList.add('hidden'));
   $('sleepCancelBtn').addEventListener('click', () => { cancelSleepTimer(); toast('Sleep timer cancelled'); });
   $('transitionBtn').addEventListener('click', () => Transition.cycle());
+  $('shareMomentBtn').addEventListener('click', () => Share.open());
+  $('externalBtn').addEventListener('click', () => External.open());
+  $('pipBtn').addEventListener('click', () => PiP.toggle());
+  $('eqBtn').addEventListener('click', () => EQ.open());
 
   // A-B markers
   $('abABtn').addEventListener('click', setAbA);
@@ -6758,6 +8324,9 @@ document.querySelectorAll('.chip').forEach((c) => {
     else if (e.key === 'a') { if (current) setAbA(); }
     else if (e.key === 'b') { if (current) setAbB(); }
     else if (e.key === 'p') { if (current) Notes.addBookmark(); }
+    else if (e.key === 'n') { if (current) Notes.addNote(); }
+    else if (e.key === 'i') PiP.toggle();
+    else if (e.key === 'e') EQ.open();
     else if (e.key === '?') toggleShortcutHelp();
     else if (e.key === 'Escape') {
       if (isServiceModeOpen()) exitServiceMode();
@@ -6807,40 +8376,151 @@ document.querySelectorAll('.chip').forEach((c) => {
 // ============================================================================
 // Sleep timer
 // ============================================================================
-function startSleepTimer(minutes) {
+// Options live in data.settings: sleepFade (seconds, 0 = none) and
+// sleepAction ('pause' | 'close' | 'screen'). "End of this song" pauses at the
+// track's end instead of advancing (Transition and onTrackEnded honour it).
+let sleepAtTrackEnd = false;
+let sleepFading = false;
+
+function sleepFadeSec() {
+  const f = Number(data.settings.sleepFade);
+  return Number.isFinite(f) ? Math.max(0, Math.min(120, f)) : 30;
+}
+
+// Fade the sound down over the last `sleepFadeSec()` seconds.
+function applySleepFade(remaining) {
+  const fade = sleepFadeSec();
+  if (!fade || remaining > fade) {
+    if (sleepFading) { sleepFading = false; Player.applyVolume(); }
+    return;
+  }
+  sleepFading = true;
+  try { Player.soundEl.volume = (data.settings.volume ?? 1) * Math.max(0, remaining / fade); } catch { /* iOS: volume is read-only */ }
+}
+
+function startSleepTimer(minutes, { endOfSong = false } = {}) {
   cancelSleepTimer();
+  if (endOfSong) {
+    sleepAtTrackEnd = true;
+    updateSleepTimerUI();
+    return;
+  }
   if (!minutes) return;
   sleepTimerRemaining = minutes * 60;
   updateSleepTimerUI();
   sleepTimerTick = setInterval(() => {
     sleepTimerRemaining--;
     if (sleepTimerRemaining <= 0) {
-      cancelSleepTimer();
-      Player.pause();
-      toast('Sleep timer — paused');
+      finishSleep();
     } else {
+      applySleepFade(sleepTimerRemaining);
       updateSleepTimerUI();
     }
   }, 1000);
 }
+
 function cancelSleepTimer() {
   if (sleepTimerTick) clearInterval(sleepTimerTick);
   sleepTimerTick = null;
   sleepTimerRemaining = 0;
+  sleepAtTrackEnd = false;
+  if (sleepFading) { sleepFading = false; Player.applyVolume(); }
   updateSleepTimerUI();
 }
+
+// Time's up: pause (volume restored for next time), then the chosen action.
+function finishSleep() {
+  cancelSleepTimer();
+  Player.pause();
+  Player.applyVolume();
+  const action = data.settings.sleepAction || 'pause';
+  if (action === 'close') {
+    toast('Sleep timer — paused, closing…');
+    try { window.close(); } catch { /* not allowed */ }
+    // Browsers only let scripts close windows they opened; if we're still
+    // here, fall back to the black screen.
+    setTimeout(() => showSleepCurtain('Sleep timer ended — this browser won’t let the app close itself · tap to wake'), 500);
+  } else if (action === 'screen') {
+    showSleepCurtain('Sleep timer ended · tap to wake');
+  } else {
+    toast('Sleep timer — paused');
+  }
+}
+
+// A black curtain; releasing the wake lock and leaving fullscreen lets the
+// device's own screen timeout switch the display off.
+function showSleepCurtain(msg) {
+  if (isServiceModeOpen()) exitServiceMode();
+  try { releaseWakeLock(); } catch { /* none held */ }
+  try { if (document.fullscreenElement) document.exitFullscreen(); } catch { /* fine */ }
+  const el = $('sleepCurtain');
+  $('sleepCurtainMsg').textContent = msg;
+  el.classList.remove('hidden', 'dim');
+  setTimeout(() => el.classList.add('dim'), 5000);
+}
+
 function updateSleepTimerUI() {
-  const active = sleepTimerRemaining > 0;
+  const active = sleepTimerRemaining > 0 || sleepAtTrackEnd;
   $('sleepStatus').classList.toggle('hidden', !active);
-  if (active) {
+  if (sleepAtTrackEnd) {
+    $('sleepCountdown').textContent = '⏱ Pausing after this song';
+  } else if (active) {
     const m = Math.floor(sleepTimerRemaining / 60);
     const s = sleepTimerRemaining % 60;
-    $('sleepCountdown').textContent = `⏱ Pausing in ${m}:${String(s).padStart(2, '0')}`;
+    $('sleepCountdown').textContent = `⏱ Pausing in ${m}:${String(s).padStart(2, '0')}${sleepFading ? ' · fading' : ''}`;
   }
   const btn = $('sleepTimerBtn');
   if (btn) btn.classList.toggle('sleep-active', active);
 }
 
+function openSleepTimer() {
+  const body = document.createElement('div');
+  body.className = 'sleep-panel';
+  const fade = sleepFadeSec();
+  const action = data.settings.sleepAction || 'pause';
+  body.innerHTML = `
+    <div class="sp-label">Pause after</div>
+    <div class="sp-chips">
+      ${[5, 15, 30, 45, 60, 90].map((m) => `<button type="button" class="sp-chip" data-min="${m}">${m} min</button>`).join('')}
+      <button type="button" class="sp-chip" data-end="1">End of this song</button>
+    </div>
+    <div class="sp-label">Fade out</div>
+    <div class="sp-chips sp-fade">
+      ${[0, 10, 30, 60].map((f) => `<button type="button" class="sp-chip${f === fade ? ' on' : ''}" data-fade="${f}">${f ? f + ' s' : 'No fade'}</button>`).join('')}
+    </div>
+    <div class="sp-label">Then</div>
+    <div class="sp-chips sp-action">
+      <button type="button" class="sp-chip${action === 'pause' ? ' on' : ''}" data-action="pause">Just pause</button>
+      <button type="button" class="sp-chip${action === 'close' ? ' on' : ''}" data-action="close">Close the app</button>
+      <button type="button" class="sp-chip${action === 'screen' ? ' on' : ''}" data-action="screen">Turn the screen off</button>
+    </div>
+    <p class="sp-note">“Turn the screen off” blacks out the app and lets your device's screen timeout take over. Browsers only allow “Close the app” for windows they opened, so it falls back to the black screen. iPhones can't fade — they just pause.</p>`;
+  body.addEventListener('click', (e) => {
+    const b = e.target.closest('.sp-chip');
+    if (!b) return;
+    if (b.dataset.fade !== undefined) {
+      data.settings.sleepFade = Number(b.dataset.fade); persist();
+      body.querySelectorAll('.sp-fade .sp-chip').forEach((x) => x.classList.toggle('on', x === b));
+    } else if (b.dataset.action) {
+      data.settings.sleepAction = b.dataset.action; persist();
+      body.querySelectorAll('.sp-action .sp-chip').forEach((x) => x.classList.toggle('on', x === b));
+    } else if (b.dataset.end) {
+      startSleepTimer(0, { endOfSong: true });
+      closeModal();
+      toast('Pausing after this song');
+    } else if (b.dataset.min) {
+      startSleepTimer(Number(b.dataset.min));
+      closeModal();
+      toast(`Pausing in ${b.dataset.min} min${sleepFadeSec() ? ` (fading over the last ${sleepFadeSec()} s)` : ''}`);
+    }
+  });
+  const running = sleepTimerRemaining > 0 || sleepAtTrackEnd;
+  showModal('⏱ Sleep timer', body, [
+    ...(running ? [{ label: 'Turn off', onClick: () => { cancelSleepTimer(); closeModal(); toast('Sleep timer off'); } }] : []),
+    { label: 'Close', primary: true, onClick: closeModal },
+  ]);
+}
+
 // ============================================================================
 // A-B loop markers
 // ============================================================================
@@ -7123,6 +8803,7 @@ function importBackup(e) {
           Object.assign(data.abMarkers, imp.abMarkers || {});
           Object.assign(data.bookmarks, imp.bookmarks || {});
           Object.assign(data.lyricOffsets, imp.lyricOffsets || {});
+          if (!data.stats && imp.stats) data.stats = imp.stats;
           persist();
           closeModal();
           render();
@@ -7384,6 +9065,7 @@ async function boot() {
         abMarkers: loaded.abMarkers || {},
         bookmarks: loaded.bookmarks || {},
         lyricOffsets: loaded.lyricOffsets || {},
+        stats: loaded.stats || null,
         lastAutoBackup: loaded.lastAutoBackup || 0,
         settings: { ...DEFAULT_SETTINGS, ...(loaded.settings || {}) },
         profile: loaded.profile || null,
@@ -7402,8 +9084,14 @@ async function boot() {
   // this must run once we know which one (if any) this device is linked to.
   await checkPlaylistInbox();
   startPlaylistInboxWatch();
+  Presenter.boot();
+  Share.bootFromUrl();
+  Party.boot();
   Remote.boot();
   Transition.renderButton();
+  PiP.render();
+  EQ.renderButton();
+  EQ.apply();
   applyAppearance();
   updateProfileStatus();
   updateLoopRepeatButtons();
diff --git a/frontend/index.html b/frontend/index.html
index ce0d724..ebaa0de 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -39,7 +39,10 @@
           <button class="nav-item" data-view="history">🕘 History</button>
           <button class="nav-item" data-view="saved">💾 Saved</button>
           <button class="nav-item" data-view="downloads">⬇ Downloads <span id="navDlCount" class="nav-badge hidden">0</span></button>
+          <button class="nav-item" data-view="notes">📝 Notes</button>
+          <button class="nav-item" data-view="stats">📊 Stats</button>
           <button class="nav-item" data-view="settings">⚙ Settings</button>
+          <button class="nav-item" id="navPartyBtn" type="button" title="Watch together with friends">🎉 Watch party</button>
           <button class="nav-item" id="navRemoteBtn" type="button" title="Control this screen from a phone, or use this phone as a remote">📱 Remote</button>
         </nav>
 
@@ -135,6 +138,8 @@
                 </div>
               </div>
               <div id="bufferSpinner" class="spinner hidden"></div>
+              <!-- Touch gesture feedback (Gestures in app.js) -->
+              <div id="gestureHud" class="gesture-hud hidden"></div>
             </div>
 
             <div id="controls" class="controls hidden">
@@ -193,6 +198,8 @@
                 <button id="loopBtn" class="ctrl" title="Loop current video (L)">🔂</button>
                 <button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)">🔁</button>
                 <button id="transitionBtn" class="ctrl" title="Between songs in a playlist: Normal — click to change">↦</button>
+                <button id="eqBtn" class="ctrl" title="Equalizer (E)">🎚</button>
+                <button id="pipBtn" class="ctrl hidden" title="Picture-in-picture (I)">⧉</button>
                 <button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button>
               </div>
             </div>
@@ -212,6 +219,8 @@
                 <button id="saveBtn" class="np-btn" title="Save this video for offline playback">⬇ Save</button>
                 <button id="editBtn" class="np-btn" title="Cut parts out and save a custom edited copy">✂ Edit &amp; download</button>
                 <button id="addPlaylistBtn" class="np-btn" title="Add to a playlist">＋ Playlist</button>
+                <button id="shareMomentBtn" class="np-btn" title="Share a link or GIF of this exact moment">🔗 Share moment</button>
+                <button id="externalBtn" class="np-btn" title="Play this in VLC, MX Player or another app">📺 Open in…</button>
                 <button id="brokenBtn" class="np-btn" title="Video won't play or looks broken? Re-download the server's copy" hidden>⚠ Broken</button>
               </div>
             </div>
@@ -221,6 +230,7 @@
               <div class="notes-tabs" role="tablist">
                 <button class="notes-tab active" data-tab="lyrics" role="tab" type="button">Lyrics</button>
                 <button class="notes-tab" data-tab="markers" role="tab" type="button">Chapters &amp; bookmarks <span id="markersCount" class="notes-count"></span></button>
+                <button class="notes-tab" data-tab="search" role="tab" type="button">🔎 Search</button>
                 <span id="notesStatus" class="notes-status"></span>
               </div>
 
@@ -248,11 +258,24 @@
                 <div id="lyricsList" class="lyrics-list"></div>
               </div>
 
+              <div id="searchPane" class="notes-pane hidden">
+                <div class="ts-bar">
+                  <input id="tsQuery" class="ts-query" type="search" placeholder="Search what's said or sung…" autocomplete="off" />
+                  <select id="tsSource" class="ts-source" aria-label="Search in">
+                    <option value="lyrics">Lyrics</option>
+                    <option value="captions">YouTube transcript</option>
+                  </select>
+                </div>
+                <div id="tsInfo" class="ts-info"></div>
+                <div id="tsResults" class="ts-results"></div>
+              </div>
+
               <div id="markersPane" class="notes-pane hidden">
                 <div id="markerChips" class="marker-chips"></div>
                 <div class="markers-toolbar">
                   <button id="addChapterBtn" class="np-btn" type="button">＋ Chapter</button>
                   <button id="addBookmarkBtn" class="np-btn" type="button" title="Pin a private bookmark here [P]">📌 Bookmark</button>
+                  <button id="addNoteBtn" class="np-btn" type="button" title="Write a note tied to this moment [N]">📝 Note</button>
                   <span class="notes-spacer"></span>
                   <button id="chaptersHistoryBtn" class="np-btn" type="button" title="Earlier versions of the shared chapters">🕘</button>
                   <button id="exportMarkersBtn" class="np-btn" type="button">⤓ Export</button>
@@ -262,7 +285,7 @@
                   <div id="chapterList" class="marker-list"></div>
                 </div>
                 <div class="markers-section">
-                  <div class="markers-heading">My bookmarks <span class="markers-scope">only you</span></div>
+                  <div class="markers-heading">My notes &amp; bookmarks <span class="markers-scope">only you</span></div>
                   <div id="bookmarkList" class="marker-list"></div>
                 </div>
               </div>
@@ -357,6 +380,11 @@
       </div>
     </section>
 
+    <!-- Sleep timer "screen off": black curtain; tap to wake -->
+    <div id="sleepCurtain" class="sleep-curtain hidden" role="button" aria-label="Wake">
+      <span id="sleepCurtainMsg">Sleep timer ended · tap to wake</span>
+    </div>
+
     <div id="toastContainer" class="toast-container"></div>
 
     <!-- Mini now-playing bar -->
@@ -376,11 +404,36 @@
     </div>
 
     <!-- YouTube-style bottom navigation bar (portrait PWA mode only) -->
+    <!-- Watch party panel (Party in app.js) -->
+    <aside id="partyPanel" class="party-panel hidden" aria-label="Watch party">
+      <div class="pt-head"><span id="ptTitle">🎉 Watch party</span><span id="ptStatus" class="pt-status"></span><button id="ptMin" class="rv-icon" type="button" aria-label="Minimise">▁</button></div>
+      <div class="pt-body"></div>
+    </aside>
+
     <!-- Desktop: shown while phones are driving this screen (remote.js) -->
     <button id="remoteChip" class="remote-chip hidden" type="button" title="Phone remote settings">
       <span class="remote-chip-dot"></span><span id="remoteChipText">Remote connected</span>
     </button>
 
+    <!-- Presenter / projector screen: lyrics of whatever the paired screen plays -->
+    <section id="presenterView" class="presenter-view hidden" aria-label="Presenter view">
+      <div id="pvList" class="sl-list pv-list"></div>
+      <div id="pvTitle" class="pv-title hidden"></div>
+      <div id="pvBar" class="pv-bar">
+        <span id="pvStatus" class="pv-status">Connecting…</span>
+        <span class="pv-hint">Double-click or F = fullscreen · B = blank screen</span>
+        <button id="pvFull" class="pv-btn" type="button">⛶ Fullscreen</button>
+      </div>
+      <div id="pvPair" class="pv-pair hidden">
+        <div class="pv-pair-title">Presenter screen</div>
+        <p>Enter the 6-digit code shown on the playing computer (📱 Remote → Control this screen → Presenter).</p>
+        <input id="pvCode" inputmode="numeric" maxlength="7" placeholder="000 000" />
+        <button id="pvPairBtn" class="rv-primary" type="button">Connect</button>
+        <div id="pvMsg" class="rv-pair-msg"></div>
+      </div>
+      <div id="pvBlank" class="pv-blank hidden"></div>
+    </section>
+
     <!-- Phone: remote control for a desktop instance -->
     <section id="remoteView" class="remote-view hidden" aria-label="Phone remote">
       <div class="rv-top">
@@ -481,6 +534,9 @@
           <div class="shortcut-row"><kbd>A</kbd><span>Set A-B loop start point</span></div>
           <div class="shortcut-row"><kbd>B</kbd><span>Set A-B loop end point</span></div>
           <div class="shortcut-row"><kbd>P</kbd><span>Pin a bookmark at the current time</span></div>
+          <div class="shortcut-row"><kbd>N</kbd><span>Write a note at this moment</span></div>
+          <div class="shortcut-row"><kbd>I</kbd><span>Picture-in-picture</span></div>
+          <div class="shortcut-row"><kbd>E</kbd><span>Equalizer</span></div>
           <div class="shortcut-row"><kbd>?</kbd><span>Show this help</span></div>
           <div class="shortcut-row"><kbd>Esc</kbd><span>Close overlay / cancel selection</span></div>
         </div>
@@ -491,6 +547,7 @@
     <script src="opfs.js"></script>
     <script src="video-edit.js"></script>
     <script src="lyrics-core.js"></script>
+    <script src="stats-core.js"></script>
     <script src="async-guard.js"></script>
     <script src="sw-update.js"></script>
     <script src="app.js"></script>
diff --git a/frontend/stats-core.js b/frontend/stats-core.js
new file mode 100644
index 0000000..6312e0f
--- /dev/null
+++ b/frontend/stats-core.js
@@ -0,0 +1,152 @@
+/* ============================================================================
+ * stats-core.js — listening statistics (pure; window.StatsCore / node)
+ *
+ * Stored in data.stats (synced with the profile):
+ *   { v: 1,
+ *     days: { 'YYYY-MM-DD': { s: secondsListened, p: plays, songs: { id: plays } } },
+ *     meta: { id: { t: title, c: channel } } }
+ * Days are LOCAL calendar days. A play counts once a song has been listened
+ * to for 30 s in one load. Days older than KEEP_DAYS are pruned.
+ * ========================================================================== */
+(function (root) {
+  'use strict';
+
+  const KEEP_DAYS = 400;
+  const META_MAX = 600;
+  const STREAK_MIN_SEC = 5 * 60; // a day counts toward the streak at 5 min
+
+  const pad = (n) => String(n).padStart(2, '0');
+  const dayKey = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  const addDays = (d, n) => { const x = new Date(d.getFullYear(), d.getMonth(), d.getDate()); x.setDate(x.getDate() + n); return x; };
+
+  function empty() { return { v: 1, days: {}, meta: {} }; }
+
+  function ensure(stats) {
+    if (!stats || typeof stats !== 'object' || !stats.days) return empty();
+    if (!stats.meta) stats.meta = {};
+    return stats;
+  }
+
+  // Add listened seconds (and optionally one play) for a song on `now`'s day.
+  function record(stats, song, seconds, countPlay, now = new Date()) {
+    stats = ensure(stats);
+    const k = dayKey(now);
+    const d = stats.days[k] || (stats.days[k] = { s: 0, p: 0, songs: {} });
+    if (seconds > 0) d.s = Math.round((d.s + seconds) * 10) / 10;
+    if (countPlay && song && song.id) {
+      d.p += 1;
+      d.songs[song.id] = (d.songs[song.id] || 0) + 1;
+    }
+    if (song && song.id) {
+      stats.meta[song.id] = { t: String(song.title || '').slice(0, 200), c: String(song.channel || '').slice(0, 120) };
+      const ids = Object.keys(stats.meta);
+      if (ids.length > META_MAX) {
+        const used = new Set();
+        Object.values(stats.days).forEach((x) => Object.keys(x.songs || {}).forEach((id) => used.add(id)));
+        for (const id of ids) if (!used.has(id) && Object.keys(stats.meta).length > META_MAX) delete stats.meta[id];
+      }
+    }
+    prune(stats, now);
+    return stats;
+  }
+
+  function prune(stats, now = new Date()) {
+    const cutoff = dayKey(addDays(now, -KEEP_DAYS));
+    for (const k of Object.keys(stats.days)) if (k < cutoff) delete stats.days[k];
+    return stats;
+  }
+
+  // "Hillsong Worship - Topic", "BethelVEVO" → artist name for grouping.
+  function artistOf(channel) {
+    return String(channel || '').replace(/\s*-\s*Topic$/i, '').replace(/VEVO$/i, '').replace(/\s+Official$/i, '').trim() || 'Unknown';
+  }
+
+  function streaks(stats, now = new Date()) {
+    const active = (d) => ((stats.days[dayKey(d)] || {}).s || 0) >= STREAK_MIN_SEC;
+    // Current streak: ending today, or yesterday if today hasn't counted yet.
+    let cur = 0;
+    let d = active(now) ? now : addDays(now, -1);
+    while (active(d)) { cur++; d = addDays(d, -1); }
+    let best = 0, run = 0;
+    const keys = Object.keys(stats.days).sort();
+    if (keys.length) {
+      const [y, m, dd] = keys[0].split('-').map(Number);
+      for (let x = new Date(y, m - 1, dd); dayKey(x) <= dayKey(now); x = addDays(x, 1)) {
+        run = active(x) ? run + 1 : 0;
+        if (run > best) best = run;
+      }
+    }
+    return { current: cur, best: Math.max(best, cur) };
+  }
+
+  function summarize(statsIn, now = new Date()) {
+    const stats = ensure(statsIn);
+    const monthKey = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}`;
+    const thisMonth = monthKey(now);
+    const lastMonth = monthKey(new Date(now.getFullYear(), now.getMonth() - 1, 1));
+    let thisMonthSec = 0, lastMonthSec = 0, totalSec = 0, totalPlays = 0;
+    const songsAll = {}, artistsMonth = {};
+    for (const [k, d] of Object.entries(stats.days)) {
+      totalSec += d.s || 0;
+      totalPlays += d.p || 0;
+      if (k.startsWith(thisMonth)) thisMonthSec += d.s || 0;
+      if (k.startsWith(lastMonth)) lastMonthSec += d.s || 0;
+      for (const [id, n] of Object.entries(d.songs || {})) {
+        songsAll[id] = (songsAll[id] || 0) + n;
+        if (k.startsWith(thisMonth)) {
+          const a = artistOf((stats.meta[id] || {}).c);
+          artistsMonth[a] = (artistsMonth[a] || 0) + n;
+        }
+      }
+    }
+    const topArtists = Object.entries(artistsMonth).sort((a, b) => b[1] - a[1]).slice(0, 5)
+      .map(([name, plays]) => ({ name, plays }));
+
+    // Top songs over the last 30 days, each with a 30-point daily sparkline.
+    const last30 = Array.from({ length: 30 }, (_, i) => dayKey(addDays(now, i - 29)));
+    const recent = {};
+    for (const k of last30) for (const [id, n] of Object.entries((stats.days[k] || {}).songs || {})) recent[id] = (recent[id] || 0) + n;
+    const topSongs = Object.entries(recent).sort((a, b) => b[1] - a[1]).slice(0, 5).map(([id, plays]) => ({
+      id, plays, title: (stats.meta[id] || {}).t || id, channel: (stats.meta[id] || {}).c || '',
+      spark: last30.map((k) => ((stats.days[k] || {}).songs || {})[id] || 0),
+    }));
+
+    // 16-week heatmap: columns are weeks (oldest → current), rows Mon..Sun.
+    const WEEKS = 16;
+    const monIdx = (d) => (d.getDay() + 6) % 7; // Mon=0 … Sun=6
+    const thisMonday = addDays(now, -monIdx(now));
+    const start = addDays(thisMonday, -(WEEKS - 1) * 7);
+    const heat = [];
+    for (let w = 0; w < WEEKS; w++) {
+      const col = [];
+      for (let r = 0; r < 7; r++) {
+        const d = addDays(start, w * 7 + r);
+        const k = dayKey(d);
+        col.push({ date: k, minutes: Math.round(((stats.days[k] || {}).s || 0) / 60), future: k > dayKey(now) });
+      }
+      heat.push(col);
+    }
+    // Peak weekday: average hours on that weekday across the heatmap window.
+    const byDow = Array.from({ length: 7 }, () => ({ sum: 0, n: 0 }));
+    heat.forEach((col) => col.forEach((c, r) => { if (!c.future) { byDow[r].sum += c.minutes; byDow[r].n += 1; } }));
+    const names = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    let peak = null;
+    byDow.forEach((x, i) => { const avg = x.n ? x.sum / x.n / 60 : 0; if (avg > 0 && (!peak || avg > peak.avgHours)) peak = { day: names[i], avgHours: avg }; });
+
+    return {
+      totalSec, totalPlays, thisMonthSec, lastMonthSec,
+      songsPlayed: Object.keys(songsAll).length,
+      streak: streaks(stats, now), topArtists, topSongs, heat, peak,
+    };
+  }
+
+  function fmtHours(sec) {
+    const m = Math.round((sec || 0) / 60);
+    const h = Math.floor(m / 60);
+    return h ? `${h}h ${pad(m % 60)}m` : `${m}m`;
+  }
+
+  const StatsCore = { empty, ensure, record, prune, summarize, streaks, artistOf, dayKey, fmtHours, STREAK_MIN_SEC };
+  if (typeof module !== 'undefined' && module.exports) module.exports = StatsCore;
+  else root.StatsCore = StatsCore;
+})(typeof globalThis !== 'undefined' ? globalThis : this);
diff --git a/frontend/stats-core.test.js b/frontend/stats-core.test.js
new file mode 100644
index 0000000..1ff011b
--- /dev/null
+++ b/frontend/stats-core.test.js
@@ -0,0 +1,67 @@
+'use strict';
+const { test } = require('node:test');
+const assert = require('node:assert');
+const SC = require('./stats-core');
+
+const at = (y, m, d, h = 12) => new Date(y, m - 1, d, h);
+const songA = { id: 'aaaaaaaaaaa', title: 'Goodness of God', channel: 'Bethel Music - Topic' };
+const songB = { id: 'bbbbbbbbbbb', title: 'Build My Life', channel: 'Housefires' };
+
+test('record accumulates seconds and plays per local day', () => {
+  let s = SC.empty();
+  s = SC.record(s, songA, 100, true, at(2026, 9, 18));
+  s = SC.record(s, songA, 50, false, at(2026, 9, 18));
+  s = SC.record(s, songB, 30, true, at(2026, 9, 19));
+  assert.deepStrictEqual(s.days['2026-09-18'], { s: 150, p: 1, songs: { aaaaaaaaaaa: 1 } });
+  assert.strictEqual(s.days['2026-09-19'].p, 1);
+  assert.strictEqual(s.meta.aaaaaaaaaaa.t, 'Goodness of God');
+});
+
+test('old days are pruned', () => {
+  let s = SC.empty();
+  s = SC.record(s, songA, 10, true, at(2024, 1, 1));
+  s = SC.record(s, songA, 10, true, at(2026, 9, 18));
+  assert.deepStrictEqual(Object.keys(s.days), ['2026-09-18']);
+});
+
+test('streak counts consecutive 5-minute days, allowing today to be pending', () => {
+  let s = SC.empty();
+  for (const d of [10, 11, 12, 15, 16, 17]) s = SC.record(s, songA, 400, true, at(2026, 9, d));
+  s = SC.record(s, songA, 60, true, at(2026, 9, 18)); // today, under 5 min so far
+  const st = SC.streaks(s, at(2026, 9, 18));
+  assert.strictEqual(st.current, 3); // 15,16,17
+  assert.strictEqual(st.best, 3);
+  s = SC.record(s, songA, 400, true, at(2026, 9, 18));
+  assert.strictEqual(SC.streaks(s, at(2026, 9, 18)).current, 4);
+});
+
+test('summary: month totals, top artists (Topic stripped), top songs with sparkline, heatmap', () => {
+  let s = SC.empty();
+  s = SC.record(s, songA, 3600, true, at(2026, 8, 20));        // last month
+  s = SC.record(s, songA, 1800, true, at(2026, 9, 14));        // this month (Mon)
+  s = SC.record(s, songA, 1800, true, at(2026, 9, 17));
+  s = SC.record(s, songB, 600, true, at(2026, 9, 17));
+  const sum = SC.summarize(s, at(2026, 9, 18));
+  assert.strictEqual(sum.thisMonthSec, 4200);
+  assert.strictEqual(sum.lastMonthSec, 3600);
+  assert.strictEqual(sum.totalPlays, 4);
+  assert.strictEqual(sum.songsPlayed, 2);
+  assert.deepStrictEqual(sum.topArtists, [{ name: 'Bethel Music', plays: 2 }, { name: 'Housefires', plays: 1 }]);
+  assert.strictEqual(sum.topSongs[0].title, 'Goodness of God');
+  assert.strictEqual(sum.topSongs[0].plays, 3);
+  assert.strictEqual(sum.topSongs[0].spark.length, 30);
+  assert.strictEqual(sum.topSongs[0].spark.at(-2), 1); // Sep 17
+  assert.strictEqual(sum.heat.length, 16);
+  const cur = sum.heat[15];
+  assert.strictEqual(cur[0].date, '2026-09-14'); // Monday of this week
+  assert.strictEqual(cur[0].minutes, 30);
+  assert.strictEqual(cur[6].future, true);       // Sunday Sep 20 hasn't happened
+  assert.strictEqual(sum.peak.day, 'Thursday');   // Sep 17 had 40 min
+});
+
+test('fmtHours and artistOf', () => {
+  assert.strictEqual(SC.fmtHours(152280), '42h 18m');
+  assert.strictEqual(SC.fmtHours(600), '10m');
+  assert.strictEqual(SC.artistOf('BethelVEVO'), 'Bethel');
+  assert.strictEqual(SC.artistOf(''), 'Unknown');
+});
diff --git a/frontend/styles.css b/frontend/styles.css
index 8559c60..0261e9b 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -3802,3 +3802,234 @@ body.remote-open { overflow: hidden; }
   color: var(--text-2); font-size: 12px; cursor: pointer;
 }
 .wave-loud:hover { color: var(--text); border-color: var(--accent); }
+
+/* ============================================================================
+ * Stats view (renderStats in app.js)
+ * ========================================================================== */
+.stats { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
+.stats-empty { grid-column: 1 / -1; }
+.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
+.st-tile, .st-panel {
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
+}
+.st-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
+.st-big { font-family: var(--mono); font-size: 32px; font-weight: 700; color: var(--text); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
+.st-sub { font-size: 12px; color: var(--text-2); }
+.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
+.st-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; font-weight: 700; font-size: 14px; color: var(--text); }
+.st-panel-head small { font-weight: 400; font-size: 11px; color: var(--text-dim); text-align: right; }
+.st-none { font-size: 13px; color: var(--text-dim); }
+.st-bar-row { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 34px; align-items: center; gap: 10px; padding: 5px 0; }
+.st-bar-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.st-bar-track { height: 10px; }
+.st-bar { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--accent); }
+.st-bar-row:hover .st-bar { background: var(--accent-bright); }
+.st-bar-val { font-family: var(--mono); font-size: 12px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
+.st-song { display: grid; grid-template-columns: 24px 1fr 96px 34px; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
+.st-song:last-child { border-bottom: none; }
+.st-song:hover b { color: var(--accent-bright); }
+.st-rank { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
+.st-song-text { display: flex; flex-direction: column; min-width: 0; }
+.st-song-text b { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.st-song-text small { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.st-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.st-heat-wrap { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
+.st-heat-days { display: grid; grid-template-rows: 14px repeat(7, 14px); row-gap: 3px; font-size: 9px; color: var(--text-dim); font-family: var(--mono); }
+.st-heat-days span { line-height: 14px; }
+.st-heat-months { display: grid; grid-template-columns: repeat(16, 14px); column-gap: 3px; height: 14px; font-size: 9px; color: var(--text-dim); font-family: var(--mono); white-space: nowrap; margin-bottom: 3px; }
+.st-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-template-columns: repeat(16, 14px); gap: 3px; }
+.st-cell { width: 14px; height: 14px; border-radius: 3px; background: var(--bg-3); }
+.st-cell.l1 { background: color-mix(in srgb, var(--accent) 28%, var(--bg-3)); }
+.st-cell.l2 { background: color-mix(in srgb, var(--accent) 50%, var(--bg-3)); }
+.st-cell.l3 { background: color-mix(in srgb, var(--accent) 74%, var(--bg-3)); }
+.st-cell.l4 { background: var(--accent); }
+.st-cell.future { background: transparent; border: 1px dashed var(--line); box-sizing: border-box; }
+.st-heat .st-cell:hover { outline: 2px solid var(--text); outline-offset: 1px; }
+.st-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--text-dim); }
+.st-legend span:first-child { margin-right: 4px; }
+.st-legend span:last-child { margin-left: 4px; }
+.st-table { margin-top: 10px; font-size: 12px; color: var(--text-2); }
+.st-table summary { cursor: pointer; color: var(--text-dim); }
+.st-table table { margin-top: 8px; border-collapse: collapse; }
+.st-table td, .st-table th { padding: 3px 12px 3px 0; text-align: left; font-variant-numeric: tabular-nums; }
+.st-tip {
+  position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 5;
+  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
+  padding: 5px 9px; border-radius: 8px; font-size: 12px; white-space: nowrap; box-shadow: var(--shadow);
+}
+
+/* ============================================================================
+ * Presenter / projector view (Presenter in app.js) — always dark
+ * ========================================================================== */
+.presenter-view {
+  --text: #f7f5f2; --text-2: #c9c8d0; --text-dim: #8a8994; --line: #2a2a33;
+  position: fixed; inset: 0; z-index: 420;
+  background: #000; color: var(--text);
+  overflow: hidden;
+}
+body.presenter-open { overflow: hidden; }
+.pv-list { position: absolute; inset: 4vh 0 8vh 0; }
+.presenter-view .sl-line { cursor: default; }
+.pv-title {
+  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center; padding: 0 6vw; font-family: var(--display); font-weight: 800;
+  font-size: clamp(32px, 6vw, 96px); line-height: 1.1; color: var(--text);
+}
+.pv-title small { font-family: var(--ui); font-weight: 500; font-size: clamp(16px, 2vw, 28px); color: var(--text-dim); margin-top: 16px; }
+.pv-bar {
+  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px;
+  padding: 10px 18px; font-size: 13px; color: var(--text-dim);
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); transition: opacity 0.4s;
+}
+.pv-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pv-hint { font-size: 11px; }
+.pv-btn { background: #16161b; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
+.presenter-view.idle { cursor: none; }
+.presenter-view.idle .pv-bar { opacity: 0; }
+.pv-pair {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  width: min(420px, 90vw); display: flex; flex-direction: column; gap: 12px; text-align: center;
+  background: #111116; border: 1px solid var(--line); border-radius: 16px; padding: 24px;
+}
+.pv-pair-title { font-family: var(--display); font-size: 26px; font-weight: 700; }
+.pv-pair p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
+.pv-pair input {
+  font-family: var(--mono); font-size: 32px; letter-spacing: 0.2em; text-align: center;
+  background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
+}
+.pv-blank { position: absolute; inset: 0; background: #000; z-index: 5; }
+.rh-present { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
+.rh-qr-sm { width: 96px; height: 96px; }
+.rh-present code { font-family: var(--mono); font-size: 11px; word-break: break-all; }
+
+/* Timestamp sharing (Share in app.js) */
+.share-moment { display: flex; flex-direction: column; gap: 12px; }
+.sm-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }
+.sm-time { width: 90px; background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 9px; font-family: var(--mono); font-size: 14px; }
+.sm-links { display: flex; flex-direction: column; gap: 8px; }
+.sm-link { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; font-size: 12px; color: var(--text-dim); }
+.sm-link code { font-family: var(--mono); font-size: 11px; color: var(--text); background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
+.sm-gif { border-top: 1px solid var(--line-soft); padding-top: 12px; }
+.sm-gif-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
+.sm-gif-controls select { background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
+.sm-gif-out { margin-top: 10px; }
+.sm-preview { display: block; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
+.sm-gif-actions { display: flex; gap: 8px; margin-top: 8px; }
+.sm-busy, .sm-err { font-size: 13px; color: var(--text-2); }
+.sm-err { color: var(--accent-bright); }
+
+/* Sleep timer panel, curtain, equalizer */
+.sleep-panel, .eq-panel { display: flex; flex-direction: column; gap: 8px; }
+.sp-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
+.sp-chips, .eq-presets { display: flex; flex-wrap: wrap; gap: 6px; }
+.sp-chip {
+  background: var(--bg-1); color: var(--text-2); border: 1px solid var(--line); border-radius: 999px;
+  padding: 7px 12px; font-size: 13px; cursor: pointer;
+}
+.sp-chip:hover { color: var(--text); border-color: var(--text-dim); }
+.sp-chip.on { color: var(--text); border-color: var(--accent); background: var(--bg-3); }
+.sp-note { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
+.sleep-curtain {
+  position: fixed; inset: 0; z-index: 500; background: #000; cursor: pointer;
+  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12vh;
+}
+.sleep-curtain span { color: #666; font-size: 14px; transition: opacity 2s; }
+.sleep-curtain.dim span { opacity: 0; }
+.eq-bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
+.eq-band { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
+.eq-band input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 28px; height: 150px; accent-color: var(--accent); }
+.eq-val { font-family: var(--mono); font-size: 11px; color: var(--text); min-height: 14px; }
+.eq-f { font-family: var(--mono); }
+
+/* Touch gestures (Gestures in app.js) */
+.player-stage { touch-action: pan-y; }            /* page still scrolls; we get double-tap + pinch */
+:fullscreen .player-stage, .player-stage:fullscreen,
+body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or the iOS landscape one): swipes too */
+#video { transform-origin: center center; transition: transform 0.05s linear; }
+.gesture-hud {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
+  min-width: 140px; padding: 12px 16px; border-radius: 14px; text-align: center;
+  background: rgba(0, 0, 0, 0.62); color: #fff; pointer-events: none; font-family: var(--ui);
+}
+.gh-label { font-size: 14px; font-weight: 600; }
+.gh-bar { margin-top: 8px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
+.gh-bar span { display: block; height: 100%; background: #fff; }
+.gh-seek { font-size: 22px; font-weight: 700; }
+
+/* Notes: long personal notes + the 📝 Notes view */
+.marker-form textarea {
+  background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm);
+  padding: 9px 10px; font: 14px/1.5 var(--ui); resize: vertical;
+}
+.mk-note.long { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+.notes-view { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
+.nv-filter { background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 14px; }
+.nv-group { background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
+.nv-head { display: flex; flex-direction: column; margin-bottom: 6px; }
+.nv-head b { font-size: 14px; color: var(--text); }
+.nv-head small { font-size: 11px; color: var(--text-dim); }
+.nv-item { display: flex; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-top: 1px solid var(--line-soft); padding: 8px 2px; cursor: pointer; color: var(--text-2); }
+.nv-item:hover .nv-title { color: var(--accent-bright); }
+.nv-time { flex: none; width: 48px; font-family: var(--mono); font-size: 12px; color: var(--accent-bright); }
+.nv-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.nv-title { font-size: 13px; color: var(--text); }
+.nv-note { font-size: 12px; white-space: pre-wrap; color: var(--text-2); }
+
+/* Transcript search tab */
+.ts-bar { display: flex; gap: 8px; margin-bottom: 8px; }
+.ts-query { flex: 1; min-width: 0; background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 14px; }
+.ts-source { background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12px; }
+.ts-info { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
+.ts-results { max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
+.ts-hit { display: flex; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 6px; cursor: pointer; color: var(--text-2); font-size: 14px; line-height: 1.4; }
+.ts-hit:hover { background: var(--bg-3); color: var(--text); }
+.ts-time { flex: none; width: 42px; font-family: var(--mono); font-size: 11px; color: var(--accent-bright); padding-top: 2px; }
+.ts-hit mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
+.sm-bite input { width: 70px; background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-family: var(--mono); font-size: 12px; }
+.sm-bite-out { margin-top: 10px; }
+.sm-audio { width: 100%; }
+.ext-panel { display: flex; flex-direction: column; gap: 10px; }
+.ext-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
+.ext-buttons a.np-btn { text-decoration: none; display: inline-flex; align-items: center; }
+
+/* Watch party panel (Party in app.js) */
+.party-panel {
+  position: fixed; right: 16px; top: 76px; bottom: 96px; width: 340px; z-index: 160;
+  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
+  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
+}
+.party-panel.min { bottom: auto; }
+.party-panel.min .pt-body { display: none; }
+.pt-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
+.pt-head .rv-icon { width: 30px; height: 30px; font-size: 12px; margin-left: auto; }
+.pt-status { font-family: var(--mono); font-size: 10px; color: var(--text-dim); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pt-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
+.pt-row { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-dim); }
+.pt-row input, .pt-msg, .pt-name {
+  flex: 1; min-width: 0; background: var(--bg-1); color: var(--text); border: 1px solid var(--line);
+  border-radius: var(--radius-sm); padding: 8px 10px; font-size: 14px;
+}
+.pt-code { font-family: var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
+.pt-or { text-align: center; font-size: 11px; color: var(--text-dim); }
+.pt-share { display: flex; gap: 6px; align-items: center; }
+.pt-share code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pt-now { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pt-members { display: flex; flex-wrap: wrap; gap: 6px; }
+.pt-member { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--bg-3); color: var(--text-2); }
+.pt-member.me { color: var(--text); border: 1px solid var(--accent); }
+.pt-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
+.pt-voice { display: flex; align-items: center; gap: 8px; }
+.pt-voice .np-btn.on { border-color: #7ee0a8; }
+.pt-voice-n { font-size: 11px; color: var(--text-dim); }
+.pt-chat { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
+.pt-line { font-size: 13px; color: var(--text-2); line-height: 1.4; overflow-wrap: anywhere; }
+.pt-line b { color: var(--text); }
+.pt-line.me b { color: var(--accent-bright); }
+.pt-sys { font-size: 11px; color: var(--text-dim); text-align: center; }
+.pt-send { display: flex; gap: 6px; }
+.pt-leave { background: transparent; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; text-decoration: underline; align-self: center; }
+@media (max-width: 720px) {
+  .party-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; height: 62vh; }
+  .party-panel.min { height: auto; }
+}
diff --git a/frontend/sw.js b/frontend/sw.js
index 2d12704..63a1a30 100644
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -63,6 +63,7 @@ const SHELL = [
   '/opfs-worker.js',
   '/video-edit.js',
   '/lyrics-core.js',
+  '/stats-core.js',
   '/app.js',
   '/manifest.webmanifest',
   '/icons/icon-192.png',
diff --git a/scripts/lyrics/.dockerignore b/scripts/lyrics/.dockerignore
new file mode 100644
index 0000000..c18dd8d
--- /dev/null
+++ b/scripts/lyrics/.dockerignore
@@ -0,0 +1 @@
+__pycache__/
diff --git a/scripts/lyrics/Dockerfile b/scripts/lyrics/Dockerfile
new file mode 100644
index 0000000..8a0ac7f
--- /dev/null
+++ b/scripts/lyrics/Dockerfile
@@ -0,0 +1,15 @@
+# Lyrics worker — transcribes saved songs that have no lyrics yet, one at a
+# time, with faster-whisper on CPU (no API keys). Talks to the ytplayer
+# service over the compose network only; see scripts/lyrics/auto_lyrics.py.
+FROM python:3.12-slim
+ENV PYTHONUNBUFFERED=1 \
+    HF_HOME=/models \
+    PIP_NO_CACHE_DIR=1
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+COPY auto_lyrics.py .
+# Model weights (downloaded on first use) and the worker's memory of
+# instrumentals/failures live on volumes, so rebuilds don't re-download.
+VOLUME ["/models", "/data"]
+CMD ["sh", "-c", "exec python auto_lyrics.py --missing --watch ${WATCH_SECONDS:-300} --state /data/state.json --model ${WHISPER_MODEL:-large-v3-turbo} --threads ${WHISPER_THREADS:-2}"]
diff --git a/scripts/lyrics/auto_lyrics.py b/scripts/lyrics/auto_lyrics.py
index 79e7659..5ac1c07 100644
--- a/scripts/lyrics/auto_lyrics.py
+++ b/scripts/lyrics/auto_lyrics.py
@@ -121,9 +121,83 @@ def main():
     ap.add_argument('--threads', type=int, default=os.cpu_count() or 4)
     ap.add_argument('--dry-run', action='store_true', help='transcribe and print, do not upload')
     ap.add_argument('--min-words', type=int, default=25, help='fewer words = treat as instrumental')
+    ap.add_argument('--watch', type=int, default=0, metavar='SECONDS',
+                    help='keep running: re-check for songs without lyrics every SECONDS (worker mode)')
+    ap.add_argument('--state', default='', help='JSON file remembering instrumentals/failures (worker mode)')
     args = ap.parse_args()
+    if args.watch:
+        return watch(args)
 
-    api = Api(args.base, os.environ.get('YTP_TOKEN'), os.environ.get('YTP_ADMIN_PASSWORD'))
+    run_once(args, Api(args.base, os.environ.get('YTP_TOKEN'), os.environ.get('YTP_ADMIN_PASSWORD')))
+
+
+def load_state(path):
+    try:
+        with open(path) as f:
+            return json.load(f)
+    except (OSError, ValueError):
+        return {}
+
+
+def save_state(path, state):
+    if not path:
+        return
+    tmp = path + '.tmp'
+    with open(tmp, 'w') as f:
+        json.dump(state, f)
+    os.replace(tmp, path)
+
+
+def watch(args):
+    """Worker mode: poll for saved songs without lyrics and transcribe them one
+    at a time, forever. Runs at low CPU priority; the state file remembers
+    instrumentals (never retried) and failures (retried with backoff)."""
+    try:
+        os.nice(10)
+    except OSError:
+        pass
+    token, password = os.environ.get('YTP_TOKEN'), os.environ.get('YTP_ADMIN_PASSWORD')
+    if not (token or password):
+        print('lyrics worker: no YTP_TOKEN set (LYRICS_WORKER_TOKEN in the server env) — idle', flush=True)
+        while True:
+            time.sleep(3600)
+    args.missing, args.ids, args.overwrite, args.dry_run = True, None, False, False
+    model = None
+    while True:
+        try:
+            api = Api(args.base, token, password)
+            st, r = api.call('GET', '/api/admin/media')
+            if st != 200:
+                raise RuntimeError(f'listing failed ({st}): {r.get("error")}')
+            state = load_state(args.state)
+            now = time.time()
+            todo = [m for m in r['media'] if not m['lyricsLines']
+                    and state.get(m['id'], {}).get('status') != 'instrumental'
+                    and state.get(m['id'], {}).get('retry_at', 0) <= now]
+            if todo:
+                if model is None:
+                    from faster_whisper import WhisperModel
+                    print(f'lyrics worker: loading {args.model}', flush=True)
+                    model = WhisperModel(args.model, device='cpu', compute_type='int8', cpu_threads=args.threads)
+                m = todo[0]  # one song per cycle keeps the worker's footprint small
+                result = transcribe_one(args, api, model, m['id'])
+                entry = state.get(m['id'], {})
+                if result.startswith('instrumental'):
+                    state[m['id']] = {'status': 'instrumental', 'at': now}
+                elif result.startswith('saved') or result.startswith('skip'):
+                    state.pop(m['id'], None)
+                else:
+                    fails = entry.get('fails', 0) + 1
+                    state[m['id']] = {'status': 'failed', 'fails': fails, 'retry_at': now + min(86400, 900 * 2 ** fails), 'error': result[:200]}
+                save_state(args.state, state)
+                print(f'lyrics worker: {m["id"]} ({m.get("title", "")[:60]}): {result}', flush=True)
+                continue  # straight on to the next song
+        except Exception as e:  # never die: the next cycle retries
+            print(f'lyrics worker: {e}', flush=True)
+        time.sleep(args.watch)
+
+
+def run_once(args, api):
     if args.missing:
         st, r = api.call('GET', '/api/admin/media')
         if st != 200:
@@ -137,44 +211,43 @@ def main():
 
     from faster_whisper import WhisperModel  # imported late: listing works without it
     model = WhisperModel(args.model, device='cpu', compute_type='int8', cpu_threads=args.threads)
-    summary = []
-    for vid in todo:
-        st, cur = api.call('GET', f'/api/notes/{vid}')
-        live = (cur or {}).get('lyrics') if st == 200 else None
-        if live and live['data']['lines'] and not args.overwrite:
-            summary.append((vid, 'skip: has lyrics'))
-            continue
-        st, audio = api.call('GET', f'/api/media/{vid}?a=1', raw=True)
-        if st != 200:
-            summary.append((vid, f'no cached audio ({st})'))
-            continue
-        with tempfile.NamedTemporaryFile(suffix='.m4a') as f:
-            f.write(audio)
-            f.flush()
-            t0 = time.time()
-            # vad_filter must stay OFF: it classifies sung music as non-speech
-            # and silently drops the whole song.
-            segs, info = model.transcribe(f.name, language=args.language, word_timestamps=True, vad_filter=False,
-                                          beam_size=5, condition_on_previous_text=False)
-            words = [{'text': w.word.strip(), 'start': w.start, 'end': w.end}
-                     for s in segs for w in (s.words or []) if w.word.strip()]
-            took = time.time() - t0
-        if len(words) < args.min_words:
-            summary.append((vid, f'instrumental? only {len(words)} words — skipped'))
-            continue
-        lines = segment(words)
-        doc = {'lines': lines, 'tags': ['auto-transcribed (whisper)'], 'offset': 0}
-        head = ' / '.join(l['text'] for l in lines[:3])
-        print(f'{vid}: {len(lines)} lines, lang={info.language}, {took:.0f}s for {info.duration:.0f}s audio | {head[:100]}', flush=True)
-        if args.dry_run:
-            print(json.dumps(doc, ensure_ascii=False)[:2000])
-            summary.append((vid, f'dry-run {len(lines)} lines'))
-            continue
-        body = {'data': doc, 'baseRev': live['rev'] if live else 0}
-        st, r = api.call('PUT', f'/api/notes/{vid}/lyrics', body)
-        summary.append((vid, f'saved rev {r.get("rev")}' if st == 200 else f'upload failed {st}: {r.get("error")}'))
+    summary = [(vid, transcribe_one(args, api, model, vid)) for vid in todo]
     print('\n'.join(f'{v}  {s}' for v, s in summary))
 
 
+def transcribe_one(args, api, model, vid):
+    """Transcribe one saved song and upload it. Returns a one-line result."""
+    st, cur = api.call('GET', f'/api/notes/{vid}')
+    live = (cur or {}).get('lyrics') if st == 200 else None
+    if live and live['data']['lines'] and not args.overwrite:
+        return 'skip: has lyrics'
+    st, audio = api.call('GET', f'/api/media/{vid}?a=1', raw=True)
+    if st != 200:
+        return f'no cached audio ({st})'
+    with tempfile.NamedTemporaryFile(suffix='.m4a') as f:
+        f.write(audio)
+        f.flush()
+        t0 = time.time()
+        # vad_filter must stay OFF: it classifies sung music as non-speech
+        # and silently drops the whole song.
+        segs, info = model.transcribe(f.name, language=args.language, word_timestamps=True, vad_filter=False,
+                                      beam_size=5, condition_on_previous_text=False)
+        words = [{'text': w.word.strip(), 'start': w.start, 'end': w.end}
+                 for s in segs for w in (s.words or []) if w.word.strip()]
+        took = time.time() - t0
+    if len(words) < args.min_words:
+        return f'instrumental? only {len(words)} words — skipped'
+    lines = segment(words)
+    doc = {'lines': lines, 'tags': ['auto-transcribed (whisper)'], 'offset': 0}
+    head = ' / '.join(l['text'] for l in lines[:3])
+    print(f'{vid}: {len(lines)} lines, lang={info.language}, {took:.0f}s for {info.duration:.0f}s audio | {head[:100]}', flush=True)
+    if args.dry_run:
+        print(json.dumps(doc, ensure_ascii=False)[:2000])
+        return f'dry-run {len(lines)} lines'
+    body = {'data': doc, 'baseRev': live['rev'] if live else 0}
+    st, r = api.call('PUT', f'/api/notes/{vid}/lyrics', body)
+    return f'saved rev {r.get("rev")}' if st == 200 else f'upload failed {st}: {r.get("error")}'
+
+
 if __name__ == '__main__':
     main()
diff --git a/server/notes.js b/server/notes.js
index 9966078..6cdbc8d 100644
--- a/server/notes.js
+++ b/server/notes.js
@@ -211,7 +211,7 @@ export function verifyAdminCookie(secret, value, nowSec = Math.floor(Date.now()
 
 export function registerNoteRoutes(app, deps) {
   const {
-    db, getProfile, profileNameRe, runYtdlp, adminPassword, backupDir, adminHtmlPath,
+    db, getProfile, profileNameRe, runYtdlp, adminPassword, backupDir, adminHtmlPath, workerToken,
   } = deps;
   const ADMIN_COOKIE = 'ytp_admin';
   const ADMIN_TTL = 30 * 24 * 3600;
@@ -226,6 +226,8 @@ export function registerNoteRoutes(app, deps) {
   async function resolveWriter(c, body) {
     const m = (c.req.header('authorization') || '').match(/^Bearer\s+(\S+)$/i);
     if (m) {
+      // The lyrics-worker container's shared token (env, never stored in the DB).
+      if (workerToken && workerToken.length >= 24 && safeEqual(m[1], workerToken)) return { via: 'api', by: 'api:lyrics-worker' };
       const tok = await db.useApiToken(hashToken(m[1]));
       return tok ? { via: 'api', by: `api:${tok.label}` } : { invalid: true };
     }
diff --git a/server/notes.test.js b/server/notes.test.js
index 520943c..90d491a 100644
--- a/server/notes.test.js
+++ b/server/notes.test.js
@@ -56,6 +56,7 @@ beforeAll(async () => {
     adminPassword: PASSWORD,
     backupDir: join(root, 'backups'),
     adminHtmlPath: htmlPath,
+    workerToken: 'w'.repeat(32),
   });
 });
 
@@ -195,6 +196,13 @@ describe('routes', () => {
     expect((await app.request('/api/admin/media')).status).toBe(401);
     expect((await app.request('/api/admin/media', { headers: auth })).status).toBe(200);
 
+    // The lyrics-worker's env token works without a DB row.
+    const wk = { Authorization: `Bearer ${'w'.repeat(32)}` };
+    expect((await app.request('/api/admin/media', { headers: wk })).status).toBe(200);
+    res = await app.request(`/api/notes/${VID}/chapters`, json('PUT', { data: { items: [{ t: 5, title: 'W' }] }, baseRev: 0, force: true }, wk));
+    expect(res.status).toBe(200);
+    expect((await (await app.request(`/api/notes/${VID}`)).json()).chapters.updatedBy).toBe('api:lyrics-worker');
+
     // Revoked tokens stop working.
     await app.request(`/api/admin/tokens/${created.id}`, { method: 'DELETE', headers: { Cookie: cookie } });
     res = await app.request(`/api/notes/${VID}/lyrics`, json('PUT', { data: { lines: [] }, baseRev: 4 }, auth));
diff --git a/server/package.json b/server/package.json
index a5b10e9..51580bd 100644
--- a/server/package.json
+++ b/server/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "start": "bun server.js",
     "dev": "bun --hot server.js",
-    "test": "bun test --timeout 60000 ./media-cache.test.js && bun test ./notes.test.js && bun test ./remote.test.js"
+    "test": "bun test --timeout 60000 ./media-cache.test.js && bun test ./notes.test.js && bun test ./remote.test.js && bun test ./party.test.js"
   },
   "dependencies": {
     "@hono/node-server": "^1.14.0",
diff --git a/server/party.js b/server/party.js
new file mode 100644
index 0000000..3b11020
--- /dev/null
+++ b/server/party.js
@@ -0,0 +1,170 @@
+/* ============================================================================
+ * party.js — watch party relay: synced playback, text chat, voice signalling
+ *
+ * One host drives playback; guests follow. The server only relays:
+ *   /ws/party?role=host[&code=…&secret=…]&pid=…&name=…   create or resume a party
+ *   /ws/party?role=guest&code=…&pid=…&name=…              join one
+ *
+ * Messages (JSON):
+ *   host → all     {type:'state', state}   (server stamps state.ts = server ms)
+ *   host → all     {type:'settings', allowControl}
+ *   any  → all     {type:'chat', text}      (server adds from/pid/at; ≤ 500 chars)
+ *   any  → all     {type:'voice', on}       (voice-chat presence)
+ *   any  → one     {type:'rtc', to, data}   (WebRTC offer/answer/ICE, relayed)
+ *   guest → host   {type:'cmd', cmd, …}     (only when the host allows control)
+ *   server → you   {type:'hello', code, secret?, you, now, members, state, chat, allowControl}
+ *   server → all   {type:'members', members} · {type:'ended'}
+ * A party survives its host dropping for PARTY_GRACE_MS (a reload, a flaky
+ * link); the host resumes it with the secret it was given.
+ * ========================================================================== */
+
+import { randomBytes, randomInt, timingSafeEqual } from 'node:crypto';
+
+const ALPHABET = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // no 0/O, 1/I
+const PARTY_GRACE_MS = 5 * 60_000;
+const CHAT_KEEP = 60;
+const MAX_MSG = 64 * 1024;
+export const PARTY_COMMANDS = new Set(['toggle', 'play', 'pause', 'seek', 'next', 'prev']);
+
+const clean = (v, max, fallback = '') =>
+  String(v || '').replace(/[\u0000-\u001f\u007f<>]+/g, ' ').trim().slice(0, max) || fallback;
+const same = (a, b) => { const x = Buffer.from(String(a)), y = Buffer.from(String(b)); return x.length === y.length && timingSafeEqual(x, y); };
+
+export function createPartyHub({ now = () => Date.now() } = {}) {
+  const parties = new Map(); // code → party
+  const joinFails = new Map();
+
+  const send = (ws, m) => { try { ws.send(JSON.stringify(m)); } catch { /* gone */ } };
+  const members = (p) => [...p.members.values()].map((m) => ({ pid: m.pid, name: m.name, host: m.pid === p.hostPid, voice: !!m.voice }));
+  const broadcast = (p, m, except) => { for (const x of p.members.values()) if (x.ws !== except) send(x.ws, m); };
+
+  function newCode() {
+    let c;
+    do { c = Array.from({ length: 6 }, () => ALPHABET[randomInt(ALPHABET.length)]).join(''); } while (parties.has(c));
+    return c;
+  }
+
+  const sweeper = setInterval(() => {
+    const t = now();
+    for (const [code, p] of parties) {
+      if (!p.hostOnline && t - p.hostLeftAt > PARTY_GRACE_MS) {
+        broadcast(p, { type: 'ended', reason: 'The host left' });
+        for (const m of p.members.values()) { try { m.ws.close(4010, 'party ended'); } catch { /* gone */ } }
+        parties.delete(code);
+      }
+    }
+  }, 30_000);
+  sweeper.unref?.();
+
+  function upgrade(req, server, ip) {
+    const u = new URL(req.url);
+    const q = (k) => u.searchParams.get(k) || '';
+    const role = q('role');
+    const pid = q('pid');
+    if (!/^[A-Za-z0-9_-]{8,40}$/.test(pid)) return new Response('bad pid', { status: 400 });
+    const name = clean(q('name'), 40, 'Guest');
+    const code = q('code').toUpperCase();
+    if (role === 'guest') {
+      const t = now();
+      const fails = (joinFails.get(ip) || []).filter((x) => t - x < 10 * 60_000);
+      if (fails.length >= 20) return new Response('too many attempts', { status: 429 });
+      if (!parties.has(code)) {
+        fails.push(t); joinFails.set(ip, fails);
+        if (joinFails.size > 5000) joinFails.clear();
+        return new Response('no such party', { status: 404 });
+      }
+    } else if (role !== 'host') {
+      return new Response('unknown role', { status: 400 });
+    }
+    const ok = server.upgrade(req, { data: { hub: 'party', role, pid, name, code, secret: q('secret') } });
+    return ok ? undefined : new Response('upgrade failed', { status: 400 });
+  }
+
+  function open(ws) {
+    const d = ws.data;
+    let p;
+    if (d.role === 'host') {
+      p = d.code && parties.get(d.code);
+      if (p && !same(p.secret, d.secret)) { ws.close(4003, 'not the host of this party'); return; }
+      if (!p) {
+        const code = newCode();
+        p = { code, secret: randomBytes(18).toString('base64url'), hostPid: d.pid, members: new Map(), state: null, chat: [], allowControl: false, hostOnline: true, hostLeftAt: 0 };
+        parties.set(code, p);
+      }
+      p.hostPid = d.pid;
+      p.hostOnline = true;
+      d.code = p.code;
+    } else {
+      p = parties.get(d.code);
+      if (!p) { ws.close(4004, 'no such party'); return; }
+    }
+    const prev = p.members.get(d.pid);
+    if (prev && prev.ws !== ws) { try { prev.ws.close(4000, 'replaced'); } catch { /* gone */ } }
+    p.members.set(d.pid, { ws, pid: d.pid, name: d.name, voice: false, lastChat: 0 });
+    send(ws, {
+      type: 'hello', code: p.code, secret: d.role === 'host' ? p.secret : undefined, you: d.pid,
+      now: now(), members: members(p), state: p.state, chat: p.chat, allowControl: p.allowControl,
+    });
+    broadcast(p, { type: 'members', members: members(p), joined: d.name }, ws);
+  }
+
+  function message(ws, raw) {
+    if (typeof raw !== 'string' || raw.length > MAX_MSG) return;
+    let m;
+    try { m = JSON.parse(raw); } catch { return; }
+    const d = ws.data;
+    const p = parties.get(d.code);
+    const me = p && p.members.get(d.pid);
+    if (!me || me.ws !== ws || !m || typeof m !== 'object') return;
+    const isHost = d.pid === p.hostPid;
+    if (m.type === 'state' && isHost) {
+      p.state = { ...(m.state || {}), ts: now() };
+      broadcast(p, { type: 'state', state: p.state }, ws);
+    } else if (m.type === 'settings' && isHost) {
+      p.allowControl = !!m.allowControl;
+      broadcast(p, { type: 'settings', allowControl: p.allowControl });
+    } else if (m.type === 'chat') {
+      const t = now();
+      if (t - me.lastChat < 400) return; // flood guard
+      me.lastChat = t;
+      const text = clean(m.text, 500);
+      if (!text) return;
+      const msg = { from: me.name, pid: me.pid, text, at: t };
+      p.chat.push(msg);
+      if (p.chat.length > CHAT_KEEP) p.chat.shift();
+      broadcast(p, { type: 'chat', msg });
+    } else if (m.type === 'voice') {
+      me.voice = !!m.on;
+      broadcast(p, { type: 'members', members: members(p) });
+    } else if (m.type === 'rtc' && typeof m.to === 'string') {
+      const target = p.members.get(m.to);
+      if (target) send(target.ws, { type: 'rtc', from: me.pid, data: m.data });
+    } else if (m.type === 'cmd' && !isHost && p.allowControl && PARTY_COMMANDS.has(m.cmd)) {
+      const host = p.members.get(p.hostPid);
+      const { type, ...args } = m;
+      if (host) send(host.ws, { type: 'cmd', from: me.name, ...args });
+    } else if (m.type === 'end' && isHost) {
+      broadcast(p, { type: 'ended', reason: 'The host ended the party' });
+      for (const x of p.members.values()) { try { x.ws.close(4010, 'party ended'); } catch { /* gone */ } }
+      parties.delete(p.code);
+    }
+  }
+
+  function close(ws) {
+    const d = ws.data;
+    const p = parties.get(d.code);
+    if (!p) return;
+    const me = p.members.get(d.pid);
+    if (!me || me.ws !== ws) return;
+    p.members.delete(d.pid);
+    if (d.pid === p.hostPid) { p.hostOnline = false; p.hostLeftAt = now(); }
+    broadcast(p, { type: 'members', members: members(p), left: d.name, hostAway: !p.hostOnline });
+  }
+
+  return {
+    upgrade,
+    websocket: { maxPayloadLength: MAX_MSG, idleTimeout: 120, open, message: (ws, msg) => message(ws, typeof msg === 'string' ? msg : Buffer.from(msg).toString('utf8')), close },
+    _parties: parties,
+    stop() { clearInterval(sweeper); },
+  };
+}
diff --git a/server/party.test.js b/server/party.test.js
new file mode 100644
index 0000000..6e24ba8
--- /dev/null
+++ b/server/party.test.js
@@ -0,0 +1,117 @@
+// Watch-party relay: real Bun server + real WebSocket clients.
+import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
+import { createPartyHub } from './party.js';
+
+let hub, server, base;
+beforeAll(() => {
+  hub = createPartyHub();
+  server = Bun.serve({
+    port: 0,
+    fetch(req, srv) {
+      if (new URL(req.url).pathname === '/ws/party') return hub.upgrade(req, srv, '203.0.113.9');
+      return new Response('nope', { status: 404 });
+    },
+    websocket: hub.websocket,
+  });
+  base = `localhost:${server.port}`;
+});
+afterAll(() => { server.stop(true); hub.stop(); });
+
+function client(query) {
+  const ws = new WebSocket(`ws://${base}/ws/party?${new URLSearchParams(query)}`);
+  const inbox = [], waiters = [];
+  ws.onmessage = (e) => {
+    const m = JSON.parse(e.data);
+    const i = waiters.findIndex((w) => w.type === m.type);
+    if (i >= 0) waiters.splice(i, 1)[0].resolve(m); else inbox.push(m);
+  };
+  const closed = new Promise((r) => { ws.onclose = (e) => r(e.code); });
+  const errored = new Promise((r) => { ws.onerror = () => r(true); });
+  return {
+    ws, closed, errored,
+    send: (m) => ws.send(JSON.stringify(m)),
+    next(type, ms = 2000) {
+      const i = inbox.findIndex((m) => m.type === type);
+      if (i >= 0) return Promise.resolve(inbox.splice(i, 1)[0]);
+      return new Promise((resolve, reject) => {
+        const w = { type, resolve };
+        waiters.push(w);
+        setTimeout(() => { const k = waiters.indexOf(w); if (k >= 0) { waiters.splice(k, 1); reject(new Error('timeout ' + type)); } }, ms);
+      });
+    },
+    drain(type) { for (let i = inbox.length - 1; i >= 0; i--) if (inbox[i].type === type) inbox.splice(i, 1); },
+  };
+}
+
+describe('watch party', () => {
+  let host, guest, code, secret;
+
+  test('host creates a party with a 6-char code', async () => {
+    host = client({ role: 'host', pid: 'hostpid0001', name: 'Josh' });
+    const hello = await host.next('hello');
+    expect(hello.code).toMatch(/^[A-HJ-NP-Z2-9]{6}$/);
+    expect(hello.secret.length).toBeGreaterThan(10);
+    code = hello.code; secret = hello.secret;
+  });
+
+  test('unknown code is refused; guest joins and gets the state + chat history', async () => {
+    const bad = client({ role: 'guest', pid: 'guestpid9999', name: 'X', code: 'ZZZZZZ' });
+    expect(await Promise.race([bad.errored, bad.closed.then(() => true)])).toBe(true);
+    host.send({ type: 'state', state: { v: { id: 'rXFZsRhdT78', title: 'As the Deer' }, cur: 12, paused: false, rate: 1 } });
+    host.send({ type: 'chat', text: 'welcome!' });
+    await new Promise((r) => setTimeout(r, 100));
+    guest = client({ role: 'guest', pid: 'guestpid0001', name: 'Rex', code: code.toLowerCase() });
+    const hello = await guest.next('hello');
+    expect(hello.state.v.id).toBe('rXFZsRhdT78');
+    expect(typeof hello.state.ts).toBe('number');
+    expect(hello.chat.map((c) => c.text)).toEqual(['welcome!']);
+    expect(hello.members.map((m) => m.name).sort()).toEqual(['Josh', 'Rex']);
+    expect(hello.secret).toBeUndefined();
+    const m = await host.next('members');
+    expect(m.joined).toBe('Rex');
+  });
+
+  test('state, chat (flood-guarded), voice presence and targeted rtc relay', async () => {
+    host.send({ type: 'state', state: { v: { id: 'x' }, cur: 30, paused: true } });
+    expect((await guest.next('state')).state.cur).toBe(30);
+    host.drain('chat'); // its own "welcome!" echo
+    guest.send({ type: 'chat', text: 'hi <b>all</b>' });
+    guest.send({ type: 'chat', text: 'spam' }); // < 400 ms later → dropped
+    const c = await host.next('chat');
+    expect(c.msg).toMatchObject({ from: 'Rex', text: 'hi  b all /b' });
+    await expect(host.next('chat', 300)).rejects.toThrow();
+    guest.send({ type: 'voice', on: true });
+    const mem = await host.next('members');
+    expect(mem.members.find((x) => x.name === 'Rex').voice).toBe(true);
+    guest.send({ type: 'rtc', to: 'hostpid0001', data: { sdp: 'offer' } });
+    expect(await host.next('rtc')).toEqual({ type: 'rtc', from: 'guestpid0001', data: { sdp: 'offer' } });
+  });
+
+  test('guest commands reach the host only when control is allowed', async () => {
+    guest.send({ type: 'cmd', cmd: 'toggle' });
+    await expect(host.next('cmd', 300)).rejects.toThrow();
+    host.send({ type: 'settings', allowControl: true });
+    expect((await guest.next('settings')).allowControl).toBe(true);
+    guest.send({ type: 'cmd', cmd: 'seek', t: 50 });
+    guest.send({ type: 'cmd', cmd: 'rm' });
+    const cmd = await host.next('cmd');
+    expect(cmd).toMatchObject({ cmd: 'seek', t: 50, from: 'Rex' });
+  });
+
+  test('host drops and resumes with its secret; a stranger cannot take over', async () => {
+    guest.drain('members');
+    host.ws.close();
+    const away = await guest.next('members');
+    expect(away.hostAway).toBe(true);
+    const thief = client({ role: 'host', pid: 'thief000001', name: 'T', code, secret: 'wrong' });
+    expect(await thief.closed).toBe(4003);
+    host = client({ role: 'host', pid: 'hostpid0001', name: 'Josh', code, secret });
+    expect((await host.next('hello')).code).toBe(code);
+  });
+
+  test('host ends the party', async () => {
+    host.send({ type: 'end' });
+    expect((await guest.next('ended')).reason).toContain('ended');
+    expect(await guest.closed).toBe(4010);
+  });
+});
diff --git a/server/server.js b/server/server.js
index 0a7c461..5de907f 100644
--- a/server/server.js
+++ b/server/server.js
@@ -13,6 +13,8 @@
  *   GET  /api/download/:videoId        server-cached copy (fetched by a background job) → binary
  *   GET  /api/media/:id?g=<gen>[&a=1]  Range-aware server-cached mp4 (or m4a audio sidecar)
  *   GET  /api/media/:id/peaks          loudness envelope (400 buckets, 0..100) for the waveform seek bar
+ *   GET  /api/media/:id/gif?t=&d=&w=   short looping GIF of a moment (timestamp sharing)
+ *   GET  /api/media/:id/clip?start=&end=&fmt=mp3|m4r  soundbite / iPhone ringtone
  *   GET  /api/media/:id/status         { status, size, height, optimized, error }
  *   POST /api/media/:id/redownload     "Broken" button: drop the copy, fetch it again
  *   GET  /api/media/stats              cache totals, budget, free disk, queue
@@ -43,6 +45,7 @@ import { createMediaCache, HIGH, LOW } from './media-cache.js';
 import * as notesDb from './db.js';
 import { registerNoteRoutes } from './notes.js';
 import { createRemoteHub } from './remote.js';
+import { createPartyHub } from './party.js';
 import QRCode from 'qrcode';
 import { dirname, join as pathJoin } from 'node:path';
 
@@ -1120,6 +1123,103 @@ app.get('/api/media/:id/peaks', async (c) => {
   return c.json({ ok: true, ...hit }, 200, { 'Cache-Control': 'public, max-age=3600' });
 });
 
+// GET /api/media/:id/gif?t=<sec>&d=<sec>&w=<px> — a short looping GIF of an
+// exact moment, cut from the server-cached copy (timestamp sharing). Palette
+// is generated per clip (palettegen/paletteuse) so it stays small and clean.
+const gifCache = new Map();
+let gifRunning = 0;
+app.get('/api/media/:id/gif', async (c) => {
+  const id = c.req.param('id');
+  if (!/^[A-Za-z0-9_-]{11}$/.test(id)) return c.json({ ok: false, error: 'invalid id' }, 400);
+  const t = Math.max(0, Number(c.req.query('t')) || 0);
+  const d = Math.min(6, Math.max(1, Number(c.req.query('d')) || 3));
+  const w = Math.min(640, Math.max(240, Math.round((Number(c.req.query('w')) || 480) / 2) * 2));
+  const path = await media.filePath(id, null, 'mp4');
+  if (!path) return c.json({ ok: false, error: 'this video is not cached on the server yet — play it once, then try again' }, 404);
+  const key = `${path}|${t.toFixed(1)}|${d}|${w}`;
+  let gif = gifCache.get(key);
+  if (!gif) {
+    if (gifRunning >= 2) return c.json({ ok: false, error: 'busy — try again in a moment' }, 503);
+    gifRunning++;
+    try {
+      gif = await new Promise((resolve, reject) => {
+        const child = spawn(FFMPEG, ['-v', 'error', '-ss', t.toFixed(2), '-t', String(d), '-i', path, '-an',
+          '-vf', `fps=12,scale=${w}:-2:flags=lanczos,split[a][b];[a]palettegen=max_colors=128:stats_mode=diff[p];[b][p]paletteuse=dither=bayer:bayer_scale=4`,
+          '-loop', '0', '-f', 'gif', 'pipe:1'], { stdio: ['ignore', 'pipe', 'pipe'] });
+        const chunks = [];
+        let err = '';
+        child.stdout.on('data', (b) => chunks.push(b));
+        child.stderr.on('data', (b) => { err = (err + b).slice(-1500); });
+        child.on('error', reject);
+        child.on('close', (code) => {
+          const buf = Buffer.concat(chunks);
+          if (code !== 0 || buf.length < 100) reject(new Error(err.trim() || 'could not make the GIF'));
+          else resolve(buf);
+        });
+      });
+    } catch (err) {
+      return c.json({ ok: false, error: err.message }, 500);
+    } finally {
+      gifRunning--;
+    }
+    gifCache.set(key, gif);
+    if (gifCache.size > 40) gifCache.delete(gifCache.keys().next().value);
+  }
+  return c.body(gif, 200, {
+    'Content-Type': 'image/gif',
+    'Cache-Control': 'public, max-age=86400',
+    'Content-Disposition': `inline; filename="${id}-${Math.floor(t)}s.gif"`,
+  });
+});
+
+// GET /api/media/:id/clip?start=&end=&fmt=mp3|m4r — a soundbite of the
+// server-cached audio with short fades: MP3 (≤ 60 s) or an iPhone ringtone
+// (.m4r = AAC in an iPod MP4 container, ≤ 40 s — Apple's ringtone limit).
+app.get('/api/media/:id/clip', async (c) => {
+  const id = c.req.param('id');
+  if (!/^[A-Za-z0-9_-]{11}$/.test(id)) return c.json({ ok: false, error: 'invalid id' }, 400);
+  const fmt = c.req.query('fmt') === 'm4r' ? 'm4r' : 'mp3';
+  const start = Math.max(0, Number(c.req.query('start')) || 0);
+  const maxLen = fmt === 'm4r' ? 40 : 60;
+  const len = Math.min(maxLen, Math.max(1, (Number(c.req.query('end')) || start + 20) - start));
+  const path = (await media.filePath(id, null, 'm4a')) || (await media.filePath(id, null, 'mp4'));
+  if (!path) return c.json({ ok: false, error: 'this video is not cached on the server yet — play it once, then try again' }, 404);
+  const fade = Math.min(0.5, len / 4);
+  const af = `afade=t=in:st=0:d=${fade},afade=t=out:st=${(len - fade).toFixed(2)}:d=${fade}`;
+  const args = ['-v', 'error', '-ss', start.toFixed(2), '-t', len.toFixed(2), '-i', path, '-vn', '-af', af];
+  // A ringtone must be a regular (non-fragmented) MP4 for iPhone imports,
+  // which needs a seekable output — so .m4r goes through a temp file.
+  const tmpOut = fmt === 'm4r' ? `${tmpdir()}/ytp-clip-${id}-${Date.now()}-${Math.random().toString(36).slice(2)}.m4r` : null;
+  if (fmt === 'mp3') args.push('-c:a', 'libmp3lame', '-b:a', '192k', '-f', 'mp3', 'pipe:1');
+  else args.push('-c:a', 'aac', '-b:a', '192k', '-movflags', '+faststart', '-f', 'ipod', '-y', tmpOut);
+  try {
+    const buf = await new Promise((resolve, reject) => {
+      const child = spawn(FFMPEG, args, { stdio: ['ignore', 'pipe', 'pipe'] });
+      const chunks = [];
+      let err = '';
+      child.stdout.on('data', (b) => chunks.push(b));
+      child.stderr.on('data', (b) => { err = (err + b).slice(-1500); });
+      child.on('error', reject);
+      child.on('close', (code) => {
+        let out = Buffer.concat(chunks);
+        if (tmpOut) {
+          try { out = readFileSync(tmpOut); } catch { out = Buffer.alloc(0); }
+          try { unlinkSync(tmpOut); } catch { /* gone */ }
+        }
+        if (code !== 0 || out.length < 200) reject(new Error(err.trim() || 'could not cut the soundbite'));
+        else resolve(out);
+      });
+    });
+    return c.body(buf, 200, {
+      'Content-Type': fmt === 'mp3' ? 'audio/mpeg' : 'audio/mp4',
+      'Content-Disposition': `attachment; filename="${id}-${Math.floor(start)}s.${fmt}"`,
+      'Cache-Control': 'public, max-age=86400',
+    });
+  } catch (err) {
+    return c.json({ ok: false, error: err.message }, 500);
+  }
+});
+
 app.get('/api/media/:id/status', async (c) => {
   try {
     return c.json({ ok: true, ...(await media.status(c.req.param('id'))) }, 200, { 'Cache-Control': 'no-store' });
@@ -1617,6 +1717,18 @@ app.get('/api/user/data', async (c) => {
 // Phone remote for a desktop instance — see remote.js
 // ============================================================================
 const remote = createRemoteHub({ requireSameNetwork: process.env.REMOTE_SAME_NETWORK === '1' });
+const party = createPartyHub();
+
+// Bun allows ONE websocket handler per server: party sockets are tagged
+// (ws.data.hub === 'party'), everything else belongs to the remote relay.
+const pickHub = (ws) => (ws.data && ws.data.hub === 'party' ? party.websocket : remote.websocket);
+const websocketHandler = {
+  maxPayloadLength: 256 * 1024,
+  idleTimeout: 120,
+  open: (ws) => pickHub(ws).open(ws),
+  message: (ws, msg) => pickHub(ws).message(ws, msg),
+  close: (ws, code, reason) => pickHub(ws).close(ws, code, reason),
+};
 
 // The public IP a request came from. Behind Traefik that is the first
 // X-Forwarded-For hop; locally, the socket address.
@@ -1640,7 +1752,9 @@ app.get('/api/remote/qr/:code', async (c) => {
   if (!/^\d{6}$/.test(code)) return c.text('bad code', 400);
   const proto = c.req.header('x-forwarded-proto') || new URL(c.req.url).protocol.replace(':', '');
   const host = c.req.header('x-forwarded-host') || c.req.header('host') || new URL(c.req.url).host;
-  const svg = await QRCode.toString(`${proto}://${host}/?pair=${code}`, { type: 'svg', margin: 1, errorCorrectionLevel: 'M' });
+  // ?kind=present → the presenter-screen link instead of the phone-remote one.
+  const param = c.req.query('kind') === 'present' ? 'present' : 'pair';
+  const svg = await QRCode.toString(`${proto}://${host}/?${param}=${code}`, { type: 'svg', margin: 1, errorCorrectionLevel: 'M' });
   return c.body(svg, 200, { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'no-store' });
 });
 
@@ -1655,6 +1769,7 @@ const notes = registerNoteRoutes(app, {
   adminPassword: process.env.ADMIN_PASSWORD || '',
   backupDir: pathJoin(dirname(process.env.DB_PATH || './data/ytplayer.db'), 'backups'),
   adminHtmlPath: './public/admin.html',
+  workerToken: process.env.LYRICS_WORKER_TOKEN || '',
 });
 
 // ============================================================================
@@ -1734,10 +1849,12 @@ async function main() {
     port: PORT,
     // /ws/remote is upgraded here, before Hono — see remote.js.
     fetch(req, server) {
-      if (new URL(req.url).pathname === '/ws/remote') return remote.upgrade(req, server, clientIpOf(req, server));
+      const path = new URL(req.url).pathname;
+      if (path === '/ws/remote') return remote.upgrade(req, server, clientIpOf(req, server));
+      if (path === '/ws/party') return party.upgrade(req, server, clientIpOf(req, server));
       return app.fetch(req, server);
     },
-    websocket: remote.websocket,
+    websocket: websocketHandler,
     // Default is 10s, which killed /api/download proxy streams whenever the
     // connection went idle mid-transfer. 240s then killed every save whose
     // server-side yt-dlp phase (no bytes sent yet) ran longer than 4 min —