Redesign service-mode controls and add per-profile wrong-lyric-line reports

frontend/app.js

@@ -3306,7 +3306,8 @@ const Notes = (() => {
   // The sung line sits in the middle of the screen at the largest size that
   // still fits on ONE row (measured per line with a canvas), highlighted; its
   // neighbours shrink and fade with distance. Auto-scroll keeps it centred.
-  const sv = { key: '', idx: -2, timer: null };
+  const sv = { key: '', idx: -2, timer: null, flags: new Map(), flagsKey: '', flagMode: false, pressed: 0 };
+  const flagsEnabled = () => data.settings.lyricFlags !== false && !!window.FlagUI;
   const serviceOn = () => isServiceModeOpen() && !!data.settings.serviceLyrics;
   const serviceAuto = () => data.settings.serviceLyricsAutoscroll !== false;
   const sungLines = () => lines().map((l, i) => ({ ...l, i })).filter((l) => l.kind === 'line');
@@ -3324,13 +3325,18 @@ const Notes = (() => {
   function renderServiceButtons() {
     const on = !!data.settings.serviceLyrics;
     const lb = $('serviceLyricsBtn');
-    lb.textContent = on ? '🎵 Lyrics on' : '🎵 Lyrics off';
-    lb.classList.toggle('on', on);
     lb.setAttribute('aria-pressed', String(on));
+    const fb = $('serviceFlagBtn');
+    if (fb) {
+      const show = on && flagsEnabled();
+      fb.classList.toggle('hidden', !show);
+      if (!show) sv.flagMode = false;
+      fb.setAttribute('aria-pressed', String(sv.flagMode));
+      $('serviceFlagHint').classList.toggle('hidden', !(show && sv.flagMode));
+      $('serviceLyrics').classList.toggle('flagging', show && sv.flagMode);
+    }
     const ab = $('serviceAutoscrollBtn');
     ab.classList.toggle('hidden', !on);
-    ab.textContent = serviceAuto() ? '⇅ Auto-scroll on' : '⇅ Auto-scroll off';
-    ab.classList.toggle('on', serviceAuto());
     ab.setAttribute('aria-pressed', String(serviceAuto()));
   }
 
@@ -3357,6 +3363,8 @@ const Notes = (() => {
     }
     list.innerHTML = items.map((l) =>
       `<div class="sl-line${l.t === null || l.t === undefined ? ' untimed' : ''}" data-i="${l.i}">${escapeHtml(l.text)}</div>`).join('');
+    paintFlags();
+    loadFlags();
     applyFits();
     tickService(now(), true);
     // One more fit once the view has settled (fonts, first layout).
@@ -3364,6 +3372,42 @@ const Notes = (() => {
     sv.refit = setTimeout(() => { if (serviceOn()) applyFits(); }, 900);
   }
 
+  // ---- reporting wrong lines (per-profile setting: settings.lyricFlags) ----
+  function paintFlags() {
+    const list = $('serviceLyricsList');
+    if (!list) return;
+    list.querySelectorAll('.sl-line').forEach((el) => {
+      const l = lines()[Number(el.dataset.i)];
+      const f = flagsEnabled() && l ? sv.flags.get(l.text) : null;
+      el.classList.toggle('flagged', !!f);
+      el.classList.toggle('mine', !!(f && f.mine));
+      if (f) el.dataset.n = f.count > 1 ? String(f.count) : ''; else delete el.dataset.n;
+    });
+  }
+  async function loadFlags() {
+    if (!flagsEnabled() || !st.videoId || !st.lyrics) return;
+    const key = `${st.videoId}|${st.lyrics.rev}|${profileName()}`;
+    if (key === sv.flagsKey) return;
+    sv.flagsKey = key;
+    const vid = st.videoId;
+    const got = await FlagUI.list(vid, profileName());
+    if (vid !== st.videoId) return; // moved on while the request was out
+    sv.flags = new Map(got.map((f) => [f.text, f]));
+    paintFlags();
+  }
+  async function openFlag(row) {
+    const l = row && lines()[Number(row.dataset.i)];
+    if (!l || !st.videoId) return;
+    if (!requireProfile()) return;
+    const vid = st.videoId;
+    const res = await FlagUI.open({ videoId: vid, text: l.text, existing: sv.flags.get(l.text), profile: profileName() });
+    if (!res) return;
+    sv.flagsKey = ''; // force a refresh from the server (counts, ids)
+    if (vid === st.videoId) await loadFlags();
+    toast(res.action === 'withdrawn' ? 'Report withdrawn' : 'Thanks — reported ✓');
+    if (res.action === 'saved') { sv.flagMode = false; renderServiceButtons(); }
+  }
+
   function centreOn(list, el) {
     const go = () => list.scrollTo({ top: Math.max(0, el.offsetTop - list.clientHeight / 2 + el.offsetHeight / 2), behavior: 'smooth' });
     go();
@@ -3502,11 +3546,35 @@ const Notes = (() => {
     renderServiceButtons();
     if (serviceAuto()) tickService(now(), true);
   });
-  $('serviceLyricsList').addEventListener('click', (e) => {
+  $('serviceFlagBtn').addEventListener('click', () => {
-    const row = e.target.closest('.sl-line');
+    sv.flagMode = !sv.flagMode;
-    const l = row && lines()[Number(row.dataset.i)];
+    renderServiceButtons();
-    if (l && l.t !== null && l.t !== undefined) Player.seek(Math.max(0, l.t + offset()));
   });
+  {
+    // Tap = seek (or report, in report mode). Holding a line reports it too, so
+    // it works without switching modes.
+    const list = $('serviceLyricsList');
+    let timer = null, sx = 0, sy = 0;
+    const cancel = () => { clearTimeout(timer); timer = null; };
+    list.addEventListener('pointerdown', (e) => {
+      if (!flagsEnabled() || !e.target.closest('.sl-line')) return;
+      sx = e.clientX; sy = e.clientY;
+      const row = e.target.closest('.sl-line');
+      cancel();
+      timer = setTimeout(() => { timer = null; sv.pressed = Date.now(); if (navigator.vibrate) navigator.vibrate(12); openFlag(row); }, 550);
+    });
+    list.addEventListener('pointermove', (e) => { if (timer && Math.hypot(e.clientX - sx, e.clientY - sy) > 8) cancel(); });
+    ['pointerup', 'pointercancel', 'pointerleave', 'scroll'].forEach((t) => list.addEventListener(t, cancel, { passive: true }));
+    list.addEventListener('contextmenu', (e) => { if (flagsEnabled()) e.preventDefault(); });
+    list.addEventListener('click', (e) => {
+      if (Date.now() - sv.pressed < 700) return; // that was the long-press
+      const row = e.target.closest('.sl-line');
+      if (!row) return;
+      if (sv.flagMode) { openFlag(row); return; }
+      const l = lines()[Number(row.dataset.i)];
+      if (l && l.t !== null && l.t !== undefined) Player.seek(Math.max(0, l.t + offset()));
+    });
+  }
   window.addEventListener('resize', () => { if (serviceOn()) renderService(); });
   // Sizes are measured with the web font; a measurement taken while it was
   // still loading used the narrower fallback, so re-fit once fonts land.
@@ -3658,7 +3726,7 @@ const Notes = (() => {
   });
 
   return {
-    load, tick, addBookmark, addNote, handleSyncKey, serviceRefresh,
+    load, tick, addBookmark, addNote, handleSyncKey, serviceRefresh, refreshFlags: () => { sv.flagsKey = ''; renderServiceButtons(); paintFlags(); loadFlags(); },
     stageLyrics: { render: renderStage, set: setStageLyrics, on: stageOn },
   };
 })();
@@ -6732,7 +6800,7 @@ function updateWakeStateUI() {
   const el = $('serviceWakeState');
   if (!el) return;
   const isAwake = !!(serviceWakeLock && !serviceWakeLock.released);
-  el.textContent = isAwake ? 'Screen will stay awake' : 'Screen may sleep';
+  el.textContent = isAwake ? 'Screen stays awake' : 'Screen may sleep';
   el.classList.toggle('awake', isAwake);
 }
 
@@ -6752,6 +6820,8 @@ function updateServiceProgress(cur, dur) {
   const durEl = $('serviceDurTime');
   if (curEl) curEl.textContent = fmtTime(cur || 0);
   if (durEl) durEl.textContent = fmtTime(dur || 0);
+  const fill = $('serviceProgressFill');
+  if (fill) fill.style.width = (dur > 0 ? Math.min(100, Math.max(0, (cur || 0) / dur * 100)) : 0).toFixed(1) + '%';
 }
 
 function updateServiceMode() {
@@ -6830,9 +6900,7 @@ function updateServiceVideoUI() {
   applyServiceVideoLayout();
   const btn = $('serviceVideoBtn');
   if (btn) {
-    btn.textContent = serviceVideoOn() ? '📺 Video on' : '📺 Video off';
     btn.setAttribute('aria-pressed', serviceVideoOn() ? 'true' : 'false');
-    btn.classList.toggle('on', serviceVideoOn());
   }
 }
 
@@ -7543,6 +7611,13 @@ async function renderSettings() {
         </span>
         <input id="setSaveBeforePlay" type="checkbox" ${data.settings.saveBeforePlay ? 'checked' : ''} />
       </label>
+      <label class="set-row">
+        <span>
+          Report wrong lyric lines
+          <small>Service mode → Lyrics shows a Report button, and holding a line reports it. Saved with your online profile, so it follows you between devices.</small>
+        </span>
+        <input id="setLyricFlags" type="checkbox" ${data.settings.lyricFlags !== false ? 'checked' : ''} />
+      </label>
     </div>
 
     <div class="set-group">
@@ -7737,6 +7812,11 @@ async function renderSettings() {
     data.settings.saveBeforePlay = e.target.checked;
     persist();
   });
+  $('setLyricFlags').addEventListener('change', (e) => {
+    data.settings.lyricFlags = e.target.checked;
+    persist();
+    Notes.refreshFlags();
+  });
   $('setAutoPreload').addEventListener('change', (e) => {
     data.settings.autoPreload = e.target.checked;
     persist();

frontend/flag-ui.js

@@ -0,0 +1,120 @@
+/* Report-a-wrong-lyric-line: API client + bottom sheet. No dependencies.
+ * window.FlagUI.open({videoId, text, existing, profile}) -> Promise<result|null>
+ *   result = {action:'saved'|'withdrawn', id?, reason, note}
+ * Descriptions are optional; a bare report is valid. */
+(function () {
+  'use strict';
+  const REASONS = [
+    ['words', 'Wrong words'], ['timing', 'Wrong timing'],
+    ['typo', 'Typo'], ['other', 'Other'],
+  ];
+  const NOTE_MAX = 500;
+  const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const base = (id) => `/api/notes/${encodeURIComponent(id)}/flags`;
+  const jpost = (url, body) => fetch(url, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body),
+  });
+
+  async function list(videoId, profile) {
+    try {
+      const r = await fetch(base(videoId), { headers: profile ? { 'X-Profile': profile } : {} });
+      if (!r.ok) return [];
+      const j = await r.json();
+      return Array.isArray(j.flags) ? j.flags : [];
+    } catch { return []; }
+  }
+  async function submit(videoId, profile, text, reason, note) {
+    const r = await jpost(base(videoId), { profile, text, reason, note });
+    const j = await r.json().catch(() => ({}));
+    return { status: r.status, ...j };
+  }
+  async function withdraw(videoId, profile, id) {
+    const r = await jpost(`${base(videoId)}/${id}/withdraw`, { profile });
+    return r.ok;
+  }
+
+  const ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>';
+
+  function open({ videoId, text, existing, profile }) {
+    return new Promise((resolve) => {
+      const mine = existing && existing.mine ? existing : null;
+      const others = existing ? Math.max(0, (existing.count || 0) - (mine ? 1 : 0)) : 0;
+      let reason = mine ? mine.reason || '' : '';
+      const back = document.createElement('div');
+      back.className = 'fs-backdrop';
+      back.innerHTML = `
+        <div class="fs-sheet" role="dialog" aria-modal="true" aria-label="Report a wrong line">
+          <div class="fs-grab"></div>
+          <div class="fs-title">
+            <span class="fs-badge">${ICON}</span>
+            <div><h2>${mine ? 'Your report' : 'Report this line'}</h2>
+              <small>Helps whoever maintains the lyrics find mistakes</small></div>
+            <button class="fs-x" type="button" aria-label="Close">✕</button>
+          </div>
+          <blockquote class="fs-quote">${esc(text)}</blockquote>
+          ${others ? `<div class="fs-notice info">${others} other ${others === 1 ? 'person has' : 'people have'} reported this line too.</div>` : ''}
+          <div class="fs-label">What’s wrong? <em>optional</em></div>
+          <div class="fs-chips">${REASONS.map(([k, l]) => `<button type="button" class="fs-chip" data-r="${k}" aria-pressed="${reason === k}">${l}</button>`).join('')}</div>
+          <div class="fs-label">Describe it <em>optional</em></div>
+          <textarea class="fs-note" maxlength="${NOTE_MAX}" placeholder="e.g. it should say “sound”, not “sownd”"></textarea>
+          <div class="fs-count"><span class="fs-n">0</span>/${NOTE_MAX}</div>
+          <div class="fs-err fs-notice err" hidden></div>
+          <div class="fs-actions ${mine ? 'three' : ''}">
+            <button type="button" class="fs-btn fs-cancel">Cancel</button>
+            ${mine ? '<button type="button" class="fs-btn danger fs-withdraw">Withdraw</button>' : ''}
+            <button type="button" class="fs-btn primary fs-send">${mine ? 'Update report' : 'Send report'}</button>
+          </div>
+        </div>`;
+      const $ = (s) => back.querySelector(s);
+      const ta = $('.fs-note');
+      ta.value = mine ? mine.note || '' : '';
+      const count = () => { $('.fs-n').textContent = ta.value.length; };
+      count();
+      ta.addEventListener('input', count);
+      const prevFocus = document.activeElement;
+      let done = false;
+      const close = (val) => {
+        if (done) return;
+        done = true;
+        document.removeEventListener('keydown', onKey, true);
+        back.classList.add('closing');
+        setTimeout(() => { back.remove(); if (prevFocus && prevFocus.focus) try { prevFocus.focus(); } catch {} }, 190);
+        resolve(val);
+      };
+      const onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); close(null); } };
+      document.addEventListener('keydown', onKey, true);
+      back.addEventListener('click', (e) => { if (e.target === back) close(null); });
+      $('.fs-x').onclick = $('.fs-cancel').onclick = () => close(null);
+      back.querySelectorAll('.fs-chip').forEach((b) => b.addEventListener('click', () => {
+        reason = reason === b.dataset.r ? '' : b.dataset.r; // tap again to clear
+        back.querySelectorAll('.fs-chip').forEach((c) => c.setAttribute('aria-pressed', String(c.dataset.r === reason)));
+      }));
+      const fail = (msg) => { const e = $('.fs-err'); e.textContent = msg; e.hidden = false; };
+      const busy = (on) => back.querySelectorAll('.fs-btn').forEach((b) => { b.disabled = on; });
+      $('.fs-send').onclick = async () => {
+        busy(true);
+        try {
+          const r = await submit(videoId, profile, text, reason, ta.value.trim());
+          if (r.ok) return close({ action: 'saved', id: r.id, reason, note: ta.value.trim() });
+          busy(false);
+          fail(r.stale ? 'This line was just changed — it may already be fixed.'
+            : r.status === 401 ? 'Link an online profile to report lines.'
+            : r.status === 429 ? 'Slow down a little — too many reports.' : (r.error || 'Could not send the report.'));
+        } catch { busy(false); fail('You appear to be offline.'); }
+      };
+      const w = $('.fs-withdraw');
+      if (w) w.onclick = async () => {
+        busy(true);
+        try {
+          if (await withdraw(videoId, profile, mine.id)) return close({ action: 'withdrawn' });
+        } catch {}
+        busy(false); fail('Could not withdraw — try again.');
+      };
+      document.body.appendChild(back);
+      setTimeout(() => ta.blur(), 0);
+      $('.fs-send').focus();
+    });
+  }
+
+  window.FlagUI = { open, list, submit, withdraw, REASONS };
+})();

frontend/index.html

@@ -21,6 +21,7 @@
     <link rel="preload" href="fonts/HankenGrotesk-latin.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="stylesheet" href="fonts/fonts.css" />
     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="service-ui.css" />
   </head>
   <body>
     <div class="app">
@@ -358,16 +359,34 @@
     <nav id="sectionRail" class="sec-rail hidden" aria-label="Jump to a section"></nav>
 
     <section id="serviceMode" class="service-mode hidden" aria-label="Service Mode">
-      <div class="service-topbar">
+      <div class="svc-top">
-        <div id="serviceWakeState" class="service-wake-state">Screen may sleep</div>
+        <div class="svc-head">
-        <div class="service-topbar-actions">
+          <div id="serviceWakeState" class="svc-wake" role="status">Screen may sleep</div>
-          <button id="serviceAutoscrollBtn" class="service-exit-btn service-video-btn hidden" type="button"
+          <button id="serviceExitBtn" class="svc-exit" type="button" aria-label="Exit Service Mode">
-                  aria-pressed="true" aria-label="Keep the sung line centred">⇅ Auto-scroll on</button>
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>Exit
-          <button id="serviceLyricsBtn" class="service-exit-btn service-video-btn" type="button"
+          </button>
-                  aria-pressed="false" aria-label="Show only the lyrics">🎵 Lyrics off</button>
+        </div>
-          <button id="serviceVideoBtn" class="service-exit-btn service-video-btn" type="button"
+        <div class="svc-dock" role="toolbar" aria-label="Service view">
-                  aria-pressed="false" aria-label="Show or hide the video">📺 Video off</button>
+          <button id="serviceLyricsBtn" class="svc-tile" type="button" aria-pressed="false" aria-label="Show only the lyrics">
-          <button id="serviceExitBtn" class="service-exit-btn" type="button" aria-label="Exit Service Mode">Exit</button>
+            <svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg>
+            <span class="svc-label">Lyrics</span><i class="svc-led"></i>
+          </button>
+          <button id="serviceAutoscrollBtn" class="svc-tile hidden" type="button" aria-pressed="true" aria-label="Keep the sung line centred">
+            <svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v16M7 9l5-5 5 5M7 15l5 5 5-5"/></svg>
+            <span class="svc-label">Auto-scroll</span><i class="svc-led"></i>
+          </button>
+          <button id="serviceFlagBtn" class="svc-tile svc-flag hidden" type="button" aria-pressed="false" aria-label="Report a wrong lyric line">
+            <svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>
+            <span class="svc-label">Report</span><i class="svc-led"></i>
+          </button>
+          <button id="serviceVideoBtn" class="svc-tile" type="button" aria-pressed="false" aria-label="Show or hide the video">
+            <svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="6" width="13" height="12" rx="2.5"/><path d="M16 10.5l5-3v9l-5-3"/></svg>
+            <span class="svc-label">Video</span><i class="svc-led"></i>
+          </button>
+        </div>
+        <div id="serviceFlagHint" class="svc-hint hidden" role="status">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>
+          <span>Tap the line that’s wrong</span>
         </div>
       </div>
       <div class="service-center">
@@ -383,6 +402,7 @@
         </div>
       </div>
       <div class="service-bottom">
+        <div class="svc-progress" aria-hidden="true"><i id="serviceProgressFill"></i></div>
         <div id="serviceTime" class="service-time">
           <span id="serviceCurTime">0:00</span> / <span id="serviceDurTime">0:00</span>
         </div>
@@ -561,6 +581,7 @@
     <script src="opfs.js"></script>
     <script src="video-edit.js"></script>
     <script src="lyrics-core.js"></script>
+    <script src="flag-ui.js"></script>
     <script src="stats-core.js"></script>
     <script src="sha256.js"></script>
     <script src="device-db.js"></script>

frontend/service-ui.css

@@ -0,0 +1,407 @@
+/* ============================================================================
+ * Service mode — controls, report sheet, flagged lines
+ *
+ * Kept in its own file so the same rules drive the app and the design preview.
+ * Everything here is scoped under .service-mode / .svc-* / .fs-* so it cannot
+ * leak into the rest of the app. Tokens (--accent, --ui, --display, --mono, …)
+ * come from styles.css; each has a fallback so this file also stands alone.
+ * ========================================================================== */
+
+.service-mode, .fs-backdrop {
+  --svc-ink:    var(--text, #f5f3f0);
+  --svc-ink-2:  var(--text-2, #b6b5bf);
+  --svc-ink-3:  var(--text-dim, #76757f);
+  --svc-accent: var(--accent, #ff4b32);
+  --svc-accent-hi: var(--accent-bright, #ff6a52);
+  --svc-accent-lo: var(--accent-deep, #d4321d);
+  --svc-glow:   var(--accent-glow, rgba(255, 75, 50, 0.45));
+  --svc-amber:  #ffb454;
+  --svc-amber-glow: rgba(255, 180, 84, 0.42);
+  --svc-ok:     #34d399;
+}
+
+/* ---- top stack: status + exit, then the dock ---------------------------- */
+.svc-top {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.svc-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.svc-wake {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 14px 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--svc-ink-3);
+  font: 600 12.5px/1 var(--ui, system-ui, sans-serif);
+  letter-spacing: 0.02em;
+  transition: color 0.25s, background 0.25s, border-color 0.25s;
+}
+.svc-wake::before {
+  content: "";
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.22);
+  transition: background 0.25s, box-shadow 0.25s;
+}
+.svc-wake.awake {
+  color: #8ff0c4;
+  border-color: rgba(52, 211, 153, 0.28);
+  background: rgba(52, 211, 153, 0.08);
+}
+.svc-wake.awake::before {
+  background: var(--svc-ok);
+  box-shadow: 0 0 10px rgba(52, 211, 153, 0.75);
+}
+
+.svc-exit {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 34px;
+  padding: 0 15px 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--svc-ink);
+  font: 700 13px/1 var(--ui, system-ui, sans-serif);
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background 0.16s, border-color 0.16s, transform 0.16s;
+}
+.svc-exit svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
+.svc-exit:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.22); }
+.svc-exit:active { transform: scale(0.95); }
+
+/* ---- the dock: equal-width tiles, whatever number are showing ------------ */
+.svc-dock {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 6px;
+  padding: 6px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
+    rgba(14, 14, 18, 0.72);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+          backdrop-filter: blur(16px) saturate(140%);
+  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.svc-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 72px;
+  padding: 12px 4px 11px;
+  border-radius: 18px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--svc-ink-2);
+  font: 650 11.5px/1.1 var(--ui, system-ui, sans-serif);
+  letter-spacing: 0.015em;
+  white-space: nowrap;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 0.2s, background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.14s;
+  animation: svc-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
+}
+.svc-tile .svc-ico {
+  width: 23px; height: 23px;
+  fill: none; stroke: currentColor;
+  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
+  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3);
+}
+.svc-led {
+  position: absolute;
+  top: 9px; right: 10px;
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.16);
+  transition: background 0.25s, box-shadow 0.25s;
+}
+.svc-tile:hover { color: var(--svc-ink); background: rgba(255, 255, 255, 0.05); }
+.svc-tile:active { transform: scale(0.95); }
+
+.svc-tile[aria-pressed="true"] {
+  color: #fff;
+  border-color: color-mix(in srgb, var(--svc-accent) 55%, transparent);
+  background: linear-gradient(165deg,
+    color-mix(in srgb, var(--svc-accent) 38%, transparent),
+    color-mix(in srgb, var(--svc-accent) 12%, transparent));
+  box-shadow: 0 10px 24px -12px var(--svc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
+}
+.svc-tile[aria-pressed="true"] .svc-ico { transform: translateY(-1px) scale(1.06); }
+.svc-tile[aria-pressed="true"] .svc-led {
+  background: var(--svc-accent-hi);
+  box-shadow: 0 0 9px var(--svc-glow);
+}
+
+/* Report mode reads differently from the other toggles: amber, not red. */
+.svc-tile.svc-flag[aria-pressed="true"] {
+  border-color: rgba(255, 180, 84, 0.6);
+  background: linear-gradient(165deg, rgba(255, 180, 84, 0.34), rgba(255, 180, 84, 0.1));
+  box-shadow: 0 10px 24px -12px var(--svc-amber-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
+}
+.svc-tile.svc-flag[aria-pressed="true"] .svc-led { background: var(--svc-amber); box-shadow: 0 0 9px var(--svc-amber-glow); }
+
+@keyframes svc-pop {
+  from { opacity: 0; transform: scale(0.86); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.svc-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 9px 14px;
+  border-radius: 14px;
+  border: 1px dashed rgba(255, 180, 84, 0.5);
+  background: rgba(255, 180, 84, 0.08);
+  color: #ffd493;
+  font: 600 13px/1.3 var(--ui, system-ui, sans-serif);
+  text-align: center;
+  animation: svc-pop 0.25s ease both;
+}
+.svc-hint svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+/* ---- progress + time --------------------------------------------------- */
+.svc-progress {
+  width: 100%;
+  height: 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+.svc-progress > i {
+  display: block;
+  height: 100%;
+  width: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--svc-accent-lo), var(--svc-accent-hi));
+  box-shadow: 0 0 14px var(--svc-glow);
+  transition: width 0.4s linear;
+}
+
+/* ---- lyric lines: report mode, badges ---------------------------------- */
+.service-lyrics .sl-line { position: relative; -webkit-touch-callout: none; }
+.service-lyrics .sl-list { touch-action: pan-y; }
+
+.service-lyrics.flagging .sl-line {
+  cursor: crosshair;
+  outline: 1.5px dashed rgba(255, 180, 84, 0.42);
+  outline-offset: -3px;
+}
+.service-lyrics.flagging .sl-line:active {
+  background: rgba(255, 180, 84, 0.18);
+}
+.service-lyrics.flagging .sl-line.untimed { cursor: crosshair; }
+
+/* A line somebody has reported. Solid = you reported it; hollow = others did. */
+.sl-line.flagged::after {
+  content: "⚑" attr(data-n);
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  font: 700 12px/1 var(--ui, system-ui, sans-serif);
+  letter-spacing: 0;
+  color: var(--svc-amber);
+  padding: 5px 7px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 180, 84, 0.5);
+  background: rgba(20, 16, 8, 0.55);
+  opacity: 0.85;
+  pointer-events: none;
+}
+.sl-line.flagged.mine::after {
+  color: #1a1206;
+  background: var(--svc-amber);
+  border-color: var(--svc-amber);
+  box-shadow: 0 0 12px var(--svc-amber-glow);
+}
+
+/* ---- the report sheet ------------------------------------------------------ */
+.fs-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 450;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  background: rgba(3, 3, 6, 0.62);
+  -webkit-backdrop-filter: blur(6px);
+          backdrop-filter: blur(6px);
+  animation: fs-fade 0.2s ease both;
+}
+.fs-backdrop.closing { animation: fs-fade 0.18s ease reverse both; }
+.fs-backdrop.closing .fs-sheet { animation: fs-down 0.2s ease both; }
+
+.fs-sheet {
+  width: 100%;
+  max-width: 560px;
+  max-height: 92dvh;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
+  border-radius: 28px 28px 0 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 0;
+  background:
+    radial-gradient(120% 60% at 50% -10%, rgba(255, 180, 84, 0.13), transparent 60%),
+    #131318;
+  color: var(--svc-ink);
+  font-family: var(--ui, system-ui, sans-serif);
+  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.9);
+  animation: fs-up 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
+}
+@media (min-width: 700px) {
+  .fs-backdrop { align-items: center; }
+  .fs-sheet { border-radius: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 22px; }
+}
+.fs-grab { width: 42px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); margin: 0 auto 14px; }
+
+.fs-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
+.fs-title .fs-badge {
+  width: 38px; height: 38px; flex: none;
+  display: grid; place-items: center;
+  border-radius: 12px;
+  background: rgba(255, 180, 84, 0.16);
+  color: var(--svc-amber);
+}
+.fs-badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.fs-title h2 { margin: 0; font: 800 19px/1.15 var(--display, var(--ui, system-ui)); letter-spacing: -0.01em; }
+.fs-title small { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--ui, system-ui); color: var(--svc-ink-3); }
+.fs-x {
+  margin-left: auto; width: 36px; height: 36px; flex: none;
+  border-radius: 50%; border: 0;
+  background: rgba(255, 255, 255, 0.07); color: var(--svc-ink-2);
+  font-size: 18px; line-height: 1; cursor: pointer;
+}
+.fs-x:hover { background: rgba(255, 255, 255, 0.13); }
+
+.fs-quote {
+  margin: 0 0 16px;
+  padding: 14px 16px 14px 18px;
+  border-radius: 16px;
+  border-left: 4px solid var(--svc-amber);
+  background: rgba(255, 255, 255, 0.05);
+  font: 800 clamp(20px, 5.2vw, 26px)/1.25 var(--display, var(--ui, system-ui));
+  letter-spacing: -0.01em;
+  overflow-wrap: anywhere;
+}
+
+.fs-notice {
+  margin: 0 0 14px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  font: 500 13px/1.4 var(--ui, system-ui);
+  color: #ffd493;
+  background: rgba(255, 180, 84, 0.1);
+  border: 1px solid rgba(255, 180, 84, 0.28);
+}
+.fs-notice.info { color: var(--svc-ink-2); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
+.fs-notice.err  { color: #ffb3a8; background: rgba(255, 75, 50, 0.1); border-color: rgba(255, 75, 50, 0.35); }
+
+.fs-label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; font: 700 12px/1 var(--ui, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--svc-ink-3); }
+.fs-label em { font-style: normal; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
+
+.fs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
+.fs-chip {
+  height: 38px; padding: 0 15px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--svc-ink-2);
+  font: 600 13.5px/1 var(--ui, system-ui);
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
+}
+.fs-chip:active { transform: scale(0.95); }
+.fs-chip[aria-pressed="true"] {
+  color: #1a1206;
+  background: var(--svc-amber);
+  border-color: var(--svc-amber);
+}
+
+.fs-note {
+  display: block;
+  width: 100%;
+  min-height: 92px;
+  box-sizing: border-box;
+  resize: vertical;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--svc-ink);
+  font: 500 16px/1.4 var(--ui, system-ui);   /* 16px: iOS zooms inputs below it */
+}
+.fs-note::placeholder { color: var(--svc-ink-3); }
+.fs-note:focus { outline: 2px solid rgba(255, 180, 84, 0.55); outline-offset: 1px; border-color: transparent; }
+.fs-count { margin: 6px 4px 0; text-align: right; font: 500 11.5px/1 var(--mono, ui-monospace, monospace); color: var(--svc-ink-3); }
+
+.fs-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 16px; }
+.fs-actions.three { grid-template-columns: 1fr 1fr 1.6fr; }
+.fs-btn {
+  height: 52px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--svc-ink);
+  font: 700 15px/1 var(--ui, system-ui);
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: transform 0.12s, filter 0.15s, opacity 0.15s;
+}
+.fs-btn:active { transform: scale(0.97); }
+.fs-btn.danger { color: #ff9a8b; border-color: rgba(255, 75, 50, 0.35); background: rgba(255, 75, 50, 0.08); }
+.fs-btn.primary {
+  border: 0;
+  color: #1a1206;
+  background: linear-gradient(160deg, #ffc978, #ffa62e);
+  box-shadow: 0 12px 26px -10px var(--svc-amber-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
+}
+.fs-btn[disabled] { opacity: 0.45; pointer-events: none; }
+
+@keyframes fs-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes fs-up   { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
+@keyframes fs-down { from { transform: none; opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
+
+/* ---- narrow phones ------------------------------------------------------ */
+@media (max-width: 380px) {
+  .svc-tile { min-height: 66px; font-size: 11px; }
+  .svc-tile .svc-ico { width: 21px; height: 21px; }
+}
+@media (max-height: 520px) {
+  /* Landscape phone: keep the dock but flatten the tiles into icon + label rows. */
+  .svc-tile { flex-direction: row; min-height: 44px; gap: 8px; padding: 8px 10px; }
+  .svc-led { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .svc-tile, .svc-hint, .fs-backdrop, .fs-sheet { animation: none !important; }
+  .svc-tile, .svc-tile .svc-ico, .svc-progress > i { transition: none !important; }
+}

frontend/styles.css

@@ -2719,57 +2719,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   user-select: none;
 }
 
-.service-topbar {
+/* Top bar, view toggles and the exit button live in service-ui.css. */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
-  gap: 16px;
-}
-
-.service-wake-state {
-  font-family: var(--ui);
-  font-size: 13px;
-  color: var(--text-dim);
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  letter-spacing: 0.01em;
-  transition: color 0.2s var(--ease);
-}
-
-.service-wake-state::before {
-  content: "";
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--line);
-  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
-}
-
-.service-wake-state.awake {
-  color: var(--text-2);
-}
-
-.service-wake-state.awake::before {
-  background: #34d399;
-  box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
-}
-
-.service-topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Toggle reads as pressed when the video panel is on. */
-.service-video-btn.on {
-  border-color: var(--accent);
-  color: var(--text);
-}
 
 /* Video panel on: the overlay is moved into the player pane (see
    applyServiceVideoLayout) and rendered inline beneath the stage, so the video
@@ -2817,34 +2767,6 @@ body.service-video .service-bottom {
   padding-bottom: 14px;
 }
 
-.service-exit-btn {
-  background: var(--bg-3);
-  border: 1px solid var(--line);
-  color: var(--text);
-  padding: 9px 18px;
-  border-radius: var(--radius-sm);
-  font-family: var(--ui);
-  font-size: 13.5px;
-  font-weight: 600;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  touch-action: manipulation;
-  transition: all 0.16s var(--ease);
-}
-
-.service-exit-btn:hover {
-  background: var(--bg-2);
-  border-color: var(--accent);
-  transform: translateY(-1px);
-}
-
-.service-exit-btn:active {
-  transform: translateY(0);
-}
-
 .service-center {
   display: flex;
   flex-direction: column;

frontend/sw.js

@@ -56,6 +56,8 @@ const SHELL = [
   '/',
   '/index.html',
   '/styles.css',
+  '/service-ui.css',
+  '/flag-ui.js',
   '/async-guard.js',
   '/sw-update.js',
   '/fingerprint.js',

server/db.js

@@ -159,6 +159,27 @@ export async function initDb() {
       plays      INTEGER NOT NULL DEFAULT 0
     );
 
+    -- "This lyric line is wrong" reports from service mode. One open row per
+    -- (video, line text, reporter); the admin lyric editor lists them and a
+    -- lyric edit that changes the line resolves the report automatically.
+    CREATE TABLE IF NOT EXISTS lyric_flags (
+      id          INTEGER PRIMARY KEY AUTOINCREMENT,
+      video_id    TEXT    NOT NULL,
+      line_index  INTEGER NOT NULL DEFAULT -1,
+      line_text   TEXT    NOT NULL,
+      rev         INTEGER NOT NULL DEFAULT 0,        -- lyrics rev the reporter saw
+      reason      TEXT    NOT NULL DEFAULT '',       -- words | timing | typo | other | ''
+      note        TEXT    NOT NULL DEFAULT '',       -- optional description
+      reporter    TEXT    NOT NULL,                  -- profile name or api label
+      status      TEXT    NOT NULL DEFAULT 'open',   -- open | resolved
+      resolved_by TEXT,
+      resolved_at INTEGER,
+      created_at  INTEGER NOT NULL DEFAULT (unixepoch()),
+      updated_at  INTEGER NOT NULL DEFAULT (unixepoch())
+    );
+    CREATE INDEX IF NOT EXISTS idx_flags_video  ON lyric_flags (video_id, status);
+    CREATE INDEX IF NOT EXISTS idx_flags_status ON lyric_flags (status, created_at DESC);
+
     -- API tokens for scripts (lyrics injection etc.). Only a SHA-256 of the
     -- token is stored; the plaintext is shown once when it is created.
     CREATE TABLE IF NOT EXISTS api_tokens (
@@ -272,6 +293,103 @@ export async function allNotes() {
   return r.rows.map(noteRow);
 }
 
+// ---- Lyric line reports ("this line is wrong") --------------------------------
+
+function flagRow(x) {
+  return {
+    id: Number(x.id), videoId: x.video_id, index: Number(x.line_index), text: x.line_text,
+    rev: Number(x.rev), reason: x.reason || '', note: x.note || '', reporter: x.reporter,
+    status: x.status, resolvedBy: x.resolved_by || null,
+    resolvedAt: x.resolved_at == null ? null : Number(x.resolved_at),
+    createdAt: Number(x.created_at), updatedAt: Number(x.updated_at),
+  };
+}
+
+// One open report per (video, line text, reporter): reporting the same line
+// again refreshes the reason/description instead of piling up duplicates.
+export async function upsertFlag({ videoId, index, text, rev, reason, note, reporter }) {
+  const ex = await db.execute({
+    sql: "SELECT id FROM lyric_flags WHERE video_id = ? AND line_text = ? AND reporter = ? AND status = 'open'",
+    args: [videoId, text, reporter],
+  });
+  if (ex.rows[0]) {
+    const id = Number(ex.rows[0].id);
+    await db.execute({
+      sql: 'UPDATE lyric_flags SET line_index = ?, rev = ?, reason = ?, note = ?, updated_at = unixepoch() WHERE id = ?',
+      args: [index, rev, reason, note, id],
+    });
+    return { id, created: false };
+  }
+  const r = await db.execute({
+    sql: `INSERT INTO lyric_flags (video_id, line_index, line_text, rev, reason, note, reporter)
+          VALUES (?, ?, ?, ?, ?, ?, ?)`,
+    args: [videoId, index, text, rev, reason, note, reporter],
+  });
+  return { id: Number(r.lastInsertRowid), created: true };
+}
+
+export async function listFlagsForVideo(videoId, status = 'open') {
+  const r = await db.execute({
+    sql: 'SELECT * FROM lyric_flags WHERE video_id = ? AND status = ? ORDER BY line_index, id',
+    args: [videoId, status],
+  });
+  return r.rows.map(flagRow);
+}
+
+// Newest first across every video; status 'all' returns both.
+export async function listAllFlags({ status = 'open', limit = 200 } = {}) {
+  const where = status === 'all' ? '' : 'WHERE status = ?';
+  const r = await db.execute({
+    sql: `SELECT * FROM lyric_flags ${where} ORDER BY created_at DESC, id DESC LIMIT ?`,
+    args: status === 'all' ? [limit] : [status, limit],
+  });
+  return r.rows.map(flagRow);
+}
+
+export async function getFlag(id) {
+  const r = await db.execute({ sql: 'SELECT * FROM lyric_flags WHERE id = ?', args: [id] });
+  return r.rows[0] ? flagRow(r.rows[0]) : null;
+}
+
+export async function countOpenFlags() {
+  const r = await db.execute("SELECT COUNT(*) AS n FROM lyric_flags WHERE status = 'open'");
+  return Number(r.rows[0].n) || 0;
+}
+
+export async function setFlagStatus(id, status, by) {
+  const r = await db.execute({
+    sql: `UPDATE lyric_flags SET status = ?, resolved_by = ?, resolved_at = ?, updated_at = unixepoch() WHERE id = ?`,
+    args: [status, status === 'resolved' ? by : null, status === 'resolved' ? Math.floor(Date.now() / 1000) : null, id],
+  });
+  return (r.rowsAffected || 0) > 0;
+}
+
+export async function deleteFlag(id) {
+  const r = await db.execute({ sql: 'DELETE FROM lyric_flags WHERE id = ?', args: [id] });
+  return (r.rowsAffected || 0) > 0;
+}
+
+// A reporter withdrawing their own open report.
+export async function withdrawFlag(id, reporter) {
+  const r = await db.execute({
+    sql: "DELETE FROM lyric_flags WHERE id = ? AND reporter = ? AND status = 'open'",
+    args: [id, reporter],
+  });
+  return (r.rowsAffected || 0) > 0;
+}
+
+// After a lyric edit: every open report whose line no longer exists (its text
+// changed or was removed) is resolved automatically. `texts` = the new lines.
+export async function autoResolveFlags(videoId, texts, by = 'auto (line changed)') {
+  const open = await listFlagsForVideo(videoId, 'open');
+  let n = 0;
+  for (const f of open) {
+    if (texts.has(f.text)) continue;
+    if (await setFlagStatus(f.id, 'resolved', by)) n++;
+  }
+  return n;
+}
+
 // ---- API tokens ---------------------------------------------------------------
 
 export async function createApiToken({ id, label, tokenHash }) {

server/flags.test.js

@@ -0,0 +1,158 @@
+// Lyric line reports: report / list / withdraw / admin triage / auto-resolve.
+import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { Hono } from 'hono';
+
+const root = mkdtempSync(join(tmpdir(), 'ytp-flags-test-'));
+process.env.DB_PATH = join(root, 'test.db');
+const dbmod = await import('./db.js');
+const N = await import('./notes.js');
+
+const VID = 'dQw4w9WgXcQ';
+const PASSWORD = 'correct horse';
+const PROFILES = new Set(['josh', 'maria']);
+let app;
+
+beforeAll(async () => {
+  await dbmod.initDb();
+  const htmlPath = join(root, 'admin.html');
+  writeFileSync(htmlPath, '<!doctype html><title>admin</title>');
+  app = new Hono();
+  N.registerNoteRoutes(app, {
+    db: dbmod,
+    getProfile: async (name) => (PROFILES.has(name) ? { data: '{}' } : null),
+    profileNameRe: /^[A-Za-z0-9][A-Za-z0-9_-]{2,39}$/,
+    runYtdlp: async () => '{}',
+    adminPassword: PASSWORD,
+    backupDir: join(root, 'backups'),
+    adminHtmlPath: htmlPath,
+    workerToken: 'w'.repeat(32),
+  });
+  // Shared lyrics everyone reports against.
+  const saved = await dbmod.saveNote({
+    videoId: VID, kind: 'lyrics', baseRev: 0, source: 'user', updatedBy: 'seed',
+    data: { offset: 0, tags: [], lines: [
+      { t: 1, text: 'Amazing grace', kind: 'line' },
+      { t: 5, text: 'how sweet the sownd', kind: 'line' },
+      { t: 9, text: 'that saved a wretch like me', kind: 'line' },
+    ] },
+  });
+  expect(saved.ok).toBe(true);
+});
+afterAll(() => rmSync(root, { recursive: true, force: true }));
+
+const json = (method, body, headers = {}) => ({
+  method, headers: { 'Content-Type': 'application/json', ...headers }, body: JSON.stringify(body),
+});
+async function adminCookie() {
+  const res = await app.request('/api/admin/login', json('POST', { password: PASSWORD }));
+  return res.headers.get('set-cookie').split(';')[0];
+}
+const report = (body) => app.request(`/api/notes/${VID}/flags`, json('POST', body));
+
+describe('reporting a line', () => {
+  test('needs a linked profile', async () => {
+    expect((await report({ text: 'Amazing grace' })).status).toBe(401);
+    expect((await report({ text: 'Amazing grace', profile: 'nobody' })).status).toBe(401);
+  });
+
+  test('optional description: a bare report works, reason is normalised', async () => {
+    const r = await report({ text: 'how sweet the sownd', profile: 'josh', reason: 'not-a-reason' });
+    expect(r.status).toBe(200);
+    const j = await r.json();
+    expect(j.ok).toBe(true);
+    expect(j.created).toBe(true);
+    const list = await (await app.request(`/api/notes/${VID}/flags`, { headers: { 'X-Profile': 'josh' } })).json();
+    expect(list.flags).toEqual([{ index: 1, text: 'how sweet the sownd', count: 1, mine: true, id: j.id, reason: '', note: '' }]);
+  });
+
+  test('reporting the same line again updates it instead of duplicating', async () => {
+    const r = await (await report({ text: 'how sweet the sownd', profile: 'josh', reason: 'typo', note: 'should be "sound"' })).json();
+    expect(r.created).toBe(false);
+    const list = await (await app.request(`/api/notes/${VID}/flags`, { headers: { 'X-Profile': 'josh' } })).json();
+    expect(list.flags.length).toBe(1);
+    expect(list.flags[0]).toMatchObject({ reason: 'typo', note: 'should be "sound"', count: 1, mine: true });
+  });
+
+  test('a second person is counted, but never sees the first person\'s description', async () => {
+    await report({ text: 'how sweet the sownd', profile: 'maria', note: 'private note' });
+    const asMaria = await (await app.request(`/api/notes/${VID}/flags`, { headers: { 'X-Profile': 'maria' } })).json();
+    expect(asMaria.flags[0]).toMatchObject({ count: 2, mine: true, note: 'private note' });
+    const anon = await (await app.request(`/api/notes/${VID}/flags`)).json();
+    expect(anon.flags[0]).toMatchObject({ count: 2, mine: false, id: null, note: '', reason: '' });
+    expect(JSON.stringify(anon)).not.toContain('josh');
+  });
+
+  test('a line that no longer exists is refused as already changed', async () => {
+    const r = await report({ text: 'a line nobody sings', profile: 'josh' });
+    expect(r.status).toBe(409);
+    expect((await r.json()).stale).toBe(true);
+    expect((await report({ profile: 'josh' })).status).toBe(400);
+  });
+
+  test('a song with no lyrics cannot be reported', async () => {
+    const r = await app.request('/api/notes/aaaaaaaaaaa/flags', json('POST', { text: 'x', profile: 'josh' }));
+    expect(r.status).toBe(404);
+  });
+});
+
+describe('withdrawing', () => {
+  test('only the reporter can take a report back', async () => {
+    const mine = await (await app.request(`/api/notes/${VID}/flags`, { headers: { 'X-Profile': 'maria' } })).json();
+    const id = mine.flags[0].id;
+    expect((await app.request(`/api/notes/${VID}/flags/${id}/withdraw`, json('POST', { profile: 'josh' }))).status).toBe(404);
+    expect((await app.request(`/api/notes/${VID}/flags/${id}/withdraw`, json('POST', { profile: 'maria' }))).status).toBe(200);
+    const after = await (await app.request(`/api/notes/${VID}/flags`, { headers: { 'X-Profile': 'maria' } })).json();
+    expect(after.flags[0]).toMatchObject({ count: 1, mine: false });
+  });
+});
+
+describe('admin triage', () => {
+  test('listing needs the admin; it names reporters and shows the song', async () => {
+    expect((await app.request('/api/admin/flags')).status).toBe(401);
+    const cookie = await adminCookie();
+    const j = await (await app.request('/api/admin/flags', { headers: { cookie } })).json();
+    expect(j.ok).toBe(true);
+    expect(j.open).toBe(1);
+    expect(j.flags[0]).toMatchObject({ videoId: VID, text: 'how sweet the sownd', reporter: 'josh', reason: 'typo', status: 'open' });
+  });
+
+  test('resolve, reopen, delete', async () => {
+    const cookie = await adminCookie();
+    const id = (await (await app.request('/api/admin/flags', { headers: { cookie } })).json()).flags[0].id;
+    const post = (status) => app.request(`/api/admin/flags/${id}`, { ...json('POST', { status }), headers: { 'Content-Type': 'application/json', cookie } });
+    expect((await (await post('resolved')).json()).open).toBe(0);
+    const resolved = await (await app.request('/api/admin/flags?status=resolved', { headers: { cookie } })).json();
+    expect(resolved.flags[0]).toMatchObject({ id, status: 'resolved', resolvedBy: 'admin' });
+    expect((await (await post('open')).json()).open).toBe(1);
+    expect((await post('nonsense')).status).toBe(400);
+    const del = await app.request(`/api/admin/flags/${id}`, { method: 'DELETE', headers: { cookie } });
+    expect((await del.json()).open).toBe(0);
+  });
+});
+
+describe('auto-resolve when the lyrics change', () => {
+  test('editing a reported line resolves its report; untouched lines keep theirs', async () => {
+    await report({ text: 'how sweet the sownd', profile: 'josh' });
+    await report({ text: 'that saved a wretch like me', profile: 'josh' });
+    const cookie = await adminCookie();
+    const cur = (await dbmod.getNotes(VID)).lyrics;
+    const put = await app.request(`/api/notes/${VID}/lyrics`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json', cookie },
+      body: JSON.stringify({ baseRev: cur.rev, data: { offset: 0, tags: [], lines: [
+        { t: 1, text: 'Amazing grace', kind: 'line' },
+        { t: 5, text: 'how sweet the sound', kind: 'line' },          // fixed
+        { t: 9, text: 'that saved a wretch like me', kind: 'line' },   // untouched
+      ] } }),
+    });
+    expect(put.status).toBe(200);
+    await new Promise((r) => setTimeout(r, 100)); // resolution runs right after the response
+    const open = await (await app.request(`/api/notes/${VID}/flags`, { headers: { 'X-Profile': 'josh' } })).json();
+    expect(open.flags.map((f) => f.text)).toEqual(['that saved a wretch like me']);
+    const resolved = await (await app.request('/api/admin/flags?status=resolved', { headers: { cookie } })).json();
+    expect(resolved.flags.some((f) => f.text === 'how sweet the sownd' && f.resolvedBy === 'auto (line changed)')).toBe(true);
+  });
+});

server/notes.js

@@ -25,6 +25,11 @@
  *   GET  /api/notes/:id/captions                 → YouTube captions as lyric lines (preview, no save)
  *   POST /api/notes/:id/lyrics/auto              { overwrite? } token/admin: captions → saved lyrics
  *   POST /api/notes/:id/lyrics/web               { overwrite? } token/admin: LRCLIB (synced when available)
+ *   POST /api/notes/:id/flags                    { text, index?, reason?, note?, profile } report a wrong lyric line
+ *   GET  /api/notes/:id/flags                    open reports, grouped per line (X-Profile → which are mine)
+ *   POST /api/notes/:id/flags/:fid/withdraw      { profile } take back my own report
+ *   GET  /api/admin/flags?status=open|resolved|all   (admin or token) reports across songs, with reporters
+ *   POST /api/admin/flags/:fid                   { status: 'open'|'resolved' }   ·   DELETE /api/admin/flags/:fid
  *   POST /api/admin/login | /api/admin/logout, GET /api/admin/me
  *   GET|POST /api/admin/tokens, DELETE /api/admin/tokens/:id
  *   GET  /api/admin/notes/recent, GET /api/admin/notes/export
@@ -393,6 +398,85 @@ export function registerNoteRoutes(app, deps) {
     }
   });
 
+  // ---- Lyric line reports ---------------------------------------------------
+  // Anyone linked to an online profile can say "this line is wrong" (service
+  // mode). The description is optional. Reports are matched by the line's
+  // TEXT, so they follow the line if lyrics above it are edited, and resolve
+  // themselves once the line changes (see autoResolve below).
+  const FLAG_REASONS = new Set(['words', 'timing', 'typo', 'other', '']);
+  const flagLog = new Map();
+  function flagOverBudget(key) {
+    const now = Date.now();
+    const list = (flagLog.get(key) || []).filter((t) => now - t < 10 * 60_000);
+    list.push(now);
+    flagLog.set(key, list);
+    if (flagLog.size > 5000) flagLog.clear();
+    return list.length > 40;
+  }
+  const autoResolve = (id, data) => {
+    db.autoResolveFlags(id, new Set((data.lines || []).map((l) => l.text))).catch(() => {});
+  };
+
+  app.post('/api/notes/:id/flags', async (c) => {
+    const id = c.req.param('id');
+    if (badId(id)) return c.json({ ok: false, error: 'invalid video id' }, 400);
+    let body;
+    try { body = await c.req.json(); } catch { return c.json({ ok: false, error: 'invalid JSON' }, 400); }
+    const who = await resolveWriter(c, body);
+    if (!who) return c.json({ ok: false, error: 'link an online profile to report a lyric line' }, 401);
+    if (who.invalid) return c.json({ ok: false, error: 'invalid API token' }, 401);
+    if (flagOverBudget(who.by)) return c.json({ ok: false, error: 'too many reports — wait a few minutes' }, 429);
+    const text = cleanText(body.text, MAX_LINE_CHARS);
+    if (!text) return c.json({ ok: false, error: 'which line? (text is missing)' }, 400);
+    try {
+      const lyr = (await db.getNotes(id)).lyrics;
+      if (!lyr) return c.json({ ok: false, error: 'this song has no lyrics to report' }, 404);
+      // The reporter may hold an older copy: a line that is gone is already fixed.
+      const at = lyr.data.lines.findIndex((l) => l.text === text);
+      if (at < 0) return c.json({ ok: false, stale: true, rev: lyr.rev, error: 'that line was just changed — reload the lyrics' }, 409);
+      const idx = Number.isInteger(body.index) && lyr.data.lines[body.index] && lyr.data.lines[body.index].text === text ? body.index : at;
+      const reason = FLAG_REASONS.has(String(body.reason || '')) ? String(body.reason || '') : '';
+      const r = await db.upsertFlag({
+        videoId: id, index: idx, text, rev: lyr.rev, reason, note: cleanText(body.note, 500), reporter: who.by,
+      });
+      return c.json({ ok: true, id: r.id, created: r.created });
+    } catch (err) {
+      return c.json({ ok: false, error: err.message }, 500);
+    }
+  });
+
+  // Open reports for one song, one entry per line. Descriptions are only
+  // returned to the person who wrote them (X-Profile), never to everyone.
+  app.get('/api/notes/:id/flags', async (c) => {
+    const id = c.req.param('id');
+    if (badId(id)) return c.json({ ok: false, error: 'invalid video id' }, 400);
+    const me = cleanText(c.req.header('x-profile'), 40);
+    try {
+      const byText = new Map();
+      for (const f of await db.listFlagsForVideo(id, 'open')) {
+        const e = byText.get(f.text) || { index: f.index, text: f.text, count: 0, mine: false, id: null, reason: '', note: '' };
+        e.count++;
+        if (me && f.reporter === me) { e.mine = true; e.id = f.id; e.reason = f.reason; e.note = f.note; }
+        byText.set(f.text, e);
+      }
+      return c.json({ ok: true, flags: [...byText.values()].sort((a, b) => a.index - b.index) });
+    } catch (err) {
+      return c.json({ ok: false, error: err.message }, 500);
+    }
+  });
+
+  app.post('/api/notes/:id/flags/:fid/withdraw', async (c) => {
+    const id = c.req.param('id');
+    const fid = Number(c.req.param('fid'));
+    if (badId(id) || !Number.isInteger(fid)) return c.json({ ok: false, error: 'not found' }, 404);
+    let body = {};
+    try { body = await c.req.json(); } catch { /* profile required below */ }
+    const who = await resolveWriter(c, body);
+    if (!who || who.invalid) return c.json({ ok: false, error: 'link an online profile first' }, 401);
+    const ok = await db.withdrawFlag(fid, who.by);
+    return ok ? c.json({ ok: true }) : c.json({ ok: false, error: 'not your open report' }, 404);
+  });
+
   // Server-side injection: captions straight into the shared lyrics. For
   // scripts (API token) and the admin page; never overwrites existing lyrics
   // unless asked to.
@@ -482,6 +566,7 @@ export function registerNoteRoutes(app, deps) {
         force: !!body.force && who.via !== 'user',
       });
       if (!r.ok) return c.json({ ok: false, error: 'someone else saved a newer version', conflict: true, current: r.current }, 409);
+      if (kind === 'lyrics') autoResolve(id, data);
       return c.json({ ok: true, rev: r.rev, data });
     } catch (err) {
       return c.json({ ok: false, error: err.message }, 500);
@@ -606,13 +691,56 @@ export function registerNoteRoutes(app, deps) {
     try { body = await c.req.json(); } catch { /* rev required below */ }
     const old = await db.getNoteRev(id, kind, Number(body.rev));
     if (!old) return c.json({ ok: false, error: 'revision not found' }, 404);
+    const restored = sanitizeNote(kind, old.data);
     const r = await db.saveNote({
-      videoId: id, kind, data: sanitizeNote(kind, old.data), source: 'restore',
+      videoId: id, kind, data: restored, source: 'restore',
       updatedBy: `admin (rev ${old.rev})`, force: true,
     });
+    if (kind === 'lyrics') autoResolve(id, restored);
     return c.json({ ok: true, rev: r.rev });
   });
 
+  // ---- Admin: lyric line reports ---------------------------------------------
+  async function songLabel(videoId, cache) {
+    if (cache.has(videoId)) return cache.get(videoId);
+    let out = { title: '', channel: '' };
+    try {
+      if (videoId.startsWith('upl_')) {
+        const u = await db.getUpload(videoId);
+        if (u) out = { title: u.title || '', channel: u.artist || '' };
+      } else {
+        const m = JSON.parse((await db.getMedia(videoId) || {}).meta || '{}');
+        out = { title: m.title || '', channel: m.channel || m.uploader || '' };
+      }
+    } catch { /* unknown song: the id is shown instead */ }
+    cache.set(videoId, out);
+    return out;
+  }
+
+  app.get('/api/admin/flags', requireAdminOrToken, async (c) => {
+    const status = ['open', 'resolved', 'all'].includes(c.req.query('status')) ? c.req.query('status') : 'open';
+    const cache = new Map();
+    const flags = [];
+    for (const f of await db.listAllFlags({ status, limit: 300 })) {
+      flags.push({ ...f, ...(await songLabel(f.videoId, cache)) });
+    }
+    return c.json({ ok: true, open: await db.countOpenFlags(), flags });
+  });
+
+  app.post('/api/admin/flags/:fid', requireAdmin, async (c) => {
+    const fid = Number(c.req.param('fid'));
+    let body = {};
+    try { body = await c.req.json(); } catch { /* status required below */ }
+    if (!Number.isInteger(fid) || !['open', 'resolved'].includes(body.status)) return c.json({ ok: false, error: 'bad request' }, 400);
+    const ok = await db.setFlagStatus(fid, body.status, 'admin');
+    return ok ? c.json({ ok: true, open: await db.countOpenFlags() }) : c.json({ ok: false, error: 'not found' }, 404);
+  });
+
+  app.delete('/api/admin/flags/:fid', requireAdmin, async (c) => {
+    const ok = await db.deleteFlag(Number(c.req.param('fid')));
+    return ok ? c.json({ ok: true, open: await db.countOpenFlags() }) : c.json({ ok: false, error: 'not found' }, 404);
+  });
+
   app.get('/api/admin/notes/export', requireAdmin, async (c) => {
     const notes = await db.allNotes();
     c.header('Content-Disposition', `attachment; filename="ytplayer-notes-${new Date().toISOString().slice(0, 10)}.json"`);

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 && bun test ./party.test.js && bun test ./uploads.test.js && bun test ./innertube.test.js && bun test ./ytdlp-pool.test.js && bun test ./p2p-db.test.js && bun test ./p2p-admit.test.js && bun test ./p2p-retention.test.js && bun test ./p2p-routes.test.js && bun test ./p2p-hub.test.js && bun test --timeout 60000 ./p2p-intake.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 && bun test ./uploads.test.js && bun test ./innertube.test.js && bun test ./ytdlp-pool.test.js && bun test ./p2p-db.test.js && bun test ./p2p-admit.test.js && bun test ./p2p-retention.test.js && bun test ./p2p-routes.test.js && bun test ./p2p-hub.test.js && bun test --timeout 60000 ./p2p-intake.test.js && bun test ./flags.test.js"
   },
   "dependencies": {
     "@hono/node-server": "^1.14.0",