feat(sources): rebuild Relisten source picker for tape-trader detail

The v1.x source picker labelled every source either 🎤 Soundboard or
🎧 Audience N regardless of what was actually in the API payload —
collapsing the Matrix / FM / Master distinctions that tape-traders
specifically care about, and hiding the taper / lineage / archive.org
provenance behind a single-source-at-a-time metadata block.

What's new
- Horizontal chip layout (wraps naturally; ~3-4 per row at default
  window width). Each chip shows: type badge, taper name (or em-dash
  for anonymous), rating + review count, BEST pill on the clear
  top-rated source. JC indicator moved off chips into the metadata
  block to keep the chip row scannable.
- Type badges are colour-coded for instant pattern recognition —
  SBD green, AUD amber, MTX purple, FM pink. Classification reads the
  Relisten free-text `source` field AND the upstream_identifier
  archive.org slug (.sbd. / .aud. / .matrix. / .fm.), so Matrix
  recordings labelled `is_soundboard=true` (because they include a
  board feed) now correctly classify as MTX instead of being lumped
  with SBDs.
- Default view shows top 6 sources by rating; "Show N more sources ▾"
  expander reveals the rest. Cornell '77 has 23 sources — vertical
  full-width chips for all of them ate the whole viewport.
- Upgraded metadata block: 2-column grid showing taper, transferrer,
  lineage, duration + track-count, review count + weighted rating,
  jam-charts flag, taper notes, and a clickable archive.org link
  (gd77-05-08.sbd.hicks.4982.sbeok.shnf → archive.org/details/…).
- Switching sources mid-track auto-pauses playback so the user
  notices the change. Previously the old source kept streaming
  invisibly while the new source's track list rendered.

Pure helpers (testable, browser-free)
- classifySource(src) → { type, label } — heuristic with priority
  ordering: Matrix > FM > AUD > SBD > is_soundboard fallback.
  "Audience cassette master" reads AUD, not MD (which doesn't exist
  as a distinct badge — a master is just an SBD or AUD master).
- formatTaperLabel(src) — trims, filters boilerplate ("See info
  file", "Unknown", "n/a", "None"), truncates >40 chars.
- isBestSource(src, all) — gated on rating ≥ 9 AND ≥ 10 reviews AND
  ≥ 0.1 above second place. Conservative on purpose — three sources
  within a half-point of each other don't get the badge.

20 new unit tests covering classification edge cases and BEST gating;
102 total, all passing. No new IPC, no new endpoints, no schema
changes — uses fields already in /artists/{slug}/shows/{date}.

No version bump — this commit lands on main but is held back from
a tag so the next batch of v2.1 work (or a Reddit-feedback patch)
can ship together.

Author: DeceasedCranium

app/renderer/style.css

@@ -727,36 +727,127 @@ body {
 .show-actions { display: flex; gap: 8px; }
 
 /* ── Source tabs ───────────────────────────────── */
-.source-tabs {
+/* ── Source picker (v2.1) ────────────────────────────────────────────────
+ * Replaces the older `.source-tabs` / `.source-tab` chips with a richer
+ * row-style picker showing source-type badge (SBD/AUD/MTX/FM), taper
+ * name when known, rating + review count, and BEST / JC badges.
+ * ───────────────────────────────────────────────────────────────────── */
+.source-picker { margin-bottom: 14px; }
+.source-picker-header {
+  display: flex; align-items: baseline; gap: 6px;
+  font-size: 11px; color: var(--text3);
+  margin-bottom: 8px;
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
+.source-picker-count { font-weight: 700; color: var(--text2); }
+.source-picker-hint  { font-weight: 500; text-transform: none; letter-spacing: 0; }
+
+/* Chips wrap horizontally — 6 sources usually fit in 1-2 rows. Each chip
+   carries the at-a-glance trio: type badge + taper name + rating. Anything
+   richer (JC, full notes, archive link) lives in the metadata block below
+   for the active source only, so we're not duplicating dense info on
+   every chip and wasting vertical space. */
+.source-chips {
   display: flex;
-  gap: 8px;
-  margin-bottom: 14px;
   flex-wrap: wrap;
+  gap: 6px;
 }
-.source-tab {
-  padding: 8px 14px;
+
+.source-chip {
+  display: inline-flex;
+  align-items: center; gap: 8px;
+  padding: 6px 10px;
+  background: var(--bg3);
   border: 1px solid var(--border);
   border-radius: 8px;
-  cursor: pointer;
-  background: var(--bg3);
   color: var(--text2);
-  font-size: 12px;
-  font-weight: 600;
-  transition: all 0.12s;
+  font: inherit; font-size: 12px;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+  max-width: 320px;
+}
+.source-chip:hover  { background: var(--bg4); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
+.source-chip.active {
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg3));
+  border-color: var(--accent);
+  color: var(--text);
+}
+
+/* Source-type badge — color-coded for instant SBD/AUD/MTX/FM scanning. */
+.src-badge {
+  display: inline-block; min-width: 38px;
+  text-align: center;
+  font-size: 10px; font-weight: 800;
+  letter-spacing: 0.05em;
+  padding: 3px 6px;
+  border-radius: 4px;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+}
+.src-SBD { background: #2e8b57; }   /* green — board */
+.src-AUD { background: #c08a3a; }   /* amber — audience */
+.src-MTX { background: #6b5bd6; }   /* purple — matrix */
+.src-FM  { background: #c4548a; }   /* pink — broadcast */
+
+.src-taper        { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
+.src-anon         { color: var(--text3); font-style: italic; }
+.src-rating       { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.src-reviews      { color: var(--text3); margin-left: 2px; }
+/* JC and BEST: smaller in the horizontal layout — they're optional flair
+   on a chip that already has type + taper + rating doing the heavy lifting. */
+.src-jc           { font-size: 9px; font-weight: 700; color: var(--accent); }
+.src-best {
+  font-size: 9px; font-weight: 800; letter-spacing: 0.05em;
+  background: var(--accent); color: #fff;
+  padding: 1px 5px; border-radius: 999px;
 }
-.source-tab:hover  { border-color: var(--accent); color: var(--text); }
-.source-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
 
+.source-expand {
+  display: block;
+  margin-top: 6px;
+  background: transparent; border: 0;
+  color: var(--text3); font-size: 11px; font-weight: 600;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+.source-expand:hover { color: var(--accent); }
+
+/* Upgraded metadata block — shows the active source's provenance in a
+   2-column grid so taper / lineage / duration / reviews stay scannable. */
 .source-meta {
   background: var(--bg4);
   border-radius: 8px;
   padding: 12px 14px;
   font-size: 12px;
-  color: var(--text3);
-  line-height: 1.7;
-  margin-bottom: 14px;
+  color: var(--text2);
+  margin: 10px 0 14px;
+}
+.source-meta-header {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+.source-meta-source-label { font-size: 13px; font-weight: 600; color: var(--text); }
+.source-meta-grid {
+  display: grid; grid-template-columns: 1fr 1fr;
+  gap: 6px 24px;
+  line-height: 1.5;
+}
+.source-meta-grid .meta-wide { grid-column: 1 / -1; }
+.source-meta-grid .meta-k {
+  display: inline-block;
+  min-width: 75px;
+  color: var(--text3); font-size: 10px;
+  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
+  margin-right: 8px;
+}
+.meta-archive-link {
+  color: var(--accent); cursor: pointer;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px; text-decoration: none;
 }
-.source-meta strong { color: var(--text2); }
+.meta-archive-link:hover { text-decoration: underline; }
 
 /* ── Track list ────────────────────────────────── */
 .set-label {

app/renderer/views-core.js

@@ -6,6 +6,7 @@ import { lastfmArtistImage, injectArtistBio, lastfmSimilarArtists } from './last
 import {
   player, queueAndPlay, flatTracks, radioMode, setRadioMode,
   setPlayerArt, showTapePickerForTrack, openCompanion, closeCompanion,
+  audio,
 } from './player.js';
 // Circular-safe: views-nugs imports from views-core, but these are only ever
 // called inside function bodies (event handlers / async calls), never at init.
@@ -18,6 +19,9 @@ import {
   trackContainsSong,
   normaliseSongTitle,
   aggregateRelistenShowsToSongs,
+  classifySource,
+  formatTaperLabel,
+  isBestSource,
 } from '../shared/helpers.js';
 import {
   isAvailable as setlistFmAvailable,
@@ -1902,26 +1906,100 @@ export function renderShow(show, artist) {
     showToast(now ? '📍 Marked as attended!' : 'Attendance removed');
   });
 
-  function renderSourceArea(idx) {
+  // Render one source chip — used for both the default top-6 list and the
+  // "show all" expanded view. Pure formatting, no state mutation.
+  // Horizontal chip: badge + taper + rating in a single compact line. JC
+  // intentionally lives in the metadata block (below, active source only)
+  // rather than on every chip — it adds visual noise when the user is
+  // scanning a row of 6+ chips looking for the SBD or best AUD.
+  function renderSourceChip(s, i, active) {
+    const cls     = classifySource(s);
+    const taper   = formatTaperLabel(s);
+    const reviews = s.num_reviews ?? s.review_count ?? 0;
+    const best    = isBestSource(s, sources);
+    return `
+      <button class="source-chip ${active ? 'active' : ''}" data-sidx="${i}" type="button">
+        <span class="src-badge src-${cls.type}" title="${esc(cls.label)}">${cls.type}</span>
+        <span class="src-taper">${taper ? esc(taper) : '<span class="src-anon">—</span>'}</span>
+        <span class="src-rating">
+          ${s.avg_rating ? `★ ${s.avg_rating.toFixed(2)}` : ''}
+          ${reviews ? `<span class="src-reviews">(${reviews})</span>` : ''}
+        </span>
+        ${best ? '<span class="src-best">BEST</span>' : ''}
+      </button>`;
+  }
+
+  function renderSourceArea(idx, opts = {}) {
     const src = sources[idx]; if (!src) return;
     state.source = src;
     const tracks = flatTracks(src);
 
+    // Persist "expanded" across re-renders within the same show — clicking
+    // a chip in the expanded view shouldn't collapse it back.
+    const expanded = opts.expanded ?? (renderSourceArea._expanded === true);
+    renderSourceArea._expanded = expanded;
+
+    // Sort by rating desc for chip display, so the top sources land first
+    // regardless of API order. Track the original index so the click
+    // handler still picks the right source.
+    const sortedSources = sources
+      .map((s, i) => ({ s, i }))
+      .sort((a, b) => (b.s.avg_rating ?? 0) - (a.s.avg_rating ?? 0));
+    const visible = expanded ? sortedSources : sortedSources.slice(0, 6);
+    const hidden  = sortedSources.length - visible.length;
+
+    // Upgraded metadata block — shows the active source's full provenance.
+    // Includes the archive.org link (clickable to view the item upstream)
+    // and a duration/track-count summary which is useful because sources
+    // sometimes split sets differently from one another.
+    const meta = (() => {
+      const cls = classifySource(src);
+      const dur = src.duration ? `${Math.floor(src.duration/3600)}:${String(Math.floor((src.duration%3600)/60)).padStart(2,'0')}:${String(Math.floor(src.duration%60)).padStart(2,'0')}` : null;
+      const numTracks = (src.sets ?? []).reduce((n, s) => n + (s.tracks?.length ?? 0), 0);
+      const numSets   = (src.sets ?? []).length;
+      const upstream  = src.upstream_identifier;
+      const upstreamUrl = upstream ? `https://archive.org/details/${encodeURIComponent(upstream)}` : null;
+      const reviews   = src.num_reviews ?? src.review_count ?? 0;
+
+      return `
+        <div class="source-meta">
+          <div class="source-meta-header">
+            <span class="src-badge src-${cls.type}">${cls.type}</span>
+            <span class="source-meta-source-label">${esc(src.source || cls.label)}</span>
+          </div>
+          <div class="source-meta-grid">
+            ${src.taper      ? `<div><span class="meta-k">Taper</span>${esc(src.taper)}</div>` : ''}
+            ${src.transferrer? `<div><span class="meta-k">Transferrer</span>${esc(src.transferrer)}</div>` : ''}
+            ${src.lineage    ? `<div><span class="meta-k">Lineage</span>${esc(src.lineage)}</div>` : ''}
+            ${dur            ? `<div><span class="meta-k">Duration</span>${dur} · ${numTracks} tracks${numSets > 1 ? ` · ${numSets} sets` : ''}</div>` : ''}
+            ${reviews        ? `<div><span class="meta-k">Reviews</span>${reviews} · ★ ${src.avg_rating?.toFixed(2) ?? '—'}</div>` : ''}
+            ${src.has_jamcharts ? `<div><span class="meta-k">Annotations</span>📊 Has Jam Charts</div>` : ''}
+            ${src.taper_notes? `<div class="meta-wide"><span class="meta-k">Notes</span>${esc(src.taper_notes)}</div>` : ''}
+            ${src.description && !src.taper_notes ? `<div class="meta-wide"><span class="meta-k">Info</span>${esc(src.description)}</div>` : ''}
+            ${upstreamUrl    ? `<div class="meta-wide"><span class="meta-k">Archive</span><a class="meta-archive-link" data-href="${esc(upstreamUrl)}">${esc(upstream)} ↗</a></div>` : ''}
+          </div>
+        </div>`;
+    })();
+
     safeInnerHTML($('sourceArea'), `
-      <div class="source-tabs">
-        ${sources.map((s,i)=>`
-          <div class="source-tab ${i===idx?'active':''}" data-sidx="${i}">
-            ${s.is_soundboard?'🎤 Soundboard':`🎧 Audience ${i+1}`}
-            ${s.avg_rating?` · ★${s.avg_rating.toFixed(1)}`:''}
-          </div>`).join('')}
+      <div class="source-picker">
+        <div class="source-picker-header">
+          <span class="source-picker-count">${sources.length} source${sources.length===1?'':'s'} for this show</span>
+          ${sources.length > 1 ? `<span class="source-picker-hint">— click any to switch</span>` : ''}
+        </div>
+        <div class="source-chips">
+          ${visible.map(({s, i}) => renderSourceChip(s, i, i === idx)).join('')}
+        </div>
+        ${hidden > 0 ? `
+          <button class="source-expand" type="button" data-action="expand">
+            Show ${hidden} more source${hidden===1?'':'s'} ▾
+          </button>` : ''}
+        ${expanded && sources.length > 6 ? `
+          <button class="source-expand" type="button" data-action="collapse">
+            Show fewer ▴
+          </button>` : ''}
       </div>
-      ${(src.taper_notes||src.description||src.taper||src.lineage)?`
-        <div class="source-meta">
-          ${src.taper       ?`<strong>Taper:</strong> ${esc(src.taper)}<br>`:''}
-          ${src.lineage     ?`<strong>Lineage:</strong> ${esc(src.lineage)}<br>`:''}
-          ${src.taper_notes ?`<strong>Notes:</strong> ${esc(src.taper_notes)}<br>`:''}
-          ${src.description ?`<strong>Info:</strong> ${esc(src.description)}`:''}
-        </div>`:''}
+      ${meta}
       <div id="trackList">
         ${(src.sets??[]).map((set,si)=>`
           ${set.name?`<div class="set-label">${esc(set.name)}</div>`
@@ -1942,10 +2020,30 @@ export function renderShow(show, artist) {
       if (el) { el.classList.add('playing'); el.querySelector('.track-num').textContent = '▶'; }
     }
 
-    $('sourceArea').querySelectorAll('.source-tab').forEach(tab =>
-      tab.addEventListener('click', () => {
+    $('sourceArea').querySelectorAll('.source-chip').forEach(chip =>
+      chip.addEventListener('click', () => {
         closeCompanion();
-        renderSourceArea(parseInt(tab.dataset.sidx));
+        // Pause playback when switching sources — the currently playing
+        // track is from the OLD source and its track list / file URL no
+        // longer correspond to what the user is about to see. Pausing
+        // surfaces the switch clearly rather than leaving the previous
+        // source quietly streaming in the background.
+        if (state.source !== sources[parseInt(chip.dataset.sidx)]) {
+          try { audio?.pause(); } catch { /* no audio element yet */ }
+        }
+        renderSourceArea(parseInt(chip.dataset.sidx));
+      }));
+
+    $('sourceArea').querySelectorAll('.source-expand').forEach(btn =>
+      btn.addEventListener('click', () => {
+        renderSourceArea(idx, { expanded: btn.dataset.action === 'expand' });
+      }));
+
+    $('sourceArea').querySelectorAll('.meta-archive-link').forEach(a =>
+      a.addEventListener('click', e => {
+        e.preventDefault();
+        const href = a.dataset.href;
+        if (href) window.ipc?.openUrl(href);
       }));
 
     $('sourceArea').querySelectorAll('.track-row').forEach(row =>

app/shared/helpers.js

@@ -524,6 +524,85 @@ export function formatAffinityReason({ name, signals } = {}) {
   }
 }
 
+/* ── Relisten source classification (v2.1 source picker) ─────────────────────
+ *
+ * Tape traders care about SBD vs AUD vs MTX vs FM in a way the v1.x source
+ * picker didn't reflect — every audience-style recording was labelled
+ * "🎧 Audience N" even when the source was actually a Matrix. The Relisten
+ * API ships two reliable signals:
+ *
+ *   1. `source` — free-text string the taper or transferrer wrote. Common
+ *      values: "Soundboard", "SBD", "AUD", "Matrix (see notes)", "FM
+ *      broadcast", "Master cassette". Highly inconsistent capitalisation
+ *      and wording, but reliably contains a recognisable token.
+ *   2. `upstream_identifier` — the archive.org item ID, which follows a
+ *      strong convention like `gd77-05-08.sbd.hicks.4982.sbeok.shnf` —
+ *      `.sbd.` / `.aud.` / `.matrix.` / `.mtx.` / `.fm.` segments classify
+ *      the source unambiguously.
+ *
+ * `is_soundboard` is only used as the safe fallback when nothing else
+ * resolves — it's true for SBDs AND for Matrix recordings that mix in a
+ * board feed, so by itself it conflates two distinct classes that taper
+ * communities treat very differently.
+ *
+ * Returns one of:
+ *   { type: 'SBD' | 'AUD' | 'MTX' | 'FM', label: '…' }
+ *
+ * `MD` ("Master") deliberately isn't a separate classification — a "master"
+ * is the original recording medium of either an SBD or AUD source, so the
+ * token alone doesn't tell us anything meaningful for a quick-scan badge.
+ * "Audience cassette master" should be AUD; "Soundboard master DAT" should
+ * be SBD; bare "Master cassette" with no other qualifier falls through to
+ * AUD (the more common case in circulation).
+ * ────────────────────────────────────────────────────────────────────── */
+export function classifySource(source) {
+  if (!source) return { type: 'AUD', label: 'Audience' };
+
+  const src = (source.source ?? '').toLowerCase();
+  const up  = (source.upstream_identifier ?? '').toLowerCase();
+  const has = (re) => re.test(src) || re.test(up);
+
+  // Order matters: matrix BEFORE soundboard (matrices often contain "sbd"
+  // in the description too); audience BEFORE soundboard handling so that
+  // "audience master" reads as AUD rather than getting caught by a board
+  // qualifier elsewhere in the same string.
+  if (has(/\bmatrix\b|\bmtx\b|\.mtx\.|\.matrix\./))    return { type: 'MTX', label: 'Matrix' };
+  if (has(/\bfm\b|\.fm\.|broadcast/))                  return { type: 'FM',  label: 'FM broadcast' };
+  if (has(/\baud\b|audience|\.aud\./))                 return { type: 'AUD', label: 'Audience' };
+  if (has(/\bsbd\b|soundboard|\.sbd\./))               return { type: 'SBD', label: 'Soundboard' };
+
+  // No textual signal — fall back to the boolean flag.
+  if (source.is_soundboard) return { type: 'SBD', label: 'Soundboard' };
+  return { type: 'AUD', label: 'Audience' };
+}
+
+/** Pick a human-friendly taper label for the source chip. Returns null when
+ *  the field is empty, boilerplate ("See info file"), or "Unknown" — these
+ *  add no value to a chip and just take space. Truncates long entries. */
+export function formatTaperLabel(source) {
+  const raw = (source?.taper ?? '').trim();
+  if (!raw) return null;
+  if (/^(see info file|unknown|n\/a|none|various)\b/i.test(raw)) return null;
+  if (raw.length > 40) return raw.slice(0, 37) + '…';
+  return raw;
+}
+
+/** True when the given source is *clearly* the best of the bunch — well-
+ *  rated, well-reviewed, and meaningfully better than the next contender.
+ *  Used to mark the BEST badge on the source picker. Conservative on
+ *  purpose: shows where the top two are within 0.1 of each other don't
+ *  get the badge (it'd just be misleading). */
+export function isBestSource(source, allSources) {
+  if (!source || !Array.isArray(allSources) || allSources.length < 2) return false;
+  const rating  = source.avg_rating ?? 0;
+  const reviews = source.num_reviews ?? source.review_count ?? 0;
+  if (rating < 9 || reviews < 10) return false;
+  const sorted = [...allSources].sort((a, b) => (b.avg_rating ?? 0) - (a.avg_rating ?? 0));
+  if (sorted[0] !== source) return false;
+  const second = sorted[1]?.avg_rating ?? 0;
+  return (rating - second) >= 0.1;
+}
+
 /* ── Semver-ish comparison (update notifier) ──────────────────────────────── */
 
 /** Compare two semver-ish strings (e.g. "1.9.0" vs "1.10.0").