app.js

@@ -2784,21 +2784,35 @@ document.getElementById('podcast-toggle').addEventListener('click', () => {
         return response.text();
       })
       .then(text => {
-        const utterance = new SpeechSynthesisUtterance(text);
-        utterance.lang = 'en-US';
-        utterance.rate = 0.9;
-        utterance.pitch = 0.9;
+        const paragraphs = text.split('\n\n').filter(p => p.trim());
+        
+        if (!paragraphs.length) {
+          throw new Error('No content found in SOUL.md');
+        }
+
+        let index = 0;
+        const speakNext = () => {
+          if (index >= paragraphs.length) return;
+          
+          const utterance = new SpeechSynthesisUtterance(paragraphs[index++]);
+          utterance.lang = 'en-US';
+          utterance.rate = 0.9;
+          utterance.pitch = 1.1;
+          
+          utterance.onend = () => {
+            setTimeout(speakNext, 800); // 800ms pause between paragraphs
+          };
+          
+          speechSynthesis.speak(utterance);
+        };
+        
         btn.textContent = '⏹';
         btn.classList.add('active');
-        speechSynthesis.speak(utterance);
-        utterance.onend = () => {
-          btn.textContent = '🎧';
-          btn.classList.remove('active');
-        };
+        speakNext();
       })
       .catch(err => {
         console.error('Podcast error:', err);
-        alert('Could not load SOUL.md for audio playback.');
+        alert('Could not load SOUL.md. Check console for details.');
         btn.textContent = '🎧';
       });
   } else {

index.html

@@ -36,7 +36,7 @@
     <button id="export-session" class="chat-toggle-btn" aria-label="Export session as markdown" title="Export session log as Markdown">
       📥
     </button>
-    <button id="podcast-toggle" class="chat-toggle-btn" aria-label="Start podcast of SOUL.md" title="Play SOUL.md as audio">
+    <button id="podcast-toggle" class="chat-toggle-btn" aria-label="Start podcast of SOUL.md" title="Play SOUL.md as audio" style="margin-left: 8px; background-color: var(--color-accent); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
       🎧
     </button>
     <button id="timelapse-btn" class="chat-toggle-btn" aria-label="Start time-lapse replay" title="Time-lapse: replay today&#39;s activity in 30s [L]">