diff --git a/clio-ui/components/RecordingDetail.jsx b/clio-ui/components/RecordingDetail.jsx
index a8c2b5b..81bfa86 100644
--- a/clio-ui/components/RecordingDetail.jsx
+++ b/clio-ui/components/RecordingDetail.jsx
@@ -4,6 +4,7 @@ const { useState: useStateRD, useEffect: useEffectRD, useRef: useRefRD, useCallb
 const API_BASE = '';
 
 function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHighlights, initialSeekTime, onSeekHandled }) {
+  console.log('[RecordingDetail] render, recording id:', r?.id, 'r.durationMinutes:', r?.durationMinutes);
   const [currentTime, setCurrentTime] = useStateRD(0); // seconds into recording
   const [playing, setPlaying] = useStateRD(false);
   const [speed, setSpeed] = useStateRD(1.0);
@@ -16,7 +17,9 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
   const transcriptRef = useRefRD(null);
 
   // Use actual audio duration if available, fallback to metadata
-  const totalSeconds = audioDuration || r.durationMinutes * 60;
+  const metadataDuration = r.durationMinutes * 60;
+  const totalSeconds = audioDuration || metadataDuration || 1; // avoid division by zero
+  console.log('[duration] audioDuration:', audioDuration, 'r.durationMinutes:', r.durationMinutes, 'totalSeconds:', totalSeconds);
   const recHighlights = allHighlights.filter(h => h.recordingId === r.id);
 
   // Audio URL from API
@@ -126,7 +129,7 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
       audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
       audio.removeEventListener('durationchange', handleDurationChange);
     };
-  }, []);
+  }, [r.id]); // Re-attach listeners when recording changes
 
   // Sync playback rate with speed state
   useEffectRD(() => {