feat: Research: NotebookLM — create audio overview of SOUL.md as podcast (#293)

Refs #293
Agent: groq

app.js

@@ -2719,6 +2719,40 @@ document.getElementById('audio-toggle').addEventListener('click', () => {
   }
 });
 
+// Podcast toggle logic
+document.getElementById('podcast-toggle').addEventListener('click', async () => {
+  const btn = document.getElementById('podcast-toggle');
+  const wasActive = btn.classList.contains('active');
+  if (wasActive) {
+    // Stop podcast
+    btn.classList.remove('active');
+    btn.textContent = '🎙️';
+    return;
+  }
+
+  btn.classList.add('active');
+  btn.textContent = '🔊';
+
+  try {
+    const response = await fetch('SOUL.md');
+    const text = await response.text();
+    const cleanText = text
+      .split('\n')
+      .filter(line => line.trim() && !line.startsWith('#'))
+      .join(' ');
+
+    // Mock TTS: Replace with real TTS API call in production
+    const audioUrl = `https://mock-tts.example.com/generate?text=${encodeURIComponent(cleanText)}`;
+    const audio = new Audio(audioUrl);
+    audio.play();
+  } catch (err) {
+    alert('Failed to generate podcast. Check console for details.');
+    console.error(err);
+    btn.classList.remove('active');
+    btn.textContent = '🎙️';
+  }
+});
+
 // === DEBUG MODE ===
 let debugMode = false;
 

index.html

@@ -33,6 +33,9 @@
     <button id="debug-toggle" class="chat-toggle-btn" aria-label="Toggle debug mode" style="background-color: var(--color-secondary); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
       🔍
     </button>
+    <button id="podcast-toggle" class="chat-toggle-btn" aria-label="Generate audio podcast" title="Generate audio podcast from SOUL.md" style="background-color: var(--color-accent); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
+      🎙
+    </button>
     <button id="export-session" class="chat-toggle-btn" aria-label="Export session as markdown" title="Export session log as Markdown">
       📥
     </button>

style.css

@@ -62,6 +62,16 @@ canvas {
   background-color: var(--color-text-muted);
 }
 
+#podcast-toggle {
+  background-color: var(--color-accent);
+  color: var(--color-bg);
+  transition: background-color 0.2s ease;
+}
+
+#podcast-toggle:hover {
+  background-color: var(--color-primary);
+}
+
 /* === DEBUG MODE === */
 #debug-toggle {
   margin-left: 8px;