GUI: Sprecher-Verlauf als Vollbreiten-Streifen unter dem Player

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

app/web/src/main.js

@@ -389,14 +389,11 @@ async function openRecording(id) {
   const durMs = r.duration_ms || (r.words && r.words.length ? r.words[r.words.length - 1].t_end_ms : 0) || 1;
 
   // Draggable module blocks; the saved order wins, unknown/new modules append.
-  // The transcript is NOT a module: it lives in its own sticky, inner-scrolling
+  // NOT modules: the transcript (own sticky right column) and the speaker-lane
-  // right column so the (long) text never stretches the page.
+  // visualizer (fixed full-width strip under the player, spanning both columns).
-  const MOD_TITLES = { analyse: 'Zusammenfassung', viz: 'Sprecher-Verlauf', todos: 'ToDos', speakers: 'Sprecher' };
+  const MOD_TITLES = { analyse: 'Zusammenfassung', todos: 'ToDos', speakers: 'Sprecher' };
-  const mods = {
+  const vizHtml = spkOrder.length ? `
-    analyse: `
+      <div class="viz-top">
-        ${r.summary ? `<p class="summary">${escapeHtml(r.summary)}</p>` : '<div class="muted">Noch keine Zusammenfassung.</div>'}
-        ${(r.participants && r.participants.length) ? `<h3>Teilnehmer</h3><ul class="parts">${r.participants.map(p => `<li>👤 ${escapeHtml(p)}</li>`).join('')}</ul>` : ''}`,
-    viz: spkOrder.length ? `
         <div class="viz-wrap">
           <div class="lanes" id="lanes">
             ${spkOrder.map((sp, i) => `
@@ -410,7 +407,11 @@ async function openRecording(id) {
           </div>
           <div class="livebox" id="livebox"><div class="muted">▶ Abspielen — hier erscheint, was gerade gesprochen wird.</div></div>
         </div>
-        <div class="hint">Klick in die Spuren springt an die Stelle.</div>` : '<div class="muted">Keine Sprecherdaten.</div>',
+      </div>` : '';
+  const mods = {
+    analyse: `
+        ${r.summary ? `<p class="summary">${escapeHtml(r.summary)}</p>` : '<div class="muted">Noch keine Zusammenfassung.</div>'}
+        ${(r.participants && r.participants.length) ? `<h3>Teilnehmer</h3><ul class="parts">${r.participants.map(p => `<li>👤 ${escapeHtml(p)}</li>`).join('')}</ul>` : ''}`,
     todos: (r.todos && r.todos.length) ? `<ul class="todos">${r.todos.map(t => `<li>${escapeHtml(t)}</li>`).join('')}</ul>` : '<div class="muted">Keine ToDos erkannt.</div>',
     speakers: spkOrder.length ? `
         <div class="hint">Namen vergeben → App lernt die Stimme.</div>
@@ -423,7 +424,7 @@ async function openRecording(id) {
           </div>`).join('')}
         </div>` : '',
   };
-  const defOrder = ['analyse', 'viz', 'todos', 'speakers'];
+  const defOrder = ['analyse', 'todos', 'speakers'];
   let order = [];
   try { order = JSON.parse(localStorage.getItem('aime-detail-order') || '[]'); } catch {}
   order = order.filter(m => mods[m] !== undefined).concat(defOrder.filter(m => !order.includes(m)));
@@ -432,6 +433,7 @@ async function openRecording(id) {
     <div class="card">
       <h2>${escapeHtml(r.title) || 'Aufnahme #' + r.id} ${analysisBadge(r.analysis_status)}</h2>
       <audio id="player" controls src="/media/${r.mp3_file}" preload="metadata"></audio>
+      ${vizHtml}
       <div class="status-line">
         ${anaTimeSpan(r) ? `<div class="muted ana-line">⏱ Analysezeit: ${anaTimeSpan(r)}</div>` : ''}
         ${transcribing ? '<div class="muted">📝 Transkription läuft… lange Aufnahmen dauern (A76-Takt gegen Überhitzung gedrosselt).</div>' : ''}

app/web/src/style.css

@@ -224,7 +224,11 @@ audio { width: 100%; margin-bottom: 10px; }
 .mod-body { padding: 12px; }
 .mod-body h3 { margin: 10px 0 4px; font-size: .9rem; color: var(--muted); }
 
-/* ---- Sprecher-Verlauf: Lanes + Live-Text ---- */
+/* ---- Sprecher-Verlauf: fester Streifen unter dem Player, volle Breite ---- */
+.viz-top {
+  margin: 4px 0 10px; padding: 10px 12px; background: var(--inset);
+  border: 1px solid var(--line); border-radius: 12px;
+}
 .viz-wrap { display: flex; gap: 14px; align-items: stretch; }
 .lanes { flex: 1 1 58%; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
 .lane-row { display: flex; align-items: center; gap: 8px; }
@@ -247,9 +251,11 @@ audio { width: 100%; margin-bottom: 10px; }
   background: var(--accent); border-radius: 1px; pointer-events: none; z-index: 2;
   transition: left .25s linear;
 }
+.lanes { flex: 1 1 66%; }
 .livebox {
-  flex: 1 1 42%; min-width: 0; background: var(--surface-2); border-radius: 10px;
+  flex: 1 1 34%; min-width: 0; background: var(--surface-2); border-radius: 10px;
-  padding: 12px; max-height: 200px; overflow-y: auto; align-self: stretch;
+  padding: 10px 12px; max-height: 132px; overflow-y: auto; align-self: stretch;
+  font-size: 14px;
 }
 .live-turn .spk { display: block; font-weight: 650; font-size: 12px; margin-bottom: 4px; }
 .live-turn.sp0 .spk { color: var(--sp0); } .live-turn.sp1 .spk { color: var(--sp1); }

docs/08-changelog.md

@@ -3,6 +3,12 @@
 Chronik der Entwicklungsschritte. **Regel: jede zukünftige Änderung bekommt hier einen Eintrag** (Datum,
 Was, Warum, betroffene Dateien/Backups).
 
+## 2026-07-17 — GUI: Sprecher-Verlauf als Vollbreiten-Streifen unter dem Player
+
+Der Sprecher-Verlauf (Spuren + Live-Text) sitzt jetzt fix unter der Audio-Laufleiste und zieht sich
+ueber BEIDE Spalten (oberhalb von Zusammenfassung und Transkript); aus den Drag&Drop-Modulen entfernt.
+Lanes ~2/3, Live-Box ~1/3 Breite. Bundle `index-COpkdtd3.js`.
+
 ## 2026-07-17 — GUI: Transkript als eigene Scroll-Spalte
 
 Transkript (+ Dialog) aus den Drag&Drop-Modulen herausgelöst: eigene, sticky Spalte rechts neben