feat: add frontend speaker naming card for diarization

Shows a card with excerpt navigation and name inputs when the backend
emits speakers_unknown. Submitting posts the mapping to /speakers or
leaves speakers anonymous; handles awaiting_speakers status label.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/app.js

@@ -13,10 +13,19 @@ const modalCloseBtn = document.getElementById('modal-close-btn');
 let _modalPath = null;
 let _modalFilename = null;
 
+const speakerCard = document.getElementById('speaker-card');
+const speakerRows = document.getElementById('speaker-rows');
+const speakerConfirmBtn = document.getElementById('speaker-confirm-btn');
+const speakerAnonymBtn = document.getElementById('speaker-anonym-btn');
+
+// state for excerpt navigation: { speakerId: { excerpts: [], idx: 0 } }
+let _speakerState = {};
+
 const STATUS_LABELS = {
   idle: 'Bereit',
   recording: 'Aufnahme läuft\u2026',
   processing: 'Wird verarbeitet\u2026',
+  awaiting_speakers: 'Sprecher benennen\u2026',
   error: 'Fehler',
 };
 
@@ -68,6 +77,9 @@ modalOpenBtn.addEventListener('click', () => {
   if (_modalPath) apiFetch('/open', { method: 'POST', body: JSON.stringify({ path: _modalPath }) });
 });
 
+speakerConfirmBtn.addEventListener('click', () => submitSpeakers(true));
+speakerAnonymBtn.addEventListener('click', () => submitSpeakers(false));
+
 instructionsEl.addEventListener('input', async () => {
   await apiFetch('/instructions', {
     method: 'POST',
@@ -107,10 +119,88 @@ function connectWs() {
     if (msg.event === 'error') {
       setStatus('error');
     }
+    if (msg.event === 'speakers_unknown') {
+      setStatus('awaiting_speakers');
+      showSpeakerCard(msg.speakers);
+    }
   };
   ws.onclose = () => setTimeout(connectWs, 2000);
 }
 
+function showSpeakerCard(speakers) {
+  _speakerState = {};
+  speakerRows.innerHTML = '';
+  speakers.forEach(({ id, excerpts }) => {
+    _speakerState[id] = { excerpts, idx: 0 };
+
+    const row = document.createElement('div');
+    row.className = 'speaker-row';
+
+    const nav = document.createElement('div');
+    nav.className = 'excerpt-nav';
+
+    const prevBtn = document.createElement('button');
+    prevBtn.className = 'excerpt-nav-btn';
+    prevBtn.textContent = '‹';
+    prevBtn.title = 'Vorheriger Ausschnitt';
+
+    const nextBtn = document.createElement('button');
+    nextBtn.className = 'excerpt-nav-btn';
+    nextBtn.textContent = '›';
+    nextBtn.title = 'Nächster Ausschnitt';
+
+    const counter = document.createElement('span');
+    counter.className = 'excerpt-counter';
+
+    const excerptEl = document.createElement('div');
+    excerptEl.className = 'speaker-excerpt';
+
+    function updateExcerpt() {
+      const st = _speakerState[id];
+      excerptEl.textContent = `"${st.excerpts[st.idx]}"`;
+      counter.textContent = `${st.idx + 1} / ${st.excerpts.length}`;
+      prevBtn.disabled = st.idx === 0;
+      nextBtn.disabled = st.idx === st.excerpts.length - 1;
+    }
+
+    prevBtn.addEventListener('click', () => { _speakerState[id].idx--; updateExcerpt(); });
+    nextBtn.addEventListener('click', () => { _speakerState[id].idx++; updateExcerpt(); });
+
+    nav.append(prevBtn, counter, nextBtn);
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'speaker-name-input';
+    input.placeholder = `Name für ${id.replace('SPEAKER_', 'Sprecher ')}`;
+    input.dataset.speakerId = id;
+
+    row.append(nav, excerptEl, input);
+    speakerRows.appendChild(row);
+    updateExcerpt();
+  });
+  speakerCard.classList.remove('hidden');
+}
+
+function hideSpeakerCard() {
+  speakerCard.classList.add('hidden');
+  speakerRows.innerHTML = '';
+  _speakerState = {};
+}
+
+async function submitSpeakers(useNames) {
+  const mapping = {};
+  if (useNames) {
+    speakerRows.querySelectorAll('.speaker-name-input').forEach(inp => {
+      mapping[inp.dataset.speakerId] = inp.value.trim();
+    });
+  } else {
+    Object.keys(_speakerState).forEach(id => { mapping[id] = ''; });
+  }
+  hideSpeakerCard();
+  setStatus('processing');
+  await apiFetch('/speakers', { method: 'POST', body: JSON.stringify(mapping) });
+}
+
 async function loadTranscripts() {
   const r = await apiFetch('/transcripts');
   if (!r.ok) return;