feat: card-based Sample Library layout with grouping

Redesigned WAV Browser as a structured Sample Library with card layout:
- WAVs grouped by library (ISO name) and program (volume name)
- Library cards with collapsible headers showing program/sample counts
- Program sections within each library
- Sample cards in a compact grid with play-on-click

Updated playWav to show a clean sample name in the player bar,
hide the player when playback ends, and use sample-card selectors
for active-state highlighting.

Clean display names (underscores → spaces, stripped .wav extensions)

web/ui/app.js

@@ -200,42 +200,109 @@ let animationFrame = null;
 
 document.getElementById('wav-browse-btn').addEventListener('click', browseWavs);
 
+function groupWavs(paths) {
+  const libs = {};
+  for (const p of paths) {
+    const parts = p.split('/');
+    let lib, prog, file;
+    if (parts.length === 1) {
+      file = parts[0];
+    } else if (parts.length === 2) {
+      lib = parts[0]; prog = parts[0]; file = parts[1];
+    } else {
+      lib = parts[0]; prog = parts[1]; file = parts[parts.length - 1];
+    }
+    if (!libs[lib]) libs[lib] = {};
+    if (!libs[lib][prog]) libs[lib][prog] = [];
+    libs[lib][prog].push({ fullPath: p, name: file.replace(/\.wav$/i, '') });
+  }
+  return libs;
+}
+
+function cleanName(name) {
+  return name.replace(/_+/g, ' ').trim();
+}
+
+function renderSampleCards(samples) {
+  return samples.map(s => `
+    <div class="sample-card" data-action="play" data-wav="${esc(s.fullPath)}">
+      <span class="sample-name" title="${esc(s.name)}">${esc(s.name)}</span>
+      <span class="sample-play-icon">▶</span>
+    </div>
+  `).join('');
+}
+
+function renderPrograms(programs) {
+  const progNames = Object.keys(programs).sort();
+  return progNames.map(prog => {
+    const samples = programs[prog];
+    return `
+      <div class="program-card">
+        <div class="program-header">
+          <h4>${esc(cleanName(prog))}</h4>
+          <span class="prog-meta">${samples.length} samples</span>
+        </div>
+        <div class="program-samples">
+          ${renderSampleCards(samples)}
+        </div>
+      </div>`;
+  }).join('');
+}
+
+function renderLibraries(libs) {
+  const libNames = Object.keys(libs).sort();
+  return libNames.map(lib => {
+    const programs = libs[lib];
+    const progCount = Object.keys(programs).length;
+    const sampleCount = Object.values(programs).reduce((sum, s) => sum + s.length, 0);
+    return `
+      <div class="library-card">
+        <div class="library-header">
+          <h3>${esc(cleanName(lib))}</h3>
+          <span class="lib-meta">${progCount} programs · ${sampleCount} samples</span>
+        </div>
+        <div class="library-programs">
+          ${renderPrograms(programs)}
+        </div>
+      </div>`;
+  }).join('');
+}
+
 async function browseWavs() {
   const dir = document.getElementById('wav-dir').value;
+  const results = document.getElementById('wav-results');
+  const summary = document.getElementById('wav-summary');
   const list = document.getElementById('wav-list');
   list.innerHTML = 'Loading...';
-  console.log('browseWavs: dir =', dir);
 
   try {
     const url = `${API}/list-wavs?dir=${encodeURIComponent(dir)}`;
-    console.log('browseWavs: fetching', url);
     const resp = await fetch(url);
-    console.log('browseWavs: response status', resp.status, 'ok', resp.ok);
 
     if (!resp.ok) {
       list.innerHTML = '<span class="no-files">HTTP ' + resp.status + '</span>';
+      results.style.display = 'block';
       return;
     }
     const data = await resp.json();
-    console.log('browseWavs: parsed data', data, 'type', typeof data, 'isArray', Array.isArray(data));
     if (!data || data.error) {
       list.innerHTML = '<span class="no-files">Error: ' + (data && data.error ? data.error : 'server error') + '</span>';
+      results.style.display = 'block';
       return;
     }
     if (!Array.isArray(data) || data.length === 0) {
       list.innerHTML = '<span class="no-files">No WAV files found</span>';
+      results.style.display = 'block';
       return;
     }
-    console.log('browseWavs: found', data.length, 'wavs');
-    list.innerHTML = data.map(f => `
-      <div class="wav-item" data-file="${esc(f)}">
-        <span class="wav-name" title="${esc(f)}">${esc(f)}</span>
-        <button class="wav-play-btn" data-action="play" data-wav="${esc(f)}">Play</button>
-      </div>
-    `).join('');
+    const libs = groupWavs(data);
+    const libCount = Object.keys(libs).length;
+    summary.textContent = libCount + ' librar' + (libCount === 1 ? 'y' : 'ies') + ' · ' + data.length + ' samples';
+    list.innerHTML = renderLibraries(libs);
+    results.style.display = 'block';
   } catch (e) {
-    console.error('browseWavs: error', e);
     list.innerHTML = 'Failed: ' + e.message;
+    results.style.display = 'block';
   }
 }
 
@@ -255,8 +322,11 @@ async function playWav(filename) {
     animationFrame = null;
   }
 
+  const name = filename.split('/').pop().replace(/\.wav$/i, '');
+  const player = document.getElementById('wav-player');
   const nowPlaying = document.getElementById('wav-now-playing');
-  nowPlaying.textContent = 'Loading: ' + filename;
+  player.style.display = 'block';
+  nowPlaying.textContent = 'Loading: ' + name;
 
   try {
     const resp = await fetch(`/wavs/${encodeURIComponent(filename)}`);
@@ -276,6 +346,7 @@ async function playWav(filename) {
         document.getElementById('wav-progress-fill').style.width = '0%';
         document.getElementById('wav-time').textContent = formatTime(0);
         clearActiveItem();
+        player.style.display = 'none';
       }
     };
 
@@ -284,7 +355,7 @@ async function playWav(filename) {
     isPlaying = true;
     pauseOffset = 0;
 
-    nowPlaying.textContent = '▶ ' + filename;
+    nowPlaying.textContent = '▶ ' + name;
     setActiveItem(filename);
     updateProgress();
   } catch (e) {
@@ -308,13 +379,13 @@ function updateProgress() {
 }
 
 function setActiveItem(filename) {
-  document.querySelectorAll('.wav-item').forEach(el => {
-    el.classList.toggle('playing', el.dataset.file === filename);
+  document.querySelectorAll('.sample-card').forEach(el => {
+    el.classList.toggle('playing', el.dataset.wav === filename);
   });
 }
 
 function clearActiveItem() {
-  document.querySelectorAll('.wav-item').forEach(el => {
+  document.querySelectorAll('.sample-card').forEach(el => {
     el.classList.remove('playing');
   });
 }