feat: show TTS delivery status in session live view

Made-with: Cursor

src/api/teamsbotApi.ts

@@ -158,7 +158,7 @@ export interface AuthTestResults {
 
 // SSE Event Types
 export interface TeamsbotSSEEvent {
-  type: 'transcript' | 'botResponse' | 'analysis' | 'suggestedResponse' | 'statusChange' | 'error' | 'ping' | 'sessionState';
+  type: 'transcript' | 'botResponse' | 'analysis' | 'suggestedResponse' | 'statusChange' | 'error' | 'ping' | 'sessionState' | 'ttsDeliveryStatus';
   data: any;
   timestamp?: string;
 }

src/pages/views/teamsbot/TeamsbotSessionView.tsx

@@ -30,6 +30,12 @@ export const TeamsbotSessionView: React.FC = () => {
   const [screenshots, setScreenshots] = useState<ScreenshotInfo[]>([]);
   const [screenshotsLoading, setScreenshotsLoading] = useState(false);
   const [screenshotsLoaded, setScreenshotsLoaded] = useState(false);
+  const [ttsStatusEvents, setTtsStatusEvents] = useState<Array<{
+    status: string;
+    message?: string;
+    hasWebSocket?: boolean;
+    timestamp: string;
+  }>>([]);
 
   const transcriptEndRef = useRef<HTMLDivElement>(null);
   const eventSourceRef = useRef<EventSource | null>(null);
@@ -111,6 +117,20 @@ export const TeamsbotSessionView: React.FC = () => {
             // Debug info - could show in UI
             break;
 
+          case 'ttsDeliveryStatus': {
+            const payload = sseEvent.data || {};
+            setTtsStatusEvents((prev) => [
+              ...prev.slice(-24),
+              {
+                status: payload.status || 'unknown',
+                message: payload.message,
+                hasWebSocket: payload.hasWebSocket,
+                timestamp: payload.timestamp || new Date().toISOString(),
+              },
+            ]);
+            break;
+          }
+
           case 'suggestedResponse':
             // Manual mode: show suggested response
             break;
@@ -303,6 +323,25 @@ export const TeamsbotSessionView: React.FC = () => {
         </div>
       )}
 
+      {/* TTS Delivery Debug */}
+      <div className={styles.summaryCard}>
+        <h4 className={styles.panelTitle}>TTS Delivery Status</h4>
+        {ttsStatusEvents.length === 0 ? (
+          <div className={styles.emptyState}>Noch keine TTS-Events.</div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+            {ttsStatusEvents.slice(-10).reverse().map((ev, idx) => (
+              <div key={`${ev.timestamp}-${idx}`} className={styles.responseMeta}>
+                <span>{_formatTime(ev.timestamp)}</span>
+                <span>{ev.status}</span>
+                <span>ws: {ev.hasWebSocket ? 'yes' : 'no'}</span>
+                <span>{ev.message || ''}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
       {/* Debug Screenshots (SysAdmin only) */}
       {_isSysAdmin && (
         <div className={styles.summaryCard}>