Match the desktop plot interactions in the web UI

- Wheel zoom around the cursor on both curve plots and the spectrogram:
  Ctrl zooms time only, Shift values only, scrolling over an axis zooms
  that axis; drag pans live; double-click resets. The zoom window survives
  redraws, overlay changes and resizes, and resets when units change.
- Guide and reference lines are painted in a uPlot draw hook, so a dragged
  reference line (now with a triangle handle and label) follows the cursor
  instead of jumping on release. Per-track integrated lines take the
  track's colour when overlaid.
- In-plot legend like pyqtgraph's: a swatch per track plus LRA / max dBTP.
- Metadata shows integrated loudness, LRA and max true peak (prefetched
  first) instead of debug rows; the file list shows each track's LUFS.
- UI, canvas and axis text prefer M PLUS 1 Code, else the system font.
- Spectrogram image is cached offscreen so panning is cheap; its tick
  labels adapt to the zoom level.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015UXA39Sh9coAx4FhRkd8R2

web/app.css

@@ -15,7 +15,9 @@
   --error: #ef5350;
   --ok: #81c784;
   --radius: 6px;
-  --mono: ui-monospace, "Cascadia Mono", "Source Code Pro", Menlo, Consolas, monospace;
+  /* M PLUS 1 Code (the desktop app's font) where installed, else the system UI font. */
+  --font: "M PLUS 1 Code", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
+  --mono: "M PLUS 1 Code", ui-monospace, "Cascadia Mono", "Source Code Pro", Menlo, Consolas, monospace;
 }
 
 * { box-sizing: border-box; }
@@ -30,7 +32,7 @@ html, body {
   height: 100%;
   background: var(--bg);
   color: var(--text);
-  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
+  font: 13px/1.45 var(--font);
   overflow: hidden;
 }
 
@@ -154,6 +156,7 @@ select:focus-visible, .btn:focus-visible, .toggle:focus-visible { outline: 2px s
   text-overflow: ellipsis;
   font-size: 12px;
 }
+.file-lufs { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
 .file-remove {
   flex: none;
   border: 0;
@@ -177,6 +180,8 @@ select:focus-visible, .btn:focus-visible, .toggle:focus-visible { outline: 2px s
 .metadata dt { color: var(--muted); }
 .metadata dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .metadata dd.muted { color: var(--muted); }
+.metadata .group { margin-top: 7px; }
+.metadata dd.strong { font-weight: 600; }
 
 /* ---- reference lines ---- */
 
@@ -196,10 +201,7 @@ select:focus-visible, .btn:focus-visible, .toggle:focus-visible { outline: 2px s
 
 .plot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
 .plot-head h1 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
-.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--muted); }
-.legend .item { display: flex; align-items: center; gap: 5px; }
-.legend .swatch { width: 9px; height: 9px; border-radius: 2px; }
-.legend .annotation { font-family: var(--mono); color: var(--text); }
+.plot-hint { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 .plot-host {
   position: relative;
@@ -212,7 +214,30 @@ select:focus-visible, .btn:focus-visible, .toggle:focus-visible { outline: 2px s
   overflow: hidden;
 }
 .plot-host .uplot { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
-.plot-host canvas.heatmap { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
+.plot-host canvas.heatmap { position: absolute; inset: 0; width: 100%; height: 100%; }
+
+/* In-plot legend, like pyqtgraph's: swatches per track plus scalar readouts.
+   pointer-events: none so zoom and pan work straight through it. */
+.plot-legend {
+  position: absolute;
+  z-index: 5;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-width: 46%;
+  padding: 6px 9px;
+  background: rgba(13, 15, 20, .82);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  font-size: 11.5px;
+}
+.plot-legend .entry { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.plot-legend .swatch { width: 14px; height: 3px; border-radius: 1px; flex: none; }
+.plot-legend .note { color: var(--muted); padding-left: 21px; font-variant-numeric: tabular-nums; }
+
+body.dragging-pan, body.dragging-pan * { cursor: grabbing !important; user-select: none; }
+body.dragging-ref, body.dragging-ref * { cursor: ns-resize !important; user-select: none; }
 
 .placeholder {
   position: absolute;

web/index.html

@@ -32,7 +32,7 @@
     <button id="refresh-plot" class="btn" type="button" title="Redraw from the computed results">Refresh</button>
     <div class="separator"></div>
     <button id="pick-files" class="btn primary" type="button">Add audio…</button>
-    <input id="file-input" type="file" accept=".mp3,.wav,.flac,.ogg,.oga,.m4a,.aif,.aiff,.opus" multiple hidden>
+    <input id="file-input" type="file" accept=".mp3,.wav,.flac,.ogg,.oga,.m4a,.aif,.aiff,.aifc,.opus" multiple hidden>
   </div>
 </header>
 
@@ -67,7 +67,7 @@
   <section class="stage">
     <div class="plot-head">
       <h1 id="plot-title">No track loaded</h1>
-      <div id="legend" class="legend"></div>
+      <div class="plot-hint">Scroll to zoom · Ctrl: time only · Shift: values only · drag to pan · double-click to reset</div>
     </div>
 
     <div id="plot-host" class="plot-host">
@@ -79,6 +79,7 @@
           and closing the tab discards it. Analysis runs at the file's native sample rate.</p>
       </div>
       <canvas id="heatmap" class="heatmap" hidden></canvas>
+      <div id="plot-legend" class="plot-legend" hidden></div>
     </div>
 
     <div class="statusbar">

web/metrics.js

@@ -69,6 +69,7 @@ export const METRICS = [
         hlines.push({
           y: data.integrated, label: `Integrated: ${data.integrated.toFixed(1)} LUFS`,
           color: '#e76f51', style: 'dash', width: 1.5,
+          perTrack: true,   // differs per track: coloured by track when overlaid
         });
       }
       if (Number.isFinite(data.lra)) annotations.push(`LRA: ${data.lra.toFixed(1)} LU`);