Add show improvement features: crossfade, emotions, returning callers, transcripts, screening

- Music crossfade: smooth 3-second blend between tracks instead of hard stop/start
- Emotional detection: analyze host mood from recent messages so callers adapt tone
- AI caller summaries: generate call summaries with timestamps for show history
- Returning callers: persist regular callers across sessions with call history
- Session export: generate transcripts with speaker labels and chapter markers
- Caller screening: AI pre-screens phone callers to get name and topic while queued

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

frontend/css/style.css

@@ -593,6 +593,23 @@ section h2 {
 .hangup-btn.small { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
 .auto-followup-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #999; margin-top: 0.5rem; }
 
+/* Returning Caller */
+.caller-btn.returning {
+    border-color: #f9a825;
+    color: #f9a825;
+}
+
+.caller-btn.returning:hover {
+    border-color: #fdd835;
+}
+
+/* Screening Badges */
+.screening-badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: bold; }
+.screening-badge.screening { background: #e65100; color: white; animation: pulse 1.5s infinite; }
+.screening-badge.screened { background: #2e7d32; color: white; }
+.screening-summary { font-size: 0.8rem; color: #aaa; font-style: italic; flex-basis: 100%; margin-top: 0.2rem; }
+.queue-item { flex-wrap: wrap; }
+
 /* Three-Party Chat */
 .message.real-caller { border-left: 3px solid #c62828; padding-left: 0.5rem; }
 .message.ai-caller { border-left: 3px solid #1565c0; padding-left: 0.5rem; }

frontend/index.html

@@ -13,6 +13,7 @@
             <div class="header-buttons">
                 <button id="on-air-btn" class="on-air-btn off">OFF AIR</button>
                 <button id="new-session-btn" class="new-session-btn">New Session</button>
+                <button id="export-session-btn">Export</button>
                 <button id="settings-btn">Settings</button>
             </div>
         </header>

frontend/js/app.js

@@ -85,6 +85,9 @@ function initEventListeners() {
         });
     }
 
+    // Export session
+    document.getElementById('export-session-btn')?.addEventListener('click', exportSession);
+
     // Server controls
     document.getElementById('restart-server-btn')?.addEventListener('click', restartServer);
     document.getElementById('stop-server-btn')?.addEventListener('click', stopServer);
@@ -351,7 +354,8 @@ async function loadCallers() {
         data.callers.forEach(caller => {
             const btn = document.createElement('button');
             btn.className = 'caller-btn';
-            btn.textContent = caller.name;
+            if (caller.returning) btn.classList.add('returning');
+            btn.textContent = caller.returning ? `\u2605 ${caller.name}` : caller.name;
             btn.dataset.key = caller.key;
             btn.addEventListener('click', () => startCall(caller.key, caller.name));
             grid.appendChild(btn);
@@ -996,10 +1000,21 @@ function renderQueue(queue) {
         const mins = Math.floor(caller.wait_time / 60);
         const secs = caller.wait_time % 60;
         const waitStr = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+        const displayName = caller.caller_name || caller.phone;
+        const screenBadge = caller.screening_status === 'complete'
+            ? '<span class="screening-badge screened">Screened</span>'
+            : caller.screening_status === 'screening'
+            ? '<span class="screening-badge screening">Screening...</span>'
+            : '';
+        const summary = caller.screening_summary
+            ? `<div class="screening-summary">${caller.screening_summary}</div>`
+            : '';
         return `
             <div class="queue-item">
-                <span class="queue-name">${caller.phone}</span>
+                <span class="queue-name">${displayName}</span>
+                ${screenBadge}
                 <span class="queue-wait">waiting ${waitStr}</span>
+                ${summary}
                 <button class="queue-take-btn" onclick="takeCall('${caller.caller_id}')">Take Call</button>
                 <button class="queue-drop-btn" onclick="dropCall('${caller.caller_id}')">Drop</button>
             </div>
@@ -1155,6 +1170,23 @@ async function fetchConversationUpdates() {
 }
 
 
+async function exportSession() {
+    try {
+        const res = await safeFetch('/api/session/export');
+        const blob = new Blob([JSON.stringify(res, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `session-${res.session_id}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+        log(`Exported session: ${res.call_count} calls`);
+    } catch (err) {
+        log('Export error: ' + err.message);
+    }
+}
+
+
 async function stopServer() {
     if (!confirm('Stop the server? You will need to restart it manually.')) return;